@bergetai/ui 0.16.0 → 0.16.1

package/dist/components/button/Button.mjs

@@ -24,7 +24,13 @@ import { jsx } from "react/jsx-runtime";
 * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the
 * Berget theme. Theme switching is driven entirely by the semantic tokens.
 */
-const interactionClasses = cn("focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-berget-button-focus-ring focus-visible:ring-0", "disabled:pointer-events-none disabled:opacity-100 disabled:cursor-not-allowed", "active:not-aria-[haspopup]:translate-y-0");
+const interactionClasses = cn(`
+    focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2
+    focus-visible:outline-berget-button-focus-ring focus-visible:outline-solid
+  `, `
+    disabled:pointer-events-none disabled:cursor-not-allowed
+    disabled:opacity-100
+  `, "active:not-aria-[haspopup]:translate-y-0");
 /** Disabled treatment shared by every variant. */
 const disabledClasses = "disabled:text-berget-button-disabled-fg disabled:shadow-none";
 /** Brand-specific classes applied *on top* of the upstream primitive. */
@@ -32,10 +38,33 @@ function brandVariantClasses(variant) {
 	switch (variant) {
 		case "primary": return cn("bg-berget-button-primary-bg text-berget-button-primary-fg", "hover:bg-berget-button-primary-hover", "hover:text-berget-button-primary-fg", "active:bg-berget-button-primary-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-primary-disabled-bg");
 		case "destructive": return cn("bg-berget-button-destructive-bg text-berget-button-destructive-fg", "hover:bg-berget-button-destructive-hover", "hover:text-berget-button-destructive-hover-fg", "active:bg-berget-button-destructive-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-destructive-disabled-bg");
-		case "outline": return cn("bg-transparent border-berget-button-outline-border text-berget-button-outline-fg", "hover:bg-berget-button-outline-hover dark:hover:bg-berget-button-outline-hover", "active:bg-transparent dark:active:bg-transparent", "focus-visible:border-berget-button-outline-border", disabledClasses, "disabled:bg-transparent disabled:border-berget-button-disabled-border");
-		case "ghost": return cn("bg-transparent text-berget-button-ghost-fg", "hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg", "dark:hover:bg-berget-button-ghost-hover", "active:bg-berget-button-ghost-active dark:active:bg-berget-button-ghost-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-transparent");
-		case "link": return cn("h-auto bg-transparent p-0 text-berget-button-link-fg font-medium underline-offset-4 shadow-none", "hover:bg-transparent hover:text-berget-button-link-hover-fg", "active:text-berget-button-link-fg", "focus:bg-transparent", "focus-visible:border-transparent focus-visible:ring-0", "focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-berget-button-focus-ring focus-visible:rounded-berget-xs", "disabled:text-berget-button-disabled-fg disabled:no-underline", "disabled:opacity-100 disabled:cursor-not-allowed");
-		default: return cn("bg-berget-button-default-bg border-berget-button-default-border text-berget-button-default-fg", "hover:bg-berget-button-default-hover", "active:bg-berget-button-default-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-default-disabled-bg");
+		case "outline": return cn(`
+          border-berget-button-outline-border bg-transparent
+          text-berget-button-outline-fg
+        `, `
+          hover:bg-berget-button-outline-hover
+          dark:hover:bg-berget-button-outline-hover
+        `, `
+          active:bg-transparent
+          dark:active:bg-transparent
+        `, "focus-visible:border-berget-button-outline-border", disabledClasses, "disabled:border-berget-button-disabled-border disabled:bg-transparent");
+		case "ghost": return cn("bg-transparent text-berget-button-ghost-fg", "hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg", "dark:hover:bg-berget-button-ghost-hover", `
+          active:bg-berget-button-ghost-active
+          dark:active:bg-berget-button-ghost-active
+        `, "focus-visible:border-transparent", disabledClasses, "disabled:bg-transparent");
+		case "link": return cn(`
+          h-auto bg-transparent p-0 font-medium text-berget-button-link-fg
+          underline-offset-4 shadow-none
+        `, "hover:bg-transparent hover:text-berget-button-link-hover-fg", "active:text-berget-button-link-fg", "focus:bg-transparent", "focus-visible:border-transparent focus-visible:ring-0", `
+          focus-visible:rounded-berget-xs focus-visible:outline-2
+          focus-visible:outline-offset-2
+          focus-visible:outline-berget-button-focus-ring
+          focus-visible:outline-solid
+        `, "disabled:text-berget-button-disabled-fg disabled:no-underline", "disabled:cursor-not-allowed disabled:opacity-100");
+		default: return cn(`
+          border-berget-button-default-border bg-berget-button-default-bg
+          text-berget-button-default-fg
+        `, "hover:bg-berget-button-default-hover", "active:bg-berget-button-default-active", "focus-visible:border-transparent", disabledClasses, "disabled:bg-berget-button-default-disabled-bg");
 	}
 }
 /** Map custom variants to the closest upstream primitive variant. */
@@ -54,7 +83,12 @@ function Button({ className, variant = "default", size, asChild = false, width =
 	const baseClass = cn(!isLink && buttonVariants({
 		variant: primitiveVariant(variant),
 		size
-	}), !isLink && (width === "full" ? "rounded-berget-xs" : "rounded-full"), !isLink && !isIcon && "py-[0.57em] px-[1.14em] h-auto", !isLink && !isIcon && (size === "lg" ? "text-lg" : size === "sm" ? "text-sm" : size === "xs" ? "" : "text-base"), !isLink && "font-normal", brandVariantClasses(variant), interactionClasses, !isLink && width === "full" && "w-full", isIcon && "rounded-full shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]", className);
+	}), !isLink && (width === "full" ? "rounded-berget-xs" : "rounded-full"), !isLink && !isIcon && "h-auto px-[1.14em] py-[0.57em]", !isLink && !isIcon && (size === "lg" ? "text-lg" : size === "sm" ? "text-sm" : size === "xs" ? "" : `
+        text-base
+      `), !isLink && "font-normal", brandVariantClasses(variant), interactionClasses, !isLink && width === "full" && "w-full", isIcon && `
+        rounded-full
+        shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]
+      `, className);
 	const content = /* @__PURE__ */ jsx("span", {
 		className: cn("inline-flex items-center", !isIcon && "gap-2"),
 		children

package/dist/components/button/Button.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.mjs","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Button as ButtonPrimitive, buttonVariants } from '../../primitives/button';\nimport type { VariantProps } from 'class-variance-authority';\n\n/** Variants exposed by the Berget wrapper. */\ntype CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';\n\n/** Props for the Berget Button wrapper. */\nexport interface ButtonProps extends Omit<\n  React.ComponentProps<typeof ButtonPrimitive>,\n  'variant' | 'ref'\n> {\n  /** Visual style variant. `primary` is Berget-specific. */\n  variant?: CustomVariant;\n  /** Full width or auto width. */\n  width?: 'default' | 'full';\n  /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Shared interaction chrome for every variant.\n *\n * The primitive already provides hover/focus/disabled plumbing via shadcn\n * tokens (`--primary`, `--muted`, `--ring`, …), which the shadcn bridge in\n * `styles/index.css` maps to brand values. These classes neutralise the bits\n * that don't fit the Berget system and apply the component-scoped\n * `--berget-button-*` state tokens:\n *\n * - Focus: always visible on keyboard focus (`focus-visible`), drawn as a\n *   real CSS **outline** (2px, offset 2px) in `--berget-button-focus-ring`\n *   (moss-300 dark / moss-600 light, ≥3:1 against the surface per\n *   WCAG 2.4.7) — not a ring/box-shadow hugging the edge, and the control's\n *   own border keeps its resting colour.\n * - Disabled: replaces the primitive's flat `opacity-50` fade with explicit\n *   muted tokens so every variant stays legible (≥3:1, and disabled UI is\n *   exempt from AA text contrast per WCAG 1.4.3).\n *\n * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the\n * Berget theme. Theme switching is driven entirely by the semantic tokens.\n */\nconst interactionClasses = cn(\n  // Outline-based focus indicator; neutralise the primitive's ring (the\n  // ring colour class is left — harmless at width 0).\n  'focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-berget-button-focus-ring focus-visible:ring-0',\n  // Neutralise the primitive's disabled fade; variants apply their own tokens.\n  'disabled:pointer-events-none disabled:opacity-100 disabled:cursor-not-allowed',\n  // No press movement: same compound selector as the primitive base's 1px\n  // active translate so tailwind-merge strips it down to 0.\n  'active:not-aria-[haspopup]:translate-y-0',\n);\n\n/** Disabled treatment shared by every variant. */\nconst disabledClasses = 'disabled:text-berget-button-disabled-fg disabled:shadow-none';\n\n/** Brand-specific classes applied *on top* of the upstream primitive. */\nfunction brandVariantClasses(variant?: CustomVariant): string {\n  switch (variant) {\n    case 'primary':\n      return cn(\n        // Flat tinted-glass fill; the alpha carries the state, so no shadow lift.\n        'bg-berget-button-primary-bg text-berget-button-primary-fg',\n        'hover:bg-berget-button-primary-hover',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the primary fg token.\n        'hover:text-berget-button-primary-fg',\n        'active:bg-berget-button-primary-active',\n        // Keep the resting (transparent) border on focus — the outline is the indicator.\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-primary-disabled-bg',\n      );\n    case 'destructive':\n      return cn(\n        'bg-berget-button-destructive-bg text-berget-button-destructive-fg',\n        'hover:bg-berget-button-destructive-hover',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the destructive fg token.\n        'hover:text-berget-button-destructive-hover-fg',\n        'active:bg-berget-button-destructive-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-destructive-disabled-bg',\n      );\n    case 'outline':\n      return cn(\n        // Transparent fill with a theme-foreground-derived border (25% of the\n        // foreground). The state treatment is static: hover, press and\n        // keyboard focus render identically to rest — only the shared focus\n        // outline and the disabled treatment deviate.\n        'bg-transparent border-berget-button-outline-border text-berget-button-outline-fg',\n        // Hover: slight brightening (hover bg token); the border and\n        // foreground stay at rest. The dark:hover twin also neutralises\n        // the primitive ghost's dark:hover:bg-muted/50. Pressed drops the\n        // fill back to transparent (a pressed element is still hovered, so\n        // an explicit active override is needed in both colour schemes).\n        'hover:bg-berget-button-outline-hover dark:hover:bg-berget-button-outline-hover',\n        'active:bg-transparent dark:active:bg-transparent',\n        // Keep the resting border on focus — the shared outline is the indicator.\n        'focus-visible:border-berget-button-outline-border',\n        disabledClasses,\n        'disabled:bg-transparent disabled:border-berget-button-disabled-border',\n      );\n    case 'ghost':\n      // Transparent fill with foreground text; hover and press add subtle\n      // theme-foreground-derived fills (10% / 5%). No border of its own —\n      // the primitive's resting transparent border persists. The primitive\n      // ghost variant's aria-expanded state (bg-muted + foreground text)\n      // passes through for dropdown-trigger use.\n      return cn(\n        'bg-transparent text-berget-button-ghost-fg',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which is the same value here but pinned\n        // explicitly for parity with the other fg-token variants.\n        'hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg',\n        // The dark:hover twin neutralises the primitive ghost's\n        // dark:hover:bg-muted/50 so only the token fill applies.\n        'dark:hover:bg-berget-button-ghost-hover',\n        'active:bg-berget-button-ghost-active dark:active:bg-berget-button-ghost-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-transparent',\n      );\n    case 'link':\n      // Rendered without buttonVariants — needs its own sizing, focus ring and\n      // disabled treatment (the primitive's fade is not legible on text links).\n      return cn(\n        'h-auto bg-transparent p-0 text-berget-button-link-fg font-medium underline-offset-4 shadow-none',\n        'hover:bg-transparent hover:text-berget-button-link-hover-fg',\n        // On press, return to the resting foreground (hover fg otherwise sticks).\n        'active:text-berget-button-link-fg',\n        'focus:bg-transparent',\n        // Neutralise the primitive base's focus-visible:border-ring + ring-3,\n        // which land on link too (the primitive merges its cva base under\n        // every variant): the outline above is the only focus indicator.\n        'focus-visible:border-transparent focus-visible:ring-0',\n        'focus-visible:outline-solid focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-berget-button-focus-ring focus-visible:rounded-berget-xs',\n        'disabled:text-berget-button-disabled-fg disabled:no-underline',\n        'disabled:opacity-100 disabled:cursor-not-allowed',\n      );\n\n    case 'default':\n    default:\n      return cn(\n        // Solid granite-800 fill with a granite-700 border on dark surfaces\n        // (ink glass in light theme).\n        'bg-berget-button-default-bg border-berget-button-default-border text-berget-button-default-fg',\n        'hover:bg-berget-button-default-hover',\n        'active:bg-berget-button-default-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-default-disabled-bg',\n      );\n  }\n}\n\n/** Map custom variants to the closest upstream primitive variant. */\nfunction primitiveVariant(variant?: CustomVariant): VariantProps<typeof buttonVariants>['variant'] {\n  switch (variant) {\n    case 'primary':\n    case 'destructive':\n    case 'outline':\n    case 'ghost':\n      return 'ghost';\n    default:\n      return variant;\n  }\n}\n\nexport function Button({\n  className,\n  variant = 'default',\n  size,\n  asChild = false,\n  width = 'default',\n  type = 'button',\n  ref,\n  children,\n  ...props\n}: ButtonProps) {\n  const isIcon = typeof size === 'string' && size.startsWith('icon');\n  const isLink = variant === 'link';\n\n  const baseClass = cn(\n    !isLink && buttonVariants({ variant: primitiveVariant(variant), size }),\n    // Berget brand overrides — full-width buttons use the square radius;\n    // everything else stays pill-shaped.\n    !isLink && (width === 'full' ? 'rounded-berget-xs' : 'rounded-full'),\n    // Em-based padding, inline = 2× block — matches the 8px/16px spacing-scale\n    // values at the default text-sm (14px) and scales down/up with smaller or\n    // larger button text. h-auto drops the primitive's fixed h-* so the\n    // vertical paddings take effect.\n    !isLink && !isIcon && 'py-[0.57em] px-[1.14em] h-auto',\n    // Text ladder: size = typography scale; the em-based padding above\n    // follows automatically, so no per-size paddings are needed. Only\n    // default/lg/sm need overrides — xs keeps the primitive's text-xs.\n    !isLink &&\n      !isIcon &&\n      (size === 'lg' ? 'text-lg' : size === 'sm' ? 'text-sm' : size === 'xs' ? '' : 'text-base'),\n    // Normal weight for every non-link variant — tailwind-merge strips the\n    // primitive's font-medium (font-weight: var(--font-weight-medium)); the\n    // link variant keeps medium via its own classes above.\n    !isLink && 'font-normal',\n    brandVariantClasses(variant),\n    interactionClasses,\n    !isLink && width === 'full' && 'w-full',\n    isIcon && 'rounded-full shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]',\n    className,\n  );\n\n  const content = (\n    <span className={cn('inline-flex items-center', !isIcon && 'gap-2')}>{children}</span>\n  );\n\n  return (\n    <ButtonPrimitive\n      className={baseClass}\n      ref={ref}\n      render={asChildRender(asChild, children)}\n      type={type}\n      {...props}\n    >\n      {asChild ? undefined : content}\n    </ButtonPrimitive>\n  );\n}\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,qBAAqB,GAGzB,0JAEA,iFAGA,0CACF;;AAGA,MAAM,kBAAkB;;AAGxB,SAAS,oBAAoB,SAAiC;CAC5D,QAAQ,SAAR;EACE,KAAK,WACH,OAAO,GAEL,6DACA,wCAGA,uCACA,0CAEA,oCACA,iBACA,+CACF;EACF,KAAK,eACH,OAAO,GACL,qEACA,4CAGA,iDACA,8CACA,oCACA,iBACA,mDACF;EACF,KAAK,WACH,OAAO,GAKL,oFAMA,kFACA,oDAEA,qDACA,iBACA,uEACF;EACF,KAAK,SAMH,OAAO,GACL,8CAIA,wEAGA,2CACA,kFACA,oCACA,iBACA,yBACF;EACF,KAAK,QAGH,OAAO,GACL,mGACA,+DAEA,qCACA,wBAIA,yDACA,qKACA,iEACA,kDACF;EAGF,SACE,OAAO,GAGL,iGACA,wCACA,0CACA,oCACA,iBACA,+CACF;CACJ;AACF;;AAGA,SAAS,iBAAiB,SAAyE;CACjG,QAAQ,SAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,SACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,MACA,UAAU,OACV,QAAQ,WACR,OAAO,UACP,KACA,UACA,GAAG,SACW;CACd,MAAM,SAAS,OAAO,SAAS,YAAY,KAAK,WAAW,MAAM;CACjE,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAY,GAChB,CAAC,UAAU,eAAe;EAAE,SAAS,iBAAiB,OAAO;EAAG;CAAK,CAAC,GAGtE,CAAC,WAAW,UAAU,SAAS,sBAAsB,iBAKrD,CAAC,UAAU,CAAC,UAAU,kCAItB,CAAC,UACC,CAAC,WACA,SAAS,OAAO,YAAY,SAAS,OAAO,YAAY,SAAS,OAAO,KAAK,cAIhF,CAAC,UAAU,eACX,oBAAoB,OAAO,GAC3B,oBACA,CAAC,UAAU,UAAU,UAAU,UAC/B,UAAU,sFACV,SACF;CAEA,MAAM,UACJ,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,CAAC,UAAU,OAAO;EAAI;CAAe,CAAA;CAGvF,OACE,oBAACA,UAAD;EACE,WAAW;EACN;EACL,QAAQ,cAAc,SAAS,QAAQ;EACjC;EACN,GAAI;EAEH,UAAA,UAAU,KAAA,IAAY;CACR,CAAA;AAErB"}
+{"version":3,"file":"Button.mjs","names":["ButtonPrimitive"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn, asChildRender } from '../../lib/utils';\nimport { Button as ButtonPrimitive, buttonVariants } from '../../primitives/button';\nimport type { VariantProps } from 'class-variance-authority';\n\n/** Variants exposed by the Berget wrapper. */\ntype CustomVariant = 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';\n\n/** Props for the Berget Button wrapper. */\nexport interface ButtonProps extends Omit<\n  React.ComponentProps<typeof ButtonPrimitive>,\n  'variant' | 'ref'\n> {\n  /** Visual style variant. `primary` is Berget-specific. */\n  variant?: CustomVariant;\n  /** Full width or auto width. */\n  width?: 'default' | 'full';\n  /** Render as a different element/component. Replaces the Radix `asChild` prop. */\n  asChild?: boolean;\n  ref?: React.Ref<HTMLButtonElement>;\n}\n\n/**\n * Shared interaction chrome for every variant.\n *\n * The primitive already provides hover/focus/disabled plumbing via shadcn\n * tokens (`--primary`, `--muted`, `--ring`, …), which the shadcn bridge in\n * `styles/index.css` maps to brand values. These classes neutralise the bits\n * that don't fit the Berget system and apply the component-scoped\n * `--berget-button-*` state tokens:\n *\n * - Focus: always visible on keyboard focus (`focus-visible`), drawn as a\n *   real CSS **outline** (2px, offset 2px) in `--berget-button-focus-ring`\n *   (moss-300 dark / moss-600 light, ≥3:1 against the surface per\n *   WCAG 2.4.7) — not a ring/box-shadow hugging the edge, and the control's\n *   own border keeps its resting colour.\n * - Disabled: replaces the primitive's flat `opacity-50` fade with explicit\n *   muted tokens so every variant stays legible (≥3:1, and disabled UI is\n *   exempt from AA text contrast per WCAG 1.4.3).\n *\n * `dark:` is intentionally absent — it tracks `prefers-color-scheme`, not the\n * Berget theme. Theme switching is driven entirely by the semantic tokens.\n */\nconst interactionClasses = cn(\n  // Outline-based focus indicator; neutralise the primitive's ring (the\n  // ring colour class is left — harmless at width 0).\n  `\n    focus-visible:ring-0 focus-visible:outline-2 focus-visible:outline-offset-2\n    focus-visible:outline-berget-button-focus-ring focus-visible:outline-solid\n  `,\n  // Neutralise the primitive's disabled fade; variants apply their own tokens.\n  `\n    disabled:pointer-events-none disabled:cursor-not-allowed\n    disabled:opacity-100\n  `,\n  // No press movement: same compound selector as the primitive base's 1px\n  // active translate so tailwind-merge strips it down to 0.\n  'active:not-aria-[haspopup]:translate-y-0',\n);\n\n/** Disabled treatment shared by every variant. */\nconst disabledClasses = 'disabled:text-berget-button-disabled-fg disabled:shadow-none';\n\n/** Brand-specific classes applied *on top* of the upstream primitive. */\nfunction brandVariantClasses(variant?: CustomVariant): string {\n  switch (variant) {\n    case 'primary':\n      return cn(\n        // Flat tinted-glass fill; the alpha carries the state, so no shadow lift.\n        'bg-berget-button-primary-bg text-berget-button-primary-fg',\n        'hover:bg-berget-button-primary-hover',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the primary fg token.\n        'hover:text-berget-button-primary-fg',\n        'active:bg-berget-button-primary-active',\n        // Keep the resting (transparent) border on focus — the outline is the indicator.\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-primary-disabled-bg',\n      );\n    case 'destructive':\n      return cn(\n        'bg-berget-button-destructive-bg text-berget-button-destructive-fg',\n        'hover:bg-berget-button-destructive-hover',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which would override the destructive fg token.\n        'hover:text-berget-button-destructive-hover-fg',\n        'active:bg-berget-button-destructive-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-destructive-disabled-bg',\n      );\n    case 'outline':\n      return cn(\n        // Transparent fill with a theme-foreground-derived border (25% of the\n        // foreground). The state treatment is static: hover, press and\n        // keyboard focus render identically to rest — only the shared focus\n        // outline and the disabled treatment deviate.\n        `\n          border-berget-button-outline-border bg-transparent\n          text-berget-button-outline-fg\n        `,\n        // Hover: slight brightening (hover bg token); the border and\n        // foreground stay at rest. The dark:hover twin also neutralises\n        // the primitive ghost's dark:hover:bg-muted/50. Pressed drops the\n        // fill back to transparent (a pressed element is still hovered, so\n        // an explicit active override is needed in both colour schemes).\n        `\n          hover:bg-berget-button-outline-hover\n          dark:hover:bg-berget-button-outline-hover\n        `,\n        `\n          active:bg-transparent\n          dark:active:bg-transparent\n        `,\n        // Keep the resting border on focus — the shared outline is the indicator.\n        'focus-visible:border-berget-button-outline-border',\n        disabledClasses,\n        'disabled:border-berget-button-disabled-border disabled:bg-transparent',\n      );\n    case 'ghost':\n      // Transparent fill with foreground text; hover and press add subtle\n      // theme-foreground-derived fills (10% / 5%). No border of its own —\n      // the primitive's resting transparent border persists. The primitive\n      // ghost variant's aria-expanded state (bg-muted + foreground text)\n      // passes through for dropdown-trigger use.\n      return cn(\n        'bg-transparent text-berget-button-ghost-fg',\n        // Pin the foreground on hover — the underlying primitive ghost adds\n        // hover:text-foreground, which is the same value here but pinned\n        // explicitly for parity with the other fg-token variants.\n        'hover:bg-berget-button-ghost-hover hover:text-berget-button-ghost-fg',\n        // The dark:hover twin neutralises the primitive ghost's\n        // dark:hover:bg-muted/50 so only the token fill applies.\n        'dark:hover:bg-berget-button-ghost-hover',\n        `\n          active:bg-berget-button-ghost-active\n          dark:active:bg-berget-button-ghost-active\n        `,\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-transparent',\n      );\n    case 'link':\n      // Rendered without buttonVariants — needs its own sizing, focus ring and\n      // disabled treatment (the primitive's fade is not legible on text links).\n      return cn(\n        `\n          h-auto bg-transparent p-0 font-medium text-berget-button-link-fg\n          underline-offset-4 shadow-none\n        `,\n        'hover:bg-transparent hover:text-berget-button-link-hover-fg',\n        // On press, return to the resting foreground (hover fg otherwise sticks).\n        'active:text-berget-button-link-fg',\n        'focus:bg-transparent',\n        // Neutralise the primitive base's focus-visible:border-ring + ring-3,\n        // which land on link too (the primitive merges its cva base under\n        // every variant): the outline above is the only focus indicator.\n        'focus-visible:border-transparent focus-visible:ring-0',\n        `\n          focus-visible:rounded-berget-xs focus-visible:outline-2\n          focus-visible:outline-offset-2\n          focus-visible:outline-berget-button-focus-ring\n          focus-visible:outline-solid\n        `,\n        'disabled:text-berget-button-disabled-fg disabled:no-underline',\n        'disabled:cursor-not-allowed disabled:opacity-100',\n      );\n\n    case 'default':\n    default:\n      return cn(\n        // Solid granite-800 fill with a granite-700 border on dark surfaces\n        // (ink glass in light theme).\n        `\n          border-berget-button-default-border bg-berget-button-default-bg\n          text-berget-button-default-fg\n        `,\n        'hover:bg-berget-button-default-hover',\n        'active:bg-berget-button-default-active',\n        'focus-visible:border-transparent',\n        disabledClasses,\n        'disabled:bg-berget-button-default-disabled-bg',\n      );\n  }\n}\n\n/** Map custom variants to the closest upstream primitive variant. */\nfunction primitiveVariant(variant?: CustomVariant): VariantProps<typeof buttonVariants>['variant'] {\n  switch (variant) {\n    case 'primary':\n    case 'destructive':\n    case 'outline':\n    case 'ghost':\n      return 'ghost';\n    default:\n      return variant;\n  }\n}\n\nexport function Button({\n  className,\n  variant = 'default',\n  size,\n  asChild = false,\n  width = 'default',\n  type = 'button',\n  ref,\n  children,\n  ...props\n}: ButtonProps) {\n  const isIcon = typeof size === 'string' && size.startsWith('icon');\n  const isLink = variant === 'link';\n\n  const baseClass = cn(\n    !isLink && buttonVariants({ variant: primitiveVariant(variant), size }),\n    // Berget brand overrides — full-width buttons use the square radius;\n    // everything else stays pill-shaped.\n    !isLink && (width === 'full' ? 'rounded-berget-xs' : 'rounded-full'),\n    // Em-based padding, inline = 2× block — matches the 8px/16px spacing-scale\n    // values at the default text-sm (14px) and scales down/up with smaller or\n    // larger button text. h-auto drops the primitive's fixed h-* so the\n    // vertical paddings take effect.\n    !isLink && !isIcon && 'h-auto px-[1.14em] py-[0.57em]',\n    // Text ladder: size = typography scale; the em-based padding above\n    // follows automatically, so no per-size paddings are needed. Only\n    // default/lg/sm need overrides — xs keeps the primitive's text-xs.\n    !isLink &&\n      !isIcon &&\n      (size === 'lg'\n        ? 'text-lg'\n        : size === 'sm'\n          ? 'text-sm'\n          : size === 'xs'\n            ? ''\n            : `\n        text-base\n      `),\n    // Normal weight for every non-link variant — tailwind-merge strips the\n    // primitive's font-medium (font-weight: var(--font-weight-medium)); the\n    // link variant keeps medium via its own classes above.\n    !isLink && 'font-normal',\n    brandVariantClasses(variant),\n    interactionClasses,\n    !isLink && width === 'full' && 'w-full',\n    isIcon &&\n      `\n        rounded-full\n        shadow-[0px_1px_3px_rgba(0,0,0,0.1),0px_1px_2px_-1px_rgba(0,0,0,0.1)]\n      `,\n    className,\n  );\n\n  const content = (\n    <span className={cn('inline-flex items-center', !isIcon && 'gap-2')}>{children}</span>\n  );\n\n  return (\n    <ButtonPrimitive\n      className={baseClass}\n      ref={ref}\n      render={asChildRender(asChild, children)}\n      type={type}\n      {...props}\n    >\n      {asChild ? undefined : content}\n    </ButtonPrimitive>\n  );\n}\n\nexport { buttonVariants };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,qBAAqB,GAGzB;;;KAKA;;;KAMA,0CACF;;AAGA,MAAM,kBAAkB;;AAGxB,SAAS,oBAAoB,SAAiC;CAC5D,QAAQ,SAAR;EACE,KAAK,WACH,OAAO,GAEL,6DACA,wCAGA,uCACA,0CAEA,oCACA,iBACA,+CACF;EACF,KAAK,eACH,OAAO,GACL,qEACA,4CAGA,iDACA,8CACA,oCACA,iBACA,mDACF;EACF,KAAK,WACH,OAAO,GAKL;;;WASA;;;WAIA;;;WAKA,qDACA,iBACA,uEACF;EACF,KAAK,SAMH,OAAO,GACL,8CAIA,wEAGA,2CACA;;;WAIA,oCACA,iBACA,yBACF;EACF,KAAK,QAGH,OAAO,GACL;;;WAIA,+DAEA,qCACA,wBAIA,yDACA;;;;;WAMA,iEACA,kDACF;EAGF,SACE,OAAO,GAGL;;;WAIA,wCACA,0CACA,oCACA,iBACA,+CACF;CACJ;AACF;;AAGA,SAAS,iBAAiB,SAAyE;CACjG,QAAQ,SAAR;EACE,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK,SACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,SAAgB,OAAO,EACrB,WACA,UAAU,WACV,MACA,UAAU,OACV,QAAQ,WACR,OAAO,UACP,KACA,UACA,GAAG,SACW;CACd,MAAM,SAAS,OAAO,SAAS,YAAY,KAAK,WAAW,MAAM;CACjE,MAAM,SAAS,YAAY;CAE3B,MAAM,YAAY,GAChB,CAAC,UAAU,eAAe;EAAE,SAAS,iBAAiB,OAAO;EAAG;CAAK,CAAC,GAGtE,CAAC,WAAW,UAAU,SAAS,sBAAsB,iBAKrD,CAAC,UAAU,CAAC,UAAU,kCAItB,CAAC,UACC,CAAC,WACA,SAAS,OACN,YACA,SAAS,OACP,YACA,SAAS,OACP,KACA;;UAMV,CAAC,UAAU,eACX,oBAAoB,OAAO,GAC3B,oBACA,CAAC,UAAU,UAAU,UAAU,UAC/B,UACE;;;SAIF,SACF;CAEA,MAAM,UACJ,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,CAAC,UAAU,OAAO;EAAI;CAAe,CAAA;CAGvF,OACE,oBAACA,UAAD;EACE,WAAW;EACN;EACL,QAAQ,cAAc,SAAS,QAAQ;EACjC;EACN,GAAI;EAEH,UAAA,UAAU,KAAA,IAAY;CACR,CAAA;AAErB"}

package/dist/components/card/Card.cjs

@@ -8,8 +8,8 @@ let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/card/Card.tsx
 const cardVariants = (0, require("class-variance-authority").cva)("ring-0", {
 	variants: { variant: {
-		outlined: "bg-transparent border border-berget-border-subtle",
-		filled: "bg-berget-card-filled-bg border border-berget-border-subtle"
+		outlined: "border border-berget-border-subtle bg-transparent",
+		filled: "border border-berget-border-subtle bg-berget-card-filled-bg"
 	} },
 	defaultVariants: { variant: "outlined" }
 });

package/dist/components/card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","names":["cva","React","CardPrimitive","cn"],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport {\n  Card as CardPrimitive,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  CardAction,\n} from '../../primitives/card';\n\nconst cardVariants = cva('ring-0', {\n  variants: {\n    variant: {\n      outlined: 'bg-transparent border border-berget-border-subtle',\n      filled: 'bg-berget-card-filled-bg border border-berget-border-subtle',\n    },\n  },\n  defaultVariants: {\n    variant: 'outlined',\n  },\n});\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {\n  /** Spacing scale of the card. `sm` uses a compact 16px spacing, `default` 24px. */\n  size?: 'default' | 'sm';\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, size, children, ...props }, ref) => {\n    return (\n      <CardPrimitive\n        ref={ref}\n        size={size}\n        className={cn(cardVariants({ variant }), className)}\n        {...props}\n      >\n        {children}\n      </CardPrimitive>\n    );\n  },\n);\nCard.displayName = 'Card';\n\nexport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  CardAction,\n  cardVariants,\n};\n"],"mappings":";;;;;;;;AAeA,MAAM,gBAAA,G,kCAAeA,CAAAA,CAAAA,IAAAA,CAAI,UAAU;CACjC,UAAU,EACR,SAAS;EACP,UAAU;EACV,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,SAAS,WACX;AACF,CAAC;AAQD,MAAM,OAAOC,MAAM,YAChB,EAAE,WAAW,SAAS,MAAM,UAAU,GAAG,SAAS,QAAQ;CACzD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD;EACO;EACC;EACN,WAAWC,cAAAA,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;EAClD,GAAI;EAEH;CACY,CAAA;AAEnB,CACF;AACA,KAAK,cAAc"}
+{"version":3,"file":"Card.cjs","names":["cva","React","CardPrimitive","cn"],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport {\n  Card as CardPrimitive,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  CardAction,\n} from '../../primitives/card';\n\nconst cardVariants = cva('ring-0', {\n  variants: {\n    variant: {\n      outlined: 'border border-berget-border-subtle bg-transparent',\n      filled: 'border border-berget-border-subtle bg-berget-card-filled-bg',\n    },\n  },\n  defaultVariants: {\n    variant: 'outlined',\n  },\n});\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {\n  /** Spacing scale of the card. `sm` uses a compact 16px spacing, `default` 24px. */\n  size?: 'default' | 'sm';\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, size, children, ...props }, ref) => {\n    return (\n      <CardPrimitive\n        ref={ref}\n        size={size}\n        className={cn(cardVariants({ variant }), className)}\n        {...props}\n      >\n        {children}\n      </CardPrimitive>\n    );\n  },\n);\nCard.displayName = 'Card';\n\nexport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  CardAction,\n  cardVariants,\n};\n"],"mappings":";;;;;;;;AAeA,MAAM,gBAAA,G,kCAAeA,CAAAA,CAAAA,IAAAA,CAAI,UAAU;CACjC,UAAU,EACR,SAAS;EACP,UAAU;EACV,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,SAAS,WACX;AACF,CAAC;AAQD,MAAM,OAAOC,MAAM,YAChB,EAAE,WAAW,SAAS,MAAM,UAAU,GAAG,SAAS,QAAQ;CACzD,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD;EACO;EACC;EACN,WAAWC,cAAAA,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;EAClD,GAAI;EAEH;CACY,CAAA;AAEnB,CACF;AACA,KAAK,cAAc"}

package/dist/components/card/Card.mjs

@@ -7,8 +7,8 @@ import { cva } from "class-variance-authority";
 //#region src/components/card/Card.tsx
 const cardVariants = cva("ring-0", {
 	variants: { variant: {
-		outlined: "bg-transparent border border-berget-border-subtle",
-		filled: "bg-berget-card-filled-bg border border-berget-border-subtle"
+		outlined: "border border-berget-border-subtle bg-transparent",
+		filled: "border border-berget-border-subtle bg-berget-card-filled-bg"
 	} },
 	defaultVariants: { variant: "outlined" }
 });

package/dist/components/card/Card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.mjs","names":["CardPrimitive"],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport {\n  Card as CardPrimitive,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  CardAction,\n} from '../../primitives/card';\n\nconst cardVariants = cva('ring-0', {\n  variants: {\n    variant: {\n      outlined: 'bg-transparent border border-berget-border-subtle',\n      filled: 'bg-berget-card-filled-bg border border-berget-border-subtle',\n    },\n  },\n  defaultVariants: {\n    variant: 'outlined',\n  },\n});\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {\n  /** Spacing scale of the card. `sm` uses a compact 16px spacing, `default` 24px. */\n  size?: 'default' | 'sm';\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, size, children, ...props }, ref) => {\n    return (\n      <CardPrimitive\n        ref={ref}\n        size={size}\n        className={cn(cardVariants({ variant }), className)}\n        {...props}\n      >\n        {children}\n      </CardPrimitive>\n    );\n  },\n);\nCard.displayName = 'Card';\n\nexport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  CardAction,\n  cardVariants,\n};\n"],"mappings":";;;;;;;AAeA,MAAM,eAAe,IAAI,UAAU;CACjC,UAAU,EACR,SAAS;EACP,UAAU;EACV,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,SAAS,WACX;AACF,CAAC;AAQD,MAAM,OAAO,MAAM,YAChB,EAAE,WAAW,SAAS,MAAM,UAAU,GAAG,SAAS,QAAQ;CACzD,OACE,oBAACA,QAAD;EACO;EACC;EACN,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;EAClD,GAAI;EAEH;CACY,CAAA;AAEnB,CACF;AACA,KAAK,cAAc"}
+{"version":3,"file":"Card.mjs","names":["CardPrimitive"],"sources":["../../../src/components/card/Card.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport {\n  Card as CardPrimitive,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  CardAction,\n} from '../../primitives/card';\n\nconst cardVariants = cva('ring-0', {\n  variants: {\n    variant: {\n      outlined: 'border border-berget-border-subtle bg-transparent',\n      filled: 'border border-berget-border-subtle bg-berget-card-filled-bg',\n    },\n  },\n  defaultVariants: {\n    variant: 'outlined',\n  },\n});\n\nexport interface CardProps\n  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {\n  /** Spacing scale of the card. `sm` uses a compact 16px spacing, `default` 24px. */\n  size?: 'default' | 'sm';\n}\n\nconst Card = React.forwardRef<HTMLDivElement, CardProps>(\n  ({ className, variant, size, children, ...props }, ref) => {\n    return (\n      <CardPrimitive\n        ref={ref}\n        size={size}\n        className={cn(cardVariants({ variant }), className)}\n        {...props}\n      >\n        {children}\n      </CardPrimitive>\n    );\n  },\n);\nCard.displayName = 'Card';\n\nexport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardDescription,\n  CardContent,\n  CardFooter,\n  CardAction,\n  cardVariants,\n};\n"],"mappings":";;;;;;;AAeA,MAAM,eAAe,IAAI,UAAU;CACjC,UAAU,EACR,SAAS;EACP,UAAU;EACV,QAAQ;CACV,EACF;CACA,iBAAiB,EACf,SAAS,WACX;AACF,CAAC;AAQD,MAAM,OAAO,MAAM,YAChB,EAAE,WAAW,SAAS,MAAM,UAAU,GAAG,SAAS,QAAQ;CACzD,OACE,oBAACA,QAAD;EACO;EACC;EACN,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;EAClD,GAAI;EAEH;CACY,CAAA;AAEnB,CACF;AACA,KAAK,cAAc"}

package/dist/components/checkbox/Checkbox.cjs

@@ -10,17 +10,34 @@ let class_variance_authority = require("class-variance-authority");
 let lucide_react = require("lucide-react");
 let _base_ui_react_checkbox = require("@base-ui/react/checkbox");
 //#region src/components/checkbox/Checkbox.tsx
-const checkboxVariants = (0, class_variance_authority.cva)("inline-flex items-center justify-center rounded-berget-xs transition-all duration-200 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", {
+const checkboxVariants = (0, class_variance_authority.cva)(`
+    inline-flex items-center justify-center rounded-berget-xs transition-all
+    duration-200
+    focus-visible:outline-none
+    disabled:cursor-not-allowed disabled:opacity-50
+  `, {
 	variants: {
 		variant: {
-			default: "text-foreground border border-berget-border-interactive bg-berget-surface-subtle hover:bg-berget-surface-raised",
-			error: "border border-berget-destructive-border bg-berget-destructive text-berget-destructive-foreground hover:bg-berget-destructive/90",
-			success: "border border-berget-success-border bg-berget-success text-berget-success-foreground hover:bg-berget-success/90"
+			default: `
+          border border-berget-border-interactive bg-berget-surface-subtle
+          text-foreground
+          hover:bg-berget-surface-raised
+        `,
+			error: `
+          border border-berget-destructive-border bg-berget-destructive
+          text-berget-destructive-foreground
+          hover:bg-berget-destructive/90
+        `,
+			success: `
+          border border-berget-success-border bg-berget-success
+          text-berget-success-foreground
+          hover:bg-berget-success/90
+        `
 		},
 		size: {
-			sm: "w-4 h-4",
-			default: "w-5 h-5",
-			lg: "w-6 h-6"
+			sm: "size-4",
+			default: "size-5",
+			lg: "size-6"
 		}
 	},
 	defaultVariants: {
@@ -46,10 +63,10 @@ const Checkbox = react.forwardRef(({ "aria-label": ariaLabel, className, variant
 				className: require_utils.cn(checkboxVariants({
 					variant,
 					size
-				}), "cursor-pointer", disabled && "cursor-not-allowed pointer-events-none", className),
+				}), "cursor-pointer", disabled && "pointer-events-none cursor-not-allowed", className),
 				...props,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_checkbox.Checkbox.Indicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, {
-					className: "h-4 w-4 text-current stroke-current",
+					className: "size-4 stroke-current text-current",
 					style: {
 						color: "currentColor",
 						stroke: "currentColor"
@@ -61,7 +78,7 @@ const Checkbox = react.forwardRef(({ "aria-label": ariaLabel, className, variant
 			children: [
 				label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
 					htmlFor: checkboxId,
-					className: require_utils.cn("text-sm font-sans leading-none", disabled ? "text-white/40 cursor-not-allowed" : variant === "error" ? "text-berget-destructive-foreground cursor-pointer" : variant === "success" ? "text-berget-success-foreground cursor-pointer" : "cursor-pointer", error && "text-berget-destructive-foreground"),
+					className: require_utils.cn("font-sans text-sm leading-none", disabled ? "cursor-not-allowed text-white/40" : variant === "error" ? "cursor-pointer text-berget-destructive-foreground" : variant === "success" ? "cursor-pointer text-berget-success-foreground" : "cursor-pointer", error && "text-berget-destructive-foreground"),
 					children: label
 				}),
 				description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
@@ -72,7 +89,7 @@ const Checkbox = react.forwardRef(({ "aria-label": ariaLabel, className, variant
 				error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Typography.Typography, {
 					variant: "xs",
 					id: errorId,
-					className: "text-berget-destructive-foreground",
+					className: "\n                text-berget-destructive-foreground\n              ",
 					children: error
 				})
 			]

package/dist/components/checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","names":["cva","React","CheckboxBase","cn","CheckboxPrimitive","Check","Typography"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Checkbox as CheckboxBase } from '../../primitives/checkbox';\nimport { Typography } from '../typography';\n\nconst checkboxVariants = cva(\n  'inline-flex items-center justify-center rounded-berget-xs transition-all duration-200 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default:\n          'text-foreground border border-berget-border-interactive bg-berget-surface-subtle hover:bg-berget-surface-raised',\n        error:\n          'border border-berget-destructive-border bg-berget-destructive text-berget-destructive-foreground hover:bg-berget-destructive/90',\n        success:\n          'border border-berget-success-border bg-berget-success text-berget-success-foreground hover:bg-berget-success/90',\n      },\n      size: {\n        sm: 'w-4 h-4',\n        default: 'w-5 h-5',\n        lg: 'w-6 h-6',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport interface CheckboxProps\n  extends\n    Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'className'>,\n    VariantProps<typeof checkboxVariants> {\n  label?: string;\n  description?: string;\n  error?: string;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      variant,\n      size,\n      label,\n      description,\n      error,\n      id,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const checkboxId = id || generatedId;\n    const errorId = `${checkboxId}-error`;\n\n    return (\n      <div className=\"flex items-start gap-3\">\n        <div className=\"relative flex items-start pt-0.5\">\n          <CheckboxBase\n            ref={ref}\n            id={checkboxId}\n            disabled={disabled}\n            aria-invalid={!!error}\n            aria-describedby={error ? errorId : undefined}\n            aria-label={ariaLabel || label || undefined}\n            className={cn(\n              checkboxVariants({ variant, size }),\n              'cursor-pointer',\n              disabled && 'cursor-not-allowed pointer-events-none',\n              className,\n            )}\n            {...props}\n          >\n            <CheckboxPrimitive.Indicator>\n              <Check\n                className=\"h-4 w-4 text-current stroke-current\"\n                style={{ color: 'currentColor', stroke: 'currentColor' }}\n              />\n            </CheckboxPrimitive.Indicator>\n          </CheckboxBase>\n        </div>\n\n        {(label || description || error) && (\n          <div className=\"flex flex-col gap-1\">\n            {label && (\n              <label\n                htmlFor={checkboxId}\n                className={cn(\n                  'text-sm font-sans leading-none',\n                  disabled\n                    ? 'text-white/40 cursor-not-allowed'\n                    : variant === 'error'\n                      ? 'text-berget-destructive-foreground cursor-pointer'\n                      : variant === 'success'\n                        ? 'text-berget-success-foreground cursor-pointer'\n                        : 'cursor-pointer',\n                  error && 'text-berget-destructive-foreground',\n                )}\n              >\n                {label}\n              </label>\n            )}\n            {description && (\n              <Typography variant=\"xs\" color=\"muted\">\n                {description}\n              </Typography>\n            )}\n            {error && (\n              <Typography variant=\"xs\" id={errorId} className=\"text-berget-destructive-foreground\">\n                {error}\n              </Typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, checkboxVariants };\n"],"mappings":";;;;;;;;;;;;AAUA,MAAM,oBAAA,GAAmBA,yBAAAA,IAAAA,CACvB,oKACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,OACE;GACF,SACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAYA,MAAM,WAAWC,MAAM,YAEnB,EACE,cAAc,WACd,WACA,SACA,MACA,OACA,aACA,OACA,IACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,cAAcA,MAAM,MAAM;CAChC,MAAM,aAAa,MAAM;CACzB,MAAM,UAAU,GAAG,WAAW;CAE9B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;IACO;IACL,IAAI;IACM;IACV,gBAAc,CAAC,CAAC;IAChB,oBAAkB,QAAQ,UAAU,KAAA;IACpC,cAAY,aAAa,SAAS,KAAA;IAClC,WAAWC,cAAAA,GACT,iBAAiB;KAAE;KAAS;IAAK,CAAC,GAClC,kBACA,YAAY,0CACZ,SACF;IACA,GAAI;IAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,SAAkB,WAAnB,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,OAAD;KACE,WAAU;KACV,OAAO;MAAE,OAAO;MAAgB,QAAQ;KAAe;IACxD,CAAA,EAC0B,CAAA;GACjB,CAAA;EACX,CAAA,IAEH,SAAS,eAAe,UACxB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KACE,SAAS;KACT,WAAWF,cAAAA,GACT,kCACA,WACI,qCACA,YAAY,UACV,sDACA,YAAY,YACV,kDACA,kBACR,SAAS,oCACX;KAEC,UAAA;IACI,CAAA;IAER,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACG,mBAAAA,YAAD;KAAY,SAAQ;KAAK,OAAM;KAC5B,UAAA;IACS,CAAA;IAEb,SACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;KAAY,SAAQ;KAAK,IAAI;KAAS,WAAU;KAC7C,UAAA;IACS,CAAA;GAEX;EAEJ,CAAA,CAAA;;AAET,CACF;AACA,SAAS,cAAc"}
+{"version":3,"file":"Checkbox.cjs","names":["cva","React","CheckboxBase","cn","CheckboxPrimitive","Check","Typography"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Checkbox as CheckboxBase } from '../../primitives/checkbox';\nimport { Typography } from '../typography';\n\nconst checkboxVariants = cva(\n  `\n    inline-flex items-center justify-center rounded-berget-xs transition-all\n    duration-200\n    focus-visible:outline-none\n    disabled:cursor-not-allowed disabled:opacity-50\n  `,\n  {\n    variants: {\n      variant: {\n        default: `\n          border border-berget-border-interactive bg-berget-surface-subtle\n          text-foreground\n          hover:bg-berget-surface-raised\n        `,\n        error: `\n          border border-berget-destructive-border bg-berget-destructive\n          text-berget-destructive-foreground\n          hover:bg-berget-destructive/90\n        `,\n        success: `\n          border border-berget-success-border bg-berget-success\n          text-berget-success-foreground\n          hover:bg-berget-success/90\n        `,\n      },\n      size: {\n        sm: 'size-4',\n        default: 'size-5',\n        lg: 'size-6',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport interface CheckboxProps\n  extends\n    Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'className'>,\n    VariantProps<typeof checkboxVariants> {\n  label?: string;\n  description?: string;\n  error?: string;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      variant,\n      size,\n      label,\n      description,\n      error,\n      id,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const checkboxId = id || generatedId;\n    const errorId = `${checkboxId}-error`;\n\n    return (\n      <div className=\"flex items-start gap-3\">\n        <div className=\"relative flex items-start pt-0.5\">\n          <CheckboxBase\n            ref={ref}\n            id={checkboxId}\n            disabled={disabled}\n            aria-invalid={!!error}\n            aria-describedby={error ? errorId : undefined}\n            aria-label={ariaLabel || label || undefined}\n            className={cn(\n              checkboxVariants({ variant, size }),\n              'cursor-pointer',\n              disabled && 'pointer-events-none cursor-not-allowed',\n              className,\n            )}\n            {...props}\n          >\n            <CheckboxPrimitive.Indicator>\n              <Check\n                className=\"size-4 stroke-current text-current\"\n                style={{ color: 'currentColor', stroke: 'currentColor' }}\n              />\n            </CheckboxPrimitive.Indicator>\n          </CheckboxBase>\n        </div>\n\n        {(label || description || error) && (\n          <div className=\"flex flex-col gap-1\">\n            {label && (\n              <label\n                htmlFor={checkboxId}\n                className={cn(\n                  'font-sans text-sm leading-none',\n                  disabled\n                    ? 'cursor-not-allowed text-white/40'\n                    : variant === 'error'\n                      ? 'cursor-pointer text-berget-destructive-foreground'\n                      : variant === 'success'\n                        ? 'cursor-pointer text-berget-success-foreground'\n                        : 'cursor-pointer',\n                  error && 'text-berget-destructive-foreground',\n                )}\n              >\n                {label}\n              </label>\n            )}\n            {description && (\n              <Typography variant=\"xs\" color=\"muted\">\n                {description}\n              </Typography>\n            )}\n            {error && (\n              <Typography\n                variant=\"xs\"\n                id={errorId}\n                className=\"\n                text-berget-destructive-foreground\n              \"\n              >\n                {error}\n              </Typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, checkboxVariants };\n"],"mappings":";;;;;;;;;;;;AAUA,MAAM,oBAAA,GAAmBA,yBAAAA,IAAAA,CACvB;;;;;KAMA;CACE,UAAU;EACR,SAAS;GACP,SAAS;;;;;GAKT,OAAO;;;;;GAKP,SAAS;;;;;EAKX;EACA,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAYA,MAAM,WAAWC,MAAM,YAEnB,EACE,cAAc,WACd,WACA,SACA,MACA,OACA,aACA,OACA,IACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,cAAcA,MAAM,MAAM;CAChC,MAAM,aAAa,MAAM;CACzB,MAAM,UAAU,GAAG,WAAW;CAE9B,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,WAAU;GACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,iBAAAA,UAAD;IACO;IACL,IAAI;IACM;IACV,gBAAc,CAAC,CAAC;IAChB,oBAAkB,QAAQ,UAAU,KAAA;IACpC,cAAY,aAAa,SAAS,KAAA;IAClC,WAAWC,cAAAA,GACT,iBAAiB;KAAE;KAAS;IAAK,CAAC,GAClC,kBACA,YAAY,0CACZ,SACF;IACA,GAAI;IAEJ,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,SAAkB,WAAnB,EAAA,UACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,OAAD;KACE,WAAU;KACV,OAAO;MAAE,OAAO;MAAgB,QAAQ;KAAe;IACxD,CAAA,EAC0B,CAAA;GACjB,CAAA;EACX,CAAA,IAEH,SAAS,eAAe,UACxB,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;KACE,SAAS;KACT,WAAWF,cAAAA,GACT,kCACA,WACI,qCACA,YAAY,UACV,sDACA,YAAY,YACV,kDACA,kBACR,SAAS,oCACX;KAEC,UAAA;IACI,CAAA;IAER,eACC,iBAAA,GAAA,kBAAA,IAAA,CAACG,mBAAAA,YAAD;KAAY,SAAQ;KAAK,OAAM;KAC5B,UAAA;IACS,CAAA;IAEb,SACC,iBAAA,GAAA,kBAAA,IAAA,CAACA,mBAAAA,YAAD;KACE,SAAQ;KACR,IAAI;KACJ,WAAU;KAIT,UAAA;IACS,CAAA;GAEX;EAEJ,CAAA,CAAA;;AAET,CACF;AACA,SAAS,cAAc"}

package/dist/components/checkbox/Checkbox.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.cts","names":["CheckboxPrimitive","Checkbox"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"mappings":";;;;cAUM,mBAAgB;;;6CAuBrB;iBAEgB,sBAEb,KAAK,MAAM,gCAAgCA,SAAkB,qBAC7D,oBAAoB;EACtB;EACA;EACA;EACA;;cAGIC,YAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}
+{"version":3,"file":"Checkbox.d.cts","names":["CheckboxPrimitive","Checkbox"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"mappings":";;;;cAUM,mBAAgB;;;6CAqCrB;iBAEgB,sBAEb,KAAK,MAAM,gCAAgCA,SAAkB,qBAC7D,oBAAoB;EACtB;EACA;EACA;EACA;;cAGIC,YAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}

package/dist/components/checkbox/Checkbox.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.mts","names":["CheckboxPrimitive","Checkbox"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"mappings":";;;;cAUM,mBAAgB;;;6CAuBrB;iBAEgB,sBAEb,KAAK,MAAM,gCAAgCA,SAAkB,qBAC7D,oBAAoB;EACtB;EACA;EACA;EACA;;cAGIC,YAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}
+{"version":3,"file":"Checkbox.d.mts","names":["CheckboxPrimitive","Checkbox"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"mappings":";;;;cAUM,mBAAgB;;;6CAqCrB;iBAEgB,sBAEb,KAAK,MAAM,gCAAgCA,SAAkB,qBAC7D,oBAAoB;EACtB;EACA;EACA;EACA;;cAGIC,YAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}

package/dist/components/checkbox/Checkbox.mjs

@@ -8,17 +8,34 @@ import { cva } from "class-variance-authority";
 import { Check } from "lucide-react";
 import { Checkbox } from "@base-ui/react/checkbox";
 //#region src/components/checkbox/Checkbox.tsx
-const checkboxVariants = cva("inline-flex items-center justify-center rounded-berget-xs transition-all duration-200 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", {
+const checkboxVariants = cva(`
+    inline-flex items-center justify-center rounded-berget-xs transition-all
+    duration-200
+    focus-visible:outline-none
+    disabled:cursor-not-allowed disabled:opacity-50
+  `, {
 	variants: {
 		variant: {
-			default: "text-foreground border border-berget-border-interactive bg-berget-surface-subtle hover:bg-berget-surface-raised",
-			error: "border border-berget-destructive-border bg-berget-destructive text-berget-destructive-foreground hover:bg-berget-destructive/90",
-			success: "border border-berget-success-border bg-berget-success text-berget-success-foreground hover:bg-berget-success/90"
+			default: `
+          border border-berget-border-interactive bg-berget-surface-subtle
+          text-foreground
+          hover:bg-berget-surface-raised
+        `,
+			error: `
+          border border-berget-destructive-border bg-berget-destructive
+          text-berget-destructive-foreground
+          hover:bg-berget-destructive/90
+        `,
+			success: `
+          border border-berget-success-border bg-berget-success
+          text-berget-success-foreground
+          hover:bg-berget-success/90
+        `
 		},
 		size: {
-			sm: "w-4 h-4",
-			default: "w-5 h-5",
-			lg: "w-6 h-6"
+			sm: "size-4",
+			default: "size-5",
+			lg: "size-6"
 		}
 	},
 	defaultVariants: {
@@ -44,10 +61,10 @@ const Checkbox$1 = React.forwardRef(({ "aria-label": ariaLabel, className, varia
 				className: cn(checkboxVariants({
 					variant,
 					size
-				}), "cursor-pointer", disabled && "cursor-not-allowed pointer-events-none", className),
+				}), "cursor-pointer", disabled && "pointer-events-none cursor-not-allowed", className),
 				...props,
 				children: /* @__PURE__ */ jsx(Checkbox.Indicator, { children: /* @__PURE__ */ jsx(Check, {
-					className: "h-4 w-4 text-current stroke-current",
+					className: "size-4 stroke-current text-current",
 					style: {
 						color: "currentColor",
 						stroke: "currentColor"
@@ -59,7 +76,7 @@ const Checkbox$1 = React.forwardRef(({ "aria-label": ariaLabel, className, varia
 			children: [
 				label && /* @__PURE__ */ jsx("label", {
 					htmlFor: checkboxId,
-					className: cn("text-sm font-sans leading-none", disabled ? "text-white/40 cursor-not-allowed" : variant === "error" ? "text-berget-destructive-foreground cursor-pointer" : variant === "success" ? "text-berget-success-foreground cursor-pointer" : "cursor-pointer", error && "text-berget-destructive-foreground"),
+					className: cn("font-sans text-sm leading-none", disabled ? "cursor-not-allowed text-white/40" : variant === "error" ? "cursor-pointer text-berget-destructive-foreground" : variant === "success" ? "cursor-pointer text-berget-success-foreground" : "cursor-pointer", error && "text-berget-destructive-foreground"),
 					children: label
 				}),
 				description && /* @__PURE__ */ jsx(Typography, {
@@ -70,7 +87,7 @@ const Checkbox$1 = React.forwardRef(({ "aria-label": ariaLabel, className, varia
 				error && /* @__PURE__ */ jsx(Typography, {
 					variant: "xs",
 					id: errorId,
-					className: "text-berget-destructive-foreground",
+					className: "\n                text-berget-destructive-foreground\n              ",
 					children: error
 				})
 			]

package/dist/components/checkbox/Checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.mjs","names":["Checkbox","CheckboxBase","CheckboxPrimitive"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Checkbox as CheckboxBase } from '../../primitives/checkbox';\nimport { Typography } from '../typography';\n\nconst checkboxVariants = cva(\n  'inline-flex items-center justify-center rounded-berget-xs transition-all duration-200 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        default:\n          'text-foreground border border-berget-border-interactive bg-berget-surface-subtle hover:bg-berget-surface-raised',\n        error:\n          'border border-berget-destructive-border bg-berget-destructive text-berget-destructive-foreground hover:bg-berget-destructive/90',\n        success:\n          'border border-berget-success-border bg-berget-success text-berget-success-foreground hover:bg-berget-success/90',\n      },\n      size: {\n        sm: 'w-4 h-4',\n        default: 'w-5 h-5',\n        lg: 'w-6 h-6',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport interface CheckboxProps\n  extends\n    Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'className'>,\n    VariantProps<typeof checkboxVariants> {\n  label?: string;\n  description?: string;\n  error?: string;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      variant,\n      size,\n      label,\n      description,\n      error,\n      id,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const checkboxId = id || generatedId;\n    const errorId = `${checkboxId}-error`;\n\n    return (\n      <div className=\"flex items-start gap-3\">\n        <div className=\"relative flex items-start pt-0.5\">\n          <CheckboxBase\n            ref={ref}\n            id={checkboxId}\n            disabled={disabled}\n            aria-invalid={!!error}\n            aria-describedby={error ? errorId : undefined}\n            aria-label={ariaLabel || label || undefined}\n            className={cn(\n              checkboxVariants({ variant, size }),\n              'cursor-pointer',\n              disabled && 'cursor-not-allowed pointer-events-none',\n              className,\n            )}\n            {...props}\n          >\n            <CheckboxPrimitive.Indicator>\n              <Check\n                className=\"h-4 w-4 text-current stroke-current\"\n                style={{ color: 'currentColor', stroke: 'currentColor' }}\n              />\n            </CheckboxPrimitive.Indicator>\n          </CheckboxBase>\n        </div>\n\n        {(label || description || error) && (\n          <div className=\"flex flex-col gap-1\">\n            {label && (\n              <label\n                htmlFor={checkboxId}\n                className={cn(\n                  'text-sm font-sans leading-none',\n                  disabled\n                    ? 'text-white/40 cursor-not-allowed'\n                    : variant === 'error'\n                      ? 'text-berget-destructive-foreground cursor-pointer'\n                      : variant === 'success'\n                        ? 'text-berget-success-foreground cursor-pointer'\n                        : 'cursor-pointer',\n                  error && 'text-berget-destructive-foreground',\n                )}\n              >\n                {label}\n              </label>\n            )}\n            {description && (\n              <Typography variant=\"xs\" color=\"muted\">\n                {description}\n              </Typography>\n            )}\n            {error && (\n              <Typography variant=\"xs\" id={errorId} className=\"text-berget-destructive-foreground\">\n                {error}\n              </Typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, checkboxVariants };\n"],"mappings":";;;;;;;;;;AAUA,MAAM,mBAAmB,IACvB,oKACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,OACE;GACF,SACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAYA,MAAMA,aAAW,MAAM,YAEnB,EACE,cAAc,WACd,WACA,SACA,MACA,OACA,aACA,OACA,IACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,cAAc,MAAM,MAAM;CAChC,MAAM,aAAa,MAAM;CACzB,MAAM,UAAU,GAAG,WAAW;CAE9B,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAACC,YAAD;IACO;IACL,IAAI;IACM;IACV,gBAAc,CAAC,CAAC;IAChB,oBAAkB,QAAQ,UAAU,KAAA;IACpC,cAAY,aAAa,SAAS,KAAA;IAClC,WAAW,GACT,iBAAiB;KAAE;KAAS;IAAK,CAAC,GAClC,kBACA,YAAY,0CACZ,SACF;IACA,GAAI;IAEJ,UAAA,oBAACC,SAAkB,WAAnB,EAAA,UACE,oBAAC,OAAD;KACE,WAAU;KACV,OAAO;MAAE,OAAO;MAAgB,QAAQ;KAAe;IACxD,CAAA,EAC0B,CAAA;GACjB,CAAA;EACX,CAAA,IAEH,SAAS,eAAe,UACxB,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACG,SACC,oBAAC,SAAD;KACE,SAAS;KACT,WAAW,GACT,kCACA,WACI,qCACA,YAAY,UACV,sDACA,YAAY,YACV,kDACA,kBACR,SAAS,oCACX;KAEC,UAAA;IACI,CAAA;IAER,eACC,oBAAC,YAAD;KAAY,SAAQ;KAAK,OAAM;KAC5B,UAAA;IACS,CAAA;IAEb,SACC,oBAAC,YAAD;KAAY,SAAQ;KAAK,IAAI;KAAS,WAAU;KAC7C,UAAA;IACS,CAAA;GAEX;EAEJ,CAAA,CAAA;;AAET,CACF;AACA,WAAS,cAAc"}
+{"version":3,"file":"Checkbox.mjs","names":["Checkbox","CheckboxBase","CheckboxPrimitive"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui/react/checkbox';\nimport { Check } from 'lucide-react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../lib/utils';\nimport { Checkbox as CheckboxBase } from '../../primitives/checkbox';\nimport { Typography } from '../typography';\n\nconst checkboxVariants = cva(\n  `\n    inline-flex items-center justify-center rounded-berget-xs transition-all\n    duration-200\n    focus-visible:outline-none\n    disabled:cursor-not-allowed disabled:opacity-50\n  `,\n  {\n    variants: {\n      variant: {\n        default: `\n          border border-berget-border-interactive bg-berget-surface-subtle\n          text-foreground\n          hover:bg-berget-surface-raised\n        `,\n        error: `\n          border border-berget-destructive-border bg-berget-destructive\n          text-berget-destructive-foreground\n          hover:bg-berget-destructive/90\n        `,\n        success: `\n          border border-berget-success-border bg-berget-success\n          text-berget-success-foreground\n          hover:bg-berget-success/90\n        `,\n      },\n      size: {\n        sm: 'size-4',\n        default: 'size-5',\n        lg: 'size-6',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default',\n    },\n  },\n);\n\nexport interface CheckboxProps\n  extends\n    Omit<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>, 'className'>,\n    VariantProps<typeof checkboxVariants> {\n  label?: string;\n  description?: string;\n  error?: string;\n  className?: string;\n}\n\nconst Checkbox = React.forwardRef<React.ComponentRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(\n  (\n    {\n      'aria-label': ariaLabel,\n      className,\n      variant,\n      size,\n      label,\n      description,\n      error,\n      id,\n      disabled,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const checkboxId = id || generatedId;\n    const errorId = `${checkboxId}-error`;\n\n    return (\n      <div className=\"flex items-start gap-3\">\n        <div className=\"relative flex items-start pt-0.5\">\n          <CheckboxBase\n            ref={ref}\n            id={checkboxId}\n            disabled={disabled}\n            aria-invalid={!!error}\n            aria-describedby={error ? errorId : undefined}\n            aria-label={ariaLabel || label || undefined}\n            className={cn(\n              checkboxVariants({ variant, size }),\n              'cursor-pointer',\n              disabled && 'pointer-events-none cursor-not-allowed',\n              className,\n            )}\n            {...props}\n          >\n            <CheckboxPrimitive.Indicator>\n              <Check\n                className=\"size-4 stroke-current text-current\"\n                style={{ color: 'currentColor', stroke: 'currentColor' }}\n              />\n            </CheckboxPrimitive.Indicator>\n          </CheckboxBase>\n        </div>\n\n        {(label || description || error) && (\n          <div className=\"flex flex-col gap-1\">\n            {label && (\n              <label\n                htmlFor={checkboxId}\n                className={cn(\n                  'font-sans text-sm leading-none',\n                  disabled\n                    ? 'cursor-not-allowed text-white/40'\n                    : variant === 'error'\n                      ? 'cursor-pointer text-berget-destructive-foreground'\n                      : variant === 'success'\n                        ? 'cursor-pointer text-berget-success-foreground'\n                        : 'cursor-pointer',\n                  error && 'text-berget-destructive-foreground',\n                )}\n              >\n                {label}\n              </label>\n            )}\n            {description && (\n              <Typography variant=\"xs\" color=\"muted\">\n                {description}\n              </Typography>\n            )}\n            {error && (\n              <Typography\n                variant=\"xs\"\n                id={errorId}\n                className=\"\n                text-berget-destructive-foreground\n              \"\n              >\n                {error}\n              </Typography>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nCheckbox.displayName = 'Checkbox';\n\nexport { Checkbox, checkboxVariants };\n"],"mappings":";;;;;;;;;;AAUA,MAAM,mBAAmB,IACvB;;;;;KAMA;CACE,UAAU;EACR,SAAS;GACP,SAAS;;;;;GAKT,OAAO;;;;;GAKP,SAAS;;;;;EAKX;EACA,MAAM;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAYA,MAAMA,aAAW,MAAM,YAEnB,EACE,cAAc,WACd,WACA,SACA,MACA,OACA,aACA,OACA,IACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,cAAc,MAAM,MAAM;CAChC,MAAM,aAAa,MAAM;CACzB,MAAM,UAAU,GAAG,WAAW;CAE9B,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAACC,YAAD;IACO;IACL,IAAI;IACM;IACV,gBAAc,CAAC,CAAC;IAChB,oBAAkB,QAAQ,UAAU,KAAA;IACpC,cAAY,aAAa,SAAS,KAAA;IAClC,WAAW,GACT,iBAAiB;KAAE;KAAS;IAAK,CAAC,GAClC,kBACA,YAAY,0CACZ,SACF;IACA,GAAI;IAEJ,UAAA,oBAACC,SAAkB,WAAnB,EAAA,UACE,oBAAC,OAAD;KACE,WAAU;KACV,OAAO;MAAE,OAAO;MAAgB,QAAQ;KAAe;IACxD,CAAA,EAC0B,CAAA;GACjB,CAAA;EACX,CAAA,IAEH,SAAS,eAAe,UACxB,qBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACG,SACC,oBAAC,SAAD;KACE,SAAS;KACT,WAAW,GACT,kCACA,WACI,qCACA,YAAY,UACV,sDACA,YAAY,YACV,kDACA,kBACR,SAAS,oCACX;KAEC,UAAA;IACI,CAAA;IAER,eACC,oBAAC,YAAD;KAAY,SAAQ;KAAK,OAAM;KAC5B,UAAA;IACS,CAAA;IAEb,SACC,oBAAC,YAAD;KACE,SAAQ;KACR,IAAI;KACJ,WAAU;KAIT,UAAA;IACS,CAAA;GAEX;EAEJ,CAAA,CAAA;;AAET,CACF;AACA,WAAS,cAAc"}

package/dist/components/code-block/CodeBlock.cjs

@@ -24,29 +24,32 @@ function CodeBlock({ code, language = "text", title, className }) {
 	}, [code]);
 	const copyButton = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		onClick: handleCopy,
-		className: "flex items-center justify-center w-6 h-6 text-berget-muted-foreground hover:text-berget-foreground transition-colors",
+		className: "\n        flex size-6 items-center justify-center text-berget-muted-foreground\n        transition-colors\n        hover:text-berget-foreground\n      ",
 		"aria-label": "Copy code",
-		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "w-3.5 h-3.5" })
+		children: copied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Check, { className: "size-3.5" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.Copy, { className: "size-3.5" })
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-		className: require_utils.cn("rounded-berget-xs border bg-berget-codeblock-bg border-berget-border backdrop-blur-[12px] relative overflow-hidden isolate", className),
+		className: require_utils.cn(`
+          relative isolate overflow-hidden rounded-berget-xs border
+          border-berget-border bg-berget-codeblock-bg backdrop-blur-md
+        `, className),
 		children: [
 			title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "!h-10 flex items-center !px-4 !text-xs !leading-normal border-b border-berget-border bg-berget-codeblock-header-bg",
+				className: "\n            flex h-10! items-center border-b border-berget-border\n            bg-berget-codeblock-header-bg px-4! text-xs/normal!\n          ",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 					className: "text-berget-muted-foreground",
 					children: title
 				})
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "absolute right-2 top-2 z-10",
+				className: "absolute top-2 right-2 z-10",
 				children: copyButton
 			}),
 			html ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				className: "[&_.shiki]:!p-4 [&_.shiki]:!m-0 [&_.shiki]:overflow-x-auto [&_.shiki]:!text-sm [&_.shiki]:!leading-relaxed [&_.shiki]:bg-transparent",
+				className: "\n            [&_.shiki]:m-0! [&_.shiki]:overflow-x-auto [&_.shiki]:bg-transparent\n            [&_.shiki]:p-4! [&_.shiki]:text-caption/relaxed!\n          ",
 				dangerouslySetInnerHTML: { __html: html }
 			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("pre", {
-				className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground",
+				className: "\n            m-0! overflow-x-auto p-4! text-caption/relaxed!\n            text-berget-muted-foreground\n          ",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("code", { children: code })
 			})
 		]

package/dist/components/code-block/CodeBlock.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.cjs","names":["useState","useCallback","Check","Copy","cn"],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { Copy, Check } from 'lucide-react';\nimport { cn } from '../../lib/utils';\nimport { getHighlighter } from '../../lib/shiki';\n\nexport interface CodeBlockProps {\n  code: string;\n  language?: string;\n  title?: string;\n  className?: string;\n}\n\nexport function CodeBlock({ code, language = 'text', title, className }: CodeBlockProps) {\n  const [html, setHtml] = useState<string | null>(null);\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => {\n    getHighlighter().then((highlighter) => {\n      const loadedLangs = highlighter.getLoadedLanguages();\n      const lang = loadedLangs.includes(language) ? language : 'text';\n      setHtml(highlighter.codeToHtml(code, { lang, theme: 'berget' }));\n    });\n  }, [code, language]);\n\n  const handleCopy = useCallback(async () => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [code]);\n\n  const copyButton = (\n    <button\n      onClick={handleCopy}\n      className=\"flex items-center justify-center w-6 h-6 text-berget-muted-foreground hover:text-berget-foreground transition-colors\"\n      aria-label=\"Copy code\"\n    >\n      {copied ? <Check className=\"w-3.5 h-3.5\" /> : <Copy className=\"w-3.5 h-3.5\" />}\n    </button>\n  );\n\n  return (\n    <div\n      className={cn(\n        'rounded-berget-xs border bg-berget-codeblock-bg border-berget-border backdrop-blur-[12px] relative overflow-hidden isolate',\n        className,\n      )}\n    >\n      {title && (\n        <div className=\"!h-10 flex items-center !px-4 !text-xs !leading-normal border-b border-berget-border bg-berget-codeblock-header-bg\">\n          <span className=\"text-berget-muted-foreground\">{title}</span>\n        </div>\n      )}\n      <div className=\"absolute right-2 top-2 z-10\">{copyButton}</div>\n      {html ? (\n        <div\n          className=\"[&_.shiki]:!p-4 [&_.shiki]:!m-0 [&_.shiki]:overflow-x-auto [&_.shiki]:!text-sm [&_.shiki]:!leading-relaxed [&_.shiki]:bg-transparent\"\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      ) : (\n        <pre className=\"!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground\">\n          <code>{code}</code>\n        </pre>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,UAAU,EAAE,MAAM,WAAW,QAAQ,OAAO,aAA6B;CACvF,MAAM,CAAC,MAAM,YAAA,GAAWA,MAAAA,SAAAA,CAAwB,IAAI;CACpD,MAAM,CAAC,QAAQ,cAAA,GAAaA,MAAAA,SAAAA,CAAS,KAAK;CAE1C,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,cAAA,eAAe,CAAC,CAAC,MAAM,gBAAgB;GAErC,MAAM,OADc,YAAY,mBACT,CAAC,CAAC,SAAS,QAAQ,IAAI,WAAW;GACzD,QAAQ,YAAY,WAAW,MAAM;IAAE;IAAM,OAAO;GAAS,CAAC,CAAC;EACjE,CAAC;CACH,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,MAAM,cAAA,GAAaC,MAAAA,YAAAA,CAAY,YAAY;EACzC,MAAM,UAAU,UAAU,UAAU,IAAI;EACxC,UAAU,IAAI;EACd,iBAAiB,UAAU,KAAK,GAAG,GAAI;CACzC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,aACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,SAAS;EACT,WAAU;EACV,cAAW;EAEV,UAAA,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,OAAD,EAAO,WAAU,cAAe,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD,EAAM,WAAU,cAAe,CAAA;CACvE,CAAA;CAGV,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,WAAWC,cAAAA,GACT,8HACA,SACF;EAJF,UAAA;GAMG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAAgC,UAAA;IAAY,CAAA;GACzD,CAAA;GAEP,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IAA+B,UAAA;GAAgB,CAAA;GAC7D,OACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAU;IACV,yBAAyB,EAAE,QAAQ,KAAK;GACzC,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IACb,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,KAAW,CAAA;GACf,CAAA;EAEJ;;AAET"}
+{"version":3,"file":"CodeBlock.cjs","names":["useState","useCallback","Check","Copy","cn"],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { Copy, Check } from 'lucide-react';\nimport { cn } from '../../lib/utils';\nimport { getHighlighter } from '../../lib/shiki';\n\nexport interface CodeBlockProps {\n  code: string;\n  language?: string;\n  title?: string;\n  className?: string;\n}\n\nexport function CodeBlock({ code, language = 'text', title, className }: CodeBlockProps) {\n  const [html, setHtml] = useState<string | null>(null);\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => {\n    getHighlighter().then((highlighter) => {\n      const loadedLangs = highlighter.getLoadedLanguages();\n      const lang = loadedLangs.includes(language) ? language : 'text';\n      setHtml(highlighter.codeToHtml(code, { lang, theme: 'berget' }));\n    });\n  }, [code, language]);\n\n  const handleCopy = useCallback(async () => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [code]);\n\n  const copyButton = (\n    <button\n      onClick={handleCopy}\n      className=\"\n        flex size-6 items-center justify-center text-berget-muted-foreground\n        transition-colors\n        hover:text-berget-foreground\n      \"\n      aria-label=\"Copy code\"\n    >\n      {copied ? <Check className=\"size-3.5\" /> : <Copy className=\"size-3.5\" />}\n    </button>\n  );\n\n  return (\n    <div\n      className={cn(\n        `\n          relative isolate overflow-hidden rounded-berget-xs border\n          border-berget-border bg-berget-codeblock-bg backdrop-blur-md\n        `,\n        className,\n      )}\n    >\n      {title && (\n        <div\n          className=\"\n            flex h-10! items-center border-b border-berget-border\n            bg-berget-codeblock-header-bg px-4! text-xs/normal!\n          \"\n        >\n          <span className=\"text-berget-muted-foreground\">{title}</span>\n        </div>\n      )}\n      <div className=\"absolute top-2 right-2 z-10\">{copyButton}</div>\n      {html ? (\n        <div\n          className=\"\n            [&_.shiki]:m-0! [&_.shiki]:overflow-x-auto [&_.shiki]:bg-transparent\n            [&_.shiki]:p-4! [&_.shiki]:text-caption/relaxed!\n          \"\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      ) : (\n        <pre\n          className=\"\n            m-0! overflow-x-auto p-4! text-caption/relaxed!\n            text-berget-muted-foreground\n          \"\n        >\n          <code>{code}</code>\n        </pre>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,UAAU,EAAE,MAAM,WAAW,QAAQ,OAAO,aAA6B;CACvF,MAAM,CAAC,MAAM,YAAA,GAAWA,MAAAA,SAAAA,CAAwB,IAAI;CACpD,MAAM,CAAC,QAAQ,cAAA,GAAaA,MAAAA,SAAAA,CAAS,KAAK;CAE1C,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,cAAA,eAAe,CAAC,CAAC,MAAM,gBAAgB;GAErC,MAAM,OADc,YAAY,mBACT,CAAC,CAAC,SAAS,QAAQ,IAAI,WAAW;GACzD,QAAQ,YAAY,WAAW,MAAM;IAAE;IAAM,OAAO;GAAS,CAAC,CAAC;EACjE,CAAC;CACH,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,MAAM,cAAA,GAAaC,MAAAA,YAAAA,CAAY,YAAY;EACzC,MAAM,UAAU,UAAU,UAAU,IAAI;EACxC,UAAU,IAAI;EACd,iBAAiB,UAAU,KAAK,GAAG,GAAI;CACzC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,aACJ,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;EACE,SAAS;EACT,WAAU;EAKV,cAAW;EAEV,UAAA,SAAS,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,OAAD,EAAO,WAAU,WAAY,CAAA,IAAI,iBAAA,GAAA,kBAAA,IAAA,CAACC,aAAAA,MAAD,EAAM,WAAU,WAAY,CAAA;CACjE,CAAA;CAGV,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EACE,WAAWC,cAAAA,GACT;;;WAIA,SACF;EAPF,UAAA;GASG,SACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAU;IAKV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,WAAU;KAAgC,UAAA;IAAY,CAAA;GACzD,CAAA;GAEP,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IAAK,WAAU;IAA+B,UAAA;GAAgB,CAAA;GAC7D,OACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAU;IAIV,yBAAyB,EAAE,QAAQ,KAAK;GACzC,CAAA,IAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;IACE,WAAU;IAKV,UAAA,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD,EAAA,UAAO,KAAW,CAAA;GACf,CAAA;EAEJ;;AAET"}

package/dist/components/code-block/CodeBlock.mjs

@@ -24,29 +24,32 @@ function CodeBlock({ code, language = "text", title, className }) {
 	}, [code]);
 	const copyButton = /* @__PURE__ */ jsx("button", {
 		onClick: handleCopy,
-		className: "flex items-center justify-center w-6 h-6 text-berget-muted-foreground hover:text-berget-foreground transition-colors",
+		className: "\n        flex size-6 items-center justify-center text-berget-muted-foreground\n        transition-colors\n        hover:text-berget-foreground\n      ",
 		"aria-label": "Copy code",
-		children: copied ? /* @__PURE__ */ jsx(Check, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "w-3.5 h-3.5" })
+		children: copied ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsx(Copy, { className: "size-3.5" })
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("rounded-berget-xs border bg-berget-codeblock-bg border-berget-border backdrop-blur-[12px] relative overflow-hidden isolate", className),
+		className: cn(`
+          relative isolate overflow-hidden rounded-berget-xs border
+          border-berget-border bg-berget-codeblock-bg backdrop-blur-md
+        `, className),
 		children: [
 			title && /* @__PURE__ */ jsx("div", {
-				className: "!h-10 flex items-center !px-4 !text-xs !leading-normal border-b border-berget-border bg-berget-codeblock-header-bg",
+				className: "\n            flex h-10! items-center border-b border-berget-border\n            bg-berget-codeblock-header-bg px-4! text-xs/normal!\n          ",
 				children: /* @__PURE__ */ jsx("span", {
 					className: "text-berget-muted-foreground",
 					children: title
 				})
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: "absolute right-2 top-2 z-10",
+				className: "absolute top-2 right-2 z-10",
 				children: copyButton
 			}),
 			html ? /* @__PURE__ */ jsx("div", {
-				className: "[&_.shiki]:!p-4 [&_.shiki]:!m-0 [&_.shiki]:overflow-x-auto [&_.shiki]:!text-sm [&_.shiki]:!leading-relaxed [&_.shiki]:bg-transparent",
+				className: "\n            [&_.shiki]:m-0! [&_.shiki]:overflow-x-auto [&_.shiki]:bg-transparent\n            [&_.shiki]:p-4! [&_.shiki]:text-caption/relaxed!\n          ",
 				dangerouslySetInnerHTML: { __html: html }
 			}) : /* @__PURE__ */ jsx("pre", {
-				className: "!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground",
+				className: "\n            m-0! overflow-x-auto p-4! text-caption/relaxed!\n            text-berget-muted-foreground\n          ",
 				children: /* @__PURE__ */ jsx("code", { children: code })
 			})
 		]

package/dist/components/code-block/CodeBlock.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { Copy, Check } from 'lucide-react';\nimport { cn } from '../../lib/utils';\nimport { getHighlighter } from '../../lib/shiki';\n\nexport interface CodeBlockProps {\n  code: string;\n  language?: string;\n  title?: string;\n  className?: string;\n}\n\nexport function CodeBlock({ code, language = 'text', title, className }: CodeBlockProps) {\n  const [html, setHtml] = useState<string | null>(null);\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => {\n    getHighlighter().then((highlighter) => {\n      const loadedLangs = highlighter.getLoadedLanguages();\n      const lang = loadedLangs.includes(language) ? language : 'text';\n      setHtml(highlighter.codeToHtml(code, { lang, theme: 'berget' }));\n    });\n  }, [code, language]);\n\n  const handleCopy = useCallback(async () => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [code]);\n\n  const copyButton = (\n    <button\n      onClick={handleCopy}\n      className=\"flex items-center justify-center w-6 h-6 text-berget-muted-foreground hover:text-berget-foreground transition-colors\"\n      aria-label=\"Copy code\"\n    >\n      {copied ? <Check className=\"w-3.5 h-3.5\" /> : <Copy className=\"w-3.5 h-3.5\" />}\n    </button>\n  );\n\n  return (\n    <div\n      className={cn(\n        'rounded-berget-xs border bg-berget-codeblock-bg border-berget-border backdrop-blur-[12px] relative overflow-hidden isolate',\n        className,\n      )}\n    >\n      {title && (\n        <div className=\"!h-10 flex items-center !px-4 !text-xs !leading-normal border-b border-berget-border bg-berget-codeblock-header-bg\">\n          <span className=\"text-berget-muted-foreground\">{title}</span>\n        </div>\n      )}\n      <div className=\"absolute right-2 top-2 z-10\">{copyButton}</div>\n      {html ? (\n        <div\n          className=\"[&_.shiki]:!p-4 [&_.shiki]:!m-0 [&_.shiki]:overflow-x-auto [&_.shiki]:!text-sm [&_.shiki]:!leading-relaxed [&_.shiki]:bg-transparent\"\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      ) : (\n        <pre className=\"!p-4 !m-0 overflow-x-auto !text-sm !leading-relaxed text-berget-muted-foreground\">\n          <code>{code}</code>\n        </pre>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,UAAU,EAAE,MAAM,WAAW,QAAQ,OAAO,aAA6B;CACvF,MAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;CACpD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,gBAAgB;EACd,eAAe,CAAC,CAAC,MAAM,gBAAgB;GAErC,MAAM,OADc,YAAY,mBACT,CAAC,CAAC,SAAS,QAAQ,IAAI,WAAW;GACzD,QAAQ,YAAY,WAAW,MAAM;IAAE;IAAM,OAAO;GAAS,CAAC,CAAC;EACjE,CAAC;CACH,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,MAAM,aAAa,YAAY,YAAY;EACzC,MAAM,UAAU,UAAU,UAAU,IAAI;EACxC,UAAU,IAAI;EACd,iBAAiB,UAAU,KAAK,GAAG,GAAI;CACzC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,aACJ,oBAAC,UAAD;EACE,SAAS;EACT,WAAU;EACV,cAAW;EAEV,UAAA,SAAS,oBAAC,OAAD,EAAO,WAAU,cAAe,CAAA,IAAI,oBAAC,MAAD,EAAM,WAAU,cAAe,CAAA;CACvE,CAAA;CAGV,OACE,qBAAC,OAAD;EACE,WAAW,GACT,8HACA,SACF;EAJF,UAAA;GAMG,SACC,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,QAAD;KAAM,WAAU;KAAgC,UAAA;IAAY,CAAA;GACzD,CAAA;GAEP,oBAAC,OAAD;IAAK,WAAU;IAA+B,UAAA;GAAgB,CAAA;GAC7D,OACC,oBAAC,OAAD;IACE,WAAU;IACV,yBAAyB,EAAE,QAAQ,KAAK;GACzC,CAAA,IAED,oBAAC,OAAD;IAAK,WAAU;IACb,UAAA,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA;GACf,CAAA;EAEJ;;AAET"}
+{"version":3,"file":"CodeBlock.mjs","names":[],"sources":["../../../src/components/code-block/CodeBlock.tsx"],"sourcesContent":["'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { Copy, Check } from 'lucide-react';\nimport { cn } from '../../lib/utils';\nimport { getHighlighter } from '../../lib/shiki';\n\nexport interface CodeBlockProps {\n  code: string;\n  language?: string;\n  title?: string;\n  className?: string;\n}\n\nexport function CodeBlock({ code, language = 'text', title, className }: CodeBlockProps) {\n  const [html, setHtml] = useState<string | null>(null);\n  const [copied, setCopied] = useState(false);\n\n  useEffect(() => {\n    getHighlighter().then((highlighter) => {\n      const loadedLangs = highlighter.getLoadedLanguages();\n      const lang = loadedLangs.includes(language) ? language : 'text';\n      setHtml(highlighter.codeToHtml(code, { lang, theme: 'berget' }));\n    });\n  }, [code, language]);\n\n  const handleCopy = useCallback(async () => {\n    await navigator.clipboard.writeText(code);\n    setCopied(true);\n    setTimeout(() => setCopied(false), 2000);\n  }, [code]);\n\n  const copyButton = (\n    <button\n      onClick={handleCopy}\n      className=\"\n        flex size-6 items-center justify-center text-berget-muted-foreground\n        transition-colors\n        hover:text-berget-foreground\n      \"\n      aria-label=\"Copy code\"\n    >\n      {copied ? <Check className=\"size-3.5\" /> : <Copy className=\"size-3.5\" />}\n    </button>\n  );\n\n  return (\n    <div\n      className={cn(\n        `\n          relative isolate overflow-hidden rounded-berget-xs border\n          border-berget-border bg-berget-codeblock-bg backdrop-blur-md\n        `,\n        className,\n      )}\n    >\n      {title && (\n        <div\n          className=\"\n            flex h-10! items-center border-b border-berget-border\n            bg-berget-codeblock-header-bg px-4! text-xs/normal!\n          \"\n        >\n          <span className=\"text-berget-muted-foreground\">{title}</span>\n        </div>\n      )}\n      <div className=\"absolute top-2 right-2 z-10\">{copyButton}</div>\n      {html ? (\n        <div\n          className=\"\n            [&_.shiki]:m-0! [&_.shiki]:overflow-x-auto [&_.shiki]:bg-transparent\n            [&_.shiki]:p-4! [&_.shiki]:text-caption/relaxed!\n          \"\n          dangerouslySetInnerHTML={{ __html: html }}\n        />\n      ) : (\n        <pre\n          className=\"\n            m-0! overflow-x-auto p-4! text-caption/relaxed!\n            text-berget-muted-foreground\n          \"\n        >\n          <code>{code}</code>\n        </pre>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;AAcA,SAAgB,UAAU,EAAE,MAAM,WAAW,QAAQ,OAAO,aAA6B;CACvF,MAAM,CAAC,MAAM,WAAW,SAAwB,IAAI;CACpD,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAE1C,gBAAgB;EACd,eAAe,CAAC,CAAC,MAAM,gBAAgB;GAErC,MAAM,OADc,YAAY,mBACT,CAAC,CAAC,SAAS,QAAQ,IAAI,WAAW;GACzD,QAAQ,YAAY,WAAW,MAAM;IAAE;IAAM,OAAO;GAAS,CAAC,CAAC;EACjE,CAAC;CACH,GAAG,CAAC,MAAM,QAAQ,CAAC;CAEnB,MAAM,aAAa,YAAY,YAAY;EACzC,MAAM,UAAU,UAAU,UAAU,IAAI;EACxC,UAAU,IAAI;EACd,iBAAiB,UAAU,KAAK,GAAG,GAAI;CACzC,GAAG,CAAC,IAAI,CAAC;CAET,MAAM,aACJ,oBAAC,UAAD;EACE,SAAS;EACT,WAAU;EAKV,cAAW;EAEV,UAAA,SAAS,oBAAC,OAAD,EAAO,WAAU,WAAY,CAAA,IAAI,oBAAC,MAAD,EAAM,WAAU,WAAY,CAAA;CACjE,CAAA;CAGV,OACE,qBAAC,OAAD;EACE,WAAW,GACT;;;WAIA,SACF;EAPF,UAAA;GASG,SACC,oBAAC,OAAD;IACE,WAAU;IAKV,UAAA,oBAAC,QAAD;KAAM,WAAU;KAAgC,UAAA;IAAY,CAAA;GACzD,CAAA;GAEP,oBAAC,OAAD;IAAK,WAAU;IAA+B,UAAA;GAAgB,CAAA;GAC7D,OACC,oBAAC,OAAD;IACE,WAAU;IAIV,yBAAyB,EAAE,QAAQ,KAAK;GACzC,CAAA,IAED,oBAAC,OAAD;IACE,WAAU;IAKV,UAAA,oBAAC,QAAD,EAAA,UAAO,KAAW,CAAA;GACf,CAAA;EAEJ;;AAET"}

package/dist/components/container/Container.cjs

@@ -7,20 +7,31 @@ let class_variance_authority = require("class-variance-authority");
 let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
 let _base_ui_react_use_render = require("@base-ui/react/use-render");
 //#region src/components/container/Container.tsx
-const containerVariants = (0, class_variance_authority.cva)("w-full mx-auto", {
+const containerVariants = (0, class_variance_authority.cva)("mx-auto w-full", {
 	variants: {
 		size: {
 			sm: "max-w-3xl",
 			md: "max-w-5xl",
 			lg: "max-w-7xl",
-			xl: "max-w-screen-xl",
+			xl: "max-w-7xl",
 			full: "max-w-full"
 		},
 		padding: {
 			none: "px-0",
-			sm: "px-4 sm:px-6",
-			md: "px-4 sm:px-6 lg:px-8",
-			lg: "px-4 sm:px-8 lg:px-12"
+			sm: `
+        px-4
+        sm:px-6
+      `,
+			md: `
+        px-4
+        sm:px-6
+        lg:px-8
+      `,
+			lg: `
+        px-4
+        sm:px-8
+        lg:px-12
+      `
 		}
 	},
 	defaultVariants: {