@servicetitan/anvil2 2.9.0 → 3.0.0

package/dist/{Layout-CISAxILX.js.map → Layout-C2Q2hyLG.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Layout-CISAxILX.js","sources":["../src/components/Layout/Layout.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Layout.module.scss\";\n\n/**\n * Props for the Layout component.\n */\nexport type LayoutProps = ComponentPropsWithoutRef<\"div\"> & {\n  /** Whether the layout should be fluid (full width) instead of constrained */\n  fluid?: boolean;\n  /** The spacing variant for the layout grid */\n  variant?: \"default\" | \"wide\" | \"narrow\";\n};\n\n/**\n * Props for the Layout.Item component.\n */\nexport type LayoutItemProps = ComponentPropsWithoutRef<\"div\"> & {\n  /** Default span across all breakpoints (1-12) */\n  span?: number;\n  /** Extra small breakpoint span (1-12) */\n  xs?: number;\n  /** Small breakpoint span (1-12) */\n  sm?: number;\n  /** Medium breakpoint span (1-12) */\n  md?: number;\n  /** Large breakpoint span (1-12) */\n  lg?: number;\n  /** Extra large breakpoint span (1-12) */\n  xl?: number;\n  /** Extra extra large breakpoint span (1-12) */\n  xxl?: number;\n};\n\n// TODO: clamp span numbers higher than 12\n\n/**\n * Layout item component that defines grid columns within a Layout container.\n *\n * Features:\n * - Responsive grid columns with breakpoint-specific spans\n * - 12-column grid system for flexible layouts\n * - Breakpoint-specific span controls (xs, sm, md, lg, xl, xxl)\n * - Default span fallback for all breakpoints\n * - Automatic responsive behavior using container queries\n * - Semantic HTML structure with proper accessibility\n * - Flexible content area for any child components\n * - Consistent spacing and alignment with parent Layout\n * - Automatic tracking ID generation for analytics\n *\n * Breakpoints:\n * - xs: Extra small (mobile)\n * - sm: Small (tablet portrait)\n * - md: Medium (tablet landscape)\n * - lg: Large (desktop)\n * - xl: Extra large (large desktop)\n * - xxl: Extra extra large (ultra-wide)\n *\n * @example\n * <Layout>\n *   <Layout.Item span={6} md={4} lg={3}>\n *     <Card>Responsive Card</Card>\n *   </Layout.Item>\n *   <Layout.Item span={6} md={8} lg={9}>\n *     <Card>Main Content</Card>\n *   </Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout>\n *   <Layout.Item span={12} md={6}>\n *     <h2>Left Column</h2>\n *     <p>This takes full width on mobile, half width on medium+ screens.</p>\n *   </Layout.Item>\n *   <Layout.Item span={12} md={6}>\n *     <h2>Right Column</h2>\n *     <p>This also takes full width on mobile, half width on medium+ screens.</p>\n *   </Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout variant=\"wide\">\n *   <Layout.Item span={1} sm={2} md={3} lg={4}>\n *     <Button>Small Button</Button>\n *   </Layout.Item>\n *   <Layout.Item span={11} sm={10} md={9} lg={8}>\n *     <TextField placeholder=\"Search...\" />\n *   </Layout.Item>\n * </Layout>\n */\nexport const LayoutItem = forwardRef<HTMLDivElement, LayoutItemProps>(\n  (\n    { children, className, span = 12, xs, sm, md, lg, xl, xxl, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        {...props}\n        className={cx(\n          styles.cell,\n          styles[`xs${xs || span}`],\n          {\n            [styles[`sm${sm}`]]: sm,\n            [styles[`md${md}`]]: md,\n            [styles[`lg${lg}`]]: lg,\n            [styles[`xl${xl}`]]: xl,\n            [styles[`xxl${xxl}`]]: xxl,\n          },\n          className,\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nLayoutItem.displayName = \"LayoutItem\";\n\n/**\n * Layout container component that provides a responsive grid system.\n *\n * Features:\n * - CSS Grid-based responsive layout system\n * - Container with max-width constraint (1280px) by default\n * - Fluid option for full-width layouts\n * - Three spacing variants: default, wide, and narrow\n * - Container queries for responsive behavior\n * - Automatic tracking ID generation for analytics\n * - Semantic HTML structure with proper accessibility\n * - Flexible content area for child Layout.Item components\n * - Consistent spacing and alignment across breakpoints\n *\n * @example\n * <Layout>\n *   <Layout.Item span={6}>Left Column</Layout.Item>\n *   <Layout.Item span={6}>Right Column</Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout fluid variant=\"wide\">\n *   <Layout.Item span={4}>Column 1</Layout.Item>\n *   <Layout.Item span={4}>Column 2</Layout.Item>\n *   <Layout.Item span={4}>Column 3</Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout variant=\"narrow\">\n *   <Layout.Item span={12}>\n *     <h1>Full Width Content</h1>\n *     <p>This content spans the full width of the layout.</p>\n *   </Layout.Item>\n * </Layout>\n */\nexport const Layout = Object.assign(\n  forwardRef<HTMLDivElement, LayoutProps>(function LayoutInner(props, ref) {\n    const {\n      children,\n      className,\n      fluid = false,\n      variant = \"default\",\n      ...rest\n    } = props;\n\n    return (\n      <div className={cx(styles.container, { [styles.fluid]: fluid })}>\n        <div\n          className={cx(\n            styles.grid,\n            {\n              [styles.wide]: variant === \"wide\",\n              [styles.narrow]: variant === \"narrow\",\n            },\n            className,\n          )}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }),\n  {\n    Item: LayoutItem,\n  },\n);\nLayout.displayName = \"Layout\";\nexport const LayoutElement = Layout;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CACE,EAAE,QAAA,EAAU,SAAA,EAAW,OAAO,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,IAAI,EAAA,EAAI,GAAA,EAAK,GAAG,KAAA,IAC9D,GAAA,KACG;AACH,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,SAAA,EAAW,EAAA;AAAA,UACT,MAAA,CAAO,IAAA;AAAA,UACP,MAAA,CAAO,CAAA,EAAA,EAAK,EAAA,IAAM,IAAI,CAAA,CAAE,CAAA;AAAA,UACxB;AAAA,YACE,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,GAAA,EAAM,GAAG,CAAA,CAAE,CAAC,GAAG;AAAA,WACzB;AAAA,UACA;AAAA,SACF;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAqClB,MAAM,SAAS,MAAA,CAAO,MAAA;AAAA,EAC3B,UAAA,CAAwC,SAAS,WAAA,CAAY,KAAA,EAAO,GAAA,EAAK;AACvE,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA,GAAQ,KAAA;AAAA,MACR,OAAA,GAAU,SAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,SAAA,EAAW,EAAE,CAAC,MAAA,CAAO,KAAK,GAAG,KAAA,EAAO,CAAA,EAC5D,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,MAAA,CAAO,IAAA;AAAA,UACP;AAAA,YACE,CAAC,MAAA,CAAO,IAAI,GAAG,OAAA,KAAY,MAAA;AAAA,YAC3B,CAAC,MAAA,CAAO,MAAM,GAAG,OAAA,KAAY;AAAA,WAC/B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ,CAAC,CAAA;AAAA,EACD;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;AACd,MAAM,aAAA,GAAgB;;;;"}
+{"version":3,"file":"Layout-C2Q2hyLG.js","sources":["../src/components/Layout/Layout.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport cx from \"classnames\";\nimport styles from \"./Layout.module.scss\";\n\n/**\n * Props for the Layout component.\n */\nexport type LayoutProps = ComponentPropsWithoutRef<\"div\"> & {\n  /** Whether the layout should be fluid (full width) instead of constrained */\n  fluid?: boolean;\n  /** The spacing variant for the layout grid */\n  variant?: \"default\" | \"wide\" | \"narrow\";\n};\n\n/**\n * Props for the Layout.Item component.\n */\nexport type LayoutItemProps = ComponentPropsWithoutRef<\"div\"> & {\n  /** Default span across all breakpoints (1-12) */\n  span?: number;\n  /** Extra small breakpoint span (1-12) */\n  xs?: number;\n  /** Small breakpoint span (1-12) */\n  sm?: number;\n  /** Medium breakpoint span (1-12) */\n  md?: number;\n  /** Large breakpoint span (1-12) */\n  lg?: number;\n  /** Extra large breakpoint span (1-12) */\n  xl?: number;\n  /** Extra extra large breakpoint span (1-12) */\n  xxl?: number;\n};\n\n// TODO: clamp span numbers higher than 12\n\n/**\n * Layout item component that defines grid columns within a Layout container.\n *\n * Features:\n * - Responsive grid columns with breakpoint-specific spans\n * - 12-column grid system for flexible layouts\n * - Breakpoint-specific span controls (xs, sm, md, lg, xl, xxl)\n * - Default span fallback for all breakpoints\n * - Automatic responsive behavior using container queries\n * - Semantic HTML structure with proper accessibility\n * - Flexible content area for any child components\n * - Consistent spacing and alignment with parent Layout\n * - Automatic tracking ID generation for analytics\n *\n * Breakpoints:\n * - xs: Extra small (mobile)\n * - sm: Small (tablet portrait)\n * - md: Medium (tablet landscape)\n * - lg: Large (desktop)\n * - xl: Extra large (large desktop)\n * - xxl: Extra extra large (ultra-wide)\n *\n * @example\n * <Layout>\n *   <Layout.Item span={6} md={4} lg={3}>\n *     <Card>Responsive Card</Card>\n *   </Layout.Item>\n *   <Layout.Item span={6} md={8} lg={9}>\n *     <Card>Main Content</Card>\n *   </Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout>\n *   <Layout.Item span={12} md={6}>\n *     <h2>Left Column</h2>\n *     <p>This takes full width on mobile, half width on medium+ screens.</p>\n *   </Layout.Item>\n *   <Layout.Item span={12} md={6}>\n *     <h2>Right Column</h2>\n *     <p>This also takes full width on mobile, half width on medium+ screens.</p>\n *   </Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout variant=\"wide\">\n *   <Layout.Item span={1} sm={2} md={3} lg={4}>\n *     <Button>Small Button</Button>\n *   </Layout.Item>\n *   <Layout.Item span={11} sm={10} md={9} lg={8}>\n *     <TextField placeholder=\"Search...\" />\n *   </Layout.Item>\n * </Layout>\n */\nexport const LayoutItem = forwardRef<HTMLDivElement, LayoutItemProps>(\n  (\n    { children, className, span = 12, xs, sm, md, lg, xl, xxl, ...props },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        {...props}\n        className={cx(\n          styles.cell,\n          styles[`xs${xs || span}`],\n          {\n            [styles[`sm${sm}`]]: sm,\n            [styles[`md${md}`]]: md,\n            [styles[`lg${lg}`]]: lg,\n            [styles[`xl${xl}`]]: xl,\n            [styles[`xxl${xxl}`]]: xxl,\n          },\n          className,\n        )}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nLayoutItem.displayName = \"LayoutItem\";\n\n/**\n * Layout container component that provides a responsive grid system.\n *\n * Features:\n * - CSS Grid-based responsive layout system\n * - Container with max-width constraint (1280px) by default\n * - Fluid option for full-width layouts\n * - Three spacing variants: default, wide, and narrow\n * - Container queries for responsive behavior\n * - Automatic tracking ID generation for analytics\n * - Semantic HTML structure with proper accessibility\n * - Flexible content area for child Layout.Item components\n * - Consistent spacing and alignment across breakpoints\n *\n * @example\n * <Layout>\n *   <Layout.Item span={6}>Left Column</Layout.Item>\n *   <Layout.Item span={6}>Right Column</Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout fluid variant=\"wide\">\n *   <Layout.Item span={4}>Column 1</Layout.Item>\n *   <Layout.Item span={4}>Column 2</Layout.Item>\n *   <Layout.Item span={4}>Column 3</Layout.Item>\n * </Layout>\n *\n * @example\n * <Layout variant=\"narrow\">\n *   <Layout.Item span={12}>\n *     <h1>Full Width Content</h1>\n *     <p>This content spans the full width of the layout.</p>\n *   </Layout.Item>\n * </Layout>\n */\nexport const Layout = Object.assign(\n  forwardRef<HTMLDivElement, LayoutProps>(function LayoutInner(props, ref) {\n    const {\n      children,\n      className,\n      fluid = false,\n      variant = \"default\",\n      ...rest\n    } = props;\n\n    return (\n      <div className={cx(styles.container, { [styles.fluid]: fluid })}>\n        <div\n          className={cx(\n            styles.grid,\n            {\n              [styles.wide]: variant === \"wide\",\n              [styles.narrow]: variant === \"narrow\",\n            },\n            className,\n          )}\n          ref={ref}\n          {...rest}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }),\n  {\n    Item: LayoutItem,\n  },\n);\nLayout.displayName = \"Layout\";\nexport const LayoutElement = Layout;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CACE,EAAE,QAAA,EAAU,SAAA,EAAW,OAAO,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,IAAI,EAAA,EAAI,GAAA,EAAK,GAAG,KAAA,IAC9D,GAAA,KACG;AACH,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,SAAA,EAAW,EAAA;AAAA,UACT,MAAA,CAAO,IAAA;AAAA,UACP,MAAA,CAAO,CAAA,EAAA,EAAK,EAAA,IAAM,IAAI,CAAA,CAAE,CAAA;AAAA,UACxB;AAAA,YACE,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,EAAA,EAAK,EAAE,CAAA,CAAE,CAAC,GAAG,EAAA;AAAA,YACrB,CAAC,MAAA,CAAO,CAAA,GAAA,EAAM,GAAG,CAAA,CAAE,CAAC,GAAG;AAAA,WACzB;AAAA,UACA;AAAA,SACF;AAAA,QAEC;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;AAqClB,MAAM,SAAS,MAAA,CAAO,MAAA;AAAA,EAC3B,UAAA,CAAwC,SAAS,WAAA,CAAY,KAAA,EAAO,GAAA,EAAK;AACvE,IAAA,MAAM;AAAA,MACJ,QAAA;AAAA,MACA,SAAA;AAAA,MACA,KAAA,GAAQ,KAAA;AAAA,MACR,OAAA,GAAU,SAAA;AAAA,MACV,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,SAAA,EAAW,EAAE,CAAC,MAAA,CAAO,KAAK,GAAG,KAAA,EAAO,CAAA,EAC5D,QAAA,kBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,MAAA,CAAO,IAAA;AAAA,UACP;AAAA,YACE,CAAC,MAAA,CAAO,IAAI,GAAG,OAAA,KAAY,MAAA;AAAA,YAC3B,CAAC,MAAA,CAAO,MAAM,GAAG,OAAA,KAAY;AAAA,WAC/B;AAAA,UACA;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ,CAAC,CAAA;AAAA,EACD;AAAA,IACE,IAAA,EAAM;AAAA;AAEV;AACA,MAAA,CAAO,WAAA,GAAc,QAAA;AACd,MAAM,aAAA,GAAgB;;;;"}

package/dist/Layout.css

@@ -1,327 +1,263 @@
-@layer starter, reset, base, state, application;
-@layer base {
-  ._container_1suid_2 {
-    display: block;
-    container-type: inline-size;
-    max-width: 1280px;
-    margin-left: auto;
-    margin-right: auto;
-    width: -webkit-fill-available;
-    width: -moz-available;
-    width: stretch;
-  }
-  ._container_1suid_2 ._container_1suid_2 {
-    container-type: normal;
-  }
-  ._container_1suid_2._fluid_1suid_13 {
-    max-width: none;
-  }
-  ._container_1suid_2 ._grid_1suid_16 {
-    display: grid;
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-    gap: 1rem;
-  }
-  ._container_1suid_2 ._grid_1suid_16._wide_1suid_21 {
-    gap: 1.5rem;
-  }
-  ._container_1suid_2 ._grid_1suid_16._narrow_1suid_24 {
-    gap: 0.5rem;
-  }
-  ._container_1suid_2 ._grid_1suid_16 ._xs1_1suid_27 {
-    grid-column: span 1;
-  }
-  ._container_1suid_2 ._grid_1suid_16 ._xs2_1suid_30 {
-    grid-column: span 2;
-  }
-  ._container_1suid_2 ._grid_1suid_16 ._xs3_1suid_33 {
-    grid-column: span 3;
-  }
-  ._container_1suid_2 ._grid_1suid_16 ._xs4_1suid_36,
-  ._container_1suid_2 ._grid_1suid_16 ._xs5_1suid_37,
-  ._container_1suid_2 ._grid_1suid_16 ._xs6_1suid_38,
-  ._container_1suid_2 ._grid_1suid_16 ._xs7_1suid_39,
-  ._container_1suid_2 ._grid_1suid_16 ._xs8_1suid_40,
-  ._container_1suid_2 ._grid_1suid_16 ._xs9_1suid_41,
-  ._container_1suid_2 ._grid_1suid_16 ._xs10_1suid_42,
-  ._container_1suid_2 ._grid_1suid_16 ._xs11_1suid_43,
-  ._container_1suid_2 ._grid_1suid_16 ._xs12_1suid_44 {
-    grid-column: span 4;
-  }
-  ._cell_1suid_47 {
-    display: block;
+.anvil2{@layer starter, reset, base, state, application;._container_1iehx_1 {
+  container-type: inline-size;
+  display: block;
+  margin-inline: auto;
+  max-width: var(--a2-mod-layout-max-width, 1280px);
+  width: -webkit-fill-available;
+  width: -moz-available;
+  width: stretch;
+}._container_1iehx_1 ._container_1iehx_1 {
+  container-type: normal;
+}._fluid_1iehx_12 {
+  --a2-mod-layout-max-width: none;
+}._grid_1iehx_16 {
+  display: grid;
+  gap: var(--a2-mod-layout-grid-gap, var(--a2-size-4, 1rem));
+  grid-template-columns: var(--a2-mod-layout-grid-template-columns, repeat(4, minmax(0, 1fr)));
+}@container (min-width: 768px) {
+  ._grid_1iehx_16 {
+    --a2-mod-layout-grid-template-columns: repeat(12, minmax(0, 1fr));
+    --a2-mod-layout-grid-gap: var(--a2-size-6, 1.5rem);
   }
-}
-@layer state {
-  @container (min-width: 640px) {
-    ._grid_1suid_16 {
-      grid-template-columns: repeat(4, minmax(0, 1fr));
-      gap: 1rem;
-    }
-    ._grid_1suid_16 ._sm1_1suid_57 {
-      grid-column: span 1;
-    }
-    ._grid_1suid_16 ._sm2_1suid_60 {
-      grid-column: span 2;
-    }
-    ._grid_1suid_16 ._sm3_1suid_63 {
-      grid-column: span 3;
-    }
-    ._grid_1suid_16 ._sm4_1suid_66,
-    ._grid_1suid_16 ._sm5_1suid_67,
-    ._grid_1suid_16 ._sm6_1suid_68,
-    ._grid_1suid_16 ._sm7_1suid_69,
-    ._grid_1suid_16 ._sm8_1suid_70,
-    ._grid_1suid_16 ._sm9_1suid_71,
-    ._grid_1suid_16 ._sm10_1suid_72,
-    ._grid_1suid_16 ._sm11_1suid_73,
-    ._grid_1suid_16 ._sm12_1suid_74 {
-      grid-column: span 4;
-    }
-  }
-  @container (min-width: 768px) {
-    ._grid_1suid_16 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-      gap: 1.5rem;
-    }
-    ._grid_1suid_16._wide_1suid_21 {
-      gap: 2rem;
-    }
-    ._grid_1suid_16._narrow_1suid_24 {
-      gap: 1rem;
-    }
-    ._grid_1suid_16 ._xs5_1suid_37 {
-      grid-column: span 5;
-    }
-    ._grid_1suid_16 ._xs6_1suid_38 {
-      grid-column: span 6;
-    }
-    ._grid_1suid_16 ._xs7_1suid_39 {
-      grid-column: span 7;
-    }
-    ._grid_1suid_16 ._xs8_1suid_40 {
-      grid-column: span 8;
-    }
-    ._grid_1suid_16 ._xs9_1suid_41 {
-      grid-column: span 9;
-    }
-    ._grid_1suid_16 ._xs10_1suid_42 {
-      grid-column: span 10;
-    }
-    ._grid_1suid_16 ._xs11_1suid_43 {
-      grid-column: span 11;
-    }
-    ._grid_1suid_16 ._xs12_1suid_44 {
-      grid-column: span 12;
-    }
-    ._grid_1suid_16 ._sm1_1suid_57 {
-      grid-column: span 1;
-    }
-    ._grid_1suid_16 ._sm2_1suid_60 {
-      grid-column: span 2;
-    }
-    ._grid_1suid_16 ._sm3_1suid_63 {
-      grid-column: span 3;
-    }
-    ._grid_1suid_16 ._sm4_1suid_66 {
-      grid-column: span 4;
-    }
-    ._grid_1suid_16 ._sm5_1suid_67 {
-      grid-column: span 5;
-    }
-    ._grid_1suid_16 ._sm6_1suid_68 {
-      grid-column: span 6;
-    }
-    ._grid_1suid_16 ._sm7_1suid_69 {
-      grid-column: span 7;
-    }
-    ._grid_1suid_16 ._sm8_1suid_70 {
-      grid-column: span 8;
-    }
-    ._grid_1suid_16 ._sm9_1suid_71 {
-      grid-column: span 9;
-    }
-    ._grid_1suid_16 ._sm10_1suid_72 {
-      grid-column: span 10;
-    }
-    ._grid_1suid_16 ._sm11_1suid_73 {
-      grid-column: span 11;
-    }
-    ._grid_1suid_16 ._sm12_1suid_74 {
-      grid-column: span 12;
-    }
-    ._grid_1suid_16 ._md1_1suid_149 {
-      grid-column: span 1;
-    }
-    ._grid_1suid_16 ._md2_1suid_152 {
-      grid-column: span 2;
-    }
-    ._grid_1suid_16 ._md3_1suid_155 {
-      grid-column: span 3;
-    }
-    ._grid_1suid_16 ._md4_1suid_158 {
-      grid-column: span 4;
-    }
-    ._grid_1suid_16 ._md5_1suid_161 {
-      grid-column: span 5;
-    }
-    ._grid_1suid_16 ._md6_1suid_164 {
-      grid-column: span 6;
-    }
-    ._grid_1suid_16 ._md7_1suid_167 {
-      grid-column: span 7;
-    }
-    ._grid_1suid_16 ._md8_1suid_170 {
-      grid-column: span 8;
-    }
-    ._grid_1suid_16 ._md9_1suid_173 {
-      grid-column: span 9;
-    }
-    ._grid_1suid_16 ._md10_1suid_176 {
-      grid-column: span 10;
-    }
-    ._grid_1suid_16 ._md11_1suid_179 {
-      grid-column: span 11;
-    }
-    ._grid_1suid_16 ._md12_1suid_182 {
-      grid-column: span 12;
-    }
-  }
-  @container (min-width: 1024px) {
-    ._grid_1suid_16 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-      gap: 1.5rem;
-    }
-    ._grid_1suid_16._wide_1suid_21 {
-      gap: 2.5rem;
-    }
-    ._grid_1suid_16._narrow_1suid_24 {
-      gap: 1rem;
-    }
-    ._grid_1suid_16 ._lg1_1suid_197 {
-      grid-column: span 1;
-    }
-    ._grid_1suid_16 ._lg2_1suid_200 {
-      grid-column: span 2;
-    }
-    ._grid_1suid_16 ._lg3_1suid_203 {
-      grid-column: span 3;
-    }
-    ._grid_1suid_16 ._lg4_1suid_206 {
-      grid-column: span 4;
-    }
-    ._grid_1suid_16 ._lg5_1suid_209 {
-      grid-column: span 5;
-    }
-    ._grid_1suid_16 ._lg6_1suid_212 {
-      grid-column: span 6;
-    }
-    ._grid_1suid_16 ._lg7_1suid_215 {
-      grid-column: span 7;
-    }
-    ._grid_1suid_16 ._lg8_1suid_218 {
-      grid-column: span 8;
-    }
-    ._grid_1suid_16 ._lg9_1suid_221 {
-      grid-column: span 9;
-    }
-    ._grid_1suid_16 ._lg10_1suid_224 {
-      grid-column: span 10;
-    }
-    ._grid_1suid_16 ._lg11_1suid_227 {
-      grid-column: span 11;
-    }
-    ._grid_1suid_16 ._lg12_1suid_230 {
-      grid-column: span 12;
-    }
-  }
-  @container (min-width: 1280px) {
-    ._grid_1suid_16 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-      gap: 1.5rem;
-    }
-    ._grid_1suid_16._wide_1suid_21 {
-      gap: 2.5rem;
-    }
-    ._grid_1suid_16._narrow_1suid_24 {
-      gap: 1rem;
-    }
-    ._grid_1suid_16 ._xl1_1suid_245 {
-      grid-column: span 1;
-    }
-    ._grid_1suid_16 ._xl2_1suid_248 {
-      grid-column: span 2;
-    }
-    ._grid_1suid_16 ._xl3_1suid_251 {
-      grid-column: span 3;
-    }
-    ._grid_1suid_16 ._xl4_1suid_254 {
-      grid-column: span 4;
-    }
-    ._grid_1suid_16 ._xl5_1suid_257 {
-      grid-column: span 5;
-    }
-    ._grid_1suid_16 ._xl6_1suid_260 {
-      grid-column: span 6;
-    }
-    ._grid_1suid_16 ._xl7_1suid_263 {
-      grid-column: span 7;
-    }
-    ._grid_1suid_16 ._xl8_1suid_266 {
-      grid-column: span 8;
-    }
-    ._grid_1suid_16 ._xl9_1suid_269 {
-      grid-column: span 9;
-    }
-    ._grid_1suid_16 ._xl10_1suid_272 {
-      grid-column: span 10;
-    }
-    ._grid_1suid_16 ._xl11_1suid_275 {
-      grid-column: span 11;
-    }
-    ._grid_1suid_16 ._xl12_1suid_278 {
-      grid-column: span 12;
-    }
-  }
-  @container (min-width: 1536px) {
-    ._grid_1suid_16 {
-      grid-template-columns: repeat(12, minmax(0, 1fr));
-      gap: 1.5rem;
-    }
-    ._grid_1suid_16 ._xxl1_1suid_287 {
-      grid-column: span 1;
-    }
-    ._grid_1suid_16 ._xxl2_1suid_290 {
-      grid-column: span 2;
-    }
-    ._grid_1suid_16 ._xxl3_1suid_293 {
-      grid-column: span 3;
-    }
-    ._grid_1suid_16 ._xxl4_1suid_296 {
-      grid-column: span 4;
-    }
-    ._grid_1suid_16 ._xxl5_1suid_299 {
-      grid-column: span 5;
-    }
-    ._grid_1suid_16 ._xxl6_1suid_302 {
-      grid-column: span 6;
-    }
-    ._grid_1suid_16 ._xxl7_1suid_305 {
-      grid-column: span 7;
-    }
-    ._grid_1suid_16 ._xxl8_1suid_308 {
-      grid-column: span 8;
-    }
-    ._grid_1suid_16 ._xxl9_1suid_311 {
-      grid-column: span 9;
-    }
-    ._grid_1suid_16 ._xxl10_1suid_314 {
-      grid-column: span 10;
-    }
-    ._grid_1suid_16 ._xxl11_1suid_317 {
-      grid-column: span 11;
-    }
-    ._grid_1suid_16 ._xxl12_1suid_320 {
-      grid-column: span 12;
-    }
+}._cell_1iehx_28 {
+  display: block;
+  grid-column: var(--a2-mod-layout-grid-column);
+}._wide_1iehx_33 {
+  --a2-mod-layout-grid-gap: var(--a2-size-6, 1.5rem);
+}@container (min-width: 768px) {
+  ._wide_1iehx_33 {
+    --a2-mod-layout-grid-gap: var(--a2-size-8, 2rem);
+  }
+}@container (min-width: 1024px) {
+  ._wide_1iehx_33 {
+    --a2-mod-layout-grid-gap: var(--a2-size-10, 2.5rem);
+  }
+}._narrow_1iehx_47 {
+  --a2-mod-layout-grid-gap: var(--a2-size-2, 0.5rem);
+}@container (min-width: 768px) {
+  ._narrow_1iehx_47 {
+    --a2-mod-layout-grid-gap: var(--a2-size-4, 1rem);
+  }
+}._xs1_1iehx_56 {
+  --a2-mod-layout-grid-column: span 1;
+}._xs2_1iehx_60 {
+  --a2-mod-layout-grid-column: span 2;
+}._xs3_1iehx_64 {
+  --a2-mod-layout-grid-column: span 3;
+}._xs4_1iehx_68,
+._xs5_1iehx_69,
+._xs6_1iehx_70,
+._xs7_1iehx_71,
+._xs8_1iehx_72,
+._xs9_1iehx_73,
+._xs10_1iehx_74,
+._xs11_1iehx_75,
+._xs12_1iehx_76 {
+  --a2-mod-layout-grid-column: span 4;
+}@container (min-width: 640px) {
+  ._sm1_1iehx_81 {
+    --a2-mod-layout-grid-column: span 1;
+  }
+  ._sm2_1iehx_84 {
+    --a2-mod-layout-grid-column: span 2;
+  }
+  ._sm3_1iehx_87 {
+    --a2-mod-layout-grid-column: span 3;
+  }
+  ._sm4_1iehx_90,
+  ._sm5_1iehx_91,
+  ._sm6_1iehx_92,
+  ._sm7_1iehx_93,
+  ._sm8_1iehx_94,
+  ._sm9_1iehx_95,
+  ._sm10_1iehx_96,
+  ._sm11_1iehx_97,
+  ._sm12_1iehx_98 {
+    --a2-mod-layout-grid-column: span 4;
+  }
+}@container (min-width: 768px) {
+  ._xs4_1iehx_68,
+  ._sm4_1iehx_90 {
+    --a2-mod-layout-grid-column: span 4;
+  }
+  ._xs5_1iehx_69,
+  ._sm5_1iehx_91 {
+    --a2-mod-layout-grid-column: span 5;
+  }
+  ._xs6_1iehx_70,
+  ._sm6_1iehx_92 {
+    --a2-mod-layout-grid-column: span 6;
+  }
+  ._xs7_1iehx_71,
+  ._sm7_1iehx_93 {
+    --a2-mod-layout-grid-column: span 7;
+  }
+  ._xs8_1iehx_72,
+  ._sm8_1iehx_94 {
+    --a2-mod-layout-grid-column: span 8;
+  }
+  ._xs9_1iehx_73,
+  ._sm9_1iehx_95 {
+    --a2-mod-layout-grid-column: span 9;
+  }
+  ._xs10_1iehx_74,
+  ._sm10_1iehx_96 {
+    --a2-mod-layout-grid-column: span 10;
+  }
+  ._xs11_1iehx_75,
+  ._sm11_1iehx_97 {
+    --a2-mod-layout-grid-column: span 11;
+  }
+  ._xs12_1iehx_76,
+  ._sm12_1iehx_98 {
+    --a2-mod-layout-grid-column: span 12;
+  }
+  ._md1_1iehx_139 {
+    --a2-mod-layout-grid-column: span 1;
+  }
+  ._md2_1iehx_142 {
+    --a2-mod-layout-grid-column: span 2;
+  }
+  ._md3_1iehx_145 {
+    --a2-mod-layout-grid-column: span 3;
+  }
+  ._md4_1iehx_148 {
+    --a2-mod-layout-grid-column: span 4;
+  }
+  ._md5_1iehx_151 {
+    --a2-mod-layout-grid-column: span 5;
+  }
+  ._md6_1iehx_154 {
+    --a2-mod-layout-grid-column: span 6;
+  }
+  ._md7_1iehx_157 {
+    --a2-mod-layout-grid-column: span 7;
+  }
+  ._md8_1iehx_160 {
+    --a2-mod-layout-grid-column: span 8;
+  }
+  ._md9_1iehx_163 {
+    --a2-mod-layout-grid-column: span 9;
+  }
+  ._md10_1iehx_166 {
+    --a2-mod-layout-grid-column: span 10;
+  }
+  ._md11_1iehx_169 {
+    --a2-mod-layout-grid-column: span 11;
+  }
+  ._md12_1iehx_172 {
+    --a2-mod-layout-grid-column: span 12;
+  }
+}@container (min-width: 1024px) {
+  ._lg1_1iehx_177 {
+    --a2-mod-layout-grid-column: span 1;
+  }
+  ._lg2_1iehx_180 {
+    --a2-mod-layout-grid-column: span 2;
+  }
+  ._lg3_1iehx_183 {
+    --a2-mod-layout-grid-column: span 3;
+  }
+  ._lg4_1iehx_186 {
+    --a2-mod-layout-grid-column: span 4;
+  }
+  ._lg5_1iehx_189 {
+    --a2-mod-layout-grid-column: span 5;
   }
+  ._lg6_1iehx_192 {
+    --a2-mod-layout-grid-column: span 6;
+  }
+  ._lg7_1iehx_195 {
+    --a2-mod-layout-grid-column: span 7;
+  }
+  ._lg8_1iehx_198 {
+    --a2-mod-layout-grid-column: span 8;
+  }
+  ._lg9_1iehx_201 {
+    --a2-mod-layout-grid-column: span 9;
+  }
+  ._lg10_1iehx_204 {
+    --a2-mod-layout-grid-column: span 10;
+  }
+  ._lg11_1iehx_207 {
+    --a2-mod-layout-grid-column: span 11;
+  }
+  ._lg12_1iehx_210 {
+    --a2-mod-layout-grid-column: span 12;
+  }
+}@container (min-width: 1280px) {
+  ._xl1_1iehx_215 {
+    --a2-mod-layout-grid-column: span 1;
+  }
+  ._xl2_1iehx_218 {
+    --a2-mod-layout-grid-column: span 2;
+  }
+  ._xl3_1iehx_221 {
+    --a2-mod-layout-grid-column: span 3;
+  }
+  ._xl4_1iehx_224 {
+    --a2-mod-layout-grid-column: span 4;
+  }
+  ._xl5_1iehx_227 {
+    --a2-mod-layout-grid-column: span 5;
+  }
+  ._xl6_1iehx_230 {
+    --a2-mod-layout-grid-column: span 6;
+  }
+  ._xl7_1iehx_233 {
+    --a2-mod-layout-grid-column: span 7;
+  }
+  ._xl8_1iehx_236 {
+    --a2-mod-layout-grid-column: span 8;
+  }
+  ._xl9_1iehx_239 {
+    --a2-mod-layout-grid-column: span 9;
+  }
+  ._xl10_1iehx_242 {
+    --a2-mod-layout-grid-column: span 10;
+  }
+  ._xl11_1iehx_245 {
+    --a2-mod-layout-grid-column: span 11;
+  }
+  ._xl12_1iehx_248 {
+    --a2-mod-layout-grid-column: span 12;
+  }
+}@container (min-width: 1536px) {
+  ._xxl1_1iehx_253 {
+    --a2-mod-layout-grid-column: span 1;
+  }
+  ._xxl2_1iehx_256 {
+    --a2-mod-layout-grid-column: span 2;
+  }
+  ._xxl3_1iehx_259 {
+    --a2-mod-layout-grid-column: span 3;
+  }
+  ._xxl4_1iehx_262 {
+    --a2-mod-layout-grid-column: span 4;
+  }
+  ._xxl5_1iehx_265 {
+    --a2-mod-layout-grid-column: span 5;
+  }
+  ._xxl6_1iehx_268 {
+    --a2-mod-layout-grid-column: span 6;
+  }
+  ._xxl7_1iehx_271 {
+    --a2-mod-layout-grid-column: span 7;
+  }
+  ._xxl8_1iehx_274 {
+    --a2-mod-layout-grid-column: span 8;
+  }
+  ._xxl9_1iehx_277 {
+    --a2-mod-layout-grid-column: span 9;
+  }
+  ._xxl10_1iehx_280 {
+    --a2-mod-layout-grid-column: span 10;
+  }
+  ._xxl11_1iehx_283 {
+    --a2-mod-layout-grid-column: span 11;
+  }
+  ._xxl12_1iehx_286 {
+    --a2-mod-layout-grid-column: span 12;
+  }
+}
 }

package/dist/Layout.js

@@ -1,2 +1,2 @@
-export { L as Layout, b as LayoutElement, a as LayoutItem, L as default } from './Layout-CISAxILX.js';
+export { L as Layout, b as LayoutElement, a as LayoutItem, L as default } from './Layout-C2Q2hyLG.js';
 //# sourceMappingURL=Layout.js.map

package/dist/{Link-jTvzyXca.js → Link-BUgivkGS.js}

@@ -1,10 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { forwardRef } from 'react';
-import { l as linkStyles } from './Link.module-CZt9wvuD.js';
-import { I as Icon } from './Icon-DuIlne4x.js';
+import { s as styles } from './Link.module-DJc0cOlg.js';
+import { I as Icon } from './Icon-BMMbp40n.js';
 import { c as cx } from './index-De1g9FRV.js';
-import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
+import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-CB_zHDbW.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb.js';
 import { useTrackingId } from './useTrackingId.js';
 
@@ -21,7 +21,7 @@ const LinkHeadless = forwardRef(
         ...props,
         children: [
           children,
-          props.target === "_blank" && /* @__PURE__ */ jsx(Icon, { className: linkStyles["open-in-new"], inherit: true, svg: SvgOpenInNew })
+          props.target === "_blank" && /* @__PURE__ */ jsx(Icon, { className: styles["open-in-new"], inherit: true, svg: SvgOpenInNew })
         ]
       }
     );
@@ -32,9 +32,9 @@ LinkHeadless.displayName = "LinkHeadless";
 const useLinkStyles = (props) => {
   const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
   const { className, appearance = "primary", ghost, style } = componentProps;
-  const linkClassNames = cx([linkStyles["link"]], className, {
-    [linkStyles["ghost"]]: ghost,
-    [linkStyles["secondary"]]: appearance === "secondary"
+  const linkClassNames = cx([styles["link"]], className, {
+    [styles["ghost"]]: ghost,
+    [styles["secondary"]]: appearance === "secondary"
   });
   const styleCombined = Object.assign({}, style, layoutStyles);
   return { linkClassNames, styleCombined };
@@ -100,4 +100,4 @@ const Link = forwardRef(
 Link.displayName = Link$1.displayName;
 
 export { Link as L, useLinkStyles as u };
-//# sourceMappingURL=Link-jTvzyXca.js.map
+//# sourceMappingURL=Link-BUgivkGS.js.map