@kenpan/zds-r8f3v1 0.1.0

package/dist/components/carousel/Carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Carousel.js","sources":["../../../src/components/carousel/Carousel.tsx"],"sourcesContent":["import * as React from 'react'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport Typography from '@mui/material/Typography'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Button } from '../Button'\nimport { CarouselHeader, type CarouselHeaderProps } from './CarouselHeader'\nimport { Icon } from '../Icon'\nimport { Dot } from '../Dot'\n\nexport type CarouselSize = 'small' | 'medium'\n\nexport type CarouselIndicatorType = 'label' | 'line' | 'dot'\nexport type CarouselIndicatorPosition = 'center' | 'left' | 'right' | 'inset'\n\nexport type CarouselButtonPosition =\n  | 'center'\n  | 'bottom-center'\n  | 'bottom-left'\n  | 'bottom-right'\n  | 'top-right'\n  | 'inset-center'\n  | 'overlapping-center'\n\nexport type CarouselDataAttributes = Record<string, string | number | boolean>\n\nexport interface CarouselProps {\n  /** If false, hide arrow buttons (user can still use indicators if enabled). */\n  arrowButtonGroup?: boolean\n\n  /** Where arrow buttons should be placed relative to the carousel content. */\n  buttonPositions?: CarouselButtonPosition\n\n  /** If true, show numeric pagination text (e.g. 1/4). */\n  carouselCount?: boolean\n\n  /** If true, arrows never disable and wrap around. */\n  continuousLoop?: boolean\n\n  /** If true, show a frame/border container (used by some indicator layouts). */\n  framed?: boolean\n\n  /** If true, show the CarouselHeader. */\n  header?: boolean\n\n  /** If false, hide indicators (dots/line/label). */\n  indicatorGroup?: boolean\n\n  indicatorPosition?: CarouselIndicatorPosition\n  indicatorType?: CarouselIndicatorType\n\n  /** If true, disabled arrows are still rendered (otherwise hidden). */\n  showDisabledCarouselControls?: boolean\n\n  size?: CarouselSize\n\n  /** Number of items visible at a time. */\n  slidesToShow?: number\n\n  /** Smooth scroll between slides when navigating. */\n  transition?: boolean\n\n  /** If provided, auto-advance in given interval (ms). */\n  autoPlayInterval?: number\n\n  /** Provide custom data attributes. */\n  dataAttributes?: CarouselDataAttributes\n\n  /** Controlled active page index (0-based). */\n  activeIndex?: number\n\n  onNextBtnClick?: () => void\n  onPreviousBtnClick?: () => void\n\n  /** If false, hide arrow buttons inside header (only relevant when header=true). */\n  arrowGroupInHeader?: boolean\n\n  /** Header props (badge, dropdown, tooltip, etc). */\n  headerProps?: Omit<\n    CarouselHeaderProps,\n    | 'onNextBtnClick'\n    | 'onPreviousBtnClick'\n    | 'nextDisabled'\n    | 'previousDisabled'\n    | 'arrowGroupInHeader'\n    | 'size'\n    | 'carouselCount'\n    | 'activeIndex'\n    | 'total'\n    | 'showDisabledCarouselControls'\n    | 'mobileBreakpoint'\n    | 'mobileBreakpointContainerRef'\n  >\n\n  /** Mobile breakpoint handling */\n  mobileBreakpoint?: number | true\n  mobileBreakpointContainerRef?: React.RefObject<HTMLElement>\n\n  children: React.ReactNode\n}\n\nfunction chunkBy<T>(items: T[], size: number): T[][] {\n  if (size <= 0) return [items]\n  const out: T[][] = []\n  for (let i = 0; i < items.length; i += size)\n    out.push(items.slice(i, i + size))\n  return out\n}\n\nfunction useBreakpointWidth(\n  containerRef: React.RefObject<HTMLElement> | undefined,\n): number {\n  const [width, setWidth] = React.useState<number>(() => {\n    if (containerRef?.current)\n      return containerRef.current.getBoundingClientRect().width\n    return typeof window !== 'undefined' ? window.innerWidth : 0\n  })\n\n  React.useEffect(() => {\n    const el = containerRef?.current\n    if (el) {\n      const ro = new ResizeObserver(() => {\n        setWidth(el.getBoundingClientRect().width)\n      })\n      ro.observe(el)\n      return () => ro.disconnect()\n    }\n\n    const onResize = () => setWidth(window.innerWidth)\n    window.addEventListener('resize', onResize)\n    return () => window.removeEventListener('resize', onResize)\n  }, [containerRef])\n\n  return width\n}\n\nfunction CarouselIndicators({\n  type,\n  position,\n  framed,\n  count,\n  active,\n  onSelect,\n  showCount,\n  inFooter = false,\n}: {\n  type: CarouselIndicatorType\n  position: CarouselIndicatorPosition\n  framed: boolean\n  count: number\n  active: number\n  onSelect: (index: number) => void\n  showCount: boolean\n  inFooter?: boolean\n}) {\n  const theme = useTheme()\n  const focusRing = theme.focusRings?.primary?.[100] ?? '0 0 0 4px #D1E9FF'\n\n  const justifyContent =\n    position === 'left'\n      ? 'flex-start'\n      : position === 'right'\n        ? 'flex-end'\n        : 'center'\n\n  const containerSx =\n    position === 'inset'\n      ? ({\n          position: 'absolute',\n          left: 0,\n          right: 0,\n          bottom: 12,\n          display: 'flex',\n          justifyContent,\n          pointerEvents: 'none',\n        } as const)\n      : ({\n          display: 'flex',\n          justifyContent,\n          marginTop: inFooter ? 0 : '16px', // Storybook: indicators sit below content with spacing\n        } as const)\n\n  const innerSx = {\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: '12px',\n    padding: '8px', // Storybook: dot group container has 8px padding\n    pointerEvents: 'auto',\n    ...(framed && {\n      border: `1px solid ${theme.palette.gray?.[200] ?? '#D4DCE7'}`,\n      borderRadius: '999px',\n      padding: '8px 12px', // framed variant has extra horizontal padding\n      backgroundColor: theme.palette.common.white,\n      boxShadow: '0 1px 2px 0 rgba(18, 25, 38, 0.05)',\n    }),\n  } as const\n\n  if (count <= 1) {\n    return showCount ? (\n      <Box sx={containerSx as any}>\n        <Box sx={innerSx as any}>\n          <Typography\n            variant=\"text-sm-medium\"\n            sx={{ color: theme.palette.gray?.[600] ?? '#4B5565' }}\n          >\n            1/1\n          </Typography>\n        </Box>\n      </Box>\n    ) : null\n  }\n\n  if (type === 'label') {\n    return (\n      <Box sx={containerSx as any}>\n        <Box sx={innerSx as any}>\n          <Typography\n            variant=\"text-sm-medium\"\n            sx={{ color: theme.palette.gray?.[600] ?? '#4B5565' }}\n          >\n            {active + 1}/{count}\n          </Typography>\n        </Box>\n      </Box>\n    )\n  }\n\n  if (type === 'line') {\n    return (\n      <Box sx={containerSx as any}>\n        <Box sx={innerSx as any}>\n          {Array.from({ length: count }).map((_, idx) => {\n            const isActive = idx === active\n            return (\n              <Box\n                key={idx}\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => onSelect(idx)}\n                onKeyDown={(e) => {\n                  if (e.key === 'Enter' || e.key === ' ') {\n                    e.preventDefault()\n                    onSelect(idx)\n                  }\n                }}\n                sx={{\n                  width: 24,\n                  height: 4,\n                  borderRadius: 2,\n                  cursor: 'pointer',\n                  backgroundColor: isActive\n                    ? theme.palette.primary.main\n                    : theme.palette.gray?.[100] ?? '#EEF2F6',\n                  '&:hover': {\n                    backgroundColor: isActive\n                      ? theme.palette.primary.dark ?? theme.palette.primary.main\n                      : theme.palette.gray?.[300] ?? '#BBC6D3',\n                  },\n                  '&:focus-visible': {\n                    outline: 'none',\n                    boxShadow: focusRing,\n                  },\n                }}\n              />\n            )\n          })}\n          {showCount ? (\n            <Typography\n              variant=\"text-sm-medium\"\n              sx={{ color: theme.palette.gray?.[600] ?? '#4B5565', ml: 1 }}\n            >\n              {active + 1}/{count}\n            </Typography>\n          ) : null}\n        </Box>\n      </Box>\n    )\n  }\n\n  // dot - use Dot component\n  return (\n    <Box sx={containerSx as any}>\n      <Box sx={innerSx as any}>\n        {Array.from({ length: count }).map((_, idx) => {\n          const isActive = idx === active\n          return (\n            <Dot\n              key={idx}\n              size=\"sm\"\n              color={isActive ? 'primary' : 'action.disabledBackground'}\n              clickable\n              onClick={() => onSelect(idx)}\n              sx={{\n                '&:hover': {\n                  backgroundColor: isActive\n                    ? theme.palette.primary.dark ?? theme.palette.primary.main\n                    : theme.palette.gray?.[300] ?? '#BBC6D3',\n                },\n                '&:focus-visible': {\n                  outline: 'none',\n                  boxShadow: focusRing,\n                },\n              }}\n            />\n          )\n        })}\n        {showCount ? (\n          <Typography\n            variant=\"text-sm-medium\"\n            sx={{ color: theme.palette.gray?.[600] ?? '#4B5565', ml: 1 }}\n          >\n            {active + 1}/{count}\n          </Typography>\n        ) : null}\n      </Box>\n    </Box>\n  )\n}\n\nexport function Carousel({\n  arrowButtonGroup = true,\n  buttonPositions = 'center',\n  carouselCount = false,\n  continuousLoop = false,\n  framed = false,\n  header = false,\n  indicatorGroup = true,\n  indicatorPosition = 'center',\n  indicatorType = 'dot',\n  showDisabledCarouselControls = true,\n  size = 'small',\n  slidesToShow = 3,\n  transition = false,\n  autoPlayInterval,\n  dataAttributes,\n  activeIndex: controlledActiveIndex,\n  onNextBtnClick,\n  onPreviousBtnClick,\n  arrowGroupInHeader = true,\n  headerProps,\n  mobileBreakpoint,\n  mobileBreakpointContainerRef,\n  children,\n}: CarouselProps) {\n  const theme = useTheme()\n\n  const containerRef = React.useRef<HTMLDivElement | null>(null)\n\n  const width = useBreakpointWidth(mobileBreakpointContainerRef)\n  const breakpointPx =\n    typeof mobileBreakpoint === 'number'\n      ? mobileBreakpoint\n      : theme.breakpoints?.values?.sm ?? 600\n  const isMobile =\n    mobileBreakpoint === true\n      ? true\n      : mobileBreakpointContainerRef\n        ? width <= breakpointPx\n        : typeof window !== 'undefined'\n          ? window.innerWidth <= breakpointPx\n          : false\n\n  const items = React.useMemo(\n    () => React.Children.toArray(children),\n    [children],\n  )\n  const baseSlidesToShow = Math.max(1, Math.floor(slidesToShow))\n  const effectiveSlidesToShow = isMobile ? 1 : baseSlidesToShow\n  const pages = React.useMemo(\n    () => chunkBy(items, effectiveSlidesToShow),\n    [items, effectiveSlidesToShow],\n  )\n  const pageCount = Math.max(1, pages.length)\n\n  const [internalActiveIndex, setInternalActiveIndex] = React.useState(0)\n  const activeIndex = controlledActiveIndex ?? internalActiveIndex\n\n  const clampedActiveIndex = Math.min(Math.max(activeIndex, 0), pageCount - 1)\n\n  const setActiveIndex = React.useCallback(\n    (idx: number) => {\n      const next = Math.min(Math.max(idx, 0), pageCount - 1)\n      if (controlledActiveIndex === undefined) setInternalActiveIndex(next)\n    },\n    [controlledActiveIndex, pageCount],\n  )\n\n  const previousDisabled = !continuousLoop && clampedActiveIndex === 0\n  const nextDisabled = !continuousLoop && clampedActiveIndex === pageCount - 1\n\n  const handlePrevious = React.useCallback(() => {\n    onPreviousBtnClick?.()\n    if (previousDisabled && !continuousLoop) return\n    const next = continuousLoop\n      ? (clampedActiveIndex - 1 + pageCount) % pageCount\n      : clampedActiveIndex - 1\n    setActiveIndex(next)\n  }, [\n    clampedActiveIndex,\n    continuousLoop,\n    onPreviousBtnClick,\n    pageCount,\n    previousDisabled,\n    setActiveIndex,\n  ])\n\n  const handleNext = React.useCallback(() => {\n    onNextBtnClick?.()\n    if (nextDisabled && !continuousLoop) return\n    const next = continuousLoop\n      ? (clampedActiveIndex + 1) % pageCount\n      : clampedActiveIndex + 1\n    setActiveIndex(next)\n  }, [\n    clampedActiveIndex,\n    continuousLoop,\n    nextDisabled,\n    onNextBtnClick,\n    pageCount,\n    setActiveIndex,\n  ])\n\n  // Auto play\n  React.useEffect(() => {\n    if (!autoPlayInterval || autoPlayInterval <= 0) return\n    if (typeof window === 'undefined') return\n    const id = window.setInterval(() => {\n      handleNext()\n    }, autoPlayInterval)\n    return () => window.clearInterval(id)\n  }, [autoPlayInterval, handleNext])\n\n  // Storybook carousel arrow button styles (measured via computedStyle)\n  const ARROW_OUTLINE_DEFAULT = theme.palette.gray?.[400] ?? '#8C96A2' // rgb(140,150,162)\n  const ARROW_OUTLINE_DISABLED = theme.palette.gray?.[200] ?? '#D4DCE7' // rgb(212,220,231)\n  const ARROW_BG_DEFAULT = theme.palette.common.white\n  const ARROW_BG_HOVER = theme.palette.gray?.[100] ?? '#EEF2F6' // rgb(238,242,246)\n  const ARROW_SHADOW_DEFAULT = '0 1px 2px 0 rgba(18, 25, 38, 0.05)'\n\n  const arrowButtonSx = {\n    width: 36,\n    height: 36,\n    minWidth: 36,\n    padding: '8px',\n    borderRadius: '32px',\n    border: '0px',\n    outline: `1px solid ${ARROW_OUTLINE_DEFAULT}`,\n    outlineOffset: '-1px',\n    backgroundColor: ARROW_BG_DEFAULT,\n    boxShadow: ARROW_SHADOW_DEFAULT,\n    '&:hover:not(.Mui-disabled)': {\n      backgroundColor: ARROW_BG_HOVER,\n      boxShadow: 'none',\n    },\n    '&.Mui-disabled': {\n      opacity: 1,\n      cursor: 'default',\n      backgroundColor: ARROW_BG_DEFAULT,\n      boxShadow: 'none',\n      outline: `1px solid ${ARROW_OUTLINE_DISABLED}`,\n      outlineOffset: '-1px',\n    },\n  } as const\n\n  const shouldShowPrev =\n    arrowButtonGroup && (showDisabledCarouselControls || !previousDisabled)\n  const shouldShowNext =\n    arrowButtonGroup && (showDisabledCarouselControls || !nextDisabled)\n\n  const effectiveButtonPositions =\n    isMobile && buttonPositions === 'center' ? 'inset-center' : buttonPositions\n\n  const arrowPositionSx = (() => {\n    // Defaults based on Storybook \"center\" behavior: absolute, vertically centered, outside by 56px.\n    if (effectiveButtonPositions === 'center') {\n      return {\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateY(-50%)',\n        leftOffset: -56,\n        rightOffset: -56,\n      } as const\n    }\n    if (effectiveButtonPositions === 'inset-center') {\n      return {\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateY(-50%)',\n        leftOffset: 12,\n        rightOffset: 12,\n      } as const\n    }\n    if (effectiveButtonPositions === 'overlapping-center') {\n      return {\n        position: 'absolute',\n        top: '50%',\n        transform: 'translateY(-50%)',\n        leftOffset: -18,\n        rightOffset: -18,\n      } as const\n    }\n    if (effectiveButtonPositions === 'top-right') {\n      return {\n        position: 'absolute',\n        top: 0,\n        transform: 'none',\n        leftOffset: undefined,\n        rightOffset: 0,\n      } as const\n    }\n    if (\n      effectiveButtonPositions === 'bottom-left' ||\n      effectiveButtonPositions === 'bottom-center' ||\n      effectiveButtonPositions === 'bottom-right'\n    ) {\n      // Rendered in footer row instead of absolute positioning.\n      return null\n    }\n    return null\n  })()\n\n  const footerArrowLayout =\n    effectiveButtonPositions === 'bottom-left' ||\n    effectiveButtonPositions === 'bottom-center' ||\n    effectiveButtonPositions === 'bottom-right'\n\n  const footerJustify =\n    effectiveButtonPositions === 'bottom-left'\n      ? 'flex-start'\n      : effectiveButtonPositions === 'bottom-right'\n        ? 'flex-end'\n        : 'center'\n\n  // ui-libv2 (bottom-right) shows indicators centered and arrows on the right in the SAME row.\n  // Our default indicator layout renders as a separate below-content row, which creates a two-line footer.\n  const footerControlsSingleRow =\n    footerArrowLayout &&\n    indicatorGroup &&\n    indicatorPosition === 'center' &&\n    (effectiveButtonPositions === 'bottom-right' ||\n      effectiveButtonPositions === 'bottom-left')\n\n  const contentSx = {\n    position: 'relative',\n    width: '100%',\n    overflow: 'visible',\n  } as const\n\n  const viewportSx = {\n    width: '100%',\n    overflow: 'hidden',\n  } as const\n\n  // Gutter between cells:\n  // We mimic MUI Grid by applying negative margin on the row and padding-left/top on each cell.\n  // Since cells only use padding-left (no padding-right), the *effective horizontal gap* between\n  // adjacent cell contents equals GRID_GUTTER_PX.\n  //\n  // Design spec for these carousels expects ~20px gap.\n  const GRID_GUTTER_PX = 20\n\n  const trackSx = {\n    display: 'flex',\n    width: `${pageCount * 100}%`,\n    transform: `translateX(-${clampedActiveIndex * (100 / pageCount)}%)`,\n    transition: transition ? 'transform 300ms ease' : 'none',\n    willChange: 'transform',\n  } as const\n\n  const slideSx = {\n    flex: `0 0 ${100 / pageCount}%`,\n    maxWidth: `${100 / pageCount}%`,\n  } as const\n\n  const slideInnerSx = {\n    display: 'flex',\n    flexWrap: 'nowrap',\n    alignItems: 'stretch', // Ensure all cells have the same height\n    marginTop: `-${GRID_GUTTER_PX}px`,\n    marginLeft: `-${GRID_GUTTER_PX}px`,\n  } as const\n\n  const cellSx = {\n    flex: `0 0 ${100 / effectiveSlidesToShow}%`,\n    maxWidth: `${100 / effectiveSlidesToShow}%`,\n    paddingTop: `${GRID_GUTTER_PX}px`,\n    paddingLeft: `${GRID_GUTTER_PX}px`,\n    boxSizing: 'border-box',\n    display: 'flex',\n    flexDirection: 'column',\n  } as const\n\n  return (\n    <Box ref={containerRef} {...(dataAttributes as any)}>\n      {header ? (\n        <Box sx={{ mb: 2 }}>\n          <CarouselHeader\n            size={size}\n            arrowGroupInHeader={arrowGroupInHeader}\n            showDisabledCarouselControls={showDisabledCarouselControls}\n            previousDisabled={previousDisabled}\n            nextDisabled={nextDisabled}\n            onPreviousBtnClick={handlePrevious}\n            onNextBtnClick={handleNext}\n            carouselCount={carouselCount}\n            activeIndex={clampedActiveIndex + 1}\n            total={pageCount}\n            mobileBreakpoint={mobileBreakpoint}\n            mobileBreakpointContainerRef={mobileBreakpointContainerRef}\n            {...(headerProps as any)}\n          />\n        </Box>\n      ) : null}\n\n      <Box sx={contentSx}>\n        <Box sx={viewportSx}>\n          <Box sx={trackSx}>\n            {pages.map((pageItems, pageIdx) => (\n              <Box key={pageIdx} sx={slideSx}>\n                <Box sx={slideInnerSx}>\n                  {pageItems.map((node, idx) => (\n                    <Box key={idx} sx={cellSx}>\n                      {node}\n                    </Box>\n                  ))}\n                </Box>\n              </Box>\n            ))}\n          </Box>\n        </Box>\n\n        {/* Overlaid arrows (center / inset-center / overlapping-center / top-right) */}\n        {/* Buttons are in contentSx (overflow: visible) to prevent clipping, but positioned relative to viewport edges */}\n        {arrowPositionSx && arrowButtonGroup ? (\n          <>\n            {shouldShowPrev ? (\n              <Button\n                variant=\"secondary-gray\"\n                size=\"small\"\n                iconMode=\"only\"\n                ariaLabel=\"ChevronLeft\"\n                disabled={previousDisabled}\n                onClick={handlePrevious}\n                sx={[\n                  arrowButtonSx,\n                  {\n                    position: arrowPositionSx.position,\n                    top: arrowPositionSx.top,\n                    transform: arrowPositionSx.transform,\n                    ...('leftOffset' in arrowPositionSx &&\n                      (arrowPositionSx as any).leftOffset !== undefined && {\n                        left: (arrowPositionSx as any).leftOffset,\n                      }),\n                    ...('rightOffset' in arrowPositionSx &&\n                      (arrowPositionSx as any).rightOffset !== undefined &&\n                      !(\n                        'leftOffset' in arrowPositionSx &&\n                        (arrowPositionSx as any).leftOffset !== undefined\n                      ) && { right: (arrowPositionSx as any).rightOffset }),\n                    zIndex: 2,\n                  },\n                ]}\n              >\n                <Icon name=\"ChevronLeft\" size={20} />\n              </Button>\n            ) : null}\n            {shouldShowNext ? (\n              <Button\n                variant=\"secondary-gray\"\n                size=\"small\"\n                iconMode=\"only\"\n                ariaLabel=\"ChevronRight\"\n                disabled={nextDisabled}\n                onClick={handleNext}\n                sx={[\n                  arrowButtonSx,\n                  {\n                    position: arrowPositionSx.position,\n                    top: arrowPositionSx.top,\n                    transform: arrowPositionSx.transform,\n                    ...('rightOffset' in arrowPositionSx &&\n                      (arrowPositionSx as any).rightOffset !== undefined && {\n                        right: (arrowPositionSx as any).rightOffset,\n                      }),\n                    ...('leftOffset' in arrowPositionSx &&\n                      (arrowPositionSx as any).leftOffset !== undefined &&\n                      !(\n                        'rightOffset' in arrowPositionSx &&\n                        (arrowPositionSx as any).rightOffset !== undefined\n                      ) && { left: (arrowPositionSx as any).leftOffset }),\n                    zIndex: 2,\n                  },\n                ]}\n              >\n                <Icon name=\"ChevronRight\" size={20} />\n              </Button>\n            ) : null}\n          </>\n        ) : null}\n\n        {/* Inset indicators */}\n        {indicatorGroup && !footerControlsSingleRow ? (\n          <CarouselIndicators\n            type={indicatorType}\n            position={indicatorPosition}\n            framed={framed}\n            count={pageCount}\n            active={clampedActiveIndex}\n            onSelect={(idx) => setActiveIndex(idx)}\n            showCount={carouselCount}\n          />\n        ) : null}\n      </Box>\n\n      {/* Footer arrows (bottom-*) */}\n      {footerArrowLayout && arrowButtonGroup ? (\n        footerControlsSingleRow ? (\n          <Box\n            sx={{\n              mt: 2,\n              display: 'grid',\n              gridTemplateColumns: '1fr auto 1fr',\n              alignItems: 'center',\n              position: 'relative',\n            }}\n          >\n            <Box sx={{ justifySelf: 'start' }}>\n              {effectiveButtonPositions === 'bottom-left' ? (\n                <Stack direction=\"row\" spacing={1.5} alignItems=\"center\">\n                  {shouldShowPrev ? (\n                    <Button\n                      variant=\"secondary-gray\"\n                      size=\"small\"\n                      iconMode=\"only\"\n                      ariaLabel=\"ChevronLeft\"\n                      disabled={previousDisabled}\n                      onClick={handlePrevious}\n                      sx={arrowButtonSx}\n                    >\n                      <Icon name=\"ChevronLeft\" size={20} />\n                    </Button>\n                  ) : null}\n                  {shouldShowNext ? (\n                    <Button\n                      variant=\"secondary-gray\"\n                      size=\"small\"\n                      iconMode=\"only\"\n                      ariaLabel=\"ChevronRight\"\n                      disabled={nextDisabled}\n                      onClick={handleNext}\n                      sx={arrowButtonSx}\n                    >\n                      <Icon name=\"ChevronRight\" size={20} />\n                    </Button>\n                  ) : null}\n                </Stack>\n              ) : null}\n            </Box>\n\n            <Box sx={{ justifySelf: 'center' }}>\n              <CarouselIndicators\n                type={indicatorType}\n                position=\"center\"\n                framed={framed}\n                count={pageCount}\n                active={clampedActiveIndex}\n                onSelect={(idx) => setActiveIndex(idx)}\n                showCount={carouselCount}\n                inFooter\n              />\n            </Box>\n\n            <Box sx={{ justifySelf: 'end' }}>\n              {effectiveButtonPositions === 'bottom-right' ? (\n                <Stack direction=\"row\" spacing={1.5} alignItems=\"center\">\n                  {shouldShowPrev ? (\n                    <Button\n                      variant=\"secondary-gray\"\n                      size=\"small\"\n                      iconMode=\"only\"\n                      ariaLabel=\"ChevronLeft\"\n                      disabled={previousDisabled}\n                      onClick={handlePrevious}\n                      sx={arrowButtonSx}\n                    >\n                      <Icon name=\"ChevronLeft\" size={20} />\n                    </Button>\n                  ) : null}\n                  {shouldShowNext ? (\n                    <Button\n                      variant=\"secondary-gray\"\n                      size=\"small\"\n                      iconMode=\"only\"\n                      ariaLabel=\"ChevronRight\"\n                      disabled={nextDisabled}\n                      onClick={handleNext}\n                      sx={arrowButtonSx}\n                    >\n                      <Icon name=\"ChevronRight\" size={20} />\n                    </Button>\n                  ) : null}\n                </Stack>\n              ) : null}\n            </Box>\n          </Box>\n        ) : (\n          <Stack\n            direction=\"row\"\n            justifyContent={footerJustify}\n            sx={{ mt: 2, position: 'relative' }}\n          >\n            <Stack direction=\"row\" spacing={1.5} alignItems=\"center\">\n              {shouldShowPrev ? (\n                <Button\n                  variant=\"secondary-gray\"\n                  size=\"small\"\n                  iconMode=\"only\"\n                  ariaLabel=\"ChevronLeft\"\n                  disabled={previousDisabled}\n                  onClick={handlePrevious}\n                  sx={arrowButtonSx}\n                >\n                  <Icon name=\"ChevronLeft\" size={20} />\n                </Button>\n              ) : null}\n              {shouldShowNext ? (\n                <Button\n                  variant=\"secondary-gray\"\n                  size=\"small\"\n                  iconMode=\"only\"\n                  ariaLabel=\"ChevronRight\"\n                  disabled={nextDisabled}\n                  onClick={handleNext}\n                  sx={arrowButtonSx}\n                >\n                  <Icon name=\"ChevronRight\" size={20} />\n                </Button>\n              ) : null}\n            </Stack>\n          </Stack>\n        )\n      ) : null}\n    </Box>\n  )\n}\n\nexport default Carousel\n"],"names":[],"mappings":"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"}

package/dist/components/carousel/CarouselHeader.d.ts

@@ -0,0 +1,48 @@
+import { BadgeColor, BadgeType, BadgeIconType } from '../badge/Badge';
+import { MenuHeaderProps, MenuItemOption } from '../DropdownMenu';
+import * as React from 'react';
+export type CarouselHeaderSize = 'small' | 'medium';
+export interface CarouselHeaderProps {
+    size?: CarouselHeaderSize;
+    headerText?: string;
+    supportingText?: string;
+    /** Show help icon next to header text */
+    helpIcon?: boolean;
+    tooltipLabel?: string;
+    tooltipDescription?: React.ReactNode;
+    tooltipVariant?: 'light' | 'dark';
+    tooltipArrow?: boolean;
+    tooltipWidth?: string | number;
+    tooltipMaxWidth?: string | number;
+    tooltipPlacement?: 'None' | 'Top Left' | 'Top Right' | 'Top Center' | 'Bottom Left' | 'Bottom Right' | 'Bottom Center' | 'Left' | 'Right';
+    /** Badge controls */
+    badge?: boolean;
+    badgeLabel?: string;
+    badgeType?: BadgeType;
+    badgeColor?: BadgeColor;
+    badgeIcon?: string;
+    badgeIconType?: BadgeIconType;
+    /** Kebab / dropdown menu */
+    dropdownIcon?: boolean;
+    menuHeaderProps?: MenuHeaderProps;
+    menuItemProps?: MenuItemOption[] | MenuItemOption[][];
+    /** Disable header interactions (badge + dropdown icon) */
+    disabled?: boolean;
+    /** Carousel count in header */
+    carouselCount?: boolean;
+    activeIndex?: number;
+    total?: number;
+    /** Arrow group in header */
+    arrowGroupInHeader?: boolean;
+    showDisabledCarouselControls?: boolean;
+    previousDisabled?: boolean;
+    nextDisabled?: boolean;
+    onPreviousBtnClick?: () => void;
+    onNextBtnClick?: () => void;
+    /** Mobile breakpoint */
+    mobileBreakpoint?: number | true;
+    mobileBreakpointContainerRef?: React.RefObject<HTMLElement>;
+}
+export declare function CarouselHeader({ size, headerText, supportingText, helpIcon, tooltipLabel, tooltipDescription, tooltipVariant, tooltipArrow, tooltipWidth, tooltipMaxWidth, tooltipPlacement, badge, badgeLabel, badgeType, badgeColor, badgeIcon, badgeIconType, dropdownIcon, menuHeaderProps, menuItemProps, disabled, carouselCount, activeIndex, total, arrowGroupInHeader, showDisabledCarouselControls, previousDisabled, nextDisabled, onPreviousBtnClick, onNextBtnClick, mobileBreakpoint, mobileBreakpointContainerRef, }: CarouselHeaderProps): import("react/jsx-runtime").JSX.Element;
+export default CarouselHeader;
+//# sourceMappingURL=CarouselHeader.d.ts.map

package/dist/components/carousel/CarouselHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselHeader.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/CarouselHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAA0B,KAAK,UAAU,EAAE,KAAK,SAAS,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAA;AAE5G,OAAO,EAAgB,KAAK,eAAe,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAIzF,MAAM,MAAM,kBAAkB,GAAG,OAAO,GAAG,QAAQ,CAAA;AAEnD,MAAM,WAAW,mBAAmB;IAClC,IAAI,CAAC,EAAE,kBAAkB,CAAA;IAEzB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IAEvB,yCAAyC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACpC,cAAc,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACjC,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACjC,gBAAgB,CAAC,EACb,MAAM,GACN,UAAU,GACV,WAAW,GACX,YAAY,GACZ,aAAa,GACb,cAAc,GACd,eAAe,GACf,MAAM,GACN,OAAO,CAAA;IAEX,qBAAqB;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,UAAU,CAAC,EAAE,UAAU,CAAA;IACvB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,aAAa,CAAA;IAE7B,4BAA4B;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,eAAe,CAAC,EAAE,eAAe,CAAA;IACjC,aAAa,CAAC,EAAE,cAAc,EAAE,GAAG,cAAc,EAAE,EAAE,CAAA;IAErD,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;IAElB,+BAA+B;IAC/B,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IAEd,4BAA4B;IAC5B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,4BAA4B,CAAC,EAAE,OAAO,CAAA;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC/B,cAAc,CAAC,EAAE,MAAM,IAAI,CAAA;IAE3B,wBAAwB;IACxB,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAChC,4BAA4B,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;CAC5D;AA4DD,wBAAgB,cAAc,CAAC,EAC7B,IAAc,EACd,UAA0B,EAC1B,cAAkC,EAClC,QAAe,EACf,YAA8B,EAC9B,kBAAkB,EAClB,cAAwB,EACxB,YAAmB,EACnB,YAAY,EACZ,eAAe,EACf,gBAA+B,EAC/B,KAAa,EACb,UAAoB,EACpB,SAAyB,EACzB,UAAmB,EACnB,SAAS,EACT,aAAa,EACb,YAAmB,EACnB,eAAe,EACf,aAAa,EACb,QAAgB,EAChB,aAAa,EACb,WAAe,EACf,KAAK,EACL,kBAAyB,EACzB,4BAAmC,EACnC,gBAAwB,EACxB,YAAoB,EACpB,kBAAkB,EAClB,cAAc,EACd,gBAAgB,EAChB,4BAA4B,GAC7B,EAAE,mBAAmB,2CA0MrB;AAED,eAAe,cAAc,CAAA"}

package/dist/components/carousel/CarouselHeader.js

@@ -0,0 +1,289 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Button } from "../Button.js";
+import { Badge } from "../badge/Badge.js";
+import { Tooltip } from "../Tooltip.js";
+import { DropdownMenu } from "../DropdownMenu.js";
+import { Icon } from "../Icon.js";
+import useTheme from "../../packages/zenith-ui/node_modules/@mui/material/esm/styles/useTheme.js";
+import Box from "../../packages/zenith-ui/node_modules/@mui/material/esm/Box/Box.js";
+import Stack from "../../packages/zenith-ui/node_modules/@mui/material/esm/Stack/Stack.js";
+import Typography from "../../packages/zenith-ui/node_modules/@mui/material/esm/Typography/Typography.js";
+function mapTooltipPlacement(placement) {
+  switch (placement) {
+    case "Top Left":
+      return "top-start";
+    case "Top Right":
+      return "top-end";
+    case "Top Center":
+      return "top";
+    case "Bottom Left":
+      return "bottom-start";
+    case "Bottom Right":
+      return "bottom-end";
+    case "Bottom Center":
+      return "bottom";
+    case "Left":
+      return "left";
+    case "Right":
+      return "right";
+    case "None":
+    default:
+      return void 0;
+  }
+}
+function useIsMobileView(mobileBreakpoint, mobileBreakpointContainerRef) {
+  const theme = useTheme();
+  const [containerWidth, setContainerWidth] = React.useState(null);
+  React.useEffect(() => {
+    if (!mobileBreakpointContainerRef?.current) return;
+    const el = mobileBreakpointContainerRef.current;
+    const ro = new ResizeObserver((entries) => {
+      const w = entries[0]?.contentRect?.width;
+      if (typeof w === "number") setContainerWidth(w);
+    });
+    ro.observe(el);
+    setContainerWidth(el.getBoundingClientRect().width);
+    return () => ro.disconnect();
+  }, [mobileBreakpointContainerRef]);
+  if (mobileBreakpoint === true) return true;
+  const breakpointPx = typeof mobileBreakpoint === "number" ? mobileBreakpoint : (
+    // fall back to theme "sm" breakpoint if present; otherwise 600
+    theme.breakpoints?.values?.sm ?? 600
+  );
+  const basisWidth = mobileBreakpointContainerRef?.current ? containerWidth : typeof window !== "undefined" ? window.innerWidth : null;
+  return typeof basisWidth === "number" ? basisWidth < breakpointPx : false;
+}
+function CarouselHeader({
+  size = "small",
+  headerText = "Header text",
+  supportingText = "Supporting text",
+  helpIcon = true,
+  tooltipLabel = "Tooltip label",
+  tooltipDescription,
+  tooltipVariant = "light",
+  tooltipArrow = true,
+  tooltipWidth,
+  tooltipMaxWidth,
+  tooltipPlacement = "Top Center",
+  badge = false,
+  badgeLabel = "Badge",
+  badgeType = "pillOutline",
+  badgeColor = "gray",
+  badgeIcon,
+  badgeIconType,
+  dropdownIcon = true,
+  menuHeaderProps,
+  menuItemProps,
+  disabled = false,
+  carouselCount,
+  activeIndex = 1,
+  total,
+  arrowGroupInHeader = true,
+  showDisabledCarouselControls = true,
+  previousDisabled = false,
+  nextDisabled = false,
+  onPreviousBtnClick,
+  onNextBtnClick,
+  mobileBreakpoint,
+  mobileBreakpointContainerRef
+}) {
+  const theme = useTheme();
+  const isMobile = useIsMobileView(mobileBreakpoint, mobileBreakpointContainerRef);
+  const titleVariant = size === "small" ? "text-md-semibold" : "text-lg-semibold";
+  const supportingVariant = "text-sm-regular";
+  const badgeProps = badge ? {
+    label: badgeLabel,
+    type: badgeType,
+    color: badgeColor,
+    icon: badgeIcon,
+    iconType: badgeIconType,
+    disabled
+  } : null;
+  const arrowButtonSx = {
+    width: 36,
+    height: 36,
+    minWidth: 36,
+    padding: "8px",
+    borderRadius: "32px",
+    // Match Storybook arrow buttons (outline ring + hover bg, no hover shadow)
+    border: "0px",
+    outline: `1px solid ${theme.palette.gray?.[400] ?? "#8C96A2"}`,
+    outlineOffset: "-1px",
+    backgroundColor: theme.palette.common.white,
+    boxShadow: "0 1px 2px 0 rgba(18, 25, 38, 0.05)",
+    "&:hover:not(.Mui-disabled)": {
+      backgroundColor: theme.palette.gray?.[100] ?? "#EEF2F6",
+      boxShadow: "none"
+    },
+    "&.Mui-disabled": {
+      opacity: 1,
+      cursor: "default",
+      backgroundColor: theme.palette.common.white,
+      boxShadow: "none",
+      outline: `1px solid ${theme.palette.gray?.[200] ?? "#D4DCE7"}`,
+      outlineOffset: "-1px"
+    }
+  };
+  const showMenu = Boolean(dropdownIcon && menuItemProps && menuItemProps.length > 0);
+  const shouldShowPrev = arrowGroupInHeader && (showDisabledCarouselControls || !previousDisabled);
+  const shouldShowNext = arrowGroupInHeader && (showDisabledCarouselControls || !nextDisabled);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        width: "100%",
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: isMobile ? 1.5 : 2
+      },
+      "data-size": size,
+      children: [
+        /* @__PURE__ */ jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+            /* @__PURE__ */ jsx(Typography, { variant: titleVariant, sx: { color: theme.palette.gray?.[900] ?? "#121926" }, children: headerText }),
+            helpIcon ? /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                title: tooltipLabel,
+                supportingText: tooltipDescription,
+                placement: mapTooltipPlacement(tooltipPlacement) ?? "top",
+                theme: tooltipVariant,
+                arrow: tooltipArrow,
+                width: tooltipWidth,
+                maxWidth: tooltipMaxWidth,
+                children: /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    component: "button",
+                    type: "button",
+                    "aria-label": "HelpCircle",
+                    disabled,
+                    style: {
+                      appearance: "none",
+                      border: "none",
+                      background: "transparent",
+                      padding: 0,
+                      margin: 0,
+                      display: "inline-flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      cursor: disabled ? "default" : "pointer"
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      Icon,
+                      {
+                        name: "HelpCircle",
+                        size: 16,
+                        color: disabled ? theme.palette.gray?.[300] ?? "#D4DCE7" : theme.palette.gray?.[500] ?? "#667085"
+                      }
+                    )
+                  }
+                )
+              }
+            ) : null,
+            badgeProps ? /* @__PURE__ */ jsx(Badge, { ...badgeProps }) : null
+          ] }),
+          supportingText ? /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: supportingVariant,
+              sx: {
+                color: theme.palette.gray?.[600] ?? "#4B5565",
+                mt: 0.5
+              },
+              children: supportingText
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [
+          carouselCount && typeof total === "number" ? /* @__PURE__ */ jsxs(
+            Typography,
+            {
+              variant: "text-sm-medium",
+              sx: { color: theme.palette.gray?.[600] ?? "#4B5565", mt: "2px", whiteSpace: "nowrap" },
+              children: [
+                activeIndex,
+                "/",
+                total
+              ]
+            }
+          ) : null,
+          arrowGroupInHeader ? /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1.5, alignItems: "center", sx: { ml: 2 }, children: [
+            shouldShowPrev ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary-gray",
+                size: "small",
+                iconMode: "only",
+                ariaLabel: "ChevronLeft",
+                disabled: disabled || previousDisabled,
+                onClick: onPreviousBtnClick,
+                sx: arrowButtonSx,
+                children: /* @__PURE__ */ jsx(Icon, { name: "ChevronLeft", size: 20 })
+              }
+            ) : null,
+            shouldShowNext ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary-gray",
+                size: "small",
+                iconMode: "only",
+                ariaLabel: "ChevronRight",
+                disabled: disabled || nextDisabled,
+                onClick: onNextBtnClick,
+                sx: arrowButtonSx,
+                children: /* @__PURE__ */ jsx(Icon, { name: "ChevronRight", size: 20 })
+              }
+            ) : null
+          ] }) : null,
+          dropdownIcon ? showMenu ? /* @__PURE__ */ jsx(
+            DropdownMenu,
+            {
+              menuItemProps,
+              menuHeaderProps,
+              disabled,
+              menuTriggerProps: {
+                CustomTrigger: ({ onTriggerClick }) => /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    variant: "tertiary-gray",
+                    size: "medium",
+                    iconMode: "only",
+                    ariaLabel: "DotsVertical",
+                    disabled,
+                    onClick: onTriggerClick,
+                    sx: {
+                      width: 36,
+                      height: 36,
+                      minWidth: 36,
+                      padding: "8px",
+                      borderRadius: "32px"
+                    },
+                    children: /* @__PURE__ */ jsx(Icon, { name: "DotsVertical", size: 20 })
+                  }
+                )
+              }
+            }
+          ) : /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "tertiary-gray",
+              size: "medium",
+              iconMode: "only",
+              ariaLabel: "DotsVertical",
+              disabled,
+              sx: { width: 36, height: 36, minWidth: 36, padding: "8px", borderRadius: "32px" },
+              children: /* @__PURE__ */ jsx(Icon, { name: "DotsVertical", size: 20 })
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CarouselHeader
+};
+//# sourceMappingURL=CarouselHeader.js.map

package/dist/components/carousel/CarouselHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CarouselHeader.js","sources":["../../../src/components/carousel/CarouselHeader.tsx"],"sourcesContent":["import * as React from 'react'\nimport Box from '@mui/material/Box'\nimport Stack from '@mui/material/Stack'\nimport Typography from '@mui/material/Typography'\nimport { useTheme } from '@mui/material/styles'\n\nimport { Button } from '../Button'\nimport { Badge, type BadgeProps, type BadgeColor, type BadgeType, type BadgeIconType } from '../badge/Badge'\nimport { Tooltip, type TooltipPlacement, type TooltipTheme } from '../Tooltip'\nimport { DropdownMenu, type MenuHeaderProps, type MenuItemOption } from '../DropdownMenu'\n\nimport { Icon } from '../Icon'\n\nexport type CarouselHeaderSize = 'small' | 'medium'\n\nexport interface CarouselHeaderProps {\n  size?: CarouselHeaderSize\n\n  headerText?: string\n  supportingText?: string\n\n  /** Show help icon next to header text */\n  helpIcon?: boolean\n  tooltipLabel?: string\n  tooltipDescription?: React.ReactNode\n  tooltipVariant?: 'light' | 'dark'\n  tooltipArrow?: boolean\n  tooltipWidth?: string | number\n  tooltipMaxWidth?: string | number\n  tooltipPlacement?:\n    | 'None'\n    | 'Top Left'\n    | 'Top Right'\n    | 'Top Center'\n    | 'Bottom Left'\n    | 'Bottom Right'\n    | 'Bottom Center'\n    | 'Left'\n    | 'Right'\n\n  /** Badge controls */\n  badge?: boolean\n  badgeLabel?: string\n  badgeType?: BadgeType\n  badgeColor?: BadgeColor\n  badgeIcon?: string\n  badgeIconType?: BadgeIconType\n\n  /** Kebab / dropdown menu */\n  dropdownIcon?: boolean\n  menuHeaderProps?: MenuHeaderProps\n  menuItemProps?: MenuItemOption[] | MenuItemOption[][]\n\n  /** Disable header interactions (badge + dropdown icon) */\n  disabled?: boolean\n\n  /** Carousel count in header */\n  carouselCount?: boolean\n  activeIndex?: number\n  total?: number\n\n  /** Arrow group in header */\n  arrowGroupInHeader?: boolean\n  showDisabledCarouselControls?: boolean\n  previousDisabled?: boolean\n  nextDisabled?: boolean\n  onPreviousBtnClick?: () => void\n  onNextBtnClick?: () => void\n\n  /** Mobile breakpoint */\n  mobileBreakpoint?: number | true\n  mobileBreakpointContainerRef?: React.RefObject<HTMLElement>\n}\n\nfunction mapTooltipPlacement(\n  placement: CarouselHeaderProps['tooltipPlacement'],\n): TooltipPlacement | undefined {\n  switch (placement) {\n    case 'Top Left':\n      return 'top-start'\n    case 'Top Right':\n      return 'top-end'\n    case 'Top Center':\n      return 'top'\n    case 'Bottom Left':\n      return 'bottom-start'\n    case 'Bottom Right':\n      return 'bottom-end'\n    case 'Bottom Center':\n      return 'bottom'\n    case 'Left':\n      return 'left'\n    case 'Right':\n      return 'right'\n    case 'None':\n    default:\n      return undefined\n  }\n}\n\nfunction useIsMobileView(\n  mobileBreakpoint: number | true | undefined,\n  mobileBreakpointContainerRef: React.RefObject<HTMLElement> | undefined,\n): boolean {\n  const theme = useTheme()\n  const [containerWidth, setContainerWidth] = React.useState<number | null>(null)\n\n  React.useEffect(() => {\n    if (!mobileBreakpointContainerRef?.current) return\n    const el = mobileBreakpointContainerRef.current\n    const ro = new ResizeObserver((entries) => {\n      const w = entries[0]?.contentRect?.width\n      if (typeof w === 'number') setContainerWidth(w)\n    })\n    ro.observe(el)\n    setContainerWidth(el.getBoundingClientRect().width)\n    return () => ro.disconnect()\n  }, [mobileBreakpointContainerRef])\n\n  if (mobileBreakpoint === true) return true\n  const breakpointPx =\n    typeof mobileBreakpoint === 'number'\n      ? mobileBreakpoint\n      : // fall back to theme \"sm\" breakpoint if present; otherwise 600\n        (theme.breakpoints?.values?.sm ?? 600)\n\n  const basisWidth = mobileBreakpointContainerRef?.current\n    ? containerWidth\n    : (typeof window !== 'undefined' ? window.innerWidth : null)\n  return typeof basisWidth === 'number' ? basisWidth < breakpointPx : false\n}\n\nexport function CarouselHeader({\n  size = 'small',\n  headerText = 'Header text',\n  supportingText = 'Supporting text',\n  helpIcon = true,\n  tooltipLabel = 'Tooltip label',\n  tooltipDescription,\n  tooltipVariant = 'light',\n  tooltipArrow = true,\n  tooltipWidth,\n  tooltipMaxWidth,\n  tooltipPlacement = 'Top Center',\n  badge = false,\n  badgeLabel = 'Badge',\n  badgeType = 'pillOutline',\n  badgeColor = 'gray',\n  badgeIcon,\n  badgeIconType,\n  dropdownIcon = true,\n  menuHeaderProps,\n  menuItemProps,\n  disabled = false,\n  carouselCount,\n  activeIndex = 1,\n  total,\n  arrowGroupInHeader = true,\n  showDisabledCarouselControls = true,\n  previousDisabled = false,\n  nextDisabled = false,\n  onPreviousBtnClick,\n  onNextBtnClick,\n  mobileBreakpoint,\n  mobileBreakpointContainerRef,\n}: CarouselHeaderProps) {\n  const theme = useTheme()\n\n  const isMobile = useIsMobileView(mobileBreakpoint, mobileBreakpointContainerRef)\n  const titleVariant = size === 'small' ? 'text-md-semibold' : 'text-lg-semibold'\n  const supportingVariant = 'text-sm-regular'\n\n  const badgeProps: Partial<BadgeProps> | null = badge\n    ? {\n        label: badgeLabel,\n        type: badgeType,\n        color: badgeColor,\n        icon: badgeIcon,\n        iconType: badgeIconType,\n        disabled: disabled,\n      }\n    : null\n\n  const arrowButtonSx = {\n    width: 36,\n    height: 36,\n    minWidth: 36,\n    padding: '8px',\n    borderRadius: '32px',\n    // Match Storybook arrow buttons (outline ring + hover bg, no hover shadow)\n    border: '0px',\n    outline: `1px solid ${theme.palette.gray?.[400] ?? '#8C96A2'}`,\n    outlineOffset: '-1px',\n    backgroundColor: theme.palette.common.white,\n    boxShadow: '0 1px 2px 0 rgba(18, 25, 38, 0.05)',\n    '&:hover:not(.Mui-disabled)': {\n      backgroundColor: theme.palette.gray?.[100] ?? '#EEF2F6',\n      boxShadow: 'none',\n    },\n    '&.Mui-disabled': {\n      opacity: 1,\n      cursor: 'default',\n      backgroundColor: theme.palette.common.white,\n      boxShadow: 'none',\n      outline: `1px solid ${theme.palette.gray?.[200] ?? '#D4DCE7'}`,\n      outlineOffset: '-1px',\n    },\n  } as const\n\n  const showMenu = Boolean(dropdownIcon && menuItemProps && menuItemProps.length > 0)\n  const shouldShowPrev = arrowGroupInHeader && (showDisabledCarouselControls || !previousDisabled)\n  const shouldShowNext = arrowGroupInHeader && (showDisabledCarouselControls || !nextDisabled)\n\n  return (\n    <Box\n      sx={{\n        width: '100%',\n        display: 'flex',\n        alignItems: 'flex-start',\n        justifyContent: 'space-between',\n        gap: isMobile ? 1.5 : 2,\n      }}\n      data-size={size}\n    >\n      <Box sx={{ flex: 1, minWidth: 0 }}>\n        <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n          <Typography variant={titleVariant} sx={{ color: theme.palette.gray?.[900] ?? '#121926' }}>\n            {headerText}\n          </Typography>\n\n          {helpIcon ? (\n            <Tooltip\n              title={tooltipLabel}\n              supportingText={tooltipDescription}\n              placement={mapTooltipPlacement(tooltipPlacement) ?? 'top'}\n              theme={tooltipVariant as TooltipTheme}\n              arrow={tooltipArrow}\n              width={tooltipWidth}\n              maxWidth={tooltipMaxWidth}\n            >\n              <Box\n                component=\"button\"\n                type=\"button\"\n                aria-label=\"HelpCircle\"\n                disabled={disabled}\n                style={{\n                  appearance: 'none',\n                  border: 'none',\n                  background: 'transparent',\n                  padding: 0,\n                  margin: 0,\n                  display: 'inline-flex',\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                  cursor: disabled ? 'default' : 'pointer',\n                }}\n              >\n                <Icon\n                  name=\"HelpCircle\"\n                  size={16}\n                  color={disabled ? (theme.palette.gray?.[300] ?? '#D4DCE7') : (theme.palette.gray?.[500] ?? '#667085')}\n                />\n              </Box>\n            </Tooltip>\n          ) : null}\n\n          {badgeProps ? <Badge {...badgeProps} /> : null}\n        </Stack>\n\n        {supportingText ? (\n          <Typography\n            variant={supportingVariant}\n            sx={{\n              color: theme.palette.gray?.[600] ?? '#4B5565',\n              mt: 0.5,\n            }}\n          >\n            {supportingText}\n          </Typography>\n        ) : null}\n      </Box>\n\n      <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n        {carouselCount && typeof total === 'number' ? (\n          <Typography\n            variant=\"text-sm-medium\"\n            sx={{ color: theme.palette.gray?.[600] ?? '#4B5565', mt: '2px', whiteSpace: 'nowrap' }}\n          >\n            {activeIndex}/{total}\n          </Typography>\n        ) : null}\n\n        {arrowGroupInHeader ? (\n          <Stack direction=\"row\" spacing={1.5} alignItems=\"center\" sx={{ ml: 2 }}>\n            {shouldShowPrev ? (\n              <Button\n                variant=\"secondary-gray\"\n                size=\"small\"\n                iconMode=\"only\"\n                ariaLabel=\"ChevronLeft\"\n                disabled={disabled || previousDisabled}\n                onClick={onPreviousBtnClick}\n                sx={arrowButtonSx}\n              >\n                <Icon name=\"ChevronLeft\" size={20} />\n              </Button>\n            ) : null}\n            {shouldShowNext ? (\n              <Button\n                variant=\"secondary-gray\"\n                size=\"small\"\n                iconMode=\"only\"\n                ariaLabel=\"ChevronRight\"\n                disabled={disabled || nextDisabled}\n                onClick={onNextBtnClick}\n                sx={arrowButtonSx}\n              >\n                <Icon name=\"ChevronRight\" size={20} />\n              </Button>\n            ) : null}\n          </Stack>\n        ) : null}\n\n        {dropdownIcon ? (\n          showMenu ? (\n            <DropdownMenu\n              menuItemProps={menuItemProps as any}\n              menuHeaderProps={menuHeaderProps}\n              disabled={disabled}\n              menuTriggerProps={{\n                CustomTrigger: ({ onTriggerClick }) => (\n                  <Button\n                    variant=\"tertiary-gray\"\n                    size=\"medium\"\n                    iconMode=\"only\"\n                    ariaLabel=\"DotsVertical\"\n                    disabled={disabled}\n                    onClick={onTriggerClick}\n                    sx={{\n                      width: 36,\n                      height: 36,\n                      minWidth: 36,\n                      padding: '8px',\n                      borderRadius: '32px',\n                    }}\n                  >\n                    <Icon name=\"DotsVertical\" size={20} />\n                  </Button>\n                ),\n              }}\n            />\n          ) : (\n            <Button\n              variant=\"tertiary-gray\"\n              size=\"medium\"\n              iconMode=\"only\"\n              ariaLabel=\"DotsVertical\"\n              disabled={disabled}\n              sx={{ width: 36, height: 36, minWidth: 36, padding: '8px', borderRadius: '32px' }}\n            >\n              <Icon name=\"DotsVertical\" size={20} />\n            </Button>\n          )\n        ) : null}\n      </Stack>\n    </Box>\n  )\n}\n\nexport default CarouselHeader\n\n"],"names":[],"mappings":";;;;;;;;;;;AA0EA,SAAS,oBACP,WAC8B;AAC9B,UAAQ,WAAA;AAAA,IACN,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EAAA;AAEb;AAEA,SAAS,gBACP,kBACA,8BACS;AACT,QAAM,QAAQ,SAAA;AACd,QAAM,CAAC,gBAAgB,iBAAiB,IAAI,MAAM,SAAwB,IAAI;AAE9E,QAAM,UAAU,MAAM;AACpB,QAAI,CAAC,8BAA8B,QAAS;AAC5C,UAAM,KAAK,6BAA6B;AACxC,UAAM,KAAK,IAAI,eAAe,CAAC,YAAY;AACzC,YAAM,IAAI,QAAQ,CAAC,GAAG,aAAa;AACnC,UAAI,OAAO,MAAM,SAAU,mBAAkB,CAAC;AAAA,IAChD,CAAC;AACD,OAAG,QAAQ,EAAE;AACb,sBAAkB,GAAG,sBAAA,EAAwB,KAAK;AAClD,WAAO,MAAM,GAAG,WAAA;AAAA,EAClB,GAAG,CAAC,4BAA4B,CAAC;AAEjC,MAAI,qBAAqB,KAAM,QAAO;AACtC,QAAM,eACJ,OAAO,qBAAqB,WACxB;AAAA;AAAA,IAEC,MAAM,aAAa,QAAQ,MAAM;AAAA;AAExC,QAAM,aAAa,8BAA8B,UAC7C,iBACC,OAAO,WAAW,cAAc,OAAO,aAAa;AACzD,SAAO,OAAO,eAAe,WAAW,aAAa,eAAe;AACtE;AAEO,SAAS,eAAe;AAAA,EAC7B,OAAO;AAAA,EACP,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,WAAW;AAAA,EACX,eAAe;AAAA,EACf;AAAA,EACA,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA,qBAAqB;AAAA,EACrB,+BAA+B;AAAA,EAC/B,mBAAmB;AAAA,EACnB,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAwB;AACtB,QAAM,QAAQ,SAAA;AAEd,QAAM,WAAW,gBAAgB,kBAAkB,4BAA4B;AAC/E,QAAM,eAAe,SAAS,UAAU,qBAAqB;AAC7D,QAAM,oBAAoB;AAE1B,QAAM,aAAyC,QAC3C;AAAA,IACE,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,UAAU;AAAA,IACV;AAAA,EAAA,IAEF;AAEJ,QAAM,gBAAgB;AAAA,IACpB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,SAAS;AAAA,IACT,cAAc;AAAA;AAAA,IAEd,QAAQ;AAAA,IACR,SAAS,aAAa,MAAM,QAAQ,OAAO,GAAG,KAAK,SAAS;AAAA,IAC5D,eAAe;AAAA,IACf,iBAAiB,MAAM,QAAQ,OAAO;AAAA,IACtC,WAAW;AAAA,IACX,8BAA8B;AAAA,MAC5B,iBAAiB,MAAM,QAAQ,OAAO,GAAG,KAAK;AAAA,MAC9C,WAAW;AAAA,IAAA;AAAA,IAEb,kBAAkB;AAAA,MAChB,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,iBAAiB,MAAM,QAAQ,OAAO;AAAA,MACtC,WAAW;AAAA,MACX,SAAS,aAAa,MAAM,QAAQ,OAAO,GAAG,KAAK,SAAS;AAAA,MAC5D,eAAe;AAAA,IAAA;AAAA,EACjB;AAGF,QAAM,WAAW,QAAQ,gBAAgB,iBAAiB,cAAc,SAAS,CAAC;AAClF,QAAM,iBAAiB,uBAAuB,gCAAgC,CAAC;AAC/E,QAAM,iBAAiB,uBAAuB,gCAAgC,CAAC;AAE/E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,OAAO;AAAA,QACP,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,gBAAgB;AAAA,QAChB,KAAK,WAAW,MAAM;AAAA,MAAA;AAAA,MAExB,aAAW;AAAA,MAEX,UAAA;AAAA,QAAA,qBAAC,OAAI,IAAI,EAAE,MAAM,GAAG,UAAU,KAC5B,UAAA;AAAA,UAAA,qBAAC,SAAM,WAAU,OAAM,SAAS,GAAG,YAAW,UAC5C,UAAA;AAAA,YAAA,oBAAC,YAAA,EAAW,SAAS,cAAc,IAAI,EAAE,OAAO,MAAM,QAAQ,OAAO,GAAG,KAAK,UAAA,GAC1E,UAAA,YACH;AAAA,YAEC,WACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAO;AAAA,gBACP,gBAAgB;AAAA,gBAChB,WAAW,oBAAoB,gBAAgB,KAAK;AAAA,gBACpD,OAAO;AAAA,gBACP,OAAO;AAAA,gBACP,OAAO;AAAA,gBACP,UAAU;AAAA,gBAEV,UAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,MAAK;AAAA,oBACL,cAAW;AAAA,oBACX;AAAA,oBACA,OAAO;AAAA,sBACL,YAAY;AAAA,sBACZ,QAAQ;AAAA,sBACR,YAAY;AAAA,sBACZ,SAAS;AAAA,sBACT,QAAQ;AAAA,sBACR,SAAS;AAAA,sBACT,YAAY;AAAA,sBACZ,gBAAgB;AAAA,sBAChB,QAAQ,WAAW,YAAY;AAAA,oBAAA;AAAA,oBAGjC,UAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACC,MAAK;AAAA,wBACL,MAAM;AAAA,wBACN,OAAO,WAAY,MAAM,QAAQ,OAAO,GAAG,KAAK,YAAc,MAAM,QAAQ,OAAO,GAAG,KAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,kBAC7F;AAAA,gBAAA;AAAA,cACF;AAAA,YAAA,IAEA;AAAA,YAEH,aAAa,oBAAC,OAAA,EAAO,GAAG,YAAY,IAAK;AAAA,UAAA,GAC5C;AAAA,UAEC,iBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,IAAI;AAAA,gBACF,OAAO,MAAM,QAAQ,OAAO,GAAG,KAAK;AAAA,gBACpC,IAAI;AAAA,cAAA;AAAA,cAGL,UAAA;AAAA,YAAA;AAAA,UAAA,IAED;AAAA,QAAA,GACN;AAAA,6BAEC,OAAA,EAAM,WAAU,OAAM,SAAS,GAAG,YAAW,UAC3C,UAAA;AAAA,UAAA,iBAAiB,OAAO,UAAU,WACjC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,IAAI,EAAE,OAAO,MAAM,QAAQ,OAAO,GAAG,KAAK,WAAW,IAAI,OAAO,YAAY,SAAA;AAAA,cAE3E,UAAA;AAAA,gBAAA;AAAA,gBAAY;AAAA,gBAAE;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA,IAEf;AAAA,UAEH,qBACC,qBAAC,OAAA,EAAM,WAAU,OAAM,SAAS,KAAK,YAAW,UAAS,IAAI,EAAE,IAAI,KAChE,UAAA;AAAA,YAAA,iBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,UAAS;AAAA,gBACT,WAAU;AAAA,gBACV,UAAU,YAAY;AAAA,gBACtB,SAAS;AAAA,gBACT,IAAI;AAAA,gBAEJ,UAAA,oBAAC,MAAA,EAAK,MAAK,eAAc,MAAM,GAAA,CAAI;AAAA,cAAA;AAAA,YAAA,IAEnC;AAAA,YACH,iBACC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,SAAQ;AAAA,gBACR,MAAK;AAAA,gBACL,UAAS;AAAA,gBACT,WAAU;AAAA,gBACV,UAAU,YAAY;AAAA,gBACtB,SAAS;AAAA,gBACT,IAAI;AAAA,gBAEJ,UAAA,oBAAC,MAAA,EAAK,MAAK,gBAAe,MAAM,GAAA,CAAI;AAAA,cAAA;AAAA,YAAA,IAEpC;AAAA,UAAA,EAAA,CACN,IACE;AAAA,UAEH,eACC,WACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,kBAAkB;AAAA,gBAChB,eAAe,CAAC,EAAE,eAAA,MAChB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,SAAQ;AAAA,oBACR,MAAK;AAAA,oBACL,UAAS;AAAA,oBACT,WAAU;AAAA,oBACV;AAAA,oBACA,SAAS;AAAA,oBACT,IAAI;AAAA,sBACF,OAAO;AAAA,sBACP,QAAQ;AAAA,sBACR,UAAU;AAAA,sBACV,SAAS;AAAA,sBACT,cAAc;AAAA,oBAAA;AAAA,oBAGhB,UAAA,oBAAC,MAAA,EAAK,MAAK,gBAAe,MAAM,GAAA,CAAI;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACtC;AAAA,YAEJ;AAAA,UAAA,IAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,UAAS;AAAA,cACT,WAAU;AAAA,cACV;AAAA,cACA,IAAI,EAAE,OAAO,IAAI,QAAQ,IAAI,UAAU,IAAI,SAAS,OAAO,cAAc,OAAA;AAAA,cAEzE,UAAA,oBAAC,MAAA,EAAK,MAAK,gBAAe,MAAM,GAAA,CAAI;AAAA,YAAA;AAAA,UAAA,IAGtC;AAAA,QAAA,EAAA,CACN;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/carousel/index.d.ts

@@ -0,0 +1,5 @@
+export { Carousel } from './Carousel';
+export type { CarouselProps, CarouselSize, CarouselIndicatorType, CarouselIndicatorPosition, CarouselButtonPosition, CarouselDataAttributes, } from './Carousel';
+export { CarouselHeader } from './CarouselHeader';
+export type { CarouselHeaderProps } from './CarouselHeader';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/carousel/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/carousel/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,YAAY,EACV,aAAa,EACb,YAAY,EACZ,qBAAqB,EACrB,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,GACvB,MAAM,YAAY,CAAA;AAEnB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA;AACjD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAA"}

package/dist/components/catalog.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Zenith component catalog
+ *
+ * Features:
+ * - Maintains component implementation status (ready/planned)
+ * - Parses component groups from raw text data
+ * - Provides component metadata (status, source path, notes)
+ */
+type ComponentStatus = 'ready' | 'planned';
+export interface ComponentItemDetail {
+    label: string;
+    status: ComponentStatus;
+    source?: string;
+    notes?: string;
+}
+export interface ComponentGroup {
+    name: string;
+    items: ComponentItemDetail[];
+}
+export declare const zenithComponentCatalog: ComponentGroup[];
+export {};
+//# sourceMappingURL=catalog.d.ts.map

package/dist/components/catalog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"catalog.d.ts","sourceRoot":"","sources":["../../src/components/catalog.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,KAAK,eAAe,GAAG,OAAO,GAAG,SAAS,CAAA;AAE1C,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,eAAe,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,EAAE,mBAAmB,EAAE,CAAA;CAC7B;AAg5BD,eAAO,MAAM,sBAAsB,EAAE,cAAc,EAAmB,CAAA"}