@cuemath/leap 3.0.7-hg1 → 3.0.7-hg3

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

@@ -0,0 +1,53 @@
+import { jsxs as x, Fragment as D, jsx as n } from "react/jsx-runtime";
+import { useState as l, useEffect as O, useMemo as s } from "react";
+import d from "../../layout/flex-view.js";
+import m from "../select-input/select-input.js";
+import { convertOptionsToSelectFormat as p } from "./cascading-select-helpers.js";
+const X = ({
+  options: a,
+  value: e,
+  onChange: o,
+  variantPlaceholder: h,
+  detailPlaceholder: f
+}) => {
+  const [t, c] = l(e.variant), [S, i] = l(e.detail);
+  O(() => {
+    c(e.variant), i(e.detail);
+  }, [e.variant, e.detail]);
+  const g = (r) => {
+    c(r), i(""), o({ variant: r, detail: "" });
+  }, u = (r) => {
+    i(r), o({ variant: t, detail: r });
+  }, C = s(
+    () => p(Object.keys(a)),
+    [a]
+  ), V = s(() => t && a[t] ? p(a[t]) : [], [a, t]);
+  return /* @__PURE__ */ x(D, { children: [
+    /* @__PURE__ */ n(d, { $marginBottomX: 0.5, children: /* @__PURE__ */ n(
+      m,
+      {
+        renderAs: "primary",
+        widthX: 24,
+        options: C,
+        label: h || "Select Variant",
+        value: t,
+        onChange: g
+      }
+    ) }),
+    t && /* @__PURE__ */ n(d, { $marginBottomX: 0.5, children: /* @__PURE__ */ n(
+      m,
+      {
+        renderAs: "primary",
+        options: V,
+        widthX: 24,
+        label: f || "Select Detail",
+        value: S,
+        onChange: u
+      }
+    ) })
+  ] });
+}, I = X;
+export {
+  I as default
+};
+//# sourceMappingURL=cascading-select-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cascading-select-input.js","sources":["../../../../../src/features/ui/inputs/cascading-select-input/cascading-select-input.tsx"],"sourcesContent":["import type { ICascadingSelectInputProps } from './cascading-select-input-types';\n\nimport React, { useState, useEffect, useMemo } from 'react';\n\nimport FlexView from '../../layout/flex-view';\nimport SelectInput from '../select-input/select-input';\nimport { convertOptionsToSelectFormat } from './cascading-select-helpers';\n\nconst CascadingSelectInput: React.FC<ICascadingSelectInputProps> = ({\n  options,\n  value,\n  onChange,\n  variantPlaceholder,\n  detailPlaceholder,\n}) => {\n  const [selectedVariant, setSelectedVariant] = useState(value.variant);\n  const [selectedDetail, setSelectedDetail] = useState(value.detail);\n\n  useEffect(() => {\n    setSelectedVariant(value.variant);\n    setSelectedDetail(value.detail);\n  }, [value.variant, value.detail]);\n\n  const handleVariantChange = (variant: string) => {\n    setSelectedVariant(variant);\n    setSelectedDetail('');\n    onChange({ variant, detail: '' });\n  };\n\n  const handleDetailChange = (detail: string) => {\n    setSelectedDetail(detail);\n    onChange({ variant: selectedVariant, detail });\n  };\n\n  const variantOptions = useMemo(\n    () => convertOptionsToSelectFormat(Object.keys(options)),\n    [options],\n  );\n  const detailOptions = useMemo(() => {\n    if (selectedVariant && options[selectedVariant]) {\n      return convertOptionsToSelectFormat(options[selectedVariant]!);\n    }\n\n    return [];\n  }, [options, selectedVariant]);\n\n  return (\n    <>\n      <FlexView $marginBottomX={0.5}>\n        <SelectInput\n          renderAs=\"primary\"\n          widthX={24}\n          options={variantOptions}\n          label={variantPlaceholder || 'Select Variant'}\n          value={selectedVariant}\n          onChange={handleVariantChange}\n        />\n      </FlexView>\n      {selectedVariant && (\n        <FlexView $marginBottomX={0.5}>\n          <SelectInput\n            renderAs=\"primary\"\n            options={detailOptions}\n            widthX={24}\n            label={detailPlaceholder || 'Select Detail'}\n            value={selectedDetail}\n            onChange={handleDetailChange}\n          />\n        </FlexView>\n      )}\n    </>\n  );\n};\n\nexport default CascadingSelectInput;\n"],"names":["CascadingSelectInput","options","value","onChange","variantPlaceholder","detailPlaceholder","selectedVariant","setSelectedVariant","useState","selectedDetail","setSelectedDetail","useEffect","handleVariantChange","variant","handleDetailChange","detail","variantOptions","useMemo","convertOptionsToSelectFormat","detailOptions","jsxs","Fragment","jsx","FlexView","SelectInput","CascadingSelectInput$1"],"mappings":";;;;;AAQA,MAAMA,IAA6D,CAAC;AAAA,EAClE,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,mBAAAC;AACF,MAAM;AACJ,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAASN,EAAM,OAAO,GAC9D,CAACO,GAAgBC,CAAiB,IAAIF,EAASN,EAAM,MAAM;AAEjE,EAAAS,EAAU,MAAM;AACd,IAAAJ,EAAmBL,EAAM,OAAO,GAChCQ,EAAkBR,EAAM,MAAM;AAAA,KAC7B,CAACA,EAAM,SAASA,EAAM,MAAM,CAAC;AAE1B,QAAAU,IAAsB,CAACC,MAAoB;AAC/C,IAAAN,EAAmBM,CAAO,GAC1BH,EAAkB,EAAE,GACpBP,EAAS,EAAE,SAAAU,GAAS,QAAQ,GAAI,CAAA;AAAA,EAAA,GAG5BC,IAAqB,CAACC,MAAmB;AAC7C,IAAAL,EAAkBK,CAAM,GACxBZ,EAAS,EAAE,SAASG,GAAiB,QAAAS,EAAQ,CAAA;AAAA,EAAA,GAGzCC,IAAiBC;AAAA,IACrB,MAAMC,EAA6B,OAAO,KAAKjB,CAAO,CAAC;AAAA,IACvD,CAACA,CAAO;AAAA,EAAA,GAEJkB,IAAgBF,EAAQ,MACxBX,KAAmBL,EAAQK,CAAe,IACrCY,EAA6BjB,EAAQK,CAAe,CAAE,IAGxD,IACN,CAACL,GAASK,CAAe,CAAC;AAE7B,SAEI,gBAAAc,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAS,gBAAgB,KACxB,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,QAAQ;AAAA,QACR,SAASR;AAAA,QACT,OAAOZ,KAAsB;AAAA,QAC7B,OAAOE;AAAA,QACP,UAAUM;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,IACCN,KACC,gBAAAgB,EAACC,GAAS,EAAA,gBAAgB,KACxB,UAAA,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,SAASL;AAAA,QACT,QAAQ;AAAA,QACR,OAAOd,KAAqB;AAAA,QAC5B,OAAOI;AAAA,QACP,UAAUK;AAAA,MAAA;AAAA,IAAA,GAEd;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEAW,IAAezB;"}

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

@@ -0,0 +1,89 @@
+import n from "styled-components";
+import l from "../../../../assets/line-icons/icons/check2.js";
+import p from "../../../../assets/line-icons/icons/minus.js";
+const k = n.div(
+  ({ theme: o, $disabled: t, $alignTop: r }) => `
+    display: flex;
+    flex-direction: row;
+    align-items: ${r ? "flex-start" : "center"};
+    gap: ${o.layout.gutter * 0.3125}px;
+    
+    cursor: ${t ? "not-allowed" : "default"};
+
+    & svg {
+      cursor: ${t ? "not-allowed" : "pointer"};
+    }
+  `
+), $ = n.div(({ $disabled: o }) => `
+  position: relative;
+  cursor: ${o ? "not-allowed" : "pointer"};
+`), b = n.input(
+  ({ theme: o, $renderAs: t, $size: r }) => {
+    const { variants: c, sizes: e } = o.checkbox, { size: i } = e[r ?? "regular"], { backgroundColorName: a, borderColorName: s } = c[t ?? "black"];
+    return `
+    display: block;
+    position: relative;
+    width: ${i}px;
+    height: ${i}px;
+    background-color: ${o.colors[a.inactive]};
+    border: 2px solid ${o.colors[s.inactive]};
+    appearance: none;
+    outline: none;
+    cursor: pointer;
+    
+    &:checked {
+      background-color: ${o.colors[a.active]};
+      border: 2px solid ${o.colors[s.active]};
+    }
+    
+    &:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    `;
+  }
+), h = n(l)(({ theme: o, $renderAs: t, $size: r }) => {
+  const { variants: c, sizes: e } = o.checkbox, { size: i } = e[r ?? "regular"], { checkColorName: a } = c[t ?? "black"];
+  return `
+    display: block;
+    position: absolute;
+    inset: 52% 0 0 51%;
+    transform: translate(-50%, -50%);
+    width: ${i}px;
+    height: ${i}px;
+    
+    path {
+      stroke: ${o.colors[a]};
+      fill: ${o.colors[a]};
+    }
+  `;
+}), g = n(p)(({ $size: o, $disabled: t }) => `
+    display: block;
+    position: absolute;
+    inset: 50% 0 0 51%;
+    transform: translate(-50%, -50%);
+    width: ${o}px;
+    height: ${o}px;
+  
+    opacity: ${t ? 0.4 : 1};
+  `), v = n.div(
+  ({ theme: o, $visible: t, $disabled: r, $checked: c, $labelWidthX: e }) => `
+    ${e ? `width: ${e * o.layout.gutter}px;` : ""};
+    position: relative;
+    opacity: ${t ? 1 : 0};
+    cursor: ${t && !r ? "pointer" : "not-allowed"};
+    transition: opacity 0.2s ease-in-out;
+    ${c ? "font-weight: bold" : ""};
+    ${r ? "opacity: 0.4" : ""};
+  `
+);
+export {
+  h as CheckIcon,
+  b as CheckboxInput,
+  $ as CheckboxInputWrapper,
+  v as CheckboxLabelWrapper,
+  k as CheckboxOptionWrapper,
+  g as IndeterminateIcon
+};
+//# sourceMappingURL=checkbox-input-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-input-styled.js","sources":["../../../../../src/features/ui/inputs/checkbox-input/checkbox-input-styled.tsx"],"sourcesContent":["import type { TCheckboxSizes, TCheckboxVariants } from '../../types';\n\nimport styled from 'styled-components';\n\nimport Check2Icon from '../../../../assets/line-icons/icons/check2';\nimport MinusIcon from '../../../../assets/line-icons/icons/minus';\n\ninterface ICheckboxOptionWrapperProps {\n  $disabled?: boolean;\n  $alignTop?: boolean;\n}\n\nconst CheckboxOptionWrapper = styled.div<ICheckboxOptionWrapperProps>(\n  ({ theme, $disabled, $alignTop }) => {\n    return `\n    display: flex;\n    flex-direction: row;\n    align-items: ${$alignTop ? 'flex-start' : 'center'};\n    gap: ${theme.layout.gutter * 0.3125}px;\n    \n    cursor: ${$disabled ? 'not-allowed' : 'default'};\n\n    & svg {\n      cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n    }\n  `;\n  },\n);\n\ninterface ICheckboxInputWrapperProps {\n  $disabled?: boolean;\n}\n\nconst CheckboxInputWrapper = styled.div<ICheckboxInputWrapperProps>(({ $disabled }) => {\n  return `\n  position: relative;\n  cursor: ${$disabled ? 'not-allowed' : 'pointer'};\n`;\n});\n\ninterface ICheckboxOptionSquareWrapperProps {\n  $renderAs?: TCheckboxVariants;\n  $size?: TCheckboxSizes;\n}\n\nconst CheckboxInput = styled.input<ICheckboxOptionSquareWrapperProps>(\n  ({ theme, $renderAs, $size }) => {\n    const { variants, sizes } = theme.checkbox;\n    const { size } = sizes[$size ?? 'regular'];\n    const { backgroundColorName, borderColorName } = variants[$renderAs ?? 'black'];\n\n    return `\n    display: block;\n    position: relative;\n    width: ${size}px;\n    height: ${size}px;\n    background-color: ${theme.colors[backgroundColorName.inactive]};\n    border: 2px solid ${theme.colors[borderColorName.inactive]};\n    appearance: none;\n    outline: none;\n    cursor: pointer;\n    \n    &:checked {\n      background-color: ${theme.colors[backgroundColorName.active]};\n      border: 2px solid ${theme.colors[borderColorName.active]};\n    }\n    \n    &:disabled {\n      opacity: 0.4;\n      cursor: not-allowed;\n    }\n\n    `;\n  },\n);\n\ninterface ICheckIconProps {\n  $renderAs?: TCheckboxVariants;\n  $size?: TCheckboxSizes;\n}\n\nconst CheckIcon = styled(Check2Icon)<ICheckIconProps>(({ theme, $renderAs, $size }) => {\n  const { variants, sizes } = theme.checkbox;\n  const { size } = sizes[$size ?? 'regular'];\n  const { checkColorName } = variants[$renderAs ?? 'black'];\n\n  return `\n    display: block;\n    position: absolute;\n    inset: 52% 0 0 51%;\n    transform: translate(-50%, -50%);\n    width: ${size}px;\n    height: ${size}px;\n    \n    path {\n      stroke: ${theme.colors[checkColorName]};\n      fill: ${theme.colors[checkColorName]};\n    }\n  `;\n});\n\ninterface IIndeterminateIconProps {\n  $size?: number;\n  $disabled?: boolean;\n}\n\nconst IndeterminateIcon = styled(MinusIcon)<IIndeterminateIconProps>(({ $size, $disabled }) => {\n  return `\n    display: block;\n    position: absolute;\n    inset: 50% 0 0 51%;\n    transform: translate(-50%, -50%);\n    width: ${$size}px;\n    height: ${$size}px;\n  \n    opacity: ${$disabled ? 0.4 : 1};\n  `;\n});\n\ninterface ICheckboxLabelWrapperProps {\n  $visible: boolean;\n  $disabled?: boolean;\n  $labelWidthX?: number;\n  $checked: boolean;\n  $renderAs?: TCheckboxVariants;\n}\n\nconst CheckboxLabelWrapper = styled.div<ICheckboxLabelWrapperProps>(\n  ({ theme, $visible, $disabled, $checked, $labelWidthX }) => {\n    return `\n    ${$labelWidthX ? `width: ${$labelWidthX * theme.layout.gutter}px;` : ``};\n    position: relative;\n    opacity: ${$visible ? 1 : 0};\n    cursor: ${$visible && !$disabled ? 'pointer' : 'not-allowed'};\n    transition: opacity 0.2s ease-in-out;\n    ${$checked ? `font-weight: bold` : ''};\n    ${$disabled ? `opacity: 0.4` : ''};\n  `;\n  },\n);\n\nexport {\n  CheckboxOptionWrapper,\n  CheckboxInputWrapper,\n  CheckboxInput,\n  CheckIcon,\n  IndeterminateIcon,\n  CheckboxLabelWrapper,\n};\n"],"names":["CheckboxOptionWrapper","styled","theme","$disabled","$alignTop","CheckboxInputWrapper","CheckboxInput","$renderAs","$size","variants","sizes","size","backgroundColorName","borderColorName","CheckIcon","Check2Icon","checkColorName","IndeterminateIcon","MinusIcon","CheckboxLabelWrapper","$visible","$checked","$labelWidthX"],"mappings":";;;AAYA,MAAMA,IAAwBC,EAAO;AAAA,EACnC,CAAC,EAAE,OAAAC,GAAO,WAAAC,GAAW,WAAAC,QACZ;AAAA;AAAA;AAAA,mBAGQA,IAAY,eAAe,QAAQ;AAAA,WAC3CF,EAAM,OAAO,SAAS,MAAM;AAAA;AAAA,cAEzBC,IAAY,gBAAgB,SAAS;AAAA;AAAA;AAAA,gBAGnCA,IAAY,gBAAgB,SAAS;AAAA;AAAA;AAIrD,GAMME,IAAuBJ,EAAO,IAAgC,CAAC,EAAE,WAAAE,QAC9D;AAAA;AAAA,YAEGA,IAAY,gBAAgB,SAAS;AAAA,CAEhD,GAOKG,IAAgBL,EAAO;AAAA,EAC3B,CAAC,EAAE,OAAAC,GAAO,WAAAK,GAAW,OAAAC,QAAY;AAC/B,UAAM,EAAE,UAAAC,GAAU,OAAAC,MAAUR,EAAM,UAC5B,EAAE,MAAAS,EAAS,IAAAD,EAAMF,KAAS,SAAS,GACnC,EAAE,qBAAAI,GAAqB,iBAAAC,EAAA,IAAoBJ,EAASF,KAAa,OAAO;AAEvE,WAAA;AAAA;AAAA;AAAA,aAGEI,CAAI;AAAA,cACHA,CAAI;AAAA,wBACMT,EAAM,OAAOU,EAAoB,QAAQ,CAAC;AAAA,wBAC1CV,EAAM,OAAOW,EAAgB,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMpCX,EAAM,OAAOU,EAAoB,MAAM,CAAC;AAAA,0BACxCV,EAAM,OAAOW,EAAgB,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS5D;AACF,GAOMC,IAAYb,EAAOc,CAAU,EAAmB,CAAC,EAAE,OAAAb,GAAO,WAAAK,GAAW,OAAAC,QAAY;AACrF,QAAM,EAAE,UAAAC,GAAU,OAAAC,MAAUR,EAAM,UAC5B,EAAE,MAAAS,EAAS,IAAAD,EAAMF,KAAS,SAAS,GACnC,EAAE,gBAAAQ,EAAmB,IAAAP,EAASF,KAAa,OAAO;AAEjD,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAKII,CAAI;AAAA,cACHA,CAAI;AAAA;AAAA;AAAA,gBAGFT,EAAM,OAAOc,CAAc,CAAC;AAAA,cAC9Bd,EAAM,OAAOc,CAAc,CAAC;AAAA;AAAA;AAG1C,CAAC,GAOKC,IAAoBhB,EAAOiB,CAAS,EAA2B,CAAC,EAAE,OAAAV,GAAO,WAAAL,QACtE;AAAA;AAAA;AAAA;AAAA;AAAA,aAKIK,CAAK;AAAA,cACJA,CAAK;AAAA;AAAA,eAEJL,IAAY,MAAM,CAAC;AAAA,GAEjC,GAUKgB,IAAuBlB,EAAO;AAAA,EAClC,CAAC,EAAE,OAAAC,GAAO,UAAAkB,GAAU,WAAAjB,GAAW,UAAAkB,GAAU,cAAAC,QAChC;AAAA,MACLA,IAAe,UAAUA,IAAepB,EAAM,OAAO,MAAM,QAAQ,EAAE;AAAA;AAAA,eAE5DkB,IAAW,IAAI,CAAC;AAAA,cACjBA,KAAY,CAACjB,IAAY,YAAY,aAAa;AAAA;AAAA,MAE1DkB,IAAW,sBAAsB,EAAE;AAAA,MACnClB,IAAY,iBAAiB,EAAE;AAAA;AAGrC;"}

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

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

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

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

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

@@ -0,0 +1,15 @@
+import r from "styled-components";
+const i = r.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`, a = r.div(({ theme: t, $numColumns: e }) => `
+    display: flex;
+    align-items: center;
+    flex-basis: calc((100% - ${t.layout.gutter * 1.5 * (e - 1)}px)/${e});
+  `);
+export {
+  i as CheckboxInputListWrapper,
+  a as CheckboxOptionWrapper
+};
+//# sourceMappingURL=checkbox-input-list-styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-input-list-styled.js","sources":["../../../../../src/features/ui/inputs/checkbox-input-list/checkbox-input-list-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst CheckboxInputListWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n`;\n\ninterface ICheckboxOptionProps {\n  $numColumns: number;\n}\n\nconst CheckboxOptionWrapper = styled.div<ICheckboxOptionProps>(({ theme, $numColumns }) => {\n  return `\n    display: flex;\n    align-items: center;\n    flex-basis: calc((100% - ${theme.layout.gutter * 1.5 * ($numColumns - 1)}px)/${$numColumns});\n  `;\n});\n\nexport { CheckboxInputListWrapper, CheckboxOptionWrapper };\n"],"names":["CheckboxInputListWrapper","styled","CheckboxOptionWrapper","theme","$numColumns"],"mappings":";AAEA,MAAMA,IAA2BC,EAAO;AAAA;AAAA;AAAA;AAAA,GAUlCC,IAAwBD,EAAO,IAA0B,CAAC,EAAE,OAAAE,GAAO,aAAAC,QAChE;AAAA;AAAA;AAAA,+BAGsBD,EAAM,OAAO,SAAS,OAAOC,IAAc,EAAE,OAAOA,CAAW;AAAA,GAE7F;"}

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

@@ -0,0 +1,58 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useMemo as g, useCallback as I } from "react";
+import L from "../../arrow-tooltip/arrow-tooltip.js";
+import O from "../checkbox-input/checkbox-input.js";
+import { CheckboxInputListWrapper as v, CheckboxOptionWrapper as A } from "./checkbox-input-list-styled.js";
+const $ = (h) => {
+  const {
+    size: a,
+    value: o,
+    options: d,
+    disabled: s,
+    renderAs: u,
+    numColumns: C,
+    indeterminate: f,
+    visibleOnCheck: x,
+    maximumSelection: e,
+    onChange: i
+  } = h, c = g(
+    () => !!(e && e > 1 && o.length >= e),
+    [e, o.length]
+  ), b = I(
+    (t, n) => {
+      n ? e === 1 ? i([t]) : (!c || !e) && i([...o, t]) : i(o.filter((l) => l !== t));
+    },
+    [e, i, c, o]
+  );
+  return /* @__PURE__ */ r(v, { children: d.map((t) => {
+    const { id: n, label: l } = t, p = o.includes(n), m = c && !p, k = (s == null ? void 0 : s.includes(n)) || m;
+    return /* @__PURE__ */ r(A, { $numColumns: C ?? 1, children: /* @__PURE__ */ r(
+      L,
+      {
+        renderAs: "primary",
+        position: "top",
+        tooltipItem: `${e} options already selected`,
+        hidden: !m,
+        zIndex: 2,
+        children: /* @__PURE__ */ r(
+          O,
+          {
+            value: n,
+            size: a,
+            label: l,
+            checked: p,
+            renderAs: u,
+            disabled: k,
+            onChange: b,
+            indeterminate: f,
+            visibleOnCheck: x
+          }
+        )
+      }
+    ) }, n);
+  }) });
+}, W = $;
+export {
+  W as default
+};
+//# sourceMappingURL=checkbox-input-list.js.map

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

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

package/dist/features/ui/inputs/google-places-search-input/google-places-search-input.js

@@ -0,0 +1,45 @@
+import { jsx as g } from "react/jsx-runtime";
+import { GoogleApiWrapper as S } from "google-maps-react";
+import { useCallback as l } from "react";
+import h from "../searchable-select-input/searchable-select-input.js";
+const u = (r) => {
+  const { google: e, onChange: t } = r, i = l(
+    (o) => new Promise((c) => {
+      const a = new e.maps.places.AutocompleteService();
+      o ? a.getPlacePredictions(
+        {
+          input: o,
+          types: ["primary_school", "school", "secondary_school", "university"]
+        },
+        (p, s) => {
+          s !== e.maps.places.PlacesServiceStatus.OK ? c([]) : (p && c(
+            p.map((n) => ({
+              ...n,
+              id: n.place_id,
+              label: n.description
+            }))
+          ), c([]));
+        }
+      ) : c([]);
+    }),
+    [e.maps.places.AutocompleteService, e.maps.places.PlacesServiceStatus.OK]
+  ), m = l(
+    (o, c) => {
+      const a = c;
+      new e.maps.Geocoder().geocode({ placeId: o }, (s) => {
+        s && t(o, {
+          ...a,
+          gmaps: s[0]
+        });
+      }), t(o, a);
+    },
+    [e.maps.Geocoder, t]
+  );
+  return /* @__PURE__ */ g(h, { ...r, options: i, onChange: m });
+}, f = S({
+  apiKey: "AIzaSyC0Vv2q68IDrSB78UQsC2wy0Yt3hfgrYmY"
+})(u), I = f;
+export {
+  I as default
+};
+//# sourceMappingURL=google-places-search-input.js.map

package/dist/features/ui/inputs/google-places-search-input/google-places-search-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"google-places-search-input.js","sources":["../../../../../src/features/ui/inputs/google-places-search-input/google-places-search-input.tsx"],"sourcesContent":["import type { ISelectOption } from '../base-select-input/base-select-input-types';\nimport type {\n  IGooglePlaceOption,\n  IGooglePlacesSearchInputProps,\n} from './google-places-search-input-types';\n\nimport { GoogleApiWrapper } from 'google-maps-react';\nimport { useCallback } from 'react';\n\nimport SearchableSelectInput from '../searchable-select-input/searchable-select-input';\n\n/**\n * TODO:SG\n * - API key should be passed in from the outside\n * - prediction types should be passed in from the outside\n * - debounce the search\n * - cancel outstanding requests when the component unmounts or the search text changes\n * - move the geocoding to the outside\n */\n\nconst GooglePlacesSearchInputComponent = (props: IGooglePlacesSearchInputProps): JSX.Element => {\n  const { google, onChange } = props;\n\n  const options = useCallback(\n    (searchText: string) => {\n      return new Promise<IGooglePlaceOption[]>(resolve => {\n        const service = new google.maps.places.AutocompleteService();\n\n        if (!searchText) {\n          resolve([]);\n        } else {\n          //TODO:SG Change this to promise\n          service.getPlacePredictions(\n            {\n              input: searchText,\n              types: ['primary_school', 'school', 'secondary_school', 'university'],\n            },\n            (predictions, status) => {\n              if (status !== google.maps.places.PlacesServiceStatus.OK) {\n                // TODO:SG Log error\n                resolve([]);\n              } else {\n                if (predictions) {\n                  resolve(\n                    predictions.map(prediction => ({\n                      ...prediction,\n                      id: prediction.place_id,\n                      label: prediction.description,\n                    })),\n                  );\n                }\n\n                resolve([]);\n              }\n            },\n          );\n        }\n      });\n    },\n    [google.maps.places.AutocompleteService, google.maps.places.PlacesServiceStatus.OK],\n  );\n\n  const handleChange = useCallback(\n    (value: string, option: ISelectOption<string>) => {\n      const place = option as IGooglePlaceOption;\n      const service = new google.maps.Geocoder();\n\n      service.geocode({ placeId: value }, results => {\n        if (results) {\n          onChange(value, {\n            ...place,\n            gmaps: results[0],\n          });\n        } else {\n          // TODO:SG Log error\n        }\n      });\n\n      onChange(value, place);\n    },\n    [google.maps.Geocoder, onChange],\n  );\n\n  return <SearchableSelectInput<string> {...props} options={options} onChange={handleChange} />;\n};\n\nconst GooglePlacesSearchInput = GoogleApiWrapper({\n  apiKey: 'AIzaSyC0Vv2q68IDrSB78UQsC2wy0Yt3hfgrYmY',\n})(GooglePlacesSearchInputComponent);\n\nexport default GooglePlacesSearchInput;\n"],"names":["GooglePlacesSearchInputComponent","props","google","onChange","options","useCallback","searchText","resolve","service","predictions","status","prediction","handleChange","value","option","place","results","SearchableSelectInput","GooglePlacesSearchInput","GoogleApiWrapper","GooglePlacesSearchInput$1"],"mappings":";;;;AAoBA,MAAMA,IAAmC,CAACC,MAAsD;AACxF,QAAA,EAAE,QAAAC,GAAQ,UAAAC,EAAa,IAAAF,GAEvBG,IAAUC;AAAA,IACd,CAACC,MACQ,IAAI,QAA8B,CAAWC,MAAA;AAClD,YAAMC,IAAU,IAAIN,EAAO,KAAK,OAAO,oBAAoB;AAE3D,MAAKI,IAIKE,EAAA;AAAA,QACN;AAAA,UACE,OAAOF;AAAA,UACP,OAAO,CAAC,kBAAkB,UAAU,oBAAoB,YAAY;AAAA,QACtE;AAAA,QACA,CAACG,GAAaC,MAAW;AACvB,UAAIA,MAAWR,EAAO,KAAK,OAAO,oBAAoB,KAEpDK,EAAQ,CAAE,CAAA,KAENE,KACFF;AAAA,YACEE,EAAY,IAAI,CAAeE,OAAA;AAAA,cAC7B,GAAGA;AAAA,cACH,IAAIA,EAAW;AAAA,cACf,OAAOA,EAAW;AAAA,YAAA,EAClB;AAAA,UAAA,GAINJ,EAAQ,CAAE,CAAA;AAAA,QAEd;AAAA,MAAA,IAzBFA,EAAQ,CAAE,CAAA;AAAA,IA2BZ,CACD;AAAA,IAEH,CAACL,EAAO,KAAK,OAAO,qBAAqBA,EAAO,KAAK,OAAO,oBAAoB,EAAE;AAAA,EAAA,GAG9EU,IAAeP;AAAA,IACnB,CAACQ,GAAeC,MAAkC;AAChD,YAAMC,IAAQD;AAGd,MAFgB,IAAIZ,EAAO,KAAK,SAAS,EAEjC,QAAQ,EAAE,SAASW,KAAS,CAAWG,MAAA;AAC7C,QAAIA,KACFb,EAASU,GAAO;AAAA,UACd,GAAGE;AAAA,UACH,OAAOC,EAAQ,CAAC;AAAA,QAAA,CACjB;AAAA,MAGH,CACD,GAEDb,EAASU,GAAOE,CAAK;AAAA,IACvB;AAAA,IACA,CAACb,EAAO,KAAK,UAAUC,CAAQ;AAAA,EAAA;AAGjC,2BAAQc,GAA+B,EAAA,GAAGhB,GAAO,SAAAG,GAAkB,UAAUQ,EAAc,CAAA;AAC7F,GAEMM,IAA0BC,EAAiB;AAAA,EAC/C,QAAQ;AACV,CAAC,EAAEnB,CAAgC,GAEnCoB,IAAeF;"}

package/dist/features/ui/inputs/num-range-input/num-range-helpers.js

@@ -0,0 +1,9 @@
+const s = (r, n, t) => {
+  if (r === "") return !0;
+  const e = parseInt(r, 10);
+  return isNaN(e) ? !1 : (!n || e >= n) && (!t || e <= t);
+};
+export {
+  s as isValueInRange
+};
+//# sourceMappingURL=num-range-helpers.js.map

package/dist/features/ui/inputs/num-range-input/num-range-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"num-range-helpers.js","sources":["../../../../../src/features/ui/inputs/num-range-input/num-range-helpers.ts"],"sourcesContent":["export const isValueInRange = (value: string, min?: number, max?: number) => {\n  if (value === '') return true;\n\n  const numberValue = parseInt(value, 10);\n\n  if (isNaN(numberValue)) return false;\n\n  return (!min || numberValue >= min) && (!max || numberValue <= max);\n};\n"],"names":["isValueInRange","value","min","max","numberValue"],"mappings":"AAAO,MAAMA,IAAiB,CAACC,GAAeC,GAAcC,MAAiB;AACvE,MAAAF,MAAU,GAAW,QAAA;AAEnB,QAAAG,IAAc,SAASH,GAAO,EAAE;AAElC,SAAA,MAAMG,CAAW,IAAU,MAEvB,CAACF,KAAOE,KAAeF,OAAS,CAACC,KAAOC,KAAeD;AACjE;"}

package/dist/features/ui/inputs/num-range-input/num-range-input.js

@@ -0,0 +1,57 @@
+import { jsxs as g, jsx as t } from "react/jsx-runtime";
+import x from "../../layout/flex-view.js";
+import I from "../../text/text.js";
+import { normalizeInputValue as d } from "../percentile-input/percentile-input-helpers.js";
+import p from "../text-input/text-input.js";
+import { isValueInRange as s } from "./num-range-helpers.js";
+const $ = ({
+  onChange: o,
+  value: r,
+  middleMin: m,
+  middleMax: a,
+  endMin: i,
+  endMax: l,
+  middlePlaceholder: u = "",
+  endPlaceholder: c = ""
+}) => {
+  const f = (n) => {
+    const e = d(n.target.value);
+    s(e, m, a) && o({ middle: e, end: r.end });
+  }, h = (n) => {
+    const e = d(n.target.value);
+    s(e, i, l) && o({ middle: r.middle, end: e });
+  };
+  return /* @__PURE__ */ g(x, { $flexDirection: "row", $alignItems: "center", $flexGapX: 1, children: [
+    /* @__PURE__ */ t(
+      p,
+      {
+        renderAs: "primary",
+        widthX: 6,
+        type: "number",
+        min: m,
+        max: a,
+        value: r.middle ?? "",
+        onChange: f,
+        placeholder: u
+      }
+    ),
+    /* @__PURE__ */ t(I, { $renderAs: "body3", $color: "REAL_BLACK", children: "/" }),
+    /* @__PURE__ */ t(
+      p,
+      {
+        renderAs: "primary",
+        type: "number",
+        widthX: 6,
+        min: i,
+        max: l,
+        value: r.end ?? "",
+        onChange: h,
+        placeholder: c
+      }
+    )
+  ] });
+}, b = $;
+export {
+  b as default
+};
+//# sourceMappingURL=num-range-input.js.map

package/dist/features/ui/inputs/num-range-input/num-range-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"num-range-input.js","sources":["../../../../../src/features/ui/inputs/num-range-input/num-range-input.tsx"],"sourcesContent":["import type { NumRangeInputProps } from './num-range-input-types';\n\nimport FlexView from '../../layout/flex-view';\nimport Text from '../../text/text';\nimport { normalizeInputValue } from '../percentile-input/percentile-input-helpers';\nimport TextInput from '../text-input/text-input';\nimport { isValueInRange } from './num-range-helpers';\n\n//TODO: Extract shared normalization logic to a base component - BaseNumericInput\n\nconst NumRangeInput: React.FC<NumRangeInputProps> = ({\n  onChange,\n  value,\n  middleMin,\n  middleMax,\n  endMin,\n  endMax,\n  middlePlaceholder = '',\n  endPlaceholder = '',\n}) => {\n  const handleMiddleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const normalizedValue = normalizeInputValue(e.target.value);\n\n    // TODO: need to handle validation onSubmit/onBlur instead of onValueChange\n    if (isValueInRange(normalizedValue, middleMin, middleMax)) {\n      onChange({ middle: normalizedValue, end: value.end });\n    }\n  };\n\n  const handleEndChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const normalizedValue = normalizeInputValue(e.target.value);\n\n    if (isValueInRange(normalizedValue, endMin, endMax)) {\n      onChange({ middle: value.middle, end: normalizedValue });\n    }\n  };\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={1}>\n      <TextInput\n        renderAs=\"primary\"\n        widthX={6}\n        type=\"number\"\n        min={middleMin}\n        max={middleMax}\n        value={value.middle ?? ''}\n        onChange={handleMiddleChange}\n        placeholder={middlePlaceholder}\n      />\n      <Text $renderAs=\"body3\" $color=\"REAL_BLACK\">\n        /\n      </Text>\n      <TextInput\n        renderAs=\"primary\"\n        type=\"number\"\n        widthX={6}\n        min={endMin}\n        max={endMax}\n        value={value.end ?? ''}\n        onChange={handleEndChange}\n        placeholder={endPlaceholder}\n      />\n    </FlexView>\n  );\n};\n\nexport default NumRangeInput;\n"],"names":["NumRangeInput","onChange","value","middleMin","middleMax","endMin","endMax","middlePlaceholder","endPlaceholder","handleMiddleChange","e","normalizedValue","normalizeInputValue","isValueInRange","handleEndChange","FlexView","jsx","TextInput","Text","NumRangeInput$1"],"mappings":";;;;;;AAUA,MAAMA,IAA8C,CAAC;AAAA,EACnD,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,gBAAAC,IAAiB;AACnB,MAAM;AACE,QAAAC,IAAqB,CAACC,MAA2C;AACrE,UAAMC,IAAkBC,EAAoBF,EAAE,OAAO,KAAK;AAG1D,IAAIG,EAAeF,GAAiBR,GAAWC,CAAS,KACtDH,EAAS,EAAE,QAAQU,GAAiB,KAAKT,EAAM,KAAK;AAAA,EACtD,GAGIY,IAAkB,CAACJ,MAA2C;AAClE,UAAMC,IAAkBC,EAAoBF,EAAE,OAAO,KAAK;AAE1D,IAAIG,EAAeF,GAAiBN,GAAQC,CAAM,KAChDL,EAAS,EAAE,QAAQC,EAAM,QAAQ,KAAKS,GAAiB;AAAA,EACzD;AAGF,2BACGI,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,WAAW,GAC7D,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,QAAQ;AAAA,QACR,MAAK;AAAA,QACL,KAAKd;AAAA,QACL,KAAKC;AAAA,QACL,OAAOF,EAAM,UAAU;AAAA,QACvB,UAAUO;AAAA,QACV,aAAaF;AAAA,MAAA;AAAA,IACf;AAAA,sBACCW,GAAK,EAAA,WAAU,SAAQ,QAAO,cAAa,UAE5C,KAAA;AAAA,IACA,gBAAAF;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAS;AAAA,QACT,MAAK;AAAA,QACL,QAAQ;AAAA,QACR,KAAKZ;AAAA,QACL,KAAKC;AAAA,QACL,OAAOJ,EAAM,OAAO;AAAA,QACpB,UAAUY;AAAA,QACV,aAAaN;AAAA,MAAA;AAAA,IACf;AAAA,EACF,EAAA,CAAA;AAEJ,GAEAW,IAAenB;"}

package/dist/features/ui/inputs/percentile-input/percentile-input-helpers.js

@@ -0,0 +1,11 @@
+const i = (l) => {
+  let e = l.replace(/[^\d.]/g, "");
+  e = e.replace(/(\..*)\./g, "$1"), e = e.replace(/^0+(\d)/, "$1"), e === "." ? e = "0." : e.startsWith(".") && (e = "0" + e);
+  const r = e.split("."), s = r[0];
+  let t = r[1];
+  return t !== void 0 && (t = t == null ? void 0 : t.substring(0, 2), e = `${s}.${t || ""}`), e;
+};
+export {
+  i as normalizeInputValue
+};
+//# sourceMappingURL=percentile-input-helpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"percentile-input-helpers.js","sources":["../../../../../src/features/ui/inputs/percentile-input/percentile-input-helpers.ts"],"sourcesContent":["export const normalizeInputValue = (inputValue: string): string => {\n  // Remove all non-numeric characters except the first decimal point\n  let normalizedValue = inputValue.replace(/[^\\d.]/g, '');\n\n  // Replace multiple consecutive decimal points with a single one\n  normalizedValue = normalizedValue.replace(/(\\..*)\\./g, '$1');\n  normalizedValue = normalizedValue.replace(/^0+(\\d)/, '$1');\n\n  // If the input starts with a decimal point, prepend '0' to it\n  if (normalizedValue === '.') {\n    normalizedValue = '0.';\n  } else if (normalizedValue.startsWith('.')) {\n    normalizedValue = '0' + normalizedValue;\n  }\n\n  // Separate integer and decimal parts\n  const parts = normalizedValue.split('.');\n  const integerPart = parts[0];\n  let decimalPart = parts[1];\n\n  if (decimalPart !== undefined) {\n    // Limit decimal places to two digits if decimalPart exists\n    decimalPart = decimalPart?.substring(0, 2);\n    normalizedValue = `${integerPart}.${decimalPart || ''}`;\n  }\n\n  return normalizedValue;\n};\n"],"names":["normalizeInputValue","inputValue","normalizedValue","parts","integerPart","decimalPart"],"mappings":"AAAa,MAAAA,IAAsB,CAACC,MAA+B;AAEjE,MAAIC,IAAkBD,EAAW,QAAQ,WAAW,EAAE;AAGpC,EAAAC,IAAAA,EAAgB,QAAQ,aAAa,IAAI,GACzCA,IAAAA,EAAgB,QAAQ,WAAW,IAAI,GAGrDA,MAAoB,MACJA,IAAA,OACTA,EAAgB,WAAW,GAAG,MACvCA,IAAkB,MAAMA;AAIpB,QAAAC,IAAQD,EAAgB,MAAM,GAAG,GACjCE,IAAcD,EAAM,CAAC;AACvB,MAAAE,IAAcF,EAAM,CAAC;AAEzB,SAAIE,MAAgB,WAEJA,IAAAA,KAAA,gBAAAA,EAAa,UAAU,GAAG,IACxCH,IAAkB,GAAGE,CAAW,IAAIC,KAAe,EAAE,KAGhDH;AACT;"}

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

@@ -0,0 +1,66 @@
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { forwardRef as T } from "react";
+import { useTheme as b } from "styled-components";
+import A from "../../layout/flex-view.js";
+import S from "../base-input/base-input.js";
+import { normalizeInputValue as y } from "./percentile-input-helpers.js";
+import { InputContainer as N, StyledInput as P, HiddenBox as E, InputReplicaText as R, ThOverlay as j, PercentileLabel as v } from "./percentile-styled.js";
+const B = T((d, m) => {
+  const {
+    onChange: e,
+    label: h,
+    value: t = "",
+    renderAs: a,
+    width: f,
+    widthX: x,
+    size: o = "regular",
+    shape: I,
+    disabled: $,
+    willShowMessage: w,
+    ...z
+  } = d, V = (r) => {
+    const n = y(r.target.value);
+    r.target.value = n;
+    const l = parseInt(n, 10);
+    !isNaN(l) && l >= 0 && l <= 100 || n === "" ? e == null || e(r) : r.preventDefault();
+  }, g = t !== "" && !isNaN(parseInt(t.toString(), 10)), u = "regular", { input: c } = b(), p = c.sizes[o].inputTextVariant;
+  return /* @__PURE__ */ s(A, { $flexDirection: "row", $alignItems: "center", children: [
+    /* @__PURE__ */ i(
+      S,
+      {
+        renderAs: a,
+        label: h,
+        stickyLabel: !!t,
+        width: f,
+        widthX: x,
+        disabled: $,
+        willShowMessage: w,
+        size: u,
+        shape: I,
+        inputElement: /* @__PURE__ */ s(N, { children: [
+          /* @__PURE__ */ i(
+            P,
+            {
+              ref: m,
+              type: "text",
+              value: t ?? "",
+              onChange: V,
+              $renderAs: a,
+              $size: u,
+              ...z
+            }
+          ),
+          /* @__PURE__ */ s(E, { children: [
+            /* @__PURE__ */ i(R, { $renderAs: p, children: t }),
+            g && /* @__PURE__ */ i(j, { $renderAs: p, children: "th" })
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ i(v, { $renderAs: c.sizes[o].inputTextVariant, $color: "GREY_2", children: "Percentile" })
+  ] });
+}), O = B;
+export {
+  O as default
+};
+//# sourceMappingURL=percentile-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"percentile-input.js","sources":["../../../../../src/features/ui/inputs/percentile-input/percentile-input.tsx"],"sourcesContent":["import type { IPercentileProps } from './percentile-input-types';\nimport type { Ref } from 'react';\n\nimport React, { forwardRef } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../layout/flex-view';\nimport BaseInput from '../base-input/base-input';\nimport { normalizeInputValue } from './percentile-input-helpers';\nimport * as Styled from './percentile-styled';\n\nconst PercentileInput = forwardRef((props: IPercentileProps, ref: Ref<HTMLInputElement>) => {\n  const {\n    onChange,\n    label,\n    value = '',\n    renderAs,\n    width,\n    widthX,\n    size = 'regular',\n    shape,\n    disabled,\n    willShowMessage,\n    ...rest\n  } = props;\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const normalizedValue = normalizeInputValue(event.target.value);\n\n    event.target.value = normalizedValue;\n    const numberValue = parseInt(normalizedValue, 10);\n\n    if (!isNaN(numberValue) && numberValue >= 0 && numberValue <= 100) {\n      onChange?.(event);\n    } else if (normalizedValue === '') {\n      onChange?.(event);\n    } else {\n      event.preventDefault();\n    }\n  };\n  const shouldShowTh = value !== '' && !isNaN(parseInt(value.toString(), 10));\n\n  const SIZE = 'regular';\n  const { input } = useTheme();\n  const textVariant = input.sizes[size].inputTextVariant;\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n      <BaseInput\n        renderAs={renderAs}\n        label={label}\n        stickyLabel={!!value}\n        width={width}\n        widthX={widthX}\n        disabled={disabled}\n        willShowMessage={willShowMessage}\n        size={SIZE}\n        shape={shape}\n        inputElement={\n          <Styled.InputContainer>\n            <Styled.StyledInput\n              ref={ref}\n              type=\"text\"\n              value={value ?? ''}\n              onChange={handleChange}\n              $renderAs={renderAs}\n              $size={SIZE}\n              {...rest}\n            />\n            <Styled.HiddenBox>\n              <Styled.InputReplicaText $renderAs={textVariant}>{value}</Styled.InputReplicaText>\n              {shouldShowTh && <Styled.ThOverlay $renderAs={textVariant}>th</Styled.ThOverlay>}\n            </Styled.HiddenBox>\n          </Styled.InputContainer>\n        }\n      />\n      <Styled.PercentileLabel $renderAs={input.sizes[size].inputTextVariant} $color=\"GREY_2\">\n        Percentile\n      </Styled.PercentileLabel>\n    </FlexView>\n  );\n});\n\nexport default PercentileInput;\n"],"names":["PercentileInput","forwardRef","props","ref","onChange","label","value","renderAs","width","widthX","size","shape","disabled","willShowMessage","rest","handleChange","event","normalizedValue","normalizeInputValue","numberValue","shouldShowTh","SIZE","input","useTheme","textVariant","jsxs","FlexView","jsx","BaseInput","Styled.InputContainer","Styled.StyledInput","Styled.HiddenBox","Styled.InputReplicaText","Styled.ThOverlay","Styled.PercentileLabel","PercentileInput$1"],"mappings":";;;;;;;AAWA,MAAMA,IAAkBC,EAAW,CAACC,GAAyBC,MAA+B;AACpF,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAZ,GAEEa,IAAe,CAACC,MAA+C;AACnE,UAAMC,IAAkBC,EAAoBF,EAAM,OAAO,KAAK;AAE9D,IAAAA,EAAM,OAAO,QAAQC;AACf,UAAAE,IAAc,SAASF,GAAiB,EAAE;AAEhD,IAAI,CAAC,MAAME,CAAW,KAAKA,KAAe,KAAKA,KAAe,OAEnDF,MAAoB,KAD7Bb,KAAA,QAAAA,EAAWY,KAIXA,EAAM,eAAe;AAAA,EACvB,GAEII,IAAed,MAAU,MAAM,CAAC,MAAM,SAASA,EAAM,SAAA,GAAY,EAAE,CAAC,GAEpEe,IAAO,WACP,EAAE,OAAAC,MAAUC,KACZC,IAAcF,EAAM,MAAMZ,CAAI,EAAE;AAEtC,SACG,gBAAAe,EAAAC,GAAA,EAAS,gBAAe,OAAM,aAAY,UACzC,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,UAAArB;AAAA,QACA,OAAAF;AAAA,QACA,aAAa,CAAC,CAACC;AAAA,QACf,OAAAE;AAAA,QACA,QAAAC;AAAA,QACA,UAAAG;AAAA,QACA,iBAAAC;AAAA,QACA,MAAMQ;AAAA,QACN,OAAAV;AAAA,QACA,cACE,gBAAAc,EAACI,GAAA,EACC,UAAA;AAAA,UAAA,gBAAAF;AAAA,YAACG;AAAAA,YAAA;AAAA,cACC,KAAA3B;AAAA,cACA,MAAK;AAAA,cACL,OAAOG,KAAS;AAAA,cAChB,UAAUS;AAAA,cACV,WAAWR;AAAA,cACX,OAAOc;AAAA,cACN,GAAGP;AAAA,YAAA;AAAA,UACN;AAAA,UACA,gBAAAW,EAACM,GAAA,EACC,UAAA;AAAA,YAAA,gBAAAJ,EAACK,GAAA,EAAwB,WAAWR,GAAc,UAAMlB,GAAA;AAAA,YACvDc,KAAiB,gBAAAO,EAAAM,GAAA,EAAiB,WAAWT,GAAa,UAAE,MAAA;AAAA,UAAA,GAC/D;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAEJ;AAAA,IACC,gBAAAG,EAAAO,GAAA,EAAuB,WAAWZ,EAAM,MAAMZ,CAAI,EAAE,kBAAkB,QAAO,UAAS,UAEvF,aAAA,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ,CAAC,GAEDyB,IAAenC;"}