@clickhouse/click-ui 0.6.0 → 0.6.1-rc1

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

@@ -1,106 +1,70 @@
+import "./CardHorizontal.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './CardHorizontal.module.css.js';
+import { Icon as SvgImage } from '../Icon/index.js';
 import { Container } from '../Container/index.js';
 import { Badge } from '../Badge/index.js';
 import { Button } from '../Button/index.js';
-import { Icon as SvgImage } from '../Icon/index.js';
+import { cva } from 'class-variance-authority';
 
-const Header = styled.div.withConfig({
-  componentId: "sc-1qnbjoa-0"
-})(["max-width:100%;gap:inherit;"]);
-const Description = styled.div.withConfig({
-  componentId: "sc-1qnbjoa-1"
-})(["display:flex;flex-direction:column;align-self:start;gap:", ";flex:1;width:100%;"], ({
-  theme
-}) => theme.click.card.horizontal.space.md.gap);
-const Wrapper = styled.div.withConfig({
-  componentId: "sc-1qnbjoa-2"
-})(["display:inline-flex;width:100%;max-width:100%;align-items:", ";align-self:", ";justify-content:flex-start;", ""], ({
-  $alignment
-}) => $alignment === "top" ? "flex-start" : "center", ({
-  $alignment
-}) => $alignment === "top" ? "stretch" : "auto", ({
-  theme,
-  $color,
-  $size,
-  $isSelected,
-  $isSelectable,
-  $disabled
-}) => `
-    background: ${theme.click.card.horizontal[$color].color.background.default};
-    color: ${theme.click.card.horizontal[$color].color.title.default};
-    border-radius: ${theme.click.card.horizontal.radii.all};
-    border: 1px solid ${theme.click.card.horizontal[$color].color.stroke[$isSelectable ? $isSelected ? "active" : "hover" : "default"]};
-     padding: ${$size === "md" ? `${theme.click.card.horizontal.space.md.y} ${theme.click.card.horizontal.space.md.x}` : `${theme.click.card.horizontal.space.sm.y} ${theme.click.card.horizontal.space.sm.x}`};
-    font: ${theme.click.card.horizontal.typography.title.default};
-    ${Description} {
-      color: ${theme.click.card.horizontal[$color].color.description.default};
-      font: ${theme.click.card.horizontal.typography.description.default};
+const wrapperVariants = cva(styles.wrapper, {
+  variants: {
+    color: {
+      default: styles["wrapper_color_default"],
+      muted: styles["wrapper_color_muted"]
+    },
+    size: {
+      sm: styles["wrapper_size_sm"],
+      md: styles["wrapper_size_md"]
+    },
+    alignment: {
+      center: styles["wrapper_alignment_center"],
+      top: styles["wrapper_alignment_top"]
+    },
+    selectable: {
+      true: styles["wrapper_selectable"]
+    },
+    selected: {
+      true: styles["wrapper_selected"]
+    },
+    disabled: {
+      true: styles["wrapper_disabled"]
     }
-    &:hover{
-      background-color: ${theme.click.card.horizontal[$color].color.background[$isSelectable ? "hover" : "default"]};
-      color: ${theme.click.card.horizontal[$color].color.title[$isSelectable ? "hover" : "default"]};
-      border: 1px solid ${theme.click.card.horizontal[$color].color.stroke[$isSelectable ? $isSelected ? "active" : "default" : "default"]};
-      cursor: ${$isSelectable ? "pointer" : "default"};
-      font: ${theme.click.card.horizontal.typography.title.hover};
-      ${Description} {
-        color: ${theme.click.card.horizontal[$color].color.description[$isSelectable ? "hover" : "default"]};
-        font: ${theme.click.card.horizontal.typography.description[$isSelectable ? "hover" : "default"]};
-      }
+  },
+  defaultVariants: {
+    color: "default",
+    size: "md",
+    alignment: "center"
+  }
+});
+const contentWrapperVariants = cva(styles.contentwrapper, {
+  variants: {
+    size: {
+      sm: styles["contentwrapper_size_sm"],
+      md: styles["contentwrapper_size_md"]
     }
-
-    &:active, &:focus, &:focus-within {
-      background-color: ${theme.click.card.horizontal[$color].color.background[$isSelectable ? "active" : "default"]};
-      color: ${theme.click.card.horizontal[$color].color.title[$isSelectable ? "active" : "default"]};
-      border: 1px solid ${theme.click.card.horizontal[$color].color.stroke[$isSelectable ? "active" : "default"]};
-      ${Description} {
-        color: ${theme.click.card.horizontal[$color].color.description[$isSelectable ? "active" : "default"]};
-        font: ${theme.click.card.horizontal.typography.description[$isSelectable ? "active" : "default"]};
-      }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+const iconTextContentWrapperVariants = cva(styles.icontextcontentwrapper, {
+  variants: {
+    size: {
+      sm: styles["icontextcontentwrapper_size_sm"],
+      md: styles["icontextcontentwrapper_size_md"]
+    },
+    alignment: {
+      center: styles["icontextcontentwrapper_alignment_center"],
+      top: styles["icontextcontentwrapper_alignment_top"]
     }
-    ${$disabled ? `
-          pointer-events: none;
-          &,
-          &:hover,
-          &:active, &:focus, &:focus-within {
-            background-color: ${theme.click.card.horizontal[$color].color.background.disabled};
-            color: ${theme.click.card.horizontal[$color].color.title.disabled};
-            border: 1px solid ${theme.click.card.horizontal[$color].color.stroke[$isSelected ? "active" : "disabled"]};
-            cursor: not-allowed;
-            ${Description} {
-              color: ${theme.click.card.horizontal[$color].color.description.disabled};
-              font: ${theme.click.card.horizontal.typography.description.disabled};
-            }
-          },
-          &:active, &:focus, &:focus-within {
-            border: 1px solid ${theme.click.card.horizontal[$color].color.stroke.active};
-          }
-        ` : ""}
-  `);
-const CardIcon = styled(SvgImage).withConfig({
-  componentId: "sc-1qnbjoa-3"
-})(["", ""], ({
-  theme
-}) => `
-      height: ${theme.click.card.horizontal.icon.size.all};
-      width: ${theme.click.card.horizontal.icon.size.all};
-  `);
-const ContentWrapper = styled.div.withConfig({
-  componentId: "sc-1qnbjoa-4"
-})(["display:flex;flex-direction:row;width:100%;gap:", ";@media (max-width:", "){flex-direction:column;}"], ({
-  theme,
-  $size
-}) => $size === "md" ? theme.click.card.horizontal.space.md.gap : theme.click.card.horizontal.space.sm.gap, ({
-  theme
-}) => theme.breakpoint.sizes.md);
-const IconTextContentWrapper = styled.div.withConfig({
-  componentId: "sc-1qnbjoa-5"
-})(["display:flex;flex-direction:row;align-items:", ";width:100%;gap:", ";"], ({
-  $alignment
-}) => $alignment === "top" ? "flex-start" : "center", ({
-  theme,
-  $size
-}) => $size === "md" ? theme.click.card.horizontal.space.md.gap : theme.click.card.horizontal.space.sm.gap);
+  },
+  defaultVariants: {
+    size: "md",
+    alignment: "center"
+  }
+});
 const CardHorizontal = ({
   title,
   icon,
@@ -119,6 +83,7 @@ const CardHorizontal = ({
   badgeIcon,
   badgeIconDir,
   onButtonClick,
+  className,
   ...props
 }) => {
   const handleClick = (e) => {
@@ -133,16 +98,28 @@ const CardHorizontal = ({
       window.open(infoUrl, "_blank");
     }
   };
-  return /* @__PURE__ */ jsx(Wrapper, { $disabled: disabled, $isSelected: isSelected, $isSelectable: isSelectable, $color: color, $size: size, $alignment: alignment, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onClick: handleClick, ...props, children: /* @__PURE__ */ jsxs(ContentWrapper, { $size: size, children: [
-    /* @__PURE__ */ jsxs(IconTextContentWrapper, { $size: size, $alignment: alignment, children: [
-      icon && /* @__PURE__ */ jsx(CardIcon, { name: icon, "aria-hidden": true }),
+  return /* @__PURE__ */ jsx("div", { tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onClick: handleClick, ...props, className: cn(wrapperVariants({
+    color,
+    size,
+    alignment,
+    selectable: isSelectable,
+    selected: isSelected,
+    disabled
+  }), className), children: /* @__PURE__ */ jsxs("div", { className: cn(contentWrapperVariants({
+    size
+  })), children: [
+    /* @__PURE__ */ jsxs("div", { className: cn(iconTextContentWrapperVariants({
+      size,
+      alignment
+    })), children: [
+      icon && /* @__PURE__ */ jsx(SvgImage, { name: icon, "aria-hidden": true, className: styles.cardicon }),
       /* @__PURE__ */ jsxs(Container, { padding: "none", orientation: "vertical", children: [
-        title && /* @__PURE__ */ jsxs(Header, { as: Container, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
+        title && /* @__PURE__ */ jsxs(Container, { className: styles.header, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
           /* @__PURE__ */ jsx(Container, { orientation: "horizontal", gap: "xs", isResponsive: false, fillWidth: false, grow: "1", children: title }),
           badgeText && /* @__PURE__ */ jsx(Container, { isResponsive: false, justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-badge", children: /* @__PURE__ */ jsx(Badge, { text: badgeText, size: "md", state: badgeState, icon: badgeIcon, iconDir: badgeIconDir }) })
         ] }),
-        description && /* @__PURE__ */ jsx(Description, { children: description }),
-        children && /* @__PURE__ */ jsx(Description, { children })
+        description && /* @__PURE__ */ jsx("div", { className: styles.description, children: description }),
+        children && /* @__PURE__ */ jsx("div", { className: styles.description, children })
       ] })
     ] }),
     infoText && /* @__PURE__ */ jsx(Container, { justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-button", children: /* @__PURE__ */ jsx(Button, { label: infoText, onClick: handleClick, disabled, fillWidth: true }) })

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/CardHorizontal/CardHorizontal.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { Badge } from '@/components/Badge';\nimport { Button } from '@/components/Button';\nimport { Container } from '@/components/Container';\nimport { Icon } from '@/components/Icon';\nimport {\n  CardHorizontalProps,\n  CardSize,\n  CardColor,\n  CardAlignment,\n} from './CardHorizontal.types';\n\nconst Header = styled.div`\n  max-width: 100%;\n  gap: inherit;\n`;\n\nconst Description = styled.div`\n  display: flex;\n  flex-direction: column;\n  align-self: start;\n  gap: ${({ theme }) => theme.click.card.horizontal.space.md.gap};\n  flex: 1;\n  width: 100%;\n`;\n\nconst Wrapper = styled.div<{\n  $hasShadow?: boolean;\n  $disabled?: boolean;\n  $isSelected?: boolean;\n  $isSelectable?: boolean;\n  $color: CardColor;\n  $size?: CardSize;\n  $alignment: CardAlignment;\n}>`\n  display: inline-flex;\n  width: 100%;\n  max-width: 100%;\n  align-items: ${({ $alignment }) => ($alignment === 'top' ? 'flex-start' : 'center')};\n  align-self: ${({ $alignment }) => ($alignment === 'top' ? 'stretch' : 'auto')};\n  justify-content: flex-start;\n\n  ${({ theme, $color, $size, $isSelected, $isSelectable, $disabled }) => `\n    background: ${theme.click.card.horizontal[$color].color.background.default};\n    color: ${theme.click.card.horizontal[$color].color.title.default};\n    border-radius: ${theme.click.card.horizontal.radii.all};\n    border: 1px solid ${\n      theme.click.card.horizontal[$color].color.stroke[\n        $isSelectable ? ($isSelected ? 'active' : 'hover') : 'default'\n      ]\n    };\n     padding: ${\n       $size === 'md'\n         ? `${theme.click.card.horizontal.space.md.y} ${theme.click.card.horizontal.space.md.x}`\n         : `${theme.click.card.horizontal.space.sm.y} ${theme.click.card.horizontal.space.sm.x}`\n     };\n    font: ${theme.click.card.horizontal.typography.title.default};\n    ${Description} {\n      color: ${theme.click.card.horizontal[$color].color.description.default};\n      font: ${theme.click.card.horizontal.typography.description.default};\n    }\n    &:hover{\n      background-color: ${\n        theme.click.card.horizontal[$color].color.background[\n          $isSelectable ? 'hover' : 'default'\n        ]\n      };\n      color: ${\n        theme.click.card.horizontal[$color].color.title[\n          $isSelectable ? 'hover' : 'default'\n        ]\n      };\n      border: 1px solid ${\n        theme.click.card.horizontal[$color].color.stroke[\n          $isSelectable ? ($isSelected ? 'active' : 'default') : 'default'\n        ]\n      };\n      cursor: ${$isSelectable ? 'pointer' : 'default'};\n      font: ${theme.click.card.horizontal.typography.title.hover};\n      ${Description} {\n        color: ${\n          theme.click.card.horizontal[$color].color.description[\n            $isSelectable ? 'hover' : 'default'\n          ]\n        };\n        font: ${\n          theme.click.card.horizontal.typography.description[\n            $isSelectable ? 'hover' : 'default'\n          ]\n        };\n      }\n    }\n\n    &:active, &:focus, &:focus-within {\n      background-color: ${\n        theme.click.card.horizontal[$color].color.background[\n          $isSelectable ? 'active' : 'default'\n        ]\n      };\n      color: ${\n        theme.click.card.horizontal[$color].color.title[\n          $isSelectable ? 'active' : 'default'\n        ]\n      };\n      border: 1px solid ${\n        theme.click.card.horizontal[$color].color.stroke[\n          $isSelectable ? 'active' : 'default'\n        ]\n      };\n      ${Description} {\n        color: ${\n          theme.click.card.horizontal[$color].color.description[\n            $isSelectable ? 'active' : 'default'\n          ]\n        };\n        font: ${\n          theme.click.card.horizontal.typography.description[\n            $isSelectable ? 'active' : 'default'\n          ]\n        };\n      }\n    }\n    ${\n      $disabled\n        ? `\n          pointer-events: none;\n          &,\n          &:hover,\n          &:active, &:focus, &:focus-within {\n            background-color: ${\n              theme.click.card.horizontal[$color].color.background.disabled\n            };\n            color: ${theme.click.card.horizontal[$color].color.title.disabled};\n            border: 1px solid ${\n              theme.click.card.horizontal[$color].color.stroke[\n                $isSelected ? 'active' : 'disabled'\n              ]\n            };\n            cursor: not-allowed;\n            ${Description} {\n              color: ${theme.click.card.horizontal[$color].color.description.disabled};\n              font: ${theme.click.card.horizontal.typography.description.disabled};\n            }\n          },\n          &:active, &:focus, &:focus-within {\n            border: 1px solid ${theme.click.card.horizontal[$color].color.stroke.active};\n          }\n        `\n        : ''\n    }\n  `}\n`;\n\nconst CardIcon = styled(Icon)`\n  ${({ theme }) => `\n      height: ${theme.click.card.horizontal.icon.size.all};\n      width: ${theme.click.card.horizontal.icon.size.all};\n  `}\n`;\n\nconst ContentWrapper = styled.div<{ $size: CardSize }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  gap: ${({ theme, $size }) =>\n    $size === 'md'\n      ? theme.click.card.horizontal.space.md.gap\n      : theme.click.card.horizontal.space.sm.gap};\n\n  @media (max-width: ${({ theme }) => theme.breakpoint.sizes.md}) {\n    flex-direction: column;\n  }\n`;\n\nconst IconTextContentWrapper = styled.div<{ $size: CardSize; $alignment: CardAlignment }>`\n  display: flex;\n  flex-direction: row;\n  align-items: ${({ $alignment }) => ($alignment === 'top' ? 'flex-start' : 'center')};\n  width: 100%;\n  gap: ${({ theme, $size }) =>\n    $size === 'md'\n      ? theme.click.card.horizontal.space.md.gap\n      : theme.click.card.horizontal.space.sm.gap};\n`;\n\nexport const CardHorizontal = ({\n  title,\n  icon,\n  description,\n  disabled = false,\n  infoText,\n  infoUrl,\n  isSelected,\n  isSelectable = infoText ? false : true,\n  children,\n  color = 'default',\n  size = 'md',\n  alignment = 'center',\n  badgeText,\n  badgeState,\n  badgeIcon,\n  badgeIconDir,\n  onButtonClick,\n  ...props\n}: CardHorizontalProps) => {\n  const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (typeof onButtonClick === 'function') {\n      onButtonClick(e);\n    }\n    if (infoUrl && infoUrl.length > 0) {\n      window.open(infoUrl, '_blank');\n    }\n  };\n  return (\n    <Wrapper\n      $disabled={disabled}\n      $isSelected={isSelected}\n      $isSelectable={isSelectable}\n      $color={color}\n      $size={size}\n      $alignment={alignment}\n      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled}\n      onClick={handleClick}\n      {...props}\n    >\n      <ContentWrapper $size={size}>\n        <IconTextContentWrapper\n          $size={size}\n          $alignment={alignment}\n        >\n          {icon && (\n            <CardIcon\n              name={icon}\n              aria-hidden\n            />\n          )}\n          <Container\n            padding=\"none\"\n            orientation=\"vertical\"\n          >\n            {title && (\n              <Header\n                as={Container}\n                isResponsive={false}\n                gap=\"xs\"\n                justifyContent=\"space-between\"\n                fillWidth\n              >\n                <Container\n                  orientation=\"horizontal\"\n                  gap=\"xs\"\n                  isResponsive={false}\n                  fillWidth={false}\n                  grow=\"1\"\n                >\n                  {title}\n                </Container>\n                {badgeText && (\n                  <Container\n                    isResponsive={false}\n                    justifyContent=\"end\"\n                    fillWidth={false}\n                    data-testid=\"horizontal-card-badge\"\n                  >\n                    <Badge\n                      text={badgeText}\n                      size=\"md\"\n                      state={badgeState}\n                      icon={badgeIcon}\n                      iconDir={badgeIconDir}\n                    />\n                  </Container>\n                )}\n              </Header>\n            )}\n\n            {description && <Description>{description}</Description>}\n            {children && <Description>{children}</Description>}\n          </Container>\n        </IconTextContentWrapper>\n        {infoText && (\n          <Container\n            justifyContent=\"end\"\n            fillWidth={false}\n            data-testid=\"horizontal-card-button\"\n          >\n            <Button\n              label={infoText}\n              onClick={handleClick}\n              disabled={disabled}\n              fillWidth\n            />\n          </Container>\n        )}\n      </ContentWrapper>\n    </Wrapper>\n  );\n};\n"],"names":["Header","styled","div","withConfig","componentId","Description","theme","click","card","horizontal","space","md","gap","Wrapper","$alignment","$color","$size","$isSelected","$isSelectable","$disabled","color","background","default","title","radii","all","stroke","y","x","sm","typography","description","hover","disabled","active","CardIcon","Icon","icon","size","ContentWrapper","breakpoint","sizes","IconTextContentWrapper","CardHorizontal","infoText","infoUrl","isSelected","isSelectable","children","alignment","badgeText","badgeState","badgeIcon","badgeIconDir","onButtonClick","props","handleClick","e","preventDefault","length","window","open","Container"],"mappings":";;;;;;;AAYA,MAAMA,MAAAA,GAASC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,6BAAA,CAAA,CAAA;AAKzB,MAAMC,WAAAA,GAAcJ,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,0DAAA,EAAA,qBAAA,GAIrB,CAAC;AAAA,EAAEE;AAAM,CAAA,KAAMA,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWC,KAAAA,CAAMC,GAAGC,GAAG,CAAA;AAKhE,MAAMC,OAAAA,GAAUZ,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,4DAAA,EAAA,gBAAA,8BAAA,EAAA,EAAA,GAYT,CAAC;AAAA,EAAEU;AAAW,CAAA,KAAOA,UAAAA,KAAe,KAAA,GAAQ,YAAA,GAAe,QAAA,EAC5D,CAAC;AAAA,EAAEA;AAAW,CAAA,KAAOA,UAAAA,KAAe,KAAA,GAAQ,SAAA,GAAY,MAAA,EAGpE,CAAC;AAAA,EAAER,KAAAA;AAAAA,EAAOS,MAAAA;AAAAA,EAAQC,KAAAA;AAAAA,EAAOC,WAAAA;AAAAA,EAAaC,aAAAA;AAAAA,EAAeC;AAAU,CAAA,KAAM;AAAA,gBAAA,EACvDb,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMC,WAAWC,OAAO,CAAA;AAAA,WAAA,EACjEhB,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMG,MAAMD,OAAO,CAAA;AAAA,mBAAA,EAC/ChB,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWe,MAAMC,GAAG,CAAA;AAAA,sBAAA,EAEpDnB,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMM,MAAAA,CACxCR,aAAAA,GAAiBD,WAAAA,GAAc,QAAA,GAAW,OAAA,GAAW,SAAS,CAC/D,CAAA;AAAA,cAAA,EAGAD,KAAAA,KAAU,IAAA,GACN,CAAA,EAAGV,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,UAAAA,CAAWC,KAAAA,CAAMC,EAAAA,CAAGgB,CAAC,CAAA,CAAA,EAAIrB,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,WAAWC,KAAAA,CAAMC,EAAAA,CAAGiB,CAAC,CAAA,CAAA,GACnF,GAAGtB,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWC,MAAMmB,EAAAA,CAAGF,CAAC,CAAA,CAAA,EAAIrB,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,UAAAA,CAAWC,KAAAA,CAAMmB,EAAAA,CAAGD,CAAC,CAAA,CAAE,CAAA;AAAA,UAAA,EAEpFtB,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWqB,UAAAA,CAAWP,MAAMD,OAAO,CAAA;AAAA,IAAA,EAC1DjB,WAAW,CAAA;AAAA,aAAA,EACFC,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMW,YAAYT,OAAO,CAAA;AAAA,YAAA,EAC9DhB,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWqB,UAAAA,CAAWC,YAAYT,OAAO,CAAA;AAAA;AAAA;AAAA,wBAAA,EAIhEhB,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMC,UAAAA,CACxCH,aAAAA,GAAgB,OAAA,GAAU,SAAS,CACpC,CAAA;AAAA,aAAA,EAGDZ,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMG,KAAAA,CACxCL,aAAAA,GAAgB,OAAA,GAAU,SAAS,CACpC,CAAA;AAAA,wBAAA,EAGDZ,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMM,MAAAA,CACxCR,aAAAA,GAAiBD,WAAAA,GAAc,QAAA,GAAW,SAAA,GAAa,SAAS,CACjE,CAAA;AAAA,cAAA,EAEOC,aAAAA,GAAgB,YAAY,SAAS,CAAA;AAAA,YAAA,EACvCZ,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWqB,UAAAA,CAAWP,MAAMS,KAAK,CAAA;AAAA,MAAA,EACxD3B,WAAW,CAAA;AAAA,eAAA,EAETC,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMW,WAAAA,CACxCb,aAAAA,GAAgB,OAAA,GAAU,SAAS,CACpC,CAAA;AAAA,cAAA,EAGDZ,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,UAAAA,CAAWqB,WAAWC,WAAAA,CACrCb,aAAAA,GAAgB,OAAA,GAAU,SAAS,CACpC,CAAA;AAAA;AAAA;;AAAA;AAAA,wBAAA,EAOHZ,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMC,UAAAA,CACxCH,aAAAA,GAAgB,QAAA,GAAW,SAAS,CACrC,CAAA;AAAA,aAAA,EAGDZ,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMG,KAAAA,CACxCL,aAAAA,GAAgB,QAAA,GAAW,SAAS,CACrC,CAAA;AAAA,wBAAA,EAGDZ,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMM,MAAAA,CACxCR,aAAAA,GAAgB,QAAA,GAAW,SAAS,CACrC,CAAA;AAAA,MAAA,EAEDb,WAAW,CAAA;AAAA,eAAA,EAETC,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMW,WAAAA,CACxCb,aAAAA,GAAgB,QAAA,GAAW,SAAS,CACrC,CAAA;AAAA,cAAA,EAGDZ,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,UAAAA,CAAWqB,WAAWC,WAAAA,CACrCb,aAAAA,GAAgB,QAAA,GAAW,SAAS,CACrC,CAAA;AAAA;AAAA;AAAA,IAAA,EAKLC,SAAAA,GACI;AAAA;AAAA;AAAA;AAAA;AAAA,8BAAA,EAMIb,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMC,WAAWY,QAAQ,CAAA;AAAA,mBAAA,EAEtD3B,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMG,MAAMU,QAAQ,CAAA;AAAA,8BAAA,EAE/D3B,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMM,MAAAA,CACxCT,WAAAA,GAAc,QAAA,GAAW,UAAU,CACpC,CAAA;AAAA;AAAA,YAAA,EAGDZ,WAAW,CAAA;AAAA,qBAAA,EACFC,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMW,YAAYE,QAAQ,CAAA;AAAA,oBAAA,EAC/D3B,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWqB,UAAAA,CAAWC,YAAYE,QAAQ,CAAA;AAAA;AAAA;AAAA;AAAA,8BAAA,EAIjD3B,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,UAAAA,CAAWM,MAAM,CAAA,CAAEK,KAAAA,CAAMM,OAAOQ,MAAM,CAAA;AAAA;AAAA,QAAA,CAAA,GAG7E,EAAE;AAAA,EAAA,CAET,CAAA;AAGH,MAAMC,QAAAA,GAAWlC,MAAAA,CAAOmC,QAAI,CAAA,CAACjC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GACzB,CAAC;AAAA,EAAEE;AAAM,CAAA,KAAM;AAAA,cAAA,EACHA,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAW4B,IAAAA,CAAKC,KAAKb,GAAG,CAAA;AAAA,aAAA,EAC1CnB,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAW4B,IAAAA,CAAKC,KAAKb,GAAG,CAAA;AAAA,EAAA,CACrD,CAAA;AAGH,MAAMc,cAAAA,GAAiBtC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,iDAAA,EAAA,qBAAA,EAAA,2BAAA,GAIxB,CAAC;AAAA,EAAEE,KAAAA;AAAAA,EAAOU;AAAM,CAAA,KACrBA,UAAU,IAAA,GACNV,KAAAA,CAAMC,KAAAA,CAAMC,IAAAA,CAAKC,WAAWC,KAAAA,CAAMC,EAAAA,CAAGC,GAAAA,GACrCN,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,UAAAA,CAAWC,KAAAA,CAAMmB,EAAAA,CAAGjB,KAEtB,CAAC;AAAA,EAAEN;AAAM,CAAA,KAAMA,KAAAA,CAAMkC,UAAAA,CAAWC,KAAAA,CAAM9B,EAAE,CAAA;AAK/D,MAAM+B,sBAAAA,GAAyBzC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,EAAA,CAAA,8CAAA,EAAA,kBAAA,EAAA,GAAA,GAGxB,CAAC;AAAA,EAAEU;AAAW,CAAA,KAAOA,UAAAA,KAAe,KAAA,GAAQ,YAAA,GAAe,QAAA,EAEnE,CAAC;AAAA,EAAER,KAAAA;AAAAA,EAAOU;AAAM,CAAA,KACrBA,KAAAA,KAAU,IAAA,GACNV,KAAAA,CAAMC,KAAAA,CAAMC,KAAKC,UAAAA,CAAWC,KAAAA,CAAMC,EAAAA,CAAGC,GAAAA,GACrCN,MAAMC,KAAAA,CAAMC,IAAAA,CAAKC,UAAAA,CAAWC,KAAAA,CAAMmB,GAAGjB,GAAG,CAAA;AAGzC,MAAM+B,iBAAiBA,CAAC;AAAA,EAC7BpB,KAAAA;AAAAA,EACAc,IAAAA;AAAAA,EACAN,WAAAA;AAAAA,EACAE,QAAAA,GAAW,KAAA;AAAA,EACXW,QAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,YAAAA,GAAeH,WAAW,KAAA,GAAQ,IAAA;AAAA,EAClCI,QAAAA;AAAAA,EACA5B,KAAAA,GAAQ,SAAA;AAAA,EACRkB,IAAAA,GAAO,IAAA;AAAA,EACPW,SAAAA,GAAY,QAAA;AAAA,EACZC,SAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,YAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACA,GAAGC;AACgB,CAAA,KAAM;AACzB,EAAA,MAAMC,WAAAA,GAAcA,CAACC,CAAAA,KAAqC;AACxD,IAAA,IAAIxB,QAAAA,EAAU;AACZwB,MAAAA,CAAAA,CAAEC,cAAAA,EAAe;AACjB,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,OAAOJ,kBAAkB,UAAA,EAAY;AACvCA,MAAAA,aAAAA,CAAcG,CAAC,CAAA;AAAA,IACjB;AACA,IAAA,IAAIZ,OAAAA,IAAWA,OAAAA,CAAQc,MAAAA,GAAS,CAAA,EAAG;AACjCC,MAAAA,MAAAA,CAAOC,IAAAA,CAAKhB,SAAS,QAAQ,CAAA;AAAA,IAC/B;AAAA,EACF,CAAA;AACA,EAAA,uBACE,GAAA,CAAC,OAAA,EAAA,EACC,SAAA,EAAWZ,QAAAA,EACX,WAAA,EAAaa,UAAAA,EACb,aAAA,EAAeC,YAAAA,EACf,MAAA,EAAQ3B,KAAAA,EACR,KAAA,EAAOkB,IAAAA,EACP,UAAA,EAAYW,SAAAA,EACZ,QAAA,EAAUhB,QAAAA,GAAW,EAAA,GAAK,CAAA,EAC1B,eAAA,EAAeA,QAAAA,EACf,OAAA,EAASuB,WAAAA,EACT,GAAID,KAAAA,EAEJ,QAAA,kBAAA,IAAA,CAAC,cAAA,EAAA,EAAe,KAAA,EAAOjB,IAAAA,EACrB,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,sBAAA,EAAA,EACC,KAAA,EAAOA,IAAAA,EACP,UAAA,EAAYW,SAAAA,EAEXZ,QAAAA,EAAAA;AAAAA,MAAAA,IAAAA,oBACC,GAAA,CAAC,QAAA,EAAA,EACC,IAAA,EAAMA,IAAAA,EACN,eAAW,IAAA,EAAA,CAAA;AAAA,sBAGf,IAAA,CAAC,SAAA,EAAA,EACC,OAAA,EAAQ,MAAA,EACR,aAAY,UAAA,EAEXd,QAAAA,EAAAA;AAAAA,QAAAA,KAAAA,oBACC,IAAA,CAAC,MAAA,EAAA,EACC,EAAA,EAAIuC,SAAAA,EACJ,YAAA,EAAc,KAAA,EACd,GAAA,EAAI,IAAA,EACJ,cAAA,EAAe,eAAA,EACf,SAAA,EAAS,IAAA,EAET,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,SAAA,EAAA,EACC,WAAA,EAAY,YAAA,EACZ,GAAA,EAAI,IAAA,EACJ,YAAA,EAAc,KAAA,EACd,SAAA,EAAW,KAAA,EACX,IAAA,EAAK,GAAA,EAEJvC,QAAAA,EAAAA,KAAAA,EACH,CAAA;AAAA,UACC2B,SAAAA,wBACE,SAAA,EAAA,EACC,YAAA,EAAc,OACd,cAAA,EAAe,KAAA,EACf,SAAA,EAAW,KAAA,EACX,aAAA,EAAY,uBAAA,EAEZ,8BAAC,KAAA,EAAA,EACC,IAAA,EAAMA,SAAAA,EACN,IAAA,EAAK,IAAA,EACL,KAAA,EAAOC,YACP,IAAA,EAAMC,SAAAA,EACN,OAAA,EAASC,YAAAA,EAAa,CAAA,EAE1B;AAAA,SAAA,EAEJ,CAAA;AAAA,QAGDtB,WAAAA,oBAAe,GAAA,CAAC,WAAA,EAAA,EAAaA,QAAAA,EAAAA,WAAAA,EAAY,CAAA;AAAA,QACzCiB,QAAAA,oBAAY,GAAA,CAAC,WAAA,EAAA,EAAaA,QAAAA,EAAS;AAAA,OAAA,EACtC;AAAA,KAAA,EACF,CAAA;AAAA,IACCJ,4BACC,GAAA,CAAC,SAAA,EAAA,EACC,gBAAe,KAAA,EACf,SAAA,EAAW,OACX,aAAA,EAAY,wBAAA,EAEZ,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EACC,OAAOA,QAAAA,EACP,OAAA,EAASY,aACT,QAAA,EACA,SAAA,EAAS,MAAA,CAAA,EAEb;AAAA,GAAA,EAEJ,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/CardHorizontal/CardHorizontal.tsx"],"sourcesContent":["import { Badge } from '@/components/Badge';\nimport { Button } from '@/components/Button';\nimport { Container } from '@/components/Container';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { CardHorizontalProps } from './CardHorizontal.types';\nimport styles from './CardHorizontal.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    color: {\n      default: styles['wrapper_color_default'],\n      muted: styles['wrapper_color_muted'],\n    },\n    size: {\n      sm: styles['wrapper_size_sm'],\n      md: styles['wrapper_size_md'],\n    },\n    alignment: {\n      center: styles['wrapper_alignment_center'],\n      top: styles['wrapper_alignment_top'],\n    },\n    selectable: {\n      true: styles['wrapper_selectable'],\n    },\n    selected: {\n      true: styles['wrapper_selected'],\n    },\n    disabled: {\n      true: styles['wrapper_disabled'],\n    },\n  },\n  defaultVariants: {\n    color: 'default',\n    size: 'md',\n    alignment: 'center',\n  },\n});\n\nconst contentWrapperVariants = cva(styles.contentwrapper, {\n  variants: {\n    size: {\n      sm: styles['contentwrapper_size_sm'],\n      md: styles['contentwrapper_size_md'],\n    },\n  },\n  defaultVariants: { size: 'md' },\n});\n\nconst iconTextContentWrapperVariants = cva(styles.icontextcontentwrapper, {\n  variants: {\n    size: {\n      sm: styles['icontextcontentwrapper_size_sm'],\n      md: styles['icontextcontentwrapper_size_md'],\n    },\n    alignment: {\n      center: styles['icontextcontentwrapper_alignment_center'],\n      top: styles['icontextcontentwrapper_alignment_top'],\n    },\n  },\n  defaultVariants: { size: 'md', alignment: 'center' },\n});\n\nexport const CardHorizontal = ({\n  title,\n  icon,\n  description,\n  disabled = false,\n  infoText,\n  infoUrl,\n  isSelected,\n  isSelectable = infoText ? false : true,\n  children,\n  color = 'default',\n  size = 'md',\n  alignment = 'center',\n  badgeText,\n  badgeState,\n  badgeIcon,\n  badgeIconDir,\n  onButtonClick,\n  className,\n  ...props\n}: CardHorizontalProps) => {\n  const handleClick = (e: React.MouseEvent<HTMLElement>) => {\n    if (disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (typeof onButtonClick === 'function') {\n      onButtonClick(e);\n    }\n    if (infoUrl && infoUrl.length > 0) {\n      window.open(infoUrl, '_blank');\n    }\n  };\n  return (\n    <div\n      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled}\n      onClick={handleClick}\n      {...props}\n      className={cn(\n        wrapperVariants({\n          color,\n          size,\n          alignment,\n          selectable: isSelectable,\n          selected: isSelected,\n          disabled,\n        }),\n        className\n      )}\n    >\n      <div className={cn(contentWrapperVariants({ size }))}>\n        <div className={cn(iconTextContentWrapperVariants({ size, alignment }))}>\n          {icon && (\n            <Icon\n              name={icon}\n              aria-hidden\n              className={styles.cardicon}\n            />\n          )}\n          <Container\n            padding=\"none\"\n            orientation=\"vertical\"\n          >\n            {title && (\n              <Container\n                className={styles.header}\n                isResponsive={false}\n                gap=\"xs\"\n                justifyContent=\"space-between\"\n                fillWidth\n              >\n                <Container\n                  orientation=\"horizontal\"\n                  gap=\"xs\"\n                  isResponsive={false}\n                  fillWidth={false}\n                  grow=\"1\"\n                >\n                  {title}\n                </Container>\n                {badgeText && (\n                  <Container\n                    isResponsive={false}\n                    justifyContent=\"end\"\n                    fillWidth={false}\n                    data-testid=\"horizontal-card-badge\"\n                  >\n                    <Badge\n                      text={badgeText}\n                      size=\"md\"\n                      state={badgeState}\n                      icon={badgeIcon}\n                      iconDir={badgeIconDir}\n                    />\n                  </Container>\n                )}\n              </Container>\n            )}\n\n            {description && <div className={styles.description}>{description}</div>}\n            {children && <div className={styles.description}>{children}</div>}\n          </Container>\n        </div>\n        {infoText && (\n          <Container\n            justifyContent=\"end\"\n            fillWidth={false}\n            data-testid=\"horizontal-card-button\"\n          >\n            <Button\n              label={infoText}\n              onClick={handleClick}\n              disabled={disabled}\n              fillWidth\n            />\n          </Container>\n        )}\n      </div>\n    </div>\n  );\n};\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","color","default","muted","size","sm","md","alignment","center","top","selectable","true","selected","disabled","defaultVariants","contentWrapperVariants","contentwrapper","iconTextContentWrapperVariants","icontextcontentwrapper","CardHorizontal","title","icon","description","infoText","infoUrl","isSelected","isSelectable","children","badgeText","badgeState","badgeIcon","badgeIconDir","onButtonClick","className","props","handleClick","e","preventDefault","length","window","open","cn","Icon","cardicon","header"],"mappings":"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"}

package/dist/esm/components/CardPrimary/CardPrimary.css

@@ -0,0 +1,182 @@
+.wrapper__zCfLE {
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  flex-direction: column;
+  border: 1px solid var(--click-card-primary-color-stroke-default);
+  border-radius: var(--click-card-primary-radii-all);
+  background-color: var(--click-card-primary-color-background-default);
+  text-align: center;
+}
+
+.wrapper_align_start__37pdg {
+  text-align: left;
+}
+
+.wrapper_align_center__37eoU {
+  text-align: center;
+}
+
+.wrapper_align_end__xbC8w {
+  text-align: right;
+}
+
+.wrapper_size_md__tu4Nx {
+  padding: var(--click-card-primary-space-md-x) var(--click-card-primary-space-md-y);
+  gap: var(--click-card-primary-space-md-gap);
+}
+
+.wrapper_size_sm__8H2nS {
+  padding: var(--click-card-primary-space-sm-x) var(--click-card-primary-space-sm-y);
+  gap: var(--click-card-primary-space-sm-gap);
+}
+
+.wrapper_shadow__6Yg0s {
+  box-shadow: var(--shadow-1);
+}
+
+.wrapper_selected__eO9y0 {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+}
+
+.wrapper__zCfLE:hover,
+.wrapper__zCfLE:focus {
+  background-color: var(--click-card-secondary-color-background-hover);
+  cursor: pointer;
+}
+
+.wrapper__zCfLE:hover button,
+.wrapper__zCfLE:focus button {
+  border-color: var(--click-button-basic-color-primary-stroke-hover);
+  background-color: var(--click-button-basic-color-primary-background-hover);
+}
+
+.wrapper__zCfLE:hover button:active,
+.wrapper__zCfLE:focus button:active {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+  background-color: var(--click-button-basic-color-primary-background-active);
+}
+
+.wrapper__zCfLE:active {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+}
+
+/* stylelint-disable no-descending-specificity -- disabled state intentionally
+   defined after hover/active to mirror the source cascade order;
+   pointer-events:none prevents the hover/active rules from applying when disabled. */
+.wrapper__zCfLE[aria-disabled='true'],
+.wrapper__zCfLE[aria-disabled='true']:hover,
+.wrapper__zCfLE[aria-disabled='true']:focus,
+.wrapper__zCfLE[aria-disabled='true']:active {
+  border: 1px solid var(--click-card-primary-color-stroke-disabled);
+  background-color: var(--click-card-primary-color-background-disabled);
+  color: var(--click-card-primary-color-title-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.wrapper__zCfLE[aria-disabled='true'] button,
+.wrapper__zCfLE[aria-disabled='true']:hover button,
+.wrapper__zCfLE[aria-disabled='true']:focus button,
+.wrapper__zCfLE[aria-disabled='true']:active button,
+.wrapper__zCfLE[aria-disabled='true'] button:active,
+.wrapper__zCfLE[aria-disabled='true']:hover button:active,
+.wrapper__zCfLE[aria-disabled='true']:focus button:active,
+.wrapper__zCfLE[aria-disabled='true']:active button:active {
+  border-color: var(--click-button-basic-color-primary-stroke-disabled);
+  background-color: var(--click-button-basic-color-primary-background-disabled);
+}
+/* stylelint-enable no-descending-specificity */
+
+.header__8rODG {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.header_align_start__M1I-O {
+  align-items: flex-start;
+}
+
+.header_align_center__BztmN {
+  align-items: center;
+}
+
+.header_align_end__3XI7U {
+  align-items: flex-end;
+}
+
+.header_size_md__VoWrw {
+  gap: var(--click-card-primary-space-md-gap);
+}
+
+.header__8rODG.header_size_md__VoWrw svg,
+.header__8rODG.header_size_md__VoWrw img {
+  width: var(--click-card-primary-size-icon-md-all);
+  height: var(--click-card-primary-size-icon-md-all);
+}
+
+.header_size_sm__voZ7g {
+  gap: var(--click-card-primary-space-sm-gap);
+}
+
+.header__8rODG.header_size_sm__voZ7g svg,
+.header__8rODG.header_size_sm__voZ7g img {
+  width: var(--click-card-primary-size-icon-sm-all);
+  height: var(--click-card-primary-size-icon-sm-all);
+}
+
+.header__8rODG.header__8rODG h3 {
+  color: var(--click-global-color-text-default);
+}
+
+.header__8rODG.header_disabled__SJxQn h3 {
+  color: var(--click-global-color-text-muted);
+}
+
+.content__zhXwY {
+  display: flex;
+  width: 100%;
+  flex: 1;
+  flex-direction: column;
+  align-self: center;
+}
+
+.content_align_start__T730K {
+  align-self: flex-start;
+}
+
+.content_align_center__zIpiO {
+  align-self: center;
+}
+
+.content_align_end__L62bf {
+  align-self: flex-end;
+}
+
+.content_size_md__MrRdD {
+  gap: var(--click-card-primary-space-md-gap);
+}
+
+.content_size_sm__fy4p3 {
+  gap: var(--click-card-primary-space-sm-gap);
+}
+
+.topbadgewrapper__uA9pl {
+  position: relative;
+}
+
+.topbadge__E79OZ {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.topbadge_selected__zrz5r {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+}
+
+div:active + .topbadge__E79OZ {
+  border-color: var(--click-button-basic-color-primary-stroke-active);
+}

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

@@ -0,0 +1,53 @@
+const wrapper = "wrapper__zCfLE";
+const wrapper_align_start = "wrapper_align_start__37pdg";
+const wrapper_align_center = "wrapper_align_center__37eoU";
+const wrapper_align_end = "wrapper_align_end__xbC8w";
+const wrapper_size_md = "wrapper_size_md__tu4Nx";
+const wrapper_size_sm = "wrapper_size_sm__8H2nS";
+const wrapper_shadow = "wrapper_shadow__6Yg0s";
+const wrapper_selected = "wrapper_selected__eO9y0";
+const header = "header__8rODG";
+const header_align_start = "header_align_start__M1I-O";
+const header_align_center = "header_align_center__BztmN";
+const header_align_end = "header_align_end__3XI7U";
+const header_size_md = "header_size_md__VoWrw";
+const header_size_sm = "header_size_sm__voZ7g";
+const header_disabled = "header_disabled__SJxQn";
+const content = "content__zhXwY";
+const content_align_start = "content_align_start__T730K";
+const content_align_center = "content_align_center__zIpiO";
+const content_align_end = "content_align_end__L62bf";
+const content_size_md = "content_size_md__MrRdD";
+const content_size_sm = "content_size_sm__fy4p3";
+const topbadgewrapper = "topbadgewrapper__uA9pl";
+const topbadge = "topbadge__E79OZ";
+const topbadge_selected = "topbadge_selected__zrz5r";
+const styles = {
+	wrapper: wrapper,
+	wrapper_align_start: wrapper_align_start,
+	wrapper_align_center: wrapper_align_center,
+	wrapper_align_end: wrapper_align_end,
+	wrapper_size_md: wrapper_size_md,
+	wrapper_size_sm: wrapper_size_sm,
+	wrapper_shadow: wrapper_shadow,
+	wrapper_selected: wrapper_selected,
+	header: header,
+	header_align_start: header_align_start,
+	header_align_center: header_align_center,
+	header_align_end: header_align_end,
+	header_size_md: header_size_md,
+	header_size_sm: header_size_sm,
+	header_disabled: header_disabled,
+	content: content,
+	content_align_start: content_align_start,
+	content_align_center: content_align_center,
+	content_align_end: content_align_end,
+	content_size_md: content_size_md,
+	content_size_sm: content_size_sm,
+	topbadgewrapper: topbadgewrapper,
+	topbadge: topbadge,
+	topbadge_selected: topbadge_selected
+};
+
+export { content, content_align_center, content_align_end, content_align_start, content_size_md, content_size_sm, styles as default, header, header_align_center, header_align_end, header_align_start, header_disabled, header_size_md, header_size_sm, topbadge, topbadge_selected, topbadgewrapper, wrapper, wrapper_align_center, wrapper_align_end, wrapper_align_start, wrapper_selected, wrapper_shadow, wrapper_size_md, wrapper_size_sm };
+//# sourceMappingURL=CardPrimary.module.css.js.map

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

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

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

@@ -1,18 +1,18 @@
-import { styled } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/cva.js';
+import styles from './CardPrimary.module.css.js';
 import { Container } from '../Container/index.js';
 import { Badge } from '../Badge/index.js';
 
-const TopBadgeWrapper = styled(Container).withConfig({
-  componentId: "sc-1d5pqpo-0"
-})(["position:relative;"]);
-const CardPrimaryTopBadge = styled(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__ */ 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 });
 
 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 } 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,MAAAA,CAAOC,SAAS,CAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,oBAAA,CAAA;AAIzC,MAAMC,mBAAAA,GAAsBJ,MAAAA,CAAOK,KAAK,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.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;;;;"}