npm - @clickhouse/click-ui - Versions diffs - 0.0.251-test.67 → 0.0.251-test.70 - Mend

@clickhouse/click-ui 0.0.251-test.67 → 0.0.251-test.70

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1993) hide show

package/README.md CHANGED Viewed

@@ -28,6 +28,14 @@ You can find the official docs for the Click UI design system and component libr
 * [Storybook](#storybook)
   - [Stories development server](#stories-development-server)
   - [Public static site](#public-static-site)
+* [Distribution](#distribution)
+  - [Build](#build)
+  - [Use Click UI](#use-click-ui)
+  - [Deep imports support](#deep-imports-support)
+  - [Examples](#examples)
+* [Themes](#themes)
+  - [Prevent theme flash](#prevent-theme-flash)
+  - [Theme Persistence](#theme-persistence)
 * [Releases and Versions](#releases-and-versions)
 ## Requirements
@@ -183,17 +191,37 @@ The latest static version's built and deployed automatically when contributing t
 Once deployed it's available publicly at [clickhouse.design/click-ui](https://clickhouse.design/click-ui).
-## How-to use
+## Distribution
-Click UI has been tested in NextJS, Gatsby, and Vite. If you run into problems using it in your app, please create an issue and our team will try to answer.
+The package is distributed as ESM.
-1. Navigate to your app's route and run
-   `npm i @clickhouse/click-ui`
-   or
-   `yarn add @clickhouse/click-ui`
-2. Make sure to wrap your application in the Click UI `ClickUIProvider`, without doing this, you may run into issues with styled-components. Once that's done, you'll be able to import the individual components that you want to use on each page. Here's an example of an `App.tsx` in NextJS.
+### Build
-```typescript
+To build the distribution version of the package run:
+```sh
+yarn build
+```
+> [!NOTE]
+> Optimizations are responsability of consumer or host apps, e.g. they can't remove unused code if already minified it! We ship unminified code so their build tools can: analyse and remove what they don't need or dead code, debug more easily, compress everything together in one go instead of handling conflicting compression algorithms, etc.
+### Deep imports support
+Deep imports are supported, you can import directly from path.
+> [!WARNING]
+> At time of writing, there are components that consume from theme provider, which means that these will fail when unwrapped. This will change in future versions.
+```ts
+import { Button } from '@clickhouse/click-ui/Button';
+```
+### Examples
+Here's a quick copy and paste NextJS example with interactive components you can play:
+```ts
 import { ClickUIProvider, Text, ThemeName, Title, Switch } from '@clickhouse/click-ui'
 import { useState } from 'react'
@@ -221,6 +249,11 @@ function App() {
 export default App
 ```
+> [!TIP]
+> An example of NextJS with Server Side Rendering (SSR) is available [here](/docs/examples/nextjs-app-router-with-ssr.md).
+To learn more about individual components, visit [Click UI components](https://clickhouse.design/click-ui).
 ## Changeset
 Learn to manage the versioning of changelog entries.
@@ -267,6 +300,75 @@ To consume all changesets, and update to the most appropriate semver version and
 yarn changeset:version
 ```
+## Themes
+Theming allows the end-user to select its preferred colour theme. You are responsible for managing your own theme state. Use your preferred state management solution (React state, Zustand, Redux, Context, etc.) and pass the current theme to the provider.
+> [!NOTE]
+> Currently, styling is done with css-in-js which might cause some flash since it has to compute the theme and apply it. We'll be moving from styled-components and this shall be changed and improved.
+### Prevent theme flash
+To prevent flash of incorrect theme, import the `InitCUIThemeScript` component and place it in the `<head>` of your HTML.
+The script reads the theme from localStorage and applies it immediately before React hydration to prevent flashing.
+```ts
+import { InitCUIThemeScript } from '@clickhouse/click-ui';
+```
+Simple usage (no props needed):
+```jsx
+<html>
+  <head>
+    <InitCUIThemeScript />
+  </head>
+  <body>
+    <ClickUIProvider theme={theme} persistTheme>
+      {children}
+    </ClickUIProvider>
+  </body>
+</html>
+```
+> [!NOTE]
+> On initial load, the component `InitCUIThemeScript` reads localStorage and applies the theme immediately before React hydration. When the theme changes the ClickUIProvider stores the new theme to localStorage (persistTheme must be enabled). Finally, when page loads/refreshes the process reads from the stored theme from localStorage.
+The process will check localStorage for a theme, e.g. in the key `cui-theme` and apply it immediately preventing flashing. Otherwise, if nothing's stored it'll fallback to the default value `light`.
+> [!IMPORTANT]
+> If you'd like to override the theme fallback when localStorage is empty, you can do it by setting a value for property `defaultTheme`, e.g. `dark`.
+### Theme Persistence
+To enable theme persistence across page reloads, enable `persistTheme` (default: `true`). The provider will automatically save theme changes to localStorage.
+Notice that we manage theme state in the consumer side:
+```tsx
+import { ClickUIProvider } from '@clickhouse/click-ui';
+import { useState } from 'react';
+export const App = () => {
+  const [theme, setTheme] = useState<'dark' | 'light'>('dark');
+  return (
+    <ClickUIProvider
+      theme={theme}
+      persistTheme
+    >
+      <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
+        Switch to {theme === 'dark' ? 'Light' : 'Dark'} Mode
+      </button>
+    </ClickUIProvider>
+  );
+}
+```
+> [!TIP]
+> An example of NextJS with Server Side Rendering (SSR) is available [here](/docs/examples/nextjs-app-router-with-ssr.md), where you can see how the root `data-cui-theme` is handled.
 ## Releases and Versions
 New versions and release notes are available at [GitHub Releases](https://github.com/ClickHouse/click-ui/releases).

package/dist/cjs/components/Accordion/Accordion.cjs ADDED Viewed

@@ -0,0 +1,103 @@
+'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 Icon = require('../Icon/Icon.cjs');
+const Spacer = require('../Spacer/Spacer.cjs');
+const Text = require('../Typography/Text/Text.cjs');
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const RadixAccordion__namespace = /*#__PURE__*/_interopNamespace(RadixAccordion);
+const Accordion = ({
+  title,
+  size = "md",
+  color,
+  icon,
+  iconSize,
+  gap,
+  children,
+  fillWidth = false,
+  ...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" }) }),
+      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.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;
+//# sourceMappingURL=Accordion.cjs.map

package/dist/cjs/components/Accordion/Accordion.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Accordion.cjs","sources":["../../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["import * as RadixAccordion from '@radix-ui/react-accordion';\nimport { styled } from 'styled-components';\nimport { IconSize } from '@/components/Icon/types';\nimport { Icon } from '@/components/Icon/Icon';\nimport { IconName } from '@/components/Icon/types';\nimport { Spacer } from '@/components/Spacer/Spacer';\nimport { Text } from '@/components/Typography/Text/Text';\nimport { ReactNode } from 'react';\n\ntype Size = 'sm' | 'md' | 'lg';\ntype Gap = 'sm' | 'md' | 'lg';\ntype Color = 'default' | 'link';\n\nexport interface AccordionProps\n extends\n SizeProp,\n Omit<RadixAccordion.AccordionSingleProps, 'type' | 'collapsible' | 'title'> {\n /** The title text or element displayed in the accordion header */\n title: ReactNode;\n /** The color variant of the accordion */\n color?: Color;\n /** Optional icon to display next to the title */\n icon?: IconName;\n /** Size of the optional icon */\n iconSize?: IconSize;\n /** Gap size between the header and content */\n gap?: Gap;\n /** The content to display when the accordion is expanded */\n children: React.ReactNode;\n /** Whether the accordion should fill the full width of its container */\n fillWidth?: boolean;\n}\n\ninterface SizeProp {\n /** The size variant of the accordion */\n size?: Size;\n}\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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"}

package/dist/cjs/components/Alert/Alert.cjs ADDED Viewed

@@ -0,0 +1,115 @@
+'use strict';
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const jsxRuntime = require('react/jsx-runtime');
+const Icon = require('../Icon/Icon.cjs');
+const react = require('react');
+const styledComponents = require('styled-components');
+const stateIconMap = {
+  neutral: "information",
+  success: "check",
+  warning: "warning",
+  danger: "warning",
+  info: "information"
+};
+const Alert = ({
+  text,
+  title = "",
+  size = "small",
+  state = "neutral",
+  type = "default",
+  showIcon = true,
+  dismissible,
+  onDismiss,
+  customIcon,
+  ...delegated
+}) => {
+  const [isVisible, setIsVisible] = react.useState(true);
+  const handleDismiss = react.useCallback(() => {
+    setIsVisible(false);
+    onDismiss?.();
+  }, [onDismiss]);
+  return isVisible ? /* @__PURE__ */ jsxRuntime.jsxs(Wrapper, { $size: size, $state: state, $type: type, "data-testid": "click-alert", ...delegated, children: [
+    dismissible && type === "banner" && /* @__PURE__ */ jsxRuntime.jsx(DismissWrapper, {}),
+    showIcon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper, { $state: state, $size: size, $type: type, children: /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { $size: size, size: "sm", "aria-hidden": true, name: customIcon || stateIconMap[state] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(TextWrapper, { $state: state, $size: size, children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx(Title, { $size: size, children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(Text, { $size: size, children: text })
+    ] }),
+    dismissible && /* @__PURE__ */ jsxRuntime.jsx(DismissWrapper, { "data-testid": "click-alert-dismiss-button", onClick: handleDismiss, children: /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { name: "cross", "aria-label": "close" }) })
+  ] }) : null;
+};
+const Wrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-1wvczk0-0"
+})(["display:flex;border-radius:", ";justify-content:", ";overflow:hidden;background-color:", ";color:", ";width:100%;"], ({
+  $type,
+  theme
+}) => $type === "banner" ? theme.sizes[0] : theme.click.alert.radii.end, ({
+  $type
+}) => $type === "banner" ? "center" : "start", ({
+  $state = "neutral",
+  theme
+}) => theme.click.alert.color.background[$state], ({
+  $state = "neutral",
+  theme
+}) => theme.click.alert.color.text[$state]);
+const IconWrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-1wvczk0-1"
+})(["display:flex;align-items:center;background-color:", ";", ""], ({
+  $state = "neutral",
+  $type,
+  theme
+}) => $type === "banner" ? "none" : theme.click.alert.color.iconBackground[$state], ({
+  $state = "neutral",
+  $size,
+  theme
+}) => `
+    color: ${theme.click.alert.color.iconForeground[$state]};
+    padding: ${theme.click.alert[$size].space.y} 0 ${theme.click.alert[$size].space.y} ${theme.click.alert[$size].space.x};
+  `);
+const StyledIcon = styledComponents.styled(Icon.Icon).withConfig({
+  componentId: "sc-1wvczk0-2"
+})(["", ""], ({
+  $size,
+  theme
+}) => `
+    height: ${theme.click.alert[$size].icon.height};
+    width: ${theme.click.alert[$size].icon.width};
+  `);
+const TextWrapper = styledComponents.styled.div.withConfig({
+  componentId: "sc-1wvczk0-3"
+})(["display:flex;flex-flow:column;word-break:break-word;", " a,a:focus,a:visited,a:hover{font:inherit;color:inherit;text-decoration:underline;}"], ({
+  $size,
+  theme
+}) => `
+    gap: ${theme.click.alert[$size].space.gap};
+    padding: ${theme.click.alert[$size].space.y} ${theme.click.alert[$size].space.x};
+    `);
+const Title = styledComponents.styled.h6.withConfig({
+  componentId: "sc-1wvczk0-4"
+})(["margin:0;font:", ";"], ({
+  theme,
+  $size
+}) => theme.click.alert[$size].typography.title.default);
+const Text = styledComponents.styled.div.withConfig({
+  componentId: "sc-1wvczk0-5"
+})(["margin:0;font:", ";"], ({
+  theme,
+  $size
+}) => theme.click.alert[$size].typography.text.default);
+const DismissWrapper = styledComponents.styled.button.withConfig({
+  componentId: "sc-1wvczk0-6"
+})(["display:flex;align-items:center;margin-left:auto;border:none;background-color:transparent;color:inherit;cursor:pointer;"]);
+const DangerAlert = (props) => /* @__PURE__ */ jsxRuntime.jsx(Alert, { ...props, state: "danger" });
+const InfoAlert = (props) => /* @__PURE__ */ jsxRuntime.jsx(Alert, { ...props, state: "info" });
+const SuccessAlert = (props) => /* @__PURE__ */ jsxRuntime.jsx(Alert, { ...props, state: "success" });
+const WarningAlert = (props) => /* @__PURE__ */ jsxRuntime.jsx(Alert, { ...props, state: "warning" });
+exports.Alert = Alert;
+exports.DangerAlert = DangerAlert;
+exports.InfoAlert = InfoAlert;
+exports.SuccessAlert = SuccessAlert;
+exports.WarningAlert = WarningAlert;
+//# sourceMappingURL=Alert.cjs.map

package/dist/cjs/components/Alert/Alert.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"Alert.cjs","sources":["../../../../src/components/Alert/Alert.tsx"],"sourcesContent":["import { Icon } from '@/components/Icon/Icon';\nimport { IconName } from '@/components/Icon/types';\nimport { useState, ReactNode, useCallback } from 'react';\nimport { styled } from 'styled-components';\n\ntype AlertType = 'default' | 'banner';\ntype AlertSize = 'small' | 'medium';\ntype AlertState = 'neutral' | 'success' | 'warning' | 'danger' | 'info';\nexport type AlertProps = {\n /** The visual state/severity of the alert */\n state?: AlertState;\n /** Optional title displayed above the text */\n title?: ReactNode;\n /** The main message text of the alert */\n text: ReactNode;\n /** The size variant of the alert */\n size?: AlertSize;\n /** The type of alert (default or banner) */\n type?: AlertType;\n /** Whether to show the state icon */\n showIcon?: boolean;\n /** Custom icon to display instead of the default state icon */\n customIcon?: IconName;\n /** Whether the alert can be dismissed */\n dismissible?: boolean;\n /** Callback when the alert is dismissed (requires dismissible=true) */\n onDismiss?: () => void;\n};\n\nconst stateIconMap: Record<AlertState, IconName> = {\n neutral: 'information',\n success: 'check',\n warning: 'warning',\n danger: 'warning',\n info: 'information',\n};\n\nconst Alert = ({\n text,\n title = '',\n size = 'small',\n state = 'neutral',\n type = 'default',\n showIcon = true,\n dismissible,\n onDismiss,\n customIcon,\n ...delegated\n}: AlertProps) => {\n const [isVisible, setIsVisible] = useState(true);\n\n const handleDismiss = useCallback(() => {\n setIsVisible(false);\n onDismiss?.();\n }, [onDismiss]);\n\n return isVisible ? (\n <Wrapper\n $size={size}\n $state={state}\n $type={type}\n data-testid=\"click-alert\"\n {...delegated}\n >\n {dismissible && type === 'banner' && <DismissWrapper></DismissWrapper>}\n {showIcon && (\n <IconWrapper\n $state={state}\n $size={size}\n $type={type}\n >\n <StyledIcon\n $size={size}\n size=\"sm\"\n aria-hidden\n name={customIcon || stateIconMap[state]}\n />\n </IconWrapper>\n )}\n <TextWrapper\n $state={state}\n $size={size}\n >\n {title && <Title $size={size}>{title}</Title>}\n <Text $size={size}>{text}</Text>\n </TextWrapper>\n {dismissible && (\n <DismissWrapper\n data-testid=\"click-alert-dismiss-button\"\n onClick={handleDismiss}\n >\n <Icon\n name=\"cross\"\n aria-label=\"close\"\n />\n </DismissWrapper>\n )}\n </Wrapper>\n ) : null;\n};\n\nconst Wrapper = styled.div<{\n $state: AlertState;\n $size: AlertSize;\n $type: AlertType;\n}>`\n display: flex;\n border-radius: ${({ $type, theme }) =>\n $type === 'banner' ? theme.sizes[0] : theme.click.alert.radii.end};\n justify-content: ${({ $type }) => ($type === 'banner' ? 'center' : 'start')};\n overflow: hidden;\n background-color: ${({ $state = 'neutral', theme }) =>\n theme.click.alert.color.background[$state]};\n color: ${({ $state = 'neutral', theme }) => theme.click.alert.color.text[$state]};\n width: 100%;\n`;\n\nconst IconWrapper = styled.div<{\n $state: AlertState;\n $size: AlertSize;\n $type: AlertType;\n}>`\n display: flex;\n align-items: center;\n background-color: ${({ $state = 'neutral', $type, theme }) =>\n $type === 'banner' ? 'none' : theme.click.alert.color.iconBackground[$state]};\n ${({ $state = 'neutral', $size, theme }) => `\n color: ${theme.click.alert.color.iconForeground[$state]};\n padding: ${theme.click.alert[$size].space.y} 0 ${theme.click.alert[$size].space.y} ${theme.click.alert[$size].space.x};\n `}\n`;\n\nconst StyledIcon = styled(Icon)<{ $size: AlertSize }>`\n ${({ $size, theme }) => `\n height: ${theme.click.alert[$size].icon.height};\n width: ${theme.click.alert[$size].icon.width};\n `}\n`;\nconst TextWrapper = styled.div<{ $state: AlertState; $size: AlertSize }>`\n display: flex;\n flex-flow: column;\n word-break: break-word;\n ${({ $size, theme }) => `\n gap: ${theme.click.alert[$size].space.gap};\n padding: ${theme.click.alert[$size].space.y} ${theme.click.alert[$size].space.x};\n `}\n\n a,\n a:focus,\n a:visited,\n a:hover {\n font: inherit;\n color: inherit;\n text-decoration: underline;\n }\n`;\n\nconst Title = styled.h6<{ $size: AlertSize }>`\n margin: 0;\n font: ${({ theme, $size }) => theme.click.alert[$size].typography.title.default};\n`;\nconst Text = styled.div<{ $size: AlertSize }>`\n margin: 0;\n font: ${({ theme, $size }) => theme.click.alert[$size].typography.text.default};\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\nconst DangerAlert = (props: AlertProps) => (\n <Alert\n {...props}\n state=\"danger\"\n />\n);\n\nconst InfoAlert = (props: AlertProps) => (\n <Alert\n {...props}\n state=\"info\"\n />\n);\n\nconst SuccessAlert = (props: AlertProps) => (\n <Alert\n {...props}\n state=\"success\"\n />\n);\n\nconst WarningAlert = (props: AlertProps) => (\n <Alert\n {...props}\n state=\"warning\"\n />\n);\n\nexport { Alert, DangerAlert, InfoAlert, SuccessAlert, WarningAlert };\n"],"names":["stateIconMap","neutral","success","warning","danger","info","Alert","text","title","size","state","type","showIcon","dismissible","onDismiss","customIcon","delegated","isVisible","setIsVisible","useState","handleDismiss","useCallback","jsxs","jsx","Icon","Wrapper","styled","div","withConfig","componentId","$type","theme","sizes","click","alert","radii","end","$state","color","background","IconWrapper","iconBackground","$size","iconForeground","space","y","x","StyledIcon","icon","height","width","TextWrapper","gap","Title","h6","typography","default","Text","DismissWrapper","button","DangerAlert","props","InfoAlert","SuccessAlert","WarningAlert"],"mappings":"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"}