@pantool/components 1.0.0-alpha.4 → 1.0.0-alpha.6

package/dist/helpers/flex/styles.css

@@ -0,0 +1 @@
+.VYIyxW_root{display:var(--display);gap:var(--gap);flex-direction:var(--direction);flex-wrap:var(--wrap-mode);justify-content:var(--justify-content);align-items:var(--align-items);align-content:var(--align-content)}.VYIyxW_root[data-variant=block]{--display:flex}.VYIyxW_root[data-variant=inline]{--display:inline-flex}.VYIyxW_root[data-gap=xxs]{--gap:var(--spacing-xxs)}.VYIyxW_root[data-gap=xs]{--gap:var(--spacing-xs)}.VYIyxW_root[data-gap=sm]{--gap:var(--spacing-sm)}.VYIyxW_root[data-gap=md]{--gap:var(--spacing-md)}.VYIyxW_root[data-gap=lg]{--gap:var(--spacing-lg)}.VYIyxW_root[data-gap=xl]{--gap:var(--spacing-xl)}.VYIyxW_root[data-gap=xxl]{--gap:var(--spacing-xxl)}.VYIyxW_root[data-direction=row]{--direction:row}.VYIyxW_root[data-direction=column]{--direction:column}.VYIyxW_root[data-direction=row-reverse]{--direction:row-reverse}.VYIyxW_root[data-direction=column-reverse]{--direction:column-reverse}.VYIyxW_root[data-wrap-mode=nowrap]{--wrap-mode:nowrap}.VYIyxW_root[data-wrap-mode=wrap]{--wrap-mode:wrap}.VYIyxW_root[data-wrap-mode=wrap-reverse]{--wrap-mode:wrap-reverse}.VYIyxW_root[data-justify-content=start]{--justify-content:flex-start}.VYIyxW_root[data-justify-content=end]{--justify-content:flex-end}.VYIyxW_root[data-justify-content=center]{--justify-content:center}.VYIyxW_root[data-justify-content=between]{--justify-content:space-between}.VYIyxW_root[data-justify-content=around]{--justify-content:space-around}.VYIyxW_root[data-justify-content=evenly]{--justify-content:space-evenly}.VYIyxW_root[data-align-items=start]{--align-items:flex-start}.VYIyxW_root[data-align-items=end]{--align-items:flex-end}.VYIyxW_root[data-align-items=center]{--align-items:center}.VYIyxW_root[data-align-items=baseline]{--align-items:baseline}.VYIyxW_root[data-align-items=stretch]{--align-items:stretch}.VYIyxW_root[data-align-content=start]{--align-content:flex-start}.VYIyxW_root[data-align-content=end]{--align-content:flex-end}.VYIyxW_root[data-align-content=center]{--align-content:center}.VYIyxW_root[data-align-content=between]{--align-content:space-between}.VYIyxW_root[data-align-content=around]{--align-content:space-around}.VYIyxW_root[data-align-content=evenly]{--align-content:space-evenly}.VYIyxW_root[data-align-content=stretch]{--align-content:stretch}

package/dist/helpers/flex/styles.module.js

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

package/dist/helpers/flex/styles.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.module.js","names":[],"sources":["../../../src/helpers/flex/styles.module.css"],"sourcesContent":[".root {\n  display: var(--display);\n  gap: var(--gap);\n  flex-direction: var(--direction);\n  flex-wrap: var(--wrap-mode);\n  justify-content: var(--justify-content);\n  align-items: var(--align-items);\n  align-content: var(--align-content);\n}\n\n.root[data-variant=\"block\"] {\n  --display: flex;\n}\n.root[data-variant=\"inline\"] {\n  --display: inline-flex;\n}\n\n/* gap */\n.root[data-gap=\"xxs\"] {\n  --gap: var(--spacing-xxs);\n}\n.root[data-gap=\"xs\"] {\n  --gap: var(--spacing-xs);\n}\n.root[data-gap=\"sm\"] {\n  --gap: var(--spacing-sm);\n}\n.root[data-gap=\"md\"] {\n  --gap: var(--spacing-md);\n}\n.root[data-gap=\"lg\"] {\n  --gap: var(--spacing-lg);\n}\n.root[data-gap=\"xl\"] {\n  --gap: var(--spacing-xl);\n}\n.root[data-gap=\"xxl\"] {\n  --gap: var(--spacing-xxl);\n}\n\n/* direction */\n.root[data-direction=\"row\"] {\n  --direction: row;\n}\n.root[data-direction=\"column\"] {\n  --direction: column;\n}\n.root[data-direction=\"row-reverse\"] {\n  --direction: row-reverse;\n}\n.root[data-direction=\"column-reverse\"] {\n  --direction: column-reverse;\n}\n\n/* wrap-mode */\n.root[data-wrap-mode=\"nowrap\"] {\n  --wrap-mode: nowrap;\n}\n.root[data-wrap-mode=\"wrap\"] {\n  --wrap-mode: wrap;\n}\n.root[data-wrap-mode=\"wrap-reverse\"] {\n  --wrap-mode: wrap-reverse;\n}\n\n/* justify-content */\n.root[data-justify-content=\"start\"] {\n  --justify-content: flex-start;\n}\n.root[data-justify-content=\"end\"] {\n  --justify-content: flex-end;\n}\n.root[data-justify-content=\"center\"] {\n  --justify-content: center;\n}\n.root[data-justify-content=\"between\"] {\n  --justify-content: space-between;\n}\n.root[data-justify-content=\"around\"] {\n  --justify-content: space-around;\n}\n.root[data-justify-content=\"evenly\"] {\n  --justify-content: space-evenly;\n}\n\n/* align-items */\n.root[data-align-items=\"start\"] {\n  --align-items: flex-start;\n}\n.root[data-align-items=\"end\"] {\n  --align-items: flex-end;\n}\n.root[data-align-items=\"center\"] {\n  --align-items: center;\n}\n.root[data-align-items=\"baseline\"] {\n  --align-items: baseline;\n}\n.root[data-align-items=\"stretch\"] {\n  --align-items: stretch;\n}\n\n/* align-content */\n.root[data-align-content=\"start\"] {\n  --align-content: flex-start;\n}\n.root[data-align-content=\"end\"] {\n  --align-content: flex-end;\n}\n.root[data-align-content=\"center\"] {\n  --align-content: center;\n}\n.root[data-align-content=\"between\"] {\n  --align-content: space-between;\n}\n.root[data-align-content=\"around\"] {\n  --align-content: space-around;\n}\n.root[data-align-content=\"evenly\"] {\n  --align-content: space-evenly;\n}\n.root[data-align-content=\"stretch\"] {\n  --align-content: stretch;\n}\n"],"mappings":""}

package/dist/helpers/index.d.ts

@@ -1,3 +1,4 @@
+import { Flex, FlexProps } from "./flex/flex.js";
 import { usePortalConfig } from "./portal/context/hooks.js";
 import { PortalConfigProvider } from "./portal/context/provider.js";
 import { Portal, PortalProps } from "./portal/portal.js";

package/dist/helpers/index.js

@@ -1 +1 @@
-import"./portal/context/hooks.js";import"./portal/context/provider.js";import"./portal/portal.js";import"./portal/index.js";
+import"./portal/context/hooks.js";import"./portal/context/provider.js";import"./portal/portal.js";import"./portal/index.js";import"./flex/flex.js";import"./flex/index.js";

package/dist/index.d.ts

@@ -1,11 +1,13 @@
 import { AlertDialog, AlertDialogProps } from "./atoms/alert-dialog/alert-dialog.js";
 import { Button, ButtonProps } from "./atoms/button/button.js";
 import { Checkbox, CheckboxProps } from "./atoms/checkbox/checkbox.js";
+import { Collapsible } from "./atoms/collapsible/collapsible.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 { Icon, IconProps } from "./atoms/icon/icon.js";
 import { Input, InputProps } from "./atoms/input/input.js";
 import { Radio, RadioGroup, RadioGroupProps, RadioProps } from "./atoms/radio/radio.js";
 import { Switch, SwitchProps } from "./atoms/switch/switch.js";
@@ -15,7 +17,7 @@ import { MergeElementProps, MergeElementPropsWithOmitted, PolymorphicProps, Poly
 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 { 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 +26,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, Button, ButtonProps, Checkbox, CheckboxProps, Collapsible, Combobox, ComboboxGroup, ComboboxProps, ConditionGuard, ConditionGuardProps, ContextMenu, Dialog, DialogContext, DialogProps, DialogProvider, DialogProviderProps, Flex, FlexProps, 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 };

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"./helpers/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{Icon as o}from"./atoms/icon/icon.js";import{Checkbox as s}from"./atoms/checkbox/checkbox.js";import{Collapsible as c}from"./atoms/collapsible/collapsible.js";import{Combobox as l}from"./atoms/combobox/combobox.js";import{ConditionGuard as u}from"./atoms/condition-guard/condition-guard.js";import{ContextMenu as d}from"./atoms/context-menu/context-menu.js";import{Dialog as f}from"./atoms/dialog/dialog.js";import{IconButton as p}from"./atoms/icon-button/icon-button.js";import{Input as m}from"./atoms/input/input.js";import{Radio as h,RadioGroup as g}from"./atoms/radio/radio.js";import{Switch as _}from"./atoms/switch/switch.js";import{Tabs as v,TabsList as y,TabsPanel as b,TabsTab as x}from"./atoms/tabs/tabs.js";import{Toast as S}from"./atoms/toast/toast.js";import{Tooltip as C,TooltipProvider as w}from"./atoms/tooltip/tooltip.js";import"./atoms/index.js";import{Flex as T}from"./helpers/flex/flex.js";import"./helpers/index.js";import{AlertDialogContext as E,AlertDialogProvider as D,showAlertDialog as O}from"./providers/alert-dialog-provider/alert-dialog-provider.js";import{useAlertDialog as k}from"./providers/alert-dialog-provider/hooks.js";import{DialogContext as A,DialogProvider as j,showDialog as M}from"./providers/dialog-provider/dialog-provider.js";import{useDialog as N}from"./providers/dialog-provider/hooks.js";import{ToastProvider as P,toaster as F}from"./providers/toast-provider/toast-provider.js";import"./providers/index.js";import"./types.js";export{a as AlertDialog,E as AlertDialogContext,D as AlertDialogProvider,e as Button,s as Checkbox,c as Collapsible,l as Combobox,u as ConditionGuard,d as ContextMenu,f as Dialog,A as DialogContext,j as DialogProvider,T as Flex,o as Icon,p as IconButton,m as Input,i as Portal,r as PortalConfigProvider,h as Radio,g as RadioGroup,_ as Switch,v as Tabs,y as TabsList,b as TabsPanel,x as TabsTab,t as Text,S as Toast,P as ToastProvider,C as Tooltip,w as TooltipProvider,O as showAlertDialog,M as showDialog,F as toaster,k as useAlertDialog,N 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-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)}

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-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":""}

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-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: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)}

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

@@ -1 +1 @@
-{"version":3,"file":"base-field.module.js","names":[],"sources":["../../../src/internals/base-field/base-field.module.css"],"sourcesContent":[".root {\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  gap: var(--field-gap);\n  font-family: var(--typography-typeface-ltr);\n  width: 100%;\n  --field-required-color: var(--color-content-negative-base);\n  --field-control-radius: 0;\n  --field-control-bg-color: var(--color-surface-base);\n  --field-control-text-color: var(--color-content-neutral-base);\n  --field-label-color: var(--color-content-neutral-secondary);\n  --field-control-border-color: var(--color-border-secondary);\n  --field-control-placeholder-color: var(--color-content-neutral-muted);\n}\n\n/* Size variants using data attributes */\n.root[data-size=\"sm\"] {\n  --field-gap: var(--spacing-sm);\n  --field-label-font-size: var(--typography-caption-base-size);\n  --field-label-line-height: var(--typography-caption-base-height);\n  --field-label-font-weight: var(--typography-caption-base-weight);\n  --helper-font-size: var(--typography-caption-base-size);\n  --helper-line-height: var(--typography-caption-base-height);\n  --field-control-height: 2rem;\n  --field-control-icon-size: 1.5rem;\n  --field-control-font-size: var(--typography-caption-base-size);\n  --field-control-line-height: var(--typography-caption-base-height);\n  --field-control-font-weight: var(--typography-caption-base-weight);\n}\n\n.root[data-size=\"md\"] {\n  --field-gap: var(--spacing-md);\n  --field-label-font-size: var(--typography-body-2-size);\n  --field-label-line-height: var(--typography-body-2-height);\n  --field-label-font-weight: var(--typography-body-2-weight);\n  --helper-font-size: var(--typography-caption-base-size);\n  --helper-line-height: var(--typography-caption-base-height);\n  --field-control-height: 2.5rem;\n  --field-control-icon-size: 2rem;\n  --field-control-font-size: var(--typography-body-2-size);\n  --field-control-line-height: var(--typography-body-2-height);\n  --field-control-font-weight: var(--typography-body-2-weight);\n}\n\n.root[data-size=\"lg\"] {\n  --field-gap: var(--spacing-md);\n  --field-label-font-size: var(--typography-body-1-size);\n  --field-label-line-height: var(--typography-body-1-height);\n  --field-label-font-weight: var(--typography-body-1-weight);\n  --helper-font-size: var(--typography-body-2-size);\n  --helper-line-height: var(--typography-body-2-height);\n  --field-control-height: 3rem;\n  --field-control-icon-size: 2rem;\n  --field-control-font-size: var(--typography-body-1-size);\n  --field-control-line-height: var(--typography-body-1-height);\n  --field-control-font-weight: var(--typography-body-1-weight);\n}\n\n.root[data-invalid] {\n  --field-control-text-color: var(--color-content-neutral-muted);\n  --field-label-color: var(--color-content-negative-muted);\n  --field-control-border-color: var(--color-content-negative-muted);\n  --field-required-color: var(--color-content-negative-muted);\n}\n\n.label {\n  font-size: var(--field-label-font-size, var(--typography-body-2-size));\n  line-height: var(--field-label-line-height, var(--typography-body-2-height));\n  font-weight: var(--field-label-font-weight, var(--typography-body-2-weight));\n  color: var(--field-label-color);\n}\n\n.root[data-disabled] {\n  --field-control-bg-color: var(--color-surface-tertiary);\n  --field-control-text-color: var(--color-content-neutral-muted);\n  --field-label-color: var(--color-content-neutral-muted);\n  --field-control-border-color: var(--color-border-secondary);\n  --field-required-color: var(--color-content-neutral-muted);\n  cursor: not-allowed;\n  user-select: none;\n}\n\n.required {\n  color: var(--field-required-color);\n  margin-left: var(--spacing-xxs);\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.error {\n  font-size: var(--helper-font-size);\n  line-height: var(--helper-line-height);\n  color: var(--color-content-negative-base);\n}\n\n.description {\n  font-size: var(--helper-font-size);\n  line-height: var(--helper-line-height);\n  color: var(--color-content-neutral-secondary);\n  margin: 0;\n}\n\n.description[data-disabled] {\n  color: var(--color-content-neutral-muted);\n}\n"],"mappings":"AAYA,IAAA,EAAU,CAAA,YAAA,qBAAA,MAAA,eAAA,MAAA,eAAA,SAAA,kBAAA,KAAA,cAAA,kBAAA,wBAAA"}
+{"version":3,"file":"base-field.module.js","names":[],"sources":["../../../src/internals/base-field/base-field.module.css"],"sourcesContent":[".root {\n  display: flex;\n  flex-direction: column;\n  align-items: start;\n  gap: var(--field-gap);\n  font-family: var(--typography-typeface-ltr);\n  width: 100%;\n  --field-required-color: var(--color-content-negative-base);\n  --field-control-radius: 0;\n  --field-control-bg-color: var(--color-surface-base);\n  --field-control-text-color: var(--color-content-neutral-base);\n  --field-label-color: var(--color-content-neutral-secondary);\n  --field-control-border-color: var(--color-border-secondary);\n  --field-control-placeholder-color: var(--color-content-neutral-muted);\n}\n\n/* Size variants using data attributes */\n.root[data-size=\"sm\"] {\n  --field-gap: var(--spacing-sm);\n  --field-label-font-size: var(--typography-caption-base-size);\n  --field-label-line-height: var(--typography-caption-base-height);\n  --field-label-font-weight: var(--typography-caption-base-weight);\n  --helper-font-size: var(--typography-caption-base-size);\n  --helper-line-height: var(--typography-caption-base-height);\n  --field-control-height: 2rem;\n  --field-control-icon-size: 1.5rem;\n  --field-control-font-size: var(--typography-caption-base-size);\n  --field-control-line-height: var(--typography-caption-base-height);\n  --field-control-font-weight: var(--typography-caption-base-weight);\n}\n\n.root[data-size=\"md\"] {\n  --field-gap: var(--spacing-md);\n  --field-label-font-size: var(--typography-body-2-size);\n  --field-label-line-height: var(--typography-body-2-height);\n  --field-label-font-weight: var(--typography-body-2-weight);\n  --helper-font-size: var(--typography-caption-base-size);\n  --helper-line-height: var(--typography-caption-base-height);\n  --field-control-height: 2.5rem;\n  --field-control-icon-size: 2rem;\n  --field-control-font-size: var(--typography-body-2-size);\n  --field-control-line-height: var(--typography-body-2-height);\n  --field-control-font-weight: var(--typography-body-2-weight);\n}\n\n.root[data-size=\"lg\"] {\n  --field-gap: var(--spacing-md);\n  --field-label-font-size: var(--typography-body-1-size);\n  --field-label-line-height: var(--typography-body-1-height);\n  --field-label-font-weight: var(--typography-body-1-weight);\n  --helper-font-size: var(--typography-body-2-size);\n  --helper-line-height: var(--typography-body-2-height);\n  --field-control-height: 3rem;\n  --field-control-icon-size: 2rem;\n  --field-control-font-size: var(--typography-body-1-size);\n  --field-control-line-height: var(--typography-body-1-height);\n  --field-control-font-weight: var(--typography-body-1-weight);\n}\n\n.root[data-invalid] {\n  --field-control-text-color: var(--color-content-neutral-muted);\n  --field-label-color: var(--color-content-negative-muted);\n  --field-control-border-color: var(--color-content-negative-muted);\n  --field-required-color: var(--color-content-negative-muted);\n}\n\n.label {\n  font-size: var(--field-label-font-size, var(--typography-body-2-size));\n  line-height: var(--field-label-line-height, var(--typography-body-2-height));\n  font-weight: var(--field-label-font-weight, var(--typography-body-2-weight));\n  color: var(--field-label-color);\n}\n\n.root[data-disabled] {\n  --field-control-bg-color: var(--color-surface-tertiary);\n  --field-control-text-color: var(--color-content-neutral-muted);\n  --field-label-color: var(--color-content-neutral-muted);\n  --field-control-border-color: var(--color-border-secondary);\n  --field-required-color: var(--color-content-neutral-muted);\n  cursor: not-allowed;\n  user-select: none;\n}\n\n.required {\n  color: var(--field-required-color);\n  margin-left: var(--spacing-xxs);\n}\n\n.visually-hidden {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.error {\n  font-size: var(--helper-font-size);\n  line-height: var(--helper-line-height);\n  color: var(--color-content-negative-base);\n}\n\n.description {\n  font-size: var(--helper-font-size);\n  line-height: var(--helper-line-height);\n  color: var(--color-content-neutral-secondary);\n  margin: 0;\n}\n\n.description[data-disabled] {\n  color: var(--color-content-neutral-muted);\n}\n"],"mappings":""}