@mage-ui/components 0.0.24 → 0.0.26

package/dist/components/buttons/button/Button.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime37 from "react/jsx-runtime";
+import * as react_jsx_runtime10 from "react/jsx-runtime";
 import { ComponentProps, ReactNode } from "react";
 
 //#region src/components/buttons/button/Button.d.ts
@@ -18,7 +18,7 @@ declare const Button: ({
   endSlot,
   children,
   ...props
-}: ButtonProps) => react_jsx_runtime37.JSX.Element;
+}: ButtonProps) => react_jsx_runtime10.JSX.Element;
 //# sourceMappingURL=Button.d.ts.map
 
 //#endregion

package/dist/components/buttons/button-icon/ButtonIcon.d.ts

@@ -1,5 +1,5 @@
 import { ButtonProps } from "../button/Button.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime11 from "react/jsx-runtime";
 
 //#region src/components/buttons/button-icon/ButtonIcon.d.ts
 type ButtonIconProps = ButtonProps & {
@@ -15,7 +15,7 @@ declare const ButtonIcon: ({
   icon,
   classNames,
   ...props
-}: ButtonIconProps) => react_jsx_runtime1.JSX.Element;
+}: ButtonIconProps) => react_jsx_runtime11.JSX.Element;
 //# sourceMappingURL=ButtonIcon.d.ts.map
 
 //#endregion

package/dist/components/buttons/button-icon/ButtonIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.d.ts","names":[],"sources":["../../../../src/components/buttons/button-icon/ButtonIcon.tsx"],"sourcesContent":[],"mappings":";;;;KAMY,eAAA,GAAkB;;;EAAlB,UAAA,CAAA,EAAA;IASC,IAAA,CAAA,EAAA,MAkBZ;IAAA,IAAA,CAAA,EAAA,MAAA;EAAA,CAAA;CAlB0B;AAAA,cAAd,UAAc,EAAA,CAAA;EAAA,KAAA;EAAA,IAAA;EAAA,UAAA;EAAA,GAAA;AAAA,CAAA,EAKxB,eALwB,EAAA,GAKT,kBAAA,CAAA,GAAA,CAAA,OALS"}
+{"version":3,"file":"ButtonIcon.d.ts","names":[],"sources":["../../../../src/components/buttons/button-icon/ButtonIcon.tsx"],"sourcesContent":[],"mappings":";;;;KAMY,eAAA,GAAkB;;;EAAlB,UAAA,CAAA,EAAA;IASC,IAAA,CAAA,EAAA,MAkBZ;IAAA,IAAA,CAAA,EAAA,MAAA;EAAA,CAAA;CAlB0B;AAAA,cAAd,UAAc,EAAA,CAAA;EAAA,KAAA;EAAA,IAAA;EAAA,UAAA;EAAA,GAAA;AAAA,CAAA,EAKxB,eALwB,EAAA,GAKT,mBAAA,CAAA,GAAA,CAAA,OALS"}

package/dist/components/controls/checkbox/CheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.js","names":["MantineCheckbox","MantineGroup"],"sources":["../../../../src/components/controls/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  radioDescription,\n  radioError,\n  radioGroupRoot,\n  radioLabel,\n  radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport {\n  Checkbox as MantineCheckbox,\n  Group as MantineGroup,\n} from '@mantine/core';\n\nexport type CheckboxGroupProps = {\n  label?: string;\n  error?: string;\n  description?: string;\n  children?: ReactNode;\n  value?: string[];\n  onChange?: (value: string[]) => void;\n  classNames?: {\n    root?: string;\n    radio?: string;\n    icon?: string;\n    inner?: string;\n    body?: string;\n    labelWrapper?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n    groupRoot?: string;\n  };\n};\n\nexport const CheckboxGroup = ({\n  classNames,\n  children,\n  ...props\n}: CheckboxGroupProps): ReactNode => {\n  return (\n    <MantineCheckbox.Group\n      classNames={{\n        root: classNames?.root ?? radioRoot(),\n        label: classNames?.label ?? radioLabel(),\n        description: classNames?.description ?? radioDescription(),\n        error: classNames?.error ?? radioError(),\n      }}\n      {...props}\n    >\n      <MantineGroup\n        classNames={{\n          root: classNames?.groupRoot ?? radioGroupRoot(),\n        }}\n      >\n        {children}\n      </MantineGroup>\n    </MantineCheckbox.Group>\n  );\n};\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n"],"mappings":"iOAmCA,MAAa,EAAgB,CAAC,CAC5B,aACA,WACA,GAAG,EACgB,GAEjB,EAACA,EAAgB,MAAA,CACf,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,AACzC,EACD,GAAI,WAEJ,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,WAAa,GAAgB,AAChD,EAEA,YACY,EACO,CAI5B,EAAc,YAAc"}
+{"version":3,"file":"CheckboxGroup.js","names":["MantineCheckbox","MantineGroup"],"sources":["../../../../src/components/controls/checkbox/CheckboxGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  radioDescription,\n  radioError,\n  radioGroupRoot,\n  radioLabel,\n  radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport {\n  Checkbox as MantineCheckbox,\n  Group as MantineGroup,\n} from '@mantine/core';\n\nexport type CheckboxGroupProps = {\n  label?: ReactNode;\n  error?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  value?: string[];\n  onChange?: (value: string[]) => void;\n  classNames?: {\n    root?: string;\n    radio?: string;\n    icon?: string;\n    inner?: string;\n    body?: string;\n    labelWrapper?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n    groupRoot?: string;\n  };\n};\n\nexport const CheckboxGroup = ({\n  classNames,\n  children,\n  ...props\n}: CheckboxGroupProps): ReactNode => {\n  return (\n    <MantineCheckbox.Group\n      classNames={{\n        root: classNames?.root ?? radioRoot(),\n        label: classNames?.label ?? radioLabel(),\n        description: classNames?.description ?? radioDescription(),\n        error: classNames?.error ?? radioError(),\n      }}\n      {...props}\n    >\n      <MantineGroup\n        classNames={{\n          root: classNames?.groupRoot ?? radioGroupRoot(),\n        }}\n      >\n        {children}\n      </MantineGroup>\n    </MantineCheckbox.Group>\n  );\n};\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n"],"mappings":"iOAmCA,MAAa,EAAgB,CAAC,CAC5B,aACA,WACA,GAAG,EACgB,GAEjB,EAACA,EAAgB,MAAA,CACf,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,AACzC,EACD,GAAI,WAEJ,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,WAAa,GAAgB,AAChD,EAEA,YACY,EACO,CAI5B,EAAc,YAAc"}

package/dist/components/controls/date-picker/DatePicker.d.ts

@@ -7,6 +7,7 @@ type DatePickerProps = {
   label?: string;
   placeholder?: string;
   description?: string;
+  icon?: React.ReactNode;
   error?: string;
   classNames?: DatePickerClassNames;
   value?: DatePickerValue;
@@ -17,6 +18,7 @@ declare const DatePicker: ({
   label,
   placeholder,
   description,
+  icon,
   ...props
 }: DatePickerProps) => ReactNode;
 type DatePickerClassNames = InputClassNamesType & CalenderHeaderClassNamesType & CalendarMonthClassNamesType & CalendarMonthsListClassNamesType & CalendarYearsListClassNamesType & PopoverClassNamesType;

package/dist/components/controls/date-picker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":[],"mappings":";;;;KAoCY,eAAA;;EAAA,KAAA,CAAA,EAAA,MAAA;EAAe,WAAA,CAAA,EAAA,MAAA;EAAA,WAMZ,CAAA,EAAA,MAAA;EAAoB,KACzB,CAAA,EAAA,MAAA;EAAe,UACL,CAAA,EAFL,oBAEK;EAAI,KAAA,CAAA,EADd,eACc;EAGX,QAAA,CAAA,EAAA,CAAA,IAoBZ,EAvBmB,IAuBnB,GAAA,MAAA,GAAA,IAAA,EAAA,GAAA,IAAA;CAAA;AApB0B,cAAd,UAAc,EAAA,CAAA;EAAA,UAAA;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,GAAA;AAAA,CAAA,EAMxB,eANwB,EAAA,GAMN,SANM;KAsBtB,oBAAA,GAAuB,mBAtBD,GAuBzB,4BAvByB,GAwBzB,2BAxByB,GAyBzB,gCAzByB,GA0BzB,+BA1ByB,GA2BzB,qBA3ByB;KA6BtB,mBAAA,GA7BsB;EAAA,IAAA,CAAA,EAAA,MAAA;EAAA,OAMxB,CAAA,EAAA,MAAA;EAAe,KAAG,CAAA,EAAA,MAAA;EAcpB,KAAA,CAAA,EAAA,MAAA;EAEI,KAAA,CAAA,EAAA,MAAA;EAAoB,WAAA,CAAA,EAAA,MAAA;EAAA,WAAG,CAAA,EAAA,MAAA;EAAmB,OAC7C,CAAA,EAAA,MAAA;CAA4B;KA8BzB,4BAAA,GA5BH;EAAgC,kBAChC,CAAA,EAAA,MAAA;EAA+B,qBAC/B,CAAA,EAAA,MAAA;EAAqB,cAAA,CAAA,EAAA,MAAA;EAElB,mBAAA,CAAA,EAAmB,MAAA;EAwBnB,yBAAA,CAAA,EAAA,MAA4B;AAAA,CAAA;AAsBD,KAA3B,2BAAA,GAmBA;EAoBA,aAAA,CAAA,EAAA,MAAA;EAmBA,mBAAA,CAAA,EAAA,MAAqB;;;;;;KAvCrB,gCAAA;;;;;;KAoBA,+BAAA;;;;;;KAmBA,qBAAA"}
+{"version":3,"file":"DatePicker.d.ts","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":[],"mappings":";;;;KAkCY,eAAA;;EAAA,KAAA,CAAA,EAAA,MAAA;EAAe,WAAA,CAAA,EAAA,MAAA;EAAA,WAKZ,CAAA,EAAA,MAAA;EAAS,IAET,CAAA,EAFN,KAAA,CAAM,SAEA;EAAoB,KACzB,CAAA,EAAA,MAAA;EAAe,UACL,CAAA,EAFL,oBAEK;EAAI,KAAA,CAAA,EADd,eACc;EAGX,QAAA,CAAA,EAAA,CAAA,IAqBZ,EAxBmB,IAwBnB,GAAA,MAAA,GAAA,IAAA,EAAA,GAAA,IAAA;CAAA;AArB0B,cAAd,UAAc,EAAA,CAAA;EAAA,UAAA;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAOxB,eAPwB,EAAA,GAON,SAPM;KAuBtB,oBAAA,GAAuB,mBAvBD,GAwBzB,4BAxByB,GAyBzB,2BAzByB,GA0BzB,gCA1ByB,GA2BzB,+BA3ByB,GA4BzB,qBA5ByB;KA8BtB,mBAAA,GA9BsB;EAAA,IAAA,CAAA,EAAA,MAAA;EAAA,OAAA,CAAA,EAAA,MAAA;EAAA,KAOxB,CAAA,EAAA,MAAA;EAAe,KAAG,CAAA,EAAA,MAAA;EAcpB,KAAA,CAAA,EAAA,MAAA;EAEI,WAAA,CAAA,EAAA,MAAA;EAAoB,WAAA,CAAA,EAAA,MAAA;EAAA,OAAG,CAAA,EAAA,MAAA;CAAmB;KA+B1C,4BAAA,GA7BH;EAA2B,kBAC3B,CAAA,EAAA,MAAA;EAAgC,qBAChC,CAAA,EAAA,MAAA;EAA+B,cAC/B,CAAA,EAAA,MAAA;EAAqB,mBAAA,CAAA,EAAA,MAAA;EAElB,yBAAmB,CAAA,EAAA,MAAA;AAAA,CAAA;AAwBS,KAsB5B,2BAAA,GAA2B;EAmB3B,aAAA,CAAA,EAAA,MAAA;EAoBA,mBAAA,CAAA,EAAA,MAAA;EAmBA,eAAA,CAAA,EAAA,MAAqB;;;;;KAvCrB,gCAAA;;;;;;KAoBA,+BAAA;;;;;;KAmBA,qBAAA"}

package/dist/components/controls/date-picker/DatePicker.js

@@ -1,2 +1,2 @@
-import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{calendarControl as t,calendarDay as n,calendarHeader as r,calendarHeaderControlIcon as i,calendarHeaderLevel as a,calendarMonth as o,calendarMonthRow as s,calendarMonthsList as c,calendarMonthsListCell as l,calendarMonthsListControl as u,calendarMonthsListRow as d,calendarWeekDay as f,calendarWeekDaysRow as p,calendarYearsList as m,calendarYearsListCell as h,calendarYearsListControl as g,calendarYearsListRow as _,datepickerDropdown as v,datepickerInput as y,icon as b,input as x,inputDescription as S,inputError as C,inputLabel as w,inputPlaceholder as T,inputRoot as E,inputSection as D,inputWrapper as O}from"@mage-ui/styled-system/recipes";import{jsx as k}from"react/jsx-runtime";import{cx as A}from"@mage-ui/styled-system/css";import{DatePickerInput as j}from"@mantine/dates";const M=({classNames:t,label:n,placeholder:r,description:i,...a})=>k(j,{label:n??`Pick date`,placeholder:r??`Pick date`,description:i??`Select a date`,classNames:z(t),popoverProps:{classNames:R(t)},rightSection:k(e,{name:`calendar`,classNames:b({size:`m`})}),...a}),N=e=>({root:e?.root??E(),wrapper:e?.wrapper??O(),input:e?.input??A(x(),y()),label:e?.label??w(),error:e?.error??C(),description:e?.description??S(),placeholder:e?.placeholder??T(),section:e?.section??D({pointerEvents:`none`})}),P=e=>({calendarHeaderControl:e?.calendarHeaderControl??t(),calendarHeader:e?.calendarHeader??r(),calendarHeaderLevel:e?.calendarHeaderLevel??a(),calendarHeaderControlIcon:e?.calendarHeaderControlIcon??i()}),F=e=>({month:e?.calendarMonth??o(),weekdaysRow:e?.calendarWeekDaysRow??p(),weekday:e?.calendarWeekDay??f(),monthRow:e?.calendarMonthRow??s(),day:e?.calendarDay??n()}),I=e=>({monthsList:e?.calendarMonthsList??c(),monthsListRow:e?.calendarMonthsListRow??d(),monthsListCell:e?.calendarMonthsListCell??l(),monthsListControl:e?.calendarMonthsListControl??u()}),L=e=>({yearsList:e?.calendarYearsList??m(),yearsListRow:e?.calendarYearsListRow??_(),yearsListCell:e?.calendarYearsListCell??h(),yearsListControl:e?.calendarYearsListControl??g()}),R=e=>({dropdown:e?.datepickerDropdown??v()}),z=e=>({...N(e),...P(e),...F(e),...I(e),...L(e)});export{M as DatePicker};
+import{calendarControl as e,calendarDay as t,calendarHeader as n,calendarHeaderControlIcon as r,calendarHeaderLevel as i,calendarMonth as a,calendarMonthRow as o,calendarMonthsList as s,calendarMonthsListCell as c,calendarMonthsListControl as l,calendarMonthsListRow as u,calendarWeekDay as d,calendarWeekDaysRow as f,calendarYearsList as p,calendarYearsListCell as m,calendarYearsListControl as h,calendarYearsListRow as g,datepickerDropdown as _,datepickerInput as v,input as y,inputDescription as b,inputError as x,inputLabel as S,inputPlaceholder as C,inputRoot as w,inputSection as T,inputWrapper as E}from"@mage-ui/styled-system/recipes";import{jsx as D}from"react/jsx-runtime";import{cx as O}from"@mage-ui/styled-system/css";import{DatePickerInput as k}from"@mantine/dates";const A=({classNames:e,label:t,placeholder:n,description:r,icon:i,...a})=>D(k,{label:t??`Pick date`,placeholder:n??`Pick date`,description:r??`Select a date`,classNames:L(e),popoverProps:{classNames:I(e)},rightSection:i,...a}),j=e=>({root:e?.root??w(),wrapper:e?.wrapper??E(),input:e?.input??O(y(),v()),label:e?.label??S(),error:e?.error??x(),description:e?.description??b(),placeholder:e?.placeholder??C(),section:e?.section??T({pointerEvents:`none`})}),M=t=>({calendarHeaderControl:t?.calendarHeaderControl??e(),calendarHeader:t?.calendarHeader??n(),calendarHeaderLevel:t?.calendarHeaderLevel??i(),calendarHeaderControlIcon:t?.calendarHeaderControlIcon??r()}),N=e=>({month:e?.calendarMonth??a(),weekdaysRow:e?.calendarWeekDaysRow??f(),weekday:e?.calendarWeekDay??d(),monthRow:e?.calendarMonthRow??o(),day:e?.calendarDay??t()}),P=e=>({monthsList:e?.calendarMonthsList??s(),monthsListRow:e?.calendarMonthsListRow??u(),monthsListCell:e?.calendarMonthsListCell??c(),monthsListControl:e?.calendarMonthsListControl??l()}),F=e=>({yearsList:e?.calendarYearsList??p(),yearsListRow:e?.calendarYearsListRow??g(),yearsListCell:e?.calendarYearsListCell??m(),yearsListControl:e?.calendarYearsListControl??h()}),I=e=>({dropdown:e?.datepickerDropdown??_()}),L=e=>({...j(e),...M(e),...N(e),...P(e),...F(e)});export{A as DatePicker};
 //# sourceMappingURL=DatePicker.js.map

package/dist/components/controls/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","names":["classNames?: InputClassNamesType","classNames?: CalenderHeaderClassNamesType","classNames?: CalendarMonthClassNamesType","classNames?: CalendarMonthsListClassNamesType","classNames?: CalendarYearsListClassNamesType","classNames?: PopoverClassNamesType","classNames?: DatePickerClassNames"],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  calendarControl,\n  calendarDay,\n  calendarHeader,\n  calendarHeaderControlIcon,\n  calendarHeaderLevel,\n  calendarMonth,\n  calendarMonthRow,\n  calendarMonthsList,\n  calendarMonthsListCell,\n  calendarMonthsListControl,\n  calendarMonthsListRow,\n  calendarWeekDay,\n  calendarWeekDaysRow,\n  calendarYearsList,\n  calendarYearsListCell,\n  calendarYearsListControl,\n  calendarYearsListRow,\n  datepickerDropdown,\n  datepickerInput,\n  icon,\n  input,\n  inputDescription,\n  inputError,\n  inputLabel,\n  inputPlaceholder,\n  inputRoot,\n  inputSection,\n  inputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { DatePickerInput, type DatePickerValue } from '@mantine/dates';\nimport { Icon } from '@/components/data-display';\n\nexport type DatePickerProps = {\n  name?: string;\n  label?: string;\n  placeholder?: string;\n  description?: string;\n  error?: string;\n  classNames?: DatePickerClassNames;\n  value?: DatePickerValue;\n  onChange?: (date: Date | string | null) => void;\n};\n\nexport const DatePicker = ({\n  classNames,\n  label,\n  placeholder,\n  description,\n  ...props\n}: DatePickerProps): ReactNode => {\n  return (\n    <DatePickerInput\n      label={label ?? 'Pick date'}\n      placeholder={placeholder ?? 'Pick date'}\n      description={description ?? 'Select a date'}\n      classNames={datePickerClassNames(classNames)}\n      popoverProps={{\n        classNames: popoverClassNames(classNames),\n      }}\n      rightSection={<Icon name='calendar' classNames={icon({ size: 'm' })} />}\n      {...props}\n    />\n  );\n};\n\ntype DatePickerClassNames = InputClassNamesType &\n  CalenderHeaderClassNamesType &\n  CalendarMonthClassNamesType &\n  CalendarMonthsListClassNamesType &\n  CalendarYearsListClassNamesType &\n  PopoverClassNamesType;\n\ntype InputClassNamesType = {\n  root?: string;\n  wrapper?: string;\n  input?: string;\n  label?: string;\n  error?: string;\n  description?: string;\n  placeholder?: string;\n  section?: string;\n};\n\nconst inputClassNames = (classNames?: InputClassNamesType) => {\n  return {\n    root: classNames?.root ?? inputRoot(),\n    wrapper: classNames?.wrapper ?? inputWrapper(),\n    input: classNames?.input ?? cx(input(), datepickerInput()),\n    label: classNames?.label ?? inputLabel(),\n    error: classNames?.error ?? inputError(),\n    description: classNames?.description ?? inputDescription(),\n    placeholder: classNames?.placeholder ?? inputPlaceholder(),\n    section: classNames?.section ?? inputSection({ pointerEvents: 'none' }),\n  };\n};\n\ntype CalenderHeaderClassNamesType = {\n  datepickerDropdown?: string;\n  calendarHeaderControl?: string;\n  calendarHeader?: string;\n  calendarHeaderLevel?: string;\n  calendarHeaderControlIcon?: string;\n};\n\nconst calendarHeaderClassNames = (\n  classNames?: CalenderHeaderClassNamesType,\n) => {\n  return {\n    calendarHeaderControl:\n      classNames?.calendarHeaderControl ?? calendarControl(),\n    calendarHeader: classNames?.calendarHeader ?? calendarHeader(),\n    calendarHeaderLevel:\n      classNames?.calendarHeaderLevel ?? calendarHeaderLevel(),\n    calendarHeaderControlIcon:\n      classNames?.calendarHeaderControlIcon ?? calendarHeaderControlIcon(),\n  };\n};\n\ntype CalendarMonthClassNamesType = {\n  calendarMonth?: string;\n  calendarWeekDaysRow?: string;\n  calendarWeekDay?: string;\n  calendarMonthRow?: string;\n  calendarMonthCell?: string;\n  calendarDay?: string;\n};\n\nconst calendarMonthClassNames = (classNames?: CalendarMonthClassNamesType) => {\n  return {\n    month: classNames?.calendarMonth ?? calendarMonth(),\n    weekdaysRow: classNames?.calendarWeekDaysRow ?? calendarWeekDaysRow(),\n    weekday: classNames?.calendarWeekDay ?? calendarWeekDay(),\n    monthRow: classNames?.calendarMonthRow ?? calendarMonthRow(),\n    day: classNames?.calendarDay ?? calendarDay(),\n  };\n};\n\ntype CalendarMonthsListClassNamesType = {\n  calendarMonthsList?: string;\n  calendarMonthsListRow?: string;\n  calendarMonthsListCell?: string;\n  calendarMonthsListControl?: string;\n};\n\nconst calendarMonthsListClassNames = (\n  classNames?: CalendarMonthsListClassNamesType,\n) => {\n  return {\n    monthsList: classNames?.calendarMonthsList ?? calendarMonthsList(),\n    monthsListRow: classNames?.calendarMonthsListRow ?? calendarMonthsListRow(),\n    monthsListCell:\n      classNames?.calendarMonthsListCell ?? calendarMonthsListCell(),\n    monthsListControl:\n      classNames?.calendarMonthsListControl ?? calendarMonthsListControl(),\n  };\n};\n\ntype CalendarYearsListClassNamesType = {\n  calendarYearsList?: string;\n  calendarYearsListRow?: string;\n  calendarYearsListCell?: string;\n  calendarYearsListControl?: string;\n};\n\nconst calendarYearsListClassNames = (\n  classNames?: CalendarYearsListClassNamesType,\n) => {\n  return {\n    yearsList: classNames?.calendarYearsList ?? calendarYearsList(),\n    yearsListRow: classNames?.calendarYearsListRow ?? calendarYearsListRow(),\n    yearsListCell: classNames?.calendarYearsListCell ?? calendarYearsListCell(),\n    yearsListControl:\n      classNames?.calendarYearsListControl ?? calendarYearsListControl(),\n  };\n};\n\ntype PopoverClassNamesType = {\n  datepickerDropdown?: string;\n};\n\nconst popoverClassNames = (classNames?: PopoverClassNamesType) => {\n  return {\n    dropdown: classNames?.datepickerDropdown ?? datepickerDropdown(),\n  };\n};\n\nconst datePickerClassNames = (classNames?: DatePickerClassNames) => {\n  return {\n    ...inputClassNames(classNames),\n    ...calendarHeaderClassNames(classNames),\n    ...calendarMonthClassNames(classNames),\n    ...calendarMonthsListClassNames(classNames),\n    ...calendarYearsListClassNames(classNames),\n  };\n};\n"],"mappings":"o1BA8LA,MA/Ia,EAAa,CAAC,CACzB,aACA,QACA,cACA,cACA,GAAG,EACa,GAEd,EAAC,EAAA,CACC,MAAO,GAAS,YAChB,YAAa,GAAe,YAC5B,YAAa,GAAe,gBAC5B,WAAY,EAAqB,EAAW,CAC5C,aAAc,CACZ,WAAY,EAAkB,EAAW,AAC1C,EACD,aAAc,EAAC,EAAA,CAAK,KAAK,WAAW,WAAY,EAAK,CAAE,KAAM,GAAK,EAAC,EAAI,CACvE,GAAI,GACJ,CAsBA,EAAkB,AAACA,IAChB,CACL,KAAM,GAAY,MAAQ,GAAW,CACrC,QAAS,GAAY,SAAW,GAAc,CAC9C,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAiB,CAAC,CAC1D,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,YAAa,GAAY,aAAe,GAAkB,CAC1D,QAAS,GAAY,SAAW,EAAa,CAAE,cAAe,MAAQ,EAAC,AACxE,GAWG,EAA2B,AAC/BC,IAEO,CACL,sBACE,GAAY,uBAAyB,GAAiB,CACxD,eAAgB,GAAY,gBAAkB,GAAgB,CAC9D,oBACE,GAAY,qBAAuB,GAAqB,CAC1D,0BACE,GAAY,2BAA6B,GAA2B,AACvE,GAYG,EAA0B,AAACC,IACxB,CACL,MAAO,GAAY,eAAiB,GAAe,CACnD,YAAa,GAAY,qBAAuB,GAAqB,CACrE,QAAS,GAAY,iBAAmB,GAAiB,CACzD,SAAU,GAAY,kBAAoB,GAAkB,CAC5D,IAAK,GAAY,aAAe,GAAa,AAC9C,GAUG,EAA+B,AACnCC,IAEO,CACL,WAAY,GAAY,oBAAsB,GAAoB,CAClE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,eACE,GAAY,wBAA0B,GAAwB,CAChE,kBACE,GAAY,2BAA6B,GAA2B,AACvE,GAUG,EAA8B,AAClCC,IAEO,CACL,UAAW,GAAY,mBAAqB,GAAmB,CAC/D,aAAc,GAAY,sBAAwB,GAAsB,CACxE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,iBACE,GAAY,0BAA4B,GAA0B,AACrE,GAOG,EAAoB,AAACC,IAClB,CACL,SAAU,GAAY,oBAAsB,GAAoB,AACjE,GAGG,EAAuB,AAACC,IACrB,CACL,GAAG,EAAgB,EAAW,CAC9B,GAAG,EAAyB,EAAW,CACvC,GAAG,EAAwB,EAAW,CACtC,GAAG,EAA6B,EAAW,CAC3C,GAAG,EAA4B,EAAW,AAC3C"}
+{"version":3,"file":"DatePicker.js","names":["icon","classNames?: InputClassNamesType","classNames?: CalenderHeaderClassNamesType","classNames?: CalendarMonthClassNamesType","classNames?: CalendarMonthsListClassNamesType","classNames?: CalendarYearsListClassNamesType","classNames?: PopoverClassNamesType","classNames?: DatePickerClassNames"],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  calendarControl,\n  calendarDay,\n  calendarHeader,\n  calendarHeaderControlIcon,\n  calendarHeaderLevel,\n  calendarMonth,\n  calendarMonthRow,\n  calendarMonthsList,\n  calendarMonthsListCell,\n  calendarMonthsListControl,\n  calendarMonthsListRow,\n  calendarWeekDay,\n  calendarWeekDaysRow,\n  calendarYearsList,\n  calendarYearsListCell,\n  calendarYearsListControl,\n  calendarYearsListRow,\n  datepickerDropdown,\n  datepickerInput,\n  input,\n  inputDescription,\n  inputError,\n  inputLabel,\n  inputPlaceholder,\n  inputRoot,\n  inputSection,\n  inputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { DatePickerInput, type DatePickerValue } from '@mantine/dates';\n\nexport type DatePickerProps = {\n  name?: string;\n  label?: string;\n  placeholder?: string;\n  description?: string;\n  icon?: React.ReactNode;\n  error?: string;\n  classNames?: DatePickerClassNames;\n  value?: DatePickerValue;\n  onChange?: (date: Date | string | null) => void;\n};\n\nexport const DatePicker = ({\n  classNames,\n  label,\n  placeholder,\n  description,\n  icon,\n  ...props\n}: DatePickerProps): ReactNode => {\n  return (\n    <DatePickerInput\n      label={label ?? 'Pick date'}\n      placeholder={placeholder ?? 'Pick date'}\n      description={description ?? 'Select a date'}\n      classNames={datePickerClassNames(classNames)}\n      popoverProps={{\n        classNames: popoverClassNames(classNames),\n      }}\n      rightSection={icon}\n      {...props}\n    />\n  );\n};\n\ntype DatePickerClassNames = InputClassNamesType &\n  CalenderHeaderClassNamesType &\n  CalendarMonthClassNamesType &\n  CalendarMonthsListClassNamesType &\n  CalendarYearsListClassNamesType &\n  PopoverClassNamesType;\n\ntype InputClassNamesType = {\n  root?: string;\n  wrapper?: string;\n  input?: string;\n  label?: string;\n  error?: string;\n  description?: string;\n  placeholder?: string;\n  section?: string;\n};\n\nconst inputClassNames = (classNames?: InputClassNamesType) => {\n  return {\n    root: classNames?.root ?? inputRoot(),\n    wrapper: classNames?.wrapper ?? inputWrapper(),\n    input: classNames?.input ?? cx(input(), datepickerInput()),\n    label: classNames?.label ?? inputLabel(),\n    error: classNames?.error ?? inputError(),\n    description: classNames?.description ?? inputDescription(),\n    placeholder: classNames?.placeholder ?? inputPlaceholder(),\n    section: classNames?.section ?? inputSection({ pointerEvents: 'none' }),\n  };\n};\n\ntype CalenderHeaderClassNamesType = {\n  datepickerDropdown?: string;\n  calendarHeaderControl?: string;\n  calendarHeader?: string;\n  calendarHeaderLevel?: string;\n  calendarHeaderControlIcon?: string;\n};\n\nconst calendarHeaderClassNames = (\n  classNames?: CalenderHeaderClassNamesType,\n) => {\n  return {\n    calendarHeaderControl:\n      classNames?.calendarHeaderControl ?? calendarControl(),\n    calendarHeader: classNames?.calendarHeader ?? calendarHeader(),\n    calendarHeaderLevel:\n      classNames?.calendarHeaderLevel ?? calendarHeaderLevel(),\n    calendarHeaderControlIcon:\n      classNames?.calendarHeaderControlIcon ?? calendarHeaderControlIcon(),\n  };\n};\n\ntype CalendarMonthClassNamesType = {\n  calendarMonth?: string;\n  calendarWeekDaysRow?: string;\n  calendarWeekDay?: string;\n  calendarMonthRow?: string;\n  calendarMonthCell?: string;\n  calendarDay?: string;\n};\n\nconst calendarMonthClassNames = (classNames?: CalendarMonthClassNamesType) => {\n  return {\n    month: classNames?.calendarMonth ?? calendarMonth(),\n    weekdaysRow: classNames?.calendarWeekDaysRow ?? calendarWeekDaysRow(),\n    weekday: classNames?.calendarWeekDay ?? calendarWeekDay(),\n    monthRow: classNames?.calendarMonthRow ?? calendarMonthRow(),\n    day: classNames?.calendarDay ?? calendarDay(),\n  };\n};\n\ntype CalendarMonthsListClassNamesType = {\n  calendarMonthsList?: string;\n  calendarMonthsListRow?: string;\n  calendarMonthsListCell?: string;\n  calendarMonthsListControl?: string;\n};\n\nconst calendarMonthsListClassNames = (\n  classNames?: CalendarMonthsListClassNamesType,\n) => {\n  return {\n    monthsList: classNames?.calendarMonthsList ?? calendarMonthsList(),\n    monthsListRow: classNames?.calendarMonthsListRow ?? calendarMonthsListRow(),\n    monthsListCell:\n      classNames?.calendarMonthsListCell ?? calendarMonthsListCell(),\n    monthsListControl:\n      classNames?.calendarMonthsListControl ?? calendarMonthsListControl(),\n  };\n};\n\ntype CalendarYearsListClassNamesType = {\n  calendarYearsList?: string;\n  calendarYearsListRow?: string;\n  calendarYearsListCell?: string;\n  calendarYearsListControl?: string;\n};\n\nconst calendarYearsListClassNames = (\n  classNames?: CalendarYearsListClassNamesType,\n) => {\n  return {\n    yearsList: classNames?.calendarYearsList ?? calendarYearsList(),\n    yearsListRow: classNames?.calendarYearsListRow ?? calendarYearsListRow(),\n    yearsListCell: classNames?.calendarYearsListCell ?? calendarYearsListCell(),\n    yearsListControl:\n      classNames?.calendarYearsListControl ?? calendarYearsListControl(),\n  };\n};\n\ntype PopoverClassNamesType = {\n  datepickerDropdown?: string;\n};\n\nconst popoverClassNames = (classNames?: PopoverClassNamesType) => {\n  return {\n    dropdown: classNames?.datepickerDropdown ?? datepickerDropdown(),\n  };\n};\n\nconst datePickerClassNames = (classNames?: DatePickerClassNames) => {\n  return {\n    ...inputClassNames(classNames),\n    ...calendarHeaderClassNames(classNames),\n    ...calendarMonthClassNames(classNames),\n    ...calendarMonthsListClassNames(classNames),\n    ...calendarYearsListClassNames(classNames),\n  };\n};\n"],"mappings":"6wBA8LA,MAhJa,EAAa,CAAC,CACzB,aACA,QACA,cACA,cACA,KAAA,EACA,GAAG,EACa,GAEd,EAAC,EAAA,CACC,MAAO,GAAS,YAChB,YAAa,GAAe,YAC5B,YAAa,GAAe,gBAC5B,WAAY,EAAqB,EAAW,CAC5C,aAAc,CACZ,WAAY,EAAkB,EAAW,AAC1C,EACD,aAAcA,EACd,GAAI,GACJ,CAsBA,EAAkB,AAACC,IAChB,CACL,KAAM,GAAY,MAAQ,GAAW,CACrC,QAAS,GAAY,SAAW,GAAc,CAC9C,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAiB,CAAC,CAC1D,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,YAAa,GAAY,aAAe,GAAkB,CAC1D,QAAS,GAAY,SAAW,EAAa,CAAE,cAAe,MAAQ,EAAC,AACxE,GAWG,EAA2B,AAC/BC,IAEO,CACL,sBACE,GAAY,uBAAyB,GAAiB,CACxD,eAAgB,GAAY,gBAAkB,GAAgB,CAC9D,oBACE,GAAY,qBAAuB,GAAqB,CAC1D,0BACE,GAAY,2BAA6B,GAA2B,AACvE,GAYG,EAA0B,AAACC,IACxB,CACL,MAAO,GAAY,eAAiB,GAAe,CACnD,YAAa,GAAY,qBAAuB,GAAqB,CACrE,QAAS,GAAY,iBAAmB,GAAiB,CACzD,SAAU,GAAY,kBAAoB,GAAkB,CAC5D,IAAK,GAAY,aAAe,GAAa,AAC9C,GAUG,EAA+B,AACnCC,IAEO,CACL,WAAY,GAAY,oBAAsB,GAAoB,CAClE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,eACE,GAAY,wBAA0B,GAAwB,CAChE,kBACE,GAAY,2BAA6B,GAA2B,AACvE,GAUG,EAA8B,AAClCC,IAEO,CACL,UAAW,GAAY,mBAAqB,GAAmB,CAC/D,aAAc,GAAY,sBAAwB,GAAsB,CACxE,cAAe,GAAY,uBAAyB,GAAuB,CAC3E,iBACE,GAAY,0BAA4B,GAA0B,AACrE,GAOG,EAAoB,AAACC,IAClB,CACL,SAAU,GAAY,oBAAsB,GAAoB,AACjE,GAGG,EAAuB,AAACC,IACrB,CACL,GAAG,EAAgB,EAAW,CAC9B,GAAG,EAAyB,EAAW,CACvC,GAAG,EAAwB,EAAW,CACtC,GAAG,EAA6B,EAAW,CAC3C,GAAG,EAA4B,EAAW,AAC3C"}

package/dist/components/controls/dropdown/Combobox.d.ts

@@ -1,6 +1,7 @@
 import { DropdownBaseProps } from "./DropdownBase.js";
 import { InputTextProps } from "../input-text/InputText.js";
-import * as react_jsx_runtime42 from "react/jsx-runtime";
+import * as react_jsx_runtime39 from "react/jsx-runtime";
+import React from "react";
 
 //#region src/components/controls/dropdown/Combobox.d.ts
 type ComboboxProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery' | 'target'> & InputTextProps & {
@@ -20,18 +21,20 @@ type ComboboxProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery'
   };
   create?: string;
   empty?: string;
+  dropdownIcon?: React.ReactNode;
 };
 declare const Combobox: ({
   defaultOpened,
   creatable,
   setSelectedOption,
   selectedOption,
+  dropdownIcon,
   options,
   classNames,
   create,
   empty,
   ...props
-}: ComboboxProps) => react_jsx_runtime42.JSX.Element;
+}: ComboboxProps) => react_jsx_runtime39.JSX.Element;
 //# sourceMappingURL=Combobox.d.ts.map
 
 //#endregion

package/dist/components/controls/dropdown/Combobox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":[],"mappings":";;;;;KAeY,aAAA,GAAgB,KAC1B,qEAGA;;;IAJU,KAAA,EAAA,MAAa;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;EAAA,OACvB,EAAA;IAD0B,EAAA,EAAA,MAAA,GAAA,MAAA;IAI1B,KAAA,EAAA,MAAA;EAAc,CAAA,EAAA;EAeH,SAAA,CAAA,EAkFZ,OAAA;EAAA,UAAA,CAAA,EAAA;IAlFwB,MAAA,CAAA,EAAA,MAAA;IAAA,KAAA,CAAA,EAAA,MAAA;IAAA,MAAA,CAAA,EAAA,MAAA;EAAA,CAAA;EAAA,MAAA,CAAA,EAAA,MAAA;EAAA,KAAA,CAAA,EAAA,MAAA;CAAA;AAAA,cAAZ,QAAY,EAAA,CAAA;EAAA,aAAA;EAAA,SAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,UAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EAUtB,aAVsB,EAAA,GAUT,mBAAA,CAAA,GAAA,CAAA,OAVS"}
+{"version":3,"file":"Combobox.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":[],"mappings":";;;;;;KAgBY,aAAA,GAAgB,KAC1B,qEAGA;;;IAJU,KAAA,EAAA,MAAa;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;EAAA,OACvB,EAAA;IAD0B,EAAA,EAAA,MAAA,GAAA,MAAA;IAI1B,KAAA,EAAA,MAAA;EAAc,CAAA,EAaG;EAAe,SAAA,CAAA,EAAA,OAAA;EAGrB,UAAA,CAoFZ,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;IApFwB,KAAA,CAAA,EAAA,MAAA;IAAA,MAAA,CAAA,EAAA,MAAA;EAAA,CAAA;EAAA,MAAA,CAAA,EAAA,MAAA;EAAA,KAAA,CAAA,EAAA,MAAA;EAAA,YAAA,CAAA,EAHN,KAAA,CAAM,SAGA;CAAA;AAAA,cAAZ,QAAY,EAAA,CAAA;EAAA,aAAA;EAAA,SAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,YAAA;EAAA,OAAA;EAAA,UAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EAWtB,aAXsB,EAAA,GAWT,mBAAA,CAAA,GAAA,CAAA,OAXS"}

package/dist/components/controls/dropdown/Combobox.js

@@ -1,2 +1,2 @@
-import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{DropdownBase as t}from"./DropdownBase.js";import{InputText as n}from"../input-text/InputText.js";import{comboboxEmpty as r,comboboxOption as i,icon as a,inputSection as o,selectSection as s}from"@mage-ui/styled-system/recipes";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{useState as u}from"react";import{cx as d}from"@mage-ui/styled-system/css";const f=({defaultOpened:f=!1,creatable:p,setSelectedOption:m,selectedOption:h,options:g,classNames:_,create:v,empty:y,...b})=>{let[x,S]=u(h?.value??``),C=g.every(e=>e.value!==x),w=C?g.filter(e=>e.value.toLowerCase().includes(x.toLowerCase().trim())):g,T=w.map(e=>c(t.Option,{value:e.value,active:h?.id===e.id,classNames:{option:_?.option??i()},children:e.value},e.id)),E=()=>p&&x?l(t.Option,{value:x,classNames:{option:_?.create??i({type:`create`})},children:[c(e,{name:`plus`,classNames:a({size:`m`})}),`${v??`Create`} '${x}'`]},x):c(t.Empty,{classNames:{empty:_?.empty??r()},children:y??`Nothing found`}),D=e=>{let t=g.find(t=>t.value===e);!t&&p&&e&&(t={id:`new`,value:e}),m(t)};return c(t,{readOnly:!1,target:c(n,{value:x,classNames:{section:_?.section??d(o(),s())},...b}),selectedOption:h,setQuery:S,setSelectedOption:e=>D(e),children:T.length>0?T:c(E,{})})};export{f as Combobox};
+import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{DropdownBase as t}from"./DropdownBase.js";import{InputText as n}from"../input-text/InputText.js";import{comboboxEmpty as r,comboboxOption as i,icon as a,inputSection as o,selectSection as s}from"@mage-ui/styled-system/recipes";import{jsx as c,jsxs as l}from"react/jsx-runtime";import{useState as u}from"react";import{cx as d}from"@mage-ui/styled-system/css";const f=({defaultOpened:f=!1,creatable:p,setSelectedOption:m,selectedOption:h,dropdownIcon:g,options:_,classNames:v,create:y,empty:b,...x})=>{let[S,C]=u(h?.value??``),w=_.every(e=>e.value!==S),T=w?_.filter(e=>e.value.toLowerCase().includes(S.toLowerCase().trim())):_,E=T.map(e=>c(t.Option,{value:e.value,active:h?.id===e.id,classNames:{option:v?.option??i()},children:e.value},e.id)),D=()=>p&&S?l(t.Option,{value:S,classNames:{option:v?.create??i({type:`create`})},children:[c(e,{name:`plus`,classNames:a({size:`m`})}),`${y??`Create`} '${S}'`]},S):c(t.Empty,{classNames:{empty:v?.empty??r()},children:b??`Nothing found`}),O=e=>{let t=_.find(t=>t.value===e);!t&&p&&e&&(t={id:`new`,value:e}),m(t)};return c(t,{readOnly:!1,target:c(n,{value:S,classNames:{section:v?.section??d(o(),s())},...x}),selectedOption:h,setQuery:C,setSelectedOption:e=>O(e),dropdownIcon:g,children:E.length>0?E:c(D,{})})};export{f as Combobox};
 //# sourceMappingURL=Combobox.js.map

package/dist/components/controls/dropdown/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","names":["value: string | undefined"],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  comboboxEmpty,\n  comboboxOption,\n  icon,\n  inputSection,\n  selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\nimport { Icon } from '@/components/data-display';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type ComboboxProps = Omit<\n  DropdownBaseProps,\n  'children' | 'onClick' | 'setQuery' | 'target'\n> &\n  InputTextProps & {\n    setSelectedOption: (\n      option: { id: string | number; value: string } | undefined,\n    ) => void;\n    options: { id: string | number; value: string }[];\n    creatable?: boolean;\n    classNames?: {\n      option?: string;\n      empty?: string;\n      create?: string;\n    };\n    create?: string;\n    empty?: string;\n  };\n\nexport const Combobox = ({\n  defaultOpened = false,\n  creatable,\n  setSelectedOption,\n  selectedOption,\n  options,\n  classNames,\n  create,\n  empty,\n  ...props\n}: ComboboxProps) => {\n  const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n  const shouldFilterOptions = options.every((item) => item.value !== query);\n  const filteredOptions = shouldFilterOptions\n    ? options.filter((item) =>\n        item.value.toLowerCase().includes(query.toLowerCase().trim()),\n      )\n    : options;\n\n  const dropdownOptions = filteredOptions.map((option) => (\n    <DropdownBase.Option\n      value={option.value}\n      key={option.id}\n      active={selectedOption?.id === option.id}\n      classNames={{ option: classNames?.option ?? comboboxOption() }}\n    >\n      {option.value}\n    </DropdownBase.Option>\n  ));\n\n  const MissingOption = () => {\n    if (creatable && query) {\n      return (\n        <DropdownBase.Option\n          value={query}\n          key={query}\n          classNames={{\n            option: classNames?.create ?? comboboxOption({ type: 'create' }),\n          }}\n        >\n          <Icon name='plus' classNames={icon({ size: 'm' })} />\n          {`${create ?? 'Create'} '${query}'`}\n        </DropdownBase.Option>\n      );\n    }\n    return (\n      <DropdownBase.Empty\n        classNames={{ empty: classNames?.empty ?? comboboxEmpty() }}\n      >\n        {empty ?? 'Nothing found'}\n      </DropdownBase.Empty>\n    );\n  };\n\n  const onChange = (value: string | undefined) => {\n    let selected = options.find((item) => item.value === value);\n    if (!selected && creatable && value) {\n      selected = { id: 'new', value };\n    }\n    setSelectedOption(selected);\n  };\n\n  return (\n    <DropdownBase\n      readOnly={false}\n      target={\n        <InputText\n          value={query}\n          classNames={{\n            section: classNames?.section ?? cx(inputSection(), selectSection()),\n          }}\n          {...props}\n        />\n      }\n      selectedOption={selectedOption}\n      setQuery={setQuery}\n      setSelectedOption={(option) => onChange(option)}\n    >\n      {dropdownOptions.length > 0 ? dropdownOptions : <MissingOption />}\n    </DropdownBase>\n  );\n};\n"],"mappings":"0aAkCA,MAAa,EAAW,CAAC,CACvB,iBAAgB,EAChB,YACA,oBACA,iBACA,UACA,aACA,SACA,QACA,GAAG,EACW,GAAK,CA6CnB,GA5CM,CAAC,EAAO,EAAS,CAAG,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAsB,EAAQ,MAAM,AAAC,GAAS,EAAK,QAAU,EAAM,CACnE,EAAkB,EACpB,EAAQ,OAAO,AAAC,GACd,EAAK,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,MAAM,CAAC,CAC9D,CACD,EAEE,EAAkB,EAAgB,IAAI,AAAC,GAC3C,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,EAAgB,IAChB,GAAa,EAEb,EAAC,EAAa,OAAA,CACZ,MAAO,EAEP,WAAY,CACV,OAAQ,GAAY,QAAU,EAAe,CAAE,KAAM,QAAU,EAAC,AACjE,YAED,EAAC,EAAA,CAAK,KAAK,OAAO,WAAY,EAAK,CAAE,KAAM,GAAK,EAAC,EAAI,EACnD,EAAE,GAAU,SAAS,IAAI,EAAM,EAAA,GAN5B,EAOe,CAIxB,EAAC,EAAa,MAAA,CACZ,WAAY,CAAE,MAAO,GAAY,OAAS,GAAe,AAAE,WAE1D,GAAS,iBACS,CAInB,EAAW,AAACA,GAA8B,CAC9C,IAAI,EAAW,EAAQ,KAAK,AAAC,GAAS,EAAK,QAAU,EAAM,CAI3D,CAHK,GAAY,GAAa,IAC5B,EAAW,CAAE,GAAI,MAAO,OAAO,GAEjC,EAAkB,EAAS,AAC5B,EAED,MACE,GAAC,EAAA,CACC,UAAU,EACV,OACE,EAAC,EAAA,CACC,MAAO,EACP,WAAY,CACV,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,AACpE,EACD,GAAI,GACJ,CAEY,iBACN,WACV,kBAAmB,AAAC,GAAW,EAAS,EAAO,UAE9C,EAAgB,OAAS,EAAI,EAAkB,EAAC,EAAA,CAAA,EAAgB,EACpD,AAElB"}
+{"version":3,"file":"Combobox.js","names":["value: string | undefined"],"sources":["../../../../src/components/controls/dropdown/Combobox.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  comboboxEmpty,\n  comboboxOption,\n  icon,\n  inputSection,\n  selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\nimport { Icon } from '@/components/data-display';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type ComboboxProps = Omit<\n  DropdownBaseProps,\n  'children' | 'onClick' | 'setQuery' | 'target'\n> &\n  InputTextProps & {\n    setSelectedOption: (\n      option: { id: string | number; value: string } | undefined,\n    ) => void;\n    options: { id: string | number; value: string }[];\n    creatable?: boolean;\n    classNames?: {\n      option?: string;\n      empty?: string;\n      create?: string;\n    };\n    create?: string;\n    empty?: string;\n    dropdownIcon?: React.ReactNode;\n  };\n\nexport const Combobox = ({\n  defaultOpened = false,\n  creatable,\n  setSelectedOption,\n  selectedOption,\n  dropdownIcon,\n  options,\n  classNames,\n  create,\n  empty,\n  ...props\n}: ComboboxProps) => {\n  const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n  const shouldFilterOptions = options.every((item) => item.value !== query);\n  const filteredOptions = shouldFilterOptions\n    ? options.filter((item) =>\n        item.value.toLowerCase().includes(query.toLowerCase().trim()),\n      )\n    : options;\n\n  const dropdownOptions = filteredOptions.map((option) => (\n    <DropdownBase.Option\n      value={option.value}\n      key={option.id}\n      active={selectedOption?.id === option.id}\n      classNames={{ option: classNames?.option ?? comboboxOption() }}\n    >\n      {option.value}\n    </DropdownBase.Option>\n  ));\n\n  const MissingOption = () => {\n    if (creatable && query) {\n      return (\n        <DropdownBase.Option\n          value={query}\n          key={query}\n          classNames={{\n            option: classNames?.create ?? comboboxOption({ type: 'create' }),\n          }}\n        >\n          <Icon name='plus' classNames={icon({ size: 'm' })} />\n          {`${create ?? 'Create'} '${query}'`}\n        </DropdownBase.Option>\n      );\n    }\n    return (\n      <DropdownBase.Empty\n        classNames={{ empty: classNames?.empty ?? comboboxEmpty() }}\n      >\n        {empty ?? 'Nothing found'}\n      </DropdownBase.Empty>\n    );\n  };\n\n  const onChange = (value: string | undefined) => {\n    let selected = options.find((item) => item.value === value);\n    if (!selected && creatable && value) {\n      selected = { id: 'new', value };\n    }\n    setSelectedOption(selected);\n  };\n\n  return (\n    <DropdownBase\n      readOnly={false}\n      target={\n        <InputText\n          value={query}\n          classNames={{\n            section: classNames?.section ?? cx(inputSection(), selectSection()),\n          }}\n          {...props}\n        />\n      }\n      selectedOption={selectedOption}\n      setQuery={setQuery}\n      setSelectedOption={(option) => onChange(option)}\n      dropdownIcon={dropdownIcon}\n    >\n      {dropdownOptions.length > 0 ? dropdownOptions : <MissingOption />}\n    </DropdownBase>\n  );\n};\n"],"mappings":"0aAoCA,MAAa,EAAW,CAAC,CACvB,iBAAgB,EAChB,YACA,oBACA,iBACA,eACA,UACA,aACA,SACA,QACA,GAAG,EACW,GAAK,CA6CnB,GA5CM,CAAC,EAAO,EAAS,CAAG,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAsB,EAAQ,MAAM,AAAC,GAAS,EAAK,QAAU,EAAM,CACnE,EAAkB,EACpB,EAAQ,OAAO,AAAC,GACd,EAAK,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,MAAM,CAAC,CAC9D,CACD,EAEE,EAAkB,EAAgB,IAAI,AAAC,GAC3C,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,EAAgB,IAChB,GAAa,EAEb,EAAC,EAAa,OAAA,CACZ,MAAO,EAEP,WAAY,CACV,OAAQ,GAAY,QAAU,EAAe,CAAE,KAAM,QAAU,EAAC,AACjE,YAED,EAAC,EAAA,CAAK,KAAK,OAAO,WAAY,EAAK,CAAE,KAAM,GAAK,EAAC,EAAI,EACnD,EAAE,GAAU,SAAS,IAAI,EAAM,EAAA,GAN5B,EAOe,CAIxB,EAAC,EAAa,MAAA,CACZ,WAAY,CAAE,MAAO,GAAY,OAAS,GAAe,AAAE,WAE1D,GAAS,iBACS,CAInB,EAAW,AAACA,GAA8B,CAC9C,IAAI,EAAW,EAAQ,KAAK,AAAC,GAAS,EAAK,QAAU,EAAM,CAI3D,CAHK,GAAY,GAAa,IAC5B,EAAW,CAAE,GAAI,MAAO,OAAO,GAEjC,EAAkB,EAAS,AAC5B,EAED,MACE,GAAC,EAAA,CACC,UAAU,EACV,OACE,EAAC,EAAA,CACC,MAAO,EACP,WAAY,CACV,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,AACpE,EACD,GAAI,GACJ,CAEY,iBACN,WACV,kBAAmB,AAAC,GAAW,EAAS,EAAO,CACjC,wBAEb,EAAgB,OAAS,EAAI,EAAkB,EAAC,EAAA,CAAA,EAAgB,EACpD,AAElB"}

package/dist/components/controls/dropdown/DropdownBase.d.ts

@@ -16,6 +16,7 @@ type DropdownBaseProps = {
     dropdown?: string;
     options?: string;
   };
+  dropdownIcon?: React.ReactNode;
   children: React.ReactNode;
 };
 //#endregion

package/dist/components/controls/dropdown/DropdownBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBase.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":[],"mappings":";;;;KAUY,iBAAA;;;;EAAA,cAAA,CAAA,EAAA;IAAiB,EAAA,EAAA,MAAA,GAAA,MAAA;IAMnB,KAAM,EAAA,MAAA;EAAY,CAAA,GAKhB,SAAM;EAAS,iBAAA,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,SAAA,EAAA,GAAA,IAAA;UALjB,KAAA,CAAM;;;;;YAKJ,KAAA,CAAM"}
+{"version":3,"file":"DropdownBase.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":[],"mappings":";;;;KAKY,iBAAA;;;;EAAA,cAAA,CAAA,EAAA;IAAiB,EAAA,EAAA,MAAA,GAAA,MAAA;IAMnB,KAAM,EAAA,MAAA;EAAY,CAAA,GAKX,SAAM;EAAS,iBACd,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,SAAA,EAAA,GAAA,IAAA;EAAS,MAAA,EANjB,KAAA,CAAM,YAMW;;;;;iBADV,KAAA,CAAM;YACX,KAAA,CAAM"}

package/dist/components/controls/dropdown/DropdownBase.js

@@ -1,2 +1,2 @@
-import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{comboboxOptions as t,dropdown as n,icon as r}from"@mage-ui/styled-system/recipes";import{Combobox as i,useCombobox as a}from"@mantine/core";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{cloneElement as c}from"react";const l=({defaultOpened:l,readOnly:u,setQuery:d,setSelectedOption:f,selectedOption:p,target:m,classNames:h,children:g,..._})=>{let v=a({defaultOpened:l??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{v.resetSelectedOption()}}),y=c(m,{...m?.props??{},onChange:({currentTarget:e})=>{d?.(e.value),v.openDropdown(),v.updateSelectedOptionIndex()},onBlur:()=>{d?.(p?.value??``)},onClick:()=>{u?v.toggleDropdown():v.openDropdown()},endSlot:o(e,{name:`chevron-down`,classNames:r({size:`s`})})});return s(i,{readOnly:u??!1,onOptionSubmit:e=>{f(e),d?.(e),v.closeDropdown()},store:v,withinPortal:!0,position:`bottom-start`,..._,children:[o(i.Target,{children:y}),o(i.Dropdown,{classNames:{dropdown:h?.dropdown??n()},children:o(i.Options,{classNames:{options:h?.options??t()},children:g})})]})};l.Option=i.Option,l.Option.displayName=`DropdownBase.Option`,l.Empty=i.Empty,l.Empty.displayName=`DropdownBase.Empty`;export{l as DropdownBase};
+import{comboboxOptions as e,dropdown as t}from"@mage-ui/styled-system/recipes";import{Combobox as n,useCombobox as r}from"@mantine/core";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{cloneElement as o}from"react";const s=({defaultOpened:s,readOnly:c,setQuery:l,setSelectedOption:u,selectedOption:d,target:f,classNames:p,children:m,dropdownIcon:h,...g})=>{let _=r({defaultOpened:s??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{_.resetSelectedOption()}}),v=o(f,{...f?.props??{},onChange:({currentTarget:e})=>{l?.(e.value),_.openDropdown(),_.updateSelectedOptionIndex()},onBlur:()=>{l?.(d?.value??``)},onClick:()=>{c?_.toggleDropdown():_.openDropdown()},endSlot:h});return a(n,{readOnly:c??!1,onOptionSubmit:e=>{u(e),l?.(e),_.closeDropdown()},store:_,withinPortal:!0,position:`bottom-start`,...g,children:[i(n.Target,{children:v}),i(n.Dropdown,{classNames:{dropdown:p?.dropdown??t()},children:i(n.Options,{classNames:{options:p?.options??e()},children:m})})]})};s.Option=n.Option,s.Option.displayName=`DropdownBase.Option`,s.Empty=n.Empty,s.Empty.displayName=`DropdownBase.Empty`;export{s as DropdownBase};
 //# sourceMappingURL=DropdownBase.js.map

package/dist/components/controls/dropdown/DropdownBase.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownBase.js","names":["MantineCombobox"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { type ChangeEvent, cloneElement } from 'react';\n\nimport {\n  comboboxOptions,\n  dropdown,\n  icon,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox, useCombobox } from '@mantine/core';\nimport { Icon } from '@/components/data-display';\n\nexport type DropdownBaseProps = {\n  defaultOpened?: boolean;\n  readOnly?: boolean;\n  setQuery?: (value: string) => void;\n  selectedOption?: { id: string | number; value: string } | undefined;\n  setSelectedOption: (value: string | undefined) => void;\n  target: React.ReactElement;\n  classNames?: {\n    dropdown?: string;\n    options?: string;\n  };\n  children: React.ReactNode;\n};\n\nexport const DropdownBase = ({\n  defaultOpened,\n  readOnly,\n  setQuery,\n  setSelectedOption,\n  selectedOption,\n  target,\n  classNames,\n  children,\n  ...props\n}: DropdownBaseProps) => {\n  const combobox = useCombobox({\n    defaultOpened: defaultOpened ?? false,\n    scrollBehavior: 'smooth',\n    onDropdownClose: () => {\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const targetComponent = cloneElement(target, {\n    ...(target?.props ?? {}),\n    onChange: ({\n      currentTarget,\n    }: ChangeEvent<HTMLInputElement | HTMLButtonElement>) => {\n      setQuery?.(currentTarget.value);\n      combobox.openDropdown();\n      combobox.updateSelectedOptionIndex();\n    },\n    onBlur: () => {\n      setQuery?.(selectedOption?.value ?? '');\n    },\n    onClick: () => {\n      if (readOnly) {\n        combobox.toggleDropdown();\n      } else {\n        combobox.openDropdown();\n      }\n    },\n    endSlot: <Icon name='chevron-down' classNames={icon({ size: 's' })} />,\n  } as React.HTMLProps<HTMLInputElement | HTMLButtonElement>);\n\n  return (\n    <MantineCombobox\n      readOnly={readOnly ?? false}\n      onOptionSubmit={(option) => {\n        setSelectedOption(option);\n        setQuery?.(option);\n        combobox.closeDropdown();\n      }}\n      store={combobox}\n      withinPortal={true}\n      position='bottom-start'\n      {...props}\n    >\n      <MantineCombobox.Target>{targetComponent}</MantineCombobox.Target>\n      <MantineCombobox.Dropdown\n        classNames={{\n          dropdown: classNames?.dropdown ?? dropdown(),\n        }}\n      >\n        <MantineCombobox.Options\n          classNames={{\n            options: classNames?.options ?? comboboxOptions(),\n          }}\n        >\n          {children}\n        </MantineCombobox.Options>\n      </MantineCombobox.Dropdown>\n    </MantineCombobox>\n  );\n};\n\nDropdownBase.Option = MantineCombobox.Option;\nDropdownBase.Option.displayName = 'DropdownBase.Option';\nDropdownBase.Empty = MantineCombobox.Empty;\nDropdownBase.Empty.displayName = 'DropdownBase.Empty';\n"],"mappings":"uSAwBA,MAAa,EAAe,CAAC,CAC3B,gBACA,WACA,WACA,oBACA,iBACA,SACA,aACA,WACA,GAAG,EACe,GAAK,CASvB,IARM,EAAW,EAAY,CAC3B,cAAe,IAAiB,EAChC,eAAgB,SAChB,gBAAiB,IAAM,CACrB,EAAS,qBAAqB,AAC/B,CACF,EAAC,CAEI,EAAkB,EAAa,EAAQ,CAC3C,GAAI,GAAQ,OAAS,CAAE,EACvB,SAAU,CAAC,CACT,gBACkD,GAAK,CAGvD,AAFA,IAAW,EAAc,MAAM,CAC/B,EAAS,cAAc,CACvB,EAAS,2BAA2B,AACrC,EACD,OAAQ,IAAM,CACZ,IAAW,GAAgB,OAAS,GAAG,AACxC,EACD,QAAS,IAAM,CACb,AAAI,EACF,EAAS,gBAAgB,CAEzB,EAAS,cAAc,AAE1B,EACD,QAAS,EAAC,EAAA,CAAK,KAAK,eAAe,WAAY,EAAK,CAAE,KAAM,GAAK,EAAC,EAAI,AACvE,EAA0D,CAE3D,MACE,GAACA,EAAAA,CACC,SAAU,IAAY,EACtB,eAAgB,AAAC,GAAW,CAG1B,AAFA,EAAkB,EAAO,CACzB,IAAW,EAAO,CAClB,EAAS,eAAe,AACzB,EACD,MAAO,EACP,cAAc,EACd,SAAS,eACT,GAAI,YAEJ,EAACA,EAAgB,OAAA,CAAA,SAAQ,CAAA,EAAyC,CAClE,EAACA,EAAgB,SAAA,CACf,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,AAC7C,WAED,EAACA,EAAgB,QAAA,CACf,WAAY,CACV,QAAS,GAAY,SAAW,GAAiB,AAClD,EAEA,YACuB,EACD,GACX,AAErB,EAKD,AAHA,EAAa,OAASA,EAAgB,OACtC,EAAa,OAAO,YAAc,sBAClC,EAAa,MAAQA,EAAgB,MACrC,EAAa,MAAM,YAAc"}
+{"version":3,"file":"DropdownBase.js","names":["MantineCombobox"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { type ChangeEvent, cloneElement } from 'react';\n\nimport { comboboxOptions, dropdown } from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox, useCombobox } from '@mantine/core';\n\nexport type DropdownBaseProps = {\n  defaultOpened?: boolean;\n  readOnly?: boolean;\n  setQuery?: (value: string) => void;\n  selectedOption?: { id: string | number; value: string } | undefined;\n  setSelectedOption: (value: string | undefined) => void;\n  target: React.ReactElement;\n  classNames?: {\n    dropdown?: string;\n    options?: string;\n  };\n  dropdownIcon?: React.ReactNode;\n  children: React.ReactNode;\n};\n\nexport const DropdownBase = ({\n  defaultOpened,\n  readOnly,\n  setQuery,\n  setSelectedOption,\n  selectedOption,\n  target,\n  classNames,\n  children,\n  dropdownIcon,\n  ...props\n}: DropdownBaseProps) => {\n  const combobox = useCombobox({\n    defaultOpened: defaultOpened ?? false,\n    scrollBehavior: 'smooth',\n    onDropdownClose: () => {\n      combobox.resetSelectedOption();\n    },\n  });\n\n  const targetComponent = cloneElement(target, {\n    ...(target?.props ?? {}),\n    onChange: ({\n      currentTarget,\n    }: ChangeEvent<HTMLInputElement | HTMLButtonElement>) => {\n      setQuery?.(currentTarget.value);\n      combobox.openDropdown();\n      combobox.updateSelectedOptionIndex();\n    },\n    onBlur: () => {\n      setQuery?.(selectedOption?.value ?? '');\n    },\n    onClick: () => {\n      if (readOnly) {\n        combobox.toggleDropdown();\n      } else {\n        combobox.openDropdown();\n      }\n    },\n    endSlot: dropdownIcon,\n  } as React.HTMLProps<HTMLInputElement | HTMLButtonElement>);\n\n  return (\n    <MantineCombobox\n      readOnly={readOnly ?? false}\n      onOptionSubmit={(option) => {\n        setSelectedOption(option);\n        setQuery?.(option);\n        combobox.closeDropdown();\n      }}\n      store={combobox}\n      withinPortal={true}\n      position='bottom-start'\n      {...props}\n    >\n      <MantineCombobox.Target>{targetComponent}</MantineCombobox.Target>\n      <MantineCombobox.Dropdown\n        classNames={{\n          dropdown: classNames?.dropdown ?? dropdown(),\n        }}\n      >\n        <MantineCombobox.Options\n          classNames={{\n            options: classNames?.options ?? comboboxOptions(),\n          }}\n        >\n          {children}\n        </MantineCombobox.Options>\n      </MantineCombobox.Dropdown>\n    </MantineCombobox>\n  );\n};\n\nDropdownBase.Option = MantineCombobox.Option;\nDropdownBase.Option.displayName = 'DropdownBase.Option';\nDropdownBase.Empty = MantineCombobox.Empty;\nDropdownBase.Empty.displayName = 'DropdownBase.Empty';\n"],"mappings":"gOAoBA,MAAa,EAAe,CAAC,CAC3B,gBACA,WACA,WACA,oBACA,iBACA,SACA,aACA,WACA,eACA,GAAG,EACe,GAAK,CASvB,IARM,EAAW,EAAY,CAC3B,cAAe,IAAiB,EAChC,eAAgB,SAChB,gBAAiB,IAAM,CACrB,EAAS,qBAAqB,AAC/B,CACF,EAAC,CAEI,EAAkB,EAAa,EAAQ,CAC3C,GAAI,GAAQ,OAAS,CAAE,EACvB,SAAU,CAAC,CACT,gBACkD,GAAK,CAGvD,AAFA,IAAW,EAAc,MAAM,CAC/B,EAAS,cAAc,CACvB,EAAS,2BAA2B,AACrC,EACD,OAAQ,IAAM,CACZ,IAAW,GAAgB,OAAS,GAAG,AACxC,EACD,QAAS,IAAM,CACb,AAAI,EACF,EAAS,gBAAgB,CAEzB,EAAS,cAAc,AAE1B,EACD,QAAS,CACV,EAA0D,CAE3D,MACE,GAACA,EAAAA,CACC,SAAU,IAAY,EACtB,eAAgB,AAAC,GAAW,CAG1B,AAFA,EAAkB,EAAO,CACzB,IAAW,EAAO,CAClB,EAAS,eAAe,AACzB,EACD,MAAO,EACP,cAAc,EACd,SAAS,eACT,GAAI,YAEJ,EAACA,EAAgB,OAAA,CAAA,SAAQ,CAAA,EAAyC,CAClE,EAACA,EAAgB,SAAA,CACf,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,AAC7C,WAED,EAACA,EAAgB,QAAA,CACf,WAAY,CACV,QAAS,GAAY,SAAW,GAAiB,AAClD,EAEA,YACuB,EACD,GACX,AAErB,EAKD,AAHA,EAAa,OAASA,EAAgB,OACtC,EAAa,OAAO,YAAc,sBAClC,EAAa,MAAQA,EAAgB,MACrC,EAAa,MAAM,YAAc"}

package/dist/components/controls/dropdown/DropdownButton.d.ts

@@ -1,5 +1,5 @@
-import * as react_jsx_runtime43 from "react/jsx-runtime";
-import * as react44 from "react";
+import * as react_jsx_runtime40 from "react/jsx-runtime";
+import * as react41 from "react";
 
 //#region src/components/controls/dropdown/DropdownButton.d.ts
 type DropdownButtonProps = {
@@ -9,17 +9,20 @@ type DropdownButtonProps = {
     dropdown?: string;
   };
   children?: React.ReactNode;
+  dropdownIcon?: React.ReactNode;
 };
 declare const DropdownButton: {
   ({
     label,
     classNames,
-    children
-  }: DropdownButtonProps): react_jsx_runtime43.JSX.Element;
+    children,
+    dropdownIcon,
+    ...props
+  }: DropdownButtonProps): react_jsx_runtime40.JSX.Element;
   Option: {
     ({
       children
-    }: DropdownButtonOptionProps): react44.ReactNode;
+    }: DropdownButtonOptionProps): react41.ReactNode;
     displayName: string;
   };
 };

package/dist/components/controls/dropdown/DropdownButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownButton.tsx"],"sourcesContent":[],"mappings":";;;;KAWY,mBAAA;;;;IAAA,QAAA,CAAA,EAAA,MAAA;EASC,CAAA;EA0CZ,QAAA,CAAA,EA7CY,KAAA,CAAM,SA6ClB;CAAA;cA1CY;;;;;KAIV,sBAAmB,mBAAA,CAAA,GAAA,CAAA;QAAnB,EAAA;IAAmB,CAAA;MAAA;IAAA,CAAA,EA+CQ,yBA/CR,CAAA,EA+CiC,OAAA,CAAA,SA/CjC;IAAA,WAAA,EAAA,MAAA;;CA+CiC;AAAA,KAPlD,yBAAA,GAOkD;EAPlD,EAAA,EAAA,MAAA,GAAA,MAAA;;;aAIQ,KAAA,CAAM"}
+{"version":3,"file":"DropdownButton.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownButton.tsx"],"sourcesContent":[],"mappings":";;;;KAWY,mBAAA;;;;IAAA,QAAA,CAAA,EAAA,MAAA;EAAmB,CAAA;EAAA,QAMlB,CAAM,EAAN,KAAA,CAAM,SAAA;EAAS,YACL,CAAA,EAAN,KAAA,CAAM,SAAA;AAAS,CAAA;AAGnB,cAAA,cA8CZ,EAAA;EAAA,CAAA;IAAA,KAAA;IAAA,UAAA;IAAA,QAAA;IAAA,YAAA;IAAA,GAAA;EAAA,CAAA,EAxCE,mBAwCF,CAAA,EAxCqB,mBAAA,CAAA,GAAA,CAAA,OAwCrB;EAAA,MAAA,EAAA;;;OAS6B,4BAAyB,OAAA,CAAA;;;;KAPlD,yBAAA,GA1CiB;EAAA,EAAA,EAAA,MAAA,GAAA,MAAA;OAiDQ,EAAA,MAAA;EAAyB,OAAA,EAAA,GAAA,GAAA,IAAA;EAAA,QAAA,CAAA,EAH1C,KAAA,CAAM,SAGoC;AATrD,CAAA"}

package/dist/components/controls/dropdown/DropdownButton.js

@@ -1,2 +1,2 @@
-import{Button as e}from"../../buttons/button/Button.js";import{DropdownBase as t}from"./DropdownBase.js";import{button as n,comboboxOption as r,dropdown as i}from"@mage-ui/styled-system/recipes";import{jsx as a}from"react/jsx-runtime";import{Children as o,isValidElement as s}from"react";const c=({label:l=`Guardar`,classNames:u,children:d})=>{let f=o.toArray(d).filter(e=>s(e)&&e.type===c.Option),p=e=>{let t=f.find(t=>t.props.value===e);t&&t.props.onClick()};return a(t,{setSelectedOption:p,target:a(e,{classNames:{root:n({color:`primary`})},children:l}),classNames:{dropdown:u?.dropdown??i({size:`m`})},children:f.map(e=>{let{id:n,value:i,children:o}=e.props;return a(t.Option,{value:i,classNames:{option:u?.option??r()},children:o},n)})})},l=({children:e})=>e;l.displayName=`DropdownButton.Option`,c.Option=l;export{c as DropdownButton};
+import{Button as e}from"../../buttons/button/Button.js";import{DropdownBase as t}from"./DropdownBase.js";import{button as n,comboboxOption as r,dropdown as i}from"@mage-ui/styled-system/recipes";import{jsx as a}from"react/jsx-runtime";import{Children as o,isValidElement as s}from"react";const c=({label:l=`Guardar`,classNames:u,children:d,dropdownIcon:f,...p})=>{let m=o.toArray(d).filter(e=>s(e)&&e.type===c.Option),h=e=>{let t=m.find(t=>t.props.value===e);t&&t.props.onClick()};return a(t,{setSelectedOption:h,target:a(e,{classNames:{root:n({color:`primary`})},children:l}),classNames:{dropdown:u?.dropdown??i({size:`m`})},dropdownIcon:f,...p,children:m.map(e=>{let{id:n,value:i,children:o}=e.props;return a(t.Option,{value:i,classNames:{option:u?.option??r()},children:o},n)})})},l=({children:e})=>e;l.displayName=`DropdownButton.Option`,c.Option=l;export{c as DropdownButton};
 //# sourceMappingURL=DropdownButton.js.map

package/dist/components/controls/dropdown/DropdownButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownButton.js","names":["value?: string","children"],"sources":["../../../../src/components/controls/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport {\n  button,\n  comboboxOption,\n  dropdown,\n} from '@mage-ui/styled-system/recipes';\nimport { Button } from '@/components/buttons';\n\nimport { DropdownBase } from './DropdownBase';\n\nexport type DropdownButtonProps = {\n  label?: string;\n  classNames?: {\n    option?: string;\n    dropdown?: string;\n  };\n  children?: React.ReactNode;\n};\n\nexport const DropdownButton = ({\n  label = 'Guardar',\n  classNames,\n  children,\n}: DropdownButtonProps) => {\n  const options = Children.toArray(children).filter(\n    (child): child is React.ReactElement<DropdownButtonOptionProps> =>\n      isValidElement(child) && child.type === DropdownButton.Option,\n  );\n\n  const handleOptionSelect = (value?: string) => {\n    const selected = options.find((child) => child.props.value === value);\n    if (selected) selected.props.onClick();\n  };\n\n  return (\n    <DropdownBase\n      setSelectedOption={handleOptionSelect}\n      target={\n        <Button classNames={{ root: button({ color: 'primary' }) }}>\n          {label}\n        </Button>\n      }\n      classNames={{\n        dropdown: classNames?.dropdown ?? dropdown({ size: 'm' }),\n      }}\n    >\n      {options.map((child) => {\n        const { id, value, children } = child.props;\n\n        return (\n          <DropdownBase.Option\n            key={id}\n            value={value}\n            classNames={{ option: classNames?.option ?? comboboxOption() }}\n          >\n            {children}\n          </DropdownBase.Option>\n        );\n      })}\n    </DropdownBase>\n  );\n};\n\ntype DropdownButtonOptionProps = {\n  id: string | number;\n  value: string;\n  onClick: () => void;\n  children?: React.ReactNode;\n};\n\nconst Option = ({ children }: DropdownButtonOptionProps) => {\n  return children;\n};\n\nOption.displayName = 'DropdownButton.Option';\nDropdownButton.Option = Option;\n"],"mappings":"gSAuEA,MAnDa,EAAiB,CAAC,CAC7B,QAAQ,UACR,aACA,WACoB,GAAK,CAMzB,IALM,EAAU,EAAS,QAAQ,EAAS,CAAC,OACzC,AAAC,GACC,EAAe,EAAM,EAAI,EAAM,OAAS,EAAe,OAC1D,CAEK,EAAqB,AAACA,GAAmB,CAC7C,IAAM,EAAW,EAAQ,KAAK,AAAC,GAAU,EAAM,MAAM,QAAU,EAAM,CACrE,AAAI,GAAU,EAAS,MAAM,SAAS,AACvC,EAED,MACE,GAAC,EAAA,CACC,kBAAmB,EACnB,OACE,EAAC,EAAA,CAAO,WAAY,CAAE,KAAM,EAAO,CAAE,MAAO,SAAW,EAAC,AAAE,WACvD,GACM,CAEX,WAAY,CACV,SAAU,GAAY,UAAY,EAAS,CAAE,KAAM,GAAK,EAAC,AAC1D,WAEA,EAAQ,IAAI,AAAC,GAAU,CACtB,GAAM,CAAE,KAAI,QAAO,SAAA,EAAU,CAAG,EAAM,MAEtC,MACE,GAAC,EAAa,OAAA,CAEL,QACP,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7DC,GAJI,EAKe,AAEzB,EAAC,EACW,AAElB,EASK,EAAS,CAAC,CAAE,WAAqC,GAC9C,EAIT,AADA,EAAO,YAAc,wBACrB,EAAe,OAAS"}
+{"version":3,"file":"DropdownButton.js","names":["value?: string","children"],"sources":["../../../../src/components/controls/dropdown/DropdownButton.tsx"],"sourcesContent":["import { Children, isValidElement } from 'react';\n\nimport {\n  button,\n  comboboxOption,\n  dropdown,\n} from '@mage-ui/styled-system/recipes';\nimport { Button } from '@/components/buttons';\n\nimport { DropdownBase } from './DropdownBase';\n\nexport type DropdownButtonProps = {\n  label?: string;\n  classNames?: {\n    option?: string;\n    dropdown?: string;\n  };\n  children?: React.ReactNode;\n  dropdownIcon?: React.ReactNode;\n};\n\nexport const DropdownButton = ({\n  label = 'Guardar',\n  classNames,\n  children,\n  dropdownIcon,\n  ...props\n}: DropdownButtonProps) => {\n  const options = Children.toArray(children).filter(\n    (child): child is React.ReactElement<DropdownButtonOptionProps> =>\n      isValidElement(child) && child.type === DropdownButton.Option,\n  );\n\n  const handleOptionSelect = (value?: string) => {\n    const selected = options.find((child) => child.props.value === value);\n    if (selected) selected.props.onClick();\n  };\n\n  return (\n    <DropdownBase\n      setSelectedOption={handleOptionSelect}\n      target={\n        <Button classNames={{ root: button({ color: 'primary' }) }}>\n          {label}\n        </Button>\n      }\n      classNames={{\n        dropdown: classNames?.dropdown ?? dropdown({ size: 'm' }),\n      }}\n      dropdownIcon={dropdownIcon}\n      {...props}\n    >\n      {options.map((child) => {\n        const { id, value, children } = child.props;\n\n        return (\n          <DropdownBase.Option\n            key={id}\n            value={value}\n            classNames={{ option: classNames?.option ?? comboboxOption() }}\n          >\n            {children}\n          </DropdownBase.Option>\n        );\n      })}\n    </DropdownBase>\n  );\n};\n\ntype DropdownButtonOptionProps = {\n  id: string | number;\n  value: string;\n  onClick: () => void;\n  children?: React.ReactNode;\n};\n\nconst Option = ({ children }: DropdownButtonOptionProps) => {\n  return children;\n};\n\nOption.displayName = 'DropdownButton.Option';\nDropdownButton.Option = Option;\n"],"mappings":"gSA4EA,MAvDa,EAAiB,CAAC,CAC7B,QAAQ,UACR,aACA,WACA,eACA,GAAG,EACiB,GAAK,CAMzB,IALM,EAAU,EAAS,QAAQ,EAAS,CAAC,OACzC,AAAC,GACC,EAAe,EAAM,EAAI,EAAM,OAAS,EAAe,OAC1D,CAEK,EAAqB,AAACA,GAAmB,CAC7C,IAAM,EAAW,EAAQ,KAAK,AAAC,GAAU,EAAM,MAAM,QAAU,EAAM,CACrE,AAAI,GAAU,EAAS,MAAM,SAAS,AACvC,EAED,MACE,GAAC,EAAA,CACC,kBAAmB,EACnB,OACE,EAAC,EAAA,CAAO,WAAY,CAAE,KAAM,EAAO,CAAE,MAAO,SAAW,EAAC,AAAE,WACvD,GACM,CAEX,WAAY,CACV,SAAU,GAAY,UAAY,EAAS,CAAE,KAAM,GAAK,EAAC,AAC1D,EACa,eACd,GAAI,WAEH,EAAQ,IAAI,AAAC,GAAU,CACtB,GAAM,CAAE,KAAI,QAAO,SAAA,EAAU,CAAG,EAAM,MAEtC,MACE,GAAC,EAAa,OAAA,CAEL,QACP,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7DC,GAJI,EAKe,AAEzB,EAAC,EACW,AAElB,EASK,EAAS,CAAC,CAAE,WAAqC,GAC9C,EAIT,AADA,EAAO,YAAc,wBACrB,EAAe,OAAS"}

package/dist/components/controls/dropdown/Select.d.ts

@@ -1,6 +1,6 @@
 import { DropdownBaseProps } from "./DropdownBase.js";
 import { InputTextProps } from "../input-text/InputText.js";
-import * as react_jsx_runtime45 from "react/jsx-runtime";
+import * as react_jsx_runtime43 from "react/jsx-runtime";
 
 //#region src/components/controls/dropdown/Select.d.ts
 type SelectProps = Omit<DropdownBaseProps, 'children' | 'onClick' | 'setQuery' | 'target'> & InputTextProps & {
@@ -23,7 +23,7 @@ declare const Select: ({
   options,
   classNames,
   ...props
-}: SelectProps) => react_jsx_runtime45.JSX.Element;
+}: SelectProps) => react_jsx_runtime43.JSX.Element;
 //# sourceMappingURL=Select.d.ts.map
 
 //#endregion

package/dist/components/controls/dropdown/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":[],"mappings":";;;;;KAgBY,WAAA,GAAc,KACxB,qEAGA;;;IAJU,KAAA,EAAA,MAAW;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;EAAA,OACrB,EAAA;IADwB,EAAA,EAAA,MAAA,GAAA,MAAA;IAIxB,KAAA,EAAA,MAAA;EAAc,CAAA,EAAA;EAUH,UAiDZ,CAAA,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;EAAA,CAAA;CAjDsB;AAAA,cAAV,MAAU,EAAA,CAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,UAAA;EAAA,GAAA;AAAA,CAAA,EAOpB,WAPoB,EAAA,GAOT,mBAAA,CAAA,GAAA,CAAA,OAPS"}
+{"version":3,"file":"Select.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":[],"mappings":";;;;;KAgBY,WAAA,GAAc,KACxB,qEAGA;;;IAJU,KAAA,EAAA,MAAW;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;EAAA,OACrB,EAAA;IADwB,EAAA,EAAA,MAAA,GAAA,MAAA;IAIxB,KAAA,EAAA,MAAA;EAAc,CAAA,EAAA;EAUH,UAkDZ,CAAA,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;EAAA,CAAA;CAlDsB;AAAA,cAAV,MAAU,EAAA,CAAA;EAAA,aAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,UAAA;EAAA,GAAA;AAAA,CAAA,EAOpB,WAPoB,EAAA,GAOT,mBAAA,CAAA,GAAA,CAAA,OAPS"}

package/dist/components/controls/dropdown/Select.js

@@ -1,2 +1,2 @@
-import{DropdownBase as e}from"./DropdownBase.js";import{InputText as t}from"../input-text/InputText.js";import{comboboxOption as n,input as r,inputLabel as i,inputRoot as a,inputSection as o,selectButton as s,selectSection as c}from"@mage-ui/styled-system/recipes";import{jsx as l}from"react/jsx-runtime";import{useState as u}from"react";import{cx as d}from"@mage-ui/styled-system/css";const f=({defaultOpened:f=!1,setSelectedOption:p,selectedOption:m,options:h,classNames:g,..._})=>{let[v,y]=u(m?.value??``),b=h.map(t=>l(e.Option,{value:t.value,active:m?.id===t.id,classNames:{option:g?.option??n()},children:t.value},t.id)),x=e=>{let t=h.find(t=>t.value===e);p(t)};return l(e,{readOnly:!0,target:l(t,{readOnly:!0,classNames:{root:g?.root??a(),label:g?.label??i(),input:g?.input??d(r(),s()),section:g?.section??d(o(),c())},value:v,..._}),selectedOption:m,setQuery:y,setSelectedOption:e=>x(e),children:b})};export{f as Select};
+import{DropdownBase as e}from"./DropdownBase.js";import{InputText as t}from"../input-text/InputText.js";import{comboboxOption as n,input as r,inputLabel as i,inputRoot as a,inputSection as o,selectButton as s,selectSection as c}from"@mage-ui/styled-system/recipes";import{jsx as l}from"react/jsx-runtime";import{useState as u}from"react";import{cx as d}from"@mage-ui/styled-system/css";const f=({defaultOpened:f=!1,setSelectedOption:p,selectedOption:m,options:h,classNames:g,..._})=>{let[v,y]=u(m?.value??``),b=h.map(t=>l(e.Option,{value:t.value,active:m?.id===t.id,classNames:{option:g?.option??n()},children:t.value},t.id)),x=e=>{let t=h.find(t=>t.value===e);p(t)};return l(e,{readOnly:!0,target:l(t,{readOnly:!0,classNames:{root:g?.root??a(),label:g?.label??i(),input:g?.input??d(r(),s()),section:g?.section??d(o(),c())},value:v,..._}),selectedOption:m,setQuery:y,setSelectedOption:e=>x(e),..._,children:b})};export{f as Select};
 //# sourceMappingURL=Select.js.map

package/dist/components/controls/dropdown/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["value: string | undefined"],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  comboboxOption,\n  input,\n  inputLabel,\n  inputRoot,\n  inputSection,\n  selectButton,\n  selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type SelectProps = Omit<\n  DropdownBaseProps,\n  'children' | 'onClick' | 'setQuery' | 'target'\n> &\n  InputTextProps & {\n    setSelectedOption: (\n      option: { id: string | number; value: string } | undefined,\n    ) => void;\n    options: { id: string | number; value: string }[];\n    classNames?: {\n      option?: string;\n    };\n  };\n\nexport const Select = ({\n  defaultOpened = false,\n  setSelectedOption,\n  selectedOption,\n  options,\n  classNames,\n  ...props\n}: SelectProps) => {\n  const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n  const dropdownOptions = options.map((option) => (\n    <DropdownBase.Option\n      value={option.value}\n      key={option.id}\n      active={selectedOption?.id === option.id}\n      classNames={{ option: classNames?.option ?? comboboxOption() }}\n    >\n      {option.value}\n    </DropdownBase.Option>\n  ));\n\n  const onChange = (value: string | undefined) => {\n    const selected = options.find((item) => item.value === value);\n    setSelectedOption(selected);\n  };\n\n  return (\n    <DropdownBase\n      readOnly={true}\n      target={\n        <InputText\n          readOnly\n          classNames={{\n            root: classNames?.root ?? inputRoot(),\n            label: classNames?.label ?? inputLabel(),\n            input: classNames?.input ?? cx(input(), selectButton()),\n            section: classNames?.section ?? cx(inputSection(), selectSection()),\n          }}\n          value={query}\n          {...props}\n        />\n      }\n      selectedOption={selectedOption}\n      setQuery={setQuery}\n      setSelectedOption={(option) => onChange(option)}\n    >\n      {dropdownOptions}\n    </DropdownBase>\n  );\n};\n"],"mappings":"kYA8BA,MAAa,EAAS,CAAC,CACrB,iBAAgB,EAChB,oBACA,iBACA,UACA,aACA,GAAG,EACS,GAAK,CAcjB,GAbM,CAAC,EAAO,EAAS,CAAG,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAkB,EAAQ,IAAI,AAAC,GACnC,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,EAAW,AAACA,GAA8B,CAC9C,IAAM,EAAW,EAAQ,KAAK,AAAC,GAAS,EAAK,QAAU,EAAM,CAC7D,EAAkB,EAAS,AAC5B,EAED,MACE,GAAC,EAAA,CACC,UAAU,EACV,OACE,EAAC,EAAA,CACC,UAAA,EACA,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAc,CAAC,CACvD,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,AACpE,EACD,MAAO,EACP,GAAI,GACJ,CAEY,iBACN,WACV,kBAAmB,AAAC,GAAW,EAAS,EAAO,UAE9C,GACY,AAElB"}
+{"version":3,"file":"Select.js","names":["value: string | undefined"],"sources":["../../../../src/components/controls/dropdown/Select.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  comboboxOption,\n  input,\n  inputLabel,\n  inputRoot,\n  inputSection,\n  selectButton,\n  selectSection,\n} from '@mage-ui/styled-system/recipes';\nimport { InputText, type InputTextProps } from '@/components/controls';\n\nimport { DropdownBase, type DropdownBaseProps } from './DropdownBase';\n\nexport type SelectProps = Omit<\n  DropdownBaseProps,\n  'children' | 'onClick' | 'setQuery' | 'target'\n> &\n  InputTextProps & {\n    setSelectedOption: (\n      option: { id: string | number; value: string } | undefined,\n    ) => void;\n    options: { id: string | number; value: string }[];\n    classNames?: {\n      option?: string;\n    };\n  };\n\nexport const Select = ({\n  defaultOpened = false,\n  setSelectedOption,\n  selectedOption,\n  options,\n  classNames,\n  ...props\n}: SelectProps) => {\n  const [query, setQuery] = useState(selectedOption?.value ?? '');\n\n  const dropdownOptions = options.map((option) => (\n    <DropdownBase.Option\n      value={option.value}\n      key={option.id}\n      active={selectedOption?.id === option.id}\n      classNames={{ option: classNames?.option ?? comboboxOption() }}\n    >\n      {option.value}\n    </DropdownBase.Option>\n  ));\n\n  const onChange = (value: string | undefined) => {\n    const selected = options.find((item) => item.value === value);\n    setSelectedOption(selected);\n  };\n\n  return (\n    <DropdownBase\n      readOnly={true}\n      target={\n        <InputText\n          readOnly\n          classNames={{\n            root: classNames?.root ?? inputRoot(),\n            label: classNames?.label ?? inputLabel(),\n            input: classNames?.input ?? cx(input(), selectButton()),\n            section: classNames?.section ?? cx(inputSection(), selectSection()),\n          }}\n          value={query}\n          {...props}\n        />\n      }\n      selectedOption={selectedOption}\n      setQuery={setQuery}\n      setSelectedOption={(option) => onChange(option)}\n      {...props}\n    >\n      {dropdownOptions}\n    </DropdownBase>\n  );\n};\n"],"mappings":"kYA8BA,MAAa,EAAS,CAAC,CACrB,iBAAgB,EAChB,oBACA,iBACA,UACA,aACA,GAAG,EACS,GAAK,CAcjB,GAbM,CAAC,EAAO,EAAS,CAAG,EAAS,GAAgB,OAAS,GAAG,CAEzD,EAAkB,EAAQ,IAAI,AAAC,GACnC,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,AAAE,WAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,EAAW,AAACA,GAA8B,CAC9C,IAAM,EAAW,EAAQ,KAAK,AAAC,GAAS,EAAK,QAAU,EAAM,CAC7D,EAAkB,EAAS,AAC5B,EAED,MACE,GAAC,EAAA,CACC,UAAU,EACV,OACE,EAAC,EAAA,CACC,UAAA,EACA,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,MAAO,GAAY,OAAS,EAAG,GAAO,CAAE,GAAc,CAAC,CACvD,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,AACpE,EACD,MAAO,EACP,GAAI,GACJ,CAEY,iBACN,WACV,kBAAmB,AAAC,GAAW,EAAS,EAAO,CAC/C,GAAI,WAEH,GACY,AAElB"}

package/dist/components/controls/input-file/InputFile.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime46 from "react/jsx-runtime";
+import * as react_jsx_runtime44 from "react/jsx-runtime";
 
 //#region src/components/controls/input-file/InputFile.d.ts
 type InputFileProps = {
@@ -26,7 +26,7 @@ declare const InputFile: ({
   multiple,
   badgeClassName,
   ...props
-}: InputFileProps) => react_jsx_runtime46.JSX.Element;
+}: InputFileProps) => react_jsx_runtime44.JSX.Element;
 //# sourceMappingURL=InputFile.d.ts.map
 //#endregion
 export { InputFile, InputFileProps };

package/dist/components/controls/input-password/InputPassword.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime47 from "react/jsx-runtime";
+import * as react_jsx_runtime45 from "react/jsx-runtime";
 import { ComponentProps, ReactNode } from "react";
 
 //#region src/components/controls/input-password/InputPassword.d.ts
@@ -26,7 +26,7 @@ declare const InputPassword: ({
   startSlot,
   endSlot,
   ...props
-}: InputPasswordProps) => react_jsx_runtime47.JSX.Element;
+}: InputPasswordProps) => react_jsx_runtime45.JSX.Element;
 //# sourceMappingURL=InputPassword.d.ts.map
 //#endregion
 export { InputPassword, InputPasswordProps };

package/dist/components/controls/input-text/InputText.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime48 from "react/jsx-runtime";
+import * as react_jsx_runtime46 from "react/jsx-runtime";
 import { ComponentProps, ReactNode } from "react";
 
 //#region src/components/controls/input-text/InputText.d.ts
@@ -25,7 +25,7 @@ declare const InputText: ({
   startSlot,
   endSlot,
   ...props
-}: InputTextProps) => react_jsx_runtime48.JSX.Element;
+}: InputTextProps) => react_jsx_runtime46.JSX.Element;
 //# sourceMappingURL=InputText.d.ts.map
 //#endregion
 export { InputText, InputTextProps };

package/dist/components/controls/multi-switch/MultiSwitch.d.ts

@@ -0,0 +1,34 @@
+import { ReactNode } from "react";
+
+//#region src/components/controls/multi-switch/MultiSwitch.d.ts
+type MultiSwitchProps = {
+  label?: ReactNode;
+  children?: ReactNode;
+  value?: string;
+  name?: string;
+  onChange?: (value: string) => void;
+  classNames?: {
+    root?: string;
+    radio?: string;
+    icon?: string;
+    inner?: string;
+    body?: string;
+    labelWrapper?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+    groupRoot?: string;
+  };
+};
+declare const MultiSwitch: {
+  ({
+    classNames,
+    children,
+    ...props
+  }: MultiSwitchProps): ReactNode;
+  displayName: string;
+};
+//# sourceMappingURL=MultiSwitch.d.ts.map
+//#endregion
+export { MultiSwitch, MultiSwitchProps };
+//# sourceMappingURL=MultiSwitch.d.ts.map

package/dist/components/controls/multi-switch/MultiSwitch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSwitch.d.ts","names":[],"sources":["../../../../src/components/controls/multi-switch/MultiSwitch.tsx"],"sourcesContent":[],"mappings":";;;KAYY,gBAAA;UACF;EADE,QAAA,CAAA,EAEC,SAFe;EAAA,KAAA,CAAA,EAAA,MAAA;EAAA,IAClB,CAAA,EAAA,MAAA;EAAS,QACN,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAAS,UAAA,CAAA,EAAA;IAkBT,IAAA,CAAA,EAAA,MAiBZ;IAAA,KAAA,CAAA,EAAA,MAAA;IAAA,IAAA,CAAA,EAAA,MAAA;;IAbE,IAAA,CAAA,EAAA,MAAA;IAAmB,YAAA,CAAA,EAAA,MAAA;IAAS,KAAA,CAAA,EAAA,MAAA;;;;;;cAJlB;;;;;KAIV,mBAAmB"}

package/dist/components/controls/multi-switch/MultiSwitch.js

@@ -0,0 +1,2 @@
+import{RadioGroup as e}from"../radio/RadioGroup.js";import{multiSwitchGroupRoot as t,multiSwitchLabel as n,multiSwitchRoot as r,multiSwitchSettings as i}from"@mage-ui/styled-system/recipes";import{jsx as a}from"react/jsx-runtime";import{cx as o}from"@mage-ui/styled-system/css";const s=({classNames:s,children:c,...l})=>a(e,{classNames:{root:o(s?.root??i(),r()),label:s?.label??n(),groupRoot:s?.groupRoot??t()},...l,children:c});s.displayName=`MultiSwitch`;export{s as MultiSwitch};
+//# sourceMappingURL=MultiSwitch.js.map

package/dist/components/controls/multi-switch/MultiSwitch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSwitch.js","names":[],"sources":["../../../../src/components/controls/multi-switch/MultiSwitch.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  multiSwitchGroupRoot,\n  multiSwitchLabel,\n  multiSwitchRoot,\n  multiSwitchSettings,\n} from '@mage-ui/styled-system/recipes';\n\nimport { RadioGroup } from '../radio/RadioGroup';\n\nexport type MultiSwitchProps = {\n  label?: ReactNode;\n  children?: ReactNode;\n  value?: string;\n  name?: string;\n  onChange?: (value: string) => void;\n  classNames?: {\n    root?: string;\n    radio?: string;\n    icon?: string;\n    inner?: string;\n    body?: string;\n    labelWrapper?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n    groupRoot?: string;\n  };\n};\n\nexport const MultiSwitch = ({\n  classNames,\n  children,\n  ...props\n}: MultiSwitchProps): ReactNode => {\n  return (\n    <RadioGroup\n      classNames={{\n        root: cx(classNames?.root ?? multiSwitchSettings(), multiSwitchRoot()),\n        label: classNames?.label ?? multiSwitchLabel(),\n        groupRoot: classNames?.groupRoot ?? multiSwitchGroupRoot(),\n      }}\n      {...props}\n    >\n      {children}\n    </RadioGroup>\n  );\n};\n\nMultiSwitch.displayName = 'MultiSwitch';\n"],"mappings":"sRAgCA,MAAa,EAAc,CAAC,CAC1B,aACA,WACA,GAAG,EACc,GAEf,EAAC,EAAA,CACC,WAAY,CACV,KAAM,EAAG,GAAY,MAAQ,GAAqB,CAAE,GAAiB,CAAC,CACtE,MAAO,GAAY,OAAS,GAAkB,CAC9C,UAAW,GAAY,WAAa,GAAsB,AAC3D,EACD,GAAI,EAEH,YACU,CAIjB,EAAY,YAAc"}

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

@@ -3,10 +3,12 @@ import { ReactNode } from "react";
 
 //#region src/components/controls/radio/Radio.d.ts
 type RadioProps = {
-  label?: string;
-  error?: string;
-  description?: string;
+  label?: ReactNode;
+  error?: ReactNode;
+  description?: ReactNode;
   value?: string;
+  name?: string;
+  checked?: boolean;
   disabled?: boolean;
   classNames?: {
     root?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","names":[],"sources":["../../../../src/components/controls/radio/Radio.tsx"],"sourcesContent":[],"mappings":";;;;KAkBY,UAAA;;;EAAA,WAAA,CAAA,EAAU,MAAA;EAmBT,KAAA,CAAA,EAiBZ,MAAA;EAAA,QAAA,CAAA,EAAA,OAAA;EAAA,UAAA,CAAA,EAAA;IAjB+C,IAAA,CAAA,EAAA,MAAA;IAAa,KAAA,CAAA,EAAA,MAAA;IAAS,IAAA,CAAA,EAAA,MAAA;;;;;;;;;cAAzD;;;;KAAmC,aAAa"}
+{"version":3,"file":"Radio.d.ts","names":[],"sources":["../../../../src/components/controls/radio/Radio.tsx"],"sourcesContent":[],"mappings":";;;;KAkBY,UAAA;UACF;UACA;EAFE,WAAA,CAAA,EAGI,SAHM;EAAA,KAAA,CAAA,EAAA,MAAA;EAAA,IACZ,CAAA,EAAA,MAAA;EAAS,OACT,CAAA,EAAA,OAAA;EAAS,QACH,CAAA,EAAA,OAAA;EAAS,UAAA,CAAA,EAAA;IAkBZ,IAiBZ,CAAA,EAAA,MAAA;IAAA,KAAA,CAAA,EAAA,MAAA;IAAA,IAAA,CAAA,EAAA,MAAA;IAjB+C,KAAA,CAAA,EAAA,MAAA;IAAa,IAAA,CAAA,EAAA,MAAA;IAAS,YAAA,CAAA,EAAA,MAAA;;;;;;cAAzD;;;;KAAmC,aAAa"}

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","names":["Radio","RadioMantine"],"sources":["../../../../src/components/controls/radio/Radio.tsx"],"sourcesContent":["import type { 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  radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Radio as RadioMantine } from '@mantine/core';\n\nimport { RadioGroup } from './RadioGroup';\n\nexport type RadioProps = {\n  label?: string;\n  error?: string;\n  description?: string;\n  value?: string;\n  disabled?: boolean;\n  classNames?: {\n    root?: string;\n    radio?: 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 = ({ classNames, ...props }: RadioProps): ReactNode => {\n  return (\n    <RadioMantine\n      classNames={{\n        root: classNames?.root ?? radioRoot(),\n        radio: cx(classNames?.radio ?? radio(), 'peer'),\n        icon: classNames?.icon ?? radioIcon(),\n        inner: classNames?.inner ?? radioInner(),\n        body: classNames?.body ?? radioBody(),\n        labelWrapper: classNames?.labelWrapper ?? radioLabelWrapper(),\n        label: classNames?.label ?? radioLabel(),\n        description: classNames?.description ?? radioDescription(),\n        error: classNames?.error ?? radioError(),\n      }}\n      {...props}\n    />\n  );\n};\n\nRadio.displayName = 'Radio';\nRadio.Group = RadioGroup;\n"],"mappings":"4WAqCA,MAAaA,EAAQ,CAAC,CAAE,aAAY,GAAG,EAAmB,GAEtD,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,EAAG,GAAY,OAAS,GAAO,CAAE,OAAO,CAC/C,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,KAAM,GAAY,MAAQ,GAAW,CACrC,aAAc,GAAY,cAAgB,GAAmB,CAC7D,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,AACzC,EACD,GAAI,GACJ,CAKN,AADA,EAAM,YAAc,QACpB,EAAM,MAAQ"}
+{"version":3,"file":"Radio.js","names":["Radio","RadioMantine"],"sources":["../../../../src/components/controls/radio/Radio.tsx"],"sourcesContent":["import type { 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  radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Radio as RadioMantine } from '@mantine/core';\n\nimport { RadioGroup } from './RadioGroup';\n\nexport type RadioProps = {\n  label?: ReactNode;\n  error?: ReactNode;\n  description?: ReactNode;\n  value?: string;\n  name?: string;\n  checked?: boolean;\n  disabled?: boolean;\n  classNames?: {\n    root?: string;\n    radio?: 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 = ({ classNames, ...props }: RadioProps): ReactNode => {\n  return (\n    <RadioMantine\n      classNames={{\n        root: classNames?.root ?? radioRoot(),\n        radio: cx(classNames?.radio ?? radio(), 'peer'),\n        icon: classNames?.icon ?? radioIcon(),\n        inner: classNames?.inner ?? radioInner(),\n        body: classNames?.body ?? radioBody(),\n        labelWrapper: classNames?.labelWrapper ?? radioLabelWrapper(),\n        label: classNames?.label ?? radioLabel(),\n        description: classNames?.description ?? radioDescription(),\n        error: classNames?.error ?? radioError(),\n      }}\n      {...props}\n    />\n  );\n};\n\nRadio.displayName = 'Radio';\nRadio.Group = RadioGroup;\n"],"mappings":"4WAuCA,MAAaA,EAAQ,CAAC,CAAE,aAAY,GAAG,EAAmB,GAEtD,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,EAAG,GAAY,OAAS,GAAO,CAAE,OAAO,CAC/C,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,KAAM,GAAY,MAAQ,GAAW,CACrC,aAAc,GAAY,cAAgB,GAAmB,CAC7D,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,AACzC,EACD,GAAI,GACJ,CAKN,AADA,EAAM,YAAc,QACpB,EAAM,MAAQ"}

package/dist/components/controls/radio/RadioGroup.d.ts

@@ -2,11 +2,12 @@ import { ReactNode } from "react";
 
 //#region src/components/controls/radio/RadioGroup.d.ts
 type RadioGroupProps = {
-  label?: string;
-  error?: string;
-  description?: string;
+  label?: ReactNode;
+  error?: ReactNode;
+  description?: ReactNode;
   children?: ReactNode;
   value?: string;
+  name?: string;
   onChange?: (value: string) => void;
   classNames?: {
     root?: string;

package/dist/components/controls/radio/RadioGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.d.ts","names":[],"sources":["../../../../src/components/controls/radio/RadioGroup.tsx"],"sourcesContent":[],"mappings":";;;KAWY,eAAA;;EAAA,KAAA,CAAA,EAAA,MAAA;;aAIC"}
+{"version":3,"file":"RadioGroup.d.ts","names":[],"sources":["../../../../src/components/controls/radio/RadioGroup.tsx"],"sourcesContent":[],"mappings":";;;KAWY,eAAA;UACF;EADE,KAAA,CAAA,EAEF,SAFE;EAAe,WAAA,CAAA,EAGX,SAHW;EAAA,QACjB,CAAA,EAGG,SAHH;EAAS,KACT,CAAA,EAAA,MAAA;EAAS,IACH,CAAA,EAAA,MAAA;EAAS,QACZ,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EAAS,UAAA,CAAA,EAAA"}

package/dist/components/controls/radio/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","names":["MantineRadio","MantineGroup"],"sources":["../../../../src/components/controls/radio/RadioGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  radioDescription,\n  radioError,\n  radioGroupRoot,\n  radioLabel,\n  radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Group as MantineGroup, Radio as MantineRadio } from '@mantine/core';\n\nexport type RadioGroupProps = {\n  label?: string;\n  error?: string;\n  description?: string;\n  children?: ReactNode;\n  value?: string;\n  onChange?: (value: string) => void;\n  classNames?: {\n    root?: string;\n    radio?: string;\n    icon?: string;\n    inner?: string;\n    body?: string;\n    labelWrapper?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n    groupRoot?: string;\n  };\n};\n\nexport const RadioGroup = ({\n  classNames,\n  children,\n  ...props\n}: RadioGroupProps): ReactNode => {\n  return (\n    <MantineRadio.Group\n      classNames={{\n        root: classNames?.root ?? radioRoot(),\n        label: classNames?.label ?? radioLabel(),\n        description: classNames?.description ?? radioDescription(),\n        error: classNames?.error ?? radioError(),\n      }}\n      {...props}\n    >\n      <MantineGroup\n        classNames={{\n          root: classNames?.groupRoot ?? radioGroupRoot(),\n        }}\n      >\n        {children}\n      </MantineGroup>\n    </MantineRadio.Group>\n  );\n};\n\nRadioGroup.displayName = 'Radio.Group';\n"],"mappings":"8NAgCA,MAAa,EAAa,CAAC,CACzB,aACA,WACA,GAAG,EACa,GAEd,EAACA,EAAa,MAAA,CACZ,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,AACzC,EACD,GAAI,WAEJ,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,WAAa,GAAgB,AAChD,EAEA,YACY,EACI,CAIzB,EAAW,YAAc"}
+{"version":3,"file":"RadioGroup.js","names":["MantineRadio","MantineGroup"],"sources":["../../../../src/components/controls/radio/RadioGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport {\n  radioDescription,\n  radioError,\n  radioGroupRoot,\n  radioLabel,\n  radioRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Group as MantineGroup, Radio as MantineRadio } from '@mantine/core';\n\nexport type RadioGroupProps = {\n  label?: ReactNode;\n  error?: ReactNode;\n  description?: ReactNode;\n  children?: ReactNode;\n  value?: string;\n  name?: string;\n  onChange?: (value: string) => void;\n  classNames?: {\n    root?: string;\n    radio?: string;\n    icon?: string;\n    inner?: string;\n    body?: string;\n    labelWrapper?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n    groupRoot?: string;\n  };\n};\n\nexport const RadioGroup = ({\n  classNames,\n  children,\n  ...props\n}: RadioGroupProps): ReactNode => {\n  return (\n    <MantineRadio.Group\n      classNames={{\n        root: classNames?.root ?? radioRoot(),\n        label: classNames?.label ?? radioLabel(),\n        description: classNames?.description ?? radioDescription(),\n        error: classNames?.error ?? radioError(),\n      }}\n      {...props}\n    >\n      <MantineGroup\n        classNames={{\n          root: classNames?.groupRoot ?? radioGroupRoot(),\n        }}\n      >\n        {children}\n      </MantineGroup>\n    </MantineRadio.Group>\n  );\n};\n\nRadioGroup.displayName = 'Radio.Group';\n"],"mappings":"8NAiCA,MAAa,EAAa,CAAC,CACzB,aACA,WACA,GAAG,EACa,GAEd,EAACA,EAAa,MAAA,CACZ,WAAY,CACV,KAAM,GAAY,MAAQ,GAAW,CACrC,MAAO,GAAY,OAAS,GAAY,CACxC,YAAa,GAAY,aAAe,GAAkB,CAC1D,MAAO,GAAY,OAAS,GAAY,AACzC,EACD,GAAI,WAEJ,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,WAAa,GAAgB,AAChD,EAEA,YACY,EACI,CAIzB,EAAW,YAAc"}

package/dist/components/controls/radio/RadioIcon.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+
+//#region src/components/controls/radio/RadioIcon.d.ts
+type RadioIconProps = {
+  label?: ReactNode;
+  icon: string;
+  a11yText?: string;
+  value?: string;
+  name?: string;
+  disabled?: boolean;
+  checked?: boolean;
+  classNames?: {
+    root?: string;
+    radio?: string;
+    icon?: string;
+    inner?: string;
+    body?: string;
+    labelWrapper?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+  };
+};
+declare const RadioIcon: {
+  ({
+    icon,
+    a11yText,
+    classNames,
+    ...props
+  }: RadioIconProps): ReactNode;
+  displayName: string;
+};
+//# sourceMappingURL=RadioIcon.d.ts.map
+//#endregion
+export { RadioIcon, RadioIconProps };
+//# sourceMappingURL=RadioIcon.d.ts.map

package/dist/components/controls/radio/RadioIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioIcon.d.ts","names":[],"sources":["../../../../src/components/controls/radio/RadioIcon.tsx"],"sourcesContent":[],"mappings":";;;KAiBY,cAAA;UACF;EADE,IAAA,EAAA,MAAA;EA8BC,QAAA,CAAA,EAAA,MAwBZ;EAAA,KAAA,CAAA,EAAA,MAAA;EAAA,IAAA,CAAA,EAAA,MAAA;;;YAnBE,CAAA,EAAA;IAAiB,IAAA,CAAA,EAAA,MAAA;IAAS,KAAA,CAAA,EAAA,MAAA;;;;;;;;;;cALhB;;;;;;KAKV,iBAAiB"}

package/dist/components/controls/radio/RadioIcon.js

@@ -0,0 +1,2 @@
+import{Icon as e}from"../../data-display/icons/icon/Icon.js";import{VisuallyHidden as t}from"../../misc/visually-hidden/VisuallyHidden.js";import{radioOnlyIcon as n,radioOnlyIconBody as r,radioOnlyIconIcon as i,radioOnlyIconInner as a,radioOnlyIconLabel as o,radioOnlyIconLabelWrapper as s,radioOnlyIconRoot as c,radioOnlyIconSettings as l}from"@mage-ui/styled-system/recipes";import{Radio as u}from"@mantine/core";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{cx as m}from"@mage-ui/styled-system/css";const h=({icon:n,a11yText:r})=>p(d,{children:[f(e,{name:n}),r&&f(t,{children:r})]}),g=({icon:e,a11yText:t,classNames:d,...p})=>f(u,{classNames:{root:m(d?.root??c(),l()),radio:m(d?.radio??n(),`peer`),icon:d?.icon??i(),inner:d?.inner??a(),body:d?.body??r(),labelWrapper:d?.labelWrapper??s(),label:d?.label??o()},label:f(h,{icon:e,a11yText:t}),...p});g.displayName=`RadioIcon`;export{g as RadioIcon};
+//# sourceMappingURL=RadioIcon.js.map

package/dist/components/controls/radio/RadioIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioIcon.js","names":["icon","RadioMantine"],"sources":["../../../../src/components/controls/radio/RadioIcon.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  radioOnlyIcon,\n  radioOnlyIconBody,\n  radioOnlyIconIcon,\n  radioOnlyIconInner,\n  radioOnlyIconLabel,\n  radioOnlyIconLabelWrapper,\n  radioOnlyIconRoot,\n  radioOnlyIconSettings,\n} from '@mage-ui/styled-system/recipes';\nimport { Radio as RadioMantine } from '@mantine/core';\nimport { Icon } from '@/components/data-display';\nimport { VisuallyHidden } from '@/components/misc';\n\nexport type RadioIconProps = {\n  label?: ReactNode;\n  icon: string;\n  a11yText?: string;\n  value?: string;\n  name?: string;\n  disabled?: boolean;\n  checked?: boolean;\n  classNames?: {\n    root?: string;\n    radio?: 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\nconst LabelIcon = ({ icon, a11yText }: { icon: string; a11yText?: string }) => {\n  return (\n    <>\n      <Icon name={icon} />\n      {a11yText && <VisuallyHidden>{a11yText}</VisuallyHidden>}\n    </>\n  );\n};\n\nexport const RadioIcon = ({\n  icon,\n  a11yText,\n  classNames,\n  ...props\n}: RadioIconProps): ReactNode => {\n  return (\n    <RadioMantine\n      classNames={{\n        root: cx(\n          classNames?.root ?? radioOnlyIconRoot(),\n          radioOnlyIconSettings(),\n        ),\n        radio: cx(classNames?.radio ?? radioOnlyIcon(), 'peer'),\n        icon: classNames?.icon ?? radioOnlyIconIcon(),\n        inner: classNames?.inner ?? radioOnlyIconInner(),\n        body: classNames?.body ?? radioOnlyIconBody(),\n        labelWrapper: classNames?.labelWrapper ?? radioOnlyIconLabelWrapper(),\n        label: classNames?.label ?? radioOnlyIconLabel(),\n      }}\n      label={<LabelIcon icon={icon} a11yText={a11yText} />}\n      {...props}\n    />\n  );\n};\n\nRadioIcon.displayName = 'RadioIcon';\n"],"mappings":"+gBA+CA,MATM,EAAY,CAAC,CAAE,KAAA,EAAM,WAA+C,GAEtE,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,EAAA,CAAK,KAAMA,CAAAA,EAAQ,CACnB,GAAY,EAAC,EAAA,CAAA,SAAgB,CAAA,EAA0B,CAAA,EACvD,CAIM,EAAY,CAAC,CACxB,KAAA,EACA,WACA,aACA,GAAG,EACY,GAEb,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,EACJ,GAAY,MAAQ,GAAmB,CACvC,GAAuB,CACxB,CACD,MAAO,EAAG,GAAY,OAAS,GAAe,CAAE,OAAO,CACvD,KAAM,GAAY,MAAQ,GAAmB,CAC7C,MAAO,GAAY,OAAS,GAAoB,CAChD,KAAM,GAAY,MAAQ,GAAmB,CAC7C,aAAc,GAAY,cAAgB,GAA2B,CACrE,MAAO,GAAY,OAAS,GAAoB,AACjD,EACD,MAAO,EAAC,EAAA,CAAU,KAAMD,EAAgB,YAAY,CACpD,GAAI,GACJ,CAIN,EAAU,YAAc"}

package/dist/components/controls/textarea/Textarea.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 import { ComponentProps, ReactNode } from "react";
 
 //#region src/components/controls/textarea/Textarea.d.ts
@@ -27,7 +27,7 @@ declare const Textarea: ({
   autosize,
   onChange,
   ...props
-}: TextareaProps) => react_jsx_runtime36.JSX.Element;
+}: TextareaProps) => react_jsx_runtime8.JSX.Element;
 //# sourceMappingURL=Textarea.d.ts.map
 
 //#endregion

package/dist/components/controls/textarea/Textarea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.d.ts","names":[],"sources":["../../../../src/components/controls/textarea/Textarea.tsx"],"sourcesContent":[],"mappings":";;;;KAcY,aAAA,GAAgB,KAAK;;;EAArB,WAAA,CAAA,EAAA,MAAa;EAAA,KAAA,CAAA,EAAA,MAAA;EAAA,UAAQ,CAAA,EAAA;IAAL,IAAA,CAAA,EAAA,MAAA;IAcd,KAAA,CAAA,EAAA,MAAA;IACF,WAAA,CAAA,EAAA,MAAA;IAAS,KAAA,CAAA,EAAA,MAAA;IAIR,OA0BZ,CAAA,EAAA,MAAA;IAAA,KAAA,CAAA,EAAA,MAAA;IA1BwB,OAAA,CAAA,EAAA,MAAA;EAAA,CAAA;EAAA,SAAA,CAAA,EALX,SAKW;EAAA,OAAA,CAAA,EAJb,SAIa;EAAA,QAAA,CAAA,EAAA,OAAA;CAAA;AAOT,cAPH,QAOG,EAAA,CAAA;EAAA,UAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAAb,aAAa,EAAA,GAAA,mBAAA,CAAA,GAAA,CAAA,OAAA;AAmBf"}
+{"version":3,"file":"Textarea.d.ts","names":[],"sources":["../../../../src/components/controls/textarea/Textarea.tsx"],"sourcesContent":[],"mappings":";;;;KAcY,aAAA,GAAgB,KAAK;;;EAArB,WAAA,CAAA,EAAA,MAAa;EAAA,KAAA,CAAA,EAAA,MAAA;EAAA,UAAQ,CAAA,EAAA;IAAL,IAAA,CAAA,EAAA,MAAA;IAcd,KAAA,CAAA,EAAA,MAAA;IACF,WAAA,CAAA,EAAA,MAAA;IAAS,KAAA,CAAA,EAAA,MAAA;IAIR,OA0BZ,CAAA,EAAA,MAAA;IAAA,KAAA,CAAA,EAAA,MAAA;IA1BwB,OAAA,CAAA,EAAA,MAAA;EAAA,CAAA;EAAA,SAAA,CAAA,EALX,SAKW;EAAA,OAAA,CAAA,EAJb,SAIa;EAAA,QAAA,CAAA,EAAA,OAAA;CAAA;AAOT,cAPH,QAOG,EAAA,CAAA;EAAA,UAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAAb,aAAa,EAAA,GAAA,kBAAA,CAAA,GAAA,CAAA,OAAA;AAmBf"}

package/dist/components/data-display/avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime39 from "react/jsx-runtime";
+import * as react_jsx_runtime48 from "react/jsx-runtime";
 
 //#region src/components/data-display/avatar/Avatar.d.ts
 type AvatarProps = {
@@ -13,7 +13,7 @@ type AvatarProps = {
 declare const Avatar: ({
   classNames,
   ...props
-}: AvatarProps) => react_jsx_runtime39.JSX.Element;
+}: AvatarProps) => react_jsx_runtime48.JSX.Element;
 //# sourceMappingURL=Avatar.d.ts.map
 
 //#endregion

package/dist/components/data-display/badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime40 from "react/jsx-runtime";
+import * as react_jsx_runtime49 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/data-display/badge/Badge.d.ts
@@ -17,7 +17,7 @@ declare const Badge: ({
   startSlot,
   classNames,
   ...props
-}: BadgeProps) => react_jsx_runtime40.JSX.Element;
+}: BadgeProps) => react_jsx_runtime49.JSX.Element;
 //# sourceMappingURL=Badge.d.ts.map
 
 //#endregion

package/dist/components/data-display/carousel/Carousel.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime41 from "react/jsx-runtime";
+import * as react_jsx_runtime50 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/data-display/carousel/Carousel.d.ts
@@ -36,7 +36,7 @@ declare const Carousel: {
   ({
     classNames,
     ...props
-  }: CarouselProps): react_jsx_runtime41.JSX.Element;
+  }: CarouselProps): react_jsx_runtime50.JSX.Element;
   Slide: {
     ({
       children

package/dist/components/data-display/tables/table/Table.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime72 from "react/jsx-runtime";
+import * as react_jsx_runtime73 from "react/jsx-runtime";
 
 //#region src/components/data-display/tables/table/Table.d.ts
 type TableProps = {
@@ -17,14 +17,14 @@ declare const Table: {
     classNames,
     scrollable,
     children
-  }: TableProps): react_jsx_runtime72.JSX.Element;
+  }: TableProps): react_jsx_runtime73.JSX.Element;
   displayName: string;
   Header: {
     ({
       children
     }: {
       children: any;
-    }): react_jsx_runtime72.JSX.Element;
+    }): react_jsx_runtime73.JSX.Element;
     displayName: string;
   };
   Body: {
@@ -32,7 +32,7 @@ declare const Table: {
       children
     }: {
       children: any;
-    }): react_jsx_runtime72.JSX.Element;
+    }): react_jsx_runtime73.JSX.Element;
     displayName: string;
   };
   Footer: {
@@ -40,7 +40,7 @@ declare const Table: {
       children
     }: {
       children: any;
-    }): react_jsx_runtime72.JSX.Element;
+    }): react_jsx_runtime73.JSX.Element;
     displayName: string;
   };
   Head: {
@@ -50,7 +50,7 @@ declare const Table: {
     }: {
       [x: string]: any;
       children: any;
-    }): react_jsx_runtime72.JSX.Element;
+    }): react_jsx_runtime73.JSX.Element;
     displayName: string;
   };
   Row: {
@@ -60,7 +60,7 @@ declare const Table: {
     }: {
       [x: string]: any;
       children: any;
-    }): react_jsx_runtime72.JSX.Element;
+    }): react_jsx_runtime73.JSX.Element;
     displayName: string;
   };
   Cell: {
@@ -70,7 +70,7 @@ declare const Table: {
     }: {
       [x: string]: any;
       children: any;
-    }): react_jsx_runtime72.JSX.Element;
+    }): react_jsx_runtime73.JSX.Element;
     displayName: string;
   };
 };

package/dist/components/forms/form/Form.d.ts

@@ -11,7 +11,7 @@ import { FormDatePickerProps } from "./controls/FormDatePicker.js";
 import { FormInputFileProps } from "./controls/FormInputFile.js";
 import { FormInputPasswordProps } from "./controls/FormInputPassword.js";
 import { FormIfFieldProps } from "./controls/FormIfField.js";
-import * as react_jsx_runtime9 from "react/jsx-runtime";
+import * as react_jsx_runtime12 from "react/jsx-runtime";
 import { ReactNode } from "react";
 import { ZodRawShape, z } from "zod";
 
@@ -29,11 +29,11 @@ declare const Form: {
     onSubmit,
     children,
     ...props
-  }: FormProps): react_jsx_runtime9.JSX.Element;
+  }: FormProps): react_jsx_runtime12.JSX.Element;
   InputText: {
     ({
       ...props
-    }: FormInputTextProps): react_jsx_runtime9.JSX.Element;
+    }: FormInputTextProps): react_jsx_runtime12.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string, min?: number) => z.ZodString;
@@ -44,7 +44,7 @@ declare const Form: {
       name,
       control,
       ...props
-    }: FormCheckboxProps): react_jsx_runtime9.JSX.Element;
+    }: FormCheckboxProps): react_jsx_runtime12.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string) => z.ZodEffects<z.ZodBoolean, boolean, boolean>;
@@ -57,8 +57,9 @@ declare const Form: {
       children,
       label,
       description,
-      error
-    }: FormCheckboxGroupProps): react_jsx_runtime9.JSX.Element;
+      error,
+      ...props
+    }: FormCheckboxGroupProps): react_jsx_runtime12.JSX.Element;
     rules: {
       required: (message?: string) => z.ZodArray<z.ZodString, "many">;
     };
@@ -72,7 +73,7 @@ declare const Form: {
       name,
       control,
       ...props
-    }: FormComboboxProps): react_jsx_runtime9.JSX.Element;
+    }: FormComboboxProps): react_jsx_runtime12.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string, defaultValue?: {
@@ -103,24 +104,25 @@ declare const Form: {
       children,
       label,
       description,
-      error
-    }: FormRadioGroupProps): react_jsx_runtime9.JSX.Element;
+      error,
+      ...props
+    }: FormRadioGroupProps): react_jsx_runtime12.JSX.Element;
     rules: {
       required: (message?: string) => z.ZodEffects<z.ZodString, string, string>;
     };
     Radio: {
-      (props: RadioProps): react_jsx_runtime9.JSX.Element;
+      (props: RadioProps): react_jsx_runtime12.JSX.Element;
       displayName: string;
     };
   };
   Radio: {
-    (props: RadioProps): react_jsx_runtime9.JSX.Element;
+    (props: RadioProps): react_jsx_runtime12.JSX.Element;
     displayName: string;
   };
   Textarea: {
     ({
       ...props
-    }: FormTextareaProps): react_jsx_runtime9.JSX.Element;
+    }: FormTextareaProps): react_jsx_runtime12.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string, min?: number) => z.ZodString;
@@ -131,7 +133,7 @@ declare const Form: {
       name,
       control,
       ...props
-    }: FormSelectProps): react_jsx_runtime9.JSX.Element;
+    }: FormSelectProps): react_jsx_runtime12.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string, defaultValue?: {
@@ -160,7 +162,7 @@ declare const Form: {
       name,
       control,
       ...props
-    }: FormDatePickerProps): react_jsx_runtime9.JSX.Element;
+    }: FormDatePickerProps): react_jsx_runtime12.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string) => z.ZodEffects<z.ZodUnion<[z.ZodType<Date, z.ZodTypeDef, Date>, z.ZodEffects<z.ZodString, string, string>]>, string | Date, string | Date>;
@@ -171,7 +173,7 @@ declare const Form: {
       control,
       name,
       ...props
-    }: FormInputFileProps): react_jsx_runtime9.JSX.Element;
+    }: FormInputFileProps): react_jsx_runtime12.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string, min?: number) => z.ZodEffects<z.ZodAny, any, any>;
@@ -180,7 +182,7 @@ declare const Form: {
   InputPassword: {
     ({
       ...props
-    }: FormInputPasswordProps): react_jsx_runtime9.JSX.Element;
+    }: FormInputPasswordProps): react_jsx_runtime12.JSX.Element;
     displayName: string;
     rules: {
       required: (message?: string) => z.ZodString;

package/dist/components/forms/form/Form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Form.d.ts","names":[],"sources":["../../../../src/components/forms/form/Form.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;KAwBY,SAAA;;UAEF;;YAEE,KAAA,CAAM;;cAGL;;;;;;;KAMV,YAAS,kBAAA,CAAA,GAAA,CAAA;;;;OAAA;;;;;;;IAbA,CAAA;MAAA,IAAA;MAAS,OAAA;MAAA,GAAA;IAAA,CAAA,mBAAA,CAAA,gCAAA;IAAA,WAAA,EAAA,MAAA;IAEX,KAAA,EAAA;MAEE,QAAM,EAAA,CAAA,OAAA,CAAA,EAAA,MAAA,EAAA,eAAA,aAAA,EAAA,OAAA,EAAA,OAAA,CAAA;IAAS,CAAA;EAGd,CAAA;EA0BZ,aAAA,EAAA;IAAA,CAAA;MAAA,IAAA;MAAA,OAAA;MAAA,QAAA;MAAA,KAAA;MAAA,WAAA;MAAA;IAAA,CAAA,wBAAA,CAAA,gCAAA;;;;IApBE,QAAA,EAAA,CAAA;MAAA,UAAA;MAAA,GAAA;IAAA,CAAA,eAAA,EAAA,YAAA;EAAS,CAAA;EAAA,QAAA,EAAA"}
+{"version":3,"file":"Form.d.ts","names":[],"sources":["../../../../src/components/forms/form/Form.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;KAwBY,SAAA;;UAEF;;YAEE,KAAA,CAAM;;cAGL;;;;;;;KAMV,YAAS,mBAAA,CAAA,GAAA,CAAA;;;;OAAA;;;;;;;IAbA,CAAA;MAAA,IAAA;MAAS,OAAA;MAAA,GAAA;IAAA,CAAA,mBAAA,CAAA,iCAAA;IAAA,WAAA,EAAA,MAAA;IAEX,KAAA,EAAA;MAEE,QAAM,EAAA,CAAA,OAAA,CAAA,EAAA,MAAA,EAAA,eAAA,aAAA,EAAA,OAAA,EAAA,OAAA,CAAA;IAAS,CAAA;EAGd,CAAA;EA0BZ,aAAA,EAAA;IAAA,CAAA;MAAA,IAAA;MAAA,OAAA;MAAA,QAAA;MAAA,KAAA;MAAA,WAAA;MAAA,KAAA;MAAA,GAAA;IAAA,CAAA,wBAAA,CAAA,iCAAA;;;;IApBE,QAAA,EAAA,CAAA;MAAA,UAAA;MAAA,GAAA;IAAA,CAAA,eAAA,EAAA,YAAA;EAAS,CAAA;EAAA,QAAA,EAAA"}

package/dist/components/forms/form/controls/FormCheckboxGroup.js

@@ -1,2 +1,2 @@
-import{Checkbox as e}from"../../../controls/checkbox/Checkbox.js";import{CheckboxGroup as t}from"../../../controls/checkbox/CheckboxGroup.js";import{jsx as n}from"react/jsx-runtime";import{Controller as r}from"react-hook-form";import{z as i}from"zod";const a=({name:e,control:i,children:a,label:o,description:s,error:c})=>n(r,{name:e,control:i,render:({field:{value:e,onChange:r}})=>n(t,{label:o,description:s,error:c,value:e??[],onChange:r,children:a})}),o=(e=`Select one option`)=>i.array(i.string()).min(1,e);a.rules={required:o},a.Checkbox=e;export{a as FormCheckboxGroup};
+import{Checkbox as e}from"../../../controls/checkbox/Checkbox.js";import{CheckboxGroup as t}from"../../../controls/checkbox/CheckboxGroup.js";import{jsx as n}from"react/jsx-runtime";import{Controller as r}from"react-hook-form";import{z as i}from"zod";const a=({name:e,control:i,children:a,label:o,description:s,error:c,...l})=>n(r,{name:e,control:i,render:({field:{value:e,onChange:r}})=>n(t,{label:o,description:s,error:c,value:e??[],onChange:r,...l,children:a})}),o=(e=`Select one option`)=>i.array(i.string()).min(1,e);a.rules={required:o},a.Checkbox=e;export{a as FormCheckboxGroup};
 //# sourceMappingURL=FormCheckboxGroup.js.map

package/dist/components/forms/form/controls/FormCheckboxGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormCheckboxGroup.js","names":[],"sources":["../../../../../src/components/forms/form/controls/FormCheckboxGroup.tsx"],"sourcesContent":["import { type Control, Controller } from 'react-hook-form';\nimport { z } from 'zod';\n\nimport { Checkbox } from '@/components/controls';\nimport { CheckboxGroup } from '@/components/controls/checkbox/CheckboxGroup';\n\nexport type FormCheckboxGroupProps = {\n  control?: Control;\n  name: string;\n  children: React.ReactNode[];\n  label?: string;\n  description?: string;\n  error?: string;\n};\n\nexport const FormCheckboxGroup = ({\n  name,\n  control,\n  children,\n  label,\n  description,\n  error,\n}: FormCheckboxGroupProps) => {\n  return (\n    <Controller\n      name={name as string}\n      control={control}\n      render={({ field: { value, onChange } }) => {\n        return (\n          <CheckboxGroup\n            label={label}\n            description={description}\n            error={error}\n            value={value ?? []}\n            onChange={onChange}\n          >\n            {children}\n          </CheckboxGroup>\n        );\n      }}\n    />\n  );\n};\n\nexport const required = (message = 'Select one option') => {\n  return z.array(z.string()).min(1, message);\n};\n\nFormCheckboxGroup.rules = { required };\n\nFormCheckboxGroup.Checkbox = Checkbox;\n"],"mappings":"2PA4CA,MA7Ba,EAAoB,CAAC,CAChC,OACA,UACA,WACA,QACA,cACA,QACuB,GAErB,EAAC,EAAA,CACO,OACG,UACT,OAAQ,CAAC,CAAE,MAAO,CAAE,QAAO,WAAU,CAAE,GAEnC,EAAC,EAAA,CACQ,QACM,cACN,QACP,MAAO,GAAS,CAAE,EACR,WAET,YACa,EAGpB,CAIO,EAAW,CAAC,EAAU,sBAC1B,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,IAAI,EAAG,EAAQ,CAK5C,AAFA,EAAkB,MAAQ,CAAE,UAAU,EAEtC,EAAkB,SAAW"}
+{"version":3,"file":"FormCheckboxGroup.js","names":[],"sources":["../../../../../src/components/forms/form/controls/FormCheckboxGroup.tsx"],"sourcesContent":["import { type Control, Controller } from 'react-hook-form';\nimport { z } from 'zod';\n\nimport { Checkbox } from '@/components/controls';\nimport { CheckboxGroup } from '@/components/controls/checkbox/CheckboxGroup';\n\nexport type FormCheckboxGroupProps = {\n  control?: Control;\n  name: string;\n  children: React.ReactNode[];\n  label?: string;\n  description?: string;\n  error?: string;\n};\n\nexport const FormCheckboxGroup = ({\n  name,\n  control,\n  children,\n  label,\n  description,\n  error,\n  ...props\n}: FormCheckboxGroupProps) => {\n  return (\n    <Controller\n      name={name as string}\n      control={control}\n      render={({ field: { value, onChange } }) => {\n        return (\n          <CheckboxGroup\n            label={label}\n            description={description}\n            error={error}\n            value={value ?? []}\n            onChange={onChange}\n            {...props}\n          >\n            {children}\n          </CheckboxGroup>\n        );\n      }}\n    />\n  );\n};\n\nexport const required = (message = 'Select one option') => {\n  return z.array(z.string()).min(1, message);\n};\n\nFormCheckboxGroup.rules = { required };\n\nFormCheckboxGroup.Checkbox = Checkbox;\n"],"mappings":"2PA8CA,MA/Ba,EAAoB,CAAC,CAChC,OACA,UACA,WACA,QACA,cACA,QACA,GAAG,EACoB,GAErB,EAAC,EAAA,CACO,OACG,UACT,OAAQ,CAAC,CAAE,MAAO,CAAE,QAAO,WAAU,CAAE,GAEnC,EAAC,EAAA,CACQ,QACM,cACN,QACP,MAAO,GAAS,CAAE,EACR,WACV,GAAI,EAEH,YACa,EAGpB,CAIO,EAAW,CAAC,EAAU,sBAC1B,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,IAAI,EAAG,EAAQ,CAK5C,AAFA,EAAkB,MAAQ,CAAE,UAAU,EAEtC,EAAkB,SAAW"}

package/dist/components/forms/form/controls/FormRadioGroup.js

@@ -1,2 +1,2 @@
-import{Radio as e}from"../../../controls/radio/Radio.js";import{FormRadio as t}from"./FormRadio.js";import{jsx as n}from"react/jsx-runtime";import{Controller as r}from"react-hook-form";import{z as i}from"zod";const a=({name:t,control:i,children:a,label:o,description:s,error:c})=>n(r,{name:t,control:i,render:({field:{value:t,onChange:r}})=>n(e.Group,{label:o,description:s,error:c,value:t,onChange:r,children:a})}),o=(e=`The field is required`)=>i.string().refine(e=>e!==``,{message:e});a.rules={required:o},a.Radio=t;export{a as FormRadioGroup};
+import{Radio as e}from"../../../controls/radio/Radio.js";import{FormRadio as t}from"./FormRadio.js";import{jsx as n}from"react/jsx-runtime";import{Controller as r}from"react-hook-form";import{z as i}from"zod";const a=({name:t,control:i,children:a,label:o,description:s,error:c,...l})=>n(r,{name:t,control:i,render:({field:{value:t,onChange:r}})=>n(e.Group,{label:o,description:s,error:c,value:t,onChange:r,...l,children:a})}),o=(e=`The field is required`)=>i.string().refine(e=>e!==``,{message:e});a.rules={required:o},a.Radio=t;export{a as FormRadioGroup};
 //# sourceMappingURL=FormRadioGroup.js.map

package/dist/components/forms/form/controls/FormRadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormRadioGroup.js","names":[],"sources":["../../../../../src/components/forms/form/controls/FormRadioGroup.tsx"],"sourcesContent":["import { type Control, Controller } from 'react-hook-form';\nimport { z } from 'zod';\n\nimport { Radio, type RadioProps } from '@/components/controls';\n\nimport { FormRadio } from './FormRadio';\n\nexport type FormRadioGroupProps = RadioProps & {\n  control?: Control;\n  name: string;\n  children: React.ReactNode[];\n  label?: string;\n  description?: string;\n  error?: string;\n};\n\nexport const FormRadioGroup = ({\n  name,\n  control,\n  children,\n  label,\n  description,\n  error,\n}: FormRadioGroupProps) => {\n  return (\n    <Controller\n      name={name as string}\n      control={control}\n      render={({ field: { value, onChange } }) => {\n        return (\n          <Radio.Group\n            label={label}\n            description={description}\n            error={error}\n            value={value}\n            onChange={onChange}\n          >\n            {children}\n          </Radio.Group>\n        );\n      }}\n    />\n  );\n};\n\nexport const required = (message = 'The field is required') => {\n  return z.string().refine((value) => value !== '', {\n    message,\n  });\n};\n\nFormRadioGroup.rules = { required };\n\nFormRadioGroup.Radio = FormRadio;\n"],"mappings":"iNA6CA,MA7Ba,EAAiB,CAAC,CAC7B,OACA,UACA,WACA,QACA,cACA,QACoB,GAElB,EAAC,EAAA,CACO,OACG,UACT,OAAQ,CAAC,CAAE,MAAO,CAAE,QAAO,WAAU,CAAE,GAEnC,EAAC,EAAM,MAAA,CACE,QACM,cACN,QACA,QACG,WAET,YACW,EAGlB,CAIO,EAAW,CAAC,EAAU,0BAC1B,EAAE,QAAQ,CAAC,OAAO,AAAC,GAAU,IAAU,GAAI,CAChD,SACD,EAAC,CAKJ,AAFA,EAAe,MAAQ,CAAE,UAAU,EAEnC,EAAe,MAAQ"}
+{"version":3,"file":"FormRadioGroup.js","names":[],"sources":["../../../../../src/components/forms/form/controls/FormRadioGroup.tsx"],"sourcesContent":["import { type Control, Controller } from 'react-hook-form';\nimport { z } from 'zod';\n\nimport { Radio, type RadioProps } from '@/components/controls';\n\nimport { FormRadio } from './FormRadio';\n\nexport type FormRadioGroupProps = RadioProps & {\n  control?: Control;\n  name: string;\n  children: React.ReactNode[];\n  label?: string;\n  description?: string;\n  error?: string;\n};\n\nexport const FormRadioGroup = ({\n  name,\n  control,\n  children,\n  label,\n  description,\n  error,\n  ...props\n}: FormRadioGroupProps) => {\n  return (\n    <Controller\n      name={name as string}\n      control={control}\n      render={({ field: { value, onChange } }) => {\n        return (\n          <Radio.Group\n            label={label}\n            description={description}\n            error={error}\n            value={value}\n            onChange={onChange}\n            {...props}\n          >\n            {children}\n          </Radio.Group>\n        );\n      }}\n    />\n  );\n};\n\nexport const required = (message = 'The field is required') => {\n  return z.string().refine((value) => value !== '', {\n    message,\n  });\n};\n\nFormRadioGroup.rules = { required };\n\nFormRadioGroup.Radio = FormRadio;\n"],"mappings":"iNA+CA,MA/Ba,EAAiB,CAAC,CAC7B,OACA,UACA,WACA,QACA,cACA,QACA,GAAG,EACiB,GAElB,EAAC,EAAA,CACO,OACG,UACT,OAAQ,CAAC,CAAE,MAAO,CAAE,QAAO,WAAU,CAAE,GAEnC,EAAC,EAAM,MAAA,CACE,QACM,cACN,QACA,QACG,WACV,GAAI,EAEH,YACW,EAGlB,CAIO,EAAW,CAAC,EAAU,0BAC1B,EAAE,QAAQ,CAAC,OAAO,AAAC,GAAU,IAAU,GAAI,CAChD,SACD,EAAC,CAKJ,AAFA,EAAe,MAAQ,CAAE,UAAU,EAEnC,EAAe,MAAQ"}

package/dist/components/misc/visually-hidden/VisuallyHidden.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime50 from "react/jsx-runtime";
+import * as react_jsx_runtime42 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/misc/visually-hidden/VisuallyHidden.d.ts
@@ -7,7 +7,7 @@ type VisuallyHiddenProps = {
 };
 declare const VisuallyHidden: ({
   children
-}: VisuallyHiddenProps) => react_jsx_runtime50.JSX.Element;
+}: VisuallyHiddenProps) => react_jsx_runtime42.JSX.Element;
 //# sourceMappingURL=VisuallyHidden.d.ts.map
 
 //#endregion

package/dist/components/navigation/breadcrumbs/Breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime38 from "react/jsx-runtime";
+import * as react_jsx_runtime9 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/navigation/breadcrumbs/Breadcrumbs.d.ts
@@ -17,7 +17,7 @@ declare const Breadcrumbs: {
     separator,
     children,
     classNames
-  }: BreadcrumbsProps): react_jsx_runtime38.JSX.Element;
+  }: BreadcrumbsProps): react_jsx_runtime9.JSX.Element;
   Item: {
     ({
       children

package/dist/components/navigation/breadcrumbs/Breadcrumbs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.d.ts","names":[],"sources":["../../../../src/components/navigation/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":[],"mappings":";;;;KAgBY,gBAAA;cACE;;IADF,IAAA,CAAA,EAAA,MAAA;IAAgB,IAAA,CAAA,EAAA,MAAA;IACd,IAAA,CAAA,EAAA,MAAA;IAOD,SAAA,CAAA,EAAA,MAAA;EAAS,CAAA;EAGT,QAAA,CAAA,EAHA,SA6CZ;CAAA;AAAA,cA1CY,WA0CZ,EAAA;;;;;KAtCE,mBAAgB,mBAAA,CAAA,GAAA,CAAA;;IAAhB,CAAA;MAAA;IAAA,CAAA,EAyDyB,SAzDzB,CAAA,EAyDkC,SAzDlC;IAAgB,WAAA,EAAA,MAAA;EAAA,CAAA;;KAqDd,SAAA,GAIgC;EAAA,QAAA,EAHzB,SAGyB;AAnBnC,CAAA"}
+{"version":3,"file":"Breadcrumbs.d.ts","names":[],"sources":["../../../../src/components/navigation/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":[],"mappings":";;;;KAgBY,gBAAA;cACE;;IADF,IAAA,CAAA,EAAA,MAAA;IAAgB,IAAA,CAAA,EAAA,MAAA;IACd,IAAA,CAAA,EAAA,MAAA;IAOD,SAAA,CAAA,EAAA,MAAA;EAAS,CAAA;EAGT,QAAA,CAAA,EAHA,SA6CZ;CAAA;AAAA,cA1CY,WA0CZ,EAAA;;;;;KAtCE,mBAAgB,kBAAA,CAAA,GAAA,CAAA;;IAAhB,CAAA;MAAA;IAAA,CAAA,EAyDyB,SAzDzB,CAAA,EAyDkC,SAzDlC;IAAgB,WAAA,EAAA,MAAA;EAAA,CAAA;;KAqDd,SAAA,GAIgC;EAAA,QAAA,EAHzB,SAGyB;AAnBnC,CAAA"}

package/dist/components/navigation/tabs/Tabs.d.ts

@@ -1,7 +1,7 @@
 import { TabsListProps } from "./TabsList.js";
 import { TabsTabProps } from "./TabsTab.js";
 import { TabsPanelProps } from "./TabsPanel.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 import React from "react";
 
 //#region src/components/navigation/tabs/Tabs.d.ts
@@ -18,14 +18,14 @@ declare const Tabs: {
     classNames,
     children,
     ...props
-  }: TabsProps): react_jsx_runtime2.JSX.Element;
+  }: TabsProps): react_jsx_runtime1.JSX.Element;
   displayName: string;
   List: {
     ({
       classNames,
       children,
       ...props
-    }: TabsListProps): react_jsx_runtime2.JSX.Element;
+    }: TabsListProps): react_jsx_runtime1.JSX.Element;
     displayName: string;
   };
   Tab: {
@@ -35,7 +35,7 @@ declare const Tabs: {
       endSlot,
       children,
       ...props
-    }: TabsTabProps): react_jsx_runtime2.JSX.Element;
+    }: TabsTabProps): react_jsx_runtime1.JSX.Element;
     displayName: string;
   };
   Panel: {
@@ -43,7 +43,7 @@ declare const Tabs: {
       classNames,
       children,
       ...props
-    }: TabsPanelProps): react_jsx_runtime2.JSX.Element;
+    }: TabsPanelProps): react_jsx_runtime1.JSX.Element;
     displayName: string;
   };
 };

package/dist/index.d.ts

@@ -8,7 +8,9 @@ import { Select, SelectProps } from "./components/controls/dropdown/Select.js";
 import { InputFile, InputFileProps } from "./components/controls/input-file/InputFile.js";
 import { InputPassword, InputPasswordProps } from "./components/controls/input-password/InputPassword.js";
 import { InputText, InputTextProps } from "./components/controls/input-text/InputText.js";
+import { MultiSwitch, MultiSwitchProps } from "./components/controls/multi-switch/MultiSwitch.js";
 import { Radio, RadioProps } from "./components/controls/radio/Radio.js";
+import { RadioIcon, RadioIconProps } from "./components/controls/radio/RadioIcon.js";
 import { Textarea, TextareaProps } from "./components/controls/textarea/Textarea.js";
 import { Avatar, AvatarProps } from "./components/data-display/avatar/Avatar.js";
 import { Badge, BadgeProps } from "./components/data-display/badge/Badge.js";
@@ -22,4 +24,4 @@ import { VisuallyHidden, VisuallyHiddenProps } from "./components/misc/visually-
 import { Breadcrumbs, BreadcrumbsProps } from "./components/navigation/breadcrumbs/Breadcrumbs.js";
 import { Tabs, TabsProps } from "./components/navigation/tabs/Tabs.js";
 import { MageUiProvider, MageUiProviderProps } from "./providers/MageUiProvider.js";
-export { Avatar, AvatarProps, Badge, BadgeProps, Breadcrumbs, BreadcrumbsProps, Button, ButtonIcon, ButtonIconProps, ButtonProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Combobox, ComboboxProps, DatePicker, DatePickerProps, DropdownButton, DropdownButtonProps, Form, FormProps, Icon, IconProps, IconRaw, IconRawProps, IconTheme, IconThemeProps, InputFile, InputFileProps, InputPassword, InputPasswordProps, InputText, InputTextProps, MageUiProvider, MageUiProviderProps, Radio, RadioProps, Select, SelectProps, Table, Tabs, TabsProps, Textarea, TextareaProps, VisuallyHidden, VisuallyHiddenProps };
+export { Avatar, AvatarProps, Badge, BadgeProps, Breadcrumbs, BreadcrumbsProps, Button, ButtonIcon, ButtonIconProps, ButtonProps, Carousel, CarouselProps, Checkbox, CheckboxProps, Combobox, ComboboxProps, DatePicker, DatePickerProps, DropdownButton, DropdownButtonProps, Form, FormProps, Icon, IconProps, IconRaw, IconRawProps, IconTheme, IconThemeProps, InputFile, InputFileProps, InputPassword, InputPasswordProps, InputText, InputTextProps, MageUiProvider, MageUiProviderProps, MultiSwitch, MultiSwitchProps, Radio, RadioIcon, RadioIconProps, RadioProps, Select, SelectProps, Table, Tabs, TabsProps, Textarea, TextareaProps, VisuallyHidden, VisuallyHiddenProps };

package/dist/index.js

@@ -1 +1 @@
-import{Button as e}from"./components/buttons/button/Button.js";import{Avatar as t}from"./components/data-display/avatar/Avatar.js";import{Badge as n}from"./components/data-display/badge/Badge.js";import{Carousel as r}from"./components/data-display/carousel/Carousel.js";import{Icon as i}from"./components/data-display/icons/icon/Icon.js";import{IconRaw as a}from"./components/data-display/icons/icon-raw/IconRaw.js";import{IconTheme as o}from"./components/data-display/icons/icon-theme/IconTheme.js";import{Table as s}from"./components/data-display/tables/table/Table.js";import{VisuallyHidden as c}from"./components/misc/visually-hidden/VisuallyHidden.js";import{ButtonIcon as l}from"./components/buttons/button-icon/ButtonIcon.js";import{Checkbox as u}from"./components/controls/checkbox/Checkbox.js";import{DatePicker as d}from"./components/controls/date-picker/DatePicker.js";import{Combobox as f}from"./components/controls/dropdown/Combobox.js";import{DropdownButton as p}from"./components/controls/dropdown/DropdownButton.js";import{Select as m}from"./components/controls/dropdown/Select.js";import{InputFile as h}from"./components/controls/input-file/InputFile.js";import{InputPassword as g}from"./components/controls/input-password/InputPassword.js";import{InputText as _}from"./components/controls/input-text/InputText.js";import{Radio as v}from"./components/controls/radio/Radio.js";import{Textarea as y}from"./components/controls/textarea/Textarea.js";import{Form as b}from"./components/forms/form/Form.js";import{Breadcrumbs as x}from"./components/navigation/breadcrumbs/Breadcrumbs.js";import{Tabs as S}from"./components/navigation/tabs/Tabs.js";import{MageUiProvider as C}from"./providers/MageUiProvider.js";export{t as Avatar,n as Badge,x as Breadcrumbs,e as Button,l as ButtonIcon,r as Carousel,u as Checkbox,f as Combobox,d as DatePicker,p as DropdownButton,b as Form,i as Icon,a as IconRaw,o as IconTheme,h as InputFile,g as InputPassword,_ as InputText,C as MageUiProvider,v as Radio,m as Select,s as Table,S as Tabs,y as Textarea,c as VisuallyHidden};
+import{Button as e}from"./components/buttons/button/Button.js";import{Avatar as t}from"./components/data-display/avatar/Avatar.js";import{Badge as n}from"./components/data-display/badge/Badge.js";import{Carousel as r}from"./components/data-display/carousel/Carousel.js";import{Icon as i}from"./components/data-display/icons/icon/Icon.js";import{IconRaw as a}from"./components/data-display/icons/icon-raw/IconRaw.js";import{IconTheme as o}from"./components/data-display/icons/icon-theme/IconTheme.js";import{Table as s}from"./components/data-display/tables/table/Table.js";import{VisuallyHidden as c}from"./components/misc/visually-hidden/VisuallyHidden.js";import{ButtonIcon as l}from"./components/buttons/button-icon/ButtonIcon.js";import{Checkbox as u}from"./components/controls/checkbox/Checkbox.js";import{DatePicker as d}from"./components/controls/date-picker/DatePicker.js";import{Combobox as f}from"./components/controls/dropdown/Combobox.js";import{DropdownButton as p}from"./components/controls/dropdown/DropdownButton.js";import{Select as m}from"./components/controls/dropdown/Select.js";import{InputFile as h}from"./components/controls/input-file/InputFile.js";import{InputPassword as g}from"./components/controls/input-password/InputPassword.js";import{InputText as _}from"./components/controls/input-text/InputText.js";import{MultiSwitch as v}from"./components/controls/multi-switch/MultiSwitch.js";import{Radio as y}from"./components/controls/radio/Radio.js";import{RadioIcon as b}from"./components/controls/radio/RadioIcon.js";import{Textarea as x}from"./components/controls/textarea/Textarea.js";import{Form as S}from"./components/forms/form/Form.js";import{Breadcrumbs as C}from"./components/navigation/breadcrumbs/Breadcrumbs.js";import{Tabs as w}from"./components/navigation/tabs/Tabs.js";import{MageUiProvider as T}from"./providers/MageUiProvider.js";export{t as Avatar,n as Badge,C as Breadcrumbs,e as Button,l as ButtonIcon,r as Carousel,u as Checkbox,f as Combobox,d as DatePicker,p as DropdownButton,S as Form,i as Icon,a as IconRaw,o as IconTheme,h as InputFile,g as InputPassword,_ as InputText,T as MageUiProvider,v as MultiSwitch,y as Radio,b as RadioIcon,m as Select,s as Table,w as Tabs,x as Textarea,c as VisuallyHidden};

package/dist/panda.json

@@ -99,10 +99,6 @@
       "radioDescription": [],
       "radioError": [],
       "radioGroupRoot": [],
-      "icon": [
-        "size]___[value:m]___[recipe:icon",
-        "size]___[value:s]___[recipe:icon"
-      ],
       "inputRoot": [],
       "inputWrapper": [],
       "input": [
@@ -140,6 +136,10 @@
         "colors]___[value:neutral]___[recipe:comboboxOption",
         "type]___[value:create]___[recipe:comboboxOption"
       ],
+      "icon": [
+        "size]___[value:m]___[recipe:icon",
+        "size]___[value:s]___[recipe:icon"
+      ],
       "comboboxEmpty": [],
       "selectSection": [],
       "dropdown": [
@@ -161,11 +161,25 @@
         "size]___[value:s]___[recipe:inputButton",
         "color]___[value:neutral]___[recipe:inputButton"
       ],
+      "multiSwitchSettings": [],
+      "multiSwitchRoot": [],
+      "multiSwitchLabel": [],
+      "multiSwitchGroupRoot": [],
       "radio": [],
       "radioIcon": [],
       "radioInner": [],
       "radioBody": [],
       "radioLabelWrapper": [],
+      "radioOnlyIconRoot": [],
+      "radioOnlyIconSettings": [],
+      "radioOnlyIcon": [],
+      "radioOnlyIconIcon": [],
+      "radioOnlyIconInner": [],
+      "radioOnlyIconBody": [],
+      "radioOnlyIconLabelWrapper": [],
+      "radioOnlyIconLabel": [
+        "size]___[value:l]___[recipe:radioOnlyIconLabel"
+      ],
       "textareaRoot": [],
       "textareaLabel": [
         "size]___[value:l]___[recipe:textareaLabel"
@@ -210,6 +224,7 @@
       "tableScrollScrollbar": [],
       "tableScrollThumb": [],
       "comboboxSection": [],
+      "radioOnlyIconError": [],
       "inputToggle": [
         "variant]___[value:filled]___[recipe:inputToggle",
         "color]___[value:neutral]___[recipe:inputToggle",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "private": false,
   "description": "",
   "keywords": [],
@@ -42,8 +42,8 @@
     "react-dom": "^19.1.0",
     "react-hook-form": "^7.56.4",
     "zod": "^3.25.42",
-    "@mage-ui/preset": "0.0.24",
-    "@mage-ui/styled-system": "0.0.24"
+    "@mage-ui/preset": "0.0.26",
+    "@mage-ui/styled-system": "0.0.26"
   },
   "engines": {
     "node": ">=22.14.0"