@dust-tt/sparkle 0.1.21 → 0.1.22

package/dist/esm/_index.d.ts

@@ -0,0 +1,28 @@
+import { SparkleContext } from "./context";
+export { SparkleContext };
+import { Button } from "./components/Button";
+export { Button };
+import { Tab } from "./components/Tab";
+export { Tab };
+import { Item } from "./components/Item";
+export { Item };
+import { PageHeader } from "./components/PageHeader";
+export { PageHeader };
+import { Icon } from "./components/Icon";
+export { Icon };
+import { Logo } from "./logo";
+export { Logo };
+import { Checkbox } from "./components/Checkbox";
+export { Checkbox };
+import { IconButton } from "./components/IconButton";
+export { IconButton };
+import { IconToggleButton } from "./components/IconToggleButton";
+export { IconToggleButton };
+import { Tooltip } from "./components/Tooltip";
+export { Tooltip };
+import { ArrowUpOnSquare as ArrowUpOnSquareIcon, Beaker as BeakerIcon, BeakerPlus as BeakerPlusIcon, ChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusIcon, ChatBubbleBottomCenterText as ChatBubbleBottomCenterTextIcon, ChatBubbleLeftRight as ChatBubbleLeftRightIcon, CheckCircle as CheckCircleIcon, ChevronDown as ChevronDownIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, ChevronUp as ChevronUpIcon, Clipboard as ClipboardIcon, CloudArrowDown as CloudArrowDownIcon, Cog6Tooth as Cog6ToothIcon, CommandLine as CommandLineIcon, DocumentPlus as DocumentPlusIcon, DocumentText as DocumentTextIcon, ExclamationCircle as ExclamationCircleIcon, FolderOpen as FolderOpenIcon, HandThumbDown as HandThumbDownIcon, HandThumbUp as HandThumbUpIcon, InformationCircle as InformationCircleIcon, Key as KeyIcon, MagnifyingGlass as MagnifyingGlassIcon, PaperAirplane as PaperAirplaneIcon, PencilSquare as PencilSquareIcon, Plus as PlusIcon, QuestionMarkCircle as QuestionMarkCircleIcon, Server as ServerIcon, Square3Stack3D as Square3Stack3DIcon, XCircle as XCircleIcon, XMark as XMarkIcon } from "./icons/mini";
+export { ArrowUpOnSquareIcon, BeakerIcon, BeakerPlusIcon, ChatBubbleBottomCenterPlusIcon, ChatBubbleBottomCenterTextIcon, ChatBubbleLeftRightIcon, CheckCircleIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, CloudArrowDownIcon, Cog6ToothIcon, CommandLineIcon, DocumentPlusIcon, DocumentTextIcon, ExclamationCircleIcon, FolderOpenIcon, HandThumbDownIcon, HandThumbUpIcon, InformationCircleIcon, KeyIcon, MagnifyingGlassIcon, PaperAirplaneIcon, PencilSquareIcon, PlusIcon, QuestionMarkCircleIcon, ServerIcon, Square3Stack3DIcon, XCircleIcon, XMarkIcon, };
+import { ArrowUpOnSquare as ArrowUpOnSquareStrokeIcon, Beaker as BeakerStrokeIcon, BeakerPlus as BeakerPlusStrokeIcon, ChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusStrokeIcon, ChatBubbleBottomCenterText as ChatBubbleBottomCenterTextStrokeIcon, ChatBubbleLeftRight as ChatBubbleLeftRightStrokeIcon, CheckCircle as CheckCircleStrokeIcon, ChevronDown as ChevronDownStrokeIcon, ChevronLeft as ChevronLeftStrokeIcon, ChevronRight as ChevronRightStrokeIcon, ChevronUp as ChevronUpStrokeIcon, Clipboard as ClipboardStrokeIcon, CloudArrowDown as CloudArrowDownStrokeIcon, Cog6Tooth as Cog6ToothStrokeIcon, CommandLine as CommandLineStrokeIcon, DocumentPlus as DocumentPlusStrokeIcon, DocumentText as DocumentTextStrokeIcon, ExclamationCircle as ExclamationCircleStrokeIcon, FolderOpen as FolderOpenStrokeIcon, HandThumbDown as HandThumbDownStrokeIcon, HandThumbUp as HandThumbUpStrokeIcon, InformationCircle as InformationCircleStrokeIcon, Key as KeyStrokeIcon, MagnifyingGlass as MagnifyingGlassStrokeIcon, PaperAirplane as PaperAirplaneStrokeIcon, PencilSquare as PencilSquareStrokeIcon, Plus as PlusStrokeIcon, QuestionMarkCircle as QuestionMarkCircleStrokeIcon, Server as ServerStrokeIcon, Square3Stack3D as Square3Stack3DStrokeIcon, XCircle as XCircleStrokeIcon, XMark as XMarkStrokeIcon } from "./icons/solid_stroke";
+export { ArrowUpOnSquareStrokeIcon, BeakerPlusStrokeIcon, BeakerStrokeIcon, ChatBubbleBottomCenterPlusStrokeIcon, ChatBubbleBottomCenterTextStrokeIcon, ChatBubbleLeftRightStrokeIcon, CheckCircleStrokeIcon, ChevronDownStrokeIcon, ChevronLeftStrokeIcon, ChevronRightStrokeIcon, ChevronUpStrokeIcon, ClipboardStrokeIcon, CloudArrowDownStrokeIcon, Cog6ToothStrokeIcon, CommandLineStrokeIcon, DocumentPlusStrokeIcon, DocumentTextStrokeIcon, ExclamationCircleStrokeIcon, FolderOpenStrokeIcon, HandThumbDownStrokeIcon, HandThumbUpStrokeIcon, InformationCircleStrokeIcon, KeyStrokeIcon, MagnifyingGlassStrokeIcon, PaperAirplaneStrokeIcon, PencilSquareStrokeIcon, PlusStrokeIcon, QuestionMarkCircleStrokeIcon, ServerStrokeIcon, Square3Stack3DStrokeIcon, XCircleStrokeIcon, XMarkStrokeIcon, };
+import { ArrowUpOnSquare as ArrowUpOnSquareSolidIcon, Beaker as BeakerSolidIcon, BeakerPlus as BeakerPlusSolidIcon, ChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusSolidIcon, ChatBubbleBottomCenterText as ChatBubbleBottomCenterTextSolidIcon, ChatBubbleLeftRight as ChatBubbleLeftRightSolidIcon, CheckCircle as CheckCircleSolidIcon, ChevronDown as ChevronDownSolidIcon, ChevronLeft as ChevronLeftSolidIcon, ChevronRight as ChevronRightSolidIcon, ChevronUp as ChevronUpSolidIcon, Clipboard as ClipboardSolidIcon, CloudArrowDown as CloudArrowDownSolidIcon, Cog6Tooth as Cog6ToothSolidIcon, CommandLine as CommandLineSolidIcon, DocumentPlus as DocumentPlusSolidIcon, DocumentText as DocumentTextSolidIcon, ExclamationCircle as ExclamationCircleSolidIcon, FolderOpen as FolderOpenSolidIcon, HandThumbDown as HandThumbDownSolidIcon, HandThumbUp as HandThumbUpSolidIcon, InformationCircle as InformationCircleSolidIcon, Key as KeySolidIcon, MagnifyingGlass as MagnifyingGlassSolidIcon, PaperAirplane as PaperAirplaneSolidIcon, PencilSquare as PencilSquareSolidIcon, Plus as PlusSolidIcon, QuestionMarkCircle as QuestionMarkCircleSolidIcon, Server as ServerSolidIcon, Square3Stack3D as Square3Stack3DSolidIcon, XCircle as XCircleSolidIcon, XMark as XMarkSolidIcon } from "./icons/solid";
+export { ArrowUpOnSquareSolidIcon, BeakerPlusSolidIcon, BeakerSolidIcon, ChatBubbleBottomCenterPlusSolidIcon, ChatBubbleBottomCenterTextSolidIcon, ChatBubbleLeftRightSolidIcon, CheckCircleSolidIcon, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, ClipboardSolidIcon, CloudArrowDownSolidIcon, Cog6ToothSolidIcon, CommandLineSolidIcon, DocumentPlusSolidIcon, DocumentTextSolidIcon, ExclamationCircleSolidIcon, FolderOpenSolidIcon, HandThumbDownSolidIcon, HandThumbUpSolidIcon, InformationCircleSolidIcon, KeySolidIcon, MagnifyingGlassSolidIcon, PaperAirplaneSolidIcon, PencilSquareSolidIcon, PlusSolidIcon, QuestionMarkCircleSolidIcon, ServerSolidIcon, Square3Stack3DSolidIcon, XCircleSolidIcon, XMarkSolidIcon, };

package/dist/esm/components/IconButton.d.ts

@@ -0,0 +1,11 @@
+import React, { ComponentType, MouseEventHandler } from "react";
+type IconButtonProps = {
+    type?: "primary" | "secondary" | "tertiary";
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    tooltip?: string;
+    icon?: ComponentType;
+    className?: string;
+    disabled?: boolean;
+};
+export declare function IconButton({ type, onClick, disabled, tooltip, icon, className, }: IconButtonProps): React.JSX.Element;
+export {};

package/dist/esm/components/IconToggleButton.d.ts

@@ -0,0 +1,12 @@
+import React, { ComponentType, MouseEventHandler } from "react";
+type IconToggleButtonProps = {
+    type?: "secondary" | "tertiary";
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    tooltip?: string;
+    icon?: ComponentType;
+    className?: string;
+    disabled?: boolean;
+    selected?: boolean;
+};
+export declare function IconToggleButton({ type, onClick, disabled, tooltip, icon, className, selected: isSelected, }: IconToggleButtonProps): React.JSX.Element;
+export {};

package/dist/esm/components/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+interface TooltipProps {
+    children: React.ReactNode;
+    label: string;
+    position?: "above" | "below";
+}
+export declare function Tooltip({ children, label, position }: TooltipProps): React.JSX.Element;
+export {};

package/dist/esm/index.d.ts

@@ -1,23 +1,2 @@
 import "./styles/global.css";
-import { SparkleContext } from "./context";
-export { SparkleContext };
-import { Button } from "./components/Button";
-export { Button };
-import { Tab } from "./components/Tab";
-export { Tab };
-import { Item } from "./components/Item";
-export { Item };
-import { PageHeader } from "./components/PageHeader";
-export { PageHeader };
-import { Icon } from "./components/Icon";
-export { Icon };
-import { Logo } from "./logo";
-export { Logo };
-import { Checkbox } from "./components/Checkbox";
-export { Checkbox };
-import { ArrowUpOnSquare as ArrowUpOnSquareIcon, Beaker as BeakerIcon, BeakerPlus as BeakerPlusIcon, ChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusIcon, ChatBubbleBottomCenterText as ChatBubbleBottomCenterTextIcon, ChatBubbleLeftRight as ChatBubbleLeftRightIcon, CheckCircle as CheckCircleIcon, ChevronDown as ChevronDownIcon, ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon, ChevronUp as ChevronUpIcon, Clipboard as ClipboardIcon, CloudArrowDown as CloudArrowDownIcon, Cog6Tooth as Cog6ToothIcon, CommandLine as CommandLineIcon, DocumentPlus as DocumentPlusIcon, DocumentText as DocumentTextIcon, ExclamationCircle as ExclamationCircleIcon, FolderOpen as FolderOpenIcon, HandThumbDown as HandThumbDownIcon, HandThumbUp as HandThumbUpIcon, InformationCircle as InformationCircleIcon, Key as KeyIcon, MagnifyingGlass as MagnifyingGlassIcon, PaperAirplane as PaperAirplaneIcon, PencilSquare as PencilSquareIcon, Plus as PlusIcon, QuestionMarkCircle as QuestionMarkCircleIcon, Server as ServerIcon, Square3Stack3D as Square3Stack3DIcon, XCircle as XCircleIcon, XMark as XMarkIcon } from "./icons/mini";
-export { ArrowUpOnSquareIcon, BeakerIcon, BeakerPlusIcon, ChatBubbleBottomCenterPlusIcon, ChatBubbleBottomCenterTextIcon, ChatBubbleLeftRightIcon, CheckCircleIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ClipboardIcon, CloudArrowDownIcon, Cog6ToothIcon, CommandLineIcon, DocumentPlusIcon, DocumentTextIcon, ExclamationCircleIcon, FolderOpenIcon, HandThumbDownIcon, HandThumbUpIcon, InformationCircleIcon, KeyIcon, MagnifyingGlassIcon, PaperAirplaneIcon, PencilSquareIcon, PlusIcon, QuestionMarkCircleIcon, ServerIcon, Square3Stack3DIcon, XCircleIcon, XMarkIcon, };
-import { ArrowUpOnSquare as ArrowUpOnSquareStrokeIcon, Beaker as BeakerStrokeIcon, BeakerPlus as BeakerPlusStrokeIcon, ChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusStrokeIcon, ChatBubbleBottomCenterText as ChatBubbleBottomCenterTextStrokeIcon, ChatBubbleLeftRight as ChatBubbleLeftRightStrokeIcon, CheckCircle as CheckCircleStrokeIcon, ChevronDown as ChevronDownStrokeIcon, ChevronLeft as ChevronLeftStrokeIcon, ChevronRight as ChevronRightStrokeIcon, ChevronUp as ChevronUpStrokeIcon, Clipboard as ClipboardStrokeIcon, CloudArrowDown as CloudArrowDownStrokeIcon, Cog6Tooth as Cog6ToothStrokeIcon, CommandLine as CommandLineStrokeIcon, DocumentPlus as DocumentPlusStrokeIcon, DocumentText as DocumentTextStrokeIcon, ExclamationCircle as ExclamationCircleStrokeIcon, FolderOpen as FolderOpenStrokeIcon, HandThumbDown as HandThumbDownStrokeIcon, HandThumbUp as HandThumbUpStrokeIcon, InformationCircle as InformationCircleStrokeIcon, Key as KeyStrokeIcon, MagnifyingGlass as MagnifyingGlassStrokeIcon, PaperAirplane as PaperAirplaneStrokeIcon, PencilSquare as PencilSquareStrokeIcon, Plus as PlusStrokeIcon, QuestionMarkCircle as QuestionMarkCircleStrokeIcon, Server as ServerStrokeIcon, Square3Stack3D as Square3Stack3DStrokeIcon, XCircle as XCircleStrokeIcon, XMark as XMarkStrokeIcon } from "./icons/solid_stroke";
-export { ArrowUpOnSquareStrokeIcon, BeakerPlusStrokeIcon, BeakerStrokeIcon, ChatBubbleBottomCenterPlusStrokeIcon, ChatBubbleBottomCenterTextStrokeIcon, ChatBubbleLeftRightStrokeIcon, CheckCircleStrokeIcon, ChevronDownStrokeIcon, ChevronLeftStrokeIcon, ChevronRightStrokeIcon, ChevronUpStrokeIcon, ClipboardStrokeIcon, CloudArrowDownStrokeIcon, Cog6ToothStrokeIcon, CommandLineStrokeIcon, DocumentPlusStrokeIcon, DocumentTextStrokeIcon, ExclamationCircleStrokeIcon, FolderOpenStrokeIcon, HandThumbDownStrokeIcon, HandThumbUpStrokeIcon, InformationCircleStrokeIcon, KeyStrokeIcon, MagnifyingGlassStrokeIcon, PaperAirplaneStrokeIcon, PencilSquareStrokeIcon, PlusStrokeIcon, QuestionMarkCircleStrokeIcon, ServerStrokeIcon, Square3Stack3DStrokeIcon, XCircleStrokeIcon, XMarkStrokeIcon, };
-import { ArrowUpOnSquare as ArrowUpOnSquareSolidIcon, Beaker as BeakerSolidIcon, BeakerPlus as BeakerPlusSolidIcon, ChatBubbleBottomCenterPlus as ChatBubbleBottomCenterPlusSolidIcon, ChatBubbleBottomCenterText as ChatBubbleBottomCenterTextSolidIcon, ChatBubbleLeftRight as ChatBubbleLeftRightSolidIcon, CheckCircle as CheckCircleSolidIcon, ChevronDown as ChevronDownSolidIcon, ChevronLeft as ChevronLeftSolidIcon, ChevronRight as ChevronRightSolidIcon, ChevronUp as ChevronUpSolidIcon, Clipboard as ClipboardSolidIcon, CloudArrowDown as CloudArrowDownSolidIcon, Cog6Tooth as Cog6ToothSolidIcon, CommandLine as CommandLineSolidIcon, DocumentPlus as DocumentPlusSolidIcon, DocumentText as DocumentTextSolidIcon, ExclamationCircle as ExclamationCircleSolidIcon, FolderOpen as FolderOpenSolidIcon, HandThumbDown as HandThumbDownSolidIcon, HandThumbUp as HandThumbUpSolidIcon, InformationCircle as InformationCircleSolidIcon, Key as KeySolidIcon, MagnifyingGlass as MagnifyingGlassSolidIcon, PaperAirplane as PaperAirplaneSolidIcon, PencilSquare as PencilSquareSolidIcon, Plus as PlusSolidIcon, QuestionMarkCircle as QuestionMarkCircleSolidIcon, Server as ServerSolidIcon, Square3Stack3D as Square3Stack3DSolidIcon, XCircle as XCircleSolidIcon, XMark as XMarkSolidIcon } from "./icons/solid";
-export { ArrowUpOnSquareSolidIcon, BeakerPlusSolidIcon, BeakerSolidIcon, ChatBubbleBottomCenterPlusSolidIcon, ChatBubbleBottomCenterTextSolidIcon, ChatBubbleLeftRightSolidIcon, CheckCircleSolidIcon, ChevronDownSolidIcon, ChevronLeftSolidIcon, ChevronRightSolidIcon, ChevronUpSolidIcon, ClipboardSolidIcon, CloudArrowDownSolidIcon, Cog6ToothSolidIcon, CommandLineSolidIcon, DocumentPlusSolidIcon, DocumentTextSolidIcon, ExclamationCircleSolidIcon, FolderOpenSolidIcon, HandThumbDownSolidIcon, HandThumbUpSolidIcon, InformationCircleSolidIcon, KeySolidIcon, MagnifyingGlassSolidIcon, PaperAirplaneSolidIcon, PencilSquareSolidIcon, PlusSolidIcon, QuestionMarkCircleSolidIcon, ServerSolidIcon, Square3Stack3DSolidIcon, XCircleSolidIcon, XMarkSolidIcon, };
+export * from "./_index";

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { useState, useEffect } from 'react';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -28,7 +28,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z = "/* @tailwind base; */\n.-s-mb-px {\n    margin-bottom: -1px\n}\n.s-box-border {\n    box-sizing: border-box\n}\n.s-flex {\n    display: flex\n}\n.s-inline-flex {\n    display: inline-flex\n}\n.s-hidden {\n    display: none\n}\n.s-h-3 {\n    height: 0.75rem\n}\n.s-h-4 {\n    height: 1rem\n}\n.s-h-5 {\n    height: 1.25rem\n}\n.s-h-8 {\n    height: 2rem\n}\n.s-w-3 {\n    width: 0.75rem\n}\n.s-w-4 {\n    width: 1rem\n}\n.s-w-5 {\n    width: 1.25rem\n}\n.s-w-8 {\n    width: 2rem\n}\n.s-flex-1 {\n    flex: 1 1 0%\n}\n.s-shrink {\n    flex-shrink: 1\n}\n.s-grow {\n    flex-grow: 1\n}\n.s-basis-0 {\n    flex-basis: 0px\n}\n.s-translate-y-0 {\n    --tw-translate-y: 0px;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.s-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-border {\n    border-width: 1px\n}\n.s-border-b {\n    border-bottom-width: 1px\n}\n.s-border-b-2 {\n    border-bottom-width: 2px\n}\n.s-border-action-500 {\n    --tw-border-opacity: 1;\n    border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n.s-border-action-600 {\n    --tw-border-opacity: 1;\n    border-color: rgb(37 99 235 / var(--tw-border-opacity))\n}\n.s-border-element-600 {\n    --tw-border-opacity: 1;\n    border-color: rgb(148 163 184 / var(--tw-border-opacity))\n}\n.s-border-structure-200 {\n    --tw-border-opacity: 1;\n    border-color: rgb(226 232 240 / var(--tw-border-opacity))\n}\n.s-border-structure-300 {\n    --tw-border-opacity: 1;\n    border-color: rgb(203 213 225 / var(--tw-border-opacity))\n}\n.s-border-transparent {\n    border-color: transparent\n}\n.s-bg-action-500 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n.s-bg-blue-500 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n.s-bg-gray-200 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(229 231 235 / var(--tw-bg-opacity))\n}\n.s-bg-structure-0 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n.s-bg-structure-50 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 250 252 / var(--tw-bg-opacity))\n}\n.s-px-0 {\n    padding-left: 0px;\n    padding-right: 0px\n}\n.s-px-0\\.5 {\n    padding-left: 0.125rem;\n    padding-right: 0.125rem\n}\n.s-px-1 {\n    padding-left: 0.25rem;\n    padding-right: 0.25rem\n}\n.s-px-3 {\n    padding-left: 0.75rem;\n    padding-right: 0.75rem\n}\n.s-px-4 {\n    padding-left: 1rem;\n    padding-right: 1rem\n}\n.s-px-5 {\n    padding-left: 1.25rem;\n    padding-right: 1.25rem\n}\n.s-py-1 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem\n}\n.s-py-1\\.5 {\n    padding-top: 0.375rem;\n    padding-bottom: 0.375rem\n}\n.s-py-2 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem\n}\n.s-py-3 {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem\n}\n.s-text-2xl {\n    font-size: 1.5rem;\n    line-height: 2rem\n}\n.s-text-sm {\n    font-size: 0.875rem;\n    line-height: 1.25rem\n}\n.s-text-xs {\n    font-size: 0.75rem;\n    line-height: 1rem\n}\n.s-font-bold {\n    font-weight: 700\n}\n.s-font-medium {\n    font-weight: 500\n}\n.s-font-normal {\n    font-weight: 400\n}\n.s-font-semibold {\n    font-weight: 600\n}\n.s-text-action-300 {\n    --tw-text-opacity: 1;\n    color: rgb(147 197 253 / var(--tw-text-opacity))\n}\n.s-text-action-400 {\n    --tw-text-opacity: 1;\n    color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n.s-text-action-500 {\n    --tw-text-opacity: 1;\n    color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n.s-text-brand {\n    --tw-text-opacity: 1;\n    color: rgb(16 185 129 / var(--tw-text-opacity))\n}\n.s-text-element-600 {\n    --tw-text-opacity: 1;\n    color: rgb(148 163 184 / var(--tw-text-opacity))\n}\n.s-text-element-700 {\n    --tw-text-opacity: 1;\n    color: rgb(100 116 139 / var(--tw-text-opacity))\n}\n.s-text-element-800 {\n    --tw-text-opacity: 1;\n    color: rgb(51 65 85 / var(--tw-text-opacity))\n}\n.s-text-element-900 {\n    --tw-text-opacity: 1;\n    color: rgb(15 23 42 / var(--tw-text-opacity))\n}\n.s-text-transparent {\n    color: transparent\n}\n.s-text-white {\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n.s-opacity-0 {\n    opacity: 0\n}\n.s-opacity-100 {\n    opacity: 1\n}\n.s-opacity-50 {\n    opacity: 0.5\n}\n.s-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-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-border-action-300:hover {\n    --tw-border-opacity: 1;\n    border-color: rgb(147 197 253 / var(--tw-border-opacity))\n}\n.hover\\:s-border-action-500:hover {\n    --tw-border-opacity: 1;\n    border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n.hover\\:s-bg-action-200:hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(191 219 254 / var(--tw-bg-opacity))\n}\n.hover\\:s-bg-action-400:hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(96 165 250 / var(--tw-bg-opacity))\n}\n.hover\\:s-bg-action-50:hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(239 246 255 / var(--tw-bg-opacity))\n}\n.hover\\:s-text-action-500:hover {\n    --tw-text-opacity: 1;\n    color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n.hover\\:s-text-element-800:hover {\n    --tw-text-opacity: 1;\n    color: rgb(51 65 85 / var(--tw-text-opacity))\n}\n.hover\\:s-drop-shadow-md:hover {\n    --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));\n    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n.active\\:s-scale-95:active {\n    --tw-scale-x: .95;\n    --tw-scale-y: .95;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.active\\:s-border-action-500:active {\n    --tw-border-opacity: 1;\n    border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n.active\\:s-border-action-700:active {\n    --tw-border-opacity: 1;\n    border-color: rgb(29 78 216 / var(--tw-border-opacity))\n}\n.active\\:s-bg-action-100:active {\n    --tw-bg-opacity: 1;\n    background-color: rgb(219 234 254 / var(--tw-bg-opacity))\n}\n.active\\:s-bg-action-600:active {\n    --tw-bg-opacity: 1;\n    background-color: rgb(37 99 235 / var(--tw-bg-opacity))\n}\n.active\\:s-text-action-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-text-action-400 {\n    --tw-text-opacity: 1;\n    color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-border-action-500-dark) {\n    --tw-border-opacity: 1;\n    border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-action-600-dark) {\n    --tw-border-opacity: 1;\n    border-color: rgb(96 165 250 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-element-500-dark) {\n    --tw-border-opacity: 1;\n    border-color: rgb(100 116 139 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-structure-200-dark) {\n    --tw-border-opacity: 1;\n    border-color: rgb(51 65 85 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-structure-300-dark) {\n    --tw-border-opacity: 1;\n    border-color: rgb(71 85 105 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-bg-action-500-dark) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-bg-structure-50-dark) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(15 23 42 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-text-action-300-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(29 78 216 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-action-400-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(37 99 235 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-action-500-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-600-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(148 163 184 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-700-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(203 213 225 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-900-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(248 250 252 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-border-action-300-dark:hover) {\n    --tw-border-opacity: 1;\n    border-color: rgb(29 78 216 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-border-action-500-dark:hover) {\n    --tw-border-opacity: 1;\n    border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-action-200-dark:hover) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(30 64 175 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-action-50-dark:hover) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(23 37 84 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-action-500-dark:hover) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-text-action-400:hover) {\n    --tw-text-opacity: 1;\n    color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-border-action-500-dark:active) {\n    --tw-border-opacity: 1;\n    border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-border-action-700-dark:active) {\n    --tw-border-opacity: 1;\n    border-color: rgb(147 197 253 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-bg-action-100-dark:active) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(30 58 138 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-bg-action-600-dark:active) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(96 165 250 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-text-action-600:active) {\n    --tw-text-opacity: 1;\n    color: rgb(37 99 235 / var(--tw-text-opacity))\n}\n:is(.s-dark .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}";
+var css_248z = ".s-absolute {\n    position: absolute\n}\n.s-relative {\n    position: relative\n}\n.s-bottom-full {\n    bottom: 100%\n}\n.s-left-1\\/2 {\n    left: 50%\n}\n.s-top-full {\n    top: 100%\n}\n.s-z-10 {\n    z-index: 10\n}\n.-s-mb-px {\n    margin-bottom: -1px\n}\n.s-mb-2 {\n    margin-bottom: 0.5rem\n}\n.s-mt-2 {\n    margin-top: 0.5rem\n}\n.s-box-border {\n    box-sizing: border-box\n}\n.s-inline-block {\n    display: inline-block\n}\n.s-flex {\n    display: flex\n}\n.s-inline-flex {\n    display: inline-flex\n}\n.s-hidden {\n    display: none\n}\n.s-h-3 {\n    height: 0.75rem\n}\n.s-h-4 {\n    height: 1rem\n}\n.s-h-5 {\n    height: 1.25rem\n}\n.s-h-8 {\n    height: 2rem\n}\n.s-w-3 {\n    width: 0.75rem\n}\n.s-w-4 {\n    width: 1rem\n}\n.s-w-5 {\n    width: 1.25rem\n}\n.s-w-8 {\n    width: 2rem\n}\n.s-flex-1 {\n    flex: 1 1 0%\n}\n.s-shrink {\n    flex-shrink: 1\n}\n.s-grow {\n    flex-grow: 1\n}\n.s-basis-0 {\n    flex-basis: 0px\n}\n.-s-translate-y-0 {\n    --tw-translate-y: -0px;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.s-translate-x-1\\/2 {\n    --tw-translate-x: 50%;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.s-translate-y-0 {\n    --tw-translate-y: 0px;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.s-translate-y-2 {\n    --tw-translate-y: 0.5rem;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.s-scale-95 {\n    --tw-scale-x: .95;\n    --tw-scale-y: .95;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.s-transform {\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.s-cursor-default {\n    cursor: default\n}\n.s-cursor-not-allowed {\n    cursor: not-allowed\n}\n.s-cursor-pointer {\n    cursor: pointer\n}\n.s-select-none {\n    -webkit-user-select: none;\n       -moz-user-select: none;\n            user-select: none\n}\n.s-flex-col {\n    flex-direction: column\n}\n.s-items-start {\n    align-items: flex-start\n}\n.s-items-center {\n    align-items: center\n}\n.s-justify-start {\n    justify-content: flex-start\n}\n.s-justify-center {\n    justify-content: center\n}\n.s-gap-1 {\n    gap: 0.25rem\n}\n.s-gap-x-1 {\n    -moz-column-gap: 0.25rem;\n         column-gap: 0.25rem\n}\n.s-gap-x-1\\.5 {\n    -moz-column-gap: 0.375rem;\n         column-gap: 0.375rem\n}\n.s-gap-x-2 {\n    -moz-column-gap: 0.5rem;\n         column-gap: 0.5rem\n}\n.s-space-x-0 > :not([hidden]) ~ :not([hidden]) {\n    --tw-space-x-reverse: 0;\n    margin-right: calc(0px * var(--tw-space-x-reverse));\n    margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)))\n}\n.s-self-stretch {\n    align-self: stretch\n}\n.s-whitespace-nowrap {\n    white-space: nowrap\n}\n.s-rounded {\n    border-radius: 0.25rem\n}\n.s-rounded-full {\n    border-radius: 9999px\n}\n.s-rounded-md {\n    border-radius: 0.375rem\n}\n.s-rounded-xl {\n    border-radius: 0.75rem\n}\n.s-border {\n    border-width: 1px\n}\n.s-border-b {\n    border-bottom-width: 1px\n}\n.s-border-b-2 {\n    border-bottom-width: 2px\n}\n.s-border-action-500 {\n    --tw-border-opacity: 1;\n    border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n.s-border-action-600 {\n    --tw-border-opacity: 1;\n    border-color: rgb(37 99 235 / var(--tw-border-opacity))\n}\n.s-border-element-600 {\n    --tw-border-opacity: 1;\n    border-color: rgb(148 163 184 / var(--tw-border-opacity))\n}\n.s-border-structure-200 {\n    --tw-border-opacity: 1;\n    border-color: rgb(226 232 240 / var(--tw-border-opacity))\n}\n.s-border-structure-300 {\n    --tw-border-opacity: 1;\n    border-color: rgb(203 213 225 / var(--tw-border-opacity))\n}\n.s-border-transparent {\n    border-color: transparent\n}\n.s-bg-action-500 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n.s-bg-gray-200 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(229 231 235 / var(--tw-bg-opacity))\n}\n.s-bg-structure-0 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / var(--tw-bg-opacity))\n}\n.s-bg-structure-50 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(248 250 252 / var(--tw-bg-opacity))\n}\n.s-px-0 {\n    padding-left: 0px;\n    padding-right: 0px\n}\n.s-px-0\\.5 {\n    padding-left: 0.125rem;\n    padding-right: 0.125rem\n}\n.s-px-1 {\n    padding-left: 0.25rem;\n    padding-right: 0.25rem\n}\n.s-px-3 {\n    padding-left: 0.75rem;\n    padding-right: 0.75rem\n}\n.s-px-4 {\n    padding-left: 1rem;\n    padding-right: 1rem\n}\n.s-px-5 {\n    padding-left: 1.25rem;\n    padding-right: 1.25rem\n}\n.s-py-1 {\n    padding-top: 0.25rem;\n    padding-bottom: 0.25rem\n}\n.s-py-1\\.5 {\n    padding-top: 0.375rem;\n    padding-bottom: 0.375rem\n}\n.s-py-2 {\n    padding-top: 0.5rem;\n    padding-bottom: 0.5rem\n}\n.s-py-3 {\n    padding-top: 0.75rem;\n    padding-bottom: 0.75rem\n}\n.s-text-2xl {\n    font-size: 1.5rem;\n    line-height: 2rem\n}\n.s-text-sm {\n    font-size: 0.875rem;\n    line-height: 1.25rem\n}\n.s-text-xs {\n    font-size: 0.75rem;\n    line-height: 1rem\n}\n.s-font-bold {\n    font-weight: 700\n}\n.s-font-medium {\n    font-weight: 500\n}\n.s-font-normal {\n    font-weight: 400\n}\n.s-font-semibold {\n    font-weight: 600\n}\n.s-text-action-300 {\n    --tw-text-opacity: 1;\n    color: rgb(147 197 253 / var(--tw-text-opacity))\n}\n.s-text-action-400 {\n    --tw-text-opacity: 1;\n    color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n.s-text-action-500 {\n    --tw-text-opacity: 1;\n    color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n.s-text-brand {\n    --tw-text-opacity: 1;\n    color: rgb(16 185 129 / var(--tw-text-opacity))\n}\n.s-text-element-500 {\n    --tw-text-opacity: 1;\n    color: rgb(203 213 225 / var(--tw-text-opacity))\n}\n.s-text-element-600 {\n    --tw-text-opacity: 1;\n    color: rgb(148 163 184 / var(--tw-text-opacity))\n}\n.s-text-element-700 {\n    --tw-text-opacity: 1;\n    color: rgb(100 116 139 / var(--tw-text-opacity))\n}\n.s-text-element-800 {\n    --tw-text-opacity: 1;\n    color: rgb(51 65 85 / var(--tw-text-opacity))\n}\n.s-text-element-900 {\n    --tw-text-opacity: 1;\n    color: rgb(15 23 42 / var(--tw-text-opacity))\n}\n.s-text-transparent {\n    color: transparent\n}\n.s-text-white {\n    --tw-text-opacity: 1;\n    color: rgb(255 255 255 / var(--tw-text-opacity))\n}\n.s-opacity-0 {\n    opacity: 0\n}\n.s-opacity-100 {\n    opacity: 1\n}\n.s-opacity-50 {\n    opacity: 0.5\n}\n.s-shadow-md {\n    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);\n    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);\n    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)\n}\n.s-transition-all {\n    transition-property: all;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms\n}\n.s-transition-colors {\n    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms\n}\n.s-transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms\n}\n.s-transition-transform {\n    transition-property: transform;\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    transition-duration: 150ms\n}\n.s-duration-200 {\n    transition-duration: 200ms\n}\n.s-duration-300 {\n    transition-duration: 300ms\n}\n.s-duration-500 {\n    transition-duration: 500ms\n}\n.s-ease-in-out {\n    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)\n}\n.s-ease-out {\n    transition-timing-function: cubic-bezier(0, 0, 0.2, 1)\n}\n.hover\\:s-scale-100:hover {\n    --tw-scale-x: 1;\n    --tw-scale-y: 1;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.hover\\:s-scale-110:hover {\n    --tw-scale-x: 1.1;\n    --tw-scale-y: 1.1;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.hover\\:s-border-action-300:hover {\n    --tw-border-opacity: 1;\n    border-color: rgb(147 197 253 / var(--tw-border-opacity))\n}\n.hover\\:s-border-action-500:hover {\n    --tw-border-opacity: 1;\n    border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n.hover\\:s-bg-action-200:hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(191 219 254 / var(--tw-bg-opacity))\n}\n.hover\\:s-bg-action-400:hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(96 165 250 / var(--tw-bg-opacity))\n}\n.hover\\:s-bg-action-50:hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(239 246 255 / var(--tw-bg-opacity))\n}\n.hover\\:s-text-action-400:hover {\n    --tw-text-opacity: 1;\n    color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n.hover\\:s-text-action-500:hover {\n    --tw-text-opacity: 1;\n    color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n.hover\\:s-text-element-800:hover {\n    --tw-text-opacity: 1;\n    color: rgb(51 65 85 / var(--tw-text-opacity))\n}\n.hover\\:s-drop-shadow-md:hover {\n    --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06));\n    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n.active\\:s-scale-95:active {\n    --tw-scale-x: .95;\n    --tw-scale-y: .95;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.active\\:s-border-action-500:active {\n    --tw-border-opacity: 1;\n    border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n.active\\:s-border-action-700:active {\n    --tw-border-opacity: 1;\n    border-color: rgb(29 78 216 / var(--tw-border-opacity))\n}\n.active\\:s-bg-action-100:active {\n    --tw-bg-opacity: 1;\n    background-color: rgb(219 234 254 / var(--tw-bg-opacity))\n}\n.active\\:s-bg-action-600:active {\n    --tw-bg-opacity: 1;\n    background-color: rgb(37 99 235 / var(--tw-bg-opacity))\n}\n.active\\:s-text-action-600:active {\n    --tw-text-opacity: 1;\n    color: rgb(37 99 235 / var(--tw-text-opacity))\n}\n.active\\:s-text-action-700:active {\n    --tw-text-opacity: 1;\n    color: rgb(29 78 216 / var(--tw-text-opacity))\n}\n.active\\:s-drop-shadow-none:active {\n    --tw-drop-shadow: drop-shadow(0 0 #0000);\n    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)\n}\n.s-group:hover .group-hover\\:-s-translate-y-0 {\n    --tw-translate-y: -0px;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.s-group:hover .group-hover\\:-s-translate-y-0\\.5 {\n    --tw-translate-y: -0.125rem;\n    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))\n}\n.s-group:hover .group-hover\\:s-text-action-400 {\n    --tw-text-opacity: 1;\n    color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-border-action-500-dark) {\n    --tw-border-opacity: 1;\n    border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-action-600-dark) {\n    --tw-border-opacity: 1;\n    border-color: rgb(96 165 250 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-element-500-dark) {\n    --tw-border-opacity: 1;\n    border-color: rgb(100 116 139 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-structure-200-dark) {\n    --tw-border-opacity: 1;\n    border-color: rgb(51 65 85 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-border-structure-300-dark) {\n    --tw-border-opacity: 1;\n    border-color: rgb(71 85 105 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:s-bg-action-500-dark) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-bg-structure-0-dark) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(0 0 0 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-bg-structure-50-dark) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(15 23 42 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-text-action-300-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(29 78 216 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-action-400-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(37 99 235 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-action-500-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-500-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(100 116 139 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-600-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(148 163 184 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-700-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(203 213 225 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:s-text-element-900-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(248 250 252 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-border-action-300-dark:hover) {\n    --tw-border-opacity: 1;\n    border-color: rgb(29 78 216 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-border-action-500-dark:hover) {\n    --tw-border-opacity: 1;\n    border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-action-200-dark:hover) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(30 64 175 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-action-50-dark:hover) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(23 37 84 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-bg-action-500-dark:hover) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(59 130 246 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-text-action-400:hover) {\n    --tw-text-opacity: 1;\n    color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-text-action-500-dark:hover) {\n    --tw-text-opacity: 1;\n    color: rgb(59 130 246 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:hover\\:s-text-action-600-dark:hover) {\n    --tw-text-opacity: 1;\n    color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-border-action-500-dark:active) {\n    --tw-border-opacity: 1;\n    border-color: rgb(59 130 246 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-border-action-700-dark:active) {\n    --tw-border-opacity: 1;\n    border-color: rgb(147 197 253 / var(--tw-border-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-bg-action-100-dark:active) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(30 58 138 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-bg-action-600-dark:active) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(96 165 250 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-text-action-600:active) {\n    --tw-text-opacity: 1;\n    color: rgb(37 99 235 / var(--tw-text-opacity))\n}\n:is(.s-dark .dark\\:active\\:s-text-action-600-dark:active) {\n    --tw-text-opacity: 1;\n    color: rgb(96 165 250 / var(--tw-text-opacity))\n}\n:is(.s-dark .s-group:hover .dark\\:group-hover\\:s-text-action-500-dark) {\n    --tw-text-opacity: 1;\n    color: rgb(59 130 246 / var(--tw-text-opacity))\n}";
 styleInject(css_248z);
 
 var aLink = function (_a) {
@@ -75,8 +75,7 @@ var iconSizeClasses = {
 };
 var typeClasses = {
     primary: {
-        // base: "s-text-white s-bg-blue-500 s-border-action-600",
-        base: "s-text-white s-bg-blue-500 s-border-action-600",
+        base: "s-text-white s-bg-action-500 s-border-action-600",
         hover: "hover:s-bg-action-400 hover:s-border-action-500",
         active: "active:s-bg-action-600 active:s-border-action-700",
         dark: {
@@ -120,10 +119,10 @@ function Button(_a) {
 var tabClasses = {
     default: {
         base: "s-text-element-800 s-border-transparent s-cursor-pointer",
-        hover: "s-hover:text-action-500",
+        hover: "hover:s-text-action-500",
         dark: {
             base: "dark:s-text-element-700-dark",
-            hover: "dark:s-hover:text-action-600-dark",
+            hover: "dark:hover:s-text-action-600-dark",
         },
     },
     selected: {
@@ -135,13 +134,13 @@ var tabClasses = {
         },
     },
 };
-var iconClasses$1 = {
+var iconClasses$3 = {
     default: {
         base: "s-text-element-600",
-        hover: "s-group-hover:text-action-400",
+        hover: "group-hover:s-text-action-400",
         dark: {
             base: "dark:s-text-element-600-dark",
-            hover: "dark:s-group-hover:text-action-500-dark",
+            hover: "dark:group-hover:s-text-action-500-dark",
         },
     },
     selected: {
@@ -167,8 +166,8 @@ function Tab(_a) {
                 ? tabClasses.selected
                 : tabClasses.default;
             var iconStateClasses = tab.current
-                ? iconClasses$1.selected
-                : iconClasses$1.default;
+                ? iconClasses$3.selected
+                : iconClasses$3.default;
             var finalTabClasses = classNames("s-group s-justify-center s-flex s-text-sm s-font-semibold s-px-4 s-py-3 s-border-b-2 s-transition-colors s-duration-400 s-whitespace-nowrap s-select-none", tabStateClasses.base, tabStateClasses.hover, tabStateClasses.dark.base, tabStateClasses.dark.hover, tabSizingClasses[(_a = tab.sizing) !== null && _a !== void 0 ? _a : "hug"], className);
             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);
             var Link = tab.href
@@ -177,7 +176,7 @@ function Tab(_a) {
             return (React__default.createElement(Link, { key: tab.label, className: finalTabClasses, "aria-current": tab.current ? "page" : undefined, onClick: function (event) { return onTabClick === null || onTabClick === void 0 ? void 0 : onTabClick(tab.label, event); }, href: tab.href || "#" },
                 React__default.createElement("div", { className: tab.current
                         ? "s-flex s-gap-x-2"
-                        : "s-duration-400 s-group-hover:-translate-y-0.5 s-flex s-translate-y-0 s-transform s-gap-x-2 s-transition-transform s-ease-out" },
+                        : "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" },
                     tab.icon && React__default.createElement(tab.icon, { className: finalIconClasses }), (_b = tab.hideLabel) !== null && _b !== void 0 ? _b : tab.label)));
         });
     };
@@ -213,6 +212,23 @@ var __assign = function() {
     return __assign.apply(this, arguments);
 };
 
+function __read(o, n) {
+    var m = typeof Symbol === "function" && o[Symbol.iterator];
+    if (!m) return o;
+    var i = m.call(o), r, ar = [], e;
+    try {
+        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
+    }
+    catch (error) { e = { error: error }; }
+    finally {
+        try {
+            if (r && !r.done && (m = i["return"])) m.call(i);
+        }
+        finally { if (e) throw e.error; }
+    }
+    return ar;
+}
+
 typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
     var e = new Error(message);
     return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
@@ -323,9 +339,9 @@ var sizeClasses = {
     sm: "s-py-2 s-text-sm s-font-medium",
     md: "s-py-3 s-text-sm s-font-semibold",
 };
-var baseClasses = "s-group s-inline-flex s-transition-colors s-ease-out s-duration-400 s-box-border s-gap-x-2 s-select-none";
+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";
 var iconBaseClasses = "s-h-5 s-w-5 s-transition-colors s-ease-out s-duration-400";
-var iconClasses = {
+var iconClasses$2 = {
     default: {
         base: "s-text-element-700",
         hover: "group-hover:s-text-action-400",
@@ -395,12 +411,12 @@ function Item(_a) {
         ? stateClasses.selected
         : stateClasses.default;
     var currentIconClasses = selected
-        ? iconClasses.selected
-        : iconClasses.default;
+        ? iconClasses$2.selected
+        : iconClasses$2.default;
     var currentChevronClasses = selected
         ? chevronClasses.selected
         : chevronClasses.default;
-    var itemClasses = classNames(baseClasses, sizeClasses[size], disabled ? "s-cursor-default" : currentStateClasses.base, disabled ? "s-cursor-default" : (_b = currentStateClasses.dark) === null || _b === void 0 ? void 0 : _b.base, disabled ? currentStateClasses.disabled : "", !selected && !disabled ? currentStateClasses.hover : "", !selected && !disabled ? (_c = currentStateClasses.dark) === null || _c === void 0 ? void 0 : _c.hover : "", !selected && !disabled ? currentStateClasses.active : "", !selected && !disabled ? (_d = currentStateClasses.dark) === null || _d === void 0 ? void 0 : _d.active : "", className);
+    var itemClasses = classNames(baseClasses$2, sizeClasses[size], disabled ? "s-cursor-default" : currentStateClasses.base, disabled ? "s-cursor-default" : (_b = currentStateClasses.dark) === null || _b === void 0 ? void 0 : _b.base, disabled ? currentStateClasses.disabled : "", !selected && !disabled ? currentStateClasses.hover : "", !selected && !disabled ? (_c = currentStateClasses.dark) === null || _c === void 0 ? void 0 : _c.hover : "", !selected && !disabled ? currentStateClasses.active : "", !selected && !disabled ? (_d = currentStateClasses.dark) === null || _d === void 0 ? void 0 : _d.active : "", className);
     var finalIconClasses = classNames(iconBaseClasses, currentIconClasses.base, !disabled ? currentIconClasses.hover : "", // Add condition here
     currentIconClasses.dark.base, !disabled ? currentIconClasses.dark.hover : "" // Add condition here
     );
@@ -459,6 +475,138 @@ function Checkbox(_a) {
             React__default.createElement("div", { className: combinedCheckedIndicatorClasses }))));
 }
 
+function Tooltip(_a) {
+    var children = _a.children, label = _a.label, _b = _a.position, position = _b === void 0 ? "above" : _b;
+    var _c = __read(useState(false), 2), isHovered = _c[0], setIsHovered = _c[1];
+    var _d = __read(useState(null), 2), timerId = _d[0], setTimerId = _d[1];
+    var handleMouseOver = function () {
+        var id = window.setTimeout(function () {
+            setIsHovered(true);
+        }, 800);
+        setTimerId(id);
+    };
+    var handleMouseLeave = function () {
+        if (timerId !== null) {
+            clearTimeout(timerId);
+        }
+        setIsHovered(false);
+    };
+    useEffect(function () {
+        return function () {
+            if (timerId)
+                window.clearTimeout(timerId);
+        };
+    }, [timerId]);
+    var baseClasses = "s-absolute s-inline-flex s-items-center s-justify-center s-whitespace-nowrap s-z-10 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform s-bg-structure-0 dark:s-bg-structure-0-dark s-text-element-700 dark:s-text-element-700-dark s-left-1/2 s-translate-x-1/2";
+    var hiddenClasses = "s-translate-y-2 s-opacity-0";
+    var visibleClasses = "-s-translate-y-0 s-opacity-100";
+    var tooltipPositionClasses = position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
+    return (React__default.createElement("div", { onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, className: "s-relative s-inline-block" },
+        children,
+        React__default.createElement("div", { className: "".concat(isHovered ? visibleClasses : hiddenClasses, " ").concat(baseClasses, " ").concat(tooltipPositionClasses), onAnimationEnd: function () { return setIsHovered(false); } }, label)));
+}
+
+var baseClasses$1 = "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";
+var iconClasses$1 = {
+    primary: {
+        base: "s-text-action-500",
+        hover: "hover:s-text-action-400",
+        active: "active:s-text-action-600",
+        disabled: "s-text-element-500",
+        dark: {
+            base: "dark:s-text-action-500-dark",
+            hover: "dark:hover:s-text-action-500-dark",
+            active: "dark:active:s-text-action-600-dark",
+            disabled: "dark:s-text-element-500-dark",
+        },
+    },
+    secondary: {
+        base: "s-text-element-900",
+        hover: "hover:s-text-action-400",
+        active: "active:s-text-action-600",
+        disabled: "s-text-element-500",
+        dark: {
+            base: "dark:s-text-element-900-dark",
+            hover: "dark:hover:s-text-action-500-dark",
+            active: "dark:active:s-text-action-600-dark",
+            disabled: "dark:s-text-element-500-dark",
+        },
+    },
+    tertiary: {
+        base: "s-text-element-600",
+        hover: "hover:s-text-action-400",
+        active: "active:s-text-action-600",
+        disabled: "s-text-element-500",
+        dark: {
+            base: "dark:s-text-element-600-dark",
+            hover: "dark:hover:s-text-action-500-dark",
+            active: "dark:active:s-text-action-600-dark",
+            disabled: "dark:s-text-element-500-dark",
+        },
+    },
+};
+function IconButton(_a) {
+    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;
+    // Choose the correct group of classes based on 'type'
+    var iconGroup = iconClasses$1[type];
+    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);
+    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" })));
+    return tooltip ? (React__default.createElement(Tooltip, { label: tooltip }, IconButtonContent)) : (IconButtonContent);
+}
+
+var baseClasses = "s-transition-all s-ease-out s-duration-300 s-cursor-pointer hover:s-scale-110";
+var iconClasses = {
+    secondary: {
+        idle: "s-text-element-900",
+        selected: "s-text-action-500",
+        hover: "hover:s-text-action-400",
+        active: "active:s-text-action-600",
+        disabled: "s-text-element-500",
+        dark: {
+            idle: "dark:s-text-element-900-dark",
+            selected: "dark:s-text-action-500-dark",
+            hover: "dark:hover:s-text-action-500-dark",
+            active: "dark:active:s-text-action-600-dark",
+            disabled: "dark:s-text-element-500-dark",
+        },
+    },
+    tertiary: {
+        idle: "s-text-element-600",
+        selected: "s-text-action-500",
+        hover: "hover:s-text-action-400",
+        active: "active:s-text-action-600",
+        disabled: "s-text-element-500",
+        dark: {
+            idle: "dark:s-text-element-600-dark",
+            selected: "dark:s-text-action-500-dark",
+            hover: "dark:hover:s-text-action-500-dark",
+            active: "dark:active:s-text-action-600-dark",
+            disabled: "dark:s-text-element-500-dark",
+        },
+    },
+};
+function IconToggleButton(_a) {
+    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, isSelected = _e === void 0 ? false : _e;
+    var _f = __read(useState(isSelected), 2), selected = _f[0], setSelected = _f[1];
+    var iconGroup = iconClasses[type];
+    var finalIconClasses = classNames(className, baseClasses, disabled
+        ? iconGroup.disabled
+        : selected
+            ? iconGroup.selected
+            : iconGroup.idle, disabled ? "" : selected ? "" : iconGroup.hover, disabled ? "" : iconGroup.active, iconGroup.dark.idle, disabled
+        ? iconGroup.dark.disabled
+        : selected
+            ? iconGroup.dark.selected
+            : "", disabled ? "" : selected ? "" : iconGroup.dark.hover, disabled ? "" : iconGroup.dark.active);
+    var IconButtonToggleContent = (React__default.createElement("button", { className: finalIconClasses, onClick: function (e) {
+            if (!disabled) {
+                setSelected(!selected); // Toggle selected state
+                onClick === null || onClick === void 0 ? void 0 : onClick(e); // Run passed onClick event
+            }
+        }, disabled: disabled }, icon && React__default.createElement(Icon, { IconComponent: icon, className: "s-h-5 s-w-5" })));
+    return tooltip ? (React__default.createElement(Tooltip, { label: tooltip }, IconButtonToggleContent)) : (IconButtonToggleContent);
+}
+
 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),
     React.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M11.47 1.72a.75.75 0 0 1 1.06 0l3 3a.75.75 0 0 1-1.06 1.06l-1.72-1.72V15a.75.75 0 0 1-1.5 0V4.06L9.53 5.78a.75.75 0 0 1-1.06-1.06l3-3ZM7.5 9A1.5 1.5 0 0 0 6 10.5v9A1.5 1.5 0 0 0 7.5 21h9a1.5 1.5 0 0 0 1.5-1.5v-9A1.5 1.5 0 0 0 16.5 9H15a.75.75 0 0 1 0-1.5h1.5a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3h-9a3 3 0 0 1-3-3v-9a3 3 0 0 1 3-3H9A.75.75 0 0 1 9 9H7.5Z", clipRule: "evenodd" }))); };
 
@@ -659,5 +807,5 @@ var SvgXCircle = function (props) { return (React.createElement("svg", __assign(
 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),
     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" }))); };
 
-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, SvgInformationCircle$2 as InformationCircleIcon, SvgInformationCircle as InformationCircleSolidIcon, SvgInformationCircle$1 as InformationCircleStrokeIcon, Item, SvgKey$2 as KeyIcon, SvgKey as KeySolidIcon, SvgKey$1 as KeyStrokeIcon, SvgLogo as 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, SvgXCircle$2 as XCircleIcon, SvgXCircle as XCircleSolidIcon, SvgXCircle$1 as XCircleStrokeIcon, SvgXMark$2 as XMarkIcon, SvgXMark as XMarkSolidIcon, SvgXMark$1 as XMarkStrokeIcon };
+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, SvgLogo as 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 };
 //# sourceMappingURL=index.js.map