@gnome-ui/react 1.45.0 → 1.45.2

package/dist/components/BottomSheet/BottomSheet.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.module.css.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n/* ─── Sheet ─────────────────────────────────────────────────────────────────── */\n\n.sheet {\n  width: min(560px, 100vw);\n  max-height: 90dvh;\n  overflow-y: auto;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0 0;\n  box-shadow:\n    0 -4px 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n\n  animation: sheet-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes sheet-in {\n  from { transform: translateY(100%); }\n  to   { transform: translateY(0); }\n}\n\n/* ─── Handle bar ────────────────────────────────────────────────────────────── */\n\n.handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px) 0 var(--gnome-space-1, 6px);\n}\n\n.handleBar {\n  width: 36px;\n  height: 4px;\n  border-radius: 2px;\n  background-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.2;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: center;\n}\n\n/* ─── Content ───────────────────────────────────────────────────────────────── */\n\n.content {\n  padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-4, 24px);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .sheet {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 -4px 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .sheet {\n    animation: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"BottomSheet.module.css.js","names":[],"sources":["../../../src/components/BottomSheet/BottomSheet.module.css"],"sourcesContent":["/* ─── Backdrop ──────────────────────────────────────────────────────────────── */\n\n.backdrop {\n  position: fixed;\n  inset: 0;\n  z-index: 10000;\n\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n\n  background-color: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n\n  animation: backdrop-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes backdrop-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* ─── Sheet ─────────────────────────────────────────────────────────────────── */\n\n.sheet {\n  width: min(560px, 100vw);\n  max-height: 90dvh;\n  overflow-y: auto;\n\n  background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #fafafa));\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n\n  border-radius: var(--gnome-radius-xl, 16px) var(--gnome-radius-xl, 16px) 0 0;\n  box-shadow:\n    0 -4px 24px rgba(0, 0, 0, 0.18),\n    0 0 0 1px rgba(0, 0, 0, 0.06);\n\n  animation: sheet-in var(--gnome-duration-normal, 200ms) var(--gnome-easing-default, ease) both;\n}\n\n@keyframes sheet-in {\n  from {\n    transform: translateY(100%);\n  }\n  to {\n    transform: translateY(0);\n  }\n}\n\n/* ─── Handle bar ────────────────────────────────────────────────────────────── */\n\n.handle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--gnome-space-2, 12px) 0 var(--gnome-space-1, 6px);\n}\n\n.handleBar {\n  width: 36px;\n  height: 4px;\n  border-radius: 2px;\n  background-color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  opacity: 0.2;\n}\n\n/* ─── Title ─────────────────────────────────────────────────────────────────── */\n\n.title {\n  padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-2, 12px);\n\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-title-4, 1.125rem);\n  font-weight: var(--gnome-font-weight-bold, 700);\n  line-height: var(--gnome-line-height-title, 1.3);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  text-align: center;\n}\n\n/* ─── Content ───────────────────────────────────────────────────────────────── */\n\n.content {\n  padding: 0 var(--gnome-space-4, 24px) var(--gnome-space-4, 24px);\n}\n\n/* ─── Dark mode ─────────────────────────────────────────────────────────────── */\n\n@media (prefers-color-scheme: dark) {\n  .backdrop {\n    background-color: rgba(0, 0, 0, 0.65);\n  }\n\n  .sheet {\n    background-color: var(--gnome-dialog-bg-color, var(--gnome-window-bg-color, #242424));\n    box-shadow:\n      0 -4px 24px rgba(0, 0, 0, 0.45),\n      0 0 0 1px rgba(255, 255, 255, 0.06);\n  }\n}\n\n/* ─── Reduced motion ────────────────────────────────────────────────────────── */\n\n@media (prefers-reduced-motion: reduce) {\n  .backdrop,\n  .sheet {\n    animation: none;\n  }\n}\n"],"mappings":""}

package/dist/components/BottomSheet/index.d.ts

@@ -1,2 +1,2 @@
-export { BottomSheet } from './BottomSheet';
 export type { BottomSheetProps } from './BottomSheet';
+export { BottomSheet } from './BottomSheet';

package/dist/components/BottomSheet.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./BottomSheet/BottomSheet.cjs`);exports.BottomSheet=e.BottomSheet;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./BottomSheet/BottomSheet.cjs");exports.BottomSheet=e.BottomSheet;

package/dist/components/Box/Box.cjs

@@ -1,2 +1,2 @@
-let e=require(`react/jsx-runtime`);function t({orientation:t=`vertical`,spacing:n=6,align:r,justify:i=`start`,padding:a,className:o,style:s,children:c,...l}){let u=t===`horizontal`?`center`:`stretch`;return(0,e.jsx)(`div`,{className:o,style:{display:`flex`,flexDirection:t===`horizontal`?`row`:`column`,gap:typeof n==`number`?`${n}px`:n,alignItems:r??u,justifyContent:i,...a!==void 0&&{padding:typeof a==`number`?`${a}px`:a},...s},...l,children:c})}exports.Box=t;
+let e=require("react/jsx-runtime");var t=({orientation:t=`vertical`,spacing:n=6,align:r,justify:i=`start`,padding:a,className:o,style:s,children:c,...l})=>{let u=t===`horizontal`?`center`:`stretch`;return(0,e.jsx)(`div`,{className:o,style:{display:`flex`,flexDirection:t===`horizontal`?`row`:`column`,gap:typeof n==`number`?`${n}px`:n,alignItems:r??u,justifyContent:i,...a!==void 0&&{padding:typeof a==`number`?`${a}px`:a},...s},...l,children:c})};exports.Box=t;
 //# sourceMappingURL=Box.cjs.map

package/dist/components/Box/Box.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Box.cjs","names":[],"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\n\n/** GNOME HIG standard spacing values (matches GtkBox spacing tokens). */\nexport type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;\n\n/** Alias of `BoxSpacing` for use as a padding scale. */\nexport type BoxPadding = BoxSpacing;\n\nexport type BoxOrientation = \"horizontal\" | \"vertical\";\nexport type BoxAlign = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\nexport type BoxJustify =\n  | \"start\"\n  | \"center\"\n  | \"end\"\n  | \"space-between\"\n  | \"space-around\"\n  | \"space-evenly\";\n\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Direction children are arranged.\n   * `\"vertical\"` → `flex-direction: column` (default).\n   * `\"horizontal\"` → `flex-direction: row`.\n   */\n  orientation?: BoxOrientation;\n  /**\n   * Gap between children in pixels.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   * Defaults to `6` (the HIG \"standard\" inner spacing).\n   */\n  spacing?: BoxSpacing | number | string;\n  /**\n   * Cross-axis alignment (`align-items`).\n   * Defaults to `\"stretch\"` for vertical, `\"center\"` for horizontal.\n   */\n  align?: BoxAlign;\n  /**\n   * Main-axis distribution (`justify-content`).\n   * Defaults to `\"start\"`.\n   */\n  justify?: BoxJustify;\n  /**\n   * Inner padding applied to all sides.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   */\n  padding?: BoxPadding | number | string;\n  children?: ReactNode;\n}\n\n/**\n * Fundamental flex layout primitive — the web equivalent of `GtkBox`.\n *\n * Arranges children in a single row or column with consistent spacing\n * following the GNOME Human Interface Guidelines spacing scale:\n *\n * | Token | px | Use |\n * |-------|----|-----|\n * | tight | 3  | Dense UI, icon + label pairs |\n * | standard | 6 | Default inner spacing |\n * | medium | 12 | Between related groups |\n * | large | 18 | Between loosely related sections |\n * | section | 24 | Page-level section gaps |\n * | loose | 32 | Large content separation |\n * | jumbo | 48 | Hero / splash spacing |\n *\n * **Usage:**\n * ```tsx\n * // Vertical section (heading + content)\n * <Box spacing={8}>\n *   <Text variant=\"caption-heading\" color=\"dim\">Devices</Text>\n *   <BoxedList>…</BoxedList>\n * </Box>\n *\n * // Horizontal icon + label\n * <Box orientation=\"horizontal\" spacing={6} align=\"center\">\n *   <Icon name=\"folder\" />\n *   <Text>Documents</Text>\n * </Box>\n * ```\n *\n * @see https://developer.gnome.org/hig/guidelines/spacing.html\n */\nexport function Box({\n  orientation = \"vertical\",\n  spacing = 6,\n  align,\n  justify = \"start\",\n  padding,\n  className,\n  style,\n  children,\n  ...props\n}: BoxProps) {\n  const defaultAlign: BoxAlign =\n    orientation === \"horizontal\" ? \"center\" : \"stretch\";\n\n  const resolvedStyle: CSSProperties = {\n    display: \"flex\",\n    flexDirection: orientation === \"horizontal\" ? \"row\" : \"column\",\n    gap: typeof spacing === \"number\" ? `${spacing}px` : spacing,\n    alignItems: align ?? defaultAlign,\n    justifyContent: justify,\n    ...(padding !== undefined && { padding: typeof padding === \"number\" ? `${padding}px` : padding }),\n    ...style,\n  };\n\n  return (\n    <div className={className} style={resolvedStyle} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":"mCAkFA,SAAgB,EAAI,CAClB,cAAc,WACd,UAAU,EACV,QACA,UAAU,QACV,UACA,YACA,QACA,WACA,GAAG,GACQ,CACX,IAAM,EACJ,IAAgB,aAAe,SAAW,UAY5C,OACE,EAAA,EAAA,KAAC,MAAD,CAAgB,YAAW,MAXQ,CACnC,QAAS,OACT,cAAe,IAAgB,aAAe,MAAQ,SACtD,IAAK,OAAO,GAAY,SAAW,GAAG,EAAQ,IAAM,EACpD,WAAY,GAAS,EACrB,eAAgB,EAChB,GAAI,IAAY,IAAA,IAAa,CAAE,QAAS,OAAO,GAAY,SAAW,GAAG,EAAQ,IAAM,EAAS,CAChG,GAAG,EACJ,CAGkD,GAAI,EAClD,WACG,CAAA"}
+{"version":3,"file":"Box.cjs","names":[],"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\n/** GNOME HIG standard spacing values (matches GtkBox spacing tokens). */\nexport type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;\n\n/** Alias of `BoxSpacing` for use as a padding scale. */\nexport type BoxPadding = BoxSpacing;\n\nexport type BoxOrientation = 'horizontal' | 'vertical';\nexport type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\nexport type BoxJustify =\n  | 'start'\n  | 'center'\n  | 'end'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly';\n\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Direction children are arranged.\n   * `\"vertical\"` → `flex-direction: column` (default).\n   * `\"horizontal\"` → `flex-direction: row`.\n   */\n  orientation?: BoxOrientation;\n  /**\n   * Gap between children in pixels.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   * Defaults to `6` (the HIG \"standard\" inner spacing).\n   */\n  spacing?: BoxSpacing | number | string;\n  /**\n   * Cross-axis alignment (`align-items`).\n   * Defaults to `\"stretch\"` for vertical, `\"center\"` for horizontal.\n   */\n  align?: BoxAlign;\n  /**\n   * Main-axis distribution (`justify-content`).\n   * Defaults to `\"start\"`.\n   */\n  justify?: BoxJustify;\n  /**\n   * Inner padding applied to all sides.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   */\n  padding?: BoxPadding | number | string;\n  children?: ReactNode;\n}\n\n/**\n * Fundamental flex layout primitive — the web equivalent of `GtkBox`.\n *\n * Arranges children in a single row or column with consistent spacing\n * following the GNOME Human Interface Guidelines spacing scale:\n *\n * | Token | px | Use |\n * |-------|----|-----|\n * | tight | 3  | Dense UI, icon + label pairs |\n * | standard | 6 | Default inner spacing |\n * | medium | 12 | Between related groups |\n * | large | 18 | Between loosely related sections |\n * | section | 24 | Page-level section gaps |\n * | loose | 32 | Large content separation |\n * | jumbo | 48 | Hero / splash spacing |\n *\n * **Usage:**\n * ```tsx\n * // Vertical section (heading + content)\n * <Box spacing={8}>\n *   <Text variant=\"caption-heading\" color=\"dim\">Devices</Text>\n *   <BoxedList>…</BoxedList>\n * </Box>\n *\n * // Horizontal icon + label\n * <Box orientation=\"horizontal\" spacing={6} align=\"center\">\n *   <Icon name=\"folder\" />\n *   <Text>Documents</Text>\n * </Box>\n * ```\n *\n * @see https://developer.gnome.org/hig/guidelines/spacing.html\n */\nexport const Box = ({\n  orientation = 'vertical',\n  spacing = 6,\n  align,\n  justify = 'start',\n  padding,\n  className,\n  style,\n  children,\n  ...props\n}: BoxProps) => {\n  const defaultAlign: BoxAlign = orientation === 'horizontal' ? 'center' : 'stretch';\n\n  const resolvedStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: typeof spacing === 'number' ? `${spacing}px` : spacing,\n    alignItems: align ?? defaultAlign,\n    justifyContent: justify,\n    ...(padding !== undefined && {\n      padding: typeof padding === 'number' ? `${padding}px` : padding,\n    }),\n    ...style,\n  };\n\n  return (\n    <div className={className} style={resolvedStyle} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":"mCAkFA,IAAa,GAAO,CAClB,cAAc,WACd,UAAU,EACV,QACA,UAAU,QACV,UACA,YACA,QACA,WACA,GAAG,KACW,CACd,IAAM,EAAyB,IAAgB,aAAe,SAAW,UAczE,OACE,EAAA,EAAA,KAAC,MAAD,CAAgB,YAAW,MAAO,CAZlC,QAAS,OACT,cAAe,IAAgB,aAAe,MAAQ,SACtD,IAAK,OAAO,GAAY,SAAW,GAAG,EAAQ,IAAM,EACpD,WAAY,GAAS,EACrB,eAAgB,EAChB,GAAI,IAAY,IAAA,IAAa,CAC3B,QAAS,OAAO,GAAY,SAAW,GAAG,EAAQ,IAAM,CAC1D,EACA,GAAG,CAI+B,EAAe,GAAI,EAClD,UACE,CAAA,CAET"}

package/dist/components/Box/Box.d.ts

@@ -3,9 +3,9 @@ import { HTMLAttributes, ReactNode } from 'react';
 export type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;
 /** Alias of `BoxSpacing` for use as a padding scale. */
 export type BoxPadding = BoxSpacing;
-export type BoxOrientation = "horizontal" | "vertical";
-export type BoxAlign = "start" | "center" | "end" | "stretch" | "baseline";
-export type BoxJustify = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+export type BoxOrientation = 'horizontal' | 'vertical';
+export type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
+export type BoxJustify = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
     /**
      * Direction children are arranged.
@@ -69,4 +69,4 @@ export interface BoxProps extends HTMLAttributes<HTMLDivElement> {
  *
  * @see https://developer.gnome.org/hig/guidelines/spacing.html
  */
-export declare function Box({ orientation, spacing, align, justify, padding, className, style, children, ...props }: BoxProps): import("react/jsx-runtime").JSX.Element;
+export declare const Box: ({ orientation, spacing, align, justify, padding, className, style, children, ...props }: BoxProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Box/Box.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 //#region src/components/Box/Box.tsx
-function t({ orientation: t = "vertical", spacing: n = 6, align: r, justify: i = "start", padding: a, className: o, style: s, children: c, ...l }) {
+var t = ({ orientation: t = "vertical", spacing: n = 6, align: r, justify: i = "start", padding: a, className: o, style: s, children: c, ...l }) => {
 	let u = t === "horizontal" ? "center" : "stretch";
 	return /* @__PURE__ */ e("div", {
 		className: o,
@@ -16,7 +16,7 @@ function t({ orientation: t = "vertical", spacing: n = 6, align: r, justify: i =
 		...l,
 		children: c
 	});
-}
+};
 //#endregion
 export { t as Box };
 

package/dist/components/Box/Box.js.map

@@ -1 +1 @@
-{"version":3,"file":"Box.js","names":[],"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\n\n/** GNOME HIG standard spacing values (matches GtkBox spacing tokens). */\nexport type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;\n\n/** Alias of `BoxSpacing` for use as a padding scale. */\nexport type BoxPadding = BoxSpacing;\n\nexport type BoxOrientation = \"horizontal\" | \"vertical\";\nexport type BoxAlign = \"start\" | \"center\" | \"end\" | \"stretch\" | \"baseline\";\nexport type BoxJustify =\n  | \"start\"\n  | \"center\"\n  | \"end\"\n  | \"space-between\"\n  | \"space-around\"\n  | \"space-evenly\";\n\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Direction children are arranged.\n   * `\"vertical\"` → `flex-direction: column` (default).\n   * `\"horizontal\"` → `flex-direction: row`.\n   */\n  orientation?: BoxOrientation;\n  /**\n   * Gap between children in pixels.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   * Defaults to `6` (the HIG \"standard\" inner spacing).\n   */\n  spacing?: BoxSpacing | number | string;\n  /**\n   * Cross-axis alignment (`align-items`).\n   * Defaults to `\"stretch\"` for vertical, `\"center\"` for horizontal.\n   */\n  align?: BoxAlign;\n  /**\n   * Main-axis distribution (`justify-content`).\n   * Defaults to `\"start\"`.\n   */\n  justify?: BoxJustify;\n  /**\n   * Inner padding applied to all sides.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   */\n  padding?: BoxPadding | number | string;\n  children?: ReactNode;\n}\n\n/**\n * Fundamental flex layout primitive — the web equivalent of `GtkBox`.\n *\n * Arranges children in a single row or column with consistent spacing\n * following the GNOME Human Interface Guidelines spacing scale:\n *\n * | Token | px | Use |\n * |-------|----|-----|\n * | tight | 3  | Dense UI, icon + label pairs |\n * | standard | 6 | Default inner spacing |\n * | medium | 12 | Between related groups |\n * | large | 18 | Between loosely related sections |\n * | section | 24 | Page-level section gaps |\n * | loose | 32 | Large content separation |\n * | jumbo | 48 | Hero / splash spacing |\n *\n * **Usage:**\n * ```tsx\n * // Vertical section (heading + content)\n * <Box spacing={8}>\n *   <Text variant=\"caption-heading\" color=\"dim\">Devices</Text>\n *   <BoxedList>…</BoxedList>\n * </Box>\n *\n * // Horizontal icon + label\n * <Box orientation=\"horizontal\" spacing={6} align=\"center\">\n *   <Icon name=\"folder\" />\n *   <Text>Documents</Text>\n * </Box>\n * ```\n *\n * @see https://developer.gnome.org/hig/guidelines/spacing.html\n */\nexport function Box({\n  orientation = \"vertical\",\n  spacing = 6,\n  align,\n  justify = \"start\",\n  padding,\n  className,\n  style,\n  children,\n  ...props\n}: BoxProps) {\n  const defaultAlign: BoxAlign =\n    orientation === \"horizontal\" ? \"center\" : \"stretch\";\n\n  const resolvedStyle: CSSProperties = {\n    display: \"flex\",\n    flexDirection: orientation === \"horizontal\" ? \"row\" : \"column\",\n    gap: typeof spacing === \"number\" ? `${spacing}px` : spacing,\n    alignItems: align ?? defaultAlign,\n    justifyContent: justify,\n    ...(padding !== undefined && { padding: typeof padding === \"number\" ? `${padding}px` : padding }),\n    ...style,\n  };\n\n  return (\n    <div className={className} style={resolvedStyle} {...props}>\n      {children}\n    </div>\n  );\n}\n"],"mappings":";;AAkFA,SAAgB,EAAI,EAClB,iBAAc,YACd,aAAU,GACV,UACA,aAAU,SACV,YACA,cACA,UACA,aACA,GAAG,KACQ;CACX,IAAM,IACJ,MAAgB,eAAe,WAAW;AAY5C,QACE,kBAAC,OAAD;EAAgB;EAAW,OAXQ;GACnC,SAAS;GACT,eAAe,MAAgB,eAAe,QAAQ;GACtD,KAAK,OAAO,KAAY,WAAW,GAAG,EAAQ,MAAM;GACpD,YAAY,KAAS;GACrB,gBAAgB;GAChB,GAAI,MAAY,KAAA,KAAa,EAAE,SAAS,OAAO,KAAY,WAAW,GAAG,EAAQ,MAAM,GAAS;GAChG,GAAG;GACJ;EAGkD,GAAI;EAClD;EACG,CAAA"}
+{"version":3,"file":"Box.js","names":[],"sources":["../../../src/components/Box/Box.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';\n\n/** GNOME HIG standard spacing values (matches GtkBox spacing tokens). */\nexport type BoxSpacing = 3 | 6 | 12 | 18 | 24 | 32 | 48;\n\n/** Alias of `BoxSpacing` for use as a padding scale. */\nexport type BoxPadding = BoxSpacing;\n\nexport type BoxOrientation = 'horizontal' | 'vertical';\nexport type BoxAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';\nexport type BoxJustify =\n  | 'start'\n  | 'center'\n  | 'end'\n  | 'space-between'\n  | 'space-around'\n  | 'space-evenly';\n\nexport interface BoxProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Direction children are arranged.\n   * `\"vertical\"` → `flex-direction: column` (default).\n   * `\"horizontal\"` → `flex-direction: row`.\n   */\n  orientation?: BoxOrientation;\n  /**\n   * Gap between children in pixels.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   * Defaults to `6` (the HIG \"standard\" inner spacing).\n   */\n  spacing?: BoxSpacing | number | string;\n  /**\n   * Cross-axis alignment (`align-items`).\n   * Defaults to `\"stretch\"` for vertical, `\"center\"` for horizontal.\n   */\n  align?: BoxAlign;\n  /**\n   * Main-axis distribution (`justify-content`).\n   * Defaults to `\"start\"`.\n   */\n  justify?: BoxJustify;\n  /**\n   * Inner padding applied to all sides.\n   * Accepts any of the GNOME HIG standard spacing values or any CSS string.\n   */\n  padding?: BoxPadding | number | string;\n  children?: ReactNode;\n}\n\n/**\n * Fundamental flex layout primitive — the web equivalent of `GtkBox`.\n *\n * Arranges children in a single row or column with consistent spacing\n * following the GNOME Human Interface Guidelines spacing scale:\n *\n * | Token | px | Use |\n * |-------|----|-----|\n * | tight | 3  | Dense UI, icon + label pairs |\n * | standard | 6 | Default inner spacing |\n * | medium | 12 | Between related groups |\n * | large | 18 | Between loosely related sections |\n * | section | 24 | Page-level section gaps |\n * | loose | 32 | Large content separation |\n * | jumbo | 48 | Hero / splash spacing |\n *\n * **Usage:**\n * ```tsx\n * // Vertical section (heading + content)\n * <Box spacing={8}>\n *   <Text variant=\"caption-heading\" color=\"dim\">Devices</Text>\n *   <BoxedList>…</BoxedList>\n * </Box>\n *\n * // Horizontal icon + label\n * <Box orientation=\"horizontal\" spacing={6} align=\"center\">\n *   <Icon name=\"folder\" />\n *   <Text>Documents</Text>\n * </Box>\n * ```\n *\n * @see https://developer.gnome.org/hig/guidelines/spacing.html\n */\nexport const Box = ({\n  orientation = 'vertical',\n  spacing = 6,\n  align,\n  justify = 'start',\n  padding,\n  className,\n  style,\n  children,\n  ...props\n}: BoxProps) => {\n  const defaultAlign: BoxAlign = orientation === 'horizontal' ? 'center' : 'stretch';\n\n  const resolvedStyle: CSSProperties = {\n    display: 'flex',\n    flexDirection: orientation === 'horizontal' ? 'row' : 'column',\n    gap: typeof spacing === 'number' ? `${spacing}px` : spacing,\n    alignItems: align ?? defaultAlign,\n    justifyContent: justify,\n    ...(padding !== undefined && {\n      padding: typeof padding === 'number' ? `${padding}px` : padding,\n    }),\n    ...style,\n  };\n\n  return (\n    <div className={className} style={resolvedStyle} {...props}>\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;AAkFA,IAAa,KAAO,EAClB,iBAAc,YACd,aAAU,GACV,UACA,aAAU,SACV,YACA,cACA,UACA,aACA,GAAG,QACW;CACd,IAAM,IAAyB,MAAgB,eAAe,WAAW;CAczE,OACE,kBAAC,OAAD;EAAgB;EAAW,OAAO;GAZlC,SAAS;GACT,eAAe,MAAgB,eAAe,QAAQ;GACtD,KAAK,OAAO,KAAY,WAAW,GAAG,EAAQ,MAAM;GACpD,YAAY,KAAS;GACrB,gBAAgB;GAChB,GAAI,MAAY,KAAA,KAAa,EAC3B,SAAS,OAAO,KAAY,WAAW,GAAG,EAAQ,MAAM,EAC1D;GACA,GAAG;EAI+B;EAAe,GAAI;EAClD;CACE,CAAA;AAET"}

package/dist/components/Box/index.d.ts

@@ -1,2 +1,2 @@
+export type { BoxAlign, BoxJustify, BoxOrientation, BoxPadding, BoxProps, BoxSpacing } from './Box';
 export { Box } from './Box';
-export type { BoxProps, BoxOrientation, BoxAlign, BoxJustify, BoxSpacing, BoxPadding } from './Box';

package/dist/components/Box.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./Box/Box.cjs`);exports.Box=e.Box;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./Box/Box.cjs");exports.Box=e.Box;

package/dist/components/BoxedList/BoxedList.cjs

@@ -1,2 +1,2 @@
-const e=require(`../Separator/Separator.cjs`),t=require(`./BoxedList.module.css.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);function i({children:i,variant:a=`default`,className:o,...s}){let c=n.Children.toArray(i).filter(Boolean),l=a===`separate`;return(0,r.jsx)(`ul`,{role:`list`,className:[t.default.list,l?t.default.separate:null,o].filter(Boolean).join(` `),...s,children:c.map((n,i)=>(0,r.jsxs)(`li`,{className:l?t.default.separateItem:t.default.item,children:[!l&&i>0&&(0,r.jsx)(e.Separator,{"aria-hidden":`true`}),n]},i))})}exports.BoxedList=i;
+const e=require("../Separator/Separator.cjs"),t=require("./BoxedList.module.css.cjs");let n=require("react"),r=require("react/jsx-runtime");var i=({children:i,variant:a=`default`,className:o,...s})=>{let c=n.Children.toArray(i).filter(Boolean),l=a===`separate`;return(0,r.jsx)(`ul`,{className:[t.default.list,l?t.default.separate:null,o].filter(Boolean).join(` `),...s,children:c.map((n,i)=>(0,r.jsxs)(`li`,{className:l?t.default.separateItem:t.default.item,children:[!l&&i>0&&(0,r.jsx)(e.Separator,{"aria-hidden":`true`}),n]},i))})};exports.BoxedList=i;
 //# sourceMappingURL=BoxedList.cjs.map

package/dist/components/BoxedList/BoxedList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BoxedList.cjs","names":[],"sources":["../../../src/components/BoxedList/BoxedList.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Separator } from \"../Separator\";\nimport styles from \"./BoxedList.module.css\";\n\nexport type BoxedListVariant = \"default\" | \"separate\";\n\nexport interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode;\n  /**\n   * `\"separate\"` renders each child as its own standalone rounded card\n   * instead of a single joined list — mirrors `.boxed-list-separate`.\n   * Use when rows are independent items rather than a continuous group.\n   */\n  variant?: BoxedListVariant;\n}\n\n/**\n * Rounded bordered list — the most common container pattern in GNOME apps.\n *\n * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.\n * Separators between rows are inserted automatically.\n * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.\n *\n * Use `variant=\"separate\"` to render each child as its own card, mirroring\n * the `.boxed-list-separate` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function BoxedList({ children, variant = \"default\", className, ...props }: BoxedListProps) {\n  const items = Children.toArray(children).filter(Boolean);\n  const separate = variant === \"separate\";\n\n  return (\n    <ul\n      role=\"list\"\n      className={[styles.list, separate ? styles.separate : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={i} className={separate ? styles.separateItem : styles.item}>\n          {!separate && i > 0 && <Separator aria-hidden=\"true\" />}\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":"4IA6BA,SAAgB,EAAU,CAAE,WAAU,UAAU,UAAW,YAAW,GAAG,GAAyB,CAChG,IAAM,EAAQ,EAAA,SAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ,CAClD,EAAW,IAAY,WAE7B,OACE,EAAA,EAAA,KAAC,KAAD,CACE,KAAK,OACL,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,SAAW,KAAM,EAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI,CACZ,GAAI,WAEH,EAAM,KAAK,EAAO,KACjB,EAAA,EAAA,MAAC,KAAD,CAAY,UAAW,EAAW,EAAA,QAAO,aAAe,EAAA,QAAO,cAA/D,CACG,CAAC,GAAY,EAAI,IAAK,EAAA,EAAA,KAAC,EAAA,UAAD,CAAW,cAAY,OAAS,CAAA,CACtD,EACE,EAHI,EAGJ,CACL,CACC,CAAA"}
+{"version":3,"file":"BoxedList.cjs","names":[],"sources":["../../../src/components/BoxedList/BoxedList.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './BoxedList.module.css';\n\nexport type BoxedListVariant = 'default' | 'separate';\n\nexport interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode;\n  /**\n   * `\"separate\"` renders each child as its own standalone rounded card\n   * instead of a single joined list — mirrors `.boxed-list-separate`.\n   * Use when rows are independent items rather than a continuous group.\n   */\n  variant?: BoxedListVariant;\n}\n\n/**\n * Rounded bordered list — the most common container pattern in GNOME apps.\n *\n * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.\n * Separators between rows are inserted automatically.\n * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.\n *\n * Use `variant=\"separate\"` to render each child as its own card, mirroring\n * the `.boxed-list-separate` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport const BoxedList = ({\n  children,\n  variant = 'default',\n  className,\n  ...props\n}: BoxedListProps) => {\n  const items = Children.toArray(children).filter(Boolean);\n  const separate = variant === 'separate';\n\n  return (\n    <ul\n      className={[styles.list, separate ? styles.separate : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={i} className={separate ? styles.separateItem : styles.item}>\n          {!separate && i > 0 && <Separator aria-hidden=\"true\" />}\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n};\n"],"mappings":"4IA+BA,IAAa,GAAa,CACxB,WACA,UAAU,UACV,YACA,GAAG,KACiB,CACpB,IAAM,EAAQ,EAAA,SAAS,QAAQ,CAAQ,EAAE,OAAO,OAAO,EACjD,EAAW,IAAY,WAE7B,OACE,EAAA,EAAA,KAAC,KAAD,CACE,UAAW,CAAC,EAAA,QAAO,KAAM,EAAW,EAAA,QAAO,SAAW,KAAM,CAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG,EACX,GAAI,WAEH,EAAM,KAAK,EAAO,KACjB,EAAA,EAAA,MAAC,KAAD,CAAY,UAAW,EAAW,EAAA,QAAO,aAAe,EAAA,QAAO,cAA/D,CACG,CAAC,GAAY,EAAI,IAAK,EAAA,EAAA,KAAC,EAAA,UAAD,CAAW,cAAY,MAAQ,CAAA,EACrD,CACC,GAHK,CAGL,CACL,CACC,CAAA,CAER"}

package/dist/components/BoxedList/BoxedList.d.ts

@@ -1,5 +1,5 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type BoxedListVariant = "default" | "separate";
+export type BoxedListVariant = 'default' | 'separate';
 export interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {
     children?: ReactNode;
     /**
@@ -22,4 +22,4 @@ export interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards
  * @see https://developer.gnome.org/hig/patterns/containers.html
  */
-export declare function BoxedList({ children, variant, className, ...props }: BoxedListProps): import("react/jsx-runtime").JSX.Element;
+export declare const BoxedList: ({ children, variant, className, ...props }: BoxedListProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BoxedList/BoxedList.js

@@ -3,10 +3,9 @@ import t from "./BoxedList.module.css.js";
 import { Children as n } from "react";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/BoxedList/BoxedList.tsx
-function a({ children: a, variant: o = "default", className: s, ...c }) {
+var a = ({ children: a, variant: o = "default", className: s, ...c }) => {
 	let l = n.toArray(a).filter(Boolean), u = o === "separate";
 	return /* @__PURE__ */ r("ul", {
-		role: "list",
 		className: [
 			t.list,
 			u ? t.separate : null,
@@ -18,7 +17,7 @@ function a({ children: a, variant: o = "default", className: s, ...c }) {
 			children: [!u && a > 0 && /* @__PURE__ */ r(e, { "aria-hidden": "true" }), n]
 		}, a))
 	});
-}
+};
 //#endregion
 export { a as BoxedList };
 

package/dist/components/BoxedList/BoxedList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoxedList.js","names":[],"sources":["../../../src/components/BoxedList/BoxedList.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode } from \"react\";\nimport { Separator } from \"../Separator\";\nimport styles from \"./BoxedList.module.css\";\n\nexport type BoxedListVariant = \"default\" | \"separate\";\n\nexport interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode;\n  /**\n   * `\"separate\"` renders each child as its own standalone rounded card\n   * instead of a single joined list — mirrors `.boxed-list-separate`.\n   * Use when rows are independent items rather than a continuous group.\n   */\n  variant?: BoxedListVariant;\n}\n\n/**\n * Rounded bordered list — the most common container pattern in GNOME apps.\n *\n * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.\n * Separators between rows are inserted automatically.\n * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.\n *\n * Use `variant=\"separate\"` to render each child as its own card, mirroring\n * the `.boxed-list-separate` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport function BoxedList({ children, variant = \"default\", className, ...props }: BoxedListProps) {\n  const items = Children.toArray(children).filter(Boolean);\n  const separate = variant === \"separate\";\n\n  return (\n    <ul\n      role=\"list\"\n      className={[styles.list, separate ? styles.separate : null, className]\n        .filter(Boolean)\n        .join(\" \")}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={i} className={separate ? styles.separateItem : styles.item}>\n          {!separate && i > 0 && <Separator aria-hidden=\"true\" />}\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n}\n"],"mappings":";;;;;AA6BA,SAAgB,EAAU,EAAE,aAAU,aAAU,WAAW,cAAW,GAAG,KAAyB;CAChG,IAAM,IAAQ,EAAS,QAAQ,EAAS,CAAC,OAAO,QAAQ,EAClD,IAAW,MAAY;AAE7B,QACE,kBAAC,MAAD;EACE,MAAK;EACL,WAAW;GAAC,EAAO;GAAM,IAAW,EAAO,WAAW;GAAM;GAAU,CACnE,OAAO,QAAQ,CACf,KAAK,IAAI;EACZ,GAAI;YAEH,EAAM,KAAK,GAAO,MACjB,kBAAC,MAAD;GAAY,WAAW,IAAW,EAAO,eAAe,EAAO;aAA/D,CACG,CAAC,KAAY,IAAI,KAAK,kBAAC,GAAD,EAAW,eAAY,QAAS,CAAA,EACtD,EACE;KAHI,EAGJ,CACL;EACC,CAAA"}
+{"version":3,"file":"BoxedList.js","names":[],"sources":["../../../src/components/BoxedList/BoxedList.tsx"],"sourcesContent":["import { Children, type HTMLAttributes, type ReactNode } from 'react';\n\nimport { Separator } from '../Separator';\n\nimport styles from './BoxedList.module.css';\n\nexport type BoxedListVariant = 'default' | 'separate';\n\nexport interface BoxedListProps extends HTMLAttributes<HTMLUListElement> {\n  children?: ReactNode;\n  /**\n   * `\"separate\"` renders each child as its own standalone rounded card\n   * instead of a single joined list — mirrors `.boxed-list-separate`.\n   * Use when rows are independent items rather than a continuous group.\n   */\n  variant?: BoxedListVariant;\n}\n\n/**\n * Rounded bordered list — the most common container pattern in GNOME apps.\n *\n * Mirrors the Adwaita `.boxed-list` style applied to a `GtkListBox`.\n * Separators between rows are inserted automatically.\n * Each child is wrapped in a `<li>` — use with `ActionRow` or any row-shaped element.\n *\n * Use `variant=\"separate\"` to render each child as its own card, mirroring\n * the `.boxed-list-separate` style class.\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/style-classes.html#boxed-lists-cards\n * @see https://developer.gnome.org/hig/patterns/containers.html\n */\nexport const BoxedList = ({\n  children,\n  variant = 'default',\n  className,\n  ...props\n}: BoxedListProps) => {\n  const items = Children.toArray(children).filter(Boolean);\n  const separate = variant === 'separate';\n\n  return (\n    <ul\n      className={[styles.list, separate ? styles.separate : null, className]\n        .filter(Boolean)\n        .join(' ')}\n      {...props}\n    >\n      {items.map((child, i) => (\n        <li key={i} className={separate ? styles.separateItem : styles.item}>\n          {!separate && i > 0 && <Separator aria-hidden=\"true\" />}\n          {child}\n        </li>\n      ))}\n    </ul>\n  );\n};\n"],"mappings":";;;;;AA+BA,IAAa,KAAa,EACxB,aACA,aAAU,WACV,cACA,GAAG,QACiB;CACpB,IAAM,IAAQ,EAAS,QAAQ,CAAQ,EAAE,OAAO,OAAO,GACjD,IAAW,MAAY;CAE7B,OACE,kBAAC,MAAD;EACE,WAAW;GAAC,EAAO;GAAM,IAAW,EAAO,WAAW;GAAM;EAAS,EAClE,OAAO,OAAO,EACd,KAAK,GAAG;EACX,GAAI;YAEH,EAAM,KAAK,GAAO,MACjB,kBAAC,MAAD;GAAY,WAAW,IAAW,EAAO,eAAe,EAAO;aAA/D,CACG,CAAC,KAAY,IAAI,KAAK,kBAAC,GAAD,EAAW,eAAY,OAAQ,CAAA,GACrD,CACC;KAHK,CAGL,CACL;CACC,CAAA;AAER"}

package/dist/components/BoxedList/BoxedList.module.css.cjs

@@ -1,2 +1,2 @@
-var e={list:`_list_1m4lm_3`,item:`_item_1m4lm_16`,separate:`_separate_1m4lm_37`,separateItem:`_separateItem_1m4lm_47`,divider:`_divider_1m4lm_69`};exports.default=e;
+var e={list:`_list_ltjeu_3`,item:`_item_ltjeu_16`,separate:`_separate_ltjeu_36`,separateItem:`_separateItem_ltjeu_46`,divider:`_divider_ltjeu_68`};exports.default=e;
 //# sourceMappingURL=BoxedList.module.css.cjs.map

package/dist/components/BoxedList/BoxedList.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BoxedList.module.css.cjs","names":[],"sources":["../../../src/components/BoxedList/BoxedList.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  border: 1px solid var(--gnome-divider-color);\n  border-radius: var(--gnome-radius-lg);\n}\n\n/* ─── Row wrapper ──────────────────────────────────────────────────────────── */\n\n.item {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n.item:first-child > * {\n  border-radius: var(--gnome-radius-lg) var(--gnome-radius-lg) 0 0;\n}\n\n.item:last-child > * {\n  border-radius: 0 0 var(--gnome-radius-lg) var(--gnome-radius-lg);\n}\n\n.item:only-child > * {\n  border-radius: var(--gnome-radius-lg);\n}\n\n\n/* ─── Separate variant ─────────────────────────────────────────────────────── */\n\n.separate {\n  background: none;\n  border: none;\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-2, 12px);\n  overflow: visible;\n}\n\n.separateItem {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-divider-color);\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n@media (prefers-color-scheme: dark) {\n  .separateItem {\n    background-color: var(--gnome-card-bg-color, #2d2d2d);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .list {\n    border-width: 2px;\n  }\n\n  .divider {\n    height: 2px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"BoxedList.module.css.cjs","names":[],"sources":["../../../src/components/BoxedList/BoxedList.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  border: 1px solid var(--gnome-divider-color);\n  border-radius: var(--gnome-radius-lg);\n}\n\n/* ─── Row wrapper ──────────────────────────────────────────────────────────── */\n\n.item {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n.item:first-child > * {\n  border-radius: var(--gnome-radius-lg) var(--gnome-radius-lg) 0 0;\n}\n\n.item:last-child > * {\n  border-radius: 0 0 var(--gnome-radius-lg) var(--gnome-radius-lg);\n}\n\n.item:only-child > * {\n  border-radius: var(--gnome-radius-lg);\n}\n\n/* ─── Separate variant ─────────────────────────────────────────────────────── */\n\n.separate {\n  background: none;\n  border: none;\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-2, 12px);\n  overflow: visible;\n}\n\n.separateItem {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-divider-color);\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n@media (prefers-color-scheme: dark) {\n  .separateItem {\n    background-color: var(--gnome-card-bg-color, #2d2d2d);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .list {\n    border-width: 2px;\n  }\n\n  .divider {\n    height: 2px;\n  }\n}\n"],"mappings":""}

package/dist/components/BoxedList/BoxedList.module.css.js

@@ -1,9 +1,9 @@
 var e = {
-	list: "_list_1m4lm_3",
-	item: "_item_1m4lm_16",
-	separate: "_separate_1m4lm_37",
-	separateItem: "_separateItem_1m4lm_47",
-	divider: "_divider_1m4lm_69"
+	list: "_list_ltjeu_3",
+	item: "_item_ltjeu_16",
+	separate: "_separate_ltjeu_36",
+	separateItem: "_separateItem_ltjeu_46",
+	divider: "_divider_ltjeu_68"
 };
 //#endregion
 export { e as default };

package/dist/components/BoxedList/BoxedList.module.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"BoxedList.module.css.js","names":[],"sources":["../../../src/components/BoxedList/BoxedList.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  border: 1px solid var(--gnome-divider-color);\n  border-radius: var(--gnome-radius-lg);\n}\n\n/* ─── Row wrapper ──────────────────────────────────────────────────────────── */\n\n.item {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n.item:first-child > * {\n  border-radius: var(--gnome-radius-lg) var(--gnome-radius-lg) 0 0;\n}\n\n.item:last-child > * {\n  border-radius: 0 0 var(--gnome-radius-lg) var(--gnome-radius-lg);\n}\n\n.item:only-child > * {\n  border-radius: var(--gnome-radius-lg);\n}\n\n\n/* ─── Separate variant ─────────────────────────────────────────────────────── */\n\n.separate {\n  background: none;\n  border: none;\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-2, 12px);\n  overflow: visible;\n}\n\n.separateItem {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-divider-color);\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n@media (prefers-color-scheme: dark) {\n  .separateItem {\n    background-color: var(--gnome-card-bg-color, #2d2d2d);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .list {\n    border-width: 2px;\n  }\n\n  .divider {\n    height: 2px;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"BoxedList.module.css.js","names":[],"sources":["../../../src/components/BoxedList/BoxedList.module.css"],"sourcesContent":["/* ─── Container ────────────────────────────────────────────────────────────── */\n\n.list {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-card-fg-color, rgba(0, 0, 0, 0.8));\n  border: 1px solid var(--gnome-divider-color);\n  border-radius: var(--gnome-radius-lg);\n}\n\n/* ─── Row wrapper ──────────────────────────────────────────────────────────── */\n\n.item {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n}\n\n.item:first-child > * {\n  border-radius: var(--gnome-radius-lg) var(--gnome-radius-lg) 0 0;\n}\n\n.item:last-child > * {\n  border-radius: 0 0 var(--gnome-radius-lg) var(--gnome-radius-lg);\n}\n\n.item:only-child > * {\n  border-radius: var(--gnome-radius-lg);\n}\n\n/* ─── Separate variant ─────────────────────────────────────────────────────── */\n\n.separate {\n  background: none;\n  border: none;\n  border-radius: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--gnome-space-2, 12px);\n  overflow: visible;\n}\n\n.separateItem {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  border: 1px solid var(--gnome-divider-color);\n  border-radius: var(--gnome-radius-lg);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n@media (prefers-color-scheme: dark) {\n  .separateItem {\n    background-color: var(--gnome-card-bg-color, #2d2d2d);\n  }\n}\n\n/* ─── High contrast ────────────────────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .list {\n    border-width: 2px;\n  }\n\n  .divider {\n    height: 2px;\n  }\n}\n"],"mappings":""}

package/dist/components/BoxedList/index.d.ts

@@ -1,2 +1,2 @@
-export { BoxedList } from './BoxedList';
 export type { BoxedListProps, BoxedListVariant } from './BoxedList';
+export { BoxedList } from './BoxedList';

package/dist/components/BoxedList.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./BoxedList/BoxedList.cjs`);exports.BoxedList=e.BoxedList;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./BoxedList/BoxedList.cjs");exports.BoxedList=e.BoxedList;

package/dist/components/BreakpointBin/BreakpointBin.cjs

@@ -1,2 +1,2 @@
-let e=require(`react`),t=require(`react/jsx-runtime`);function n({breakpoints:n,children:r,className:i,style:a,...o}){let s=(0,e.useRef)(null),[c,l]=(0,e.useState)({activeBreakpoint:null,width:0});return(0,e.useEffect)(()=>{let e=s.current;if(!e)return;let t=[...n].sort((e,t)=>e.maxWidth-t.maxWidth),r=e=>({activeBreakpoint:(t.find(t=>e<=t.maxWidth)??null)?.name??null,width:e});l(r(e.offsetWidth));let i=new ResizeObserver(e=>{let t=e[0];t&&l(r(t.contentBoxSize?.[0]?.inlineSize??t.contentRect.width))});return i.observe(e),()=>i.disconnect()},[JSON.stringify(n)]),(0,t.jsx)(`div`,{ref:s,className:i,style:{minWidth:0,...a},"data-breakpoint":c.activeBreakpoint??void 0,...o,children:r(c)})}exports.BreakpointBin=n;
+let e=require("react"),t=require("react/jsx-runtime");var n=({breakpoints:n,children:r,className:i,style:a,...o})=>{let s=(0,e.useRef)(null),[c,l]=(0,e.useState)({activeBreakpoint:null,width:0});return(0,e.useEffect)(()=>{let e=s.current;if(!e)return;let t=[...n].sort((e,t)=>e.maxWidth-t.maxWidth),r=e=>({activeBreakpoint:(t.find(t=>e<=t.maxWidth)??null)?.name??null,width:e});l(r(e.offsetWidth));let i=new ResizeObserver(e=>{let t=e[0];t&&l(r(t.contentBoxSize?.[0]?.inlineSize??t.contentRect.width))});return i.observe(e),()=>i.disconnect()},[n]),(0,t.jsx)(`div`,{ref:s,className:i,style:{minWidth:0,...a},"data-breakpoint":c.activeBreakpoint??void 0,...o,children:r(c)})};exports.BreakpointBin=n;
 //# sourceMappingURL=BreakpointBin.cjs.map

package/dist/components/BreakpointBin/BreakpointBin.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointBin.cjs","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type CSSProperties,\n} from \"react\";\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface BreakpointDefinition {\n  /**\n   * Identifier for this breakpoint, e.g. `\"compact\"` or `\"narrow\"`.\n   * Exposed as `data-breakpoint` on the container element for CSS targeting.\n   */\n  name: string;\n  /**\n   * Container width threshold in pixels.\n   * This breakpoint becomes active when the container width is ≤ this value.\n   */\n  maxWidth: number;\n}\n\nexport interface BreakpointBinState {\n  /**\n   * Name of the currently active breakpoint, or `null` when the container\n   * is wider than all defined breakpoints.\n   */\n  activeBreakpoint: string | null;\n  /** Current container width in px (from `ResizeObserver`). */\n  width: number;\n}\n\nexport interface BreakpointBinProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * Breakpoint definitions sorted by `maxWidth` ascending.\n   * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.\n   */\n  breakpoints: BreakpointDefinition[];\n  /**\n   * Render prop that receives the current breakpoint state.\n   *\n   * @example\n   * ```tsx\n   * <BreakpointBin breakpoints={[{ name: \"compact\", maxWidth: 400 }]}>\n   *   {({ activeBreakpoint }) =>\n   *     activeBreakpoint === \"compact\" ? <CompactLayout /> : <WideLayout />\n   *   }\n   * </BreakpointBin>\n   * ```\n   */\n  children: (state: BreakpointBinState) => ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Container that fires layout changes when **its own width** crosses defined\n * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`\n * (libadwaita 1.9 / GNOME 50).\n *\n * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses\n * `ResizeObserver` to watch the element itself. This makes it composable:\n * the same component can behave differently depending on how much space it\n * is given by its parent, regardless of the viewport size.\n *\n * ### How it works\n * - Breakpoints are evaluated in ascending `maxWidth` order.\n * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.\n * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.\n * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.\n *\n * ### CSS targeting\n * ```css\n * .myWidget[data-breakpoint=\"compact\"] .layout { flex-direction: column; }\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html\n */\nexport function BreakpointBin({\n  breakpoints,\n  children,\n  className,\n  style,\n  ...props\n}: BreakpointBinProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<BreakpointBinState>({\n    activeBreakpoint: null,\n    width: 0,\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n\n    // Sort breakpoints ascending so we find the smallest matching threshold\n    const sorted = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);\n\n    const evaluate = (width: number): BreakpointBinState => {\n      const match = sorted.find((bp) => width <= bp.maxWidth) ?? null;\n      return { activeBreakpoint: match?.name ?? null, width };\n    };\n\n    // Initial measurement\n    setState(evaluate(el.offsetWidth));\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (!entry) return;\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width =\n        entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n    return () => observer.disconnect();\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(breakpoints)]);\n\n  const containerStyle: CSSProperties = {\n    // Ensure the container establishes a containing block\n    // so ResizeObserver reflects actual layout width\n    minWidth: 0,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      data-breakpoint={state.activeBreakpoint ?? undefined}\n      {...props}\n    >\n      {children(state)}\n    </div>\n  );\n}\n"],"mappings":"sDAiFA,SAAgB,EAAc,CAC5B,cACA,WACA,YACA,QACA,GAAG,GACkB,CACrB,IAAM,GAAA,EAAA,EAAA,QAAsC,KAAK,CAC3C,CAAC,EAAO,IAAA,EAAA,EAAA,UAAyC,CACrD,iBAAkB,KAClB,MAAO,EACR,CAAC,CAsCF,OApCA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAK,EAAa,QACxB,GAAI,CAAC,EAAI,OAGT,IAAM,EAAS,CAAC,GAAG,EAAY,CAAC,MAAM,EAAG,IAAM,EAAE,SAAW,EAAE,SAAS,CAEjE,EAAY,IAET,CAAE,kBADK,EAAO,KAAM,GAAO,GAAS,EAAG,SAAS,EAAI,OACzB,MAAQ,KAAM,QAAO,EAIzD,EAAS,EAAS,EAAG,YAAY,CAAC,CAElC,IAAM,EAAW,IAAI,eAAgB,GAAY,CAC/C,IAAM,EAAQ,EAAQ,GACjB,GAIL,EAAS,EADP,EAAM,iBAAiB,IAAI,YAAc,EAAM,YAAY,MACrC,CAAC,EACzB,CAGF,OADA,EAAS,QAAQ,EAAG,KACP,EAAS,YAAY,EAEjC,CAAC,KAAK,UAAU,EAAY,CAAC,CAAC,EAU/B,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACM,YACX,MAXkC,CAGpC,SAAU,EACV,GAAG,EACJ,CAOG,kBAAiB,EAAM,kBAAoB,IAAA,GAC3C,GAAI,WAEH,EAAS,EAAM,CACZ,CAAA"}
+{"version":3,"file":"BreakpointBin.cjs","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface BreakpointDefinition {\n  /**\n   * Identifier for this breakpoint, e.g. `\"compact\"` or `\"narrow\"`.\n   * Exposed as `data-breakpoint` on the container element for CSS targeting.\n   */\n  name: string;\n  /**\n   * Container width threshold in pixels.\n   * This breakpoint becomes active when the container width is ≤ this value.\n   */\n  maxWidth: number;\n}\n\nexport interface BreakpointBinState {\n  /**\n   * Name of the currently active breakpoint, or `null` when the container\n   * is wider than all defined breakpoints.\n   */\n  activeBreakpoint: string | null;\n  /** Current container width in px (from `ResizeObserver`). */\n  width: number;\n}\n\nexport interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * Breakpoint definitions sorted by `maxWidth` ascending.\n   * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.\n   */\n  breakpoints: BreakpointDefinition[];\n  /**\n   * Render prop that receives the current breakpoint state.\n   *\n   * @example\n   * ```tsx\n   * <BreakpointBin breakpoints={[{ name: \"compact\", maxWidth: 400 }]}>\n   *   {({ activeBreakpoint }) =>\n   *     activeBreakpoint === \"compact\" ? <CompactLayout /> : <WideLayout />\n   *   }\n   * </BreakpointBin>\n   * ```\n   */\n  children: (state: BreakpointBinState) => ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Container that fires layout changes when **its own width** crosses defined\n * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`\n * (libadwaita 1.9 / GNOME 50).\n *\n * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses\n * `ResizeObserver` to watch the element itself. This makes it composable:\n * the same component can behave differently depending on how much space it\n * is given by its parent, regardless of the viewport size.\n *\n * ### How it works\n * - Breakpoints are evaluated in ascending `maxWidth` order.\n * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.\n * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.\n * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.\n *\n * ### CSS targeting\n * ```css\n * .myWidget[data-breakpoint=\"compact\"] .layout { flex-direction: column; }\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html\n */\nexport const BreakpointBin = ({\n  breakpoints,\n  children,\n  className,\n  style,\n  ...props\n}: BreakpointBinProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<BreakpointBinState>({\n    activeBreakpoint: null,\n    width: 0,\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    // Sort breakpoints ascending so we find the smallest matching threshold\n    const sorted = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);\n\n    const evaluate = (width: number): BreakpointBinState => {\n      const match = sorted.find((bp) => width <= bp.maxWidth) ?? null;\n\n      return { activeBreakpoint: match?.name ?? null, width };\n    };\n\n    // Initial measurement\n    setState(evaluate(el.offsetWidth));\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n\n      if (!entry) {\n        return;\n      }\n\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [breakpoints]);\n\n  const containerStyle: CSSProperties = {\n    // Ensure the container establishes a containing block\n    // so ResizeObserver reflects actual layout width\n    minWidth: 0,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      data-breakpoint={state.activeBreakpoint ?? undefined}\n      {...props}\n    >\n      {children(state)}\n    </div>\n  );\n};\n"],"mappings":"sDAgFA,IAAa,GAAiB,CAC5B,cACA,WACA,YACA,QACA,GAAG,KACqB,CACxB,IAAM,GAAA,EAAA,EAAA,QAAsC,IAAI,EAC1C,CAAC,EAAO,IAAA,EAAA,EAAA,UAAyC,CACrD,iBAAkB,KAClB,MAAO,CACT,CAAC,EA8CD,OA5CA,EAAA,EAAA,eAAgB,CACd,IAAM,EAAK,EAAa,QAExB,GAAI,CAAC,EACH,OAIF,IAAM,EAAS,CAAC,GAAG,CAAW,EAAE,MAAM,EAAG,IAAM,EAAE,SAAW,EAAE,QAAQ,EAEhE,EAAY,IAGT,CAAE,kBAFK,EAAO,KAAM,GAAO,GAAS,EAAG,QAAQ,GAAK,OAEzB,MAAQ,KAAM,OAAM,GAIxD,EAAS,EAAS,EAAG,WAAW,CAAC,EAEjC,IAAM,EAAW,IAAI,eAAgB,GAAY,CAC/C,IAAM,EAAQ,EAAQ,GAEjB,GAOL,EAAS,EAFK,EAAM,iBAAiB,IAAI,YAAc,EAAM,YAAY,KAElD,CAAC,CAC1B,CAAC,EAID,OAFA,EAAS,QAAQ,CAAE,MAEN,EAAS,WAAW,CACnC,EAAG,CAAC,CAAW,CAAC,GAUd,EAAA,EAAA,KAAC,MAAD,CACE,IAAK,EACM,YACX,MAAO,CART,SAAU,EACV,GAAG,CAOM,EACP,kBAAiB,EAAM,kBAAoB,IAAA,GAC3C,GAAI,WAEH,EAAS,CAAK,CACZ,CAAA,CAET"}

package/dist/components/BreakpointBin/BreakpointBin.d.ts

@@ -20,7 +20,7 @@ export interface BreakpointBinState {
     /** Current container width in px (from `ResizeObserver`). */
     width: number;
 }
-export interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+export interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
     /**
      * Breakpoint definitions sorted by `maxWidth` ascending.
      * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.
@@ -63,4 +63,4 @@ export interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>,
  *
  * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html
  */
-export declare function BreakpointBin({ breakpoints, children, className, style, ...props }: BreakpointBinProps): import("react/jsx-runtime").JSX.Element;
+export declare const BreakpointBin: ({ breakpoints, children, className, style, ...props }: BreakpointBinProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/BreakpointBin/BreakpointBin.js

@@ -1,7 +1,7 @@
 import { useEffect as e, useRef as t, useState as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
 //#region src/components/BreakpointBin/BreakpointBin.tsx
-function i({ breakpoints: i, children: a, className: o, style: s, ...c }) {
+var i = ({ breakpoints: i, children: a, className: o, style: s, ...c }) => {
 	let l = t(null), [u, d] = n({
 		activeBreakpoint: null,
 		width: 0
@@ -19,7 +19,7 @@ function i({ breakpoints: i, children: a, className: o, style: s, ...c }) {
 			t && d(n(t.contentBoxSize?.[0]?.inlineSize ?? t.contentRect.width));
 		});
 		return r.observe(e), () => r.disconnect();
-	}, [JSON.stringify(i)]), /* @__PURE__ */ r("div", {
+	}, [i]), /* @__PURE__ */ r("div", {
 		ref: l,
 		className: o,
 		style: {
@@ -30,7 +30,7 @@ function i({ breakpoints: i, children: a, className: o, style: s, ...c }) {
 		...c,
 		children: a(u)
 	});
-}
+};
 //#endregion
 export { i as BreakpointBin };
 

package/dist/components/BreakpointBin/BreakpointBin.js.map

@@ -1 +1 @@
-{"version":3,"file":"BreakpointBin.js","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  useState,\n  useEffect,\n  useRef,\n  type HTMLAttributes,\n  type ReactNode,\n  type CSSProperties,\n} from \"react\";\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface BreakpointDefinition {\n  /**\n   * Identifier for this breakpoint, e.g. `\"compact\"` or `\"narrow\"`.\n   * Exposed as `data-breakpoint` on the container element for CSS targeting.\n   */\n  name: string;\n  /**\n   * Container width threshold in pixels.\n   * This breakpoint becomes active when the container width is ≤ this value.\n   */\n  maxWidth: number;\n}\n\nexport interface BreakpointBinState {\n  /**\n   * Name of the currently active breakpoint, or `null` when the container\n   * is wider than all defined breakpoints.\n   */\n  activeBreakpoint: string | null;\n  /** Current container width in px (from `ResizeObserver`). */\n  width: number;\n}\n\nexport interface BreakpointBinProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /**\n   * Breakpoint definitions sorted by `maxWidth` ascending.\n   * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.\n   */\n  breakpoints: BreakpointDefinition[];\n  /**\n   * Render prop that receives the current breakpoint state.\n   *\n   * @example\n   * ```tsx\n   * <BreakpointBin breakpoints={[{ name: \"compact\", maxWidth: 400 }]}>\n   *   {({ activeBreakpoint }) =>\n   *     activeBreakpoint === \"compact\" ? <CompactLayout /> : <WideLayout />\n   *   }\n   * </BreakpointBin>\n   * ```\n   */\n  children: (state: BreakpointBinState) => ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Container that fires layout changes when **its own width** crosses defined\n * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`\n * (libadwaita 1.9 / GNOME 50).\n *\n * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses\n * `ResizeObserver` to watch the element itself. This makes it composable:\n * the same component can behave differently depending on how much space it\n * is given by its parent, regardless of the viewport size.\n *\n * ### How it works\n * - Breakpoints are evaluated in ascending `maxWidth` order.\n * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.\n * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.\n * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.\n *\n * ### CSS targeting\n * ```css\n * .myWidget[data-breakpoint=\"compact\"] .layout { flex-direction: column; }\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html\n */\nexport function BreakpointBin({\n  breakpoints,\n  children,\n  className,\n  style,\n  ...props\n}: BreakpointBinProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<BreakpointBinState>({\n    activeBreakpoint: null,\n    width: 0,\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n    if (!el) return;\n\n    // Sort breakpoints ascending so we find the smallest matching threshold\n    const sorted = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);\n\n    const evaluate = (width: number): BreakpointBinState => {\n      const match = sorted.find((bp) => width <= bp.maxWidth) ?? null;\n      return { activeBreakpoint: match?.name ?? null, width };\n    };\n\n    // Initial measurement\n    setState(evaluate(el.offsetWidth));\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n      if (!entry) return;\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width =\n        entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n    return () => observer.disconnect();\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [JSON.stringify(breakpoints)]);\n\n  const containerStyle: CSSProperties = {\n    // Ensure the container establishes a containing block\n    // so ResizeObserver reflects actual layout width\n    minWidth: 0,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      data-breakpoint={state.activeBreakpoint ?? undefined}\n      {...props}\n    >\n      {children(state)}\n    </div>\n  );\n}\n"],"mappings":";;;AAiFA,SAAgB,EAAc,EAC5B,gBACA,aACA,cACA,UACA,GAAG,KACkB;CACrB,IAAM,IAAe,EAAuB,KAAK,EAC3C,CAAC,GAAO,KAAY,EAA6B;EACrD,kBAAkB;EAClB,OAAO;EACR,CAAC;AAsCF,QApCA,QAAgB;EACd,IAAM,IAAK,EAAa;AACxB,MAAI,CAAC,EAAI;EAGT,IAAM,IAAS,CAAC,GAAG,EAAY,CAAC,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,SAAS,EAEjE,KAAY,OAET;GAAE,mBADK,EAAO,MAAM,MAAO,KAAS,EAAG,SAAS,IAAI,OACzB,QAAQ;GAAM;GAAO;AAIzD,IAAS,EAAS,EAAG,YAAY,CAAC;EAElC,IAAM,IAAW,IAAI,gBAAgB,MAAY;GAC/C,IAAM,IAAQ,EAAQ;AACjB,QAIL,EAAS,EADP,EAAM,iBAAiB,IAAI,cAAc,EAAM,YAAY,MACrC,CAAC;IACzB;AAGF,SADA,EAAS,QAAQ,EAAG,QACP,EAAS,YAAY;IAEjC,CAAC,KAAK,UAAU,EAAY,CAAC,CAAC,EAU/B,kBAAC,OAAD;EACE,KAAK;EACM;EACX,OAXkC;GAGpC,UAAU;GACV,GAAG;GACJ;EAOG,mBAAiB,EAAM,oBAAoB,KAAA;EAC3C,GAAI;YAEH,EAAS,EAAM;EACZ,CAAA"}
+{"version":3,"file":"BreakpointBin.js","names":[],"sources":["../../../src/components/BreakpointBin/BreakpointBin.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type HTMLAttributes,\n  type ReactNode,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n// ─── Public types ─────────────────────────────────────────────────────────────\n\nexport interface BreakpointDefinition {\n  /**\n   * Identifier for this breakpoint, e.g. `\"compact\"` or `\"narrow\"`.\n   * Exposed as `data-breakpoint` on the container element for CSS targeting.\n   */\n  name: string;\n  /**\n   * Container width threshold in pixels.\n   * This breakpoint becomes active when the container width is ≤ this value.\n   */\n  maxWidth: number;\n}\n\nexport interface BreakpointBinState {\n  /**\n   * Name of the currently active breakpoint, or `null` when the container\n   * is wider than all defined breakpoints.\n   */\n  activeBreakpoint: string | null;\n  /** Current container width in px (from `ResizeObserver`). */\n  width: number;\n}\n\nexport interface BreakpointBinProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {\n  /**\n   * Breakpoint definitions sorted by `maxWidth` ascending.\n   * The active breakpoint is the smallest `maxWidth` ≥ the container's current width.\n   */\n  breakpoints: BreakpointDefinition[];\n  /**\n   * Render prop that receives the current breakpoint state.\n   *\n   * @example\n   * ```tsx\n   * <BreakpointBin breakpoints={[{ name: \"compact\", maxWidth: 400 }]}>\n   *   {({ activeBreakpoint }) =>\n   *     activeBreakpoint === \"compact\" ? <CompactLayout /> : <WideLayout />\n   *   }\n   * </BreakpointBin>\n   * ```\n   */\n  children: (state: BreakpointBinState) => ReactNode;\n}\n\n// ─── Component ────────────────────────────────────────────────────────────────\n\n/**\n * Container that fires layout changes when **its own width** crosses defined\n * thresholds — the CSS container-query equivalent of `AdwBreakpointBin`\n * (libadwaita 1.9 / GNOME 50).\n *\n * Unlike `useBreakpoint` (which watches the viewport), `BreakpointBin` uses\n * `ResizeObserver` to watch the element itself. This makes it composable:\n * the same component can behave differently depending on how much space it\n * is given by its parent, regardless of the viewport size.\n *\n * ### How it works\n * - Breakpoints are evaluated in ascending `maxWidth` order.\n * - The active breakpoint is the first one whose `maxWidth` ≥ the container width.\n * - When no breakpoint matches (container is wider than all), `activeBreakpoint` is `null`.\n * - The active name is set as `data-breakpoint` on the wrapper `<div>` for CSS targeting.\n *\n * ### CSS targeting\n * ```css\n * .myWidget[data-breakpoint=\"compact\"] .layout { flex-direction: column; }\n * ```\n *\n * @see https://gnome.pages.gitlab.gnome.org/libadwaita/doc/main/class.BreakpointBin.html\n */\nexport const BreakpointBin = ({\n  breakpoints,\n  children,\n  className,\n  style,\n  ...props\n}: BreakpointBinProps) => {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [state, setState] = useState<BreakpointBinState>({\n    activeBreakpoint: null,\n    width: 0,\n  });\n\n  useEffect(() => {\n    const el = containerRef.current;\n\n    if (!el) {\n      return;\n    }\n\n    // Sort breakpoints ascending so we find the smallest matching threshold\n    const sorted = [...breakpoints].sort((a, b) => a.maxWidth - b.maxWidth);\n\n    const evaluate = (width: number): BreakpointBinState => {\n      const match = sorted.find((bp) => width <= bp.maxWidth) ?? null;\n\n      return { activeBreakpoint: match?.name ?? null, width };\n    };\n\n    // Initial measurement\n    setState(evaluate(el.offsetWidth));\n\n    const observer = new ResizeObserver((entries) => {\n      const entry = entries[0];\n\n      if (!entry) {\n        return;\n      }\n\n      // contentBoxSize is more reliable than contentRect for inline-size\n      const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;\n\n      setState(evaluate(width));\n    });\n\n    observer.observe(el);\n\n    return () => observer.disconnect();\n  }, [breakpoints]);\n\n  const containerStyle: CSSProperties = {\n    // Ensure the container establishes a containing block\n    // so ResizeObserver reflects actual layout width\n    minWidth: 0,\n    ...style,\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={className}\n      style={containerStyle}\n      data-breakpoint={state.activeBreakpoint ?? undefined}\n      {...props}\n    >\n      {children(state)}\n    </div>\n  );\n};\n"],"mappings":";;;AAgFA,IAAa,KAAiB,EAC5B,gBACA,aACA,cACA,UACA,GAAG,QACqB;CACxB,IAAM,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAO,KAAY,EAA6B;EACrD,kBAAkB;EAClB,OAAO;CACT,CAAC;CA8CD,OA5CA,QAAgB;EACd,IAAM,IAAK,EAAa;EAExB,IAAI,CAAC,GACH;EAIF,IAAM,IAAS,CAAC,GAAG,CAAW,EAAE,MAAM,GAAG,MAAM,EAAE,WAAW,EAAE,QAAQ,GAEhE,KAAY,OAGT;GAAE,mBAFK,EAAO,MAAM,MAAO,KAAS,EAAG,QAAQ,KAAK,OAEzB,QAAQ;GAAM;EAAM;EAIxD,EAAS,EAAS,EAAG,WAAW,CAAC;EAEjC,IAAM,IAAW,IAAI,gBAAgB,MAAY;GAC/C,IAAM,IAAQ,EAAQ;GAEjB,KAOL,EAAS,EAFK,EAAM,iBAAiB,IAAI,cAAc,EAAM,YAAY,KAElD,CAAC;EAC1B,CAAC;EAID,OAFA,EAAS,QAAQ,CAAE,SAEN,EAAS,WAAW;CACnC,GAAG,CAAC,CAAW,CAAC,GAUd,kBAAC,OAAD;EACE,KAAK;EACM;EACX,OAAO;GART,UAAU;GACV,GAAG;EAOM;EACP,mBAAiB,EAAM,oBAAoB,KAAA;EAC3C,GAAI;YAEH,EAAS,CAAK;CACZ,CAAA;AAET"}

package/dist/components/BreakpointBin/index.d.ts

@@ -1,2 +1,2 @@
+export type { BreakpointBinProps, BreakpointBinState, BreakpointDefinition, } from './BreakpointBin';
 export { BreakpointBin } from './BreakpointBin';
-export type { BreakpointBinProps, BreakpointDefinition, BreakpointBinState, } from './BreakpointBin';

package/dist/components/BreakpointBin.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./BreakpointBin/BreakpointBin.cjs`);exports.BreakpointBin=e.BreakpointBin;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./BreakpointBin/BreakpointBin.cjs");exports.BreakpointBin=e.BreakpointBin;

package/dist/components/Button/Button.cjs

@@ -1,2 +1,2 @@
-const e=require(`./Button.module.css.cjs`);let t=require(`react`),n=require(`react/jsx-runtime`);var r=(0,t.forwardRef)(function({variant:t=`default`,size:r=`md`,shape:i=`default`,osd:a=!1,leadingIcon:o,trailingIcon:s,children:c,className:l,...u},d){return(0,n.jsxs)(`button`,{ref:d,className:[e.default.button,e.default[t],r===`md`?null:e.default[r],i===`default`?null:e.default[i],a?e.default.osd:null,l].filter(Boolean).join(` `),...u,children:[o,c,s]})});exports.Button=r;
+const e=require("./Button.module.css.cjs");let t=require("react"),n=require("react/jsx-runtime");var r=(0,t.forwardRef)(function({variant:t=`default`,size:r=`md`,shape:i=`default`,osd:a=!1,leadingIcon:o,trailingIcon:s,children:c,className:l,...u},d){return(0,n.jsxs)(`button`,{ref:d,className:[e.default.button,e.default[t],r===`md`?null:e.default[r],i==="default"?null:e.default[i],a?e.default.osd:null,l].filter(Boolean).join(` `),...u,children:[o,c,s]})});exports.Button=r;
 //# sourceMappingURL=Button.cjs.map

package/dist/components/Button/Button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./Button.module.css\";\n\nexport type ButtonVariant = \"default\" | \"suggested\" | \"destructive\" | \"flat\" | \"raised\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\nexport type ButtonShape = \"default\" | \"pill\" | \"circular\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({\n  variant = \"default\",\n  size = \"md\",\n  shape = \"default\",\n  osd = false,\n  leadingIcon,\n  trailingIcon,\n  children,\n  className,\n  ...props\n}: ButtonProps, ref) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== \"md\" ? styles[size] : null,\n    shape !== \"default\" ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":"iGAqCA,IAAa,GAAA,EAAA,EAAA,YAAoD,SAAgB,CAC/E,UAAU,UACV,OAAO,KACP,QAAQ,UACR,MAAM,GACN,cACA,eACA,WACA,YACA,GAAG,GACW,EAAK,CAYnB,OACE,EAAA,EAAA,MAAC,SAAD,CAAa,MAAK,UAZJ,CACd,EAAA,QAAO,OACP,EAAA,QAAO,GACP,IAAS,KAAsB,KAAf,EAAA,QAAO,GACvB,IAAU,UAA4B,KAAhB,EAAA,QAAO,GAC7B,EAAM,EAAA,QAAO,IAAM,KACnB,EACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI,CAG4B,GAAI,WAA1C,CACG,EACA,EACA,EACM,IAEX"}
+{"version":3,"file":"Button.cjs","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'default' | 'suggested' | 'destructive' | 'flat' | 'raised';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonShape = 'default' | 'pill' | 'circular';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'default',\n    size = 'md',\n    shape = 'default',\n    osd = false,\n    leadingIcon,\n    trailingIcon,\n    children,\n    className,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== 'md' ? styles[size] : null,\n    shape !== 'default' ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":"iGAsCA,IAAa,GAAA,EAAA,EAAA,YAAoD,SAC/D,CACE,UAAU,UACV,OAAO,KACP,QAAQ,UACR,MAAM,GACN,cACA,eACA,WACA,YACA,GAAG,GAEL,EACA,CAYA,OACE,EAAA,EAAA,MAAC,SAAD,CAAa,MAAK,UAZJ,CACd,EAAA,QAAO,OACP,EAAA,QAAO,GACP,IAAS,KAAsB,KAAf,EAAA,QAAO,GACvB,IAAU,UAA4B,KAAhB,EAAA,QAAO,GAC7B,EAAM,EAAA,QAAO,IAAM,KACnB,CACF,EACG,OAAO,OAAO,EACd,KAAK,GAGuB,EAAS,GAAI,WAA1C,CACG,EACA,EACA,CACK,GAEZ,CAAC"}

package/dist/components/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-export type ButtonVariant = "default" | "suggested" | "destructive" | "flat" | "raised";
-export type ButtonSize = "sm" | "md" | "lg";
-export type ButtonShape = "default" | "pill" | "circular";
+export type ButtonVariant = 'default' | 'suggested' | 'destructive' | 'flat' | 'raised';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonShape = 'default' | 'pill' | 'circular';
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     /** Visual style of the button. Follows GNOME HIG button types. */
     variant?: ButtonVariant;

package/dist/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport styles from \"./Button.module.css\";\n\nexport type ButtonVariant = \"default\" | \"suggested\" | \"destructive\" | \"flat\" | \"raised\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\nexport type ButtonShape = \"default\" | \"pill\" | \"circular\";\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button({\n  variant = \"default\",\n  size = \"md\",\n  shape = \"default\",\n  osd = false,\n  leadingIcon,\n  trailingIcon,\n  children,\n  className,\n  ...props\n}: ButtonProps, ref) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== \"md\" ? styles[size] : null,\n    shape !== \"default\" ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":";;;;AAqCA,IAAa,IAAS,EAA2C,SAAgB,EAC/E,aAAU,WACV,UAAO,MACP,WAAQ,WACR,SAAM,IACN,gBACA,iBACA,aACA,cACA,GAAG,KACW,GAAK;AAYnB,QACE,kBAAC,UAAD;EAAa;EAAK,WAZJ;GACd,EAAO;GACP,EAAO;GACP,MAAS,OAAsB,OAAf,EAAO;GACvB,MAAU,YAA4B,OAAhB,EAAO;GAC7B,IAAM,EAAO,MAAM;GACnB;GACD,CACE,OAAO,QAAQ,CACf,KAAK,IAAI;EAG4B,GAAI;YAA1C;GACG;GACA;GACA;GACM;;EAEX"}
+{"version":3,"file":"Button.js","names":[],"sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["import { type ButtonHTMLAttributes, forwardRef, type ReactNode } from 'react';\n\nimport styles from './Button.module.css';\n\nexport type ButtonVariant = 'default' | 'suggested' | 'destructive' | 'flat' | 'raised';\nexport type ButtonSize = 'sm' | 'md' | 'lg';\nexport type ButtonShape = 'default' | 'pill' | 'circular';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Visual style of the button. Follows GNOME HIG button types. */\n  variant?: ButtonVariant;\n  /** Size of the button. */\n  size?: ButtonSize;\n  /** Shape of the button. \"pill\" for primary actions in open space, \"circular\" for icon-only buttons. */\n  shape?: ButtonShape;\n  /**\n   * Dark semi-transparent overlay style for buttons placed on top of\n   * media or images — mirrors the `.osd` style class.\n   */\n  osd?: boolean;\n  /** Icon placed before the label. */\n  leadingIcon?: ReactNode;\n  /** Icon placed after the label. */\n  trailingIcon?: ReactNode;\n  children?: ReactNode;\n}\n\n/**\n * Button component following GNOME Human Interface Guidelines.\n *\n * Variants:\n * - `default`     — Standard action, flat appearance with subtle border.\n * - `suggested`   — Affirmative/primary action (accent color). Use at most once per view.\n * - `destructive` — Dangerous or irreversible action (red). Use sparingly.\n * - `flat`        — No border or background; ideal for header bars and toolbars.\n *\n * @see https://developer.gnome.org/hig/patterns/controls/buttons.html\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(\n  {\n    variant = 'default',\n    size = 'md',\n    shape = 'default',\n    osd = false,\n    leadingIcon,\n    trailingIcon,\n    children,\n    className,\n    ...props\n  }: ButtonProps,\n  ref,\n) {\n  const classes = [\n    styles.button,\n    styles[variant],\n    size !== 'md' ? styles[size] : null,\n    shape !== 'default' ? styles[shape] : null,\n    osd ? styles.osd : null,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <button ref={ref} className={classes} {...props}>\n      {leadingIcon}\n      {children}\n      {trailingIcon}\n    </button>\n  );\n});\n"],"mappings":";;;;AAsCA,IAAa,IAAS,EAA2C,SAC/D,EACE,aAAU,WACV,UAAO,MACP,WAAQ,WACR,SAAM,IACN,gBACA,iBACA,aACA,cACA,GAAG,KAEL,GACA;CAYA,OACE,kBAAC,UAAD;EAAa;EAAK,WAZJ;GACd,EAAO;GACP,EAAO;GACP,MAAS,OAAsB,OAAf,EAAO;GACvB,MAAU,YAA4B,OAAhB,EAAO;GAC7B,IAAM,EAAO,MAAM;GACnB;EACF,EACG,OAAO,OAAO,EACd,KAAK,GAGuB;EAAS,GAAI;YAA1C;GACG;GACA;GACA;EACK;;AAEZ,CAAC"}

package/dist/components/Button/Button.module.css.cjs

@@ -1,2 +1,2 @@
-var e={button:`_button_mln0u_1`,pill:`_pill_mln0u_52`,circular:`_circular_mln0u_59`,default:`_default_mln0u_71`,suggested:`_suggested_mln0u_105`,destructive:`_destructive_mln0u_120`,flat:`_flat_mln0u_135`,raised:`_raised_mln0u_150`,osd:`_osd_mln0u_184`,sm:`_sm_mln0u_228`,lg:`_lg_mln0u_243`};exports.default=e;
+var e={button:`_button_plhd2_1`,pill:`_pill_plhd2_53`,circular:`_circular_plhd2_60`,default:`_default_plhd2_72`,suggested:`_suggested_plhd2_106`,destructive:`_destructive_plhd2_121`,flat:`_flat_plhd2_136`,raised:`_raised_plhd2_151`,osd:`_osd_plhd2_185`,sm:`_sm_plhd2_231`,lg:`_lg_plhd2_246`};exports.default=e;
 //# sourceMappingURL=Button.module.css.cjs.map

package/dist/components/Button/Button.module.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Button.module.css.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color);\n}\n\n/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgba(0, 0, 0, 0.65) !important;\n  color: rgba(255, 255, 255, 0.95) !important;\n  border-color: rgba(255, 255, 255, 0.12) !important;\n  box-shadow: none !important;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.75) !important;\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85) !important;\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65) !important;\n    border-color: rgba(255, 255, 255, 0.1) !important;\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width)) var(--gnome-focus-ring-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px) var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.sm.circular {\n  min-width: 28px;\n  min-height: 28px;\n  width: 28px;\n  height: 28px;\n  padding: 4px;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n\n.lg.circular {\n  min-width: 42px;\n  min-height: 42px;\n  width: 42px;\n  height: 42px;\n  padding: var(--gnome-space-1);\n}\n"],"mappings":""}
+{"version":3,"file":"Button.module.css.cjs","names":[],"sources":["../../../src/components/Button/Button.module.css"],"sourcesContent":[".button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--gnome-space-1);\n\n  /* Typography */\n  font-family: var(--gnome-font-family);\n  font-size: var(--gnome-font-size-body);\n  font-weight: var(--gnome-font-weight-semibold);\n  line-height: 1;\n  white-space: nowrap;\n\n  /* Shape */\n  border-radius: var(--gnome-radius-md);\n  border: 1px solid transparent;\n  padding: var(--gnome-space-1) var(--gnome-space-2);\n  min-height: 34px;\n  min-width: 5.5rem;\n\n  /* Behavior */\n  cursor: pointer;\n  user-select: none;\n  text-decoration: none;\n  vertical-align: middle;\n  outline: none;\n  transition:\n    background-color var(--gnome-duration-fast) var(--gnome-easing-default),\n    box-shadow var(--gnome-duration-fast) var(--gnome-easing-default),\n    opacity var(--gnome-duration-fast) var(--gnome-easing-default);\n}\n\n/* ─── Focus ───────────────────────────────────────────────────── */\n\n.button:focus-visible {\n  box-shadow:\n    0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n    0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n    var(--gnome-focus-ring-color);\n}\n\n/* ─── Disabled ────────────────────────────────────────────────── */\n\n.button:disabled,\n.button[aria-disabled=\"true\"] {\n  opacity: var(--gnome-opacity-disabled);\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ─── Pill shape ──────────────────────────────────────────────── */\n\n.pill {\n  border-radius: var(--gnome-radius-pill);\n  padding-inline: var(--gnome-space-3);\n}\n\n/* ─── Circular shape ──────────────────────────────────────────── */\n\n.circular {\n  border-radius: var(--gnome-radius-pill);\n  padding: var(--gnome-space-1);\n  min-width: 34px;\n  min-height: 34px;\n  width: 34px;\n  height: 34px;\n}\n\n/* ─── Variants ────────────────────────────────────────────────── */\n\n/* Default — slight raised appearance with visible border */\n.default {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.default:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.default:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .default {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: none;\n  }\n\n  .default:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .default:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* Suggested — accent color for primary / affirmative actions */\n.suggested {\n  background-color: var(--gnome-accent-bg-color);\n  color: var(--gnome-accent-fg-color);\n  border-color: transparent;\n}\n\n.suggested:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.suggested:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Destructive — red for dangerous / irreversible actions */\n.destructive {\n  background-color: var(--gnome-destructive-bg-color);\n  color: var(--gnome-destructive-fg-color);\n  border-color: transparent;\n}\n\n.destructive:hover:not(:disabled) {\n  filter: brightness(1.08);\n}\n\n.destructive:active:not(:disabled) {\n  filter: brightness(0.92);\n}\n\n/* Flat — no border, no background. Used inside header bars */\n.flat {\n  background-color: transparent;\n  border-color: transparent;\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n}\n\n.flat:hover:not(:disabled) {\n  background-color: var(--gnome-hover-overlay);\n}\n\n.flat:active:not(:disabled) {\n  background-color: var(--gnome-active-overlay);\n}\n\n/* Raised — explicit raised look inside flat/toolbar contexts */\n.raised {\n  background-color: var(--gnome-card-bg-color, #ffffff);\n  color: var(--gnome-window-fg-color, rgba(0, 0, 0, 0.8));\n  border-color: var(--gnome-light-3, #deddda);\n  box-shadow: var(--gnome-shadow-sm);\n}\n\n.raised:hover:not(:disabled) {\n  background-color: var(--gnome-light-2, #f6f5f4);\n}\n\n.raised:active:not(:disabled) {\n  background-color: var(--gnome-light-3, #deddda);\n  box-shadow: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .raised {\n    background-color: var(--gnome-card-bg-color, #383838);\n    border-color: rgba(255, 255, 255, 0.12);\n    box-shadow: var(--gnome-shadow-sm);\n  }\n\n  .raised:hover:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  .raised:active:not(:disabled) {\n    background-color: rgba(255, 255, 255, 0.14);\n    box-shadow: none;\n  }\n}\n\n/* OSD — dark semi-transparent overlay style for media/image contexts */\n.osd {\n  background-color: rgba(0, 0, 0, 0.65);\n  color: rgba(255, 255, 255, 0.95);\n  border-color: rgba(255, 255, 255, 0.12);\n  box-shadow: none;\n  backdrop-filter: blur(4px);\n  -webkit-backdrop-filter: blur(4px);\n}\n\n.osd:hover:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.75);\n  filter: none;\n}\n\n.osd:active:not(:disabled) {\n  background-color: rgba(0, 0, 0, 0.85);\n  filter: none;\n}\n\n@media (prefers-color-scheme: dark) {\n  .osd {\n    background-color: rgba(0, 0, 0, 0.65);\n    border-color: rgba(255, 255, 255, 0.1);\n  }\n}\n\n/* ─── High contrast ───────────────────────────────────────────── */\n\n@media (prefers-contrast: more) {\n  .default {\n    border-width: 2px;\n    box-shadow: none;\n  }\n\n  .button:focus-visible {\n    box-shadow:\n      0 0 0 var(--gnome-focus-ring-offset) var(--gnome-window-bg-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width))\n      var(--gnome-focus-ring-color),\n      0 0 0 calc(var(--gnome-focus-ring-offset) + var(--gnome-focus-ring-width) + 1px)\n      var(--gnome-window-bg-color);\n  }\n}\n\n/* ─── Sizes ───────────────────────────────────────────────────── */\n\n.sm {\n  font-size: var(--gnome-font-size-caption);\n  min-height: 28px;\n  padding: 4px var(--gnome-space-1);\n  min-width: 4rem;\n}\n\n.sm.circular {\n  min-width: 28px;\n  min-height: 28px;\n  width: 28px;\n  height: 28px;\n  padding: 4px;\n}\n\n.lg {\n  font-size: var(--gnome-font-size-title-4);\n  min-height: 42px;\n  padding: var(--gnome-space-1) var(--gnome-space-3);\n}\n\n.lg.circular {\n  min-width: 42px;\n  min-height: 42px;\n  width: 42px;\n  height: 42px;\n  padding: var(--gnome-space-1);\n}\n"],"mappings":""}

package/dist/components/Button/Button.module.css.js

@@ -1,15 +1,15 @@
 var e = {
-	button: "_button_mln0u_1",
-	pill: "_pill_mln0u_52",
-	circular: "_circular_mln0u_59",
-	default: "_default_mln0u_71",
-	suggested: "_suggested_mln0u_105",
-	destructive: "_destructive_mln0u_120",
-	flat: "_flat_mln0u_135",
-	raised: "_raised_mln0u_150",
-	osd: "_osd_mln0u_184",
-	sm: "_sm_mln0u_228",
-	lg: "_lg_mln0u_243"
+	button: "_button_plhd2_1",
+	pill: "_pill_plhd2_53",
+	circular: "_circular_plhd2_60",
+	default: "_default_plhd2_72",
+	suggested: "_suggested_plhd2_106",
+	destructive: "_destructive_plhd2_121",
+	flat: "_flat_plhd2_136",
+	raised: "_raised_plhd2_151",
+	osd: "_osd_plhd2_185",
+	sm: "_sm_plhd2_231",
+	lg: "_lg_plhd2_246"
 };
 //#endregion
 export { e as default };