@xanui/ui 1.1.6 → 1.1.7

package/Button/index.js

@@ -30,26 +30,26 @@
     corner = p.corner;
     size = p.size;
     direction = p.direction || "row";
-    const _d = core.useColorTemplate(color, variant), { hover: templateHover } = _d, templatecss = tslib.__rest(_d, ["hover"]);
+    const template = core.useColorTemplate(color, variant);
     const cornerCss = index$1.default(corner);
     const sizes = {
         small: {
-            height: 32,
-            px: 2,
+            height: 40,
+            px: (startIcon || endIcon) ? 1 : 1.5,
             gap: .5,
-            fontSize: 12
+            fontSize: 'button'
         },
         medium: {
-            height: 40,
-            px: 2,
+            height: 46,
+            px: (startIcon || endIcon) ? 1.5 : 2,
             gap: 1,
-            fontSize: 14
+            fontSize: 'button'
         },
         large: {
             height: 52,
-            px: 3,
+            px: (startIcon || endIcon) ? 2 : 3,
             gap: 1,
-            fontSize: 16
+            fontSize: "text"
         }
     };
     const progressSizes = {
@@ -63,7 +63,7 @@
         _size.gap = .5;
         _size.py = 1;
     }
-    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", border: 0, cursor: "pointer", font: "button", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none" }, _size), cornerCss), templatecss), hover: Object.assign(Object.assign({}, templateHover), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_b = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _b !== void 0 ? _b : false, ref: ref, children: [loading && jsxRuntime.jsx(core.Tag, { baseClass: 'button-loading-container', sxr: {
+    return (jsxRuntime.jsxs(core.Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_b = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _b !== void 0 ? _b : false, ref: ref, children: [loading && jsxRuntime.jsx(core.Tag, { baseClass: 'button-loading-container', sxr: {
                     position: "absolute",
                     top: 0,
                     left: 0,
@@ -73,6 +73,5 @@
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                    bgcolor: core.alpha(templatecss.color, 0.4)
-                }, children: jsxRuntime.jsx(index.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", hideTrack: true, size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", children: startIcon }), children, endIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", children: endIcon })] })));
+                }, children: jsxRuntime.jsx(index.default, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", flexShrink: 0, children: startIcon }), children, endIcon && jsxRuntime.jsx(core.Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", flexShrink: 0, children: endIcon })] })));
 });exports.default=Button;//# sourceMappingURL=index.js.map

package/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateColors, ColorTemplateType, useBreakpointProps, useBreakpointPropsType, alpha } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\n        variant: \"fill\",\n        color: \"brand\",\n        corner: \"rounded\",\n        size: \"medium\"\n    })\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (direction) _p.direction = direction\n    const p: any = useBreakpointProps(_p)\n\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color\n    variant = p.variant\n    corner = p.corner\n    size = p.size\n    direction = p.direction || \"row\"\n\n    const { hover: templateHover, ...templatecss } = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 32,\n            px: 2,\n            gap: .5,\n            fontSize: 12\n        },\n        medium: {\n            height: 40,\n            px: 2,\n            gap: 1,\n            fontSize: 14\n        },\n        large: {\n            height: 52,\n            px: 3,\n            gap: 1,\n            fontSize: 16\n        }\n    }\n\n    const progressSizes: any = {\n        small: 20,\n        medium: 25,\n        large: 30\n    }\n\n    let _size = (sizes[size as any] || {})\n    if (direction === 'column') {\n        delete _size.height\n        _size.gap = .5\n        _size.py = 1\n    }\n\n    return (\n        <Tag\n            component='button'\n            baseClass='button'\n            {..._props}\n            sxr={{\n                flexShrink: \"0\",\n                whiteSpace: \"nowrap\",\n                border: 0,\n                cursor: \"pointer\",\n                font: \"button\",\n                display: \"flex\",\n                textTransform: \"uppercase\",\n                flexDirection: direction,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                overflow: \"hidden\",\n                userSelect: \"none\",\n                ..._size,\n                ...cornerCss,\n                ...templatecss,\n            }}\n            hover={{\n                ...templateHover,\n                ...((_props as any)?.hover || {})\n            }}\n            disabled={loading ?? _props.disabled ?? false}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass='button-loading-container'\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                    bgcolor: alpha(templatecss.color as string, 0.4)\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'default' ? `brand` : \"default\"}\n                    hideTrack\n                    size={progressSizes[size]}\n                    className='button-loading-progress'\n                />\n            </Tag>}\n            {startIcon && <Tag\n                baseClass='button-start-icon'\n                component='span'\n                display=\"inline-block\"\n            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","useCorner","_jsxs","Tag","_jsx","alpha","CircleProgress"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Button/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\n        variant: \"fill\",\n        color: \"brand\",\n        corner: \"rounded\",\n        size: \"medium\"\n    })\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (direction) _p.direction = direction\n    const p: any = useBreakpointProps(_p)\n\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color\n    variant = p.variant\n    corner = p.corner\n    size = p.size\n    direction = p.direction || \"row\"\n\n    const template = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 40,\n            px: (startIcon || endIcon) ? 1 : 1.5,\n            gap: .5,\n            fontSize: 'button'\n        },\n        medium: {\n            height: 46,\n            px: (startIcon || endIcon) ? 1.5 : 2,\n            gap: 1,\n            fontSize: 'button'\n        },\n        large: {\n            height: 52,\n            px: (startIcon || endIcon) ? 2 : 3,\n            gap: 1,\n            fontSize: \"text\"\n        }\n    }\n\n    const progressSizes: any = {\n        small: 20,\n        medium: 25,\n        large: 30\n    }\n\n    let _size = (sizes[size as any] || {})\n    if (direction === 'column') {\n        delete _size.height\n        _size.gap = .5\n        _size.py = 1\n    }\n\n    return (\n        <Tag\n            component='button'\n            baseClass='button'\n            {..._props}\n            sxr={{\n                flexShrink: \"0\",\n                whiteSpace: \"nowrap\",\n                cursor: \"pointer\",\n                display: \"flex\",\n                textTransform: \"uppercase\",\n                flexDirection: direction,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                overflow: \"hidden\",\n                userSelect: \"none\",\n                fontWeight: 500,\n                ..._size,\n                ...cornerCss,\n                ...template.primary,\n\n            }}\n            hover={{\n                ...template.secondary,\n                ...((_props as any)?.hover || {})\n            }}\n            disabled={loading ?? _props.disabled ?? false}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass='button-loading-container'\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'default' ? `brand` : \"default\"}\n                    size={progressSizes[size]}\n                    className='button-loading-progress'\n                />\n            </Tag>}\n            {startIcon && <Tag\n                baseClass='button-start-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","useCorner","_jsxs","Tag","_jsx","CircleProgress"],"mappings":"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"}

package/Button/index.mjs

@@ -1,4 +1,4 @@
-import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React from'react';import {useInterface,useBreakpointProps,useColorTemplate,Tag,alpha}from'@xanui/core';import useCorner from'../useCorner/index.mjs';import CircleProgress from'../CircleProgress/index.mjs';const Button = React.forwardRef((_a, ref) => {
+import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React from'react';import {useInterface,useBreakpointProps,useColorTemplate,Tag}from'@xanui/core';import useCorner from'../useCorner/index.mjs';import CircleProgress from'../CircleProgress/index.mjs';const Button = React.forwardRef((_a, ref) => {
     var _b;
     var { children } = _a, rest = __rest(_a, ["children"]);
     let [_c] = useInterface('Button', rest, {
@@ -30,26 +30,26 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
     corner = p.corner;
     size = p.size;
     direction = p.direction || "row";
-    const _d = useColorTemplate(color, variant), { hover: templateHover } = _d, templatecss = __rest(_d, ["hover"]);
+    const template = useColorTemplate(color, variant);
     const cornerCss = useCorner(corner);
     const sizes = {
         small: {
-            height: 32,
-            px: 2,
+            height: 40,
+            px: (startIcon || endIcon) ? 1 : 1.5,
             gap: .5,
-            fontSize: 12
+            fontSize: 'button'
         },
         medium: {
-            height: 40,
-            px: 2,
+            height: 46,
+            px: (startIcon || endIcon) ? 1.5 : 2,
             gap: 1,
-            fontSize: 14
+            fontSize: 'button'
         },
         large: {
             height: 52,
-            px: 3,
+            px: (startIcon || endIcon) ? 2 : 3,
             gap: 1,
-            fontSize: 16
+            fontSize: "text"
         }
     };
     const progressSizes = {
@@ -63,7 +63,7 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
         _size.gap = .5;
         _size.py = 1;
     }
-    return (jsxs(Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", border: 0, cursor: "pointer", font: "button", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none" }, _size), cornerCss), templatecss), hover: Object.assign(Object.assign({}, templateHover), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_b = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _b !== void 0 ? _b : false, ref: ref, children: [loading && jsx(Tag, { baseClass: 'button-loading-container', sxr: {
+    return (jsxs(Tag, Object.assign({ component: 'button', baseClass: 'button' }, _props, { sxr: Object.assign(Object.assign(Object.assign({ flexShrink: "0", whiteSpace: "nowrap", cursor: "pointer", display: "flex", textTransform: "uppercase", flexDirection: direction, alignItems: "center", justifyContent: "center", position: "relative", overflow: "hidden", userSelect: "none", fontWeight: 500 }, _size), cornerCss), template.primary), hover: Object.assign(Object.assign({}, template.secondary), ((_props === null || _props === void 0 ? void 0 : _props.hover) || {})), disabled: (_b = loading !== null && loading !== void 0 ? loading : _props.disabled) !== null && _b !== void 0 ? _b : false, ref: ref, children: [loading && jsx(Tag, { baseClass: 'button-loading-container', sxr: {
                     position: "absolute",
                     top: 0,
                     left: 0,
@@ -73,6 +73,5 @@ import {__rest}from'tslib';import {jsxs,jsx}from'react/jsx-runtime';import React
                     display: "flex",
                     justifyContent: "center",
                     alignItems: "center",
-                    bgcolor: alpha(templatecss.color, 0.4)
-                }, children: jsx(CircleProgress, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", hideTrack: true, size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsx(Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", children: startIcon }), children, endIcon && jsx(Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", children: endIcon })] })));
+                }, children: jsx(CircleProgress, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.loading, { color: color === 'default' ? `brand` : "default", size: progressSizes[size], className: 'button-loading-progress' })) }), startIcon && jsx(Tag, { baseClass: 'button-start-icon', component: 'span', display: "inline-block", flexShrink: 0, children: startIcon }), children, endIcon && jsx(Tag, { baseClass: 'button-end-icon', component: 'span', display: "inline-block", flexShrink: 0, children: endIcon })] })));
 });export{Button as default};//# sourceMappingURL=index.mjs.map

package/Button/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, ColorTemplateColors, ColorTemplateType, useBreakpointProps, useBreakpointPropsType, alpha } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\n        variant: \"fill\",\n        color: \"brand\",\n        corner: \"rounded\",\n        size: \"medium\"\n    })\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (direction) _p.direction = direction\n    const p: any = useBreakpointProps(_p)\n\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color\n    variant = p.variant\n    corner = p.corner\n    size = p.size\n    direction = p.direction || \"row\"\n\n    const { hover: templateHover, ...templatecss } = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 32,\n            px: 2,\n            gap: .5,\n            fontSize: 12\n        },\n        medium: {\n            height: 40,\n            px: 2,\n            gap: 1,\n            fontSize: 14\n        },\n        large: {\n            height: 52,\n            px: 3,\n            gap: 1,\n            fontSize: 16\n        }\n    }\n\n    const progressSizes: any = {\n        small: 20,\n        medium: 25,\n        large: 30\n    }\n\n    let _size = (sizes[size as any] || {})\n    if (direction === 'column') {\n        delete _size.height\n        _size.gap = .5\n        _size.py = 1\n    }\n\n    return (\n        <Tag\n            component='button'\n            baseClass='button'\n            {..._props}\n            sxr={{\n                flexShrink: \"0\",\n                whiteSpace: \"nowrap\",\n                border: 0,\n                cursor: \"pointer\",\n                font: \"button\",\n                display: \"flex\",\n                textTransform: \"uppercase\",\n                flexDirection: direction,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                overflow: \"hidden\",\n                userSelect: \"none\",\n                ..._size,\n                ...cornerCss,\n                ...templatecss,\n            }}\n            hover={{\n                ...templateHover,\n                ...((_props as any)?.hover || {})\n            }}\n            disabled={loading ?? _props.disabled ?? false}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass='button-loading-container'\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                    bgcolor: alpha(templatecss.color as string, 0.4)\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'default' ? `brand` : \"default\"}\n                    hideTrack\n                    size={progressSizes[size]}\n                    className='button-loading-progress'\n                />\n            </Tag>}\n            {startIcon && <Tag\n                baseClass='button-start-icon'\n                component='span'\n                display=\"inline-block\"\n            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/Button/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\nimport useCorner, { UseCornerTypes } from '../useCorner'\nimport CircleProgress, { CircleProgressProps } from '../CircleProgress'\n\n\nexport type ButtonProps<T extends TagComponentType = 'button'> = Omit<TagProps<T>, \"color\" | \"size\" | \"direction\"> & {\n    startIcon?: useBreakpointPropsType<ReactElement>;\n    endIcon?: useBreakpointPropsType<ReactElement>;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    corner?: useBreakpointPropsType<UseCornerTypes>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n    direction?: useBreakpointPropsType<\"row\" | \"column\">;\n    loading?: boolean;\n    slotProps?: {\n        loading?: Omit<CircleProgressProps, \"color\" | \"hideTrack\" | \"size\">\n    }\n}\n\n\nconst Button = React.forwardRef(<T extends TagComponentType = 'button'>({ children, ...rest }: ButtonProps<T>, ref: React.Ref<any>) => {\n    let [{ variant, startIcon, endIcon, color, corner, size, loading, direction, slotProps, ..._props }] = useInterface<any>('Button', rest, {\n        variant: \"fill\",\n        color: \"brand\",\n        corner: \"rounded\",\n        size: \"medium\"\n    })\n\n    const _p: any = {}\n    if (startIcon) _p.startIcon = startIcon\n    if (endIcon) _p.endIcon = endIcon\n    if (color) _p.color = color\n    if (variant) _p.variant = variant\n    if (corner) _p.corner = corner\n    if (size) _p.size = size\n    if (direction) _p.direction = direction\n    const p: any = useBreakpointProps(_p)\n\n    startIcon = p.startIcon\n    endIcon = p.endIcon\n    color = p.color\n    variant = p.variant\n    corner = p.corner\n    size = p.size\n    direction = p.direction || \"row\"\n\n    const template = useColorTemplate(color, variant)\n    const cornerCss = useCorner(corner)\n\n    const sizes: any = {\n        small: {\n            height: 40,\n            px: (startIcon || endIcon) ? 1 : 1.5,\n            gap: .5,\n            fontSize: 'button'\n        },\n        medium: {\n            height: 46,\n            px: (startIcon || endIcon) ? 1.5 : 2,\n            gap: 1,\n            fontSize: 'button'\n        },\n        large: {\n            height: 52,\n            px: (startIcon || endIcon) ? 2 : 3,\n            gap: 1,\n            fontSize: \"text\"\n        }\n    }\n\n    const progressSizes: any = {\n        small: 20,\n        medium: 25,\n        large: 30\n    }\n\n    let _size = (sizes[size as any] || {})\n    if (direction === 'column') {\n        delete _size.height\n        _size.gap = .5\n        _size.py = 1\n    }\n\n    return (\n        <Tag\n            component='button'\n            baseClass='button'\n            {..._props}\n            sxr={{\n                flexShrink: \"0\",\n                whiteSpace: \"nowrap\",\n                cursor: \"pointer\",\n                display: \"flex\",\n                textTransform: \"uppercase\",\n                flexDirection: direction,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                position: \"relative\",\n                overflow: \"hidden\",\n                userSelect: \"none\",\n                fontWeight: 500,\n                ..._size,\n                ...cornerCss,\n                ...template.primary,\n\n            }}\n            hover={{\n                ...template.secondary,\n                ...((_props as any)?.hover || {})\n            }}\n            disabled={loading ?? _props.disabled ?? false}\n            ref={ref}\n        >\n            {loading && <Tag\n                baseClass='button-loading-container'\n                sxr={{\n                    position: \"absolute\",\n                    top: 0,\n                    left: 0,\n                    right: 0,\n                    bottom: 0,\n                    zIndex: 1,\n                    display: \"flex\",\n                    justifyContent: \"center\",\n                    alignItems: \"center\",\n                }}\n            >\n                <CircleProgress\n                    {...slotProps?.loading}\n                    color={color === 'default' ? `brand` : \"default\"}\n                    size={progressSizes[size]}\n                    className='button-loading-progress'\n                />\n            </Tag>}\n            {startIcon && <Tag\n                baseClass='button-start-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{startIcon}</Tag>}\n            {children}\n            {endIcon && <Tag\n                baseClass='button-end-icon'\n                component='span'\n                display=\"inline-block\"\n                flexShrink={0}\n            >{endIcon}</Tag>}\n        </Tag>\n    )\n})\n\nexport default Button\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/ButtonGroup/index.d.ts

@@ -1,11 +1,11 @@
 import React, { ReactElement } from 'react';
-import { TagComponentType, TagProps, useBreakpointPropsType, ColorTemplateColors, ColorTemplateType } from '@xanui/core';
+import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateColor, UseColorTemplateType } from '@xanui/core';
 import { ButtonProps } from '../Button/index.js';
 
 type ButtonGroupProps<T extends TagComponentType = "div"> = Omit<TagProps<T>, 'children' | "size"> & {
     children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];
-    color?: useBreakpointPropsType<ColorTemplateColors>;
-    variant?: useBreakpointPropsType<ColorTemplateType>;
+    color?: useBreakpointPropsType<UseColorTemplateColor>;
+    variant?: useBreakpointPropsType<UseColorTemplateType>;
     size?: useBreakpointPropsType<"small" | "medium" | "large">;
 };
 declare const ButtonGroup: React.ForwardRefExoticComponent<Omit<ButtonGroupProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;

package/ButtonGroup/index.js

@@ -1,47 +1,48 @@
 'use strict';Object.defineProperty(exports,'__esModule',{value:true});var tslib=require('tslib'),jsxRuntime=require('react/jsx-runtime'),React=require('react'),core=require('@xanui/core');const ButtonGroup = React.forwardRef((_a, ref) => {
     var { children } = _a, rest = tslib.__rest(_a, ["children"]);
     let [_b] = core.useInterface("ButtonGroup", rest, {
-        size: "medium"
+        size: "medium",
+        variant: "outline",
+        color: "default"
     }), { color, variant, size } = _b, props = tslib.__rest(_b, ["color", "variant", "size"]);
     const _p = {};
     if (color)
         _p.color = color;
     const p = core.useBreakpointProps(_p);
     color = p.color;
-    const template = core.useColorTemplate(color, "outline");
     const sizes = {
         small: {
-            height: 32,
+            height: 40,
         },
         medium: {
-            height: 40,
+            height: 46,
         },
         large: {
             height: 52,
         }
     };
+    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`;
     return (jsxRuntime.jsx(core.Tag, Object.assign({}, props, sizes[size], { sxr: {
             display: "inline-flex",
+            flexWrap: "nowrap",
             overflow: "hidden",
             radius: 1,
-            '& button:not(:last-of-type)': {
-                borderTopRightRadius: 0,
-                borderBottomRightRadius: 0,
-                borderRight: 1,
-                borderColor: template.borderColor
+            border: "1px solid",
+            borderColor: borderColor,
+            '& button, & button:hover': {
+                borderRight: "1px solid",
+                borderColor: borderColor
             },
-            '& button:not(:first-of-type)': {
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-                borderLeft: 0
+            "& button:last-child, & button:last-child:hover": {
+                borderRight: "none"
             }
         }, baseClass: 'button-group', ref: ref, children: React.Children.map(children, (child) => {
             return React.cloneElement(child, {
-                flex: 1,
+                flex: "0 0 auto",
                 color,
                 variant,
                 size,
-                corner: "squar"
+                corner: "squar",
             });
         }) })));
 });exports.default=ButtonGroup;//# sourceMappingURL=index.js.map

package/ButtonGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, ColorTemplateType, useColorTemplate, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\"\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const template = useColorTemplate(color, \"outline\")\n\n    const sizes: any = {\n        small: {\n            height: 32,\n        },\n        medium: {\n            height: 40,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                overflow: \"hidden\",\n                radius: 1,\n                '& button:not(:last-of-type)': {\n                    borderTopRightRadius: 0,\n                    borderBottomRightRadius: 0,\n                    borderRight: 1,\n                    borderColor: template.borderColor\n                },\n                '& button:not(:first-of-type)': {\n                    borderTopLeftRadius: 0,\n                    borderBottomLeftRadius: 0,\n                    borderLeft: 0\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: 1,\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\"\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","Tag","Children","cloneElement"],"mappings":"4LAYA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuCC,iBAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE;AACT,KAAA,CAAC,EAFG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAErC;IACF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;IAEf,MAAM,QAAQ,GAAGC,qBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC;AAEnD,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,6BAA6B,EAAE;AAC3B,gBAAA,oBAAoB,EAAE,CAAC;AACvB,gBAAA,uBAAuB,EAAE,CAAC;AAC1B,gBAAA,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,QAAQ,CAAC;AACzB,aAAA;AACD,YAAA,8BAA8B,EAAE;AAC5B,gBAAA,mBAAmB,EAAE,CAAC;AACtB,gBAAA,sBAAsB,EAAE,CAAC;AACzB,gBAAA,UAAU,EAAE;AACf;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEPC,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAOC,kBAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,CAAC;gBACP,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE;AACX,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC"}
+{"version":3,"file":"index.js","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: \"default\"\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":["__rest","useInterface","useBreakpointProps","_jsx","Tag","Children","cloneElement"],"mappings":"4LAYA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuCC,iBAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE;AACV,KAAA,CAAC,EAJG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAIrC;IACF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQE,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AAEf,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,IAAI,WAAW,GAAG,KAAK,KAAK,SAAS,GAAG,mBAAmB,GAAG,CAAA,EAAG,KAAK,YAAY;AAElF,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,0BAA0B,EAAE;AACxB,gBAAA,WAAW,EAAE,WAAW;AACxB,gBAAA,WAAW,EAAE;AAChB,aAAA;AACD,YAAA,gDAAgD,EAAE;AAC9C,gBAAA,WAAW,EAAE;AAChB;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEPC,cAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAOC,kBAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE,OAAO;AAClB,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC"}

package/ButtonGroup/index.mjs

@@ -1,47 +1,48 @@
-import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{Children,cloneElement}from'react';import {useInterface,useBreakpointProps,useColorTemplate,Tag}from'@xanui/core';const ButtonGroup = React.forwardRef((_a, ref) => {
+import {__rest}from'tslib';import {jsx}from'react/jsx-runtime';import React,{Children,cloneElement}from'react';import {useInterface,useBreakpointProps,Tag}from'@xanui/core';const ButtonGroup = React.forwardRef((_a, ref) => {
     var { children } = _a, rest = __rest(_a, ["children"]);
     let [_b] = useInterface("ButtonGroup", rest, {
-        size: "medium"
+        size: "medium",
+        variant: "outline",
+        color: "default"
     }), { color, variant, size } = _b, props = __rest(_b, ["color", "variant", "size"]);
     const _p = {};
     if (color)
         _p.color = color;
     const p = useBreakpointProps(_p);
     color = p.color;
-    const template = useColorTemplate(color, "outline");
     const sizes = {
         small: {
-            height: 32,
+            height: 40,
         },
         medium: {
-            height: 40,
+            height: 46,
         },
         large: {
             height: 52,
         }
     };
+    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`;
     return (jsx(Tag, Object.assign({}, props, sizes[size], { sxr: {
             display: "inline-flex",
+            flexWrap: "nowrap",
             overflow: "hidden",
             radius: 1,
-            '& button:not(:last-of-type)': {
-                borderTopRightRadius: 0,
-                borderBottomRightRadius: 0,
-                borderRight: 1,
-                borderColor: template.borderColor
+            border: "1px solid",
+            borderColor: borderColor,
+            '& button, & button:hover': {
+                borderRight: "1px solid",
+                borderColor: borderColor
             },
-            '& button:not(:first-of-type)': {
-                borderTopLeftRadius: 0,
-                borderBottomLeftRadius: 0,
-                borderLeft: 0
+            "& button:last-child, & button:last-child:hover": {
+                borderRight: "none"
             }
         }, baseClass: 'button-group', ref: ref, children: Children.map(children, (child) => {
             return cloneElement(child, {
-                flex: 1,
+                flex: "0 0 auto",
                 color,
                 variant,
                 size,
-                corner: "squar"
+                corner: "squar",
             });
         }) })));
 });export{ButtonGroup as default};//# sourceMappingURL=index.mjs.map

package/ButtonGroup/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, ColorTemplateColors, ColorTemplateType, useColorTemplate, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n    variant?: useBreakpointPropsType<ColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\"\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const template = useColorTemplate(color, \"outline\")\n\n    const sizes: any = {\n        small: {\n            height: 32,\n        },\n        medium: {\n            height: 40,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                overflow: \"hidden\",\n                radius: 1,\n                '& button:not(:last-of-type)': {\n                    borderTopRightRadius: 0,\n                    borderBottomRightRadius: 0,\n                    borderRight: 1,\n                    borderColor: template.borderColor\n                },\n                '& button:not(:first-of-type)': {\n                    borderTopLeftRadius: 0,\n                    borderBottomLeftRadius: 0,\n                    borderLeft: 0\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: 1,\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\"\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":["_jsx"],"mappings":"8LAYA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuC,YAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE;AACT,KAAA,CAAC,EAFG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAErC;IACF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;IAEf,MAAM,QAAQ,GAAG,gBAAgB,CAAC,KAAK,EAAE,SAAS,CAAC;AAEnD,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,6BAA6B,EAAE;AAC3B,gBAAA,oBAAoB,EAAE,CAAC;AACvB,gBAAA,uBAAuB,EAAE,CAAC;AAC1B,gBAAA,WAAW,EAAE,CAAC;gBACd,WAAW,EAAE,QAAQ,CAAC;AACzB,aAAA;AACD,YAAA,8BAA8B,EAAE;AAC5B,gBAAA,mBAAmB,EAAE,CAAC;AACtB,gBAAA,sBAAsB,EAAE,CAAC;AACzB,gBAAA,UAAU,EAAE;AACf;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAO,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,CAAC;gBACP,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE;AACX,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC"}
+{"version":3,"file":"index.mjs","sources":["../../src/ButtonGroup/index.tsx"],"sourcesContent":["\nimport React, { ReactElement, Children, cloneElement } from 'react';\nimport { Tag, TagProps, TagComponentType, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\nimport { ButtonProps } from '../Button';\n\nexport type ButtonGroupProps<T extends TagComponentType = \"div\"> = Omit<TagProps<T>, 'children' | \"size\"> & {\n    children?: ReactElement<ButtonProps> | ReactElement<ButtonProps>[];\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n    variant?: useBreakpointPropsType<UseColorTemplateType>;\n    size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\nconst ButtonGroup = React.forwardRef(<T extends TagComponentType = \"div\">({ children, ...rest }: ButtonGroupProps<T>, ref: React.Ref<any>) => {\n    let [{ color, variant, size, ...props }] = useInterface<any>(\"ButtonGroup\", rest, {\n        size: \"medium\",\n        variant: \"outline\",\n        color: \"default\"\n    })\n    const _p: any = {}\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color\n\n    const sizes: any = {\n        small: {\n            height: 40,\n        },\n        medium: {\n            height: 46,\n        },\n        large: {\n            height: 52,\n        }\n    }\n\n    let borderColor = color === 'default' ? 'divider.secondary' : `${color}.secondary`\n\n    return (\n        <Tag\n            {...props}\n            {...sizes[size]}\n            sxr={{\n                display: \"inline-flex\",\n                flexWrap: \"nowrap\",\n                overflow: \"hidden\",\n                radius: 1,\n                border: \"1px solid\",\n                borderColor: borderColor,\n                '& button, & button:hover': {\n                    borderRight: \"1px solid\",\n                    borderColor: borderColor\n                },\n                \"& button:last-child, & button:last-child:hover\": {\n                    borderRight: \"none\"\n                }\n            }}\n            baseClass='button-group'\n            ref={ref}\n        >\n            {Children.map(children, (child: any) => {\n                return cloneElement(child, {\n                    flex: \"0 0 auto\",\n                    color,\n                    variant,\n                    size,\n                    corner: \"squar\",\n                })\n            })}\n        </Tag>\n    )\n})\n\nexport default ButtonGroup\n\n\n"],"names":["_jsx"],"mappings":"6KAYA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAqC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;AACzF,IAAA,IAAI,OAAuC,YAAY,CAAM,aAAa,EAAE,IAAI,EAAE;AAC9E,QAAA,IAAI,EAAE,QAAQ;AACd,QAAA,OAAO,EAAE,SAAS;AAClB,QAAA,KAAK,EAAE;AACV,KAAA,CAAC,EAJG,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAAhC,CAAA,OAAA,EAAA,SAAA,EAAA,MAAA,CAAkC,CAIrC;IACF,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK;AAEf,IAAA,MAAM,KAAK,GAAQ;AACf,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,MAAM,EAAE;AACJ,YAAA,MAAM,EAAE,EAAE;AACb,SAAA;AACD,QAAA,KAAK,EAAE;AACH,YAAA,MAAM,EAAE,EAAE;AACb;KACJ;AAED,IAAA,IAAI,WAAW,GAAG,KAAK,KAAK,SAAS,GAAG,mBAAmB,GAAG,CAAA,EAAG,KAAK,YAAY;AAElF,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,KAAK,EACL,KAAK,CAAC,IAAI,CAAC,EAAA,EACf,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,aAAa;AACtB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,MAAM,EAAE,CAAC;AACT,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,WAAW,EAAE,WAAW;AACxB,YAAA,0BAA0B,EAAE;AACxB,gBAAA,WAAW,EAAE,WAAW;AACxB,gBAAA,WAAW,EAAE;AAChB,aAAA;AACD,YAAA,gDAAgD,EAAE;AAC9C,gBAAA,WAAW,EAAE;AAChB;AACJ,SAAA,EACD,SAAS,EAAC,cAAc,EACxB,GAAG,EAAE,GAAG,EAAA,QAAA,EAEP,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAU,KAAI;YACnC,OAAO,YAAY,CAAC,KAAK,EAAE;AACvB,gBAAA,IAAI,EAAE,UAAU;gBAChB,KAAK;gBACL,OAAO;gBACP,IAAI;AACJ,gBAAA,MAAM,EAAE,OAAO;AAClB,aAAA,CAAC;QACN,CAAC,CAAC,EAAA,CAAA,CACA;AAEd,CAAC"}

package/Calendar/index.d.ts

@@ -1,12 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { useBreakpointPropsType, ColorTemplateColors } from '@xanui/core';
+import { useBreakpointPropsType, UseColorTemplateColor } from '@xanui/core';
 
 type CalendarProps = {
     value?: Date | null;
     onChange?: (date: Date | null) => void;
     viewMode?: useBreakpointPropsType<"year" | "month" | "day">;
     onButtonClick?: (mode: CalendarProps["viewMode"], value: CalendarProps["value"]) => void;
-    color?: useBreakpointPropsType<ColorTemplateColors>;
+    color?: useBreakpointPropsType<UseColorTemplateColor>;
 };
 declare const Calendar: ({ value, ...rest }: CalendarProps) => react_jsx_runtime.JSX.Element;
 

package/Calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport Stack from '../Stack'\nimport IconButton from '../IconButton';\nimport IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';\nimport IconKeyboardArrowLeft from '@xanui/icons/KeyboardArrowLeft';\nimport Text from '../Text';\nimport Button from '../Button';\nimport ResetIcon from '@xanui/icons/Replay';\nimport ViewBox from '../ViewBox';\nimport { ColorTemplateColors, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\n\nexport type CalendarProps = {\n    value?: Date | null;\n    onChange?: (date: Date | null) => void;\n    viewMode?: useBreakpointPropsType<\"year\" | \"month\" | \"day\">;\n    onButtonClick?: (mode: CalendarProps[\"viewMode\"], value: CalendarProps[\"value\"]) => void;\n    color?: useBreakpointPropsType<ColorTemplateColors>;\n}\n\n\nconst ShowYears = ({ color, year, today, boxWidth, onClick }: any) => {\n    let years: any[] = []\n    const selectedRef: any = useRef(null)\n    for (let y = 1900; y < today.getFullYear() + 40; y++) {\n        const selected = year == y\n        years.push(<Stack\n            key={y}\n            sx={{\n                width: (boxWidth - 12) / 3,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                p: .1\n            }}\n            className='calender-year-item'\n        >\n            <Button\n                color={selected ? color : \"default\"}\n                className='calender-year-button'\n                size='small'\n                corner=\"circle\"\n                ref={selected ? selectedRef : null}\n                onClick={() => onClick(y)}\n                variant={selected ? \"fill\" : \"text\"}\n            >\n                {y}\n            </Button>\n        </Stack>)\n    }\n\n    useEffect(() => {\n        if (selectedRef?.current) {\n            selectedRef?.current.scrollIntoView({ behavior: \"smooth\", block: \"center\", inline: \"nearest\" })\n        }\n    }, [])\n\n    return (\n        <Stack\n            sx={{\n                flexWrap: \"wrap\",\n                flexDirection: \"row\",\n                overflow: \"hidden\",\n                overflowY: \"auto\"\n            }}\n            className='calender-years'\n        >\n            {years}\n        </Stack>\n    )\n}\n\n\nconst Calendar = ({ value, ...rest }: CalendarProps) => {\n    let [{ onChange, viewMode: VMode, onButtonClick, color }] = useInterface<any>(\"Calender\", rest, {})\n    const _p: any = {}\n    if (VMode) _p.VMode = VMode\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color || \"brand\"\n\n    let [viewMode, setViewMode] = useState<any>(p.VMode || \"day\");\n    let [selectedDate, setSelectedDate] = useState(new Date());\n    selectedDate = value instanceof Date ? value : selectedDate\n    const [currentDate, setCurrentDate] = useState(selectedDate);\n    const year = currentDate.getFullYear()\n    const month = currentDate.getMonth()\n    const daysInMonth = 32 - new Date(year, month, 32).getDate()\n    const today = new Date();\n    const btnWidth = 32\n    const boxWidth = btnWidth * 7\n\n    const showCalendar = () => {\n\n        let firstDay = (new Date(year, month)).getDay();\n        let rows = []\n\n        let date = 1;\n        for (let i = 0; i < 6; i++) {\n            let row = []\n            for (let j = 0; j < 7; j++) {\n                if (i === 0 && j < firstDay) {\n                    row.push(<Stack\n                        width={btnWidth}\n                        height={btnWidth}\n                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        key={date + j + i}\n                    >\n                    </Stack>)\n                } else if (date > daysInMonth) {\n                    break;\n                } else {\n                    let isToday = date === today.getDate() && year === today.getFullYear() && month === today.getMonth()\n                    let isSelected = date === selectedDate.getDate() && year === selectedDate.getFullYear() && month === selectedDate.getMonth()\n\n                    let css: any = {}\n                    if (isToday) {\n                        css = {\n                            variant: \"outline\",\n                            color: color\n                        }\n                    }\n\n                    if (isSelected) {\n                        css = {\n                            variant: \"fill\",\n                            color: color\n                        }\n                    }\n\n                    row.push(<Stack\n                        sx={{\n                            width: btnWidth,\n                            height: btnWidth,\n                            alignItems: \"center\",\n                            justifyContent: \"center\"\n                        }}\n                        key={date + j + i}\n                        className='calender-day-item'\n                    >\n                        <IconButton\n                            className='calender-day-button'\n                            variant={isSelected ? \"fill\" : \"text\"}\n                            color={isToday ? color : \"default\"}\n                            {...css}\n                            data-value={date}\n                            onClick={(e: any) => {\n                                let d = e.target.getAttribute(\"data-value\")\n                                if (!d) return\n                                let selectedDate = new Date(year, month, parseInt(d))\n                                onChange ? onChange(selectedDate) : setSelectedDate(selectedDate)\n                                onButtonClick && onButtonClick(\"day\", selectedDate)\n                            }}\n                        >\n                            {date}\n                        </IconButton>\n                    </Stack>)\n                    date++;\n                }\n            }\n            rows.push(<Stack flexRow key={\"row\" + i} className='calender-day-row'>\n                {row}\n            </Stack>);\n        }\n        return rows\n    }\n\n    const showMonth = () => {\n        let months: any[] = []\n        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n        for (let m = 0; m < monthNames.length; m++) {\n            const selected = currentDate.getMonth() === m\n\n            months.push(<Stack\n                key={m}\n                width={(boxWidth - 12) / 2}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                p={.1}\n                className='calender-months-item'\n            >\n                <Button\n                    color={selected ? color : \"default\"}\n                    className='calender-month-button'\n                    size='small'\n                    corner=\"circle\"\n                    variant={selected ? \"fill\" : 'text'}\n                    onClick={() => {\n                        const v = new Date(currentDate.getFullYear(), m)\n                        setCurrentDate(v)\n                        setViewMode(\"day\")\n                        onButtonClick && onButtonClick(\"month\", v)\n                    }}\n                    sx={{\n                        color: selected ? \"brand.text\" : \"text.primary\"\n                    }}\n                >\n                    {monthNames[m]}\n                </Button>\n            </Stack>)\n        }\n\n        return (\n            <Stack\n                className='calender-months'\n                sx={{\n                    flexWrap: \"wrap\",\n                    overflow: \"hidden\",\n                    overflowY: \"auto\",\n                    flexDirection: \"row\"\n                }}\n            >\n                {months}\n            </Stack>\n        )\n    }\n\n    let view: any = null\n    switch (viewMode) {\n        case \"year\":\n            view = <ShowYears\n                color={color}\n                today={today}\n                year={year}\n                boxWidth={boxWidth}\n                onClick={(y: any) => {\n                    currentDate.setFullYear(y)\n                    setCurrentDate(currentDate)\n                    setViewMode(\"month\")\n                    onButtonClick && onButtonClick(\"year\", currentDate)\n                }}\n            />\n            break;\n        case \"month\":\n            view = showMonth()\n            break;\n        default:\n            view = (<>\n                <Stack flexRow className='calender-week-container'>\n                    {\n                        ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, idx) => (\n                            <Stack\n                                key={day + idx}\n                                width={btnWidth}\n                                height={btnWidth}\n                                alignItems=\"center\"\n                                justifyContent=\"center\"\n                            >\n                                <Text\n                                    fontWeight={500}\n                                    fontSize=\"button\"\n                                    color=\"text.secondary\"\n                                >\n                                    {day}\n                                </Text>\n                            </Stack>\n                        ))\n                    }\n                </Stack>\n                {showCalendar()}\n            </>\n            )\n            break;\n    }\n\n    return (\n        <ViewBox\n            className='calender-root'\n            maxHeight={308}\n            width={250}\n            radius={1}\n            bgcolor=\"background.primary\"\n            startContent={\n                <Stack className='calender-header' flexRow alignItems=\"center\" justifyContent=\"space-between\" p={1}>\n                    <Text\n                        fontWeight=\"bold\"\n                        cursor=\"pointer\"\n                        onClick={() => setViewMode(viewMode !== 'day' ? \"day\" : \"year\")}\n                        flex={1}\n                    >\n                        {currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' })}\n                    </Text>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date())\n                            onChange ? onChange(new Date()) : setSelectedDate(new Date())\n                        }}\n                    >\n                        <ResetIcon fontSize={20} />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowLeft />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowRight />\n                    </IconButton>\n                </Stack>\n            }\n        >\n            <Stack height=\"100%\" p={.5} className='calender-container'>\n                {view}\n            </Stack>\n        </ViewBox>\n    );\n};\n\nexport default Calendar;"],"names":["useRef","_jsx","Stack","Button","useEffect","__rest","useInterface","useBreakpointProps","useState","IconButton","_jsxs","_Fragment","Text","ViewBox"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/Calendar/index.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport Stack from '../Stack'\nimport IconButton from '../IconButton';\nimport IconKeyboardArrowRight from '@xanui/icons/KeyboardArrowRight';\nimport IconKeyboardArrowLeft from '@xanui/icons/KeyboardArrowLeft';\nimport Text from '../Text';\nimport Button from '../Button';\nimport ResetIcon from '@xanui/icons/Replay';\nimport ViewBox from '../ViewBox';\nimport { UseColorTemplateColor, useInterface, useBreakpointPropsType, useBreakpointProps } from '@xanui/core';\n\nexport type CalendarProps = {\n    value?: Date | null;\n    onChange?: (date: Date | null) => void;\n    viewMode?: useBreakpointPropsType<\"year\" | \"month\" | \"day\">;\n    onButtonClick?: (mode: CalendarProps[\"viewMode\"], value: CalendarProps[\"value\"]) => void;\n    color?: useBreakpointPropsType<UseColorTemplateColor>;\n}\n\n\nconst ShowYears = ({ color, year, today, boxWidth, onClick }: any) => {\n    let years: any[] = []\n    const selectedRef: any = useRef(null)\n    for (let y = 1900; y < today.getFullYear() + 40; y++) {\n        const selected = year == y\n        years.push(<Stack\n            key={y}\n            sx={{\n                width: (boxWidth - 12) / 3,\n                alignItems: \"center\",\n                justifyContent: \"center\",\n                p: .1\n            }}\n            className='calender-year-item'\n        >\n            <Button\n                color={selected ? color : \"default\"}\n                className='calender-year-button'\n                size='small'\n                corner=\"circle\"\n                ref={selected ? selectedRef : null}\n                onClick={() => onClick(y)}\n                variant={selected ? \"fill\" : \"text\"}\n            >\n                {y}\n            </Button>\n        </Stack>)\n    }\n\n    useEffect(() => {\n        if (selectedRef?.current) {\n            selectedRef?.current.scrollIntoView({ behavior: \"smooth\", block: \"center\", inline: \"nearest\" })\n        }\n    }, [])\n\n    return (\n        <Stack\n            sx={{\n                flexWrap: \"wrap\",\n                flexDirection: \"row\",\n                overflow: \"hidden\",\n                overflowY: \"auto\"\n            }}\n            className='calender-years'\n        >\n            {years}\n        </Stack>\n    )\n}\n\n\nconst Calendar = ({ value, ...rest }: CalendarProps) => {\n    let [{ onChange, viewMode: VMode, onButtonClick, color }] = useInterface<any>(\"Calender\", rest, {})\n    const _p: any = {}\n    if (VMode) _p.VMode = VMode\n    if (color) _p.color = color\n    const p: any = useBreakpointProps(_p)\n    color = p.color || \"brand\"\n\n    let [viewMode, setViewMode] = useState<any>(p.VMode || \"day\");\n    let [selectedDate, setSelectedDate] = useState(new Date());\n    selectedDate = value instanceof Date ? value : selectedDate\n    const [currentDate, setCurrentDate] = useState(selectedDate);\n    const year = currentDate.getFullYear()\n    const month = currentDate.getMonth()\n    const daysInMonth = 32 - new Date(year, month, 32).getDate()\n    const today = new Date();\n    const btnWidth = 32\n    const boxWidth = btnWidth * 7\n\n    const showCalendar = () => {\n\n        let firstDay = (new Date(year, month)).getDay();\n        let rows = []\n\n        let date = 1;\n        for (let i = 0; i < 6; i++) {\n            let row = []\n            for (let j = 0; j < 7; j++) {\n                if (i === 0 && j < firstDay) {\n                    row.push(<Stack\n                        width={btnWidth}\n                        height={btnWidth}\n                        alignItems=\"center\"\n                        justifyContent=\"center\"\n                        key={date + j + i}\n                    >\n                    </Stack>)\n                } else if (date > daysInMonth) {\n                    break;\n                } else {\n                    let isToday = date === today.getDate() && year === today.getFullYear() && month === today.getMonth()\n                    let isSelected = date === selectedDate.getDate() && year === selectedDate.getFullYear() && month === selectedDate.getMonth()\n\n                    let css: any = {}\n                    if (isToday) {\n                        css = {\n                            variant: \"outline\",\n                            color: color\n                        }\n                    }\n\n                    if (isSelected) {\n                        css = {\n                            variant: \"fill\",\n                            color: color\n                        }\n                    }\n\n                    row.push(<Stack\n                        sx={{\n                            width: btnWidth,\n                            height: btnWidth,\n                            alignItems: \"center\",\n                            justifyContent: \"center\"\n                        }}\n                        key={date + j + i}\n                        className='calender-day-item'\n                    >\n                        <IconButton\n                            className='calender-day-button'\n                            variant={isSelected ? \"fill\" : \"text\"}\n                            color={isToday ? color : \"default\"}\n                            {...css}\n                            data-value={date}\n                            onClick={(e: any) => {\n                                let d = e.target.getAttribute(\"data-value\")\n                                if (!d) return\n                                let selectedDate = new Date(year, month, parseInt(d))\n                                onChange ? onChange(selectedDate) : setSelectedDate(selectedDate)\n                                onButtonClick && onButtonClick(\"day\", selectedDate)\n                            }}\n                        >\n                            {date}\n                        </IconButton>\n                    </Stack>)\n                    date++;\n                }\n            }\n            rows.push(<Stack flexRow key={\"row\" + i} className='calender-day-row'>\n                {row}\n            </Stack>);\n        }\n        return rows\n    }\n\n    const showMonth = () => {\n        let months: any[] = []\n        const monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\n        for (let m = 0; m < monthNames.length; m++) {\n            const selected = currentDate.getMonth() === m\n\n            months.push(<Stack\n                key={m}\n                width={(boxWidth - 12) / 2}\n                alignItems=\"center\"\n                justifyContent=\"center\"\n                p={.1}\n                className='calender-months-item'\n            >\n                <Button\n                    color={selected ? color : \"default\"}\n                    className='calender-month-button'\n                    size='small'\n                    corner=\"circle\"\n                    variant={selected ? \"fill\" : 'text'}\n                    onClick={() => {\n                        const v = new Date(currentDate.getFullYear(), m)\n                        setCurrentDate(v)\n                        setViewMode(\"day\")\n                        onButtonClick && onButtonClick(\"month\", v)\n                    }}\n                    sx={{\n                        color: selected ? \"brand.text\" : \"text.primary\"\n                    }}\n                >\n                    {monthNames[m]}\n                </Button>\n            </Stack>)\n        }\n\n        return (\n            <Stack\n                className='calender-months'\n                sx={{\n                    flexWrap: \"wrap\",\n                    overflow: \"hidden\",\n                    overflowY: \"auto\",\n                    flexDirection: \"row\"\n                }}\n            >\n                {months}\n            </Stack>\n        )\n    }\n\n    let view: any = null\n    switch (viewMode) {\n        case \"year\":\n            view = <ShowYears\n                color={color}\n                today={today}\n                year={year}\n                boxWidth={boxWidth}\n                onClick={(y: any) => {\n                    currentDate.setFullYear(y)\n                    setCurrentDate(currentDate)\n                    setViewMode(\"month\")\n                    onButtonClick && onButtonClick(\"year\", currentDate)\n                }}\n            />\n            break;\n        case \"month\":\n            view = showMonth()\n            break;\n        default:\n            view = (<>\n                <Stack flexRow className='calender-week-container'>\n                    {\n                        ['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, idx) => (\n                            <Stack\n                                key={day + idx}\n                                width={btnWidth}\n                                height={btnWidth}\n                                alignItems=\"center\"\n                                justifyContent=\"center\"\n                            >\n                                <Text\n                                    fontWeight={500}\n                                    fontSize=\"button\"\n                                    color=\"text.secondary\"\n                                >\n                                    {day}\n                                </Text>\n                            </Stack>\n                        ))\n                    }\n                </Stack>\n                {showCalendar()}\n            </>\n            )\n            break;\n    }\n\n    return (\n        <ViewBox\n            className='calender-root'\n            maxHeight={308}\n            width={250}\n            radius={1}\n            bgcolor=\"background.primary\"\n            startContent={\n                <Stack className='calender-header' flexRow alignItems=\"center\" justifyContent=\"space-between\" p={1}>\n                    <Text\n                        fontWeight=\"bold\"\n                        cursor=\"pointer\"\n                        onClick={() => setViewMode(viewMode !== 'day' ? \"day\" : \"year\")}\n                        flex={1}\n                    >\n                        {currentDate.toLocaleDateString(undefined, { year: 'numeric', month: 'long' })}\n                    </Text>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date())\n                            onChange ? onChange(new Date()) : setSelectedDate(new Date())\n                        }}\n                    >\n                        <ResetIcon fontSize={20} />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() - 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowLeft />\n                    </IconButton>\n                    <IconButton\n                        color=\"default\"\n                        variant='text'\n                        size={28}\n                        onClick={() => {\n                            setCurrentDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 1))\n                        }}\n                    >\n                        <IconKeyboardArrowRight />\n                    </IconButton>\n                </Stack>\n            }\n        >\n            <Stack height=\"100%\" p={.5} className='calender-container'>\n                {view}\n            </Stack>\n        </ViewBox>\n    );\n};\n\nexport default Calendar;"],"names":["useRef","_jsx","Stack","Button","useEffect","__rest","useInterface","useBreakpointProps","useState","IconButton","_jsxs","_Fragment","Text","ViewBox"],"mappings":"qiBAoBA,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAO,KAAI;IACjE,IAAI,KAAK,GAAU,EAAE;AACrB,IAAA,MAAM,WAAW,GAAQA,YAAM,CAAC,IAAI,CAAC;AACrC,IAAA,KAAK,IAAI,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,KAAK,CAAC,WAAW,EAAE,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE;AAClD,QAAA,MAAM,QAAQ,GAAG,IAAI,IAAI,CAAC;AAC1B,QAAA,KAAK,CAAC,IAAI,CAACC,eAACC,aAAK,EAAA,EAEb,EAAE,EAAE;AACA,gBAAA,KAAK,EAAE,CAAC,QAAQ,GAAG,EAAE,IAAI,CAAC;AAC1B,gBAAA,UAAU,EAAE,QAAQ;AACpB,gBAAA,cAAc,EAAE,QAAQ;AACxB,gBAAA,CAAC,EAAE;AACN,aAAA,EACD,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAE9BD,eAACE,eAAM,EAAA,EACH,KAAK,EAAE,QAAQ,GAAG,KAAK,GAAG,SAAS,EACnC,SAAS,EAAC,sBAAsB,EAChC,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,QAAQ,EACf,GAAG,EAAE,QAAQ,GAAG,WAAW,GAAG,IAAI,EAClC,OAAO,EAAE,MAAM,OAAO,CAAC,CAAC,CAAC,EACzB,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,EAAA,QAAA,EAElC,CAAC,EAAA,CACG,EAAA,EAnBJ,CAAC,CAoBF,CAAC;IACb;IAEAC,eAAS,CAAC,MAAK;QACX,IAAI,WAAW,aAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,OAAO,EAAE;YACtB,WAAW,KAAA,IAAA,IAAX,WAAW,KAAA,MAAA,GAAA,MAAA,GAAX,WAAW,CAAE,OAAO,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC;QACnG;IACJ,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,QACIH,cAAA,CAACC,aAAK,EAAA,EACF,EAAE,EAAE;AACA,YAAA,QAAQ,EAAE,MAAM;AAChB,YAAA,aAAa,EAAE,KAAK;AACpB,YAAA,QAAQ,EAAE,QAAQ;AAClB,YAAA,SAAS,EAAE;AACd,SAAA,EACD,SAAS,EAAC,gBAAgB,YAEzB,KAAK,EAAA,CACF;AAEhB,CAAC;AAGD,MAAM,QAAQ,GAAG,CAAC,EAAiC,KAAI;AAArC,IAAA,IAAA,EAAE,KAAK,EAAA,GAAA,EAA0B,EAArB,IAAI,GAAAG,YAAA,CAAA,EAAA,EAAhB,SAAkB,CAAF;IAC9B,IAAI,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,GAAGC,iBAAY,CAAM,UAAU,EAAE,IAAI,EAAE,EAAE,CAAC;IACnG,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,IAAI,KAAK;AAAE,QAAA,EAAE,CAAC,KAAK,GAAG,KAAK;AAC3B,IAAA,MAAM,CAAC,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,KAAK,GAAG,CAAC,CAAC,KAAK,IAAI,OAAO;AAE1B,IAAA,IAAI,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAGC,cAAQ,CAAM,CAAC,CAAC,KAAK,IAAI,KAAK,CAAC;AAC7D,IAAA,IAAI,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGA,cAAQ,CAAC,IAAI,IAAI,EAAE,CAAC;AAC1D,IAAA,YAAY,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,GAAG,YAAY;IAC3D,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAGA,cAAQ,CAAC,YAAY,CAAC;AAC5D,IAAA,MAAM,IAAI,GAAG,WAAW,CAAC,WAAW,EAAE;AACtC,IAAA,MAAM,KAAK,GAAG,WAAW,CAAC,QAAQ,EAAE;AACpC,IAAA,MAAM,WAAW,GAAG,EAAE,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE;AAC5D,IAAA,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE;IACxB,MAAM,QAAQ,GAAG,EAAE;AACnB,IAAA,MAAM,QAAQ,GAAG,QAAQ,GAAG,CAAC;IAE7B,MAAM,YAAY,GAAG,MAAK;AAEtB,QAAA,IAAI,QAAQ,GAAG,CAAC,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,MAAM,EAAE;QAC/C,IAAI,IAAI,GAAG,EAAE;QAEb,IAAI,IAAI,GAAG,CAAC;AACZ,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;YACxB,IAAI,GAAG,GAAG,EAAE;AACZ,YAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE;gBACxB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,QAAQ,EAAE;AACzB,oBAAA,GAAG,CAAC,IAAI,CAACP,cAAA,CAACC,aAAK,EAAA,EACX,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,QAAQ,EAChB,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EAAA,EAClB,IAAI,GAAG,CAAC,GAAG,CAAC,CAEb,CAAC;gBACb;AAAO,qBAAA,IAAI,IAAI,GAAG,WAAW,EAAE;oBAC3B;gBACJ;qBAAO;oBACH,IAAI,OAAO,GAAG,IAAI,KAAK,KAAK,CAAC,OAAO,EAAE,IAAI,IAAI,KAAK,KAAK,CAAC,WAAW,EAAE,IAAI,KAAK,KAAK,KAAK,CAAC,QAAQ,EAAE;oBACpG,IAAI,UAAU,GAAG,IAAI,KAAK,YAAY,CAAC,OAAO,EAAE,IAAI,IAAI,KAAK,YAAY,CAAC,WAAW,EAAE,IAAI,KAAK,KAAK,YAAY,CAAC,QAAQ,EAAE;oBAE5H,IAAI,GAAG,GAAQ,EAAE;oBACjB,IAAI,OAAO,EAAE;AACT,wBAAA,GAAG,GAAG;AACF,4BAAA,OAAO,EAAE,SAAS;AAClB,4BAAA,KAAK,EAAE;yBACV;oBACL;oBAEA,IAAI,UAAU,EAAE;AACZ,wBAAA,GAAG,GAAG;AACF,4BAAA,OAAO,EAAE,MAAM;AACf,4BAAA,KAAK,EAAE;yBACV;oBACL;AAEA,oBAAA,GAAG,CAAC,IAAI,CAACD,eAACC,aAAK,EAAA,EACX,EAAE,EAAE;AACA,4BAAA,KAAK,EAAE,QAAQ;AACf,4BAAA,MAAM,EAAE,QAAQ;AAChB,4BAAA,UAAU,EAAE,QAAQ;AACpB,4BAAA,cAAc,EAAE;yBACnB,EAED,SAAS,EAAC,mBAAmB,EAAA,QAAA,EAE7BD,eAACQ,eAAU,EAAA,MAAA,CAAA,MAAA,CAAA,EACP,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,EACrC,KAAK,EAAE,OAAO,GAAG,KAAK,GAAG,SAAS,IAC9B,GAAG,EAAA,EAAA,YAAA,EACK,IAAI,EAChB,OAAO,EAAE,CAAC,CAAM,KAAI;gCAChB,IAAI,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC;AAC3C,gCAAA,IAAI,CAAC,CAAC;oCAAE;AACR,gCAAA,IAAI,YAAY,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;AACrD,gCAAA,QAAQ,GAAG,QAAQ,CAAC,YAAY,CAAC,GAAG,eAAe,CAAC,YAAY,CAAC;AACjE,gCAAA,aAAa,IAAI,aAAa,CAAC,KAAK,EAAE,YAAY,CAAC;4BACvD,CAAC,EAAA,QAAA,EAEA,IAAI,EAAA,CAAA,CACI,EAAA,EAlBR,IAAI,GAAG,CAAC,GAAG,CAAC,CAmBb,CAAC;AACT,oBAAA,IAAI,EAAE;gBACV;YACJ;AACA,YAAA,IAAI,CAAC,IAAI,CAACR,eAACC,aAAK,EAAA,EAAC,OAAO,EAAA,IAAA,EAAiB,SAAS,EAAC,kBAAkB,EAAA,QAAA,EAChE,GAAG,EAAA,EADsB,KAAK,GAAG,CAAC,CAE/B,CAAC;QACb;AACA,QAAA,OAAO,IAAI;AACf,IAAA,CAAC;IAED,MAAM,SAAS,GAAG,MAAK;QACnB,IAAI,MAAM,GAAU,EAAE;QACtB,MAAM,UAAU,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;AAC7I,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;YACxC,MAAM,QAAQ,GAAG,WAAW,CAAC,QAAQ,EAAE,KAAK,CAAC;AAE7C,YAAA,MAAM,CAAC,IAAI,CAACD,cAAA,CAACC,aAAK,EAAA,EAEd,KAAK,EAAE,CAAC,QAAQ,GAAG,EAAE,IAAI,CAAC,EAC1B,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EACvB,CAAC,EAAE,EAAE,EACL,SAAS,EAAC,sBAAsB,EAAA,QAAA,EAEhCD,cAAA,CAACE,eAAM,IACH,KAAK,EAAE,QAAQ,GAAG,KAAK,GAAG,SAAS,EACnC,SAAS,EAAC,uBAAuB,EACjC,IAAI,EAAC,OAAO,EACZ,MAAM,EAAC,QAAQ,EACf,OAAO,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,EACnC,OAAO,EAAE,MAAK;AACV,wBAAA,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE,CAAC,CAAC;wBAChD,cAAc,CAAC,CAAC,CAAC;wBACjB,WAAW,CAAC,KAAK,CAAC;AAClB,wBAAA,aAAa,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC,CAAC;oBAC9C,CAAC,EACD,EAAE,EAAE;wBACA,KAAK,EAAE,QAAQ,GAAG,YAAY,GAAG;qBACpC,EAAA,QAAA,EAEA,UAAU,CAAC,CAAC,CAAC,GACT,EAAA,EAxBJ,CAAC,CAyBF,CAAC;QACb;QAEA,QACIF,eAACC,aAAK,EAAA,EACF,SAAS,EAAC,iBAAiB,EAC3B,EAAE,EAAE;AACA,gBAAA,QAAQ,EAAE,MAAM;AAChB,gBAAA,QAAQ,EAAE,QAAQ;AAClB,gBAAA,SAAS,EAAE,MAAM;AACjB,gBAAA,aAAa,EAAE;aAClB,EAAA,QAAA,EAEA,MAAM,EAAA,CACH;AAEhB,IAAA,CAAC;IAED,IAAI,IAAI,GAAQ,IAAI;IACpB,QAAQ,QAAQ;AACZ,QAAA,KAAK,MAAM;YACP,IAAI,GAAGD,cAAA,CAAC,SAAS,EAAA,EACb,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,CAAC,CAAM,KAAI;AAChB,oBAAA,WAAW,CAAC,WAAW,CAAC,CAAC,CAAC;oBAC1B,cAAc,CAAC,WAAW,CAAC;oBAC3B,WAAW,CAAC,OAAO,CAAC;AACpB,oBAAA,aAAa,IAAI,aAAa,CAAC,MAAM,EAAE,WAAW,CAAC;AACvD,gBAAA,CAAC,GACH;YACF;AACJ,QAAA,KAAK,OAAO;YACR,IAAI,GAAG,SAAS,EAAE;YAClB;AACJ,QAAA;AACI,YAAA,IAAI,IAAIS,eAAA,CAAAC,mBAAA,EAAA,EAAA,QAAA,EAAA,CACJV,eAACC,aAAK,EAAA,EAAC,OAAO,EAAA,IAAA,EAAC,SAAS,EAAC,yBAAyB,YAE1C,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,GAAG,MAC7CD,cAAA,CAACC,aAAK,IAEF,KAAK,EAAE,QAAQ,EACf,MAAM,EAAE,QAAQ,EAChB,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,EAAA,QAAA,EAEvBD,eAACW,eAAI,EAAA,EACD,UAAU,EAAE,GAAG,EACf,QAAQ,EAAC,QAAQ,EACjB,KAAK,EAAC,gBAAgB,YAErB,GAAG,EAAA,CACD,IAZF,GAAG,GAAG,GAAG,CAaV,CACX,CAAC,EAAA,CAEF,EACP,YAAY,EAAE,CAAA,EAAA,CAChB,CACF;YACD;;IAGR,QACIX,cAAA,CAACY,eAAO,EAAA,EACJ,SAAS,EAAC,eAAe,EACzB,SAAS,EAAE,GAAG,EACd,KAAK,EAAE,GAAG,EACV,MAAM,EAAE,CAAC,EACT,OAAO,EAAC,oBAAoB,EAC5B,YAAY,EACRH,eAAA,CAACR,aAAK,IAAC,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAA,IAAA,EAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,CAAC,EAAE,CAAC,EAAA,QAAA,EAAA,CAC9FD,cAAA,CAACW,eAAI,EAAA,EACD,UAAU,EAAC,MAAM,EACjB,MAAM,EAAC,SAAS,EAChB,OAAO,EAAE,MAAM,WAAW,CAAC,QAAQ,KAAK,KAAK,GAAG,KAAK,GAAG,MAAM,CAAC,EAC/D,IAAI,EAAE,CAAC,EAAA,QAAA,EAEN,WAAW,CAAC,kBAAkB,CAAC,SAAS,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,EAAA,CAC3E,EACPX,cAAA,CAACQ,eAAU,EAAA,EACP,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,EAAE,EACR,OAAO,EAAE,MAAK;AACV,wBAAA,cAAc,CAAC,IAAI,IAAI,EAAE,CAAC;AAC1B,wBAAA,QAAQ,GAAG,QAAQ,CAAC,IAAI,IAAI,EAAE,CAAC,GAAG,eAAe,CAAC,IAAI,IAAI,EAAE,CAAC;AACjE,oBAAA,CAAC,EAAA,QAAA,EAEDR,cAAA,CAAC,SAAS,EAAA,EAAC,QAAQ,EAAE,EAAE,EAAA,CAAI,EAAA,CAClB,EACbA,cAAA,CAACQ,eAAU,EAAA,EACP,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,EAAE,EACR,OAAO,EAAE,MAAK;AACV,wBAAA,cAAc,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE,WAAW,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;oBACtF,CAAC,EAAA,QAAA,EAEDR,cAAA,CAAC,qBAAqB,EAAA,EAAA,CAAG,EAAA,CAChB,EACbA,cAAA,CAACQ,eAAU,EAAA,EACP,KAAK,EAAC,SAAS,EACf,OAAO,EAAC,MAAM,EACd,IAAI,EAAE,EAAE,EACR,OAAO,EAAE,MAAK;AACV,wBAAA,cAAc,CAAC,IAAI,IAAI,CAAC,WAAW,CAAC,WAAW,EAAE,EAAE,WAAW,CAAC,QAAQ,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC,CAAC;oBACtF,CAAC,EAAA,QAAA,EAEDR,cAAA,CAAC,sBAAsB,EAAA,EAAA,CAAG,EAAA,CACjB,CAAA,EAAA,CACT,EAAA,QAAA,EAGZA,cAAA,CAACC,aAAK,EAAA,EAAC,MAAM,EAAC,MAAM,EAAC,CAAC,EAAE,EAAE,EAAE,SAAS,EAAC,oBAAoB,EAAA,QAAA,EACrD,IAAI,EAAA,CACD,EAAA,CACF;AAElB"}