@dust-tt/sparkle 0.1.22 → 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 +109 -87
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/stories/Button.stories.d.ts +14 -0
- package/dist/cjs/stories/Checkbox.stories.d.ts +10 -0
- package/dist/cjs/stories/Icon.stories.d.ts +9 -0
- package/dist/cjs/stories/IconButton.stories.d.ts +12 -0
- package/dist/cjs/stories/IconToggleButton.stories.d.ts +10 -0
- package/dist/cjs/stories/Item.stories.d.ts +11 -0
- package/dist/cjs/stories/Logo.stories.d.ts +9 -0
- package/dist/cjs/stories/PageHeader.stories.d.ts +9 -0
- package/dist/cjs/stories/Tab.stories.d.ts +9 -0
- package/dist/cjs/stories/Tooltip.stories.d.ts +10 -0
- package/dist/esm/components/Button.d.ts +3 -2
- package/dist/esm/index.js +109 -87
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/stories/Button.stories.d.ts +14 -0
- package/dist/esm/stories/Checkbox.stories.d.ts +10 -0
- package/dist/esm/stories/Icon.stories.d.ts +9 -0
- package/dist/esm/stories/IconButton.stories.d.ts +12 -0
- package/dist/esm/stories/IconToggleButton.stories.d.ts +10 -0
- package/dist/esm/stories/Item.stories.d.ts +11 -0
- package/dist/esm/stories/Logo.stories.d.ts +9 -0
- package/dist/esm/stories/PageHeader.stories.d.ts +9 -0
- package/dist/esm/stories/Tab.stories.d.ts +9 -0
- package/dist/esm/stories/Tooltip.stories.d.ts +10 -0
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +24 -3
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
|
+
import { Button } from "../index_with_tw_base";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Button;
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof meta>;
|
|
9
|
+
export declare const Primary: Story;
|
|
10
|
+
export declare const IconOnlyPlusTooltip: Story;
|
|
11
|
+
export declare const PrimaryWarning: Story;
|
|
12
|
+
export declare const Secondary: Story;
|
|
13
|
+
export declare const SecondaryWarning: Story;
|
|
14
|
+
export declare const Tertiary: Story;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
|
+
import { Checkbox } from "../index_with_tw_base";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Checkbox;
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof meta>;
|
|
9
|
+
export declare const Checked: Story;
|
|
10
|
+
export declare const Unchecked: Story;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
|
+
import { Icon } from "../index_with_tw_base";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Icon;
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof meta>;
|
|
9
|
+
export declare const BasicIcon: Story;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
|
+
import { IconButton } from "../index_with_tw_base";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof IconButton;
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof meta>;
|
|
9
|
+
export declare const IconButtonPrimary: Story;
|
|
10
|
+
export declare const IconButtonWithTooltip: Story;
|
|
11
|
+
export declare const IconButtonSecondary: Story;
|
|
12
|
+
export declare const IconButtonTertiary: Story;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
|
+
import { IconToggleButton } from "../index_with_tw_base";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof IconToggleButton;
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof meta>;
|
|
9
|
+
export declare const IconToggleButtonSecondary: Story;
|
|
10
|
+
export declare const IconToggleButtonTertiary: Story;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
|
+
import { Item } from "../index_with_tw_base";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Item;
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof meta>;
|
|
9
|
+
export declare const ItemMD: Story;
|
|
10
|
+
export declare const ItemSM: Story;
|
|
11
|
+
export declare const ItemWithoutIcon: Story;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { StoryObj } from "@storybook/react";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: (props: import("react").SVGProps<SVGSVGElement>) => import("react").JSX.Element;
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof meta>;
|
|
9
|
+
export declare const BasicLogo: Story;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
|
+
import { PageHeader } from "../index_with_tw_base";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof PageHeader;
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof meta>;
|
|
9
|
+
export declare const BasicPageHeader: Story;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
|
+
import { Tab } from "../index_with_tw_base";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Tab;
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof meta>;
|
|
9
|
+
export declare const TabNavigation: Story;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { StoryObj } from "@storybook/react";
|
|
2
|
+
import { Tooltip } from "../index_with_tw_base";
|
|
3
|
+
declare const meta: {
|
|
4
|
+
title: string;
|
|
5
|
+
component: typeof Tooltip;
|
|
6
|
+
};
|
|
7
|
+
export default meta;
|
|
8
|
+
type Story = StoryObj<typeof meta>;
|
|
9
|
+
export declare const TooltipAbove: Story;
|
|
10
|
+
export declare const TooltipBelow: 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-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-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-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,19 +209,20 @@ 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 = {
|
|
120
223
|
default: {
|
|
121
224
|
base: "s-text-element-800 s-border-transparent s-cursor-pointer",
|
|
122
|
-
hover: "hover:s-text-action-500",
|
|
225
|
+
hover: "hover:s-text-action-500 hover:s-border-action-300",
|
|
123
226
|
dark: {
|
|
124
227
|
base: "dark:s-text-element-700-dark",
|
|
125
228
|
hover: "dark:hover:s-text-action-600-dark",
|
|
@@ -168,7 +271,7 @@ function Tab(_a) {
|
|
|
168
271
|
var iconStateClasses = tab.current
|
|
169
272
|
? iconClasses$3.selected
|
|
170
273
|
: iconClasses$3.default;
|
|
171
|
-
var finalTabClasses = classNames("s-group s-justify-center s-flex s-text-sm s-font-semibold s-px-4 s-py-3 s-
|
|
274
|
+
var finalTabClasses = classNames("s-group s-justify-center s-flex s-text-sm s-font-semibold s-px-4 s-py-3 s-transition-all ease-out s-duration-400 s-whitespace-nowrap s-select-none s-border-b-2", tabStateClasses.base, tabStateClasses.hover, tabStateClasses.dark.base, tabStateClasses.dark.hover, tabSizingClasses[(_a = tab.sizing) !== null && _a !== void 0 ? _a : "hug"], className);
|
|
172
275
|
var finalIconClasses = classNames("s-h-5 s-w-5 s-transition-colors s-duration-400", iconStateClasses.base, iconStateClasses.hover, iconStateClasses.dark.base, iconStateClasses.dark.hover, className);
|
|
173
276
|
var Link = tab.href
|
|
174
277
|
? components.link
|
|
@@ -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,37 +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-inline-flex s-items-center s-justify-center 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 s-left-1/2 s-translate-x-1/2";
|
|
501
|
-
var hiddenClasses = "s-translate-y-2 s-opacity-0";
|
|
502
|
-
var visibleClasses = "-s-translate-y-0 s-opacity-100";
|
|
503
|
-
var tooltipPositionClasses = position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
|
|
504
|
-
return (React__default.createElement("div", { onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, className: "s-relative s-inline-block" },
|
|
505
|
-
children,
|
|
506
|
-
React__default.createElement("div", { className: "".concat(isHovered ? visibleClasses : hiddenClasses, " ").concat(baseClasses, " ").concat(tooltipPositionClasses), onAnimationEnd: function () { return setIsHovered(false); } }, label)));
|
|
507
|
-
}
|
|
508
|
-
|
|
509
531
|
var baseClasses$1 = "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";
|
|
510
532
|
var iconClasses$1 = {
|
|
511
533
|
primary: {
|