@seekho/ui 0.1.20 → 0.1.22
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +30 -2
- package/dist/index.d.ts +30 -2
- package/dist/index.js +204 -71
- package/dist/index.mjs +188 -58
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -1,6 +1,33 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
|
|
4
|
+
interface AccordionProps {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
expanded?: boolean;
|
|
7
|
+
defaultExpanded?: boolean;
|
|
8
|
+
onChange?: (expanded: boolean) => void;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
variant?: "outlined" | "plain";
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
declare const Accordion: ({ children, expanded: controlledExpanded, defaultExpanded, onChange, disabled, variant, className, }: AccordionProps) => react_jsx_runtime.JSX.Element;
|
|
14
|
+
interface AccordionSummaryProps {
|
|
15
|
+
children: React.ReactNode;
|
|
16
|
+
/** Icon rendered on the right — e.g. <ExpandMoreIcon /> */
|
|
17
|
+
expandIcon?: React.ReactNode;
|
|
18
|
+
/** Maps to aria-controls on the button */
|
|
19
|
+
"aria-controls"?: string;
|
|
20
|
+
id?: string;
|
|
21
|
+
className?: string;
|
|
22
|
+
}
|
|
23
|
+
declare const AccordionSummary: ({ children, expandIcon, "aria-controls": ariaControls, id, className, }: AccordionSummaryProps) => react_jsx_runtime.JSX.Element;
|
|
24
|
+
interface AccordionDetailsProps {
|
|
25
|
+
children: React.ReactNode;
|
|
26
|
+
id?: string;
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
declare const AccordionDetails: ({ children, id, className, }: AccordionDetailsProps) => react_jsx_runtime.JSX.Element;
|
|
30
|
+
|
|
4
31
|
interface RenderOptionProps {
|
|
5
32
|
onClick: (e: React.MouseEvent<HTMLLIElement>) => void;
|
|
6
33
|
onMouseEnter: () => void;
|
|
@@ -86,6 +113,7 @@ interface FilterDrawerProps {
|
|
|
86
113
|
title?: string;
|
|
87
114
|
anchor?: DrawerAnchor;
|
|
88
115
|
children?: React.ReactNode;
|
|
116
|
+
drawerClassName?: string;
|
|
89
117
|
childrenClassName?: string;
|
|
90
118
|
applyBtnText?: string;
|
|
91
119
|
clearBtnText?: string;
|
|
@@ -93,7 +121,7 @@ interface FilterDrawerProps {
|
|
|
93
121
|
handleApplyFilters: () => void;
|
|
94
122
|
handleClearFilters: () => void;
|
|
95
123
|
}
|
|
96
|
-
declare const FilterDrawer: ({ open, title, anchor, children, childrenClassName, applyBtnText, clearBtnText, handleClose, handleApplyFilters, handleClearFilters, }: FilterDrawerProps) => react_jsx_runtime.JSX.Element;
|
|
124
|
+
declare const FilterDrawer: ({ open, title, anchor, children, drawerClassName, childrenClassName, applyBtnText, clearBtnText, handleClose, handleApplyFilters, handleClearFilters, }: FilterDrawerProps) => react_jsx_runtime.JSX.Element;
|
|
97
125
|
|
|
98
126
|
interface ModalProps {
|
|
99
127
|
show: boolean;
|
|
@@ -150,4 +178,4 @@ declare const handleCopyTextToClipboard: ({ clipboardText, }: {
|
|
|
150
178
|
clipboardText: string | number | null | undefined;
|
|
151
179
|
}) => Promise<boolean>;
|
|
152
180
|
|
|
153
|
-
export { AutoComplete, type AutoCompleteProps, Breadcrumb, type BreadcrumbProps, ButtonLoader, type ButtonLoaderProps, CopyId, type CopyIdProps, CustomAnchor, type CustomAnchorProps, CustomInput, type CustomInputProps, Drawer, type DrawerAnchor, type DrawerProps, FilterDrawer, type FilterDrawerProps, InputTitleWithRequired, type InputTitleWithRequiredProps, Modal, type ModalProps, ReadMore, type ReadMoreProps, SearchBar, type SearchBarProps, StagingAlert, type StagingAlertProps, cn, handleCopyTextToClipboard, useLocalStorage };
|
|
181
|
+
export { Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, AutoComplete, type AutoCompleteProps, Breadcrumb, type BreadcrumbProps, ButtonLoader, type ButtonLoaderProps, CopyId, type CopyIdProps, CustomAnchor, type CustomAnchorProps, CustomInput, type CustomInputProps, Drawer, type DrawerAnchor, type DrawerProps, FilterDrawer, type FilterDrawerProps, InputTitleWithRequired, type InputTitleWithRequiredProps, Modal, type ModalProps, ReadMore, type ReadMoreProps, SearchBar, type SearchBarProps, StagingAlert, type StagingAlertProps, cn, handleCopyTextToClipboard, useLocalStorage };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,33 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
|
|
4
|
+
interface AccordionProps {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
expanded?: boolean;
|
|
7
|
+
defaultExpanded?: boolean;
|
|
8
|
+
onChange?: (expanded: boolean) => void;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
variant?: "outlined" | "plain";
|
|
11
|
+
className?: string;
|
|
12
|
+
}
|
|
13
|
+
declare const Accordion: ({ children, expanded: controlledExpanded, defaultExpanded, onChange, disabled, variant, className, }: AccordionProps) => react_jsx_runtime.JSX.Element;
|
|
14
|
+
interface AccordionSummaryProps {
|
|
15
|
+
children: React.ReactNode;
|
|
16
|
+
/** Icon rendered on the right — e.g. <ExpandMoreIcon /> */
|
|
17
|
+
expandIcon?: React.ReactNode;
|
|
18
|
+
/** Maps to aria-controls on the button */
|
|
19
|
+
"aria-controls"?: string;
|
|
20
|
+
id?: string;
|
|
21
|
+
className?: string;
|
|
22
|
+
}
|
|
23
|
+
declare const AccordionSummary: ({ children, expandIcon, "aria-controls": ariaControls, id, className, }: AccordionSummaryProps) => react_jsx_runtime.JSX.Element;
|
|
24
|
+
interface AccordionDetailsProps {
|
|
25
|
+
children: React.ReactNode;
|
|
26
|
+
id?: string;
|
|
27
|
+
className?: string;
|
|
28
|
+
}
|
|
29
|
+
declare const AccordionDetails: ({ children, id, className, }: AccordionDetailsProps) => react_jsx_runtime.JSX.Element;
|
|
30
|
+
|
|
4
31
|
interface RenderOptionProps {
|
|
5
32
|
onClick: (e: React.MouseEvent<HTMLLIElement>) => void;
|
|
6
33
|
onMouseEnter: () => void;
|
|
@@ -86,6 +113,7 @@ interface FilterDrawerProps {
|
|
|
86
113
|
title?: string;
|
|
87
114
|
anchor?: DrawerAnchor;
|
|
88
115
|
children?: React.ReactNode;
|
|
116
|
+
drawerClassName?: string;
|
|
89
117
|
childrenClassName?: string;
|
|
90
118
|
applyBtnText?: string;
|
|
91
119
|
clearBtnText?: string;
|
|
@@ -93,7 +121,7 @@ interface FilterDrawerProps {
|
|
|
93
121
|
handleApplyFilters: () => void;
|
|
94
122
|
handleClearFilters: () => void;
|
|
95
123
|
}
|
|
96
|
-
declare const FilterDrawer: ({ open, title, anchor, children, childrenClassName, applyBtnText, clearBtnText, handleClose, handleApplyFilters, handleClearFilters, }: FilterDrawerProps) => react_jsx_runtime.JSX.Element;
|
|
124
|
+
declare const FilterDrawer: ({ open, title, anchor, children, drawerClassName, childrenClassName, applyBtnText, clearBtnText, handleClose, handleApplyFilters, handleClearFilters, }: FilterDrawerProps) => react_jsx_runtime.JSX.Element;
|
|
97
125
|
|
|
98
126
|
interface ModalProps {
|
|
99
127
|
show: boolean;
|
|
@@ -150,4 +178,4 @@ declare const handleCopyTextToClipboard: ({ clipboardText, }: {
|
|
|
150
178
|
clipboardText: string | number | null | undefined;
|
|
151
179
|
}) => Promise<boolean>;
|
|
152
180
|
|
|
153
|
-
export { AutoComplete, type AutoCompleteProps, Breadcrumb, type BreadcrumbProps, ButtonLoader, type ButtonLoaderProps, CopyId, type CopyIdProps, CustomAnchor, type CustomAnchorProps, CustomInput, type CustomInputProps, Drawer, type DrawerAnchor, type DrawerProps, FilterDrawer, type FilterDrawerProps, InputTitleWithRequired, type InputTitleWithRequiredProps, Modal, type ModalProps, ReadMore, type ReadMoreProps, SearchBar, type SearchBarProps, StagingAlert, type StagingAlertProps, cn, handleCopyTextToClipboard, useLocalStorage };
|
|
181
|
+
export { Accordion, AccordionDetails, type AccordionDetailsProps, type AccordionProps, AccordionSummary, type AccordionSummaryProps, AutoComplete, type AutoCompleteProps, Breadcrumb, type BreadcrumbProps, ButtonLoader, type ButtonLoaderProps, CopyId, type CopyIdProps, CustomAnchor, type CustomAnchorProps, CustomInput, type CustomInputProps, Drawer, type DrawerAnchor, type DrawerProps, FilterDrawer, type FilterDrawerProps, InputTitleWithRequired, type InputTitleWithRequiredProps, Modal, type ModalProps, ReadMore, type ReadMoreProps, SearchBar, type SearchBarProps, StagingAlert, type StagingAlertProps, cn, handleCopyTextToClipboard, useLocalStorage };
|
package/dist/index.js
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var
|
|
3
|
+
var React2 = require('react');
|
|
4
4
|
var jsxRuntime = require('react/jsx-runtime');
|
|
5
5
|
var reactHotkeysHook = require('react-hotkeys-hook');
|
|
6
6
|
|
|
7
7
|
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
8
8
|
|
|
9
|
-
var
|
|
9
|
+
var React2__default = /*#__PURE__*/_interopDefault(React2);
|
|
10
10
|
|
|
11
11
|
var __defProp = Object.defineProperty;
|
|
12
12
|
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
@@ -36,6 +36,126 @@ var __objRest = (source, exclude) => {
|
|
|
36
36
|
}
|
|
37
37
|
return target;
|
|
38
38
|
};
|
|
39
|
+
var AccordionContext = React2.createContext(null);
|
|
40
|
+
var useAccordion = () => {
|
|
41
|
+
const ctx = React2.useContext(AccordionContext);
|
|
42
|
+
if (!ctx)
|
|
43
|
+
throw new Error(
|
|
44
|
+
"AccordionSummary / AccordionDetails must be used inside <Accordion>"
|
|
45
|
+
);
|
|
46
|
+
return ctx;
|
|
47
|
+
};
|
|
48
|
+
var Accordion = ({
|
|
49
|
+
children,
|
|
50
|
+
expanded: controlledExpanded,
|
|
51
|
+
defaultExpanded = false,
|
|
52
|
+
onChange,
|
|
53
|
+
disabled = false,
|
|
54
|
+
variant = "outlined",
|
|
55
|
+
className
|
|
56
|
+
}) => {
|
|
57
|
+
const [internalExpanded, setInternalExpanded] = React2.useState(defaultExpanded);
|
|
58
|
+
const isControlled = controlledExpanded !== void 0;
|
|
59
|
+
const isExpanded = isControlled ? controlledExpanded : internalExpanded;
|
|
60
|
+
const handleToggle = () => {
|
|
61
|
+
if (disabled) return;
|
|
62
|
+
const next = !isExpanded;
|
|
63
|
+
if (!isControlled) setInternalExpanded(next);
|
|
64
|
+
onChange == null ? void 0 : onChange(next);
|
|
65
|
+
};
|
|
66
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
67
|
+
AccordionContext.Provider,
|
|
68
|
+
{
|
|
69
|
+
value: { expanded: isExpanded, handleToggle, disabled, variant },
|
|
70
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
71
|
+
"div",
|
|
72
|
+
{
|
|
73
|
+
className: [
|
|
74
|
+
"overflow-hidden transition-shadow",
|
|
75
|
+
variant === "outlined" ? [
|
|
76
|
+
"border border-gray-300 rounded-md",
|
|
77
|
+
isExpanded ? "shadow-sm" : ""
|
|
78
|
+
].join(" ") : "",
|
|
79
|
+
disabled ? "opacity-50" : "",
|
|
80
|
+
className || ""
|
|
81
|
+
].join(" "),
|
|
82
|
+
children
|
|
83
|
+
}
|
|
84
|
+
)
|
|
85
|
+
}
|
|
86
|
+
);
|
|
87
|
+
};
|
|
88
|
+
var AccordionSummary = ({
|
|
89
|
+
children,
|
|
90
|
+
expandIcon,
|
|
91
|
+
"aria-controls": ariaControls,
|
|
92
|
+
id,
|
|
93
|
+
className
|
|
94
|
+
}) => {
|
|
95
|
+
const { expanded, handleToggle, disabled, variant } = useAccordion();
|
|
96
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
97
|
+
"button",
|
|
98
|
+
{
|
|
99
|
+
type: "button",
|
|
100
|
+
id,
|
|
101
|
+
"aria-expanded": expanded,
|
|
102
|
+
"aria-controls": ariaControls,
|
|
103
|
+
onClick: handleToggle,
|
|
104
|
+
disabled,
|
|
105
|
+
className: [
|
|
106
|
+
"w-full flex items-center justify-between gap-3 px-4 py-3",
|
|
107
|
+
"text-left text-[14.5px] font-medium text-gray-800",
|
|
108
|
+
variant === "outlined" ? "bg-white hover:bg-gray-50" : "",
|
|
109
|
+
"transition-colors focus:outline-none",
|
|
110
|
+
"focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary",
|
|
111
|
+
disabled ? "pointer-events-none" : "cursor-pointer",
|
|
112
|
+
className || ""
|
|
113
|
+
].join(" "),
|
|
114
|
+
children: [
|
|
115
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children }),
|
|
116
|
+
expandIcon && /* @__PURE__ */ jsxRuntime.jsx(
|
|
117
|
+
"span",
|
|
118
|
+
{
|
|
119
|
+
className: [
|
|
120
|
+
"transition-transform duration-300 shrink-0",
|
|
121
|
+
expanded ? "rotate-180" : "rotate-0"
|
|
122
|
+
].join(" "),
|
|
123
|
+
children: expandIcon
|
|
124
|
+
}
|
|
125
|
+
)
|
|
126
|
+
]
|
|
127
|
+
}
|
|
128
|
+
);
|
|
129
|
+
};
|
|
130
|
+
var AccordionDetails = ({
|
|
131
|
+
children,
|
|
132
|
+
id,
|
|
133
|
+
className
|
|
134
|
+
}) => {
|
|
135
|
+
const { expanded, variant } = useAccordion();
|
|
136
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
137
|
+
"div",
|
|
138
|
+
{
|
|
139
|
+
id,
|
|
140
|
+
role: "region",
|
|
141
|
+
className: [
|
|
142
|
+
"grid transition-all duration-300 ease-in-out",
|
|
143
|
+
expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
|
|
144
|
+
].join(" "),
|
|
145
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
146
|
+
"div",
|
|
147
|
+
{
|
|
148
|
+
className: [
|
|
149
|
+
"px-4 py-3 text-[14px] text-gray-700",
|
|
150
|
+
variant === "outlined" ? "border-t border-gray-200" : "",
|
|
151
|
+
className || ""
|
|
152
|
+
].join(" "),
|
|
153
|
+
children
|
|
154
|
+
}
|
|
155
|
+
) })
|
|
156
|
+
}
|
|
157
|
+
);
|
|
158
|
+
};
|
|
39
159
|
function AutoComplete({
|
|
40
160
|
label,
|
|
41
161
|
value,
|
|
@@ -50,14 +170,14 @@ function AutoComplete({
|
|
|
50
170
|
onChange,
|
|
51
171
|
onInputChange
|
|
52
172
|
}) {
|
|
53
|
-
const inputId =
|
|
54
|
-
const containerRef =
|
|
55
|
-
const listRef =
|
|
56
|
-
const [open, setOpen] =
|
|
57
|
-
const [inputValue, setInputValue] =
|
|
173
|
+
const inputId = React2.useId();
|
|
174
|
+
const containerRef = React2.useRef(null);
|
|
175
|
+
const listRef = React2.useRef(null);
|
|
176
|
+
const [open, setOpen] = React2.useState(false);
|
|
177
|
+
const [inputValue, setInputValue] = React2.useState(
|
|
58
178
|
value ? getOptionLabel(value) : ""
|
|
59
179
|
);
|
|
60
|
-
const [highlightedIndex, setHighlightedIndex] =
|
|
180
|
+
const [highlightedIndex, setHighlightedIndex] = React2.useState(-1);
|
|
61
181
|
const filteredOptions = options.filter(
|
|
62
182
|
(option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
|
|
63
183
|
);
|
|
@@ -96,10 +216,10 @@ function AutoComplete({
|
|
|
96
216
|
if (!value) return false;
|
|
97
217
|
return isOptionEqualToValue ? isOptionEqualToValue(option, value) : getOptionLabel(option) === getOptionLabel(value);
|
|
98
218
|
};
|
|
99
|
-
|
|
219
|
+
React2.useEffect(() => {
|
|
100
220
|
setInputValue(value ? getOptionLabel(value) : "");
|
|
101
221
|
}, [value]);
|
|
102
|
-
|
|
222
|
+
React2.useEffect(() => {
|
|
103
223
|
const handleClickOutside = (e) => {
|
|
104
224
|
if (containerRef.current && !containerRef.current.contains(e.target)) {
|
|
105
225
|
setOpen(false);
|
|
@@ -276,7 +396,7 @@ function AutoComplete({
|
|
|
276
396
|
isSelected({ option }) ? "font-semibold" : ""
|
|
277
397
|
].join(" ")
|
|
278
398
|
};
|
|
279
|
-
return renderOption ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
399
|
+
return renderOption ? /* @__PURE__ */ jsxRuntime.jsx(React2__default.default.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
280
400
|
"li",
|
|
281
401
|
{
|
|
282
402
|
onMouseDown: () => handleSelect({ option }),
|
|
@@ -519,7 +639,7 @@ var CustomAnchor = ({
|
|
|
519
639
|
}
|
|
520
640
|
);
|
|
521
641
|
};
|
|
522
|
-
var CustomInput =
|
|
642
|
+
var CustomInput = React2__default.default.forwardRef(
|
|
523
643
|
(_a, ref) => {
|
|
524
644
|
var _b = _a, { label: _label, error, className, type } = _b, props = __objRest(_b, ["label", "error", "className", "type"]);
|
|
525
645
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -560,13 +680,13 @@ var Drawer = ({
|
|
|
560
680
|
className,
|
|
561
681
|
onClose
|
|
562
682
|
}) => {
|
|
563
|
-
|
|
683
|
+
React2.useEffect(() => {
|
|
564
684
|
document.body.style.overflow = open ? "hidden" : "";
|
|
565
685
|
return () => {
|
|
566
686
|
document.body.style.overflow = "";
|
|
567
687
|
};
|
|
568
688
|
}, [open]);
|
|
569
|
-
|
|
689
|
+
React2.useEffect(() => {
|
|
570
690
|
const handleKeyDown = (e) => {
|
|
571
691
|
if (e.key === "Escape" && open) onClose();
|
|
572
692
|
};
|
|
@@ -623,6 +743,7 @@ var FilterDrawer = ({
|
|
|
623
743
|
title,
|
|
624
744
|
anchor = "right",
|
|
625
745
|
children,
|
|
746
|
+
drawerClassName,
|
|
626
747
|
childrenClassName,
|
|
627
748
|
applyBtnText = "Apply",
|
|
628
749
|
clearBtnText = "Clear",
|
|
@@ -630,63 +751,72 @@ var FilterDrawer = ({
|
|
|
630
751
|
handleApplyFilters,
|
|
631
752
|
handleClearFilters
|
|
632
753
|
}) => {
|
|
633
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
754
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
755
|
+
Drawer,
|
|
756
|
+
{
|
|
757
|
+
open,
|
|
758
|
+
anchor,
|
|
759
|
+
onClose: handleClose,
|
|
760
|
+
className: drawerClassName || "w-[450px]",
|
|
761
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full bg-white flex flex-col justify-between", children: [
|
|
762
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2.5 bg-gray-100 flex justify-between items-center z-10", children: [
|
|
763
|
+
/* @__PURE__ */ jsxRuntime.jsx("h6", { className: "text-lg font-bold flex items-center gap-1", children: title }),
|
|
764
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
765
|
+
"button",
|
|
643
766
|
{
|
|
644
|
-
|
|
645
|
-
className: "
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
767
|
+
onClick: handleClose,
|
|
768
|
+
className: "cursor-pointer text-gray-600 hover:text-gray-900 transition-colors",
|
|
769
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
770
|
+
"svg",
|
|
771
|
+
{
|
|
772
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
773
|
+
className: "w-[24px] h-[24px]",
|
|
774
|
+
viewBox: "0 0 24 24",
|
|
775
|
+
fill: "none",
|
|
776
|
+
stroke: "currentColor",
|
|
777
|
+
strokeWidth: "2",
|
|
778
|
+
strokeLinecap: "round",
|
|
779
|
+
strokeLinejoin: "round",
|
|
780
|
+
children: [
|
|
781
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
782
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
783
|
+
]
|
|
784
|
+
}
|
|
785
|
+
)
|
|
656
786
|
}
|
|
657
787
|
)
|
|
658
|
-
}
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
}
|
|
687
|
-
)
|
|
688
|
-
|
|
689
|
-
|
|
788
|
+
] }),
|
|
789
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
790
|
+
"div",
|
|
791
|
+
{
|
|
792
|
+
className: [
|
|
793
|
+
"flex-1 overflow-auto px-2 pb-3",
|
|
794
|
+
childrenClassName || ""
|
|
795
|
+
].join(" "),
|
|
796
|
+
children
|
|
797
|
+
}
|
|
798
|
+
),
|
|
799
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-x-2 py-3 px-4 justify-end bg-gray-100 border-gray-300", children: [
|
|
800
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
801
|
+
"button",
|
|
802
|
+
{
|
|
803
|
+
onClick: handleClearFilters,
|
|
804
|
+
className: "!px-10 py-2 bg-white !text-[15px] text-black rounded-lg",
|
|
805
|
+
children: clearBtnText
|
|
806
|
+
}
|
|
807
|
+
),
|
|
808
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
809
|
+
"button",
|
|
810
|
+
{
|
|
811
|
+
onClick: handleApplyFilters,
|
|
812
|
+
className: "!px-10 py-2 bg-skprimary !text-[15px] text-white rounded-lg",
|
|
813
|
+
children: applyBtnText
|
|
814
|
+
}
|
|
815
|
+
)
|
|
816
|
+
] })
|
|
817
|
+
] })
|
|
818
|
+
}
|
|
819
|
+
);
|
|
690
820
|
};
|
|
691
821
|
|
|
692
822
|
// src/utils/modalStack.ts
|
|
@@ -715,8 +845,8 @@ function Modal({
|
|
|
715
845
|
handleConfirmation,
|
|
716
846
|
handleConfirmationBtnText = "Confirm"
|
|
717
847
|
}) {
|
|
718
|
-
const modalId =
|
|
719
|
-
|
|
848
|
+
const modalId = React2.useId();
|
|
849
|
+
React2.useEffect(() => {
|
|
720
850
|
if (show) handlePushModal({ id: modalId });
|
|
721
851
|
return () => handlePopModal({ id: modalId });
|
|
722
852
|
}, [show, modalId]);
|
|
@@ -1006,7 +1136,7 @@ var StagingAlert = ({
|
|
|
1006
1136
|
] });
|
|
1007
1137
|
};
|
|
1008
1138
|
function useLocalStorage(key, initialValue) {
|
|
1009
|
-
const [storedValue, setStoredValue] =
|
|
1139
|
+
const [storedValue, setStoredValue] = React2.useState(() => {
|
|
1010
1140
|
if (typeof window === "undefined") return initialValue;
|
|
1011
1141
|
try {
|
|
1012
1142
|
const item = window.localStorage.getItem(key);
|
|
@@ -1039,6 +1169,9 @@ function useLocalStorage(key, initialValue) {
|
|
|
1039
1169
|
return [storedValue, setValue, remove];
|
|
1040
1170
|
}
|
|
1041
1171
|
|
|
1172
|
+
exports.Accordion = Accordion;
|
|
1173
|
+
exports.AccordionDetails = AccordionDetails;
|
|
1174
|
+
exports.AccordionSummary = AccordionSummary;
|
|
1042
1175
|
exports.AutoComplete = AutoComplete;
|
|
1043
1176
|
exports.Breadcrumb = Breadcrumb;
|
|
1044
1177
|
exports.ButtonLoader = ButtonLoader;
|
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React2, { createContext, useState, useId, useRef, useEffect, useContext } from 'react';
|
|
2
2
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import { useHotkeys } from 'react-hotkeys-hook';
|
|
4
4
|
|
|
@@ -30,6 +30,126 @@ var __objRest = (source, exclude) => {
|
|
|
30
30
|
}
|
|
31
31
|
return target;
|
|
32
32
|
};
|
|
33
|
+
var AccordionContext = createContext(null);
|
|
34
|
+
var useAccordion = () => {
|
|
35
|
+
const ctx = useContext(AccordionContext);
|
|
36
|
+
if (!ctx)
|
|
37
|
+
throw new Error(
|
|
38
|
+
"AccordionSummary / AccordionDetails must be used inside <Accordion>"
|
|
39
|
+
);
|
|
40
|
+
return ctx;
|
|
41
|
+
};
|
|
42
|
+
var Accordion = ({
|
|
43
|
+
children,
|
|
44
|
+
expanded: controlledExpanded,
|
|
45
|
+
defaultExpanded = false,
|
|
46
|
+
onChange,
|
|
47
|
+
disabled = false,
|
|
48
|
+
variant = "outlined",
|
|
49
|
+
className
|
|
50
|
+
}) => {
|
|
51
|
+
const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
|
|
52
|
+
const isControlled = controlledExpanded !== void 0;
|
|
53
|
+
const isExpanded = isControlled ? controlledExpanded : internalExpanded;
|
|
54
|
+
const handleToggle = () => {
|
|
55
|
+
if (disabled) return;
|
|
56
|
+
const next = !isExpanded;
|
|
57
|
+
if (!isControlled) setInternalExpanded(next);
|
|
58
|
+
onChange == null ? void 0 : onChange(next);
|
|
59
|
+
};
|
|
60
|
+
return /* @__PURE__ */ jsx(
|
|
61
|
+
AccordionContext.Provider,
|
|
62
|
+
{
|
|
63
|
+
value: { expanded: isExpanded, handleToggle, disabled, variant },
|
|
64
|
+
children: /* @__PURE__ */ jsx(
|
|
65
|
+
"div",
|
|
66
|
+
{
|
|
67
|
+
className: [
|
|
68
|
+
"overflow-hidden transition-shadow",
|
|
69
|
+
variant === "outlined" ? [
|
|
70
|
+
"border border-gray-300 rounded-md",
|
|
71
|
+
isExpanded ? "shadow-sm" : ""
|
|
72
|
+
].join(" ") : "",
|
|
73
|
+
disabled ? "opacity-50" : "",
|
|
74
|
+
className || ""
|
|
75
|
+
].join(" "),
|
|
76
|
+
children
|
|
77
|
+
}
|
|
78
|
+
)
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
};
|
|
82
|
+
var AccordionSummary = ({
|
|
83
|
+
children,
|
|
84
|
+
expandIcon,
|
|
85
|
+
"aria-controls": ariaControls,
|
|
86
|
+
id,
|
|
87
|
+
className
|
|
88
|
+
}) => {
|
|
89
|
+
const { expanded, handleToggle, disabled, variant } = useAccordion();
|
|
90
|
+
return /* @__PURE__ */ jsxs(
|
|
91
|
+
"button",
|
|
92
|
+
{
|
|
93
|
+
type: "button",
|
|
94
|
+
id,
|
|
95
|
+
"aria-expanded": expanded,
|
|
96
|
+
"aria-controls": ariaControls,
|
|
97
|
+
onClick: handleToggle,
|
|
98
|
+
disabled,
|
|
99
|
+
className: [
|
|
100
|
+
"w-full flex items-center justify-between gap-3 px-4 py-3",
|
|
101
|
+
"text-left text-[14.5px] font-medium text-gray-800",
|
|
102
|
+
variant === "outlined" ? "bg-white hover:bg-gray-50" : "",
|
|
103
|
+
"transition-colors focus:outline-none",
|
|
104
|
+
"focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary",
|
|
105
|
+
disabled ? "pointer-events-none" : "cursor-pointer",
|
|
106
|
+
className || ""
|
|
107
|
+
].join(" "),
|
|
108
|
+
children: [
|
|
109
|
+
/* @__PURE__ */ jsx("span", { className: "flex-1", children }),
|
|
110
|
+
expandIcon && /* @__PURE__ */ jsx(
|
|
111
|
+
"span",
|
|
112
|
+
{
|
|
113
|
+
className: [
|
|
114
|
+
"transition-transform duration-300 shrink-0",
|
|
115
|
+
expanded ? "rotate-180" : "rotate-0"
|
|
116
|
+
].join(" "),
|
|
117
|
+
children: expandIcon
|
|
118
|
+
}
|
|
119
|
+
)
|
|
120
|
+
]
|
|
121
|
+
}
|
|
122
|
+
);
|
|
123
|
+
};
|
|
124
|
+
var AccordionDetails = ({
|
|
125
|
+
children,
|
|
126
|
+
id,
|
|
127
|
+
className
|
|
128
|
+
}) => {
|
|
129
|
+
const { expanded, variant } = useAccordion();
|
|
130
|
+
return /* @__PURE__ */ jsx(
|
|
131
|
+
"div",
|
|
132
|
+
{
|
|
133
|
+
id,
|
|
134
|
+
role: "region",
|
|
135
|
+
className: [
|
|
136
|
+
"grid transition-all duration-300 ease-in-out",
|
|
137
|
+
expanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
|
|
138
|
+
].join(" "),
|
|
139
|
+
children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx(
|
|
140
|
+
"div",
|
|
141
|
+
{
|
|
142
|
+
className: [
|
|
143
|
+
"px-4 py-3 text-[14px] text-gray-700",
|
|
144
|
+
variant === "outlined" ? "border-t border-gray-200" : "",
|
|
145
|
+
className || ""
|
|
146
|
+
].join(" "),
|
|
147
|
+
children
|
|
148
|
+
}
|
|
149
|
+
) })
|
|
150
|
+
}
|
|
151
|
+
);
|
|
152
|
+
};
|
|
33
153
|
function AutoComplete({
|
|
34
154
|
label,
|
|
35
155
|
value,
|
|
@@ -270,7 +390,7 @@ function AutoComplete({
|
|
|
270
390
|
isSelected({ option }) ? "font-semibold" : ""
|
|
271
391
|
].join(" ")
|
|
272
392
|
};
|
|
273
|
-
return renderOption ? /* @__PURE__ */ jsx(
|
|
393
|
+
return renderOption ? /* @__PURE__ */ jsx(React2.Fragment, { children: renderOption(optionProps, option) }, idx) : /* @__PURE__ */ jsx(
|
|
274
394
|
"li",
|
|
275
395
|
{
|
|
276
396
|
onMouseDown: () => handleSelect({ option }),
|
|
@@ -513,7 +633,7 @@ var CustomAnchor = ({
|
|
|
513
633
|
}
|
|
514
634
|
);
|
|
515
635
|
};
|
|
516
|
-
var CustomInput =
|
|
636
|
+
var CustomInput = React2.forwardRef(
|
|
517
637
|
(_a, ref) => {
|
|
518
638
|
var _b = _a, { label: _label, error, className, type } = _b, props = __objRest(_b, ["label", "error", "className", "type"]);
|
|
519
639
|
return /* @__PURE__ */ jsx(
|
|
@@ -617,6 +737,7 @@ var FilterDrawer = ({
|
|
|
617
737
|
title,
|
|
618
738
|
anchor = "right",
|
|
619
739
|
children,
|
|
740
|
+
drawerClassName,
|
|
620
741
|
childrenClassName,
|
|
621
742
|
applyBtnText = "Apply",
|
|
622
743
|
clearBtnText = "Clear",
|
|
@@ -624,63 +745,72 @@ var FilterDrawer = ({
|
|
|
624
745
|
handleApplyFilters,
|
|
625
746
|
handleClearFilters
|
|
626
747
|
}) => {
|
|
627
|
-
return /* @__PURE__ */ jsx(
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
748
|
+
return /* @__PURE__ */ jsx(
|
|
749
|
+
Drawer,
|
|
750
|
+
{
|
|
751
|
+
open,
|
|
752
|
+
anchor,
|
|
753
|
+
onClose: handleClose,
|
|
754
|
+
className: drawerClassName || "w-[450px]",
|
|
755
|
+
children: /* @__PURE__ */ jsxs("div", { className: "relative h-full bg-white flex flex-col justify-between", children: [
|
|
756
|
+
/* @__PURE__ */ jsxs("div", { className: "px-3 py-2.5 bg-gray-100 flex justify-between items-center z-10", children: [
|
|
757
|
+
/* @__PURE__ */ jsx("h6", { className: "text-lg font-bold flex items-center gap-1", children: title }),
|
|
758
|
+
/* @__PURE__ */ jsx(
|
|
759
|
+
"button",
|
|
637
760
|
{
|
|
638
|
-
|
|
639
|
-
className: "
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
761
|
+
onClick: handleClose,
|
|
762
|
+
className: "cursor-pointer text-gray-600 hover:text-gray-900 transition-colors",
|
|
763
|
+
children: /* @__PURE__ */ jsxs(
|
|
764
|
+
"svg",
|
|
765
|
+
{
|
|
766
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
767
|
+
className: "w-[24px] h-[24px]",
|
|
768
|
+
viewBox: "0 0 24 24",
|
|
769
|
+
fill: "none",
|
|
770
|
+
stroke: "currentColor",
|
|
771
|
+
strokeWidth: "2",
|
|
772
|
+
strokeLinecap: "round",
|
|
773
|
+
strokeLinejoin: "round",
|
|
774
|
+
children: [
|
|
775
|
+
/* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
776
|
+
/* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
777
|
+
]
|
|
778
|
+
}
|
|
779
|
+
)
|
|
650
780
|
}
|
|
651
781
|
)
|
|
652
|
-
}
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
}
|
|
681
|
-
)
|
|
682
|
-
|
|
683
|
-
|
|
782
|
+
] }),
|
|
783
|
+
/* @__PURE__ */ jsx(
|
|
784
|
+
"div",
|
|
785
|
+
{
|
|
786
|
+
className: [
|
|
787
|
+
"flex-1 overflow-auto px-2 pb-3",
|
|
788
|
+
childrenClassName || ""
|
|
789
|
+
].join(" "),
|
|
790
|
+
children
|
|
791
|
+
}
|
|
792
|
+
),
|
|
793
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-x-2 py-3 px-4 justify-end bg-gray-100 border-gray-300", children: [
|
|
794
|
+
/* @__PURE__ */ jsx(
|
|
795
|
+
"button",
|
|
796
|
+
{
|
|
797
|
+
onClick: handleClearFilters,
|
|
798
|
+
className: "!px-10 py-2 bg-white !text-[15px] text-black rounded-lg",
|
|
799
|
+
children: clearBtnText
|
|
800
|
+
}
|
|
801
|
+
),
|
|
802
|
+
/* @__PURE__ */ jsx(
|
|
803
|
+
"button",
|
|
804
|
+
{
|
|
805
|
+
onClick: handleApplyFilters,
|
|
806
|
+
className: "!px-10 py-2 bg-skprimary !text-[15px] text-white rounded-lg",
|
|
807
|
+
children: applyBtnText
|
|
808
|
+
}
|
|
809
|
+
)
|
|
810
|
+
] })
|
|
811
|
+
] })
|
|
812
|
+
}
|
|
813
|
+
);
|
|
684
814
|
};
|
|
685
815
|
|
|
686
816
|
// src/utils/modalStack.ts
|
|
@@ -1033,4 +1163,4 @@ function useLocalStorage(key, initialValue) {
|
|
|
1033
1163
|
return [storedValue, setValue, remove];
|
|
1034
1164
|
}
|
|
1035
1165
|
|
|
1036
|
-
export { AutoComplete, Breadcrumb, ButtonLoader, CopyId, CustomAnchor, CustomInput, Drawer, FilterDrawer, InputTitleWithRequired, Modal, ReadMore, SearchBar, StagingAlert, cn, handleCopyTextToClipboard, useLocalStorage };
|
|
1166
|
+
export { Accordion, AccordionDetails, AccordionSummary, AutoComplete, Breadcrumb, ButtonLoader, CopyId, CustomAnchor, CustomInput, Drawer, FilterDrawer, InputTitleWithRequired, Modal, ReadMore, SearchBar, StagingAlert, cn, handleCopyTextToClipboard, useLocalStorage };
|
package/dist/styles.css
CHANGED
|
@@ -1 +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}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-top-\[9px\]{top:-9px}.bottom-0{bottom:0}.left-0{left:0}.left-3{left:.75rem}.right-0{right:0}.top-0{top:0}.top-1\/2{top:50%}.z-10{z-index:10}.z-50{z-index:50}.z-\[1200\]{z-index:1200}.z-\[999\]{z-index:999}.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}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.h-0{height:0}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.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-\[95vh\]{max-height:95vh}.max-h-full{max-height:100%}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-72{width:18rem}.w-80{width:20rem}.w-\[14px\]{width:14px}.w-\[16px\]{width:16px}.w-\[20px\]{width:20px}.w-\[24px\]{width:24px}.w-\[300px\]{width:300px}.w-\[95\%\]{width:95%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-1\/2{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-1\/2{--tw-translate-y:-50%}.-translate-y-full{--tw-translate-y:-100%}.-translate-y-full,.translate-x-0{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-0{--tw-translate-x:0px}.translate-x-full{--tw-translate-x:100%}.translate-x-full,.translate-y-0{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-0{--tw-translate-y:0px}.translate-y-full{--tw-translate-y:100%}.rotate-180,.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))}.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}.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-4{gap:1rem}.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)))}.overflow-auto{overflow:auto}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.overflow-y-auto{overflow-y:auto}.break-all{word-break:break-all}.rounded-\[24px\]{border-radius:24px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-b-md{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.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-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)}.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-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-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-800\/50{background-color:rgba(31,41,55,.5)}.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-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.p-6{padding:1.5rem}.\!px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.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-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-\[8px\]{padding-top:8px;padding-bottom:8px}.pb-3{padding-bottom:.75rem}.\!text-\[15px\]{font-size:15px!important}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.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}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.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-black{--tw-text-opacity:1;color:rgb(0 0 0/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-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-skprimary{color:var(--color-primary,#534f8f)}.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-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-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{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-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-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.duration-300{transition-duration:.3s}#HideScroll::-webkit-scrollbar{width:0;height:0}#HideScroll::-ms-scrollbar{display:none}#HideScroll{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width: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\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/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\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/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-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.hover\:text-skprimary:hover{color:var(--color-primary,#534f8f)}.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)}.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:768px){.md\:w-\[60\%\]{width:60%}}@media (min-width:1024px){.lg\:\!w-\[35\%\]{width:35%!important}.lg\:w-\[450px\]{width:450px}.lg\:px-4{padding-left:1rem;padding-right:1rem}.lg\:py-2{padding-top:.5rem;padding-bottom:.5rem}.lg\:text-\[12px\]{font-size:12px}}
|
|
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}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-top-\[9px\]{top:-9px}.bottom-0{bottom:0}.left-0{left:0}.left-3{left:.75rem}.right-0{right:0}.top-0{top:0}.top-1\/2{top:50%}.z-10{z-index:10}.z-50{z-index:50}.z-\[1200\]{z-index:1200}.z-\[999\]{z-index:999}.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}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}.h-0{height:0}.h-3\.5{height:.875rem}.h-4{height:1rem}.h-5{height:1.25rem}.h-6{height:1.5rem}.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-\[95vh\]{max-height:95vh}.max-h-full{max-height:100%}.w-3\.5{width:.875rem}.w-4{width:1rem}.w-5{width:1.25rem}.w-6{width:1.5rem}.w-72{width:18rem}.w-80{width:20rem}.w-\[14px\]{width:14px}.w-\[16px\]{width:16px}.w-\[20px\]{width:20px}.w-\[24px\]{width:24px}.w-\[300px\]{width:300px}.w-\[450px\]{width:450px}.w-\[500px\]{width:500px}.w-\[95\%\]{width:95%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-1\/2{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-1\/2{--tw-translate-y:-50%}.-translate-y-full{--tw-translate-y:-100%}.-translate-y-full,.translate-x-0{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-0{--tw-translate-x:0px}.translate-x-full{--tw-translate-x:100%}.translate-x-full,.translate-y-0{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-0{--tw-translate-y:0px}.translate-y-full{--tw-translate-y:100%}.rotate-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))}.rotate-0{--tw-rotate:0deg}.rotate-180{--tw-rotate:180deg;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))}@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}.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-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-y-auto{overflow-y:auto}.break-all{word-break:break-all}.rounded-\[24px\]{border-radius:24px}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:.5rem}.rounded-md{border-radius:.375rem}.rounded-b-md{border-bottom-right-radius:.375rem;border-bottom-left-radius:.375rem}.rounded-r-full{border-top-right-radius:9999px;border-bottom-right-radius:9999px}.border{border-width:1px}.border-2{border-width:2px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}.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-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)}.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-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-50{--tw-bg-opacity:1;background-color:rgb(249 250 251/var(--tw-bg-opacity,1))}.bg-gray-800\/50{background-color:rgba(31,41,55,.5)}.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-transparent{background-color:transparent}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.p-4{padding:1rem}.p-6{padding:1.5rem}.\!px-10{padding-left:2.5rem!important;padding-right:2.5rem!important}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.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-\[8px\]{padding-top:8px;padding-bottom:8px}.pb-3{padding-bottom:.75rem}.text-left{text-align:left}.\!text-\[15px\]{font-size:15px!important}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.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}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.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-black{--tw-text-opacity:1;color:rgb(0 0 0/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-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-skprimary{color:var(--color-primary,#534f8f)}.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-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-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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-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);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.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-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-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}#HideScroll::-webkit-scrollbar{width:0;height:0}#HideScroll::-ms-scrollbar{display:none}#HideScroll{overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width: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\:bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(249 250 251/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\:text-black:hover{--tw-text-opacity:1;color:rgb(0 0 0/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-900:hover{--tw-text-opacity:1;color:rgb(17 24 39/var(--tw-text-opacity,1))}.hover\:text-skprimary:hover{color:var(--color-primary,#534f8f)}.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\: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}.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:768px){.md\:w-\[60\%\]{width:60%}}@media (min-width:1024px){.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}}
|