@pantool/components 1.0.0-alpha.1 → 1.0.0-alpha.11

package/dist/index.d.ts

@@ -1,21 +1,46 @@
 import { AlertDialog, AlertDialogProps } from "./atoms/alert-dialog/alert-dialog.js";
+import { Autocomplete, AutocompleteGroup, AutocompleteItem, AutocompleteProps } from "./atoms/autocomplete/autocomplete.js";
+import { Avatar, AvatarProps } from "./atoms/avatar/avatar.js";
+import { MergeElementProps, MergeElementPropsWithOmitted, PolymorphicProps, PolymorphicPropsWithOmitted, WithBaseProps, WithColorProps, WithRef } from "./types.js";
+import { IconButton, IconButtonProps } from "./atoms/icon-button/icon-button.js";
+import { Badge, BadgeAction, BadgeProps } from "./atoms/badge/badge.js";
 import { Button, ButtonProps } from "./atoms/button/button.js";
+import { CheckboxGroup, CheckboxGroupItem, CheckboxGroupProps } from "./atoms/checkbox-group/checkbox-group.js";
 import { Checkbox, CheckboxProps } from "./atoms/checkbox/checkbox.js";
+import { ClickableArea, ClickableAreaProps } from "./atoms/clickable-area/clickable-area.js";
+import { Collapsible } from "./atoms/collapsible/collapsible.js";
+import { ComboboxItem } from "./atoms/combobox/components/item.js";
 import { Combobox, ComboboxGroup, ComboboxProps } from "./atoms/combobox/combobox.js";
+import { ConditionGuard, ConditionGuardProps } from "./atoms/condition-guard/condition-guard.js";
 import { ContextMenu } from "./atoms/context-menu/context-menu.js";
 import { Dialog, DialogProps } from "./atoms/dialog/dialog.js";
 import { Icon, IconProps } from "./atoms/icon/icon.js";
-import { IconButton, IconButtonProps } from "./atoms/icon-button/icon-button.js";
 import { Input, InputProps } from "./atoms/input/input.js";
-import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./atoms/radio/radio.js";
+import { BaseItem, CheckboxItem, GroupItem, Menu, MenuItemsByMode, MenuMode, MenuProps, NormalItem, RadioItem, SeparatorItem, SubmenuItem } from "./atoms/menu/menu.js";
+import { Menubar, MenubarProps } from "./atoms/menubar/menubar.js";
+import { Notice, NoticeProps } from "./atoms/notice/notice.js";
+import { Radio, RadioProps } from "./atoms/radio/radio.js";
+import { RadioGroup, RadioGroupItem, RadioGroupProps } from "./atoms/radio-group/radio-group.js";
+import { SelectItem } from "./atoms/select/components/item.js";
+import { Select, SelectGroup, SelectProps } from "./atoms/select/select.js";
+import { Slider, SliderProps } from "./atoms/slider/slider.js";
+import { Stepper, StepperProps } from "./atoms/stepper/stepper.js";
 import { Switch, SwitchProps } from "./atoms/switch/switch.js";
 import { Tabs, TabsList, TabsListProps, TabsPanel, TabsPanelProps, TabsTab, TabsTabProps } from "./atoms/tabs/tabs.js";
 import { TabsListState, TabsPanelState, TabsRootChangeEventDetails, TabsRootState, TabsTabState, TabsTabValue } from "./atoms/tabs/index.js";
-import { MergeElementProps, MergeElementPropsWithOmitted, PolymorphicProps, PolymorphicPropsWithOmitted, WithBaseProps, WithColorProps, WithRef } from "./types.js";
 import { Text, TextColor, TextProps, TextVariant } from "./atoms/text/text.js";
 import { Toast, ToastData, ToastProps } from "./atoms/toast/toast.js";
 import { Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps } from "./atoms/tooltip/tooltip.js";
-import { ConditionGuard, ConditionGuardProps } from "./atoms/condition-guard/condition-guard.js";
+import { InputField, InputFieldProps } from "./fields/input-field/input-field.js";
+import { ComboboxField, ComboboxFieldProps } from "./fields/combobox-field/combobox-field.js";
+import { AutocompleteField, AutocompleteFieldProps } from "./fields/autocomplete-field/autocomplete-field.js";
+import { SelectField, SelectFieldProps } from "./fields/select-field/select-field.js";
+import { SliderField, SliderFieldProps } from "./fields/slider-field/slider-field.js";
+import { StepperField, StepperFieldProps } from "./fields/stepper-field/stepper-field.js";
+import { RadioGroupField, RadioGroupFieldProps } from "./fields/radio-group-field/radio-group-field.js";
+import { CheckboxField, CheckboxFieldProps } from "./fields/checkbox-field/checkbox-field.js";
+import { CheckboxGroupField, CheckboxGroupFieldProps } from "./fields/checkbox-group-field/checkbox-group-field.js";
+import { Flex, FlexProps } from "./helpers/flex/flex.js";
 import { usePortalConfig } from "./helpers/portal/context/hooks.js";
 import { PortalConfigProvider } from "./helpers/portal/context/provider.js";
 import { Portal, PortalProps } from "./helpers/portal/portal.js";
@@ -24,4 +49,4 @@ import { useAlertDialog } from "./providers/alert-dialog-provider/hooks.js";
 import { DialogContext, DialogProvider, DialogProviderProps, showDialog } from "./providers/dialog-provider/dialog-provider.js";
 import { useDialog } from "./providers/dialog-provider/hooks.js";
 import { ToastProvider, ToastProviderProps, toaster } from "./providers/toast-provider/toast-provider.js";
-export { AlertDialog, AlertDialogContext, AlertDialogProps, AlertDialogProvider, AlertDialogProviderProps, Button, ButtonProps, Checkbox, CheckboxProps, Combobox, ComboboxGroup, ComboboxProps, ConditionGuard, ConditionGuardProps, ContextMenu, Dialog, DialogContext, DialogProps, DialogProvider, DialogProviderProps, Icon, IconButton, IconButtonProps, IconProps, Input, InputProps, MergeElementProps, MergeElementPropsWithOmitted, PolymorphicProps, PolymorphicPropsWithOmitted, Portal, PortalConfigProvider, PortalProps, Radio, RadioGroup, RadioGroupProps, RadioProps, Switch, SwitchProps, Tabs, TabsList, type TabsListProps, type TabsListState, TabsPanel, type TabsPanelProps, type TabsPanelState, type TabsRootChangeEventDetails, type TabsRootState, TabsTab, type TabsTabProps, type TabsTabState, type TabsTabValue, Text, TextColor, TextProps, TextVariant, Toast, ToastData, ToastProps, ToastProvider, ToastProviderProps, Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps, WithBaseProps, WithColorProps, WithRef, showAlertDialog, showDialog, toaster, useAlertDialog, useDialog, usePortalConfig };
+export { AlertDialog, AlertDialogContext, AlertDialogProps, AlertDialogProvider, AlertDialogProviderProps, Autocomplete, AutocompleteField, AutocompleteFieldProps, AutocompleteGroup, AutocompleteItem, AutocompleteProps, Avatar, AvatarProps, Badge, BadgeAction, BadgeProps, BaseItem, Button, ButtonProps, Checkbox, CheckboxField, CheckboxFieldProps, CheckboxGroup, CheckboxGroupField, CheckboxGroupFieldProps, CheckboxGroupItem, CheckboxGroupProps, CheckboxItem, CheckboxProps, ClickableArea, ClickableAreaProps, Collapsible, Combobox, ComboboxField, ComboboxFieldProps, ComboboxGroup, type ComboboxItem, ComboboxProps, ConditionGuard, ConditionGuardProps, ContextMenu, Dialog, DialogContext, DialogProps, DialogProvider, DialogProviderProps, Flex, FlexProps, GroupItem, Icon, IconButton, IconButtonProps, IconProps, Input, InputField, InputFieldProps, InputProps, Menu, MenuItemsByMode, MenuMode, MenuProps, Menubar, MenubarProps, MergeElementProps, MergeElementPropsWithOmitted, NormalItem, Notice, NoticeProps, PolymorphicProps, PolymorphicPropsWithOmitted, Portal, PortalConfigProvider, PortalProps, Radio, RadioGroup, RadioGroupField, RadioGroupFieldProps, RadioGroupItem, RadioGroupProps, RadioItem, RadioProps, Select, SelectField, SelectFieldProps, SelectGroup, type SelectItem, SelectProps, SeparatorItem, Slider, SliderField, SliderFieldProps, SliderProps, Stepper, StepperField, StepperFieldProps, StepperProps, SubmenuItem, Switch, SwitchProps, Tabs, TabsList, type TabsListProps, type TabsListState, TabsPanel, type TabsPanelProps, type TabsPanelState, type TabsRootChangeEventDetails, type TabsRootState, TabsTab, type TabsTabProps, type TabsTabState, type TabsTabValue, Text, TextColor, TextProps, TextVariant, Toast, ToastData, ToastProps, ToastProvider, ToastProviderProps, Tooltip, TooltipProps, TooltipProvider, TooltipProviderProps, WithBaseProps, WithColorProps, WithRef, showAlertDialog, showDialog, toaster, useAlertDialog, useDialog, usePortalConfig };

package/dist/index.js

@@ -1 +1 @@
-import{Button as e}from"./atoms/button/button.js";import{Text as t}from"./atoms/text/text.js";import{usePortalConfig as n}from"./helpers/portal/context/hooks.js";import{PortalConfigProvider as r}from"./helpers/portal/context/provider.js";import{Portal as i}from"./helpers/portal/portal.js";import{AlertDialog as a}from"./atoms/alert-dialog/alert-dialog.js";import{Icon as o}from"./atoms/icon/icon.js";import{Checkbox as s}from"./atoms/checkbox/checkbox.js";import{Combobox as c}from"./atoms/combobox/combobox.js";import{ContextMenu as l}from"./atoms/context-menu/context-menu.js";import{Dialog as u}from"./atoms/dialog/dialog.js";import{IconButton as d}from"./atoms/icon-button/icon-button.js";import{Input as f}from"./atoms/input/input.js";import{Radio as p,RadioGroup as m}from"./atoms/radio/radio.js";import{Switch as h}from"./atoms/switch/switch.js";import{Tabs as g,TabsList as _,TabsPanel as v,TabsTab as y}from"./atoms/tabs/tabs.js";import{Toast as b}from"./atoms/toast/toast.js";import{Tooltip as x,TooltipProvider as S}from"./atoms/tooltip/tooltip.js";import{ConditionGuard as C}from"./atoms/condition-guard/condition-guard.js";import"./atoms/index.js";import{AlertDialogContext as w,AlertDialogProvider as T,showAlertDialog as E}from"./providers/alert-dialog-provider/alert-dialog-provider.js";import{useAlertDialog as D}from"./providers/alert-dialog-provider/hooks.js";import{DialogContext as O,DialogProvider as k,showDialog as A}from"./providers/dialog-provider/dialog-provider.js";import{useDialog as j}from"./providers/dialog-provider/hooks.js";import{ToastProvider as M,toaster as N}from"./providers/toast-provider/toast-provider.js";import"./providers/index.js";import"./types.js";export{a as AlertDialog,w as AlertDialogContext,T as AlertDialogProvider,e as Button,s as Checkbox,c as Combobox,C as ConditionGuard,l as ContextMenu,u as Dialog,O as DialogContext,k as DialogProvider,o as Icon,d as IconButton,f as Input,i as Portal,r as PortalConfigProvider,p as Radio,m as RadioGroup,h as Switch,g as Tabs,_ as TabsList,v as TabsPanel,y as TabsTab,t as Text,b as Toast,M as ToastProvider,x as Tooltip,S as TooltipProvider,E as showAlertDialog,A as showDialog,N as toaster,D as useAlertDialog,j as useDialog,n as usePortalConfig};
+import{Button as e}from"./atoms/button/button.js";import{Text as t}from"./atoms/text/text.js";import{usePortalConfig as n}from"./helpers/portal/context/hooks.js";import{PortalConfigProvider as r}from"./helpers/portal/context/provider.js";import{Portal as i}from"./helpers/portal/portal.js";import{AlertDialog as a}from"./atoms/alert-dialog/alert-dialog.js";import{Autocomplete as o}from"./atoms/autocomplete/autocomplete.js";import{Avatar as s}from"./atoms/avatar/avatar.js";import{Icon as c}from"./atoms/icon/icon.js";import{IconButton as l}from"./atoms/icon-button/icon-button.js";import{Badge as u}from"./atoms/badge/badge.js";import{Checkbox as d}from"./atoms/checkbox/checkbox.js";import{CheckboxGroup as f}from"./atoms/checkbox-group/checkbox-group.js";import{ClickableArea as p}from"./atoms/clickable-area/clickable-area.js";import{Collapsible as m}from"./atoms/collapsible/collapsible.js";import{Combobox as h}from"./atoms/combobox/combobox.js";import{ConditionGuard as g}from"./atoms/condition-guard/condition-guard.js";import{ContextMenu as _}from"./atoms/context-menu/context-menu.js";import{Dialog as v}from"./atoms/dialog/dialog.js";import{Input as y}from"./atoms/input/input.js";import{Flex as b}from"./helpers/flex/flex.js";import"./helpers/index.js";import{Menu as x}from"./atoms/menu/menu.js";import{Menubar as S}from"./atoms/menubar/menubar.js";import{Notice as C}from"./atoms/notice/notice.js";import{Radio as w}from"./atoms/radio/radio.js";import{RadioGroup as T}from"./atoms/radio-group/radio-group.js";import{Select as E}from"./atoms/select/select.js";import{Slider as D}from"./atoms/slider/slider.js";import{Stepper as O}from"./atoms/stepper/stepper.js";import{Switch as k}from"./atoms/switch/switch.js";import{Tabs as A,TabsList as j,TabsPanel as M,TabsTab as N}from"./atoms/tabs/tabs.js";import{Toast as P}from"./atoms/toast/toast.js";import{Tooltip as F,TooltipProvider as I}from"./atoms/tooltip/tooltip.js";import"./atoms/index.js";import{InputField as L}from"./fields/input-field/input-field.js";import{ComboboxField as R}from"./fields/combobox-field/combobox-field.js";import{AutocompleteField as z}from"./fields/autocomplete-field/autocomplete-field.js";import{SelectField as B}from"./fields/select-field/select-field.js";import{SliderField as V}from"./fields/slider-field/slider-field.js";import{StepperField as H}from"./fields/stepper-field/stepper-field.js";import{RadioGroupField as U}from"./fields/radio-group-field/radio-group-field.js";import{CheckboxField as W}from"./fields/checkbox-field/checkbox-field.js";import{CheckboxGroupField as G}from"./fields/checkbox-group-field/checkbox-group-field.js";import"./fields/index.js";import{AlertDialogContext as K,AlertDialogProvider as q,showAlertDialog as J}from"./providers/alert-dialog-provider/alert-dialog-provider.js";import{useAlertDialog as Y}from"./providers/alert-dialog-provider/hooks.js";import{DialogContext as X,DialogProvider as Z,showDialog as Q}from"./providers/dialog-provider/dialog-provider.js";import{useDialog as $}from"./providers/dialog-provider/hooks.js";import{ToastProvider as ee,toaster as te}from"./providers/toast-provider/toast-provider.js";import"./providers/index.js";import"./types.js";export{a as AlertDialog,K as AlertDialogContext,q as AlertDialogProvider,o as Autocomplete,z as AutocompleteField,s as Avatar,u as Badge,e as Button,d as Checkbox,W as CheckboxField,f as CheckboxGroup,G as CheckboxGroupField,p as ClickableArea,m as Collapsible,h as Combobox,R as ComboboxField,g as ConditionGuard,_ as ContextMenu,v as Dialog,X as DialogContext,Z as DialogProvider,b as Flex,c as Icon,l as IconButton,y as Input,L as InputField,x as Menu,S as Menubar,C as Notice,i as Portal,r as PortalConfigProvider,w as Radio,T as RadioGroup,U as RadioGroupField,E as Select,B as SelectField,D as Slider,V as SliderField,O as Stepper,H as StepperField,k as Switch,A as Tabs,j as TabsList,M as TabsPanel,N as TabsTab,t as Text,P as Toast,ee as ToastProvider,F as Tooltip,I as TooltipProvider,J as showAlertDialog,Q as showDialog,te as toaster,Y as useAlertDialog,$ as useDialog,n as usePortalConfig};

package/dist/internals/base-button/base-button.css

@@ -1,262 +1 @@
-._4R_YnW_root {
-  box-sizing: border-box;
-  cursor: pointer;
-  user-select: none;
-  font-family: var(--typography-typeface-ltr);
-  font-weight: var(--typography-body-2-weight);
-  border-radius: var(--radius-full);
-  height: var(--btn-height);
-  padding: 0 var(--btn-padding-x);
-  font-size: var(--btn-font-size);
-  background-color: var(--btn-bg);
-  color: var(--btn-text);
-  border: none;
-  border: 1px solid var(--btn-border);
-  outline: none;
-  justify-content: center;
-  align-items: center;
-  text-decoration: none;
-  transition: background-color .2s, color .2s, border-color .2s, opacity .2s;
-  display: inline-flex;
-}
-
-._4R_YnW_root[data-size="sm"] {
-  --btn-height: 1.5rem;
-  --btn-icon-size: 1rem;
-  --btn-padding-x: var(--spacing-sm);
-  --btn-font-size: var(--typography-body-2-size);
-}
-
-._4R_YnW_root[data-size="md"] {
-  --btn-height: 2rem;
-  --btn-icon-size: 1.5rem;
-  --btn-padding-x: var(--spacing-md);
-  --btn-font-size: var(--typography-body-2-size);
-}
-
-._4R_YnW_root[data-size="lg"] {
-  --btn-height: 2.5rem;
-  --btn-icon-size: 2rem;
-  --btn-padding-x: var(--spacing-lg);
-  --btn-font-size: var(--typography-body-1-size);
-}
-
-._4R_YnW_root[data-fluid] {
-  width: 100%;
-}
-
-._4R_YnW_root:focus-visible {
-  outline-style: solid;
-  outline-width: var(--stroke-focus-ring);
-  outline-color: var(--color-action-info-base);
-  outline-offset: var(--spacing-xxs);
-}
-
-._4R_YnW_root[disabled], ._4R_YnW_root[data-disabled] {
-  cursor: not-allowed;
-  opacity: .5;
-}
-
-._4R_YnW_root[data-color="neutral"][data-variant="filled"] {
-  --btn-bg: var(--color-action-neutral-base);
-  --btn-text: var(--color-on-neutral);
-  --btn-border: transparent;
-}
-
-._4R_YnW_root[data-color="neutral"][data-variant="filled"]:hover:not([disabled]) {
-  --btn-bg: var(--color-action-neutral-hover);
-}
-
-._4R_YnW_root[data-color="neutral"][data-variant="filled"]:active:not([disabled]) {
-  --btn-bg: var(--color-action-neutral-active);
-}
-
-._4R_YnW_root[data-color="neutral"][data-variant="outlined"] {
-  --btn-bg: transparent;
-  --btn-text: var(--color-content-neutral-base);
-  --btn-border: var(--color-content-neutral-base);
-}
-
-._4R_YnW_root[data-color="neutral"][data-variant="outlined"]:hover:not([disabled]) {
-  --btn-bg: var(--color-surface-secondary);
-}
-
-._4R_YnW_root[data-color="neutral"][data-variant="ghost"] {
-  --btn-bg: transparent;
-  --btn-text: var(--color-content-neutral-base);
-  --btn-border: transparent;
-}
-
-._4R_YnW_root[data-color="neutral"][data-variant="ghost"]:hover:not([disabled]) {
-  --btn-bg: var(--color-surface-secondary);
-}
-
-._4R_YnW_root[data-color="brand"][data-variant="filled"] {
-  --btn-bg: var(--color-action-brand-base);
-  --btn-text: var(--color-on-brand);
-  --btn-border: transparent;
-}
-
-._4R_YnW_root[data-color="brand"][data-variant="filled"]:hover:not([disabled]) {
-  --btn-bg: var(--color-action-brand-hover);
-}
-
-._4R_YnW_root[data-color="brand"][data-variant="filled"]:active:not([disabled]) {
-  --btn-bg: var(--color-action-brand-active);
-}
-
-._4R_YnW_root[data-color="brand"][data-variant="outlined"] {
-  --btn-bg: transparent;
-  --btn-text: var(--color-content-brand-base);
-  --btn-border: var(--color-content-brand-base);
-}
-
-._4R_YnW_root[data-color="brand"][data-variant="outlined"]:hover:not([disabled]) {
-  --btn-bg: var(--color-surface-secondary);
-}
-
-._4R_YnW_root[data-color="brand"][data-variant="ghost"] {
-  --btn-bg: transparent;
-  --btn-text: var(--color-content-brand-base);
-  --btn-border: transparent;
-}
-
-._4R_YnW_root[data-color="brand"][data-variant="ghost"]:hover:not([disabled]) {
-  --btn-bg: var(--color-surface-secondary);
-}
-
-._4R_YnW_root[data-color="positive"][data-variant="filled"] {
-  --btn-bg: var(--color-action-positive-base);
-  --btn-text: var(--color-on-positive);
-  --btn-border: transparent;
-}
-
-._4R_YnW_root[data-color="positive"][data-variant="filled"]:hover:not([disabled]) {
-  --btn-bg: var(--color-action-positive-hover);
-}
-
-._4R_YnW_root[data-color="positive"][data-variant="filled"]:active:not([disabled]) {
-  --btn-bg: var(--color-action-positive-active);
-}
-
-._4R_YnW_root[data-color="positive"][data-variant="outlined"] {
-  --btn-bg: transparent;
-  --btn-text: var(--color-content-positive-base);
-  --btn-border: var(--color-content-positive-base);
-}
-
-._4R_YnW_root[data-color="positive"][data-variant="outlined"]:hover:not([disabled]) {
-  --btn-bg: var(--color-surface-secondary);
-}
-
-._4R_YnW_root[data-color="positive"][data-variant="ghost"] {
-  --btn-bg: transparent;
-  --btn-text: var(--color-content-positive-base);
-  --btn-border: transparent;
-}
-
-._4R_YnW_root[data-color="positive"][data-variant="ghost"]:hover:not([disabled]) {
-  --btn-bg: var(--color-surface-secondary);
-}
-
-._4R_YnW_root[data-color="negative"][data-variant="filled"] {
-  --btn-bg: var(--color-action-negative-base);
-  --btn-text: var(--color-on-negative);
-  --btn-border: transparent;
-}
-
-._4R_YnW_root[data-color="negative"][data-variant="filled"]:hover:not([disabled]) {
-  --btn-bg: var(--color-action-negative-hover);
-}
-
-._4R_YnW_root[data-color="negative"][data-variant="filled"]:active:not([disabled]) {
-  --btn-bg: var(--color-action-negative-active);
-}
-
-._4R_YnW_root[data-color="negative"][data-variant="outlined"] {
-  --btn-bg: transparent;
-  --btn-text: var(--color-content-negative-base);
-  --btn-border: var(--color-content-negative-base);
-}
-
-._4R_YnW_root[data-color="negative"][data-variant="outlined"]:hover:not([disabled]) {
-  --btn-bg: var(--color-surface-secondary);
-}
-
-._4R_YnW_root[data-color="negative"][data-variant="ghost"] {
-  --btn-bg: transparent;
-  --btn-text: var(--color-content-negative-base);
-  --btn-border: transparent;
-}
-
-._4R_YnW_root[data-color="negative"][data-variant="ghost"]:hover:not([disabled]) {
-  --btn-bg: var(--color-surface-secondary);
-}
-
-._4R_YnW_root[data-color="warn"][data-variant="filled"] {
-  --btn-bg: var(--color-action-warn-base);
-  --btn-text: var(--color-on-warn);
-  --btn-border: transparent;
-}
-
-._4R_YnW_root[data-color="warn"][data-variant="filled"]:hover:not([disabled]) {
-  --btn-bg: var(--color-action-warn-hover);
-}
-
-._4R_YnW_root[data-color="warn"][data-variant="filled"]:active:not([disabled]) {
-  --btn-bg: var(--color-action-warn-active);
-}
-
-._4R_YnW_root[data-color="warn"][data-variant="outlined"] {
-  --btn-bg: transparent;
-  --btn-text: var(--color-content-warn-base);
-  --btn-border: var(--color-content-warn-base);
-}
-
-._4R_YnW_root[data-color="warn"][data-variant="outlined"]:hover:not([disabled]) {
-  --btn-bg: var(--color-surface-secondary);
-}
-
-._4R_YnW_root[data-color="warn"][data-variant="ghost"] {
-  --btn-bg: transparent;
-  --btn-text: var(--color-content-warn-base);
-  --btn-border: transparent;
-}
-
-._4R_YnW_root[data-color="warn"][data-variant="ghost"]:hover:not([disabled]) {
-  --btn-bg: var(--color-surface-secondary);
-}
-
-._4R_YnW_root[data-color="info"][data-variant="filled"] {
-  --btn-bg: var(--color-action-info-base);
-  --btn-text: var(--color-on-info);
-  --btn-border: transparent;
-}
-
-._4R_YnW_root[data-color="info"][data-variant="filled"]:hover:not([disabled]) {
-  --btn-bg: var(--color-action-info-hover);
-}
-
-._4R_YnW_root[data-color="info"][data-variant="filled"]:active:not([disabled]) {
-  --btn-bg: var(--color-action-info-active);
-}
-
-._4R_YnW_root[data-color="info"][data-variant="outlined"] {
-  --btn-bg: transparent;
-  --btn-text: var(--color-content-info-base);
-  --btn-border: var(--color-content-info-base);
-}
-
-._4R_YnW_root[data-color="info"][data-variant="outlined"]:hover:not([disabled]) {
-  --btn-bg: var(--color-surface-secondary);
-}
-
-._4R_YnW_root[data-color="info"][data-variant="ghost"] {
-  --btn-bg: transparent;
-  --btn-text: var(--color-content-info-base);
-  --btn-border: transparent;
-}
-
-._4R_YnW_root[data-color="info"][data-variant="ghost"]:hover:not([disabled]) {
-  --btn-bg: var(--color-surface-secondary);
-}
+._4R_YnW_root{box-sizing:border-box;cursor:pointer;user-select:none;font-family:var(--typography-typeface-ltr);font-weight:var(--typography-body-2-weight);border-radius:var(--radius-md);height:var(--btn-height);padding:0 var(--btn-padding-x);font-size:var(--btn-font-size);background-color:var(--btn-bg);color:var(--btn-text);border:none;border:1px solid var(--btn-border);outline:none;justify-content:center;align-items:center;text-decoration:none;transition:background-color .2s,color .2s,border-color .2s,opacity .2s;display:inline-flex}._4R_YnW_root[data-size=sm]{--btn-height:1.5rem;--btn-icon-size:1rem;--btn-padding-x:var(--spacing-sm);--btn-font-size:var(--typography-body-2-size)}._4R_YnW_root[data-size=md]{--btn-height:2rem;--btn-icon-size:1.5rem;--btn-padding-x:var(--spacing-md);--btn-font-size:var(--typography-body-2-size)}._4R_YnW_root[data-size=lg]{--btn-height:2.5rem;--btn-icon-size:2rem;--btn-padding-x:var(--spacing-lg);--btn-font-size:var(--typography-body-1-size)}._4R_YnW_root[data-fluid]{width:100%}._4R_YnW_root:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}._4R_YnW_root[disabled],._4R_YnW_root[data-disabled]{cursor:not-allowed;opacity:.5}._4R_YnW_root[data-color=neutral][data-variant=filled]{--btn-bg:var(--color-action-neutral-base);--btn-text:var(--color-on-neutral);--btn-border:transparent}._4R_YnW_root[data-color=neutral][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-neutral-hover)}._4R_YnW_root[data-color=neutral][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-neutral-active)}._4R_YnW_root[data-color=neutral][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-neutral-base);--btn-border:var(--color-content-neutral-base)}._4R_YnW_root[data-color=neutral][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=neutral][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-neutral-base);--btn-border:transparent}._4R_YnW_root[data-color=neutral][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=brand][data-variant=filled]{--btn-bg:var(--color-action-brand-base);--btn-text:var(--color-on-brand);--btn-border:transparent}._4R_YnW_root[data-color=brand][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-brand-hover)}._4R_YnW_root[data-color=brand][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-brand-active)}._4R_YnW_root[data-color=brand][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-brand-base);--btn-border:var(--color-content-brand-base)}._4R_YnW_root[data-color=brand][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=brand][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-brand-base);--btn-border:transparent}._4R_YnW_root[data-color=brand][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=positive][data-variant=filled]{--btn-bg:var(--color-action-positive-base);--btn-text:var(--color-on-positive);--btn-border:transparent}._4R_YnW_root[data-color=positive][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-positive-hover)}._4R_YnW_root[data-color=positive][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-positive-active)}._4R_YnW_root[data-color=positive][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-positive-base);--btn-border:var(--color-content-positive-base)}._4R_YnW_root[data-color=positive][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=positive][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-positive-base);--btn-border:transparent}._4R_YnW_root[data-color=positive][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=negative][data-variant=filled]{--btn-bg:var(--color-action-negative-base);--btn-text:var(--color-on-negative);--btn-border:transparent}._4R_YnW_root[data-color=negative][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-negative-hover)}._4R_YnW_root[data-color=negative][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-negative-active)}._4R_YnW_root[data-color=negative][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-negative-base);--btn-border:var(--color-content-negative-base)}._4R_YnW_root[data-color=negative][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=negative][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-negative-base);--btn-border:transparent}._4R_YnW_root[data-color=negative][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=warn][data-variant=filled]{--btn-bg:var(--color-action-warn-base);--btn-text:var(--color-on-warn);--btn-border:transparent}._4R_YnW_root[data-color=warn][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-warn-hover)}._4R_YnW_root[data-color=warn][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-warn-active)}._4R_YnW_root[data-color=warn][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-warn-base);--btn-border:var(--color-content-warn-base)}._4R_YnW_root[data-color=warn][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=warn][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-warn-base);--btn-border:transparent}._4R_YnW_root[data-color=warn][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=info][data-variant=filled]{--btn-bg:var(--color-action-info-base);--btn-text:var(--color-on-info);--btn-border:transparent}._4R_YnW_root[data-color=info][data-variant=filled]:hover:not([disabled]){--btn-bg:var(--color-action-info-hover)}._4R_YnW_root[data-color=info][data-variant=filled]:active:not([disabled]){--btn-bg:var(--color-action-info-active)}._4R_YnW_root[data-color=info][data-variant=outlined]{--btn-bg:transparent;--btn-text:var(--color-content-info-base);--btn-border:var(--color-content-info-base)}._4R_YnW_root[data-color=info][data-variant=outlined]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}._4R_YnW_root[data-color=info][data-variant=ghost]{--btn-bg:transparent;--btn-text:var(--color-content-info-base);--btn-border:transparent}._4R_YnW_root[data-color=info][data-variant=ghost]:hover:not([disabled]){--btn-bg:var(--color-surface-secondary)}

package/dist/internals/base-button/base-button.d.ts

@@ -1,8 +1,8 @@
-import * as React from "react";
+import * as React$1 from "react";
 import { Button } from "@base-ui/react/button";
 
 //#region src/internals/base-button/base-button.d.ts
-interface BaseButtonProps extends React.ComponentPropsWithoutRef<typeof Button> {
+interface BaseButtonProps extends React$1.ComponentPropsWithoutRef<typeof Button> {
   /** The visual style of the button. */
   variant?: "filled" | "outlined" | "ghost";
   /** The semantic color palette applied to the button. */

package/dist/internals/base-button/base-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.js","names":["BaseUIButton","styles"],"sources":["../../../src/internals/base-button/base-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button as BaseUIButton } from \"@base-ui/react/button\";\nimport styles from \"./base-button.module.css\";\n\nexport interface BaseButtonProps extends React.ComponentPropsWithoutRef<\n  typeof BaseUIButton\n> {\n  /** The visual style of the button. */\n  variant?: \"filled\" | \"outlined\" | \"ghost\";\n  /** The semantic color palette applied to the button. */\n  color?: \"neutral\" | \"brand\" | \"positive\" | \"negative\" | \"warn\" | \"info\";\n  /** The size of the button, affecting height, padding, and font size. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** If true, the button is in a loading state and becomes disabled. */\n  pending?: boolean;\n  /** If true, the button will take up 100% of its container's width. */\n  fluid?: boolean;\n}\n\nexport const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(\n  (props, ref) => {\n    const {\n      className,\n      variant = \"filled\",\n      color = \"neutral\",\n      size = \"md\",\n      pending = false,\n      fluid = false,\n      disabled,\n      children,\n      ...rest\n    } = props;\n\n    return (\n      <BaseUIButton\n        ref={ref}\n        className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n        data-variant={variant}\n        data-color={color}\n        data-size={size}\n        data-pending={pending ? \"\" : undefined}\n        data-fluid={fluid ? \"\" : undefined}\n        disabled={disabled || pending}\n        {...rest}\n      >\n        {children}\n      </BaseUIButton>\n    );\n  },\n);\n"],"mappings":"sJAmBA,MAAa,EAAa,EAAM,YAC7B,EAAO,IAAQ,CACd,GAAM,CACJ,YACA,UAAU,SACV,QAAQ,UACR,OAAO,KACP,UAAU,GACV,QAAQ,GACR,WACA,WACA,GAAG,GACD,EAEJ,OACE,EAACA,EAAD,CACO,MACL,UAAW,GAAGC,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,eAAc,EACd,aAAY,EACZ,YAAW,EACX,eAAc,EAAU,GAAK,IAAA,GAC7B,aAAY,EAAQ,GAAK,IAAA,GACzB,SAAU,GAAY,EACtB,GAAI,EAEH,UACW,CAAA,CAElB,CACF"}
+{"version":3,"file":"base-button.js","names":["React","BaseUIButton","styles"],"sources":["../../../src/internals/base-button/base-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Button as BaseUIButton } from \"@base-ui/react/button\";\nimport styles from \"./base-button.module.css\";\n\nexport interface BaseButtonProps extends React.ComponentPropsWithoutRef<\n  typeof BaseUIButton\n> {\n  /** The visual style of the button. */\n  variant?: \"filled\" | \"outlined\" | \"ghost\";\n  /** The semantic color palette applied to the button. */\n  color?: \"neutral\" | \"brand\" | \"positive\" | \"negative\" | \"warn\" | \"info\";\n  /** The size of the button, affecting height, padding, and font size. */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /** If true, the button is in a loading state and becomes disabled. */\n  pending?: boolean;\n  /** If true, the button will take up 100% of its container's width. */\n  fluid?: boolean;\n}\n\nexport const BaseButton = React.forwardRef<HTMLButtonElement, BaseButtonProps>(\n  (props, ref) => {\n    const {\n      className,\n      variant = \"filled\",\n      color = \"neutral\",\n      size = \"md\",\n      pending = false,\n      fluid = false,\n      disabled,\n      children,\n      ...rest\n    } = props;\n\n    return (\n      <BaseUIButton\n        ref={ref}\n        className={`${styles[\"root\"]} ${className || \"\"}`.trim()}\n        data-variant={variant}\n        data-color={color}\n        data-size={size}\n        data-pending={pending ? \"\" : undefined}\n        data-fluid={fluid ? \"\" : undefined}\n        disabled={disabled || pending}\n        {...rest}\n      >\n        {children}\n      </BaseUIButton>\n    );\n  },\n);\n"],"mappings":"sJAmBA,MAAa,EAAaA,EAAM,YAC7B,EAAO,IAAQ,CACd,GAAM,CACJ,YACA,UAAU,SACV,QAAQ,UACR,OAAO,KACP,UAAU,GACV,QAAQ,GACR,WACA,WACA,GAAG,GACD,EAEJ,OACE,EAACC,EAAD,CACO,MACL,UAAW,GAAGC,EAAO,KAAQ,GAAG,GAAa,KAAK,KAAK,EACvD,eAAc,EACd,aAAY,EACZ,YAAW,EACX,eAAc,EAAU,GAAK,IAAA,GAC7B,aAAY,EAAQ,GAAK,IAAA,GACzB,SAAU,GAAY,EACtB,GAAI,EAEH,UACW,CAAA,CAElB,CACF"}

package/dist/internals/base-button/base-button.module.js

@@ -1,2 +1,3 @@
+import './base-button.css';
 var e={root:`_4R_YnW_root`};export{e as default};
 //# sourceMappingURL=base-button.module.js.map

package/dist/internals/base-button/base-button.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-button.module.js","names":[],"sources":["../../../src/internals/base-button/base-button.module.css"],"sourcesContent":[".root {\n  /* 1. Map internal variables to CSS properties */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  outline: none;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  font-family: var(--typography-typeface-ltr);\n  font-weight: var(--typography-body-2-weight);\n  border-radius: var(--radius-full);\n  transition:\n    background-color 0.2s,\n    color 0.2s,\n    border-color 0.2s,\n    opacity 0.2s;\n\n  /* Apply local variables */\n  height: var(--btn-height);\n  padding: 0 var(--btn-padding-x);\n  font-size: var(--btn-font-size);\n  background-color: var(--btn-bg);\n  color: var(--btn-text);\n  border: 1px solid var(--btn-border);\n}\n\n/* --- Sizes --- */\n.root[data-size=\"sm\"] {\n  --btn-height: 1.5rem;\n  --btn-icon-size: 1rem;\n  --btn-padding-x: var(--spacing-sm);\n  --btn-font-size: var(--typography-body-2-size);\n}\n\n.root[data-size=\"md\"] {\n  --btn-height: 2rem;\n  --btn-icon-size: 1.5rem;\n  --btn-padding-x: var(--spacing-md);\n  --btn-font-size: var(--typography-body-2-size);\n}\n\n.root[data-size=\"lg\"] {\n  --btn-height: 2.5rem;\n  --btn-icon-size: 2rem;\n  --btn-padding-x: var(--spacing-lg);\n  --btn-font-size: var(--typography-body-1-size);\n}\n\n/* --- Layout Modifiers --- */\n.root[data-fluid] {\n  width: 100%;\n}\n\n/* --- Focus Ring (Base UI provides data-focus-visible) --- */\n.root:focus-visible {\n  outline-style: solid;\n  outline-width: var(--stroke-focus-ring);\n  outline-color: var(--color-action-info-base);\n  outline-offset: var(--spacing-xxs);\n}\n\n/* --- Disabled State --- */\n.root[disabled],\n.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* --- Variants & Colors: BRAND Example --- */\n/* (You would duplicate this block for neutral, positive, negative, etc.) */\n\n/* Brand Filled */\n.root[data-color=\"brand\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-brand-base);\n  --btn-text: var(--color-on-brand);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-brand-hover);\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-brand-active);\n}\n\n/* Brand Outlined */\n.root[data-color=\"brand\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: var(--color-content-brand-base);\n}\n.root[data-color=\"brand\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Ghost */\n.root[data-color=\"brand\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* --- Variants & Colors --- */\n\n/* Neutral Filled */\n.root[data-color=\"neutral\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-neutral-base);\n  --btn-text: var(--color-on-neutral);\n  --btn-border: transparent;\n}\n.root[data-color=\"neutral\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-neutral-hover);\n}\n.root[data-color=\"neutral\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-neutral-active);\n}\n\n/* Neutral Outlined */\n.root[data-color=\"neutral\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-neutral-base);\n  --btn-border: var(--color-content-neutral-base);\n}\n.root[data-color=\"neutral\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Neutral Ghost */\n.root[data-color=\"neutral\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-neutral-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"neutral\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Filled */\n.root[data-color=\"brand\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-brand-base);\n  --btn-text: var(--color-on-brand);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-brand-hover);\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-brand-active);\n}\n\n/* Brand Outlined */\n.root[data-color=\"brand\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: var(--color-content-brand-base);\n}\n.root[data-color=\"brand\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Ghost */\n.root[data-color=\"brand\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Positive Filled */\n.root[data-color=\"positive\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-positive-base);\n  --btn-text: var(--color-on-positive);\n  --btn-border: transparent;\n}\n.root[data-color=\"positive\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-positive-hover);\n}\n.root[data-color=\"positive\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-positive-active);\n}\n\n/* Positive Outlined */\n.root[data-color=\"positive\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-positive-base);\n  --btn-border: var(--color-content-positive-base);\n}\n.root[data-color=\"positive\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Positive Ghost */\n.root[data-color=\"positive\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-positive-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"positive\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Negative Filled */\n.root[data-color=\"negative\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-negative-base);\n  --btn-text: var(--color-on-negative);\n  --btn-border: transparent;\n}\n.root[data-color=\"negative\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-negative-hover);\n}\n.root[data-color=\"negative\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-negative-active);\n}\n\n/* Negative Outlined */\n.root[data-color=\"negative\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-negative-base);\n  --btn-border: var(--color-content-negative-base);\n}\n.root[data-color=\"negative\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Negative Ghost */\n.root[data-color=\"negative\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-negative-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"negative\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Warn Filled */\n.root[data-color=\"warn\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-warn-base);\n  --btn-text: var(--color-on-warn);\n  --btn-border: transparent;\n}\n.root[data-color=\"warn\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-warn-hover);\n}\n.root[data-color=\"warn\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-warn-active);\n}\n\n/* Warn Outlined */\n.root[data-color=\"warn\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-warn-base);\n  --btn-border: var(--color-content-warn-base);\n}\n.root[data-color=\"warn\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Warn Ghost */\n.root[data-color=\"warn\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-warn-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"warn\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Info Filled */\n.root[data-color=\"info\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-info-base);\n  --btn-text: var(--color-on-info);\n  --btn-border: transparent;\n}\n.root[data-color=\"info\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-info-hover);\n}\n.root[data-color=\"info\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-info-active);\n}\n\n/* Info Outlined */\n.root[data-color=\"info\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-info-base);\n  --btn-border: var(--color-content-info-base);\n}\n.root[data-color=\"info\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Info Ghost */\n.root[data-color=\"info\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-info-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"info\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n"],"mappings":"AAEA,IAAA,EAAU,CAAA,KAAO,cAAA"}
+{"version":3,"file":"base-button.module.js","names":[],"sources":["../../../src/internals/base-button/base-button.module.css"],"sourcesContent":[".root {\n  /* 1. Map internal variables to CSS properties */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  outline: none;\n  border: none;\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  font-family: var(--typography-typeface-ltr);\n  font-weight: var(--typography-body-2-weight);\n  border-radius: var(--radius-md);\n  transition:\n    background-color 0.2s,\n    color 0.2s,\n    border-color 0.2s,\n    opacity 0.2s;\n\n  /* Apply local variables */\n  height: var(--btn-height);\n  padding: 0 var(--btn-padding-x);\n  font-size: var(--btn-font-size);\n  background-color: var(--btn-bg);\n  color: var(--btn-text);\n  border: 1px solid var(--btn-border);\n}\n\n/* --- Sizes --- */\n.root[data-size=\"sm\"] {\n  --btn-height: 1.5rem;\n  --btn-icon-size: 1rem;\n  --btn-padding-x: var(--spacing-sm);\n  --btn-font-size: var(--typography-body-2-size);\n}\n\n.root[data-size=\"md\"] {\n  --btn-height: 2rem;\n  --btn-icon-size: 1.5rem;\n  --btn-padding-x: var(--spacing-md);\n  --btn-font-size: var(--typography-body-2-size);\n}\n\n.root[data-size=\"lg\"] {\n  --btn-height: 2.5rem;\n  --btn-icon-size: 2rem;\n  --btn-padding-x: var(--spacing-lg);\n  --btn-font-size: var(--typography-body-1-size);\n}\n\n/* --- Layout Modifiers --- */\n.root[data-fluid] {\n  width: 100%;\n}\n\n/* --- Focus Ring (Base UI provides data-focus-visible) --- */\n.root:focus-visible {\n  outline-style: solid;\n  outline-width: var(--stroke-focus-ring);\n  outline-color: var(--color-action-info-base);\n  outline-offset: var(--spacing-xxs);\n}\n\n/* --- Disabled State --- */\n.root[disabled],\n.root[data-disabled] {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n\n/* --- Variants & Colors: BRAND Example --- */\n/* (You would duplicate this block for neutral, positive, negative, etc.) */\n\n/* Brand Filled */\n.root[data-color=\"brand\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-brand-base);\n  --btn-text: var(--color-on-brand);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-brand-hover);\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-brand-active);\n}\n\n/* Brand Outlined */\n.root[data-color=\"brand\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: var(--color-content-brand-base);\n}\n.root[data-color=\"brand\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Ghost */\n.root[data-color=\"brand\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* --- Variants & Colors --- */\n\n/* Neutral Filled */\n.root[data-color=\"neutral\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-neutral-base);\n  --btn-text: var(--color-on-neutral);\n  --btn-border: transparent;\n}\n.root[data-color=\"neutral\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-neutral-hover);\n}\n.root[data-color=\"neutral\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-neutral-active);\n}\n\n/* Neutral Outlined */\n.root[data-color=\"neutral\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-neutral-base);\n  --btn-border: var(--color-content-neutral-base);\n}\n.root[data-color=\"neutral\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Neutral Ghost */\n.root[data-color=\"neutral\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-neutral-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"neutral\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Filled */\n.root[data-color=\"brand\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-brand-base);\n  --btn-text: var(--color-on-brand);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-brand-hover);\n}\n.root[data-color=\"brand\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-brand-active);\n}\n\n/* Brand Outlined */\n.root[data-color=\"brand\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: var(--color-content-brand-base);\n}\n.root[data-color=\"brand\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Brand Ghost */\n.root[data-color=\"brand\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-brand-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"brand\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Positive Filled */\n.root[data-color=\"positive\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-positive-base);\n  --btn-text: var(--color-on-positive);\n  --btn-border: transparent;\n}\n.root[data-color=\"positive\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-positive-hover);\n}\n.root[data-color=\"positive\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-positive-active);\n}\n\n/* Positive Outlined */\n.root[data-color=\"positive\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-positive-base);\n  --btn-border: var(--color-content-positive-base);\n}\n.root[data-color=\"positive\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Positive Ghost */\n.root[data-color=\"positive\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-positive-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"positive\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Negative Filled */\n.root[data-color=\"negative\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-negative-base);\n  --btn-text: var(--color-on-negative);\n  --btn-border: transparent;\n}\n.root[data-color=\"negative\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-negative-hover);\n}\n.root[data-color=\"negative\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-negative-active);\n}\n\n/* Negative Outlined */\n.root[data-color=\"negative\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-negative-base);\n  --btn-border: var(--color-content-negative-base);\n}\n.root[data-color=\"negative\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Negative Ghost */\n.root[data-color=\"negative\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-negative-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"negative\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Warn Filled */\n.root[data-color=\"warn\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-warn-base);\n  --btn-text: var(--color-on-warn);\n  --btn-border: transparent;\n}\n.root[data-color=\"warn\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-warn-hover);\n}\n.root[data-color=\"warn\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-warn-active);\n}\n\n/* Warn Outlined */\n.root[data-color=\"warn\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-warn-base);\n  --btn-border: var(--color-content-warn-base);\n}\n.root[data-color=\"warn\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Warn Ghost */\n.root[data-color=\"warn\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-warn-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"warn\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Info Filled */\n.root[data-color=\"info\"][data-variant=\"filled\"] {\n  --btn-bg: var(--color-action-info-base);\n  --btn-text: var(--color-on-info);\n  --btn-border: transparent;\n}\n.root[data-color=\"info\"][data-variant=\"filled\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-action-info-hover);\n}\n.root[data-color=\"info\"][data-variant=\"filled\"]:active:not([disabled]) {\n  --btn-bg: var(--color-action-info-active);\n}\n\n/* Info Outlined */\n.root[data-color=\"info\"][data-variant=\"outlined\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-info-base);\n  --btn-border: var(--color-content-info-base);\n}\n.root[data-color=\"info\"][data-variant=\"outlined\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n\n/* Info Ghost */\n.root[data-color=\"info\"][data-variant=\"ghost\"] {\n  --btn-bg: transparent;\n  --btn-text: var(--color-content-info-base);\n  --btn-border: transparent;\n}\n.root[data-color=\"info\"][data-variant=\"ghost\"]:hover:not([disabled]) {\n  --btn-bg: var(--color-surface-secondary);\n}\n"],"mappings":""}

package/dist/internals/base-dialog/base-dialog.css

@@ -1,74 +1 @@
-._9nsqjG_backdrop {
-  background-color: var(--color-surface-backdrop-overlay);
-  backdrop-filter: blur(.5rem);
-  z-index: 1000;
-  transition: opacity .2s;
-  position: fixed;
-  inset: 0;
-
-  &[data-starting-style], &[data-ending-style] {
-    opacity: 0;
-  }
-}
-
-._9nsqjG_popup {
-  --background: var(--color-surface-base);
-  --foreground: var(--color-content-neutral-base);
-  --border: var(--color-border-primary);
-  z-index: 1010;
-  box-sizing: border-box;
-  background-color: var(--background);
-  width: calc(100vw - 2rem);
-  max-width: 28rem;
-  color: var(--foreground);
-  border: 1px solid var(--border);
-  border-radius: var(--spacing-sm);
-  padding: var(--spacing-xl);
-  gap: var(--spacing-md);
-  flex-direction: column;
-  transition: opacity .2s cubic-bezier(.22, 1, .36, 1), transform .2s cubic-bezier(.22, 1, .36, 1);
-  display: flex;
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-
-  &[data-starting-style], &[data-ending-style] {
-    opacity: 0;
-    transform: translate(-50%, -46%);
-  }
-
-  &:focus-visible {
-    outline-style: solid;
-    outline-width: var(--stroke-focus-ring);
-    outline-color: var(--color-action-info-base);
-    outline-offset: var(--spacing-xxs);
-  }
-
-  &[data-variant="neutral"] {
-    --border: var(--color-action-neutral-muted);
-  }
-
-  &[data-variant="positive"] {
-    --border: var(--color-action-positive-muted);
-  }
-
-  &[data-variant="negative"] {
-    --border: var(--color-action-negative-muted);
-  }
-
-  &[data-variant="warn"] {
-    --border: var(--color-action-warn-muted);
-  }
-
-  &[data-variant="info"] {
-    --border: var(--color-action-info-muted);
-  }
-}
-
-._9nsqjG_actions {
-  justify-content: flex-end;
-  gap: var(--spacing-sm);
-  margin-top: var(--spacing-xs);
-  display: flex;
-}
+._9nsqjG_backdrop{background-color:var(--color-surface-backdrop-overlay);backdrop-filter:blur(.5rem);z-index:1000;transition:opacity .2s;position:fixed;inset:0;&[data-starting-style],&[data-ending-style]{opacity:0}}._9nsqjG_popup{--background:var(--color-surface-base);--foreground:var(--color-content-neutral-base);--border:var(--color-border-primary);z-index:1010;box-sizing:border-box;background-color:var(--background);width:calc(100vw - 2rem);max-width:28rem;color:var(--foreground);border:1px solid var(--border);border-radius:var(--spacing-sm);padding:var(--spacing-xl);gap:var(--spacing-md);flex-direction:column;transition:opacity .2s cubic-bezier(.22,1,.36,1),transform .2s cubic-bezier(.22,1,.36,1);display:flex;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);&[data-starting-style],&[data-ending-style]{opacity:0;transform:translate(-50%,-46%)}&:focus-visible{outline-style:solid;outline-width:var(--stroke-focus-ring);outline-color:var(--color-action-info-base);outline-offset:var(--spacing-xxs)}&[data-variant=neutral]{--border:var(--color-action-neutral-muted)}&[data-variant=positive]{--border:var(--color-action-positive-muted)}&[data-variant=negative]{--border:var(--color-action-negative-muted)}&[data-variant=warn]{--border:var(--color-action-warn-muted)}&[data-variant=info]{--border:var(--color-action-info-muted)}}._9nsqjG_actions{justify-content:flex-end;gap:var(--spacing-sm);margin-top:var(--spacing-xs);display:flex}

package/dist/internals/base-dialog/base-dialog.module.js

@@ -1,2 +1,3 @@
+import './base-dialog.css';
 var e={actions:`_9nsqjG_actions`,backdrop:`_9nsqjG_backdrop`,popup:`_9nsqjG_popup`};export{e as default};
 //# sourceMappingURL=base-dialog.module.js.map

package/dist/internals/base-field/base-field.css

@@ -1,115 +1 @@
-._usQlq_root {
-  align-items: start;
-  gap: var(--field-gap);
-  font-family: var(--typography-typeface-ltr);
-  --field-required-color: var(--color-content-negative-base);
-  --field-control-radius: 0;
-  --field-control-bg-color: var(--color-surface-base);
-  --field-control-text-color: var(--color-content-neutral-base);
-  --field-label-color: var(--color-content-neutral-secondary);
-  --field-control-border-color: var(--color-border-secondary);
-  --field-control-placeholder-color: var(--color-content-neutral-muted);
-  flex-direction: column;
-  width: 100%;
-  display: flex;
-}
-
-._usQlq_root[data-size="sm"] {
-  --field-gap: var(--spacing-sm);
-  --field-label-font-size: var(--typography-caption-base-size);
-  --field-label-line-height: var(--typography-caption-base-height);
-  --field-label-font-weight: var(--typography-caption-base-weight);
-  --helper-font-size: var(--typography-caption-base-size);
-  --helper-line-height: var(--typography-caption-base-height);
-  --field-control-height: 2rem;
-  --field-control-icon-size: 1.5rem;
-  --field-control-font-size: var(--typography-caption-base-size);
-  --field-control-line-height: var(--typography-caption-base-height);
-  --field-control-font-weight: var(--typography-caption-base-weight);
-}
-
-._usQlq_root[data-size="md"] {
-  --field-gap: var(--spacing-md);
-  --field-label-font-size: var(--typography-body-2-size);
-  --field-label-line-height: var(--typography-body-2-height);
-  --field-label-font-weight: var(--typography-body-2-weight);
-  --helper-font-size: var(--typography-caption-base-size);
-  --helper-line-height: var(--typography-caption-base-height);
-  --field-control-height: 2.5rem;
-  --field-control-icon-size: 2rem;
-  --field-control-font-size: var(--typography-body-2-size);
-  --field-control-line-height: var(--typography-body-2-height);
-  --field-control-font-weight: var(--typography-body-2-weight);
-}
-
-._usQlq_root[data-size="lg"] {
-  --field-gap: var(--spacing-md);
-  --field-label-font-size: var(--typography-body-1-size);
-  --field-label-line-height: var(--typography-body-1-height);
-  --field-label-font-weight: var(--typography-body-1-weight);
-  --helper-font-size: var(--typography-body-2-size);
-  --helper-line-height: var(--typography-body-2-height);
-  --field-control-height: 3rem;
-  --field-control-icon-size: 2rem;
-  --field-control-font-size: var(--typography-body-1-size);
-  --field-control-line-height: var(--typography-body-1-height);
-  --field-control-font-weight: var(--typography-body-1-weight);
-}
-
-._usQlq_root[data-invalid] {
-  --field-control-text-color: var(--color-content-neutral-muted);
-  --field-label-color: var(--color-content-negative-muted);
-  --field-control-border-color: var(--color-content-negative-muted);
-  --field-required-color: var(--color-content-negative-muted);
-}
-
-._usQlq_label {
-  font-size: var(--field-label-font-size, var(--typography-body-2-size));
-  line-height: var(--field-label-line-height, var(--typography-body-2-height));
-  font-weight: var(--field-label-font-weight, var(--typography-body-2-weight));
-  color: var(--field-label-color);
-}
-
-._usQlq_root[data-disabled] {
-  --field-control-bg-color: var(--color-surface-tertiary);
-  --field-control-text-color: var(--color-content-neutral-muted);
-  --field-label-color: var(--color-content-neutral-muted);
-  --field-control-border-color: var(--color-border-secondary);
-  --field-required-color: var(--color-content-neutral-muted);
-  cursor: not-allowed;
-  user-select: none;
-}
-
-._usQlq_required {
-  color: var(--field-required-color);
-  margin-left: var(--spacing-xxs);
-}
-
-._usQlq_visually-hidden {
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  padding: 0;
-  position: absolute;
-  overflow: hidden;
-}
-
-._usQlq_error {
-  font-size: var(--helper-font-size);
-  line-height: var(--helper-line-height);
-  color: var(--color-content-negative-base);
-}
-
-._usQlq_description {
-  font-size: var(--helper-font-size);
-  line-height: var(--helper-line-height);
-  color: var(--color-content-neutral-secondary);
-  margin: 0;
-}
-
-._usQlq_description[data-disabled] {
-  color: var(--color-content-neutral-muted);
-}
+._usQlq_root{align-items:start;gap:var(--field-gap);font-family:var(--typography-typeface-ltr);--field-required-color:var(--color-content-negative-base);--field-control-radius:var(--radius-md);--field-control-bg-color:var(--color-surface-base);--field-control-text-color:var(--color-content-neutral-base);--field-label-color:var(--color-content-neutral-secondary);--field-control-border-color:var(--color-border-secondary);--field-control-placeholder-color:var(--color-content-neutral-muted);flex-direction:column;width:100%;display:flex}._usQlq_root[data-size=sm]{--field-gap:var(--spacing-xxs);--field-label-font-size:var(--typography-caption-base-size);--field-label-font-weight:var(--typography-caption-base-weight);--helper-font-size:var(--typography-caption-base-size);--field-control-height:1.5rem;--field-control-icon-size:1.5rem;--field-control-font-size:var(--typography-caption-base-size);--field-control-font-weight:var(--typography-caption-base-weight)}._usQlq_root[data-size=md]{--field-gap:var(--spacing-xs);--field-label-font-size:var(--typography-body-2-size);--field-label-font-weight:var(--typography-body-2-weight);--helper-font-size:var(--typography-caption-base-size);--field-control-height:2rem;--field-control-icon-size:2rem;--field-control-font-size:var(--typography-body-2-size);--field-control-font-weight:var(--typography-body-2-weight)}._usQlq_root[data-size=lg]{--field-gap:var(--spacing-xs);--field-label-font-size:var(--typography-body-1-size);--field-label-font-weight:var(--typography-body-1-weight);--helper-font-size:var(--typography-body-2-size);--field-control-height:2.5rem;--field-control-icon-size:2rem;--field-control-font-size:var(--typography-body-1-size);--field-control-font-weight:var(--typography-body-1-weight)}._usQlq_root[data-invalid]{--field-control-text-color:var(--color-content-neutral-muted);--field-label-color:var(--color-content-negative-base);--field-control-border-color:var(--color-content-negative-base);--field-required-color:var(--color-content-negative-base)}._usQlq_label{font-size:var(--field-label-font-size,var(--typography-body-2-size));font-weight:var(--field-label-font-weight,var(--typography-body-2-weight));color:var(--field-label-color)}._usQlq_root[data-disabled]{--field-control-bg-color:var(--color-surface-tertiary);--field-control-text-color:var(--color-content-neutral-muted);--field-label-color:var(--color-content-neutral-muted);--field-control-border-color:var(--color-border-secondary);--field-required-color:var(--color-content-neutral-muted);cursor:not-allowed;user-select:none}._usQlq_required{color:var(--field-required-color);margin-left:var(--spacing-xxs)}._usQlq_visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}._usQlq_error{font-size:var(--helper-font-size);color:var(--color-content-negative-base)}._usQlq_description{font-size:var(--helper-font-size);color:var(--color-content-neutral-secondary);margin:0}._usQlq_description[data-disabled]{color:var(--color-content-neutral-muted)}