@tosui/react 0.1.4 → 0.1.5

package/dist/components/Box/flexbox/flexbox.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"flexbox.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"flexbox.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Box/grid/grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/grid/grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAKL,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAI/E,MAAM,MAAM,SAAS,GAAG;IACtB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,mBAAmB,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9C,gBAAgB,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAoFF,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,WAAW,CAab"}
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/grid/grid.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,WAAW,EAEjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE/E,MAAM,MAAM,SAAS,GAAG;IACtB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,mBAAmB,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC9C,gBAAgB,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;CAC5C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAqDF,wBAAgB,aAAa,CAC3B,KAAK,EAAE,SAAS,GAAG,cAAc,GAChC,WAAW,CAab"}

package/dist/components/Box/grid/grid.js

@@ -1,40 +1,17 @@
-import { STATE_CLASS_SUFFIXES, STATE_SUFFIXES, RESPONSIVE_KEYS } from "../shared/constants.js";
+import { getResponsiveVarStyles } from "../shared/responsive.js";
 import styles from "./grid.module.css.js";
 import clsx from "clsx";
 function getJustifySelfClass(value, state) {
+  const STATE_CLASS_SUFFIXES = {
+    base: "",
+    hover: "\\:h",
+    focus: "\\:f",
+    active: "\\:a",
+    disabled: "\\:d"
+  };
   const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
   return stateClassSuffix ? styles[`justify-self-${value}${stateClassSuffix}`] : styles[`justify-self-${value}`];
 }
-function getGridTemplateProp(key, varPrefix, value, state = "base") {
-  const result = { className: "", style: {} };
-  if (value === void 0) return result;
-  const stateSuffix = STATE_SUFFIXES[state];
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  if (typeof value !== "object") {
-    const className = stateClassSuffix ? styles[`${key}${stateClassSuffix}`] : styles[key];
-    result.className = className || "";
-    result.style[`--t-${varPrefix}${stateSuffix}`] = value;
-    return result;
-  }
-  for (const responsiveKey of RESPONSIVE_KEYS) {
-    const val = value[responsiveKey];
-    if (val === void 0) continue;
-    let className;
-    let varName;
-    if (responsiveKey === "base") {
-      className = stateClassSuffix ? styles[`${key}${stateClassSuffix}`] : styles[key];
-      varName = `--t-${varPrefix}${stateSuffix}`;
-    } else {
-      className = stateClassSuffix ? styles[`${key}_${responsiveKey}${stateClassSuffix}`] : styles[`${key}_${responsiveKey}`];
-      varName = `--t-${varPrefix}_${responsiveKey}${stateSuffix}`;
-    }
-    if (className) {
-      result.className = clsx(result.className, className);
-    }
-    result.style[varName] = val;
-  }
-  return result;
-}
 function getGridStylesForState(props, state) {
   if (!props) return { className: "", style: {} };
   const { justifySelf, gridTemplateColumns, gridTemplateRows } = props;
@@ -44,8 +21,20 @@ function getGridStylesForState(props, state) {
     const cls = getJustifySelfClass(justifySelf, state);
     if (cls) classes.push(cls);
   }
-  const colsResult = getGridTemplateProp("grid-cols", "grid-cols", gridTemplateColumns, state);
-  const rowsResult = getGridTemplateProp("grid-rows", "grid-rows", gridTemplateRows, state);
+  const colsResult = getResponsiveVarStyles(
+    styles,
+    "grid-cols",
+    "grid-cols",
+    gridTemplateColumns,
+    state
+  );
+  const rowsResult = getResponsiveVarStyles(
+    styles,
+    "grid-rows",
+    "grid-rows",
+    gridTemplateRows,
+    state
+  );
   return {
     className: clsx(...classes, colsResult.className, rowsResult.className),
     style: { ...style, ...colsResult.style, ...rowsResult.style }

package/dist/components/Box/grid/grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.js","sources":["../../../../src/components/Box/grid/grid.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  RESPONSIVE_KEYS,\n  STATE_SUFFIXES,\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n} from \"../shared\";\nimport styles from \"./grid.module.css\";\nimport clsx from \"clsx\";\n\nexport type JustifySelfValue = \"auto\" | \"start\" | \"end\" | \"center\" | \"stretch\";\n\ntype GridTemplateKey = \"grid-cols\" | \"grid-rows\";\n\nexport type GridProps = {\n  justifySelf?: JustifySelfValue;\n  gridTemplateColumns?: ResponsiveValue<string>;\n  gridTemplateRows?: ResponsiveValue<string>;\n};\n\nexport type GridStateProps = {\n  _hover?: GridProps;\n};\n\nfunction getJustifySelfClass(value: JustifySelfValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`justify-self-${value}${stateClassSuffix}`]\n    : styles[`justify-self-${value}`];\n}\n\nfunction getGridTemplateProp(\n  key: GridTemplateKey,\n  varPrefix: string,\n  value: ResponsiveValue<string> | undefined,\n  state: StateKey = \"base\"\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (value === undefined) return result;\n\n  const stateSuffix = STATE_SUFFIXES[state];\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n  if (typeof value !== \"object\") {\n    const className = stateClassSuffix\n      ? styles[`${key}${stateClassSuffix}`]\n      : styles[key];\n    result.className = className || \"\";\n    result.style[`--t-${varPrefix}${stateSuffix}`] = value;\n    return result;\n  }\n\n  for (const responsiveKey of RESPONSIVE_KEYS) {\n    const val = value[responsiveKey];\n    if (val === undefined) continue;\n\n    let className: string | undefined;\n    let varName: string;\n\n    if (responsiveKey === \"base\") {\n      className = stateClassSuffix\n        ? styles[`${key}${stateClassSuffix}`]\n        : styles[key];\n      varName = `--t-${varPrefix}${stateSuffix}`;\n    } else {\n      className = stateClassSuffix\n        ? styles[`${key}_${responsiveKey}${stateClassSuffix}`]\n        : styles[`${key}_${responsiveKey}`];\n      varName = `--t-${varPrefix}_${responsiveKey}${stateSuffix}`;\n    }\n\n    if (className) {\n      result.className = clsx(result.className, className);\n    }\n    result.style[varName] = val;\n  }\n\n  return result;\n}\n\nfunction getGridStylesForState(\n  props: GridProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const { justifySelf, gridTemplateColumns, gridTemplateRows } = props;\n\n  const classes: string[] = [];\n  const style: Record<string, string> = {};\n\n  if (justifySelf) {\n    const cls = getJustifySelfClass(justifySelf, state);\n    if (cls) classes.push(cls);\n  }\n\n  const colsResult = getGridTemplateProp(\"grid-cols\", \"grid-cols\", gridTemplateColumns, state);\n  const rowsResult = getGridTemplateProp(\"grid-rows\", \"grid-rows\", gridTemplateRows, state);\n\n  return {\n    className: clsx(...classes, colsResult.className, rowsResult.className),\n    style: { ...style, ...colsResult.style, ...rowsResult.style },\n  };\n}\n\nexport function getGridStyles(\n  props: GridProps & GridStateProps\n): StyleResult {\n  const { justifySelf, gridTemplateColumns, gridTemplateRows, _hover } = props;\n\n  const baseStyles = getGridStylesForState(\n    { justifySelf, gridTemplateColumns, gridTemplateRows },\n    \"base\"\n  );\n  const hoverStyles = getGridStylesForState(_hover, \"hover\");\n\n  return {\n    className: clsx(baseStyles.className, hoverStyles.className),\n    style: { ...baseStyles.style, ...hoverStyles.style } as Record<string, string>,\n  };\n}\n"],"names":[],"mappings":";;;AAyBA,SAAS,oBAAoB,OAAyB,OAAqC;AACzF,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,gBAAgB,KAAK,GAAG,gBAAgB,EAAE,IACjD,OAAO,gBAAgB,KAAK,EAAE;AACpC;AAEA,SAAS,oBACP,KACA,WACA,OACA,QAAkB,QACL;AACb,QAAM,SAAsB,EAAE,WAAW,IAAI,OAAO,CAAA,EAAC;AAErD,MAAI,UAAU,OAAW,QAAO;AAEhC,QAAM,cAAc,eAAe,KAAK;AACxC,QAAM,mBAAmB,qBAAqB,KAAK;AAEnD,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,YAAY,mBACd,OAAO,GAAG,GAAG,GAAG,gBAAgB,EAAE,IAClC,OAAO,GAAG;AACd,WAAO,YAAY,aAAa;AAChC,WAAO,MAAM,OAAO,SAAS,GAAG,WAAW,EAAE,IAAI;AACjD,WAAO;AAAA,EACT;AAEA,aAAW,iBAAiB,iBAAiB;AAC3C,UAAM,MAAM,MAAM,aAAa;AAC/B,QAAI,QAAQ,OAAW;AAEvB,QAAI;AACJ,QAAI;AAEJ,QAAI,kBAAkB,QAAQ;AAC5B,kBAAY,mBACR,OAAO,GAAG,GAAG,GAAG,gBAAgB,EAAE,IAClC,OAAO,GAAG;AACd,gBAAU,OAAO,SAAS,GAAG,WAAW;AAAA,IAC1C,OAAO;AACL,kBAAY,mBACR,OAAO,GAAG,GAAG,IAAI,aAAa,GAAG,gBAAgB,EAAE,IACnD,OAAO,GAAG,GAAG,IAAI,aAAa,EAAE;AACpC,gBAAU,OAAO,SAAS,IAAI,aAAa,GAAG,WAAW;AAAA,IAC3D;AAEA,QAAI,WAAW;AACb,aAAO,YAAY,KAAK,OAAO,WAAW,SAAS;AAAA,IACrD;AACA,WAAO,MAAM,OAAO,IAAI;AAAA,EAC1B;AAEA,SAAO;AACT;AAEA,SAAS,sBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,EAAE,aAAa,qBAAqB,iBAAA,IAAqB;AAE/D,QAAM,UAAoB,CAAA;AAC1B,QAAM,QAAgC,CAAA;AAEtC,MAAI,aAAa;AACf,UAAM,MAAM,oBAAoB,aAAa,KAAK;AAClD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,QAAM,aAAa,oBAAoB,aAAa,aAAa,qBAAqB,KAAK;AAC3F,QAAM,aAAa,oBAAoB,aAAa,aAAa,kBAAkB,KAAK;AAExF,SAAO;AAAA,IACL,WAAW,KAAK,GAAG,SAAS,WAAW,WAAW,WAAW,SAAS;AAAA,IACtE,OAAO,EAAE,GAAG,OAAO,GAAG,WAAW,OAAO,GAAG,WAAW,MAAA;AAAA,EAAM;AAEhE;AAEO,SAAS,cACd,OACa;AACb,QAAM,EAAE,aAAa,qBAAqB,kBAAkB,WAAW;AAEvE,QAAM,aAAa;AAAA,IACjB,EAAE,aAAa,qBAAqB,iBAAA;AAAA,IACpC;AAAA,EAAA;AAEF,QAAM,cAAc,sBAAsB,QAAQ,OAAO;AAEzD,SAAO;AAAA,IACL,WAAW,KAAK,WAAW,WAAW,YAAY,SAAS;AAAA,IAC3D,OAAO,EAAE,GAAG,WAAW,OAAO,GAAG,YAAY,MAAA;AAAA,EAAM;AAEvD;"}
+{"version":3,"file":"grid.js","sources":["../../../../src/components/Box/grid/grid.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  type StateKey,\n  type StyleResult,\n  getResponsiveVarStyles,\n} from \"../shared\";\nimport styles from \"./grid.module.css\";\nimport clsx from \"clsx\";\n\nexport type JustifySelfValue = \"auto\" | \"start\" | \"end\" | \"center\" | \"stretch\";\n\nexport type GridProps = {\n  justifySelf?: JustifySelfValue;\n  gridTemplateColumns?: ResponsiveValue<string>;\n  gridTemplateRows?: ResponsiveValue<string>;\n};\n\nexport type GridStateProps = {\n  _hover?: GridProps;\n};\n\nfunction getJustifySelfClass(value: JustifySelfValue, state: StateKey): string | undefined {\n  const STATE_CLASS_SUFFIXES: Record<StateKey, string> = {\n    base: \"\",\n    hover: \"\\\\:h\",\n    focus: \"\\\\:f\",\n    active: \"\\\\:a\",\n    disabled: \"\\\\:d\",\n  };\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`justify-self-${value}${stateClassSuffix}`]\n    : styles[`justify-self-${value}`];\n}\n\nfunction getGridStylesForState(\n  props: GridProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const { justifySelf, gridTemplateColumns, gridTemplateRows } = props;\n\n  const classes: string[] = [];\n  const style: Record<string, string> = {};\n\n  if (justifySelf) {\n    const cls = getJustifySelfClass(justifySelf, state);\n    if (cls) classes.push(cls);\n  }\n\n  const colsResult = getResponsiveVarStyles(\n    styles,\n    \"grid-cols\",\n    \"grid-cols\",\n    gridTemplateColumns,\n    state\n  );\n  const rowsResult = getResponsiveVarStyles(\n    styles,\n    \"grid-rows\",\n    \"grid-rows\",\n    gridTemplateRows,\n    state\n  );\n\n  return {\n    className: clsx(...classes, colsResult.className, rowsResult.className),\n    style: { ...style, ...colsResult.style, ...rowsResult.style },\n  };\n}\n\nexport function getGridStyles(\n  props: GridProps & GridStateProps\n): StyleResult {\n  const { justifySelf, gridTemplateColumns, gridTemplateRows, _hover } = props;\n\n  const baseStyles = getGridStylesForState(\n    { justifySelf, gridTemplateColumns, gridTemplateRows },\n    \"base\"\n  );\n  const hoverStyles = getGridStylesForState(_hover, \"hover\");\n\n  return {\n    className: clsx(baseStyles.className, hoverStyles.className),\n    style: { ...baseStyles.style, ...hoverStyles.style } as Record<string, string>,\n  };\n}\n"],"names":[],"mappings":";;;AAqBA,SAAS,oBAAoB,OAAyB,OAAqC;AACzF,QAAM,uBAAiD;AAAA,IACrD,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,EAAA;AAEZ,QAAM,mBAAmB,qBAAqB,KAAK;AACnD,SAAO,mBACH,OAAO,gBAAgB,KAAK,GAAG,gBAAgB,EAAE,IACjD,OAAO,gBAAgB,KAAK,EAAE;AACpC;AAEA,SAAS,sBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,EAAE,aAAa,qBAAqB,iBAAA,IAAqB;AAE/D,QAAM,UAAoB,CAAA;AAC1B,QAAM,QAAgC,CAAA;AAEtC,MAAI,aAAa;AACf,UAAM,MAAM,oBAAoB,aAAa,KAAK;AAClD,QAAI,IAAK,SAAQ,KAAK,GAAG;AAAA,EAC3B;AAEA,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEF,QAAM,aAAa;AAAA,IACjB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAGF,SAAO;AAAA,IACL,WAAW,KAAK,GAAG,SAAS,WAAW,WAAW,WAAW,SAAS;AAAA,IACtE,OAAO,EAAE,GAAG,OAAO,GAAG,WAAW,OAAO,GAAG,WAAW,MAAA;AAAA,EAAM;AAEhE;AAEO,SAAS,cACd,OACa;AACb,QAAM,EAAE,aAAa,qBAAqB,kBAAkB,WAAW;AAEvE,QAAM,aAAa;AAAA,IACjB,EAAE,aAAa,qBAAqB,iBAAA;AAAA,IACpC;AAAA,EAAA;AAEF,QAAM,cAAc,sBAAsB,QAAQ,OAAO;AAEzD,SAAO;AAAA,IACL,WAAW,KAAK,WAAW,WAAW,YAAY,SAAS;AAAA,IAC3D,OAAO,EAAE,GAAG,WAAW,OAAO,GAAG,YAAY,MAAA;AAAA,EAAM;AAEvD;"}

package/dist/components/Box/grid/grid.module.css

@@ -1,69 +1,69 @@
 /* justifySelf */
-._justify-self-auto_hzpp0_2 { justify-self: auto; }
-._justify-self-auto\:h_hzpp0_3:hover { justify-self: auto; }
-._justify-self-start_hzpp0_4 { justify-self: start; }
-._justify-self-start\:h_hzpp0_5:hover { justify-self: start; }
-._justify-self-end_hzpp0_6 { justify-self: end; }
-._justify-self-end\:h_hzpp0_7:hover { justify-self: end; }
-._justify-self-center_hzpp0_8 { justify-self: center; }
-._justify-self-center\:h_hzpp0_9:hover { justify-self: center; }
-._justify-self-stretch_hzpp0_10 { justify-self: stretch; }
-._justify-self-stretch\:h_hzpp0_11:hover { justify-self: stretch; }
+._justify-self-auto_kqdg4_2 { justify-self: auto; }
+._justify-self-auto\:h_kqdg4_3:hover { justify-self: auto; }
+._justify-self-start_kqdg4_4 { justify-self: start; }
+._justify-self-start\:h_kqdg4_5:hover { justify-self: start; }
+._justify-self-end_kqdg4_6 { justify-self: end; }
+._justify-self-end\:h_kqdg4_7:hover { justify-self: end; }
+._justify-self-center_kqdg4_8 { justify-self: center; }
+._justify-self-center\:h_kqdg4_9:hover { justify-self: center; }
+._justify-self-stretch_kqdg4_10 { justify-self: stretch; }
+._justify-self-stretch\:h_kqdg4_11:hover { justify-self: stretch; }
 
-/* gridTemplateColumns (variable-based) */
-._grid-cols_hzpp0_14 { grid-template-columns: var(--t-grid-cols); }
-._grid-cols\:h_hzpp0_15:hover { grid-template-columns: var(--t-grid-cols-h); }
+/* gridTemplateColumns */
+._grid-cols_kqdg4_14 { grid-template-columns: var(--t-grid-cols); }
+._grid-cols\:h_kqdg4_15:hover { grid-template-columns: var(--t-grid-cols-h); }
 
 @media (min-width: 640px) {
-  ._grid-cols_sm_hzpp0_18 { grid-template-columns: var(--t-grid-cols_sm); }
-  ._grid-cols_sm\:h_hzpp0_19:hover { grid-template-columns: var(--t-grid-cols_sm-h); }
+  ._grid-cols_kqdg4_14 { grid-template-columns: var(--t-grid-cols_sm, var(--t-grid-cols)); }
+  ._grid-cols\:h_kqdg4_15:hover { grid-template-columns: var(--t-grid-cols_sm-h, var(--t-grid-cols-h)); }
 }
 
 @media (min-width: 768px) {
-  ._grid-cols_md_hzpp0_23 { grid-template-columns: var(--t-grid-cols_md); }
-  ._grid-cols_md\:h_hzpp0_24:hover { grid-template-columns: var(--t-grid-cols_md-h); }
+  ._grid-cols_kqdg4_14 { grid-template-columns: var(--t-grid-cols_md, var(--t-grid-cols_sm, var(--t-grid-cols))); }
+  ._grid-cols\:h_kqdg4_15:hover { grid-template-columns: var(--t-grid-cols_md-h, var(--t-grid-cols_sm-h, var(--t-grid-cols-h))); }
 }
 
 @media (min-width: 1024px) {
-  ._grid-cols_lg_hzpp0_28 { grid-template-columns: var(--t-grid-cols_lg); }
-  ._grid-cols_lg\:h_hzpp0_29:hover { grid-template-columns: var(--t-grid-cols_lg-h); }
+  ._grid-cols_kqdg4_14 { grid-template-columns: var(--t-grid-cols_lg, var(--t-grid-cols_md, var(--t-grid-cols_sm, var(--t-grid-cols)))); }
+  ._grid-cols\:h_kqdg4_15:hover { grid-template-columns: var(--t-grid-cols_lg-h, var(--t-grid-cols_md-h, var(--t-grid-cols_sm-h, var(--t-grid-cols-h)))); }
 }
 
 @media (min-width: 1280px) {
-  ._grid-cols_xl_hzpp0_33 { grid-template-columns: var(--t-grid-cols_xl); }
-  ._grid-cols_xl\:h_hzpp0_34:hover { grid-template-columns: var(--t-grid-cols_xl-h); }
+  ._grid-cols_kqdg4_14 { grid-template-columns: var(--t-grid-cols_xl, var(--t-grid-cols_lg, var(--t-grid-cols_md, var(--t-grid-cols_sm, var(--t-grid-cols))))); }
+  ._grid-cols\:h_kqdg4_15:hover { grid-template-columns: var(--t-grid-cols_xl-h, var(--t-grid-cols_lg-h, var(--t-grid-cols_md-h, var(--t-grid-cols_sm-h, var(--t-grid-cols-h))))); }
 }
 
 @media (min-width: 1536px) {
-  ._grid-cols_2xl_hzpp0_38 { grid-template-columns: var(--t-grid-cols_2xl); }
-  ._grid-cols_2xl\:h_hzpp0_39:hover { grid-template-columns: var(--t-grid-cols_2xl-h); }
+  ._grid-cols_kqdg4_14 { grid-template-columns: var(--t-grid-cols_2xl, var(--t-grid-cols_xl, var(--t-grid-cols_lg, var(--t-grid-cols_md, var(--t-grid-cols_sm, var(--t-grid-cols)))))); }
+  ._grid-cols\:h_kqdg4_15:hover { grid-template-columns: var(--t-grid-cols_2xl-h, var(--t-grid-cols_xl-h, var(--t-grid-cols_lg-h, var(--t-grid-cols_md-h, var(--t-grid-cols_sm-h, var(--t-grid-cols-h)))))); }
 }
 
-/* gridTemplateRows (variable-based) */
-._grid-rows_hzpp0_43 { grid-template-rows: var(--t-grid-rows); }
-._grid-rows\:h_hzpp0_44:hover { grid-template-rows: var(--t-grid-rows-h); }
+/* gridTemplateRows */
+._grid-rows_kqdg4_43 { grid-template-rows: var(--t-grid-rows); }
+._grid-rows\:h_kqdg4_44:hover { grid-template-rows: var(--t-grid-rows-h); }
 
 @media (min-width: 640px) {
-  ._grid-rows_sm_hzpp0_47 { grid-template-rows: var(--t-grid-rows_sm); }
-  ._grid-rows_sm\:h_hzpp0_48:hover { grid-template-rows: var(--t-grid-rows_sm-h); }
+  ._grid-rows_kqdg4_43 { grid-template-rows: var(--t-grid-rows_sm, var(--t-grid-rows)); }
+  ._grid-rows\:h_kqdg4_44:hover { grid-template-rows: var(--t-grid-rows_sm-h, var(--t-grid-rows-h)); }
 }
 
 @media (min-width: 768px) {
-  ._grid-rows_md_hzpp0_52 { grid-template-rows: var(--t-grid-rows_md); }
-  ._grid-rows_md\:h_hzpp0_53:hover { grid-template-rows: var(--t-grid-rows_md-h); }
+  ._grid-rows_kqdg4_43 { grid-template-rows: var(--t-grid-rows_md, var(--t-grid-rows_sm, var(--t-grid-rows))); }
+  ._grid-rows\:h_kqdg4_44:hover { grid-template-rows: var(--t-grid-rows_md-h, var(--t-grid-rows_sm-h, var(--t-grid-rows-h))); }
 }
 
 @media (min-width: 1024px) {
-  ._grid-rows_lg_hzpp0_57 { grid-template-rows: var(--t-grid-rows_lg); }
-  ._grid-rows_lg\:h_hzpp0_58:hover { grid-template-rows: var(--t-grid-rows_lg-h); }
+  ._grid-rows_kqdg4_43 { grid-template-rows: var(--t-grid-rows_lg, var(--t-grid-rows_md, var(--t-grid-rows_sm, var(--t-grid-rows)))); }
+  ._grid-rows\:h_kqdg4_44:hover { grid-template-rows: var(--t-grid-rows_lg-h, var(--t-grid-rows_md-h, var(--t-grid-rows_sm-h, var(--t-grid-rows-h)))); }
 }
 
 @media (min-width: 1280px) {
-  ._grid-rows_xl_hzpp0_62 { grid-template-rows: var(--t-grid-rows_xl); }
-  ._grid-rows_xl\:h_hzpp0_63:hover { grid-template-rows: var(--t-grid-rows_xl-h); }
+  ._grid-rows_kqdg4_43 { grid-template-rows: var(--t-grid-rows_xl, var(--t-grid-rows_lg, var(--t-grid-rows_md, var(--t-grid-rows_sm, var(--t-grid-rows))))); }
+  ._grid-rows\:h_kqdg4_44:hover { grid-template-rows: var(--t-grid-rows_xl-h, var(--t-grid-rows_lg-h, var(--t-grid-rows_md-h, var(--t-grid-rows_sm-h, var(--t-grid-rows-h))))); }
 }
 
 @media (min-width: 1536px) {
-  ._grid-rows_2xl_hzpp0_67 { grid-template-rows: var(--t-grid-rows_2xl); }
-  ._grid-rows_2xl\:h_hzpp0_68:hover { grid-template-rows: var(--t-grid-rows_2xl-h); }
+  ._grid-rows_kqdg4_43 { grid-template-rows: var(--t-grid-rows_2xl, var(--t-grid-rows_xl, var(--t-grid-rows_lg, var(--t-grid-rows_md, var(--t-grid-rows_sm, var(--t-grid-rows)))))); }
+  ._grid-rows\:h_kqdg4_44:hover { grid-template-rows: var(--t-grid-rows_2xl-h, var(--t-grid-rows_xl-h, var(--t-grid-rows_lg-h, var(--t-grid-rows_md-h, var(--t-grid-rows_sm-h, var(--t-grid-rows-h)))))); }
 }

package/dist/components/Box/grid/grid.module.css.js

@@ -1,38 +1,18 @@
 const styles = {
-  "justify-self-auto": "_justify-self-auto_hzpp0_2",
-  "justify-self-auto:h": "_justify-self-auto:h_hzpp0_3",
-  "justify-self-start": "_justify-self-start_hzpp0_4",
-  "justify-self-start:h": "_justify-self-start:h_hzpp0_5",
-  "justify-self-end": "_justify-self-end_hzpp0_6",
-  "justify-self-end:h": "_justify-self-end:h_hzpp0_7",
-  "justify-self-center": "_justify-self-center_hzpp0_8",
-  "justify-self-center:h": "_justify-self-center:h_hzpp0_9",
-  "justify-self-stretch": "_justify-self-stretch_hzpp0_10",
-  "justify-self-stretch:h": "_justify-self-stretch:h_hzpp0_11",
-  "grid-cols": "_grid-cols_hzpp0_14",
-  "grid-cols:h": "_grid-cols:h_hzpp0_15",
-  "grid-cols_sm": "_grid-cols_sm_hzpp0_18",
-  "grid-cols_sm:h": "_grid-cols_sm:h_hzpp0_19",
-  "grid-cols_md": "_grid-cols_md_hzpp0_23",
-  "grid-cols_md:h": "_grid-cols_md:h_hzpp0_24",
-  "grid-cols_lg": "_grid-cols_lg_hzpp0_28",
-  "grid-cols_lg:h": "_grid-cols_lg:h_hzpp0_29",
-  "grid-cols_xl": "_grid-cols_xl_hzpp0_33",
-  "grid-cols_xl:h": "_grid-cols_xl:h_hzpp0_34",
-  "grid-cols_2xl": "_grid-cols_2xl_hzpp0_38",
-  "grid-cols_2xl:h": "_grid-cols_2xl:h_hzpp0_39",
-  "grid-rows": "_grid-rows_hzpp0_43",
-  "grid-rows:h": "_grid-rows:h_hzpp0_44",
-  "grid-rows_sm": "_grid-rows_sm_hzpp0_47",
-  "grid-rows_sm:h": "_grid-rows_sm:h_hzpp0_48",
-  "grid-rows_md": "_grid-rows_md_hzpp0_52",
-  "grid-rows_md:h": "_grid-rows_md:h_hzpp0_53",
-  "grid-rows_lg": "_grid-rows_lg_hzpp0_57",
-  "grid-rows_lg:h": "_grid-rows_lg:h_hzpp0_58",
-  "grid-rows_xl": "_grid-rows_xl_hzpp0_62",
-  "grid-rows_xl:h": "_grid-rows_xl:h_hzpp0_63",
-  "grid-rows_2xl": "_grid-rows_2xl_hzpp0_67",
-  "grid-rows_2xl:h": "_grid-rows_2xl:h_hzpp0_68"
+  "justify-self-auto": "_justify-self-auto_kqdg4_2",
+  "justify-self-auto:h": "_justify-self-auto:h_kqdg4_3",
+  "justify-self-start": "_justify-self-start_kqdg4_4",
+  "justify-self-start:h": "_justify-self-start:h_kqdg4_5",
+  "justify-self-end": "_justify-self-end_kqdg4_6",
+  "justify-self-end:h": "_justify-self-end:h_kqdg4_7",
+  "justify-self-center": "_justify-self-center_kqdg4_8",
+  "justify-self-center:h": "_justify-self-center:h_kqdg4_9",
+  "justify-self-stretch": "_justify-self-stretch_kqdg4_10",
+  "justify-self-stretch:h": "_justify-self-stretch:h_kqdg4_11",
+  "grid-cols": "_grid-cols_kqdg4_14",
+  "grid-cols:h": "_grid-cols:h_kqdg4_15",
+  "grid-rows": "_grid-rows_kqdg4_43",
+  "grid-rows:h": "_grid-rows:h_kqdg4_44"
 };
 export {
   styles as default

package/dist/components/Box/grid/grid.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"grid.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"grid.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;"}

package/dist/components/Box/inset/inset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"inset.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/inset/inset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAKL,KAAK,WAAW,EAEjB,MAAM,WAAW,CAAC;AAInB,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAIlC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAgGF,wBAAgB,cAAc,CAC5B,KAAK,EAAE,UAAU,GAAG,eAAe,GAClC,WAAW,CAyBb"}
+{"version":3,"file":"inset.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/inset/inset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,WAAW,EAGjB,MAAM,WAAW,CAAC;AAInB,KAAK,UAAU,GAAG,MAAM,GAAG,MAAM,CAAC;AAIlC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACrC,GAAG,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;IACrC,IAAI,CAAC,EAAE,eAAe,CAAC,UAAU,CAAC,CAAC;CACpC,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB,SAAS,CAAC,EAAE,UAAU,CAAC;CACxB,CAAC;AAgCF,wBAAgB,cAAc,CAC5B,KAAK,EAAE,UAAU,GAAG,eAAe,GAClC,WAAW,CAyBb"}

package/dist/components/Box/inset/inset.js

@@ -1,40 +1,7 @@
-import { STATE_SUFFIXES, STATE_CLASS_SUFFIXES, RESPONSIVE_KEYS } from "../shared/constants.js";
 import { getRawValue } from "../shared/spacing.js";
+import { getResponsiveVarStyles } from "../shared/responsive.js";
 import styles from "./inset.module.css.js";
 import clsx from "clsx";
-function getInsetProp(key, value, state = "base") {
-  const result = { className: "", style: {} };
-  if (value === void 0) return result;
-  const stateSuffix = STATE_SUFFIXES[state];
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  if (typeof value !== "object") {
-    const rawValue = getRawValue(value);
-    if (rawValue !== void 0) {
-      const className = stateClassSuffix ? styles[`${key}${stateClassSuffix}`] : styles[key];
-      result.className = className || "";
-      result.style[`--t-${key}${stateSuffix}`] = rawValue;
-    }
-    return result;
-  }
-  for (const responsiveKey of RESPONSIVE_KEYS) {
-    const rawValue = getRawValue(value[responsiveKey]);
-    if (rawValue === void 0) continue;
-    let className;
-    let varName;
-    if (responsiveKey === "base") {
-      className = stateClassSuffix ? styles[`${key}${stateClassSuffix}`] : styles[key];
-      varName = `--t-${key}${stateSuffix}`;
-    } else {
-      className = stateClassSuffix ? styles[`${key}_${responsiveKey}${stateClassSuffix}`] : styles[`${key}_${responsiveKey}`];
-      varName = `--t-${key}_${responsiveKey}${stateSuffix}`;
-    }
-    if (className) {
-      result.className = clsx(result.className, className);
-    }
-    result.style[varName] = rawValue;
-  }
-  return result;
-}
 function resolveInsetValue(key, props) {
   const shorthandMap = {
     top: "insetY",
@@ -45,25 +12,14 @@ function resolveInsetValue(key, props) {
   return props[key] ?? props[shorthandMap[key]] ?? props.inset;
 }
 function getInsetStylesForState(props, state) {
-  const result = { className: "", style: {} };
-  if (!props) return result;
-  const insetTop = getInsetProp("top", resolveInsetValue("top", props), state);
-  const insetRight = getInsetProp("right", resolveInsetValue("right", props), state);
-  const insetBottom = getInsetProp("bottom", resolveInsetValue("bottom", props), state);
-  const insetLeft = getInsetProp("left", resolveInsetValue("left", props), state);
+  if (!props) return { className: "", style: {} };
+  const keys = ["top", "right", "bottom", "left"];
+  const results = keys.map(
+    (key) => getResponsiveVarStyles(styles, key, key, resolveInsetValue(key, props), state, getRawValue)
+  );
   return {
-    className: clsx(
-      insetTop.className,
-      insetRight.className,
-      insetBottom.className,
-      insetLeft.className
-    ),
-    style: {
-      ...insetTop.style,
-      ...insetRight.style,
-      ...insetBottom.style,
-      ...insetLeft.style
-    }
+    className: clsx(...results.map((r) => r.className)),
+    style: Object.assign({}, ...results.map((r) => r.style))
   };
 }
 function getInsetStyles(props) {

package/dist/components/Box/inset/inset.js.map

@@ -1 +1 @@
-{"version":3,"file":"inset.js","sources":["../../../../src/components/Box/inset/inset.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  RESPONSIVE_KEYS,\n  STATE_SUFFIXES,\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n  getRawValue,\n} from \"../shared\";\nimport styles from \"./inset.module.css\";\nimport clsx from \"clsx\";\n\ntype InsetValue = string | number;\ntype InsetKey = \"top\" | \"right\" | \"bottom\" | \"left\";\ntype InsetShorthandKey = \"inset\" | \"insetX\" | \"insetY\";\n\nexport type InsetProps = {\n  inset?: ResponsiveValue<InsetValue>;\n  insetX?: ResponsiveValue<InsetValue>;\n  insetY?: ResponsiveValue<InsetValue>;\n  top?: ResponsiveValue<InsetValue>;\n  right?: ResponsiveValue<InsetValue>;\n  bottom?: ResponsiveValue<InsetValue>;\n  left?: ResponsiveValue<InsetValue>;\n};\n\nexport type InsetStateProps = {\n  _hover?: InsetProps;\n  _focus?: InsetProps;\n  _active?: InsetProps;\n  _disabled?: InsetProps;\n};\n\nfunction getInsetProp(\n  key: InsetKey,\n  value: ResponsiveValue<InsetValue> | undefined,\n  state: StateKey = \"base\"\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (value === undefined) return result;\n\n  const stateSuffix = STATE_SUFFIXES[state];\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n  if (typeof value !== \"object\") {\n    const rawValue = getRawValue(value);\n    if (rawValue !== undefined) {\n      const className = stateClassSuffix\n        ? styles[`${key}${stateClassSuffix}`]\n        : styles[key];\n      result.className = className || \"\";\n      result.style[`--t-${key}${stateSuffix}`] = rawValue;\n    }\n    return result;\n  }\n\n  for (const responsiveKey of RESPONSIVE_KEYS) {\n    const rawValue = getRawValue(value[responsiveKey]);\n    if (rawValue === undefined) continue;\n\n    let className: string | undefined;\n    let varName: string;\n\n    if (responsiveKey === \"base\") {\n      className = stateClassSuffix\n        ? styles[`${key}${stateClassSuffix}`]\n        : styles[key];\n      varName = `--t-${key}${stateSuffix}`;\n    } else {\n      className = stateClassSuffix\n        ? styles[`${key}_${responsiveKey}${stateClassSuffix}`]\n        : styles[`${key}_${responsiveKey}`];\n      varName = `--t-${key}_${responsiveKey}${stateSuffix}`;\n    }\n\n    if (className) {\n      result.className = clsx(result.className, className);\n    }\n    result.style[varName] = rawValue;\n  }\n\n  return result;\n}\n\nfunction resolveInsetValue(\n  key: InsetKey,\n  props: InsetProps\n): ResponsiveValue<InsetValue> | undefined {\n  const shorthandMap: Record<InsetKey, InsetShorthandKey> = {\n    top: \"insetY\",\n    bottom: \"insetY\",\n    right: \"insetX\",\n    left: \"insetX\",\n  };\n  return props[key] ?? props[shorthandMap[key]] ?? props.inset;\n}\n\nfunction getInsetStylesForState(\n  props: InsetProps | undefined,\n  state: StateKey\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (!props) return result;\n\n  const insetTop = getInsetProp(\"top\", resolveInsetValue(\"top\", props), state);\n  const insetRight = getInsetProp(\"right\", resolveInsetValue(\"right\", props), state);\n  const insetBottom = getInsetProp(\"bottom\", resolveInsetValue(\"bottom\", props), state);\n  const insetLeft = getInsetProp(\"left\", resolveInsetValue(\"left\", props), state);\n\n  return {\n    className: clsx(\n      insetTop.className,\n      insetRight.className,\n      insetBottom.className,\n      insetLeft.className\n    ),\n    style: {\n      ...insetTop.style,\n      ...insetRight.style,\n      ...insetBottom.style,\n      ...insetLeft.style,\n    },\n  };\n}\n\nexport function getInsetStyles(\n  props: InsetProps & InsetStateProps\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getInsetStylesForState(baseProps, \"base\");\n  const hoverStyles = getInsetStylesForState(_hover, \"hover\");\n  const focusStyles = getInsetStylesForState(_focus, \"focus\");\n  const activeStyles = getInsetStylesForState(_active, \"active\");\n  const disabledStyles = getInsetStylesForState(_disabled, \"disabled\");\n\n  return {\n    className: clsx(\n      baseStyles.className,\n      hoverStyles.className,\n      focusStyles.className,\n      activeStyles.className,\n      disabledStyles.className\n    ),\n    style: {\n      ...baseStyles.style,\n      ...hoverStyles.style,\n      ...focusStyles.style,\n      ...activeStyles.style,\n      ...disabledStyles.style,\n    },\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"inset.js","sources":["../../../../src/components/Box/inset/inset.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  type StateKey,\n  type StyleResult,\n  getRawValue,\n  getResponsiveVarStyles,\n} from \"../shared\";\nimport styles from \"./inset.module.css\";\nimport clsx from \"clsx\";\n\ntype InsetValue = string | number;\ntype InsetKey = \"top\" | \"right\" | \"bottom\" | \"left\";\ntype InsetShorthandKey = \"inset\" | \"insetX\" | \"insetY\";\n\nexport type InsetProps = {\n  inset?: ResponsiveValue<InsetValue>;\n  insetX?: ResponsiveValue<InsetValue>;\n  insetY?: ResponsiveValue<InsetValue>;\n  top?: ResponsiveValue<InsetValue>;\n  right?: ResponsiveValue<InsetValue>;\n  bottom?: ResponsiveValue<InsetValue>;\n  left?: ResponsiveValue<InsetValue>;\n};\n\nexport type InsetStateProps = {\n  _hover?: InsetProps;\n  _focus?: InsetProps;\n  _active?: InsetProps;\n  _disabled?: InsetProps;\n};\n\nfunction resolveInsetValue(\n  key: InsetKey,\n  props: InsetProps\n): ResponsiveValue<InsetValue> | undefined {\n  const shorthandMap: Record<InsetKey, InsetShorthandKey> = {\n    top: \"insetY\",\n    bottom: \"insetY\",\n    right: \"insetX\",\n    left: \"insetX\",\n  };\n  return props[key] ?? props[shorthandMap[key]] ?? props.inset;\n}\n\nfunction getInsetStylesForState(\n  props: InsetProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const keys: InsetKey[] = [\"top\", \"right\", \"bottom\", \"left\"];\n  const results = keys.map((key) =>\n    getResponsiveVarStyles(styles, key, key, resolveInsetValue(key, props), state, getRawValue)\n  );\n\n  return {\n    className: clsx(...results.map((r) => r.className)),\n    style: Object.assign({}, ...results.map((r) => r.style)),\n  };\n}\n\nexport function getInsetStyles(\n  props: InsetProps & InsetStateProps\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getInsetStylesForState(baseProps, \"base\");\n  const hoverStyles = getInsetStylesForState(_hover, \"hover\");\n  const focusStyles = getInsetStylesForState(_focus, \"focus\");\n  const activeStyles = getInsetStylesForState(_active, \"active\");\n  const disabledStyles = getInsetStylesForState(_disabled, \"disabled\");\n\n  return {\n    className: clsx(\n      baseStyles.className,\n      hoverStyles.className,\n      focusStyles.className,\n      activeStyles.className,\n      disabledStyles.className\n    ),\n    style: {\n      ...baseStyles.style,\n      ...hoverStyles.style,\n      ...focusStyles.style,\n      ...activeStyles.style,\n      ...disabledStyles.style,\n    },\n  };\n}\n"],"names":[],"mappings":";;;;AA+BA,SAAS,kBACP,KACA,OACyC;AACzC,QAAM,eAAoD;AAAA,IACxD,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,OAAO;AAAA,IACP,MAAM;AAAA,EAAA;AAER,SAAO,MAAM,GAAG,KAAK,MAAM,aAAa,GAAG,CAAC,KAAK,MAAM;AACzD;AAEA,SAAS,uBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,OAAmB,CAAC,OAAO,SAAS,UAAU,MAAM;AAC1D,QAAM,UAAU,KAAK;AAAA,IAAI,CAAC,QACxB,uBAAuB,QAAQ,KAAK,KAAK,kBAAkB,KAAK,KAAK,GAAG,OAAO,WAAW;AAAA,EAAA;AAG5F,SAAO;AAAA,IACL,WAAW,KAAK,GAAG,QAAQ,IAAI,CAAC,MAAM,EAAE,SAAS,CAAC;AAAA,IAClD,OAAO,OAAO,OAAO,IAAI,GAAG,QAAQ,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AAAA,EAAA;AAE3D;AAEO,SAAS,eACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,uBAAuB,WAAW,MAAM;AAC3D,QAAM,cAAc,uBAAuB,QAAQ,OAAO;AAC1D,QAAM,cAAc,uBAAuB,QAAQ,OAAO;AAC1D,QAAM,eAAe,uBAAuB,SAAS,QAAQ;AAC7D,QAAM,iBAAiB,uBAAuB,WAAW,UAAU;AAEnE,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,eAAe;AAAA,IAAA;AAAA,IAEjB,OAAO;AAAA,MACL,GAAG,WAAW;AAAA,MACd,GAAG,YAAY;AAAA,MACf,GAAG,YAAY;AAAA,MACf,GAAG,aAAa;AAAA,MAChB,GAAG,eAAe;AAAA,IAAA;AAAA,EACpB;AAEJ;"}