@dust-tt/sparkle 0.1.28 → 0.1.30

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.
@@ -6,4 +6,7 @@ declare const meta: {
6
6
  };
7
7
  export default meta;
8
8
  type Story = StoryObj<typeof meta>;
9
- export declare const BasicIcon: Story;
9
+ export declare const IconSM: Story;
10
+ export declare const IconXS: Story;
11
+ export declare const IconMD: Story;
12
+ export declare const IconLG: Story;
@@ -0,0 +1,9 @@
1
+ import type { StoryObj } from "@storybook/react";
2
+ import { SectionHeader } from "../index_with_tw_base";
3
+ declare const meta: {
4
+ title: string;
5
+ component: typeof SectionHeader;
6
+ };
7
+ export default meta;
8
+ type Story = StoryObj<typeof meta>;
9
+ export declare const BasicPageHeader: Story;
@@ -8,6 +8,8 @@ import { Item } from "./components/Item";
8
8
  export { Item };
9
9
  import { PageHeader } from "./components/PageHeader";
10
10
  export { PageHeader };
11
+ import { SectionHeader } from "./components/SectionHeader";
12
+ export { SectionHeader };
11
13
  import { Icon } from "./components/Icon";
12
14
  export { Icon };
13
15
  import { Logo } from "./logo/Logo";
@@ -1,5 +1,6 @@
1
1
  import React, { ComponentType, MouseEvent } from "react";
2
- type ButtonProps = {
2
+ import { TooltipProps } from "./Tooltip";
3
+ export type ButtonProps = {
3
4
  type?: "primary" | "primaryWarning" | "secondary" | "secondaryWarning" | "tertiary";
4
5
  size?: "xs" | "sm" | "md";
5
6
  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -8,6 +9,6 @@ type ButtonProps = {
8
9
  labelVisible?: boolean;
9
10
  icon?: ComponentType;
10
11
  className?: string;
12
+ tooltipPosition?: TooltipProps["position"];
11
13
  };
12
- export declare function Button({ type, size, onClick, disabled, labelVisible, label, icon, className, }: ButtonProps): React.JSX.Element;
13
- export {};
14
+ export declare function Button({ type, size, onClick, disabled, labelVisible, label, icon, className, tooltipPosition, }: ButtonProps): React.JSX.Element;
@@ -1,9 +1,9 @@
1
1
  import React, { ComponentType } from "react";
2
- interface IconProps {
3
- IconComponent?: ComponentType<{
2
+ export interface IconProps {
3
+ visual?: ComponentType<{
4
4
  className?: string;
5
5
  }>;
6
+ size?: "xs" | "sm" | "md" | "lg";
6
7
  className?: string;
7
8
  }
8
- export declare function Icon({ IconComponent, className }: IconProps): React.JSX.Element | null;
9
- export {};
9
+ export declare function Icon({ visual: IconComponent, size, className, }: IconProps): React.JSX.Element | null;
@@ -1,11 +1,14 @@
1
1
  import React, { ComponentType, MouseEventHandler } from "react";
2
+ import { TooltipProps } from "./Tooltip";
2
3
  type IconButtonProps = {
3
- type?: "primary" | "secondary" | "tertiary";
4
+ type?: "primary" | "warning" | "secondary" | "tertiary";
4
5
  onClick?: MouseEventHandler<HTMLButtonElement>;
6
+ size?: "xs" | "sm" | "md";
5
7
  tooltip?: string;
8
+ tooltipPosition?: TooltipProps["position"];
6
9
  icon?: ComponentType;
7
10
  className?: string;
8
11
  disabled?: boolean;
9
12
  };
10
- export declare function IconButton({ type, onClick, disabled, tooltip, icon, className, }: IconButtonProps): React.JSX.Element;
13
+ export declare function IconButton({ type, onClick, disabled, tooltip, tooltipPosition, icon, className, size, }: IconButtonProps): React.JSX.Element;
11
14
  export {};
@@ -1,12 +1,15 @@
1
1
  import React, { ComponentType, MouseEventHandler } from "react";
2
+ import { TooltipProps } from "./Tooltip";
2
3
  type IconToggleButtonProps = {
3
4
  type?: "secondary" | "tertiary";
4
5
  onClick?: MouseEventHandler<HTMLButtonElement>;
6
+ size?: "xs" | "sm" | "md";
5
7
  tooltip?: string;
8
+ tooltipPosition?: TooltipProps["position"];
6
9
  icon?: ComponentType;
7
10
  className?: string;
8
11
  disabled?: boolean;
9
12
  selected?: boolean;
10
13
  };
11
- export declare function IconToggleButton({ type, onClick, disabled, tooltip, icon, className, selected, }: IconToggleButtonProps): React.JSX.Element;
14
+ export declare function IconToggleButton({ type, onClick, disabled, tooltip, tooltipPosition, icon, className, selected, size, }: IconToggleButtonProps): React.JSX.Element;
12
15
  export {};
@@ -1,10 +1,10 @@
1
1
  import React, { ComponentType } from "react";
2
- interface IconProps {
2
+ interface PageHeaderProps {
3
3
  title: string;
4
4
  description?: string;
5
5
  icon?: ComponentType<{
6
6
  className?: string;
7
7
  }>;
8
8
  }
9
- export declare function PageHeader({ title, icon, description }: IconProps): React.JSX.Element;
9
+ export declare function PageHeader({ title, icon, description }: PageHeaderProps): React.JSX.Element;
10
10
  export {};
@@ -0,0 +1,9 @@
1
+ import React from "react";
2
+ import { ButtonProps } from "./Button";
3
+ interface SectionHeaderProps {
4
+ title: string;
5
+ description?: string;
6
+ action?: ButtonProps;
7
+ }
8
+ export declare function SectionHeader({ title, description, action, }: SectionHeaderProps): React.JSX.Element;
9
+ export {};
@@ -1,12 +1,13 @@
1
- import { ReactComponentLike } from "prop-types";
2
- import React, { MouseEvent } from "react";
1
+ import React, { ComponentType, MouseEvent } from "react";
3
2
  type TabProps = {
4
3
  tabs: Array<{
5
4
  label: string;
6
5
  hideLabel?: boolean;
7
6
  current: boolean;
8
7
  sizing?: "hug" | "expand";
9
- icon?: ReactComponentLike;
8
+ icon?: ComponentType<{
9
+ className?: string;
10
+ }>;
10
11
  href?: string;
11
12
  }>;
12
13
  onTabClick?: (tabName: string, event: MouseEvent<HTMLAnchorElement>) => void;
@@ -1,8 +1,7 @@
1
1
  import React from "react";
2
- interface TooltipProps {
2
+ export interface TooltipProps {
3
3
  children: React.ReactNode;
4
4
  label: string;
5
5
  position?: "above" | "below";
6
6
  }
7
7
  export declare function Tooltip({ children, label, position }: TooltipProps): React.JSX.Element;
8
- 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-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}";
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-mt-8 {\n margin-top: 2rem\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-6 {\n height: 1.5rem\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-6 {\n width: 1.5rem\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-items-stretch {\n align-items: stretch\n}\n.s-justify-start {\n justify-content: flex-start\n}\n.s-justify-center {\n justify-content: center\n}\n.s-justify-between {\n justify-content: space-between\n}\n.s-gap-1 {\n gap: 0.25rem\n}\n.s-gap-2 {\n gap: 0.5rem\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-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-base {\n font-size: 1rem;\n line-height: 1.5rem\n}\n.s-text-lg {\n font-size: 1.125rem;\n line-height: 1.75rem\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-action-800 {\n --tw-text-opacity: 1;\n color: rgb(30 64 175 / 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-200:hover {\n --tw-border-opacity: 1;\n border-color: rgb(191 219 254 / var(--tw-border-opacity))\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-200:hover {\n --tw-border-opacity: 1;\n border-color: rgb(254 202 202 / 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-700:hover {\n --tw-text-opacity: 1;\n color: rgb(100 116 139 / var(--tw-text-opacity))\n}\n.hover\\:s-text-warning-400:hover {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / 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-text-warning-600:active {\n --tw-text-opacity: 1;\n color: rgb(220 38 38 / 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\\:hover\\:s-text-warning-500-dark:hover) {\n --tw-text-opacity: 1;\n color: rgb(239 68 68 / 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 .dark\\:active\\:s-text-warning-600-dark:active) {\n --tw-text-opacity: 1;\n color: rgb(248 113 113 / 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}\n@media (min-width: 768px) {\n .md\\:s-flex-row {\n flex-direction: row\n }\n .md\\:s-items-center {\n align-items: center\n }\n}";
32
32
  styleInject(css_248z);
33
33
 
34
34
  var aLink = function (_a) {
@@ -53,9 +53,15 @@ function classNames() {
53
53
  return classes.filter(Boolean).join(" ");
54
54
  }
55
55
 
56
+ var IconSizes = {
57
+ xs: "s-h-4 s-w-4",
58
+ sm: "s-h-5 s-w-5",
59
+ md: "s-h-6 s-w-6",
60
+ lg: "s-h-8 s-w-8",
61
+ };
56
62
  function Icon(_a) {
57
- var IconComponent = _a.IconComponent, _b = _a.className, className = _b === void 0 ? "" : _b;
58
- return IconComponent ? React__default.createElement(IconComponent, { className: className }) : null;
63
+ var IconComponent = _a.visual, _b = _a.size, size = _b === void 0 ? "sm" : _b, _c = _a.className, className = _c === void 0 ? "" : _c;
64
+ return IconComponent ? (React__default.createElement(IconComponent, { className: (classNames(className), IconSizes[size]) })) : null;
59
65
  }
60
66
 
61
67
  /******************************************************************************
@@ -143,18 +149,13 @@ function Tooltip(_a) {
143
149
  var sizeClasses$1 = {
144
150
  xs: "s-gap-x-1 s-px-3 s-py-1.5 s-text-xs s-font-semibold",
145
151
  sm: "s-gap-x-1 s-px-4 s-py-2 s-text-sm s-font-semibold",
146
- md: "s-gap-x-1.5 s-px-5 s-py-3 s-text-sm s-font-bold",
152
+ md: "s-gap-x-1.5 s-px-5 s-py-3 s-text-base s-font-bold",
147
153
  };
148
154
  var containerClasses = {
149
155
  xs: "s-px-0.5",
150
156
  sm: "s-px-1",
151
157
  md: "s-px-1",
152
158
  };
153
- var iconSizeClasses = {
154
- xs: "s-h-4 s-w-4",
155
- sm: "s-h-5 s-w-5",
156
- md: "s-h-5 s-w-5",
157
- };
158
159
  var typeClasses = {
159
160
  primary: {
160
161
  base: "s-text-white s-bg-action-500 s-border-action-600",
@@ -177,8 +178,8 @@ var typeClasses = {
177
178
  },
178
179
  },
179
180
  secondary: {
180
- base: "s-text-action-500 s-border-structure-300 s-bg-structure-0",
181
- hover: "hover:s-bg-action-50 hover:s-border-action-300",
181
+ base: "s-text-action-500 s-border-structure-200 s-bg-structure-0",
182
+ hover: "hover:s-bg-action-50 hover:s-border-action-200",
182
183
  active: "active:s-bg-action-100 active:s-border-action-500",
183
184
  dark: {
184
185
  base: "dark:s-text-action-500-dark dark:s-border-structure-300-dark dark:s-bg-structure-50-dark",
@@ -187,8 +188,8 @@ var typeClasses = {
187
188
  },
188
189
  },
189
190
  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",
191
+ base: "s-text-warning-500 s-border-structure-200 s-bg-structure-0",
192
+ hover: "hover:s-bg-warning-50 hover:s-border-warning-200",
192
193
  active: "active:s-bg-warning-100 active:s-border-warning-500",
193
194
  dark: {
194
195
  base: "dark:s-text-warning-500-dark dark:s-border-structure-300-dark dark:s-bg-structure-50-dark",
@@ -197,8 +198,8 @@ var typeClasses = {
197
198
  },
198
199
  },
199
200
  tertiary: {
200
- base: "s-text-element-700 s-border-structure-300 s-bg-structure-0",
201
- hover: "hover:s-text-element-800 hover:s-bg-action-50 hover:s-border-action-300",
201
+ base: "s-text-element-800 s-border-structure-200 s-bg-structure-0",
202
+ hover: "hover:s-text-element-700 hover:s-bg-action-50 hover:s-border-action-200",
202
203
  active: "active:s-bg-action-100 active:s-border-action-500",
203
204
  dark: {
204
205
  base: "dark:s-text-element-700-dark dark:s-border-structure-300-dark dark:s-bg-structure-50-dark",
@@ -209,14 +210,13 @@ var typeClasses = {
209
210
  };
210
211
  function Button(_a) {
211
212
  var _b, _c, _d, _e, _f, _g, _h, _j, _k;
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;
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);
214
- var iconClasses = classNames(iconSizeClasses[size]);
213
+ 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, _r = _a.tooltipPosition, tooltipPosition = _r === void 0 ? "above" : _r;
214
+ 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 s-whitespace-nowrap", 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);
215
215
  var finalContainerClasses = classNames(containerClasses[size]);
216
216
  return labelVisible ? (React__default.createElement("button", { type: "button", className: buttonClasses, onClick: onClick, disabled: disabled, "aria-label": label },
217
- icon && React__default.createElement(Icon, { IconComponent: icon, className: iconClasses }),
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 }))));
217
+ icon && React__default.createElement(Icon, { visual: icon, size: size }),
218
+ React__default.createElement("div", { className: finalContainerClasses }, label))) : (React__default.createElement(Tooltip, { label: label, position: tooltipPosition },
219
+ React__default.createElement("button", { type: "button", className: buttonClasses, onClick: onClick, disabled: disabled, "aria-label": label }, icon && React__default.createElement(Icon, { visual: icon, size: size }))));
220
220
  }
221
221
 
222
222
  var tabClasses = {
@@ -272,7 +272,7 @@ function Tab(_a) {
272
272
  ? iconClasses$3.selected
273
273
  : iconClasses$3.default;
274
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);
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);
275
+ var finalIconClasses = classNames("s-transition-colors s-duration-400", iconStateClasses.base, iconStateClasses.hover, iconStateClasses.dark.base, iconStateClasses.dark.hover, className);
276
276
  var Link = tab.href
277
277
  ? components.link
278
278
  : noHrefLink;
@@ -280,7 +280,7 @@ function Tab(_a) {
280
280
  React__default.createElement("div", { className: tab.current
281
281
  ? "s-flex s-gap-x-2"
282
282
  : "s-duration-400 s-flex s-translate-y-0 s-transform s-gap-x-2 s-transition-transform s-ease-out group-hover:-s-translate-y-0.5" },
283
- tab.icon && React__default.createElement(tab.icon, { className: finalIconClasses }), (_b = tab.hideLabel) !== null && _b !== void 0 ? _b : tab.label)));
283
+ tab.icon && (React__default.createElement(Icon, { visual: tab.icon, className: finalIconClasses, size: "sm" })), (_b = tab.hideLabel) !== null && _b !== void 0 ? _b : tab.label)));
284
284
  });
285
285
  };
286
286
  return (React__default.createElement("div", { className: "s-border-b s-border-structure-200 dark:s-border-structure-200-dark" },
@@ -393,7 +393,7 @@ var sizeClasses = {
393
393
  md: "s-py-3 s-text-sm s-font-semibold",
394
394
  };
395
395
  var baseClasses$2 = "s-group s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none";
396
- var iconBaseClasses = "s-h-5 s-w-5 s-transition-colors s-ease-out s-duration-400";
396
+ var iconBaseClasses = "s-transition-colors s-ease-out s-duration-400";
397
397
  var iconClasses$2 = {
398
398
  default: {
399
399
  base: "s-text-element-700",
@@ -478,22 +478,34 @@ function Item(_a) {
478
478
  );
479
479
  var Link = href ? components.link : noHrefLink;
480
480
  return (React__default.createElement(Link, { className: itemClasses, onClick: selected || disabled ? undefined : onClick, "aria-label": label, href: href || "#" },
481
- icon && React__default.createElement(Icon, { IconComponent: icon, className: finalIconClasses }),
481
+ icon && React__default.createElement(Icon, { visual: icon, className: finalIconClasses }),
482
482
  React__default.createElement("span", { className: "s-grow" }, label),
483
- React__default.createElement(Icon, { IconComponent: SvgChevronRight$2, className: finalCevronClasses })));
483
+ React__default.createElement(Icon, { visual: SvgChevronRight$2, className: finalCevronClasses, size: "sm" })));
484
484
  }
485
485
 
486
486
  function PageHeader(_a) {
487
487
  var title = _a.title, icon = _a.icon, description = _a.description;
488
- var iconClasses = "s-w-8 s-h-8 s-text-brand";
488
+ var iconClasses = "s-text-brand";
489
489
  var titleClasses = "s-text-2xl s-font-bold s-text-element-800 s-self-stretch";
490
490
  var descriptionClasses = "s-text-sm s-font-normal s-text-element-700 s-self-stretch";
491
491
  return (React__default.createElement("div", { className: "s-inline-flex s-shrink s-grow s-basis-0 s-flex-col s-items-start s-justify-start s-gap-1" },
492
- React__default.createElement(Icon, { IconComponent: icon, className: iconClasses }),
492
+ React__default.createElement(Icon, { visual: icon, className: iconClasses, size: "lg" }),
493
493
  React__default.createElement("div", { className: titleClasses }, title),
494
494
  React__default.createElement("div", { className: descriptionClasses }, description)));
495
495
  }
496
496
 
497
+ function SectionHeader(_a) {
498
+ var title = _a.title, description = _a.description, action = _a.action;
499
+ var titleClasses = "s-text-lg s-font-bold s-text-element-900 s-self-stretch";
500
+ var descriptionClasses = "s-text-sm s-font-normal s-text-element-900 s-self-stretch";
501
+ return (React__default.createElement("div", { className: "s-mt-8 s-flex s-shrink s-grow s-basis-0 s-flex-col s-items-stretch s-justify-between s-gap-2 md:s-flex-row md:s-items-center" },
502
+ React__default.createElement("div", { className: "s-flex s-flex-col s-gap-1" },
503
+ React__default.createElement("div", { className: titleClasses }, title),
504
+ React__default.createElement("div", { className: descriptionClasses }, description)),
505
+ action && (React__default.createElement("div", { className: "s-flex" },
506
+ React__default.createElement(Button, __assign({}, action))))));
507
+ }
508
+
497
509
  var SvgLogoColoredGrey = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 96 24" }, props),
498
510
  React.createElement("path", { fill: "#64748B", fillRule: "evenodd", d: "M12 24c6.627 0 12-5.373 12-12 0 6.627 5.373 12 12 12s12-5.373 12-12v12h12a6 6 0 0 0 0-12H48c0-6.627-5.373-12-12-12S24 5.373 24 12c0-6.627-5.373-12-12-12S0 5.373 0 12s5.373 12 12 12Zm72-12H72v12h12V12Z", clipRule: "evenodd" }),
499
511
  React.createElement("path", { fill: "#334155", fillRule: "evenodd", d: "M0 0h12v24H0V0Zm24 0h24v12H24V0Zm36 12h36V0H60a6 6 0 0 0 0 12Z", clipRule: "evenodd" }))); };
@@ -579,6 +591,18 @@ var iconClasses$1 = {
579
591
  disabled: "dark:s-text-element-500-dark",
580
592
  },
581
593
  },
594
+ warning: {
595
+ base: "s-text-warning-500",
596
+ hover: "hover:s-text-warning-400",
597
+ active: "active:s-text-warning-600",
598
+ disabled: "s-text-element-500",
599
+ dark: {
600
+ base: "dark:s-text-warning-500-dark",
601
+ hover: "dark:hover:s-text-warning-500-dark",
602
+ active: "dark:active:s-text-warning-600-dark",
603
+ disabled: "dark:s-text-element-500-dark",
604
+ },
605
+ },
582
606
  secondary: {
583
607
  base: "s-text-element-900",
584
608
  hover: "hover:s-text-action-400",
@@ -605,12 +629,12 @@ var iconClasses$1 = {
605
629
  },
606
630
  };
607
631
  function IconButton(_a) {
608
- var _b = _a.type, type = _b === void 0 ? "tertiary" : _b, onClick = _a.onClick, _c = _a.disabled, disabled = _c === void 0 ? false : _c, tooltip = _a.tooltip, icon = _a.icon, _d = _a.className, className = _d === void 0 ? "" : _d;
632
+ var _b = _a.type, type = _b === void 0 ? "tertiary" : _b, onClick = _a.onClick, _c = _a.disabled, disabled = _c === void 0 ? false : _c, tooltip = _a.tooltip, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? "above" : _d, icon = _a.icon, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.size, size = _f === void 0 ? "sm" : _f;
609
633
  // Choose the correct group of classes based on 'type'
610
634
  var iconGroup = iconClasses$1[type];
611
635
  var finalIconClasses = classNames(className, baseClasses$1, iconGroup.base, disabled ? iconGroup.disabled : iconGroup.hover, disabled ? "" : iconGroup.active, iconGroup.dark.base, disabled ? iconGroup.dark.disabled : iconGroup.dark.hover, disabled ? "" : iconGroup.dark.active);
612
- var IconButtonContent = (React__default.createElement("button", { className: finalIconClasses, onClick: disabled ? undefined : onClick, disabled: disabled }, icon && React__default.createElement(Icon, { IconComponent: icon, className: "s-h-5 s-w-5" })));
613
- return tooltip ? (React__default.createElement(Tooltip, { label: tooltip }, IconButtonContent)) : (IconButtonContent);
636
+ var IconButtonContent = (React__default.createElement("button", { className: finalIconClasses, onClick: disabled ? undefined : onClick, disabled: disabled }, icon && React__default.createElement(Icon, { visual: icon, size: size })));
637
+ return tooltip ? (React__default.createElement(Tooltip, { label: tooltip, position: tooltipPosition }, IconButtonContent)) : (IconButtonContent);
614
638
  }
615
639
 
616
640
  var baseClasses = "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";
@@ -645,7 +669,7 @@ var iconClasses = {
645
669
  },
646
670
  };
647
671
  function IconToggleButton(_a) {
648
- var _b = _a.type, type = _b === void 0 ? "tertiary" : _b, onClick = _a.onClick, _c = _a.disabled, disabled = _c === void 0 ? false : _c, tooltip = _a.tooltip, icon = _a.icon, _d = _a.className, className = _d === void 0 ? "" : _d, _e = _a.selected, selected = _e === void 0 ? false : _e;
672
+ var _b = _a.type, type = _b === void 0 ? "tertiary" : _b, onClick = _a.onClick, _c = _a.disabled, disabled = _c === void 0 ? false : _c, tooltip = _a.tooltip, _d = _a.tooltipPosition, tooltipPosition = _d === void 0 ? "above" : _d, icon = _a.icon, _e = _a.className, className = _e === void 0 ? "" : _e, _f = _a.selected, selected = _f === void 0 ? false : _f, _g = _a.size, size = _g === void 0 ? "sm" : _g;
649
673
  var iconGroup = iconClasses[type];
650
674
  var finalIconClasses = classNames(className, baseClasses, disabled
651
675
  ? iconGroup.disabled
@@ -660,8 +684,8 @@ function IconToggleButton(_a) {
660
684
  if (!disabled) {
661
685
  onClick === null || onClick === void 0 ? void 0 : onClick(e); // Run passed onClick event
662
686
  }
663
- }, disabled: disabled }, icon && React__default.createElement(Icon, { IconComponent: icon, className: "s-h-5 s-w-5" })));
664
- return tooltip ? (React__default.createElement(Tooltip, { label: tooltip }, IconButtonToggleContent)) : (IconButtonToggleContent);
687
+ }, disabled: disabled }, icon && React__default.createElement(Icon, { visual: icon, size: size })));
688
+ return tooltip ? (React__default.createElement(Tooltip, { label: tooltip, position: tooltipPosition }, IconButtonToggleContent)) : (IconButtonToggleContent);
665
689
  }
666
690
 
667
691
  var SvgArrowUpOnSquare$1 = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
@@ -864,5 +888,5 @@ var SvgXCircle = function (props) { return (React.createElement("svg", __assign(
864
888
  var SvgXMark = function (props) { return (React.createElement("svg", __assign({ xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", fill: "none", viewBox: "0 0 24 24" }, props),
865
889
  React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M5.47 5.47a.75.75 0 0 1 1.06 0L12 10.94l5.47-5.47a.75.75 0 1 1 1.06 1.06L13.06 12l5.47 5.47a.75.75 0 1 1-1.06 1.06L12 13.06l-5.47 5.47a.75.75 0 0 1-1.06-1.06L10.94 12 5.47 6.53a.75.75 0 0 1 0-1.06Z", clipRule: "evenodd" }))); };
866
890
 
867
- export { SvgArrowUpOnSquare$2 as ArrowUpOnSquareIcon, SvgArrowUpOnSquare as ArrowUpOnSquareSolidIcon, SvgArrowUpOnSquare$1 as ArrowUpOnSquareStrokeIcon, SvgBeaker$2 as BeakerIcon, SvgBeakerPlus$2 as BeakerPlusIcon, SvgBeakerPlus as BeakerPlusSolidIcon, SvgBeakerPlus$1 as BeakerPlusStrokeIcon, SvgBeaker as BeakerSolidIcon, SvgBeaker$1 as BeakerStrokeIcon, Button, SvgChatBubbleBottomCenterPlus$2 as ChatBubbleBottomCenterPlusIcon, SvgChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusSolidIcon, SvgChatBubbleBottomCenterPlus$1 as ChatBubbleBottomCenterPlusStrokeIcon, SvgChatBubbleBottomCenterText$2 as ChatBubbleBottomCenterTextIcon, SvgChatBubbleBottomCenterText as ChatBubbleBottomCenterTextSolidIcon, SvgChatBubbleBottomCenterText$1 as ChatBubbleBottomCenterTextStrokeIcon, SvgChatBubbleLeftRight$2 as ChatBubbleLeftRightIcon, SvgChatBubbleLeftRight as ChatBubbleLeftRightSolidIcon, SvgChatBubbleLeftRight$1 as ChatBubbleLeftRightStrokeIcon, SvgCheckCircle$2 as CheckCircleIcon, SvgCheckCircle as CheckCircleSolidIcon, SvgCheckCircle$1 as CheckCircleStrokeIcon, Checkbox, SvgChevronDown$2 as ChevronDownIcon, SvgChevronDown as ChevronDownSolidIcon, SvgChevronDown$1 as ChevronDownStrokeIcon, SvgChevronLeft$2 as ChevronLeftIcon, SvgChevronLeft as ChevronLeftSolidIcon, SvgChevronLeft$1 as ChevronLeftStrokeIcon, SvgChevronRight$2 as ChevronRightIcon, SvgChevronRight as ChevronRightSolidIcon, SvgChevronRight$1 as ChevronRightStrokeIcon, SvgChevronUp$2 as ChevronUpIcon, SvgChevronUp as ChevronUpSolidIcon, SvgChevronUp$1 as ChevronUpStrokeIcon, SvgClipboard$2 as ClipboardIcon, SvgClipboard as ClipboardSolidIcon, SvgClipboard$1 as ClipboardStrokeIcon, SvgCloudArrowDown$2 as CloudArrowDownIcon, SvgCloudArrowDown as CloudArrowDownSolidIcon, SvgCloudArrowDown$1 as CloudArrowDownStrokeIcon, SvgCog6Tooth$2 as Cog6ToothIcon, SvgCog6Tooth as Cog6ToothSolidIcon, SvgCog6Tooth$1 as Cog6ToothStrokeIcon, SvgCommandLine$2 as CommandLineIcon, SvgCommandLine as CommandLineSolidIcon, SvgCommandLine$1 as CommandLineStrokeIcon, SvgDocumentPlus$2 as DocumentPlusIcon, SvgDocumentPlus as DocumentPlusSolidIcon, SvgDocumentPlus$1 as DocumentPlusStrokeIcon, SvgDocumentText$2 as DocumentTextIcon, SvgDocumentText as DocumentTextSolidIcon, SvgDocumentText$1 as DocumentTextStrokeIcon, SvgExclamationCircle$2 as ExclamationCircleIcon, SvgExclamationCircle as ExclamationCircleSolidIcon, SvgExclamationCircle$1 as ExclamationCircleStrokeIcon, SvgFolderOpen$2 as FolderOpenIcon, SvgFolderOpen as FolderOpenSolidIcon, SvgFolderOpen$1 as FolderOpenStrokeIcon, SvgHandThumbDown$2 as HandThumbDownIcon, SvgHandThumbDown as HandThumbDownSolidIcon, SvgHandThumbDown$1 as HandThumbDownStrokeIcon, SvgHandThumbUp$2 as HandThumbUpIcon, SvgHandThumbUp as HandThumbUpSolidIcon, SvgHandThumbUp$1 as HandThumbUpStrokeIcon, Icon, IconButton, IconToggleButton, SvgInformationCircle$2 as InformationCircleIcon, SvgInformationCircle as InformationCircleSolidIcon, SvgInformationCircle$1 as InformationCircleStrokeIcon, Item, SvgKey$2 as KeyIcon, SvgKey as KeySolidIcon, SvgKey$1 as KeyStrokeIcon, Logo, SvgMagnifyingGlass$2 as MagnifyingGlassIcon, SvgMagnifyingGlass as MagnifyingGlassSolidIcon, SvgMagnifyingGlass$1 as MagnifyingGlassStrokeIcon, PageHeader, SvgPaperAirplane$2 as PaperAirplaneIcon, SvgPaperAirplane as PaperAirplaneSolidIcon, SvgPaperAirplane$1 as PaperAirplaneStrokeIcon, SvgPencilSquare$2 as PencilSquareIcon, SvgPencilSquare as PencilSquareSolidIcon, SvgPencilSquare$1 as PencilSquareStrokeIcon, SvgPlus$2 as PlusIcon, SvgPlus as PlusSolidIcon, SvgPlus$1 as PlusStrokeIcon, SvgQuestionMarkCircle$2 as QuestionMarkCircleIcon, SvgQuestionMarkCircle as QuestionMarkCircleSolidIcon, SvgQuestionMarkCircle$1 as QuestionMarkCircleStrokeIcon, SvgServer$2 as ServerIcon, SvgServer as ServerSolidIcon, SvgServer$1 as ServerStrokeIcon, SparkleContext, SvgSquare3Stack3D$2 as Square3Stack3DIcon, SvgSquare3Stack3D as Square3Stack3DSolidIcon, SvgSquare3Stack3D$1 as Square3Stack3DStrokeIcon, Tab, Tooltip, SvgXCircle$2 as XCircleIcon, SvgXCircle as XCircleSolidIcon, SvgXCircle$1 as XCircleStrokeIcon, SvgXMark$2 as XMarkIcon, SvgXMark as XMarkSolidIcon, SvgXMark$1 as XMarkStrokeIcon };
891
+ export { SvgArrowUpOnSquare$2 as ArrowUpOnSquareIcon, SvgArrowUpOnSquare as ArrowUpOnSquareSolidIcon, SvgArrowUpOnSquare$1 as ArrowUpOnSquareStrokeIcon, SvgBeaker$2 as BeakerIcon, SvgBeakerPlus$2 as BeakerPlusIcon, SvgBeakerPlus as BeakerPlusSolidIcon, SvgBeakerPlus$1 as BeakerPlusStrokeIcon, SvgBeaker as BeakerSolidIcon, SvgBeaker$1 as BeakerStrokeIcon, Button, SvgChatBubbleBottomCenterPlus$2 as ChatBubbleBottomCenterPlusIcon, SvgChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusSolidIcon, SvgChatBubbleBottomCenterPlus$1 as ChatBubbleBottomCenterPlusStrokeIcon, SvgChatBubbleBottomCenterText$2 as ChatBubbleBottomCenterTextIcon, SvgChatBubbleBottomCenterText as ChatBubbleBottomCenterTextSolidIcon, SvgChatBubbleBottomCenterText$1 as ChatBubbleBottomCenterTextStrokeIcon, SvgChatBubbleLeftRight$2 as ChatBubbleLeftRightIcon, SvgChatBubbleLeftRight as ChatBubbleLeftRightSolidIcon, SvgChatBubbleLeftRight$1 as ChatBubbleLeftRightStrokeIcon, SvgCheckCircle$2 as CheckCircleIcon, SvgCheckCircle as CheckCircleSolidIcon, SvgCheckCircle$1 as CheckCircleStrokeIcon, Checkbox, SvgChevronDown$2 as ChevronDownIcon, SvgChevronDown as ChevronDownSolidIcon, SvgChevronDown$1 as ChevronDownStrokeIcon, SvgChevronLeft$2 as ChevronLeftIcon, SvgChevronLeft as ChevronLeftSolidIcon, SvgChevronLeft$1 as ChevronLeftStrokeIcon, SvgChevronRight$2 as ChevronRightIcon, SvgChevronRight as ChevronRightSolidIcon, SvgChevronRight$1 as ChevronRightStrokeIcon, SvgChevronUp$2 as ChevronUpIcon, SvgChevronUp as ChevronUpSolidIcon, SvgChevronUp$1 as ChevronUpStrokeIcon, SvgClipboard$2 as ClipboardIcon, SvgClipboard as ClipboardSolidIcon, SvgClipboard$1 as ClipboardStrokeIcon, SvgCloudArrowDown$2 as CloudArrowDownIcon, SvgCloudArrowDown as CloudArrowDownSolidIcon, SvgCloudArrowDown$1 as CloudArrowDownStrokeIcon, SvgCog6Tooth$2 as Cog6ToothIcon, SvgCog6Tooth as Cog6ToothSolidIcon, SvgCog6Tooth$1 as Cog6ToothStrokeIcon, SvgCommandLine$2 as CommandLineIcon, SvgCommandLine as CommandLineSolidIcon, SvgCommandLine$1 as CommandLineStrokeIcon, SvgDocumentPlus$2 as DocumentPlusIcon, SvgDocumentPlus as DocumentPlusSolidIcon, SvgDocumentPlus$1 as DocumentPlusStrokeIcon, SvgDocumentText$2 as DocumentTextIcon, SvgDocumentText as DocumentTextSolidIcon, SvgDocumentText$1 as DocumentTextStrokeIcon, SvgExclamationCircle$2 as ExclamationCircleIcon, SvgExclamationCircle as ExclamationCircleSolidIcon, SvgExclamationCircle$1 as ExclamationCircleStrokeIcon, SvgFolderOpen$2 as FolderOpenIcon, SvgFolderOpen as FolderOpenSolidIcon, SvgFolderOpen$1 as FolderOpenStrokeIcon, SvgHandThumbDown$2 as HandThumbDownIcon, SvgHandThumbDown as HandThumbDownSolidIcon, SvgHandThumbDown$1 as HandThumbDownStrokeIcon, SvgHandThumbUp$2 as HandThumbUpIcon, SvgHandThumbUp as HandThumbUpSolidIcon, SvgHandThumbUp$1 as HandThumbUpStrokeIcon, Icon, IconButton, IconToggleButton, SvgInformationCircle$2 as InformationCircleIcon, SvgInformationCircle as InformationCircleSolidIcon, SvgInformationCircle$1 as InformationCircleStrokeIcon, Item, SvgKey$2 as KeyIcon, SvgKey as KeySolidIcon, SvgKey$1 as KeyStrokeIcon, Logo, SvgMagnifyingGlass$2 as MagnifyingGlassIcon, SvgMagnifyingGlass as MagnifyingGlassSolidIcon, SvgMagnifyingGlass$1 as MagnifyingGlassStrokeIcon, PageHeader, SvgPaperAirplane$2 as PaperAirplaneIcon, SvgPaperAirplane as PaperAirplaneSolidIcon, SvgPaperAirplane$1 as PaperAirplaneStrokeIcon, SvgPencilSquare$2 as PencilSquareIcon, SvgPencilSquare as PencilSquareSolidIcon, SvgPencilSquare$1 as PencilSquareStrokeIcon, SvgPlus$2 as PlusIcon, SvgPlus as PlusSolidIcon, SvgPlus$1 as PlusStrokeIcon, SvgQuestionMarkCircle$2 as QuestionMarkCircleIcon, SvgQuestionMarkCircle as QuestionMarkCircleSolidIcon, SvgQuestionMarkCircle$1 as QuestionMarkCircleStrokeIcon, SectionHeader, SvgServer$2 as ServerIcon, SvgServer as ServerSolidIcon, SvgServer$1 as ServerStrokeIcon, SparkleContext, SvgSquare3Stack3D$2 as Square3Stack3DIcon, SvgSquare3Stack3D as Square3Stack3DSolidIcon, SvgSquare3Stack3D$1 as Square3Stack3DStrokeIcon, Tab, Tooltip, SvgXCircle$2 as XCircleIcon, SvgXCircle as XCircleSolidIcon, SvgXCircle$1 as XCircleStrokeIcon, SvgXMark$2 as XMarkIcon, SvgXMark as XMarkSolidIcon, SvgXMark$1 as XMarkStrokeIcon };
868
892
  //# sourceMappingURL=index.js.map