@cere/cere-design-system 0.0.45 → 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

@@ -0,0 +1,119 @@
+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/ButtonGroup';
+
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+type ButtonTone = 'default' | 'onGradient';
+/** 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.
+     * - 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';
+    /**
+     * Not applicable when tone='onGradient'. Omit this prop.
+     * @deprecated Passing variant with tone='onGradient' is a type error.
+     */
+    variant?: never;
+}
+/** 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';
+}
+declare const IconButton: React__default.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface LoadingButtonProps extends LoadingButtonProps$1 {
+    /**
+     * If `true`, the button will show a loading indicator
+     */
+    loading?: boolean;
+    /**
+     * The loading indicator can be positioned inside the button or in the center
+     */
+    loadingPosition?: 'start' | 'end' | 'center';
+}
+/**
+ * LoadingButton component - Button with loading state from MUI Lab
+ *
+ * @example
+ * ```tsx
+ * <LoadingButton
+ *   variant="contained"
+ *   loading={isLoading}
+ *   onClick={handleSubmit}
+ * >
+ *   Submit
+ * </LoadingButton>
+ * ```
+ */
+declare const LoadingButton: React__default.ForwardRefExoticComponent<Omit<LoadingButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonGroupProps extends ButtonGroupProps$1 {
+    /**
+     * The content of the button group
+     */
+    children?: React__default.ReactNode;
+    /**
+     * If `true`, the buttons will be disabled
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the button group will take full width
+     */
+    fullWidth?: boolean;
+    /**
+     * The orientation of the button group
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The size of the buttons
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The variant to use
+     * @default 'outlined'
+     */
+    variant?: 'text' | 'outlined' | 'contained';
+}
+/**
+ * ButtonGroup component - groups related buttons together
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup variant="contained">
+ *   <Button>One</Button>
+ *   <Button>Two</Button>
+ *   <Button>Three</Button>
+ * </ButtonGroup>
+ * ```
+ */
+declare const ButtonGroup: React__default.FC<ButtonGroupProps>;
+
+export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonTone, type ButtonVariant, IconButton, type IconButtonProps, LoadingButton, type LoadingButtonProps };

package/dist/buttons.d.ts

@@ -0,0 +1,119 @@
+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/ButtonGroup';
+
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+type ButtonTone = 'default' | 'onGradient';
+/** 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.
+     * - 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';
+    /**
+     * Not applicable when tone='onGradient'. Omit this prop.
+     * @deprecated Passing variant with tone='onGradient' is a type error.
+     */
+    variant?: never;
+}
+/** 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';
+}
+declare const IconButton: React__default.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface LoadingButtonProps extends LoadingButtonProps$1 {
+    /**
+     * If `true`, the button will show a loading indicator
+     */
+    loading?: boolean;
+    /**
+     * The loading indicator can be positioned inside the button or in the center
+     */
+    loadingPosition?: 'start' | 'end' | 'center';
+}
+/**
+ * LoadingButton component - Button with loading state from MUI Lab
+ *
+ * @example
+ * ```tsx
+ * <LoadingButton
+ *   variant="contained"
+ *   loading={isLoading}
+ *   onClick={handleSubmit}
+ * >
+ *   Submit
+ * </LoadingButton>
+ * ```
+ */
+declare const LoadingButton: React__default.ForwardRefExoticComponent<Omit<LoadingButtonProps, "ref"> & React__default.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonGroupProps extends ButtonGroupProps$1 {
+    /**
+     * The content of the button group
+     */
+    children?: React__default.ReactNode;
+    /**
+     * If `true`, the buttons will be disabled
+     */
+    disabled?: boolean;
+    /**
+     * If `true`, the button group will take full width
+     */
+    fullWidth?: boolean;
+    /**
+     * The orientation of the button group
+     * @default 'horizontal'
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * The size of the buttons
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * The variant to use
+     * @default 'outlined'
+     */
+    variant?: 'text' | 'outlined' | 'contained';
+}
+/**
+ * ButtonGroup component - groups related buttons together
+ *
+ * @example
+ * ```tsx
+ * <ButtonGroup variant="contained">
+ *   <Button>One</Button>
+ *   <Button>Two</Button>
+ *   <Button>Three</Button>
+ * </ButtonGroup>
+ * ```
+ */
+declare const ButtonGroup: React__default.FC<ButtonGroupProps>;
+
+export { Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonTone, type ButtonVariant, IconButton, type IconButtonProps, LoadingButton, type LoadingButtonProps };

package/dist/buttons.js

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

package/dist/buttons.js.map

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

package/dist/buttons.mjs

@@ -0,0 +1,19 @@
+import {
+  ButtonGroup,
+  LoadingButton
+} from "./chunk-ZDAZYIXB.mjs";
+import {
+  IconButton
+} from "./chunk-5ASG6G6U.mjs";
+import {
+  Button
+} from "./chunk-BOQPWZIB.mjs";
+import "./chunk-D7D25O6E.mjs";
+import "./chunk-WC2TCWXK.mjs";
+export {
+  Button,
+  ButtonGroup,
+  IconButton,
+  LoadingButton
+};
+//# sourceMappingURL=buttons.mjs.map

package/dist/buttons.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/carousel.d.mts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, Key } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { EmblaOptionsType } from 'embla-carousel';
+
+interface CarouselProps<T> {
+    /** Slide data. Each entry is passed to `renderSlide`. */
+    slides: T[];
+    /** Render function for an individual slide. */
+    renderSlide: (item: T, index: number) => ReactNode;
+    /**
+     * Stable per-slide React key. Always set this when `slides` can be reordered
+     * or filtered; otherwise React will reuse the wrong slide's internal state
+     * across renders. Defaults to the slide's array index when omitted.
+     */
+    getKey?: (item: T, index: number) => Key;
+    /** Slides visible in the viewport. @default 1 */
+    slidesPerView?: number;
+    /** Auto-advance every `autoplayDelayMs` while not hovered. @default true */
+    autoplay?: boolean;
+    /** Autoplay tick in milliseconds. @default 5000 */
+    autoplayDelayMs?: number;
+    /** Show dot indicators when more than one slide. @default true */
+    showDots?: boolean;
+    /** Show the `01 / 03`-style counter when more than one slide. @default true */
+    showCounter?: boolean;
+    /** Show prev/next chevrons when more than one slide. @default true */
+    showArrows?: boolean;
+    /** Pause autoplay while the pointer is over the carousel. @default true */
+    pauseOnHover?: boolean;
+    /** Accessible label for the surrounding region. */
+    ariaLabel?: string;
+    /** Fires with the new index whenever embla selects a slide. */
+    onSelect?: (index: number) => void;
+    /** Override the IconButton sx for the prev/next arrows. */
+    arrowSx?: SxProps<Theme>;
+    /** Override the dot color (inactive). Accepts any CSS color string. */
+    dotColor?: string;
+    /** Override the active dot color. Accepts any CSS color string. */
+    dotActiveColor?: string;
+    /** Escape hatch for advanced embla options. Most consumers don't need this. */
+    emblaOptions?: EmblaOptionsType;
+}
+/**
+ * Carousel — embla-carousel-based slide deck with autoplay, dots, counter,
+ * prev/next arrows and pause-on-hover. Generic over slide payload type; the
+ * caller decides the slide markup via `renderSlide`.
+ */
+declare function Carousel<T>({ slides, renderSlide, getKey, slidesPerView, autoplay, autoplayDelayMs, showDots, showCounter, showArrows, pauseOnHover, ariaLabel, onSelect, arrowSx, dotColor, dotActiveColor, emblaOptions, }: CarouselProps<T>): react_jsx_runtime.JSX.Element | null;
+
+export { Carousel, type CarouselProps };

package/dist/carousel.d.ts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode, Key } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { EmblaOptionsType } from 'embla-carousel';
+
+interface CarouselProps<T> {
+    /** Slide data. Each entry is passed to `renderSlide`. */
+    slides: T[];
+    /** Render function for an individual slide. */
+    renderSlide: (item: T, index: number) => ReactNode;
+    /**
+     * Stable per-slide React key. Always set this when `slides` can be reordered
+     * or filtered; otherwise React will reuse the wrong slide's internal state
+     * across renders. Defaults to the slide's array index when omitted.
+     */
+    getKey?: (item: T, index: number) => Key;
+    /** Slides visible in the viewport. @default 1 */
+    slidesPerView?: number;
+    /** Auto-advance every `autoplayDelayMs` while not hovered. @default true */
+    autoplay?: boolean;
+    /** Autoplay tick in milliseconds. @default 5000 */
+    autoplayDelayMs?: number;
+    /** Show dot indicators when more than one slide. @default true */
+    showDots?: boolean;
+    /** Show the `01 / 03`-style counter when more than one slide. @default true */
+    showCounter?: boolean;
+    /** Show prev/next chevrons when more than one slide. @default true */
+    showArrows?: boolean;
+    /** Pause autoplay while the pointer is over the carousel. @default true */
+    pauseOnHover?: boolean;
+    /** Accessible label for the surrounding region. */
+    ariaLabel?: string;
+    /** Fires with the new index whenever embla selects a slide. */
+    onSelect?: (index: number) => void;
+    /** Override the IconButton sx for the prev/next arrows. */
+    arrowSx?: SxProps<Theme>;
+    /** Override the dot color (inactive). Accepts any CSS color string. */
+    dotColor?: string;
+    /** Override the active dot color. Accepts any CSS color string. */
+    dotActiveColor?: string;
+    /** Escape hatch for advanced embla options. Most consumers don't need this. */
+    emblaOptions?: EmblaOptionsType;
+}
+/**
+ * Carousel — embla-carousel-based slide deck with autoplay, dots, counter,
+ * prev/next arrows and pause-on-hover. Generic over slide payload type; the
+ * caller decides the slide markup via `renderSlide`.
+ */
+declare function Carousel<T>({ slides, renderSlide, getKey, slidesPerView, autoplay, autoplayDelayMs, showDots, showCounter, showArrows, pauseOnHover, ariaLabel, onSelect, arrowSx, dotColor, dotActiveColor, emblaOptions, }: CarouselProps<T>): react_jsx_runtime.JSX.Element | null;
+
+export { Carousel, type CarouselProps };

package/dist/carousel.js

@@ -0,0 +1,185 @@
+"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; }// src/components/layout/Carousel.tsx
+var _react = require('react');
+var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
+var _IconButton = require('@mui/material/IconButton'); var _IconButton2 = _interopRequireDefault(_IconButton);
+var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
+var _ChevronLeft = require('@mui/icons-material/ChevronLeft'); var _ChevronLeft2 = _interopRequireDefault(_ChevronLeft);
+var _ChevronRight = require('@mui/icons-material/ChevronRight'); var _ChevronRight2 = _interopRequireDefault(_ChevronRight);
+var _styles = require('@mui/material/styles');
+var _emblacarouselreact = require('embla-carousel-react'); var _emblacarouselreact2 = _interopRequireDefault(_emblacarouselreact);
+var _emblacarouselautoplay = require('embla-carousel-autoplay'); var _emblacarouselautoplay2 = _interopRequireDefault(_emblacarouselautoplay);
+var _jsxruntime = require('react/jsx-runtime');
+var pad2 = (n) => String(n).padStart(2, "0");
+function Carousel({
+  slides,
+  renderSlide,
+  getKey,
+  slidesPerView = 1,
+  autoplay = true,
+  autoplayDelayMs = 5e3,
+  showDots = true,
+  showCounter = true,
+  showArrows = true,
+  pauseOnHover = true,
+  ariaLabel,
+  onSelect,
+  arrowSx,
+  dotColor,
+  dotActiveColor,
+  emblaOptions
+}) {
+  const plugins = _react.useMemo.call(void 0, 
+    () => autoplay ? [
+      _emblacarouselautoplay2.default.call(void 0, {
+        delay: autoplayDelayMs,
+        stopOnInteraction: true,
+        stopOnMouseEnter: pauseOnHover
+      })
+    ] : [],
+    [autoplay, autoplayDelayMs, pauseOnHover]
+  );
+  const [emblaRef, emblaApi] = _emblacarouselreact2.default.call(void 0, 
+    { loop: true, align: "start", ...emblaOptions },
+    plugins
+  );
+  const [selected, setSelected] = _react.useState.call(void 0, 0);
+  const [snapCount, setSnapCount] = _react.useState.call(void 0, 0);
+  const count = slides.length;
+  _react.useEffect.call(void 0, () => {
+    if (!emblaApi) return;
+    const refreshSnaps = () => {
+      setSnapCount(emblaApi.scrollSnapList().length);
+    };
+    const handleSelect = () => {
+      const next = emblaApi.selectedScrollSnap();
+      setSelected(next);
+      _optionalChain([onSelect, 'optionalCall', _2 => _2(next)]);
+    };
+    emblaApi.on("select", handleSelect);
+    emblaApi.on("reInit", refreshSnaps);
+    refreshSnaps();
+    handleSelect();
+    return () => {
+      emblaApi.off("select", handleSelect);
+      emblaApi.off("reInit", refreshSnaps);
+    };
+  }, [emblaApi, onSelect]);
+  if (count === 0) return null;
+  const showControls = count > 1;
+  const slideBasis = `${100 / Math.max(1, slidesPerView)}%`;
+  const dotCount = snapCount > 0 ? snapCount : count;
+  const arrowBaseSx = {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    bgcolor: "background.paper",
+    boxShadow: 1,
+    "&:hover": { bgcolor: "background.paper" }
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    _Box2.default,
+    {
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": ariaLabel,
+      sx: { position: "relative", width: "100%" },
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { ref: emblaRef, sx: { overflow: "hidden" }, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Box2.default, { sx: { display: "flex" }, children: slides.map((item, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _Box2.default,
+          {
+            role: "group",
+            "aria-roledescription": "slide",
+            "aria-label": `${i + 1} of ${count}`,
+            sx: { flex: `0 0 ${slideBasis}`, minWidth: 0 },
+            children: renderSlide(item, i)
+          },
+          getKey ? getKey(item, i) : i
+        )) }) }),
+        showControls && showArrows && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _IconButton2.default,
+            {
+              "aria-label": "Previous slide",
+              onClick: () => _optionalChain([emblaApi, 'optionalAccess', _3 => _3.scrollPrev, 'call', _4 => _4()]),
+              sx: [arrowBaseSx, { left: 8 }, ...Array.isArray(arrowSx) ? arrowSx : [arrowSx]],
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ChevronLeft2.default, {})
+            }
+          ),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _IconButton2.default,
+            {
+              "aria-label": "Next slide",
+              onClick: () => _optionalChain([emblaApi, 'optionalAccess', _5 => _5.scrollNext, 'call', _6 => _6()]),
+              sx: [arrowBaseSx, { right: 8 }, ...Array.isArray(arrowSx) ? arrowSx : [arrowSx]],
+              children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _ChevronRight2.default, {})
+            }
+          )
+        ] }),
+        showControls && showCounter && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+          _Typography2.default,
+          {
+            variant: "caption",
+            sx: (theme) => ({
+              position: "absolute",
+              top: 12,
+              right: 16,
+              px: 1,
+              py: 0.25,
+              borderRadius: 1,
+              bgcolor: _styles.alpha.call(void 0, theme.palette.common.black, 0.5),
+              color: "common.white",
+              letterSpacing: 1
+            }),
+            children: [
+              pad2(selected + 1),
+              " / ",
+              pad2(dotCount)
+            ]
+          }
+        ),
+        showControls && showDots && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _Box2.default,
+          {
+            role: "tablist",
+            "aria-label": "Carousel slides",
+            sx: {
+              position: "absolute",
+              bottom: 12,
+              left: 0,
+              right: 0,
+              display: "flex",
+              justifyContent: "center",
+              gap: 1
+            },
+            children: Array.from({ length: dotCount }).map((_, i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              _Box2.default,
+              {
+                component: "button",
+                role: "tab",
+                "aria-selected": i === selected,
+                "aria-label": `Go to slide ${i + 1}`,
+                type: "button",
+                onClick: () => _optionalChain([emblaApi, 'optionalAccess', _7 => _7.scrollTo, 'call', _8 => _8(i)]),
+                sx: (theme) => ({
+                  width: i === selected ? 24 : 8,
+                  height: 8,
+                  borderRadius: 4,
+                  border: "none",
+                  padding: 0,
+                  cursor: "pointer",
+                  bgcolor: i === selected ? _nullishCoalesce(dotActiveColor, () => ( theme.palette.primary.main)) : _nullishCoalesce(dotColor, () => ( theme.palette.action.disabled)),
+                  transition: "width 0.2s ease, background 0.2s ease"
+                })
+              },
+              i
+            ))
+          }
+        )
+      ]
+    }
+  );
+}
+
+
+exports.Carousel = Carousel;
+//# sourceMappingURL=carousel.js.map