@xanui/ui 1.2.8 → 1.2.11

package/DataFilter/options/DateFilter.cjs

@@ -16,11 +16,11 @@ var index$5 = require('../../Calendar/index.cjs');
 const DateFilter = ({ option, onChange, value }) => {
     const [target, setTarget] = React.useState();
     const isValue = value !== null && value !== undefined && value !== "";
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: (e) => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'default', onClick: (e) => {
                                     setTarget(e.currentTarget);
                                 }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
-                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsx(index$3, { size: "small", color: "surface", label: new Date(value).toLocaleDateString("en-US"), endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "surface", onClick: () => {
+                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsxRuntime.jsx(index$3, { size: "small", color: "default", label: new Date(value).toLocaleDateString("en-US"), endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "default", onClick: () => {
                             onChange(null);
                         }, children: jsxRuntime.jsx(Close, {}) }) }) }), jsxRuntime.jsx(index$4, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsxRuntime.jsx(index$5, { value: value ? new Date(value) : null, onChange: (date) => {
                         onChange((date === null || date === void 0 ? void 0 : date.toISOString()) || null);

package/DataFilter/options/DateFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateFilter.cjs","sources":["../../../src/DataFilter/options/DateFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterDate } from \"../types\";\nimport Menu from \"../../Menu\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Calendar from \"../../Calendar\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst DateFilter = ({ option, onChange, value }: Props) => {\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value !== null && value !== undefined && value !== \"\"\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Chip\n                  size=\"small\"\n                  color=\"surface\"\n                  label={new Date(value).toLocaleDateString(\"en-US\")}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"surface\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <Calendar\n               value={value ? new Date(value) : null}\n               onChange={(date) => {\n                  onChange(date?.toISOString() || null);\n                  setTarget(undefined);\n               }}\n            />\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default DateFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBA;;AAEG;AAEA;AAwBkB;;;AAYA;;;AAsCH;;AAEH;AAKf;;"}
+{"version":3,"file":"DateFilter.cjs","sources":["../../../src/DataFilter/options/DateFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterDate } from \"../types\";\nimport Menu from \"../../Menu\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Calendar from \"../../Calendar\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst DateFilter = ({ option, onChange, value }: Props) => {\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value !== null && value !== undefined && value !== \"\"\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Chip\n                  size=\"small\"\n                  color=\"default\"\n                  label={new Date(value).toLocaleDateString(\"en-US\")}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"default\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <Calendar\n               value={value ? new Date(value) : null}\n               onChange={(date) => {\n                  onChange(date?.toISOString() || null);\n                  setTarget(undefined);\n               }}\n            />\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default DateFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAqBA;;AAEG;AAEA;AAwBkB;;;AAYA;;;AAsCH;;AAEH;AAKf;;"}

package/DataFilter/options/DateFilter.js

@@ -14,11 +14,11 @@ import Calendar from '../../Calendar/index.js';
 const DateFilter = ({ option, onChange, value }) => {
     const [target, setTarget] = React.useState();
     const isValue = value !== null && value !== undefined && value !== "";
-    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: (e) => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'default', onClick: (e) => {
                                     setTarget(e.currentTarget);
                                 }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
-                                }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsx(Chip, { size: "small", color: "surface", label: new Date(value).toLocaleDateString("en-US"), endIcon: jsx(IconButton, { size: 16, variant: "text", color: "surface", onClick: () => {
+                                }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && jsx(Chip, { size: "small", color: "default", label: new Date(value).toLocaleDateString("en-US"), endIcon: jsx(IconButton, { size: 16, variant: "text", color: "default", onClick: () => {
                             onChange(null);
                         }, children: jsx(Close, {}) }) }) }), jsx(Menu, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsx(Calendar, { value: value ? new Date(value) : null, onChange: (date) => {
                         onChange((date === null || date === void 0 ? void 0 : date.toISOString()) || null);

package/DataFilter/options/DateFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateFilter.js","sources":["../../../src/DataFilter/options/DateFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterDate } from \"../types\";\nimport Menu from \"../../Menu\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Calendar from \"../../Calendar\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst DateFilter = ({ option, onChange, value }: Props) => {\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value !== null && value !== undefined && value !== \"\"\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Chip\n                  size=\"small\"\n                  color=\"surface\"\n                  label={new Date(value).toLocaleDateString(\"en-US\")}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"surface\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <Calendar\n               value={value ? new Date(value) : null}\n               onChange={(date) => {\n                  onChange(date?.toISOString() || null);\n                  setTarget(undefined);\n               }}\n            />\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default DateFilter"],"names":[],"mappings":";;;;;;;;;;;;;AAqBA;;AAEG;AAEA;AAwBkB;;;AAYA;;;AAsCH;;AAEH;AAKf;;"}
+{"version":3,"file":"DateFilter.js","sources":["../../../src/DataFilter/options/DateFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterDate } from \"../types\";\nimport Menu from \"../../Menu\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Calendar from \"../../Calendar\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst DateFilter = ({ option, onChange, value }: Props) => {\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value !== null && value !== undefined && value !== \"\"\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Chip\n                  size=\"small\"\n                  color=\"default\"\n                  label={new Date(value).toLocaleDateString(\"en-US\")}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"default\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <Calendar\n               value={value ? new Date(value) : null}\n               onChange={(date) => {\n                  onChange(date?.toISOString() || null);\n                  setTarget(undefined);\n               }}\n            />\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default DateFilter"],"names":[],"mappings":";;;;;;;;;;;;;AAqBA;;AAEG;AAEA;AAwBkB;;;AAYA;;;AAsCH;;AAEH;AAKf;;"}

package/DataFilter/options/DateRangeFilter.cjs

@@ -11,7 +11,7 @@ var index$3 = require('../../CalendarInput/index.cjs');
 
 const DateRangeFilter = ({ option, onChange, value }) => {
     const isValue = value !== null && value !== undefined && value.length === 2;
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'default', onClick: () => {
                                     const d = new Date();
                                     onChange([d.toISOString(), d.toISOString()]);
                                 }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {

package/DataFilter/options/DateRangeFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.cjs","sources":["../../../src/DataFilter/options/DateRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterDate } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport CalenderInput from \"../../CalendarInput\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: [string, string] | null;\n   onChange: (value: [string, string] | null) => void;\n}\n\nconst DateRangeFilter = ({ option, onChange, value }: Props) => {\n   const isValue = value !== null && value !== undefined && value.length === 2\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     const d = new Date();\n                     onChange([d.toISOString(), d.toISOString()]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <>\n                  <Stack\n                     p={1}\n                     gap={1}\n                     width={\"100%\"}\n                  >\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![0] ? new Date(value[0]) : null}\n                        onChange={(date) => {\n                           onChange([date ? date.toISOString() : \"\", value ? value[1] : \"\"])\n                        }}\n                     />\n\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![1] ? new Date(value[1]) : null}\n                        onChange={(date) => {\n                           onChange([value ? value[0] : \"\", date ? date.toISOString() : \"\"])\n                        }}\n                     />\n                  </Stack>\n               </>\n            }\n         </Stack>\n\n      </Stack>\n   )\n}\n\nexport default DateRangeFilter"],"names":[],"mappings":";;;;;;;;;;;AAiBA;AACG;AAEA;AAwBkB;AACA;;;AAYA;AAwBM;AACH;AAQG;AACH;AASxB;;"}
+{"version":3,"file":"DateRangeFilter.cjs","sources":["../../../src/DataFilter/options/DateRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterDate } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport CalenderInput from \"../../CalendarInput\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: [string, string] | null;\n   onChange: (value: [string, string] | null) => void;\n}\n\nconst DateRangeFilter = ({ option, onChange, value }: Props) => {\n   const isValue = value !== null && value !== undefined && value.length === 2\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={() => {\n                     const d = new Date();\n                     onChange([d.toISOString(), d.toISOString()]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <>\n                  <Stack\n                     p={1}\n                     gap={1}\n                     width={\"100%\"}\n                  >\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![0] ? new Date(value[0]) : null}\n                        onChange={(date) => {\n                           onChange([date ? date.toISOString() : \"\", value ? value[1] : \"\"])\n                        }}\n                     />\n\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![1] ? new Date(value[1]) : null}\n                        onChange={(date) => {\n                           onChange([value ? value[0] : \"\", date ? date.toISOString() : \"\"])\n                        }}\n                     />\n                  </Stack>\n               </>\n            }\n         </Stack>\n\n      </Stack>\n   )\n}\n\nexport default DateRangeFilter"],"names":[],"mappings":";;;;;;;;;;;AAiBA;AACG;AAEA;AAwBkB;AACA;;;AAYA;AAwBM;AACH;AAQG;AACH;AASxB;;"}

package/DataFilter/options/DateRangeFilter.js

@@ -9,7 +9,7 @@ import CalenderInput from '../../CalendarInput/index.js';
 
 const DateRangeFilter = ({ option, onChange, value }) => {
     const isValue = value !== null && value !== undefined && value.length === 2;
-    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'default', onClick: () => {
                                     const d = new Date();
                                     onChange([d.toISOString(), d.toISOString()]);
                                 }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {

package/DataFilter/options/DateRangeFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeFilter.js","sources":["../../../src/DataFilter/options/DateRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterDate } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport CalenderInput from \"../../CalendarInput\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: [string, string] | null;\n   onChange: (value: [string, string] | null) => void;\n}\n\nconst DateRangeFilter = ({ option, onChange, value }: Props) => {\n   const isValue = value !== null && value !== undefined && value.length === 2\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     const d = new Date();\n                     onChange([d.toISOString(), d.toISOString()]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <>\n                  <Stack\n                     p={1}\n                     gap={1}\n                     width={\"100%\"}\n                  >\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![0] ? new Date(value[0]) : null}\n                        onChange={(date) => {\n                           onChange([date ? date.toISOString() : \"\", value ? value[1] : \"\"])\n                        }}\n                     />\n\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![1] ? new Date(value[1]) : null}\n                        onChange={(date) => {\n                           onChange([value ? value[0] : \"\", date ? date.toISOString() : \"\"])\n                        }}\n                     />\n                  </Stack>\n               </>\n            }\n         </Stack>\n\n      </Stack>\n   )\n}\n\nexport default DateRangeFilter"],"names":[],"mappings":";;;;;;;;;AAiBA;AACG;AAEA;AAwBkB;AACA;;;AAYA;AAwBM;AACH;AAQG;AACH;AASxB;;"}
+{"version":3,"file":"DateRangeFilter.js","sources":["../../../src/DataFilter/options/DateRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterDate } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport CalenderInput from \"../../CalendarInput\";\n\n\ntype Props = {\n   option: DataFilterDate;\n   value: [string, string] | null;\n   onChange: (value: [string, string] | null) => void;\n}\n\nconst DateRangeFilter = ({ option, onChange, value }: Props) => {\n   const isValue = value !== null && value !== undefined && value.length === 2\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={() => {\n                     const d = new Date();\n                     onChange([d.toISOString(), d.toISOString()]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <>\n                  <Stack\n                     p={1}\n                     gap={1}\n                     width={\"100%\"}\n                  >\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![0] ? new Date(value[0]) : null}\n                        onChange={(date) => {\n                           onChange([date ? date.toISOString() : \"\", value ? value[1] : \"\"])\n                        }}\n                     />\n\n                     <CalenderInput\n                        fullWidth\n                        variant={\"outline\"}\n                        value={value![1] ? new Date(value[1]) : null}\n                        onChange={(date) => {\n                           onChange([value ? value[0] : \"\", date ? date.toISOString() : \"\"])\n                        }}\n                     />\n                  </Stack>\n               </>\n            }\n         </Stack>\n\n      </Stack>\n   )\n}\n\nexport default DateRangeFilter"],"names":[],"mappings":";;;;;;;;;AAiBA;AACG;AAEA;AAwBkB;AACA;;;AAYA;AAwBM;AACH;AAQG;AACH;AASxB;;"}

package/DataFilter/options/MultiSelectFilter.cjs

@@ -20,12 +20,12 @@ const MultiSelectFilter = ({ option, onChange, value }) => {
     const ref = React.useRef(null);
     const [target, setTarget] = React.useState();
     const isValue = value && value.length > 0;
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: (e) => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'default', onClick: (e) => {
                                     setTarget(e.currentTarget);
                                 }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange([]);
                                 }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && value.map((val, index) => {
-                    return (jsxRuntime.jsx(index$3, { size: "small", color: "surface", label: val, endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "surface", onClick: () => {
+                    return (jsxRuntime.jsx(index$3, { size: "small", color: "default", label: val, endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "default", onClick: () => {
                                 onChange(value.filter(v => v !== val));
                             }, children: jsxRuntime.jsx(Close, {}) }) }, index));
                 }) }), jsxRuntime.jsx(index$4, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsxRuntime.jsx(index$5, { width: ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200, size: "small", children: option.options.map((opt, index) => (jsxRuntime.jsx(index$6, { startIcon: jsxRuntime.jsx(index$7, { checked: value === null || value === void 0 ? void 0 : value.includes(opt.value) }), onClick: () => {

package/DataFilter/options/MultiSelectFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectFilter.cjs","sources":["../../../src/DataFilter/options/MultiSelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Close from \"@xanui/icons/Close\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string[];\n   onChange: (value: string[]) => void;\n}\n\nconst MultiSelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value && value.length > 0;\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange([]);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && value.map((val, index) => {\n                  return (\n                     <Chip\n                        key={index}\n                        size=\"small\"\n                        color=\"surface\"\n                        label={val}\n                        endIcon={<IconButton\n                           size={16}\n                           variant={\"text\"}\n                           color=\"surface\"\n                           onClick={() => {\n                              onChange(value.filter(v => v !== val));\n                           }}\n                        >\n                           <Close />\n                        </IconButton>}\n                     />\n                  )\n               })\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value?.includes(opt.value)} />}\n                        onClick={() => {\n                           const has = value?.includes(opt.value)\n                           onChange(has ? value?.filter(v => v !== opt.value) : [...value || [], opt.value]);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default MultiSelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBA;;;;;AAIG;AAwBkB;;;AAYA;AAcH;AAWY;;AAOf;AAeY;AACA;AACH;AAUxB;;"}
+{"version":3,"file":"MultiSelectFilter.cjs","sources":["../../../src/DataFilter/options/MultiSelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Close from \"@xanui/icons/Close\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string[];\n   onChange: (value: string[]) => void;\n}\n\nconst MultiSelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value && value.length > 0;\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange([]);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && value.map((val, index) => {\n                  return (\n                     <Chip\n                        key={index}\n                        size=\"small\"\n                        color=\"default\"\n                        label={val}\n                        endIcon={<IconButton\n                           size={16}\n                           variant={\"text\"}\n                           color=\"default\"\n                           onClick={() => {\n                              onChange(value.filter(v => v !== val));\n                           }}\n                        >\n                           <Close />\n                        </IconButton>}\n                     />\n                  )\n               })\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value?.includes(opt.value)} />}\n                        onClick={() => {\n                           const has = value?.includes(opt.value)\n                           onChange(has ? value?.filter(v => v !== opt.value) : [...value || [], opt.value]);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default MultiSelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBA;;;;;AAIG;AAwBkB;;;AAYA;AAcH;AAWY;;AAOf;AAeY;AACA;AACH;AAUxB;;"}

package/DataFilter/options/MultiSelectFilter.js

@@ -18,12 +18,12 @@ const MultiSelectFilter = ({ option, onChange, value }) => {
     const ref = React.useRef(null);
     const [target, setTarget] = React.useState();
     const isValue = value && value.length > 0;
-    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: (e) => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'default', onClick: (e) => {
                                     setTarget(e.currentTarget);
                                 }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange([]);
                                 }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: isValue && value.map((val, index) => {
-                    return (jsx(Chip, { size: "small", color: "surface", label: val, endIcon: jsx(IconButton, { size: 16, variant: "text", color: "surface", onClick: () => {
+                    return (jsx(Chip, { size: "small", color: "default", label: val, endIcon: jsx(IconButton, { size: 16, variant: "text", color: "default", onClick: () => {
                                 onChange(value.filter(v => v !== val));
                             }, children: jsx(Close, {}) }) }, index));
                 }) }), jsx(Menu, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsx(List, { width: ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200, size: "small", children: option.options.map((opt, index) => (jsx(ListItem, { startIcon: jsx(Checkbox, { checked: value === null || value === void 0 ? void 0 : value.includes(opt.value) }), onClick: () => {

package/DataFilter/options/MultiSelectFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectFilter.js","sources":["../../../src/DataFilter/options/MultiSelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Close from \"@xanui/icons/Close\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string[];\n   onChange: (value: string[]) => void;\n}\n\nconst MultiSelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value && value.length > 0;\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange([]);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && value.map((val, index) => {\n                  return (\n                     <Chip\n                        key={index}\n                        size=\"small\"\n                        color=\"surface\"\n                        label={val}\n                        endIcon={<IconButton\n                           size={16}\n                           variant={\"text\"}\n                           color=\"surface\"\n                           onClick={() => {\n                              onChange(value.filter(v => v !== val));\n                           }}\n                        >\n                           <Close />\n                        </IconButton>}\n                     />\n                  )\n               })\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value?.includes(opt.value)} />}\n                        onClick={() => {\n                           const has = value?.includes(opt.value)\n                           onChange(has ? value?.filter(v => v !== opt.value) : [...value || [], opt.value]);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default MultiSelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA;;;;;AAIG;AAwBkB;;;AAYA;AAcH;AAWY;;AAOf;AAeY;AACA;AACH;AAUxB;;"}
+{"version":3,"file":"MultiSelectFilter.js","sources":["../../../src/DataFilter/options/MultiSelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\nimport Close from \"@xanui/icons/Close\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string[];\n   onChange: (value: string[]) => void;\n}\n\nconst MultiSelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   const isValue = value && value.length > 0;\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange([]);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && value.map((val, index) => {\n                  return (\n                     <Chip\n                        key={index}\n                        size=\"small\"\n                        color=\"default\"\n                        label={val}\n                        endIcon={<IconButton\n                           size={16}\n                           variant={\"text\"}\n                           color=\"default\"\n                           onClick={() => {\n                              onChange(value.filter(v => v !== val));\n                           }}\n                        >\n                           <Close />\n                        </IconButton>}\n                     />\n                  )\n               })\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value?.includes(opt.value)} />}\n                        onClick={() => {\n                           const has = value?.includes(opt.value)\n                           onChange(has ? value?.filter(v => v !== opt.value) : [...value || [], opt.value]);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default MultiSelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA;;;;;AAIG;AAwBkB;;;AAYA;AAcH;AAWY;;AAOf;AAeY;AACA;AACH;AAUxB;;"}

package/DataFilter/options/NumberFilter.cjs

@@ -11,7 +11,7 @@ var index$3 = require('../../InputNumber/index.cjs');
 
 const NumberFilter = ({ option, onChange, value }) => {
     const isValue = value !== null && value !== undefined;
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'default', onClick: () => {
                                     onChange(0);
                                 }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);

package/DataFilter/options/NumberFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFilter.cjs","sources":["../../../src/DataFilter/options/NumberFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: number | null;\n   onChange: (value: number | null) => void;\n}\n\nconst NumberFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     onChange(0);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <InputNumber\n                  variant={\"outline\"}\n                  value={value.toString() as any}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}
+{"version":3,"file":"NumberFilter.cjs","sources":["../../../src/DataFilter/options/NumberFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: number | null;\n   onChange: (value: number | null) => void;\n}\n\nconst NumberFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={() => {\n                     onChange(0);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <InputNumber\n                  variant={\"outline\"}\n                  value={value.toString() as any}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}

package/DataFilter/options/NumberFilter.js

@@ -9,7 +9,7 @@ import InputNumber from '../../InputNumber/index.js';
 
 const NumberFilter = ({ option, onChange, value }) => {
     const isValue = value !== null && value !== undefined;
-    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'default', onClick: () => {
                                     onChange(0);
                                 }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);

package/DataFilter/options/NumberFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberFilter.js","sources":["../../../src/DataFilter/options/NumberFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: number | null;\n   onChange: (value: number | null) => void;\n}\n\nconst NumberFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     onChange(0);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <InputNumber\n                  variant={\"outline\"}\n                  value={value.toString() as any}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}
+{"version":3,"file":"NumberFilter.js","sources":["../../../src/DataFilter/options/NumberFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: number | null;\n   onChange: (value: number | null) => void;\n}\n\nconst NumberFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={() => {\n                     onChange(0);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <InputNumber\n                  variant={\"outline\"}\n                  value={value.toString() as any}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}

package/DataFilter/options/NumberRangeFilter.cjs

@@ -12,7 +12,7 @@ var index$3 = require('../../InputNumber/index.cjs');
 const NumberRangeFilter = ({ option, onChange, value }) => {
     var _a, _b;
     const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'default', onClick: () => {
                                     onChange([0, 0]);
                                 }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);

package/DataFilter/options/NumberRangeFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"NumberRangeFilter.cjs","sources":["../../../src/DataFilter/options/NumberRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: [number, number] | null;\n   onChange: (value: [number, number] | null) => void;\n}\n\nconst NumberRangeFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     onChange([0, 0]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Stack\n                  direction=\"row\"\n                  gap={0.5}\n                  flex={1}\n               >\n                  <InputNumber\n                     flex={1}\n                     variant={\"outline\"}\n                     size=\"small\"\n                     placeholder=\"Min\"\n                     value={value[0] as any ?? ''}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([val, value ? value[1] : 0]);\n                     }}\n                  />\n                  <InputNumber\n                     variant={\"outline\"}\n                     flex={1}\n                     size=\"small\"\n                     placeholder=\"Max\"\n                     value={value[1] as any ?? undefined}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([value ? value[0] : 0, val]);\n                     }}\n                  />\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberRangeFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;;AAIG;AAwBkB;;;AAYA;;AA0BG;AACH;;AAUG;AACH;AAOrB;;"}
+{"version":3,"file":"NumberRangeFilter.cjs","sources":["../../../src/DataFilter/options/NumberRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: [number, number] | null;\n   onChange: (value: [number, number] | null) => void;\n}\n\nconst NumberRangeFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={() => {\n                     onChange([0, 0]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Stack\n                  direction=\"row\"\n                  gap={0.5}\n                  flex={1}\n               >\n                  <InputNumber\n                     flex={1}\n                     variant={\"outline\"}\n                     size=\"small\"\n                     placeholder=\"Min\"\n                     value={value[0] as any ?? ''}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([val, value ? value[1] : 0]);\n                     }}\n                  />\n                  <InputNumber\n                     variant={\"outline\"}\n                     flex={1}\n                     size=\"small\"\n                     placeholder=\"Max\"\n                     value={value[1] as any ?? undefined}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([value ? value[0] : 0, val]);\n                     }}\n                  />\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberRangeFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;;AAIG;AAwBkB;;;AAYA;;AA0BG;AACH;;AAUG;AACH;AAOrB;;"}

package/DataFilter/options/NumberRangeFilter.js

@@ -10,7 +10,7 @@ import InputNumber from '../../InputNumber/index.js';
 const NumberRangeFilter = ({ option, onChange, value }) => {
     var _a, _b;
     const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;
-    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'default', onClick: () => {
                                     onChange([0, 0]);
                                 }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);

package/DataFilter/options/NumberRangeFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberRangeFilter.js","sources":["../../../src/DataFilter/options/NumberRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: [number, number] | null;\n   onChange: (value: [number, number] | null) => void;\n}\n\nconst NumberRangeFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     onChange([0, 0]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Stack\n                  direction=\"row\"\n                  gap={0.5}\n                  flex={1}\n               >\n                  <InputNumber\n                     flex={1}\n                     variant={\"outline\"}\n                     size=\"small\"\n                     placeholder=\"Min\"\n                     value={value[0] as any ?? ''}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([val, value ? value[1] : 0]);\n                     }}\n                  />\n                  <InputNumber\n                     variant={\"outline\"}\n                     flex={1}\n                     size=\"small\"\n                     placeholder=\"Max\"\n                     value={value[1] as any ?? undefined}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([value ? value[0] : 0, val]);\n                     }}\n                  />\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberRangeFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;;AAIG;AAwBkB;;;AAYA;;AA0BG;AACH;;AAUG;AACH;AAOrB;;"}
+{"version":3,"file":"NumberRangeFilter.js","sources":["../../../src/DataFilter/options/NumberRangeFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport InputNumber from \"../../InputNumber\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: [number, number] | null;\n   onChange: (value: [number, number] | null) => void;\n}\n\nconst NumberRangeFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined && Array.isArray(value) && value.length === 2;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={() => {\n                     onChange([0, 0]);\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Stack\n                  direction=\"row\"\n                  gap={0.5}\n                  flex={1}\n               >\n                  <InputNumber\n                     flex={1}\n                     variant={\"outline\"}\n                     size=\"small\"\n                     placeholder=\"Min\"\n                     value={value[0] as any ?? ''}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([val, value ? value[1] : 0]);\n                     }}\n                  />\n                  <InputNumber\n                     variant={\"outline\"}\n                     flex={1}\n                     size=\"small\"\n                     placeholder=\"Max\"\n                     value={value[1] as any ?? undefined}\n                     onChange={(e) => {\n                        const val = e.target.value === '' ? 0 : Number(e.target.value);\n                        onChange([value ? value[0] : 0, val]);\n                     }}\n                  />\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default NumberRangeFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;;AAIG;AAwBkB;;;AAYA;;AA0BG;AACH;;AAUG;AACH;AAOrB;;"}

package/DataFilter/options/SelectFilter.cjs

@@ -19,11 +19,11 @@ const SelectFilter = ({ option, onChange, value }) => {
     var _a;
     const ref = React.useRef(null);
     const [target, setTarget] = React.useState();
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: value ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: (e) => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: value ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'default', onClick: (e) => {
                                     setTarget(e.currentTarget);
                                 }, children: jsxRuntime.jsx(Add, {}) }), !!value && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
-                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: !!value && jsxRuntime.jsx(index$3, { size: "small", color: "surface", label: value, endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "surface", onClick: () => {
+                                }, children: jsxRuntime.jsx(ClearAll, {}) })] })] }), jsxRuntime.jsx(index, { direction: "row", gap: 0.5, flexWrap: "wrap", children: !!value && jsxRuntime.jsx(index$3, { size: "small", color: "default", label: value, endIcon: jsxRuntime.jsx(index$2, { size: 16, variant: "text", color: "default", onClick: () => {
                             onChange(null);
                         }, children: jsxRuntime.jsx(Close, {}) }) }) }), jsxRuntime.jsx(index$4, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsxRuntime.jsx(index$5, { width: ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200, size: "small", children: option.options.map((opt, index) => (jsxRuntime.jsx(index$6, { startIcon: jsxRuntime.jsx(index$7, { checked: value === opt.value }), onClick: () => {
                             onChange(opt.value);

package/DataFilter/options/SelectFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SelectFilter.cjs","sources":["../../../src/DataFilter/options/SelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst SelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={value ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  !!value && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               !!value && <Chip\n                  size=\"small\"\n                  color=\"surface\"\n                  label={value}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"surface\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value === opt.value} />}\n                        onClick={() => {\n                           onChange(opt.value);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default SelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBA;;;;AAGG;AAwBkB;AACH;;AAWG;;AAuBA;AAmBM;AACH;AAUxB;;"}
+{"version":3,"file":"SelectFilter.cjs","sources":["../../../src/DataFilter/options/SelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst SelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={value ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  !!value && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               !!value && <Chip\n                  size=\"small\"\n                  color=\"default\"\n                  label={value}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"default\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value === opt.value} />}\n                        onClick={() => {\n                           onChange(opt.value);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default SelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAuBA;;;;AAGG;AAwBkB;AACH;;AAWG;;AAuBA;AAmBM;AACH;AAUxB;;"}

package/DataFilter/options/SelectFilter.js

@@ -17,11 +17,11 @@ const SelectFilter = ({ option, onChange, value }) => {
     var _a;
     const ref = React.useRef(null);
     const [target, setTarget] = React.useState();
-    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: value ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: (e) => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: value ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'default', onClick: (e) => {
                                     setTarget(e.currentTarget);
                                 }, children: jsx(Add, {}) }), !!value && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);
-                                }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: !!value && jsx(Chip, { size: "small", color: "surface", label: value, endIcon: jsx(IconButton, { size: 16, variant: "text", color: "surface", onClick: () => {
+                                }, children: jsx(ClearAll, {}) })] })] }), jsx(Stack, { direction: "row", gap: 0.5, flexWrap: "wrap", children: !!value && jsx(Chip, { size: "small", color: "default", label: value, endIcon: jsx(IconButton, { size: 16, variant: "text", color: "default", onClick: () => {
                             onChange(null);
                         }, children: jsx(Close, {}) }) }) }), jsx(Menu, { target: target, onClickOutside: () => setTarget(undefined), placement: "bottom-right", children: jsx(List, { width: ((_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.offsetWidth) || 200, size: "small", children: option.options.map((opt, index) => (jsx(ListItem, { startIcon: jsx(Checkbox, { checked: value === opt.value }), onClick: () => {
                             onChange(opt.value);

package/DataFilter/options/SelectFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectFilter.js","sources":["../../../src/DataFilter/options/SelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst SelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={value ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  !!value && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               !!value && <Chip\n                  size=\"small\"\n                  color=\"surface\"\n                  label={value}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"surface\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value === opt.value} />}\n                        onClick={() => {\n                           onChange(opt.value);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default SelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA;;;;AAGG;AAwBkB;AACH;;AAWG;;AAuBA;AAmBM;AACH;AAUxB;;"}
+{"version":3,"file":"SelectFilter.js","sources":["../../../src/DataFilter/options/SelectFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport React from \"react\";\nimport { DataFilterSelect } from \"../types\";\nimport Menu from \"../../Menu\";\nimport List from \"../../List\";\nimport ListItem from \"../../ListItem\";\nimport Checkbox from \"../../Checkbox\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Close from \"@xanui/icons/Close\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Chip from \"../../Chip\";\n\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst SelectFilter = ({ option, onChange, value }: Props) => {\n   const ref: any = React.useRef(null)\n   const [target, setTarget] = React.useState<HTMLElement | undefined>()\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={value ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={(e: any) => {\n                     setTarget(e.currentTarget)\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  !!value && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               !!value && <Chip\n                  size=\"small\"\n                  color=\"default\"\n                  label={value}\n                  endIcon={<IconButton\n                     size={16}\n                     variant={\"text\"}\n                     color=\"default\"\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <Close />\n                  </IconButton>}\n               />\n            }\n         </Stack>\n         <Menu\n            target={target}\n            onClickOutside={() => setTarget(undefined)}\n            placement={\"bottom-right\"}\n         >\n            <List width={ref?.current?.offsetWidth || 200} size=\"small\">\n               {\n                  option.options.map((opt, index) => (\n                     <ListItem\n                        key={index}\n                        startIcon={<Checkbox checked={value === opt.value} />}\n                        onClick={() => {\n                           onChange(opt.value);\n                        }}\n                     >\n                        {opt.label}\n                     </ListItem>\n                  ))\n               }\n            </List>\n         </Menu>\n      </Stack>\n   )\n}\n\nexport default SelectFilter"],"names":[],"mappings":";;;;;;;;;;;;;;;AAuBA;;;;AAGG;AAwBkB;AACH;;AAWG;;AAuBA;AAmBM;AACH;AAUxB;;"}

package/DataFilter/options/TextFilter.cjs

@@ -11,7 +11,7 @@ var index$3 = require('../../Input/index.cjs');
 
 const TextFilter = ({ option, onChange, value }) => {
     const isValue = value !== null && value !== undefined;
-    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
+    return (jsxRuntime.jsxs(index, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxRuntime.jsxs(index, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsxRuntime.jsx(index$1, { children: option.label }), jsxRuntime.jsxs(index, { direction: "row", gap: 0.5, children: [jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: 'default', onClick: () => {
                                     onChange('');
                                 }, children: jsxRuntime.jsx(Add, {}) }), isValue && jsxRuntime.jsx(index$2, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);

package/DataFilter/options/TextFilter.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TextFilter.cjs","sources":["../../../src/DataFilter/options/TextFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Input from \"../../Input\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst TextFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     onChange('');\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Input\n                  variant={\"outline\"}\n                  value={value.toString()}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default TextFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}
+{"version":3,"file":"TextFilter.cjs","sources":["../../../src/DataFilter/options/TextFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Input from \"../../Input\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst TextFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={() => {\n                     onChange('');\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Input\n                  variant={\"outline\"}\n                  value={value.toString()}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default TextFilter"],"names":[],"mappings":";;;;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}

package/DataFilter/options/TextFilter.js

@@ -9,7 +9,7 @@ import Input from '../../Input/index.js';
 
 const TextFilter = ({ option, onChange, value }) => {
     const isValue = value !== null && value !== undefined;
-    return (jsxs(Stack, { width: "100%", bgcolor: "surface.light", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'surface', onClick: () => {
+    return (jsxs(Stack, { width: "100%", bgcolor: "default.base", p: 1, radius: 1, children: [jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", gap: 0.5, mb: isValue ? .5 : 0, children: [jsx(Text, { children: option.label }), jsxs(Stack, { direction: "row", gap: 0.5, children: [jsx(IconButton, { size: "small", variant: "ghost", color: 'default', onClick: () => {
                                     onChange('');
                                 }, children: jsx(Add, {}) }), isValue && jsx(IconButton, { size: "small", variant: "ghost", color: "danger", onClick: () => {
                                     onChange(null);

package/DataFilter/options/TextFilter.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextFilter.js","sources":["../../../src/DataFilter/options/TextFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Input from \"../../Input\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst TextFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"surface.light\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'surface'}\n                  onClick={() => {\n                     onChange('');\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Input\n                  variant={\"outline\"}\n                  value={value.toString()}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default TextFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}
+{"version":3,"file":"TextFilter.js","sources":["../../../src/DataFilter/options/TextFilter.tsx"],"sourcesContent":["\"use client\"\n\nimport { DataFilterSelect } from \"../types\";\nimport IconButton from \"../../IconButton\";\nimport Stack from \"../../Stack\";\nimport Text from \"../../Text\";\nimport Add from \"@xanui/icons/Add\";\nimport ClearAll from \"@xanui/icons/ClearAll\";\nimport Input from \"../../Input\";\n\ntype Props = {\n   option: DataFilterSelect;\n   value: string | null;\n   onChange: (value: string | null) => void;\n}\n\nconst TextFilter = ({ option, onChange, value }: Props) => {\n\n   const isValue = value !== null && value !== undefined;\n\n   return (\n      <Stack\n         width={\"100%\"}\n         bgcolor=\"default.base\"\n         p={1}\n         radius={1}\n      >\n         <Stack\n            direction=\"row\"\n            alignItems=\"center\"\n            justifyContent={\"space-between\"}\n            gap={0.5}\n            mb={isValue ? .5 : 0}\n         >\n            <Text>{option.label}</Text>\n            <Stack\n               direction=\"row\"\n               gap={0.5}\n            >\n               <IconButton\n                  size=\"small\"\n                  variant=\"ghost\"\n                  color={'default'}\n                  onClick={() => {\n                     onChange('');\n                  }}\n               >\n                  <Add />\n               </IconButton>\n               {\n                  isValue && <IconButton\n                     size=\"small\"\n                     variant=\"ghost\"\n                     color={\"danger\"}\n                     onClick={() => {\n                        onChange(null);\n                     }}\n                  >\n                     <ClearAll />\n                  </IconButton>\n               }\n            </Stack>\n         </Stack>\n         <Stack\n            direction=\"row\"\n            gap={0.5}\n            flexWrap=\"wrap\"\n         >\n            {\n               isValue && <Input\n                  variant={\"outline\"}\n                  value={value.toString()}\n                  onChange={(e: any) => {\n                     onChange(e.target.value);\n                  }}\n                  fullWidth\n               />\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default TextFilter"],"names":[],"mappings":";;;;;;;;;AAgBA;;AAIG;;;;;AAqDkB;AACH;AAOlB;;"}

package/Datatable/FilterBox.cjs

@@ -26,9 +26,9 @@ const FilterBox = (props) => {
                         update({ tab: value });
                     }, value: state.tab, children: tabs.map(t => jsxRuntime.jsx(index$2, { value: t.value || t.label.toLowerCase(), children: t.label }, t.label)) }) }), jsxRuntime.jsxs(index, { flexRow: true, gap: 2, className: 'datatable-header-right-area', alignItems: "center", children: [!hideSearch && jsxRuntime.jsx(index$3, Object.assign({ disabled: skeleton ? true : false, endIcon: jsxRuntime.jsx(IconSearch, {}), placeholder: 'Search...' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.search, { value: state.search, onChange: (e) => {
                             update({ search: e.target.value });
-                        } })), filters && jsxRuntime.jsxs(index, { children: [jsxRuntime.jsx(index$4, { color: "surface", variant: "text", onClick: () => {
+                        } })), filters && jsxRuntime.jsxs(index, { children: [jsxRuntime.jsx(index$4, { color: "default", variant: "text", onClick: () => {
                                     setOpenFilter(true);
-                                }, children: jsxRuntime.jsx(FilterListOutlined, {}) }), jsxRuntime.jsx(index$5, { open: openFilter, onClickOutside: () => { }, placement: "right", children: jsxRuntime.jsx(index$6, { height: "100%", p: 1, startContent: jsxRuntime.jsxs(index, { mb: 2, px: 2, flexRow: true, justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsx(index$8, { fontWeight: 600, fontSize: "h6", children: "Filters" }), jsxRuntime.jsx(index$4, { size: "small", color: "surface", variant: "text", onClick: () => {
+                                }, children: jsxRuntime.jsx(FilterListOutlined, {}) }), jsxRuntime.jsx(index$5, { open: openFilter, onClickOutside: () => { }, placement: "right", children: jsxRuntime.jsx(index$6, { height: "100%", p: 1, startContent: jsxRuntime.jsxs(index, { mb: 2, px: 2, flexRow: true, justifyContent: "space-between", alignItems: "center", children: [jsxRuntime.jsx(index$8, { fontWeight: 600, fontSize: "h6", children: "Filters" }), jsxRuntime.jsx(index$4, { size: "small", color: "default", variant: "text", onClick: () => {
                                                     setOpenFilter(false);
                                                 }, children: jsxRuntime.jsx(CloseOutlined, {}) })] }), children: jsxRuntime.jsx(index, { gap: 2, children: jsxRuntime.jsx(index$7.default, { options: filters, value: state.filters, onChange: (s) => {
                                                 update({ filters: s });

package/Datatable/FilterBox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FilterBox.cjs","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\nimport Stack from '../Stack'\nimport Tabs from '../Tabs'\nimport Tab from '../Tab'\nimport Input from '../Input'\nimport IconSearch from '@xanui/icons/Search'\nimport { DatatablePropsWithState } from './types';\nimport IconButton from '../IconButton';\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\nimport Drawer from '../Drawer';\nimport Text from '../Text';\nimport React from 'react';\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\nimport ViewBox from '../ViewBox';\nimport DataFilter from '../DataFilter';\n\nconst FilterBox = (props: DatatablePropsWithState) => {\n   let {\n      tabs,\n      filters,\n      hideSearch,\n      slotProps,\n      skeleton,\n      state,\n      update,\n   } = props\n   const [openFilter, setOpenFilter] = React.useState(false)\n   let checked = state.selectAll || !!state.selected.length\n\n   if (checked) return <></>\n\n   return (\n      <Stack\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n      >\n         <Stack gap={2.4} flexRow>\n            {\n               tabs && <Tabs\n                  disabled={skeleton ? true : false}\n                  onChange={(value: any) => {\n                     update({ tab: value })\n                  }}\n                  value={state.tab}\n               >\n                  {\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\n                  }\n               </Tabs>\n            }\n         </Stack>\n         <Stack\n            flexRow\n            gap={2}\n            className='datatable-header-right-area'\n            alignItems={\"center\"}\n         >\n            {!hideSearch && <Input\n               disabled={skeleton ? true : false}\n               endIcon={<IconSearch />}\n               placeholder='Search...'\n               {...slotProps?.search}\n               value={state.search}\n               onChange={(e: any) => {\n                  update({ search: e.target.value })\n               }}\n            />}\n            {\n               filters && <Stack>\n                  <IconButton\n                     color=\"surface\"\n                     variant={\"text\"}\n                     onClick={() => {\n                        setOpenFilter(true)\n                     }}\n                  >\n                     <FilterListOutlined />\n                  </IconButton>\n                  <Drawer\n                     open={openFilter}\n                     onClickOutside={() => { }}\n                     placement={\"right\"}\n                  >\n                     <ViewBox\n                        height=\"100%\"\n                        p={1}\n                        startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\n                           <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\n                           <IconButton\n                              size=\"small\"\n                              color=\"surface\"\n                              variant=\"text\"\n                              onClick={() => {\n                                 setOpenFilter(false)\n                              }}\n                           >\n                              <CloseOutlined />\n                           </IconButton>\n                        </Stack>}\n                     >\n                        <Stack\n                           gap={2}\n                        >\n                           <DataFilter\n                              options={filters}\n                              value={state.filters}\n                              onChange={(s) => {\n                                 update({ filters: s })\n                              }}\n                           />\n                        </Stack>\n                     </ViewBox>\n                  </Drawer>\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}
+{"version":3,"file":"FilterBox.cjs","sources":["../../src/Datatable/FilterBox.tsx"],"sourcesContent":["\"use client\";\nimport Stack from '../Stack'\nimport Tabs from '../Tabs'\nimport Tab from '../Tab'\nimport Input from '../Input'\nimport IconSearch from '@xanui/icons/Search'\nimport { DatatablePropsWithState } from './types';\nimport IconButton from '../IconButton';\nimport FilterListOutlined from '@xanui/icons/FilterListOutlined';\nimport Drawer from '../Drawer';\nimport Text from '../Text';\nimport React from 'react';\nimport CloseOutlined from '@xanui/icons/CloseOutlined';\nimport ViewBox from '../ViewBox';\nimport DataFilter from '../DataFilter';\n\nconst FilterBox = (props: DatatablePropsWithState) => {\n   let {\n      tabs,\n      filters,\n      hideSearch,\n      slotProps,\n      skeleton,\n      state,\n      update,\n   } = props\n   const [openFilter, setOpenFilter] = React.useState(false)\n   let checked = state.selectAll || !!state.selected.length\n\n   if (checked) return <></>\n\n   return (\n      <Stack\n         direction=\"row\"\n         alignItems=\"center\"\n         justifyContent=\"space-between\"\n         zIndex={1}\n         radius={1}\n         mb={1}\n         height={50}\n         width=\"100%\"\n      >\n         <Stack gap={2.4} flexRow>\n            {\n               tabs && <Tabs\n                  disabled={skeleton ? true : false}\n                  onChange={(value: any) => {\n                     update({ tab: value })\n                  }}\n                  value={state.tab}\n               >\n                  {\n                     tabs.map(t => <Tab key={t.label} value={t.value || t.label.toLowerCase()}>{t.label}</Tab>)\n                  }\n               </Tabs>\n            }\n         </Stack>\n         <Stack\n            flexRow\n            gap={2}\n            className='datatable-header-right-area'\n            alignItems={\"center\"}\n         >\n            {!hideSearch && <Input\n               disabled={skeleton ? true : false}\n               endIcon={<IconSearch />}\n               placeholder='Search...'\n               {...slotProps?.search}\n               value={state.search}\n               onChange={(e: any) => {\n                  update({ search: e.target.value })\n               }}\n            />}\n            {\n               filters && <Stack>\n                  <IconButton\n                     color=\"default\"\n                     variant={\"text\"}\n                     onClick={() => {\n                        setOpenFilter(true)\n                     }}\n                  >\n                     <FilterListOutlined />\n                  </IconButton>\n                  <Drawer\n                     open={openFilter}\n                     onClickOutside={() => { }}\n                     placement={\"right\"}\n                  >\n                     <ViewBox\n                        height=\"100%\"\n                        p={1}\n                        startContent={<Stack mb={2} px={2} flexRow justifyContent={\"space-between\"} alignItems=\"center\">\n                           <Text fontWeight={600} fontSize=\"h6\">Filters</Text>\n                           <IconButton\n                              size=\"small\"\n                              color=\"default\"\n                              variant=\"text\"\n                              onClick={() => {\n                                 setOpenFilter(false)\n                              }}\n                           >\n                              <CloseOutlined />\n                           </IconButton>\n                        </Stack>}\n                     >\n                        <Stack\n                           gap={2}\n                        >\n                           <DataFilter\n                              options={filters}\n                              value={state.filters}\n                              onChange={(s) => {\n                                 update({ filters: s })\n                              }}\n                           />\n                        </Stack>\n                     </ViewBox>\n                  </Drawer>\n               </Stack>\n            }\n         </Stack>\n      </Stack>\n   )\n}\n\nexport default FilterBox"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAgBA;AACG;AASA;AACA;AAEA;AAAa;AAEb;AAgBkB;;;;;AAiCA;;AAoBS;AAaG;;AAWjC;;"}