@tosui/react 0.1.3 → 0.1.5

package/dist/components/Box/margin/margin.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 "./margin.module.css.js";
 import clsx from "clsx";
-function getSpacingProps(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 resolveMarginValue(key, props) {
   const shorthandMap = {
     mt: "my",
@@ -45,25 +12,14 @@ function resolveMarginValue(key, props) {
   return props[key] ?? props[shorthandMap[key]] ?? props.m;
 }
 function getMarginStylesForState(props, state) {
-  const result = { className: "", style: {} };
-  if (!props) return result;
-  const marginTop = getSpacingProps("mt", resolveMarginValue("mt", props), state);
-  const marginRight = getSpacingProps("mr", resolveMarginValue("mr", props), state);
-  const marginBottom = getSpacingProps("mb", resolveMarginValue("mb", props), state);
-  const marginLeft = getSpacingProps("ml", resolveMarginValue("ml", props), state);
+  if (!props) return { className: "", style: {} };
+  const keys = ["mt", "mr", "mb", "ml"];
+  const results = keys.map(
+    (key) => getResponsiveVarStyles(styles, key, key, resolveMarginValue(key, props), state, getRawValue)
+  );
   return {
-    className: clsx(
-      marginTop.className,
-      marginRight.className,
-      marginBottom.className,
-      marginLeft.className
-    ),
-    style: {
-      ...marginTop.style,
-      ...marginRight.style,
-      ...marginBottom.style,
-      ...marginLeft.style
-    }
+    className: clsx(...results.map((r) => r.className)),
+    style: Object.assign({}, ...results.map((r) => r.style))
   };
 }
 function getMarginStyles(props) {

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

@@ -1 +1 @@
-{"version":3,"file":"margin.js","sources":["../../../../src/components/Box/margin/margin.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 \"./margin.module.css\";\nimport clsx from \"clsx\";\n\ntype SpacingValue = string | number;\ntype MarginKey = \"mt\" | \"mr\" | \"mb\" | \"ml\";\ntype MarginShorthandKey = \"m\" | \"mx\" | \"my\";\n\nexport type MarginProps = {\n  m?: ResponsiveValue<SpacingValue>;\n  mt?: ResponsiveValue<SpacingValue>;\n  mr?: ResponsiveValue<SpacingValue>;\n  mb?: ResponsiveValue<SpacingValue>;\n  ml?: ResponsiveValue<SpacingValue>;\n  mx?: ResponsiveValue<SpacingValue>;\n  my?: ResponsiveValue<SpacingValue>;\n};\n\nexport type MarginStateProps = {\n  _hover?: MarginProps;\n  _focus?: MarginProps;\n  _active?: MarginProps;\n  _disabled?: MarginProps;\n};\n\nfunction getSpacingProps(\n  key: MarginKey,\n  value: ResponsiveValue<SpacingValue> | 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 resolveMarginValue(\n  key: MarginKey,\n  props: MarginProps\n): ResponsiveValue<SpacingValue> | undefined {\n  const shorthandMap: Record<MarginKey, MarginShorthandKey> = {\n    mt: \"my\",\n    mb: \"my\",\n    mr: \"mx\",\n    ml: \"mx\",\n  };\n  return props[key] ?? props[shorthandMap[key]] ?? props.m;\n}\n\nfunction getMarginStylesForState(\n  props: MarginProps | undefined,\n  state: StateKey\n): StyleResult {\n  const result: StyleResult = { className: \"\", style: {} };\n\n  if (!props) return result;\n\n  const marginTop = getSpacingProps(\"mt\", resolveMarginValue(\"mt\", props), state);\n  const marginRight = getSpacingProps(\"mr\", resolveMarginValue(\"mr\", props), state);\n  const marginBottom = getSpacingProps(\"mb\", resolveMarginValue(\"mb\", props), state);\n  const marginLeft = getSpacingProps(\"ml\", resolveMarginValue(\"ml\", props), state);\n\n  return {\n    className: clsx(\n      marginTop.className,\n      marginRight.className,\n      marginBottom.className,\n      marginLeft.className\n    ),\n    style: {\n      ...marginTop.style,\n      ...marginRight.style,\n      ...marginBottom.style,\n      ...marginLeft.style,\n    },\n  };\n}\n\nexport function getMarginStyles(\n  props: MarginProps & MarginStateProps\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getMarginStylesForState(baseProps, \"base\");\n  const hoverStyles = getMarginStylesForState(_hover, \"hover\");\n  const focusStyles = getMarginStylesForState(_focus, \"focus\");\n  const activeStyles = getMarginStylesForState(_active, \"active\");\n  const disabledStyles = getMarginStylesForState(_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":"margin.js","sources":["../../../../src/components/Box/margin/margin.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 \"./margin.module.css\";\nimport clsx from \"clsx\";\n\ntype SpacingValue = string | number;\ntype MarginKey = \"mt\" | \"mr\" | \"mb\" | \"ml\";\ntype MarginShorthandKey = \"m\" | \"mx\" | \"my\";\n\nexport type MarginProps = {\n  m?: ResponsiveValue<SpacingValue>;\n  mt?: ResponsiveValue<SpacingValue>;\n  mr?: ResponsiveValue<SpacingValue>;\n  mb?: ResponsiveValue<SpacingValue>;\n  ml?: ResponsiveValue<SpacingValue>;\n  mx?: ResponsiveValue<SpacingValue>;\n  my?: ResponsiveValue<SpacingValue>;\n};\n\nexport type MarginStateProps = {\n  _hover?: MarginProps;\n  _focus?: MarginProps;\n  _active?: MarginProps;\n  _disabled?: MarginProps;\n};\n\nfunction resolveMarginValue(\n  key: MarginKey,\n  props: MarginProps\n): ResponsiveValue<SpacingValue> | undefined {\n  const shorthandMap: Record<MarginKey, MarginShorthandKey> = {\n    mt: \"my\",\n    mb: \"my\",\n    mr: \"mx\",\n    ml: \"mx\",\n  };\n  return props[key] ?? props[shorthandMap[key]] ?? props.m;\n}\n\nfunction getMarginStylesForState(\n  props: MarginProps | undefined,\n  state: StateKey\n): StyleResult {\n  if (!props) return { className: \"\", style: {} };\n\n  const keys: MarginKey[] = [\"mt\", \"mr\", \"mb\", \"ml\"];\n  const results = keys.map((key) =>\n    getResponsiveVarStyles(styles, key, key, resolveMarginValue(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 getMarginStyles(\n  props: MarginProps & MarginStateProps\n): StyleResult {\n  const { _hover, _focus, _active, _disabled, ...baseProps } = props;\n\n  const baseStyles = getMarginStylesForState(baseProps, \"base\");\n  const hoverStyles = getMarginStylesForState(_hover, \"hover\");\n  const focusStyles = getMarginStylesForState(_focus, \"focus\");\n  const activeStyles = getMarginStylesForState(_active, \"active\");\n  const disabledStyles = getMarginStylesForState(_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,mBACP,KACA,OAC2C;AAC3C,QAAM,eAAsD;AAAA,IAC1D,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAEN,SAAO,MAAM,GAAG,KAAK,MAAM,aAAa,GAAG,CAAC,KAAK,MAAM;AACzD;AAEA,SAAS,wBACP,OACA,OACa;AACb,MAAI,CAAC,MAAO,QAAO,EAAE,WAAW,IAAI,OAAO,GAAC;AAE5C,QAAM,OAAoB,CAAC,MAAM,MAAM,MAAM,IAAI;AACjD,QAAM,UAAU,KAAK;AAAA,IAAI,CAAC,QACxB,uBAAuB,QAAQ,KAAK,KAAK,mBAAmB,KAAK,KAAK,GAAG,OAAO,WAAW;AAAA,EAAA;AAG7F,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,gBACd,OACa;AACb,QAAM,EAAE,QAAQ,QAAQ,SAAS,WAAW,GAAG,cAAc;AAE7D,QAAM,aAAa,wBAAwB,WAAW,MAAM;AAC5D,QAAM,cAAc,wBAAwB,QAAQ,OAAO;AAC3D,QAAM,cAAc,wBAAwB,QAAQ,OAAO;AAC3D,QAAM,eAAe,wBAAwB,SAAS,QAAQ;AAC9D,QAAM,iBAAiB,wBAAwB,WAAW,UAAU;AAEpE,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;"}

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

@@ -1,187 +1,187 @@
 /* margin-top */
-._mt_17rt1_2 { margin-top: var(--t-mt); }
-._mt\:h_17rt1_3:hover { margin-top: var(--t-mt-h); }
-._mt\:f_17rt1_4:focus { margin-top: var(--t-mt-f); }
-._mt\:a_17rt1_5:active { margin-top: var(--t-mt-a); }
-._mt\:d_17rt1_6:disabled { margin-top: var(--t-mt-d); }
+._mt_s7uu5_2 { margin-top: var(--t-mt); }
+._mt\:h_s7uu5_3:hover { margin-top: var(--t-mt-h); }
+._mt\:f_s7uu5_4:focus { margin-top: var(--t-mt-f); }
+._mt\:a_s7uu5_5:active { margin-top: var(--t-mt-a); }
+._mt\:d_s7uu5_6:disabled { margin-top: var(--t-mt-d); }
 
 @media (min-width: 640px) {
-  ._mt_sm_17rt1_9 { margin-top: var(--t-mt_sm); }
-  ._mt_sm\:h_17rt1_10:hover { margin-top: var(--t-mt_sm-h); }
-  ._mt_sm\:f_17rt1_11:focus { margin-top: var(--t-mt_sm-f); }
-  ._mt_sm\:a_17rt1_12:active { margin-top: var(--t-mt_sm-a); }
-  ._mt_sm\:d_17rt1_13:disabled { margin-top: var(--t-mt_sm-d); }
+  ._mt_s7uu5_2 { margin-top: var(--t-mt_sm, var(--t-mt)); }
+  ._mt\:h_s7uu5_3:hover { margin-top: var(--t-mt_sm-h, var(--t-mt-h)); }
+  ._mt\:f_s7uu5_4:focus { margin-top: var(--t-mt_sm-f, var(--t-mt-f)); }
+  ._mt\:a_s7uu5_5:active { margin-top: var(--t-mt_sm-a, var(--t-mt-a)); }
+  ._mt\:d_s7uu5_6:disabled { margin-top: var(--t-mt_sm-d, var(--t-mt-d)); }
 }
 
 @media (min-width: 768px) {
-  ._mt_md_17rt1_17 { margin-top: var(--t-mt_md); }
-  ._mt_md\:h_17rt1_18:hover { margin-top: var(--t-mt_md-h); }
-  ._mt_md\:f_17rt1_19:focus { margin-top: var(--t-mt_md-f); }
-  ._mt_md\:a_17rt1_20:active { margin-top: var(--t-mt_md-a); }
-  ._mt_md\:d_17rt1_21:disabled { margin-top: var(--t-mt_md-d); }
+  ._mt_s7uu5_2 { margin-top: var(--t-mt_md, var(--t-mt_sm, var(--t-mt))); }
+  ._mt\:h_s7uu5_3:hover { margin-top: var(--t-mt_md-h, var(--t-mt_sm-h, var(--t-mt-h))); }
+  ._mt\:f_s7uu5_4:focus { margin-top: var(--t-mt_md-f, var(--t-mt_sm-f, var(--t-mt-f))); }
+  ._mt\:a_s7uu5_5:active { margin-top: var(--t-mt_md-a, var(--t-mt_sm-a, var(--t-mt-a))); }
+  ._mt\:d_s7uu5_6:disabled { margin-top: var(--t-mt_md-d, var(--t-mt_sm-d, var(--t-mt-d))); }
 }
 
 @media (min-width: 1024px) {
-  ._mt_lg_17rt1_25 { margin-top: var(--t-mt_lg); }
-  ._mt_lg\:h_17rt1_26:hover { margin-top: var(--t-mt_lg-h); }
-  ._mt_lg\:f_17rt1_27:focus { margin-top: var(--t-mt_lg-f); }
-  ._mt_lg\:a_17rt1_28:active { margin-top: var(--t-mt_lg-a); }
-  ._mt_lg\:d_17rt1_29:disabled { margin-top: var(--t-mt_lg-d); }
+  ._mt_s7uu5_2 { margin-top: var(--t-mt_lg, var(--t-mt_md, var(--t-mt_sm, var(--t-mt)))); }
+  ._mt\:h_s7uu5_3:hover { margin-top: var(--t-mt_lg-h, var(--t-mt_md-h, var(--t-mt_sm-h, var(--t-mt-h)))); }
+  ._mt\:f_s7uu5_4:focus { margin-top: var(--t-mt_lg-f, var(--t-mt_md-f, var(--t-mt_sm-f, var(--t-mt-f)))); }
+  ._mt\:a_s7uu5_5:active { margin-top: var(--t-mt_lg-a, var(--t-mt_md-a, var(--t-mt_sm-a, var(--t-mt-a)))); }
+  ._mt\:d_s7uu5_6:disabled { margin-top: var(--t-mt_lg-d, var(--t-mt_md-d, var(--t-mt_sm-d, var(--t-mt-d)))); }
 }
 
 @media (min-width: 1280px) {
-  ._mt_xl_17rt1_33 { margin-top: var(--t-mt_xl); }
-  ._mt_xl\:h_17rt1_34:hover { margin-top: var(--t-mt_xl-h); }
-  ._mt_xl\:f_17rt1_35:focus { margin-top: var(--t-mt_xl-f); }
-  ._mt_xl\:a_17rt1_36:active { margin-top: var(--t-mt_xl-a); }
-  ._mt_xl\:d_17rt1_37:disabled { margin-top: var(--t-mt_xl-d); }
+  ._mt_s7uu5_2 { margin-top: var(--t-mt_xl, var(--t-mt_lg, var(--t-mt_md, var(--t-mt_sm, var(--t-mt))))); }
+  ._mt\:h_s7uu5_3:hover { margin-top: var(--t-mt_xl-h, var(--t-mt_lg-h, var(--t-mt_md-h, var(--t-mt_sm-h, var(--t-mt-h))))); }
+  ._mt\:f_s7uu5_4:focus { margin-top: var(--t-mt_xl-f, var(--t-mt_lg-f, var(--t-mt_md-f, var(--t-mt_sm-f, var(--t-mt-f))))); }
+  ._mt\:a_s7uu5_5:active { margin-top: var(--t-mt_xl-a, var(--t-mt_lg-a, var(--t-mt_md-a, var(--t-mt_sm-a, var(--t-mt-a))))); }
+  ._mt\:d_s7uu5_6:disabled { margin-top: var(--t-mt_xl-d, var(--t-mt_lg-d, var(--t-mt_md-d, var(--t-mt_sm-d, var(--t-mt-d))))); }
 }
 
 @media (min-width: 1536px) {
-  ._mt_2xl_17rt1_41 { margin-top: var(--t-mt_2xl); }
-  ._mt_2xl\:h_17rt1_42:hover { margin-top: var(--t-mt_2xl-h); }
-  ._mt_2xl\:f_17rt1_43:focus { margin-top: var(--t-mt_2xl-f); }
-  ._mt_2xl\:a_17rt1_44:active { margin-top: var(--t-mt_2xl-a); }
-  ._mt_2xl\:d_17rt1_45:disabled { margin-top: var(--t-mt_2xl-d); }
+  ._mt_s7uu5_2 { margin-top: var(--t-mt_2xl, var(--t-mt_xl, var(--t-mt_lg, var(--t-mt_md, var(--t-mt_sm, var(--t-mt)))))); }
+  ._mt\:h_s7uu5_3:hover { margin-top: var(--t-mt_2xl-h, var(--t-mt_xl-h, var(--t-mt_lg-h, var(--t-mt_md-h, var(--t-mt_sm-h, var(--t-mt-h)))))); }
+  ._mt\:f_s7uu5_4:focus { margin-top: var(--t-mt_2xl-f, var(--t-mt_xl-f, var(--t-mt_lg-f, var(--t-mt_md-f, var(--t-mt_sm-f, var(--t-mt-f)))))); }
+  ._mt\:a_s7uu5_5:active { margin-top: var(--t-mt_2xl-a, var(--t-mt_xl-a, var(--t-mt_lg-a, var(--t-mt_md-a, var(--t-mt_sm-a, var(--t-mt-a)))))); }
+  ._mt\:d_s7uu5_6:disabled { margin-top: var(--t-mt_2xl-d, var(--t-mt_xl-d, var(--t-mt_lg-d, var(--t-mt_md-d, var(--t-mt_sm-d, var(--t-mt-d)))))); }
 }
 
 /* margin-right */
-._mr_17rt1_49 { margin-right: var(--t-mr); }
-._mr\:h_17rt1_50:hover { margin-right: var(--t-mr-h); }
-._mr\:f_17rt1_51:focus { margin-right: var(--t-mr-f); }
-._mr\:a_17rt1_52:active { margin-right: var(--t-mr-a); }
-._mr\:d_17rt1_53:disabled { margin-right: var(--t-mr-d); }
+._mr_s7uu5_49 { margin-right: var(--t-mr); }
+._mr\:h_s7uu5_50:hover { margin-right: var(--t-mr-h); }
+._mr\:f_s7uu5_51:focus { margin-right: var(--t-mr-f); }
+._mr\:a_s7uu5_52:active { margin-right: var(--t-mr-a); }
+._mr\:d_s7uu5_53:disabled { margin-right: var(--t-mr-d); }
 
 @media (min-width: 640px) {
-  ._mr_sm_17rt1_56 { margin-right: var(--t-mr_sm); }
-  ._mr_sm\:h_17rt1_57:hover { margin-right: var(--t-mr_sm-h); }
-  ._mr_sm\:f_17rt1_58:focus { margin-right: var(--t-mr_sm-f); }
-  ._mr_sm\:a_17rt1_59:active { margin-right: var(--t-mr_sm-a); }
-  ._mr_sm\:d_17rt1_60:disabled { margin-right: var(--t-mr_sm-d); }
+  ._mr_s7uu5_49 { margin-right: var(--t-mr_sm, var(--t-mr)); }
+  ._mr\:h_s7uu5_50:hover { margin-right: var(--t-mr_sm-h, var(--t-mr-h)); }
+  ._mr\:f_s7uu5_51:focus { margin-right: var(--t-mr_sm-f, var(--t-mr-f)); }
+  ._mr\:a_s7uu5_52:active { margin-right: var(--t-mr_sm-a, var(--t-mr-a)); }
+  ._mr\:d_s7uu5_53:disabled { margin-right: var(--t-mr_sm-d, var(--t-mr-d)); }
 }
 
 @media (min-width: 768px) {
-  ._mr_md_17rt1_64 { margin-right: var(--t-mr_md); }
-  ._mr_md\:h_17rt1_65:hover { margin-right: var(--t-mr_md-h); }
-  ._mr_md\:f_17rt1_66:focus { margin-right: var(--t-mr_md-f); }
-  ._mr_md\:a_17rt1_67:active { margin-right: var(--t-mr_md-a); }
-  ._mr_md\:d_17rt1_68:disabled { margin-right: var(--t-mr_md-d); }
+  ._mr_s7uu5_49 { margin-right: var(--t-mr_md, var(--t-mr_sm, var(--t-mr))); }
+  ._mr\:h_s7uu5_50:hover { margin-right: var(--t-mr_md-h, var(--t-mr_sm-h, var(--t-mr-h))); }
+  ._mr\:f_s7uu5_51:focus { margin-right: var(--t-mr_md-f, var(--t-mr_sm-f, var(--t-mr-f))); }
+  ._mr\:a_s7uu5_52:active { margin-right: var(--t-mr_md-a, var(--t-mr_sm-a, var(--t-mr-a))); }
+  ._mr\:d_s7uu5_53:disabled { margin-right: var(--t-mr_md-d, var(--t-mr_sm-d, var(--t-mr-d))); }
 }
 
 @media (min-width: 1024px) {
-  ._mr_lg_17rt1_72 { margin-right: var(--t-mr_lg); }
-  ._mr_lg\:h_17rt1_73:hover { margin-right: var(--t-mr_lg-h); }
-  ._mr_lg\:f_17rt1_74:focus { margin-right: var(--t-mr_lg-f); }
-  ._mr_lg\:a_17rt1_75:active { margin-right: var(--t-mr_lg-a); }
-  ._mr_lg\:d_17rt1_76:disabled { margin-right: var(--t-mr_lg-d); }
+  ._mr_s7uu5_49 { margin-right: var(--t-mr_lg, var(--t-mr_md, var(--t-mr_sm, var(--t-mr)))); }
+  ._mr\:h_s7uu5_50:hover { margin-right: var(--t-mr_lg-h, var(--t-mr_md-h, var(--t-mr_sm-h, var(--t-mr-h)))); }
+  ._mr\:f_s7uu5_51:focus { margin-right: var(--t-mr_lg-f, var(--t-mr_md-f, var(--t-mr_sm-f, var(--t-mr-f)))); }
+  ._mr\:a_s7uu5_52:active { margin-right: var(--t-mr_lg-a, var(--t-mr_md-a, var(--t-mr_sm-a, var(--t-mr-a)))); }
+  ._mr\:d_s7uu5_53:disabled { margin-right: var(--t-mr_lg-d, var(--t-mr_md-d, var(--t-mr_sm-d, var(--t-mr-d)))); }
 }
 
 @media (min-width: 1280px) {
-  ._mr_xl_17rt1_80 { margin-right: var(--t-mr_xl); }
-  ._mr_xl\:h_17rt1_81:hover { margin-right: var(--t-mr_xl-h); }
-  ._mr_xl\:f_17rt1_82:focus { margin-right: var(--t-mr_xl-f); }
-  ._mr_xl\:a_17rt1_83:active { margin-right: var(--t-mr_xl-a); }
-  ._mr_xl\:d_17rt1_84:disabled { margin-right: var(--t-mr_xl-d); }
+  ._mr_s7uu5_49 { margin-right: var(--t-mr_xl, var(--t-mr_lg, var(--t-mr_md, var(--t-mr_sm, var(--t-mr))))); }
+  ._mr\:h_s7uu5_50:hover { margin-right: var(--t-mr_xl-h, var(--t-mr_lg-h, var(--t-mr_md-h, var(--t-mr_sm-h, var(--t-mr-h))))); }
+  ._mr\:f_s7uu5_51:focus { margin-right: var(--t-mr_xl-f, var(--t-mr_lg-f, var(--t-mr_md-f, var(--t-mr_sm-f, var(--t-mr-f))))); }
+  ._mr\:a_s7uu5_52:active { margin-right: var(--t-mr_xl-a, var(--t-mr_lg-a, var(--t-mr_md-a, var(--t-mr_sm-a, var(--t-mr-a))))); }
+  ._mr\:d_s7uu5_53:disabled { margin-right: var(--t-mr_xl-d, var(--t-mr_lg-d, var(--t-mr_md-d, var(--t-mr_sm-d, var(--t-mr-d))))); }
 }
 
 @media (min-width: 1536px) {
-  ._mr_2xl_17rt1_88 { margin-right: var(--t-mr_2xl); }
-  ._mr_2xl\:h_17rt1_89:hover { margin-right: var(--t-mr_2xl-h); }
-  ._mr_2xl\:f_17rt1_90:focus { margin-right: var(--t-mr_2xl-f); }
-  ._mr_2xl\:a_17rt1_91:active { margin-right: var(--t-mr_2xl-a); }
-  ._mr_2xl\:d_17rt1_92:disabled { margin-right: var(--t-mr_2xl-d); }
+  ._mr_s7uu5_49 { margin-right: var(--t-mr_2xl, var(--t-mr_xl, var(--t-mr_lg, var(--t-mr_md, var(--t-mr_sm, var(--t-mr)))))); }
+  ._mr\:h_s7uu5_50:hover { margin-right: var(--t-mr_2xl-h, var(--t-mr_xl-h, var(--t-mr_lg-h, var(--t-mr_md-h, var(--t-mr_sm-h, var(--t-mr-h)))))); }
+  ._mr\:f_s7uu5_51:focus { margin-right: var(--t-mr_2xl-f, var(--t-mr_xl-f, var(--t-mr_lg-f, var(--t-mr_md-f, var(--t-mr_sm-f, var(--t-mr-f)))))); }
+  ._mr\:a_s7uu5_52:active { margin-right: var(--t-mr_2xl-a, var(--t-mr_xl-a, var(--t-mr_lg-a, var(--t-mr_md-a, var(--t-mr_sm-a, var(--t-mr-a)))))); }
+  ._mr\:d_s7uu5_53:disabled { margin-right: var(--t-mr_2xl-d, var(--t-mr_xl-d, var(--t-mr_lg-d, var(--t-mr_md-d, var(--t-mr_sm-d, var(--t-mr-d)))))); }
 }
 
 /* margin-bottom */
-._mb_17rt1_96 { margin-bottom: var(--t-mb); }
-._mb\:h_17rt1_97:hover { margin-bottom: var(--t-mb-h); }
-._mb\:f_17rt1_98:focus { margin-bottom: var(--t-mb-f); }
-._mb\:a_17rt1_99:active { margin-bottom: var(--t-mb-a); }
-._mb\:d_17rt1_100:disabled { margin-bottom: var(--t-mb-d); }
+._mb_s7uu5_96 { margin-bottom: var(--t-mb); }
+._mb\:h_s7uu5_97:hover { margin-bottom: var(--t-mb-h); }
+._mb\:f_s7uu5_98:focus { margin-bottom: var(--t-mb-f); }
+._mb\:a_s7uu5_99:active { margin-bottom: var(--t-mb-a); }
+._mb\:d_s7uu5_100:disabled { margin-bottom: var(--t-mb-d); }
 
 @media (min-width: 640px) {
-  ._mb_sm_17rt1_103 { margin-bottom: var(--t-mb_sm); }
-  ._mb_sm\:h_17rt1_104:hover { margin-bottom: var(--t-mb_sm-h); }
-  ._mb_sm\:f_17rt1_105:focus { margin-bottom: var(--t-mb_sm-f); }
-  ._mb_sm\:a_17rt1_106:active { margin-bottom: var(--t-mb_sm-a); }
-  ._mb_sm\:d_17rt1_107:disabled { margin-bottom: var(--t-mb_sm-d); }
+  ._mb_s7uu5_96 { margin-bottom: var(--t-mb_sm, var(--t-mb)); }
+  ._mb\:h_s7uu5_97:hover { margin-bottom: var(--t-mb_sm-h, var(--t-mb-h)); }
+  ._mb\:f_s7uu5_98:focus { margin-bottom: var(--t-mb_sm-f, var(--t-mb-f)); }
+  ._mb\:a_s7uu5_99:active { margin-bottom: var(--t-mb_sm-a, var(--t-mb-a)); }
+  ._mb\:d_s7uu5_100:disabled { margin-bottom: var(--t-mb_sm-d, var(--t-mb-d)); }
 }
 
 @media (min-width: 768px) {
-  ._mb_md_17rt1_111 { margin-bottom: var(--t-mb_md); }
-  ._mb_md\:h_17rt1_112:hover { margin-bottom: var(--t-mb_md-h); }
-  ._mb_md\:f_17rt1_113:focus { margin-bottom: var(--t-mb_md-f); }
-  ._mb_md\:a_17rt1_114:active { margin-bottom: var(--t-mb_md-a); }
-  ._mb_md\:d_17rt1_115:disabled { margin-bottom: var(--t-mb_md-d); }
+  ._mb_s7uu5_96 { margin-bottom: var(--t-mb_md, var(--t-mb_sm, var(--t-mb))); }
+  ._mb\:h_s7uu5_97:hover { margin-bottom: var(--t-mb_md-h, var(--t-mb_sm-h, var(--t-mb-h))); }
+  ._mb\:f_s7uu5_98:focus { margin-bottom: var(--t-mb_md-f, var(--t-mb_sm-f, var(--t-mb-f))); }
+  ._mb\:a_s7uu5_99:active { margin-bottom: var(--t-mb_md-a, var(--t-mb_sm-a, var(--t-mb-a))); }
+  ._mb\:d_s7uu5_100:disabled { margin-bottom: var(--t-mb_md-d, var(--t-mb_sm-d, var(--t-mb-d))); }
 }
 
 @media (min-width: 1024px) {
-  ._mb_lg_17rt1_119 { margin-bottom: var(--t-mb_lg); }
-  ._mb_lg\:h_17rt1_120:hover { margin-bottom: var(--t-mb_lg-h); }
-  ._mb_lg\:f_17rt1_121:focus { margin-bottom: var(--t-mb_lg-f); }
-  ._mb_lg\:a_17rt1_122:active { margin-bottom: var(--t-mb_lg-a); }
-  ._mb_lg\:d_17rt1_123:disabled { margin-bottom: var(--t-mb_lg-d); }
+  ._mb_s7uu5_96 { margin-bottom: var(--t-mb_lg, var(--t-mb_md, var(--t-mb_sm, var(--t-mb)))); }
+  ._mb\:h_s7uu5_97:hover { margin-bottom: var(--t-mb_lg-h, var(--t-mb_md-h, var(--t-mb_sm-h, var(--t-mb-h)))); }
+  ._mb\:f_s7uu5_98:focus { margin-bottom: var(--t-mb_lg-f, var(--t-mb_md-f, var(--t-mb_sm-f, var(--t-mb-f)))); }
+  ._mb\:a_s7uu5_99:active { margin-bottom: var(--t-mb_lg-a, var(--t-mb_md-a, var(--t-mb_sm-a, var(--t-mb-a)))); }
+  ._mb\:d_s7uu5_100:disabled { margin-bottom: var(--t-mb_lg-d, var(--t-mb_md-d, var(--t-mb_sm-d, var(--t-mb-d)))); }
 }
 
 @media (min-width: 1280px) {
-  ._mb_xl_17rt1_127 { margin-bottom: var(--t-mb_xl); }
-  ._mb_xl\:h_17rt1_128:hover { margin-bottom: var(--t-mb_xl-h); }
-  ._mb_xl\:f_17rt1_129:focus { margin-bottom: var(--t-mb_xl-f); }
-  ._mb_xl\:a_17rt1_130:active { margin-bottom: var(--t-mb_xl-a); }
-  ._mb_xl\:d_17rt1_131:disabled { margin-bottom: var(--t-mb_xl-d); }
+  ._mb_s7uu5_96 { margin-bottom: var(--t-mb_xl, var(--t-mb_lg, var(--t-mb_md, var(--t-mb_sm, var(--t-mb))))); }
+  ._mb\:h_s7uu5_97:hover { margin-bottom: var(--t-mb_xl-h, var(--t-mb_lg-h, var(--t-mb_md-h, var(--t-mb_sm-h, var(--t-mb-h))))); }
+  ._mb\:f_s7uu5_98:focus { margin-bottom: var(--t-mb_xl-f, var(--t-mb_lg-f, var(--t-mb_md-f, var(--t-mb_sm-f, var(--t-mb-f))))); }
+  ._mb\:a_s7uu5_99:active { margin-bottom: var(--t-mb_xl-a, var(--t-mb_lg-a, var(--t-mb_md-a, var(--t-mb_sm-a, var(--t-mb-a))))); }
+  ._mb\:d_s7uu5_100:disabled { margin-bottom: var(--t-mb_xl-d, var(--t-mb_lg-d, var(--t-mb_md-d, var(--t-mb_sm-d, var(--t-mb-d))))); }
 }
 
 @media (min-width: 1536px) {
-  ._mb_2xl_17rt1_135 { margin-bottom: var(--t-mb_2xl); }
-  ._mb_2xl\:h_17rt1_136:hover { margin-bottom: var(--t-mb_2xl-h); }
-  ._mb_2xl\:f_17rt1_137:focus { margin-bottom: var(--t-mb_2xl-f); }
-  ._mb_2xl\:a_17rt1_138:active { margin-bottom: var(--t-mb_2xl-a); }
-  ._mb_2xl\:d_17rt1_139:disabled { margin-bottom: var(--t-mb_2xl-d); }
+  ._mb_s7uu5_96 { margin-bottom: var(--t-mb_2xl, var(--t-mb_xl, var(--t-mb_lg, var(--t-mb_md, var(--t-mb_sm, var(--t-mb)))))); }
+  ._mb\:h_s7uu5_97:hover { margin-bottom: var(--t-mb_2xl-h, var(--t-mb_xl-h, var(--t-mb_lg-h, var(--t-mb_md-h, var(--t-mb_sm-h, var(--t-mb-h)))))); }
+  ._mb\:f_s7uu5_98:focus { margin-bottom: var(--t-mb_2xl-f, var(--t-mb_xl-f, var(--t-mb_lg-f, var(--t-mb_md-f, var(--t-mb_sm-f, var(--t-mb-f)))))); }
+  ._mb\:a_s7uu5_99:active { margin-bottom: var(--t-mb_2xl-a, var(--t-mb_xl-a, var(--t-mb_lg-a, var(--t-mb_md-a, var(--t-mb_sm-a, var(--t-mb-a)))))); }
+  ._mb\:d_s7uu5_100:disabled { margin-bottom: var(--t-mb_2xl-d, var(--t-mb_xl-d, var(--t-mb_lg-d, var(--t-mb_md-d, var(--t-mb_sm-d, var(--t-mb-d)))))); }
 }
 
 /* margin-left */
-._ml_17rt1_143 { margin-left: var(--t-ml); }
-._ml\:h_17rt1_144:hover { margin-left: var(--t-ml-h); }
-._ml\:f_17rt1_145:focus { margin-left: var(--t-ml-f); }
-._ml\:a_17rt1_146:active { margin-left: var(--t-ml-a); }
-._ml\:d_17rt1_147:disabled { margin-left: var(--t-ml-d); }
+._ml_s7uu5_143 { margin-left: var(--t-ml); }
+._ml\:h_s7uu5_144:hover { margin-left: var(--t-ml-h); }
+._ml\:f_s7uu5_145:focus { margin-left: var(--t-ml-f); }
+._ml\:a_s7uu5_146:active { margin-left: var(--t-ml-a); }
+._ml\:d_s7uu5_147:disabled { margin-left: var(--t-ml-d); }
 
 @media (min-width: 640px) {
-  ._ml_sm_17rt1_150 { margin-left: var(--t-ml_sm); }
-  ._ml_sm\:h_17rt1_151:hover { margin-left: var(--t-ml_sm-h); }
-  ._ml_sm\:f_17rt1_152:focus { margin-left: var(--t-ml_sm-f); }
-  ._ml_sm\:a_17rt1_153:active { margin-left: var(--t-ml_sm-a); }
-  ._ml_sm\:d_17rt1_154:disabled { margin-left: var(--t-ml_sm-d); }
+  ._ml_s7uu5_143 { margin-left: var(--t-ml_sm, var(--t-ml)); }
+  ._ml\:h_s7uu5_144:hover { margin-left: var(--t-ml_sm-h, var(--t-ml-h)); }
+  ._ml\:f_s7uu5_145:focus { margin-left: var(--t-ml_sm-f, var(--t-ml-f)); }
+  ._ml\:a_s7uu5_146:active { margin-left: var(--t-ml_sm-a, var(--t-ml-a)); }
+  ._ml\:d_s7uu5_147:disabled { margin-left: var(--t-ml_sm-d, var(--t-ml-d)); }
 }
 
 @media (min-width: 768px) {
-  ._ml_md_17rt1_158 { margin-left: var(--t-ml_md); }
-  ._ml_md\:h_17rt1_159:hover { margin-left: var(--t-ml_md-h); }
-  ._ml_md\:f_17rt1_160:focus { margin-left: var(--t-ml_md-f); }
-  ._ml_md\:a_17rt1_161:active { margin-left: var(--t-ml_md-a); }
-  ._ml_md\:d_17rt1_162:disabled { margin-left: var(--t-ml_md-d); }
+  ._ml_s7uu5_143 { margin-left: var(--t-ml_md, var(--t-ml_sm, var(--t-ml))); }
+  ._ml\:h_s7uu5_144:hover { margin-left: var(--t-ml_md-h, var(--t-ml_sm-h, var(--t-ml-h))); }
+  ._ml\:f_s7uu5_145:focus { margin-left: var(--t-ml_md-f, var(--t-ml_sm-f, var(--t-ml-f))); }
+  ._ml\:a_s7uu5_146:active { margin-left: var(--t-ml_md-a, var(--t-ml_sm-a, var(--t-ml-a))); }
+  ._ml\:d_s7uu5_147:disabled { margin-left: var(--t-ml_md-d, var(--t-ml_sm-d, var(--t-ml-d))); }
 }
 
 @media (min-width: 1024px) {
-  ._ml_lg_17rt1_166 { margin-left: var(--t-ml_lg); }
-  ._ml_lg\:h_17rt1_167:hover { margin-left: var(--t-ml_lg-h); }
-  ._ml_lg\:f_17rt1_168:focus { margin-left: var(--t-ml_lg-f); }
-  ._ml_lg\:a_17rt1_169:active { margin-left: var(--t-ml_lg-a); }
-  ._ml_lg\:d_17rt1_170:disabled { margin-left: var(--t-ml_lg-d); }
+  ._ml_s7uu5_143 { margin-left: var(--t-ml_lg, var(--t-ml_md, var(--t-ml_sm, var(--t-ml)))); }
+  ._ml\:h_s7uu5_144:hover { margin-left: var(--t-ml_lg-h, var(--t-ml_md-h, var(--t-ml_sm-h, var(--t-ml-h)))); }
+  ._ml\:f_s7uu5_145:focus { margin-left: var(--t-ml_lg-f, var(--t-ml_md-f, var(--t-ml_sm-f, var(--t-ml-f)))); }
+  ._ml\:a_s7uu5_146:active { margin-left: var(--t-ml_lg-a, var(--t-ml_md-a, var(--t-ml_sm-a, var(--t-ml-a)))); }
+  ._ml\:d_s7uu5_147:disabled { margin-left: var(--t-ml_lg-d, var(--t-ml_md-d, var(--t-ml_sm-d, var(--t-ml-d)))); }
 }
 
 @media (min-width: 1280px) {
-  ._ml_xl_17rt1_174 { margin-left: var(--t-ml_xl); }
-  ._ml_xl\:h_17rt1_175:hover { margin-left: var(--t-ml_xl-h); }
-  ._ml_xl\:f_17rt1_176:focus { margin-left: var(--t-ml_xl-f); }
-  ._ml_xl\:a_17rt1_177:active { margin-left: var(--t-ml_xl-a); }
-  ._ml_xl\:d_17rt1_178:disabled { margin-left: var(--t-ml_xl-d); }
+  ._ml_s7uu5_143 { margin-left: var(--t-ml_xl, var(--t-ml_lg, var(--t-ml_md, var(--t-ml_sm, var(--t-ml))))); }
+  ._ml\:h_s7uu5_144:hover { margin-left: var(--t-ml_xl-h, var(--t-ml_lg-h, var(--t-ml_md-h, var(--t-ml_sm-h, var(--t-ml-h))))); }
+  ._ml\:f_s7uu5_145:focus { margin-left: var(--t-ml_xl-f, var(--t-ml_lg-f, var(--t-ml_md-f, var(--t-ml_sm-f, var(--t-ml-f))))); }
+  ._ml\:a_s7uu5_146:active { margin-left: var(--t-ml_xl-a, var(--t-ml_lg-a, var(--t-ml_md-a, var(--t-ml_sm-a, var(--t-ml-a))))); }
+  ._ml\:d_s7uu5_147:disabled { margin-left: var(--t-ml_xl-d, var(--t-ml_lg-d, var(--t-ml_md-d, var(--t-ml_sm-d, var(--t-ml-d))))); }
 }
 
 @media (min-width: 1536px) {
-  ._ml_2xl_17rt1_182 { margin-left: var(--t-ml_2xl); }
-  ._ml_2xl\:h_17rt1_183:hover { margin-left: var(--t-ml_2xl-h); }
-  ._ml_2xl\:f_17rt1_184:focus { margin-left: var(--t-ml_2xl-f); }
-  ._ml_2xl\:a_17rt1_185:active { margin-left: var(--t-ml_2xl-a); }
-  ._ml_2xl\:d_17rt1_186:disabled { margin-left: var(--t-ml_2xl-d); }
+  ._ml_s7uu5_143 { margin-left: var(--t-ml_2xl, var(--t-ml_xl, var(--t-ml_lg, var(--t-ml_md, var(--t-ml_sm, var(--t-ml)))))); }
+  ._ml\:h_s7uu5_144:hover { margin-left: var(--t-ml_2xl-h, var(--t-ml_xl-h, var(--t-ml_lg-h, var(--t-ml_md-h, var(--t-ml_sm-h, var(--t-ml-h)))))); }
+  ._ml\:f_s7uu5_145:focus { margin-left: var(--t-ml_2xl-f, var(--t-ml_xl-f, var(--t-ml_lg-f, var(--t-ml_md-f, var(--t-ml_sm-f, var(--t-ml-f)))))); }
+  ._ml\:a_s7uu5_146:active { margin-left: var(--t-ml_2xl-a, var(--t-ml_xl-a, var(--t-ml_lg-a, var(--t-ml_md-a, var(--t-ml_sm-a, var(--t-ml-a)))))); }
+  ._ml\:d_s7uu5_147:disabled { margin-left: var(--t-ml_2xl-d, var(--t-ml_xl-d, var(--t-ml_lg-d, var(--t-ml_md-d, var(--t-ml_sm-d, var(--t-ml-d)))))); }
 }

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

@@ -1,174 +1,34 @@
-const mt = "_mt_17rt1_2";
-const mt_sm = "_mt_sm_17rt1_9";
-const mt_md = "_mt_md_17rt1_17";
-const mt_lg = "_mt_lg_17rt1_25";
-const mt_xl = "_mt_xl_17rt1_33";
-const mt_2xl = "_mt_2xl_17rt1_41";
-const mr = "_mr_17rt1_49";
-const mr_sm = "_mr_sm_17rt1_56";
-const mr_md = "_mr_md_17rt1_64";
-const mr_lg = "_mr_lg_17rt1_72";
-const mr_xl = "_mr_xl_17rt1_80";
-const mr_2xl = "_mr_2xl_17rt1_88";
-const mb = "_mb_17rt1_96";
-const mb_sm = "_mb_sm_17rt1_103";
-const mb_md = "_mb_md_17rt1_111";
-const mb_lg = "_mb_lg_17rt1_119";
-const mb_xl = "_mb_xl_17rt1_127";
-const mb_2xl = "_mb_2xl_17rt1_135";
-const ml = "_ml_17rt1_143";
-const ml_sm = "_ml_sm_17rt1_150";
-const ml_md = "_ml_md_17rt1_158";
-const ml_lg = "_ml_lg_17rt1_166";
-const ml_xl = "_ml_xl_17rt1_174";
-const ml_2xl = "_ml_2xl_17rt1_182";
+const mt = "_mt_s7uu5_2";
+const mr = "_mr_s7uu5_49";
+const mb = "_mb_s7uu5_96";
+const ml = "_ml_s7uu5_143";
 const styles = {
   mt,
-  "mt:h": "_mt:h_17rt1_3",
-  "mt:f": "_mt:f_17rt1_4",
-  "mt:a": "_mt:a_17rt1_5",
-  "mt:d": "_mt:d_17rt1_6",
-  mt_sm,
-  "mt_sm:h": "_mt_sm:h_17rt1_10",
-  "mt_sm:f": "_mt_sm:f_17rt1_11",
-  "mt_sm:a": "_mt_sm:a_17rt1_12",
-  "mt_sm:d": "_mt_sm:d_17rt1_13",
-  mt_md,
-  "mt_md:h": "_mt_md:h_17rt1_18",
-  "mt_md:f": "_mt_md:f_17rt1_19",
-  "mt_md:a": "_mt_md:a_17rt1_20",
-  "mt_md:d": "_mt_md:d_17rt1_21",
-  mt_lg,
-  "mt_lg:h": "_mt_lg:h_17rt1_26",
-  "mt_lg:f": "_mt_lg:f_17rt1_27",
-  "mt_lg:a": "_mt_lg:a_17rt1_28",
-  "mt_lg:d": "_mt_lg:d_17rt1_29",
-  mt_xl,
-  "mt_xl:h": "_mt_xl:h_17rt1_34",
-  "mt_xl:f": "_mt_xl:f_17rt1_35",
-  "mt_xl:a": "_mt_xl:a_17rt1_36",
-  "mt_xl:d": "_mt_xl:d_17rt1_37",
-  mt_2xl,
-  "mt_2xl:h": "_mt_2xl:h_17rt1_42",
-  "mt_2xl:f": "_mt_2xl:f_17rt1_43",
-  "mt_2xl:a": "_mt_2xl:a_17rt1_44",
-  "mt_2xl:d": "_mt_2xl:d_17rt1_45",
+  "mt:h": "_mt:h_s7uu5_3",
+  "mt:f": "_mt:f_s7uu5_4",
+  "mt:a": "_mt:a_s7uu5_5",
+  "mt:d": "_mt:d_s7uu5_6",
   mr,
-  "mr:h": "_mr:h_17rt1_50",
-  "mr:f": "_mr:f_17rt1_51",
-  "mr:a": "_mr:a_17rt1_52",
-  "mr:d": "_mr:d_17rt1_53",
-  mr_sm,
-  "mr_sm:h": "_mr_sm:h_17rt1_57",
-  "mr_sm:f": "_mr_sm:f_17rt1_58",
-  "mr_sm:a": "_mr_sm:a_17rt1_59",
-  "mr_sm:d": "_mr_sm:d_17rt1_60",
-  mr_md,
-  "mr_md:h": "_mr_md:h_17rt1_65",
-  "mr_md:f": "_mr_md:f_17rt1_66",
-  "mr_md:a": "_mr_md:a_17rt1_67",
-  "mr_md:d": "_mr_md:d_17rt1_68",
-  mr_lg,
-  "mr_lg:h": "_mr_lg:h_17rt1_73",
-  "mr_lg:f": "_mr_lg:f_17rt1_74",
-  "mr_lg:a": "_mr_lg:a_17rt1_75",
-  "mr_lg:d": "_mr_lg:d_17rt1_76",
-  mr_xl,
-  "mr_xl:h": "_mr_xl:h_17rt1_81",
-  "mr_xl:f": "_mr_xl:f_17rt1_82",
-  "mr_xl:a": "_mr_xl:a_17rt1_83",
-  "mr_xl:d": "_mr_xl:d_17rt1_84",
-  mr_2xl,
-  "mr_2xl:h": "_mr_2xl:h_17rt1_89",
-  "mr_2xl:f": "_mr_2xl:f_17rt1_90",
-  "mr_2xl:a": "_mr_2xl:a_17rt1_91",
-  "mr_2xl:d": "_mr_2xl:d_17rt1_92",
+  "mr:h": "_mr:h_s7uu5_50",
+  "mr:f": "_mr:f_s7uu5_51",
+  "mr:a": "_mr:a_s7uu5_52",
+  "mr:d": "_mr:d_s7uu5_53",
   mb,
-  "mb:h": "_mb:h_17rt1_97",
-  "mb:f": "_mb:f_17rt1_98",
-  "mb:a": "_mb:a_17rt1_99",
-  "mb:d": "_mb:d_17rt1_100",
-  mb_sm,
-  "mb_sm:h": "_mb_sm:h_17rt1_104",
-  "mb_sm:f": "_mb_sm:f_17rt1_105",
-  "mb_sm:a": "_mb_sm:a_17rt1_106",
-  "mb_sm:d": "_mb_sm:d_17rt1_107",
-  mb_md,
-  "mb_md:h": "_mb_md:h_17rt1_112",
-  "mb_md:f": "_mb_md:f_17rt1_113",
-  "mb_md:a": "_mb_md:a_17rt1_114",
-  "mb_md:d": "_mb_md:d_17rt1_115",
-  mb_lg,
-  "mb_lg:h": "_mb_lg:h_17rt1_120",
-  "mb_lg:f": "_mb_lg:f_17rt1_121",
-  "mb_lg:a": "_mb_lg:a_17rt1_122",
-  "mb_lg:d": "_mb_lg:d_17rt1_123",
-  mb_xl,
-  "mb_xl:h": "_mb_xl:h_17rt1_128",
-  "mb_xl:f": "_mb_xl:f_17rt1_129",
-  "mb_xl:a": "_mb_xl:a_17rt1_130",
-  "mb_xl:d": "_mb_xl:d_17rt1_131",
-  mb_2xl,
-  "mb_2xl:h": "_mb_2xl:h_17rt1_136",
-  "mb_2xl:f": "_mb_2xl:f_17rt1_137",
-  "mb_2xl:a": "_mb_2xl:a_17rt1_138",
-  "mb_2xl:d": "_mb_2xl:d_17rt1_139",
+  "mb:h": "_mb:h_s7uu5_97",
+  "mb:f": "_mb:f_s7uu5_98",
+  "mb:a": "_mb:a_s7uu5_99",
+  "mb:d": "_mb:d_s7uu5_100",
   ml,
-  "ml:h": "_ml:h_17rt1_144",
-  "ml:f": "_ml:f_17rt1_145",
-  "ml:a": "_ml:a_17rt1_146",
-  "ml:d": "_ml:d_17rt1_147",
-  ml_sm,
-  "ml_sm:h": "_ml_sm:h_17rt1_151",
-  "ml_sm:f": "_ml_sm:f_17rt1_152",
-  "ml_sm:a": "_ml_sm:a_17rt1_153",
-  "ml_sm:d": "_ml_sm:d_17rt1_154",
-  ml_md,
-  "ml_md:h": "_ml_md:h_17rt1_159",
-  "ml_md:f": "_ml_md:f_17rt1_160",
-  "ml_md:a": "_ml_md:a_17rt1_161",
-  "ml_md:d": "_ml_md:d_17rt1_162",
-  ml_lg,
-  "ml_lg:h": "_ml_lg:h_17rt1_167",
-  "ml_lg:f": "_ml_lg:f_17rt1_168",
-  "ml_lg:a": "_ml_lg:a_17rt1_169",
-  "ml_lg:d": "_ml_lg:d_17rt1_170",
-  ml_xl,
-  "ml_xl:h": "_ml_xl:h_17rt1_175",
-  "ml_xl:f": "_ml_xl:f_17rt1_176",
-  "ml_xl:a": "_ml_xl:a_17rt1_177",
-  "ml_xl:d": "_ml_xl:d_17rt1_178",
-  ml_2xl,
-  "ml_2xl:h": "_ml_2xl:h_17rt1_183",
-  "ml_2xl:f": "_ml_2xl:f_17rt1_184",
-  "ml_2xl:a": "_ml_2xl:a_17rt1_185",
-  "ml_2xl:d": "_ml_2xl:d_17rt1_186"
+  "ml:h": "_ml:h_s7uu5_144",
+  "ml:f": "_ml:f_s7uu5_145",
+  "ml:a": "_ml:a_s7uu5_146",
+  "ml:d": "_ml:d_s7uu5_147"
 };
 export {
   styles as default,
   mb,
-  mb_2xl,
-  mb_lg,
-  mb_md,
-  mb_sm,
-  mb_xl,
   ml,
-  ml_2xl,
-  ml_lg,
-  ml_md,
-  ml_sm,
-  ml_xl,
   mr,
-  mr_2xl,
-  mr_lg,
-  mr_md,
-  mr_sm,
-  mr_xl,
-  mt,
-  mt_2xl,
-  mt_lg,
-  mt_md,
-  mt_sm,
-  mt_xl
+  mt
 };
 //# sourceMappingURL=margin.module.css.js.map

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

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