@tosui/react 0.1.3 → 0.1.5

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

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

package/dist/components/Box/display/display.d.ts

@@ -1,14 +1,8 @@
 import { ResponsiveValue } from '../../../utils/breakpoints';
-import { StyleResult } from '../shared';
+import { StateProps, StyleResult } from '../shared';
 export type DisplayValue = "block" | "flex" | "inline-flex" | "grid" | "inline" | "inline-block" | "none" | "contents";
 export type DisplayProps = {
     display?: ResponsiveValue<DisplayValue>;
 };
-export type DisplayStateProps = {
-    _hover?: DisplayProps;
-    _focus?: DisplayProps;
-    _active?: DisplayProps;
-    _disabled?: DisplayProps;
-};
-export declare function getDisplayStyles(props: DisplayProps & DisplayStateProps): StyleResult;
+export declare function getDisplayStyles(props: DisplayProps & StateProps<DisplayProps>): StyleResult;
 //# sourceMappingURL=display.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/display/display.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,MAAM,GACN,aAAa,GACb,MAAM,GACN,QAAQ,GACR,cAAc,GACd,MAAM,GACN,UAAU,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CACzC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,YAAY,CAAC;CAC1B,CAAC;AAmDF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,GAAG,iBAAiB,GACtC,WAAW,CAmBb"}
+{"version":3,"file":"display.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/display/display.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,WAAW,EAEjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,YAAY,GACpB,OAAO,GACP,MAAM,GACN,aAAa,GACb,MAAM,GACN,QAAQ,GACR,cAAc,GACd,MAAM,GACN,UAAU,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG;IACzB,OAAO,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CACzC,CAAC;AAWF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,GAC7C,WAAW,CAmBb"}

package/dist/components/Box/display/display.js

@@ -1,40 +1,17 @@
-import { RESPONSIVE_KEYS, STATE_CLASS_SUFFIXES } from "../shared/constants.js";
+import { getEnumResponsiveStyles } from "../shared/responsive.js";
 import styles from "./display.module.css.js";
 import clsx from "clsx";
-function getDisplayClass(value, responsiveKey, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  if (responsiveKey === "base") {
-    return stateClassSuffix ? styles[`${value}${stateClassSuffix}`] : styles[value];
-  }
-  return stateClassSuffix ? styles[`${value}_${responsiveKey}${stateClassSuffix}`] : styles[`${value}_${responsiveKey}`];
-}
-function getDisplayStylesForValue(value, state) {
-  const result = { className: "", style: {} };
-  if (value === void 0) return result;
-  if (typeof value === "string") {
-    const className = getDisplayClass(value, "base", state);
-    if (className) {
-      result.className = className;
-    }
-    return result;
-  }
-  for (const responsiveKey of RESPONSIVE_KEYS) {
-    const displayValue = value[responsiveKey];
-    if (displayValue === void 0) continue;
-    const className = getDisplayClass(displayValue, responsiveKey, state);
-    if (className) {
-      result.className = clsx(result.className, className);
-    }
-  }
-  return result;
+function getDisplayStylesForState(props, state) {
+  if (!props) return { className: "", style: {} };
+  return getEnumResponsiveStyles(styles, "", props.display, state);
 }
 function getDisplayStyles(props) {
-  const { display, _hover, _focus, _active, _disabled } = props;
-  const baseStyles = getDisplayStylesForValue(display, "base");
-  const hoverStyles = getDisplayStylesForValue(_hover?.display, "hover");
-  const focusStyles = getDisplayStylesForValue(_focus?.display, "focus");
-  const activeStyles = getDisplayStylesForValue(_active?.display, "active");
-  const disabledStyles = getDisplayStylesForValue(_disabled?.display, "disabled");
+  const { _hover, _focus, _active, _disabled, ...baseProps } = props;
+  const baseStyles = getDisplayStylesForState(baseProps, "base");
+  const hoverStyles = getDisplayStylesForState(_hover, "hover");
+  const focusStyles = getDisplayStylesForState(_focus, "focus");
+  const activeStyles = getDisplayStylesForState(_active, "active");
+  const disabledStyles = getDisplayStylesForState(_disabled, "disabled");
   return {
     className: clsx(
       baseStyles.className,

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

@@ -1 +1 @@
-{"version":3,"file":"display.js","sources":["../../../../src/components/Box/display/display.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  RESPONSIVE_KEYS,\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n} from \"../shared\";\nimport styles from \"./display.module.css\";\nimport clsx from \"clsx\";\n\nexport type DisplayValue =\n  | \"block\"\n  | \"flex\"\n  | \"inline-flex\"\n  | \"grid\"\n  | \"inline\"\n  | \"inline-block\"\n  | \"none\"\n  | \"contents\";\n\nexport type DisplayProps = {\n  display?: ResponsiveValue<DisplayValue>;\n};\n\nexport type DisplayStateProps = {\n  _hover?: DisplayProps;\n  _focus?: DisplayProps;\n  _active?: DisplayProps;\n  _disabled?: DisplayProps;\n};\n\nfunction getDisplayClass(\n  value: DisplayValue,\n  responsiveKey: (typeof RESPONSIVE_KEYS)[number],\n  state: StateKey\n): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n  if (responsiveKey === \"base\") {\n    return stateClassSuffix\n      ? styles[`${value}${stateClassSuffix}`]\n      : styles[value];\n  }\n\n  return stateClassSuffix\n    ? styles[`${value}_${responsiveKey}${stateClassSuffix}`]\n    : styles[`${value}_${responsiveKey}`];\n}\n\nfunction getDisplayStylesForValue(\n  value: ResponsiveValue<DisplayValue> | undefined,\n  state: StateKey\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (value === undefined) return result;\n\n  // Simple value (non-responsive)\n  if (typeof value === \"string\") {\n    const className = getDisplayClass(value, \"base\", state);\n    if (className) {\n      result.className = className;\n    }\n    return result;\n  }\n\n  // Responsive value\n  for (const responsiveKey of RESPONSIVE_KEYS) {\n    const displayValue = value[responsiveKey];\n    if (displayValue === undefined) continue;\n\n    const className = getDisplayClass(displayValue, responsiveKey, state);\n    if (className) {\n      result.className = clsx(result.className, className);\n    }\n  }\n\n  return result;\n}\n\nexport function getDisplayStyles(\n  props: DisplayProps & DisplayStateProps\n): StyleResult {\n  const { display, _hover, _focus, _active, _disabled } = props;\n\n  const baseStyles = getDisplayStylesForValue(display, \"base\");\n  const hoverStyles = getDisplayStylesForValue(_hover?.display, \"hover\");\n  const focusStyles = getDisplayStylesForValue(_focus?.display, \"focus\");\n  const activeStyles = getDisplayStylesForValue(_active?.display, \"active\");\n  const disabledStyles = getDisplayStylesForValue(_disabled?.display, \"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  };\n}\n"],"names":[],"mappings":";;;AA+BA,SAAS,gBACP,OACA,eACA,OACoB;AACpB,QAAM,mBAAmB,qBAAqB,KAAK;AAEnD,MAAI,kBAAkB,QAAQ;AAC5B,WAAO,mBACH,OAAO,GAAG,KAAK,GAAG,gBAAgB,EAAE,IACpC,OAAO,KAAK;AAAA,EAClB;AAEA,SAAO,mBACH,OAAO,GAAG,KAAK,IAAI,aAAa,GAAG,gBAAgB,EAAE,IACrD,OAAO,GAAG,KAAK,IAAI,aAAa,EAAE;AACxC;AAEA,SAAS,yBACP,OACA,OACa;AACb,QAAM,SAAsB,EAAE,WAAW,IAAI,OAAO,CAAA,EAAC;AAErD,MAAI,UAAU,OAAW,QAAO;AAGhC,MAAI,OAAO,UAAU,UAAU;AAC7B,UAAM,YAAY,gBAAgB,OAAO,QAAQ,KAAK;AACtD,QAAI,WAAW;AACb,aAAO,YAAY;AAAA,IACrB;AACA,WAAO;AAAA,EACT;AAGA,aAAW,iBAAiB,iBAAiB;AAC3C,UAAM,eAAe,MAAM,aAAa;AACxC,QAAI,iBAAiB,OAAW;AAEhC,UAAM,YAAY,gBAAgB,cAAc,eAAe,KAAK;AACpE,QAAI,WAAW;AACb,aAAO,YAAY,KAAK,OAAO,WAAW,SAAS;AAAA,IACrD;AAAA,EACF;AAEA,SAAO;AACT;AAEO,SAAS,iBACd,OACa;AACb,QAAM,EAAE,SAAS,QAAQ,QAAQ,SAAS,cAAc;AAExD,QAAM,aAAa,yBAAyB,SAAS,MAAM;AAC3D,QAAM,cAAc,yBAAyB,QAAQ,SAAS,OAAO;AACrE,QAAM,cAAc,yBAAyB,QAAQ,SAAS,OAAO;AACrE,QAAM,eAAe,yBAAyB,SAAS,SAAS,QAAQ;AACxE,QAAM,iBAAiB,yBAAyB,WAAW,SAAS,UAAU;AAE9E,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,eAAe;AAAA,IAAA;AAAA,IAEjB,OAAO,CAAA;AAAA,EAAC;AAEZ;"}
+{"version":3,"file":"display.js","sources":["../../../../src/components/Box/display/display.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  type StateKey,\n  type StateProps,\n  type StyleResult,\n  getEnumResponsiveStyles,\n} from \"../shared\";\nimport styles from \"./display.module.css\";\nimport clsx from \"clsx\";\n\nexport type DisplayValue =\n  | \"block\"\n  | \"flex\"\n  | \"inline-flex\"\n  | \"grid\"\n  | \"inline\"\n  | \"inline-block\"\n  | \"none\"\n  | \"contents\";\n\nexport type DisplayProps = {\n  display?: ResponsiveValue<DisplayValue>;\n};\n\nfunction getDisplayStylesForState(\n  props: DisplayProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  return getEnumResponsiveStyles(styles, \"\", props.display, state);\n}\n\nexport function getDisplayStyles(\n  props: DisplayProps & StateProps<DisplayProps>\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getDisplayStylesForState(baseProps, \"base\");\n  const hoverStyles = getDisplayStylesForState(_hover, \"hover\");\n  const focusStyles = getDisplayStylesForState(_focus, \"focus\");\n  const activeStyles = getDisplayStylesForState(_active, \"active\");\n  const disabledStyles = getDisplayStylesForState(_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  };\n}\n"],"names":[],"mappings":";;;AAwBA,SAAS,yBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,SAAO,wBAAwB,QAAQ,IAAI,MAAM,SAAS,KAAK;AACjE;AAEO,SAAS,iBACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,yBAAyB,WAAW,MAAM;AAC7D,QAAM,cAAc,yBAAyB,QAAQ,OAAO;AAC5D,QAAM,cAAc,yBAAyB,QAAQ,OAAO;AAC5D,QAAM,eAAe,yBAAyB,SAAS,QAAQ;AAC/D,QAAM,iBAAiB,yBAAyB,WAAW,UAAU;AAErE,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,eAAe;AAAA,IAAA;AAAA,IAEjB,OAAO,CAAA;AAAA,EAAC;AAEZ;"}

package/dist/components/Box/flexbox/flexbox.d.ts

@@ -1,4 +1,5 @@
-import { StyleResult } from '../shared';
+import { ResponsiveValue } from '../../../utils/breakpoints';
+import { StateProps, StyleResult } from '../shared';
 export type FlexDirectionValue = "row" | "row-reverse" | "column" | "column-reverse";
 export type JustifyContentValue = "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly";
 export type AlignItemsValue = "start" | "end" | "center" | "stretch" | "baseline";
@@ -6,21 +7,18 @@ export type AlignSelfValue = "auto" | "start" | "end" | "center" | "stretch" | "
 export type FlexWrapValue = "nowrap" | "wrap" | "wrap-reverse";
 export type SpacingValue = number | string;
 export type FlexboxProps = {
-    flexDirection?: FlexDirectionValue;
-    justifyContent?: JustifyContentValue;
-    alignItems?: AlignItemsValue;
-    alignSelf?: AlignSelfValue;
-    flexWrap?: FlexWrapValue;
-    gap?: SpacingValue;
-    gapRow?: SpacingValue;
-    gapColumn?: SpacingValue;
-    flex?: string;
+    flexDirection?: ResponsiveValue<FlexDirectionValue>;
+    justifyContent?: ResponsiveValue<JustifyContentValue>;
+    alignItems?: ResponsiveValue<AlignItemsValue>;
+    alignSelf?: ResponsiveValue<AlignSelfValue>;
+    flexWrap?: ResponsiveValue<FlexWrapValue>;
+    gap?: ResponsiveValue<SpacingValue>;
+    gapRow?: ResponsiveValue<SpacingValue>;
+    gapColumn?: ResponsiveValue<SpacingValue>;
+    flex?: ResponsiveValue<string>;
     flexGrow?: number;
     flexShrink?: number;
     flexBasis?: string;
 };
-export type FlexboxStateProps = {
-    _hover?: FlexboxProps;
-};
-export declare function getFlexboxStyles(props: FlexboxProps & FlexboxStateProps): StyleResult;
+export declare function getFlexboxStyles(props: FlexboxProps & StateProps<FlexboxProps>): StyleResult;
 //# sourceMappingURL=flexbox.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"flexbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/flexbox/flexbox.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,KAAK,WAAW,EACjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,aAAa,GAAG,QAAQ,GAAG,gBAAgB,CAAC;AACrF,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;AACjH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAClF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAC1F,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAC;AAC/D,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,cAAc,CAAC,EAAE,mBAAmB,CAAC;IACrC,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,GAAG,CAAC,EAAE,YAAY,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,SAAS,CAAC,EAAE,YAAY,CAAC;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,MAAM,CAAC,EAAE,YAAY,CAAC;CACvB,CAAC;AAiIF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,GAAG,iBAAiB,GACtC,WAAW,CAwCb"}
+{"version":3,"file":"flexbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Box/flexbox/flexbox.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAEL,KAAK,UAAU,EACf,KAAK,WAAW,EAIjB,MAAM,WAAW,CAAC;AAInB,MAAM,MAAM,kBAAkB,GAAG,KAAK,GAAG,aAAa,GAAG,QAAQ,GAAG,gBAAgB,CAAC;AACrF,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,eAAe,GAAG,cAAc,GAAG,cAAc,CAAC;AACjH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAClF,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAC;AAC1F,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,MAAM,GAAG,cAAc,CAAC;AAC/D,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,CAAC;AAE3C,MAAM,MAAM,YAAY,GAAG;IACzB,aAAa,CAAC,EAAE,eAAe,CAAC,kBAAkB,CAAC,CAAC;IACpD,cAAc,CAAC,EAAE,eAAe,CAAC,mBAAmB,CAAC,CAAC;IACtD,UAAU,CAAC,EAAE,eAAe,CAAC,eAAe,CAAC,CAAC;IAC9C,SAAS,CAAC,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC;IAC5C,QAAQ,CAAC,EAAE,eAAe,CAAC,aAAa,CAAC,CAAC;IAC1C,GAAG,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACvC,SAAS,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IAC1C,IAAI,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAoEF,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,GAAG,UAAU,CAAC,YAAY,CAAC,GAC7C,WAAW,CAmBb"}

package/dist/components/Box/flexbox/flexbox.js

@@ -1,32 +1,7 @@
-import { STATE_SUFFIXES, STATE_CLASS_SUFFIXES } from "../shared/constants.js";
+import { getRawValue } from "../shared/spacing.js";
+import { getEnumResponsiveStyles, getResponsiveVarStyles } from "../shared/responsive.js";
 import styles from "./flexbox.module.css.js";
 import clsx from "clsx";
-function getFlexDirectionClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`flex-${value}${stateClassSuffix}`] : styles[`flex-${value}`];
-}
-function getJustifyContentClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`justify-${value}${stateClassSuffix}`] : styles[`justify-${value}`];
-}
-function getAlignItemsClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`items-${value}${stateClassSuffix}`] : styles[`items-${value}`];
-}
-function getAlignSelfClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`self-${value}${stateClassSuffix}`] : styles[`self-${value}`];
-}
-function getFlexWrapClass(value, state) {
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  return stateClassSuffix ? styles[`flex-${value}${stateClassSuffix}`] : styles[`flex-${value}`];
-}
-function getSpacingValue(value) {
-  if (value === void 0) return "normal";
-  if (typeof value === "string") return value;
-  if (value === 0) return "0";
-  return `calc(var(--t-spacing-unit) * ${value})`;
-}
 function getFlexboxStylesForState(props, state) {
   if (!props) return { className: "", style: {} };
   const {
@@ -45,49 +20,32 @@ function getFlexboxStylesForState(props, state) {
   } = props;
   const classes = [];
   const style = {};
-  const stateVarSuffix = STATE_SUFFIXES[state];
-  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];
-  if (flexDirection) {
-    const cls = getFlexDirectionClass(flexDirection, state);
-    if (cls) classes.push(cls);
-  }
-  if (justifyContent) {
-    const cls = getJustifyContentClass(justifyContent, state);
-    if (cls) classes.push(cls);
-  }
-  if (alignItems) {
-    const cls = getAlignItemsClass(alignItems, state);
-    if (cls) classes.push(cls);
-  }
-  if (alignSelf) {
-    const cls = getAlignSelfClass(alignSelf, state);
-    if (cls) classes.push(cls);
-  }
-  if (flexWrap) {
-    const cls = getFlexWrapClass(flexWrap, state);
-    if (cls) classes.push(cls);
-  }
-  if (gap !== void 0 || gapRow !== void 0 || gapColumn !== void 0) {
-    const row = gapRow ?? gap;
-    const column = gapColumn ?? gap;
-    const rowValue = getSpacingValue(row);
-    const columnValue = getSpacingValue(column);
-    const gapValue = rowValue === columnValue ? rowValue : `${rowValue} ${columnValue}`;
-    const gapClass = stateClassSuffix ? styles[`gap${stateClassSuffix}`] : styles.gap;
-    if (gapClass) classes.push(gapClass);
-    style[`--t-gap${stateVarSuffix}`] = gapValue;
-  }
+  const dirResult = getEnumResponsiveStyles(styles, "flex", flexDirection, state);
+  if (dirResult.className) classes.push(dirResult.className);
+  const justifyResult = getEnumResponsiveStyles(styles, "justify", justifyContent, state);
+  if (justifyResult.className) classes.push(justifyResult.className);
+  const itemsResult = getEnumResponsiveStyles(styles, "items", alignItems, state);
+  if (itemsResult.className) classes.push(itemsResult.className);
+  const selfResult = getEnumResponsiveStyles(styles, "self", alignSelf, state);
+  if (selfResult.className) classes.push(selfResult.className);
+  const wrapResult = getEnumResponsiveStyles(styles, "flex", flexWrap, state);
+  if (wrapResult.className) classes.push(wrapResult.className);
+  const resolvedGapRow = gapRow ?? gap;
+  const resolvedGapCol = gapColumn ?? gap;
+  const gapRowResult = getResponsiveVarStyles(styles, "gap-row", "gap-row", resolvedGapRow, state, getRawValue);
+  const gapColResult = getResponsiveVarStyles(styles, "gap-col", "gap-col", resolvedGapCol, state, getRawValue);
+  if (gapRowResult.className) classes.push(gapRowResult.className);
+  if (gapColResult.className) classes.push(gapColResult.className);
+  Object.assign(style, gapRowResult.style, gapColResult.style);
   if (flex !== void 0) {
-    const flexClass = stateClassSuffix ? styles[`flex${stateClassSuffix}`] : styles.flex;
-    if (flexClass) classes.push(flexClass);
-    style[`--t-flex${stateVarSuffix}`] = flex;
+    const flexResult = getResponsiveVarStyles(styles, "flex", "flex", flex, state);
+    if (flexResult.className) classes.push(flexResult.className);
+    Object.assign(style, flexResult.style);
   } else if (flexGrow !== void 0 || flexShrink !== void 0 || flexBasis !== void 0) {
-    const grow = flexGrow ?? 0;
-    const shrink = flexShrink ?? 1;
-    const basis = flexBasis ?? "auto";
-    const flexClass = stateClassSuffix ? styles[`flex${stateClassSuffix}`] : styles.flex;
-    if (flexClass) classes.push(flexClass);
-    style[`--t-flex${stateVarSuffix}`] = `${grow} ${shrink} ${basis}`;
+    const composedFlex = `${flexGrow ?? 0} ${flexShrink ?? 1} ${flexBasis ?? "auto"}`;
+    const flexResult = getResponsiveVarStyles(styles, "flex", "flex", composedFlex, state);
+    if (flexResult.className) classes.push(flexResult.className);
+    Object.assign(style, flexResult.style);
   }
   return {
     className: clsx(...classes),
@@ -95,42 +53,21 @@ function getFlexboxStylesForState(props, state) {
   };
 }
 function getFlexboxStyles(props) {
-  const {
-    flexDirection,
-    justifyContent,
-    alignItems,
-    alignSelf,
-    flexWrap,
-    gap,
-    gapRow,
-    gapColumn,
-    flex,
-    flexGrow,
-    flexShrink,
-    flexBasis,
-    _hover
-  } = props;
-  const baseStyles = getFlexboxStylesForState(
-    {
-      flexDirection,
-      justifyContent,
-      alignItems,
-      alignSelf,
-      flexWrap,
-      gap,
-      gapRow,
-      gapColumn,
-      flex,
-      flexGrow,
-      flexShrink,
-      flexBasis
-    },
-    "base"
-  );
+  const { _hover, _focus, _active, _disabled, ...baseProps } = props;
+  const baseStyles = getFlexboxStylesForState(baseProps, "base");
   const hoverStyles = getFlexboxStylesForState(_hover, "hover");
+  const focusStyles = getFlexboxStylesForState(_focus, "focus");
+  const activeStyles = getFlexboxStylesForState(_active, "active");
+  const disabledStyles = getFlexboxStylesForState(_disabled, "disabled");
   return {
-    className: clsx(baseStyles.className, hoverStyles.className),
-    style: { ...baseStyles.style, ...hoverStyles.style }
+    className: clsx(
+      baseStyles.className,
+      hoverStyles.className,
+      focusStyles.className,
+      activeStyles.className,
+      disabledStyles.className
+    ),
+    style: { ...baseStyles.style, ...hoverStyles.style, ...focusStyles.style, ...activeStyles.style, ...disabledStyles.style }
   };
 }
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"flexbox.js","sources":["../../../../src/components/Box/flexbox/flexbox.ts"],"sourcesContent":["import {\n  STATE_SUFFIXES,\n  STATE_CLASS_SUFFIXES,\n  type StateKey,\n  type StyleResult,\n} from \"../shared\";\nimport styles from \"./flexbox.module.css\";\nimport clsx from \"clsx\";\n\nexport type FlexDirectionValue = \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\nexport type JustifyContentValue = \"start\" | \"end\" | \"center\" | \"space-between\" | \"space-around\" | \"space-evenly\";\nexport type AlignItemsValue = \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\nexport type AlignSelfValue = \"auto\" | \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\nexport type FlexWrapValue = \"nowrap\" | \"wrap\" | \"wrap-reverse\";\nexport type SpacingValue = number | string;\n\nexport type FlexboxProps = {\n  flexDirection?: FlexDirectionValue;\n  justifyContent?: JustifyContentValue;\n  alignItems?: AlignItemsValue;\n  alignSelf?: AlignSelfValue;\n  flexWrap?: FlexWrapValue;\n  gap?: SpacingValue;\n  gapRow?: SpacingValue;\n  gapColumn?: SpacingValue;\n  flex?: string;\n  flexGrow?: number;\n  flexShrink?: number;\n  flexBasis?: string;\n};\n\nexport type FlexboxStateProps = {\n  _hover?: FlexboxProps;\n};\n\nfunction getFlexDirectionClass(value: FlexDirectionValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`flex-${value}${stateClassSuffix}`]\n    : styles[`flex-${value}`];\n}\n\nfunction getJustifyContentClass(value: JustifyContentValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`justify-${value}${stateClassSuffix}`]\n    : styles[`justify-${value}`];\n}\n\nfunction getAlignItemsClass(value: AlignItemsValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`items-${value}${stateClassSuffix}`]\n    : styles[`items-${value}`];\n}\n\nfunction getAlignSelfClass(value: AlignSelfValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`self-${value}${stateClassSuffix}`]\n    : styles[`self-${value}`];\n}\n\nfunction getFlexWrapClass(value: FlexWrapValue, state: StateKey): string | undefined {\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n  return stateClassSuffix\n    ? styles[`flex-${value}${stateClassSuffix}`]\n    : styles[`flex-${value}`];\n}\n\nfunction getSpacingValue(value?: SpacingValue): string {\n  if (value === undefined) return \"normal\";\n  if (typeof value === \"string\") return value;\n  if (value === 0) return \"0\";\n  return `calc(var(--t-spacing-unit) * ${value})`;\n}\n\nfunction getFlexboxStylesForState(\n  props: FlexboxProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const {\n    flexDirection,\n    justifyContent,\n    alignItems,\n    alignSelf,\n    flexWrap,\n    gap,\n    gapRow,\n    gapColumn,\n    flex,\n    flexGrow,\n    flexShrink,\n    flexBasis,\n  } = props;\n\n  const classes: string[] = [];\n  const style: Record<string, string> = {};\n  const stateVarSuffix = STATE_SUFFIXES[state];\n  const stateClassSuffix = STATE_CLASS_SUFFIXES[state];\n\n  // Enumerated props\n  if (flexDirection) {\n    const cls = getFlexDirectionClass(flexDirection, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (justifyContent) {\n    const cls = getJustifyContentClass(justifyContent, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (alignItems) {\n    const cls = getAlignItemsClass(alignItems, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (alignSelf) {\n    const cls = getAlignSelfClass(alignSelf, state);\n    if (cls) classes.push(cls);\n  }\n\n  if (flexWrap) {\n    const cls = getFlexWrapClass(flexWrap, state);\n    if (cls) classes.push(cls);\n  }\n\n  // Variable-based props: gap\n  if (gap !== undefined || gapRow !== undefined || gapColumn !== undefined) {\n    const row = gapRow ?? gap;\n    const column = gapColumn ?? gap;\n    const rowValue = getSpacingValue(row);\n    const columnValue = getSpacingValue(column);\n    const gapValue = rowValue === columnValue ? rowValue : `${rowValue} ${columnValue}`;\n\n    const gapClass = stateClassSuffix ? styles[`gap${stateClassSuffix}`] : styles.gap;\n    if (gapClass) classes.push(gapClass);\n    style[`--t-gap${stateVarSuffix}`] = gapValue;\n  }\n\n  // Variable-based props: flex\n  if (flex !== undefined) {\n    const flexClass = stateClassSuffix ? styles[`flex${stateClassSuffix}`] : styles.flex;\n    if (flexClass) classes.push(flexClass);\n    style[`--t-flex${stateVarSuffix}`] = flex;\n  } else if (flexGrow !== undefined || flexShrink !== undefined || flexBasis !== undefined) {\n    const grow = flexGrow ?? 0;\n    const shrink = flexShrink ?? 1;\n    const basis = flexBasis ?? \"auto\";\n    const flexClass = stateClassSuffix ? styles[`flex${stateClassSuffix}`] : styles.flex;\n    if (flexClass) classes.push(flexClass);\n    style[`--t-flex${stateVarSuffix}`] = `${grow} ${shrink} ${basis}`;\n  }\n\n  return {\n    className: clsx(...classes),\n    style,\n  };\n}\n\nexport function getFlexboxStyles(\n  props: FlexboxProps & FlexboxStateProps\n): StyleResult {\n  const {\n    flexDirection,\n    justifyContent,\n    alignItems,\n    alignSelf,\n    flexWrap,\n    gap,\n    gapRow,\n    gapColumn,\n    flex,\n    flexGrow,\n    flexShrink,\n    flexBasis,\n    _hover,\n  } = props;\n\n  const baseStyles = getFlexboxStylesForState(\n    {\n      flexDirection,\n      justifyContent,\n      alignItems,\n      alignSelf,\n      flexWrap,\n      gap,\n      gapRow,\n      gapColumn,\n      flex,\n      flexGrow,\n      flexShrink,\n      flexBasis,\n    },\n    \"base\"\n  );\n  const hoverStyles = getFlexboxStylesForState(_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":"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"}
+{"version":3,"file":"flexbox.js","sources":["../../../../src/components/Box/flexbox/flexbox.ts"],"sourcesContent":["import type { ResponsiveValue } from \"@/utils/breakpoints\";\nimport {\n  type StateKey,\n  type StateProps,\n  type StyleResult,\n  getRawValue,\n  getResponsiveVarStyles,\n  getEnumResponsiveStyles,\n} from \"../shared\";\nimport styles from \"./flexbox.module.css\";\nimport clsx from \"clsx\";\n\nexport type FlexDirectionValue = \"row\" | \"row-reverse\" | \"column\" | \"column-reverse\";\nexport type JustifyContentValue = \"start\" | \"end\" | \"center\" | \"space-between\" | \"space-around\" | \"space-evenly\";\nexport type AlignItemsValue = \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\nexport type AlignSelfValue = \"auto\" | \"start\" | \"end\" | \"center\" | \"stretch\" | \"baseline\";\nexport type FlexWrapValue = \"nowrap\" | \"wrap\" | \"wrap-reverse\";\nexport type SpacingValue = number | string;\n\nexport type FlexboxProps = {\n  flexDirection?: ResponsiveValue<FlexDirectionValue>;\n  justifyContent?: ResponsiveValue<JustifyContentValue>;\n  alignItems?: ResponsiveValue<AlignItemsValue>;\n  alignSelf?: ResponsiveValue<AlignSelfValue>;\n  flexWrap?: ResponsiveValue<FlexWrapValue>;\n  gap?: ResponsiveValue<SpacingValue>;\n  gapRow?: ResponsiveValue<SpacingValue>;\n  gapColumn?: ResponsiveValue<SpacingValue>;\n  flex?: ResponsiveValue<string>;\n  flexGrow?: number;\n  flexShrink?: number;\n  flexBasis?: string;\n};\n\nfunction getFlexboxStylesForState(\n  props: FlexboxProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const {\n    flexDirection,\n    justifyContent,\n    alignItems,\n    alignSelf,\n    flexWrap,\n    gap,\n    gapRow,\n    gapColumn,\n    flex,\n    flexGrow,\n    flexShrink,\n    flexBasis,\n  } = props;\n\n  const classes: string[] = [];\n  const style: Record<string, string> = {};\n\n  const dirResult = getEnumResponsiveStyles(styles, \"flex\", flexDirection, state);\n  if (dirResult.className) classes.push(dirResult.className);\n\n  const justifyResult = getEnumResponsiveStyles(styles, \"justify\", justifyContent, state);\n  if (justifyResult.className) classes.push(justifyResult.className);\n\n  const itemsResult = getEnumResponsiveStyles(styles, \"items\", alignItems, state);\n  if (itemsResult.className) classes.push(itemsResult.className);\n\n  const selfResult = getEnumResponsiveStyles(styles, \"self\", alignSelf, state);\n  if (selfResult.className) classes.push(selfResult.className);\n\n  const wrapResult = getEnumResponsiveStyles(styles, \"flex\", flexWrap, state);\n  if (wrapResult.className) classes.push(wrapResult.className);\n\n  const resolvedGapRow = gapRow ?? gap;\n  const resolvedGapCol = gapColumn ?? gap;\n\n  const gapRowResult = getResponsiveVarStyles(styles, \"gap-row\", \"gap-row\", resolvedGapRow, state, getRawValue);\n  const gapColResult = getResponsiveVarStyles(styles, \"gap-col\", \"gap-col\", resolvedGapCol, state, getRawValue);\n\n  if (gapRowResult.className) classes.push(gapRowResult.className);\n  if (gapColResult.className) classes.push(gapColResult.className);\n  Object.assign(style, gapRowResult.style, gapColResult.style);\n\n  if (flex !== undefined) {\n    const flexResult = getResponsiveVarStyles(styles, \"flex\", \"flex\", flex, state);\n    if (flexResult.className) classes.push(flexResult.className);\n    Object.assign(style, flexResult.style);\n  } else if (flexGrow !== undefined || flexShrink !== undefined || flexBasis !== undefined) {\n    const composedFlex = `${flexGrow ?? 0} ${flexShrink ?? 1} ${flexBasis ?? \"auto\"}`;\n    const flexResult = getResponsiveVarStyles(styles, \"flex\", \"flex\", composedFlex, state);\n    if (flexResult.className) classes.push(flexResult.className);\n    Object.assign(style, flexResult.style);\n  }\n\n  return {\n    className: clsx(...classes),\n    style,\n  };\n}\n\nexport function getFlexboxStyles(\n  props: FlexboxProps & StateProps<FlexboxProps>\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getFlexboxStylesForState(baseProps, \"base\");\n  const hoverStyles = getFlexboxStylesForState(_hover, \"hover\");\n  const focusStyles = getFlexboxStylesForState(_focus, \"focus\");\n  const activeStyles = getFlexboxStylesForState(_active, \"active\");\n  const disabledStyles = getFlexboxStylesForState(_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: { ...baseStyles.style, ...hoverStyles.style, ...focusStyles.style, ...activeStyles.style, ...disabledStyles.style } as Record<string, string>,\n  };\n}\n"],"names":[],"mappings":";;;;AAkCA,SAAS,yBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,QAAM,UAAoB,CAAA;AAC1B,QAAM,QAAgC,CAAA;AAEtC,QAAM,YAAY,wBAAwB,QAAQ,QAAQ,eAAe,KAAK;AAC9E,MAAI,UAAU,UAAW,SAAQ,KAAK,UAAU,SAAS;AAEzD,QAAM,gBAAgB,wBAAwB,QAAQ,WAAW,gBAAgB,KAAK;AACtF,MAAI,cAAc,UAAW,SAAQ,KAAK,cAAc,SAAS;AAEjE,QAAM,cAAc,wBAAwB,QAAQ,SAAS,YAAY,KAAK;AAC9E,MAAI,YAAY,UAAW,SAAQ,KAAK,YAAY,SAAS;AAE7D,QAAM,aAAa,wBAAwB,QAAQ,QAAQ,WAAW,KAAK;AAC3E,MAAI,WAAW,UAAW,SAAQ,KAAK,WAAW,SAAS;AAE3D,QAAM,aAAa,wBAAwB,QAAQ,QAAQ,UAAU,KAAK;AAC1E,MAAI,WAAW,UAAW,SAAQ,KAAK,WAAW,SAAS;AAE3D,QAAM,iBAAiB,UAAU;AACjC,QAAM,iBAAiB,aAAa;AAEpC,QAAM,eAAe,uBAAuB,QAAQ,WAAW,WAAW,gBAAgB,OAAO,WAAW;AAC5G,QAAM,eAAe,uBAAuB,QAAQ,WAAW,WAAW,gBAAgB,OAAO,WAAW;AAE5G,MAAI,aAAa,UAAW,SAAQ,KAAK,aAAa,SAAS;AAC/D,MAAI,aAAa,UAAW,SAAQ,KAAK,aAAa,SAAS;AAC/D,SAAO,OAAO,OAAO,aAAa,OAAO,aAAa,KAAK;AAE3D,MAAI,SAAS,QAAW;AACtB,UAAM,aAAa,uBAAuB,QAAQ,QAAQ,QAAQ,MAAM,KAAK;AAC7E,QAAI,WAAW,UAAW,SAAQ,KAAK,WAAW,SAAS;AAC3D,WAAO,OAAO,OAAO,WAAW,KAAK;AAAA,EACvC,WAAW,aAAa,UAAa,eAAe,UAAa,cAAc,QAAW;AACxF,UAAM,eAAe,GAAG,YAAY,CAAC,IAAI,cAAc,CAAC,IAAI,aAAa,MAAM;AAC/E,UAAM,aAAa,uBAAuB,QAAQ,QAAQ,QAAQ,cAAc,KAAK;AACrF,QAAI,WAAW,UAAW,SAAQ,KAAK,WAAW,SAAS;AAC3D,WAAO,OAAO,OAAO,WAAW,KAAK;AAAA,EACvC;AAEA,SAAO;AAAA,IACL,WAAW,KAAK,GAAG,OAAO;AAAA,IAC1B;AAAA,EAAA;AAEJ;AAEO,SAAS,iBACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,yBAAyB,WAAW,MAAM;AAC7D,QAAM,cAAc,yBAAyB,QAAQ,OAAO;AAC5D,QAAM,cAAc,yBAAyB,QAAQ,OAAO;AAC5D,QAAM,eAAe,yBAAyB,SAAS,QAAQ;AAC/D,QAAM,iBAAiB,yBAAyB,WAAW,UAAU;AAErE,SAAO;AAAA,IACL,WAAW;AAAA,MACT,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,YAAY;AAAA,MACZ,aAAa;AAAA,MACb,eAAe;AAAA,IAAA;AAAA,IAEjB,OAAO,EAAE,GAAG,WAAW,OAAO,GAAG,YAAY,OAAO,GAAG,YAAY,OAAO,GAAG,aAAa,OAAO,GAAG,eAAe,MAAA;AAAA,EAAM;AAE7H;"}