eidos-ui 3.8.1 → 4.1.0

package/dist/{chunk-RHWZX7PB.js → chunk-NONYIHXD.js}

@@ -1,16 +1,16 @@
 import {
   Popover
-} from "./chunk-ZJWQPZ7E.js";
+} from "./chunk-OQWG7NLI.js";
 import {
   Avatar
 } from "./chunk-XJBWFDDE.js";
 import {
   Button
-} from "./chunk-JY77VJAZ.js";
+} from "./chunk-GHUEVNNU.js";
 import {
   devWarn,
   renderIcon
-} from "./chunk-U34INRFO.js";
+} from "./chunk-PP6HS4GR.js";
 
 // src/components/Header/Header.component.tsx
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
@@ -144,4 +144,4 @@ export {
   Header,
   IdentityHeader
 };
-//# sourceMappingURL=chunk-RHWZX7PB.js.map
+//# sourceMappingURL=chunk-NONYIHXD.js.map

package/dist/{chunk-XPG56DLQ.cjs → chunk-NSA7ASZ7.cjs}

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
 
-var _chunkUTYY35QXcjs = require('./chunk-UTYY35QX.cjs');
+var _chunkRZMQCVAScjs = require('./chunk-RZMQCVAS.cjs');
 
 
 
-var _chunkENMDOQQOcjs = require('./chunk-ENMDOQQO.cjs');
+var _chunkR5WI5IGRcjs = require('./chunk-R5WI5IGR.cjs');
 
 
 var _chunkKXDGW6LJcjs = require('./chunk-KXDGW6LJ.cjs');
@@ -42,7 +42,7 @@ var Button = ({
   const suppliedLabel = _nullishCoalesce(buttonProps["aria-label"], () => ( buttonProps["aria-labelledby"]));
   const iconOnlyLabel = isIconOnly && !suppliedLabel ? tooltip : void 0;
   if (isIconOnly && !suppliedLabel && !tooltip) {
-    _chunkENMDOQQOcjs.devWarn.call(void 0, 
+    _chunkR5WI5IGRcjs.devWarn.call(void 0, 
       "button-icon-only-name",
       'Button: an icon-only button needs an accessible name. Pass `tooltip` (which now also names it) or `aria-label`, otherwise it is announced as just "button".'
     );
@@ -64,9 +64,9 @@ var Button = ({
     ] }),
     isIconOnly && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-button--loading-spinner", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _lucidereact.LoaderCircle, { className: "eidos-button--spinner-icon" }) })
   ] }) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    preIcon && _chunkENMDOQQOcjs.renderIcon.call(void 0, preIcon, "eidos-button--pre-icon"),
-    isIconOnly && icon ? _chunkENMDOQQOcjs.renderIcon.call(void 0, icon, "eidos-button--icon") : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-button--copy", children }),
-    posIcon && _chunkENMDOQQOcjs.renderIcon.call(void 0, posIcon, "eidos-button--pos-icon")
+    preIcon && _chunkR5WI5IGRcjs.renderIcon.call(void 0, preIcon, "eidos-button--pre-icon"),
+    isIconOnly && icon ? _chunkR5WI5IGRcjs.renderIcon.call(void 0, icon, "eidos-button--icon") : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "eidos-button--copy", children }),
+    posIcon && _chunkR5WI5IGRcjs.renderIcon.call(void 0, posIcon, "eidos-button--pos-icon")
   ] }) });
   const buttonContent = typeof buttonProps.href === "string" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
     _chunkKXDGW6LJcjs.EidosLink,
@@ -90,7 +90,7 @@ var Button = ({
       children: content
     }
   );
-  return tooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkUTYY35QXcjs.Tooltip, { message: tooltip, children: buttonContent }) : buttonContent;
+  return tooltip ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkRZMQCVAScjs.Tooltip, { message: tooltip, children: buttonContent }) : buttonContent;
 };
 var IconButton = (props) => {
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Button, { ...props });
@@ -100,4 +100,4 @@ var IconButton = (props) => {
 
 
 exports.Button = Button; exports.IconButton = IconButton;
-//# sourceMappingURL=chunk-XPG56DLQ.cjs.map
+//# sourceMappingURL=chunk-NSA7ASZ7.cjs.map

package/dist/{chunk-XPG56DLQ.cjs.map → chunk-NSA7ASZ7.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-XPG56DLQ.cjs","../src/components/Button/Button.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACVA,2CAA6B;AA6EjB,+CAAA;AAvEL,IAAM,OAAA,EAAgC,CAAC;AAAA,EAC5C,QAAA,EAAU,QAAA;AAAA,EACV,MAAA,EAAQ,SAAA;AAAA,EACR,KAAA,EAAO,IAAA;AAAA,EACP,SAAA,EAAW,KAAA;AAAA,EACX,QAAA,EAAU,KAAA;AAAA,EACV,YAAA,EAAc,YAAA;AAAA,EACd,OAAA;AAAA,EACA,UAAA,EAAY,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAA,GAAM;AACJ,EAAA,MAAM,WAAA,EAAa,CAAC,CAAC,IAAA;AAErB,EAAA,GAAA,CAAI,UAAA,EAAY;AACd,IAAA,GAAA,CAAI,QAAA,EAAU;AACZ,MAAA,MAAM,IAAI,KAAA,CAAM,wCAAwC,CAAA;AAAA,IAC1D;AACA,IAAA,GAAA,CAAI,OAAA,EAAS;AACX,MAAA,MAAM,IAAI,KAAA,CAAM,uCAAuC,CAAA;AAAA,IACzD;AACA,IAAA,GAAA,CAAI,OAAA,EAAS;AACX,MAAA,MAAM,IAAI,KAAA,CAAM,uCAAuC,CAAA;AAAA,IACzD;AAAA,EACF;AAgBA,EAAA,MAAM,cAAA,mBAAgB,WAAA,CAAY,YAAY,CAAA,UAAK,WAAA,CAAY,iBAAiB,GAAA;AAChF,EAAA,MAAM,cAAA,EAAgB,WAAA,GAAc,CAAC,cAAA,EAAgB,QAAA,EAAU,KAAA,CAAA;AAE/D,EAAA,GAAA,CAAI,WAAA,GAAc,CAAC,cAAA,GAAiB,CAAC,OAAA,EAAS;AAC5C,IAAA,uCAAA;AAAA,MACE,uBAAA;AAAA,MACA;AAAA,IACF,CAAA;AAAA,EACF;AAEA,EAAA,MAAM,cAAA,EAAgB;AAAA,IACpB,cAAA;AAAA,IACA,CAAA,cAAA,EAAiB,OAAO,CAAA,CAAA;AACF,IAAA;AACD,IAAA;AACP,IAAA;AACF,IAAA;AACD,IAAA;AACX,IAAA;AAGS,EAAA;AAGT,EAAA;AAIQ,IAAA;AACG,sBAAA;AAGA,sBAAA;AACH,IAAA;AAGA,IAAA;AAMJ,EAAA;AACyB,IAAA;AAGrB,IAAA;AAKqB,IAAA;AAG7B,EAAA;AAQA,EAAA;AACG,IAAA;AAAA,IAAA;AACM,MAAA;AACa,MAAA;AACN,MAAA;AACD,MAAA;AACA,MAAA;AACW,MAAA;AAErB,MAAA;AAAA,IAAA;AAGH,EAAA;AAAC,IAAA;AAAA,IAAA;AACM,MAAA;AACA,MAAA;AACO,MAAA;AACD,MAAA;AACW,MAAA;AAErB,MAAA;AAAA,IAAA;AACH,EAAA;AAGa,EAAA;AACnB;AAasF;AAC5E,EAAA;AACV;ADtD6B;AACA;AACA;AACA;AACA","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-XPG56DLQ.cjs","sourcesContent":[null,"import React from 'react';\nimport { LoaderCircle } from 'lucide-react';\nimport { Tooltip } from '../Tooltip';\nimport { ButtonProps, IconButtonProps, IconLinkButtonProps } from './Button.types';\nimport { renderIcon, devWarn } from '../../utils';\nimport { EidosLink } from '../LinkProvider/Link.component';\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = 'filled',\n  color = 'primary',\n  size = 'md',\n  disabled = false,\n  loading = false,\n  loadingText = 'Loading...',\n  tooltip,\n  className = '',\n  preIcon,\n  posIcon,\n  icon,\n  children,\n  ...buttonProps\n}) => {\n  const isIconOnly = !!icon;\n\n  if (isIconOnly) {\n    if (children) {\n      throw new Error('Icon-only buttons cannot have children');\n    }\n    if (preIcon) {\n      throw new Error('Icon-only buttons cannot have preIcon');\n    }\n    if (posIcon) {\n      throw new Error('Icon-only buttons cannot have posIcon');\n    }\n  }\n\n  // ── Accessible name for icon-only buttons ──────────────────────────────\n  //\n  // An icon-only button has no text, so without `aria-label` it is announced\n  // as just \"button\". `tooltip` alone did NOT fix this: `Tooltip` renders a\n  // floating panel and adds no naming attributes to its child, so the\n  // library's own documented example - `<IconButton icon={Plus}\n  // tooltip=\"Add item\" />` - shipped a nameless control.\n  //\n  // Falling back to `tooltip` makes that documented pattern correct without\n  // asking anyone to change their code: if you already described the button\n  // for sighted users, that description now names it for everyone.\n  //\n  // Only ever a fallback - an explicit `aria-label` or `aria-labelledby`\n  // always wins, since the caller may want a longer name than the tooltip.\n  const suppliedLabel = buttonProps['aria-label'] ?? buttonProps['aria-labelledby'];\n  const iconOnlyLabel = isIconOnly && !suppliedLabel ? tooltip : undefined;\n\n  if (isIconOnly && !suppliedLabel && !tooltip) {\n    devWarn(\n      'button-icon-only-name',\n      'Button: an icon-only button needs an accessible name. Pass `tooltip` (which now also names it) or `aria-label`, otherwise it is announced as just \"button\".',\n    );\n  }\n\n  const buttonClasses = [\n    'eidos-button',\n    `eidos-button--${variant}`,\n    `eidos-button--${color}`,\n    `eidos-button--${size}`,\n    isIconOnly && 'eidos-button--icon-only',\n    disabled && 'eidos-button--disabled',\n    loading && 'eidos-button--loading',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const content = (\n    <>\n      {loading ? (\n        <>\n          {!isIconOnly && (\n            <>\n              <span className=\"eidos-button--loading-spinner\">\n                <LoaderCircle className=\"eidos-button--spinner-icon\" />\n              </span>\n              <span className=\"eidos-button--copy\">{loadingText}</span>\n            </>\n          )}\n          {isIconOnly && (\n            <span className=\"eidos-button--loading-spinner\">\n              <LoaderCircle className=\"eidos-button--spinner-icon\" />\n            </span>\n          )}\n        </>\n      ) : (\n        <>\n          {preIcon && renderIcon(preIcon, 'eidos-button--pre-icon')}\n\n          {isIconOnly && icon ? (\n            renderIcon(icon, 'eidos-button--icon')\n          ) : (\n            <span className=\"eidos-button--copy\">{children}</span>\n          )}\n\n          {posIcon && renderIcon(posIcon, 'eidos-button--pos-icon')}\n        </>\n      )}\n    </>\n  );\n\n  // Discriminated on `href` alone. The props arrive as one of four union\n  // members, but destructuring the style/content props above collapses the\n  // rest into a shape TypeScript can no longer narrow, hence the casts - each\n  // is exactly the half of the union the `href` check just proved.\n  const buttonContent =\n    typeof buttonProps.href === 'string' ? (\n      <EidosLink\n        {...(buttonProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n        href={buttonProps.href}\n        aria-label={iconOnlyLabel ?? buttonProps['aria-label']}\n        aria-busy={loading || undefined}\n        className={buttonClasses}\n        disabled={disabled || loading}\n      >\n        {content}\n      </EidosLink>\n    ) : (\n      <button\n        type=\"button\"\n        {...(buttonProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n        aria-label={iconOnlyLabel ?? buttonProps['aria-label']}\n        className={buttonClasses}\n        disabled={disabled || loading}\n      >\n        {content}\n      </button>\n    );\n\n  return tooltip ? <Tooltip message={tooltip}>{buttonContent}</Tooltip> : buttonContent;\n};\n\n/**\n * IconButton - Convenience wrapper for icon-only buttons\n *\n * @example\n * ```tsx\n * import { IconButton } from 'eidos-ui';\n * import { Plus } from 'lucide-react';\n *\n * <IconButton icon={Plus} tooltip=\"Add item\" />\n * ```\n */\nexport const IconButton: React.FC<IconButtonProps | IconLinkButtonProps> = (props) => {\n  return <Button {...props} />;\n};\n"]}
+{"version":3,"sources":["/home/runner/work/eidos-ui/eidos-ui/dist/chunk-NSA7ASZ7.cjs","../src/components/Button/Button.component.tsx"],"names":[],"mappings":"AAAA;AACE;AACF,wDAA6B;AAC7B;AACE;AACA;AACF,wDAA6B;AAC7B;AACE;AACF,wDAA6B;AAC7B;AACA;ACVA,2CAA6B;AA6EjB,+CAAA;AAvEL,IAAM,OAAA,EAAgC,CAAC;AAAA,EAC5C,QAAA,EAAU,QAAA;AAAA,EACV,MAAA,EAAQ,SAAA;AAAA,EACR,KAAA,EAAO,IAAA;AAAA,EACP,SAAA,EAAW,KAAA;AAAA,EACX,QAAA,EAAU,KAAA;AAAA,EACV,YAAA,EAAc,YAAA;AAAA,EACd,OAAA;AAAA,EACA,UAAA,EAAY,EAAA;AAAA,EACZ,OAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAA,GAAM;AACJ,EAAA,MAAM,WAAA,EAAa,CAAC,CAAC,IAAA;AAErB,EAAA,GAAA,CAAI,UAAA,EAAY;AACd,IAAA,GAAA,CAAI,QAAA,EAAU;AACZ,MAAA,MAAM,IAAI,KAAA,CAAM,wCAAwC,CAAA;AAAA,IAC1D;AACA,IAAA,GAAA,CAAI,OAAA,EAAS;AACX,MAAA,MAAM,IAAI,KAAA,CAAM,uCAAuC,CAAA;AAAA,IACzD;AACA,IAAA,GAAA,CAAI,OAAA,EAAS;AACX,MAAA,MAAM,IAAI,KAAA,CAAM,uCAAuC,CAAA;AAAA,IACzD;AAAA,EACF;AAgBA,EAAA,MAAM,cAAA,mBAAgB,WAAA,CAAY,YAAY,CAAA,UAAK,WAAA,CAAY,iBAAiB,GAAA;AAChF,EAAA,MAAM,cAAA,EAAgB,WAAA,GAAc,CAAC,cAAA,EAAgB,QAAA,EAAU,KAAA,CAAA;AAE/D,EAAA,GAAA,CAAI,WAAA,GAAc,CAAC,cAAA,GAAiB,CAAC,OAAA,EAAS;AAC5C,IAAA,uCAAA;AAAA,MACE,uBAAA;AAAA,MACA;AAAA,IACF,CAAA;AAAA,EACF;AAEA,EAAA,MAAM,cAAA,EAAgB;AAAA,IACpB,cAAA;AAAA,IACA,CAAA,cAAA,EAAiB,OAAO,CAAA,CAAA;AACF,IAAA;AACD,IAAA;AACP,IAAA;AACF,IAAA;AACD,IAAA;AACX,IAAA;AAGS,EAAA;AAGT,EAAA;AAIQ,IAAA;AACG,sBAAA;AAGA,sBAAA;AACH,IAAA;AAGA,IAAA;AAMJ,EAAA;AACyB,IAAA;AAGrB,IAAA;AAKqB,IAAA;AAG7B,EAAA;AAQA,EAAA;AACG,IAAA;AAAA,IAAA;AACM,MAAA;AACa,MAAA;AACN,MAAA;AACD,MAAA;AACA,MAAA;AACW,MAAA;AAErB,MAAA;AAAA,IAAA;AAGH,EAAA;AAAC,IAAA;AAAA,IAAA;AACM,MAAA;AACA,MAAA;AACO,MAAA;AACD,MAAA;AACW,MAAA;AAErB,MAAA;AAAA,IAAA;AACH,EAAA;AAGa,EAAA;AACnB;AAasF;AAC5E,EAAA;AACV;ADtD6B;AACA;AACA;AACA;AACA","file":"/home/runner/work/eidos-ui/eidos-ui/dist/chunk-NSA7ASZ7.cjs","sourcesContent":[null,"import React from 'react';\nimport { LoaderCircle } from 'lucide-react';\nimport { Tooltip } from '../Tooltip';\nimport { ButtonProps, IconButtonProps, IconLinkButtonProps } from './Button.types';\nimport { renderIcon, devWarn } from '../../utils';\nimport { EidosLink } from '../LinkProvider/Link.component';\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = 'filled',\n  color = 'primary',\n  size = 'md',\n  disabled = false,\n  loading = false,\n  loadingText = 'Loading...',\n  tooltip,\n  className = '',\n  preIcon,\n  posIcon,\n  icon,\n  children,\n  ...buttonProps\n}) => {\n  const isIconOnly = !!icon;\n\n  if (isIconOnly) {\n    if (children) {\n      throw new Error('Icon-only buttons cannot have children');\n    }\n    if (preIcon) {\n      throw new Error('Icon-only buttons cannot have preIcon');\n    }\n    if (posIcon) {\n      throw new Error('Icon-only buttons cannot have posIcon');\n    }\n  }\n\n  // ── Accessible name for icon-only buttons ──────────────────────────────\n  //\n  // An icon-only button has no text, so without `aria-label` it is announced\n  // as just \"button\". `tooltip` alone did NOT fix this: `Tooltip` renders a\n  // floating panel and adds no naming attributes to its child, so the\n  // library's own documented example - `<IconButton icon={Plus}\n  // tooltip=\"Add item\" />` - shipped a nameless control.\n  //\n  // Falling back to `tooltip` makes that documented pattern correct without\n  // asking anyone to change their code: if you already described the button\n  // for sighted users, that description now names it for everyone.\n  //\n  // Only ever a fallback - an explicit `aria-label` or `aria-labelledby`\n  // always wins, since the caller may want a longer name than the tooltip.\n  const suppliedLabel = buttonProps['aria-label'] ?? buttonProps['aria-labelledby'];\n  const iconOnlyLabel = isIconOnly && !suppliedLabel ? tooltip : undefined;\n\n  if (isIconOnly && !suppliedLabel && !tooltip) {\n    devWarn(\n      'button-icon-only-name',\n      'Button: an icon-only button needs an accessible name. Pass `tooltip` (which now also names it) or `aria-label`, otherwise it is announced as just \"button\".',\n    );\n  }\n\n  const buttonClasses = [\n    'eidos-button',\n    `eidos-button--${variant}`,\n    `eidos-button--${color}`,\n    `eidos-button--${size}`,\n    isIconOnly && 'eidos-button--icon-only',\n    disabled && 'eidos-button--disabled',\n    loading && 'eidos-button--loading',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const content = (\n    <>\n      {loading ? (\n        <>\n          {!isIconOnly && (\n            <>\n              <span className=\"eidos-button--loading-spinner\">\n                <LoaderCircle className=\"eidos-button--spinner-icon\" />\n              </span>\n              <span className=\"eidos-button--copy\">{loadingText}</span>\n            </>\n          )}\n          {isIconOnly && (\n            <span className=\"eidos-button--loading-spinner\">\n              <LoaderCircle className=\"eidos-button--spinner-icon\" />\n            </span>\n          )}\n        </>\n      ) : (\n        <>\n          {preIcon && renderIcon(preIcon, 'eidos-button--pre-icon')}\n\n          {isIconOnly && icon ? (\n            renderIcon(icon, 'eidos-button--icon')\n          ) : (\n            <span className=\"eidos-button--copy\">{children}</span>\n          )}\n\n          {posIcon && renderIcon(posIcon, 'eidos-button--pos-icon')}\n        </>\n      )}\n    </>\n  );\n\n  // Discriminated on `href` alone. The props arrive as one of four union\n  // members, but destructuring the style/content props above collapses the\n  // rest into a shape TypeScript can no longer narrow, hence the casts - each\n  // is exactly the half of the union the `href` check just proved.\n  const buttonContent =\n    typeof buttonProps.href === 'string' ? (\n      <EidosLink\n        {...(buttonProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n        href={buttonProps.href}\n        aria-label={iconOnlyLabel ?? buttonProps['aria-label']}\n        aria-busy={loading || undefined}\n        className={buttonClasses}\n        disabled={disabled || loading}\n      >\n        {content}\n      </EidosLink>\n    ) : (\n      <button\n        type=\"button\"\n        {...(buttonProps as React.ButtonHTMLAttributes<HTMLButtonElement>)}\n        aria-label={iconOnlyLabel ?? buttonProps['aria-label']}\n        className={buttonClasses}\n        disabled={disabled || loading}\n      >\n        {content}\n      </button>\n    );\n\n  return tooltip ? <Tooltip message={tooltip}>{buttonContent}</Tooltip> : buttonContent;\n};\n\n/**\n * IconButton - Convenience wrapper for icon-only buttons\n *\n * @example\n * ```tsx\n * import { IconButton } from 'eidos-ui';\n * import { Plus } from 'lucide-react';\n *\n * <IconButton icon={Plus} tooltip=\"Add item\" />\n * ```\n */\nexport const IconButton: React.FC<IconButtonProps | IconLinkButtonProps> = (props) => {\n  return <Button {...props} />;\n};\n"]}

package/dist/{chunk-6NAOAKII.js → chunk-NWFGXLQP.js}

@@ -1,6 +1,6 @@
 import {
   Input
-} from "./chunk-XIUZT4TO.js";
+} from "./chunk-GE3QCXT7.js";
 
 // src/components/InlineEdit/InlineEdit.component.tsx
 import { useState, useRef, useCallback } from "react";
@@ -122,4 +122,4 @@ var InlineEdit = ({
 export {
   InlineEdit
 };
-//# sourceMappingURL=chunk-6NAOAKII.js.map
+//# sourceMappingURL=chunk-NWFGXLQP.js.map

package/dist/{chunk-H46ZLPNJ.cjs → chunk-O45W57Y4.cjs}

@@ -1,8 +1,16 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkENMDOQQOcjs = require('./chunk-ENMDOQQO.cjs');
+var _chunkR5WI5IGRcjs = require('./chunk-R5WI5IGR.cjs');
 
 // src/components/ThemeProvider/ThemeProvider.component.tsx
+
+
+
+
+
+
+
+
 var _react = require('react');
 
 // src/components/ThemeProvider/ThemeProvider.context.tsx
@@ -176,6 +184,52 @@ var isRampViable = (base) => {
   const { l } = hexToOklch(base);
   return l < 0.95 && l > 0.12;
 };
+var DARK_SURFACE = "#0f172a";
+var DARK_SURFACE_RAISED = "#1e293b";
+var DARK_BASE_MIN_CONTRAST = 5;
+var deriveDarkBase = (base) => {
+  const reaches = (hex) => contrastRatio(hex, DARK_SURFACE) >= DARK_BASE_MIN_CONTRAST && contrastRatio(hex, DARK_SURFACE_RAISED) >= DARK_BASE_MIN_CONTRAST;
+  if (reaches(base)) return base;
+  const start = hexToOklch(base);
+  for (let l = start.l; l <= 1; l += 5e-3) {
+    const candidate = oklchToHex({ ...start, l });
+    if (reaches(candidate)) return candidate;
+  }
+  return "#ffffff";
+};
+var DARK_HOVER_DELTA = 0.07;
+var DARK_LIGHT_DELTA = 0.35;
+var deriveDarkHover = (darkBase) => {
+  const { l, c, h } = hexToOklch(darkBase);
+  return oklchToHex({ l: Math.min(LIGHT_CEILING, l + DARK_HOVER_DELTA), c, h });
+};
+var deriveDarkLight = (darkBase) => {
+  const { l, c, h } = hexToOklch(darkBase);
+  return oklchToHex({ l: Math.max(0.2, l - DARK_LIGHT_DELTA), c, h });
+};
+var DARK_RAMP_CURVE = {
+  50: { l: 0.235, chroma: 0.35 },
+  100: { l: 0.27, chroma: 0.45 },
+  200: { l: 0.33, chroma: 0.6 },
+  300: { l: 0.42, chroma: 0.8 },
+  400: { l: 0.55, chroma: 0.95 },
+  600: { l: 0.76, chroma: 0.8 },
+  700: { l: 0.83, chroma: 0.6 },
+  800: { l: 0.89, chroma: 0.4 },
+  900: { l: 0.945, chroma: 0.2 }
+};
+var buildDarkRamp = (darkBase) => {
+  const { c, h } = hexToOklch(darkBase);
+  const out = {};
+  for (const step of RAMP_STEPS) {
+    out[step] = step === BASE_STEP ? darkBase : oklchToHex({
+      l: DARK_RAMP_CURVE[step].l,
+      c: c * DARK_RAMP_CURVE[step].chroma,
+      h
+    });
+  }
+  return out;
+};
 
 // src/components/ThemeProvider/ThemeProvider.tokens.ts
 var THEME_COLOR_KEYS = [
@@ -220,7 +274,10 @@ var defaultTheme = {
     fontFamily: "'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif",
     monoFamily: "'JetBrains Mono', 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Source Code Pro', monospace",
     fontScale: 1
-  }
+  },
+  // Empty on purpose: the preset's dark colours are *derived* from `colors`
+  // (see `_color-schemes.scss`), exactly as a consumer's are.
+  dark: {}
 };
 var DEFAULT_PRIMARY_RAMP = {
   50: "#eef2ff",
@@ -237,39 +294,52 @@ var DEFAULT_PRIMARY_RAMP = {
 var FONT_SCALE_MIN = 0.875;
 var FONT_SCALE_MAX = 1.25;
 var normalizeColor = (value) => typeof value === "string" ? { base: value } : value;
+var resolveColor = (supplied, path) => {
+  if (supplied === void 0) return void 0;
+  const { base, contrast } = normalizeColor(supplied);
+  if (!isValidHex(base)) {
+    _chunkR5WI5IGRcjs.devWarn.call(void 0, 
+      `theme-color-${path}`,
+      `ThemeProvider: ${path} is not a valid hex colour (received ${JSON.stringify(base)}). Falling back to the preset.`
+    );
+    return void 0;
+  }
+  if (contrast !== void 0 && !isValidHex(contrast)) {
+    _chunkR5WI5IGRcjs.devWarn.call(void 0, 
+      `theme-contrast-${path}`,
+      `ThemeProvider: ${path}.contrast is not a valid hex colour (received ${JSON.stringify(contrast)}). It will be computed instead.`
+    );
+    return { base };
+  }
+  return contrast === void 0 ? { base } : { base, contrast };
+};
 var resolveTheme = (theme) => {
   const colors = {};
+  const darkColors = {};
   for (const key of THEME_COLOR_KEYS) {
-    const supplied = _optionalChain([theme, 'access', _ => _.colors, 'optionalAccess', _2 => _2[key]]);
-    const fallback = normalizeColor(defaultTheme.colors[key]);
-    if (supplied === void 0) {
-      colors[key] = fallback;
-      continue;
-    }
-    const { base, contrast } = normalizeColor(supplied);
-    if (!isValidHex(base)) {
-      _chunkENMDOQQOcjs.devWarn.call(void 0, 
-        `theme-color-${key}`,
-        `ThemeProvider: colors.${key} is not a valid hex colour (received ${JSON.stringify(base)}). Falling back to the preset.`
-      );
-      colors[key] = fallback;
-      continue;
-    }
-    if (contrast !== void 0 && !isValidHex(contrast)) {
-      _chunkENMDOQQOcjs.devWarn.call(void 0, 
-        `theme-contrast-${key}`,
-        `ThemeProvider: colors.${key}.contrast is not a valid hex colour (received ${JSON.stringify(contrast)}). It will be computed instead.`
+    colors[key] = _nullishCoalesce(resolveColor(_optionalChain([theme, 'access', _ => _.colors, 'optionalAccess', _2 => _2[key]]), `colors.${key}`), () => ( normalizeColor(defaultTheme.colors[key])));
+    const explicitDark = resolveColor(_optionalChain([theme, 'access', _3 => _3.dark, 'optionalAccess', _4 => _4.colors, 'optionalAccess', _5 => _5[key]]), `dark.colors.${key}`);
+    if (explicitDark) {
+      const worst = Math.min(
+        contrastRatio(explicitDark.base, DARK_SURFACE),
+        contrastRatio(explicitDark.base, DARK_SURFACE_RAISED)
       );
-      colors[key] = { base };
-      continue;
+      if (worst < 4.5) {
+        _chunkR5WI5IGRcjs.devWarn.call(void 0, 
+          `theme-dark-contrast-${key}`,
+          `ThemeProvider: dark.colors.${key} (${explicitDark.base}) is ${worst.toFixed(2)}:1 against the dark surfaces, below the 4.5:1 text needs. It is used as given, but text in it will fail WCAG AA in the dark scheme - omit it to have a compliant tone derived from colors.${key}.`
+        );
+      }
+      darkColors[key] = explicitDark;
+    } else {
+      darkColors[key] = { base: deriveDarkBase(colors[key].base) };
     }
-    colors[key] = contrast === void 0 ? { base } : { base, contrast };
   }
-  const scale = _optionalChain([theme, 'access', _3 => _3.typography, 'optionalAccess', _4 => _4.fontScale]);
+  const scale = _optionalChain([theme, 'access', _6 => _6.typography, 'optionalAccess', _7 => _7.fontScale]);
   let fontScale = defaultTheme.typography.fontScale;
   if (scale !== void 0) {
     if (!Number.isFinite(scale) || scale < FONT_SCALE_MIN || scale > FONT_SCALE_MAX) {
-      _chunkENMDOQQOcjs.devWarn.call(void 0, 
+      _chunkR5WI5IGRcjs.devWarn.call(void 0, 
         "theme-font-scale",
         `ThemeProvider: typography.fontScale must be between ${FONT_SCALE_MIN} and ${FONT_SCALE_MAX} (received ${String(scale)}). Falling back to ${fontScale}.`
       );
@@ -280,13 +350,15 @@ var resolveTheme = (theme) => {
   return {
     colors,
     typography: {
-      fontFamily: _optionalChain([theme, 'access', _5 => _5.typography, 'optionalAccess', _6 => _6.fontFamily]) || defaultTheme.typography.fontFamily,
-      monoFamily: _optionalChain([theme, 'access', _7 => _7.typography, 'optionalAccess', _8 => _8.monoFamily]) || defaultTheme.typography.monoFamily,
+      fontFamily: _optionalChain([theme, 'access', _8 => _8.typography, 'optionalAccess', _9 => _9.fontFamily]) || defaultTheme.typography.fontFamily,
+      monoFamily: _optionalChain([theme, 'access', _10 => _10.typography, 'optionalAccess', _11 => _11.monoFamily]) || defaultTheme.typography.monoFamily,
       fontScale
-    }
+    },
+    dark: { colors: darkColors }
   };
 };
-var buildTokens = (resolved) => {
+var buildTokens = (resolved, scheme = "light") => {
+  if (scheme === "dark") return buildDarkTokens(resolved);
   const tokens = {};
   for (const key of THEME_COLOR_KEYS) {
     const { base, contrast } = resolved.colors[key];
@@ -301,7 +373,7 @@ var buildTokens = (resolved) => {
       const isPreset = base === normalizeColor(defaultTheme.colors[key]).base;
       const ramp = isPreset ? DEFAULT_PRIMARY_RAMP : buildRamp(base);
       if (!isPreset && !isRampViable(base)) {
-        _chunkENMDOQQOcjs.devWarn.call(void 0, 
+        _chunkR5WI5IGRcjs.devWarn.call(void 0, 
           `theme-ramp-${key}`,
           `ThemeProvider: colors.${key} (${base}) is too light or too dark to generate a usable --${key}-50\u2026900 scale; several steps will be identical. Pick a colour with more headroom.`
         );
@@ -311,6 +383,11 @@ var buildTokens = (resolved) => {
       }
     }
   }
+  Object.assign(tokens, typographyTokens(resolved));
+  return tokens;
+};
+var typographyTokens = (resolved) => {
+  const tokens = {};
   const { fontFamily, monoFamily, fontScale } = resolved.typography;
   tokens["--font-family-primary"] = fontFamily;
   tokens["--font-family-mono"] = monoFamily;
@@ -319,35 +396,84 @@ var buildTokens = (resolved) => {
   }
   return tokens;
 };
-var DEFAULT_TOKENS = buildTokens(resolveTheme(defaultTheme));
-var diffFromDefault = (tokens) => {
+var buildDarkTokens = (resolved) => {
+  const tokens = {};
+  for (const key of THEME_COLOR_KEYS) {
+    const { base, contrast } = resolved.dark.colors[key];
+    tokens[`--${key}-color`] = base;
+    tokens[`--${key}-rgb`] = hexToRgbTriple(base);
+    tokens[`--${key}-dark`] = deriveDarkHover(base);
+    tokens[`--${key}-light`] = deriveDarkLight(base);
+    if (FILL_COLOR_KEYS.includes(key)) {
+      tokens[`--${key}-contrast`] = _nullishCoalesce(contrast, () => ( pickContrast(base)));
+    }
+    if (key === RAMP_COLOR_KEY) {
+      const ramp = buildDarkRamp(base);
+      for (const step of RAMP_STEPS) tokens[`--${key}-${step}`] = ramp[step];
+    }
+  }
+  Object.assign(tokens, typographyTokens(resolved));
+  return tokens;
+};
+var DEFAULT_TOKENS = {
+  light: buildTokens(resolveTheme(defaultTheme), "light"),
+  dark: buildTokens(resolveTheme(defaultTheme), "dark")
+};
+var diffFromDefault = (tokens, scheme = "light") => {
   const diff = {};
   for (const [name, value] of Object.entries(tokens)) {
-    if (DEFAULT_TOKENS[name] !== value) diff[name] = value;
+    if (DEFAULT_TOKENS[scheme][name] !== value) diff[name] = value;
   }
   return diff;
 };
+var block = (selector, tokens, indent = "") => `${indent}${selector} {
+` + Object.entries(tokens).map(([name, value]) => `${indent}  ${name}: ${value};`).join("\n") + `
+${indent}}`;
 var themeToCss = (resolved) => {
-  const tokens = buildTokens(resolved);
-  const body = Object.entries(tokens).map(([name, value]) => `  ${name}: ${value};`).join("\n");
-  return `:root {
-${body}
-}`;
+  const light = buildTokens(resolved, "light");
+  const dark = Object.fromEntries(
+    Object.entries(buildTokens(resolved, "dark")).filter(([name]) => !name.startsWith("--font-"))
+  );
+  return [
+    block(":root", light),
+    block(":root[data-color-scheme='dark']", dark),
+    `@media (prefers-color-scheme: dark) {
+${block(":root[data-color-scheme='system']", dark, "  ")}
+}`
+  ].join("\n\n");
 };
 
 // src/components/ThemeProvider/ThemeProvider.component.tsx
 var _jsxruntime = require('react/jsx-runtime');
+var SCHEME_ATTRIBUTE = "data-color-scheme";
+var isColorScheme = (value) => value === "light" || value === "dark" || value === "system";
+var readPageScheme = () => {
+  const value = document.documentElement.getAttribute(SCHEME_ATTRIBUTE);
+  return isColorScheme(value) ? value : "light";
+};
+var DARK_QUERY = "(prefers-color-scheme: dark)";
+var subscribeToPrefersDark = (onChange) => {
+  const query = _optionalChain([window, 'access', _12 => _12.matchMedia, 'optionalCall', _13 => _13(DARK_QUERY)]);
+  _optionalChain([query, 'optionalAccess', _14 => _14.addEventListener, 'call', _15 => _15("change", onChange)]);
+  return () => _optionalChain([query, 'optionalAccess', _16 => _16.removeEventListener, 'call', _17 => _17("change", onChange)]);
+};
+var getPrefersDark = () => _nullishCoalesce(_optionalChain([window, 'access', _18 => _18.matchMedia, 'optionalCall', _19 => _19(DARK_QUERY), 'access', _20 => _20.matches]), () => ( false));
+var getServerPrefersDark = () => false;
 var EMPTY_THEME = {};
 var mountedProviders = 0;
 var mergeTheme = (base, patch) => ({
   colors: { ...base.colors, ...patch.colors },
-  typography: { ...base.typography, ...patch.typography }
+  typography: { ...base.typography, ...patch.typography },
+  dark: { colors: { ..._optionalChain([base, 'access', _21 => _21.dark, 'optionalAccess', _22 => _22.colors]), ..._optionalChain([patch, 'access', _23 => _23.dark, 'optionalAccess', _24 => _24.colors]) } }
 });
 var ThemeProvider = ({
   children,
   theme: controlledTheme,
   defaultTheme: initialTheme,
-  onThemeChange
+  onThemeChange,
+  colorScheme: controlledScheme,
+  defaultColorScheme,
+  onColorSchemeChange
 }) => {
   const isControlled = controlledTheme !== void 0;
   const [uncontrolledTheme, setUncontrolledTheme] = _react.useState.call(void 0, 
@@ -357,7 +483,7 @@ var ThemeProvider = ({
   _react.useEffect.call(void 0, () => {
     mountedProviders += 1;
     if (mountedProviders > 1) {
-      _chunkENMDOQQOcjs.devWarn.call(void 0, 
+      _chunkR5WI5IGRcjs.devWarn.call(void 0, 
         "theme-multiple-providers",
         `ThemeProvider: ${mountedProviders} providers are mounted at once. They all write to document.documentElement, so the last one to apply each token wins for the whole page - nested or sibling providers cannot theme separate subtrees. Use a single provider at your app root.`
       );
@@ -366,8 +492,51 @@ var ThemeProvider = ({
       mountedProviders -= 1;
     };
   }, []);
+  const [uncontrolledScheme, setUncontrolledScheme] = _react.useState.call(void 0, 
+    defaultColorScheme
+  );
+  const managedScheme = _nullishCoalesce(controlledScheme, () => ( uncontrolledScheme));
+  const [pageScheme, setPageScheme] = _react.useState.call(void 0, "light");
+  _react.useLayoutEffect.call(void 0, () => {
+    if (managedScheme !== void 0) return;
+    setPageScheme(readPageScheme());
+    const observer = new MutationObserver(() => setPageScheme(readPageScheme()));
+    observer.observe(document.documentElement, { attributeFilter: [SCHEME_ATTRIBUTE] });
+    return () => observer.disconnect();
+  }, [managedScheme]);
+  _react.useLayoutEffect.call(void 0, () => {
+    if (managedScheme === void 0) return;
+    const root = document.documentElement;
+    const previous = root.getAttribute(SCHEME_ATTRIBUTE);
+    root.setAttribute(SCHEME_ATTRIBUTE, managedScheme);
+    return () => {
+      if (previous === null) root.removeAttribute(SCHEME_ATTRIBUTE);
+      else root.setAttribute(SCHEME_ATTRIBUTE, previous);
+    };
+  }, [managedScheme]);
+  const colorScheme = _nullishCoalesce(managedScheme, () => ( pageScheme));
+  const prefersDark = _react.useSyncExternalStore.call(void 0, 
+    subscribeToPrefersDark,
+    getPrefersDark,
+    getServerPrefersDark
+  );
+  const resolvedColorScheme = colorScheme === "system" ? prefersDark ? "dark" : "light" : colorScheme;
+  const setColorScheme = _react.useCallback.call(void 0, 
+    (next) => {
+      if (controlledScheme === void 0) setUncontrolledScheme(next);
+      _optionalChain([onColorSchemeChange, 'optionalCall', _25 => _25(next)]);
+    },
+    [controlledScheme, onColorSchemeChange]
+  );
   const resolvedTheme = _react.useMemo.call(void 0, () => resolveTheme(theme), [theme]);
-  const tokens = _react.useMemo.call(void 0, () => diffFromDefault(buildTokens(resolvedTheme)), [resolvedTheme]);
+  const tokens = _react.useMemo.call(void 0, 
+    () => diffFromDefault(buildTokens(resolvedTheme, resolvedColorScheme), resolvedColorScheme),
+    [resolvedTheme, resolvedColorScheme]
+  );
+  const isDefault = _react.useMemo.call(void 0, 
+    () => Object.keys(diffFromDefault(buildTokens(resolvedTheme, "light"), "light")).length === 0 && Object.keys(diffFromDefault(buildTokens(resolvedTheme, "dark"), "dark")).length === 0,
+    [resolvedTheme]
+  );
   const appliedRef = _react.useRef.call(void 0, []);
   _react.useLayoutEffect.call(void 0, () => {
     if (typeof document === "undefined") return;
@@ -389,7 +558,7 @@ var ThemeProvider = ({
   const commit = _react.useCallback.call(void 0, 
     (next) => {
       if (!isControlled) setUncontrolledTheme(next);
-      _optionalChain([onThemeChange, 'optionalCall', _9 => _9(next)]);
+      _optionalChain([onThemeChange, 'optionalCall', _26 => _26(next)]);
     },
     [isControlled, onThemeChange]
   );
@@ -407,10 +576,24 @@ var ThemeProvider = ({
       setTheme,
       updateTheme,
       resetTheme,
-      isDefault: Object.keys(tokens).length === 0,
-      toCss
+      isDefault,
+      toCss,
+      colorScheme,
+      resolvedColorScheme,
+      setColorScheme
     }),
-    [theme, resolvedTheme, setTheme, updateTheme, resetTheme, tokens, toCss]
+    [
+      theme,
+      resolvedTheme,
+      setTheme,
+      updateTheme,
+      resetTheme,
+      isDefault,
+      toCss,
+      colorScheme,
+      resolvedColorScheme,
+      setColorScheme
+    ]
   );
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ThemeContext.Provider, { value, children });
 };
@@ -520,5 +703,6 @@ var isFontStackAvailable = (stack) => isFontAvailable(_nullishCoalesce(stack.spl
 
 
 
-exports.useTheme = useTheme; exports.contrastRatio = contrastRatio; exports.CONTRAST_LIGHT = CONTRAST_LIGHT; exports.CONTRAST_DARK = CONTRAST_DARK; exports.pickContrast = pickContrast; exports.THEME_COLOR_KEYS = THEME_COLOR_KEYS; exports.defaultTheme = defaultTheme; exports.FONT_SCALE_MIN = FONT_SCALE_MIN; exports.FONT_SCALE_MAX = FONT_SCALE_MAX; exports.ThemeProvider = ThemeProvider; exports.familyNameFromFile = familyNameFromFile; exports.toFontStack = toFontStack; exports.FONT_ACCEPT = FONT_ACCEPT; exports.registerFontFace = registerFontFace; exports.registerFontFile = registerFontFile; exports.subscribeToFontLoads = subscribeToFontLoads; exports.isFontAvailable = isFontAvailable; exports.isFontStackAvailable = isFontStackAvailable;
-//# sourceMappingURL=chunk-H46ZLPNJ.cjs.map
+
+exports.useTheme = useTheme; exports.contrastRatio = contrastRatio; exports.CONTRAST_LIGHT = CONTRAST_LIGHT; exports.CONTRAST_DARK = CONTRAST_DARK; exports.pickContrast = pickContrast; exports.DARK_SURFACE = DARK_SURFACE; exports.THEME_COLOR_KEYS = THEME_COLOR_KEYS; exports.defaultTheme = defaultTheme; exports.FONT_SCALE_MIN = FONT_SCALE_MIN; exports.FONT_SCALE_MAX = FONT_SCALE_MAX; exports.ThemeProvider = ThemeProvider; exports.familyNameFromFile = familyNameFromFile; exports.toFontStack = toFontStack; exports.FONT_ACCEPT = FONT_ACCEPT; exports.registerFontFace = registerFontFace; exports.registerFontFile = registerFontFile; exports.subscribeToFontLoads = subscribeToFontLoads; exports.isFontAvailable = isFontAvailable; exports.isFontStackAvailable = isFontStackAvailable;
+//# sourceMappingURL=chunk-O45W57Y4.cjs.map