@clickhouse/click-ui 0.6.1-rc1 → 0.6.1

package/dist/cjs/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/cjs/components/Collapsible/Collapsible.module.css.cjs

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+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
+};
+
+exports.collapsible = collapsible;
+exports.collapsible__content = collapsible__content;
+exports.collapsible__ellipsis = collapsible__ellipsis;
+exports.collapsible__header = collapsible__header;
+exports.collapsible__label = collapsible__label;
+exports.collapsible__trigger = collapsible__trigger;
+exports.default = styles;
+//# sourceMappingURL=Collapsible.module.css.cjs.map

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

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

package/dist/cjs/components/Collapsible/IconWrapper.cjs

@@ -3,25 +3,18 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const Collapsible_module = require('./Collapsible.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
 
-const LabelContainer = styledComponents.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 = styledComponents.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__ */ jsxRuntime.jsxs(LabelContainer, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cva.cn(Collapsible_module.default.collapsible__label), children: [
     icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" }),
-    /* @__PURE__ */ jsxRuntime.jsx(EllipsisContainer, { children }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cva.cn(Collapsible_module.default.collapsible__ellipsis), children }),
     icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: "sm" })
   ] });
 };

package/dist/cjs/components/Collapsible/IconWrapper.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"IconWrapper.cjs","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","jsx","Icon"],"mappings":";;;;;;;;AAMA,MAAMA,cAAAA,GAAiBC,uBAAAA,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,uBAAAA,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,uCACG,cAAA,EAAA,EACEF,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,YAAY,OAAA,oBACnBE,cAAA,CAACC,aACC,IAAA,EAAMJ,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,oBAGbG,cAAA,CAAC,qBAAmBD,QAAAA,EAAS,CAAA;AAAA,IAC5BF,IAAAA,IAAQC,YAAY,KAAA,oBACnBE,cAAA,CAACC,aACC,IAAA,EAAMJ,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ;;;;"}
+{"version":3,"file":"IconWrapper.cjs","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","jsx","Icon","collapsible__ellipsis"],"mappings":";;;;;;;;;AAQO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC,IAAAA;AAAAA,EACAC,OAAAA,GAAU,OAAA;AAAA,EACVC;AAOF,CAAA,KAAM;AACJ,EAAA,uCACG,MAAA,EAAA,EAAK,SAAA,EAAWC,MAAAA,CAAGC,0BAAAA,CAAOC,kBAAkB,CAAA,EAC1CL,QAAAA,EAAAA;AAAAA,IAAAA,IAAAA,IAAQC,YAAY,OAAA,oBACnBK,cAAA,CAACC,aACC,IAAA,EAAMP,IAAAA,EACN,MAAK,IAAA,EAAI,CAAA;AAAA,mCAGZ,MAAA,EAAA,EAAK,SAAA,EAAWG,OAAGC,0BAAAA,CAAOI,qBAAqB,GAAIN,QAAAA,EAAS,CAAA;AAAA,IAC5DF,IAAAA,IAAQC,YAAY,KAAA,oBACnBK,cAAA,CAACC,aACC,IAAA,EAAMP,IAAAA,EACN,MAAK,IAAA,EAAI;AAAA,GAAA,EAGf,CAAA;AAEJ;;;;"}

package/dist/cjs/components/Collapsible/index.cjs

@@ -1,25 +1,26 @@
+require("./Collapsible.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
 const EmptyButton = require('../EmptyButton/index.cjs');
 const IconWrapper = require('./IconWrapper.cjs');
+const Collapsible_module = require('./Collapsible.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 const NavContext = react.createContext({
   open: false,
   onOpenChange: () => null
 });
-const CollapsibleContainer = styledComponents.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] = react.useState(openProp ?? false);
@@ -38,14 +39,19 @@ const Collapsible = ({
     open: openProp ?? open,
     onOpenChange
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContainer, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx(NavContext.Provider, { value, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(Collapsible_module.default.collapsible, className), children: /* @__PURE__ */ jsxRuntime.jsx(NavContext.Provider, { value, children }) });
 };
-const CollapsipleHeaderContainer = styledComponents.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 = classVarianceAuthority.cva(Collapsible_module.default.collapsible__header, {
+  variants: {
+    indicatorDir: {
+      start: Collapsible_module.default["collapsible__header_indicator-dir_start"],
+      end: Collapsible_module.default["collapsible__header_indicator-dir_end"]
+    }
+  },
+  defaultVariants: {
+    indicatorDir: "start"
+  }
+});
 const CollapsipleHeader = react.forwardRef(({
   indicatorDir = "start",
   icon,
@@ -53,19 +59,22 @@ const CollapsipleHeader = react.forwardRef(({
   children,
   wrapInTrigger,
   onClick: onClickProp,
+  className,
   ...props
 }, ref) => {
   const {
     onOpenChange
   } = react.useContext(NavContext);
-  return /* @__PURE__ */ jsxRuntime.jsxs(CollapsipleHeaderContainer, { $indicatorDir: indicatorDir, ref, onClick: (e) => {
+  return /* @__PURE__ */ jsxRuntime.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: cva.cn(headerVariants({
+    indicatorDir
+  }), className), children: [
     indicatorDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Trigger, {}),
     children && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }),
     indicatorDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Collapsible.Trigger, {})
@@ -73,15 +82,13 @@ const CollapsipleHeader = react.forwardRef(({
 });
 CollapsipleHeader.displayName = "CollapsibleHeader";
 Collapsible.Header = CollapsipleHeader;
-const CollapsipleTriggerButton = styledComponents.styled(EmptyButton.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 {
@@ -96,7 +103,7 @@ const CollapsipleTrigger = ({
     }
     onOpenChange();
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(CollapsipleTriggerButton, { onClick, $indicatorDir: indicatorDir, "aria-label": "trigger children", ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(EmptyButton.EmptyButton, { onClick, "aria-label": "trigger children", ...props, className: cva.cn(Collapsible_module.default.collapsible__trigger, className), children: [
     indicatorDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { "data-trigger-icon": true, name: "chevron-right", "data-open": open.toString(), size: "sm" }),
     children && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }),
     indicatorDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { "data-trigger-icon": true, name: "chevron-right", "data-open": open.toString(), size: "sm" })
@@ -104,14 +111,17 @@ const CollapsipleTrigger = ({
 };
 CollapsipleTrigger.displayName = "CollapsibleTrigger";
 Collapsible.Trigger = CollapsipleTrigger;
-const CollapsibleContentWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-guwmyz-3"
-})(["", ""], ({
-  theme,
-  $indicatorDir
-}) => $indicatorDir ? `${$indicatorDir === "start" ? "margin-left" : "margin-right"}: ${theme.click.image.sm.size.width}` : "");
+const contentVariants = classVarianceAuthority.cva(Collapsible_module.default.collapsible__content, {
+  variants: {
+    indicatorDir: {
+      start: Collapsible_module.default["collapsible__content_indicator-dir_start"],
+      end: Collapsible_module.default["collapsible__content_indicator-dir_end"]
+    }
+  }
+});
 const CollapsipleContent = ({
   indicatorDir,
+  className,
   ...props
 }) => {
   const {
@@ -120,7 +130,9 @@ const CollapsipleContent = ({
   if (!open) {
     return;
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContentWrapper, { $indicatorDir: indicatorDir, ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ...props, className: cva.cn(contentVariants({
+    indicatorDir
+  }), className) });
 };
 CollapsipleContent.displayName = "CollapsibleContent";
 Collapsible.Content = CollapsipleContent;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsx","CollapsipleHeaderContainer","theme","$indicatorDir","click","image","sm","size","width","CollapsipleHeader","forwardRef","indicatorDir","icon","iconDir","wrapInTrigger","onClick","onClickProp","ref","useContext","e","IconWrapper","displayName","Header","CollapsipleTriggerButton","EmptyButton","CollapsipleTrigger","preventDefault","stopPropagation","jsxs","Icon","toString","Trigger","CollapsibleContentWrapper","CollapsipleContent","Content"],"mappings":"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"}
+{"version":3,"file":"index.cjs","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","jsxs","e","jsx","IconWrapper","displayName","Header","CollapsipleTrigger","preventDefault","stopPropagation","EmptyButton","collapsible__trigger","Icon","toString","Trigger","contentVariants","collapsible__content","CollapsipleContent","Content"],"mappings":"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"}

package/dist/cjs/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/cjs/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/cjs/components/HoverCard/HoverCard.module.css.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"hover-card__trigger": "hover-card__trigger__tMcTR"
+};
+
+exports.default = styles;
+//# sourceMappingURL=HoverCard.module.css.cjs.map

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

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

package/dist/cjs/components/HoverCard/index.cjs

@@ -1,3 +1,4 @@
+require("./HoverCard.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,8 +6,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const RadixHoverCard = require('@radix-ui/react-hover-card');
 const GenericMenu = require('../GenericMenu/index.cjs');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
 const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
+const HoverCard_module = require('./HoverCard.module.css.cjs');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -34,14 +36,12 @@ const HoverCard = ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Root, { ...props, children });
 };
-const Trigger = styledComponents.styled(RadixHoverCard__namespace.Trigger).withConfig({
-  componentId: "sc-1ect7b6-0"
-})(["width:fit-content;"]);
 const HoverCardTrigger = ({
   children,
+  className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(Trigger, { ...props, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadixHoverCard__namespace.Trigger, { ...props, className: cva.cn(HoverCard_module.default["hover-card__trigger"], className), children });
 };
 HoverCardTrigger.displayName = "HoverCardTrigger";
 HoverCard.Trigger = HoverCardTrigger;

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","RadixHoverCard","Trigger","styled","withConfig","componentId","HoverCardTrigger","jsx","displayName","HoverCardContent","showArrow","forceMount","container","jsxs","GenericPopoverMenuPanel","Content","Arrow","Popover_Arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,sCAAQC,yBAAA,CAAe,IAAA,EAAf,KAAwBD,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAMG,OAAAA,GAAUC,uBAAAA,CAAOF,yBAAAA,CAAeC,OAAO,EAACE,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,uBAAOO,cAAA,CAAC,OAAA,EAAA,EAAQ,GAAIP,KAAAA,EAAQD,QAAAA,EAAS,CAAA;AACvC,CAAA;AACAO,gBAAAA,CAAiBE,WAAAA,GAAc,kBAAA;AAC/BV,SAAAA,CAAUI,OAAAA,GAAUI,gBAAAA;AAEpB,MAAMG,mBAAmBA,CAAC;AAAA,EACxBV,QAAAA;AAAAA,EACAW,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGZ;AACkB,CAAA,KAAM;AAC3B,EAAA,sCACGC,yBAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,WAEA,QAAA,kBAAAY,eAAA,CAACC,mCAAA,EAAA,EACC,EAAA,EAAIb,yBAAAA,CAAec,SACnB,KAAA,EAAM,YAAA,EACN,UAAA,EAAYL,SAAAA,EACZ,GAAIV,KAAAA,EAEHU,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACCH,cAAA,CAACS,iBAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,EAAIf,yBAAAA,CAAee,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAAT,cAAA,CAACU,wBAAa,CAAA,EAChB,CAAA;AAAA,IAEDlB;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAU,gBAAAA,CAAiBD,WAAAA,GAAc,kBAAA;AAC/BV,SAAAA,CAAUiB,OAAAA,GAAUN,gBAAAA;;;;"}
+{"version":3,"file":"index.cjs","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","RadixHoverCard","HoverCardTrigger","className","jsx","cn","styles","displayName","Trigger","HoverCardContent","showArrow","forceMount","container","jsxs","GenericPopoverMenuPanel","Content","Arrow","Popover_Arrow"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAMA,YAAYA,CAAC;AAAA,EAAEC,QAAAA;AAAAA,EAAU,GAAGC;AAAqC,CAAA,KAAM;AAClF,EAAA,sCAAQC,yBAAA,CAAe,IAAA,EAAf,KAAwBD,OAAQD,QAAAA,EAAS,CAAA;AACnD;AAEA,MAAMG,mBAAmBA,CAAC;AAAA,EACxBH,QAAAA;AAAAA,EACAI,SAAAA;AAAAA,EACA,GAAGH;AACiC,CAAA,KAAM;AAC1C,EAAA,uBACEI,cAAA,CAACH,yBAAA,CAAe,OAAA,EAAf,EACC,GAAID,KAAAA,EACJ,SAAA,EAAWK,MAAAA,CAAGC,wBAAAA,CAAO,qBAAqB,CAAA,EAAGH,SAAS,GAErDJ,QAAAA,EACH,CAAA;AAEJ,CAAA;AACAG,gBAAAA,CAAiBK,WAAAA,GAAc,kBAAA;AAC/BT,SAAAA,CAAUU,OAAAA,GAAUN,gBAAAA;AAEpB,MAAMO,mBAAmBA,CAAC;AAAA,EACxBV,QAAAA;AAAAA,EACAW,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGZ;AACkB,CAAA,KAAM;AAC3B,EAAA,sCACGC,yBAAA,CAAe,MAAA,EAAf,EACC,UAAA,EACA,WAEA,QAAA,kBAAAY,eAAA,CAACC,mCAAA,EAAA,EACC,EAAA,EAAIb,yBAAAA,CAAec,SACnB,KAAA,EAAM,YAAA,EACN,UAAA,EAAYL,SAAAA,EACZ,GAAIV,KAAAA,EAEHU,QAAAA,EAAAA;AAAAA,IAAAA,SAAAA,oBACCN,cAAA,CAACY,iBAAA,EAAA,EACC,OAAA,EAAO,IAAA,EACP,EAAA,EAAIf,yBAAAA,CAAee,KAAAA,EACnB,KAAA,EAAO,EAAA,EACP,MAAA,EAAQ,EAAA,EAER,QAAA,kBAAAZ,cAAA,CAACa,wBAAa,CAAA,EAChB,CAAA;AAAA,IAEDlB;AAAAA,GAAAA,EACH,CAAA,EACF,CAAA;AAEJ,CAAA;AACAU,gBAAAA,CAAiBF,WAAAA,GAAc,kBAAA;AAC/BT,SAAAA,CAAUiB,OAAAA,GAAUN,gBAAAA;;;;"}

package/dist/cjs/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/cjs/components/Link/Link.module.css.cjs

@@ -12,6 +12,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,
@@ -23,14 +28,20 @@ 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
 };
 
 exports.default = styles;
 exports.link = link;
+exports.link__icon = link__icon;
+exports.link__icon_size_lg = link__icon_size_lg;
+exports.link__icon_size_md = link__icon_size_md;
+exports.link__icon_size_sm = link__icon_size_sm;
+exports.link__icon_size_xs = link__icon_size_xs;
 exports.link_size_lg = link_size_lg;
 exports.link_size_md = link_size_md;
 exports.link_size_sm = link_size_sm;

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

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

package/dist/cjs/components/Link/index.cjs

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsxs","cn","jsx","Icon","Link","forwardRef"],"mappings":";;;;;;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,0BAAAA,CAAIC,mBAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,oBAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,oBAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,oBAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,oBAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,oBAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,oBAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,oBAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,oBAAO,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,2BAAI,EAAA,EAAI;AAAA,EACnCG,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,uBAAuB,CAAA;AAAA,MAClCK,EAAAA,EAAIL,oBAAO,uBAAuB,CAAA;AAAA,MAClCM,EAAAA,EAAIN,oBAAO,uBAAuB,CAAA;AAAA,MAClCO,EAAAA,EAAIP,oBAAO,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,uBACEK,eAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIH,KAAAA,EACJ,SAAA,EAAWI,OAAG5B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,oBACCS,cAAA,CAAC,MAAA,EAAA,EACC,QAAA,kBAAAA,cAAA,CAACC,SAAA,EAAA,EACC,MAAMV,IAAAA,EACN,SAAA,EAAWQ,MAAAA,CAAG,eAAA,EAAiBX,oBAAAA,CAAqB;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EAC7D,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMW,IAAAA,GAAiCC,iBAAWd,KAAK;;;;"}
+{"version":3,"file":"index.cjs","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","jsxs","cn","jsx","Icon","Link","forwardRef"],"mappings":";;;;;;;;;;;AA6BA,MAAMA,YAAAA,GAAeC,0BAAAA,CAAIC,mBAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,cAAc,CAAA;AAAA,MACzBK,EAAAA,EAAIL,oBAAO,cAAc,CAAA;AAAA,MACzBM,EAAAA,EAAIN,oBAAO,cAAc,CAAA;AAAA,MACzBO,EAAAA,EAAIP,oBAAO,cAAc;AAAA,KAC3B;AAAA,IACAQ,MAAAA,EAAQ;AAAA,MACNC,MAAAA,EAAQT,oBAAO,oBAAoB,CAAA;AAAA,MACnCU,MAAAA,EAAQV,oBAAO,oBAAoB,CAAA;AAAA,MACnCW,QAAAA,EAAUX,oBAAO,sBAAsB,CAAA;AAAA,MACvCY,IAAAA,EAAMZ,oBAAO,kBAAkB,CAAA;AAAA,MAC/Ba,IAAAA,EAAMb,oBAAO,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,0BAAAA,CAAIC,mBAAAA,CAAO,YAAY,CAAA,EAAG;AAAA,EAC7CE,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,oBAAO,oBAAoB,CAAA;AAAA,MAC/BK,EAAAA,EAAIL,oBAAO,oBAAoB,CAAA;AAAA,MAC/BM,EAAAA,EAAIN,oBAAO,oBAAoB,CAAA;AAAA,MAC/BO,EAAAA,EAAIP,oBAAO,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,uBACEK,eAAA,CAAC,aACC,GAAA,EACA,OAAA,EACA,GAAIH,KAAAA,EACJ,SAAA,EAAWI,OAAG5B,YAAAA,CAAa;AAAA,IAAEK,IAAAA;AAAAA,IAAMK;AAAAA,GAAQ,CAAA,EAAGa,SAAS,CAAA,EAEtDF,QAAAA,EAAAA;AAAAA,IAAAA,QAAAA;AAAAA,IACAD,IAAAA,mCACE,MAAA,EAAA,EACC,QAAA,kBAAAS,cAAA,CAACC,aACC,IAAA,EAAMV,IAAAA,EACN,SAAA,EAAWQ,MAAAA,CAAGX,YAAAA,CAAa;AAAA,MAAEZ;AAAAA,KAAM,CAAC,CAAA,EACpC,aAAA,EAAae,MAAK,CAAA,EAEtB;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AACO,MAAMW,IAAAA,GAAiCC,iBAAWd,KAAK;;;;"}

package/dist/cjs/components/Select/common/InternalSelect.cjs

@@ -459,7 +459,7 @@ const MultiSelectCheckboxItem = react.forwardRef(({
   }
   const isChecked = selectedValues.includes(value);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.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__ */ jsxRuntime.jsxs(Container.Container, { orientation: "horizontal", gap: "xs", overflow: "hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.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__ */ jsxRuntime.jsxs(Container.Container, { orientation: "horizontal", gap: "xs", overflow: "hidden", isResponsive: false, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Checkbox.Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, variant: variant ?? "default" }),
       /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, gap: "xxs", isResponsive: false, children: label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         label,