@clickhouse/click-ui 0.0.168 → 0.0.170

package/dist/click-ui.umd.js

@@ -1,6 +1,6 @@
 (function(global2, factory) {
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("styled-components"), require("react"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "styled-components", "react", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2["click-ui"] = {}, global2.jsxRuntime, global2.styled, global2.React, global2.ReactDOM));
-})(this, function(exports2, jsxRuntime, styledComponents, React, ReactDOM) {
+})(this, function(exports2, jsxRuntime, styled, React, ReactDOM) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -237,7 +237,7 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 8.6V21h16V8.6" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m2 10 10-7 10 7M15 21v-6a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v6" })
   ] });
-  const animationCircle1 = styledComponents.keyframes`
+  const animationCircle1 = styled.keyframes`
   0 {
     r: 0;
   }
@@ -251,7 +251,7 @@ var __publicField = (obj, key, value) => {
     r: 0;
   }
 `;
-  const animationCircle2 = styledComponents.keyframes`
+  const animationCircle2 = styled.keyframes`
   0 {
     r: 0;
   }
@@ -268,7 +268,7 @@ var __publicField = (obj, key, value) => {
    r: 0
   }
 `;
-  const animationCircle3 = styledComponents.keyframes`
+  const animationCircle3 = styled.keyframes`
   0 {
     r: 0;
   }
@@ -282,7 +282,7 @@ var __publicField = (obj, key, value) => {
    r: 0
   }
 `;
-  const HorizontalLoading = styledComponents.styled(DotsHorizontal).withConfig({
+  const HorizontalLoading = styled.styled(DotsHorizontal).withConfig({
     componentId: "sc-1b02o5c-0"
   })(["circle{animation-name:horizontal-loading;animation-duration:1.5s;animation-iteration-count:infinite;animation-timing-function:linear;-webkit-animation-name:horizontal-loading;-webkit-animation-duration:1.5s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:horizontal-loading;-moz-animation-duration:1.5s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;&:nth-child(1){animation-name:", ";-webkit-animation-name:", ";-moz-animation-name:", ";}&:nth-child(2){animation-name:", ";-webkit-animation-name:", ";-moz-animation-name:", ";}&:nth-child(3){animation-name:", ";-webkit-animation-name:", ";-moz-animation-name:", ";}}"], animationCircle1, animationCircle1, animationCircle1, animationCircle2, animationCircle2, animationCircle2, animationCircle3, animationCircle3, animationCircle3);
   const Http = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M3 13.8v-3.6M5.88 10.2v3.6M5.88 12H3M10.92 10.2H8.04M9.48 10.2v3.6M18.12 10.2v3.6M15.96 10.2h-2.88M14.52 10.2v3.6M18.12 10.2h1.755c.621 0 1.125.504 1.125 1.125v0c0 .621-.504 1.125-1.125 1.125H18.12M3 7V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2M21 17v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2" }) });
@@ -318,7 +318,7 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.25, d: "M16.375 15.125H19.5v3.125" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4.5 12a7.495 7.495 0 0 0 14.312 3.125" })
   ] });
-  const LoadingFlipped = styledComponents.styled(Loading).withConfig({
+  const LoadingFlipped = styled.styled(Loading).withConfig({
     componentId: "sc-15ao23s-0"
   })(["transform:scaleX(-1);"]);
   const Lock = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
@@ -326,7 +326,7 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12.375 14.458V17.5537", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M17.375 21.6813H7.375C6.27 21.6813 5.375 20.7578 5.375 19.6176V12.3943C5.375 11.2541 6.27 10.3306 7.375 10.3306H17.375C18.48 10.3306 19.375 11.2541 19.375 12.3943V19.6176C19.375 20.7578 18.48 21.6813 17.375 21.6813Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
-  const spin = styledComponents.keyframes`
+  const spin = styled.keyframes`
   from {
     transform: rotate(0deg) scaleX(-1);
   }
@@ -334,7 +334,7 @@ var __publicField = (obj, key, value) => {
     transform: rotate(360deg) scaleX(-1);
   }
 `;
-  const LoadingAnimated = styledComponents.styled(LoadingFlipped).withConfig({
+  const LoadingAnimated = styled.styled(LoadingFlipped).withConfig({
     componentId: "sc-1h6qu7m-0"
   })(["animation:", " 1s infinite linear;"], spin);
   const Metrics = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
@@ -605,7 +605,7 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 4V8C8 8.63 8.296 9.222 8.8 9.6L12 12L15.2 9.6C15.704 9.222 16 8.63 16 8V4", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16 20V16C16 15.37 15.704 14.778 15.2 14.4L12 12L8.8 14.4C8.296 14.778 8 15.37 8 16V20", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
-  const Calendar = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  const Calendar$1 = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2.99609", y: "2.99658", width: "18.0075", height: "18.0075", rx: "3", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21.0036 7.99826H2.99609", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17.3022 11.4997C17.3022 11.5273 17.2798 11.5497 17.2522 11.5497C17.2245 11.5497 17.2021 11.5273 17.2021 11.4997C17.2021 11.4721 17.2245 11.4497 17.2522 11.4497", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -704,7 +704,7 @@ var __publicField = (obj, key, value) => {
     briefcase: Briefcase,
     building: Building,
     "burger-menu": BurgerMenu,
-    calendar: Calendar,
+    calendar: Calendar$1,
     "calendar-with-time": CalendarWithTime,
     cards: Cards,
     "cell-tower": CellTower,
@@ -1387,7 +1387,7 @@ var __publicField = (obj, key, value) => {
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_5333_368", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "30", height: "20", rx: "1", fill: "white" }) }) })
   ] });
-  const FormRoot = styledComponents.styled.div.withConfig({
+  const FormRoot = styled.styled.div.withConfig({
     componentId: "sc-1sddmxu-0"
   })(["display:flex;width:100%;gap:", ";", " *{box-shadow:none;outline:none;}"], ({
     theme: theme2
@@ -1406,7 +1406,7 @@ var __publicField = (obj, key, value) => {
     }
     ` : ""}
   `);
-  const Error$1 = styledComponents.styled.div.withConfig({
+  const Error$1 = styled.styled.div.withConfig({
     componentId: "sc-1sddmxu-1"
   })(["", ";"], ({
     theme: theme2
@@ -1414,10 +1414,10 @@ var __publicField = (obj, key, value) => {
   font: ${theme2.click.field.typography.label.error};
   color: ${theme2.click.field.color.label.error};
 `);
-  const EmptyButton$1 = styledComponents.styled.button.withConfig({
+  const EmptyButton$1 = styled.styled.button.withConfig({
     componentId: "sc-1sddmxu-2"
   })(["background:transparent;border:none;cursor:pointer;outline:none;padding:0;border:0;color:inherit;font:inherit;&:disabled{cursor:not-allowed;}"]);
-  const CrossButton = styledComponents.styled(EmptyButton$1).withConfig({
+  const CrossButton = styled.styled(EmptyButton$1).withConfig({
     componentId: "sc-1sddmxu-3"
   })(["padding:", " ", ";background:", ";border-radius:", ";&:hover{background:", ";}"], ({
     theme: theme2
@@ -1430,10 +1430,10 @@ var __publicField = (obj, key, value) => {
   }) => theme2.click.button.iconButton.radii.all, ({
     theme: theme2
   }) => theme2.click.button.iconButton.color.primary.background.hover);
-  styledComponents.styled.div.withConfig({
+  styled.styled.div.withConfig({
     componentId: "sc-1sddmxu-4"
   })(["display:grid;place-items:center;width:100%;height:100%;"]);
-  const BaseButton = styledComponents.styled.button.withConfig({
+  const BaseButton = styled.styled.button.withConfig({
     componentId: "sc-1sddmxu-5"
   })(["display:flex;flex-direction:row;justify-content:center;align-items:center;cursor:pointer;", ""], ({
     theme: theme2
@@ -1459,7 +1459,7 @@ var __publicField = (obj, key, value) => {
       cursor: not-allowed;
     }
     `);
-  const SvgImageElement = styledComponents.styled.svg.withConfig({
+  const SvgImageElement = styled.styled.svg.withConfig({
     componentId: "sc-1sddmxu-6"
   })(["display:flex;align-items:center;", ""], ({
     theme: theme2,
@@ -1470,12 +1470,12 @@ var __publicField = (obj, key, value) => {
         height: ${theme2.click.image[$size].size.height};
       ` : ""}
   `);
-  const FormElementContainer = styledComponents.styled.div.withConfig({
+  const FormElementContainer = styled.styled.div.withConfig({
     componentId: "sc-1sddmxu-7"
   })(["display:flex;flex-direction:column;align-items:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
     theme: theme2
   }) => theme2.click.field.space.gap);
-  styledComponents.styled.span.withConfig({
+  styled.styled.span.withConfig({
     componentId: "sc-1sddmxu-8"
   })(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-end;gap:inherit;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
   const Switzerland = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "30", height: "20", viewBox: "0 0 30 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
@@ -2234,7 +2234,7 @@ var __publicField = (obj, key, value) => {
   }) => {
     const {
       name: themeName
-    } = styledComponents.useTheme();
+    } = styled.useTheme();
     const Component = ["light", "classic"].includes(theme2 ?? themeName) ? LogosLight[name2] : LogosDark[name2];
     if (!Component) {
       return null;
@@ -2313,7 +2313,7 @@ var __publicField = (obj, key, value) => {
     }
     return /* @__PURE__ */ jsxRuntime.jsx(SvgWrapper, { $color: color, $width: width, $height: height, $size: size2, className, state, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }) });
   };
-  const SvgWrapper = styledComponents.styled.div.withConfig({
+  const SvgWrapper = styled.styled.div.withConfig({
     componentId: "sc-29ieut-0"
   })(["display:flex;align-items:center;", " ", ""], ({
     theme: theme2,
@@ -2373,7 +2373,7 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Button$2, { ...props, $styleType: type, $size: size2, ref, role: "button", "aria-label": iconName, children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: "sm" }) });
   });
   IconButton$1.displayName = "IconButton";
-  const Button$2 = styledComponents.styled.button.withConfig({
+  const Button$2 = styled.styled.button.withConfig({
     componentId: "sc-4ff7ue-0"
   })(["", ""], ({
     theme: theme2,
@@ -2411,7 +2411,7 @@ var __publicField = (obj, key, value) => {
     cursor: not-allowed;
   }
   `);
-  const FormFieldLabel$1 = styledComponents.styled.label.withConfig({
+  const FormFieldLabel$1 = styled.styled.label.withConfig({
     componentId: "sc-1gg29zb-0"
   })(["", ""], ({
     theme: theme2,
@@ -2443,7 +2443,7 @@ var __publicField = (obj, key, value) => {
     children,
     ...props
   }) => /* @__PURE__ */ jsxRuntime.jsx(FormFieldLabel$1, { disabled, $error: error2, ...props, children });
-  const FormFieldLabel = styledComponents.styled.label.withConfig({
+  const FormFieldLabel = styled.styled.label.withConfig({
     componentId: "sc-e2xmgs-0"
   })(["", ""], ({
     theme: theme2,
@@ -7553,7 +7553,7 @@ var __publicField = (obj, key, value) => {
   const $d08ef79370b62062$export$d7a01e11500dfb6f = $d08ef79370b62062$export$2f307d81a64f5442;
   const $d08ef79370b62062$export$2ea8a7a591ac5eac = $d08ef79370b62062$export$21dcb7ec56f874cf;
   const $d08ef79370b62062$export$6d4de93b380beddf = $d08ef79370b62062$export$f34ec8bc2482cc5f;
-  const GenericMenuPanel = styledComponents.styled.div.withConfig({
+  const GenericMenuPanel = styled.styled.div.withConfig({
     componentId: "sc-1fv0ktx-0"
   })(["outline:none;max-width:var(--radix-", "-content-available-width);max-height:var(--radix-", "-content-available-height);overflow:hidden;display:flex;align-items:flex-start;pointer-events:auto;", ";", ";"], ({
     $type
@@ -7583,7 +7583,7 @@ var __publicField = (obj, key, value) => {
         margin-left: -1px;
       }
   ` : "");
-  const GenericPopoverMenuPanel = styledComponents.styled.div.withConfig({
+  const GenericPopoverMenuPanel = styled.styled.div.withConfig({
     componentId: "sc-1fv0ktx-1"
   })(["outline:none;max-width:var(--radix-", "-content-available-width);max-height:var(--radix-", "-content-available-height);overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;z-index:1;", " ", ";"], ({
     $type
@@ -7600,7 +7600,7 @@ var __publicField = (obj, key, value) => {
   `, ({
     $showArrow
   }) => $showArrow ? "margin: -1px 0;" : "");
-  const Arrow$1 = styledComponents.styled.svg.withConfig({
+  const Arrow$1 = styled.styled.svg.withConfig({
     componentId: "sc-1fv0ktx-2"
   })(["filter:drop-shadow(rgba(0,0,0,0.1) 0px 4px 6px);", ";"], ({
     theme: theme2
@@ -7608,7 +7608,7 @@ var __publicField = (obj, key, value) => {
     fill: ${theme2.click.genericMenu.panel.color.background.default};
     stroke: ${theme2.click.genericMenu.panel.color.stroke.default};
   `);
-  const GenericMenuItem = styledComponents.styled.div.withConfig({
+  const GenericMenuItem = styled.styled.div.withConfig({
     componentId: "sc-1fv0ktx-3"
   })(["display:flex;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;align-items:center;justify-content:flex-start;cursor:default;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;outline:none;&[aria-selected]{outline:none;}", ';position:relative;&:hover .dropdown-arrow,&[data-state="open"] .dropdown-arrow{left:0.5rem;}&[hidden]{display:none;}'], ({
     theme: theme2
@@ -7654,7 +7654,7 @@ var __publicField = (obj, key, value) => {
       }
     });
   };
-  const EllipsisContainer$1 = styledComponents.styled.div.withConfig({
+  const EllipsisContainer$1 = styled.styled.div.withConfig({
     componentId: "sc-1ibz5fp-0"
   })(["display:inline-block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
   const _EllipsisContent = ({
@@ -7668,7 +7668,7 @@ var __publicField = (obj, key, value) => {
     }]), ...props });
   };
   const EllipsisContent = React.forwardRef(_EllipsisContent);
-  const LabelContainer$1 = styledComponents.styled.div.withConfig({
+  const LabelContainer$1 = styled.styled.div.withConfig({
     componentId: "sc-1likhxd-0"
   })(["display:grid;grid-template-columns:", ";align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
     $hasIcon,
@@ -7692,7 +7692,7 @@ var __publicField = (obj, key, value) => {
     ] });
   };
   const Dropdown = (props) => /* @__PURE__ */ jsxRuntime.jsx($d08ef79370b62062$export$be92b6f5f03c0fe9, { ...props });
-  const DropdownMenuItem = styledComponents.styled(GenericMenuItem).withConfig({
+  const DropdownMenuItem = styled.styled(GenericMenuItem).withConfig({
     componentId: "sc-18bhwbw-0"
   })(['position:relative;display:flex;&[data-state="open"]{', "}"], ({
     theme: theme2
@@ -7702,7 +7702,7 @@ var __publicField = (obj, key, value) => {
       color: ${theme2.click.genericMenu.item.color.text.hover};
       cursor: pointer;
     `);
-  const Trigger$5 = styledComponents.styled($d08ef79370b62062$export$41fb9f06171c75f4).withConfig({
+  const Trigger$5 = styled.styled($d08ef79370b62062$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-18bhwbw-1"
   })(["cursor:pointer;width:fit-content;&[disabled]{cursor:not-allowed;}"]);
   const DropdownTrigger = ({
@@ -7725,7 +7725,7 @@ var __publicField = (obj, key, value) => {
   };
   DropdownTrigger.displayName = "DropdownTrigger";
   Dropdown.Trigger = DropdownTrigger;
-  const DropdownMenuContent = styledComponents.styled(GenericMenuPanel).withConfig({
+  const DropdownMenuContent = styled.styled(GenericMenuPanel).withConfig({
     componentId: "sc-18bhwbw-2"
   })(["min-width:", ";flex-direction:column;z-index:1;"], ({
     theme: theme2
@@ -7744,7 +7744,7 @@ var __publicField = (obj, key, value) => {
   };
   DropdownContent$1.displayName = "DropdownContent";
   Dropdown.Content = DropdownContent$1;
-  const DropdownMenuGroup = styledComponents.styled($d08ef79370b62062$export$eb2fcfdbd7ba97d4).withConfig({
+  const DropdownMenuGroup = styled.styled($d08ef79370b62062$export$eb2fcfdbd7ba97d4).withConfig({
     componentId: "sc-18bhwbw-3"
   })(["width:100%;border-bottom:1px solid ", ";"], ({
     theme: theme2
@@ -7754,7 +7754,7 @@ var __publicField = (obj, key, value) => {
   };
   DropdownGroup.displayName = "DropdownGroup";
   Dropdown.Group = DropdownGroup;
-  const DropdownMenuSub = styledComponents.styled($d08ef79370b62062$export$d7a01e11500dfb6f).withConfig({
+  const DropdownMenuSub = styled.styled($d08ef79370b62062$export$d7a01e11500dfb6f).withConfig({
     componentId: "sc-18bhwbw-4"
   })(["border-bottom:1px solid ", ";"], ({
     theme: theme2
@@ -8194,12 +8194,12 @@ var __publicField = (obj, key, value) => {
       children
     ] })
   ] }) });
-  const AccordionRoot$1 = styledComponents.styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
+  const AccordionRoot$1 = styled.styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-1ysh219-0"
   })(["", ";"], ({
     $fillWidth
   }) => $fillWidth && "width: 100%");
-  const AccordionTrigger$1 = styledComponents.styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+  const AccordionTrigger$1 = styled.styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-1ysh219-1"
   })(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
     theme: theme2,
@@ -8223,21 +8223,21 @@ var __publicField = (obj, key, value) => {
   `, ({
     $fillWidth
   }) => $fillWidth && "width: 100%");
-  const AccordionIconWrapper$1 = styledComponents.styled.div.withConfig({
+  const AccordionIconWrapper$1 = styled.styled.div.withConfig({
     componentId: "sc-1ysh219-2"
   })(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger$1);
-  const AccordionIconsWrapper$1 = styledComponents.styled.div.withConfig({
+  const AccordionIconsWrapper$1 = styled.styled.div.withConfig({
     componentId: "sc-1ysh219-3"
   })(["display:flex;align-items:center;justify-content:center;"]);
-  const AccordionContent$1 = styledComponents.styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
+  const AccordionContent$1 = styled.styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-1ysh219-4"
   })([""]);
-  styledComponents.styled(Accordion).withConfig({
+  styled.styled(Accordion).withConfig({
     componentId: "sc-1ysh219-5"
   })(["", "{gap:", ";}p{margin:0;}", "{visibility:hidden;}&:hover ", "{visibility:revert;}&:active ", "{visibility:revert;}", "[data-state='open'] ", "{visibility:revert;}"], AccordionTrigger$1, ({
     theme: theme2
   }) => theme2.click.sidebar.navigation.item.default.space.gap, AccordionIconWrapper$1, AccordionIconWrapper$1, AccordionIconWrapper$1, AccordionTrigger$1, AccordionIconWrapper$1);
-  const AccordionToExport = styledComponents.styled(Accordion).withConfig({
+  const AccordionToExport = styled.styled(Accordion).withConfig({
     componentId: "sc-1ysh219-6"
   })([""]);
   const stateIconMap = {
@@ -8269,7 +8269,7 @@ var __publicField = (obj, key, value) => {
       dismissible && /* @__PURE__ */ jsxRuntime.jsx(DismissWrapper$1, { "data-testid": "click-alert-dismiss-button", onClick: () => setIsVisible(false), children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", "aria-label": "close" }) })
     ] }) : null;
   };
-  const Wrapper$d = styledComponents.styled.div.withConfig({
+  const Wrapper$d = styled.styled.div.withConfig({
     componentId: "sc-1wvczk0-0"
   })(["display:flex;border-radius:", ";justify-content:", ";overflow:hidden;background-color:", ";color:", ";width:100%;"], ({
     $type,
@@ -8283,7 +8283,7 @@ var __publicField = (obj, key, value) => {
     $state = "neutral",
     theme: theme2
   }) => theme2.click.alert.color.text[$state]);
-  const IconWrapper$2 = styledComponents.styled.div.withConfig({
+  const IconWrapper$2 = styled.styled.div.withConfig({
     componentId: "sc-1wvczk0-1"
   })(["display:flex;align-items:center;background-color:", ";", ""], ({
     $state = "neutral",
@@ -8297,7 +8297,7 @@ var __publicField = (obj, key, value) => {
     color: ${theme2.click.alert.color.iconForeground[$state]};
     padding: ${theme2.click.alert[$size].space.y} ${theme2.click.alert[$size].space.x};
   `);
-  const StyledIcon = styledComponents.styled(SvgImage).withConfig({
+  const StyledIcon = styled.styled(SvgImage).withConfig({
     componentId: "sc-1wvczk0-2"
   })(["", ""], ({
     $size,
@@ -8306,7 +8306,7 @@ var __publicField = (obj, key, value) => {
     height: ${theme2.click.alert[$size].icon.height};
     width: ${theme2.click.alert[$size].icon.width};
   `);
-  const TextWrapper = styledComponents.styled.div.withConfig({
+  const TextWrapper = styled.styled.div.withConfig({
     componentId: "sc-1wvczk0-3"
   })(["display:flex;flex-flow:column;word-break:break-word;", ""], ({
     $size,
@@ -8320,19 +8320,19 @@ var __publicField = (obj, key, value) => {
       text-decoration: underline;
     }
   `);
-  const Title$4 = styledComponents.styled.h6.withConfig({
+  const Title$4 = styled.styled.h6.withConfig({
     componentId: "sc-1wvczk0-4"
   })(["margin:0;font:", ";"], ({
     theme: theme2,
     $size
   }) => theme2.click.alert[$size].typography.title.default);
-  const Text$1 = styledComponents.styled.div.withConfig({
+  const Text$1 = styled.styled.div.withConfig({
     componentId: "sc-1wvczk0-5"
   })(["margin:0;font:", ";"], ({
     theme: theme2,
     $size
   }) => theme2.click.alert[$size].typography.text.default);
-  const DismissWrapper$1 = styledComponents.styled.button.withConfig({
+  const DismissWrapper$1 = styled.styled.button.withConfig({
     componentId: "sc-1wvczk0-6"
   })(["display:flex;align-items:center;margin-left:auto;border:none;background-color:transparent;color:inherit;cursor:pointer;"]);
   const DangerAlert = (props) => /* @__PURE__ */ jsxRuntime.jsx(Alert, { ...props, state: "danger" });
@@ -8644,7 +8644,7 @@ var __publicField = (obj, key, value) => {
       return /* @__PURE__ */ jsxRuntime.jsx(Item, { ...props }, `autocomplete-${id}-item-${index2}`);
     }
   });
-  const SelectPopoverRoot$1 = styledComponents.styled($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9).withConfig({
+  const SelectPopoverRoot$1 = styled.styled($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-87wbnc-0"
   })(["width:100%;", " overflow:hidden;display:flex;padding:0.5rem 0rem;align-items:flex-start;gap:0.625rem;"], ({
     theme: theme2
@@ -8655,10 +8655,10 @@ var __publicField = (obj, key, value) => {
       0px 1px 2px 0px rgba(16, 24, 40, 0.06);
     border-radius: 0.25rem;
   `);
-  const PopoverContent$1 = styledComponents.styled($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2).withConfig({
+  const PopoverContent$1 = styled.styled($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-87wbnc-1"
   })(["width:var(--radix-popover-trigger-width);display:flex;flex-direction:column;align-items:flex-start;gap:5px;"]);
-  const SelectGroupContainer$1 = styledComponents.styled.div.withConfig({
+  const SelectGroupContainer$1 = styled.styled.div.withConfig({
     componentId: "sc-87wbnc-2"
   })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:-webkit-fill-available;width:fill-available;width:stretch;overflow:hidden;background:transparent;&[aria-selected]{outline:none;}", ";&[hidden]{display:none;}"], ({
     theme: theme2
@@ -8666,7 +8666,7 @@ var __publicField = (obj, key, value) => {
     font: ${theme2.click.genericMenu.item.typography.sectionHeader.default};
     color: ${theme2.click.genericMenu.item.color.text.muted};
   `);
-  const SelectGroupName$1 = styledComponents.styled.div.withConfig({
+  const SelectGroupName$1 = styled.styled.div.withConfig({
     componentId: "sc-87wbnc-3"
   })(["display:flex;width:100%;flex-direction:column;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;", ""], ({
     theme: theme2
@@ -8677,10 +8677,10 @@ var __publicField = (obj, key, value) => {
      gap: ${theme2.click.genericMenu.item.space.gap};
      border-bottom: 1px solid ${theme2.click.genericMenu.item.color.stroke.default};
    `);
-  const SelectGroupContent$1 = styledComponents.styled.div.withConfig({
+  const SelectGroupContent$1 = styled.styled.div.withConfig({
     componentId: "sc-87wbnc-4"
   })(["width:inherit;"]);
-  const SelectListContent$1 = styledComponents.styled.div.withConfig({
+  const SelectListContent$1 = styled.styled.div.withConfig({
     componentId: "sc-87wbnc-5"
   })(["width:inherit;overflow:overlay;flex:1;"]);
   const childrenToComboboxItemArray$1 = (children, callback, heading) => {
@@ -8714,7 +8714,7 @@ var __publicField = (obj, key, value) => {
       return [];
     });
   };
-  const SelectNoDataContainer$1 = styledComponents.styled.div.withConfig({
+  const SelectNoDataContainer$1 = styled.styled.div.withConfig({
     componentId: "sc-87wbnc-6"
   })(['border:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;cursor:default;&[hidden="true"]{display:none;}', ""], ({
     theme: theme2
@@ -8724,7 +8724,7 @@ var __publicField = (obj, key, value) => {
     background: ${theme2.click.genericMenu.button.color.background.default};
     color: ${theme2.click.genericMenu.button.color.label.default};
   `);
-  const SelectList$1 = styledComponents.styled.div.withConfig({
+  const SelectList$1 = styled.styled.div.withConfig({
     componentId: "sc-87wbnc-7"
   })(["display:flex;flex-direction:column;width:inherit;max-height:var(--radix-popover-content-available-height);", ""], ({
     theme: theme2
@@ -8959,7 +8959,7 @@ var __publicField = (obj, key, value) => {
     ] });
   });
   Group.displayName = "AutoComplete.Group";
-  const CheckIcon$2 = styledComponents.styled.svg.withConfig({
+  const CheckIcon$2 = styled.styled.svg.withConfig({
     componentId: "sc-87wbnc-8"
   })(["opacity:", ";"], ({
     $showCheck
@@ -9008,7 +9008,7 @@ var __publicField = (obj, key, value) => {
         /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, children: label ?? children }),
         /* @__PURE__ */ jsxRuntime.jsx(CheckIcon$2, { as: SvgImage, name: "check", size: "sm", $showCheck: isChecked })
       ] }),
-      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { size: "sm" })
+      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "sm" })
     ] });
   });
   Item.displayName = "AutoComplete.Item";
@@ -9109,13 +9109,13 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src, srcSet, alt: text2 }),
     /* @__PURE__ */ jsxRuntime.jsx(StyledFallback, { $textSize: textSize, delayMs: 0, children: text2.trim().replace(/(^.)([^ ]* )?(.).*/, "$1$3").trim().toUpperCase() })
   ] });
-  const StyledRoot = styledComponents.styled($cddcb0b647441e34$export$be92b6f5f03c0fe9).withConfig({
+  const StyledRoot = styled.styled($cddcb0b647441e34$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-181etfq-0"
   })(["width:", ";height:", ";display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;overflow:hidden;user-select:none;background-color:", ";color:", ";border-radius:", ";&:active{background-color:", ";color:", ";}&:hover{background-color:", ";color:", ";}"], (props) => props.theme.click.avatar.size.width, (props) => props.theme.click.avatar.size.height, (props) => props.theme.click.avatar.color.background.default, (props) => props.theme.click.avatar.color.text.default, (props) => props.theme.click.avatar.radii.all, (props) => props.theme.click.avatar.color.background.active, (props) => props.theme.click.avatar.color.text.active, (props) => props.theme.click.avatar.color.background.hover, (props) => props.theme.click.avatar.color.text.hover);
-  const AvatarImage = styledComponents.styled($cddcb0b647441e34$export$3e431a229df88919).withConfig({
+  const AvatarImage = styled.styled($cddcb0b647441e34$export$3e431a229df88919).withConfig({
     componentId: "sc-181etfq-1"
   })(["width:100%;height:100%;object-fit:cover;border-radius:inherit;"]);
-  const StyledFallback = styledComponents.styled($cddcb0b647441e34$export$fb8d7f40caaeea67).withConfig({
+  const StyledFallback = styled.styled($cddcb0b647441e34$export$fb8d7f40caaeea67).withConfig({
     componentId: "sc-181etfq-2"
   })(["width:", ";display:inline-flex;align-items:center;justify-content:center;", ""], (props) => props.theme.click.avatar.size.label.width, ({
     theme: theme2,
@@ -9131,7 +9131,7 @@ var __publicField = (obj, key, value) => {
       font: ${theme2.click.avatar.typography.label[$textSize].hover};
       }
   `);
-  const Wrapper$c = styledComponents.styled.div.withConfig({
+  const Wrapper$c = styled.styled.div.withConfig({
     componentId: "sc-471xo0-0"
   })(["display:inline-flex;", ""], ({
     $state = "default",
@@ -9145,13 +9145,13 @@ var __publicField = (obj, key, value) => {
     border: ${theme2.click.badge.stroke} solid ${theme2.click.badge.color.stroke[$state]};
     padding: ${theme2.click.badge.space[$size].y} ${theme2.click.badge.space[$size].x};
   `);
-  const Content$4 = styledComponents.styled.div.withConfig({
+  const Content$4 = styled.styled.div.withConfig({
     componentId: "sc-471xo0-1"
   })(["display:inline-flex;align-items:center;gap:", ";max-width:100%;justify-content:flex-start;"], ({
     $size = "md",
     theme: theme2
   }) => theme2.click.badge.space[$size].gap);
-  const SvgContainer = styledComponents.styled.svg.withConfig({
+  const SvgContainer = styled.styled.svg.withConfig({
     componentId: "sc-471xo0-2"
   })(["", ""], ({
     $state = "default",
@@ -9162,7 +9162,7 @@ var __publicField = (obj, key, value) => {
     height: ${theme2.click.badge.icon[$size].size.height};
     width: ${theme2.click.badge.icon[$size].size.width};
   `);
-  const BadgeContent = styledComponents.styled.div.withConfig({
+  const BadgeContent = styled.styled.div.withConfig({
     componentId: "sc-471xo0-3"
   })(["width:auto;overflow:hidden;svg{", "}"], ({
     $state = "default",
@@ -9202,7 +9202,7 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntime.jsx(Label, { $state: state, $size: size2, children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(Title$3, { $state: state, $size: size2, children: title })
   ] });
-  const Wrapper$b = styledComponents.styled.div.withConfig({
+  const Wrapper$b = styled.styled.div.withConfig({
     componentId: "sc-u5029o-0"
   })(["display:flex;justify-content:center;box-sizing:border-box;", ""], ({
     $fillWidth = false,
@@ -9226,7 +9226,7 @@ var __publicField = (obj, key, value) => {
   width: ${$fillWidth === true ? "100%" : "auto"};
   max-width: ${$maxWidth ? $maxWidth : "none"};
   `);
-  const Label = styledComponents.styled.div.withConfig({
+  const Label = styled.styled.div.withConfig({
     componentId: "sc-u5029o-1"
   })(["", ""], ({
     $state = "default",
@@ -9236,7 +9236,7 @@ var __publicField = (obj, key, value) => {
     color: ${theme2.click.bigStat.color.label[$state]};
     font: ${theme2.click.bigStat.typography[$size].label[$state]};
   `);
-  const Title$3 = styledComponents.styled.div.withConfig({
+  const Title$3 = styled.styled.div.withConfig({
     componentId: "sc-u5029o-2"
   })(["", ""], ({
     $state = "default",
@@ -9265,7 +9265,7 @@ var __publicField = (obj, key, value) => {
     });
     return /* @__PURE__ */ jsxRuntime.jsx(ButtonGroupWrapper, { $fillWidth: fillWidth, $type: type, ...props, children: btns });
   };
-  const ButtonGroupWrapper = styledComponents.styled.div.withConfig({
+  const ButtonGroupWrapper = styled.styled.div.withConfig({
     componentId: "sc-ukgugp-0"
   })(["box-sizing:border-box;display:inline-flex;flex-direction:row;justify-content:center;align-items:center;padding:0px;gap:", ";border:1px solid ", ";background:", ";border-radius:", ";width:", ";"], ({
     theme: theme2,
@@ -9284,7 +9284,7 @@ var __publicField = (obj, key, value) => {
   const leftBorderRadius = `${endRadii} 0px 0px ${endRadii}`;
   const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`;
   const centerBorderRadius = "var(--click-button-button-group-radii-center)";
-  const Button$1 = styledComponents.styled.button.attrs((props) => ({
+  const Button$1 = styled.styled.button.attrs((props) => ({
     "aria-pressed": props.$active
   })).withConfig({
     componentId: "sc-ukgugp-1"
@@ -9354,10 +9354,10 @@ var __publicField = (obj, key, value) => {
       showLabelWithLoading ? label ?? children : ""
     ] })
   ] });
-  const LoadingIconWrapper = styledComponents.styled.div.withConfig({
+  const LoadingIconWrapper = styled.styled.div.withConfig({
     componentId: "sc-1k4tz4c-0"
   })(["background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;align-items:center;gap:0.5rem;"]);
-  const StyledButton = styledComponents.styled(BaseButton).withConfig({
+  const StyledButton = styled.styled(BaseButton).withConfig({
     componentId: "sc-1k4tz4c-1"
   })(["width:", ";color:", ";background-color:", ";border:", " solid ", ";font:", ";position:relative;display:flex;align-items:center;justify-content:", ";white-space:nowrap;&:hover{background-color:", ";border:", " solid ", ";transition:", ";font:", ";}&:active,&:focus{background-color:", ";border:1px solid ", ";font:", ";}&:disabled,&:disabled:hover,&:disabled:active{background-color:", ";color:", ";border:", " solid ", ";font:", ";}"], ({
     $fillWidth
@@ -9410,7 +9410,7 @@ var __publicField = (obj, key, value) => {
   }) => theme2.click.button.basic.color[$styleType].stroke.disabled, ({
     theme: theme2
   }) => theme2.click.button.basic.typography.label.disabled);
-  const ButtonIcon = styledComponents.styled(SvgImage).withConfig({
+  const ButtonIcon = styled.styled(SvgImage).withConfig({
     componentId: "sc-1k4tz4c-2"
   })(["height:", ";width:", ";svg{height:", ";width:", ";}"], ({
     theme: theme2
@@ -9430,7 +9430,7 @@ var __publicField = (obj, key, value) => {
     children,
     ...props
   }, ref) => /* @__PURE__ */ jsxRuntime.jsx(CuiTitle, { ref, $align: align, $color: color, $size: size2, $family: family, as: type, ...props, children }));
-  const CuiTitle = styledComponents.styled.div.withConfig({
+  const CuiTitle = styled.styled.div.withConfig({
     componentId: "sc-1bq7thb-0"
   })(["font:", ";color:", ";margin:0;padding:0;font-style:inherit;text-align:", ";a,a:visited{color:", ";cursor:pointer;}a:hover{color:", ";}"], ({
     $size = "md",
@@ -9458,7 +9458,7 @@ var __publicField = (obj, key, value) => {
     fillWidth,
     ...props
   }, ref) => /* @__PURE__ */ jsxRuntime.jsx(CuiText, { as: component ?? "p", ref, $align: align, $color: color, $size: size2, $weight: weight, $fillWidth: fillWidth, className, ...props, children });
-  const CuiText = styledComponents.styled.p.withConfig({
+  const CuiText = styled.styled.p.withConfig({
     componentId: "sc-6r74pj-0"
   })(["font:", ";color:", ";text-align:", ";margin:0;", ";"], ({
     $size = "md",
@@ -9474,10 +9474,10 @@ var __publicField = (obj, key, value) => {
   }) => $fillWidth && "width: 100%");
   _Text.displayName = "Text";
   const Text = React.forwardRef(_Text);
-  const Header$4 = styledComponents.styled.div.withConfig({
+  const Header$4 = styled.styled.div.withConfig({
     componentId: "sc-1drx130-0"
   })(["display:flex;justify-content:space-between;align-items:center;"]);
-  const HeaderLeft = styledComponents.styled.div.withConfig({
+  const HeaderLeft = styled.styled.div.withConfig({
     componentId: "sc-1drx130-1"
   })(["display:flex;align-items:center;gap:", ";h3,svg{color:", ";}"], ({
     theme: theme2
@@ -9485,24 +9485,24 @@ var __publicField = (obj, key, value) => {
     $disabled,
     theme: theme2
   }) => $disabled == true ? theme2.click.global.color.text.muted : theme2.click.global.color.text.default);
-  const Content$3 = styledComponents.styled.div.withConfig({
+  const Content$3 = styled.styled.div.withConfig({
     componentId: "sc-1drx130-2"
   })(["display:flex;flex-direction:column;flex:1;"]);
-  const CustomIcon$1 = styledComponents.styled.img.withConfig({
+  const CustomIcon$1 = styled.styled.img.withConfig({
     componentId: "sc-1drx130-3"
   })(["height:", ";width:", ";"], ({
     theme: theme2
   }) => theme2.click.image.lg.size.height, ({
     theme: theme2
   }) => theme2.click.image.lg.size.width);
-  const InfoLink = styledComponents.styled.a.withConfig({
+  const InfoLink = styled.styled.a.withConfig({
     componentId: "sc-1drx130-4"
   })(["display:flex;align-items:center;color:", ";gap:", ";text-decoration:none;"], ({
     theme: theme2
   }) => theme2.click.card.secondary.color.link.default, ({
     theme: theme2
   }) => theme2.click.card.secondary.space.link.gap);
-  const LinkIconContainer = styledComponents.styled(SvgImage).withConfig({
+  const LinkIconContainer = styled.styled(SvgImage).withConfig({
     componentId: "sc-1drx130-5"
   })(["color:", ";height:", ";width:", ";"], ({
     theme: theme2
@@ -9511,13 +9511,13 @@ var __publicField = (obj, key, value) => {
   }) => theme2.click.image.md.size.height, ({
     theme: theme2
   }) => theme2.click.image.md.size.width);
-  const LinkText = styledComponents.styled(Text).withConfig({
+  const LinkText = styled.styled(Text).withConfig({
     componentId: "sc-1drx130-6"
   })([""]);
-  const LinkIcon = styledComponents.styled(LinkIconContainer).withConfig({
+  const LinkIcon = styled.styled(LinkIconContainer).withConfig({
     componentId: "sc-1drx130-7"
   })([""]);
-  const Wrapper$a = styledComponents.styled.div.withConfig({
+  const Wrapper$a = styled.styled.div.withConfig({
     componentId: "sc-1drx130-8"
   })(["background-color:", ";border-radius:", ";border:", ";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,:focus{background-color:", ";cursor:pointer;", ",", "{color:", ';}}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}"], ({
     theme: theme2
@@ -9602,7 +9602,7 @@ var __publicField = (obj, key, value) => {
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$9, { ref, as: component ?? "div", $alignItems: alignItems ?? (orientation === "vertical" ? "start" : "center"), $fillWidth: fillWidth, $gapSize: gap, $grow: grow, $shrink: shrink, $isResponsive: isResponsive, $justifyContent: justifyContent, $maxWidth: maxWidth, $minWidth: minWidth, $orientation: orientation, $paddingSize: padding, $wrap: wrap, $fillHeight: fillHeight, $maxHeight: maxHeight, $minHeight: minHeight, $overflow: overflow, "data-testid": "container", ...props, children });
   };
-  const Wrapper$9 = styledComponents.styled.div.withConfig({
+  const Wrapper$9 = styled.styled.div.withConfig({
     componentId: "sc-bcplth-0"
   })(["display:flex;", " ", " ", " flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";max-width:", ";flex-direction:", ";}"], ({
     $grow,
@@ -9653,10 +9653,10 @@ var __publicField = (obj, key, value) => {
     $isResponsive = true
   }) => $isResponsive === true ? "column" : "auto");
   const Container = React.forwardRef(_Container);
-  const TopBadgeWrapper = styledComponents.styled(Container).withConfig({
+  const TopBadgeWrapper = styled.styled(Container).withConfig({
     componentId: "sc-1d5pqpo-0"
   })(["position:relative;"]);
-  const CardPrimaryTopBadge = styledComponents.styled(Badge).withConfig({
+  const CardPrimaryTopBadge = styled.styled(Badge).withConfig({
     componentId: "sc-1d5pqpo-1"
   })(["position:absolute;top:0;left:50%;transform:translate(-50%,-50%);", " div:active + &{border-color:", ";}"], ({
     $isSelected,
@@ -9673,7 +9673,7 @@ var __publicField = (obj, key, value) => {
       topBadgeText && /* @__PURE__ */ jsxRuntime.jsx(CardPrimaryTopBadge, { "data-testid": "card-top-badge", text: topBadgeText, $isSelected: props.isSelected || false })
     ] });
   };
-  const Wrapper$8 = styledComponents.styled.div.withConfig({
+  const Wrapper$8 = styled.styled.div.withConfig({
     componentId: "sc-2dguvi-0"
   })(["background-color:", ";border-radius:", ";border:", ";display:flex;width:100%;max-width:100%;text-align:", ";flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,&:focus{background-color:", ";cursor:pointer;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}&:active{border-color:", ';}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}", ""], ({
     theme: theme2
@@ -9723,7 +9723,7 @@ var __publicField = (obj, key, value) => {
     $isSelected,
     theme: theme2
   }) => $isSelected ? `border-color: ${theme2.click.button.basic.color.primary.stroke.active};` : "");
-  const Header$3 = styledComponents.styled.div.withConfig({
+  const Header$3 = styled.styled.div.withConfig({
     componentId: "sc-2dguvi-1"
   })(["display:flex;flex-direction:column;align-items:", ";gap:", ";h3{color:", ";}svg,img{height:", ";width:", ";}"], ({
     $alignContent = "center"
@@ -9740,7 +9740,7 @@ var __publicField = (obj, key, value) => {
     $size = "md",
     theme: theme2
   }) => theme2.click.card.primary.size.icon[$size].all);
-  const Content$2 = styledComponents.styled.div.withConfig({
+  const Content$2 = styled.styled.div.withConfig({
     componentId: "sc-2dguvi-2"
   })(["width:100%;display:flex;flex-direction:column;align-self:", ";gap:", ";flex:1;"], ({
     $alignContent = "center"
@@ -9793,15 +9793,15 @@ var __publicField = (obj, key, value) => {
     ] });
   };
   const CardPrimary = withTopBadge(Card);
-  const Header$2 = styledComponents.styled.div.withConfig({
+  const Header$2 = styled.styled.div.withConfig({
     componentId: "sc-1qnbjoa-0"
   })(["display:flex;flex-direction:column;align-items:center;width:fit-content;max-width:100%;gap:inherit;"]);
-  const Description = styledComponents.styled.div.withConfig({
+  const Description = styled.styled.div.withConfig({
     componentId: "sc-1qnbjoa-1"
   })(["display:flex;flex-direction:column;align-self:center;gap:", ";flex:1;"], ({
     theme: theme2
   }) => theme2.click.card.horizontal.space.gap);
-  const Wrapper$7 = styledComponents.styled.div.withConfig({
+  const Wrapper$7 = styled.styled.div.withConfig({
     componentId: "sc-1qnbjoa-2"
   })(["display:inline-flex;width:100%;max-width:100%;align-items:center;justify-content:flex-start;", ""], ({
     theme: theme2,
@@ -9859,7 +9859,7 @@ var __publicField = (obj, key, value) => {
           }
         ` : ""}
   `);
-  const CardIcon$1 = styledComponents.styled(SvgImage).withConfig({
+  const CardIcon$1 = styled.styled(SvgImage).withConfig({
     componentId: "sc-1qnbjoa-3"
   })(["", ""], ({
     theme: theme2
@@ -9867,7 +9867,7 @@ var __publicField = (obj, key, value) => {
       height: ${theme2.click.card.horizontal.icon.size.all};
       width: ${theme2.click.card.horizontal.icon.size.all};
   `);
-  const ContentWrapper = styledComponents.styled.div.withConfig({
+  const ContentWrapper = styled.styled.div.withConfig({
     componentId: "sc-1qnbjoa-4"
   })(["display:flex;flex-direction:column;"]);
   const CardHorizontal = ({
@@ -9889,7 +9889,7 @@ var __publicField = (obj, key, value) => {
       ] })
     ] });
   };
-  const Background = styledComponents.styled.div.withConfig({
+  const Background = styled.styled.div.withConfig({
     componentId: "sc-6jamj6-0"
   })(["", ""], ({
     theme: theme2
@@ -9904,7 +9904,7 @@ var __publicField = (obj, key, value) => {
       background: ${theme2.click.card.promotion.color.stroke.focus};
     }
   `);
-  const Wrapper$6 = styledComponents.styled.div.withConfig({
+  const Wrapper$6 = styled.styled.div.withConfig({
     componentId: "sc-6jamj6-1"
   })(["display:flex;width:100%;align-items:center;justify-content:flex-start;cursor:pointer;", ""], ({
     theme: theme2
@@ -9926,7 +9926,7 @@ var __publicField = (obj, key, value) => {
       color: ${theme2.click.card.promotion.color.text.active};
     }
   `);
-  const CardIcon = styledComponents.styled(SvgImage).withConfig({
+  const CardIcon = styled.styled(SvgImage).withConfig({
     componentId: "sc-6jamj6-2"
   })(["", ""], ({
     theme: theme2
@@ -9935,7 +9935,7 @@ var __publicField = (obj, key, value) => {
       width: ${theme2.click.card.promotion.icon.size.all};
       color: ${theme2.click.card.promotion.color.icon.default};
   `);
-  const DismissWrapper = styledComponents.styled.button.withConfig({
+  const DismissWrapper = styled.styled.button.withConfig({
     componentId: "sc-6jamj6-3"
   })(["display:flex;align-items:center;margin-left:auto;border:none;background-color:transparent;color:inherit;cursor:pointer;"]);
   const CardPromotion = ({
@@ -10102,12 +10102,13 @@ var __publicField = (obj, key, value) => {
   }
   const $e698a72e93240346$export$be92b6f5f03c0fe9 = $e698a72e93240346$export$48513f6b9f8ce62d;
   const $e698a72e93240346$export$adb584737d712b70 = $e698a72e93240346$export$59aad738f51d1c05;
-  const Wrapper$5 = styledComponents.styled(FormRoot).withConfig({
+  const Wrapper$5 = styled.styled(FormRoot).withConfig({
     componentId: "sc-1sck1ja-0"
   })(["align-items:center;max-width:fit-content;"]);
   const Checkbox = ({
     id,
     label,
+    variant,
     disabled,
     orientation,
     dir,
@@ -10115,28 +10116,29 @@ var __publicField = (obj, key, value) => {
   }) => {
     const defaultId = React.useId();
     return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$5, { $orientation: orientation ?? "horizontal", $dir: dir ?? "end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant: variant ?? "default", disabled, "aria-label": `${label}`, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "check", size: "sm" }) }) }),
       label && /* @__PURE__ */ jsxRuntime.jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
     ] });
   };
-  const CheckInput = styledComponents.styled($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig({
+  const CheckInput = styled.styled($e698a72e93240346$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-1sck1ja-1"
   })(["display:flex;align-items:center;justify-content:center;", ";"], ({
-    theme: theme2
+    theme: theme2,
+    variant = "default"
   }) => `
     border-radius: ${theme2.click.checkbox.radii.all};
     width: ${theme2.click.checkbox.size.all};
     height: ${theme2.click.checkbox.size.all};
-    background: ${theme2.click.checkbox.color.background.default};
-    border: 1px solid ${theme2.click.checkbox.color.stroke.default};
+    background: ${theme2.click.checkbox.color.variations[variant].background.default};
+    border: 1px solid ${theme2.click.checkbox.color.variations[variant].stroke.default};
     cursor: pointer;
 
     &:hover {
-      background: ${theme2.click.checkbox.color.background.hover};
+      background: ${theme2.click.checkbox.color.variations[variant].background.hover};
     }
     &[data-state="checked"] {
-      border-color: ${theme2.click.checkbox.color.stroke.active};
-      background: ${theme2.click.checkbox.color.background.active};
+      border-color: ${theme2.click.checkbox.color.variations[variant].stroke.active};
+      background: ${theme2.click.checkbox.color.variations[variant].background.active};
     }
     &[data-disabled] {
       background: ${theme2.click.checkbox.color.background.disabled};
@@ -10147,7 +10149,7 @@ var __publicField = (obj, key, value) => {
       }
     }
   `);
-  const CheckIconWrapper = styledComponents.styled($e698a72e93240346$export$adb584737d712b70).withConfig({
+  const CheckIconWrapper = styled.styled($e698a72e93240346$export$adb584737d712b70).withConfig({
     componentId: "sc-1sck1ja-2"
   })(["", ""], ({
     theme: theme2
@@ -12468,14 +12470,14 @@ var __publicField = (obj, key, value) => {
     return high.listLanguages();
   }
   function registerAlias(name2, alias) {
-    var map = name2;
+    var map2 = name2;
     var key;
     if (alias) {
-      map = {};
-      map[name2] = alias;
+      map2 = {};
+      map2[name2] = alias;
     }
-    for (key in map) {
-      high.registerAliases(map[key], { languageName: key });
+    for (key in map2) {
+      high.registerAliases(map2[key], { languageName: key });
     }
   }
   function Emitter(options2) {
@@ -13413,7 +13415,7 @@ var __publicField = (obj, key, value) => {
   var SyntaxHighlighter = highlight$2(core$1, {});
   SyntaxHighlighter.registerLanguage = core$1.registerLanguage;
   const useColorStyle = (defaultTheme) => {
-    const theme2 = styledComponents.useTheme();
+    const theme2 = styled.useTheme();
     const inheritedThemeName = theme2.name !== "classic" ? theme2.name : "light";
     const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;
     const codeTheme = theme2.click.codeblock[`${themeName}Mode`].color;
@@ -13580,7 +13582,7 @@ var __publicField = (obj, key, value) => {
   SyntaxHighlighter.registerLanguage("sql", sql);
   SyntaxHighlighter.registerLanguage("bash", bash);
   SyntaxHighlighter.registerLanguage("json", json);
-  const CodeBlockContainer = styledComponents.styled.div.withConfig({
+  const CodeBlockContainer = styled.styled.div.withConfig({
     componentId: "sc-18gnqgi-0"
   })(["width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;position:relative;cursor:pointer;", ""], ({
     theme: theme2,
@@ -13595,7 +13597,7 @@ var __publicField = (obj, key, value) => {
     }
   `;
   });
-  const CodeButton = styledComponents.styled(EmptyButton$1).withConfig({
+  const CodeButton = styled.styled(EmptyButton$1).withConfig({
     componentId: "sc-18gnqgi-1"
   })(["", ""], ({
     $copied,
@@ -13606,13 +13608,13 @@ var __publicField = (obj, key, value) => {
     padding: 0;
     border: 0;
   `);
-  const Highlighter = styledComponents.styled(SyntaxHighlighter).withConfig({
+  const Highlighter = styled.styled(SyntaxHighlighter).withConfig({
     componentId: "sc-18gnqgi-2"
   })(["background:transparent;padding:0;margin:0;"]);
-  const CodeContent = styledComponents.styled.code.withConfig({
+  const CodeContent = styled.styled.code.withConfig({
     componentId: "sc-18gnqgi-3"
   })(["font-family:inherit;color:inherit;"]);
-  const ButtonContainer = styledComponents.styled.div.withConfig({
+  const ButtonContainer = styled.styled.div.withConfig({
     componentId: "sc-18gnqgi-4"
   })(["position:absolute;display:flex;", ""], ({
     theme: theme2
@@ -13692,6 +13694,778 @@ var __publicField = (obj, key, value) => {
       }, showLineNumbers, wrapLines: wrap || wrapLines, wrapLongLines: wrap || wrapLines, children })
     ] });
   };
+  const constructFromSymbol = Symbol.for("constructDateFrom");
+  function constructFrom(date, value) {
+    if (typeof date === "function")
+      return date(value);
+    if (date && typeof date === "object" && constructFromSymbol in date)
+      return date[constructFromSymbol](value);
+    if (date instanceof Date)
+      return new date.constructor(value);
+    return new Date(value);
+  }
+  function toDate(argument, context) {
+    return constructFrom(context || argument, argument);
+  }
+  function addDays(date, amount, options2) {
+    const _date = toDate(date, options2 == null ? void 0 : options2.in);
+    if (isNaN(amount))
+      return constructFrom(date, NaN);
+    if (!amount)
+      return _date;
+    _date.setDate(_date.getDate() + amount);
+    return _date;
+  }
+  function addMonths(date, amount, options2) {
+    const _date = toDate(date, options2 == null ? void 0 : options2.in);
+    if (isNaN(amount))
+      return constructFrom(date, NaN);
+    if (!amount) {
+      return _date;
+    }
+    const dayOfMonth = _date.getDate();
+    const endOfDesiredMonth = constructFrom(date, _date.getTime());
+    endOfDesiredMonth.setMonth(_date.getMonth() + amount + 1, 0);
+    const daysInMonth = endOfDesiredMonth.getDate();
+    if (dayOfMonth >= daysInMonth) {
+      return endOfDesiredMonth;
+    } else {
+      _date.setFullYear(
+        endOfDesiredMonth.getFullYear(),
+        endOfDesiredMonth.getMonth(),
+        dayOfMonth
+      );
+      return _date;
+    }
+  }
+  function isWeekend(date, options2) {
+    const day = toDate(date, options2 == null ? void 0 : options2.in).getDay();
+    return day === 0 || day === 6;
+  }
+  let defaultOptions = {};
+  function getDefaultOptions() {
+    return defaultOptions;
+  }
+  function startOfWeek(date, options2) {
+    var _a, _b, _c, _d;
+    const defaultOptions2 = getDefaultOptions();
+    const weekStartsOn = (options2 == null ? void 0 : options2.weekStartsOn) ?? ((_b = (_a = options2 == null ? void 0 : options2.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.weekStartsOn) ?? defaultOptions2.weekStartsOn ?? ((_d = (_c = defaultOptions2.locale) == null ? void 0 : _c.options) == null ? void 0 : _d.weekStartsOn) ?? 0;
+    const _date = toDate(date, options2 == null ? void 0 : options2.in);
+    const day = _date.getDay();
+    const diff = (day < weekStartsOn ? 7 : 0) + day - weekStartsOn;
+    _date.setDate(_date.getDate() - diff);
+    _date.setHours(0, 0, 0, 0);
+    return _date;
+  }
+  function normalizeDates(context, ...dates) {
+    const normalize = constructFrom.bind(
+      null,
+      dates.find((date) => typeof date === "object")
+    );
+    return dates.map(normalize);
+  }
+  function addWeeks(date, amount, options2) {
+    return addDays(date, amount * 7, options2);
+  }
+  function startOfMonth(date, options2) {
+    const _date = toDate(date, options2 == null ? void 0 : options2.in);
+    _date.setDate(1);
+    _date.setHours(0, 0, 0, 0);
+    return _date;
+  }
+  function getDate(date, options2) {
+    return toDate(date, options2 == null ? void 0 : options2.in).getDate();
+  }
+  function getDay(date, options2) {
+    return toDate(date, options2 == null ? void 0 : options2.in).getDay();
+  }
+  function getDaysInMonth(date, options2) {
+    const _date = toDate(date, options2 == null ? void 0 : options2.in);
+    const year = _date.getFullYear();
+    const monthIndex = _date.getMonth();
+    const lastDayOfMonth = constructFrom(_date, 0);
+    lastDayOfMonth.setFullYear(year, monthIndex + 1, 0);
+    lastDayOfMonth.setHours(0, 0, 0, 0);
+    return lastDayOfMonth.getDate();
+  }
+  function isEqual$1(leftDate, rightDate) {
+    return +toDate(leftDate) === +toDate(rightDate);
+  }
+  function setDay(date, day, options2) {
+    var _a, _b;
+    const defaultOptions2 = getDefaultOptions();
+    const weekStartsOn = defaultOptions2.weekStartsOn ?? ((_b = (_a = defaultOptions2.locale) == null ? void 0 : _a.options) == null ? void 0 : _b.weekStartsOn) ?? 0;
+    const date_ = toDate(date, options2 == null ? void 0 : options2.in);
+    const currentDay = date_.getDay();
+    const remainder = day % 7;
+    const dayIndex = (remainder + 7) % 7;
+    const delta = 7 - weekStartsOn;
+    const diff = day < 0 || day > 6 ? day - (currentDay + delta) % 7 : (dayIndex + delta) % 7 - (currentDay + delta) % 7;
+    return addDays(date_, diff, options2);
+  }
+  function isSameMonth(laterDate, earlierDate, options2) {
+    const [laterDate_, earlierDate_] = normalizeDates(
+      options2 == null ? void 0 : options2.in,
+      laterDate,
+      earlierDate
+    );
+    return laterDate_.getFullYear() === earlierDate_.getFullYear() && laterDate_.getMonth() === earlierDate_.getMonth();
+  }
+  function isSameYear(laterDate, earlierDate, options2) {
+    const [laterDate_, earlierDate_] = normalizeDates(
+      options2 == null ? void 0 : options2.in,
+      laterDate,
+      earlierDate
+    );
+    return laterDate_.getFullYear() === earlierDate_.getFullYear();
+  }
+  function subDays(date, amount, options2) {
+    return addDays(date, -amount, options2);
+  }
+  function setHours(date, hours, options2) {
+    const _date = toDate(date, options2 == null ? void 0 : options2.in);
+    _date.setHours(hours);
+    return _date;
+  }
+  function setMilliseconds(date, milliseconds, options2) {
+    const _date = toDate(date, options2 == null ? void 0 : options2.in);
+    _date.setMilliseconds(milliseconds);
+    return _date;
+  }
+  function setMinutes(date, minutes, options2) {
+    const date_ = toDate(date, options2 == null ? void 0 : options2.in);
+    date_.setMinutes(minutes);
+    return date_;
+  }
+  function setSeconds(date, seconds, options2) {
+    const _date = toDate(date, options2 == null ? void 0 : options2.in);
+    _date.setSeconds(seconds);
+    return _date;
+  }
+  function subMonths(date, amount, options2) {
+    return addMonths(date, -amount, options2);
+  }
+  function subWeeks(date, amount, options2) {
+    return addWeeks(date, -amount, options2);
+  }
+  var CalendarViewtype = /* @__PURE__ */ ((CalendarViewtype2) => {
+    CalendarViewtype2["Month"] = "month";
+    CalendarViewtype2["Week"] = "week";
+    CalendarViewtype2["Day"] = "day";
+    return CalendarViewtype2;
+  })(CalendarViewtype || {});
+  var CalendarViewType_default = CalendarViewtype;
+  function arrayOf(count) {
+    return [...new Array(count).keys()];
+  }
+  var randomId = 0;
+  var map = /* @__PURE__ */ new Map();
+  function generateID(prefix2) {
+    if (map.has(prefix2)) {
+      const id = map.get(prefix2);
+      const newId = id + 1;
+      map.set(prefix2, newId);
+      randomId = newId;
+    } else {
+      const id = 1;
+      map.set(prefix2, id);
+      randomId = id;
+    }
+    return `${prefix2}-${randomId}`;
+  }
+  function resetTimeOfDate(date) {
+    return setHours(setMinutes(setSeconds(setMilliseconds(date, 0), 0), 0), 0);
+  }
+  function isSameDate(baseDate, targetDate) {
+    const base = resetTimeOfDate(baseDate);
+    const target = resetTimeOfDate(targetDate);
+    return isEqual$1(base, target);
+  }
+  function isSameYearAndMonth(baseDate, targetDate) {
+    return isSameMonth(targetDate, baseDate) && isSameYear(targetDate, baseDate);
+  }
+  function parseDate(date) {
+    return {
+      year: date.getFullYear(),
+      month: date.getMonth(),
+      day: date.getDate()
+    };
+  }
+  function pipe(...fns) {
+    return (...initialParams) => fns.reduce((value, fn, index2) => {
+      const params = index2 === 0 ? value : [value];
+      return fn(...params);
+    }, initialParams);
+  }
+  function pipeWith(value, ...fns) {
+    return pipe(
+      ...fns
+    )(value);
+  }
+  function withKey(arr, keyPrefix) {
+    return arr.map((value) => {
+      return {
+        ...value,
+        key: generateID(keyPrefix)
+      };
+    });
+  }
+  function withDateProps(baseDate, cursorDate) {
+    return function(cell) {
+      const { value: targetDate } = cell;
+      const isCurrentMonth = isSameYearAndMonth(cursorDate, targetDate);
+      const isCurrentDate = isSameDate(baseDate, targetDate);
+      const isWeekend$1 = isWeekend(targetDate);
+      return {
+        ...cell,
+        date: getDate(targetDate),
+        isCurrentMonth,
+        isCurrentDate,
+        isWeekend: isWeekend$1
+      };
+    };
+  }
+  function withKeyProps(keyPrefix) {
+    return function(cell) {
+      return {
+        ...cell,
+        key: generateID(keyPrefix)
+      };
+    };
+  }
+  function createCalendarInfo(cursorDate, { weekStartsOn }) {
+    const { year, month, day } = parseDate(cursorDate);
+    const startWeekdayInMonth = getStartWeekdayInMonth(cursorDate, weekStartsOn);
+    const weeksInMonth = getWeeksInMonth(cursorDate, startWeekdayInMonth);
+    const weekendDays = arrayOf(7).map((index2) => ({
+      value: setDay(cursorDate, index2 + weekStartsOn)
+    }));
+    const getDateCellByIndex = (weekIndex, dayIndex) => {
+      const day2 = weekIndex * 7 + dayIndex - startWeekdayInMonth + 1;
+      return { value: new Date(year, month, day2) };
+    };
+    return {
+      cursorDate,
+      year,
+      month,
+      day,
+      weekStartsOn,
+      startWeekdayInMonth,
+      weeksInMonth,
+      weekendDays,
+      today: {
+        weekIndex: getCurrentWeekIndex(day, startWeekdayInMonth),
+        dateIndex: getDay(cursorDate)
+      },
+      getDateCellByIndex
+    };
+  }
+  function getStartWeekdayInMonth(date, weekStartsOn) {
+    const monthStartsAt = (startOfMonth(date).getDay() - weekStartsOn) % 7;
+    return monthStartsAt < 0 ? monthStartsAt + 7 : monthStartsAt;
+  }
+  function getWeeksInMonth(date, startWeekdayInMonth) {
+    const totalDaysOfMonth = getDaysInMonth(date);
+    return Math.ceil((startWeekdayInMonth + totalDaysOfMonth) / 7);
+  }
+  function getCurrentWeekIndex(day, startWeekdayInMonth) {
+    if ((day + startWeekdayInMonth) % 7 > 0) {
+      return Math.floor((day + startWeekdayInMonth) / 7);
+    }
+    return Math.floor((day + startWeekdayInMonth) / 7) - 1;
+  }
+  function useIsMounted() {
+    const [mounted, setMounted] = React.useState(false);
+    React.useEffect(() => {
+      setMounted(true);
+    }, []);
+    return mounted;
+  }
+  function useCalendar({
+    defaultDate,
+    defaultWeekStart = 0,
+    defaultViewType = CalendarViewType_default.Month
+  } = {}) {
+    const isMounted = useIsMounted();
+    const baseDate = React.useMemo(() => {
+      return defaultDate != null ? new Date(defaultDate) : /* @__PURE__ */ new Date();
+    }, [defaultDate, isMounted]);
+    const [weekStartsOn, setWeekStartsOn] = React.useState(defaultWeekStart);
+    const [cursorDate, setCursorDate] = React.useState(baseDate);
+    const [viewType, setViewType] = React.useState(defaultViewType);
+    const calendar = createCalendarInfo(cursorDate, { weekStartsOn });
+    const { weekendDays, weeksInMonth, today, getDateCellByIndex } = calendar;
+    const getHeaders = React.useCallback(
+      (viewType2) => {
+        switch (viewType2) {
+          case CalendarViewType_default.Month:
+          case CalendarViewType_default.Week:
+            return {
+              weekDays: withKey(weekendDays, "weekdays")
+            };
+          case CalendarViewType_default.Day:
+          default:
+            return {
+              weekDays: withKey([{ value: cursorDate }], "weekdays")
+            };
+        }
+      },
+      [cursorDate, weekendDays]
+    );
+    const createMatrix = React.useCallback(
+      (weeksInMonth2) => ({
+        value: arrayOf(weeksInMonth2).map((weekIndex) => {
+          return {
+            key: generateID("weeks"),
+            value: arrayOf(7).map((dayIndex) => {
+              return pipeWith(
+                getDateCellByIndex(weekIndex, dayIndex),
+                withDateProps(baseDate, cursorDate),
+                withKeyProps("days")
+              );
+            })
+          };
+        })
+      }),
+      [baseDate, cursorDate, getDateCellByIndex]
+    );
+    const getBody = React.useCallback(
+      (viewType2) => {
+        var _a;
+        const matrix2 = createMatrix(weeksInMonth);
+        const { weekIndex, dateIndex } = today;
+        return {
+          [CalendarViewType_default.Month]: matrix2,
+          [CalendarViewType_default.Week]: {
+            value: [matrix2.value[weekIndex]]
+          },
+          [CalendarViewType_default.Day]: {
+            value: [
+              {
+                key: "week-day-type",
+                value: [(_a = matrix2.value[weekIndex]) == null ? void 0 : _a.value[dateIndex]]
+              }
+            ]
+          }
+        }[viewType2];
+      },
+      [createMatrix, today, weeksInMonth]
+    );
+    const setNext = React.useMemo(() => {
+      switch (viewType) {
+        case CalendarViewType_default.Month:
+          return (date) => addMonths(startOfMonth(date), 1);
+        case CalendarViewType_default.Week:
+          return (date) => addWeeks(startOfWeek(date, { weekStartsOn }), 1);
+        case CalendarViewType_default.Day:
+          return (date) => addDays(date, 1);
+      }
+    }, [viewType, weekStartsOn]);
+    const setPrev = React.useMemo(() => {
+      switch (viewType) {
+        case CalendarViewType_default.Month:
+          return (date) => subMonths(startOfMonth(date), 1);
+        case CalendarViewType_default.Week:
+          return (date) => subWeeks(startOfWeek(date, { weekStartsOn }), 1);
+        case CalendarViewType_default.Day:
+          return (date) => subDays(date, 1);
+      }
+    }, [viewType, weekStartsOn]);
+    return React.useMemo(
+      () => ({
+        ...calendar,
+        headers: getHeaders(viewType),
+        body: getBody(viewType),
+        navigation: {
+          toNext: () => setCursorDate((date) => setNext(date)),
+          toPrev: () => setCursorDate((date) => setPrev(date)),
+          setToday: () => setCursorDate(/* @__PURE__ */ new Date()),
+          setDate: (date) => setCursorDate(date)
+        },
+        view: {
+          type: viewType,
+          setViewType,
+          setWeekStartsOn,
+          isMonthView: viewType === CalendarViewType_default.Month,
+          isWeekView: viewType === CalendarViewType_default.Week,
+          isDayView: viewType === CalendarViewType_default.Day,
+          showMonthView: () => setViewType(CalendarViewType_default.Month),
+          showWeekView: () => setViewType(CalendarViewType_default.Week),
+          showDayView: () => setViewType(CalendarViewType_default.Day)
+        }
+      }),
+      [calendar, getBody, getHeaders, setNext, setPrev, viewType]
+    );
+  }
+  const Wrapper$4 = styled.styled.div.withConfig({
+    componentId: "sc-1pvd2nj-0"
+  })(["width:inherit;display:flex;align-items:center;justify-content:space-between;align-items:center;span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", ""], ({
+    theme: theme2,
+    $error,
+    $resize
+  }) => `
+    gap: ${theme2.click.field.space.gap};
+    border-radius: ${theme2.click.field.radii.all};
+    font: ${theme2.click.field.typography.fieldText.default};
+    color: ${theme2.click.field.color.text.default};
+    border: 1px solid ${theme2.click.field.color.stroke.default};
+    background: ${theme2.click.field.color.background.default};
+
+    *:autofill,
+    *:-webkit-autofill  {
+      -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.default} inset;
+      -webkit-text-fill-color: ${theme2.click.field.color.text.default};
+      caret-color: ${theme2.click.field.color.text.default};
+    }
+
+    &:hover {
+      border: 1px solid ${theme2.click.field.color.stroke.hover};
+      background: ${theme2.click.field.color.background.hover};
+      color: ${theme2.click.field.color.text.hover};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.hover} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.hover};
+        caret-color: ${theme2.click.field.color.text.hover};
+      }
+    }
+    ${$resize === "none" ? "" : `
+      resize: ${$resize};
+      overflow: auto;
+    `}
+    padding: 0 ${theme2.click.field.space.x};
+    ${$error ? `
+      font: ${theme2.click.field.typography.fieldText.error};
+      border: 1px solid ${theme2.click.field.color.stroke.error};
+      background: ${theme2.click.field.color.background.active};
+      color: ${theme2.click.field.color.text.error};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.error};
+        caret-color: ${theme2.click.field.color.text.error};
+      }
+
+      &:hover {
+        border: 1px solid ${theme2.click.field.color.stroke.error};
+        color: ${theme2.click.field.color.text.error};
+        *:autofill,
+        *:-webkit-autofill {
+          -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
+          -webkit-text-fill-color: ${theme2.click.field.color.text.error};
+          caret-color: ${theme2.click.field.color.text.error};
+        }
+      }
+    ` : `
+    &:focus-within,
+    &[data-state="open"] {
+      font: ${theme2.click.field.typography.fieldText.active};
+      border: 1px solid ${theme2.click.field.color.stroke.active};
+      background: ${theme2.click.field.color.background.active};
+      color: ${theme2.click.field.color.text.active};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.active} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.active};
+        caret-color: ${theme2.click.field.color.text.active};
+      }
+    }
+    `};
+    &:disabled, &.disabled {
+      font: ${theme2.click.field.typography.fieldText.disabled};
+      border: 1px solid ${theme2.click.field.color.stroke.disabled};
+      background: ${theme2.click.field.color.background.disabled};
+      color: ${theme2.click.field.color.text.disabled};
+
+      *:autofill,
+      *:-webkit-autofill {
+        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.disabled} inset;
+        -webkit-text-fill-color: ${theme2.click.field.color.text.disabled};
+        caret-color: ${theme2.click.field.color.text.disabled};
+      }
+    }
+  `);
+  const StyledLabel = styled.styled(Label$1).withConfig({
+    componentId: "sc-1pvd2nj-1"
+  })(["", ""], ({
+    $labelColor
+  }) => `
+    ${$labelColor ? `color: ${$labelColor};` : ""}
+  `);
+  const InputWrapper = ({
+    className,
+    id,
+    label = "",
+    labelColor,
+    error: error2,
+    disabled,
+    children,
+    orientation,
+    dir,
+    resize = "none"
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(FormElementContainer, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Wrapper$4, { $error: !!error2, $resize: resize, "data-resize": resize, className: disabled ? `disabled ${className}` : className, children }),
+        !!error2 && error2 !== true && /* @__PURE__ */ jsxRuntime.jsx(Error$1, { children: error2 })
+      ] }),
+      label && /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { htmlFor: id, disabled, error: !!error2, $labelColor: labelColor, children: label })
+    ] });
+  };
+  const InputElement = styled.styled.input.withConfig({
+    componentId: "sc-1pvd2nj-2"
+  })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
+    theme: theme2
+  }) => `
+    padding: ${theme2.click.field.space.y} 0;
+    &::placeholder {
+      color: ${theme2.click.field.color.placeholder.default};
+    }
+
+    &:disabled, &.disabled {
+      &::placeholder {
+      color: ${theme2.click.field.color.placeholder.disabled};
+    }
+  `);
+  const NumberInputElement = styled.styled(InputElement).withConfig({
+    componentId: "sc-1pvd2nj-3"
+  })(["", ""], ({
+    $hideControls
+  }) => `
+    ${$hideControls ? `
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    -moz-appearance: textfield;
+    ` : ""}
+  `);
+  const TextAreaElement = styled.styled.textarea.withConfig({
+    componentId: "sc-1pvd2nj-4"
+  })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
+    theme: theme2
+  }) => `
+    padding: ${theme2.click.field.space.y} 0;
+    align-self: stretch;
+    &::placeholder {
+      color: ${theme2.click.field.color.placeholder.default};
+    }
+  `);
+  styled.styled(InputWrapper).withConfig({
+    componentId: "sc-1pvd2nj-5"
+  })(["resize:vertical;overflow:auto;color:red;"]);
+  const IconButton = styled.styled.button.withConfig({
+    componentId: "sc-1pvd2nj-6"
+  })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
+    theme: theme2,
+    $show
+  }) => `
+      padding: ${theme2.click.field.space.y} 0;
+      visibility: ${$show ? "visible" : "hidden"};
+  `);
+  styled.styled.svg.withConfig({
+    componentId: "sc-1pvd2nj-7"
+  })(["", ""], ({
+    theme: theme2
+  }) => `
+    &:first-of-type {
+      padding-left: ${theme2.click.field.space.gap};
+    }
+    &:last-of-type {
+      padding-right: ${theme2.click.field.space.x};
+    }
+  `);
+  const locale = "en-US";
+  const weekdayFormatter = new Intl.DateTimeFormat(locale, {
+    weekday: "short"
+  });
+  const headerDateFormatter = new Intl.DateTimeFormat(locale, {
+    month: "short",
+    year: "numeric"
+  });
+  const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
+    day: "2-digit",
+    month: "short",
+    year: "numeric"
+  });
+  const explicitWidth = "250px";
+  const HighlightedInputWrapper = styled(InputWrapper).withConfig({
+    componentId: "sc-1kfphgn-0"
+  })(["", " width:", ";}"], ({
+    $isActive,
+    theme: theme2
+  }) => {
+    return `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isActive ? theme2.click.datePicker.dateOption.color.stroke.active : theme2.click.field.color.stroke.default};`;
+  }, explicitWidth);
+  const DatePickerContainer = styled(Container).withConfig({
+    componentId: "sc-1kfphgn-1"
+  })(["background:", ";"], ({
+    theme: theme2
+  }) => theme2.click.datePicker.dateOption.color.background.default);
+  const UnselectableTitle = styled.h2.withConfig({
+    componentId: "sc-1kfphgn-2"
+  })(["", " user-select:none;"], ({
+    theme: theme2
+  }) => `
+    color: ${theme2.click.datePicker.color.title.default};
+    font: ${theme2.click.datePicker.typography.title.default};
+  `);
+  const DateTable = styled.table.withConfig({
+    componentId: "sc-1kfphgn-3"
+  })(["border-collapse:separate;border-spacing:0;font:", " table-layout:fixed;user-select:none;width:", ";thead tr{height:", ";}tbody{cursor:pointer;}td,th{", ";padding:4px;}"], ({
+    theme: theme2
+  }) => theme2.typography.styles.product.text.normal.md, explicitWidth, ({
+    theme: theme2
+  }) => theme2.click.datePicker.dateOption.size.height, ({
+    theme: theme2
+  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${theme2.click.datePicker.dateOption.color.stroke.default}`);
+  const DateTableHeader = styled.th.withConfig({
+    componentId: "sc-1kfphgn-4"
+  })(["", " width:14%;"], ({
+    theme: theme2
+  }) => `
+    color: ${theme2.click.datePicker.color.daytitle.default};
+    font: ${theme2.click.datePicker.typography.daytitle.default};
+  `);
+  const DateTableCell = styled.td.withConfig({
+    componentId: "sc-1kfphgn-5"
+  })(["", " ", " ", " text-align:center;", " &:hover{", ";}"], ({
+    theme: theme2
+  }) => `
+    border-radius: ${theme2.click.datePicker.dateOption.radii.default};
+    font: ${theme2.click.datePicker.dateOption.typography.label.default};
+  `, ({
+    $isCurrentMonth,
+    $isDisabled,
+    theme: theme2
+  }) => (!$isCurrentMonth || $isDisabled) && `
+    color: ${theme2.click.datePicker.dateOption.color.label.disabled};
+    font: ${theme2.click.datePicker.dateOption.typography.label.disabled};
+  `, ({
+    $isSelected,
+    theme: theme2
+  }) => $isSelected && `
+      background: ${theme2.click.datePicker.dateOption.color.background.active};
+      color: ${theme2.click.datePicker.dateOption.color.label.active};
+    `, ({
+    $isToday,
+    theme: theme2
+  }) => $isToday && `font: ${theme2.click.datePicker.dateOption.typography.label.active};`, ({
+    $isDisabled,
+    theme: theme2
+  }) => `border: ${theme2.click.datePicker.dateOption.stroke} solid ${$isDisabled ? theme2.click.datePicker.dateOption.color.stroke.disabled : theme2.click.datePicker.dateOption.color.stroke.hover}`);
+  const DatePickerInput = ({
+    isActive,
+    disabled,
+    id,
+    placeholder,
+    selectedDate
+  }) => {
+    const defaultId = React.useId();
+    const formattedSelectedDate = selectedDate instanceof Date ? selectedDateFormatter.format(selectedDate) : "";
+    return /* @__PURE__ */ jsxRuntime.jsxs(HighlightedInputWrapper, { $isActive: isActive, disabled, id: id ?? defaultId, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "calendar" }),
+      /* @__PURE__ */ jsxRuntime.jsx(InputElement, { "data-testid": "datepicker-input", placeholder, readOnly: true, value: formattedSelectedDate })
+    ] });
+  };
+  const Calendar = ({
+    closeDatepicker,
+    futureDatesDisabled,
+    selectedDate,
+    setSelectedDate
+  }) => {
+    const calendarOptions = {
+      defaultWeekStart: 1
+    };
+    if (selectedDate) {
+      calendarOptions.defaultDate = selectedDate;
+    }
+    const {
+      body,
+      headers,
+      month,
+      navigation,
+      year
+    } = useCalendar(calendarOptions);
+    const handleNextClick = () => {
+      navigation.toNext();
+    };
+    const handlePreviousClick = () => {
+      navigation.toPrev();
+    };
+    const headerDate = /* @__PURE__ */ new Date();
+    headerDate.setMonth(month);
+    headerDate.setFullYear(year);
+    return /* @__PURE__ */ jsxRuntime.jsxs(DatePickerContainer, { "data-testid": "datepicker-calendar-container", isResponsive: false, fillWidth: false, orientation: "vertical", padding: "sm", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Container, { isResponsive: false, justifyContent: "space-between", orientation: "horizontal", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { icon: "chevron-left", onClick: handlePreviousClick, size: "sm", type: "ghost" }),
+        /* @__PURE__ */ jsxRuntime.jsx(UnselectableTitle, { children: headerDateFormatter.format(headerDate) }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconButton$1, { icon: "chevron-right", onClick: handleNextClick, size: "sm", type: "ghost" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs(DateTable, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: headers.weekDays.map(({
+          key,
+          value: date
+        }) => {
+          return /* @__PURE__ */ jsxRuntime.jsx(DateTableHeader, { children: weekdayFormatter.format(date) }, key);
+        }) }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: body.value.map(({
+          key: weekKey,
+          value: week
+        }) => {
+          return /* @__PURE__ */ jsxRuntime.jsx("tr", { children: week.map(({
+            date,
+            isCurrentMonth,
+            key: dayKey,
+            value: fullDate
+          }) => {
+            const isSelected = selectedDate ? isSameDate(selectedDate, fullDate) : false;
+            const today = /* @__PURE__ */ new Date();
+            const isCurrentDate = isSameDate(today, fullDate);
+            const isDisabled = futureDatesDisabled ? fullDate > today : false;
+            return /* @__PURE__ */ jsxRuntime.jsx(DateTableCell, { $isCurrentMonth: isCurrentMonth, $isDisabled: isDisabled, $isSelected: isSelected, $isToday: isCurrentDate, onClick: () => {
+              if (isDisabled) {
+                return false;
+              }
+              setSelectedDate(fullDate);
+              closeDatepicker();
+            }, children: date }, dayKey);
+          }) }, weekKey);
+        }) })
+      ] })
+    ] });
+  };
+  const DatePicker = ({
+    date,
+    disabled = false,
+    futureDatesDisabled = false,
+    onSelectDate,
+    placeholder
+  }) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const [selectedDate, setSelectedDate] = React.useState();
+    React.useEffect(() => {
+      if (date) {
+        setSelectedDate(date);
+      }
+    }, [date]);
+    const closeDatePicker = () => {
+      setIsOpen(false);
+    };
+    const handleSelectDate = (selectedDate2) => {
+      setSelectedDate(selectedDate2);
+      onSelectDate(selectedDate2);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs(Dropdown, { onOpenChange: setIsOpen, open: isOpen, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Trigger, { disabled, children: /* @__PURE__ */ jsxRuntime.jsx(DatePickerInput, { "data-testid": "datepicker-inpcontainer", disabled, isActive: isOpen, placeholder, selectedDate }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Content, { align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(Calendar, { closeDatepicker: closeDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: handleSelectDate }) })
+    ] });
+  };
   const $5d3850c4d0b4e6c7$var$DIALOG_NAME = "Dialog";
   const [$5d3850c4d0b4e6c7$var$createDialogContext, $5d3850c4d0b4e6c7$export$cc702773b8ea3e41] = $c512c27ab02ef895$export$50c7b4e9d9f19c1($5d3850c4d0b4e6c7$var$DIALOG_NAME);
   const [$5d3850c4d0b4e6c7$var$DialogProvider, $5d3850c4d0b4e6c7$var$useDialogContext] = $5d3850c4d0b4e6c7$var$createDialogContext($5d3850c4d0b4e6c7$var$DIALOG_NAME);
@@ -13959,7 +14733,7 @@ var __publicField = (obj, key, value) => {
   }) => {
     return /* @__PURE__ */ jsxRuntime.jsx($5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, { ...props, children });
   };
-  const Trigger$4 = styledComponents.styled($5d3850c4d0b4e6c7$export$41fb9f06171c75f4).withConfig({
+  const Trigger$4 = styled.styled($5d3850c4d0b4e6c7$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-1wr6otn-0"
   })(["width:fit-content;background:transparent;border:none;cursor:pointer;"]);
   const DialogTrigger = ({
@@ -13977,7 +14751,7 @@ var __publicField = (obj, key, value) => {
   }) => /* @__PURE__ */ jsxRuntime.jsx($5d3850c4d0b4e6c7$export$f39c2d165cd861fe, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type, label, ...props }) });
   DialogClose.displayName = "DialogClose";
   Dialog.Close = DialogClose;
-  const overlayShow = styledComponents.keyframes({
+  const overlayShow = styled.keyframes({
     "0%": {
       opacity: 0
     },
@@ -13985,7 +14759,7 @@ var __publicField = (obj, key, value) => {
       opacity: 1
     }
   });
-  const contentShow = styledComponents.keyframes({
+  const contentShow = styled.keyframes({
     "0%": {
       opacity: 0,
       transform: "translate(-50%, -48%) scale(.96)"
@@ -13995,12 +14769,12 @@ var __publicField = (obj, key, value) => {
       transform: "translate(-50%, -50%) scale(1)"
     }
   });
-  const DialogOverlay = styledComponents.styled($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff).withConfig({
+  const DialogOverlay = styled.styled($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff).withConfig({
     componentId: "sc-1wr6otn-1"
   })(["background-color:", ";position:fixed;inset:0;animation:", " 150ms cubic-bezier(0.16,1,0.3,1);"], ({
     theme: theme2
   }) => theme2.click.dialog.color.opaqueBackground.default, overlayShow);
-  const ContentArea = styledComponents.styled($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2).withConfig({
+  const ContentArea = styled.styled($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-1wr6otn-2"
   })(["background:", ";border-radius:", ";padding:", " ", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"], ({
     theme: theme2
@@ -14015,12 +14789,12 @@ var __publicField = (obj, key, value) => {
   }) => theme2.click.dialog.shadow.default, ({
     theme: theme2
   }) => theme2.click.global.color.stroke.default, contentShow);
-  const TitleArea = styledComponents.styled.div.withConfig({
+  const TitleArea = styled.styled.div.withConfig({
     componentId: "sc-1wr6otn-3"
   })(["display:flex;justify-content:space-between;align-items:center;min-height:", ";"], ({
     theme: theme2
   }) => theme2.sizes[9]);
-  const Title$1 = styledComponents.styled.h2.withConfig({
+  const Title$1 = styled.styled.h2.withConfig({
     componentId: "sc-1wr6otn-4"
   })(["font:", ";padding:0;margin:0;"], ({
     theme: theme2
@@ -14052,10 +14826,10 @@ var __publicField = (obj, key, value) => {
   };
   DialogContent$1.displayName = "DialogContent";
   Dialog.Content = DialogContent$1;
-  const ActionsWrapper = styledComponents.styled.div.withConfig({
+  const ActionsWrapper = styled.styled.div.withConfig({
     componentId: "sc-6eozxy-0"
   })(["display:flex;justify-content:flex-end;gap:", ";"], (props) => props.theme.click.dialog.space.gap);
-  const DialogContent = styledComponents.styled.div.withConfig({
+  const DialogContent = styled.styled.div.withConfig({
     componentId: "sc-6eozxy-1"
   })(["overflow:hidden;display:flex;flex-direction:column;"]);
   const ConfirmationDialog = ({
@@ -14080,7 +14854,7 @@ var __publicField = (obj, key, value) => {
       !open22 && onCancel && onCancel();
     }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { as: Dialog.Content, title, showClose, ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Container, { overflow: "auto", grow: "1", orientation: "vertical", children: children ? children : /* @__PURE__ */ jsxRuntime.jsx(Text, { children: message }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { size: "xl" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "xl" }),
       /* @__PURE__ */ jsxRuntime.jsxs(ActionsWrapper, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Dialog.Close, { label: secondaryActionLabel, "data-testid": "cancel-action-button" }),
         /* @__PURE__ */ jsxRuntime.jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, onClick: () => {
@@ -14105,7 +14879,7 @@ var __publicField = (obj, key, value) => {
   };
   Trigger$3.displayName = "Flyout.Trigger";
   Flyout.Trigger = Trigger$3;
-  const animationWidth = () => styledComponents.keyframes({
+  const animationWidth = () => styled.keyframes({
     from: {
       width: 0
     },
@@ -14113,7 +14887,7 @@ var __publicField = (obj, key, value) => {
       width: "fit-content"
     }
   });
-  const FlyoutContent = styledComponents.styled($5d3850c4d0b4e6c7$export$b6d9565de1e068cf).withConfig({
+  const FlyoutContent = styled.styled($5d3850c4d0b4e6c7$export$b6d9565de1e068cf).withConfig({
     componentId: "sc-1vtv6sf-0"
   })(["display:flex;flex-direction:column;align-items:center;overflow:hidden;top:0;bottom:0;width:fit-content;--flyout-width:", ";animation:", " 500ms cubic-bezier(0.16,1,0.3,1) forwards;", ""], ({
     theme: theme2,
@@ -14149,7 +14923,7 @@ var __publicField = (obj, key, value) => {
       }
     }
   `);
-  const FlyoutContainer = styledComponents.styled.div.withConfig({
+  const FlyoutContainer = styled.styled.div.withConfig({
     componentId: "sc-1vtv6sf-1"
   })(["display:flex;gap:0;width:var(--flyout-width);max-width:100%;flex-flow:column nowrap;gap:inherit;"]);
   const Content$1 = ({
@@ -14179,7 +14953,7 @@ var __publicField = (obj, key, value) => {
   };
   Content$1.displayName = "Flyout.Content";
   Flyout.Content = Content$1;
-  const FlyoutElement = styledComponents.styled(Container).withConfig({
+  const FlyoutElement = styled.styled(Container).withConfig({
     componentId: "sc-1vtv6sf-2"
   })(["max-width:100%;max-width:-webkit-fill-available;max-width:fill-available;max-width:stretch;", ""], ({
     theme: theme2,
@@ -14194,7 +14968,7 @@ var __publicField = (obj, key, value) => {
   }) => /* @__PURE__ */ jsxRuntime.jsx(FlyoutElement, { orientation: "vertical", padding: "none", gap: "none", $type: type, ...props });
   Element$1.displayName = "Flyout.Element";
   Flyout.Element = Element$1;
-  const FlyoutHeaderContainer = styledComponents.styled(Container).withConfig({
+  const FlyoutHeaderContainer = styled.styled(Container).withConfig({
     componentId: "sc-1vtv6sf-3"
   })(["", ""], ({
     theme: theme2,
@@ -14204,7 +14978,7 @@ var __publicField = (obj, key, value) => {
     column-gap: ${theme2.click.flyout.space[$type].content["column-gap"]};
     padding: ${theme2.click.flyout.space[$type].y} ${theme2.click.flyout.space[$type].y} 0 ${theme2.click.flyout.space[$type].y} ;
   `);
-  const FlyoutTitle = styledComponents.styled($5d3850c4d0b4e6c7$export$16f7638e4a34b909).withConfig({
+  const FlyoutTitle = styled.styled($5d3850c4d0b4e6c7$export$16f7638e4a34b909).withConfig({
     componentId: "sc-1vtv6sf-4"
   })(["", ""], ({
     theme: theme2,
@@ -14215,7 +14989,7 @@ var __publicField = (obj, key, value) => {
     margin: 0;
     padding: 0;
   `);
-  const FlyoutDescription = styledComponents.styled($5d3850c4d0b4e6c7$export$94e94c2ec2c954d5).withConfig({
+  const FlyoutDescription = styled.styled($5d3850c4d0b4e6c7$export$94e94c2ec2c954d5).withConfig({
     componentId: "sc-1vtv6sf-5"
   })(["", ""], ({
     theme: theme2,
@@ -14241,7 +15015,7 @@ var __publicField = (obj, key, value) => {
           /* @__PURE__ */ jsxRuntime.jsx(Container, { padding: "none", gap: "none", orientation: "vertical", grow: "1", children }),
           showClose && /* @__PURE__ */ jsxRuntime.jsx($5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
         ] }),
-        showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { "data-testid": "flyout-header-separator", size: "lg" })
+        showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { "data-testid": "flyout-header-separator", size: "lg" })
       ] });
     }
     return /* @__PURE__ */ jsxRuntime.jsxs(FlyoutContainer, { children: [
@@ -14252,12 +15026,12 @@ var __publicField = (obj, key, value) => {
         ] }),
         showClose && /* @__PURE__ */ jsxRuntime.jsx($5d3850c4d0b4e6c7$export$fba2fb7cd781b7ac, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(CrossButton, { "data-testid": "flyout-header-close-btn", children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", size: type === "inline" ? "md" : "lg" }) }) })
       ] }),
-      showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { "data-testid": "flyout-header-separator", size: "lg" })
+      showSeparator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { "data-testid": "flyout-header-separator", size: "lg" })
     ] });
   };
   Header$1.displayName = "Flyout.Header";
   Flyout.Header = Header$1;
-  const FlyoutBody = styledComponents.styled(Container).withConfig({
+  const FlyoutBody = styled.styled(Container).withConfig({
     componentId: "sc-1vtv6sf-6"
   })(["width:var(--flyout-width);max-width:100%;margin-top:", ";"], ({
     $align = "default"
@@ -14268,7 +15042,7 @@ var __publicField = (obj, key, value) => {
   }) => /* @__PURE__ */ jsxRuntime.jsx(FlyoutBody, { overflow: "auto", orientation: "vertical", grow: "1", $align: align, ...props });
   Body.displayName = "Flyout.Body";
   Flyout.Body = Body;
-  const FlyoutFooter = styledComponents.styled(Container).withConfig({
+  const FlyoutFooter = styled.styled(Container).withConfig({
     componentId: "sc-1vtv6sf-7"
   })(["", ""], ({
     theme: theme2,
@@ -14286,18 +15060,18 @@ var __publicField = (obj, key, value) => {
   };
   FlyoutClose.displayName = "Flyout.Close";
   Flyout.Close = FlyoutClose;
-  const FooterContainer = styledComponents.styled(Container).withConfig({
+  const FooterContainer = styled.styled(Container).withConfig({
     componentId: "sc-1vtv6sf-8"
   })(["width:var(--flyout-width);max-width:100%;"]);
   const Footer = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(FooterContainer, { gap: "none", orientation: "vertical", alignItems: "end", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { size: "xs" }),
+      /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "xs" }),
       /* @__PURE__ */ jsxRuntime.jsx(FlyoutFooter, { justifyContent: "end", gap: "none", padding: "none", isResponsive: false, wrap: "wrap", ...props })
     ] });
   };
   Footer.displayName = "Flyout.Footer";
   Flyout.Footer = Footer;
-  const CustomCodeBlock = styledComponents.styled(CodeBlock).withConfig({
+  const CustomCodeBlock = styled.styled(CodeBlock).withConfig({
     componentId: "sc-1vtv6sf-9"
   })(["display:flex;height:100%;pre{flex:1;overflow-wrap:break-word;code{display:inline-block;max-width:calc(100% - 1rem);}}"]);
   const FlyoutCodeBlock = ({
@@ -14359,9 +15133,9 @@ var __publicField = (obj, key, value) => {
     overflow,
     ...props
   }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$4, { $alignItems: alignItems, $alignContent: alignContent, $columnGap: columnGap, $gap: gap, $gridAutoColumns: gridAutoColumns, $gridAutoFlow: gridAutoFlow, $gridAutoRows: gridAutoRows, $gridTemplateAreas: gridTemplateAreas, $gridTemplateColumns: gridTemplateColumns, $gridTemplateRows: gridTemplateRows, $gridTemplate: gridTemplate, $inline: inline, $isResponsive: isResponsive, $justifyContent: justifyContent, $justifyItems: justifyItems, $rowGap: rowGap, $height: height, $maxHeight: maxHeight, $minHeight: minHeight, $fillWidth: fillWidth, $maxWidth: maxWidth, $minWidth: minWidth, $overflow: overflow, "data-testid": "grid-container", ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$3, { $alignItems: alignItems, $alignContent: alignContent, $columnGap: columnGap, $gap: gap, $gridAutoColumns: gridAutoColumns, $gridAutoFlow: gridAutoFlow, $gridAutoRows: gridAutoRows, $gridTemplateAreas: gridTemplateAreas, $gridTemplateColumns: gridTemplateColumns, $gridTemplateRows: gridTemplateRows, $gridTemplate: gridTemplate, $inline: inline, $isResponsive: isResponsive, $justifyContent: justifyContent, $justifyItems: justifyItems, $rowGap: rowGap, $height: height, $maxHeight: maxHeight, $minHeight: minHeight, $fillWidth: fillWidth, $maxWidth: maxWidth, $minWidth: minWidth, $overflow: overflow, "data-testid": "grid-container", ...props, children });
   };
-  const Wrapper$4 = styledComponents.styled.div.withConfig({
+  const Wrapper$3 = styled.styled.div.withConfig({
     componentId: "sc-r57kdn-0"
   })(["align-items:", ";align-content:", ";display:", ";", ";", ";", ";", ";", ";", ";", ";justify-content:", ";justify-items:", ";", " ", " ", " ", " @media (max-width:", "){grid-template-columns:", ";}"], ({
     $alignItems = "stretch"
@@ -14423,7 +15197,7 @@ var __publicField = (obj, key, value) => {
   }) => $isResponsive === true ? "1fr" : ({
     $gridTemplateColumns
   }) => $gridTemplateColumns || "auto");
-  const InlineContainer = styledComponents.styled.span.withConfig({
+  const InlineContainer = styled.styled.span.withConfig({
     componentId: "sc-ugg5k0-0"
   })(["", ""], ({
     theme: theme2
@@ -14664,7 +15438,7 @@ var __publicField = (obj, key, value) => {
   };
   ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
   ContextMenu.SubTrigger = ContextMenuSubTrigger;
-  const RightMenuContent = styledComponents.styled(GenericMenuPanel).withConfig({
+  const RightMenuContent = styled.styled(GenericMenuPanel).withConfig({
     componentId: "sc-8z6kye-0"
   })(["flex-direction:column;z-index:1;", ";"], ({
     $showArrow
@@ -14703,7 +15477,7 @@ var __publicField = (obj, key, value) => {
   };
   ContextMenuContent.displayName = "ContextMenuContent";
   ContextMenu.Content = ContextMenuContent;
-  const RightMenuGroup = styledComponents.styled($1b0217ee4a91d156$export$eb2fcfdbd7ba97d4).withConfig({
+  const RightMenuGroup = styled.styled($1b0217ee4a91d156$export$eb2fcfdbd7ba97d4).withConfig({
     componentId: "sc-8z6kye-1"
   })(["width:100%;border-bottom:1px solid ", ";"], ({
     theme: theme2
@@ -14713,7 +15487,7 @@ var __publicField = (obj, key, value) => {
   };
   ContextMenuGroup.displayName = "ContextMenuGroup";
   ContextMenu.Group = ContextMenuGroup;
-  const RightMenuSub = styledComponents.styled($1b0217ee4a91d156$export$d7a01e11500dfb6f).withConfig({
+  const RightMenuSub = styled.styled($1b0217ee4a91d156$export$d7a01e11500dfb6f).withConfig({
     componentId: "sc-8z6kye-2"
   })(["border-bottom:1px solid ", ";"], ({
     theme: theme2
@@ -15821,7 +16595,7 @@ var __publicField = (obj, key, value) => {
       }, !bailoutOnChildren && children(childParams));
     }
   }
-  const StyledCell = styledComponents.styled.div.withConfig({
+  const StyledCell = styled.styled.div.withConfig({
     componentId: "sc-30izhw-0"
   })(['display:block;text-align:left;&[data-align="right"]{text-align:right;}overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;width:100%;box-sizing:border-box;', " ", ";"], ({
     theme: theme2,
@@ -15876,7 +16650,7 @@ var __publicField = (obj, key, value) => {
             ${$selectionType === "selectDirect" && $isLastColumn ? `border-right: 1px solid ${theme2.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
           }
         ` : "");
-  const RowNumberColumnContainer = styledComponents.styled.div.withConfig({
+  const RowNumberColumnContainer = styled.styled.div.withConfig({
     componentId: "sc-7gbi4d-0"
   })(["position:sticky;left:0;", " ", ""], ({
     $height,
@@ -15889,7 +16663,7 @@ var __publicField = (obj, key, value) => {
     $scrolledHorizontal,
     theme: theme2
   }) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme2.click.grid.header.cell.color.stroke.default};` : "");
-  const RowNumberCell = styledComponents.styled.div.withConfig({
+  const RowNumberCell = styled.styled.div.withConfig({
     componentId: "sc-7gbi4d-1"
   })(["position:absolute;left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;", ""], ({
     $height,
@@ -16148,7 +16922,7 @@ var __publicField = (obj, key, value) => {
   }
   var throttle_1 = throttle$1;
   const throttle$2 = /* @__PURE__ */ getDefaultExportFromCjs(throttle_1);
-  const ResizeSpan = styledComponents.styled.div.withConfig({
+  const ResizeSpan = styled.styled.div.withConfig({
     componentId: "sc-1r6e5v3-0"
   })(["top:0;left:calc(100% - 4px);z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], ({
     $height
@@ -16226,7 +17000,7 @@ var __publicField = (obj, key, value) => {
       }
     }, onMouseMove, onMouseDown, onClick: (e) => e.stopPropagation(), onMouseUp, "data-resize": true });
   };
-  const HeaderContainer = styledComponents.styled.div.withConfig({
+  const HeaderContainer = styled.styled.div.withConfig({
     componentId: "sc-1oadqc8-0"
   })(["position:sticky;top:0;left:0;display:flex;flex-direction:row;height:", "px;", ""], ({
     $height
@@ -16234,12 +17008,12 @@ var __publicField = (obj, key, value) => {
     $scrolledVertical,
     theme: theme2
   }) => $scrolledVertical ? `box-shadow: 0px 0 0px 1px ${theme2.click.grid.header.cell.color.stroke.default};` : "");
-  const ScrollableHeaderContainer = styledComponents.styled.div.withConfig({
+  const ScrollableHeaderContainer = styled.styled.div.withConfig({
     componentId: "sc-1oadqc8-1"
   })(["position:relative;left:", "px;"], ({
     $left
   }) => $left);
-  const HeaderCellContainer = styledComponents.styled.div.withConfig({
+  const HeaderCellContainer = styled.styled.div.withConfig({
     componentId: "sc-1oadqc8-2"
   })(["position:absolute;display:flex;width:", ";height:", "px;left:", "px;&:hover [data-resize]{background:", ";}"], ({
     $width
@@ -16250,7 +17024,7 @@ var __publicField = (obj, key, value) => {
   }) => $columnPosition, ({
     theme: theme2
   }) => theme2.click.grid.header.cell.color.stroke.selectDirect);
-  const RowColumnContainer = styledComponents.styled(HeaderCellContainer).withConfig({
+  const RowColumnContainer = styled.styled(HeaderCellContainer).withConfig({
     componentId: "sc-1oadqc8-3"
   })(["position:sticky;top:0;left:0;width:", ";text-align:right;", ""], ({
     $width
@@ -16258,7 +17032,7 @@ var __publicField = (obj, key, value) => {
     $scrolledHorizontal,
     theme: theme2
   }) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme2.click.grid.header.cell.color.stroke.default};` : "");
-  const RowColumn = styledComponents.styled(StyledCell).withConfig({
+  const RowColumn = styled.styled(StyledCell).withConfig({
     componentId: "sc-1oadqc8-4"
   })(["width:100%;text-align:right;"]);
   const Column = ({
@@ -30836,7 +31610,7 @@ var __publicField = (obj, key, value) => {
   const NO_BUTTONS_PRESSED = 0;
   const LEFT_BUTTON_PRESSED = 1;
   const RIGHT_BUTTON_PRESSED = 2;
-  const GridContainer = styledComponents.styled.div.withConfig({
+  const GridContainer = styled.styled.div.withConfig({
     componentId: "sc-175eneg-0"
   })(["display:flex;flex-direction:column-reverse;user-select:none;overflow-anchor:none;"]);
   const getRenderedCursor = (children) => children.reduce(([minRow, maxRow, minColumn, maxColumn], {
@@ -30859,7 +31633,7 @@ var __publicField = (obj, key, value) => {
     }
     return [minRow, maxRow, minColumn, maxColumn];
   }, [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY]);
-  const GridDataContainer = styledComponents.styled.div.withConfig({
+  const GridDataContainer = styled.styled.div.withConfig({
     componentId: "sc-175eneg-1"
   })(["position:absolute;top:0;left:0;", ""], ({
     $top,
@@ -30868,7 +31642,7 @@ var __publicField = (obj, key, value) => {
     margin-top: ${$top}px;
     margin-left: ${$left}px;
   `);
-  const ContextMenuTrigger = styledComponents.styled.div.withConfig({
+  const ContextMenuTrigger = styled.styled.div.withConfig({
     componentId: "sc-175eneg-2"
   })(["outline:none;overflow:hidden;height:", ";width:100%;background:", ";border-radius:", ";", ";"], ({
     $height
@@ -31615,7 +32389,7 @@ var __publicField = (obj, key, value) => {
   }) => {
     return /* @__PURE__ */ jsxRuntime.jsx($cef8881cdc69808e$export$be92b6f5f03c0fe9, { ...props, children });
   };
-  const Trigger$2 = styledComponents.styled($cef8881cdc69808e$export$41fb9f06171c75f4).withConfig({
+  const Trigger$2 = styled.styled($cef8881cdc69808e$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-1ect7b6-0"
   })(["width:fit-content;"]);
   const HoverCardTrigger = ({
@@ -31640,7 +32414,7 @@ var __publicField = (obj, key, value) => {
   };
   HoverCardContent.displayName = "HoverCardContent";
   HoverCard.Content = HoverCardContent;
-  const CuiLink = styledComponents.styled.a.withConfig({
+  const CuiLink = styled.styled.a.withConfig({
     componentId: "sc-1bwz77u-0"
   })(["font:", ";color:", ";margin:0;text-decoration:none;display:inline-flex;gap:", ";margin-right:", ";align-items:center;&:hover,&:focus{color:", ";transition:", ";text-decoration:underline;cursor:pointer;}&:visited{color:", ";}"], ({
     $size,
@@ -31661,7 +32435,7 @@ var __publicField = (obj, key, value) => {
   }) => theme2.transition.default, ({
     theme: theme2
   }) => theme2.click.global.color.text.link.default);
-  const IconWrapper$1 = styledComponents.styled.span.withConfig({
+  const IconWrapper$1 = styled.styled.span.withConfig({
     componentId: "sc-1bwz77u-1"
   })([".external-icon{height:", ";width:", ";}"], ({
     $size,
@@ -31683,188 +32457,6 @@ var __publicField = (obj, key, value) => {
     icon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$1, { $size: size2, children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, className: "external-icon", "data-testid": icon }) })
   ] });
   const Link = React.forwardRef(_Link);
-  const Wrapper$3 = styledComponents.styled.div.withConfig({
-    componentId: "sc-1pvd2nj-0"
-  })(["width:inherit;display:flex;align-items:center;justify-content:space-between;align-items:center;span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", ""], ({
-    theme: theme2,
-    $error,
-    $resize
-  }) => `
-    gap: ${theme2.click.field.space.gap};
-    border-radius: ${theme2.click.field.radii.all};
-    font: ${theme2.click.field.typography.fieldText.default};
-    color: ${theme2.click.field.color.text.default};
-    border: 1px solid ${theme2.click.field.color.stroke.default};
-    background: ${theme2.click.field.color.background.default};
-
-    *:autofill,
-    *:-webkit-autofill  {
-      -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.default} inset;
-      -webkit-text-fill-color: ${theme2.click.field.color.text.default};
-      caret-color: ${theme2.click.field.color.text.default};
-    }
-
-    &:hover {
-      border: 1px solid ${theme2.click.field.color.stroke.hover};
-      background: ${theme2.click.field.color.background.hover};
-      color: ${theme2.click.field.color.text.hover};
-
-      *:autofill,
-      *:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.hover} inset;
-        -webkit-text-fill-color: ${theme2.click.field.color.text.hover};
-        caret-color: ${theme2.click.field.color.text.hover};
-      }
-    }
-    ${$resize === "none" ? "" : `
-      resize: ${$resize};
-      overflow: auto;
-    `}
-    padding: 0 ${theme2.click.field.space.x};
-    ${$error ? `
-      font: ${theme2.click.field.typography.fieldText.error};
-      border: 1px solid ${theme2.click.field.color.stroke.error};
-      background: ${theme2.click.field.color.background.active};
-      color: ${theme2.click.field.color.text.error};
-
-      *:autofill,
-      *:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
-        -webkit-text-fill-color: ${theme2.click.field.color.text.error};
-        caret-color: ${theme2.click.field.color.text.error};
-      }
-
-      &:hover {
-        border: 1px solid ${theme2.click.field.color.stroke.error};
-        color: ${theme2.click.field.color.text.error};
-        *:autofill,
-        *:-webkit-autofill {
-          -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.error} inset;
-          -webkit-text-fill-color: ${theme2.click.field.color.text.error};
-          caret-color: ${theme2.click.field.color.text.error};
-        }
-      }
-    ` : `
-    &:focus-within,
-    &[data-state="open"] {
-      font: ${theme2.click.field.typography.fieldText.active};
-      border: 1px solid ${theme2.click.field.color.stroke.active};
-      background: ${theme2.click.field.color.background.active};
-      color: ${theme2.click.field.color.text.active};
-
-      *:autofill,
-      *:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.active} inset;
-        -webkit-text-fill-color: ${theme2.click.field.color.text.active};
-        caret-color: ${theme2.click.field.color.text.active};
-      }
-    }
-    `};
-    &:disabled, &.disabled {
-      font: ${theme2.click.field.typography.fieldText.disabled};
-      border: 1px solid ${theme2.click.field.color.stroke.disabled};
-      background: ${theme2.click.field.color.background.disabled};
-      color: ${theme2.click.field.color.text.disabled};
-
-      *:autofill,
-      *:-webkit-autofill {
-        -webkit-box-shadow: 0 0 0px 50vh ${theme2.click.field.color.background.disabled} inset;
-        -webkit-text-fill-color: ${theme2.click.field.color.text.disabled};
-        caret-color: ${theme2.click.field.color.text.disabled};
-      }
-    }
-  `);
-  const StyledLabel = styledComponents.styled(Label$1).withConfig({
-    componentId: "sc-1pvd2nj-1"
-  })(["", ""], ({
-    $labelColor
-  }) => `
-    ${$labelColor ? `color: ${$labelColor};` : ""}
-  `);
-  const InputWrapper = ({
-    id,
-    label = "",
-    labelColor,
-    error: error2,
-    disabled,
-    children,
-    orientation,
-    dir,
-    resize = "none"
-  }) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot, { $orientation: orientation, $dir: dir, $addLabelPadding: true, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(FormElementContainer, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Wrapper$3, { $error: !!error2, $resize: resize, "data-resize": resize, className: disabled ? "disabled" : "", children }),
-        !!error2 && error2 !== true && /* @__PURE__ */ jsxRuntime.jsx(Error$1, { children: error2 })
-      ] }),
-      label && /* @__PURE__ */ jsxRuntime.jsx(StyledLabel, { htmlFor: id, disabled, error: !!error2, $labelColor: labelColor, children: label })
-    ] });
-  };
-  const InputElement = styledComponents.styled.input.withConfig({
-    componentId: "sc-1pvd2nj-2"
-  })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;", ""], ({
-    theme: theme2
-  }) => `
-    padding: ${theme2.click.field.space.y} 0;
-    &::placeholder {
-      color: ${theme2.click.field.color.placeholder.default};
-    }
-
-    &:disabled, &.disabled {
-      &::placeholder {
-      color: ${theme2.click.field.color.placeholder.disabled};
-    }
-  `);
-  const NumberInputElement = styledComponents.styled(InputElement).withConfig({
-    componentId: "sc-1pvd2nj-3"
-  })(["", ""], ({
-    $hideControls
-  }) => `
-    ${$hideControls ? `
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    -moz-appearance: textfield;
-    ` : ""}
-  `);
-  const TextAreaElement = styledComponents.styled.textarea.withConfig({
-    componentId: "sc-1pvd2nj-4"
-  })(["background:transparent;border:none;outline:none;width:100%;color:inherit;font:inherit;resize:none;", ""], ({
-    theme: theme2
-  }) => `
-    padding: ${theme2.click.field.space.y} 0;
-    align-self: stretch;
-    &::placeholder {
-      color: ${theme2.click.field.color.placeholder.default};
-    }
-  `);
-  styledComponents.styled(InputWrapper).withConfig({
-    componentId: "sc-1pvd2nj-5"
-  })(["resize:vertical;overflow:auto;color:red;"]);
-  const IconButton = styledComponents.styled.button.withConfig({
-    componentId: "sc-1pvd2nj-6"
-  })(["background:transparent;color:inherit;border:none;padding:0;outline:none;&:not(:disabled){cursor:pointer;}", ""], ({
-    theme: theme2,
-    $show
-  }) => `
-      padding: ${theme2.click.field.space.y} 0;
-      visibility: ${$show ? "visible" : "hidden"};
-  `);
-  styledComponents.styled.svg.withConfig({
-    componentId: "sc-1pvd2nj-7"
-  })(["", ""], ({
-    theme: theme2
-  }) => `
-    &:first-of-type {
-      padding-left: ${theme2.click.field.space.gap};
-    }
-    &:last-of-type {
-      padding-right: ${theme2.click.field.space.x};
-    }
-  `);
   const NumberField = React.forwardRef(({
     disabled,
     label,
@@ -31916,7 +32508,7 @@ var __publicField = (obj, key, value) => {
   }) => {
     return /* @__PURE__ */ jsxRuntime.jsx($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9, { ...props, children });
   };
-  const Trigger$1 = styledComponents.styled($cb5cc270b50c6fcd$export$41fb9f06171c75f4).withConfig({
+  const Trigger$1 = styled.styled($cb5cc270b50c6fcd$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-1dii14g-0"
   })(["width:fit-content;font:inherit;color:inherit;background:inherit;border:none;"]);
   const PopoverTrigger = ({
@@ -31931,7 +32523,7 @@ var __publicField = (obj, key, value) => {
   };
   PopoverTrigger.displayName = "PopoverTrigger";
   Popover.Trigger = PopoverTrigger;
-  const MenuPanel = styledComponents.styled(GenericMenuPanel).withConfig({
+  const MenuPanel = styled.styled(GenericMenuPanel).withConfig({
     componentId: "sc-1dii14g-1"
   })(["display:block;padding:", " ", ";background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";", ";"], ({
     theme: theme2
@@ -31948,7 +32540,7 @@ var __publicField = (obj, key, value) => {
   }) => theme2.click.popover.shadow.default, ({
     $showClose
   }) => $showClose ? "padding-top: 1rem;" : "");
-  const CloseButton = styledComponents.styled(EmptyButton$1).withConfig({
+  const CloseButton = styled.styled(EmptyButton$1).withConfig({
     componentId: "sc-1dii14g-2"
   })(["position:absolute;top:", ";right:", ";width:", ";height:", ";"], ({
     theme: theme2
@@ -31975,7 +32567,7 @@ var __publicField = (obj, key, value) => {
   };
   PopoverContent.displayName = "PopoverContent";
   Popover.Content = PopoverContent;
-  const CustomSelect = styledComponents.styled.div.withConfig({
+  const CustomSelect = styled.styled.div.withConfig({
     componentId: "sc-dicnqe-0"
   })(["width:150px;"]);
   const Pagination = ({
@@ -32089,7 +32681,7 @@ var __publicField = (obj, key, value) => {
     alignItems = "center",
     ...props
   }) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper$2, { $hasBorder: hasBorder, $hasShadow: hasShadow, $color: color, $padding: padding, $gap: gap, $width: width, $radii: radii, $orientation: orientation, $fillWidth: fillWidth, $height: height, $fillHeight: fillHeight, $alignItems: alignItems, ...props, children });
-  const Wrapper$2 = styledComponents.styled.div.withConfig({
+  const Wrapper$2 = styled.styled.div.withConfig({
     componentId: "sc-1q78udp-0"
   })(["display:flex;flex-flow:", ";align-items:", ";width:", ";height:", ";background-color:", ";border-radius:", ";padding:", ";border:", ";box-shadow:", ";gap:", ";"], ({
     $orientation = "horizontal"
@@ -32120,7 +32712,7 @@ var __publicField = (obj, key, value) => {
     $gap = "sm",
     theme: theme2
   }) => theme2.click.panel.space.gap[$gap]);
-  const ProgressContainer = styledComponents.styled.div.withConfig({
+  const ProgressContainer = styled.styled.div.withConfig({
     componentId: "sc-16gr3cg-0"
   })(["display:flex;justify-content:space-between;align-items:center;overflow:hidden;transition:all 100ms ease-in-out;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;min-height:2px;", ";"], ({
     theme: theme2,
@@ -32151,10 +32743,10 @@ var __publicField = (obj, key, value) => {
       background-position: center;
     }
   `);
-  const ProgressText = styledComponents.styled.span.withConfig({
+  const ProgressText = styled.styled.span.withConfig({
     componentId: "sc-16gr3cg-1"
   })(["width:100%;font:inherit;mix-blend-mode:difference;"]);
-  const ProgressCloseButton = styledComponents.styled.button.withConfig({
+  const ProgressCloseButton = styled.styled.button.withConfig({
     componentId: "sc-16gr3cg-2"
   })(["mix-blend-mode:difference;border:0;visibility:", ";"], ({
     $dismissable
@@ -32380,7 +32972,7 @@ var __publicField = (obj, key, value) => {
   const $f99a8c78507165f7$export$be92b6f5f03c0fe9 = $f99a8c78507165f7$export$a98f0dcb43a68a25;
   const $f99a8c78507165f7$export$6d08773d2e66f8f2 = $f99a8c78507165f7$export$9f866c100ef519e4;
   const $f99a8c78507165f7$export$adb584737d712b70 = $f99a8c78507165f7$export$5fb54c671a65c88;
-  const RadioGroupRoot = styledComponents.styled($f99a8c78507165f7$export$be92b6f5f03c0fe9).withConfig({
+  const RadioGroupRoot = styled.styled($f99a8c78507165f7$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-p6cydr-0"
   })(["display:flex;flex-wrap:wrap;gap:", ";flex-direction:", ";label{", "}"], ({
     theme: theme2
@@ -32426,14 +33018,14 @@ var __publicField = (obj, key, value) => {
   };
   RadioGroupItem.displayName = "RadioGroupItem";
   RadioGroup.Item = RadioGroupItem;
-  const Wrapper$1 = styledComponents.styled(FormRoot).withConfig({
+  const Wrapper$1 = styled.styled(FormRoot).withConfig({
     componentId: "sc-p6cydr-1"
   })(["padding:", ";display:flex;align-items:center;gap:", ";width:auto;"], ({
     theme: theme2
   }) => theme2.click.checkbox.space.all, ({
     theme: theme2
   }) => theme2.click.checkbox.space.gap);
-  const RadioInput = styledComponents.styled($f99a8c78507165f7$export$6d08773d2e66f8f2).withConfig({
+  const RadioInput = styled.styled($f99a8c78507165f7$export$6d08773d2e66f8f2).withConfig({
     componentId: "sc-p6cydr-2"
   })(["display:flex;align-items:center;justify-content:center;outline:none;cursor:pointer;", ";"], ({
     theme: theme2
@@ -32456,7 +33048,7 @@ var __publicField = (obj, key, value) => {
       border-color: ${theme2.click.radio.color.stroke.disabled};
     }
   `);
-  const RadioGroupIndicator = styledComponents.styled($f99a8c78507165f7$export$adb584737d712b70).withConfig({
+  const RadioGroupIndicator = styled.styled($f99a8c78507165f7$export$adb584737d712b70).withConfig({
     componentId: "sc-p6cydr-3"
   })(["", ""], ({
     theme: theme2
@@ -32518,13 +33110,13 @@ var __publicField = (obj, key, value) => {
       loading && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "loading-animated", size: "sm" })
     ] });
   });
-  const SelectPopoverRoot = styledComponents.styled($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9).withConfig({
+  const SelectPopoverRoot = styled.styled($cb5cc270b50c6fcd$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-oudbwg-0"
   })(["width:100%;"]);
-  const SelectValue = styledComponents.styled.div.withConfig({
+  const SelectValue = styled.styled.div.withConfig({
     componentId: "sc-oudbwg-1"
   })(["text-align:left;flex:1;gap:inherit;color:inherit;font:inherit;overflow:hidden;"]);
-  const StyledSelectTrigger = styledComponents.styled($cb5cc270b50c6fcd$export$41fb9f06171c75f4).withConfig({
+  const StyledSelectTrigger = styled.styled($cb5cc270b50c6fcd$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-oudbwg-2"
   })(["width:100%;display:flex;align-items:center;justify-content:space-between;align-items:center;cursor:pointer;span:first-of-type{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}", " [data-hide-in-trigger]{display:none;}"], ({
     theme: theme2,
@@ -32572,7 +33164,7 @@ var __publicField = (obj, key, value) => {
       cursor: not-allowed;
     }
   `);
-  const SelectPopoverContent = styledComponents.styled($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2).withConfig({
+  const SelectPopoverContent = styled.styled($cb5cc270b50c6fcd$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-oudbwg-3"
   })(["width:var(--radix-popover-trigger-width);max-height:var(--radix-popover-content-available-height);border-radius:0.25rem;pointer-events:auto;", " ", " overflow:hidden;display:flex;padding:0.5rem 0rem;align-items:flex-start;gap:0.625rem;"], ({
     $useFullWidthItems,
@@ -32592,7 +33184,7 @@ var __publicField = (obj, key, value) => {
       0px 1px 2px 0px rgba(16, 24, 40, 0.06);
     border-radius: 0.25rem;
   `);
-  const SearchBarContainer = styledComponents.styled.div.withConfig({
+  const SearchBarContainer = styled.styled.div.withConfig({
     componentId: "sc-oudbwg-4"
   })(["width:auto;position:relative;display:flex;justify-content:flex-start;align-items:center;", ""], ({
     theme: theme2,
@@ -32603,7 +33195,7 @@ var __publicField = (obj, key, value) => {
     font: ${theme2.click.genericMenu.autocomplete.typography.search.term.default};
     height: ${$showSearch ? "auto" : " 0"};
   `);
-  const SearchBar = styledComponents.styled.input.withConfig({
+  const SearchBar = styled.styled.input.withConfig({
     componentId: "sc-oudbwg-5"
   })(["background:transparent;border:none;width:100%;outline:none;", ""], ({
     theme: theme2,
@@ -32622,7 +33214,7 @@ var __publicField = (obj, key, value) => {
       font: ${theme2.click.genericMenu.autocomplete.typography.search.placeholder.default};
     }
   `);
-  const SearchClose = styledComponents.styled.button.withConfig({
+  const SearchClose = styled.styled.button.withConfig({
     componentId: "sc-oudbwg-6"
   })(["position:absolute;", " visibility:", ";"], ({
     theme: theme2
@@ -32632,16 +33224,16 @@ var __publicField = (obj, key, value) => {
   `, ({
     $showClose
   }) => $showClose ? "visible" : "hidden");
-  const SelectList = styledComponents.styled.div.withConfig({
+  const SelectList = styled.styled.div.withConfig({
     componentId: "sc-oudbwg-7"
   })(["display:flex;flex-direction:column;width:inherit;max-height:calc(var(--radix-popover-content-available-height) - 1rem);"]);
-  const SelectListContent = styledComponents.styled.div.withConfig({
+  const SelectListContent = styled.styled.div.withConfig({
     componentId: "sc-oudbwg-8"
   })(["width:inherit;overflow:auto;flex:1;"]);
-  const HiddenSelectElement = styledComponents.styled.select.withConfig({
+  const HiddenSelectElement = styled.styled.select.withConfig({
     componentId: "sc-oudbwg-9"
   })(["visibility:hidden;position:absolute;z-index:-1;height:0;"]);
-  const SelectGroupContainer = styledComponents.styled.div.withConfig({
+  const SelectGroupContainer = styled.styled.div.withConfig({
     componentId: "sc-oudbwg-10"
   })(["display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:-webkit-fill-available;width:fill-available;width:stretch;overflow:hidden;background:transparent;&[aria-selected]{outline:none;}", ";&[hidden]{display:none;}"], ({
     theme: theme2
@@ -32649,7 +33241,7 @@ var __publicField = (obj, key, value) => {
     font: ${theme2.click.genericMenu.item.typography.sectionHeader.default};
     color: ${theme2.click.genericMenu.item.color.text.muted};
   `);
-  const SelectGroupName = styledComponents.styled.div.withConfig({
+  const SelectGroupName = styled.styled.div.withConfig({
     componentId: "sc-oudbwg-11"
   })(["display:flex;width:100%;flex-direction:column;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;", ""], ({
     theme: theme2
@@ -32660,10 +33252,10 @@ var __publicField = (obj, key, value) => {
      gap: ${theme2.click.genericMenu.item.space.gap};
      border-bottom: 1px solid ${theme2.click.genericMenu.item.color.stroke.default};
    `);
-  const SelectGroupContent = styledComponents.styled.div.withConfig({
+  const SelectGroupContent = styled.styled.div.withConfig({
     componentId: "sc-oudbwg-12"
   })(["width:inherit;"]);
-  const SelectNoDataContainer = styledComponents.styled.div.withConfig({
+  const SelectNoDataContainer = styled.styled.div.withConfig({
     componentId: "sc-oudbwg-13"
   })(['border:none;display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;&[hidden="true"]{display:none;}', ""], ({
     theme: theme2,
@@ -35972,10 +36564,10 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     $parcel$exportWildcard(module2.exports, $faefaad95e5fcca0$exports);
   })(dist);
   var distExports = dist.exports;
-  const BadgeList = styledComponents.styled.div.withConfig({
+  const BadgeList = styled.styled.div.withConfig({
     componentId: "sc-1ryyiol-0"
   })(["display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:inherit;font:inherit;color:inherit;"]);
-  const MultiSelectBadge = styledComponents.styled.div.withConfig({
+  const MultiSelectBadge = styled.styled.div.withConfig({
     componentId: "sc-1ryyiol-1"
   })(["width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;max-width:fit-content;"]);
   const MultiSelectValue = ({
@@ -36035,7 +36627,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectBadge, { as: Badge, size: "sm", state: disabled ? "disabled" : "default", ...otherProps }, `multi-select-${id}-${value}`);
     }) });
   };
-  const SelectValueContainer = styledComponents.styled.div.withConfig({
+  const SelectValueContainer = styled.styled.div.withConfig({
     componentId: "sc-1bceuv1-0"
   })(["display:flex;width:100%;align-items:center;cursor:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:inherit;"]);
   const SingleSelectValue = ({
@@ -36355,7 +36947,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     ] });
   });
   SelectGroup.displayName = "Select.Group";
-  const CheckIcon$1 = styledComponents.styled.svg.withConfig({
+  const CheckIcon$1 = styled.styled.svg.withConfig({
     componentId: "sc-howzwz-0"
   })(["opacity:", ";"], ({
     $showCheck
@@ -36404,7 +36996,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
         /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, children: label ?? children }),
         /* @__PURE__ */ jsxRuntime.jsx(CheckIcon$1, { as: SvgImage, name: "check", size: "sm", $showCheck: isChecked })
       ] }),
-      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { size: "sm" })
+      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "sm" })
     ] });
   });
   SelectItem.displayName = "Select.Item";
@@ -36468,7 +37060,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
         icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange }) }),
         !icon && /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange })
       ] }),
-      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator$1, { size: "sm" })
+      separator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "sm" })
     ] });
   });
   MultiSelectCheckboxItem.displayName = "Select.Item";
@@ -36651,7 +37243,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     return $89eedd556c436f6a$var$ORIENTATIONS.includes(orientation);
   }
   const $89eedd556c436f6a$export$be92b6f5f03c0fe9 = $89eedd556c436f6a$export$1ff3c3f08ae963c0;
-  const CUISeparator = styledComponents.styled($89eedd556c436f6a$export$be92b6f5f03c0fe9).withConfig({
+  const CUISeparator = styled.styled($89eedd556c436f6a$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-ladr1y-0"
   })(["", ""], ({
     theme: theme2,
@@ -36672,13 +37264,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     orientation = "horizontal",
     ...props
   }) => /* @__PURE__ */ jsxRuntime.jsx(CUISeparator, { orientation, ...props });
-  const Separator$1 = Separator;
-  const LabelContainer = styledComponents.styled.span.withConfig({
+  const LabelContainer = styled.styled.span.withConfig({
     componentId: "sc-1cu1l45-0"
   })(["display:flex;align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;flex:1;gap:", ";overflow:hidden;"], ({
     theme: theme2
   }) => theme2.click.sidebar.navigation.item.default.space.gap);
-  const EllipsisContainer = styledComponents.styled.span.withConfig({
+  const EllipsisContainer = styled.styled.span.withConfig({
     componentId: "sc-1cu1l45-1"
   })(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-start;gap:inherit;flex:1;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
   const IconWrapper = ({
@@ -36704,7 +37295,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(SidebarItemWrapper, { $level: level, "data-selected": selected, $type: type, ref, "aria-disabled": disabled, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { icon, iconDir, children: label }) });
   });
-  const SidebarItemWrapper = styledComponents.styled.div.withConfig({
+  const SidebarItemWrapper = styled.styled.div.withConfig({
     componentId: "sc-1rz759l-0"
   })(["display:flex;align-items:center;border:none;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;white-space:nowrap;overflow:hidden;flex-wrap:nowrap;", ""], ({
     theme: theme2,
@@ -36776,7 +37367,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     open: false,
     onOpenChange: () => null
   });
-  const CollapsibleContainer = styledComponents.styled.div.withConfig({
+  const CollapsibleContainer = styled.styled.div.withConfig({
     componentId: "sc-guwmyz-0"
   })(['width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open="true"]{transform:rotate(90deg);}}[data-collapsible-header]:hover [data-trigger-icon]{visibility:visible;}']);
   const Collapsible = ({
@@ -36803,7 +37394,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     };
     return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContainer, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(NavContext.Provider, { value, children }) });
   };
-  const CollapsipleHeaderContainer = styledComponents.styled.div.withConfig({
+  const CollapsipleHeaderContainer = styled.styled.div.withConfig({
     componentId: "sc-guwmyz-1"
   })(["margin-left:", ";user-select:none;"], ({
     theme: theme2,
@@ -36836,7 +37427,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   });
   CollapsipleHeader.displayName = "CollapsibleHeader";
   Collapsible.Header = CollapsipleHeader;
-  const CollapsipleTriggerButton = styledComponents.styled(EmptyButton$1).withConfig({
+  const CollapsipleTriggerButton = styled.styled(EmptyButton$1).withConfig({
     componentId: "sc-guwmyz-2"
   })(["display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;"]);
   const CollapsipleTrigger = ({
@@ -36867,7 +37458,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   };
   CollapsipleTrigger.displayName = "CollapsibleTrigger";
   Collapsible.Trigger = CollapsipleTrigger;
-  const CollapsibleContentWrapper = styledComponents.styled.div.withConfig({
+  const CollapsibleContentWrapper = styled.styled.div.withConfig({
     componentId: "sc-guwmyz-3"
   })(["", ""], ({
     theme: theme2,
@@ -36918,7 +37509,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }) => {
     return /* @__PURE__ */ jsxRuntime.jsx(SidebarTitleWrapper, { "data-selected": selected, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { icon, iconDir, children: label }) });
   };
-  const SidebarTitleWrapper = styledComponents.styled.button.withConfig({
+  const SidebarTitleWrapper = styled.styled.button.withConfig({
     componentId: "sc-1rg1a4o-0"
   })(["display:inline-flex;align-items:center;background:transparent;border:none;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;white-space:nowrap;overflow:hidden;cursor:pointer;", " a{color:inherit;text-decoration:none;&:active{color:inherit;}}"], ({
     theme: theme2,
@@ -36963,7 +37554,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Content, { children })
     ] });
   };
-  const CUISpacer = styledComponents.styled.div.withConfig({
+  const CUISpacer = styled.styled.div.withConfig({
     componentId: "sc-6ga865-0"
   })(["background:transparent;display:flex;padding:", ";"], ({
     theme: theme2,
@@ -37012,7 +37603,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       /* @__PURE__ */ jsxRuntime.jsx(DropdownContent, { as: Dropdown.Content, side, $width: width, sideOffset: 4, align: "end", children: menu.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(MenuContentItem, { parentKey: `split-menu-option-${index2}`, ...item }, `split-menu-option-${index2}`)) })
     ] });
   };
-  const DropdownContent = styledComponents.styled.div.withConfig({
+  const DropdownContent = styled.styled.div.withConfig({
     componentId: "sc-85zs9e-0"
   })(["min-width:", "px;"], ({
     $width
@@ -37039,7 +37630,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       ] });
     }
   };
-  const SplitButtonTrigger = styledComponents.styled.div.withConfig({
+  const SplitButtonTrigger = styled.styled.div.withConfig({
     componentId: "sc-85zs9e-1"
   })(["display:inline-flex;align-items:center;overflow:hidden;user-select:none;", ""], ({
     theme: theme2,
@@ -37062,7 +37653,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           }
         `}
   `);
-  const PrimaryButton = styledComponents.styled(BaseButton).withConfig({
+  const PrimaryButton = styled.styled(BaseButton).withConfig({
     componentId: "sc-85zs9e-2"
   })(["border:none;align-self:stretch;border-radius:0;align-items:center;padding:", ";", ""], ({
     theme: theme2
@@ -37092,7 +37683,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       font: ${theme2.click.button.split.typography.label.disabled};
     }
   `);
-  const SecondaryButton = styledComponents.styled(BaseButton).withConfig({
+  const SecondaryButton = styled.styled(BaseButton).withConfig({
     componentId: "sc-85zs9e-3"
   })(["border:none;align-self:stretch;border-radius:0;", ""], ({
     theme: theme2,
@@ -37114,7 +37705,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       color: ${theme2.click.button.split[$type].text.disabled};
     }
   `);
-  const ButtonData = styledComponents.styled.div.withConfig({
+  const ButtonData = styled.styled.div.withConfig({
     componentId: "sc-85zs9e-4"
   })(["width:auto;"]);
   const $6be4966fd9bbc698$var$SWITCH_NAME = "Switch";
@@ -37227,7 +37818,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }
   const $6be4966fd9bbc698$export$be92b6f5f03c0fe9 = $6be4966fd9bbc698$export$b5d5cf8927ab7262;
   const $6be4966fd9bbc698$export$6521433ed15a34db = $6be4966fd9bbc698$export$4d07bf653ea69106;
-  const Wrapper = styledComponents.styled(FormRoot).withConfig({
+  const Wrapper = styled.styled(FormRoot).withConfig({
     componentId: "sc-egkkgl-0"
   })(["align-items:center;max-width:fit-content;"]);
   const Switch = React.forwardRef(({
@@ -37286,7 +37877,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       };
     }
   };
-  const SwitchRoot = styledComponents.styled($6be4966fd9bbc698$export$be92b6f5f03c0fe9).withConfig({
+  const SwitchRoot = styled.styled($6be4966fd9bbc698$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-egkkgl-1"
   })((props) => {
     const vars = getRootVars(props.theme, props.disabled, props.checked);
@@ -37300,7 +37891,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       padding: 0
     };
   });
-  const SwitchThumb = styledComponents.styled($6be4966fd9bbc698$export$6521433ed15a34db).withConfig({
+  const SwitchThumb = styled.styled($6be4966fd9bbc698$export$6521433ed15a34db).withConfig({
     componentId: "sc-egkkgl-2"
   })((props) => {
     const vars = getThumbVars(props.theme, props.$disabled, props.$checked);
@@ -37452,13 +38043,13 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   const $69cb30bb0017df05$export$54c2e3dc7acea9f5 = $69cb30bb0017df05$export$9712d22edc0d78c1;
   const $69cb30bb0017df05$export$41fb9f06171c75f4 = $69cb30bb0017df05$export$8114b9fdfdf9f3ba;
   const $69cb30bb0017df05$export$7c6e2c02157bb7d2 = $69cb30bb0017df05$export$bd905d70e8fd2ebb;
-  const Trigger = styledComponents.styled($69cb30bb0017df05$export$41fb9f06171c75f4).withConfig({
+  const Trigger = styled.styled($69cb30bb0017df05$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-tj736u-0"
   })(["padding:", ";border-top-left-radius:", ";border-top-right-radius:", ";border:none;border-bottom:2px solid ", ";background-color:", ";color:", ";font:", ';cursor:pointer;&[data-state="active"]{border-bottom:2px solid ', ";color:", ";font:", ";&:hover{font:", ";}}&:hover{border-bottom:2px solid ", ";background-color:", ";color:", ";font:", ';}&:hover[data-state="active"]{border-bottom:2px solid ', ";}"], (props) => `${props.theme.click.tabs.space.y} ${props.theme.click.tabs.space.x}`, (props) => props.theme.click.tabs.radii.all, (props) => props.theme.click.tabs.radii.all, (props) => props.theme.click.tabs.basic.color.stroke.default, (props) => props.theme.click.tabs.basic.color.background.default, (props) => props.theme.click.tabs.basic.color.text.default, (props) => props.theme.click.tabs.typography.label.default, (props) => props.theme.click.tabs.basic.color.stroke.active, (props) => props.theme.click.tabs.basic.color.text.active, (props) => props.theme.click.tabs.typography.label.active, (props) => props.theme.click.tabs.typography.label.active, (props) => props.theme.click.tabs.basic.color.stroke.hover, (props) => props.theme.click.tabs.basic.color.background.hover, (props) => props.theme.click.tabs.basic.color.text.hover, (props) => props.theme.click.tabs.typography.label.hover, (props) => props.theme.click.tabs.basic.color.stroke.active);
-  const Content = styledComponents.styled($69cb30bb0017df05$export$7c6e2c02157bb7d2).withConfig({
+  const Content = styled.styled($69cb30bb0017df05$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-tj736u-1"
   })([""]);
-  const TriggersList = styledComponents.styled($69cb30bb0017df05$export$54c2e3dc7acea9f5).withConfig({
+  const TriggersList = styled.styled($69cb30bb0017df05$export$54c2e3dc7acea9f5).withConfig({
     componentId: "sc-tj736u-2"
   })(["border-bottom:1px solid ", ";display:flex;"], (props) => props.theme.click.global.color.stroke.default);
   const Tabs = ({
@@ -37473,10 +38064,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   Tabs.TriggersList = TriggersList;
   Tabs.Trigger = Trigger;
   Tabs.Content = Content;
-  const FullWidthTabs = styledComponents.styled(Tabs).withConfig({
+  const FullWidthTabs = styled.styled(Tabs).withConfig({
     componentId: "sc-tj736u-3"
   })(["width:100%;"]);
-  FullWidthTabs.Trigger = styledComponents.styled(Trigger).withConfig({
+  FullWidthTabs.Trigger = styled.styled(Trigger).withConfig({
     componentId: "sc-tj736u-4"
   })(["", ";"], (props) => props.width ? `width: ${props.width};` : `
     flex-basis: auto;
@@ -37484,12 +38075,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     flex-shrink: 1;
   `);
   FullWidthTabs.TriggersList = TriggersList;
-  const TabsContainer = styledComponents.styled.div.withConfig({
+  const TabsContainer = styled.styled.div.withConfig({
     componentId: "sc-137ymle-0"
   })(["display:flex;position:relative;overflow:auto;overscroll-behavior:none;scrollbar-width:0;max-width:", ";&::-webkit-scrollbar{height:0;}"], ({
     $count
   }) => `${$count * 200}px`);
-  const TabsSortableContainer = styledComponents.styled.div.withConfig({
+  const TabsSortableContainer = styled.styled.div.withConfig({
     componentId: "sc-137ymle-1"
   })(["display:flex;& > div{height:100%;outline:none;min-width:100px;width:clamp(100px,100%,200px);&.sortable-ghost{opacity:0;}}"]);
   const TabContext = React.createContext({
@@ -37560,7 +38151,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       }
     }, revertOnSpill: true, ...props, children: React.Children.map(children, (child, index2) => /* @__PURE__ */ jsxRuntime.jsx("div", { tabIndex: index2 + 1, role: "tab", onClick: onSelect(index2), children: child }, `tab-element-${index2}`)) }) }) });
   };
-  const TabElement = styledComponents.styled.div.withConfig({
+  const TabElement = styled.styled.div.withConfig({
     componentId: "sc-137ymle-2"
   })(["display:grid;justify-content:flex-start;align-items:center;outline:none;max-width:100%;max-width:-webkit-fill-available;max-width:fill-available;max-width:stretch;border:none;cursor:pointer;height:100%;max-height:100%;box-sizing:border-box;", ' [data-type="close"]{display:none;}[data-indicator]{display:block;}&:hover{[data-type="close"]{display:block;}[data-indicator]{display:none;}}'], ({
     theme: theme2,
@@ -37598,7 +38189,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         `}
     ${$preview === true ? "font-style: italic;" : ""}
   `);
-  const Indicator = styledComponents.styled.div.withConfig({
+  const Indicator = styled.styled.div.withConfig({
     componentId: "sc-137ymle-3"
   })(['position:relative;&::after{position:absolute;left:0.25rem;top:0.25rem;content:"";width:0.5rem;height:0.5rem;', "}"], ({
     theme: theme2,
@@ -37607,15 +38198,15 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       background: ${$status === "default" ? "transparent" : theme2.click.alert.color.text[$status]};
       border-radius: 50%;
   `);
-  const TabContent = styledComponents.styled.div.withConfig({
+  const TabContent = styled.styled.div.withConfig({
     componentId: "sc-137ymle-4"
   })(["display:flex;justify-content:flex-start;align-items:center;flex-wrap:nowrap;overflow:hidden;gap:", ";"], ({
     theme: theme2
   }) => theme2.click.tabs.fileTabs.space.gap);
-  const TabContentText = styledComponents.styled.span.withConfig({
+  const TabContentText = styled.styled.span.withConfig({
     componentId: "sc-137ymle-5"
   })(["display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;"]);
-  const EmptyButton = styledComponents.styled.button.withConfig({
+  const EmptyButton = styled.styled.button.withConfig({
     componentId: "sc-137ymle-6"
   })(["padding:0;", ";&:hover{background:", ";}"], ({
     theme: theme2
@@ -37674,7 +38265,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       children && /* @__PURE__ */ jsxRuntime.jsx(TabContentText, { children })
     ] });
   };
-  const StyledHeader = styledComponents.styled.th.withConfig({
+  const StyledHeader = styled.styled.th.withConfig({
     componentId: "sc-1q458rb-0"
   })(["", " text-align:left;"], ({
     theme: theme2,
@@ -37684,10 +38275,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     font: ${theme2.click.table.header.title.default};
     color: ${theme2.click.table.header.color.title.default};
   `);
-  const HeaderContentWrapper = styledComponents.styled.div.withConfig({
+  const HeaderContentWrapper = styled.styled.div.withConfig({
     componentId: "sc-1q458rb-1"
   })(["display:flex;align-items:center;justify-content:start;gap:inherit;"]);
-  const SortIcon = styledComponents.styled(SvgImage).withConfig({
+  const SortIcon = styled.styled(SvgImage).withConfig({
     componentId: "sc-1q458rb-2"
   })(["transition:all 200ms;transform:rotate(", ");"], ({
     $sortDir
@@ -37747,7 +38338,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       ] }) })
     ] });
   };
-  const TableRow = styledComponents.styled.tr.withConfig({
+  const TableRow = styled.styled.tr.withConfig({
     componentId: "sc-1q458rb-3"
   })(["overflow:hidden;", " &:last-of-type,&:last-child{border-bottom:none;}@media (max-width:768px){position:relative;display:flex;flex-wrap:wrap;", "}"], ({
     theme: theme2,
@@ -37780,7 +38371,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       ${$isSelectable ? `padding-left: calc(${theme2.click.table.body.cell.space.sm.x} + ${theme2.click.table.body.cell.space.sm.x} + ${theme2.click.checkbox.size.all});` : ""}
       ${$showActions ? `padding-right: calc(${theme2.click.table.body.cell.space.sm.x} + ${theme2.click.table.body.cell.space.sm.x} + ${theme2.click.image.sm.size.width} + ${theme2.click.button.iconButton.default.space.x} + ${theme2.click.button.iconButton.default.space.x});` : ""}
     `);
-  const TableData = styledComponents.styled.td.withConfig({
+  const TableData = styled.styled.td.withConfig({
     componentId: "sc-1q458rb-4"
   })(["overflow:hidden;", " @media (max-width:768px){width:auto;min-width:40%;", "}"], ({
     theme: theme2,
@@ -37794,10 +38385,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }) => `
       padding: ${theme2.click.table.body.cell.space.sm.y} ${theme2.click.table.body.cell.space.sm.x};
     `);
-  const StyledColGroup = styledComponents.styled.colgroup.withConfig({
+  const StyledColGroup = styled.styled.colgroup.withConfig({
     componentId: "sc-1q458rb-5"
   })(["@media (max-width:768px){display:none;}"]);
-  const StyledThead = styledComponents.styled.thead.withConfig({
+  const StyledThead = styled.styled.thead.withConfig({
     componentId: "sc-1q458rb-6"
   })(["tr{overflow:hidden;background-color:", ";", "}@media (max-width:768px){display:none;}"], ({
     theme: theme2
@@ -37805,7 +38396,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     theme: theme2
   }) => ` border-bottom: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.row.color.stroke.default};
   `);
-  const MobileHeader = styledComponents.styled.div.withConfig({
+  const MobileHeader = styled.styled.div.withConfig({
     componentId: "sc-1q458rb-7"
   })(["display:none;", " @media (max-width:768px){display:block;}"], ({
     theme: theme2
@@ -37813,10 +38404,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     color: ${theme2.click.table.row.color.label.default};
     font:  ${theme2.click.table.cell.label.default};
   `);
-  const Tbody = styledComponents.styled.tbody.withConfig({
+  const Tbody = styled.styled.tbody.withConfig({
     componentId: "sc-1q458rb-8"
   })(["@media (max-width:768px){display:flex;flex-direction:column;gap:0.25rem;}"]);
-  const SelectData = styledComponents.styled.td.withConfig({
+  const SelectData = styled.styled.td.withConfig({
     componentId: "sc-1q458rb-9"
   })(["overflow:hidden;", " @media (max-width:768px){width:auto;align-self:stretch;position:absolute;left:0;top:0;bottom:0;", "}"], ({
     theme: theme2,
@@ -37831,7 +38422,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       padding: ${theme2.click.table.body.cell.space.sm.y} ${theme2.click.table.body.cell.space.sm.x};
       border-right: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.row.color.stroke.default};
     `);
-  const ActionsList = styledComponents.styled.td.withConfig({
+  const ActionsList = styled.styled.td.withConfig({
     componentId: "sc-1q458rb-10"
   })(["overflow:hidden;", " @media (max-width:768px){width:auto;align-self:stretch;position:absolute;right:0;top:0;bottom:0;", "}"], ({
     theme: theme2,
@@ -37846,10 +38437,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       padding: ${theme2.click.table.body.cell.space.sm.y} ${theme2.click.table.body.cell.space.sm.x};
       border-left: 1px solid ${theme2.click.table.row.color.stroke.default};
     `);
-  const ActionsContainer = styledComponents.styled.div.withConfig({
+  const ActionsContainer = styled.styled.div.withConfig({
     componentId: "sc-1q458rb-11"
   })(["display:flex;flex-wrap:wrap;gap:0.5rem;overflow:hidden;@media (max-width:768px){flex-direction:column;overflow:auto;flex-wrap:nowrap;}"]);
-  const TableWrapper = styledComponents.styled.div.withConfig({
+  const TableWrapper = styled.styled.div.withConfig({
     componentId: "sc-1q458rb-12"
   })(["width:100%;height:100%;overflow:auto;", ""], ({
     theme: theme2
@@ -37857,18 +38448,18 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   border: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.global.color.stroke.default};
   border-radius: ${theme2.click.table.radii.all}
   `);
-  const TableOuterContainer = styledComponents.styled.div.withConfig({
+  const TableOuterContainer = styled.styled.div.withConfig({
     componentId: "sc-1q458rb-13"
   })(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
-  const MobileActions = styledComponents.styled.div.withConfig({
+  const MobileActions = styled.styled.div.withConfig({
     componentId: "sc-1q458rb-14"
   })(["display:none;@media (max-width:768px){display:flex;justify-content:space-between;align-items:center;padding:0 ", ";}"], ({
     theme: theme2
   }) => theme2.click.table.body.cell.space.sm.x);
-  const EditButton = styledComponents.styled.button.withConfig({
+  const EditButton = styled.styled.button.withConfig({
     componentId: "sc-1q458rb-15"
   })(["&:disabled{background:transparent;}"]);
-  const TableRowCloseButton = styledComponents.styled.button.withConfig({
+  const TableRowCloseButton = styled.styled.button.withConfig({
     componentId: "sc-1q458rb-16"
   })(["svg{transition:transform 200ms;", "}&:disabled{background:transparent;}"], ({
     $isDeleted
@@ -37908,10 +38499,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       ] }) })
     ] });
   };
-  const SpanedTableData = styledComponents.styled(TableData).withConfig({
+  const SpanedTableData = styled.styled(TableData).withConfig({
     componentId: "sc-1q458rb-17"
   })(["text-align:center;"]);
-  const CustomTableDataMessage = styledComponents.styled.div.withConfig({
+  const CustomTableDataMessage = styled.styled.div.withConfig({
     componentId: "sc-1q458rb-18"
   })(["display:flex;gap:0.5rem;justify-content:center;"]);
   const LoadingData = () => {
@@ -37998,7 +38589,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       ] }) })
     ] });
   });
-  const StyledTable = styledComponents.styled.table.withConfig({
+  const StyledTable = styled.styled.table.withConfig({
     componentId: "sc-1q458rb-19"
   })(["width:100%;border-collapse:collapse;overflow:hidden;table-layout:fixed;@media (max-width:768px){border:none;table-layout:auto;}"]);
   const TextAreaField = React.forwardRef(({
@@ -38604,7 +39195,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   };
   TooltipTrigger.displayName = "TooltipTrigger";
   Tooltip.Trigger = TooltipTrigger;
-  const RadixTooltipContent = styledComponents.styled($a093c7e1ec25a057$export$7c6e2c02157bb7d2).withConfig({
+  const RadixTooltipContent = styled.styled($a093c7e1ec25a057$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-ymqkp1-0"
   })(["display:flex;align-items:flex-start;", ""], ({
     theme: theme2,
@@ -38618,7 +39209,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     white-space: pre-wrap;
     ${$maxWidth && `max-width: ${$maxWidth}`};
   `);
-  const Arrow = styledComponents.styled.svg.withConfig({
+  const Arrow = styled.styled.svg.withConfig({
     componentId: "sc-ymqkp1-1"
   })(["", ";"], ({
     theme: theme2
@@ -39329,7 +39920,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   const ToastContext = React.createContext({
     createToast: () => null
   });
-  const ToastIcon = styledComponents.styled(SvgImage).withConfig({
+  const ToastIcon = styled.styled(SvgImage).withConfig({
     componentId: "sc-tmc8vl-0"
   })(["", ""], ({
     theme: theme2,
@@ -39339,7 +39930,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   height: ${theme2.click.toast.icon.size.height};
   color: ${theme2.click.toast.color.icon[$type]}
 `);
-  const hide = styledComponents.keyframes`
+  const hide = styled.keyframes`
   from {
     opacity: 1;
   }
@@ -39347,7 +39938,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     opacity: 0;
   }
 `;
-  const slideIn = styledComponents.keyframes`
+  const slideIn = styled.keyframes`
   from {
     transform: translateX(calc(100% + var(--viewport-padding)));
   }
@@ -39355,7 +39946,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     transform: translateX(0);
   }
 `;
-  const swipeOut = styledComponents.keyframes`
+  const swipeOut = styled.keyframes`
   from {
     transform: translateX(var(--radix-toast-swipe-end-x));
   }
@@ -39363,7 +39954,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     transform: translateX(calc(100% + var(--viewport-padding)));
   }
 `;
-  const ToastRoot = styledComponents.styled($054eb8030ebde76e$export$be92b6f5f03c0fe9).withConfig({
+  const ToastRoot = styled.styled($054eb8030ebde76e$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-tmc8vl-1"
   })(["display:flex;flex-direction:column;align-items:flex-start;width:100%;", " &[data-state='open']{animation:", ' 150ms cubic-bezier(0.16,1,0.3,1);}&[data-state="closed"]{animation:', ' 100ms ease-in;}&[data-swipe="move"]{transform:translateX(var(--radix-toast-swipe-move-x));}&[data-swipe="cancel"]{transform:translateX(0);transition:transform 200ms ease-out;}&[data-swipe="end"]{animation:', " 100ms ease-out;}"], ({
     theme: theme2
@@ -39375,7 +39966,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     background: ${theme2.click.global.color.background.default};
     box-shadow: ${theme2.click.toast.shadow};
   `, slideIn, hide, swipeOut);
-  const ToastHeader = styledComponents.styled($054eb8030ebde76e$export$f99233281efd08a0).withConfig({
+  const ToastHeader = styled.styled($054eb8030ebde76e$export$f99233281efd08a0).withConfig({
     componentId: "sc-tmc8vl-2"
   })(["display:flex;justify-content:space-between;align-items:center;width:100%;gap:inherit;", ""], ({
     theme: theme2
@@ -39383,7 +39974,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     font: ${theme2.click.toast.typography.title.default};
     color: ${theme2.click.toast.color.title.default};
   `);
-  const ToastDescriptionContainer = styledComponents.styled.div.withConfig({
+  const ToastDescriptionContainer = styled.styled.div.withConfig({
     componentId: "sc-tmc8vl-3"
   })(["display:flex;justify-content:space-between;width:100%;align-items:flex-end;gap:inherit;", ""], ({
     theme: theme2
@@ -39391,7 +39982,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     font: ${theme2.click.toast.typography.title.default};
     color: ${theme2.click.toast.color.title.default};
   `);
-  const ToastDescriptionContent = styledComponents.styled.div.withConfig({
+  const ToastDescriptionContent = styled.styled.div.withConfig({
     componentId: "sc-tmc8vl-4"
   })(["display:flex;align-self:stretch;gap:inherit;", ""], ({
     theme: theme2
@@ -39399,7 +39990,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     font: ${theme2.click.toast.typography.description.default};
     color: ${theme2.click.toast.color.description.default};
   `);
-  const Title = styledComponents.styled.div.withConfig({
+  const Title = styled.styled.div.withConfig({
     componentId: "sc-tmc8vl-5"
   })(["flex:1;"]);
   const Toast = ({
@@ -39433,7 +40024,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       ] })
     ] });
   };
-  const Viewport = styledComponents.styled($054eb8030ebde76e$export$d5c6c08dc2d3ca7).withConfig({
+  const Viewport = styled.styled($054eb8030ebde76e$export$d5c6c08dc2d3ca7).withConfig({
     componentId: "sc-tmc8vl-6"
   })(["--viewport-padding:25px;position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
     theme: theme2
@@ -39722,8 +40313,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }
   var _isKeyable = isKeyable$1;
   var isKeyable = _isKeyable;
-  function getMapData$4(map, key) {
-    var data = map.__data__;
+  function getMapData$4(map2, key) {
+    var data = map2.__data__;
     return isKeyable(key) ? data[typeof key == "string" ? "string" : "hash"] : data.map;
   }
   var _getMapData = getMapData$4;
@@ -41100,6 +41691,41 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    datePicker: {
+      dateOption: {
+        color: {
+          label: {
+            "default": "#161517",
+            hover: "#161517",
+            active: "#ffffff",
+            disabled: "#a0a0a0",
+            range: "#161517"
+          },
+          background: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#151515",
+            disabled: "#ffffff",
+            range: "#e6e7e9"
+          },
+          stroke: {
+            "default": "#ffffff",
+            hover: "#151515",
+            active: "#151515",
+            disabled: "#ffffff",
+            range: "#e6e7e9"
+          }
+        }
+      },
+      color: {
+        title: {
+          "default": "lch(10.2 1.39 305)"
+        },
+        daytitle: {
+          "default": "#696e79"
+        }
+      }
+    },
     global: {
       color: {
         text: {
@@ -41802,6 +42428,154 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     },
     checkbox: {
       color: {
+        variations: {
+          "default": {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#FAFF69",
+              disabled: "#414141"
+            },
+            stroke: {
+              "default": "#414141",
+              hover: "#414141",
+              active: "#FAFF69",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#151515",
+              disabled: "#808080"
+            },
+            label: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#606060"
+            }
+          },
+          var1: {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#66FF73",
+              disabled: "rgb(17.8% 17.8% 17.8%)"
+            },
+            stroke: {
+              "default": "#00CC11",
+              hover: "#66FF73",
+              active: "#66FF73",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var2: {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#6c9af3",
+              disabled: "rgb(17.8% 17.8% 17.8%)"
+            },
+            stroke: {
+              "default": "#6c9af3",
+              hover: "#91b3f6",
+              active: "#91b3f6",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var3: {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#FB64D6",
+              disabled: "rgb(17.8% 17.8% 17.8%)"
+            },
+            stroke: {
+              "default": "#FB64D6",
+              hover: "#FB64D6",
+              active: "#FB64D6",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var4: {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#FAFF69",
+              disabled: "rgb(17.8% 17.8% 17.8%)"
+            },
+            stroke: {
+              "default": "#FAFF69",
+              hover: "#fdffa3",
+              active: "#fdffa3",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var5: {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#66FFE5",
+              disabled: "rgb(17.8% 17.8% 17.8%)"
+            },
+            stroke: {
+              "default": "#66FFE5",
+              hover: "#99FFEE",
+              active: "#99FFEE",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var6: {
+            background: {
+              "default": "rgb(17.8% 17.8% 17.8%)",
+              hover: "rgb(17.8% 17.8% 17.8%)",
+              active: "#BB33FF",
+              disabled: "rgb(17.8% 17.8% 17.8%)"
+            },
+            stroke: {
+              "default": "#CC66FF",
+              hover: "#CC66FF",
+              active: "#CC66FF",
+              disabled: "#606060"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          }
+        },
         background: {
           "default": "rgb(17.8% 17.8% 17.8%)",
           hover: "rgb(17.8% 17.8% 17.8%)",
@@ -42557,6 +43331,41 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    datePicker: {
+      dateOption: {
+        color: {
+          label: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#1F1F1C",
+            disabled: "#a0a0a0",
+            range: "#ffffff"
+          },
+          background: {
+            "default": "#1F1F1C",
+            hover: "#1F1F1C",
+            active: "#FAFF69",
+            disabled: "#1F1F1C",
+            range: "#323232"
+          },
+          stroke: {
+            "default": "#1F1F1C",
+            hover: "#FAFF69",
+            active: "#FAFF69",
+            disabled: "#1F1F1C",
+            range: "#323232"
+          }
+        }
+      },
+      color: {
+        title: {
+          "default": "rgb(97.5% 97.5% 97.5%)"
+        },
+        daytitle: {
+          "default": "#b3b6bd"
+        }
+      }
+    },
     global: {
       color: {
         background: {
@@ -42707,7 +43516,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       },
       icon: {
-        background: "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);"
+        background: "linear-gradient(132deg, #FAFF69 8%, #292929 30%);"
       }
     }
   };
@@ -43307,6 +44116,148 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     },
     checkbox: {
       color: {
+        variations: {
+          "default": {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#161517",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#b3b6bd",
+              hover: "#b3b6bd",
+              active: "#161517",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var1: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#62de85",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#62de85",
+              hover: "#62de85",
+              active: "#62de85",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var2: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#6c9af3",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#6c9af3",
+              hover: "#6c9af3",
+              active: "#6c9af3",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var3: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#FB64D6",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#FB64D6",
+              hover: "#FB64D6",
+              active: "#FB64D6",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var4: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#ffb864",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#ffb864",
+              hover: "#ffb864",
+              active: "#ffb864",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var5: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#00CCAA",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#00CCAA",
+              hover: "#00CCAA",
+              active: "#00CCAA",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var6: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#CC66FF",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#CC66FF",
+              hover: "#BB33FF",
+              active: "#BB33FF",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          }
+        },
         background: {
           "default": "#f6f7fa",
           hover: "#f6f7fa",
@@ -44055,6 +45006,41 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    datePicker: {
+      dateOption: {
+        color: {
+          label: {
+            "default": "#161517",
+            hover: "#161517",
+            active: "#ffffff",
+            disabled: "#a0a0a0",
+            range: "#161517"
+          },
+          background: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#151515",
+            disabled: "#ffffff",
+            range: "#e6e7e9"
+          },
+          stroke: {
+            "default": "#ffffff",
+            hover: "#151515",
+            active: "#151515",
+            disabled: "#ffffff",
+            range: "#e6e7e9"
+          }
+        }
+      },
+      color: {
+        title: {
+          "default": "lch(11.1 1.37 305)"
+        },
+        daytitle: {
+          "default": "#696e79"
+        }
+      }
+    },
     global: {
       color: {
         background: {
@@ -44123,7 +45109,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     chart: {
       bars: {
         color: {
-          green: "#00FF15",
+          green: "#62de85",
           blue: "#6c9af3",
           fuchsia: "#FB64D6",
           orange: "#ffb864",
@@ -44191,7 +45177,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       },
       chart: {
         bars: {
-          green: "#00FF15",
+          green: "#62de85",
           blue: "#6c9af3",
           fuchsia: "#FB64D6",
           orange: "#ffb864",
@@ -44206,7 +45192,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       },
       icon: {
-        background: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);"
+        background: "linear-gradient(132deg, #FFFFFF 8%, #292929 30%);"
       }
     }
   };
@@ -45279,6 +46265,154 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       },
       color: {
+        variations: {
+          "default": {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#161517",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#b3b6bd",
+              hover: "#b3b6bd",
+              active: "#161517",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            },
+            label: {
+              "default": "#161517",
+              hover: "#161517",
+              active: "#161517",
+              disabled: "#a0a0a0"
+            }
+          },
+          var1: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#62de85",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#62de85",
+              hover: "#62de85",
+              active: "#62de85",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var2: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#6c9af3",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#6c9af3",
+              hover: "#6c9af3",
+              active: "#6c9af3",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var3: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#FB64D6",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#FB64D6",
+              hover: "#FB64D6",
+              active: "#FB64D6",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var4: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#ffb864",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#ffb864",
+              hover: "#ffb864",
+              active: "#ffb864",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var5: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#00CCAA",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#00CCAA",
+              hover: "#00CCAA",
+              active: "#00CCAA",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          },
+          var6: {
+            background: {
+              "default": "#f6f7fa",
+              hover: "#f6f7fa",
+              active: "#CC66FF",
+              disabled: "#dfdfdf"
+            },
+            stroke: {
+              "default": "#CC66FF",
+              hover: "#BB33FF",
+              active: "#BB33FF",
+              disabled: "#c0c0c0"
+            },
+            check: {
+              "default": "#ffffff",
+              hover: "#ffffff",
+              active: "#ffffff",
+              disabled: "#a0a0a0"
+            }
+          }
+        },
         background: {
           "default": "#f6f7fa",
           hover: "#f6f7fa",
@@ -46719,6 +47853,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         narrow: {
           width: "21rem",
           height: "100%"
+        },
+        widest: {
+          width: "55rem",
+          height: "100vh"
         }
       },
       typography: {
@@ -46922,6 +48060,73 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    datePicker: {
+      dateOption: {
+        space: {
+          gap: "2px"
+        },
+        radii: {
+          "default": "0.25rem",
+          range: "0"
+        },
+        stroke: "1px",
+        size: {
+          height: "2rem",
+          width: "2rem"
+        },
+        typography: {
+          label: {
+            "default": `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
+            hover: `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
+            active: `600 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
+            disabled: `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`,
+            range: `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+          }
+        },
+        color: {
+          label: {
+            "default": "#161517",
+            hover: "#161517",
+            active: "#ffffff",
+            disabled: "#a0a0a0",
+            range: "#161517"
+          },
+          background: {
+            "default": "#ffffff",
+            hover: "#ffffff",
+            active: "#151515",
+            disabled: "#ffffff",
+            range: "#e6e7e9"
+          },
+          stroke: {
+            "default": "#ffffff",
+            hover: "#151515",
+            active: "#151515",
+            disabled: "#ffffff",
+            range: "#e6e7e9"
+          }
+        }
+      },
+      space: {
+        gap: "0.25rem"
+      },
+      typography: {
+        daytitle: {
+          "default": `400 0.75rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+        },
+        title: {
+          "default": `600 0.875rem/1.5 "Inter", '"SF Pro Display"', -apple-system, BlinkMacSystemFont, '"Segoe UI"', Roboto, Oxygen, Ubuntu, Cantarell, '"Open Sans"', '"Helvetica Neue"', sans-serif;`
+        }
+      },
+      color: {
+        title: {
+          "default": "lch(11.1 1.37 305)"
+        },
+        daytitle: {
+          "default": "#696e79"
+        }
+      }
+    },
     global: {
       color: {
         background: {
@@ -46990,7 +48195,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     chart: {
       bars: {
         color: {
-          green: "#00FF15",
+          green: "#62de85",
           blue: "#6c9af3",
           fuchsia: "#FB64D6",
           orange: "#ffb864",
@@ -47096,7 +48301,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       },
       chart: {
         bars: {
-          green: "#00FF15",
+          green: "#62de85",
           blue: "#6c9af3",
           fuchsia: "#FB64D6",
           orange: "#ffb864",
@@ -47111,7 +48316,11 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       },
       icon: {
-        background: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);"
+        background: "linear-gradient(132deg, #FFFFFF 8%, #292929 30%);"
+      },
+      gradients: {
+        yellowToBlack: "linear-gradient(132deg, #faff69 8%, #292929 30%)",
+        whiteToBlack: "linear-gradient(132deg, #ffffff 8%, #292929 30%)"
       }
     }
   };
@@ -47229,8 +48438,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     },
     gradients: {
       base: "linear-gradient(229.65deg, #292924 15.78%, #0F0F0F 88.39%)",
-      yellowToblack: "linear-gradient(132deg, #FAFF69 7.59%, #292929 30.01%);",
-      whiteToblack: "linear-gradient(132deg, #FFFFFF 7.59%, #292929 30.01%);",
+      yellowToblack: "linear-gradient(132deg, #FAFF69 8%, #292929 30%);",
+      whiteToblack: "linear-gradient(132deg, #FFFFFF 8%, #292929 30%);",
       transparent: "rgba(0,0,0,0)"
     },
     utility: {
@@ -47452,7 +48661,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     classic: merge$1({}, theme, classicTheme)
   };
   const useCUITheme = () => {
-    const theme2 = styledComponents.useTheme();
+    const theme2 = styled.useTheme();
     return {
       breakpoint: theme2.breakpoint,
       global: theme2.global,
@@ -47460,11 +48669,11 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       sizes: theme2.sizes
     };
   };
-  const GlobalStyle = styledComponents.createGlobalStyle(["body{color:", ";background-color:", "}"], (props) => props.theme.click.global.color.text.default, (props) => props.theme.click.global.color.background.default);
+  const GlobalStyle = styled.createGlobalStyle(["body{color:", ";background-color:", "}"], (props) => props.theme.click.global.color.text.default, (props) => props.theme.click.global.color.background.default);
   const ThemeProvider = ({
     theme: name2,
     children
-  }) => /* @__PURE__ */ jsxRuntime.jsxs(styledComponents.ThemeProvider, { theme: themes[name2], children: [
+  }) => /* @__PURE__ */ jsxRuntime.jsxs(styled.ThemeProvider, { theme: themes[name2], children: [
     /* @__PURE__ */ jsxRuntime.jsx(GlobalStyle, {}),
     children
   ] });
@@ -47489,7 +48698,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   const StepperContext = React.createContext({
     type: "numbered"
   });
-  const StepRoot = styledComponents.styled.div.withConfig({
+  const StepRoot = styled.styled.div.withConfig({
     componentId: "sc-xro1ly-0"
   })(["display:flex;flex-direction:column;align-items:flex-start;counter-reset:vertical-stepper;width:100%;"]);
   const VerticalStepper = ({
@@ -47502,7 +48711,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     };
     return /* @__PURE__ */ jsxRuntime.jsx(StepRoot, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(StepperContext.Provider, { value, children }) });
   };
-  const StepItem = styledComponents.styled.div.withConfig({
+  const StepItem = styled.styled.div.withConfig({
     componentId: "sc-xro1ly-1"
   })(["display:flex;flex-direction:column;position:relative;width:100%;padding:0;", ""], ({
     theme: theme2,
@@ -47527,7 +48736,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       }
     }
   `);
-  const StepTrigger = styledComponents.styled.button.withConfig({
+  const StepTrigger = styled.styled.button.withConfig({
     componentId: "sc-xro1ly-2"
   })(["", ""], ({
     $status
@@ -47542,7 +48751,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     cursor: ${$status === "active" ? "default" : $status === "complete" ? "pointer" : "not-allowed"};
     flex-direction: row;
   `);
-  const StepBubble = styledComponents.styled.div.withConfig({
+  const StepBubble = styled.styled.div.withConfig({
     componentId: "sc-xro1ly-3"
   })(["", ""], ({
     theme: theme2,
@@ -47581,10 +48790,10 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       }
       ` : ""};
   `);
-  const CheckIcon = styledComponents.styled(SvgImage).withConfig({
+  const CheckIcon = styled.styled(SvgImage).withConfig({
     componentId: "sc-xro1ly-4"
   })(["color:inherit;path{stroke-width:3;}"]);
-  const StepLabel = styledComponents.styled.div.withConfig({
+  const StepLabel = styled.styled.div.withConfig({
     componentId: "sc-xro1ly-5"
   })(["display:flex;flex-direction:column;", ")"], ({
     theme: theme2,
@@ -47595,7 +48804,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     color: ${theme2.click.stepper.vertical[$type].color.title[$status]};
     gap: inherit;
   `);
-  const StepContent = styledComponents.styled.div.withConfig({
+  const StepContent = styled.styled.div.withConfig({
     componentId: "sc-xro1ly-6"
   })(["display:flex;width:100%;flex-direction:column;", ""], ({
     theme: theme2,
@@ -47694,7 +48903,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   };
   MultiAccordionItem.displayName = "MultiAccordion.Item";
   MultiAccordion.Item = MultiAccordionItem;
-  const AccordionRoot = styledComponents.styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
+  const AccordionRoot = styled.styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
     componentId: "sc-1lb3204-0"
   })(["display:flex;flex-direction:column;justify-content:start;align-items:start;gap:", ";", ";"], ({
     theme: theme2,
@@ -47702,7 +48911,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }) => theme2.click.container.gap[$gap], ({
     $fillWidth
   }) => $fillWidth && "width: 100%");
-  const AccordionItem = styledComponents.styled($1bf158f521e1b1b4$export$6d08773d2e66f8f2).withConfig({
+  const AccordionItem = styled.styled($1bf158f521e1b1b4$export$6d08773d2e66f8f2).withConfig({
     componentId: "sc-1lb3204-1"
   })(["", ";", ";"], ({
     theme: theme2,
@@ -47713,7 +48922,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   `, ({
     $fillWidth
   }) => $fillWidth && "width: 100%");
-  const AccordionTrigger = styledComponents.styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+  const AccordionTrigger = styled.styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
     componentId: "sc-1lb3204-2"
   })(["width:100%;border:none;padding:0;background-color:transparent;display:flex;align-items:center;", ';border-radius:inherit;&[data-state="open"]{border-bottom-left-radius:0px;border-bottom-right-radius:0px;[data-icon="accordion-status"]{color:', ";}}"], ({
     theme: theme2,
@@ -47746,13 +48955,13 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   }, ({
     theme: theme2
   }) => theme2.global.color.accent.default);
-  const AccordionIconWrapper = styledComponents.styled.div.withConfig({
+  const AccordionIconWrapper = styled.styled.div.withConfig({
     componentId: "sc-1lb3204-3"
   })(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
-  const AccordionIconsWrapper = styledComponents.styled.div.withConfig({
+  const AccordionIconsWrapper = styled.styled.div.withConfig({
     componentId: "sc-1lb3204-4"
   })(["display:flex;align-items:center;justify-content:center;"]);
-  const CustomIcon = styledComponents.styled(SvgImage).withConfig({
+  const CustomIcon = styled.styled(SvgImage).withConfig({
     componentId: "sc-1lb3204-5"
   })(["", ""], ({
     $isCompleted,
@@ -47766,7 +48975,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           fill: ${theme2.global.color.accent.default} !important;;
         }
       `);
-  const AccordionContent = styledComponents.styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
+  const AccordionContent = styled.styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-1lb3204-6"
   })(["padding:", ";padding-top:0;"], ({
     theme: theme2,
@@ -47792,6 +49001,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.Container = Container;
   exports2.ContextMenu = ContextMenu;
   exports2.DangerAlert = DangerAlert;
+  exports2.DatePicker = DatePicker;
   exports2.Dialog = Dialog;
   exports2.Dropdown = Dropdown;
   exports2.EllipsisContent = EllipsisContent;
@@ -47824,7 +49034,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.RadioGroup = RadioGroup;
   exports2.SearchField = SearchField;
   exports2.Select = Select;
-  exports2.Separator = Separator$1;
+  exports2.Separator = Separator;
   exports2.SidebarCollapsibleItem = SidebarCollapsibleItem;
   exports2.SidebarCollapsibleTitle = SidebarCollapsibleTitle;
   exports2.SidebarNavigationItem = SidebarNavigationItem;