@punkbit/cui 0.0.248-rc.1 → 0.2.0-rc.3

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\nimport { styled } from 'styled-components';\nimport { ButtonGroupProps, SelectionValue } from './ButtonGroup.types';\n\nconst normalizeToSet = (value: SelectionValue | undefined): Set<string> => {\n  if (value === undefined) {\n    return new Set();\n  }\n  if (value instanceof Set) {\n    return new Set(value);\n  }\n  return new Set([value]);\n};\n\nconst isValueSelected = (value: string, selection: Set<string>): boolean => {\n  return selection.has(value);\n};\n\nexport const ButtonGroup = ({\n  options,\n  selected,\n  defaultSelected,\n  fillWidth = false,\n  onClick,\n  type = 'default',\n  multiple = false,\n  ...props\n}: ButtonGroupProps) => {\n  const [internalSelection, setInternalSelection] = useState<Set<string>>(() =>\n    normalizeToSet(defaultSelected)\n  );\n\n  // Use `selected` if the parent needs to own\n  // or sync the selection state management (controlled\n  // by consumer app)\n  // Use `defaultSelected` if the component can manage\n  // its own state independently (uncontrolled)\n  const isControlled = selected !== undefined;\n  const currentSelection = isControlled ? normalizeToSet(selected) : internalSelection;\n\n  const onButtonGroupClickCommonHandler = useCallback(\n    (value: string) => {\n      let newSelection: Set<string>;\n\n      if (multiple) {\n        newSelection = new Set(currentSelection);\n        if (newSelection.has(value)) {\n          newSelection.delete(value);\n        } else {\n          newSelection.add(value);\n        }\n      } else {\n        newSelection = new Set([value]);\n      }\n\n      if (!isControlled) {\n        setInternalSelection(newSelection);\n      }\n\n      // WARN: Single mode returns string\n      // while multiple mode returns Set (DS)\n      onClick?.(value, multiple ? newSelection : value);\n    },\n    [currentSelection, multiple, isControlled, onClick]\n  );\n\n  const buttons = options.map(({ value, label, ...buttonProps }) => {\n    const isActive = isValueSelected(value, currentSelection);\n\n    return (\n      <Button\n        key={value}\n        $active={isActive}\n        aria-pressed={isActive}\n        $fillWidth={fillWidth}\n        $type={type}\n        onClick={() => onButtonGroupClickCommonHandler(value)}\n        role=\"button\"\n        {...buttonProps}\n      >\n        {label}\n      </Button>\n    );\n  });\n\n  return (\n    <ButtonGroupWrapper\n      {...props}\n      $fillWidth={fillWidth}\n      $type={type}\n      role=\"group\"\n    >\n      {buttons}\n    </ButtonGroupWrapper>\n  );\n};\n\nimport { ButtonGroupType } from './ButtonGroup.types';\n\nconst ButtonGroupWrapper = styled.div<{ $fillWidth: boolean; $type: ButtonGroupType }>`\n  display: inline-flex;\n  box-sizing: border-box;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  padding: ${({ theme, $type }) =>\n    `${theme.click.button.group.space.panel[$type].x} ${theme.click.button.group.space.panel[$type].y}`};\n  gap: ${({ theme, $type }) => theme.click.button.group.space.panel[$type].gap};\n  border: ${({ theme, $type }) =>\n    $type === 'default'\n      ? `1px solid ${theme.click.button.group.color.panel.stroke[$type]}`\n      : 'none'};\n  background: ${({ theme }) => theme.click.button.group.color.background.panel};\n  border-radius: ${({ theme }) => theme.click.button.group.radii.panel.all};\n  width: ${({ $fillWidth }) => ($fillWidth ? '100%' : 'auto')};\n`;\n\nconst Button = styled.button<{\n  $active: boolean;\n  $fillWidth: boolean;\n  $type: ButtonGroupType;\n}>`\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  background: ${({ $active, theme }) =>\n    $active\n      ? theme.click.button.group.color.background.active\n      : theme.click.button.group.color.background.default};\n  color: ${({ theme }) => theme.click.button.group.color.text.default};\n  font: ${({ theme }) => theme.click.button.group.typography.label.default};\n  padding: ${({ theme, $type }) =>\n    `${theme.click.button.group.space.button[$type].y} ${theme.click.button.group.space.button[$type].x}`};\n  ${({ $fillWidth }) => ($fillWidth ? 'flex: 1;' : '')};\n  border-radius: ${({ theme, $type }) =>\n    theme.click.button.group.radii.button[$type].all};\n  cursor: pointer;\n  border: none;\n\n  &[aria-pressed='true'] {\n    background: ${({ theme }) => theme.click.button.group.color.background.active};\n    font: ${({ theme }) => theme.click.button.group.typography.label.active};\n    color: ${({ theme }) => theme.click.button.group.color.text.active};\n  }\n\n  &:hover {\n    background: ${({ theme }) => theme.click.button.group.color.background.hover};\n    font: ${({ theme }) => theme.click.button.group.typography.label.hover};\n    color: ${({ theme }) => theme.click.button.group.color.text.hover};\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    font: ${({ theme }) => theme.click.button.group.typography.label.disabled};\n    color: ${({ theme }) => theme.click.button.group.color.text.disabled};\n    background: ${({ theme, $active }) =>\n      theme.click.button.group.color.background[\n        $active ? 'disabled-active' : 'disabled'\n      ]};\n\n    &:active,\n    &:focus,\n    &[aria-pressed='true'] {\n      color: ${({ theme }) => theme.click.button.group.color.text.disabled};\n    }\n  }\n\n  &[aria-pressed='true'] {\n    background: ${({ theme }) => theme.click.button.group.color.background.active};\n    font: ${({ theme }) => theme.click.button.group.typography.label.active};\n    color: ${({ theme }) => theme.click.button.group.color.text.active};\n    &:disabled {\n      background: ${({ theme }) =>\n        theme.click.button.group.color.background['disabled-active']};\n    }\n  }\n`;\n"],"names":["normalizeToSet","value","undefined","Set","isValueSelected","selection","has","ButtonGroup","options","selected","defaultSelected","fillWidth","onClick","type","multiple","props","internalSelection","setInternalSelection","useState","isControlled","currentSelection","onButtonGroupClickCommonHandler","useCallback","newSelection","delete","add","buttons","map","label","buttonProps","isActive","jsx","ButtonGroupWrapper","styled","div","withConfig","componentId","theme","$type","click","button","group","space","panel","x","y","gap","color","stroke","background","radii","all","$fillWidth","Button","$active","active","default","text","typography","hover","disabled"],"mappings":"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"}

package/dist/cjs/components/CardHorizontal/index.cjs

@@ -0,0 +1,150 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const styledComponents = require('styled-components');
+const Container = require('../Container/index.cjs');
+const Badge = require('../Badge/index.cjs');
+const Button = require('../Button/index.cjs');
+const Icon = require('../Icon/index.cjs');
+
+const Header = styledComponents.styled.div.withConfig({
+  componentId: "sc-514x7m-0"
+})(["max-width:100%;gap:inherit;"]);
+const Description = styledComponents.styled.div.withConfig({
+  componentId: "sc-514x7m-1"
+})(["display:flex;flex-direction:column;align-self:start;gap:", ";flex:1;width:100%;"], ({
+  theme
+}) => theme.click.card.horizontal.space.md.gap);
+const Wrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-514x7m-2"
+})(["display:inline-flex;width:100%;max-width:100%;align-items:center;justify-content:flex-start;", ""], ({
+  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};
+    }
+    &: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"]};
+      }
+    }
+
+    &: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"]};
+      }
+    }
+    ${$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 = styledComponents.styled(Icon.Icon).withConfig({
+  componentId: "sc-514x7m-3"
+})(["", ""], ({
+  theme
+}) => `
+      height: ${theme.click.card.horizontal.icon.size.all};
+      width: ${theme.click.card.horizontal.icon.size.all};
+  `);
+const ContentWrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-514x7m-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 = styledComponents.styled.div.withConfig({
+  componentId: "sc-514x7m-5"
+})(["display:flex;flex-direction:row;align-items:center;width:100%;gap:", ";"], ({
+  theme,
+  $size
+}) => $size === "md" ? theme.click.card.horizontal.space.md.gap : theme.click.card.horizontal.space.sm.gap);
+const CardHorizontal = ({
+  title,
+  icon,
+  description,
+  disabled = false,
+  infoText,
+  infoUrl,
+  isSelected,
+  isSelectable = infoText ? false : true,
+  children,
+  color = "default",
+  size = "md",
+  badgeText,
+  badgeState,
+  badgeIcon,
+  badgeIconDir,
+  onButtonClick,
+  ...props
+}) => {
+  const handleClick = (e) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    if (typeof onButtonClick === "function") {
+      onButtonClick(e);
+    }
+    if (infoUrl && infoUrl.length > 0) {
+      window.open(infoUrl, "_blank");
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Wrapper, { $disabled: disabled, $isSelected: isSelected, $isSelectable: isSelectable, $color: color, $size: size, tabIndex: disabled ? -1 : 0, "aria-disabled": disabled, onClick: handleClick, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(ContentWrapper, { $size: size, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(IconTextContentWrapper, { $size: size, children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx(CardIcon, { name: icon, "aria-hidden": true }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Container.Container, { padding: "none", orientation: "vertical", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsxs(Header, { as: Container.Container, isResponsive: false, gap: "xs", justifyContent: "space-between", fillWidth: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { orientation: "horizontal", gap: "xs", isResponsive: false, fillWidth: false, grow: "1", children: title }),
+          badgeText && /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { isResponsive: false, justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-badge", children: /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { text: badgeText, size: "md", state: badgeState, icon: badgeIcon, iconDir: badgeIconDir }) })
+        ] }),
+        description && /* @__PURE__ */ jsxRuntime.jsx(Description, { children: description }),
+        children && /* @__PURE__ */ jsxRuntime.jsx(Description, { children })
+      ] })
+    ] }),
+    infoText && /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { justifyContent: "end", fillWidth: false, "data-testid": "horizontal-card-button", children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { label: infoText, onClick: handleClick, disabled, fillWidth: true }) })
+  ] }) });
+};
+
+exports.CardHorizontal = CardHorizontal;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","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 { CardHorizontalProps, CardSize, CardColor } 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}>`\n  display: inline-flex;\n  width: 100%;\n  max-width: 100%;\n  align-items: center;\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 }>`\n  display: flex;\n  flex-direction: row;\n  align-items: 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  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      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled}\n      onClick={handleClick}\n      {...props}\n    >\n      <ContentWrapper $size={size}>\n        <IconTextContentWrapper $size={size}>\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","$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","badgeText","badgeState","badgeIcon","badgeIconDir","onButtonClick","props","handleClick","e","preventDefault","length","window","open","jsx","jsxs","Container","Badge","Button"],"mappings":"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"}

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

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponents = require('styled-components');
+const Container = require('../Container/index.cjs');
+const Badge = require('../Badge/index.cjs');
+
+const TopBadgeWrapper = styledComponents.styled(Container.Container).withConfig({
+  componentId: "sc-1dzzynn-0"
+})(["position:relative;"]);
+const CardPrimaryTopBadge = styledComponents.styled(Badge.Badge).withConfig({
+  componentId: "sc-1dzzynn-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);
+
+exports.CardPrimaryTopBadge = CardPrimaryTopBadge;
+exports.TopBadgeWrapper = TopBadgeWrapper;
+//# sourceMappingURL=CardPrimaryTopBadge.cjs.map

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

@@ -0,0 +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;;;;;"}

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

@@ -0,0 +1,136 @@
+'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 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 Wrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-18z10zj-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-18z10zj-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-18z10zj-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 convertCardAlignToTextAlign = (align) => {
+  if (align === "center") {
+    return "center";
+  }
+  return align === "start" ? "left" : "right";
+};
+const Card = ({
+  alignContent,
+  title,
+  icon,
+  iconUrl,
+  hasShadow = false,
+  description,
+  infoUrl,
+  infoText,
+  size,
+  disabled = false,
+  onButtonClick,
+  isSelected,
+  children,
+  ...props
+}) => {
+  const handleClick = (e) => {
+    if (typeof onButtonClick === "function") {
+      onButtonClick(e);
+    }
+    if (infoUrl && infoUrl.length > 0) {
+      window.open(infoUrl, "_blank");
+    }
+  };
+  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: [
+      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 && /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", align: convertCardAlignToTextAlign(alignContent ?? "start"), children: description }),
+      children
+    ] }),
+    size == "sm" && /* @__PURE__ */ jsxRuntime.jsx(Spacer.Spacer, { size: "sm" }),
+    infoText && /* @__PURE__ */ jsxRuntime.jsx(Component, { onClick: handleClick, disabled, children: infoText })
+  ] });
+};
+const CardPrimary = withTopBadge.withTopBadge(Card);
+
+exports.CardPrimary = CardPrimary;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const CardPrimaryTopBadge = require('./CardPrimaryTopBadge.cjs');
+
+const withTopBadge = (Component) => ({
+  topBadgeText,
+  ...props
+}) => {
+  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 })
+  ] });
+};
+
+exports.withTopBadge = withTopBadge;
+//# sourceMappingURL=withTopBadge.cjs.map

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

@@ -0,0 +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;;;;"}

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

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const react = require('react');
+const styledComponents = require('styled-components');
+const Text = require('../Text/index.cjs');
+const Icon = require('../Icon/index.cjs');
+
+const Background = styledComponents.styled.div.withConfig({
+  componentId: "sc-wd0ya-0"
+})(["", ""], ({
+  theme
+}) => `
+    background-image: ${theme.click.card.promotion.color.stroke.default};
+    padding: 1px;
+    border-radius: ${theme.click.card.promotion.radii.all};
+    box-shadow: ${theme.click.card.shadow};
+    display: flex;
+
+    &:focus {
+      background: ${theme.click.card.promotion.color.stroke.focus};
+    }
+  `);
+const Wrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-wd0ya-1"
+})(["display:flex;width:100%;align-items:center;justify-content:flex-start;cursor:pointer;", ""], ({
+  theme
+}) => `
+    background: ${theme.click.card.promotion.color.background.default};
+    color: ${theme.click.card.promotion.color.text.default};
+    border-radius: ${theme.click.card.promotion.radii.all};
+    padding: ${theme.click.card.promotion.space.y} ${theme.click.card.promotion.space.x};
+    gap: ${theme.click.card.promotion.space.gap};
+    transition: .2s ease-in-out all;
+
+    &:hover {
+      background: ${theme.click.card.promotion.color.background.hover};
+      color: ${theme.click.card.promotion.color.text.hover};
+    }
+
+    &:active, &:focus {
+      background: ${theme.click.card.promotion.color.background.active};
+      color: ${theme.click.card.promotion.color.text.active};
+    }
+  `);
+const CardIcon = styledComponents.styled(Icon.Icon).withConfig({
+  componentId: "sc-wd0ya-2"
+})(["", ""], ({
+  theme
+}) => `
+      height: ${theme.click.card.promotion.icon.size.all};
+      width: ${theme.click.card.promotion.icon.size.all};
+      color: ${theme.click.card.promotion.color.icon.default};
+  `);
+const DismissWrapper = styledComponents.styled.button.withConfig({
+  componentId: "sc-wd0ya-3"
+})(["display:flex;align-items:center;margin-left:auto;border:none;background-color:transparent;color:inherit;cursor:pointer;"]);
+const CardPromotion = ({
+  label,
+  icon,
+  dismissible = false,
+  ...props
+}) => {
+  const [isVisible, setIsVisible] = react.useState(true);
+  return isVisible ? /* @__PURE__ */ jsxRuntime.jsx(Background, { children: /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $dismissible: dismissible, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(CardIcon, { name: icon, "aria-hidden": true }),
+    /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { children: label }),
+    dismissible && /* @__PURE__ */ jsxRuntime.jsx(DismissWrapper, { "data-testid": "click-alert-dismiss-button", onClick: () => setIsVisible(false), children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", "aria-label": "close" }) })
+  ] }) }) : null;
+};
+
+exports.CardPromotion = CardPromotion;
+//# sourceMappingURL=index.cjs.map

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

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