@cere/cere-design-system 0.1.0 → 0.2.0

package/README.md

@@ -122,6 +122,61 @@ import {
 <EmptyState title="No items" description="Create your first item" />
 ```
 
+## Migration notes
+
+### `ButtonProps` and `ChipProps` discriminated union
+
+`tone='onGradient'` and `variant` are now mutually exclusive. Passing both is a
+TypeScript error. Remove `variant` when using `tone='onGradient'`:
+
+```tsx
+// Before (now a type error):
+<Button tone="onGradient" variant="primary">...</Button>
+
+// After:
+<Button tone="onGradient">...</Button>
+```
+
+Runtime behavior is unchanged; this is a type-only tightening. Applies to both
+`<Button>` and `<Chip>`.
+
+## Design Tokens
+
+Design tokens are authored in W3C DTCG JSON under `tokens/` and generated into
+two artifacts via Style Dictionary v4:
+
+- `src/theme/tokens.css` — CSS custom properties (`:root`) consumed at runtime
+- `src/theme/tokens.generated.ts` — typed token values imported by `primitives.ts`, `semantic.ts`, and `webSurfaceTokens.ts`
+
+Generation runs automatically before `npm run build` via `npm run tokens:build`.
+To regenerate tokens manually:
+
+```bash
+npm run tokens:build
+```
+
+To use the generated CSS in your application, import it once at the app root:
+
+```ts
+import '@cere/cere-design-system/tokens.css';
+```
+
+## Fonts (opt-in)
+
+Fonts are **not** bundled into the main package entry. This is a consumer-facing
+change from earlier versions. Import only the fonts your app needs:
+
+```ts
+// Self-hosted Inter (variable font via @fontsource-variable/inter)
+import '@cere/cere-design-system/fonts/inter.css';
+
+// Self-hosted Human Sans (Cere brand display font)
+import '@cere/cere-design-system/fonts/human-sans.css';
+```
+
+Next.js apps should continue to load Inter via `next/font/google` and skip the
+`inter.css` subpath import to avoid duplicate font loading.
+
 ## Development
 
 ```bash
@@ -141,6 +196,27 @@ npm run type-check
 npm run lint
 ```
 
+## Contributing a changeset
+
+This project uses [Changesets](https://github.com/changesets/changesets) to manage
+versioning and publishing. When your PR contains a user-facing change, add a changeset:
+
+```bash
+npm run changeset
+```
+
+Follow the interactive prompts to select a bump type (`major` / `minor` / `patch`)
+and describe the change. This creates a `.changeset/<hash>.md` file — commit it
+alongside your code changes.
+
+When a "Version Packages" PR (auto-created by the release workflow) is merged to
+`master`, all pending changesets are applied: `package.json` version is bumped,
+`CHANGELOG.md` is updated, and the package is published to NPM.
+
+**Note for maintainers:** The release workflow (`.github/workflows/release.yaml`)
+requires the `NPM_TOKEN_PUBLISH` secret to be set in GitHub repo settings before
+it can publish. See the top-of-file comment in that workflow for details.
+
 ## Components
 
 ### Buttons (2)

package/dist/buttons.d.mts

@@ -2,40 +2,45 @@ import React__default from 'react';
 import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
 import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
 import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab';
-import { ButtonGroupProps as ButtonGroupProps$1 } from '@mui/material';
+import { ButtonGroupProps as ButtonGroupProps$1 } from '@mui/material/ButtonGroup';
 
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 type ButtonTone = 'default' | 'onGradient';
-interface ButtonProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
+/** Shared base: props valid for both tone shapes. */
+interface ButtonBaseProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
+    size?: 'small' | 'medium' | 'large';
+    startIcon?: React__default.ReactNode;
+    endIcon?: React__default.ReactNode;
+}
+/**
+ * Default tone: `variant` controls the visual style.
+ * @default tone 'default'
+ */
+interface ButtonDefaultProps extends ButtonBaseProps {
+    tone?: 'default';
     /**
-     * The visual style variant of the button
+     * The visual style variant of the button.
      * - primary: Filled button with primary color background
      * - secondary: Outlined button with transparent background and border
      * - tertiary: Text button with no background or border
      */
     variant?: ButtonVariant;
+}
+/**
+ * onGradient tone: white pill on a dark gradient surface (banner CTA).
+ * `variant` must be omitted — it is not applicable when tone is 'onGradient'.
+ */
+interface ButtonOnGradientProps extends ButtonBaseProps {
+    tone: 'onGradient';
     /**
-     * Tone overlay. When set, **replaces** the per-variant styling — `variant`
-     * is ignored. Today the only non-default tone is `onGradient`, which paints
-     * the button as a white pill on a dark gradient surface (banner CTA
-     * pattern). Use the default tone if you want `variant` to drive the look.
-     * @default 'default'
-     */
-    tone?: ButtonTone;
-    /**
-     * The size of the button
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Icon element to display before the button text
-     */
-    startIcon?: React__default.ReactNode;
-    /**
-     * Icon element to display after the button text
+     * Not applicable when tone='onGradient'. Omit this prop.
+     * @deprecated Passing variant with tone='onGradient' is a type error.
      */
-    endIcon?: React__default.ReactNode;
+    variant?: never;
 }
-declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+/** ButtonProps is a discriminated union on `tone`. */
+type ButtonProps = ButtonDefaultProps | ButtonOnGradientProps;
+declare const Button: React__default.ForwardRefExoticComponent<(Omit<ButtonDefaultProps, "ref"> | Omit<ButtonOnGradientProps, "ref">) & React__default.RefAttributes<HTMLButtonElement>>;
 
 interface IconButtonProps extends IconButtonProps$1 {
     variant?: 'default' | 'primary' | 'secondary';

package/dist/buttons.d.ts

@@ -2,40 +2,45 @@ import React__default from 'react';
 import { ButtonProps as ButtonProps$1 } from '@mui/material/Button';
 import { IconButtonProps as IconButtonProps$1 } from '@mui/material/IconButton';
 import { LoadingButtonProps as LoadingButtonProps$1 } from '@mui/lab';
-import { ButtonGroupProps as ButtonGroupProps$1 } from '@mui/material';
+import { ButtonGroupProps as ButtonGroupProps$1 } from '@mui/material/ButtonGroup';
 
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
 type ButtonTone = 'default' | 'onGradient';
-interface ButtonProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
+/** Shared base: props valid for both tone shapes. */
+interface ButtonBaseProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
+    size?: 'small' | 'medium' | 'large';
+    startIcon?: React__default.ReactNode;
+    endIcon?: React__default.ReactNode;
+}
+/**
+ * Default tone: `variant` controls the visual style.
+ * @default tone 'default'
+ */
+interface ButtonDefaultProps extends ButtonBaseProps {
+    tone?: 'default';
     /**
-     * The visual style variant of the button
+     * The visual style variant of the button.
      * - primary: Filled button with primary color background
      * - secondary: Outlined button with transparent background and border
      * - tertiary: Text button with no background or border
      */
     variant?: ButtonVariant;
+}
+/**
+ * onGradient tone: white pill on a dark gradient surface (banner CTA).
+ * `variant` must be omitted — it is not applicable when tone is 'onGradient'.
+ */
+interface ButtonOnGradientProps extends ButtonBaseProps {
+    tone: 'onGradient';
     /**
-     * Tone overlay. When set, **replaces** the per-variant styling — `variant`
-     * is ignored. Today the only non-default tone is `onGradient`, which paints
-     * the button as a white pill on a dark gradient surface (banner CTA
-     * pattern). Use the default tone if you want `variant` to drive the look.
-     * @default 'default'
-     */
-    tone?: ButtonTone;
-    /**
-     * The size of the button
-     */
-    size?: 'small' | 'medium' | 'large';
-    /**
-     * Icon element to display before the button text
-     */
-    startIcon?: React__default.ReactNode;
-    /**
-     * Icon element to display after the button text
+     * Not applicable when tone='onGradient'. Omit this prop.
+     * @deprecated Passing variant with tone='onGradient' is a type error.
      */
-    endIcon?: React__default.ReactNode;
+    variant?: never;
 }
-declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+/** ButtonProps is a discriminated union on `tone`. */
+type ButtonProps = ButtonDefaultProps | ButtonOnGradientProps;
+declare const Button: React__default.ForwardRefExoticComponent<(Omit<ButtonDefaultProps, "ref"> | Omit<ButtonOnGradientProps, "ref">) & React__default.RefAttributes<HTMLButtonElement>>;
 
 interface IconButtonProps extends IconButtonProps$1 {
     variant?: 'default' | 'primary' | 'secondary';

package/dist/buttons.js

@@ -1,19 +1,19 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkQYYQYZHVjs = require('./chunk-QYYQYZHV.js');
+var _chunk7KXKK2REjs = require('./chunk-7KXKK2RE.js');
 
 
 var _chunkOWWDNDF4js = require('./chunk-OWWDNDF4.js');
 
 
-var _chunkMNM6HE72js = require('./chunk-MNM6HE72.js');
-require('./chunk-FN5YL4BK.js');
-require('./chunk-ZGCN5WCG.js');
+var _chunkLVJSKRX3js = require('./chunk-LVJSKRX3.js');
+require('./chunk-72TQ56EP.js');
+require('./chunk-XZZZ4MZV.js');
 
 
 
 
 
-exports.Button = _chunkMNM6HE72js.Button; exports.ButtonGroup = _chunkQYYQYZHVjs.ButtonGroup; exports.IconButton = _chunkOWWDNDF4js.IconButton; exports.LoadingButton = _chunkQYYQYZHVjs.LoadingButton;
+exports.Button = _chunkLVJSKRX3js.Button; exports.ButtonGroup = _chunk7KXKK2REjs.ButtonGroup; exports.IconButton = _chunkOWWDNDF4js.IconButton; exports.LoadingButton = _chunk7KXKK2REjs.LoadingButton;
 //# sourceMappingURL=buttons.js.map

package/dist/buttons.mjs

@@ -1,15 +1,15 @@
 import {
   ButtonGroup,
   LoadingButton
-} from "./chunk-CWJ4OU6W.mjs";
+} from "./chunk-ZDAZYIXB.mjs";
 import {
   IconButton
 } from "./chunk-5ASG6G6U.mjs";
 import {
   Button
-} from "./chunk-FFZ5S7PQ.mjs";
-import "./chunk-ATIFLPH6.mjs";
-import "./chunk-PWF2NJDB.mjs";
+} from "./chunk-BOQPWZIB.mjs";
+import "./chunk-D7D25O6E.mjs";
+import "./chunk-WC2TCWXK.mjs";
 export {
   Button,
   ButtonGroup,

package/dist/charts.d.mts

@@ -13,28 +13,6 @@ type ChartWidgetProps = {
 };
 declare const ChartWidget: ({ title, value, history, formatValue, }: ChartWidgetProps) => react_jsx_runtime.JSX.Element;
 
-type MetricsHistoryRecord = {
-    storedBytes: number;
-    transferredBytes: number;
-    puts: number;
-    gets: number;
-    recordTime: Date;
-};
-type MetricsChartProps = {
-    history?: MetricsHistoryRecord[];
-};
-/**
- * TODO: Refactor this component to use shared graphs configuration
- */
-declare const MetricsChart: ({ history }: MetricsChartProps) => react_jsx_runtime.JSX.Element;
-
-type MetricsPeriod = 'hour' | 'day' | 'week' | 'month';
-type PeriodSelectProps = {
-    value?: MetricsPeriod;
-    onChange?: (value: MetricsPeriod) => void;
-};
-declare const PeriodSelect: ({ value, onChange }: PeriodSelectProps) => react_jsx_runtime.JSX.Element;
-
 /**
  * Represents a single time range option in the dropdown.
  */
@@ -206,4 +184,4 @@ interface TimeSeriesGraphProps {
  */
 declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, xAxisFormat, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
 
-export { ChartWidget, type ChartWidgetProps, type DataPoint, type DataSeries, MetricsChart, type MetricsChartProps, type MetricsPeriod, PeriodSelect, type SummaryItem, SummaryStats, type SummaryStatsProps, type TimeRangeOption, TimeRangeSelect, type TimeRangeSelectProps, TimeSeriesGraph, type TimeSeriesGraphProps };
+export { ChartWidget, type ChartWidgetProps, type DataPoint, type DataSeries, type SummaryItem, SummaryStats, type SummaryStatsProps, type TimeRangeOption, TimeRangeSelect, type TimeRangeSelectProps, TimeSeriesGraph, type TimeSeriesGraphProps };

package/dist/charts.d.ts

@@ -13,28 +13,6 @@ type ChartWidgetProps = {
 };
 declare const ChartWidget: ({ title, value, history, formatValue, }: ChartWidgetProps) => react_jsx_runtime.JSX.Element;
 
-type MetricsHistoryRecord = {
-    storedBytes: number;
-    transferredBytes: number;
-    puts: number;
-    gets: number;
-    recordTime: Date;
-};
-type MetricsChartProps = {
-    history?: MetricsHistoryRecord[];
-};
-/**
- * TODO: Refactor this component to use shared graphs configuration
- */
-declare const MetricsChart: ({ history }: MetricsChartProps) => react_jsx_runtime.JSX.Element;
-
-type MetricsPeriod = 'hour' | 'day' | 'week' | 'month';
-type PeriodSelectProps = {
-    value?: MetricsPeriod;
-    onChange?: (value: MetricsPeriod) => void;
-};
-declare const PeriodSelect: ({ value, onChange }: PeriodSelectProps) => react_jsx_runtime.JSX.Element;
-
 /**
  * Represents a single time range option in the dropdown.
  */
@@ -206,4 +184,4 @@ interface TimeSeriesGraphProps {
  */
 declare const TimeSeriesGraph: ({ title, series, timeRangeOptions, selectedTimeRange, onTimeRangeChange, summaryItems, showSummary, headerAction, loading, xAxisFormat, }: TimeSeriesGraphProps) => react_jsx_runtime.JSX.Element;
 
-export { ChartWidget, type ChartWidgetProps, type DataPoint, type DataSeries, MetricsChart, type MetricsChartProps, type MetricsPeriod, PeriodSelect, type SummaryItem, SummaryStats, type SummaryStatsProps, type TimeRangeOption, TimeRangeSelect, type TimeRangeSelectProps, TimeSeriesGraph, type TimeSeriesGraphProps };
+export { ChartWidget, type ChartWidgetProps, type DataPoint, type DataSeries, type SummaryItem, SummaryStats, type SummaryStatsProps, type TimeRangeOption, TimeRangeSelect, type TimeRangeSelectProps, TimeSeriesGraph, type TimeSeriesGraphProps };

package/dist/charts.js

@@ -3,18 +3,11 @@
 
 
 
+var _chunkDZXNYLVGjs = require('./chunk-DZXNYLVG.js');
 
 
-var _chunkKF2Y7HO3js = require('./chunk-KF2Y7HO3.js');
-require('./chunk-AIY6222Q.js');
-require('./chunk-FN5YL4BK.js');
-require('./chunk-ZGCN5WCG.js');
 
 
 
-
-
-
-
-exports.ChartWidget = _chunkKF2Y7HO3js.ChartWidget; exports.MetricsChart = _chunkKF2Y7HO3js.MetricsChart; exports.PeriodSelect = _chunkKF2Y7HO3js.PeriodSelect; exports.SummaryStats = _chunkKF2Y7HO3js.SummaryStats; exports.TimeRangeSelect = _chunkKF2Y7HO3js.TimeRangeSelect; exports.TimeSeriesGraph = _chunkKF2Y7HO3js.TimeSeriesGraph;
+exports.ChartWidget = _chunkDZXNYLVGjs.ChartWidget; exports.SummaryStats = _chunkDZXNYLVGjs.SummaryStats; exports.TimeRangeSelect = _chunkDZXNYLVGjs.TimeRangeSelect; exports.TimeSeriesGraph = _chunkDZXNYLVGjs.TimeSeriesGraph;
 //# sourceMappingURL=charts.js.map

package/dist/charts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/charts.js"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACA;AACA;AACF,sDAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B,+BAA4B;AAC5B;AACE;AACA;AACA;AACA;AACA;AACA;AACF,6UAAC","file":"/home/runner/work/cere-design-system/cere-design-system/dist/charts.js"}
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/charts.js"],"names":[],"mappings":"AAAA;AACE;AACA;AACA;AACA;AACF,sDAA4B;AAC5B;AACE;AACA;AACA;AACA;AACF,iOAAC","file":"/home/runner/work/cere-design-system/cere-design-system/dist/charts.js"}

package/dist/charts.mjs

@@ -1,18 +1,11 @@
 import {
   ChartWidget,
-  MetricsChart,
-  PeriodSelect,
   SummaryStats,
   TimeRangeSelect,
   TimeSeriesGraph
-} from "./chunk-T7LPABOL.mjs";
-import "./chunk-QD6RLAO2.mjs";
-import "./chunk-ATIFLPH6.mjs";
-import "./chunk-PWF2NJDB.mjs";
+} from "./chunk-BT7XUTT5.mjs";
 export {
   ChartWidget,
-  MetricsChart,
-  PeriodSelect,
   SummaryStats,
   TimeRangeSelect,
   TimeSeriesGraph

package/dist/{chunk-THQKYTQE.js → chunk-2KDN37PQ.js}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } 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 _chunkCCN6M4LIjs = require('./chunk-CCN6M4LI.js');
+var _chunkARSCL4ZZjs = require('./chunk-ARSCL4ZZ.js'); var _chunkARSCL4ZZjs2 = _interopRequireDefault(_chunkARSCL4ZZjs);
 
 
 var _chunkJBHRAAN3js = require('./chunk-JBHRAAN3.js');
@@ -9,7 +9,7 @@ var _chunkJBHRAAN3js = require('./chunk-JBHRAAN3.js');
 
 
 
-var _chunkZGCN5WCGjs = require('./chunk-ZGCN5WCG.js');
+var _chunkXZZZ4MZVjs = require('./chunk-XZZZ4MZV.js');
 
 // src/components/inputs/CopyableField.tsx
 var _react = require('react'); var _react2 = _interopRequireDefault(_react);
@@ -17,41 +17,41 @@ var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box
 var _styles = require('@mui/material/styles');
 var _jsxruntime = require('react/jsx-runtime');
 var ValueButton = _styles.styled.call(void 0, "button")({
-  fontFamily: _chunkZGCN5WCGjs.fontFamilyMono,
+  fontFamily: _chunkXZZZ4MZVjs.fontFamilyMono,
   fontSize: "11.5px",
   fontWeight: 400,
   lineHeight: 1.45,
   padding: "8px 10px",
   borderRadius: "8px",
-  backgroundColor: _chunkZGCN5WCGjs.webSurfaceTokens.surfaceMid,
-  border: `1px solid ${_chunkZGCN5WCGjs.webSurfaceTokens.strokeOnLow}`,
-  color: _chunkZGCN5WCGjs.webSurfaceTokens.textSecondary,
+  backgroundColor: _chunkXZZZ4MZVjs.webSurfaceTokens.surfaceMid,
+  border: `1px solid ${_chunkXZZZ4MZVjs.webSurfaceTokens.strokeOnLow}`,
+  color: _chunkXZZZ4MZVjs.webSurfaceTokens.textSecondary,
   wordBreak: "break-all",
   display: "block",
   width: "100%",
   textAlign: "left",
   cursor: "pointer",
   appearance: "none",
-  transition: `background ${_chunkZGCN5WCGjs.motion.dur.fast} ${_chunkZGCN5WCGjs.motion.ease.standard},
-               border-color ${_chunkZGCN5WCGjs.motion.dur.fast} ${_chunkZGCN5WCGjs.motion.ease.standard},
-               color ${_chunkZGCN5WCGjs.motion.dur.fast} ${_chunkZGCN5WCGjs.motion.ease.standard}`,
+  transition: `background ${_chunkXZZZ4MZVjs.motion.dur.fast} ${_chunkXZZZ4MZVjs.motion.ease.standard},
+               border-color ${_chunkXZZZ4MZVjs.motion.dur.fast} ${_chunkXZZZ4MZVjs.motion.ease.standard},
+               color ${_chunkXZZZ4MZVjs.motion.dur.fast} ${_chunkXZZZ4MZVjs.motion.ease.standard}`,
   "&:hover": {
-    backgroundColor: _chunkZGCN5WCGjs.webSurfaceTokens.surfaceContrast,
-    borderColor: _chunkZGCN5WCGjs.webSurfaceTokens.strokeOnMed,
-    color: _chunkZGCN5WCGjs.webSurfaceTokens.textPrimary
+    backgroundColor: _chunkXZZZ4MZVjs.webSurfaceTokens.surfaceContrast,
+    borderColor: _chunkXZZZ4MZVjs.webSurfaceTokens.strokeOnMed,
+    color: _chunkXZZZ4MZVjs.webSurfaceTokens.textPrimary
   },
   "&:active": {
     transform: "translateY(1px)"
   },
   "&:focus-visible": {
     outline: "none",
-    boxShadow: _chunkZGCN5WCGjs.webSurfaceTokens.shadowFocus
+    boxShadow: _chunkXZZZ4MZVjs.webSurfaceTokens.shadowFocus
   }
 });
 var FlashLabel = _styles.styled.call(void 0, "span")({
   fontSize: "11px",
   fontWeight: 600,
-  color: _chunkZGCN5WCGjs.webSurfaceTokens.cVioletDark,
+  color: _chunkXZZZ4MZVjs.webSurfaceTokens.cVioletDark,
   letterSpacing: "0.04em",
   "@media (prefers-reduced-motion: no-preference)": {
     animation: "cere-copyable-flash 180ms ease-out"
@@ -81,7 +81,7 @@ var CopyableField = _react2.default.forwardRef(
       } catch (e2) {
       }
     }, [value, onCopy, flashDurationMs]);
-    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkCCN6M4LIjs.Card, { ref, variant: "tinted", sx: { p: 1.75 }, children: [
+    return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkARSCL4ZZjs.Card, { ref, variant: "tinted", sx: { p: 1.75 }, children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
         _Box2.default,
         {
@@ -94,7 +94,7 @@ var CopyableField = _react2.default.forwardRef(
             minHeight: label || copied ? void 0 : 0
           },
           children: [
-            label ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkCCN6M4LIjs.Typography, { variant: "overline", children: label }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}),
+            label ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkARSCL4ZZjs2.default, { variant: "overline", children: label }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", {}),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, FlashLabel, { role: "status", "aria-live": "polite", "aria-atomic": "true", children: copied ? flashLabel : "" })
           ]
         }
@@ -223,26 +223,22 @@ var SearchField = _react2.default.forwardRef(
 );
 
 // src/components/inputs/FormControl.tsx
+var _FormControl = require('@mui/material/FormControl'); var _FormControl2 = _interopRequireDefault(_FormControl);
+var _FormLabel = require('@mui/material/FormLabel'); var _FormLabel2 = _interopRequireDefault(_FormLabel);
+var _FormHelperText = require('@mui/material/FormHelperText'); var _FormHelperText2 = _interopRequireDefault(_FormHelperText);
+var _FormControlLabel = require('@mui/material/FormControlLabel'); var _FormControlLabel2 = _interopRequireDefault(_FormControlLabel);
+var _InputLabel = require('@mui/material/InputLabel'); var _InputLabel2 = _interopRequireDefault(_InputLabel);
 
 
-
-
-
-
-
-var _material = require('@mui/material');
-
 // src/components/inputs/ToggleButton.tsx
-
-
-
-
+var _ToggleButton = require('@mui/material/ToggleButton'); var _ToggleButton2 = _interopRequireDefault(_ToggleButton);
+var _ToggleButtonGroup = require('@mui/material/ToggleButtonGroup'); var _ToggleButtonGroup2 = _interopRequireDefault(_ToggleButtonGroup);
 
 
 var ToggleButton = (props) => {
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _material.ToggleButton, { ...props });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ToggleButton2.default, { ...props });
 };
-var StyledToggleButtonGroup = _styles.styled.call(void 0, (0, _material.ToggleButtonGroup))(({ theme }) => ({
+var StyledToggleButtonGroup = _styles.styled.call(void 0, (0, _ToggleButtonGroup2.default))(({ theme }) => ({
   "& .MuiToggleButton-root": {
     border: `1px solid ${theme.palette.grey[300]}`,
     "&.Mui-selected": {
@@ -330,7 +326,7 @@ var Switch = ({
 // src/components/inputs/Checkbox.tsx
 var _Checkbox = require('@mui/material/Checkbox'); var _Checkbox2 = _interopRequireDefault(_Checkbox);
 
-var _FormControlLabel = require('@mui/material/FormControlLabel'); var _FormControlLabel2 = _interopRequireDefault(_FormControlLabel);
+
 
 var StyledCheckbox = _styles.styled.call(void 0, (0, _Checkbox2.default))(({ theme }) => ({
   color: theme.palette.grey[400],
@@ -486,5 +482,5 @@ var DateRangePicker = ({
 
 
 
-exports.CopyableField = CopyableField; exports.useSearchHotkeys = useSearchHotkeys; exports.SearchField = SearchField; exports.FormControl = _material.FormControl; exports.FormLabel = _material.FormLabel; exports.FormHelperText = _material.FormHelperText; exports.FormControlLabel = _material.FormControlLabel; exports.InputLabel = _material.InputLabel; exports.InputAdornment = _material.InputAdornment; exports.ToggleButton = ToggleButton; exports.ToggleButtonGroup = ToggleButtonGroup; exports.Switch = Switch; exports.Checkbox = Checkbox; exports.RadioGroup = _RadioGroup2.default; exports.Radio = Radio; exports.DateRangePicker = DateRangePicker;
-//# sourceMappingURL=chunk-THQKYTQE.js.map
+exports.CopyableField = CopyableField; exports.useSearchHotkeys = useSearchHotkeys; exports.SearchField = SearchField; exports.default = _FormControl2.default; exports.default2 = _FormLabel2.default; exports.default3 = _FormHelperText2.default; exports.default4 = _FormControlLabel2.default; exports.default5 = _InputLabel2.default; exports.default6 = _InputAdornment2.default; exports.ToggleButton = ToggleButton; exports.ToggleButtonGroup = ToggleButtonGroup; exports.Switch = Switch; exports.Checkbox = Checkbox; exports.RadioGroup = _RadioGroup2.default; exports.Radio = Radio; exports.DateRangePicker = DateRangePicker;
+//# sourceMappingURL=chunk-2KDN37PQ.js.map

package/dist/chunk-2KDN37PQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-2KDN37PQ.js","../src/components/inputs/CopyableField.tsx","../src/components/inputs/SearchField.tsx","../src/components/inputs/useSearchHotkeys.ts","../src/components/inputs/FormControl.tsx","../src/components/inputs/ToggleButton.tsx","../src/components/inputs/Switch.tsx","../src/components/inputs/Checkbox.tsx","../src/components/inputs/Radio.tsx","../src/components/inputs/DateRangePicker/DateRangePicker.tsx"],"names":["jsx","Box","FormControlLabel"],"mappings":"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","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-2KDN37PQ.js","sourcesContent":[null,"import React, { useCallback, useEffect, useRef, useState } from 'react';\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport { Card } from '../layout/Card';\nimport { Typography } from '../layout/Typography';\nimport {\n  fontFamilyMono,\n} from '../../theme/typography';\nimport { motion } from '../../theme/motion';\nimport { webSurfaceTokens } from '../../theme/webSurfaceTokens';\n\nexport interface CopyableFieldProps {\n  /** The string copied to the clipboard. Also rendered as the button label. */\n  value: string;\n  /** Small label rendered above the value (overline-styled). */\n  label?: React.ReactNode;\n  /** Custom aria-label; defaults to \"Copy {value}\". */\n  ariaLabel?: string;\n  /** How long the \"Copied\" flash stays visible, in ms. @default 1400 */\n  flashDurationMs?: number;\n  /** Text shown during the flash. @default \"Copied\" */\n  flashLabel?: string;\n  /** Optional callback invoked after a successful copy. */\n  onCopy?: (value: string) => void;\n}\n\nconst ValueButton = styled('button')({\n  fontFamily: fontFamilyMono,\n  fontSize: '11.5px',\n  fontWeight: 400,\n  lineHeight: 1.45,\n  padding: '8px 10px',\n  borderRadius: '8px',\n  backgroundColor: webSurfaceTokens.surfaceMid,\n  border: `1px solid ${webSurfaceTokens.strokeOnLow}`,\n  color: webSurfaceTokens.textSecondary,\n  wordBreak: 'break-all',\n  display: 'block',\n  width: '100%',\n  textAlign: 'left',\n  cursor: 'pointer',\n  appearance: 'none',\n  transition: `background ${motion.dur.fast} ${motion.ease.standard},\n               border-color ${motion.dur.fast} ${motion.ease.standard},\n               color ${motion.dur.fast} ${motion.ease.standard}`,\n  '&:hover': {\n    backgroundColor: webSurfaceTokens.surfaceContrast,\n    borderColor: webSurfaceTokens.strokeOnMed,\n    color: webSurfaceTokens.textPrimary,\n  },\n  '&:active': {\n    transform: 'translateY(1px)',\n  },\n  '&:focus-visible': {\n    outline: 'none',\n    boxShadow: webSurfaceTokens.shadowFocus,\n  },\n});\n\nconst FlashLabel = styled('span')({\n  fontSize: '11px',\n  fontWeight: 600,\n  color: webSurfaceTokens.cVioletDark,\n  letterSpacing: '0.04em',\n  '@media (prefers-reduced-motion: no-preference)': {\n    animation: 'cere-copyable-flash 180ms ease-out',\n  },\n  '@keyframes cere-copyable-flash': {\n    from: { opacity: 0, transform: 'translateY(-2px)' },\n    to: { opacity: 1, transform: 'translateY(0)' },\n  },\n});\n\n/**\n * Tinted card with a label row and a monospace, click-to-copy value button.\n * Replaces ad-hoc `.share-card / .url / .share-card__flash` markup.\n */\nexport const CopyableField = React.forwardRef<HTMLDivElement, CopyableFieldProps>(\n  function CopyableField(\n    { value, label, ariaLabel, flashDurationMs = 1400, flashLabel = 'Copied', onCopy },\n    ref,\n  ) {\n  const [copied, setCopied] = useState(false);\n  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  useEffect(\n    () => () => {\n      if (timerRef.current) clearTimeout(timerRef.current);\n    },\n    [],\n  );\n\n  const handleCopy = useCallback(async () => {\n    try {\n      await navigator.clipboard.writeText(value);\n      setCopied(true);\n      onCopy?.(value);\n      if (timerRef.current) clearTimeout(timerRef.current);\n      timerRef.current = setTimeout(() => setCopied(false), flashDurationMs);\n    } catch {\n      // Clipboard blocked (insecure context / permissions). The value is\n      // still visible as plain text — silently no-op.\n    }\n  }, [value, onCopy, flashDurationMs]);\n\n  return (\n    <Card ref={ref} variant=\"tinted\" sx={{ p: 1.75 }}>\n      <Box\n        sx={{\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 1,\n          mb: label || copied ? '6px' : 0,\n          minHeight: label || copied ? undefined : 0,\n        }}\n      >\n        {label ? <Typography variant=\"overline\">{label}</Typography> : <span />}\n        {/*\n         * Live region stays mounted (even when empty) so SRs reliably\n         * announce the swap to flashLabel after a copy. The visual flash\n         * uses the same node, so we don't double-render the text.\n         */}\n        <FlashLabel role=\"status\" aria-live=\"polite\" aria-atomic=\"true\">\n          {copied ? flashLabel : ''}\n        </FlashLabel>\n      </Box>\n      <ValueButton\n        type=\"button\"\n        onClick={handleCopy}\n        aria-label={ariaLabel ?? `Copy ${value}`}\n      >\n        {value}\n      </ValueButton>\n    </Card>\n  );\n  },\n);\n","import React, { useEffect, useState } from 'react';\nimport { TextField, TextFieldProps } from './TextField';\nimport SearchIcon from '@mui/icons-material/Search';\nimport InputAdornment from '@mui/material/InputAdornment';\nimport Box from '@mui/material/Box';\nimport { useTheme } from '@mui/material/styles';\nimport { isMacPlatform } from './useSearchHotkeys';\n\nexport type SearchFieldVariant = 'standard' | 'pill';\n\nexport interface SearchFieldProps extends Omit<TextFieldProps, 'InputProps' | 'variant'> {\n  placeholder?: string;\n  /** Fires with the next input value on every change. */\n  onSearch?: (value: string) => void;\n  /** Visual treatment. `pill` renders a fully-rounded input. @default 'standard' */\n  variant?: SearchFieldVariant;\n  /**\n   * Show a keyboard-shortcut hint adornment (⌘ K on Mac, Ctrl + K elsewhere) at\n   * the right edge. Pair with `useSearchHotkeys` to wire the key handler.\n   */\n  shortcutHint?: boolean;\n}\n\nconst ShortcutHint = () => {\n  // We render nothing on the server (and on the first client render) because\n  // we have no reliable SSR signal for platform — `navigator.platform` is only\n  // available after hydration. Rendering either default (⌘ or Ctrl) would be\n  // wrong roughly half the time, so we accept a one-frame flash and swap to\n  // the correct glyph in a post-mount effect. The hint is decorative.\n  const [mounted, setMounted] = useState(false);\n  useEffect(() => {\n    setMounted(true);\n  }, []);\n  if (!mounted) return null;\n  const isMac = isMacPlatform();\n  // Mac convention is the cmd glyph + a thin gap before the letter; on other\n  // platforms the explicit \"Ctrl + K\" form reads better than \"CtrlK\".\n  const label = isMac ? '⌘ K' : 'Ctrl + K';\n  return (\n    <Box\n      component=\"span\"\n      aria-hidden\n      sx={{\n        fontFamily: 'monospace',\n        fontSize: 11,\n        letterSpacing: 0.4,\n        px: 0.75,\n        py: 0.25,\n        borderRadius: 1,\n        border: '1px solid',\n        borderColor: 'divider',\n        color: 'text.secondary',\n        lineHeight: 1,\n      }}\n    >\n      {label}\n    </Box>\n  );\n};\n\nexport const SearchField = React.forwardRef<HTMLDivElement, SearchFieldProps>(\n  function SearchField(\n    {\n      placeholder = 'Search...',\n      onSearch,\n      onChange,\n      variant = 'standard',\n      shortcutHint = false,\n      sx,\n      ...props\n    },\n    ref,\n  ) {\n  const theme = useTheme();\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    onChange?.(e);\n    onSearch?.(e.target.value);\n  };\n\n  const pillInputSx =\n    variant === 'pill'\n      ? { borderRadius: '999px', paddingRight: '6px' }\n      : undefined;\n\n  return (\n    <TextField\n      ref={ref}\n      placeholder={placeholder}\n      onChange={handleChange}\n      sx={sx}\n      slotProps={{\n        input: {\n          ...(pillInputSx ? { sx: pillInputSx } : {}),\n          startAdornment: (\n            <InputAdornment position=\"start\">\n              <SearchIcon style={{ fontSize: 18, color: theme.palette.text.disabled }} />\n            </InputAdornment>\n          ),\n          endAdornment: shortcutHint ? (\n            <InputAdornment position=\"end\">\n              <ShortcutHint />\n            </InputAdornment>\n          ) : undefined,\n        },\n      }}\n      {...props}\n    />\n  );\n  },\n);\n","import { RefObject, useEffect } from 'react';\n\nexport interface UseSearchHotkeysOptions {\n  /** Cmd/Ctrl + K focuses the ref. @default true */\n  k?: boolean;\n  /** `/` (when not already typing in another field) focuses the ref. @default true */\n  slash?: boolean;\n}\n\n/** Detect Mac via the modern `userAgentData.platform`, falling back to `navigator.platform`. */\nexport function isMacPlatform(): boolean {\n  if (typeof navigator === 'undefined') return false;\n  const uaDataPlatform = (navigator as Navigator & { userAgentData?: { platform?: string } })\n    .userAgentData?.platform;\n  if (typeof uaDataPlatform === 'string') return /mac/i.test(uaDataPlatform);\n  return /Mac|iPhone|iPad|iPod/i.test(navigator.platform);\n}\n\n/**\n * Wire global Cmd+K (Mac) / Ctrl+K (everywhere else) and `/` hotkeys to focus\n * the input pointed to by `inputRef`. The `/` hotkey is suppressed while the\n * user is typing in another input, textarea or contentEditable element so it\n * doesn't hijack normal typing. Either hotkey can be disabled via options.\n */\nexport function useSearchHotkeys(\n  inputRef: RefObject<HTMLInputElement | null>,\n  options: UseSearchHotkeysOptions = {},\n) {\n  const { k: enableK = true, slash: enableSlash = true } = options;\n\n  useEffect(() => {\n    if (!enableK && !enableSlash) return;\n    const mac = isMacPlatform();\n    function onKeyDown(event: KeyboardEvent) {\n      if (enableK && event.key.toLowerCase() === 'k') {\n        // Mac users press Cmd-K (metaKey); Ctrl-K is reserved for kill-to-end-of-line.\n        // Everyone else uses Ctrl-K. Exclude Shift/Alt so we don't hijack browser\n        // shortcuts like Cmd+Shift+K (Chrome dev tools tab).\n        const correctMod = mac ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;\n        if (correctMod && !event.shiftKey && !event.altKey) {\n          event.preventDefault();\n          inputRef.current?.focus();\n          return;\n        }\n      }\n      if (enableSlash && event.key === '/') {\n        const target = event.target as HTMLElement | null;\n        const typingInField =\n          target instanceof HTMLInputElement ||\n          target instanceof HTMLTextAreaElement ||\n          (target?.isContentEditable ?? false);\n        if (!typingInField) {\n          event.preventDefault();\n          inputRef.current?.focus();\n        }\n      }\n    }\n    window.addEventListener('keydown', onKeyDown);\n    return () => window.removeEventListener('keydown', onKeyDown);\n  }, [inputRef, enableK, enableSlash]);\n}\n","export { default as FormControl } from '@mui/material/FormControl';\nexport type { FormControlProps } from '@mui/material/FormControl';\nexport { default as FormLabel } from '@mui/material/FormLabel';\nexport type { FormLabelProps } from '@mui/material/FormLabel';\nexport { default as FormHelperText } from '@mui/material/FormHelperText';\nexport type { FormHelperTextProps } from '@mui/material/FormHelperText';\nexport { default as FormControlLabel } from '@mui/material/FormControlLabel';\nexport type { FormControlLabelProps } from '@mui/material/FormControlLabel';\nexport { default as InputLabel } from '@mui/material/InputLabel';\nexport type { InputLabelProps } from '@mui/material/InputLabel';\nexport { default as InputAdornment } from '@mui/material/InputAdornment';\nexport type { InputAdornmentProps } from '@mui/material/InputAdornment';\n\n","import React from 'react';\nimport MuiToggleButton from '@mui/material/ToggleButton';\nimport type { ToggleButtonProps as MuiToggleButtonProps } from '@mui/material/ToggleButton';\nimport MuiToggleButtonGroup from '@mui/material/ToggleButtonGroup';\nimport type { ToggleButtonGroupProps as MuiToggleButtonGroupProps } from '@mui/material/ToggleButtonGroup';\nimport { styled } from '@mui/material/styles';\n\nexport type ToggleButtonProps = MuiToggleButtonProps\n\nexport const ToggleButton: React.FC<ToggleButtonProps> = (props) => {\n  return <MuiToggleButton {...props} />;\n};\n\nexport type ToggleButtonGroupProps = MuiToggleButtonGroupProps\n\nconst StyledToggleButtonGroup = styled(MuiToggleButtonGroup)(({ theme }) => ({\n  '& .MuiToggleButton-root': {\n    border: `1px solid ${theme.palette.grey[300]}`,\n    '&.Mui-selected': {\n      backgroundColor: theme.palette.primary.main,\n      color: theme.palette.primary.contrastText,\n      '&:hover': {\n        backgroundColor: theme.palette.primary.light,\n      },\n    },\n    '&:hover': {\n      backgroundColor: theme.palette.grey[50],\n    },\n  },\n}));\n\nexport const ToggleButtonGroup: React.FC<ToggleButtonGroupProps> = (props) => {\n  return <StyledToggleButtonGroup {...props} />;\n};\n\n","import React from 'react';\nimport MuiSwitch, { SwitchProps as MuiSwitchProps } from '@mui/material/Switch';\nimport { styled } from '@mui/material/styles';\n\nexport interface SwitchProps extends MuiSwitchProps {\n  label?: string;\n  labelPosition?: 'left' | 'right';\n}\n\nconst StyledSwitch = styled(MuiSwitch)(({ theme }) => ({\n  width: 44,\n  height: 24,\n  padding: 0,\n  '& .MuiSwitch-switchBase': {\n    padding: 0,\n    margin: 2,\n    transitionDuration: '300ms',\n    '&.Mui-checked': {\n      transform: 'translateX(20px)',\n      color: theme.palette.common.white,\n      '& + .MuiSwitch-track': {\n        backgroundColor: theme.palette.success.main,\n        opacity: 1,\n        border: 0,\n      },\n      '&.Mui-disabled + .MuiSwitch-track': {\n        opacity: 0.5,\n      },\n    },\n    '&.Mui-focusVisible .MuiSwitch-thumb': {\n      color: theme.palette.success.main,\n      border: `6px solid ${theme.palette.common.white}`,\n    },\n    '&.Mui-disabled .MuiSwitch-thumb': {\n      color: theme.palette.grey[300],\n    },\n    '&.Mui-disabled + .MuiSwitch-track': {\n      opacity: 0.5,\n      backgroundColor: theme.palette.grey[300],\n    },\n  },\n  '& .MuiSwitch-thumb': {\n    boxSizing: 'border-box',\n    width: 20,\n    height: 20,\n  },\n  '& .MuiSwitch-track': {\n    borderRadius: 24 / 2,\n    backgroundColor: theme.palette.grey[300],\n    opacity: 1,\n    transition: theme.transitions.create(['background-color'], {\n      duration: 500,\n    }),\n  },\n}));\n\nexport const Switch: React.FC<SwitchProps> = ({\n  label,\n  labelPosition = 'right',\n  ...props\n}) => {\n  const switchComponent = <StyledSwitch {...props} />;\n\n  if (!label) {\n    return switchComponent;\n  }\n\n  return (\n    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>\n      {labelPosition === 'left' && <span>{label}</span>}\n      {switchComponent}\n      {labelPosition === 'right' && <span>{label}</span>}\n    </div>\n  );\n};\n\n","import React from 'react';\nimport MuiCheckbox, { CheckboxProps as MuiCheckboxProps } from '@mui/material/Checkbox';\nimport { styled } from '@mui/material/styles';\nimport FormControlLabel from '@mui/material/FormControlLabel';\n\n/**\n * **Prop-forwarding note.**\n *\n * When `label` is absent, all props (including `sx` and `className`) are\n * forwarded directly to the inner `<Checkbox>` element.\n *\n * When `label` is provided, the component renders:\n * ```\n * <FormControlLabel control={<Checkbox {...props} />} label={label} />\n * ```\n * `sx` and `className` from the spread go to the inner `<Checkbox>`, NOT to\n * the outer `<FormControlLabel>`. If you need to style the label wrapper,\n * use MUI's `FormControlLabel` directly and pass `<Checkbox />` as `control`.\n */\nexport interface CheckboxProps extends Omit<MuiCheckboxProps, 'color'> {\n  label?: string;\n  labelPosition?: 'left' | 'right';\n}\n\nconst StyledCheckbox = styled(MuiCheckbox)(({ theme }) => ({\n  color: theme.palette.grey[400],\n  '&.Mui-checked': {\n    color: theme.palette.primary.main,\n  },\n  '&.MuiCheckbox-indeterminate': {\n    color: theme.palette.primary.main,\n  },\n  '&.Mui-disabled': {\n    color: theme.palette.grey[300],\n  },\n  '&:hover': {\n    backgroundColor: theme.palette.background.selected,\n  },\n  '&.Mui-focusVisible': {\n    outline: `2px solid ${theme.palette.primary.main}`,\n    outlineOffset: 2,\n  },\n}));\n\nexport const Checkbox: React.FC<CheckboxProps> = ({\n  label,\n  labelPosition = 'right',\n  ...props\n}) => {\n  const checkboxComponent = <StyledCheckbox {...props} />;\n\n  if (!label) {\n    return checkboxComponent;\n  }\n\n  const labelPlacementMap: Record<string, 'start' | 'end' | 'top' | 'bottom'> = {\n    left: 'start',\n    right: 'end',\n  };\n\n  return (\n    <FormControlLabel\n      control={checkboxComponent}\n      label={label}\n      labelPlacement={labelPlacementMap[labelPosition] || 'end'}\n    />\n  );\n};\n\n","import React from 'react';\nimport MuiRadio, { RadioProps as MuiRadioProps } from '@mui/material/Radio';\nimport { styled } from '@mui/material/styles';\nimport FormControlLabel from '@mui/material/FormControlLabel';\nimport RadioGroup from '@mui/material/RadioGroup';\n\nexport interface RadioProps extends Omit<MuiRadioProps, 'color'> {\n  label?: string;\n  labelPosition?: 'left' | 'right';\n}\n\nconst StyledRadio = styled(MuiRadio)(({ theme }) => ({\n  color: theme.palette.grey[400],\n  '&.Mui-checked': {\n    color: theme.palette.primary.main,\n  },\n  '&.Mui-disabled': {\n    color: theme.palette.grey[300],\n  },\n  '&:hover': {\n    backgroundColor: theme.palette.background.selected,\n  },\n  '&.Mui-focusVisible': {\n    outline: `2px solid ${theme.palette.primary.main}`,\n    outlineOffset: 2,\n  },\n}));\n\nexport const Radio: React.FC<RadioProps> = ({\n  label,\n  labelPosition = 'right',\n  ...props\n}) => {\n  const radioComponent = <StyledRadio {...props} />;\n\n  if (!label) {\n    return radioComponent;\n  }\n\n  const labelPlacementMap: Record<string, 'start' | 'end' | 'top' | 'bottom'> = {\n    left: 'start',\n    right: 'end',\n  };\n\n  return (\n    <FormControlLabel\n      control={radioComponent}\n      label={label}\n      labelPlacement={labelPlacementMap[labelPosition] || 'end'}\n    />\n  );\n};\n\nexport { RadioGroup };\n\n","import React from 'react';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\nimport { DatePicker } from '@mui/x-date-pickers/DatePicker';\nimport { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';\nimport { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';\n\n/** Props for the DateRangePicker component. */\nexport interface DateRangePickerProps {\n  /** The selected start date, or null if unset. */\n  startDate: Date | null;\n  /** The selected end date, or null if unset. */\n  endDate: Date | null;\n  /** Callback fired when the start date changes. */\n  onStartDateChange: (date: Date | null) => void;\n  /** Callback fired when the end date changes. */\n  onEndDateChange: (date: Date | null) => void;\n  /** Earliest selectable date for both pickers. */\n  minDate?: Date;\n  /** Latest selectable date for both pickers. */\n  maxDate?: Date;\n  /** If true, both date pickers are disabled. @default false */\n  disabled?: boolean;\n  /** Size of the text field inputs. @default 'small' */\n  size?: 'small' | 'medium';\n}\n\nexport const DateRangePicker: React.FC<DateRangePickerProps> = ({\n  startDate,\n  endDate,\n  onStartDateChange,\n  onEndDateChange,\n  minDate,\n  maxDate,\n  disabled = false,\n  size = 'small',\n}) => {\n  return (\n    <LocalizationProvider dateAdapter={AdapterDateFns}>\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n        <DatePicker\n          label=\"Start date\"\n          value={startDate}\n          onChange={onStartDateChange}\n          minDate={minDate}\n          maxDate={endDate ?? maxDate}\n          disabled={disabled}\n          slotProps={{\n            textField: { size },\n          }}\n        />\n        <Typography variant=\"body2\" color=\"text.secondary\">\n          –\n        </Typography>\n        <DatePicker\n          label=\"End date\"\n          value={endDate}\n          onChange={onEndDateChange}\n          minDate={startDate ?? minDate}\n          maxDate={maxDate}\n          disabled={disabled}\n          slotProps={{\n            textField: { size },\n          }}\n        />\n      </Stack>\n    </LocalizationProvider>\n  );\n};\n"]}