@cuemath/leap 3.2.21-m → 3.2.21-tp-beta-0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/dist/assets/illustrations/illustrations.js +1 -0
  2. package/dist/assets/illustrations/illustrations.js.map +1 -1
  3. package/dist/assets/line-icons/icons/star3.js +32 -0
  4. package/dist/assets/line-icons/icons/star3.js.map +1 -0
  5. package/dist/features/chapters-v2/comps/node-card/node-card-tags.js +19 -12
  6. package/dist/features/chapters-v2/comps/node-card/node-card-tags.js.map +1 -1
  7. package/dist/features/chapters-v2/constants/block-constants.js +3 -2
  8. package/dist/features/chapters-v2/constants/block-constants.js.map +1 -1
  9. package/dist/features/chapters-v2/utils/index.js +6 -4
  10. package/dist/features/chapters-v2/utils/index.js.map +1 -1
  11. package/dist/features/chapters-v2/utils/node-card-utils.js +4 -0
  12. package/dist/features/chapters-v2/utils/node-card-utils.js.map +1 -1
  13. package/dist/features/milestone/create/comps/chapters-selection-step/chapter-selection-step-v2/chapters-list.js +68 -53
  14. package/dist/features/milestone/create/comps/chapters-selection-step/chapter-selection-step-v2/chapters-list.js.map +1 -1
  15. package/dist/features/sheets/constants/sheet.js +2 -1
  16. package/dist/features/sheets/constants/sheet.js.map +1 -1
  17. package/dist/features/trial-session/comps/student-profile/student-profile.js +1 -1
  18. package/dist/features/trial-session/comps/teacher-intro/teacher-intro-styled.js +7 -50
  19. package/dist/features/trial-session/comps/teacher-intro/teacher-intro-styled.js.map +1 -1
  20. package/dist/features/trial-session/comps/teacher-intro/teacher-intro.js +15 -69
  21. package/dist/features/trial-session/comps/teacher-intro/teacher-intro.js.map +1 -1
  22. package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.js +49 -0
  23. package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile-styled.js.map +1 -0
  24. package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile.js +64 -0
  25. package/dist/features/trial-session/comps/teacher-intro/teacher-profile/teacher-profile.js.map +1 -0
  26. package/dist/features/ui/accordion/accordion-items/accordion-items-styled.js +28 -0
  27. package/dist/features/ui/accordion/accordion-items/accordion-items-styled.js.map +1 -0
  28. package/dist/features/ui/accordion/accordion-items/accordion-items.js +83 -0
  29. package/dist/features/ui/accordion/accordion-items/accordion-items.js.map +1 -0
  30. package/dist/features/ui/accordion/accordion.js +62 -0
  31. package/dist/features/ui/accordion/accordion.js.map +1 -0
  32. package/dist/features/ui/buttons/button/button.js +41 -38
  33. package/dist/features/ui/buttons/button/button.js.map +1 -1
  34. package/dist/features/ui/buttons/icon-button/icon-button.js +31 -27
  35. package/dist/features/ui/buttons/icon-button/icon-button.js.map +1 -1
  36. package/dist/features/ui/buttons/text-button/text-button.js +26 -22
  37. package/dist/features/ui/buttons/text-button/text-button.js.map +1 -1
  38. package/dist/features/ui/grade-selector/grade-selector.js +33 -27
  39. package/dist/features/ui/grade-selector/grade-selector.js.map +1 -1
  40. package/dist/features/ui/inputs/base-input/base-input.js +11 -11
  41. package/dist/features/ui/inputs/base-input/base-input.js.map +1 -1
  42. package/dist/features/ui/inputs/text-input/text-input.js +19 -18
  43. package/dist/features/ui/inputs/text-input/text-input.js.map +1 -1
  44. package/dist/features/ui/modals/modal-styled.js +42 -8
  45. package/dist/features/ui/modals/modal-styled.js.map +1 -1
  46. package/dist/features/ui/modals/modal.js +37 -27
  47. package/dist/features/ui/modals/modal.js.map +1 -1
  48. package/dist/features/ui/tab/tab.js +30 -26
  49. package/dist/features/ui/tab/tab.js.map +1 -1
  50. package/dist/features/ui/text/text.js +31 -29
  51. package/dist/features/ui/text/text.js.map +1 -1
  52. package/dist/features/ui/theme/clrs.js +2 -0
  53. package/dist/features/ui/theme/clrs.js.map +1 -1
  54. package/dist/features/worksheet/worksheet/constants.js +13 -12
  55. package/dist/features/worksheet/worksheet/constants.js.map +1 -1
  56. package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question.js +260 -246
  57. package/dist/features/worksheet/worksheet/worksheet-question/worksheet-question.js.map +1 -1
  58. package/dist/features/worksheet/worksheet/worksheet-styled.js +28 -37
  59. package/dist/features/worksheet/worksheet/worksheet-styled.js.map +1 -1
  60. package/dist/features/worksheet/worksheet/worksheet.js +164 -166
  61. package/dist/features/worksheet/worksheet/worksheet.js.map +1 -1
  62. package/dist/index.d.ts +80 -5
  63. package/dist/index.js +635 -625
  64. package/dist/index.js.map +1 -1
  65. package/dist/static/stripe-blurple.6abf422f.svg +1 -0
  66. package/package.json +1 -2
@@ -1 +1 @@
1
- {"version":3,"file":"button.js","sources":["../../../../../src/features/ui/buttons/button/button.tsx"],"sourcesContent":["import type { IButtonProps } from './button-types';\n\nimport React, { useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useClickHandler from '../../hooks/use-click-handler';\nimport * as Styled from './button-styled';\n\nconst Button: React.FC<IButtonProps> = ({\n label,\n renderAs,\n size = 'regular',\n shape = 'curved',\n disabled = false,\n busy = false,\n width,\n widthX,\n Icon,\n iconPosition = 'left',\n onClick,\n alignSelf,\n justifyContent = 'center',\n analyticsLabel,\n analyticsProps,\n children,\n ...rest\n}) => {\n const { button } = useTheme();\n const { textVariant } = button.sizes[size];\n const { handleClick } = useClickHandler({ label, analyticsLabel, analyticsProps }, onClick);\n\n const handleOnClick = useCallback(() => {\n if (busy) return null;\n\n handleClick();\n }, [busy, handleClick]);\n\n return (\n <Styled.Button\n disabled={disabled}\n $alignSelf={alignSelf}\n $justifyContent={justifyContent}\n $width={width}\n $widthX={widthX}\n $renderAs={renderAs}\n $size={size}\n $shape={shape}\n onClick={handleOnClick}\n data-busy={busy}\n {...rest}\n >\n {busy ? (\n <Styled.Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size={size} />\n ) : (\n <>\n {Icon ? (\n <Styled.Icon $buttonRenderAs={renderAs} $iconPosition={iconPosition} $size={size}>\n <Icon />\n </Styled.Icon>\n ) : undefined}\n\n <Styled.Label $renderAs={textVariant} $buttonRenderAs={renderAs}>\n {label}\n </Styled.Label>\n\n {children}\n </>\n )}\n </Styled.Button>\n );\n};\n\nexport default Button;\n"],"names":["Button","label","renderAs","size","shape","disabled","busy","width","widthX","Icon","iconPosition","onClick","alignSelf","justifyContent","analyticsLabel","analyticsProps","children","rest","button","useTheme","textVariant","handleClick","useClickHandler","handleOnClick","useCallback","jsx","Styled.Button","Styled.Loader","ILLUSTRATIONS","jsxs","Fragment","Styled.Icon","Styled.Label","Button$1"],"mappings":";;;;;;AASA,MAAMA,IAAiC,CAAC;AAAA,EACtC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,QAAAC;AAAA,EAAA,MACAC;AAAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACE,QAAA,EAAE,QAAAC,MAAWC,KACb,EAAE,aAAAC,EAAgB,IAAAF,EAAO,MAAMf,CAAI,GACnC,EAAE,aAAAkB,EAAgB,IAAAC,EAAgB,EAAE,OAAArB,GAAO,gBAAAa,GAAgB,gBAAAC,KAAkBJ,CAAO,GAEpFY,IAAgBC,EAAY,MAAM;AACtC,QAAIlB,EAAa,QAAA;AAEL,IAAAe;EAAA,GACX,CAACf,GAAMe,CAAW,CAAC;AAGpB,SAAA,gBAAAI;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAArB;AAAA,MACA,YAAYO;AAAA,MACZ,iBAAiBC;AAAA,MACjB,QAAQN;AAAA,MACR,SAASC;AAAA,MACT,WAAWN;AAAA,MACX,OAAOC;AAAA,MACP,QAAQC;AAAA,MACR,SAASmB;AAAA,MACT,aAAWjB;AAAA,MACV,GAAGW;AAAA,MAEH,UACCX,IAAA,gBAAAmB,EAACE,GAAA,EAAc,KAAKC,EAAc,QAAQ,KAAI,UAAS,OAAOzB,EAAM,CAAA,IAGjE,gBAAA0B,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAArB,IACE,gBAAAgB,EAAAM,GAAA,EAAY,iBAAiB7B,GAAU,eAAeQ,GAAc,OAAOP,GAC1E,UAAC,gBAAAsB,EAAAhB,GAAA,CAAA,CAAK,GACR,IACE;AAAA,QAEJ,gBAAAgB,EAACO,GAAA,EAAa,WAAWZ,GAAa,iBAAiBlB,GACpD,UACHD,GAAA;AAAA,QAECe;AAAA,MAAA,GACH;AAAA,IAAA;AAAA,EAAA;AAIR,GAEAiB,IAAejC;"}
1
+ {"version":3,"file":"button.js","sources":["../../../../../src/features/ui/buttons/button/button.tsx"],"sourcesContent":["import type { IButtonProps } from './button-types';\n\nimport React, { useCallback, useMemo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useClickHandler from '../../hooks/use-click-handler';\nimport { EDeviceType } from '../../theme/constants';\nimport * as Styled from './button-styled';\n\nconst Button: React.FC<IButtonProps> = ({\n label,\n renderAs,\n size = 'regular',\n shape = 'curved',\n disabled = false,\n busy = false,\n width,\n widthX,\n Icon,\n iconPosition = 'left',\n onClick,\n alignSelf,\n justifyContent = 'center',\n analyticsLabel,\n analyticsProps,\n children,\n sizeOnMobile,\n sizeOnTablet,\n ...rest\n}) => {\n const { button, device } = useTheme();\n const renderSize = useMemo(() => {\n if (device <= EDeviceType.MOBILE) {\n return sizeOnMobile || sizeOnTablet || size;\n }\n\n if (device <= EDeviceType.TABLET) {\n return sizeOnTablet || size;\n }\n\n return size;\n }, [device, size, sizeOnMobile, sizeOnTablet]);\n\n const { textVariant } = button.sizes[renderSize];\n const { handleClick } = useClickHandler({ label, analyticsLabel, analyticsProps }, onClick);\n\n const handleOnClick = useCallback(() => {\n if (busy) return null;\n\n handleClick();\n }, [busy, handleClick]);\n\n return (\n <Styled.Button\n disabled={disabled}\n $alignSelf={alignSelf}\n $justifyContent={justifyContent}\n $width={width}\n $widthX={widthX}\n $renderAs={renderAs}\n $size={renderSize}\n $shape={shape}\n onClick={handleOnClick}\n data-busy={busy}\n {...rest}\n >\n {busy ? (\n <Styled.Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size={renderSize} />\n ) : (\n <>\n {Icon ? (\n <Styled.Icon $buttonRenderAs={renderAs} $iconPosition={iconPosition} $size={renderSize}>\n <Icon />\n </Styled.Icon>\n ) : undefined}\n\n <Styled.Label $renderAs={textVariant} $buttonRenderAs={renderAs}>\n {label}\n </Styled.Label>\n\n {children}\n </>\n )}\n </Styled.Button>\n );\n};\n\nexport default Button;\n"],"names":["Button","label","renderAs","size","shape","disabled","busy","width","widthX","Icon","iconPosition","onClick","alignSelf","justifyContent","analyticsLabel","analyticsProps","children","sizeOnMobile","sizeOnTablet","rest","button","device","useTheme","renderSize","useMemo","EDeviceType","textVariant","handleClick","useClickHandler","handleOnClick","useCallback","jsx","Styled.Button","Styled.Loader","ILLUSTRATIONS","jsxs","Fragment","Styled.Icon","Styled.Label","Button$1"],"mappings":";;;;;;;AAUA,MAAMA,IAAiC,CAAC;AAAA,EACtC,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,OAAAC;AAAA,EACA,QAAAC;AAAA,EAAA,MACAC;AAAAA,EACA,cAAAC,IAAe;AAAA,EACf,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,MAAM;AACJ,QAAM,EAAE,QAAAC,GAAQ,QAAAC,EAAO,IAAIC,EAAS,GAC9BC,IAAaC,EAAQ,MACrBH,KAAUI,EAAY,SACjBR,KAAgBC,KAAgBf,IAGrCkB,KAAUI,EAAY,UACjBP,KAAgBf,GAIxB,CAACkB,GAAQlB,GAAMc,GAAcC,CAAY,CAAC,GAEvC,EAAE,aAAAQ,EAAgB,IAAAN,EAAO,MAAMG,CAAU,GACzC,EAAE,aAAAI,EAAgB,IAAAC,EAAgB,EAAE,OAAA3B,GAAO,gBAAAa,GAAgB,gBAAAC,KAAkBJ,CAAO,GAEpFkB,IAAgBC,EAAY,MAAM;AACtC,QAAIxB,EAAa,QAAA;AAEL,IAAAqB;EAAA,GACX,CAACrB,GAAMqB,CAAW,CAAC;AAGpB,SAAA,gBAAAI;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAA3B;AAAA,MACA,YAAYO;AAAA,MACZ,iBAAiBC;AAAA,MACjB,QAAQN;AAAA,MACR,SAASC;AAAA,MACT,WAAWN;AAAA,MACX,OAAOqB;AAAA,MACP,QAAQnB;AAAA,MACR,SAASyB;AAAA,MACT,aAAWvB;AAAA,MACV,GAAGa;AAAA,MAEH,UACCb,IAAA,gBAAAyB,EAACE,GAAA,EAAc,KAAKC,EAAc,QAAQ,KAAI,UAAS,OAAOX,EAAY,CAAA,IAGvE,gBAAAY,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA3B,IACE,gBAAAsB,EAAAM,GAAA,EAAY,iBAAiBnC,GAAU,eAAeQ,GAAc,OAAOa,GAC1E,UAAC,gBAAAQ,EAAAtB,GAAA,CAAA,CAAK,GACR,IACE;AAAA,QAEJ,gBAAAsB,EAACO,GAAA,EAAa,WAAWZ,GAAa,iBAAiBxB,GACpD,UACHD,GAAA;AAAA,QAECe;AAAA,MAAA,GACH;AAAA,IAAA;AAAA,EAAA;AAIR,GAEAuB,IAAevC;"}
@@ -1,34 +1,38 @@
1
- import { jsx as o } from "react/jsx-runtime";
2
- import { memo as p } from "react";
3
- import { ILLUSTRATIONS as u } from "../../../../assets/illustrations/illustrations.js";
4
- import f from "../../hooks/use-click-handler.js";
5
- import { Loader as I } from "../button/button-styled.js";
6
- import { IconButtonWrapper as $, IconWrapper as C } from "./icon-button-styled.js";
7
- const L = p((n) => {
1
+ import { jsx as e } from "react/jsx-runtime";
2
+ import { memo as b, useMemo as z } from "react";
3
+ import { useTheme as B } from "styled-components";
4
+ import { ILLUSTRATIONS as T } from "../../../../assets/illustrations/illustrations.js";
5
+ import $ from "../../hooks/use-click-handler.js";
6
+ import { EDeviceType as c } from "../../theme/constants.js";
7
+ import { Loader as A } from "../button/button-styled.js";
8
+ import { IconButtonWrapper as C, IconWrapper as O } from "./icon-button-styled.js";
9
+ const h = b((m) => {
8
10
  const {
9
- Icon: e,
10
- size: r,
11
- onClick: s,
12
- renderAs: t,
13
- disabled: c,
14
- analyticsLabel: i,
15
- analyticsProps: l,
16
- customBgColor: m,
17
- busy: a
18
- } = n, { handleClick: d } = f({ analyticsLabel: i, analyticsProps: l }, s);
19
- return /* @__PURE__ */ o(
20
- $,
11
+ Icon: l,
12
+ size: o,
13
+ sizeOnMobile: n,
14
+ sizeOnTablet: r,
15
+ onClick: a,
16
+ renderAs: i,
17
+ disabled: u,
18
+ analyticsLabel: p,
19
+ analyticsProps: d,
20
+ customBgColor: f,
21
+ busy: I
22
+ } = m, { handleClick: L } = $({ analyticsLabel: p, analyticsProps: d }, a), { device: t } = B(), s = z(() => t <= c.MOBILE ? n || r || o : t <= c.TABLET && r || o, [t, o, n, r]);
23
+ return /* @__PURE__ */ e(
24
+ C,
21
25
  {
22
- disabled: c,
23
- $size: r,
24
- $buttonRenderAs: t,
25
- onClick: d,
26
- $customBgColor: m,
27
- children: a ? /* @__PURE__ */ o(I, { src: u.LOADER, alt: "Loader", $size: r || "small" }) : /* @__PURE__ */ o(C, { $size: r, $buttonRenderAs: t, children: /* @__PURE__ */ o(e, {}) })
26
+ disabled: u,
27
+ $size: o,
28
+ $buttonRenderAs: i,
29
+ onClick: L,
30
+ $customBgColor: f,
31
+ children: I ? /* @__PURE__ */ e(A, { src: T.LOADER, alt: "Loader", $size: s || "small" }) : /* @__PURE__ */ e(O, { $size: s, $buttonRenderAs: i, children: /* @__PURE__ */ e(l, {}) })
28
32
  }
29
33
  );
30
- }), h = L;
34
+ }), x = h;
31
35
  export {
32
- h as default
36
+ x as default
33
37
  };
34
38
  //# sourceMappingURL=icon-button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"icon-button.js","sources":["../../../../../src/features/ui/buttons/icon-button/icon-button.tsx"],"sourcesContent":["import type { IIconButtonProps } from './icon-button-types';\n\nimport { memo, type FC } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useClickHandler from '../../hooks/use-click-handler';\nimport { Loader } from '../button/button-styled';\nimport * as Styled from './icon-button-styled';\n\nconst IconButton: FC<IIconButtonProps> = memo(props => {\n const {\n Icon,\n size,\n onClick,\n renderAs,\n disabled,\n analyticsLabel,\n analyticsProps,\n customBgColor,\n busy,\n } = props;\n const { handleClick } = useClickHandler({ analyticsLabel, analyticsProps }, onClick);\n\n return (\n <Styled.IconButtonWrapper\n disabled={disabled}\n $size={size}\n $buttonRenderAs={renderAs}\n onClick={handleClick}\n $customBgColor={customBgColor}\n >\n {busy ? (\n <Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size={size || 'small'} />\n ) : (\n <Styled.IconWrapper $size={size} $buttonRenderAs={renderAs}>\n <Icon />\n </Styled.IconWrapper>\n )}\n </Styled.IconButtonWrapper>\n );\n});\n\nexport default IconButton;\n"],"names":["IconButton","memo","props","Icon","size","onClick","renderAs","disabled","analyticsLabel","analyticsProps","customBgColor","busy","handleClick","useClickHandler","jsx","Styled.IconButtonWrapper","Loader","ILLUSTRATIONS","Styled.IconWrapper","IconButton$1"],"mappings":";;;;;;AASA,MAAMA,IAAmCC,EAAK,CAASC,MAAA;AAC/C,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,MAAAC;AAAA,EACE,IAAAT,GACE,EAAE,aAAAU,MAAgBC,EAAgB,EAAE,gBAAAL,GAAgB,gBAAAC,EAAA,GAAkBJ,CAAO;AAGjF,SAAA,gBAAAS;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAAR;AAAA,MACA,OAAOH;AAAA,MACP,iBAAiBE;AAAA,MACjB,SAASM;AAAA,MACT,gBAAgBF;AAAA,MAEf,UAAAC,sBACEK,GAAO,EAAA,KAAKC,EAAc,QAAQ,KAAI,UAAS,OAAOb,KAAQ,SAAS,IAEvE,gBAAAU,EAAAI,GAAA,EAAmB,OAAOd,GAAM,iBAAiBE,GAChD,UAAC,gBAAAQ,EAAAX,GAAA,CAAA,CAAK,EACR,CAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC,GAEDgB,IAAenB;"}
1
+ {"version":3,"file":"icon-button.js","sources":["../../../../../src/features/ui/buttons/icon-button/icon-button.tsx"],"sourcesContent":["import type { IIconButtonProps } from './icon-button-types';\n\nimport { memo, useMemo, type FC } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport useClickHandler from '../../hooks/use-click-handler';\nimport { EDeviceType } from '../../theme/constants';\nimport { Loader } from '../button/button-styled';\nimport * as Styled from './icon-button-styled';\n\nconst IconButton: FC<IIconButtonProps> = memo(props => {\n const {\n Icon,\n size,\n sizeOnMobile,\n sizeOnTablet,\n onClick,\n renderAs,\n disabled,\n analyticsLabel,\n analyticsProps,\n customBgColor,\n busy,\n } = props;\n const { handleClick } = useClickHandler({ analyticsLabel, analyticsProps }, onClick);\n const { device } = useTheme();\n const renderSize = useMemo(() => {\n if (device <= EDeviceType.MOBILE) {\n return sizeOnMobile || sizeOnTablet || size;\n }\n\n if (device <= EDeviceType.TABLET) {\n return sizeOnTablet || size;\n }\n\n return size;\n }, [device, size, sizeOnMobile, sizeOnTablet]);\n\n return (\n <Styled.IconButtonWrapper\n disabled={disabled}\n $size={size}\n $buttonRenderAs={renderAs}\n onClick={handleClick}\n $customBgColor={customBgColor}\n >\n {busy ? (\n <Loader src={ILLUSTRATIONS.LOADER} alt=\"Loader\" $size={renderSize || 'small'} />\n ) : (\n <Styled.IconWrapper $size={renderSize} $buttonRenderAs={renderAs}>\n <Icon />\n </Styled.IconWrapper>\n )}\n </Styled.IconButtonWrapper>\n );\n});\n\nexport default IconButton;\n"],"names":["IconButton","memo","props","Icon","size","sizeOnMobile","sizeOnTablet","onClick","renderAs","disabled","analyticsLabel","analyticsProps","customBgColor","busy","handleClick","useClickHandler","device","useTheme","renderSize","useMemo","EDeviceType","jsx","Styled.IconButtonWrapper","Loader","ILLUSTRATIONS","Styled.IconWrapper","IconButton$1"],"mappings":";;;;;;;;AAWA,MAAMA,IAAmCC,EAAK,CAASC,MAAA;AAC/C,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,MAAAC;AAAA,EACE,IAAAX,GACE,EAAE,aAAAY,MAAgBC,EAAgB,EAAE,gBAAAL,GAAgB,gBAAAC,EAAA,GAAkBJ,CAAO,GAC7E,EAAE,QAAAS,MAAWC,KACbC,IAAaC,EAAQ,MACrBH,KAAUI,EAAY,SACjBf,KAAgBC,KAAgBF,IAGrCY,KAAUI,EAAY,UACjBd,KAAgBF,GAIxB,CAACY,GAAQZ,GAAMC,GAAcC,CAAY,CAAC;AAG3C,SAAA,gBAAAe;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAAb;AAAA,MACA,OAAOL;AAAA,MACP,iBAAiBI;AAAA,MACjB,SAASM;AAAA,MACT,gBAAgBF;AAAA,MAEf,UAAAC,sBACEU,GAAO,EAAA,KAAKC,EAAc,QAAQ,KAAI,UAAS,OAAON,KAAc,SAAS,IAE7E,gBAAAG,EAAAI,GAAA,EAAmB,OAAOP,GAAY,iBAAiBV,GACtD,UAAC,gBAAAa,EAAAlB,GAAA,CAAA,CAAK,EACR,CAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC,GAEDuB,IAAe1B;"}
@@ -1,30 +1,34 @@
1
- import { jsx as r } from "react/jsx-runtime";
2
- import { useTheme as x } from "styled-components";
3
- import a from "../clickable/clickable.js";
4
- import { Text as f } from "./text-button-styled.js";
1
+ import { jsx as u } from "react/jsx-runtime";
2
+ import { useMemo as T } from "react";
3
+ import { useTheme as a } from "styled-components";
4
+ import { EDeviceType as c } from "../../theme/constants.js";
5
+ import $ from "../clickable/clickable.js";
6
+ import { Text as h } from "./text-button-styled.js";
5
7
  const l = ({
6
- label: t,
7
- size: o = "regular",
8
- disabled: e = !1,
9
- onClick: n,
10
- analyticsLabel: s,
11
- analyticsProps: i,
12
- color: m
8
+ label: e,
9
+ size: r = "regular",
10
+ sizeOnMobile: n,
11
+ sizeOnTablet: t,
12
+ disabled: f = !1,
13
+ onClick: i,
14
+ analyticsLabel: p,
15
+ analyticsProps: s,
16
+ color: x
13
17
  }) => {
14
- const { textButton: c } = x(), { textVariant: u } = c.sizes[o];
15
- return /* @__PURE__ */ r(
16
- a,
18
+ const { textButton: d, device: o } = a(), m = T(() => o <= c.MOBILE ? n || t || r : o <= c.TABLET && t || r, [o, r, n, t]), { textVariant: B } = d.sizes[m];
19
+ return /* @__PURE__ */ u(
20
+ $,
17
21
  {
18
- label: t,
19
- disabled: e,
20
- onClick: n,
21
- analyticsLabel: s,
22
- analyticsProps: i,
23
- children: /* @__PURE__ */ r(f, { $color: m, $renderAs: u, $buttonSize: o, children: t })
22
+ label: e,
23
+ disabled: f,
24
+ onClick: i,
25
+ analyticsLabel: p,
26
+ analyticsProps: s,
27
+ children: /* @__PURE__ */ u(h, { $color: x, $renderAs: B, $buttonSize: m, children: e })
24
28
  }
25
29
  );
26
- }, h = l;
30
+ }, j = l;
27
31
  export {
28
- h as default
32
+ j as default
29
33
  };
30
34
  //# sourceMappingURL=text-button.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"text-button.js","sources":["../../../../../src/features/ui/buttons/text-button/text-button.tsx"],"sourcesContent":["import type { ITextButtonProps } from './text-button-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport Clickable from '../clickable/clickable';\nimport * as Styled from './text-button-styled';\n\nconst TextButton: React.FC<ITextButtonProps> = ({\n label,\n size = 'regular',\n disabled = false,\n onClick,\n analyticsLabel,\n analyticsProps,\n color,\n}) => {\n const { textButton } = useTheme();\n const { textVariant } = textButton.sizes[size];\n\n return (\n <Clickable\n label={label}\n disabled={disabled}\n onClick={onClick}\n analyticsLabel={analyticsLabel}\n analyticsProps={analyticsProps}\n >\n <Styled.Text $color={color} $renderAs={textVariant} $buttonSize={size}>\n {label}\n </Styled.Text>\n </Clickable>\n );\n};\n\nexport default TextButton;\n"],"names":["TextButton","label","size","disabled","onClick","analyticsLabel","analyticsProps","color","textButton","useTheme","textVariant","jsx","Clickable","Styled.Text","TextButton$1"],"mappings":";;;;AAQA,MAAMA,IAAyC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACE,QAAA,EAAE,YAAAC,MAAeC,KACjB,EAAE,aAAAC,EAAgB,IAAAF,EAAW,MAAMN,CAAI;AAG3C,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAX;AAAA,MACA,UAAAE;AAAA,MACA,SAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MAEA,UAAA,gBAAAK,EAACE,GAAA,EAAY,QAAQN,GAAO,WAAWG,GAAa,aAAaR,GAC9D,UACHD,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEAa,IAAed;"}
1
+ {"version":3,"file":"text-button.js","sources":["../../../../../src/features/ui/buttons/text-button/text-button.tsx"],"sourcesContent":["import type { ITextButtonProps } from './text-button-types';\n\nimport React, { useMemo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { EDeviceType } from '../../theme/constants';\nimport Clickable from '../clickable/clickable';\nimport * as Styled from './text-button-styled';\n\nconst TextButton: React.FC<ITextButtonProps> = ({\n label,\n size = 'regular',\n sizeOnMobile,\n sizeOnTablet,\n disabled = false,\n onClick,\n analyticsLabel,\n analyticsProps,\n color,\n}) => {\n const { textButton, device } = useTheme();\n const renderSize = useMemo(() => {\n if (device <= EDeviceType.MOBILE) {\n return sizeOnMobile || sizeOnTablet || size;\n }\n\n if (device <= EDeviceType.TABLET) {\n return sizeOnTablet || size;\n }\n\n return size;\n }, [device, size, sizeOnMobile, sizeOnTablet]);\n\n const { textVariant } = textButton.sizes[renderSize];\n\n return (\n <Clickable\n label={label}\n disabled={disabled}\n onClick={onClick}\n analyticsLabel={analyticsLabel}\n analyticsProps={analyticsProps}\n >\n <Styled.Text $color={color} $renderAs={textVariant} $buttonSize={renderSize}>\n {label}\n </Styled.Text>\n </Clickable>\n );\n};\n\nexport default TextButton;\n"],"names":["TextButton","label","size","sizeOnMobile","sizeOnTablet","disabled","onClick","analyticsLabel","analyticsProps","color","textButton","device","useTheme","renderSize","useMemo","EDeviceType","textVariant","jsx","Clickable","Styled.Text","TextButton$1"],"mappings":";;;;;;AASA,MAAMA,IAAyC,CAAC;AAAA,EAC9C,OAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,OAAAC;AACF,MAAM;AACJ,QAAM,EAAE,YAAAC,GAAY,QAAAC,EAAO,IAAIC,EAAS,GAClCC,IAAaC,EAAQ,MACrBH,KAAUI,EAAY,SACjBZ,KAAgBC,KAAgBF,IAGrCS,KAAUI,EAAY,UACjBX,KAAgBF,GAIxB,CAACS,GAAQT,GAAMC,GAAcC,CAAY,CAAC,GAEvC,EAAE,aAAAY,EAAgB,IAAAN,EAAW,MAAMG,CAAU;AAGjD,SAAA,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAjB;AAAA,MACA,UAAAI;AAAA,MACA,SAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,gBAAAC;AAAA,MAEA,UAAA,gBAAAS,EAACE,GAAA,EAAY,QAAQV,GAAO,WAAWO,GAAa,aAAaH,GAC9D,UACHZ,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEAmB,IAAepB;"}
@@ -1,40 +1,46 @@
1
- import { jsx as r } from "react/jsx-runtime";
2
- import { GradeSelectorWrapper as a } from "./grade-selector-styled.js";
3
- import f from "./grade-tab.js";
4
- function d({
5
- selectedValue: t,
6
- onSelect: o,
7
- tabsWidth: i,
8
- width: l,
9
- grades: m,
10
- renderAs: n,
11
- size: c,
12
- layoutAlignment: p
1
+ import { jsx as c } from "react/jsx-runtime";
2
+ import { useMemo as h } from "react";
3
+ import { useTheme as s } from "styled-components";
4
+ import { EDeviceType as f } from "../theme/constants.js";
5
+ import { GradeSelectorWrapper as x } from "./grade-selector-styled.js";
6
+ import E from "./grade-tab.js";
7
+ function I({
8
+ selectedValue: i,
9
+ onSelect: n,
10
+ tabsWidth: p,
11
+ width: u,
12
+ grades: l,
13
+ renderAs: d,
14
+ size: e,
15
+ sizeOnMobile: m,
16
+ sizeOnTablet: t,
17
+ layoutAlignment: a
13
18
  }) {
14
- return /* @__PURE__ */ r(
15
- a,
19
+ const { device: o } = s(), G = h(() => o <= f.MOBILE ? m || t || e : o <= f.TABLET && t || e, [o, e, m, t]);
20
+ return /* @__PURE__ */ c(
21
+ x,
16
22
  {
17
- width: l,
18
- layoutAlignment: p,
23
+ width: u,
24
+ layoutAlignment: a,
19
25
  $alignItems: "center",
20
26
  $flexDirection: "row",
21
- children: m.map((e) => /* @__PURE__ */ r(
22
- f,
27
+ children: l.map((r) => /* @__PURE__ */ c(
28
+ E,
23
29
  {
24
- label: e === "0" ? "KG" : e,
25
- selected: t === e,
26
- width: i,
27
- onSelect: o,
28
- renderAs: n,
29
- size: c,
30
- grade: e
30
+ label: r === "0" ? "KG" : r,
31
+ selected: i === r,
32
+ width: p,
33
+ onSelect: n,
34
+ renderAs: d,
35
+ size: G,
36
+ grade: r
31
37
  },
32
- e
38
+ r
33
39
  ))
34
40
  }
35
41
  );
36
42
  }
37
43
  export {
38
- d as default
44
+ I as default
39
45
  };
40
46
  //# sourceMappingURL=grade-selector.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"grade-selector.js","sources":["../../../../src/features/ui/grade-selector/grade-selector.tsx"],"sourcesContent":["import type { IGradeSelectorProps } from './grade-selector-types';\nimport type { ReactElement } from 'react';\n\nimport * as Styled from './grade-selector-styled';\nimport GradeTab from './grade-tab';\n\nfunction GradeSelector({\n selectedValue,\n onSelect,\n tabsWidth,\n width,\n grades,\n renderAs,\n size,\n layoutAlignment,\n}: IGradeSelectorProps): ReactElement {\n return (\n <Styled.GradeSelectorWrapper\n width={width}\n layoutAlignment={layoutAlignment}\n $alignItems=\"center\"\n $flexDirection=\"row\"\n >\n {grades.map(grade => {\n return (\n <GradeTab\n key={grade}\n label={grade === '0' ? 'KG' : grade}\n selected={selectedValue === grade}\n width={tabsWidth}\n onSelect={onSelect}\n renderAs={renderAs}\n size={size}\n grade={grade}\n />\n );\n })}\n </Styled.GradeSelectorWrapper>\n );\n}\n\nexport default GradeSelector;\n"],"names":["GradeSelector","selectedValue","onSelect","tabsWidth","width","grades","renderAs","size","layoutAlignment","jsx","Styled.GradeSelectorWrapper","grade","GradeTab"],"mappings":";;;AAMA,SAASA,EAAc;AAAA,EACrB,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,iBAAAC;AACF,GAAsC;AAElC,SAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAN;AAAA,MACA,iBAAAI;AAAA,MACA,aAAY;AAAA,MACZ,gBAAe;AAAA,MAEd,UAAAH,EAAO,IAAI,CAASM,MAEjB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,OAAOD,MAAU,MAAM,OAAOA;AAAA,UAC9B,UAAUV,MAAkBU;AAAA,UAC5B,OAAOR;AAAA,UACP,UAAAD;AAAA,UACA,UAAAI;AAAA,UACA,MAAAC;AAAA,UACA,OAAAI;AAAA,QAAA;AAAA,QAPKA;AAAA,MAAA,CAUV;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1
+ {"version":3,"file":"grade-selector.js","sources":["../../../../src/features/ui/grade-selector/grade-selector.tsx"],"sourcesContent":["import type { IGradeSelectorProps } from './grade-selector-types';\n\nimport { useMemo, type ReactElement } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport { EDeviceType } from '../theme/constants';\nimport * as Styled from './grade-selector-styled';\nimport GradeTab from './grade-tab';\n\nfunction GradeSelector({\n selectedValue,\n onSelect,\n tabsWidth,\n width,\n grades,\n renderAs,\n size,\n sizeOnMobile,\n sizeOnTablet,\n layoutAlignment,\n}: IGradeSelectorProps): ReactElement {\n const { device } = useTheme();\n const renderSize = useMemo(() => {\n if (device <= EDeviceType.MOBILE) {\n return sizeOnMobile || sizeOnTablet || size;\n }\n\n if (device <= EDeviceType.TABLET) {\n return sizeOnTablet || size;\n }\n\n return size;\n }, [device, size, sizeOnMobile, sizeOnTablet]);\n\n return (\n <Styled.GradeSelectorWrapper\n width={width}\n layoutAlignment={layoutAlignment}\n $alignItems=\"center\"\n $flexDirection=\"row\"\n >\n {grades.map(grade => {\n return (\n <GradeTab\n key={grade}\n label={grade === '0' ? 'KG' : grade}\n selected={selectedValue === grade}\n width={tabsWidth}\n onSelect={onSelect}\n renderAs={renderAs}\n size={renderSize}\n grade={grade}\n />\n );\n })}\n </Styled.GradeSelectorWrapper>\n );\n}\n\nexport default GradeSelector;\n"],"names":["GradeSelector","selectedValue","onSelect","tabsWidth","width","grades","renderAs","size","sizeOnMobile","sizeOnTablet","layoutAlignment","device","useTheme","renderSize","useMemo","EDeviceType","jsx","Styled.GradeSelectorWrapper","grade","GradeTab"],"mappings":";;;;;;AASA,SAASA,EAAc;AAAA,EACrB,eAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AAAA,EACA,iBAAAC;AACF,GAAsC;AAC9B,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAaC,EAAQ,MACrBH,KAAUI,EAAY,SACjBP,KAAgBC,KAAgBF,IAGrCI,KAAUI,EAAY,UACjBN,KAAgBF,GAIxB,CAACI,GAAQJ,GAAMC,GAAcC,CAAY,CAAC;AAG3C,SAAA,gBAAAO;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,OAAAb;AAAA,MACA,iBAAAM;AAAA,MACA,aAAY;AAAA,MACZ,gBAAe;AAAA,MAEd,UAAAL,EAAO,IAAI,CAASa,MAEjB,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UAEC,OAAOD,MAAU,MAAM,OAAOA;AAAA,UAC9B,UAAUjB,MAAkBiB;AAAA,UAC5B,OAAOf;AAAA,UACP,UAAAD;AAAA,UACA,UAAAI;AAAA,UACA,MAAMO;AAAA,UACN,OAAAK;AAAA,QAAA;AAAA,QAPKA;AAAA,MAAA,CAUV;AAAA,IAAA;AAAA,EAAA;AAGP;"}
@@ -1,10 +1,10 @@
1
- import { jsx as r, jsxs as l } from "react/jsx-runtime";
1
+ import { jsx as r, jsxs as a } from "react/jsx-runtime";
2
2
  import { useTheme as g } from "styled-components";
3
3
  import { Container as x, Wrapper as z, InputWrapper as f, Error as L, HelperText as y, SiblingWrapper as R, Label as E } from "./base-input-styled.js";
4
- const k = (h) => {
4
+ const H = ($) => {
5
5
  const {
6
- label: a,
7
- stickyLabel: $,
6
+ label: l,
7
+ stickyLabel: h,
8
8
  renderAs: e,
9
9
  width: b,
10
10
  widthX: c,
@@ -19,8 +19,8 @@ const k = (h) => {
19
19
  shape: t,
20
20
  isTransparent: p = !1,
21
21
  helperText: o
22
- } = h, { input: T } = g();
23
- return /* @__PURE__ */ r(x, { $width: b, $widthX: c, $size: s, $willShowMessage: u, children: /* @__PURE__ */ l(
22
+ } = $, { input: T } = g();
23
+ return /* @__PURE__ */ r(x, { $width: b, $widthX: c, $size: s, $willShowMessage: u, children: /* @__PURE__ */ a(
24
24
  z,
25
25
  {
26
26
  $renderAs: e,
@@ -29,7 +29,7 @@ const k = (h) => {
29
29
  $shape: t,
30
30
  $isTransparent: p,
31
31
  children: [
32
- /* @__PURE__ */ l(f, { children: [
32
+ /* @__PURE__ */ a(f, { children: [
33
33
  w,
34
34
  n && /* @__PURE__ */ r(L, { $renderAs: "body3", $inputRenderAs: e, children: n }),
35
35
  o && !n && /* @__PURE__ */ r(y, { $renderAs: "ub3", $inputRenderAs: e, children: o })
@@ -44,18 +44,18 @@ const k = (h) => {
44
44
  children: d
45
45
  }
46
46
  ) : void 0,
47
- a && t !== "curved" && /* @__PURE__ */ l(
47
+ l && t !== "curved" && /* @__PURE__ */ a(
48
48
  E,
49
49
  {
50
50
  $renderAs: T.sizes[s].labelTextVariant,
51
51
  $inputRenderAs: e,
52
52
  $size: s,
53
- $stickyLabel: $,
53
+ $stickyLabel: h,
54
54
  $disabled: i,
55
55
  $shape: t,
56
56
  $isTransparent: p,
57
57
  children: [
58
- a,
58
+ l,
59
59
  A && /* @__PURE__ */ r("span", { children: "*" })
60
60
  ]
61
61
  }
@@ -63,7 +63,7 @@ const k = (h) => {
63
63
  ]
64
64
  }
65
65
  ) });
66
- };
66
+ }, k = H;
67
67
  export {
68
68
  k as default
69
69
  };
@@ -1 +1 @@
1
- {"version":3,"file":"base-input.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n Container,\n Error,\n InputWrapper,\n Label,\n SiblingWrapper,\n Wrapper,\n HelperText,\n} from './base-input-styled';\n\nconst BaseInput: React.FC<IBaseInputProps> = props => {\n const {\n label,\n stickyLabel,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n inputElement,\n siblingElement,\n siblingPosition,\n size,\n errorMessage,\n mandatory,\n shape,\n isTransparent = false,\n helperText,\n } = props;\n const { input } = useTheme();\n const showLabel = label && shape !== 'curved';\n const showHelperText = helperText && !errorMessage;\n\n return (\n <Container $width={width} $widthX={widthX} $size={size} $willShowMessage={willShowMessage}>\n <Wrapper\n $renderAs={renderAs}\n $size={size}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n <InputWrapper>\n {inputElement}\n {errorMessage && (\n <Error $renderAs=\"body3\" $inputRenderAs={renderAs}>\n {errorMessage}\n </Error>\n )}\n {showHelperText && (\n <HelperText $renderAs=\"ub3\" $inputRenderAs={renderAs}>\n {helperText}\n </HelperText>\n )}\n </InputWrapper>\n {siblingElement ? (\n <SiblingWrapper\n $inputRenderAs={renderAs}\n $disabled={disabled}\n $size={size}\n $siblingPosition={siblingPosition ?? 'right'}\n >\n {siblingElement}\n </SiblingWrapper>\n ) : undefined}\n {showLabel && (\n <Label\n $renderAs={input.sizes[size].labelTextVariant}\n $inputRenderAs={renderAs}\n $size={size}\n $stickyLabel={stickyLabel}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n {label}\n {mandatory && <span>*</span>}\n </Label>\n )}\n </Wrapper>\n </Container>\n );\n};\n\nexport default BaseInput;\n"],"names":["BaseInput","props","label","stickyLabel","renderAs","width","widthX","disabled","willShowMessage","inputElement","siblingElement","siblingPosition","size","errorMessage","mandatory","shape","isTransparent","helperText","input","useTheme","jsx","Container","jsxs","Wrapper","InputWrapper","Error","HelperText","SiblingWrapper","Label"],"mappings":";;;AAeA,MAAMA,IAAuC,CAASC,MAAA;AAC9C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,EACE,IAAAhB,GACE,EAAE,OAAAiB,MAAUC;AAKhB,SAAA,gBAAAC,EAACC,KAAU,QAAQhB,GAAO,SAASC,GAAQ,OAAOM,GAAM,kBAAkBJ,GACxE,UAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWnB;AAAA,MACX,OAAOQ;AAAA,MACP,WAAWL;AAAA,MACX,QAAQQ;AAAA,MACR,gBAAgBC;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAM,EAACE,GACE,EAAA,UAAA;AAAA,UAAAf;AAAA,UACAI,KACE,gBAAAO,EAAAK,GAAA,EAAM,WAAU,SAAQ,gBAAgBrB,GACtC,UACHS,GAAA;AAAA,UAhBaI,KAAc,CAACJ,KAmB3B,gBAAAO,EAAAM,GAAA,EAAW,WAAU,OAAM,gBAAgBtB,GACzC,UACHa,GAAA;AAAA,QAAA,GAEJ;AAAA,QACCP,IACC,gBAAAU;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,gBAAgBvB;AAAA,YAChB,WAAWG;AAAA,YACX,OAAOK;AAAA,YACP,kBAAkBD,KAAmB;AAAA,YAEpC,UAAAD;AAAA,UAAA;AAAA,QAED,IAAA;AAAA,QAlCQR,KAASa,MAAU,YAoC7B,gBAAAO;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,WAAWV,EAAM,MAAMN,CAAI,EAAE;AAAA,YAC7B,gBAAgBR;AAAA,YAChB,OAAOQ;AAAA,YACP,cAAcT;AAAA,YACd,WAAWI;AAAA,YACX,QAAQQ;AAAA,YACR,gBAAgBC;AAAA,YAEf,UAAA;AAAA,cAAAd;AAAA,cACAY,KAAc,gBAAAM,EAAA,QAAA,EAAK,UAAC,IAAA,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}
1
+ {"version":3,"file":"base-input.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n Container,\n Error,\n InputWrapper,\n Label,\n SiblingWrapper,\n Wrapper,\n HelperText,\n} from './base-input-styled';\n\nconst BaseInput: React.FC<IBaseInputProps> = props => {\n const {\n label,\n stickyLabel,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n inputElement,\n siblingElement,\n siblingPosition,\n size,\n errorMessage,\n mandatory,\n shape,\n isTransparent = false,\n helperText,\n } = props;\n const { input } = useTheme();\n const showLabel = label && shape !== 'curved';\n const showHelperText = helperText && !errorMessage;\n\n return (\n <Container $width={width} $widthX={widthX} $size={size} $willShowMessage={willShowMessage}>\n <Wrapper\n $renderAs={renderAs}\n $size={size}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n <InputWrapper>\n {inputElement}\n {errorMessage && (\n <Error $renderAs=\"body3\" $inputRenderAs={renderAs}>\n {errorMessage}\n </Error>\n )}\n {showHelperText && (\n <HelperText $renderAs=\"ub3\" $inputRenderAs={renderAs}>\n {helperText}\n </HelperText>\n )}\n </InputWrapper>\n {siblingElement ? (\n <SiblingWrapper\n $inputRenderAs={renderAs}\n $disabled={disabled}\n $size={size}\n $siblingPosition={siblingPosition ?? 'right'}\n >\n {siblingElement}\n </SiblingWrapper>\n ) : undefined}\n {showLabel && (\n <Label\n $renderAs={input.sizes[size].labelTextVariant}\n $inputRenderAs={renderAs}\n $size={size}\n $stickyLabel={stickyLabel}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n {label}\n {mandatory && <span>*</span>}\n </Label>\n )}\n </Wrapper>\n </Container>\n );\n};\n\nexport default BaseInput;\n"],"names":["BaseInput","props","label","stickyLabel","renderAs","width","widthX","disabled","willShowMessage","inputElement","siblingElement","siblingPosition","size","errorMessage","mandatory","shape","isTransparent","helperText","input","useTheme","jsx","Container","jsxs","Wrapper","InputWrapper","Error","HelperText","SiblingWrapper","Label","BaseInput$1"],"mappings":";;;AAeA,MAAMA,IAAuC,CAASC,MAAA;AAC9C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,EACE,IAAAhB,GACE,EAAE,OAAAiB,MAAUC;AAKhB,SAAA,gBAAAC,EAACC,KAAU,QAAQhB,GAAO,SAASC,GAAQ,OAAOM,GAAM,kBAAkBJ,GACxE,UAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWnB;AAAA,MACX,OAAOQ;AAAA,MACP,WAAWL;AAAA,MACX,QAAQQ;AAAA,MACR,gBAAgBC;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAM,EAACE,GACE,EAAA,UAAA;AAAA,UAAAf;AAAA,UACAI,KACE,gBAAAO,EAAAK,GAAA,EAAM,WAAU,SAAQ,gBAAgBrB,GACtC,UACHS,GAAA;AAAA,UAhBaI,KAAc,CAACJ,KAmB3B,gBAAAO,EAAAM,GAAA,EAAW,WAAU,OAAM,gBAAgBtB,GACzC,UACHa,GAAA;AAAA,QAAA,GAEJ;AAAA,QACCP,IACC,gBAAAU;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,gBAAgBvB;AAAA,YAChB,WAAWG;AAAA,YACX,OAAOK;AAAA,YACP,kBAAkBD,KAAmB;AAAA,YAEpC,UAAAD;AAAA,UAAA;AAAA,QAED,IAAA;AAAA,QAlCQR,KAASa,MAAU,YAoC7B,gBAAAO;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,WAAWV,EAAM,MAAMN,CAAI,EAAE;AAAA,YAC7B,gBAAgBR;AAAA,YAChB,OAAOQ;AAAA,YACP,cAAcT;AAAA,YACd,WAAWI;AAAA,YACX,QAAQQ;AAAA,YACR,gBAAgBC;AAAA,YAEf,UAAA;AAAA,cAAAd;AAAA,cACAY,KAAc,gBAAAM,EAAA,QAAA,EAAK,UAAC,IAAA,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ,GAEAS,IAAe7B;"}
@@ -1,11 +1,11 @@
1
- import { jsx as a } from "react/jsx-runtime";
1
+ import { jsx as n } from "react/jsx-runtime";
2
2
  import { forwardRef as I } from "react";
3
3
  import T from "../base-input/base-input.js";
4
- import { Input as b } from "./text-input-styled.js";
5
- const i = "regular", g = I((o, p) => {
4
+ import { Input as g } from "./text-input-styled.js";
5
+ const i = "regular", $ = I((o, l) => {
6
6
  const {
7
7
  type: e,
8
- label: l,
8
+ label: p,
9
9
  value: t,
10
10
  renderAs: r,
11
11
  width: m,
@@ -14,43 +14,44 @@ const i = "regular", g = I((o, p) => {
14
14
  willShowMessage: d,
15
15
  siblingElement: f,
16
16
  errorMessage: c,
17
- shape: h,
18
- isTransparent: n,
19
- helperText: w,
17
+ shape: b,
18
+ isTransparent: a,
19
+ helperText: h,
20
+ stickyLabel: w,
20
21
  ...x
21
22
  } = o;
22
- return /* @__PURE__ */ a(
23
+ return /* @__PURE__ */ n(
23
24
  T,
24
25
  {
25
26
  renderAs: r,
26
- label: l,
27
- stickyLabel: !!t || e === "date",
27
+ label: p,
28
+ stickyLabel: !!t || e === "date" || w,
28
29
  width: m,
29
30
  widthX: u,
30
31
  disabled: s,
31
32
  willShowMessage: d,
32
33
  size: i,
33
- shape: h,
34
+ shape: b,
34
35
  errorMessage: c,
35
- helperText: w,
36
- isTransparent: n,
37
- inputElement: /* @__PURE__ */ a(
38
- b,
36
+ helperText: h,
37
+ isTransparent: a,
38
+ inputElement: /* @__PURE__ */ n(
39
+ g,
39
40
  {
40
- ref: p,
41
+ ref: l,
41
42
  type: e,
42
43
  value: t ?? "",
43
44
  $renderAs: r,
44
45
  $size: i,
45
46
  disabled: s,
46
- $isTransparent: n,
47
+ $isTransparent: a,
47
48
  ...x
48
49
  }
49
50
  ),
50
51
  siblingElement: f
51
52
  }
52
53
  );
53
- }), z = g;
54
+ }), z = $;
54
55
  export {
55
56
  z as default
56
57
  };
@@ -1 +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;"}
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 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;"}
@@ -1,5 +1,5 @@
1
1
  import a from "styled-components";
2
- const s = a.div(
2
+ const p = a.div(
3
3
  ({ theme: { colors: t, zIndex: o }, $isClosing: e }) => `
4
4
  position: fixed;
5
5
  top: 0;
@@ -82,7 +82,7 @@ const s = a.div(
82
82
  max-height: 100vh;
83
83
  }
84
84
  }`
85
- ), d = a.div(
85
+ ), m = a.div(
86
86
  ({ theme: { colors: t }, $modalWidth: o }) => `
87
87
  position: absolute;
88
88
  top: -56px;
@@ -100,13 +100,13 @@ const s = a.div(
100
100
  color: ${t.BLACK_1};
101
101
  }
102
102
  `
103
- ), m = a.div`
103
+ ), d = a.div`
104
104
  display: flex;
105
105
  align-items: center;
106
106
  justify-content: center;
107
107
  height: 100vh;
108
108
  width: 100%;
109
- `, i = 720, r = 800, n = 500, h = a.div(
109
+ `, i = 720, r = 800, n = 500, f = a.div(
110
110
  ({ $isClosing: t }) => `
111
111
  position: absolute;
112
112
  width: ${i}px;
@@ -150,13 +150,47 @@ const s = a.div(
150
150
  }
151
151
  }
152
152
  `
153
+ ), h = a.div(
154
+ ({ $isClosing: t }) => `
155
+ width: 100%;
156
+ height: max-content;
157
+ overflow: auto;
158
+ position: fixed;
159
+ left: 0;
160
+ right: 0;
161
+ bottom: 0;
162
+ animation: ${t ? "slideOut" : "slideIn"} 0.3s forwards;
163
+
164
+ @keyframes slideIn {
165
+ from {
166
+ transform: translateY(100%);
167
+ opacity: 0;
168
+ }
169
+ to {
170
+ transform: translateY(0%);
171
+ opacity: 1;
172
+ }
173
+ }
174
+
175
+ @keyframes slideOut {
176
+ from {
177
+ transform: translateY(0%);
178
+ opacity: 1;
179
+ }
180
+ to {
181
+ transform: translateY(100%);
182
+ opacity: 0;
183
+ }
184
+ }
185
+ `
153
186
  );
154
187
  export {
155
188
  l as BaseModal,
156
189
  c as BaseModalContent,
157
- d as CloseButtonContainer,
158
- s as ModalContainer,
159
- m as ModalLoaderWrapper,
160
- h as SpotlightModal
190
+ h as BottomSheetModal,
191
+ m as CloseButtonContainer,
192
+ p as ModalContainer,
193
+ d as ModalLoaderWrapper,
194
+ f as SpotlightModal
161
195
  };
162
196
  //# sourceMappingURL=modal-styled.js.map
@@ -1 +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;"}
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\nconst BottomSheetModal = styled.div<{ $isClosing?: boolean }>(\n ({ $isClosing }) => `\n width: 100%;\n height: max-content;\n overflow: auto;\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,iBAQLA,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;"}