@cuemath/leap 3.2.16-as1 → 3.2.16-link.1

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

@@ -1,5 +1,5 @@
-import { jsxs as k, jsx as o } from "react/jsx-runtime";
-import { useMemo as W, useRef as T, useCallback as c } from "react";
+import { jsxs as k, jsx as t } from "react/jsx-runtime";
+import { useMemo as W, useRef as T, useCallback as d } from "react";
 import X from "../../../../assets/line-icons/icons/cross.js";
 import H from "../../hooks/use-context-menu-click-handler.js";
 import q from "../base-input/base-input.js";
@@ -10,108 +10,106 @@ import Y from "./select-section/select-section.js";
 const ae = (y) => {
   const {
     label: C,
-    value: s,
-    options: d,
-    searchable: t = !1,
-    searchText: b,
+    value: r,
+    options: u,
+    searchable: n = !1,
+    searchText: g,
     onCloseWithoutSelection: V,
-    onSearchTextChange: r,
-    onChange: g,
-    renderAs: u,
+    onSearchTextChange: o,
+    onChange: b,
+    renderAs: h,
     width: A,
     widthX: E,
-    disabled: h,
-    willShowMessage: L,
-    mandatory: R,
+    disabled: p,
+    willShowMessage: R,
+    mandatory: j,
     size: v = "regular",
     shape: m,
-    theme: p = "light",
+    theme: f = "light",
     isTransparent: w = !1,
     renderOptionsAs: $ = "list",
-    errorMessage: j
-  } = y, i = $ === "section-list" && d, l = $ === "list" && d, I = W(() => {
-    var e;
-    if (t) return b;
-    if (i) {
-      const n = i.flatMap((f) => f.data).find(({ id: f }) => f === s);
-      return n != null && n.inputLabel ? n.inputLabel || "" : (n == null ? void 0 : n.label) || "";
-    }
-    if (l) return (e = l.find((n) => n.id === s)) == null ? void 0 : e.label;
-  }, [t, b, i, l, s]), S = T(null), x = T(null), { menuVisible: a, onMenuClick: z, hideMenu: M } = H(
+    errorMessage: z
+  } = y, i = $ === "section-list" && u, s = $ === "list" && u, I = W(() => {
+    var e, c;
+    if (n) return g;
+    if (i)
+      return (e = i.flatMap((l) => l.data).find(({ id: l }) => l === r)) == null ? void 0 : e.label;
+    if (s) return (c = s.find((l) => l.id === r)) == null ? void 0 : c.label;
+  }, [n, g, i, s, r]), S = T(null), x = T(null), { menuVisible: a, onMenuClick: B, hideMenu: M } = H(
     S,
     void 0,
-    !t,
+    !n,
     V,
-    h
-  ), B = c(
+    p
+  ), D = d(
     (e) => {
-      t && r && r(e.target.value);
+      n && o && o(e.target.value);
     },
-    [r, t]
-  ), O = c(
-    (e, n) => {
-      M(), g(e, n);
+    [o, n]
+  ), O = d(
+    (e, c) => {
+      M(), b(e, c);
     },
-    [M, g]
-  ), D = c((e) => {
+    [M, b]
+  ), F = d((e) => {
     e.target.select(), setTimeout(() => {
       e.target.scrollIntoView({
         behavior: "smooth"
       });
     }, 300);
-  }, []), F = c(() => {
+  }, []), L = d(() => {
     var e;
-    r && (r(""), (e = x.current) == null || e.focus());
-  }, [r]);
-  return /* @__PURE__ */ k(J, { ref: S, $width: A, $widthX: E, onClick: z, children: [
-    /* @__PURE__ */ o(
+    o && (o(""), (e = x.current) == null || e.focus());
+  }, [o]);
+  return /* @__PURE__ */ k(J, { ref: S, $width: A, $widthX: E, onClick: B, children: [
+    /* @__PURE__ */ t(
       q,
       {
-        renderAs: u,
+        renderAs: h,
         label: C,
         stickyLabel: !0,
-        disabled: h,
-        willShowMessage: L,
+        disabled: p,
+        willShowMessage: R,
         size: v,
-        mandatory: R,
+        mandatory: j,
         shape: m,
         isTransparent: w,
-        inputElement: /* @__PURE__ */ o(
+        inputElement: /* @__PURE__ */ t(
           G,
           {
             ref: x,
-            $renderAs: u,
+            $renderAs: h,
             $size: v,
             placeholder: I ? "" : C,
-            disabled: h,
-            readOnly: !t,
+            disabled: p,
+            readOnly: !n,
             value: I ?? "",
-            onFocus: t ? D : void 0,
-            onChange: t ? B : void 0,
+            onFocus: n ? F : void 0,
+            onChange: n ? D : void 0,
             $isTransparent: w
           }
         ),
-        siblingElement: t && a ? /* @__PURE__ */ o(X, { onClick: F }) : m === "curved" || m === "borderLess" ? /* @__PURE__ */ o(P, { $menuVisible: a, pointerEvents: "none" }) : /* @__PURE__ */ o(Q, { $menuVisible: a, pointerEvents: "none" }),
-        errorMessage: j
+        siblingElement: n && a ? /* @__PURE__ */ t(X, { onClick: L }) : m === "curved" || m === "borderLess" ? /* @__PURE__ */ t(P, { $menuVisible: a, pointerEvents: "none" }) : /* @__PURE__ */ t(Q, { $menuVisible: a, pointerEvents: "none" }),
+        errorMessage: z
       }
     ),
-    d.length > 0 && /* @__PURE__ */ o(K, { $visible: a, children: /* @__PURE__ */ k(N, { $renderAs: u, $theme: p, children: [
-      i && /* @__PURE__ */ o(
+    u.length > 0 && /* @__PURE__ */ t(K, { $visible: a, children: /* @__PURE__ */ k(N, { $renderAs: h, $theme: f, children: [
+      i && /* @__PURE__ */ t(
         Y,
         {
           sectionOptions: i,
-          theme: p,
-          value: s,
+          theme: f,
+          value: r,
           onChange: O
         }
       ),
-      l && l.map((e) => /* @__PURE__ */ o(
+      s && s.map((e) => /* @__PURE__ */ t(
         U,
         {
           option: e,
-          selected: e.id === s,
+          selected: e.id === r,
           onChange: O,
-          theme: p
+          theme: f
         },
         e.id
       ))

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

@@ -1 +1 @@
-{"version":3,"file":"base-select-input.js","sources":["../../../../../src/features/ui/inputs/base-select-input/base-select-input.tsx"],"sourcesContent":["import type { ISectionOption } from '../../section-list/section-list-types';\nimport type { IBaseSelectInputProps, ISelectOption } from './base-select-input-types';\nimport type { ChangeEvent, FocusEvent, ReactElement } from 'react';\n\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport useContextMenuClickHandler from '../../hooks/use-context-menu-click-handler';\nimport BaseInput from '../base-input/base-input';\nimport { Input } from '../text-input/text-input-styled';\nimport * as Styled from './base-select-input-styled';\nimport SelectOption from './select-option/select-option';\nimport SelectSection from './select-section/select-section';\n\nconst BaseSelectInput = <IDType extends string | number>(\n  props: IBaseSelectInputProps<IDType>,\n): ReactElement => {\n  const {\n    label,\n    value,\n    options,\n    searchable = false,\n    searchText,\n    onCloseWithoutSelection,\n    onSearchTextChange,\n    onChange,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    mandatory,\n    size = 'regular',\n    shape,\n    theme = 'light',\n    isTransparent = false,\n    renderOptionsAs = 'list',\n    errorMessage,\n  } = props;\n\n  const sectionOptions =\n    renderOptionsAs === 'section-list' && (options as ISectionOption<ISelectOption<IDType>>[]);\n  const selectOptions = renderOptionsAs === 'list' && (options as ISelectOption<IDType>[]);\n\n  const inputValue = useMemo(() => {\n    if (searchable) return searchText;\n\n    if (sectionOptions) {\n      const option = sectionOptions.flatMap(section => section.data).find(({ id }) => id === value);\n\n      if (option?.inputLabel) return (option.inputLabel || '') as string;\n\n      return option?.label || '';\n    }\n\n    if (selectOptions) return selectOptions.find(option => option.id === value)?.label;\n  }, [searchable, searchText, sectionOptions, selectOptions, value]);\n\n  const containerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const inputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;\n  const { menuVisible, onMenuClick, hideMenu } = useContextMenuClickHandler(\n    containerRef,\n    undefined,\n    !searchable,\n    onCloseWithoutSelection,\n    disabled,\n  );\n\n  const handleTextChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (searchable && onSearchTextChange) {\n        onSearchTextChange(e.target.value);\n      }\n    },\n    [onSearchTextChange, searchable],\n  );\n\n  const handleChange = useCallback<IBaseSelectInputProps<IDType>['onChange']>(\n    (id, option) => {\n      hideMenu();\n      onChange(id, option);\n    },\n    [hideMenu, onChange],\n  );\n\n  const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {\n    e.target.select();\n    setTimeout(() => {\n      e.target.scrollIntoView({\n        behavior: 'smooth',\n      });\n    }, 300);\n  }, []);\n\n  const handleClear = useCallback(() => {\n    if (onSearchTextChange) {\n      onSearchTextChange('');\n      inputRef.current?.focus();\n    }\n  }, [onSearchTextChange]);\n\n  const downIcon =\n    shape === 'curved' || shape === 'borderLess' ? (\n      <Styled.StyledChevronDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n    ) : (\n      <Styled.StyledDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n    );\n\n  return (\n    <Styled.Container ref={containerRef} $width={width} $widthX={widthX} onClick={onMenuClick}>\n      <BaseInput\n        renderAs={renderAs}\n        label={label}\n        stickyLabel={true}\n        disabled={disabled}\n        willShowMessage={willShowMessage}\n        size={size}\n        mandatory={mandatory}\n        shape={shape}\n        isTransparent={isTransparent}\n        inputElement={\n          <Input\n            ref={inputRef}\n            $renderAs={renderAs}\n            $size={size}\n            placeholder={inputValue ? '' : label}\n            disabled={disabled}\n            readOnly={!searchable}\n            value={inputValue ?? ''}\n            onFocus={searchable ? handleFocus : undefined}\n            onChange={searchable ? handleTextChange : undefined}\n            $isTransparent={isTransparent}\n          />\n        }\n        siblingElement={searchable && menuVisible ? <CrossIcon onClick={handleClear} /> : downIcon}\n        errorMessage={errorMessage}\n      />\n\n      {options.length > 0 && (\n        <Styled.OptionsContainer $visible={menuVisible}>\n          <Styled.OptionsWrapper $renderAs={renderAs} $theme={theme}>\n            {sectionOptions && (\n              <SelectSection<IDType>\n                sectionOptions={sectionOptions}\n                theme={theme}\n                value={value}\n                onChange={handleChange}\n              />\n            )}\n\n            {selectOptions &&\n              selectOptions.map(option => (\n                <SelectOption<IDType>\n                  key={option.id}\n                  option={option}\n                  selected={option.id === value}\n                  onChange={handleChange}\n                  theme={theme}\n                />\n              ))}\n          </Styled.OptionsWrapper>\n        </Styled.OptionsContainer>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default BaseSelectInput;\n"],"names":["BaseSelectInput","props","label","value","options","searchable","searchText","onCloseWithoutSelection","onSearchTextChange","onChange","renderAs","width","widthX","disabled","willShowMessage","mandatory","size","shape","theme","isTransparent","renderOptionsAs","errorMessage","sectionOptions","selectOptions","inputValue","useMemo","option","section","id","_a","containerRef","useRef","inputRef","menuVisible","onMenuClick","hideMenu","useContextMenuClickHandler","handleTextChange","useCallback","handleChange","handleFocus","handleClear","jsxs","Styled.Container","jsx","BaseInput","Input","CrossIcon","Styled.StyledChevronDownIcon","Styled.StyledDownIcon","Styled.OptionsContainer","Styled.OptionsWrapper","SelectSection","SelectOption"],"mappings":"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"}
+{"version":3,"file":"base-select-input.js","sources":["../../../../../src/features/ui/inputs/base-select-input/base-select-input.tsx"],"sourcesContent":["import type { ISectionOption } from '../../section-list/section-list-types';\nimport type { IBaseSelectInputProps, ISelectOption } from './base-select-input-types';\nimport type { ChangeEvent, FocusEvent, ReactElement } from 'react';\n\nimport { useCallback, useMemo, useRef } from 'react';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\nimport useContextMenuClickHandler from '../../hooks/use-context-menu-click-handler';\nimport BaseInput from '../base-input/base-input';\nimport { Input } from '../text-input/text-input-styled';\nimport * as Styled from './base-select-input-styled';\nimport SelectOption from './select-option/select-option';\nimport SelectSection from './select-section/select-section';\n\nconst BaseSelectInput = <IDType extends string | number>(\n  props: IBaseSelectInputProps<IDType>,\n): ReactElement => {\n  const {\n    label,\n    value,\n    options,\n    searchable = false,\n    searchText,\n    onCloseWithoutSelection,\n    onSearchTextChange,\n    onChange,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    mandatory,\n    size = 'regular',\n    shape,\n    theme = 'light',\n    isTransparent = false,\n    renderOptionsAs = 'list',\n    errorMessage,\n  } = props;\n\n  const sectionOptions =\n    renderOptionsAs === 'section-list' && (options as ISectionOption<ISelectOption<IDType>>[]);\n  const selectOptions = renderOptionsAs === 'list' && (options as ISelectOption<IDType>[]);\n\n  const inputValue = useMemo(() => {\n    if (searchable) return searchText;\n\n    if (sectionOptions) {\n      return sectionOptions.flatMap(section => section.data).find(({ id }) => id === value)\n        ?.label as string;\n    }\n\n    if (selectOptions) return selectOptions.find(option => option.id === value)?.label;\n  }, [searchable, searchText, sectionOptions, selectOptions, value]);\n\n  const containerRef = useRef<HTMLDivElement>(null) as React.RefObject<HTMLDivElement>;\n  const inputRef = useRef<HTMLInputElement>(null) as React.RefObject<HTMLInputElement>;\n  const { menuVisible, onMenuClick, hideMenu } = useContextMenuClickHandler(\n    containerRef,\n    undefined,\n    !searchable,\n    onCloseWithoutSelection,\n    disabled,\n  );\n\n  const handleTextChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (searchable && onSearchTextChange) {\n        onSearchTextChange(e.target.value);\n      }\n    },\n    [onSearchTextChange, searchable],\n  );\n\n  const handleChange = useCallback<IBaseSelectInputProps<IDType>['onChange']>(\n    (id, option) => {\n      hideMenu();\n      onChange(id, option);\n    },\n    [hideMenu, onChange],\n  );\n\n  const handleFocus = useCallback((e: FocusEvent<HTMLInputElement>) => {\n    e.target.select();\n    setTimeout(() => {\n      e.target.scrollIntoView({\n        behavior: 'smooth',\n      });\n    }, 300);\n  }, []);\n\n  const handleClear = useCallback(() => {\n    if (onSearchTextChange) {\n      onSearchTextChange('');\n      inputRef.current?.focus();\n    }\n  }, [onSearchTextChange]);\n\n  const downIcon =\n    shape === 'curved' || shape === 'borderLess' ? (\n      <Styled.StyledChevronDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n    ) : (\n      <Styled.StyledDownIcon $menuVisible={menuVisible} pointerEvents=\"none\" />\n    );\n\n  return (\n    <Styled.Container ref={containerRef} $width={width} $widthX={widthX} onClick={onMenuClick}>\n      <BaseInput\n        renderAs={renderAs}\n        label={label}\n        stickyLabel={true}\n        disabled={disabled}\n        willShowMessage={willShowMessage}\n        size={size}\n        mandatory={mandatory}\n        shape={shape}\n        isTransparent={isTransparent}\n        inputElement={\n          <Input\n            ref={inputRef}\n            $renderAs={renderAs}\n            $size={size}\n            placeholder={inputValue ? '' : label}\n            disabled={disabled}\n            readOnly={!searchable}\n            value={inputValue ?? ''}\n            onFocus={searchable ? handleFocus : undefined}\n            onChange={searchable ? handleTextChange : undefined}\n            $isTransparent={isTransparent}\n          />\n        }\n        siblingElement={searchable && menuVisible ? <CrossIcon onClick={handleClear} /> : downIcon}\n        errorMessage={errorMessage}\n      />\n\n      {options.length > 0 && (\n        <Styled.OptionsContainer $visible={menuVisible}>\n          <Styled.OptionsWrapper $renderAs={renderAs} $theme={theme}>\n            {sectionOptions && (\n              <SelectSection<IDType>\n                sectionOptions={sectionOptions}\n                theme={theme}\n                value={value}\n                onChange={handleChange}\n              />\n            )}\n\n            {selectOptions &&\n              selectOptions.map(option => (\n                <SelectOption<IDType>\n                  key={option.id}\n                  option={option}\n                  selected={option.id === value}\n                  onChange={handleChange}\n                  theme={theme}\n                />\n              ))}\n          </Styled.OptionsWrapper>\n        </Styled.OptionsContainer>\n      )}\n    </Styled.Container>\n  );\n};\n\nexport default BaseSelectInput;\n"],"names":["BaseSelectInput","props","label","value","options","searchable","searchText","onCloseWithoutSelection","onSearchTextChange","onChange","renderAs","width","widthX","disabled","willShowMessage","mandatory","size","shape","theme","isTransparent","renderOptionsAs","errorMessage","sectionOptions","selectOptions","inputValue","useMemo","_a","section","id","_b","option","containerRef","useRef","inputRef","menuVisible","onMenuClick","hideMenu","useContextMenuClickHandler","handleTextChange","useCallback","handleChange","handleFocus","handleClear","jsxs","Styled.Container","jsx","BaseInput","Input","CrossIcon","Styled.StyledChevronDownIcon","Styled.StyledDownIcon","Styled.OptionsContainer","Styled.OptionsWrapper","SelectSection","SelectOption"],"mappings":"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"}

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

@@ -1,29 +1,29 @@
 import { jsxs as b, jsx as t } from "react/jsx-runtime";
-import { useCallback as I } from "react";
-import { useTheme as g } from "styled-components";
-import v from "../../text/text.js";
-import { CheckboxOptionWrapper as W, CheckboxInputWrapper as z, CheckboxInput as A, CheckIcon as T, IndeterminateIcon as y, CheckboxLabelWrapper as L } from "./checkbox-input-styled.js";
-const O = (h) => {
+import { useCallback as g } from "react";
+import { useTheme as v } from "styled-components";
+import I from "../../text/text.js";
+import { CheckboxOptionWrapper as W, CheckboxInputWrapper as z, CheckboxInput as A, CheckIcon as O, IndeterminateIcon as T, CheckboxLabelWrapper as y } from "./checkbox-input-styled.js";
+const L = (h) => {
   const {
     size: r,
     label: i,
-    value: o,
+    value: a,
     checked: e,
     disabled: n,
-    renderAs: a,
+    renderAs: o,
     labelWidthX: p,
-    indeterminate: u,
-    visibleOnCheck: k,
-    alignTopWithLabel: $ = !1,
+    indeterminate: k,
+    visibleOnCheck: u,
+    alignTopWithLabel: C = !1,
     onChange: l
   } = h, {
-    layout: { gutter: C },
+    layout: { gutter: $ },
     checkbox: c
-  } = g(), { textVariant: m } = c.sizes[r ?? "regular"], { textColorName: x } = c.variants[a ?? "black"], s = k ? e : !0, f = !e && u, d = I(() => {
+  } = v(), { textVariant: m } = c.sizes[r ?? "regular"], { textColorName: x } = c.variants[o ?? "black"], s = u ? e : !0, f = !e && k, d = g(() => {
     if (n) return null;
-    l(o, !e);
-  }, [e, n, l, o]);
-  return /* @__PURE__ */ b(W, { $alignTop: $, $disabled: n, children: [
+    l(a, !e);
+  }, [e, n, l, a]);
+  return /* @__PURE__ */ b(W, { $alignTop: C, $disabled: n, children: [
     /* @__PURE__ */ b(z, { onClick: d, $disabled: n, children: [
       /* @__PURE__ */ t(
         A,
@@ -32,15 +32,15 @@ const O = (h) => {
           checked: e,
           disabled: !!n,
           onChange: () => null,
-          $renderAs: a,
+          $renderAs: o,
           $size: r
         }
       ),
-      e && /* @__PURE__ */ t(T, { $renderAs: a, $size: r }),
-      f && /* @__PURE__ */ t(y, { $disabled: n, $size: C * 1.125 })
+      e && /* @__PURE__ */ t(O, { $renderAs: o, $size: r }),
+      f && /* @__PURE__ */ t(T, { $disabled: n, $size: $ * 1.125 })
     ] }),
     /* @__PURE__ */ t(
-      L,
+      y,
       {
         $labelWidthX: p,
         $visible: s,
@@ -48,7 +48,7 @@ const O = (h) => {
         $disabled: n,
         $checked: e,
         children: typeof i == "string" ? /* @__PURE__ */ t(
-          v,
+          I,
           {
             $renderAs: m[e ? "active" : "inactive"],
             $color: x[e ? "active" : "inactive"],
@@ -58,7 +58,7 @@ const O = (h) => {
       }
     )
   ] });
-}, q = O;
+}, q = L;
 export {
   q as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"checkbox-input.js","sources":["../../../../../src/features/ui/inputs/checkbox-input/checkbox-input.tsx"],"sourcesContent":["import type { ICheckboxOptionProps } from './checkbox-input-types';\n\nimport { useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Text from '../../text/text';\nimport * as Styled from './checkbox-input-styled';\n\nconst CheckboxInput = <IDType extends string | number>(props: ICheckboxOptionProps<IDType>) => {\n  const {\n    size,\n    label,\n    value,\n    checked,\n    disabled,\n    renderAs,\n    labelWidthX,\n    indeterminate,\n    visibleOnCheck,\n    alignTopWithLabel = false,\n    onChange,\n  } = props;\n\n  const {\n    layout: { gutter },\n    checkbox,\n  } = useTheme();\n\n  const { textVariant } = checkbox.sizes[size ?? 'regular'];\n  const { textColorName } = checkbox.variants[renderAs ?? 'black'];\n\n  const renderLabel = visibleOnCheck ? checked : true;\n  const renderIndeterminateState = !checked && indeterminate;\n\n  const handleOnChange = useCallback(() => {\n    if (disabled) return null;\n\n    onChange(value, !checked);\n  }, [checked, disabled, onChange, value]);\n\n  return (\n    <Styled.CheckboxOptionWrapper $alignTop={alignTopWithLabel} $disabled={disabled}>\n      <Styled.CheckboxInputWrapper onClick={handleOnChange} $disabled={disabled}>\n        <Styled.CheckboxInput\n          type=\"checkbox\"\n          checked={checked}\n          disabled={!!disabled}\n          onChange={() => null}\n          $renderAs={renderAs}\n          $size={size}\n        />\n        {checked && <Styled.CheckIcon $renderAs={renderAs} $size={size} />}\n\n        {renderIndeterminateState && (\n          <Styled.IndeterminateIcon $disabled={disabled} $size={gutter * 1.125} />\n        )}\n      </Styled.CheckboxInputWrapper>\n\n      <Styled.CheckboxLabelWrapper\n        $labelWidthX={labelWidthX}\n        $visible={renderLabel}\n        onClick={renderLabel ? handleOnChange : () => null}\n        $disabled={disabled}\n        $checked={checked}\n      >\n        {typeof label === 'string' ? (\n          <Text\n            $renderAs={textVariant[checked ? 'active' : 'inactive']}\n            $color={textColorName[checked ? 'active' : 'inactive']}\n          >\n            {label}\n          </Text>\n        ) : (\n          label\n        )}\n      </Styled.CheckboxLabelWrapper>\n    </Styled.CheckboxOptionWrapper>\n  );\n};\n\nexport default CheckboxInput;\n"],"names":["CheckboxInput","props","size","label","value","checked","disabled","renderAs","labelWidthX","indeterminate","visibleOnCheck","alignTopWithLabel","onChange","gutter","checkbox","useTheme","textVariant","textColorName","renderLabel","renderIndeterminateState","handleOnChange","useCallback","Styled.CheckboxOptionWrapper","jsxs","Styled.CheckboxInputWrapper","jsx","Styled.CheckboxInput","Styled.CheckIcon","Styled.IndeterminateIcon","Styled.CheckboxLabelWrapper","Text","CheckboxInput$1"],"mappings":";;;;;AAQA,MAAMA,IAAgB,CAAiCC,MAAwC;AACvF,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,UAAAC;AAAA,EACE,IAAAX,GAEE;AAAA,IACJ,QAAQ,EAAE,QAAAY,EAAO;AAAA,IACjB,UAAAC;AAAA,MACEC,EAAS,GAEP,EAAE,aAAAC,EAAY,IAAIF,EAAS,MAAMZ,KAAQ,SAAS,GAClD,EAAE,eAAAe,EAAc,IAAIH,EAAS,SAASP,KAAY,OAAO,GAEzDW,IAAcR,IAAiBL,IAAU,IACzCc,IAA2B,CAACd,KAAWI,GAEvCW,IAAiBC,EAAY,MAAM;AACvC,QAAIf,EAAiB,QAAA;AAEZ,IAAAM,EAAAR,GAAO,CAACC,CAAO;AAAA,KACvB,CAACA,GAASC,GAAUM,GAAUR,CAAK,CAAC;AAEvC,2BACGkB,GAAA,EAA6B,WAAWX,GAAmB,WAAWL,GACrE,UAAA;AAAA,IAAA,gBAAAiB,EAACC,GAAA,EAA4B,SAASJ,GAAgB,WAAWd,GAC/D,UAAA;AAAA,MAAA,gBAAAmB;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAArB;AAAA,UACA,UAAU,CAAC,CAACC;AAAA,UACZ,UAAU,MAAM;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOL;AAAA,QAAA;AAAA,MACT;AAAA,MACCG,uBAAYsB,GAAA,EAAiB,WAAWpB,GAAU,OAAOL,GAAM;AAAA,MAE/DiB,uBACES,GAAA,EAAyB,WAAWtB,GAAU,OAAOO,IAAS,OAAO;AAAA,IAAA,GAE1E;AAAA,IAEA,gBAAAY;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,cAAcrB;AAAA,QACd,UAAUU;AAAA,QACV,SAASA,IAAcE,IAAiB,MAAM;AAAA,QAC9C,WAAWd;AAAA,QACX,UAAUD;AAAA,QAET,UAAA,OAAOF,KAAU,WAChB,gBAAAsB;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,WAAWd,EAAYX,IAAU,WAAW,UAAU;AAAA,YACtD,QAAQY,EAAcZ,IAAU,WAAW,UAAU;AAAA,YAEpD,UAAAF;AAAA,UAAA;AAAA,QAAA,IAGHA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF,EAAA,CAAA;AAEJ,GAEA4B,IAAe/B;"}
+{"version":3,"file":"checkbox-input.js","sources":["../../../../../src/features/ui/inputs/checkbox-input/checkbox-input.tsx"],"sourcesContent":["import type { ICheckboxOptionProps } from './checkbox-input-types';\n\nimport { useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Text from '../../text/text';\nimport * as Styled from './checkbox-input-styled';\n\nconst CheckboxInput = <IDType extends string | number>(props: ICheckboxOptionProps<IDType>) => {\n  const {\n    size,\n    label,\n    value,\n    checked,\n    disabled,\n    renderAs,\n    labelWidthX,\n    indeterminate,\n    visibleOnCheck,\n    alignTopWithLabel = false,\n    onChange,\n  } = props;\n\n  const {\n    layout: { gutter },\n    checkbox,\n  } = useTheme();\n\n  const { textVariant } = checkbox.sizes[size ?? 'regular'];\n  const { textColorName } = checkbox.variants[renderAs ?? 'black'];\n\n  const renderLabel = visibleOnCheck ? checked : true;\n  const renderIndeterminateState = !checked && indeterminate;\n\n  const handleOnChange = useCallback(() => {\n    if (disabled) return null;\n\n    onChange(value, !checked);\n  }, [checked, disabled, onChange, value]);\n\n  return (\n    <Styled.CheckboxOptionWrapper $alignTop={alignTopWithLabel} $disabled={disabled}>\n      <Styled.CheckboxInputWrapper onClick={handleOnChange} $disabled={disabled}>\n        <Styled.CheckboxInput\n          type=\"checkbox\"\n          checked={checked}\n          disabled={!!disabled}\n          onChange={() => null}\n          $renderAs={renderAs}\n          $size={size}\n        />\n        {checked && <Styled.CheckIcon $renderAs={renderAs} $size={size} />}\n\n        {renderIndeterminateState && (\n          <Styled.IndeterminateIcon $disabled={disabled} $size={gutter * 1.125} />\n        )}\n      </Styled.CheckboxInputWrapper>\n\n      <Styled.CheckboxLabelWrapper\n        $labelWidthX={labelWidthX}\n        $visible={renderLabel}\n        onClick={renderLabel ? handleOnChange : () => null}\n        $disabled={disabled}\n        $checked={checked}\n      >\n        {typeof label === 'string' ? (\n          <Text\n            $renderAs={textVariant[checked ? 'active' : 'inactive']}\n            $color={textColorName[checked ? 'active' : 'inactive']}\n          >\n            {label}\n          </Text>\n        ) : (\n          label\n        )}\n      </Styled.CheckboxLabelWrapper>\n    </Styled.CheckboxOptionWrapper>\n  );\n};\n\nexport default CheckboxInput;\n"],"names":["CheckboxInput","props","size","label","value","checked","disabled","renderAs","labelWidthX","indeterminate","visibleOnCheck","alignTopWithLabel","onChange","gutter","checkbox","useTheme","textVariant","textColorName","renderLabel","renderIndeterminateState","handleOnChange","useCallback","Styled.CheckboxOptionWrapper","jsxs","Styled.CheckboxInputWrapper","jsx","Styled.CheckboxInput","Styled.CheckIcon","Styled.IndeterminateIcon","Styled.CheckboxLabelWrapper","Text","CheckboxOption"],"mappings":";;;;;AAQA,MAAMA,IAAgB,CAAiCC,MAAwC;AACvF,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,UAAAC;AAAA,EACE,IAAAX,GAEE;AAAA,IACJ,QAAQ,EAAE,QAAAY,EAAO;AAAA,IACjB,UAAAC;AAAA,MACEC,EAAS,GAEP,EAAE,aAAAC,EAAY,IAAIF,EAAS,MAAMZ,KAAQ,SAAS,GAClD,EAAE,eAAAe,EAAc,IAAIH,EAAS,SAASP,KAAY,OAAO,GAEzDW,IAAcR,IAAiBL,IAAU,IACzCc,IAA2B,CAACd,KAAWI,GAEvCW,IAAiBC,EAAY,MAAM;AACvC,QAAIf,EAAiB,QAAA;AAEZ,IAAAM,EAAAR,GAAO,CAACC,CAAO;AAAA,KACvB,CAACA,GAASC,GAAUM,GAAUR,CAAK,CAAC;AAEvC,2BACGkB,GAAA,EAA6B,WAAWX,GAAmB,WAAWL,GACrE,UAAA;AAAA,IAAA,gBAAAiB,EAACC,GAAA,EAA4B,SAASJ,GAAgB,WAAWd,GAC/D,UAAA;AAAA,MAAA,gBAAAmB;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAArB;AAAA,UACA,UAAU,CAAC,CAACC;AAAA,UACZ,UAAU,MAAM;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOL;AAAA,QAAA;AAAA,MACT;AAAA,MACCG,uBAAYsB,GAAA,EAAiB,WAAWpB,GAAU,OAAOL,GAAM;AAAA,MAE/DiB,uBACES,GAAA,EAAyB,WAAWtB,GAAU,OAAOO,IAAS,OAAO;AAAA,IAAA,GAE1E;AAAA,IAEA,gBAAAY;AAAA,MAACI;AAAAA,MAAA;AAAA,QACC,cAAcrB;AAAA,QACd,UAAUU;AAAA,QACV,SAASA,IAAcE,IAAiB,MAAM;AAAA,QAC9C,WAAWd;AAAA,QACX,UAAUD;AAAA,QAET,UAAA,OAAOF,KAAU,WAChB,gBAAAsB;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,WAAWd,EAAYX,IAAU,WAAW,UAAU;AAAA,YACtD,QAAQY,EAAcZ,IAAU,WAAW,UAAU;AAAA,YAEpD,UAAAF;AAAA,UAAA;AAAA,QAAA,IAGHA;AAAA,MAAA;AAAA,IAEJ;AAAA,EACF,EAAA,CAAA;AAEJ,GAEA4B,IAAe/B;"}

package/dist/features/ui/inputs/checkbox-input-list/checkbox-input-list.js

@@ -1,8 +1,8 @@
 import { jsx as r } from "react/jsx-runtime";
 import { useMemo as g, useCallback as I } from "react";
 import L from "../../arrow-tooltip/arrow-tooltip.js";
-import v from "../checkbox-input/checkbox-input.js";
-import { CheckboxInputListWrapper as A, CheckboxOptionWrapper as O } from "./checkbox-input-list-styled.js";
+import O from "../checkbox-input/checkbox-input.js";
+import { CheckboxInputListWrapper as v, CheckboxOptionWrapper as A } from "./checkbox-input-list-styled.js";
 const $ = (h) => {
   const {
     size: a,
@@ -24,9 +24,9 @@ const $ = (h) => {
     },
     [e, i, c, o]
   );
-  return /* @__PURE__ */ r(A, { children: d.map((t) => {
+  return /* @__PURE__ */ r(v, { children: d.map((t) => {
     const { id: n, label: l } = t, p = o.includes(n), m = c && !p, k = (s == null ? void 0 : s.includes(n)) || m;
-    return /* @__PURE__ */ r(O, { $numColumns: C ?? 1, children: /* @__PURE__ */ r(
+    return /* @__PURE__ */ r(A, { $numColumns: C ?? 1, children: /* @__PURE__ */ r(
       L,
       {
         renderAs: "primary",
@@ -35,7 +35,7 @@ const $ = (h) => {
         hidden: !m,
         zIndex: 2,
         children: /* @__PURE__ */ r(
-          v,
+          O,
           {
             value: n,
             size: a,

package/dist/features/ui/inputs/checkbox-input-list/checkbox-input-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox-input-list.js","sources":["../../../../../src/features/ui/inputs/checkbox-input-list/checkbox-input-list.tsx"],"sourcesContent":["import type { ICheckboxInputProps } from './checkbox-input-list-types';\n\nimport { useCallback, useMemo } from 'react';\n\nimport ArrowTooltip from '../../arrow-tooltip/arrow-tooltip';\nimport CheckboxOption from '../checkbox-input/checkbox-input';\nimport * as Styled from './checkbox-input-list-styled';\n\nconst CheckboxInputList = <IDType extends string | number>(props: ICheckboxInputProps<IDType>) => {\n  const {\n    size,\n    value,\n    options,\n    disabled,\n    renderAs,\n    numColumns,\n    indeterminate,\n    visibleOnCheck,\n    maximumSelection,\n    onChange,\n  } = props;\n\n  const reachedMaxLength = useMemo(\n    () => !!(maximumSelection && maximumSelection > 1 && value.length >= maximumSelection),\n    [maximumSelection, value.length],\n  );\n\n  const handleOnChange = useCallback(\n    (selectedValue: IDType, selected: boolean) => {\n      if (!selected) {\n        onChange(value.filter(val => val !== selectedValue));\n      } else {\n        if (maximumSelection === 1) {\n          onChange([selectedValue]);\n        } else if (!reachedMaxLength || !maximumSelection) {\n          onChange([...value, selectedValue]);\n        }\n      }\n    },\n    [maximumSelection, onChange, reachedMaxLength, value],\n  );\n\n  return (\n    <Styled.CheckboxInputListWrapper>\n      {options.map(option => {\n        const { id, label } = option;\n\n        const checked = value.includes(id);\n        const showTooltip = reachedMaxLength && !checked;\n        const disableCheck = disabled?.includes(id) || showTooltip;\n\n        return (\n          <Styled.CheckboxOptionWrapper key={id} $numColumns={numColumns ?? 1}>\n            <ArrowTooltip\n              renderAs=\"primary\"\n              position=\"top\"\n              tooltipItem={`${maximumSelection} options already selected`}\n              hidden={!showTooltip}\n              zIndex={2}\n            >\n              <CheckboxOption<IDType>\n                value={id}\n                size={size}\n                label={label}\n                checked={checked}\n                renderAs={renderAs}\n                disabled={disableCheck}\n                onChange={handleOnChange}\n                indeterminate={indeterminate} //* Took this name from Mui.\n                visibleOnCheck={visibleOnCheck}\n              />\n            </ArrowTooltip>\n          </Styled.CheckboxOptionWrapper>\n        );\n      })}\n    </Styled.CheckboxInputListWrapper>\n  );\n};\n\nexport default CheckboxInputList;\n"],"names":["CheckboxInputList","props","size","value","options","disabled","renderAs","numColumns","indeterminate","visibleOnCheck","maximumSelection","onChange","reachedMaxLength","useMemo","handleOnChange","useCallback","selectedValue","selected","val","Styled.CheckboxInputListWrapper","option","id","label","checked","showTooltip","disableCheck","Styled.CheckboxOptionWrapper","jsx","ArrowTooltip","CheckboxOption","CheckboxInputList$1"],"mappings":";;;;;AAQA,MAAMA,IAAoB,CAAiCC,MAAuC;AAC1F,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,EACE,IAAAV,GAEEW,IAAmBC;AAAA,IACvB,MAAM,CAAC,EAAEH,KAAoBA,IAAmB,KAAKP,EAAM,UAAUO;AAAA,IACrE,CAACA,GAAkBP,EAAM,MAAM;AAAA,EAAA,GAG3BW,IAAiBC;AAAA,IACrB,CAACC,GAAuBC,MAAsB;AAC5C,MAAKA,IAGCP,MAAqB,IACdC,EAAA,CAACK,CAAa,CAAC,KACf,CAACJ,KAAoB,CAACF,MAC/BC,EAAS,CAAC,GAAGR,GAAOa,CAAa,CAAC,IALpCL,EAASR,EAAM,OAAO,CAAOe,MAAAA,MAAQF,CAAa,CAAC;AAAA,IAQvD;AAAA,IACA,CAACN,GAAkBC,GAAUC,GAAkBT,CAAK;AAAA,EAAA;AAGtD,2BACGgB,GAAA,EACE,UAAAf,EAAQ,IAAI,CAAUgB,MAAA;AACf,UAAA,EAAE,IAAAC,GAAI,OAAAC,EAAU,IAAAF,GAEhBG,IAAUpB,EAAM,SAASkB,CAAE,GAC3BG,IAAcZ,KAAoB,CAACW,GACnCE,KAAepB,KAAA,gBAAAA,EAAU,SAASgB,OAAOG;AAE/C,6BACGE,GAAA,EAAsC,aAAanB,KAAc,GAChE,UAAA,gBAAAoB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,aAAa,GAAGlB,CAAgB;AAAA,QAChC,QAAQ,CAACc;AAAA,QACT,QAAQ;AAAA,QAER,UAAA,gBAAAG;AAAA,UAACE;AAAAA,UAAA;AAAA,YACC,OAAOR;AAAA,YACP,MAAAnB;AAAA,YACA,OAAAoB;AAAA,YACA,SAAAC;AAAA,YACA,UAAAjB;AAAA,YACA,UAAUmB;AAAA,YACV,UAAUX;AAAA,YACV,eAAAN;AAAA,YACA,gBAAAC;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,KAlB+BY,CAoBnC;AAAA,EAEH,CAAA,EACH,CAAA;AAEJ,GAEAS,IAAe9B;"}
+{"version":3,"file":"checkbox-input-list.js","sources":["../../../../../src/features/ui/inputs/checkbox-input-list/checkbox-input-list.tsx"],"sourcesContent":["import type { ICheckboxInputProps } from './checkbox-input-list-types';\n\nimport { useCallback, useMemo } from 'react';\n\nimport ArrowTooltip from '../../arrow-tooltip/arrow-tooltip';\nimport CheckboxOption from '../checkbox-input/checkbox-input';\nimport * as Styled from './checkbox-input-list-styled';\n\nconst CheckboxInputList = <IDType extends string | number>(props: ICheckboxInputProps<IDType>) => {\n  const {\n    size,\n    value,\n    options,\n    disabled,\n    renderAs,\n    numColumns,\n    indeterminate,\n    visibleOnCheck,\n    maximumSelection,\n    onChange,\n  } = props;\n\n  const reachedMaxLength = useMemo(\n    () => !!(maximumSelection && maximumSelection > 1 && value.length >= maximumSelection),\n    [maximumSelection, value.length],\n  );\n\n  const handleOnChange = useCallback(\n    (selectedValue: IDType, selected: boolean) => {\n      if (!selected) {\n        onChange(value.filter(val => val !== selectedValue));\n      } else {\n        if (maximumSelection === 1) {\n          onChange([selectedValue]);\n        } else if (!reachedMaxLength || !maximumSelection) {\n          onChange([...value, selectedValue]);\n        }\n      }\n    },\n    [maximumSelection, onChange, reachedMaxLength, value],\n  );\n\n  return (\n    <Styled.CheckboxInputListWrapper>\n      {options.map(option => {\n        const { id, label } = option;\n\n        const checked = value.includes(id);\n        const showTooltip = reachedMaxLength && !checked;\n        const disableCheck = disabled?.includes(id) || showTooltip;\n\n        return (\n          <Styled.CheckboxOptionWrapper key={id} $numColumns={numColumns ?? 1}>\n            <ArrowTooltip\n              renderAs=\"primary\"\n              position=\"top\"\n              tooltipItem={`${maximumSelection} options already selected`}\n              hidden={!showTooltip}\n              zIndex={2}\n            >\n              <CheckboxOption<IDType>\n                value={id}\n                size={size}\n                label={label}\n                checked={checked}\n                renderAs={renderAs}\n                disabled={disableCheck}\n                onChange={handleOnChange}\n                indeterminate={indeterminate} //* Took this name from Mui.\n                visibleOnCheck={visibleOnCheck}\n              />\n            </ArrowTooltip>\n          </Styled.CheckboxOptionWrapper>\n        );\n      })}\n    </Styled.CheckboxInputListWrapper>\n  );\n};\n\nexport default CheckboxInputList;\n"],"names":["CheckboxInputList","props","size","value","options","disabled","renderAs","numColumns","indeterminate","visibleOnCheck","maximumSelection","onChange","reachedMaxLength","useMemo","handleOnChange","useCallback","selectedValue","selected","val","Styled.CheckboxInputListWrapper","option","id","label","checked","showTooltip","disableCheck","Styled.CheckboxOptionWrapper","jsx","ArrowTooltip","CheckboxOption","CheckboxInputList$1"],"mappings":";;;;;AAQA,MAAMA,IAAoB,CAAiCC,MAAuC;AAC1F,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,UAAAC;AAAA,EACE,IAAAV,GAEEW,IAAmBC;AAAA,IACvB,MAAM,CAAC,EAAEH,KAAoBA,IAAmB,KAAKP,EAAM,UAAUO;AAAA,IACrE,CAACA,GAAkBP,EAAM,MAAM;AAAA,EAAA,GAG3BW,IAAiBC;AAAA,IACrB,CAACC,GAAuBC,MAAsB;AAC5C,MAAKA,IAGCP,MAAqB,IACdC,EAAA,CAACK,CAAa,CAAC,KACf,CAACJ,KAAoB,CAACF,MAC/BC,EAAS,CAAC,GAAGR,GAAOa,CAAa,CAAC,IALpCL,EAASR,EAAM,OAAO,CAAOe,MAAAA,MAAQF,CAAa,CAAC;AAAA,IAQvD;AAAA,IACA,CAACN,GAAkBC,GAAUC,GAAkBT,CAAK;AAAA,EAAA;AAGtD,2BACGgB,GAAA,EACE,UAAAf,EAAQ,IAAI,CAAUgB,MAAA;AACf,UAAA,EAAE,IAAAC,GAAI,OAAAC,EAAU,IAAAF,GAEhBG,IAAUpB,EAAM,SAASkB,CAAE,GAC3BG,IAAcZ,KAAoB,CAACW,GACnCE,KAAepB,KAAA,gBAAAA,EAAU,SAASgB,OAAOG;AAE/C,6BACGE,GAAA,EAAsC,aAAanB,KAAc,GAChE,UAAA,gBAAAoB;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,UAAS;AAAA,QACT,aAAa,GAAGlB,CAAgB;AAAA,QAChC,QAAQ,CAACc;AAAA,QACT,QAAQ;AAAA,QAER,UAAA,gBAAAG;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAOR;AAAA,YACP,MAAAnB;AAAA,YACA,OAAAoB;AAAA,YACA,SAAAC;AAAA,YACA,UAAAjB;AAAA,YACA,UAAUmB;AAAA,YACV,UAAUX;AAAA,YACV,eAAAN;AAAA,YACA,gBAAAC;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA,KAlB+BY,CAoBnC;AAAA,EAEH,CAAA,EACH,CAAA;AAEJ,GAEAS,IAAe9B;"}

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

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

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","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;"}
+{"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    stickyLabel,\n    ...rest\n  } = props;\n\n  return (\n    <BaseInput\n      renderAs={renderAs}\n      label={label}\n      stickyLabel={!!value || type === 'date' || stickyLabel}\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","stickyLabel","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,aAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAhB;AAGF,SAAA,gBAAAiB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAb;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS,UAAUa;AAAA,MAC3C,OAAAT;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,gBAAAI;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAAlB;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UACf,GAAGG;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAN;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDU,IAAetB;"}

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

@@ -1,5 +1,5 @@
 import a from "styled-components";
-const s = a.div(
+const p = a.div(
   ({ theme: { colors: t, zIndex: o }, $isClosing: e }) => `
   position: fixed;
   top: 0;
@@ -82,7 +82,7 @@ const s = a.div(
     max-height: 100vh;
   }
 }`
-), d = a.div(
+), m = a.div(
   ({ theme: { colors: t }, $modalWidth: o }) => `
   position: absolute;
   top: -56px;
@@ -100,13 +100,13 @@ const s = a.div(
     color: ${t.BLACK_1};
   }
 `
-), m = a.div`
+), d = a.div`
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   width: 100%;
-`, i = 720, r = 800, n = 500, h = a.div(
+`, i = 720, r = 800, n = 500, f = a.div(
   ({ $isClosing: t }) => `
   position: absolute;
   width: ${i}px;
@@ -150,13 +150,48 @@ const s = a.div(
     }
   }
 `
+), h = a.div(
+  ({ $isClosing: t }) => `
+    width: 100%;
+    height: max-content;
+    background: white; // Remove
+    overflow: scroll;
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    animation: ${t ? "slideOut" : "slideIn"} 0.3s forwards;
+
+    @keyframes slideIn {
+      from {
+        transform: translateY(100%);
+        opacity: 0;
+      }
+      to {
+        transform: translateY(0%);
+        opacity: 1;
+      }
+    }
+
+    @keyframes slideOut {
+      from {
+        transform: translateY(0%);
+        opacity: 1;
+      }
+      to {
+        transform: translateY(100%);
+        opacity: 0;
+      }
+    }
+  `
 );
 export {
   l as BaseModal,
   c as BaseModalContent,
-  d as CloseButtonContainer,
-  s as ModalContainer,
-  m as ModalLoaderWrapper,
-  h as SpotlightModal
+  h as BottomSheetModal,
+  m as CloseButtonContainer,
+  p as ModalContainer,
+  d as ModalLoaderWrapper,
+  f as SpotlightModal
 };
 //# sourceMappingURL=modal-styled.js.map

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, zIndex }, $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  z-index: ${zIndex.MODAL};\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 ModalLoaderWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  width: 100%;\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 {\n  ModalContainer,\n  BaseModal,\n  BaseModalContent,\n  CloseButtonContainer,\n  SpotlightModal,\n  ModalLoaderWrapper,\n};\n"],"names":["ModalContainer","styled","colors","zIndex","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","ModalLoaderWrapper","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,GAAQ,QAAAC,EAAO,GAAG,YAAAC,QAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAM3BF,EAAO,UAAU;AAAA;AAAA;AAAA,eAGxBE,IAAa,oBAAoB,gBAAgB;AAAA,aACnDD,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBzB,GAKME,IAAYJ,EAAO;AAAA,EAIvB,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAU,GAAA,YAAAE,GAAY,QAAAE,QAAa;AAAA;AAAA;AAAA;AAAA,WAItCA,CAAM;AAAA,sBACKJ,EAAO,OAAO;AAAA,sBACdA,EAAO,OAAO;AAAA;AAAA,eAGhCE,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,IAAmBN,EAAO;AAAA,EAC9B,CAAC,EAAE,aAAAO,EAAA,MAAkB;AAAA;AAAA;AAAA;AAAA,4BAIKA,CAAW;AAAA;AAAA;AAAA;AAIvC,GAKMC,IAAuBR,EAAO;AAAA,EAClC,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,aAAAM,EAAkB,MAAA;AAAA;AAAA;AAAA;AAAA,WAI/BN,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOGM,CAAW;AAAA;AAAA;AAAA,aAG1BN,EAAO,OAAO;AAAA;AAAA;AAG3B,GAEMQ,IAAqBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ5BU,IAAiB,KACjBC,IAAkC,KAClCC,IAAgC,KAEhCC,IAAiBb,EAAO;AAAA,EAG5B,CAAC,EAAE,YAAAG,EAAA,MAAiB;AAAA;AAAA,WAEXO,CAAc;AAAA;AAAA;AAAA,iBAGR,EAAEA,IAAiB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQdC,CAA+B;AAAA;AAAA;AAAA;AAAA,IAKnDR,IACI;AAAA;AAAA,4BAEoBS,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, zIndex }, $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  z-index: ${zIndex.MODAL};\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 ModalLoaderWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100vh;\n  width: 100%;\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\nconst BottomSheetModal = styled.div<{ $isClosing?: boolean }>(\n  ({ $isClosing }) => `\n    width: 100%;\n    height: max-content;\n    background: white; // Remove\n    overflow: scroll;\n    position: fixed;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    animation: ${$isClosing ? 'slideOut' : 'slideIn'} 0.3s forwards;\n\n    @keyframes slideIn {\n      from {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n      to {\n        transform: translateY(0%);\n        opacity: 1;\n      }\n    }\n\n    @keyframes slideOut {\n      from {\n        transform: translateY(0%);\n        opacity: 1;\n      }\n      to {\n        transform: translateY(100%);\n        opacity: 0;\n      }\n    }\n  `,\n);\n\nexport {\n  ModalContainer,\n  BaseModal,\n  BaseModalContent,\n  CloseButtonContainer,\n  SpotlightModal,\n  ModalLoaderWrapper,\n  BottomSheetModal,\n};\n"],"names":["ModalContainer","styled","colors","zIndex","$isClosing","BaseModal","$width","BaseModalContent","$modalWidth","CloseButtonContainer","ModalLoaderWrapper","spotlightWidth","spotlightAnimationStartDuration","spotlightAnimationEndDuration","SpotlightModal","BottomSheetModal"],"mappings":";AAEA,MAAMA,IAAiBC,EAAO;AAAA,EAC5B,CAAC,EAAE,OAAO,EAAE,QAAAC,GAAQ,QAAAC,EAAO,GAAG,YAAAC,QAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAM3BF,EAAO,UAAU;AAAA;AAAA;AAAA,eAGxBE,IAAa,oBAAoB,gBAAgB;AAAA,aACnDD,EAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoBzB,GAKME,IAAYJ,EAAO;AAAA,EAIvB,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAU,GAAA,YAAAE,GAAY,QAAAE,QAAa;AAAA;AAAA;AAAA;AAAA,WAItCA,CAAM;AAAA,sBACKJ,EAAO,OAAO;AAAA,sBACdA,EAAO,OAAO;AAAA;AAAA,eAGhCE,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,IAAmBN,EAAO;AAAA,EAC9B,CAAC,EAAE,aAAAO,EAAA,MAAkB;AAAA;AAAA;AAAA;AAAA,4BAIKA,CAAW;AAAA;AAAA;AAAA;AAIvC,GAKMC,IAAuBR,EAAO;AAAA,EAClC,CAAC,EAAE,OAAO,EAAE,QAAAC,EAAO,GAAG,aAAAM,EAAkB,MAAA;AAAA;AAAA;AAAA;AAAA,WAI/BN,EAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,4BAOGM,CAAW;AAAA;AAAA;AAAA,aAG1BN,EAAO,OAAO;AAAA;AAAA;AAG3B,GAEMQ,IAAqBT,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ5BU,IAAiB,KACjBC,IAAkC,KAClCC,IAAgC,KAEhCC,IAAiBb,EAAO;AAAA,EAG5B,CAAC,EAAE,YAAAG,EAAA,MAAiB;AAAA;AAAA,WAEXO,CAAc;AAAA;AAAA;AAAA,iBAGR,EAAEA,IAAiB,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQdC,CAA+B;AAAA;AAAA;AAAA;AAAA,IAKnDR,IACI;AAAA;AAAA,4BAEoBS,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,GAEME,IAAmBd,EAAO;AAAA,EAC9B,CAAC,EAAE,YAAAG,EAAA,MAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBASLA,IAAa,aAAa,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBpD;"}