@gusto/embedded-react-sdk 0.11.3 → 0.12.1

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/Base/Base.js

@@ -10,40 +10,39 @@ import { FadeIn as _ } from "../Common/FadeIn/FadeIn.js";
 import { BaseContext as j } from "./useBase.js";
 import { componentEvents as F } from "../../shared/constants.js";
 import { useAsyncError as K } from "../Common/hooks/useAsyncError.js";
-import "classnames";
 import { InternalError as P } from "../Common/InternalError/InternalError.js";
 import { snakeCaseToCamelCase as w } from "../../helpers/formattedStrings.js";
 import { useComponentContext as M } from "../../contexts/ComponentAdapter/useComponentContext.js";
 import { useLoadingIndicator as O } from "../../contexts/LoadingIndicatorProvider/useLoadingIndicator.js";
-const U = (t) => t.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.message }, n.key) : null), k = (t, n) => {
+const U = (e) => e.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.message }, n.key) : null), k = (e, n) => {
   const m = n ? n + "." : "";
-  if (t.category === "invalid_attribute_value" || t.category === "invalid_operation")
+  if (e.category === "invalid_attribute_value" || e.category === "invalid_operation")
     return [
       {
-        key: w(m + t.errorKey),
-        message: t.message ?? ""
+        key: w(m + e.errorKey),
+        message: e.message ?? ""
       }
     ];
-  if (t.category === "nested_errors" && t.errors !== void 0) {
+  if (e.category === "nested_errors" && e.errors !== void 0) {
     let s = "";
-    return t.metadata?.key && typeof t.metadata.key == "string" ? s = t.metadata.key : t.metadata?.state && typeof t.metadata.state == "string" ? s = t.metadata.state : t.errorKey && (s = t.errorKey), t.errors.flatMap((r) => k(r, m + s));
+    return e.metadata?.key && typeof e.metadata.key == "string" ? s = e.metadata.key : e.metadata?.state && typeof e.metadata.state == "string" ? s = e.metadata.state : e.errorKey && (s = e.errorKey), e.errors.flatMap((r) => k(r, m + s));
   }
   return [];
-}, ot = ({
-  children: t,
+}, re = ({
+  children: e,
   FallbackComponent: n = P,
   LoaderComponent: m,
   onEvent: s
 }) => {
-  const [r, l] = y(null), [c, f] = y(null), p = K(), { t: x } = B(), d = M(), { LoadingIndicator: b } = O(), v = m ?? b, I = E((e) => {
-    l(e), e || f(null);
-  }, []), A = (e) => {
-    l(e), e instanceof h && Array.isArray(e.errors) && f(e.errors.flatMap((a) => k(a)));
+  const [r, l] = y(null), [c, f] = y(null), p = K(), { t: x } = B(), d = M(), { LoadingIndicator: b } = O(), v = m ?? b, I = E((t) => {
+    l(t), t || f(null);
+  }, []), A = (t) => {
+    l(t), t instanceof h && Array.isArray(t.errors) && f(t.errors.flatMap((a) => k(a)));
   }, L = E(
-    async (e, a) => {
+    async (t, a) => {
       l(null), f(null);
       try {
-        await a(e);
+        await a(t);
       } catch (i) {
         i instanceof g || i instanceof C || i instanceof h ? A(i) : p(i);
       }
@@ -60,11 +59,11 @@ const U = (t) => t.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.
         throwError: p,
         baseSubmitHandler: L
       },
-      children: /* @__PURE__ */ o(T, { children: ({ reset: e }) => /* @__PURE__ */ u(
+      children: /* @__PURE__ */ o(T, { children: ({ reset: t }) => /* @__PURE__ */ u(
         S,
         {
           FallbackComponent: n,
-          onReset: e,
+          onReset: t,
           onError: (a) => {
             s(F.ERROR, a);
           },
@@ -74,7 +73,7 @@ const U = (t) => t.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.
               r && r instanceof g && /* @__PURE__ */ o(d.Text, { children: r.message }),
               r && r instanceof C && /* @__PURE__ */ o(d.Text, { as: "pre", children: r.pretty() })
             ] }),
-            /* @__PURE__ */ o(R, { fallback: /* @__PURE__ */ o(v, {}), children: /* @__PURE__ */ o(_, { children: t }) })
+            /* @__PURE__ */ o(R, { fallback: /* @__PURE__ */ o(v, {}), children: /* @__PURE__ */ o(_, { children: e }) })
           ]
         }
       ) })
@@ -82,6 +81,6 @@ const U = (t) => t.map((n) => n.message ? /* @__PURE__ */ o("li", { children: n.
   );
 };
 export {
-  ot as BaseComponent
+  re as BaseComponent
 };
 //# sourceMappingURL=Base.js.map

package/dist/components/Base/Base.js.map

@@ -1 +1 @@
-{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, JSX } from 'react'\nimport { Suspense, useState, useCallback } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type FieldError, type KnownErrors, type OnEventType } from './useBase'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError, useAsyncError } from '@/components/Common'\nimport { snakeCaseToCamelCase } from '@/helpers/formattedStrings'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { ResourceDictionary, Resources } from '@/types/Helpers'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\n\nexport interface CommonComponentInterface<TResourceKey extends keyof Resources = keyof Resources> {\n  children?: ReactNode\n  className?: string\n  defaultValues?: unknown\n  dictionary?: ResourceDictionary<TResourceKey>\n}\n\n// Base component wrapper with error and suspense handling\nexport interface BaseComponentInterface<TResourceKey extends keyof Resources = keyof Resources>\n  extends CommonComponentInterface<TResourceKey> {\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**Traverses errorList and finds items with message properties */\nconst renderErrorList = (errorList: FieldError[]): React.ReactNode[] => {\n  return errorList.map(errorFromList => {\n    if (errorFromList.message) {\n      return <li key={errorFromList.key}>{errorFromList.message}</li>\n    }\n    return null\n  })\n}\n/**Recuresively parses error list and constructs an array of objects containing attribute value error messages associated with form fields. Nested errors construct '.' separated keys\n * metadata.state is a special case for state taxes validation errors\n */\nconst getFieldErrors = (\n  error: EntityErrorObject,\n  parentKey?: string,\n): { key: string; message: string }[] => {\n  const keyPrefix = parentKey ? parentKey + '.' : ''\n  if (error.category === 'invalid_attribute_value' || error.category === 'invalid_operation') {\n    return [\n      {\n        key: snakeCaseToCamelCase(keyPrefix + error.errorKey),\n        message: error.message ?? '',\n      },\n    ]\n  }\n  if (error.category === 'nested_errors' && error.errors !== undefined) {\n    //TODO: clean this up once Metadata type is fixed in openapi spec\n    let keySuffix = ''\n    //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    if (error.metadata?.key && typeof error.metadata.key === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.key as string\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    } else if (error.metadata?.state && typeof error.metadata.state === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.state as string\n    } else if (error.errorKey) {\n      keySuffix = error.errorKey\n    }\n    return error.errors.flatMap(err => getFieldErrors(err, keyPrefix + keySuffix))\n  }\n  return []\n}\n\ntype SubmitHandler<T> = (data: T) => Promise<void>\n\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n}: BaseComponentInterface<TResourceKey>) => {\n  const [error, setError] = useState<KnownErrors | null>(null)\n  const [fieldErrors, setFieldErrors] = useState<FieldError[] | null>(null)\n  const throwError = useAsyncError()\n  const { t } = useTranslation()\n  const Components = useComponentContext()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  // Enhanced setError that also clears fieldErrors when error is cleared\n  const setErrorWithFieldsClear = useCallback((error: KnownErrors | null) => {\n    setError(error)\n    if (!error) {\n      setFieldErrors(null)\n    }\n  }, [])\n\n  const processError = (error: KnownErrors) => {\n    setError(error)\n    //422\tapplication/json - content relaited error\n    if (error instanceof UnprocessableEntityErrorObject && Array.isArray(error.errors)) {\n      setFieldErrors(error.errors.flatMap(err => getFieldErrors(err)))\n    }\n  }\n\n  const baseSubmitHandler = useCallback(\n    async <T,>(data: T, componentHandler: SubmitHandler<T>) => {\n      setError(null)\n      setFieldErrors(null)\n      try {\n        await componentHandler(data)\n      } catch (err) {\n        if (\n          err instanceof APIError ||\n          err instanceof SDKValidationError ||\n          err instanceof UnprocessableEntityErrorObject\n        ) {\n          processError(err)\n        } else throwError(err)\n      }\n    },\n    [setError, throwError],\n  )\n\n  return (\n    <BaseContext.Provider\n      value={{\n        fieldErrors,\n        setError: setErrorWithFieldsClear,\n        onEvent,\n        throwError,\n        baseSubmitHandler,\n      }}\n    >\n      <QueryErrorResetBoundary>\n        {({ reset: resetQueries }) => (\n          <ErrorBoundary\n            FallbackComponent={FallbackComponent}\n            onReset={resetQueries}\n            onError={err => {\n              onEvent(componentEvents.ERROR, err)\n            }}\n          >\n            {(error || fieldErrors) && (\n              <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n                {fieldErrors && <Components.UnorderedList items={renderErrorList(fieldErrors)} />}\n                {error && error instanceof APIError && (\n                  <Components.Text>{error.message}</Components.Text>\n                )}\n                {error && error instanceof SDKValidationError && (\n                  <Components.Text as=\"pre\">{error.pretty()}</Components.Text>\n                )}\n              </Components.Alert>\n            )}\n            <Suspense fallback={<LoaderComponent />}>\n              <FadeIn>{children}</FadeIn>\n            </Suspense>\n          </ErrorBoundary>\n        )}\n      </QueryErrorResetBoundary>\n    </BaseContext.Provider>\n  )\n}\n"],"names":["renderErrorList","errorList","errorFromList","jsx","getFieldErrors","error","parentKey","keyPrefix","snakeCaseToCamelCase","keySuffix","err","BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","setError","useState","fieldErrors","setFieldErrors","throwError","useAsyncError","t","useTranslation","Components","useComponentContext","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","setErrorWithFieldsClear","useCallback","processError","UnprocessableEntityErrorObject","baseSubmitHandler","data","componentHandler","APIError","SDKValidationError","BaseContext","QueryErrorResetBoundary","resetQueries","jsxs","ErrorBoundary","componentEvents","Suspense","FadeIn"],"mappings":";;;;;;;;;;;;;;;;;AAoCA,MAAMA,IAAkB,CAACC,MAChBA,EAAU,IAAI,CAAAC,MACfA,EAAc,UACT,gBAAAC,EAAC,MAAA,EAA4B,UAAAD,EAAc,QAAA,GAAlCA,EAAc,GAA4B,IAErD,IACR,GAKGE,IAAiB,CACrBC,GACAC,MACuC;AACvC,QAAMC,IAAYD,IAAYA,IAAY,MAAM;AAChD,MAAID,EAAM,aAAa,6BAA6BA,EAAM,aAAa;AACrE,WAAO;AAAA,MACL;AAAA,QACE,KAAKG,EAAqBD,IAAYF,EAAM,QAAQ;AAAA,QACpD,SAASA,EAAM,WAAW;AAAA,MAAA;AAAA,IAC5B;AAGJ,MAAIA,EAAM,aAAa,mBAAmBA,EAAM,WAAW,QAAW;AAEpE,QAAII,IAAY;AAEhB,WAAIJ,EAAM,UAAU,OAAO,OAAOA,EAAM,SAAS,OAAQ,WAEvDI,IAAYJ,EAAM,SAAS,MAElBA,EAAM,UAAU,SAAS,OAAOA,EAAM,SAAS,SAAU,WAElEI,IAAYJ,EAAM,SAAS,QAClBA,EAAM,aACfI,IAAYJ,EAAM,WAEbA,EAAM,OAAO,QAAQ,CAAAK,MAAON,EAAeM,GAAKH,IAAYE,CAAS,CAAC;AAAA,EAC/E;AACA,SAAO,CAAA;AACT,GAIaE,KAAgB,CAAyD;AAAA,EACpF,UAAAC;AAAA,EACA,mBAAAC,IAAoBC;AAAA,EACpB,iBAAiBC;AAAA,EACjB,SAAAC;AACF,MAA4C;AAC1C,QAAM,CAACX,GAAOY,CAAQ,IAAIC,EAA6B,IAAI,GACrD,CAACC,GAAaC,CAAc,IAAIF,EAA8B,IAAI,GAClEG,IAAaC,EAAA,GACb,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAaC,EAAA,GAEb,EAAE,kBAAkBC,EAAA,IAAgCC,EAAA,GAEpDC,IAAkBd,KAA6BY,GAG/CG,IAA0BC,EAAY,CAAC1B,MAA8B;AACzE,IAAAY,EAASZ,CAAK,GACTA,KACHe,EAAe,IAAI;AAAA,EAEvB,GAAG,CAAA,CAAE,GAECY,IAAe,CAAC3B,MAAuB;AAC3C,IAAAY,EAASZ,CAAK,GAEVA,aAAiB4B,KAAkC,MAAM,QAAQ5B,EAAM,MAAM,KAC/Ee,EAAef,EAAM,OAAO,QAAQ,OAAOD,EAAeM,CAAG,CAAC,CAAC;AAAA,EAEnE,GAEMwB,IAAoBH;AAAA,IACxB,OAAWI,GAASC,MAAuC;AACzD,MAAAnB,EAAS,IAAI,GACbG,EAAe,IAAI;AACnB,UAAI;AACF,cAAMgB,EAAiBD,CAAI;AAAA,MAC7B,SAASzB,GAAK;AACZ,QACEA,aAAe2B,KACf3B,aAAe4B,KACf5B,aAAeuB,IAEfD,EAAatB,CAAG,MACAA,CAAG;AAAA,MACvB;AAAA,IACF;AAAA,IACA,CAACO,GAAUI,CAAU;AAAA,EAAA;AAGvB,SACE,gBAAAlB;AAAA,IAACoC,EAAY;AAAA,IAAZ;AAAA,MACC,OAAO;AAAA,QACL,aAAApB;AAAA,QACA,UAAUW;AAAA,QACV,SAAAd;AAAA,QACA,YAAAK;AAAA,QACA,mBAAAa;AAAA,MAAA;AAAA,MAGF,4BAACM,GAAA,EACE,UAAA,CAAC,EAAE,OAAOC,QACT,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,mBAAA9B;AAAA,UACA,SAAS4B;AAAA,UACT,SAAS,CAAA/B,MAAO;AACd,YAAAM,EAAQ4B,EAAgB,OAAOlC,CAAG;AAAA,UACpC;AAAA,UAEE,UAAA;AAAA,aAAAL,KAASc,MACT,gBAAAuB,EAACjB,EAAW,OAAX,EAAiB,OAAOF,EAAE,yBAAyB,GAAG,QAAO,SAC3D,UAAA;AAAA,cAAAJ,uBAAgBM,EAAW,eAAX,EAAyB,OAAOzB,EAAgBmB,CAAW,GAAG;AAAA,cAC9Ed,KAASA,aAAiBgC,KACzB,gBAAAlC,EAACsB,EAAW,MAAX,EAAiB,YAAM,SAAQ;AAAA,cAEjCpB,KAASA,aAAiBiC,KACzB,gBAAAnC,EAACsB,EAAW,MAAX,EAAgB,IAAG,OAAO,UAAApB,EAAM,OAAA,EAAO,CAAE;AAAA,YAAA,GAE9C;AAAA,YAEF,gBAAAF,EAAC0C,KAAS,UAAU,gBAAA1C,EAAC0B,KAAgB,GACnC,UAAA,gBAAA1B,EAAC2C,GAAA,EAAQ,UAAAlC,EAAA,CAAS,EAAA,CACpB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EACF,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Base.js","sources":["../../../src/components/Base/Base.tsx"],"sourcesContent":["import type { ReactNode, JSX } from 'react'\nimport { Suspense, useState, useCallback } from 'react'\nimport type { FallbackProps } from 'react-error-boundary'\nimport { ErrorBoundary } from 'react-error-boundary'\nimport { useTranslation } from 'react-i18next'\nimport { APIError } from '@gusto/embedded-api/models/errors/apierror'\nimport { SDKValidationError } from '@gusto/embedded-api/models/errors/sdkvalidationerror'\nimport { UnprocessableEntityErrorObject } from '@gusto/embedded-api/models/errors/unprocessableentityerrorobject'\nimport type { EntityErrorObject } from '@gusto/embedded-api/models/components/entityerrorobject'\nimport { QueryErrorResetBoundary } from '@tanstack/react-query'\nimport { FadeIn } from '../Common/FadeIn/FadeIn'\nimport { BaseContext, type FieldError, type KnownErrors, type OnEventType } from './useBase'\nimport { componentEvents, type EventType } from '@/shared/constants'\nimport { InternalError, useAsyncError } from '@/components/Common'\nimport { snakeCaseToCamelCase } from '@/helpers/formattedStrings'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\nimport type { ResourceDictionary, Resources } from '@/types/Helpers'\nimport { useLoadingIndicator } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\nimport type { LoadingIndicatorContextProps } from '@/contexts/LoadingIndicatorProvider/useLoadingIndicator'\n\nexport interface CommonComponentInterface<TResourceKey extends keyof Resources = keyof Resources> {\n  children?: ReactNode\n  className?: string\n  defaultValues?: unknown\n  dictionary?: ResourceDictionary<TResourceKey>\n}\n\n// Base component wrapper with error and suspense handling\nexport interface BaseComponentInterface<TResourceKey extends keyof Resources = keyof Resources>\n  extends CommonComponentInterface<TResourceKey> {\n  FallbackComponent?: (props: FallbackProps) => JSX.Element\n  LoaderComponent?: LoadingIndicatorContextProps['LoadingIndicator']\n  onEvent: OnEventType<EventType, unknown>\n}\n\n/**Traverses errorList and finds items with message properties */\nconst renderErrorList = (errorList: FieldError[]): React.ReactNode[] => {\n  return errorList.map(errorFromList => {\n    if (errorFromList.message) {\n      return <li key={errorFromList.key}>{errorFromList.message}</li>\n    }\n    return null\n  })\n}\n/**Recuresively parses error list and constructs an array of objects containing attribute value error messages associated with form fields. Nested errors construct '.' separated keys\n * metadata.state is a special case for state taxes validation errors\n */\nconst getFieldErrors = (\n  error: EntityErrorObject,\n  parentKey?: string,\n): { key: string; message: string }[] => {\n  const keyPrefix = parentKey ? parentKey + '.' : ''\n  if (error.category === 'invalid_attribute_value' || error.category === 'invalid_operation') {\n    return [\n      {\n        key: snakeCaseToCamelCase(keyPrefix + error.errorKey),\n        message: error.message ?? '',\n      },\n    ]\n  }\n  if (error.category === 'nested_errors' && error.errors !== undefined) {\n    //TODO: clean this up once Metadata type is fixed in openapi spec\n    let keySuffix = ''\n    //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    if (error.metadata?.key && typeof error.metadata.key === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.key as string\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n    } else if (error.metadata?.state && typeof error.metadata.state === 'string') {\n      //@ts-expect-error: Metadata in speakeasy is incorrectly typed\n      keySuffix = error.metadata.state as string\n    } else if (error.errorKey) {\n      keySuffix = error.errorKey\n    }\n    return error.errors.flatMap(err => getFieldErrors(err, keyPrefix + keySuffix))\n  }\n  return []\n}\n\ntype SubmitHandler<T> = (data: T) => Promise<void>\n\nexport const BaseComponent = <TResourceKey extends keyof Resources = keyof Resources>({\n  children,\n  FallbackComponent = InternalError,\n  LoaderComponent: LoadingIndicatorFromProps,\n  onEvent,\n}: BaseComponentInterface<TResourceKey>) => {\n  const [error, setError] = useState<KnownErrors | null>(null)\n  const [fieldErrors, setFieldErrors] = useState<FieldError[] | null>(null)\n  const throwError = useAsyncError()\n  const { t } = useTranslation()\n  const Components = useComponentContext()\n\n  const { LoadingIndicator: LoadingIndicatorFromContext } = useLoadingIndicator()\n\n  const LoaderComponent = LoadingIndicatorFromProps ?? LoadingIndicatorFromContext\n\n  // Enhanced setError that also clears fieldErrors when error is cleared\n  const setErrorWithFieldsClear = useCallback((error: KnownErrors | null) => {\n    setError(error)\n    if (!error) {\n      setFieldErrors(null)\n    }\n  }, [])\n\n  const processError = (error: KnownErrors) => {\n    setError(error)\n    //422\tapplication/json - content relaited error\n    if (error instanceof UnprocessableEntityErrorObject && Array.isArray(error.errors)) {\n      setFieldErrors(error.errors.flatMap(err => getFieldErrors(err)))\n    }\n  }\n\n  const baseSubmitHandler = useCallback(\n    async <T,>(data: T, componentHandler: SubmitHandler<T>) => {\n      setError(null)\n      setFieldErrors(null)\n      try {\n        await componentHandler(data)\n      } catch (err) {\n        if (\n          err instanceof APIError ||\n          err instanceof SDKValidationError ||\n          err instanceof UnprocessableEntityErrorObject\n        ) {\n          processError(err)\n        } else throwError(err)\n      }\n    },\n    [setError, throwError],\n  )\n\n  return (\n    <BaseContext.Provider\n      value={{\n        fieldErrors,\n        setError: setErrorWithFieldsClear,\n        onEvent,\n        throwError,\n        baseSubmitHandler,\n      }}\n    >\n      <QueryErrorResetBoundary>\n        {({ reset: resetQueries }) => (\n          <ErrorBoundary\n            FallbackComponent={FallbackComponent}\n            onReset={resetQueries}\n            onError={err => {\n              onEvent(componentEvents.ERROR, err)\n            }}\n          >\n            {(error || fieldErrors) && (\n              <Components.Alert label={t('status.errorEncountered')} status=\"error\">\n                {fieldErrors && <Components.UnorderedList items={renderErrorList(fieldErrors)} />}\n                {error && error instanceof APIError && (\n                  <Components.Text>{error.message}</Components.Text>\n                )}\n                {error && error instanceof SDKValidationError && (\n                  <Components.Text as=\"pre\">{error.pretty()}</Components.Text>\n                )}\n              </Components.Alert>\n            )}\n            <Suspense fallback={<LoaderComponent />}>\n              <FadeIn>{children}</FadeIn>\n            </Suspense>\n          </ErrorBoundary>\n        )}\n      </QueryErrorResetBoundary>\n    </BaseContext.Provider>\n  )\n}\n"],"names":["renderErrorList","errorList","errorFromList","jsx","getFieldErrors","error","parentKey","keyPrefix","snakeCaseToCamelCase","keySuffix","err","BaseComponent","children","FallbackComponent","InternalError","LoadingIndicatorFromProps","onEvent","setError","useState","fieldErrors","setFieldErrors","throwError","useAsyncError","t","useTranslation","Components","useComponentContext","LoadingIndicatorFromContext","useLoadingIndicator","LoaderComponent","setErrorWithFieldsClear","useCallback","processError","UnprocessableEntityErrorObject","baseSubmitHandler","data","componentHandler","APIError","SDKValidationError","BaseContext","QueryErrorResetBoundary","resetQueries","jsxs","ErrorBoundary","componentEvents","Suspense","FadeIn"],"mappings":"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"}

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