@clickhouse/click-ui 0.6.1-rc1 → 0.6.1

package/dist/esm/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/esm/components/Accordion/Accordion.module.css.js

@@ -0,0 +1,22 @@
+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"};
+
+export { accordion, accordion__trigger, accordion__trigger_color_default, accordion__trigger_color_link, accordion__trigger_size_lg, accordion__trigger_size_md, accordion__trigger_size_sm, styles as default };
+//# sourceMappingURL=Accordion.module.css.js.map

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

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

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

@@ -1,79 +1,76 @@
+import "./Accordion.css";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as RadixAccordion from '@radix-ui/react-accordion';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './Accordion.module.css.js';
 import { Icon as SvgImage } from '../Icon/index.js';
 import { Text } from '../Text/index.js';
 import { Spacer } from '../Spacer/index.js';
+import { cva } from 'class-variance-authority';
 
+const rootVariants = cva(styles.accordion, {
+  variants: {
+    fillWidth: {
+      true: styles["accordion_fill-width"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    fillWidth: false
+  }
+});
+const triggerVariants = cva(styles.accordion__trigger, {
+  variants: {
+    size: {
+      sm: styles.accordion__trigger_size_sm,
+      md: styles.accordion__trigger_size_md,
+      lg: styles.accordion__trigger_size_lg
+    },
+    color: {
+      default: styles.accordion__trigger_color_default,
+      link: styles.accordion__trigger_color_link
+    },
+    fillWidth: {
+      true: styles["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__ */ jsx(AccordionRoot, { type: "single", collapsible: true, $fillWidth: fillWidth, ...delegated, children: /* @__PURE__ */ jsxs(RadixAccordion.Item, { value: "item", children: [
-  /* @__PURE__ */ jsxs(AccordionTrigger, { $size: size, color, $fillWidth: fillWidth, children: [
-    /* @__PURE__ */ jsxs(AccordionIconsWrapper, { children: [
-      /* @__PURE__ */ jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right", size: iconSize || size, "aria-label": "accordion icon" }) }),
+}) => /* @__PURE__ */ jsx(RadixAccordion.Root, { type: "single", collapsible: true, ...delegated, className: cn(rootVariants({
+  fillWidth
+}), className), children: /* @__PURE__ */ jsxs(RadixAccordion.Item, { value: "item", children: [
+  /* @__PURE__ */ jsxs(RadixAccordion.Trigger, { className: triggerVariants({
+    size,
+    color,
+    fillWidth
+  }), children: [
+    /* @__PURE__ */ jsxs("div", { className: styles["accordion__icons-wrapper"], children: [
+      /* @__PURE__ */ jsx("div", { className: styles["accordion__icon-wrapper"], children: /* @__PURE__ */ jsx(SvgImage, { name: "chevron-right", size: iconSize || size, "aria-label": "accordion icon" }) }),
       icon ? /* @__PURE__ */ jsx(SvgImage, { name: icon, size: iconSize || size }) : null
     ] }),
     /* @__PURE__ */ jsx(Text, { component: "div", size, fillWidth, children: title })
   ] }),
-  /* @__PURE__ */ jsxs(AccordionContent, { children: [
+  /* @__PURE__ */ jsxs(RadixAccordion.Content, { children: [
     /* @__PURE__ */ jsx(Spacer, { size: gap }),
     children
   ] })
 ] }) });
-const AccordionRoot = styled(RadixAccordion.Root).withConfig({
-  componentId: "sc-1ysh219-0"
-})(["", ";"], ({
-  $fillWidth
-}) => $fillWidth && "width: 100%");
-const AccordionTrigger = styled(RadixAccordion.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 = 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 = styled.div.withConfig({
-  componentId: "sc-1ysh219-3"
-})(["display:flex;align-items:center;justify-content:center;"]);
-const AccordionContent = styled(RadixAccordion.Content).withConfig({
-  componentId: "sc-1ysh219-4"
-})([""]);
-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 = styled(Accordion).withConfig({
-  componentId: "sc-1ysh219-6"
-})([""]);
 
-export { AccordionToExport as Accordion };
+export { Accordion };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","Icon","AccordionRoot","styled","RadixAccordion","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.js","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","cn","Icon"],"mappings":"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"}

package/dist/esm/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/esm/components/Alert/Alert.module.css.js

@@ -0,0 +1,53 @@
+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
+};
+
+export { alert, alert__dismiss, alert__icon, alert__icon_size_medium, alert__icon_size_small, alert__text, alert__text_size_medium, alert__text_size_small, alert__title, alert__title_size_medium, alert__title_size_small, alert_state_danger, alert_state_info, alert_state_neutral, alert_state_success, alert_state_warning, alert_type_banner, alert_type_default, styles as default };
+//# sourceMappingURL=Alert.module.css.js.map

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

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