@khanhminh/design-system 1.10.8 → 1.12.0

package/dist/components/base/Badge/Badge.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+import { BadgeProps } from './Badge.types';
+export declare const Badge: ({ children, ...props }: PropsWithChildren<BadgeProps>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/base/Badge/Badge.types.d.ts

@@ -0,0 +1,2 @@
+import { Badge as ShadBadge } from '../../ui/badge';
+export type BadgeProps = React.ComponentProps<typeof ShadBadge>;

package/dist/components/base/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps } from './Badge.types';

package/dist/components/base/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonProps } from './Button.types';
+export declare const Button: (props: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/base/Button/Button.types.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+import { Button as ShadButton } from '@/components/ui/button';
+export type ButtonProps = React.ComponentProps<typeof ShadButton>;

package/dist/components/base/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from './Button.types';

package/dist/components/base/Checkbox/Checkbox.d.ts

@@ -0,0 +1,2 @@
+import type { CheckboxProps } from './Checkbox.types';
+export declare const Checkbox: (props: CheckboxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/base/Checkbox/Checkbox.types.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+import { Checkbox as ShadCheckbox } from '@/components/ui/checkbox';
+export type CheckboxProps = React.ComponentProps<typeof ShadCheckbox>;

package/dist/components/base/Checkbox/index.d.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps } from './Checkbox.types';

package/dist/components/base/Input/Input.d.ts

@@ -0,0 +1,2 @@
+import type { InputProps } from './Input.types';
+export declare const Input: (props: InputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/base/Input/Input.types.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+import { Input as ShadInput } from '@/components/ui/input';
+export type InputProps = React.ComponentProps<typeof ShadInput>;

package/dist/components/base/Input/index.d.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps } from './Input.types';

package/dist/components/base/Label/Label.d.ts

@@ -0,0 +1,2 @@
+import type { LabelProps } from './Label.types';
+export declare const Label: (props: LabelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/base/Label/Label.types.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+import { Label as ShadLabel } from '@/components/ui/label';
+export type LabelProps = React.ComponentProps<typeof ShadLabel>;

package/dist/components/base/Label/index.d.ts

@@ -0,0 +1,2 @@
+export { Label } from './Label';
+export type { LabelProps } from './Label.types';

package/dist/components/base/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,3 @@
+import { ScrollAreaProps } from './ScrollArea.type';
+declare const ScrollArea: ({ children, orientation, className, ...props }: ScrollAreaProps) => import("react/jsx-runtime").JSX.Element;
+export default ScrollArea;

package/dist/components/base/ScrollArea/ScrollArea.type.d.ts

@@ -0,0 +1,5 @@
+import { ScrollArea as ShadScrollArea } from '../../ui/scroll-area';
+export type ScrollAreaProps = React.ComponentProps<typeof ShadScrollArea> & {
+    orientation?: 'horizontal' | 'vertical';
+    className?: string;
+};

package/dist/components/base/ScrollArea/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ScrollArea } from './ScrollArea';
+export { type ScrollAreaProps } from './ScrollArea.type';

package/dist/components/base/Separator/Separator.d.ts

@@ -0,0 +1,2 @@
+import type { SeparatorProps } from './Separator.types';
+export declare const Separator: (props: SeparatorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/base/Separator/Separator.types.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+import { Separator as ShadSeparator } from '@/components/ui/separator';
+export type SeparatorProps = React.ComponentProps<typeof ShadSeparator>;

package/dist/components/base/Separator/index.d.ts

@@ -0,0 +1,2 @@
+export { Separator } from './Separator';
+export type { SeparatorProps } from './Separator.types';

package/dist/components/base/Spinner/Spinner.d.ts

@@ -0,0 +1,2 @@
+import type { SpinnerProps } from './Spinner.types';
+export declare const Spinner: (props: SpinnerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/base/Spinner/Spinner.types.d.ts

@@ -0,0 +1,3 @@
+import type * as React from 'react';
+import { Spinner as ShadSpinner } from '@/components/ui/spinner';
+export type SpinnerProps = React.ComponentProps<typeof ShadSpinner>;

package/dist/components/base/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps } from './Spinner.types';

package/dist/components/base/Switch/Switch.d.ts

@@ -0,0 +1,3 @@
+import { SwitchProps } from './Switch.types';
+declare const Switch: ({ id, label, ...props }: SwitchProps) => JSX.Element;
+export default Switch;

package/dist/components/base/Switch/Switch.types.d.ts

@@ -0,0 +1,5 @@
+import { Switch as ShadSwitch } from '../../ui/switch';
+export type SwitchProps = {
+    id: string;
+    label: string;
+} & React.ComponentProps<typeof ShadSwitch>;

package/dist/components/base/Switch/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Switch } from './Switch';
+export type { SwitchProps } from './Switch.types';

package/dist/components/index.d.ts

@@ -1,6 +1,8 @@
-export { Button } from './ui/button';
-export { Input } from './ui/input';
-export { Spinner } from './ui/spinner';
-export { Checkbox } from './ui/checkbox';
-export { Label } from './ui/label';
-export { Separator } from './ui/separator';
+export { Button, type ButtonProps } from './base/Button';
+export { Input, type InputProps } from './base/Input';
+export { Spinner, type SpinnerProps } from './base/Spinner';
+export { Checkbox, type CheckboxProps } from './base/Checkbox';
+export { Label, type LabelProps } from './base/Label';
+export { Separator, type SeparatorProps } from './base/Separator';
+export { Switch, type SwitchProps } from './base/Switch';
+export { ScrollArea, type ScrollAreaProps } from './base/ScrollArea';

package/dist/components/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, asChild, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/components/ui/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
+declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
+export { ScrollArea, ScrollBar };

package/dist/components/ui/switch.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { Switch as SwitchPrimitive } from 'radix-ui';
+declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
+    size?: 'sm' | 'default';
+}): import("react/jsx-runtime").JSX.Element;
+export { Switch };

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var require$$0 = require('react');
+var React = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var radixUi = require('radix-ui');
 var clsx = require('clsx');
@@ -343,7 +343,7 @@ function requireReactJsxRuntime_development () {
 	        object.$$typeof === REACT_ELEMENT_TYPE
 	      );
 	    }
-	    var React = require$$0,
+	    var React$1 = React,
 	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
 	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
 	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -359,7 +359,7 @@ function requireReactJsxRuntime_development () {
 	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
 	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
 	      ReactSharedInternals =
-	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+	        React$1.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
 	      hasOwnProperty = Object.prototype.hasOwnProperty,
 	      isArrayImpl = Array.isArray,
 	      createTask = console.createTask
@@ -367,15 +367,15 @@ function requireReactJsxRuntime_development () {
 	        : function () {
 	            return null;
 	          };
-	    React = {
+	    React$1 = {
 	      react_stack_bottom_frame: function (callStackForError) {
 	        return callStackForError();
 	      }
 	    };
 	    var specialPropKeyWarningShown;
 	    var didWarnAboutElementRef = {};
-	    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
-	      React,
+	    var unknownOwnerDebugStack = React$1.react_stack_bottom_frame.bind(
+	      React$1,
 	      UnknownOwner
 	    )();
 	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
@@ -451,31 +451,74 @@ const buttonVariants = classVarianceAuthority.cva("inline-flex shrink-0 items-ce
         size: 'default',
     },
 });
-function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+function Button$1({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
     const Comp = asChild ? radixUi.Slot.Root : 'button';
     return (jsxRuntimeExports.jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), "data-size": size, "data-slot": "button", "data-variant": variant, ...props }));
 }
 
-function Input({ className, type, ...props }) {
+const Button = (props) => {
+    return jsxRuntimeExports.jsx(Button$1, { ...props });
+};
+
+function Input$1({ className, type, ...props }) {
     return (jsxRuntimeExports.jsx("input", { className: cn('border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40', className), "data-slot": "input", type: type, ...props }));
 }
 
-function Spinner({ className, ...props }) {
+const Input = (props) => {
+    return jsxRuntimeExports.jsx(Input$1, { ...props });
+};
+
+function Spinner$1({ className, ...props }) {
     return jsxRuntimeExports.jsx(lucideReact.Loader2Icon, { "aria-label": "Loading", className: cn('size-4 animate-spin', className), role: "status", ...props });
 }
 
-function Checkbox({ className, ...props }) {
+const Spinner = (props) => {
+    return jsxRuntimeExports.jsx(Spinner$1, { ...props });
+};
+
+function Checkbox$1({ className, ...props }) {
     return (jsxRuntimeExports.jsx(radixUi.Checkbox.Root, { className: cn('peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), "data-slot": "checkbox", ...props, children: jsxRuntimeExports.jsx(radixUi.Checkbox.Indicator, { className: "grid place-content-center text-current transition-none", "data-slot": "checkbox-indicator", children: jsxRuntimeExports.jsx(lucideReact.CheckIcon, { className: "size-3.5" }) }) }));
 }
 
-function Label({ className, ...props }) {
+const Checkbox = (props) => {
+    return jsxRuntimeExports.jsx(Checkbox$1, { ...props });
+};
+
+function Label$1({ className, ...props }) {
     return (jsxRuntimeExports.jsx(radixUi.Label.Root, { className: cn('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', className), "data-slot": "label", ...props }));
 }
 
-function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
+const Label = (props) => {
+    return jsxRuntimeExports.jsx(Label$1, { ...props });
+};
+
+function Separator$1({ className, orientation = 'horizontal', decorative = true, ...props }) {
     return (jsxRuntimeExports.jsx(radixUi.Separator.Root, { className: cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', className), "data-slot": "separator", decorative: decorative, orientation: orientation, ...props }));
 }
 
+const Separator = (props) => {
+    return jsxRuntimeExports.jsx(Separator$1, { ...props });
+};
+
+function Switch$1({ className, size = 'default', ...props }) {
+    return (jsxRuntimeExports.jsx(radixUi.Switch.Root, { className: cn('peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6', className), "data-size": size, "data-slot": "switch", ...props, children: jsxRuntimeExports.jsx(radixUi.Switch.Thumb, { className: cn('bg-background dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'), "data-slot": "switch-thumb" }) }));
+}
+
+const Switch = ({ id, label, ...props }) => {
+    return (jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntimeExports.jsx(Switch$1, { "data-slot": "switch", id: id, ...props }), jsxRuntimeExports.jsx(Label, { "data-slot": "label", htmlFor: id, children: label })] }));
+};
+
+function ScrollArea$1({ className, children, ...props }) {
+    return (jsxRuntimeExports.jsxs(radixUi.ScrollArea.Root, { className: cn('relative', className), "data-slot": "scroll-area", ...props, children: [jsxRuntimeExports.jsx(radixUi.ScrollArea.Viewport, { className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1", "data-slot": "scroll-area-viewport", children: children }), jsxRuntimeExports.jsx(ScrollBar, {}), jsxRuntimeExports.jsx(radixUi.ScrollArea.Corner, {})] }));
+}
+function ScrollBar({ className, orientation = 'vertical', ...props }) {
+    return (jsxRuntimeExports.jsx(radixUi.ScrollArea.ScrollAreaScrollbar, { className: cn('flex touch-none p-px transition-colors select-none', orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent', orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent', className), "data-slot": "scroll-area-scrollbar", orientation: orientation, ...props, children: jsxRuntimeExports.jsx(radixUi.ScrollArea.ScrollAreaThumb, { className: "bg-border relative flex-1 rounded-full", "data-slot": "scroll-area-thumb" }) }));
+}
+
+const ScrollArea = ({ children, orientation = 'horizontal', className, ...props }) => {
+    return (jsxRuntimeExports.jsxs(ScrollArea$1, { className: className, "data-slot": "scroll-area", ...props, children: [jsxRuntimeExports.jsx("div", { "data-slot": "scroll-area-viewport", children: children }), jsxRuntimeExports.jsx("div", { "data-slot": "scroll-area-scrollbar", children: jsxRuntimeExports.jsx(ScrollBar, { orientation: orientation }) })] }));
+};
+
 /**
  * A simple boolean toggle hook.
  *
@@ -483,18 +526,95 @@ function Separator({ className, orientation = 'horizontal', decorative = true, .
  * @returns an object with the current state and helpers to toggle / set on / set off
  */
 function useToggle(initial = false) {
-    const [state, setState] = require$$0.useState(initial);
-    const toggle = require$$0.useCallback(() => setState((s) => !s), []);
-    const setOn = require$$0.useCallback(() => setState(true), []);
-    const setOff = require$$0.useCallback(() => setState(false), []);
+    const [state, setState] = React.useState(initial);
+    const toggle = React.useCallback(() => setState((s) => !s), []);
+    const setOn = React.useCallback(() => setState(true), []);
+    const setOff = React.useCallback(() => setState(false), []);
     return { state, toggle, setOn, setOff };
 }
 
+const applyTheme = (theme) => {
+    const root = window.document.documentElement;
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const resolvedTheme = theme === 'system' ? (systemDark ? 'dark' : 'light') : theme;
+    root.classList.remove('light', 'dark');
+    root.classList.add(resolvedTheme);
+};
+
+const createStoreImpl = (createState) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (!Object.is(nextState, state)) {
+      const previousState = state;
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const getInitialState = () => initialState;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const api = { setState, getState, getInitialState, subscribe };
+  const initialState = state = createState(setState, getState, api);
+  return api;
+};
+const createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
+
+const identity = (arg) => arg;
+function useStore(api, selector = identity) {
+  const slice = React.useSyncExternalStore(
+    api.subscribe,
+    React.useCallback(() => selector(api.getState()), [api, selector]),
+    React.useCallback(() => selector(api.getInitialState()), [api, selector])
+  );
+  React.useDebugValue(slice);
+  return slice;
+}
+const createImpl = (createState) => {
+  const api = createStore(createState);
+  const useBoundStore = (selector) => useStore(api, selector);
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+const create = ((createState) => createState ? createImpl(createState) : createImpl);
+
+const useThemeStore = create((set) => ({
+    theme: 'system',
+    setTheme: (theme) => {
+        localStorage.setItem('theme', theme);
+        set({ theme });
+    },
+}));
+
+function ThemeProvider({ children }) {
+    const { theme, setTheme } = useThemeStore();
+    // Load from localStorage on mount
+    React.useEffect(() => {
+        const saved = localStorage.getItem('theme');
+        if (saved)
+            setTheme(saved);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Apply theme whenever it changes
+    React.useEffect(() => {
+        applyTheme(theme);
+    }, [theme]);
+    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children });
+}
+
 exports.Button = Button;
 exports.Checkbox = Checkbox;
 exports.Input = Input;
 exports.Label = Label;
+exports.ScrollArea = ScrollArea;
 exports.Separator = Separator;
 exports.Spinner = Spinner;
+exports.Switch = Switch;
+exports.ThemeProvider = ThemeProvider;
+exports.applyTheme = applyTheme;
 exports.cn = cn;
 exports.useToggle = useToggle;

package/dist/index.css

@@ -1 +1 @@
-/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-gray-200:oklch(92.8% 0.006 264.531);--color-white:#fff;--spacing:0.25rem;--text-xs:0.75rem;--text-xs--line-height:1.33333;--text-sm:0.875rem;--text-sm--line-height:1.42857;--text-base:1rem;--text-base--line-height:1.5;--font-weight-medium:500;--animate-spin:spin 1s linear infinite;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var(--default-mono-font-feature-settings,normal);font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.relative{position:relative}.contents{display:contents}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.size-3\.5{height:calc(var(--spacing)*3.5);width:calc(var(--spacing)*3.5)}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-6{height:calc(var(--spacing)*6);width:calc(var(--spacing)*6)}.size-8{height:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.size-9{height:calc(var(--spacing)*9);width:calc(var(--spacing)*9)}.size-10{height:calc(var(--spacing)*10);width:calc(var(--spacing)*10)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.shrink-0{flex-shrink:0}.animate-spin{animation:var(--animate-spin)}.place-content-center{place-content:center}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.rounded-\[4px\]{border-radius:4px}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-input{border-color:var(--input)}.bg-background{background-color:var(--background)}.bg-border{background-color:var(--border)}.bg-destructive{background-color:var(--destructive)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-transparent{background-color:transparent}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-current{color:currentcolor}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-white{color:var(--color-white)}.underline-offset-4{text-underline-offset:4px}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,rgba(0,0,0,.05));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-\[color\,box-shadow\]{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-shadow{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-none{transition-property:none}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.group-data-\[disabled\=true\]\:pointer-events-none{&:is(:where(.group)[data-disabled=true] *){pointer-events:none}}.group-data-\[disabled\=true\]\:opacity-50{&:is(:where(.group)[data-disabled=true] *){opacity:50%}}.peer-disabled\:cursor-not-allowed{&:is(:where(.peer):disabled~*){cursor:not-allowed}}.peer-disabled\:opacity-50{&:is(:where(.peer):disabled~*){opacity:50%}}.selection\:bg-primary{& ::-moz-selection{background-color:var(--primary)}& ::selection{background-color:var(--primary)}&::-moz-selection{background-color:var(--primary)}&::selection{background-color:var(--primary)}}.selection\:text-primary-foreground{& ::-moz-selection{color:var(--primary-foreground)}& ::selection{color:var(--primary-foreground)}&::-moz-selection{color:var(--primary-foreground)}&::selection{color:var(--primary-foreground)}}.file\:inline-flex{&::file-selector-button{display:inline-flex}}.file\:h-7{&::file-selector-button{height:calc(var(--spacing)*7)}}.file\:border-0{&::file-selector-button{border-style:var(--tw-border-style);border-width:0}}.file\:bg-transparent{&::file-selector-button{background-color:transparent}}.file\:text-sm{&::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}.file\:font-medium{&::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}}.file\:text-foreground{&::file-selector-button{color:var(--foreground)}}.placeholder\:text-muted-foreground{&::-moz-placeholder{color:var(--muted-foreground)}&::placeholder{color:var(--muted-foreground)}}.hover\:bg-accent{&:hover{@media (hover:hover){background-color:var(--accent)}}}.hover\:bg-destructive\/90{&:hover{@media (hover:hover){background-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}}}.hover\:bg-primary\/90{&:hover{@media (hover:hover){background-color:var(--primary);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}}}.hover\:bg-secondary\/80{&:hover{@media (hover:hover){background-color:var(--secondary);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}}}}.hover\:text-accent-foreground{&:hover{@media (hover:hover){color:var(--accent-foreground)}}}.hover\:underline{&:hover{@media (hover:hover){text-decoration-line:underline}}}.focus-visible\:border-ring{&:focus-visible{border-color:var(--ring)}}.focus-visible\:ring-\[3px\]{&:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus-visible\:ring-destructive\/20{&:focus-visible{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}}.focus-visible\:ring-ring\/50{&:focus-visible{--tw-ring-color:var(--ring);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--ring) 50%,transparent)}}}.disabled\:pointer-events-none{&:disabled{pointer-events:none}}.disabled\:cursor-not-allowed{&:disabled{cursor:not-allowed}}.disabled\:opacity-50{&:disabled{opacity:50%}}.has-\[\>svg\]\:px-1\.5{&:has(>svg){padding-inline:calc(var(--spacing)*1.5)}}.has-\[\>svg\]\:px-2\.5{&:has(>svg){padding-inline:calc(var(--spacing)*2.5)}}.has-\[\>svg\]\:px-3{&:has(>svg){padding-inline:calc(var(--spacing)*3)}}.has-\[\>svg\]\:px-4{&:has(>svg){padding-inline:calc(var(--spacing)*4)}}.aria-invalid\:border-destructive{&[aria-invalid=true]{border-color:var(--destructive)}}.aria-invalid\:ring-destructive\/20{&[aria-invalid=true]{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}}.data-\[orientation\=horizontal\]\:h-px{&[data-orientation=horizontal]{height:1px}}.data-\[orientation\=horizontal\]\:w-full{&[data-orientation=horizontal]{width:100%}}.data-\[orientation\=vertical\]\:h-full{&[data-orientation=vertical]{height:100%}}.data-\[orientation\=vertical\]\:w-px{&[data-orientation=vertical]{width:1px}}.data-\[state\=checked\]\:border-primary{&[data-state=checked]{border-color:var(--primary)}}.data-\[state\=checked\]\:bg-primary{&[data-state=checked]{background-color:var(--primary)}}.data-\[state\=checked\]\:text-primary-foreground{&[data-state=checked]{color:var(--primary-foreground)}}.dark\:border-input,.md\:text-sm{&:is(.dark *){border-color:var(--input)}}.dark\:bg-destructive\/60{&:is(.dark *){background-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--destructive) 60%,transparent)}}}.dark\:bg-input\/30{&:is(.dark *){background-color:var(--input);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--input) 30%,transparent)}}}.dark\:hover\:bg-accent\/50{&:is(.dark *){&:hover{@media (hover:hover){background-color:var(--accent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--accent) 50%,transparent)}}}}}.dark\:hover\:bg-input\/50{&:is(.dark *){&:hover{@media (hover:hover){background-color:var(--input);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--input) 50%,transparent)}}}}}.dark\:focus-visible\:ring-destructive\/40{&:is(.dark *){&:focus-visible{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}}}.dark\:aria-invalid\:ring-destructive\/40{&:is(.dark *){&[aria-invalid=true]{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}}}.dark\:data-\[state\=checked\]\:bg-primary{&:is(.dark *){&[data-state=checked]{background-color:var(--primary)}}}.\[\&_svg\]\:pointer-events-none{& svg{pointer-events:none}}.\[\&_svg\]\:shrink-0{& svg{flex-shrink:0}}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3{& svg:not([class*=size-]){height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4{& svg:not([class*=size-]){height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@layer base{*,::backdrop,::file-selector-button,:after,:before{border-color:var(--color-gray-200,currentcolor)}*{border-color:var(--border);outline-color:var(--ring);@supports (color:color-mix(in lab,red,red)){outline-color:color-mix(in oklab,var(--ring) 50%,transparent)}}body{background-color:var(--background);color:var(--foreground)}}:root{--radius:0.625rem;--background:oklch(1 0 0);--foreground:oklch(0.145 0 0);--card:oklch(1 0 0);--card-foreground:oklch(0.145 0 0);--popover:oklch(1 0 0);--popover-foreground:oklch(0.145 0 0);--primary:oklch(0.205 0 0);--primary-foreground:oklch(0.985 0 0);--secondary:oklch(0.97 0 0);--secondary-foreground:oklch(0.205 0 0);--muted:oklch(0.97 0 0);--muted-foreground:oklch(0.556 0 0);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:oklch(0.577 0.245 27.325);--border:oklch(0.922 0 0);--input:oklch(0.922 0 0);--ring:oklch(0.708 0 0);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:oklch(0.145 0 0);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:oklch(0.922 0 0);--sidebar-ring:oklch(0.708 0 0)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.205 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.205 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.922 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.704 0.191 22.216);--border:oklch(1 0 0/10%);--input:oklch(1 0 0/15%);--ring:oklch(0.556 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(1 0 0/10%);--sidebar-ring:oklch(0.556 0 0)}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@keyframes spin{to{transform:rotate(1turn)}}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}
+/*! tailwindcss v4.1.7 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-gray-200:oklch(92.8% 0.006 264.531);--color-white:#fff;--spacing:0.25rem;--text-xs:0.75rem;--text-xs--line-height:1.33333;--text-sm:0.875rem;--text-sm--line-height:1.42857;--text-base:1rem;--text-base--line-height:1.5;--font-weight-medium:500;--animate-spin:spin 1s linear infinite;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var(--default-mono-font-feature-settings,normal);font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-none{pointer-events:none}.relative{position:relative}.container{width:100%;@media (width >= 40rem){max-width:40rem}@media (width >= 48rem){max-width:48rem}@media (width >= 64rem){max-width:64rem}@media (width >= 80rem){max-width:80rem}@media (width >= 96rem){max-width:96rem}}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.inline-flex{display:inline-flex}.size-3\.5{height:calc(var(--spacing)*3.5);width:calc(var(--spacing)*3.5)}.size-4{height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}.size-6{height:calc(var(--spacing)*6);width:calc(var(--spacing)*6)}.size-8{height:calc(var(--spacing)*8);width:calc(var(--spacing)*8)}.size-9{height:calc(var(--spacing)*9);width:calc(var(--spacing)*9)}.size-10{height:calc(var(--spacing)*10);width:calc(var(--spacing)*10)}.size-full{height:100%;width:100%}.h-2\.5{height:calc(var(--spacing)*2.5)}.h-6{height:calc(var(--spacing)*6)}.h-8{height:calc(var(--spacing)*8)}.h-9{height:calc(var(--spacing)*9)}.h-10{height:calc(var(--spacing)*10)}.h-full{height:100%}.w-2\.5{width:calc(var(--spacing)*2.5)}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-0{min-width:calc(var(--spacing)*0)}.flex-1{flex:1}.shrink-0{flex-shrink:0}.animate-spin{animation:var(--animate-spin)}.touch-none{touch-action:none}.flex-col{flex-direction:column}.place-content-center{place-content:center}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing)*1)}.gap-1\.5{gap:calc(var(--spacing)*1.5)}.gap-2{gap:calc(var(--spacing)*2)}.space-x-2{:where(&>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-end:calc(var(--spacing)*2*(1 - var(--tw-space-x-reverse)));margin-inline-start:calc(var(--spacing)*2*var(--tw-space-x-reverse))}}.overflow-hidden{overflow:hidden}.rounded-\[4px\]{border-radius:4px}.rounded-\[inherit\]{border-radius:inherit}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-md{border-radius:calc(var(--radius) - 2px)}.border{border-style:var(--tw-border-style);border-width:1px}.border-t{border-top-style:var(--tw-border-style);border-top-width:1px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-border{border-color:var(--border)}.border-input{border-color:var(--input)}.border-transparent{border-color:transparent}.border-t-transparent{border-top-color:transparent}.border-l-transparent{border-left-color:transparent}.bg-background{background-color:var(--background)}.bg-border{background-color:var(--border)}.bg-destructive{background-color:var(--destructive)}.bg-primary{background-color:var(--primary)}.bg-secondary{background-color:var(--secondary)}.bg-transparent{background-color:transparent}.p-px{padding:1px}.px-2{padding-inline:calc(var(--spacing)*2)}.px-3{padding-inline:calc(var(--spacing)*3)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-0\.5{padding-block:calc(var(--spacing)*.5)}.py-1{padding-block:calc(var(--spacing)*1)}.py-2{padding-block:calc(var(--spacing)*2)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-none{--tw-leading:1;line-height:1}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.whitespace-nowrap{white-space:nowrap}.text-current{color:currentcolor}.text-foreground{color:var(--foreground)}.text-primary{color:var(--primary)}.text-primary-foreground{color:var(--primary-foreground)}.text-secondary-foreground{color:var(--secondary-foreground)}.text-white{color:var(--color-white)}.underline-offset-4{text-underline-offset:4px}.shadow-xs{--tw-shadow:0 1px 2px 0 var(--tw-shadow-color,rgba(0,0,0,.05))}.ring-0,.shadow-xs{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-0{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-\[color\,box-shadow\]{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-colors{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-shadow{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-transform{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-none{transition-property:none}.outline-none{--tw-outline-style:none;outline-style:none}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.group-data-\[disabled\=true\]\:pointer-events-none{&:is(:where(.group)[data-disabled=true] *){pointer-events:none}}.group-data-\[disabled\=true\]\:opacity-50{&:is(:where(.group)[data-disabled=true] *){opacity:50%}}.group-data-\[size\=default\]\/switch\:size-4{&:is(:where(.group\/switch)[data-size=default] *){height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}}.group-data-\[size\=sm\]\/switch\:size-3{&:is(:where(.group\/switch)[data-size=sm] *){height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}}.peer-disabled\:cursor-not-allowed{&:is(:where(.peer):disabled~*){cursor:not-allowed}}.peer-disabled\:opacity-50{&:is(:where(.peer):disabled~*){opacity:50%}}.selection\:bg-primary{& ::-moz-selection{background-color:var(--primary)}& ::selection{background-color:var(--primary)}&::-moz-selection{background-color:var(--primary)}&::selection{background-color:var(--primary)}}.selection\:text-primary-foreground{& ::-moz-selection{color:var(--primary-foreground)}& ::selection{color:var(--primary-foreground)}&::-moz-selection{color:var(--primary-foreground)}&::selection{color:var(--primary-foreground)}}.file\:inline-flex{&::file-selector-button{display:inline-flex}}.file\:h-7{&::file-selector-button{height:calc(var(--spacing)*7)}}.file\:border-0{&::file-selector-button{border-style:var(--tw-border-style);border-width:0}}.file\:bg-transparent{&::file-selector-button{background-color:transparent}}.file\:text-sm{&::file-selector-button{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}}.file\:font-medium{&::file-selector-button{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}}.file\:text-foreground{&::file-selector-button{color:var(--foreground)}}.placeholder\:text-muted-foreground{&::-moz-placeholder{color:var(--muted-foreground)}&::placeholder{color:var(--muted-foreground)}}.hover\:bg-accent{&:hover{@media (hover:hover){background-color:var(--accent)}}}.hover\:bg-destructive\/90{&:hover{@media (hover:hover){background-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}}}.hover\:bg-primary\/90{&:hover{@media (hover:hover){background-color:var(--primary);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}}}.hover\:bg-secondary\/80{&:hover{@media (hover:hover){background-color:var(--secondary);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--secondary) 80%,transparent)}}}}.hover\:text-accent-foreground{&:hover{@media (hover:hover){color:var(--accent-foreground)}}}.hover\:underline{&:hover{@media (hover:hover){text-decoration-line:underline}}}.focus-visible\:border-ring{&:focus-visible{border-color:var(--ring)}}.focus-visible\:ring-\[3px\]{&:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}}.focus-visible\:ring-destructive\/20{&:focus-visible{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}}.focus-visible\:ring-ring\/50{&:focus-visible{--tw-ring-color:var(--ring);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--ring) 50%,transparent)}}}.focus-visible\:outline-1{&:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}}.disabled\:pointer-events-none{&:disabled{pointer-events:none}}.disabled\:cursor-not-allowed{&:disabled{cursor:not-allowed}}.disabled\:opacity-50{&:disabled{opacity:50%}}.has-\[\>svg\]\:px-1\.5{&:has(>svg){padding-inline:calc(var(--spacing)*1.5)}}.has-\[\>svg\]\:px-2\.5{&:has(>svg){padding-inline:calc(var(--spacing)*2.5)}}.has-\[\>svg\]\:px-3{&:has(>svg){padding-inline:calc(var(--spacing)*3)}}.has-\[\>svg\]\:px-4{&:has(>svg){padding-inline:calc(var(--spacing)*4)}}.aria-invalid\:border-destructive{&[aria-invalid=true]{border-color:var(--destructive)}}.aria-invalid\:ring-destructive\/20{&[aria-invalid=true]{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 20%,transparent)}}}.data-\[orientation\=horizontal\]\:h-px{&[data-orientation=horizontal]{height:1px}}.data-\[orientation\=horizontal\]\:w-full{&[data-orientation=horizontal]{width:100%}}.data-\[orientation\=vertical\]\:h-full{&[data-orientation=vertical]{height:100%}}.data-\[orientation\=vertical\]\:w-px{&[data-orientation=vertical]{width:1px}}.data-\[size\=default\]\:h-\[1\.15rem\]{&[data-size=default]{height:1.15rem}}.data-\[size\=default\]\:w-8{&[data-size=default]{width:calc(var(--spacing)*8)}}.data-\[size\=sm\]\:h-3\.5{&[data-size=sm]{height:calc(var(--spacing)*3.5)}}.data-\[size\=sm\]\:w-6{&[data-size=sm]{width:calc(var(--spacing)*6)}}.data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\]{&[data-state=checked]{--tw-translate-x:calc(100% - 2px);translate:var(--tw-translate-x) var(--tw-translate-y)}}.data-\[state\=checked\]\:border-primary{&[data-state=checked]{border-color:var(--primary)}}.data-\[state\=checked\]\:bg-primary{&[data-state=checked]{background-color:var(--primary)}}.data-\[state\=checked\]\:text-primary-foreground{&[data-state=checked]{color:var(--primary-foreground)}}.data-\[state\=unchecked\]\:translate-x-0{&[data-state=unchecked]{--tw-translate-x:calc(var(--spacing)*0);translate:var(--tw-translate-x) var(--tw-translate-y)}}.data-\[state\=unchecked\]\:bg-input{&[data-state=unchecked]{background-color:var(--input)}}.dark\:border-input,.md\:text-sm{&:is(.dark *){border-color:var(--input)}}.dark\:bg-destructive\/60{&:is(.dark *){background-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--destructive) 60%,transparent)}}}.dark\:bg-input\/30{&:is(.dark *){background-color:var(--input);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--input) 30%,transparent)}}}.dark\:hover\:bg-accent\/50{&:is(.dark *){&:hover{@media (hover:hover){background-color:var(--accent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--accent) 50%,transparent)}}}}}.dark\:hover\:bg-input\/50{&:is(.dark *){&:hover{@media (hover:hover){background-color:var(--input);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--input) 50%,transparent)}}}}}.dark\:focus-visible\:ring-destructive\/40{&:is(.dark *){&:focus-visible{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}}}.dark\:aria-invalid\:ring-destructive\/40{&:is(.dark *){&[aria-invalid=true]{--tw-ring-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){--tw-ring-color:color-mix(in oklab,var(--destructive) 40%,transparent)}}}}.dark\:data-\[state\=checked\]\:bg-primary{&:is(.dark *){&[data-state=checked]{background-color:var(--primary)}}}.dark\:data-\[state\=checked\]\:bg-primary-foreground{&:is(.dark *){&[data-state=checked]{background-color:var(--primary-foreground)}}}.dark\:data-\[state\=unchecked\]\:bg-foreground{&:is(.dark *){&[data-state=unchecked]{background-color:var(--foreground)}}}.dark\:data-\[state\=unchecked\]\:bg-input\/80{&:is(.dark *){&[data-state=unchecked]{background-color:var(--input);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--input) 80%,transparent)}}}}.\[\&_svg\]\:pointer-events-none{& svg{pointer-events:none}}.\[\&_svg\]\:shrink-0{& svg{flex-shrink:0}}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-3{& svg:not([class*=size-]){height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}}.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4{& svg:not([class*=size-]){height:calc(var(--spacing)*4);width:calc(var(--spacing)*4)}}.\[\&\>svg\]\:pointer-events-none{&>svg{pointer-events:none}}.\[\&\>svg\]\:size-3{&>svg{height:calc(var(--spacing)*3);width:calc(var(--spacing)*3)}}.\[a\&\]\:hover\:bg-accent{a&{&:hover{@media (hover:hover){background-color:var(--accent)}}}}.\[a\&\]\:hover\:bg-destructive\/90{a&{&:hover{@media (hover:hover){background-color:var(--destructive);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--destructive) 90%,transparent)}}}}}.\[a\&\]\:hover\:bg-primary\/90{a&{&:hover{@media (hover:hover){background-color:var(--primary);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--primary) 90%,transparent)}}}}}.\[a\&\]\:hover\:bg-secondary\/90{a&{&:hover{@media (hover:hover){background-color:var(--secondary);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--secondary) 90%,transparent)}}}}}.\[a\&\]\:hover\:text-accent-foreground{a&{&:hover{@media (hover:hover){color:var(--accent-foreground)}}}}.\[a\&\]\:hover\:underline{a&{&:hover{@media (hover:hover){text-decoration-line:underline}}}}}@property --tw-animation-delay{syntax:"*";inherits:false;initial-value:0s}@property --tw-animation-direction{syntax:"*";inherits:false;initial-value:normal}@property --tw-animation-duration{syntax:"*";inherits:false}@property --tw-animation-fill-mode{syntax:"*";inherits:false;initial-value:none}@property --tw-animation-iteration-count{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-enter-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-enter-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-blur{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-opacity{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-rotate{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-scale{syntax:"*";inherits:false;initial-value:1}@property --tw-exit-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-exit-translate-y{syntax:"*";inherits:false;initial-value:0}@layer base{*,::backdrop,::file-selector-button,:after,:before{border-color:var(--color-gray-200,currentcolor)}*{border-color:var(--border);outline-color:var(--ring);@supports (color:color-mix(in lab,red,red)){outline-color:color-mix(in oklab,var(--ring) 50%,transparent)}}body{background-color:var(--background);color:var(--foreground)}}:root{--radius:0.625rem;--background:oklch(1 0 0);--foreground:oklch(0.145 0 0);--card:oklch(1 0 0);--card-foreground:oklch(0.145 0 0);--popover:oklch(1 0 0);--popover-foreground:oklch(0.145 0 0);--primary:oklch(0.205 0 0);--primary-foreground:oklch(0.985 0 0);--secondary:oklch(0.97 0 0);--secondary-foreground:oklch(0.205 0 0);--muted:oklch(0.97 0 0);--muted-foreground:oklch(0.556 0 0);--accent:oklch(0.97 0 0);--accent-foreground:oklch(0.205 0 0);--destructive:oklch(0.577 0.245 27.325);--border:oklch(0.922 0 0);--input:oklch(0.922 0 0);--ring:oklch(0.708 0 0);--chart-1:oklch(0.646 0.222 41.116);--chart-2:oklch(0.6 0.118 184.704);--chart-3:oklch(0.398 0.07 227.392);--chart-4:oklch(0.828 0.189 84.429);--chart-5:oklch(0.769 0.188 70.08);--sidebar:oklch(0.985 0 0);--sidebar-foreground:oklch(0.145 0 0);--sidebar-primary:oklch(0.205 0 0);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.97 0 0);--sidebar-accent-foreground:oklch(0.205 0 0);--sidebar-border:oklch(0.922 0 0);--sidebar-ring:oklch(0.708 0 0)}.dark{--background:oklch(0.145 0 0);--foreground:oklch(0.985 0 0);--card:oklch(0.205 0 0);--card-foreground:oklch(0.985 0 0);--popover:oklch(0.205 0 0);--popover-foreground:oklch(0.985 0 0);--primary:oklch(0.922 0 0);--primary-foreground:oklch(0.205 0 0);--secondary:oklch(0.269 0 0);--secondary-foreground:oklch(0.985 0 0);--muted:oklch(0.269 0 0);--muted-foreground:oklch(0.708 0 0);--accent:oklch(0.269 0 0);--accent-foreground:oklch(0.985 0 0);--destructive:oklch(0.704 0.191 22.216);--border:oklch(1 0 0/10%);--input:oklch(1 0 0/15%);--ring:oklch(0.556 0 0);--chart-1:oklch(0.488 0.243 264.376);--chart-2:oklch(0.696 0.17 162.48);--chart-3:oklch(0.769 0.188 70.08);--chart-4:oklch(0.627 0.265 303.9);--chart-5:oklch(0.645 0.246 16.439);--sidebar:oklch(0.205 0 0);--sidebar-foreground:oklch(0.985 0 0);--sidebar-primary:oklch(0.488 0.243 264.376);--sidebar-primary-foreground:oklch(0.985 0 0);--sidebar-accent:oklch(0.269 0 0);--sidebar-accent-foreground:oklch(0.985 0 0);--sidebar-border:oklch(1 0 0/10%);--sidebar-ring:oklch(0.556 0 0)}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@keyframes spin{to{transform:rotate(1turn)}}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-space-x-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-animation-delay:0s;--tw-animation-direction:normal;--tw-animation-duration:initial;--tw-animation-fill-mode:none;--tw-animation-iteration-count:1;--tw-enter-blur:0;--tw-enter-opacity:1;--tw-enter-rotate:0;--tw-enter-scale:1;--tw-enter-translate-x:0;--tw-enter-translate-y:0;--tw-exit-blur:0;--tw-exit-opacity:1;--tw-exit-rotate:0;--tw-exit-scale:1;--tw-exit-translate-x:0;--tw-exit-translate-y:0}}}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export * from './components';
 export * from './hooks';
 export * from './lib';
+export * from './providers';
+export * from './types';
 import './index.css';

package/dist/index.js

@@ -1,6 +1,6 @@
-import require$$0, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
 import { cva } from 'class-variance-authority';
-import { Slot, Checkbox as Checkbox$1, Label as Label$1, Separator as Separator$1 } from 'radix-ui';
+import { Slot, Checkbox as Checkbox$2, Label as Label$2, Separator as Separator$2, Switch as Switch$2, ScrollArea as ScrollArea$2 } from 'radix-ui';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Loader2Icon, CheckIcon } from 'lucide-react';
@@ -341,7 +341,7 @@ function requireReactJsxRuntime_development () {
 	        object.$$typeof === REACT_ELEMENT_TYPE
 	      );
 	    }
-	    var React = require$$0,
+	    var React$1 = React,
 	      REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"),
 	      REACT_PORTAL_TYPE = Symbol.for("react.portal"),
 	      REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"),
@@ -357,7 +357,7 @@ function requireReactJsxRuntime_development () {
 	      REACT_ACTIVITY_TYPE = Symbol.for("react.activity"),
 	      REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"),
 	      ReactSharedInternals =
-	        React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
+	        React$1.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,
 	      hasOwnProperty = Object.prototype.hasOwnProperty,
 	      isArrayImpl = Array.isArray,
 	      createTask = console.createTask
@@ -365,15 +365,15 @@ function requireReactJsxRuntime_development () {
 	        : function () {
 	            return null;
 	          };
-	    React = {
+	    React$1 = {
 	      react_stack_bottom_frame: function (callStackForError) {
 	        return callStackForError();
 	      }
 	    };
 	    var specialPropKeyWarningShown;
 	    var didWarnAboutElementRef = {};
-	    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
-	      React,
+	    var unknownOwnerDebugStack = React$1.react_stack_bottom_frame.bind(
+	      React$1,
 	      UnknownOwner
 	    )();
 	    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
@@ -449,31 +449,74 @@ const buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap
         size: 'default',
     },
 });
-function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+function Button$1({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
     const Comp = asChild ? Slot.Root : 'button';
     return (jsxRuntimeExports.jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), "data-size": size, "data-slot": "button", "data-variant": variant, ...props }));
 }
 
-function Input({ className, type, ...props }) {
+const Button = (props) => {
+    return jsxRuntimeExports.jsx(Button$1, { ...props });
+};
+
+function Input$1({ className, type, ...props }) {
     return (jsxRuntimeExports.jsx("input", { className: cn('border-input selection:bg-primary selection:text-primary-foreground file:text-foreground placeholder:text-muted-foreground dark:bg-input/30 h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', 'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]', 'aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40', className), "data-slot": "input", type: type, ...props }));
 }
 
-function Spinner({ className, ...props }) {
+const Input = (props) => {
+    return jsxRuntimeExports.jsx(Input$1, { ...props });
+};
+
+function Spinner$1({ className, ...props }) {
     return jsxRuntimeExports.jsx(Loader2Icon, { "aria-label": "Loading", className: cn('size-4 animate-spin', className), role: "status", ...props });
 }
 
-function Checkbox({ className, ...props }) {
-    return (jsxRuntimeExports.jsx(Checkbox$1.Root, { className: cn('peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), "data-slot": "checkbox", ...props, children: jsxRuntimeExports.jsx(Checkbox$1.Indicator, { className: "grid place-content-center text-current transition-none", "data-slot": "checkbox-indicator", children: jsxRuntimeExports.jsx(CheckIcon, { className: "size-3.5" }) }) }));
+const Spinner = (props) => {
+    return jsxRuntimeExports.jsx(Spinner$1, { ...props });
+};
+
+function Checkbox$1({ className, ...props }) {
+    return (jsxRuntimeExports.jsx(Checkbox$2.Root, { className: cn('peer border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50', className), "data-slot": "checkbox", ...props, children: jsxRuntimeExports.jsx(Checkbox$2.Indicator, { className: "grid place-content-center text-current transition-none", "data-slot": "checkbox-indicator", children: jsxRuntimeExports.jsx(CheckIcon, { className: "size-3.5" }) }) }));
 }
 
-function Label({ className, ...props }) {
-    return (jsxRuntimeExports.jsx(Label$1.Root, { className: cn('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', className), "data-slot": "label", ...props }));
+const Checkbox = (props) => {
+    return jsxRuntimeExports.jsx(Checkbox$1, { ...props });
+};
+
+function Label$1({ className, ...props }) {
+    return (jsxRuntimeExports.jsx(Label$2.Root, { className: cn('flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50', className), "data-slot": "label", ...props }));
 }
 
-function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
-    return (jsxRuntimeExports.jsx(Separator$1.Root, { className: cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', className), "data-slot": "separator", decorative: decorative, orientation: orientation, ...props }));
+const Label = (props) => {
+    return jsxRuntimeExports.jsx(Label$1, { ...props });
+};
+
+function Separator$1({ className, orientation = 'horizontal', decorative = true, ...props }) {
+    return (jsxRuntimeExports.jsx(Separator$2.Root, { className: cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px', className), "data-slot": "separator", decorative: decorative, orientation: orientation, ...props }));
 }
 
+const Separator = (props) => {
+    return jsxRuntimeExports.jsx(Separator$1, { ...props });
+};
+
+function Switch$1({ className, size = 'default', ...props }) {
+    return (jsxRuntimeExports.jsx(Switch$2.Root, { className: cn('peer group/switch focus-visible:border-ring focus-visible:ring-ring/50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80 inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6', className), "data-size": size, "data-slot": "switch", ...props, children: jsxRuntimeExports.jsx(Switch$2.Thumb, { className: cn('bg-background dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'), "data-slot": "switch-thumb" }) }));
+}
+
+const Switch = ({ id, label, ...props }) => {
+    return (jsxRuntimeExports.jsxs("div", { className: "flex items-center space-x-2", children: [jsxRuntimeExports.jsx(Switch$1, { "data-slot": "switch", id: id, ...props }), jsxRuntimeExports.jsx(Label, { "data-slot": "label", htmlFor: id, children: label })] }));
+};
+
+function ScrollArea$1({ className, children, ...props }) {
+    return (jsxRuntimeExports.jsxs(ScrollArea$2.Root, { className: cn('relative', className), "data-slot": "scroll-area", ...props, children: [jsxRuntimeExports.jsx(ScrollArea$2.Viewport, { className: "focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1", "data-slot": "scroll-area-viewport", children: children }), jsxRuntimeExports.jsx(ScrollBar, {}), jsxRuntimeExports.jsx(ScrollArea$2.Corner, {})] }));
+}
+function ScrollBar({ className, orientation = 'vertical', ...props }) {
+    return (jsxRuntimeExports.jsx(ScrollArea$2.ScrollAreaScrollbar, { className: cn('flex touch-none p-px transition-colors select-none', orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent', orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent', className), "data-slot": "scroll-area-scrollbar", orientation: orientation, ...props, children: jsxRuntimeExports.jsx(ScrollArea$2.ScrollAreaThumb, { className: "bg-border relative flex-1 rounded-full", "data-slot": "scroll-area-thumb" }) }));
+}
+
+const ScrollArea = ({ children, orientation = 'horizontal', className, ...props }) => {
+    return (jsxRuntimeExports.jsxs(ScrollArea$1, { className: className, "data-slot": "scroll-area", ...props, children: [jsxRuntimeExports.jsx("div", { "data-slot": "scroll-area-viewport", children: children }), jsxRuntimeExports.jsx("div", { "data-slot": "scroll-area-scrollbar", children: jsxRuntimeExports.jsx(ScrollBar, { orientation: orientation }) })] }));
+};
+
 /**
  * A simple boolean toggle hook.
  *
@@ -488,4 +531,77 @@ function useToggle(initial = false) {
     return { state, toggle, setOn, setOff };
 }
 
-export { Button, Checkbox, Input, Label, Separator, Spinner, cn, useToggle };
+const applyTheme = (theme) => {
+    const root = window.document.documentElement;
+    const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    const resolvedTheme = theme === 'system' ? (systemDark ? 'dark' : 'light') : theme;
+    root.classList.remove('light', 'dark');
+    root.classList.add(resolvedTheme);
+};
+
+const createStoreImpl = (createState) => {
+  let state;
+  const listeners = /* @__PURE__ */ new Set();
+  const setState = (partial, replace) => {
+    const nextState = typeof partial === "function" ? partial(state) : partial;
+    if (!Object.is(nextState, state)) {
+      const previousState = state;
+      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) ? nextState : Object.assign({}, state, nextState);
+      listeners.forEach((listener) => listener(state, previousState));
+    }
+  };
+  const getState = () => state;
+  const getInitialState = () => initialState;
+  const subscribe = (listener) => {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  };
+  const api = { setState, getState, getInitialState, subscribe };
+  const initialState = state = createState(setState, getState, api);
+  return api;
+};
+const createStore = ((createState) => createState ? createStoreImpl(createState) : createStoreImpl);
+
+const identity = (arg) => arg;
+function useStore(api, selector = identity) {
+  const slice = React.useSyncExternalStore(
+    api.subscribe,
+    React.useCallback(() => selector(api.getState()), [api, selector]),
+    React.useCallback(() => selector(api.getInitialState()), [api, selector])
+  );
+  React.useDebugValue(slice);
+  return slice;
+}
+const createImpl = (createState) => {
+  const api = createStore(createState);
+  const useBoundStore = (selector) => useStore(api, selector);
+  Object.assign(useBoundStore, api);
+  return useBoundStore;
+};
+const create = ((createState) => createState ? createImpl(createState) : createImpl);
+
+const useThemeStore = create((set) => ({
+    theme: 'system',
+    setTheme: (theme) => {
+        localStorage.setItem('theme', theme);
+        set({ theme });
+    },
+}));
+
+function ThemeProvider({ children }) {
+    const { theme, setTheme } = useThemeStore();
+    // Load from localStorage on mount
+    useEffect(() => {
+        const saved = localStorage.getItem('theme');
+        if (saved)
+            setTheme(saved);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // Apply theme whenever it changes
+    useEffect(() => {
+        applyTheme(theme);
+    }, [theme]);
+    return jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: children });
+}
+
+export { Button, Checkbox, Input, Label, ScrollArea, Separator, Spinner, Switch, ThemeProvider, applyTheme, cn, useToggle };

package/dist/lib/index.d.ts

@@ -1 +1,2 @@
 export { cn } from './utils';
+export { applyTheme } from './theme';

package/dist/lib/theme.d.ts

@@ -0,0 +1 @@
+export declare const applyTheme: (theme: "light" | "dark" | "system") => void;

package/dist/providers/index.d.ts

@@ -0,0 +1 @@
+export { ThemeProvider } from './theme-provider';

package/dist/providers/theme-provider.d.ts

@@ -0,0 +1,3 @@
+export declare function ThemeProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/store/index.d.ts

@@ -0,0 +1 @@
+export { useThemeStore } from './theme-store';

package/dist/store/theme-store.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '@/types';
+type ThemeState = {
+    theme: Theme;
+    setTheme: (theme: Theme) => void;
+};
+export declare const useThemeStore: import("zustand").UseBoundStore<import("zustand").StoreApi<ThemeState>>;
+export {};

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export type Theme = 'light' | 'dark' | 'system';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@khanhminh/design-system",
   "description": "A reusable React component library built with TypeScript, Tailwind CSS, and Radix UI",
-  "version": "1.10.8",
+  "version": "1.12.0",
   "type": "module",
   "private": false,
   "main": "dist/index.cjs",
@@ -30,7 +30,11 @@
     "build:lib": "rollup -c",
     "lint": "eslint .",
     "preview": "vite preview",
-    "pre-commit": "lint-staged"
+    "pre-commit": "lint-staged",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage"
   },
   "dependencies": {
     "@tailwindcss/vite": "^4.1.7",
@@ -43,7 +47,8 @@
     "radix-ui": "^1.4.3",
     "react": "^18 || ^19",
     "react-dom": "^18 || ^19",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.5.0",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
@@ -51,10 +56,15 @@
     "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-typescript": "^12.1.1",
     "@tailwindcss/postcss": "^4.1.7",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
     "@types/node": "^25.3.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react-swc": "^4.3.0",
+    "@vitest/coverage-v8": "^4.1.0",
     "autoprefixer": "^10.4.27",
     "eslint": "^9.13.0",
     "eslint-plugin-react": "^7.37.5",
@@ -62,6 +72,7 @@
     "eslint-plugin-react-refresh": "^0.4.14",
     "globals": "^15.11.0",
     "husky": "^8.0.0",
+    "jsdom": "^29.0.0",
     "lint-staged": "^15.2.10",
     "postcss": "^8.4.47",
     "rollup": "^4.12.0",
@@ -69,9 +80,10 @@
     "shadcn": "^3.8.5",
     "tailwindcss": "^4.1.7",
     "tw-animate-css": "^1.4.0",
-    "typescript": "~5.6.2",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.11.0",
-    "vite": "^5.4.10"
+    "vite": "^5.4.10",
+    "vitest": "^4.1.0"
   },
   "peerDependencies": {
     "react": "^18 || ^19",