@clickhouse/click-ui 0.6.1 → 0.6.2-rc1

package/dist/cjs/components/MultiAccordion/MultiAccordion.css

@@ -0,0 +1,200 @@
+.multi-accordion__ntYTM {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+  gap: var(--multi-accordion-gap);
+}
+
+.multi-accordion_fill-width__Rnqso {
+  width: 100%;
+}
+
+.multi-accordion_gap_none__NrRxK {
+  --multi-accordion-gap: var(--click-container-gap-none);
+}
+
+.multi-accordion_gap_xxs__1FSFF {
+  --multi-accordion-gap: var(--click-container-gap-xxs);
+}
+
+.multi-accordion_gap_xs__oHQut {
+  --multi-accordion-gap: var(--click-container-gap-xs);
+}
+
+.multi-accordion_gap_sm__hxMme {
+  --multi-accordion-gap: var(--click-container-gap-sm);
+}
+
+.multi-accordion_gap_md__epg85 {
+  --multi-accordion-gap: var(--click-container-gap-md);
+}
+
+.multi-accordion_gap_lg__iYlYQ {
+  --multi-accordion-gap: var(--click-container-gap-lg);
+}
+
+.multi-accordion_gap_xl__1uarr {
+  --multi-accordion-gap: var(--click-container-gap-xl);
+}
+
+.multi-accordion_gap_xxl__m9X9V {
+  --multi-accordion-gap: var(--click-container-gap-xxl);
+}
+
+.multi-accordion__item__RHKu8 {
+  border: 1px solid var(--click-global-color-stroke-default);
+  border-radius: var(--border-radii-1);
+  background-color: var(--click-global-color-background-default);
+}
+
+.multi-accordion__item_no-border__ZtqMX {
+  border: none;
+}
+
+.multi-accordion__item_fill-width__zyq4f {
+  width: 100%;
+}
+
+.multi-accordion__trigger__etXVq {
+  display: flex;
+  width: 100%;
+  padding: var(--multi-accordion-trigger-padding);
+  align-items: center;
+  gap: var(--multi-accordion-trigger-gap);
+  border: none;
+  border-radius: inherit;
+  background-color: transparent;
+  color: var(--multi-accordion-label-default);
+  font: var(--multi-accordion-font-default);
+}
+
+.multi-accordion__trigger__etXVq:active {
+  color: var(--multi-accordion-label-active);
+  font: var(--multi-accordion-font-active);
+}
+
+.multi-accordion__trigger__etXVq:hover {
+  background: var(--click-global-color-stroke-default);
+  color: var(--multi-accordion-label-hover);
+  font: var(--multi-accordion-font-hover);
+  cursor: pointer;
+}
+
+.multi-accordion__trigger__etXVq [data-icon='accordion-status'] {
+  color: var(--global-color-stroke-intense);
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] [data-icon='accordion-status'] {
+  color: var(--global-color-accent-default);
+}
+
+.multi-accordion__trigger_size_none__o4eWF {
+  --multi-accordion-trigger-padding: var(--click-container-space-none);
+  --multi-accordion-trigger-gap: var(--click-accordion-sm-space-gap);
+}
+
+.multi-accordion__trigger_size_sm__80VXp {
+  --multi-accordion-trigger-padding: var(--click-container-space-sm);
+  --multi-accordion-trigger-gap: var(--click-accordion-sm-space-gap);
+}
+
+.multi-accordion__trigger_size_md__uAE8q {
+  --multi-accordion-trigger-padding: var(--click-container-space-md);
+  --multi-accordion-trigger-gap: var(--click-accordion-md-space-gap);
+}
+
+.multi-accordion__trigger_size_lg__VHN7C {
+  --multi-accordion-trigger-padding: var(--click-container-space-lg);
+  --multi-accordion-trigger-gap: var(--click-accordion-lg-space-gap);
+}
+
+.multi-accordion__trigger_font_sm__xnOLy {
+  --multi-accordion-font-default: var(--click-accordion-sm-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-sm-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-sm-typography-label-active);
+}
+
+.multi-accordion__trigger_font_md__hTIA8 {
+  --multi-accordion-font-default: var(--click-accordion-md-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-md-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-md-typography-label-active);
+}
+
+.multi-accordion__trigger_font_lg__yMSpQ {
+  --multi-accordion-font-default: var(--click-accordion-lg-typography-label-default);
+  --multi-accordion-font-hover: var(--click-accordion-lg-typography-label-hover);
+  --multi-accordion-font-active: var(--click-accordion-lg-typography-label-active);
+}
+
+.multi-accordion__trigger_color_default__X7f4v {
+  --multi-accordion-label-default: var(--click-accordion-color-default-label-default);
+  --multi-accordion-label-hover: var(--click-accordion-color-default-label-hover);
+  --multi-accordion-label-active: var(--click-accordion-color-default-label-active);
+}
+
+.multi-accordion__trigger_color_link__hXDgW {
+  --multi-accordion-label-default: var(--click-accordion-color-link-label-default);
+  --multi-accordion-label-hover: var(--click-accordion-color-link-label-hover);
+  --multi-accordion-label-active: var(--click-accordion-color-link-label-active);
+}
+
+.multi-accordion__icon-wrapper__uhWrs {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 200ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.multi-accordion__trigger__etXVq[data-state='open'] .multi-accordion__icon-wrapper__uhWrs {
+  transform: rotate(90deg);
+}
+
+.multi-accordion__icons-wrapper__67uu- {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.multi-accordion__content__Gz0po {
+  padding: var(--multi-accordion-content-padding);
+  padding-top: 0;
+}
+
+.multi-accordion__content_padding_none__GgbED {
+  --multi-accordion-content-padding: var(--click-container-space-none);
+}
+
+.multi-accordion__content_padding_sm__nmI7q {
+  --multi-accordion-content-padding: var(--click-container-space-sm);
+}
+
+.multi-accordion__content_padding_md__XD2Ki {
+  --multi-accordion-content-padding: var(--click-container-space-md);
+}
+
+.multi-accordion__content_padding_lg__W-njL {
+  --multi-accordion-content-padding: var(--click-container-space-lg);
+}
+
+.multi-accordion__title__kLWyH {
+  overflow: hidden;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.multi-accordion__status-icon__MNVgx {
+}
+
+.multi-accordion__status-icon_completed__z5-XJ svg path {
+  fill: var(--global-color-accent-default) !important;
+  stroke: var(--global-color-background-default) !important;
+}
+
+.multi-accordion__status-icon_completed__z5-XJ svg path:first-of-type {
+  stroke: var(--global-color-accent-default) !important;
+}

package/dist/cjs/components/MultiAccordion/MultiAccordion.module.css.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"multi-accordion": "multi-accordion__ntYTM",
+	"multi-accordion_fill-width": "multi-accordion_fill-width__Rnqso",
+	"multi-accordion_gap_none": "multi-accordion_gap_none__NrRxK",
+	"multi-accordion_gap_xxs": "multi-accordion_gap_xxs__1FSFF",
+	"multi-accordion_gap_xs": "multi-accordion_gap_xs__oHQut",
+	"multi-accordion_gap_sm": "multi-accordion_gap_sm__hxMme",
+	"multi-accordion_gap_md": "multi-accordion_gap_md__epg85",
+	"multi-accordion_gap_lg": "multi-accordion_gap_lg__iYlYQ",
+	"multi-accordion_gap_xl": "multi-accordion_gap_xl__1uarr",
+	"multi-accordion_gap_xxl": "multi-accordion_gap_xxl__m9X9V",
+	"multi-accordion__item": "multi-accordion__item__RHKu8",
+	"multi-accordion__item_no-border": "multi-accordion__item_no-border__ZtqMX",
+	"multi-accordion__item_fill-width": "multi-accordion__item_fill-width__zyq4f",
+	"multi-accordion__trigger": "multi-accordion__trigger__etXVq",
+	"multi-accordion__trigger_size_none": "multi-accordion__trigger_size_none__o4eWF",
+	"multi-accordion__trigger_size_sm": "multi-accordion__trigger_size_sm__80VXp",
+	"multi-accordion__trigger_size_md": "multi-accordion__trigger_size_md__uAE8q",
+	"multi-accordion__trigger_size_lg": "multi-accordion__trigger_size_lg__VHN7C",
+	"multi-accordion__trigger_font_sm": "multi-accordion__trigger_font_sm__xnOLy",
+	"multi-accordion__trigger_font_md": "multi-accordion__trigger_font_md__hTIA8",
+	"multi-accordion__trigger_font_lg": "multi-accordion__trigger_font_lg__yMSpQ",
+	"multi-accordion__trigger_color_default": "multi-accordion__trigger_color_default__X7f4v",
+	"multi-accordion__trigger_color_link": "multi-accordion__trigger_color_link__hXDgW",
+	"multi-accordion__icon-wrapper": "multi-accordion__icon-wrapper__uhWrs",
+	"multi-accordion__icons-wrapper": "multi-accordion__icons-wrapper__67uu-",
+	"multi-accordion__content": "multi-accordion__content__Gz0po",
+	"multi-accordion__content_padding_none": "multi-accordion__content_padding_none__GgbED",
+	"multi-accordion__content_padding_sm": "multi-accordion__content_padding_sm__nmI7q",
+	"multi-accordion__content_padding_md": "multi-accordion__content_padding_md__XD2Ki",
+	"multi-accordion__content_padding_lg": "multi-accordion__content_padding_lg__W-njL",
+	"multi-accordion__title": "multi-accordion__title__kLWyH",
+	"multi-accordion__status-icon": "multi-accordion__status-icon__MNVgx",
+	"multi-accordion__status-icon_completed": "multi-accordion__status-icon_completed__z5-XJ"
+};
+
+exports.default = styles;
+//# sourceMappingURL=MultiAccordion.module.css.cjs.map

package/dist/cjs/components/MultiAccordion/MultiAccordion.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiAccordion.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/MultiAccordion/index.cjs

@@ -1,15 +1,18 @@
+require("./MultiAccordion.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const RadixAccordion = require('@radix-ui/react-accordion');
-const styledComponents = require('styled-components');
 const react = require('react');
+const cva = require('../../lib/cva.cjs');
+const MultiAccordion_module = require('./MultiAccordion.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
-const Text = require('../Text/index.cjs');
 const Container = require('../Container/index.cjs');
+const Text = require('../Text/index.cjs');
 const Spacer = require('../Spacer/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -37,6 +40,28 @@ const MultiAccordionContext = react.createContext({
   showBorder: true,
   showCheck: false
 });
+const rootVariants = classVarianceAuthority.cva(MultiAccordion_module.default["multi-accordion"], {
+  variants: {
+    fillWidth: {
+      true: MultiAccordion_module.default["multi-accordion_fill-width"],
+      false: ""
+    },
+    gap: {
+      none: MultiAccordion_module.default["multi-accordion_gap_none"],
+      xxs: MultiAccordion_module.default["multi-accordion_gap_xxs"],
+      xs: MultiAccordion_module.default["multi-accordion_gap_xs"],
+      sm: MultiAccordion_module.default["multi-accordion_gap_sm"],
+      md: MultiAccordion_module.default["multi-accordion_gap_md"],
+      lg: MultiAccordion_module.default["multi-accordion_gap_lg"],
+      xl: MultiAccordion_module.default["multi-accordion_gap_xl"],
+      xxl: MultiAccordion_module.default["multi-accordion_gap_xxl"]
+    }
+  },
+  defaultVariants: {
+    fillWidth: true,
+    gap: "md"
+  }
+});
 const MultiAccordion = ({
   size = "md",
   children,
@@ -45,6 +70,7 @@ const MultiAccordion = ({
   showBorder = true,
   gap = "md",
   markAsCompleted,
+  className,
   ...delegated
 }) => {
   const contextValue = {
@@ -54,8 +80,64 @@ const MultiAccordion = ({
     showCheck,
     markAsCompleted
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(AccordionRoot, { $fillWidth: fillWidth, $gap: gap, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(MultiAccordionContext.Provider, { value: contextValue, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixAccordion__namespace.Root, { ...delegated, className: cva.cn(rootVariants({
+    fillWidth,
+    gap
+  }), className), children: /* @__PURE__ */ jsxRuntime.jsx(MultiAccordionContext.Provider, { value: contextValue, children }) });
 };
+const itemVariants = classVarianceAuthority.cva(MultiAccordion_module.default["multi-accordion__item"], {
+  variants: {
+    showBorder: {
+      true: "",
+      false: MultiAccordion_module.default["multi-accordion__item_no-border"]
+    },
+    fillWidth: {
+      true: MultiAccordion_module.default["multi-accordion__item_fill-width"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    showBorder: true,
+    fillWidth: true
+  }
+});
+const triggerVariants = classVarianceAuthority.cva(MultiAccordion_module.default["multi-accordion__trigger"], {
+  variants: {
+    size: {
+      none: MultiAccordion_module.default["multi-accordion__trigger_size_none"],
+      sm: MultiAccordion_module.default["multi-accordion__trigger_size_sm"],
+      md: MultiAccordion_module.default["multi-accordion__trigger_size_md"],
+      lg: MultiAccordion_module.default["multi-accordion__trigger_size_lg"]
+    },
+    font: {
+      sm: MultiAccordion_module.default["multi-accordion__trigger_font_sm"],
+      md: MultiAccordion_module.default["multi-accordion__trigger_font_md"],
+      lg: MultiAccordion_module.default["multi-accordion__trigger_font_lg"]
+    },
+    color: {
+      default: MultiAccordion_module.default["multi-accordion__trigger_color_default"],
+      link: MultiAccordion_module.default["multi-accordion__trigger_color_link"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    font: "md",
+    color: "default"
+  }
+});
+const contentVariants = classVarianceAuthority.cva(MultiAccordion_module.default["multi-accordion__content"], {
+  variants: {
+    size: {
+      none: MultiAccordion_module.default["multi-accordion__content_padding_none"],
+      sm: MultiAccordion_module.default["multi-accordion__content_padding_sm"],
+      md: MultiAccordion_module.default["multi-accordion__content_padding_md"],
+      lg: MultiAccordion_module.default["multi-accordion__content_padding_lg"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 const MultiAccordionItem = ({
   value,
   title,
@@ -65,6 +147,7 @@ const MultiAccordionItem = ({
   gap,
   children,
   isCompleted = false,
+  className,
   ...props
 }) => {
   const {
@@ -81,18 +164,27 @@ const MultiAccordionItem = ({
     }
   };
   const customSize = size === "none" ? "sm" : size;
-  return /* @__PURE__ */ jsxRuntime.jsxs(AccordionItem, { value, $showBorder: showBorder, $fillWidth: fillWidth, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(AccordionTrigger, { $size: size, color, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(AccordionIconsWrapper, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(RadixAccordion__namespace.Item, { value, ...props, className: cva.cn(itemVariants({
+    showBorder,
+    fillWidth
+  }), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RadixAccordion__namespace.Trigger, { className: triggerVariants({
+      size,
+      font: customSize,
+      color: color ?? "default"
+    }), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiAccordion_module.default["multi-accordion__icons-wrapper"], children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: MultiAccordion_module.default["multi-accordion__icon-wrapper"], children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
         icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: iconSize ?? customSize }) : null
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(AccordionItemTitle, { component: "span", size: customSize, fillWidth, children: title }),
-        showCheck && /* @__PURE__ */ jsxRuntime.jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
+        /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { className: MultiAccordion_module.default["multi-accordion__title"], component: "span", size: customSize, fillWidth, children: title }),
+        showCheck && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: cva.cn(MultiAccordion_module.default["multi-accordion__status-icon"], isCompleted && MultiAccordion_module.default["multi-accordion__status-icon_completed"]), name: isCompleted ? "check-in-circle" : "circle", size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs(AccordionContent, { $padding: size, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(RadixAccordion__namespace.Content, { className: contentVariants({
+      size
+    }), children: [
       /* @__PURE__ */ jsxRuntime.jsx(Spacer.Spacer, { size: gap }),
       children
     ] })
@@ -100,88 +192,6 @@ const MultiAccordionItem = ({
 };
 MultiAccordionItem.displayName = "MultiAccordion.Item";
 MultiAccordion.Item = MultiAccordionItem;
-const AccordionRoot = styledComponents.styled(RadixAccordion__namespace.Root).withConfig({
-  componentId: "sc-1lb3204-0"
-})(["display:flex;flex-direction:column;justify-content:start;align-items:start;gap:", ";", ";"], ({
-  theme,
-  $gap
-}) => theme.click.container.gap[$gap], ({
-  $fillWidth
-}) => $fillWidth && "width: 100%");
-const AccordionItem = styledComponents.styled(RadixAccordion__namespace.Item).withConfig({
-  componentId: "sc-1lb3204-1"
-})(["", ";", ";"], ({
-  theme,
-  $showBorder
-}) => `
-    border: ${$showBorder ? `1px solid ${theme.click.global.color.stroke.default}` : "none"};
-    border-radius: ${theme.border.radii[1]};
-    background-color: ${theme.click.global.color.background.default};
-  `, ({
-  $fillWidth
-}) => $fillWidth && "width: 100%");
-const AccordionTrigger = styledComponents.styled(RadixAccordion__namespace.Trigger).withConfig({
-  componentId: "sc-1lb3204-2"
-})(["width:100%;border:none;padding:0;background-color:transparent;display:flex;align-items:center;", ";border-radius:inherit;&[data-state='open']{border-bottom-left-radius:0px;border-bottom-right-radius:0px;[data-icon='accordion-status']{color:", ";}}"], ({
-  theme,
-  $size = "md",
-  color = "default"
-}) => {
-  const size = $size === "none" ? "sm" : $size;
-  return `
-    padding: ${theme.click.container.space[$size]};
-    gap: ${theme.click.accordion[size].space.gap};
-    color: ${theme.click.accordion.color[color].label.default};
-    font: ${theme.click.accordion[size].typography.label.default};
-
-    &:active {
-      color: ${theme.click.accordion.color[color].label.active};
-      font: ${theme.click.accordion[size].typography.label.active};
-    }
-
-    &:hover {
-      color: ${theme.click.accordion.color[color].label.hover};
-      background: ${theme.click.global.color.stroke.default};
-      font: ${theme.click.accordion[size].typography.label.hover};
-      cursor: pointer;
-    }
-
-  [data-icon="accordion-status"] {
-    color: ${theme.global.color.stroke.intense};
-  }
-  `;
-}, ({
-  theme
-}) => theme.global.color.accent.default);
-const AccordionIconWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1lb3204-3"
-})(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
-const AccordionIconsWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1lb3204-4"
-})(["display:flex;align-items:center;justify-content:center;"]);
-const CustomIcon = styledComponents.styled(Icon.Icon).withConfig({
-  componentId: "sc-1lb3204-5"
-})(["", ""], ({
-  $isCompleted,
-  theme
-}) => $isCompleted && `
-        svg path {
-          stroke: ${theme.global.color.background.default} !important;
-          &:first-of-type {
-            stroke: ${theme.global.color.accent.default} !important;
-          }
-          fill: ${theme.global.color.accent.default} !important;;
-        }
-      `);
-const AccordionContent = styledComponents.styled(RadixAccordion__namespace.Content).withConfig({
-  componentId: "sc-1lb3204-6"
-})(["padding:", ";padding-top:0;"], ({
-  theme,
-  $padding
-}) => theme.click.container.space[$padding]);
-const AccordionItemTitle = styledComponents.styled(Text.Text).withConfig({
-  componentId: "sc-1lb3204-7"
-})(["overflow:hidden;"]);
 
 exports.MultiAccordion = MultiAccordion;
 //# sourceMappingURL=index.cjs.map

package/dist/cjs/components/MultiAccordion/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/MultiAccordion/MultiAccordion.tsx"],"sourcesContent":["import * as RadixAccordion from '@radix-ui/react-accordion';\nimport { styled } from 'styled-components';\nimport type { AssetSize } from '@/types';\nimport { Icon, type IconName } from '@/components/Icon';\n\nimport { Container } from '@/components/Container';\nimport { Spacer } from '@/components/Spacer';\nimport { Text } from '@/components/Text';\nimport {\n  createContext,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  useContext,\n} from 'react';\nimport { GapOptions, PaddingOptions } from '@/components/Container';\nimport { SizeType as SpacerSizeType } from '@/components/Spacer';\n\ntype Size = 'none' | 'sm' | 'md' | 'lg';\ntype Color = 'default' | 'link';\n\ntype MarkAsCompletedFunctionType = (value: string) => void | Promise<void>;\n\ninterface MultiAccordionCommonProps {\n  /** The accordion items to render */\n  children: React.ReactNode;\n  /** The size variant of the accordion */\n  size?: Size;\n  /** Whether the accordion should fill the full width of its container */\n  fillWidth?: boolean;\n  /** The gap between accordion items */\n  gap?: GapOptions;\n  /** Whether to show a border around each accordion item */\n  showBorder?: boolean;\n  /** Whether to show a check/completion indicator on items */\n  showCheck?: boolean;\n  /** Callback function to mark an item as completed */\n  markAsCompleted?: MarkAsCompletedFunctionType;\n}\n\nexport type MultiAccordionProps = MultiAccordionCommonProps &\n  (\n    | Omit<RadixAccordion.AccordionMultipleProps, 'children'>\n    | Omit<RadixAccordion.AccordionSingleProps, 'children'>\n  );\n\ninterface MultiAccordionContextProps {\n  size: Size;\n  fillWidth: boolean;\n  showBorder: boolean;\n  showCheck: boolean;\n  markAsCompleted?: MarkAsCompletedFunctionType;\n}\n\nconst MultiAccordionContext = createContext<MultiAccordionContextProps>({\n  size: 'md',\n  fillWidth: true,\n  showBorder: true,\n  showCheck: false,\n});\n\nexport const MultiAccordion = ({\n  size = 'md',\n  children,\n  fillWidth = true,\n  showCheck = false,\n  showBorder = true,\n  gap = 'md',\n  markAsCompleted,\n  ...delegated\n}: MultiAccordionProps) => {\n  const contextValue = {\n    size,\n    fillWidth,\n    showBorder,\n    showCheck,\n    markAsCompleted,\n  };\n\n  return (\n    <AccordionRoot\n      $fillWidth={fillWidth}\n      $gap={gap}\n      {...delegated}\n    >\n      <MultiAccordionContext.Provider value={contextValue}>\n        {children}\n      </MultiAccordionContext.Provider>\n    </AccordionRoot>\n  );\n};\ninterface MultiAccordionItemProps extends Omit<\n  RadixAccordion.AccordionItemProps,\n  'title'\n> {\n  /** The title text or element displayed in the accordion item header */\n  title: ReactNode;\n  /** The color variant of the item */\n  color?: Color;\n  /** Optional icon to display next to the title */\n  icon?: IconName;\n  /** Size of the optional icon */\n  iconSize?: AssetSize;\n  /** Gap size between the header and content */\n  gap?: SpacerSizeType;\n  /** Whether this item is marked as completed */\n  isCompleted?: boolean;\n}\n\nconst MultiAccordionItem = ({\n  value,\n  title,\n  color,\n  icon,\n  iconSize,\n  gap,\n  children,\n  isCompleted = false,\n  ...props\n}: MultiAccordionItemProps): ReactElement => {\n  const { fillWidth, size, showBorder, showCheck, markAsCompleted } =\n    useContext(MultiAccordionContext);\n\n  const onClickStatus: MouseEventHandler<HTMLOrSVGElement> = e => {\n    e.preventDefault();\n    if (typeof markAsCompleted === 'function') {\n      markAsCompleted(value);\n    }\n  };\n\n  const customSize = size === 'none' ? 'sm' : size;\n\n  return (\n    <AccordionItem\n      value={value}\n      $showBorder={showBorder}\n      $fillWidth={fillWidth}\n      {...props}\n    >\n      <AccordionTrigger\n        $size={size}\n        color={color}\n      >\n        <AccordionIconsWrapper>\n          <AccordionIconWrapper>\n            <Icon\n              name=\"chevron-right\"\n              size={iconSize ?? customSize}\n              aria-label=\"accordion icon\"\n            />\n          </AccordionIconWrapper>\n          {icon ? (\n            <Icon\n              name={icon}\n              size={iconSize ?? customSize}\n            />\n          ) : null}\n        </AccordionIconsWrapper>\n        <Container\n          isResponsive={false}\n          gap=\"sm\"\n          alignItems=\"center\"\n          fillWidth\n          justifyContent=\"space-between\"\n          component=\"span\"\n          overflow=\"hidden\"\n        >\n          <AccordionItemTitle\n            component=\"span\"\n            size={customSize}\n            fillWidth={fillWidth}\n          >\n            {title}\n          </AccordionItemTitle>\n          {showCheck && (\n            <CustomIcon\n              name={isCompleted ? 'check-in-circle' : 'circle'}\n              $isCompleted={isCompleted}\n              size={iconSize ?? customSize}\n              aria-label=\"accordion icon status\"\n              onClick={onClickStatus}\n              data-icon=\"accordion-status\"\n              data-testid=\"accordion-status-icon\"\n            />\n          )}\n        </Container>\n      </AccordionTrigger>\n      <AccordionContent $padding={size}>\n        <Spacer size={gap} />\n        {children}\n      </AccordionContent>\n    </AccordionItem>\n  );\n};\n\nMultiAccordionItem.displayName = 'MultiAccordion.Item';\nMultiAccordion.Item = MultiAccordionItem;\n\ninterface StyledAccordionRootProps {\n  $fillWidth: boolean;\n  $gap: GapOptions;\n}\n\nconst AccordionRoot = styled(RadixAccordion.Root)<StyledAccordionRootProps>`\n  display: flex;\n  flex-direction: column;\n  justify-content: start;\n  align-items: start;\n  gap: ${({ theme, $gap }) => theme.click.container.gap[$gap]};\n  ${({ $fillWidth }) => $fillWidth && 'width: 100%'};\n`;\n\ninterface StyledAccordionItemProps {\n  $fillWidth: boolean;\n  $showBorder: boolean;\n}\n\nconst AccordionItem = styled(RadixAccordion.Item)<StyledAccordionItemProps>`\n  ${({ theme, $showBorder }) => `\n    border: ${\n      $showBorder ? `1px solid ${theme.click.global.color.stroke.default}` : 'none'\n    };\n    border-radius: ${theme.border.radii[1]};\n    background-color: ${theme.click.global.color.background.default};\n  `};\n  ${({ $fillWidth }) => $fillWidth && 'width: 100%'};\n`;\n\ninterface StyledAccordionTriggerProps {\n  $size?: Size;\n  color?: Color;\n}\n\nconst AccordionTrigger = styled(RadixAccordion.Trigger)<StyledAccordionTriggerProps>`\n  width: 100%;\n  border: none;\n  padding: 0;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  ${({ theme, $size = 'md', color = 'default' }) => {\n    const size: Size = $size === 'none' ? 'sm' : $size;\n\n    return `\n    padding: ${theme.click.container.space[$size]};\n    gap: ${theme.click.accordion[size].space.gap};\n    color: ${theme.click.accordion.color[color].label.default};\n    font: ${theme.click.accordion[size].typography.label.default};\n\n    &:active {\n      color: ${theme.click.accordion.color[color].label.active};\n      font: ${theme.click.accordion[size].typography.label.active};\n    }\n\n    &:hover {\n      color: ${theme.click.accordion.color[color].label.hover};\n      background: ${theme.click.global.color.stroke.default};\n      font: ${theme.click.accordion[size].typography.label.hover};\n      cursor: pointer;\n    }\n\n  [data-icon=\"accordion-status\"] {\n    color: ${theme.global.color.stroke.intense};\n  }\n  `;\n  }};\n  border-radius: inherit;\n  &[data-state='open'] {\n    border-bottom-left-radius: 0px;\n    border-bottom-right-radius: 0px;\n    [data-icon='accordion-status'] {\n      color: ${({ theme }): string => theme.global.color.accent.default};\n    }\n  }\n`;\n\nconst AccordionIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 200ms cubic-bezier(0.87, 0, 0.13, 1);\n\n  ${AccordionTrigger}[data-state='open'] & {\n    transform: rotate(90deg);\n  }\n`;\n\nconst AccordionIconsWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst CustomIcon = styled(Icon)<{ $isCompleted: boolean }>`\n  ${({ $isCompleted, theme }) =>\n    $isCompleted &&\n    `\n        svg path {\n          stroke: ${theme.global.color.background.default} !important;\n          &:first-of-type {\n            stroke: ${theme.global.color.accent.default} !important;\n          }\n          fill: ${theme.global.color.accent.default} !important;;\n        }\n      `}\n`;\n\nconst AccordionContent = styled(RadixAccordion.Content)<{ $padding: PaddingOptions }>`\n  padding: ${({ theme, $padding }): string => theme.click.container.space[$padding]};\n  padding-top: 0;\n`;\n\nconst AccordionItemTitle = styled(Text)`\n  overflow: hidden;\n`;\n"],"names":["MultiAccordionContext","createContext","size","fillWidth","showBorder","showCheck","MultiAccordion","children","gap","markAsCompleted","delegated","contextValue","jsx","MultiAccordionItem","value","title","color","icon","iconSize","isCompleted","props","useContext","onClickStatus","e","preventDefault","customSize","jsxs","Icon","Container","Spacer","displayName","Item","AccordionRoot","styled","RadixAccordion","Root","withConfig","componentId","theme","$gap","click","container","$fillWidth","AccordionItem","$showBorder","global","stroke","default","border","radii","background","AccordionTrigger","Trigger","$size","space","accordion","label","typography","active","hover","intense","accent","AccordionIconWrapper","div","AccordionIconsWrapper","CustomIcon","$isCompleted","AccordionContent","Content","$padding","AccordionItemTitle","Text"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAMA,wBAAwBC,mBAAAA,CAA0C;AAAA,EACtEC,IAAAA,EAAM,IAAA;AAAA,EACNC,SAAAA,EAAW,IAAA;AAAA,EACXC,UAAAA,EAAY,IAAA;AAAA,EACZC,SAAAA,EAAW;AACb,CAAC,CAAA;AAEM,MAAMC,iBAAiBA,CAAC;AAAA,EAC7BJ,IAAAA,GAAO,IAAA;AAAA,EACPK,QAAAA;AAAAA,EACAJ,SAAAA,GAAY,IAAA;AAAA,EACZE,SAAAA,GAAY,KAAA;AAAA,EACZD,UAAAA,GAAa,IAAA;AAAA,EACbI,GAAAA,GAAM,IAAA;AAAA,EACNC,eAAAA;AAAAA,EACA,GAAGC;AACgB,CAAA,KAAM;AACzB,EAAA,MAAMC,YAAAA,GAAe;AAAA,IACnBT,IAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAI;AAAAA,GACF;AAEA,EAAA,uBACEG,cAAA,CAAC,aAAA,EAAA,EACC,UAAA,EAAYT,SAAAA,EACZ,MAAMK,GAAAA,EACN,GAAIE,SAAAA,EAEJ,QAAA,kBAAAE,cAAA,CAAC,sBAAsB,QAAA,EAAtB,EAA+B,KAAA,EAAOD,YAAAA,EACpCJ,UACH,CAAA,EACF,CAAA;AAEJ;AAmBA,MAAMM,qBAAqBA,CAAC;AAAA,EAC1BC,KAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAV,GAAAA;AAAAA,EACAD,QAAAA;AAAAA,EACAY,WAAAA,GAAc,KAAA;AAAA,EACd,GAAGC;AACoB,CAAA,KAAoB;AAC3C,EAAA,MAAM;AAAA,IAAEjB,SAAAA;AAAAA,IAAWD,IAAAA;AAAAA,IAAME,UAAAA;AAAAA,IAAYC,SAAAA;AAAAA,IAAWI;AAAAA,GAAgB,GAC9DY,iBAAWrB,qBAAqB,CAAA;AAElC,EAAA,MAAMsB,gBAAqDC,CAAAA,CAAAA,KAAK;AAC9DA,IAAAA,CAAAA,CAAEC,cAAAA,EAAe;AACjB,IAAA,IAAI,OAAOf,oBAAoB,UAAA,EAAY;AACzCA,MAAAA,eAAAA,CAAgBK,KAAK,CAAA;AAAA,IACvB;AAAA,EACF,CAAA;AAEA,EAAA,MAAMW,UAAAA,GAAavB,IAAAA,KAAS,MAAA,GAAS,IAAA,GAAOA,IAAAA;AAE5C,EAAA,uBACEwB,eAAA,CAAC,iBACC,KAAA,EACA,WAAA,EAAatB,YACb,UAAA,EAAYD,SAAAA,EACZ,GAAIiB,KAAAA,EAEJ,QAAA,EAAA;AAAA,oBAAAM,eAAA,CAAC,gBAAA,EAAA,EACC,KAAA,EAAOxB,IAAAA,EACP,KAAA,EAEA,QAAA,EAAA;AAAA,sBAAAwB,eAAA,CAAC,qBAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAAd,cAAA,CAAC,oBAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAACe,SAAA,EAAA,EACC,IAAA,EAAK,eAAA,EACL,MAAMT,QAAAA,IAAYO,UAAAA,EAClB,YAAA,EAAW,gBAAA,EAAgB,CAAA,EAE/B,CAAA;AAAA,QACCR,IAAAA,kCACEU,SAAA,EAAA,EACC,IAAA,EAAMV,MACN,IAAA,EAAMC,QAAAA,IAAYO,YAAW,CAAA,GAE7B;AAAA,OAAA,EACN,CAAA;AAAA,sBACAC,eAAA,CAACE,mBAAA,EAAA,EACC,YAAA,EAAc,KAAA,EACd,KAAI,IAAA,EACJ,UAAA,EAAW,QAAA,EACX,SAAA,EAAS,MACT,cAAA,EAAe,eAAA,EACf,SAAA,EAAU,MAAA,EACV,UAAS,QAAA,EAET,QAAA,EAAA;AAAA,wBAAAhB,cAAA,CAAC,sBACC,SAAA,EAAU,MAAA,EACV,IAAA,EAAMa,UAAAA,EACN,WAECV,QAAAA,EAAAA,KAAAA,EACH,CAAA;AAAA,QACCV,6BACCO,cAAA,CAAC,UAAA,EAAA,EACC,MAAMO,WAAAA,GAAc,iBAAA,GAAoB,UACxC,YAAA,EAAcA,WAAAA,EACd,MAAMD,QAAAA,IAAYO,UAAAA,EAClB,cAAW,uBAAA,EACX,OAAA,EAASH,eACT,WAAA,EAAU,kBAAA,EACV,eAAY,uBAAA,EAAuB;AAAA,OAAA,EAGzC;AAAA,KAAA,EACF,CAAA;AAAA,oBACAI,eAAA,CAAC,gBAAA,EAAA,EAAiB,QAAA,EAAUxB,IAAAA,EAC1B,QAAA,EAAA;AAAA,sBAAAU,cAAA,CAACiB,aAAA,EAAA,EAAO,MAAMrB,GAAAA,EAAI,CAAA;AAAA,MACjBD;AAAAA,KAAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ,CAAA;AAEAM,kBAAAA,CAAmBiB,WAAAA,GAAc,qBAAA;AACjCxB,cAAAA,CAAeyB,IAAAA,GAAOlB,kBAAAA;AAOtB,MAAMmB,aAAAA,GAAgBC,uBAAAA,CAAOC,yBAAAA,CAAeC,IAAI,EAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,iFAAA,EAAA,GAAA,EAAA,GAAA,GAKxC,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC;AAAK,CAAA,KAAMD,MAAME,KAAAA,CAAMC,SAAAA,CAAUjC,GAAAA,CAAI+B,IAAI,GACxD,CAAC;AAAA,EAAEG;AAAW,CAAA,KAAMA,cAAc,aAAa,CAAA;AAQnD,MAAMC,aAAAA,GAAgBV,uBAAAA,CAAOC,yBAAAA,CAAeH,IAAI,EAACK,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,EAAA,EAAA,GAAA,EAAA,GAAA,GAC7C,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOM;AAAY,CAAA,KAAM;AAAA,YAAA,EAE1BA,WAAAA,GAAc,aAAaN,KAAAA,CAAME,KAAAA,CAAMK,OAAO7B,KAAAA,CAAM8B,MAAAA,CAAOC,OAAO,CAAA,CAAA,GAAK,MAAM,CAAA;AAAA,mBAAA,EAE9DT,KAAAA,CAAMU,MAAAA,CAAOC,KAAAA,CAAM,CAAC,CAAC,CAAA;AAAA,sBAAA,EAClBX,KAAAA,CAAME,KAAAA,CAAMK,MAAAA,CAAO7B,KAAAA,CAAMkC,WAAWH,OAAO,CAAA;AAAA,EAAA,CAAA,EAE/D,CAAC;AAAA,EAAEL;AAAW,CAAA,KAAMA,cAAc,aAAa,CAAA;AAQnD,MAAMS,gBAAAA,GAAmBlB,uBAAAA,CAAOC,yBAAAA,CAAekB,OAAO,EAAChB,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,gGAAA,EAAA,gJAAA,EAAA,KAAA,GAOnD,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOe,KAAAA,GAAQ,IAAA;AAAA,EAAMrC,KAAAA,GAAQ;AAAU,CAAA,KAAM;AAChD,EAAA,MAAMd,IAAAA,GAAamD,KAAAA,KAAU,MAAA,GAAS,IAAA,GAAOA,KAAAA;AAE7C,EAAA,OAAO;AAAA,aAAA,EACIf,KAAAA,CAAME,KAAAA,CAAMC,SAAAA,CAAUa,KAAAA,CAAMD,KAAK,CAAC,CAAA;AAAA,SAAA,EACtCf,MAAME,KAAAA,CAAMe,SAAAA,CAAUrD,IAAI,CAAA,CAAEoD,MAAM9C,GAAG,CAAA;AAAA,WAAA,EACnC8B,MAAME,KAAAA,CAAMe,SAAAA,CAAUvC,MAAMA,KAAK,CAAA,CAAEwC,MAAMT,OAAO,CAAA;AAAA,UAAA,EACjDT,MAAME,KAAAA,CAAMe,SAAAA,CAAUrD,IAAI,CAAA,CAAEuD,UAAAA,CAAWD,MAAMT,OAAO,CAAA;;AAAA;AAAA,aAAA,EAGjDT,MAAME,KAAAA,CAAMe,SAAAA,CAAUvC,MAAMA,KAAK,CAAA,CAAEwC,MAAME,MAAM,CAAA;AAAA,YAAA,EAChDpB,MAAME,KAAAA,CAAMe,SAAAA,CAAUrD,IAAI,CAAA,CAAEuD,UAAAA,CAAWD,MAAME,MAAM,CAAA;AAAA;;AAAA;AAAA,aAAA,EAIlDpB,MAAME,KAAAA,CAAMe,SAAAA,CAAUvC,MAAMA,KAAK,CAAA,CAAEwC,MAAMG,KAAK,CAAA;AAAA,kBAAA,EACzCrB,KAAAA,CAAME,KAAAA,CAAMK,MAAAA,CAAO7B,KAAAA,CAAM8B,OAAOC,OAAO,CAAA;AAAA,YAAA,EAC7CT,MAAME,KAAAA,CAAMe,SAAAA,CAAUrD,IAAI,CAAA,CAAEuD,UAAAA,CAAWD,MAAMG,KAAK,CAAA;AAAA;AAAA;;AAAA;AAAA,WAAA,EAKnDrB,KAAAA,CAAMO,MAAAA,CAAO7B,KAAAA,CAAM8B,MAAAA,CAAOc,OAAO,CAAA;AAAA;AAAA,EAAA,CAAA;AAG5C,CAAA,EAMa,CAAC;AAAA,EAAEtB;AAAM,CAAA,KAAcA,KAAAA,CAAMO,MAAAA,CAAO7B,KAAAA,CAAM6C,MAAAA,CAAOd,OAAO,CAAA;AAKvE,MAAMe,oBAAAA,GAAuB7B,uBAAAA,CAAO8B,GAAAA,CAAG3B,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,gHAAA,EAAA,iDAAA,GAMnCc,gBAAgB,CAAA;AAKpB,MAAMa,qBAAAA,GAAwB/B,uBAAAA,CAAO8B,GAAAA,CAAG3B,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yDAAA,CAAA,CAAA;AAMxC,MAAM4B,UAAAA,GAAahC,uBAAAA,CAAON,SAAI,CAAA,CAACS,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAC3B,CAAC;AAAA,EAAE6B,YAAAA;AAAAA,EAAc5B;AAAM,CAAA,KACvB4B,YAAAA,IACA;AAAA;AAAA,kBAAA,EAEgB5B,KAAAA,CAAMO,MAAAA,CAAO7B,KAAAA,CAAMkC,UAAAA,CAAWH,OAAO,CAAA;AAAA;AAAA,oBAAA,EAEnCT,KAAAA,CAAMO,MAAAA,CAAO7B,KAAAA,CAAM6C,MAAAA,CAAOd,OAAO,CAAA;AAAA;AAAA,gBAAA,EAErCT,KAAAA,CAAMO,MAAAA,CAAO7B,KAAAA,CAAM6C,MAAAA,CAAOd,OAAO,CAAA;AAAA;AAAA,MAAA,CAE5C,CAAA;AAGP,MAAMoB,gBAAAA,GAAmBlC,uBAAAA,CAAOC,yBAAAA,CAAekC,OAAO,EAAChC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,UAAA,EAAA,iBAAA,GAC1C,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAO+B;AAAS,CAAA,KAAc/B,KAAAA,CAAME,KAAAA,CAAMC,SAAAA,CAAUa,KAAAA,CAAMe,QAAQ,CAAC,CAAA;AAInF,MAAMC,kBAAAA,GAAqBrC,uBAAAA,CAAOsC,SAAI,CAAA,CAACnC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,kBAAA,CAAA,CAAA;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/MultiAccordion/MultiAccordion.tsx"],"sourcesContent":["import * as RadixAccordion from '@radix-ui/react-accordion';\nimport type { AssetSize } from '@/types';\nimport { Icon, type IconName } from '@/components/Icon';\n\nimport { Container } from '@/components/Container';\nimport { Spacer } from '@/components/Spacer';\nimport { Text } from '@/components/Text';\nimport {\n  createContext,\n  MouseEventHandler,\n  ReactElement,\n  ReactNode,\n  useContext,\n} from 'react';\nimport { GapOptions } from '@/components/Container';\nimport { SizeType as SpacerSizeType } from '@/components/Spacer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './MultiAccordion.module.css';\n\ntype Size = 'none' | 'sm' | 'md' | 'lg';\ntype Color = 'default' | 'link';\n\ntype MarkAsCompletedFunctionType = (value: string) => void | Promise<void>;\n\ninterface MultiAccordionCommonProps {\n  /** The accordion items to render */\n  children: React.ReactNode;\n  /** The size variant of the accordion */\n  size?: Size;\n  /** Whether the accordion should fill the full width of its container */\n  fillWidth?: boolean;\n  /** The gap between accordion items */\n  gap?: GapOptions;\n  /** Whether to show a border around each accordion item */\n  showBorder?: boolean;\n  /** Whether to show a check/completion indicator on items */\n  showCheck?: boolean;\n  /** Callback function to mark an item as completed */\n  markAsCompleted?: MarkAsCompletedFunctionType;\n}\n\nexport type MultiAccordionProps = MultiAccordionCommonProps &\n  (\n    | Omit<RadixAccordion.AccordionMultipleProps, 'children'>\n    | Omit<RadixAccordion.AccordionSingleProps, 'children'>\n  );\n\ninterface MultiAccordionContextProps {\n  size: Size;\n  fillWidth: boolean;\n  showBorder: boolean;\n  showCheck: boolean;\n  markAsCompleted?: MarkAsCompletedFunctionType;\n}\n\nconst MultiAccordionContext = createContext<MultiAccordionContextProps>({\n  size: 'md',\n  fillWidth: true,\n  showBorder: true,\n  showCheck: false,\n});\n\nconst rootVariants = cva(styles['multi-accordion'], {\n  variants: {\n    fillWidth: {\n      true: styles['multi-accordion_fill-width'],\n      false: '',\n    },\n    gap: {\n      none: styles['multi-accordion_gap_none'],\n      xxs: styles['multi-accordion_gap_xxs'],\n      xs: styles['multi-accordion_gap_xs'],\n      sm: styles['multi-accordion_gap_sm'],\n      md: styles['multi-accordion_gap_md'],\n      lg: styles['multi-accordion_gap_lg'],\n      xl: styles['multi-accordion_gap_xl'],\n      xxl: styles['multi-accordion_gap_xxl'],\n    },\n  },\n  defaultVariants: {\n    fillWidth: true,\n    gap: 'md',\n  },\n});\n\nexport const MultiAccordion = ({\n  size = 'md',\n  children,\n  fillWidth = true,\n  showCheck = false,\n  showBorder = true,\n  gap = 'md',\n  markAsCompleted,\n  className,\n  ...delegated\n}: MultiAccordionProps) => {\n  const contextValue = {\n    size,\n    fillWidth,\n    showBorder,\n    showCheck,\n    markAsCompleted,\n  };\n\n  return (\n    <RadixAccordion.Root\n      {...delegated}\n      className={cn(rootVariants({ fillWidth, gap }), className)}\n    >\n      <MultiAccordionContext.Provider value={contextValue}>\n        {children}\n      </MultiAccordionContext.Provider>\n    </RadixAccordion.Root>\n  );\n};\ninterface MultiAccordionItemProps extends Omit<\n  RadixAccordion.AccordionItemProps,\n  'title'\n> {\n  /** The title text or element displayed in the accordion item header */\n  title: ReactNode;\n  /** The color variant of the item */\n  color?: Color;\n  /** Optional icon to display next to the title */\n  icon?: IconName;\n  /** Size of the optional icon */\n  iconSize?: AssetSize;\n  /** Gap size between the header and content */\n  gap?: SpacerSizeType;\n  /** Whether this item is marked as completed */\n  isCompleted?: boolean;\n}\n\nconst itemVariants = cva(styles['multi-accordion__item'], {\n  variants: {\n    showBorder: {\n      true: '',\n      false: styles['multi-accordion__item_no-border'],\n    },\n    fillWidth: {\n      true: styles['multi-accordion__item_fill-width'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    showBorder: true,\n    fillWidth: true,\n  },\n});\n\nconst triggerVariants = cva(styles['multi-accordion__trigger'], {\n  variants: {\n    size: {\n      none: styles['multi-accordion__trigger_size_none'],\n      sm: styles['multi-accordion__trigger_size_sm'],\n      md: styles['multi-accordion__trigger_size_md'],\n      lg: styles['multi-accordion__trigger_size_lg'],\n    },\n    font: {\n      sm: styles['multi-accordion__trigger_font_sm'],\n      md: styles['multi-accordion__trigger_font_md'],\n      lg: styles['multi-accordion__trigger_font_lg'],\n    },\n    color: {\n      default: styles['multi-accordion__trigger_color_default'],\n      link: styles['multi-accordion__trigger_color_link'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    font: 'md',\n    color: 'default',\n  },\n});\n\nconst contentVariants = cva(styles['multi-accordion__content'], {\n  variants: {\n    size: {\n      none: styles['multi-accordion__content_padding_none'],\n      sm: styles['multi-accordion__content_padding_sm'],\n      md: styles['multi-accordion__content_padding_md'],\n      lg: styles['multi-accordion__content_padding_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\nconst MultiAccordionItem = ({\n  value,\n  title,\n  color,\n  icon,\n  iconSize,\n  gap,\n  children,\n  isCompleted = false,\n  className,\n  ...props\n}: MultiAccordionItemProps): ReactElement => {\n  const { fillWidth, size, showBorder, showCheck, markAsCompleted } =\n    useContext(MultiAccordionContext);\n\n  const onClickStatus: MouseEventHandler<HTMLOrSVGElement> = e => {\n    e.preventDefault();\n    if (typeof markAsCompleted === 'function') {\n      markAsCompleted(value);\n    }\n  };\n\n  const customSize = size === 'none' ? 'sm' : size;\n\n  return (\n    <RadixAccordion.Item\n      value={value}\n      {...props}\n      className={cn(itemVariants({ showBorder, fillWidth }), className)}\n    >\n      <RadixAccordion.Trigger\n        className={triggerVariants({\n          size,\n          font: customSize,\n          color: color ?? 'default',\n        })}\n      >\n        <div className={styles['multi-accordion__icons-wrapper']}>\n          <div className={styles['multi-accordion__icon-wrapper']}>\n            <Icon\n              name=\"chevron-right\"\n              size={iconSize ?? customSize}\n              aria-label=\"accordion icon\"\n            />\n          </div>\n          {icon ? (\n            <Icon\n              name={icon}\n              size={iconSize ?? customSize}\n            />\n          ) : null}\n        </div>\n        <Container\n          isResponsive={false}\n          gap=\"sm\"\n          alignItems=\"center\"\n          fillWidth\n          justifyContent=\"space-between\"\n          component=\"span\"\n          overflow=\"hidden\"\n        >\n          <Text\n            className={styles['multi-accordion__title']}\n            component=\"span\"\n            size={customSize}\n            fillWidth={fillWidth}\n          >\n            {title}\n          </Text>\n          {showCheck && (\n            <Icon\n              className={cn(\n                styles['multi-accordion__status-icon'],\n                isCompleted && styles['multi-accordion__status-icon_completed']\n              )}\n              name={isCompleted ? 'check-in-circle' : 'circle'}\n              size={iconSize ?? customSize}\n              aria-label=\"accordion icon status\"\n              onClick={onClickStatus}\n              data-icon=\"accordion-status\"\n              data-testid=\"accordion-status-icon\"\n            />\n          )}\n        </Container>\n      </RadixAccordion.Trigger>\n      <RadixAccordion.Content className={contentVariants({ size })}>\n        <Spacer size={gap} />\n        {children}\n      </RadixAccordion.Content>\n    </RadixAccordion.Item>\n  );\n};\n\nMultiAccordionItem.displayName = 'MultiAccordion.Item';\nMultiAccordion.Item = MultiAccordionItem;\n"],"names":["MultiAccordionContext","createContext","size","fillWidth","showBorder","showCheck","rootVariants","cva","styles","variants","true","false","gap","none","xxs","xs","sm","md","lg","xl","xxl","defaultVariants","MultiAccordion","children","markAsCompleted","className","delegated","contextValue","jsx","RadixAccordion","cn","itemVariants","triggerVariants","font","color","default","link","contentVariants","MultiAccordionItem","value","title","icon","iconSize","isCompleted","props","useContext","onClickStatus","e","preventDefault","customSize","jsxs","Icon","Container","Text","Spacer","displayName","Item"],"mappings":"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"}

package/dist/cjs/components/Popover/index.cjs

@@ -8,6 +8,7 @@ const GenericMenu = require('../GenericMenu/index.cjs');
 const styledComponents = require('styled-components');
 const EmptyButton = require('../EmptyButton/index.cjs');
 const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
+const PortalContext = require('../../providers/PortalContext.cjs');
 const Icon = require('../Icon/index.cjs');
 
 function _interopNamespace(e) {
@@ -87,7 +88,8 @@ const PopoverContent = ({
   container,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { forceMount, container, children: /* @__PURE__ */ jsxRuntime.jsxs(MenuPanel, { as: RadixPopover__namespace.Content, $type: "popover", $showClose: showClose, $showArrow: showArrow, sideOffset: 4, ...props, children: [
+  const portalContainer = PortalContext.useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixPopover__namespace.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(MenuPanel, { as: RadixPopover__namespace.Content, $type: "popover", $showClose: showClose, $showArrow: showArrow, sideOffset: 4, ...props, children: [
     showClose && /* @__PURE__ */ jsxRuntime.jsx(CloseButton, { as: RadixPopover__namespace.Close, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross" }) }),
     showArrow && /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.Arrow, { asChild: true, as: RadixPopover__namespace.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, {}) }),
     children

package/dist/cjs/components/Popover/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { Arrow, GenericMenuPanel } from '@/components/GenericMenu';\nimport { styled } from 'styled-components';\nimport { ReactNode } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { EmptyButton } from '@/components/EmptyButton';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\nconst Trigger = styled(RadixPopover.Trigger)`\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  width: fit-content;\n`;\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <Trigger\n        asChild\n        {...props}\n      >\n        <div>{children}</div>\n      </Trigger>\n      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}\n    </>\n  );\n};\nPopoverTrigger.displayName = 'PopoverTrigger';\nPopover.Trigger = PopoverTrigger;\n\ninterface PopoverContentProps extends RadixPopover.PopoverContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Whether to show a close button in the popover */\n  showClose?: boolean;\n  /** Forces the popover to mount in the DOM even when closed */\n  forceMount?: true;\n  /** Custom container element for the popover portal */\n  container?: HTMLElement | null;\n}\n\nconst MenuPanel = styled(GenericMenuPanel)<{ $showClose?: boolean }>`\n  display: block;\n  padding: ${({ theme }) => theme.click.popover.space.y}\n    ${({ theme }) => theme.click.popover.space.x};\n  background-color: ${({ theme }) => theme.click.popover.color.panel.background.default};\n  border: 1px solid ${({ theme }) => theme.click.popover.color.panel.stroke.default};\n  border-radius: ${({ theme }) => theme.click.popover.radii.all};\n  box-shadow: ${({ theme }) => theme.click.popover.shadow.default};\n\n  ${({ $showClose }) => ($showClose ? 'padding-top: 1rem;' : '')};\n`;\n\nconst CloseButton = styled(EmptyButton)`\n  position: absolute;\n  top: ${({ theme }) => theme.click.popover.space.y};\n  right: ${({ theme }) => theme.click.popover.space.x};\n  width: ${({ theme }) => theme.click.popover.icon.size.width};\n  height: ${({ theme }) => theme.click.popover.icon.size.height};\n`;\n\nconst PopoverContent = ({\n  children,\n  showArrow,\n  showClose,\n  forceMount,\n  container,\n  ...props\n}: PopoverContentProps) => {\n  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={container}\n    >\n      <MenuPanel\n        as={RadixPopover.Content}\n        $type=\"popover\"\n        $showClose={showClose}\n        $showArrow={showArrow}\n        sideOffset={4}\n        {...props}\n      >\n        {showClose && (\n          <CloseButton\n            as={RadixPopover.Close}\n            asChild\n          >\n            <Icon name=\"cross\" />\n          </CloseButton>\n        )}\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixPopover.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </MenuPanel>\n    </RadixPopover.Portal>\n  );\n};\nPopoverContent.displayName = 'PopoverContent';\nPopover.Content = PopoverContent;\n"],"names":["Popover","children","props","RadixPopover","Trigger","styled","withConfig","componentId","PopoverTrigger","anchor","jsxs","Fragment","jsx","displayName","MenuPanel","GenericMenuPanel","theme","click","popover","space","y","x","color","panel","background","default","stroke","radii","all","shadow","$showClose","CloseButton","EmptyButton","icon","size","width","height","PopoverContent","showArrow","showClose","forceMount","container","Content","Close","Icon","Arrow","Popover_Arrow"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import * as RadixPopover from '@radix-ui/react-popover';\nimport { Arrow, GenericMenuPanel } from '@/components/GenericMenu';\nimport { styled } from 'styled-components';\nimport { ReactNode } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { EmptyButton } from '@/components/EmptyButton';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport { useResolvedPortalContainer } from '@/providers/PortalContext';\n\nexport const Popover = ({ children, ...props }: RadixPopover.PopoverProps) => {\n  return <RadixPopover.Root {...props}>{children}</RadixPopover.Root>;\n};\n\nconst Trigger = styled(RadixPopover.Trigger)`\n  background: inherit;\n  border: none;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  width: fit-content;\n`;\ninterface TriggerProps extends RadixPopover.PopoverTriggerProps {\n  anchor?: ReactNode;\n}\n\nconst PopoverTrigger = ({ anchor, children, ...props }: TriggerProps) => {\n  return (\n    <>\n      <Trigger\n        asChild\n        {...props}\n      >\n        <div>{children}</div>\n      </Trigger>\n      {anchor && <RadixPopover.Anchor asChild>{anchor}</RadixPopover.Anchor>}\n    </>\n  );\n};\nPopoverTrigger.displayName = 'PopoverTrigger';\nPopover.Trigger = PopoverTrigger;\n\ninterface PopoverContentProps extends RadixPopover.PopoverContentProps {\n  /** Whether to show an arrow pointing to the trigger element */\n  showArrow?: boolean;\n  /** Whether to show a close button in the popover */\n  showClose?: boolean;\n  /** Forces the popover to mount in the DOM even when closed */\n  forceMount?: true;\n  /** Custom container element for the popover portal */\n  container?: HTMLElement | null;\n}\n\nconst MenuPanel = styled(GenericMenuPanel)<{ $showClose?: boolean }>`\n  display: block;\n  padding: ${({ theme }) => theme.click.popover.space.y}\n    ${({ theme }) => theme.click.popover.space.x};\n  background-color: ${({ theme }) => theme.click.popover.color.panel.background.default};\n  border: 1px solid ${({ theme }) => theme.click.popover.color.panel.stroke.default};\n  border-radius: ${({ theme }) => theme.click.popover.radii.all};\n  box-shadow: ${({ theme }) => theme.click.popover.shadow.default};\n\n  ${({ $showClose }) => ($showClose ? 'padding-top: 1rem;' : '')};\n`;\n\nconst CloseButton = styled(EmptyButton)`\n  position: absolute;\n  top: ${({ theme }) => theme.click.popover.space.y};\n  right: ${({ theme }) => theme.click.popover.space.x};\n  width: ${({ theme }) => theme.click.popover.icon.size.width};\n  height: ${({ theme }) => theme.click.popover.icon.size.height};\n`;\n\nconst PopoverContent = ({\n  children,\n  showArrow,\n  showClose,\n  forceMount,\n  container,\n  ...props\n}: PopoverContentProps) => {\n  const portalContainer = useResolvedPortalContainer(container);\n\n  return (\n    <RadixPopover.Portal\n      forceMount={forceMount}\n      container={portalContainer}\n    >\n      <MenuPanel\n        as={RadixPopover.Content}\n        $type=\"popover\"\n        $showClose={showClose}\n        $showArrow={showArrow}\n        sideOffset={4}\n        {...props}\n      >\n        {showClose && (\n          <CloseButton\n            as={RadixPopover.Close}\n            asChild\n          >\n            <Icon name=\"cross\" />\n          </CloseButton>\n        )}\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixPopover.Arrow}\n            width={20}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </MenuPanel>\n    </RadixPopover.Portal>\n  );\n};\nPopoverContent.displayName = 'PopoverContent';\nPopover.Content = PopoverContent;\n"],"names":["Popover","children","props","RadixPopover","Trigger","styled","withConfig","componentId","PopoverTrigger","anchor","jsxs","Fragment","jsx","displayName","MenuPanel","GenericMenuPanel","theme","click","popover","space","y","x","color","panel","background","default","stroke","radii","all","shadow","$showClose","CloseButton","EmptyButton","icon","size","width","height","PopoverContent","showArrow","showClose","forceMount","container","portalContainer","useResolvedPortalContainer","Content","Close","Icon","Arrow","Popover_Arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,MAAMA,UAAUA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAiC,CAAA,KAAM;AAC5E,EAAA,sCAAQC,uBAAA,CAAa,IAAA,EAAb,KAAsBD,OAAQD,QAAAA,EAAS,CAAA;AACjD;AAEA,MAAMG,OAAAA,GAAUC,uBAAAA,CAAOF,uBAAAA,CAAaC,OAAO,EAACE,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6FAAA,CAAA,CAAA;AAY5C,MAAMC,iBAAiBA,CAAC;AAAA,EAAEC,MAAAA;AAAAA,EAAQR,QAAAA;AAAAA,EAAU,GAAGC;AAAoB,CAAA,KAAM;AACvE,EAAA,uBACEQ,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,OAAA,EAAA,EACC,SAAO,IAAA,EACP,GAAIV,OAEJ,QAAA,kBAAAU,cAAA,CAAC,KAAA,EAAA,EAAKX,UAAS,CAAA,EACjB,CAAA;AAAA,IACCQ,0BAAUG,cAAA,CAACT,uBAAA,CAAa,QAAb,EAAoB,OAAA,EAAO,MAAEM,QAAAA,EAAAA,MAAAA,EAAO;AAAA,GAAA,EAClD,CAAA;AAEJ,CAAA;AACAD,cAAAA,CAAeK,WAAAA,GAAc,gBAAA;AAC7Bb,OAAAA,CAAQI,OAAAA,GAAUI,cAAAA;AAalB,MAAMM,SAAAA,GAAYT,uBAAAA,CAAOU,4BAAgB,CAAA,CAACT,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,wBAAA,EAAA,GAAA,EAAA,oBAAA,EAAA,oBAAA,EAAA,iBAAA,EAAA,cAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EAE7B,CAAC;AAAA,EAAES;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQC,KAAAA,CAAMC,GAChD,CAAC;AAAA,EAAEJ;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQC,KAAAA,CAAME,GACzB,CAAC;AAAA,EAAEL;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,OAAAA,CAAQI,MAAMC,KAAAA,CAAMC,UAAAA,CAAWC,SAC1D,CAAC;AAAA,EAAET;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,OAAAA,CAAQI,MAAMC,KAAAA,CAAMG,MAAAA,CAAOD,SACzD,CAAC;AAAA,EAAET;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQS,KAAAA,CAAMC,KAC5C,CAAC;AAAA,EAAEZ;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQW,MAAAA,CAAOJ,SAEtD,CAAC;AAAA,EAAEK;AAAW,CAAA,KAAOA,UAAAA,GAAa,uBAAuB,EAAG,CAAA;AAGhE,MAAMC,WAAAA,GAAc1B,uBAAAA,CAAO2B,uBAAW,CAAA,CAAC1B,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,wBAAA,EAAA,SAAA,EAAA,WAAA,UAAA,EAAA,GAAA,GAE9B,CAAC;AAAA,EAAES;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQC,KAAAA,CAAMC,GACvC,CAAC;AAAA,EAAEJ;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQC,KAAAA,CAAME,GACzC,CAAC;AAAA,EAAEL;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,OAAAA,CAAQe,IAAAA,CAAKC,IAAAA,CAAKC,OAC5C,CAAC;AAAA,EAAEnB;AAAM,CAAA,KAAMA,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQe,IAAAA,CAAKC,KAAKE,MAAM,CAAA;AAG/D,MAAMC,iBAAiBA,CAAC;AAAA,EACtBpC,QAAAA;AAAAA,EACAqC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGvC;AACgB,CAAA,KAAM;AACzB,EAAA,MAAMwC,eAAAA,GAAkBC,yCAA2BF,SAAS,CAAA;AAE5D,EAAA,uBACE7B,cAAA,CAACT,wBAAa,MAAA,EAAb,EACC,YACA,SAAA,EAAWuC,eAAAA,EAEX,0CAAC,SAAA,EAAA,EACC,EAAA,EAAIvC,wBAAayC,OAAAA,EACjB,KAAA,EAAM,WACN,UAAA,EAAYL,SAAAA,EACZ,YAAYD,SAAAA,EACZ,UAAA,EAAY,CAAA,EACZ,GAAIpC,KAAAA,EAEHqC,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACC3B,cAAA,CAAC,WAAA,EAAA,EACC,EAAA,EAAIT,uBAAAA,CAAa0C,KAAAA,EACjB,OAAA,EAAO,IAAA,EAEP,QAAA,kBAAAjC,cAAA,CAACkC,SAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAO,CAAA,EACpB,CAAA;AAAA,IAEDR,SAAAA,oBACC1B,cAAA,CAACmC,iBAAA,EAAA,EACC,OAAA,EAAO,MACP,EAAA,EAAI5C,uBAAAA,CAAa4C,KAAAA,EACjB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAAnC,cAAA,CAACoC,wBAAa,CAAA,EAChB,CAAA;AAAA,IAED/C;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAoC,cAAAA,CAAexB,WAAAA,GAAc,gBAAA;AAC7Bb,OAAAA,CAAQ4C,OAAAA,GAAUP,cAAAA;;;;"}