@dust-tt/sparkle 0.1.29 → 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.
Files changed (20) hide show
  1. package/dist/cjs/components/Button.d.ts +3 -1
  2. package/dist/cjs/components/Icon.d.ts +4 -4
  3. package/dist/cjs/components/IconButton.d.ts +5 -2
  4. package/dist/cjs/components/IconToggleButton.d.ts +4 -1
  5. package/dist/cjs/components/Tab.d.ts +4 -3
  6. package/dist/cjs/components/Tooltip.d.ts +1 -2
  7. package/dist/cjs/index.js +45 -33
  8. package/dist/cjs/index.js.map +1 -1
  9. package/dist/cjs/stories/Icon.stories.d.ts +4 -1
  10. package/dist/esm/components/Button.d.ts +3 -1
  11. package/dist/esm/components/Icon.d.ts +4 -4
  12. package/dist/esm/components/IconButton.d.ts +5 -2
  13. package/dist/esm/components/IconToggleButton.d.ts +4 -1
  14. package/dist/esm/components/Tab.d.ts +4 -3
  15. package/dist/esm/components/Tooltip.d.ts +1 -2
  16. package/dist/esm/index.js +45 -33
  17. package/dist/esm/index.js.map +1 -1
  18. package/dist/esm/stories/Icon.stories.d.ts +4 -1
  19. package/dist/tsconfig.tsbuildinfo +1 -1
  20. package/package.json +1 -1
package/dist/cjs/stories/Icon.stories.d.ts CHANGED
@@ -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;
package/dist/esm/components/Button.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { ComponentType, MouseEvent } from "react";
2
+ import { TooltipProps } from "./Tooltip";
2
3
  export type ButtonProps = {
3
4
  type?: "primary" | "primaryWarning" | "secondary" | "secondaryWarning" | "tertiary";
4
5
  size?: "xs" | "sm" | "md";
@@ -8,5 +9,6 @@ export 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;
14
+ export declare function Button({ type, size, onClick, disabled, labelVisible, label, icon, className, tooltipPosition, }: ButtonProps): React.JSX.Element;
package/dist/esm/components/Icon.d.ts CHANGED
@@ -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;
package/dist/esm/components/IconButton.d.ts CHANGED
@@ -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 {};
package/dist/esm/components/IconToggleButton.d.ts CHANGED
@@ -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 {};
package/dist/esm/components/Tab.d.ts CHANGED
@@ -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;
package/dist/esm/components/Tooltip.d.ts CHANGED
@@ -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-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-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-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-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-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-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}\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}";
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 _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;
213
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);
214
- var iconClasses = classNames(iconSizeClasses[size]);
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,18 +478,18 @@ 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
  }
@@ -591,6 +591,18 @@ var iconClasses$1 = {
591
591
  disabled: "dark:s-text-element-500-dark",
592
592
  },
593
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
+ },
594
606
  secondary: {
595
607
  base: "s-text-element-900",
596
608
  hover: "hover:s-text-action-400",
@@ -617,12 +629,12 @@ var iconClasses$1 = {
617
629
  },
618
630
  };
619
631
  function IconButton(_a) {
620
- 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;
621
633
  // Choose the correct group of classes based on 'type'
622
634
  var iconGroup = iconClasses$1[type];
623
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);
624
- 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" })));
625
- 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);
626
638
  }
627
639
 
628
640
  var baseClasses = "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";
@@ -657,7 +669,7 @@ var iconClasses = {
657
669
  },
658
670
  };
659
671
  function IconToggleButton(_a) {
660
- 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;
661
673
  var iconGroup = iconClasses[type];
662
674
  var finalIconClasses = classNames(className, baseClasses, disabled
663
675
  ? iconGroup.disabled
@@ -672,8 +684,8 @@ function IconToggleButton(_a) {
672
684
  if (!disabled) {
673
685
  onClick === null || onClick === void 0 ? void 0 : onClick(e); // Run passed onClick event
674
686
  }
675
- }, disabled: disabled }, icon && React__default.createElement(Icon, { IconComponent: icon, className: "s-h-5 s-w-5" })));
676
- 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);
677
689
  }
678
690
 
679
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),