@12-apps/ui 6.54.1 → 6.56.0

package/dist/chunk-7AAJYWC3.js

@@ -0,0 +1,113 @@
+import {
+  Box,
+  CONTROL_RESET,
+  NOT_LIVE,
+  SlotIcon,
+  focusRing
+} from "./chunk-IK2ZVV3M.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/navigation/SectionNav/SectionNav.primary.tsx
+import Typography from "@mui/material/Typography/index.js";
+import { useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function RaisedActionButton({
+  label,
+  icon,
+  onClick,
+  open,
+  closeLabel,
+  captioned = false,
+  disabled = false,
+  loading = false,
+  dataTestId = "raised-action"
+}) {
+  const theme = useTheme();
+  const expanded = open === true;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        flex: "none",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        px: 0.5
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "button",
+            type: "button",
+            ...raisedState({ onClick, disabled, loading }),
+            "aria-label": expanded && closeLabel ? closeLabel : label,
+            "aria-expanded": open,
+            "data-testid": dataTestId,
+            sx: raisedSx(theme, expanded),
+            children: /* @__PURE__ */ jsx(SlotIcon, { icon, loading })
+          }
+        ),
+        captioned ? /* @__PURE__ */ jsx(RaisedCaption, { label, inert: disabled || loading }) : null
+      ]
+    }
+  );
+}
+function raisedState({
+  onClick,
+  disabled,
+  loading
+}) {
+  const busy = loading && !disabled;
+  return {
+    onClick: busy ? void 0 : onClick,
+    disabled,
+    "aria-disabled": busy ? "true" : void 0,
+    "aria-busy": loading || void 0
+  };
+}
+function RaisedCaption({ label, inert }) {
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      component: "span",
+      variant: "caption",
+      "aria-hidden": true,
+      sx: { lineHeight: 1.3, mt: 0.25, whiteSpace: "nowrap", color: inert ? "text.disabled" : "text.primary" },
+      children: label
+    }
+  );
+}
+function raisedSx(theme, expanded) {
+  const size = rem(theme, 52);
+  return {
+    ...CONTROL_RESET,
+    ...focusRing(theme),
+    width: size,
+    height: size,
+    // Lifted half out of the bar: the one control that is not a place.
+    marginTop: rem(theme, -18),
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    bgcolor: "primary.main",
+    color: "primary.contrastText",
+    boxShadow: theme.shadows[6],
+    [NOT_LIVE]: { cursor: "default", bgcolor: "action.disabledBackground", color: "text.disabled", boxShadow: "none" },
+    "& svg": {
+      fontSize: rem(theme, 26),
+      transition: theme.transitions.create("transform", { duration: theme.transitions.duration.shorter }),
+      transform: expanded ? "rotate(45deg)" : "none"
+    },
+    "@media (prefers-reduced-motion: reduce)": { "& svg": { transition: "none" } }
+  };
+}
+
+export {
+  RaisedActionButton
+};
+//# sourceMappingURL=chunk-7AAJYWC3.js.map

package/dist/chunk-7GMVDCIR.js

@@ -0,0 +1,237 @@
+import {
+  glowAnimation,
+  gradientShiftAnimation,
+  pulseAnimation
+} from "./chunk-6LOGBWLG.js";
+import {
+  absoluteInk,
+  controlNeutral,
+  onMedia,
+  sheen
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/form/Slider/Slider.styles.ts
+import { alpha } from "@mui/material/styles/index.js";
+var neutralPalette = (theme) => controlNeutral(theme);
+var namedPalette = (theme, color) => {
+  const colorMap = {
+    primary: theme.palette.primary,
+    secondary: theme.palette.secondary,
+    success: theme.palette.success,
+    warning: theme.palette.warning,
+    info: theme.palette.info,
+    danger: theme.palette.error
+  };
+  return colorMap[color] || theme.palette.primary;
+};
+var getColorFromTheme = (theme, color) => {
+  if (color === "neutral") {
+    return neutralPalette(theme);
+  }
+  const palette = namedPalette(theme, color);
+  const { primary } = theme.palette;
+  return {
+    main: palette.main || primary.main,
+    dark: palette.dark || palette.main || primary.dark,
+    light: palette.light || palette.main || primary.light,
+    contrastText: palette.contrastText || absoluteInk(theme).white
+  };
+};
+var SIZES = {
+  xs: { heightPx: 4, thumbSizePx: 16, markHeightPx: 8 },
+  sm: { heightPx: 6, thumbSizePx: 18, markHeightPx: 10 },
+  md: { heightPx: 8, thumbSizePx: 20, markHeightPx: 12 },
+  lg: { heightPx: 10, thumbSizePx: 24, markHeightPx: 14 },
+  xl: { heightPx: 12, thumbSizePx: 28, markHeightPx: 16 }
+};
+var LABEL_SCALE = {
+  xs: { fontPx: 10, boxPx: 28, markFont: 10.4 },
+  sm: { fontPx: 11, boxPx: 30, markFont: 11.2 }
+};
+var LABEL_DEFAULT = { fontPx: 12, boxPx: 32, markFont: 12 };
+var trackPart = ({ theme, flags, palette, geometry }) => {
+  const { gradient, glow, glass, customVariant } = flags;
+  const isGradientVariant = customVariant === "gradient";
+  return {
+    border: "none",
+    height: rem(theme, geometry.heightPx),
+    borderRadius: rem(theme, geometry.heightPx / 2),
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    position: "relative",
+    overflow: "hidden",
+    ...gradient && {
+      background: isGradientVariant ? `linear-gradient(90deg,
+              ${palette.light} 0%,
+              ${palette.main} 50%,
+              ${palette.dark} 100%)` : `linear-gradient(90deg, ${palette.light}, ${palette.main})`,
+      backgroundSize: "200% 100%",
+      animation: isGradientVariant ? `${gradientShiftAnimation} 3s ease infinite` : "none",
+      // A sheen that travels the filled portion while the gradient shifts.
+      "&::after": {
+        content: '""',
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: `linear-gradient(90deg, transparent, ${sheen(theme, 0.2)}, transparent)`,
+        animation: `${gradientShiftAnimation} 2s linear infinite`
+      }
+    },
+    ...glow && {
+      animation: `${glowAnimation(theme)} 2s ease-in-out infinite`,
+      boxShadow: `0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.6)}, inset 0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.2)}`
+    },
+    ...glass && {
+      backgroundColor: alpha(palette.main, 0.8),
+      backdropFilter: `blur(${rem(theme, 10)})`,
+      border: `1px solid ${alpha(palette.light || palette.main, 0.3)}`
+    }
+  };
+};
+var railPart = ({ theme, flags, geometry }) => ({
+  color: alpha(theme.palette.action.disabled, 0.3),
+  opacity: 1,
+  height: rem(theme, geometry.heightPx),
+  borderRadius: rem(theme, geometry.heightPx / 2),
+  transition: "all 0.3s ease",
+  ...flags.glass && {
+    backgroundColor: alpha(theme.palette.background.paper, 0.1),
+    backdropFilter: `blur(${rem(theme, 20)})`,
+    border: `1px solid ${alpha(theme.palette.divider, 0.2)}`
+  },
+  ...flags.customVariant === "gradient" && {
+    background: `linear-gradient(90deg,
+          ${alpha(theme.palette.action.disabled, 0.2)},
+          ${alpha(theme.palette.action.disabled, 0.3)},
+          ${alpha(theme.palette.action.disabled, 0.2)})`
+  }
+});
+var thumbPart = ({ theme, flags, palette, geometry }) => {
+  const { gradient, glow, glass } = flags;
+  return {
+    height: rem(theme, geometry.thumbSizePx),
+    width: rem(theme, geometry.thumbSizePx),
+    backgroundColor: gradient ? palette.main : absoluteInk(theme).white,
+    border: `${rem(theme, 2)} solid ${palette.main}`,
+    boxShadow: `${theme.shadows[2]}, 0 0 0 0 ${alpha(palette.main, 0.2)}`,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    position: "relative",
+    // Sits invisible until focus or hover runs the pulse keyframes over it.
+    "&::before": {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)",
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      backgroundColor: palette.main,
+      opacity: 0
+    },
+    "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
+      boxShadow: glow ? `${theme.shadows[4]}, 0 0 ${rem(theme, 20)} ${alpha(palette.main, 0.6)}, 0 0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.15)}` : `${theme.shadows[4]}, 0 0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.15)}`,
+      transform: "scale(1.15)",
+      "&::before": { animation: `${pulseAnimation} 0.6s ease-out` }
+    },
+    "&:active": { transform: "scale(1.05)" },
+    ...glass && {
+      backgroundColor: alpha(theme.palette.background.paper, 0.9),
+      backdropFilter: `blur(${rem(theme, 10)})`,
+      border: `${rem(theme, 2)} solid ${alpha(palette.main, 0.8)}`
+    },
+    ...gradient && {
+      background: `linear-gradient(135deg, ${palette.light}, ${palette.main})`,
+      border: "none",
+      color: onMedia(theme)
+    }
+  };
+};
+var bubbleBackground = (palette, gradient, glass) => {
+  if (gradient) return "transparent";
+  return glass ? alpha(palette.main, 0.9) : palette.main;
+};
+var bubbleTransformFor = (gradient) => {
+  const base = gradient ? "translate(50%, -150%)" : "translate(50%, -100%) rotate(-45deg)";
+  return { hidden: `${base} scale(0)`, shown: `${base} scale(1)` };
+};
+var valueLabelPart = ({ theme, flags, palette }) => {
+  const { gradient, glass, customSize } = flags;
+  const scale = LABEL_SCALE[customSize ?? ""] ?? LABEL_DEFAULT;
+  const bubbleTransform = bubbleTransformFor(Boolean(gradient));
+  return {
+    lineHeight: 1.2,
+    fontSize: rem(theme, scale.fontPx),
+    padding: 0,
+    width: rem(theme, scale.boxPx),
+    height: rem(theme, scale.boxPx),
+    borderRadius: gradient ? rem(theme, 8) : "50% 50% 50% 0",
+    backgroundColor: bubbleBackground(palette, Boolean(gradient), Boolean(glass)),
+    background: gradient ? `linear-gradient(135deg, ${palette.light}, ${palette.main})` : "unset",
+    backdropFilter: glass ? `blur(${rem(theme, 10)})` : "none",
+    transformOrigin: "bottom left",
+    transform: bubbleTransform.hidden,
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+    boxShadow: `${theme.shadows[2]}, 0 0 ${rem(theme, 10)} ${alpha(palette.main, 0.2)}`,
+    "&:before": { display: "none" },
+    "&.MuiSlider-valueLabelOpen": { transform: bubbleTransform.shown },
+    "& > *": { transform: gradient ? "none" : "rotate(45deg)", fontWeight: 600 }
+  };
+};
+var markPart = ({ theme, flags, palette, geometry }) => {
+  const { gradient, glow, customVariant } = flags;
+  const isMarksVariant = customVariant === "marks";
+  const { markHeightPx, heightPx } = geometry;
+  return {
+    backgroundColor: alpha(theme.palette.action.disabled, 0.5),
+    height: rem(theme, markHeightPx),
+    width: rem(theme, isMarksVariant ? 3 : 2),
+    // Centred on the rail rather than hanging below it.
+    marginTop: rem(theme, -(markHeightPx - heightPx) / 2),
+    borderRadius: rem(theme, 1),
+    transition: "all 0.3s ease",
+    "&.MuiSlider-markActive": {
+      backgroundColor: gradient ? palette.light : palette.main,
+      width: rem(theme, isMarksVariant ? 4 : 2),
+      height: rem(theme, markHeightPx + 2),
+      marginTop: rem(theme, -(markHeightPx + 2 - heightPx) / 2),
+      ...glow && { boxShadow: `0 0 ${rem(theme, 8)} ${alpha(palette.main, 0.5)}` }
+    }
+  };
+};
+var markLabelPart = ({ theme, flags, palette }) => ({
+  fontSize: rem(theme, (LABEL_SCALE[flags.customSize ?? ""] ?? LABEL_DEFAULT).markFont),
+  color: theme.palette.text.secondary,
+  marginTop: theme.spacing(1.5),
+  fontWeight: 500,
+  transition: "all 0.3s ease",
+  "&.MuiSlider-markLabelActive": {
+    color: palette.main,
+    fontWeight: 600,
+    transform: "scale(1.05)"
+  }
+});
+var sliderSx = (theme, flags) => {
+  const palette = getColorFromTheme(theme, flags.customColor ?? "primary");
+  const geometry = SIZES[flags.customSize] ?? SIZES.md;
+  const input = { theme, flags, palette, geometry };
+  return {
+    color: palette.main,
+    height: rem(theme, geometry.heightPx),
+    "& .MuiSlider-track": trackPart(input),
+    "& .MuiSlider-rail": railPart(input),
+    "& .MuiSlider-thumb": thumbPart(input),
+    "& .MuiSlider-valueLabel": valueLabelPart(input),
+    "& .MuiSlider-mark": markPart(input),
+    "& .MuiSlider-markLabel": markLabelPart(input)
+  };
+};
+
+export {
+  sliderSx
+};
+//# sourceMappingURL=chunk-7GMVDCIR.js.map

package/dist/chunk-7GWRSYUS.js

@@ -0,0 +1,328 @@
+import {
+  withDefaults
+} from "./chunk-HPK33ACY.js";
+import {
+  accentFor
+} from "./chunk-B7ZHEOQQ.js";
+import {
+  muiSize
+} from "./chunk-7ZPUN7TV.js";
+import {
+  neutralTones
+} from "./chunk-SSX5ITPM.js";
+import {
+  rem
+} from "./chunk-YKCAJ2TN.js";
+
+// src/components/data-display/Carousel/Carousel.parts.tsx
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import Box from "@mui/material/Box/index.js";
+import IconButton from "@mui/material/IconButton/index.js";
+import Typography from "@mui/material/Typography/index.js";
+import { alpha, useTheme } from "@mui/material/styles/index.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var activateOnKey = (onSelect) => (e) => {
+  if (e.key === "Enter" || e.key === " ") {
+    e.preventDefault();
+    onSelect();
+  }
+};
+var INDICATOR_POSITIONS = (theme) => ({
+  top: { top: theme.spacing(2), left: "50%", transform: "translateX(-50%)" },
+  bottom: { bottom: theme.spacing(2), left: "50%", transform: "translateX(-50%)" },
+  left: {
+    left: theme.spacing(2),
+    top: "50%",
+    transform: "translateY(-50%)",
+    flexDirection: "column"
+  },
+  right: {
+    right: theme.spacing(2),
+    top: "50%",
+    transform: "translateY(-50%)",
+    flexDirection: "column"
+  }
+});
+var indicatorAttrs = (index, isActive) => ({
+  "aria-label": `Go to slide ${index + 1}`,
+  "data-testid": `carousel-indicator-${index}`,
+  "data-active": isActive
+});
+var LineIndicator = ({ index, isActive, color, onSelect }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "button",
+      tabIndex: 0,
+      ...indicatorAttrs(index, isActive),
+      sx: {
+        width: rem(theme, isActive ? 30 : 20),
+        height: rem(theme, 3),
+        backgroundColor: isActive ? accentFor(theme, color).main : alpha(accentFor(theme, color).main, 0.3),
+        borderRadius: 1.5,
+        transition: theme.transitions.create(["width", "background-color"]),
+        cursor: "pointer"
+      },
+      onClick: onSelect,
+      onKeyDown: activateOnKey(onSelect)
+    }
+  );
+};
+var NumberIndicator = ({ index, isActive, color, onSelect }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      role: "button",
+      tabIndex: 0,
+      ...indicatorAttrs(index, isActive),
+      sx: {
+        width: rem(theme, 24),
+        height: rem(theme, 24),
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "50%",
+        backgroundColor: isActive ? accentFor(theme, color).main : "transparent",
+        color: isActive ? accentFor(theme, color).contrastText : accentFor(theme, color).main,
+        border: `1px solid ${accentFor(theme, color).main}`,
+        fontSize: rem(theme, 12),
+        fontWeight: isActive ? "bold" : "normal",
+        cursor: "pointer",
+        transition: theme.transitions.create(["all"])
+      },
+      onClick: onSelect,
+      onKeyDown: activateOnKey(onSelect),
+      children: index + 1
+    }
+  );
+};
+var DotIndicator = ({ index, isActive, color, onSelect }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size: "small",
+      ...indicatorAttrs(index, isActive),
+      onClick: onSelect,
+      sx: {
+        p: 0.5,
+        color: isActive ? accentFor(theme, color).main : alpha(accentFor(theme, color).main, 0.3),
+        transform: isActive ? "scale(1.2)" : "scale(1)",
+        transition: theme.transitions.create(["transform", "color"])
+      },
+      children: /* @__PURE__ */ jsx(FiberManualRecordIcon, { fontSize: "small" })
+    }
+  );
+};
+var INDICATORS = {
+  lines: LineIndicator,
+  numbers: NumberIndicator,
+  dots: DotIndicator
+};
+var INDICATORS_DEFAULTS = {
+  position: "bottom",
+  color: "primary",
+  variant: "dots"
+};
+var CarouselIndicators = (props) => {
+  const { count, activeIndex, onSelect, position, color, variant, className, style } = withDefaults(
+    props,
+    INDICATORS_DEFAULTS
+  );
+  const theme = useTheme();
+  const Indicator = INDICATORS[variant] ?? DotIndicator;
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": "carousel-indicators",
+      sx: {
+        position: "absolute",
+        display: "flex",
+        gap: 1,
+        zIndex: 2,
+        ...INDICATOR_POSITIONS(theme)[position] ?? INDICATOR_POSITIONS(theme).bottom,
+        ...style
+      },
+      children: Array.from({ length: count }).map((_, index) => /* @__PURE__ */ jsx(
+        Indicator,
+        {
+          index,
+          isActive: index === activeIndex,
+          color,
+          onSelect: () => onSelect(index)
+        },
+        index
+      ))
+    }
+  );
+};
+var ARROWS_DEFAULTS = {
+  position: "overlay",
+  disabled: false,
+  disablePrev: false,
+  disableNext: false,
+  color: "primary",
+  size: "md"
+};
+var arrowSx = (theme, color, isOverlay) => ({
+  position: "absolute",
+  top: "50%",
+  transform: "translateY(-50%)",
+  zIndex: 3,
+  backgroundColor: alpha(theme.palette.background.paper, 0.8),
+  color: accentFor(theme, color).main,
+  "&:disabled": { opacity: 0.3 },
+  ...isOverlay ? {
+    opacity: 0.7,
+    "&:hover": { backgroundColor: theme.palette.background.paper, opacity: 1 }
+  } : { "&:hover": { backgroundColor: theme.palette.background.paper } }
+});
+var CarouselArrows = (props) => {
+  const {
+    copy,
+    onPrev,
+    onNext,
+    position,
+    disabled,
+    disablePrev,
+    disableNext,
+    color,
+    size,
+    className,
+    style
+  } = withDefaults(props, ARROWS_DEFAULTS);
+  const theme = useTheme();
+  const sx = arrowSx(theme, color, position === "overlay");
+  const offset = rem(theme, position === "outside" ? -40 : 8);
+  return /* @__PURE__ */ jsxs(Box, { "data-testid": "carousel-navigation", children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onPrev,
+        disabled: disabled || disablePrev,
+        size: muiSize(size),
+        className,
+        "aria-label": copy.previous,
+        "data-testid": "carousel-prev-button",
+        sx: { ...sx, left: offset, ...style },
+        children: /* @__PURE__ */ jsx(ArrowBackIosIcon, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: onNext,
+        disabled: disabled || disableNext,
+        "aria-label": copy.next,
+        size: muiSize(size),
+        className,
+        "data-testid": "carousel-next-button",
+        sx: { ...sx, right: offset, ...style },
+        children: /* @__PURE__ */ jsx(ArrowForwardIosIcon, {})
+      }
+    )
+  ] });
+};
+var THUMBNAIL_SIZES = { xs: 40, sm: 60, md: 80, lg: 100, xl: 120 };
+var thumbnailSidePx = (size) => THUMBNAIL_SIZES[size] ?? 60;
+var Thumbnail = ({ item, index, isActive, side, onSelect }) => {
+  const theme = useTheme();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      onClick: onSelect,
+      "data-testid": `carousel-thumbnail-${index}`,
+      "data-active": isActive,
+      sx: {
+        width: rem(theme, side),
+        height: rem(theme, side),
+        border: `${rem(theme, 2)} solid ${isActive ? theme.palette.primary.main : "transparent"}`,
+        borderRadius: 1,
+        overflow: "hidden",
+        cursor: "pointer",
+        opacity: isActive ? 1 : 0.6,
+        transition: theme.transitions.create(["opacity", "border-color"]),
+        "&:hover": { opacity: 1 }
+      },
+      children: item.image ? /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "img",
+          src: item.image,
+          alt: item.alt || item.title,
+          sx: { width: "100%", height: "100%", objectFit: "cover" }
+        }
+      ) : (
+        // No image to show, so the slide's number stands in for it.
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              width: "100%",
+              height: "100%",
+              backgroundColor: neutralTones(theme).track,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center"
+            },
+            children: /* @__PURE__ */ jsx(Typography, { variant: "caption", children: index + 1 })
+          }
+        )
+      )
+    }
+  );
+};
+var CarouselThumbnails = ({
+  items,
+  activeIndex,
+  onSelect,
+  size = "sm",
+  className,
+  style
+}) => {
+  const theme = useTheme();
+  const side = thumbnailSidePx(size);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className,
+      "data-testid": "carousel-thumbnails",
+      sx: {
+        position: "absolute",
+        // Hung below the frame, clear of its own height plus a gap.
+        bottom: rem(theme, -side - 16),
+        left: "50%",
+        transform: "translateX(-50%)",
+        display: "flex",
+        gap: 1,
+        p: 1,
+        backgroundColor: alpha(theme.palette.background.paper, 0.9),
+        borderRadius: 1,
+        ...style
+      },
+      children: items.map((item, index) => /* @__PURE__ */ jsx(
+        Thumbnail,
+        {
+          item,
+          index,
+          isActive: index === activeIndex,
+          side,
+          onSelect: () => onSelect(index)
+        },
+        item.id
+      ))
+    }
+  );
+};
+
+export {
+  CarouselIndicators,
+  CarouselArrows,
+  CarouselThumbnails
+};
+//# sourceMappingURL=chunk-7GWRSYUS.js.map