@dust-tt/sparkle 0.1.34 → 0.1.35

package/dist/cjs/_index.d.ts

@@ -2,6 +2,8 @@ import { SparkleContext } from "./context";
 export { SparkleContext };
 import { Button } from "./components/Button";
 export { Button };
+import { SliderToggle } from "./components/SliderToggle";
+export { SliderToggle };
 import { Tab } from "./components/Tab";
 export { Tab };
 import { Item } from "./components/Item";

package/dist/cjs/components/SliderToggle.d.ts

@@ -0,0 +1,9 @@
+import React, { MouseEventHandler } from "react";
+type SliderToggleProps = {
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+    className?: string;
+    disabled?: boolean;
+    selected?: boolean;
+};
+export declare function SliderToggle({ onClick, disabled, className, selected, }: SliderToggleProps): React.JSX.Element;
+export {};

package/dist/cjs/index.js

@@ -48,7 +48,7 @@ function styleInject(css, ref) {
   }
 }
 
-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}";
+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-m-px {\n    margin: 1px\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-11 {\n    width: 2.75rem\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-x-full {\n    --tw-translate-x: 100%;\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-200 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(226 232 240 / var(--tw-bg-opacity))\n}\n.s-bg-structure-300 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(203 213 225 / 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-success-400 {\n    --tw-bg-opacity: 1;\n    background-color: rgb(52 211 153 / 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-bg-white {\n    --tw-bg-opacity: 1;\n    background-color: rgb(255 255 255 / 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-drop-shadow {\n    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px 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.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-success-300:hover {\n    --tw-bg-opacity: 1;\n    background-color: rgb(110 231 183 / 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-200-dark) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(51 65 85 / var(--tw-bg-opacity))\n}\n:is(.s-dark .dark\\:s-bg-structure-300-dark) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(71 85 105 / 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-success-400-dark) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(5 150 105 / 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-400:hover) {\n    --tw-bg-opacity: 1;\n    background-color: rgb(96 165 250 / 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}";
 styleInject(css_248z);
 
 var aLink = function (_a) {
@@ -239,6 +239,29 @@ function Button(_a) {
         React.createElement("button", { type: "button", className: buttonClasses, onClick: onClick, disabled: disabled, "aria-label": label }, icon && React.createElement(Icon, { visual: icon, size: size }))));
 }
 
+var baseClasses$3 = "s-box-border s-h-6 s-w-11 s-rounded-full s-border s-border-structure-300 dark:s-border-structure-300-dark s-transition-colors s-duration-300 s-ease-out s-cursor-pointer";
+var stateClasses$1 = {
+    idle: "s-bg-structure-200 hover:s-bg-action-400",
+    selected: "s-bg-success-400 hover:s-bg-success-300",
+    disabled: "s-bg-structure-300 s-cursor-not-allowed",
+    dark: {
+        idle: "dark:s-bg-structure-200-dark dark:hover:s-bg-action-400",
+        selected: "dark:s-bg-success-400-dark",
+        disabled: "dark:s-bg-structure-300-dark",
+    },
+};
+function SliderToggle(_a) {
+    var onClick = _a.onClick, _b = _a.disabled, disabled = _b === void 0 ? false : _b, _c = _a.className, className = _c === void 0 ? "" : _c, _d = _a.selected, selected = _d === void 0 ? false : _d;
+    var combinedStateClasses = classNames(selected ? stateClasses$1.selected : stateClasses$1.idle, disabled ? stateClasses$1.disabled : "", selected ? stateClasses$1.dark.selected : stateClasses$1.dark.idle, disabled ? stateClasses$1.dark.disabled : "");
+    var SliderToggleContent = (React.createElement("div", { onClick: function (e) {
+            if (!disabled) {
+                onClick === null || onClick === void 0 ? void 0 : onClick(e); // Run passed onClick event
+            }
+        }, className: classNames(className, baseClasses$3, combinedStateClasses) },
+        React.createElement("div", { id: "cursor", className: classNames("s-m-px s-h-5 s-w-5 s-transform s-rounded-full s-bg-white s-drop-shadow s-transition-transform s-duration-300 s-ease-out", selected ? "s-translate-x-full" : "") })));
+    return SliderToggleContent;
+}
+
 var tabClasses = {
     default: {
         base: "s-text-element-800 s-border-transparent s-cursor-pointer",
@@ -1056,6 +1079,7 @@ exports.RobotStrokeIcon = SvgRobot;
 exports.SectionHeader = SectionHeader;
 exports.ServerIcon = SvgServer$1;
 exports.ServerStrokeIcon = SvgServer;
+exports.SliderToggle = SliderToggle;
 exports.SparkleContext = SparkleContext;
 exports.SparklesIcon = SvgSparkles$1;
 exports.SparklesStrokeIcon = SvgSparkles;