@clickhouse/click-ui 0.6.1-rc2 → 0.6.1

package/dist/cjs/components/Accordion/Accordion.css

@@ -0,0 +1,111 @@
+/* stylelint-disable-next-line block-no-empty -- base block required by BEM */
+.accordion__LVhhv {
+}
+
+.accordion_fill-width__65i1l {
+  width: 100%;
+}
+
+.accordion__trigger__DrpsZ {
+  display: flex;
+  padding: 0;
+  align-items: center;
+  gap: var(--accordion-gap);
+  border: none;
+  background-color: transparent;
+  color: var(--accordion-label-default);
+  font: var(--accordion-font-default);
+}
+
+.accordion__trigger__DrpsZ:active {
+  color: var(--accordion-label-active);
+  font: var(--accordion-font-active);
+}
+
+.accordion__trigger__DrpsZ:hover {
+  color: var(--accordion-label-hover);
+  font: var(--accordion-font-hover);
+  cursor: pointer;
+}
+
+.accordion__trigger_fill-width__b9tJk {
+  width: 100%;
+}
+
+.accordion__trigger_size_sm__kb6zW {
+  --accordion-gap: var(--click-accordion-sm-space-gap);
+  --accordion-font-default: var(--click-accordion-sm-typography-label-default);
+  --accordion-font-hover: var(--click-accordion-sm-typography-label-hover);
+  --accordion-font-active: var(--click-accordion-sm-typography-label-active);
+}
+
+.accordion__trigger_size_md__IkAnv {
+  --accordion-gap: var(--click-accordion-md-space-gap);
+  --accordion-font-default: var(--click-accordion-md-typography-label-default);
+  --accordion-font-hover: var(--click-accordion-md-typography-label-hover);
+  --accordion-font-active: var(--click-accordion-md-typography-label-active);
+}
+
+.accordion__trigger_size_lg__t3GzX {
+  --accordion-gap: var(--click-accordion-lg-space-gap);
+  --accordion-font-default: var(--click-accordion-lg-typography-label-default);
+  --accordion-font-hover: var(--click-accordion-lg-typography-label-hover);
+  --accordion-font-active: var(--click-accordion-lg-typography-label-active);
+}
+
+.accordion__trigger_color_default__q9fX5 {
+  --accordion-label-default: var(--click-accordion-color-default-label-default);
+  --accordion-label-hover: var(--click-accordion-color-default-label-hover);
+  --accordion-label-active: var(--click-accordion-color-default-label-active);
+}
+
+.accordion__trigger_color_link__Fu45s {
+  --accordion-label-default: var(--click-accordion-color-link-label-default);
+  --accordion-label-hover: var(--click-accordion-color-link-label-hover);
+  --accordion-label-active: var(--click-accordion-color-link-label-active);
+}
+
+.accordion__icon-wrapper__DCanu {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 200ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.accordion__trigger__DrpsZ[data-state='open'] .accordion__icon-wrapper__DCanu {
+  transform: rotate(90deg);
+}
+
+.accordion__icons-wrapper__qwRRg {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* stylelint-disable no-descending-specificity -- the SidebarAccordion overrides
+   intentionally come last to mirror the original `styled(Accordion)` block, whose
+   rules were emitted after the base trigger/icon-wrapper styles. */
+.accordion_sidebar__siNyk .accordion__trigger__DrpsZ {
+  gap: var(--click-sidebar-navigation-item-default-space-gap);
+}
+
+.accordion_sidebar__siNyk p {
+  margin: 0;
+}
+
+.accordion_sidebar__siNyk .accordion__icon-wrapper__DCanu {
+  visibility: hidden;
+}
+
+.accordion_sidebar__siNyk:hover .accordion__icon-wrapper__DCanu {
+  visibility: revert;
+}
+
+.accordion_sidebar__siNyk:active .accordion__icon-wrapper__DCanu {
+  visibility: revert;
+}
+
+.accordion_sidebar__siNyk .accordion__trigger__DrpsZ[data-state='open'] .accordion__icon-wrapper__DCanu {
+  visibility: revert;
+}
+/* stylelint-enable no-descending-specificity */

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

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const accordion = "accordion__LVhhv";
+const accordion__trigger = "accordion__trigger__DrpsZ";
+const accordion__trigger_size_sm = "accordion__trigger_size_sm__kb6zW";
+const accordion__trigger_size_md = "accordion__trigger_size_md__IkAnv";
+const accordion__trigger_size_lg = "accordion__trigger_size_lg__t3GzX";
+const accordion__trigger_color_default = "accordion__trigger_color_default__q9fX5";
+const accordion__trigger_color_link = "accordion__trigger_color_link__Fu45s";
+const styles = {
+	accordion: accordion,
+	"accordion_fill-width": "accordion_fill-width__65i1l",
+	accordion__trigger: accordion__trigger,
+	"accordion__trigger_fill-width": "accordion__trigger_fill-width__b9tJk",
+	accordion__trigger_size_sm: accordion__trigger_size_sm,
+	accordion__trigger_size_md: accordion__trigger_size_md,
+	accordion__trigger_size_lg: accordion__trigger_size_lg,
+	accordion__trigger_color_default: accordion__trigger_color_default,
+	accordion__trigger_color_link: accordion__trigger_color_link,
+	"accordion__icon-wrapper": "accordion__icon-wrapper__DCanu",
+	"accordion__icons-wrapper": "accordion__icons-wrapper__qwRRg"};
+
+exports.accordion = accordion;
+exports.accordion__trigger = accordion__trigger;
+exports.accordion__trigger_color_default = accordion__trigger_color_default;
+exports.accordion__trigger_color_link = accordion__trigger_color_link;
+exports.accordion__trigger_size_lg = accordion__trigger_size_lg;
+exports.accordion__trigger_size_md = accordion__trigger_size_md;
+exports.accordion__trigger_size_sm = accordion__trigger_size_sm;
+exports.default = styles;
+//# sourceMappingURL=Accordion.module.css.cjs.map

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

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

package/dist/cjs/components/Accordion/index.cjs

@@ -1,13 +1,16 @@
+require("./Accordion.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const RadixAccordion = require('@radix-ui/react-accordion');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const Accordion_module = require('./Accordion.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
 const Text = require('../Text/index.cjs');
 const Spacer = require('../Spacer/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -29,75 +32,69 @@ function _interopNamespace(e) {
 
 const RadixAccordion__namespace = /*#__PURE__*/_interopNamespace(RadixAccordion);
 
+const rootVariants = classVarianceAuthority.cva(Accordion_module.default.accordion, {
+  variants: {
+    fillWidth: {
+      true: Accordion_module.default["accordion_fill-width"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    fillWidth: false
+  }
+});
+const triggerVariants = classVarianceAuthority.cva(Accordion_module.default.accordion__trigger, {
+  variants: {
+    size: {
+      sm: Accordion_module.default.accordion__trigger_size_sm,
+      md: Accordion_module.default.accordion__trigger_size_md,
+      lg: Accordion_module.default.accordion__trigger_size_lg
+    },
+    color: {
+      default: Accordion_module.default.accordion__trigger_color_default,
+      link: Accordion_module.default.accordion__trigger_color_link
+    },
+    fillWidth: {
+      true: Accordion_module.default["accordion__trigger_fill-width"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "default",
+    fillWidth: false
+  }
+});
 const Accordion = ({
   title,
   size = "md",
-  color,
+  color = "default",
   icon,
   iconSize,
   gap,
   children,
   fillWidth = false,
+  className,
   ...delegated
-}) => /* @__PURE__ */ jsxRuntime.jsx(AccordionRoot, { type: "single", collapsible: true, $fillWidth: fillWidth, ...delegated, children: /* @__PURE__ */ jsxRuntime.jsxs(RadixAccordion__namespace.Item, { value: "item", children: [
-  /* @__PURE__ */ jsxRuntime.jsxs(AccordionTrigger, { $size: size, color, $fillWidth: fillWidth, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(AccordionIconsWrapper, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-right", size: iconSize || size, "aria-label": "accordion icon" }) }),
+}) => /* @__PURE__ */ jsxRuntime.jsx(RadixAccordion__namespace.Root, { type: "single", collapsible: true, ...delegated, className: cva.cn(rootVariants({
+  fillWidth
+}), className), children: /* @__PURE__ */ jsxRuntime.jsxs(RadixAccordion__namespace.Item, { value: "item", children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(RadixAccordion__namespace.Trigger, { className: triggerVariants({
+    size,
+    color,
+    fillWidth
+  }), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Accordion_module.default["accordion__icons-wrapper"], children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: Accordion_module.default["accordion__icon-wrapper"], children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "chevron-right", size: iconSize || size, "aria-label": "accordion icon" }) }),
       icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: icon, size: iconSize || size }) : null
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { component: "div", size, fillWidth, children: title })
   ] }),
-  /* @__PURE__ */ jsxRuntime.jsxs(AccordionContent, { children: [
+  /* @__PURE__ */ jsxRuntime.jsxs(RadixAccordion__namespace.Content, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(Spacer.Spacer, { size: gap }),
     children
   ] })
 ] }) });
-const AccordionRoot = styledComponents.styled(RadixAccordion__namespace.Root).withConfig({
-  componentId: "sc-1ysh219-0"
-})(["", ";"], ({
-  $fillWidth
-}) => $fillWidth && "width: 100%");
-const AccordionTrigger = styledComponents.styled(RadixAccordion__namespace.Trigger).withConfig({
-  componentId: "sc-1ysh219-1"
-})(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
-  theme,
-  $size = "md",
-  color = "default"
-}) => `
-    gap: ${theme.click.accordion[$size].space.gap};
-    color: ${theme.click.accordion.color[color].label.default};
-    font: ${theme.click.accordion[$size].typography.label.default};
-
-    &:active {
-      color: ${theme.click.accordion.color[color].label.active};
-      font: ${theme.click.accordion[$size].typography.label.active};
-    }
-
-    &:hover {
-      color: ${theme.click.accordion.color[color].label.hover};
-      font: ${theme.click.accordion[$size].typography.label.hover};
-      cursor: pointer;
-    }
-  `, ({
-  $fillWidth
-}) => $fillWidth && "width: 100%");
-const AccordionIconWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1ysh219-2"
-})(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
-const AccordionIconsWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-1ysh219-3"
-})(["display:flex;align-items:center;justify-content:center;"]);
-const AccordionContent = styledComponents.styled(RadixAccordion__namespace.Content).withConfig({
-  componentId: "sc-1ysh219-4"
-})([""]);
-styledComponents.styled(Accordion).withConfig({
-  componentId: "sc-1ysh219-5"
-})(["", "{gap:", ";}p{margin:0;}", "{visibility:hidden;}&:hover ", "{visibility:revert;}&:active ", "{visibility:revert;}", "[data-state='open'] ", "{visibility:revert;}"], AccordionTrigger, ({
-  theme
-}) => theme.click.sidebar.navigation.item.default.space.gap, AccordionIconWrapper, AccordionIconWrapper, AccordionIconWrapper, AccordionTrigger, AccordionIconWrapper);
-const AccordionToExport = styledComponents.styled(Accordion).withConfig({
-  componentId: "sc-1ysh219-6"
-})([""]);
 
-exports.Accordion = AccordionToExport;
+exports.Accordion = Accordion;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as RadixAccordion from '@radix-ui/react-accordion';\nimport { styled } from 'styled-components';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { Text } from '@/components/Text';\nimport { AccordionProps, Size, Color } from './Accordion.types';\n\nconst Accordion = ({\n  title,\n  size = 'md',\n  color,\n  icon,\n  iconSize,\n  gap,\n  children,\n  fillWidth = false,\n  ...delegated\n}: AccordionProps) => (\n  <AccordionRoot\n    type=\"single\"\n    collapsible\n    $fillWidth={fillWidth}\n    {...delegated}\n  >\n    <RadixAccordion.Item value=\"item\">\n      <AccordionTrigger\n        $size={size}\n        color={color}\n        $fillWidth={fillWidth}\n      >\n        <AccordionIconsWrapper>\n          <AccordionIconWrapper>\n            <Icon\n              name=\"chevron-right\"\n              size={iconSize || size}\n              aria-label=\"accordion icon\"\n            />\n          </AccordionIconWrapper>\n          {icon ? (\n            <Icon\n              name={icon}\n              size={iconSize || size}\n            />\n          ) : null}\n        </AccordionIconsWrapper>\n        <Text\n          component=\"div\"\n          size={size}\n          fillWidth={fillWidth}\n        >\n          {title}\n        </Text>\n      </AccordionTrigger>\n      <AccordionContent>\n        <Spacer size={gap} />\n        {children}\n      </AccordionContent>\n    </RadixAccordion.Item>\n  </AccordionRoot>\n);\n\nconst AccordionRoot = styled(RadixAccordion.Root)<{\n  $fillWidth: boolean;\n}>`\n  ${({ $fillWidth }) => $fillWidth && 'width: 100%'};\n`;\n\nconst AccordionTrigger = styled(RadixAccordion.Trigger)<{\n  $size?: Size;\n  color?: Color;\n  $fillWidth: boolean;\n}>`\n  border: none;\n  padding: 0;\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  ${({ theme, $size = 'md', color = 'default' }) => `\n    gap: ${theme.click.accordion[$size].space.gap};\n    color: ${theme.click.accordion.color[color].label.default};\n    font: ${theme.click.accordion[$size].typography.label.default};\n\n    &:active {\n      color: ${theme.click.accordion.color[color].label.active};\n      font: ${theme.click.accordion[$size].typography.label.active};\n    }\n\n    &:hover {\n      color: ${theme.click.accordion.color[color].label.hover};\n      font: ${theme.click.accordion[$size].typography.label.hover};\n      cursor: pointer;\n    }\n  `}\n  ${({ $fillWidth }) => $fillWidth && 'width: 100%'};\n`;\n\nconst AccordionIconWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: transform 200ms cubic-bezier(0.87, 0, 0.13, 1);\n\n  ${AccordionTrigger}[data-state='open'] & {\n    transform: rotate(90deg);\n  }\n`;\nconst AccordionIconsWrapper = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst AccordionContent = styled(RadixAccordion.Content)``;\n\nconst SidebarAccordion = styled(Accordion)`\n  ${AccordionTrigger} {\n    gap: ${({ theme }) => theme.click.sidebar.navigation.item.default.space.gap};\n  }\n  p {\n    margin: 0;\n  }\n\n  ${AccordionIconWrapper} {\n    visibility: hidden;\n  }\n\n  &:hover ${AccordionIconWrapper} {\n    visibility: revert;\n  }\n  &:active ${AccordionIconWrapper} {\n    visibility: revert;\n  }\n\n  ${AccordionTrigger}[data-state='open'] ${AccordionIconWrapper} {\n    visibility: revert;\n  }\n`;\n// This allows the Accordion to be referenced inside other\n// components css\nconst AccordionToExport = styled(Accordion)``;\nexport { AccordionToExport as Accordion, SidebarAccordion };\n"],"names":["Accordion","title","size","color","icon","iconSize","gap","children","fillWidth","delegated","jsx","jsxs","RadixAccordion","Icon","Text","Spacer","AccordionRoot","styled","Root","withConfig","componentId","$fillWidth","AccordionTrigger","Trigger","theme","$size","click","accordion","space","label","default","typography","active","hover","AccordionIconWrapper","div","AccordionIconsWrapper","AccordionContent","Content","sidebar","navigation","item","AccordionToExport"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as RadixAccordion from '@radix-ui/react-accordion';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { Text } from '@/components/Text';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Accordion.module.css';\nimport { AccordionProps } from './Accordion.types';\n\nconst rootVariants = cva(styles.accordion, {\n  variants: {\n    fillWidth: {\n      true: styles['accordion_fill-width'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    fillWidth: false,\n  },\n});\n\nconst triggerVariants = cva(styles.accordion__trigger, {\n  variants: {\n    size: {\n      sm: styles.accordion__trigger_size_sm,\n      md: styles.accordion__trigger_size_md,\n      lg: styles.accordion__trigger_size_lg,\n    },\n    color: {\n      default: styles.accordion__trigger_color_default,\n      link: styles.accordion__trigger_color_link,\n    },\n    fillWidth: {\n      true: styles['accordion__trigger_fill-width'],\n      false: '',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    color: 'default',\n    fillWidth: false,\n  },\n});\n\nconst Accordion = ({\n  title,\n  size = 'md',\n  color = 'default',\n  icon,\n  iconSize,\n  gap,\n  children,\n  fillWidth = false,\n  className,\n  ...delegated\n}: AccordionProps) => (\n  <RadixAccordion.Root\n    type=\"single\"\n    collapsible\n    {...delegated}\n    className={cn(rootVariants({ fillWidth }), className)}\n  >\n    <RadixAccordion.Item value=\"item\">\n      <RadixAccordion.Trigger className={triggerVariants({ size, color, fillWidth })}>\n        <div className={styles['accordion__icons-wrapper']}>\n          <div className={styles['accordion__icon-wrapper']}>\n            <Icon\n              name=\"chevron-right\"\n              size={iconSize || size}\n              aria-label=\"accordion icon\"\n            />\n          </div>\n          {icon ? (\n            <Icon\n              name={icon}\n              size={iconSize || size}\n            />\n          ) : null}\n        </div>\n        <Text\n          component=\"div\"\n          size={size}\n          fillWidth={fillWidth}\n        >\n          {title}\n        </Text>\n      </RadixAccordion.Trigger>\n      <RadixAccordion.Content>\n        <Spacer size={gap} />\n        {children}\n      </RadixAccordion.Content>\n    </RadixAccordion.Item>\n  </RadixAccordion.Root>\n);\n\nconst SidebarAccordion = ({ className, ...props }: AccordionProps) => (\n  <Accordion\n    className={cn(styles.accordion_sidebar, className)}\n    {...props}\n  />\n);\n\nexport { Accordion, SidebarAccordion };\n"],"names":["rootVariants","cva","styles","accordion","variants","fillWidth","true","false","defaultVariants","triggerVariants","accordion__trigger","size","sm","accordion__trigger_size_sm","md","accordion__trigger_size_md","lg","accordion__trigger_size_lg","color","default","accordion__trigger_color_default","link","accordion__trigger_color_link","Accordion","title","icon","iconSize","gap","children","className","delegated","jsx","RadixAccordion","cn","jsxs","Icon","Text","Spacer"],"mappings":"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"}

package/dist/cjs/components/Alert/Alert.css

@@ -0,0 +1,169 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. iconBackground) */
+
+.alert__7cYyI {
+  display: flex;
+  width: 100%;
+  overflow: hidden;
+  justify-content: start;
+  border-radius: var(--click-alert-radii-end);
+  background-color: var(--click-alert-color-background-neutral);
+  color: var(--click-alert-color-text-neutral);
+}
+
+.alert_type_default__PnVyJ {
+  justify-content: start;
+  border-radius: var(--click-alert-radii-end);
+}
+
+.alert_type_banner__NjYrK {
+  justify-content: center;
+  border-radius: 0;
+}
+
+.alert_state_neutral__655E4 {
+  background-color: var(--click-alert-color-background-neutral);
+  color: var(--click-alert-color-text-neutral);
+}
+
+.alert_state_success__VUtee {
+  background-color: var(--click-alert-color-background-success);
+  color: var(--click-alert-color-text-success);
+}
+
+.alert_state_warning__kNUTL {
+  background-color: var(--click-alert-color-background-warning);
+  color: var(--click-alert-color-text-warning);
+}
+
+.alert_state_danger__DLuZk {
+  background-color: var(--click-alert-color-background-danger);
+  color: var(--click-alert-color-text-danger);
+}
+
+.alert_state_info__-2HHz {
+  background-color: var(--click-alert-color-background-info);
+  color: var(--click-alert-color-text-info);
+}
+
+.alert__icon-wrapper__q9T-7 {
+  display: flex;
+  align-items: center;
+  background-color: var(--click-alert-color-iconBackground-neutral);
+  color: var(--click-alert-color-iconForeground-neutral);
+}
+
+.alert__icon-wrapper_state_neutral__gIGl5 {
+  background-color: var(--click-alert-color-iconBackground-neutral);
+  color: var(--click-alert-color-iconForeground-neutral);
+}
+
+.alert__icon-wrapper_state_success__9C1yD {
+  background-color: var(--click-alert-color-iconBackground-success);
+  color: var(--click-alert-color-iconForeground-success);
+}
+
+.alert__icon-wrapper_state_warning__oJByv {
+  background-color: var(--click-alert-color-iconBackground-warning);
+  color: var(--click-alert-color-iconForeground-warning);
+}
+
+.alert__icon-wrapper_state_danger__afPBa {
+  background-color: var(--click-alert-color-iconBackground-danger);
+  color: var(--click-alert-color-iconForeground-danger);
+}
+
+.alert__icon-wrapper_state_info__YI3qz {
+  background-color: var(--click-alert-color-iconBackground-info);
+  color: var(--click-alert-color-iconForeground-info);
+}
+
+.alert__icon-wrapper_size_small__E4NZL {
+  padding: var(--click-alert-small-space-y) 0 var(--click-alert-small-space-y)
+    var(--click-alert-small-space-x);
+}
+
+.alert__icon-wrapper_size_medium__3bDZN {
+  padding: var(--click-alert-medium-space-y) 0 var(--click-alert-medium-space-y)
+    var(--click-alert-medium-space-x);
+}
+
+/* The styled-components original emitted `background-color: none` for banners,
+   which is an invalid value the browser drops, leaving the icon wrapper
+   transparent. `transparent` reproduces that rendering exactly. */
+.alert__icon-wrapper_type_banner__4Zl-g {
+  background-color: transparent;
+}
+
+/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
+.alert__icon__2dyva {
+}
+
+.alert__icon_size_small__BGX9V {
+  width: var(--click-alert-small-icon-width);
+  height: var(--click-alert-small-icon-height);
+}
+
+.alert__icon_size_medium__-9nLT {
+  width: var(--click-alert-medium-icon-width);
+  height: var(--click-alert-medium-icon-height);
+}
+
+.alert__text-wrapper__-KJUV {
+  display: flex;
+  /* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated -- preserves the styled-components original verbatim for byte-for-byte parity */
+  word-break: break-word;
+  flex-flow: column;
+}
+
+.alert__text-wrapper_size_small__Ahm-8 {
+  padding: var(--click-alert-small-space-y) var(--click-alert-small-space-x);
+  gap: var(--click-alert-small-space-gap);
+}
+
+.alert__text-wrapper_size_medium__FIX1N {
+  padding: var(--click-alert-medium-space-y) var(--click-alert-medium-space-x);
+  gap: var(--click-alert-medium-space-gap);
+}
+
+.alert__text-wrapper__-KJUV a,
+.alert__text-wrapper__-KJUV a:focus,
+.alert__text-wrapper__-KJUV a:visited,
+.alert__text-wrapper__-KJUV a:hover {
+  color: inherit;
+  font: inherit;
+  text-decoration: underline;
+}
+
+.alert__title__R9v8v {
+  margin: 0;
+}
+
+.alert__title_size_small__UngXF {
+  font: var(--click-alert-small-typography-title-default);
+}
+
+.alert__title_size_medium__Uqu2N {
+  font: var(--click-alert-medium-typography-title-default);
+}
+
+.alert__text__-MlWp {
+  margin: 0;
+}
+
+.alert__text_size_small__7fH-5 {
+  font: var(--click-alert-small-typography-text-default);
+}
+
+.alert__text_size_medium__-2r2Z {
+  font: var(--click-alert-medium-typography-text-default);
+}
+
+.alert__dismiss__btduW {
+  display: flex;
+  margin-left: auto;
+  align-items: center;
+  border: none;
+  background-color: transparent;
+  color: inherit;
+  cursor: pointer;
+}

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

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const alert = "alert__7cYyI";
+const alert_type_default = "alert_type_default__PnVyJ";
+const alert_type_banner = "alert_type_banner__NjYrK";
+const alert_state_neutral = "alert_state_neutral__655E4";
+const alert_state_success = "alert_state_success__VUtee";
+const alert_state_warning = "alert_state_warning__kNUTL";
+const alert_state_danger = "alert_state_danger__DLuZk";
+const alert_state_info = "alert_state_info__-2HHz";
+const alert__icon = "alert__icon__2dyva";
+const alert__icon_size_small = "alert__icon_size_small__BGX9V";
+const alert__icon_size_medium = "alert__icon_size_medium__-9nLT";
+const alert__title = "alert__title__R9v8v";
+const alert__title_size_small = "alert__title_size_small__UngXF";
+const alert__title_size_medium = "alert__title_size_medium__Uqu2N";
+const alert__text = "alert__text__-MlWp";
+const alert__text_size_small = "alert__text_size_small__7fH-5";
+const alert__text_size_medium = "alert__text_size_medium__-2r2Z";
+const alert__dismiss = "alert__dismiss__btduW";
+const styles = {
+	alert: alert,
+	alert_type_default: alert_type_default,
+	alert_type_banner: alert_type_banner,
+	alert_state_neutral: alert_state_neutral,
+	alert_state_success: alert_state_success,
+	alert_state_warning: alert_state_warning,
+	alert_state_danger: alert_state_danger,
+	alert_state_info: alert_state_info,
+	"alert__icon-wrapper": "alert__icon-wrapper__q9T-7",
+	"alert__icon-wrapper_state_neutral": "alert__icon-wrapper_state_neutral__gIGl5",
+	"alert__icon-wrapper_state_success": "alert__icon-wrapper_state_success__9C1yD",
+	"alert__icon-wrapper_state_warning": "alert__icon-wrapper_state_warning__oJByv",
+	"alert__icon-wrapper_state_danger": "alert__icon-wrapper_state_danger__afPBa",
+	"alert__icon-wrapper_state_info": "alert__icon-wrapper_state_info__YI3qz",
+	"alert__icon-wrapper_size_small": "alert__icon-wrapper_size_small__E4NZL",
+	"alert__icon-wrapper_size_medium": "alert__icon-wrapper_size_medium__3bDZN",
+	"alert__icon-wrapper_type_banner": "alert__icon-wrapper_type_banner__4Zl-g",
+	alert__icon: alert__icon,
+	alert__icon_size_small: alert__icon_size_small,
+	alert__icon_size_medium: alert__icon_size_medium,
+	"alert__text-wrapper": "alert__text-wrapper__-KJUV",
+	"alert__text-wrapper_size_small": "alert__text-wrapper_size_small__Ahm-8",
+	"alert__text-wrapper_size_medium": "alert__text-wrapper_size_medium__FIX1N",
+	alert__title: alert__title,
+	alert__title_size_small: alert__title_size_small,
+	alert__title_size_medium: alert__title_size_medium,
+	alert__text: alert__text,
+	alert__text_size_small: alert__text_size_small,
+	alert__text_size_medium: alert__text_size_medium,
+	alert__dismiss: alert__dismiss
+};
+
+exports.alert = alert;
+exports.alert__dismiss = alert__dismiss;
+exports.alert__icon = alert__icon;
+exports.alert__icon_size_medium = alert__icon_size_medium;
+exports.alert__icon_size_small = alert__icon_size_small;
+exports.alert__text = alert__text;
+exports.alert__text_size_medium = alert__text_size_medium;
+exports.alert__text_size_small = alert__text_size_small;
+exports.alert__title = alert__title;
+exports.alert__title_size_medium = alert__title_size_medium;
+exports.alert__title_size_small = alert__title_size_small;
+exports.alert_state_danger = alert_state_danger;
+exports.alert_state_info = alert_state_info;
+exports.alert_state_neutral = alert_state_neutral;
+exports.alert_state_success = alert_state_success;
+exports.alert_state_warning = alert_state_warning;
+exports.alert_type_banner = alert_type_banner;
+exports.alert_type_default = alert_type_default;
+exports.default = styles;
+//# sourceMappingURL=Alert.module.css.cjs.map

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

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