@dust-tt/sparkle 0.1.23 → 0.1.24
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/cjs/components/Button.d.ts +3 -2
- package/dist/cjs/index.js +107 -86
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/stories/Button.stories.d.ts +3 -0
- package/dist/cjs/stories/Item.stories.d.ts +3 -1
- package/dist/esm/components/Button.d.ts +3 -2
- package/dist/esm/index.js +107 -86
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/stories/Button.stories.d.ts +3 -0
- package/dist/esm/stories/Item.stories.d.ts +3 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -7,5 +7,8 @@ declare const meta: {
|
|
|
7
7
|
export default meta;
|
|
8
8
|
type Story = StoryObj<typeof meta>;
|
|
9
9
|
export declare const Primary: Story;
|
|
10
|
+
export declare const IconOnlyPlusTooltip: Story;
|
|
11
|
+
export declare const PrimaryWarning: Story;
|
|
10
12
|
export declare const Secondary: Story;
|
|
13
|
+
export declare const SecondaryWarning: Story;
|
|
11
14
|
export declare const Tertiary: Story;
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import React, { ComponentType, MouseEvent } from "react";
|
|
2
2
|
type ButtonProps = {
|
|
3
|
-
type?: "primary" | "secondary" | "tertiary";
|
|
3
|
+
type?: "primary" | "primaryWarning" | "secondary" | "secondaryWarning" | "tertiary";
|
|
4
4
|
size?: "xs" | "sm" | "md";
|
|
5
5
|
onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
6
6
|
disabled?: boolean;
|
|
7
7
|
label: string;
|
|
8
|
+
labelVisible: boolean;
|
|
8
9
|
icon?: ComponentType;
|
|
9
10
|
className?: string;
|
|
10
11
|
};
|
|
11
|
-
export declare function Button({ type, size, onClick, disabled, label, icon, className, }: ButtonProps): React.JSX.Element;
|
|
12
|
+
export declare function Button({ type, size, onClick, disabled, labelVisible, label, icon, className, }: ButtonProps): React.JSX.Element;
|
|
12
13
|
export {};
|
package/dist/esm/index.js
CHANGED
|
@@ -28,7 +28,7 @@ function styleInject(css, ref) {
|
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
var css_248z = ".s-absolute {\n position: absolute\n}\n.s-relative {\n position: relative\n}\n.s-bottom-full {\n bottom: 100%\n}\n.s-left-1\\/2 {\n left: 50%\n}\n.s-top-full {\n top: 100%\n}\n.s-z-10 {\n z-index: 10\n}\n.-s-mb-px {\n margin-bottom: -1px\n}\n.s-mb-2 {\n margin-bottom: 0.5rem\n}\n.s-mt-2 {\n margin-top: 0.5rem\n}\n.s-box-border {\n box-sizing: border-box\n}\n.s-inline-block {\n display: inline-block\n}\n.s-flex {\n display: flex\n}\n.s-inline-flex {\n display: inline-flex\n}\n.s-hidden {\n display: none\n}\n.s-h-3 {\n height: 0.75rem\n}\n.s-h-4 {\n height: 1rem\n}\n.s-h-5 {\n height: 1.25rem\n}\n.s-h-8 {\n height: 2rem\n}\n.s-w-3 {\n width: 0.75rem\n}\n.s-w-4 {\n width: 1rem\n}\n.s-w-5 {\n width: 1.25rem\n}\n.s-w-8 {\n width: 2rem\n}\n.s-flex-1 {\n flex: 1 1 0%\n}\n.s-shrink {\n flex-shrink: 1\n}\n.s-grow {\n flex-grow: 1\n}\n.s-basis-0 {\n flex-basis: 0px\n}\n.-s-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n 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))\n}\n.-s-translate-y-0 {\n --tw-translate-y: -0px;\n 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))\n}\n.s-translate-y-0 {\n --tw-translate-y: 0px;\n 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))\n}\n.s-translate-y-2 {\n --tw-translate-y: 0.5rem;\n 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))\n}\n.s-scale-95 {\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n 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))\n}\n.s-transform {\n 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))\n}\n.s-cursor-default {\n cursor: default\n}\n.s-cursor-not-allowed {\n cursor: not-allowed\n}\n.s-cursor-pointer {\n cursor: pointer\n}\n.s-select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none\n}\n.s-flex-col {\n flex-direction: column\n}\n.s-items-start {\n align-items: flex-start\n}\n.s-items-center {\n align-items: center\n}\n.s-justify-start {\n justify-content: flex-start\n}\n.s-justify-center {\n justify-content: center\n}\n.s-gap-1 {\n gap: 0.25rem\n}\n.s-gap-x-1 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem\n}\n.s-gap-x-1\\.5 {\n -moz-column-gap: 0.375rem;\n column-gap: 0.375rem\n}\n.s-gap-x-2 {\n -moz-column-gap: 0.5rem;\n column-gap: 0.5rem\n}\n.s-space-x-0 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0px * var(--tw-space-x-reverse));\n margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)))\n}\n.s-self-stretch {\n align-self: stretch\n}\n.s-whitespace-nowrap {\n white-space: nowrap\n}\n.s-rounded {\n border-radius: 0.25rem\n}\n.s-rounded-full {\n border-radius: 9999px\n}\n.s-rounded-md {\n border-radius: 0.375rem\n}\n.s-rounded-xl {\n border-radius: 0.75rem\n}\n.s-border {\n border-width: 1px\n}\n.s-border-b {\n border-bottom-width: 1px\n}\n.s-border-b-2 {\n border-bottom-width: 2px\n}\n.s-border-action-500 {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n.s-border-action-600 {\n --tw-border-opacity: 1;\n border-color: rgb(37 99 235 / var(--tw-border-opacity))\n}\n.s-border-element-600 {\n --tw-border-opacity: 1;\n border-color: rgb(148 163 184 / var(--tw-border-opacity))\n}\n.s-border-structure-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity))\n}\n.s-border-structure-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity))\n}\n.s-border-transparent {\n border-color: transparent\n}\n.s-bg-action-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n.s-bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity))\n}\n.s-bg-structure-0 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n.s-bg-structure-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity))\n}\n.s-px-0 {\n padding-left: 0px;\n padding-right: 0px\n}\n.s-px-0\\.5 {\n padding-left: 0.125rem;\n padding-right: 0.125rem\n}\n.s-px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem\n}\n.s-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem\n}\n.s-px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n.s-px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem\n}\n.s-py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem\n}\n.s-py-1\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem\n}\n.s-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n.s-py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem\n}\n.s-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem\n}\n.s-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n.s-text-xs {\n font-size: 0.75rem;\n line-height: 1rem\n}\n.s-font-bold {\n font-weight: 700\n}\n.s-font-medium {\n font-weight: 500\n}\n.s-font-normal {\n font-weight: 400\n}\n.s-font-semibold {\n font-weight: 600\n}\n.s-text-action-300 {\n --tw-text-opacity: 1;\n color: rgb(147 197 253 / var(--tw-text-opacity))\n}\n.s-text-action-400 {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n.s-text-action-500 {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n.s-text-brand {\n --tw-text-opacity: 1;\n color: rgb(16 185 129 / var(--tw-text-opacity))\n}\n.s-text-element-500 {\n --tw-text-opacity: 1;\n color: rgb(203 213 225 / var(--tw-text-opacity))\n}\n.s-text-element-600 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity))\n}\n.s-text-element-700 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity))\n}\n.s-text-element-800 {\n --tw-text-opacity: 1;\n color: rgb(51 65 85 / var(--tw-text-opacity))\n}\n.s-text-element-900 {\n --tw-text-opacity: 1;\n color: rgb(15 23 42 / var(--tw-text-opacity))\n}\n.s-text-transparent {\n color: transparent\n}\n.s-text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n.s-opacity-0 {\n opacity: 0\n}\n.s-opacity-100 {\n opacity: 1\n}\n.s-opacity-50 {\n opacity: 0.5\n}\n.s-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n.s-transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n.s-transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n.s-transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n.s-transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n.s-duration-200 {\n transition-duration: 200ms\n}\n.s-duration-300 {\n transition-duration: 300ms\n}\n.s-duration-500 {\n transition-duration: 500ms\n}\n.s-ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n.s-ease-out {\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1)\n}\n.hover\\:s-scale-100:hover {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n 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))\n}\n.hover\\:s-scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n 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))\n}\n.hover\\:s-border-action-300:hover {\n --tw-border-opacity: 1;\n border-color: rgb(147 197 253 / var(--tw-border-opacity))\n}\n.hover\\:s-border-action-500:hover {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n.hover\\:s-bg-action-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(191 219 254 / var(--tw-bg-opacity))\n}\n.hover\\:s-bg-action-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(96 165 250 / var(--tw-bg-opacity))\n}\n.hover\\:s-bg-action-50:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(239 246 255 / var(--tw-bg-opacity))\n}\n.hover\\:s-text-action-400:hover {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n.hover\\:s-text-action-500:hover {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n.hover\\:s-text-element-800:hover {\n --tw-text-opacity: 1;\n color: rgb(51 65 85 / var(--tw-text-opacity))\n}\n.hover\\:s-drop-shadow-md:hover {\n --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));\n 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)\n}\n.active\\:s-scale-95:active {\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n 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))\n}\n.active\\:s-border-action-500:active {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n.active\\:s-border-action-700:active {\n --tw-border-opacity: 1;\n border-color: rgb(29 78 216 / var(--tw-border-opacity))\n}\n.active\\:s-bg-action-100:active {\n --tw-bg-opacity: 1;\n background-color: rgb(219 234 254 / var(--tw-bg-opacity))\n}\n.active\\:s-bg-action-600:active {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity))\n}\n.active\\:s-text-action-600:active {\n --tw-text-opacity: 1;\n color: rgb(37 99 235 / var(--tw-text-opacity))\n}\n.active\\:s-text-action-700:active {\n --tw-text-opacity: 1;\n color: rgb(29 78 216 / var(--tw-text-opacity))\n}\n.active\\:s-drop-shadow-none:active {\n --tw-drop-shadow: drop-shadow(0 0 #0000);\n 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)\n}\n.s-group:hover .group-hover\\:-s-translate-y-0 {\n --tw-translate-y: -0px;\n 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))\n}\n.s-group:hover .group-hover\\:-s-translate-y-0\\.5 {\n --tw-translate-y: -0.125rem;\n 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))\n}\n.s-group:hover .group-hover\\:s-text-action-400 {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-border-action-500-dark) {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-action-600-dark) {\n --tw-border-opacity: 1;\n border-color: rgb(96 165 250 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-element-500-dark) {\n --tw-border-opacity: 1;\n border-color: rgb(100 116 139 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-structure-200-dark) {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-structure-300-dark) {\n --tw-border-opacity: 1;\n border-color: rgb(71 85 105 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-bg-action-500-dark) {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-bg-structure-0-dark) {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-bg-structure-50-dark) {\n --tw-bg-opacity: 1;\n background-color: rgb(15 23 42 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-text-action-300-dark) {\n --tw-text-opacity: 1;\n color: rgb(29 78 216 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-action-400-dark) {\n --tw-text-opacity: 1;\n color: rgb(37 99 235 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-action-500-dark) {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-500-dark) {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-600-dark) {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-700-dark) {\n --tw-text-opacity: 1;\n color: rgb(203 213 225 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-900-dark) {\n --tw-text-opacity: 1;\n color: rgb(248 250 252 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-border-action-300-dark:hover) {\n --tw-border-opacity: 1;\n border-color: rgb(29 78 216 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-border-action-500-dark:hover) {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-action-200-dark:hover) {\n --tw-bg-opacity: 1;\n background-color: rgb(30 64 175 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-action-50-dark:hover) {\n --tw-bg-opacity: 1;\n background-color: rgb(23 37 84 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-action-500-dark:hover) {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-text-action-400:hover) {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-text-action-500-dark:hover) {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-text-action-600-dark:hover) {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-border-action-500-dark:active) {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-border-action-700-dark:active) {\n --tw-border-opacity: 1;\n border-color: rgb(147 197 253 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-bg-action-100-dark:active) {\n --tw-bg-opacity: 1;\n background-color: rgb(30 58 138 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-bg-action-600-dark:active) {\n --tw-bg-opacity: 1;\n background-color: rgb(96 165 250 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-text-action-600:active) {\n --tw-text-opacity: 1;\n color: rgb(37 99 235 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-text-action-600-dark:active) {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .s-group:hover .dark\\:group-hover\\:s-text-action-500-dark) {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}";
|
|
31
|
+
var css_248z = ".s-absolute {\n position: absolute\n}\n.s-relative {\n position: relative\n}\n.s-bottom-full {\n bottom: 100%\n}\n.s-left-1\\/2 {\n left: 50%\n}\n.s-top-full {\n top: 100%\n}\n.s-z-10 {\n z-index: 10\n}\n.-s-mb-px {\n margin-bottom: -1px\n}\n.s-mb-2 {\n margin-bottom: 0.5rem\n}\n.s-mt-2 {\n margin-top: 0.5rem\n}\n.s-box-border {\n box-sizing: border-box\n}\n.s-inline-block {\n display: inline-block\n}\n.s-flex {\n display: flex\n}\n.s-inline-flex {\n display: inline-flex\n}\n.s-hidden {\n display: none\n}\n.s-h-3 {\n height: 0.75rem\n}\n.s-h-4 {\n height: 1rem\n}\n.s-h-5 {\n height: 1.25rem\n}\n.s-h-8 {\n height: 2rem\n}\n.s-w-3 {\n width: 0.75rem\n}\n.s-w-4 {\n width: 1rem\n}\n.s-w-5 {\n width: 1.25rem\n}\n.s-w-8 {\n width: 2rem\n}\n.s-flex-1 {\n flex: 1 1 0%\n}\n.s-shrink {\n flex-shrink: 1\n}\n.s-grow {\n flex-grow: 1\n}\n.s-basis-0 {\n flex-basis: 0px\n}\n.-s-translate-x-1\\/2 {\n --tw-translate-x: -50%;\n 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))\n}\n.-s-translate-y-0 {\n --tw-translate-y: -0px;\n 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))\n}\n.s-translate-y-0 {\n --tw-translate-y: 0px;\n 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))\n}\n.s-translate-y-2 {\n --tw-translate-y: 0.5rem;\n 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))\n}\n.s-scale-95 {\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n 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))\n}\n.s-transform {\n 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))\n}\n.s-cursor-default {\n cursor: default\n}\n.s-cursor-not-allowed {\n cursor: not-allowed\n}\n.s-cursor-pointer {\n cursor: pointer\n}\n.s-select-none {\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none\n}\n.s-flex-col {\n flex-direction: column\n}\n.s-items-start {\n align-items: flex-start\n}\n.s-items-center {\n align-items: center\n}\n.s-justify-start {\n justify-content: flex-start\n}\n.s-justify-center {\n justify-content: center\n}\n.s-gap-1 {\n gap: 0.25rem\n}\n.s-gap-x-1 {\n -moz-column-gap: 0.25rem;\n column-gap: 0.25rem\n}\n.s-gap-x-1\\.5 {\n -moz-column-gap: 0.375rem;\n column-gap: 0.375rem\n}\n.s-gap-x-2 {\n -moz-column-gap: 0.5rem;\n column-gap: 0.5rem\n}\n.s-space-x-0 > :not([hidden]) ~ :not([hidden]) {\n --tw-space-x-reverse: 0;\n margin-right: calc(0px * var(--tw-space-x-reverse));\n margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)))\n}\n.s-self-stretch {\n align-self: stretch\n}\n.s-whitespace-nowrap {\n white-space: nowrap\n}\n.s-rounded {\n border-radius: 0.25rem\n}\n.s-rounded-full {\n border-radius: 9999px\n}\n.s-rounded-md {\n border-radius: 0.375rem\n}\n.s-rounded-xl {\n border-radius: 0.75rem\n}\n.s-border {\n border-width: 1px\n}\n.s-border-b {\n border-bottom-width: 1px\n}\n.s-border-b-2 {\n border-bottom-width: 2px\n}\n.s-border-action-500 {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n.s-border-action-600 {\n --tw-border-opacity: 1;\n border-color: rgb(37 99 235 / var(--tw-border-opacity))\n}\n.s-border-element-600 {\n --tw-border-opacity: 1;\n border-color: rgb(148 163 184 / var(--tw-border-opacity))\n}\n.s-border-structure-200 {\n --tw-border-opacity: 1;\n border-color: rgb(226 232 240 / var(--tw-border-opacity))\n}\n.s-border-structure-300 {\n --tw-border-opacity: 1;\n border-color: rgb(203 213 225 / var(--tw-border-opacity))\n}\n.s-border-transparent {\n border-color: transparent\n}\n.s-border-warning-600 {\n --tw-border-opacity: 1;\n border-color: rgb(220 38 38 / var(--tw-border-opacity))\n}\n.s-bg-action-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n.s-bg-gray-200 {\n --tw-bg-opacity: 1;\n background-color: rgb(229 231 235 / var(--tw-bg-opacity))\n}\n.s-bg-structure-0 {\n --tw-bg-opacity: 1;\n background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n.s-bg-structure-50 {\n --tw-bg-opacity: 1;\n background-color: rgb(248 250 252 / var(--tw-bg-opacity))\n}\n.s-bg-warning-500 {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity))\n}\n.s-px-0 {\n padding-left: 0px;\n padding-right: 0px\n}\n.s-px-0\\.5 {\n padding-left: 0.125rem;\n padding-right: 0.125rem\n}\n.s-px-1 {\n padding-left: 0.25rem;\n padding-right: 0.25rem\n}\n.s-px-3 {\n padding-left: 0.75rem;\n padding-right: 0.75rem\n}\n.s-px-4 {\n padding-left: 1rem;\n padding-right: 1rem\n}\n.s-px-5 {\n padding-left: 1.25rem;\n padding-right: 1.25rem\n}\n.s-py-1 {\n padding-top: 0.25rem;\n padding-bottom: 0.25rem\n}\n.s-py-1\\.5 {\n padding-top: 0.375rem;\n padding-bottom: 0.375rem\n}\n.s-py-2 {\n padding-top: 0.5rem;\n padding-bottom: 0.5rem\n}\n.s-py-3 {\n padding-top: 0.75rem;\n padding-bottom: 0.75rem\n}\n.s-text-2xl {\n font-size: 1.5rem;\n line-height: 2rem\n}\n.s-text-sm {\n font-size: 0.875rem;\n line-height: 1.25rem\n}\n.s-text-xs {\n font-size: 0.75rem;\n line-height: 1rem\n}\n.s-font-bold {\n font-weight: 700\n}\n.s-font-medium {\n font-weight: 500\n}\n.s-font-normal {\n font-weight: 400\n}\n.s-font-semibold {\n font-weight: 600\n}\n.s-text-action-300 {\n --tw-text-opacity: 1;\n color: rgb(147 197 253 / var(--tw-text-opacity))\n}\n.s-text-action-400 {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n.s-text-action-500 {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n.s-text-brand {\n --tw-text-opacity: 1;\n color: rgb(16 185 129 / var(--tw-text-opacity))\n}\n.s-text-element-500 {\n --tw-text-opacity: 1;\n color: rgb(203 213 225 / var(--tw-text-opacity))\n}\n.s-text-element-600 {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity))\n}\n.s-text-element-700 {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity))\n}\n.s-text-element-800 {\n --tw-text-opacity: 1;\n color: rgb(51 65 85 / var(--tw-text-opacity))\n}\n.s-text-element-900 {\n --tw-text-opacity: 1;\n color: rgb(15 23 42 / var(--tw-text-opacity))\n}\n.s-text-transparent {\n color: transparent\n}\n.s-text-warning-500 {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity))\n}\n.s-text-white {\n --tw-text-opacity: 1;\n color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n.s-opacity-0 {\n opacity: 0\n}\n.s-opacity-100 {\n opacity: 1\n}\n.s-opacity-50 {\n opacity: 0.5\n}\n.s-shadow-md {\n --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n.s-transition-all {\n transition-property: all;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n.s-transition-colors {\n transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n.s-transition-opacity {\n transition-property: opacity;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n.s-transition-transform {\n transition-property: transform;\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n transition-duration: 150ms\n}\n.s-duration-200 {\n transition-duration: 200ms\n}\n.s-duration-300 {\n transition-duration: 300ms\n}\n.s-duration-500 {\n transition-duration: 500ms\n}\n.s-ease-in-out {\n transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n.s-ease-out {\n transition-timing-function: cubic-bezier(0, 0, 0.2, 1)\n}\n.hover\\:s-scale-100:hover {\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n 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))\n}\n.hover\\:s-scale-110:hover {\n --tw-scale-x: 1.1;\n --tw-scale-y: 1.1;\n 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))\n}\n.hover\\:s-border-action-300:hover {\n --tw-border-opacity: 1;\n border-color: rgb(147 197 253 / var(--tw-border-opacity))\n}\n.hover\\:s-border-action-500:hover {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n.hover\\:s-border-warning-300:hover {\n --tw-border-opacity: 1;\n border-color: rgb(252 165 165 / var(--tw-border-opacity))\n}\n.hover\\:s-border-warning-500:hover {\n --tw-border-opacity: 1;\n border-color: rgb(239 68 68 / var(--tw-border-opacity))\n}\n.hover\\:s-bg-action-200:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(191 219 254 / var(--tw-bg-opacity))\n}\n.hover\\:s-bg-action-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(96 165 250 / var(--tw-bg-opacity))\n}\n.hover\\:s-bg-action-50:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(239 246 255 / var(--tw-bg-opacity))\n}\n.hover\\:s-bg-warning-400:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(248 113 113 / var(--tw-bg-opacity))\n}\n.hover\\:s-bg-warning-50:hover {\n --tw-bg-opacity: 1;\n background-color: rgb(254 242 242 / var(--tw-bg-opacity))\n}\n.hover\\:s-text-action-400:hover {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n.hover\\:s-text-action-500:hover {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n.hover\\:s-text-element-800:hover {\n --tw-text-opacity: 1;\n color: rgb(51 65 85 / var(--tw-text-opacity))\n}\n.hover\\:s-drop-shadow-md:hover {\n --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));\n 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)\n}\n.active\\:s-scale-95:active {\n --tw-scale-x: .95;\n --tw-scale-y: .95;\n 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))\n}\n.active\\:s-border-action-500:active {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n.active\\:s-border-action-700:active {\n --tw-border-opacity: 1;\n border-color: rgb(29 78 216 / var(--tw-border-opacity))\n}\n.active\\:s-border-warning-500:active {\n --tw-border-opacity: 1;\n border-color: rgb(239 68 68 / var(--tw-border-opacity))\n}\n.active\\:s-border-warning-700:active {\n --tw-border-opacity: 1;\n border-color: rgb(185 28 28 / var(--tw-border-opacity))\n}\n.active\\:s-bg-action-100:active {\n --tw-bg-opacity: 1;\n background-color: rgb(219 234 254 / var(--tw-bg-opacity))\n}\n.active\\:s-bg-action-600:active {\n --tw-bg-opacity: 1;\n background-color: rgb(37 99 235 / var(--tw-bg-opacity))\n}\n.active\\:s-bg-warning-100:active {\n --tw-bg-opacity: 1;\n background-color: rgb(254 226 226 / var(--tw-bg-opacity))\n}\n.active\\:s-bg-warning-600:active {\n --tw-bg-opacity: 1;\n background-color: rgb(220 38 38 / var(--tw-bg-opacity))\n}\n.active\\:s-text-action-600:active {\n --tw-text-opacity: 1;\n color: rgb(37 99 235 / var(--tw-text-opacity))\n}\n.active\\:s-text-action-700:active {\n --tw-text-opacity: 1;\n color: rgb(29 78 216 / var(--tw-text-opacity))\n}\n.active\\:s-drop-shadow-none:active {\n --tw-drop-shadow: drop-shadow(0 0 #0000);\n 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)\n}\n.s-group:hover .group-hover\\:-s-translate-y-0 {\n --tw-translate-y: -0px;\n 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))\n}\n.s-group:hover .group-hover\\:-s-translate-y-0\\.5 {\n --tw-translate-y: -0.125rem;\n 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))\n}\n.s-group:hover .group-hover\\:s-text-action-400 {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-border-action-500-dark) {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-action-600-dark) {\n --tw-border-opacity: 1;\n border-color: rgb(96 165 250 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-element-500-dark) {\n --tw-border-opacity: 1;\n border-color: rgb(100 116 139 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-structure-200-dark) {\n --tw-border-opacity: 1;\n border-color: rgb(51 65 85 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-structure-300-dark) {\n --tw-border-opacity: 1;\n border-color: rgb(71 85 105 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-warning-600-dark) {\n --tw-border-opacity: 1;\n border-color: rgb(248 113 113 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-bg-action-500-dark) {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-bg-structure-0-dark) {\n --tw-bg-opacity: 1;\n background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-bg-structure-50-dark) {\n --tw-bg-opacity: 1;\n background-color: rgb(15 23 42 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-bg-warning-500-dark) {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-text-action-300-dark) {\n --tw-text-opacity: 1;\n color: rgb(29 78 216 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-action-400-dark) {\n --tw-text-opacity: 1;\n color: rgb(37 99 235 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-action-500-dark) {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-500-dark) {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-600-dark) {\n --tw-text-opacity: 1;\n color: rgb(148 163 184 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-700-dark) {\n --tw-text-opacity: 1;\n color: rgb(203 213 225 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-900-dark) {\n --tw-text-opacity: 1;\n color: rgb(248 250 252 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-warning-500-dark) {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-border-action-300-dark:hover) {\n --tw-border-opacity: 1;\n border-color: rgb(29 78 216 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-border-action-500-dark:hover) {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-border-warning-300-dark:hover) {\n --tw-border-opacity: 1;\n border-color: rgb(185 28 28 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-border-warning-500-dark:hover) {\n --tw-border-opacity: 1;\n border-color: rgb(239 68 68 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-action-200-dark:hover) {\n --tw-bg-opacity: 1;\n background-color: rgb(30 64 175 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-action-50-dark:hover) {\n --tw-bg-opacity: 1;\n background-color: rgb(23 37 84 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-action-500-dark:hover) {\n --tw-bg-opacity: 1;\n background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-warning-50-dark:hover) {\n --tw-bg-opacity: 1;\n background-color: rgb(69 10 10 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-warning-500-dark:hover) {\n --tw-bg-opacity: 1;\n background-color: rgb(239 68 68 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-text-action-400:hover) {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-text-action-500-dark:hover) {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-text-action-600-dark:hover) {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-border-action-500-dark:active) {\n --tw-border-opacity: 1;\n border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-border-action-700-dark:active) {\n --tw-border-opacity: 1;\n border-color: rgb(147 197 253 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-border-warning-500-dark:active) {\n --tw-border-opacity: 1;\n border-color: rgb(239 68 68 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-border-warning-700-dark:active) {\n --tw-border-opacity: 1;\n border-color: rgb(252 165 165 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-bg-action-100-dark:active) {\n --tw-bg-opacity: 1;\n background-color: rgb(30 58 138 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-bg-action-600-dark:active) {\n --tw-bg-opacity: 1;\n background-color: rgb(96 165 250 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-bg-warning-100-dark:active) {\n --tw-bg-opacity: 1;\n background-color: rgb(127 29 29 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-bg-warning-600-dark:active) {\n --tw-bg-opacity: 1;\n background-color: rgb(248 113 113 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-text-action-600:active) {\n --tw-text-opacity: 1;\n color: rgb(37 99 235 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-text-action-600-dark:active) {\n --tw-text-opacity: 1;\n color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .s-group:hover .dark\\:group-hover\\:s-text-action-500-dark) {\n --tw-text-opacity: 1;\n color: rgb(59 130 246 / var(--tw-text-opacity))\n}";
|
|
32
32
|
styleInject(css_248z);
|
|
33
33
|
|
|
34
34
|
var aLink = function (_a) {
|
|
@@ -58,6 +58,88 @@ function Icon(_a) {
|
|
|
58
58
|
return IconComponent ? React__default.createElement(IconComponent, { className: className }) : null;
|
|
59
59
|
}
|
|
60
60
|
|
|
61
|
+
/******************************************************************************
|
|
62
|
+
Copyright (c) Microsoft Corporation.
|
|
63
|
+
|
|
64
|
+
Permission to use, copy, modify, and/or distribute this software for any
|
|
65
|
+
purpose with or without fee is hereby granted.
|
|
66
|
+
|
|
67
|
+
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
68
|
+
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
69
|
+
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
70
|
+
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
71
|
+
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
72
|
+
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
73
|
+
PERFORMANCE OF THIS SOFTWARE.
|
|
74
|
+
***************************************************************************** */
|
|
75
|
+
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
var __assign = function() {
|
|
79
|
+
__assign = Object.assign || function __assign(t) {
|
|
80
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
81
|
+
s = arguments[i];
|
|
82
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
83
|
+
}
|
|
84
|
+
return t;
|
|
85
|
+
};
|
|
86
|
+
return __assign.apply(this, arguments);
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
function __read(o, n) {
|
|
90
|
+
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
91
|
+
if (!m) return o;
|
|
92
|
+
var i = m.call(o), r, ar = [], e;
|
|
93
|
+
try {
|
|
94
|
+
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
95
|
+
}
|
|
96
|
+
catch (error) { e = { error: error }; }
|
|
97
|
+
finally {
|
|
98
|
+
try {
|
|
99
|
+
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
100
|
+
}
|
|
101
|
+
finally { if (e) throw e.error; }
|
|
102
|
+
}
|
|
103
|
+
return ar;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
107
|
+
var e = new Error(message);
|
|
108
|
+
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
109
|
+
};
|
|
110
|
+
|
|
111
|
+
function Tooltip(_a) {
|
|
112
|
+
var children = _a.children, label = _a.label, _b = _a.position, position = _b === void 0 ? "above" : _b;
|
|
113
|
+
var _c = __read(useState(false), 2), isHovered = _c[0], setIsHovered = _c[1];
|
|
114
|
+
var _d = __read(useState(null), 2), timerId = _d[0], setTimerId = _d[1];
|
|
115
|
+
var handleMouseOver = function () {
|
|
116
|
+
var id = window.setTimeout(function () {
|
|
117
|
+
setIsHovered(true);
|
|
118
|
+
}, 800);
|
|
119
|
+
setTimerId(id);
|
|
120
|
+
};
|
|
121
|
+
var handleMouseLeave = function () {
|
|
122
|
+
if (timerId !== null) {
|
|
123
|
+
clearTimeout(timerId);
|
|
124
|
+
}
|
|
125
|
+
setIsHovered(false);
|
|
126
|
+
};
|
|
127
|
+
useEffect(function () {
|
|
128
|
+
return function () {
|
|
129
|
+
if (timerId)
|
|
130
|
+
window.clearTimeout(timerId);
|
|
131
|
+
};
|
|
132
|
+
}, [timerId]);
|
|
133
|
+
var baseClasses = "s-absolute s-whitespace-nowrap s-z-10 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform s-bg-structure-0 dark:s-bg-structure-0-dark s-text-element-700 dark:s-text-element-700-dark";
|
|
134
|
+
var hiddenClasses = "s-translate-y-2 s-opacity-0";
|
|
135
|
+
var visibleClasses = "-s-translate-y-0 s-opacity-100";
|
|
136
|
+
var tooltipCenterClasses = "s-left-1/2 -s-translate-x-1/2";
|
|
137
|
+
var tooltipPositionClasses = position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
|
|
138
|
+
return (React__default.createElement("div", { onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, className: "s-relative s-inline-block" },
|
|
139
|
+
children,
|
|
140
|
+
React__default.createElement("div", { className: classNames("".concat(isHovered ? visibleClasses : hiddenClasses), baseClasses, tooltipPositionClasses, tooltipCenterClasses), onAnimationEnd: function () { return setIsHovered(false); } }, label)));
|
|
141
|
+
}
|
|
142
|
+
|
|
61
143
|
var sizeClasses$1 = {
|
|
62
144
|
xs: "s-gap-x-1 s-px-3 s-py-1.5 s-text-xs s-font-semibold",
|
|
63
145
|
sm: "s-gap-x-1 s-px-4 s-py-2 s-text-sm s-font-semibold",
|
|
@@ -84,6 +166,16 @@ var typeClasses = {
|
|
|
84
166
|
active: "dark:active:s-bg-action-600-dark dark:active:s-border-action-700-dark",
|
|
85
167
|
},
|
|
86
168
|
},
|
|
169
|
+
primaryWarning: {
|
|
170
|
+
base: "s-text-white s-bg-warning-500 s-border-warning-600",
|
|
171
|
+
hover: "hover:s-bg-warning-400 hover:s-border-warning-500",
|
|
172
|
+
active: "active:s-bg-warning-600 active:s-border-warning-700",
|
|
173
|
+
dark: {
|
|
174
|
+
base: "dark:s-bg-warning-500-dark dark:s-border-warning-600-dark",
|
|
175
|
+
hover: "dark:hover:s-bg-warning-500-dark dark:hover:s-border-warning-500-dark",
|
|
176
|
+
active: "dark:active:s-bg-warning-600-dark dark:active:s-border-warning-700-dark",
|
|
177
|
+
},
|
|
178
|
+
},
|
|
87
179
|
secondary: {
|
|
88
180
|
base: "s-text-action-500 s-border-structure-300 s-bg-structure-0",
|
|
89
181
|
hover: "hover:s-bg-action-50 hover:s-border-action-300",
|
|
@@ -94,6 +186,16 @@ var typeClasses = {
|
|
|
94
186
|
active: "dark:active:s-bg-action-100-dark dark:active:s-border-action-500-dark",
|
|
95
187
|
},
|
|
96
188
|
},
|
|
189
|
+
secondaryWarning: {
|
|
190
|
+
base: "s-text-warning-500 s-border-structure-300 s-bg-structure-0",
|
|
191
|
+
hover: "hover:s-bg-warning-50 hover:s-border-warning-300",
|
|
192
|
+
active: "active:s-bg-warning-100 active:s-border-warning-500",
|
|
193
|
+
dark: {
|
|
194
|
+
base: "dark:s-text-warning-500-dark dark:s-border-structure-300-dark dark:s-bg-structure-50-dark",
|
|
195
|
+
hover: "dark:hover:s-bg-warning-50-dark dark:hover:s-border-warning-300-dark",
|
|
196
|
+
active: "dark:active:s-bg-warning-100-dark dark:active:s-border-warning-500-dark",
|
|
197
|
+
},
|
|
198
|
+
},
|
|
97
199
|
tertiary: {
|
|
98
200
|
base: "s-text-element-700 s-border-structure-300 s-bg-structure-0",
|
|
99
201
|
hover: "hover:s-text-element-800 hover:s-bg-action-50 hover:s-border-action-300",
|
|
@@ -107,13 +209,14 @@ var typeClasses = {
|
|
|
107
209
|
};
|
|
108
210
|
function Button(_a) {
|
|
109
211
|
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
110
|
-
var _l = _a.type, type = _l === void 0 ? "primary" : _l, _m = _a.size, size = _m === void 0 ? "sm" : _m, onClick = _a.onClick, _o = _a.disabled, disabled = _o === void 0 ? false : _o, label = _a.label, icon = _a.icon,
|
|
212
|
+
var _l = _a.type, type = _l === void 0 ? "primary" : _l, _m = _a.size, size = _m === void 0 ? "sm" : _m, onClick = _a.onClick, _o = _a.disabled, disabled = _o === void 0 ? false : _o, _p = _a.labelVisible, labelVisible = _p === void 0 ? true : _p, label = _a.label, icon = _a.icon, _q = _a.className, className = _q === void 0 ? "" : _q;
|
|
111
213
|
var buttonClasses = classNames("s-inline-flex s-items-center s-border s-transition-all s-ease-out s-duration-400 s-box-border s-rounded-full s-scale-95 hover:s-scale-100 hover:s-drop-shadow-md active:s-scale-95 active:s-drop-shadow-none", sizeClasses$1[size], (_b = typeClasses[type]) === null || _b === void 0 ? void 0 : _b.base, (_c = typeClasses[type]) === null || _c === void 0 ? void 0 : _c.hover, (_d = typeClasses[type]) === null || _d === void 0 ? void 0 : _d.active, (_f = (_e = typeClasses[type]) === null || _e === void 0 ? void 0 : _e.dark) === null || _f === void 0 ? void 0 : _f.base, (_h = (_g = typeClasses[type]) === null || _g === void 0 ? void 0 : _g.dark) === null || _h === void 0 ? void 0 : _h.hover, (_k = (_j = typeClasses[type]) === null || _j === void 0 ? void 0 : _j.dark) === null || _k === void 0 ? void 0 : _k.active, disabled ? "s-cursor-not-allowed s-opacity-50 s-bg-gray-200" : "", className);
|
|
112
214
|
var iconClasses = classNames(iconSizeClasses[size]);
|
|
113
215
|
var finalContainerClasses = classNames(containerClasses[size]);
|
|
114
|
-
return (React__default.createElement("button", { type: "button", className: buttonClasses, onClick: onClick, disabled: disabled, "aria-label": label },
|
|
216
|
+
return labelVisible ? (React__default.createElement("button", { type: "button", className: buttonClasses, onClick: onClick, disabled: disabled, "aria-label": label },
|
|
115
217
|
icon && React__default.createElement(Icon, { IconComponent: icon, className: iconClasses }),
|
|
116
|
-
React__default.createElement("div", { className: finalContainerClasses }, label)))
|
|
218
|
+
React__default.createElement("div", { className: finalContainerClasses }, label))) : (React__default.createElement(Tooltip, { label: label },
|
|
219
|
+
React__default.createElement("button", { type: "button", className: buttonClasses, onClick: onClick, disabled: disabled, "aria-label": label }, icon && React__default.createElement(Icon, { IconComponent: icon, className: iconClasses }))));
|
|
117
220
|
}
|
|
118
221
|
|
|
119
222
|
var tabClasses = {
|
|
@@ -184,56 +287,6 @@ function Tab(_a) {
|
|
|
184
287
|
React__default.createElement("nav", { className: "-s-mb-px s-flex s-space-x-0", "aria-label": "Tabs" }, renderTabs())));
|
|
185
288
|
}
|
|
186
289
|
|
|
187
|
-
/******************************************************************************
|
|
188
|
-
Copyright (c) Microsoft Corporation.
|
|
189
|
-
|
|
190
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
191
|
-
purpose with or without fee is hereby granted.
|
|
192
|
-
|
|
193
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
194
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
195
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
196
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
197
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
198
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
199
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
200
|
-
***************************************************************************** */
|
|
201
|
-
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
var __assign = function() {
|
|
205
|
-
__assign = Object.assign || function __assign(t) {
|
|
206
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
207
|
-
s = arguments[i];
|
|
208
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
209
|
-
}
|
|
210
|
-
return t;
|
|
211
|
-
};
|
|
212
|
-
return __assign.apply(this, arguments);
|
|
213
|
-
};
|
|
214
|
-
|
|
215
|
-
function __read(o, n) {
|
|
216
|
-
var m = typeof Symbol === "function" && o[Symbol.iterator];
|
|
217
|
-
if (!m) return o;
|
|
218
|
-
var i = m.call(o), r, ar = [], e;
|
|
219
|
-
try {
|
|
220
|
-
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
|
|
221
|
-
}
|
|
222
|
-
catch (error) { e = { error: error }; }
|
|
223
|
-
finally {
|
|
224
|
-
try {
|
|
225
|
-
if (r && !r.done && (m = i["return"])) m.call(i);
|
|
226
|
-
}
|
|
227
|
-
finally { if (e) throw e.error; }
|
|
228
|
-
}
|
|
229
|
-
return ar;
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
233
|
-
var e = new Error(message);
|
|
234
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
235
|
-
};
|
|
236
|
-
|
|
237
290
|
var SvgArrowUpOnSquare$2 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 20 20" }, props),
|
|
238
291
|
React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M13.75 7h-3V3.66l1.95 2.1a.75.75 0 1 0 1.1-1.02l-3.25-3.5a.75.75 0 0 0-1.1 0L6.2 4.74a.75.75 0 0 0 1.1 1.02l1.95-2.1V7h-3A2.25 2.25 0 0 0 4 9.25v7.5A2.25 2.25 0 0 0 6.25 19h7.5A2.25 2.25 0 0 0 16 16.75v-7.5A2.25 2.25 0 0 0 13.75 7Zm-3 0h-1.5v5.25a.75.75 0 0 0 1.5 0V7Z", clipRule: "evenodd" }))); };
|
|
239
292
|
|
|
@@ -475,38 +528,6 @@ function Checkbox(_a) {
|
|
|
475
528
|
React__default.createElement("div", { className: combinedCheckedIndicatorClasses }))));
|
|
476
529
|
}
|
|
477
530
|
|
|
478
|
-
function Tooltip(_a) {
|
|
479
|
-
var children = _a.children, label = _a.label, _b = _a.position, position = _b === void 0 ? "above" : _b;
|
|
480
|
-
var _c = __read(useState(false), 2), isHovered = _c[0], setIsHovered = _c[1];
|
|
481
|
-
var _d = __read(useState(null), 2), timerId = _d[0], setTimerId = _d[1];
|
|
482
|
-
var handleMouseOver = function () {
|
|
483
|
-
var id = window.setTimeout(function () {
|
|
484
|
-
setIsHovered(true);
|
|
485
|
-
}, 800);
|
|
486
|
-
setTimerId(id);
|
|
487
|
-
};
|
|
488
|
-
var handleMouseLeave = function () {
|
|
489
|
-
if (timerId !== null) {
|
|
490
|
-
clearTimeout(timerId);
|
|
491
|
-
}
|
|
492
|
-
setIsHovered(false);
|
|
493
|
-
};
|
|
494
|
-
useEffect(function () {
|
|
495
|
-
return function () {
|
|
496
|
-
if (timerId)
|
|
497
|
-
window.clearTimeout(timerId);
|
|
498
|
-
};
|
|
499
|
-
}, [timerId]);
|
|
500
|
-
var baseClasses = "s-absolute s-whitespace-nowrap s-z-10 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform s-bg-structure-0 dark:s-bg-structure-0-dark s-text-element-700 dark:s-text-element-700-dark";
|
|
501
|
-
var hiddenClasses = "s-translate-y-2 s-opacity-0";
|
|
502
|
-
var visibleClasses = "-s-translate-y-0 s-opacity-100";
|
|
503
|
-
var tooltipCenterClasses = "s-left-1/2 -s-translate-x-1/2";
|
|
504
|
-
var tooltipPositionClasses = position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
|
|
505
|
-
return (React__default.createElement("div", { onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, className: "s-relative s-inline-block" },
|
|
506
|
-
children,
|
|
507
|
-
React__default.createElement("div", { className: classNames("".concat(isHovered ? visibleClasses : hiddenClasses), baseClasses, tooltipPositionClasses, tooltipCenterClasses), onAnimationEnd: function () { return setIsHovered(false); } }, label)));
|
|
508
|
-
}
|
|
509
|
-
|
|
510
531
|
var baseClasses$1 = "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";
|
|
511
532
|
var iconClasses$1 = {
|
|
512
533
|
primary: {
|