get-elementa-ui 1.11.6 → 1.14.0

package/dist/index.esm.js

@@ -1,4 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cn as cn$1 } from '@/lib/utils';
 import * as React from 'react';
 import React__default, { useState, useLayoutEffect, forwardRef, createElement, useEffect } from 'react';
 import * as ReactDOM from 'react-dom';
@@ -65,7 +66,6 @@ function createSlot(ownerName) {
   Slot2.displayName = `${ownerName}.Slot`;
   return Slot2;
 }
-var Slot$1 = /* @__PURE__ */ createSlot("Slot");
 // @__NO_SIDE_EFFECTS__
 function createSlotClone(ownerName) {
   const SlotClone = React.forwardRef((props, forwardedRef) => {
@@ -6166,8 +6166,83 @@ function isValidOrientation(orientation) {
 }
 var Root = Separator$1;
 
+function Avatar({ className, size = 'default', ...props }) {
+    return (jsx(Root$2, { "data-slot": "avatar", "data-size": size, className: cn$1('group/avatar border-stroke-active-primary relative flex size-8 shrink-0 rounded-full border-[1.5px] select-none data-[size=lg]:size-10 data-[size=sm]:size-6', className), ...props }));
+}
+
 function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
 
+const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config)=>(props)=>{
+        var _config_compoundVariants;
+        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+        const { variants, defaultVariants } = config;
+        const getVariantClassNames = Object.keys(variants).map((variant)=>{
+            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+            if (variantProp === null) return null;
+            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+            return variants[variant][variantKey];
+        });
+        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
+            let [key, value] = param;
+            if (value === undefined) {
+                return acc;
+            }
+            acc[key] = value;
+            return acc;
+        }, {});
+        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
+            let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+            return Object.entries(compoundVariantOptions).every((param)=>{
+                let [key, value] = param;
+                return Array.isArray(value) ? value.includes({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                }[key]) : ({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                })[key] === value;
+            }) ? [
+                ...acc,
+                cvClass,
+                cvClassName
+            ] : acc;
+        }, []);
+        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    };
+
+const buttonVariants = cva("focus-visible:border-ring py-1 cursor-pointer active:scale-95 focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 aria-invalid:border-destructive rounded-[8px] border border-transparent font-body font-bold focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: 'bg-bg-active-primary text-text-primary hover:bg-bg-active-hover-primary [a]:hover:bg-primary/80',
+            outline: 'border-stroke-base-primary bg-bg-base-primary hover:bg-muted aria-expanded:bg-muted text-text-primary',
+            secondary: 'bg-bg-active-secondary text-text-primary hover:bg-bg-active-hover-secondary aria-expanded:bg-secondary aria-expanded:text-text-primary',
+            ghost: 'hover:bg-muted text-text-primary aria-expanded:bg-muted',
+            destructive: 'bg-bg-fill-destructive hover:bg-bg-hover-destructive focus-visible:ring-destructive/20 text-text-destructive focus-visible:border-destructive/40 border-stroke-destructive',
+            link: 'text-text-info underline-offset-4 hover:underline'
+        },
+        size: {
+            default: 'h-10 gap-1.5 text-sm px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+            xs: "h-8 gap-1 px-2 text-xs has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-9 gap-1 px-3 text-sm text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+            lg: 'h-11 gap-1.5 text-base px-3 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+            icon: 'size-8',
+            'icon-xs': "size-6 [&_svg:not([class*='size-'])]:size-3",
+            'icon-sm': 'size-7',
+            'icon-lg': 'size-9'
+        }
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'default'
+    }
+});
+function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
+    return (jsx("button", { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn$1(buttonVariants({ variant, size, className })), ...props }));
+}
+
 /**
  * Concatenates two arrays faster than the array spread operator.
  */
@@ -9371,82 +9446,6 @@ function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
 
-function Avatar({ className, size = 'default', ...props }) {
-    return (jsx(Root$2, { "data-slot": "avatar", "data-size": size, className: cn('group/avatar relative flex size-8 shrink-0 overflow-hidden rounded-full select-none data-[size=lg]:size-10 data-[size=sm]:size-6', className), ...props }));
-}
-
-const falsyToString = (value)=>typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
-const cx = clsx;
-const cva = (base, config)=>(props)=>{
-        var _config_compoundVariants;
-        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-        const { variants, defaultVariants } = config;
-        const getVariantClassNames = Object.keys(variants).map((variant)=>{
-            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
-            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
-            if (variantProp === null) return null;
-            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
-            return variants[variant][variantKey];
-        });
-        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
-            let [key, value] = param;
-            if (value === undefined) {
-                return acc;
-            }
-            acc[key] = value;
-            return acc;
-        }, {});
-        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{
-            let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
-            return Object.entries(compoundVariantOptions).every((param)=>{
-                let [key, value] = param;
-                return Array.isArray(value) ? value.includes({
-                    ...defaultVariants,
-                    ...propsWithoutUndefined
-                }[key]) : ({
-                    ...defaultVariants,
-                    ...propsWithoutUndefined
-                })[key] === value;
-            }) ? [
-                ...acc,
-                cvClass,
-                cvClassName
-            ] : acc;
-        }, []);
-        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
-    };
-
-const buttonVariants = cva("focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none", {
-    variants: {
-        variant: {
-            default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
-            outline: 'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
-            secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
-            ghost: 'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
-            destructive: 'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
-            link: 'text-primary underline-offset-4 hover:underline'
-        },
-        size: {
-            default: 'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
-            xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-            sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-            lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
-            icon: 'size-8',
-            'icon-xs': "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
-            'icon-sm': 'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
-            'icon-lg': 'size-9'
-        }
-    },
-    defaultVariants: {
-        variant: 'default',
-        size: 'default'
-    }
-});
-function Button({ className, variant = 'default', size = 'default', asChild = false, ...props }) {
-    const Comp = asChild ? Slot$1 : 'button';
-    return (jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
-}
-
 /**
  * @license lucide-react v0.575.0 - ISC
  *
@@ -9598,73 +9597,53 @@ const createLucideIcon = (iconName, iconNode) => {
  */
 
 
-const __iconNode$2 = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
-const Check = createLucideIcon("check", __iconNode$2);
-
-/**
- * @license lucide-react v0.575.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode$1 = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
-const ChevronDown = createLucideIcon("chevron-down", __iconNode$1);
-
-/**
- * @license lucide-react v0.575.0 - ISC
- *
- * This source code is licensed under the ISC license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
-const ChevronUp = createLucideIcon("chevron-up", __iconNode);
+const __iconNode = [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]];
+const Check = createLucideIcon("check", __iconNode);
 
 function Checkbox({ className, ...props }) {
     return (jsx(Checkbox$1, { "data-slot": "checkbox", className: cn('border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50', className), ...props, children: jsx(CheckboxIndicator, { "data-slot": "checkbox-indicator", className: "[&>svg]:size-3.5 grid place-content-center text-current transition-none", children: jsx(Check, {}) }) }));
 }
 
+const h=({color:c="#000000",height:l="1em",strokeWidth:e=1,width:t="1em"})=>jsx("svg",{xmlns:"http://www.w3.org/2000/svg",xmlSpace:"preserve",style:{fillRule:"evenodd",clipRule:"evenodd",strokeLinejoin:"round",strokeMiterlimit:2},viewBox:"0 0 33 13",height:l,width:t,stroke:c,strokeWidth:e,fill:c,children:jsx("path",{d:"M32.121.435s-3.57 2.356-7.379 4.954a359 359 0 0 0-4.38 3.035c-1.105.778-2.095 1.501-2.886 2.068a2.03 2.03 0 0 1-1.209.388 2.03 2.03 0 0 1-1.21-.385c-1.46-1.026-3.594-2.557-5.812-4.087C4.95 3.445.414.435.414.435a.243.243 0 1 0-.292.39S4.28 4.337 8.328 7.632c2.09 1.7 4.157 3.321 5.55 4.433a3.94 3.94 0 0 0 2.39.815 3.94 3.94 0 0 0 2.39-.812c.766-.6 1.737-1.349 2.793-2.192a344 344 0 0 0 4.14-3.355A658 658 0 0 0 32.413.825a.244.244 0 0 0-.292-.39"})}),d=({color:c="#000000",height:l="1em",strokeWidth:e=1,width:t="1em"})=>jsx("svg",{xmlns:"http://www.w3.org/2000/svg",xmlSpace:"preserve",style:{fillRule:"evenodd",clipRule:"evenodd",strokeLinejoin:"round",strokeMiterlimit:2},viewBox:"0 0 34 13",height:l,width:t,stroke:c,strokeWidth:e,fill:c,children:jsx("path",{d:"M.93 12.828s3.57-2.356 7.378-4.954a359 359 0 0 0 4.38-3.035c1.105-.778 2.095-1.5 2.886-2.068a2.03 2.03 0 0 1 1.21-.388c.424 0 .851.121 1.21.385 1.46 1.026 3.593 2.557 5.811 4.087a687 687 0 0 0 8.832 5.973.243.243 0 1 0 .292-.39s-4.159-3.512-8.207-6.807c-2.089-1.7-4.157-3.32-5.55-4.433a3.94 3.94 0 0 0-2.389-.815 3.94 3.94 0 0 0-2.39.812c-.767.601-1.738 1.35-2.794 2.192a344 344 0 0 0-4.14 3.355C3.9 9.672.637 12.438.637 12.438a.244.244 0 0 0 .292.39"})}),yl=({color:c="#000000",height:l="1em",strokeWidth:e=1,width:t="1em"})=>jsx("svg",{xmlns:"http://www.w3.org/2000/svg",xmlSpace:"preserve",style:{fillRule:"evenodd",clipRule:"evenodd",strokeLinejoin:"round",strokeMiterlimit:2},viewBox:"0 0 33 24",height:l,width:t,stroke:c,strokeWidth:e,fill:c,children:jsx("path",{d:"M.323 12.132s3.41 4.214 6.18 7.543c1.081 1.3 2.073 2.454 2.694 3.19a1.87 1.87 0 0 0 1.347.634 1.9 1.9 0 0 0 1.403-.554c.697-.691 1.853-1.802 3.233-3.208.96-.978 2.03-2.094 3.146-3.293a443 443 0 0 0 5.721-6.295C28.564 5.106 32.495.577 32.495.577a.037.037 0 0 0 0-.052.037.037 0 0 0-.053 0s-4.42 4.053-9.34 8.704a446 446 0 0 0-6.139 5.888 179 179 0 0 0-3.207 3.234c-1.369 1.417-2.448 2.602-3.12 3.318l-.063.05-.099-.018c-.674-.687-1.73-1.781-2.925-2.98a841 841 0 0 0-6.936-6.854.197.197 0 0 0-.277-.013.197.197 0 0 0-.013.278"})});
+
 function Select({ ...props }) {
     return jsx(Root2, { "data-slot": "select", ...props });
 }
 function SelectGroup({ className, ...props }) {
-    return (jsx(Group, { "data-slot": "select-group", className: cn('scroll-my-1 p-1', className), ...props }));
+    return (jsx(Group, { "data-slot": "select-group", className: cn$1('scroll-my-1 p-1', className), ...props }));
 }
 function SelectValue({ ...props }) {
     return jsx(Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({ className, size = 'default', children, ...props }) {
-    return (jsxs(Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, jsx(Icon$1, { asChild: true, children: jsx(ChevronDown, { className: "text-muted-foreground size-4 pointer-events-none" }) })] }));
+    return (jsxs(Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn$1("border-stroke-flat-secondary font-body data-placeholder:text-text-tertiary bg-bg-flat-primary flex w-fit items-center justify-between gap-1.5 rounded-lg border py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", 'aria-invalid:border-stroke-destructive aria-invalid:ring-bg-fill-destructive aria-invalid:ring-3', 'focus-visible:border-stroke-active-primary focus-visible:ring-bg-fill-active-primary focus-visible:ring-3', 'cursor-pointer', className), ...props, children: [children, jsx(Icon$1, { asChild: true, children: jsx(h, { className: "text-text-primary pointer-events-none size-4" }) })] }));
 }
 function SelectContent({ className, children, position = 'item-aligned', align = 'center', ...props }) {
-    return (jsx(Portal, { children: jsxs(Content2, { "data-slot": "select-content", "data-align-trigger": position === 'item-aligned', className: cn('bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none', position === 'popper' &&
-                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, align: align, ...props, children: [jsx(SelectScrollUpButton, {}), jsx(Viewport, { "data-position": position, className: cn('data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)', position === 'popper' && ''), children: children }), jsx(SelectScrollDownButton, {})] }) }));
+    return (jsx(Portal, { children: jsxs(Content2, { "data-slot": "select-content", "data-align-trigger": position === 'item-aligned', className: cn$1('bg-bg-flat-primary text-text-primary ring-stroke-flat-secondary/30 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg shadow-md ring-1 duration-100 data-[align-trigger=true]:animate-none', position === 'popper' &&
+                'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, align: align, ...props, children: [jsx(SelectScrollUpButton, {}), jsx(Viewport, { "data-position": position, className: cn$1('data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)', position === 'popper' && ''), children: children }), jsx(SelectScrollDownButton, {})] }) }));
 }
 function SelectLabel({ className, ...props }) {
-    return (jsx(Label, { "data-slot": "select-label", className: cn('text-muted-foreground px-1.5 py-1 text-xs', className), ...props }));
+    return (jsx(Label, { "data-slot": "select-label", className: cn$1('text-text-primary font-body px-1.5 py-1 text-xs', className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (jsxs(Item, { "data-slot": "select-item", className: cn("focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: jsx(ItemIndicator, { children: jsx(Check, { className: "pointer-events-none" }) }) }), jsx(ItemText, { children: children })] }));
+    return (jsxs(Item, { "data-slot": "select-item", className: cn$1('relative flex w-full items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5', "focus:bg-bg-base-selected-primary focus:text-text-primary not-data-[variant=destructive]:focus:**:text-text-primary text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", 'cursor-pointer', className), ...props, children: [jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: jsx(ItemIndicator, { children: jsx(yl, { className: "pointer-events-none" }) }) }), jsx(ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
-    return (jsx(Separator$2, { "data-slot": "select-separator", className: cn('bg-border -mx-1 my-1 h-px pointer-events-none', className), ...props }));
+    return (jsx(Separator$2, { "data-slot": "select-separator", className: cn$1('bg-stroke-flat-primary pointer-events-none -mx-1 my-1 h-px', className), ...props }));
 }
 function SelectScrollUpButton({ className, ...props }) {
-    return (jsx(ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: jsx(ChevronUp, {}) }));
+    return (jsx(ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn$1("bg-bg-flat-primary z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: jsx(d, {}) }));
 }
 function SelectScrollDownButton({ className, ...props }) {
-    return (jsx(ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: jsx(ChevronDown, {}) }));
+    return (jsx(ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn$1("bg-bg-flat-primary z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: jsx(h, {}) }));
 }
 
 function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
-    return (jsx(Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch', className), ...props }));
+    return (jsx(Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn$1('bg-stroke-base-primary shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch', className), ...props }));
 }
 
 function Skeleton({ className, ...props }) {
-    return (jsx("div", { "data-slot": "skeleton", className: cn('bg-muted rounded-md animate-pulse', className), ...props }));
+    return (jsx("div", { "data-slot": "skeleton", className: cn$1('bg-bg-modal-primary animate-pulse rounded-md', className), ...props }));
 }
 
 var TextVariant;
@@ -9682,15 +9661,15 @@ var TextVariant;
     TextVariant[TextVariant["Caption"] = 10] = "Caption";
     TextVariant[TextVariant["Custom"] = 11] = "Custom";
 })(TextVariant || (TextVariant = {}));
-
 /**
  * This function renders the Text component for the library.
  */
-function Text({ variant = TextVariant.Body, color, children, customClassName }) {
+function Text({ variant = TextVariant.Body, color = 'text-text-primary', children, className }) {
     // SECTION: Constants and Variables
-    const [className, setClassName] = useState('');
+    const baseClassNames = 'w-fit';
     // !SECTION: Constants and Variables
     // SECTION: States
+    const [internalClassName, setInternalClassName] = useState('');
     // !SECTION: States
     // SECTION: Functions
     /**
@@ -9702,23 +9681,29 @@ function Text({ variant = TextVariant.Body, color, children, customClassName })
     const getVariantClass = (variant) => {
         switch (variant) {
             case TextVariant.H1:
-                return 'text-[61px] font-heading';
+                return '';
             case TextVariant.H2:
-                return 'text-[48px] font-heading';
+                return '';
             case TextVariant.H3:
-                return 'text-[39px] font-heading';
+                return '';
             case TextVariant.H4:
-                return 'text-[31px] font-bold font-heading';
+                return '';
             case TextVariant.H5:
-                return 'text-[25px] font-bold font-heading';
+                return '';
             case TextVariant.H6:
-                return 'text-[20px] font-bold font-heading';
+                return '';
             case TextVariant.Body:
-                return 'text-[16px] font-body';
+                return 'text-sm font-body';
+            case TextVariant.Subtitle1:
+                return 'text-sm font-medium font-body';
+            case TextVariant.Subtitle2:
+                return 'text-xs font-medium font-body';
             case TextVariant.Button:
-                return 'text-[16px] font-bold font-body';
+                return 'text-sm font-medium font-body';
+            case TextVariant.Caption:
+                return 'text-xs font-body';
             default:
-                return 'text-[16px] font-body';
+                return 'text-sm font-body';
         }
     };
     // !SECTION Functions
@@ -9726,11 +9711,34 @@ function Text({ variant = TextVariant.Body, color, children, customClassName })
     // !SECTION: Event Handlers
     // SECTION: Side Effects
     useEffect(() => {
-        setClassName(cn(getVariantClass(variant), color, customClassName));
-    }, [variant, color, customClassName]);
+        setInternalClassName(cn$1(baseClassNames, getVariantClass(variant), color, className));
+    }, [variant, color, className]);
     // !SECTION: Side Effects
     // SECTION: UI
-    return jsx("p", { className: className, children: children });
+    switch (variant) {
+        case TextVariant.H1:
+            return jsx("h1", { className: internalClassName, children: children });
+        case TextVariant.H2:
+            return jsx("h2", { className: internalClassName, children: children });
+        case TextVariant.H3:
+            return jsx("h3", { className: internalClassName, children: children });
+        case TextVariant.H4:
+            return jsx("h4", { className: internalClassName, children: children });
+        case TextVariant.H5:
+            return jsx("h5", { className: internalClassName, children: children });
+        case TextVariant.H6:
+            return jsx("h6", { className: internalClassName, children: children });
+        case TextVariant.Button:
+            return jsx("p", { className: internalClassName, children: children });
+        case TextVariant.Caption:
+            return jsx("p", { className: internalClassName, children: children });
+        case TextVariant.Subtitle1:
+            return jsx("p", { className: internalClassName, children: children });
+        case TextVariant.Subtitle2:
+            return jsx("p", { className: internalClassName, children: children });
+        default:
+            return jsx("p", { className: internalClassName, children: children });
+    }
     // !SECTION: UI
 }