@servicetitan/anvil2 2.9.2 → 3.0.1

package/dist/InteractiveCard.css

@@ -1,62 +1,61 @@
-@layer starter, reset, base, state, application;
-._card-wrapper_h7t6p_1 {
+.anvil2 {/* ============================================
+   Wrapper
+   ============================================ */._card-wrapper_1ygty_4 {
+  border-radius: var(--a2-border-radius-large, var(--a2-radius-4, 0.75rem));
   display: grid;
   grid-template: 1fr/1fr;
-  border-radius: 0.75rem;
-}
-._card-wrapper_h7t6p_1 > * {
+}._card-wrapper_1ygty_4 > * {
   grid-area: 1/1;
+}/* ============================================
+   Interactive Layer (Button/Link)
+   ============================================ */._card-action_1ygty_16 {
+  --a2-mod-interactive-card-action-background-color: var(--a2-background-color-default, light-dark(var(--a2-color-neutral-0, #ffffff), var(--a2-color-neutral-900, #1a1a1a)));
+  background-color: var(--a2-mod-interactive-card-action-background-color);
+  border: var(--a2-size-quarter, 0.0625rem) solid var(--a2-border-color-subdued, light-dark(var(--a2-color-neutral-80, #e6e6e6), var(--a2-color-neutral-700, #404040)));
+  border-radius: var(--a2-border-radius-large, var(--a2-radius-4, 0.75rem));
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  text-align: inherit;
+  text-decoration: none;
+  z-index: 0;
+}._card-action_1ygty_16:focus {
+  outline: 0;
+}._card-action_1ygty_16._bg-stronger_1ygty_32 {
+  --a2-mod-interactive-card-action-background-color: var(--a2-background-color-stronger, light-dark(var(--a2-color-neutral-50, #eeeeee), var(--a2-color-neutral-700, #404040)));
+}._card-action_1ygty_16._bg-strong_1ygty_32 {
+  --a2-mod-interactive-card-action-background-color: var(--a2-background-color-strong, light-dark(var(--a2-color-neutral-20, #f9f9f9), var(--a2-color-neutral-800, #292929)));
+}/* ============================================
+   Content Layer (Card)
+   ============================================ */._card-content_1ygty_43 {
+  --a2-mod-card-background-color: transparent;
+  pointer-events: none;
+  z-index: 1;
+}._card-content_1ygty_43 button,
+._card-content_1ygty_43 a,
+._card-content_1ygty_43 input,
+._card-content_1ygty_43 select,
+._card-content_1ygty_43 textarea {
+  pointer-events: auto;
+}/* ============================================
+   States
+   ============================================ */._card-wrapper_1ygty_4:hover:has(._card-action_1ygty_16:not(:disabled)),
+._card-wrapper_1ygty_4:has(._card-action_1ygty_16[data-interactive=hover]:not(:disabled)),
+._card-wrapper_1ygty_4:has(._card-action_1ygty_16:focus-visible),
+._card-wrapper_1ygty_4:has(._card-action_1ygty_16[data-interactive=focus-visible]),
+._card-wrapper_1ygty_4:has(._card-content_1ygty_43 *:hover),
+._card-wrapper_1ygty_4:has(._card-content_1ygty_43 *:focus-visible),
+._card-wrapper_1ygty_4:has(._card-content_1ygty_43 *[data-interactive=focus-visible]) {
+  box-shadow: var(--a2-shadow-size-float, var(--a2-size-0, 0rem) var(--a2-size-half, 0.125rem) var(--a2-size-2, 0.5rem)) var(--a2-shadow-color-default, light-dark(color-mix(in srgb, var(--a2-color-neutral-900, #1a1a1a) 8%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 8%, transparent)));
+}._card-wrapper_1ygty_4:has(._card-action_1ygty_16:focus-visible),
+._card-wrapper_1ygty_4:has(._card-action_1ygty_16[data-interactive=focus-visible]) {
+  outline: var(--a2-size-half, 0.125rem) solid var(--a2-focus-ring-color-default, var(--a2-status-color-info, light-dark(var(--a2-color-blue-600, #0265dc), var(--a2-color-blue-300, #70b1ff))));
+  outline-offset: var(--a2-size-half, 0.125rem);
+}._card-wrapper_1ygty_4:has(._card-action_1ygty_16:active:not(:disabled)),
+._card-wrapper_1ygty_4:has(._card-action_1ygty_16[data-interactive=active]:not(:disabled)) {
+  box-shadow: var(--a2-shadow-size-overlay, var(--a2-size-0, 0rem) var(--a2-size-2, 0.5rem) var(--a2-size-6, 1.5rem)) var(--a2-shadow-color-default, light-dark(color-mix(in srgb, var(--a2-color-neutral-900, #1a1a1a) 8%, transparent), color-mix(in srgb, var(--a2-color-neutral-0, #ffffff) 8%, transparent)));
+}._card-wrapper_1ygty_4:has(._card-action_1ygty_16:disabled) ._card-content_1ygty_43 {
+  cursor: not-allowed;
+  pointer-events: auto;
 }
-
-@layer base {
-  ._card-action_h7t6p_11 {
-    border-radius: 0.75rem;
-    z-index: 0;
-    cursor: pointer;
-    border: none;
-    font: inherit;
-    text-align: inherit;
-    text-decoration: none;
-    color: inherit;
-    background-color: var(--background-color, #ffffff);
-    border: 0.0625rem solid var(--border-color-subdued, #dfe0e1);
-  }
-  ._card-action_h7t6p_11._bg-stronger_h7t6p_23 {
-    background-color: var(--background-color-stronger, #eeeeee);
-  }
-  ._card-action_h7t6p_11._bg-strong_h7t6p_23 {
-    background-color: var(--background-color-strong, #f7f7f7);
-  }
-  ._card-content_h7t6p_29 {
-    z-index: 1;
-    pointer-events: none;
-    background: transparent !important;
-  }
-  ._card-content_h7t6p_29 button,
-  ._card-content_h7t6p_29 a,
-  ._card-content_h7t6p_29 input,
-  ._card-content_h7t6p_29 select,
-  ._card-content_h7t6p_29 textarea {
-    pointer-events: auto;
-  }
-}
-@layer state {
-  ._card-wrapper_h7t6p_1:hover:has(._card-action_h7t6p_11:not(:disabled)), ._card-wrapper_h7t6p_1:has(._card-action_h7t6p_11[data-interactive=hover]:not(:disabled)), ._card-wrapper_h7t6p_1:has(._card-action_h7t6p_11:focus-visible), ._card-wrapper_h7t6p_1:has(._card-action_h7t6p_11[data-interactive=focus-visible]), ._card-wrapper_h7t6p_1:has(._card-content_h7t6p_29 *:hover), ._card-wrapper_h7t6p_1:has(._card-content_h7t6p_29 *:focus-visible), ._card-wrapper_h7t6p_1:has(._card-content_h7t6p_29 *[data-interactive=focus-visible]) {
-    box-shadow: 0rem 0.125rem 0.5rem var(--shadow-color, rgba(20, 20, 20, 0.0784313725));
-  }
-  ._card-wrapper_h7t6p_1:has(._card-action_h7t6p_11:focus-visible), ._card-wrapper_h7t6p_1:has(._card-action_h7t6p_11[data-interactive=focus-visible]) {
-    outline-offset: 0.125rem;
-    outline: 0.125rem solid var(--focus-ring-color, #0265DC);
-  }
-  ._card-wrapper_h7t6p_1:has(._card-action_h7t6p_11:active:not(:disabled)), ._card-wrapper_h7t6p_1:has(._card-action_h7t6p_11[data-interactive=active]:not(:disabled)) {
-    box-shadow: 0rem 0.5rem 1.5rem var(--shadow-color, rgba(20, 20, 20, 0.0784313725));
-  }
-  ._card-wrapper_h7t6p_1:has(._card-action_h7t6p_11:disabled) ._card-content_h7t6p_29 {
-    pointer-events: auto;
-    cursor: not-allowed;
-  }
-  a._card-action_h7t6p_11:focus,
-  ._card-action_h7t6p_11:focus {
-    outline: 0 !important;
-  }
 }

package/dist/InteractiveCard.js

@@ -1,2 +1,2 @@
-export { I as InteractiveCard } from './InteractiveCard-GTYbR6Xy.js';
+export { I as InteractiveCard } from './InteractiveCard-CnW0m_F-.js';
 //# sourceMappingURL=InteractiveCard.js.map

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

@@ -2,88 +2,89 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
 
-import './Layout.css';const container = "_container_1suid_2";
-const fluid = "_fluid_1suid_13";
-const grid = "_grid_1suid_16";
-const wide = "_wide_1suid_21";
-const narrow = "_narrow_1suid_24";
-const xs1 = "_xs1_1suid_27";
-const xs2 = "_xs2_1suid_30";
-const xs3 = "_xs3_1suid_33";
-const xs4 = "_xs4_1suid_36";
-const xs5 = "_xs5_1suid_37";
-const xs6 = "_xs6_1suid_38";
-const xs7 = "_xs7_1suid_39";
-const xs8 = "_xs8_1suid_40";
-const xs9 = "_xs9_1suid_41";
-const xs10 = "_xs10_1suid_42";
-const xs11 = "_xs11_1suid_43";
-const xs12 = "_xs12_1suid_44";
-const cell = "_cell_1suid_47";
-const sm1 = "_sm1_1suid_57";
-const sm2 = "_sm2_1suid_60";
-const sm3 = "_sm3_1suid_63";
-const sm4 = "_sm4_1suid_66";
-const sm5 = "_sm5_1suid_67";
-const sm6 = "_sm6_1suid_68";
-const sm7 = "_sm7_1suid_69";
-const sm8 = "_sm8_1suid_70";
-const sm9 = "_sm9_1suid_71";
-const sm10 = "_sm10_1suid_72";
-const sm11 = "_sm11_1suid_73";
-const sm12 = "_sm12_1suid_74";
-const md1 = "_md1_1suid_149";
-const md2 = "_md2_1suid_152";
-const md3 = "_md3_1suid_155";
-const md4 = "_md4_1suid_158";
-const md5 = "_md5_1suid_161";
-const md6 = "_md6_1suid_164";
-const md7 = "_md7_1suid_167";
-const md8 = "_md8_1suid_170";
-const md9 = "_md9_1suid_173";
-const md10 = "_md10_1suid_176";
-const md11 = "_md11_1suid_179";
-const md12 = "_md12_1suid_182";
-const lg1 = "_lg1_1suid_197";
-const lg2 = "_lg2_1suid_200";
-const lg3 = "_lg3_1suid_203";
-const lg4 = "_lg4_1suid_206";
-const lg5 = "_lg5_1suid_209";
-const lg6 = "_lg6_1suid_212";
-const lg7 = "_lg7_1suid_215";
-const lg8 = "_lg8_1suid_218";
-const lg9 = "_lg9_1suid_221";
-const lg10 = "_lg10_1suid_224";
-const lg11 = "_lg11_1suid_227";
-const lg12 = "_lg12_1suid_230";
-const xl1 = "_xl1_1suid_245";
-const xl2 = "_xl2_1suid_248";
-const xl3 = "_xl3_1suid_251";
-const xl4 = "_xl4_1suid_254";
-const xl5 = "_xl5_1suid_257";
-const xl6 = "_xl6_1suid_260";
-const xl7 = "_xl7_1suid_263";
-const xl8 = "_xl8_1suid_266";
-const xl9 = "_xl9_1suid_269";
-const xl10 = "_xl10_1suid_272";
-const xl11 = "_xl11_1suid_275";
-const xl12 = "_xl12_1suid_278";
-const xxl1 = "_xxl1_1suid_287";
-const xxl2 = "_xxl2_1suid_290";
-const xxl3 = "_xxl3_1suid_293";
-const xxl4 = "_xxl4_1suid_296";
-const xxl5 = "_xxl5_1suid_299";
-const xxl6 = "_xxl6_1suid_302";
-const xxl7 = "_xxl7_1suid_305";
-const xxl8 = "_xxl8_1suid_308";
-const xxl9 = "_xxl9_1suid_311";
-const xxl10 = "_xxl10_1suid_314";
-const xxl11 = "_xxl11_1suid_317";
-const xxl12 = "_xxl12_1suid_320";
+import './Layout.css';const container = "_container_1iehx_1";
+const fluid = "_fluid_1iehx_12";
+const grid = "_grid_1iehx_16";
+const cell = "_cell_1iehx_28";
+const wide = "_wide_1iehx_33";
+const narrow = "_narrow_1iehx_47";
+const xs1 = "_xs1_1iehx_56";
+const xs2 = "_xs2_1iehx_60";
+const xs3 = "_xs3_1iehx_64";
+const xs4 = "_xs4_1iehx_68";
+const xs5 = "_xs5_1iehx_69";
+const xs6 = "_xs6_1iehx_70";
+const xs7 = "_xs7_1iehx_71";
+const xs8 = "_xs8_1iehx_72";
+const xs9 = "_xs9_1iehx_73";
+const xs10 = "_xs10_1iehx_74";
+const xs11 = "_xs11_1iehx_75";
+const xs12 = "_xs12_1iehx_76";
+const sm1 = "_sm1_1iehx_81";
+const sm2 = "_sm2_1iehx_84";
+const sm3 = "_sm3_1iehx_87";
+const sm4 = "_sm4_1iehx_90";
+const sm5 = "_sm5_1iehx_91";
+const sm6 = "_sm6_1iehx_92";
+const sm7 = "_sm7_1iehx_93";
+const sm8 = "_sm8_1iehx_94";
+const sm9 = "_sm9_1iehx_95";
+const sm10 = "_sm10_1iehx_96";
+const sm11 = "_sm11_1iehx_97";
+const sm12 = "_sm12_1iehx_98";
+const md1 = "_md1_1iehx_139";
+const md2 = "_md2_1iehx_142";
+const md3 = "_md3_1iehx_145";
+const md4 = "_md4_1iehx_148";
+const md5 = "_md5_1iehx_151";
+const md6 = "_md6_1iehx_154";
+const md7 = "_md7_1iehx_157";
+const md8 = "_md8_1iehx_160";
+const md9 = "_md9_1iehx_163";
+const md10 = "_md10_1iehx_166";
+const md11 = "_md11_1iehx_169";
+const md12 = "_md12_1iehx_172";
+const lg1 = "_lg1_1iehx_177";
+const lg2 = "_lg2_1iehx_180";
+const lg3 = "_lg3_1iehx_183";
+const lg4 = "_lg4_1iehx_186";
+const lg5 = "_lg5_1iehx_189";
+const lg6 = "_lg6_1iehx_192";
+const lg7 = "_lg7_1iehx_195";
+const lg8 = "_lg8_1iehx_198";
+const lg9 = "_lg9_1iehx_201";
+const lg10 = "_lg10_1iehx_204";
+const lg11 = "_lg11_1iehx_207";
+const lg12 = "_lg12_1iehx_210";
+const xl1 = "_xl1_1iehx_215";
+const xl2 = "_xl2_1iehx_218";
+const xl3 = "_xl3_1iehx_221";
+const xl4 = "_xl4_1iehx_224";
+const xl5 = "_xl5_1iehx_227";
+const xl6 = "_xl6_1iehx_230";
+const xl7 = "_xl7_1iehx_233";
+const xl8 = "_xl8_1iehx_236";
+const xl9 = "_xl9_1iehx_239";
+const xl10 = "_xl10_1iehx_242";
+const xl11 = "_xl11_1iehx_245";
+const xl12 = "_xl12_1iehx_248";
+const xxl1 = "_xxl1_1iehx_253";
+const xxl2 = "_xxl2_1iehx_256";
+const xxl3 = "_xxl3_1iehx_259";
+const xxl4 = "_xxl4_1iehx_262";
+const xxl5 = "_xxl5_1iehx_265";
+const xxl6 = "_xxl6_1iehx_268";
+const xxl7 = "_xxl7_1iehx_271";
+const xxl8 = "_xxl8_1iehx_274";
+const xxl9 = "_xxl9_1iehx_277";
+const xxl10 = "_xxl10_1iehx_280";
+const xxl11 = "_xxl11_1iehx_283";
+const xxl12 = "_xxl12_1iehx_286";
 const styles = {
 	container: container,
 	fluid: fluid,
 	grid: grid,
+	cell: cell,
 	wide: wide,
 	narrow: narrow,
 	xs1: xs1,
@@ -98,7 +99,6 @@ const styles = {
 	xs10: xs10,
 	xs11: xs11,
 	xs12: xs12,
-	cell: cell,
 	sm1: sm1,
 	sm2: sm2,
 	sm3: sm3,
@@ -220,4 +220,4 @@ Layout.displayName = "Layout";
 const LayoutElement = Layout;
 
 export { Layout as L, LayoutItem as a, LayoutElement as b };
-//# sourceMappingURL=Layout-CISAxILX.js.map
+//# sourceMappingURL=Layout-C2Q2hyLG.js.map

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;;;;"}