@cuemath/leap 3.1.17-hg3 → 3.1.18

package/dist/features/ui/inputs/searchable-select-input/searchable-select-input.js

@@ -3,26 +3,26 @@ import { useState as g, useMemo as v, useCallback as i, useEffect as u } from "r
 import y from "../../../hooks/use-previous.js";
 import I from "../base-select-input/base-select-input.js";
 import O from "./use-filtered-options.js";
-const F = (f) => {
+const W = (f) => {
   const {
-    defaultSearchText: s,
+    defaultSearchText: n,
     controlled: d = !1,
-    options: n,
+    options: s,
     onChange: r,
-    onClear: c,
+    onClear: l,
     value: t,
     ...p
-  } = f, [o, a] = g(s), h = y(t), S = v(
+  } = f, [o, a] = g(n), h = y(t), S = v(
     () => {
       var e;
-      return o === void 0 && n instanceof Array ? (e = n.find((l) => l.id === t)) == null ? void 0 : e.label : void 0;
+      return o === void 0 && s instanceof Array ? (e = s.find((c) => c.id === t)) == null ? void 0 : e.label : void 0;
     },
-    [o, n, t]
-  ), m = O(n, o), x = i(() => {
-    c && c();
-  }, [c]), C = i(
-    (e, l) => {
-      a(l.label), r(e, l);
+    [o, s, t]
+  ), m = O(s, o), x = i(() => {
+    l && l();
+  }, [l]), C = i(
+    (e, c) => {
+      a(c.label), r(e, c);
     },
     [r]
   ), T = i(
@@ -32,8 +32,8 @@ const F = (f) => {
     [r]
   );
   return u(() => {
-    a(s);
-  }, [s]), u(() => {
+    a(n);
+  }, [n]), u(() => {
     h && t === void 0 && o && a("");
   }, [t, a, o, h]), /* @__PURE__ */ b(
     I,
@@ -41,15 +41,15 @@ const F = (f) => {
       ...p,
       value: t,
       searchable: !0,
-      searchText: d ? s : o ?? S ?? "",
+      searchText: d ? n : o ?? S ?? "",
       onSearchTextChange: T,
       options: m,
       onChange: C,
       onCloseWithoutSelection: x
     }
   );
-};
+}, M = W;
 export {
-  F as default
+  M as default
 };
 //# sourceMappingURL=searchable-select-input.js.map

package/dist/features/ui/inputs/searchable-select-input/searchable-select-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"searchable-select-input.js","sources":["../../../../../src/features/ui/inputs/searchable-select-input/searchable-select-input.tsx"],"sourcesContent":["import type { ISelectOption } from '../base-select-input/base-select-input-types';\nimport type { ISearchableSelectInputProps } from './searchable-select-input-types';\n\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport usePrevious from '../../../hooks/use-previous';\nimport BaseSelectInput from '../base-select-input/base-select-input';\nimport useFilteredOptions from './use-filtered-options';\n\nconst SearchableSelectInput = <IDType extends string | number>(\n  props: ISearchableSelectInputProps<IDType>,\n): JSX.Element => {\n  const {\n    defaultSearchText,\n    controlled = false,\n    options,\n    onChange,\n    onClear,\n    value,\n    ...rest\n  } = props;\n\n  const [searchText, setSearchText] = useState<undefined | string>(defaultSearchText);\n  const prevValue = usePrevious(value);\n  const label = useMemo(\n    () =>\n      searchText === undefined && options instanceof Array\n        ? options.find(option => option.id === value)?.label\n        : undefined,\n    [searchText, options, value],\n  );\n  const filteredOptions = useFilteredOptions(options, searchText);\n\n  const handleCloseWithoutSelection = useCallback(() => {\n    if (onClear) {\n      onClear();\n    }\n  }, [onClear]);\n\n  const handleChange = useCallback<ISearchableSelectInputProps<IDType>['onChange']>(\n    (id, option) => {\n      setSearchText(option.label);\n      onChange(id, option);\n    },\n    [onChange],\n  );\n\n  const handleSearchText = useCallback(\n    (val: string) => {\n      setSearchText(val);\n\n      if (!val) {\n        onChange(val as IDType, {} as ISelectOption<IDType>);\n      }\n    },\n    [onChange],\n  );\n\n  useEffect(() => {\n    setSearchText(defaultSearchText);\n  }, [defaultSearchText]);\n\n  useEffect(() => {\n    if (prevValue && value === undefined && searchText) {\n      setSearchText('');\n    }\n  }, [value, setSearchText, searchText, prevValue]);\n\n  const displaySearchText = controlled ? defaultSearchText : searchText ?? label ?? '';\n\n  return (\n    <BaseSelectInput<IDType>\n      {...rest}\n      value={value}\n      searchable\n      searchText={displaySearchText}\n      onSearchTextChange={handleSearchText}\n      options={filteredOptions}\n      onChange={handleChange}\n      onCloseWithoutSelection={handleCloseWithoutSelection}\n    />\n  );\n};\n\nexport default SearchableSelectInput;\n"],"names":["SearchableSelectInput","props","defaultSearchText","controlled","options","onChange","onClear","value","rest","searchText","setSearchText","useState","prevValue","usePrevious","label","useMemo","_a","option","filteredOptions","useFilteredOptions","handleCloseWithoutSelection","useCallback","handleChange","id","handleSearchText","val","useEffect","jsx","BaseSelectInput"],"mappings":";;;;;AASM,MAAAA,IAAwB,CAC5BC,MACgB;AACV,QAAA;AAAA,IACJ,mBAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDP,GAEE,CAACQ,GAAYC,CAAa,IAAIC,EAA6BT,CAAiB,GAC5EU,IAAYC,EAAYN,CAAK,GAC7BO,IAAQC;AAAA,IACZ,MAAA;;AACE,aAAAN,MAAe,UAAaL,aAAmB,SAC3CY,IAAAZ,EAAQ,KAAK,CAAAa,MAAUA,EAAO,OAAOV,CAAK,MAA1C,gBAAAS,EAA6C,QAC7C;AAAA;AAAA,IACN,CAACP,GAAYL,GAASG,CAAK;AAAA,EAC7B,GACMW,IAAkBC,EAAmBf,GAASK,CAAU,GAExDW,IAA8BC,EAAY,MAAM;AACpD,IAAIf,KACMA,EAAA;AAAA,EACV,GACC,CAACA,CAAO,CAAC,GAENgB,IAAeD;AAAA,IACnB,CAACE,GAAIN,MAAW;AACd,MAAAP,EAAcO,EAAO,KAAK,GAC1BZ,EAASkB,GAAIN,CAAM;AAAA,IACrB;AAAA,IACA,CAACZ,CAAQ;AAAA,EACX,GAEMmB,IAAmBH;AAAA,IACvB,CAACI,MAAgB;AACf,MAAAf,EAAce,CAAG,GAEZA,KACMpB,EAAAoB,GAAe,EAA2B;AAAA,IAEvD;AAAA,IACA,CAACpB,CAAQ;AAAA,EACX;AAEA,SAAAqB,EAAU,MAAM;AACd,IAAAhB,EAAcR,CAAiB;AAAA,EAAA,GAC9B,CAACA,CAAiB,CAAC,GAEtBwB,EAAU,MAAM;AACV,IAAAd,KAAaL,MAAU,UAAaE,KACtCC,EAAc,EAAE;AAAA,KAEjB,CAACH,GAAOG,GAAeD,GAAYG,CAAS,CAAC,GAK9C,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGpB;AAAA,MACJ,OAAAD;AAAA,MACA,YAAU;AAAA,MACV,YAPsBJ,IAAaD,IAAoBO,KAAcK,KAAS;AAAA,MAQ9E,oBAAoBU;AAAA,MACpB,SAASN;AAAA,MACT,UAAUI;AAAA,MACV,yBAAyBF;AAAA,IAAA;AAAA,EAC3B;AAEJ;"}
+{"version":3,"file":"searchable-select-input.js","sources":["../../../../../src/features/ui/inputs/searchable-select-input/searchable-select-input.tsx"],"sourcesContent":["import type { ISelectOption } from '../base-select-input/base-select-input-types';\nimport type { ISearchableSelectInputProps } from './searchable-select-input-types';\n\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport usePrevious from '../../../hooks/use-previous';\nimport BaseSelectInput from '../base-select-input/base-select-input';\nimport useFilteredOptions from './use-filtered-options';\n\nconst SearchableSelectInput = <IDType extends string | number>(\n  props: ISearchableSelectInputProps<IDType>,\n): JSX.Element => {\n  const {\n    defaultSearchText,\n    controlled = false,\n    options,\n    onChange,\n    onClear,\n    value,\n    ...rest\n  } = props;\n\n  const [searchText, setSearchText] = useState<undefined | string>(defaultSearchText);\n  const prevValue = usePrevious(value);\n  const label = useMemo(\n    () =>\n      searchText === undefined && options instanceof Array\n        ? options.find(option => option.id === value)?.label\n        : undefined,\n    [searchText, options, value],\n  );\n  const filteredOptions = useFilteredOptions(options, searchText);\n\n  const handleCloseWithoutSelection = useCallback(() => {\n    if (onClear) {\n      onClear();\n    }\n  }, [onClear]);\n\n  const handleChange = useCallback<ISearchableSelectInputProps<IDType>['onChange']>(\n    (id, option) => {\n      setSearchText(option.label);\n      onChange(id, option);\n    },\n    [onChange],\n  );\n\n  const handleSearchText = useCallback(\n    (val: string) => {\n      setSearchText(val);\n\n      if (!val) {\n        onChange(val as IDType, {} as ISelectOption<IDType>);\n      }\n    },\n    [onChange],\n  );\n\n  useEffect(() => {\n    setSearchText(defaultSearchText);\n  }, [defaultSearchText]);\n\n  useEffect(() => {\n    if (prevValue && value === undefined && searchText) {\n      setSearchText('');\n    }\n  }, [value, setSearchText, searchText, prevValue]);\n\n  const displaySearchText = controlled ? defaultSearchText : searchText ?? label ?? '';\n\n  return (\n    <BaseSelectInput<IDType>\n      {...rest}\n      value={value}\n      searchable\n      searchText={displaySearchText}\n      onSearchTextChange={handleSearchText}\n      options={filteredOptions}\n      onChange={handleChange}\n      onCloseWithoutSelection={handleCloseWithoutSelection}\n    />\n  );\n};\n\nexport default SearchableSelectInput;\n"],"names":["SearchableSelectInput","props","defaultSearchText","controlled","options","onChange","onClear","value","rest","searchText","setSearchText","useState","prevValue","usePrevious","label","useMemo","_a","option","filteredOptions","useFilteredOptions","handleCloseWithoutSelection","useCallback","handleChange","id","handleSearchText","val","useEffect","jsx","BaseSelectInput","SearchableSelectInput$1"],"mappings":";;;;;AASA,MAAMA,IAAwB,CAC5BC,MACgB;AACV,QAAA;AAAA,IACJ,mBAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAP,GAEE,CAACQ,GAAYC,CAAa,IAAIC,EAA6BT,CAAiB,GAC5EU,IAAYC,EAAYN,CAAK,GAC7BO,IAAQC;AAAA,IACZ,MAAA;;AACE,aAAAN,MAAe,UAAaL,aAAmB,SAC3CY,IAAAZ,EAAQ,KAAK,CAAAa,MAAUA,EAAO,OAAOV,CAAK,MAA1C,gBAAAS,EAA6C,QAC7C;AAAA;AAAA,IACN,CAACP,GAAYL,GAASG,CAAK;AAAA,EAAA,GAEvBW,IAAkBC,EAAmBf,GAASK,CAAU,GAExDW,IAA8BC,EAAY,MAAM;AACpD,IAAIf,KACMA;EACV,GACC,CAACA,CAAO,CAAC,GAENgB,IAAeD;AAAA,IACnB,CAACE,GAAIN,MAAW;AACd,MAAAP,EAAcO,EAAO,KAAK,GAC1BZ,EAASkB,GAAIN,CAAM;AAAA,IACrB;AAAA,IACA,CAACZ,CAAQ;AAAA,EAAA,GAGLmB,IAAmBH;AAAA,IACvB,CAACI,MAAgB;AACf,MAAAf,EAAce,CAAG,GAEZA,KACMpB,EAAAoB,GAAe,CAAA,CAA2B;AAAA,IAEvD;AAAA,IACA,CAACpB,CAAQ;AAAA,EAAA;AAGX,SAAAqB,EAAU,MAAM;AACd,IAAAhB,EAAcR,CAAiB;AAAA,EAAA,GAC9B,CAACA,CAAiB,CAAC,GAEtBwB,EAAU,MAAM;AACV,IAAAd,KAAaL,MAAU,UAAaE,KACtCC,EAAc,EAAE;AAAA,KAEjB,CAACH,GAAOG,GAAeD,GAAYG,CAAS,CAAC,GAK9C,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGpB;AAAA,MACJ,OAAAD;AAAA,MACA,YAAU;AAAA,MACV,YAPsBJ,IAAaD,IAAoBO,KAAcK,KAAS;AAAA,MAQ9E,oBAAoBU;AAAA,MACpB,SAASN;AAAA,MACT,UAAUI;AAAA,MACV,yBAAyBF;AAAA,IAAA;AAAA,EAAA;AAG/B,GAEAS,IAAe7B;"}

package/dist/features/ui/inputs/searchable-select-input/use-filtered-options.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-filtered-options.js","sources":["../../../../../src/features/ui/inputs/searchable-select-input/use-filtered-options.ts"],"sourcesContent":["import type { ISearchableSelectInputProps } from './searchable-select-input-types';\n\nimport { useEffect, useState } from 'react';\n\nconst useFilteredOptions = <IDType extends string | number>(\n  options: ISearchableSelectInputProps<IDType>['options'],\n  searchText?: string,\n) => {\n  const [filteredOptions, setFilteredOptions] = useState(options instanceof Array ? options : []);\n\n  useEffect(() => {\n    const filterOptions = async () => {\n      if (typeof options === 'function') {\n        if (searchText !== undefined) {\n          try {\n            const filtered = await options(searchText);\n\n            setFilteredOptions(filtered);\n          } catch (error) {\n            //TODO:SG - Handle error\n          }\n        }\n      } else if (options instanceof Array) {\n        if (!searchText) {\n          setFilteredOptions(options);\n        } else {\n          const filtered = options.filter(({ label }) =>\n            label.toLowerCase().includes(searchText.toLowerCase()),\n          );\n\n          setFilteredOptions(filtered);\n        }\n      }\n    };\n\n    filterOptions();\n  }, [options, searchText]);\n\n  return filteredOptions;\n};\n\nexport default useFilteredOptions;\n"],"names":["useFilteredOptions","options","searchText","filteredOptions","setFilteredOptions","useState","useEffect","filtered","label"],"mappings":";AAIM,MAAAA,IAAqB,CACzBC,GACAC,MACG;AACG,QAAA,CAACC,GAAiBC,CAAkB,IAAIC,EAASJ,aAAmB,QAAQA,IAAU,EAAE;AAE9F,SAAAK,EAAU,MAAM;AAyBA,KAxBQ,YAAY;AAC5B,UAAA,OAAOL,KAAY;AACrB,YAAIC,MAAe;AACb,cAAA;AACI,kBAAAK,IAAW,MAAMN,EAAQC,CAAU;AAEzC,YAAAE,EAAmBG,CAAQ;AAAA,kBACb;AAAA,UAAA;AAAA,iBAITN,aAAmB;AAC5B,YAAI,CAACC;AACH,UAAAE,EAAmBH,CAAO;AAAA,aACrB;AACL,gBAAMM,IAAWN,EAAQ;AAAA,YAAO,CAAC,EAAE,OAAAO,EAAA,MACjCA,EAAM,cAAc,SAASN,EAAW,YAAa,CAAA;AAAA,UACvD;AAEA,UAAAE,EAAmBG,CAAQ;AAAA,QAAA;AAAA,IAGjC,GAEc;AAAA,EAAA,GACb,CAACN,GAASC,CAAU,CAAC,GAEjBC;AACT;"}
+{"version":3,"file":"use-filtered-options.js","sources":["../../../../../src/features/ui/inputs/searchable-select-input/use-filtered-options.ts"],"sourcesContent":["import type { ISearchableSelectInputProps } from './searchable-select-input-types';\n\nimport { useEffect, useState } from 'react';\n\nconst useFilteredOptions = <IDType extends string | number>(\n  options: ISearchableSelectInputProps<IDType>['options'],\n  searchText?: string,\n) => {\n  const [filteredOptions, setFilteredOptions] = useState(options instanceof Array ? options : []);\n\n  useEffect(() => {\n    const filterOptions = async () => {\n      if (typeof options === 'function') {\n        if (searchText !== undefined) {\n          try {\n            const filtered = await options(searchText);\n\n            setFilteredOptions(filtered);\n          } catch (error) {\n            //TODO:SG - Handle error\n          }\n        }\n      } else if (options instanceof Array) {\n        if (!searchText) {\n          setFilteredOptions(options);\n        } else {\n          const filtered = options.filter(({ label }) =>\n            label.toLowerCase().includes(searchText.toLowerCase()),\n          );\n\n          setFilteredOptions(filtered);\n        }\n      }\n    };\n\n    filterOptions();\n  }, [options, searchText]);\n\n  return filteredOptions;\n};\n\nexport default useFilteredOptions;\n"],"names":["useFilteredOptions","options","searchText","filteredOptions","setFilteredOptions","useState","useEffect","filtered","label"],"mappings":";AAIM,MAAAA,IAAqB,CACzBC,GACAC,MACG;AACG,QAAA,CAACC,GAAiBC,CAAkB,IAAIC,EAASJ,aAAmB,QAAQA,IAAU,CAAA,CAAE;AAE9F,SAAAK,EAAU,MAAM;AAyBA,KAxBQ,YAAY;AAC5B,UAAA,OAAOL,KAAY;AACrB,YAAIC,MAAe;AACb,cAAA;AACI,kBAAAK,IAAW,MAAMN,EAAQC,CAAU;AAEzC,YAAAE,EAAmBG,CAAQ;AAAA,kBACb;AAAA,UAEhB;AAAA,iBAEON,aAAmB;AAC5B,YAAI,CAACC;AACH,UAAAE,EAAmBH,CAAO;AAAA,aACrB;AACL,gBAAMM,IAAWN,EAAQ;AAAA,YAAO,CAAC,EAAE,OAAAO,EACjC,MAAAA,EAAM,YAAc,EAAA,SAASN,EAAW,aAAa;AAAA,UAAA;AAGvD,UAAAE,EAAmBG,CAAQ;AAAA,QAC7B;AAAA,IACF;EAGY,GACb,CAACN,GAASC,CAAU,CAAC,GAEjBC;AACT;"}

package/dist/features/ui/inputs/select-input/select-input.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import r from "../base-select-input/base-select-input.js";
-const m = (t) => /* @__PURE__ */ e(r, { ...t });
+import o from "../base-select-input/base-select-input.js";
+const r = (t) => /* @__PURE__ */ e(o, { ...t }), c = r;
 export {
-  m as default
+  c as default
 };
 //# sourceMappingURL=select-input.js.map

package/dist/features/ui/inputs/select-input/select-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-input.js","sources":["../../../../../src/features/ui/inputs/select-input/select-input.tsx"],"sourcesContent":["import type { ISelectInputProps } from './select-input-types';\n\nimport BaseSelectInput from '../base-select-input/base-select-input';\n\nconst SelectInput = <IDType extends string | number>(\n  props: ISelectInputProps<IDType>,\n): JSX.Element => {\n  return <BaseSelectInput<IDType> {...props} />;\n};\n\nexport default SelectInput;\n"],"names":["SelectInput","props","jsx","BaseSelectInput"],"mappings":";;AAIM,MAAAA,IAAc,CAClBC,MAEO,gBAAAC,EAACC,GAAyB,EAAA,GAAGF,EAAO,CAAA;"}
+{"version":3,"file":"select-input.js","sources":["../../../../../src/features/ui/inputs/select-input/select-input.tsx"],"sourcesContent":["import type { ISelectInputProps } from './select-input-types';\n\nimport BaseSelectInput from '../base-select-input/base-select-input';\n\nconst SelectInput = <IDType extends string | number>(\n  props: ISelectInputProps<IDType>,\n): JSX.Element => {\n  return <BaseSelectInput<IDType> {...props} />;\n};\n\nexport default SelectInput;\n"],"names":["SelectInput","props","jsx","BaseSelectInput","SelectInput$1"],"mappings":";;AAIA,MAAMA,IAAc,CAClBC,MAEO,gBAAAC,EAACC,GAAyB,EAAA,GAAGF,EAAO,CAAA,GAG7CG,IAAeJ;"}

package/dist/features/ui/inputs/text-input/text-input-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input-styled.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input-styled.ts"],"sourcesContent":["import type { IBaseInputProps } from '../base-input/base-input-types';\nimport type { ITextInputProps } from './text-input-types';\n\nimport styled from 'styled-components';\n\ninterface IInputProps {\n  $renderAs: ITextInputProps['renderAs'];\n  $size: IBaseInputProps['size'];\n  $isTransparent?: IBaseInputProps['isTransparent'];\n}\n\nconst Input = styled.input<IInputProps>(({ theme, $size, $renderAs, $isTransparent }) => {\n  const { colors, input, text } = theme;\n  const { valueColorName, labelColorName, backgroundColorName } = input.variants[$renderAs];\n  const { inputTextVariant } = input.sizes[$size];\n  const { fontFamily, fontSize, lineHeight, letterSpacing } = text[inputTextVariant];\n  const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n  return `\n    position: relative;\n    width: 100%;\n    height: 100%;\n    border: 0;\n    padding: 0;\n    outline: none;\n\n    font-family: ${fontFamily};\n    font-size: ${fontSize}px;\n    line-height: ${lineHeight}px;\n    ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n\n   \n    background-color: ${background};\n    color: ${colors[valueColorName.inactive]};\n    \n    &::placeholder {\n      color: ${colors[labelColorName.inactive]};\n      font-family: ${fontFamily};\n      font-size: ${fontSize}px;\n      line-height: ${lineHeight}px;\n      ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n    }\n\n    &:hover, &:focus {\n      color: ${colors[valueColorName.active]};\n    }\n\n    &:read-only {\n      cursor: pointer;\n    }\n      \n    &:disabled {\n      color: ${colors[valueColorName.disabled]};\n      cursor: not-allowed;\n\n      &::placeholder {\n        color: ${colors[labelColorName.disabled]};\n      }\n    }\n      \n    &:hover:not([disabled, focused])::placeholder {\n      color: ${colors[labelColorName.active]};\n    }\n\n    &:focus::placeholder {\n      color: transparent;\n    }\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    &[type=\"date\"]:not(:placeholder-shown){\n      color: ${colors.BLACK_T_60};\n      text-transform: uppercase;\n    }\n  \n    &:-webkit-autofill {      \n      -webkit-text-fill-color: ${colors[valueColorName.inactive]} !important;\n      -webkit-background-clip: text;\n    }\n  `;\n});\n\nexport { Input };\n"],"names":["Input","styled","theme","$size","$renderAs","$isTransparent","colors","input","text","valueColorName","labelColorName","backgroundColorName","inputTextVariant","fontFamily","fontSize","lineHeight","letterSpacing","background"],"mappings":";AAWM,MAAAA,IAAQC,EAAO,MAAmB,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,gBAAAC,QAAqB;AACvF,QAAM,EAAE,QAAAC,GAAQ,OAAAC,GAAO,MAAAC,EAAS,IAAAN,GAC1B,EAAE,gBAAAO,GAAgB,gBAAAC,GAAgB,qBAAAC,EAAwB,IAAAJ,EAAM,SAASH,CAAS,GAClF,EAAE,kBAAAQ,EAAqB,IAAAL,EAAM,MAAMJ,CAAK,GACxC,EAAE,YAAAU,GAAY,UAAAC,GAAU,YAAAC,GAAY,eAAAC,EAAc,IAAIR,EAAKI,CAAgB,GAC3EK,IAAaZ,IAAiB,gBAAgBC,EAAOK,KAAuB,OAAO;AAElF,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQUE,CAAU;AAAA,iBACZC,CAAQ;AAAA,mBACNC,CAAU;AAAA,MACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA,wBAG5DC,CAAU;AAAA,aACrBX,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA,eAG7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA,qBACzBG,CAAU;AAAA,mBACZC,CAAQ;AAAA,qBACNC,CAAU;AAAA,QACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIvEV,EAAOG,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQ7BH,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,iBAI7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjCJ,EAAOI,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAa7BJ,EAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKCA,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAIhE,CAAC;"}
+{"version":3,"file":"text-input-styled.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input-styled.ts"],"sourcesContent":["import type { IBaseInputProps } from '../base-input/base-input-types';\nimport type { ITextInputProps } from './text-input-types';\n\nimport styled from 'styled-components';\n\ninterface IInputProps {\n  $renderAs: ITextInputProps['renderAs'];\n  $size: IBaseInputProps['size'];\n  $isTransparent?: IBaseInputProps['isTransparent'];\n}\n\nconst Input = styled.input<IInputProps>(({ theme, $size, $renderAs, $isTransparent }) => {\n  const { colors, input, text } = theme;\n  const { valueColorName, labelColorName, backgroundColorName } = input.variants[$renderAs];\n  const { inputTextVariant } = input.sizes[$size];\n  const { fontFamily, fontSize, lineHeight, letterSpacing } = text[inputTextVariant];\n  const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n  return `\n    position: relative;\n    width: 100%;\n    height: 100%;\n    border: 0;\n    padding: 0;\n    outline: none;\n\n    font-family: ${fontFamily};\n    font-size: ${fontSize}px;\n    line-height: ${lineHeight}px;\n    ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n\n   \n    background-color: ${background};\n    color: ${colors[valueColorName.inactive]};\n    \n    &::placeholder {\n      color: ${colors[labelColorName.inactive]};\n      font-family: ${fontFamily};\n      font-size: ${fontSize}px;\n      line-height: ${lineHeight}px;\n      ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n    }\n\n    &:hover, &:focus {\n      color: ${colors[valueColorName.active]};\n    }\n\n    &:read-only {\n      cursor: pointer;\n    }\n      \n    &:disabled {\n      color: ${colors[valueColorName.disabled]};\n      cursor: not-allowed;\n\n      &::placeholder {\n        color: ${colors[labelColorName.disabled]};\n      }\n    }\n      \n    &:hover:not([disabled, focused])::placeholder {\n      color: ${colors[labelColorName.active]};\n    }\n\n    &:focus::placeholder {\n      color: transparent;\n    }\n\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    &[type=\"date\"]:not(:placeholder-shown){\n      color: ${colors.BLACK_T_60};\n      text-transform: uppercase;\n    }\n  \n    &:-webkit-autofill {      \n      -webkit-text-fill-color: ${colors[valueColorName.inactive]} !important;\n      -webkit-background-clip: text;\n    }\n  `;\n});\n\nexport { Input };\n"],"names":["Input","styled","theme","$size","$renderAs","$isTransparent","colors","input","text","valueColorName","labelColorName","backgroundColorName","inputTextVariant","fontFamily","fontSize","lineHeight","letterSpacing","background"],"mappings":";AAWM,MAAAA,IAAQC,EAAO,MAAmB,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,gBAAAC,QAAqB;AACvF,QAAM,EAAE,QAAAC,GAAQ,OAAAC,GAAO,MAAAC,EAAA,IAASN,GAC1B,EAAE,gBAAAO,GAAgB,gBAAAC,GAAgB,qBAAAC,EAAwB,IAAAJ,EAAM,SAASH,CAAS,GAClF,EAAE,kBAAAQ,EAAqB,IAAAL,EAAM,MAAMJ,CAAK,GACxC,EAAE,YAAAU,GAAY,UAAAC,GAAU,YAAAC,GAAY,eAAAC,MAAkBR,EAAKI,CAAgB,GAC3EK,IAAaZ,IAAiB,gBAAgBC,EAAOK,KAAuB,OAAO;AAElF,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQUE,CAAU;AAAA,iBACZC,CAAQ;AAAA,mBACNC,CAAU;AAAA,MACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA,wBAG5DC,CAAU;AAAA,aACrBX,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA,eAG7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA,qBACzBG,CAAU;AAAA,mBACZC,CAAQ;AAAA,qBACNC,CAAU;AAAA,QACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIvEV,EAAOG,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQ7BH,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,iBAI7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjCJ,EAAOI,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAa7BJ,EAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,iCAKCA,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAIhE,CAAC;"}

package/dist/features/ui/inputs/text-input/text-input.js

@@ -1,57 +1,57 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as g } from "react";
-import x from "../base-input/base-input.js";
-import { Input as I } from "./text-input-styled.js";
-const i = "regular", y = g((o, l) => {
+import { jsx as a } from "react/jsx-runtime";
+import { forwardRef as I } from "react";
+import T from "../base-input/base-input.js";
+import { Input as b } from "./text-input-styled.js";
+const i = "regular", g = I((o, p) => {
   const {
     type: e,
-    label: p,
-    value: r,
-    renderAs: t,
+    label: l,
+    value: t,
+    renderAs: r,
     width: m,
-    widthX: d,
+    widthX: u,
     disabled: s,
-    willShowMessage: u,
+    willShowMessage: d,
     siblingElement: f,
-    errorMessage: h,
-    shape: w,
-    isTransparent: a,
-    helperText: b,
-    ...c
+    errorMessage: c,
+    shape: h,
+    isTransparent: n,
+    helperText: w,
+    ...x
   } = o;
-  return /* @__PURE__ */ n(
-    x,
+  return /* @__PURE__ */ a(
+    T,
     {
-      renderAs: t,
-      label: p,
-      stickyLabel: !!r || e === "date",
+      renderAs: r,
+      label: l,
+      stickyLabel: !!t || e === "date",
       width: m,
-      widthX: d,
+      widthX: u,
       disabled: s,
-      willShowMessage: u,
+      willShowMessage: d,
       size: i,
-      shape: w,
-      errorMessage: h,
-      helperText: b,
-      isTransparent: a,
-      inputElement: /* @__PURE__ */ n(
-        I,
+      shape: h,
+      errorMessage: c,
+      helperText: w,
+      isTransparent: n,
+      inputElement: /* @__PURE__ */ a(
+        b,
         {
-          ref: l,
+          ref: p,
           type: e,
-          value: r ?? "",
-          $renderAs: t,
+          value: t ?? "",
+          $renderAs: r,
           $size: i,
           disabled: s,
-          $isTransparent: a,
-          ...c
+          $isTransparent: n,
+          ...x
         }
       ),
       siblingElement: f
     }
   );
-});
+}), z = g;
 export {
-  y as default
+  z as default
 };
 //# sourceMappingURL=text-input.js.map

package/dist/features/ui/inputs/text-input/text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n  const {\n    type,\n    label,\n    value,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    siblingElement,\n    errorMessage,\n    shape,\n    isTransparent,\n    helperText,\n    ...rest\n  } = props;\n\n  return (\n    <BaseInput\n      renderAs={renderAs}\n      label={label}\n      stickyLabel={!!value || type === 'date'}\n      width={width}\n      widthX={widthX}\n      disabled={disabled}\n      willShowMessage={willShowMessage}\n      size={SIZE}\n      shape={shape}\n      errorMessage={errorMessage}\n      helperText={helperText}\n      isTransparent={isTransparent}\n      inputElement={\n        <Styled.Input\n          ref={ref}\n          type={type}\n          value={value ?? ''}\n          $renderAs={renderAs}\n          $size={SIZE}\n          disabled={disabled}\n          $isTransparent={isTransparent}\n          {...rest}\n        />\n      }\n      siblingElement={siblingElement}\n    />\n  );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","helperText","rest","jsx","BaseInput","Styled.Input"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDf;AAGF,SAAA,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAZ;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS;AAAA,MACjC,OAAAI;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAMZ;AAAA,MACN,OAAAe;AAAA,MACA,cAAAD;AAAA,MACA,YAAAG;AAAA,MACA,eAAAD;AAAA,MACA,cACE,gBAAAG;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAAjB;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UACf,GAAGE;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAL;AAAA,IAAA;AAAA,EACF;AAEJ,CAAC;"}
+{"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n  const {\n    type,\n    label,\n    value,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    siblingElement,\n    errorMessage,\n    shape,\n    isTransparent,\n    helperText,\n    ...rest\n  } = props;\n\n  return (\n    <BaseInput\n      renderAs={renderAs}\n      label={label}\n      stickyLabel={!!value || type === 'date'}\n      width={width}\n      widthX={widthX}\n      disabled={disabled}\n      willShowMessage={willShowMessage}\n      size={SIZE}\n      shape={shape}\n      errorMessage={errorMessage}\n      helperText={helperText}\n      isTransparent={isTransparent}\n      inputElement={\n        <Styled.Input\n          ref={ref}\n          type={type}\n          value={value ?? ''}\n          $renderAs={renderAs}\n          $size={SIZE}\n          disabled={disabled}\n          $isTransparent={isTransparent}\n          {...rest}\n        />\n      }\n      siblingElement={siblingElement}\n    />\n  );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","helperText","rest","jsx","BaseInput","Styled.Input","TextInput$1"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAf;AAGF,SAAA,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAZ;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS;AAAA,MACjC,OAAAI;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAMZ;AAAA,MACN,OAAAe;AAAA,MACA,cAAAD;AAAA,MACA,YAAAG;AAAA,MACA,eAAAD;AAAA,MACA,cACE,gBAAAG;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAAjB;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UACf,GAAGE;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAL;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDS,IAAerB;"}

package/dist/features/ui/layout/flex-view.js

@@ -1,29 +1,29 @@
 import I from "styled-components";
 const J = (i, p) => {
-  const { $gutter: a, $gutterX: n, $gap: o, $gapX: $ } = i;
+  const { $gutter: n, $gutterX: a, $gap: o, $gapX: $ } = i;
   let e = 0, r = 0;
-  return a ? e = a : n && (e = n * p), o ? r = o : $ && (r = $ * p), `${r}px ${e}px`;
-}, L = I.div(
+  return n ? e = n : a && (e = a * p), o ? r = o : $ && (r = $ * p), `${r}px ${e}px`;
+}, K = I.div(
   ({
     theme: i,
     $position: p,
-    $flexDirection: a = "column",
-    $inherit: n,
+    $flexDirection: n = "column",
+    $inherit: a,
     $flexWrap: o = !1,
     $flexGap: $,
     $flexGapX: e,
     $flexRowGap: r,
     $flexRowGapX: s,
     $flexColumnGap: x,
-    $flexColumnGapX: d,
-    $gutter: k,
-    $gutterX: z = 0,
-    $gap: F,
-    $gapX: V = 0,
+    $flexColumnGapX: c,
+    $gutter: V,
+    $gutterX: j = 0,
+    $gap: k,
+    $gapX: z = 0,
     $marginBottom: g,
-    $marginBottomX: f,
+    $marginBottomX: d,
     $width: l,
-    $widthX: c,
+    $widthX: f,
     $height: u,
     $heightX: y,
     $alignSelf: q,
@@ -37,27 +37,27 @@ const J = (i, p) => {
     $hidden: H = !1,
     $flex: v
   }) => {
-    const { layout: t, colors: j } = i;
+    const { layout: t, colors: F } = i;
     return `
       ${p ? `position: ${p};` : ""}
       display: flex;
       ${H ? "display: none;" : ""}
       flex-wrap: ${o ? "wrap" : "nowrap"};
-      ${n ? "flex-grow: 1; flex-shrink: 1;" : ""}
-      flex-direction: ${a};
-      padding: ${J({ $gutter: k, $gutterX: z, $gap: F, $gapX: V }, t.gutter)};
+      ${a ? "flex-grow: 1; flex-shrink: 1;" : ""}
+      flex-direction: ${n};
+      padding: ${J({ $gutter: V, $gutterX: j, $gap: k, $gapX: z }, t.gutter)};
       margin-bottom: ${g ? `${g}` : "initial"}${typeof g == "number" ? "px" : ""};
-      ${f ? `margin-bottom: ${f * t.gutter}px;` : ""}
+      ${d ? `margin-bottom: ${d * t.gutter}px;` : ""}
       align-self: ${q || "auto"};
       align-items: ${A || "normal"};
       justify-content: ${D || "flex-start"};
-      background-color: ${m ? j[m] : "transparent"};
+      background-color: ${m ? F[m] : "transparent"};
       border-radius: ${typeof w == "number" ? w : 0}px;
       ${P ? `border-radius: ${P * t.gutter}px;` : ""}
-      ${b ? `border: 1px solid ${j[b]};` : ""}
+      ${b ? `border: 1px solid ${F[b]};` : ""}
       opacity: ${E};
       width: ${l ? `${l}` : "auto"}${typeof l == "number" ? "px" : ""};
-      ${c ? `width: ${c * t.gutter}px;` : ""}
+      ${f ? `width: ${f * t.gutter}px;` : ""}
       height: ${u ? `${u}` : "auto"}${typeof u == "number" ? "px" : ""};
       ${y ? `height: ${y * t.gutter}px;` : ""}
       ${$ ? `gap: ${$}px;` : ""}
@@ -65,12 +65,12 @@ const J = (i, p) => {
       ${r ? `row-gap: ${r}px;` : ""}
       ${s ? `row-gap: ${s * t.gutter}px;` : ""}
       ${x ? `column-gap: ${x}px;` : ""}
-      ${d ? `column-gap: ${d * t.gutter}px;` : ""}
+      ${c ? `column-gap: ${c * t.gutter}px;` : ""}
       ${v ? `flex: ${v};` : ""}
   `;
   }
-);
+), M = K;
 export {
-  L as default
+  M as default
 };
 //# sourceMappingURL=flex-view.js.map

package/dist/features/ui/layout/flex-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex-view.js","sources":["../../../../src/features/ui/layout/flex-view.tsx"],"sourcesContent":["import type { TColorNames } from '../types';\nimport type { HTMLAttributes } from 'react';\n\nimport styled from 'styled-components';\n\ntype TStyleAttrubutes = NonNullable<HTMLAttributes<HTMLDivElement>['style']>;\n\ninterface IGetPadding {\n  (\n    options: {\n      $gutter?: number;\n      $gutterX?: number;\n      $gap?: number;\n      $gapX?: number;\n    },\n    gutter: number,\n  ): string;\n}\n\nconst getPadding: IGetPadding = (options, gutter) => {\n  const { $gutter, $gutterX, $gap, $gapX } = options;\n  let horizontalPadding = 0;\n  let verticalPadding = 0;\n\n  if ($gutter) {\n    horizontalPadding = $gutter;\n  } else if ($gutterX) {\n    horizontalPadding = $gutterX * gutter;\n  }\n\n  if ($gap) {\n    verticalPadding = $gap;\n  } else if ($gapX) {\n    verticalPadding = $gapX * gutter;\n  }\n\n  return `${verticalPadding}px ${horizontalPadding}px`;\n};\n\nexport interface FlexViewProps {\n  $position?: TStyleAttrubutes['position'];\n  $inherit?: boolean;\n  $gutter?: number;\n  $gutterX?: number;\n  $gap?: number;\n  $gapX?: number;\n  $marginBottom?: number;\n  $marginBottomX?: number;\n  $flexWrap?: boolean;\n  $flexGap?: number;\n  $flexGapX?: number;\n  $flexRowGap?: number;\n  $flexRowGapX?: number;\n  $flexColumnGap?: number;\n  $flexColumnGapX?: number;\n  $width?: number | string;\n  $widthX?: number;\n  $height?: number | string;\n  $heightX?: number;\n  $flexDirection?: TStyleAttrubutes['flexDirection'];\n  $alignSelf?: TStyleAttrubutes['alignSelf'];\n  $alignItems?: TStyleAttrubutes['alignItems'];\n  $justifyContent?: TStyleAttrubutes['justifyContent'];\n  $background?: TColorNames;\n  $borderRadius?: number;\n  $borderRadiusX?: number;\n  $borderColor?: TColorNames;\n  $opacity?: number;\n  $hidden?: boolean;\n  $flex?: number;\n}\n\nconst FlexView = styled.div<FlexViewProps>(\n  ({\n    theme,\n    $position,\n    $flexDirection = 'column',\n    $inherit,\n    $flexWrap = false,\n    $flexGap,\n    $flexGapX,\n    $flexRowGap,\n    $flexRowGapX,\n    $flexColumnGap,\n    $flexColumnGapX,\n    $gutter,\n    $gutterX = 0,\n    $gap,\n    $gapX = 0,\n    $marginBottom,\n    $marginBottomX,\n    $width,\n    $widthX,\n    $height,\n    $heightX,\n    $alignSelf,\n    $alignItems,\n    $justifyContent,\n    $background,\n    $borderColor,\n    $borderRadius,\n    $borderRadiusX,\n    $opacity = 1,\n    $hidden = false,\n    $flex,\n  }) => {\n    const { layout, colors } = theme;\n\n    return `\n      ${$position ? `position: ${$position};` : ''}\n      display: flex;\n      ${$hidden ? 'display: none;' : ''}\n      flex-wrap: ${$flexWrap ? 'wrap' : 'nowrap'};\n      ${$inherit ? 'flex-grow: 1; flex-shrink: 1;' : ''}\n      flex-direction: ${$flexDirection};\n      padding: ${getPadding({ $gutter, $gutterX, $gap, $gapX }, layout.gutter)};\n      margin-bottom: ${$marginBottom ? `${$marginBottom}` : 'initial'}${\n        typeof $marginBottom === 'number' ? 'px' : ''\n      };\n      ${$marginBottomX ? `margin-bottom: ${$marginBottomX * layout.gutter}px;` : ''}\n      align-self: ${$alignSelf || 'auto'};\n      align-items: ${$alignItems || 'normal'};\n      justify-content: ${$justifyContent || 'flex-start'};\n      background-color: ${$background ? colors[$background] : 'transparent'};\n      border-radius: ${typeof $borderRadius === 'number' ? $borderRadius : 0}px;\n      ${$borderRadiusX ? `border-radius: ${$borderRadiusX * layout.gutter}px;` : ''}\n      ${$borderColor ? `border: 1px solid ${colors[$borderColor]};` : ''}\n      opacity: ${$opacity};\n      width: ${$width ? `${$width}` : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * layout.gutter}px;` : ''}\n      height: ${$height ? `${$height}` : 'auto'}${typeof $height === 'number' ? 'px' : ''};\n      ${$heightX ? `height: ${$heightX * layout.gutter}px;` : ''}\n      ${$flexGap ? `gap: ${$flexGap}px;` : ''}\n      ${$flexGapX ? `gap: ${$flexGapX * layout.gutter}px;` : ''}\n      ${$flexRowGap ? `row-gap: ${$flexRowGap}px;` : ''}\n      ${$flexRowGapX ? `row-gap: ${$flexRowGapX * layout.gutter}px;` : ''}\n      ${$flexColumnGap ? `column-gap: ${$flexColumnGap}px;` : ''}\n      ${$flexColumnGapX ? `column-gap: ${$flexColumnGapX * layout.gutter}px;` : ''}\n      ${$flex ? `flex: ${$flex};` : ''}\n  `;\n  },\n);\n\nexport default FlexView;\n"],"names":["getPadding","options","gutter","$gutter","$gutterX","$gap","$gapX","horizontalPadding","verticalPadding","FlexView","styled","theme","$position","$flexDirection","$inherit","$flexWrap","$flexGap","$flexGapX","$flexRowGap","$flexRowGapX","$flexColumnGap","$flexColumnGapX","$marginBottom","$marginBottomX","$width","$widthX","$height","$heightX","$alignSelf","$alignItems","$justifyContent","$background","$borderColor","$borderRadius","$borderRadiusX","$opacity","$hidden","$flex","layout","colors"],"mappings":"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"}
+{"version":3,"file":"flex-view.js","sources":["../../../../src/features/ui/layout/flex-view.tsx"],"sourcesContent":["import type { TColorNames } from '../types';\nimport type { HTMLAttributes } from 'react';\n\nimport styled from 'styled-components';\n\ntype TStyleAttrubutes = NonNullable<HTMLAttributes<HTMLDivElement>['style']>;\n\ninterface IGetPadding {\n  (\n    options: {\n      $gutter?: number;\n      $gutterX?: number;\n      $gap?: number;\n      $gapX?: number;\n    },\n    gutter: number,\n  ): string;\n}\n\nconst getPadding: IGetPadding = (options, gutter) => {\n  const { $gutter, $gutterX, $gap, $gapX } = options;\n  let horizontalPadding = 0;\n  let verticalPadding = 0;\n\n  if ($gutter) {\n    horizontalPadding = $gutter;\n  } else if ($gutterX) {\n    horizontalPadding = $gutterX * gutter;\n  }\n\n  if ($gap) {\n    verticalPadding = $gap;\n  } else if ($gapX) {\n    verticalPadding = $gapX * gutter;\n  }\n\n  return `${verticalPadding}px ${horizontalPadding}px`;\n};\n\nexport interface FlexViewProps {\n  $position?: TStyleAttrubutes['position'];\n  $inherit?: boolean;\n  $gutter?: number;\n  $gutterX?: number;\n  $gap?: number;\n  $gapX?: number;\n  $marginBottom?: number;\n  $marginBottomX?: number;\n  $flexWrap?: boolean;\n  $flexGap?: number;\n  $flexGapX?: number;\n  $flexRowGap?: number;\n  $flexRowGapX?: number;\n  $flexColumnGap?: number;\n  $flexColumnGapX?: number;\n  $width?: number | string;\n  $widthX?: number;\n  $height?: number | string;\n  $heightX?: number;\n  $flexDirection?: TStyleAttrubutes['flexDirection'];\n  $alignSelf?: TStyleAttrubutes['alignSelf'];\n  $alignItems?: TStyleAttrubutes['alignItems'];\n  $justifyContent?: TStyleAttrubutes['justifyContent'];\n  $background?: TColorNames;\n  $borderRadius?: number;\n  $borderRadiusX?: number;\n  $borderColor?: TColorNames;\n  $opacity?: number;\n  $hidden?: boolean;\n  $flex?: number;\n}\n\nconst FlexView = styled.div<FlexViewProps>(\n  ({\n    theme,\n    $position,\n    $flexDirection = 'column',\n    $inherit,\n    $flexWrap = false,\n    $flexGap,\n    $flexGapX,\n    $flexRowGap,\n    $flexRowGapX,\n    $flexColumnGap,\n    $flexColumnGapX,\n    $gutter,\n    $gutterX = 0,\n    $gap,\n    $gapX = 0,\n    $marginBottom,\n    $marginBottomX,\n    $width,\n    $widthX,\n    $height,\n    $heightX,\n    $alignSelf,\n    $alignItems,\n    $justifyContent,\n    $background,\n    $borderColor,\n    $borderRadius,\n    $borderRadiusX,\n    $opacity = 1,\n    $hidden = false,\n    $flex,\n  }) => {\n    const { layout, colors } = theme;\n\n    return `\n      ${$position ? `position: ${$position};` : ''}\n      display: flex;\n      ${$hidden ? 'display: none;' : ''}\n      flex-wrap: ${$flexWrap ? 'wrap' : 'nowrap'};\n      ${$inherit ? 'flex-grow: 1; flex-shrink: 1;' : ''}\n      flex-direction: ${$flexDirection};\n      padding: ${getPadding({ $gutter, $gutterX, $gap, $gapX }, layout.gutter)};\n      margin-bottom: ${$marginBottom ? `${$marginBottom}` : 'initial'}${\n        typeof $marginBottom === 'number' ? 'px' : ''\n      };\n      ${$marginBottomX ? `margin-bottom: ${$marginBottomX * layout.gutter}px;` : ''}\n      align-self: ${$alignSelf || 'auto'};\n      align-items: ${$alignItems || 'normal'};\n      justify-content: ${$justifyContent || 'flex-start'};\n      background-color: ${$background ? colors[$background] : 'transparent'};\n      border-radius: ${typeof $borderRadius === 'number' ? $borderRadius : 0}px;\n      ${$borderRadiusX ? `border-radius: ${$borderRadiusX * layout.gutter}px;` : ''}\n      ${$borderColor ? `border: 1px solid ${colors[$borderColor]};` : ''}\n      opacity: ${$opacity};\n      width: ${$width ? `${$width}` : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * layout.gutter}px;` : ''}\n      height: ${$height ? `${$height}` : 'auto'}${typeof $height === 'number' ? 'px' : ''};\n      ${$heightX ? `height: ${$heightX * layout.gutter}px;` : ''}\n      ${$flexGap ? `gap: ${$flexGap}px;` : ''}\n      ${$flexGapX ? `gap: ${$flexGapX * layout.gutter}px;` : ''}\n      ${$flexRowGap ? `row-gap: ${$flexRowGap}px;` : ''}\n      ${$flexRowGapX ? `row-gap: ${$flexRowGapX * layout.gutter}px;` : ''}\n      ${$flexColumnGap ? `column-gap: ${$flexColumnGap}px;` : ''}\n      ${$flexColumnGapX ? `column-gap: ${$flexColumnGapX * layout.gutter}px;` : ''}\n      ${$flex ? `flex: ${$flex};` : ''}\n  `;\n  },\n);\n\nexport default FlexView;\n"],"names":["getPadding","options","gutter","$gutter","$gutterX","$gap","$gapX","horizontalPadding","verticalPadding","FlexView","styled","theme","$position","$flexDirection","$inherit","$flexWrap","$flexGap","$flexGapX","$flexRowGap","$flexRowGapX","$flexColumnGap","$flexColumnGapX","$marginBottom","$marginBottomX","$width","$widthX","$height","$heightX","$alignSelf","$alignItems","$justifyContent","$background","$borderColor","$borderRadius","$borderRadiusX","$opacity","$hidden","$flex","layout","colors","FlexView$1"],"mappings":"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"}

package/dist/features/ui/loader/app-loader/app-loader.js

@@ -1,7 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
-import i from "../../layout/flex-view.js";
-const a = ({ width: t, height: r }) => /* @__PURE__ */ e(i, { $alignItems: "center", $justifyContent: "center", $width: t, $height: r, children: /* @__PURE__ */ e("div", { className: "app-loader", children: "Load ng" }) });
+import o from "../../layout/flex-view.js";
+const n = ({ width: t, height: r }) => /* @__PURE__ */ e(o, { $alignItems: "center", $justifyContent: "center", $width: t, $height: r, children: /* @__PURE__ */ e("div", { className: "app-loader", children: "Load ng" }) }), d = n;
 export {
-  a as default
+  d as default
 };
 //# sourceMappingURL=app-loader.js.map

package/dist/features/ui/loader/app-loader/app-loader.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-loader.js","sources":["../../../../../src/features/ui/loader/app-loader/app-loader.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport FlexView from '../../layout/flex-view';\n\ninterface IAppLoaderProps {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst AppLoader: FC<IAppLoaderProps> = ({ width, height }) => {\n  return (\n    <FlexView $alignItems=\"center\" $justifyContent=\"center\" $width={width} $height={height}>\n      <div className=\"app-loader\">Load&nbsp;ng</div>\n    </FlexView>\n  );\n};\n\nexport default AppLoader;\n"],"names":["AppLoader","width","height","jsx","FlexView"],"mappings":";;AASA,MAAMA,IAAiC,CAAC,EAAE,OAAAC,GAAO,QAAAC,QAE5C,gBAAAC,EAAAC,GAAA,EAAS,aAAY,UAAS,iBAAgB,UAAS,QAAQH,GAAO,SAASC,GAC9E,UAAC,gBAAAC,EAAA,OAAA,EAAI,WAAU,cAAa,oBAAY,CAAA,GAC1C;"}
+{"version":3,"file":"app-loader.js","sources":["../../../../../src/features/ui/loader/app-loader/app-loader.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport FlexView from '../../layout/flex-view';\n\ninterface IAppLoaderProps {\n  width?: string | number;\n  height?: string | number;\n}\n\nconst AppLoader: FC<IAppLoaderProps> = ({ width, height }) => {\n  return (\n    <FlexView $alignItems=\"center\" $justifyContent=\"center\" $width={width} $height={height}>\n      <div className=\"app-loader\">Load&nbsp;ng</div>\n    </FlexView>\n  );\n};\n\nexport default AppLoader;\n"],"names":["AppLoader","width","height","jsx","FlexView","AppLoader$1"],"mappings":";;AASA,MAAMA,IAAiC,CAAC,EAAE,OAAAC,GAAO,QAAAC,QAE5C,gBAAAC,EAAAC,GAAA,EAAS,aAAY,UAAS,iBAAgB,UAAS,QAAQH,GAAO,SAASC,GAC9E,UAAC,gBAAAC,EAAA,OAAA,EAAI,WAAU,cAAa,qBAAY,EAC1C,CAAA,GAIJE,IAAeL;"}

package/dist/features/ui/lottie-animation/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sources":["../../../../src/features/ui/lottie-animation/helper.ts"],"sourcesContent":["import type { AnimationItem } from 'lottie-web';\n\nexport const fetchLottie = async (lottieSrc: string): Promise<AnimationItem | null> => {\n  let lottieJson: AnimationItem | null = null;\n\n  try {\n    lottieJson = await fetch(lottieSrc)\n      .then(res => res.json())\n      .catch(() => null);\n  } catch (error) {\n    /* eslint-disable no-console */\n    console.log('Error while fetching the lottie: ', error);\n  }\n\n  return lottieJson;\n};\n"],"names":["fetchLottie","lottieSrc","lottieJson","res","error"],"mappings":"AAEa,MAAAA,IAAc,OAAOC,MAAqD;AACrF,MAAIC,IAAmC;AAEnC,MAAA;AACF,IAAAA,IAAa,MAAM,MAAMD,CAAS,EAC/B,KAAK,CAAAE,MAAOA,EAAI,KAAM,CAAA,EACtB,MAAM,MAAM,IAAI;AAAA,WACZC,GAAO;AAEN,YAAA,IAAI,qCAAqCA,CAAK;AAAA,EAAA;AAGjD,SAAAF;AACT;"}
+{"version":3,"file":"helper.js","sources":["../../../../src/features/ui/lottie-animation/helper.ts"],"sourcesContent":["import type { AnimationItem } from 'lottie-web';\n\nexport const fetchLottie = async (lottieSrc: string): Promise<AnimationItem | null> => {\n  let lottieJson: AnimationItem | null = null;\n\n  try {\n    lottieJson = await fetch(lottieSrc)\n      .then(res => res.json())\n      .catch(() => null);\n  } catch (error) {\n    /* eslint-disable no-console */\n    console.log('Error while fetching the lottie: ', error);\n  }\n\n  return lottieJson;\n};\n"],"names":["fetchLottie","lottieSrc","lottieJson","res","error"],"mappings":"AAEa,MAAAA,IAAc,OAAOC,MAAqD;AACrF,MAAIC,IAAmC;AAEnC,MAAA;AACF,IAAAA,IAAa,MAAM,MAAMD,CAAS,EAC/B,KAAK,CAAAE,MAAOA,EAAI,KAAA,CAAM,EACtB,MAAM,MAAM,IAAI;AAAA,WACZC,GAAO;AAEN,YAAA,IAAI,qCAAqCA,CAAK;AAAA,EACxD;AAEO,SAAAF;AACT;"}

package/dist/features/ui/lottie-animation/lottie-animation.js.map

@@ -1 +1 @@
-{"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationEventName, AnimationItem, AnimationSegment } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n  const {\n    src,\n    width = '100%',\n    height = '100%',\n    settings,\n    eventListener,\n    onRender,\n    animateOnIntersect,\n  } = props;\n\n  const container = useRef<HTMLDivElement>(null);\n  const animationInstance = useRef<AnimationItem | null>(null);\n  const intersectionObserver = useRef<IntersectionObserver | null>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      playSegments: (segments: AnimationSegment, forceFlag?: boolean) =>\n        animationInstance.current?.playSegments(segments, forceFlag),\n      addEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.addEventListener(eventName as AnimationEventName, callback),\n      removeEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.removeEventListener(eventName as AnimationEventName, callback),\n      play: () => animationInstance.current?.play(),\n      stop: () => animationInstance.current?.stop(),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    let destroyed = false;\n\n    const loadAnimation = async () => {\n      try {\n        const animationData = await fetchLottie(src);\n\n        // Wait for layout\n        // NOTE: Do not remove this as this is needed to fix canvas rendering on first layout.\n        requestAnimationFrame(() => {\n          if (!container.current || destroyed) return;\n\n          animationInstance.current = lottie.loadAnimation({\n            container: container.current,\n            animationData,\n            loop: true,\n            autoplay: true,\n            ...settings,\n          });\n\n          if (animateOnIntersect) {\n            intersectionObserver.current = new IntersectionObserver(\n              ([entry]) => {\n                if (entry && entry.isIntersecting) {\n                  animationInstance.current?.play();\n                } else {\n                  animationInstance.current?.pause();\n                }\n              },\n              { threshold: 0 },\n            );\n\n            intersectionObserver.current.observe(container.current);\n          }\n\n          onRender?.();\n          if (eventListener) {\n            animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n          }\n        });\n      } catch (error) {\n        throw Error(`Error loading Lottie animation: ${error}`);\n      }\n    };\n\n    loadAnimation();\n\n    return () => {\n      destroyed = true;\n      if (animationInstance.current) {\n        if (eventListener) {\n          animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n        }\n\n        if (animateOnIntersect) {\n          intersectionObserver.current?.disconnect();\n        }\n        animationInstance.current.destroy();\n      }\n    };\n  }, [src, eventListener, onRender, animateOnIntersect, settings]);\n\n  return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","animateOnIntersect","container","useRef","animationInstance","intersectionObserver","useImperativeHandle","segments","forceFlag","_a","eventName","callback","useEffect","destroyed","animationData","fetchLottie","lottie","entry","_b","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA,IACER,GAEES,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI;AAErE,SAAAG;AAAA,IACEZ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACa,GAA4BC,MACzC;;AAAA,gBAAAC,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,aAAaF,GAAUC;AAAA;AAAA,MACpD,kBAAkB,CAACE,GAAmBC,MACpC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,iBAAiBC,GAAiCC;AAAA;AAAA,MAC/E,qBAAqB,CAACD,GAAmBC,MACvC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,oBAAoBC,GAAiCC;AAAA;AAAA,MAClF,MAAM,MAAM;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,MACvC,MAAM,MAAA;;AAAM,gBAAAA,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,IAAK;AAAA,IAE9C,CAAA;AAAA,EACF,GAEAG,EAAU,MAAM;AACd,QAAIC,IAAY;AA4CF,YA1CQ,YAAY;AAC5B,UAAA;AACI,cAAAC,IAAgB,MAAMC,EAAYpB,CAAG;AAI3C,8BAAsB,MAAM;AACtB,UAAA,CAACO,EAAU,WAAWW,MAERT,EAAA,UAAUY,EAAO,cAAc;AAAA,YAC/C,WAAWd,EAAU;AAAA,YACrB,eAAAY;AAAA,YACA,MAAM;AAAA,YACN,UAAU;AAAA,YACV,GAAGhB;AAAA,UAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,YACjC,CAAC,CAACY,CAAK,MAAM;;AACP,cAAAA,KAASA,EAAM,kBACjBR,IAAAL,EAAkB,YAAlB,QAAAK,EAA2B,UAE3BS,IAAAd,EAAkB,YAAlB,QAAAc,EAA2B;AAAA,YAE/B;AAAA,YACA,EAAE,WAAW,EAAE;AAAA,UACjB,GAEqBb,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAG7CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,QACvF,CACD;AAAA,eACMoB,GAAO;AACR,cAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,MAAA;AAAA,IAE1D,GAEc,GAEP,MAAM;;AACC,MAAAN,IAAA,IACRT,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFQ,IAAAJ,EAAqB,YAArB,QAAAI,EAA8B,eAEhCL,EAAkB,QAAQ,QAAQ;AAAA,IAEtC;AAAA,EAAA,GACC,CAACT,GAAKI,GAAeC,GAAUC,GAAoBH,CAAQ,CAAC,qBAEvDsB,GAAS,EAAA,KAAKlB,GAAW,QAAQN,GAAO,SAASC,GAAQ;AACnE,CAAC,GAEcwB,IAAAC,EAAK/B,CAAe;"}
+{"version":3,"file":"lottie-animation.js","sources":["../../../../src/features/ui/lottie-animation/lottie-animation.tsx"],"sourcesContent":["import type { ILottieAnimationProps, ILottieAnimationRef } from './types';\nimport type { AnimationEventName, AnimationItem, AnimationSegment } from 'lottie-web';\n\nimport lottie from 'lottie-web';\nimport { forwardRef, memo, useEffect, useImperativeHandle, useRef } from 'react';\n\nimport FlexView from '../layout/flex-view';\nimport { fetchLottie } from './helper';\n\nconst LottieAnimation = forwardRef<ILottieAnimationRef, ILottieAnimationProps>((props, ref) => {\n  const {\n    src,\n    width = '100%',\n    height = '100%',\n    settings,\n    eventListener,\n    onRender,\n    animateOnIntersect,\n  } = props;\n\n  const container = useRef<HTMLDivElement>(null);\n  const animationInstance = useRef<AnimationItem | null>(null);\n  const intersectionObserver = useRef<IntersectionObserver | null>(null);\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      playSegments: (segments: AnimationSegment, forceFlag?: boolean) =>\n        animationInstance.current?.playSegments(segments, forceFlag),\n      addEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.addEventListener(eventName as AnimationEventName, callback),\n      removeEventListener: (eventName: string, callback: () => void) =>\n        animationInstance.current?.removeEventListener(eventName as AnimationEventName, callback),\n      play: () => animationInstance.current?.play(),\n      stop: () => animationInstance.current?.stop(),\n    }),\n    [],\n  );\n\n  useEffect(() => {\n    let destroyed = false;\n\n    const loadAnimation = async () => {\n      try {\n        const animationData = await fetchLottie(src);\n\n        // Wait for layout\n        // NOTE: Do not remove this as this is needed to fix canvas rendering on first layout.\n        requestAnimationFrame(() => {\n          if (!container.current || destroyed) return;\n\n          animationInstance.current = lottie.loadAnimation({\n            container: container.current,\n            animationData,\n            loop: true,\n            autoplay: true,\n            ...settings,\n          });\n\n          if (animateOnIntersect) {\n            intersectionObserver.current = new IntersectionObserver(\n              ([entry]) => {\n                if (entry && entry.isIntersecting) {\n                  animationInstance.current?.play();\n                } else {\n                  animationInstance.current?.pause();\n                }\n              },\n              { threshold: 0 },\n            );\n\n            intersectionObserver.current.observe(container.current);\n          }\n\n          onRender?.();\n          if (eventListener) {\n            animationInstance.current.addEventListener(eventListener.name, eventListener.callback);\n          }\n        });\n      } catch (error) {\n        throw Error(`Error loading Lottie animation: ${error}`);\n      }\n    };\n\n    loadAnimation();\n\n    return () => {\n      destroyed = true;\n      if (animationInstance.current) {\n        if (eventListener) {\n          animationInstance.current.removeEventListener(eventListener.name, eventListener.callback);\n        }\n\n        if (animateOnIntersect) {\n          intersectionObserver.current?.disconnect();\n        }\n        animationInstance.current.destroy();\n      }\n    };\n  }, [src, eventListener, onRender, animateOnIntersect, settings]);\n\n  return <FlexView ref={container} $width={width} $height={height} />;\n});\n\nexport default memo(LottieAnimation);\n"],"names":["LottieAnimation","forwardRef","props","ref","src","width","height","settings","eventListener","onRender","animateOnIntersect","container","useRef","animationInstance","intersectionObserver","useImperativeHandle","segments","forceFlag","_a","eventName","callback","useEffect","destroyed","animationData","fetchLottie","lottie","entry","_b","error","FlexView","LottieAnimation$1","memo"],"mappings":";;;;;AASA,MAAMA,IAAkBC,EAAuD,CAACC,GAAOC,MAAQ;AACvF,QAAA;AAAA,IACJ,KAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC;AAAA,EACE,IAAAR,GAEES,IAAYC,EAAuB,IAAI,GACvCC,IAAoBD,EAA6B,IAAI,GACrDE,IAAuBF,EAAoC,IAAI;AAErE,SAAAG;AAAA,IACEZ;AAAA,IACA,OAAO;AAAA,MACL,cAAc,CAACa,GAA4BC,MACzC;;AAAA,gBAAAC,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,aAAaF,GAAUC;AAAA;AAAA,MACpD,kBAAkB,CAACE,GAAmBC,MACpC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,iBAAiBC,GAAiCC;AAAA;AAAA,MAC/E,qBAAqB,CAACD,GAAmBC,MACvC;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B,oBAAoBC,GAAiCC;AAAA;AAAA,MAClF,MAAM,MAAM;;AAAA,gBAAAF,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,MACvC,MAAM,MAAM;;AAAA,gBAAAA,IAAAL,EAAkB,YAAlB,gBAAAK,EAA2B;AAAA;AAAA,IAAK;AAAA,IAE9C,CAAC;AAAA,EAAA,GAGHG,EAAU,MAAM;AACd,QAAIC,IAAY;AA4CF,YA1CQ,YAAY;AAC5B,UAAA;AACI,cAAAC,IAAgB,MAAMC,EAAYpB,CAAG;AAI3C,8BAAsB,MAAM;AACtB,UAAA,CAACO,EAAU,WAAWW,MAERT,EAAA,UAAUY,EAAO,cAAc;AAAA,YAC/C,WAAWd,EAAU;AAAA,YACrB,eAAAY;AAAA,YACA,MAAM;AAAA,YACN,UAAU;AAAA,YACV,GAAGhB;AAAA,UAAA,CACJ,GAEGG,MACFI,EAAqB,UAAU,IAAI;AAAA,YACjC,CAAC,CAACY,CAAK,MAAM;;AACP,cAAAA,KAASA,EAAM,kBACjBR,IAAAL,EAAkB,YAAlB,QAAAK,EAA2B,UAE3BS,IAAAd,EAAkB,YAAlB,QAAAc,EAA2B;AAAA,YAE/B;AAAA,YACA,EAAE,WAAW,EAAE;AAAA,UAAA,GAGIb,EAAA,QAAQ,QAAQH,EAAU,OAAO,IAG7CF,KAAA,QAAAA,KACPD,KACFK,EAAkB,QAAQ,iBAAiBL,EAAc,MAAMA,EAAc,QAAQ;AAAA,QACvF,CACD;AAAA,eACMoB,GAAO;AACR,cAAA,MAAM,mCAAmCA,CAAK,EAAE;AAAA,MACxD;AAAA,IAAA,MAKK,MAAM;;AACC,MAAAN,IAAA,IACRT,EAAkB,YAChBL,KACFK,EAAkB,QAAQ,oBAAoBL,EAAc,MAAMA,EAAc,QAAQ,GAGtFE,OACFQ,IAAAJ,EAAqB,YAArB,QAAAI,EAA8B,eAEhCL,EAAkB,QAAQ;IAC5B;AAAA,EACF,GACC,CAACT,GAAKI,GAAeC,GAAUC,GAAoBH,CAAQ,CAAC,qBAEvDsB,GAAS,EAAA,KAAKlB,GAAW,QAAQN,GAAO,SAASC,EAAQ,CAAA;AACnE,CAAC,GAEcwB,IAAAC,EAAK/B,CAAe;"}

package/dist/features/ui/modals/modal-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-helpers.js","sources":["../../../../src/features/ui/modals/modal-helpers.ts"],"sourcesContent":["/**\n * Locks scrolling on the body element while preserving the scrollbar width to prevent layout shifts.\n * Stores original style values in data attributes for later restoration.\n */\nexport const lockScroll = (): void => {\n  // Calculate if scrollbar is present\n  const hasScrollbar = window.innerWidth > document.documentElement.clientWidth;\n\n  // Save original overflow state regardless\n  document.body.dataset.originalOverflow = document.body.style.overflow || '';\n\n  if (hasScrollbar) {\n    // Calculate scrollbar width\n    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n\n    // Save original padding\n    document.body.dataset.originalPadding = document.body.style.paddingRight || '';\n\n    // Get current padding if any\n    const currentPadding = parseInt(window.getComputedStyle(document.body).paddingRight, 10) || 0;\n\n    // Add padding to prevent content shift when scrollbar disappears\n    document.body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;\n  }\n\n  // Lock scroll\n  document.body.style.overflow = 'hidden';\n  document.body.style.touchAction = 'none'; // Prevent touch scrolling on mobile\n};\n\n/**\n * Unlocks scrolling on the body element and restores original styles.\n * Uses stored data attributes from lockScroll to restore previous state.\n */\nexport const unlockScroll = (): void => {\n  // Restore original padding if it was set\n  if (document.body.dataset.originalPadding !== undefined) {\n    document.body.style.paddingRight = document.body.dataset.originalPadding;\n    delete document.body.dataset.originalPadding;\n  }\n\n  // Restore original overflow\n  if (document.body.dataset.originalOverflow !== undefined) {\n    document.body.style.overflow = document.body.dataset.originalOverflow;\n    delete document.body.dataset.originalOverflow;\n  } else {\n    document.body.style.overflow = '';\n  }\n\n  document.body.style.touchAction = '';\n};\n"],"names":["lockScroll","hasScrollbar","scrollbarWidth","currentPadding","unlockScroll"],"mappings":"AAIO,MAAMA,IAAa,MAAY;AAEpC,QAAMC,IAAe,OAAO,aAAa,SAAS,gBAAgB;AAKlE,MAFA,SAAS,KAAK,QAAQ,mBAAmB,SAAS,KAAK,MAAM,YAAY,IAErEA,GAAc;AAEhB,UAAMC,IAAiB,OAAO,aAAa,SAAS,gBAAgB;AAGpE,aAAS,KAAK,QAAQ,kBAAkB,SAAS,KAAK,MAAM,gBAAgB;AAGtE,UAAAC,IAAiB,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,cAAc,EAAE,KAAK;AAG5F,aAAS,KAAK,MAAM,eAAe,GAAGA,IAAiBD,CAAc;AAAA,EAAA;AAI9D,WAAA,KAAK,MAAM,WAAW,UACtB,SAAA,KAAK,MAAM,cAAc;AACpC,GAMaE,IAAe,MAAY;AAEtC,EAAI,SAAS,KAAK,QAAQ,oBAAoB,WAC5C,SAAS,KAAK,MAAM,eAAe,SAAS,KAAK,QAAQ,iBAClD,OAAA,SAAS,KAAK,QAAQ,kBAI3B,SAAS,KAAK,QAAQ,qBAAqB,UAC7C,SAAS,KAAK,MAAM,WAAW,SAAS,KAAK,QAAQ,kBAC9C,OAAA,SAAS,KAAK,QAAQ,oBAEpB,SAAA,KAAK,MAAM,WAAW,IAGxB,SAAA,KAAK,MAAM,cAAc;AACpC;"}
+{"version":3,"file":"modal-helpers.js","sources":["../../../../src/features/ui/modals/modal-helpers.ts"],"sourcesContent":["/**\n * Locks scrolling on the body element while preserving the scrollbar width to prevent layout shifts.\n * Stores original style values in data attributes for later restoration.\n */\nexport const lockScroll = (): void => {\n  // Calculate if scrollbar is present\n  const hasScrollbar = window.innerWidth > document.documentElement.clientWidth;\n\n  // Save original overflow state regardless\n  document.body.dataset.originalOverflow = document.body.style.overflow || '';\n\n  if (hasScrollbar) {\n    // Calculate scrollbar width\n    const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\n\n    // Save original padding\n    document.body.dataset.originalPadding = document.body.style.paddingRight || '';\n\n    // Get current padding if any\n    const currentPadding = parseInt(window.getComputedStyle(document.body).paddingRight, 10) || 0;\n\n    // Add padding to prevent content shift when scrollbar disappears\n    document.body.style.paddingRight = `${currentPadding + scrollbarWidth}px`;\n  }\n\n  // Lock scroll\n  document.body.style.overflow = 'hidden';\n  document.body.style.touchAction = 'none'; // Prevent touch scrolling on mobile\n};\n\n/**\n * Unlocks scrolling on the body element and restores original styles.\n * Uses stored data attributes from lockScroll to restore previous state.\n */\nexport const unlockScroll = (): void => {\n  // Restore original padding if it was set\n  if (document.body.dataset.originalPadding !== undefined) {\n    document.body.style.paddingRight = document.body.dataset.originalPadding;\n    delete document.body.dataset.originalPadding;\n  }\n\n  // Restore original overflow\n  if (document.body.dataset.originalOverflow !== undefined) {\n    document.body.style.overflow = document.body.dataset.originalOverflow;\n    delete document.body.dataset.originalOverflow;\n  } else {\n    document.body.style.overflow = '';\n  }\n\n  document.body.style.touchAction = '';\n};\n"],"names":["lockScroll","hasScrollbar","scrollbarWidth","currentPadding","unlockScroll"],"mappings":"AAIO,MAAMA,IAAa,MAAY;AAEpC,QAAMC,IAAe,OAAO,aAAa,SAAS,gBAAgB;AAKlE,MAFA,SAAS,KAAK,QAAQ,mBAAmB,SAAS,KAAK,MAAM,YAAY,IAErEA,GAAc;AAEhB,UAAMC,IAAiB,OAAO,aAAa,SAAS,gBAAgB;AAGpE,aAAS,KAAK,QAAQ,kBAAkB,SAAS,KAAK,MAAM,gBAAgB;AAGtE,UAAAC,IAAiB,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,cAAc,EAAE,KAAK;AAG5F,aAAS,KAAK,MAAM,eAAe,GAAGA,IAAiBD,CAAc;AAAA,EACvE;AAGS,WAAA,KAAK,MAAM,WAAW,UACtB,SAAA,KAAK,MAAM,cAAc;AACpC,GAMaE,IAAe,MAAY;AAEtC,EAAI,SAAS,KAAK,QAAQ,oBAAoB,WAC5C,SAAS,KAAK,MAAM,eAAe,SAAS,KAAK,QAAQ,iBAClD,OAAA,SAAS,KAAK,QAAQ,kBAI3B,SAAS,KAAK,QAAQ,qBAAqB,UAC7C,SAAS,KAAK,MAAM,WAAW,SAAS,KAAK,QAAQ,kBAC9C,OAAA,SAAS,KAAK,QAAQ,oBAEpB,SAAA,KAAK,MAAM,WAAW,IAGxB,SAAA,KAAK,MAAM,cAAc;AACpC;"}

package/dist/features/ui/modals/modal-provider.js

@@ -1,24 +1,24 @@
-import { jsxs as C, jsx as E } from "react/jsx-runtime";
-import { memo as P, useState as a, useCallback as u, useMemo as x, useEffect as w } from "react";
+import { jsxs as k, jsx as C } from "react/jsx-runtime";
+import { memo as E, useState as a, useCallback as M, useMemo as x, useEffect as u } from "react";
 import y from "./modal.js";
 import I from "./modal-context.js";
 import { lockScroll as S, unlockScroll as h } from "./modal-helpers.js";
-const D = 500, O = P(({ children: M, modals: c, isUserAuthenticated: t }) => {
-  const [o, d] = a(null), [f, v] = a(void 0), [s, r] = a(!1), m = u(
+const D = 500, T = E(({ children: w, modals: d, isUserAuthenticated: t }) => {
+  const [o, c] = a(null), [f, v] = a(void 0), [s, r] = a(!1), m = M(
     (n, l) => {
-      const i = c.find((k) => k.name === n);
+      const i = d.find((P) => P.name === n);
       if (!i)
         throw new Error(`Modal with name "${n}" not found`);
       if (i.isPrivate && !t)
         throw new Error(
           `Access violation: Modal "${n}" is private and user is not authenticated`
         );
-      r(!1), d(i), v(l), S();
+      r(!1), c(i), v(l), S();
     },
-    [t, c]
-  ), e = u(() => {
+    [t, d]
+  ), e = M(() => {
     r(!0), h(), setTimeout(() => {
-      d(null), r(!1);
+      c(null), r(!1);
     }, D);
   }, []), p = x(
     () => ({
@@ -30,18 +30,18 @@ const D = 500, O = P(({ children: M, modals: c, isUserAuthenticated: t }) => {
     }),
     [o, f, m, e, s]
   );
-  return w(() => {
+  return u(() => {
     !t && (o != null && o.isPrivate) && e();
-  }, [t, o, e]), w(() => {
+  }, [t, o, e]), u(() => {
     const n = (l) => {
       l.key === "Escape" && (o == null ? void 0 : o.isDismissable) !== !1 && !s && e();
     };
     return window.addEventListener("keydown", n), () => window.removeEventListener("keydown", n);
-  }, [o, e, s]), /* @__PURE__ */ C(I.Provider, { value: p, children: [
-    M,
-    o && /* @__PURE__ */ E(y, { modal: o, isClosing: s, onClose: e })
+  }, [o, e, s]), /* @__PURE__ */ k(I.Provider, { value: p, children: [
+    w,
+    o && /* @__PURE__ */ C(y, { modal: o, isClosing: s, onClose: e })
   ] });
-});
+}), O = T;
 export {
   O as default
 };

package/dist/features/ui/modals/modal-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-provider.js","sources":["../../../../src/features/ui/modals/modal-provider.tsx"],"sourcesContent":["import type { IModal, IModalContext, IModalProviderProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport Modal from './modal';\nimport ModalContext from './modal-context';\nimport { lockScroll, unlockScroll } from './modal-helpers';\n\nconst ANIMATION_DURATION_MS = 500; // Match the animation duration in modal.tsx\n\n/**\n * Provider component that manages modal state and provides modal context to child components\n */\nconst ModalProvider: FC<IModalProviderProps> = memo(({ children, modals, isUserAuthenticated }) => {\n  const [modal, setModal] = useState<IModal | null>(null);\n  const [modalParams, setModalParams] = useState<Record<string, unknown> | undefined>(undefined);\n  const [isClosing, setIsClosing] = useState(false);\n\n  /**\n   * Opens a modal by name with optional parameters\n   * Handles authentication check for private modals\n   */\n  const openModal = useCallback<IModalContext['openModal']>(\n    (modalName, newModalParams) => {\n      const newModal = modals.find(m => m.name === modalName);\n\n      if (!newModal) {\n        throw new Error(`Modal with name \"${modalName}\" not found`);\n      }\n\n      if (newModal.isPrivate && !isUserAuthenticated) {\n        throw new Error(\n          `Access violation: Modal \"${modalName}\" is private and user is not authenticated`,\n        );\n      }\n\n      setIsClosing(false);\n      setModal(newModal);\n      setModalParams(newModalParams as unknown as Record<string, unknown> | undefined);\n      lockScroll(); // Lock scroll while preserving scrollbar width\n    },\n    [isUserAuthenticated, modals],\n  );\n\n  const closeModal = useCallback(() => {\n    setIsClosing(true);\n    // Wait for the animation to complete before removing the modal\n    unlockScroll();\n    setTimeout(() => {\n      setModal(null);\n      setIsClosing(false);\n    }, ANIMATION_DURATION_MS);\n  }, []);\n\n  const modalContent = useMemo<IModalContext>(\n    () => ({\n      modal,\n      modalParams,\n      openModal,\n      closeModal,\n      isClosing,\n    }),\n    [modal, modalParams, openModal, closeModal, isClosing],\n  );\n\n  useEffect(() => {\n    if (!isUserAuthenticated && modal?.isPrivate) {\n      // If the modal is private and user is not authenticated, close it\n      closeModal();\n    }\n  }, [isUserAuthenticated, modal, closeModal]);\n\n  // Handle ESC key\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && modal?.isDismissable !== false && !isClosing) {\n        closeModal();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [modal, closeModal, isClosing]);\n\n  return (\n    <ModalContext.Provider value={modalContent}>\n      {children}\n      {modal && <Modal modal={modal} isClosing={isClosing} onClose={closeModal} />}\n    </ModalContext.Provider>\n  );\n});\n\nexport default ModalProvider;\n"],"names":["ANIMATION_DURATION_MS","ModalProvider","memo","children","modals","isUserAuthenticated","modal","setModal","useState","modalParams","setModalParams","isClosing","setIsClosing","openModal","useCallback","modalName","newModalParams","newModal","m","lockScroll","closeModal","unlockScroll","modalContent","useMemo","useEffect","handleKeyDown","e","jsxs","ModalContext","jsx","Modal"],"mappings":";;;;;AASA,MAAMA,IAAwB,KAKxBC,IAAyCC,EAAK,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,qBAAAC,QAA0B;AACjG,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAaC,CAAc,IAAIF,EAA8C,MAAS,GACvF,CAACG,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAM1CK,IAAYC;AAAA,IAChB,CAACC,GAAWC,MAAmB;AAC7B,YAAMC,IAAWb,EAAO,KAAK,CAAKc,MAAAA,EAAE,SAASH,CAAS;AAEtD,UAAI,CAACE;AACH,cAAM,IAAI,MAAM,oBAAoBF,CAAS,aAAa;AAGxD,UAAAE,EAAS,aAAa,CAACZ;AACzB,cAAM,IAAI;AAAA,UACR,4BAA4BU,CAAS;AAAA,QACvC;AAGF,MAAAH,EAAa,EAAK,GAClBL,EAASU,CAAQ,GACjBP,EAAeM,CAAgE,GACpEG,EAAA;AAAA,IACb;AAAA,IACA,CAACd,GAAqBD,CAAM;AAAA,EAC9B,GAEMgB,IAAaN,EAAY,MAAM;AACnC,IAAAF,EAAa,EAAI,GAEJS,EAAA,GACb,WAAW,MAAM;AACf,MAAAd,EAAS,IAAI,GACbK,EAAa,EAAK;AAAA,OACjBZ,CAAqB;AAAA,EAC1B,GAAG,EAAE,GAECsB,IAAeC;AAAA,IACnB,OAAO;AAAA,MACL,OAAAjB;AAAA,MACA,aAAAG;AAAA,MACA,WAAAI;AAAA,MACA,YAAAO;AAAA,MACA,WAAAT;AAAA,IAAA;AAAA,IAEF,CAACL,GAAOG,GAAaI,GAAWO,GAAYT,CAAS;AAAA,EACvD;AAEA,SAAAa,EAAU,MAAM;AACV,IAAA,CAACnB,MAAuBC,KAAA,QAAAA,EAAO,cAEtBc,EAAA;AAAA,EAEZ,GAAA,CAACf,GAAqBC,GAAOc,CAAU,CAAC,GAG3CI,EAAU,MAAM;AACR,UAAAC,IAAgB,CAACC,MAAqB;AAC1C,MAAIA,EAAE,QAAQ,aAAYpB,KAAA,gBAAAA,EAAO,mBAAkB,MAAS,CAACK,KAChDS,EAAA;AAAA,IAEf;AAEO,kBAAA,iBAAiB,WAAWK,CAAa,GAEzC,MAAM,OAAO,oBAAoB,WAAWA,CAAa;AAAA,EAC/D,GAAA,CAACnB,GAAOc,GAAYT,CAAS,CAAC,GAG9B,gBAAAgB,EAAAC,EAAa,UAAb,EAAsB,OAAON,GAC3B,UAAA;AAAA,IAAAnB;AAAA,IACAG,KAAU,gBAAAuB,EAAAC,GAAA,EAAM,OAAAxB,GAAc,WAAAK,GAAsB,SAASS,EAAY,CAAA;AAAA,EAAA,GAC5E;AAEJ,CAAC;"}
+{"version":3,"file":"modal-provider.js","sources":["../../../../src/features/ui/modals/modal-provider.tsx"],"sourcesContent":["import type { IModal, IModalContext, IModalProviderProps } from './modal-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\n\nimport Modal from './modal';\nimport ModalContext from './modal-context';\nimport { lockScroll, unlockScroll } from './modal-helpers';\n\nconst ANIMATION_DURATION_MS = 500; // Match the animation duration in modal.tsx\n\n/**\n * Provider component that manages modal state and provides modal context to child components\n */\nconst ModalProvider: FC<IModalProviderProps> = memo(({ children, modals, isUserAuthenticated }) => {\n  const [modal, setModal] = useState<IModal | null>(null);\n  const [modalParams, setModalParams] = useState<Record<string, unknown> | undefined>(undefined);\n  const [isClosing, setIsClosing] = useState(false);\n\n  /**\n   * Opens a modal by name with optional parameters\n   * Handles authentication check for private modals\n   */\n  const openModal = useCallback<IModalContext['openModal']>(\n    (modalName, newModalParams) => {\n      const newModal = modals.find(m => m.name === modalName);\n\n      if (!newModal) {\n        throw new Error(`Modal with name \"${modalName}\" not found`);\n      }\n\n      if (newModal.isPrivate && !isUserAuthenticated) {\n        throw new Error(\n          `Access violation: Modal \"${modalName}\" is private and user is not authenticated`,\n        );\n      }\n\n      setIsClosing(false);\n      setModal(newModal);\n      setModalParams(newModalParams as unknown as Record<string, unknown> | undefined);\n      lockScroll(); // Lock scroll while preserving scrollbar width\n    },\n    [isUserAuthenticated, modals],\n  );\n\n  const closeModal = useCallback(() => {\n    setIsClosing(true);\n    // Wait for the animation to complete before removing the modal\n    unlockScroll();\n    setTimeout(() => {\n      setModal(null);\n      setIsClosing(false);\n    }, ANIMATION_DURATION_MS);\n  }, []);\n\n  const modalContent = useMemo<IModalContext>(\n    () => ({\n      modal,\n      modalParams,\n      openModal,\n      closeModal,\n      isClosing,\n    }),\n    [modal, modalParams, openModal, closeModal, isClosing],\n  );\n\n  useEffect(() => {\n    if (!isUserAuthenticated && modal?.isPrivate) {\n      // If the modal is private and user is not authenticated, close it\n      closeModal();\n    }\n  }, [isUserAuthenticated, modal, closeModal]);\n\n  // Handle ESC key\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && modal?.isDismissable !== false && !isClosing) {\n        closeModal();\n      }\n    };\n\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => window.removeEventListener('keydown', handleKeyDown);\n  }, [modal, closeModal, isClosing]);\n\n  return (\n    <ModalContext.Provider value={modalContent}>\n      {children}\n      {modal && <Modal modal={modal} isClosing={isClosing} onClose={closeModal} />}\n    </ModalContext.Provider>\n  );\n});\n\nexport default ModalProvider;\n"],"names":["ANIMATION_DURATION_MS","ModalProvider","memo","children","modals","isUserAuthenticated","modal","setModal","useState","modalParams","setModalParams","isClosing","setIsClosing","openModal","useCallback","modalName","newModalParams","newModal","m","lockScroll","closeModal","unlockScroll","modalContent","useMemo","useEffect","handleKeyDown","e","jsxs","ModalContext","jsx","Modal","ModalProvider$1"],"mappings":";;;;;AASA,MAAMA,IAAwB,KAKxBC,IAAyCC,EAAK,CAAC,EAAE,UAAAC,GAAU,QAAAC,GAAQ,qBAAAC,QAA0B;AACjG,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAwB,IAAI,GAChD,CAACC,GAAaC,CAAc,IAAIF,EAA8C,MAAS,GACvF,CAACG,GAAWC,CAAY,IAAIJ,EAAS,EAAK,GAM1CK,IAAYC;AAAA,IAChB,CAACC,GAAWC,MAAmB;AAC7B,YAAMC,IAAWb,EAAO,KAAK,CAAKc,MAAAA,EAAE,SAASH,CAAS;AAEtD,UAAI,CAACE;AACH,cAAM,IAAI,MAAM,oBAAoBF,CAAS,aAAa;AAGxD,UAAAE,EAAS,aAAa,CAACZ;AACzB,cAAM,IAAI;AAAA,UACR,4BAA4BU,CAAS;AAAA,QAAA;AAIzC,MAAAH,EAAa,EAAK,GAClBL,EAASU,CAAQ,GACjBP,EAAeM,CAAgE,GACpEG;IACb;AAAA,IACA,CAACd,GAAqBD,CAAM;AAAA,EAAA,GAGxBgB,IAAaN,EAAY,MAAM;AACnC,IAAAF,EAAa,EAAI,GAEJS,KACb,WAAW,MAAM;AACf,MAAAd,EAAS,IAAI,GACbK,EAAa,EAAK;AAAA,OACjBZ,CAAqB;AAAA,EAC1B,GAAG,CAAE,CAAA,GAECsB,IAAeC;AAAA,IACnB,OAAO;AAAA,MACL,OAAAjB;AAAA,MACA,aAAAG;AAAA,MACA,WAAAI;AAAA,MACA,YAAAO;AAAA,MACA,WAAAT;AAAA,IAAA;AAAA,IAEF,CAACL,GAAOG,GAAaI,GAAWO,GAAYT,CAAS;AAAA,EAAA;AAGvD,SAAAa,EAAU,MAAM;AACV,IAAA,CAACnB,MAAuBC,KAAA,QAAAA,EAAO,cAEtBc;EAEZ,GAAA,CAACf,GAAqBC,GAAOc,CAAU,CAAC,GAG3CI,EAAU,MAAM;AACR,UAAAC,IAAgB,CAACC,MAAqB;AAC1C,MAAIA,EAAE,QAAQ,aAAYpB,KAAA,gBAAAA,EAAO,mBAAkB,MAAS,CAACK,KAChDS;IACb;AAGK,kBAAA,iBAAiB,WAAWK,CAAa,GAEzC,MAAM,OAAO,oBAAoB,WAAWA,CAAa;AAAA,EAC/D,GAAA,CAACnB,GAAOc,GAAYT,CAAS,CAAC,GAG9B,gBAAAgB,EAAAC,EAAa,UAAb,EAAsB,OAAON,GAC3B,UAAA;AAAA,IAAAnB;AAAA,IACAG,KAAU,gBAAAuB,EAAAC,GAAA,EAAM,OAAAxB,GAAc,WAAAK,GAAsB,SAASS,GAAY;AAAA,EAC5E,EAAA,CAAA;AAEJ,CAAC,GAEDW,IAAe9B;"}

package/dist/features/ui/modals/modal-styled.js

@@ -105,7 +105,7 @@ const s = o.div(
   width: ${e}px;
   height: 100%;
   left: 50%;
-  margin-left: -360px;
+  margin-left: ${-(e / 2)}px;
   clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);
   background: linear-gradient(
     180deg,

package/dist/features/ui/modals/modal-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-styled.js","sources":["../../../../src/features/ui/modals/modal-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst ModalContainer = styled.div<{ $isClosing?: boolean }>(\n  ({ theme: { colors }, $isClosing }) => `\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ${colors.BLACK_T_60};\n  backdrop-filter: blur(40px);\n  display: flex;\n  animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n  \n  @keyframes backdropFadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  \n  @keyframes backdropFadeOut {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n`,\n);\n\n/**\n * Base modal container with customizable width and animation state\n */\nconst BaseModal = styled.div<{\n  $isClosing?: boolean;\n  $width: string;\n}>(\n  ({ theme: { colors }, $isClosing, $width }) => `\n  position: relative;\n  align-self: center;\n  margin: 0 auto;\n  width: ${$width};\n  background-color: ${colors.WHITE_1};\n  border: 1px solid ${colors.BLACK_1};\n  transform-origin: center center;\n  animation: ${\n    $isClosing ? 'modalDisappear' : 'modalAppear'\n  } 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;\n  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);\n  \n  /* Responsive behavior for smaller screens */\n  @media (max-width: calc(${$width} + 80px)) {\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    border: none;\n  }\n  \n  @keyframes modalAppear {\n    0% {\n      opacity: 0;\n      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n    }\n    100% {\n      opacity: 1;\n      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n    }\n  }\n  \n  @keyframes modalDisappear {\n    0% {\n      opacity: 1;\n      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n    }\n    100% {\n      opacity: 0;\n      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n    }\n  }\n`,\n);\n\n/**\n * Scrollable content container inside the modal\n */\nconst BaseModalContent = styled.div<{ $modalWidth: string }>(\n  ({ $modalWidth }) => `\n  max-height: calc(100vh - 142px);\n  overflow-y: auto;\n\n  @media (max-width: calc(${$modalWidth} + 80px)) {\n    max-height: 100vh;\n  }\n}`,\n);\n\n/**\n * Container for the close button with responsive positioning\n */\nconst CloseButtonContainer = styled.div<{ $modalWidth: string }>(\n  ({ theme: { colors }, $modalWidth }) => `\n  position: absolute;\n  top: -56px;\n  right: -40px;\n  color: ${colors.WHITE_1};\n  transition: all 0.2s ease;\n  \n  &:hover {\n    transform: scale(1.05);\n  }\n\n  @media (max-width: calc(${$modalWidth} + 80px)) {\n    top: 16px;\n    right: 16px;\n    color: ${colors.BLACK_1};\n  }\n`,\n);\n\nconst spotlightWidth = 720;\nconst spotlightAnimationStartDuration = 800;\nconst spotlightAnimationEndDuration = 500;\n\nconst SpotlightModal = styled.div<{\n  $isClosing?: boolean;\n}>(\n  ({ $isClosing }) => `\n  position: absolute;\n  width: ${spotlightWidth}px;\n  height: 100%;\n  left: 50%;\n  margin-left: ${-(spotlightWidth / 2)}px;\n  clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 1) 0%,\n    rgba(0, 0, 0, 0) 100%\n  );\n  animation: openSpotlight;\n  animation-duration: ${spotlightAnimationStartDuration}ms;\n  animation-timing-function: linear;\n  animation-fill-mode: forwards;\n  opacity: 0;\n  ${\n    $isClosing\n      ? `\n      animation: closeSpotlight;\n      animation-duration: ${spotlightAnimationEndDuration}ms;\n      animation-timing-function: linear;\n      animation-fill-mode: forwards;\n      opacity: 1;\n    `\n      : ''\n  }\n\n  @keyframes openSpotlight {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes closeSpotlight {\n    from {\n      transform: rotateY(0);\n    }\n    to {\n      transform: rotateY(90deg);\n    }\n  }\n`,\n);\n\nexport { ModalContainer, BaseModal, BaseModalContent, CloseButtonContainer, SpotlightModal };\n"],"names":["ModalContainer","styled","colors","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,YAAAC,QAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMnBD,EAAO,UAAU;AAAA;AAAA;AAAA,eAGxBC,IAAa,oBAAoB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBhE,GAKMC,IAAYH,EAAO;AAAA,EAIvB,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAU,GAAA,YAAAC,GAAY,QAAAE,QAAa;AAAA;AAAA;AAAA;AAAA,WAItCA,CAAM;AAAA,sBACKH,EAAO,OAAO;AAAA,sBACdA,EAAO,OAAO;AAAA;AAAA,eAGhCC,IAAa,mBAAmB,aAClC;AAAA;AAAA;AAAA;AAAA,4BAI0BE,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BlC,GAKMC,IAAmBL,EAAO;AAAA,EAC9B,CAAC,EAAE,aAAAM,EAAA,MAAkB;AAAA;AAAA;AAAA;AAAA,4BAIKA,CAAW;AAAA;AAAA;AAAA;AAIvC,GAKMC,IAAuBP,EAAO;AAAA,EAClC,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,aAAAK,QAAkB;AAAA;AAAA;AAAA;AAAA,WAI/BL,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOGK,CAAW;AAAA;AAAA;AAAA,aAG1BL,EAAO,OAAO;AAAA;AAAA;AAG3B,GAEMO,IAAiB,KACjBC,IAAkC,KAClCC,IAAgC,KAEhCC,IAAiBX,EAAO;AAAA,EAG5B,CAAC,EAAE,YAAAE,EAAA,MAAiB;AAAA;AAAA,WAEXM,CAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAWDC,CAA+B;AAAA;AAAA;AAAA;AAAA,IAKnDP,IACI;AAAA;AAAA,4BAEoBQ,CAA6B;AAAA;AAAA;AAAA;AAAA,QAKjD,EACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBF;"}
+{"version":3,"file":"modal-styled.js","sources":["../../../../src/features/ui/modals/modal-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst ModalContainer = styled.div<{ $isClosing?: boolean }>(\n  ({ theme: { colors }, $isClosing }) => `\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ${colors.BLACK_T_60};\n  backdrop-filter: blur(40px);\n  display: flex;\n  animation: ${$isClosing ? 'backdropFadeOut' : 'backdropFadeIn'} 0.2s ease-out forwards;\n  \n  @keyframes backdropFadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  \n  @keyframes backdropFadeOut {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n`,\n);\n\n/**\n * Base modal container with customizable width and animation state\n */\nconst BaseModal = styled.div<{\n  $isClosing?: boolean;\n  $width: string;\n}>(\n  ({ theme: { colors }, $isClosing, $width }) => `\n  position: relative;\n  align-self: center;\n  margin: 0 auto;\n  width: ${$width};\n  background-color: ${colors.WHITE_1};\n  border: 1px solid ${colors.BLACK_1};\n  transform-origin: center center;\n  animation: ${\n    $isClosing ? 'modalDisappear' : 'modalAppear'\n  } 0.5s cubic-bezier(0.19, 1, 0.22, 1) forwards;\n  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.20);\n  \n  /* Responsive behavior for smaller screens */\n  @media (max-width: calc(${$width} + 80px)) {\n    width: 100%;\n    max-width: 100%;\n    height: 100%;\n    max-height: 100%;\n    border: none;\n  }\n  \n  @keyframes modalAppear {\n    0% {\n      opacity: 0;\n      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n    }\n    100% {\n      opacity: 1;\n      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n    }\n  }\n  \n  @keyframes modalDisappear {\n    0% {\n      opacity: 1;\n      transform: perspective(1200px) translateZ(0) translateY(0) scale(1);\n    }\n    100% {\n      opacity: 0;\n      transform: perspective(1200px) translateZ(-50px) translateY(10px) scale(0.98);\n    }\n  }\n`,\n);\n\n/**\n * Scrollable content container inside the modal\n */\nconst BaseModalContent = styled.div<{ $modalWidth: string }>(\n  ({ $modalWidth }) => `\n  max-height: calc(100vh - 142px);\n  overflow-y: auto;\n\n  @media (max-width: calc(${$modalWidth} + 80px)) {\n    max-height: 100vh;\n  }\n}`,\n);\n\n/**\n * Container for the close button with responsive positioning\n */\nconst CloseButtonContainer = styled.div<{ $modalWidth: string }>(\n  ({ theme: { colors }, $modalWidth }) => `\n  position: absolute;\n  top: -56px;\n  right: -40px;\n  color: ${colors.WHITE_1};\n  transition: all 0.2s ease;\n  \n  &:hover {\n    transform: scale(1.05);\n  }\n\n  @media (max-width: calc(${$modalWidth} + 80px)) {\n    top: 16px;\n    right: 16px;\n    color: ${colors.BLACK_1};\n  }\n`,\n);\n\nconst spotlightWidth = 720;\nconst spotlightAnimationStartDuration = 800;\nconst spotlightAnimationEndDuration = 500;\n\nconst SpotlightModal = styled.div<{\n  $isClosing?: boolean;\n}>(\n  ({ $isClosing }) => `\n  position: absolute;\n  width: ${spotlightWidth}px;\n  height: 100%;\n  left: 50%;\n  margin-left: ${-(spotlightWidth / 2)}px;\n  clip-path: polygon(calc(50% - 100px) 0, calc(50% + 100px) 0, 100% 100%, 0 100%);\n  background: linear-gradient(\n    180deg,\n    rgba(0, 0, 0, 1) 0%,\n    rgba(0, 0, 0, 0) 100%\n  );\n  animation: openSpotlight;\n  animation-duration: ${spotlightAnimationStartDuration}ms;\n  animation-timing-function: linear;\n  animation-fill-mode: forwards;\n  opacity: 0;\n  ${\n    $isClosing\n      ? `\n      animation: closeSpotlight;\n      animation-duration: ${spotlightAnimationEndDuration}ms;\n      animation-timing-function: linear;\n      animation-fill-mode: forwards;\n      opacity: 1;\n    `\n      : ''\n  }\n\n  @keyframes openSpotlight {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  @keyframes closeSpotlight {\n    from {\n      transform: rotateY(0);\n    }\n    to {\n      transform: rotateY(90deg);\n    }\n  }\n`,\n);\n\nexport { ModalContainer, BaseModal, BaseModalContent, CloseButtonContainer, SpotlightModal };\n"],"names":["ModalContainer","styled","colors","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,YAAAC,EAAiB,MAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAMnBD,EAAO,UAAU;AAAA;AAAA;AAAA,eAGxBC,IAAa,oBAAoB,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBhE,GAKMC,IAAYH,EAAO;AAAA,EAIvB,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAU,GAAA,YAAAC,GAAY,QAAAE,QAAa;AAAA;AAAA;AAAA;AAAA,WAItCA,CAAM;AAAA,sBACKH,EAAO,OAAO;AAAA,sBACdA,EAAO,OAAO;AAAA;AAAA,eAGhCC,IAAa,mBAAmB,aAClC;AAAA;AAAA;AAAA;AAAA,4BAI0BE,CAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8BlC,GAKMC,IAAmBL,EAAO;AAAA,EAC9B,CAAC,EAAE,aAAAM,EAAA,MAAkB;AAAA;AAAA;AAAA;AAAA,4BAIKA,CAAW;AAAA;AAAA;AAAA;AAIvC,GAKMC,IAAuBP,EAAO;AAAA,EAClC,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,aAAAK,EAAkB,MAAA;AAAA;AAAA;AAAA;AAAA,WAI/BL,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOGK,CAAW;AAAA;AAAA;AAAA,aAG1BL,EAAO,OAAO;AAAA;AAAA;AAG3B,GAEMO,IAAiB,KACjBC,IAAkC,KAClCC,IAAgC,KAEhCC,IAAiBX,EAAO;AAAA,EAG5B,CAAC,EAAE,YAAAE,EAAA,MAAiB;AAAA;AAAA,WAEXM,CAAc;AAAA;AAAA;AAAA,iBAGR,EAAEA,IAAiB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQdC,CAA+B;AAAA;AAAA;AAAA;AAAA,IAKnDP,IACI;AAAA;AAAA,4BAEoBQ,CAA6B;AAAA;AAAA;AAAA;AAAA,QAKjD,EACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBF;"}