@cuemath/leap 3.0.7-hg1 → 3.0.7-hg2

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

@@ -0,0 +1,124 @@
+import p from "styled-components";
+import C from "../../text/text.js";
+const k = p.div(
+  ({ theme: r, $size: e, $willShowMessage: n, $width: t, $widthX: o }) => {
+    const { height: c, marginTop: a, marginBottom: s } = r.input.sizes[e], i = c + a + (n ? s : 0);
+    return `
+      width: ${t || "auto"}${typeof t == "number" ? "px" : ""};
+      ${o ? `width: ${o * r.layout.gutter}px;` : ""}
+      height: ${i}px;
+    `;
+  }
+), b = p.div(
+  ({ theme: r, $size: e, $renderAs: n, $disabled: t, $shape: o, $isTransparent: c }) => {
+    const { colors: a, input: s } = r, { height: i, marginTop: x, paddingLeft: f, paddingRight: u, borderRadius: h } = s.sizes[e], { borderColorName: d, backgroundColorName: $ } = s.variants[n], l = o === "borderLess", g = o === "curved", m = l ? 0 : h, v = c ? "transparent" : a[$ ?? "WHITE"];
+    return `
+    position: relative;
+    display: flex;
+    height: ${i}px;
+    margin-top: ${x}px;
+    padding-left: ${l ? 0 : f}px;
+    padding-right: ${l ? 0 : u}px;
+    padding-top: ${g ? 1 : 0}px;
+    padding-bottom: ${g ? 1 : 0}px;
+   ${l ? `
+      border: none;
+      border-bottom: 1px solid ${a[d[t ? "disabled" : "inactive"]]};
+    ` : `border: 1px solid ${a[d[t ? "disabled" : g ? "active" : "inactive"]]};`}
+    border-radius: ${g ? 40 : m}px;
+    transition: border-color 0.2s ease-in-out;
+    
+    background: ${v};
+    
+    &:focus-within {
+      border-color: ${a[d.active]};
+    }
+    
+    &:hover {
+      ${t ? "" : `border-color: ${a[d.active]};`}
+    }
+  `;
+  }
+), B = p.div`
+  flex-grow: 1;
+`, E = p.div(
+  ({ theme: r, $inputRenderAs: e, $disabled: n, $size: t, $siblingPosition: o }) => {
+    const { colors: c, input: a } = r, { iconPadding: s } = a.sizes[t], { labelColorName: i } = a.variants[e];
+    return `
+      order: ${o === "left" ? -1 : 1};
+      padding-${o === "left" ? "right" : "left"}: ${s}px;
+      align-self: center;
+      color: ${c[i[n ? "disabled" : "inactive"]]};
+
+      ${b}:focus-within & {
+        color: ${c[i.active]};
+      }
+      
+      ${b}:hover & {
+        ${n ? "" : `color: ${c[i.active]};`}
+      }
+    `;
+  }
+), H = p(C)(({
+  theme: r,
+  $size: e,
+  $inputRenderAs: n,
+  $stickyLabel: t,
+  $disabled: o,
+  $shape: c,
+  $isTransparent: a
+}) => {
+  const { colors: s, input: i, text: x, layout: f } = r, { gutter: u } = f, { height: h, paddingLeft: d } = i.sizes[e], { lineHeight: $ } = x[i.sizes[e].labelTextVariant], { labelColorName: l, labelBackgroundColorName: g } = i.variants[n], m = h / 2 - $ / 2 - 1, v = -m - $ / 2 - 1, N = c === "borderLess", T = a ? "transparent" : s[g ?? "WHITE"];
+  return `
+    position: absolute;
+    top: ${m}px;
+    left: ${(N ? 0 : d) - u * 0.375}px;
+    padding: 0 ${u * 0.375}px;
+    background-color: ${T};
+    color: ${s[l[o ? "disabled" : "inactive"]]};
+    pointer-events: none;
+    transform-origin: left;
+    transform: translateY(${t ? v : 0}px) scale(${t ? 0.75 : 1});
+    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
+
+    ${b}:focus-within & {
+      color: ${s[l.active]};
+      transform: translateY(${v}px) scale(0.75);
+    }
+    
+    ${b}:hover & {
+      ${o ? "" : `color: ${s[l.active]};`}
+    }
+
+    & span {
+      color: ${s.RED};
+      margin-left: 2px;
+    }
+  `;
+}), R = p(C)(({ theme: { input: r, colors: e }, $inputRenderAs: n }) => {
+  var o;
+  return `
+    position: absolute;
+    bottom: -2px;
+    transform: translateY(calc(100%));
+    color: ${e[((o = r.variants[n]) == null ? void 0 : o.errorMessageColorName) ?? "RED"]};
+`;
+}), y = p(C)(({ theme: { input: r, colors: e }, $inputRenderAs: n }) => {
+  var o;
+  return `
+    position: absolute;
+    bottom: -2px;
+    transform: translateY(calc(100%));
+    color: ${e[(o = r.variants[n]) == null ? void 0 : o.messageColorName.active]};
+`;
+});
+export {
+  k as Container,
+  R as Error,
+  y as HelperText,
+  B as InputWrapper,
+  H as Label,
+  E as SiblingWrapper,
+  b as Wrapper
+};
+//# sourceMappingURL=base-input-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-input-styled.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input-styled.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport styled from 'styled-components';\n\nimport Text from '../../text/text';\n\ninterface IContainerProps {\n  $width?: string | number;\n  $widthX?: number;\n  $size: IBaseInputProps['size'];\n  $willShowMessage: IBaseInputProps['willShowMessage'];\n}\n\nconst Container = styled.div<IContainerProps>(\n  ({ theme, $size, $willShowMessage, $width, $widthX }) => {\n    const { height, marginTop, marginBottom } = theme.input.sizes[$size];\n    const containerHeight = height + marginTop + ($willShowMessage ? marginBottom : 0);\n\n    return `\n      width: ${$width ? $width : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * theme.layout.gutter}px;` : ''}\n      height: ${containerHeight}px;\n    `;\n  },\n);\n\ninterface IWrapperProps {\n  $size: IBaseInputProps['size'];\n  $disabled?: boolean;\n  $renderAs: IBaseInputProps['renderAs'];\n  $shape?: IBaseInputProps['shape'];\n  $isTransparent?: boolean;\n}\n\nconst Wrapper = styled.div<IWrapperProps>(\n  ({ theme, $size, $renderAs, $disabled, $shape, $isTransparent }) => {\n    const { colors, input } = theme;\n    const { height, marginTop, paddingLeft, paddingRight, borderRadius } = input.sizes[$size];\n    const { borderColorName, backgroundColorName } = input.variants[$renderAs];\n\n    const isBorderLessShape = $shape === 'borderLess';\n    const isCurvedShape = $shape === 'curved';\n    const defaultBorderRadius = isBorderLessShape ? 0 : borderRadius;\n\n    const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n    return `\n    position: relative;\n    display: flex;\n    height: ${height}px;\n    margin-top: ${marginTop}px;\n    padding-left: ${isBorderLessShape ? 0 : paddingLeft}px;\n    padding-right: ${isBorderLessShape ? 0 : paddingRight}px;\n    padding-top: ${isCurvedShape ? 1 : 0}px;\n    padding-bottom: ${isCurvedShape ? 1 : 0}px;\n   ${\n     isBorderLessShape\n       ? `\n      border: none;\n      border-bottom: 1px solid ${colors[borderColorName[$disabled ? 'disabled' : 'inactive']]};\n    `\n       : `border: 1px solid ${\n           colors[borderColorName[$disabled ? 'disabled' : isCurvedShape ? 'active' : 'inactive']]\n         };`\n   }\n    border-radius: ${isCurvedShape ? 40 : defaultBorderRadius}px;\n    transition: border-color 0.2s ease-in-out;\n    \n    background: ${background};\n    \n    &:focus-within {\n      border-color: ${colors[borderColorName.active]};\n    }\n    \n    &:hover {\n      ${!$disabled ? `border-color: ${colors[borderColorName.active]};` : ''}\n    }\n  `;\n  },\n);\n\nconst InputWrapper = styled.div`\n  flex-grow: 1;\n`;\n\ninterface ISiblingWrapperProps {\n  $inputRenderAs: IBaseInputProps['renderAs'];\n  $size: IBaseInputProps['size'];\n  $siblingPosition: NonNullable<IBaseInputProps['siblingPosition']>;\n  $disabled?: boolean;\n}\n\nconst SiblingWrapper = styled.div<ISiblingWrapperProps>(\n  ({ theme, $inputRenderAs, $disabled, $size, $siblingPosition }) => {\n    const { colors, input } = theme;\n    const { iconPadding } = input.sizes[$size];\n    const { labelColorName } = input.variants[$inputRenderAs];\n\n    return `\n      order: ${$siblingPosition === 'left' ? -1 : 1};\n      padding-${$siblingPosition === 'left' ? 'right' : 'left'}: ${iconPadding}px;\n      align-self: center;\n      color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n\n      ${Wrapper}:focus-within & {\n        color: ${colors[labelColorName.active]};\n      }\n      \n      ${Wrapper}:hover & {\n        ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n      }\n    `;\n  },\n);\n\ninterface ILabelProps {\n  $size: IBaseInputProps['size'];\n  $inputRenderAs: IBaseInputProps['renderAs'];\n  $stickyLabel: IBaseInputProps['stickyLabel'];\n  $disabled?: boolean;\n  $shape?: IBaseInputProps['shape'];\n  $isTransparent: IBaseInputProps['isTransparent'];\n}\n\nconst Label = styled(Text)<ILabelProps>(({\n  theme,\n  $size,\n  $inputRenderAs,\n  $stickyLabel,\n  $disabled,\n  $shape,\n  $isTransparent,\n}) => {\n  const { colors, input, text, layout } = theme;\n  const { gutter } = layout;\n  const { height, paddingLeft } = input.sizes[$size];\n  const { lineHeight } = text[input.sizes[$size].labelTextVariant];\n  const { labelColorName, labelBackgroundColorName } = input.variants[$inputRenderAs];\n  const topPosition = height / 2 - lineHeight / 2 - 1;\n  const topPositionWhenActive = -topPosition - lineHeight / 2 - 1;\n\n  const isBorderLessShape = $shape === 'borderLess';\n\n  const backgroundColor = $isTransparent\n    ? 'transparent'\n    : colors[labelBackgroundColorName ?? 'WHITE'];\n\n  return `\n    position: absolute;\n    top: ${topPosition}px;\n    left: ${(isBorderLessShape ? 0 : paddingLeft) - gutter * 0.375}px;\n    padding: 0 ${gutter * 0.375}px;\n    background-color: ${backgroundColor};\n    color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n    pointer-events: none;\n    transform-origin: left;\n    transform: translateY(${$stickyLabel ? topPositionWhenActive : 0}px) scale(${\n      $stickyLabel ? 0.75 : 1\n    });\n    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;\n\n    ${Wrapper}:focus-within & {\n      color: ${colors[labelColorName.active]};\n      transform: translateY(${topPositionWhenActive}px) scale(0.75);\n    }\n    \n    ${Wrapper}:hover & {\n      ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n    }\n\n    & span {\n      color: ${colors.RED};\n      margin-left: 2px;\n    }\n  `;\n});\n\ninterface IErrorProps {\n  $inputRenderAs: IBaseInputProps['renderAs'];\n}\n\nconst Error = styled(Text)<IErrorProps>(({ theme: { input, colors }, $inputRenderAs }) => {\n  const color = colors[input.variants[$inputRenderAs]?.errorMessageColorName ?? 'RED'];\n\n  return `\n    position: absolute;\n    bottom: -2px;\n    transform: translateY(calc(100%));\n    color: ${color};\n`;\n});\n\nconst HelperText = styled(Text)<IErrorProps>(({ theme: { input, colors }, $inputRenderAs }) => {\n  const color = colors[input.variants[$inputRenderAs]?.messageColorName.active];\n\n  return `\n    position: absolute;\n    bottom: -2px;\n    transform: translateY(calc(100%));\n    color: ${color};\n`;\n});\n\nexport { Container, Wrapper, InputWrapper, SiblingWrapper, Label, Error, HelperText };\n"],"names":["Container","styled","theme","$size","$willShowMessage","$width","$widthX","height","marginTop","marginBottom","containerHeight","Wrapper","$renderAs","$disabled","$shape","$isTransparent","colors","input","paddingLeft","paddingRight","borderRadius","borderColorName","backgroundColorName","isBorderLessShape","isCurvedShape","defaultBorderRadius","background","InputWrapper","SiblingWrapper","$inputRenderAs","$siblingPosition","iconPadding","labelColorName","Label","Text","$stickyLabel","text","layout","gutter","lineHeight","labelBackgroundColorName","topPosition","topPositionWhenActive","backgroundColor","Error","_a","HelperText"],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import { useTheme as g } from "styled-components";
+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";
+const k = (h) => {
+  const {
+    label: a,
+    stickyLabel: $,
+    renderAs: e,
+    width: b,
+    widthX: c,
+    disabled: i,
+    willShowMessage: u,
+    inputElement: w,
+    siblingElement: d,
+    siblingPosition: m,
+    size: s,
+    errorMessage: n,
+    mandatory: A,
+    shape: t,
+    isTransparent: p = !1,
+    helperText: o
+  } = h, { input: T } = g();
+  return /* @__PURE__ */ r(x, { $width: b, $widthX: c, $size: s, $willShowMessage: u, children: /* @__PURE__ */ l(
+    z,
+    {
+      $renderAs: e,
+      $size: s,
+      $disabled: i,
+      $shape: t,
+      $isTransparent: p,
+      children: [
+        /* @__PURE__ */ l(f, { children: [
+          w,
+          n && /* @__PURE__ */ r(L, { $renderAs: "body3", $inputRenderAs: e, children: n }),
+          o && !n && /* @__PURE__ */ r(y, { $renderAs: "ub3", $inputRenderAs: e, children: o })
+        ] }),
+        d ? /* @__PURE__ */ r(
+          R,
+          {
+            $inputRenderAs: e,
+            $disabled: i,
+            $size: s,
+            $siblingPosition: m ?? "right",
+            children: d
+          }
+        ) : void 0,
+        a && t !== "curved" && /* @__PURE__ */ l(
+          E,
+          {
+            $renderAs: T.sizes[s].labelTextVariant,
+            $inputRenderAs: e,
+            $size: s,
+            $stickyLabel: $,
+            $disabled: i,
+            $shape: t,
+            $isTransparent: p,
+            children: [
+              a,
+              A && /* @__PURE__ */ r("span", { children: "*" })
+            ]
+          }
+        )
+      ]
+    }
+  ) });
+};
+export {
+  k as default
+};
+//# sourceMappingURL=base-input.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,57 @@
+import e from "styled-components";
+import d from "../../../../assets/line-icons/icons/chevron-down.js";
+import c from "../../../../assets/line-icons/icons/down.js";
+const x = e.div(({ theme: o, $width: t, $widthX: a }) => `
+    position: relative;
+    cursor: pointer;
+    width: ${t || "auto"}${typeof t == "number" ? "px" : ""};
+    ${a ? `width: ${a * o.layout.gutter}px;` : ""};
+  `), $ = e.div(
+  ({ theme: o, $visible: t }) => `
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    min-height: ${o.layout.gutter * 18}px;
+    transform-origin: top;
+    transform: scaleY(${t ? 1 : 0});
+    opacity: ${t ? 1 : 0};
+    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
+    padding-bottom: ${o.layout.gutter * 1.5}px;
+    z-index: 2;
+  `
+), f = e.div(({ theme: o, $renderAs: t, $theme: a }) => {
+  const { layout: i, colors: r, input: s } = o, { backgroundColorName: p, optionHoverColorName: u } = s.variants[t], n = a === "dark";
+  return `
+    width: 100%;
+    max-height: ${i.gutter * 16}px;
+    background-color: ${n ? r.BLACK_2 : r[p ?? "WHITE"]};
+    border: 1px solid ${n ? r.WHITE_T_87 : r.GREY_2};
+    border-radius: ${n ? 0 : i.gutter * 0.5}px;
+    padding: ${i.gutter * 0.5}px 0;
+    overflow-y: auto;
+    box-shadow: ${n ? `0px 6px 12px 0px ${r.BLACK_T_38}` : "none"};
+
+    & .base-select-input-option:hover {
+      background: ${n ? r.BLACK_4 : r[u ?? "GREY_1"]};
+    }
+  `;
+}), y = e(c)(
+  ({ $menuVisible: o }) => `
+  transform: rotate(${o ? 180 : 0}deg);
+  transition: transform 0.2s ease-out;
+`
+), b = e(d)(
+  ({ $menuVisible: o }) => `
+  transform: rotate(${o ? 180 : 0}deg);
+  transition: transform 0.2s ease-out;
+`
+);
+export {
+  x as Container,
+  $ as OptionsContainer,
+  f as OptionsWrapper,
+  b as StyledChevronDownIcon,
+  y as StyledDownIcon
+};
+//# sourceMappingURL=base-select-input-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"base-select-input-styled.js","sources":["../../../../../src/features/ui/inputs/base-select-input/base-select-input-styled.tsx"],"sourcesContent":["import type { TInputVariants } from '../../types';\n\nimport styled from 'styled-components';\n\nimport ChevronDownIcon from '../../../../assets/line-icons/icons/chevron-down';\nimport DownIcon from '../../../../assets/line-icons/icons/down';\n\ninterface IContainerProps {\n  $width?: string | number;\n  $widthX?: number;\n}\n\nconst Container = styled.div<IContainerProps>(({ theme, $width, $widthX }) => {\n  return `\n    position: relative;\n    cursor: pointer;\n    width: ${$width ? $width : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n    ${$widthX ? `width: ${$widthX * theme.layout.gutter}px;` : ''};\n  `;\n});\n\ninterface IOptionsContainerProps {\n  $visible: boolean;\n}\n\nconst OptionsContainer = styled.div<IOptionsContainerProps>(\n  ({ theme, $visible }) => `\n    position: absolute;\n    top: 100%;\n    left: 0;\n    width: 100%;\n    min-height: ${theme.layout.gutter * 18}px;\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0});\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n    padding-bottom: ${theme.layout.gutter * 1.5}px;\n    z-index: 2;\n  `,\n);\n\ninterface IOptionsWrapper {\n  $renderAs: TInputVariants;\n  $theme: 'light' | 'dark';\n}\n\nconst OptionsWrapper = styled.div<IOptionsWrapper>(({ theme, $renderAs, $theme }) => {\n  const { layout, colors, input } = theme;\n  const { backgroundColorName, optionHoverColorName } = input.variants[$renderAs];\n  const isDarkTheme = $theme === 'dark';\n\n  return `\n    width: 100%;\n    max-height: ${layout.gutter * 16}px;\n    background-color: ${isDarkTheme ? colors.BLACK_2 : colors[backgroundColorName ?? 'WHITE']};\n    border: 1px solid ${isDarkTheme ? colors.WHITE_T_87 : colors.GREY_2};\n    border-radius: ${isDarkTheme ? 0 : layout.gutter * 0.5}px;\n    padding: ${layout.gutter * 0.5}px 0;\n    overflow-y: auto;\n    box-shadow: ${isDarkTheme ? `0px 6px 12px 0px ${colors.BLACK_T_38}` : 'none'};\n\n    & .base-select-input-option:hover {\n      background: ${isDarkTheme ? colors.BLACK_4 : colors[optionHoverColorName ?? 'GREY_1']};\n    }\n  `;\n});\n\ninterface IStyledDownIcon {\n  $menuVisible: boolean;\n}\n\nconst StyledDownIcon = styled(DownIcon)<IStyledDownIcon>(\n  ({ $menuVisible }) => `\n  transform: rotate(${$menuVisible ? 180 : 0}deg);\n  transition: transform 0.2s ease-out;\n`,\n);\n\nconst StyledChevronDownIcon = styled(ChevronDownIcon)<IStyledDownIcon>(\n  ({ $menuVisible }) => `\n  transform: rotate(${$menuVisible ? 180 : 0}deg);\n  transition: transform 0.2s ease-out;\n`,\n);\n\nexport { Container, OptionsContainer, OptionsWrapper, StyledDownIcon, StyledChevronDownIcon };\n"],"names":["Container","styled","theme","$width","$widthX","OptionsContainer","$visible","OptionsWrapper","$renderAs","$theme","layout","colors","input","backgroundColorName","optionHoverColorName","isDarkTheme","StyledDownIcon","DownIcon","$menuVisible","StyledChevronDownIcon","ChevronDownIcon"],"mappings":";;;AAYM,MAAAA,IAAYC,EAAO,IAAqB,CAAC,EAAE,OAAAC,GAAO,QAAAC,GAAQ,SAAAC,QACvD;AAAA;AAAA;AAAA,aAGID,KAAkB,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA,MACxEC,IAAU,UAAUA,IAAUF,EAAM,OAAO,MAAM,QAAQ,EAAE;AAAA,GAEhE,GAMKG,IAAmBJ,EAAO;AAAA,EAC9B,CAAC,EAAE,OAAAC,GAAO,UAAAI,EAAA,MAAe;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKTJ,EAAM,OAAO,SAAS,EAAE;AAAA;AAAA,wBAElBI,IAAW,IAAI,CAAC;AAAA,eACzBA,IAAW,IAAI,CAAC;AAAA;AAAA,sBAETJ,EAAM,OAAO,SAAS,GAAG;AAAA;AAAA;AAG/C,GAOMK,IAAiBN,EAAO,IAAqB,CAAC,EAAE,OAAAC,GAAO,WAAAM,GAAW,QAAAC,QAAa;AACnF,QAAM,EAAE,QAAAC,GAAQ,QAAAC,GAAQ,OAAAC,EAAA,IAAUV,GAC5B,EAAE,qBAAAW,GAAqB,sBAAAC,EAAA,IAAyBF,EAAM,SAASJ,CAAS,GACxEO,IAAcN,MAAW;AAExB,SAAA;AAAA;AAAA,kBAESC,EAAO,SAAS,EAAE;AAAA,wBACZK,IAAcJ,EAAO,UAAUA,EAAOE,KAAuB,OAAO,CAAC;AAAA,wBACrEE,IAAcJ,EAAO,aAAaA,EAAO,MAAM;AAAA,qBAClDI,IAAc,IAAIL,EAAO,SAAS,GAAG;AAAA,eAC3CA,EAAO,SAAS,GAAG;AAAA;AAAA,kBAEhBK,IAAc,oBAAoBJ,EAAO,UAAU,KAAK,MAAM;AAAA;AAAA;AAAA,oBAG5DI,IAAcJ,EAAO,UAAUA,EAAOG,KAAwB,QAAQ,CAAC;AAAA;AAAA;AAG3F,CAAC,GAMKE,IAAiBf,EAAOgB,CAAQ;AAAA,EACpC,CAAC,EAAE,cAAAC,EAAA,MAAmB;AAAA,sBACFA,IAAe,MAAM,CAAC;AAAA;AAAA;AAG5C,GAEMC,IAAwBlB,EAAOmB,CAAe;AAAA,EAClD,CAAC,EAAE,cAAAF,EAAA,MAAmB;AAAA,sBACFA,IAAe,MAAM,CAAC;AAAA;AAAA;AAG5C;"}

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

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

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

@@ -0,0 +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 } 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): JSX.Element => {\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  } = 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);\n  const inputRef = useRef<HTMLInputElement>(null);\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      />\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","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/base-select-input/select-option/select-option-styled.js

@@ -0,0 +1,13 @@
+import r from "styled-components";
+import o from "../../../layout/flex-view.js";
+const i = r(o)(
+  ({ theme: t }) => `
+    padding: ${t.layout.gutter * 0.5}px ${t.layout.gutter}px;
+    cursor: pointer;
+    white-space: normal;
+  `
+);
+export {
+  i as SelectOptionWrapper
+};
+//# sourceMappingURL=select-option-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-option-styled.js","sources":["../../../../../../src/features/ui/inputs/base-select-input/select-option/select-option-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../layout/flex-view';\n\nconst SelectOptionWrapper = styled(FlexView)(\n  ({ theme }) => `\n    padding: ${theme.layout.gutter * 0.5}px ${theme.layout.gutter}px;\n    cursor: pointer;\n    white-space: normal;\n  `,\n);\n\nexport { SelectOptionWrapper };\n"],"names":["SelectOptionWrapper","styled","FlexView","theme"],"mappings":";;AAIM,MAAAA,IAAsBC,EAAOC,CAAQ;AAAA,EACzC,CAAC,EAAE,OAAAC,EAAA,MAAY;AAAA,eACFA,EAAM,OAAO,SAAS,GAAG,MAAMA,EAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAIjE;"}

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

@@ -0,0 +1,26 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useCallback as a } from "react";
+import p from "../../../text/text.js";
+import { SelectOptionWrapper as b } from "./select-option-styled.js";
+const f = ({
+  option: e,
+  selected: r,
+  onChange: o,
+  theme: c
+}) => {
+  const { id: t, label: n } = e, i = a(() => {
+    o(t, e);
+  }, [o, t, e]), d = r ? "body1Medium" : "body1", m = r ? "ub2-bold" : "ub2", l = c === "dark";
+  return /* @__PURE__ */ s(b, { onClick: i, className: "base-select-input-option", children: /* @__PURE__ */ s(
+    p,
+    {
+      $renderAs: l ? m : d,
+      $color: l ? "WHITE_T_87" : "BLACK",
+      children: n
+    }
+  ) });
+};
+export {
+  f as default
+};
+//# sourceMappingURL=select-option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-option.js","sources":["../../../../../../src/features/ui/inputs/base-select-input/select-option/select-option.tsx"],"sourcesContent":["import type { ISelectOptionProps } from './select-option-types';\n\nimport { useCallback } from 'react';\n\nimport Text from '../../../text/text';\nimport * as Styled from './select-option-styled';\n\nconst SelectOption = <IDType extends string | number>({\n  option,\n  selected,\n  onChange,\n  theme,\n}: ISelectOptionProps<IDType>): JSX.Element => {\n  const { id, label } = option;\n\n  const handleOnClick = useCallback(() => {\n    onChange(id, option);\n  }, [onChange, id, option]);\n\n  const lightThemeRenderAs = selected ? 'body1Medium' : 'body1';\n  const darkThemeRenderAs = selected ? 'ub2-bold' : 'ub2';\n  const isDarkTheme = theme === 'dark';\n\n  return (\n    <Styled.SelectOptionWrapper onClick={handleOnClick} className=\"base-select-input-option\">\n      <Text\n        $renderAs={isDarkTheme ? darkThemeRenderAs : lightThemeRenderAs}\n        $color={isDarkTheme ? 'WHITE_T_87' : 'BLACK'}\n      >\n        {label}\n      </Text>\n    </Styled.SelectOptionWrapper>\n  );\n};\n\nexport default SelectOption;\n"],"names":["SelectOption","option","selected","onChange","theme","id","label","handleOnClick","useCallback","lightThemeRenderAs","darkThemeRenderAs","isDarkTheme","Styled.SelectOptionWrapper","jsx","Text"],"mappings":";;;;AAOA,MAAMA,IAAe,CAAiC;AAAA,EACpD,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AACF,MAA+C;AACvC,QAAA,EAAE,IAAAC,GAAI,OAAAC,EAAU,IAAAL,GAEhBM,IAAgBC,EAAY,MAAM;AACtC,IAAAL,EAASE,GAAIJ,CAAM;AAAA,EAClB,GAAA,CAACE,GAAUE,GAAIJ,CAAM,CAAC,GAEnBQ,IAAqBP,IAAW,gBAAgB,SAChDQ,IAAoBR,IAAW,aAAa,OAC5CS,IAAcP,MAAU;AAE9B,2BACGQ,GAAA,EAA2B,SAASL,GAAe,WAAU,4BAC5D,UAAA,gBAAAM;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWH,IAAcD,IAAoBD;AAAA,MAC7C,QAAQE,IAAc,eAAe;AAAA,MAEpC,UAAAL;AAAA,IAAA;AAAA,EAEL,EAAA,CAAA;AAEJ;"}

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

@@ -0,0 +1,21 @@
+import r from "styled-components";
+import e from "../../../layout/flex-view.js";
+const n = r(e)(
+  ({ theme: t }) => `
+      padding: ${t.layout.gutter * 0.5}px ${t.layout.gutter}px;
+      cursor: pointer;
+      white-space: normal;
+    `
+), i = r(e)(({ theme: t }) => {
+  const { gutter: o } = t.layout;
+  return `
+      padding-top: ${o}px;
+      cursor: default;
+      padding-bottom: ${o * 0.25}px;
+    `;
+});
+export {
+  i as SelectOptionHeader,
+  n as SelectOptionWrapper
+};
+//# sourceMappingURL=select-section-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-section-styled.js","sources":["../../../../../../src/features/ui/inputs/base-select-input/select-section/select-section-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../layout/flex-view';\n\nconst SelectOptionWrapper = styled(FlexView)(\n  ({ theme }) => `\n      padding: ${theme.layout.gutter * 0.5}px ${theme.layout.gutter}px;\n      cursor: pointer;\n      white-space: normal;\n    `,\n);\n\nconst SelectOptionHeader = styled(FlexView)(({ theme }) => {\n  const { gutter } = theme.layout;\n\n  return `\n      padding-top: ${gutter}px;\n      cursor: default;\n      padding-bottom: ${gutter * 0.25}px;\n    `;\n});\n\nexport { SelectOptionHeader, SelectOptionWrapper };\n"],"names":["SelectOptionWrapper","styled","FlexView","theme","SelectOptionHeader","gutter"],"mappings":";;AAIM,MAAAA,IAAsBC,EAAOC,CAAQ;AAAA,EACzC,CAAC,EAAE,OAAAC,EAAA,MAAY;AAAA,iBACAA,EAAM,OAAO,SAAS,GAAG,MAAMA,EAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAInE,GAEMC,IAAqBH,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAC,QAAY;AACnD,QAAA,EAAE,QAAAE,EAAO,IAAIF,EAAM;AAElB,SAAA;AAAA,qBACYE,CAAM;AAAA;AAAA,wBAEHA,IAAS,IAAI;AAAA;AAErC,CAAC;"}

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

@@ -0,0 +1,57 @@
+import { jsx as o, jsxs as h } from "react/jsx-runtime";
+import { memo as u, useCallback as l } from "react";
+import b from "../../../section-list/section-list.js";
+import d from "../../../text/text.js";
+import { SelectOptionHeader as f, SelectOptionWrapper as A } from "./select-section-styled.js";
+const S = ({
+  sectionOptions: a,
+  theme: m,
+  value: n,
+  onChange: c
+}) => {
+  const t = m === "dark", p = l(
+    (e) => /* @__PURE__ */ o(f, { $gutterX: 1, children: /* @__PURE__ */ o(d, { $renderAs: "ac4", $color: t ? "WHITE_T_38" : "BLACK_T_38", children: e.title }) }),
+    [t]
+  ), T = l(
+    (e) => {
+      const { id: r, label: $, tag: s } = e, i = r === n;
+      return /* @__PURE__ */ h(
+        A,
+        {
+          className: "base-select-input-option",
+          onClick: () => c(r, e),
+          $width: "100%",
+          $flexDirection: "row",
+          $justifyContent: "space-between",
+          $alignItems: "center",
+          $flexGapX: 0.5,
+          children: [
+            /* @__PURE__ */ o(
+              d,
+              {
+                $renderAs: t ? i ? "ub2-bold" : "ub2" : i ? "body1Medium" : "body1",
+                $color: t ? "WHITE_T_87" : "BLACK",
+                children: $
+              }
+            ),
+            s || null
+          ]
+        }
+      );
+    },
+    [n, t, c]
+  );
+  return /* @__PURE__ */ o(
+    b,
+    {
+      data: a,
+      renderSectionHeader: p,
+      renderItem: T,
+      keyExtractor: ({ id: e }, r) => `${e}_${r}`
+    }
+  );
+}, j = u(S);
+export {
+  j as default
+};
+//# sourceMappingURL=select-section.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-section.js","sources":["../../../../../../src/features/ui/inputs/base-select-input/select-section/select-section.tsx"],"sourcesContent":["import type { ISectionOption } from '../../../section-list/section-list-types';\nimport type { ISelectOption } from '../base-select-input-types';\nimport type { ISelectSection } from './select-section-types';\n\nimport { memo, useCallback } from 'react';\n\nimport SectionList from '../../../section-list/section-list';\nimport Text from '../../../text/text';\nimport * as Styled from './select-section-styled';\n\nconst SelectSectionComponent = <IDType extends string | number>({\n  sectionOptions,\n  theme,\n  value,\n  onChange,\n}: ISelectSection<IDType>): JSX.Element => {\n  const isDarkTheme = theme === 'dark';\n\n  const renderSectionHeader = useCallback(\n    (section: ISectionOption<ISelectOption<IDType>>) => {\n      return (\n        <Styled.SelectOptionHeader $gutterX={1}>\n          <Text $renderAs=\"ac4\" $color={isDarkTheme ? 'WHITE_T_38' : 'BLACK_T_38'}>\n            {section.title}\n          </Text>\n        </Styled.SelectOptionHeader>\n      );\n    },\n    [isDarkTheme],\n  );\n\n  const renderItem = useCallback(\n    (dataItem: ISelectOption<IDType>) => {\n      const { id, label, tag } = dataItem;\n      const selected = id === value;\n      const lightThemeRenderAs = selected ? 'body1Medium' : 'body1';\n      const darkThemeRenderAs = selected ? 'ub2-bold' : 'ub2';\n      const Tag = tag ? (tag as JSX.Element) : null;\n\n      return (\n        <Styled.SelectOptionWrapper\n          className=\"base-select-input-option\"\n          onClick={() => onChange(id, dataItem)}\n          $width=\"100%\"\n          $flexDirection=\"row\"\n          $justifyContent=\"space-between\"\n          $alignItems=\"center\"\n          $flexGapX={0.5}\n        >\n          <Text\n            $renderAs={isDarkTheme ? darkThemeRenderAs : lightThemeRenderAs}\n            $color={isDarkTheme ? 'WHITE_T_87' : 'BLACK'}\n          >\n            {label}\n          </Text>\n\n          {Tag}\n        </Styled.SelectOptionWrapper>\n      );\n    },\n    [value, isDarkTheme, onChange],\n  );\n\n  return (\n    <SectionList<ISelectOption<IDType>>\n      data={sectionOptions}\n      renderSectionHeader={renderSectionHeader}\n      renderItem={renderItem}\n      keyExtractor={({ id }, idx) => `${id}_${idx}`}\n    />\n  );\n};\n\nconst SelectSection = memo(SelectSectionComponent) as <IDType extends string | number>(\n  props: ISelectSection<IDType>,\n) => JSX.Element;\n\nexport default SelectSection;\n"],"names":["SelectSectionComponent","sectionOptions","theme","value","onChange","isDarkTheme","renderSectionHeader","useCallback","section","Styled.SelectOptionHeader","jsx","Text","renderItem","dataItem","id","label","tag","selected","jsxs","Styled.SelectOptionWrapper","SectionList","idx","SelectSection","memo"],"mappings":";;;;;AAUA,MAAMA,IAAyB,CAAiC;AAAA,EAC9D,gBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AACF,MAA2C;AACzC,QAAMC,IAAcH,MAAU,QAExBI,IAAsBC;AAAA,IAC1B,CAACC,wBAEIC,GAAA,EAA0B,UAAU,GACnC,UAAC,gBAAAC,EAAAC,GAAA,EAAK,WAAU,OAAM,QAAQN,IAAc,eAAe,cACxD,UAAAG,EAAQ,OACX,EACF,CAAA;AAAA,IAGJ,CAACH,CAAW;AAAA,EAAA,GAGRO,IAAaL;AAAA,IACjB,CAACM,MAAoC;AACnC,YAAM,EAAE,IAAAC,GAAI,OAAAC,GAAO,KAAAC,EAAA,IAAQH,GACrBI,IAAWH,MAAOX;AAMtB,aAAA,gBAAAe;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,SAAS,MAAMf,EAASU,GAAID,CAAQ;AAAA,UACpC,QAAO;AAAA,UACP,gBAAe;AAAA,UACf,iBAAgB;AAAA,UAChB,aAAY;AAAA,UACZ,WAAW;AAAA,UAEX,UAAA;AAAA,YAAA,gBAAAH;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,WAAWN,IAdSY,IAAW,aAAa,QADvBA,IAAW,gBAAgB;AAAA,gBAgBhD,QAAQZ,IAAc,eAAe;AAAA,gBAEpC,UAAAU;AAAA,cAAA;AAAA,YACH;AAAA,YAjBQC,KAA6B;AAAA,UAmBpC;AAAA,QAAA;AAAA,MAAA;AAAA,IAGP;AAAA,IACA,CAACb,GAAOE,GAAaD,CAAQ;AAAA,EAAA;AAI7B,SAAA,gBAAAM;AAAA,IAACU;AAAA,IAAA;AAAA,MACC,MAAMnB;AAAA,MACN,qBAAAK;AAAA,MACA,YAAAM;AAAA,MACA,cAAc,CAAC,EAAE,IAAAE,KAAMO,MAAQ,GAAGP,CAAE,IAAIO,CAAG;AAAA,IAAA;AAAA,EAAA;AAGjD,GAEMC,IAAgBC,EAAKvB,CAAsB;"}

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

@@ -0,0 +1,5 @@
+const t = (o) => o.map((e) => ({ id: e, label: e }));
+export {
+  t as convertOptionsToSelectFormat
+};
+//# sourceMappingURL=cascading-select-helpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cascading-select-helpers.js","sources":["../../../../../src/features/ui/inputs/cascading-select-input/cascading-select-helpers.ts"],"sourcesContent":["export const convertOptionsToSelectFormat = (opts: string[]) =>\n  opts.map(opt => ({ id: opt, label: opt }));\n"],"names":["convertOptionsToSelectFormat","opts","opt"],"mappings":"AAAa,MAAAA,IAA+B,CAACC,MAC3CA,EAAK,IAAI,CAAQC,OAAA,EAAE,IAAIA,GAAK,OAAOA,EAAA,EAAM;"}