@clickhouse/click-ui 0.6.1-rc2 → 0.6.1

package/dist/esm/components/Collapsible/Collapsible.css

@@ -0,0 +1,79 @@
+.collapsible__8jmKP {
+  width: 100%;
+}
+
+.collapsible__8jmKP [data-trigger-icon] {
+  visibility: hidden;
+  transition: transform 150ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.collapsible__8jmKP [data-trigger-icon][data-open='true'] {
+  transform: rotate(90deg);
+}
+
+.collapsible__8jmKP [data-collapsible-header]:hover [data-trigger-icon] {
+  visibility: visible;
+}
+
+.collapsible__header__pWkUS {
+  user-select: none;
+}
+
+.collapsible__header_indicator-dir_start__s-AUI {
+  margin-left: 0;
+}
+
+.collapsible__header_indicator-dir_end__EtDn0 {
+  margin-left: var(--click-image-sm-size-width);
+}
+
+.collapsible__trigger__ArZ-C {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  font: inherit;
+  cursor: inherit;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.collapsible__content__aT3ek {
+}
+
+.collapsible__content_indicator-dir_start__8Gs37 {
+  margin-left: var(--click-image-sm-size-width);
+}
+
+.collapsible__content_indicator-dir_end__OoEfV {
+  margin-right: var(--click-image-sm-size-width);
+}
+
+.collapsible__label__RpPE- {
+  display: flex;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original rule used this same
+   width fallback chain (100% → -webkit-fill-available → fill-available →
+   stretch) so the label fills the available inline space. */
+  width: 100%;
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  overflow: hidden;
+  flex: 1;
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-sidebar-navigation-item-default-space-gap);
+}
+
+.collapsible__ellipsis__huvdc {
+  display: flex;
+  overflow: hidden;
+  flex: 1;
+  justify-content: flex-start;
+  gap: inherit;
+  white-space: nowrap;
+}
+
+.collapsible__ellipsis__huvdc > *:not(button) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/dist/esm/components/Collapsible/Collapsible.module.css.js

@@ -0,0 +1,21 @@
+const collapsible = "collapsible__8jmKP";
+const collapsible__header = "collapsible__header__pWkUS";
+const collapsible__trigger = "collapsible__trigger__ArZ-C";
+const collapsible__content = "collapsible__content__aT3ek";
+const collapsible__label = "collapsible__label__RpPE-";
+const collapsible__ellipsis = "collapsible__ellipsis__huvdc";
+const styles = {
+	collapsible: collapsible,
+	collapsible__header: collapsible__header,
+	"collapsible__header_indicator-dir_start": "collapsible__header_indicator-dir_start__s-AUI",
+	"collapsible__header_indicator-dir_end": "collapsible__header_indicator-dir_end__EtDn0",
+	collapsible__trigger: collapsible__trigger,
+	collapsible__content: collapsible__content,
+	"collapsible__content_indicator-dir_start": "collapsible__content_indicator-dir_start__8Gs37",
+	"collapsible__content_indicator-dir_end": "collapsible__content_indicator-dir_end__OoEfV",
+	collapsible__label: collapsible__label,
+	collapsible__ellipsis: collapsible__ellipsis
+};
+
+export { collapsible, collapsible__content, collapsible__ellipsis, collapsible__header, collapsible__label, collapsible__trigger, styles as default };
+//# sourceMappingURL=Collapsible.module.css.js.map

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

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

package/dist/esm/components/Collapsible/IconWrapper.js

@@ -1,23 +1,16 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './Collapsible.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 
-const LabelContainer = styled.span.withConfig({
-  componentId: "sc-1cu1l45-0"
-})(["display:flex;align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;flex:1;gap:", ";overflow:hidden;"], ({
-  theme
-}) => theme.click.sidebar.navigation.item.default.space.gap);
-const EllipsisContainer = styled.span.withConfig({
-  componentId: "sc-1cu1l45-1"
-})(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-start;gap:inherit;flex:1;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
 const IconWrapper = ({
   icon,
   iconDir = "start",
   children
 }) => {
-  return /* @__PURE__ */ jsxs(LabelContainer, { children: [
+  return /* @__PURE__ */ jsxs("span", { className: cn(styles.collapsible__label), children: [
     icon && iconDir === "start" && /* @__PURE__ */ jsx(SvgImage, { name: icon, size: "sm" }),
-    /* @__PURE__ */ jsx(EllipsisContainer, { children }),
+    /* @__PURE__ */ jsx("span", { className: cn(styles.collapsible__ellipsis), children }),
     icon && iconDir === "end" && /* @__PURE__ */ jsx(SvgImage, { name: icon, size: "sm" })
   ] });
 };

package/dist/esm/components/Collapsible/IconWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"IconWrapper.js","sources":["../../../../src/components/Collapsible/IconWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport type { ImageName } from '@/components/Icon';\n\nconst LabelContainer = styled.span`\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  flex: 1;\n  gap: ${({ theme }) => theme.click.sidebar.navigation.item.default.space.gap};\n  overflow: hidden;\n`;\n\nconst EllipsisContainer = styled.span`\n  display: flex;\n  white-space: nowrap;\n  overflow: hidden;\n  justify-content: flex-start;\n  gap: inherit;\n  flex: 1;\n  & > *:not(button) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n`;\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  children,\n}: {\n  // TODO: The consumer app seem to expect to use other assets\n  // this needs to be investigated why it had type IconName\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  children: ReactNode;\n}) => {\n  return (\n    <LabelContainer>\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      )}\n      <EllipsisContainer>{children}</EllipsisContainer>\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      )}\n    </LabelContainer>\n  );\n};\n"],"names":["LabelContainer","styled","span","withConfig","componentId","theme","click","sidebar","navigation","item","default","space","gap","EllipsisContainer","IconWrapper","icon","iconDir","children","Icon"],"mappings":";;;;AAMA,MAAMA,cAAAA,GAAiBC,MAAAA,CAAOC,IAAAA,CAAIC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,mJAAA,EAAA,mBAAA,GASzB,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,OAAAA,CAAQC,WAAWC,IAAAA,CAAKC,OAAAA,CAAQC,MAAMC,GAAG,CAAA;AAI7E,MAAMC,iBAAAA,GAAoBZ,MAAAA,CAAOC,IAAAA,CAAIC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0JAAA,CAAA,CAAA;AAa9B,MAAMU,cAAcA,CAAC;AAAA,EAC1BC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC;AAOF,CAAA,KAAM;AACJ,EAAA,4BACG,cAAA,EAAA,EACEF,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,YAAY,OAAA,oBACnB,GAAA,CAACE,YACC,IAAA,EAAMH,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,oBAGb,GAAA,CAAC,qBAAmBE,QAAAA,EAAS,CAAA;AAAA,IAC5BF,IAAAA,IAAQC,YAAY,KAAA,oBACnB,GAAA,CAACE,YACC,IAAA,EAAMH,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ;;;;"}
+{"version":3,"file":"IconWrapper.js","sources":["../../../../src/components/Collapsible/IconWrapper.tsx"],"sourcesContent":["import { ReactNode } from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport type { ImageName } from '@/components/Icon';\n\nimport { cn } from '@/lib/cva';\nimport styles from './Collapsible.module.css';\n\nexport const IconWrapper = ({\n  icon,\n  iconDir = 'start',\n  children,\n}: {\n  // TODO: The consumer app seem to expect to use other assets\n  // this needs to be investigated why it had type IconName\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  children: ReactNode;\n}) => {\n  return (\n    <span className={cn(styles.collapsible__label)}>\n      {icon && iconDir === 'start' && (\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      )}\n      <span className={cn(styles.collapsible__ellipsis)}>{children}</span>\n      {icon && iconDir === 'end' && (\n        <Icon\n          name={icon}\n          size=\"sm\"\n        />\n      )}\n    </span>\n  );\n};\n"],"names":["IconWrapper","icon","iconDir","children","cn","styles","collapsible__label","Icon","collapsible__ellipsis"],"mappings":";;;;;AAQO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC;AAOF,CAAA,KAAM;AACJ,EAAA,4BACG,MAAA,EAAA,EAAK,SAAA,EAAWC,EAAAA,CAAGC,MAAAA,CAAOC,kBAAkB,CAAA,EAC1CL,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,YAAY,OAAA,oBACnB,GAAA,CAACK,YACC,IAAA,EAAMN,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,wBAGZ,MAAA,EAAA,EAAK,SAAA,EAAWG,GAAGC,MAAAA,CAAOG,qBAAqB,GAAIL,QAAAA,EAAS,CAAA;AAAA,IAC5DF,IAAAA,IAAQC,YAAY,KAAA,oBACnB,GAAA,CAACK,YACC,IAAA,EAAMN,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ;;;;"}

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

@@ -1,21 +1,22 @@
+import "./Collapsible.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useState, useEffect, createContext, forwardRef, useContext } from 'react';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
 import { EmptyButton } from '../EmptyButton/index.js';
 import { IconWrapper } from './IconWrapper.js';
+import styles from './Collapsible.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
+import { cva } from 'class-variance-authority';
 
 const NavContext = createContext({
   open: false,
   onOpenChange: () => null
 });
-const CollapsibleContainer = styled.div.withConfig({
-  componentId: "sc-guwmyz-0"
-})(["width:100%;[data-trigger-icon]{visibility:hidden;transition:transform 150ms cubic-bezier(0.87,0,0.13,1);&[data-open='true']{transform:rotate(90deg);}}[data-collapsible-header]:hover [data-trigger-icon]{visibility:visible;}"]);
 const Collapsible = ({
   open: openProp,
   onOpenChange: onOpenChangeProp,
   children,
+  className,
   ...props
 }) => {
   const [open, setOpen] = useState(openProp ?? false);
@@ -34,14 +35,19 @@ const Collapsible = ({
     open: openProp ?? open,
     onOpenChange
   };
-  return /* @__PURE__ */ jsx(CollapsibleContainer, { ...props, children: /* @__PURE__ */ jsx(NavContext.Provider, { value, children }) });
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn(styles.collapsible, className), children: /* @__PURE__ */ jsx(NavContext.Provider, { value, children }) });
 };
-const CollapsipleHeaderContainer = styled.div.withConfig({
-  componentId: "sc-guwmyz-1"
-})(["margin-left:", ";user-select:none;"], ({
-  theme,
-  $indicatorDir
-}) => $indicatorDir === "start" ? 0 : theme.click.image.sm.size.width);
+const headerVariants = cva(styles.collapsible__header, {
+  variants: {
+    indicatorDir: {
+      start: styles["collapsible__header_indicator-dir_start"],
+      end: styles["collapsible__header_indicator-dir_end"]
+    }
+  },
+  defaultVariants: {
+    indicatorDir: "start"
+  }
+});
 const CollapsipleHeader = forwardRef(({
   indicatorDir = "start",
   icon,
@@ -49,19 +55,22 @@ const CollapsipleHeader = forwardRef(({
   children,
   wrapInTrigger,
   onClick: onClickProp,
+  className,
   ...props
 }, ref) => {
   const {
     onOpenChange
   } = useContext(NavContext);
-  return /* @__PURE__ */ jsxs(CollapsipleHeaderContainer, { $indicatorDir: indicatorDir, ref, onClick: (e) => {
+  return /* @__PURE__ */ jsxs("div", { ref, onClick: (e) => {
     if (wrapInTrigger && typeof onOpenChange === "function") {
       onOpenChange();
     }
     if (typeof onClickProp === "function") {
       onClickProp(e);
     }
-  }, "data-collapsible-header": true, ...props, children: [
+  }, "data-collapsible-header": true, ...props, className: cn(headerVariants({
+    indicatorDir
+  }), className), children: [
     indicatorDir === "start" && /* @__PURE__ */ jsx(Collapsible.Trigger, {}),
     children && /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children }),
     indicatorDir === "end" && /* @__PURE__ */ jsx(Collapsible.Trigger, {})
@@ -69,15 +78,13 @@ const CollapsipleHeader = forwardRef(({
 });
 CollapsipleHeader.displayName = "CollapsibleHeader";
 Collapsible.Header = CollapsipleHeader;
-const CollapsipleTriggerButton = styled(EmptyButton).withConfig({
-  componentId: "sc-guwmyz-2"
-})(["display:flex;align-items:center;font:inherit;color:inherit;cursor:inherit;"]);
 const CollapsipleTrigger = ({
   onClick: onClickProp,
   children,
   indicatorDir = "start",
   icon,
   iconDir = "start",
+  className,
   ...props
 }) => {
   const {
@@ -92,7 +99,7 @@ const CollapsipleTrigger = ({
     }
     onOpenChange();
   };
-  return /* @__PURE__ */ jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, "aria-label": "trigger children", ...props, children: [
+  return /* @__PURE__ */ jsxs(EmptyButton, { onClick, "aria-label": "trigger children", ...props, className: cn(styles.collapsible__trigger, className), children: [
     indicatorDir === "start" && /* @__PURE__ */ jsx(SvgImage, { "data-trigger-icon": true, name: "chevron-right", "data-open": open.toString(), size: "sm" }),
     children && /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children }),
     indicatorDir === "end" && /* @__PURE__ */ jsx(SvgImage, { "data-trigger-icon": true, name: "chevron-right", "data-open": open.toString(), size: "sm" })
@@ -100,14 +107,17 @@ const CollapsipleTrigger = ({
 };
 CollapsipleTrigger.displayName = "CollapsibleTrigger";
 Collapsible.Trigger = CollapsipleTrigger;
-const CollapsibleContentWrapper = styled.div.withConfig({
-  componentId: "sc-guwmyz-3"
-})(["", ""], ({
-  theme,
-  $indicatorDir
-}) => $indicatorDir ? `${$indicatorDir === "start" ? "margin-left" : "margin-right"}: ${theme.click.image.sm.size.width}` : "");
+const contentVariants = cva(styles.collapsible__content, {
+  variants: {
+    indicatorDir: {
+      start: styles["collapsible__content_indicator-dir_start"],
+      end: styles["collapsible__content_indicator-dir_end"]
+    }
+  }
+});
 const CollapsipleContent = ({
   indicatorDir,
+  className,
   ...props
 }) => {
   const {
@@ -116,7 +126,9 @@ const CollapsipleContent = ({
   if (!open) {
     return;
   }
-  return /* @__PURE__ */ jsx(CollapsibleContentWrapper, { $indicatorDir: indicatorDir, ...props });
+  return /* @__PURE__ */ jsx("div", { ...props, className: cn(contentVariants({
+    indicatorDir
+  }), className) });
 };
 CollapsipleContent.displayName = "CollapsibleContent";
 Collapsible.Content = CollapsipleContent;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["import {\n  createContext,\n  useState,\n  HTMLAttributes,\n  useContext,\n  useEffect,\n  forwardRef,\n} from 'react';\nimport { styled } from 'styled-components';\n\nimport { Icon, type ImageName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { EmptyButton } from '@/components/EmptyButton';\n\nimport { IconWrapper } from './IconWrapper';\nimport { CollapsibleProps } from './Collapsible.types';\n\ntype ContextProps = {\n  open: boolean;\n  onOpenChange: () => void;\n};\n\nconst NavContext = createContext<ContextProps>({\n  open: false,\n  onOpenChange: () => null,\n});\nconst CollapsibleContainer = styled.div`\n  width: 100%;\n  [data-trigger-icon] {\n    visibility: hidden;\n    transition: transform 150ms cubic-bezier(0.87, 0, 0.13, 1);\n    &[data-open='true'] {\n      transform: rotate(90deg);\n    }\n  }\n  [data-collapsible-header]:hover [data-trigger-icon] {\n    visibility: visible;\n  }\n`;\n\nexport const Collapsible = ({\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  children,\n  ...props\n}: CollapsibleProps) => {\n  const [open, setOpen] = useState(openProp ?? false);\n  const onOpenChange = () => {\n    setOpen(open => {\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(!open);\n      }\n      return !open;\n    });\n  };\n\n  useEffect(() => {\n    setOpen(open => openProp ?? open);\n  }, [openProp]);\n\n  const value = {\n    open: openProp ?? open,\n    onOpenChange,\n  };\n  return (\n    <CollapsibleContainer {...props}>\n      <NavContext.Provider value={value}>{children}</NavContext.Provider>\n    </CollapsibleContainer>\n  );\n};\n\nconst CollapsipleHeaderContainer = styled.div<{ $indicatorDir: HorizontalDirection }>`\n  margin-left: ${({ theme, $indicatorDir }) =>\n    $indicatorDir === 'start' ? 0 : theme.click.image.sm.size.width};\n  user-select: none;\n`;\n\ninterface CollapsipleHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  indicatorDir?: HorizontalDirection;\n  wrapInTrigger?: boolean;\n}\n\nconst CollapsipleHeader = forwardRef<HTMLDivElement, CollapsipleHeaderProps>(\n  (\n    {\n      indicatorDir = 'start',\n      icon,\n      iconDir,\n      children,\n      wrapInTrigger,\n      onClick: onClickProp,\n      ...props\n    }: CollapsipleHeaderProps,\n    ref\n  ) => {\n    const { onOpenChange } = useContext(NavContext);\n    return (\n      <CollapsipleHeaderContainer\n        $indicatorDir={indicatorDir}\n        ref={ref}\n        onClick={e => {\n          if (wrapInTrigger && typeof onOpenChange === 'function') {\n            onOpenChange();\n          }\n          if (typeof onClickProp === 'function') {\n            onClickProp(e);\n          }\n        }}\n        data-collapsible-header\n        {...props}\n      >\n        {indicatorDir === 'start' && <Collapsible.Trigger />}\n        {children && (\n          <IconWrapper\n            icon={icon}\n            iconDir={iconDir}\n          >\n            {children}\n          </IconWrapper>\n        )}\n        {indicatorDir === 'end' && <Collapsible.Trigger />}\n      </CollapsipleHeaderContainer>\n    );\n  }\n);\n\nCollapsipleHeader.displayName = 'CollapsibleHeader';\nCollapsible.Header = CollapsipleHeader;\n\nconst CollapsipleTriggerButton = styled(EmptyButton)<{\n  $indicatorDir: HorizontalDirection;\n}>`\n  display: flex;\n  align-items: center;\n  font: inherit;\n  color: inherit;\n  cursor: inherit;\n`;\ninterface CollapsipleTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  indicatorDir?: HorizontalDirection;\n}\n\nconst CollapsipleTrigger = ({\n  onClick: onClickProp,\n  children,\n  indicatorDir = 'start',\n  icon,\n  iconDir = 'start',\n  ...props\n}: CollapsipleTriggerProps) => {\n  const { open, onOpenChange } = useContext(NavContext);\n  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (onClickProp) {\n      onClickProp(e);\n    }\n    onOpenChange();\n  };\n\n  return (\n    <CollapsipleTriggerButton\n      onClick={onClick}\n      $indicatorDir={indicatorDir}\n      aria-label=\"trigger children\"\n      {...props}\n    >\n      {indicatorDir === 'start' && (\n        <Icon\n          data-trigger-icon\n          name=\"chevron-right\"\n          data-open={open.toString()}\n          size=\"sm\"\n        />\n      )}\n      {children && (\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {children}\n        </IconWrapper>\n      )}\n      {indicatorDir === 'end' && (\n        <Icon\n          data-trigger-icon\n          name=\"chevron-right\"\n          data-open={open.toString()}\n          size=\"sm\"\n        />\n      )}\n    </CollapsipleTriggerButton>\n  );\n};\n\nCollapsipleTrigger.displayName = 'CollapsibleTrigger';\nCollapsible.Trigger = CollapsipleTrigger;\n\nconst CollapsibleContentWrapper = styled.div<{ $indicatorDir?: HorizontalDirection }>`\n  ${({ theme, $indicatorDir }) =>\n    $indicatorDir\n      ? `${$indicatorDir === 'start' ? 'margin-left' : 'margin-right'}: ${\n          theme.click.image.sm.size.width\n        }`\n      : ''}\n`;\n\nconst CollapsipleContent = ({\n  indicatorDir,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { indicatorDir?: HorizontalDirection }) => {\n  const { open } = useContext(NavContext);\n  if (!open) {\n    return;\n  }\n  return (\n    <CollapsibleContentWrapper\n      $indicatorDir={indicatorDir}\n      {...props}\n    />\n  );\n};\n\nCollapsipleContent.displayName = 'CollapsibleContent';\nCollapsible.Content = CollapsipleContent;\n"],"names":["NavContext","createContext","open","onOpenChange","CollapsibleContainer","styled","div","withConfig","componentId","Collapsible","openProp","onOpenChangeProp","children","props","setOpen","useState","useEffect","value","CollapsipleHeaderContainer","theme","$indicatorDir","click","image","sm","size","width","CollapsipleHeader","forwardRef","indicatorDir","icon","iconDir","wrapInTrigger","onClick","onClickProp","ref","useContext","e","displayName","Header","CollapsipleTriggerButton","EmptyButton","CollapsipleTrigger","preventDefault","stopPropagation","Icon","toString","Trigger","CollapsibleContentWrapper","CollapsipleContent","Content"],"mappings":";;;;;;;AAsBA,MAAMA,aAAaC,aAAAA,CAA4B;AAAA,EAC7CC,IAAAA,EAAM,KAAA;AAAA,EACNC,cAAcA,MAAM;AACtB,CAAC,CAAA;AACD,MAAMC,oBAAAA,GAAuBC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,gOAAA,CAAA,CAAA;AAchC,MAAMC,cAAcA,CAAC;AAAA,EAC1BP,IAAAA,EAAMQ,QAAAA;AAAAA,EACNP,YAAAA,EAAcQ,gBAAAA;AAAAA,EACdC,QAAAA;AAAAA,EACA,GAAGC;AACa,CAAA,KAAM;AACtB,EAAA,MAAM,CAACX,IAAAA,EAAMY,OAAO,CAAA,GAAIC,QAAAA,CAASL,YAAY,KAAK,CAAA;AAClD,EAAA,MAAMP,eAAeA,MAAM;AACzBW,IAAAA,OAAAA,CAAQZ,CAAAA,KAAAA,KAAQ;AACd,MAAA,IAAI,OAAOS,qBAAqB,UAAA,EAAY;AAC1CA,QAAAA,gBAAAA,CAAiB,CAACT,KAAI,CAAA;AAAA,MACxB;AACA,MAAA,OAAO,CAACA,KAAAA;AAAAA,IACV,CAAC,CAAA;AAAA,EACH,CAAA;AAEAc,EAAAA,SAAAA,CAAU,MAAM;AACdF,IAAAA,OAAAA,CAAQZ,CAAAA,KAAAA,KAAQQ,QAAAA,IAAYR,KAAI,CAAA;AAAA,EAClC,CAAA,EAAG,CAACQ,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAMO,KAAAA,GAAQ;AAAA,IACZf,MAAMQ,QAAAA,IAAYR,IAAAA;AAAAA,IAClBC;AAAAA,GACF;AACA,EAAA,uBACE,GAAA,CAAC,oBAAA,EAAA,EAAqB,GAAIU,KAAAA,EACxB,QAAA,kBAAA,GAAA,CAAC,WAAW,QAAA,EAAX,EAAoB,KAAA,EAAeD,QAAAA,EAAS,CAAA,EAC/C,CAAA;AAEJ;AAEA,MAAMM,0BAAAA,GAA6Bb,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,cAAA,EAAA,oBAAA,GAC5B,CAAC;AAAA,EAAEW,KAAAA;AAAAA,EAAOC;AAAc,CAAA,KACrCA,aAAAA,KAAkB,UAAU,CAAA,GAAID,KAAAA,CAAME,MAAMC,KAAAA,CAAMC,EAAAA,CAAGC,KAAKC,KAAK,CAAA;AAWnE,MAAMC,iBAAAA,GAAoBC,WACxB,CACE;AAAA,EACEC,YAAAA,GAAe,OAAA;AAAA,EACfC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAlB,QAAAA;AAAAA,EACAmB,aAAAA;AAAAA,EACAC,OAAAA,EAASC,WAAAA;AAAAA,EACT,GAAGpB;AACmB,CAAA,EACxBqB,GAAAA,KACG;AACH,EAAA,MAAM;AAAA,IAAE/B;AAAAA,GAAa,GAAIgC,WAAWnC,UAAU,CAAA;AAC9C,EAAA,4BACG,0BAAA,EAAA,EACC,aAAA,EAAe4B,YAAAA,EACf,GAAA,EACA,SAASQ,CAAAA,CAAAA,KAAK;AACZ,IAAA,IAAIL,aAAAA,IAAiB,OAAO5B,YAAAA,KAAiB,UAAA,EAAY;AACvDA,MAAAA,YAAAA,EAAa;AAAA,IACf;AACA,IAAA,IAAI,OAAO8B,gBAAgB,UAAA,EAAY;AACrCA,MAAAA,WAAAA,CAAYG,CAAC,CAAA;AAAA,IACf;AAAA,EACF,CAAA,EACA,yBAAA,EAAuB,IAAA,EACvB,GAAIvB,KAAAA,EAEHe,QAAAA,EAAAA;AAAAA,IAAAA,YAAAA,KAAiB,OAAA,oBAAW,GAAA,CAAC,WAAA,CAAY,OAAA,EAAZ,EAAmB,CAAA;AAAA,IAChDhB,QAAAA,oBACC,GAAA,CAAC,WAAA,EAAA,EACC,IAAA,EACA,SAECA,QAAAA,EACH,CAAA;AAAA,IAEDgB,YAAAA,KAAiB,KAAA,oBAAS,GAAA,CAAC,WAAA,CAAY,SAAZ,EAAmB;AAAA,GAAA,EACjD,CAAA;AAEJ,CACF,CAAA;AAEAF,iBAAAA,CAAkBW,WAAAA,GAAc,mBAAA;AAChC5B,WAAAA,CAAY6B,MAAAA,GAASZ,iBAAAA;AAErB,MAAMa,wBAAAA,GAA2BlC,MAAAA,CAAOmC,WAAW,CAAA,CAACjC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4EAAA,CAAA,CAAA;AAepD,MAAMiC,qBAAqBA,CAAC;AAAA,EAC1BT,OAAAA,EAASC,WAAAA;AAAAA,EACTrB,QAAAA;AAAAA,EACAgB,YAAAA,GAAe,OAAA;AAAA,EACfC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACV,GAAGjB;AACoB,CAAA,KAAM;AAC7B,EAAA,MAAM;AAAA,IAAEX,IAAAA;AAAAA,IAAMC;AAAAA,GAAa,GAAIgC,WAAWnC,UAAU,CAAA;AACpD,EAAA,MAAMgC,OAAAA,GAAUA,CAACI,CAAAA,KAA2C;AAC1DA,IAAAA,CAAAA,CAAEM,cAAAA,EAAe;AACjBN,IAAAA,CAAAA,CAAEO,eAAAA,EAAgB;AAClB,IAAA,IAAIV,WAAAA,EAAa;AACfA,MAAAA,WAAAA,CAAYG,CAAC,CAAA;AAAA,IACf;AACAjC,IAAAA,YAAAA,EAAa;AAAA,EACf,CAAA;AAEA,EAAA,uBACE,IAAA,CAAC,4BACC,OAAA,EACA,aAAA,EAAeyB,cACf,YAAA,EAAW,kBAAA,EACX,GAAIf,KAAAA,EAEHe,QAAAA,EAAAA;AAAAA,IAAAA,YAAAA,KAAiB,OAAA,oBAChB,GAAA,CAACgB,QAAA,EAAA,EACC,mBAAA,EAAiB,IAAA,EACjB,IAAA,EAAK,eAAA,EACL,WAAA,EAAW1C,IAAAA,CAAK2C,QAAAA,EAAS,EACzB,IAAA,EAAK,IAAA,EAAI,CAAA;AAAA,IAGZjC,QAAAA,oBACC,GAAA,CAAC,WAAA,EAAA,EACC,IAAA,EACA,SAECA,QAAAA,EACH,CAAA;AAAA,IAEDgB,YAAAA,KAAiB,KAAA,oBAChB,GAAA,CAACgB,QAAA,EAAA,EACC,mBAAA,EAAiB,IAAA,EACjB,IAAA,EAAK,eAAA,EACL,WAAA,EAAW1C,IAAAA,CAAK2C,QAAAA,EAAS,EACzB,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ,CAAA;AAEAJ,kBAAAA,CAAmBJ,WAAAA,GAAc,oBAAA;AACjC5B,WAAAA,CAAYqC,OAAAA,GAAUL,kBAAAA;AAEtB,MAAMM,yBAAAA,GAA4B1C,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACxC,CAAC;AAAA,EAAEW,KAAAA;AAAAA,EAAOC;AAAc,CAAA,KACxBA,aAAAA,GACI,CAAA,EAAGA,aAAAA,KAAkB,OAAA,GAAU,gBAAgB,cAAc,CAAA,EAAA,EAC3DD,KAAAA,CAAME,KAAAA,CAAMC,KAAAA,CAAMC,EAAAA,CAAGC,IAAAA,CAAKC,KAAK,KAEjC,EAAE,CAAA;AAGV,MAAMuB,qBAAqBA,CAAC;AAAA,EAC1BpB,YAAAA;AAAAA,EACA,GAAGf;AACoE,CAAA,KAAM;AAC7E,EAAA,MAAM;AAAA,IAAEX;AAAAA,GAAK,GAAIiC,WAAWnC,UAAU,CAAA;AACtC,EAAA,IAAI,CAACE,IAAAA,EAAM;AACT,IAAA;AAAA,EACF;AACA,EAAA,uBACE,GAAA,CAAC,yBAAA,EAAA,EACC,aAAA,EAAe0B,YAAAA,EACf,GAAIf,KAAAA,EAAM,CAAA;AAGhB,CAAA;AAEAmC,kBAAAA,CAAmBX,WAAAA,GAAc,oBAAA;AACjC5B,WAAAA,CAAYwC,OAAAA,GAAUD,kBAAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Collapsible/Collapsible.tsx"],"sourcesContent":["import {\n  createContext,\n  useState,\n  HTMLAttributes,\n  useContext,\n  useEffect,\n  forwardRef,\n} from 'react';\n\nimport { cn, cva } from '@/lib/cva';\nimport { Icon, type ImageName } from '@/components/Icon';\nimport type { HorizontalDirection } from '@/types';\nimport { EmptyButton } from '@/components/EmptyButton';\n\nimport { IconWrapper } from './IconWrapper';\nimport { CollapsibleProps } from './Collapsible.types';\nimport styles from './Collapsible.module.css';\n\ntype ContextProps = {\n  open: boolean;\n  onOpenChange: () => void;\n};\n\nconst NavContext = createContext<ContextProps>({\n  open: false,\n  onOpenChange: () => null,\n});\n\nexport const Collapsible = ({\n  open: openProp,\n  onOpenChange: onOpenChangeProp,\n  children,\n  className,\n  ...props\n}: CollapsibleProps) => {\n  const [open, setOpen] = useState(openProp ?? false);\n  const onOpenChange = () => {\n    setOpen(open => {\n      if (typeof onOpenChangeProp === 'function') {\n        onOpenChangeProp(!open);\n      }\n      return !open;\n    });\n  };\n\n  useEffect(() => {\n    setOpen(open => openProp ?? open);\n  }, [openProp]);\n\n  const value = {\n    open: openProp ?? open,\n    onOpenChange,\n  };\n  return (\n    <div\n      {...props}\n      className={cn(styles.collapsible, className)}\n    >\n      <NavContext.Provider value={value}>{children}</NavContext.Provider>\n    </div>\n  );\n};\n\nconst headerVariants = cva(styles.collapsible__header, {\n  variants: {\n    indicatorDir: {\n      start: styles['collapsible__header_indicator-dir_start'],\n      end: styles['collapsible__header_indicator-dir_end'],\n    },\n  },\n  defaultVariants: {\n    indicatorDir: 'start',\n  },\n});\n\ninterface CollapsipleHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  indicatorDir?: HorizontalDirection;\n  wrapInTrigger?: boolean;\n}\n\nconst CollapsipleHeader = forwardRef<HTMLDivElement, CollapsipleHeaderProps>(\n  (\n    {\n      indicatorDir = 'start',\n      icon,\n      iconDir,\n      children,\n      wrapInTrigger,\n      onClick: onClickProp,\n      className,\n      ...props\n    }: CollapsipleHeaderProps,\n    ref\n  ) => {\n    const { onOpenChange } = useContext(NavContext);\n    return (\n      <div\n        ref={ref}\n        onClick={e => {\n          if (wrapInTrigger && typeof onOpenChange === 'function') {\n            onOpenChange();\n          }\n          if (typeof onClickProp === 'function') {\n            onClickProp(e);\n          }\n        }}\n        data-collapsible-header\n        {...props}\n        className={cn(headerVariants({ indicatorDir }), className)}\n      >\n        {indicatorDir === 'start' && <Collapsible.Trigger />}\n        {children && (\n          <IconWrapper\n            icon={icon}\n            iconDir={iconDir}\n          >\n            {children}\n          </IconWrapper>\n        )}\n        {indicatorDir === 'end' && <Collapsible.Trigger />}\n      </div>\n    );\n  }\n);\n\nCollapsipleHeader.displayName = 'CollapsibleHeader';\nCollapsible.Header = CollapsipleHeader;\n\ninterface CollapsipleTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n  icon?: ImageName;\n  iconDir?: HorizontalDirection;\n  indicatorDir?: HorizontalDirection;\n}\n\nconst CollapsipleTrigger = ({\n  onClick: onClickProp,\n  children,\n  indicatorDir = 'start',\n  icon,\n  iconDir = 'start',\n  className,\n  ...props\n}: CollapsipleTriggerProps) => {\n  const { open, onOpenChange } = useContext(NavContext);\n  const onClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n    e.preventDefault();\n    e.stopPropagation();\n    if (onClickProp) {\n      onClickProp(e);\n    }\n    onOpenChange();\n  };\n\n  return (\n    <EmptyButton\n      onClick={onClick}\n      aria-label=\"trigger children\"\n      {...props}\n      className={cn(styles.collapsible__trigger, className)}\n    >\n      {indicatorDir === 'start' && (\n        <Icon\n          data-trigger-icon\n          name=\"chevron-right\"\n          data-open={open.toString()}\n          size=\"sm\"\n        />\n      )}\n      {children && (\n        <IconWrapper\n          icon={icon}\n          iconDir={iconDir}\n        >\n          {children}\n        </IconWrapper>\n      )}\n      {indicatorDir === 'end' && (\n        <Icon\n          data-trigger-icon\n          name=\"chevron-right\"\n          data-open={open.toString()}\n          size=\"sm\"\n        />\n      )}\n    </EmptyButton>\n  );\n};\n\nCollapsipleTrigger.displayName = 'CollapsibleTrigger';\nCollapsible.Trigger = CollapsipleTrigger;\n\nconst contentVariants = cva(styles.collapsible__content, {\n  variants: {\n    indicatorDir: {\n      start: styles['collapsible__content_indicator-dir_start'],\n      end: styles['collapsible__content_indicator-dir_end'],\n    },\n  },\n});\n\nconst CollapsipleContent = ({\n  indicatorDir,\n  className,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & { indicatorDir?: HorizontalDirection }) => {\n  const { open } = useContext(NavContext);\n  if (!open) {\n    return;\n  }\n  return (\n    <div\n      {...props}\n      className={cn(contentVariants({ indicatorDir }), className)}\n    />\n  );\n};\n\nCollapsipleContent.displayName = 'CollapsibleContent';\nCollapsible.Content = CollapsipleContent;\n"],"names":["NavContext","createContext","open","onOpenChange","Collapsible","openProp","onOpenChangeProp","children","className","props","setOpen","useState","useEffect","value","cn","styles","collapsible","headerVariants","cva","collapsible__header","variants","indicatorDir","start","end","defaultVariants","CollapsipleHeader","forwardRef","icon","iconDir","wrapInTrigger","onClick","onClickProp","ref","useContext","e","displayName","Header","CollapsipleTrigger","preventDefault","stopPropagation","collapsible__trigger","Icon","toString","Trigger","contentVariants","collapsible__content","CollapsipleContent","Content"],"mappings":"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"}

package/dist/esm/components/Container/Container.css

@@ -5,9 +5,9 @@
      this reset a nested Container would inherit an ancestor's value — e.g. a
      parent with `fillHeight` would force `height: 100%` onto every descendant
      Container, and a parent with `grow` would make children flex-grow too.
-     Resetting to the guaranteed-invalid `initial` value keeps each Container's
-     defaults isolated; the `var()` fallbacks below then resolve to the same
-     defaults the styled-components version produced when the prop was unset. */
+     Resetting the variables on `.container` prevents inheritance; using `initial`
+     makes the consuming declarations compute to their initial values when the prop
+     is unset (the `var()` fallbacks below are an extra guard). */
   --container-height: initial;
   --container-min-height: initial;
   --container-max-height: initial;

package/dist/esm/components/HoverCard/HoverCard.css

@@ -0,0 +1,6 @@
+.hover-card__trigger__tMcTR {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `width` is widely supported on evergreen browsers; the original
+     styled-components rule used the same value. */
+  width: fit-content;
+}

package/dist/esm/components/HoverCard/HoverCard.module.css.js

@@ -0,0 +1,6 @@
+const styles = {
+	"hover-card__trigger": "hover-card__trigger__tMcTR"
+};
+
+export { styles as default };
+//# sourceMappingURL=HoverCard.module.css.js.map

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

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

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

@@ -1,8 +1,10 @@
+import "./HoverCard.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixHoverCard from '@radix-ui/react-hover-card';
 import { GenericPopoverMenuPanel, Arrow } from '../GenericMenu/index.js';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
 import Popover_Arrow from '../Assets/Icons/Popover-Arrow.js';
+import styles from './HoverCard.module.css.js';
 
 const HoverCard = ({
   children,
@@ -10,14 +12,12 @@ const HoverCard = ({
 }) => {
   return /* @__PURE__ */ jsx(RadixHoverCard.Root, { ...props, children });
 };
-const Trigger = styled(RadixHoverCard.Trigger).withConfig({
-  componentId: "sc-1ect7b6-0"
-})(["width:fit-content;"]);
 const HoverCardTrigger = ({
   children,
+  className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(Trigger, { ...props, children });
+  return /* @__PURE__ */ jsx(RadixHoverCard.Trigger, { ...props, className: cn(styles["hover-card__trigger"], className), children });
 };
 HoverCardTrigger.displayName = "HoverCardTrigger";
 HoverCard.Trigger = HoverCardTrigger;

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport { ReactNode } from 'react';\nimport { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';\nimport { styled } from 'styled-components';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\n\nexport interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {\n  showArrow?: boolean;\n  forceMount?: true;\n  container?: HTMLElement | null;\n  children: ReactNode;\n}\n\nexport const HoverCard = ({ children, ...props }: RadixHoverCard.HoverCardProps) => {\n  return <RadixHoverCard.Root {...props}>{children}</RadixHoverCard.Root>;\n};\n\nconst Trigger = styled(RadixHoverCard.Trigger)`\n  width: fit-content;\n`;\n\nconst HoverCardTrigger = ({\n  children,\n  ...props\n}: RadixHoverCard.HoverCardTriggerProps) => {\n  return <Trigger {...props}>{children}</Trigger>;\n};\nHoverCardTrigger.displayName = 'HoverCardTrigger';\nHoverCard.Trigger = HoverCardTrigger;\n\nconst HoverCardContent = ({\n  children,\n  showArrow,\n  forceMount,\n  container,\n  ...props\n}: HoverCardContentProps) => {\n  return (\n    <RadixHoverCard.Portal\n      forceMount={forceMount}\n      container={container}\n    >\n      <GenericPopoverMenuPanel\n        as={RadixHoverCard.Content}\n        $type=\"hover-card\"\n        $showArrow={showArrow}\n        {...props}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixHoverCard.Arrow}\n            width={15}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </GenericPopoverMenuPanel>\n    </RadixHoverCard.Portal>\n  );\n};\nHoverCardContent.displayName = 'HoverCardContent';\nHoverCard.Content = HoverCardContent;\n"],"names":["HoverCard","children","props","Trigger","styled","RadixHoverCard","withConfig","componentId","HoverCardTrigger","displayName","HoverCardContent","showArrow","forceMount","container","Content","Arrow"],"mappings":";;;;;;AAaO,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,2BAAQ,cAAA,CAAe,IAAA,EAAf,KAAwBA,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAME,OAAAA,GAAUC,MAAAA,CAAOC,cAAAA,CAAeF,OAAO,EAACG,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,CAAA,CAAA;AAI9C,MAAMC,mBAAmBA,CAAC;AAAA,EACxBP,QAAAA;AAAAA,EACA,GAAGC;AACiC,CAAA,KAAM;AAC1C,EAAA,uBAAO,GAAA,CAAC,OAAA,EAAA,EAAQ,GAAIA,KAAAA,EAAQD,QAAAA,EAAS,CAAA;AACvC,CAAA;AACAO,gBAAAA,CAAiBC,WAAAA,GAAc,kBAAA;AAC/BT,SAAAA,CAAUG,OAAAA,GAAUK,gBAAAA;AAEpB,MAAME,mBAAmBA,CAAC;AAAA,EACxBT,QAAAA;AAAAA,EACAU,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGX;AACkB,CAAA,KAAM;AAC3B,EAAA,2BACG,cAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,WAEA,QAAA,kBAAA,IAAA,CAAC,uBAAA,EAAA,EACC,EAAA,EAAIG,cAAAA,CAAeS,SACnB,KAAA,EAAM,YAAA,EACN,UAAA,EAAYH,SAAAA,EACZ,GAAIT,KAAAA,EAEHS,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,EAAIN,cAAAA,CAAeU,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAA,GAAA,CAAC,iBAAa,CAAA,EAChB,CAAA;AAAA,IAEDd;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAS,gBAAAA,CAAiBD,WAAAA,GAAc,kBAAA;AAC/BT,SAAAA,CAAUc,OAAAA,GAAUJ,gBAAAA;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/HoverCard/HoverCard.tsx"],"sourcesContent":["import * as RadixHoverCard from '@radix-ui/react-hover-card';\nimport { ReactNode } from 'react';\nimport { Arrow, GenericPopoverMenuPanel } from '@/components/GenericMenu';\nimport { cn } from '@/lib/cva';\nimport Popover_Arrow from '@/components/Assets/Icons/Popover-Arrow';\nimport styles from './HoverCard.module.css';\n\nexport interface HoverCardContentProps extends RadixHoverCard.HoverCardContentProps {\n  showArrow?: boolean;\n  forceMount?: true;\n  container?: HTMLElement | null;\n  children: ReactNode;\n}\n\nexport const HoverCard = ({ children, ...props }: RadixHoverCard.HoverCardProps) => {\n  return <RadixHoverCard.Root {...props}>{children}</RadixHoverCard.Root>;\n};\n\nconst HoverCardTrigger = ({\n  children,\n  className,\n  ...props\n}: RadixHoverCard.HoverCardTriggerProps) => {\n  return (\n    <RadixHoverCard.Trigger\n      {...props}\n      className={cn(styles['hover-card__trigger'], className)}\n    >\n      {children}\n    </RadixHoverCard.Trigger>\n  );\n};\nHoverCardTrigger.displayName = 'HoverCardTrigger';\nHoverCard.Trigger = HoverCardTrigger;\n\nconst HoverCardContent = ({\n  children,\n  showArrow,\n  forceMount,\n  container,\n  ...props\n}: HoverCardContentProps) => {\n  return (\n    <RadixHoverCard.Portal\n      forceMount={forceMount}\n      container={container}\n    >\n      <GenericPopoverMenuPanel\n        as={RadixHoverCard.Content}\n        $type=\"hover-card\"\n        $showArrow={showArrow}\n        {...props}\n      >\n        {showArrow && (\n          <Arrow\n            asChild\n            as={RadixHoverCard.Arrow}\n            width={15}\n            height={10}\n          >\n            <Popover_Arrow />\n          </Arrow>\n        )}\n        {children}\n      </GenericPopoverMenuPanel>\n    </RadixHoverCard.Portal>\n  );\n};\nHoverCardContent.displayName = 'HoverCardContent';\nHoverCard.Content = HoverCardContent;\n"],"names":["HoverCard","children","props","HoverCardTrigger","className","cn","styles","displayName","Trigger","HoverCardContent","showArrow","forceMount","container","RadixHoverCard","Content","Arrow"],"mappings":";;;;;;;AAcO,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,2BAAQ,cAAA,CAAe,IAAA,EAAf,KAAwBA,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAME,mBAAmBA,CAAC;AAAA,EACxBF,QAAAA;AAAAA,EACAG,SAAAA;AAAAA,EACA,GAAGF;AACiC,CAAA,KAAM;AAC1C,EAAA,uBACE,GAAA,CAAC,cAAA,CAAe,OAAA,EAAf,EACC,GAAIA,KAAAA,EACJ,SAAA,EAAWG,EAAAA,CAAGC,MAAAA,CAAO,qBAAqB,CAAA,EAAGF,SAAS,GAErDH,QAAAA,EACH,CAAA;AAEJ,CAAA;AACAE,gBAAAA,CAAiBI,WAAAA,GAAc,kBAAA;AAC/BP,SAAAA,CAAUQ,OAAAA,GAAUL,gBAAAA;AAEpB,MAAMM,mBAAmBA,CAAC;AAAA,EACxBR,QAAAA;AAAAA,EACAS,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGV;AACkB,CAAA,KAAM;AAC3B,EAAA,2BACG,cAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,WAEA,QAAA,kBAAA,IAAA,CAAC,uBAAA,EAAA,EACC,EAAA,EAAIW,cAAAA,CAAeC,SACnB,KAAA,EAAM,YAAA,EACN,UAAA,EAAYJ,SAAAA,EACZ,GAAIR,KAAAA,EAEHQ,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,EAAIG,cAAAA,CAAeE,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAA,GAAA,CAAC,iBAAa,CAAA,EAChB,CAAA;AAAA,IAEDd;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAQ,gBAAAA,CAAiBF,WAAAA,GAAc,kBAAA;AAC/BP,SAAAA,CAAUc,OAAAA,GAAUL,gBAAAA;;;;"}

package/dist/esm/components/Link/Link.css

@@ -118,18 +118,22 @@
   --link-font: var(--typography-styles-product-text-mono-lg);
 }
 
-/* The inner Icon receives .external-icon via className. The original used a
-   descendant selector inside IconWrapper; here we pass the scoped class
-   straight to the Icon so the selector stays a single class with the same
-   effective specificity. */
-.external-icon_size_xs__hRWrg,
-.external-icon_size_sm__QFJoc {
+/* The inner Icon is a `link__icon` element — it receives the scoped class via
+   className. The original used a descendant selector inside IconWrapper; here we
+   pass the scoped class straight to the Icon so the selector stays a single
+   class with the same effective specificity. */
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.link__icon__El8JR {
+}
+
+.link__icon_size_xs__qMUN-,
+.link__icon_size_sm__d2ZIU {
   width: var(--click-link-icon-size-sm-width);
   height: var(--click-link-icon-size-sm-height);
 }
 
-.external-icon_size_md__-bbPt,
-.external-icon_size_lg__XGkpl {
+.link__icon_size_md__-5EZ1,
+.link__icon_size_lg__RY5Y1 {
   width: var(--click-link-icon-size-md-width);
   height: var(--click-link-icon-size-md-height);
 }

package/dist/esm/components/Link/Link.module.css.js

@@ -8,6 +8,11 @@ const link_weight_medium = "link_weight_medium__Sot5E";
 const link_weight_semibold = "link_weight_semibold__6STFO";
 const link_weight_bold = "link_weight_bold__FWQyo";
 const link_weight_mono = "link_weight_mono__Mzdum";
+const link__icon = "link__icon__El8JR";
+const link__icon_size_xs = "link__icon_size_xs__qMUN-";
+const link__icon_size_sm = "link__icon_size_sm__d2ZIU";
+const link__icon_size_md = "link__icon_size_md__-5EZ1";
+const link__icon_size_lg = "link__icon_size_lg__RY5Y1";
 const styles = {
 	link: link,
 	link_size_xs: link_size_xs,
@@ -19,11 +24,12 @@ const styles = {
 	link_weight_semibold: link_weight_semibold,
 	link_weight_bold: link_weight_bold,
 	link_weight_mono: link_weight_mono,
-	"external-icon_size_xs": "external-icon_size_xs__hRWrg",
-	"external-icon_size_sm": "external-icon_size_sm__QFJoc",
-	"external-icon_size_md": "external-icon_size_md__-bbPt",
-	"external-icon_size_lg": "external-icon_size_lg__XGkpl"
+	link__icon: link__icon,
+	link__icon_size_xs: link__icon_size_xs,
+	link__icon_size_sm: link__icon_size_sm,
+	link__icon_size_md: link__icon_size_md,
+	link__icon_size_lg: link__icon_size_lg
 };
 
-export { styles as default, link, link_size_lg, link_size_md, link_size_sm, link_size_xs, link_weight_bold, link_weight_medium, link_weight_mono, link_weight_normal, link_weight_semibold };
+export { styles as default, link, link__icon, link__icon_size_lg, link__icon_size_md, link__icon_size_sm, link__icon_size_xs, link_size_lg, link_size_md, link_size_sm, link_size_xs, link_weight_bold, link_weight_medium, link_weight_mono, link_weight_normal, link_weight_semibold };
 //# sourceMappingURL=Link.module.css.js.map

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

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

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

@@ -27,13 +27,13 @@ const linkVariants = cva(styles.link, {
     weight: "normal"
   }
 });
-const externalIconVariants = cva("", {
+const iconVariants = cva(styles["link__icon"], {
   variants: {
     size: {
-      xs: styles["external-icon_size_xs"],
-      sm: styles["external-icon_size_sm"],
-      md: styles["external-icon_size_md"],
-      lg: styles["external-icon_size_lg"]
+      xs: styles["link__icon_size_xs"],
+      sm: styles["link__icon_size_sm"],
+      md: styles["link__icon_size_md"],
+      lg: styles["link__icon_size_lg"]
     }
   },
   defaultVariants: {
@@ -56,7 +56,7 @@ const _Link = ({
     weight
   }), className), children: [
     children,
-    icon && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SvgImage, { name: icon, className: cn("external-icon", externalIconVariants({
+    icon && /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(SvgImage, { name: icon, className: cn(iconVariants({
       size
     })), "data-testid": icon }) })
   ] });

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst externalIconVariants = cva('', {\n  variants: {\n    size: {\n      xs: styles['external-icon_size_xs'],\n      sm: styles['external-icon_size_sm'],\n      md: styles['external-icon_size_md'],\n      lg: styles['external-icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn('external-icon', externalIconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["linkVariants","cva","styles","link","variants","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","defaultVariants","externalIconVariants","_Link","onClick","icon","children","component","className","props","ref","Component","cn","Icon","Link","forwardRef"],"mappings":";;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,GAAAA,CAAIC,MAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,OAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,OAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,OAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,OAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,OAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,OAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,OAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,OAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,IAAA;AAAA,IACNK,MAAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAMO,oBAAAA,GAAuBhB,IAAI,EAAA,EAAI;AAAA,EACnCG,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,uBAAuB,CAAA;AAAA,MAClCK,EAAAA,EAAIL,OAAO,uBAAuB,CAAA;AAAA,MAClCM,EAAAA,EAAIN,OAAO,uBAAuB,CAAA;AAAA,MAClCO,EAAAA,EAAIP,OAAO,uBAAuB;AAAA;AACpC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAMa,QAAQ,CACZ;AAAA,EACEb,IAAAA,GAAO,IAAA;AAAA,EACPK,MAAAA,GAAS,QAAA;AAAA,EACTS,OAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACgF,CAAA,EACrFC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,GAAA;AAC/B,EAAA,uBACE,IAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIE,KAAAA,EACJ,SAAA,EAAWG,GAAG3B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,oBACC,GAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAACQ,QAAA,EAAA,EACC,MAAMR,IAAAA,EACN,SAAA,EAAWO,EAAAA,CAAG,eAAA,EAAiBV,oBAAAA,CAAqB;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EAC7D,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMS,IAAAA,GAAiCC,WAAWZ,KAAK;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Link/Link.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactEventHandler,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { Icon } from '@/components/Icon';\nimport type { IconName } from '@/components/Icon/Icon.types';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Link.module.css';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport interface LinkProps<T extends ElementType = 'a'> {\n  /** The font size of the link text */\n  size?: TextSize;\n  /** The font weight of the link text */\n  weight?: TextWeight;\n  /** Click event handler */\n  onClick?: ReactEventHandler;\n  /** The content to display inside the link */\n  children?: React.ReactNode;\n  /** Optional icon to display after the link text */\n  icon?: IconName;\n  /** Custom component to render as the link element */\n  component?: T;\n}\n\nconst linkVariants = cva(styles.link, {\n  variants: {\n    size: {\n      xs: styles['link_size_xs'],\n      sm: styles['link_size_sm'],\n      md: styles['link_size_md'],\n      lg: styles['link_size_lg'],\n    },\n    weight: {\n      normal: styles['link_weight_normal'],\n      medium: styles['link_weight_medium'],\n      semibold: styles['link_weight_semibold'],\n      bold: styles['link_weight_bold'],\n      mono: styles['link_weight_mono'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst iconVariants = cva(styles['link__icon'], {\n  variants: {\n    size: {\n      xs: styles['link__icon_size_xs'],\n      sm: styles['link__icon_size_sm'],\n      md: styles['link__icon_size_md'],\n      lg: styles['link__icon_size_lg'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n});\n\ntype LinkPolymorphicComponent = <T extends ElementType = 'a'>(\n  props: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T>\n) => ReactNode;\n\n/** Component for linking to other pages or sections from with body text */\nconst _Link = <T extends ElementType = 'a'>(\n  {\n    size = 'md',\n    weight = 'normal',\n    onClick,\n    icon,\n    children,\n    component,\n    className,\n    ...props\n  }: Omit<ComponentProps<T>, keyof LinkProps<T>> & LinkProps<T> & { className?: string },\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'a';\n  return (\n    <Component\n      ref={ref}\n      onClick={onClick}\n      {...props}\n      className={cn(linkVariants({ size, weight }), className)}\n    >\n      {children}\n      {icon && (\n        <span>\n          <Icon\n            name={icon}\n            className={cn(iconVariants({ size }))}\n            data-testid={icon}\n          />\n        </span>\n      )}\n    </Component>\n  );\n};\nexport const Link: LinkPolymorphicComponent = forwardRef(_Link);\n"],"names":["linkVariants","cva","styles","link","variants","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","defaultVariants","iconVariants","_Link","onClick","icon","children","component","className","props","ref","Component","cn","Icon","Link","forwardRef"],"mappings":";;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,GAAAA,CAAIC,MAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,OAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,OAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,OAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,OAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,OAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,OAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,OAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,OAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM,IAAA;AAAA,IACNK,MAAAA,EAAQ;AAAA;AAEZ,CAAC,CAAA;AAED,MAAMO,YAAAA,GAAehB,GAAAA,CAAIC,MAAAA,CAAO,YAAY,CAAA,EAAG;AAAA,EAC7CE,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,oBAAoB,CAAA;AAAA,MAC/BK,EAAAA,EAAIL,OAAO,oBAAoB,CAAA;AAAA,MAC/BM,EAAAA,EAAIN,OAAO,oBAAoB,CAAA;AAAA,MAC/BO,EAAAA,EAAIP,OAAO,oBAAoB;AAAA;AACjC,GACF;AAAA,EACAc,eAAAA,EAAiB;AAAA,IACfX,IAAAA,EAAM;AAAA;AAEV,CAAC,CAAA;AAOD,MAAMa,QAAQ,CACZ;AAAA,EACEb,IAAAA,GAAO,IAAA;AAAA,EACPK,MAAAA,GAAS,QAAA;AAAA,EACTS,OAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACgF,CAAA,EACrFC,GAAAA,KACG;AACH,EAAA,MAAMC,YAAYJ,SAAAA,IAAa,GAAA;AAC/B,EAAA,uBACE,IAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIE,KAAAA,EACJ,SAAA,EAAWG,GAAG3B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,wBACE,MAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAACQ,YACC,IAAA,EAAMR,IAAAA,EACN,SAAA,EAAWO,EAAAA,CAAGV,YAAAA,CAAa;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EACpC,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMS,IAAAA,GAAiCC,WAAWZ,KAAK;;;;"}

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

@@ -455,7 +455,7 @@ const MultiSelectCheckboxItem = forwardRef(({
   }
   const isChecked = selectedValues.includes(value);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxs(Container, { orientation: "horizontal", gap: "xs", overflow: "hidden", children: [
+    /* @__PURE__ */ jsx(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxs(Container, { orientation: "horizontal", gap: "xs", overflow: "hidden", isResponsive: false, children: [
       /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, variant: variant ?? "default" }),
       /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ? /* @__PURE__ */ jsxs(Fragment, { children: [
         label,