@seekho/ui 0.1.34 → 0.1.36

package/dist/index.d.mts

@@ -243,6 +243,16 @@ interface StagingAlertProps {
 }
 declare const StagingAlert: ({ liveUrl, liveLinkText, }: StagingAlertProps) => react_jsx_runtime.JSX.Element;
 
+interface SelectOptionData {
+    value: string | number;
+    label: React.ReactNode;
+    disabled: boolean;
+}
+interface SelectRenderOptionProps {
+    onMouseDown: () => void;
+    onMouseEnter: () => void;
+    className: string;
+}
 interface SelectProps {
     value: string | number;
     onChange: (e: {
@@ -256,8 +266,10 @@ interface SelectProps {
     size?: "small" | "medium" | "large";
     error?: boolean;
     className?: string;
+    renderOption?: (props: SelectRenderOptionProps, option: SelectOptionData) => React.ReactNode;
+    renderValue?: (option: SelectOptionData | null) => React.ReactNode;
 }
-declare const Select: ({ value, onChange, children, disabled, placeholder, size, error, className, }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const Select: ({ value, onChange, children, disabled, placeholder, size, error, className, renderOption, renderValue, }: SelectProps) => react_jsx_runtime.JSX.Element;
 
 interface SelectOptionProps {
     value: string | number;
@@ -338,4 +350,4 @@ declare const handleCopyTextToClipboard: ({ clipboardText, }: {
     clipboardText: string | number | null | undefined;
 }) => Promise<boolean>;
 
-export { Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, AutoComplete, type AutoCompleteProps, Breadcrumb, type BreadcrumbProps, ButtonLoader, type ButtonLoaderProps, Chip, type ChipProps, CopyId, type CopyIdProps, CustomAnchor, type CustomAnchorProps, CustomInput, type CustomInputProps, Drawer, type DrawerAnchor, type DrawerProps, FilterDrawer, type FilterDrawerProps, InputTitleWithRequired, type InputTitleWithRequiredProps, Menu, MenuDivider, MenuItem, type MenuItemProps, type MenuProps, Modal, type ModalProps, type MonthYear, MonthYearPicker, type MonthYearPickerProps, Pagination, type PaginationProps, ReadMore, type ReadMoreProps, SearchBar, type SearchBarProps, Select, SelectOption, type SelectOptionProps, type SelectProps, StagingAlert, type StagingAlertProps, Switch, type SwitchProps, Tab, type TabProps, Tabs, type TabsProps, Tooltip, type TooltipPlacement, type TooltipProps, cn, handleAllyProps, handleCopyTextToClipboard, useLocalStorage };
+export { Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, AutoComplete, type AutoCompleteProps, Breadcrumb, type BreadcrumbProps, ButtonLoader, type ButtonLoaderProps, Chip, type ChipProps, CopyId, type CopyIdProps, CustomAnchor, type CustomAnchorProps, CustomInput, type CustomInputProps, Drawer, type DrawerAnchor, type DrawerProps, FilterDrawer, type FilterDrawerProps, InputTitleWithRequired, type InputTitleWithRequiredProps, Menu, MenuDivider, MenuItem, type MenuItemProps, type MenuProps, Modal, type ModalProps, type MonthYear, MonthYearPicker, type MonthYearPickerProps, Pagination, type PaginationProps, ReadMore, type ReadMoreProps, SearchBar, type SearchBarProps, Select, SelectOption, type SelectOptionData, type SelectOptionProps, type SelectProps, type SelectRenderOptionProps, StagingAlert, type StagingAlertProps, Switch, type SwitchProps, Tab, type TabProps, Tabs, type TabsProps, Tooltip, type TooltipPlacement, type TooltipProps, cn, handleAllyProps, handleCopyTextToClipboard, useLocalStorage };

package/dist/index.d.ts

@@ -243,6 +243,16 @@ interface StagingAlertProps {
 }
 declare const StagingAlert: ({ liveUrl, liveLinkText, }: StagingAlertProps) => react_jsx_runtime.JSX.Element;
 
+interface SelectOptionData {
+    value: string | number;
+    label: React.ReactNode;
+    disabled: boolean;
+}
+interface SelectRenderOptionProps {
+    onMouseDown: () => void;
+    onMouseEnter: () => void;
+    className: string;
+}
 interface SelectProps {
     value: string | number;
     onChange: (e: {
@@ -256,8 +266,10 @@ interface SelectProps {
     size?: "small" | "medium" | "large";
     error?: boolean;
     className?: string;
+    renderOption?: (props: SelectRenderOptionProps, option: SelectOptionData) => React.ReactNode;
+    renderValue?: (option: SelectOptionData | null) => React.ReactNode;
 }
-declare const Select: ({ value, onChange, children, disabled, placeholder, size, error, className, }: SelectProps) => react_jsx_runtime.JSX.Element;
+declare const Select: ({ value, onChange, children, disabled, placeholder, size, error, className, renderOption, renderValue, }: SelectProps) => react_jsx_runtime.JSX.Element;
 
 interface SelectOptionProps {
     value: string | number;
@@ -338,4 +350,4 @@ declare const handleCopyTextToClipboard: ({ clipboardText, }: {
     clipboardText: string | number | null | undefined;
 }) => Promise<boolean>;
 
-export { Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, AutoComplete, type AutoCompleteProps, Breadcrumb, type BreadcrumbProps, ButtonLoader, type ButtonLoaderProps, Chip, type ChipProps, CopyId, type CopyIdProps, CustomAnchor, type CustomAnchorProps, CustomInput, type CustomInputProps, Drawer, type DrawerAnchor, type DrawerProps, FilterDrawer, type FilterDrawerProps, InputTitleWithRequired, type InputTitleWithRequiredProps, Menu, MenuDivider, MenuItem, type MenuItemProps, type MenuProps, Modal, type ModalProps, type MonthYear, MonthYearPicker, type MonthYearPickerProps, Pagination, type PaginationProps, ReadMore, type ReadMoreProps, SearchBar, type SearchBarProps, Select, SelectOption, type SelectOptionProps, type SelectProps, StagingAlert, type StagingAlertProps, Switch, type SwitchProps, Tab, type TabProps, Tabs, type TabsProps, Tooltip, type TooltipPlacement, type TooltipProps, cn, handleAllyProps, handleCopyTextToClipboard, useLocalStorage };
+export { Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, AutoComplete, type AutoCompleteProps, Breadcrumb, type BreadcrumbProps, ButtonLoader, type ButtonLoaderProps, Chip, type ChipProps, CopyId, type CopyIdProps, CustomAnchor, type CustomAnchorProps, CustomInput, type CustomInputProps, Drawer, type DrawerAnchor, type DrawerProps, FilterDrawer, type FilterDrawerProps, InputTitleWithRequired, type InputTitleWithRequiredProps, Menu, MenuDivider, MenuItem, type MenuItemProps, type MenuProps, Modal, type ModalProps, type MonthYear, MonthYearPicker, type MonthYearPickerProps, Pagination, type PaginationProps, ReadMore, type ReadMoreProps, SearchBar, type SearchBarProps, Select, SelectOption, type SelectOptionData, type SelectOptionProps, type SelectProps, type SelectRenderOptionProps, StagingAlert, type StagingAlertProps, Switch, type SwitchProps, Tab, type TabProps, Tabs, type TabsProps, Tooltip, type TooltipPlacement, type TooltipProps, cn, handleAllyProps, handleCopyTextToClipboard, useLocalStorage };

package/dist/index.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var React10 = require('react');
+var React8 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var ReactDOM = require('react-dom');
 var reactHotkeysHook = require('react-hotkeys-hook');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React10__default = /*#__PURE__*/_interopDefault(React10);
+var React8__default = /*#__PURE__*/_interopDefault(React8);
 var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
 
 var __defProp = Object.defineProperty;
@@ -41,9 +41,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-var AccordionContext = React10.createContext(null);
+var AccordionContext = React8.createContext(null);
 var useAccordion = () => {
-  const ctx = React10.useContext(AccordionContext);
+  const ctx = React8.useContext(AccordionContext);
   if (!ctx)
     throw new Error(
       "AccordionSummary / AccordionDetails must be used inside <Accordion>"
@@ -59,7 +59,7 @@ var Accordion = ({
   variant = "outlined",
   className
 }) => {
-  const [internalExpanded, setInternalExpanded] = React10.useState(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = React8.useState(defaultExpanded);
   const isControlled = controlledExpanded !== void 0;
   const isExpanded = isControlled ? controlledExpanded : internalExpanded;
   const handleToggle = () => {
@@ -231,14 +231,14 @@ function AutoComplete({
   onChange,
   onInputChange
 }) {
-  const inputId = React10.useId();
-  const containerRef = React10.useRef(null);
-  const listRef = React10.useRef(null);
-  const [open, setOpen] = React10.useState(false);
-  const [inputValue, setInputValue] = React10.useState(
+  const inputId = React8.useId();
+  const containerRef = React8.useRef(null);
+  const listRef = React8.useRef(null);
+  const [open, setOpen] = React8.useState(false);
+  const [inputValue, setInputValue] = React8.useState(
     value ? getOptionLabel(value) : ""
   );
-  const [highlightedIndex, setHighlightedIndex] = React10.useState(-1);
+  const [highlightedIndex, setHighlightedIndex] = React8.useState(-1);
   const filteredOptions = options.filter(
     (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
   );
@@ -277,10 +277,10 @@ function AutoComplete({
     if (!value) return false;
     return isOptionEqualToValue ? isOptionEqualToValue(option, value) : getOptionLabel(option) === getOptionLabel(value);
   };
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     setInputValue(value ? getOptionLabel(value) : "");
   }, [value]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     const handleClickOutside = (e) => {
       if (containerRef.current && !containerRef.current.contains(e.target)) {
         setOpen(false);
@@ -457,7 +457,7 @@ function AutoComplete({
                   isSelected({ option }) ? "font-semibold" : ""
                 ].join(" ")
               };
-              return renderOption ? /* @__PURE__ */ jsxRuntime.jsx(React10__default.default.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsxRuntime.jsx(
+              return renderOption ? /* @__PURE__ */ jsxRuntime.jsx(React8__default.default.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsxRuntime.jsx(
                 "li",
                 {
                   onMouseDown: () => handleSelect({ option }),
@@ -700,7 +700,7 @@ var CustomAnchor = ({
     }
   );
 };
-var CustomInput = React10__default.default.forwardRef(
+var CustomInput = React8__default.default.forwardRef(
   (_a, ref) => {
     var _b = _a, { label: _label, error, className, type } = _b, props = __objRest(_b, ["label", "error", "className", "type"]);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -741,13 +741,13 @@ var Drawer = ({
   className,
   onClose
 }) => {
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     document.body.style.overflow = open ? "hidden" : "";
     return () => {
       document.body.style.overflow = "";
     };
   }, [open]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "Escape" && open) onClose();
     };
@@ -904,19 +904,19 @@ var Menu = ({
   align = "left",
   className = ""
 }) => {
-  const menuRef = React10.useRef(null);
-  const onCloseRef = React10.useRef(onClose);
-  React10.useEffect(() => {
+  const menuRef = React8.useRef(null);
+  const onCloseRef = React8.useRef(onClose);
+  React8.useEffect(() => {
     onCloseRef.current = onClose;
   });
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     if (!open || !anchorEl) return;
     const id = requestAnimationFrame(() => {
       if (menuRef.current) reposition(menuRef.current, anchorEl, align);
     });
     return () => cancelAnimationFrame(id);
   }, [open, anchorEl, align]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     if (!open || !anchorEl) return;
     const update = () => {
       if (menuRef.current) reposition(menuRef.current, anchorEl, align);
@@ -928,7 +928,7 @@ var Menu = ({
       window.removeEventListener("resize", update);
     };
   }, [open, anchorEl, align]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     if (!open) return;
     const handleKey = (e) => {
       if (e.key === "Escape") onCloseRef.current();
@@ -936,7 +936,7 @@ var Menu = ({
     document.addEventListener("keydown", handleKey);
     return () => document.removeEventListener("keydown", handleKey);
   }, [open]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     if (!open) return;
     const handleMouseDown = (e) => {
       var _a;
@@ -1024,8 +1024,8 @@ function Modal({
   handleConfirmation,
   handleConfirmationBtnText = "Confirm"
 }) {
-  const modalId = React10.useId();
-  React10.useEffect(() => {
+  const modalId = React8.useId();
+  React8.useEffect(() => {
     if (show) handlePushModal({ id: modalId });
     return () => handlePopModal({ id: modalId });
   }, [show, modalId]);
@@ -1259,9 +1259,9 @@ var MonthYearPicker = ({
   triggerClassName,
   dropdownClassName
 }) => {
-  const [isOpen, setIsOpen] = React10.useState(false);
-  const [pickerYear, setPickerYear] = React10.useState(year);
-  const ref = React10.useRef(null);
+  const [isOpen, setIsOpen] = React8.useState(false);
+  const [pickerYear, setPickerYear] = React8.useState(year);
+  const ref = React8.useRef(null);
   const now = /* @__PURE__ */ new Date();
   const currentMonth = now.getMonth() + 1;
   const currentYear = now.getFullYear();
@@ -1294,10 +1294,10 @@ var MonthYearPicker = ({
     if (maxDate && pickerYear >= maxDate.year) return true;
     return false;
   };
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     setPickerYear(year);
   }, [year]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     const handleClickOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) {
         setIsOpen(false);
@@ -1872,10 +1872,10 @@ var StagingAlert = ({
     ] })
   ] });
 };
-var sizeStyles = {
-  small: { padding: "4px 10px", fontSize: "13px" },
-  medium: { padding: "7px 14px", fontSize: "16px" },
-  large: { padding: "10px 16px", fontSize: "16px" }
+var sizeConfig = {
+  small: { py: "7px", px: "10px", fontSize: "13px" },
+  medium: { py: "11px", px: "14px", fontSize: "14px" },
+  large: { py: "14px", px: "14px", fontSize: "16px" }
 };
 var Select = ({
   value,
@@ -1885,14 +1885,16 @@ var Select = ({
   placeholder = "Select...",
   size = "medium",
   error = false,
-  className = ""
+  className = "",
+  renderOption,
+  renderValue
 }) => {
-  const [isOpen, setIsOpen] = React10.useState(false);
-  const [dropdownStyle, setDropdownStyle] = React10.useState({});
-  const [focusedIndex, setFocusedIndex] = React10.useState(-1);
-  const triggerRef = React10.useRef(null);
-  const dropdownRef = React10.useRef(null);
-  const options = React10__default.default.Children.toArray(children).filter(Boolean).map((child) => {
+  const [isOpen, setIsOpen] = React8.useState(false);
+  const [dropdownStyle, setDropdownStyle] = React8.useState({});
+  const [focusedIndex, setFocusedIndex] = React8.useState(-1);
+  const triggerRef = React8.useRef(null);
+  const dropdownRef = React8.useRef(null);
+  const options = React8__default.default.Children.toArray(children).filter(Boolean).map((child) => {
     var _a, _b, _c, _d, _e;
     const c = child;
     return {
@@ -1904,7 +1906,7 @@ var Select = ({
   const selectedOption = options.find(
     (opt) => String(opt.value) === String(value)
   );
-  const computePosition = React10.useCallback(() => {
+  const computePosition = React8.useCallback(() => {
     if (!triggerRef.current) return;
     const rect = triggerRef.current.getBoundingClientRect();
     const dropdownHeight = Math.min(options.length * 40, 240);
@@ -1918,7 +1920,7 @@ var Select = ({
       zIndex: 9999
     }));
   }, [options.length]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     const handleClickOutside = (e) => {
       if (triggerRef.current && !triggerRef.current.contains(e.target) && (!dropdownRef.current || !dropdownRef.current.contains(e.target))) {
         setIsOpen(false);
@@ -1928,7 +1930,7 @@ var Select = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
@@ -1962,13 +1964,13 @@ var Select = ({
     document.addEventListener("keydown", handleKeyDown);
     return () => document.removeEventListener("keydown", handleKeyDown);
   }, [isOpen, focusedIndex, options, onChange]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     if (focusedIndex >= 0 && dropdownRef.current) {
       const item = dropdownRef.current.children[focusedIndex];
       item == null ? void 0 : item.scrollIntoView({ block: "nearest" });
     }
   }, [focusedIndex]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     if (!isOpen) return;
     window.addEventListener("scroll", computePosition, true);
     window.addEventListener("resize", computePosition);
@@ -1993,29 +1995,32 @@ var Select = ({
     setIsOpen(false);
     setFocusedIndex(-1);
   };
-  const borderColor = error ? "#ef4444" : isOpen ? "#534f8f" : "rgba(0,0,0,0.23)";
-  const { padding, fontSize } = sizeStyles[size];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${className}`, ref: triggerRef, children: [
+  const { py, px, fontSize } = sizeConfig[size];
+  const borderColor = error ? "#ef4444" : isOpen ? "var(--color-skprimary, #6b31bf)" : "#d1d5db";
+  const borderWidth = isOpen ? "2px" : "1px";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative w-full ${className}`, ref: triggerRef, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
         type: "button",
         disabled,
         onClick: handleOpen,
-        className: "w-full flex items-center justify-between rounded-md bg-white text-left outline-none disabled:opacity-50 disabled:cursor-not-allowed",
-        style: { padding, border: `1px solid ${borderColor}`, transition: "border-color 0.15s ease" },
+        className: "w-full flex items-center justify-between rounded-md bg-white text-left outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+        style: { padding: `${py} ${px}`, border: `${borderWidth} solid ${borderColor}` },
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1", style: { fontSize }, children: selectedOption ? selectedOption.label : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: placeholder }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate flex-1 text-gray-800", style: { fontSize }, children: renderValue ? renderValue(selectedOption != null ? selectedOption : null) : selectedOption ? selectedOption.label : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-gray-400", children: placeholder }) }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
-              width: "18",
-              height: "18",
+              className: `w-4 h-4 shrink-0 ml-2 text-gray-400 transition-transform duration-150 ${isOpen ? "rotate-180" : ""}`,
               viewBox: "0 0 24 24",
-              fill: "currentColor",
-              className: `shrink-0 ml-2 text-gray-400 transition-transform duration-150 ${isOpen ? "rotate-180" : ""}`,
-              children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" })
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" })
             }
           )
         ]
@@ -2028,15 +2033,18 @@ var Select = ({
           ref: dropdownRef,
           style: dropdownStyle,
           className: "bg-white shadow-lg rounded-md border border-gray-200 max-h-60 overflow-y-auto",
-          children: options.map((opt, i) => /* @__PURE__ */ jsxRuntime.jsx(
-            "li",
-            {
-              onClick: () => handleSelect(opt),
-              className: `px-4 py-2 text-[14px] ${opt.disabled ? "text-gray-400 cursor-not-allowed" : String(opt.value) === String(value) ? "bg-purple-100 text-[#534f8f] font-medium cursor-pointer" : focusedIndex === i ? "bg-gray-100 text-gray-800 cursor-pointer" : "text-gray-800 hover:bg-gray-50 cursor-pointer"}`,
-              children: opt.label
-            },
-            i
-          ))
+          children: options.map((opt, i) => {
+            const optionProps = {
+              onMouseDown: () => handleSelect(opt),
+              onMouseEnter: () => !opt.disabled && setFocusedIndex(i),
+              className: [
+                "px-3 py-2 text-[13px] select-none",
+                opt.disabled ? "text-gray-400 cursor-not-allowed" : focusedIndex === i ? "bg-skprimary/10 text-skprimary cursor-pointer" : "text-gray-700 cursor-pointer",
+                String(opt.value) === String(value) ? "font-semibold" : ""
+              ].join(" ")
+            };
+            return renderOption ? /* @__PURE__ */ jsxRuntime.jsx(React8__default.default.Fragment, { children: renderOption(optionProps, opt) }, i) : /* @__PURE__ */ jsxRuntime.jsx("li", __spreadProps(__spreadValues({}, optionProps), { children: opt.label }), i);
+          })
         }
       ),
       document.body
@@ -2106,12 +2114,12 @@ function Tabs({
   className,
   "aria-label": ariaLabel
 }) {
-  const listRef = React10.useRef(null);
-  const [canScrollLeft, setCanScrollLeft] = React10.useState(false);
-  const [canScrollRight, setCanScrollRight] = React10.useState(false);
-  const tabRefs = React10.useRef([]);
-  const tabs = React10.Children.toArray(children).filter(
-    React10.isValidElement
+  const listRef = React8.useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = React8.useState(false);
+  const [canScrollRight, setCanScrollRight] = React8.useState(false);
+  const tabRefs = React8.useRef([]);
+  const tabs = React8.Children.toArray(children).filter(
+    React8.isValidElement
   );
   function resolveIndex(val) {
     var _a;
@@ -2122,13 +2130,13 @@ function Tabs({
     return -1;
   }
   const selectedIndex = resolveIndex(value);
-  const updateScrollState = React10.useCallback(() => {
+  const updateScrollState = React8.useCallback(() => {
     const el = listRef.current;
     if (!el) return;
     setCanScrollLeft(el.scrollLeft > 0);
     setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
   }, []);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     const el = listRef.current;
     if (!el) return;
     updateScrollState();
@@ -2140,7 +2148,7 @@ function Tabs({
       ro.disconnect();
     };
   }, [updateScrollState]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     const el = tabRefs.current[selectedIndex];
     el == null ? void 0 : el.scrollIntoView({
       block: "nearest",
@@ -2195,7 +2203,7 @@ function Tabs({
           var _a;
           const tabValue = (_a = tab.props.value) != null ? _a : i;
           const selected = tabValue === value;
-          return React10.cloneElement(tab, {
+          return React8.cloneElement(tab, {
             key: i,
             selected,
             onChange: (e) => {
@@ -2316,14 +2324,14 @@ function Tooltip({
   className,
   disabled = false
 }) {
-  const [visible, setVisible] = React10.useState(false);
-  const triggerRef = React10.useRef(null);
-  const tooltipRef = React10.useRef(null);
-  const enterTimer = React10.useRef(null);
-  const leaveTimer = React10.useRef(null);
+  const [visible, setVisible] = React8.useState(false);
+  const triggerRef = React8.useRef(null);
+  const tooltipRef = React8.useRef(null);
+  const enterTimer = React8.useRef(null);
+  const leaveTimer = React8.useRef(null);
   const isControlled = controlledOpen !== void 0;
   const show = isControlled ? controlledOpen : visible;
-  const positionAndShow = React10.useCallback(() => {
+  const positionAndShow = React8.useCallback(() => {
     const tooltip = tooltipRef.current;
     const trigger2 = triggerRef.current;
     if (!tooltip || !trigger2) return;
@@ -2336,7 +2344,7 @@ function Tooltip({
     tooltip.style.left = `${pos.left}px`;
     tooltip.style.opacity = "1";
   }, [placement]);
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     if (!show) {
       const tooltip = tooltipRef.current;
       if (tooltip) tooltip.style.opacity = "0";
@@ -2355,15 +2363,15 @@ function Tooltip({
     if (enterTimer.current) clearTimeout(enterTimer.current);
     leaveTimer.current = setTimeout(() => setVisible(false), leaveDelay);
   };
-  React10.useEffect(() => {
+  React8.useEffect(() => {
     return () => {
       if (enterTimer.current) clearTimeout(enterTimer.current);
       if (leaveTimer.current) clearTimeout(leaveTimer.current);
     };
   }, []);
-  if (!React10__default.default.isValidElement(children)) return children;
+  if (!React8__default.default.isValidElement(children)) return children;
   const side = placement.split("-")[0];
-  const trigger = React10__default.default.cloneElement(
+  const trigger = React8__default.default.cloneElement(
     children,
     {
       ref: triggerRef,
@@ -2427,7 +2435,7 @@ function Tooltip({
   ] });
 }
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = React10.useState(() => {
+  const [storedValue, setStoredValue] = React8.useState(() => {
     if (typeof window === "undefined") return initialValue;
     try {
       const item = window.localStorage.getItem(key);

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React10, { createContext, useState, useId, useRef, useEffect, useCallback, Children, isValidElement, cloneElement, useContext } from 'react';
+import React8, { createContext, useState, useId, useRef, useEffect, useCallback, Children, isValidElement, cloneElement, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import ReactDOM, { createPortal } from 'react-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
@@ -450,7 +450,7 @@ function AutoComplete({
                   isSelected({ option }) ? "font-semibold" : ""
                 ].join(" ")
               };
-              return renderOption ? /* @__PURE__ */ jsx(React10.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsx(
+              return renderOption ? /* @__PURE__ */ jsx(React8.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsx(
                 "li",
                 {
                   onMouseDown: () => handleSelect({ option }),
@@ -693,7 +693,7 @@ var CustomAnchor = ({
     }
   );
 };
-var CustomInput = React10.forwardRef(
+var CustomInput = React8.forwardRef(
   (_a, ref) => {
     var _b = _a, { label: _label, error, className, type } = _b, props = __objRest(_b, ["label", "error", "className", "type"]);
     return /* @__PURE__ */ jsx(
@@ -1865,10 +1865,10 @@ var StagingAlert = ({
     ] })
   ] });
 };
-var sizeStyles = {
-  small: { padding: "4px 10px", fontSize: "13px" },
-  medium: { padding: "7px 14px", fontSize: "16px" },
-  large: { padding: "10px 16px", fontSize: "16px" }
+var sizeConfig = {
+  small: { py: "7px", px: "10px", fontSize: "13px" },
+  medium: { py: "11px", px: "14px", fontSize: "14px" },
+  large: { py: "14px", px: "14px", fontSize: "16px" }
 };
 var Select = ({
   value,
@@ -1878,14 +1878,16 @@ var Select = ({
   placeholder = "Select...",
   size = "medium",
   error = false,
-  className = ""
+  className = "",
+  renderOption,
+  renderValue
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [dropdownStyle, setDropdownStyle] = useState({});
   const [focusedIndex, setFocusedIndex] = useState(-1);
   const triggerRef = useRef(null);
   const dropdownRef = useRef(null);
-  const options = React10.Children.toArray(children).filter(Boolean).map((child) => {
+  const options = React8.Children.toArray(children).filter(Boolean).map((child) => {
     var _a, _b, _c, _d, _e;
     const c = child;
     return {
@@ -1986,29 +1988,32 @@ var Select = ({
     setIsOpen(false);
     setFocusedIndex(-1);
   };
-  const borderColor = error ? "#ef4444" : isOpen ? "#534f8f" : "rgba(0,0,0,0.23)";
-  const { padding, fontSize } = sizeStyles[size];
-  return /* @__PURE__ */ jsxs("div", { className: `relative ${className}`, ref: triggerRef, children: [
+  const { py, px, fontSize } = sizeConfig[size];
+  const borderColor = error ? "#ef4444" : isOpen ? "var(--color-skprimary, #6b31bf)" : "#d1d5db";
+  const borderWidth = isOpen ? "2px" : "1px";
+  return /* @__PURE__ */ jsxs("div", { className: `relative w-full ${className}`, ref: triggerRef, children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         disabled,
         onClick: handleOpen,
-        className: "w-full flex items-center justify-between rounded-md bg-white text-left outline-none disabled:opacity-50 disabled:cursor-not-allowed",
-        style: { padding, border: `1px solid ${borderColor}`, transition: "border-color 0.15s ease" },
+        className: "w-full flex items-center justify-between rounded-md bg-white text-left outline-none disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
+        style: { padding: `${py} ${px}`, border: `${borderWidth} solid ${borderColor}` },
         children: [
-          /* @__PURE__ */ jsx("span", { className: "truncate flex-1", style: { fontSize }, children: selectedOption ? selectedOption.label : /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: placeholder }) }),
+          /* @__PURE__ */ jsx("span", { className: "truncate flex-1 text-gray-800", style: { fontSize }, children: renderValue ? renderValue(selectedOption != null ? selectedOption : null) : selectedOption ? selectedOption.label : /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: placeholder }) }),
           /* @__PURE__ */ jsx(
             "svg",
             {
               xmlns: "http://www.w3.org/2000/svg",
-              width: "18",
-              height: "18",
+              className: `w-4 h-4 shrink-0 ml-2 text-gray-400 transition-transform duration-150 ${isOpen ? "rotate-180" : ""}`,
               viewBox: "0 0 24 24",
-              fill: "currentColor",
-              className: `shrink-0 ml-2 text-gray-400 transition-transform duration-150 ${isOpen ? "rotate-180" : ""}`,
-              children: /* @__PURE__ */ jsx("path", { d: "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" })
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx("polyline", { points: "6 9 12 15 18 9" })
             }
           )
         ]
@@ -2021,15 +2026,18 @@ var Select = ({
           ref: dropdownRef,
           style: dropdownStyle,
           className: "bg-white shadow-lg rounded-md border border-gray-200 max-h-60 overflow-y-auto",
-          children: options.map((opt, i) => /* @__PURE__ */ jsx(
-            "li",
-            {
-              onClick: () => handleSelect(opt),
-              className: `px-4 py-2 text-[14px] ${opt.disabled ? "text-gray-400 cursor-not-allowed" : String(opt.value) === String(value) ? "bg-purple-100 text-[#534f8f] font-medium cursor-pointer" : focusedIndex === i ? "bg-gray-100 text-gray-800 cursor-pointer" : "text-gray-800 hover:bg-gray-50 cursor-pointer"}`,
-              children: opt.label
-            },
-            i
-          ))
+          children: options.map((opt, i) => {
+            const optionProps = {
+              onMouseDown: () => handleSelect(opt),
+              onMouseEnter: () => !opt.disabled && setFocusedIndex(i),
+              className: [
+                "px-3 py-2 text-[13px] select-none",
+                opt.disabled ? "text-gray-400 cursor-not-allowed" : focusedIndex === i ? "bg-skprimary/10 text-skprimary cursor-pointer" : "text-gray-700 cursor-pointer",
+                String(opt.value) === String(value) ? "font-semibold" : ""
+              ].join(" ")
+            };
+            return renderOption ? /* @__PURE__ */ jsx(React8.Fragment, { children: renderOption(optionProps, opt) }, i) : /* @__PURE__ */ jsx("li", __spreadProps(__spreadValues({}, optionProps), { children: opt.label }), i);
+          })
         }
       ),
       document.body
@@ -2354,9 +2362,9 @@ function Tooltip({
       if (leaveTimer.current) clearTimeout(leaveTimer.current);
     };
   }, []);
-  if (!React10.isValidElement(children)) return children;
+  if (!React8.isValidElement(children)) return children;
   const side = placement.split("-")[0];
-  const trigger = React10.cloneElement(
+  const trigger = React8.cloneElement(
     children,
     {
       ref: triggerRef,

package/dist/styles.css

@@ -1 +1 @@
-*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-top-\[9px\]{top:-9px}.bottom-0{bottom:0}.bottom-full{bottom:100%}.left-0{left:0}.left-1\/2{left:50%}.left-3{left:.75rem}.left-full{left:100%}.right-0{right:0}.right-full{right:100%}.top-0{top:0}.top-1\/2{top:50%}.top-\[calc\(100\%\+8px\)\]{top:calc(100% + 8px)}.top-full{top:100%}.z-10{z-index:10}.z-50{z-index:50}.z-\[1200\]{z-index:1200}.z-\[9999\]{z-index:9999}.z-\[999\]{z-index:999}.z-\[99\]{z-index:99}.m-0{margin:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.mb-4{margin-bottom:1rem}.ml-0\.5{margin-left:.125rem}.ml-2{margin-left:.5rem}.mr-1{margin-right:.25rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.\!h-\[37px\]{height:37px!important}.h-0{height:0}.h-10{height:2.5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[14px\]{height:14px}.h-\[16px\]{height:16px}.h-\[24px\]{height:24px}.h-\[45px\]{height:45px}.h-full{height:100%}.max-h-56{max-height:14rem}.max-h-60{max-height:15rem}.max-h-\[95vh\]{max-height:95vh}.max-h-full{max-height:100%}.\!min-h-\[37px\]{min-height:37px!important}.w-0{width:0}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-\[14px\]{width:14px}.w-\[16px\]{width:16px}.w-\[20px\]{width:20px}.w-\[240px\]{width:240px}.w-\[24px\]{width:24px}.w-\[300px\]{width:300px}.w-\[500px\]{width:500px}.w-\[95\%\]{width:95%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[1\.75rem\]{min-width:1.75rem}.min-w-\[2\.5rem\]{min-width:2.5rem}.min-w-\[2rem\]{min-width:2rem}.max-w-\[300px\]{max-width:300px}.max-w-\[calc\(100vw-12px\)\]{max-width:calc(100vw - 12px)}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x:-100%}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-\[0fr\]{grid-template-rows:0fr}.grid-rows-\[1fr\]{grid-template-rows:1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.self-start{align-self:flex-start}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-\[24px\]{border-radius:24px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-b-md{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-green-400{--tw-border-opacity:1;border-color:rgb(74 222 128/var(--tw-border-opacity,1))}.border-orange-400{--tw-border-opacity:1;border-color:rgb(251 146 60/var(--tw-border-opacity,1))}.border-pink-400{--tw-border-opacity:1;border-color:rgb(244 114 182/var(--tw-border-opacity,1))}.border-purple-400{--tw-border-opacity:1;border-color:rgb(192 132 252/var(--tw-border-opacity,1))}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-skprimary{border-color:var(--color-primary,#534f8f)}.border-teal-400{--tw-border-opacity:1;border-color:rgb(45 212 191/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-x-transparent{border-left-color:transparent;border-right-color:transparent}.border-y-transparent{border-top-color:transparent;border-bottom-color:transparent}.border-b-gray-600\/80{border-bottom-color:rgba(75,85,99,.8)}.border-b-transparent{border-bottom-color:transparent}.border-l-gray-600\/80{border-left-color:rgba(75,85,99,.8)}.border-l-transparent{border-left-color:transparent}.border-r-gray-600\/80{border-right-color:rgba(75,85,99,.8)}.border-r-transparent{border-right-color:transparent}.border-t-gray-600\/80{border-top-color:rgba(75,85,99,.8)}.border-t-transparent{border-top-color:transparent}.\!bg-\[\#534f8f\]{--tw-bg-opacity:1!important;background-color:rgb(83 79 143/var(--tw-bg-opacity,1))!important}.\!bg-sksecondary{background-color:var(--color-secondary,#dadbfe)!important}.bg-\[\#ec6c03\]{--tw-bg-opacity:1;background-color:rgb(236 108 3/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-600\/80{background-color:rgba(75,85,99,.8)}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-800\/50{background-color:rgba(31,41,55,.5)}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}.bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.bg-orange-600{--tw-bg-opacity:1;background-color:rgb(234 88 12/var(--tw-bg-opacity,1))}.bg-pink-50{--tw-bg-opacity:1;background-color:rgb(253 242 248/var(--tw-bg-opacity,1))}.bg-pink-600{--tw-bg-opacity:1;background-color:rgb(219 39 119/var(--tw-bg-opacity,1))}.bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity,1))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-skprimary{background-color:var(--color-primary,#534f8f)}.bg-teal-50{--tw-bg-opacity:1;background-color:rgb(240 253 250/var(--tw-bg-opacity,1))}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-0{padding:0}.p-16{padding:4rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.\!px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}.\!px-2{padding-left:.5rem!important;padding-right:.5rem!important}.\!py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.py-\[6px\]{padding-top:6px;padding-bottom:6px}.py-\[8px\]{padding-top:8px;padding-bottom:8px}.pb-3{padding-bottom:.75rem}.text-left{text-align:left}.\!text-\[12px\]{font-size:12px!important}.\!text-\[15px\]{font-size:15px!important}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14\.5px\]{font-size:14.5px}.text-\[14px\]{font-size:14px}.text-\[17px\]{font-size:17px}.text-\[8px\]{font-size:8px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.leading-\[20px\]{line-height:20px}.leading-none{line-height:1}.tracking-wide{letter-spacing:.025em}.text-\[\#333333\]{--tw-text-opacity:1;color:rgb(51 51 51/var(--tw-text-opacity,1))}.text-\[\#534f8f\]{--tw-text-opacity:1;color:rgb(83 79 143/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-pink-500{--tw-text-opacity:1;color:rgb(236 72 153/var(--tw-text-opacity,1))}.text-pink-600{--tw-text-opacity:1;color:rgb(219 39 119/var(--tw-text-opacity,1))}.text-purple-500{--tw-text-opacity:1;color:rgb(168 85 247/var(--tw-text-opacity,1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-skprimary{color:var(--color-primary,#534f8f)}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity,1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-85{opacity:.85}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}#HideScroll{scrollbar-width:none;-ms-overflow-style:none;overflow:-moz-scrollbars-none}#HideScroll::-webkit-scrollbar{width:0;height:0;display:none}#HideScroll::-ms-scrollbar{display:none}.placeholder\:text-\[13px\]::-moz-placeholder{font-size:13px}.placeholder\:text-\[13px\]::placeholder{font-size:13px}.placeholder\:text-gray-500::-moz-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.placeholder\:text-gray-500::placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:bg-green-50:hover{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.hover\:bg-orange-50:hover{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.hover\:bg-pink-50:hover{--tw-bg-opacity:1;background-color:rgb(253 242 248/var(--tw-bg-opacity,1))}.hover\:bg-purple-50:hover{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.hover\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-teal-50:hover{--tw-bg-opacity:1;background-color:rgb(240 253 250/var(--tw-bg-opacity,1))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.hover\:text-gray-800:hover{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.hover\:text-green-600:hover{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.hover\:text-orange-600:hover{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.hover\:text-pink-600:hover{--tw-text-opacity:1;color:rgb(219 39 119/var(--tw-text-opacity,1))}.hover\:text-purple-600:hover{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.hover\:text-red-600:hover{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.hover\:text-skprimary:hover{color:var(--color-primary,#534f8f)}.hover\:text-teal-600:hover{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:no-underline:hover{text-decoration-line:none}.hover\:opacity-100:hover{opacity:1}.hover\:opacity-70:hover{opacity:.7}.focus\:border-skprimary:focus{border-color:var(--color-primary,#534f8f)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-red-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(248 113 113/var(--tw-ring-opacity,1))}.focus\:ring-skprimary:focus{--tw-ring-color:var(--color-primary,#534f8f)}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-inset:focus-visible{--tw-ring-inset:inset}.focus-visible\:ring-skprimary:focus-visible{--tw-ring-color:var(--color-primary,#534f8f)}.focus-visible\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-50:disabled{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}@media (min-width:640px){.sm\:flex{display:flex}}@media (min-width:768px){.md\:w-\[60\%\]{width:60%}}@media (min-width:1024px){.lg\:\!w-\[30\%\]{width:30%!important}.lg\:\!w-\[35\%\]{width:35%!important}.lg\:px-4{padding-left:1rem;padding-right:1rem}.lg\:py-2{padding-top:.5rem;padding-bottom:.5rem}.lg\:text-\[12px\]{font-size:12px}}
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.pointer-events-none{pointer-events:none}.pointer-events-auto{pointer-events:auto}.visible{visibility:visible}.invisible{visibility:hidden}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-top-\[9px\]{top:-9px}.bottom-0{bottom:0}.bottom-full{bottom:100%}.left-0{left:0}.left-1\/2{left:50%}.left-3{left:.75rem}.left-full{left:100%}.right-0{right:0}.right-full{right:100%}.top-0{top:0}.top-1\/2{top:50%}.top-\[calc\(100\%\+8px\)\]{top:calc(100% + 8px)}.top-full{top:100%}.z-10{z-index:10}.z-50{z-index:50}.z-\[1200\]{z-index:1200}.z-\[9999\]{z-index:9999}.z-\[999\]{z-index:999}.z-\[99\]{z-index:99}.m-0{margin:0}.my-1{margin-top:.25rem;margin-bottom:.25rem}.mb-4{margin-bottom:1rem}.ml-0\.5{margin-left:.125rem}.ml-2{margin-left:.5rem}.mr-1{margin-right:.25rem}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.\!h-\[37px\]{height:37px!important}.h-0{height:0}.h-10{height:2.5rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-48{height:12rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.h-7{height:1.75rem}.h-8{height:2rem}.h-\[14px\]{height:14px}.h-\[16px\]{height:16px}.h-\[24px\]{height:24px}.h-\[45px\]{height:45px}.h-full{height:100%}.max-h-56{max-height:14rem}.max-h-60{max-height:15rem}.max-h-\[95vh\]{max-height:95vh}.max-h-full{max-height:100%}.\!min-h-\[37px\]{min-height:37px!important}.w-0{width:0}.w-2{width:.5rem}.w-3{width:.75rem}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-7{width:1.75rem}.w-72{width:18rem}.w-8{width:2rem}.w-80{width:20rem}.w-\[14px\]{width:14px}.w-\[16px\]{width:16px}.w-\[20px\]{width:20px}.w-\[240px\]{width:240px}.w-\[24px\]{width:24px}.w-\[300px\]{width:300px}.w-\[500px\]{width:500px}.w-\[95\%\]{width:95%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[1\.75rem\]{min-width:1.75rem}.min-w-\[2\.5rem\]{min-width:2.5rem}.min-w-\[2rem\]{min-width:2rem}.max-w-\[300px\]{max-width:300px}.max-w-\[calc\(100vw-12px\)\]{max-width:calc(100vw - 12px)}.max-w-sm{max-width:24rem}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:-50%}.-translate-x-1\/2,.-translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-full{--tw-translate-x:-100%}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.-translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.translate-y-full{--tw-translate-y:100%}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}@keyframes spin{to{transform:rotate(1turn)}}.animate-spin{animation:spin 1s linear infinite}.cursor-default{cursor:default}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.resize{resize:both}.list-none{list-style-type:none}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-rows-\[0fr\]{grid-template-rows:0fr}.grid-rows-\[1fr\]{grid-template-rows:1fr}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-x-1\.5{-moz-column-gap:.375rem;column-gap:.375rem}.gap-x-2{-moz-column-gap:.5rem;column-gap:.5rem}.gap-x-3{-moz-column-gap:.75rem;column-gap:.75rem}.space-x-3>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(.75rem*var(--tw-space-x-reverse));margin-left:calc(.75rem*(1 - var(--tw-space-x-reverse)))}.self-start{align-self:flex-start}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-x-auto{overflow-x:auto}.overflow-y-auto{overflow-y:auto}.overflow-x-hidden{overflow-x:hidden}.overflow-y-hidden{overflow-y:hidden}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.break-words{overflow-wrap:break-word}.break-all{word-break:break-all}.rounded{border-radius:.25rem}.rounded-2xl{border-radius:1rem}.rounded-\[24px\]{border-radius:24px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-xl{border-radius:.75rem}.rounded-b-md{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-l-lg{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.rounded-t-lg{border-top-left-radius:.5rem;border-top-right-radius:.5rem}.border{border-width:1px}.border-0{border-width:0}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-b-0{border-bottom-width:0}.border-r-0{border-right-width:0}.border-t{border-top-width:1px}.border-blue-400{--tw-border-opacity:1;border-color:rgb(96 165 250/var(--tw-border-opacity,1))}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246/var(--tw-border-opacity,1))}.border-gray-200{--tw-border-opacity:1;border-color:rgb(229 231 235/var(--tw-border-opacity,1))}.border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.border-green-400{--tw-border-opacity:1;border-color:rgb(74 222 128/var(--tw-border-opacity,1))}.border-orange-400{--tw-border-opacity:1;border-color:rgb(251 146 60/var(--tw-border-opacity,1))}.border-pink-400{--tw-border-opacity:1;border-color:rgb(244 114 182/var(--tw-border-opacity,1))}.border-purple-400{--tw-border-opacity:1;border-color:rgb(192 132 252/var(--tw-border-opacity,1))}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-opacity,1))}.border-red-500{--tw-border-opacity:1;border-color:rgb(239 68 68/var(--tw-border-opacity,1))}.border-skprimary{border-color:var(--color-primary,#534f8f)}.border-teal-400{--tw-border-opacity:1;border-color:rgb(45 212 191/var(--tw-border-opacity,1))}.border-transparent{border-color:transparent}.border-x-transparent{border-left-color:transparent;border-right-color:transparent}.border-y-transparent{border-top-color:transparent;border-bottom-color:transparent}.border-b-gray-600\/80{border-bottom-color:rgba(75,85,99,.8)}.border-b-transparent{border-bottom-color:transparent}.border-l-gray-600\/80{border-left-color:rgba(75,85,99,.8)}.border-l-transparent{border-left-color:transparent}.border-r-gray-600\/80{border-right-color:rgba(75,85,99,.8)}.border-r-transparent{border-right-color:transparent}.border-t-gray-600\/80{border-top-color:rgba(75,85,99,.8)}.border-t-transparent{border-top-color:transparent}.\!bg-\[\#534f8f\]{--tw-bg-opacity:1!important;background-color:rgb(83 79 143/var(--tw-bg-opacity,1))!important}.\!bg-sksecondary{background-color:var(--color-secondary,#dadbfe)!important}.bg-\[\#ec6c03\]{--tw-bg-opacity:1;background-color:rgb(236 108 3/var(--tw-bg-opacity,1))}.bg-black{--tw-bg-opacity:1;background-color:rgb(0 0 0/var(--tw-bg-opacity,1))}.bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity,1))}.bg-gray-100{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.bg-gray-200{--tw-bg-opacity:1;background-color:rgb(229 231 235/var(--tw-bg-opacity,1))}.bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity,1))}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-600\/80{background-color:rgba(75,85,99,.8)}.bg-gray-700{--tw-bg-opacity:1;background-color:rgb(55 65 81/var(--tw-bg-opacity,1))}.bg-gray-800{--tw-bg-opacity:1;background-color:rgb(31 41 55/var(--tw-bg-opacity,1))}.bg-gray-800\/50{background-color:rgba(31,41,55,.5)}.bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 252 231/var(--tw-bg-opacity,1))}.bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74/var(--tw-bg-opacity,1))}.bg-orange-100{--tw-bg-opacity:1;background-color:rgb(255 237 213/var(--tw-bg-opacity,1))}.bg-orange-50{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.bg-orange-600{--tw-bg-opacity:1;background-color:rgb(234 88 12/var(--tw-bg-opacity,1))}.bg-pink-50{--tw-bg-opacity:1;background-color:rgb(253 242 248/var(--tw-bg-opacity,1))}.bg-pink-600{--tw-bg-opacity:1;background-color:rgb(219 39 119/var(--tw-bg-opacity,1))}.bg-purple-50{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247/var(--tw-bg-opacity,1))}.bg-purple-600{--tw-bg-opacity:1;background-color:rgb(147 51 234/var(--tw-bg-opacity,1))}.bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 226 226/var(--tw-bg-opacity,1))}.bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/var(--tw-bg-opacity,1))}.bg-skprimary{background-color:var(--color-primary,#534f8f)}.bg-teal-50{--tw-bg-opacity:1;background-color:rgb(240 253 250/var(--tw-bg-opacity,1))}.bg-teal-600{--tw-bg-opacity:1;background-color:rgb(13 148 136/var(--tw-bg-opacity,1))}.bg-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-0{padding:0}.p-16{padding:4rem}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.\!px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}.\!px-2{padding-left:.5rem!important;padding-right:.5rem!important}.\!py-1{padding-top:.25rem!important;padding-bottom:.25rem!important}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.py-\[6px\]{padding-top:6px;padding-bottom:6px}.py-\[8px\]{padding-top:8px;padding-bottom:8px}.pb-3{padding-bottom:.75rem}.text-left{text-align:left}.\!text-\[12px\]{font-size:12px!important}.\!text-\[15px\]{font-size:15px!important}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[12px\]{font-size:12px}.text-\[13px\]{font-size:13px}.text-\[14\.5px\]{font-size:14.5px}.text-\[14px\]{font-size:14px}.text-\[17px\]{font-size:17px}.text-\[8px\]{font-size:8px}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.italic{font-style:italic}.leading-\[20px\]{line-height:20px}.leading-none{line-height:1}.leading-tight{line-height:1.25}.tracking-wide{letter-spacing:.025em}.text-\[\#333333\]{--tw-text-opacity:1;color:rgb(51 51 51/var(--tw-text-opacity,1))}.text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.text-blue-500{--tw-text-opacity:1;color:rgb(59 130 246/var(--tw-text-opacity,1))}.text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.text-gray-200{--tw-text-opacity:1;color:rgb(229 231 235/var(--tw-text-opacity,1))}.text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity,1))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.text-gray-500{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.text-green-500{--tw-text-opacity:1;color:rgb(34 197 94/var(--tw-text-opacity,1))}.text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.text-orange-500{--tw-text-opacity:1;color:rgb(249 115 22/var(--tw-text-opacity,1))}.text-orange-600{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.text-pink-500{--tw-text-opacity:1;color:rgb(236 72 153/var(--tw-text-opacity,1))}.text-pink-600{--tw-text-opacity:1;color:rgb(219 39 119/var(--tw-text-opacity,1))}.text-purple-500{--tw-text-opacity:1;color:rgb(168 85 247/var(--tw-text-opacity,1))}.text-purple-600{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-red-600{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.text-skprimary{color:var(--color-primary,#534f8f)}.text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity,1))}.text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.opacity-0{opacity:0}.opacity-25{opacity:.25}.opacity-40{opacity:.4}.opacity-50{opacity:.5}.opacity-60{opacity:.6}.opacity-75{opacity:.75}.opacity-80{opacity:.8}.opacity-85{opacity:.85}.shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.shadow-lg,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.shadow-sm,.shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.outline-none{outline:2px solid transparent;outline-offset:2px}.outline{outline-style:solid}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}#HideScroll{scrollbar-width:none;-ms-overflow-style:none;overflow:-moz-scrollbars-none}#HideScroll::-webkit-scrollbar{width:0;height:0;display:none}#HideScroll::-ms-scrollbar{display:none}.placeholder\:text-\[13px\]::-moz-placeholder{font-size:13px}.placeholder\:text-\[13px\]::placeholder{font-size:13px}.placeholder\:text-gray-500::-moz-placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.placeholder\:text-gray-500::placeholder{--tw-text-opacity:1;color:rgb(107 114 128/var(--tw-text-opacity,1))}.hover\:border-gray-300:hover{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity,1))}.hover\:bg-blue-50:hover{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity,1))}.hover\:bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(243 244 246/var(--tw-bg-opacity,1))}.hover\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.hover\:bg-green-50:hover{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity,1))}.hover\:bg-orange-50:hover{--tw-bg-opacity:1;background-color:rgb(255 247 237/var(--tw-bg-opacity,1))}.hover\:bg-pink-50:hover{--tw-bg-opacity:1;background-color:rgb(253 242 248/var(--tw-bg-opacity,1))}.hover\:bg-purple-50:hover{--tw-bg-opacity:1;background-color:rgb(250 245 255/var(--tw-bg-opacity,1))}.hover\:bg-red-50:hover{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity,1))}.hover\:bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(185 28 28/var(--tw-bg-opacity,1))}.hover\:bg-teal-50:hover{--tw-bg-opacity:1;background-color:rgb(240 253 250/var(--tw-bg-opacity,1))}.hover\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1))}.hover\:text-blue-600:hover{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity,1))}.hover\:text-gray-600:hover{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.hover\:text-gray-700:hover{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.hover\:text-gray-800:hover{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.hover\:text-gray-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.hover\:text-green-600:hover{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity,1))}.hover\:text-orange-600:hover{--tw-text-opacity:1;color:rgb(234 88 12/var(--tw-text-opacity,1))}.hover\:text-pink-600:hover{--tw-text-opacity:1;color:rgb(219 39 119/var(--tw-text-opacity,1))}.hover\:text-purple-600:hover{--tw-text-opacity:1;color:rgb(147 51 234/var(--tw-text-opacity,1))}.hover\:text-red-600:hover{--tw-text-opacity:1;color:rgb(220 38 38/var(--tw-text-opacity,1))}.hover\:text-skprimary:hover{color:var(--color-primary,#534f8f)}.hover\:text-teal-600:hover{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity,1))}.hover\:underline:hover{text-decoration-line:underline}.hover\:no-underline:hover{text-decoration-line:none}.hover\:opacity-100:hover{opacity:1}.hover\:opacity-70:hover{opacity:.7}.focus\:border-skprimary:focus{border-color:var(--color-primary,#534f8f)}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:ring-1:focus{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus\:ring-red-400:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(248 113 113/var(--tw-ring-opacity,1))}.focus\:ring-skprimary:focus{--tw-ring-color:var(--color-primary,#534f8f)}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-2:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-inset:focus-visible{--tw-ring-inset:inset}.focus-visible\:ring-skprimary:focus-visible{--tw-ring-color:var(--color-primary,#534f8f)}.focus-visible\:ring-offset-1:focus-visible{--tw-ring-offset-width:1px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-50:disabled{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.disabled\:opacity-50:disabled{opacity:.5}.disabled\:opacity-60:disabled{opacity:.6}@media (min-width:640px){.sm\:flex{display:flex}}@media (min-width:768px){.md\:w-\[60\%\]{width:60%}}@media (min-width:1024px){.lg\:\!w-\[30\%\]{width:30%!important}.lg\:\!w-\[35\%\]{width:35%!important}.lg\:px-4{padding-left:1rem;padding-right:1rem}.lg\:py-2{padding-top:.5rem;padding-bottom:.5rem}.lg\:text-\[12px\]{font-size:12px}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seekho/ui",
-  "version": "0.1.34",
+  "version": "0.1.36",
   "description": "Seekho internal UI component library",
   "keywords": [
     "seekho",