@mage-ui/components 0.0.82 → 0.0.84

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

@@ -13,12 +13,14 @@ type ButtonProps = ComponentProps<'button'> & {
   startSlot?: ReactNode;
   endSlot?: ReactNode;
   children?: ReactNode;
+  component?: 'button' | 'span';
 };
 declare const Button: ({
   classNames,
   startSlot,
   endSlot,
   children,
+  component,
   ...props
 }: ButtonProps) => react_jsx_runtime6.JSX.Element;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","names":[],"sources":["../../../../src/components/buttons/button/Button.tsx"],"sourcesContent":[],"mappings":";;;;KAWY,WAAA,GAAc;;;IAAd,KAAA,CAAA,EAAA,MAAW;IAAA,KAAA,CAAA,EAAA,MAAA;IAAG,OAAA,CAAA,EAAA,MAAA;IAQZ,MAAA,CAAA,EAAA,MAAA;;WAED,CAAA,EAFC,SAED;EAAS,OAAA,CAAA,EADV,SACU;EAGT,QAAA,CAuBZ,EA1BY,SA0BZ;CAAA;AAvBsB,cAAV,MAAU,EAAA,CAAA;EAAA,UAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,GAAA;AAAA,CAAA,EAMpB,WANoB,EAAA,GAMT,kBAAA,CAAA,GAAA,CAAA,OANS"}
+{"version":3,"file":"Button.d.ts","names":[],"sources":["../../../../src/components/buttons/button/Button.tsx"],"sourcesContent":[],"mappings":";;;;KAWY,WAAA,GAAc;;;IAAd,KAAA,CAAA,EAAA,MAAW;IAAA,KAAA,CAAA,EAAA,MAAA;IAAG,OAAA,CAAA,EAAA,MAAA;IAQZ,MAAA,CAAA,EAAA,MAAA;;WAED,CAAA,EAFC,SAED;EAAS,OAAA,CAAA,EADV,SACU;EAIT,QAAA,CAyBZ,EA7BY,SA6BZ;EAAA,SAAA,CAAA,EAAA,QAAA,GAAA,MAAA;;AAzBsB,cAAV,MAAU,EAAA,CAAA;EAAA,UAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAOpB,WAPoB,EAAA,GAOT,kBAAA,CAAA,GAAA,CAAA,OAPS"}

package/dist/components/buttons/button/Button.js

@@ -1,2 +1,2 @@
-import{button as e,buttonInner as t,buttonLabel as n,buttonLoader as r,buttonSection as i}from"@mage-ui/styled-system/recipes";import{Button as a}from"@mantine/core";import{jsx as o}from"react/jsx-runtime";const s=({classNames:s,startSlot:c,endSlot:l,children:u,...d})=>o(a,{classNames:{root:s?.root??e(),inner:s?.inner??t(),label:s?.label??n(),section:s?.section??i(),loader:s?.loader??r()},leftSection:c,rightSection:l,...d,children:u});export{s as Button};
+import{button as e,buttonInner as t,buttonLabel as n,buttonLoader as r,buttonSection as i}from"@mage-ui/styled-system/recipes";import{Button as a}from"@mantine/core";import{jsx as o}from"react/jsx-runtime";const s=({classNames:s,startSlot:c,endSlot:l,children:u,component:d,...f})=>o(a,{classNames:{root:s?.root??e(),inner:s?.inner??t(),label:s?.label??n(),section:s?.section??i(),loader:s?.loader??r()},leftSection:c,rightSection:l,component:d,...f,children:u});export{s as Button};
 //# sourceMappingURL=Button.js.map

package/dist/components/buttons/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["Button","MantineButton"],"sources":["../../../../src/components/buttons/button/Button.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport {\n  button,\n  buttonInner,\n  buttonLabel,\n  buttonLoader,\n  buttonSection,\n} from '@mage-ui/styled-system/recipes';\nimport { Button as MantineButton } from '@mantine/core';\n\nexport type ButtonProps = ComponentProps<'button'> & {\n  classNames?: {\n    root?: string;\n    inner?: string;\n    label?: string;\n    section?: string;\n    loader?: string;\n  };\n  startSlot?: ReactNode;\n  endSlot?: ReactNode;\n  children?: ReactNode;\n};\n\nexport const Button = ({\n  classNames,\n  startSlot,\n  endSlot,\n  children,\n  ...props\n}: ButtonProps) => {\n  return (\n    <MantineButton\n      classNames={{\n        root: classNames?.root ?? button(),\n        inner: classNames?.inner ?? buttonInner(),\n        label: classNames?.label ?? buttonLabel(),\n        section: classNames?.section ?? buttonSection(),\n        loader: classNames?.loader ?? buttonLoader(),\n      }}\n      leftSection={startSlot}\n      rightSection={endSlot}\n      {...props}\n    >\n      {children}\n    </MantineButton>\n  );\n};\n"],"mappings":"8MAwBA,MAAaA,GAAU,CACrB,aACA,YACA,UACA,WACA,GAAG,KAGD,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,MAAQ,GAAQ,CAClC,MAAO,GAAY,OAAS,GAAa,CACzC,MAAO,GAAY,OAAS,GAAa,CACzC,QAAS,GAAY,SAAW,GAAe,CAC/C,OAAQ,GAAY,QAAU,GAAc,CAC7C,CACD,YAAa,EACb,aAAc,EACd,GAAI,EAEH,YACa"}
+{"version":3,"file":"Button.js","names":["Button","MantineButton"],"sources":["../../../../src/components/buttons/button/Button.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport {\n  button,\n  buttonInner,\n  buttonLabel,\n  buttonLoader,\n  buttonSection,\n} from '@mage-ui/styled-system/recipes';\nimport { Button as MantineButton } from '@mantine/core';\n\nexport type ButtonProps = ComponentProps<'button'> & {\n  classNames?: {\n    root?: string;\n    inner?: string;\n    label?: string;\n    section?: string;\n    loader?: string;\n  };\n  startSlot?: ReactNode;\n  endSlot?: ReactNode;\n  children?: ReactNode;\n  component?: 'button' | 'span';\n};\n\nexport const Button = ({\n  classNames,\n  startSlot,\n  endSlot,\n  children,\n  component,\n  ...props\n}: ButtonProps) => {\n  return (\n    <MantineButton\n      classNames={{\n        root: classNames?.root ?? button(),\n        inner: classNames?.inner ?? buttonInner(),\n        label: classNames?.label ?? buttonLabel(),\n        section: classNames?.section ?? buttonSection(),\n        loader: classNames?.loader ?? buttonLoader(),\n      }}\n      leftSection={startSlot}\n      rightSection={endSlot}\n      component={component}\n      {...props}\n    >\n      {children}\n    </MantineButton>\n  );\n};\n"],"mappings":"8MAyBA,MAAaA,GAAU,CACrB,aACA,YACA,UACA,WACA,YACA,GAAG,KAGD,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,GAAY,MAAQ,GAAQ,CAClC,MAAO,GAAY,OAAS,GAAa,CACzC,MAAO,GAAY,OAAS,GAAa,CACzC,QAAS,GAAY,SAAW,GAAe,CAC/C,OAAQ,GAAY,QAAU,GAAc,CAC7C,CACD,YAAa,EACb,aAAc,EACH,YACX,GAAI,EAEH,YACa"}

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":";;;;;;KAgBY,aAAA,GAAgB,KAC1B,qEAGA;;;IAJU,KAAA,EAAA,MAAa;EAAA,CAAA,GAAA,SAAA,EAAA,GAAA,IAAA;SACvB,EAAA;IAD0B,EAAA,EAAA,MAAA,GAAA,MAAA;IAI1B,KAAA,EAAA,MAAA;KAaY;EAAe,SAAA,CAAA,EAAA,OAAA;EAGhB,UAAA,CAoFZ,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;IApFwB,KAAA,CAAA,EAAA,MAAA;IAAA,MAAA,CAAA,EAAA,MAAA;;QAAA,CAAA,EAAA,MAAA;OAAA,CAAA,EAAA,MAAA;SAAA,CAAA,EAHX,KAAA,CAAM,SAGK;;AAAA,cAAZ,QAAY,EAAA,CAAA;EAAA,aAAA;EAAA,SAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,OAAA;EAAA,UAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EAWtB,aAXsB,EAAA,GAWT,kBAAA,CAAA,GAAA,CAAA,OAXS"}
+{"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;SACvB,EAAA;IAD0B,EAAA,EAAA,MAAA,GAAA,MAAA;IAI1B,KAAA,EAAA,MAAA;KAaY;EAAe,SAAA,CAAA,EAAA,OAAA;EAGhB,UAAA,CAqFZ,EAAA;IAAA,MAAA,CAAA,EAAA,MAAA;IArFwB,KAAA,CAAA,EAAA,MAAA;IAAA,MAAA,CAAA,EAAA,MAAA;;QAAA,CAAA,EAAA,MAAA;OAAA,CAAA,EAAA,MAAA;SAAA,CAAA,EAHX,KAAA,CAAM,SAGK;;AAAA,cAAZ,QAAY,EAAA,CAAA;EAAA,aAAA;EAAA,SAAA;EAAA,iBAAA;EAAA,cAAA;EAAA,OAAA;EAAA,OAAA;EAAA,UAAA;EAAA,MAAA;EAAA,KAAA;EAAA,GAAA;AAAA,CAAA,EAWtB,aAXsB,EAAA,GAWT,kBAAA,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,endSlot:g,options:_,classNames:v,create:y,empty:b,...x})=>{let[S,C]=u(h?.value??``),w=(_.every(e=>e.value!==S)?_.filter(e=>e.value.toLowerCase().includes(S.toLowerCase().trim())):_).map(e=>c(t.Option,{value:e.value,active:h?.id===e.id,classNames:{option:v?.option??i()},children:e.value},e.id)),T=()=>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`}),E=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=>E(e),endSlot:g,children:w.length>0?w:c(T,{})})};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,endSlot:g,options:_,classNames:v,create:y,empty:b,...x})=>{let[S,C]=u(h?.value??``),w=(_.every(e=>e.value!==S)?_.filter(e=>e.value.toLowerCase().includes(S.toLowerCase().trim())):_).map(e=>c(t.Option,{value:e.value,active:h?.id===e.id,classNames:{option:v?.option??i()},children:e.value},e.id)),T=()=>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`}),E=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=>E(e),endSlot:g,width:`target`,children:w.length>0?w:c(T,{})})};export{f as Combobox};
 //# sourceMappingURL=Combobox.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","names":[],"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    endSlot?: React.ReactNode;\n  };\n\nexport const Combobox = ({\n  defaultOpened = false,\n  creatable,\n  setSelectedOption,\n  selectedOption,\n  endSlot,\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      endSlot={endSlot}\n    >\n      {dropdownOptions.length > 0 ? dropdownOptions : <MissingOption />}\n    </DropdownBase>\n  );\n};\n"],"mappings":"0aAoCA,MAAa,GAAY,CACvB,gBAAgB,GAChB,YACA,oBACA,iBACA,UACA,UACA,aACA,SACA,QACA,GAAG,KACgB,CACnB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAgB,OAAS,GAAG,CASzD,GAPsB,EAAQ,MAAO,GAAS,EAAK,QAAU,EAAM,CAErE,EAAQ,OAAQ,GACd,EAAK,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,MAAM,CAAC,CAC9D,CACD,GAEoC,IAAK,GAC3C,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,CAAE,UAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,MACA,GAAa,EAEb,EAAC,EAAa,OAAA,CACZ,MAAO,EAEP,WAAY,CACV,OAAQ,GAAY,QAAU,EAAe,CAAE,KAAM,SAAU,CAAC,CACjE,WAED,EAAC,EAAA,CAAK,KAAK,OAAO,WAAY,EAAK,CAAE,KAAM,IAAK,CAAC,EAAI,CACpD,GAAG,GAAU,SAAS,IAAI,EAAM,GAAA,EAN5B,EAOe,CAIxB,EAAC,EAAa,MAAA,CACZ,WAAY,CAAE,MAAO,GAAY,OAAS,GAAe,CAAE,UAE1D,GAAS,iBACS,CAInB,EAAY,GAA8B,CAC9C,IAAI,EAAW,EAAQ,KAAM,GAAS,EAAK,QAAU,EAAM,CACvD,CAAC,GAAY,GAAa,IAC5B,EAAW,CAAE,GAAI,MAAO,QAAO,EAEjC,EAAkB,EAAS,EAG7B,OACE,EAAC,EAAA,CACC,SAAU,GACV,OACE,EAAC,EAAA,CACC,MAAO,EACP,WAAY,CACV,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,CACpE,CACD,GAAI,GACJ,CAEY,iBACN,WACV,kBAAoB,GAAW,EAAS,EAAO,CACtC,mBAER,EAAgB,OAAS,EAAI,EAAkB,EAAC,EAAA,EAAA,CAAgB,EACpD"}
+{"version":3,"file":"Combobox.js","names":[],"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    endSlot?: React.ReactNode;\n  };\n\nexport const Combobox = ({\n  defaultOpened = false,\n  creatable,\n  setSelectedOption,\n  selectedOption,\n  endSlot,\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      endSlot={endSlot}\n      width='target'\n    >\n      {dropdownOptions.length > 0 ? dropdownOptions : <MissingOption />}\n    </DropdownBase>\n  );\n};\n"],"mappings":"0aAoCA,MAAa,GAAY,CACvB,gBAAgB,GAChB,YACA,oBACA,iBACA,UACA,UACA,aACA,SACA,QACA,GAAG,KACgB,CACnB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAgB,OAAS,GAAG,CASzD,GAPsB,EAAQ,MAAO,GAAS,EAAK,QAAU,EAAM,CAErE,EAAQ,OAAQ,GACd,EAAK,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,MAAM,CAAC,CAC9D,CACD,GAEoC,IAAK,GAC3C,EAAC,EAAa,OAAA,CACZ,MAAO,EAAO,MAEd,OAAQ,GAAgB,KAAO,EAAO,GACtC,WAAY,CAAE,OAAQ,GAAY,QAAU,GAAgB,CAAE,UAE7D,EAAO,OAJH,EAAO,GAKQ,CACtB,CAEI,MACA,GAAa,EAEb,EAAC,EAAa,OAAA,CACZ,MAAO,EAEP,WAAY,CACV,OAAQ,GAAY,QAAU,EAAe,CAAE,KAAM,SAAU,CAAC,CACjE,WAED,EAAC,EAAA,CAAK,KAAK,OAAO,WAAY,EAAK,CAAE,KAAM,IAAK,CAAC,EAAI,CACpD,GAAG,GAAU,SAAS,IAAI,EAAM,GAAA,EAN5B,EAOe,CAIxB,EAAC,EAAa,MAAA,CACZ,WAAY,CAAE,MAAO,GAAY,OAAS,GAAe,CAAE,UAE1D,GAAS,iBACS,CAInB,EAAY,GAA8B,CAC9C,IAAI,EAAW,EAAQ,KAAM,GAAS,EAAK,QAAU,EAAM,CACvD,CAAC,GAAY,GAAa,IAC5B,EAAW,CAAE,GAAI,MAAO,QAAO,EAEjC,EAAkB,EAAS,EAG7B,OACE,EAAC,EAAA,CACC,SAAU,GACV,OACE,EAAC,EAAA,CACC,MAAO,EACP,WAAY,CACV,QAAS,GAAY,SAAW,EAAG,GAAc,CAAE,GAAe,CAAC,CACpE,CACD,GAAI,GACJ,CAEY,iBACN,WACV,kBAAoB,GAAW,EAAS,EAAO,CACtC,UACT,MAAM,kBAEL,EAAgB,OAAS,EAAI,EAAkB,EAAC,EAAA,EAAA,CAAgB,EACpD"}

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

@@ -15,7 +15,7 @@ type DropdownBaseProps = {
   target: React.ReactElement<{
     startSlot?: React.ReactNode;
     endSlot?: React.ReactNode;
-    onChange?: (event: EventTarget & HTMLInputElement) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
     onBlur?: () => void;
     onClick?: () => void;
   }>;

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":";;;;;KAWY,iBAAA;;;;;IAAA,EAAA,EAAA,MAAA,GAAA,MAAiB;IAAA,KAAA,EAAA,MAAA;MAOb,SAAM;mBACF,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,SAAA,EAAA,GAAA,IAAA;QACG,EAHb,KAAA,CAAM,YAGO,CAAA;IAAc,SAAA,CAAA,EAFrB,KAAA,CAAM,SAEe;IAH3B,OAAM,CAAA,EAEF,KAAA,CAAM,SAFJ;IAYJ,QAAM,CAAA,EAAA,CAAA,KAAA,EATK,WASL,GATmB,gBASnB,EAAA,GAAA,IAAA;IACJ,MAAM,CAAA,EAAA,GAAA,GAAA,IAAA;IAGR,OAAM,CAAA,EAAA,GAAA,GAAA,IAAA;EAAS,CAAA,CAAA;;;;;;YAJf,KAAA,CAAM;cACJ,KAAA,CAAM;;;YAGR,KAAA,CAAM"}
+{"version":3,"file":"DropdownBase.d.ts","names":[],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":[],"mappings":";;;;;KAWY,iBAAA;;;;;IAAA,EAAA,EAAA,MAAA,GAAA,MAAiB;IAAA,KAAA,EAAA,MAAA;MAOb,SAAM;mBACF,EAAA,CAAA,KAAA,EAAA,MAAA,GAAA,SAAA,EAAA,GAAA,IAAA;QACqB,EAH/B,KAAA,CAAM,YAGyB,CAAA;IAAlB,SAAM,CAAA,EAFb,KAAA,CAAM,SAEO;IAHnB,OAAM,CAAA,EAEF,KAAA,CAAM,SAFJ;IAYJ,QAAM,CAAA,EAAA,CAAA,KAAA,EATK,KAAA,CAAM,WASX,CATuB,gBASvB,CAAA,EAAA,GAAA,IAAA;IACJ,MAAM,CAAA,EAAA,GAAA,GAAA,IAAA;IAGR,OAAM,CAAA,EAAA,GAAA,GAAA,IAAA;EAAS,CAAA,CAAA;;;;;;YAJf,KAAA,CAAM;cACJ,KAAA,CAAM;;;YAGR,KAAA,CAAM"}

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

@@ -1,2 +1,2 @@
-import{ButtonIcon as e}from"../../buttons/button-icon/ButtonIcon.js";import{comboboxClear as t,comboboxDivider as n,comboboxOptions as r,dropdown as i}from"@mage-ui/styled-system/recipes";import{Combobox as a,useCombobox as o}from"@mantine/core";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{cloneElement as l}from"react";const u=({defaultOpened:n,readOnly:u,setQuery:d,setSelectedOption:f,selectedOption:p,target:m,classNames:h,children:g,endSlot:_,startSlot:v,position:y,portal:b,width:x,isClearable:S,clearableIcon:C,...w})=>{let T=o({defaultOpened:n??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{T.resetSelectedOption()}}),E=()=>{d?.(``),f(void 0),T.resetSelectedOption()},D=S&&(p?.value||``),O=s(e,{classNames:{root:t()},icon:C||`x-close`,label:`clear input`,onClick:e=>{e.stopPropagation(),E()}}),k=l(m,{...m?.props??{},onChange:e=>{m?.props?.onChange?.(e),d?.(e.value),T.openDropdown(),T.updateSelectedOptionIndex()},onBlur:()=>{d?.(p?.value??``)},onClick:()=>{u?T.toggleDropdown():T.openDropdown()},startSlot:v,endSlot:D?O:_});return c(a,{readOnly:u??!1,onOptionSubmit:e=>{f(e),d?.(e),T.closeDropdown()},store:T,withinPortal:b||!0,position:y||`bottom-start`,width:x||`auto`,...w,children:[s(a.Target,{children:k}),s(a.Dropdown,{classNames:{dropdown:h?.dropdown??i()},children:s(a.Options,{classNames:{options:h?.options??r()},children:g})})]})},d=({classNames:e})=>s(`hr`,{className:e?.divider??n(),"aria-orientation":`horizontal`});u.Option=a.Option,u.Option.displayName=`DropdownBase.Option`,u.Divider=d,u.Divider.displayName=`DropdownBase.Divider`,u.Empty=a.Empty,u.Empty.displayName=`DropdownBase.Empty`;export{u as DropdownBase};
+import{ButtonIcon as e}from"../../buttons/button-icon/ButtonIcon.js";import{comboboxClear as t,comboboxDivider as n,comboboxOptions as r,dropdown as i}from"@mage-ui/styled-system/recipes";import{Combobox as a,useCombobox as o}from"@mantine/core";import{jsx as s,jsxs as c}from"react/jsx-runtime";import{cloneElement as l}from"react";const u=({defaultOpened:n,readOnly:u,setQuery:d,setSelectedOption:f,selectedOption:p,target:m,classNames:h,children:g,endSlot:_,startSlot:v,position:y,portal:b,width:x,isClearable:S,clearableIcon:C,...w})=>{let T=o({defaultOpened:n??!1,scrollBehavior:`smooth`,onDropdownClose:()=>{T.resetSelectedOption()}}),E=()=>{d?.(``),f(void 0),T.resetSelectedOption()},D=S&&(p?.value||``),O=s(e,{classNames:{root:t()},icon:C||`x-close`,label:`clear input`,onClick:e=>{e.stopPropagation(),E()}}),k=l(m,{...m?.props??{},onChange:e=>{m?.props?.onChange?.(e),d?.(e.currentTarget.value),T.openDropdown(),T.updateSelectedOptionIndex()},onBlur:()=>{d?.(p?.value??``)},onClick:()=>{u?T.toggleDropdown():T.openDropdown()},startSlot:v,endSlot:D?O:_});return c(a,{readOnly:u??!1,onOptionSubmit:e=>{f(e),d?.(e),T.closeDropdown()},store:T,withinPortal:b||!0,position:y||`bottom-start`,width:x||`auto`,...w,children:[s(a.Target,{children:k}),s(a.Dropdown,{classNames:{dropdown:h?.dropdown??i()},children:s(a.Options,{classNames:{options:h?.options??r()},children:g})})]})},d=({classNames:e})=>s(`hr`,{className:e?.divider??n(),"aria-orientation":`horizontal`});u.Option=a.Option,u.Option.displayName=`DropdownBase.Option`,u.Divider=d,u.Divider.displayName=`DropdownBase.Divider`,u.Empty=a.Empty,u.Empty.displayName=`DropdownBase.Empty`;export{u as DropdownBase};
 //# sourceMappingURL=DropdownBase.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DropdownBase.js","names":["MantineCombobox","Divider: React.FC<{ classNames?: { divider?: string } }>"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { cloneElement } from 'react';\n\nimport {\n  comboboxClear,\n  comboboxDivider,\n  comboboxOptions,\n  dropdown,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox, useCombobox } from '@mantine/core';\nimport { ButtonIcon } from '@/components/buttons';\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    startSlot?: React.ReactNode;\n    endSlot?: React.ReactNode;\n    onChange?: (event: EventTarget & HTMLInputElement) => void;\n    onBlur?: () => void;\n    onClick?: () => void;\n  }>;\n  classNames?: {\n    dropdown?: string;\n    options?: string;\n    divider?: string;\n  };\n  endSlot?: React.ReactNode;\n  startSlot?: React.ReactNode;\n  isClearable?: boolean;\n  clearableIcon?: string;\n  children: React.ReactNode;\n  portal?: boolean;\n  position?:\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end';\n  width?: number | string;\n};\n\nexport const DropdownBase = ({\n  defaultOpened,\n  readOnly,\n  setQuery,\n  setSelectedOption,\n  selectedOption,\n  target,\n  classNames,\n  children,\n  endSlot,\n  startSlot,\n  position,\n  portal,\n  width,\n  isClearable,\n  clearableIcon,\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 handleClear = () => {\n    setQuery?.('');\n    setSelectedOption(undefined);\n    combobox.resetSelectedOption();\n  };\n  const showClearButton = isClearable && (selectedOption?.value || '');\n\n  const clearButton = (\n    <ButtonIcon\n      classNames={{\n        root: comboboxClear(),\n      }}\n      icon={clearableIcon || 'x-close'}\n      label='clear input'\n      onClick={(e) => {\n        e.stopPropagation();\n        handleClear();\n      }}\n    />\n  );\n\n  const targetComponent = cloneElement(target, {\n    ...(target?.props ?? {}),\n    onChange: (event) => {\n      target?.props?.onChange?.(event);\n      setQuery?.(event.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    // opened: combobox.isDropdownOpened,\n    startSlot: startSlot,\n    endSlot: showClearButton ? clearButton : endSlot,\n  });\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={portal || true}\n      position={position || 'bottom-start'}\n      width={width || 'auto'}\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\nconst Divider: React.FC<{ classNames?: { divider?: string } }> = ({\n  classNames,\n}) => {\n  return (\n    <hr\n      className={classNames?.divider ?? comboboxDivider()}\n      aria-orientation='horizontal'\n    />\n  );\n};\n\nDropdownBase.Option = MantineCombobox.Option;\nDropdownBase.Option.displayName = 'DropdownBase.Option';\nDropdownBase.Divider = Divider;\nDropdownBase.Divider.displayName = 'DropdownBase.Divider';\nDropdownBase.Empty = MantineCombobox.Empty;\nDropdownBase.Empty.displayName = 'DropdownBase.Empty';\n"],"mappings":"6UAmDA,MAAa,GAAgB,CAC3B,gBACA,WACA,WACA,oBACA,iBACA,SACA,aACA,WACA,UACA,YACA,WACA,SACA,QACA,cACA,gBACA,GAAG,KACoB,CACvB,IAAM,EAAW,EAAY,CAC3B,cAAe,GAAiB,GAChC,eAAgB,SAChB,oBAAuB,CACrB,EAAS,qBAAqB,EAEjC,CAAC,CAEI,MAAoB,CACxB,IAAW,GAAG,CACd,EAAkB,IAAA,GAAU,CAC5B,EAAS,qBAAqB,EAE1B,EAAkB,IAAgB,GAAgB,OAAS,IAE3D,EACJ,EAAC,EAAA,CACC,WAAY,CACV,KAAM,GAAe,CACtB,CACD,KAAM,GAAiB,UACvB,MAAM,cACN,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,GAAa,GAEf,CAGE,EAAkB,EAAa,EAAQ,CAC3C,GAAI,GAAQ,OAAS,EAAE,CACvB,SAAW,GAAU,CACnB,GAAQ,OAAO,WAAW,EAAM,CAChC,IAAW,EAAM,MAAM,CACvB,EAAS,cAAc,CACvB,EAAS,2BAA2B,EAEtC,WAAc,CACZ,IAAW,GAAgB,OAAS,GAAG,EAEzC,YAAe,CACT,EACF,EAAS,gBAAgB,CAEzB,EAAS,cAAc,EAIhB,YACX,QAAS,EAAkB,EAAc,EAC1C,CAAC,CAEF,OACE,EAACA,EAAAA,CACC,SAAU,GAAY,GACtB,eAAiB,GAAW,CAC1B,EAAkB,EAAO,CACzB,IAAW,EAAO,CAClB,EAAS,eAAe,EAE1B,MAAO,EACP,aAAc,GAAU,GACxB,SAAU,GAAY,eACtB,MAAO,GAAS,OAChB,GAAI,YAEJ,EAACA,EAAgB,OAAA,CAAA,SAAQ,EAAA,CAAyC,CAClE,EAACA,EAAgB,SAAA,CACf,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,CAC7C,UAED,EAACA,EAAgB,QAAA,CACf,WAAY,CACV,QAAS,GAAY,SAAW,GAAiB,CAClD,CAEA,YACuB,EACD,CAAA,EACX,EAIhBC,GAA4D,CAChE,gBAGE,EAAC,KAAA,CACC,UAAW,GAAY,SAAW,GAAiB,CACnD,mBAAiB,cACjB,CAIN,EAAa,OAASD,EAAgB,OACtC,EAAa,OAAO,YAAc,sBAClC,EAAa,QAAU,EACvB,EAAa,QAAQ,YAAc,uBACnC,EAAa,MAAQA,EAAgB,MACrC,EAAa,MAAM,YAAc"}
+{"version":3,"file":"DropdownBase.js","names":["MantineCombobox","Divider: React.FC<{ classNames?: { divider?: string } }>"],"sources":["../../../../src/components/controls/dropdown/DropdownBase.tsx"],"sourcesContent":["import { cloneElement } from 'react';\n\nimport {\n  comboboxClear,\n  comboboxDivider,\n  comboboxOptions,\n  dropdown,\n} from '@mage-ui/styled-system/recipes';\nimport { Combobox as MantineCombobox, useCombobox } from '@mantine/core';\nimport { ButtonIcon } from '@/components/buttons';\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    startSlot?: React.ReactNode;\n    endSlot?: React.ReactNode;\n    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n    onBlur?: () => void;\n    onClick?: () => void;\n  }>;\n  classNames?: {\n    dropdown?: string;\n    options?: string;\n    divider?: string;\n  };\n  endSlot?: React.ReactNode;\n  startSlot?: React.ReactNode;\n  isClearable?: boolean;\n  clearableIcon?: string;\n  children: React.ReactNode;\n  portal?: boolean;\n  position?:\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end';\n  width?: number | string;\n};\n\nexport const DropdownBase = ({\n  defaultOpened,\n  readOnly,\n  setQuery,\n  setSelectedOption,\n  selectedOption,\n  target,\n  classNames,\n  children,\n  endSlot,\n  startSlot,\n  position,\n  portal,\n  width,\n  isClearable,\n  clearableIcon,\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 handleClear = () => {\n    setQuery?.('');\n    setSelectedOption(undefined);\n    combobox.resetSelectedOption();\n  };\n  const showClearButton = isClearable && (selectedOption?.value || '');\n\n  const clearButton = (\n    <ButtonIcon\n      classNames={{\n        root: comboboxClear(),\n      }}\n      icon={clearableIcon || 'x-close'}\n      label='clear input'\n      onClick={(e) => {\n        e.stopPropagation();\n        handleClear();\n      }}\n    />\n  );\n\n  const targetComponent = cloneElement(target, {\n    ...(target?.props ?? {}),\n    onChange: (event: React.ChangeEvent<HTMLInputElement>) => {\n      target?.props?.onChange?.(event);\n      setQuery?.(event.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    // opened: combobox.isDropdownOpened,\n    startSlot: startSlot,\n    endSlot: showClearButton ? clearButton : endSlot,\n  });\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={portal || true}\n      position={position || 'bottom-start'}\n      width={width || 'auto'}\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\nconst Divider: React.FC<{ classNames?: { divider?: string } }> = ({\n  classNames,\n}) => {\n  return (\n    <hr\n      className={classNames?.divider ?? comboboxDivider()}\n      aria-orientation='horizontal'\n    />\n  );\n};\n\nDropdownBase.Option = MantineCombobox.Option;\nDropdownBase.Option.displayName = 'DropdownBase.Option';\nDropdownBase.Divider = Divider;\nDropdownBase.Divider.displayName = 'DropdownBase.Divider';\nDropdownBase.Empty = MantineCombobox.Empty;\nDropdownBase.Empty.displayName = 'DropdownBase.Empty';\n"],"mappings":"6UAmDA,MAAa,GAAgB,CAC3B,gBACA,WACA,WACA,oBACA,iBACA,SACA,aACA,WACA,UACA,YACA,WACA,SACA,QACA,cACA,gBACA,GAAG,KACoB,CACvB,IAAM,EAAW,EAAY,CAC3B,cAAe,GAAiB,GAChC,eAAgB,SAChB,oBAAuB,CACrB,EAAS,qBAAqB,EAEjC,CAAC,CAEI,MAAoB,CACxB,IAAW,GAAG,CACd,EAAkB,IAAA,GAAU,CAC5B,EAAS,qBAAqB,EAE1B,EAAkB,IAAgB,GAAgB,OAAS,IAE3D,EACJ,EAAC,EAAA,CACC,WAAY,CACV,KAAM,GAAe,CACtB,CACD,KAAM,GAAiB,UACvB,MAAM,cACN,QAAU,GAAM,CACd,EAAE,iBAAiB,CACnB,GAAa,GAEf,CAGE,EAAkB,EAAa,EAAQ,CAC3C,GAAI,GAAQ,OAAS,EAAE,CACvB,SAAW,GAA+C,CACxD,GAAQ,OAAO,WAAW,EAAM,CAChC,IAAW,EAAM,cAAc,MAAM,CACrC,EAAS,cAAc,CACvB,EAAS,2BAA2B,EAEtC,WAAc,CACZ,IAAW,GAAgB,OAAS,GAAG,EAEzC,YAAe,CACT,EACF,EAAS,gBAAgB,CAEzB,EAAS,cAAc,EAIhB,YACX,QAAS,EAAkB,EAAc,EAC1C,CAAC,CAEF,OACE,EAACA,EAAAA,CACC,SAAU,GAAY,GACtB,eAAiB,GAAW,CAC1B,EAAkB,EAAO,CACzB,IAAW,EAAO,CAClB,EAAS,eAAe,EAE1B,MAAO,EACP,aAAc,GAAU,GACxB,SAAU,GAAY,eACtB,MAAO,GAAS,OAChB,GAAI,YAEJ,EAACA,EAAgB,OAAA,CAAA,SAAQ,EAAA,CAAyC,CAClE,EAACA,EAAgB,SAAA,CACf,WAAY,CACV,SAAU,GAAY,UAAY,GAAU,CAC7C,UAED,EAACA,EAAgB,QAAA,CACf,WAAY,CACV,QAAS,GAAY,SAAW,GAAiB,CAClD,CAEA,YACuB,EACD,CAAA,EACX,EAIhBC,GAA4D,CAChE,gBAGE,EAAC,KAAA,CACC,UAAW,GAAY,SAAW,GAAiB,CACnD,mBAAiB,cACjB,CAIN,EAAa,OAASD,EAAgB,OACtC,EAAa,OAAO,YAAc,sBAClC,EAAa,QAAU,EACvB,EAAa,QAAQ,YAAc,uBACnC,EAAa,MAAQA,EAAgB,MACrC,EAAa,MAAM,YAAc"}

package/dist/panda.json

@@ -43,9 +43,9 @@
       "color]___[value:danger.foreground.1.hovered]___[cond:_expanded",
       "borderColor]___[value:danger.stroke.1.hovered]___[cond:_expanded",
       "srOnly]___[value:true",
+      "width]___[value:target",
       "position]___[value:bottom-start",
       "width]___[value:auto",
-      "width]___[value:target",
       "backgroundColor]___[value:neutral.background.1.enabled",
       "backgroundColor]___[value:primary.background.4.hovered]___[cond:_hover",
       "backgroundColor]___[value:primary.background.5.enabled]___[cond:_active",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "0.0.82",
+  "version": "0.0.84",
   "private": false,
   "description": "",
   "keywords": [],
@@ -26,8 +26,8 @@
     "rimraf": "^6.0.1",
     "tsdown": "^0.15.6",
     "typescript": "^5.9.3",
-    "@mage-ui/preset": "0.0.82",
-    "@mage-ui/styled-system": "0.0.82"
+    "@mage-ui/preset": "0.0.84",
+    "@mage-ui/styled-system": "0.0.84"
   },
   "peerDependencies": {
     "@hookform/resolvers": "^5.2.2",