@gusto/embedded-react-sdk 0.13.0 → 0.13.2

package/dist/components/Common/DataView/useDataView.js

@@ -1,22 +1,24 @@
-import { useMemo as u } from "react";
-const d = ({
+import { useMemo as a } from "react";
+const x = ({
   columns: r,
-  data: o,
-  itemMenu: s,
+  data: s,
+  itemMenu: o,
   onSelect: w,
   pagination: V,
-  emptyState: e,
-  isFetching: p
-}) => u(() => ({
+  emptyState: p,
+  footer: u,
+  isFetching: P
+}) => a(() => ({
   pagination: V,
-  data: o,
+  data: s,
   columns: r,
-  itemMenu: s,
+  itemMenu: o,
   onSelect: w,
-  emptyState: e,
-  isFetching: p
-}), [V, o, r, s, w, e, p]);
+  emptyState: p,
+  footer: u,
+  isFetching: P
+}), [V, s, r, o, w, p, u, P]);
 export {
-  d as useDataView
+  x as useDataView
 };
 //# sourceMappingURL=useDataView.js.map

package/dist/components/Common/DataView/useDataView.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDataView.js","sources":["../../../../src/components/Common/DataView/useDataView.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n    }\n\nexport type useDataViewProp<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  isFetching?: boolean\n}\n\nexport type useDataViewPropReturn<T> = {\n  pagination?: PaginationControlProps\n  data: T[]\n  columns: DataViewColumn<T>[]\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  isFetching?: boolean\n}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  pagination,\n  emptyState,\n  isFetching,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      emptyState,\n      isFetching,\n    }\n  }, [pagination, data, columns, itemMenu, onSelect, emptyState, isFetching])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","pagination","emptyState","isFetching","useMemo"],"mappings":";AAmCO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAH;AAAA,EACA,MAAAH;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,YAAAE;AAAA,EACA,YAAAC;AAAA,IAED,CAACF,GAAYH,GAAMD,GAASE,GAAUC,GAAUE,GAAYC,CAAU,CAAC;"}
+{"version":3,"file":"useDataView.js","sources":["../../../../src/components/Common/DataView/useDataView.ts"],"sourcesContent":["import { useMemo } from 'react'\nimport type { PaginationControlProps } from '@/components/Common/PaginationControl/PaginationControlTypes'\n\ntype DataViewColumn<T> =\n  | {\n      key: keyof T\n      title: string | React.ReactNode\n      render?: (item: T) => React.ReactNode\n    }\n  | {\n      key?: string\n      title: string | React.ReactNode\n      render: (item: T) => React.ReactNode\n    }\n\n// Type for footer object keys - allows data keys and custom string keys\ntype FooterKeys<T> = keyof T | string\n\nexport type useDataViewProp<T> = {\n  columns: DataViewColumn<T>[]\n  data: T[]\n  pagination?: PaginationControlProps\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n}\n\nexport type useDataViewPropReturn<T> = {\n  pagination?: PaginationControlProps\n  data: T[]\n  columns: DataViewColumn<T>[]\n  itemMenu?: (item: T) => React.ReactNode\n  onSelect?: (item: T, checked: boolean) => void\n  emptyState?: () => React.ReactNode\n  footer?: () => Partial<Record<FooterKeys<T>, React.ReactNode>>\n  isFetching?: boolean\n}\n\nexport const useDataView = <T>({\n  columns,\n  data,\n  itemMenu,\n  onSelect,\n  pagination,\n  emptyState,\n  footer,\n  isFetching,\n}: useDataViewProp<T>): useDataViewPropReturn<T> => {\n  const dataViewProps = useMemo(() => {\n    return {\n      pagination,\n      data,\n      columns,\n      itemMenu,\n      onSelect,\n      emptyState,\n      footer,\n      isFetching,\n    }\n  }, [pagination, data, columns, itemMenu, onSelect, emptyState, footer, isFetching])\n\n  return dataViewProps\n}\n"],"names":["useDataView","columns","data","itemMenu","onSelect","pagination","emptyState","footer","isFetching","useMemo"],"mappings":";AAwCO,MAAMA,IAAc,CAAI;AAAA,EAC7B,SAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AACF,MACwBC,EAAQ,OACrB;AAAA,EACL,YAAAJ;AAAA,EACA,MAAAH;AAAA,EACA,SAAAD;AAAA,EACA,UAAAE;AAAA,EACA,UAAAC;AAAA,EACA,YAAAE;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,IAED,CAACH,GAAYH,GAAMD,GAASE,GAAUC,GAAUE,GAAYC,GAAQC,CAAU,CAAC;"}

package/dist/components/Common/FieldDescription/FieldDescription.js

@@ -1,19 +1,12 @@
 import { jsx as t } from "react/jsx-runtime";
-import e from "classnames";
-import p from "./FieldDescription.module.scss.js";
-import { createMarkup as a } from "../../../helpers/formattedStrings.js";
-const u = ({
+import m from "classnames";
+import e from "./FieldDescription.module.scss.js";
+const c = ({
   children: o,
-  className: s,
-  id: m
-}) => {
-  const r = {
-    className: e(p.root, s),
-    id: m
-  };
-  return o && (typeof o == "string" ? /* @__PURE__ */ t("div", { ...r, dangerouslySetInnerHTML: a(o) }) : /* @__PURE__ */ t("div", { ...r, children: o }));
-};
+  className: r,
+  ...s
+}) => o && /* @__PURE__ */ t("div", { ...s, className: m(e.root, r), children: o });
 export {
-  u as FieldDescription
+  c as FieldDescription
 };
 //# sourceMappingURL=FieldDescription.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FieldDescription.js","sources":["../../../../src/components/Common/FieldDescription/FieldDescription.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport styles from './FieldDescription.module.scss'\nimport { createMarkup } from '@/helpers/formattedStrings'\n\ninterface FieldDescriptionProps {\n  children: React.ReactNode\n  className?: string\n  id?: string\n}\n\nexport const FieldDescription: React.FC<FieldDescriptionProps> = ({\n  children,\n  className,\n  id,\n}: FieldDescriptionProps) => {\n  const commonProps = {\n    className: classNames(styles.root, className),\n    id,\n  }\n\n  return (\n    children &&\n    (typeof children === 'string' ? (\n      <div {...commonProps} dangerouslySetInnerHTML={createMarkup(children)} />\n    ) : (\n      <div {...commonProps}>{children}</div>\n    ))\n  )\n}\n"],"names":["FieldDescription","children","className","id","commonProps","classNames","styles","jsx","createMarkup"],"mappings":";;;;AAUO,MAAMA,IAAoD,CAAC;AAAA,EAChE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AACF,MAA6B;AAC3B,QAAMC,IAAc;AAAA,IAClB,WAAWC,EAAWC,EAAO,MAAMJ,CAAS;AAAA,IAC5C,IAAAC;AAAA,EAAA;AAGF,SACEF,MACC,OAAOA,KAAa,WACnB,gBAAAM,EAAC,SAAK,GAAGH,GAAa,yBAAyBI,EAAaP,CAAQ,EAAA,CAAG,sBAEtE,OAAA,EAAK,GAAGG,GAAc,UAAAH,EAAA,CAAS;AAGtC;"}
+{"version":3,"file":"FieldDescription.js","sources":["../../../../src/components/Common/FieldDescription/FieldDescription.tsx"],"sourcesContent":["import classNames from 'classnames'\nimport styles from './FieldDescription.module.scss'\n\ninterface FieldDescriptionProps {\n  children: React.ReactNode\n  className?: string\n  id?: string\n}\n\nexport const FieldDescription: React.FC<FieldDescriptionProps> = ({\n  children,\n  className,\n  ...props\n}: FieldDescriptionProps) => {\n  return (\n    children && (\n      <div {...props} className={classNames(styles.root, className)}>\n        {children}\n      </div>\n    )\n  )\n}\n"],"names":["FieldDescription","children","className","props","jsx","classNames","styles"],"mappings":";;;AASO,MAAMA,IAAoD,CAAC;AAAA,EAChE,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAEIF,KACE,gBAAAG,EAAC,OAAA,EAAK,GAAGD,GAAO,WAAWE,EAAWC,EAAO,MAAMJ,CAAS,GACzD,UAAAD,EAAA,CACH;"}

package/dist/components/Common/Fields/hooks/useField.d.ts

@@ -1,4 +1,5 @@
 import { RegisterOptions } from 'react-hook-form';
+import { default as React } from 'react';
 export type Transform<TValue> = (value: TValue) => TValue;
 export interface UseFieldProps<TValue = string> {
     name: string;
@@ -8,14 +9,16 @@ export interface UseFieldProps<TValue = string> {
     isRequired?: boolean;
     onChange?: (value: TValue) => void;
     transform?: Transform<TValue>;
+    description?: React.ReactNode;
 }
-export declare function useField<TValue = string>({ name, rules, defaultValue, errorMessage, isRequired, onChange, transform, }: UseFieldProps<TValue>): {
+export declare function useField<TValue = string>({ name, rules, defaultValue, errorMessage, isRequired, onChange, transform, description, }: UseFieldProps<TValue>): {
     value: TValue;
     inputRef: import('react-hook-form').RefCallBack;
     isInvalid: boolean;
     errorMessage: string | undefined;
     onChange: (updatedValue: TValue) => void;
     isRequired: boolean;
+    description: React.ReactNode;
     onBlur: import('react-hook-form').Noop;
     disabled?: boolean;
     name: string;

package/dist/components/Common/Fields/hooks/useField.js

@@ -1,36 +1,43 @@
-import { useFormContext as h, useController as m } from "react-hook-form";
-function F({
-  name: a,
-  rules: i = {},
-  defaultValue: c,
-  errorMessage: u,
+import { useFormContext as h, useController as M } from "react-hook-form";
+import F, { useMemo as x } from "react";
+import { createMarkup as y } from "../../../../helpers/formattedStrings.js";
+const D = (e) => !e || typeof e != "string" ? e : F.createElement("div", {
+  dangerouslySetInnerHTML: y(e)
+});
+function k({
+  name: e,
+  rules: u = {},
+  defaultValue: i,
+  errorMessage: f,
   isRequired: o = !1,
-  onChange: f,
-  transform: r
+  onChange: m,
+  transform: t,
+  description: n
 }) {
-  const { control: d } = h(), { field: e, fieldState: n } = m({
-    name: a,
-    control: d,
+  const { control: p } = h(), { field: r, fieldState: s } = M({
+    name: e,
+    control: p,
     rules: {
       required: o,
-      ...i
+      ...u
     },
-    defaultValue: c
-  }), { ref: g, ...v } = e, C = (t) => {
-    const l = r ? r(t) : t;
-    e.onChange(l), f?.(l);
-  }, s = !!n.error;
+    defaultValue: i
+  }), { ref: g, ...d } = r, v = (a) => {
+    const c = t ? t(a) : a;
+    r.onChange(c), m?.(c);
+  }, l = !!s.error, C = x(() => D(n), [n]);
   return {
-    ...v,
-    value: e.value,
+    ...d,
+    value: r.value,
     inputRef: g,
-    isInvalid: s,
-    errorMessage: s ? u ?? n.error?.message : void 0,
-    onChange: C,
-    isRequired: o
+    isInvalid: l,
+    errorMessage: l ? f ?? s.error?.message : void 0,
+    onChange: v,
+    isRequired: o,
+    description: C
   };
 }
 export {
-  F as useField
+  k as useField
 };
 //# sourceMappingURL=useField.js.map

package/dist/components/Common/Fields/hooks/useField.js.map

@@ -1 +1 @@
-{"version":3,"file":"useField.js","sources":["../../../../../src/components/Common/Fields/hooks/useField.ts"],"sourcesContent":["import type { RegisterOptions } from 'react-hook-form'\nimport { useController, useFormContext } from 'react-hook-form'\n\nexport type Transform<TValue> = (value: TValue) => TValue\n\nexport interface UseFieldProps<TValue = string> {\n  name: string\n  rules?: RegisterOptions\n  defaultValue?: TValue\n  errorMessage?: string\n  isRequired?: boolean\n  onChange?: (value: TValue) => void\n  transform?: Transform<TValue>\n}\n\nexport function useField<TValue = string>({\n  name,\n  rules = {},\n  defaultValue,\n  errorMessage,\n  isRequired = false,\n  onChange,\n  transform,\n}: UseFieldProps<TValue>) {\n  const { control } = useFormContext()\n  const { field, fieldState } = useController({\n    name,\n    control,\n    rules: {\n      required: isRequired,\n      ...rules,\n    },\n    defaultValue,\n  })\n\n  const { ref, ...restFieldProps } = field\n\n  const handleChange = (updatedValue: TValue) => {\n    const value = transform ? transform(updatedValue) : updatedValue\n    field.onChange(value)\n    onChange?.(value)\n  }\n\n  const isInvalid = !!fieldState.error\n\n  return {\n    ...restFieldProps,\n    value: field.value as TValue,\n    inputRef: ref,\n    isInvalid,\n    errorMessage: isInvalid ? (errorMessage ?? fieldState.error?.message) : undefined,\n    onChange: handleChange,\n    isRequired,\n  }\n}\n"],"names":["useField","name","rules","defaultValue","errorMessage","isRequired","onChange","transform","control","useFormContext","field","fieldState","useController","ref","restFieldProps","handleChange","updatedValue","value","isInvalid"],"mappings":";AAeO,SAASA,EAA0B;AAAA,EACxC,MAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,WAAAC;AACF,GAA0B;AACxB,QAAM,EAAE,SAAAC,EAAA,IAAYC,EAAA,GACd,EAAE,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAc;AAAA,IAC1C,MAAAX;AAAA,IACA,SAAAO;AAAA,IACA,OAAO;AAAA,MACL,UAAUH;AAAA,MACV,GAAGH;AAAA,IAAA;AAAA,IAEL,cAAAC;AAAA,EAAA,CACD,GAEK,EAAE,KAAAU,GAAK,GAAGC,EAAA,IAAmBJ,GAE7BK,IAAe,CAACC,MAAyB;AAC7C,UAAMC,IAAQV,IAAYA,EAAUS,CAAY,IAAIA;AACpD,IAAAN,EAAM,SAASO,CAAK,GACpBX,IAAWW,CAAK;AAAA,EAClB,GAEMC,IAAY,CAAC,CAACP,EAAW;AAE/B,SAAO;AAAA,IACL,GAAGG;AAAA,IACH,OAAOJ,EAAM;AAAA,IACb,UAAUG;AAAA,IACV,WAAAK;AAAA,IACA,cAAcA,IAAad,KAAgBO,EAAW,OAAO,UAAW;AAAA,IACxE,UAAUI;AAAA,IACV,YAAAV;AAAA,EAAA;AAEJ;"}
+{"version":3,"file":"useField.js","sources":["../../../../../src/components/Common/Fields/hooks/useField.ts"],"sourcesContent":["import type { RegisterOptions } from 'react-hook-form'\nimport { useController, useFormContext } from 'react-hook-form'\nimport React, { useMemo } from 'react'\nimport { createMarkup } from '@/helpers/formattedStrings'\n\nexport type Transform<TValue> = (value: TValue) => TValue\n\nexport interface UseFieldProps<TValue = string> {\n  name: string\n  rules?: RegisterOptions\n  defaultValue?: TValue\n  errorMessage?: string\n  isRequired?: boolean\n  onChange?: (value: TValue) => void\n  transform?: Transform<TValue>\n  description?: React.ReactNode\n}\n\nconst processDescription = (description: React.ReactNode): React.ReactNode => {\n  if (!description || typeof description !== 'string') {\n    return description\n  }\n\n  // Use DOMPurify to sanitize the string and return a React element\n  return React.createElement('div', {\n    dangerouslySetInnerHTML: createMarkup(description),\n  })\n}\n\nexport function useField<TValue = string>({\n  name,\n  rules = {},\n  defaultValue,\n  errorMessage,\n  isRequired = false,\n  onChange,\n  transform,\n  description,\n}: UseFieldProps<TValue>) {\n  const { control } = useFormContext()\n  const { field, fieldState } = useController({\n    name,\n    control,\n    rules: {\n      required: isRequired,\n      ...rules,\n    },\n    defaultValue,\n  })\n\n  const { ref, ...restFieldProps } = field\n\n  const handleChange = (updatedValue: TValue) => {\n    const value = transform ? transform(updatedValue) : updatedValue\n    field.onChange(value)\n    onChange?.(value)\n  }\n\n  const isInvalid = !!fieldState.error\n\n  const processedDescription = useMemo(() => processDescription(description), [description])\n\n  return {\n    ...restFieldProps,\n    value: field.value as TValue,\n    inputRef: ref,\n    isInvalid,\n    errorMessage: isInvalid ? (errorMessage ?? fieldState.error?.message) : undefined,\n    onChange: handleChange,\n    isRequired,\n    description: processedDescription,\n  }\n}\n"],"names":["processDescription","description","React","createMarkup","useField","name","rules","defaultValue","errorMessage","isRequired","onChange","transform","control","useFormContext","field","fieldState","useController","ref","restFieldProps","handleChange","updatedValue","value","isInvalid","processedDescription","useMemo"],"mappings":";;;AAkBA,MAAMA,IAAqB,CAACC,MACtB,CAACA,KAAe,OAAOA,KAAgB,WAClCA,IAIFC,EAAM,cAAc,OAAO;AAAA,EAChC,yBAAyBC,EAAaF,CAAW;AAAA,CAClD;AAGI,SAASG,EAA0B;AAAA,EACxC,MAAAC;AAAA,EACA,OAAAC,IAAQ,CAAA;AAAA,EACR,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EACb,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAV;AACF,GAA0B;AACxB,QAAM,EAAE,SAAAW,EAAA,IAAYC,EAAA,GACd,EAAE,OAAAC,GAAO,YAAAC,EAAA,IAAeC,EAAc;AAAA,IAC1C,MAAAX;AAAA,IACA,SAAAO;AAAA,IACA,OAAO;AAAA,MACL,UAAUH;AAAA,MACV,GAAGH;AAAA,IAAA;AAAA,IAEL,cAAAC;AAAA,EAAA,CACD,GAEK,EAAE,KAAAU,GAAK,GAAGC,EAAA,IAAmBJ,GAE7BK,IAAe,CAACC,MAAyB;AAC7C,UAAMC,IAAQV,IAAYA,EAAUS,CAAY,IAAIA;AACpD,IAAAN,EAAM,SAASO,CAAK,GACpBX,IAAWW,CAAK;AAAA,EAClB,GAEMC,IAAY,CAAC,CAACP,EAAW,OAEzBQ,IAAuBC,EAAQ,MAAMxB,EAAmBC,CAAW,GAAG,CAACA,CAAW,CAAC;AAEzF,SAAO;AAAA,IACL,GAAGiB;AAAA,IACH,OAAOJ,EAAM;AAAA,IACb,UAAUG;AAAA,IACV,WAAAK;AAAA,IACA,cAAcA,IAAad,KAAgBO,EAAW,OAAO,UAAW;AAAA,IACxE,UAAUI;AAAA,IACV,YAAAV;AAAA,IACA,aAAac;AAAA,EAAA;AAEjB;"}

package/dist/components/Common/ReorderableList/DropZone.js

@@ -1,10 +1,10 @@
 import { jsx as p } from "react/jsx-runtime";
 import { memo as H, useRef as l, useEffect as T } from "react";
 import b from "classnames";
-import { useDrop as C } from "react-dnd";
-import { useTranslation as E } from "react-i18next";
+import { useTranslation as C } from "react-i18next";
 import i from "./ReorderableList.module.scss.js";
-import { ITEM_TYPE as N } from "./constants.js";
+import { ITEM_TYPE as E } from "./constants.js";
+import { useDrop as N } from "../../../node_modules/react-dnd/dist/hooks/useDrop/useDrop.js";
 const Y = H(function({
   position: n,
   isActive: o,
@@ -14,9 +14,9 @@ const Y = H(function({
   listId: t,
   className: h
 }) {
-  const s = l(null), { t: g } = E(), e = l(null), f = l(!1), [{ isOver: c }, m] = C(
+  const s = l(null), { t: g } = C(), e = l(null), f = l(!1), [{ isOver: c }, m] = N(
     () => ({
-      accept: N,
+      accept: E,
       hover: (r, x) => {
         r.listId !== t || !x.getClientOffset() || !s.current || f.current || (f.current = !0, e.current && clearTimeout(e.current), a());
       },

package/dist/components/Common/ReorderableList/ReorderableItem.js

@@ -2,11 +2,11 @@ import { jsxs as K, jsx as o } from "react/jsx-runtime";
 import { memo as z, useRef as h, useEffect as N, useCallback as F } from "react";
 import H from "classnames";
 import { useTranslation as M } from "react-i18next";
-import { useDrag as U } from "react-dnd";
 import s from "./ReorderableList.module.scss.js";
-import { ITEM_TYPE as V } from "./constants.js";
-import Y from "../../../assets/icons/list.svg.js";
-import { useComponentContext as _ } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { ITEM_TYPE as U } from "./constants.js";
+import V from "../../../assets/icons/list.svg.js";
+import { useComponentContext as Y } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+import { useDrag as _ } from "../../../node_modules/react-dnd/dist/hooks/useDrag/useDrag.js";
 import { VisuallyHidden as $ } from "../VisuallyHidden/VisuallyHidden.js";
 const I = z(function({
   item: m,
@@ -24,13 +24,13 @@ const I = z(function({
   renderDragHandle: T,
   className: S
 }) {
-  const g = h(null), l = h(null), { t: f } = M("common"), B = _(), n = m.label, k = h(!1);
+  const g = h(null), l = h(null), { t: f } = M("common"), B = Y(), n = m.label, k = h(!1);
   N(() => {
     y && l.current && l.current.focus();
   }, [y]);
-  const [{ isDragging: b }, P, E] = U(
+  const [{ isDragging: b }, P, E] = _(
     () => ({
-      type: V,
+      type: U,
       item: () => (k.current = !0, d(!0), { index: a, listId: p }),
       collect: (r) => ({
         isDragging: r.isDragging()
@@ -125,7 +125,7 @@ const I = z(function({
             buttonRef: (r) => {
               r && (l.current = r, P(r));
             },
-            children: /* @__PURE__ */ o(Y, {})
+            children: /* @__PURE__ */ o(V, {})
           }
         ) }),
         /* @__PURE__ */ o("div", { className: s.contentContainer, children: m.content })

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

@@ -1,11 +1,11 @@
 import { jsx as s, jsxs as M } from "react/jsx-runtime";
 import { useRef as $, useState as p, useMemo as U, useEffect as G, useCallback as R } from "react";
 import T from "classnames";
-import { DndProvider as z } from "react-dnd";
-import { HTML5Backend as J } from "react-dnd-html5-backend";
+import { HTML5Backend as z } from "../../../node_modules/react-dnd-html5-backend/dist/index.js";
 import g from "./ReorderableList.module.scss.js";
-import { ReorderableItem as K } from "./ReorderableItem.js";
+import { ReorderableItem as J } from "./ReorderableItem.js";
 import { DropZone as O } from "./DropZone.js";
+import { DndProvider as K } from "../../../node_modules/react-dnd/dist/core/DndProvider.js";
 function Q(t = "reorderable-list") {
   return `${t}-${Math.random().toString(36).slice(2, 9)}`;
 }
@@ -106,7 +106,7 @@ function ce({
         ) : null;
       })
     }
-  ) : /* @__PURE__ */ s(z, { backend: J, children: /* @__PURE__ */ M(
+  ) : /* @__PURE__ */ s(K, { backend: z, children: /* @__PURE__ */ M(
     "div",
     {
       role: "list",
@@ -143,7 +143,7 @@ function ce({
           const l = t[r];
           return l ? /* @__PURE__ */ M("div", { children: [
             /* @__PURE__ */ s(
-              K,
+              J,
               {
                 item: l,
                 index: e,

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

@@ -1,29 +1,26 @@
 import { jsx as r } from "react/jsx-runtime";
 import { z as o } from "zod";
 import { useForm as s, FormProvider as a } from "react-hook-form";
-import { zodResolver as l } from "/home/runner/work/embedded-react-sdk/embedded-react-sdk/node_modules/@hookform/resolvers/zod/dist/zod.mjs";
+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 "classnames";
-import "../../../shared/constants.js";
-import "react-i18next";
 const f = o.object({
   signature: o.string().min(1),
   confirmSignature: o.literal(!0)
-}), p = {
+}), d = {
   signature: ""
 };
-function D({ onSubmit: m, children: i, formProps: n }) {
+function b({ onSubmit: m, children: i, formProps: n }) {
   const e = s({
     resolver: l(f),
-    defaultValues: p,
+    defaultValues: d,
     ...n
   });
   return /* @__PURE__ */ r(a, { ...e, children: /* @__PURE__ */ r(u, { onSubmit: e.handleSubmit(m), className: t.container, children: /* @__PURE__ */ r("div", { className: t.formFields, children: /* @__PURE__ */ r(c, { flexDirection: "column", gap: 20, children: i }) }) }) });
 }
 export {
-  D as SignatureForm,
+  b as SignatureForm,
   f as SignatureFormSchema
 };
 //# sourceMappingURL=SignatureForm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SignatureForm.js","sources":["../../../../src/components/Common/SignatureForm/SignatureForm.tsx"],"sourcesContent":["import { z } from 'zod'\nimport { FormProvider, useForm, type UseFormProps } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport styles from './SignatureForm.module.scss'\nimport { Form } from '@/components/Common/Form'\nimport { Flex } from '@/components/Common'\n\nexport const SignatureFormSchema = z.object({\n  signature: z.string().min(1),\n  confirmSignature: z.literal(true),\n})\n\nconst signatureFormDefaultValues = {\n  signature: '',\n}\n\nexport type SignatureFormInputs = z.infer<typeof SignatureFormSchema>\n\ninterface SignatureFormProps {\n  onSubmit: (data: SignatureFormInputs) => void | Promise<void>\n  children?: React.ReactNode\n  formProps?: Partial<UseFormProps<SignatureFormInputs>>\n}\n\nexport function SignatureForm({ onSubmit, children, formProps }: SignatureFormProps) {\n  const methods = useForm<SignatureFormInputs>({\n    resolver: zodResolver(SignatureFormSchema),\n    defaultValues: signatureFormDefaultValues,\n    ...formProps,\n  })\n\n  return (\n    <FormProvider {...methods}>\n      <Form onSubmit={methods.handleSubmit(onSubmit)} className={styles.container}>\n        <div className={styles.formFields}>\n          <Flex flexDirection=\"column\" gap={20}>\n            {children}\n          </Flex>\n        </div>\n      </Form>\n    </FormProvider>\n  )\n}\n"],"names":["SignatureFormSchema","z","signatureFormDefaultValues","SignatureForm","onSubmit","children","formProps","methods","useForm","zodResolver","jsx","FormProvider","Form","styles","Flex"],"mappings":";;;;;;;;;;AAOO,MAAMA,IAAsBC,EAAE,OAAO;AAAA,EAC1C,WAAWA,EAAE,SAAS,IAAI,CAAC;AAAA,EAC3B,kBAAkBA,EAAE,QAAQ,EAAI;AAClC,CAAC,GAEKC,IAA6B;AAAA,EACjC,WAAW;AACb;AAUO,SAASC,EAAc,EAAE,UAAAC,GAAU,UAAAC,GAAU,WAAAC,KAAiC;AACnF,QAAMC,IAAUC,EAA6B;AAAA,IAC3C,UAAUC,EAAYT,CAAmB;AAAA,IACzC,eAAeE;AAAA,IACf,GAAGI;AAAA,EAAA,CACJ;AAED,SACE,gBAAAI,EAACC,GAAA,EAAc,GAAGJ,GAChB,UAAA,gBAAAG,EAACE,GAAA,EAAK,UAAUL,EAAQ,aAAaH,CAAQ,GAAG,WAAWS,EAAO,WAChE,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWG,EAAO,YACrB,UAAA,gBAAAH,EAACI,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAAT,EAAA,CACH,EAAA,CACF,EAAA,CACF,GACF;AAEJ;"}
+{"version":3,"file":"SignatureForm.js","sources":["../../../../src/components/Common/SignatureForm/SignatureForm.tsx"],"sourcesContent":["import { z } from 'zod'\nimport { FormProvider, useForm, type UseFormProps } from 'react-hook-form'\nimport { zodResolver } from '@hookform/resolvers/zod'\nimport styles from './SignatureForm.module.scss'\nimport { Form } from '@/components/Common/Form'\nimport { Flex } from '@/components/Common'\n\nexport const SignatureFormSchema = z.object({\n  signature: z.string().min(1),\n  confirmSignature: z.literal(true),\n})\n\nconst signatureFormDefaultValues = {\n  signature: '',\n}\n\nexport type SignatureFormInputs = z.infer<typeof SignatureFormSchema>\n\ninterface SignatureFormProps {\n  onSubmit: (data: SignatureFormInputs) => void | Promise<void>\n  children?: React.ReactNode\n  formProps?: Partial<UseFormProps<SignatureFormInputs>>\n}\n\nexport function SignatureForm({ onSubmit, children, formProps }: SignatureFormProps) {\n  const methods = useForm<SignatureFormInputs>({\n    resolver: zodResolver(SignatureFormSchema),\n    defaultValues: signatureFormDefaultValues,\n    ...formProps,\n  })\n\n  return (\n    <FormProvider {...methods}>\n      <Form onSubmit={methods.handleSubmit(onSubmit)} className={styles.container}>\n        <div className={styles.formFields}>\n          <Flex flexDirection=\"column\" gap={20}>\n            {children}\n          </Flex>\n        </div>\n      </Form>\n    </FormProvider>\n  )\n}\n"],"names":["SignatureFormSchema","z","signatureFormDefaultValues","SignatureForm","onSubmit","children","formProps","methods","useForm","zodResolver","jsx","FormProvider","Form","styles","Flex"],"mappings":";;;;;;;AAOO,MAAMA,IAAsBC,EAAE,OAAO;AAAA,EAC1C,WAAWA,EAAE,SAAS,IAAI,CAAC;AAAA,EAC3B,kBAAkBA,EAAE,QAAQ,EAAI;AAClC,CAAC,GAEKC,IAA6B;AAAA,EACjC,WAAW;AACb;AAUO,SAASC,EAAc,EAAE,UAAAC,GAAU,UAAAC,GAAU,WAAAC,KAAiC;AACnF,QAAMC,IAAUC,EAA6B;AAAA,IAC3C,UAAUC,EAAYT,CAAmB;AAAA,IACzC,eAAeE;AAAA,IACf,GAAGI;AAAA,EAAA,CACJ;AAED,SACE,gBAAAI,EAACC,GAAA,EAAc,GAAGJ,GAChB,UAAA,gBAAAG,EAACE,GAAA,EAAK,UAAUL,EAAQ,aAAaH,CAAQ,GAAG,WAAWS,EAAO,WAChE,UAAA,gBAAAH,EAAC,OAAA,EAAI,WAAWG,EAAO,YACrB,UAAA,gBAAAH,EAACI,GAAA,EAAK,eAAc,UAAS,KAAK,IAC/B,UAAAT,EAAA,CACH,EAAA,CACF,EAAA,CACF,GACF;AAEJ;"}

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

@@ -1,22 +1,19 @@
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import "classnames";
-import "../../../shared/constants.js";
-import "react-i18next";
-import { ActionsLayout as p } from "../ActionsLayout/ActionsLayout.js";
-import { useComponentContext as s } from "../../../contexts/ComponentAdapter/useComponentContext.js";
-function x({
+import { jsxs as s, jsx as n } from "react/jsx-runtime";
+import { ActionsLayout as m } from "../ActionsLayout/ActionsLayout.js";
+import { useComponentContext as u } from "../../../contexts/ComponentAdapter/useComponentContext.js";
+function f({
   onBack: t,
   backLabel: r,
-  submitLabel: i,
-  isLoading: e = !1
+  submitLabel: e,
+  isLoading: i = !1
 }) {
-  const o = s();
-  return /* @__PURE__ */ m(p, { children: [
+  const o = u();
+  return /* @__PURE__ */ s(m, { children: [
     t && /* @__PURE__ */ n(o.Button, { variant: "secondary", type: "button", onClick: t, children: r }),
-    /* @__PURE__ */ n(o.Button, { type: "submit", isLoading: e, children: i })
+    /* @__PURE__ */ n(o.Button, { type: "submit", isLoading: i, children: e })
   ] });
 }
 export {
-  x as SignatureFormActions
+  f as SignatureFormActions
 };
 //# sourceMappingURL=SignatureFormActions.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SignatureFormActions.js","sources":["../../../../src/components/Common/SignatureForm/SignatureFormActions.tsx"],"sourcesContent":["import { ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ninterface SignatureFormActionsProps {\n  onBack?: () => void\n  backLabel: string\n  submitLabel: string\n  isLoading?: boolean\n}\n\nexport function SignatureFormActions({\n  onBack,\n  backLabel,\n  submitLabel,\n  isLoading = false,\n}: SignatureFormActionsProps) {\n  const Components = useComponentContext()\n\n  return (\n    <ActionsLayout>\n      {onBack && (\n        <Components.Button variant=\"secondary\" type=\"button\" onClick={onBack}>\n          {backLabel}\n        </Components.Button>\n      )}\n      <Components.Button type=\"submit\" isLoading={isLoading}>\n        {submitLabel}\n      </Components.Button>\n    </ActionsLayout>\n  )\n}\n"],"names":["SignatureFormActions","onBack","backLabel","submitLabel","isLoading","Components","useComponentContext","ActionsLayout","jsx"],"mappings":";;;;;;AAUO,SAASA,EAAqB;AAAA,EACnC,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAA8B;AAC5B,QAAMC,IAAaC,EAAA;AAEnB,2BACGC,GAAA,EACE,UAAA;AAAA,IAAAN,KACC,gBAAAO,EAACH,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASJ,GAC3D,UAAAC,EAAA,CACH;AAAA,sBAEDG,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAAD,GAC9B,UAAAD,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"SignatureFormActions.js","sources":["../../../../src/components/Common/SignatureForm/SignatureFormActions.tsx"],"sourcesContent":["import { ActionsLayout } from '@/components/Common'\nimport { useComponentContext } from '@/contexts/ComponentAdapter/useComponentContext'\n\ninterface SignatureFormActionsProps {\n  onBack?: () => void\n  backLabel: string\n  submitLabel: string\n  isLoading?: boolean\n}\n\nexport function SignatureFormActions({\n  onBack,\n  backLabel,\n  submitLabel,\n  isLoading = false,\n}: SignatureFormActionsProps) {\n  const Components = useComponentContext()\n\n  return (\n    <ActionsLayout>\n      {onBack && (\n        <Components.Button variant=\"secondary\" type=\"button\" onClick={onBack}>\n          {backLabel}\n        </Components.Button>\n      )}\n      <Components.Button type=\"submit\" isLoading={isLoading}>\n        {submitLabel}\n      </Components.Button>\n    </ActionsLayout>\n  )\n}\n"],"names":["SignatureFormActions","onBack","backLabel","submitLabel","isLoading","Components","useComponentContext","ActionsLayout","jsx"],"mappings":";;;AAUO,SAASA,EAAqB;AAAA,EACnC,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AACd,GAA8B;AAC5B,QAAMC,IAAaC,EAAA;AAEnB,2BACGC,GAAA,EACE,UAAA;AAAA,IAAAN,KACC,gBAAAO,EAACH,EAAW,QAAX,EAAkB,SAAQ,aAAY,MAAK,UAAS,SAASJ,GAC3D,UAAAC,EAAA,CACH;AAAA,sBAEDG,EAAW,QAAX,EAAkB,MAAK,UAAS,WAAAD,GAC9B,UAAAD,EAAA,CACH;AAAA,EAAA,GACF;AAEJ;"}

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

@@ -1,39 +1,36 @@
-import { jsxs as n, Fragment as s, jsx as r } from "react/jsx-runtime";
-import "classnames";
-import "../../../shared/constants.js";
-import "react-i18next";
+import { jsxs as s, Fragment as m, jsx as e } from "react/jsx-runtime";
 import { TextInputField as a } from "../Fields/TextInputField/TextInputField.js";
 import { CheckboxField as u } from "../Fields/CheckboxField/CheckboxField.js";
-function x({
-  signatureLabel: e,
+function p({
+  signatureLabel: r,
   signatureDescription: i = "",
   signatureError: t = "",
   confirmationLabel: o,
-  confirmationError: m = ""
+  confirmationError: n = ""
 }) {
-  return /* @__PURE__ */ n(s, { children: [
-    /* @__PURE__ */ r(
+  return /* @__PURE__ */ s(m, { children: [
+    /* @__PURE__ */ e(
       a,
       {
         name: "signature",
-        label: e,
+        label: r,
         description: i,
         errorMessage: t,
         isRequired: !0
       }
     ),
-    /* @__PURE__ */ r(
+    /* @__PURE__ */ e(
       u,
       {
         name: "confirmSignature",
         isRequired: !0,
         label: o,
-        errorMessage: m
+        errorMessage: n
       }
     )
   ] });
 }
 export {
-  x as SignatureFormFields
+  p as SignatureFormFields
 };
 //# sourceMappingURL=SignatureFormFields.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SignatureFormFields.js","sources":["../../../../src/components/Common/SignatureForm/SignatureFormFields.tsx"],"sourcesContent":["import { TextInputField, CheckboxField } from '@/components/Common'\n\ninterface SignatureFormFieldsProps {\n  signatureLabel: string\n  signatureDescription?: string\n  signatureError?: string\n  confirmationLabel: string\n  confirmationError?: string\n}\n\nexport function SignatureFormFields({\n  signatureLabel,\n  signatureDescription = '',\n  signatureError = '',\n  confirmationLabel,\n  confirmationError = '',\n}: SignatureFormFieldsProps) {\n  return (\n    <>\n      <TextInputField\n        name=\"signature\"\n        label={signatureLabel}\n        description={signatureDescription}\n        errorMessage={signatureError}\n        isRequired\n      />\n      <CheckboxField\n        name=\"confirmSignature\"\n        isRequired\n        label={confirmationLabel}\n        errorMessage={confirmationError}\n      />\n    </>\n  )\n}\n"],"names":["SignatureFormFields","signatureLabel","signatureDescription","signatureError","confirmationLabel","confirmationError","jsxs","Fragment","jsx","TextInputField","CheckboxField"],"mappings":";;;;;;AAUO,SAASA,EAAoB;AAAA,EAClC,gBAAAC;AAAA,EACA,sBAAAC,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AAAA,EACjB,mBAAAC;AAAA,EACA,mBAAAC,IAAoB;AACtB,GAA6B;AAC3B,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOR;AAAA,QACP,aAAaC;AAAA,QACb,cAAcC;AAAA,QACd,YAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAK;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAON;AAAA,QACP,cAAcC;AAAA,MAAA;AAAA,IAAA;AAAA,EAChB,GACF;AAEJ;"}
+{"version":3,"file":"SignatureFormFields.js","sources":["../../../../src/components/Common/SignatureForm/SignatureFormFields.tsx"],"sourcesContent":["import { TextInputField, CheckboxField } from '@/components/Common'\n\ninterface SignatureFormFieldsProps {\n  signatureLabel: string\n  signatureDescription?: string\n  signatureError?: string\n  confirmationLabel: string\n  confirmationError?: string\n}\n\nexport function SignatureFormFields({\n  signatureLabel,\n  signatureDescription = '',\n  signatureError = '',\n  confirmationLabel,\n  confirmationError = '',\n}: SignatureFormFieldsProps) {\n  return (\n    <>\n      <TextInputField\n        name=\"signature\"\n        label={signatureLabel}\n        description={signatureDescription}\n        errorMessage={signatureError}\n        isRequired\n      />\n      <CheckboxField\n        name=\"confirmSignature\"\n        isRequired\n        label={confirmationLabel}\n        errorMessage={confirmationError}\n      />\n    </>\n  )\n}\n"],"names":["SignatureFormFields","signatureLabel","signatureDescription","signatureError","confirmationLabel","confirmationError","jsxs","Fragment","jsx","TextInputField","CheckboxField"],"mappings":";;;AAUO,SAASA,EAAoB;AAAA,EAClC,gBAAAC;AAAA,EACA,sBAAAC,IAAuB;AAAA,EACvB,gBAAAC,IAAiB;AAAA,EACjB,mBAAAC;AAAA,EACA,mBAAAC,IAAoB;AACtB,GAA6B;AAC3B,SACE,gBAAAC,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,OAAOR;AAAA,QACP,aAAaC;AAAA,QACb,cAAcC;AAAA,QACd,YAAU;AAAA,MAAA;AAAA,IAAA;AAAA,IAEZ,gBAAAK;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,YAAU;AAAA,QACV,OAAON;AAAA,QACP,cAAcC;AAAA,MAAA;AAAA,IAAA;AAAA,EAChB,GACF;AAEJ;"}

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

@@ -1,2 +1,2 @@
 import { AlertProps } from './AlertTypes';
-export declare function Alert({ label, children, status, icon, className }: AlertProps): import("react/jsx-runtime").JSX.Element;
+export declare function Alert(rawProps: AlertProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,32 +1,39 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { useId as d, useRef as f, useEffect as h } from "react";
-import u from "classnames";
-import i from "./Alert.module.scss.js";
-import v from "../../../../assets/icons/info.svg.js";
-import p from "../../../../assets/icons/success_check.svg.js";
-import g from "../../../../assets/icons/warning.svg.js";
-import N from "../../../../assets/icons/error.svg.js";
-function R({ label: a, children: t, status: e = "info", icon: c, className: l }) {
-  const n = d(), o = f(null), s = e === "info" ? /* @__PURE__ */ r(v, { "aria-hidden": !0 }) : e === "success" ? /* @__PURE__ */ r(p, { "aria-hidden": !0 }) : e === "warning" ? /* @__PURE__ */ r(g, { "aria-hidden": !0 }) : /* @__PURE__ */ r(N, { "aria-hidden": !0 });
-  return h(() => {
-    o.current && o.current.scrollIntoView({ behavior: "smooth" });
-  }, []), /* @__PURE__ */ r("div", { className: u(i.root, l), children: /* @__PURE__ */ m(
+import { jsx as r, jsxs as a } from "react/jsx-runtime";
+import { useId as u, useRef as p, useEffect as v } from "react";
+import g from "classnames";
+import { ButtonIcon as N } from "../Button/ButtonIcon.js";
+import { AlertDefaults as S } from "./AlertTypes.js";
+import e from "./Alert.module.scss.js";
+import { applyMissingDefaults as b } from "../../../../helpers/applyMissingDefaults.js";
+import I from "../../../../assets/icons/info.svg.js";
+import y from "../../../../assets/icons/success_check.svg.js";
+import D from "../../../../assets/icons/warning.svg.js";
+import w from "../../../../assets/icons/error.svg.js";
+import x from "../../../../assets/icons/close.svg.js";
+function z(n) {
+  const l = b(n, S), { label: c, children: m, status: i, icon: d, className: f, onDismiss: t } = l, o = u(), s = p(null), h = i === "info" ? /* @__PURE__ */ r(I, { "aria-hidden": !0 }) : i === "success" ? /* @__PURE__ */ r(y, { "aria-hidden": !0 }) : i === "warning" ? /* @__PURE__ */ r(D, { "aria-hidden": !0 }) : /* @__PURE__ */ r(w, { "aria-hidden": !0 });
+  return v(() => {
+    s.current && s.current.scrollIntoView({ behavior: "smooth" });
+  }, []), /* @__PURE__ */ r("div", { className: g(e.root, f), children: /* @__PURE__ */ a(
     "div",
     {
-      className: i.alert,
+      className: e.alert,
       role: "alert",
-      "aria-labelledby": n,
-      "data-variant": e,
-      ref: o,
+      "aria-labelledby": o,
+      "data-variant": i,
+      ref: s,
       children: [
-        /* @__PURE__ */ r("div", { className: i.icon, children: c || s }),
-        /* @__PURE__ */ r("h6", { id: n, children: a }),
-        /* @__PURE__ */ r("div", { className: i.content, children: t })
+        /* @__PURE__ */ r("div", { className: e.icon, children: d || h }),
+        /* @__PURE__ */ a("div", { className: e.contentWrapper, children: [
+          /* @__PURE__ */ r("h6", { id: o, children: c }),
+          /* @__PURE__ */ r("div", { className: e.content, children: m })
+        ] }),
+        t && /* @__PURE__ */ r("div", { className: e.dismiss, children: /* @__PURE__ */ r(N, { variant: "tertiary", onClick: t, "aria-label": "Dismiss alert", children: /* @__PURE__ */ r(x, { width: 36, height: 36 }) }) })
       ]
     }
   ) });
 }
 export {
-  R as Alert
+  z as Alert
 };
 //# sourceMappingURL=Alert.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Common/UI/Alert/Alert.tsx"],"sourcesContent":["import { useEffect, useId, useRef } from 'react'\nimport classNames from 'classnames'\nimport { type AlertProps } from './AlertTypes'\nimport styles from './Alert.module.scss'\nimport InfoIcon from '@/assets/icons/info.svg?react'\nimport SuccessIcon from '@/assets/icons/success_check.svg?react'\nimport WarningIcon from '@/assets/icons/warning.svg?react'\nimport ErrorIcon from '@/assets/icons/error.svg?react'\n\nexport function Alert({ label, children, status = 'info', icon, className }: AlertProps) {\n  const id = useId()\n  const alertRef = useRef<HTMLDivElement>(null)\n  const defaultIcon =\n    status === 'info' ? (\n      <InfoIcon aria-hidden />\n    ) : status === 'success' ? (\n      <SuccessIcon aria-hidden />\n    ) : status === 'warning' ? (\n      <WarningIcon aria-hidden />\n    ) : (\n      <ErrorIcon aria-hidden />\n    )\n\n  useEffect(() => {\n    if (alertRef.current) alertRef.current.scrollIntoView({ behavior: 'smooth' })\n  }, [])\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <div\n        className={styles.alert}\n        role=\"alert\"\n        aria-labelledby={id}\n        data-variant={status}\n        ref={alertRef}\n      >\n        <div className={styles.icon}>{icon || defaultIcon}</div>\n        <h6 id={id}>{label}</h6>\n        <div className={styles.content}>{children}</div>\n      </div>\n    </div>\n  )\n}\n"],"names":["Alert","label","children","status","icon","className","id","useId","alertRef","useRef","defaultIcon","jsx","InfoIcon","SuccessIcon","WarningIcon","ErrorIcon","useEffect","classNames","styles","jsxs"],"mappings":";;;;;;;;AASO,SAASA,EAAM,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,IAAS,QAAQ,MAAAC,GAAM,WAAAC,KAAyB;AACvF,QAAMC,IAAKC,EAAA,GACLC,IAAWC,EAAuB,IAAI,GACtCC,IACJP,MAAW,SACT,gBAAAQ,EAACC,GAAA,EAAS,eAAW,GAAA,CAAC,IACpBT,MAAW,YACb,gBAAAQ,EAACE,GAAA,EAAY,eAAW,GAAA,CAAC,IACvBV,MAAW,YACb,gBAAAQ,EAACG,GAAA,EAAY,eAAW,GAAA,CAAC,IAEzB,gBAAAH,EAACI,GAAA,EAAU,eAAW,GAAA,CAAC;AAG3B,SAAAC,EAAU,MAAM;AACd,IAAIR,EAAS,WAASA,EAAS,QAAQ,eAAe,EAAE,UAAU,UAAU;AAAA,EAC9E,GAAG,CAAA,CAAE,qBAGF,OAAA,EAAI,WAAWS,EAAWC,EAAO,MAAMb,CAAS,GAC/C,UAAA,gBAAAc;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,EAAO;AAAA,MAClB,MAAK;AAAA,MACL,mBAAiBZ;AAAA,MACjB,gBAAcH;AAAA,MACd,KAAKK;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWO,EAAO,MAAO,eAAQR,GAAY;AAAA,QAClD,gBAAAC,EAAC,MAAA,EAAG,IAAAL,GAAS,UAAAL,EAAA,CAAM;AAAA,QACnB,gBAAAU,EAAC,OAAA,EAAI,WAAWO,EAAO,SAAU,UAAAhB,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAE9C;AAEJ;"}
+{"version":3,"file":"Alert.js","sources":["../../../../../src/components/Common/UI/Alert/Alert.tsx"],"sourcesContent":["import { useEffect, useId, useRef } from 'react'\nimport classNames from 'classnames'\nimport { ButtonIcon } from '../Button/ButtonIcon'\nimport { type AlertProps, AlertDefaults } from './AlertTypes'\nimport styles from './Alert.module.scss'\nimport { applyMissingDefaults } from '@/helpers/applyMissingDefaults'\nimport InfoIcon from '@/assets/icons/info.svg?react'\nimport SuccessIcon from '@/assets/icons/success_check.svg?react'\nimport WarningIcon from '@/assets/icons/warning.svg?react'\nimport ErrorIcon from '@/assets/icons/error.svg?react'\nimport CloseIcon from '@/assets/icons/close.svg?react'\n\nexport function Alert(rawProps: AlertProps) {\n  const resolvedProps = applyMissingDefaults(rawProps, AlertDefaults)\n  const { label, children, status, icon, className, onDismiss } = resolvedProps\n  const id = useId()\n  const alertRef = useRef<HTMLDivElement>(null)\n  const defaultIcon =\n    status === 'info' ? (\n      <InfoIcon aria-hidden />\n    ) : status === 'success' ? (\n      <SuccessIcon aria-hidden />\n    ) : status === 'warning' ? (\n      <WarningIcon aria-hidden />\n    ) : (\n      <ErrorIcon aria-hidden />\n    )\n\n  useEffect(() => {\n    if (alertRef.current) alertRef.current.scrollIntoView({ behavior: 'smooth' })\n  }, [])\n\n  return (\n    <div className={classNames(styles.root, className)}>\n      <div\n        className={styles.alert}\n        role=\"alert\"\n        aria-labelledby={id}\n        data-variant={status}\n        ref={alertRef}\n      >\n        <div className={styles.icon}>{icon || defaultIcon}</div>\n        <div className={styles.contentWrapper}>\n          <h6 id={id}>{label}</h6>\n          <div className={styles.content}>{children}</div>\n        </div>\n        {onDismiss && (\n          <div className={styles.dismiss}>\n            <ButtonIcon variant=\"tertiary\" onClick={onDismiss} aria-label=\"Dismiss alert\">\n              <CloseIcon width={36} height={36} />\n            </ButtonIcon>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["Alert","rawProps","resolvedProps","applyMissingDefaults","AlertDefaults","label","children","status","icon","className","onDismiss","id","useId","alertRef","useRef","defaultIcon","jsx","InfoIcon","SuccessIcon","WarningIcon","ErrorIcon","useEffect","classNames","styles","jsxs","ButtonIcon","CloseIcon"],"mappings":";;;;;;;;;;;;AAYO,SAASA,EAAMC,GAAsB;AAC1C,QAAMC,IAAgBC,EAAqBF,GAAUG,CAAa,GAC5D,EAAE,OAAAC,GAAO,UAAAC,GAAU,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,WAAAC,MAAcR,GAC1DS,IAAKC,EAAA,GACLC,IAAWC,EAAuB,IAAI,GACtCC,IACJR,MAAW,SACT,gBAAAS,EAACC,GAAA,EAAS,eAAW,GAAA,CAAC,IACpBV,MAAW,YACb,gBAAAS,EAACE,GAAA,EAAY,eAAW,GAAA,CAAC,IACvBX,MAAW,YACb,gBAAAS,EAACG,GAAA,EAAY,eAAW,GAAA,CAAC,IAEzB,gBAAAH,EAACI,GAAA,EAAU,eAAW,GAAA,CAAC;AAG3B,SAAAC,EAAU,MAAM;AACd,IAAIR,EAAS,WAASA,EAAS,QAAQ,eAAe,EAAE,UAAU,UAAU;AAAA,EAC9E,GAAG,CAAA,CAAE,qBAGF,OAAA,EAAI,WAAWS,EAAWC,EAAO,MAAMd,CAAS,GAC/C,UAAA,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWD,EAAO;AAAA,MAClB,MAAK;AAAA,MACL,mBAAiBZ;AAAA,MACjB,gBAAcJ;AAAA,MACd,KAAKM;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAAG,EAAC,OAAA,EAAI,WAAWO,EAAO,MAAO,eAAQR,GAAY;AAAA,QAClD,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAO,gBACrB,UAAA;AAAA,UAAA,gBAAAP,EAAC,MAAA,EAAG,IAAAL,GAAS,UAAAN,EAAA,CAAM;AAAA,UACnB,gBAAAW,EAAC,OAAA,EAAI,WAAWO,EAAO,SAAU,UAAAjB,EAAA,CAAS;AAAA,QAAA,GAC5C;AAAA,QACCI,uBACE,OAAA,EAAI,WAAWa,EAAO,SACrB,UAAA,gBAAAP,EAACS,KAAW,SAAQ,YAAW,SAASf,GAAW,cAAW,iBAC5D,UAAA,gBAAAM,EAACU,GAAA,EAAU,OAAO,IAAI,QAAQ,GAAA,CAAI,EAAA,CACpC,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;"}

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

@@ -1,13 +1,17 @@
-const t = "_root_1pj1j_1", o = "_alert_1pj1j_1", n = "_icon_1pj1j_14", _ = "_content_1pj1j_29", c = {
+const t = "_root_bw473_1", o = "_alert_bw473_1", n = "_icon_bw473_15", s = "_contentWrapper_bw473_23", _ = "_content_bw473_23", c = "_dismiss_bw473_41", e = {
   root: t,
   alert: o,
   icon: n,
-  content: _
+  contentWrapper: s,
+  content: _,
+  dismiss: c
 };
 export {
   o as alert,
   _ as content,
-  c as default,
+  s as contentWrapper,
+  e as default,
+  c as dismiss,
   n as icon,
   t as root
 };

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

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

package/dist/components/Common/UI/Alert/AlertTypes.d.ts

@@ -20,4 +20,14 @@ export interface AlertProps {
      * CSS className to be applied
      */
     className?: string;
+    /**
+     * Optional callback function called when the dismiss button is clicked
+     */
+    onDismiss?: () => void;
 }
+/**
+ * Default prop values for Alert component.
+ */
+export declare const AlertDefaults: {
+    readonly status: "info";
+};

package/dist/components/Common/UI/Alert/AlertTypes.js

@@ -0,0 +1,7 @@
+const t = {
+  status: "info"
+};
+export {
+  t as AlertDefaults
+};
+//# sourceMappingURL=AlertTypes.js.map

package/dist/components/Common/UI/Alert/AlertTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AlertTypes.js","sources":["../../../../../src/components/Common/UI/Alert/AlertTypes.ts"],"sourcesContent":["import type { ReactNode } from 'react'\n\nexport interface AlertProps {\n  /**\n   * The visual status that the alert should convey\n   */\n  status?: 'info' | 'success' | 'warning' | 'error'\n  /**\n   * The label text for the alert\n   */\n  label: string\n  /**\n   * Optional children to be rendered inside the alert\n   */\n  children?: ReactNode\n  /**\n   * Optional custom icon component to override the default icon\n   */\n  icon?: ReactNode\n  /**\n   * CSS className to be applied\n   */\n  className?: string\n  /**\n   * Optional callback function called when the dismiss button is clicked\n   */\n  onDismiss?: () => void\n}\n\n/**\n * Default prop values for Alert component.\n */\nexport const AlertDefaults = {\n  status: 'info',\n} as const satisfies Partial<AlertProps>\n"],"names":["AlertDefaults"],"mappings":"AAgCO,MAAMA,IAAgB;AAAA,EAC3B,QAAQ;AACV;"}