@clickhouse/click-ui 0.6.2-rc2 → 0.7.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsxs","jsx","Text"],"mappings":"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"}
+{"version":3,"file":"index.cjs","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","jsxs","jsx","Text"],"mappings":";;;;;;;;;;AAKA,MAAMA,UAAAA,GAAaC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACzB,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,sBAAA,EACKA,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUC,KAAAA,CAAMC,OAAOC,OAAO,CAAA;AAAA;AAAA,mBAAA,EAElDN,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUI,MAAMC,GAAG,CAAA;AAAA,gBAAA,EACvCR,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKO,MAAM,CAAA;AAAA;;AAAA;AAAA,kBAAA,EAIrBT,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUC,KAAAA,CAAMC,OAAOK,KAAK,CAAA;AAAA;AAAA,EAAA,CAE9D,CAAA;AAEH,MAAMC,OAAAA,GAAUf,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,uFAAA,EAAA,EAAA,GAStB,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,gBAAA,EACDA,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUC,KAAAA,CAAMQ,WAAWN,OAAO,CAAA;AAAA,WAAA,EACxDN,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUC,KAAAA,CAAMS,KAAKP,OAAO,CAAA;AAAA,mBAAA,EACrCN,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUI,MAAMC,GAAG,CAAA;AAAA,aAAA,EAC1CR,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUW,KAAAA,CAAMC,CAAC,CAAA,CAAA,EAAIf,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUW,KAAAA,CAAME,CAAC,CAAA;AAAA,SAAA,EAC5EhB,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUW,MAAMG,GAAG,CAAA;AAAA;;AAAA;AAAA,kBAAA,EAI3BjB,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUC,KAAAA,CAAMQ,WAAWM,KAAK,CAAA;AAAA,aAAA,EACtDlB,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUC,KAAAA,CAAMS,KAAKK,KAAK,CAAA;AAAA;;AAAA;AAAA,kBAAA,EAItClB,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUC,KAAAA,CAAMQ,WAAWO,MAAM,CAAA;AAAA,aAAA,EACvDnB,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUC,KAAAA,CAAMS,KAAKM,MAAM,CAAA;AAAA;AAAA,EAAA,CAExD,CAAA;AAGH,MAAMC,QAAAA,GAAWxB,uBAAAA,CAAOyB,SAAI,CAAA,CAACvB,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACzB,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,cAAA,EACHA,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUmB,IAAAA,CAAKC,KAAKf,GAAG,CAAA;AAAA,aAAA,EACzCR,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUmB,IAAAA,CAAKC,KAAKf,GAAG,CAAA;AAAA,aAAA,EACxCR,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,SAAAA,CAAUC,KAAAA,CAAMkB,KAAKhB,OAAO,CAAA;AAAA,EAAA,CACzD,CAAA;AAGH,MAAMkB,cAAAA,GAAiB5B,uBAAAA,CAAO6B,MAAAA,CAAM3B,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yHAAA,CAAA,CAAA;AAU7B,MAAM2B,gBAAgBA,CAAC;AAAA,EAC5BC,KAAAA;AAAAA,EACAL,IAAAA;AAAAA,EACAM,WAAAA,GAAc,KAAA;AAAA,EACd,GAAGC;AACe,CAAA,KAAM;AACxB,EAAA,MAAM,CAACC,SAAAA,EAAWC,YAAY,CAAA,GAAIC,eAAS,IAAI,CAAA;AAE/C,EAAA,OAAOF,SAAAA,kCACJ,UAAA,EAAA,EACC,QAAA,kBAAAG,eAAA,CAAC,WACC,YAAA,EAAcL,WAAAA,EACd,GAAIC,KAAAA,EAEJ,QAAA,EAAA;AAAA,oBAAAK,cAAA,CAAC,QAAA,EAAA,EACC,IAAA,EAAMZ,IAAAA,EACN,aAAA,EAAW,IAAA,EAAA,CAAA;AAAA,oBAGbY,cAAA,CAACC,aAAMR,QAAAA,EAAAA,KAAAA,EAAM,CAAA;AAAA,IAEZC,+BACCM,cAAA,CAAC,cAAA,EAAA,EACC,MAAK,QAAA,EACL,aAAA,EAAY,8BACZ,OAAA,EAAS,MAAMH,YAAAA,CAAa,KAAK,GAEjC,QAAA,kBAAAG,cAAA,CAACb,SAAA,EAAA,EACC,MAAK,OAAA,EACL,YAAA,EAAW,SAAO,CAAA,EAEtB;AAAA,GAAA,EAEJ,GACF,CAAA,GACE,IAAA;AACN;;;;"}

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

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+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
+};
+
+exports.content = content;
+exports.customicon = customicon;
+exports.default = styles;
+exports.header = header;
+exports.headerleft = headerleft;
+exports.headerleft_disabled = headerleft_disabled;
+exports.infolink = infolink;
+exports.infolink__icon = infolink__icon;
+exports.infolink__text = infolink__text;
+exports.wrapper = wrapper;
+exports.wrapper_shadow = wrapper_shadow;
+//# sourceMappingURL=CardSecondary.module.css.cjs.map

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

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

package/dist/cjs/components/CardSecondary/index.cjs

@@ -1,89 +1,31 @@
+require("./CardSecondary.css");
 'use strict';
 
 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 CardSecondary_module = require('./CardSecondary.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
 const Title = require('../Title/index.cjs');
 const Badge = require('../Badge/index.cjs');
 const Text = require('../Text/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const Header = styledComponents.styled.div.withConfig({
-  componentId: "sc-1drx130-0"
-})(["display:flex;justify-content:space-between;align-items:center;"]);
-const HeaderLeft = styledComponents.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 = styledComponents.styled.div.withConfig({
-  componentId: "sc-1drx130-2"
-})(["display:flex;flex-direction:column;flex:1;"]);
-const CustomIcon = styledComponents.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 = styledComponents.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 = styledComponents.styled(Icon.Icon).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 = styledComponents.styled(Text.Text).withConfig({
-  componentId: "sc-1drx130-6"
-})([""]);
-const LinkIcon = styledComponents.styled(LinkIconContainer).withConfig({
-  componentId: "sc-1drx130-7"
-})([""]);
-const Wrapper = styledComponents.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 = classVarianceAuthority.cva(CardSecondary_module.default.wrapper, {
+  variants: {
+    shadow: {
+      true: CardSecondary_module.default["wrapper_shadow"]
+    }
+  }
+});
+const headerLeftVariants = classVarianceAuthority.cva(CardSecondary_module.default.headerleft, {
+  variants: {
+    disabled: {
+      true: CardSecondary_module.default["headerleft_disabled"]
+    }
+  }
+});
 const CardSecondary = ({
   title,
   icon,
@@ -97,20 +39,29 @@ const CardSecondary = ({
   infoText,
   infoIcon = "chevron-right",
   infoAssetSize = "md",
+  className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(HeaderLeft, { $disabled: disabled, children: [
-        iconUrl ? /* @__PURE__ */ jsxRuntime.jsx(CustomIcon, { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, "aria-hidden": true, size: "lg" }),
+  const isInfoLink = !disabled && !!infoUrl && infoUrl.length > 0;
+  const InfoComponent = isInfoLink ? "a" : "div";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-disabled": disabled, tabIndex: 0, ...props, className: cva.cn(wrapperVariants({
+    shadow: hasShadow
+  }), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CardSecondary_module.default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(headerLeftVariants({
+        disabled
+      })), children: [
+        iconUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: CardSecondary_module.default.customicon, src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, "aria-hidden": true, size: "lg" }),
         /* @__PURE__ */ jsxRuntime.jsx(Title.Title, { type: "h3", children: title })
       ] }),
       badgeText && /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { text: badgeText, state: disabled == true ? "disabled" : badgeState })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", children: description }) }),
-    (infoUrl || infoText) && /* @__PURE__ */ jsxRuntime.jsxs(InfoLink, { href: disabled ? void 0 : infoUrl, as: disabled || !infoUrl || infoUrl.length === 0 ? "div" : "a", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(LinkText, { children: infoText }),
-      /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, { size: infoAssetSize, name: infoIcon })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: CardSecondary_module.default.content, children: /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", children: description }) }),
+    (infoUrl || infoText) && /* @__PURE__ */ jsxRuntime.jsxs(InfoComponent, { className: CardSecondary_module.default.infolink, ...isInfoLink ? {
+      href: infoUrl
+    } : {}, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { className: CardSecondary_module.default.infolink__text, children: infoText }),
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: CardSecondary_module.default.infolink__icon, size: infoAssetSize, name: infoIcon })
     ] })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsxs","jsx","Title","Badge","undefined","length"],"mappings":"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"}
+{"version":3,"file":"index.cjs","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","jsxs","cn","header","jsx","customicon","Icon","Title","Badge","content","Text","infolink","href","infolink__text","infolink__icon"],"mappings":"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"}

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

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const content = "content__fI-1-";
+const actions = "actions__14jg2";
+const styles = {
+	content: content,
+	actions: actions
+};
+
+exports.actions = actions;
+exports.content = content;
+exports.default = styles;
+//# sourceMappingURL=ConfirmationDialog.module.css.cjs.map

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

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

package/dist/cjs/components/ConfirmationDialog/index.cjs

@@ -1,24 +1,19 @@
+require("./ConfirmationDialog.css");
 'use strict';
 
 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 ConfirmationDialog_module = require('./ConfirmationDialog.module.css.cjs');
 const Dialog = require('../Dialog/index.cjs');
 const Container = require('../Container/index.cjs');
 const Text = require('../Text/index.cjs');
 const Separator = require('../Separator/index.cjs');
 
-const ActionsWrapper = styledComponents.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 = styledComponents.styled.div.withConfig({
-  componentId: "sc-6eozxy-1"
-})(["overflow:hidden;display:flex;flex-direction:column;"]);
 const ConfirmationDialog = ({
   children,
+  className,
   disabled,
   loading,
   message,
@@ -39,10 +34,10 @@ const ConfirmationDialog = ({
     if (!open2 && onCancel) {
       onCancel();
     }
-  }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { as: Dialog.Dialog.Content, title, showClose, ...props, children: [
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog.Dialog.Content, { title, showClose, ...props, className: cva.cn(ConfirmationDialog_module.default.content, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { overflow: "auto", grow: "1", orientation: "vertical", children: children ? children : /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { children: message }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "xl" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ActionsWrapper, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ConfirmationDialog_module.default.actions, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Dialog.Dialog.Close, { label: secondaryActionLabel, "data-testid": "cancel-action-button" }),
       /* @__PURE__ */ jsxRuntime.jsx(Dialog.Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, autoFocus: open, onClick: () => {
         if (onConfirm) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","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","jsx","Dialog","Content","Container","Text","Separator"],"mappings":";;;;;;;;;;;AAQA,MAAMA,cAAAA,GAAiBC,uBAAAA,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,uBAAAA,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,uBACEC,cAAA,CAACC,aAAA,EAAA,EACC,IAAA,EACA,YAAA,EAAc,CAACR,KAAAA,KAAkB;AAC/B,IAAA,IAAI,CAACA,SAAQF,QAAAA,EAAU;AACrBA,MAAAA,QAAAA,EAAS;AAAA,IACX;AAAA,EACF,CAAA,EAEA,0CAAC,aAAA,EAAA,EACC,EAAA,EAAIU,cAAOC,OAAAA,EACX,KAAA,EACA,SAAA,EACA,GAAI1B,KAAAA,EAEJ,QAAA,EAAA;AAAA,oBAAAwB,cAAA,CAACG,mBAAA,EAAA,EACC,QAAA,EAAS,MAAA,EACT,IAAA,EAAK,GAAA,EACL,WAAA,EAAY,UAAA,EAEXhB,QAAAA,EAAAA,QAAAA,GAAWA,QAAAA,mBAAWa,cAAA,CAACI,SAAA,EAAA,EAAMd,QAAAA,EAAAA,OAAAA,EAAQ,CAAA,EACxC,CAAA;AAAA,oBACAU,cAAA,CAACK,mBAAA,EAAA,EAAU,IAAA,EAAK,IAAA,EAAI,CAAA;AAAA,oCACnB,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAL,cAAA,CAACC,cAAO,KAAA,EAAP,EACC,KAAA,EAAOL,oBAAAA,EACP,eAAY,sBAAA,EAAsB,CAAA;AAAA,sBAEpCI,cAAA,CAACC,cAAO,KAAA,EAAP,EACC,SAAS,CAAC,CAACZ,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.cjs","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","jsx","Dialog","jsxs","cn","styles","content","Container","Text","Separator","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,uBACEC,cAAA,CAACC,aAAA,EAAA,EACC,IAAA,EACA,YAAA,EAAc,CAACT,KAAAA,KAAkB;AAC/B,IAAA,IAAI,CAACA,SAAQF,QAAAA,EAAU;AACrBA,MAAAA,QAAAA,EAAS;AAAA,IACX;AAAA,EACF,CAAA,EAEA,QAAA,kBAAAY,eAAA,CAACD,aAAA,CAAO,OAAA,EAAP,EACC,KAAA,EACA,SAAA,EACA,GAAIH,KAAAA,EACJ,SAAA,EAAWK,MAAAA,CAAGC,iCAAAA,CAAOC,OAAAA,EAASnB,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,oBAAAc,cAAA,CAACM,mBAAA,EAAA,EACC,QAAA,EAAS,MAAA,EACT,IAAA,EAAK,GAAA,EACL,WAAA,EAAY,UAAA,EAEXrB,QAAAA,EAAAA,QAAAA,GAAWA,QAAAA,mBAAWe,cAAA,CAACO,SAAA,EAAA,EAAMlB,QAAAA,EAAAA,OAAAA,EAAQ,CAAA,EACxC,CAAA;AAAA,oBACAW,cAAA,CAACQ,mBAAA,EAAA,EAAU,IAAA,EAAK,IAAA,EAAI,CAAA;AAAA,oBACpBN,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWE,iCAAAA,CAAOK,OAAAA,EACrB,QAAA,EAAA;AAAA,sBAAAT,cAAA,CAACC,cAAO,KAAA,EAAP,EACC,KAAA,EAAON,oBAAAA,EACP,eAAY,sBAAA,EAAsB,CAAA;AAAA,sBAEpCK,cAAA,CAACC,cAAO,KAAA,EAAP,EACC,SAAS,CAAC,CAACb,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/cjs/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/cjs/components/ContextMenu/ContextMenu.module.css.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"right-menu-content": "right-menu-content__0-EQz",
+	"right-menu-content_show-arrow": "right-menu-content_show-arrow__-yaE-"};
+
+exports.default = styles;
+//# sourceMappingURL=ContextMenu.module.css.cjs.map

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

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

package/dist/cjs/components/ContextMenu/index.cjs

@@ -1,3 +1,4 @@
+require("./ContextMenu.css");
 'use strict';
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
@@ -7,11 +8,14 @@ const RightMenu = require('@radix-ui/react-context-menu');
 const styledComponents = require('styled-components');
 const react = require('react');
 const GenericMenu = require('../GenericMenu/index.cjs');
+const cva = require('../../lib/cva.cjs');
 const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
 const IconWrapper = require('../IconWrapper/index.cjs');
 const useInputModality = require('../../hooks/internal/useInputModality.cjs');
 const PortalContext = require('../../providers/PortalContext.cjs');
+const ContextMenu_module = require('./ContextMenu.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -60,31 +64,25 @@ const ContextMenuSubTrigger = ({
 };
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
 ContextMenu.SubTrigger = ContextMenuSubTrigger;
-const RightMenuContent = styledComponents.styled(GenericMenu.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 = classVarianceAuthority.cva(ContextMenu_module.default["right-menu-content"], {
+  variants: {
+    showArrow: {
+      true: ContextMenu_module.default["right-menu-content_show-arrow"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    showArrow: false
+  }
+});
+const _RightMenuContent = ({
+  showArrow,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuPanel, { ref, showArrow, ...props, className: cva.cn(rightMenuContentVariants({
+  showArrow
+}), className) });
+const RightMenuContent = react.forwardRef(_RightMenuContent);
 const ContextMenuContent = ({
   sub,
   children,
@@ -100,7 +98,7 @@ const ContextMenuContent = ({
   const ContentElement = sub ? RightMenu__namespace.SubContent : RightMenu__namespace.Content;
   const inputModalityProps = useInputModality.useInputModality();
   const portalContainer = PortalContext.useResolvedPortalContainer(container);
-  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RightMenuContent, { ...props, $type: "context-menu", $showArrow: showArrow, as: ContentElement, ...inputModalityProps, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RightMenuContent, { ...props, type: "context-menu", showArrow, as: ContentElement, ...inputModalityProps, children: [
     showArrow && /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.Arrow, { asChild: true, as: RightMenu__namespace.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, { className: "popover-arrow" }) }),
     children
   ] }) });
@@ -108,7 +106,7 @@ const ContextMenuContent = ({
 ContextMenuContent.displayName = "ContextMenuContent";
 ContextMenu.Content = ContextMenuContent;
 const RightMenuGroup = styledComponents.styled(RightMenu__namespace.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);
@@ -118,7 +116,7 @@ const ContextMenuGroup = (props) => {
 ContextMenuGroup.displayName = "ContextMenuGroup";
 ContextMenu.Group = ContextMenuGroup;
 const RightMenuSub = styledComponents.styled(RightMenu__namespace.Sub).withConfig({
-  componentId: "sc-8z6kye-3"
+  componentId: "sc-8z6kye-2"
 })(["border-bottom:1px solid ", ";"], ({
   theme
 }) => theme.click.genericMenu.item.color.default.stroke.default);
@@ -136,7 +134,7 @@ const ContextMenuItem = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuItem, { as: RightMenu__namespace.Item, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuItem, { as: RightMenu__namespace.Item, type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }) });
 };
 ContextMenuItem.displayName = "ContextMenuItem";
 ContextMenu.Item = ContextMenuItem;