@mage-ui/components 1.0.16 → 1.0.18

package/dist/components/buttons/button-action/ButtonAction.d.mts

@@ -8,10 +8,11 @@ type ButtonActionProps = Omit<ButtonProps, 'classNames'> & {
     buttonAction?: string;
     loader?: string;
   };
-  loading: boolean;
   loader?: ReactNode;
+  loading: boolean;
   loadingText?: string;
   successText?: string;
+  errorText?: string;
   successDuration?: number;
 };
 declare const ButtonAction: ({
@@ -19,11 +20,13 @@ declare const ButtonAction: ({
   startSlot,
   endSlot,
   children,
-  loading,
   loader,
+  loading,
   loadingText,
   successText,
+  errorText,
   successDuration,
+  disabled,
   ...props
 }: ButtonActionProps) => react_jsx_runtime17.JSX.Element;
 //#endregion

package/dist/components/buttons/button-action/ButtonAction.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonAction.d.mts","names":[],"sources":["../../../../src/components/buttons/button-action/ButtonAction.tsx"],"mappings":";;;;;KAqBY,iBAAA,GAAoB,IAAA,CAAK,WAAA;EACnC,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,WAAA;IAC5B,YAAA;IACA,MAAA;EAAA;EAEF,OAAA;EACA,MAAA,GAAS,SAAA;EACT,WAAA;EACA,WAAA;EACA,eAAA;AAAA;AAAA,cAwEW,YAAA;EAAgB,UAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,WAAA;EAAA,WAAA;EAAA,eAAA;EAAA,GAAA;AAAA,GAW1B,iBAAA,KAAiB,mBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"ButtonAction.d.mts","names":[],"sources":["../../../../src/components/buttons/button-action/ButtonAction.tsx"],"mappings":";;;;;KAiBY,iBAAA,GAAoB,IAAA,CAAK,WAAA;EACnC,UAAA,GAAa,IAAA,CAAK,WAAA,CAAY,WAAA;IAC5B,YAAA;IACA,MAAA;EAAA;EAEF,MAAA,GAAS,SAAA;EACT,OAAA;EACA,WAAA;EACA,WAAA;EACA,SAAA;EACA,eAAA;AAAA;AAAA,cAiCW,YAAA;EAAgB,UAAA;EAAA,SAAA;EAAA,OAAA;EAAA,QAAA;EAAA,MAAA;EAAA,OAAA;EAAA,WAAA;EAAA,WAAA;EAAA,SAAA;EAAA,eAAA;EAAA,QAAA;EAAA,GAAA;AAAA,GAa1B,iBAAA,KAAiB,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/buttons/button-action/ButtonAction.mjs

@@ -1,2 +1,2 @@
-import{VisuallyHidden as e}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{buttonAction as n,buttonActionInner as r,buttonActionLabel as i,buttonActionLoader as a,buttonActionRoot as o,buttonActionSection as s}from"@mage-ui/styled-system/recipes";import{Button as c}from"@mantine/core";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{useEffect as d,useEffectEvent as f,useRef as p,useState as m}from"react";const h=({loading:e,successText:t,successDuration:n=2e3})=>{let[r,i]=m(!1),a=p(e),o=f(()=>{if(!t)return;i(!0);let e=setTimeout(()=>{i(!1)},n);return()=>clearTimeout(e)});return d(()=>{a.current&&!e&&o(),a.current=e},[e,o]),e?`loading`:r?`success`:`idle`},g=(e,{loadingText:t,successText:n,children:r})=>({loading:{content:t??r,message:t},success:{content:n,message:n},idle:{content:r,message:null}})[e],_=({classNames:d,startSlot:f,endSlot:p,children:m,loading:_,loader:v,loadingText:y,successText:b,successDuration:x,...S})=>{let C=h({loading:_,successText:b,successDuration:x}),{content:w,message:T}=g(C,{loadingText:y,successText:b,children:m}),E=[`loading`,`success`].includes(C);return u(c,{classNames:{inner:d?.inner??r(),label:d?.label??i(),root:t(d?.buttonAction??n(),d?.root??o()),loader:d?.loader??a(),section:d?.section??s()},leftSection:f,rightSection:p,loading:_,disabled:E,"aria-busy":E,...S,children:[w,v&&v,l(e,{"aria-live":`polite`,children:T})]})};export{_ as ButtonAction};
+import{VisuallyHidden as e}from"../../misc/visually-hidden/VisuallyHidden.mjs";import{ButtonActionProvider as t}from"./ButtonActionContext.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{buttonAction as r,buttonActionInner as i,buttonActionLabel as a,buttonActionLoader as o,buttonActionRoot as s,buttonActionSection as c}from"@mage-ui/styled-system/recipes";import{Button as l}from"@mantine/core";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{useEffect as f,useRef as p,useState as m}from"react";const h=({loading:e,successText:t,successDuration:n=2e3})=>{let[r,i]=m(!1),a=p(e);return f(()=>{if(a.current&&!e&&t){i(!0);let e=setTimeout(()=>{i(!1)},n);return()=>clearTimeout(e)}a.current=e},[e,t,n]),e?`loading`:r?`success`:`idle`},g=({classNames:f,startSlot:p,endSlot:m,children:g,loader:_,loading:v,loadingText:y,successText:b,errorText:x,successDuration:S,disabled:C,...w})=>{let T=h({loading:v,successText:b,successDuration:S}),E=T===`loading`,D=T===`success`,O=()=>E&&y?y:D&&b?b:g,k=E||D||C;return d(l,{classNames:{inner:f?.inner??i(),label:f?.label??a(),root:n(f?.buttonAction??r(),f?.root??s()),loader:f?.loader??o(),section:f?.section??c()},leftSection:p,rightSection:m,loading:E,disabled:k,"aria-busy":k,...w,children:[_&&u(t,{value:{isLoading:E,isSuccess:D},children:_}),O(),u(e,{"aria-live":`polite`,children:O()})]})};export{g as ButtonAction};
 //# sourceMappingURL=ButtonAction.mjs.map

package/dist/components/buttons/button-action/ButtonAction.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonAction.mjs","names":["MantineButton","VisuallyHidden"],"sources":["../../../../src/components/buttons/button-action/ButtonAction.tsx"],"sourcesContent":["import {\n  type ReactNode,\n  useEffect,\n  useEffectEvent,\n  useRef,\n  useState,\n} from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  buttonAction,\n  buttonActionInner,\n  buttonActionLabel,\n  buttonActionLoader,\n  buttonActionRoot,\n  buttonActionSection,\n} from '@mage-ui/styled-system/recipes';\nimport { Button as MantineButton } from '@mantine/core';\nimport type { ButtonProps } from '@/components/buttons/button/Button';\nimport { VisuallyHidden } from '@/components/misc/visually-hidden/VisuallyHidden';\n\nexport type ButtonActionProps = Omit<ButtonProps, 'classNames'> & {\n  classNames?: Omit<NonNullable<ButtonProps['classNames']>, 'button'> & {\n    buttonAction?: string;\n    loader?: string;\n  };\n  loading: boolean;\n  loader?: ReactNode;\n  loadingText?: string;\n  successText?: string;\n  successDuration?: number;\n};\n\ntype ButtonActionStatus = 'idle' | 'loading' | 'success';\n\nconst useButtonActionState = ({\n  loading,\n  successText,\n  successDuration = 2000,\n}: {\n  loading: boolean;\n  successText?: string;\n  successDuration?: number;\n}) => {\n  const [showSuccess, setShowSuccess] = useState(false);\n  const prevLoadingRef = useRef(loading);\n\n  const triggerSuccess = useEffectEvent(() => {\n    if (!successText) return;\n    setShowSuccess(true);\n    const timer = setTimeout(() => {\n      setShowSuccess(false);\n    }, successDuration);\n    return () => clearTimeout(timer);\n  });\n\n  useEffect(() => {\n    if (prevLoadingRef.current && !loading) {\n      triggerSuccess();\n    }\n    prevLoadingRef.current = loading;\n  }, [loading, triggerSuccess]);\n\n  const status: ButtonActionStatus = loading\n    ? 'loading'\n    : showSuccess\n    ? 'success'\n    : 'idle';\n\n  return status;\n};\n\nconst getButtonContent = (\n  status: ButtonActionStatus,\n  {\n    loadingText,\n    successText,\n    children,\n  }: {\n    loadingText?: string;\n    successText?: string;\n    children?: ReactNode;\n  },\n) => {\n  const state = {\n    loading: {\n      content: loadingText ?? children,\n      message: loadingText,\n    },\n    success: {\n      content: successText,\n      message: successText,\n    },\n    idle: {\n      content: children,\n      message: null,\n    },\n  };\n\n  return state[status];\n};\n\nexport const ButtonAction = ({\n  classNames,\n  startSlot,\n  endSlot,\n  children,\n  loading,\n  loader,\n  loadingText,\n  successText,\n  successDuration,\n  ...props\n}: ButtonActionProps) => {\n  const status = useButtonActionState({\n    loading,\n    successText,\n    successDuration,\n  });\n\n  const { content, message } = getButtonContent(status, {\n    loadingText,\n    successText,\n    children,\n  });\n\n  const disabled = ['loading', 'success'].includes(status);\n\n  return (\n    <MantineButton\n      classNames={{\n        inner: classNames?.inner ?? buttonActionInner(),\n        label: classNames?.label ?? buttonActionLabel(),\n        root: cx(\n          classNames?.buttonAction ?? buttonAction(),\n          classNames?.root ?? buttonActionRoot(),\n        ),\n        loader: classNames?.loader ?? buttonActionLoader(),\n        section: classNames?.section ?? buttonActionSection(),\n      }}\n      leftSection={startSlot}\n      rightSection={endSlot}\n      loading={loading}\n      disabled={disabled}\n      aria-busy={disabled}\n      {...props}\n    >\n      {content}\n      {/* TODO: preguntar si el slot loader se mostrará desde fuera siempre o poner uno interno por defecto (como autocomplete) */}\n      {/* TODO: mostrar o barra de carga o icono animado, los dos a la vez no. ¿Componente a banda? */}\n      {loader && loader}\n\n      <VisuallyHidden aria-live='polite'>{message}</VisuallyHidden>\n    </MantineButton>\n  );\n};\n"],"mappings":"2dAmCA,MAAM,GAAwB,CAC5B,UACA,cACA,kBAAkB,OAKd,CACJ,GAAM,CAAC,EAAa,GAAkB,EAAS,GAAM,CAC/C,EAAiB,EAAO,EAAQ,CAEhC,EAAiB,MAAqB,CAC1C,GAAI,CAAC,EAAa,OAClB,EAAe,GAAK,CACpB,IAAM,EAAQ,eAAiB,CAC7B,EAAe,GAAM,EACpB,EAAgB,CACnB,UAAa,aAAa,EAAM,EAChC,CAeF,OAbA,MAAgB,CACV,EAAe,SAAW,CAAC,GAC7B,GAAgB,CAElB,EAAe,QAAU,GACxB,CAAC,EAAS,EAAe,CAAC,CAEM,EAC/B,UACA,EACA,UACA,QAKA,GACJ,EACA,CACE,cACA,cACA,eAOY,CACZ,QAAS,CACP,QAAS,GAAe,EACxB,QAAS,EACV,CACD,QAAS,CACP,QAAS,EACT,QAAS,EACV,CACD,KAAM,CACJ,QAAS,EACT,QAAS,KACV,CACF,EAEY,GAGF,GAAgB,CAC3B,aACA,YACA,UACA,WACA,UACA,SACA,cACA,cACA,kBACA,GAAG,KACoB,CACvB,IAAM,EAAS,EAAqB,CAClC,UACA,cACA,kBACD,CAAC,CAEI,CAAE,UAAS,WAAY,EAAiB,EAAQ,CACpD,cACA,cACA,WACD,CAAC,CAEI,EAAW,CAAC,UAAW,UAAU,CAAC,SAAS,EAAO,CAExD,OACE,EAACA,EAAAA,CACC,WAAY,CACV,MAAO,GAAY,OAAS,GAAmB,CAC/C,MAAO,GAAY,OAAS,GAAmB,CAC/C,KAAM,EACJ,GAAY,cAAgB,GAAc,CAC1C,GAAY,MAAQ,GAAkB,CACvC,CACD,OAAQ,GAAY,QAAU,GAAoB,CAClD,QAAS,GAAY,SAAW,GAAqB,CACtD,CACD,YAAa,EACb,aAAc,EACL,UACC,WACV,YAAW,EACX,GAAI,YAEH,EAGA,GAAU,EAEX,EAACC,EAAAA,CAAe,YAAU,kBAAU,GAAyB,GAC/C"}
+{"version":3,"file":"ButtonAction.mjs","names":["MantineButton","VisuallyHidden"],"sources":["../../../../src/components/buttons/button-action/ButtonAction.tsx"],"sourcesContent":["import { type ReactNode, useEffect, useRef, useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  buttonAction,\n  buttonActionInner,\n  buttonActionLabel,\n  buttonActionLoader,\n  buttonActionRoot,\n  buttonActionSection,\n} from '@mage-ui/styled-system/recipes';\nimport { Button as MantineButton } from '@mantine/core';\nimport type { ButtonProps } from '@/components/buttons/button/Button';\nimport { VisuallyHidden } from '@/components/misc/visually-hidden/VisuallyHidden';\n\nimport { ButtonActionProvider } from './ButtonActionContext';\n\nexport type ButtonActionProps = Omit<ButtonProps, 'classNames'> & {\n  classNames?: Omit<NonNullable<ButtonProps['classNames']>, 'button'> & {\n    buttonAction?: string;\n    loader?: string;\n  };\n  loader?: ReactNode;\n  loading: boolean;\n  loadingText?: string;\n  successText?: string;\n  errorText?: string;\n  successDuration?: number;\n};\n\ntype ButtonActionStatus = 'idle' | 'loading' | 'success' | 'error';\n\nconst useButtonActionState = ({\n  loading,\n  successText,\n  successDuration = 2000,\n}: {\n  loading: boolean;\n  successText?: string;\n  successDuration?: number;\n}): ButtonActionStatus => {\n  const [showSuccess, setShowSuccess] = useState(false);\n  const prevLoadingRef = useRef(loading);\n\n  useEffect(() => {\n    if (prevLoadingRef.current && !loading) {\n      if (successText) {\n        setShowSuccess(true);\n        const timer = setTimeout(() => {\n          setShowSuccess(false);\n        }, successDuration);\n        return () => clearTimeout(timer);\n      }\n    }\n    prevLoadingRef.current = loading;\n  }, [loading, successText, successDuration]);\n\n  return loading ? 'loading' : showSuccess ? 'success' : 'idle';\n};\n\nexport const ButtonAction = ({\n  classNames,\n  startSlot,\n  endSlot,\n  children,\n  loader,\n  loading,\n  loadingText,\n  successText,\n  errorText,\n  successDuration,\n  disabled,\n  ...props\n}: ButtonActionProps) => {\n  const status = useButtonActionState({\n    loading,\n    successText,\n    successDuration,\n  });\n\n  const isLoading = status === 'loading';\n  const isSuccess = status === 'success';\n\n  const getLabelContent = () => {\n    if (isLoading && loadingText) return loadingText;\n    if (isSuccess && successText) return successText;\n    return children;\n  };\n\n  const isDisabled = isLoading || isSuccess || disabled;\n\n  return (\n    <MantineButton\n      classNames={{\n        inner: classNames?.inner ?? buttonActionInner(),\n        label: classNames?.label ?? buttonActionLabel(),\n        root: cx(\n          classNames?.buttonAction ?? buttonAction(),\n          classNames?.root ?? buttonActionRoot(),\n        ),\n        loader: classNames?.loader ?? buttonActionLoader(),\n        section: classNames?.section ?? buttonActionSection(),\n      }}\n      leftSection={startSlot}\n      rightSection={endSlot}\n      loading={isLoading}\n      disabled={isDisabled}\n      aria-busy={isDisabled}\n      {...props}\n    >\n      {loader && (\n        <ButtonActionProvider value={{ isLoading, isSuccess }}>\n          {loader}\n        </ButtonActionProvider>\n      )}\n      {getLabelContent()}\n\n      <VisuallyHidden aria-live='polite'>{getLabelContent()}</VisuallyHidden>\n    </MantineButton>\n  );\n};\n"],"mappings":"wgBAgCA,MAAM,GAAwB,CAC5B,UACA,cACA,kBAAkB,OAKM,CACxB,GAAM,CAAC,EAAa,GAAkB,EAAS,GAAM,CAC/C,EAAiB,EAAO,EAAQ,CAetC,OAbA,MAAgB,CACd,GAAI,EAAe,SAAW,CAAC,GACzB,EAAa,CACf,EAAe,GAAK,CACpB,IAAM,EAAQ,eAAiB,CAC7B,EAAe,GAAM,EACpB,EAAgB,CACnB,UAAa,aAAa,EAAM,CAGpC,EAAe,QAAU,GACxB,CAAC,EAAS,EAAa,EAAgB,CAAC,CAEpC,EAAU,UAAY,EAAc,UAAY,QAG5C,GAAgB,CAC3B,aACA,YACA,UACA,WACA,SACA,UACA,cACA,cACA,YACA,kBACA,WACA,GAAG,KACoB,CACvB,IAAM,EAAS,EAAqB,CAClC,UACA,cACA,kBACD,CAAC,CAEI,EAAY,IAAW,UACvB,EAAY,IAAW,UAEvB,MACA,GAAa,EAAoB,EACjC,GAAa,EAAoB,EAC9B,EAGH,EAAa,GAAa,GAAa,EAE7C,OACE,EAACA,EAAAA,CACC,WAAY,CACV,MAAO,GAAY,OAAS,GAAmB,CAC/C,MAAO,GAAY,OAAS,GAAmB,CAC/C,KAAM,EACJ,GAAY,cAAgB,GAAc,CAC1C,GAAY,MAAQ,GAAkB,CACvC,CACD,OAAQ,GAAY,QAAU,GAAoB,CAClD,QAAS,GAAY,SAAW,GAAqB,CACtD,CACD,YAAa,EACb,aAAc,EACd,QAAS,EACT,SAAU,EACV,YAAW,EACX,GAAI,YAEH,GACC,EAAC,EAAA,CAAqB,MAAO,CAAE,YAAW,YAAW,UAClD,GACoB,CAExB,GAAiB,CAElB,EAACC,EAAAA,CAAe,YAAU,kBAAU,GAAiB,EAAkB,GACzD"}

package/dist/components/buttons/button-action/ButtonActionContext.mjs

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{createContext as t,useContext as n}from"react";const r=t(null),i=({children:t,value:n})=>e(r.Provider,{value:n,children:t}),a=()=>n(r)||{isLoading:!1,isSuccess:!1};export{i as ButtonActionProvider,a as useButtonActionContext};
+//# sourceMappingURL=ButtonActionContext.mjs.map

package/dist/components/buttons/button-action/ButtonActionContext.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonActionContext.mjs","names":[],"sources":["../../../../src/components/buttons/button-action/ButtonActionContext.tsx"],"sourcesContent":["import { createContext, type ReactNode, useContext } from 'react';\n\nexport interface ButtonActionContextValue {\n  isLoading: boolean;\n  isSuccess: boolean;\n}\n\nconst ButtonActionContext = createContext<ButtonActionContextValue | null>(\n  null,\n);\n\nexport const ButtonActionProvider = ({\n  children,\n  value,\n}: {\n  children: ReactNode;\n  value: ButtonActionContextValue;\n}) => {\n  return (\n    <ButtonActionContext.Provider value={value}>\n      {children}\n    </ButtonActionContext.Provider>\n  );\n};\n\nexport const useButtonActionContext = (): ButtonActionContextValue => {\n  const context = useContext(ButtonActionContext);\n  if (!context) {\n    return { isLoading: false, isSuccess: false };\n  }\n  return context;\n};\n"],"mappings":"8FAOA,MAAM,EAAsB,EAC1B,KACD,CAEY,GAAwB,CACnC,WACA,WAME,EAAC,EAAoB,SAAA,CAAgB,QAClC,YAC4B,CAItB,MACK,EAAW,EAAoB,EAEtC,CAAE,UAAW,GAAO,UAAW,GAAO"}

package/dist/components/buttons/button-action/ButtonLoader.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime18 from "react/jsx-runtime";
+import { ComponentProps } from "react";
+
+//#region src/components/buttons/button-action/ButtonLoader.d.ts
+declare const ButtonLoader: ({
+  className,
+  ...props
+}: ComponentProps<"span">) => react_jsx_runtime18.JSX.Element;
+//#endregion
+export { ButtonLoader };
+//# sourceMappingURL=ButtonLoader.d.mts.map

package/dist/components/buttons/button-action/ButtonLoader.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLoader.d.mts","names":[],"sources":["../../../../src/components/buttons/button-action/ButtonLoader.tsx"],"mappings":";;;;cAOa,YAAA;EAAgB,SAAA;EAAA,GAAA;AAAA,GAG1B,cAAA,aAAsB,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/buttons/button-action/ButtonLoader.mjs

@@ -0,0 +1,2 @@
+import{useButtonActionContext as e}from"./ButtonActionContext.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{buttonActionLoader as n}from"@mage-ui/styled-system/recipes";import{jsx as r}from"react/jsx-runtime";const i=({className:i,...a})=>{let{isLoading:o}=e();return r(`span`,{className:t(n(),i),"data-loading":o,"aria-hidden":`true`,...a})};export{i as ButtonLoader};
+//# sourceMappingURL=ButtonLoader.mjs.map

package/dist/components/buttons/button-action/ButtonLoader.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLoader.mjs","names":[],"sources":["../../../../src/components/buttons/button-action/ButtonLoader.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport { buttonActionLoader } from '@mage-ui/styled-system/recipes';\n\nimport { useButtonActionContext } from './ButtonActionContext';\n\nexport const ButtonLoader = ({\n  className,\n  ...props\n}: ComponentProps<'span'>) => {\n  const { isLoading } = useButtonActionContext();\n\n  return (\n    <span\n      className={cx(buttonActionLoader(), className)}\n      data-loading={isLoading}\n      aria-hidden='true'\n      {...props}\n    />\n  );\n};\n"],"mappings":"+NAOA,MAAa,GAAgB,CAC3B,YACA,GAAG,KACyB,CAC5B,GAAM,CAAE,aAAc,GAAwB,CAE9C,OACE,EAAC,OAAA,CACC,UAAW,EAAG,GAAoB,CAAE,EAAU,CAC9C,eAAc,EACd,cAAY,OACZ,GAAI,GACJ"}

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

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime18 from "react/jsx-runtime";
+import * as react_jsx_runtime19 from "react/jsx-runtime";
 import { ComponentProps } from "react";
 
 //#region src/components/buttons/button-icon/ButtonIcon.d.ts
@@ -23,7 +23,7 @@ declare const ButtonIcon: ({
   onClick,
   disabled,
   classNames
-}: ButtonIconProps) => react_jsx_runtime18.JSX.Element;
+}: ButtonIconProps) => react_jsx_runtime19.JSX.Element;
 //#endregion
 export { ButtonIcon, ButtonIconProps };
 //# sourceMappingURL=ButtonIcon.d.mts.map

package/dist/components/buttons/button-icon/ButtonIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonIcon.mjs","names":["VisuallyHidden"],"sources":["../../../../src/components/buttons/button-icon/ButtonIcon.tsx"],"sourcesContent":[" import type { ComponentProps } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  buttonIcon,\n  buttonIconIcon,\n  buttonIconIconRaw,\n  buttonIconIconRawRoot,\n  buttonIconRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { ActionIcon } from '@mantine/core';\nimport { IconRaw } from '@/components/data-display';\nimport { VisuallyHidden } from '@/components/misc';\n\nexport type ButtonIconProps = ComponentProps<'button'> & {\n  name: string;\n  path: string;\n  label: string;\n  classNames?: {\n    buttonIcon?: string;\n    root?: string;\n    icon?: string;\n    iconRaw?: {\n      iconRaw?: string;\n      root?: string;\n    };\n  };\n};\n\nexport const ButtonIcon = ({\n  label,\n  name,\n  path,\n  onClick,\n  disabled,\n  classNames,\n}: ButtonIconProps) => {\n  return (\n    <ActionIcon\n      classNames={{\n        root: cx(\n          classNames?.buttonIcon ?? buttonIcon(),\n          classNames?.root ?? buttonIconRoot(),\n        ),\n        icon: classNames?.icon ?? buttonIconIcon(),\n      }}\n      onClick={onClick}\n      disabled={disabled}\n    >\n      <IconRaw\n        path={path}\n        name={name}\n        classNames={{\n          iconRaw: classNames?.iconRaw?.iconRaw ?? buttonIconIconRaw(),\n          root: classNames?.iconRaw?.root ?? buttonIconIconRawRoot(),\n        }}\n      />\n      <VisuallyHidden>{label}</VisuallyHidden>\n    </ActionIcon>\n  );\n};\n"],"mappings":"0bA6BA,MAAa,GAAc,CACzB,QACA,OACA,OACA,UACA,WACA,gBAGE,EAAC,EAAA,CACC,WAAY,CACV,KAAM,EACJ,GAAY,YAAc,GAAY,CACtC,GAAY,MAAQ,GAAgB,CACrC,CACD,KAAM,GAAY,MAAQ,GAAgB,CAC3C,CACQ,UACC,qBAEV,EAAC,EAAA,CACO,OACA,OACN,WAAY,CACV,QAAS,GAAY,SAAS,SAAW,GAAmB,CAC5D,KAAM,GAAY,SAAS,MAAQ,GAAuB,CAC3D,EACD,CACF,EAACA,EAAAA,CAAAA,SAAgB,EAAA,CAAuB,CAAA,EAC7B"}
+{"version":3,"file":"ButtonIcon.mjs","names":["VisuallyHidden"],"sources":["../../../../src/components/buttons/button-icon/ButtonIcon.tsx"],"sourcesContent":["import type { ComponentProps } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  buttonIcon,\n  buttonIconIcon,\n  buttonIconIconRaw,\n  buttonIconIconRawRoot,\n  buttonIconRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { ActionIcon } from '@mantine/core';\nimport { IconRaw } from '@/components/data-display';\nimport { VisuallyHidden } from '@/components/misc';\n\nexport type ButtonIconProps = ComponentProps<'button'> & {\n  name: string;\n  path: string;\n  label: string;\n  classNames?: {\n    buttonIcon?: string;\n    root?: string;\n    icon?: string;\n    iconRaw?: {\n      iconRaw?: string;\n      root?: string;\n    };\n  };\n};\n\nexport const ButtonIcon = ({\n  label,\n  name,\n  path,\n  onClick,\n  disabled,\n  classNames,\n}: ButtonIconProps) => {\n  return (\n    <ActionIcon\n      classNames={{\n        root: cx(\n          classNames?.buttonIcon ?? buttonIcon(),\n          classNames?.root ?? buttonIconRoot(),\n        ),\n        icon: classNames?.icon ?? buttonIconIcon(),\n      }}\n      onClick={onClick}\n      disabled={disabled}\n    >\n      <IconRaw\n        path={path}\n        name={name}\n        classNames={{\n          iconRaw: classNames?.iconRaw?.iconRaw ?? buttonIconIconRaw(),\n          root: classNames?.iconRaw?.root ?? buttonIconIconRawRoot(),\n        }}\n      />\n      <VisuallyHidden>{label}</VisuallyHidden>\n    </ActionIcon>\n  );\n};\n"],"mappings":"0bA6BA,MAAa,GAAc,CACzB,QACA,OACA,OACA,UACA,WACA,gBAGE,EAAC,EAAA,CACC,WAAY,CACV,KAAM,EACJ,GAAY,YAAc,GAAY,CACtC,GAAY,MAAQ,GAAgB,CACrC,CACD,KAAM,GAAY,MAAQ,GAAgB,CAC3C,CACQ,UACC,qBAEV,EAAC,EAAA,CACO,OACA,OACN,WAAY,CACV,QAAS,GAAY,SAAS,SAAW,GAAmB,CAC5D,KAAM,GAAY,SAAS,MAAQ,GAAuB,CAC3D,EACD,CACF,EAACA,EAAAA,CAAAA,SAAgB,EAAA,CAAuB,CAAA,EAC7B"}

package/dist/components/buttons/button-visual/ButtonVisual.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime19 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/buttons/button-visual/ButtonVisual.d.ts
@@ -21,7 +21,7 @@ declare const ButtonVisual: ({
   endSlot,
   children,
   disabled
-}: ButtonVisualProps) => react_jsx_runtime19.JSX.Element;
+}: ButtonVisualProps) => react_jsx_runtime21.JSX.Element;
 //#endregion
 export { ButtonVisual, ButtonVisualProps };
 //# sourceMappingURL=ButtonVisual.d.mts.map

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

@@ -1,5 +1,6 @@
 import { Button, ButtonProps } from "./button/Button.mjs";
 import { ButtonAction, ButtonActionProps } from "./button-action/ButtonAction.mjs";
+import { ButtonLoader } from "./button-action/ButtonLoader.mjs";
 import { ButtonIcon, ButtonIconProps } from "./button-icon/ButtonIcon.mjs";
 import { ButtonIconVisual, ButtonIconVisualProps } from "./button-icon-visual/ButtonIconVisual.mjs";
 import { ButtonVisual, ButtonVisualProps } from "./button-visual/ButtonVisual.mjs";

package/dist/components/controls/autocomplete/Autocomplete.d.mts

@@ -1,5 +1,5 @@
 import { ComboboxProps } from "../combobox/Combobox.mjs";
-import * as react_jsx_runtime32 from "react/jsx-runtime";
+import * as react_jsx_runtime25 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/controls/autocomplete/Autocomplete.d.ts
@@ -29,7 +29,7 @@ declare const Autocomplete: ({
   emptyMessage,
   minLength,
   classNames
-}: AutocompleteProps) => react_jsx_runtime32.JSX.Element;
+}: AutocompleteProps) => react_jsx_runtime25.JSX.Element;
 //#endregion
 export { Autocomplete, AutocompleteProps, OptionProps };
 //# sourceMappingURL=Autocomplete.d.mts.map

package/dist/components/controls/autocomplete/Autocomplete.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.mts","names":[],"sources":["../../../../src/components/controls/autocomplete/Autocomplete.tsx"],"mappings":";;;;;KA6BY,WAAA;EACV,EAAA;EACA,KAAA;AAAA;AAAA,KAGU,iBAAA,GAAoB,IAAA,CAC9B,aAAA;EASA,GAAA;EACA,WAAA,GAAc,SAAA;EACd,SAAA;EACA,UAAA,GAAa,IAAA,CACX,WAAA,CAAY,aAAA;IAGZ,YAAA;EAAA;AAAA;AAAA,cAGS,YAAA;EAAgB,GAAA;EAAA,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,QAAA;EAAA,WAAA;EAAA,YAAA;EAAA,SAAA;EAAA,WAAA;EAAA,YAAA;EAAA,SAAA;EAAA;AAAA,GAc1B,iBAAA,KAAiB,mBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Autocomplete.d.mts","names":[],"sources":["../../../../src/components/controls/autocomplete/Autocomplete.tsx"],"mappings":";;;;;KA+BY,WAAA;EACV,EAAA;EACA,KAAA;AAAA;AAAA,KAGU,iBAAA,GAAoB,IAAA,CAC9B,aAAA;EASA,GAAA;EACA,WAAA,GAAc,SAAA;EACd,SAAA;EACA,UAAA,GAAa,IAAA,CACX,WAAA,CAAY,aAAA;IAGZ,YAAA;EAAA;AAAA;AAAA,cAGS,YAAA;EAAgB,GAAA;EAAA,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,QAAA;EAAA,WAAA;EAAA,YAAA;EAAA,SAAA;EAAA,WAAA;EAAA,YAAA;EAAA,SAAA;EAAA;AAAA,GAc1B,iBAAA,KAAiB,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/autocomplete/Autocomplete.mjs

@@ -1,2 +1,2 @@
-import{LoaderDot as e}from"../../data-display/loader-dot/LoaderDot.mjs";import{Combobox as t}from"../combobox/Combobox.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{autocomplete as r,autocompleteClearButton as i,autocompleteClearButtonIcon as a,autocompleteClearButtonIconRaw as o,autocompleteClearButtonIconRawRoot as s,autocompleteClearButtonRoot as c,autocompleteEmpty as l,autocompleteOption as u,autocompleteOptions as d,autocompleteRoot as f,autocompleteScrollAreaAutosize as p,autocompleteTextInput as m,autocompleteTextInputDescription as h,autocompleteTextInputError as g,autocompleteTextInputInput as _,autocompleteTextInputLabel as v,autocompleteTextInputRequired as y,autocompleteTextInputRoot as b,autocompleteTextInputSection as x,autocompleteTextInputWrapper as S}from"@mage-ui/styled-system/recipes";import{jsx as C}from"react/jsx-runtime";import{useState as w}from"react";import{useQuery as T}from"@tanstack/react-query";import{useDebouncedCallback as E}from"@mantine/hooks";const D=({url:D,name:O,label:k,description:A,error:j,disabled:M,placeholder:N,withinPortal:P,startSlot:F,loadingSlot:I,emptyMessage:L,minLength:R=3,classNames:z})=>{let[B,V]=w(``),{data:H,isFetching:U,isLoading:W}=T({queryKey:[D,B],queryFn:async()=>{try{return await(await fetch(D)).json()}catch{return{data:[]}}},enabled:B.length>=R}),G=E(e=>{V(e)},500);return C(t,{name:O,label:k,description:A,placeholder:N,error:j,disabled:M,withinPortal:P,keepMounted:!1,clearable:!0,options:Array.isArray(H)?H.filter(e=>e.value.toLowerCase().includes(B.toLowerCase())):[],startSlot:F,endSlot:W||U?I||C(e,{}):void 0,onChange:e=>{G(e??``)},empty:H===void 0?null:L||`No results`,classNames:{combobox:z?.autocomplete??r(),root:z?.root??H===void 0?``:f(),options:z?.options??d(),option:z?.option??u(),empty:z?.empty??l(),scrollArea:{scrollArea:z?.scrollArea?.scrollArea??p()},textInput:{root:z?.textInput?.root??n(m(),b()),label:z?.textInput?.label??v(),description:z?.textInput?.description??h(),error:z?.textInput?.error??g(),wrapper:z?.textInput?.wrapper??S(),input:z?.textInput?.input??_(),section:z?.textInput?.section??x(),required:z?.textInput?.required??y(),endSlot:{clearButton:{buttonIcon:z?.textInput?.endSlot?.clearButton?.buttonIcon??i(),root:z?.textInput?.endSlot?.clearButton?.root??c(),icon:z?.textInput?.endSlot?.clearButton?.icon??a(),iconRaw:{iconRaw:z?.textInput?.endSlot?.clearButton?.iconRaw?.iconRaw??o(),root:z?.textInput?.endSlot?.clearButton?.iconRaw?.root??s()}}}}}})};export{D as Autocomplete};
+import{LoaderDot as e}from"../../data-display/loader-dot/LoaderDot.mjs";import{Combobox as t}from"../combobox/Combobox.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{autocomplete as r,autocompleteClearButton as i,autocompleteClearButtonIcon as a,autocompleteClearButtonIconRaw as o,autocompleteClearButtonIconRawRoot as s,autocompleteClearButtonRoot as c,autocompleteEmpty as l,autocompleteOption as u,autocompleteOptions as d,autocompleteRoot as f,autocompleteScrollAreaAutosize as p,autocompleteTextInput as m,autocompleteTextInputDescription as h,autocompleteTextInputError as g,autocompleteTextInputInput as _,autocompleteTextInputLabel as v,autocompleteTextInputRequired as y,autocompleteTextInputRoot as b,autocompleteTextInputSection as x,autocompleteTextInputWrapper as S}from"@mage-ui/styled-system/recipes";import{jsx as C}from"react/jsx-runtime";import{useState as w}from"react";import{useDebouncedCallback as T}from"@mantine/hooks";import{useQuery as E}from"@tanstack/react-query";const D=({url:D,name:O,label:k,description:A,error:j,disabled:M,placeholder:N,withinPortal:P,startSlot:F,loadingSlot:I,emptyMessage:L,minLength:R=3,classNames:z})=>{let[B,V]=w(``),{data:H,isFetching:U,isLoading:W}=E({queryKey:[D,B],queryFn:async()=>{try{return await(await fetch(D)).json()}catch{return{data:[]}}},enabled:B.length>=R}),G=T(e=>{V(e)},500);return C(t,{name:O,label:k,description:A,placeholder:N,error:j,disabled:M,withinPortal:P,keepMounted:!1,clearable:!0,options:Array.isArray(H)?H.filter(e=>e.value.toLowerCase().includes(B.toLowerCase())):[],startSlot:F,endSlot:W||U?I||C(e,{}):void 0,onChange:e=>{G(e??``)},empty:H===void 0?null:L||`No results`,classNames:{combobox:z?.autocomplete??r(),root:z?.root??H===void 0?``:f(),options:z?.options??d(),option:z?.option??u(),empty:z?.empty??l(),scrollArea:{scrollArea:z?.scrollArea?.scrollArea??p()},textInput:{root:z?.textInput?.root??n(m(),b()),label:z?.textInput?.label??v(),description:z?.textInput?.description??h(),error:z?.textInput?.error??g(),wrapper:z?.textInput?.wrapper??S(),input:z?.textInput?.input??_(),section:z?.textInput?.section??x(),required:z?.textInput?.required??y(),endSlot:{clearButton:{buttonIcon:z?.textInput?.endSlot?.clearButton?.buttonIcon??i(),root:z?.textInput?.endSlot?.clearButton?.root??c(),icon:z?.textInput?.endSlot?.clearButton?.icon??a(),iconRaw:{iconRaw:z?.textInput?.endSlot?.clearButton?.iconRaw?.iconRaw??o(),root:z?.textInput?.endSlot?.clearButton?.iconRaw?.root??s()}}}}}})};export{D as Autocomplete};
 //# sourceMappingURL=Autocomplete.mjs.map

package/dist/components/controls/autocomplete/Autocomplete.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../src/components/controls/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { useState, type ReactNode } from 'react';\nimport { Combobox, type ComboboxProps } from '../combobox/Combobox';\nimport { cx } from '@mage-ui/styled-system/css';\nimport { useQuery } from '@tanstack/react-query';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport {\n  autocomplete,\n  autocompleteClearButton,\n  autocompleteClearButtonIcon,\n  autocompleteClearButtonIconRaw,\n  autocompleteClearButtonIconRawRoot,\n  autocompleteClearButtonRoot,\n  autocompleteEmpty,\n  autocompleteOption,\n  autocompleteOptions,\n  autocompleteRoot,\n  autocompleteScrollAreaAutosize,\n  autocompleteTextInput,\n  autocompleteTextInputDescription,\n  autocompleteTextInputError,\n  autocompleteTextInputInput,\n  autocompleteTextInputLabel,\n  autocompleteTextInputRequired,\n  autocompleteTextInputRoot,\n  autocompleteTextInputSection,\n  autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { LoaderDot } from '@/components/data-display';\n\nexport type OptionProps = {\n  id: string | number;\n  value: string;\n};\n\nexport type AutocompleteProps = Omit<\n  ComboboxProps,\n  | 'classNames'\n  | 'endSlot'\n  | 'options'\n  | 'createNewItem'\n  | 'chevron'\n  | 'keepMounted'\n  | 'clearable'\n> & {\n  url: string;\n  loadingSlot?: ReactNode;\n  minLength?: number;\n  classNames?: Omit<\n    NonNullable<ComboboxProps['classNames']>,\n    'combobox' | 'create' | 'createIcon'\n  > & {\n    autocomplete?: string;\n  };\n};\nexport const Autocomplete = ({\n  url,\n  name,\n  label,\n  description,\n  error,\n  disabled,\n  placeholder,\n  withinPortal,\n  startSlot,\n  loadingSlot,\n  emptyMessage,\n  minLength = 3,\n  classNames,\n}: AutocompleteProps) => {\n  const [query, setQuery] = useState('');\n\n  const { data, isFetching, isLoading } = useQuery<OptionProps[]>({\n    queryKey: [url, query],\n    // queryFn: async () => {\n    //   try {\n    //     const response = await fetch(url, {\n    //       method: 'POST',\n    //       headers: { 'Content-Type': 'application/json' },\n    //       body: JSON.stringify({ query }),\n    //     });\n    //     return await response.json();\n    //   } catch (_error) {\n    //     return { data: [] };\n    //   }\n    // },\n    queryFn: async () => {\n      try {\n        const response = await fetch(url);\n        return await response.json();\n      } catch (_error) {\n        return { data: [] };\n      }\n    },\n    enabled: query.length >= minLength,\n  });\n\n  const debounced = useDebouncedCallback((value: string) => {\n    setQuery(value);\n  }, 500);\n\n  const list: OptionProps[] = Array.isArray(data)\n    ? data.filter((itemList) =>\n        itemList.value.toLowerCase().includes(query.toLowerCase()),\n      )\n    : [];\n\n  return (\n    <Combobox\n      name={name}\n      label={label}\n      description={description}\n      placeholder={placeholder}\n      error={error}\n      disabled={disabled}\n      withinPortal={withinPortal}\n      keepMounted={false}\n      clearable={true}\n      options={list}\n      startSlot={startSlot}\n      endSlot={\n        isLoading || isFetching ? loadingSlot || <LoaderDot /> : undefined\n      }\n      onChange={(value) => {\n        debounced(value ?? '');\n      }}\n      empty={data === undefined ? null : emptyMessage || 'No results'}\n      classNames={{\n        combobox: classNames?.autocomplete ?? autocomplete(),\n        root: classNames?.root ?? data === undefined ? '' : autocompleteRoot(),\n        options: classNames?.options ?? autocompleteOptions(),\n        option: classNames?.option ?? autocompleteOption(),\n        empty: classNames?.empty ?? autocompleteEmpty(),\n        scrollArea: {\n          scrollArea:\n            classNames?.scrollArea?.scrollArea ??\n            autocompleteScrollAreaAutosize(),\n        },\n        textInput: {\n          root:\n            classNames?.textInput?.root ??\n            cx(autocompleteTextInput(), autocompleteTextInputRoot()),\n          label: classNames?.textInput?.label ?? autocompleteTextInputLabel(),\n          description:\n            classNames?.textInput?.description ??\n            autocompleteTextInputDescription(),\n          error: classNames?.textInput?.error ?? autocompleteTextInputError(),\n          wrapper:\n            classNames?.textInput?.wrapper ?? autocompleteTextInputWrapper(),\n          input: classNames?.textInput?.input ?? autocompleteTextInputInput(),\n          section:\n            classNames?.textInput?.section ?? autocompleteTextInputSection(),\n          required:\n            classNames?.textInput?.required ?? autocompleteTextInputRequired(),\n          endSlot: {\n            clearButton: {\n              buttonIcon:\n                classNames?.textInput?.endSlot?.clearButton?.buttonIcon ??\n                autocompleteClearButton(),\n              root:\n                classNames?.textInput?.endSlot?.clearButton?.root ??\n                autocompleteClearButtonRoot(),\n              icon:\n                classNames?.textInput?.endSlot?.clearButton?.icon ??\n                autocompleteClearButtonIcon(),\n              iconRaw: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw\n                    ?.iconRaw ?? autocompleteClearButtonIconRaw(),\n                root:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw?.root ??\n                  autocompleteClearButtonIconRawRoot(),\n              },\n            },\n          },\n        },\n      }}\n    />\n  );\n};\n"],"mappings":"8+BAsDA,MAAa,GAAgB,CAC3B,MACA,OACA,QACA,cACA,QACA,WACA,cACA,eACA,YACA,cACA,eACA,YAAY,EACZ,gBACuB,CACvB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAG,CAEhC,CAAE,OAAM,aAAY,aAAc,EAAwB,CAC9D,SAAU,CAAC,EAAK,EAAM,CAatB,QAAS,SAAY,CACnB,GAAI,CAEF,OAAO,MADU,MAAM,MAAM,EAAI,EACX,MAAM,MACb,CACf,MAAO,CAAE,KAAM,EAAE,CAAE,GAGvB,QAAS,EAAM,QAAU,EAC1B,CAAC,CAEI,EAAY,EAAsB,GAAkB,CACxD,EAAS,EAAM,EACd,IAAI,CAQP,OACE,EAAC,EAAA,CACO,OACC,QACM,cACA,cACN,QACG,WACI,eACd,YAAa,GACb,UAAW,GACX,QAjBwB,MAAM,QAAQ,EAAK,CAC3C,EAAK,OAAQ,GACX,EAAS,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,CAC3D,CACD,EAAE,CAcS,YACX,QACE,GAAa,EAAa,GAAe,EAAC,EAAA,EAAA,CAAY,CAAG,IAAA,GAE3D,SAAW,GAAU,CACnB,EAAU,GAAS,GAAG,EAExB,MAAO,IAAS,IAAA,GAAY,KAAO,GAAgB,aACnD,WAAY,CACV,SAAU,GAAY,cAAgB,GAAc,CACpD,KAAM,GAAY,MAAQ,IAAS,IAAA,GAAY,GAAK,GAAkB,CACtE,QAAS,GAAY,SAAW,GAAqB,CACrD,OAAQ,GAAY,QAAU,GAAoB,CAClD,MAAO,GAAY,OAAS,GAAmB,CAC/C,WAAY,CACV,WACE,GAAY,YAAY,YACxB,GAAgC,CACnC,CACD,UAAW,CACT,KACE,GAAY,WAAW,MACvB,EAAG,GAAuB,CAAE,GAA2B,CAAC,CAC1D,MAAO,GAAY,WAAW,OAAS,GAA4B,CACnE,YACE,GAAY,WAAW,aACvB,GAAkC,CACpC,MAAO,GAAY,WAAW,OAAS,GAA4B,CACnE,QACE,GAAY,WAAW,SAAW,GAA8B,CAClE,MAAO,GAAY,WAAW,OAAS,GAA4B,CACnE,QACE,GAAY,WAAW,SAAW,GAA8B,CAClE,SACE,GAAY,WAAW,UAAY,GAA+B,CACpE,QAAS,CACP,YAAa,CACX,WACE,GAAY,WAAW,SAAS,aAAa,YAC7C,GAAyB,CAC3B,KACE,GAAY,WAAW,SAAS,aAAa,MAC7C,GAA6B,CAC/B,KACE,GAAY,WAAW,SAAS,aAAa,MAC7C,GAA6B,CAC/B,QAAS,CACP,QACE,GAAY,WAAW,SAAS,aAAa,SACzC,SAAW,GAAgC,CACjD,KACE,GAAY,WAAW,SAAS,aAAa,SAAS,MACtD,GAAoC,CACvC,CACF,CACF,CACF,CACF,EACD"}
+{"version":3,"file":"Autocomplete.mjs","names":[],"sources":["../../../../src/components/controls/autocomplete/Autocomplete.tsx"],"sourcesContent":["import { type ReactNode, useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  autocomplete,\n  autocompleteClearButton,\n  autocompleteClearButtonIcon,\n  autocompleteClearButtonIconRaw,\n  autocompleteClearButtonIconRawRoot,\n  autocompleteClearButtonRoot,\n  autocompleteEmpty,\n  autocompleteOption,\n  autocompleteOptions,\n  autocompleteRoot,\n  autocompleteScrollAreaAutosize,\n  autocompleteTextInput,\n  autocompleteTextInputDescription,\n  autocompleteTextInputError,\n  autocompleteTextInputInput,\n  autocompleteTextInputLabel,\n  autocompleteTextInputRequired,\n  autocompleteTextInputRoot,\n  autocompleteTextInputSection,\n  autocompleteTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { useDebouncedCallback } from '@mantine/hooks';\nimport { useQuery } from '@tanstack/react-query';\nimport { LoaderDot } from '@/components/data-display';\n\nimport { Combobox, type ComboboxProps } from '../combobox/Combobox';\n\nexport type OptionProps = {\n  id: string | number;\n  value: string;\n};\n\nexport type AutocompleteProps = Omit<\n  ComboboxProps,\n  | 'classNames'\n  | 'endSlot'\n  | 'options'\n  | 'createNewItem'\n  | 'chevron'\n  | 'keepMounted'\n  | 'clearable'\n> & {\n  url: string;\n  loadingSlot?: ReactNode;\n  minLength?: number;\n  classNames?: Omit<\n    NonNullable<ComboboxProps['classNames']>,\n    'combobox' | 'create' | 'createIcon'\n  > & {\n    autocomplete?: string;\n  };\n};\nexport const Autocomplete = ({\n  url,\n  name,\n  label,\n  description,\n  error,\n  disabled,\n  placeholder,\n  withinPortal,\n  startSlot,\n  loadingSlot,\n  emptyMessage,\n  minLength = 3,\n  classNames,\n}: AutocompleteProps) => {\n  const [query, setQuery] = useState('');\n\n  const { data, isFetching, isLoading } = useQuery<OptionProps[]>({\n    queryKey: [url, query],\n    // queryFn: async () => {\n    //   try {\n    //     const response = await fetch(url, {\n    //       method: 'POST',\n    //       headers: { 'Content-Type': 'application/json' },\n    //       body: JSON.stringify({ query }),\n    //     });\n    //     return await response.json();\n    //   } catch (_error) {\n    //     return { data: [] };\n    //   }\n    // },\n    queryFn: async () => {\n      try {\n        const response = await fetch(url);\n        return await response.json();\n      } catch (_error) {\n        return { data: [] };\n      }\n    },\n    enabled: query.length >= minLength,\n  });\n\n  const debounced = useDebouncedCallback((value: string) => {\n    setQuery(value);\n  }, 500);\n\n  const list: OptionProps[] = Array.isArray(data)\n    ? data.filter((itemList) =>\n        itemList.value.toLowerCase().includes(query.toLowerCase()),\n      )\n    : [];\n\n  return (\n    <Combobox\n      name={name}\n      label={label}\n      description={description}\n      placeholder={placeholder}\n      error={error}\n      disabled={disabled}\n      withinPortal={withinPortal}\n      keepMounted={false}\n      clearable={true}\n      options={list}\n      startSlot={startSlot}\n      endSlot={\n        isLoading || isFetching ? loadingSlot || <LoaderDot /> : undefined\n      }\n      onChange={(value) => {\n        debounced(value ?? '');\n      }}\n      empty={data === undefined ? null : emptyMessage || 'No results'}\n      classNames={{\n        combobox: classNames?.autocomplete ?? autocomplete(),\n        root:\n          (classNames?.root ?? data === undefined) ? '' : autocompleteRoot(),\n        options: classNames?.options ?? autocompleteOptions(),\n        option: classNames?.option ?? autocompleteOption(),\n        empty: classNames?.empty ?? autocompleteEmpty(),\n        scrollArea: {\n          scrollArea:\n            classNames?.scrollArea?.scrollArea ??\n            autocompleteScrollAreaAutosize(),\n        },\n        textInput: {\n          root:\n            classNames?.textInput?.root ??\n            cx(autocompleteTextInput(), autocompleteTextInputRoot()),\n          label: classNames?.textInput?.label ?? autocompleteTextInputLabel(),\n          description:\n            classNames?.textInput?.description ??\n            autocompleteTextInputDescription(),\n          error: classNames?.textInput?.error ?? autocompleteTextInputError(),\n          wrapper:\n            classNames?.textInput?.wrapper ?? autocompleteTextInputWrapper(),\n          input: classNames?.textInput?.input ?? autocompleteTextInputInput(),\n          section:\n            classNames?.textInput?.section ?? autocompleteTextInputSection(),\n          required:\n            classNames?.textInput?.required ?? autocompleteTextInputRequired(),\n          endSlot: {\n            clearButton: {\n              buttonIcon:\n                classNames?.textInput?.endSlot?.clearButton?.buttonIcon ??\n                autocompleteClearButton(),\n              root:\n                classNames?.textInput?.endSlot?.clearButton?.root ??\n                autocompleteClearButtonRoot(),\n              icon:\n                classNames?.textInput?.endSlot?.clearButton?.icon ??\n                autocompleteClearButtonIcon(),\n              iconRaw: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw\n                    ?.iconRaw ?? autocompleteClearButtonIconRaw(),\n                root:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw?.root ??\n                  autocompleteClearButtonIconRawRoot(),\n              },\n            },\n          },\n        },\n      }}\n    />\n  );\n};\n"],"mappings":"8+BAwDA,MAAa,GAAgB,CAC3B,MACA,OACA,QACA,cACA,QACA,WACA,cACA,eACA,YACA,cACA,eACA,YAAY,EACZ,gBACuB,CACvB,GAAM,CAAC,EAAO,GAAY,EAAS,GAAG,CAEhC,CAAE,OAAM,aAAY,aAAc,EAAwB,CAC9D,SAAU,CAAC,EAAK,EAAM,CAatB,QAAS,SAAY,CACnB,GAAI,CAEF,OAAO,MADU,MAAM,MAAM,EAAI,EACX,MAAM,MACb,CACf,MAAO,CAAE,KAAM,EAAE,CAAE,GAGvB,QAAS,EAAM,QAAU,EAC1B,CAAC,CAEI,EAAY,EAAsB,GAAkB,CACxD,EAAS,EAAM,EACd,IAAI,CAQP,OACE,EAAC,EAAA,CACO,OACC,QACM,cACA,cACN,QACG,WACI,eACd,YAAa,GACb,UAAW,GACX,QAjBwB,MAAM,QAAQ,EAAK,CAC3C,EAAK,OAAQ,GACX,EAAS,MAAM,aAAa,CAAC,SAAS,EAAM,aAAa,CAAC,CAC3D,CACD,EAAE,CAcS,YACX,QACE,GAAa,EAAa,GAAe,EAAC,EAAA,EAAA,CAAY,CAAG,IAAA,GAE3D,SAAW,GAAU,CACnB,EAAU,GAAS,GAAG,EAExB,MAAO,IAAS,IAAA,GAAY,KAAO,GAAgB,aACnD,WAAY,CACV,SAAU,GAAY,cAAgB,GAAc,CACpD,KACG,GAAY,MAAQ,IAAS,IAAA,GAAa,GAAK,GAAkB,CACpE,QAAS,GAAY,SAAW,GAAqB,CACrD,OAAQ,GAAY,QAAU,GAAoB,CAClD,MAAO,GAAY,OAAS,GAAmB,CAC/C,WAAY,CACV,WACE,GAAY,YAAY,YACxB,GAAgC,CACnC,CACD,UAAW,CACT,KACE,GAAY,WAAW,MACvB,EAAG,GAAuB,CAAE,GAA2B,CAAC,CAC1D,MAAO,GAAY,WAAW,OAAS,GAA4B,CACnE,YACE,GAAY,WAAW,aACvB,GAAkC,CACpC,MAAO,GAAY,WAAW,OAAS,GAA4B,CACnE,QACE,GAAY,WAAW,SAAW,GAA8B,CAClE,MAAO,GAAY,WAAW,OAAS,GAA4B,CACnE,QACE,GAAY,WAAW,SAAW,GAA8B,CAClE,SACE,GAAY,WAAW,UAAY,GAA+B,CACpE,QAAS,CACP,YAAa,CACX,WACE,GAAY,WAAW,SAAS,aAAa,YAC7C,GAAyB,CAC3B,KACE,GAAY,WAAW,SAAS,aAAa,MAC7C,GAA6B,CAC/B,KACE,GAAY,WAAW,SAAS,aAAa,MAC7C,GAA6B,CAC/B,QAAS,CACP,QACE,GAAY,WAAW,SAAS,aAAa,SACzC,SAAW,GAAgC,CACjD,KACE,GAAY,WAAW,SAAS,aAAa,SAAS,MACtD,GAAoC,CACvC,CACF,CACF,CACF,CACF,EACD"}

package/dist/components/controls/checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["Checkbox","MantineCheckbox"],"sources":["../../../../src/components/controls/checkbox/Checkbox.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  checkbox,\n  checkboxBody,\n  checkboxBodyError,\n  checkboxInput,\n  checkboxDescription,\n  checkboxError,\n  checkboxIcon,\n  checkboxInner,\n  checkboxLabel,\n  checkboxLabelWrapper,\n  checkboxLabelRequired,\n  checkboxRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Checkbox as MantineCheckbox } from '@mantine/core';\n\nimport { CheckboxGroup } from '../checkbox-group/CheckboxGroup';\nimport { visuallyHidden } from '@mage-ui/styled-system/patterns';\n\nexport type CheckboxProps = Omit<ComponentProps<'input'>, 'size'> & {\n  checked?: boolean;\n  label?: ReactNode;\n  description?: string;\n  error?: string;\n  name?: string;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  classNames?: {\n    checkbox?: string;\n    root?: string;\n    input?: string;\n    icon?: string;\n    inner?: string;\n    body?: string;\n    bodyError?: string;\n    labelWrapper?: string;\n    labelRequired?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n  };\n  indeterminate?: boolean;\n  hiddenLabel?: boolean;\n};\n\nexport const Checkbox = ({\n  classNames,\n  name,\n  label,\n  hiddenLabel,\n  description,\n  error,\n  onChange,\n  value,\n  id,\n  disabled,\n  readOnly,\n  required,\n  indeterminate,\n  checked,\n}: CheckboxProps): ReactNode => {\n  const requiredIndicator = required ? (\n    <span className={classNames?.labelRequired ?? checkboxLabelRequired()}>\n      *\n    </span>\n  ) : null;\n  return (\n    <MantineCheckbox\n      classNames={{\n        root: cx(\n          classNames?.checkbox ?? checkbox(),\n          classNames?.root ?? checkboxRoot(),\n        ),\n        input: cx(classNames?.input ?? checkboxInput(), 'peer'),\n        icon: classNames?.icon ?? checkboxIcon(),\n        inner: classNames?.inner ?? checkboxInner(),\n        body: cx(\n          classNames?.body ?? checkboxBody(),\n          error && (classNames?.bodyError ?? checkboxBodyError()),\n        ),\n        labelWrapper: classNames?.labelWrapper ?? checkboxLabelWrapper(),\n        label: cx(\n          classNames?.label ?? checkboxLabel(),\n          hiddenLabel && visuallyHidden(),\n        ),\n        description: classNames?.description ?? checkboxDescription(),\n        error: classNames?.error ?? checkboxError(),\n      }}\n      label={\n        <>\n          {label} {requiredIndicator}\n        </>\n      }\n      description={description}\n      error={error}\n      name={name}\n      onChange={onChange}\n      value={value}\n      id={id}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      indeterminate={indeterminate}\n      checked={checked}\n    />\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\nCheckbox.Group = CheckboxGroup;\n"],"mappings":"+jBA+CA,MAAaA,GAAY,CACvB,aACA,OACA,QACA,cACA,cACA,QACA,WACA,QACA,KACA,WACA,WACA,WACA,gBACA,aAC8B,CAC9B,IAAM,EAAoB,EACxB,EAAC,OAAA,CAAK,UAAW,GAAY,eAAiB,GAAuB,UAAE,KAEhE,CACL,KACJ,OACE,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,EACJ,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,CACD,MAAO,EAAG,GAAY,OAAS,GAAe,CAAE,OAAO,CACvD,KAAM,GAAY,MAAQ,GAAc,CACxC,MAAO,GAAY,OAAS,GAAe,CAC3C,KAAM,EACJ,GAAY,MAAQ,GAAc,CAClC,IAAU,GAAY,WAAa,GAAmB,EACvD,CACD,aAAc,GAAY,cAAgB,GAAsB,CAChE,MAAO,EACL,GAAY,OAAS,GAAe,CACpC,GAAe,GAAgB,CAChC,CACD,YAAa,GAAY,aAAe,GAAqB,CAC7D,MAAO,GAAY,OAAS,GAAe,CAC5C,CACD,MACE,EAAA,EAAA,CAAA,SAAA,CACG,EAAM,IAAE,IACR,CAEQ,cACN,QACD,OACI,WACH,QACH,KACM,WACA,WACA,WACK,gBACN,WACT,EAIN,EAAS,YAAc,WACvB,EAAS,MAAQ"}
+{"version":3,"file":"Checkbox.mjs","names":["Checkbox","MantineCheckbox"],"sources":["../../../../src/components/controls/checkbox/Checkbox.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport { visuallyHidden } from '@mage-ui/styled-system/patterns';\nimport {\n  checkbox,\n  checkboxBody,\n  checkboxBodyError,\n  checkboxDescription,\n  checkboxError,\n  checkboxIcon,\n  checkboxInner,\n  checkboxInput,\n  checkboxLabel,\n  checkboxLabelRequired,\n  checkboxLabelWrapper,\n  checkboxRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Checkbox as MantineCheckbox } from '@mantine/core';\n\nimport { CheckboxGroup } from '../checkbox-group/CheckboxGroup';\n\nexport type CheckboxProps = Omit<ComponentProps<'input'>, 'size'> & {\n  checked?: boolean;\n  label?: ReactNode;\n  description?: string;\n  error?: string;\n  name?: string;\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  classNames?: {\n    checkbox?: string;\n    root?: string;\n    input?: string;\n    icon?: string;\n    inner?: string;\n    body?: string;\n    bodyError?: string;\n    labelWrapper?: string;\n    labelRequired?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n  };\n  indeterminate?: boolean;\n  hiddenLabel?: boolean;\n};\n\nexport const Checkbox = ({\n  classNames,\n  name,\n  label,\n  hiddenLabel,\n  description,\n  error,\n  onChange,\n  value,\n  id,\n  disabled,\n  readOnly,\n  required,\n  indeterminate,\n  checked,\n}: CheckboxProps): ReactNode => {\n  const requiredIndicator = required ? (\n    <span className={classNames?.labelRequired ?? checkboxLabelRequired()}>\n      *\n    </span>\n  ) : null;\n  return (\n    <MantineCheckbox\n      classNames={{\n        root: cx(\n          classNames?.checkbox ?? checkbox(),\n          classNames?.root ?? checkboxRoot(),\n        ),\n        input: cx(classNames?.input ?? checkboxInput(), 'peer'),\n        icon: classNames?.icon ?? checkboxIcon(),\n        inner: classNames?.inner ?? checkboxInner(),\n        body: cx(\n          classNames?.body ?? checkboxBody(),\n          error && (classNames?.bodyError ?? checkboxBodyError()),\n        ),\n        labelWrapper: classNames?.labelWrapper ?? checkboxLabelWrapper(),\n        label: cx(\n          classNames?.label ?? checkboxLabel(),\n          hiddenLabel && visuallyHidden(),\n        ),\n        description: classNames?.description ?? checkboxDescription(),\n        error: classNames?.error ?? checkboxError(),\n      }}\n      label={\n        <>\n          {label} {requiredIndicator}\n        </>\n      }\n      description={description}\n      error={error}\n      name={name}\n      onChange={onChange}\n      value={value}\n      id={id}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      indeterminate={indeterminate}\n      checked={checked}\n    />\n  );\n};\n\nCheckbox.displayName = 'Checkbox';\nCheckbox.Group = CheckboxGroup;\n"],"mappings":"+jBA+CA,MAAaA,GAAY,CACvB,aACA,OACA,QACA,cACA,cACA,QACA,WACA,QACA,KACA,WACA,WACA,WACA,gBACA,aAC8B,CAC9B,IAAM,EAAoB,EACxB,EAAC,OAAA,CAAK,UAAW,GAAY,eAAiB,GAAuB,UAAE,KAEhE,CACL,KACJ,OACE,EAACC,EAAAA,CACC,WAAY,CACV,KAAM,EACJ,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,CACD,MAAO,EAAG,GAAY,OAAS,GAAe,CAAE,OAAO,CACvD,KAAM,GAAY,MAAQ,GAAc,CACxC,MAAO,GAAY,OAAS,GAAe,CAC3C,KAAM,EACJ,GAAY,MAAQ,GAAc,CAClC,IAAU,GAAY,WAAa,GAAmB,EACvD,CACD,aAAc,GAAY,cAAgB,GAAsB,CAChE,MAAO,EACL,GAAY,OAAS,GAAe,CACpC,GAAe,GAAgB,CAChC,CACD,YAAa,GAAY,aAAe,GAAqB,CAC7D,MAAO,GAAY,OAAS,GAAe,CAC5C,CACD,MACE,EAAA,EAAA,CAAA,SAAA,CACG,EAAM,IAAE,IACR,CAEQ,cACN,QACD,OACI,WACH,QACH,KACM,WACA,WACA,WACK,gBACN,WACT,EAIN,EAAS,YAAc,WACvB,EAAS,MAAQ"}

package/dist/components/controls/checkbox-group/CheckboxGroup.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxGroup.mjs","names":["CheckboxMantine"],"sources":["../../../../src/components/controls/checkbox-group/CheckboxGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  checkboxGroup,\n  checkboxGroupDescription,\n  checkboxGroupError,\n  checkboxGroupLabel,\n  checkboxGroupGroup,\n  checkboxGroupRequired,\n  checkboxGroupRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Checkbox as CheckboxMantine } 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  withAsterisk?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  classNames?: {\n    checkboxGroup?: string;\n    root?: string;\n    label?: string;\n    required?: string;\n    description?: string;\n    error?: string;\n    list?: string;\n  };\n};\n\nexport const CheckboxGroup = ({\n  label,\n  error,\n  description,\n  children,\n  value,\n  onChange,\n  withAsterisk,\n  required,\n  disabled,\n  classNames,\n}: CheckboxGroupProps): ReactNode => {\n  return (\n    <CheckboxMantine.Group\n      classNames={{\n        root: cx(\n          classNames?.checkboxGroup ?? checkboxGroup(),\n          classNames?.root ?? checkboxGroupRoot(),\n        ),\n        label: classNames?.label ?? checkboxGroupLabel(),\n        required: classNames?.required ?? checkboxGroupRequired(),\n        description: classNames?.description ?? checkboxGroupDescription(),\n        error: classNames?.error ?? checkboxGroupError(),\n      }}\n      label={label}\n      description={description}\n      error={error}\n      value={value}\n      onChange={onChange}\n      disabled={disabled}\n      required={required}\n      withAsterisk={withAsterisk}\n      //TODO: withAsterisk={required}? - jo no lligaría la prop required amb withAsterisk, withAsterisk ha de ser independent per a certos casos, sustitueix el required i li treu l'atribut al input\n    >\n      <div className={classNames?.list ?? checkboxGroupGroup()}>{children}</div>\n    </CheckboxMantine.Group>\n  );\n};\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n"],"mappings":"wVAmCA,MAAa,GAAiB,CAC5B,QACA,QACA,cACA,WACA,QACA,WACA,eACA,WACA,WACA,gBAGE,EAACA,EAAgB,MAAA,CACf,WAAY,CACV,KAAM,EACJ,GAAY,eAAiB,GAAe,CAC5C,GAAY,MAAQ,GAAmB,CACxC,CACD,MAAO,GAAY,OAAS,GAAoB,CAChD,SAAU,GAAY,UAAY,GAAuB,CACzD,YAAa,GAAY,aAAe,GAA0B,CAClE,MAAO,GAAY,OAAS,GAAoB,CACjD,CACM,QACM,cACN,QACA,QACG,WACA,WACA,WACI,wBAGd,EAAC,MAAA,CAAI,UAAW,GAAY,MAAQ,GAAoB,CAAG,YAAe,EACpD,CAI5B,EAAc,YAAc"}
+{"version":3,"file":"CheckboxGroup.mjs","names":["CheckboxMantine"],"sources":["../../../../src/components/controls/checkbox-group/CheckboxGroup.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  checkboxGroup,\n  checkboxGroupDescription,\n  checkboxGroupError,\n  checkboxGroupGroup,\n  checkboxGroupLabel,\n  checkboxGroupRequired,\n  checkboxGroupRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { Checkbox as CheckboxMantine } 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  withAsterisk?: boolean;\n  required?: boolean;\n  disabled?: boolean;\n  classNames?: {\n    checkboxGroup?: string;\n    root?: string;\n    label?: string;\n    required?: string;\n    description?: string;\n    error?: string;\n    list?: string;\n  };\n};\n\nexport const CheckboxGroup = ({\n  label,\n  error,\n  description,\n  children,\n  value,\n  onChange,\n  withAsterisk,\n  required,\n  disabled,\n  classNames,\n}: CheckboxGroupProps): ReactNode => {\n  return (\n    <CheckboxMantine.Group\n      classNames={{\n        root: cx(\n          classNames?.checkboxGroup ?? checkboxGroup(),\n          classNames?.root ?? checkboxGroupRoot(),\n        ),\n        label: classNames?.label ?? checkboxGroupLabel(),\n        required: classNames?.required ?? checkboxGroupRequired(),\n        description: classNames?.description ?? checkboxGroupDescription(),\n        error: classNames?.error ?? checkboxGroupError(),\n      }}\n      label={label}\n      description={description}\n      error={error}\n      value={value}\n      onChange={onChange}\n      disabled={disabled}\n      required={required}\n      withAsterisk={withAsterisk}\n      //TODO: withAsterisk={required}? - jo no lligaría la prop required amb withAsterisk, withAsterisk ha de ser independent per a certos casos, sustitueix el required i li treu l'atribut al input\n    >\n      <div className={classNames?.list ?? checkboxGroupGroup()}>{children}</div>\n    </CheckboxMantine.Group>\n  );\n};\n\nCheckboxGroup.displayName = 'Checkbox.Group';\n"],"mappings":"wVAmCA,MAAa,GAAiB,CAC5B,QACA,QACA,cACA,WACA,QACA,WACA,eACA,WACA,WACA,gBAGE,EAACA,EAAgB,MAAA,CACf,WAAY,CACV,KAAM,EACJ,GAAY,eAAiB,GAAe,CAC5C,GAAY,MAAQ,GAAmB,CACxC,CACD,MAAO,GAAY,OAAS,GAAoB,CAChD,SAAU,GAAY,UAAY,GAAuB,CACzD,YAAa,GAAY,aAAe,GAA0B,CAClE,MAAO,GAAY,OAAS,GAAoB,CACjD,CACM,QACM,cACN,QACA,QACG,WACA,WACA,WACI,wBAGd,EAAC,MAAA,CAAI,UAAW,GAAY,MAAQ,GAAoB,CAAG,YAAe,EACpD,CAI5B,EAAc,YAAc"}

package/dist/components/controls/combobox/Combobox.d.mts

@@ -1,5 +1,5 @@
 import { DropdownProps } from "../dropdown/Dropdown.mjs";
-import * as react_jsx_runtime31 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/components/controls/combobox/Combobox.d.ts
 type ComboboxProps = Omit<DropdownProps, 'classNames' | 'onChange' | 'onBlur' | 'onFocus' | 'onClick' | 'setValue' | 'children'> & {
@@ -52,7 +52,7 @@ declare const Combobox: ({
   btnClearLabel,
   onChange,
   classNames
-}: ComboboxProps) => react_jsx_runtime31.JSX.Element;
+}: ComboboxProps) => react_jsx_runtime26.JSX.Element;
 //#endregion
 export { Combobox, ComboboxProps };
 //# sourceMappingURL=Combobox.d.mts.map

package/dist/components/controls/combobox/Combobox.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.d.mts","names":[],"sources":["../../../../src/components/controls/combobox/Combobox.tsx"],"mappings":";;;;KAsCY,aAAA,GAAgB,IAAA,CAC1B,aAAA;EASA,QAAA,IAAY,KAAA;EACZ,SAAA;EACA,OAAA;IACE,EAAA;IACA,KAAA;EAAA;EAEF,KAAA;EACA,YAAA;EACA,aAAA;EACA,UAAA,GAAa,IAAA,CACX,WAAA,CAAY,aAAA;IAGZ,QAAA;IACA,MAAA;IACA,UAAA;MACE,UAAA;MACA,IAAA;MACA,IAAA;MACA,OAAA;QACE,OAAA;QACA,IAAA;MAAA;IAAA;IAGJ,MAAA;IACA,MAAA;IACA,KAAA;IACA,UAAA;EAAA;AAAA;AAAA,cAIS,QAAA;EAAY,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,QAAA;EAAA,WAAA;EAAA,YAAA;EAAA,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,OAAA;EAAA,SAAA;EAAA,OAAA;EAAA,OAAA;EAAA,QAAA;EAAA,KAAA;EAAA,YAAA;EAAA,aAAA;EAAA,aAAA;EAAA,QAAA;EAAA;AAAA,GAsBtB,aAAA,KAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Combobox.d.mts","names":[],"sources":["../../../../src/components/controls/combobox/Combobox.tsx"],"mappings":";;;;KAwCY,aAAA,GAAgB,IAAA,CAC1B,aAAA;EASA,QAAA,IAAY,KAAA;EACZ,SAAA;EACA,OAAA;IACE,EAAA;IACA,KAAA;EAAA;EAEF,KAAA;EACA,YAAA;EACA,aAAA;EACA,UAAA,GAAa,IAAA,CACX,WAAA,CAAY,aAAA;IAGZ,QAAA;IACA,MAAA;IACA,UAAA;MACE,UAAA;MACA,IAAA;MACA,IAAA;MACA,OAAA;QACE,OAAA;QACA,IAAA;MAAA;IAAA;IAGJ,MAAA;IACA,MAAA;IACA,KAAA;IACA,UAAA;EAAA;AAAA;AAAA,cAIS,QAAA;EAAY,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,QAAA;EAAA,WAAA;EAAA,YAAA;EAAA,WAAA;EAAA,SAAA;EAAA,SAAA;EAAA,OAAA;EAAA,SAAA;EAAA,OAAA;EAAA,OAAA;EAAA,QAAA;EAAA,KAAA;EAAA,YAAA;EAAA,aAAA;EAAA,aAAA;EAAA,QAAA;EAAA;AAAA,GAsBtB,aAAA,KAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/combobox/Combobox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.mjs","names":["combobox"],"sources":["../../../../src/components/controls/combobox/Combobox.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  comboboxOptions,\n  comboboxOption,\n  comboboxEmpty,\n  comboboxRoot,\n  comboboxOptionCreateIcon,\n  comboboxOptionCreateIconRoot,\n  comboboxOptionCreateIconIconRaw,\n  comboboxOptionCreateIconIconRawRoot,\n  combobox,\n  comboboxOptionCreate,\n  comboboxOptionCreateCreate,\n  comboboxTextInput,\n  comboboxTextInputRoot,\n  comboboxTextInputLabel,\n  comboboxTextInputDescription,\n  comboboxTextInputError,\n  comboboxTextInputWrapper,\n  comboboxTextInputInput,\n  comboboxTextInputSection,\n  comboboxTextInputRequired,\n  comboboxChevron,\n  comboboxChevronRoot,\n  comboboxChevronIcon,\n  comboboxChevronIconRoot,\n  comboboxClearButton,\n  comboboxClearButtonRoot,\n  comboboxClearButtonIcon,\n  comboboxClearButtonIconRaw,\n  comboboxClearButtonIconRawRoot,\n  comboboxScrollAreaAutosize,\n} from '@mage-ui/styled-system/recipes';\nimport { Dropdown } from '../dropdown/Dropdown';\nimport { Icon } from '@/components/data-display';\nimport type { DropdownProps } from '../dropdown/Dropdown';\n\nexport type ComboboxProps = Omit<\n  DropdownProps,\n  | 'classNames'\n  | 'onChange'\n  | 'onBlur'\n  | 'onFocus'\n  | 'onClick'\n  | 'setValue'\n  | 'children'\n> & {\n  onChange?: (value?: string) => void;\n  creatable?: boolean;\n  options: {\n    id: string | number;\n    value: string;\n  }[];\n  empty?: string | null;\n  emptyMessage?: string;\n  createNewItem?: string;\n  classNames?: Omit<\n    NonNullable<DropdownProps['classNames']>,\n    'dropdown' | 'search'\n  > & {\n    combobox?: string;\n    create?: string;\n    createIcon?: {\n      createIcon?: string;\n      root?: string;\n      icon?: string;\n      iconRaw?: {\n        iconRaw?: string;\n        root?: string;\n      };\n    };\n    header?: string;\n    footer?: string;\n    group?: string;\n    groupLabel?: string;\n  };\n};\n\nexport const Combobox = ({\n  name,\n  label,\n  description,\n  error,\n  disabled,\n  placeholder,\n  withinPortal,\n  keepMounted,\n  clearable,\n  creatable,\n  chevron,\n  startSlot,\n  endSlot,\n  options,\n  readOnly,\n  empty,\n  emptyMessage,\n  createNewItem,\n  btnClearLabel,\n  onChange,\n  classNames,\n}: ComboboxProps) => {\n  const [value, setValue] = useState<{ id: string | number; value: string }>({\n    id: '',\n    value: '',\n  });\n  const [search, setSearch] = useState('');\n\n  const shouldFilterOptions = options.every((item) => item.value !== search);\n  const exactOptionMatch = options.some(\n    (item) => item.value.toLowerCase() === search.toLowerCase().trim(),\n  );\n\n  const filteredOptions = shouldFilterOptions\n    ? options.filter((item) =>\n        item.value.toLowerCase().includes(search.toLowerCase().trim()),\n      )\n    : options;\n\n  const optionsList = filteredOptions.map(\n    (item: { id: string | number; value: string }) => (\n      <Dropdown.Option value={item.value} key={item.id}>\n        {item.value}\n      </Dropdown.Option>\n    ),\n  );\n\n  const isEmpty = !(search.length > 0);\n\n  return (\n    <Dropdown\n      name={name}\n      label={label}\n      description={description}\n      placeholder={placeholder}\n      disabled={disabled}\n      error={error}\n      withinPortal={withinPortal}\n      keepMounted={keepMounted}\n      clearable={clearable}\n      chevron={chevron}\n      readOnly={readOnly}\n      btnClearLabel={btnClearLabel}\n      setValue={(val, combobox) => {\n        const option = options.find((option) => option.value === val);\n\n        if (val === '$create') {\n          setValue({ id: '', value: search });\n          setSearch(search);\n          combobox.closeDropdown();\n          return;\n        }\n        if (val === undefined) {\n          setValue({ id: '', value: '' });\n          setSearch('');\n          return;\n        }\n\n        setValue(option ?? { id: '', value: '' });\n        setSearch(val);\n        combobox.closeDropdown();\n      }}\n      value={value?.value}\n      search={search}\n      startSlot={startSlot}\n      endSlot={endSlot}\n      onChange={(combobox, value) => {\n        combobox.openDropdown();\n        combobox.updateSelectedOptionIndex();\n        setSearch(value ?? '');\n        onChange?.(value ?? '');\n      }}\n      onClick={(combobox) => {\n        combobox.openDropdown();\n      }}\n      onFocus={(combobox) => combobox.openDropdown()}\n      onBlur={(combobox) => {\n        combobox.closeDropdown();\n        setSearch(isEmpty ? '' : value?.value);\n        if (isEmpty) {\n          setValue({\n            id: '',\n            value: '',\n          });\n        }\n      }}\n      classNames={{\n        dropdown: classNames?.combobox ?? combobox(),\n        root: classNames?.root ?? comboboxRoot(),\n        options: classNames?.options ?? comboboxOptions(),\n        option: classNames?.option ?? comboboxOption(),\n        empty: classNames?.empty ?? comboboxEmpty(),\n        scrollArea: {\n          scrollArea:\n            classNames?.scrollArea?.scrollArea ?? comboboxScrollAreaAutosize(),\n        },\n        textInput: {\n          root:\n            classNames?.textInput?.root ??\n            cx(comboboxTextInput(), comboboxTextInputRoot()),\n          label: classNames?.textInput?.label ?? comboboxTextInputLabel(),\n          description:\n            classNames?.textInput?.description ??\n            comboboxTextInputDescription(),\n          error: classNames?.textInput?.error ?? comboboxTextInputError(),\n          wrapper: classNames?.textInput?.wrapper ?? comboboxTextInputWrapper(),\n          input: classNames?.textInput?.input ?? comboboxTextInputInput(),\n          section: classNames?.textInput?.section ?? comboboxTextInputSection(),\n          required:\n            classNames?.textInput?.required ?? comboboxTextInputRequired(),\n          endSlot: {\n            chevron: {\n              iconWrapped:\n                classNames?.textInput?.endSlot?.chevron?.iconWrapped ??\n                comboboxChevron(),\n              root:\n                classNames?.textInput?.endSlot?.chevron?.root ??\n                comboboxChevronRoot(),\n              open: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.chevron?.open?.iconRaw ??\n                  comboboxChevronIcon(),\n                root:\n                  classNames?.textInput?.endSlot?.chevron?.open?.root ??\n                  comboboxChevronIconRoot(),\n              },\n              close: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.chevron?.close?.iconRaw ??\n                  comboboxChevronIcon(),\n                root:\n                  classNames?.textInput?.endSlot?.chevron?.close?.root ??\n                  comboboxChevronIconRoot({ invert: true }),\n              },\n            },\n            clearButton: {\n              buttonIcon:\n                classNames?.textInput?.endSlot?.clearButton?.buttonIcon ??\n                comboboxClearButton(),\n              root:\n                classNames?.textInput?.endSlot?.clearButton?.root ??\n                comboboxClearButtonRoot(),\n              icon:\n                classNames?.textInput?.endSlot?.clearButton?.icon ??\n                comboboxClearButtonIcon(),\n              iconRaw: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw\n                    ?.iconRaw ?? comboboxClearButtonIconRaw(),\n                root:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw?.root ??\n                  comboboxClearButtonIconRawRoot(),\n              },\n            },\n          },\n        },\n      }}\n    >\n      <Dropdown.Options>\n        {optionsList.length > 0\n          ? optionsList\n          : creatable\n          ? !exactOptionMatch &&\n            search.trim().length > 0 && (\n              <Dropdown.Option\n                classNames={{\n                  option: cx(\n                    classNames?.create ?? comboboxOptionCreate(),\n                    comboboxOptionCreateCreate(),\n                  ),\n                }}\n                value='$create'\n              >\n                <Icon\n                  path='/icons/sprite-mage.svg'\n                  name='mage-combobox-plus'\n                  classNames={{\n                    icon:\n                      classNames?.createIcon?.createIcon ??\n                      comboboxOptionCreateIcon(),\n\n                    root:\n                      classNames?.createIcon?.root ??\n                      comboboxOptionCreateIconRoot(),\n                    iconRaw: {\n                      iconRaw:\n                        classNames?.createIcon?.iconRaw?.iconRaw ??\n                        comboboxOptionCreateIconIconRaw(),\n                      root:\n                        classNames?.createIcon?.iconRaw?.root ??\n                        comboboxOptionCreateIconIconRawRoot(),\n                    },\n                  }}\n                />\n                {createNewItem ?? 'Create'} {search}\n              </Dropdown.Option>\n            )\n          : empty !== null && (\n              <Dropdown.Empty\n                classNames={{ empty: classNames?.empty ?? comboboxEmpty() }}\n              >\n                {empty ?? (emptyMessage || 'No results')}\n              </Dropdown.Empty>\n            )}\n      </Dropdown.Options>\n    </Dropdown>\n  );\n};\n"],"mappings":"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"}
+{"version":3,"file":"Combobox.mjs","names":["combobox"],"sources":["../../../../src/components/controls/combobox/Combobox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  combobox,\n  comboboxChevron,\n  comboboxChevronIcon,\n  comboboxChevronIconRoot,\n  comboboxChevronRoot,\n  comboboxClearButton,\n  comboboxClearButtonIcon,\n  comboboxClearButtonIconRaw,\n  comboboxClearButtonIconRawRoot,\n  comboboxClearButtonRoot,\n  comboboxEmpty,\n  comboboxOption,\n  comboboxOptionCreate,\n  comboboxOptionCreateCreate,\n  comboboxOptionCreateIcon,\n  comboboxOptionCreateIconIconRaw,\n  comboboxOptionCreateIconIconRawRoot,\n  comboboxOptionCreateIconRoot,\n  comboboxOptions,\n  comboboxRoot,\n  comboboxScrollAreaAutosize,\n  comboboxTextInput,\n  comboboxTextInputDescription,\n  comboboxTextInputError,\n  comboboxTextInputInput,\n  comboboxTextInputLabel,\n  comboboxTextInputRequired,\n  comboboxTextInputRoot,\n  comboboxTextInputSection,\n  comboboxTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport { Icon } from '@/components/data-display';\n\nimport type { DropdownProps } from '../dropdown/Dropdown';\nimport { Dropdown } from '../dropdown/Dropdown';\n\nexport type ComboboxProps = Omit<\n  DropdownProps,\n  | 'classNames'\n  | 'onChange'\n  | 'onBlur'\n  | 'onFocus'\n  | 'onClick'\n  | 'setValue'\n  | 'children'\n> & {\n  onChange?: (value?: string) => void;\n  creatable?: boolean;\n  options: {\n    id: string | number;\n    value: string;\n  }[];\n  empty?: string | null;\n  emptyMessage?: string;\n  createNewItem?: string;\n  classNames?: Omit<\n    NonNullable<DropdownProps['classNames']>,\n    'dropdown' | 'search'\n  > & {\n    combobox?: string;\n    create?: string;\n    createIcon?: {\n      createIcon?: string;\n      root?: string;\n      icon?: string;\n      iconRaw?: {\n        iconRaw?: string;\n        root?: string;\n      };\n    };\n    header?: string;\n    footer?: string;\n    group?: string;\n    groupLabel?: string;\n  };\n};\n\nexport const Combobox = ({\n  name,\n  label,\n  description,\n  error,\n  disabled,\n  placeholder,\n  withinPortal,\n  keepMounted,\n  clearable,\n  creatable,\n  chevron,\n  startSlot,\n  endSlot,\n  options,\n  readOnly,\n  empty,\n  emptyMessage,\n  createNewItem,\n  btnClearLabel,\n  onChange,\n  classNames,\n}: ComboboxProps) => {\n  const [value, setValue] = useState<{ id: string | number; value: string }>({\n    id: '',\n    value: '',\n  });\n  const [search, setSearch] = useState('');\n\n  const shouldFilterOptions = options.every((item) => item.value !== search);\n  const exactOptionMatch = options.some(\n    (item) => item.value.toLowerCase() === search.toLowerCase().trim(),\n  );\n\n  const filteredOptions = shouldFilterOptions\n    ? options.filter((item) =>\n        item.value.toLowerCase().includes(search.toLowerCase().trim()),\n      )\n    : options;\n\n  const optionsList = filteredOptions.map(\n    (item: { id: string | number; value: string }) => (\n      <Dropdown.Option value={item.value} key={item.id}>\n        {item.value}\n      </Dropdown.Option>\n    ),\n  );\n\n  const isEmpty = !(search.length > 0);\n\n  return (\n    <Dropdown\n      name={name}\n      label={label}\n      description={description}\n      placeholder={placeholder}\n      disabled={disabled}\n      error={error}\n      withinPortal={withinPortal}\n      keepMounted={keepMounted}\n      clearable={clearable}\n      chevron={chevron}\n      readOnly={readOnly}\n      btnClearLabel={btnClearLabel}\n      setValue={(val, combobox) => {\n        const option = options.find((option) => option.value === val);\n\n        if (val === '$create') {\n          setValue({ id: '', value: search });\n          setSearch(search);\n          combobox.closeDropdown();\n          return;\n        }\n        if (val === undefined) {\n          setValue({ id: '', value: '' });\n          setSearch('');\n          return;\n        }\n\n        setValue(option ?? { id: '', value: '' });\n        setSearch(val);\n        combobox.closeDropdown();\n      }}\n      value={value?.value}\n      search={search}\n      startSlot={startSlot}\n      endSlot={endSlot}\n      onChange={(combobox, value) => {\n        combobox.openDropdown();\n        combobox.updateSelectedOptionIndex();\n        setSearch(value ?? '');\n        onChange?.(value ?? '');\n      }}\n      onClick={(combobox) => {\n        combobox.openDropdown();\n      }}\n      onFocus={(combobox) => combobox.openDropdown()}\n      onBlur={(combobox) => {\n        combobox.closeDropdown();\n        setSearch(isEmpty ? '' : value?.value);\n        if (isEmpty) {\n          setValue({\n            id: '',\n            value: '',\n          });\n        }\n      }}\n      classNames={{\n        dropdown: classNames?.combobox ?? combobox(),\n        root: classNames?.root ?? comboboxRoot(),\n        options: classNames?.options ?? comboboxOptions(),\n        option: classNames?.option ?? comboboxOption(),\n        empty: classNames?.empty ?? comboboxEmpty(),\n        scrollArea: {\n          scrollArea:\n            classNames?.scrollArea?.scrollArea ?? comboboxScrollAreaAutosize(),\n        },\n        textInput: {\n          root:\n            classNames?.textInput?.root ??\n            cx(comboboxTextInput(), comboboxTextInputRoot()),\n          label: classNames?.textInput?.label ?? comboboxTextInputLabel(),\n          description:\n            classNames?.textInput?.description ??\n            comboboxTextInputDescription(),\n          error: classNames?.textInput?.error ?? comboboxTextInputError(),\n          wrapper: classNames?.textInput?.wrapper ?? comboboxTextInputWrapper(),\n          input: classNames?.textInput?.input ?? comboboxTextInputInput(),\n          section: classNames?.textInput?.section ?? comboboxTextInputSection(),\n          required:\n            classNames?.textInput?.required ?? comboboxTextInputRequired(),\n          endSlot: {\n            chevron: {\n              iconWrapped:\n                classNames?.textInput?.endSlot?.chevron?.iconWrapped ??\n                comboboxChevron(),\n              root:\n                classNames?.textInput?.endSlot?.chevron?.root ??\n                comboboxChevronRoot(),\n              open: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.chevron?.open?.iconRaw ??\n                  comboboxChevronIcon(),\n                root:\n                  classNames?.textInput?.endSlot?.chevron?.open?.root ??\n                  comboboxChevronIconRoot(),\n              },\n              close: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.chevron?.close?.iconRaw ??\n                  comboboxChevronIcon(),\n                root:\n                  classNames?.textInput?.endSlot?.chevron?.close?.root ??\n                  comboboxChevronIconRoot({ invert: true }),\n              },\n            },\n            clearButton: {\n              buttonIcon:\n                classNames?.textInput?.endSlot?.clearButton?.buttonIcon ??\n                comboboxClearButton(),\n              root:\n                classNames?.textInput?.endSlot?.clearButton?.root ??\n                comboboxClearButtonRoot(),\n              icon:\n                classNames?.textInput?.endSlot?.clearButton?.icon ??\n                comboboxClearButtonIcon(),\n              iconRaw: {\n                iconRaw:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw\n                    ?.iconRaw ?? comboboxClearButtonIconRaw(),\n                root:\n                  classNames?.textInput?.endSlot?.clearButton?.iconRaw?.root ??\n                  comboboxClearButtonIconRawRoot(),\n              },\n            },\n          },\n        },\n      }}\n    >\n      <Dropdown.Options>\n        {optionsList.length > 0\n          ? optionsList\n          : creatable\n            ? !exactOptionMatch &&\n              search.trim().length > 0 && (\n                <Dropdown.Option\n                  classNames={{\n                    option: cx(\n                      classNames?.create ?? comboboxOptionCreate(),\n                      comboboxOptionCreateCreate(),\n                    ),\n                  }}\n                  value='$create'\n                >\n                  <Icon\n                    path='/icons/sprite-mage.svg'\n                    name='mage-combobox-plus'\n                    classNames={{\n                      icon:\n                        classNames?.createIcon?.createIcon ??\n                        comboboxOptionCreateIcon(),\n\n                      root:\n                        classNames?.createIcon?.root ??\n                        comboboxOptionCreateIconRoot(),\n                      iconRaw: {\n                        iconRaw:\n                          classNames?.createIcon?.iconRaw?.iconRaw ??\n                          comboboxOptionCreateIconIconRaw(),\n                        root:\n                          classNames?.createIcon?.iconRaw?.root ??\n                          comboboxOptionCreateIconIconRawRoot(),\n                      },\n                    }}\n                  />\n                  {createNewItem ?? 'Create'} {search}\n                </Dropdown.Option>\n              )\n            : empty !== null && (\n                <Dropdown.Empty\n                  classNames={{ empty: classNames?.empty ?? comboboxEmpty() }}\n                >\n                  {empty ?? (emptyMessage || 'No results')}\n                </Dropdown.Empty>\n              )}\n      </Dropdown.Options>\n    </Dropdown>\n  );\n};\n"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.mts","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"mappings":";;;;KAoDY,eAAA,GAAkB,IAAA,CAAK,cAAA;EACjC,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,UAAA,GAAa,oBAAA;EACb,KAAA,GAAQ,SAAA;EACR,QAAA,IAAY,IAAA,EAAM,IAAA;EAClB,MAAA;EACA,WAAA;EACA,cAAA;EACA,OAAA,GAAU,IAAA;EACV,OAAA,GAAU,IAAA;EACV,SAAA;AAAA;AAAA,cAGW,UAAA;EAAc,UAAA;EAAA,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,KAAA;EAAA,QAAA;EAAA,KAAA;EAAA,QAAA;EAAA,MAAA;EAAA,WAAA;EAAA,cAAA;EAAA,OAAA;EAAA,OAAA;EAAA;AAAA,GAgBxB,eAAA,KAAkB,SAAA;AAAA,KAmChB,oBAAA,GACH,mBAAA,GACA,sBAAA,GACA,4BAAA,GACA,yBAAA,GACA,0BAAA,GACA,2BAAA,GACA,gCAAA,GACA,+BAAA,GACA,qBAAA;AAAA,KAEG,mBAAA;EACH,UAAA;EACA,IAAA;EACA,OAAA;EACA,KAAA;EACA,KAAA;EACA,KAAA;EACA,WAAA;EACA,WAAA;EACA,OAAA;EACA,QAAA;EACA,cAAA;AAAA;AAAA,KA+CG,4BAAA;EACH,qBAAA;EACA,cAAA;EACA,mBAAA;EACA,yBAAA;AAAA;AAAA,KAmBG,sBAAA;EACH,WAAA;EACA,WAAA;EACA,YAAA;AAAA;AAAA,KAWG,yBAAA;EACH,GAAA;AAAA;AAAA,KASG,0BAAA;EACH,WAAA;EACA,OAAA;EACA,UAAA;AAAA;AAAA,KAWG,2BAAA;EACH,KAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;AAAA;AAAA,KAaG,gCAAA;EACH,UAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;AAAA;AAAA,KAeG,+BAAA;EACH,SAAA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;AAAA;AAAA,KAeG,qBAAA;EACH,QAAA;EACA,KAAA;EACA,OAAA;AAAA"}
+{"version":3,"file":"DatePicker.d.mts","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"mappings":";;;;KAoDY,eAAA,GAAkB,IAAA,CAC5B,cAAA;EAGA,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,UAAA,GAAa,oBAAA;EACb,KAAA,GAAQ,SAAA;EACR,QAAA,IAAY,IAAA,EAAM,IAAA;EAClB,MAAA;EACA,WAAA;EACA,cAAA;EACA,OAAA,GAAU,IAAA;EACV,OAAA,GAAU,IAAA;EACV,SAAA;AAAA;AAAA,cAGW,UAAA;EAAc,UAAA;EAAA,IAAA;EAAA,KAAA;EAAA,WAAA;EAAA,WAAA;EAAA,KAAA;EAAA,QAAA;EAAA,KAAA;EAAA,QAAA;EAAA,MAAA;EAAA,WAAA;EAAA,cAAA;EAAA,OAAA;EAAA,OAAA;EAAA;AAAA,GAgBxB,eAAA,KAAkB,SAAA;AAAA,KAmChB,oBAAA,GAAuB,mBAAA,GAC1B,sBAAA,GACA,4BAAA,GACA,yBAAA,GACA,0BAAA,GACA,2BAAA,GACA,gCAAA,GACA,+BAAA,GACA,qBAAA;AAAA,KAEG,mBAAA;EACH,UAAA;EACA,IAAA;EACA,OAAA;EACA,KAAA;EACA,KAAA;EACA,KAAA;EACA,WAAA;EACA,WAAA;EACA,OAAA;EACA,QAAA;EACA,cAAA;AAAA;AAAA,KA8CG,4BAAA;EACH,qBAAA;EACA,cAAA;EACA,mBAAA;EACA,yBAAA;AAAA;AAAA,KAkBG,sBAAA;EACH,WAAA;EACA,WAAA;EACA,YAAA;AAAA;AAAA,KAWG,yBAAA;EACH,GAAA;AAAA;AAAA,KASG,0BAAA;EACH,WAAA;EACA,OAAA;EACA,UAAA;AAAA;AAAA,KAWG,2BAAA;EACH,KAAA;EACA,QAAA;EACA,SAAA;EACA,UAAA;EACA,UAAA;AAAA;AAAA,KAaG,gCAAA;EACH,UAAA;EACA,aAAA;EACA,cAAA;EACA,iBAAA;AAAA;AAAA,KAeG,+BAAA;EACH,SAAA;EACA,YAAA;EACA,aAAA;EACA,gBAAA;AAAA;AAAA,KAeG,qBAAA;EACH,QAAA;EACA,KAAA;EACA,OAAA;AAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.mjs","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  datePicker,\n  datePickerArrow,\n  datePickerButtonIcon,\n  datePickerButtonIconRoot,\n  datePickerCalendarHeader,\n  datePickerCalendarHeaderControl,\n  datePickerCalendarHeaderControlIcon,\n  datePickerCalendarHeaderLevel,\n  datePickerDatePickerRoot,\n  datePickerDay,\n  datePickerDescription,\n  datePickerDropdown,\n  datePickerError,\n  datePickerIconIcon,\n  datePickerIconIconRaw,\n  datePickerIconIconRawRoot,\n  datePickerIconRoot,\n  datePickerInput,\n  datePickerLabel,\n  datePickerLevelsGroup,\n  datePickerMonth,\n  datePickerMonthCell,\n  datePickerMonthRow,\n  datePickerMonthsList,\n  datePickerMonthsListCell,\n  datePickerMonthsListControl,\n  datePickerMonthsListRow,\n  datePickerMonthTbody,\n  datePickerMonthThead,\n  datePickerOverlay,\n  datePickerPlaceholder,\n  datePickerPresetButton,\n  datePickerPresetsList,\n  datePickerRequired,\n  datePickerRoot,\n  datePickerSection,\n  datePickerWeekday,\n  datePickerWeekdaysRow,\n  datePickerWeekNumber,\n  datePickerWrapper,\n  datePickerYearsList,\n  datePickerYearsListCell,\n  datePickerYearsListControl,\n  datePickerYearsListRow,\n} from '@mage-ui/styled-system/recipes';\nimport { DatePickerInput, type DateValue } from '@mantine/dates';\nimport { Icon, type IconProps } from '@/components/data-display';\n\nexport type DatePickerProps = Omit<ComponentProps<'input'>, 'size' | 'value' | 'onChange'> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  classNames?: DatePickerClassNames;\n  value?: DateValue;\n  onChange?: (date: Date | string | null) => void;\n  locale?: string;\n  valueFormat?: string;\n  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  minDate?: Date;\n  maxDate?: Date;\n  clearable?: boolean;\n};\n\nexport const DatePicker = ({\n  classNames,\n  name,\n  label,\n  placeholder,\n  description,\n  error,\n  required,\n  value,\n  onChange,\n  locale,\n  valueFormat,\n  firstDayOfWeek,\n  minDate,\n  maxDate,\n  clearable,\n}: DatePickerProps): ReactNode => {\n  return (\n    <DatePickerInput\n      name={name}\n      label={label}\n      placeholder={placeholder}\n      description={description}\n      error={error}\n      withAsterisk={required}\n      value={value}\n      onChange={onChange}\n      locale={locale}\n      valueFormat={valueFormat}\n      firstDayOfWeek={firstDayOfWeek}\n      minDate={minDate}\n      maxDate={maxDate}\n      clearable={clearable}\n      classNames={datePickerClassNames(classNames)}\n      popoverProps={{\n        classNames: popoverClassNames(classNames),\n      }}\n      leftSection={\n        <Icon\n          path='/icons/sprite-mage.svg'\n          name='mage-date-picker-calendar'\n          classNames={iconClassNames(classNames)}\n        />\n      }\n      clearButtonProps={{\n        className: buttonIconClassNames(),\n      }}\n    />\n  );\n};\n\ntype DatePickerClassNames =\n  InputClassNamesType &\n  CalendarClassNamesType &\n  CalendarHeaderClassNamesType &\n  CalendarDayClassNamesType &\n  CalendarWeekClassNamesType &\n  CalendarMonthClassNamesType &\n  CalendarMonthsListClassNamesType &\n  CalendarYearsListClassNamesType &\n  PopoverClassNamesType;\n\ntype InputClassNamesType = {\n  datePicker?: string;\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  required?: string;\n  datePickerRoot?: string;\n};\n\nconst inputClassNames = (classNames?: InputClassNamesType) => {\n  return {\n    root: cx(\n      classNames?.datePicker ?? datePicker(),\n      classNames?.root ?? datePickerRoot(),\n    ),\n    wrapper: classNames?.wrapper ?? datePickerWrapper(),\n    input: cx(classNames?.input ?? datePickerInput(), 'peer'),\n    label: classNames?.label ?? datePickerLabel(),\n    error: classNames?.error ?? datePickerError(),\n    description: classNames?.description ?? datePickerDescription(),\n    placeholder: classNames?.placeholder ?? datePickerPlaceholder(),\n    section: cx(classNames?.section ?? datePickerSection(), 'group'),\n    required: classNames?.required ?? datePickerRequired(),\n    datePickerRoot: classNames?.datePickerRoot ?? datePickerDatePickerRoot(),\n  };\n};\n\ntype IconClassNamesType = IconProps['classNames'];\n\nconst iconClassNames = (classNames?: IconClassNamesType) => {\n  return {\n    icon: classNames?.icon ?? datePickerIconIcon(),\n    root: classNames?.root ?? datePickerIconRoot(),\n    iconRaw: {\n      iconRaw: classNames?.iconRaw?.iconRaw ?? datePickerIconIconRaw(),\n      root: classNames?.iconRaw?.root ?? datePickerIconIconRawRoot(),\n    },\n  };\n}\n\ntype ButtonIconClassNamesType = {\n  buttonIcon?: string;\n  buttonIconRoot?: string;\n}\n\nconst buttonIconClassNames = (classNames?: ButtonIconClassNamesType) => {\n  return cx(\n    classNames?.buttonIcon ?? datePickerButtonIcon(), \n    classNames?.buttonIconRoot ?? datePickerButtonIconRoot(),\n  );\n}\n\n\ntype CalendarHeaderClassNamesType = {\n  calendarHeaderControl?: string;\n  calendarHeader?: string;\n  calendarHeaderLevel?: string;\n  calendarHeaderControlIcon?: string;\n};\n\nconst calendarHeaderClassNames = (\n  classNames?: CalendarHeaderClassNamesType,\n) => {\n  return {\n    calendarHeader:\n      classNames?.calendarHeader ?? datePickerCalendarHeader(),\n    calendarHeaderControl:\n      classNames?.calendarHeaderControl ?? datePickerCalendarHeaderControl(),\n    calendarHeaderLevel:\n      classNames?.calendarHeaderLevel ?? datePickerCalendarHeaderLevel(),\n    calendarHeaderControlIcon:\n      classNames?.calendarHeaderControlIcon ??\n      datePickerCalendarHeaderControlIcon(),\n  };\n};\n\ntype CalendarClassNamesType = {\n  levelsGroup?: string;\n  presetsList?: string;\n  presetButton?: string;\n};\n\nconst calendarClassNames = (classNames?: CalendarClassNamesType) => {\n  return {\n    levelsGroup: classNames?.levelsGroup ?? datePickerLevelsGroup(),\n    presetsList: classNames?.presetsList ?? datePickerPresetsList(),\n    presetButton: classNames?.presetButton ?? datePickerPresetButton(),\n  };\n}\n\ntype CalendarDayClassNamesType = {\n  day?: string;\n};\n\nconst calendarDayClassNames = (classNames?: CalendarDayClassNamesType) => {\n  return {\n    day: classNames?.day ?? datePickerDay(),\n  };\n}\n\ntype CalendarWeekClassNamesType = {\n  weekDaysRow?: string;\n  weekDay?: string;\n  weekNumber?: string;\n};\n\nconst calendarWeekClassNames = (classNames?: CalendarWeekClassNamesType) => {\n  return {\n    weekdaysRow: classNames?.weekDaysRow ?? datePickerWeekdaysRow(),\n    weekday: classNames?.weekDay ?? datePickerWeekday(),\n    weekNumber: classNames?.weekNumber ?? datePickerWeekNumber(),\n  };\n}\n\ntype CalendarMonthClassNamesType = {\n  month?: string;\n  monthRow?: string;\n  monthCell?: string;\n  monthThead?: string;\n  monthTbody?: string;\n};\n\nconst calendarMonthClassNames = (classNames?: CalendarMonthClassNamesType) => {\n  return {\n    month: classNames?.month ?? datePickerMonth(),\n    monthRow: classNames?.monthRow ?? datePickerMonthRow(),\n    monthThead: classNames?.monthThead ?? datePickerMonthThead(),\n    monthTbody: classNames?.monthTbody ?? datePickerMonthTbody(),\n    monthCell: classNames?.monthCell ?? datePickerMonthCell(),\n  };\n};\n\ntype CalendarMonthsListClassNamesType = {\n  monthsList?: string;\n  monthsListRow?: string;\n  monthsListCell?: string;\n  monthsListControl?: string;\n};\n\nconst calendarMonthsListClassNames = (\n  classNames?: CalendarMonthsListClassNamesType,\n) => {\n  return {\n    monthsList: classNames?.monthsList ?? datePickerMonthsList(),\n    monthsListRow: classNames?.monthsListRow ?? datePickerMonthsListRow(),\n    monthsListCell: classNames?.monthsListCell ?? datePickerMonthsListCell(),\n    monthsListControl:\n      classNames?.monthsListControl ?? datePickerMonthsListControl(),\n  };\n};\n\ntype CalendarYearsListClassNamesType = {\n  yearsList?: string;\n  yearsListRow?: string;\n  yearsListCell?: string;\n  yearsListControl?: string;\n};\n\nconst calendarYearsListClassNames = (\n  classNames?: CalendarYearsListClassNamesType,\n) => {\n  return {\n    yearsList: classNames?.yearsList ?? datePickerYearsList(),\n    yearsListRow: classNames?.yearsListRow ?? datePickerYearsListRow(),\n    yearsListCell: classNames?.yearsListCell ?? datePickerYearsListCell(),\n    yearsListControl:\n      classNames?.yearsListControl ?? datePickerYearsListControl(),\n  };\n};\n\ntype PopoverClassNamesType = {\n  dropdown?: string;\n  arrow?: string;\n  overlay?: string;\n};\n\nconst popoverClassNames = (classNames?: PopoverClassNamesType) => {\n  return {\n    dropdown: classNames?.dropdown ?? datePickerDropdown(),\n    arrow: classNames?.arrow ?? datePickerArrow(),\n    overlay: classNames?.overlay ?? datePickerOverlay(),\n  };\n};\n\nconst datePickerClassNames = (classNames?: DatePickerClassNames) => {\n  return {\n    ...inputClassNames(classNames),\n    ...calendarClassNames(classNames),\n    ...calendarHeaderClassNames(classNames),\n    ...calendarDayClassNames(classNames),\n    ...calendarWeekClassNames(classNames),\n    ...calendarMonthClassNames(classNames),\n    ...calendarMonthsListClassNames(classNames),\n    ...calendarYearsListClassNames(classNames),\n  };\n};\n"],"mappings":"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"}
+{"version":3,"file":"DatePicker.mjs","names":[],"sources":["../../../../src/components/controls/date-picker/DatePicker.tsx"],"sourcesContent":["import type { ComponentProps, ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  datePicker,\n  datePickerArrow,\n  datePickerButtonIcon,\n  datePickerButtonIconRoot,\n  datePickerCalendarHeader,\n  datePickerCalendarHeaderControl,\n  datePickerCalendarHeaderControlIcon,\n  datePickerCalendarHeaderLevel,\n  datePickerDatePickerRoot,\n  datePickerDay,\n  datePickerDescription,\n  datePickerDropdown,\n  datePickerError,\n  datePickerIconIcon,\n  datePickerIconIconRaw,\n  datePickerIconIconRawRoot,\n  datePickerIconRoot,\n  datePickerInput,\n  datePickerLabel,\n  datePickerLevelsGroup,\n  datePickerMonth,\n  datePickerMonthCell,\n  datePickerMonthRow,\n  datePickerMonthsList,\n  datePickerMonthsListCell,\n  datePickerMonthsListControl,\n  datePickerMonthsListRow,\n  datePickerMonthTbody,\n  datePickerMonthThead,\n  datePickerOverlay,\n  datePickerPlaceholder,\n  datePickerPresetButton,\n  datePickerPresetsList,\n  datePickerRequired,\n  datePickerRoot,\n  datePickerSection,\n  datePickerWeekday,\n  datePickerWeekdaysRow,\n  datePickerWeekNumber,\n  datePickerWrapper,\n  datePickerYearsList,\n  datePickerYearsListCell,\n  datePickerYearsListControl,\n  datePickerYearsListRow,\n} from '@mage-ui/styled-system/recipes';\nimport { DatePickerInput, type DateValue } from '@mantine/dates';\nimport { Icon, type IconProps } from '@/components/data-display';\n\nexport type DatePickerProps = Omit<\n  ComponentProps<'input'>,\n  'size' | 'value' | 'onChange'\n> & {\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  classNames?: DatePickerClassNames;\n  value?: DateValue;\n  onChange?: (date: Date | string | null) => void;\n  locale?: string;\n  valueFormat?: string;\n  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;\n  minDate?: Date;\n  maxDate?: Date;\n  clearable?: boolean;\n};\n\nexport const DatePicker = ({\n  classNames,\n  name,\n  label,\n  placeholder,\n  description,\n  error,\n  required,\n  value,\n  onChange,\n  locale,\n  valueFormat,\n  firstDayOfWeek,\n  minDate,\n  maxDate,\n  clearable,\n}: DatePickerProps): ReactNode => {\n  return (\n    <DatePickerInput\n      name={name}\n      label={label}\n      placeholder={placeholder}\n      description={description}\n      error={error}\n      withAsterisk={required}\n      value={value}\n      onChange={onChange}\n      locale={locale}\n      valueFormat={valueFormat}\n      firstDayOfWeek={firstDayOfWeek}\n      minDate={minDate}\n      maxDate={maxDate}\n      clearable={clearable}\n      classNames={datePickerClassNames(classNames)}\n      popoverProps={{\n        classNames: popoverClassNames(classNames),\n      }}\n      leftSection={\n        <Icon\n          path='/icons/sprite-mage.svg'\n          name='mage-date-picker-calendar'\n          classNames={iconClassNames(classNames)}\n        />\n      }\n      clearButtonProps={{\n        className: buttonIconClassNames(),\n      }}\n    />\n  );\n};\n\ntype DatePickerClassNames = InputClassNamesType &\n  CalendarClassNamesType &\n  CalendarHeaderClassNamesType &\n  CalendarDayClassNamesType &\n  CalendarWeekClassNamesType &\n  CalendarMonthClassNamesType &\n  CalendarMonthsListClassNamesType &\n  CalendarYearsListClassNamesType &\n  PopoverClassNamesType;\n\ntype InputClassNamesType = {\n  datePicker?: string;\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  required?: string;\n  datePickerRoot?: string;\n};\n\nconst inputClassNames = (classNames?: InputClassNamesType) => {\n  return {\n    root: cx(\n      classNames?.datePicker ?? datePicker(),\n      classNames?.root ?? datePickerRoot(),\n    ),\n    wrapper: classNames?.wrapper ?? datePickerWrapper(),\n    input: cx(classNames?.input ?? datePickerInput(), 'peer'),\n    label: classNames?.label ?? datePickerLabel(),\n    error: classNames?.error ?? datePickerError(),\n    description: classNames?.description ?? datePickerDescription(),\n    placeholder: classNames?.placeholder ?? datePickerPlaceholder(),\n    section: cx(classNames?.section ?? datePickerSection(), 'group'),\n    required: classNames?.required ?? datePickerRequired(),\n    datePickerRoot: classNames?.datePickerRoot ?? datePickerDatePickerRoot(),\n  };\n};\n\ntype IconClassNamesType = IconProps['classNames'];\n\nconst iconClassNames = (classNames?: IconClassNamesType) => {\n  return {\n    icon: classNames?.icon ?? datePickerIconIcon(),\n    root: classNames?.root ?? datePickerIconRoot(),\n    iconRaw: {\n      iconRaw: classNames?.iconRaw?.iconRaw ?? datePickerIconIconRaw(),\n      root: classNames?.iconRaw?.root ?? datePickerIconIconRawRoot(),\n    },\n  };\n};\n\ntype ButtonIconClassNamesType = {\n  buttonIcon?: string;\n  buttonIconRoot?: string;\n};\n\nconst buttonIconClassNames = (classNames?: ButtonIconClassNamesType) => {\n  return cx(\n    classNames?.buttonIcon ?? datePickerButtonIcon(),\n    classNames?.buttonIconRoot ?? datePickerButtonIconRoot(),\n  );\n};\n\ntype CalendarHeaderClassNamesType = {\n  calendarHeaderControl?: string;\n  calendarHeader?: string;\n  calendarHeaderLevel?: string;\n  calendarHeaderControlIcon?: string;\n};\n\nconst calendarHeaderClassNames = (\n  classNames?: CalendarHeaderClassNamesType,\n) => {\n  return {\n    calendarHeader: classNames?.calendarHeader ?? datePickerCalendarHeader(),\n    calendarHeaderControl:\n      classNames?.calendarHeaderControl ?? datePickerCalendarHeaderControl(),\n    calendarHeaderLevel:\n      classNames?.calendarHeaderLevel ?? datePickerCalendarHeaderLevel(),\n    calendarHeaderControlIcon:\n      classNames?.calendarHeaderControlIcon ??\n      datePickerCalendarHeaderControlIcon(),\n  };\n};\n\ntype CalendarClassNamesType = {\n  levelsGroup?: string;\n  presetsList?: string;\n  presetButton?: string;\n};\n\nconst calendarClassNames = (classNames?: CalendarClassNamesType) => {\n  return {\n    levelsGroup: classNames?.levelsGroup ?? datePickerLevelsGroup(),\n    presetsList: classNames?.presetsList ?? datePickerPresetsList(),\n    presetButton: classNames?.presetButton ?? datePickerPresetButton(),\n  };\n};\n\ntype CalendarDayClassNamesType = {\n  day?: string;\n};\n\nconst calendarDayClassNames = (classNames?: CalendarDayClassNamesType) => {\n  return {\n    day: classNames?.day ?? datePickerDay(),\n  };\n};\n\ntype CalendarWeekClassNamesType = {\n  weekDaysRow?: string;\n  weekDay?: string;\n  weekNumber?: string;\n};\n\nconst calendarWeekClassNames = (classNames?: CalendarWeekClassNamesType) => {\n  return {\n    weekdaysRow: classNames?.weekDaysRow ?? datePickerWeekdaysRow(),\n    weekday: classNames?.weekDay ?? datePickerWeekday(),\n    weekNumber: classNames?.weekNumber ?? datePickerWeekNumber(),\n  };\n};\n\ntype CalendarMonthClassNamesType = {\n  month?: string;\n  monthRow?: string;\n  monthCell?: string;\n  monthThead?: string;\n  monthTbody?: string;\n};\n\nconst calendarMonthClassNames = (classNames?: CalendarMonthClassNamesType) => {\n  return {\n    month: classNames?.month ?? datePickerMonth(),\n    monthRow: classNames?.monthRow ?? datePickerMonthRow(),\n    monthThead: classNames?.monthThead ?? datePickerMonthThead(),\n    monthTbody: classNames?.monthTbody ?? datePickerMonthTbody(),\n    monthCell: classNames?.monthCell ?? datePickerMonthCell(),\n  };\n};\n\ntype CalendarMonthsListClassNamesType = {\n  monthsList?: string;\n  monthsListRow?: string;\n  monthsListCell?: string;\n  monthsListControl?: string;\n};\n\nconst calendarMonthsListClassNames = (\n  classNames?: CalendarMonthsListClassNamesType,\n) => {\n  return {\n    monthsList: classNames?.monthsList ?? datePickerMonthsList(),\n    monthsListRow: classNames?.monthsListRow ?? datePickerMonthsListRow(),\n    monthsListCell: classNames?.monthsListCell ?? datePickerMonthsListCell(),\n    monthsListControl:\n      classNames?.monthsListControl ?? datePickerMonthsListControl(),\n  };\n};\n\ntype CalendarYearsListClassNamesType = {\n  yearsList?: string;\n  yearsListRow?: string;\n  yearsListCell?: string;\n  yearsListControl?: string;\n};\n\nconst calendarYearsListClassNames = (\n  classNames?: CalendarYearsListClassNamesType,\n) => {\n  return {\n    yearsList: classNames?.yearsList ?? datePickerYearsList(),\n    yearsListRow: classNames?.yearsListRow ?? datePickerYearsListRow(),\n    yearsListCell: classNames?.yearsListCell ?? datePickerYearsListCell(),\n    yearsListControl:\n      classNames?.yearsListControl ?? datePickerYearsListControl(),\n  };\n};\n\ntype PopoverClassNamesType = {\n  dropdown?: string;\n  arrow?: string;\n  overlay?: string;\n};\n\nconst popoverClassNames = (classNames?: PopoverClassNamesType) => {\n  return {\n    dropdown: classNames?.dropdown ?? datePickerDropdown(),\n    arrow: classNames?.arrow ?? datePickerArrow(),\n    overlay: classNames?.overlay ?? datePickerOverlay(),\n  };\n};\n\nconst datePickerClassNames = (classNames?: DatePickerClassNames) => {\n  return {\n    ...inputClassNames(classNames),\n    ...calendarClassNames(classNames),\n    ...calendarHeaderClassNames(classNames),\n    ...calendarDayClassNames(classNames),\n    ...calendarWeekClassNames(classNames),\n    ...calendarMonthClassNames(classNames),\n    ...calendarMonthsListClassNames(classNames),\n    ...calendarYearsListClassNames(classNames),\n  };\n};\n"],"mappings":"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"}

package/dist/components/controls/dropdown/Dropdown.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.mts","names":[],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"mappings":";;;;;KAqCY,wBAAA;EACV,OAAA;IACE,WAAA;IACA,IAAA;IACA,IAAA;MACE,OAAA;MACA,IAAA;IAAA;IAEF,KAAA;MACE,OAAA;MACA,IAAA;IAAA;EAAA;EAGJ,WAAA;IACE,UAAA;IACA,IAAA;IACA,IAAA;IACA,OAAA;MACE,OAAA;MACA,IAAA;IAAA;EAAA;AAAA;AAAA,KAKM,2BAAA;EACV,SAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA;EACA,OAAA;EACA,KAAA;EACA,OAAA;EACA,QAAA;EACA,OAAA,GAAU,wBAAA;AAAA;AAAA,KAGA,aAAA;EACV,QAAA,GAAW,KAAA,EAAO,aAAA,EAAe,KAAA;EACjC,OAAA,GAAU,KAAA,EAAO,aAAA;EACjB,MAAA,GAAS,KAAA,EAAO,aAAA;EAChB,OAAA,GAAU,KAAA,EAAO,aAAA;EACjB,QAAA,EAAU,SAAA;EACV,SAAA,GAAY,SAAA;EACZ,OAAA,GAAU,SAAA;EACV,QAAA;EACA,IAAA;EACA,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,QAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,SAAA;EACA,OAAA;EACA,MAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,OAAA;IACA,MAAA;IACA,KAAA;IACA,MAAA;IACA,SAAA,GAAY,2BAAA;IACZ,UAAA;MACE,UAAA;IAAA;EAAA;EAGJ,KAAA;EACA,MAAA;EACA,QAAA,GAAW,KAAA,sBAA2B,QAAA,EAAU,aAAA;EAChD,KAAA,GAAQ,aAAA;EACR,MAAA,GAAS,SAAA;EACT,aAAA;EACA,cAAA;AAAA"}
+{"version":3,"file":"Dropdown.d.mts","names":[],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"mappings":";;;;;KAuCY,wBAAA;EACV,OAAA;IACE,WAAA;IACA,IAAA;IACA,IAAA;MACE,OAAA;MACA,IAAA;IAAA;IAEF,KAAA;MACE,OAAA;MACA,IAAA;IAAA;EAAA;EAGJ,WAAA;IACE,UAAA;IACA,IAAA;IACA,IAAA;IACA,OAAA;MACE,OAAA;MACA,IAAA;IAAA;EAAA;AAAA;AAAA,KAKM,2BAAA;EACV,SAAA;EACA,IAAA;EACA,KAAA;EACA,WAAA;EACA,KAAA;EACA,OAAA;EACA,KAAA;EACA,OAAA;EACA,QAAA;EACA,OAAA,GAAU,wBAAA;AAAA;AAAA,KAGA,aAAA;EACV,QAAA,GAAW,KAAA,EAAO,aAAA,EAAe,KAAA;EACjC,OAAA,GAAU,KAAA,EAAO,aAAA;EACjB,MAAA,GAAS,KAAA,EAAO,aAAA;EAChB,OAAA,GAAU,KAAA,EAAO,aAAA;EACjB,QAAA,EAAU,SAAA;EACV,SAAA,GAAY,SAAA;EACZ,OAAA,GAAU,SAAA;EACV,QAAA;EACA,IAAA;EACA,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,QAAA;EACA,WAAA;EACA,YAAA;EACA,WAAA;EACA,SAAA;EACA,OAAA;EACA,MAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,OAAA;IACA,MAAA;IACA,KAAA;IACA,MAAA;IACA,SAAA,GAAY,2BAAA;IACZ,UAAA;MACE,UAAA;IAAA;EAAA;EAGJ,KAAA;EACA,MAAA;EACA,QAAA,GAAW,KAAA,sBAA2B,QAAA,EAAU,aAAA;EAChD,KAAA,GAAQ,aAAA;EACR,MAAA,GAAS,SAAA;EACT,aAAA;EACA,cAAA;AAAA"}

package/dist/components/controls/dropdown/Dropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.mjs","names":["MantineCombobox","TextInput"],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport {\n  type ComboboxStore,\n  Combobox as MantineCombobox,\n  useCombobox,\n} from '@mantine/core';\nimport { TextInput } from '../text-input/TextInput';\nimport { ClearButton, Chevron } from '../utils';\nimport { ScrollAreaAutosize } from '../../misc';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropdown,\n  dropdownRoot,\n  dropdownChevron,\n  dropdownChevronRoot,\n  dropdownChevronIcon,\n  dropdownChevronIconRoot,\n  dropdownClearButton,\n  dropdownClearButtonRoot,\n  dropdownClearButtonIcon,\n  dropdownClearButtonIconRaw,\n  dropdownClearButtonIconRawRoot,\n  dropdownEmpty,\n  dropdownOption,\n  dropdownOptions,\n  dropdownTextInput,\n  dropdownTextInputDescription,\n  dropdownTextInputError,\n  dropdownTextInputInput,\n  dropdownTextInputLabel,\n  dropdownTextInputRequired,\n  dropdownTextInputRoot,\n  dropdownTextInputSection,\n  dropdownTextInputWrapper,\n  dropdownScrollAreaAutosize,\n} from '@mage-ui/styled-system/recipes';\n\nexport type DefaultEndSlotClassNames = {\n  chevron?: {\n    iconWrapped?: string;\n    root?: string;\n    open?: {\n      iconRaw?: string;\n      root?: string;\n    };\n    close?: {\n      iconRaw?: string;\n      root?: string;\n    };\n  };\n  clearButton?: {\n    buttonIcon?: string;\n    root?: string;\n    icon?: string;\n    iconRaw?: {\n      iconRaw?: string;\n      root?: string;\n    };\n  };\n};\n\nexport type DropdownTextInputClassNames = {\n  textInput?: string;\n  root?: string;\n  label?: string;\n  description?: string;\n  error?: string;\n  wrapper?: string;\n  input?: string;\n  section?: string;\n  required?: string;\n  endSlot?: DefaultEndSlotClassNames;\n};\n\nexport type DropdownProps = {\n  onChange: (event: ComboboxStore, value?: string) => void;\n  onFocus: (event: ComboboxStore) => void;\n  onBlur: (event: ComboboxStore) => void;\n  onClick: (event: ComboboxStore) => void;\n  children: ReactNode;\n  startSlot?: ReactNode;\n  endSlot?: ReactNode;\n  readOnly?: boolean;\n  name?: string;\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  disabled?: boolean;\n  placeholder?: string;\n  withinPortal?: boolean;\n  keepMounted?: boolean;\n  clearable?: boolean;\n  chevron?: boolean;\n  offset?: number;\n  classNames?: {\n    dropdown?: string;\n    root?: string;\n    options?: string;\n    option?: string;\n    empty?: string;\n    search?: string;\n    textInput?: DropdownTextInputClassNames;\n    scrollArea?: {\n      scrollArea?: string;\n    };\n  };\n  value?: string;\n  search?: string;\n  setValue: (value: string | undefined, combobox: ComboboxStore) => void;\n  store?: ComboboxStore;\n  target?: ReactNode;\n  btnClearLabel?: string;\n  dropdownHeight?: number | string;\n};\n\nexport type DefaultEndSlotProps = {\n  clearable?: boolean;\n  chevron?: boolean;\n  value?: string;\n  setValue: (val: string | undefined, combobox: ComboboxStore) => void;\n  combobox: ComboboxStore;\n  classNames?: DefaultEndSlotClassNames;\n  btnClearLabel: string;\n};\n\nfunction DefaultEndSlot({\n  clearable,\n  chevron,\n  value,\n  setValue,\n  combobox,\n  classNames,\n  btnClearLabel = 'Clear selection',\n}: DefaultEndSlotProps) {\n  const showClearable = clearable && (value ?? '') !== '';\n  return (\n    <>\n      {showClearable ? (\n        <ClearButton\n          onClick={() => {\n            setValue(undefined, combobox);\n            combobox.resetSelectedOption();\n          }}\n          label={btnClearLabel}\n          name='mage-clear-button-x'\n          classNames={{\n            buttonIcon:\n              classNames?.clearButton?.buttonIcon ?? dropdownClearButton(),\n            root: classNames?.clearButton?.root ?? dropdownClearButtonRoot(),\n            icon: classNames?.clearButton?.icon ?? dropdownClearButtonIcon(),\n            iconRaw: {\n              iconRaw:\n                classNames?.clearButton?.iconRaw?.iconRaw ??\n                dropdownClearButtonIconRaw(),\n              root:\n                classNames?.clearButton?.iconRaw?.root ??\n                dropdownClearButtonIconRawRoot(),\n            },\n          }}\n        />\n      ) : (\n        chevron && (\n          <Chevron\n            chevronOpen='mage-dropdown-chevron-down'\n            chevronClose='mage-dropdown-chevron-up'\n            classNames={{\n              iconWrapped:\n                classNames?.chevron?.iconWrapped ?? dropdownChevron(),\n              root: classNames?.chevron?.root ?? dropdownChevronRoot(),\n              open: {\n                iconRaw:\n                  classNames?.chevron?.open?.iconRaw ?? dropdownChevronIcon(),\n                root:\n                  classNames?.chevron?.open?.root ?? dropdownChevronIconRoot(),\n              },\n              close: {\n                iconRaw:\n                  classNames?.chevron?.close?.iconRaw ?? dropdownChevronIcon(),\n                root:\n                  classNames?.chevron?.close?.root ??\n                  dropdownChevronIconRoot({ invert: true }),\n              },\n            }}\n          />\n        )\n      )}\n    </>\n  );\n}\n\nexport function Dropdown({\n  onChange,\n  onBlur,\n  onFocus,\n  onClick,\n  disabled,\n  children,\n  startSlot,\n  endSlot,\n  readOnly,\n  label,\n  placeholder,\n  name,\n  description,\n  error,\n  classNames,\n  withinPortal,\n  keepMounted,\n  clearable,\n  chevron,\n  offset,\n  value,\n  search,\n  setValue,\n  store,\n  target,\n  btnClearLabel,\n  dropdownHeight = 192,\n}: DropdownProps) {\n  const combobox =\n    store ??\n    useCombobox({\n      scrollBehavior: 'smooth',\n      onDropdownClose: () => combobox.resetSelectedOption(),\n    });\n  const clearablePointerEvents = (value ?? '') !== '' ? 'auto' : 'none';\n  const style: Record<string, string> = {};\n  if (clearable) {\n    style['--dropdown-text-input-right-section-pointer-events' as string] =\n      clearablePointerEvents;\n  }\n  return (\n    <MantineCombobox\n      width='target'\n      store={combobox}\n      withinPortal={withinPortal}\n      keepMounted={keepMounted}\n      offset={offset || 8}\n      onOptionSubmit={(option) => {\n        setValue(option, combobox);\n      }}\n      classNames={{\n        dropdown: cx(\n          classNames?.dropdown ?? dropdown(),\n          classNames?.root ?? dropdownRoot(),\n        ),\n        options: classNames?.options ?? dropdownOptions(),\n        option: classNames?.option ?? dropdownOption(),\n        empty: classNames?.empty ?? dropdownEmpty(),\n        search: classNames?.search,\n      }}\n    >\n      <MantineCombobox.Target>\n        {target ? (\n          target\n        ) : (\n          <TextInput\n            readOnly={readOnly ?? false}\n            value={search ?? value ?? ''}\n            startSlot={startSlot}\n            endSlot={\n              endSlot ?? (\n                <DefaultEndSlot\n                  clearable={clearable}\n                  chevron={chevron}\n                  value={value}\n                  setValue={setValue}\n                  combobox={combobox}\n                  btnClearLabel={btnClearLabel ?? 'Clear selection'}\n                  classNames={classNames?.textInput?.endSlot}\n                />\n              )\n            }\n            onClick={(e) => {\n              onClick(combobox);\n              // e.stopPropagation();\n            }}\n            onChange={(e) => {\n              e.stopPropagation();\n              onChange(combobox, e.currentTarget?.value);\n            }}\n            onFocus={(e) => {\n              onFocus(combobox);\n              // e.stopPropagation();\n            }}\n            onBlur={(e) => {\n              onBlur(combobox);\n              e.stopPropagation();\n            }}\n            label={label}\n            placeholder={placeholder}\n            description={description}\n            name={name}\n            error={error}\n            disabled={disabled}\n            classNames={{\n              root: classNames?.textInput?.root ?? dropdownTextInputRoot(),\n              textInput: classNames?.textInput?.textInput ?? dropdownTextInput(),\n              label: classNames?.textInput?.label ?? dropdownTextInputLabel(),\n              description:\n                classNames?.textInput?.description ??\n                dropdownTextInputDescription(),\n              error: classNames?.textInput?.error ?? dropdownTextInputError(),\n              wrapper:\n                classNames?.textInput?.wrapper ?? dropdownTextInputWrapper(),\n              input: classNames?.textInput?.input ?? dropdownTextInputInput(),\n              section:\n                classNames?.textInput?.section ?? dropdownTextInputSection(),\n              required:\n                classNames?.textInput?.required ?? dropdownTextInputRequired(),\n            }}\n            style={style}\n          />\n        )}\n      </MantineCombobox.Target>\n      <MantineCombobox.Dropdown>\n        <ScrollAreaAutosize\n          type='scroll'\n          mah={dropdownHeight}\n          classNames={{\n            scrollArea:\n              classNames?.scrollArea?.scrollArea ?? dropdownScrollAreaAutosize(),\n          }}\n        >\n          {children}\n        </ScrollAreaAutosize>\n      </MantineCombobox.Dropdown>\n    </MantineCombobox>\n  );\n}\n\nDropdown.Options = MantineCombobox.Options;\nDropdown.Options.displayName = 'Dropdown.Options';\nDropdown.Option = MantineCombobox.Option;\nDropdown.Option.displayName = 'Dropdown.Option';\nDropdown.Empty = MantineCombobox.Empty;\nDropdown.Empty.displayName = 'Dropdown.Empty';\nDropdown.Search = MantineCombobox.Search;\nDropdown.Search.displayName = 'Dropdown.Search';\nDropdown.EventsTarget = MantineCombobox.EventsTarget;\nDropdown.EventsTarget.displayName = 'Dropdown.EventsTarget';\n"],"mappings":"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"}
+{"version":3,"file":"Dropdown.mjs","names":["MantineCombobox","TextInput"],"sources":["../../../../src/components/controls/dropdown/Dropdown.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropdown,\n  dropdownChevron,\n  dropdownChevronIcon,\n  dropdownChevronIconRoot,\n  dropdownChevronRoot,\n  dropdownClearButton,\n  dropdownClearButtonIcon,\n  dropdownClearButtonIconRaw,\n  dropdownClearButtonIconRawRoot,\n  dropdownClearButtonRoot,\n  dropdownEmpty,\n  dropdownOption,\n  dropdownOptions,\n  dropdownRoot,\n  dropdownScrollAreaAutosize,\n  dropdownTextInput,\n  dropdownTextInputDescription,\n  dropdownTextInputError,\n  dropdownTextInputInput,\n  dropdownTextInputLabel,\n  dropdownTextInputRequired,\n  dropdownTextInputRoot,\n  dropdownTextInputSection,\n  dropdownTextInputWrapper,\n} from '@mage-ui/styled-system/recipes';\nimport {\n  type ComboboxStore,\n  Combobox as MantineCombobox,\n  useCombobox,\n} from '@mantine/core';\n\nimport { ScrollAreaAutosize } from '../../misc';\nimport { TextInput } from '../text-input/TextInput';\nimport { Chevron, ClearButton } from '../utils';\n\nexport type DefaultEndSlotClassNames = {\n  chevron?: {\n    iconWrapped?: string;\n    root?: string;\n    open?: {\n      iconRaw?: string;\n      root?: string;\n    };\n    close?: {\n      iconRaw?: string;\n      root?: string;\n    };\n  };\n  clearButton?: {\n    buttonIcon?: string;\n    root?: string;\n    icon?: string;\n    iconRaw?: {\n      iconRaw?: string;\n      root?: string;\n    };\n  };\n};\n\nexport type DropdownTextInputClassNames = {\n  textInput?: string;\n  root?: string;\n  label?: string;\n  description?: string;\n  error?: string;\n  wrapper?: string;\n  input?: string;\n  section?: string;\n  required?: string;\n  endSlot?: DefaultEndSlotClassNames;\n};\n\nexport type DropdownProps = {\n  onChange: (event: ComboboxStore, value?: string) => void;\n  onFocus: (event: ComboboxStore) => void;\n  onBlur: (event: ComboboxStore) => void;\n  onClick: (event: ComboboxStore) => void;\n  children: ReactNode;\n  startSlot?: ReactNode;\n  endSlot?: ReactNode;\n  readOnly?: boolean;\n  name?: string;\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  disabled?: boolean;\n  placeholder?: string;\n  withinPortal?: boolean;\n  keepMounted?: boolean;\n  clearable?: boolean;\n  chevron?: boolean;\n  offset?: number;\n  classNames?: {\n    dropdown?: string;\n    root?: string;\n    options?: string;\n    option?: string;\n    empty?: string;\n    search?: string;\n    textInput?: DropdownTextInputClassNames;\n    scrollArea?: {\n      scrollArea?: string;\n    };\n  };\n  value?: string;\n  search?: string;\n  setValue: (value: string | undefined, combobox: ComboboxStore) => void;\n  store?: ComboboxStore;\n  target?: ReactNode;\n  btnClearLabel?: string;\n  dropdownHeight?: number | string;\n};\n\nexport type DefaultEndSlotProps = {\n  clearable?: boolean;\n  chevron?: boolean;\n  value?: string;\n  setValue: (val: string | undefined, combobox: ComboboxStore) => void;\n  combobox: ComboboxStore;\n  classNames?: DefaultEndSlotClassNames;\n  btnClearLabel: string;\n};\n\nfunction DefaultEndSlot({\n  clearable,\n  chevron,\n  value,\n  setValue,\n  combobox,\n  classNames,\n  btnClearLabel = 'Clear selection',\n}: DefaultEndSlotProps) {\n  const showClearable = clearable && (value ?? '') !== '';\n  return (\n    <>\n      {showClearable ? (\n        <ClearButton\n          onClick={() => {\n            setValue(undefined, combobox);\n            combobox.resetSelectedOption();\n          }}\n          label={btnClearLabel}\n          name='mage-clear-button-x'\n          classNames={{\n            buttonIcon:\n              classNames?.clearButton?.buttonIcon ?? dropdownClearButton(),\n            root: classNames?.clearButton?.root ?? dropdownClearButtonRoot(),\n            icon: classNames?.clearButton?.icon ?? dropdownClearButtonIcon(),\n            iconRaw: {\n              iconRaw:\n                classNames?.clearButton?.iconRaw?.iconRaw ??\n                dropdownClearButtonIconRaw(),\n              root:\n                classNames?.clearButton?.iconRaw?.root ??\n                dropdownClearButtonIconRawRoot(),\n            },\n          }}\n        />\n      ) : (\n        chevron && (\n          <Chevron\n            chevronOpen='mage-dropdown-chevron-down'\n            chevronClose='mage-dropdown-chevron-up'\n            classNames={{\n              iconWrapped:\n                classNames?.chevron?.iconWrapped ?? dropdownChevron(),\n              root: classNames?.chevron?.root ?? dropdownChevronRoot(),\n              open: {\n                iconRaw:\n                  classNames?.chevron?.open?.iconRaw ?? dropdownChevronIcon(),\n                root:\n                  classNames?.chevron?.open?.root ?? dropdownChevronIconRoot(),\n              },\n              close: {\n                iconRaw:\n                  classNames?.chevron?.close?.iconRaw ?? dropdownChevronIcon(),\n                root:\n                  classNames?.chevron?.close?.root ??\n                  dropdownChevronIconRoot({ invert: true }),\n              },\n            }}\n          />\n        )\n      )}\n    </>\n  );\n}\n\nexport function Dropdown({\n  onChange,\n  onBlur,\n  onFocus,\n  onClick,\n  disabled,\n  children,\n  startSlot,\n  endSlot,\n  readOnly,\n  label,\n  placeholder,\n  name,\n  description,\n  error,\n  classNames,\n  withinPortal,\n  keepMounted,\n  clearable,\n  chevron,\n  offset,\n  value,\n  search,\n  setValue,\n  store,\n  target,\n  btnClearLabel,\n  dropdownHeight = 192,\n}: DropdownProps) {\n  const combobox =\n    store ??\n    useCombobox({\n      scrollBehavior: 'smooth',\n      onDropdownClose: () => combobox.resetSelectedOption(),\n    });\n  const clearablePointerEvents = (value ?? '') !== '' ? 'auto' : 'none';\n  const style: Record<string, string> = {};\n  if (clearable) {\n    style['--dropdown-text-input-right-section-pointer-events' as string] =\n      clearablePointerEvents;\n  }\n  return (\n    <MantineCombobox\n      width='target'\n      store={combobox}\n      withinPortal={withinPortal}\n      keepMounted={keepMounted}\n      offset={offset || 8}\n      onOptionSubmit={(option) => {\n        setValue(option, combobox);\n      }}\n      classNames={{\n        dropdown: cx(\n          classNames?.dropdown ?? dropdown(),\n          classNames?.root ?? dropdownRoot(),\n        ),\n        options: classNames?.options ?? dropdownOptions(),\n        option: classNames?.option ?? dropdownOption(),\n        empty: classNames?.empty ?? dropdownEmpty(),\n        search: classNames?.search,\n      }}\n    >\n      <MantineCombobox.Target>\n        {target ? (\n          target\n        ) : (\n          <TextInput\n            readOnly={readOnly ?? false}\n            value={search ?? value ?? ''}\n            startSlot={startSlot}\n            endSlot={\n              endSlot ?? (\n                <DefaultEndSlot\n                  clearable={clearable}\n                  chevron={chevron}\n                  value={value}\n                  setValue={setValue}\n                  combobox={combobox}\n                  btnClearLabel={btnClearLabel ?? 'Clear selection'}\n                  classNames={classNames?.textInput?.endSlot}\n                />\n              )\n            }\n            onClick={(e) => {\n              onClick(combobox);\n              // e.stopPropagation();\n            }}\n            onChange={(e) => {\n              e.stopPropagation();\n              onChange(combobox, e.currentTarget?.value);\n            }}\n            onFocus={(e) => {\n              onFocus(combobox);\n              // e.stopPropagation();\n            }}\n            onBlur={(e) => {\n              onBlur(combobox);\n              e.stopPropagation();\n            }}\n            label={label}\n            placeholder={placeholder}\n            description={description}\n            name={name}\n            error={error}\n            disabled={disabled}\n            classNames={{\n              root: classNames?.textInput?.root ?? dropdownTextInputRoot(),\n              textInput:\n                classNames?.textInput?.textInput ?? dropdownTextInput(),\n              label: classNames?.textInput?.label ?? dropdownTextInputLabel(),\n              description:\n                classNames?.textInput?.description ??\n                dropdownTextInputDescription(),\n              error: classNames?.textInput?.error ?? dropdownTextInputError(),\n              wrapper:\n                classNames?.textInput?.wrapper ?? dropdownTextInputWrapper(),\n              input: classNames?.textInput?.input ?? dropdownTextInputInput(),\n              section:\n                classNames?.textInput?.section ?? dropdownTextInputSection(),\n              required:\n                classNames?.textInput?.required ?? dropdownTextInputRequired(),\n            }}\n            style={style}\n          />\n        )}\n      </MantineCombobox.Target>\n      <MantineCombobox.Dropdown>\n        <ScrollAreaAutosize\n          type='scroll'\n          mah={dropdownHeight}\n          classNames={{\n            scrollArea:\n              classNames?.scrollArea?.scrollArea ??\n              dropdownScrollAreaAutosize(),\n          }}\n        >\n          {children}\n        </ScrollAreaAutosize>\n      </MantineCombobox.Dropdown>\n    </MantineCombobox>\n  );\n}\n\nDropdown.Options = MantineCombobox.Options;\nDropdown.Options.displayName = 'Dropdown.Options';\nDropdown.Option = MantineCombobox.Option;\nDropdown.Option.displayName = 'Dropdown.Option';\nDropdown.Empty = MantineCombobox.Empty;\nDropdown.Empty.displayName = 'Dropdown.Empty';\nDropdown.Search = MantineCombobox.Search;\nDropdown.Search.displayName = 'Dropdown.Search';\nDropdown.EventsTarget = MantineCombobox.EventsTarget;\nDropdown.EventsTarget.displayName = 'Dropdown.EventsTarget';\n"],"mappings":"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"}

package/dist/components/controls/dropzone/Dropzone.d.mts

@@ -1,7 +1,7 @@
 import { IconProps } from "../../data-display/icons/icon/Icon.mjs";
 import { LoaderOvalProps } from "../../data-display/loader-oval/LoaderOval.mjs";
 import "../../data-display/index.mjs";
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/controls/dropzone/Dropzone.d.ts
@@ -64,7 +64,7 @@ declare const Dropzone: ({
   hint,
   inputId,
   classNames
-}: DropzoneProps) => react_jsx_runtime36.JSX.Element;
+}: DropzoneProps) => react_jsx_runtime27.JSX.Element;
 //#endregion
 export { Dropzone, DropzoneProps, FileData };
 //# sourceMappingURL=Dropzone.d.mts.map

package/dist/components/controls/dropzone/Dropzone.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":";;;;;;;KAyBY,QAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGU,aAAA;EACV,QAAA;IACE,KAAA;IACA,WAAA;IACA;EAAA;IAEA,KAAA,EAAO,MAAA,SAAe,QAAA;IACtB,WAAA;IACA,UAAA,GAAa,QAAA;EAAA,MACT,SAAA;EACN,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA;EACA,IAAA,GAAO,MAAA;EACP,GAAA;EACA,MAAA;EACA,qBAAA;EACA,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,gBAAA;MACE,IAAA;MACA,KAAA;IAAA;IAEF,QAAA;IACA,YAAA,GAAe,SAAA;IACf,MAAA,GAAS,eAAA;IACT,QAAA;IACA,KAAA;IACA,QAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAIS,QAAA;EAAY,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,QAAA;EAAA,MAAA;EAAA,GAAA;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA;AAAA,GAYtB,aAAA,KAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":";;;;;;;KA2BY,QAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGU,aAAA;EACV,QAAA;IACE,KAAA;IACA,WAAA;IACA;EAAA;IAEA,KAAA,EAAO,MAAA,SAAe,QAAA;IACtB,WAAA;IACA,UAAA,GAAa,QAAA;EAAA,MACT,SAAA;EACN,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA;EACA,IAAA,GAAO,MAAA;EACP,GAAA;EACA,MAAA;EACA,qBAAA;EACA,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,gBAAA;MACE,IAAA;MACA,KAAA;IAAA;IAEF,QAAA;IACA,YAAA,GAAe,SAAA;IACf,MAAA,GAAS,eAAA;IACT,QAAA;IACA,KAAA;IACA,QAAA;IACA,IAAA;EAAA;AAAA;AAAA,cAIS,QAAA;EAAY,IAAA;EAAA,QAAA;EAAA,YAAA;EAAA,QAAA;EAAA,MAAA;EAAA,GAAA;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA;AAAA,GAYtB,aAAA,KAAa,mBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/dropzone/Dropzone.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.mjs","names":["Dropzone","MantineDropzone"],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"sourcesContent":["import { Dropzone as MantineDropzone } from '@mantine/dropzone';\nimport { type ReactNode, useCallback, useRef } from 'react';\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropzone,\n  dropzoneRoot,\n  dropzoneDropzoneInner,\n  dropzoneDropzoneRoot,\n  dropzoneIconSlot,\n  dropzoneIcon,\n  dropzoneTextSlot,\n  dropzoneTitle,\n  dropzoneSubtitle,\n  dropzoneHint,\n  dropzoneLoader,\n  dropzoneLoaderRoot,\n} from '@mage-ui/styled-system/recipes';\nimport {\n  Icon,\n  type IconProps,\n  LoaderOval,\n  type LoaderOvalProps,\n} from '@/components/data-display';\nimport { useDropzoneState } from './use-dropzone-state';\n\nexport type FileData = {\n  name: string;\n  size: number;\n  type: string;\n  date: string;\n  uploaded: boolean;\n  loading: boolean;\n  url: string;\n  error?: string;\n  progress?: number; // (0-100)\n};\n\nexport type DropzoneProps = {\n  children: ({\n    files,\n    isUploading,\n    removeFile,\n  }: {\n    files: Record<string, FileData>;\n    isUploading: boolean;\n    removeFile: (fileName: string) => void;\n  }) => ReactNode;\n  initialFiles?: Record<string, FileData>;\n  maxFiles?: number;\n  data?: Record<string, unknown>;\n  url: string;\n  accept?: string[];\n  preventDropOnDocument?: boolean;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  hint?: ReactNode;\n  inputId?: string;\n  classNames?: {\n    dropzone?: string;\n    root?: string;\n    dropzoneDropzone?: {\n      root?: string;\n      inner?: string;\n    };\n    iconSlot?: string;\n    dropzoneIcon?: IconProps['classNames'];\n    loader?: LoaderOvalProps['classNames'];\n    textSlot?: string;\n    title?: string;\n    subtitle?: string;\n    hint?: string;\n  };\n};\n\nexport const Dropzone = ({\n  data,\n  children,\n  initialFiles = {},\n  maxFiles,\n  accept,\n  url,\n  title,\n  subtitle,\n  hint,\n  inputId,\n  classNames,\n}: DropzoneProps) => {\n  const dropzoneRef = useRef<HTMLDivElement>(null);\n  const { files, isUploading, uploadMultipleFiles, removeFile } =\n    useDropzoneState(url, initialFiles);\n  const handleDrop = useCallback(\n    async (acceptedFiles: File[]) => {\n      const currentCount = Object.keys(files).length;\n      const max = maxFiles ?? Number.POSITIVE_INFINITY;\n      const remainingSlots = max - currentCount;\n      if (remainingSlots <= 0) {\n        return;\n      }\n      const filesToUpload = acceptedFiles.slice(0, remainingSlots);\n      await uploadMultipleFiles(filesToUpload, data);\n    },\n    [uploadMultipleFiles, data, files, maxFiles],\n  );  \n\n  return (\n    <div\n      className={cx(\n        classNames?.dropzone ?? dropzone(),\n        classNames?.root ?? dropzoneRoot(),\n      )}\n    >\n      <MantineDropzone\n        ref={dropzoneRef}\n        onDrop={handleDrop}\n        disabled={\n          Object.keys(files).length >= (maxFiles ?? Number.POSITIVE_INFINITY)\n        }\n        loading={isUploading}\n        accept={accept}\n        preventDropOnDocument\n        inputProps={{ id: inputId }}\n        classNames={{\n          root:\n            classNames?.dropzoneDropzone?.root ??\n            cx(dropzoneDropzoneRoot(), 'group'),\n          inner: classNames?.dropzoneDropzone?.inner ?? dropzoneDropzoneInner(),\n        }}\n      >\n        <div className={classNames?.iconSlot ?? dropzoneIconSlot()}>\n          {isUploading ? (\n            <LoaderOval\n              classNames={{\n                loader: classNames?.loader?.loader ?? dropzoneLoader(),\n                root: classNames?.loader?.root ?? dropzoneLoaderRoot(),\n              }}\n            />\n          ) : (\n            <>\n              <MantineDropzone.Idle>\n                <Icon\n                  name='mage-dropzone-upload-01'\n                  path='/icons/sprite-mage.svg'\n                  classNames={{\n                    icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                  }}\n                />\n              </MantineDropzone.Idle>\n              <MantineDropzone.Accept>\n                <Icon\n                  name='mage-dropzone-thumbs-up'\n                  path='/icons/sprite-mage.svg'\n                  classNames={{\n                    icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                  }}\n                />\n              </MantineDropzone.Accept>\n              <MantineDropzone.Reject>\n                <Icon\n                  name='mage-dropzone-thumbs-down'\n                  path='/icons/sprite-mage.svg'\n                  classNames={{\n                    icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                  }}\n                />\n              </MantineDropzone.Reject>\n            </>\n          )}\n        </div>\n        <div className={classNames?.textSlot ?? dropzoneTextSlot()}>\n          <span className={classNames?.title ?? dropzoneTitle()}>\n            {title || 'Upload files'}\n          </span>\n          <span className={classNames?.subtitle ?? dropzoneSubtitle()}>\n            {subtitle || 'Drag images here or click to select files'}\n          </span>\n          <span className={classNames?.hint ?? dropzoneHint()}>\n            {hint ||\n              'Attach as many files as you like, each file should not exceed 5mb'}\n          </span>\n        </div>\n      </MantineDropzone>\n      {Object.keys(files).length > 0 &&\n        children({ files, isUploading, removeFile })}\n    </div>\n  );\n};\n"],"mappings":"wrBA0EA,MAAaA,GAAY,CACvB,OACA,WACA,eAAe,EAAE,CACjB,WACA,SACA,MACA,QACA,WACA,OACA,UACA,gBACmB,CACnB,IAAM,EAAc,EAAuB,KAAK,CAC1C,CAAE,QAAO,cAAa,sBAAqB,cAC/C,EAAiB,EAAK,EAAa,CAC/B,EAAa,EACjB,KAAO,IAA0B,CAC/B,IAAM,EAAe,OAAO,KAAK,EAAM,CAAC,OAElC,GADM,GAAY,KACK,EACzB,GAAkB,GAItB,MAAM,EADgB,EAAc,MAAM,EAAG,EAAe,CACnB,EAAK,EAEhD,CAAC,EAAqB,EAAM,EAAO,EAAS,CAC7C,CAED,OACE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,WAED,EAACC,EAAAA,CACC,IAAK,EACL,OAAQ,EACR,SACE,OAAO,KAAK,EAAM,CAAC,SAAW,GAAY,KAE5C,QAAS,EACD,SACR,sBAAA,GACA,WAAY,CAAE,GAAI,EAAS,CAC3B,WAAY,CACV,KACE,GAAY,kBAAkB,MAC9B,EAAG,GAAsB,CAAE,QAAQ,CACrC,MAAO,GAAY,kBAAkB,OAAS,GAAuB,CACtE,WAED,EAAC,MAAA,CAAI,UAAW,GAAY,UAAY,GAAkB,UACvD,EACC,EAAC,EAAA,CACC,WAAY,CACV,OAAQ,GAAY,QAAQ,QAAU,GAAgB,CACtD,KAAM,GAAY,QAAQ,MAAQ,GAAoB,CACvD,CAAA,CACD,CAEF,EAAA,EAAA,CAAA,SAAA,CACE,EAACA,EAAgB,KAAA,CAAA,SACf,EAAC,EAAA,CACC,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,EACD,CAAA,CACmB,CACvB,EAACA,EAAgB,OAAA,CAAA,SACf,EAAC,EAAA,CACC,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,EACD,CAAA,CACqB,CACzB,EAACA,EAAgB,OAAA,CAAA,SACf,EAAC,EAAA,CACC,KAAK,4BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,EACD,CAAA,CACqB,GACxB,EAED,CACN,EAAC,MAAA,CAAI,UAAW,GAAY,UAAY,GAAkB,WACxD,EAAC,OAAA,CAAK,UAAW,GAAY,OAAS,GAAe,UAClD,GAAS,gBACL,CACP,EAAC,OAAA,CAAK,UAAW,GAAY,UAAY,GAAkB,UACxD,GAAY,6CACR,CACP,EAAC,OAAA,CAAK,UAAW,GAAY,MAAQ,GAAc,UAChD,GACC,qEACG,GACH,CAAA,EACU,CACjB,OAAO,KAAK,EAAM,CAAC,OAAS,GAC3B,EAAS,CAAE,QAAO,cAAa,aAAY,CAAC,CAAA,EAC1C"}
+{"version":3,"file":"Dropzone.mjs","names":["Dropzone","MantineDropzone"],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useRef } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropzone,\n  dropzoneDropzoneInner,\n  dropzoneDropzoneRoot,\n  dropzoneHint,\n  dropzoneIcon,\n  dropzoneIconSlot,\n  dropzoneLoader,\n  dropzoneLoaderRoot,\n  dropzoneRoot,\n  dropzoneSubtitle,\n  dropzoneTextSlot,\n  dropzoneTitle,\n} from '@mage-ui/styled-system/recipes';\nimport { Dropzone as MantineDropzone } from '@mantine/dropzone';\nimport {\n  Icon,\n  type IconProps,\n  LoaderOval,\n  type LoaderOvalProps,\n} from '@/components/data-display';\n\nimport { useDropzoneState } from './use-dropzone-state';\n\nexport type FileData = {\n  name: string;\n  size: number;\n  type: string;\n  date: string;\n  uploaded: boolean;\n  loading: boolean;\n  url: string;\n  error?: string;\n  progress?: number; // (0-100)\n};\n\nexport type DropzoneProps = {\n  children: ({\n    files,\n    isUploading,\n    removeFile,\n  }: {\n    files: Record<string, FileData>;\n    isUploading: boolean;\n    removeFile: (fileName: string) => void;\n  }) => ReactNode;\n  initialFiles?: Record<string, FileData>;\n  maxFiles?: number;\n  data?: Record<string, unknown>;\n  url: string;\n  accept?: string[];\n  preventDropOnDocument?: boolean;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  hint?: ReactNode;\n  inputId?: string;\n  classNames?: {\n    dropzone?: string;\n    root?: string;\n    dropzoneDropzone?: {\n      root?: string;\n      inner?: string;\n    };\n    iconSlot?: string;\n    dropzoneIcon?: IconProps['classNames'];\n    loader?: LoaderOvalProps['classNames'];\n    textSlot?: string;\n    title?: string;\n    subtitle?: string;\n    hint?: string;\n  };\n};\n\nexport const Dropzone = ({\n  data,\n  children,\n  initialFiles = {},\n  maxFiles,\n  accept,\n  url,\n  title,\n  subtitle,\n  hint,\n  inputId,\n  classNames,\n}: DropzoneProps) => {\n  const dropzoneRef = useRef<HTMLDivElement>(null);\n  const { files, isUploading, uploadMultipleFiles, removeFile } =\n    useDropzoneState(url, initialFiles);\n  const handleDrop = useCallback(\n    async (acceptedFiles: File[]) => {\n      const currentCount = Object.keys(files).length;\n      const max = maxFiles ?? Number.POSITIVE_INFINITY;\n      const remainingSlots = max - currentCount;\n      if (remainingSlots <= 0) {\n        return;\n      }\n      const filesToUpload = acceptedFiles.slice(0, remainingSlots);\n      await uploadMultipleFiles(filesToUpload, data);\n    },\n    [uploadMultipleFiles, data, files, maxFiles],\n  );\n\n  return (\n    <div\n      className={cx(\n        classNames?.dropzone ?? dropzone(),\n        classNames?.root ?? dropzoneRoot(),\n      )}\n    >\n      <MantineDropzone\n        ref={dropzoneRef}\n        onDrop={handleDrop}\n        disabled={\n          Object.keys(files).length >= (maxFiles ?? Number.POSITIVE_INFINITY)\n        }\n        loading={isUploading}\n        accept={accept}\n        preventDropOnDocument\n        inputProps={{ id: inputId }}\n        classNames={{\n          root:\n            classNames?.dropzoneDropzone?.root ??\n            cx(dropzoneDropzoneRoot(), 'group'),\n          inner: classNames?.dropzoneDropzone?.inner ?? dropzoneDropzoneInner(),\n        }}\n      >\n        <div className={classNames?.iconSlot ?? dropzoneIconSlot()}>\n          {isUploading ? (\n            <LoaderOval\n              classNames={{\n                loader: classNames?.loader?.loader ?? dropzoneLoader(),\n                root: classNames?.loader?.root ?? dropzoneLoaderRoot(),\n              }}\n            />\n          ) : (\n            <>\n              <MantineDropzone.Idle>\n                <Icon\n                  name='mage-dropzone-upload-01'\n                  path='/icons/sprite-mage.svg'\n                  classNames={{\n                    icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                  }}\n                />\n              </MantineDropzone.Idle>\n              <MantineDropzone.Accept>\n                <Icon\n                  name='mage-dropzone-thumbs-up'\n                  path='/icons/sprite-mage.svg'\n                  classNames={{\n                    icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                  }}\n                />\n              </MantineDropzone.Accept>\n              <MantineDropzone.Reject>\n                <Icon\n                  name='mage-dropzone-thumbs-down'\n                  path='/icons/sprite-mage.svg'\n                  classNames={{\n                    icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                  }}\n                />\n              </MantineDropzone.Reject>\n            </>\n          )}\n        </div>\n        <div className={classNames?.textSlot ?? dropzoneTextSlot()}>\n          <span className={classNames?.title ?? dropzoneTitle()}>\n            {title || 'Upload files'}\n          </span>\n          <span className={classNames?.subtitle ?? dropzoneSubtitle()}>\n            {subtitle || 'Drag images here or click to select files'}\n          </span>\n          <span className={classNames?.hint ?? dropzoneHint()}>\n            {hint ||\n              'Attach as many files as you like, each file should not exceed 5mb'}\n          </span>\n        </div>\n      </MantineDropzone>\n      {Object.keys(files).length > 0 &&\n        children({ files, isUploading, removeFile })}\n    </div>\n  );\n};\n"],"mappings":"wrBA4EA,MAAaA,GAAY,CACvB,OACA,WACA,eAAe,EAAE,CACjB,WACA,SACA,MACA,QACA,WACA,OACA,UACA,gBACmB,CACnB,IAAM,EAAc,EAAuB,KAAK,CAC1C,CAAE,QAAO,cAAa,sBAAqB,cAC/C,EAAiB,EAAK,EAAa,CAC/B,EAAa,EACjB,KAAO,IAA0B,CAC/B,IAAM,EAAe,OAAO,KAAK,EAAM,CAAC,OAElC,GADM,GAAY,KACK,EACzB,GAAkB,GAItB,MAAM,EADgB,EAAc,MAAM,EAAG,EAAe,CACnB,EAAK,EAEhD,CAAC,EAAqB,EAAM,EAAO,EAAS,CAC7C,CAED,OACE,EAAC,MAAA,CACC,UAAW,EACT,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,WAED,EAACC,EAAAA,CACC,IAAK,EACL,OAAQ,EACR,SACE,OAAO,KAAK,EAAM,CAAC,SAAW,GAAY,KAE5C,QAAS,EACD,SACR,sBAAA,GACA,WAAY,CAAE,GAAI,EAAS,CAC3B,WAAY,CACV,KACE,GAAY,kBAAkB,MAC9B,EAAG,GAAsB,CAAE,QAAQ,CACrC,MAAO,GAAY,kBAAkB,OAAS,GAAuB,CACtE,WAED,EAAC,MAAA,CAAI,UAAW,GAAY,UAAY,GAAkB,UACvD,EACC,EAAC,EAAA,CACC,WAAY,CACV,OAAQ,GAAY,QAAQ,QAAU,GAAgB,CACtD,KAAM,GAAY,QAAQ,MAAQ,GAAoB,CACvD,CAAA,CACD,CAEF,EAAA,EAAA,CAAA,SAAA,CACE,EAACA,EAAgB,KAAA,CAAA,SACf,EAAC,EAAA,CACC,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,EACD,CAAA,CACmB,CACvB,EAACA,EAAgB,OAAA,CAAA,SACf,EAAC,EAAA,CACC,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,EACD,CAAA,CACqB,CACzB,EAACA,EAAgB,OAAA,CAAA,SACf,EAAC,EAAA,CACC,KAAK,4BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,EACD,CAAA,CACqB,GACxB,EAED,CACN,EAAC,MAAA,CAAI,UAAW,GAAY,UAAY,GAAkB,WACxD,EAAC,OAAA,CAAK,UAAW,GAAY,OAAS,GAAe,UAClD,GAAS,gBACL,CACP,EAAC,OAAA,CAAK,UAAW,GAAY,UAAY,GAAkB,UACxD,GAAY,6CACR,CACP,EAAC,OAAA,CAAK,UAAW,GAAY,MAAQ,GAAc,UAChD,GACC,qEACG,GACH,CAAA,EACU,CACjB,OAAO,KAAK,EAAM,CAAC,OAAS,GAC3B,EAAS,CAAE,QAAO,cAAa,aAAY,CAAC,CAAA,EAC1C"}