@seekho/ui 0.1.16 → 0.1.19
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 +59 -1
- package/dist/index.d.ts +59 -1
- package/dist/index.js +353 -9
- package/dist/index.mjs +349 -11
- package/dist/styles.css +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -22,6 +22,21 @@ interface AutoCompleteProps<T> {
|
|
|
22
22
|
}
|
|
23
23
|
declare function AutoComplete<T>({ label, value, options, disabled, error, className, getOptionLabel, isOptionEqualToValue, isLoading, renderOption, onChange, onInputChange, }: AutoCompleteProps<T>): react_jsx_runtime.JSX.Element;
|
|
24
24
|
|
|
25
|
+
interface BreadcrumbProps {
|
|
26
|
+
/** Current URL pathname — pass location.pathname (React Router) or router.pathname (Next.js) */
|
|
27
|
+
pathname: string;
|
|
28
|
+
/** Called when a breadcrumb is clicked — pass navigate() (React Router) or router.push (Next.js) */
|
|
29
|
+
onNavigate: (path: string) => void;
|
|
30
|
+
/** Paths that depend on slug/id — clicking these will go back instead of navigating directly */
|
|
31
|
+
dependentPaths?: string[];
|
|
32
|
+
/** Show browser-style back/forward nav arrows before the breadcrumbs */
|
|
33
|
+
showNavArrows?: boolean;
|
|
34
|
+
className?: string;
|
|
35
|
+
linkClassName?: string;
|
|
36
|
+
activeClassName?: string;
|
|
37
|
+
}
|
|
38
|
+
declare const Breadcrumb: ({ pathname, onNavigate, dependentPaths, showNavArrows, className, linkClassName, activeClassName, }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
|
|
39
|
+
|
|
25
40
|
interface ButtonLoaderProps {
|
|
26
41
|
className?: string;
|
|
27
42
|
}
|
|
@@ -43,6 +58,43 @@ interface CustomAnchorProps {
|
|
|
43
58
|
}
|
|
44
59
|
declare const CustomAnchor: ({ displayText, href, className, openInNewTab, }: CustomAnchorProps) => react_jsx_runtime.JSX.Element;
|
|
45
60
|
|
|
61
|
+
interface CustomInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
62
|
+
label?: string;
|
|
63
|
+
error?: boolean;
|
|
64
|
+
}
|
|
65
|
+
declare const CustomInput: React.ForwardRefExoticComponent<CustomInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
66
|
+
|
|
67
|
+
type DrawerAnchor = "left" | "right" | "top" | "bottom";
|
|
68
|
+
interface DrawerProps {
|
|
69
|
+
open: boolean;
|
|
70
|
+
anchor?: DrawerAnchor;
|
|
71
|
+
children: React.ReactNode;
|
|
72
|
+
className?: string;
|
|
73
|
+
onClose: () => void;
|
|
74
|
+
}
|
|
75
|
+
declare const Drawer: ({ open, anchor, children, className, onClose, }: DrawerProps) => react_jsx_runtime.JSX.Element;
|
|
76
|
+
|
|
77
|
+
interface InputTitleWithRequiredProps {
|
|
78
|
+
title: string;
|
|
79
|
+
isRequired?: boolean;
|
|
80
|
+
className?: string;
|
|
81
|
+
}
|
|
82
|
+
declare const InputTitleWithRequired: ({ title, isRequired, className, }: InputTitleWithRequiredProps) => react_jsx_runtime.JSX.Element;
|
|
83
|
+
|
|
84
|
+
interface FilterDrawerProps {
|
|
85
|
+
open: boolean;
|
|
86
|
+
title?: string;
|
|
87
|
+
anchor?: DrawerAnchor;
|
|
88
|
+
children?: React.ReactNode;
|
|
89
|
+
childrenClassName?: string;
|
|
90
|
+
applyBtnText?: string;
|
|
91
|
+
clearBtnText?: string;
|
|
92
|
+
handleClose: () => void;
|
|
93
|
+
handleApplyFilters: () => void;
|
|
94
|
+
handleClearFilters: () => void;
|
|
95
|
+
}
|
|
96
|
+
declare const FilterDrawer: ({ open, title, anchor, children, childrenClassName, applyBtnText, clearBtnText, handleClose, handleApplyFilters, handleClearFilters, }: FilterDrawerProps) => react_jsx_runtime.JSX.Element;
|
|
97
|
+
|
|
46
98
|
interface ModalProps {
|
|
47
99
|
show: boolean;
|
|
48
100
|
title?: string;
|
|
@@ -82,6 +134,12 @@ interface SearchBarProps {
|
|
|
82
134
|
}
|
|
83
135
|
declare function SearchBar({ value, placeHolder, wrapperClass, className, searchParamQuery, onChange, handleInputKey, handleClearInput, }: SearchBarProps): react_jsx_runtime.JSX.Element;
|
|
84
136
|
|
|
137
|
+
interface StagingAlertProps {
|
|
138
|
+
liveUrl: string;
|
|
139
|
+
liveLinkText?: string;
|
|
140
|
+
}
|
|
141
|
+
declare const StagingAlert: ({ liveUrl, liveLinkText, }: StagingAlertProps) => react_jsx_runtime.JSX.Element;
|
|
142
|
+
|
|
85
143
|
/**
|
|
86
144
|
* useState backed by localStorage — syncs value on mount and persists on change.
|
|
87
145
|
*/
|
|
@@ -92,4 +150,4 @@ declare const handleCopyTextToClipboard: ({ clipboardText, }: {
|
|
|
92
150
|
clipboardText: string | number | null | undefined;
|
|
93
151
|
}) => Promise<boolean>;
|
|
94
152
|
|
|
95
|
-
export { AutoComplete, type AutoCompleteProps, ButtonLoader, type ButtonLoaderProps, CopyId, type CopyIdProps, CustomAnchor, type CustomAnchorProps, Modal, type ModalProps, ReadMore, type ReadMoreProps, SearchBar, type SearchBarProps, cn, handleCopyTextToClipboard, useLocalStorage };
|
|
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 };
|
package/dist/index.d.ts
CHANGED
|
@@ -22,6 +22,21 @@ interface AutoCompleteProps<T> {
|
|
|
22
22
|
}
|
|
23
23
|
declare function AutoComplete<T>({ label, value, options, disabled, error, className, getOptionLabel, isOptionEqualToValue, isLoading, renderOption, onChange, onInputChange, }: AutoCompleteProps<T>): react_jsx_runtime.JSX.Element;
|
|
24
24
|
|
|
25
|
+
interface BreadcrumbProps {
|
|
26
|
+
/** Current URL pathname — pass location.pathname (React Router) or router.pathname (Next.js) */
|
|
27
|
+
pathname: string;
|
|
28
|
+
/** Called when a breadcrumb is clicked — pass navigate() (React Router) or router.push (Next.js) */
|
|
29
|
+
onNavigate: (path: string) => void;
|
|
30
|
+
/** Paths that depend on slug/id — clicking these will go back instead of navigating directly */
|
|
31
|
+
dependentPaths?: string[];
|
|
32
|
+
/** Show browser-style back/forward nav arrows before the breadcrumbs */
|
|
33
|
+
showNavArrows?: boolean;
|
|
34
|
+
className?: string;
|
|
35
|
+
linkClassName?: string;
|
|
36
|
+
activeClassName?: string;
|
|
37
|
+
}
|
|
38
|
+
declare const Breadcrumb: ({ pathname, onNavigate, dependentPaths, showNavArrows, className, linkClassName, activeClassName, }: BreadcrumbProps) => react_jsx_runtime.JSX.Element;
|
|
39
|
+
|
|
25
40
|
interface ButtonLoaderProps {
|
|
26
41
|
className?: string;
|
|
27
42
|
}
|
|
@@ -43,6 +58,43 @@ interface CustomAnchorProps {
|
|
|
43
58
|
}
|
|
44
59
|
declare const CustomAnchor: ({ displayText, href, className, openInNewTab, }: CustomAnchorProps) => react_jsx_runtime.JSX.Element;
|
|
45
60
|
|
|
61
|
+
interface CustomInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
62
|
+
label?: string;
|
|
63
|
+
error?: boolean;
|
|
64
|
+
}
|
|
65
|
+
declare const CustomInput: React.ForwardRefExoticComponent<CustomInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
66
|
+
|
|
67
|
+
type DrawerAnchor = "left" | "right" | "top" | "bottom";
|
|
68
|
+
interface DrawerProps {
|
|
69
|
+
open: boolean;
|
|
70
|
+
anchor?: DrawerAnchor;
|
|
71
|
+
children: React.ReactNode;
|
|
72
|
+
className?: string;
|
|
73
|
+
onClose: () => void;
|
|
74
|
+
}
|
|
75
|
+
declare const Drawer: ({ open, anchor, children, className, onClose, }: DrawerProps) => react_jsx_runtime.JSX.Element;
|
|
76
|
+
|
|
77
|
+
interface InputTitleWithRequiredProps {
|
|
78
|
+
title: string;
|
|
79
|
+
isRequired?: boolean;
|
|
80
|
+
className?: string;
|
|
81
|
+
}
|
|
82
|
+
declare const InputTitleWithRequired: ({ title, isRequired, className, }: InputTitleWithRequiredProps) => react_jsx_runtime.JSX.Element;
|
|
83
|
+
|
|
84
|
+
interface FilterDrawerProps {
|
|
85
|
+
open: boolean;
|
|
86
|
+
title?: string;
|
|
87
|
+
anchor?: DrawerAnchor;
|
|
88
|
+
children?: React.ReactNode;
|
|
89
|
+
childrenClassName?: string;
|
|
90
|
+
applyBtnText?: string;
|
|
91
|
+
clearBtnText?: string;
|
|
92
|
+
handleClose: () => void;
|
|
93
|
+
handleApplyFilters: () => void;
|
|
94
|
+
handleClearFilters: () => void;
|
|
95
|
+
}
|
|
96
|
+
declare const FilterDrawer: ({ open, title, anchor, children, childrenClassName, applyBtnText, clearBtnText, handleClose, handleApplyFilters, handleClearFilters, }: FilterDrawerProps) => react_jsx_runtime.JSX.Element;
|
|
97
|
+
|
|
46
98
|
interface ModalProps {
|
|
47
99
|
show: boolean;
|
|
48
100
|
title?: string;
|
|
@@ -82,6 +134,12 @@ interface SearchBarProps {
|
|
|
82
134
|
}
|
|
83
135
|
declare function SearchBar({ value, placeHolder, wrapperClass, className, searchParamQuery, onChange, handleInputKey, handleClearInput, }: SearchBarProps): react_jsx_runtime.JSX.Element;
|
|
84
136
|
|
|
137
|
+
interface StagingAlertProps {
|
|
138
|
+
liveUrl: string;
|
|
139
|
+
liveLinkText?: string;
|
|
140
|
+
}
|
|
141
|
+
declare const StagingAlert: ({ liveUrl, liveLinkText, }: StagingAlertProps) => react_jsx_runtime.JSX.Element;
|
|
142
|
+
|
|
85
143
|
/**
|
|
86
144
|
* useState backed by localStorage — syncs value on mount and persists on change.
|
|
87
145
|
*/
|
|
@@ -92,4 +150,4 @@ declare const handleCopyTextToClipboard: ({ clipboardText, }: {
|
|
|
92
150
|
clipboardText: string | number | null | undefined;
|
|
93
151
|
}) => Promise<boolean>;
|
|
94
152
|
|
|
95
|
-
export { AutoComplete, type AutoCompleteProps, ButtonLoader, type ButtonLoaderProps, CopyId, type CopyIdProps, CustomAnchor, type CustomAnchorProps, Modal, type ModalProps, ReadMore, type ReadMoreProps, SearchBar, type SearchBarProps, cn, handleCopyTextToClipboard, useLocalStorage };
|
|
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 };
|
package/dist/index.js
CHANGED
|
@@ -8,7 +8,34 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
|
8
8
|
|
|
9
9
|
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
var __defProp = Object.defineProperty;
|
|
12
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
13
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
14
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
15
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
16
|
+
var __spreadValues = (a, b) => {
|
|
17
|
+
for (var prop in b || (b = {}))
|
|
18
|
+
if (__hasOwnProp.call(b, prop))
|
|
19
|
+
__defNormalProp(a, prop, b[prop]);
|
|
20
|
+
if (__getOwnPropSymbols)
|
|
21
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
22
|
+
if (__propIsEnum.call(b, prop))
|
|
23
|
+
__defNormalProp(a, prop, b[prop]);
|
|
24
|
+
}
|
|
25
|
+
return a;
|
|
26
|
+
};
|
|
27
|
+
var __objRest = (source, exclude) => {
|
|
28
|
+
var target = {};
|
|
29
|
+
for (var prop in source)
|
|
30
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
31
|
+
target[prop] = source[prop];
|
|
32
|
+
if (source != null && __getOwnPropSymbols)
|
|
33
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
34
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
35
|
+
target[prop] = source[prop];
|
|
36
|
+
}
|
|
37
|
+
return target;
|
|
38
|
+
};
|
|
12
39
|
function AutoComplete({
|
|
13
40
|
label,
|
|
14
41
|
value,
|
|
@@ -102,7 +129,7 @@ function AutoComplete({
|
|
|
102
129
|
{
|
|
103
130
|
className: [
|
|
104
131
|
"absolute inset-0 rounded-md border pointer-events-none transition-colors",
|
|
105
|
-
error ? "border-red-400" : open ? "border-
|
|
132
|
+
error ? "border-red-400" : open ? "border-skprimary border-2" : "border-gray-300"
|
|
106
133
|
].join(" "),
|
|
107
134
|
style: { paddingLeft: "8px" },
|
|
108
135
|
children: label && /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -126,7 +153,7 @@ function AutoComplete({
|
|
|
126
153
|
className: [
|
|
127
154
|
"absolute left-3 transition-all duration-150 pointer-events-none",
|
|
128
155
|
isFloated ? "-top-[9px] text-[11px] bg-white px-1" : "top-1/2 -translate-y-1/2 text-[13px]",
|
|
129
|
-
error ? "text-red-500" : isFloated || open ? "text-
|
|
156
|
+
error ? "text-red-500" : isFloated || open ? "text-skprimary" : "text-gray-500"
|
|
130
157
|
].join(" "),
|
|
131
158
|
children: label
|
|
132
159
|
}
|
|
@@ -245,7 +272,7 @@ function AutoComplete({
|
|
|
245
272
|
onMouseEnter: () => setHighlightedIndex(idx),
|
|
246
273
|
className: [
|
|
247
274
|
"px-3 py-2 text-[13px] cursor-pointer select-none",
|
|
248
|
-
highlightedIndex === idx ? "bg-
|
|
275
|
+
highlightedIndex === idx ? "bg-skprimary/10 text-skprimary" : "text-gray-700",
|
|
249
276
|
isSelected({ option }) ? "font-semibold" : ""
|
|
250
277
|
].join(" ")
|
|
251
278
|
};
|
|
@@ -266,6 +293,112 @@ function AutoComplete({
|
|
|
266
293
|
}
|
|
267
294
|
);
|
|
268
295
|
}
|
|
296
|
+
var generateBreadcrumbs = (pathname) => {
|
|
297
|
+
const pathnames = pathname.split("/").filter((x) => x);
|
|
298
|
+
const breadcrumbs = [{ label: "Home", href: "/" }];
|
|
299
|
+
pathnames.forEach((segment, index) => {
|
|
300
|
+
const href = `/${pathnames.slice(0, index + 1).join("/")}`;
|
|
301
|
+
breadcrumbs.push({
|
|
302
|
+
label: segment.replace(/-/g, " "),
|
|
303
|
+
href
|
|
304
|
+
});
|
|
305
|
+
});
|
|
306
|
+
return breadcrumbs;
|
|
307
|
+
};
|
|
308
|
+
var Breadcrumb = ({
|
|
309
|
+
pathname,
|
|
310
|
+
onNavigate,
|
|
311
|
+
dependentPaths = [],
|
|
312
|
+
showNavArrows = false,
|
|
313
|
+
className,
|
|
314
|
+
linkClassName,
|
|
315
|
+
activeClassName
|
|
316
|
+
}) => {
|
|
317
|
+
const breadcrumbs = generateBreadcrumbs(pathname);
|
|
318
|
+
const handleClick = ({ e, href }) => {
|
|
319
|
+
e.preventDefault();
|
|
320
|
+
const isDependent = dependentPaths.some((route) => href.includes(route));
|
|
321
|
+
if (isDependent) {
|
|
322
|
+
history.go(-1);
|
|
323
|
+
return;
|
|
324
|
+
}
|
|
325
|
+
onNavigate(href);
|
|
326
|
+
};
|
|
327
|
+
return /* @__PURE__ */ jsxRuntime.jsx("nav", { role: "presentation", "aria-label": "breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
328
|
+
"ol",
|
|
329
|
+
{
|
|
330
|
+
className: [
|
|
331
|
+
"flex flex-wrap items-center gap-1 text-sm",
|
|
332
|
+
className || ""
|
|
333
|
+
].join(" "),
|
|
334
|
+
children: [
|
|
335
|
+
showNavArrows && /* @__PURE__ */ jsxRuntime.jsx("li", { className: "flex items-center mr-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center rounded-md overflow-hidden gap-1 px-2 py-1", children: [
|
|
336
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
337
|
+
"button",
|
|
338
|
+
{
|
|
339
|
+
type: "button",
|
|
340
|
+
onClick: () => history.go(-1),
|
|
341
|
+
title: "Go back",
|
|
342
|
+
className: " text-base leading-none hover:opacity-70 transition-opacity",
|
|
343
|
+
children: "\u2190"
|
|
344
|
+
}
|
|
345
|
+
),
|
|
346
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
347
|
+
"button",
|
|
348
|
+
{
|
|
349
|
+
type: "button",
|
|
350
|
+
onClick: () => history.go(1),
|
|
351
|
+
title: "Go forward",
|
|
352
|
+
className: "text-base leading-none hover:opacity-70 transition-opacity",
|
|
353
|
+
children: "\u2192"
|
|
354
|
+
}
|
|
355
|
+
)
|
|
356
|
+
] }) }),
|
|
357
|
+
breadcrumbs.map((breadcrumb, index) => {
|
|
358
|
+
const isLast = index === breadcrumbs.length - 1;
|
|
359
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-1", children: [
|
|
360
|
+
isLast ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
361
|
+
"span",
|
|
362
|
+
{
|
|
363
|
+
className: [
|
|
364
|
+
"capitalize text-[13px] cursor-default",
|
|
365
|
+
activeClassName || "font-medium"
|
|
366
|
+
].join(" "),
|
|
367
|
+
children: breadcrumb.label
|
|
368
|
+
}
|
|
369
|
+
) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
370
|
+
"a",
|
|
371
|
+
{
|
|
372
|
+
href: breadcrumb.href,
|
|
373
|
+
"data-path": breadcrumb.href,
|
|
374
|
+
onClick: (e) => handleClick({ e, href: breadcrumb.href }),
|
|
375
|
+
className: [
|
|
376
|
+
"capitalize text-[13px] cursor-pointer hover:underline transition-colors opacity-85",
|
|
377
|
+
linkClassName || "hover:text-skprimary"
|
|
378
|
+
].join(" "),
|
|
379
|
+
children: breadcrumb.label
|
|
380
|
+
}
|
|
381
|
+
),
|
|
382
|
+
!isLast && /* @__PURE__ */ jsxRuntime.jsx(
|
|
383
|
+
"svg",
|
|
384
|
+
{
|
|
385
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
386
|
+
className: "w-3.5 h-3.5 shrink-0 opacity-60",
|
|
387
|
+
viewBox: "0 0 24 24",
|
|
388
|
+
fill: "none",
|
|
389
|
+
stroke: "currentColor",
|
|
390
|
+
strokeWidth: "2",
|
|
391
|
+
strokeLinecap: "round",
|
|
392
|
+
strokeLinejoin: "round",
|
|
393
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" })
|
|
394
|
+
}
|
|
395
|
+
)
|
|
396
|
+
] }, index);
|
|
397
|
+
})
|
|
398
|
+
]
|
|
399
|
+
}
|
|
400
|
+
) });
|
|
401
|
+
};
|
|
269
402
|
var ButtonLoader = ({ className }) => {
|
|
270
403
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
271
404
|
"svg",
|
|
@@ -358,8 +491,8 @@ var CopyId = ({
|
|
|
358
491
|
{
|
|
359
492
|
onClick: handleClick,
|
|
360
493
|
className: [
|
|
361
|
-
"border border-
|
|
362
|
-
"rounded-[24px] text-[11px] mt-1 hover:bg-
|
|
494
|
+
"border border-skprimary px-3 py-[1px] text-skprimary",
|
|
495
|
+
"rounded-[24px] text-[11px] mt-1 hover:bg-skprimary/10 transition-colors",
|
|
363
496
|
className || ""
|
|
364
497
|
].join(" "),
|
|
365
498
|
children: [
|
|
@@ -386,6 +519,175 @@ var CustomAnchor = ({
|
|
|
386
519
|
}
|
|
387
520
|
);
|
|
388
521
|
};
|
|
522
|
+
var CustomInput = React__default.default.forwardRef(
|
|
523
|
+
(_a, ref) => {
|
|
524
|
+
var _b = _a, { label: _label, error, className, type } = _b, props = __objRest(_b, ["label", "error", "className", "type"]);
|
|
525
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
526
|
+
"input",
|
|
527
|
+
__spreadValues({
|
|
528
|
+
ref,
|
|
529
|
+
type,
|
|
530
|
+
className: type === "checkbox" ? className || "" : [
|
|
531
|
+
"w-full h-[45px] text-[14.5px] px-2 border rounded-md",
|
|
532
|
+
"focus:outline-none focus:ring-1 focus:ring-skprimary focus:border-skprimary",
|
|
533
|
+
"placeholder:text-gray-500 text-gray-800",
|
|
534
|
+
"disabled:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60",
|
|
535
|
+
"transition-colors",
|
|
536
|
+
error ? "border-red-500 focus:ring-red-400" : "border-gray-300",
|
|
537
|
+
className || ""
|
|
538
|
+
].join(" ")
|
|
539
|
+
}, props)
|
|
540
|
+
);
|
|
541
|
+
}
|
|
542
|
+
);
|
|
543
|
+
CustomInput.displayName = "CustomInput";
|
|
544
|
+
var translateClass = {
|
|
545
|
+
right: { hidden: "translate-x-full", visible: "translate-x-0" },
|
|
546
|
+
left: { hidden: "-translate-x-full", visible: "translate-x-0" },
|
|
547
|
+
top: { hidden: "-translate-y-full", visible: "translate-y-0" },
|
|
548
|
+
bottom: { hidden: "translate-y-full", visible: "translate-y-0" }
|
|
549
|
+
};
|
|
550
|
+
var positionClass = {
|
|
551
|
+
right: "right-0 top-0 h-full",
|
|
552
|
+
left: "left-0 top-0 h-full",
|
|
553
|
+
top: "top-0 left-0 w-full",
|
|
554
|
+
bottom: "bottom-0 left-0 w-full"
|
|
555
|
+
};
|
|
556
|
+
var Drawer = ({
|
|
557
|
+
open,
|
|
558
|
+
anchor = "right",
|
|
559
|
+
children,
|
|
560
|
+
className,
|
|
561
|
+
onClose
|
|
562
|
+
}) => {
|
|
563
|
+
React.useEffect(() => {
|
|
564
|
+
document.body.style.overflow = open ? "hidden" : "";
|
|
565
|
+
return () => {
|
|
566
|
+
document.body.style.overflow = "";
|
|
567
|
+
};
|
|
568
|
+
}, [open]);
|
|
569
|
+
React.useEffect(() => {
|
|
570
|
+
const handleKeyDown = (e) => {
|
|
571
|
+
if (e.key === "Escape" && open) onClose();
|
|
572
|
+
};
|
|
573
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
574
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
575
|
+
}, [open, onClose]);
|
|
576
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
577
|
+
"div",
|
|
578
|
+
{
|
|
579
|
+
className: [
|
|
580
|
+
"fixed inset-0 z-[1200]",
|
|
581
|
+
open ? "pointer-events-auto" : "pointer-events-none"
|
|
582
|
+
].join(" "),
|
|
583
|
+
children: [
|
|
584
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
585
|
+
"div",
|
|
586
|
+
{
|
|
587
|
+
onClick: onClose,
|
|
588
|
+
className: [
|
|
589
|
+
"absolute inset-0 bg-black transition-opacity duration-300",
|
|
590
|
+
open ? "opacity-50" : "opacity-0"
|
|
591
|
+
].join(" ")
|
|
592
|
+
}
|
|
593
|
+
),
|
|
594
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
595
|
+
"div",
|
|
596
|
+
{
|
|
597
|
+
className: [
|
|
598
|
+
"absolute bg-white shadow-xl transition-transform duration-300",
|
|
599
|
+
positionClass[anchor],
|
|
600
|
+
open ? translateClass[anchor].visible : translateClass[anchor].hidden,
|
|
601
|
+
className || ""
|
|
602
|
+
].join(" "),
|
|
603
|
+
children
|
|
604
|
+
}
|
|
605
|
+
)
|
|
606
|
+
]
|
|
607
|
+
}
|
|
608
|
+
);
|
|
609
|
+
};
|
|
610
|
+
var InputTitleWithRequired = ({
|
|
611
|
+
title,
|
|
612
|
+
isRequired = true,
|
|
613
|
+
className
|
|
614
|
+
}) => {
|
|
615
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `text-sm font-medium ${className || ""}`, children: [
|
|
616
|
+
title,
|
|
617
|
+
" ",
|
|
618
|
+
isRequired && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-red-500", children: "*" })
|
|
619
|
+
] });
|
|
620
|
+
};
|
|
621
|
+
var FilterDrawer = ({
|
|
622
|
+
open,
|
|
623
|
+
title,
|
|
624
|
+
anchor = "right",
|
|
625
|
+
children,
|
|
626
|
+
childrenClassName,
|
|
627
|
+
applyBtnText = "Apply",
|
|
628
|
+
clearBtnText = "Clear",
|
|
629
|
+
handleClose,
|
|
630
|
+
handleApplyFilters,
|
|
631
|
+
handleClearFilters
|
|
632
|
+
}) => {
|
|
633
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Drawer, { open, anchor, onClose: handleClose, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-full w-[300px] bg-white flex flex-col justify-between lg:w-[450px]", children: [
|
|
634
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-3 py-2.5 bg-gray-100 flex justify-between items-center z-10", children: [
|
|
635
|
+
/* @__PURE__ */ jsxRuntime.jsx("h6", { className: "text-lg font-bold flex items-center gap-1", children: title }),
|
|
636
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
637
|
+
"button",
|
|
638
|
+
{
|
|
639
|
+
onClick: handleClose,
|
|
640
|
+
className: "cursor-pointer text-gray-600 hover:text-gray-900 transition-colors",
|
|
641
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
642
|
+
"svg",
|
|
643
|
+
{
|
|
644
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
645
|
+
className: "w-[24px] h-[24px]",
|
|
646
|
+
viewBox: "0 0 24 24",
|
|
647
|
+
fill: "none",
|
|
648
|
+
stroke: "currentColor",
|
|
649
|
+
strokeWidth: "2",
|
|
650
|
+
strokeLinecap: "round",
|
|
651
|
+
strokeLinejoin: "round",
|
|
652
|
+
children: [
|
|
653
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
654
|
+
/* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
655
|
+
]
|
|
656
|
+
}
|
|
657
|
+
)
|
|
658
|
+
}
|
|
659
|
+
)
|
|
660
|
+
] }),
|
|
661
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
662
|
+
"div",
|
|
663
|
+
{
|
|
664
|
+
className: [
|
|
665
|
+
"flex-1 overflow-auto px-2 pb-3",
|
|
666
|
+
childrenClassName || ""
|
|
667
|
+
].join(" "),
|
|
668
|
+
children
|
|
669
|
+
}
|
|
670
|
+
),
|
|
671
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-x-2 py-3 px-4 justify-end bg-gray-100 border-gray-300", children: [
|
|
672
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
673
|
+
"button",
|
|
674
|
+
{
|
|
675
|
+
onClick: handleClearFilters,
|
|
676
|
+
className: "!px-10 py-2 bg-white !text-[15px] text-black rounded-lg",
|
|
677
|
+
children: clearBtnText
|
|
678
|
+
}
|
|
679
|
+
),
|
|
680
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
681
|
+
"button",
|
|
682
|
+
{
|
|
683
|
+
onClick: handleApplyFilters,
|
|
684
|
+
className: "!px-10 py-2 bg-skprimary !text-[15px] text-white rounded-lg",
|
|
685
|
+
children: applyBtnText
|
|
686
|
+
}
|
|
687
|
+
)
|
|
688
|
+
] })
|
|
689
|
+
] }) });
|
|
690
|
+
};
|
|
389
691
|
|
|
390
692
|
// src/utils/modalStack.ts
|
|
391
693
|
var stack = [];
|
|
@@ -475,7 +777,7 @@ function Modal({
|
|
|
475
777
|
}
|
|
476
778
|
)
|
|
477
779
|
] }),
|
|
478
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto px-3.5 py-3", children }),
|
|
780
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { id: "HideScroll", className: "flex-1 overflow-y-auto px-3.5 py-3", children }),
|
|
479
781
|
isButtonsRequired && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-6 py-3 bg-gray-100 flex justify-end space-x-3 rounded-b-md", children: [
|
|
480
782
|
onHide && /* @__PURE__ */ jsxRuntime.jsx(
|
|
481
783
|
"button",
|
|
@@ -493,7 +795,7 @@ function Modal({
|
|
|
493
795
|
className: [
|
|
494
796
|
"px-4 py-2 text-white rounded-md text-[14px] font-semibold",
|
|
495
797
|
"disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
|
|
496
|
-
isWarning ? "bg-red-600 hover:bg-red-700" : "bg-
|
|
798
|
+
isWarning ? "bg-red-600 hover:bg-red-700" : "bg-skprimary hover:bg-skprimary/80"
|
|
497
799
|
].join(" "),
|
|
498
800
|
children: isLoading ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2", children: [
|
|
499
801
|
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -568,7 +870,7 @@ function ReadMore({
|
|
|
568
870
|
"button",
|
|
569
871
|
{
|
|
570
872
|
onClick: handleToggleReadMore,
|
|
571
|
-
className: "text-
|
|
873
|
+
className: "text-skprimary cursor-pointer font-semibold text-[11px]",
|
|
572
874
|
children: isExpanded ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1", children: [
|
|
573
875
|
showCopy && /* @__PURE__ */ jsxRuntime.jsx("span", { onClick: handleCopy, children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
574
876
|
"svg",
|
|
@@ -667,6 +969,42 @@ function SearchBar({
|
|
|
667
969
|
}
|
|
668
970
|
);
|
|
669
971
|
}
|
|
972
|
+
var StagingAlert = ({
|
|
973
|
+
liveUrl,
|
|
974
|
+
liveLinkText = "Live App"
|
|
975
|
+
}) => {
|
|
976
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-fit mt-1 bg-[#ec6c03] px-1 py-1 text-[8px] lg:text-[12px] lg:px-4 lg:py-2 rounded-lg text-white", children: [
|
|
977
|
+
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
978
|
+
"svg",
|
|
979
|
+
{
|
|
980
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
981
|
+
className: "inline-block w-[14px] h-[14px]",
|
|
982
|
+
viewBox: "0 0 24 24",
|
|
983
|
+
fill: "currentColor",
|
|
984
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
|
|
985
|
+
}
|
|
986
|
+
) }),
|
|
987
|
+
" ",
|
|
988
|
+
"You are currently viewing the",
|
|
989
|
+
" ",
|
|
990
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: "staging environment." }),
|
|
991
|
+
" ",
|
|
992
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
|
|
993
|
+
"If you are looking for the live app, please visit:",
|
|
994
|
+
" ",
|
|
995
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
996
|
+
"a",
|
|
997
|
+
{
|
|
998
|
+
href: liveUrl,
|
|
999
|
+
target: "_blank",
|
|
1000
|
+
rel: "noopener noreferrer",
|
|
1001
|
+
className: "underline font-bold",
|
|
1002
|
+
children: liveLinkText
|
|
1003
|
+
}
|
|
1004
|
+
)
|
|
1005
|
+
] })
|
|
1006
|
+
] });
|
|
1007
|
+
};
|
|
670
1008
|
function useLocalStorage(key, initialValue) {
|
|
671
1009
|
const [storedValue, setStoredValue] = React.useState(() => {
|
|
672
1010
|
if (typeof window === "undefined") return initialValue;
|
|
@@ -702,12 +1040,18 @@ function useLocalStorage(key, initialValue) {
|
|
|
702
1040
|
}
|
|
703
1041
|
|
|
704
1042
|
exports.AutoComplete = AutoComplete;
|
|
1043
|
+
exports.Breadcrumb = Breadcrumb;
|
|
705
1044
|
exports.ButtonLoader = ButtonLoader;
|
|
706
1045
|
exports.CopyId = CopyId;
|
|
707
1046
|
exports.CustomAnchor = CustomAnchor;
|
|
1047
|
+
exports.CustomInput = CustomInput;
|
|
1048
|
+
exports.Drawer = Drawer;
|
|
1049
|
+
exports.FilterDrawer = FilterDrawer;
|
|
1050
|
+
exports.InputTitleWithRequired = InputTitleWithRequired;
|
|
708
1051
|
exports.Modal = Modal;
|
|
709
1052
|
exports.ReadMore = ReadMore;
|
|
710
1053
|
exports.SearchBar = SearchBar;
|
|
1054
|
+
exports.StagingAlert = StagingAlert;
|
|
711
1055
|
exports.cn = cn;
|
|
712
1056
|
exports.handleCopyTextToClipboard = handleCopyTextToClipboard;
|
|
713
1057
|
exports.useLocalStorage = useLocalStorage;
|
package/dist/index.mjs
CHANGED
|
@@ -1,8 +1,35 @@
|
|
|
1
1
|
import React, { useId, useRef, useState, useEffect } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
3
|
import { useHotkeys } from 'react-hotkeys-hook';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
var __defProp = Object.defineProperty;
|
|
6
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
9
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
10
|
+
var __spreadValues = (a, b) => {
|
|
11
|
+
for (var prop in b || (b = {}))
|
|
12
|
+
if (__hasOwnProp.call(b, prop))
|
|
13
|
+
__defNormalProp(a, prop, b[prop]);
|
|
14
|
+
if (__getOwnPropSymbols)
|
|
15
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
16
|
+
if (__propIsEnum.call(b, prop))
|
|
17
|
+
__defNormalProp(a, prop, b[prop]);
|
|
18
|
+
}
|
|
19
|
+
return a;
|
|
20
|
+
};
|
|
21
|
+
var __objRest = (source, exclude) => {
|
|
22
|
+
var target = {};
|
|
23
|
+
for (var prop in source)
|
|
24
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
25
|
+
target[prop] = source[prop];
|
|
26
|
+
if (source != null && __getOwnPropSymbols)
|
|
27
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
28
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
}
|
|
31
|
+
return target;
|
|
32
|
+
};
|
|
6
33
|
function AutoComplete({
|
|
7
34
|
label,
|
|
8
35
|
value,
|
|
@@ -96,7 +123,7 @@ function AutoComplete({
|
|
|
96
123
|
{
|
|
97
124
|
className: [
|
|
98
125
|
"absolute inset-0 rounded-md border pointer-events-none transition-colors",
|
|
99
|
-
error ? "border-red-400" : open ? "border-
|
|
126
|
+
error ? "border-red-400" : open ? "border-skprimary border-2" : "border-gray-300"
|
|
100
127
|
].join(" "),
|
|
101
128
|
style: { paddingLeft: "8px" },
|
|
102
129
|
children: label && /* @__PURE__ */ jsx(
|
|
@@ -120,7 +147,7 @@ function AutoComplete({
|
|
|
120
147
|
className: [
|
|
121
148
|
"absolute left-3 transition-all duration-150 pointer-events-none",
|
|
122
149
|
isFloated ? "-top-[9px] text-[11px] bg-white px-1" : "top-1/2 -translate-y-1/2 text-[13px]",
|
|
123
|
-
error ? "text-red-500" : isFloated || open ? "text-
|
|
150
|
+
error ? "text-red-500" : isFloated || open ? "text-skprimary" : "text-gray-500"
|
|
124
151
|
].join(" "),
|
|
125
152
|
children: label
|
|
126
153
|
}
|
|
@@ -239,7 +266,7 @@ function AutoComplete({
|
|
|
239
266
|
onMouseEnter: () => setHighlightedIndex(idx),
|
|
240
267
|
className: [
|
|
241
268
|
"px-3 py-2 text-[13px] cursor-pointer select-none",
|
|
242
|
-
highlightedIndex === idx ? "bg-
|
|
269
|
+
highlightedIndex === idx ? "bg-skprimary/10 text-skprimary" : "text-gray-700",
|
|
243
270
|
isSelected({ option }) ? "font-semibold" : ""
|
|
244
271
|
].join(" ")
|
|
245
272
|
};
|
|
@@ -260,6 +287,112 @@ function AutoComplete({
|
|
|
260
287
|
}
|
|
261
288
|
);
|
|
262
289
|
}
|
|
290
|
+
var generateBreadcrumbs = (pathname) => {
|
|
291
|
+
const pathnames = pathname.split("/").filter((x) => x);
|
|
292
|
+
const breadcrumbs = [{ label: "Home", href: "/" }];
|
|
293
|
+
pathnames.forEach((segment, index) => {
|
|
294
|
+
const href = `/${pathnames.slice(0, index + 1).join("/")}`;
|
|
295
|
+
breadcrumbs.push({
|
|
296
|
+
label: segment.replace(/-/g, " "),
|
|
297
|
+
href
|
|
298
|
+
});
|
|
299
|
+
});
|
|
300
|
+
return breadcrumbs;
|
|
301
|
+
};
|
|
302
|
+
var Breadcrumb = ({
|
|
303
|
+
pathname,
|
|
304
|
+
onNavigate,
|
|
305
|
+
dependentPaths = [],
|
|
306
|
+
showNavArrows = false,
|
|
307
|
+
className,
|
|
308
|
+
linkClassName,
|
|
309
|
+
activeClassName
|
|
310
|
+
}) => {
|
|
311
|
+
const breadcrumbs = generateBreadcrumbs(pathname);
|
|
312
|
+
const handleClick = ({ e, href }) => {
|
|
313
|
+
e.preventDefault();
|
|
314
|
+
const isDependent = dependentPaths.some((route) => href.includes(route));
|
|
315
|
+
if (isDependent) {
|
|
316
|
+
history.go(-1);
|
|
317
|
+
return;
|
|
318
|
+
}
|
|
319
|
+
onNavigate(href);
|
|
320
|
+
};
|
|
321
|
+
return /* @__PURE__ */ jsx("nav", { role: "presentation", "aria-label": "breadcrumb", children: /* @__PURE__ */ jsxs(
|
|
322
|
+
"ol",
|
|
323
|
+
{
|
|
324
|
+
className: [
|
|
325
|
+
"flex flex-wrap items-center gap-1 text-sm",
|
|
326
|
+
className || ""
|
|
327
|
+
].join(" "),
|
|
328
|
+
children: [
|
|
329
|
+
showNavArrows && /* @__PURE__ */ jsx("li", { className: "flex items-center mr-1", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-md overflow-hidden gap-1 px-2 py-1", children: [
|
|
330
|
+
/* @__PURE__ */ jsx(
|
|
331
|
+
"button",
|
|
332
|
+
{
|
|
333
|
+
type: "button",
|
|
334
|
+
onClick: () => history.go(-1),
|
|
335
|
+
title: "Go back",
|
|
336
|
+
className: " text-base leading-none hover:opacity-70 transition-opacity",
|
|
337
|
+
children: "\u2190"
|
|
338
|
+
}
|
|
339
|
+
),
|
|
340
|
+
/* @__PURE__ */ jsx(
|
|
341
|
+
"button",
|
|
342
|
+
{
|
|
343
|
+
type: "button",
|
|
344
|
+
onClick: () => history.go(1),
|
|
345
|
+
title: "Go forward",
|
|
346
|
+
className: "text-base leading-none hover:opacity-70 transition-opacity",
|
|
347
|
+
children: "\u2192"
|
|
348
|
+
}
|
|
349
|
+
)
|
|
350
|
+
] }) }),
|
|
351
|
+
breadcrumbs.map((breadcrumb, index) => {
|
|
352
|
+
const isLast = index === breadcrumbs.length - 1;
|
|
353
|
+
return /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-1", children: [
|
|
354
|
+
isLast ? /* @__PURE__ */ jsx(
|
|
355
|
+
"span",
|
|
356
|
+
{
|
|
357
|
+
className: [
|
|
358
|
+
"capitalize text-[13px] cursor-default",
|
|
359
|
+
activeClassName || "font-medium"
|
|
360
|
+
].join(" "),
|
|
361
|
+
children: breadcrumb.label
|
|
362
|
+
}
|
|
363
|
+
) : /* @__PURE__ */ jsx(
|
|
364
|
+
"a",
|
|
365
|
+
{
|
|
366
|
+
href: breadcrumb.href,
|
|
367
|
+
"data-path": breadcrumb.href,
|
|
368
|
+
onClick: (e) => handleClick({ e, href: breadcrumb.href }),
|
|
369
|
+
className: [
|
|
370
|
+
"capitalize text-[13px] cursor-pointer hover:underline transition-colors opacity-85",
|
|
371
|
+
linkClassName || "hover:text-skprimary"
|
|
372
|
+
].join(" "),
|
|
373
|
+
children: breadcrumb.label
|
|
374
|
+
}
|
|
375
|
+
),
|
|
376
|
+
!isLast && /* @__PURE__ */ jsx(
|
|
377
|
+
"svg",
|
|
378
|
+
{
|
|
379
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
380
|
+
className: "w-3.5 h-3.5 shrink-0 opacity-60",
|
|
381
|
+
viewBox: "0 0 24 24",
|
|
382
|
+
fill: "none",
|
|
383
|
+
stroke: "currentColor",
|
|
384
|
+
strokeWidth: "2",
|
|
385
|
+
strokeLinecap: "round",
|
|
386
|
+
strokeLinejoin: "round",
|
|
387
|
+
children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
|
|
388
|
+
}
|
|
389
|
+
)
|
|
390
|
+
] }, index);
|
|
391
|
+
})
|
|
392
|
+
]
|
|
393
|
+
}
|
|
394
|
+
) });
|
|
395
|
+
};
|
|
263
396
|
var ButtonLoader = ({ className }) => {
|
|
264
397
|
return /* @__PURE__ */ jsxs(
|
|
265
398
|
"svg",
|
|
@@ -352,8 +485,8 @@ var CopyId = ({
|
|
|
352
485
|
{
|
|
353
486
|
onClick: handleClick,
|
|
354
487
|
className: [
|
|
355
|
-
"border border-
|
|
356
|
-
"rounded-[24px] text-[11px] mt-1 hover:bg-
|
|
488
|
+
"border border-skprimary px-3 py-[1px] text-skprimary",
|
|
489
|
+
"rounded-[24px] text-[11px] mt-1 hover:bg-skprimary/10 transition-colors",
|
|
357
490
|
className || ""
|
|
358
491
|
].join(" "),
|
|
359
492
|
children: [
|
|
@@ -380,6 +513,175 @@ var CustomAnchor = ({
|
|
|
380
513
|
}
|
|
381
514
|
);
|
|
382
515
|
};
|
|
516
|
+
var CustomInput = React.forwardRef(
|
|
517
|
+
(_a, ref) => {
|
|
518
|
+
var _b = _a, { label: _label, error, className, type } = _b, props = __objRest(_b, ["label", "error", "className", "type"]);
|
|
519
|
+
return /* @__PURE__ */ jsx(
|
|
520
|
+
"input",
|
|
521
|
+
__spreadValues({
|
|
522
|
+
ref,
|
|
523
|
+
type,
|
|
524
|
+
className: type === "checkbox" ? className || "" : [
|
|
525
|
+
"w-full h-[45px] text-[14.5px] px-2 border rounded-md",
|
|
526
|
+
"focus:outline-none focus:ring-1 focus:ring-skprimary focus:border-skprimary",
|
|
527
|
+
"placeholder:text-gray-500 text-gray-800",
|
|
528
|
+
"disabled:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-60",
|
|
529
|
+
"transition-colors",
|
|
530
|
+
error ? "border-red-500 focus:ring-red-400" : "border-gray-300",
|
|
531
|
+
className || ""
|
|
532
|
+
].join(" ")
|
|
533
|
+
}, props)
|
|
534
|
+
);
|
|
535
|
+
}
|
|
536
|
+
);
|
|
537
|
+
CustomInput.displayName = "CustomInput";
|
|
538
|
+
var translateClass = {
|
|
539
|
+
right: { hidden: "translate-x-full", visible: "translate-x-0" },
|
|
540
|
+
left: { hidden: "-translate-x-full", visible: "translate-x-0" },
|
|
541
|
+
top: { hidden: "-translate-y-full", visible: "translate-y-0" },
|
|
542
|
+
bottom: { hidden: "translate-y-full", visible: "translate-y-0" }
|
|
543
|
+
};
|
|
544
|
+
var positionClass = {
|
|
545
|
+
right: "right-0 top-0 h-full",
|
|
546
|
+
left: "left-0 top-0 h-full",
|
|
547
|
+
top: "top-0 left-0 w-full",
|
|
548
|
+
bottom: "bottom-0 left-0 w-full"
|
|
549
|
+
};
|
|
550
|
+
var Drawer = ({
|
|
551
|
+
open,
|
|
552
|
+
anchor = "right",
|
|
553
|
+
children,
|
|
554
|
+
className,
|
|
555
|
+
onClose
|
|
556
|
+
}) => {
|
|
557
|
+
useEffect(() => {
|
|
558
|
+
document.body.style.overflow = open ? "hidden" : "";
|
|
559
|
+
return () => {
|
|
560
|
+
document.body.style.overflow = "";
|
|
561
|
+
};
|
|
562
|
+
}, [open]);
|
|
563
|
+
useEffect(() => {
|
|
564
|
+
const handleKeyDown = (e) => {
|
|
565
|
+
if (e.key === "Escape" && open) onClose();
|
|
566
|
+
};
|
|
567
|
+
document.addEventListener("keydown", handleKeyDown);
|
|
568
|
+
return () => document.removeEventListener("keydown", handleKeyDown);
|
|
569
|
+
}, [open, onClose]);
|
|
570
|
+
return /* @__PURE__ */ jsxs(
|
|
571
|
+
"div",
|
|
572
|
+
{
|
|
573
|
+
className: [
|
|
574
|
+
"fixed inset-0 z-[1200]",
|
|
575
|
+
open ? "pointer-events-auto" : "pointer-events-none"
|
|
576
|
+
].join(" "),
|
|
577
|
+
children: [
|
|
578
|
+
/* @__PURE__ */ jsx(
|
|
579
|
+
"div",
|
|
580
|
+
{
|
|
581
|
+
onClick: onClose,
|
|
582
|
+
className: [
|
|
583
|
+
"absolute inset-0 bg-black transition-opacity duration-300",
|
|
584
|
+
open ? "opacity-50" : "opacity-0"
|
|
585
|
+
].join(" ")
|
|
586
|
+
}
|
|
587
|
+
),
|
|
588
|
+
/* @__PURE__ */ jsx(
|
|
589
|
+
"div",
|
|
590
|
+
{
|
|
591
|
+
className: [
|
|
592
|
+
"absolute bg-white shadow-xl transition-transform duration-300",
|
|
593
|
+
positionClass[anchor],
|
|
594
|
+
open ? translateClass[anchor].visible : translateClass[anchor].hidden,
|
|
595
|
+
className || ""
|
|
596
|
+
].join(" "),
|
|
597
|
+
children
|
|
598
|
+
}
|
|
599
|
+
)
|
|
600
|
+
]
|
|
601
|
+
}
|
|
602
|
+
);
|
|
603
|
+
};
|
|
604
|
+
var InputTitleWithRequired = ({
|
|
605
|
+
title,
|
|
606
|
+
isRequired = true,
|
|
607
|
+
className
|
|
608
|
+
}) => {
|
|
609
|
+
return /* @__PURE__ */ jsxs("div", { className: `text-sm font-medium ${className || ""}`, children: [
|
|
610
|
+
title,
|
|
611
|
+
" ",
|
|
612
|
+
isRequired && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" })
|
|
613
|
+
] });
|
|
614
|
+
};
|
|
615
|
+
var FilterDrawer = ({
|
|
616
|
+
open,
|
|
617
|
+
title,
|
|
618
|
+
anchor = "right",
|
|
619
|
+
children,
|
|
620
|
+
childrenClassName,
|
|
621
|
+
applyBtnText = "Apply",
|
|
622
|
+
clearBtnText = "Clear",
|
|
623
|
+
handleClose,
|
|
624
|
+
handleApplyFilters,
|
|
625
|
+
handleClearFilters
|
|
626
|
+
}) => {
|
|
627
|
+
return /* @__PURE__ */ jsx(Drawer, { open, anchor, onClose: handleClose, children: /* @__PURE__ */ jsxs("div", { className: "relative h-full w-[300px] bg-white flex flex-col justify-between lg:w-[450px]", children: [
|
|
628
|
+
/* @__PURE__ */ jsxs("div", { className: "px-3 py-2.5 bg-gray-100 flex justify-between items-center z-10", children: [
|
|
629
|
+
/* @__PURE__ */ jsx("h6", { className: "text-lg font-bold flex items-center gap-1", children: title }),
|
|
630
|
+
/* @__PURE__ */ jsx(
|
|
631
|
+
"button",
|
|
632
|
+
{
|
|
633
|
+
onClick: handleClose,
|
|
634
|
+
className: "cursor-pointer text-gray-600 hover:text-gray-900 transition-colors",
|
|
635
|
+
children: /* @__PURE__ */ jsxs(
|
|
636
|
+
"svg",
|
|
637
|
+
{
|
|
638
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
639
|
+
className: "w-[24px] h-[24px]",
|
|
640
|
+
viewBox: "0 0 24 24",
|
|
641
|
+
fill: "none",
|
|
642
|
+
stroke: "currentColor",
|
|
643
|
+
strokeWidth: "2",
|
|
644
|
+
strokeLinecap: "round",
|
|
645
|
+
strokeLinejoin: "round",
|
|
646
|
+
children: [
|
|
647
|
+
/* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
|
|
648
|
+
/* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
|
|
649
|
+
]
|
|
650
|
+
}
|
|
651
|
+
)
|
|
652
|
+
}
|
|
653
|
+
)
|
|
654
|
+
] }),
|
|
655
|
+
/* @__PURE__ */ jsx(
|
|
656
|
+
"div",
|
|
657
|
+
{
|
|
658
|
+
className: [
|
|
659
|
+
"flex-1 overflow-auto px-2 pb-3",
|
|
660
|
+
childrenClassName || ""
|
|
661
|
+
].join(" "),
|
|
662
|
+
children
|
|
663
|
+
}
|
|
664
|
+
),
|
|
665
|
+
/* @__PURE__ */ jsxs("div", { className: "flex gap-x-2 py-3 px-4 justify-end bg-gray-100 border-gray-300", children: [
|
|
666
|
+
/* @__PURE__ */ jsx(
|
|
667
|
+
"button",
|
|
668
|
+
{
|
|
669
|
+
onClick: handleClearFilters,
|
|
670
|
+
className: "!px-10 py-2 bg-white !text-[15px] text-black rounded-lg",
|
|
671
|
+
children: clearBtnText
|
|
672
|
+
}
|
|
673
|
+
),
|
|
674
|
+
/* @__PURE__ */ jsx(
|
|
675
|
+
"button",
|
|
676
|
+
{
|
|
677
|
+
onClick: handleApplyFilters,
|
|
678
|
+
className: "!px-10 py-2 bg-skprimary !text-[15px] text-white rounded-lg",
|
|
679
|
+
children: applyBtnText
|
|
680
|
+
}
|
|
681
|
+
)
|
|
682
|
+
] })
|
|
683
|
+
] }) });
|
|
684
|
+
};
|
|
383
685
|
|
|
384
686
|
// src/utils/modalStack.ts
|
|
385
687
|
var stack = [];
|
|
@@ -469,7 +771,7 @@ function Modal({
|
|
|
469
771
|
}
|
|
470
772
|
)
|
|
471
773
|
] }),
|
|
472
|
-
/* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto px-3.5 py-3", children }),
|
|
774
|
+
/* @__PURE__ */ jsx("div", { id: "HideScroll", className: "flex-1 overflow-y-auto px-3.5 py-3", children }),
|
|
473
775
|
isButtonsRequired && /* @__PURE__ */ jsxs("div", { className: "px-6 py-3 bg-gray-100 flex justify-end space-x-3 rounded-b-md", children: [
|
|
474
776
|
onHide && /* @__PURE__ */ jsx(
|
|
475
777
|
"button",
|
|
@@ -487,7 +789,7 @@ function Modal({
|
|
|
487
789
|
className: [
|
|
488
790
|
"px-4 py-2 text-white rounded-md text-[14px] font-semibold",
|
|
489
791
|
"disabled:opacity-50 disabled:cursor-not-allowed transition-colors",
|
|
490
|
-
isWarning ? "bg-red-600 hover:bg-red-700" : "bg-
|
|
792
|
+
isWarning ? "bg-red-600 hover:bg-red-700" : "bg-skprimary hover:bg-skprimary/80"
|
|
491
793
|
].join(" "),
|
|
492
794
|
children: isLoading ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
|
|
493
795
|
/* @__PURE__ */ jsxs(
|
|
@@ -562,7 +864,7 @@ function ReadMore({
|
|
|
562
864
|
"button",
|
|
563
865
|
{
|
|
564
866
|
onClick: handleToggleReadMore,
|
|
565
|
-
className: "text-
|
|
867
|
+
className: "text-skprimary cursor-pointer font-semibold text-[11px]",
|
|
566
868
|
children: isExpanded ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
|
|
567
869
|
showCopy && /* @__PURE__ */ jsx("span", { onClick: handleCopy, children: /* @__PURE__ */ jsxs(
|
|
568
870
|
"svg",
|
|
@@ -661,6 +963,42 @@ function SearchBar({
|
|
|
661
963
|
}
|
|
662
964
|
);
|
|
663
965
|
}
|
|
966
|
+
var StagingAlert = ({
|
|
967
|
+
liveUrl,
|
|
968
|
+
liveLinkText = "Live App"
|
|
969
|
+
}) => {
|
|
970
|
+
return /* @__PURE__ */ jsxs("div", { className: "w-fit mt-1 bg-[#ec6c03] px-1 py-1 text-[8px] lg:text-[12px] lg:px-4 lg:py-2 rounded-lg text-white", children: [
|
|
971
|
+
/* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx(
|
|
972
|
+
"svg",
|
|
973
|
+
{
|
|
974
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
975
|
+
className: "inline-block w-[14px] h-[14px]",
|
|
976
|
+
viewBox: "0 0 24 24",
|
|
977
|
+
fill: "currentColor",
|
|
978
|
+
children: /* @__PURE__ */ jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" })
|
|
979
|
+
}
|
|
980
|
+
) }),
|
|
981
|
+
" ",
|
|
982
|
+
"You are currently viewing the",
|
|
983
|
+
" ",
|
|
984
|
+
/* @__PURE__ */ jsx("span", { className: "font-bold", children: "staging environment." }),
|
|
985
|
+
" ",
|
|
986
|
+
/* @__PURE__ */ jsxs("span", { children: [
|
|
987
|
+
"If you are looking for the live app, please visit:",
|
|
988
|
+
" ",
|
|
989
|
+
/* @__PURE__ */ jsx(
|
|
990
|
+
"a",
|
|
991
|
+
{
|
|
992
|
+
href: liveUrl,
|
|
993
|
+
target: "_blank",
|
|
994
|
+
rel: "noopener noreferrer",
|
|
995
|
+
className: "underline font-bold",
|
|
996
|
+
children: liveLinkText
|
|
997
|
+
}
|
|
998
|
+
)
|
|
999
|
+
] })
|
|
1000
|
+
] });
|
|
1001
|
+
};
|
|
664
1002
|
function useLocalStorage(key, initialValue) {
|
|
665
1003
|
const [storedValue, setStoredValue] = useState(() => {
|
|
666
1004
|
if (typeof window === "undefined") return initialValue;
|
|
@@ -695,4 +1033,4 @@ function useLocalStorage(key, initialValue) {
|
|
|
695
1033
|
return [storedValue, setValue, remove];
|
|
696
1034
|
}
|
|
697
1035
|
|
|
698
|
-
export { AutoComplete, ButtonLoader, CopyId, CustomAnchor, Modal, ReadMore, SearchBar, cn, handleCopyTextToClipboard, useLocalStorage };
|
|
1036
|
+
export { 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}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0}.-top-\[9px\]{top:-9px}.left-3{left:.75rem}.top-1\/2{top:50%}.z-50{z-index:50}.z-\[999\]{z-index:999}.ml-2{margin-left:.5rem}.mt-1{margin-top:.25rem}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.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}.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-\[95\%\]{width:95%}.w-full{width:100%}.flex-1{flex:1 1 0%}.shrink-0{flex-shrink:0}.-translate-y-1\/2{--tw-translate-y:-50%}.-translate-y-1\/2,.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-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}.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-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-primary{border-color:var(--color-primary,#534f8f)}.border-red-400{--tw-border-opacity:1;border-color:rgb(248 113 113/var(--tw-border-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-primary{background-color:var(--color-primary,#534f8f)}.bg-red-600{--tw-bg-opacity:1;background-color:rgb(220 38 38/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-4{padding:1rem}.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-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-\[1px\]{padding-top:1px;padding-bottom:1px}.py-\[8px\]{padding-top:8px;padding-bottom:8px}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[13px\]{font-size:13px}.text-\[14px\]{font-size:14px}.text-\[17px\]{font-size:17px}.text-sm{font-size:.875rem;line-height:1.25rem}.font-bold{font-weight:700}.font-semibold{font-weight:600}.capitalize{text-transform:capitalize}.leading-\[20px\]{line-height:20px}.tracking-wide{letter-spacing:.025em}.text-\[\#333333\]{--tw-text-opacity:1;color:rgb(51 51 51/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-primary{color:var(--color-primary,#534f8f)}.text-red-500{--tw-text-opacity:1;color:rgb(239 68 68/var(--tw-text-opacity,1))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.opacity-25{opacity:.25}.opacity-60{opacity:.6}.opacity-75{opacity:.75}.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);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-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-150,.transition-transform{transition-duration:.15s}.placeholder\:text-\[13px\]::-moz-placeholder{font-size:13px}.placeholder\:text-\[13px\]::placeholder{font-size:13px}.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\:no-underline:hover{text-decoration-line:none}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:opacity-50:disabled{opacity:.5}@media (min-width:768px){.md\:w-\[60\%\]{width:60%}}@media (min-width:1024px){.lg\:w-\[30\%\]{width:30%}}
|
|
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-\[30\%\]{width:30%}.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}}
|