@gusto/embedded-react-sdk 0.11.3 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,186 @@
 # Changelog
 
+## 0.12.0
+
+### Updated theming
+
+We have updated our theming approach for the SDK which is a breaking change. See the breaking changes section for this release below for more information.
+
+### Features & Enhancements
+
+- Expose Speakeasy hooks to consumers of SDK for enhanced API interaction capabilities
+- Navigate to add mode when payschedule list is empty
+- Use virtualization to optimize comboboxes with long lists
+- Update Button styling and variants
+
+### Fixes
+
+- Fix deductions state machine flow and auto-redirect behavior
+- Fix deductions copy and export components
+- Fix pay schedule preview component registration to react-hook-form
+- Fix DatePicker timezone issue
+- Fix react-aria select onChange behavior
+- Fix vite CSS file name requirement on v6
+- Fix console issues in readme publish and type issue in select
+- Fix dependencies to satisfy dependabot
+- Fix only update onboarding status for admin
+- Fix eliminate flash between datacards and datatable
+- Fix mark required fields as required to prevent optional label display
+
+### Chores & Maintenance
+
+- Update theming infrastructure and migrate all components to use new flat theme variables
+- Change timeout for long running e2e test to 20s
+- Add cursor rule files for AI assistance
+- Fix docs publishing issues
+
+### Breaking changes
+
+> Note: We are pre alpha and are regularly iterating on the SDK as we learn more about our consumers and their needs which sometimes involves breaking changes. [Read more about our current versioning strategy here](./docs/04/01/versioning.md).
+
+#### Legacy theming infrastructure has been removed in favor of simplified flat theme approach
+
+The legacy theming system with nested objects and complex component-specific themes has been updated. The new system uses a flat theme object that is more straightforward and easier to use.
+
+See the following docs for more context:
+
+- [Theming overview](./docs/theming/theming.md)
+- [Theme variables inventory](./docs/theming/theme-variables.md)
+
+The following example provides a before and after with a mapping of the old theme object to the new equivalent.
+
+**Before (nested structure):**
+
+```tsx
+<GustoProvider
+  theme={{
+    typography: {
+      font: 'Geist', // Maps to fontFamily
+      fontWeight: {
+        regular: 400, // Maps to fontWeightRegular
+        medium: 500, // Maps to fontWeightMedium
+        semibold: 600, // Maps to fontWeightSemibold
+        bold: 700, // Maps to fontWeightBold
+      },
+      fontSize: {
+        small: '14px', // Maps to fontSizeSmall
+        regular: '16px', // Maps to fontSizeRegular
+        medium: '18px', // Maps to fontSizeLarge
+      },
+      headings: {
+        1: '32px', // Maps to fontSizeHeading1
+        2: '24px', // Maps to fontSizeHeading2
+        3: '20px', // Maps to fontSizeHeading3
+        4: '18px', // Maps to fontSizeHeading4
+        5: '16px', // Maps to fontSizeHeading5
+        6: '14px', // Maps to fontSizeHeading6
+      },
+      textColor: '#1C1C1C', // Maps to colorBodyContent
+    },
+    colors: {
+      gray: {
+        100: '#FFFFFF', // Maps to colorBody
+        200: '#FBFAFA', // Maps to colorBodyAccent
+        300: '#F4F4F3', // Maps to colorBodyAccent
+        400: '#EAEAEA', // Maps to colorBorder
+        500: '#DCDCDC', // Maps to inputBorderColor
+        600: '#BABABC', // Maps to colorBodySubContent
+        700: '#919197', // Maps to colorBodySubContent
+        800: '#6C6C72', // Maps to colorBodySubContent
+        900: '#525257', // Maps to colorPrimaryAccent
+        1000: '#1C1C1C', // Maps to colorPrimary & colorBodyContent
+      },
+      error: {
+        100: '#FFF7F5', // Maps to colorError
+        500: '#D5351F', // Maps to colorErrorAccent
+        800: '#B41D08', // Maps to colorErrorContent
+      },
+    },
+    input: {
+      fontSize: '14px', // Maps to inputLabelFontSize
+      radius: '8px', // Maps to inputRadius
+      textColor: '#1C1C1C', // Maps to inputContentColor
+      borderColor: '#DCDCDC', // Maps to inputBorderColor
+      background: '#FFFFFF', // Maps to inputBackgroundColor
+    },
+    button: {
+      fontSize: '14px', // Maps to fontSizeSmall
+      fontWeight: 500, // Maps to fontWeightMedium
+      borderRadius: '6px', // Maps to buttonRadius
+      primary: {
+        color: '#FFFFFF', // Maps to colorPrimaryContent
+        bg: '#1C1C1C', // Maps to colorPrimary
+        borderColor: '#1C1C1C', // Maps to colorPrimary
+      },
+    },
+    focus: {
+      color: '#1C1C1C', // Maps to focusRingColor
+      borderWidth: '2px', // Maps to focusRingWidth
+    },
+    shadow: {
+      100: '0px 1px 2px 0px rgba(10, 13, 18, 0.05)', // Maps to shadowResting
+      200: '0px 4px 6px 0px rgba(28, 28, 28, 0.05), 0px 10px 15px 0px rgba(28, 28, 28, 0.10)', // Maps to shadowTopmost
+    },
+    badge: {
+      borderRadius: '16px', // Maps to badgeRadius
+    },
+    radius: '6px', // Maps to buttonRadius (default)
+    transitionDuration: '200ms', // Maps to transitionDuration
+  }}
+>
+  {children}
+</GustoProvider>
+```
+
+**After (simplified flat structure):**
+
+```tsx
+<GustoProvider
+  theme={{
+    fontFamily: 'Geist',
+    fontWeightRegular: '400',
+    fontWeightMedium: '500',
+    fontWeightSemibold: '600',
+    fontWeightBold: '700',
+    fontSizeSmall: '14px',
+    fontSizeRegular: '16px',
+    fontSizeLarge: '18px',
+    fontSizeHeading1: '32px',
+    fontSizeHeading2: '24px',
+    fontSizeHeading3: '20px',
+    fontSizeHeading4: '18px',
+    fontSizeHeading5: '16px',
+    fontSizeHeading6: '14px',
+    colorBody: '#FFFFFF',
+    colorBodyAccent: '#F4F4F3',
+    colorBodyContent: '#1C1C1C',
+    colorBodySubContent: '#6C6C72',
+    colorBorder: '#EAEAEA',
+    colorPrimary: '#1C1C1C',
+    colorPrimaryAccent: '#525257',
+    colorPrimaryContent: '#FFFFFF',
+    colorError: '#FFF7F5',
+    colorErrorAccent: '#D5351F',
+    colorErrorContent: '#B41D08',
+    inputRadius: '8px',
+    inputBackgroundColor: '#FFFFFF',
+    inputBorderColor: '#DCDCDC',
+    inputContentColor: '#1C1C1C',
+    inputLabelFontSize: '16px',
+    buttonRadius: '8px',
+    focusRingColor: '#1C1C1C',
+    focusRingWidth: '2px',
+    shadowResting: '0px 1px 2px 0px rgba(10, 13, 18, 0.05)',
+    shadowTopmost:
+      '0px 4px 6px 0px rgba(28, 28, 28, 0.05), 0px 10px 15px 0px rgba(28, 28, 28, 0.10)',
+    badgeRadius: '16px',
+    transitionDuration: '200ms',
+  }}
+>
+  {children}
+</GustoProvider>
+```
+
 ## 0.11.3
 
 - Minor release to assist in docs publishing

package/dist/components/Common/DataView/DataCards/DataCards.module.scss.js

@@ -1,4 +1,4 @@
-const t = "_columnTitle_1djp5_1", l = "_columnData_1djp5_8", o = {
+const t = "_columnTitle_1rhjs_1", l = "_columnData_1rhjs_8", o = {
   columnTitle: t,
   columnData: l
 };

package/dist/components/Common/DocumentList/DocumentList.module.scss.js

@@ -1,4 +1,4 @@
-const t = "_documentList_1edqy_1", o = "_formTitle_1edqy_8", s = "_formDescription_1edqy_12", e = "_statusCell_1edqy_16", r = "_documentListError_1edqy_20", c = {
+const t = "_documentList_y7zef_1", o = "_formTitle_y7zef_8", s = "_formDescription_y7zef_12", e = "_statusCell_y7zef_16", r = "_documentListError_y7zef_20", c = {
   documentList: t,
   formTitle: o,
   formDescription: s,

package/dist/components/Common/DocumentViewer/DocumentViewer.module.scss.js

@@ -1,4 +1,4 @@
-const n = "_container_jjjg0_1", d = "_embedPdf_jjjg0_4", e = "_smallEmbedPdfContainer_jjjg0_9", o = "_smallEmbedPdf_jjjg0_9", s = "_heading_jjjg0_23", t = "_downloadInstructions_jjjg0_26", a = {
+const n = "_container_1ux7f_1", d = "_embedPdf_1ux7f_4", e = "_smallEmbedPdfContainer_1ux7f_9", o = "_smallEmbedPdf_1ux7f_9", s = "_heading_1ux7f_23", t = "_downloadInstructions_1ux7f_26", a = {
   container: n,
   embedPdf: d,
   smallEmbedPdfContainer: e,

package/dist/components/Common/EmptyData/EmptyData.module.scss.js

@@ -1,4 +1,4 @@
-const t = "_emptyData_1dzn2_1", e = "_title_1dzn2_9", a = {
+const t = "_emptyData_4b2s1_1", e = "_title_4b2s1_9", a = {
   emptyData: t,
   title: e
 };

package/dist/components/Common/FieldErrorMessage/FieldErrorMessage.module.scss.js

@@ -1,4 +1,4 @@
-const o = "_root_1iceu_1", r = "_withErrorIcon_1iceu_9", t = {
+const o = "_root_3cadn_1", r = "_withErrorIcon_3cadn_9", t = {
   root: o,
   withErrorIcon: r
 };

package/dist/components/Common/FieldLayout/FieldLayout.module.scss.js

@@ -1,15 +1,15 @@
-const e = "_root_1axvp_1", i = "_labelAndDescription_1axvp_7", s = "_withVisibleLabel_1axvp_11", t = "_withDescription_1axvp_14", o = "_errorMessage_1axvp_18", r = {
-  root: e,
-  labelAndDescription: i,
+const i = "_root_kyliw_1", e = "_labelAndDescription_kyliw_7", s = "_withVisibleLabel_kyliw_11", t = "_withDescription_kyliw_14", o = "_errorMessage_kyliw_18", l = {
+  root: i,
+  labelAndDescription: e,
   withVisibleLabel: s,
   withDescription: t,
   errorMessage: o
 };
 export {
-  r as default,
+  l as default,
   o as errorMessage,
-  i as labelAndDescription,
-  e as root,
+  e as labelAndDescription,
+  i as root,
   t as withDescription,
   s as withVisibleLabel
 };

package/dist/components/Common/Flex/Flex.d.ts

@@ -1,10 +1,10 @@
-import { Responsive, ResponsiveSpacing } from '../../../helpers/responsive';
+import { Responsive, CustomPropertyValue } from '../../../helpers/responsive';
 export interface FlexProps {
     children: React.ReactNode;
     flexDirection?: Responsive<'row' | 'column'>;
     justifyContent?: Responsive<'space-between' | 'center' | 'flex-start' | 'flex-end' | 'space-around' | 'space-evenly' | 'normal'>;
     alignItems?: Responsive<'center' | 'flex-start' | 'flex-end' | 'stretch'>;
-    gap?: ResponsiveSpacing;
+    gap?: Responsive<CustomPropertyValue>;
 }
 export declare function Flex({ children, flexDirection, justifyContent, alignItems, gap, }: FlexProps): import("react/jsx-runtime").JSX.Element;
 export interface FlexItemProps {

package/dist/components/Common/Flex/Flex.js

@@ -1,22 +1,22 @@
 import { jsx as e } from "react/jsx-runtime";
 import t from "./Flex.module.scss.js";
-import { setResponsiveCustomProperties as a, transformResponsiveSpacingValue as m } from "../../../helpers/responsive.js";
-function x({
+import { setResponsiveCustomProperties as m } from "../../../helpers/responsive.js";
+function c({
   children: r,
   flexDirection: o = "row",
   justifyContent: s = "normal",
   alignItems: i = "flex-start",
   gap: n = 24
 }) {
-  const l = a({
+  const l = m({
     "flex-direction": o,
     "justify-content": s,
     "align-items": i,
-    gap: m(n)
+    gap: n
   });
   return /* @__PURE__ */ e("div", { className: t.flexContainer, children: /* @__PURE__ */ e("div", { className: t.flex, style: l, children: r }) });
 }
 export {
-  x as Flex
+  c as Flex
 };
 //# sourceMappingURL=Flex.js.map

package/dist/components/Common/Flex/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../../../src/components/Common/Flex/Flex.tsx"],"sourcesContent":["import style from './Flex.module.scss'\nimport {\n  setResponsiveCustomProperties,\n  transformResponsiveSpacingValue,\n  type Responsive,\n  type ResponsiveSpacing,\n} from '@/helpers/responsive'\n\nexport interface FlexProps {\n  children: React.ReactNode\n  flexDirection?: Responsive<'row' | 'column'>\n  justifyContent?: Responsive<\n    | 'space-between'\n    | 'center'\n    | 'flex-start'\n    | 'flex-end'\n    | 'space-around'\n    | 'space-evenly'\n    | 'normal'\n  >\n  alignItems?: Responsive<'center' | 'flex-start' | 'flex-end' | 'stretch'>\n  gap?: ResponsiveSpacing\n}\n\nexport function Flex({\n  children,\n  flexDirection = 'row',\n  justifyContent = 'normal',\n  alignItems = 'flex-start',\n  gap = 24,\n}: FlexProps) {\n  const properties = setResponsiveCustomProperties({\n    'flex-direction': flexDirection,\n    'justify-content': justifyContent,\n    'align-items': alignItems,\n    gap: transformResponsiveSpacingValue(gap),\n  })\n\n  return (\n    <div className={style.flexContainer}>\n      <div className={style.flex} style={properties}>\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport interface FlexItemProps {\n  flexGrow?: number | 'initial'\n  children: React.ReactNode\n}\n\nexport function FlexItem({ flexGrow = 'initial', children }: FlexItemProps) {\n  return <div style={{ flexGrow: flexGrow }}>{children}</div>\n}\n"],"names":["Flex","children","flexDirection","justifyContent","alignItems","gap","properties","setResponsiveCustomProperties","transformResponsiveSpacingValue","jsx","style"],"mappings":";;;AAwBO,SAASA,EAAK;AAAA,EACnB,UAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,gBAAAC,IAAiB;AAAA,EACjB,YAAAC,IAAa;AAAA,EACb,KAAAC,IAAM;AACR,GAAc;AACZ,QAAMC,IAAaC,EAA8B;AAAA,IAC/C,kBAAkBL;AAAA,IAClB,mBAAmBC;AAAA,IACnB,eAAeC;AAAA,IACf,KAAKI,EAAgCH,CAAG;AAAA,EAAA,CACzC;AAED,SACE,gBAAAI,EAAC,OAAA,EAAI,WAAWC,EAAM,eACpB,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAM,MAAM,OAAOJ,GAChC,UAAAL,GACH,GACF;AAEJ;"}
+{"version":3,"file":"Flex.js","sources":["../../../../src/components/Common/Flex/Flex.tsx"],"sourcesContent":["import style from './Flex.module.scss'\nimport {\n  setResponsiveCustomProperties,\n  type Responsive,\n  type CustomPropertyValue,\n} from '@/helpers/responsive'\n\nexport interface FlexProps {\n  children: React.ReactNode\n  flexDirection?: Responsive<'row' | 'column'>\n  justifyContent?: Responsive<\n    | 'space-between'\n    | 'center'\n    | 'flex-start'\n    | 'flex-end'\n    | 'space-around'\n    | 'space-evenly'\n    | 'normal'\n  >\n  alignItems?: Responsive<'center' | 'flex-start' | 'flex-end' | 'stretch'>\n  gap?: Responsive<CustomPropertyValue>\n}\n\nexport function Flex({\n  children,\n  flexDirection = 'row',\n  justifyContent = 'normal',\n  alignItems = 'flex-start',\n  gap = 24,\n}: FlexProps) {\n  const properties = setResponsiveCustomProperties({\n    'flex-direction': flexDirection,\n    'justify-content': justifyContent,\n    'align-items': alignItems,\n    gap,\n  })\n\n  return (\n    <div className={style.flexContainer}>\n      <div className={style.flex} style={properties}>\n        {children}\n      </div>\n    </div>\n  )\n}\n\nexport interface FlexItemProps {\n  flexGrow?: number | 'initial'\n  children: React.ReactNode\n}\n\nexport function FlexItem({ flexGrow = 'initial', children }: FlexItemProps) {\n  return <div style={{ flexGrow: flexGrow }}>{children}</div>\n}\n"],"names":["Flex","children","flexDirection","justifyContent","alignItems","gap","properties","setResponsiveCustomProperties","jsx","style"],"mappings":";;;AAuBO,SAASA,EAAK;AAAA,EACnB,UAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,gBAAAC,IAAiB;AAAA,EACjB,YAAAC,IAAa;AAAA,EACb,KAAAC,IAAM;AACR,GAAc;AACZ,QAAMC,IAAaC,EAA8B;AAAA,IAC/C,kBAAkBL;AAAA,IAClB,mBAAmBC;AAAA,IACnB,eAAeC;AAAA,IACf,KAAAC;AAAA,EAAA,CACD;AAED,SACE,gBAAAG,EAAC,OAAA,EAAI,WAAWC,EAAM,eACpB,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAM,MAAM,OAAOH,GAChC,UAAAL,GACH,GACF;AAEJ;"}

package/dist/components/Common/Form/Form.module.scss.js

@@ -1,8 +1,8 @@
-const o = "_form_1rngm_1", r = {
+const o = "_form_gdv4k_1", s = {
   form: o
 };
 export {
-  r as default,
+  s as default,
   o as form
 };
 //# sourceMappingURL=Form.module.scss.js.map

package/dist/components/Common/Grid/Grid.d.ts

@@ -1,10 +1,10 @@
 import { ReactNode } from 'react';
-import { CustomPropertyValue, Responsive, ResponsiveSpacing } from '../../../helpers/responsive';
+import { CustomPropertyValue, Responsive } from '../../../helpers/responsive';
 type Flow = 'row' | 'column' | 'row dense' | 'column dense';
 type Alignment = 'start' | 'end' | 'center' | 'stretch';
 export interface GridProps {
     children: ReactNode;
-    gap?: ResponsiveSpacing;
+    gap?: Responsive<CustomPropertyValue>;
     gridTemplateColumns?: Responsive<CustomPropertyValue | CustomPropertyValue[]>;
     gridTemplateRows?: Responsive<CustomPropertyValue | CustomPropertyValue[]>;
     gridTemplateAreas?: Responsive<string>;

package/dist/components/Common/Grid/Grid.js

@@ -1,32 +1,32 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import c from "classnames";
 import r from "./Grid.module.scss.js";
-import { setResponsiveCustomProperties as g, transformResponsiveSpacingValue as u } from "../../../helpers/responsive.js";
-function w({
-  children: t,
+import { setResponsiveCustomProperties as g } from "../../../helpers/responsive.js";
+function N({
+  children: e,
   gap: s = 24,
   gridTemplateColumns: i = ["1fr"],
   gridTemplateRows: o,
   gridTemplateAreas: m,
   gridAutoFlow: a,
-  alignItems: n,
-  justifyItems: p,
-  justifyContent: l,
+  alignItems: l,
+  justifyItems: n,
+  justifyContent: p,
   className: d
 }) {
   const f = g({
-    gap: u(s),
+    gap: s,
     "grid-template-columns": i,
     "grid-template-rows": o,
     "grid-template-areas": m,
     "grid-auto-flow": a,
-    "align-items": n,
-    "justify-items": p,
-    "justify-content": l
+    "align-items": l,
+    "justify-items": n,
+    "justify-content": p
   });
-  return /* @__PURE__ */ e("div", { className: c(r.gridContainer, d), children: /* @__PURE__ */ e("div", { className: r.grid, style: f, children: t }) });
+  return /* @__PURE__ */ t("div", { className: c(r.gridContainer, d), children: /* @__PURE__ */ t("div", { className: r.grid, style: f, children: e }) });
 }
 export {
-  w as Grid
+  N as Grid
 };
 //# sourceMappingURL=Grid.js.map

package/dist/components/Common/Grid/Grid.js.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.js","sources":["../../../../src/components/Common/Grid/Grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport cn from 'classnames'\nimport styles from './Grid.module.scss'\nimport {\n  setResponsiveCustomProperties,\n  transformResponsiveSpacingValue,\n  type CustomPropertyValue,\n  type Responsive,\n  type ResponsiveSpacing,\n} from '@/helpers/responsive'\n\ntype Flow = 'row' | 'column' | 'row dense' | 'column dense'\ntype Alignment = 'start' | 'end' | 'center' | 'stretch'\n\nexport interface GridProps {\n  children: ReactNode\n  gap?: ResponsiveSpacing\n  gridTemplateColumns?: Responsive<CustomPropertyValue | CustomPropertyValue[]>\n  gridTemplateRows?: Responsive<CustomPropertyValue | CustomPropertyValue[]>\n  gridTemplateAreas?: Responsive<string>\n  gridAutoFlow?: Responsive<Flow>\n  alignItems?: Responsive<Alignment>\n  justifyItems?: Responsive<Alignment>\n  justifyContent?: Responsive<\n    'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly'\n  >\n  className?: string\n}\n\nexport function Grid({\n  children,\n  gap = 24,\n  gridTemplateColumns = ['1fr'],\n  gridTemplateRows,\n  gridTemplateAreas,\n  gridAutoFlow,\n  alignItems,\n  justifyItems,\n  justifyContent,\n  className,\n}: GridProps) {\n  const properties = setResponsiveCustomProperties({\n    gap: transformResponsiveSpacingValue(gap),\n    'grid-template-columns': gridTemplateColumns,\n    'grid-template-rows': gridTemplateRows,\n    'grid-template-areas': gridTemplateAreas,\n    'grid-auto-flow': gridAutoFlow,\n    'align-items': alignItems,\n    'justify-items': justifyItems,\n    'justify-content': justifyContent,\n  })\n\n  return (\n    <div className={cn(styles.gridContainer, className)}>\n      <div className={styles.grid} style={properties}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["Grid","children","gap","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","gridAutoFlow","alignItems","justifyItems","justifyContent","className","properties","setResponsiveCustomProperties","transformResponsiveSpacingValue","cn","styles","jsx"],"mappings":";;;;AA6BO,SAASA,EAAK;AAAA,EACnB,UAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,qBAAAC,IAAsB,CAAC,KAAK;AAAA,EAC5B,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AACF,GAAc;AACZ,QAAMC,IAAaC,EAA8B;AAAA,IAC/C,KAAKC,EAAgCX,CAAG;AAAA,IACxC,yBAAyBC;AAAA,IACzB,sBAAsBC;AAAA,IACtB,uBAAuBC;AAAA,IACvB,kBAAkBC;AAAA,IAClB,eAAeC;AAAA,IACf,iBAAiBC;AAAA,IACjB,mBAAmBC;AAAA,EAAA,CACpB;AAED,2BACG,OAAA,EAAI,WAAWK,EAAGC,EAAO,eAAeL,CAAS,GAChD,UAAA,gBAAAM,EAAC,OAAA,EAAI,WAAWD,EAAO,MAAM,OAAOJ,GACjC,UAAAV,GACH,GACF;AAEJ;"}
+{"version":3,"file":"Grid.js","sources":["../../../../src/components/Common/Grid/Grid.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport cn from 'classnames'\nimport styles from './Grid.module.scss'\nimport {\n  setResponsiveCustomProperties,\n  type CustomPropertyValue,\n  type Responsive,\n} from '@/helpers/responsive'\n\ntype Flow = 'row' | 'column' | 'row dense' | 'column dense'\ntype Alignment = 'start' | 'end' | 'center' | 'stretch'\n\nexport interface GridProps {\n  children: ReactNode\n  gap?: Responsive<CustomPropertyValue>\n  gridTemplateColumns?: Responsive<CustomPropertyValue | CustomPropertyValue[]>\n  gridTemplateRows?: Responsive<CustomPropertyValue | CustomPropertyValue[]>\n  gridTemplateAreas?: Responsive<string>\n  gridAutoFlow?: Responsive<Flow>\n  alignItems?: Responsive<Alignment>\n  justifyItems?: Responsive<Alignment>\n  justifyContent?: Responsive<\n    'start' | 'end' | 'center' | 'stretch' | 'space-between' | 'space-around' | 'space-evenly'\n  >\n  className?: string\n}\n\nexport function Grid({\n  children,\n  gap = 24,\n  gridTemplateColumns = ['1fr'],\n  gridTemplateRows,\n  gridTemplateAreas,\n  gridAutoFlow,\n  alignItems,\n  justifyItems,\n  justifyContent,\n  className,\n}: GridProps) {\n  const properties = setResponsiveCustomProperties({\n    gap,\n    'grid-template-columns': gridTemplateColumns,\n    'grid-template-rows': gridTemplateRows,\n    'grid-template-areas': gridTemplateAreas,\n    'grid-auto-flow': gridAutoFlow,\n    'align-items': alignItems,\n    'justify-items': justifyItems,\n    'justify-content': justifyContent,\n  })\n\n  return (\n    <div className={cn(styles.gridContainer, className)}>\n      <div className={styles.grid} style={properties}>\n        {children}\n      </div>\n    </div>\n  )\n}\n"],"names":["Grid","children","gap","gridTemplateColumns","gridTemplateRows","gridTemplateAreas","gridAutoFlow","alignItems","justifyItems","justifyContent","className","properties","setResponsiveCustomProperties","cn","styles","jsx"],"mappings":";;;;AA2BO,SAASA,EAAK;AAAA,EACnB,UAAAC;AAAA,EACA,KAAAC,IAAM;AAAA,EACN,qBAAAC,IAAsB,CAAC,KAAK;AAAA,EAC5B,kBAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,WAAAC;AACF,GAAc;AACZ,QAAMC,IAAaC,EAA8B;AAAA,IAC/C,KAAAV;AAAA,IACA,yBAAyBC;AAAA,IACzB,sBAAsBC;AAAA,IACtB,uBAAuBC;AAAA,IACvB,kBAAkBC;AAAA,IAClB,eAAeC;AAAA,IACf,iBAAiBC;AAAA,IACjB,mBAAmBC;AAAA,EAAA,CACpB;AAED,2BACG,OAAA,EAAI,WAAWI,EAAGC,EAAO,eAAeJ,CAAS,GAChD,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,MAAM,OAAOH,GACjC,UAAAV,GACH,GACF;AAEJ;"}

package/dist/components/Common/HorizontalFieldLayout/HorizontalFieldLayout.module.scss.js

@@ -1,20 +1,20 @@
-const i = "_root_yb31i_1", e = "_withoutVisibleLabel_yb31i_9", t = "_withOnlyChildren_yb31i_12", o = "_children_yb31i_18", l = "_label_yb31i_25", s = "_description_yb31i_36", r = "_errorMessage_yb31i_40", _ = {
+const i = "_root_1lhin_1", e = "_withoutVisibleLabel_1lhin_9", l = "_withOnlyChildren_1lhin_12", n = "_children_1lhin_18", t = "_label_1lhin_25", o = "_description_1lhin_36", s = "_errorMessage_1lhin_40", r = {
   root: i,
   withoutVisibleLabel: e,
-  withOnlyChildren: t,
-  children: o,
-  label: l,
-  description: s,
-  errorMessage: r
+  withOnlyChildren: l,
+  children: n,
+  label: t,
+  description: o,
+  errorMessage: s
 };
 export {
-  o as children,
-  _ as default,
-  s as description,
-  r as errorMessage,
-  l as label,
+  n as children,
+  r as default,
+  o as description,
+  s as errorMessage,
+  t as label,
   i as root,
-  t as withOnlyChildren,
+  l as withOnlyChildren,
   e as withoutVisibleLabel
 };
 //# sourceMappingURL=HorizontalFieldLayout.module.scss.js.map

package/dist/components/Common/InternalError/InternalError.module.scss.js

@@ -1,4 +1,4 @@
-const r = "_internalErrorCardTitle_e6ns3_1", e = "_internalErrorCard_e6ns3_1", n = "_errorMessage_e6ns3_19", a = {
+const r = "_internalErrorCardTitle_nf5ok_1", e = "_internalErrorCard_nf5ok_1", n = "_errorMessage_nf5ok_19", a = {
   internalErrorCardTitle: r,
   internalErrorCard: e,
   errorMessage: n

package/dist/components/Common/Loading/Loading.module.scss.js

@@ -1,4 +1,4 @@
-const e = "_skeletonContainer_1774j_1", o = "_skeleton_1774j_1", n = "_skeletonBox_1774j_15", t = {
+const e = "_skeletonContainer_q96wp_1", o = "_skeleton_q96wp_1", n = "_skeletonBox_q96wp_15", t = {
   skeletonContainer: e,
   skeleton: o,
   skeletonBox: n

package/dist/components/Common/PaginationControl/PaginationControl.module.scss.js

@@ -1,4 +1,4 @@
-const o = "_paginationControl_18z1t_1", n = "_paginationControlCount_18z1t_7", t = "_paginationControlButtons_18z1t_12", a = {
+const o = "_paginationControl_1g8dg_1", n = "_paginationControlCount_1g8dg_6", t = "_paginationControlButtons_1g8dg_11", a = {
   paginationControl: o,
   paginationControlCount: n,
   paginationControlButtons: t

package/dist/components/Common/ReorderableList/ReorderableList.module.scss.js

@@ -1,28 +1,28 @@
-const e = "_reorderableList_90xu1_1", o = "_disabled_90xu1_10", r = "_reorderableItem_90xu1_10", n = "_contentContainer_90xu1_16", t = "_dragging_90xu1_37", d = "_reordering_90xu1_40", _ = "_dragHandle_90xu1_45", i = "_dropZoneContainer_90xu1_71", a = "_dropZone_90xu1_71", s = "_isHighlighted_90xu1_89", g = "_activeDropZone_90xu1_89", c = {
+const e = "_reorderableList_q2syr_1", r = "_disabled_q2syr_10", o = "_reorderableItem_q2syr_10", n = "_contentContainer_q2syr_16", t = "_dragging_q2syr_37", s = "_reordering_q2syr_40", d = "_dragHandle_q2syr_45", _ = "_dropZoneContainer_q2syr_71", i = "_dropZone_q2syr_71", a = "_isHighlighted_q2syr_89", g = "_activeDropZone_q2syr_89", c = {
   reorderableList: e,
-  disabled: o,
-  reorderableItem: r,
+  disabled: r,
+  reorderableItem: o,
   contentContainer: n,
   dragging: t,
-  reordering: d,
-  dragHandle: _,
-  dropZoneContainer: i,
-  dropZone: a,
-  isHighlighted: s,
+  reordering: s,
+  dragHandle: d,
+  dropZoneContainer: _,
+  dropZone: i,
+  isHighlighted: a,
   activeDropZone: g
 };
 export {
   g as activeDropZone,
   n as contentContainer,
   c as default,
-  o as disabled,
-  _ as dragHandle,
+  r as disabled,
+  d as dragHandle,
   t as dragging,
-  a as dropZone,
-  i as dropZoneContainer,
-  s as isHighlighted,
-  r as reorderableItem,
+  i as dropZone,
+  _ as dropZoneContainer,
+  a as isHighlighted,
+  o as reorderableItem,
   e as reorderableList,
-  d as reordering
+  s as reordering
 };
 //# sourceMappingURL=ReorderableList.module.scss.js.map

package/dist/components/Common/RequirementsList/RequirementsList.module.scss.js

@@ -1,4 +1,4 @@
-const s = "_list_k1b3f_1", t = "_listItem_k1b3f_5", c = "_listItemIcon_k1b3f_22", e = "_success_k1b3f_35", _ = {
+const s = "_list_1m8z2_1", t = "_listItem_1m8z2_5", c = "_listItemIcon_1m8z2_22", e = "_success_1m8z2_35", _ = {
   list: s,
   listItem: t,
   listItemIcon: c,

package/dist/components/Common/SignatureForm/SignatureForm.js

@@ -5,8 +5,8 @@ import { zodResolver as l } from "@hookform/resolvers/zod";
 import t from "./SignatureForm.module.scss.js";
 import { Form as u } from "../Form/Form.js";
 import { Flex as c } from "../Flex/Flex.js";
+import "react-i18next";
 import "classnames";
-import "../../../shared/constants.js";
 const f = o.object({
   signature: o.string().min(1),
   confirmSignature: o.literal(!0)

package/dist/components/Common/SignatureForm/SignatureForm.module.scss.js

@@ -1,10 +1,10 @@
-const o = "_container_199qg_1", e = "_formFields_199qg_5", n = {
-  container: o,
-  formFields: e
+const t = "_container_1htg1_1", o = "_formFields_1htg1_5", e = {
+  container: t,
+  formFields: o
 };
 export {
-  o as container,
-  n as default,
-  e as formFields
+  t as container,
+  e as default,
+  o as formFields
 };
 //# sourceMappingURL=SignatureForm.module.scss.js.map

package/dist/components/Common/SignatureForm/SignatureFormActions.js

@@ -1,6 +1,6 @@
 import { jsxs as m, jsx as n } from "react/jsx-runtime";
+import "react-i18next";
 import "classnames";
-import "../../../shared/constants.js";
 import { ActionsLayout as s } from "../ActionsLayout/ActionsLayout.js";
 import { useComponentContext as p } from "../../../contexts/ComponentAdapter/useComponentContext.js";
 function d({

package/dist/components/Common/SignatureForm/SignatureFormFields.js

@@ -1,6 +1,6 @@
 import { jsxs as n, Fragment as s, jsx as e } from "react/jsx-runtime";
+import "react-i18next";
 import "classnames";
-import "../../../shared/constants.js";
 import { TextInputField as a } from "../Fields/TextInputField/TextInputField.js";
 import { CheckboxField as u } from "../Fields/CheckboxField/CheckboxField.js";
 function f({

package/dist/components/Common/UI/Alert/Alert.module.scss.js

@@ -1,4 +1,4 @@
-const t = "_root_1vxup_1", o = "_alert_1vxup_1", n = "_icon_1vxup_14", _ = "_content_1vxup_29", c = {
+const t = "_root_1pj1j_1", o = "_alert_1pj1j_1", n = "_icon_1pj1j_14", _ = "_content_1pj1j_29", c = {
   root: t,
   alert: o,
   icon: n,

package/dist/components/Common/UI/Badge/Badge.module.scss.js

@@ -1,4 +1,4 @@
-const e = "_badge_imm46_1", a = {
+const e = "_badge_1h2ej_1", a = {
   badge: e
 };
 export {

package/dist/components/Common/UI/Button/Button.module.scss.js

@@ -1,4 +1,4 @@
-const o = "_root_q0mct_1", t = {
+const o = "_root_kyosy_1", t = {
   root: o
 };
 export {

package/dist/components/Common/UI/Button/ButtonIcon.module.scss.js

@@ -1,4 +1,4 @@
-const o = "_root_zhhey_1", t = {
+const o = "_root_vi5i4_1", t = {
   root: o
 };
 export {

package/dist/components/Common/UI/CalendarPreview/CalendarPreview.module.scss.js

@@ -1,13 +1,13 @@
-const a = "_calendar_p8rau_1", r = "_calendarWrapper_p8rau_1", e = "_calendarHeader_p8rau_5", d = "_dateMarker_p8rau_44", c = {
+const a = "_calendar_1riep_1", e = "_calendarWrapper_1riep_1", r = "_calendarHeader_1riep_5", d = "_dateMarker_1riep_44", c = {
   calendar: a,
-  calendarWrapper: r,
-  calendarHeader: e,
+  calendarWrapper: e,
+  calendarHeader: r,
   dateMarker: d
 };
 export {
   a as calendar,
-  e as calendarHeader,
-  r as calendarWrapper,
+  r as calendarHeader,
+  e as calendarWrapper,
   d as dateMarker,
   c as default
 };

package/dist/components/Common/UI/Card/Card.module.scss.js

@@ -1,4 +1,4 @@
-const a = "_cardContainer_baj0w_1", n = {
+const a = "_cardContainer_17qsq_1", n = {
   cardContainer: a
 };
 export {

package/dist/components/Common/UI/Checkbox/Checkbox.module.scss.js

@@ -1,14 +1,14 @@
-const c = "_checkboxWrapper_topwn_1", o = "_checkbox_topwn_1", e = "_check_topwn_1", t = "_checkboxInput_topwn_29", p = {
+const c = "_checkboxWrapper_wiqs9_1", e = "_checkbox_wiqs9_1", o = "_check_wiqs9_1", h = "_checkboxInput_wiqs9_29", k = {
   checkboxWrapper: c,
-  checkbox: o,
-  check: e,
-  checkboxInput: t
+  checkbox: e,
+  check: o,
+  checkboxInput: h
 };
 export {
-  e as check,
-  o as checkbox,
-  t as checkboxInput,
+  o as check,
+  e as checkbox,
+  h as checkboxInput,
   c as checkboxWrapper,
-  p as default
+  k as default
 };
 //# sourceMappingURL=Checkbox.module.scss.js.map

package/dist/components/Common/UI/CheckboxGroup/CheckboxGroup.module.scss.js

@@ -1,4 +1,4 @@
-const o = "_root_1b3le_1", t = {
+const o = "_root_zsz14_1", t = {
   root: o
 };
 export {