@tcn/ui 0.3.0 → 0.3.2

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

@@ -1 +1 @@
-{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAMvD,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAK1D,MAAM,WAAW,gBACf,SAAQ,IAAI,CACV,WAAW,EACX,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,CACzE;IACD,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,GACrC,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,yGA2GtB,CAAC"}
+{"version":3,"file":"multiselect.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAC;AAMvD,OAAO,EAAU,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAM1D,MAAM,WAAW,gBACf,SAAQ,IAAI,CACV,WAAW,EACX,UAAU,GAAG,OAAO,GAAG,UAAU,GAAG,WAAW,GAAG,QAAQ,GAAG,WAAW,CACzE;IACD,QAAQ,EACJ,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,GACrC,KAAK,CAAC,YAAY,CAAC,iBAAiB,CAAC,EAAE,CAAC;IAC5C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,yGA2GtB,CAAC"}

package/dist/inputs/multiselect/multiselect.js

@@ -1,21 +1,22 @@
-import { jsxs as v, Fragment as j, jsx as l } from "react/jsx-runtime";
-import A, { useRef as V, useLayoutEffect as q } from "react";
-import { Spacer as C } from "../../stacks/spacer.js";
-import { VStack as E } from "../../stacks/v_stack.js";
-import { MultiselectInlineValues as N } from "./multiselect_inline_values.js";
-import { MultiselectValues as _ } from "./multiselect_values.js";
+import { jsxs as v, Fragment as w, jsx as l } from "react/jsx-runtime";
+import A, { useRef as V, useLayoutEffect as j } from "react";
+import { Spacer as q } from "../../stacks/spacer.js";
+import { VStack as C } from "../../stacks/v_stack.js";
+import { MultiselectInlineValues as E } from "./multiselect_inline_values.js";
+import { MultiselectValues as N } from "./multiselect_values.js";
 import { makeAvailableOptions as g, makeValuesAsOptions as I } from "../options/utils.js";
-import { Select as S } from "../select/select.js";
+import { Select as x } from "../select/select.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import { useForkRef as L } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = { "multiselect-container": $ }, ee = A.forwardRef(function({
+import $ from "clsx";
+import '../../multiselect.css';const z = "_multiselect-container_009951a", B = { "multiselect-container": z }, le = A.forwardRef(function({
   value: e = [],
   disabled: o = !1,
-  children: x,
-  className: D,
+  children: S,
+  className: G,
   onChange: n,
   inline: y = !1,
   width: s = "100%",
@@ -24,9 +25,9 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
   ...a
 }, m) {
   const r = V(null), F = L(m, r), c = e[e.length - 1] || null, O = V(null), f = A.Children.toArray(
-    x
+    S
   ), p = g(f, e), d = I(f, e);
-  q(() => {
+  j(() => {
     const t = O.current;
     c != null && t != null && (t.querySelector(`[data-value='${c}']`)?.focus(), requestAnimationFrame(() => {
       r.current && r.current.focus();
@@ -37,13 +38,13 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
   }
   function R(t) {
     if (e.indexOf(t.props.value) > -1) {
-      const M = e.filter((w) => w !== t.props.value);
+      const M = e.filter((_) => _ !== t.props.value);
       n && n(M);
     }
   }
-  return y ? /* @__PURE__ */ v(j, { children: [
+  return y ? /* @__PURE__ */ v(w, { children: [
     /* @__PURE__ */ l(
-      S,
+      x,
       {
         ref: F,
         disabled: o,
@@ -55,9 +56,9 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
         children: p
       }
     ),
-    /* @__PURE__ */ l(C, { width: "8px" }),
+    /* @__PURE__ */ l(q, { width: "8px" }),
     /* @__PURE__ */ l(
-      N,
+      E,
       {
         values: d,
         onRemove: R,
@@ -65,15 +66,15 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
       }
     )
   ] }) : /* @__PURE__ */ v(
-    E,
+    C,
     {
       width: s,
       minWidth: i,
       maxWidth: u,
-      className: z["multiselect-container"],
+      className: $(B["multiselect-container"], "tcn-multiselect-container"),
       children: [
         /* @__PURE__ */ l(
-          S,
+          x,
           {
             ref: m,
             disabled: o,
@@ -88,7 +89,7 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
           }
         ),
         /* @__PURE__ */ l(
-          _,
+          N,
           {
             disabled: o,
             values: d,
@@ -100,6 +101,6 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
   );
 });
 export {
-  ee as Multiselect
+  le as Multiselect
 };
 //# sourceMappingURL=multiselect.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"multiselect.js","sources":["../../../src/inputs/multiselect/multiselect.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from 'react';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { MultiselectInlineValues } from './multiselect_inline_values.js';\nimport { MultiselectValues } from './multiselect_values.js';\nimport { makeAvailableOptions, makeValuesAsOptions } from '../options/utils.js';\nimport { Select, SelectProps } from '../select/select.js';\nimport { OptionProps } from '../options/option.js';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from './multiselect.module.css';\n\nexport interface MultiselectProps\n  extends Omit<\n    SelectProps,\n    'onChange' | 'value' | 'children' | 'minHeight' | 'height' | 'maxHeight'\n  > {\n  children:\n    | React.ReactElement<HTMLOptionElement>\n    | React.ReactElement<HTMLOptionElement>[];\n  onChange?: (values: string[]) => void;\n  value?: string[];\n  disabled?: boolean;\n  inline?: boolean;\n}\n\nexport const Multiselect = React.forwardRef(function Multiselect(\n  {\n    value: values = [],\n    disabled = false,\n    children,\n    className,\n    onChange,\n    inline = false,\n    width = '100%',\n    minWidth,\n    maxWidth,\n    ...props\n  }: MultiselectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const internalSelectRef = useRef<HTMLButtonElement | null>(null);\n  const selectRef = useForkRef(ref, internalSelectRef);\n  const lastValue = values[values.length - 1] || null;\n  const valuesContainerRef = useRef<HTMLDivElement | null>(null);\n  const childrenArray = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n\n  const availableOptions = makeAvailableOptions(childrenArray, values);\n  const valuesAsOptions = makeValuesAsOptions(childrenArray, values);\n\n  useLayoutEffect(() => {\n    const valuesElement = valuesContainerRef.current;\n    const shouldFocus = lastValue != null && valuesElement != null;\n    if (shouldFocus) {\n      (\n        valuesElement.querySelector(`[data-value='${lastValue}']`) as HTMLElement\n      )?.focus();\n\n      // Safari doesn't respect the first focus if its called too quickly\n      requestAnimationFrame(() => {\n        internalSelectRef.current && internalSelectRef.current.focus();\n      });\n    }\n  }, [lastValue]);\n\n  function addValue(value: string) {\n    if (!values.includes(value)) {\n      onChange && onChange([...values, value]);\n    }\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  if (inline) {\n    return (\n      <>\n        <Select\n          ref={selectRef}\n          disabled={disabled}\n          onChange={addValue}\n          width=\"auto\"\n          value={null}\n          placeholder=\"Select to Add\"\n          {...props}\n        >\n          {availableOptions}\n        </Select>\n        <Spacer width=\"8px\" />\n        <MultiselectInlineValues\n          values={valuesAsOptions}\n          onRemove={removeValue}\n          disabled={disabled}\n        />\n      </>\n    );\n  }\n\n  return (\n    <VStack\n      width={width}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      className={styles['multiselect-container']}\n    >\n      <Select\n        ref={ref}\n        disabled={disabled}\n        onChange={addValue}\n        value={null}\n        placeholder=\"Select to Add\"\n        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        {...props}\n      >\n        {availableOptions}\n      </Select>\n      <MultiselectValues\n        disabled={disabled}\n        values={valuesAsOptions}\n        onRemove={removeValue}\n      />\n    </VStack>\n  );\n});\n"],"names":["Multiselect","React","values","disabled","children","className","onChange","inline","width","minWidth","maxWidth","props","ref","internalSelectRef","useRef","selectRef","useForkRef","lastValue","valuesContainerRef","childrenArray","availableOptions","makeAvailableOptions","valuesAsOptions","makeValuesAsOptions","useLayoutEffect","valuesElement","addValue","value","removeValue","option","newValues","v","jsxs","Fragment","jsx","Select","Spacer","MultiselectInlineValues","VStack","styles","MultiselectValues"],"mappings":";;;;;;;;;;;;;gFAyBaA,KAAcC,EAAM,WAAW,SAC1C;AAAA,EACE,OAAOC,IAAS,CAAA;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC,EAAiC,IAAI,GACzDC,IAAYC,EAAWJ,GAAKC,CAAiB,GAC7CI,IAAYf,EAAOA,EAAO,SAAS,CAAC,KAAK,MACzCgB,IAAqBJ,EAA8B,IAAI,GACvDK,IAAgBlB,EAAM,SAAS;AAAA,IACnCG;AAAA,EAAA,GAGIgB,IAAmBC,EAAqBF,GAAejB,CAAM,GAC7DoB,IAAkBC,EAAoBJ,GAAejB,CAAM;AAEjE,EAAAsB,EAAgB,MAAM;AACpB,UAAMC,IAAgBP,EAAmB;AAEzC,IADoBD,KAAa,QAAQQ,KAAiB,SAGtDA,EAAc,cAAc,gBAAgBR,CAAS,IAAI,GACxD,MAAA,GAGH,sBAAsB,MAAM;AAC1B,MAAAJ,EAAkB,WAAWA,EAAkB,QAAQ,MAAA;AAAA,IACzD,CAAC;AAAA,EAEL,GAAG,CAACI,CAAS,CAAC;AAEd,WAASS,EAASC,GAAe;AAC/B,IAAKzB,EAAO,SAASyB,CAAK,KACxBrB,KAAYA,EAAS,CAAC,GAAGJ,GAAQyB,CAAK,CAAC;AAAA,EAE3C;AAEA,WAASC,EAAYC,GAAyC;AAG5D,QAFc3B,EAAO,QAAQ2B,EAAO,MAAM,KAAK,IAEnC,IAAI;AACd,YAAMC,IAAY5B,EAAO,OAAO,OAAK6B,MAAMF,EAAO,MAAM,KAAK;AAC7D,MAAAvB,KAAYA,EAASwB,CAAS;AAAA,IAChC;AAAA,EACF;AAEA,SAAIvB,IAEA,gBAAAyB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,UAAAZ;AAAA,QACA,UAAUuB;AAAA,QACV,OAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAY;AAAA,QACX,GAAGf;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAc,EAACE,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,IACpB,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,QAAQf;AAAA,QACR,UAAUM;AAAA,QACV,UAAAzB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF,IAKF,gBAAA6B;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,OAAA9B;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAW6B,EAAO,uBAAuB;AAAA,MAEzC,UAAA;AAAA,QAAA,gBAAAL;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAvB;AAAA,YACA,UAAAT;AAAA,YACA,UAAUuB;AAAA,YACV,OAAO;AAAA,YACP,aAAY;AAAA,YACZ,OAAAlB;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACC,GAAGC;AAAA,YAEH,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,UAAArC;AAAA,YACA,QAAQmB;AAAA,YACR,UAAUM;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}
+{"version":3,"file":"multiselect.js","sources":["../../../src/inputs/multiselect/multiselect.tsx"],"sourcesContent":["import React, { useLayoutEffect, useRef } from 'react';\nimport { Spacer } from '../../stacks/spacer.js';\nimport { VStack } from '../../stacks/v_stack.js';\nimport { MultiselectInlineValues } from './multiselect_inline_values.js';\nimport { MultiselectValues } from './multiselect_values.js';\nimport { makeAvailableOptions, makeValuesAsOptions } from '../options/utils.js';\nimport { Select, SelectProps } from '../select/select.js';\nimport { OptionProps } from '../options/option.js';\nimport { useForkRef } from '../../utils/index.js';\nimport styles from './multiselect.module.css';\nimport clsx from 'clsx';\n\nexport interface MultiselectProps\n  extends Omit<\n    SelectProps,\n    'onChange' | 'value' | 'children' | 'minHeight' | 'height' | 'maxHeight'\n  > {\n  children:\n    | React.ReactElement<HTMLOptionElement>\n    | React.ReactElement<HTMLOptionElement>[];\n  onChange?: (values: string[]) => void;\n  value?: string[];\n  disabled?: boolean;\n  inline?: boolean;\n}\n\nexport const Multiselect = React.forwardRef(function Multiselect(\n  {\n    value: values = [],\n    disabled = false,\n    children,\n    className,\n    onChange,\n    inline = false,\n    width = '100%',\n    minWidth,\n    maxWidth,\n    ...props\n  }: MultiselectProps,\n  ref: React.Ref<HTMLButtonElement>\n) {\n  const internalSelectRef = useRef<HTMLButtonElement | null>(null);\n  const selectRef = useForkRef(ref, internalSelectRef);\n  const lastValue = values[values.length - 1] || null;\n  const valuesContainerRef = useRef<HTMLDivElement | null>(null);\n  const childrenArray = React.Children.toArray(\n    children\n  ) as React.ReactElement<OptionProps>[];\n\n  const availableOptions = makeAvailableOptions(childrenArray, values);\n  const valuesAsOptions = makeValuesAsOptions(childrenArray, values);\n\n  useLayoutEffect(() => {\n    const valuesElement = valuesContainerRef.current;\n    const shouldFocus = lastValue != null && valuesElement != null;\n    if (shouldFocus) {\n      (\n        valuesElement.querySelector(`[data-value='${lastValue}']`) as HTMLElement\n      )?.focus();\n\n      // Safari doesn't respect the first focus if its called too quickly\n      requestAnimationFrame(() => {\n        internalSelectRef.current && internalSelectRef.current.focus();\n      });\n    }\n  }, [lastValue]);\n\n  function addValue(value: string) {\n    if (!values.includes(value)) {\n      onChange && onChange([...values, value]);\n    }\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  if (inline) {\n    return (\n      <>\n        <Select\n          ref={selectRef}\n          disabled={disabled}\n          onChange={addValue}\n          width=\"auto\"\n          value={null}\n          placeholder=\"Select to Add\"\n          {...props}\n        >\n          {availableOptions}\n        </Select>\n        <Spacer width=\"8px\" />\n        <MultiselectInlineValues\n          values={valuesAsOptions}\n          onRemove={removeValue}\n          disabled={disabled}\n        />\n      </>\n    );\n  }\n\n  return (\n    <VStack\n      width={width}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      className={clsx(styles['multiselect-container'], 'tcn-multiselect-container')}\n    >\n      <Select\n        ref={ref}\n        disabled={disabled}\n        onChange={addValue}\n        value={null}\n        placeholder=\"Select to Add\"\n        width={width}\n        minWidth={minWidth}\n        maxWidth={maxWidth}\n        {...props}\n      >\n        {availableOptions}\n      </Select>\n      <MultiselectValues\n        disabled={disabled}\n        values={valuesAsOptions}\n        onRemove={removeValue}\n      />\n    </VStack>\n  );\n});\n"],"names":["Multiselect","React","values","disabled","children","className","onChange","inline","width","minWidth","maxWidth","props","ref","internalSelectRef","useRef","selectRef","useForkRef","lastValue","valuesContainerRef","childrenArray","availableOptions","makeAvailableOptions","valuesAsOptions","makeValuesAsOptions","useLayoutEffect","valuesElement","addValue","value","removeValue","option","newValues","v","jsxs","Fragment","jsx","Select","Spacer","MultiselectInlineValues","VStack","clsx","styles","MultiselectValues"],"mappings":";;;;;;;;;;;;;;gFA0BaA,KAAcC,EAAM,WAAW,SAC1C;AAAA,EACE,OAAOC,IAAS,CAAA;AAAA,EAChB,UAAAC,IAAW;AAAA,EACX,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAoBC,EAAiC,IAAI,GACzDC,IAAYC,EAAWJ,GAAKC,CAAiB,GAC7CI,IAAYf,EAAOA,EAAO,SAAS,CAAC,KAAK,MACzCgB,IAAqBJ,EAA8B,IAAI,GACvDK,IAAgBlB,EAAM,SAAS;AAAA,IACnCG;AAAA,EAAA,GAGIgB,IAAmBC,EAAqBF,GAAejB,CAAM,GAC7DoB,IAAkBC,EAAoBJ,GAAejB,CAAM;AAEjE,EAAAsB,EAAgB,MAAM;AACpB,UAAMC,IAAgBP,EAAmB;AAEzC,IADoBD,KAAa,QAAQQ,KAAiB,SAGtDA,EAAc,cAAc,gBAAgBR,CAAS,IAAI,GACxD,MAAA,GAGH,sBAAsB,MAAM;AAC1B,MAAAJ,EAAkB,WAAWA,EAAkB,QAAQ,MAAA;AAAA,IACzD,CAAC;AAAA,EAEL,GAAG,CAACI,CAAS,CAAC;AAEd,WAASS,EAASC,GAAe;AAC/B,IAAKzB,EAAO,SAASyB,CAAK,KACxBrB,KAAYA,EAAS,CAAC,GAAGJ,GAAQyB,CAAK,CAAC;AAAA,EAE3C;AAEA,WAASC,EAAYC,GAAyC;AAG5D,QAFc3B,EAAO,QAAQ2B,EAAO,MAAM,KAAK,IAEnC,IAAI;AACd,YAAMC,IAAY5B,EAAO,OAAO,OAAK6B,MAAMF,EAAO,MAAM,KAAK;AAC7D,MAAAvB,KAAYA,EAASwB,CAAS;AAAA,IAChC;AAAA,EACF;AAEA,SAAIvB,IAEA,gBAAAyB,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,KAAKpB;AAAA,QACL,UAAAZ;AAAA,QACA,UAAUuB;AAAA,QACV,OAAM;AAAA,QACN,OAAO;AAAA,QACP,aAAY;AAAA,QACX,GAAGf;AAAA,QAEH,UAAAS;AAAA,MAAA;AAAA,IAAA;AAAA,IAEH,gBAAAc,EAACE,GAAA,EAAO,OAAM,MAAA,CAAM;AAAA,IACpB,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,QAAQf;AAAA,QACR,UAAUM;AAAA,QACV,UAAAzB;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF,IAKF,gBAAA6B;AAAA,IAACM;AAAA,IAAA;AAAA,MACC,OAAA9B;AAAA,MACA,UAAAC;AAAA,MACA,UAAAC;AAAA,MACA,WAAW6B,EAAKC,EAAO,uBAAuB,GAAG,2BAA2B;AAAA,MAE5E,UAAA;AAAA,QAAA,gBAAAN;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAvB;AAAA,YACA,UAAAT;AAAA,YACA,UAAUuB;AAAA,YACV,OAAO;AAAA,YACP,aAAY;AAAA,YACZ,OAAAlB;AAAA,YACA,UAAAC;AAAA,YACA,UAAAC;AAAA,YACC,GAAGC;AAAA,YAEH,UAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,QAEH,gBAAAc;AAAA,UAACO;AAAA,UAAA;AAAA,YACC,UAAAtC;AAAA,YACA,QAAQmB;AAAA,YACR,UAAUM;AAAA,UAAA;AAAA,QAAA;AAAA,MACZ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC;"}

package/dist/inputs/multiselect/multiselect_inline_values.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect_inline_values.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGnD,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,kDA+B9B"}
+{"version":3,"file":"multiselect_inline_values.d.ts","sourceRoot":"","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,WAAW,4BAA4B;IAC3C,MAAM,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,CAAC;IAC1C,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CAC5D;AAED,wBAAgB,uBAAuB,CAAC,EACtC,MAAM,EACN,QAAQ,EACR,QAAQ,GACT,EAAE,4BAA4B,kDA+B9B"}

package/dist/inputs/multiselect/multiselect_inline_values.js

@@ -1,38 +1,39 @@
-import { jsxs as p, jsx as r, Fragment as l } from "react/jsx-runtime";
-import { s as o } from "../../multiselect_values.module-BMJOyYHe.js";
+import { jsxs as p, jsx as r, Fragment as c } from "react/jsx-runtime";
+import { s as e } from "../../multiselect_values.module-BMJOyYHe.js";
 import { CrossIcon as a } from "@tcn/icons/cross_icon.js";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
-import { SlimButton as c } from "../../actions/button/slim_button/slim_button.js";
+import { SlimButton as h } from "../../actions/button/slim_button/slim_button.js";
 import "../../actions/button/button/button.js";
 import "../../actions/button/select_group/select_group.js";
 import "../../actions/button/select_group/single_select_group.js";
-import { Chip as h } from "../../tokens/chip/chip.js";
+import { Chip as u } from "../../tokens/chip/chip.js";
 import "../../tokens/badge/badge.js";
 import "../../tokens/bubble/bubble.js";
-function b({
-  values: e,
-  disabled: m,
-  onRemove: s
+import m from "clsx";
+function v({
+  values: o,
+  disabled: s,
+  onRemove: l
 }) {
-  const t = e.map((i, n) => /* @__PURE__ */ p(
-    h,
+  const t = o.map((i, n) => /* @__PURE__ */ p(
+    u,
     {
       hAlign: "start",
-      className: o.chip,
+      className: m(e.chip, "tcn-multiselect-chip"),
       paddingInlineStart: "8px",
       width: "auto",
       children: [
         /* @__PURE__ */ r("span", { children: i.props.label }),
         /* @__PURE__ */ r(
-          c,
+          h,
           {
-            disabled: m,
+            disabled: s,
             size: "sm",
             hierarchy: "tertiary",
-            className: o.remove,
+            className: m(e.remove, "tcn-multiselect-chip-remove"),
             onClick: () => {
-              s(i);
+              l(i);
             },
             children: /* @__PURE__ */ r(a, { size: "xs" })
           }
@@ -41,9 +42,9 @@ function b({
     },
     n
   ));
-  return t.length === 0 ? null : /* @__PURE__ */ r(l, { children: t });
+  return t.length === 0 ? null : /* @__PURE__ */ r(c, { children: t });
 }
 export {
-  b as MultiselectInlineValues
+  v as MultiselectInlineValues
 };
 //# sourceMappingURL=multiselect_inline_values.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { OptionProps } from '../options/option.js';\nimport { Chip } from '../../tokens/index.js';\n\nexport interface MultiselectInlineValuesProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n}\n\nexport function MultiselectInlineValues({\n  values,\n  disabled,\n  onRemove,\n}: MultiselectInlineValuesProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        className={styles.chip}\n        key={index}\n        paddingInlineStart=\"8px\"\n        width=\"auto\"\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 <>{items}</>;\n}\n"],"names":["MultiselectInlineValues","values","disabled","onRemove","items","v","index","jsxs","Chip","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;AAaO,SAASA,EAAwB;AAAA,EACtC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAiC;AAC/B,QAAMC,IAAQH,EAAO,IAAI,CAACI,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAO;AAAA,MAElB,oBAAmB;AAAA,MACnB,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAL,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAK;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAT;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWO,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,IAfKN;AAAA,EAAA,CAkBV;AAED,SAAIF,EAAM,WAAW,IACZ,8BAGC,UAAAA,EAAA,CAAM;AAClB;"}
+{"version":3,"file":"multiselect_inline_values.js","sources":["../../../src/inputs/multiselect/multiselect_inline_values.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './multiselect_values.module.css';\nimport { CrossIcon } from '@tcn/icons/cross_icon.js';\nimport { SlimButton } from '../../actions/index.js';\nimport { OptionProps } from '../options/option.js';\nimport { Chip } from '../../tokens/index.js';\nimport clsx from 'clsx';\n\nexport interface MultiselectInlineValuesProps {\n  values: React.ReactElement<OptionProps>[];\n  disabled: boolean;\n  onRemove: (value: React.ReactElement<OptionProps>) => void;\n}\n\nexport function MultiselectInlineValues({\n  values,\n  disabled,\n  onRemove,\n}: MultiselectInlineValuesProps) {\n  const items = values.map((v, index) => {\n    return (\n      <Chip\n        hAlign=\"start\"\n        className={clsx(styles.chip, 'tcn-multiselect-chip')}\n        key={index}\n        paddingInlineStart=\"8px\"\n        width=\"auto\"\n      >\n        <span>{v.props.label}</span>\n        <SlimButton\n          disabled={disabled}\n          size=\"sm\"\n          hierarchy=\"tertiary\"\n          className={clsx(styles.remove, 'tcn-multiselect-chip-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 <>{items}</>;\n}\n"],"names":["MultiselectInlineValues","values","disabled","onRemove","items","v","index","jsxs","Chip","clsx","styles","jsx","SlimButton","CrossIcon"],"mappings":";;;;;;;;;;;;;AAcO,SAASA,EAAwB;AAAA,EACtC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AACF,GAAiC;AAC/B,QAAMC,IAAQH,EAAO,IAAI,CAACI,GAAGC,MAEzB,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAO;AAAA,MACP,WAAWC,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MACnB,OAAM;AAAA,MAEN,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAV;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWO,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAfKP;AAAA,EAAA,CAkBV;AAED,SAAIF,EAAM,WAAW,IACZ,8BAGC,UAAAA,EAAA,CAAM;AAClB;"}

package/dist/inputs/multiselect/multiselect_values.js

@@ -1,7 +1,7 @@
-import { jsxs as p, jsx as r } from "react/jsx-runtime";
-import { clsx as a } from "clsx";
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { clsx as r } from "clsx";
 import { s as i } from "../../multiselect_values.module-BMJOyYHe.js";
-import { CrossIcon as c } from "@tcn/icons/cross_icon.js";
+import { CrossIcon as a } from "@tcn/icons/cross_icon.js";
 import "../../actions/button/base_button/base_button.js";
 import "../../actions/button/button_group/button_group.js";
 import { SlimButton as h } from "../../actions/button/slim_button/slim_button.js";
@@ -13,45 +13,45 @@ import "../../tokens/badge/badge.js";
 import "../../tokens/bubble/bubble.js";
 function k({
   values: s,
-  disabled: t,
-  className: m,
-  onRemove: l
+  disabled: e,
+  className: l,
+  onRemove: n
 }) {
-  const o = s.map((e, n) => /* @__PURE__ */ p(
+  const o = s.map((m, c) => /* @__PURE__ */ p(
     u,
     {
       hAlign: "start",
       color: "rgb(57, 85, 120)",
-      className: i.chip,
+      className: r(i.chip, "tcn-multiselect-chip"),
       paddingInlineStart: "8px",
       children: [
-        /* @__PURE__ */ r("span", { children: e.props.label }),
-        /* @__PURE__ */ r(
+        /* @__PURE__ */ t("span", { children: m.props.label }),
+        /* @__PURE__ */ t(
           h,
           {
-            disabled: t,
+            disabled: e,
             size: "sm",
             hierarchy: "tertiary",
-            className: i.remove,
+            className: r(i.remove, "tcn-multiselect-chip-remove"),
             onClick: () => {
-              l(e);
+              n(m);
             },
-            children: /* @__PURE__ */ r(c, { size: "xs" })
+            children: /* @__PURE__ */ t(a, { size: "xs" })
           }
         )
       ]
     },
-    n
+    c
   ));
-  return o.length === 0 ? null : /* @__PURE__ */ r(
+  return o.length === 0 ? null : /* @__PURE__ */ t(
     "div",
     {
-      className: a(
+      className: r(
         i["item-container"],
-        m,
-        "multiselect-values-container"
+        l,
+        "tcn-multiselect-values-container"
       ),
-      "data-is-disabled": t,
+      "data-is-disabled": 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 { 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;"}
+{"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={clsx(styles.chip, 'tcn-multiselect-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={clsx(styles.remove, 'tcn-multiselect-chip-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        'tcn-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","clsx","styles","jsx","SlimButton","CrossIcon"],"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,EAAKC,EAAO,MAAM,sBAAsB;AAAA,MAEnD,oBAAmB;AAAA,MAEnB,UAAA;AAAA,QAAA,gBAAAC,EAAC,QAAA,EAAM,UAAAN,EAAE,MAAM,OAAM;AAAA,QACrB,gBAAAM;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,UAAAX;AAAA,YACA,MAAK;AAAA,YACL,WAAU;AAAA,YACV,WAAWQ,EAAKC,EAAO,QAAQ,6BAA6B;AAAA,YAC5D,SAAS,MAAM;AACb,cAAAP,EAASE,CAAC;AAAA,YACZ;AAAA,YAEA,UAAA,gBAAAM,EAACE,GAAA,EAAU,MAAK,KAAA,CAAK;AAAA,UAAA;AAAA,QAAA;AAAA,MACvB;AAAA,IAAA;AAAA,IAdKP;AAAA,EAAA,CAiBV;AAED,SAAIF,EAAM,WAAW,IACZ,OAIP,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACTC,EAAO,gBAAgB;AAAA,QACvBR;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;AAiG3D,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,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,2FAwR3B,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;AAiG3D,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,UAAU,CAAC;IAClD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IACvD,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,2FAiS3B,CAAC"}

package/dist/inputs/phone_number_input/phone_number_input.js

@@ -14,37 +14,37 @@ import { countriesPhoneInformation as $ } from "./countries_phone_information.js
 import { NotebookIcon as Ie } from "@tcn/icons/notebook_icon.js";
 import { Option as F } from "../options/option.js";
 import { SuggestionList as Ne } from "../suggestions/suggestion_list.js";
-import { stripNonNumericAfterCountryCode as S } from "./utils.js";
+import { stripNonNumericAfterCountryCode as _ } from "./utils.js";
 import "../../utils/click_away_listener.js";
 import "../../utils/focus_redirect.js";
 import "../../utils/scroll_away_listener.js";
 import { useForkRef as ye } from "../../utils/hooks/use_fork_ref.js";
 import "../../utils/hooks/use_resize_observer.js";
-import '../../phone_number_input.css';const xe = "_phone-number-input_5c4483d", ge = "_phone-number-input-select_a7b33ac", Pe = "_phone-number-input-input_5b14556", Se = "_phone-number-input-phone-book-popover_1511f35", _e = "_phone-number-input-phone-book_7999ca1", Be = "_phone-number-input-obfuscated_5a0ed8c", f = { "phone-number-input": xe, "phone-number-input-select": ge, "phone-number-input-input": Pe, "phone-number-input-phone-book-popover": Se, "phone-number-input-phone-book": _e, "phone-number-input-obfuscated": Be }, Oe = "•";
-function Ve(o) {
-  return o.map((n) => ({
-    ...n,
-    placeholder: n.mask.replace(/[9a*]/g, Oe)
+import '../../phone_number_input.css';const xe = "_phone-number-input_5c4483d", ge = "_phone-number-input-select_a7b33ac", Pe = "_phone-number-input-input_5b14556", _e = "_phone-number-input-phone-book-popover_1511f35", Se = "_phone-number-input-phone-book_7999ca1", Be = "_phone-number-input-obfuscated_5a0ed8c", f = { "phone-number-input": xe, "phone-number-input-select": ge, "phone-number-input-input": Pe, "phone-number-input-phone-book-popover": _e, "phone-number-input-phone-book": Se, "phone-number-input-obfuscated": Be }, Oe = "•";
+function Ve(n) {
+  return n.map((o) => ({
+    ...o,
+    placeholder: o.mask.replace(/[9a*]/g, Oe)
   }));
 }
-const v = $.map((o) => ({
-  name: o.name,
-  selectedLabel: o.prefix,
-  optionLabel: `${o.prefix} (${o.code}) ${o.unicodeFlag}`,
-  value: o.code,
-  keywords: o.keywords
+const v = $.map((n) => ({
+  name: n.name,
+  selectedLabel: n.prefix,
+  optionLabel: `${n.prefix} (${n.code}) ${n.unicodeFlag}`,
+  value: n.code,
+  keywords: n.keywords
 }));
-v.sort((o, n) => parseInt(o.value) - parseInt(n.value));
+v.sort((n, o) => parseInt(n.value) - parseInt(o.value));
 const B = /* @__PURE__ */ new Map(), k = /* @__PURE__ */ new Map();
-$.forEach((o) => {
-  k.set(o.code, o), B.has(o.prefix) ? B.get(o.prefix)?.push(o) : B.set(o.prefix, [o]);
+$.forEach((n) => {
+  k.set(n.code, n), B.has(n.prefix) ? B.get(n.prefix)?.push(n) : B.set(n.prefix, [n]);
 });
-function Me(o) {
-  if (o != null) {
-    const n = {};
-    return o.forEach((r) => {
-      n[r] = !0;
-    }), v.filter((r) => !!n[r.value]).map((r) => /* @__PURE__ */ i(
+function Me(n) {
+  if (n != null) {
+    const o = {};
+    return n.forEach((r) => {
+      o[r] = !0;
+    }), v.filter((r) => !!o[r.value]).map((r) => /* @__PURE__ */ i(
       F,
       {
         value: r.value,
@@ -55,23 +55,23 @@ function Me(o) {
       r.value
     ));
   } else
-    return v.map((n) => /* @__PURE__ */ i(
+    return v.map((o) => /* @__PURE__ */ i(
       F,
       {
-        value: n.value,
-        label: n.selectedLabel,
-        keywords: n.keywords,
-        children: n.optionLabel
+        value: o.value,
+        label: o.selectedLabel,
+        keywords: o.keywords,
+        children: o.optionLabel
       },
-      n.value
+      o.value
     ));
 }
-function _(o, n, r) {
+function S(n, o, r) {
   for (let h = 5; h > 1; h--) {
-    const c = o.slice(0, h), u = B.get(c);
+    const c = n.slice(0, h), u = B.get(c);
     if (u != null) {
       const I = u.find(
-        (O) => O.code === n
+        (O) => O.code === o
       );
       return I ?? u[0];
     }
@@ -79,7 +79,7 @@ function _(o, n, r) {
   return k.get(r.toUpperCase()) || k.get("US");
 }
 const Ye = me.forwardRef(function({
-  value: n = "",
+  value: o = "",
   name: r,
   autoComplete: h,
   defaultCountry: c = "US",
@@ -89,17 +89,17 @@ const Ye = me.forwardRef(function({
   disabled: l = !1,
   allowedCountryCodes: U,
   children: T,
-  ...oe
-}, ne) {
-  const N = Y(n), [j, V] = m(
+  ...ne
+}, oe) {
+  const N = Y(o), [j, V] = m(
     null
-  ), z = j != null, [b, M] = m(c), H = _(
-    n,
+  ), z = j != null, [b, M] = m(c), H = S(
+    o,
     b,
     c
   ), [y, x] = m(() => {
-    const e = n.split(H.prefix)[1];
-    return e == null ? "" : S(e);
+    const e = o.split(H.prefix)[1];
+    return e == null ? "" : _(e);
   }), D = Z(() => fe.toArray(T).filter(
     (e) => he(e) && e.type === F
   ), [T]), R = D.length > 0, [C, g] = m(H.code), [W, P] = m([
@@ -109,19 +109,19 @@ const Ye = me.forwardRef(function({
     const t = k.get(e);
     if (t == null || (g(t.code), P([...t.masks]), M(t.code), y == null))
       return;
-    const p = `${t.prefix}${S(y)}`;
+    const p = `${t.prefix}${_(y)}`;
     N.current = p, u && u(p, !1);
   }
   A(() => {
-    const e = _(
-      n,
+    const e = S(
+      o,
       b,
       c
     );
     g(e.code), P([...e.masks]), M(e.code);
-  }, [n, b, c]);
+  }, [o, b, c]);
   function ue(e) {
-    const t = k.get(C)?.prefix, p = S(e), s = t + p;
+    const t = k.get(C)?.prefix, p = _(e), s = t + p;
     a && E(!1), N.current = s, y !== e && x(e), u && u(s, !1);
   }
   function se(e) {
@@ -135,7 +135,7 @@ const Ye = me.forwardRef(function({
   }
   function ce(e) {
     if (e.startsWith("+")) {
-      const t = _(
+      const t = S(
         e,
         b,
         c
@@ -148,12 +148,12 @@ const Ye = me.forwardRef(function({
   }
   function ae(e) {
     G(!0), E(!1), x(e);
-    const t = k.get(C)?.prefix, p = S(e), s = t + p;
+    const t = k.get(C)?.prefix, p = _(e), s = t + p;
     N.current = s, u && u(s, !1);
   }
   const w = be(
     (e, t = !1) => {
-      const p = N.current, s = _(
+      const p = N.current, s = S(
         e,
         b,
         c
@@ -163,21 +163,24 @@ const Ye = me.forwardRef(function({
     [c, b, u]
   );
   return A(() => {
-    w(n);
-  }, [n, w]), A(() => {
+    w(o);
+  }, [o, w]), A(() => {
     q && !a && L.current && (L.current.focus(), G(!1));
   }, [q, a]), /* @__PURE__ */ Q(
     X,
     {
-      ref: ne,
-      className: d(f["phone-number-input"], "phone-number-input"),
+      ref: oe,
+      className: d(f["phone-number-input"], "tcn-phone-number-input"),
       height: "auto",
-      ...oe,
+      ...ne,
       children: [
         /* @__PURE__ */ i(
           ke,
           {
-            className: d(f["phone-number-input-select"], "phone-number-input-select"),
+            className: d(
+              f["phone-number-input-select"],
+              "tcn-phone-number-input-select"
+            ),
             ref: I,
             width: "auto",
             value: a ? "" : C,
@@ -189,47 +192,57 @@ const Ye = me.forwardRef(function({
             children: te
           }
         ),
-        /* @__PURE__ */ i(X, { width: "flex", className: d(f["phone-number-input-container"]), children: a ? /* @__PURE__ */ i(
-          ee,
+        /* @__PURE__ */ i(
+          X,
           {
-            name: r,
-            autoComplete: h,
-            ref: J,
-            value: "",
-            mask: Ve(W),
-            onChange: ae,
-            disabled: l,
-            "data-is-disabled": l,
-            "data-has-phone-book": R,
-            "data-is-obfuscated": !0,
+            width: "flex",
             className: d(
-              f["phone-number-input"],
-              f["phone-number-input-obfuscated"],
-              "phone-number-input"
+              f["phone-number-input-container"],
+              "tcn-phone-number-input-container"
             ),
-            preparePasteValue: () => "",
-            prepareCopyValue: () => "",
-            prepareCutValue: () => ""
-          },
-          "obfuscated"
-        ) : /* @__PURE__ */ i(
-          ee,
-          {
-            name: r,
-            autoComplete: h,
-            ref: J,
-            value: y,
-            mask: W,
-            onChange: ue,
-            disabled: l,
-            "data-is-disabled": l,
-            "data-has-phone-book": R,
-            "data-is-obfuscated": !1,
-            className: d(f["phone-number-input"], "phone-number-input"),
-            preparePasteValue: ce
-          },
-          "normal"
-        ) }),
+            children: a ? /* @__PURE__ */ i(
+              ee,
+              {
+                name: r,
+                autoComplete: h,
+                ref: J,
+                value: "",
+                mask: Ve(W),
+                onChange: ae,
+                disabled: l,
+                "data-is-disabled": l,
+                "data-has-phone-book": R,
+                "data-is-obfuscated": !0,
+                className: d(
+                  f["phone-number-input"],
+                  f["phone-number-input-obfuscated"],
+                  "tcn-phone-number-input"
+                ),
+                preparePasteValue: () => "",
+                prepareCopyValue: () => "",
+                prepareCutValue: () => ""
+              },
+              "obfuscated"
+            ) : /* @__PURE__ */ i(
+              ee,
+              {
+                name: r,
+                autoComplete: h,
+                ref: J,
+                value: y,
+                mask: W,
+                onChange: ue,
+                disabled: l,
+                "data-is-disabled": l,
+                "data-has-phone-book": R,
+                "data-is-obfuscated": !1,
+                className: d(f["phone-number-input"], "tcn-phone-number-input"),
+                preparePasteValue: ce
+              },
+              "normal"
+            )
+          }
+        ),
         R && /* @__PURE__ */ Q(le, { children: [
           /* @__PURE__ */ i(
             de,
@@ -237,7 +250,7 @@ const Ye = me.forwardRef(function({
               disabled: l,
               className: d(
                 f["phone-number-input-phone-book"],
-                "phone-number-input-phone-book"
+                "tcn-phone-number-input-phone-book"
               ),
               onClick: se,
               size: "md",