@clickhouse/click-ui 0.6.1 → 0.6.2-rc2

package/dist/esm/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/esm/components/MultiAccordion/MultiAccordion.module.css.js

@@ -0,0 +1,38 @@
+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"
+};
+
+export { styles as default };
+//# sourceMappingURL=MultiAccordion.module.css.js.map

package/dist/esm/components/MultiAccordion/MultiAccordion.module.css.js.map

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

package/dist/esm/components/MultiAccordion/index.js

@@ -1,11 +1,14 @@
+import "./MultiAccordion.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixAccordion from '@radix-ui/react-accordion';
-import { styled } from 'styled-components';
 import { createContext, useContext } from 'react';
+import { cn } from '../../lib/cva.js';
+import styles from './MultiAccordion.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
-import { Text } from '../Text/index.js';
 import { Container } from '../Container/index.js';
+import { Text } from '../Text/index.js';
 import { Spacer } from '../Spacer/index.js';
+import { cva } from 'class-variance-authority';
 
 const MultiAccordionContext = createContext({
   size: "md",
@@ -13,6 +16,28 @@ const MultiAccordionContext = createContext({
   showBorder: true,
   showCheck: false
 });
+const rootVariants = cva(styles["multi-accordion"], {
+  variants: {
+    fillWidth: {
+      true: styles["multi-accordion_fill-width"],
+      false: ""
+    },
+    gap: {
+      none: styles["multi-accordion_gap_none"],
+      xxs: styles["multi-accordion_gap_xxs"],
+      xs: styles["multi-accordion_gap_xs"],
+      sm: styles["multi-accordion_gap_sm"],
+      md: styles["multi-accordion_gap_md"],
+      lg: styles["multi-accordion_gap_lg"],
+      xl: styles["multi-accordion_gap_xl"],
+      xxl: styles["multi-accordion_gap_xxl"]
+    }
+  },
+  defaultVariants: {
+    fillWidth: true,
+    gap: "md"
+  }
+});
 const MultiAccordion = ({
   size = "md",
   children,
@@ -21,6 +46,7 @@ const MultiAccordion = ({
   showBorder = true,
   gap = "md",
   markAsCompleted,
+  className,
   ...delegated
 }) => {
   const contextValue = {
@@ -30,8 +56,64 @@ const MultiAccordion = ({
     showCheck,
     markAsCompleted
   };
-  return /* @__PURE__ */ jsx(AccordionRoot, { $fillWidth: fillWidth, $gap: gap, ...delegated, children: /* @__PURE__ */ jsx(MultiAccordionContext.Provider, { value: contextValue, children }) });
+  return /* @__PURE__ */ jsx(RadixAccordion.Root, { ...delegated, className: cn(rootVariants({
+    fillWidth,
+    gap
+  }), className), children: /* @__PURE__ */ jsx(MultiAccordionContext.Provider, { value: contextValue, children }) });
 };
+const itemVariants = cva(styles["multi-accordion__item"], {
+  variants: {
+    showBorder: {
+      true: "",
+      false: styles["multi-accordion__item_no-border"]
+    },
+    fillWidth: {
+      true: styles["multi-accordion__item_fill-width"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    showBorder: true,
+    fillWidth: true
+  }
+});
+const triggerVariants = cva(styles["multi-accordion__trigger"], {
+  variants: {
+    size: {
+      none: styles["multi-accordion__trigger_size_none"],
+      sm: styles["multi-accordion__trigger_size_sm"],
+      md: styles["multi-accordion__trigger_size_md"],
+      lg: styles["multi-accordion__trigger_size_lg"]
+    },
+    font: {
+      sm: styles["multi-accordion__trigger_font_sm"],
+      md: styles["multi-accordion__trigger_font_md"],
+      lg: styles["multi-accordion__trigger_font_lg"]
+    },
+    color: {
+      default: styles["multi-accordion__trigger_color_default"],
+      link: styles["multi-accordion__trigger_color_link"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    font: "md",
+    color: "default"
+  }
+});
+const contentVariants = cva(styles["multi-accordion__content"], {
+  variants: {
+    size: {
+      none: styles["multi-accordion__content_padding_none"],
+      sm: styles["multi-accordion__content_padding_sm"],
+      md: styles["multi-accordion__content_padding_md"],
+      lg: styles["multi-accordion__content_padding_lg"]
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 const MultiAccordionItem = ({
   value,
   title,
@@ -41,6 +123,7 @@ const MultiAccordionItem = ({
   gap,
   children,
   isCompleted = false,
+  className,
   ...props
 }) => {
   const {
@@ -57,18 +140,27 @@ const MultiAccordionItem = ({
     }
   };
   const customSize = size === "none" ? "sm" : size;
-  return /* @__PURE__ */ jsxs(AccordionItem, { value, $showBorder: showBorder, $fillWidth: fillWidth, ...props, children: [
-    /* @__PURE__ */ jsxs(AccordionTrigger, { $size: size, color, children: [
-      /* @__PURE__ */ jsxs(AccordionIconsWrapper, { children: [
-        /* @__PURE__ */ jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
+  return /* @__PURE__ */ jsxs(RadixAccordion.Item, { value, ...props, className: cn(itemVariants({
+    showBorder,
+    fillWidth
+  }), className), children: [
+    /* @__PURE__ */ jsxs(RadixAccordion.Trigger, { className: triggerVariants({
+      size,
+      font: customSize,
+      color: color ?? "default"
+    }), children: [
+      /* @__PURE__ */ jsxs("div", { className: styles["multi-accordion__icons-wrapper"], children: [
+        /* @__PURE__ */ jsx("div", { className: styles["multi-accordion__icon-wrapper"], children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
         icon ? /* @__PURE__ */ jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
       ] }),
       /* @__PURE__ */ jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", overflow: "hidden", children: [
-        /* @__PURE__ */ jsx(AccordionItemTitle, { component: "span", size: customSize, fillWidth, children: title }),
-        showCheck && /* @__PURE__ */ 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__ */ jsx(Text, { className: styles["multi-accordion__title"], component: "span", size: customSize, fillWidth, children: title }),
+        showCheck && /* @__PURE__ */ jsx(SvgImage, { className: cn(styles["multi-accordion__status-icon"], isCompleted && styles["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__ */ jsxs(AccordionContent, { $padding: size, children: [
+    /* @__PURE__ */ jsxs(RadixAccordion.Content, { className: contentVariants({
+      size
+    }), children: [
       /* @__PURE__ */ jsx(Spacer, { size: gap }),
       children
     ] })
@@ -76,88 +168,6 @@ const MultiAccordionItem = ({
 };
 MultiAccordionItem.displayName = "MultiAccordion.Item";
 MultiAccordion.Item = MultiAccordionItem;
-const AccordionRoot = styled(RadixAccordion.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 = styled(RadixAccordion.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 = styled(RadixAccordion.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 = 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 = styled.div.withConfig({
-  componentId: "sc-1lb3204-4"
-})(["display:flex;align-items:center;justify-content:center;"]);
-const CustomIcon = styled(SvgImage).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 = styled(RadixAccordion.Content).withConfig({
-  componentId: "sc-1lb3204-6"
-})(["padding:", ";padding-top:0;"], ({
-  theme,
-  $padding
-}) => theme.click.container.space[$padding]);
-const AccordionItemTitle = styled(Text).withConfig({
-  componentId: "sc-1lb3204-7"
-})(["overflow:hidden;"]);
 
 export { MultiAccordion };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/MultiAccordion/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","MultiAccordionItem","value","title","color","icon","iconSize","isCompleted","props","useContext","onClickStatus","e","preventDefault","customSize","Icon","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":"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"}
+{"version":3,"file":"index.js","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","cn","itemVariants","triggerVariants","font","color","default","link","contentVariants","MultiAccordionItem","value","title","icon","iconSize","isCompleted","props","useContext","onClickStatus","e","preventDefault","customSize","Icon","displayName","Item"],"mappings":"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"}

package/dist/esm/components/Popover/index.js

@@ -4,6 +4,7 @@ import { GenericMenuPanel, Arrow } from '../GenericMenu/index.js';
 import { styled } from 'styled-components';
 import { EmptyButton } from '../EmptyButton/index.js';
 import Popover_Arrow from '../Assets/Icons/Popover-Arrow.js';
+import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 
 const Popover = ({
@@ -63,7 +64,8 @@ const PopoverContent = ({
   container,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount, container, children: /* @__PURE__ */ jsxs(MenuPanel, { as: RadixPopover.Content, $type: "popover", $showClose: showClose, $showArrow: showArrow, sideOffset: 4, ...props, children: [
+  const portalContainer = useResolvedPortalContainer(container);
+  return /* @__PURE__ */ jsx(RadixPopover.Portal, { forceMount, container: portalContainer, children: /* @__PURE__ */ jsxs(MenuPanel, { as: RadixPopover.Content, $type: "popover", $showClose: showClose, $showArrow: showArrow, sideOffset: 4, ...props, children: [
     showClose && /* @__PURE__ */ jsx(CloseButton, { as: RadixPopover.Close, asChild: true, children: /* @__PURE__ */ jsx(SvgImage, { name: "cross" }) }),
     showArrow && /* @__PURE__ */ jsx(Arrow, { asChild: true, as: RadixPopover.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsx(Popover_Arrow, {}) }),
     children

package/dist/esm/components/Popover/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","Trigger","styled","RadixPopover","withConfig","componentId","PopoverTrigger","anchor","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"],"mappings":"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"}
+{"version":3,"file":"index.js","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","Trigger","styled","RadixPopover","withConfig","componentId","PopoverTrigger","anchor","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"],"mappings":"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"}

package/dist/esm/components/Select/common/InternalSelect.js

@@ -12,6 +12,7 @@ import { IconWrapper } from '../../IconWrapper/index.js';
 import { useInputModality } from '../../../hooks/internal/useInputModality.js';
 import { styled } from 'styled-components';
 import { getTextFromNodes } from '../../../lib/getTextFromNodes.js';
+import { useResolvedPortalContainer } from '../../../providers/PortalContext.js';
 import { FormRoot } from '../../FormContainer/FormRoot.js';
 import { FormElementContainer } from '../../FormContainer/FormElementContainer.js';
 import { Icon as SvgImage } from '../../Icon/index.js';
@@ -226,6 +227,7 @@ const InternalSelect = ({
   }, [children, options, updateList]);
   const inputRef = useRef(null);
   const inputModalityProps = useInputModality();
+  const portalContainer = useResolvedPortalContainer(container);
   const onFocus = () => {
     inputRef.current?.focus();
   };
@@ -300,7 +302,7 @@ const InternalSelect = ({
           /* @__PURE__ */ jsx(SvgImage, { name: "sort", size: "sm" })
         ] }),
         form && /* @__PURE__ */ jsx(HiddenSelectElement, { multiple, name, form, value: selectedValues, onChange: () => null, children: list.map((item) => /* @__PURE__ */ jsx("option", { value: item.value, disabled: item.disabled, children: item.value }, item.value)) }),
-        /* @__PURE__ */ jsx(Portal, { container, children: /* @__PURE__ */ jsx(SelectPopoverContent, { ...inputModalityProps, sideOffset: 5, onFocus, onCloseAutoFocus: () => {
+        /* @__PURE__ */ jsx(Portal, { container: portalContainer, children: /* @__PURE__ */ jsx(SelectPopoverContent, { ...inputModalityProps, sideOffset: 5, onFocus, onCloseAutoFocus: () => {
           onUpdateSearch("");
         }, onOpenAutoFocus: () => {
           setHighlighted(visibleList.current[0]);