@tcn/ui 0.0.3 → 0.0.4

package/dist/inputs/date_picker/date_picker_year_selector.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as h } from "react/jsx-runtime";
-import { useState as j, useRef as z, useEffect as D } from "react";
-import { ChevronLeftIcon as H } from "@tcn/icons/chevron_left_icon.js";
+import { useState as z, useRef as D, useEffect as H } from "react";
+import { ChevronLeftIcon as N } from "@tcn/icons/chevron_left_icon.js";
 import { ChevronRightIcon as O } from "@tcn/icons/chevron_right_icon.js";
 import { useSignalValue as $ } from "@tcn/state";
 import "../../actions/button/base_button/base_button.js";
@@ -10,10 +10,10 @@ import "../../actions/button/button/button.js";
 import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
 import { HStack as t } from "../../stacks/h_stack.js";
-import { Spacer as y } from "../../stacks/spacer.js";
+import { Spacer as x } from "../../stacks/spacer.js";
 import { VStack as E } from "../../stacks/v_stack.js";
 import { BodyText as L } from "../../typography/body_text/body_text.js";
-import x from "classnames";
+import { clsx as y } from "clsx";
 import "../../callout.module-D8ECmxpO.js";
 import "../../caption.module-DDq0H4xZ.js";
 import "../../footnote.module-DEyFuqOr.js";
@@ -25,30 +25,27 @@ import "../../utils/click_away_listener.js";
 import "../../utils/scroll_away_listener.js";
 import "../../utils/hooks/use_resize_observer.js";
 import '../../date_picker_year_selector.css';const q = "_date-picker-year-selector_ab05e1f", A = "_date-picker-year-button_fded757", Y = { "date-picker-year-selector": q, "date-picker-year-button": A };
-function xe({
+function ye({
   presenter: s,
   onClose: k
 }) {
   const { min: p, max: m, visibleYear: o, visibleMonth: b } = $(
     s.stateBroadcast
-  ), [c, f] = j(0), a = z(null), R = p == null ? -1 / 0 : p.getFullYear(), S = m == null ? 1 / 0 : m.getFullYear(), r = [], d = o % 20;
+  ), [c, f] = z(0), a = D(null), R = p == null ? -1 / 0 : p.getFullYear(), S = m == null ? 1 / 0 : m.getFullYear(), r = [], d = o % 20;
   let u = o - d + c, F = u + 19;
   for (let n = 0; n < 20; n++) {
     let l = !1;
     const i = new Date(o, b, 1);
     i.setFullYear(o - d + n + c), (i.getFullYear() > S || i.getFullYear() < R) && (l = !0);
-    const V = t;
+    const j = t;
     r.push(
       /* @__PURE__ */ e(
-        V,
+        j,
         {
           as: "button",
           width: "flex",
           disabled: l,
-          className: x(
-            Y["date-picker-year-button"],
-            "date-picker-year-button"
-          ),
+          className: y(Y["date-picker-year-button"], "date-picker-year-button"),
           "data-is-disabled": String(l),
           "data-is-selected": String(i.getFullYear() === o),
           onClick: () => {
@@ -63,14 +60,14 @@ function xe({
   function w() {
     a.current != null && a.current.focus();
   }
-  D(() => {
+  H(() => {
     a.current != null && a.current.focus();
   }, []);
   const v = r.slice(0, 4), B = r.slice(4, 8), C = r.slice(8, 12), I = r.slice(12, 16), _ = r.slice(16, 20);
-  function N() {
+  function P() {
     f(c - 20);
   }
-  function P() {
+  function V() {
     f(c + 20);
   }
   return /* @__PURE__ */ h(
@@ -79,15 +76,12 @@ function xe({
       ref: a,
       tabIndex: 0,
       padding: "8px",
-      className: x(
-        Y["date-picker-year-selector"],
-        "date-picker-year-selector"
-      ),
+      className: y(Y["date-picker-year-selector"], "date-picker-year-selector"),
       gap: "4px",
       children: [
         /* @__PURE__ */ h(t, { gap: "4px", children: [
-          /* @__PURE__ */ e(g, { onClick: N, hierarchy: "tertiary", children: /* @__PURE__ */ e(H, { flipOnRtl: !0, size: "md" }) }),
-          /* @__PURE__ */ e(y, {}),
+          /* @__PURE__ */ e(g, { onClick: P, hierarchy: "tertiary", children: /* @__PURE__ */ e(N, { flipOnRtl: !0, size: "md" }) }),
+          /* @__PURE__ */ e(x, {}),
           /* @__PURE__ */ e(
             M,
             {
@@ -97,8 +91,8 @@ function xe({
               children: `${u}-${F}`
             }
           ),
-          /* @__PURE__ */ e(y, {}),
-          /* @__PURE__ */ e(g, { hierarchy: "tertiary", onClick: P, children: /* @__PURE__ */ e(O, { size: "md" }) })
+          /* @__PURE__ */ e(x, {}),
+          /* @__PURE__ */ e(g, { hierarchy: "tertiary", onClick: V, children: /* @__PURE__ */ e(O, { size: "md" }) })
         ] }),
         /* @__PURE__ */ e(t, { gap: "4px", children: v }),
         /* @__PURE__ */ e(t, { gap: "4px", children: B }),
@@ -111,6 +105,6 @@ function xe({
   );
 }
 export {
-  xe as DatePickerYearSelector
+  ye as DatePickerYearSelector
 };
 //# sourceMappingURL=date_picker_year_selector.js.map

package/dist/inputs/date_picker/date_picker_year_selector.js.map

@@ -1 +1 @@
-{"version":3,"file":"date_picker_year_selector.js","sources":["../../../src/inputs/date_picker/date_picker_year_selector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { SlimButton } from '../../actions/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { BodyText, Headline } from '../../typography/index.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport styles from './date_picker_year_selector.module.css';\nimport { FocusRedirect } from '../../utils/index.js';\nimport classNames from 'classnames';\n\nexport interface DatePickerYearSelectorProps {\n  presenter: DatePickerPresenter;\n  onClose: () => void;\n}\n\nexport function DatePickerYearSelector({\n  presenter,\n  onClose,\n}: DatePickerYearSelectorProps) {\n  const { min, max, visibleYear, visibleMonth } = useSignalValue(\n    presenter.stateBroadcast\n  );\n\n  const [offset, setOffset] = useState(0);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const minYear = min == null ? -Infinity : min.getFullYear();\n  const maxYear = max == null ? Infinity : max.getFullYear();\n  const years: React.ReactNode[] = [];\n  const remainder = visibleYear % 20;\n  let firstYear = visibleYear - remainder + offset;\n  let lastYear = firstYear + 19;\n\n  for (let x = 0; x < 20; x++) {\n    let disabled = false;\n    const date = new Date(visibleYear, visibleMonth, 1);\n    date.setFullYear(visibleYear - remainder + x + offset);\n\n    if (date.getFullYear() > maxYear || date.getFullYear() < minYear) {\n      disabled = true;\n    }\n\n    const Button: any = HStack;\n\n    years.push(\n      <Button\n        as=\"button\"\n        key={x}\n        width=\"flex\"\n        disabled={disabled}\n        className={classNames(\n          styles['date-picker-year-button'],\n          'date-picker-year-button'\n        )}\n        data-is-disabled={String(disabled)}\n        data-is-selected={String(date.getFullYear() === visibleYear)}\n        onClick={() => {\n          presenter.setVisibleYear(date.getFullYear());\n          onClose();\n        }}\n      >\n        <BodyText>{date.getFullYear()}</BodyText>\n      </Button>\n    );\n  }\n\n  function focus() {\n    if (containerRef.current != null) {\n      containerRef.current.focus();\n    }\n  }\n\n  useEffect(() => {\n    if (containerRef.current != null) {\n      containerRef.current.focus();\n    }\n  }, []);\n\n  const firstRow = years.slice(0, 4);\n  const secondRow = years.slice(4, 8);\n  const thirdRow = years.slice(8, 12);\n  const fourthRow = years.slice(12, 16);\n  const fifthRow = years.slice(16, 20);\n\n  function prev() {\n    setOffset(offset - 20);\n  }\n\n  function next() {\n    setOffset(offset + 20);\n  }\n\n  return (\n    <VStack\n      ref={containerRef}\n      tabIndex={0}\n      padding=\"8px\"\n      className={classNames(\n        styles['date-picker-year-selector'],\n        'date-picker-year-selector'\n      )}\n      gap=\"4px\"\n    >\n      <HStack gap=\"4px\">\n        <SlimButton onClick={prev} hierarchy=\"tertiary\">\n          <ChevronLeftIcon flipOnRtl size=\"md\" />\n        </SlimButton>\n        <Spacer />\n        <Headline\n          selectable={false}\n          emphasis=\"faint\"\n          hierarchy=\"tertiary\"\n        >{`${firstYear}-${lastYear}`}</Headline>\n        <Spacer />\n        <SlimButton hierarchy=\"tertiary\" onClick={next}>\n          <ChevronRightIcon size=\"md\" />\n        </SlimButton>\n      </HStack>\n      <HStack gap=\"4px\">{firstRow}</HStack>\n      <HStack gap=\"4px\">{secondRow}</HStack>\n      <HStack gap=\"4px\">{thirdRow}</HStack>\n      <HStack gap=\"4px\">{fourthRow}</HStack>\n      <HStack gap=\"4px\">{fifthRow}</HStack>\n      <FocusRedirect onRedirect={focus} />\n    </VStack>\n  );\n}\n"],"names":["DatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","disabled","date","Button","HStack","jsx","classNames","styles","BodyText","focus","useEffect","firstRow","secondRow","thirdRow","fourthRow","fifthRow","prev","next","jsxs","VStack","SlimButton","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","FocusRedirect"],"mappings":"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"}
+{"version":3,"file":"date_picker_year_selector.js","sources":["../../../src/inputs/date_picker/date_picker_year_selector.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { ChevronLeftIcon } from '@tcn/icons/chevron_left_icon.js';\nimport { ChevronRightIcon } from '@tcn/icons/chevron_right_icon.js';\nimport { useSignalValue } from '@tcn/state';\nimport { SlimButton } from '../../actions/index.js';\nimport { HStack } from '../../stacks/h_stack.js';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { BodyText, Headline } from '../../typography/index.js';\nimport { DatePickerPresenter } from './date_picker_presenter.js';\nimport styles from './date_picker_year_selector.module.css';\nimport { FocusRedirect } from '../../utils/index.js';\nimport { clsx } from 'clsx';\n\nexport interface DatePickerYearSelectorProps {\n  presenter: DatePickerPresenter;\n  onClose: () => void;\n}\n\nexport function DatePickerYearSelector({\n  presenter,\n  onClose,\n}: DatePickerYearSelectorProps) {\n  const { min, max, visibleYear, visibleMonth } = useSignalValue(\n    presenter.stateBroadcast\n  );\n\n  const [offset, setOffset] = useState(0);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const minYear = min == null ? -Infinity : min.getFullYear();\n  const maxYear = max == null ? Infinity : max.getFullYear();\n  const years: React.ReactNode[] = [];\n  const remainder = visibleYear % 20;\n  let firstYear = visibleYear - remainder + offset;\n  let lastYear = firstYear + 19;\n\n  for (let x = 0; x < 20; x++) {\n    let disabled = false;\n    const date = new Date(visibleYear, visibleMonth, 1);\n    date.setFullYear(visibleYear - remainder + x + offset);\n\n    if (date.getFullYear() > maxYear || date.getFullYear() < minYear) {\n      disabled = true;\n    }\n\n    const Button: any = HStack;\n\n    years.push(\n      <Button\n        as=\"button\"\n        key={x}\n        width=\"flex\"\n        disabled={disabled}\n        className={clsx(styles['date-picker-year-button'], 'date-picker-year-button')}\n        data-is-disabled={String(disabled)}\n        data-is-selected={String(date.getFullYear() === visibleYear)}\n        onClick={() => {\n          presenter.setVisibleYear(date.getFullYear());\n          onClose();\n        }}\n      >\n        <BodyText>{date.getFullYear()}</BodyText>\n      </Button>\n    );\n  }\n\n  function focus() {\n    if (containerRef.current != null) {\n      containerRef.current.focus();\n    }\n  }\n\n  useEffect(() => {\n    if (containerRef.current != null) {\n      containerRef.current.focus();\n    }\n  }, []);\n\n  const firstRow = years.slice(0, 4);\n  const secondRow = years.slice(4, 8);\n  const thirdRow = years.slice(8, 12);\n  const fourthRow = years.slice(12, 16);\n  const fifthRow = years.slice(16, 20);\n\n  function prev() {\n    setOffset(offset - 20);\n  }\n\n  function next() {\n    setOffset(offset + 20);\n  }\n\n  return (\n    <VStack\n      ref={containerRef}\n      tabIndex={0}\n      padding=\"8px\"\n      className={clsx(styles['date-picker-year-selector'], 'date-picker-year-selector')}\n      gap=\"4px\"\n    >\n      <HStack gap=\"4px\">\n        <SlimButton onClick={prev} hierarchy=\"tertiary\">\n          <ChevronLeftIcon flipOnRtl size=\"md\" />\n        </SlimButton>\n        <Spacer />\n        <Headline\n          selectable={false}\n          emphasis=\"faint\"\n          hierarchy=\"tertiary\"\n        >{`${firstYear}-${lastYear}`}</Headline>\n        <Spacer />\n        <SlimButton hierarchy=\"tertiary\" onClick={next}>\n          <ChevronRightIcon size=\"md\" />\n        </SlimButton>\n      </HStack>\n      <HStack gap=\"4px\">{firstRow}</HStack>\n      <HStack gap=\"4px\">{secondRow}</HStack>\n      <HStack gap=\"4px\">{thirdRow}</HStack>\n      <HStack gap=\"4px\">{fourthRow}</HStack>\n      <HStack gap=\"4px\">{fifthRow}</HStack>\n      <FocusRedirect onRedirect={focus} />\n    </VStack>\n  );\n}\n"],"names":["DatePickerYearSelector","presenter","onClose","min","max","visibleYear","visibleMonth","useSignalValue","offset","setOffset","useState","containerRef","useRef","minYear","maxYear","years","remainder","firstYear","lastYear","x","disabled","date","Button","HStack","jsx","clsx","styles","BodyText","focus","useEffect","firstRow","secondRow","thirdRow","fourthRow","fifthRow","prev","next","jsxs","VStack","SlimButton","ChevronLeftIcon","Spacer","Headline","ChevronRightIcon","FocusRedirect"],"mappings":"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"}

package/dist/inputs/input/input.js

@@ -1,12 +1,12 @@
 import { jsx as d } from "react/jsx-runtime";
-import o from "classnames";
+import { clsx as o } from "clsx";
 import f from "react";
-import '../../input.css';const c = "_input_a16553f", m = { input: c }, I = f.forwardRef(function({ type: s = "text", style: i, className: n, width: r, height: l, onChange: a, ...t }, u) {
+import '../../input.css';const c = "_input_a16553f", m = { input: c }, I = f.forwardRef(function({ type: i = "text", style: s, className: n, width: r, height: l, onChange: a, ...t }, u) {
   return /* @__PURE__ */ d(
     "input",
     {
       className: o(m.input, n, "input"),
-      type: s,
+      type: i,
       ref: u,
       "data-is-disabled": t.disabled || !1,
       "aria-disabled": t.disabled || !1,
@@ -14,7 +14,7 @@ import '../../input.css';const c = "_input_a16553f", m = { input: c }, I = f.for
         a && a(e.currentTarget.value, e);
       },
       ...t,
-      style: { width: r, height: l, ...i }
+      style: { width: r, height: l, ...s }
     }
   );
 });

package/dist/inputs/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../src/inputs/input/input.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport React from 'react';\nimport { HTMLAttributes } from 'react';\nimport styles from './input.module.css';\n\nexport interface InputProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  type?: React.HTMLInputTypeAttribute;\n  width?: string;\n  height?: string;\n  value?: string;\n  disabled?: boolean;\n  min?: string;\n  max?: string;\n  placeholder?: string;\n  onChange?: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Input = React.forwardRef(function Input(\n  { type = 'text', style, className, width, height, onChange, ...props }: InputProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  return (\n    <input\n      className={classnames(styles.input, className, 'input')}\n      type={type}\n      ref={ref}\n      data-is-disabled={props.disabled || false}\n      aria-disabled={props.disabled || false}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n      style={{ width, height, ...style }}\n    />\n  );\n});\n"],"names":["Input","React","type","style","className","width","height","onChange","props","ref","jsx","classnames","styles"],"mappings":";;;8CAiBaA,IAAQC,EAAM,WAAW,SACpC,EAAE,MAAAC,IAAO,QAAQ,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAC/DC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWC,EAAO,OAAOR,GAAW,OAAO;AAAA,MACtD,MAAAF;AAAA,MACA,KAAAO;AAAA,MACA,oBAAkBD,EAAM,YAAY;AAAA,MACpC,iBAAeA,EAAM,YAAY;AAAA,MACjC,UAAU,CAAA,MAAK;AACb,QAAAD,KAAYA,EAAS,EAAE,cAAc,OAAO,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGC;AAAA,MACJ,OAAO,EAAE,OAAAH,GAAO,QAAAC,GAAQ,GAAGH,EAAA;AAAA,IAAM;AAAA,EAAA;AAGvC,CAAC;"}
+{"version":3,"file":"input.js","sources":["../../../src/inputs/input/input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { HTMLAttributes } from 'react';\nimport styles from './input.module.css';\n\nexport interface InputProps extends Omit<HTMLAttributes<HTMLInputElement>, 'onChange'> {\n  type?: React.HTMLInputTypeAttribute;\n  width?: string;\n  height?: string;\n  value?: string;\n  disabled?: boolean;\n  min?: string;\n  max?: string;\n  placeholder?: string;\n  onChange?: (value: string, event?: React.ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const Input = React.forwardRef(function Input(\n  { type = 'text', style, className, width, height, onChange, ...props }: InputProps,\n  ref: React.Ref<HTMLInputElement>\n) {\n  return (\n    <input\n      className={clsx(styles.input, className, 'input')}\n      type={type}\n      ref={ref}\n      data-is-disabled={props.disabled || false}\n      aria-disabled={props.disabled || false}\n      onChange={e => {\n        onChange && onChange(e.currentTarget.value, e);\n      }}\n      {...props}\n      style={{ width, height, ...style }}\n    />\n  );\n});\n"],"names":["Input","React","type","style","className","width","height","onChange","props","ref","jsx","clsx","styles"],"mappings":";;;8CAiBaA,IAAQC,EAAM,WAAW,SACpC,EAAE,MAAAC,IAAO,QAAQ,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,QAAAC,GAAQ,UAAAC,GAAU,GAAGC,EAAA,GAC/DC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,OAAOR,GAAW,OAAO;AAAA,MAChD,MAAAF;AAAA,MACA,KAAAO;AAAA,MACA,oBAAkBD,EAAM,YAAY;AAAA,MACpC,iBAAeA,EAAM,YAAY;AAAA,MACjC,UAAU,CAAA,MAAK;AACb,QAAAD,KAAYA,EAAS,EAAE,cAAc,OAAO,CAAC;AAAA,MAC/C;AAAA,MACC,GAAGC;AAAA,MACJ,OAAO,EAAE,OAAAH,GAAO,QAAAC,GAAQ,GAAGH,EAAA;AAAA,IAAM;AAAA,EAAA;AAGvC,CAAC;"}

package/dist/inputs/multi_combo_box/multi_combo_box.js

@@ -5,7 +5,7 @@ import { MultiselectInlineValues as R } from "../multiselect/multiselect_inline_
 import { MultiselectValues as T } from "../multiselect/multiselect_values.js";
 import { makeAvailableOptions as g } from "../options/utils.js";
 import { Option as j } from "../options/option.js";
-import k from "classnames";
+import { clsx as k } from "clsx";
 import { VStack as _ } from "../../stacks/v_stack.js";
 import '../../multi_combo_box.css';const E = "_multi-combo-box-container_9528df3", F = { "multi-combo-box-container": E }, P = O.forwardRef(function({
   value: e = [],

package/dist/inputs/multi_combo_box/multi_combo_box.js.map

@@ -1 +1 @@
-{"version":3,"file":"multi_combo_box.js","sources":["../../../src/inputs/multi_combo_box/multi_combo_box.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { ComboBox } from '../combo_box/combo_box.js';\nimport { InputProps } from '../input/input.js';\nimport { MultiselectInlineValues } from '../multiselect/multiselect_inline_values.js';\nimport { MultiselectValues } from '../multiselect/multiselect_values.js';\nimport { makeAvailableOptions } from '../options/utils.js';\nimport { OptionProps } from '../options/option.js';\nimport { Option } from '../options/option.js';\n\nimport styles from './multi_combo_box.module.css';\nimport classNames from 'classnames';\nimport { VStack, type VStackProps } from '../../stacks/v_stack.js';\n\nexport interface MultiComboBoxProps extends Omit<VStackProps, 'onChange'> {\n  children: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];\n  onChange?: (values: string[]) => void;\n  value?: string[];\n  disabled?: boolean;\n  inline?: boolean;\n  inputRef?: React.Ref<HTMLInputElement>;\n  inputProps?: InputProps;\n  trimCustomInput?: boolean;\n}\n\nexport const MultiComboBox = React.forwardRef(function MultiComboBox(\n  {\n    value: values = [],\n    children,\n    disabled = false,\n    className,\n    onChange,\n    inline = false,\n    inputRef,\n    trimCustomInput = false,\n    inputProps,\n    ...props\n  }: MultiComboBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [intervalValue, setInternalValue] = useState('');\n  const childrenArray = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n\n  const availableOptions = makeAvailableOptions(childrenArray, values);\n  const valuesAsOptions = values.map(v => {\n    const option = childrenArray.find(o => o.props.value === v);\n    if (option == null) {\n      return (\n        <Option value={v} label={v}>\n          {v}\n        </Option>\n      );\n    }\n    return option;\n  });\n\n  function removeValue(option: React.ReactElement<OptionProps>) {\n    const index = values.indexOf(option.props.value);\n\n    if (index > -1) {\n      const newValues = values.filter(v => v !== option.props.value);\n      onChange && onChange(newValues);\n    }\n  }\n\n  function addValue(newValue: string) {\n    if (newValue.trim() === '') {\n      return;\n    }\n\n    const index = values.indexOf(newValue);\n\n    if (index === -1) {\n      onChange && onChange([...values, newValue]);\n    }\n\n    setInternalValue('');\n  }\n\n  if (inline) {\n    return (\n      <>\n        <ComboBox\n          ref={inputRef}\n          value={intervalValue}\n          onChange={setInternalValue}\n          onOptionSelect={addValue}\n          trimCustomInput={trimCustomInput}\n          disabled={disabled}\n          noOptionMatchedMessage=\"Press Enter To Add\"\n          placeholder=\"Type to Add\"\n          {...inputProps}\n        >\n          {availableOptions}\n        </ComboBox>\n        <MultiselectInlineValues\n          values={valuesAsOptions}\n          disabled={disabled}\n          onRemove={removeValue}\n        />\n      </>\n    );\n  }\n\n  return (\n    <VStack\n      ref={ref}\n      {...props}\n      className={classNames(styles['multi-combo-box-container'], className)}\n    >\n      <ComboBox\n        ref={inputRef}\n        value={intervalValue}\n        onChange={setInternalValue}\n        onOptionSelect={addValue}\n        trimCustomInput={trimCustomInput}\n        disabled={disabled}\n        noOptionMatchedMessage=\"No Options Matched\"\n        placeholder=\"Type to Search or Add\"\n        {...inputProps}\n      >\n        {availableOptions}\n      </ComboBox>\n      <MultiselectValues\n        values={valuesAsOptions}\n        onRemove={removeValue}\n        disabled={disabled}\n        className=\"multi-combo-box-values-container\"\n      />\n    </VStack>\n  );\n});\n"],"names":["MultiComboBox","React","values","children","disabled","className","onChange","inline","inputRef","trimCustomInput","inputProps","props","ref","intervalValue","setInternalValue","useState","childrenArray","availableOptions","makeAvailableOptions","valuesAsOptions","v","option","o","Option","removeValue","newValues","addValue","newValue","jsxs","Fragment","jsx","ComboBox","MultiselectInlineValues","VStack","classNames","styles","MultiselectValues"],"mappings":";;;;;;;;;wFAwBaA,IAAgBC,EAAM,WAAW,SAC5C;AAAA,EACE,OAAOC,IAAS,CAAA;AAAA,EAChB,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,YAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,EAAE,GAC/CC,IAAgBf,EAAM,SAAS;AAAA,IACnCE;AAAA,EAAA,GAGIc,IAAmBC,EAAqBF,GAAed,CAAM,GAC7DiB,IAAkBjB,EAAO,IAAI,CAAAkB,MAAK;AACtC,UAAMC,IAASL,EAAc,KAAK,OAAKM,EAAE,MAAM,UAAUF,CAAC;AAC1D,WAAIC,uBAECE,GAAA,EAAO,OAAOH,GAAG,OAAOA,GACtB,UAAAA,GACH;AAAA,EAIN,CAAC;AAED,WAASI,EAAYH,GAAyC;AAG5D,QAFcnB,EAAO,QAAQmB,EAAO,MAAM,KAAK,IAEnC,IAAI;AACd,YAAMI,IAAYvB,EAAO,OAAO,OAAKkB,MAAMC,EAAO,MAAM,KAAK;AAC7D,MAAAf,KAAYA,EAASmB,CAAS;AAAA,IAChC;AAAA,EACF;AAEA,WAASC,EAASC,GAAkB;AAClC,QAAIA,EAAS,KAAA,MAAW;AACtB;AAKF,IAFczB,EAAO,QAAQyB,CAAQ,MAEvB,MACZrB,KAAYA,EAAS,CAAC,GAAGJ,GAAQyB,CAAQ,CAAC,GAG5Cb,EAAiB,EAAE;AAAA,EACrB;AAEA,SAAIP,IAEA,gBAAAqB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKvB;AAAA,QACL,OAAOK;AAAA,QACP,UAAUC;AAAA,QACV,gBAAgBY;AAAA,QAChB,iBAAAjB;AAAA,QACA,UAAAL;AAAA,QACA,wBAAuB;AAAA,QACvB,aAAY;AAAA,QACX,GAAGM;AAAA,QAEH,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAa;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAQb;AAAA,QACR,UAAAf;AAAA,QACA,UAAUoB;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF,IAKF,gBAAAI;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,KAAArB;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWuB,EAAWC,EAAO,2BAA2B,GAAG9B,CAAS;AAAA,MAEpE,UAAA;AAAA,QAAA,gBAAAyB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAKvB;AAAA,YACL,OAAOK;AAAA,YACP,UAAUC;AAAA,YACV,gBAAgBY;AAAA,YAChB,iBAAAjB;AAAA,YACA,UAAAL;AAAA,YACA,wBAAuB;AAAA,YACvB,aAAY;AAAA,YACX,GAAGM;AAAA,YAEH,UAAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAa;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,QAAQjB;AAAA,YACR,UAAUK;AAAA,YACV,UAAApB;AAAA,YACA,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"multi_combo_box.js","sources":["../../../src/inputs/multi_combo_box/multi_combo_box.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { ComboBox } from '../combo_box/combo_box.js';\nimport { InputProps } from '../input/input.js';\nimport { MultiselectInlineValues } from '../multiselect/multiselect_inline_values.js';\nimport { MultiselectValues } from '../multiselect/multiselect_values.js';\nimport { makeAvailableOptions } from '../options/utils.js';\nimport { OptionProps } from '../options/option.js';\nimport { Option } from '../options/option.js';\n\nimport styles from './multi_combo_box.module.css';\nimport { clsx } from 'clsx';\nimport { VStack, type VStackProps } from '../../stacks/v_stack.js';\n\nexport interface MultiComboBoxProps extends Omit<VStackProps, 'onChange'> {\n  children: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];\n  onChange?: (values: string[]) => void;\n  value?: string[];\n  disabled?: boolean;\n  inline?: boolean;\n  inputRef?: React.Ref<HTMLInputElement>;\n  inputProps?: InputProps;\n  trimCustomInput?: boolean;\n}\n\nexport const MultiComboBox = React.forwardRef(function MultiComboBox(\n  {\n    value: values = [],\n    children,\n    disabled = false,\n    className,\n    onChange,\n    inline = false,\n    inputRef,\n    trimCustomInput = false,\n    inputProps,\n    ...props\n  }: MultiComboBoxProps,\n  ref: React.Ref<HTMLDivElement>\n) {\n  const [intervalValue, setInternalValue] = useState('');\n  const childrenArray = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n\n  const availableOptions = makeAvailableOptions(childrenArray, values);\n  const valuesAsOptions = values.map(v => {\n    const option = childrenArray.find(o => o.props.value === v);\n    if (option == null) {\n      return (\n        <Option value={v} label={v}>\n          {v}\n        </Option>\n      );\n    }\n    return option;\n  });\n\n  function removeValue(option: React.ReactElement<OptionProps>) {\n    const index = values.indexOf(option.props.value);\n\n    if (index > -1) {\n      const newValues = values.filter(v => v !== option.props.value);\n      onChange && onChange(newValues);\n    }\n  }\n\n  function addValue(newValue: string) {\n    if (newValue.trim() === '') {\n      return;\n    }\n\n    const index = values.indexOf(newValue);\n\n    if (index === -1) {\n      onChange && onChange([...values, newValue]);\n    }\n\n    setInternalValue('');\n  }\n\n  if (inline) {\n    return (\n      <>\n        <ComboBox\n          ref={inputRef}\n          value={intervalValue}\n          onChange={setInternalValue}\n          onOptionSelect={addValue}\n          trimCustomInput={trimCustomInput}\n          disabled={disabled}\n          noOptionMatchedMessage=\"Press Enter To Add\"\n          placeholder=\"Type to Add\"\n          {...inputProps}\n        >\n          {availableOptions}\n        </ComboBox>\n        <MultiselectInlineValues\n          values={valuesAsOptions}\n          disabled={disabled}\n          onRemove={removeValue}\n        />\n      </>\n    );\n  }\n\n  return (\n    <VStack\n      ref={ref}\n      {...props}\n      className={clsx(styles['multi-combo-box-container'], className)}\n    >\n      <ComboBox\n        ref={inputRef}\n        value={intervalValue}\n        onChange={setInternalValue}\n        onOptionSelect={addValue}\n        trimCustomInput={trimCustomInput}\n        disabled={disabled}\n        noOptionMatchedMessage=\"No Options Matched\"\n        placeholder=\"Type to Search or Add\"\n        {...inputProps}\n      >\n        {availableOptions}\n      </ComboBox>\n      <MultiselectValues\n        values={valuesAsOptions}\n        onRemove={removeValue}\n        disabled={disabled}\n        className=\"multi-combo-box-values-container\"\n      />\n    </VStack>\n  );\n});\n"],"names":["MultiComboBox","React","values","children","disabled","className","onChange","inline","inputRef","trimCustomInput","inputProps","props","ref","intervalValue","setInternalValue","useState","childrenArray","availableOptions","makeAvailableOptions","valuesAsOptions","v","option","o","Option","removeValue","newValues","addValue","newValue","jsxs","Fragment","jsx","ComboBox","MultiselectInlineValues","VStack","clsx","styles","MultiselectValues"],"mappings":";;;;;;;;;wFAwBaA,IAAgBC,EAAM,WAAW,SAC5C;AAAA,EACE,OAAOC,IAAS,CAAA;AAAA,EAChB,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,YAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAS,EAAE,GAC/CC,IAAgBf,EAAM,SAAS;AAAA,IACnCE;AAAA,EAAA,GAGIc,IAAmBC,EAAqBF,GAAed,CAAM,GAC7DiB,IAAkBjB,EAAO,IAAI,CAAAkB,MAAK;AACtC,UAAMC,IAASL,EAAc,KAAK,OAAKM,EAAE,MAAM,UAAUF,CAAC;AAC1D,WAAIC,uBAECE,GAAA,EAAO,OAAOH,GAAG,OAAOA,GACtB,UAAAA,GACH;AAAA,EAIN,CAAC;AAED,WAASI,EAAYH,GAAyC;AAG5D,QAFcnB,EAAO,QAAQmB,EAAO,MAAM,KAAK,IAEnC,IAAI;AACd,YAAMI,IAAYvB,EAAO,OAAO,OAAKkB,MAAMC,EAAO,MAAM,KAAK;AAC7D,MAAAf,KAAYA,EAASmB,CAAS;AAAA,IAChC;AAAA,EACF;AAEA,WAASC,EAASC,GAAkB;AAClC,QAAIA,EAAS,KAAA,MAAW;AACtB;AAKF,IAFczB,EAAO,QAAQyB,CAAQ,MAEvB,MACZrB,KAAYA,EAAS,CAAC,GAAGJ,GAAQyB,CAAQ,CAAC,GAG5Cb,EAAiB,EAAE;AAAA,EACrB;AAEA,SAAIP,IAEA,gBAAAqB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKvB;AAAA,QACL,OAAOK;AAAA,QACP,UAAUC;AAAA,QACV,gBAAgBY;AAAA,QAChB,iBAAAjB;AAAA,QACA,UAAAL;AAAA,QACA,wBAAuB;AAAA,QACvB,aAAY;AAAA,QACX,GAAGM;AAAA,QAEH,UAAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAa;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,QAAQb;AAAA,QACR,UAAAf;AAAA,QACA,UAAUoB;AAAA,MAAA;AAAA,IAAA;AAAA,EACZ,GACF,IAKF,gBAAAI;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,KAAArB;AAAA,MACC,GAAGD;AAAA,MACJ,WAAWuB,EAAKC,EAAO,2BAA2B,GAAG9B,CAAS;AAAA,MAE9D,UAAA;AAAA,QAAA,gBAAAyB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAKvB;AAAA,YACL,OAAOK;AAAA,YACP,UAAUC;AAAA,YACV,gBAAgBY;AAAA,YAChB,iBAAAjB;AAAA,YACA,UAAAL;AAAA,YACA,wBAAuB;AAAA,YACvB,aAAY;AAAA,YACX,GAAGM;AAAA,YAEH,UAAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAa;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,QAAQjB;AAAA,YACR,UAAUK;AAAA,YACV,UAAApB;AAAA,YACA,WAAU;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/inputs/multiselect/multiselect_values.js

@@ -1,5 +1,5 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import p from "classnames";
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import { clsx as a } from "clsx";
 import { s as i } from "../../multiselect_values.module-BMJOyYHe.js";
 import { CrossIcon as c } from "@tcn/icons/cross_icon.js";
 import "../../actions/button/base_button/base_button.js";
@@ -17,7 +17,7 @@ function k({
   className: m,
   onRemove: l
 }) {
-  const e = s.map((o, n) => /* @__PURE__ */ a(
+  const o = s.map((e, n) => /* @__PURE__ */ p(
     u,
     {
       hAlign: "start",
@@ -25,7 +25,7 @@ function k({
       className: i.chip,
       paddingInlineStart: "8px",
       children: [
-        /* @__PURE__ */ r("span", { children: o.props.label }),
+        /* @__PURE__ */ r("span", { children: e.props.label }),
         /* @__PURE__ */ r(
           h,
           {
@@ -34,7 +34,7 @@ function k({
             hierarchy: "tertiary",
             className: i.remove,
             onClick: () => {
-              l(o);
+              l(e);
             },
             children: /* @__PURE__ */ r(c, { size: "xs" })
           }
@@ -43,16 +43,16 @@ function k({
     },
     n
   ));
-  return e.length === 0 ? null : /* @__PURE__ */ r(
+  return o.length === 0 ? null : /* @__PURE__ */ r(
     "div",
     {
-      className: p(
+      className: a(
         i["item-container"],
         m,
         "multiselect-values-container"
       ),
       "data-is-disabled": t,
-      children: e
+      children: o
     }
   );
 }

package/dist/inputs/multiselect/multiselect_values.js.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import classNames from 'classnames';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectValueProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n  className?: string;\n}\n\nexport function MultiselectValues({\n  values,\n  disabled,\n  className,\n  onRemove,\n}: MultiselectValueProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        color=\"rgb(57, 85, 120)\"\n        className={styles.chip}\n        key={index}\n        paddingInlineStart=\"8px\"\n      >\n        <span>{v.props.label}</span>\n        <SlimButton\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={styles.remove}\n          onClick={() => {\n            onRemove(v);\n          }}\n        >\n          <CrossIcon size=\"xs\" />\n        </SlimButton>\n      </Chip>\n    );\n  });\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={classNames(\n        styles['item-container'],\n        className,\n        'multiselect-values-container'\n      )}\n      data-is-disabled={disabled}\n    >\n      {items}\n    </div>\n  );\n}\n"],"names":["MultiselectValues","values","disabled","className","onRemove","items","v","index","jsxs","Chip","styles","jsx","SlimButton","CrossIcon","classNames"],"mappings":";;;;;;;;;;;;;AAeO,SAASA,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAQJ,EAAO,IAAI,CAACK,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAM;AAAA,MACN,WAAWC,EAAO;AAAA,MAElB,oBAAmB;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAL,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAK;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWQ,EAAO;AAAA,YAClB,SAAS,MAAM;AACb,cAAAN,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAK,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAdKN;AAAA,EAAA,CAiBV;AAED,SAAIF,EAAM,WAAW,IACZ,OAIP,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWG;AAAA,QACTJ,EAAO,gBAAgB;AAAA,QACvBP;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,oBAAkBD;AAAA,MAEjB,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"multiselect_values.js","sources":["../../../src/inputs/multiselect/multiselect_values.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { OptionProps } from '../options/option.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectValueProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n  className?: string;\n}\n\nexport function MultiselectValues({\n  values,\n  disabled,\n  className,\n  onRemove,\n}: MultiselectValueProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        color=\"rgb(57, 85, 120)\"\n        className={styles.chip}\n        key={index}\n        paddingInlineStart=\"8px\"\n      >\n        <span>{v.props.label}</span>\n        <SlimButton\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={styles.remove}\n          onClick={() => {\n            onRemove(v);\n          }}\n        >\n          <CrossIcon size=\"xs\" />\n        </SlimButton>\n      </Chip>\n    );\n  });\n\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(\n        styles['item-container'],\n        className,\n        'multiselect-values-container'\n      )}\n      data-is-disabled={disabled}\n    >\n      {items}\n    </div>\n  );\n}\n"],"names":["MultiselectValues","values","disabled","className","onRemove","items","v","index","jsxs","Chip","styles","jsx","SlimButton","CrossIcon","clsx"],"mappings":";;;;;;;;;;;;;AAeO,SAASA,EAAkB;AAAA,EAChC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,GAA0B;AACxB,QAAMC,IAAQJ,EAAO,IAAI,CAACK,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,OAAM;AAAA,MACN,WAAWC,EAAO;AAAA,MAElB,oBAAmB;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAL,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAK;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWQ,EAAO;AAAA,YAClB,SAAS,MAAM;AACb,cAAAN,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAK,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAdKN;AAAA,EAAA,CAiBV;AAED,SAAIF,EAAM,WAAW,IACZ,OAIP,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWG;AAAA,QACTJ,EAAO,gBAAgB;AAAA,QACvBP;AAAA,QACA;AAAA,MAAA;AAAA,MAEF,oBAAkBD;AAAA,MAEjB,UAAAG;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/inputs/phone_number_input/phone_number_input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"phone_number_input.d.ts","sourceRoot":"","sources":["../../../src/inputs/phone_number_input/phone_number_input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAQN,MAAM,OAAO,CAAC;AAUf,OAAO,EAAU,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAuF3D,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChD,mBAAmB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;CAChF;AAED,eAAO,MAAM,gBAAgB,2FAsN3B,CAAC"}
+{"version":3,"file":"phone_number_input.d.ts","sourceRoot":"","sources":["../../../src/inputs/phone_number_input/phone_number_input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEnE,OAAO,KAQN,MAAM,OAAO,CAAC;AAUf,OAAO,EAAU,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAuF3D,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,gBAAgB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IAChD,mBAAmB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;CAChF;AAED,eAAO,MAAM,gBAAgB,2FAmN3B,CAAC"}

package/dist/inputs/phone_number_input/phone_number_input.js

@@ -1,7 +1,7 @@
 import { jsxs as z, jsx as c, Fragment as Z } from "react/jsx-runtime";
 import { HStack as A } from "../../stacks/h_stack.js";
-import y from "classnames";
-import ee, { useRef as oe, useState as l, useMemo as H, Children as ne, isValidElement as te, useLayoutEffect as T, useCallback as re } from "react";
+import { clsx as l } from "clsx";
+import ee, { useRef as oe, useState as a, useMemo as H, Children as ne, isValidElement as te, useLayoutEffect as T, useCallback as re } from "react";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
 import { SlimButton as ue } from "../../actions/button/slim_button/slim_button.js";
@@ -15,7 +15,7 @@ import { NotebookIcon as ce } from "@tcn/icons/notebook_icon.js";
 import { Option as L } from "../options/option.js";
 import { SuggestionList as ie } from "../suggestions/suggestion_list.js";
 import { stripNonNumericAfterCountryCode as w } from "./utils.js";
-import '../../phone_number_input.css';const me = "_phone-number-input_5c4483d", le = "_phone-number-input-select_a7b33ac", ae = "_phone-number-input-input_5b14556", he = "_phone-number-input-phone-book-popover_1511f35", fe = "_phone-number-input-phone-book_7999ca1", a = { "phone-number-input": me, "phone-number-input-select": le, "phone-number-input-input": ae, "phone-number-input-phone-book-popover": he, "phone-number-input-phone-book": fe }, O = E.map((o) => ({
+import '../../phone_number_input.css';const me = "_phone-number-input_5c4483d", le = "_phone-number-input-select_a7b33ac", ae = "_phone-number-input-input_5b14556", he = "_phone-number-input-phone-book-popover_1511f35", fe = "_phone-number-input-phone-book_7999ca1", h = { "phone-number-input": me, "phone-number-input-select": le, "phone-number-input-input": ae, "phone-number-input-phone-book-popover": he, "phone-number-input-phone-book": fe }, O = E.map((o) => ({
   name: o.name,
   selectedLabel: o.prefix,
   optionLabel: `${o.prefix} (${o.code}) ${o.unicodeFlag}`,
@@ -23,9 +23,9 @@ import '../../phone_number_input.css';const me = "_phone-number-input_5c4483d",
   keywords: o.keywords
 }));
 O.sort((o, n) => parseInt(o.value) - parseInt(n.value));
-const x = /* @__PURE__ */ new Map(), h = /* @__PURE__ */ new Map();
+const x = /* @__PURE__ */ new Map(), f = /* @__PURE__ */ new Map();
 E.forEach((o) => {
-  h.set(o.code, o), x.has(o.prefix) ? x.get(o.prefix)?.push(o) : x.set(o.prefix, [o]);
+  f.set(o.code, o), x.has(o.prefix) ? x.get(o.prefix)?.push(o) : x.set(o.prefix, [o]);
 });
 function be(o) {
   if (o != null) {
@@ -59,12 +59,12 @@ function I(o, n, t) {
     const g = o.slice(0, p), m = x.get(g);
     if (m != null) {
       const s = m.find(
-        (f) => f.code === n
+        (b) => b.code === n
       );
       return s ?? m[0];
     }
   }
-  return h.get(t.toUpperCase()) || h.get("US");
+  return f.get(t.toUpperCase()) || f.get("US");
 }
 const Re = ee.forwardRef(function({
   value: n = "",
@@ -73,29 +73,29 @@ const Re = ee.forwardRef(function({
   countrySelectRef: g,
   phoneNumberInputRef: m,
   disabled: s = !1,
-  allowedCountryCodes: f,
+  allowedCountryCodes: b,
   children: V,
   ...W
 }, q) {
-  const P = oe(n), [R, S] = l(
+  const P = oe(n), [R, S] = a(
     null
-  ), $ = R != null, [i, B] = l(t), v = I(
+  ), $ = R != null, [i, B] = a(t), v = I(
     n,
     i,
     t
-  ), [b, M] = l(() => {
+  ), [d, M] = a(() => {
     const e = n.split(v.prefix)[1];
     return e == null ? "" : w(e);
   }), C = H(() => ne.toArray(V).filter(
     (e) => te(e) && e.type === L
-  ), [V]), F = C.length > 0, [U, d] = l(v.code), [D, k] = l([
+  ), [V]), F = C.length > 0, [U, k] = a(v.code), [D, y] = a([
     ...E[0].masks
-  ]), G = H(() => be(f), [f]);
+  ]), G = H(() => be(b), [b]);
   function J(e) {
-    const r = h.get(e);
-    if (r == null || (d(r.code), k([...r.masks]), B(r.code), b == null))
+    const r = f.get(e);
+    if (r == null || (k(r.code), y([...r.masks]), B(r.code), d == null))
       return;
-    const u = `${r.prefix}${w(b)}`;
+    const u = `${r.prefix}${w(d)}`;
     P.current = u, p && p(u);
   }
   T(() => {
@@ -104,11 +104,11 @@ const Re = ee.forwardRef(function({
       i,
       t
     );
-    d(e.code), k([...e.masks]), B(e.code);
+    k(e.code), y([...e.masks]), B(e.code);
   }, [n, i, t]);
   function K(e) {
-    const r = h.get(U)?.prefix, u = w(e), N = r + u;
-    P.current = N, b !== e && M(e), p && p(N);
+    const r = f.get(U)?.prefix, u = w(e), N = r + u;
+    P.current = N, d !== e && M(e), p && p(N);
   }
   function Q(e) {
     S($ ? null : e.currentTarget);
@@ -126,7 +126,7 @@ const Re = ee.forwardRef(function({
         i,
         t
       );
-      d(r.code), k([...r.masks]);
+      k(r.code), y([...r.masks]);
       const u = e.split(r.prefix)[1];
       return M(u), u;
     }
@@ -139,7 +139,7 @@ const Re = ee.forwardRef(function({
         i,
         t
       ), N = e.split(u.prefix)[1];
-      d(u.code), k([...u.masks]), B(u.code), r !== e && (M(N), p && p(e));
+      k(u.code), y([...u.masks]), B(u.code), r !== e && (M(N), p && p(e));
     },
     [t, i, p]
   );
@@ -149,17 +149,14 @@ const Re = ee.forwardRef(function({
     A,
     {
       ref: q,
-      className: y(a["phone-number-input"], "phone-number-input"),
+      className: l(h["phone-number-input"], "phone-number-input"),
       height: "auto",
       ...W,
       children: [
         /* @__PURE__ */ c(
           pe,
           {
-            className: y(
-              a["phone-number-input-select"],
-              "phone-number-input-select"
-            ),
+            className: l(h["phone-number-input-select"], "phone-number-input-select"),
             ref: g,
             width: "auto",
             value: U,
@@ -169,17 +166,17 @@ const Re = ee.forwardRef(function({
             children: G
           }
         ),
-        /* @__PURE__ */ c(A, { width: "flex", className: a["phone-number-input-container"], children: /* @__PURE__ */ c(
+        /* @__PURE__ */ c(A, { width: "flex", className: l(h["phone-number-input-container"]), children: /* @__PURE__ */ c(
           se,
           {
             ref: m,
-            value: b,
+            value: d,
             mask: D,
             onChange: K,
             disabled: s,
             "data-is-disabled": s,
             "data-has-phone-book": F,
-            className: y(a["phone-number-input"], "phone-number-input"),
+            className: l(h["phone-number-input"], "phone-number-input"),
             preparePasteValue: Y
           }
         ) }),
@@ -188,8 +185,8 @@ const Re = ee.forwardRef(function({
             ue,
             {
               disabled: s,
-              className: y(
-                a["phone-number-input-phone-book"],
+              className: l(
+                h["phone-number-input-phone-book"],
                 "phone-number-input-phone-book"
               ),
               onClick: Q,

package/dist/inputs/phone_number_input/phone_number_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"phone_number_input.js","sources":["../../../src/inputs/phone_number_input/phone_number_input.tsx"],"sourcesContent":["import { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport classNames from 'classnames';\nimport React, {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  Children,\n  isValidElement,\n} from 'react';\nimport { SlimButton } from '../../actions/index.js';\nimport { Select } from '../select/select.js';\nimport { MaskInput } from '../mask_input/mask_input.js';\nimport {\n  CountryPhoneInformation,\n  countriesPhoneInformation,\n} from './countries_phone_information.js';\nimport styles from './phone_number_input.module.css';\nimport { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport { Option, OptionProps } from '../options/option.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { stripNonNumericAfterCountryCode } from './utils.js';\n\nconst countryList = countriesPhoneInformation.map(i => ({\n  name: i.name,\n  selectedLabel: i.prefix,\n  optionLabel: `${i.prefix} (${i.code}) ${i.unicodeFlag}`,\n  value: i.code,\n  keywords: i.keywords,\n}));\n\ncountryList.sort((a, b) => parseInt(a.value) - parseInt(b.value));\n\nconst countryPrefixMap: Map<string, CountryPhoneInformation[]> = new Map();\nconst countryCodeMap: Map<string, CountryPhoneInformation> = new Map();\ncountriesPhoneInformation.forEach(i => {\n  countryCodeMap.set(i.code, i);\n  if (countryPrefixMap.has(i.prefix)) {\n    countryPrefixMap.get(i.prefix)?.push(i);\n  } else {\n    countryPrefixMap.set(i.prefix, [i]);\n  }\n});\n\nfunction createCountryOptions(allowedCountryCodes?: string[]) {\n  if (allowedCountryCodes != null) {\n    const allowedMap: Record<string, boolean> = {};\n    allowedCountryCodes.forEach(c => {\n      allowedMap[c] = true;\n    });\n    return countryList\n      .filter(c => Boolean(allowedMap[c.value]))\n      .map(i => {\n        return (\n          <Option\n            key={i.value}\n            value={i.value}\n            label={i.selectedLabel}\n            keywords={i.keywords}\n          >\n            {i.optionLabel}\n          </Option>\n        );\n      });\n  } else {\n    return countryList.map(i => {\n      return (\n        <Option\n          key={i.value}\n          value={i.value}\n          label={i.selectedLabel}\n          keywords={i.keywords}\n        >\n          {i.optionLabel}\n        </Option>\n      );\n    });\n  }\n}\n\nfunction getCountryCodeFromValue(\n  value: string,\n  previousCountry: string,\n  defaultCountry: string\n) {\n  for (let x = 5; x > 1; x--) {\n    const prefix = value.slice(0, x);\n    const countriesInformation = countryPrefixMap.get(prefix);\n\n    if (countriesInformation != null) {\n      const countryInformation = countriesInformation.find(\n        c => c.code === previousCountry\n      );\n\n      if (countryInformation != null) {\n        return countryInformation;\n      } else {\n        return countriesInformation[0];\n      }\n    }\n  }\n\n  return (countryCodeMap.get(defaultCountry.toUpperCase()) ||\n    countryCodeMap.get('US')) as CountryPhoneInformation;\n}\n\nexport interface PhoneNumberInputProps\n  extends Omit<HStackProps, 'onChange' | 'children'> {\n  value?: string;\n  defaultCountry?: string;\n  onChange?: (value: string) => void;\n  countrySelectRef?: React.Ref<HTMLButtonElement>;\n  phoneNumberInputRef?: React.Ref<HTMLInputElement>;\n  disabled?: boolean;\n  allowedCountryCodes?: string[];\n  children?: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];\n}\n\nexport const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(\n  {\n    value = '',\n    defaultCountry = 'US',\n    onChange,\n    countrySelectRef: countryRef,\n    phoneNumberInputRef: numberRef,\n    disabled = false,\n    allowedCountryCodes,\n    children,\n    ...props\n  }: PhoneNumberInputProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const lastOutputValueRef = useRef(value);\n  const [phoneBookElement, setPhoneBookElement] = useState<HTMLButtonElement | null>(\n    null\n  );\n  const isPhoneBookOpen = phoneBookElement != null;\n  const [selectedCountry, setSelectedCountry] = useState(defaultCountry);\n  const countryInformation = getCountryCodeFromValue(\n    value,\n    selectedCountry,\n    defaultCountry\n  );\n  const [phoneNumber, setPhoneNumber] = useState(() => {\n    const phoneNumber = value.split(countryInformation.prefix)[1];\n\n    return phoneNumber == null ? '' : stripNonNumericAfterCountryCode(phoneNumber);\n  });\n\n  // Extract valid Option components from children\n  const phoneBookOptions = useMemo(() => {\n    return Children.toArray(children).filter(\n      (child): child is React.ReactElement<OptionProps> =>\n        isValidElement(child) && child.type === Option\n    );\n  }, [children]);\n\n  const showPhoneBook = phoneBookOptions.length > 0;\n  const [countryCode, setCountryCode] = useState(countryInformation.code);\n  const [currentMasks, setCurrentMasks] = useState([\n    ...countriesPhoneInformation[0].masks,\n  ]);\n\n  const countryOptions = useMemo(() => {\n    return createCountryOptions(allowedCountryCodes);\n  }, [allowedCountryCodes]);\n\n  function changeCountry(countryCodeValue: string) {\n    const countryInformation = countryCodeMap.get(countryCodeValue);\n\n    if (countryInformation == null) {\n      return;\n    }\n\n    setCountryCode(countryInformation.code);\n    setCurrentMasks([...countryInformation.masks]);\n    setSelectedCountry(countryInformation.code);\n\n    if (phoneNumber == null) {\n      return;\n    }\n\n    const value = `${countryInformation.prefix}${stripNonNumericAfterCountryCode(phoneNumber)}`;\n    lastOutputValueRef.current = value;\n    onChange && onChange(value);\n  }\n\n  useLayoutEffect(() => {\n    const countryInformation = getCountryCodeFromValue(\n      value,\n      selectedCountry,\n      defaultCountry\n    );\n    setCountryCode(countryInformation.code);\n    setCurrentMasks([...countryInformation.masks]);\n    setSelectedCountry(countryInformation.code);\n  }, [value, selectedCountry, defaultCountry]);\n\n  function transformValue(newPhoneNumber: string) {\n    const countryPrefix = countryCodeMap.get(countryCode)?.prefix;\n    const lineNumber = stripNonNumericAfterCountryCode(newPhoneNumber);\n    const outputValue = countryPrefix + lineNumber;\n\n    lastOutputValueRef.current = outputValue;\n    phoneNumber !== newPhoneNumber && setPhoneNumber(newPhoneNumber);\n    onChange && onChange(outputValue);\n  }\n\n  function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n    if (isPhoneBookOpen) {\n      setPhoneBookElement(null);\n    } else {\n      setPhoneBookElement(e.currentTarget);\n    }\n  }\n\n  function closePhoneBook() {\n    setPhoneBookElement(null);\n  }\n\n  function handlePhoneBookOptionSelect(value: string) {\n    // Update the phone number with the selected value\n    updatePhoneNumber(value);\n    closePhoneBook();\n  }\n\n  function preparePasteValue(value: string) {\n    if (value.startsWith('+')) {\n      const countryInformation = getCountryCodeFromValue(\n        value,\n        selectedCountry,\n        defaultCountry\n      );\n      setCountryCode(countryInformation.code);\n      setCurrentMasks([...countryInformation.masks]);\n\n      const phoneNumber = value.split(countryInformation.prefix)[1];\n      setPhoneNumber(phoneNumber);\n\n      return phoneNumber;\n    }\n\n    return value;\n  }\n\n  const updatePhoneNumber = useCallback(\n    (value: string) => {\n      const oldValue = lastOutputValueRef.current;\n      const countryInformation = getCountryCodeFromValue(\n        value,\n        selectedCountry,\n        defaultCountry\n      );\n      const phoneNumber = value.split(countryInformation.prefix)[1];\n      setCountryCode(countryInformation.code);\n      setCurrentMasks([...countryInformation.masks]);\n      setSelectedCountry(countryInformation.code);\n\n      if (oldValue !== value) {\n        setPhoneNumber(phoneNumber);\n        onChange && onChange(value);\n      }\n    },\n    [defaultCountry, selectedCountry, onChange]\n  );\n\n  useLayoutEffect(() => {\n    updatePhoneNumber(value);\n  }, [value, updatePhoneNumber]);\n\n  return (\n    <HStack\n      ref={ref}\n      className={classNames(styles['phone-number-input'], 'phone-number-input')}\n      height=\"auto\"\n      {...props}\n    >\n      <Select\n        className={classNames(\n          styles['phone-number-input-select'],\n          'phone-number-input-select'\n        )}\n        ref={countryRef}\n        width=\"auto\"\n        value={countryCode}\n        onChange={changeCountry}\n        disabled={disabled}\n        data-is-disabled={disabled}\n      >\n        {countryOptions}\n      </Select>\n      <HStack width=\"flex\" className={styles['phone-number-input-container']}>\n        <MaskInput\n          ref={numberRef}\n          value={phoneNumber}\n          mask={currentMasks}\n          onChange={transformValue}\n          disabled={disabled}\n          data-is-disabled={disabled}\n          data-has-phone-book={showPhoneBook}\n          className={classNames(styles['phone-number-input'], 'phone-number-input')}\n          preparePasteValue={preparePasteValue}\n        />\n      </HStack>\n      {showPhoneBook && (\n        <>\n          <SlimButton\n            disabled={disabled}\n            className={classNames(\n              styles['phone-number-input-phone-book'],\n              'phone-number-input-phone-book'\n            )}\n            onClick={togglePhoneBook}\n            size=\"md\"\n          >\n            <NotebookIcon size=\"md\" />\n          </SlimButton>\n\n          {isPhoneBookOpen && (\n            <SuggestionList\n              anchorElement={phoneBookElement}\n              onOptionSelect={handlePhoneBookOptionSelect}\n              onClose={closePhoneBook}\n              noSuggestionMessage=\"No phone numbers found\"\n            >\n              {phoneBookOptions}\n            </SuggestionList>\n          )}\n        </>\n      )}\n    </HStack>\n  );\n});\n"],"names":["countryList","countriesPhoneInformation","i","a","b","countryPrefixMap","countryCodeMap","createCountryOptions","allowedCountryCodes","allowedMap","c","jsx","Option","getCountryCodeFromValue","value","previousCountry","defaultCountry","x","prefix","countriesInformation","countryInformation","PhoneNumberInput","React","onChange","countryRef","numberRef","disabled","children","props","ref","lastOutputValueRef","useRef","phoneBookElement","setPhoneBookElement","useState","isPhoneBookOpen","selectedCountry","setSelectedCountry","phoneNumber","setPhoneNumber","stripNonNumericAfterCountryCode","phoneBookOptions","useMemo","Children","child","isValidElement","showPhoneBook","countryCode","setCountryCode","currentMasks","setCurrentMasks","countryOptions","changeCountry","countryCodeValue","useLayoutEffect","transformValue","newPhoneNumber","countryPrefix","lineNumber","outputValue","togglePhoneBook","closePhoneBook","handlePhoneBookOptionSelect","updatePhoneNumber","preparePasteValue","useCallback","oldValue","jsxs","HStack","classNames","styles","Select","MaskInput","Fragment","SlimButton","NotebookIcon","SuggestionList"],"mappings":"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"}
+{"version":3,"file":"phone_number_input.js","sources":["../../../src/inputs/phone_number_input/phone_number_input.tsx"],"sourcesContent":["import { HStack, type HStackProps } from '../../stacks/h_stack.js';\nimport { clsx } from 'clsx';\nimport React, {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n  Children,\n  isValidElement,\n} from 'react';\nimport { SlimButton } from '../../actions/index.js';\nimport { Select } from '../select/select.js';\nimport { MaskInput } from '../mask_input/mask_input.js';\nimport {\n  CountryPhoneInformation,\n  countriesPhoneInformation,\n} from './countries_phone_information.js';\nimport styles from './phone_number_input.module.css';\nimport { NotebookIcon } from '@tcn/icons/notebook_icon.js';\nimport { Option, OptionProps } from '../options/option.js';\nimport { SuggestionList } from '../suggestions/suggestion_list.js';\nimport { stripNonNumericAfterCountryCode } from './utils.js';\n\nconst countryList = countriesPhoneInformation.map(i => ({\n  name: i.name,\n  selectedLabel: i.prefix,\n  optionLabel: `${i.prefix} (${i.code}) ${i.unicodeFlag}`,\n  value: i.code,\n  keywords: i.keywords,\n}));\n\ncountryList.sort((a, b) => parseInt(a.value) - parseInt(b.value));\n\nconst countryPrefixMap: Map<string, CountryPhoneInformation[]> = new Map();\nconst countryCodeMap: Map<string, CountryPhoneInformation> = new Map();\ncountriesPhoneInformation.forEach(i => {\n  countryCodeMap.set(i.code, i);\n  if (countryPrefixMap.has(i.prefix)) {\n    countryPrefixMap.get(i.prefix)?.push(i);\n  } else {\n    countryPrefixMap.set(i.prefix, [i]);\n  }\n});\n\nfunction createCountryOptions(allowedCountryCodes?: string[]) {\n  if (allowedCountryCodes != null) {\n    const allowedMap: Record<string, boolean> = {};\n    allowedCountryCodes.forEach(c => {\n      allowedMap[c] = true;\n    });\n    return countryList\n      .filter(c => Boolean(allowedMap[c.value]))\n      .map(i => {\n        return (\n          <Option\n            key={i.value}\n            value={i.value}\n            label={i.selectedLabel}\n            keywords={i.keywords}\n          >\n            {i.optionLabel}\n          </Option>\n        );\n      });\n  } else {\n    return countryList.map(i => {\n      return (\n        <Option\n          key={i.value}\n          value={i.value}\n          label={i.selectedLabel}\n          keywords={i.keywords}\n        >\n          {i.optionLabel}\n        </Option>\n      );\n    });\n  }\n}\n\nfunction getCountryCodeFromValue(\n  value: string,\n  previousCountry: string,\n  defaultCountry: string\n) {\n  for (let x = 5; x > 1; x--) {\n    const prefix = value.slice(0, x);\n    const countriesInformation = countryPrefixMap.get(prefix);\n\n    if (countriesInformation != null) {\n      const countryInformation = countriesInformation.find(\n        c => c.code === previousCountry\n      );\n\n      if (countryInformation != null) {\n        return countryInformation;\n      } else {\n        return countriesInformation[0];\n      }\n    }\n  }\n\n  return (countryCodeMap.get(defaultCountry.toUpperCase()) ||\n    countryCodeMap.get('US')) as CountryPhoneInformation;\n}\n\nexport interface PhoneNumberInputProps\n  extends Omit<HStackProps, 'onChange' | 'children'> {\n  value?: string;\n  defaultCountry?: string;\n  onChange?: (value: string) => void;\n  countrySelectRef?: React.Ref<HTMLButtonElement>;\n  phoneNumberInputRef?: React.Ref<HTMLInputElement>;\n  disabled?: boolean;\n  allowedCountryCodes?: string[];\n  children?: React.ReactElement<OptionProps> | React.ReactElement<OptionProps>[];\n}\n\nexport const PhoneNumberInput = React.forwardRef(function PhoneNumberInput(\n  {\n    value = '',\n    defaultCountry = 'US',\n    onChange,\n    countrySelectRef: countryRef,\n    phoneNumberInputRef: numberRef,\n    disabled = false,\n    allowedCountryCodes,\n    children,\n    ...props\n  }: PhoneNumberInputProps,\n  ref: React.Ref<HTMLElement>\n) {\n  const lastOutputValueRef = useRef(value);\n  const [phoneBookElement, setPhoneBookElement] = useState<HTMLButtonElement | null>(\n    null\n  );\n  const isPhoneBookOpen = phoneBookElement != null;\n  const [selectedCountry, setSelectedCountry] = useState(defaultCountry);\n  const countryInformation = getCountryCodeFromValue(\n    value,\n    selectedCountry,\n    defaultCountry\n  );\n  const [phoneNumber, setPhoneNumber] = useState(() => {\n    const phoneNumber = value.split(countryInformation.prefix)[1];\n\n    return phoneNumber == null ? '' : stripNonNumericAfterCountryCode(phoneNumber);\n  });\n\n  // Extract valid Option components from children\n  const phoneBookOptions = useMemo(() => {\n    return Children.toArray(children).filter(\n      (child): child is React.ReactElement<OptionProps> =>\n        isValidElement(child) && child.type === Option\n    );\n  }, [children]);\n\n  const showPhoneBook = phoneBookOptions.length > 0;\n  const [countryCode, setCountryCode] = useState(countryInformation.code);\n  const [currentMasks, setCurrentMasks] = useState([\n    ...countriesPhoneInformation[0].masks,\n  ]);\n\n  const countryOptions = useMemo(() => {\n    return createCountryOptions(allowedCountryCodes);\n  }, [allowedCountryCodes]);\n\n  function changeCountry(countryCodeValue: string) {\n    const countryInformation = countryCodeMap.get(countryCodeValue);\n\n    if (countryInformation == null) {\n      return;\n    }\n\n    setCountryCode(countryInformation.code);\n    setCurrentMasks([...countryInformation.masks]);\n    setSelectedCountry(countryInformation.code);\n\n    if (phoneNumber == null) {\n      return;\n    }\n\n    const value = `${countryInformation.prefix}${stripNonNumericAfterCountryCode(phoneNumber)}`;\n    lastOutputValueRef.current = value;\n    onChange && onChange(value);\n  }\n\n  useLayoutEffect(() => {\n    const countryInformation = getCountryCodeFromValue(\n      value,\n      selectedCountry,\n      defaultCountry\n    );\n    setCountryCode(countryInformation.code);\n    setCurrentMasks([...countryInformation.masks]);\n    setSelectedCountry(countryInformation.code);\n  }, [value, selectedCountry, defaultCountry]);\n\n  function transformValue(newPhoneNumber: string) {\n    const countryPrefix = countryCodeMap.get(countryCode)?.prefix;\n    const lineNumber = stripNonNumericAfterCountryCode(newPhoneNumber);\n    const outputValue = countryPrefix + lineNumber;\n\n    lastOutputValueRef.current = outputValue;\n    phoneNumber !== newPhoneNumber && setPhoneNumber(newPhoneNumber);\n    onChange && onChange(outputValue);\n  }\n\n  function togglePhoneBook(e: React.MouseEvent<HTMLButtonElement>) {\n    if (isPhoneBookOpen) {\n      setPhoneBookElement(null);\n    } else {\n      setPhoneBookElement(e.currentTarget);\n    }\n  }\n\n  function closePhoneBook() {\n    setPhoneBookElement(null);\n  }\n\n  function handlePhoneBookOptionSelect(value: string) {\n    // Update the phone number with the selected value\n    updatePhoneNumber(value);\n    closePhoneBook();\n  }\n\n  function preparePasteValue(value: string) {\n    if (value.startsWith('+')) {\n      const countryInformation = getCountryCodeFromValue(\n        value,\n        selectedCountry,\n        defaultCountry\n      );\n      setCountryCode(countryInformation.code);\n      setCurrentMasks([...countryInformation.masks]);\n\n      const phoneNumber = value.split(countryInformation.prefix)[1];\n      setPhoneNumber(phoneNumber);\n\n      return phoneNumber;\n    }\n\n    return value;\n  }\n\n  const updatePhoneNumber = useCallback(\n    (value: string) => {\n      const oldValue = lastOutputValueRef.current;\n      const countryInformation = getCountryCodeFromValue(\n        value,\n        selectedCountry,\n        defaultCountry\n      );\n      const phoneNumber = value.split(countryInformation.prefix)[1];\n      setCountryCode(countryInformation.code);\n      setCurrentMasks([...countryInformation.masks]);\n      setSelectedCountry(countryInformation.code);\n\n      if (oldValue !== value) {\n        setPhoneNumber(phoneNumber);\n        onChange && onChange(value);\n      }\n    },\n    [defaultCountry, selectedCountry, onChange]\n  );\n\n  useLayoutEffect(() => {\n    updatePhoneNumber(value);\n  }, [value, updatePhoneNumber]);\n\n  return (\n    <HStack\n      ref={ref}\n      className={clsx(styles['phone-number-input'], 'phone-number-input')}\n      height=\"auto\"\n      {...props}\n    >\n      <Select\n        className={clsx(styles['phone-number-input-select'], 'phone-number-input-select')}\n        ref={countryRef}\n        width=\"auto\"\n        value={countryCode}\n        onChange={changeCountry}\n        disabled={disabled}\n        data-is-disabled={disabled}\n      >\n        {countryOptions}\n      </Select>\n      <HStack width=\"flex\" className={clsx(styles['phone-number-input-container'])}>\n        <MaskInput\n          ref={numberRef}\n          value={phoneNumber}\n          mask={currentMasks}\n          onChange={transformValue}\n          disabled={disabled}\n          data-is-disabled={disabled}\n          data-has-phone-book={showPhoneBook}\n          className={clsx(styles['phone-number-input'], 'phone-number-input')}\n          preparePasteValue={preparePasteValue}\n        />\n      </HStack>\n      {showPhoneBook && (\n        <>\n          <SlimButton\n            disabled={disabled}\n            className={clsx(\n              styles['phone-number-input-phone-book'],\n              'phone-number-input-phone-book'\n            )}\n            onClick={togglePhoneBook}\n            size=\"md\"\n          >\n            <NotebookIcon size=\"md\" />\n          </SlimButton>\n\n          {isPhoneBookOpen && (\n            <SuggestionList\n              anchorElement={phoneBookElement}\n              onOptionSelect={handlePhoneBookOptionSelect}\n              onClose={closePhoneBook}\n              noSuggestionMessage=\"No phone numbers found\"\n            >\n              {phoneBookOptions}\n            </SuggestionList>\n          )}\n        </>\n      )}\n    </HStack>\n  );\n});\n"],"names":["countryList","countriesPhoneInformation","i","a","b","countryPrefixMap","countryCodeMap","createCountryOptions","allowedCountryCodes","allowedMap","c","jsx","Option","getCountryCodeFromValue","value","previousCountry","defaultCountry","x","prefix","countriesInformation","countryInformation","PhoneNumberInput","React","onChange","countryRef","numberRef","disabled","children","props","ref","lastOutputValueRef","useRef","phoneBookElement","setPhoneBookElement","useState","isPhoneBookOpen","selectedCountry","setSelectedCountry","phoneNumber","setPhoneNumber","stripNonNumericAfterCountryCode","phoneBookOptions","useMemo","Children","child","isValidElement","showPhoneBook","countryCode","setCountryCode","currentMasks","setCurrentMasks","countryOptions","changeCountry","countryCodeValue","useLayoutEffect","transformValue","newPhoneNumber","countryPrefix","lineNumber","outputValue","togglePhoneBook","closePhoneBook","handlePhoneBookOptionSelect","updatePhoneNumber","preparePasteValue","useCallback","oldValue","jsxs","HStack","clsx","styles","Select","MaskInput","Fragment","SlimButton","NotebookIcon","SuggestionList"],"mappings":"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"}