@gusto/embedded-react-sdk 0.17.0 → 0.18.0

package/dist/components/Common/UI/Dialog/Dialog.js

@@ -1,84 +1,58 @@
-import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import { useRef as s, useState as B, useLayoutEffect as E } from "react";
-import { Button as g } from "../Button/Button.js";
-import { Grid as P } from "../../Grid/Grid.js";
-import { DialogDefaults as R } from "./DialogTypes.js";
-import r from "./Dialog.module.scss.js";
-import { applyMissingDefaults as j } from "../../../../helpers/applyMissingDefaults.js";
-import { useContainerBreakpoints as K } from "../../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
-import { transitionDuration as M } from "../../../../contexts/ThemeProvider/theme.js";
-function Q(h) {
-  const k = j(h, R), {
-    isOpen: n,
-    onClose: t,
-    onPrimaryActionClick: a,
-    isDestructive: y,
-    isPrimaryActionLoading: C,
-    primaryActionLabel: v,
-    closeActionLabel: b,
-    title: l,
-    children: c,
-    shouldCloseOnBackdropClick: A
-  } = k, m = s(null), d = s(null), D = K({
-    ref: d
-  }), [x, u] = B(!1), i = s(null), N = D.includes("small") ? ["1fr", "1fr"] : "1fr";
-  E(() => {
-    const e = m.current;
-    if (e)
-      return i.current && clearTimeout(i.current), n && !e.open ? (e.showModal(), requestAnimationFrame(() => {
-        e.setAttribute("data-show", "true");
-      })) : !n && e.open && (u(!0), i.current = setTimeout(() => {
-        e.close(), e.removeAttribute("data-show"), u(!1);
-      }, M)), () => {
-        i.current && clearTimeout(i.current);
-      };
-  }, [n]);
-  const T = (e) => {
-    e.target === e.currentTarget && A && t?.();
-  }, w = (e) => {
-    e.key === "Escape" && t?.();
-  }, f = () => {
-    t && t();
-  }, L = () => {
-    a && a();
-  };
+import { jsx as o, jsxs as l, Fragment as D } from "react/jsx-runtime";
+import { useRef as x } from "react";
+import { Button as a } from "../Button/Button.js";
+import { Grid as L } from "../../Grid/Grid.js";
+import { DialogDefaults as P } from "./DialogTypes.js";
+import i from "./Dialog.module.scss.js";
+import { applyMissingDefaults as B } from "../../../../helpers/applyMissingDefaults.js";
+import { useContainerBreakpoints as N } from "../../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import { useComponentContext as R } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+function H(c) {
+  const m = B(c, P), {
+    isOpen: d,
+    onClose: r,
+    onPrimaryActionClick: n,
+    isDestructive: p,
+    isPrimaryActionLoading: f,
+    primaryActionLabel: C,
+    closeActionLabel: u,
+    title: t,
+    children: e,
+    shouldCloseOnBackdropClick: g
+  } = m, h = R(), s = x(null), y = N({
+    ref: s
+  }).includes("small") ? ["1fr", "1fr"] : "1fr", k = () => {
+    r && r();
+  }, v = () => {
+    n && n();
+  }, b = /* @__PURE__ */ l(D, { children: [
+    t && /* @__PURE__ */ o("div", { className: i.title, children: t }),
+    e && /* @__PURE__ */ o("div", { className: i.body, children: e })
+  ] }), A = /* @__PURE__ */ l(L, { gridTemplateColumns: y, gap: 12, className: i.actions, children: [
+    /* @__PURE__ */ o(a, { variant: "secondary", onClick: k, children: u }),
+    /* @__PURE__ */ o(
+      a,
+      {
+        variant: p ? "error" : "primary",
+        onClick: v,
+        isLoading: f,
+        children: C
+      }
+    )
+  ] });
   return /* @__PURE__ */ o(
-    "dialog",
+    h.Modal,
     {
-      ref: m,
-      className: r.dialog,
-      onClose: f,
-      "data-exiting": x || void 0,
-      children: /* @__PURE__ */ o(
-        "div",
-        {
-          ref: d,
-          className: r.backdrop,
-          onClick: T,
-          onKeyDown: w,
-          role: "presentation",
-          children: /* @__PURE__ */ p("div", { className: r.content, children: [
-            l && /* @__PURE__ */ o("div", { className: r.title, children: l }),
-            c && /* @__PURE__ */ o("div", { className: r.body, children: c }),
-            /* @__PURE__ */ p(P, { gridTemplateColumns: N, gap: 12, className: r.actions, children: [
-              /* @__PURE__ */ o(g, { variant: "secondary", onClick: f, children: b }),
-              /* @__PURE__ */ o(
-                g,
-                {
-                  variant: y ? "error" : "primary",
-                  onClick: L,
-                  isLoading: C,
-                  children: v
-                }
-              )
-            ] })
-          ] })
-        }
-      )
+      isOpen: d,
+      onClose: r,
+      shouldCloseOnBackdropClick: g,
+      containerRef: s,
+      footer: A,
+      children: b
     }
   );
 }
 export {
-  Q as Dialog
+  H as Dialog
 };
 //# sourceMappingURL=Dialog.js.map

package/dist/components/Common/UI/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sources":["../../../../../src/components/Common/UI/Dialog/Dialog.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react'\nimport { Button } from '../Button/Button'\nimport { Grid } from '../../Grid/Grid'\nimport { type DialogProps, DialogDefaults } from './DialogTypes'\nimport styles from './Dialog.module.scss'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\nimport { useContainerBreakpoints } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport { transitionDuration } from '@/contexts/ThemeProvider/theme'\n\nexport function Dialog(rawProps: DialogProps) {\n  const resolvedProps = applyMissingDefaults(rawProps, DialogDefaults)\n  const {\n    isOpen,\n    onClose,\n    onPrimaryActionClick,\n    isDestructive,\n    isPrimaryActionLoading,\n    primaryActionLabel,\n    closeActionLabel,\n    title,\n    children,\n    shouldCloseOnBackdropClick,\n  } = resolvedProps\n\n  const dialogRef = useRef<HTMLDialogElement>(null)\n  const backdropRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: backdropRef,\n  })\n\n  const [isExiting, setIsExiting] = useState(false)\n  const transitionTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n  const gridColumns = breakpoints.includes('small') ? ['1fr', '1fr'] : '1fr'\n\n  useLayoutEffect(() => {\n    const dialog = dialogRef.current\n    if (!dialog) return\n\n    if (transitionTimeoutRef.current) {\n      clearTimeout(transitionTimeoutRef.current)\n    }\n\n    if (isOpen && !dialog.open) {\n      dialog.showModal()\n      requestAnimationFrame(() => {\n        dialog.setAttribute('data-show', 'true')\n      })\n    } else if (!isOpen && dialog.open) {\n      setIsExiting(true)\n      transitionTimeoutRef.current = setTimeout(() => {\n        dialog.close()\n        dialog.removeAttribute('data-show')\n        setIsExiting(false)\n      }, transitionDuration)\n    }\n\n    return () => {\n      if (transitionTimeoutRef.current) {\n        clearTimeout(transitionTimeoutRef.current)\n      }\n    }\n  }, [isOpen])\n\n  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.target === event.currentTarget && shouldCloseOnBackdropClick) {\n      onClose?.()\n    }\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape') {\n      onClose?.()\n    }\n  }\n\n  const handleClose = () => {\n    if (onClose) {\n      onClose()\n    }\n  }\n\n  const handlePrimaryAction = () => {\n    if (onPrimaryActionClick) {\n      onPrimaryActionClick()\n    }\n  }\n\n  return (\n    <dialog\n      ref={dialogRef}\n      className={styles.dialog}\n      onClose={handleClose}\n      data-exiting={isExiting || undefined}\n    >\n      <div\n        ref={backdropRef}\n        className={styles.backdrop}\n        onClick={handleBackdropClick}\n        onKeyDown={handleKeyDown}\n        role=\"presentation\"\n      >\n        <div className={styles.content}>\n          {title && <div className={styles.title}>{title}</div>}\n          {children && <div className={styles.body}>{children}</div>}\n          <Grid gridTemplateColumns={gridColumns} gap={12} className={styles.actions}>\n            <Button variant=\"secondary\" onClick={handleClose}>\n              {closeActionLabel}\n            </Button>\n            <Button\n              variant={isDestructive ? 'error' : 'primary'}\n              onClick={handlePrimaryAction}\n              isLoading={isPrimaryActionLoading}\n            >\n              {primaryActionLabel}\n            </Button>\n          </Grid>\n        </div>\n      </div>\n    </dialog>\n  )\n}\n"],"names":["Dialog","rawProps","resolvedProps","applyMissingDefaults","DialogDefaults","isOpen","onClose","onPrimaryActionClick","isDestructive","isPrimaryActionLoading","primaryActionLabel","closeActionLabel","title","children","shouldCloseOnBackdropClick","dialogRef","useRef","backdropRef","breakpoints","useContainerBreakpoints","isExiting","setIsExiting","useState","transitionTimeoutRef","gridColumns","useLayoutEffect","dialog","transitionDuration","handleBackdropClick","event","handleKeyDown","handleClose","handlePrimaryAction","jsx","styles","jsxs","Grid","Button"],"mappings":";;;;;;;;;AASO,SAASA,EAAOC,GAAuB;AAC5C,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAc,GAC7D;AAAA,IACJ,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,4BAAAC;AAAA,EAAA,IACEZ,GAEEa,IAAYC,EAA0B,IAAI,GAC1CC,IAAcD,EAAuB,IAAI,GACzCE,IAAcC,EAAwB;AAAA,IAC1C,KAAKF;AAAA,EAAA,CACN,GAEK,CAACG,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAuBP,EAA8B,IAAI,GACzDQ,IAAcN,EAAY,SAAS,OAAO,IAAI,CAAC,OAAO,KAAK,IAAI;AAErE,EAAAO,EAAgB,MAAM;AACpB,UAAMC,IAASX,EAAU;AACzB,QAAKW;AAEL,aAAIH,EAAqB,WACvB,aAAaA,EAAqB,OAAO,GAGvClB,KAAU,CAACqB,EAAO,QACpBA,EAAO,UAAA,GACP,sBAAsB,MAAM;AAC1B,QAAAA,EAAO,aAAa,aAAa,MAAM;AAAA,MACzC,CAAC,KACQ,CAACrB,KAAUqB,EAAO,SAC3BL,EAAa,EAAI,GACjBE,EAAqB,UAAU,WAAW,MAAM;AAC9C,QAAAG,EAAO,MAAA,GACPA,EAAO,gBAAgB,WAAW,GAClCL,EAAa,EAAK;AAAA,MACpB,GAAGM,CAAkB,IAGhB,MAAM;AACX,QAAIJ,EAAqB,WACvB,aAAaA,EAAqB,OAAO;AAAA,MAE7C;AAAA,EACF,GAAG,CAAClB,CAAM,CAAC;AAEX,QAAMuB,IAAsB,CAACC,MAA4C;AACvE,IAAIA,EAAM,WAAWA,EAAM,iBAAiBf,KAC1CR,IAAA;AAAA,EAEJ,GAEMwB,IAAgB,CAACD,MAA+C;AACpE,IAAIA,EAAM,QAAQ,YAChBvB,IAAA;AAAA,EAEJ,GAEMyB,IAAc,MAAM;AACxB,IAAIzB,KACFA,EAAA;AAAA,EAEJ,GAEM0B,IAAsB,MAAM;AAChC,IAAIzB,KACFA,EAAA;AAAA,EAEJ;AAEA,SACE,gBAAA0B;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKlB;AAAA,MACL,WAAWmB,EAAO;AAAA,MAClB,SAASH;AAAA,MACT,gBAAcX,KAAa;AAAA,MAE3B,UAAA,gBAAAa;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKhB;AAAA,UACL,WAAWiB,EAAO;AAAA,UAClB,SAASN;AAAA,UACT,WAAWE;AAAA,UACX,MAAK;AAAA,UAEL,UAAA,gBAAAK,EAAC,OAAA,EAAI,WAAWD,EAAO,SACpB,UAAA;AAAA,YAAAtB,KAAS,gBAAAqB,EAAC,OAAA,EAAI,WAAWC,EAAO,OAAQ,UAAAtB,GAAM;AAAA,YAC9CC,KAAY,gBAAAoB,EAAC,OAAA,EAAI,WAAWC,EAAO,MAAO,UAAArB,GAAS;AAAA,YACpD,gBAAAsB,EAACC,KAAK,qBAAqBZ,GAAa,KAAK,IAAI,WAAWU,EAAO,SACjE,UAAA;AAAA,cAAA,gBAAAD,EAACI,GAAA,EAAO,SAAQ,aAAY,SAASN,GAClC,UAAApB,GACH;AAAA,cACA,gBAAAsB;AAAA,gBAACI;AAAA,gBAAA;AAAA,kBACC,SAAS7B,IAAgB,UAAU;AAAA,kBACnC,SAASwB;AAAA,kBACT,WAAWvB;AAAA,kBAEV,UAAAC;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,EAAA,CACF;AAAA,UAAA,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"Dialog.js","sources":["../../../../../src/components/Common/UI/Dialog/Dialog.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport { Button } from '../Button/Button'\nimport { Grid } from '../../Grid/Grid'\nimport { type DialogProps, DialogDefaults } from './DialogTypes'\nimport styles from './Dialog.module.scss'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\nimport { useContainerBreakpoints } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport function Dialog(rawProps: DialogProps) {\n  const resolvedProps = applyMissingDefaults(rawProps, DialogDefaults)\n  const {\n    isOpen,\n    onClose,\n    onPrimaryActionClick,\n    isDestructive,\n    isPrimaryActionLoading,\n    primaryActionLabel,\n    closeActionLabel,\n    title,\n    children,\n    shouldCloseOnBackdropClick,\n  } = resolvedProps\n\n  const Components = useComponentContext()\n\n  const modalContainerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({\n    ref: modalContainerRef,\n  })\n\n  const gridColumns = breakpoints.includes('small') ? ['1fr', '1fr'] : '1fr'\n\n  const handleClose = () => {\n    if (onClose) {\n      onClose()\n    }\n  }\n\n  const handlePrimaryAction = () => {\n    if (onPrimaryActionClick) {\n      onPrimaryActionClick()\n    }\n  }\n\n  const dialogContent = (\n    <>\n      {title && <div className={styles.title}>{title}</div>}\n      {children && <div className={styles.body}>{children}</div>}\n    </>\n  )\n\n  const dialogFooter = (\n    <Grid gridTemplateColumns={gridColumns} gap={12} className={styles.actions}>\n      <Button variant=\"secondary\" onClick={handleClose}>\n        {closeActionLabel}\n      </Button>\n      <Button\n        variant={isDestructive ? 'error' : 'primary'}\n        onClick={handlePrimaryAction}\n        isLoading={isPrimaryActionLoading}\n      >\n        {primaryActionLabel}\n      </Button>\n    </Grid>\n  )\n\n  return (\n    <Components.Modal\n      isOpen={isOpen}\n      onClose={onClose}\n      shouldCloseOnBackdropClick={shouldCloseOnBackdropClick}\n      containerRef={modalContainerRef}\n      footer={dialogFooter}\n    >\n      {dialogContent}\n    </Components.Modal>\n  )\n}\n"],"names":["Dialog","rawProps","resolvedProps","applyMissingDefaults","DialogDefaults","isOpen","onClose","onPrimaryActionClick","isDestructive","isPrimaryActionLoading","primaryActionLabel","closeActionLabel","title","children","shouldCloseOnBackdropClick","Components","useComponentContext","modalContainerRef","useRef","gridColumns","useContainerBreakpoints","handleClose","handlePrimaryAction","dialogContent","jsxs","Fragment","jsx","styles","dialogFooter","Grid","Button"],"mappings":";;;;;;;;;AASO,SAASA,EAAOC,GAAuB;AAC5C,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAc,GAC7D;AAAA,IACJ,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,4BAAAC;AAAA,EAAA,IACEZ,GAEEa,IAAaC,EAAA,GAEbC,IAAoBC,EAAuB,IAAI,GAK/CC,IAJcC,EAAwB;AAAA,IAC1C,KAAKH;AAAA,EAAA,CACN,EAE+B,SAAS,OAAO,IAAI,CAAC,OAAO,KAAK,IAAI,OAE/DI,IAAc,MAAM;AACxB,IAAIf,KACFA,EAAA;AAAA,EAEJ,GAEMgB,IAAsB,MAAM;AAChC,IAAIf,KACFA,EAAA;AAAA,EAEJ,GAEMgB,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,KAAS,gBAAAc,EAAC,OAAA,EAAI,WAAWC,EAAO,OAAQ,UAAAf,GAAM;AAAA,IAC9CC,KAAY,gBAAAa,EAAC,OAAA,EAAI,WAAWC,EAAO,MAAO,UAAAd,EAAA,CAAS;AAAA,EAAA,GACtD,GAGIe,sBACHC,GAAA,EAAK,qBAAqBV,GAAa,KAAK,IAAI,WAAWQ,EAAO,SACjE,UAAA;AAAA,IAAA,gBAAAD,EAACI,GAAA,EAAO,SAAQ,aAAY,SAAST,GAClC,UAAAV,GACH;AAAA,IACA,gBAAAe;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,SAAStB,IAAgB,UAAU;AAAA,QACnC,SAASc;AAAA,QACT,WAAWb;AAAA,QAEV,UAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EACH,GACF;AAGF,SACE,gBAAAgB;AAAA,IAACX,EAAW;AAAA,IAAX;AAAA,MACC,QAAAV;AAAA,MACA,SAAAC;AAAA,MACA,4BAAAQ;AAAA,MACA,cAAcG;AAAA,MACd,QAAQW;AAAA,MAEP,UAAAL;AAAA,IAAA;AAAA,EAAA;AAGP;"}

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

@@ -1,18 +1,12 @@
-const t = "_dialog_kvl1b_1", o = "_backdrop_kvl1b_21", _ = "_content_kvl1b_31", c = "_title_kvl1b_57", n = "_body_kvl1b_65", l = "_actions_kvl1b_71", s = {
-  dialog: t,
-  backdrop: o,
-  content: _,
-  title: c,
-  body: n,
-  actions: l
+const t = "_title_1geio_1", o = "_body_1geio_10", s = "_actions_1geio_16", e = {
+  title: t,
+  body: o,
+  actions: s
 };
 export {
-  l as actions,
-  o as backdrop,
-  n as body,
-  _ as content,
-  s as default,
-  t as dialog,
-  c as title
+  s as actions,
+  o as body,
+  e as default,
+  t as title
 };
 //# sourceMappingURL=Dialog.module.scss.js.map

package/dist/components/Common/UI/Dialog/Dialog.module.scss.js.map

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

package/dist/components/Common/UI/Link/LinkTypes.d.ts

@@ -1,4 +1,4 @@
-import { AnchorHTMLAttributes } from 'react';
+import { AnchorHTMLAttributes, ReactNode } from 'react';
 export type LinkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 
 /**
  * URL that the link points to
@@ -16,10 +16,6 @@ export type LinkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>,
  * Indicates that the link is for downloading a resource
  */
  | 'download'
-/**
- * Content to be displayed inside the link
- */
- | 'children'
 /**
  * Additional CSS class name
  */
@@ -51,4 +47,9 @@ export type LinkProps = Pick<AnchorHTMLAttributes<HTMLAnchorElement>,
 /**
  * Title text shown on hover
  */
- | 'title'>;
+ | 'title'> & {
+    /**
+     * Content to be displayed inside the link
+     */
+    children?: ReactNode;
+};

package/dist/components/Common/UI/Modal/Modal.d.ts

@@ -0,0 +1,2 @@
+import { ModalProps } from './ModalTypes';
+export declare function Modal(rawProps: ModalProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/UI/Modal/Modal.js

@@ -0,0 +1,90 @@
+import { jsx as n, jsxs as N } from "react/jsx-runtime";
+import { useRef as s, useState as O, useLayoutEffect as S } from "react";
+import i from "classnames";
+import { ModalDefaults as T } from "./ModalTypes.js";
+import o from "./Modal.module.scss.js";
+import { applyMissingDefaults as B } from "../../../../helpers/applyMissingDefaults.js";
+import { useContainerBreakpoints as E } from "../../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import { useOverflowDetection as M } from "../../../../hooks/useOverflowDetection/useOverflowDetection.js";
+import { useForkRef as A } from "../../../../hooks/useForkRef/useForkRef.js";
+import { transitionDuration as F } from "../../../../contexts/ThemeProvider/theme.js";
+function Q(g) {
+  const h = B(g, T), { isOpen: l, onClose: t, shouldCloseOnBackdropClick: v, children: c, footer: f, containerRef: C } = h, m = s(null), d = s(null), u = s(null), b = A(d, C), w = E({
+    ref: d
+  }), a = M({
+    ref: u
+  }), [R, p] = O(!1), r = s(null), k = w.includes("small");
+  S(() => {
+    const e = m.current;
+    if (e)
+      return r.current && clearTimeout(r.current), l && !e.open ? (e.showModal(), requestAnimationFrame(() => {
+        e.setAttribute("data-show", "true");
+      })) : !l && e.open && (p(!0), r.current = setTimeout(() => {
+        e.close(), e.removeAttribute("data-show"), p(!1);
+      }, F)), () => {
+        r.current && clearTimeout(r.current);
+      };
+  }, [l]);
+  const x = (e) => {
+    e.target === e.currentTarget && v && t?.();
+  }, y = (e) => {
+    e.key === "Escape" && t?.();
+  }, D = () => {
+    t && t();
+  };
+  return /* @__PURE__ */ n(
+    "dialog",
+    {
+      ref: m,
+      className: o.dialog,
+      onClose: D,
+      "data-exiting": R || void 0,
+      children: /* @__PURE__ */ n(
+        "div",
+        {
+          ref: b,
+          className: i(o.backdrop, {
+            [o.backdropSmall]: k
+          }),
+          onClick: x,
+          onKeyDown: y,
+          role: "presentation",
+          children: /* @__PURE__ */ N(
+            "div",
+            {
+              ref: u,
+              className: i(o.modal, {
+                [o.modalSmall]: k,
+                [o.modalOverflowing]: a
+              }),
+              children: [
+                c && /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: i(o.content, {
+                      [o.contentScrollable]: a
+                    }),
+                    children: c
+                  }
+                ),
+                f && /* @__PURE__ */ n(
+                  "div",
+                  {
+                    className: i(o.footer, {
+                      [o.footerFixed]: a
+                    }),
+                    children: f
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  Q as Modal
+};
+//# sourceMappingURL=Modal.js.map

package/dist/components/Common/UI/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../../../src/components/Common/UI/Modal/Modal.tsx"],"sourcesContent":["import { useLayoutEffect, useRef, useState } from 'react'\nimport classNames from 'classnames'\nimport { type ModalProps, ModalDefaults } from './ModalTypes'\nimport styles from './Modal.module.scss'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\nimport { useContainerBreakpoints } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport { useOverflowDetection } from '@/hooks/useOverflowDetection/useOverflowDetection'\nimport { useForkRef } from '@/hooks/useForkRef/useForkRef'\nimport { transitionDuration } from '@/contexts/ThemeProvider/theme'\n\nexport function Modal(rawProps: ModalProps) {\n  const resolvedProps = applyMissingDefaults(rawProps, ModalDefaults)\n  const { isOpen, onClose, shouldCloseOnBackdropClick, children, footer, containerRef } =\n    resolvedProps\n\n  const dialogRef = useRef<HTMLDialogElement>(null)\n  const internalBackdropRef = useRef<HTMLDivElement>(null)\n  const modalRef = useRef<HTMLDivElement>(null)\n\n  // Use callback ref to sync both internal and external refs\n  const backdropCallbackRef = useForkRef(internalBackdropRef, containerRef)\n\n  const breakpoints = useContainerBreakpoints({\n    ref: internalBackdropRef,\n  })\n\n  const isOverflowing = useOverflowDetection({\n    ref: modalRef,\n  })\n\n  const [isExiting, setIsExiting] = useState(false)\n  const transitionTimeoutRef = useRef<NodeJS.Timeout | null>(null)\n  const isSmallOrLarger = breakpoints.includes('small')\n\n  useLayoutEffect(() => {\n    const dialog = dialogRef.current\n    if (!dialog) return\n\n    if (transitionTimeoutRef.current) {\n      clearTimeout(transitionTimeoutRef.current)\n    }\n\n    if (isOpen && !dialog.open) {\n      dialog.showModal()\n      requestAnimationFrame(() => {\n        dialog.setAttribute('data-show', 'true')\n      })\n    } else if (!isOpen && dialog.open) {\n      setIsExiting(true)\n      transitionTimeoutRef.current = setTimeout(() => {\n        dialog.close()\n        dialog.removeAttribute('data-show')\n        setIsExiting(false)\n      }, transitionDuration)\n    }\n\n    return () => {\n      if (transitionTimeoutRef.current) {\n        clearTimeout(transitionTimeoutRef.current)\n      }\n    }\n  }, [isOpen])\n\n  const handleBackdropClick = (event: React.MouseEvent<HTMLDivElement>) => {\n    if (event.target === event.currentTarget && shouldCloseOnBackdropClick) {\n      onClose?.()\n    }\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    if (event.key === 'Escape') {\n      onClose?.()\n    }\n  }\n\n  const handleClose = () => {\n    if (onClose) {\n      onClose()\n    }\n  }\n\n  return (\n    <dialog\n      ref={dialogRef}\n      className={styles.dialog}\n      onClose={handleClose}\n      data-exiting={isExiting || undefined}\n    >\n      <div\n        ref={backdropCallbackRef}\n        className={classNames(styles.backdrop, {\n          [styles.backdropSmall as string]: isSmallOrLarger,\n        })}\n        onClick={handleBackdropClick}\n        onKeyDown={handleKeyDown}\n        role=\"presentation\"\n      >\n        <div\n          ref={modalRef}\n          className={classNames(styles.modal, {\n            [styles.modalSmall as string]: isSmallOrLarger,\n            [styles.modalOverflowing as string]: isOverflowing,\n          })}\n        >\n          {children && (\n            <div\n              className={classNames(styles.content, {\n                [styles.contentScrollable as string]: isOverflowing,\n              })}\n            >\n              {children}\n            </div>\n          )}\n          {footer && (\n            <div\n              className={classNames(styles.footer, {\n                [styles.footerFixed as string]: isOverflowing,\n              })}\n            >\n              {footer}\n            </div>\n          )}\n        </div>\n      </div>\n    </dialog>\n  )\n}\n"],"names":["Modal","rawProps","resolvedProps","applyMissingDefaults","ModalDefaults","isOpen","onClose","shouldCloseOnBackdropClick","children","footer","containerRef","dialogRef","useRef","internalBackdropRef","modalRef","backdropCallbackRef","useForkRef","breakpoints","useContainerBreakpoints","isOverflowing","useOverflowDetection","isExiting","setIsExiting","useState","transitionTimeoutRef","isSmallOrLarger","useLayoutEffect","dialog","transitionDuration","handleBackdropClick","event","handleKeyDown","handleClose","jsx","styles","classNames","jsxs"],"mappings":"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"}

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

@@ -0,0 +1,26 @@
+const o = "_dialog_6vred_1", l = "_backdrop_6vred_21", e = "_backdropSmall_6vred_31", d = "_modal_6vred_35", t = "_modalSmall_6vred_58", _ = "_modalOverflowing_6vred_62", a = "_content_6vred_66", r = "_contentScrollable_6vred_72", c = "_footer_6vred_79", n = "_footerFixed_6vred_84", m = {
+  dialog: o,
+  backdrop: l,
+  backdropSmall: e,
+  modal: d,
+  modalSmall: t,
+  modalOverflowing: _,
+  content: a,
+  contentScrollable: r,
+  footer: c,
+  footerFixed: n
+};
+export {
+  l as backdrop,
+  e as backdropSmall,
+  a as content,
+  r as contentScrollable,
+  m as default,
+  o as dialog,
+  c as footer,
+  n as footerFixed,
+  d as modal,
+  _ as modalOverflowing,
+  t as modalSmall
+};
+//# sourceMappingURL=Modal.module.scss.js.map

package/dist/components/Common/UI/Modal/Modal.module.scss.js.map

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

package/dist/components/Common/UI/Modal/ModalTypes.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+export interface ModalProps {
+    /**
+     * Controls whether the modal is open or closed
+     */
+    isOpen?: boolean;
+    /**
+     * Callback function called when the modal should be closed
+     */
+    onClose?: () => void;
+    /**
+     * Whether clicking the backdrop should close the modal
+     */
+    shouldCloseOnBackdropClick?: boolean;
+    /**
+     * Main content to be rendered in the modal body
+     */
+    children?: ReactNode;
+    /**
+     * Footer content to be rendered at the bottom of the modal
+     */
+    footer?: ReactNode;
+    /**
+     * Optional ref to the backdrop container
+     */
+    containerRef?: React.RefObject<HTMLDivElement | null>;
+}
+/**
+ * Default prop values for Modal component.
+ */
+export declare const ModalDefaults: {
+    readonly isOpen: false;
+    readonly shouldCloseOnBackdropClick: false;
+};

package/dist/components/Common/UI/Modal/ModalTypes.js

@@ -0,0 +1,8 @@
+const l = {
+  isOpen: !1,
+  shouldCloseOnBackdropClick: !1
+};
+export {
+  l as ModalDefaults
+};
+//# sourceMappingURL=ModalTypes.js.map

package/dist/components/Common/UI/Modal/ModalTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTypes.js","sources":["../../../../../src/components/Common/UI/Modal/ModalTypes.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport interface ModalProps {\n  /**\n   * Controls whether the modal is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * Callback function called when the modal should be closed\n   */\n  onClose?: () => void\n  /**\n   * Whether clicking the backdrop should close the modal\n   */\n  shouldCloseOnBackdropClick?: boolean\n  /**\n   * Main content to be rendered in the modal body\n   */\n  children?: ReactNode\n  /**\n   * Footer content to be rendered at the bottom of the modal\n   */\n  footer?: ReactNode\n  /**\n   * Optional ref to the backdrop container\n   */\n  containerRef?: React.RefObject<HTMLDivElement | null>\n}\n\n/**\n * Default prop values for Modal component.\n */\nexport const ModalDefaults = {\n  isOpen: false,\n  shouldCloseOnBackdropClick: false,\n} as const satisfies Partial<ModalProps>\n"],"names":["ModalDefaults"],"mappings":"AAgCO,MAAMA,IAAgB;AAAA,EAC3B,QAAQ;AAAA,EACR,4BAA4B;AAC9B;"}

package/dist/components/Common/UI/Modal/index.d.ts

@@ -0,0 +1,3 @@
+import "./types/i18next.d.ts"
+export { Modal } from './Modal';
+export type { ModalProps } from './ModalTypes';

package/dist/components/Common/UI/Tabs/Tabs.d.ts

@@ -1,7 +1,2 @@
 import { TabsProps } from './TabsTypes';
-/**
- * Controlled Tabs component that provides a simple object-based interface to React Aria Tabs
- * This allows consumers to provide tabs as an array of objects with content and events
- * Requires selectedId and onSelectionChange to be managed by parent component
- */
 export declare function Tabs({ tabs, selectedId, onSelectionChange, className, ...ariaProps }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Common/UI/Tabs/Tabs.js

@@ -1,25 +1,54 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { Tabs as a, TabList as m, Tab as c, TabPanel as t } from "react-aria-components";
-import p from "classnames";
-import f from "./Tabs.module.scss.js";
-function g({ tabs: s, selectedId: r, onSelectionChange: o, className: l, ...n }) {
-  return /* @__PURE__ */ d(
-    a,
+import { jsx as i, jsxs as d, Fragment as b } from "react/jsx-runtime";
+import { useRef as h } from "react";
+import { Tabs as T, TabList as v, Tab as g, TabPanel as C } from "react-aria-components";
+import N from "classnames";
+import { useTranslation as x } from "react-i18next";
+import s from "./Tabs.module.scss.js";
+import { useContainerBreakpoints as y } from "../../../../hooks/useContainerBreakpoints/useContainerBreakpoints.js";
+import { useComponentContext as D } from "../../../../contexts/ComponentAdapter/useComponentContext.js";
+function H({ tabs: n, selectedId: l, onSelectionChange: r, className: m, ...a }) {
+  const { t: c } = x("common"), { Select: p } = D(), t = h(null), f = !y({ ref: t }).includes("small"), o = n.find((e) => e.id === l), u = n.map((e) => ({
+    value: e.id,
+    label: typeof e.label == "string" ? e.label : e.id
+  }));
+  return /* @__PURE__ */ i("div", { ref: t, className: N(s.root, m), children: f ? /* @__PURE__ */ d(b, { children: [
+    /* @__PURE__ */ i("div", { className: s.dropdown, children: /* @__PURE__ */ i(
+      p,
+      {
+        label: a["aria-label"] || c("labels.tabNavigation"),
+        shouldVisuallyHideLabel: !0,
+        options: u,
+        value: l,
+        onChange: r
+      }
+    ) }),
+    o && /* @__PURE__ */ i(
+      "div",
+      {
+        role: "tabpanel",
+        id: `panel-${o.id}`,
+        "aria-labelledby": o.id,
+        children: o.content
+      },
+      o.id
+    )
+  ] }) : /* @__PURE__ */ d(
+    T,
     {
-      className: p(f.root, l),
-      selectedKey: r,
-      onSelectionChange: (i) => {
-        i && o(i.toString());
+      className: s.tabsContainer,
+      selectedKey: l,
+      onSelectionChange: (e) => {
+        e && r(e.toString());
       },
-      ...n,
+      ...a,
       children: [
-        /* @__PURE__ */ e(m, { children: s.map((i) => /* @__PURE__ */ e(c, { id: i.id, isDisabled: i.isDisabled, children: i.label }, i.id)) }),
-        s.map((i) => /* @__PURE__ */ e(t, { id: i.id, children: i.content }, i.id))
+        /* @__PURE__ */ i(v, { children: n.map((e) => /* @__PURE__ */ i(g, { id: e.id, isDisabled: e.isDisabled, children: e.label }, e.id)) }),
+        n.map((e) => /* @__PURE__ */ i(C, { id: e.id, children: e.content }, e.id))
       ]
     }
-  );
+  ) });
 }
 export {
-  g as Tabs
+  H as Tabs
 };
 //# sourceMappingURL=Tabs.js.map

package/dist/components/Common/UI/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../../src/components/Common/UI/Tabs/Tabs.tsx"],"sourcesContent":["import {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  TabPanel as AriaTabPanel,\n  Tab as AriaTab,\n} from 'react-aria-components'\nimport classNames from 'classnames'\nimport { type TabsProps } from './TabsTypes'\nimport styles from './Tabs.module.scss'\n\n/**\n * Controlled Tabs component that provides a simple object-based interface to React Aria Tabs\n * This allows consumers to provide tabs as an array of objects with content and events\n * Requires selectedId and onSelectionChange to be managed by parent component\n */\nexport function Tabs({ tabs, selectedId, onSelectionChange, className, ...ariaProps }: TabsProps) {\n  return (\n    <AriaTabs\n      className={classNames(styles.root, className)}\n      selectedKey={selectedId}\n      onSelectionChange={key => {\n        if (key) {\n          onSelectionChange(key.toString())\n        }\n      }}\n      {...ariaProps}\n    >\n      <AriaTabList>\n        {tabs.map(tab => (\n          <AriaTab key={tab.id} id={tab.id} isDisabled={tab.isDisabled}>\n            {tab.label}\n          </AriaTab>\n        ))}\n      </AriaTabList>\n\n      {tabs.map(tab => (\n        <AriaTabPanel key={tab.id} id={tab.id}>\n          {tab.content}\n        </AriaTabPanel>\n      ))}\n    </AriaTabs>\n  )\n}\n"],"names":["Tabs","tabs","selectedId","onSelectionChange","className","ariaProps","jsxs","AriaTabs","classNames","styles","key","jsx","AriaTabList","tab","AriaTab","AriaTabPanel"],"mappings":";;;;AAeO,SAASA,EAAK,EAAE,MAAAC,GAAM,YAAAC,GAAY,mBAAAC,GAAmB,WAAAC,GAAW,GAAGC,KAAwB;AAChG,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,EAAO,MAAML,CAAS;AAAA,MAC5C,aAAaF;AAAA,MACb,mBAAmB,CAAAQ,MAAO;AACxB,QAAIA,KACFP,EAAkBO,EAAI,UAAU;AAAA,MAEpC;AAAA,MACC,GAAGL;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAM,EAACC,KACE,UAAAX,EAAK,IAAI,CAAAY,MACR,gBAAAF,EAACG,KAAqB,IAAID,EAAI,IAAI,YAAYA,EAAI,YAC/C,UAAAA,EAAI,SADOA,EAAI,EAElB,CACD,GACH;AAAA,QAECZ,EAAK,IAAI,CAAAY,MACR,gBAAAF,EAACI,GAAA,EAA0B,IAAIF,EAAI,IAChC,UAAAA,EAAI,QAAA,GADYA,EAAI,EAEvB,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../../src/components/Common/UI/Tabs/Tabs.tsx"],"sourcesContent":["import { useRef } from 'react'\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  TabPanel as AriaTabPanel,\n  Tab as AriaTab,\n} from 'react-aria-components'\nimport classNames from 'classnames'\nimport { useTranslation } from 'react-i18next'\nimport { type TabsProps } from './TabsTypes'\nimport styles from './Tabs.module.scss'\nimport { useContainerBreakpoints } from '@/hooks/useContainerBreakpoints/useContainerBreakpoints'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\nexport function Tabs({ tabs, selectedId, onSelectionChange, className, ...ariaProps }: TabsProps) {\n  const { t } = useTranslation('common')\n  const { Select } = useComponentContext()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const breakpoints = useContainerBreakpoints({ ref: containerRef })\n  const shouldUseDropdown = !breakpoints.includes('small')\n\n  const selectedTab = tabs.find(tab => tab.id === selectedId)\n\n  const selectOptions = tabs.map(tab => ({\n    value: tab.id,\n    label: typeof tab.label === 'string' ? tab.label : tab.id,\n  }))\n\n  return (\n    <div ref={containerRef} className={classNames(styles.root, className)}>\n      {!shouldUseDropdown ? (\n        <AriaTabs\n          className={styles.tabsContainer}\n          selectedKey={selectedId}\n          onSelectionChange={key => {\n            if (key) {\n              onSelectionChange(key.toString())\n            }\n          }}\n          {...ariaProps}\n        >\n          <AriaTabList>\n            {tabs.map(tab => (\n              <AriaTab key={tab.id} id={tab.id} isDisabled={tab.isDisabled}>\n                {tab.label}\n              </AriaTab>\n            ))}\n          </AriaTabList>\n\n          {tabs.map(tab => (\n            <AriaTabPanel key={tab.id} id={tab.id}>\n              {tab.content}\n            </AriaTabPanel>\n          ))}\n        </AriaTabs>\n      ) : (\n        <>\n          <div className={styles.dropdown}>\n            <Select\n              label={ariaProps['aria-label'] || t('labels.tabNavigation')}\n              shouldVisuallyHideLabel={true}\n              options={selectOptions}\n              value={selectedId}\n              onChange={onSelectionChange}\n            />\n          </div>\n\n          {selectedTab && (\n            <div\n              key={selectedTab.id}\n              role=\"tabpanel\"\n              id={`panel-${selectedTab.id}`}\n              aria-labelledby={selectedTab.id}\n            >\n              {selectedTab.content}\n            </div>\n          )}\n        </>\n      )}\n    </div>\n  )\n}\n"],"names":["Tabs","tabs","selectedId","onSelectionChange","className","ariaProps","t","useTranslation","Select","useComponentContext","containerRef","useRef","shouldUseDropdown","useContainerBreakpoints","selectedTab","tab","selectOptions","jsx","classNames","styles","jsxs","Fragment","AriaTabs","key","AriaTabList","AriaTab","AriaTabPanel"],"mappings":";;;;;;;;AAcO,SAASA,EAAK,EAAE,MAAAC,GAAM,YAAAC,GAAY,mBAAAC,GAAmB,WAAAC,GAAW,GAAGC,KAAwB;AAChG,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAe,QAAQ,GAC/B,EAAE,QAAAC,EAAA,IAAWC,EAAA,GACbC,IAAeC,EAAuB,IAAI,GAE1CC,IAAoB,CADNC,EAAwB,EAAE,KAAKH,GAAc,EAC1B,SAAS,OAAO,GAEjDI,IAAcb,EAAK,KAAK,CAAAc,MAAOA,EAAI,OAAOb,CAAU,GAEpDc,IAAgBf,EAAK,IAAI,CAAAc,OAAQ;AAAA,IACrC,OAAOA,EAAI;AAAA,IACX,OAAO,OAAOA,EAAI,SAAU,WAAWA,EAAI,QAAQA,EAAI;AAAA,EAAA,EACvD;AAEF,SACE,gBAAAE,EAAC,OAAA,EAAI,KAAKP,GAAc,WAAWQ,EAAWC,EAAO,MAAMf,CAAS,GACjE,UAACQ,IA0BA,gBAAAQ,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAJ,EAAC,OAAA,EAAI,WAAWE,EAAO,UACrB,UAAA,gBAAAF;AAAA,MAACT;AAAA,MAAA;AAAA,QACC,OAAOH,EAAU,YAAY,KAAKC,EAAE,sBAAsB;AAAA,QAC1D,yBAAyB;AAAA,QACzB,SAASU;AAAA,QACT,OAAOd;AAAA,QACP,UAAUC;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,IAECW,KACC,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,IAAI,SAASH,EAAY,EAAE;AAAA,QAC3B,mBAAiBA,EAAY;AAAA,QAE5B,UAAAA,EAAY;AAAA,MAAA;AAAA,MALRA,EAAY;AAAA,IAAA;AAAA,EAMnB,EAAA,CAEJ,IA9CA,gBAAAM;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,WAAWH,EAAO;AAAA,MAClB,aAAajB;AAAA,MACb,mBAAmB,CAAAqB,MAAO;AACxB,QAAIA,KACFpB,EAAkBoB,EAAI,UAAU;AAAA,MAEpC;AAAA,MACC,GAAGlB;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAY,EAACO,KACE,UAAAvB,EAAK,IAAI,CAAAc,MACR,gBAAAE,EAACQ,KAAqB,IAAIV,EAAI,IAAI,YAAYA,EAAI,YAC/C,UAAAA,EAAI,SADOA,EAAI,EAElB,CACD,GACH;AAAA,QAECd,EAAK,IAAI,CAAAc,MACR,gBAAAE,EAACS,GAAA,EAA0B,IAAIX,EAAI,IAChC,UAAAA,EAAI,QAAA,GADYA,EAAI,EAEvB,CACD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,EAwBH,CAEJ;AAEJ;"}

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

@@ -1,8 +1,12 @@
-const o = "_root_o57yt_1", t = {
-  root: o
+const o = "_root_rni1o_1", n = "_tabsContainer_rni1o_4", t = "_dropdown_rni1o_86", r = {
+  root: o,
+  tabsContainer: n,
+  dropdown: t
 };
 export {
-  t as default,
-  o as root
+  r as default,
+  t as dropdown,
+  o as root,
+  n as tabsContainer
 };
 //# sourceMappingURL=Tabs.module.scss.js.map

package/dist/components/Common/UI/Tabs/Tabs.module.scss.js.map

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

package/dist/components/Common/UI/Tabs/TabsTypes.d.ts

@@ -22,6 +22,13 @@ export interface TabProps {
 }
 /**
  * Props for the Tabs component - provides accessible tab navigation (controlled only)
+ *
+ * Responsively adapts to container size:
+ * - Below 640px (small breakpoint): renders as a dropdown select for mobile devices
+ * - At or above 640px: renders as horizontal tabs for desktop views
+ *
+ * This adaptive behavior ensures WCAG 2.2 compliance by avoiding horizontal scrolling
+ * without positional meaning, while maintaining a familiar tab interface on larger screens.
  */
 export interface TabsProps {
     /**

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

@@ -1,5 +1,4 @@
 import "./types/i18next.d.ts"
-export { useAsyncError } from './hooks/useAsyncError';
 export { TaxInputs } from './TaxInputs';
 export { DataView, DataCards, DataTable, useDataView } from './DataView';
 export { Flex, FlexItem } from './Flex/Flex';

package/dist/components/Company/AssignSignatory/AssignSignatory.js

@@ -1,19 +1,17 @@
 import { jsx as o, jsxs as y, Fragment as f } from "react/jsx-runtime";
 import { z as e } from "zod";
-import { useForm as d, FormProvider as p } from "react-hook-form";
-import { zodResolver as N } from "@hookform/resolvers/zod";
+import { useForm as d, FormProvider as N } from "react-hook-form";
+import { zodResolver as p } from "@hookform/resolvers/zod";
 import { SignatoryForm as _ } from "./SignatoryForm.js";
 import { Head as O } from "./Head.js";
 import { AssignSignatorySelection as u } from "./AssignSignatorySelection.js";
 import { SignatoryAssignmentMode as m, AssignSignatoryProvider as E } from "./useAssignSignatory.js";
 import { companyEvents as i } from "../../../shared/constants.js";
 import { Flex as C } from "../../Common/Flex/Flex.js";
-import "classnames";
-import "react-i18next";
 import { BaseComponent as M } from "../../Base/Base.js";
 import { useBase as h } from "../../Base/useBase.js";
 import { useI18n as I, useComponentDictionary as Y } from "../../../i18n/I18n.js";
-function K(n) {
+function w(n) {
   return /* @__PURE__ */ o(M, { ...n, children: /* @__PURE__ */ o(v, { ...n, children: n.children }) });
 }
 const D = e.object({
@@ -32,7 +30,7 @@ function v({
 }) {
   I("Company.AssignSignatory"), Y("Company.AssignSignatory", A);
   const { onEvent: t } = h(), c = d({
-    resolver: N(D),
+    resolver: p(D),
     defaultValues: {
       signatoryAssignmentMode: m.createSignatory
     }
@@ -51,7 +49,7 @@ function v({
           r === i.COMPANY_CREATE_SIGNATORY_DONE ? t(i.COMPANY_ASSIGN_SIGNATORY_DONE) : r === i.COMPANY_INVITE_SIGNATORY_DONE ? t(i.COMPANY_ASSIGN_SIGNATORY_DONE) : t(r, l);
         }
       },
-      children: /* @__PURE__ */ o(C, { flexDirection: "column", gap: 32, children: /* @__PURE__ */ o(p, { ...c, children: s || /* @__PURE__ */ y(f, { children: [
+      children: /* @__PURE__ */ o(C, { flexDirection: "column", gap: 32, children: /* @__PURE__ */ o(N, { ...c, children: s || /* @__PURE__ */ y(f, { children: [
         /* @__PURE__ */ o(O, {}),
         /* @__PURE__ */ o(u, {}),
         /* @__PURE__ */ o(_, {})
@@ -60,6 +58,6 @@ function v({
   ) });
 }
 export {
-  K as AssignSignatory
+  w as AssignSignatory
 };
 //# sourceMappingURL=AssignSignatory.js.map