@clickhouse/click-ui 0.6.2-rc2 → 0.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/CardPromotion/CardPromotion.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport { Text } from '@/components/Text';\nimport { CardPromotionProps } from './CardPromotion.types';\nconst Background = styled.div`\n  ${({ theme }) => `\n    background-image: ${theme.click.card.promotion.color.stroke.default};\n    padding: 1px;\n    border-radius: ${theme.click.card.promotion.radii.all};\n    box-shadow: ${theme.click.card.shadow};\n    display: flex;\n\n    &:focus {\n      background: ${theme.click.card.promotion.color.stroke.focus};\n    }\n  `}\n`;\nconst Wrapper = styled.div<{\n  $dismissible?: boolean;\n}>`\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n\n  ${({ theme }) => `\n    background: ${theme.click.card.promotion.color.background.default};\n    color: ${theme.click.card.promotion.color.text.default};\n    border-radius: ${theme.click.card.promotion.radii.all};\n    padding: ${theme.click.card.promotion.space.y} ${theme.click.card.promotion.space.x};\n    gap: ${theme.click.card.promotion.space.gap};\n    transition: .2s ease-in-out all;\n\n    &:hover {\n      background: ${theme.click.card.promotion.color.background.hover};\n      color: ${theme.click.card.promotion.color.text.hover};\n    }\n\n    &:active, &:focus {\n      background: ${theme.click.card.promotion.color.background.active};\n      color: ${theme.click.card.promotion.color.text.active};\n    }\n  `}\n`;\n\nconst CardIcon = styled(Icon)`\n  ${({ theme }) => `\n      height: ${theme.click.card.promotion.icon.size.all};\n      width: ${theme.click.card.promotion.icon.size.all};\n      color: ${theme.click.card.promotion.color.icon.default};\n  `}\n`;\n\nconst DismissWrapper = styled.button`\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  border: none;\n  background-color: transparent;\n  color: inherit;\n  cursor: pointer;\n`;\n\nexport const CardPromotion = ({\n  label,\n  icon,\n  dismissible = false,\n  ...props\n}: CardPromotionProps) => {\n  const [isVisible, setIsVisible] = useState(true);\n\n  return isVisible ? (\n    <Background>\n      <Wrapper\n        $dismissible={dismissible}\n        {...props}\n      >\n        <CardIcon\n          name={icon}\n          aria-hidden\n        />\n\n        <Text>{label}</Text>\n\n        {dismissible && (\n          <DismissWrapper\n            data-testid=\"click-alert-dismiss-button\"\n            onClick={() => setIsVisible(false)}\n          >\n            <Icon\n              name=\"cross\"\n              aria-label=\"close\"\n            />\n          </DismissWrapper>\n        )}\n      </Wrapper>\n    </Background>\n  ) : null;\n};\n"],"names":["Background","styled","div","withConfig","componentId","theme","click","card","promotion","color","stroke","default","radii","all","shadow","focus","Wrapper","background","text","space","y","x","gap","hover","active","CardIcon","Icon","icon","size","DismissWrapper","button","CardPromotion","label","dismissible","props","isVisible","setIsVisible","useState"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/CardPromotion/CardPromotion.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport { Text } from '@/components/Text';\nimport { CardPromotionProps } from './CardPromotion.types';\nconst Background = styled.div`\n  ${({ theme }) => `\n    background-image: ${theme.click.card.promotion.color.stroke.default};\n    padding: 1px;\n    border-radius: ${theme.click.card.promotion.radii.all};\n    box-shadow: ${theme.click.card.shadow};\n    display: flex;\n\n    &:focus {\n      background: ${theme.click.card.promotion.color.stroke.focus};\n    }\n  `}\n`;\nconst Wrapper = styled.div<{\n  $dismissible?: boolean;\n}>`\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n\n  ${({ theme }) => `\n    background: ${theme.click.card.promotion.color.background.default};\n    color: ${theme.click.card.promotion.color.text.default};\n    border-radius: ${theme.click.card.promotion.radii.all};\n    padding: ${theme.click.card.promotion.space.y} ${theme.click.card.promotion.space.x};\n    gap: ${theme.click.card.promotion.space.gap};\n    transition: .2s ease-in-out all;\n\n    &:hover {\n      background: ${theme.click.card.promotion.color.background.hover};\n      color: ${theme.click.card.promotion.color.text.hover};\n    }\n\n    &:active, &:focus {\n      background: ${theme.click.card.promotion.color.background.active};\n      color: ${theme.click.card.promotion.color.text.active};\n    }\n  `}\n`;\n\nconst CardIcon = styled(Icon)`\n  ${({ theme }) => `\n      height: ${theme.click.card.promotion.icon.size.all};\n      width: ${theme.click.card.promotion.icon.size.all};\n      color: ${theme.click.card.promotion.color.icon.default};\n  `}\n`;\n\nconst DismissWrapper = styled.button`\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  border: none;\n  background-color: transparent;\n  color: inherit;\n  cursor: pointer;\n`;\n\nexport const CardPromotion = ({\n  label,\n  icon,\n  dismissible = false,\n  ...props\n}: CardPromotionProps) => {\n  const [isVisible, setIsVisible] = useState(true);\n\n  return isVisible ? (\n    <Background>\n      <Wrapper\n        $dismissible={dismissible}\n        {...props}\n      >\n        <CardIcon\n          name={icon}\n          aria-hidden\n        />\n\n        <Text>{label}</Text>\n\n        {dismissible && (\n          <DismissWrapper\n            type=\"button\"\n            data-testid=\"click-alert-dismiss-button\"\n            onClick={() => setIsVisible(false)}\n          >\n            <Icon\n              name=\"cross\"\n              aria-label=\"close\"\n            />\n          </DismissWrapper>\n        )}\n      </Wrapper>\n    </Background>\n  ) : null;\n};\n"],"names":["Background","styled","div","withConfig","componentId","theme","click","card","promotion","color","stroke","default","radii","all","shadow","focus","Wrapper","background","text","space","y","x","gap","hover","active","CardIcon","Icon","icon","size","DismissWrapper","button","CardPromotion","label","dismissible","props","isVisible","setIsVisible","useState"],"mappings":"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"}

package/dist/esm/components/CardSecondary/CardSecondary.css

@@ -0,0 +1,99 @@
+.wrapper__x6K6U {
+  display: flex;
+  min-width: 320px;
+  max-width: 420px;
+  padding: var(--click-card-secondary-space-all);
+  flex-direction: column;
+  gap: var(--click-card-secondary-space-gap);
+  border: 1px solid var(--click-card-secondary-color-stroke-default);
+  border-radius: var(--click-card-secondary-radii-all);
+  background-color: var(--click-card-secondary-color-background-default);
+  box-shadow: none;
+}
+
+.wrapper_shadow__jXc8Y {
+  box-shadow: var(--shadow-1);
+}
+
+.wrapper__x6K6U:hover,
+.wrapper__x6K6U :focus {
+  background-color: var(--click-card-secondary-color-background-hover);
+  cursor: pointer;
+}
+
+.wrapper__x6K6U:hover .infolink__text__XbiBm,
+.wrapper__x6K6U:hover .infolink__icon__PBRPu,
+.wrapper__x6K6U :focus .infolink__text__XbiBm,
+.wrapper__x6K6U :focus .infolink__icon__PBRPu {
+  color: var(--click-card-secondary-color-link-hover);
+}
+
+.wrapper__x6K6U[aria-disabled='true'],
+.wrapper__x6K6U[aria-disabled='true']:hover,
+.wrapper__x6K6U[aria-disabled='true']:focus,
+.wrapper__x6K6U[aria-disabled='true']:active {
+  border: 1px solid var(--click-card-secondary-color-stroke-disabled);
+  background-color: var(--click-card-secondary-color-background-disabled);
+  color: var(--click-card-secondary-color-title-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.wrapper__x6K6U[aria-disabled='true'] .infolink__text__XbiBm,
+.wrapper__x6K6U[aria-disabled='true'] .infolink__icon__PBRPu {
+  color: var(--click-card-secondary-color-link-disabled);
+}
+
+.header__q8HJ0 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.headerleft__o-Mu5 {
+  display: flex;
+  align-items: center;
+  gap: var(--click-card-secondary-space-gap);
+}
+
+.headerleft__o-Mu5 h3,
+.headerleft__o-Mu5 svg {
+  color: var(--click-global-color-text-default);
+}
+
+.headerleft_disabled__1uiTV h3,
+.headerleft_disabled__1uiTV svg {
+  color: var(--click-global-color-text-muted);
+}
+
+.content__OqlXq {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.customicon__LTYpO {
+  width: var(--click-image-lg-size-width);
+  height: var(--click-image-lg-size-height);
+}
+
+.infolink__Sv6Xq {
+  display: flex;
+  align-items: center;
+  gap: var(--click-card-secondary-space-link-gap);
+  color: var(--click-card-secondary-color-link-default);
+  text-decoration: none;
+}
+
+/* stylelint-disable-next-line no-descending-specificity -- icon color defined
+   alongside its size to mirror the source styled(Icon) rule; the hover/disabled
+   link-color rules above intentionally win via the wrapper-scoped cascade. */
+.infolink__icon__PBRPu {
+  width: var(--click-image-md-size-width);
+  height: var(--click-image-md-size-height);
+  color: var(--click-card-secondary-color-link-default);
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.infolink__text__XbiBm {
+}

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

@@ -0,0 +1,25 @@
+const wrapper = "wrapper__x6K6U";
+const wrapper_shadow = "wrapper_shadow__jXc8Y";
+const infolink__text = "infolink__text__XbiBm";
+const infolink__icon = "infolink__icon__PBRPu";
+const header = "header__q8HJ0";
+const headerleft = "headerleft__o-Mu5";
+const headerleft_disabled = "headerleft_disabled__1uiTV";
+const content = "content__OqlXq";
+const customicon = "customicon__LTYpO";
+const infolink = "infolink__Sv6Xq";
+const styles = {
+	wrapper: wrapper,
+	wrapper_shadow: wrapper_shadow,
+	infolink__text: infolink__text,
+	infolink__icon: infolink__icon,
+	header: header,
+	headerleft: headerleft,
+	headerleft_disabled: headerleft_disabled,
+	content: content,
+	customicon: customicon,
+	infolink: infolink
+};
+
+export { content, customicon, styles as default, header, headerleft, headerleft_disabled, infolink, infolink__icon, infolink__text, wrapper, wrapper_shadow };
+//# sourceMappingURL=CardSecondary.module.css.js.map

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

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

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

@@ -1,85 +1,27 @@
+import "./CardSecondary.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './CardSecondary.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 import { Title } from '../Title/index.js';
 import { Badge } from '../Badge/index.js';
 import { Text } from '../Text/index.js';
+import { cva } from 'class-variance-authority';
 
-const Header = styled.div.withConfig({
-  componentId: "sc-1drx130-0"
-})(["display:flex;justify-content:space-between;align-items:center;"]);
-const HeaderLeft = styled.div.withConfig({
-  componentId: "sc-1drx130-1"
-})(["display:flex;align-items:center;gap:", ";h3,svg{color:", ";}"], ({
-  theme
-}) => theme.click.card.secondary.space.gap, ({
-  $disabled,
-  theme
-}) => $disabled == true ? theme.click.global.color.text.muted : theme.click.global.color.text.default);
-const Content = styled.div.withConfig({
-  componentId: "sc-1drx130-2"
-})(["display:flex;flex-direction:column;flex:1;"]);
-const CustomIcon = styled.img.withConfig({
-  componentId: "sc-1drx130-3"
-})(["height:", ";width:", ";"], ({
-  theme
-}) => theme.click.image.lg.size.height, ({
-  theme
-}) => theme.click.image.lg.size.width);
-const InfoLink = styled.a.withConfig({
-  componentId: "sc-1drx130-4"
-})(["display:flex;align-items:center;color:", ";gap:", ";text-decoration:none;"], ({
-  theme
-}) => theme.click.card.secondary.color.link.default, ({
-  theme
-}) => theme.click.card.secondary.space.link.gap);
-const LinkIconContainer = styled(SvgImage).withConfig({
-  componentId: "sc-1drx130-5"
-})(["color:", ";height:", ";width:", ";"], ({
-  theme
-}) => theme.click.card.secondary.color.link.default, ({
-  theme
-}) => theme.click.image.md.size.height, ({
-  theme
-}) => theme.click.image.md.size.width);
-const LinkText = styled(Text).withConfig({
-  componentId: "sc-1drx130-6"
-})([""]);
-const LinkIcon = styled(LinkIconContainer).withConfig({
-  componentId: "sc-1drx130-7"
-})([""]);
-const Wrapper = styled.div.withConfig({
-  componentId: "sc-1drx130-8"
-})(["background-color:", ";border-radius:", ";border:", ";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,:focus{background-color:", ";cursor:pointer;", ",", "{color:", ";}}&[aria-disabled='true'],&[aria-disabled='true']:hover,&[aria-disabled='true']:focus,&[aria-disabled='true']:active{pointer-events:none;", "}"], ({
-  theme
-}) => theme.click.card.secondary.color.background.default, ({
-  theme
-}) => theme.click.card.secondary.radii.all, ({
-  theme
-}) => `1px solid ${theme.click.card.secondary.color.stroke.default}`, ({
-  theme
-}) => theme.click.card.secondary.space.all, ({
-  theme
-}) => theme.click.card.secondary.space.gap, ({
-  $hasShadow,
-  theme
-}) => $hasShadow ? theme.shadow[1] : "none", ({
-  theme
-}) => theme.click.card.secondary.color.background.hover, LinkText, LinkIcon, ({
-  theme
-}) => theme.click.card.secondary.color.link.hover, ({
-  theme
-}) => `
-      background-color: ${theme.click.card.secondary.color.background.disabled};
-      color: ${theme.click.card.secondary.color.title.disabled};
-      border: 1px solid ${theme.click.card.secondary.color.stroke.disabled};
-      cursor: not-allowed;
-
-      ${LinkText},
-      ${LinkIcon} {
-        color: ${theme.click.card.secondary.color.link.disabled};
-      }
-    `);
+const wrapperVariants = cva(styles.wrapper, {
+  variants: {
+    shadow: {
+      true: styles["wrapper_shadow"]
+    }
+  }
+});
+const headerLeftVariants = cva(styles.headerleft, {
+  variants: {
+    disabled: {
+      true: styles["headerleft_disabled"]
+    }
+  }
+});
 const CardSecondary = ({
   title,
   icon,
@@ -93,20 +35,29 @@ const CardSecondary = ({
   infoText,
   infoIcon = "chevron-right",
   infoAssetSize = "md",
+  className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs(Wrapper, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
-    /* @__PURE__ */ jsxs(Header, { children: [
-      /* @__PURE__ */ jsxs(HeaderLeft, { $disabled: disabled, children: [
-        iconUrl ? /* @__PURE__ */ jsx(CustomIcon, { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsx(SvgImage, { name: icon, "aria-hidden": true, size: "lg" }),
+  const isInfoLink = !disabled && !!infoUrl && infoUrl.length > 0;
+  const InfoComponent = isInfoLink ? "a" : "div";
+  return /* @__PURE__ */ jsxs("div", { "aria-disabled": disabled, tabIndex: 0, ...props, className: cn(wrapperVariants({
+    shadow: hasShadow
+  }), className), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsxs("div", { className: cn(headerLeftVariants({
+        disabled
+      })), children: [
+        iconUrl ? /* @__PURE__ */ jsx("img", { className: styles.customicon, src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsx(SvgImage, { name: icon, "aria-hidden": true, size: "lg" }),
         /* @__PURE__ */ jsx(Title, { type: "h3", children: title })
       ] }),
       badgeText && /* @__PURE__ */ jsx(Badge, { text: badgeText, state: disabled == true ? "disabled" : badgeState })
     ] }),
-    /* @__PURE__ */ jsx(Content, { children: /* @__PURE__ */ jsx(Text, { color: "muted", children: description }) }),
-    (infoUrl || infoText) && /* @__PURE__ */ jsxs(InfoLink, { href: disabled ? void 0 : infoUrl, as: disabled || !infoUrl || infoUrl.length === 0 ? "div" : "a", children: [
-      /* @__PURE__ */ jsx(LinkText, { children: infoText }),
-      /* @__PURE__ */ jsx(LinkIcon, { size: infoAssetSize, name: infoIcon })
+    /* @__PURE__ */ jsx("div", { className: styles.content, children: /* @__PURE__ */ jsx(Text, { color: "muted", children: description }) }),
+    (infoUrl || infoText) && /* @__PURE__ */ jsxs(InfoComponent, { className: styles.infolink, ...isInfoLink ? {
+      href: infoUrl
+    } : {}, children: [
+      /* @__PURE__ */ jsx(Text, { className: styles.infolink__text, children: infoText }),
+      /* @__PURE__ */ jsx(SvgImage, { className: styles.infolink__icon, size: infoAssetSize, name: infoIcon })
     ] })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/CardSecondary/CardSecondary.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { Badge } from '@/components/Badge';\nimport { Icon } from '@/components/Icon';\nimport { Title } from '@/components/Title';\nimport { Text } from '@/components/Text';\nimport { CardSecondaryProps } from './CardSecondary.types';\n\nconst Header = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n`;\n\nconst HeaderLeft = styled.div<{ $disabled?: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.click.card.secondary.space.gap};\n\n  h3,\n  svg {\n    color: ${({ $disabled, theme }) =>\n      $disabled == true\n        ? theme.click.global.color.text.muted\n        : theme.click.global.color.text.default};\n  }\n`;\n\nconst Content = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n`;\n\nconst CustomIcon = styled.img`\n  height: ${({ theme }) => theme.click.image.lg.size.height};\n  width: ${({ theme }) => theme.click.image.lg.size.width};\n`;\n\nconst InfoLink = styled.a`\n  display: flex;\n  align-items: center;\n  color: ${({ theme }) => theme.click.card.secondary.color.link.default};\n  gap: ${({ theme }) => theme.click.card.secondary.space.link.gap};\n  text-decoration: none;\n`;\nconst LinkIconContainer = styled(Icon)`\n  color: ${({ theme }) => theme.click.card.secondary.color.link.default};\n  height: ${({ theme }) => theme.click.image.md.size.height};\n  width: ${({ theme }) => theme.click.image.md.size.width};\n`;\n\nconst LinkText = styled(Text)``;\nconst LinkIcon = styled(LinkIconContainer)``;\n\nconst Wrapper = styled.div<{\n  $hasShadow?: boolean;\n}>`\n  background-color: ${({ theme }) => theme.click.card.secondary.color.background.default};\n  border-radius: ${({ theme }) => theme.click.card.secondary.radii.all};\n  border: ${({ theme }) =>\n    `1px solid ${theme.click.card.secondary.color.stroke.default}`};\n  max-width: 420px;\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  padding: ${({ theme }) => theme.click.card.secondary.space.all};\n  gap: ${({ theme }) => theme.click.card.secondary.space.gap};\n  box-shadow: ${({ $hasShadow, theme }) => ($hasShadow ? theme.shadow[1] : 'none')};\n\n  &:hover,\n  :focus {\n    background-color: ${({ theme }) => theme.click.card.secondary.color.background.hover};\n    cursor: pointer;\n    ${LinkText},\n    ${LinkIcon} {\n      color: ${({ theme }) => theme.click.card.secondary.color.link.hover};\n    }\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']:hover,\n  &[aria-disabled='true']:focus,\n  &[aria-disabled='true']:active {\n    pointer-events: none;\n    ${({ theme }) => `\n      background-color: ${theme.click.card.secondary.color.background.disabled};\n      color: ${theme.click.card.secondary.color.title.disabled};\n      border: 1px solid ${theme.click.card.secondary.color.stroke.disabled};\n      cursor: not-allowed;\n\n      ${LinkText},\n      ${LinkIcon} {\n        color: ${theme.click.card.secondary.color.link.disabled};\n      }\n    `}\n  }\n`;\n\nexport const CardSecondary = ({\n  title,\n  icon,\n  iconUrl,\n  badgeState,\n  badgeText = '',\n  hasShadow = false,\n  disabled = false,\n  description,\n  infoUrl,\n  infoText,\n  infoIcon = 'chevron-right',\n  infoAssetSize = 'md',\n  ...props\n}: CardSecondaryProps) => {\n  return (\n    <Wrapper\n      aria-disabled={disabled}\n      tabIndex={0}\n      $hasShadow={hasShadow}\n      {...props}\n    >\n      <Header>\n        <HeaderLeft $disabled={disabled}>\n          {iconUrl ? (\n            <CustomIcon\n              src={iconUrl}\n              alt=\"card icon\"\n              aria-hidden\n            />\n          ) : (\n            icon && (\n              <Icon\n                name={icon}\n                aria-hidden\n                size=\"lg\"\n              />\n            )\n          )}\n          <Title type=\"h3\">{title}</Title>\n        </HeaderLeft>\n        {badgeText && (\n          <Badge\n            text={badgeText}\n            state={disabled == true ? 'disabled' : badgeState}\n          />\n        )}\n      </Header>\n\n      <Content>\n        <Text color=\"muted\">{description}</Text>\n      </Content>\n      {(infoUrl || infoText) && (\n        <InfoLink\n          href={disabled ? undefined : infoUrl}\n          as={disabled || !infoUrl || infoUrl.length === 0 ? 'div' : 'a'}\n        >\n          <LinkText>{infoText}</LinkText>\n          <LinkIcon\n            size={infoAssetSize}\n            name={infoIcon}\n          />\n        </InfoLink>\n      )}\n    </Wrapper>\n  );\n};\n"],"names":["Header","styled","div","withConfig","componentId","HeaderLeft","theme","click","card","secondary","space","gap","$disabled","global","color","text","muted","default","Content","CustomIcon","img","image","lg","size","height","width","InfoLink","a","link","LinkIconContainer","Icon","md","LinkText","Text","LinkIcon","Wrapper","background","radii","all","stroke","$hasShadow","shadow","hover","disabled","title","CardSecondary","icon","iconUrl","badgeState","badgeText","hasShadow","description","infoUrl","infoText","infoIcon","infoAssetSize","props","undefined","length"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/CardSecondary/CardSecondary.tsx"],"sourcesContent":["import { Badge } from '@/components/Badge';\nimport { Icon } from '@/components/Icon';\nimport { Title } from '@/components/Title';\nimport { Text } from '@/components/Text';\nimport { cn, cva } from '@/lib/cva';\nimport { CardSecondaryProps } from './CardSecondary.types';\nimport styles from './CardSecondary.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    shadow: {\n      true: styles['wrapper_shadow'],\n    },\n  },\n});\n\nconst headerLeftVariants = cva(styles.headerleft, {\n  variants: {\n    disabled: {\n      true: styles['headerleft_disabled'],\n    },\n  },\n});\n\nexport const CardSecondary = ({\n  title,\n  icon,\n  iconUrl,\n  badgeState,\n  badgeText = '',\n  hasShadow = false,\n  disabled = false,\n  description,\n  infoUrl,\n  infoText,\n  infoIcon = 'chevron-right',\n  infoAssetSize = 'md',\n  className,\n  ...props\n}: CardSecondaryProps) => {\n  const isInfoLink = !disabled && !!infoUrl && infoUrl.length > 0;\n  const InfoComponent = isInfoLink ? 'a' : 'div';\n  return (\n    <div\n      aria-disabled={disabled}\n      tabIndex={0}\n      {...props}\n      className={cn(wrapperVariants({ shadow: hasShadow }), className)}\n    >\n      <div className={styles.header}>\n        <div className={cn(headerLeftVariants({ disabled }))}>\n          {iconUrl ? (\n            <img\n              className={styles.customicon}\n              src={iconUrl}\n              alt=\"card icon\"\n              aria-hidden\n            />\n          ) : (\n            icon && (\n              <Icon\n                name={icon}\n                aria-hidden\n                size=\"lg\"\n              />\n            )\n          )}\n          <Title type=\"h3\">{title}</Title>\n        </div>\n        {badgeText && (\n          <Badge\n            text={badgeText}\n            state={disabled == true ? 'disabled' : badgeState}\n          />\n        )}\n      </div>\n\n      <div className={styles.content}>\n        <Text color=\"muted\">{description}</Text>\n      </div>\n      {(infoUrl || infoText) && (\n        <InfoComponent\n          className={styles.infolink}\n          {...(isInfoLink ? { href: infoUrl } : {})}\n        >\n          <Text className={styles.infolink__text}>{infoText}</Text>\n          <Icon\n            className={styles.infolink__icon}\n            size={infoAssetSize}\n            name={infoIcon}\n          />\n        </InfoComponent>\n      )}\n    </div>\n  );\n};\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","shadow","true","headerLeftVariants","headerleft","disabled","CardSecondary","title","icon","iconUrl","badgeState","badgeText","hasShadow","description","infoUrl","infoText","infoIcon","infoAssetSize","className","props","isInfoLink","length","InfoComponent","cn","header","customicon","Icon","content","infolink","href","infolink__text","infolink__icon"],"mappings":"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"}

package/dist/esm/components/ConfirmationDialog/ConfirmationDialog.css

@@ -0,0 +1,20 @@
+.content__fI-1- {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+}
+
+.actions__14jg2 {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--click-dialog-space-gap);
+}
+
+/* 640px = theme.breakpoint.sizes.sm; CSS media queries can't reference JS theme tokens */
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 640px) {
+  .actions__14jg2 {
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,9 @@
+const content = "content__fI-1-";
+const actions = "actions__14jg2";
+const styles = {
+	content: content,
+	actions: actions
+};
+
+export { actions, content, styles as default };
+//# sourceMappingURL=ConfirmationDialog.module.css.js.map

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

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

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

@@ -1,20 +1,15 @@
+import "./ConfirmationDialog.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './ConfirmationDialog.module.css.js';
 import { Dialog } from '../Dialog/index.js';
 import { Container } from '../Container/index.js';
 import { Text } from '../Text/index.js';
 import { Separator } from '../Separator/index.js';
 
-const ActionsWrapper = styled.div.withConfig({
-  componentId: "sc-6eozxy-0"
-})(["display:flex;justify-content:flex-end;gap:", ";@media (max-width:", "){flex-direction:column;}"], (props) => props.theme.click.dialog.space.gap, ({
-  theme
-}) => theme.breakpoint.sizes.sm);
-const DialogContent = styled.div.withConfig({
-  componentId: "sc-6eozxy-1"
-})(["overflow:hidden;display:flex;flex-direction:column;"]);
 const ConfirmationDialog = ({
   children,
+  className,
   disabled,
   loading,
   message,
@@ -35,10 +30,10 @@ const ConfirmationDialog = ({
     if (!open2 && onCancel) {
       onCancel();
     }
-  }, children: /* @__PURE__ */ jsxs(DialogContent, { as: Dialog.Content, title, showClose, ...props, children: [
+  }, children: /* @__PURE__ */ jsxs(Dialog.Content, { title, showClose, ...props, className: cn(styles.content, className), children: [
     /* @__PURE__ */ jsx(Container, { overflow: "auto", grow: "1", orientation: "vertical", children: children ? children : /* @__PURE__ */ jsx(Text, { children: message }) }),
     /* @__PURE__ */ jsx(Separator, { size: "xl" }),
-    /* @__PURE__ */ jsxs(ActionsWrapper, { children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.actions, children: [
       /* @__PURE__ */ jsx(Dialog.Close, { label: secondaryActionLabel, "data-testid": "cancel-action-button" }),
       /* @__PURE__ */ jsx(Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, autoFocus: open, onClick: () => {
         if (onConfirm) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/ConfirmationDialog/ConfirmationDialog.tsx"],"sourcesContent":["import { Container } from '@/components/Container';\nimport { Dialog } from '@/components/Dialog';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\nimport { ReactElement } from 'react';\nimport { styled } from 'styled-components';\nimport { ConfirmationDialogProps } from './ConfirmationDialog.types';\n\nconst ActionsWrapper = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  gap: ${props => props.theme.click.dialog.space.gap};\n  @media (max-width: ${({ theme }) => theme.breakpoint.sizes.sm}) {\n    flex-direction: column;\n  }\n`;\n\nconst DialogContent = styled.div`\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const ConfirmationDialog = ({\n  children,\n  disabled,\n  loading,\n  message,\n  onCancel,\n  onConfirm,\n  open,\n  primaryActionLabel = 'Confirm',\n  primaryActionType = 'primary',\n  secondaryActionLabel = 'Cancel',\n  showClose,\n  title,\n  ...props\n}: ConfirmationDialogProps): ReactElement => {\n  if (children && message) {\n    throw new Error(\"You can't pass children and message props at the same time\");\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(open: boolean) => {\n        if (!open && onCancel) {\n          onCancel();\n        }\n      }}\n    >\n      <DialogContent\n        as={Dialog.Content}\n        title={title}\n        showClose={showClose}\n        {...props}\n      >\n        <Container\n          overflow=\"auto\"\n          grow=\"1\"\n          orientation=\"vertical\"\n        >\n          {children ? children : <Text>{message}</Text>}\n        </Container>\n        <Separator size=\"xl\" />\n        <ActionsWrapper>\n          <Dialog.Close\n            label={secondaryActionLabel}\n            data-testid=\"cancel-action-button\"\n          />\n          <Dialog.Close\n            loading={!!loading}\n            disabled={!!disabled || !!loading}\n            type={primaryActionType}\n            label={primaryActionLabel}\n            autoFocus={open}\n            onClick={() => {\n              if (onConfirm) {\n                onConfirm();\n              }\n            }}\n            data-testid=\"confirm-action-button\"\n          />\n        </ActionsWrapper>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"names":["ActionsWrapper","styled","div","withConfig","componentId","props","theme","click","dialog","space","gap","breakpoint","sizes","sm","DialogContent","ConfirmationDialog","children","disabled","loading","message","onCancel","onConfirm","open","primaryActionLabel","primaryActionType","secondaryActionLabel","showClose","title","Error","Dialog","Content"],"mappings":";;;;;;;AAQA,MAAMA,cAAAA,GAAiBC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4CAAA,EAAA,qBAAA,EAAA,2BAAA,CAAA,EAGxBC,CAAAA,KAAAA,KAASA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,MAAAA,CAAOC,KAAAA,CAAMC,KAC1B,CAAC;AAAA,EAAEJ;AAAM,CAAA,KAAMA,KAAAA,CAAMK,UAAAA,CAAWC,KAAAA,CAAMC,EAAE,CAAA;AAK/D,MAAMC,aAAAA,GAAgBb,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qDAAA,CAAA,CAAA;AAMzB,MAAMW,qBAAqBA,CAAC;AAAA,EACjCC,QAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,kBAAAA,GAAqB,SAAA;AAAA,EACrBC,iBAAAA,GAAoB,SAAA;AAAA,EACpBC,oBAAAA,GAAuB,QAAA;AAAA,EACvBC,SAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACA,GAAGtB;AACoB,CAAA,KAAoB;AAC3C,EAAA,IAAIW,YAAYG,OAAAA,EAAS;AACvB,IAAA,MAAM,IAAIS,MAAM,4DAA4D,CAAA;AAAA,EAC9E;AAEA,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EACC,IAAA,EACA,YAAA,EAAc,CAACN,KAAAA,KAAkB;AAC/B,IAAA,IAAI,CAACA,SAAQF,QAAAA,EAAU;AACrBA,MAAAA,QAAAA,EAAS;AAAA,IACX;AAAA,EACF,CAAA,EAEA,+BAAC,aAAA,EAAA,EACC,EAAA,EAAIS,OAAOC,OAAAA,EACX,KAAA,EACA,SAAA,EACA,GAAIzB,KAAAA,EAEJ,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,EAAS,MAAA,EACT,IAAA,EAAK,GAAA,EACL,WAAA,EAAY,UAAA,EAEXW,QAAAA,EAAAA,QAAAA,GAAWA,QAAAA,mBAAW,GAAA,CAAC,IAAA,EAAA,EAAMG,QAAAA,EAAAA,OAAAA,EAAQ,CAAA,EACxC,CAAA;AAAA,oBACA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,IAAA,EAAI,CAAA;AAAA,yBACnB,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAO,KAAA,EAAP,EACC,KAAA,EAAOM,oBAAAA,EACP,eAAY,sBAAA,EAAsB,CAAA;AAAA,sBAEpC,GAAA,CAAC,OAAO,KAAA,EAAP,EACC,SAAS,CAAC,CAACP,OAAAA,EACX,QAAA,EAAU,CAAC,CAACD,YAAY,CAAC,CAACC,SAC1B,IAAA,EAAMM,iBAAAA,EACN,OAAOD,kBAAAA,EACP,SAAA,EAAWD,IAAAA,EACX,OAAA,EAAS,MAAM;AACb,QAAA,IAAID,SAAAA,EAAW;AACbA,UAAAA,SAAAA,EAAU;AAAA,QACZ;AAAA,MACF,CAAA,EACA,eAAY,uBAAA,EAAuB;AAAA,KAAA,EAEvC;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/ConfirmationDialog/ConfirmationDialog.tsx"],"sourcesContent":["import { Container } from '@/components/Container';\nimport { Dialog } from '@/components/Dialog';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\nimport { ReactElement } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './ConfirmationDialog.module.css';\nimport { ConfirmationDialogProps } from './ConfirmationDialog.types';\n\nexport const ConfirmationDialog = ({\n  children,\n  className,\n  disabled,\n  loading,\n  message,\n  onCancel,\n  onConfirm,\n  open,\n  primaryActionLabel = 'Confirm',\n  primaryActionType = 'primary',\n  secondaryActionLabel = 'Cancel',\n  showClose,\n  title,\n  ...props\n}: ConfirmationDialogProps): ReactElement => {\n  if (children && message) {\n    throw new Error(\"You can't pass children and message props at the same time\");\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(open: boolean) => {\n        if (!open && onCancel) {\n          onCancel();\n        }\n      }}\n    >\n      <Dialog.Content\n        title={title}\n        showClose={showClose}\n        {...props}\n        className={cn(styles.content, className)}\n      >\n        <Container\n          overflow=\"auto\"\n          grow=\"1\"\n          orientation=\"vertical\"\n        >\n          {children ? children : <Text>{message}</Text>}\n        </Container>\n        <Separator size=\"xl\" />\n        <div className={styles.actions}>\n          <Dialog.Close\n            label={secondaryActionLabel}\n            data-testid=\"cancel-action-button\"\n          />\n          <Dialog.Close\n            loading={!!loading}\n            disabled={!!disabled || !!loading}\n            type={primaryActionType}\n            label={primaryActionLabel}\n            autoFocus={open}\n            onClick={() => {\n              if (onConfirm) {\n                onConfirm();\n              }\n            }}\n            data-testid=\"confirm-action-button\"\n          />\n        </div>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\n"],"names":["ConfirmationDialog","children","className","disabled","loading","message","onCancel","onConfirm","open","primaryActionLabel","primaryActionType","secondaryActionLabel","showClose","title","props","Error","cn","styles","content","actions"],"mappings":";;;;;;;;AASO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,kBAAAA,GAAqB,SAAA;AAAA,EACrBC,iBAAAA,GAAoB,SAAA;AAAA,EACpBC,oBAAAA,GAAuB,QAAA;AAAA,EACvBC,SAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACA,GAAGC;AACoB,CAAA,KAAoB;AAC3C,EAAA,IAAIb,YAAYI,OAAAA,EAAS;AACvB,IAAA,MAAM,IAAIU,MAAM,4DAA4D,CAAA;AAAA,EAC9E;AAEA,EAAA,uBACE,GAAA,CAAC,MAAA,EAAA,EACC,IAAA,EACA,YAAA,EAAc,CAACP,KAAAA,KAAkB;AAC/B,IAAA,IAAI,CAACA,SAAQF,QAAAA,EAAU;AACrBA,MAAAA,QAAAA,EAAS;AAAA,IACX;AAAA,EACF,CAAA,EAEA,QAAA,kBAAA,IAAA,CAAC,MAAA,CAAO,OAAA,EAAP,EACC,KAAA,EACA,SAAA,EACA,GAAIQ,KAAAA,EACJ,SAAA,EAAWE,EAAAA,CAAGC,MAAAA,CAAOC,OAAAA,EAAShB,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,EAAS,MAAA,EACT,IAAA,EAAK,GAAA,EACL,WAAA,EAAY,UAAA,EAEXD,QAAAA,EAAAA,QAAAA,GAAWA,QAAAA,mBAAW,GAAA,CAAC,IAAA,EAAA,EAAMI,QAAAA,EAAAA,OAAAA,EAAQ,CAAA,EACxC,CAAA;AAAA,oBACA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAK,IAAA,EAAI,CAAA;AAAA,oBACpB,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWY,MAAAA,CAAOE,OAAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,OAAO,KAAA,EAAP,EACC,KAAA,EAAOR,oBAAAA,EACP,eAAY,sBAAA,EAAsB,CAAA;AAAA,sBAEpC,GAAA,CAAC,OAAO,KAAA,EAAP,EACC,SAAS,CAAC,CAACP,OAAAA,EACX,QAAA,EAAU,CAAC,CAACD,YAAY,CAAC,CAACC,SAC1B,IAAA,EAAMM,iBAAAA,EACN,OAAOD,kBAAAA,EACP,SAAA,EAAWD,IAAAA,EACX,OAAA,EAAS,MAAM;AACb,QAAA,IAAID,SAAAA,EAAW;AACbA,UAAAA,SAAAA,EAAU;AAAA,QACZ;AAAA,MACF,CAAA,EACA,eAAY,uBAAA,EAAuB;AAAA,KAAA,EAEvC;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/esm/components/ContextMenu/ContextMenu.css

@@ -0,0 +1,28 @@
+.right-menu-content__0-EQz {
+  z-index: 1;
+  flex-direction: column;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='bottom'] {
+  margin-top: -1px;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='top'] {
+  margin-bottom: -1px;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='left'] {
+  margin-right: -1px;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='left'] .popover-arrow__z8r3W {
+  margin-right: 1rem;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='right'] {
+  margin-left: -1px;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='right'] .popover-arrow__z8r3W {
+  margin-left: 1rem;
+}

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

@@ -0,0 +1,6 @@
+const styles = {
+	"right-menu-content": "right-menu-content__0-EQz",
+	"right-menu-content_show-arrow": "right-menu-content_show-arrow__-yaE-"};
+
+export { styles as default };
+//# sourceMappingURL=ContextMenu.module.css.js.map

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

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

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

@@ -1,13 +1,17 @@
+import "./ContextMenu.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RightMenu from '@radix-ui/react-context-menu';
 import { styled } from 'styled-components';
 import { forwardRef } from 'react';
-import { GenericMenuPanel, GenericMenuItem, Arrow } from '../GenericMenu/index.js';
+import { GenericMenuItem, GenericMenuPanel, Arrow } from '../GenericMenu/index.js';
+import { cn } from '../../lib/cva.js';
 import Popover_Arrow from '../Assets/Icons/Popover-Arrow.js';
 import { IconWrapper } from '../IconWrapper/index.js';
 import { useInputModality } from '../../hooks/internal/useInputModality.js';
 import { useResolvedPortalContainer } from '../../providers/PortalContext.js';
+import styles from './ContextMenu.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
+import { cva } from 'class-variance-authority';
 
 const ContextMenu = (props) => /* @__PURE__ */ jsx(RightMenu.Root, { ...props });
 const TriggerDiv = styled.div.withConfig({
@@ -36,31 +40,25 @@ const ContextMenuSubTrigger = ({
 };
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
 ContextMenu.SubTrigger = ContextMenuSubTrigger;
-const RightMenuContent = styled(GenericMenuPanel).withConfig({
-  componentId: "sc-8z6kye-1"
-})(["flex-direction:column;z-index:1;", ";"], ({
-  $showArrow
-}) => $showArrow ? `
-      &[data-side="bottom"] {
-        margin-top: -1px;
-      }
-      &[data-side="top"] {
-        margin-bottom: -1px;
-      }
-      &[data-side="left"] {
-        margin-right: -1px;
-        .popover-arrow {
-          margin-right: 1rem;
-        }
-      }
-      }
-      &[data-side="right"] {
-        margin-left: -1px;
-        .popover-arrow {
-          margin-left: 1rem;
-        }
-      }
-  ` : "");
+const rightMenuContentVariants = cva(styles["right-menu-content"], {
+  variants: {
+    showArrow: {
+      true: styles["right-menu-content_show-arrow"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    showArrow: false
+  }
+});
+const _RightMenuContent = ({
+  showArrow,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsx(GenericMenuPanel, { ref, showArrow, ...props, className: cn(rightMenuContentVariants({
+  showArrow
+}), className) });
+const RightMenuContent = forwardRef(_RightMenuContent);
 const ContextMenuContent = ({
   sub,
   children,
@@ -76,7 +74,7 @@ const ContextMenuContent = ({
   const ContentElement = sub ? RightMenu.SubContent : RightMenu.Content;
   const inputModalityProps = useInputModality();
   const portalContainer = useResolvedPortalContainer(container);
-  return /* @__PURE__ */ jsx(RightMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(RightMenuContent, { ...props, $type: "context-menu", $showArrow: showArrow, as: ContentElement, ...inputModalityProps, children: [
+  return /* @__PURE__ */ jsx(RightMenu.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs(RightMenuContent, { ...props, type: "context-menu", showArrow, as: ContentElement, ...inputModalityProps, children: [
     showArrow && /* @__PURE__ */ jsx(Arrow, { asChild: true, as: RightMenu.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsx(Popover_Arrow, { className: "popover-arrow" }) }),
     children
   ] }) });
@@ -84,7 +82,7 @@ const ContextMenuContent = ({
 ContextMenuContent.displayName = "ContextMenuContent";
 ContextMenu.Content = ContextMenuContent;
 const RightMenuGroup = styled(RightMenu.Group).withConfig({
-  componentId: "sc-8z6kye-2"
+  componentId: "sc-8z6kye-1"
 })(["width:100%;border-bottom:1px solid ", ";"], ({
   theme
 }) => theme.click.genericMenu.item.color.default.stroke.default);
@@ -94,7 +92,7 @@ const ContextMenuGroup = (props) => {
 ContextMenuGroup.displayName = "ContextMenuGroup";
 ContextMenu.Group = ContextMenuGroup;
 const RightMenuSub = styled(RightMenu.Sub).withConfig({
-  componentId: "sc-8z6kye-3"
+  componentId: "sc-8z6kye-2"
 })(["border-bottom:1px solid ", ";"], ({
   theme
 }) => theme.click.genericMenu.item.color.default.stroke.default);
@@ -112,7 +110,7 @@ const ContextMenuItem = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx(GenericMenuItem, { as: RightMenu.Item, $type: type, ...props, children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children }) });
+  return /* @__PURE__ */ jsx(GenericMenuItem, { as: RightMenu.Item, type, ...props, children: /* @__PURE__ */ jsx(IconWrapper, { icon, iconDir, children }) });
 };
 ContextMenuItem.displayName = "ContextMenuItem";
 ContextMenu.Item = ContextMenuItem;