@ds-mo/ui 0.2.4 → 0.4.0

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -1,68 +0,0 @@
-import React, { forwardRef } from 'react';
-import { cn } from '@/utils/cn';
-import { Text } from '@/components/Text';
-import styles from './Breadcrumb.module.css';
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-  onClick?: () => void;
-}
-
-export interface BreadcrumbProps {
-  /** Ordered list of breadcrumb items. Last item is treated as current page. */
-  items: BreadcrumbItem[];
-  /** Custom separator. Defaults to '/'. */
-  separator?: React.ReactNode;
-  className?: string;
-}
-
-export const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(
-  ({ items, separator = '/', className }, ref) => (
-    <nav ref={ref} aria-label="Breadcrumb" className={cn(styles.breadcrumb, className)}>
-      <ol className={styles.list}>
-        {items.map((item, i) => {
-          const isLast = i === items.length - 1;
-          return (
-            <li key={i} className={styles.item}>
-              {isLast ? (
-                <Text variant="text-body-medium-emphasis" as="span" color="primary" aria-current="page">
-                  {item.label}
-                </Text>
-              ) : (
-                <>
-                  {item.href ? (
-                    <a
-                      href={item.href}
-                      className={styles.link}
-                      onClick={e => { if (item.onClick) { e.preventDefault(); item.onClick(); } }}
-                    >
-                      <Text variant="text-body-medium" as="span" color="inherit">
-                        {item.label}
-                      </Text>
-                    </a>
-                  ) : (
-                    <button
-                      type="button"
-                      className={styles.link}
-                      onClick={item.onClick}
-                    >
-                      <Text variant="text-body-medium" as="span" color="inherit">
-                        {item.label}
-                      </Text>
-                    </button>
-                  )}
-                  <span className={styles.separator} aria-hidden="true">
-                    {separator}
-                  </span>
-                </>
-              )}
-            </li>
-          );
-        })}
-      </ol>
-    </nav>
-  )
-);
-
-Breadcrumb.displayName = 'Breadcrumb';

package/src/components/Breadcrumb/index.ts

@@ -1,2 +0,0 @@
-export { Breadcrumb } from './Breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';

package/src/components/Button/Button.mdx

@@ -1,143 +0,0 @@
-import { Meta, Title, Subtitle, Canvas, Controls, Primary } from '@storybook/addon-docs/blocks';
-import * as ButtonStories from './Button.stories';
-
-<Meta of={ButtonStories} />
-
-<Title />
-
-<Subtitle>
-  Buttons trigger actions. They are the primary way users commit to a decision —
-  saving a record, opening a dialog, navigating somewhere meaningful.
-</Subtitle>
-
-A button should make its purpose obvious from its label, its visual weight, and
-its position on the page. The right button in the right place is invisible — it
-just feels like the next step. The wrong button competes for attention and slows
-the user down.
-
-## Playground
-
-Use the controls below to explore every prop the component accepts. This is the
-fastest way to understand how `variant`, `intent`, `contrast`, and `elevation`
-combine.
-
-<Primary />
-
-<Controls />
-
-## When to use
-
-Reach for a button when the user needs to perform an **action** — submit a form,
-delete a record, open a panel, run a process. If the user is navigating between
-pages or sections, prefer a link instead. Buttons are for verbs; links are for
-nouns.
-
-A page should have **one** clearly dominant button. If two actions look equally
-important, the user has to stop and read both before deciding — which is exactly
-the moment of friction good hierarchy avoids.
-
-## Variants
-
-`primary` is filled and carries the strongest visual weight. Use it for the one
-action you most want the user to take on a given screen.
-
-`secondary` is a softer treatment for actions that matter but should not compete
-with the primary action. Use `elevation="none"` to get the ghost treatment for
-tertiary actions like cancel, dismiss, or inline controls.
-
-<Canvas of={ButtonStories.Variants} />
-
-> **Do** pair one `primary` with one or more `secondary` buttons in a form footer.
->
-> **Don't** stack two `primary` buttons next to each other — only one action can
-> be the primary one.
-
-## Intent
-
-Intent communicates the **meaning** of the action through color. Most buttons
-should use `brand` (the default) or `neutral`. Reserve semantic intents for
-moments when the meaning genuinely matches.
-
-<Canvas of={ButtonStories.Intents} />
-
-- `brand` — the default for primary calls-to-action
-- `neutral` — for actions that should not draw color, like filters or toolbar controls
-- `negative` — for destructive actions (delete, remove, discard)
-- `positive` — for confirmations of a successful state, used sparingly
-- `warning` / `caution` — for actions that need a moment of pause
-- `ai` — reserved for AI-generated or AI-triggering actions
-- `none` — inverted styling for use on colored or dark surfaces
-
-> **Don't** use `negative` intent for a cancel button. Cancel is not destructive;
-> it is the absence of an action. Use `secondary` with no intent.
-
-## Sizes
-
-Pick a size from the surrounding density, not the importance of the action.
-Forms and dialogs use `md`. Compact toolbars and table rows use `sm` or `xs`.
-Hero sections and marketing surfaces can use `lg`.
-
-<Canvas of={ButtonStories.Sizes} />
-
-## Icons
-
-A leading icon can clarify a button's purpose at a glance — but only when the
-icon's meaning is unambiguous. If you have to think about which icon to pick,
-the label alone is doing a better job.
-
-<Canvas of={ButtonStories.IconAndLabel} />
-
-Icon-only buttons must always have an `aria-label`. Without it, screen readers
-announce nothing meaningful, and keyboard users lose all context.
-
-<Canvas of={ButtonStories.IconOnly} />
-
-## States
-
-Buttons have several states that communicate progress or availability:
-
-- `inactive` — the action is not currently available, but may become available
-- `loading` — the action is in flight; prevents double-submission
-- `rounded` — pill-shaped variant for filter chips and compact actions
-
-<Canvas of={ButtonStories.Loading} />
-
-<Canvas of={ButtonStories.Inactive} />
-
-> **Do** use `loading` for any async action that takes longer than ~200ms.
-> Without it, users will click again, often submitting twice.
-
-## Full width
-
-Use `fullWidth` inside narrow containers like mobile sheets, side panels, or
-form footers where the button should fill the available width. Avoid full-width
-buttons on wide desktop layouts — they read as banner CTAs and feel heavy.
-
-<Canvas of={ButtonStories.FullWidth} />
-
-## On colored surfaces
-
-When a button sits on a colored or dark surface, set the `background` prop so
-the button can adapt its contrast to remain legible. The `BackgroundContext`
-story below demonstrates every variant against every supported surface.
-
-<Canvas of={ButtonStories.BackgroundContext} />
-
-## Accessibility
-
-- Every button must have a discernible name — either visible text in `label` or
-  an `aria-label` for icon-only buttons.
-- The `inactive` state is **not** the same as the HTML `disabled` attribute.
-  `inactive` keeps the button focusable and announceable; truly disabled buttons
-  vanish from the tab order and frustrate users who can't tell why an action
-  isn't working.
-- Touch targets meet the 24×24 CSS pixel minimum at all sizes; `xs` is intended
-  for dense desktop UIs and should not be used on mobile.
-
-## Full reference matrix
-
-The matrix below renders every meaningful combination of `variant`, `intent`,
-`contrast`, `elevation`, `size`, and state on a single canvas. Use it as a
-visual regression reference when changing tokens or styles.
-
-<Canvas of={ButtonStories.Matrix} />

package/src/components/Button/Button.module.css

@@ -1,343 +0,0 @@
-/* ==========================================================================
-   Button — unified primary/secondary
-   Hover/pressed via color-mix() on background-color. No pseudo-element overlays.
-   ========================================================================== */
-
-.button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: none;
-  border-radius: var(--dimension-radius-050);
-  cursor: pointer;
-  position: relative;
-  transition: transform var(--effect-motion-short-2);
-  height: var(--dimension-size-400);
-  font-family: inherit;
-  color: var(--color-foreground-primary);
-  background: transparent;
-  box-sizing: border-box;
-  text-decoration: none;
-  -webkit-user-select: none;
-  user-select: none;
-
-  /* Interaction — ghost defaults (semi-transparent overlay) */
-  --_hover-bg: var(--color-interaction-hover);
-  --_pressed-bg: var(--color-interaction-pressed);
-  --_border: var(--color-border-tertiary);
-}
-
-.button:focus-visible {
-  outline: var(--dimension-stroke-width-025) solid var(--color-interaction-focus);
-  outline-offset: var(--dimension-space-025);
-}
-
-.button:hover:not(.inactive) {
-  background-color: var(--_hover-bg);
-}
-
-.button:active:not(.inactive) {
-  background-color: var(--_pressed-bg);
-  transform: scale(var(--dimension-scale-subtle));
-}
-
-/* ==========================================================================
-   Background context — parent surface awareness
-   Adjusts hover tokens and secondary fg for colored parent surfaces.
-   1-class specificity; overridden by filled variant rules (2+ classes).
-   ========================================================================== */
-
-.onMedium {
-  --_hover-bg: var(--color-interaction-on-medium-background-hover);
-  --_pressed-bg: var(--color-interaction-on-medium-background-pressed);
-  --_border: var(--color-border-on-medium-background-tertiary);
-}
-
-.onBold {
-  --_hover-bg: var(--color-interaction-on-bold-background-hover);
-  --_pressed-bg: var(--color-interaction-on-bold-background-pressed);
-  --_border: var(--color-border-on-bold-background-tertiary);
-}
-
-.onStrong {
-  --_hover-bg: var(--color-interaction-on-strong-background-hover);
-  --_pressed-bg: var(--color-interaction-on-strong-background-pressed);
-  --_border: var(--color-border-on-strong-background-tertiary);
-}
-
-.onAlwaysDark {
-  --_hover-bg: var(--color-always-dark-interaction-hover);
-  --_pressed-bg: var(--color-always-dark-interaction-pressed);
-  --_border: var(--color-always-dark-border-tertiary);
-}
-
-/* ==========================================================================
-   Variant: Primary
-   Bold background, on-bold content. Elevation controls shadow.
-   ========================================================================== */
-
-.primary {
-  color: var(--color-foreground-on-bold-background-primary);
-}
-
-/* Primary intent: none — inverted surface (black in light mode, white in dark mode) */
-.primary.intentNone {
-  background-color: var(--color-inverted-background);
-  color: var(--color-inverted-foreground-primary);
-  --_hover-bg: color-mix(in oklch, var(--color-inverted-background) 90%, var(--color-inverted-foreground-primary));
-  --_pressed-bg: color-mix(in oklch, var(--color-inverted-background) 85%, var(--color-inverted-foreground-primary));
-  --_border: var(--color-inverted-border-tertiary);
-}
-
-/* Filled primary — background from --_bg, bold-contrast hover via color-mix.
-   2-class specificity beats background context (1-class). */
-.primary:not(.intentNone) {
-  background-color: var(--_bg);
-  --_hover-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));
-  --_pressed-bg: color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-on-bold-background-primary));
-}
-
-/* ── Primary bold contrast (default) ────────────────────────────────── */
-
-.primary.intentBrand    { --_bg: var(--color-background-bold-brand);    color: var(--color-foreground-faint-brand); }
-.primary.intentNeutral  { --_bg: var(--color-background-bold-neutral);  color: var(--color-foreground-faint-neutral); }
-.primary.intentPositive { --_bg: var(--color-background-bold-positive); color: var(--color-foreground-faint-positive); }
-.primary.intentNegative { --_bg: var(--color-background-bold-negative); color: var(--color-foreground-faint-negative); }
-.primary.intentWarning  { --_bg: var(--color-background-bold-warning);  color: var(--color-foreground-faint-warning); }
-.primary.intentCaution  { --_bg: var(--color-background-bold-caution);  color: var(--color-foreground-faint-caution); }
-.primary.intentAi       { --_bg: var(--color-background-bold-ai);       color: var(--color-foreground-faint-ai); }
-
-/* ── Primary medium contrast ────────────────────────────────────────── */
-
-.primary.contrastMedium {
-  --_hover-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));
-  --_pressed-bg: color-mix(in oklch, var(--_bg) 80%, var(--color-foreground-primary));
-}
-.primary.contrastMedium.intentBrand    { --_bg: var(--color-background-medium-brand);    color: var(--color-foreground-strong-brand); }
-.primary.contrastMedium.intentNeutral  { --_bg: var(--color-background-medium-neutral);  color: var(--color-foreground-strong-neutral); }
-.primary.contrastMedium.intentPositive { --_bg: var(--color-background-medium-positive); color: var(--color-foreground-strong-positive); }
-.primary.contrastMedium.intentNegative { --_bg: var(--color-background-medium-negative); color: var(--color-foreground-strong-negative); }
-.primary.contrastMedium.intentWarning  { --_bg: var(--color-background-medium-warning);  color: var(--color-foreground-strong-warning); }
-.primary.contrastMedium.intentCaution  { --_bg: var(--color-background-medium-caution);  color: var(--color-foreground-strong-caution); }
-.primary.contrastMedium.intentAi       { --_bg: var(--color-background-medium-ai);       color: var(--color-foreground-strong-ai); }
-
-/* ── Primary strong contrast ────────────────────────────────────────── */
-
-.primary.contrastStrong {
-  --_hover-bg: color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-on-bold-background-primary));
-  --_pressed-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-on-bold-background-primary));
-}
-.primary.contrastStrong.intentBrand    { --_bg: var(--color-background-strong-brand);    color: var(--color-foreground-medium-brand); }
-.primary.contrastStrong.intentNeutral  { --_bg: var(--color-background-strong-neutral);  color: var(--color-foreground-medium-neutral); }
-.primary.contrastStrong.intentPositive { --_bg: var(--color-background-strong-positive); color: var(--color-foreground-medium-positive); }
-.primary.contrastStrong.intentNegative { --_bg: var(--color-background-strong-negative); color: var(--color-foreground-medium-negative); }
-.primary.contrastStrong.intentWarning  { --_bg: var(--color-background-strong-warning);  color: var(--color-foreground-medium-warning); }
-.primary.contrastStrong.intentCaution  { --_bg: var(--color-background-strong-caution);  color: var(--color-foreground-medium-caution); }
-.primary.contrastStrong.intentAi       { --_bg: var(--color-background-strong-ai);       color: var(--color-foreground-medium-ai); }
-
-/* ── Primary faint contrast ─────────────────────────────────────────── */
-
-.primary.contrastFaint {
-  --_hover-bg: color-mix(in oklch, var(--_bg) 90%, var(--color-foreground-primary));
-  --_pressed-bg: color-mix(in oklch, var(--_bg) 85%, var(--color-foreground-primary));
-}
-.primary.contrastFaint.intentBrand    { --_bg: var(--color-background-faint-brand);    color: var(--color-foreground-bold-brand); }
-.primary.contrastFaint.intentNeutral  { --_bg: var(--color-background-faint-neutral);  color: var(--color-foreground-bold-neutral); }
-.primary.contrastFaint.intentPositive { --_bg: var(--color-background-faint-positive); color: var(--color-foreground-bold-positive); }
-.primary.contrastFaint.intentNegative { --_bg: var(--color-background-faint-negative); color: var(--color-foreground-bold-negative); }
-.primary.contrastFaint.intentWarning  { --_bg: var(--color-background-faint-warning);  color: var(--color-foreground-bold-warning); }
-.primary.contrastFaint.intentCaution  { --_bg: var(--color-background-faint-caution);  color: var(--color-foreground-bold-caution); }
-.primary.contrastFaint.intentAi       { --_bg: var(--color-background-faint-ai);       color: var(--color-foreground-bold-ai); }
-
-/* ==========================================================================
-   Variant: Secondary
-   Base is ghost (transparent, no border, no shadow).
-   Elevation classes add the chrome — flat=border, elevated=bg+shadow, floating=bg+floating.
-   ========================================================================== */
-
-.secondary {
-  background-color: transparent;
-  color: var(--color-foreground-secondary);
-}
-
-/* Secondary intent — bold fg color */
-.secondary.intentBrand    { color: var(--color-foreground-bold-brand); }
-.secondary.intentNeutral  { color: var(--color-foreground-bold-neutral); }
-.secondary.intentPositive { color: var(--color-foreground-bold-positive); }
-.secondary.intentNegative { color: var(--color-foreground-bold-negative); }
-.secondary.intentWarning  { color: var(--color-foreground-bold-warning); }
-.secondary.intentCaution  { color: var(--color-foreground-bold-caution); }
-.secondary.intentAi       { color: var(--color-foreground-bold-ai); }
-
-/* ── Secondary fg on medium surface ─────────────────────────────────── */
-
-.secondary.onMedium { color: var(--color-foreground-primary); }
-.secondary.onMedium.intentBrand    { color: var(--color-foreground-strong-brand); }
-.secondary.onMedium.intentNeutral  { color: var(--color-foreground-strong-neutral); }
-.secondary.onMedium.intentPositive { color: var(--color-foreground-strong-positive); }
-.secondary.onMedium.intentNegative { color: var(--color-foreground-strong-negative); }
-.secondary.onMedium.intentWarning  { color: var(--color-foreground-strong-warning); }
-.secondary.onMedium.intentCaution  { color: var(--color-foreground-strong-caution); }
-.secondary.onMedium.intentAi       { color: var(--color-foreground-strong-ai); }
-
-/* ── Secondary fg on bold surface ──────────────────────────────────── */
-
-.secondary.onBold { color: var(--color-foreground-on-bold-background-secondary); }
-.secondary.onBold.intentBrand    { color: var(--color-foreground-faint-brand); }
-.secondary.onBold.intentNeutral  { color: var(--color-foreground-faint-neutral); }
-.secondary.onBold.intentPositive { color: var(--color-foreground-faint-positive); }
-.secondary.onBold.intentNegative { color: var(--color-foreground-faint-negative); }
-.secondary.onBold.intentWarning  { color: var(--color-foreground-faint-warning); }
-.secondary.onBold.intentCaution  { color: var(--color-foreground-faint-caution); }
-.secondary.onBold.intentAi       { color: var(--color-foreground-faint-ai); }
-
-/* ── Secondary fg on always-dark surface ──────────────────────────── */
-
-.secondary.onAlwaysDark { color: var(--color-always-dark-foreground-secondary); }
-.secondary.onAlwaysDark.intentBrand    { color: var(--color-always-dark-foreground-brand); }
-.secondary.onAlwaysDark.intentNeutral  { color: var(--color-always-dark-foreground-neutral); }
-.secondary.onAlwaysDark.intentPositive { color: var(--color-always-dark-foreground-positive); }
-.secondary.onAlwaysDark.intentNegative { color: var(--color-always-dark-foreground-negative); }
-.secondary.onAlwaysDark.intentWarning  { color: var(--color-always-dark-foreground-warning); }
-.secondary.onAlwaysDark.intentCaution  { color: var(--color-always-dark-foreground-caution); }
-.secondary.onAlwaysDark.intentAi       { color: var(--color-always-dark-foreground-ai); }
-
-/* ── Secondary fg on strong surface ─────────────────────────────────── */
-
-.secondary.onStrong { color: var(--color-foreground-on-bold-background-secondary); }
-.secondary.onStrong.intentBrand    { color: var(--color-foreground-faint-brand); }
-.secondary.onStrong.intentNeutral  { color: var(--color-foreground-faint-neutral); }
-.secondary.onStrong.intentPositive { color: var(--color-foreground-faint-positive); }
-.secondary.onStrong.intentNegative { color: var(--color-foreground-faint-negative); }
-.secondary.onStrong.intentWarning  { color: var(--color-foreground-faint-warning); }
-.secondary.onStrong.intentCaution  { color: var(--color-foreground-faint-caution); }
-.secondary.onStrong.intentAi       { color: var(--color-foreground-faint-ai); }
-
-/* ==========================================================================
-   Elevation
-   ========================================================================== */
-
-/* ── Secondary chrome ───────────────────────────────────────────────── */
-
-/* elevationNone = ghost base — no extra CSS needed */
-
-.secondary.elevationFlat {
-  box-shadow: inset 0 0 0 1px var(--_border);
-}
-
-.secondary.elevationElevated {
-  background-color: var(--color-background-primary);
-  box-shadow: var(--effect-elevation-elevated-sm);
-  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));
-  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));
-}
-
-.secondary.elevationFloating {
-  background-color: var(--color-background-primary);
-  box-shadow: var(--effect-elevation-elevated-floating);
-  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));
-  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));
-}
-
-/* ── Primary shadow + border control ───────────────────────────────── */
-
-/* elevated */
-.primary.elevationElevated { box-shadow: var(--effect-elevation-elevated-sm); }
-
-/* none = no shadow, no border (flat colored button — default for primary) */
-.primary.elevationNone { box-shadow: none; }
-
-/* flat = inset ring against the page background (not the button fill) */
-.primary.elevationFlat { box-shadow: inset 0 0 0 1px var(--_border); }
-
-/* intentNone flat: inverted fill + default border ring (bg/fg inherited from .primary.intentNone) */
-.primary.intentNone.elevationFlat {
-  --_border: var(--color-border-tertiary);
-}
-
-/* intentNone on strong/always-dark: flip to surface bg/fg — inverted (black) would be invisible */
-.primary.intentNone.onStrong,
-.primary.intentNone.onAlwaysDark {
-  background-color: var(--color-background-primary);
-  color: var(--color-foreground-primary);
-  --_hover-bg: color-mix(in oklch, var(--color-background-primary) 90%, var(--color-foreground-primary));
-  --_pressed-bg: color-mix(in oklch, var(--color-background-primary) 85%, var(--color-foreground-primary));
-  --_border: var(--color-border-tertiary);
-}
-
-/* floating = FAB-strength shadow for both variants */
-.primary.elevationFloating   { box-shadow: var(--effect-elevation-elevated-floating) !important; }
-
-/* ==========================================================================
-   Layout: icon-only, label-only, icon+label, dropdown
-   ========================================================================== */
-
-.iconOnly { padding: 0; width: var(--dimension-size-400); min-width: var(--dimension-size-400); }
-.labelOnly { padding: 0 var(--dimension-space-100); }
-.iconAndLabel { padding: 0 var(--dimension-space-100) 0 var(--dimension-space-075); gap: var(--dimension-space-025); }
-.dropdown { gap: var(--dimension-space-050); }
-
-/* ==========================================================================
-   Sizes
-   ========================================================================== */
-
-.sizeSM { height: var(--dimension-size-300); }
-.sizeSM.iconOnly { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }
-.sizeSM.labelOnly   { padding: 0 var(--dimension-space-075); }
-.sizeSM.iconAndLabel { padding: 0 var(--dimension-space-075) 0 var(--dimension-space-050); gap: 1px; }
-
-.sizeXS { height: var(--dimension-size-200); }
-.sizeXS.iconOnly { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }
-.sizeXS.labelOnly, .sizeXS.iconAndLabel { padding: 0 var(--dimension-space-025); gap: 0; }
-
-.sizeLG { height: var(--dimension-size-500); }
-.sizeLG.iconOnly { width: var(--dimension-size-500); min-width: var(--dimension-size-500); }
-.sizeLG.labelOnly   { padding: 0 var(--dimension-space-150); }
-.sizeLG.iconAndLabel { padding: 0 var(--dimension-space-150) 0 var(--dimension-space-100); gap: var(--dimension-space-075); }
-
-/* ==========================================================================
-   Rounded (pill shape)
-   ========================================================================== */
-
-.rounded { border-radius: var(--dimension-radius-half); }
-.rounded.labelOnly   { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }
-.rounded.iconAndLabel { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-100) + var(--dimension-space-050)); }
-.rounded.sizeSM.labelOnly   { padding-left: calc(var(--dimension-space-075) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }
-.rounded.sizeSM.iconAndLabel { padding-left: calc(var(--dimension-space-050) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-075) + var(--dimension-space-050)); }
-.rounded.sizeLG.labelOnly   { padding-left: calc(var(--dimension-space-150) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-150) + var(--dimension-space-050)); }
-.rounded.sizeLG.iconAndLabel { padding-left: calc(var(--dimension-space-100) + var(--dimension-space-050)); padding-right: calc(var(--dimension-space-150) + var(--dimension-space-050)); }
-.rounded.iconOnly { width: var(--dimension-size-400); min-width: var(--dimension-size-400); padding: 0; }
-.rounded.sizeLG.iconOnly { width: var(--dimension-size-500); min-width: var(--dimension-size-500); }
-.rounded.sizeSM.iconOnly { width: var(--dimension-size-300); min-width: var(--dimension-size-300); }
-.rounded.sizeXS.iconOnly { width: var(--dimension-size-200); min-width: var(--dimension-size-200); }
-
-/* ==========================================================================
-   Disabled
-   ========================================================================== */
-
-.inactive { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
-
-/* ==========================================================================
-   Badge
-   ========================================================================== */
-
-.badge {
-  position: absolute;
-  top: var(--dimension-space-025);
-  right: var(--dimension-space-025);
-  font-size: var(--typography-fontsize-xs);
-  font-weight: var(--typography-weight-semibold);
-  line-height: var(--typography-lineheight-xs);
-  color: var(--color-foreground-secondary);
-  pointer-events: none;
-  z-index: 10;
-}
-
-/* ==========================================================================
-   Full width
-   ========================================================================== */
-
-.fullWidth {
-  display: flex;
-  width: 100%;
-}