myshell-react-lib 0.2.45 → 0.3.1

package/dist/index.cjs

@@ -7096,6 +7096,13 @@ var iconVariants = (0, import_class_variance_authority.cva)("inline-flex shrink-
         color: "default"
     }
 });
+var SMALL_ICON_SIZES = /* @__PURE__ */ new Set([
+    "2xs",
+    "xs",
+    "sm",
+    "md",
+    "lg"
+]);
 var Icon = React.forwardRef(function(props, ref) {
     var children = props.children, component = props.component, size = props.size, color = props.color, rotate = props.rotate, className = props.className, passProps = _object_without_properties(props, [
         "children",
@@ -7106,10 +7113,11 @@ var Icon = React.forwardRef(function(props, ref) {
         "className"
     ]);
     var Com = component || "span";
+    var strokeWidth = SMALL_ICON_SIZES.has(size) ? 1.25 : 1.5;
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Com, _object_spread_props(_object_spread({
         ref: ref
     }, passProps), {
-        strokeWidth: 1.5,
+        strokeWidth: strokeWidth,
         className: cn(iconVariants({
             size: size,
             color: color,
@@ -7149,21 +7157,27 @@ var lineClampMap = {
     5: "line-clamp-5",
     6: "line-clamp-6"
 };
-var displayVariants = (0, import_class_variance_authority2.cva)("font-medium display-font-style font-ABCDiatype", {
+var displayVariants = (0, import_class_variance_authority2.cva)("display-font-style font-ABCDiatype", {
     variants: {
         size: {
-            "2xl": "text-7xl",
+            "3xl": "text-7xl",
+            "2xl": "text-6xl",
             xl: "text-5xl",
             lg: "text-3xl",
             md: "text-2xl",
             sm: "text-xl",
             xs: "text-lg"
         },
+        weight: {
+            medium: "font-medium",
+            semibold: "font-semibold"
+        },
         color: colorMap,
         lineClamp: lineClampMap
     },
     defaultVariants: {
         size: "lg",
+        weight: "medium",
         color: "default"
     }
 });
@@ -7325,9 +7339,10 @@ var Heading = React2.forwardRef(function(props, ref) {
     }));
 });
 var Display = React2.forwardRef(function(props, ref) {
-    var className = props.className, size = props.size, color = props.color, lineClamp = props.lineClamp, underline = props.underline, strikethrough = props.strikethrough, strong = props.strong, italic = props.italic, children = props.children, dangerous = props.dangerous, passProps = _object_without_properties(props, [
+    var className = props.className, size = props.size, weight = props.weight, color = props.color, lineClamp = props.lineClamp, underline = props.underline, strikethrough = props.strikethrough, strong = props.strong, italic = props.italic, children = props.children, dangerous = props.dangerous, passProps = _object_without_properties(props, [
         "className",
         "size",
+        "weight",
         "color",
         "lineClamp",
         "underline",
@@ -7348,6 +7363,7 @@ var Display = React2.forwardRef(function(props, ref) {
         ref: ref,
         className: cn(displayVariants({
             size: size,
+            weight: weight,
             color: color,
             lineClamp: lineClamp
         }), className)
@@ -7515,23 +7531,24 @@ var import_jsx_runtime4 = require("react/jsx-runtime");
 var CircleErrorIcon = React4.forwardRef(function(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon, _object_spread_props(_object_spread({}, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", {
-            className: "w-full h-full",
-            viewBox: "0 0 20 20",
-            fill: "currentColor",
             xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            viewBox: "0 0 20 20",
+            fill: "none",
             children: [
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", {
                     cx: "10",
                     cy: "10",
                     r: "8",
-                    fill: "#CA4F3A"
+                    fill: "#EF3B2E"
                 }),
                 /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", {
-                    d: "M12 8L8 12M8 8L12 12",
-                    stroke: "#FFFEFD",
-                    strokeWidth: "1.25",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
+                    d: "M12.5 7.5L7.5 12.5M7.5 7.5L12.5 12.5",
+                    stroke: "white",
+                    "stroke-width": "1.04167",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
                 })
             ]
         })
@@ -7543,23 +7560,24 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var CircleInfoIcon = React5.forwardRef(function(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, _object_spread_props(_object_spread({}, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("svg", {
-            className: "w-full h-full",
-            viewBox: "0 0 20 20",
-            fill: "currentColor",
             xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            viewBox: "0 0 20 20",
+            fill: "none",
             children: [
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("circle", {
                     cx: "10",
                     cy: "10",
                     r: "8",
-                    fill: "#447BB0"
+                    fill: "#357FE9"
                 }),
                 /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", {
-                    d: "M10 12.3333V9.66667M10 7H10.0067",
-                    stroke: "#FFFEFD",
-                    strokeWidth: "1.25",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
+                    d: "M10.01 13.3333L10.01 9.66666M10.01 6.99999L10.0033 6.99999",
+                    stroke: "white",
+                    "stroke-width": "1.25",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
                 })
             ]
         })
@@ -7571,23 +7589,24 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 var CircleWarningIcon = React6.forwardRef(function(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, _object_spread_props(_object_spread({}, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", {
-            className: "w-full h-full",
-            viewBox: "0 0 20 20",
-            fill: "currentColor",
             xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            viewBox: "0 0 20 20",
+            fill: "none",
             children: [
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", {
                     cx: "10",
                     cy: "10",
                     r: "8",
-                    fill: "#AD8D2D"
+                    fill: "#ED9908"
                 }),
                 /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", {
-                    d: "M9.99994 7V9.66667M9.99994 12.3333H10.0066",
-                    stroke: "#FFFEFD",
-                    strokeWidth: "1.25",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
+                    d: "M9.99994 7V10.6667M9.99994 13.3333H10.0066",
+                    stroke: "white",
+                    "stroke-width": "1.25",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
                 })
             ]
         })
@@ -7599,23 +7618,24 @@ var import_jsx_runtime7 = require("react/jsx-runtime");
 var CircleSuccessIcon = React7.forwardRef(function(props, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon, _object_spread_props(_object_spread({}, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", {
-            className: "w-full h-full",
-            viewBox: "0 0 20 20",
-            fill: "currentColor",
             xmlns: "http://www.w3.org/2000/svg",
+            width: "20",
+            height: "20",
+            viewBox: "0 0 20 20",
+            fill: "none",
             children: [
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", {
                     cx: "10",
                     cy: "10",
                     r: "8",
-                    fill: "#00876D"
+                    fill: "#17A966"
                 }),
                 /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", {
-                    d: "M8 10.3333L9.33333 11.6667L12 9",
-                    stroke: "#FFFEFD",
-                    strokeWidth: "1.25",
-                    strokeLinecap: "round",
-                    strokeLinejoin: "round"
+                    d: "M7 10.3333L9 12.3333L13 8.33334",
+                    stroke: "white",
+                    "stroke-width": "1.25",
+                    "stroke-linecap": "round",
+                    "stroke-linejoin": "round"
                 })
             ]
         })
@@ -11409,7 +11429,7 @@ var DropdownMenuSubTrigger = React21.forwardRef(function(_param, ref) {
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuPrimitive.SubTrigger, _object_spread_props(_object_spread({
         ref: ref,
-        className: cn("flex cursor-pointer select-none items-center rounded-sm px-3 py-2 outline-none focus:bg-Colors-Background-Neutral-Secondary-Hover data-[state=open]:bg-Colors-Background-Neutral-Secondary-Active", inset && "pl-8", className)
+        className: cn("flex cursor-pointer select-none items-center rounded-sm px-3 py-2 outline-none focus:bg-cc-Dropdown-bg-hover data-[state=open]:bg-cc-Dropdown-bg-hover", inset && "pl-8", className)
     }, props), {
         children: [
             children,
@@ -11449,7 +11469,7 @@ var DropdownMenuSubContent = React21.forwardRef(function(_param, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropdownMenuPrimitive.SubContent, _object_spread({
         ref: ref,
         sideOffset: sideOffset,
-        className: cn("z-50 min-w-[8rem] overflow-hidden rounded-sm border border-Colors-Border-Default bg-Colors-Background-Utilities-Modal p-2 text-Colors-Text-Default shadow-modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+        className: cn("z-50 min-w-[8rem] overflow-hidden rounded-sm border border-Colors-Border-Default bg-cc-Dropdown-bg-default p-2 text-Colors-Text-Default shadow-modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
         onMouseEnter: hoverContext ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hoverContext ? handleMouseLeave : onMouseLeave
     }, props));
@@ -11489,7 +11509,7 @@ var DropdownMenuContent = React21.forwardRef(function(_param, ref) {
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropdownMenuPrimitive.Content, _object_spread({
         ref: ref,
         sideOffset: sideOffset,
-        className: cn("z-[100] min-w-[8rem] overflow-hidden rounded-sm border border-Colors-Border-Opaque bg-Colors-Background-Utilities-Modal p-1 text-Colors-Text-Default shadow-modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
+        className: cn("z-[100] min-w-[8rem] overflow-hidden rounded-sm border border-Colors-Border-Opaque bg-cc-Dropdown-bg-default p-1 text-Colors-Text-Default shadow-modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className),
         onMouseEnter: hoverContext ? handleMouseEnter : onMouseEnter,
         onMouseLeave: hoverContext ? handleMouseLeave : onMouseLeave
     }, props));
@@ -11502,7 +11522,7 @@ var DropdownMenuItem = React21.forwardRef(function(_param, ref) {
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(DropdownMenuPrimitive.Item, _object_spread({
         ref: ref,
-        className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1 outline-none transition-colors focus:bg-Colors-Background-Neutral-Secondary-Hover data-[disabled]:pointer-events-none data-[disabled]:opacity-30", inset && "pl-8", className)
+        className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1 outline-none transition-colors focus:bg-cc-Dropdown-bg-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-30", inset && "pl-8", className)
     }, props));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
@@ -11514,7 +11534,7 @@ var DropdownMenuCheckboxItem = React21.forwardRef(function(_param, ref) {
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(DropdownMenuPrimitive.CheckboxItem, _object_spread_props(_object_spread({
         ref: ref,
-        className: cn("relative flex cursor-pointer select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-Colors-Background-Neutral-Secondary-Hover data-[disabled]:pointer-events-none data-[disabled]:opacity-30", className),
+        className: cn("relative flex cursor-pointer select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-cc-Dropdown-bg-hover data-[disabled]:pointer-events-none data-[disabled]:opacity-30", className),
         checked: checked
     }, props), {
         children: [
@@ -12188,7 +12208,7 @@ var CommandItem = React26.forwardRef(function(_param, ref) {
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_cmdk.Command.Item, _object_spread({
         ref: ref,
-        className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-Colors-Background-Normal-Primary-Hover aria-selected:text-Colors-Text-Default data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)
+        className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-cc-Dropdown-bg-hover aria-selected:text-Colors-Text-Default data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className)
     }, props));
 });
 CommandItem.displayName = import_cmdk.Command.Item.displayName;
@@ -12650,7 +12670,7 @@ var Guide = function(param) {
                 }
                 var content = popover.wrapper;
                 if (content) {
-                    content.className = cn("!bg-Colors-Utility-Lake-Blue-50 !p-3 !shadow-modal-default", content.className);
+                    content.className = cn("!bg-Colors-Background-Info-Alt !p-3 !shadow-modal-default", content.className);
                     var arrow = popover.arrow;
                     if (arrow) {
                         arrow.className = cn("border-t-Colors-Utility-Lake-Blue-50", arrow.className);
@@ -13648,7 +13668,7 @@ var modalVariants = (0, import_class_variance_authority13.cva)("focus-visible:ou
     }
 });
 var Modal = function(_param) {
-    var title = _param.title, description = _param.description, _param_size = _param.size, size = _param_size === void 0 ? "lg" : _param_size, _param_zIndex = _param.zIndex, zIndex = _param_zIndex === void 0 ? 99 : _param_zIndex, _param_hideClose = _param.hideClose, hideClose = _param_hideClose === void 0 ? false : _param_hideClose, _param_overlayClose = _param.overlayClose, overlayClose = _param_overlayClose === void 0 ? true : _param_overlayClose, _param_modalOnly = _param.modalOnly, modalOnly = _param_modalOnly === void 0 ? true : _param_modalOnly, contentClassName = _param.contentClassName, overlayClassName = _param.overlayClassName, iconClassName = _param.iconClassName, closeClassName = _param.closeClassName, _param_fullScreen = _param.fullScreen, fullScreen = _param_fullScreen === void 0 ? false : _param_fullScreen, focusScopeOptions = _param.focusScopeOptions, _param_isLogin = _param.isLogin, isLogin = _param_isLogin === void 0 ? false : _param_isLogin, _param_isNotification = _param.isNotification, isNotification = _param_isNotification === void 0 ? false : _param_isNotification, _param_isHorizontal = _param.isHorizontal, isHorizontal = _param_isHorizontal === void 0 ? false : _param_isHorizontal, state = _param.state, _param_showCancel = _param.showCancel, showCancel = _param_showCancel === void 0 ? true : _param_showCancel, _param_confirmLoading = _param.confirmLoading, confirmLoading = _param_confirmLoading === void 0 ? false : _param_confirmLoading, cancelText = _param.cancelText, confirmText = _param.confirmText, children = _param.children, _param_autoFocus = _param.autoFocus, autoFocus = _param_autoFocus === void 0 ? false : _param_autoFocus, onClose = _param.onClose, onConfirm = _param.onConfirm, props = _object_without_properties(_param, [
+    var title = _param.title, description = _param.description, _param_size = _param.size, size = _param_size === void 0 ? "lg" : _param_size, _param_zIndex = _param.zIndex, zIndex = _param_zIndex === void 0 ? 99 : _param_zIndex, _param_hideClose = _param.hideClose, hideClose = _param_hideClose === void 0 ? false : _param_hideClose, _param_overlayClose = _param.overlayClose, overlayClose = _param_overlayClose === void 0 ? true : _param_overlayClose, _param_modalOnly = _param.modalOnly, modalOnly = _param_modalOnly === void 0 ? true : _param_modalOnly, contentClassName = _param.contentClassName, overlayClassName = _param.overlayClassName, iconClassName = _param.iconClassName, closeClassName = _param.closeClassName, _param_fullScreen = _param.fullScreen, fullScreen = _param_fullScreen === void 0 ? false : _param_fullScreen, focusScopeOptions = _param.focusScopeOptions, _param_isLogin = _param.isLogin, isLogin = _param_isLogin === void 0 ? false : _param_isLogin, _param_isNotification = _param.isNotification, isNotification = _param_isNotification === void 0 ? false : _param_isNotification, _param_isHorizontal = _param.isHorizontal, isHorizontal = _param_isHorizontal === void 0 ? false : _param_isHorizontal, state = _param.state, icon = _param.icon, _param_showCancel = _param.showCancel, showCancel = _param_showCancel === void 0 ? true : _param_showCancel, _param_confirmLoading = _param.confirmLoading, confirmLoading = _param_confirmLoading === void 0 ? false : _param_confirmLoading, cancelText = _param.cancelText, confirmText = _param.confirmText, children = _param.children, _param_autoFocus = _param.autoFocus, autoFocus = _param_autoFocus === void 0 ? false : _param_autoFocus, onClose = _param.onClose, onConfirm = _param.onConfirm, props = _object_without_properties(_param, [
         "title",
         "description",
         "size",
@@ -13666,6 +13686,7 @@ var Modal = function(_param) {
         "isNotification",
         "isHorizontal",
         "state",
+        "icon",
         "showCancel",
         "confirmLoading",
         "cancelText",
@@ -13678,7 +13699,7 @@ var Modal = function(_param) {
     var isMobile2 = (0, import_react_use5.useMedia)("(max-width: 768px)");
     if (isMobile2 && !modalOnly && !isNotification) {
         var drawerContent = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_vaul2.Drawer.Content, {
-            className: cn("fixed inset-x-0 bottom-0 z-50 h-auto overflow-hidden no-scrollbar border-Colors-Border-Opaque bg-Colors-Background-Utilities-Modal shadow-modal-default focus:outline-none", fullScreen ? "rounded-t-none max-h-full" : "rounded-t-md max-h-[85vh]", contentClassName),
+            className: cn("fixed inset-x-0 bottom-0 z-50 h-auto overflow-hidden no-scrollbar border-Colors-Border-Opaque bg-Colors-Background-Utilities-Modal shadow-modal-default backdrop-blur-xl focus:outline-none", fullScreen ? "rounded-t-none max-h-full" : "rounded-t-md max-h-[85vh]", contentClassName),
             onOpenAutoFocus: function(e) {
                 !autoFocus && e.preventDefault();
             },
@@ -13742,6 +13763,10 @@ var Modal = function(_param) {
     }
     var renderIcon3 = function(state2) {
         switch(state2){
+            case "basic":
+                return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react12.UserPenIcon, {
+                    className: "text-Colors-Foreground-Default w-6 h-6"
+                });
             case "info":
                 return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react12.InfoIcon, {
                     className: "text-cc-Icon-Featured-icon-fg-Info w-6 h-6"
@@ -13762,18 +13787,20 @@ var Modal = function(_param) {
     };
     var getBackgroundColor = function(state2) {
         switch(state2){
+            case "basic":
+                return "bg-Colors-Background-Surface-Subtle";
             case "info":
-                return "bg-Colors-Background-Info-Default";
+                return "bg-cc-Icon-Featured-icon-bg-Info";
             case "success":
-                return "bg-Colors-Background-Success-Default";
+                return "bg-cc-Icon-Featured-icon-bg-Success";
             case "warning":
-                return "bg-Colors-Background-Warning-Default";
+                return "bg-cc-Icon-Featured-icon-bg-Warning";
             case "error":
-                return "bg-Colors-Background-Critical-Default";
+                return "bg-cc-Icon-Featured-icon-bg-Error";
         }
     };
     var dialogContent = /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(ModalContent, {
-        className: cn("rounded-md border-Colors-Border-Opaque bg-Colors-Background-Utilities-Modal shadow-modal-default overflow-hidden", !isMobile2 ? modalVariants({
+        className: cn("rounded-md border-Colors-Border-Opaque bg-Colors-Background-Utilities-Modal shadow-modal-default backdrop-blur-xl overflow-hidden", !isMobile2 ? modalVariants({
             size: size,
             zIndex: zIndex
         }) : isLogin ? "w-[90%]" : "w-[80%]", isNotification && "w-[312px] md:w-[380px]", contentClassName),
@@ -13791,7 +13818,7 @@ var Modal = function(_param) {
                         className: cn(isNotification && "border-none !pb-3"),
                         children: state && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", {
                             className: cn("flex items-center justify-center w-10 h-10 rounded-full flex-shrink-0 flex-grow-0", getBackgroundColor(state)),
-                            children: renderIcon3(state)
+                            children: icon || renderIcon3(state)
                         })
                     }),
                     /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", {
@@ -13977,7 +14004,7 @@ function SearchBar(_param) {
                 hasEnter: true,
                 rounded: roundedFill ? "full" : "sm",
                 size: size,
-                className: cn("relative w-full px-9 flex space-x-2 text-base shadow-none placeholder:text-Colors-Text-Subtlest", "bg-cc-Search-Bar-bg-default focus-visible-style", {
+                className: cn("relative w-full px-9 flex space-x-2 text-base shadow-none placeholder:text-Colors-Text-Subtlest", "focus-visible-style", {
                     "focus-visible:ring-transparent": readOnly
                 }, inputClassName),
                 value: value1,
@@ -14559,7 +14586,7 @@ var SelectContent = React42.forwardRef(function(_param, ref) {
     ]);
     var Content13 = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectPrimitive.Content, _object_spread_props(_object_spread({
         ref: ref,
-        className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-sm border border-Colors-Border-Default bg-Colors-Background-Utilities-Modal text-Colors-Text-Default shadow-modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
+        className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-sm border border-Colors-Border-Default bg-cc-Dropdown-bg-default text-Colors-Text-Default shadow-modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
         position: position
     }, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(SelectPrimitive.Viewport, {
@@ -14620,7 +14647,7 @@ var SelectItem = React42.forwardRef(function(_param, ref) {
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(SelectPrimitive.Item, _object_spread_props(_object_spread({
         ref: ref,
-        className: cn("relative flex justify-between w-full cursor-pointer select-none items-center rounded-sm py-1 px-1.5 outline-none text-base", "hover:bg-Colors-Background-Neutral-Secondary-Hover focus:bg-Colors-Background-Neutral-Secondary-Hover data-[disabled]:opacity-30 data-[disabled]:cursor-not-allowed space-x-1.5", critical ? "text-Colors-Text-Critical-Default" : "focus:text-Colors-Text-Default", className)
+        className: cn("relative flex justify-between w-full cursor-pointer select-none items-center rounded-sm py-1 px-1.5 outline-none text-base", "hover:bg-cc-Dropdown-bg-hover focus:bg-cc-Dropdown-bg-hover data-[disabled]:opacity-30 data-[disabled]:cursor-not-allowed space-x-1.5", critical ? "text-Colors-Text-Critical-Default" : "focus:text-Colors-Text-Default", className)
     }, props), {
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", {
@@ -15195,7 +15222,7 @@ var MultipleSelector = React43.forwardRef(function(param, ref) {
                     return e.stopPropagation();
                 },
                 children: open && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(CommandList, {
-                    className: "no-scrollbar text-Colors-Text-Default absolute top-1 z-10 max-h-60 w-full min-w-[8rem] rounded-sm border border-cc-Input-bg-default bg-Colors-Background-Normal-Primary-Default shadow-modal-default",
+                    className: "no-scrollbar text-Colors-Text-Default absolute top-1 z-10 max-h-60 w-full min-w-[8rem] rounded-sm border border-cc-Input-bg-default bg-cc-Dropdown-bg-default shadow-modal-default",
                     onMouseLeave: function() {
                         setOnScrollbar(false);
                     },
@@ -15393,7 +15420,7 @@ function Skeleton(_param) {
         "animate"
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", _object_spread({
-        className: cn("rounded-sm bg-Colors-Background-Normal-Secondary-Hover", className, animate && "animate-pulse")
+        className: cn("rounded-sm bg-Colors-Background-Surface-Muted", className, animate && "animate-pulse")
     }, props));
 }
 // src/components/slider.tsx
@@ -25879,13 +25906,13 @@ var ToastViewport = React51.forwardRef(function(_param, ref) {
     }, props));
 });
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
-var toastVariants = (0, import_class_variance_authority21.cva)("group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-sm border border-Colors-Border-Opaque p-6 pr-8 shadow-modal-default transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 max-w-md", {
+var toastVariants = (0, import_class_variance_authority21.cva)("group pointer-events-auto relative flex w-[286px] min-w-[286px] max-w-[286px] items-start gap-3 overflow-hidden rounded-lg border border-cc-Toast-border bg-cc-Toast-bg-default p-3 backdrop-blur-[20px] shadow-modal-default transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80", {
     variants: {
         variant: {
-            info: "bg-Colors-Background-Utilities-Modal p-4",
-            warning: "bg-Colors-Background-Utilities-Modal p-4",
-            error: "bg-Colors-Background-Utilities-Modal p-4",
-            success: "bg-Colors-Background-Utilities-Modal p-4"
+            info: "",
+            warning: "",
+            error: "",
+            success: ""
         },
         position: {
             "top-left": "data-[state=open]:slide-in-from-left-full data-[state=closed]:slide-out-to-left-full",
@@ -25935,11 +25962,11 @@ var ToastClose = React51.forwardRef(function(_param, ref) {
     ]);
     return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ToastPrimitives.Close, _object_spread_props(_object_spread({
         ref: ref,
-        className: cn("absolute right-4 top-4 rounded-sm p-1 text-slate-950/50 transition-opacity hover:text-slate-950 outline-none focus:outline-none focus:ring-2 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 dark:text-slate-50/50 dark:hover:text-slate-50", className),
+        className: cn("absolute size-5 right-3 top-3 rounded-full p-1 text-cc-Button-Tertiary-fg-default hover:text-cc-Button-Tertiary-fg-alt bg-cc-Button-Tertiary-bg-default hover:bg-cc-Button-Tertiary-bg-hover transition-opacity outline-none focus:outline-none focus:ring-2 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600 ", className),
         "toast-close": ""
     }, props), {
         children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(import_lucide_react19.XIcon, {
-            className: "h-5 w-5"
+            className: "h-3 w-3 text-cc-Button-Tertiary-fg-default"
         })
     }));
 });
@@ -26172,37 +26199,37 @@ function Toaster() {
         position
     ]);
     var renderToast = function(toast4) {
-        var id = toast4.id, title = toast4.title, description = toast4.description, action = toast4.action, variant = toast4.variant, toastPosition = toast4.position;
+        var id = toast4.id, title = toast4.title, description = toast4.description, action = toast4.action, variant = toast4.variant, icon = toast4.icon, toastPosition = toast4.position;
         var renderIcon3 = function(variant2) {
             switch(variant2){
                 case "info":
                     return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react20.InfoIcon, {
-                        className: "h-6 w-6 text-cc-Icon-Featured-icon-fg-Info"
+                        className: "h-6 w-6 sm:h-4.5 sm:w-4.5 text-cc-Icon-Featured-icon-fg-Info"
                     });
                 case "success":
                     return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react20.CircleCheckIcon, {
-                        className: "h-6 w-6 text-cc-Icon-Featured-icon-fg-Success"
+                        className: "h-6 w-6 sm:h-4.5 sm:w-4.5 text-cc-Icon-Featured-icon-fg-Success"
                     });
                 case "warning":
                     return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react20.TriangleAlertIcon, {
-                        className: "h-6 w-6 text-cc-Icon-Featured-icon-fg-Warning"
+                        className: "h-6 w-6 sm:h-4.5 sm:w-4.5 text-cc-Icon-Featured-icon-fg-Warning"
                     });
                 case "error":
                     return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_lucide_react20.CircleXIcon, {
-                        className: "h-6 w-6 text-cc-Icon-Featured-icon-fg-Error"
+                        className: "h-6 w-6 sm:h-4.5 sm:w-4.5 text-cc-Icon-Featured-icon-fg-Error"
                     });
             }
         };
         var getBackgroundColor = function(variant2) {
             switch(variant2){
                 case "info":
-                    return "bg-Colors-Background-Info-Default";
+                    return "bg-cc-Icon-Featured-icon-bg-Info";
                 case "success":
-                    return "bg-Colors-Background-Success-Default";
+                    return "bg-cc-Icon-Featured-icon-bg-Success";
                 case "warning":
-                    return "bg-Colors-Background-Warning-Default";
+                    return "bg-cc-Icon-Featured-icon-bg-Warning";
                 case "error":
-                    return "bg-Colors-Background-Critical-Default";
+                    return "bg-cc-Icon-Featured-icon-bg-Error";
             }
         };
         return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Toast, _object_spread_props(_object_spread({}, toast4), {
@@ -26214,18 +26241,18 @@ function Toaster() {
                         className: "flex items-start gap-3",
                         children: [
                             /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", {
-                                className: cn("flex h-10 w-10 flex-shrink-0 flex-grow-0 items-center justify-center rounded-full", getBackgroundColor(variant)),
-                                children: renderIcon3(variant)
+                                className: cn("flex h-10 w-10 sm:h-8 sm:w-8 flex-shrink-0 flex-grow-0 items-center justify-center rounded-full", getBackgroundColor(variant)),
+                                children: icon || renderIcon3(variant)
                             }),
                             /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", {
                                 className: "grid gap-1",
                                 children: [
                                     title && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ToastTitle, {
-                                        className: "text-base text-Colors-Text-Default",
+                                        className: "text-base text-cc-Toast-fg-default",
                                         children: title
                                     }),
                                     description && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ToastDescription, {
-                                        className: "text-sm text-Colors-Text-Subtle",
+                                        className: "text-sm text-cc-Toast-fg-subtle",
                                         children: description
                                     }),
                                     action
@@ -26264,7 +26291,7 @@ var import_free_mode = require("swiper/css/free-mode");
 var import_grid = require("swiper/css/grid");
 var import_pagination = require("swiper/css/pagination");
 // src/components/swiper/index.module.scss
-var index_module_default = '.swiperBox {\n  @apply w-full h-fit;\n}\n.swiperBox :global(.swiper) :global(.swiper-button-prev) {\n  @apply bg-contain bg-no-repeat;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzQxNDM0NSIgY2xhc3M9InNpemUtNSI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzggNS4yMmEuNzUuNzUgMCAwIDEgMCAxLjA2TDguMDYgMTBsMy43MiAzLjcyYS43NS43NSAwIDEgMS0xLjA2IDEuMDZsLTQuMjUtNC4yNWEuNzUuNzUgMCAwIDEgMC0xLjA2bDQuMjUtNC4yNWEuNzUuNzUgMCAwIDEgMS4wNiAwWiIgY2xpcC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K");\n}\n.swiperBox :global(.swiper) :global(.swiper-button-next) {\n  @apply bg-contain bg-no-repeat;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzQxNDM0NSIgY2xhc3M9InNpemUtNSI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4yMiA1LjIyYS43NS43NSAwIDAgMSAxLjA2IDBsNC4yNSA0LjI1YS43NS43NSAwIDAgMSAwIDEuMDZsLTQuMjUgNC4yNWEuNzUuNzUgMCAwIDEtMS4wNi0xLjA2TDExLjk0IDEwIDguMjIgNi4yOGEuNzUuNzUgMCAwIDEgMC0xLjA2WiIgY2xpcC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4KCg==");\n}\n.swiperBox :global(.swiper) :global(.swiper-button-prev::after) {\n  @apply text-Colors-Foreground-Default content-none;\n}\n.swiperBox :global(.swiper) :global(.swiper-button-next::after) {\n  @apply text-Colors-Foreground-Default content-none;\n}\n.swiperBox :global(.swiper.banner-swiper) :global(.banner-swiper-slide.swiper-slide-prev) {\n  @apply origin-right;\n}\n.swiperBox :global(.swiper.banner-swiper) :global(.banner-swiper-slide.swiper-slide-next) {\n  @apply origin-left;\n}\n.swiperBox :global(.swiper.banner-swiper) :global(.swiper-slide-active) {\n  @apply opacity-100;\n}\n.swiperBox :global(.swiper.banner-swiper) :global(.swiper-button-next) {\n  @apply -right-4 md:right-0 3xl:right-[calc((100%-1200px)/2-16px)];\n}\n.swiperBox :global(.swiper.banner-swiper) :global(.swiper-button-prev) {\n  @apply -left-4 md:left-0 3xl:left-[calc((100%-1200px)/2-16px)];\n}\n.swiperBox :global(.swiper.feature-swiper) :global(.swiper-button-next) {\n  @apply right-0;\n}\n.swiperBox :global(.swiper.feature-swiper) :global(.swiper-button-prev) {\n  @apply left-0;\n}\n.swiperBox :global(.swiper.feature-swiper) :global(.swiper-button-disabled) {\n  @apply hidden;\n}\n.swiperBox :global(.swiper.patron-badge-swiper) :global(.swiper-button-next) {\n  @apply right-0;\n}\n.swiperBox :global(.swiper.patron-badge-swiper) :global(.swiper-button-prev) {\n  @apply left-0;\n}\n.swiperBox :global(.swiper.patron-badge-swiper) :global(.swiper-button-disabled) {\n  @apply hidden;\n}\n.swiperBox :global(.swiper.grid-swiper) :global(.swiper-wrapper) {\n  @apply w-[100vw] md:w-full flex-wrap flex-col m-0;\n}\n.swiperBox :global(.swiper) :global(.swiper-button-next) {\n  @apply hidden md:flex justify-center items-center absolute top-[50%] w-8 h-8 font-semibold text-Colors-Foreground-Default border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Default rounded-full cursor-pointer hover:bg-Colors-Background-Normal-Primary-Hover active:bg-Colors-Background-Normal-Primary-Active;\n}\n.swiperBox :global(.swiper) :global(.swiper-button-next)::after {\n  @apply text-Colors-Foreground-Default text-xs font-bold;\n}\n.swiperBox :global(.swiper) :global(.swiper-button-prev) {\n  @apply hidden md:flex justify-center items-center absolute top-[50%] w-8 h-8 font-semibold text-Colors-Foreground-Default border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Default rounded-full cursor-pointer hover:bg-Colors-Background-Normal-Primary-Hover active:bg-Colors-Background-Normal-Primary-Active;\n}\n.swiperBox :global(.swiper) :global(.swiper-button-prev)::after {\n  @apply text-Colors-Foreground-Default text-xs font-bold;\n}\n\n.animate :global(.swiper-slide) {\n  transition: transform 500ms linear;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL3hpYW9ndWFuZy9jb2RlL215c2hlbGwtcmVhY3QtbGliL3NyYy9jb21wb25lbnRzL3N3aXBlciIsInNvdXJjZXMiOlsiaW5kZXgubW9kdWxlLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7RUFDRTs7QUFHRTtFQUNFO0VBQ0E7O0FBRUY7RUFDRTtFQUNBOztBQUVGO0VBQ0U7O0FBRUY7RUFDRTs7QUFJRjtFQUVFOztBQUVGO0VBRUU7O0FBRUY7RUFDRTs7QUFHRjtFQUNFOztBQUVGO0VBQ0U7O0FBSUY7RUFDRTs7QUFFRjtFQUNFOztBQUVGO0VBQ0U7O0FBSUY7RUFDRTs7QUFFRjtFQUNFOztBQUVGO0VBQ0U7O0FBSUY7RUFDRTs7QUFLRjtFQUNFOztBQUNFO0VBQ0U7O0FBR047RUFDRTs7QUFDRTtFQUNFOzs7QUFPUjtFQUNFIiwic291cmNlc0NvbnRlbnQiOlsiLnN3aXBlckJveHtcbiAgQGFwcGx5IHctZnVsbCBoLWZpdDtcbiAgXG4gIDpnbG9iYWwoLnN3aXBlcikge1xuICAgIDpnbG9iYWwoLnN3aXBlci1idXR0b24tcHJldil7XG4gICAgICBAYXBwbHkgYmctY29udGFpbiBiZy1uby1yZXBlYXQ7XG4gICAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJ2RhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0F5TUNBeU1DSWdabWxzYkQwaUl6UXhORE0wTlNJZ1kyeGhjM005SW5OcGVtVXROU0krQ2lBZ1BIQmhkR2dnWm1sc2JDMXlkV3hsUFNKbGRtVnViMlJrSWlCa1BTSk5NVEV1TnpnZ05TNHlNbUV1TnpVdU56VWdNQ0F3SURFZ01DQXhMakEyVERndU1EWWdNVEJzTXk0M01pQXpMamN5WVM0M05TNDNOU0F3SURFZ01TMHhMakEySURFdU1EWnNMVFF1TWpVdE5DNHlOV0V1TnpVdU56VWdNQ0F3SURFZ01DMHhMakEyYkRRdU1qVXROQzR5TldFdU56VXVOelVnTUNBd0lERWdNUzR3TmlBd1dpSWdZMnhwY0MxeWRXeGxQU0psZG1WdWIyUmtJaUF2UGdvOEwzTjJaejRLJyk7IFxuICAgIH1cbiAgICA6Z2xvYmFsKC5zd2lwZXItYnV0dG9uLW5leHQpe1xuICAgICAgQGFwcGx5IGJnLWNvbnRhaW4gYmctbm8tcmVwZWF0O1xuICAgICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCdkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MGlhSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY2lJSFpwWlhkQ2IzZzlJakFnTUNBeU1DQXlNQ0lnWm1sc2JEMGlJelF4TkRNME5TSWdZMnhoYzNNOUluTnBlbVV0TlNJK0NpQWdQSEJoZEdnZ1ptbHNiQzF5ZFd4bFBTSmxkbVZ1YjJSa0lpQmtQU0pOT0M0eU1pQTFMakl5WVM0M05TNDNOU0F3SURBZ01TQXhMakEySURCc05DNHlOU0EwTGpJMVlTNDNOUzQzTlNBd0lEQWdNU0F3SURFdU1EWnNMVFF1TWpVZ05DNHlOV0V1TnpVdU56VWdNQ0F3SURFdE1TNHdOaTB4TGpBMlRERXhMamswSURFd0lEZ3VNaklnTmk0eU9HRXVOelV1TnpVZ01DQXdJREVnTUMweExqQTJXaUlnWTJ4cGNDMXlkV3hsUFNKbGRtVnViMlJrSWlBdlBnbzhMM04yWno0S0NnPT0nKTsgXG4gICAgfVxuICAgIDpnbG9iYWwoLnN3aXBlci1idXR0b24tcHJldjo6YWZ0ZXIpe1xuICAgICAgQGFwcGx5IHRleHQtQ29sb3JzLUZvcmVncm91bmQtRGVmYXVsdCBjb250ZW50LW5vbmU7XG4gICAgfVxuICAgIDpnbG9iYWwoLnN3aXBlci1idXR0b24tbmV4dDo6YWZ0ZXIpe1xuICAgICAgQGFwcGx5IHRleHQtQ29sb3JzLUZvcmVncm91bmQtRGVmYXVsdCBjb250ZW50LW5vbmU7XG4gICAgfVxuICB9XG4gIDpnbG9iYWwoLnN3aXBlci5iYW5uZXItc3dpcGVyKSB7XG4gICAgOmdsb2JhbCguYmFubmVyLXN3aXBlci1zbGlkZS5zd2lwZXItc2xpZGUtcHJldikge1xuICAgICAgLy8gdHJhbnNmb3JtOiBzY2FsZSgwLjgpO1xuICAgICAgQGFwcGx5IG9yaWdpbi1yaWdodDtcbiAgICB9XG4gICAgOmdsb2JhbCguYmFubmVyLXN3aXBlci1zbGlkZS5zd2lwZXItc2xpZGUtbmV4dCkge1xuICAgICAgLy8gdHJhbnNmb3JtOiBzY2FsZSgwLjgpO1xuICAgICAgQGFwcGx5IG9yaWdpbi1sZWZ0O1xuICAgIH1cbiAgICA6Z2xvYmFsKC5zd2lwZXItc2xpZGUtYWN0aXZlKSB7XG4gICAgICBAYXBwbHkgb3BhY2l0eS0xMDA7XG4gICAgICAvLyB0cmFuc2Zvcm06IHNjYWxlKDEpIHRyYW5zbGF0ZVgoMCk7XG4gICAgfVxuICAgIDpnbG9iYWwoLnN3aXBlci1idXR0b24tbmV4dCl7XG4gICAgICBAYXBwbHkgLXJpZ2h0LTQgbWQ6cmlnaHQtMCAzeGw6cmlnaHQtW2NhbGMoKDEwMCUtMTIwMHB4KS8yLTE2cHgpXTtcbiAgICB9XG4gICAgOmdsb2JhbCguc3dpcGVyLWJ1dHRvbi1wcmV2KXtcbiAgICAgIEBhcHBseSAtbGVmdC00IG1kOmxlZnQtMCAzeGw6bGVmdC1bY2FsYygoMTAwJS0xMjAwcHgpLzItMTZweCldO1xuICAgIH1cbiAgfVxuICA6Z2xvYmFsKC5zd2lwZXIuZmVhdHVyZS1zd2lwZXIpIHtcbiAgICA6Z2xvYmFsKC5zd2lwZXItYnV0dG9uLW5leHQpe1xuICAgICAgQGFwcGx5IHJpZ2h0LTA7XG4gICAgfVxuICAgIDpnbG9iYWwoLnN3aXBlci1idXR0b24tcHJldil7XG4gICAgICBAYXBwbHkgbGVmdC0wO1xuICAgIH1cbiAgICA6Z2xvYmFsKC5zd2lwZXItYnV0dG9uLWRpc2FibGVkKSB7XG4gICAgICBAYXBwbHkgaGlkZGVuO1xuICAgIH1cbiAgfVxuICA6Z2xvYmFsKC5zd2lwZXIucGF0cm9uLWJhZGdlLXN3aXBlcikge1xuICAgIDpnbG9iYWwoLnN3aXBlci1idXR0b24tbmV4dCl7XG4gICAgICBAYXBwbHkgcmlnaHQtMDtcbiAgICB9XG4gICAgOmdsb2JhbCguc3dpcGVyLWJ1dHRvbi1wcmV2KXtcbiAgICAgIEBhcHBseSBsZWZ0LTA7XG4gICAgfVxuICAgIDpnbG9iYWwoLnN3aXBlci1idXR0b24tZGlzYWJsZWQpIHtcbiAgICAgIEBhcHBseSBoaWRkZW47XG4gICAgfVxuICB9XG4gIDpnbG9iYWwoLnN3aXBlci5ncmlkLXN3aXBlcikge1xuICAgIDpnbG9iYWwoLnN3aXBlci13cmFwcGVyKSB7XG4gICAgICBAYXBwbHkgdy1bMTAwdnddIG1kOnctZnVsbCBmbGV4LXdyYXAgZmxleC1jb2wgbS0wO1xuICAgIH1cbiAgfVxuICA6Z2xvYmFsKC5zd2lwZXIpIHtcbiAgICBcbiAgICA6Z2xvYmFsKC5zd2lwZXItYnV0dG9uLW5leHQpe1xuICAgICAgQGFwcGx5IGhpZGRlbiBtZDpmbGV4IGp1c3RpZnktY2VudGVyIGl0ZW1zLWNlbnRlciBhYnNvbHV0ZSB0b3AtWzUwJV0gdy04IGgtOCBmb250LXNlbWlib2xkIHRleHQtQ29sb3JzLUZvcmVncm91bmQtRGVmYXVsdCBib3JkZXIgYm9yZGVyLUNvbG9ycy1Cb3JkZXItRGVmYXVsdCBiZy1Db2xvcnMtQmFja2dyb3VuZC1Ob3JtYWwtUHJpbWFyeS1EZWZhdWx0IHJvdW5kZWQtZnVsbCBjdXJzb3ItcG9pbnRlciBob3ZlcjpiZy1Db2xvcnMtQmFja2dyb3VuZC1Ob3JtYWwtUHJpbWFyeS1Ib3ZlciBhY3RpdmU6YmctQ29sb3JzLUJhY2tncm91bmQtTm9ybWFsLVByaW1hcnktQWN0aXZlO1xuICAgICAgICAmOjphZnRlciB7XG4gICAgICAgICAgQGFwcGx5IHRleHQtQ29sb3JzLUZvcmVncm91bmQtRGVmYXVsdCB0ZXh0LXhzIGZvbnQtYm9sZDtcbiAgICAgICAgfVxuICAgICAgfVxuICAgIDpnbG9iYWwoLnN3aXBlci1idXR0b24tcHJldil7XG4gICAgICBAYXBwbHkgaGlkZGVuIG1kOmZsZXgganVzdGlmeS1jZW50ZXIgaXRlbXMtY2VudGVyIGFic29sdXRlIHRvcC1bNTAlXSB3LTggaC04IGZvbnQtc2VtaWJvbGQgdGV4dC1Db2xvcnMtRm9yZWdyb3VuZC1EZWZhdWx0IGJvcmRlciBib3JkZXItQ29sb3JzLUJvcmRlci1EZWZhdWx0IGJnLUNvbG9ycy1CYWNrZ3JvdW5kLU5vcm1hbC1QcmltYXJ5LURlZmF1bHQgcm91bmRlZC1mdWxsIGN1cnNvci1wb2ludGVyIGhvdmVyOmJnLUNvbG9ycy1CYWNrZ3JvdW5kLU5vcm1hbC1QcmltYXJ5LUhvdmVyIGFjdGl2ZTpiZy1Db2xvcnMtQmFja2dyb3VuZC1Ob3JtYWwtUHJpbWFyeS1BY3RpdmU7XG4gICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICBAYXBwbHkgdGV4dC1Db2xvcnMtRm9yZWdyb3VuZC1EZWZhdWx0IHRleHQteHMgZm9udC1ib2xkO1xuICAgICAgfVxuICAgIH1cbiAgfVxufVxuXG4uYW5pbWF0ZSB7XG4gIDpnbG9iYWwoLnN3aXBlci1zbGlkZSkge1xuICAgIHRyYW5zaXRpb246IHRyYW5zZm9ybSA1MDBtcyBsaW5lYXI7XG4gIH1cbn1cbiJdfQ== */';
+var index_module_default = '.swiperBox {\n  @apply w-full h-fit;\n}\n.swiperBox :global(.swiper) :global(.swiper-button-prev) {\n  @apply bg-contain bg-no-repeat;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzQxNDM0NSIgY2xhc3M9InNpemUtNSI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNMTEuNzggNS4yMmEuNzUuNzUgMCAwIDEgMCAxLjA2TDguMDYgMTBsMy43MiAzLjcyYS43NS43NSAwIDEgMS0xLjA2IDEuMDZsLTQuMjUtNC4yNWEuNzUuNzUgMCAwIDEgMC0xLjA2bDQuMjUtNC4yNWEuNzUuNzUgMCAwIDEgMS4wNiAwWiIgY2xpcC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4K");\n}\n.swiperBox :global(.swiper) :global(.swiper-button-next) {\n  @apply bg-contain bg-no-repeat;\n  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0iIzQxNDM0NSIgY2xhc3M9InNpemUtNSI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNOC4yMiA1LjIyYS43NS43NSAwIDAgMSAxLjA2IDBsNC4yNSA0LjI1YS43NS43NSAwIDAgMSAwIDEuMDZsLTQuMjUgNC4yNWEuNzUuNzUgMCAwIDEtMS4wNi0xLjA2TDExLjk0IDEwIDguMjIgNi4yOGEuNzUuNzUgMCAwIDEgMC0xLjA2WiIgY2xpcC1ydWxlPSJldmVub2RkIiAvPgo8L3N2Zz4KCg==");\n}\n.swiperBox :global(.swiper) :global(.swiper-button-prev::after) {\n  @apply text-Colors-Foreground-Default content-none;\n}\n.swiperBox :global(.swiper) :global(.swiper-button-next::after) {\n  @apply text-Colors-Foreground-Default content-none;\n}\n.swiperBox :global(.swiper.banner-swiper) :global(.banner-swiper-slide.swiper-slide-prev) {\n  @apply origin-right;\n}\n.swiperBox :global(.swiper.banner-swiper) :global(.banner-swiper-slide.swiper-slide-next) {\n  @apply origin-left;\n}\n.swiperBox :global(.swiper.banner-swiper) :global(.swiper-slide-active) {\n  @apply opacity-100;\n}\n.swiperBox :global(.swiper.banner-swiper) :global(.swiper-button-next) {\n  @apply -right-4 md:right-0 3xl:right-[calc((100%-1200px)/2-16px)];\n}\n.swiperBox :global(.swiper.banner-swiper) :global(.swiper-button-prev) {\n  @apply -left-4 md:left-0 3xl:left-[calc((100%-1200px)/2-16px)];\n}\n.swiperBox :global(.swiper.feature-swiper) :global(.swiper-button-next) {\n  @apply right-0;\n}\n.swiperBox :global(.swiper.feature-swiper) :global(.swiper-button-prev) {\n  @apply left-0;\n}\n.swiperBox :global(.swiper.feature-swiper) :global(.swiper-button-disabled) {\n  @apply hidden;\n}\n.swiperBox :global(.swiper.patron-badge-swiper) :global(.swiper-button-next) {\n  @apply right-0;\n}\n.swiperBox :global(.swiper.patron-badge-swiper) :global(.swiper-button-prev) {\n  @apply left-0;\n}\n.swiperBox :global(.swiper.patron-badge-swiper) :global(.swiper-button-disabled) {\n  @apply hidden;\n}\n.swiperBox :global(.swiper.grid-swiper) :global(.swiper-wrapper) {\n  @apply w-[100vw] md:w-full flex-wrap flex-col m-0;\n}\n.swiperBox :global(.swiper) :global(.swiper-button-next) {\n  @apply hidden md:flex justify-center items-center absolute top-[50%] w-8 h-8 font-semibold text-Colors-Foreground-Default border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Default rounded-full cursor-pointer hover:bg-Colors-Background-Normal-Primary-Hover active:bg-Colors-Background-Normal-Primary-Active;\n}\n.swiperBox :global(.swiper) :global(.swiper-button-next)::after {\n  @apply text-Colors-Foreground-Default text-xs font-bold;\n}\n.swiperBox :global(.swiper) :global(.swiper-button-prev) {\n  @apply hidden md:flex justify-center items-center absolute top-[50%] w-8 h-8 font-semibold text-Colors-Foreground-Default border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Default rounded-full cursor-pointer hover:bg-Colors-Background-Normal-Primary-Hover active:bg-Colors-Background-Normal-Primary-Active;\n}\n.swiperBox :global(.swiper) :global(.swiper-button-prev)::after {\n  @apply text-Colors-Foreground-Default text-xs font-bold;\n}\n\n.animate :global(.swiper-slide) {\n  transition: transform 500ms linear;\n}\n/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VSb290IjoiL1VzZXJzL21vbmljYS9EZXNrdG9wL215c2hlbGwvbXlzaGVsbC1yZWFjdC1saWIvc3JjL2NvbXBvbmVudHMvc3dpcGVyIiwic291cmNlcyI6WyJpbmRleC5tb2R1bGUuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNFOztBQUdFO0VBQ0U7RUFDQTs7QUFFRjtFQUNFO0VBQ0E7O0FBRUY7RUFDRTs7QUFFRjtFQUNFOztBQUlGO0VBRUU7O0FBRUY7RUFFRTs7QUFFRjtFQUNFOztBQUdGO0VBQ0U7O0FBRUY7RUFDRTs7QUFJRjtFQUNFOztBQUVGO0VBQ0U7O0FBRUY7RUFDRTs7QUFJRjtFQUNFOztBQUVGO0VBQ0U7O0FBRUY7RUFDRTs7QUFJRjtFQUNFOztBQUtGO0VBQ0U7O0FBQ0U7RUFDRTs7QUFHTjtFQUNFOztBQUNFO0VBQ0U7OztBQU9SO0VBQ0UiLCJzb3VyY2VzQ29udGVudCI6WyIuc3dpcGVyQm94e1xuICBAYXBwbHkgdy1mdWxsIGgtZml0O1xuICBcbiAgOmdsb2JhbCguc3dpcGVyKSB7XG4gICAgOmdsb2JhbCguc3dpcGVyLWJ1dHRvbi1wcmV2KXtcbiAgICAgIEBhcHBseSBiZy1jb250YWluIGJnLW5vLXJlcGVhdDtcbiAgICAgIGJhY2tncm91bmQtaW1hZ2U6IHVybCgnZGF0YTppbWFnZS9zdmcreG1sO2Jhc2U2NCxQSE4yWnlCNGJXeHVjejBpYUhSMGNEb3ZMM2QzZHk1M015NXZjbWN2TWpBd01DOXpkbWNpSUhacFpYZENiM2c5SWpBZ01DQXlNQ0F5TUNJZ1ptbHNiRDBpSXpReE5ETTBOU0lnWTJ4aGMzTTlJbk5wZW1VdE5TSStDaUFnUEhCaGRHZ2dabWxzYkMxeWRXeGxQU0psZG1WdWIyUmtJaUJrUFNKTk1URXVOemdnTlM0eU1tRXVOelV1TnpVZ01DQXdJREVnTUNBeExqQTJURGd1TURZZ01UQnNNeTQzTWlBekxqY3lZUzQzTlM0M05TQXdJREVnTVMweExqQTJJREV1TURac0xUUXVNalV0TkM0eU5XRXVOelV1TnpVZ01DQXdJREVnTUMweExqQTJiRFF1TWpVdE5DNHlOV0V1TnpVdU56VWdNQ0F3SURFZ01TNHdOaUF3V2lJZ1kyeHBjQzF5ZFd4bFBTSmxkbVZ1YjJSa0lpQXZQZ284TDNOMlp6NEsnKTsgXG4gICAgfVxuICAgIDpnbG9iYWwoLnN3aXBlci1idXR0b24tbmV4dCl7XG4gICAgICBAYXBwbHkgYmctY29udGFpbiBiZy1uby1yZXBlYXQ7XG4gICAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJ2RhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIWnBaWGRDYjNnOUlqQWdNQ0F5TUNBeU1DSWdabWxzYkQwaUl6UXhORE0wTlNJZ1kyeGhjM005SW5OcGVtVXROU0krQ2lBZ1BIQmhkR2dnWm1sc2JDMXlkV3hsUFNKbGRtVnViMlJrSWlCa1BTSk5PQzR5TWlBMUxqSXlZUzQzTlM0M05TQXdJREFnTVNBeExqQTJJREJzTkM0eU5TQTBMakkxWVM0M05TNDNOU0F3SURBZ01TQXdJREV1TURac0xUUXVNalVnTkM0eU5XRXVOelV1TnpVZ01DQXdJREV0TVM0d05pMHhMakEyVERFeExqazBJREV3SURndU1qSWdOaTR5T0dFdU56VXVOelVnTUNBd0lERWdNQzB4TGpBMldpSWdZMnhwY0MxeWRXeGxQU0psZG1WdWIyUmtJaUF2UGdvOEwzTjJaejRLQ2c9PScpOyBcbiAgICB9XG4gICAgOmdsb2JhbCguc3dpcGVyLWJ1dHRvbi1wcmV2OjphZnRlcil7XG4gICAgICBAYXBwbHkgdGV4dC1Db2xvcnMtRm9yZWdyb3VuZC1EZWZhdWx0IGNvbnRlbnQtbm9uZTtcbiAgICB9XG4gICAgOmdsb2JhbCguc3dpcGVyLWJ1dHRvbi1uZXh0OjphZnRlcil7XG4gICAgICBAYXBwbHkgdGV4dC1Db2xvcnMtRm9yZWdyb3VuZC1EZWZhdWx0IGNvbnRlbnQtbm9uZTtcbiAgICB9XG4gIH1cbiAgOmdsb2JhbCguc3dpcGVyLmJhbm5lci1zd2lwZXIpIHtcbiAgICA6Z2xvYmFsKC5iYW5uZXItc3dpcGVyLXNsaWRlLnN3aXBlci1zbGlkZS1wcmV2KSB7XG4gICAgICAvLyB0cmFuc2Zvcm06IHNjYWxlKDAuOCk7XG4gICAgICBAYXBwbHkgb3JpZ2luLXJpZ2h0O1xuICAgIH1cbiAgICA6Z2xvYmFsKC5iYW5uZXItc3dpcGVyLXNsaWRlLnN3aXBlci1zbGlkZS1uZXh0KSB7XG4gICAgICAvLyB0cmFuc2Zvcm06IHNjYWxlKDAuOCk7XG4gICAgICBAYXBwbHkgb3JpZ2luLWxlZnQ7XG4gICAgfVxuICAgIDpnbG9iYWwoLnN3aXBlci1zbGlkZS1hY3RpdmUpIHtcbiAgICAgIEBhcHBseSBvcGFjaXR5LTEwMDtcbiAgICAgIC8vIHRyYW5zZm9ybTogc2NhbGUoMSkgdHJhbnNsYXRlWCgwKTtcbiAgICB9XG4gICAgOmdsb2JhbCguc3dpcGVyLWJ1dHRvbi1uZXh0KXtcbiAgICAgIEBhcHBseSAtcmlnaHQtNCBtZDpyaWdodC0wIDN4bDpyaWdodC1bY2FsYygoMTAwJS0xMjAwcHgpLzItMTZweCldO1xuICAgIH1cbiAgICA6Z2xvYmFsKC5zd2lwZXItYnV0dG9uLXByZXYpe1xuICAgICAgQGFwcGx5IC1sZWZ0LTQgbWQ6bGVmdC0wIDN4bDpsZWZ0LVtjYWxjKCgxMDAlLTEyMDBweCkvMi0xNnB4KV07XG4gICAgfVxuICB9XG4gIDpnbG9iYWwoLnN3aXBlci5mZWF0dXJlLXN3aXBlcikge1xuICAgIDpnbG9iYWwoLnN3aXBlci1idXR0b24tbmV4dCl7XG4gICAgICBAYXBwbHkgcmlnaHQtMDtcbiAgICB9XG4gICAgOmdsb2JhbCguc3dpcGVyLWJ1dHRvbi1wcmV2KXtcbiAgICAgIEBhcHBseSBsZWZ0LTA7XG4gICAgfVxuICAgIDpnbG9iYWwoLnN3aXBlci1idXR0b24tZGlzYWJsZWQpIHtcbiAgICAgIEBhcHBseSBoaWRkZW47XG4gICAgfVxuICB9XG4gIDpnbG9iYWwoLnN3aXBlci5wYXRyb24tYmFkZ2Utc3dpcGVyKSB7XG4gICAgOmdsb2JhbCguc3dpcGVyLWJ1dHRvbi1uZXh0KXtcbiAgICAgIEBhcHBseSByaWdodC0wO1xuICAgIH1cbiAgICA6Z2xvYmFsKC5zd2lwZXItYnV0dG9uLXByZXYpe1xuICAgICAgQGFwcGx5IGxlZnQtMDtcbiAgICB9XG4gICAgOmdsb2JhbCguc3dpcGVyLWJ1dHRvbi1kaXNhYmxlZCkge1xuICAgICAgQGFwcGx5IGhpZGRlbjtcbiAgICB9XG4gIH1cbiAgOmdsb2JhbCguc3dpcGVyLmdyaWQtc3dpcGVyKSB7XG4gICAgOmdsb2JhbCguc3dpcGVyLXdyYXBwZXIpIHtcbiAgICAgIEBhcHBseSB3LVsxMDB2d10gbWQ6dy1mdWxsIGZsZXgtd3JhcCBmbGV4LWNvbCBtLTA7XG4gICAgfVxuICB9XG4gIDpnbG9iYWwoLnN3aXBlcikge1xuICAgIFxuICAgIDpnbG9iYWwoLnN3aXBlci1idXR0b24tbmV4dCl7XG4gICAgICBAYXBwbHkgaGlkZGVuIG1kOmZsZXgganVzdGlmeS1jZW50ZXIgaXRlbXMtY2VudGVyIGFic29sdXRlIHRvcC1bNTAlXSB3LTggaC04IGZvbnQtc2VtaWJvbGQgdGV4dC1Db2xvcnMtRm9yZWdyb3VuZC1EZWZhdWx0IGJvcmRlciBib3JkZXItQ29sb3JzLUJvcmRlci1EZWZhdWx0IGJnLUNvbG9ycy1CYWNrZ3JvdW5kLU5vcm1hbC1QcmltYXJ5LURlZmF1bHQgcm91bmRlZC1mdWxsIGN1cnNvci1wb2ludGVyIGhvdmVyOmJnLUNvbG9ycy1CYWNrZ3JvdW5kLU5vcm1hbC1QcmltYXJ5LUhvdmVyIGFjdGl2ZTpiZy1Db2xvcnMtQmFja2dyb3VuZC1Ob3JtYWwtUHJpbWFyeS1BY3RpdmU7XG4gICAgICAgICY6OmFmdGVyIHtcbiAgICAgICAgICBAYXBwbHkgdGV4dC1Db2xvcnMtRm9yZWdyb3VuZC1EZWZhdWx0IHRleHQteHMgZm9udC1ib2xkO1xuICAgICAgICB9XG4gICAgICB9XG4gICAgOmdsb2JhbCguc3dpcGVyLWJ1dHRvbi1wcmV2KXtcbiAgICAgIEBhcHBseSBoaWRkZW4gbWQ6ZmxleCBqdXN0aWZ5LWNlbnRlciBpdGVtcy1jZW50ZXIgYWJzb2x1dGUgdG9wLVs1MCVdIHctOCBoLTggZm9udC1zZW1pYm9sZCB0ZXh0LUNvbG9ycy1Gb3JlZ3JvdW5kLURlZmF1bHQgYm9yZGVyIGJvcmRlci1Db2xvcnMtQm9yZGVyLURlZmF1bHQgYmctQ29sb3JzLUJhY2tncm91bmQtTm9ybWFsLVByaW1hcnktRGVmYXVsdCByb3VuZGVkLWZ1bGwgY3Vyc29yLXBvaW50ZXIgaG92ZXI6YmctQ29sb3JzLUJhY2tncm91bmQtTm9ybWFsLVByaW1hcnktSG92ZXIgYWN0aXZlOmJnLUNvbG9ycy1CYWNrZ3JvdW5kLU5vcm1hbC1QcmltYXJ5LUFjdGl2ZTtcbiAgICAgICAgJjo6YWZ0ZXIge1xuICAgICAgICAgIEBhcHBseSB0ZXh0LUNvbG9ycy1Gb3JlZ3JvdW5kLURlZmF1bHQgdGV4dC14cyBmb250LWJvbGQ7XG4gICAgICB9XG4gICAgfVxuICB9XG59XG5cbi5hbmltYXRlIHtcbiAgOmdsb2JhbCguc3dpcGVyLXNsaWRlKSB7XG4gICAgdHJhbnNpdGlvbjogdHJhbnNmb3JtIDUwMG1zIGxpbmVhcjtcbiAgfVxufVxuIl19 */';
 // src/components/swiper/index.tsx
 var import_jsx_runtime71 = require("react/jsx-runtime");
 var swiperVariants = (0, import_class_variance_authority22.cva)("", {
@@ -26442,25 +26469,25 @@ function CustomNotification(param) {
     return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", {
         children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", {
             id: id,
-            className: "z-[10000000] min-h-10 w-fit max-w-[90vw] rounded-full border border-Colors-Border-Opaque bg-Colors-Background-Utilities-Modal px-3 py-2 shadow-modal-default md:max-w-[560px]",
+            className: "z-[10000000] min-h-10 w-fit max-w-[90vw] rounded-full border border-cc-Popover-border bg-Colors-Background-Utilities-Modal px-3 py-2 shadow-modal-default md:max-w-[560px]",
             children: /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", {
                 className: "flex w-full items-center justify-center gap-2",
                 children: [
                     loading && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Spinner, {}),
                     !loading && type && /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", {
-                        className: "flex flex-shrink-0 items-center",
+                        className: "flex flex-shrink-0 items-center justify-center",
                         children: [
                             type === "info" && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(CircleInfoIcon, {
-                                className: "h-6 w-6 text-cc-Icon-Featured-icon-fg-Info"
+                                className: "h-6 w-6 text-cc-Icon-Featured-icon-fg-Info items-center justify-center sm:h-4.5 sm:w-4.5"
                             }),
                             type === "success" && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(CircleSuccessIcon, {
-                                className: "h-6 w-6 text-cc-Icon-Featured-icon-fg-Success"
+                                className: "h-6 w-6 text-cc-Icon-Featured-icon-fg-Success items-center justify-center sm:h-4.5 sm:w-4.5"
                             }),
                             type === "warning" && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(CircleWarningIcon, {
-                                className: "h-6 w-6 text-cc-Icon-Featured-icon-fg-Warning"
+                                className: "h-6 w-6 text-cc-Icon-Featured-icon-fg-Warning items-center justify-center sm:h-4.5 sm:w-4.5"
                             }),
                             type === "error" && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(CircleErrorIcon, {
-                                className: "h-6 w-6 text-cc-Icon-Featured-icon-fg-Error"
+                                className: "h-6 w-6 text-cc-Icon-Featured-icon-fg-Error items-center justify-center sm:h-4.5 sm:w-4.5"
                             })
                         ]
                     }),