@clickhouse/click-ui 0.6.0 → 0.6.1-rc2

package/dist/cjs/components/CardPrimary/CardPrimaryTopBadge.cjs

@@ -2,21 +2,21 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const styledComponents = require('styled-components');
+const jsxRuntime = require('react/jsx-runtime');
+const cva = require('../../lib/cva.cjs');
+const CardPrimary_module = require('./CardPrimary.module.css.cjs');
 const Container = require('../Container/index.cjs');
 const Badge = require('../Badge/index.cjs');
 
-const TopBadgeWrapper = styledComponents.styled(Container.Container).withConfig({
-  componentId: "sc-1d5pqpo-0"
-})(["position:relative;"]);
-const CardPrimaryTopBadge = styledComponents.styled(Badge.Badge).withConfig({
-  componentId: "sc-1d5pqpo-1"
-})(["position:absolute;top:0;left:50%;transform:translate(-50%,-50%);", " div:active + &{border-color:", ";}"], ({
-  $isSelected,
-  theme
-}) => $isSelected ? `border-color: ${theme.click.button.basic.color.primary.stroke.active};` : "", ({
-  theme
-}) => theme.click.button.basic.color.primary.stroke.active);
+const TopBadgeWrapper = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { className: cva.cn(CardPrimary_module.default.topbadgewrapper, className), ...props });
+const CardPrimaryTopBadge = ({
+  isSelected,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { className: cva.cn(CardPrimary_module.default.topbadge, isSelected && CardPrimary_module.default["topbadge_selected"], className), ...props });
 
 exports.CardPrimaryTopBadge = CardPrimaryTopBadge;
 exports.TopBadgeWrapper = TopBadgeWrapper;

package/dist/cjs/components/CardPrimary/CardPrimaryTopBadge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CardPrimaryTopBadge.cjs","sources":["../../../../src/components/CardPrimary/CardPrimaryTopBadge.tsx"],"sourcesContent":["import { Badge } from '@/components/Badge';\nimport { Container } from '@/components/Container';\nimport { styled } from 'styled-components';\n\nexport const TopBadgeWrapper = styled(Container)`\n  position: relative;\n`;\n\nexport const CardPrimaryTopBadge = styled(Badge)<{ $isSelected?: boolean }>`\n  position: absolute;\n  top: 0;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  ${({ $isSelected, theme }) =>\n    $isSelected\n      ? `border-color: ${theme.click.button.basic.color.primary.stroke.active};`\n      : ''}\n  div:active + & {\n    border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.active};\n  }\n`;\n"],"names":["TopBadgeWrapper","styled","Container","withConfig","componentId","CardPrimaryTopBadge","Badge","$isSelected","theme","click","button","basic","color","primary","stroke","active"],"mappings":";;;;;;;;AAIO,MAAMA,eAAAA,GAAkBC,uBAAAA,CAAOC,mBAAS,CAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,CAAA;AAIzC,MAAMC,mBAAAA,GAAsBJ,uBAAAA,CAAOK,WAAK,CAAA,CAACH,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,kEAAA,EAAA,+BAAA,EAAA,IAAA,GAK5C,CAAC;AAAA,EAAEG,WAAAA;AAAAA,EAAaC;AAAM,CAAA,KACtBD,WAAAA,GACI,CAAA,cAAA,EAAiBC,KAAAA,CAAMC,KAAAA,CAAMC,MAAAA,CAAOC,KAAAA,CAAMC,KAAAA,CAAMC,OAAAA,CAAQC,MAAAA,CAAOC,MAAM,CAAA,CAAA,CAAA,GACrE,EAAA,EAEY,CAAC;AAAA,EAAEP;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,MAAAA,CAAOC,MAAMC,KAAAA,CAAMC,OAAAA,CAAQC,OAAOC,MAAM;;;;;"}
+{"version":3,"file":"CardPrimaryTopBadge.cjs","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","jsx","Container","cn","styles","topbadgewrapper","CardPrimaryTopBadge","isSelected","Badge","topbadge"],"mappings":";;;;;;;;;;AAQO,MAAMA,kBAAkBA,CAAC;AAAA,EAAEC,SAAAA;AAAAA,EAAW,GAAGC;AAA4B,CAAA,qBAC1EC,cAAA,CAACC,uBACC,SAAA,EAAWC,MAAAA,CAAGC,2BAAOC,eAAAA,EAAiBN,SAAS,CAAA,EAC/C,GAAIC,KAAAA,EAAM;AAMP,MAAMM,sBAAsBA,CAAC;AAAA,EAClCC,UAAAA;AAAAA,EACAR,SAAAA;AAAAA,EACA,GAAGC;AACqB,CAAA,qBACxBC,cAAA,CAACO,WAAA,EAAA,EACC,SAAA,EAAWL,MAAAA,CAAGC,0BAAAA,CAAOK,QAAAA,EAAUF,UAAAA,IAAcH,0BAAAA,CAAO,mBAAmB,CAAA,EAAGL,SAAS,CAAA,EACnF,GAAIC,KAAAA,EAAM;;;;;"}

package/dist/cjs/components/CardPrimary/index.cjs

@@ -1,91 +1,79 @@
+require("./CardPrimary.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
 const withTopBadge = require('./withTopBadge.cjs');
+const cva = require('../../lib/cva.cjs');
+const CardPrimary_module = require('./CardPrimary.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
 const Title = require('../Title/index.cjs');
 const Text = require('../Text/index.cjs');
 const Spacer = require('../Spacer/index.cjs');
 const Button = require('../Button/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const Wrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-2dguvi-0"
-})(["background-color:", ";border-radius:", ";border:", ";display:flex;width:100%;max-width:100%;text-align:", ";flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,&:focus{background-color:", ";cursor:pointer;button{background-color:", ";border-color:", ";&:active{background-color:", ";border-color:", ";}}}&:active{border-color:", ";}&[aria-disabled='true'],&[aria-disabled='true']:hover,&[aria-disabled='true']:focus,&[aria-disabled='true']:active{pointer-events:none;", "}", ""], ({
-  theme
-}) => theme.click.card.primary.color.background.default, ({
-  theme
-}) => theme.click.card.primary.radii.all, ({
-  theme
-}) => `1px solid ${theme.click.card.primary.color.stroke.default}`, ({
-  $alignContent
-}) => $alignContent === "start" ? "left" : $alignContent === "end" ? "right" : "center", ({
-  $size = "md",
-  theme
-}) => `${theme.click.card.primary.space[$size].x} ${theme.click.card.primary.space[$size].y}`, ({
-  $size = "md",
-  theme
-}) => theme.click.card.primary.space[$size].gap, ({
-  $hasShadow,
-  theme
-}) => $hasShadow ? theme.shadow[1] : "none", ({
-  theme
-}) => theme.click.card.secondary.color.background.hover, ({
-  theme
-}) => theme.click.button.basic.color.primary.background.hover, ({
-  theme
-}) => theme.click.button.basic.color.primary.stroke.hover, ({
-  theme
-}) => theme.click.button.basic.color.primary.background.active, ({
-  theme
-}) => theme.click.button.basic.color.primary.stroke.active, ({
-  theme
-}) => theme.click.button.basic.color.primary.stroke.active, ({
-  theme
-}) => `
-    background-color: ${theme.click.card.primary.color.background.disabled};
-    color: ${theme.click.card.primary.color.title.disabled};
-    border: 1px solid ${theme.click.card.primary.color.stroke.disabled};
-    cursor: not-allowed;
-
-    button {
-      background-color: ${theme.click.button.basic.color.primary.background.disabled};
-      border-color: ${theme.click.button.basic.color.primary.stroke.disabled};
-      &:active {
-        background-color: ${theme.click.button.basic.color.primary.background.disabled};
-        border-color: ${theme.click.button.basic.color.primary.stroke.disabled};
-      }
-    }`, ({
-  $isSelected,
-  theme
-}) => $isSelected ? `border-color: ${theme.click.button.basic.color.primary.stroke.active};` : "");
-const Header = styledComponents.styled.div.withConfig({
-  componentId: "sc-2dguvi-1"
-})(["display:flex;flex-direction:column;align-items:", ";gap:", ";h3{color:", ";}svg,img{height:", ";width:", ";}"], ({
-  $alignContent = "center"
-}) => ["start", "end"].includes($alignContent) ? `flex-${$alignContent}` : $alignContent, ({
-  $size = "md",
-  theme
-}) => theme.click.card.primary.space[$size].gap, ({
-  $disabled,
-  theme
-}) => $disabled == true ? theme.click.global.color.text.muted : theme.click.global.color.text.default, ({
-  $size = "md",
-  theme
-}) => theme.click.card.primary.size.icon[$size].all, ({
-  $size = "md",
-  theme
-}) => theme.click.card.primary.size.icon[$size].all);
-const Content = styledComponents.styled.div.withConfig({
-  componentId: "sc-2dguvi-2"
-})(["width:100%;display:flex;flex-direction:column;align-self:", ";gap:", ";flex:1;"], ({
-  $alignContent = "center"
-}) => ["start", "end"].includes($alignContent) ? `flex-${$alignContent}` : $alignContent, ({
-  $size = "md",
-  theme
-}) => theme.click.card.primary.space[$size].gap);
+const wrapperVariants = classVarianceAuthority.cva(CardPrimary_module.default.wrapper, {
+  variants: {
+    size: {
+      sm: CardPrimary_module.default["wrapper_size_sm"],
+      md: CardPrimary_module.default["wrapper_size_md"]
+    },
+    align: {
+      start: CardPrimary_module.default["wrapper_align_start"],
+      center: CardPrimary_module.default["wrapper_align_center"],
+      end: CardPrimary_module.default["wrapper_align_end"]
+    },
+    hasShadow: {
+      true: CardPrimary_module.default["wrapper_shadow"]
+    },
+    isSelected: {
+      true: CardPrimary_module.default["wrapper_selected"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    align: "center"
+  }
+});
+const headerVariants = classVarianceAuthority.cva(CardPrimary_module.default.header, {
+  variants: {
+    size: {
+      sm: CardPrimary_module.default["header_size_sm"],
+      md: CardPrimary_module.default["header_size_md"]
+    },
+    align: {
+      start: CardPrimary_module.default["header_align_start"],
+      center: CardPrimary_module.default["header_align_center"],
+      end: CardPrimary_module.default["header_align_end"]
+    },
+    disabled: {
+      true: CardPrimary_module.default["header_disabled"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    align: "center"
+  }
+});
+const contentVariants = classVarianceAuthority.cva(CardPrimary_module.default.content, {
+  variants: {
+    size: {
+      sm: CardPrimary_module.default["content_size_sm"],
+      md: CardPrimary_module.default["content_size_md"]
+    },
+    align: {
+      start: CardPrimary_module.default["content_align_start"],
+      center: CardPrimary_module.default["content_align_center"],
+      end: CardPrimary_module.default["content_align_end"]
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    align: "center"
+  }
+});
 const convertCardAlignToTextAlign = (align) => {
   if (align === "center") {
     return "center";
@@ -106,6 +94,7 @@ const Card = ({
   onButtonClick,
   isSelected,
   children,
+  className,
   ...props
 }) => {
   const handleClick = (e) => {
@@ -117,12 +106,24 @@ const Card = ({
     }
   };
   const Component = !!infoUrl || typeof onButtonClick === "function" ? Button.Button : "div";
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size, "aria-disabled": disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
-    (icon || title) && /* @__PURE__ */ jsxRuntime.jsxs(Header, { $size: size, $disabled: disabled, $alignContent: alignContent, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-disabled": disabled, tabIndex: 0, ...props, className: cva.cn(wrapperVariants({
+    size,
+    align: alignContent,
+    hasShadow,
+    isSelected
+  }), className), children: [
+    (icon || title) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(headerVariants({
+      size,
+      align: alignContent,
+      disabled
+    })), children: [
       iconUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, "aria-hidden": true }),
       title && /* @__PURE__ */ jsxRuntime.jsx(Title.Title, { type: "h3", children: title })
     ] }),
-    (description || children) && /* @__PURE__ */ jsxRuntime.jsxs(Content, { $size: size, $alignContent: alignContent, children: [
+    (description || children) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(contentVariants({
+      size,
+      align: alignContent
+    })), children: [
       description && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", align: convertCardAlignToTextAlign(alignContent ?? "start"), children: description }),
       children
     ] }),

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/CardPrimary/CardPrimary.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { 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 { CardPrimaryProps, CardPrimarySize } from './CardPrimary.types';\n\ntype ContentAlignment = 'start' | 'center' | 'end';\n\nconst Wrapper = styled.div<{\n  $size?: CardPrimarySize;\n  $hasShadow?: boolean;\n  $isSelected?: boolean;\n  $alignContent?: ContentAlignment;\n}>`\n  background-color: ${({ theme }) => theme.click.card.primary.color.background.default};\n  border-radius: ${({ theme }) => theme.click.card.primary.radii.all};\n  border: ${({ theme }) => `1px solid ${theme.click.card.primary.color.stroke.default}`};\n  display: flex;\n  width: 100%;\n  max-width: 100%;\n  text-align: ${({ $alignContent }) =>\n    $alignContent === 'start' ? 'left' : $alignContent === 'end' ? 'right' : 'center'};\n  flex-direction: column;\n  padding: ${({ $size = 'md', theme }) =>\n    `${theme.click.card.primary.space[$size].x} ${theme.click.card.primary.space[$size].y}`};\n  gap: ${({ $size = 'md', theme }) => theme.click.card.primary.space[$size].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    button {\n      background-color: ${({ theme }) =>\n        theme.click.button.basic.color.primary.background.hover};\n      border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.hover};\n      &:active {\n        background-color: ${({ theme }) =>\n          theme.click.button.basic.color.primary.background.active};\n        border-color: ${({ theme }) =>\n          theme.click.button.basic.color.primary.stroke.active};\n      }\n    }\n  }\n\n  &:active {\n    border-color: ${({ theme }) => theme.click.button.basic.color.primary.stroke.active};\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.primary.color.background.disabled};\n    color: ${theme.click.card.primary.color.title.disabled};\n    border: 1px solid ${theme.click.card.primary.color.stroke.disabled};\n    cursor: not-allowed;\n\n    button {\n      background-color: ${theme.click.button.basic.color.primary.background.disabled};\n      border-color: ${theme.click.button.basic.color.primary.stroke.disabled};\n      &:active {\n        background-color: ${theme.click.button.basic.color.primary.background.disabled};\n        border-color: ${theme.click.button.basic.color.primary.stroke.disabled};\n      }\n    }`}\n  }\n\n  ${({ $isSelected, theme }) =>\n    $isSelected\n      ? `border-color: ${theme.click.button.basic.color.primary.stroke.active};`\n      : ''}\n`;\n\nconst Header = styled.div<{\n  $size?: 'sm' | 'md';\n  $disabled?: boolean;\n  $alignContent?: ContentAlignment;\n}>`\n  display: flex;\n  flex-direction: column;\n  align-items: ${({ $alignContent = 'center' }) =>\n    ['start', 'end'].includes($alignContent) ? `flex-${$alignContent}` : $alignContent};\n  gap: ${({ $size = 'md', theme }) => theme.click.card.primary.space[$size].gap};\n\n  h3 {\n    color: ${({ $disabled, theme }) =>\n      $disabled == true\n        ? theme.click.global.color.text.muted\n        : theme.click.global.color.text.default};\n  }\n\n  svg,\n  img {\n    height: ${({ $size = 'md', theme }) => theme.click.card.primary.size.icon[$size].all};\n    width: ${({ $size = 'md', theme }) => theme.click.card.primary.size.icon[$size].all};\n  }\n`;\n\nconst Content = styled.div<{ $size?: 'sm' | 'md'; $alignContent?: ContentAlignment }>`\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  align-self: ${({ $alignContent = 'center' }) =>\n    ['start', 'end'].includes($alignContent) ? `flex-${$alignContent}` : $alignContent};\n  gap: ${({ $size = 'md', theme }) => theme.click.card.primary.space[$size].gap};\n  flex: 1;\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  ...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    <Wrapper\n      $alignContent={alignContent}\n      $hasShadow={hasShadow}\n      $size={size}\n      aria-disabled={disabled}\n      $isSelected={isSelected}\n      tabIndex={0}\n      {...props}\n    >\n      {(icon || title) && (\n        <Header\n          $size={size}\n          $disabled={disabled}\n          $alignContent={alignContent}\n        >\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        </Header>\n      )}\n\n      {(description || children) && (\n        <Content\n          $size={size}\n          $alignContent={alignContent}\n        >\n          {description && (\n            <Text\n              color=\"muted\"\n              align={convertCardAlignToTextAlign(alignContent ?? 'start')}\n            >\n              {description}\n            </Text>\n          )}\n          {children}\n        </Content>\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    </Wrapper>\n  );\n};\n\nexport const CardPrimary = withTopBadge<CardPrimaryProps>(Card);\n"],"names":["Wrapper","styled","div","withConfig","componentId","theme","click","card","primary","color","background","default","radii","all","stroke","$alignContent","$size","space","x","y","gap","$hasShadow","shadow","secondary","hover","button","basic","active","disabled","title","$isSelected","Header","includes","$disabled","global","text","muted","size","icon","Content","convertCardAlignToTextAlign","align","Card","alignContent","iconUrl","hasShadow","description","infoUrl","infoText","onButtonClick","isSelected","children","props","handleClick","e","length","window","open","Component","Button","jsxs","jsx","Icon","Title","Text","Spacer","CardPrimary","withTopBadge"],"mappings":"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"}
+{"version":3,"file":"index.cjs","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","jsxs","cn","jsx","Icon","Title","Text","Spacer","CardPrimary","withTopBadge"],"mappings":"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"}

package/dist/cjs/components/CardPrimary/withTopBadge.cjs

@@ -11,7 +11,7 @@ const withTopBadge = (Component) => ({
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(CardPrimaryTopBadge.TopBadgeWrapper, { alignItems: "stretch", fillWidth: true, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props }),
-    topBadgeText && /* @__PURE__ */ jsxRuntime.jsx(CardPrimaryTopBadge.CardPrimaryTopBadge, { "data-testid": "card-top-badge", text: topBadgeText, $isSelected: props.isSelected || false })
+    topBadgeText && /* @__PURE__ */ jsxRuntime.jsx(CardPrimaryTopBadge.CardPrimaryTopBadge, { "data-testid": "card-top-badge", text: topBadgeText, isSelected: props.isSelected || false })
   ] });
 };
 

package/dist/cjs/components/CardPrimary/withTopBadge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"withTopBadge.cjs","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","jsxs","TopBadgeWrapper","jsx","CardPrimaryTopBadge","isSelected"],"mappings":";;;;;;;AAQO,MAAMA,YAAAA,GACX,CAAmBC,SAAAA,KACnB,CAAC;AAAA,EAAEC,YAAAA;AAAAA,EAAc,GAAGC;AAA6B,CAAA,KAAM;AACrD,EAAA,uBACEC,eAAA,CAACC,mCAAA,EAAA,EACC,UAAA,EAAW,SAAA,EACX,WAAS,IAAA,EAET,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,SAAA,EAAA,KAAeH,KAAAA,EAAY,CAAA;AAAA,IAC3BD,YAAAA,oBACCI,cAAA,CAACC,uCAAA,EAAA,EACC,aAAA,EAAY,gBAAA,EACZ,MAAML,YAAAA,EACN,WAAA,EAAaC,KAAAA,CAAMK,UAAAA,IAAc,KAAA,EAAM;AAAA,GAAA,EAG7C,CAAA;AAEJ;;;;"}
+{"version":3,"file":"withTopBadge.cjs","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","jsxs","TopBadgeWrapper","jsx","CardPrimaryTopBadge","isSelected"],"mappings":";;;;;;;AAQO,MAAMA,YAAAA,GACX,CAAmBC,SAAAA,KACnB,CAAC;AAAA,EAAEC,YAAAA;AAAAA,EAAc,GAAGC;AAA6B,CAAA,KAAM;AACrD,EAAA,uBACEC,eAAA,CAACC,mCAAA,EAAA,EACC,UAAA,EAAW,SAAA,EACX,WAAS,IAAA,EAET,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,SAAA,EAAA,KAAeH,KAAAA,EAAY,CAAA;AAAA,IAC3BD,YAAAA,oBACCI,cAAA,CAACC,uCAAA,EAAA,EACC,aAAA,EAAY,gBAAA,EACZ,MAAML,YAAAA,EACN,UAAA,EAAYC,KAAAA,CAAMK,UAAAA,IAAc,KAAA,EAAM;AAAA,GAAA,EAG5C,CAAA;AAEJ;;;;"}

package/dist/cjs/components/Checkbox/Checkbox.css

@@ -0,0 +1,116 @@
+/* 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
+   order between CSS Modules and the runtime-injected styled-components. */
+.wrapper__rpthW.wrapper__rpthW {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
+     keyword on `max-width` is widely supported on evergreen browsers; the original
+     styled-components rule used the same value. */
+  max-width: fit-content;
+  align-items: center;
+}
+
+.checkinput__oErG6 {
+  display: flex;
+  width: var(--click-checkbox-size-all);
+  height: var(--click-checkbox-size-all);
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  border: 1px solid var(--checkbox-stroke-default);
+  border-radius: var(--click-checkbox-radii-all);
+  background: var(--checkbox-bg-default);
+  cursor: pointer;
+}
+
+.checkinput_variant_default__7KgZ1 {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-default-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-default-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-default-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-default-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-default-stroke-active);
+}
+
+.checkinput_variant_var1__dF7nF {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var1-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var1-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var1-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var1-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var1-stroke-active);
+}
+
+.checkinput_variant_var2__pHifP {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var2-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var2-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var2-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var2-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var2-stroke-active);
+}
+
+.checkinput_variant_var3__8KFg4 {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var3-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var3-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var3-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var3-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var3-stroke-active);
+}
+
+.checkinput_variant_var4__-C02i {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var4-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var4-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var4-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var4-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var4-stroke-active);
+}
+
+.checkinput_variant_var5__DuiuL {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var5-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var5-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var5-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var5-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var5-stroke-active);
+}
+
+.checkinput_variant_var6__DqZFO {
+  --checkbox-bg-default: var(--click-checkbox-color-variations-var6-background-default);
+  --checkbox-bg-hover: var(--click-checkbox-color-variations-var6-background-hover);
+  --checkbox-bg-active: var(--click-checkbox-color-variations-var6-background-active);
+  --checkbox-stroke-default: var(--click-checkbox-color-variations-var6-stroke-default);
+  --checkbox-stroke-active: var(--click-checkbox-color-variations-var6-stroke-active);
+}
+
+.checkinput__oErG6:hover {
+  background: var(--checkbox-bg-hover);
+}
+
+.checkinput__oErG6[data-state='checked'],
+.checkinput__oErG6[data-state='indeterminate'] {
+  border-color: var(--checkbox-stroke-active);
+  background: var(--checkbox-bg-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after checked/indeterminate to mirror the source cascade order;
+   matches the styled-components rule which used a nested `&[data-disabled]`
+   block placed after the state selectors. */
+.checkinput__oErG6[data-disabled] {
+  border-color: var(--click-checkbox-color-stroke-disabled);
+  background: var(--click-checkbox-color-background-disabled);
+  cursor: not-allowed;
+}
+
+.checkinput__oErG6[data-disabled][data-state='checked'],
+.checkinput__oErG6[data-disabled][data-state='indeterminate'] {
+  border-color: var(--click-checkbox-color-stroke-disabled);
+  background: var(--click-checkbox-color-background-disabled);
+}
+/* stylelint-enable no-descending-specificity */
+
+.checkicon__wvW5M {
+  color: var(--click-checkbox-color-check-active);
+}
+
+.checkicon__wvW5M[data-disabled] {
+  color: var(--click-checkbox-color-check-disabled);
+}

package/dist/cjs/components/Checkbox/Checkbox.module.css.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const wrapper = "wrapper__rpthW";
+const checkinput = "checkinput__oErG6";
+const checkinput_variant_default = "checkinput_variant_default__7KgZ1";
+const checkinput_variant_var1 = "checkinput_variant_var1__dF7nF";
+const checkinput_variant_var2 = "checkinput_variant_var2__pHifP";
+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 checkicon = "checkicon__wvW5M";
+const styles = {
+	wrapper: wrapper,
+	checkinput: checkinput,
+	checkinput_variant_default: checkinput_variant_default,
+	checkinput_variant_var1: checkinput_variant_var1,
+	checkinput_variant_var2: checkinput_variant_var2,
+	checkinput_variant_var3: checkinput_variant_var3,
+	checkinput_variant_var4: checkinput_variant_var4,
+	checkinput_variant_var5: checkinput_variant_var5,
+	checkinput_variant_var6: checkinput_variant_var6,
+	checkicon: checkicon
+};
+
+exports.checkicon = checkicon;
+exports.checkinput = checkinput;
+exports.checkinput_variant_default = checkinput_variant_default;
+exports.checkinput_variant_var1 = checkinput_variant_var1;
+exports.checkinput_variant_var2 = checkinput_variant_var2;
+exports.checkinput_variant_var3 = checkinput_variant_var3;
+exports.checkinput_variant_var4 = checkinput_variant_var4;
+exports.checkinput_variant_var5 = checkinput_variant_var5;
+exports.checkinput_variant_var6 = checkinput_variant_var6;
+exports.default = styles;
+exports.wrapper = wrapper;
+//# sourceMappingURL=Checkbox.module.css.cjs.map

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

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

package/dist/cjs/components/Checkbox/index.cjs

@@ -1,3 +1,4 @@
+require("./Checkbox.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,10 +6,12 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const RadixCheckbox = require('@radix-ui/react-checkbox');
 const react = require('react');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const Checkbox_module = require('./Checkbox.module.css.cjs');
+const FormRoot = require('../FormContainer/FormRoot.cjs');
 const Icon = require('../Icon/index.cjs');
 const GenericLabel = require('../GenericLabel/index.cjs');
-const FormRoot = require('../FormContainer/FormRoot.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -30,9 +33,22 @@ function _interopNamespace(e) {
 
 const RadixCheckbox__namespace = /*#__PURE__*/_interopNamespace(RadixCheckbox);
 
-const Wrapper = styledComponents.styled(FormRoot.FormRoot).withConfig({
-  componentId: "sc-1sck1ja-0"
-})(["align-items:center;max-width:fit-content;"]);
+const checkInputVariants = classVarianceAuthority.cva(Checkbox_module.default.checkinput, {
+  variants: {
+    variant: {
+      default: Checkbox_module.default["checkinput_variant_default"],
+      var1: Checkbox_module.default["checkinput_variant_var1"],
+      var2: Checkbox_module.default["checkinput_variant_var2"],
+      var3: Checkbox_module.default["checkinput_variant_var3"],
+      var4: Checkbox_module.default["checkinput_variant_var4"],
+      var5: Checkbox_module.default["checkinput_variant_var5"],
+      var6: Checkbox_module.default["checkinput_variant_var6"]
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
 const Checkbox = ({
   id,
   label,
@@ -41,56 +57,27 @@ const Checkbox = ({
   orientation = "horizontal",
   dir = "end",
   checked,
+  className,
   ...delegated
 }) => {
   const defaultId = react.useId();
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $orientation: orientation, $dir: dir, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CheckInput, { id: id ?? defaultId, "data-testid": "checkbox", variant, disabled, "aria-label": `${label}`, checked, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsx(CheckIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: checked === "indeterminate" ? "minus" : "check", size: "sm" }) }) }),
+  return /* @__PURE__ */ jsxRuntime.jsxs(FormRoot.FormRoot, { $orientation: orientation, $dir: dir, className: Checkbox_module.default.wrapper, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Root, { id: id ?? defaultId, "data-testid": "checkbox", disabled, "aria-label": `${label}`, checked, ...delegated, className: cva.cn(checkInputVariants({
+      variant
+    }), className), children: /* @__PURE__ */ jsxRuntime.jsx(RadixCheckbox__namespace.Indicator, { className: Checkbox_module.default.checkicon, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Icon.Icon,
+      {
+        name: checked === "indeterminate" ? "minus" : "check",
+        size: "sm",
+        ...checked === "indeterminate" ? {} : {
+          width: "0.8rem",
+          height: "0.8rem"
+        }
+      }
+    ) }) }),
     label && /* @__PURE__ */ jsxRuntime.jsx(GenericLabel.GenericLabel, { htmlFor: id ?? defaultId, disabled, children: label })
   ] });
 };
-const CheckInput = styledComponents.styled(RadixCheckbox__namespace.Root).withConfig({
-  componentId: "sc-1sck1ja-1"
-})(["display:flex;align-items:center;justify-content:center;flex-shrink:0;", ";"], ({
-  theme,
-  variant
-}) => `
-    border-radius: ${theme.click.checkbox.radii.all};
-    width: ${theme.click.checkbox.size.all};
-    height: ${theme.click.checkbox.size.all};
-    background: ${theme.click.checkbox.color.variations[variant].background.default};
-    border: 1px solid ${theme.click.checkbox.color.variations[variant].stroke.default};
-    cursor: pointer;
-
-    &:hover {
-      background: ${theme.click.checkbox.color.variations[variant].background.hover};
-    }
-    &[data-state="checked"],
-    &[data-state="indeterminate"] {
-      border-color: ${theme.click.checkbox.color.variations[variant].stroke.active};
-      background: ${theme.click.checkbox.color.variations[variant].background.active};
-    }
-    &[data-disabled] {
-      background: ${theme.click.checkbox.color.background.disabled};
-      border-color: ${theme.click.checkbox.color.stroke.disabled};
-      cursor: not-allowed;
-      &[data-state="checked"],
-      &[data-state="indeterminate"] {
-        background: ${theme.click.checkbox.color.background.disabled};
-        border-color: ${theme.click.checkbox.color.stroke.disabled};
-      }
-    }
-  `);
-const CheckIconWrapper = styledComponents.styled(RadixCheckbox__namespace.Indicator).withConfig({
-  componentId: "sc-1sck1ja-2"
-})(["", ""], ({
-  theme
-}) => `
-    color: ${theme.click.checkbox.color.check.active};
-    &[data-disabled] {
-      color: ${theme.click.checkbox.color.check.disabled};
-    }
-  `);
 
 exports.Checkbox = Checkbox;
 //# sourceMappingURL=index.cjs.map