@tcn/ui 0.3.1 → 0.3.2

package/dist/inputs/index.js

@@ -1,22 +1,22 @@
-import { Checkbox as e } from "./checkbox/checkbox.js";
+import { Checkbox as o } from "./checkbox/checkbox.js";
 import { ColorInput as p } from "./color_input/color_input.js";
-import { ColorPicker as x } from "./color_input/color_picker.js";
+import { ColorPicker as a } from "./color_input/color_picker.js";
 import { ComboBox as f } from "./combo_box/combo_box.js";
-import { DatePicker as c } from "./date_picker/date_picker.js";
+import { DatePicker as n } from "./date_picker/date_picker.js";
 import { DatePickerDay as u } from "./date_picker/date_picker_day.js";
 import { DatePickerBody as s } from "./date_picker/date_picker_body.js";
-import { DatePickerDate as k } from "./date_picker/date_picker_date.js";
+import { DatePickerDate as C } from "./date_picker/date_picker_date.js";
 import { DatePickerInput as P } from "./date_picker/date_picker_input.js";
 import { DatePickerHeader as D } from "./date_picker/date_picker_header.js";
-import { DatePickerPresenter as g } from "./date_picker/date_picker_presenter.js";
-import { Input as w } from "./input/input.js";
-import { AlphaCharacter as b } from "./mask_input/alpha_character.js";
-import { AlphaNumericCharacter as A } from "./mask_input/alpha_numeric_character.js";
-import { Character as B } from "./mask_input/character.js";
-import { ConstantCharacter as O } from "./mask_input/constant_character.js";
-import { KeyCaptureInput as L } from "./mask_input/key_capture_input.js";
-import { LanguageCharacter as v } from "./mask_input/language_character.js";
-import { Mask as K } from "./mask_input/mask.js";
+import { DatePickerPresenter as M } from "./date_picker/date_picker_presenter.js";
+import { Input as S } from "./input/input.js";
+import { AlphaCharacter as A } from "./mask_input/alpha_character.js";
+import { AlphaNumericCharacter as B } from "./mask_input/alpha_numeric_character.js";
+import { Character as O } from "./mask_input/character.js";
+import { ConstantCharacter as L } from "./mask_input/constant_character.js";
+import { KeyCaptureInput as v } from "./mask_input/key_capture_input.js";
+import { LanguageCharacter as H } from "./mask_input/language_character.js";
+import { Mask as T } from "./mask_input/mask.js";
 import { MaskInput as j } from "./mask_input/mask_input.js";
 import { MaskPresenter as z } from "./mask_input/mask_presenter.js";
 import { NumericCharacter as F } from "./mask_input/numeric_character.js";
@@ -24,67 +24,59 @@ import { RegexCharacter as J } from "./mask_input/regex_character.js";
 import { MultiComboBox as W } from "./multi_combo_box/multi_combo_box.js";
 import { Multiselect as Y } from "./multiselect/multiselect.js";
 import { MultiselectInlineValues as _ } from "./multiselect/multiselect_inline_values.js";
-import { MultiselectRow as rr } from "./multiselect/multiselect_row.js";
-import { MultiselectValues as er } from "./multiselect/multiselect_values.js";
-import { makeAvailableOptions as pr, makeValuesAsOptions as mr } from "./options/utils.js";
-import { Option as ar } from "./options/option.js";
-import { countriesPhoneInformation as ir } from "./phone_number_input/countries_phone_information.js";
-import { PhoneNumberInput as nr } from "./phone_number_input/phone_number_input.js";
-import { Radio as lr } from "./radio/radio.js";
-import { RadioRow as hr } from "./radio/radio_row.js";
-import { Select as Cr } from "./select/select.js";
-import { Slider as Ir } from "./slider/slider.js";
-import { SuggestionItem as Mr } from "./suggestions/suggestion_item.js";
-import { SuggestionList as Rr } from "./suggestions/suggestion_list.js";
-import { Switch as Sr } from "./switch/switch.js";
-import { SwitchRow as dr } from "./switch/switch_row.js";
-import { Textarea as yr } from "./textarea/textarea.js";
-import { TextareaRow as Nr } from "./textarea/textarea_row.js";
-import { UnitInput as Vr } from "./unit_input/unit_input.js";
+import { MultiselectValues as rr } from "./multiselect/multiselect_values.js";
+import { makeAvailableOptions as or, makeValuesAsOptions as tr } from "./options/utils.js";
+import { Option as mr } from "./options/option.js";
+import { countriesPhoneInformation as xr } from "./phone_number_input/countries_phone_information.js";
+import { PhoneNumberInput as ir } from "./phone_number_input/phone_number_input.js";
+import { Radio as cr } from "./radio/radio.js";
+import { Select as lr } from "./select/select.js";
+import { Slider as kr } from "./slider/slider.js";
+import { SuggestionItem as hr } from "./suggestions/suggestion_item.js";
+import { SuggestionList as Ir } from "./suggestions/suggestion_list.js";
+import { Switch as gr } from "./switch/switch.js";
+import { Textarea as br } from "./textarea/textarea.js";
+import { UnitInput as dr } from "./unit_input/unit_input.js";
 export {
-  b as AlphaCharacter,
-  A as AlphaNumericCharacter,
-  B as Character,
-  e as Checkbox,
+  A as AlphaCharacter,
+  B as AlphaNumericCharacter,
+  O as Character,
+  o as Checkbox,
   p as ColorInput,
-  x as ColorPicker,
+  a as ColorPicker,
   f as ComboBox,
-  O as ConstantCharacter,
-  c as DatePicker,
+  L as ConstantCharacter,
+  n as DatePicker,
   s as DatePickerBody,
-  k as DatePickerDate,
+  C as DatePickerDate,
   u as DatePickerDay,
   D as DatePickerHeader,
   P as DatePickerInput,
-  g as DatePickerPresenter,
-  w as Input,
-  L as KeyCaptureInput,
-  v as LanguageCharacter,
-  K as Mask,
+  M as DatePickerPresenter,
+  S as Input,
+  v as KeyCaptureInput,
+  H as LanguageCharacter,
+  T as Mask,
   j as MaskInput,
   z as MaskPresenter,
   W as MultiComboBox,
   Y as Multiselect,
   _ as MultiselectInlineValues,
-  rr as MultiselectRow,
-  er as MultiselectValues,
+  rr as MultiselectValues,
   F as NumericCharacter,
-  ar as Option,
-  nr as PhoneNumberInput,
-  lr as Radio,
-  hr as RadioRow,
+  mr as Option,
+  ir as PhoneNumberInput,
+  cr as Radio,
   J as RegexCharacter,
-  Cr as Select,
-  Ir as Slider,
-  Mr as SuggestionItem,
-  Rr as SuggestionList,
-  Sr as Switch,
-  dr as SwitchRow,
-  yr as Textarea,
-  Nr as TextareaRow,
-  Vr as UnitInput,
-  ir as countriesPhoneInformation,
-  pr as makeAvailableOptions,
-  mr as makeValuesAsOptions
+  lr as Select,
+  kr as Slider,
+  hr as SuggestionItem,
+  Ir as SuggestionList,
+  gr as Switch,
+  br as Textarea,
+  dr as UnitInput,
+  xr as countriesPhoneInformation,
+  or as makeAvailableOptions,
+  tr as makeValuesAsOptions
 };
 //# sourceMappingURL=index.js.map

package/dist/inputs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/inputs/input/input.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../src/inputs/input/input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { InputHTMLAttributes } from 'react';\nimport styles from './input.module.css';\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<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":";;;8CAkBaA,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;"}
+{"version":3,"file":"input.js","sources":["../../../src/inputs/input/input.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport React from 'react';\nimport { InputHTMLAttributes } from 'react';\nimport styles from './input.module.css';\n\nexport interface InputProps\n  extends Omit<InputHTMLAttributes<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, 'tcn-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":";;;8CAkBaA,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,WAAW;AAAA,MACpD,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/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

@@ -5,17 +5,18 @@ 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,7 +25,7 @@ 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);
   j(() => {
     const t = O.current;
@@ -43,7 +44,7 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
   }
   return y ? /* @__PURE__ */ v(w, { children: [
     /* @__PURE__ */ l(
-      S,
+      x,
       {
         ref: F,
         disabled: o,
@@ -70,10 +71,10 @@ import '../../multiselect.css';const $ = "_multiselect-container_009951a", z = {
       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,
@@ -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"}