@xanui/ui 1.2.5 → 1.2.7

package/Accordion/index.cjs

@@ -15,8 +15,8 @@ const Accordion = React.forwardRef((_a, ref) => {
     const [_expand, setExpand] = React.useState(false);
     let [_b] = core.useInterface("Accordion", rest, {
         onClick: () => setExpand(!_expand),
-        color: "brand",
-        variant: "soft"
+        color: "primary",
+        variant: "ghost"
     }), { expand, onClick, color, variant, hoverColor, hoverVariant, expandIcon, expandIconPlacement, startIcon, endIcon, expandAction, classNames, slotProps } = _b, rootProps = tslib.__rest(_b, ["expand", "onClick", "color", "variant", "hoverColor", "hoverVariant", "expandIcon", "expandIconPlacement", "startIcon", "endIcon", "expandAction", "classNames", "slotProps"]);
     const _p = {};
     if (title)
@@ -83,12 +83,12 @@ const Accordion = React.forwardRef((_a, ref) => {
         itemsx.cursor = "initial!important";
     }
     return (jsxRuntime.jsx(core.Tag, Object.assign({}, rootProps, { sxr: {
-            bgcolor: "background.primary"
+            bgcolor: "surface.main"
         }, baseClass: 'accordion', classNames: [{ "accordion-expanded": expand }, ...(classNames || [])], ref: ref, children: jsxRuntime.jsxs(index, Object.assign({ component: 'div' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.header, { color: color, variant: variant, hoverColor: hoverColor, hoverVariant: hoverVariant, className: 'accoutdion-header', children: [jsxRuntime.jsx(index$1, Object.assign({ minHeight: 55, radius: 0, component: 'div' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerContent, itemsx, { subtitle: subtitle, selected: expand, onClick: () => onClick && onClick(), className: "accordion-header-content", children: title })), jsxRuntime.jsx(index$2, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.collaps, { open: expand, className: "accordion-collaps", children: jsxRuntime.jsx(core.Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: {
-                            color: "text.primary",
+                            color: "surface.contrast",
                             p: 2,
                             py: 1,
-                            bgcolor: "background.primary"
+                            bgcolor: "surface.main"
                         }, baseClass: 'accordion-content', children: children })) }))] })) })));
 });
 

package/Accordion/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps from '../Collaps';\nimport List from '../List';\nimport ListItem from '../ListItem';\nimport type { CollapsProps } from '../Collaps';\nimport type { ListProps } from '../List';\nimport type { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    expand?: boolean;\n    onClick?: () => void;\n    title: useBreakpointPropsType<ReactElement | string>;\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    expandIcon?: useBreakpointPropsType<ReactElement>;\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n\n    slotProps?: {\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n        collaps?: Omit<CollapsProps, \"children\" | \"in\">;\n        content?: Omit<TagProps, \"children\">;\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n    }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n    const [_expand, setExpand] = useState(false)\n    let [{\n        expand,\n        onClick,\n        color,\n        variant,\n        hoverColor,\n        hoverVariant,\n        expandIcon,\n        expandIconPlacement,\n        startIcon,\n        endIcon,\n        expandAction,\n        classNames,\n        slotProps,\n        ...rootProps\n    }] = useInterface<any>(\"Accordion\", rest, {\n        onClick: () => setExpand(!_expand) as any,\n        color: \"brand\",\n        variant: \"soft\"\n    })\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (expandIcon) _p.expandIcon = expandIcon\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n    if (expandAction) _p.expandAction = expandAction\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    expandIcon = p.expandIcon\n    expandIconPlacement = p.expandIconPlacement\n    expandAction = p.expandAction\n    color = p.color\n    variant = p.variant\n    hoverColor = p.hoverColor\n    hoverVariant = p.hoverVariant\n\n    expand = expand === undefined ? _expand : expand\n    expandIcon = expandIcon ? <Tag\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        {expandIcon}\n    </Tag> : <Tag\n        transform={`rotate(${expand ? 0 : -180}deg)`}\n        transition=\"transform .4s\"\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        <ExpandIcon />\n    </Tag>\n\n    let itemsx: any = {}\n\n    if (expandIconPlacement === 'start') {\n        itemsx = {\n            startIcon: <Tag\n                className='start-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {expandIcon}\n                {startIcon}\n            </Tag>,\n            endIcon\n        }\n\n    } else {\n        itemsx = {\n            endIcon: <Tag\n                className='end-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {endIcon}\n                {expandIcon}\n            </Tag>,\n            startIcon\n        }\n    }\n\n    if (expandAction === 'icon') {\n        itemsx.onClick = () => { }\n        itemsx.cursor = \"initial!important\"\n    }\n\n    return (\n        <Tag\n            {...rootProps}\n            sxr={{\n                bgcolor: \"background.primary\"\n            }}\n            baseClass='accordion'\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n            ref={ref}\n        >\n            <List\n                component='div'\n                {...slotProps?.header}\n                color={color}\n                variant={variant}\n                hoverColor={hoverColor}\n                hoverVariant={hoverVariant}\n                className='accoutdion-header'\n            >\n                <ListItem\n                    minHeight={55}\n                    radius={0}\n                    component='div'\n                    {...slotProps?.headerContent}\n                    {...itemsx}\n                    subtitle={subtitle}\n                    selected={expand}\n                    onClick={() => onClick && onClick()}\n                    className=\"accordion-header-content\"\n                >{title}</ListItem>\n                <Collaps\n                    {...slotProps?.collaps}\n                    open={expand}\n                    className=\"accordion-collaps\"\n                >\n                    <Tag\n                        {...slotProps?.content}\n                        sxr={{\n                            color: \"text.primary\",\n                            p: 2,\n                            py: 1,\n                            bgcolor: \"background.primary\"\n                        }}\n                        baseClass='accordion-content'\n                    >\n                        {children}\n                    </Tag>\n                </Collaps>\n            </List>\n        </Tag>\n    )\n})\nexport default Accordion\n\n\n"],"names":[],"mappings":";;;;;;;;;;;;AAmCA;;;AAEI;;AAiBI;AACA;AACH;;AAGD;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAgB;AAChB;AAAyB;AACzB;AAAkB;AAClB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAElB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAqBA;AACI;;AAIY;AACA;AACA;AACA;;;;;;AAUZ;;AAIY;AACA;AACA;AACA;;;;;AAUhB;AACI;AACA;;AAGJ;AAIY;AACH;AAiCe;AACA;AACA;AACA;;AAU5B;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps from '../Collaps';\nimport List from '../List';\nimport ListItem from '../ListItem';\nimport type { CollapsProps } from '../Collaps';\nimport type { ListProps } from '../List';\nimport type { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    expand?: boolean;\n    onClick?: () => void;\n    title: useBreakpointPropsType<ReactElement | string>;\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    expandIcon?: useBreakpointPropsType<ReactElement>;\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n\n    slotProps?: {\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n        collaps?: Omit<CollapsProps, \"children\" | \"open\">;\n        content?: Omit<TagProps, \"children\">;\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n    }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n    const [_expand, setExpand] = useState(false)\n    let [{\n        expand,\n        onClick,\n        color,\n        variant,\n        hoverColor,\n        hoverVariant,\n        expandIcon,\n        expandIconPlacement,\n        startIcon,\n        endIcon,\n        expandAction,\n        classNames,\n        slotProps,\n        ...rootProps\n    }] = useInterface<any>(\"Accordion\", rest, {\n        onClick: () => setExpand(!_expand) as any,\n        color: \"primary\",\n        variant: \"ghost\"\n    })\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (expandIcon) _p.expandIcon = expandIcon\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n    if (expandAction) _p.expandAction = expandAction\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    expandIcon = p.expandIcon\n    expandIconPlacement = p.expandIconPlacement\n    expandAction = p.expandAction\n    color = p.color\n    variant = p.variant\n    hoverColor = p.hoverColor\n    hoverVariant = p.hoverVariant\n\n    expand = expand === undefined ? _expand : expand\n    expandIcon = expandIcon ? <Tag\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        {expandIcon}\n    </Tag> : <Tag\n        transform={`rotate(${expand ? 0 : -180}deg)`}\n        transition=\"transform .4s\"\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        <ExpandIcon />\n    </Tag>\n\n    let itemsx: any = {}\n\n    if (expandIconPlacement === 'start') {\n        itemsx = {\n            startIcon: <Tag\n                className='start-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {expandIcon}\n                {startIcon}\n            </Tag>,\n            endIcon\n        }\n\n    } else {\n        itemsx = {\n            endIcon: <Tag\n                className='end-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {endIcon}\n                {expandIcon}\n            </Tag>,\n            startIcon\n        }\n    }\n\n    if (expandAction === 'icon') {\n        itemsx.onClick = () => { }\n        itemsx.cursor = \"initial!important\"\n    }\n\n    return (\n        <Tag\n            {...rootProps}\n            sxr={{\n                bgcolor: \"surface.main\"\n            }}\n            baseClass='accordion'\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n            ref={ref}\n        >\n            <List\n                component='div'\n                {...slotProps?.header}\n                color={color}\n                variant={variant}\n                hoverColor={hoverColor}\n                hoverVariant={hoverVariant}\n                className='accoutdion-header'\n            >\n                <ListItem\n                    minHeight={55}\n                    radius={0}\n                    component='div'\n                    {...slotProps?.headerContent}\n                    {...itemsx}\n                    subtitle={subtitle}\n                    selected={expand}\n                    onClick={() => onClick && onClick()}\n                    className=\"accordion-header-content\"\n                >{title}</ListItem>\n                <Collaps\n                    {...slotProps?.collaps}\n                    open={expand}\n                    className=\"accordion-collaps\"\n                >\n                    <Tag\n                        {...slotProps?.content}\n                        sxr={{\n                            color: \"surface.contrast\",\n                            p: 2,\n                            py: 1,\n                            bgcolor: \"surface.main\"\n                        }}\n                        baseClass='accordion-content'\n                    >\n                        {children}\n                    </Tag>\n                </Collaps>\n            </List>\n        </Tag>\n    )\n})\nexport default Accordion\n\n\n"],"names":[],"mappings":";;;;;;;;;;;;AAmCA;;;AAEI;;AAiBI;AACA;AACH;;AAGD;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAgB;AAChB;AAAyB;AACzB;AAAkB;AAClB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAElB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAqBA;AACI;;AAIY;AACA;AACA;AACA;;;;;;AAUZ;;AAIY;AACA;AACA;AACA;;;;;AAUhB;AACI;AACA;;AAGJ;AAIY;AACH;AAiCe;AACA;AACA;AACA;;AAU5B;;"}

package/Accordion/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React__default, { ReactElement } from 'react';
 import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
 import { CollapsProps } from '../Collaps/index.js';
 import { ListProps } from '../List/index.js';
@@ -21,12 +21,12 @@ type AccordionProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, "col
     slotProps?: {
         header?: Omit<ListProps, "children" | "color" | "variant" | "hoverColor" | "hoverVariant" | "className">;
         headerContent?: Omit<ListItemProps, "children" | "subtitle" | "selected" | "startIcon" | "endIcon" | "onClick" | "className">;
-        collaps?: Omit<CollapsProps, "children" | "in">;
+        collaps?: Omit<CollapsProps, "children" | "open">;
         content?: Omit<TagProps, "children">;
         expandIconContainer?: Omit<TagProps<"div">, 'children' | 'className'>;
     };
 };
-declare const Accordion: React.ForwardRefExoticComponent<Omit<AccordionProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
+declare const Accordion: React__default.ForwardRefExoticComponent<Omit<AccordionProps<TagComponentType>, "ref"> & React__default.RefAttributes<any>>;
 
 export { Accordion as default };
 export type { AccordionProps };

package/Accordion/index.js

@@ -13,8 +13,8 @@ const Accordion = React.forwardRef((_a, ref) => {
     const [_expand, setExpand] = useState(false);
     let [_b] = useInterface("Accordion", rest, {
         onClick: () => setExpand(!_expand),
-        color: "brand",
-        variant: "soft"
+        color: "primary",
+        variant: "ghost"
     }), { expand, onClick, color, variant, hoverColor, hoverVariant, expandIcon, expandIconPlacement, startIcon, endIcon, expandAction, classNames, slotProps } = _b, rootProps = __rest(_b, ["expand", "onClick", "color", "variant", "hoverColor", "hoverVariant", "expandIcon", "expandIconPlacement", "startIcon", "endIcon", "expandAction", "classNames", "slotProps"]);
     const _p = {};
     if (title)
@@ -81,12 +81,12 @@ const Accordion = React.forwardRef((_a, ref) => {
         itemsx.cursor = "initial!important";
     }
     return (jsx(Tag, Object.assign({}, rootProps, { sxr: {
-            bgcolor: "background.primary"
+            bgcolor: "surface.main"
         }, baseClass: 'accordion', classNames: [{ "accordion-expanded": expand }, ...(classNames || [])], ref: ref, children: jsxs(List, Object.assign({ component: 'div' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.header, { color: color, variant: variant, hoverColor: hoverColor, hoverVariant: hoverVariant, className: 'accoutdion-header', children: [jsx(ListItem, Object.assign({ minHeight: 55, radius: 0, component: 'div' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.headerContent, itemsx, { subtitle: subtitle, selected: expand, onClick: () => onClick && onClick(), className: "accordion-header-content", children: title })), jsx(Collaps, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.collaps, { open: expand, className: "accordion-collaps", children: jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { sxr: {
-                            color: "text.primary",
+                            color: "surface.contrast",
                             p: 2,
                             py: 1,
-                            bgcolor: "background.primary"
+                            bgcolor: "surface.main"
                         }, baseClass: 'accordion-content', children: children })) }))] })) })));
 });
 

package/Accordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps from '../Collaps';\nimport List from '../List';\nimport ListItem from '../ListItem';\nimport type { CollapsProps } from '../Collaps';\nimport type { ListProps } from '../List';\nimport type { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    expand?: boolean;\n    onClick?: () => void;\n    title: useBreakpointPropsType<ReactElement | string>;\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    expandIcon?: useBreakpointPropsType<ReactElement>;\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n\n    slotProps?: {\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n        collaps?: Omit<CollapsProps, \"children\" | \"in\">;\n        content?: Omit<TagProps, \"children\">;\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n    }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n    const [_expand, setExpand] = useState(false)\n    let [{\n        expand,\n        onClick,\n        color,\n        variant,\n        hoverColor,\n        hoverVariant,\n        expandIcon,\n        expandIconPlacement,\n        startIcon,\n        endIcon,\n        expandAction,\n        classNames,\n        slotProps,\n        ...rootProps\n    }] = useInterface<any>(\"Accordion\", rest, {\n        onClick: () => setExpand(!_expand) as any,\n        color: \"brand\",\n        variant: \"soft\"\n    })\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (expandIcon) _p.expandIcon = expandIcon\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n    if (expandAction) _p.expandAction = expandAction\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    expandIcon = p.expandIcon\n    expandIconPlacement = p.expandIconPlacement\n    expandAction = p.expandAction\n    color = p.color\n    variant = p.variant\n    hoverColor = p.hoverColor\n    hoverVariant = p.hoverVariant\n\n    expand = expand === undefined ? _expand : expand\n    expandIcon = expandIcon ? <Tag\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        {expandIcon}\n    </Tag> : <Tag\n        transform={`rotate(${expand ? 0 : -180}deg)`}\n        transition=\"transform .4s\"\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        <ExpandIcon />\n    </Tag>\n\n    let itemsx: any = {}\n\n    if (expandIconPlacement === 'start') {\n        itemsx = {\n            startIcon: <Tag\n                className='start-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {expandIcon}\n                {startIcon}\n            </Tag>,\n            endIcon\n        }\n\n    } else {\n        itemsx = {\n            endIcon: <Tag\n                className='end-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {endIcon}\n                {expandIcon}\n            </Tag>,\n            startIcon\n        }\n    }\n\n    if (expandAction === 'icon') {\n        itemsx.onClick = () => { }\n        itemsx.cursor = \"initial!important\"\n    }\n\n    return (\n        <Tag\n            {...rootProps}\n            sxr={{\n                bgcolor: \"background.primary\"\n            }}\n            baseClass='accordion'\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n            ref={ref}\n        >\n            <List\n                component='div'\n                {...slotProps?.header}\n                color={color}\n                variant={variant}\n                hoverColor={hoverColor}\n                hoverVariant={hoverVariant}\n                className='accoutdion-header'\n            >\n                <ListItem\n                    minHeight={55}\n                    radius={0}\n                    component='div'\n                    {...slotProps?.headerContent}\n                    {...itemsx}\n                    subtitle={subtitle}\n                    selected={expand}\n                    onClick={() => onClick && onClick()}\n                    className=\"accordion-header-content\"\n                >{title}</ListItem>\n                <Collaps\n                    {...slotProps?.collaps}\n                    open={expand}\n                    className=\"accordion-collaps\"\n                >\n                    <Tag\n                        {...slotProps?.content}\n                        sxr={{\n                            color: \"text.primary\",\n                            p: 2,\n                            py: 1,\n                            bgcolor: \"background.primary\"\n                        }}\n                        baseClass='accordion-content'\n                    >\n                        {children}\n                    </Tag>\n                </Collaps>\n            </List>\n        </Tag>\n    )\n})\nexport default Accordion\n\n\n"],"names":[],"mappings":";;;;;;;;;;AAmCA;;;AAEI;;AAiBI;AACA;AACH;;AAGD;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAgB;AAChB;AAAyB;AACzB;AAAkB;AAClB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAElB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAqBA;AACI;;AAIY;AACA;AACA;AACA;;;;;;AAUZ;;AAIY;AACA;AACA;AACA;;;;;AAUhB;AACI;AACA;;AAGJ;AAIY;AACH;AAiCe;AACA;AACA;AACA;;AAU5B;;"}
+{"version":3,"file":"index.js","sources":["../../src/Accordion/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { ReactElement, useState } from 'react';\nimport { Tag, TagProps, useInterface, UseColorTemplateColor, UseColorTemplateType, TagComponentType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport ExpandIcon from \"@xanui/icons/ExpandMore\";\nimport Collaps from '../Collaps';\nimport List from '../List';\nimport ListItem from '../ListItem';\nimport type { CollapsProps } from '../Collaps';\nimport type { ListProps } from '../List';\nimport type { ListItemProps } from '../ListItem';\n\nexport type AccordionProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, \"color\"> & {\n    expand?: boolean;\n    onClick?: () => void;\n    title: useBreakpointPropsType<ReactElement | string>;\n    subtitle?: useBreakpointPropsType<ReactElement | string>;\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    expandIcon?: useBreakpointPropsType<ReactElement>;\n    expandIconPlacement?: useBreakpointPropsType<\"start\" | \"end\">;\n    expandAction?: useBreakpointPropsType<\"header\" | \"icon\">;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;\n    hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;\n\n    slotProps?: {\n        header?: Omit<ListProps, \"children\" | \"color\" | \"variant\" | \"hoverColor\" | \"hoverVariant\" | \"className\">;\n        headerContent?: Omit<ListItemProps, \"children\" | \"subtitle\" | \"selected\" | \"startIcon\" | \"endIcon\" | \"onClick\" | \"className\">\n        collaps?: Omit<CollapsProps, \"children\" | \"open\">;\n        content?: Omit<TagProps, \"children\">;\n        expandIconContainer?: Omit<TagProps<\"div\">, 'children' | 'className'>;\n    }\n}\n\nconst Accordion = React.forwardRef(<T extends TagComponentType = \"div\">({ children, title, subtitle, ...rest }: AccordionProps<T>, ref: React.Ref<any>) => {\n    const [_expand, setExpand] = useState(false)\n    let [{\n        expand,\n        onClick,\n        color,\n        variant,\n        hoverColor,\n        hoverVariant,\n        expandIcon,\n        expandIconPlacement,\n        startIcon,\n        endIcon,\n        expandAction,\n        classNames,\n        slotProps,\n        ...rootProps\n    }] = useInterface<any>(\"Accordion\", rest, {\n        onClick: () => setExpand(!_expand) as any,\n        color: \"primary\",\n        variant: \"ghost\"\n    })\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (subtitle) _p.subtitle = subtitle\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (expandIcon) _p.expandIcon = expandIcon\n    if (expandIconPlacement) _p.expandIconPlacement = expandIconPlacement\n    if (expandAction) _p.expandAction = expandAction\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (hoverColor) _p.hoverColor = hoverColor\n    if (hoverVariant) _p.hoverVariant = hoverVariant\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    subtitle = p.subtitle\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    expandIcon = p.expandIcon\n    expandIconPlacement = p.expandIconPlacement\n    expandAction = p.expandAction\n    color = p.color\n    variant = p.variant\n    hoverColor = p.hoverColor\n    hoverVariant = p.hoverVariant\n\n    expand = expand === undefined ? _expand : expand\n    expandIcon = expandIcon ? <Tag\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        {expandIcon}\n    </Tag> : <Tag\n        transform={`rotate(${expand ? 0 : -180}deg)`}\n        transition=\"transform .4s\"\n        cursor=\"pointer\"\n        {...slotProps?.expandIconContainer}\n        onClick={expandAction === 'icon' && onClick ? () => onClick() : () => { }}\n        className='expand-icon-container'\n    >\n        <ExpandIcon />\n    </Tag>\n\n    let itemsx: any = {}\n\n    if (expandIconPlacement === 'start') {\n        itemsx = {\n            startIcon: <Tag\n                className='start-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {expandIcon}\n                {startIcon}\n            </Tag>,\n            endIcon\n        }\n\n    } else {\n        itemsx = {\n            endIcon: <Tag\n                className='end-icon-container'\n                sxr={{\n                    display: \"flex\",\n                    flexDirection: \"row\",\n                    alignItems: \"center\",\n                    gap: 1\n                }}\n            >\n                {endIcon}\n                {expandIcon}\n            </Tag>,\n            startIcon\n        }\n    }\n\n    if (expandAction === 'icon') {\n        itemsx.onClick = () => { }\n        itemsx.cursor = \"initial!important\"\n    }\n\n    return (\n        <Tag\n            {...rootProps}\n            sxr={{\n                bgcolor: \"surface.main\"\n            }}\n            baseClass='accordion'\n            classNames={[{ \"accordion-expanded\": expand }, ...(classNames || [])]}\n            ref={ref}\n        >\n            <List\n                component='div'\n                {...slotProps?.header}\n                color={color}\n                variant={variant}\n                hoverColor={hoverColor}\n                hoverVariant={hoverVariant}\n                className='accoutdion-header'\n            >\n                <ListItem\n                    minHeight={55}\n                    radius={0}\n                    component='div'\n                    {...slotProps?.headerContent}\n                    {...itemsx}\n                    subtitle={subtitle}\n                    selected={expand}\n                    onClick={() => onClick && onClick()}\n                    className=\"accordion-header-content\"\n                >{title}</ListItem>\n                <Collaps\n                    {...slotProps?.collaps}\n                    open={expand}\n                    className=\"accordion-collaps\"\n                >\n                    <Tag\n                        {...slotProps?.content}\n                        sxr={{\n                            color: \"surface.contrast\",\n                            p: 2,\n                            py: 1,\n                            bgcolor: \"surface.main\"\n                        }}\n                        baseClass='accordion-content'\n                    >\n                        {children}\n                    </Tag>\n                </Collaps>\n            </List>\n        </Tag>\n    )\n})\nexport default Accordion\n\n\n"],"names":[],"mappings":";;;;;;;;;;AAmCA;;;AAEI;;AAiBI;AACA;AACH;;AAGD;AAAW;AACX;AAAc;AACd;AAAe;AACf;AAAa;AACb;AAAgB;AAChB;AAAyB;AACzB;AAAkB;AAClB;AAAW;AACX;AAAa;AACb;AAAgB;AAChB;AAAkB;AAElB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAEA;;;AAqBA;AACI;;AAIY;AACA;AACA;AACA;;;;;;AAUZ;;AAIY;AACA;AACA;AACA;;;;;AAUhB;AACI;AACA;;AAGJ;AAIY;AACH;AAiCe;AACA;AACA;AACA;;AAU5B;;"}

package/Alert/index.cjs

@@ -20,7 +20,7 @@ const Alert = (_a) => {
     let [_b] = core.useInterface("Alert", rest, {
         variant: "fill"
     }), { title, variant, icon, color, direction, slotProps, onClose } = _b, _props = tslib.__rest(_b, ["title", "variant", "icon", "color", "direction", "slotProps", "onClose"]);
-    color !== null && color !== void 0 ? color : (color = "default");
+    color !== null && color !== void 0 ? color : (color = 'surface');
     direction !== null && direction !== void 0 ? direction : (direction = "row");
     const _p = {};
     if (title)
@@ -43,7 +43,7 @@ const Alert = (_a) => {
     const template = core.useColorTemplate(color, variant);
     let iconsx = {
         fontSize: isRow ? 22 : 40,
-        color: color === 'default' ? "text.primary" : template.primary.color
+        color: color === 'surface' ? "surface.contrast" : template.main.color
     };
     const icons = {
         "info": jsxRuntime.jsx(InfoIcon, { sx: iconsx }),
@@ -52,7 +52,7 @@ const Alert = (_a) => {
         "danger": jsxRuntime.jsx(ErrorIcon, { sx: iconsx })
     };
     let _icon = icons[icon] || icons[color];
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, _props, { baseClass: "alert", sxr: Object.assign({ justifyContent: "flex-start", position: "relative", radius: 1, px: isRow ? (_icon ? .5 : 2) : 3, py: isRow ? .5 : 3, flexDirection: "column", display: 'flex' }, _props === null || _props === void 0 ? void 0 : _props.sx) }, template.primary, { children: [onClose && jsxRuntime.jsx(index, { color: color, variant: variant === 'fill' ? "fill" : "text", size: 25, sx: {
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({}, _props, { baseClass: "alert", sxr: Object.assign({ justifyContent: "flex-start", position: "relative", radius: 1, px: isRow ? (_icon ? .5 : 2) : 3, py: isRow ? .5 : 3, flexDirection: "column", display: 'flex' }, _props === null || _props === void 0 ? void 0 : _props.sx) }, template.main, { children: [onClose && jsxRuntime.jsx(index, { color: color, variant: variant === 'fill' ? "fill" : "text", size: 25, sx: {
                     position: "absolute",
                     top: 5,
                     right: 5
@@ -67,21 +67,23 @@ const Alert = (_a) => {
                             justifyContent: "center",
                             p: isRow ? .5 : 0,
                             "& svg": {
-                                color: template.primary.color
+                                color: template.main.color
                             }
                         }, children: _icon }), jsxRuntime.jsxs(core.Tag, { baseClass: "alert-content", sxr: {
                             display: "flex",
                             flexDirection: "column",
                             flex: 1,
-                            color: template.primary.color,
+                            color: template.main.color,
                             textAlign: isRow ? "left" : "center",
                             gap: isRow ? 0 : 1,
                             width: "100%"
                         }, children: [title && jsxRuntime.jsx(jsxRuntime.Fragment, { children: React.isValidElement(title) ? jsxRuntime.jsx(core.Tag, { className: "alert-title", children: title }) : jsxRuntime.jsx(index$1, { className: "alert-titles", variant: "text", sx: {
                                         fontWeight: 500,
-                                        color: template.primary.color
+                                        color: template.main.color
                                     }, children: title }) }), jsxRuntime.jsx(core.Tag, { sxr: {
-                                    font: "button",
+                                    fontSize: "button",
+                                    fontWeight: "button",
+                                    lineHeight: "button"
                                 }, children: children })] })] })] })));
 };
 const ConfirmAlert = (props) => {
@@ -89,7 +91,7 @@ const ConfirmAlert = (props) => {
     hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
     hideCancelButton !== null && hideCancelButton !== void 0 ? hideCancelButton : (hideCancelButton = false);
     size !== null && size !== void 0 ? size : (size = "small");
-    color !== null && color !== void 0 ? color : (color = 'default');
+    color !== null && color !== void 0 ? color : (color = 'surface');
     variant !== null && variant !== void 0 ? variant : (variant = "text");
     direction !== null && direction !== void 0 ? direction : (direction = "column");
     buttonPlacement !== null && buttonPlacement !== void 0 ? buttonPlacement : (buttonPlacement = "end");
@@ -119,19 +121,19 @@ const ConfirmAlert = (props) => {
     };
     let okcolor = color;
     let closecolor = color;
-    if (color === 'default') {
-        okcolor = 'brand';
-        closecolor = 'default';
+    if (color === 'surface') {
+        okcolor = 'primary';
+        closecolor = 'surface';
         variant = 'text';
     }
     else {
         if (variant === 'fill') {
-            okcolor = 'default';
-            closecolor = 'default';
+            okcolor = 'surface';
+            closecolor = 'surface';
         }
         else {
             okcolor = color;
-            closecolor = 'default';
+            closecolor = 'surface';
         }
     }
     return (jsxRuntime.jsx(index$2, Object.assign({ open: open }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal, { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: async () => {
@@ -171,11 +173,11 @@ Alert.confirm = (_a) => {
             else {
                 confirm.updateProps({ open: false });
             }
-        }, slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_b = props.slotProps) === null || _b === void 0 ? void 0 : _b.modal), { onClosed: () => {
+        }, slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_b = props.slotProps) === null || _b === void 0 ? void 0 : _b.modal), { onExited: () => {
                     var _a, _b, _c, _d;
                     confirm.unrender();
-                    if ((_b = (_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.modal) === null || _b === void 0 ? void 0 : _b.onClosed) {
-                        (_d = (_c = props.slotProps) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.onClosed();
+                    if ((_b = (_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.modal) === null || _b === void 0 ? void 0 : _b.onExited) {
+                        (_d = (_c = props.slotProps) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.onExited();
                     }
                 } }) }) }));
 };

package/Alert/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= \"default\"\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.primary.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.primary}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.primary.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.primary.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1,\n                        width: \"100%\"\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.primary.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            font: \"button\",\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: UseTransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'default'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'default') {\n        okcolor = 'brand'\n        closecolor = 'default'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'default'\n            closecolor = 'default'\n        } else {\n            okcolor = color\n            closecolor = 'default'\n        }\n    }\n\n    return (<Modal\n        open={open}\n        {...slotProps?.modal}\n        size={sizes[size] || size}\n        blur={40}\n        blurMode={blurMode || \"transparent\"}\n        transition={transition || \"zoom\"}\n        onClickOutside={async () => {\n            if (clickOutsideToClose && !loading) {\n                onCancel && await onCancel()\n            }\n        }}\n    >\n        <Alert\n            direction={direction}\n            sx={{\n                px: 2,\n                py: 1,\n                pt: direction === 'row' ? 1 : 2\n            }}\n            color={color}\n            variant={variant}\n            onClose={closeButton ? close : undefined}\n            {...rest}\n        >\n            {content}\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    gap: 1,\n                    pt: 4,\n                    flexDirection: \"row\",\n                    ...sx,\n                }}\n            >\n                {!hideCancelButton && <Button\n                    disabled={loading}\n                    color={closecolor}\n                    variant=\"fill\"\n                    {...slotProps?.closeButton}\n                    onClick={async () => {\n                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const Inst = (_props: any) => <ConfirmAlert {..._props} />\n    const confirm = Renderar.render(Inst as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onClosed: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onClosed) {\n                        props.slotProps?.modal?.onClosed()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= 'surface'\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'surface' ? \"surface.contrast\" : template.main.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.main}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.main.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.main.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1,\n                        width: \"100%\"\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.main.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            fontSize: \"button\",\n                            fontWeight: \"button\",\n                            lineHeight: \"button\"\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: TransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'surface'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'surface') {\n        okcolor = 'primary'\n        closecolor = 'surface'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'surface'\n            closecolor = 'surface'\n        } else {\n            okcolor = color\n            closecolor = 'surface'\n        }\n    }\n\n    return (<Modal\n        open={open}\n        {...slotProps?.modal}\n        size={sizes[size] || size}\n        blur={40}\n        blurMode={blurMode || \"transparent\"}\n        transition={transition || \"zoom\"}\n        onClickOutside={async () => {\n            if (clickOutsideToClose && !loading) {\n                onCancel && await onCancel()\n            }\n        }}\n    >\n        <Alert\n            direction={direction}\n            sx={{\n                px: 2,\n                py: 1,\n                pt: direction === 'row' ? 1 : 2\n            }}\n            color={color}\n            variant={variant}\n            onClose={closeButton ? close : undefined}\n            {...rest}\n        >\n            {content}\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    gap: 1,\n                    pt: 4,\n                    flexDirection: \"row\",\n                    ...sx,\n                }}\n            >\n                {!hideCancelButton && <Button\n                    disabled={loading}\n                    color={closecolor}\n                    variant=\"fill\"\n                    {...slotProps?.closeButton}\n                    onClick={async () => {\n                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const Inst = (_props: any) => <ConfirmAlert {..._props} />\n    const confirm = Renderar.render(Inst as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onExited: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onExited) {\n                        props.slotProps?.modal?.onExited()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACA;AACA;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}

package/Alert/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { TagProps, useBreakpointPropsType, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from '@xanui/core';
-import React, { ReactElement } from 'react';
+import { TagProps, useBreakpointPropsType, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from '@xanui/core';
+import React__default, { ReactElement } from 'react';
 import { ModalProps } from '../Modal/index.js';
 import { ButtonProps } from '../Button/index.js';
 
@@ -10,7 +10,7 @@ type AlertProps = Omit<TagProps<"div">, "content" | "title" | "direction"> & {
     variant?: useBreakpointPropsType<UseColorTemplateType>;
     color?: useBreakpointPropsType<UseColorTemplateColor>;
     icon?: useBreakpointPropsType<"info" | "warning" | "success" | "error" | false | ReactElement>;
-    onClose?: React.DOMAttributes<"button">['onClick'];
+    onClose?: React__default.DOMAttributes<"button">['onClick'];
 };
 declare const Alert: {
     ({ children, ...rest }: AlertProps): react_jsx_runtime.JSX.Element;
@@ -31,7 +31,7 @@ type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | "
     variant?: "text" | "fill";
     onConfirm?: () => Promise<void> | void;
     onCancel?: () => Promise<void> | void;
-    transition?: UseTransitionVariantTypes;
+    transition?: TransitionVariantTypes;
     blurMode?: ModalProps['blurMode'];
     slotProps?: {
         modal?: Omit<ModalProps, 'open' | "children">;

package/Alert/index.js

@@ -18,7 +18,7 @@ const Alert = (_a) => {
     let [_b] = useInterface("Alert", rest, {
         variant: "fill"
     }), { title, variant, icon, color, direction, slotProps, onClose } = _b, _props = __rest(_b, ["title", "variant", "icon", "color", "direction", "slotProps", "onClose"]);
-    color !== null && color !== void 0 ? color : (color = "default");
+    color !== null && color !== void 0 ? color : (color = 'surface');
     direction !== null && direction !== void 0 ? direction : (direction = "row");
     const _p = {};
     if (title)
@@ -41,7 +41,7 @@ const Alert = (_a) => {
     const template = useColorTemplate(color, variant);
     let iconsx = {
         fontSize: isRow ? 22 : 40,
-        color: color === 'default' ? "text.primary" : template.primary.color
+        color: color === 'surface' ? "surface.contrast" : template.main.color
     };
     const icons = {
         "info": jsx(InfoIcon, { sx: iconsx }),
@@ -50,7 +50,7 @@ const Alert = (_a) => {
         "danger": jsx(ErrorIcon, { sx: iconsx })
     };
     let _icon = icons[icon] || icons[color];
-    return (jsxs(Tag, Object.assign({}, _props, { baseClass: "alert", sxr: Object.assign({ justifyContent: "flex-start", position: "relative", radius: 1, px: isRow ? (_icon ? .5 : 2) : 3, py: isRow ? .5 : 3, flexDirection: "column", display: 'flex' }, _props === null || _props === void 0 ? void 0 : _props.sx) }, template.primary, { children: [onClose && jsx(IconButton, { color: color, variant: variant === 'fill' ? "fill" : "text", size: 25, sx: {
+    return (jsxs(Tag, Object.assign({}, _props, { baseClass: "alert", sxr: Object.assign({ justifyContent: "flex-start", position: "relative", radius: 1, px: isRow ? (_icon ? .5 : 2) : 3, py: isRow ? .5 : 3, flexDirection: "column", display: 'flex' }, _props === null || _props === void 0 ? void 0 : _props.sx) }, template.main, { children: [onClose && jsx(IconButton, { color: color, variant: variant === 'fill' ? "fill" : "text", size: 25, sx: {
                     position: "absolute",
                     top: 5,
                     right: 5
@@ -65,21 +65,23 @@ const Alert = (_a) => {
                             justifyContent: "center",
                             p: isRow ? .5 : 0,
                             "& svg": {
-                                color: template.primary.color
+                                color: template.main.color
                             }
                         }, children: _icon }), jsxs(Tag, { baseClass: "alert-content", sxr: {
                             display: "flex",
                             flexDirection: "column",
                             flex: 1,
-                            color: template.primary.color,
+                            color: template.main.color,
                             textAlign: isRow ? "left" : "center",
                             gap: isRow ? 0 : 1,
                             width: "100%"
                         }, children: [title && jsx(Fragment, { children: isValidElement(title) ? jsx(Tag, { className: "alert-title", children: title }) : jsx(Text, { className: "alert-titles", variant: "text", sx: {
                                         fontWeight: 500,
-                                        color: template.primary.color
+                                        color: template.main.color
                                     }, children: title }) }), jsx(Tag, { sxr: {
-                                    font: "button",
+                                    fontSize: "button",
+                                    fontWeight: "button",
+                                    lineHeight: "button"
                                 }, children: children })] })] })] })));
 };
 const ConfirmAlert = (props) => {
@@ -87,7 +89,7 @@ const ConfirmAlert = (props) => {
     hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
     hideCancelButton !== null && hideCancelButton !== void 0 ? hideCancelButton : (hideCancelButton = false);
     size !== null && size !== void 0 ? size : (size = "small");
-    color !== null && color !== void 0 ? color : (color = 'default');
+    color !== null && color !== void 0 ? color : (color = 'surface');
     variant !== null && variant !== void 0 ? variant : (variant = "text");
     direction !== null && direction !== void 0 ? direction : (direction = "column");
     buttonPlacement !== null && buttonPlacement !== void 0 ? buttonPlacement : (buttonPlacement = "end");
@@ -117,19 +119,19 @@ const ConfirmAlert = (props) => {
     };
     let okcolor = color;
     let closecolor = color;
-    if (color === 'default') {
-        okcolor = 'brand';
-        closecolor = 'default';
+    if (color === 'surface') {
+        okcolor = 'primary';
+        closecolor = 'surface';
         variant = 'text';
     }
     else {
         if (variant === 'fill') {
-            okcolor = 'default';
-            closecolor = 'default';
+            okcolor = 'surface';
+            closecolor = 'surface';
         }
         else {
             okcolor = color;
-            closecolor = 'default';
+            closecolor = 'surface';
         }
     }
     return (jsx(Modal, Object.assign({ open: open }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal, { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: async () => {
@@ -169,11 +171,11 @@ Alert.confirm = (_a) => {
             else {
                 confirm.updateProps({ open: false });
             }
-        }, slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_b = props.slotProps) === null || _b === void 0 ? void 0 : _b.modal), { onClosed: () => {
+        }, slotProps: Object.assign(Object.assign({}, props.slotProps), { modal: Object.assign(Object.assign({}, (_b = props.slotProps) === null || _b === void 0 ? void 0 : _b.modal), { onExited: () => {
                     var _a, _b, _c, _d;
                     confirm.unrender();
-                    if ((_b = (_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.modal) === null || _b === void 0 ? void 0 : _b.onClosed) {
-                        (_d = (_c = props.slotProps) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.onClosed();
+                    if ((_b = (_a = props === null || props === void 0 ? void 0 : props.slotProps) === null || _a === void 0 ? void 0 : _a.modal) === null || _b === void 0 ? void 0 : _b.onExited) {
+                        (_d = (_c = props.slotProps) === null || _c === void 0 ? void 0 : _c.modal) === null || _d === void 0 ? void 0 : _d.onExited();
                     }
                 } }) }) }));
 };

package/Alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= \"default\"\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'default' ? \"text.primary\" : template.primary.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.primary}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.primary.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.primary.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1,\n                        width: \"100%\"\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.primary.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            font: \"button\",\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: UseTransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'default'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'default') {\n        okcolor = 'brand'\n        closecolor = 'default'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'default'\n            closecolor = 'default'\n        } else {\n            okcolor = color\n            closecolor = 'default'\n        }\n    }\n\n    return (<Modal\n        open={open}\n        {...slotProps?.modal}\n        size={sizes[size] || size}\n        blur={40}\n        blurMode={blurMode || \"transparent\"}\n        transition={transition || \"zoom\"}\n        onClickOutside={async () => {\n            if (clickOutsideToClose && !loading) {\n                onCancel && await onCancel()\n            }\n        }}\n    >\n        <Alert\n            direction={direction}\n            sx={{\n                px: 2,\n                py: 1,\n                pt: direction === 'row' ? 1 : 2\n            }}\n            color={color}\n            variant={variant}\n            onClose={closeButton ? close : undefined}\n            {...rest}\n        >\n            {content}\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    gap: 1,\n                    pt: 4,\n                    flexDirection: \"row\",\n                    ...sx,\n                }}\n            >\n                {!hideCancelButton && <Button\n                    disabled={loading}\n                    color={closecolor}\n                    variant=\"fill\"\n                    {...slotProps?.closeButton}\n                    onClick={async () => {\n                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const Inst = (_props: any) => <ConfirmAlert {..._props} />\n    const confirm = Renderar.render(Inst as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onClosed: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onClosed) {\n                        props.slotProps?.modal?.onClosed()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
+{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, TransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n    title?: useBreakpointPropsType<string | ReactElement>;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n    onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n    let [{\n        title,\n        variant,\n        icon,\n        color,\n        direction,\n        slotProps,\n        onClose,\n        ..._props\n    }] = useInterface<any>(\"Alert\", rest, {\n        variant: \"fill\"\n    })\n    color ??= 'surface'\n    direction ??= \"row\"\n\n    const _p: any = {}\n    if (title) _p.title = title\n    if (variant) _p.variant = variant\n    if (icon) _p.icon = icon\n    if (color) _p.color = color\n    if (direction) _p.direction = direction\n\n    const p: any = useBreakpointProps(_p)\n\n    title = p.title\n    variant = p.variant\n    icon = p.icon\n    color = p.color\n    direction = p.direction\n\n    let isRow = direction === 'row'\n\n\n    const template = useColorTemplate(color, variant)\n\n    let iconsx = {\n        fontSize: isRow ? 22 : 40,\n        color: color === 'surface' ? \"surface.contrast\" : template.main.color\n    }\n\n    const icons: any = {\n        \"info\": <InfoIcon sx={iconsx} />,\n        \"warning\": <WarningIcon sx={iconsx} />,\n        \"success\": <SuccessIcon sx={iconsx} />,\n        \"danger\": <ErrorIcon sx={iconsx} />\n    }\n\n    let _icon = icons[icon] || icons[color]\n\n    return (\n        <Tag\n            {..._props}\n            baseClass=\"alert\"\n            sxr={{\n                justifyContent: \"flex-start\",\n                position: \"relative\",\n                radius: 1,\n                px: isRow ? (_icon ? .5 : 2) : 3,\n                py: isRow ? .5 : 3,\n                flexDirection: \"column\",\n                display: 'flex',\n                ..._props?.sx\n            }}\n            {...template.main}\n        >\n            {\n                onClose && <IconButton\n                    color={color}\n                    variant={variant === 'fill' ? \"fill\" : \"text\"}\n                    size={25}\n                    sx={{\n                        position: \"absolute\",\n                        top: 5,\n                        right: 5\n                    }}\n                    onClick={onClose}\n                    className=\"alert-close-button\"\n                >\n                    <IconClose fontSize={18} />\n                </IconButton>\n            }\n            <Tag\n                sx={{\n                    display: \"flex\",\n                    gap: 1,\n                    flexDirection: direction,\n                    alignItems: isRow ? \"flex-start\" : \"center\"\n                }}\n                baseClass=\"alert-container\"\n            >\n                {\n                    _icon && <Tag\n                        baseClass=\"alert-icon\"\n                        sxr={{\n                            display: \"flex\",\n                            alignItems: \"center\",\n                            justifyContent: \"center\",\n                            p: isRow ? .5 : 0,\n                            \"& svg\": {\n                                color: template.main.color\n                            }\n                        }}\n                    >\n                        {_icon}\n                    </Tag>\n                }\n                <Tag\n                    baseClass=\"alert-content\"\n                    sxr={{\n                        display: \"flex\",\n                        flexDirection: \"column\",\n                        flex: 1,\n                        color: template.main.color,\n                        textAlign: isRow ? \"left\" : \"center\",\n                        gap: isRow ? 0 : 1,\n                        width: \"100%\"\n                    }}\n                >\n                    {title && <>\n                        {\n                            isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n                                className=\"alert-titles\"\n                                variant=\"text\"\n                                sx={{\n                                    fontWeight: 500,\n                                    color: template.main.color\n                                }}\n                            >{title}</Text>\n                        }\n                    </>}\n                    <Tag\n                        sxr={{\n                            fontSize: \"button\",\n                            fontWeight: \"button\",\n                            lineHeight: \"button\"\n                        }}\n                    >\n                        {children}\n                    </Tag>\n                </Tag>\n            </Tag>\n        </Tag>\n    )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n    open: boolean;\n    loading: boolean;\n    content: string | ReactElement,\n    size?: \"small\" | \"medium\" | \"large\" | number;\n    closeButton?: boolean;\n    clickOutsideToClose?: boolean;\n    okButtonText?: string;\n    cancelButtonText?: string;\n    hideOkButton?: boolean;\n    hideCancelButton?: boolean;\n    buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n    variant?: \"text\" | \"fill\"\n    onConfirm?: () => Promise<void> | void;\n    onCancel?: () => Promise<void> | void;\n    transition?: TransitionVariantTypes;\n    blurMode?: ModalProps['blurMode'];\n    slotProps?: {\n        modal?: Omit<ModalProps, 'open' | \"children\">;\n        okButton?: Omit<ButtonProps, \"children\">;\n        closeButton?: Omit<ButtonProps, \"children\">;\n    }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n    let {\n        open,\n        loading,\n        content,\n        size,\n        color,\n        direction,\n        variant,\n        closeButton,\n        clickOutsideToClose,\n        okButtonText,\n        cancelButtonText,\n        hideOkButton,\n        hideCancelButton,\n        buttonPlacement,\n        onConfirm,\n        onCancel,\n        transition,\n        blurMode,\n        slotProps,\n        ...rest\n    } = props\n\n    hideOkButton ??= false\n    hideCancelButton ??= false\n\n    size ??= \"small\"\n    color ??= 'surface'\n    variant ??= \"text\"\n    direction ??= \"column\"\n    buttonPlacement ??= \"end\"\n    let sx: any = {};\n\n    switch (buttonPlacement) {\n        case \"start\":\n            sx.justifyContent = 'flex-start'\n            break;\n        case \"end\":\n            sx.justifyContent = 'flex-end'\n            break;\n        case \"between\":\n            sx.justifyContent = 'space-between'\n            break;\n        case \"full\":\n            sx = {\n                \"& button\": {\n                    flex: 1\n                }\n            }\n            break;\n    }\n\n    let sizes: any = {\n        small: 320,\n        medium: 400,\n        large: 600\n    }\n\n    let okcolor = color\n    let closecolor = color\n    if (color === 'surface') {\n        okcolor = 'primary'\n        closecolor = 'surface'\n        variant = 'text'\n    } else {\n        if (variant === 'fill') {\n            okcolor = 'surface'\n            closecolor = 'surface'\n        } else {\n            okcolor = color\n            closecolor = 'surface'\n        }\n    }\n\n    return (<Modal\n        open={open}\n        {...slotProps?.modal}\n        size={sizes[size] || size}\n        blur={40}\n        blurMode={blurMode || \"transparent\"}\n        transition={transition || \"zoom\"}\n        onClickOutside={async () => {\n            if (clickOutsideToClose && !loading) {\n                onCancel && await onCancel()\n            }\n        }}\n    >\n        <Alert\n            direction={direction}\n            sx={{\n                px: 2,\n                py: 1,\n                pt: direction === 'row' ? 1 : 2\n            }}\n            color={color}\n            variant={variant}\n            onClose={closeButton ? close : undefined}\n            {...rest}\n        >\n            {content}\n            <Tag\n                sxr={{\n                    display: \"flex\",\n                    gap: 1,\n                    pt: 4,\n                    flexDirection: \"row\",\n                    ...sx,\n                }}\n            >\n                {!hideCancelButton && <Button\n                    disabled={loading}\n                    color={closecolor}\n                    variant=\"fill\"\n                    {...slotProps?.closeButton}\n                    onClick={async () => {\n                        onCancel && await onCancel()\n                    }}\n                >{cancelButtonText || \"Close\"}</Button>}\n                <Button\n                    loading={loading}\n                    color={okcolor}\n                    variant=\"fill\"\n                    {...slotProps?.okButton}\n\n                    onClick={async () => {\n                        onConfirm && await onConfirm()\n                    }}\n                >{okButtonText || \"OK\"}</Button>\n            </Tag>\n        </Alert>\n    </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n    const Inst = (_props: any) => <ConfirmAlert {..._props} />\n    const confirm = Renderar.render(Inst as any, {\n        ...props,\n        open: true,\n        loading: false,\n        onConfirm: async () => {\n            if (onConfirm) {\n                confirm.updateProps({ loading: true })\n                if (onConfirm) await onConfirm()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        onCancel: async () => {\n            if (onCancel) {\n                confirm.updateProps({ loading: true })\n                await onCancel()\n                confirm.updateProps({ open: false, loading: false })\n            } else {\n                confirm.updateProps({ open: false })\n            }\n        },\n        slotProps: {\n            ...props.slotProps,\n            modal: {\n                ...props.slotProps?.modal,\n                onExited: () => {\n                    confirm.unrender()\n                    if (props?.slotProps?.modal?.onExited) {\n                        props.slotProps?.modal?.onExited()\n                    }\n                },\n            }\n        },\n    })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACA;AACA;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}

package/Autocomplete/index.cjs

@@ -35,7 +35,7 @@ const Autocomplete = (_a) => {
     }
     if (!!value && multiple && Array.isArray(value)) {
         value.map((v, index$2) => {
-            startIcons.push(jsxRuntime.jsx(index, { size: "small", label: getLabel(v), variant: "fill", color: "default", endIcon: jsxRuntime.jsx(index$1, { size: 20, variant: "text", color: "default", onClick: (e) => {
+            startIcons.push(jsxRuntime.jsx(index, { size: "small", label: getLabel(v), variant: "fill", color: "surface", endIcon: jsxRuntime.jsx(index$1, { size: 20, variant: "text", color: "surface", onClick: (e) => {
                         e.stopPropagation();
                         let newValue = Array.isArray(value) ? [...value] : [];
                         newValue = newValue.filter((val) => getLabel(val) !== getLabel(v));
@@ -51,7 +51,7 @@ const Autocomplete = (_a) => {
         endIcons.push(jsxRuntime.jsx(index$2, { size: "small" }, "auto-complete-loading-icon"));
     }
     else if (!!value && !multiple) {
-        endIcons.unshift(jsxRuntime.jsx(index$1, { variant: "text", color: "default", onClick: (e) => {
+        endIcons.unshift(jsxRuntime.jsx(index$1, { variant: "text", color: "surface", onClick: (e) => {
                 e.stopPropagation();
                 onChange && onChange(null);
                 setInputValue("");