import { useMemo } from 'react';
import { u as useBreakpoint } from './useBreakpoint-CeaUyHxh.js';
import { p as primitive } from './primitive-DXlHdTFb.js';

const sizeToToken = (value) => {
  if (typeof value === "undefined") return void 0;
  let gap = value;
  const stringifiedValue = String(value);
  if (stringifiedValue === "half") {
    gap = `${stringifiedValue[0].toUpperCase()}${stringifiedValue.slice(1)}`;
  }
  return primitive?.[`Size${gap}`]?.value;
};

const LAYOUT_PROP_ARR = [
  "gridTemplateColumns",
  "gridTemplateRows",
  "gridTemplateAreas",
  "gridAutoColumns",
  "gridAutoRows",
  "gridArea",
  "gridColumn",
  "gridRow",
  "gridColumnStart",
  "gridColumnEnd",
  "gridRowStart",
  "gridRowEnd",
  "flex",
  "flexDirection",
  "flexGrow",
  "flexShrink",
  "flexBasis",
  "flexWrap",
  "order",
  "justifySelf",
  "justifyItems",
  "justifyContent",
  "alignSelf",
  "alignItems",
  "alignContent",
  "placeItems",
  "placeContent",
  "placeSelf",
  "wrap",
  "gap",
  "rowGap",
  "columnGap"
];
const RESPONSIVE_SIZES_ARR = ["xs", "sm", "md", "lg", "xl", "xxl"];
function useLayoutPropsUtil(props) {
  const baseSizeProps = Object.fromEntries(
    Object.entries(props).filter(
      ([key, _val]) => LAYOUT_PROP_ARR.includes(key)
    )
  );
  const responsiveSizeProps = Object.fromEntries(
    Object.entries(props).filter(
      ([key, _val]) => RESPONSIVE_SIZES_ARR.includes(key)
    )
  );
  const sizeProps = useMemo(
    () => ({
      ...responsiveSizeProps,
      base: baseSizeProps
    }),
    [baseSizeProps, responsiveSizeProps]
  );
  const componentProps = Object.fromEntries(
    Object.entries(props).filter(
      ([key, _val]) => !RESPONSIVE_SIZES_ARR.includes(key) && !LAYOUT_PROP_ARR.includes(key)
    )
  );
  const breakpoint = useBreakpoint();
  const getValue = (style) => {
    const value = (breakpoint?.xxl ? sizeProps.xxl?.[style] : void 0) ?? (breakpoint?.xl ? sizeProps.xl?.[style] : void 0) ?? (breakpoint?.lg ? sizeProps.lg?.[style] : void 0) ?? (breakpoint?.md ? sizeProps.md?.[style] : void 0) ?? (breakpoint?.sm ? sizeProps.sm?.[style] : void 0) ?? (breakpoint?.xs ? sizeProps.xs?.[style] : void 0) ?? sizeProps.base?.[style];
    if (style.toLowerCase().endsWith("gap")) {
      return sizeToToken(value);
    }
    return value;
  };
  const layoutStyleObject = LAYOUT_PROP_ARR.reduce((o, key) => {
    const value = getValue(key);
    if (typeof value === "undefined") return o;
    return { ...o, [key]: value };
  }, {});
  return {
    layoutStyles: layoutStyleObject,
    componentProps
  };
}

export { sizeToToken as s, useLayoutPropsUtil as u };
//# sourceMappingURL=useLayoutPropsUtil-CB_zHDbW.js.map
