@clickhouse/click-ui 0.9.0 → 1.0.0-rc2

package/dist/esm/components/CardPrimary/CardPrimaryTopBadge.js

@@ -5,15 +5,24 @@ import styles from './CardPrimary.module.css.js';
 import { Container } from '../Container/index.js';
 import { Badge } from '../Badge/index.js';
 
-const TopBadgeWrapper = ({
-  className,
-  ...props
-}) => /* @__PURE__ */ jsx(Container, { className: cn(styles.topbadgewrapper, className), ...props });
+const TopBadgeWrapper = ({ className, ...props }) => /* @__PURE__ */ jsx(
+  Container,
+  {
+    className: cn(styles.topbadgewrapper, className),
+    ...props
+  }
+);
 const CardPrimaryTopBadge = ({
   isSelected,
   className,
   ...props
-}) => /* @__PURE__ */ jsx(Badge, { className: cn(styles.topbadge, isSelected && styles["topbadge_selected"], className), ...props });
+}) => /* @__PURE__ */ jsx(
+  Badge,
+  {
+    className: cn(styles.topbadge, isSelected && styles["topbadge_selected"], className),
+    ...props
+  }
+);
 
 export { CardPrimaryTopBadge, TopBadgeWrapper };
 //# sourceMappingURL=CardPrimaryTopBadge.js.map

package/dist/esm/components/CardPrimary/CardPrimaryTopBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardPrimaryTopBadge.js","sources":["../../../../src/components/CardPrimary/CardPrimaryTopBadge.tsx"],"sourcesContent":["import { Badge, BadgeProps } from '@/components/Badge';\nimport { Container, ContainerProps } from '@/components/Container';\nimport { cn } from '@/lib/cva';\nimport { HTMLAttributes } from 'react';\nimport styles from './CardPrimary.module.css';\n\ntype TopBadgeWrapperProps = ContainerProps<'div'> & HTMLAttributes<HTMLDivElement>;\n\nexport const TopBadgeWrapper = ({ className, ...props }: TopBadgeWrapperProps) => (\n  <Container\n    className={cn(styles.topbadgewrapper, className)}\n    {...props}\n  />\n);\n\ntype CardPrimaryTopBadgeProps = BadgeProps & { isSelected?: boolean };\n\nexport const CardPrimaryTopBadge = ({\n  isSelected,\n  className,\n  ...props\n}: CardPrimaryTopBadgeProps) => (\n  <Badge\n    className={cn(styles.topbadge, isSelected && styles['topbadge_selected'], className)}\n    {...props}\n  />\n);\n"],"names":["TopBadgeWrapper","className","props","cn","styles","topbadgewrapper","CardPrimaryTopBadge","isSelected","topbadge"],"mappings":";;;;;;AAQO,MAAMA,kBAAkBA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAAW,GAAGC;AAA4B,CAAA,qBAC1E,GAAA,CAAC,aACC,SAAA,EAAWC,EAAAA,CAAGC,OAAOC,eAAAA,EAAiBJ,SAAS,CAAA,EAC/C,GAAIC,KAAAA,EAAM;AAMP,MAAMI,sBAAsBA,CAAC;AAAA,EAClCC,UAAAA;AAAAA,EACAN,SAAAA;AAAAA,EACA,GAAGC;AACqB,CAAA,qBACxB,GAAA,CAAC,KAAA,EAAA,EACC,SAAA,EAAWC,EAAAA,CAAGC,MAAAA,CAAOI,QAAAA,EAAUD,UAAAA,IAAcH,MAAAA,CAAO,mBAAmB,CAAA,EAAGH,SAAS,CAAA,EACnF,GAAIC,KAAAA,EAAM;;;;"}
+{"version":3,"file":"CardPrimaryTopBadge.js","sources":["../../../../src/components/CardPrimary/CardPrimaryTopBadge.tsx"],"sourcesContent":["import { Badge, BadgeProps } from '@/components/Badge';\nimport { Container, ContainerProps } from '@/components/Container';\nimport { cn } from '@/lib/cva';\nimport { HTMLAttributes } from 'react';\nimport styles from './CardPrimary.module.css';\n\ntype TopBadgeWrapperProps = ContainerProps<'div'> & HTMLAttributes<HTMLDivElement>;\n\nexport const TopBadgeWrapper = ({ className, ...props }: TopBadgeWrapperProps) => (\n  <Container\n    className={cn(styles.topbadgewrapper, className)}\n    {...props}\n  />\n);\n\ntype CardPrimaryTopBadgeProps = BadgeProps & { isSelected?: boolean };\n\nexport const CardPrimaryTopBadge = ({\n  isSelected,\n  className,\n  ...props\n}: CardPrimaryTopBadgeProps) => (\n  <Badge\n    className={cn(styles.topbadge, isSelected && styles['topbadge_selected'], className)}\n    {...props}\n  />\n);\n"],"names":[],"mappings":";;;;;;AAQO,MAAM,kBAAkB,CAAC,EAAE,SAAA,EAAW,GAAG,OAAM,qBACpD,GAAA;AAAA,EAAC,SAAA;AAAA,EAAA;AAAA,IACC,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,eAAA,EAAiB,SAAS,CAAA;AAAA,IAC9C,GAAG;AAAA;AACN;AAKK,MAAM,sBAAsB,CAAC;AAAA,EAClC,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,qBACE,GAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,SAAA,EAAW,GAAG,MAAA,CAAO,QAAA,EAAU,cAAc,MAAA,CAAO,mBAAmB,GAAG,SAAS,CAAA;AAAA,IAClF,GAAG;AAAA;AACN;;;;"}

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

@@ -102,30 +102,57 @@ const Card = ({
     }
   };
   const Component = !!infoUrl || typeof onButtonClick === "function" ? Button : "div";
-  return /* @__PURE__ */ jsxs("div", { "aria-disabled": disabled, tabIndex: 0, ...props, className: cn(wrapperVariants({
-    size,
-    align: alignContent,
-    hasShadow,
-    isSelected
-  }), className), children: [
-    (icon || title) && /* @__PURE__ */ jsxs("div", { className: cn(headerVariants({
-      size,
-      align: alignContent,
-      disabled
-    })), children: [
-      iconUrl ? /* @__PURE__ */ jsx("img", { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsx(SvgImage, { name: icon, "aria-hidden": true }),
-      title && /* @__PURE__ */ jsx(Title, { type: "h3", children: title })
-    ] }),
-    (description || children) && /* @__PURE__ */ jsxs("div", { className: cn(contentVariants({
-      size,
-      align: alignContent
-    })), children: [
-      description && /* @__PURE__ */ jsx(Text, { color: "muted", align: convertCardAlignToTextAlign(alignContent ?? "start"), children: description }),
-      children
-    ] }),
-    size == "sm" && /* @__PURE__ */ jsx(Spacer, { size: "sm" }),
-    infoText && /* @__PURE__ */ jsx(Component, { onClick: handleClick, disabled, children: infoText })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-disabled": disabled,
+      tabIndex: 0,
+      ...props,
+      className: cn(
+        wrapperVariants({ size, align: alignContent, hasShadow, isSelected }),
+        className
+      ),
+      children: [
+        (icon || title) && /* @__PURE__ */ jsxs("div", { className: cn(headerVariants({ size, align: alignContent, disabled })), children: [
+          iconUrl ? /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: iconUrl,
+              alt: "card icon",
+              "aria-hidden": true
+            }
+          ) : icon && /* @__PURE__ */ jsx(
+            SvgImage,
+            {
+              name: icon,
+              "aria-hidden": true
+            }
+          ),
+          title && /* @__PURE__ */ jsx(Title, { type: "h3", children: title })
+        ] }),
+        (description || children) && /* @__PURE__ */ jsxs("div", { className: cn(contentVariants({ size, align: alignContent })), children: [
+          description && /* @__PURE__ */ jsx(
+            Text,
+            {
+              color: "muted",
+              align: convertCardAlignToTextAlign(alignContent ?? "start"),
+              children: description
+            }
+          ),
+          children
+        ] }),
+        size == "sm" && /* @__PURE__ */ jsx(Spacer, { size: "sm" }),
+        infoText && /* @__PURE__ */ jsx(
+          Component,
+          {
+            onClick: handleClick,
+            disabled,
+            children: infoText
+          }
+        )
+      ]
+    }
+  );
 };
 const CardPrimary = withTopBadge(Card);
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/CardPrimary/CardPrimary.tsx"],"sourcesContent":["import { Title } from '@/components/Title';\nimport { Text, type TextAlignment } from '@/components/Text';\nimport { withTopBadge } from './withTopBadge';\nimport { Button } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { cn, cva } from '@/lib/cva';\nimport { CardPrimaryProps } from './CardPrimary.types';\nimport styles from './CardPrimary.module.css';\n\ntype ContentAlignment = 'start' | 'center' | 'end';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    size: {\n      sm: styles['wrapper_size_sm'],\n      md: styles['wrapper_size_md'],\n    },\n    align: {\n      start: styles['wrapper_align_start'],\n      center: styles['wrapper_align_center'],\n      end: styles['wrapper_align_end'],\n    },\n    hasShadow: {\n      true: styles['wrapper_shadow'],\n    },\n    isSelected: {\n      true: styles['wrapper_selected'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    align: 'center',\n  },\n});\n\nconst headerVariants = cva(styles.header, {\n  variants: {\n    size: {\n      sm: styles['header_size_sm'],\n      md: styles['header_size_md'],\n    },\n    align: {\n      start: styles['header_align_start'],\n      center: styles['header_align_center'],\n      end: styles['header_align_end'],\n    },\n    disabled: {\n      true: styles['header_disabled'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    align: 'center',\n  },\n});\n\nconst contentVariants = cva(styles.content, {\n  variants: {\n    size: {\n      sm: styles['content_size_sm'],\n      md: styles['content_size_md'],\n    },\n    align: {\n      start: styles['content_align_start'],\n      center: styles['content_align_center'],\n      end: styles['content_align_end'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    align: 'center',\n  },\n});\n\nconst convertCardAlignToTextAlign = (align: ContentAlignment): TextAlignment => {\n  if (align === 'center') {\n    return 'center';\n  }\n  return align === 'start' ? 'left' : 'right';\n};\n\nconst Card = ({\n  alignContent,\n  title,\n  icon,\n  iconUrl,\n  hasShadow = false,\n  description,\n  infoUrl,\n  infoText,\n  size,\n  disabled = false,\n  onButtonClick,\n  isSelected,\n  children,\n  className,\n  ...props\n}: CardPrimaryProps) => {\n  const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (typeof onButtonClick === 'function') {\n      onButtonClick(e);\n    }\n    if (infoUrl && infoUrl.length > 0) {\n      window.open(infoUrl, '_blank');\n    }\n  };\n\n  const Component = !!infoUrl || typeof onButtonClick === 'function' ? Button : 'div';\n  return (\n    <div\n      aria-disabled={disabled}\n      tabIndex={0}\n      {...props}\n      className={cn(\n        wrapperVariants({ size, align: alignContent, hasShadow, isSelected }),\n        className\n      )}\n    >\n      {(icon || title) && (\n        <div className={cn(headerVariants({ size, align: alignContent, disabled }))}>\n          {iconUrl ? (\n            <img\n              src={iconUrl}\n              alt=\"card icon\"\n              aria-hidden\n            />\n          ) : (\n            icon && (\n              <Icon\n                name={icon}\n                aria-hidden\n              />\n            )\n          )}\n          {title && <Title type=\"h3\">{title}</Title>}\n        </div>\n      )}\n\n      {(description || children) && (\n        <div className={cn(contentVariants({ size, align: alignContent }))}>\n          {description && (\n            <Text\n              color=\"muted\"\n              align={convertCardAlignToTextAlign(alignContent ?? 'start')}\n            >\n              {description}\n            </Text>\n          )}\n          {children}\n        </div>\n      )}\n\n      {size == 'sm' && <Spacer size=\"sm\" />}\n\n      {infoText && (\n        <Component\n          onClick={handleClick}\n          disabled={disabled}\n        >\n          {infoText}\n        </Component>\n      )}\n    </div>\n  );\n};\n\nexport const CardPrimary = withTopBadge<CardPrimaryProps>(Card);\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","size","sm","md","align","start","center","end","hasShadow","true","isSelected","defaultVariants","headerVariants","header","disabled","contentVariants","content","convertCardAlignToTextAlign","Card","alignContent","title","icon","iconUrl","description","infoUrl","infoText","onButtonClick","children","className","props","handleClick","e","length","window","open","Component","Button","cn","Icon","CardPrimary","withTopBadge"],"mappings":";;;;;;;;;;;AAYA,MAAMA,eAAAA,GAAkBC,GAAAA,CAAIC,MAAAA,CAAOC,OAAAA,EAAS;AAAA,EAC1CC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,iBAAiB,CAAA;AAAA,MAC5BK,EAAAA,EAAIL,OAAO,iBAAiB;AAAA,KAC9B;AAAA,IACAM,KAAAA,EAAO;AAAA,MACLC,KAAAA,EAAOP,OAAO,qBAAqB,CAAA;AAAA,MACnCQ,MAAAA,EAAQR,OAAO,sBAAsB,CAAA;AAAA,MACrCS,GAAAA,EAAKT,OAAO,mBAAmB;AAAA,KACjC;AAAA,IACAU,SAAAA,EAAW;AAAA,MACTC,IAAAA,EAAMX,OAAO,gBAAgB;AAAA,KAC/B;AAAA,IACAY,UAAAA,EAAY;AAAA,MACVD,IAAAA,EAAMX,OAAO,kBAAkB;AAAA;AACjC,GACF;AAAA,EACAa,eAAAA,EAAiB;AAAA,IACfV,IAAAA,EAAM,IAAA;AAAA,IACNG,KAAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAED,MAAMQ,cAAAA,GAAiBf,GAAAA,CAAIC,MAAAA,CAAOe,MAAAA,EAAQ;AAAA,EACxCb,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,gBAAgB,CAAA;AAAA,MAC3BK,EAAAA,EAAIL,OAAO,gBAAgB;AAAA,KAC7B;AAAA,IACAM,KAAAA,EAAO;AAAA,MACLC,KAAAA,EAAOP,OAAO,oBAAoB,CAAA;AAAA,MAClCQ,MAAAA,EAAQR,OAAO,qBAAqB,CAAA;AAAA,MACpCS,GAAAA,EAAKT,OAAO,kBAAkB;AAAA,KAChC;AAAA,IACAgB,QAAAA,EAAU;AAAA,MACRL,IAAAA,EAAMX,OAAO,iBAAiB;AAAA;AAChC,GACF;AAAA,EACAa,eAAAA,EAAiB;AAAA,IACfV,IAAAA,EAAM,IAAA;AAAA,IACNG,KAAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAED,MAAMW,eAAAA,GAAkBlB,GAAAA,CAAIC,MAAAA,CAAOkB,OAAAA,EAAS;AAAA,EAC1ChB,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,EAAAA,EAAIJ,OAAO,iBAAiB,CAAA;AAAA,MAC5BK,EAAAA,EAAIL,OAAO,iBAAiB;AAAA,KAC9B;AAAA,IACAM,KAAAA,EAAO;AAAA,MACLC,KAAAA,EAAOP,OAAO,qBAAqB,CAAA;AAAA,MACnCQ,MAAAA,EAAQR,OAAO,sBAAsB,CAAA;AAAA,MACrCS,GAAAA,EAAKT,OAAO,mBAAmB;AAAA;AACjC,GACF;AAAA,EACAa,eAAAA,EAAiB;AAAA,IACfV,IAAAA,EAAM,IAAA;AAAA,IACNG,KAAAA,EAAO;AAAA;AAEX,CAAC,CAAA;AAED,MAAMa,2BAAAA,GAA8BA,CAACb,KAAAA,KAA2C;AAC9E,EAAA,IAAIA,UAAU,QAAA,EAAU;AACtB,IAAA,OAAO,QAAA;AAAA,EACT;AACA,EAAA,OAAOA,KAAAA,KAAU,UAAU,MAAA,GAAS,OAAA;AACtC,CAAA;AAEA,MAAMc,OAAOA,CAAC;AAAA,EACZC,YAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAd,SAAAA,GAAY,KAAA;AAAA,EACZe,WAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAxB,IAAAA;AAAAA,EACAa,QAAAA,GAAW,KAAA;AAAA,EACXY,aAAAA;AAAAA,EACAhB,UAAAA;AAAAA,EACAiB,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACa,CAAA,KAAM;AACtB,EAAA,MAAMC,WAAAA,GAAcA,CAACC,CAAAA,KAAqC;AACxD,IAAA,IAAI,OAAOL,kBAAkB,UAAA,EAAY;AACvCA,MAAAA,aAAAA,CAAcK,CAAC,CAAA;AAAA,IACjB;AACA,IAAA,IAAIP,OAAAA,IAAWA,OAAAA,CAAQQ,MAAAA,GAAS,CAAA,EAAG;AACjCC,MAAAA,MAAAA,CAAOC,IAAAA,CAAKV,SAAS,QAAQ,CAAA;AAAA,IAC/B;AAAA,EACF,CAAA;AAEA,EAAA,MAAMW,YAAY,CAAC,CAACX,WAAW,OAAOE,aAAAA,KAAkB,aAAaU,MAAAA,GAAS,KAAA;AAC9E,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EACC,eAAA,EAAetB,QAAAA,EACf,QAAA,EAAU,GACV,GAAIe,KAAAA,EACJ,SAAA,EAAWQ,EAAAA,CACTzC,eAAAA,CAAgB;AAAA,IAAEK,IAAAA;AAAAA,IAAMG,KAAAA,EAAOe,YAAAA;AAAAA,IAAcX,SAAAA;AAAAA,IAAWE;AAAAA,GAAY,CAAA,EACpEkB,SACF,CAAA,EAEEP,QAAAA,EAAAA;AAAAA,IAAAA,CAAAA,IAAAA,IAAQD,KAAAA,qBACR,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWiB,GAAGzB,cAAAA,CAAe;AAAA,MAAEX,IAAAA;AAAAA,MAAMG,KAAAA,EAAOe,YAAAA;AAAAA,MAAcL;AAAAA,KAAU,CAAC,CAAA,EACvEQ,QAAAA,EAAAA;AAAAA,MAAAA,OAAAA,mBACC,GAAA,CAAC,KAAA,EAAA,EACC,GAAA,EAAKA,OAAAA,EACL,KAAI,WAAA,EACJ,aAAA,EAAW,IAAA,EAAA,CAAA,GAGbD,wBACE,GAAA,CAACiB,QAAA,EAAA,EACC,IAAA,EAAMjB,IAAAA,EACN,eAAW,IAAA,EAAA,CAAA;AAAA,MAIhBD,KAAAA,oBAAS,GAAA,CAAC,KAAA,EAAA,EAAM,IAAA,EAAK,MAAMA,QAAAA,EAAAA,KAAAA,EAAM;AAAA,KAAA,EACpC,CAAA;AAAA,IAAA,CAGAG,eAAeI,QAAAA,qBACf,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWU,GAAGtB,eAAAA,CAAgB;AAAA,MAAEd,IAAAA;AAAAA,MAAMG,KAAAA,EAAOe;AAAAA,KAAc,CAAC,CAAA,EAC9DI,QAAAA,EAAAA;AAAAA,MAAAA,WAAAA,oBACC,GAAA,CAAC,QACC,KAAA,EAAM,OAAA,EACN,OAAON,2BAAAA,CAA4BE,YAAAA,IAAgB,OAAO,CAAA,EAEzDI,QAAAA,EAAAA,WAAAA,EACH,CAAA;AAAA,MAEDI;AAAAA,KAAAA,EACH,CAAA;AAAA,IAGD1B,IAAAA,IAAQ,IAAA,oBAAQ,GAAA,CAAC,MAAA,EAAA,EAAO,MAAK,IAAA,EAAI,CAAA;AAAA,IAEjCwB,4BACC,GAAA,CAAC,SAAA,EAAA,EACC,OAAA,EAASK,WAAAA,EACT,UAECL,QAAAA,EAAAA,QAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ,CAAA;AAEO,MAAMc,WAAAA,GAAcC,aAA+BtB,IAAI;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/CardPrimary/CardPrimary.tsx"],"sourcesContent":["import { Title } from '@/components/Title';\nimport { Text, type TextAlignment } from '@/components/Text';\nimport { withTopBadge } from './withTopBadge';\nimport { Button } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { cn, cva } from '@/lib/cva';\nimport { CardPrimaryProps } from './CardPrimary.types';\nimport styles from './CardPrimary.module.css';\n\ntype ContentAlignment = 'start' | 'center' | 'end';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    size: {\n      sm: styles['wrapper_size_sm'],\n      md: styles['wrapper_size_md'],\n    },\n    align: {\n      start: styles['wrapper_align_start'],\n      center: styles['wrapper_align_center'],\n      end: styles['wrapper_align_end'],\n    },\n    hasShadow: {\n      true: styles['wrapper_shadow'],\n    },\n    isSelected: {\n      true: styles['wrapper_selected'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    align: 'center',\n  },\n});\n\nconst headerVariants = cva(styles.header, {\n  variants: {\n    size: {\n      sm: styles['header_size_sm'],\n      md: styles['header_size_md'],\n    },\n    align: {\n      start: styles['header_align_start'],\n      center: styles['header_align_center'],\n      end: styles['header_align_end'],\n    },\n    disabled: {\n      true: styles['header_disabled'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    align: 'center',\n  },\n});\n\nconst contentVariants = cva(styles.content, {\n  variants: {\n    size: {\n      sm: styles['content_size_sm'],\n      md: styles['content_size_md'],\n    },\n    align: {\n      start: styles['content_align_start'],\n      center: styles['content_align_center'],\n      end: styles['content_align_end'],\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    align: 'center',\n  },\n});\n\nconst convertCardAlignToTextAlign = (align: ContentAlignment): TextAlignment => {\n  if (align === 'center') {\n    return 'center';\n  }\n  return align === 'start' ? 'left' : 'right';\n};\n\nconst Card = ({\n  alignContent,\n  title,\n  icon,\n  iconUrl,\n  hasShadow = false,\n  description,\n  infoUrl,\n  infoText,\n  size,\n  disabled = false,\n  onButtonClick,\n  isSelected,\n  children,\n  className,\n  ...props\n}: CardPrimaryProps) => {\n  const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (typeof onButtonClick === 'function') {\n      onButtonClick(e);\n    }\n    if (infoUrl && infoUrl.length > 0) {\n      window.open(infoUrl, '_blank');\n    }\n  };\n\n  const Component = !!infoUrl || typeof onButtonClick === 'function' ? Button : 'div';\n  return (\n    <div\n      aria-disabled={disabled}\n      tabIndex={0}\n      {...props}\n      className={cn(\n        wrapperVariants({ size, align: alignContent, hasShadow, isSelected }),\n        className\n      )}\n    >\n      {(icon || title) && (\n        <div className={cn(headerVariants({ size, align: alignContent, disabled }))}>\n          {iconUrl ? (\n            <img\n              src={iconUrl}\n              alt=\"card icon\"\n              aria-hidden\n            />\n          ) : (\n            icon && (\n              <Icon\n                name={icon}\n                aria-hidden\n              />\n            )\n          )}\n          {title && <Title type=\"h3\">{title}</Title>}\n        </div>\n      )}\n\n      {(description || children) && (\n        <div className={cn(contentVariants({ size, align: alignContent }))}>\n          {description && (\n            <Text\n              color=\"muted\"\n              align={convertCardAlignToTextAlign(alignContent ?? 'start')}\n            >\n              {description}\n            </Text>\n          )}\n          {children}\n        </div>\n      )}\n\n      {size == 'sm' && <Spacer size=\"sm\" />}\n\n      {infoText && (\n        <Component\n          onClick={handleClick}\n          disabled={disabled}\n        >\n          {infoText}\n        </Component>\n      )}\n    </div>\n  );\n};\n\nexport const CardPrimary = withTopBadge<CardPrimaryProps>(Card);\n"],"names":["Icon"],"mappings":"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"}

package/dist/esm/components/CardPrimary/withTopBadge.js

@@ -1,14 +1,25 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { TopBadgeWrapper, CardPrimaryTopBadge } from './CardPrimaryTopBadge.js';
 
-const withTopBadge = (Component) => ({
-  topBadgeText,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs(TopBadgeWrapper, { alignItems: "stretch", fillWidth: true, children: [
-    /* @__PURE__ */ jsx(Component, { ...props }),
-    topBadgeText && /* @__PURE__ */ jsx(CardPrimaryTopBadge, { "data-testid": "card-top-badge", text: topBadgeText, isSelected: props.isSelected || false })
-  ] });
+const withTopBadge = (Component) => ({ topBadgeText, ...props }) => {
+  return /* @__PURE__ */ jsxs(
+    TopBadgeWrapper,
+    {
+      alignItems: "stretch",
+      fillWidth: true,
+      children: [
+        /* @__PURE__ */ jsx(Component, { ...props }),
+        topBadgeText && /* @__PURE__ */ jsx(
+          CardPrimaryTopBadge,
+          {
+            "data-testid": "card-top-badge",
+            text: topBadgeText,
+            isSelected: props.isSelected || false
+          }
+        )
+      ]
+    }
+  );
 };
 
 export { withTopBadge };

package/dist/esm/components/CardPrimary/withTopBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"withTopBadge.js","sources":["../../../../src/components/CardPrimary/withTopBadge.tsx"],"sourcesContent":["import { CardPrimaryTopBadge, TopBadgeWrapper } from './CardPrimaryTopBadge';\nimport { ComponentType, FC } from 'react';\n\nexport interface WithTopBadgeProps {\n  topBadgeText?: string;\n  isSelected?: boolean;\n}\n\nexport const withTopBadge =\n  <P extends object>(Component: ComponentType<P>): FC<P & WithTopBadgeProps> =>\n  ({ topBadgeText, ...props }: P & WithTopBadgeProps) => {\n    return (\n      <TopBadgeWrapper\n        alignItems=\"stretch\"\n        fillWidth\n      >\n        <Component {...(props as P)} />\n        {topBadgeText && (\n          <CardPrimaryTopBadge\n            data-testid=\"card-top-badge\"\n            text={topBadgeText}\n            isSelected={props.isSelected || false}\n          />\n        )}\n      </TopBadgeWrapper>\n    );\n  };\n"],"names":["withTopBadge","Component","topBadgeText","props","isSelected"],"mappings":";;;AAQO,MAAMA,YAAAA,GACX,CAAmBC,SAAAA,KACnB,CAAC;AAAA,EAAEC,YAAAA;AAAAA,EAAc,GAAGC;AAA6B,CAAA,KAAM;AACrD,EAAA,uBACE,IAAA,CAAC,eAAA,EAAA,EACC,UAAA,EAAW,SAAA,EACX,WAAS,IAAA,EAET,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAA,EAAA,KAAeA,KAAAA,EAAY,CAAA;AAAA,IAC3BD,YAAAA,oBACC,GAAA,CAAC,mBAAA,EAAA,EACC,aAAA,EAAY,gBAAA,EACZ,MAAMA,YAAAA,EACN,UAAA,EAAYC,KAAAA,CAAMC,UAAAA,IAAc,KAAA,EAAM;AAAA,GAAA,EAG5C,CAAA;AAEJ;;;;"}
+{"version":3,"file":"withTopBadge.js","sources":["../../../../src/components/CardPrimary/withTopBadge.tsx"],"sourcesContent":["import { CardPrimaryTopBadge, TopBadgeWrapper } from './CardPrimaryTopBadge';\nimport { ComponentType, FC } from 'react';\n\nexport interface WithTopBadgeProps {\n  topBadgeText?: string;\n  isSelected?: boolean;\n}\n\nexport const withTopBadge =\n  <P extends object>(Component: ComponentType<P>): FC<P & WithTopBadgeProps> =>\n  ({ topBadgeText, ...props }: P & WithTopBadgeProps) => {\n    return (\n      <TopBadgeWrapper\n        alignItems=\"stretch\"\n        fillWidth\n      >\n        <Component {...(props as P)} />\n        {topBadgeText && (\n          <CardPrimaryTopBadge\n            data-testid=\"card-top-badge\"\n            text={topBadgeText}\n            isSelected={props.isSelected || false}\n          />\n        )}\n      </TopBadgeWrapper>\n    );\n  };\n"],"names":[],"mappings":";;;AAQO,MAAM,YAAA,GACX,CAAmB,SAAA,KACnB,CAAC,EAAE,YAAA,EAAc,GAAG,OAAM,KAA6B;AACrD,EAAA,uBACE,IAAA;AAAA,IAAC,eAAA;AAAA,IAAA;AAAA,MACC,UAAA,EAAW,SAAA;AAAA,MACX,SAAA,EAAS,IAAA;AAAA,MAET,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,SAAA,EAAA,EAAW,GAAI,KAAA,EAAa,CAAA;AAAA,QAC5B,YAAA,oBACC,GAAA;AAAA,UAAC,mBAAA;AAAA,UAAA;AAAA,YACC,aAAA,EAAY,gBAAA;AAAA,YACZ,IAAA,EAAM,YAAA;AAAA,YACN,UAAA,EAAY,MAAM,UAAA,IAAc;AAAA;AAAA;AAClC;AAAA;AAAA,GAEJ;AAEJ;;;;"}

package/dist/esm/components/CardPromotion/CardPromotion.css

@@ -1,4 +1,4 @@
-.background__q--1v {
+@layer clickui {.background__q--1v {
   display: flex;
   padding: 1px;
   border-radius: var(--click-card-promotion-radii-all);
@@ -50,3 +50,4 @@
   color: inherit;
   cursor: pointer;
 }
+}

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

@@ -14,11 +14,40 @@ const CardPromotion = ({
   ...props
 }) => {
   const [isVisible, setIsVisible] = useState(true);
-  return isVisible ? /* @__PURE__ */ jsx("div", { className: styles.background, children: /* @__PURE__ */ jsxs("div", { ...props, className: cn(styles.wrapper, className), children: [
-    /* @__PURE__ */ jsx(SvgImage, { name: icon, "aria-hidden": true, className: styles.cardicon }),
-    /* @__PURE__ */ jsx(Text, { children: label }),
-    dismissible && /* @__PURE__ */ jsx("button", { type: "button", "data-testid": "click-alert-dismiss-button", onClick: () => setIsVisible(false), className: styles.dismisswrapper, children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", "aria-label": "close" }) })
-  ] }) }) : null;
+  return isVisible ? /* @__PURE__ */ jsx("div", { className: styles.background, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      className: cn(styles.wrapper, className),
+      children: [
+        /* @__PURE__ */ jsx(
+          SvgImage,
+          {
+            name: icon,
+            "aria-hidden": true,
+            className: styles.cardicon
+          }
+        ),
+        /* @__PURE__ */ jsx(Text, { children: label }),
+        dismissible && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "data-testid": "click-alert-dismiss-button",
+            onClick: () => setIsVisible(false),
+            className: styles.dismisswrapper,
+            children: /* @__PURE__ */ jsx(
+              SvgImage,
+              {
+                name: "cross",
+                "aria-label": "close"
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) }) : null;
 };
 
 export { CardPromotion };

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 { Icon } from '@/components/Icon';\nimport { Text } from '@/components/Text';\nimport { cn } from '@/lib/cva';\nimport { CardPromotionProps } from './CardPromotion.types';\nimport styles from './CardPromotion.module.css';\n\nexport const CardPromotion = ({\n  label,\n  icon,\n  dismissible = false,\n  className,\n  ...props\n}: CardPromotionProps) => {\n  const [isVisible, setIsVisible] = useState(true);\n\n  return isVisible ? (\n    <div className={styles.background}>\n      <div\n        {...props}\n        className={cn(styles.wrapper, className)}\n      >\n        <Icon\n          name={icon}\n          aria-hidden\n          className={styles.cardicon}\n        />\n\n        <Text>{label}</Text>\n\n        {dismissible && (\n          <button\n            type=\"button\"\n            data-testid=\"click-alert-dismiss-button\"\n            onClick={() => setIsVisible(false)}\n            className={styles.dismisswrapper}\n          >\n            <Icon\n              name=\"cross\"\n              aria-label=\"close\"\n            />\n          </button>\n        )}\n      </div>\n    </div>\n  ) : null;\n};\n"],"names":["CardPromotion","label","icon","dismissible","className","props","isVisible","setIsVisible","useState","styles","background","cn","wrapper","Icon","cardicon","dismisswrapper"],"mappings":";;;;;;;AAOO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC,KAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,WAAAA,GAAc,KAAA;AAAA,EACdC,SAAAA;AAAAA,EACA,GAAGC;AACe,CAAA,KAAM;AACxB,EAAA,MAAM,CAACC,SAAAA,EAAWC,YAAY,CAAA,GAAIC,SAAS,IAAI,CAAA;AAE/C,EAAA,OAAOF,SAAAA,mBACL,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWG,OAAOC,UAAAA,EACrB,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,KACKL,OACJ,SAAA,EAAWM,EAAAA,CAAGF,MAAAA,CAAOG,OAAAA,EAASR,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAACS,YACC,IAAA,EAAMX,IAAAA,EACN,eAAW,IAAA,EACX,SAAA,EAAWO,OAAOK,QAAAA,EAAS,CAAA;AAAA,oBAG7B,GAAA,CAAC,QAAMb,QAAAA,EAAAA,KAAAA,EAAM,CAAA;AAAA,IAEZE,WAAAA,wBACE,QAAA,EAAA,EACC,IAAA,EAAK,UACL,aAAA,EAAY,4BAAA,EACZ,SAAS,MAAMI,YAAAA,CAAa,KAAK,CAAA,EACjC,SAAA,EAAWE,OAAOM,cAAAA,EAElB,QAAA,kBAAA,GAAA,CAACF,YACC,IAAA,EAAK,OAAA,EACL,YAAA,EAAW,OAAA,EAAO,CAAA,EAEtB;AAAA,GAAA,EAEJ,GACF,CAAA,GACE,IAAA;AACN;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/CardPromotion/CardPromotion.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { Text } from '@/components/Text';\nimport { cn } from '@/lib/cva';\nimport { CardPromotionProps } from './CardPromotion.types';\nimport styles from './CardPromotion.module.css';\n\nexport const CardPromotion = ({\n  label,\n  icon,\n  dismissible = false,\n  className,\n  ...props\n}: CardPromotionProps) => {\n  const [isVisible, setIsVisible] = useState(true);\n\n  return isVisible ? (\n    <div className={styles.background}>\n      <div\n        {...props}\n        className={cn(styles.wrapper, className)}\n      >\n        <Icon\n          name={icon}\n          aria-hidden\n          className={styles.cardicon}\n        />\n\n        <Text>{label}</Text>\n\n        {dismissible && (\n          <button\n            type=\"button\"\n            data-testid=\"click-alert-dismiss-button\"\n            onClick={() => setIsVisible(false)}\n            className={styles.dismisswrapper}\n          >\n            <Icon\n              name=\"cross\"\n              aria-label=\"close\"\n            />\n          </button>\n        )}\n      </div>\n    </div>\n  ) : null;\n};\n"],"names":["Icon"],"mappings":";;;;;;;AAOO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,KAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA,GAAc,KAAA;AAAA,EACd,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAA0B;AACxB,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,IAAI,CAAA;AAE/C,EAAA,OAAO,SAAA,mBACL,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAO,UAAA,EACrB,QAAA,kBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,OAAA,EAAS,SAAS,CAAA;AAAA,MAEvC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAACA,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,IAAA;AAAA,YACN,aAAA,EAAW,IAAA;AAAA,YACX,WAAW,MAAA,CAAO;AAAA;AAAA,SACpB;AAAA,wBAEA,GAAA,CAAC,QAAM,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,QAEZ,WAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,aAAA,EAAY,4BAAA;AAAA,YACZ,OAAA,EAAS,MAAM,YAAA,CAAa,KAAK,CAAA;AAAA,YACjC,WAAW,MAAA,CAAO,cAAA;AAAA,YAElB,QAAA,kBAAA,GAAA;AAAA,cAACA,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAK,OAAA;AAAA,gBACL,YAAA,EAAW;AAAA;AAAA;AACb;AAAA;AACF;AAAA;AAAA,KAGN,CAAA,GACE,IAAA;AACN;;;;"}

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

@@ -1,4 +1,4 @@
-.wrapper__x6K6U {
+@layer clickui {.wrapper__x6K6U {
   display: flex;
   min-width: 320px;
   max-width: 420px;
@@ -97,3 +97,4 @@
 /* stylelint-disable-next-line block-no-empty -- base element required by BEM */
 .infolink__text__XbiBm {
 }
+}

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

@@ -40,26 +40,64 @@ const CardSecondary = ({
 }) => {
   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("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 })
-    ] })
-  ] });
+  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("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
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
 };
 
 export { CardSecondary };

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

@@ -1 +1 @@
-{"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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"}
+{"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":["Icon"],"mappings":"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"}

package/dist/esm/components/Checkbox/Checkbox.css

@@ -1,4 +1,4 @@
-/* The wrapper class is applied alongside FormRoot's styled-components class.
+@layer clickui {/* The wrapper class is applied alongside FormRoot's styled-components class.
    The .wrapper.wrapper double-class boost matches the specificity behavior of
    the original `styled(FormRoot)` chain so these overrides reliably beat
    FormRoot's `align-items: flex-start` regardless of stylesheet insertion
@@ -80,6 +80,14 @@
   --checkbox-stroke-active: var(--click-checkbox-color-variations-var6-stroke-active);
 }
 
+.checkinput_variant_var7__5tG25 {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var7-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var7-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var7-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var7-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var7-stroke-active);
+}
+
 .checkinput__oErG6:hover {
   background: var(--checkbox-bg-hover);
 }
@@ -114,3 +122,4 @@
 .checkicon__wvW5M[data-disabled] {
   color: var(--click-checkbox-color-check-disabled);
 }
+}

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

@@ -7,6 +7,7 @@ const checkinput_variant_var3 = "checkinput_variant_var3__8KFg4";
 const checkinput_variant_var4 = "checkinput_variant_var4__-C02i";
 const checkinput_variant_var5 = "checkinput_variant_var5__DuiuL";
 const checkinput_variant_var6 = "checkinput_variant_var6__DqZFO";
+const checkinput_variant_var7 = "checkinput_variant_var7__5tG25";
 const checkicon = "checkicon__wvW5M";
 const styles = {
 	wrapper: wrapper,
@@ -18,8 +19,9 @@ const styles = {
 	checkinput_variant_var4: checkinput_variant_var4,
 	checkinput_variant_var5: checkinput_variant_var5,
 	checkinput_variant_var6: checkinput_variant_var6,
+	checkinput_variant_var7: checkinput_variant_var7,
 	checkicon: checkicon
 };
 
-export { checkicon, checkinput, checkinput_variant_default, checkinput_variant_var1, checkinput_variant_var2, checkinput_variant_var3, checkinput_variant_var4, checkinput_variant_var5, checkinput_variant_var6, styles as default, wrapper };
+export { checkicon, checkinput, checkinput_variant_default, checkinput_variant_var1, checkinput_variant_var2, checkinput_variant_var3, checkinput_variant_var4, checkinput_variant_var5, checkinput_variant_var6, checkinput_variant_var7, styles as default, wrapper };
 //# sourceMappingURL=Checkbox.module.css.js.map

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

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

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

@@ -18,7 +18,8 @@ const checkInputVariants = cva(styles.checkinput, {
       var3: styles["checkinput_variant_var3"],
       var4: styles["checkinput_variant_var4"],
       var5: styles["checkinput_variant_var5"],
-      var6: styles["checkinput_variant_var6"]
+      var6: styles["checkinput_variant_var6"],
+      var7: styles["checkinput_variant_var7"]
     }
   },
   defaultVariants: {
@@ -37,12 +38,43 @@ const Checkbox = ({
   ...delegated
 }) => {
   const defaultId = useId();
-  return /* @__PURE__ */ jsxs(FormRoot, { $orientation: orientation, $dir: dir, className: styles.wrapper, children: [
-    /* @__PURE__ */ jsx(RadixCheckbox.Root, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, checked, ...delegated, className: cn(checkInputVariants({
-      variant
-    }), className), children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: styles.checkicon, children: /* @__PURE__ */ jsx(SvgImage, { name: checked === "indeterminate" ? "minus" : "check", size: "sm" }) }) }),
-    label && /* @__PURE__ */ jsx(GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    FormRoot,
+    {
+      $orientation: orientation,
+      $dir: dir,
+      className: styles.wrapper,
+      children: [
+        /* @__PURE__ */ jsx(
+          RadixCheckbox.Root,
+          {
+            id: id ?? defaultId,
+            "data-testid": "checkbox",
+            disabled,
+            "aria-label": `${label}`,
+            checked,
+            ...delegated,
+            className: cn(checkInputVariants({ variant }), className),
+            children: /* @__PURE__ */ jsx(RadixCheckbox.Indicator, { className: styles.checkicon, children: /* @__PURE__ */ jsx(
+              SvgImage,
+              {
+                name: checked === "indeterminate" ? "minus" : "check",
+                size: "sm"
+              }
+            ) })
+          }
+        ),
+        label && /* @__PURE__ */ jsx(
+          GenericLabel,
+          {
+            htmlFor: id ?? defaultId,
+            disabled,
+            children: label
+          }
+        )
+      ]
+    }
+  );
 };
 
 export { Checkbox };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n  variants: {\n    variant: {\n      default: styles['checkinput_variant_default'],\n      var1: styles['checkinput_variant_var1'],\n      var2: styles['checkinput_variant_var2'],\n      var3: styles['checkinput_variant_var3'],\n      var4: styles['checkinput_variant_var4'],\n      var5: styles['checkinput_variant_var5'],\n      var6: styles['checkinput_variant_var6'],\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport const Checkbox = ({\n  id,\n  label,\n  variant = 'default',\n  disabled,\n  orientation = 'horizontal',\n  dir = 'end',\n  checked,\n  className,\n  ...delegated\n}: CheckboxProps) => {\n  const defaultId = useId();\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      className={styles.wrapper}\n    >\n      <RadixCheckbox.Root\n        id={id ?? defaultId}\n        data-testid=\"checkbox\"\n        disabled={disabled}\n        aria-label={`${label}`}\n        checked={checked}\n        {...delegated}\n        className={cn(checkInputVariants({ variant }), className)}\n      >\n        <RadixCheckbox.Indicator className={styles.checkicon}>\n          <Icon\n            name={checked === 'indeterminate' ? 'minus' : 'check'}\n            size=\"sm\"\n          />\n        </RadixCheckbox.Indicator>\n      </RadixCheckbox.Root>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </FormRoot>\n  );\n};\n"],"names":["checkInputVariants","cva","styles","checkinput","variants","variant","default","var1","var2","var3","var4","var5","var6","defaultVariants","Checkbox","id","label","disabled","orientation","dir","checked","className","delegated","defaultId","useId","wrapper","cn","checkicon","Icon"],"mappings":";;;;;;;;;;AAUA,MAAMA,kBAAAA,GAAqBC,GAAAA,CAAIC,MAAAA,CAAOC,UAAAA,EAAY;AAAA,EAChDC,QAAAA,EAAU;AAAA,IACRC,OAAAA,EAAS;AAAA,MACPC,OAAAA,EAASJ,OAAO,4BAA4B,CAAA;AAAA,MAC5CK,IAAAA,EAAML,OAAO,yBAAyB,CAAA;AAAA,MACtCM,IAAAA,EAAMN,OAAO,yBAAyB,CAAA;AAAA,MACtCO,IAAAA,EAAMP,OAAO,yBAAyB,CAAA;AAAA,MACtCQ,IAAAA,EAAMR,OAAO,yBAAyB,CAAA;AAAA,MACtCS,IAAAA,EAAMT,OAAO,yBAAyB,CAAA;AAAA,MACtCU,IAAAA,EAAMV,OAAO,yBAAyB;AAAA;AACxC,GACF;AAAA,EACAW,eAAAA,EAAiB;AAAA,IACfR,OAAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAMS,WAAWA,CAAC;AAAA,EACvBC,EAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAX,OAAAA,GAAU,SAAA;AAAA,EACVY,QAAAA;AAAAA,EACAC,WAAAA,GAAc,YAAA;AAAA,EACdC,GAAAA,GAAM,KAAA;AAAA,EACNC,OAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AACU,CAAA,KAAM;AACnB,EAAA,MAAMC,YAAYC,KAAAA,EAAM;AACxB,EAAA,uBACE,IAAA,CAAC,YACC,YAAA,EAAcN,WAAAA,EACd,MAAMC,GAAAA,EACN,SAAA,EAAWjB,OAAOuB,OAAAA,EAElB,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAc,IAAA,EAAd,EACC,IAAIV,EAAAA,IAAMQ,SAAAA,EACV,eAAY,UAAA,EACZ,QAAA,EACA,YAAA,EAAY,CAAA,EAAGP,KAAK,CAAA,CAAA,EACpB,OAAA,EACA,GAAIM,SAAAA,EACJ,SAAA,EAAWI,GAAG1B,kBAAAA,CAAmB;AAAA,MAAEK;AAAAA,KAAS,GAAGgB,SAAS,CAAA,EAExD,8BAAC,aAAA,CAAc,SAAA,EAAd,EAAwB,SAAA,EAAWnB,MAAAA,CAAOyB,WACzC,QAAA,kBAAA,GAAA,CAACC,QAAA,EAAA,EACC,MAAMR,OAAAA,KAAY,eAAA,GAAkB,UAAU,OAAA,EAC9C,IAAA,EAAK,IAAA,EAAI,CAAA,EAEb,CAAA,EACF,CAAA;AAAA,IACCJ,yBACC,GAAA,CAAC,YAAA,EAAA,EACC,SAASD,EAAAA,IAAMQ,SAAAA,EACf,UAECP,QAAAA,EAAAA,KAAAA,EACH;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import { GenericLabel } from '@/components/GenericLabel';\nimport { Icon } from '@/components/Icon';\n\nimport * as RadixCheckbox from '@radix-ui/react-checkbox';\nimport { useId } from 'react';\nimport { FormRoot } from '@/components/FormContainer';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Checkbox.module.css';\nimport { CheckboxProps } from './Checkbox.types';\n\nconst checkInputVariants = cva(styles.checkinput, {\n  variants: {\n    variant: {\n      default: styles['checkinput_variant_default'],\n      var1: styles['checkinput_variant_var1'],\n      var2: styles['checkinput_variant_var2'],\n      var3: styles['checkinput_variant_var3'],\n      var4: styles['checkinput_variant_var4'],\n      var5: styles['checkinput_variant_var5'],\n      var6: styles['checkinput_variant_var6'],\n      var7: styles['checkinput_variant_var7'],\n    },\n  },\n  defaultVariants: {\n    variant: 'default',\n  },\n});\n\nexport const Checkbox = ({\n  id,\n  label,\n  variant = 'default',\n  disabled,\n  orientation = 'horizontal',\n  dir = 'end',\n  checked,\n  className,\n  ...delegated\n}: CheckboxProps) => {\n  const defaultId = useId();\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      className={styles.wrapper}\n    >\n      <RadixCheckbox.Root\n        id={id ?? defaultId}\n        data-testid=\"checkbox\"\n        disabled={disabled}\n        aria-label={`${label}`}\n        checked={checked}\n        {...delegated}\n        className={cn(checkInputVariants({ variant }), className)}\n      >\n        <RadixCheckbox.Indicator className={styles.checkicon}>\n          <Icon\n            name={checked === 'indeterminate' ? 'minus' : 'check'}\n            size=\"sm\"\n          />\n        </RadixCheckbox.Indicator>\n      </RadixCheckbox.Root>\n      {label && (\n        <GenericLabel\n          htmlFor={id ?? defaultId}\n          disabled={disabled}\n        >\n          {label}\n        </GenericLabel>\n      )}\n    </FormRoot>\n  );\n};\n"],"names":["Icon"],"mappings":";;;;;;;;;;AAUA,MAAM,kBAAA,GAAqB,GAAA,CAAI,MAAA,CAAO,UAAA,EAAY;AAAA,EAChD,QAAA,EAAU;AAAA,IACR,OAAA,EAAS;AAAA,MACP,OAAA,EAAS,OAAO,4BAA4B,CAAA;AAAA,MAC5C,IAAA,EAAM,OAAO,yBAAyB,CAAA;AAAA,MACtC,IAAA,EAAM,OAAO,yBAAyB,CAAA;AAAA,MACtC,IAAA,EAAM,OAAO,yBAAyB,CAAA;AAAA,MACtC,IAAA,EAAM,OAAO,yBAAyB,CAAA;AAAA,MACtC,IAAA,EAAM,OAAO,yBAAyB,CAAA;AAAA,MACtC,IAAA,EAAM,OAAO,yBAAyB,CAAA;AAAA,MACtC,IAAA,EAAM,OAAO,yBAAyB;AAAA;AACxC,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAEM,MAAM,WAAW,CAAC;AAAA,EACvB,EAAA;AAAA,EACA,KAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,QAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA,GAAM,KAAA;AAAA,EACN,OAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAqB;AACnB,EAAA,MAAM,YAAY,KAAA,EAAM;AACxB,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAc,WAAA;AAAA,MACd,IAAA,EAAM,GAAA;AAAA,MACN,WAAW,MAAA,CAAO,OAAA;AAAA,MAElB,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,aAAA,CAAc,IAAA;AAAA,UAAd;AAAA,YACC,IAAI,EAAA,IAAM,SAAA;AAAA,YACV,aAAA,EAAY,UAAA;AAAA,YACZ,QAAA;AAAA,YACA,YAAA,EAAY,GAAG,KAAK,CAAA,CAAA;AAAA,YACpB,OAAA;AAAA,YACC,GAAG,SAAA;AAAA,YACJ,WAAW,EAAA,CAAG,kBAAA,CAAmB,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,YAExD,8BAAC,aAAA,CAAc,SAAA,EAAd,EAAwB,SAAA,EAAW,OAAO,SAAA,EACzC,QAAA,kBAAA,GAAA;AAAA,cAACA,QAAA;AAAA,cAAA;AAAA,gBACC,IAAA,EAAM,OAAA,KAAY,eAAA,GAAkB,OAAA,GAAU,OAAA;AAAA,gBAC9C,IAAA,EAAK;AAAA;AAAA,aACP,EACF;AAAA;AAAA,SACF;AAAA,QACC,KAAA,oBACC,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,SAAS,EAAA,IAAM,SAAA;AAAA,YACf,QAAA;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ;AAEJ;;;;"}