@mage-ui/components 0.0.99 → 1.0.4

package/dist/components/controls/file-input/FileInputMultiple.d.mts

@@ -0,0 +1,31 @@
+import { BaseFileInputProps } from "./BaseFileInput.mjs";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
+
+//#region src/components/controls/file-input/FileInputMultiple.d.ts
+type FileInputMultipleProps = Omit<BaseFileInputProps, 'multiple' | 'onChange' | 'valueComponent'> & {
+  onChange?: (files: File[] | null) => void;
+  badgeClassNames?: {
+    badge?: string;
+    root?: string;
+    section?: string;
+    label?: string;
+  };
+};
+declare const FileInputMultiple: ({
+  name,
+  onBlur,
+  onFocus,
+  onChange,
+  label,
+  description,
+  placeholder,
+  error,
+  accept,
+  required,
+  disabled,
+  classNames,
+  badgeClassNames
+}: FileInputMultipleProps) => react_jsx_runtime21.JSX.Element;
+//#endregion
+export { FileInputMultiple, FileInputMultipleProps };
+//# sourceMappingURL=FileInputMultiple.d.mts.map

package/dist/components/controls/file-input/FileInputMultiple.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInputMultiple.d.mts","names":[],"sources":["../../../../src/components/controls/file-input/FileInputMultiple.tsx"],"mappings":";;;;KAKY,sBAAA,GAAyB,IAAA,CACnC,kBAAA;EAGA,QAAA,IAAY,KAAA,EAAO,IAAA;EACnB,eAAA;IACE,KAAA;IACA,IAAA;IACA,OAAA;IACA,KAAA;EAAA;AAAA;AAAA,cAiCS,iBAAA;EAAqB,IAAA;EAAA,MAAA;EAAA,OAAA;EAAA,QAAA;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,KAAA;EAAA,MAAA;EAAA,QAAA;EAAA,QAAA;EAAA,UAAA;EAAA;AAAA,GAc/B,sBAAA,KAAsB,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/file-input/FileInputMultiple.mjs

@@ -0,0 +1,2 @@
+import{Badge as e}from"../../data-display/badge/Badge.mjs";import{BaseFileInput as t}from"./BaseFileInput.mjs";import{fileInputBadge as n}from"@mage-ui/styled-system/recipes";import{Fragment as r,jsx as i}from"react/jsx-runtime";const a=({badgeClassNames:t})=>({value:a})=>a?i(r,{children:(Array.isArray(a)?a:[a]).map(r=>i(e,{classNames:{badge:t?.badge??n()},children:r.name},`${r.name}-${r.lastModified}`))}):null,o=({name:e,onBlur:n,onFocus:r,onChange:o,label:s,description:c,placeholder:l,error:u,accept:d,required:f,disabled:p,classNames:m,badgeClassNames:h})=>i(t,{name:e,onBlur:n,onFocus:r,label:s,description:c,placeholder:l,error:u,accept:d,required:f,disabled:p,classNames:m,multiple:!0,valueComponent:a({badgeClassNames:h}),onChange:e=>{o?.(e)}});export{o as FileInputMultiple};
+//# sourceMappingURL=FileInputMultiple.mjs.map

package/dist/components/controls/file-input/FileInputMultiple.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInputMultiple.mjs","names":[],"sources":["../../../../src/components/controls/file-input/FileInputMultiple.tsx"],"sourcesContent":["import { Badge } from '@/components/data-display/badge/Badge';\nimport { fileInputBadge } from '@mage-ui/styled-system/recipes';\nimport type { FileInputProps as MantineFileInputProps } from '@mantine/core';\nimport { BaseFileInput, type BaseFileInputProps } from './BaseFileInput';\n\nexport type FileInputMultipleProps = Omit<\n  BaseFileInputProps,\n  'multiple' | 'onChange' | 'valueComponent'\n> & {\n  onChange?: (files: File[] | null) => void;\n  badgeClassNames?: {\n    badge?: string;\n    root?: string;\n    section?: string;\n    label?: string;\n  };\n};\n\nconst createValueComponent = ({\n  badgeClassNames,\n}: {\n  badgeClassNames?: {\n    badge?: string;\n  };\n}): MantineFileInputProps['valueComponent'] => {\n  return ({ value }) => {\n    if (!value) return null;\n\n    const files = Array.isArray(value) ? value : [value];\n\n    return (\n      <>\n        {files.map((file) => (\n          <Badge\n            key={`${file.name}-${file.lastModified}`}\n            classNames={{\n              badge: badgeClassNames?.badge ?? fileInputBadge(),\n            }}\n          >\n            {file.name}\n          </Badge>\n        ))}\n      </>\n    );\n  };\n};\n\nexport const FileInputMultiple = ({\n  name,\n  onBlur,\n  onFocus,\n  onChange,\n  label,\n  description,\n  placeholder,\n  error,\n  accept,\n  required,\n  disabled,\n  classNames,\n  badgeClassNames,\n}: FileInputMultipleProps) => {\n  return (\n    <BaseFileInput\n      name={name}\n      onBlur={onBlur}\n      onFocus={onFocus}\n      label={label}\n      description={description}\n      placeholder={placeholder}\n      error={error}\n      accept={accept}\n      required={required}\n      disabled={disabled}\n      classNames={classNames}\n      multiple={true}\n      valueComponent={createValueComponent({\n        badgeClassNames,\n      })}\n      onChange={(payload) => {\n        onChange?.(payload as File[] | null);\n      }}\n    />\n  );\n};\n"],"mappings":"qOAkBA,MAAM,GAAwB,CAC5B,sBAMQ,CAAE,WACH,EAKH,EAAA,EAAA,CAAA,UAHY,MAAM,QAAQ,EAAM,CAAG,EAAQ,CAAC,EAAM,EAIzC,IAAK,GACV,EAAC,EAAA,CAEC,WAAY,CACV,MAAO,GAAiB,OAAS,GAAgB,CAClD,UAEA,EAAK,MALD,GAAG,EAAK,KAAK,GAAG,EAAK,eAMpB,CACR,CAAA,CACD,CAhBc,KAqBV,GAAqB,CAChC,OACA,SACA,UACA,WACA,QACA,cACA,cACA,QACA,SACA,WACA,WACA,aACA,qBAGE,EAAC,EAAA,CACO,OACE,SACC,UACF,QACM,cACA,cACN,QACC,SACE,WACA,WACE,aACZ,SAAU,GACV,eAAgB,EAAqB,CACnC,kBACD,CAAC,CACF,SAAW,GAAY,CACrB,IAAW,EAAyB,GAEtC"}

package/dist/components/controls/index.d.mts

@@ -0,0 +1,18 @@
+import { Checkbox, CheckboxProps } from "./checkbox/Checkbox.mjs";
+import { TextInput, TextInputProps } from "./text-input/TextInput.mjs";
+import { PasswordInput, PasswordInputProps } from "./password-input/PasswordInput.mjs";
+import { PasswordInputStrength, PasswordInputStrengthProps } from "./password-input-strength/PasswordInputStrength.mjs";
+import { FileInput, FileInputProps } from "./file-input/FileInput.mjs";
+import { FileInputMultiple, FileInputMultipleProps } from "./file-input/FileInputMultiple.mjs";
+import { Textarea, TextareaProps } from "./textarea/Textarea.mjs";
+import { Radio, RadioProps } from "./radio/Radio.mjs";
+import { Select, SelectProps } from "./select/Select.mjs";
+import { MultiSelect, MultiSelectProps } from "./multi-select/MultiSelect.mjs";
+import { MultiSelectTags, MultiSelectTagsProps } from "./multi-select/MultiSelectTags.mjs";
+import { Combobox, ComboboxProps } from "./combobox/Combobox.mjs";
+import { Autocomplete, AutocompleteProps, OptionProps } from "./autocomplete/Autocomplete.mjs";
+import { Menu, MenuProps } from "../navigations/menu/Menu.mjs";
+import "./utils/index.mjs";
+import { DatePicker, DatePickerProps } from "./date-picker/DatePicker.mjs";
+import { Dropzone, DropzoneProps, FileData } from "./dropzone/Dropzone.mjs";
+import { DropzoneFiles, DropzoneFilesProps } from "./dropzone-files/DropzoneFiles.mjs";

package/dist/components/controls/multi-select/MultiSelect.d.mts

@@ -0,0 +1,45 @@
+import { DropdownProps, DropdownTextInputClassNames } from "../dropdown/Dropdown.mjs";
+import * as react_jsx_runtime24 from "react/jsx-runtime";
+
+//#region src/components/controls/multi-select/MultiSelect.d.ts
+type MultiSelectProps = Omit<DropdownProps, 'classNames' | 'children' | 'onChange' | 'onFocus' | 'onBlur' | 'onClick' | 'value' | 'search' | 'setValue' | 'store' | 'target'> & {
+  options: {
+    id: string | number;
+    value: string;
+  }[];
+  textSelected?: {
+    singular?: string;
+    plural?: string;
+  };
+  classNames?: Omit<NonNullable<DropdownProps['classNames']>, 'dropdown' | 'search'> & {
+    multiSelect?: string;
+    icon?: {
+      icon?: string;
+      root?: string;
+      iconRaw?: {
+        iconRaw?: string;
+        root?: string;
+      };
+    };
+    scrollArea?: {
+      scrollArea?: string;
+    };
+    textInput?: DropdownTextInputClassNames;
+  };
+};
+declare const MultiSelect: ({
+  name,
+  label,
+  placeholder,
+  options,
+  error,
+  startSlot,
+  endSlot,
+  withinPortal,
+  keepMounted,
+  textSelected,
+  classNames
+}: MultiSelectProps) => react_jsx_runtime24.JSX.Element;
+//#endregion
+export { MultiSelect, MultiSelectProps };
+//# sourceMappingURL=MultiSelect.d.mts.map

package/dist/components/controls/multi-select/MultiSelect.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.d.mts","names":[],"sources":["../../../../src/components/controls/multi-select/MultiSelect.tsx"],"mappings":";;;;KAkCY,gBAAA,GAAmB,IAAA,CAC7B,aAAA;EAaA,OAAA;IACE,EAAA;IACA,KAAA;EAAA;EAEF,YAAA;IACE,QAAA;IACA,MAAA;EAAA;EAEF,UAAA,GAAa,IAAA,CACX,WAAA,CAAY,aAAA;IAGZ,WAAA;IACA,IAAA;MACE,IAAA;MACA,IAAA;MACA,OAAA;QACE,OAAA;QACA,IAAA;MAAA;IAAA;IAGJ,UAAA;MACE,UAAA;IAAA;IAEF,SAAA,GAAY,2BAAA;EAAA;AAAA;AAAA,cAIH,WAAA;EAAe,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,OAAA;EAAA,KAAA;EAAA,SAAA;EAAA,OAAA;EAAA,YAAA;EAAA,WAAA;EAAA,YAAA;EAAA;AAAA,GAYzB,gBAAA,KAAgB,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/multi-select/MultiSelect.mjs

@@ -0,0 +1,2 @@
+import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{Dropdown as t}from"../dropdown/Dropdown.mjs";import{multiSelect as n,multiSelectChevron as r,multiSelectChevronIcon as i,multiSelectChevronIconRoot as a,multiSelectChevronRoot as o,multiSelectIconIcon as s,multiSelectIconIconRaw as c,multiSelectIconIconRawRoot as l,multiSelectIconRoot as u,multiSelectOption as d,multiSelectOptions as f,multiSelectRoot as p,multiSelectScrollAreaAutosize as m,multiSelectTextInput as h,multiSelectTextInputDescription as g,multiSelectTextInputError as _,multiSelectTextInputInput as v,multiSelectTextInputLabel as y,multiSelectTextInputRequired as b,multiSelectTextInputRoot as x,multiSelectTextInputSection as S,multiSelectTextInputWrapper as C}from"@mage-ui/styled-system/recipes";import{jsx as w,jsxs as T}from"react/jsx-runtime";import{useState as E}from"react";const D=({name:D,label:O,placeholder:k,options:A,error:j,startSlot:M,endSlot:N,withinPortal:P=!1,keepMounted:F=!0,textSelected:I,classNames:L})=>{let[R,z]=E([]),B=e=>{z(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},V=R.length>0?`${R.length} ${R.length===1?I?.singular??`selected`:I?.plural??`selected`}`:``,H=A.map(n=>T(t.Option,{value:n.value,active:R.includes(n.value),children:[R.includes(n.value)&&w(e,{path:`/icons/sprite-mage.svg`,name:`mage-multi-select-check`,classNames:{icon:L?.icon?.icon??s(),root:L?.icon?.root??u(),iconRaw:{iconRaw:L?.icon?.iconRaw?.iconRaw??c(),root:L?.icon?.iconRaw?.root??l()}}}),w(`span`,{children:n.value})]},n.id));return w(t,{readOnly:!0,name:D,label:O,placeholder:k,error:j,startSlot:M,endSlot:N,withinPortal:P,keepMounted:F,chevron:!0,onClick:e=>e.toggleDropdown(),setValue:e=>{if(e===void 0){z([]);return}B(e)},value:V,onChange:()=>{},onFocus:()=>{},onBlur:()=>{},classNames:{dropdown:L?.multiSelect??n(),root:L?.root??p(),options:L?.options??f(),option:L?.option??d(),scrollArea:{scrollArea:L?.scrollArea?.scrollArea??m()},textInput:{textInput:L?.textInput?.input??h(),root:L?.textInput?.root??x(),label:L?.textInput?.label??y(),description:L?.textInput?.description??g(),error:L?.textInput?.error??_(),wrapper:L?.textInput?.wrapper??C(),input:L?.textInput?.input??v(),section:L?.textInput?.section??S(),required:L?.textInput?.required??b(),endSlot:{chevron:{iconWrapped:L?.textInput?.endSlot?.chevron?.iconWrapped??r(),root:L?.textInput?.endSlot?.chevron?.root??o(),open:{iconRaw:L?.textInput?.endSlot?.chevron?.open?.iconRaw??i(),root:L?.textInput?.endSlot?.chevron?.open?.root??a()},close:{iconRaw:L?.textInput?.endSlot?.chevron?.close?.iconRaw??i(),root:L?.textInput?.endSlot?.chevron?.close?.root??a({invert:!0})}}}}},children:w(t.Options,{children:H})})};export{D as MultiSelect};
+//# sourceMappingURL=MultiSelect.mjs.map

package/dist/components/controls/multi-select/MultiSelect.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.mjs","names":[],"sources":["../../../../src/components/controls/multi-select/MultiSelect.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport {\n  multiSelect,\n  multiSelectChevron,\n  multiSelectChevronIcon,\n  multiSelectChevronIconRoot,\n  multiSelectChevronRoot,\n  multiSelectIconIcon,\n  multiSelectIconIconRaw,\n  multiSelectIconIconRawRoot,\n  multiSelectIconRoot,\n  multiSelectOption,\n  multiSelectOptions,\n  multiSelectRoot,\n  multiSelectScrollAreaAutosize,\n  multiSelectTextInput,\n  multiSelectTextInputDescription,\n  multiSelectTextInputError,\n  multiSelectTextInputInput,\n  multiSelectTextInputLabel,\n  multiSelectTextInputRequired,\n  multiSelectTextInputRoot,\n  multiSelectTextInputSection,\n  multiSelectTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { Icon } from '@/components/data-display/icons/icon/Icon';\n\nimport {\n  Dropdown,\n  type DropdownProps,\n  type DropdownTextInputClassNames,\n} from '../dropdown/Dropdown';\n\nexport type MultiSelectProps = Omit<\n  DropdownProps,\n  | 'classNames'\n  | 'children'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onClick'\n  | 'value'\n  | 'search'\n  | 'setValue'\n  | 'store'\n  | 'target'\n> & {\n  options: {\n    id: string | number;\n    value: string;\n  }[];\n  textSelected?: {\n    singular?: string;\n    plural?: string;\n  };\n  classNames?: Omit<\n    NonNullable<DropdownProps['classNames']>,\n    'dropdown' | 'search'\n  > & {\n    multiSelect?: string;\n    icon?: {\n      icon?: string;\n      root?: string;\n      iconRaw?: {\n        iconRaw?: string;\n        root?: string;\n      };\n    };\n    scrollArea?: {\n      scrollArea?: string;\n    };\n    textInput?: DropdownTextInputClassNames;\n  };\n};\n\nexport const MultiSelect = ({\n  name,\n  label,\n  placeholder,\n  options,\n  error,\n  startSlot,\n  endSlot,\n  withinPortal = false,\n  keepMounted = true,\n  textSelected,\n  classNames,\n}: MultiSelectProps) => {\n  const [value, setValue] = useState<string[]>([]);\n\n  const handleValueSelect = (val: string) => {\n    setValue((current) =>\n      current.includes(val)\n        ? current.filter((v) => v !== val)\n        : [...current, val],\n    );\n  };\n\n  const displayValue =\n    value.length > 0\n      ? `${value.length} ${value.length === 1 ? (textSelected?.singular ?? 'selected') : (textSelected?.plural ?? 'selected')}`\n      : '';\n\n  const optionsList = options.map((item) => (\n    <Dropdown.Option\n      value={item.value}\n      key={item.id}\n      active={value.includes(item.value)}\n    >\n      {value.includes(item.value) && (\n        <Icon\n          path=\"/icons/sprite-mage.svg\"\n          name='mage-multi-select-check'\n          classNames={{ \n            icon: classNames?.icon?.icon ?? multiSelectIconIcon(),\n            root: classNames?.icon?.root ?? multiSelectIconRoot(),\n            iconRaw: {\n              iconRaw: classNames?.icon?.iconRaw?.iconRaw ?? multiSelectIconIconRaw(),\n              root: classNames?.icon?.iconRaw?.root ?? multiSelectIconIconRawRoot(),\n            }\n          }}\n        />\n      )}\n      <span>{item.value}</span>\n    </Dropdown.Option>\n  ));\n\n  return (\n    <Dropdown\n      readOnly\n      name={name}\n      label={label}\n      placeholder={placeholder}\n      error={error}\n      startSlot={startSlot}\n      endSlot={endSlot}\n      withinPortal={withinPortal}\n      keepMounted={keepMounted}\n      chevron={true}\n      onClick={(combobox) => combobox.toggleDropdown()}\n      setValue={(val) => {\n        if (val === undefined) {\n          setValue([]);\n          return;\n        }\n        handleValueSelect(val);\n      }}\n      value={displayValue}\n      onChange={() => {}}\n      onFocus={() => {}}\n      onBlur={() => {}}\n      classNames={{\n        dropdown: classNames?.multiSelect ?? multiSelect(),\n        root: classNames?.root ?? multiSelectRoot(),\n        options: classNames?.options ?? multiSelectOptions(),\n        option: classNames?.option ?? multiSelectOption(),\n        scrollArea: {\n          scrollArea:\n            classNames?.scrollArea?.scrollArea ?? multiSelectScrollAreaAutosize(),\n        },\n        textInput: {\n          textInput: classNames?.textInput?.input ?? multiSelectTextInput(),\n          root: classNames?.textInput?.root ?? multiSelectTextInputRoot(),\n          label: classNames?.textInput?.label ?? multiSelectTextInputLabel(),\n          description:\n            classNames?.textInput?.description ??\n            multiSelectTextInputDescription(),\n          error: classNames?.textInput?.error ?? multiSelectTextInputError(),\n          wrapper:\n            classNames?.textInput?.wrapper ?? multiSelectTextInputWrapper(),\n          input: classNames?.textInput?.input ?? multiSelectTextInputInput(),\n          section:\n            classNames?.textInput?.section ?? multiSelectTextInputSection(),\n          required:\n            classNames?.textInput?.required ?? multiSelectTextInputRequired(),\n          endSlot: {\n            chevron: {\n              iconWrapped:\n                classNames?.textInput?.endSlot?.chevron?.iconWrapped ??\n                multiSelectChevron(),\n              root:\n                classNames?.textInput?.endSlot?.chevron?.root ??\n                multiSelectChevronRoot(),\n              open: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.chevron?.open?.iconRaw ??\n                  multiSelectChevronIcon(),\n                root:\n                  classNames?.textInput?.endSlot?.chevron?.open?.root ??\n                  multiSelectChevronIconRoot(),\n              },\n              close: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.chevron?.close?.iconRaw ??\n                  multiSelectChevronIcon(),\n                root:\n                  classNames?.textInput?.endSlot?.chevron?.close?.root ??\n                  multiSelectChevronIconRoot({ invert: true }),\n              },\n            },\n          },\n        },\n      }}\n    >\n      <Dropdown.Options>{optionsList}</Dropdown.Options>\n    </Dropdown>\n  );\n};\n"],"mappings":"q2BA4EA,MAAa,GAAe,CAC1B,OACA,QACA,cACA,UACA,QACA,YACA,UACA,eAAe,GACf,cAAc,GACd,eACA,gBACsB,CACtB,GAAM,CAAC,EAAO,GAAY,EAAmB,EAAE,CAAC,CAE1C,EAAqB,GAAgB,CACzC,EAAU,GACR,EAAQ,SAAS,EAAI,CACjB,EAAQ,OAAQ,GAAM,IAAM,EAAI,CAChC,CAAC,GAAG,EAAS,EAAI,CACtB,EAGG,EACJ,EAAM,OAAS,EACX,GAAG,EAAM,OAAO,GAAG,EAAM,SAAW,EAAK,GAAc,UAAY,WAAe,GAAc,QAAU,aAC1G,GAEA,EAAc,EAAQ,IAAK,GAC/B,EAAC,EAAS,OAAA,CACR,MAAO,EAAK,MAEZ,OAAQ,EAAM,SAAS,EAAK,MAAM,WAEjC,EAAM,SAAS,EAAK,MAAM,EACzB,EAAC,EAAA,CACC,KAAK,yBACL,KAAK,0BACL,WAAY,CACV,KAAM,GAAY,MAAM,MAAQ,GAAqB,CACrD,KAAM,GAAY,MAAM,MAAQ,GAAqB,CACrD,QAAS,CACP,QAAS,GAAY,MAAM,SAAS,SAAW,GAAwB,CACvE,KAAM,GAAY,MAAM,SAAS,MAAQ,GAA4B,CACtE,CACF,EACD,CAEJ,EAAC,OAAA,CAAA,SAAM,EAAK,MAAA,CAAa,CAAA,EAjBpB,EAAK,GAkBM,CAClB,CAEF,OACE,EAAC,EAAA,CACC,SAAA,GACM,OACC,QACM,cACN,QACI,YACF,UACK,eACD,cACb,QAAS,GACT,QAAU,GAAa,EAAS,gBAAgB,CAChD,SAAW,GAAQ,CACjB,GAAI,IAAQ,IAAA,GAAW,CACrB,EAAS,EAAE,CAAC,CACZ,OAEF,EAAkB,EAAI,EAExB,MAAO,EACP,aAAgB,GAChB,YAAe,GACf,WAAc,GACd,WAAY,CACV,SAAU,GAAY,aAAe,GAAa,CAClD,KAAM,GAAY,MAAQ,GAAiB,CAC3C,QAAS,GAAY,SAAW,GAAoB,CACpD,OAAQ,GAAY,QAAU,GAAmB,CACjD,WAAY,CACV,WACE,GAAY,YAAY,YAAc,GAA+B,CACxE,CACD,UAAW,CACT,UAAW,GAAY,WAAW,OAAS,GAAsB,CACjE,KAAM,GAAY,WAAW,MAAQ,GAA0B,CAC/D,MAAO,GAAY,WAAW,OAAS,GAA2B,CAClE,YACE,GAAY,WAAW,aACvB,GAAiC,CACnC,MAAO,GAAY,WAAW,OAAS,GAA2B,CAClE,QACE,GAAY,WAAW,SAAW,GAA6B,CACjE,MAAO,GAAY,WAAW,OAAS,GAA2B,CAClE,QACE,GAAY,WAAW,SAAW,GAA6B,CACjE,SACE,GAAY,WAAW,UAAY,GAA8B,CACnE,QAAS,CACP,QAAS,CACP,YACE,GAAY,WAAW,SAAS,SAAS,aACzC,GAAoB,CACtB,KACE,GAAY,WAAW,SAAS,SAAS,MACzC,GAAwB,CAC1B,KAAM,CACJ,QACE,GAAY,WAAW,SAAS,SAAS,MAAM,SAC/C,GAAwB,CAC1B,KACE,GAAY,WAAW,SAAS,SAAS,MAAM,MAC/C,GAA4B,CAC/B,CACD,MAAO,CACL,QACE,GAAY,WAAW,SAAS,SAAS,OAAO,SAChD,GAAwB,CAC1B,KACE,GAAY,WAAW,SAAS,SAAS,OAAO,MAChD,EAA2B,CAAE,OAAQ,GAAM,CAAC,CAC/C,CACF,CACF,CACF,CACF,UAED,EAAC,EAAS,QAAA,CAAA,SAAS,EAAA,CAA+B,EACzC"}

package/dist/components/controls/multi-select/MultiSelectTags.d.mts

@@ -0,0 +1,63 @@
+import { DropdownProps, DropdownTextInputClassNames } from "../dropdown/Dropdown.mjs";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
+
+//#region src/components/controls/multi-select/MultiSelectTags.d.ts
+type MultiSelectTagsProps = Omit<DropdownProps, 'classNames' | 'children' | 'onChange' | 'onFocus' | 'onBlur' | 'onClick' | 'value' | 'search' | 'setValue' | 'store' | 'target'> & {
+  classNames?: Omit<NonNullable<DropdownProps['classNames']>, 'dropdown'> & {
+    multiSelectTags?: string;
+    icon?: {
+      icon?: string;
+      root?: string;
+      iconRaw?: {
+        iconRaw?: string;
+        root?: string;
+      };
+    };
+    scrollArea?: {
+      scrollArea?: string;
+    };
+    tagsInput?: DropdownTextInputClassNames & {
+      tagsInput?: string;
+      placeholder?: string;
+      field?: string;
+      tagGroup?: {
+        root?: string;
+        tagGroup?: string;
+      };
+    };
+    chevron?: {
+      iconWrapped?: string;
+      root?: string;
+      open?: {
+        iconRaw?: string;
+        root?: string;
+      };
+      close?: {
+        iconRaw?: string;
+        root?: string;
+      };
+    };
+  };
+  options: {
+    id: string | number;
+    value: string;
+  }[];
+  required?: boolean;
+};
+declare const MultiSelectTags: ({
+  name,
+  label,
+  placeholder,
+  options,
+  error,
+  description,
+  required,
+  withinPortal,
+  keepMounted,
+  startSlot,
+  endSlot,
+  classNames
+}: MultiSelectTagsProps) => react_jsx_runtime25.JSX.Element;
+//#endregion
+export { MultiSelectTags, MultiSelectTagsProps };
+//# sourceMappingURL=MultiSelectTags.d.mts.map

package/dist/components/controls/multi-select/MultiSelectTags.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectTags.d.mts","names":[],"sources":["../../../../src/components/controls/multi-select/MultiSelectTags.tsx"],"mappings":";;;;KA0CY,oBAAA,GAAuB,IAAA,CACjC,aAAA;EAaA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,aAAA;IAC5B,eAAA;IACA,IAAA;MACE,IAAA;MACA,IAAA;MACA,OAAA;QACE,OAAA;QACA,IAAA;MAAA;IAAA;IAGJ,UAAA;MACE,UAAA;IAAA;IAEF,SAAA,GAAY,2BAAA;MACV,SAAA;MACA,WAAA;MACA,KAAA;MACA,QAAA;QACE,IAAA;QACA,QAAA;MAAA;IAAA;IAGJ,OAAA;MACE,WAAA;MACA,IAAA;MACA,IAAA;QACE,OAAA;QACA,IAAA;MAAA;MAEF,KAAA;QACE,OAAA;QACA,IAAA;MAAA;IAAA;EAAA;EAIN,OAAA;IACE,EAAA;IACA,KAAA;EAAA;EAEF,QAAA;AAAA;AAAA,cAGW,eAAA;EAAmB,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,OAAA;EAAA,KAAA;EAAA,WAAA;EAAA,QAAA;EAAA,YAAA;EAAA,WAAA;EAAA,SAAA;EAAA,OAAA;EAAA;AAAA,GAa7B,oBAAA,KAAoB,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/multi-select/MultiSelectTags.mjs

@@ -0,0 +1,2 @@
+import{Tag as e}from"../../data-display/tag/Tag.mjs";import{Icon as t}from"../../data-display/icons/icon/Icon.mjs";import{Chevron as n}from"../utils/chevron/Chevron.mjs";import{Dropdown as r}from"../dropdown/Dropdown.mjs";import{cx as i}from"@mage-ui/styled-system/css";import{multiSelectTags as a,multiSelectTagsChevron as o,multiSelectTagsChevronIcon as s,multiSelectTagsChevronIconRoot as c,multiSelectTagsChevronRoot as l,multiSelectTagsEmpty as u,multiSelectTagsGroup as d,multiSelectTagsGroupRoot as f,multiSelectTagsIconIcon as p,multiSelectTagsIconIconRaw as m,multiSelectTagsIconIconRawRoot as h,multiSelectTagsIconRoot as g,multiSelectTagsInput as ee,multiSelectTagsInputDescription as _,multiSelectTagsInputError as v,multiSelectTagsInputField as y,multiSelectTagsInputInput as b,multiSelectTagsInputLabel as x,multiSelectTagsInputPlaceholder as S,multiSelectTagsInputRequired as C,multiSelectTagsInputRoot as w,multiSelectTagsInputSection as T,multiSelectTagsInputWrapper as E,multiSelectTagsOption as D,multiSelectTagsOptions as O,multiSelectTagsRoot as k,multiSelectTagsScrollAreaAutosize as A}from"@mage-ui/styled-system/recipes";import{Input as j,PillsInput as M,useCombobox as N}from"@mantine/core";import{jsx as P,jsxs as F}from"react/jsx-runtime";import{useState as te}from"react";const I=({name:I,label:L,placeholder:R,options:z,error:B,description:V,required:H=!1,withinPortal:U=!1,keepMounted:W=!0,startSlot:G,endSlot:K,classNames:q})=>{let J=N({onDropdownClose:()=>J.resetSelectedOption(),onDropdownOpen:()=>J.updateSelectedOptionIndex(`active`)}),[Y,X]=te([]),Z=e=>X(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e]),Q=e=>X(t=>t.filter(t=>t!==e)),$=Y.map(t=>P(e,{label:t,onRemove:()=>Q(t),children:t},t)),ne=z.map(e=>F(r.Option,{value:e.value,active:Y.includes(e.value),children:[Y.includes(e.value)&&P(t,{path:`/icons/sprite-mage.svg`,name:`mage-multi-select-tags-check`,classNames:{icon:q?.icon?.icon??p(),root:q?.icon?.root??g(),iconRaw:{iconRaw:q?.icon?.iconRaw?.iconRaw??m(),root:q?.icon?.iconRaw?.root??h()}}}),P(`span`,{children:e.value})]},e.id)),re=P(M,{label:L,error:B,withAsterisk:H,description:V,pointer:!0,onClick:()=>J.openDropdown(),leftSection:G,rightSection:K??P(n,{path:`/icons/sprite-mage.svg`,chevronOpen:`mage-multi-select-tags-chevron-down`,chevronClose:`mage-multi-select-tags-chevron-up`,classNames:{iconWrapped:q?.chevron?.iconWrapped??o(),root:q?.chevron?.root??l(),open:{iconRaw:q?.chevron?.open?.iconRaw??s(),root:q?.chevron?.open?.root??c()},close:{iconRaw:q?.chevron?.close?.iconRaw??s(),root:q?.chevron?.close?.root??c({invert:!0})}}}),classNames:{root:i(q?.tagsInput?.tagsInput??ee(),q?.tagsInput?.root??w()),wrapper:q?.tagsInput?.wrapper??E(),input:i(q?.tagsInput?.input??b(),`peer`),section:i(q?.tagsInput?.section??T(),`group`),label:q?.tagsInput?.label??x(),required:q?.tagsInput?.required??C(),description:q?.tagsInput?.description??_(),error:q?.tagsInput?.error??v()},children:F(e.Group,{classNames:{tagGroup:q?.tagsInput?.tagGroup?.tagGroup??d(),root:q?.tagsInput?.tagGroup?.root??f()},children:[$.length>0?$:P(j.Placeholder,{classNames:{placeholder:q?.tagsInput?.placeholder??S()},children:R}),P(r.EventsTarget,{children:P(M.Field,{name:I,type:`hidden`,classNames:{field:q?.tagsInput?.field??y()},onKeyDown:e=>{e.key===`Backspace`&&Y.length>0&&(e.preventDefault(),Q(Y[Y.length-1]))}})})]})});return P(r,{readOnly:!0,store:J,withinPortal:U,keepMounted:W,chevron:!0,setValue:e=>{if(e===void 0){X([]);return}Z(e)},onChange:()=>{},onFocus:()=>{},onBlur:()=>{},onClick:()=>{},classNames:{dropdown:q?.multiSelectTags??a(),root:q?.root??k(),options:q?.options??O(),option:q?.option??D(),empty:q?.empty??u(),scrollArea:{scrollArea:q?.scrollArea?.scrollArea??A()}},target:re,children:P(r.Options,{children:ne})})};export{I as MultiSelectTags};
+//# sourceMappingURL=MultiSelectTags.mjs.map

package/dist/components/controls/multi-select/MultiSelectTags.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelectTags.mjs","names":["TagsInput"],"sources":["../../../../src/components/controls/multi-select/MultiSelectTags.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  multiSelectTags,\n  multiSelectTagsChevron,\n  multiSelectTagsChevronIcon,\n  multiSelectTagsChevronIconRoot,\n  multiSelectTagsChevronRoot,\n  multiSelectTagsEmpty,\n  multiSelectTagsGroup,\n  multiSelectTagsGroupRoot,\n  multiSelectTagsIconIcon,\n  multiSelectTagsIconIconRaw,\n  multiSelectTagsIconIconRawRoot,\n  multiSelectTagsIconRoot,\n  multiSelectTagsInput,\n  multiSelectTagsInputDescription,\n  multiSelectTagsInputError,\n  multiSelectTagsInputField,\n  multiSelectTagsInputInput,\n  multiSelectTagsInputLabel,\n  multiSelectTagsInputPlaceholder,\n  multiSelectTagsInputRequired,\n  multiSelectTagsInputRoot,\n  multiSelectTagsInputSection,\n  multiSelectTagsInputWrapper,\n  multiSelectTagsOption,\n  multiSelectTagsOptions,\n  multiSelectTagsRoot,\n  multiSelectTagsScrollAreaAutosize,\n} from '@mage-ui/styled-system/recipes';\nimport { Input, PillsInput as TagsInput, useCombobox } from '@mantine/core';\nimport { Icon, Tag } from '@/components/data-display';\n\nimport {\n  Dropdown,\n  type DropdownProps,\n  type DropdownTextInputClassNames,\n} from '../dropdown/Dropdown';\nimport { Chevron } from '../utils';\n\nexport type MultiSelectTagsProps = Omit<\n  DropdownProps,\n  | 'classNames'\n  | 'children'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'onClick'\n  | 'value'\n  | 'search'\n  | 'setValue'\n  | 'store'\n  | 'target'\n> & {\n  classNames?: Omit<NonNullable<DropdownProps['classNames']>, 'dropdown'> & {\n    multiSelectTags?: string;\n    icon?: {\n      icon?: string;\n      root?: string;\n      iconRaw?: {\n        iconRaw?: string;\n        root?: string;\n      };\n    };\n    scrollArea?: {\n      scrollArea?: string;\n    };\n    tagsInput?: DropdownTextInputClassNames & {\n      tagsInput?: string;\n      placeholder?: string;\n      field?: string;\n      tagGroup?: {\n        root?: string;\n        tagGroup?: string;\n      };\n    };\n    chevron?: {\n      iconWrapped?: string;\n      root?: string;\n      open?: {\n        iconRaw?: string;\n        root?: string;\n      };\n      close?: {\n        iconRaw?: string;\n        root?: string;\n      };\n    };\n  };\n  options: {\n    id: string | number;\n    value: string;\n  }[];\n  required?: boolean;\n};\n\nexport const MultiSelectTags = ({\n  name,\n  label,\n  placeholder,\n  options,\n  error,\n  description,\n  required = false,\n  withinPortal = false,\n  keepMounted = true,\n  startSlot,\n  endSlot,\n  classNames,\n}: MultiSelectTagsProps) => {\n  const combobox = useCombobox({\n    onDropdownClose: () => combobox.resetSelectedOption(),\n    onDropdownOpen: () => combobox.updateSelectedOptionIndex('active'),\n  });\n\n  const [value, setValue] = useState<string[]>([]);\n\n  const handleValueSelect = (val: string) =>\n    setValue((current) =>\n      current.includes(val)\n        ? current.filter((v) => v !== val)\n        : [...current, val],\n    );\n\n  const handleValueRemove = (val: string) =>\n    setValue((current) => current.filter((v) => v !== val));\n\n  const values = value.map((item) => (\n    <Tag key={item} label={item} onRemove={() => handleValueRemove(item)}>\n      {item}\n    </Tag>\n  ));\n\n  const optionsList = options.map((item) => (\n    <Dropdown.Option\n      value={item.value}\n      key={item.id}\n      active={value.includes(item.value)}\n    >\n      {value.includes(item.value) && (\n        <Icon\n          path=\"/icons/sprite-mage.svg\"\n          name='mage-multi-select-tags-check'\n          classNames={{\n            icon: classNames?.icon?.icon ?? multiSelectTagsIconIcon(),\n            root: classNames?.icon?.root ?? multiSelectTagsIconRoot(),\n            iconRaw: {\n              iconRaw: classNames?.icon?.iconRaw?.iconRaw ?? multiSelectTagsIconIconRaw(),\n              root: classNames?.icon?.iconRaw?.root ?? multiSelectTagsIconIconRawRoot(),\n            }\n          }}\n        />\n\n\n      )}\n      <span>{item.value}</span>\n    </Dropdown.Option>\n  ));\n\n  const tagsTarget = (\n    <TagsInput\n      label={label}\n      error={error}\n      withAsterisk={required}\n      description={description}\n      pointer\n      onClick={() => combobox.openDropdown()}\n      leftSection={startSlot}\n      rightSection={\n        endSlot ?? (\n          <Chevron\n            path='/icons/sprite-mage.svg'\n            chevronOpen='mage-multi-select-tags-chevron-down'\n            chevronClose='mage-multi-select-tags-chevron-up'\n            classNames={{\n              iconWrapped:\n                classNames?.chevron?.iconWrapped ?? multiSelectTagsChevron(),\n              root: classNames?.chevron?.root ?? multiSelectTagsChevronRoot(),\n              open: {\n                iconRaw:\n                  classNames?.chevron?.open?.iconRaw ??\n                  multiSelectTagsChevronIcon(),\n                root:\n                  classNames?.chevron?.open?.root ??\n                  multiSelectTagsChevronIconRoot(),\n              },\n              close: {\n                iconRaw:\n                  classNames?.chevron?.close?.iconRaw ??\n                  multiSelectTagsChevronIcon(),\n                root:\n                  classNames?.chevron?.close?.root ??\n                  multiSelectTagsChevronIconRoot({ invert: true }),\n              },\n            }}\n          />\n        )\n      }\n      classNames={{\n        root: cx(\n          classNames?.tagsInput?.tagsInput ?? multiSelectTagsInput(),\n          classNames?.tagsInput?.root ?? multiSelectTagsInputRoot(),\n        ),\n        wrapper:\n          classNames?.tagsInput?.wrapper ?? multiSelectTagsInputWrapper(),\n        input: cx(\n          classNames?.tagsInput?.input ?? multiSelectTagsInputInput(),\n          'peer',\n        ),\n        section: cx(\n          classNames?.tagsInput?.section ?? multiSelectTagsInputSection(),\n          'group',\n        ),\n        label: classNames?.tagsInput?.label ?? multiSelectTagsInputLabel(),\n        required:\n          classNames?.tagsInput?.required ?? multiSelectTagsInputRequired(),\n        description:\n          classNames?.tagsInput?.description ??\n          multiSelectTagsInputDescription(),\n        error: classNames?.tagsInput?.error ?? multiSelectTagsInputError(),\n      }}\n    >\n      <Tag.Group\n        classNames={{\n          tagGroup: classNames?.tagsInput?.tagGroup?.tagGroup ?? multiSelectTagsGroup(),\n          root: classNames?.tagsInput?.tagGroup?.root ?? multiSelectTagsGroupRoot(),\n        }}\n      >\n        {values.length > 0 ? (\n          values\n        ) : (\n          <Input.Placeholder\n            classNames={{\n              placeholder:\n                classNames?.tagsInput?.placeholder ??\n                multiSelectTagsInputPlaceholder(),\n            }}\n          >\n            {placeholder}\n          </Input.Placeholder>\n        )}\n        <Dropdown.EventsTarget>\n          <TagsInput.Field\n            name={name}\n            type='hidden'\n            classNames={{\n              field:\n                classNames?.tagsInput?.field ?? multiSelectTagsInputField(),\n            }}\n            onKeyDown={(event) => {\n              if (event.key === 'Backspace' && value.length > 0) {\n                event.preventDefault();\n                handleValueRemove(value[value.length - 1]);\n              }\n            }}\n          />\n        </Dropdown.EventsTarget>\n      </Tag.Group>\n    </TagsInput>\n  );\n\n  return (\n    <Dropdown\n      readOnly\n      store={combobox}\n      withinPortal={withinPortal}\n      keepMounted={keepMounted}\n      chevron={true}\n      setValue={(val) => {\n        if (val === undefined) {\n          setValue([]);\n          return;\n        }\n        handleValueSelect(val);\n      }}\n      onChange={() => { }}\n      onFocus={() => { }}\n      onBlur={() => { }}\n      onClick={() => { }}\n      classNames={{\n        dropdown: classNames?.multiSelectTags ?? multiSelectTags(),\n        root: classNames?.root ?? multiSelectTagsRoot(),\n        options: classNames?.options ?? multiSelectTagsOptions(),\n        option: classNames?.option ?? multiSelectTagsOption(),\n        empty: classNames?.empty ?? multiSelectTagsEmpty(),\n        scrollArea: {\n          scrollArea:\n            classNames?.scrollArea?.scrollArea ?? multiSelectTagsScrollAreaAutosize(),\n        },\n      }}\n      target={tagsTarget}\n    >\n      <Dropdown.Options>{optionsList}</Dropdown.Options>\n    </Dropdown>\n  );\n};\n"],"mappings":"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"}

package/dist/components/controls/password-input/PasswordInput.d.mts

@@ -0,0 +1,47 @@
+import { TextInputProps } from "../text-input/TextInput.mjs";
+import * as react_jsx_runtime18 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/controls/password-input/PasswordInput.d.ts
+type PasswordInputProps = Omit<TextInputProps, 'classNames' | 'endSlot'> & {
+  label?: ReactNode;
+  description?: ReactNode;
+  error?: ReactNode;
+  startSlot?: ReactNode;
+  hidePasswordText?: string;
+  showPasswordText?: string;
+  classNames?: Omit<NonNullable<TextInputProps['classNames']>, 'textInput'> & {
+    passwordInput?: string;
+    buttonIcon?: {
+      buttonIcon?: string;
+      root?: string;
+      icon?: string;
+      iconRaw?: {
+        iconRaw?: string;
+        root?: string;
+      };
+    };
+  };
+};
+declare const PasswordInput: ({
+  name,
+  label,
+  description,
+  error,
+  placeholder,
+  classNames,
+  startSlot,
+  onChange,
+  value,
+  id,
+  disabled,
+  required,
+  readOnly,
+  onClick,
+  onFocus,
+  hidePasswordText,
+  showPasswordText
+}: PasswordInputProps) => react_jsx_runtime18.JSX.Element;
+//#endregion
+export { PasswordInput, PasswordInputProps };
+//# sourceMappingURL=PasswordInput.d.mts.map

package/dist/components/controls/password-input/PasswordInput.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.d.mts","names":[],"sources":["../../../../src/components/controls/password-input/PasswordInput.tsx"],"mappings":";;;;;KAqBY,kBAAA,GAAqB,IAAA,CAC/B,cAAA;EAGA,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,SAAA,GAAY,SAAA;EACZ,gBAAA;EACA,gBAAA;EACA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,cAAA;IAC5B,aAAA;IACA,UAAA;MACE,UAAA;MACA,IAAA;MACA,IAAA;MACA,OAAA;QACE,OAAA;QACA,IAAA;MAAA;IAAA;EAAA;AAAA;AAAA,cAMK,aAAA;EAAiB,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,WAAA;EAAA,UAAA;EAAA,SAAA;EAAA,QAAA;EAAA,KAAA;EAAA,EAAA;EAAA,QAAA;EAAA,QAAA;EAAA,QAAA;EAAA,OAAA;EAAA,OAAA;EAAA,gBAAA;EAAA;AAAA,GAkB3B,kBAAA,KAAkB,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/password-input/PasswordInput.mjs

@@ -0,0 +1,2 @@
+import{ButtonIcon as e}from"../../buttons/button-icon/ButtonIcon.mjs";import{TextInput as t}from"../text-input/TextInput.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{passwordInput as r,passwordInputButtonIcon as i,passwordInputButtonIconIcon as a,passwordInputButtonIconIconRaw as o,passwordInputButtonIconIconRawRoot as s,passwordInputButtonIconRoot as c,passwordInputDescription as l,passwordInputError as u,passwordInputInput as d,passwordInputLabel as f,passwordInputRequired as p,passwordInputRoot as m,passwordInputSection as h,passwordInputWrapper as g}from"@mage-ui/styled-system/recipes";import{jsx as _}from"react/jsx-runtime";import{useState as v}from"react";const y=({name:y,label:b,description:x,error:S,placeholder:C,classNames:w,startSlot:T,onChange:E,value:D,id:O,disabled:k,required:A,readOnly:j,onClick:M,onFocus:N,hidePasswordText:P,showPasswordText:F})=>{let[I,L]=v(!1);return _(t,{name:y,label:b,description:x,error:S,placeholder:C,value:D,id:O,disabled:k,required:A,readOnly:j,onChange:E,onClick:M,onFocus:N,type:I?`text`:`password`,startSlot:T,endSlot:_(e,{name:I?`mage-password-input-eye-off`:`mage-password-input-eye`,path:`/icons/sprite-mage.svg`,label:I?P??`Hide password`:F??`Show password`,onClick:()=>L(!I),disabled:k,classNames:{buttonIcon:w?.buttonIcon?.buttonIcon??i(),root:w?.buttonIcon?.root??c(),icon:w?.buttonIcon?.icon??a(),iconRaw:{iconRaw:w?.buttonIcon?.iconRaw?.iconRaw??o(),root:w?.buttonIcon?.iconRaw?.root??s()}}}),classNames:{root:n(w?.passwordInput??r(),w?.root??m()),label:w?.label??f(),required:w?.required??p(),description:w?.description??l(),error:w?.error??u(),wrapper:w?.wrapper??g(),input:w?.input??d(),section:w?.section??h()}})};export{y as PasswordInput};
+//# sourceMappingURL=PasswordInput.mjs.map

package/dist/components/controls/password-input/PasswordInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInput.mjs","names":[],"sources":["../../../../src/components/controls/password-input/PasswordInput.tsx"],"sourcesContent":["import { useState, type ReactNode } from 'react';\nimport { TextInput, type TextInputProps } from '../text-input/TextInput';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  passwordInput,\n  passwordInputButtonIcon,\n  passwordInputButtonIconIcon,\n  passwordInputButtonIconIconRaw,\n  passwordInputButtonIconIconRawRoot,\n  passwordInputButtonIconRoot,\n  passwordInputDescription,\n  passwordInputError,\n  passwordInputInput,\n  passwordInputLabel,\n  passwordInputRequired,\n  passwordInputRoot,\n  passwordInputSection,\n  passwordInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { ButtonIcon } from '@/components/buttons';\n\nexport type PasswordInputProps = Omit<\n  TextInputProps,\n  'classNames' | 'endSlot'\n> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  startSlot?: ReactNode;\n  hidePasswordText?: string;\n  showPasswordText?: string;\n  classNames?: Omit<NonNullable<TextInputProps['classNames']>, 'textInput'> & {\n    passwordInput?: string;\n    buttonIcon?: {\n      buttonIcon?: string;\n      root?: string;\n      icon?: string;\n      iconRaw?: {\n        iconRaw?: string;\n        root?: string;\n      };\n    };\n  };\n};\n\nexport const PasswordInput = ({\n  name,\n  label,\n  description,\n  error,\n  placeholder,\n  classNames,\n  startSlot,\n  onChange,\n  value,\n  id,\n  disabled,\n  required,\n  readOnly,\n  onClick,\n  onFocus,\n  hidePasswordText,\n  showPasswordText,\n}: PasswordInputProps) => {\n  const [visible, setVisible] = useState(false);\n\n  return (\n    <TextInput\n      name={name}\n      label={label}\n      description={description}\n      error={error}\n      placeholder={placeholder}\n      value={value}\n      id={id}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      onChange={onChange}\n      onClick={onClick}\n      onFocus={onFocus}\n      type={visible ? 'text' : 'password'}\n      startSlot={startSlot}\n      endSlot={\n        <ButtonIcon\n          name={\n            visible ? 'mage-password-input-eye-off' : 'mage-password-input-eye'\n          }\n          path='/icons/sprite-mage.svg'\n          label={\n            visible\n              ? (hidePasswordText ?? 'Hide password')\n              : (showPasswordText ?? 'Show password')\n          }\n          onClick={() => setVisible(!visible)}\n          disabled={disabled}\n          classNames={{\n            buttonIcon:\n              classNames?.buttonIcon?.buttonIcon ?? passwordInputButtonIcon(),\n            root: classNames?.buttonIcon?.root ?? passwordInputButtonIconRoot(),\n            icon: classNames?.buttonIcon?.icon ?? passwordInputButtonIconIcon(),\n            iconRaw: {\n              iconRaw:\n                classNames?.buttonIcon?.iconRaw?.iconRaw ??\n                passwordInputButtonIconIconRaw(),\n              root:\n                classNames?.buttonIcon?.iconRaw?.root ??\n                passwordInputButtonIconIconRawRoot(),\n            },\n          }}\n        />\n      }\n      classNames={{\n        root: cx(\n          classNames?.passwordInput ?? passwordInput(),\n          classNames?.root ?? passwordInputRoot(),\n        ),\n        label: classNames?.label ?? passwordInputLabel(),\n        required: classNames?.required ?? passwordInputRequired(),\n        description: classNames?.description ?? passwordInputDescription(),\n        error: classNames?.error ?? passwordInputError(),\n        wrapper: classNames?.wrapper ?? passwordInputWrapper(),\n        input: classNames?.input ?? passwordInputInput(),\n        section: classNames?.section ?? passwordInputSection(),\n      }}\n    />\n  );\n};\n"],"mappings":"6qBA6CA,MAAa,GAAiB,CAC5B,OACA,QACA,cACA,QACA,cACA,aACA,YACA,WACA,QACA,KACA,WACA,WACA,WACA,UACA,UACA,mBACA,sBACwB,CACxB,GAAM,CAAC,EAAS,GAAc,EAAS,GAAM,CAE7C,OACE,EAAC,EAAA,CACO,OACC,QACM,cACN,QACM,cACN,QACH,KACM,WACA,WACA,WACA,WACD,UACA,UACT,KAAM,EAAU,OAAS,WACd,YACX,QACE,EAAC,EAAA,CACC,KACE,EAAU,8BAAgC,0BAE5C,KAAK,yBACL,MACE,EACK,GAAoB,gBACpB,GAAoB,gBAE3B,YAAe,EAAW,CAAC,EAAQ,CACzB,WACV,WAAY,CACV,WACE,GAAY,YAAY,YAAc,GAAyB,CACjE,KAAM,GAAY,YAAY,MAAQ,GAA6B,CACnE,KAAM,GAAY,YAAY,MAAQ,GAA6B,CACnE,QAAS,CACP,QACE,GAAY,YAAY,SAAS,SACjC,GAAgC,CAClC,KACE,GAAY,YAAY,SAAS,MACjC,GAAoC,CACvC,CACF,EACD,CAEJ,WAAY,CACV,KAAM,EACJ,GAAY,eAAiB,GAAe,CAC5C,GAAY,MAAQ,GAAmB,CACxC,CACD,MAAO,GAAY,OAAS,GAAoB,CAChD,SAAU,GAAY,UAAY,GAAuB,CACzD,YAAa,GAAY,aAAe,GAA0B,CAClE,MAAO,GAAY,OAAS,GAAoB,CAChD,QAAS,GAAY,SAAW,GAAsB,CACtD,MAAO,GAAY,OAAS,GAAoB,CAChD,QAAS,GAAY,SAAW,GAAsB,CACvD,EACD"}

package/dist/components/controls/password-input-strength/PasswordInputStrength.d.mts

@@ -0,0 +1,43 @@
+import { PasswordInputProps } from "../password-input/PasswordInput.mjs";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
+
+//#region src/components/controls/password-input-strength/PasswordInputStrength.d.ts
+type PasswordInputStrengthProps = Omit<PasswordInputProps, 'classNames'> & {
+  weakPasswordText?: string;
+  mediumPasswordText?: string;
+  strongPasswordText?: string;
+  classNames?: Omit<NonNullable<PasswordInputProps['classNames']>, 'passwordInput'> & {
+    passwordInputStrength?: string;
+    strengthIndicator?: {
+      strengthIndicator?: string;
+      root?: string;
+      bars?: string;
+      bar?: string;
+      text?: string;
+    };
+  };
+};
+declare const PasswordInputStrength: ({
+  name,
+  label,
+  description,
+  error,
+  placeholder,
+  classNames,
+  startSlot,
+  onChange,
+  value,
+  defaultValue,
+  id,
+  disabled,
+  required,
+  readOnly,
+  onClick,
+  onFocus,
+  weakPasswordText,
+  mediumPasswordText,
+  strongPasswordText
+}: PasswordInputStrengthProps) => react_jsx_runtime19.JSX.Element;
+//#endregion
+export { PasswordInputStrength, PasswordInputStrengthProps };
+//# sourceMappingURL=PasswordInputStrength.d.mts.map

package/dist/components/controls/password-input-strength/PasswordInputStrength.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInputStrength.d.mts","names":[],"sources":["../../../../src/components/controls/password-input-strength/PasswordInputStrength.tsx"],"mappings":";;;;KAyBY,0BAAA,GAA6B,IAAA,CACvC,kBAAA;EAGA,gBAAA;EACA,kBAAA;EACA,kBAAA;EACA,UAAA,GAAa,IAAA,CACX,WAAA,CAAY,kBAAA;IAGZ,qBAAA;IACA,iBAAA;MACE,iBAAA;MACA,IAAA;MACA,IAAA;MACA,GAAA;MACA,IAAA;IAAA;EAAA;AAAA;AAAA,cA0DO,qBAAA;EAAyB,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,WAAA;EAAA,UAAA;EAAA,SAAA;EAAA,QAAA;EAAA,KAAA;EAAA,YAAA;EAAA,EAAA;EAAA,QAAA;EAAA,QAAA;EAAA,QAAA;EAAA,OAAA;EAAA,OAAA;EAAA,gBAAA;EAAA,kBAAA;EAAA;AAAA,GAoBnC,0BAAA,KAA0B,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/password-input-strength/PasswordInputStrength.mjs

@@ -0,0 +1,2 @@
+import{PasswordInput as e}from"../password-input/PasswordInput.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{passwordInputStrength as n,passwordInputStrengthDescription as r,passwordInputStrengthError as i,passwordInputStrengthInput as a,passwordInputStrengthLabel as o,passwordInputStrengthRequired as s,passwordInputStrengthRoot as c,passwordInputStrengthSection as l,passwordInputStrengthStrengthIndicator as u,passwordInputStrengthStrengthIndicatorBar as d,passwordInputStrengthStrengthIndicatorBars as f,passwordInputStrengthStrengthIndicatorRoot as p,passwordInputStrengthStrengthIndicatorText as m,passwordInputStrengthWrapper as h}from"@mage-ui/styled-system/recipes";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{useState as y}from"react";const b=[{re:/.{6,}/},{re:/.{10,}/},{re:/[0-9]/},{re:/[a-z]/},{re:/[A-Z]/},{re:/[$&+,:;=?@#|'<>.^*()%!-]/}],x=e=>{let t=0;if(!e)return 0;for(let n=0;n<b.length;n++)b[n].re.test(e)&&t++;return t},S=(e,t)=>{let n=Math.min(e,4);return t>=n?`neutral`:n<=1?`weak`:n<=3?`medium`:`strong`},C=(e,t)=>{let n=S(e,t);return n===`neutral`?`var(--password-input-strength-strength-indicator-bar-background-neutral)`:`var(--password-input-strength-strength-indicator-bar-background-${n})`},w=(e,t)=>e===0?``:e<=1?t.weakPasswordText:e<=3?t.mediumPasswordText:t.strongPasswordText,T=({name:b,label:S,description:T,error:E,placeholder:D,classNames:O,startSlot:k,onChange:A,value:j,defaultValue:M,id:N,disabled:P,required:F,readOnly:I,onClick:L,onFocus:R,weakPasswordText:z,mediumPasswordText:B,strongPasswordText:V})=>{let[H,U]=y(j??M??``),W=j??H,G=e=>{j===void 0&&U(e.target.value),A?.(e)},K={weakPasswordText:z??`Weak`,mediumPasswordText:B??`Medium`,strongPasswordText:V??`Strong`},q=x(W),J=w(q,K);return v(g,{children:[_(e,{name:b,label:S,description:T,error:E,placeholder:D,value:j,id:N,disabled:P,required:F,readOnly:I,onChange:G,onClick:L,onFocus:R,defaultValue:M,startSlot:k,classNames:{root:t(O?.passwordInputStrength??n(),O?.root??c()),label:O?.label??o(),required:O?.required??s(),description:O?.description??r(),error:O?.error??i(),wrapper:O?.wrapper??h(),input:O?.input??a(),section:O?.section??l()}}),v(`div`,{className:t(O?.strengthIndicator?.strengthIndicator??u(),O?.strengthIndicator?.root??p()),children:[_(`div`,{className:O?.strengthIndicator?.bars??f(),children:[0,1,2,3].map(e=>_(`div`,{className:O?.strengthIndicator?.bar??d(),style:{"--password-input-strength-strength-indicator-bar-background":C(q,e)}},e))}),_(`p`,{className:O?.strengthIndicator?.text??m(),children:J})]})]})};export{T as PasswordInputStrength};
+//# sourceMappingURL=PasswordInputStrength.mjs.map

package/dist/components/controls/password-input-strength/PasswordInputStrength.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PasswordInputStrength.mjs","names":[],"sources":["../../../../src/components/controls/password-input-strength/PasswordInputStrength.tsx"],"sourcesContent":["import { cx } from '@mage-ui/styled-system/css';\n\nimport {\n  PasswordInput,\n  type PasswordInputProps,\n} from '../password-input/PasswordInput';\nimport {\n  passwordInputStrength,\n  passwordInputStrengthDescription,\n  passwordInputStrengthError,\n  passwordInputStrengthInput,\n  passwordInputStrengthLabel,\n  passwordInputStrengthRequired,\n  passwordInputStrengthRoot,\n  passwordInputStrengthSection,\n  passwordInputStrengthStrengthIndicator,\n  passwordInputStrengthStrengthIndicatorBar,\n  passwordInputStrengthStrengthIndicatorBars,\n  passwordInputStrengthStrengthIndicatorText,\n  passwordInputStrengthStrengthIndicatorRoot,\n  passwordInputStrengthWrapper,\n} from '@mage-ui/styled-system/recipes';\n\nimport { type ChangeEvent, type CSSProperties, useState } from 'react';\n\nexport type PasswordInputStrengthProps = Omit<\n  PasswordInputProps,\n  'classNames'\n> & {\n  weakPasswordText?: string;\n  mediumPasswordText?: string;\n  strongPasswordText?: string;\n  classNames?: Omit<\n    NonNullable<PasswordInputProps['classNames']>,\n    'passwordInput'\n  > & {\n    passwordInputStrength?: string;\n    strengthIndicator?: {\n      strengthIndicator?: string;\n      root?: string;\n      bars?: string;\n      bar?: string;\n      text?: string;\n    };\n  };\n};\n\nconst requirements = [\n  { re: /.{6,}/ },\n  { re: /.{10,}/ },\n  { re: /[0-9]/ },\n  { re: /[a-z]/ },\n  { re: /[A-Z]/ },\n  { re: /[$&+,:;=?@#|'<>.^*()%!-]/ },\n];\n\nconst calculateStrength = (password: string) => {\n  let score = 0;\n  if (!password) return 0;\n\n  for (let i = 0; i < requirements.length; i++) {\n    const req = requirements[i];\n    if (req.re.test(password)) {\n      score++;\n    }\n  }\n  return score;\n};\n\nconst getStrengthState = (score: number, index: number) => {\n  const filledBars = Math.min(score, 4);\n\n  if (index >= filledBars) return 'neutral';\n  if (filledBars <= 1) return 'weak';\n  if (filledBars <= 3) return 'medium';\n  return 'strong';\n};\n\nconst getStateBackgroundBar = (score: number, index: number): string => {\n  const state = getStrengthState(score, index);\n  if (state === 'neutral') {\n    return 'var(--password-input-strength-strength-indicator-bar-background-neutral)';\n  }\n  return `var(--password-input-strength-strength-indicator-bar-background-${state})`;\n};\n\nconst getStrengthLabel = (\n  score: number,\n  texts: {\n    weakPasswordText: string;\n    mediumPasswordText: string;\n    strongPasswordText: string;\n  },\n) => {\n  if (score === 0) return '';\n  if (score <= 1) return texts.weakPasswordText;\n  if (score <= 3) return texts.mediumPasswordText;\n  return texts.strongPasswordText;\n};\n\nexport const PasswordInputStrength = ({\n  name,\n  label,\n  description,\n  error,\n  placeholder,\n  classNames,\n  startSlot,\n  onChange,\n  value,\n  defaultValue,\n  id,\n  disabled,\n  required,\n  readOnly,\n  onClick,\n  onFocus,\n  weakPasswordText,\n  mediumPasswordText,\n  strongPasswordText,\n}: PasswordInputStrengthProps) => {\n  const [innerValue, setInnerValue] = useState<string>(\n    (value as string) ?? (defaultValue as string) ?? '',\n  );\n\n  const currentValue = (value as string) ?? innerValue;\n\n  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n    if (value === undefined) {\n      setInnerValue(e.target.value);\n    }\n    onChange?.(e);\n  };\n  const passwordTexts = {\n    weakPasswordText: weakPasswordText ?? 'Weak',\n    mediumPasswordText: mediumPasswordText ?? 'Medium',\n    strongPasswordText: strongPasswordText ?? 'Strong',\n  };\n  const score = calculateStrength(currentValue);\n  const strengthLabel = getStrengthLabel(score, passwordTexts);\n\n  return (\n    <>\n      <PasswordInput\n        name={name}\n        label={label}\n        description={description}\n        error={error}\n        placeholder={placeholder}\n        value={value}\n        id={id}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        onChange={handleChange}\n        onClick={onClick}\n        onFocus={onFocus}\n        defaultValue={defaultValue}\n        startSlot={startSlot}\n        classNames={{\n          root: cx(\n            classNames?.passwordInputStrength ?? passwordInputStrength(),\n            classNames?.root ?? passwordInputStrengthRoot(),\n          ),\n          label: classNames?.label ?? passwordInputStrengthLabel(),\n          required: classNames?.required ?? passwordInputStrengthRequired(),\n          description:\n            classNames?.description ?? passwordInputStrengthDescription(),\n          error: classNames?.error ?? passwordInputStrengthError(),\n          wrapper: classNames?.wrapper ?? passwordInputStrengthWrapper(),\n          input: classNames?.input ?? passwordInputStrengthInput(),\n          section: classNames?.section ?? passwordInputStrengthSection(),\n        }}\n      />\n      <div\n        className={cx(\n          classNames?.strengthIndicator?.strengthIndicator ??\n            passwordInputStrengthStrengthIndicator(),\n          classNames?.strengthIndicator?.root ??\n            passwordInputStrengthStrengthIndicatorRoot(),\n        )}\n      >\n        <div\n          className={\n            classNames?.strengthIndicator?.bars ??\n            passwordInputStrengthStrengthIndicatorBars()\n          }\n        >\n          {[0, 1, 2, 3].map((index) => (\n            <div\n              key={index}\n              className={\n                classNames?.strengthIndicator?.bar ??\n                passwordInputStrengthStrengthIndicatorBar()\n              }\n              style={\n                {\n                  '--password-input-strength-strength-indicator-bar-background':\n                    getStateBackgroundBar(score, index),\n                } as CSSProperties\n              }\n            />\n          ))}\n        </div>\n        <p\n          className={\n            classNames?.strengthIndicator?.text ??\n            passwordInputStrengthStrengthIndicatorText()\n          }\n        >\n          {strengthLabel}\n        </p>\n      </div>\n    </>\n  );\n};\n"],"mappings":"mxBA+CA,MAAM,EAAe,CACnB,CAAE,GAAI,QAAS,CACf,CAAE,GAAI,SAAU,CAChB,CAAE,GAAI,QAAS,CACf,CAAE,GAAI,QAAS,CACf,CAAE,GAAI,QAAS,CACf,CAAE,GAAI,2BAA4B,CACnC,CAEK,EAAqB,GAAqB,CAC9C,IAAI,EAAQ,EACZ,GAAI,CAAC,EAAU,MAAO,GAEtB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAa,OAAQ,IAC3B,EAAa,GACjB,GAAG,KAAK,EAAS,EACvB,IAGJ,OAAO,GAGH,GAAoB,EAAe,IAAkB,CACzD,IAAM,EAAa,KAAK,IAAI,EAAO,EAAE,CAKrC,OAHI,GAAS,EAAmB,UAC5B,GAAc,EAAU,OACxB,GAAc,EAAU,SACrB,UAGH,GAAyB,EAAe,IAA0B,CACtE,IAAM,EAAQ,EAAiB,EAAO,EAAM,CAI5C,OAHI,IAAU,UACL,2EAEF,mEAAmE,EAAM,IAG5E,GACJ,EACA,IAMI,IAAU,EAAU,GACpB,GAAS,EAAU,EAAM,iBACzB,GAAS,EAAU,EAAM,mBACtB,EAAM,mBAGF,GAAyB,CACpC,OACA,QACA,cACA,QACA,cACA,aACA,YACA,WACA,QACA,eACA,KACA,WACA,WACA,WACA,UACA,UACA,mBACA,qBACA,wBACgC,CAChC,GAAM,CAAC,EAAY,GAAiB,EACjC,GAAqB,GAA2B,GAClD,CAEK,EAAgB,GAAoB,EAEpC,EAAgB,GAAqC,CACrD,IAAU,IAAA,IACZ,EAAc,EAAE,OAAO,MAAM,CAE/B,IAAW,EAAE,EAET,EAAgB,CACpB,iBAAkB,GAAoB,OACtC,mBAAoB,GAAsB,SAC1C,mBAAoB,GAAsB,SAC3C,CACK,EAAQ,EAAkB,EAAa,CACvC,EAAgB,EAAiB,EAAO,EAAc,CAE5D,OACE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,CACO,OACC,QACM,cACN,QACM,cACN,QACH,KACM,WACA,WACA,WACV,SAAU,EACD,UACA,UACK,eACH,YACX,WAAY,CACV,KAAM,EACJ,GAAY,uBAAyB,GAAuB,CAC5D,GAAY,MAAQ,GAA2B,CAChD,CACD,MAAO,GAAY,OAAS,GAA4B,CACxD,SAAU,GAAY,UAAY,GAA+B,CACjE,YACE,GAAY,aAAe,GAAkC,CAC/D,MAAO,GAAY,OAAS,GAA4B,CACxD,QAAS,GAAY,SAAW,GAA8B,CAC9D,MAAO,GAAY,OAAS,GAA4B,CACxD,QAAS,GAAY,SAAW,GAA8B,CAC/D,EACD,CACF,EAAC,MAAA,CACC,UAAW,EACT,GAAY,mBAAmB,mBAC7B,GAAwC,CAC1C,GAAY,mBAAmB,MAC7B,GAA4C,CAC/C,WAED,EAAC,MAAA,CACC,UACE,GAAY,mBAAmB,MAC/B,GAA4C,UAG7C,CAAC,EAAG,EAAG,EAAG,EAAE,CAAC,IAAK,GACjB,EAAC,MAAA,CAEC,UACE,GAAY,mBAAmB,KAC/B,GAA2C,CAE7C,MACE,CACE,8DACE,EAAsB,EAAO,EAAM,CACtC,EATE,EAWL,CACF,EACE,CACN,EAAC,IAAA,CACC,UACE,GAAY,mBAAmB,MAC/B,GAA4C,UAG7C,GACC,CAAA,EACA,CAAA,CAAA,CACL"}

package/dist/components/controls/radio/Radio.d.mts

@@ -0,0 +1,53 @@
+import { RadioGroupProps } from "../radio-group/RadioGroup.mjs";
+import { ComponentProps, ReactNode } from "react";
+
+//#region src/components/controls/radio/Radio.d.ts
+type RadioProps = Omit<ComponentProps<'input'>, 'size'> & {
+  label: ReactNode;
+  hiddenLabel?: boolean;
+  error?: ReactNode;
+  description?: ReactNode;
+  value?: string;
+  classNames?: {
+    root?: string;
+    radio?: string;
+    radioRadio?: string;
+    icon?: string;
+    inner?: string;
+    body?: string;
+    labelWrapper?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+  };
+};
+declare const Radio: {
+  ({
+    classNames,
+    label,
+    hiddenLabel,
+    description,
+    error,
+    value,
+    disabled,
+    onChange
+  }: RadioProps): ReactNode;
+  displayName: string;
+  Group: {
+    ({
+      label,
+      error,
+      description,
+      children,
+      value,
+      onChange,
+      hiddenLabel,
+      required,
+      classNames
+    }: RadioGroupProps): ReactNode;
+    displayName: string;
+  };
+};
+//#endregion
+export { Radio, RadioProps };
+//# sourceMappingURL=Radio.d.mts.map

package/dist/components/controls/radio/Radio.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.mts","names":[],"sources":["../../../../src/components/controls/radio/Radio.tsx"],"mappings":";;;;KAoBY,UAAA,GAAa,IAAA,CAAK,cAAA;EAC5B,KAAA,EAAO,SAAA;EACP,WAAA;EACA,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA;EACA,UAAA;IACE,IAAA;IACA,KAAA;IACA,UAAA;IACA,IAAA;IACA,KAAA;IACA,IAAA;IACA,YAAA;IACA,KAAA;IACA,WAAA;IACA,KAAA;EAAA;AAAA;AAAA,cAIS,KAAA;EAAA;;;;;;;;;KAUR,UAAA,GAAa,SAAA"}

package/dist/components/controls/radio/Radio.mjs

@@ -0,0 +1,2 @@
+import{RadioGroup as e}from"../radio-group/RadioGroup.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{radio as n,radioBody as r,radioDescription as i,radioError as a,radioIcon as o,radioInner as s,radioLabel as c,radioLabelWrapper as l,radioRadio as u,radioRoot as d}from"@mage-ui/styled-system/recipes";import{Radio as f}from"@mantine/core";import{jsx as p}from"react/jsx-runtime";import{visuallyHidden as m}from"@mage-ui/styled-system/patterns";const h=({classNames:e,label:h,hiddenLabel:g,description:_,error:v,value:y,disabled:b,onChange:x})=>p(f,{classNames:{root:t(e?.radio??n(),e?.root??d()),radio:t(e?.radioRadio??u(),`peer`),icon:e?.icon??o(),inner:e?.inner??s(),body:e?.body??r(),labelWrapper:e?.labelWrapper??l(),label:t(e?.label??c(),g&&m()),description:e?.description??i(),error:e?.error??a()},label:h,description:_,error:v,value:y,disabled:b,onChange:x});h.displayName=`Radio`,h.Group=e;export{h as Radio};
+//# sourceMappingURL=Radio.mjs.map

package/dist/components/controls/radio/Radio.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.mjs","names":["Radio","MantineRadio"],"sources":["../../../../src/components/controls/radio/Radio.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  radio,\n  radioBody,\n  radioDescription,\n  radioError,\n  radioIcon,\n  radioInner,\n  radioLabel,\n  radioLabelWrapper,\n  radioRadio,\n  radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Radio as MantineRadio } from '@mantine/core';\n\nimport { RadioGroup } from '../radio-group/RadioGroup';\nimport { visuallyHidden } from '@mage-ui/styled-system/patterns';\n\nexport type RadioProps = Omit<ComponentProps<'input'>, 'size'> & {\n  label: ReactNode;\n  hiddenLabel?: boolean;\n  error?: ReactNode;\n  description?: ReactNode;\n  value?: string;\n  classNames?: {\n    root?: string;\n    radio?: string;\n    radioRadio?: string;\n    icon?: string;\n    inner?: string;\n    body?: string;\n    labelWrapper?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n  };\n};\n\nexport const Radio = (\n  { \n    classNames, \n    label,\n    hiddenLabel,\n    description,\n    error,\n    value,\n    disabled,\n    onChange,\n  }: RadioProps): ReactNode => {\n  return (\n    <MantineRadio\n      classNames={{\n        root: cx(classNames?.radio ?? radio(), classNames?.root ?? radioRoot()),\n        radio: cx(classNames?.radioRadio ?? radioRadio(), 'peer'),\n        icon: classNames?.icon ?? radioIcon(),\n        inner: classNames?.inner ?? radioInner(),\n        body: classNames?.body ?? radioBody(),\n        labelWrapper: classNames?.labelWrapper ?? radioLabelWrapper(),\n        label: cx(classNames?.label ?? radioLabel(), hiddenLabel && visuallyHidden()),\n        description: classNames?.description ?? radioDescription(),\n        error: classNames?.error ?? radioError(),\n      }}\n      label={label}\n      description={description}\n      error={error}\n      value={value}\n      disabled={disabled}\n      onChange={onChange}\n    />\n  );\n};\n\nRadio.displayName = 'Radio';\nRadio.Group = RadioGroup;"],"mappings":"2cAwCA,MAAaA,GACX,CACE,aACA,QACA,cACA,cACA,QACA,QACA,WACA,cAGA,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,EAAG,GAAY,OAAS,GAAO,CAAE,GAAY,MAAQ,GAAW,CAAC,CACvE,MAAO,EAAG,GAAY,YAAc,GAAY,CAAE,OAAO,CACzD,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,KAAM,GAAY,MAAQ,GAAW,CACrC,aAAc,GAAY,cAAgB,GAAmB,CAC7D,MAAO,EAAG,GAAY,OAAS,GAAY,CAAE,GAAe,GAAgB,CAAC,CAC7E,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,CACzC,CACM,QACM,cACN,QACA,QACG,WACA,YACV,CAIN,EAAM,YAAc,QACpB,EAAM,MAAQ"}

package/dist/components/controls/{radio/RadioGroup.d.ts → radio-group/RadioGroup.d.mts}

@@ -1,27 +1,25 @@
 import { ReactNode } from "react";
 
-//#region src/components/controls/radio/RadioGroup.d.ts
+//#region src/components/controls/radio-group/RadioGroup.d.ts
 type RadioGroupProps = {
-  label?: ReactNode;
+  label: ReactNode;
   error?: ReactNode;
   description?: ReactNode;
   children?: ReactNode;
   value?: string;
-  name?: string;
   onChange?: (value: string) => void;
+  hiddenLabel?: boolean;
+  required?: boolean;
   classNames?: {
+    radioGroup?: string;
     root?: string;
-    radio?: string;
-    icon?: string;
-    inner?: string;
-    body?: string;
-    labelWrapper?: string;
     label?: string;
     description?: string;
     error?: string;
-    groupRoot?: string;
+    required?: string;
+    groupList?: string;
   };
 };
 //#endregion
 export { RadioGroupProps };
-//# sourceMappingURL=RadioGroup.d.ts.map
+//# sourceMappingURL=RadioGroup.d.mts.map

package/dist/components/controls/radio-group/RadioGroup.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.mts","names":[],"sources":["../../../../src/components/controls/radio-group/RadioGroup.tsx"],"mappings":";;;KAeY,eAAA;EACV,KAAA,EAAO,SAAA;EACP,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,QAAA,GAAW,SAAA;EACX,KAAA;EACA,QAAA,IAAY,KAAA;EACZ,WAAA;EACA,QAAA;EACA,UAAA;IACE,UAAA;IACA,IAAA;IACA,KAAA;IACA,WAAA;IACA,KAAA;IACA,QAAA;IACA,SAAA;EAAA;AAAA"}

package/dist/components/controls/radio-group/RadioGroup.mjs

@@ -0,0 +1,2 @@
+import{cx as e}from"@mage-ui/styled-system/css";import{radioGroup as t,radioGroupDescription as n,radioGroupError as r,radioGroupGroup as i,radioGroupLabel as a,radioGroupRequired as o,radioGroupRoot as s}from"@mage-ui/styled-system/recipes";import{Radio as c}from"@mantine/core";import{jsx as l}from"react/jsx-runtime";import{visuallyHidden as u}from"@mage-ui/styled-system/patterns";const d=({label:d,error:f,description:p,children:m,value:h,onChange:g,hiddenLabel:_,required:v,classNames:y})=>l(c.Group,{classNames:{root:e(y?.radioGroup??t(),y?.root??s()),label:e(y?.label??a(),_&&u()),description:y?.description??n(),required:y?.required??o(),error:y?.error??r()},label:d,description:p,error:f,value:h,onChange:g,withAsterisk:v,children:l(`div`,{className:y?.groupList??i(),children:m})});d.displayName=`Radio.Group`;export{d as RadioGroup};
+//# sourceMappingURL=RadioGroup.mjs.map

package/dist/components/controls/radio-group/RadioGroup.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.mjs","names":["MantineRadio"],"sources":["../../../../src/components/controls/radio-group/RadioGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  radioGroup,\n  radioGroupDescription,\n  radioGroupError,\n  radioGroupGroup,\n  radioGroupLabel,\n  radioGroupRequired,\n  radioGroupRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Radio as MantineRadio } from '@mantine/core';\nimport { visuallyHidden } from '@mage-ui/styled-system/patterns';\n\nexport type RadioGroupProps = {\n  label: ReactNode;\n  error?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  value?: string;\n  onChange?: (value: string) => void;\n  hiddenLabel?: boolean;\n  required?: boolean;\n  classNames?: {\n    radioGroup?: string;\n    root?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n    required?: string;\n    groupList?: string;\n  };\n};\n\nexport const RadioGroup = ({\n  label,\n  error,\n  description,\n  children,\n  value,\n  onChange,\n  hiddenLabel,\n  required,\n  classNames,\n}: RadioGroupProps): ReactNode => {\n  return (\n    <MantineRadio.Group\n      classNames={{\n        root: cx(\n          classNames?.radioGroup ?? radioGroup(),\n          classNames?.root ?? radioGroupRoot(),\n        ),\n        label: cx(classNames?.label ?? radioGroupLabel(), hiddenLabel && visuallyHidden()),\n        description: classNames?.description ?? radioGroupDescription(),\n        required: classNames?.required ?? radioGroupRequired(),\n        error: classNames?.error ?? radioGroupError(),\n      }}\n      label={label}\n      description={description}\n      error={error}\n      value={value}\n      onChange={onChange}\n      withAsterisk={required}\n    >\n      <div className={classNames?.groupList ?? radioGroupGroup()}>\n        {children}\n      </div>\n    </MantineRadio.Group>\n  );\n};\n\nRadioGroup.displayName = 'Radio.Group';"],"mappings":"iYAmCA,MAAa,GAAc,CACzB,QACA,QACA,cACA,WACA,QACA,WACA,cACA,WACA,gBAGE,EAACA,EAAa,MAAA,CACZ,WAAY,CACV,KAAM,EACJ,GAAY,YAAc,GAAY,CACtC,GAAY,MAAQ,GAAgB,CACrC,CACD,MAAO,EAAG,GAAY,OAAS,GAAiB,CAAE,GAAe,GAAgB,CAAC,CAClF,YAAa,GAAY,aAAe,GAAuB,CAC/D,SAAU,GAAY,UAAY,GAAoB,CACtD,MAAO,GAAY,OAAS,GAAiB,CAC9C,CACM,QACM,cACN,QACA,QACG,WACV,aAAc,WAEd,EAAC,MAAA,CAAI,UAAW,GAAY,WAAa,GAAiB,CACvD,YACG,EACa,CAIzB,EAAW,YAAc"}

package/dist/components/controls/select/Select.d.mts

@@ -0,0 +1,38 @@
+import { DropdownProps } from "../dropdown/Dropdown.mjs";
+import * as react_jsx_runtime23 from "react/jsx-runtime";
+import { ReactNode } from "react";
+
+//#region src/components/controls/select/Select.d.ts
+type SelectProps = Omit<DropdownProps, 'classNames' | 'onChange' | 'onBlur' | 'onFocus' | 'onClick' | 'setValue' | 'children'> & {
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  emptyMessage?: ReactNode;
+  options: {
+    id: string | number;
+    value: string;
+  }[];
+  btnClearLabel?: string;
+  classNames?: Omit<NonNullable<DropdownProps['classNames']>, 'dropdown'> & {
+    select?: string;
+  };
+};
+declare const Select: ({
+  name,
+  label,
+  placeholder,
+  options,
+  error,
+  disabled,
+  startSlot,
+  withinPortal,
+  keepMounted,
+  clearable,
+  searchable,
+  searchPlaceholder,
+  emptyMessage,
+  btnClearLabel,
+  classNames
+}: SelectProps) => react_jsx_runtime23.JSX.Element;
+//#endregion
+export { Select, SelectProps };
+//# sourceMappingURL=Select.d.mts.map

package/dist/components/controls/select/Select.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.mts","names":[],"sources":["../../../../src/components/controls/select/Select.tsx"],"mappings":";;;;;KAiCY,WAAA,GAAc,IAAA,CACxB,aAAA;EASA,UAAA;EACA,iBAAA;EACA,YAAA,GAAe,SAAA;EACf,OAAA;IACE,EAAA;IACA,KAAA;EAAA;EAEF,aAAA;EACA,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,aAAA;IAC5B,MAAA;EAAA;AAAA;AAAA,cAIS,MAAA;EAAU,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,OAAA;EAAA,KAAA;EAAA,QAAA;EAAA,SAAA;EAAA,YAAA;EAAA,WAAA;EAAA,SAAA;EAAA,UAAA;EAAA,iBAAA;EAAA,YAAA;EAAA,aAAA;EAAA;AAAA,GAgBpB,WAAA,KAAW,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/select/Select.mjs

@@ -0,0 +1,2 @@
+import{Dropdown as e}from"../dropdown/Dropdown.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{select as n,selectChevron as r,selectChevronIcon as i,selectChevronIconRoot as a,selectChevronRoot as o,selectClearButton as s,selectClearButtonIcon as c,selectClearButtonIconRaw as l,selectClearButtonIconRawRoot as u,selectClearButtonRoot as d,selectEmpty as f,selectOption as p,selectOptions as m,selectRoot as h,selectScrollAreaAutosize as g,selectSearch as _,selectTextInput as v,selectTextInputDescription as y,selectTextInputError as b,selectTextInputInput as x,selectTextInputLabel as S,selectTextInputRequired as C,selectTextInputRoot as w,selectTextInputSection as T,selectTextInputWrapper as E}from"@mage-ui/styled-system/recipes";import{jsx as D,jsxs as O}from"react/jsx-runtime";import{useState as k}from"react";const A=({name:A,label:j,placeholder:M,options:N,error:P,disabled:F,startSlot:I,withinPortal:L=!1,keepMounted:R,clearable:z,searchable:B,searchPlaceholder:V,emptyMessage:H,btnClearLabel:U=`Clear selection`,classNames:W})=>{let[G,K]=k(``),[q,J]=k({id:``,value:``}),Y=(B?N.filter(e=>e.value.toLowerCase().includes(G.toLowerCase().trim())):N).map(t=>D(e.Option,{value:t.value,children:t.value},t.id));return O(e,{readOnly:!0,startSlot:I,name:A,label:j,placeholder:M,error:P,disabled:F,withinPortal:L,keepMounted:R,clearable:z,chevron:!0,btnClearLabel:U,onClick:e=>e.openDropdown(),onFocus:e=>e.openDropdown(),onBlur:e=>{!B&&e.closeDropdown()},onChange:e=>{e.openDropdown(),e.updateSelectedOptionIndex()},setValue:(e,t)=>{if(e===void 0){J({id:``,value:``}),K(``);return}J(N.find(t=>t.value===e)??{id:``,value:``}),K(``),t.closeDropdown()},value:q?.value,classNames:{dropdown:W?.select??n(),root:W?.root??h(),options:W?.options??m(),option:W?.option??p(),empty:W?.empty??f(),search:W?.search??_(),textInput:{root:W?.textInput?.root??t(v(),w()),label:W?.textInput?.label??S(),description:W?.textInput?.description??y(),error:W?.textInput?.error??b(),wrapper:W?.textInput?.wrapper??E(),input:W?.textInput?.input??x(),section:W?.textInput?.section??T(),required:W?.textInput?.required??C(),endSlot:{chevron:{iconWrapped:W?.textInput?.endSlot?.chevron?.iconWrapped??r(),root:W?.textInput?.endSlot?.chevron?.root??o(),open:{iconRaw:W?.textInput?.endSlot?.chevron?.open?.iconRaw??i(),root:W?.textInput?.endSlot?.chevron?.open?.root??a()},close:{iconRaw:W?.textInput?.endSlot?.chevron?.close?.iconRaw??i(),root:W?.textInput?.endSlot?.chevron?.close?.root??a({invert:!0})}},clearButton:{buttonIcon:W?.textInput?.endSlot?.clearButton?.buttonIcon??s(),root:W?.textInput?.endSlot?.clearButton?.root??d(),icon:W?.textInput?.endSlot?.clearButton?.icon??c(),iconRaw:{iconRaw:W?.textInput?.endSlot?.clearButton?.iconRaw?.iconRaw??l(),root:W?.textInput?.endSlot?.clearButton?.iconRaw?.root??u()}}}},scrollArea:{scrollArea:W?.scrollArea?.scrollArea??g()}},children:[B&&D(e.Search,{value:G,onChange:e=>K(e.currentTarget.value),placeholder:V}),D(e.Options,{children:Y.length>0?Y:D(e.Empty,{children:H})})]})};export{A as Select};
+//# sourceMappingURL=Select.mjs.map

package/dist/components/controls/select/Select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.mjs","names":[],"sources":["../../../../src/components/controls/select/Select.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { useState } from 'react';\nimport { cx } from '@mage-ui/styled-system/css';\nimport { Dropdown } from '../dropdown/Dropdown';\nimport type { DropdownProps } from '../dropdown/Dropdown';\nimport {\n  select,\n  selectEmpty,\n  selectOption,\n  selectOptions,\n  selectRoot,\n  selectSearch,\n  selectTextInputInput,\n  selectTextInputRoot,\n  selectTextInputLabel,\n  selectTextInputDescription,\n  selectTextInputError,\n  selectTextInputWrapper,\n  selectTextInputSection,\n  selectTextInputRequired,\n  selectChevron,\n  selectChevronRoot,\n  selectChevronIcon,\n  selectChevronIconRoot,\n  selectClearButton,\n  selectClearButtonRoot,\n  selectClearButtonIcon,\n  selectClearButtonIconRaw,\n  selectClearButtonIconRawRoot,\n  selectTextInput,\n  selectScrollAreaAutosize,\n} from '@mage-ui/styled-system/recipes';\n\nexport type SelectProps = Omit<\n  DropdownProps,\n  | 'classNames'\n  | 'onChange'\n  | 'onBlur'\n  | 'onFocus'\n  | 'onClick'\n  | 'setValue'\n  | 'children'\n> & {\n  searchable?: boolean;\n  searchPlaceholder?: string;\n  emptyMessage?: ReactNode;\n  options: {\n    id: string | number;\n    value: string;\n  }[];\n  btnClearLabel?: string;\n  classNames?: Omit<NonNullable<DropdownProps['classNames']>, 'dropdown'> & {\n    select?: string;\n  };\n};\n\nexport const Select = ({\n  name,\n  label,\n  placeholder,\n  options,\n  error,\n  disabled,\n  startSlot,\n  withinPortal = false,\n  keepMounted,\n  clearable,\n  searchable,\n  searchPlaceholder,\n  emptyMessage,\n  btnClearLabel = 'Clear selection',\n  classNames,\n}: SelectProps) => {\n  const [search, setSearch] = useState('');\n\n  const [value, setValue] = useState<{ id: string | number; value: string }>({\n    id: '',\n    value: '',\n  });\n\n  const filteredOptions = searchable\n    ? options.filter((item) =>\n      item.value.toLowerCase().includes(search.toLowerCase().trim()),\n    )\n    : options;\n\n  const optionsList = filteredOptions.map((item) => (\n    <Dropdown.Option value={item.value} key={item.id}>\n      {item.value}\n    </Dropdown.Option>\n  ));\n\n  return (\n    <Dropdown\n      readOnly\n      startSlot={startSlot}\n      name={name}\n      label={label}\n      placeholder={placeholder}\n      error={error}\n      disabled={disabled}\n      withinPortal={withinPortal}\n      keepMounted={keepMounted}\n      clearable={clearable}\n      chevron={true}\n      btnClearLabel={btnClearLabel}\n      onClick={(combobox) => combobox.openDropdown()}\n      onFocus={(combobox) => combobox.openDropdown()}\n      onBlur={(combobox) => {\n        !searchable && combobox.closeDropdown();\n      }}\n      onChange={(combobox) => {\n        combobox.openDropdown();\n        combobox.updateSelectedOptionIndex();\n      }}\n      setValue={(val, combobox) => {\n        if (val === undefined) {\n          setValue({ id: '', value: '' });\n          setSearch('');\n          return;\n        }\n        const option = options.find((option) => option.value === val);\n        setValue(option ?? { id: '', value: '' });\n        setSearch('');\n        combobox.closeDropdown();\n      }}\n      value={value?.value}\n      classNames={{\n        dropdown: classNames?.select ?? select(),\n        root: classNames?.root ?? selectRoot(),\n        options: classNames?.options ?? selectOptions(),\n        option: classNames?.option ?? selectOption(),\n        empty: classNames?.empty ?? selectEmpty(),\n        search: classNames?.search ?? selectSearch(),\n        textInput: {\n          root:\n            classNames?.textInput?.root ??\n            cx(selectTextInput(), selectTextInputRoot()),\n          label: classNames?.textInput?.label ?? selectTextInputLabel(),\n          description:\n            classNames?.textInput?.description ?? selectTextInputDescription(),\n          error: classNames?.textInput?.error ?? selectTextInputError(),\n          wrapper: classNames?.textInput?.wrapper ?? selectTextInputWrapper(),\n          input: classNames?.textInput?.input ?? selectTextInputInput(),\n          section: classNames?.textInput?.section ?? selectTextInputSection(),\n          required:\n            classNames?.textInput?.required ?? selectTextInputRequired(),\n          endSlot: {\n            chevron: {\n              iconWrapped:\n                classNames?.textInput?.endSlot?.chevron?.iconWrapped ??\n                selectChevron(),\n              root:\n                classNames?.textInput?.endSlot?.chevron?.root ??\n                selectChevronRoot(),\n              open: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.chevron?.open?.iconRaw ??\n                  selectChevronIcon(),\n                root:\n                  classNames?.textInput?.endSlot?.chevron?.open?.root ??\n                  selectChevronIconRoot(),\n              },\n              close: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.chevron?.close?.iconRaw ??\n                  selectChevronIcon(),\n                root:\n                  classNames?.textInput?.endSlot?.chevron?.close?.root ??\n                  selectChevronIconRoot({ invert: true }),\n              },\n            },\n            clearButton: {\n              buttonIcon:\n                classNames?.textInput?.endSlot?.clearButton?.buttonIcon ??\n                selectClearButton(),\n              root:\n                classNames?.textInput?.endSlot?.clearButton?.root ??\n                selectClearButtonRoot(),\n              icon:\n                classNames?.textInput?.endSlot?.clearButton?.icon ??\n                selectClearButtonIcon(),\n              iconRaw: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw\n                    ?.iconRaw ?? selectClearButtonIconRaw(),\n                root:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw?.root ??\n                  selectClearButtonIconRawRoot(),\n              },\n            },\n          },\n        },\n        scrollArea: {\n          scrollArea: classNames?.scrollArea?.scrollArea ?? selectScrollAreaAutosize(),\n        },\n      }}\n    >\n      {searchable && (\n        <Dropdown.Search\n          value={search}\n          onChange={(event) => setSearch(event.currentTarget.value)}\n          placeholder={searchPlaceholder}\n        />\n      )}\n      <Dropdown.Options>\n        {optionsList.length > 0 ? (\n          optionsList\n        ) : (\n          <Dropdown.Empty>{emptyMessage}</Dropdown.Empty>\n        )}\n      </Dropdown.Options>\n    </Dropdown>\n  );\n};\n"],"mappings":"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"}