@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { ButtonGroupProps, SelectionValue } from './ButtonGroup.types';\nimport styles from './ButtonGroup.module.css';\n\nconst wrapperVariants = cva(styles.buttongroup, {\n  variants: {\n    type: {\n      default: styles['buttongroup_type_default'],\n      borderless: styles['buttongroup_type_borderless'],\n    },\n    fillWidth: {\n      true: styles['buttongroup_fillwidth'],\n    },\n  },\n  defaultVariants: { type: 'default' },\n});\n\nconst buttonVariants = cva(styles.button, {\n  variants: {\n    type: {\n      default: styles['button_type_default'],\n      borderless: styles['button_type_borderless'],\n    },\n    iconOnly: {\n      true: '',\n      false: '',\n    },\n    fillWidth: {\n      true: styles['button_fillwidth'],\n    },\n  },\n  compoundVariants: [\n    {\n      iconOnly: true,\n      type: 'default',\n      class: styles['button_icon-only_default'],\n    },\n    {\n      iconOnly: true,\n      type: 'borderless',\n      class: styles['button_icon-only_borderless'],\n    },\n  ],\n  defaultVariants: { type: 'default', iconOnly: false },\n});\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 = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  (\n    {\n      options,\n      selected,\n      defaultSelected,\n      fillWidth = false,\n      onClick,\n      type = 'default',\n      iconOnly = false,\n      multiple = false,\n      className,\n      ...props\n    },\n    ref\n  ) => {\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(\n      ({\n        value,\n        label,\n        icon,\n        className: optionClassName,\n        'aria-label': ariaLabel,\n        ...buttonProps\n      }) => {\n        const isActive = isValueSelected(value, currentSelection);\n\n        return (\n          <button\n            key={value}\n            className={cn(buttonVariants({ type, iconOnly, fillWidth }), optionClassName)}\n            aria-pressed={isActive}\n            onClick={() => onButtonGroupClickCommonHandler(value)}\n            role=\"button\"\n            {...buttonProps}\n            aria-label={ariaLabel ?? (iconOnly && icon ? icon.toString() : undefined)}\n          >\n            {iconOnly && icon ? (\n              <span\n                className={cn(\n                  styles.button__icon,\n                  type === 'borderless' && styles['button__icon_height_line']\n                )}\n              >\n                <Icon\n                  name={icon}\n                  size=\"sm\"\n                  aria-hidden\n                />\n              </span>\n            ) : (\n              label\n            )}\n          </button>\n        );\n      }\n    );\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        className={cn(wrapperVariants({ type, fillWidth }), className)}\n        role=\"group\"\n      >\n        {buttons}\n      </div>\n    );\n  }\n);\n\nButtonGroup.displayName = 'ButtonGroup';\n"],"names":["wrapperVariants","cva","styles","buttongroup","variants","type","default","borderless","fillWidth","true","defaultVariants","buttonVariants","button","iconOnly","false","compoundVariants","class","normalizeToSet","value","undefined","Set","isValueSelected","selection","has","ButtonGroup","forwardRef","options","selected","defaultSelected","onClick","multiple","className","props","ref","internalSelection","setInternalSelection","useState","isControlled","currentSelection","onButtonGroupClickCommonHandler","useCallback","newSelection","delete","add","buttons","map","label","icon","optionClassName","ariaLabel","buttonProps","isActive","jsx","cn","toString","button__icon","Icon","displayName"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { cn, cva } from '@/lib/cva';\nimport { ButtonGroupProps, SelectionValue } from './ButtonGroup.types';\nimport styles from './ButtonGroup.module.css';\n\nconst wrapperVariants = cva(styles.buttongroup, {\n  variants: {\n    type: {\n      default: styles['buttongroup_type_default'],\n      borderless: styles['buttongroup_type_borderless'],\n    },\n    fillWidth: {\n      true: styles['buttongroup_fillwidth'],\n    },\n  },\n  defaultVariants: { type: 'default' },\n});\n\nconst buttonVariants = cva(styles.button, {\n  variants: {\n    type: {\n      default: styles['button_type_default'],\n      borderless: styles['button_type_borderless'],\n    },\n    iconOnly: {\n      true: '',\n      false: '',\n    },\n    fillWidth: {\n      true: styles['button_fillwidth'],\n    },\n  },\n  compoundVariants: [\n    {\n      iconOnly: true,\n      type: 'default',\n      class: styles['button_icon-only_default'],\n    },\n    {\n      iconOnly: true,\n      type: 'borderless',\n      class: styles['button_icon-only_borderless'],\n    },\n  ],\n  defaultVariants: { type: 'default', iconOnly: false },\n});\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 = forwardRef<HTMLDivElement, ButtonGroupProps>(\n  (\n    {\n      options,\n      selected,\n      defaultSelected,\n      fillWidth = false,\n      onClick,\n      type = 'default',\n      iconOnly = false,\n      multiple = false,\n      className,\n      ...props\n    },\n    ref\n  ) => {\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(\n      ({\n        value,\n        label,\n        icon,\n        className: optionClassName,\n        'aria-label': ariaLabel,\n        ...buttonProps\n      }) => {\n        const isActive = isValueSelected(value, currentSelection);\n\n        return (\n          <button\n            key={value}\n            type=\"button\"\n            className={cn(buttonVariants({ type, iconOnly, fillWidth }), optionClassName)}\n            aria-pressed={isActive}\n            onClick={() => onButtonGroupClickCommonHandler(value)}\n            role=\"button\"\n            {...buttonProps}\n            aria-label={ariaLabel ?? (iconOnly && icon ? icon.toString() : undefined)}\n          >\n            {iconOnly && icon ? (\n              <span\n                className={cn(\n                  styles.button__icon,\n                  type === 'borderless' && styles['button__icon_height_line']\n                )}\n              >\n                <Icon\n                  name={icon}\n                  size=\"sm\"\n                  aria-hidden\n                />\n              </span>\n            ) : (\n              label\n            )}\n          </button>\n        );\n      }\n    );\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        className={cn(wrapperVariants({ type, fillWidth }), className)}\n        role=\"group\"\n      >\n        {buttons}\n      </div>\n    );\n  }\n);\n\nButtonGroup.displayName = 'ButtonGroup';\n"],"names":["wrapperVariants","cva","styles","buttongroup","variants","type","default","borderless","fillWidth","true","defaultVariants","buttonVariants","button","iconOnly","false","compoundVariants","class","normalizeToSet","value","undefined","Set","isValueSelected","selection","has","ButtonGroup","forwardRef","options","selected","defaultSelected","onClick","multiple","className","props","ref","internalSelection","setInternalSelection","useState","isControlled","currentSelection","onButtonGroupClickCommonHandler","useCallback","newSelection","delete","add","buttons","map","label","icon","optionClassName","ariaLabel","buttonProps","isActive","cn","toString","jsx","button__icon","Icon","displayName"],"mappings":"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"}

package/dist/cjs/components/CardPromotion/CardPromotion.css

@@ -0,0 +1,52 @@
+.background__q--1v {
+  display: flex;
+  padding: 1px;
+  border-radius: var(--click-card-promotion-radii-all);
+  background-image: var(--click-card-promotion-color-stroke-default);
+  box-shadow: var(--click-card-shadow);
+}
+
+.background__q--1v:focus {
+  background: var(--click-card-promotion-color-stroke-focus);
+}
+
+.wrapper__u2j3r {
+  display: flex;
+  width: 100%;
+  padding: var(--click-card-promotion-space-y) var(--click-card-promotion-space-x);
+  justify-content: flex-start;
+  align-items: center;
+  gap: var(--click-card-promotion-space-gap);
+  border-radius: var(--click-card-promotion-radii-all);
+  background: var(--click-card-promotion-color-background-default);
+  color: var(--click-card-promotion-color-text-default);
+  cursor: pointer;
+  transition: 0.2s ease-in-out all;
+}
+
+.wrapper__u2j3r:hover {
+  background: var(--click-card-promotion-color-background-hover);
+  color: var(--click-card-promotion-color-text-hover);
+}
+
+.wrapper__u2j3r:active,
+.wrapper__u2j3r:focus {
+  background: var(--click-card-promotion-color-background-active);
+  color: var(--click-card-promotion-color-text-active);
+}
+
+.cardicon__EPonC {
+  width: var(--click-card-promotion-icon-size-all);
+  height: var(--click-card-promotion-icon-size-all);
+  color: var(--click-card-promotion-color-icon-default);
+}
+
+.dismisswrapper__CeHgg {
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  cursor: pointer;
+}

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

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const background = "background__q--1v";
+const wrapper = "wrapper__u2j3r";
+const cardicon = "cardicon__EPonC";
+const dismisswrapper = "dismisswrapper__CeHgg";
+const styles = {
+	background: background,
+	wrapper: wrapper,
+	cardicon: cardicon,
+	dismisswrapper: dismisswrapper
+};
+
+exports.background = background;
+exports.cardicon = cardicon;
+exports.default = styles;
+exports.dismisswrapper = dismisswrapper;
+exports.wrapper = wrapper;
+//# sourceMappingURL=CardPromotion.module.css.cjs.map

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

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

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

@@ -1,73 +1,27 @@
+require("./CardPromotion.css");
 '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 cva = require('../../lib/cva.cjs');
+const CardPromotion_module = require('./CardPromotion.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const Text = require('../Text/index.cjs');
 
-const Background = styledComponents.styled.div.withConfig({
-  componentId: "sc-6jamj6-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-6jamj6-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-6jamj6-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-6jamj6-3"
-})(["display:flex;align-items:center;margin-left:auto;border:none;background-color:transparent;color:inherit;cursor:pointer;"]);
 const CardPromotion = ({
   label,
   icon,
   dismissible = false,
+  className,
   ...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 }),
+  return isVisible ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: CardPromotion_module.default.background, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, className: cva.cn(CardPromotion_module.default.wrapper, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, "aria-hidden": true, className: CardPromotion_module.default.cardicon }),
     /* @__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" }) })
+    dismissible && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "data-testid": "click-alert-dismiss-button", onClick: () => setIsVisible(false), className: CardPromotion_module.default.dismisswrapper, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", "aria-label": "close" }) })
   ] }) }) : null;
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/CardPromotion/CardPromotion.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport { Text } from '@/components/Text';\nimport { CardPromotionProps } from './CardPromotion.types';\nconst Background = styled.div`\n  ${({ theme }) => `\n    background-image: ${theme.click.card.promotion.color.stroke.default};\n    padding: 1px;\n    border-radius: ${theme.click.card.promotion.radii.all};\n    box-shadow: ${theme.click.card.shadow};\n    display: flex;\n\n    &:focus {\n      background: ${theme.click.card.promotion.color.stroke.focus};\n    }\n  `}\n`;\nconst Wrapper = styled.div<{\n  $dismissible?: boolean;\n}>`\n  display: flex;\n  width: 100%;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: pointer;\n\n  ${({ theme }) => `\n    background: ${theme.click.card.promotion.color.background.default};\n    color: ${theme.click.card.promotion.color.text.default};\n    border-radius: ${theme.click.card.promotion.radii.all};\n    padding: ${theme.click.card.promotion.space.y} ${theme.click.card.promotion.space.x};\n    gap: ${theme.click.card.promotion.space.gap};\n    transition: .2s ease-in-out all;\n\n    &:hover {\n      background: ${theme.click.card.promotion.color.background.hover};\n      color: ${theme.click.card.promotion.color.text.hover};\n    }\n\n    &:active, &:focus {\n      background: ${theme.click.card.promotion.color.background.active};\n      color: ${theme.click.card.promotion.color.text.active};\n    }\n  `}\n`;\n\nconst CardIcon = styled(Icon)`\n  ${({ theme }) => `\n      height: ${theme.click.card.promotion.icon.size.all};\n      width: ${theme.click.card.promotion.icon.size.all};\n      color: ${theme.click.card.promotion.color.icon.default};\n  `}\n`;\n\nconst DismissWrapper = styled.button`\n  display: flex;\n  align-items: center;\n  margin-left: auto;\n  border: none;\n  background-color: transparent;\n  color: inherit;\n  cursor: pointer;\n`;\n\nexport const CardPromotion = ({\n  label,\n  icon,\n  dismissible = false,\n  ...props\n}: CardPromotionProps) => {\n  const [isVisible, setIsVisible] = useState(true);\n\n  return isVisible ? (\n    <Background>\n      <Wrapper\n        $dismissible={dismissible}\n        {...props}\n      >\n        <CardIcon\n          name={icon}\n          aria-hidden\n        />\n\n        <Text>{label}</Text>\n\n        {dismissible && (\n          <DismissWrapper\n            data-testid=\"click-alert-dismiss-button\"\n            onClick={() => setIsVisible(false)}\n          >\n            <Icon\n              name=\"cross\"\n              aria-label=\"close\"\n            />\n          </DismissWrapper>\n        )}\n      </Wrapper>\n    </Background>\n  ) : null;\n};\n"],"names":["Background","styled","div","withConfig","componentId","theme","click","card","promotion","color","stroke","default","radii","all","shadow","focus","Wrapper","background","text","space","y","x","gap","hover","active","CardIcon","Icon","icon","size","DismissWrapper","button","CardPromotion","label","dismissible","props","isVisible","setIsVisible","useState","jsxs","jsx","Text"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/CardPromotion/CardPromotion.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { Icon } from '@/components/Icon';\nimport { Text } from '@/components/Text';\nimport { cn } from '@/lib/cva';\nimport { CardPromotionProps } from './CardPromotion.types';\nimport styles from './CardPromotion.module.css';\n\nexport const CardPromotion = ({\n  label,\n  icon,\n  dismissible = false,\n  className,\n  ...props\n}: CardPromotionProps) => {\n  const [isVisible, setIsVisible] = useState(true);\n\n  return isVisible ? (\n    <div className={styles.background}>\n      <div\n        {...props}\n        className={cn(styles.wrapper, className)}\n      >\n        <Icon\n          name={icon}\n          aria-hidden\n          className={styles.cardicon}\n        />\n\n        <Text>{label}</Text>\n\n        {dismissible && (\n          <button\n            type=\"button\"\n            data-testid=\"click-alert-dismiss-button\"\n            onClick={() => setIsVisible(false)}\n            className={styles.dismisswrapper}\n          >\n            <Icon\n              name=\"cross\"\n              aria-label=\"close\"\n            />\n          </button>\n        )}\n      </div>\n    </div>\n  ) : null;\n};\n"],"names":["CardPromotion","label","icon","dismissible","className","props","isVisible","setIsVisible","useState","jsx","styles","background","jsxs","cn","wrapper","Icon","cardicon","Text","dismisswrapper"],"mappings":";;;;;;;;;;;AAOO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC,KAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,WAAAA,GAAc,KAAA;AAAA,EACdC,SAAAA;AAAAA,EACA,GAAGC;AACe,CAAA,KAAM;AACxB,EAAA,MAAM,CAACC,SAAAA,EAAWC,YAAY,CAAA,GAAIC,eAAS,IAAI,CAAA;AAE/C,EAAA,OAAOF,SAAAA,mBACLG,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWC,6BAAOC,UAAAA,EACrB,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,KACKP,OACJ,SAAA,EAAWQ,MAAAA,CAAGH,4BAAAA,CAAOI,OAAAA,EAASV,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,oBAAAK,cAAA,CAACM,aACC,IAAA,EAAMb,IAAAA,EACN,eAAW,IAAA,EACX,SAAA,EAAWQ,6BAAOM,QAAAA,EAAS,CAAA;AAAA,oBAG7BP,cAAA,CAACQ,aAAMhB,QAAAA,EAAAA,KAAAA,EAAM,CAAA;AAAA,IAEZE,WAAAA,mCACE,QAAA,EAAA,EACC,IAAA,EAAK,UACL,aAAA,EAAY,4BAAA,EACZ,SAAS,MAAMI,YAAAA,CAAa,KAAK,CAAA,EACjC,SAAA,EAAWG,6BAAOQ,cAAAA,EAElB,QAAA,kBAAAT,cAAA,CAACM,aACC,IAAA,EAAK,OAAA,EACL,YAAA,EAAW,OAAA,EAAO,CAAA,EAEtB;AAAA,GAAA,EAEJ,GACF,CAAA,GACE,IAAA;AACN;;;;"}

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

@@ -0,0 +1,99 @@
+.wrapper__x6K6U {
+  display: flex;
+  min-width: 320px;
+  max-width: 420px;
+  padding: var(--click-card-secondary-space-all);
+  flex-direction: column;
+  gap: var(--click-card-secondary-space-gap);
+  border: 1px solid var(--click-card-secondary-color-stroke-default);
+  border-radius: var(--click-card-secondary-radii-all);
+  background-color: var(--click-card-secondary-color-background-default);
+  box-shadow: none;
+}
+
+.wrapper_shadow__jXc8Y {
+  box-shadow: var(--shadow-1);
+}
+
+.wrapper__x6K6U:hover,
+.wrapper__x6K6U :focus {
+  background-color: var(--click-card-secondary-color-background-hover);
+  cursor: pointer;
+}
+
+.wrapper__x6K6U:hover .infolink__text__XbiBm,
+.wrapper__x6K6U:hover .infolink__icon__PBRPu,
+.wrapper__x6K6U :focus .infolink__text__XbiBm,
+.wrapper__x6K6U :focus .infolink__icon__PBRPu {
+  color: var(--click-card-secondary-color-link-hover);
+}
+
+.wrapper__x6K6U[aria-disabled='true'],
+.wrapper__x6K6U[aria-disabled='true']:hover,
+.wrapper__x6K6U[aria-disabled='true']:focus,
+.wrapper__x6K6U[aria-disabled='true']:active {
+  border: 1px solid var(--click-card-secondary-color-stroke-disabled);
+  background-color: var(--click-card-secondary-color-background-disabled);
+  color: var(--click-card-secondary-color-title-disabled);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.wrapper__x6K6U[aria-disabled='true'] .infolink__text__XbiBm,
+.wrapper__x6K6U[aria-disabled='true'] .infolink__icon__PBRPu {
+  color: var(--click-card-secondary-color-link-disabled);
+}
+
+.header__q8HJ0 {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.headerleft__o-Mu5 {
+  display: flex;
+  align-items: center;
+  gap: var(--click-card-secondary-space-gap);
+}
+
+.headerleft__o-Mu5 h3,
+.headerleft__o-Mu5 svg {
+  color: var(--click-global-color-text-default);
+}
+
+.headerleft_disabled__1uiTV h3,
+.headerleft_disabled__1uiTV svg {
+  color: var(--click-global-color-text-muted);
+}
+
+.content__OqlXq {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+}
+
+.customicon__LTYpO {
+  width: var(--click-image-lg-size-width);
+  height: var(--click-image-lg-size-height);
+}
+
+.infolink__Sv6Xq {
+  display: flex;
+  align-items: center;
+  gap: var(--click-card-secondary-space-link-gap);
+  color: var(--click-card-secondary-color-link-default);
+  text-decoration: none;
+}
+
+/* stylelint-disable-next-line no-descending-specificity -- icon color defined
+   alongside its size to mirror the source styled(Icon) rule; the hover/disabled
+   link-color rules above intentionally win via the wrapper-scoped cascade. */
+.infolink__icon__PBRPu {
+  width: var(--click-image-md-size-width);
+  height: var(--click-image-md-size-height);
+  color: var(--click-card-secondary-color-link-default);
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.infolink__text__XbiBm {
+}

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

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const wrapper = "wrapper__x6K6U";
+const wrapper_shadow = "wrapper_shadow__jXc8Y";
+const infolink__text = "infolink__text__XbiBm";
+const infolink__icon = "infolink__icon__PBRPu";
+const header = "header__q8HJ0";
+const headerleft = "headerleft__o-Mu5";
+const headerleft_disabled = "headerleft_disabled__1uiTV";
+const content = "content__OqlXq";
+const customicon = "customicon__LTYpO";
+const infolink = "infolink__Sv6Xq";
+const styles = {
+	wrapper: wrapper,
+	wrapper_shadow: wrapper_shadow,
+	infolink__text: infolink__text,
+	infolink__icon: infolink__icon,
+	header: header,
+	headerleft: headerleft,
+	headerleft_disabled: headerleft_disabled,
+	content: content,
+	customicon: customicon,
+	infolink: infolink
+};
+
+exports.content = content;
+exports.customicon = customicon;
+exports.default = styles;
+exports.header = header;
+exports.headerleft = headerleft;
+exports.headerleft_disabled = headerleft_disabled;
+exports.infolink = infolink;
+exports.infolink__icon = infolink__icon;
+exports.infolink__text = infolink__text;
+exports.wrapper = wrapper;
+exports.wrapper_shadow = wrapper_shadow;
+//# sourceMappingURL=CardSecondary.module.css.cjs.map

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

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

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

@@ -1,89 +1,31 @@
+require("./CardSecondary.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const CardSecondary_module = require('./CardSecondary.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
 const Title = require('../Title/index.cjs');
 const Badge = require('../Badge/index.cjs');
 const Text = require('../Text/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
-const Header = styledComponents.styled.div.withConfig({
-  componentId: "sc-1drx130-0"
-})(["display:flex;justify-content:space-between;align-items:center;"]);
-const HeaderLeft = styledComponents.styled.div.withConfig({
-  componentId: "sc-1drx130-1"
-})(["display:flex;align-items:center;gap:", ";h3,svg{color:", ";}"], ({
-  theme
-}) => theme.click.card.secondary.space.gap, ({
-  $disabled,
-  theme
-}) => $disabled == true ? theme.click.global.color.text.muted : theme.click.global.color.text.default);
-const Content = styledComponents.styled.div.withConfig({
-  componentId: "sc-1drx130-2"
-})(["display:flex;flex-direction:column;flex:1;"]);
-const CustomIcon = styledComponents.styled.img.withConfig({
-  componentId: "sc-1drx130-3"
-})(["height:", ";width:", ";"], ({
-  theme
-}) => theme.click.image.lg.size.height, ({
-  theme
-}) => theme.click.image.lg.size.width);
-const InfoLink = styledComponents.styled.a.withConfig({
-  componentId: "sc-1drx130-4"
-})(["display:flex;align-items:center;color:", ";gap:", ";text-decoration:none;"], ({
-  theme
-}) => theme.click.card.secondary.color.link.default, ({
-  theme
-}) => theme.click.card.secondary.space.link.gap);
-const LinkIconContainer = styledComponents.styled(Icon.Icon).withConfig({
-  componentId: "sc-1drx130-5"
-})(["color:", ";height:", ";width:", ";"], ({
-  theme
-}) => theme.click.card.secondary.color.link.default, ({
-  theme
-}) => theme.click.image.md.size.height, ({
-  theme
-}) => theme.click.image.md.size.width);
-const LinkText = styledComponents.styled(Text.Text).withConfig({
-  componentId: "sc-1drx130-6"
-})([""]);
-const LinkIcon = styledComponents.styled(LinkIconContainer).withConfig({
-  componentId: "sc-1drx130-7"
-})([""]);
-const Wrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1drx130-8"
-})(["background-color:", ";border-radius:", ";border:", ";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,:focus{background-color:", ";cursor:pointer;", ",", "{color:", ";}}&[aria-disabled='true'],&[aria-disabled='true']:hover,&[aria-disabled='true']:focus,&[aria-disabled='true']:active{pointer-events:none;", "}"], ({
-  theme
-}) => theme.click.card.secondary.color.background.default, ({
-  theme
-}) => theme.click.card.secondary.radii.all, ({
-  theme
-}) => `1px solid ${theme.click.card.secondary.color.stroke.default}`, ({
-  theme
-}) => theme.click.card.secondary.space.all, ({
-  theme
-}) => theme.click.card.secondary.space.gap, ({
-  $hasShadow,
-  theme
-}) => $hasShadow ? theme.shadow[1] : "none", ({
-  theme
-}) => theme.click.card.secondary.color.background.hover, LinkText, LinkIcon, ({
-  theme
-}) => theme.click.card.secondary.color.link.hover, ({
-  theme
-}) => `
-      background-color: ${theme.click.card.secondary.color.background.disabled};
-      color: ${theme.click.card.secondary.color.title.disabled};
-      border: 1px solid ${theme.click.card.secondary.color.stroke.disabled};
-      cursor: not-allowed;
-
-      ${LinkText},
-      ${LinkIcon} {
-        color: ${theme.click.card.secondary.color.link.disabled};
-      }
-    `);
+const wrapperVariants = classVarianceAuthority.cva(CardSecondary_module.default.wrapper, {
+  variants: {
+    shadow: {
+      true: CardSecondary_module.default["wrapper_shadow"]
+    }
+  }
+});
+const headerLeftVariants = classVarianceAuthority.cva(CardSecondary_module.default.headerleft, {
+  variants: {
+    disabled: {
+      true: CardSecondary_module.default["headerleft_disabled"]
+    }
+  }
+});
 const CardSecondary = ({
   title,
   icon,
@@ -97,20 +39,29 @@ const CardSecondary = ({
   infoText,
   infoIcon = "chevron-right",
   infoAssetSize = "md",
+  className,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Header, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(HeaderLeft, { $disabled: disabled, children: [
-        iconUrl ? /* @__PURE__ */ jsxRuntime.jsx(CustomIcon, { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, "aria-hidden": true, size: "lg" }),
+  const isInfoLink = !disabled && !!infoUrl && infoUrl.length > 0;
+  const InfoComponent = isInfoLink ? "a" : "div";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-disabled": disabled, tabIndex: 0, ...props, className: cva.cn(wrapperVariants({
+    shadow: hasShadow
+  }), className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CardSecondary_module.default.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cva.cn(headerLeftVariants({
+        disabled
+      })), children: [
+        iconUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { className: CardSecondary_module.default.customicon, src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, "aria-hidden": true, size: "lg" }),
         /* @__PURE__ */ jsxRuntime.jsx(Title.Title, { type: "h3", children: title })
       ] }),
       badgeText && /* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { text: badgeText, state: disabled == true ? "disabled" : badgeState })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Content, { children: /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", children: description }) }),
-    (infoUrl || infoText) && /* @__PURE__ */ jsxRuntime.jsxs(InfoLink, { href: disabled ? void 0 : infoUrl, as: disabled || !infoUrl || infoUrl.length === 0 ? "div" : "a", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(LinkText, { children: infoText }),
-      /* @__PURE__ */ jsxRuntime.jsx(LinkIcon, { size: infoAssetSize, name: infoIcon })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: CardSecondary_module.default.content, children: /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { color: "muted", children: description }) }),
+    (infoUrl || infoText) && /* @__PURE__ */ jsxRuntime.jsxs(InfoComponent, { className: CardSecondary_module.default.infolink, ...isInfoLink ? {
+      href: infoUrl
+    } : {}, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { className: CardSecondary_module.default.infolink__text, children: infoText }),
+      /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { className: CardSecondary_module.default.infolink__icon, size: infoAssetSize, name: infoIcon })
     ] })
   ] });
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/CardSecondary/CardSecondary.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { Badge } from '@/components/Badge';\nimport { Icon } from '@/components/Icon';\nimport { Title } from '@/components/Title';\nimport { Text } from '@/components/Text';\nimport { CardSecondaryProps } from './CardSecondary.types';\n\nconst Header = styled.div`\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n`;\n\nconst HeaderLeft = styled.div<{ $disabled?: boolean }>`\n  display: flex;\n  align-items: center;\n  gap: ${({ theme }) => theme.click.card.secondary.space.gap};\n\n  h3,\n  svg {\n    color: ${({ $disabled, theme }) =>\n      $disabled == true\n        ? theme.click.global.color.text.muted\n        : theme.click.global.color.text.default};\n  }\n`;\n\nconst Content = styled.div`\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n`;\n\nconst CustomIcon = styled.img`\n  height: ${({ theme }) => theme.click.image.lg.size.height};\n  width: ${({ theme }) => theme.click.image.lg.size.width};\n`;\n\nconst InfoLink = styled.a`\n  display: flex;\n  align-items: center;\n  color: ${({ theme }) => theme.click.card.secondary.color.link.default};\n  gap: ${({ theme }) => theme.click.card.secondary.space.link.gap};\n  text-decoration: none;\n`;\nconst LinkIconContainer = styled(Icon)`\n  color: ${({ theme }) => theme.click.card.secondary.color.link.default};\n  height: ${({ theme }) => theme.click.image.md.size.height};\n  width: ${({ theme }) => theme.click.image.md.size.width};\n`;\n\nconst LinkText = styled(Text)``;\nconst LinkIcon = styled(LinkIconContainer)``;\n\nconst Wrapper = styled.div<{\n  $hasShadow?: boolean;\n}>`\n  background-color: ${({ theme }) => theme.click.card.secondary.color.background.default};\n  border-radius: ${({ theme }) => theme.click.card.secondary.radii.all};\n  border: ${({ theme }) =>\n    `1px solid ${theme.click.card.secondary.color.stroke.default}`};\n  max-width: 420px;\n  min-width: 320px;\n  display: flex;\n  flex-direction: column;\n  padding: ${({ theme }) => theme.click.card.secondary.space.all};\n  gap: ${({ theme }) => theme.click.card.secondary.space.gap};\n  box-shadow: ${({ $hasShadow, theme }) => ($hasShadow ? theme.shadow[1] : 'none')};\n\n  &:hover,\n  :focus {\n    background-color: ${({ theme }) => theme.click.card.secondary.color.background.hover};\n    cursor: pointer;\n    ${LinkText},\n    ${LinkIcon} {\n      color: ${({ theme }) => theme.click.card.secondary.color.link.hover};\n    }\n  }\n\n  &[aria-disabled='true'],\n  &[aria-disabled='true']:hover,\n  &[aria-disabled='true']:focus,\n  &[aria-disabled='true']:active {\n    pointer-events: none;\n    ${({ theme }) => `\n      background-color: ${theme.click.card.secondary.color.background.disabled};\n      color: ${theme.click.card.secondary.color.title.disabled};\n      border: 1px solid ${theme.click.card.secondary.color.stroke.disabled};\n      cursor: not-allowed;\n\n      ${LinkText},\n      ${LinkIcon} {\n        color: ${theme.click.card.secondary.color.link.disabled};\n      }\n    `}\n  }\n`;\n\nexport const CardSecondary = ({\n  title,\n  icon,\n  iconUrl,\n  badgeState,\n  badgeText = '',\n  hasShadow = false,\n  disabled = false,\n  description,\n  infoUrl,\n  infoText,\n  infoIcon = 'chevron-right',\n  infoAssetSize = 'md',\n  ...props\n}: CardSecondaryProps) => {\n  return (\n    <Wrapper\n      aria-disabled={disabled}\n      tabIndex={0}\n      $hasShadow={hasShadow}\n      {...props}\n    >\n      <Header>\n        <HeaderLeft $disabled={disabled}>\n          {iconUrl ? (\n            <CustomIcon\n              src={iconUrl}\n              alt=\"card icon\"\n              aria-hidden\n            />\n          ) : (\n            icon && (\n              <Icon\n                name={icon}\n                aria-hidden\n                size=\"lg\"\n              />\n            )\n          )}\n          <Title type=\"h3\">{title}</Title>\n        </HeaderLeft>\n        {badgeText && (\n          <Badge\n            text={badgeText}\n            state={disabled == true ? 'disabled' : badgeState}\n          />\n        )}\n      </Header>\n\n      <Content>\n        <Text color=\"muted\">{description}</Text>\n      </Content>\n      {(infoUrl || infoText) && (\n        <InfoLink\n          href={disabled ? undefined : infoUrl}\n          as={disabled || !infoUrl || infoUrl.length === 0 ? 'div' : 'a'}\n        >\n          <LinkText>{infoText}</LinkText>\n          <LinkIcon\n            size={infoAssetSize}\n            name={infoIcon}\n          />\n        </InfoLink>\n      )}\n    </Wrapper>\n  );\n};\n"],"names":["Header","styled","div","withConfig","componentId","HeaderLeft","theme","click","card","secondary","space","gap","$disabled","global","color","text","muted","default","Content","CustomIcon","img","image","lg","size","height","width","InfoLink","a","link","LinkIconContainer","Icon","md","LinkText","Text","LinkIcon","Wrapper","background","radii","all","stroke","$hasShadow","shadow","hover","disabled","title","CardSecondary","icon","iconUrl","badgeState","badgeText","hasShadow","description","infoUrl","infoText","infoIcon","infoAssetSize","props","jsxs","jsx","Title","Badge","undefined","length"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/CardSecondary/CardSecondary.tsx"],"sourcesContent":["import { Badge } from '@/components/Badge';\nimport { Icon } from '@/components/Icon';\nimport { Title } from '@/components/Title';\nimport { Text } from '@/components/Text';\nimport { cn, cva } from '@/lib/cva';\nimport { CardSecondaryProps } from './CardSecondary.types';\nimport styles from './CardSecondary.module.css';\n\nconst wrapperVariants = cva(styles.wrapper, {\n  variants: {\n    shadow: {\n      true: styles['wrapper_shadow'],\n    },\n  },\n});\n\nconst headerLeftVariants = cva(styles.headerleft, {\n  variants: {\n    disabled: {\n      true: styles['headerleft_disabled'],\n    },\n  },\n});\n\nexport const CardSecondary = ({\n  title,\n  icon,\n  iconUrl,\n  badgeState,\n  badgeText = '',\n  hasShadow = false,\n  disabled = false,\n  description,\n  infoUrl,\n  infoText,\n  infoIcon = 'chevron-right',\n  infoAssetSize = 'md',\n  className,\n  ...props\n}: CardSecondaryProps) => {\n  const isInfoLink = !disabled && !!infoUrl && infoUrl.length > 0;\n  const InfoComponent = isInfoLink ? 'a' : 'div';\n  return (\n    <div\n      aria-disabled={disabled}\n      tabIndex={0}\n      {...props}\n      className={cn(wrapperVariants({ shadow: hasShadow }), className)}\n    >\n      <div className={styles.header}>\n        <div className={cn(headerLeftVariants({ disabled }))}>\n          {iconUrl ? (\n            <img\n              className={styles.customicon}\n              src={iconUrl}\n              alt=\"card icon\"\n              aria-hidden\n            />\n          ) : (\n            icon && (\n              <Icon\n                name={icon}\n                aria-hidden\n                size=\"lg\"\n              />\n            )\n          )}\n          <Title type=\"h3\">{title}</Title>\n        </div>\n        {badgeText && (\n          <Badge\n            text={badgeText}\n            state={disabled == true ? 'disabled' : badgeState}\n          />\n        )}\n      </div>\n\n      <div className={styles.content}>\n        <Text color=\"muted\">{description}</Text>\n      </div>\n      {(infoUrl || infoText) && (\n        <InfoComponent\n          className={styles.infolink}\n          {...(isInfoLink ? { href: infoUrl } : {})}\n        >\n          <Text className={styles.infolink__text}>{infoText}</Text>\n          <Icon\n            className={styles.infolink__icon}\n            size={infoAssetSize}\n            name={infoIcon}\n          />\n        </InfoComponent>\n      )}\n    </div>\n  );\n};\n"],"names":["wrapperVariants","cva","styles","wrapper","variants","shadow","true","headerLeftVariants","headerleft","disabled","CardSecondary","title","icon","iconUrl","badgeState","badgeText","hasShadow","description","infoUrl","infoText","infoIcon","infoAssetSize","className","props","isInfoLink","length","InfoComponent","jsxs","cn","header","jsx","customicon","Icon","Title","Badge","content","Text","infolink","href","infolink__text","infolink__icon"],"mappings":"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"}

package/dist/cjs/components/CodeBlock/CodeBlock.css

@@ -0,0 +1,48 @@
+.codeblock__pRWOC {
+  position: relative;
+  width: 100%;
+  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original
+     styled-components rule used this same width fallback chain (100% →
+     -webkit-fill-available → fill-available → stretch) so the block fills the
+     available inline space. */
+  width: -webkit-fill-available;
+  width: fill-available;
+  width: stretch;
+  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
+  color: var(--codeblock-numbers);
+}
+
+/* This class is applied alongside the IconButton module classes on the same
+   <button>. `color`, `padding`, and `border` are set by both; the
+   styled-components original won them via source order. Double the class so
+   those three win regardless of CSS-module bundle order, matching the
+   pre-migration rendering. */
+.codeblock__button__YDCMe.codeblock__button__YDCMe {
+  /* Reset so a copied/error state on one button can't inherit into another via
+     the custom property (custom properties inherit by default). The copied/error
+     colors are set inline per state via --codeblock-button, matching the
+     --codeblock-numbers pattern so both track the ThemeProvider runtime. */
+  --codeblock-button: initial;
+  padding: 0;
+  border: 0;
+  color: var(--codeblock-button, inherit);
+}
+
+.codeblock__highlighter__t4Xol {
+  margin: 0;
+  padding: 0;
+  background: transparent;
+}
+
+.codeblock__content__WKNWr {
+  color: inherit;
+  font-family: inherit;
+}
+
+.codeblock__button-container__D6yob {
+  display: flex;
+  position: absolute;
+  top: var(--click-codeblock-space-y);
+  right: var(--click-codeblock-space-x);
+  gap: 0.625rem;
+}

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const codeblock = "codeblock__pRWOC";
+const codeblock__button = "codeblock__button__YDCMe";
+const codeblock__highlighter = "codeblock__highlighter__t4Xol";
+const codeblock__content = "codeblock__content__WKNWr";
+const styles = {
+	codeblock: codeblock,
+	codeblock__button: codeblock__button,
+	codeblock__highlighter: codeblock__highlighter,
+	codeblock__content: codeblock__content,
+	"codeblock__button-container": "codeblock__button-container__D6yob"
+};
+
+exports.codeblock = codeblock;
+exports.codeblock__button = codeblock__button;
+exports.codeblock__content = codeblock__content;
+exports.codeblock__highlighter = codeblock__highlighter;
+exports.default = styles;
+//# sourceMappingURL=CodeBlock.module.css.cjs.map

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

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