@cere/cere-design-system 0.0.45 → 0.1.0

package/dist/WorkflowNode-BnxXO6t_.d.mts

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import { PaperProps } from '@mui/material/Paper';
+
+/** All supported workflow node types */
+type WorkflowNodeType = 'start' | 'input' | 'stream' | 'rafts' | 'cubbies' | 'events' | 'trigger' | 'action' | 'aiModel' | 'aiAgent' | 'condition' | 'output' | 'end' | 'parallel' | 'merge';
+interface WorkflowNodeProps extends Omit<PaperProps, 'title'> {
+    /** The workflow node type — drives accent color, default icon, and badge label */
+    nodeType: WorkflowNodeType;
+    /** Primary title displayed in the node */
+    title: string;
+    /** Optional description text below the title */
+    description?: string;
+    /** Override the default icon for this node type */
+    icon?: React__default.ReactNode;
+    /** Override the default badge label for this node type */
+    badgeLabel?: string;
+    /** Whether the node is currently selected (highlights border with accent color) */
+    selected?: boolean;
+    /** Optional className */
+    className?: string;
+    /** Renders left/right connector dots to match the design spec */
+    showSideDots?: boolean;
+}
+/** Human-readable labels for each node type (matches Figma badge text) */
+declare const WORKFLOW_NODE_LABELS: Record<WorkflowNodeType, string>;
+/** Shared elevation shadow for workflow node cards and connector handles (Figma 277-8244) */
+declare const WORKFLOW_NODE_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1)";
+/**
+ * WorkflowNode — visual card for a workflow editor node.
+ *
+ * Renders a card with a colored left border strip, title, optional description,
+ * and a type badge/chip. Designed to integrate with FlowEditor (ReactFlow)
+ * via the WorkflowNodeHandle wrapper.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowNode
+ *   nodeType="trigger"
+ *   title="HTTP Trigger"
+ *   description="Listens for incoming webhook calls"
+ * />
+ * ```
+ */
+declare const WorkflowNode: React__default.FC<WorkflowNodeProps>;
+
+export { WORKFLOW_NODE_LABELS as W, WORKFLOW_NODE_SHADOW as a, WorkflowNode as b, type WorkflowNodeProps as c, type WorkflowNodeType as d };

package/dist/WorkflowNode-BnxXO6t_.d.ts

@@ -0,0 +1,46 @@
+import React__default from 'react';
+import { PaperProps } from '@mui/material/Paper';
+
+/** All supported workflow node types */
+type WorkflowNodeType = 'start' | 'input' | 'stream' | 'rafts' | 'cubbies' | 'events' | 'trigger' | 'action' | 'aiModel' | 'aiAgent' | 'condition' | 'output' | 'end' | 'parallel' | 'merge';
+interface WorkflowNodeProps extends Omit<PaperProps, 'title'> {
+    /** The workflow node type — drives accent color, default icon, and badge label */
+    nodeType: WorkflowNodeType;
+    /** Primary title displayed in the node */
+    title: string;
+    /** Optional description text below the title */
+    description?: string;
+    /** Override the default icon for this node type */
+    icon?: React__default.ReactNode;
+    /** Override the default badge label for this node type */
+    badgeLabel?: string;
+    /** Whether the node is currently selected (highlights border with accent color) */
+    selected?: boolean;
+    /** Optional className */
+    className?: string;
+    /** Renders left/right connector dots to match the design spec */
+    showSideDots?: boolean;
+}
+/** Human-readable labels for each node type (matches Figma badge text) */
+declare const WORKFLOW_NODE_LABELS: Record<WorkflowNodeType, string>;
+/** Shared elevation shadow for workflow node cards and connector handles (Figma 277-8244) */
+declare const WORKFLOW_NODE_SHADOW = "0px 1px 3px rgba(0, 0, 0, 0.1), 0px 1px 2px rgba(0, 0, 0, 0.1)";
+/**
+ * WorkflowNode — visual card for a workflow editor node.
+ *
+ * Renders a card with a colored left border strip, title, optional description,
+ * and a type badge/chip. Designed to integrate with FlowEditor (ReactFlow)
+ * via the WorkflowNodeHandle wrapper.
+ *
+ * @example
+ * ```tsx
+ * <WorkflowNode
+ *   nodeType="trigger"
+ *   title="HTTP Trigger"
+ *   description="Listens for incoming webhook calls"
+ * />
+ * ```
+ */
+declare const WorkflowNode: React__default.FC<WorkflowNodeProps>;
+
+export { WORKFLOW_NODE_LABELS as W, WORKFLOW_NODE_SHADOW as a, WorkflowNode as b, type WorkflowNodeProps as c, type WorkflowNodeType as d };

package/dist/buttons.d.mts

@@ -0,0 +1,114 @@
+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';
+
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+type ButtonTone = 'default' | 'onGradient';
+interface ButtonProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
+    /**
+     * 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;
+    /**
+     * 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
+     */
+    endIcon?: React__default.ReactNode;
+}
+declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "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,114 @@
+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';
+
+type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
+type ButtonTone = 'default' | 'onGradient';
+interface ButtonProps extends Omit<ButtonProps$1, 'variant' | 'color'> {
+    /**
+     * 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;
+    /**
+     * 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
+     */
+    endIcon?: React__default.ReactNode;
+}
+declare const Button: React__default.ForwardRefExoticComponent<Omit<ButtonProps, "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 _chunkQYYQYZHVjs = require('./chunk-QYYQYZHV.js');
+
+
+var _chunkOWWDNDF4js = require('./chunk-OWWDNDF4.js');
+
+
+var _chunkMNM6HE72js = require('./chunk-MNM6HE72.js');
+require('./chunk-FN5YL4BK.js');
+require('./chunk-ZGCN5WCG.js');
+
+
+
+
+
+exports.Button = _chunkMNM6HE72js.Button; exports.ButtonGroup = _chunkQYYQYZHVjs.ButtonGroup; exports.IconButton = _chunkOWWDNDF4js.IconButton; exports.LoadingButton = _chunkQYYQYZHVjs.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-CWJ4OU6W.mjs";
+import {
+  IconButton
+} from "./chunk-5ASG6G6U.mjs";
+import {
+  Button
+} from "./chunk-FFZ5S7PQ.mjs";
+import "./chunk-ATIFLPH6.mjs";
+import "./chunk-PWF2NJDB.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