@clickhouse/click-ui 0.0.252-rc.6 → 0.1.0-rc.70

package/README.md

@@ -28,7 +28,27 @@ 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)
-* [Releases and Versions](#releases-and-versions)
+* [Distribution](#distribution)
+  - [Build](#build)
+  - [Use Click UI](#use-click-ui)
+  - [Deep imports support](#deep-imports-support)
+  - [Examples](#examples)
+* [Assets Management](#assets-management)
+  - [Convert SVG to React Component](#convert-svg-to-react-component)
+* [Changesets](#changesets)
+  - [Add a new changeset](#add-a-new-changeset)
+  - [Checking the changeset status](#checking-the-changeset-status)
+  - [Create a new version and changelogs](#create-a-new-version-and-changelogs)
+* [Release](#release)
+  - [Required admin permissions](#required-admin-permissions)
+  - [Create a new release pull request](#create-a-new-release-pull-request)
+  - [Publish](#publish)
+  - [Maintaining Multiple Versions](#maintaining-multiple-versions)
+  - [Release Cycle](#release-cycle)
+  - [Applying Fixes to Stable Versions](#applying-fixes-to-stable-versions)
+  - [Switching Release Modes](#switching-release-modes)
+* [Contributing](#contributing)
+  - [Conventional commits](#conventional-commits)
 
 ## Requirements
 
@@ -76,12 +96,16 @@ Tokens are provided by a style directionary sourced from [tokens-studio](https:/
 
 It's expected to have theme tokens provided externally, e.g. Figma tokens-studio output is stored in the repository and a PR's opened. The assets are stored in the directory [./tokens/themes].
 
-Once [./tokens/themes] files are updated, we must regenerate the tokens:
+Once [./tokens/themes] files are updated or provided from exernal source, e.g. Figma, we must regenerate the tokens for consumption in the project.
+
+Run the command to generate tokens in the path `./src/theme/tokens/`:
 
 ```sh
-yarn generate-tokens
+yarn generate:tokens
 ```
 
+Once done, you must commit the changes.
+
 Learn more about tokens-studio [here](https://documentation.tokens.studio/).
 
 ### Local development
@@ -94,6 +118,7 @@ You can start the Storybook development server by:
 yarn dev
 ```
 
+
 We do NOT maintain a separate development environment; our Storybook stories serve as the source of truth for component implementation.
 
 > [!IMPORTANT]
@@ -140,7 +165,6 @@ Once ready, you can run tests by:
 ```sh
 yarn test:chromatic
 ```
-
 > [!NOTE]
 > Chromatic does NOT generate a report in the terminal due to its cloud nature, which only outputs:
 > - Build status, e.g. uploading or testing
@@ -177,23 +201,132 @@ Once built, you can serve the static files by:
 yarn storybook:serve
 ```
 
-### Public static site
+### Public Static Site
 
 The latest static version's built and deployed automatically when contributing to `main` of [Click UI](https://github.com/ClickHouse/click-ui).
 
 Once deployed it's available publicly at [clickhouse.design/click-ui](https://clickhouse.design/click-ui).
 
-## How-to use
+## Changeset
+
+Learn to manage the versioning of changelog entries.
+
+The following is a brief description of available commands to allow a person making a contribution make key decisions about their changes.
+
+It'll generate a changeset, which is effectively two key bits of information:
+
+- A version type which follows [semver](https://semver.org/)
+- Change information placed in a changelog
+
+Make good use of this simple workflow to help us release new package versions more confidently.
+
+### Add a new changeset
+
+When contributing, declare an intent or describe the changes you're making or adding to a release by executing the `changeset:add` command.
+
+The wizard will ask a few questions and generate a changelog entry for you:
+
+```sh
+yarn changeset:add
+```
+
+The changesets tool keeps track of all declared changes in the `.changeset` directory.
+
+Once completed, you must commit the changeset!
+
+### Checking the changeset status
+
+To check if your branch contains a changeset:
+
+```sh
+yarn changeset:status
+```
+
+### Create a new version and changelogs
+
+To consume all changesets, and update to the most appropriate semver version and write a friendly changelog based on those changesets, the following command is available:
+
+> [!IMPORTANT]
+> Consuming changesets is done automatically in the CI/CD environment. For this reason, you don't have to execute the command, as a contributor your single concern should be adding changesets to any relevant changes.
+
+```sh
+yarn changeset:version
+```
+
+## Distribution
+
+The package is distributed as ESM.
+
+### Build
+
+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.
+
+### Use Click UI
 
-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.
+Navigate to your app's work directory and add the package.
 
-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.
+Here, we use `yarn` but you can use your favorite package manager, e.g. pnpm.
+
+```sh
+yarn add @clickhouse/click-ui
+```
+> [!NOTE]
+> Click UI should be supported by react frameworks.
+> If you run into any issues consuming it in your react app, report it [here](https://github.com/ClickHouse/click-ui/issues/new). Provide all important details, including information on how to replicate the issue!
+
+Once installed, wrap the application with Click UI provider:
+
+```js
+import { ClickUIProvider } from '@clickhouse/click-ui'
+
+export default () => {
+  return (
+    <ClickUIProvider theme='light'>
+      <p>Hello world!</p>
+    </ClickUIProvider>
+  );
+}
+```
+
+After, you are able to import your favorite [Click UI components](https://clickhouse.design/click-ui).
+
+```js
+import { ClickUIProvider, Title } from '@clickhouse/click-ui'
+
+export default () => {
+  return (
+    <ClickUIProvider theme='light'>
+      <Title type='h1'>Click UI Example</Title>
+    </ClickUIProvider>
+  );
+}
+```
 
-```typescript
+To learn more about individual components, visit [Click UI components](https://clickhouse.design/click-ui).
+
+### 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,59 +354,155 @@ function App() {
 export default App
 ```
 
-## Changeset
+## Assets management
 
-Learn to manage the versioning of changelog entries.
+The Click UI has image asset files, such as Flags, Icons, Logos and Payments.
 
-The following is a brief description of available commands to allow a person making a contribution make key decisions about their changes.
+Files are originally curated in the context of the design system Figma project. Once exported/sourced from the Figma project file these have to be transformed into the Click UI desired format, e.g. an SVG as a React Component.
 
-It'll generate a changeset, which is effectively two key bits of information:
+### Convert SVG to React Component
 
-- A version type which follows [semver](https://semver.org/)
-- Change information placed in a changelog
+We provide an automated tool to convert SVG files to React components for Flags, Icons, Logos and Payments.
 
-Make good use of this simple workflow to help us release new package versions more confidently.
+Let's assume that you want to add a new logo. You are a macOS user and have stored the logo SVG file in your home **Downloads** directory, e.g. **/Users/MyUsername/Downloads**.
 
-### Add a new changeset
+In the root of Click UI repository, you'd run:
 
-When contributing, declare an intent or describe the changes you're making or adding to a release by executing the `changeset:add` command.
+```sh
+yarn convert:logo ~/Downloads/click-ui.svg
+```
 
-The wizard will ask a few questions and generate a changelog entry for you:
+Or provide explicit component name:
 
 ```sh
-yarn changeset:add
+yarn convert:logo ~/Downloads/click-ui.svg Click_UI
 ```
 
-The changesets tool keeps track of all declared changes in the `.changeset` directory.
+Alternatively, you can replace `logo` in the command by the remaining assets types, e.g. `convert:flag` or `convert:icon`.
 
-Once completed, you must commit the changeset!
+For more detailed instructions, see [converting SVG to React Components](./docs/converting-svg-to-react-components).
 
-### Checking the changeset status
+## Release
 
-To check if your branch contains a changeset:
+**TLDR;** Use the [Create a new release Pull Request](#create-a-new-release-pull-request) for automated process.
 
-```sh
-yarn changeset:status
-```
+You're expected to [create a new version](#create-a-new-version-and-changelogs), which will consume all changesets, and update to the most appropriate semantic version (semver) based on those changesets; which also writes changelog entries for each consumed changeset file content.
 
-### Create a new version and changelogs
+Once the artifacts and version bump is completed, the package can be published to npm. Doing all of this manually can be tedious and prone to mistakes, as such, we have a GitHub action that creates a Pull request containing all of this for team review; And once approved, another GitHub action that publishes the package to npm and creates a GitHub release.
 
-To consume all changesets, and update to the most appropriate semver version and write a friendly changelog based on those changesets, the following command is available:
+### Required admin permissions
 
-> [!IMPORTANT]
-> Consuming changesets is done automatically in the CI/CD environment. For this reason, you don't have to execute the command, as a contributor your single concern should be adding changesets to any relevant changes.
+The repository administrator has to set correct permissions for changeset workflow to work, namely: GitHub repository workflow permissons and add GitHub ascitons as a trusted publisher in NPM package settings.
+
+#### GitHub Workflow Permissions
+
+This workflow requires permissions to "Create pull requests", which can be configured in [workflow permissions](https://github.com/Clickhouse/click-ui/settings/actions).
+
+If you don't have permission to change these settings, you can use workflow authentication to generate a GitHub token as described [here](https://github.com/apps/workflow-authentication-public). This will generate a short-lived access token that grants the workflow "create pull requests" permission.
+
+For more detailed information about `actions/create-github-app-token`, see the documentation [here](https://github.com/actions/create-github-app-token).
+
+#### NPM Trusted publisher
+
+Add GitHub actions as a trusted publisher on [NPM package settings](https://www.npmjs.com/package/@clickhouse/click-ui). Make sure you select the provider "GitHub Actions", enter the repository "Clickhouse/click-ui" and finally the workflow name as "release-publisher.yml".
+
+### Create a new release Pull Request
+
+Consuming changesets is done automatically in the CI/CD environmment.
+
+To create a new release, locate the [create release](https://github.com/ClickHouse/click-ui/actions/workflows/create-release.yml) and use the interface to select the release type, e.g. release candidate (rc), testing, stable or latest.
+
+It'll create a new Pull request for review, e.g. changelog, version bump, etc. There, you have the opportunity to make any further tweaks, refinements and check if everything's correct.
+
+You can find the pull requests in the GitHub tab [Pull Request](https://github.com/ClickHouse/click-ui/pulls). E.g. let's say you're about to release v0.1.0-rc.1, you'd find `chore: 🤖 release v0.1.0-rc.1 (rc)`.
+
+> [!WARNING]
+> Releasing a "stable" or "latest" version requires that you have previously published a pre-release version (e.g. test or rc / release candidate). This process exists to help us maintain quality standards.
+> Only promote a release to "stable" or "latest" when you are confident it is production-ready, e.g., after thorough testing and gathering feedback from users or consumers. Take extra caution with "latest" in particular, as it becomes the default version installed by users.
+
+Once the pull request is approved and merged, it'll trigger the release of a new version to [npm registry](https://www.npmjs.com/package/@clickhouse/click-ui?activeTab=versions).
+
+The process will also create a branch for long lived version maintenance support, e.g. `chore/v0.5.0-rc.1`.
+
+### Publish
+
+Once you've reviewed the changelog entries and version changes, addressed all [Pull Request](#create-a-new-release-pull-request) comments and suggestions, and are confident everything looks correct, go ahead and **squash and merge** the pull request.
+
+Merging to `main` will automatically trigger the [release publisher](https://github.com/ClickHouse/click-ui/actions/workflows/release-publisher.yml), which will publish the package to npm. If successful, the new version will appear under the [@clickhouse/click-ui](https://www.npmjs.com/package/@clickhouse/click-ui?activeTab=versions) versions tab on npm, and a new [GitHub release](https://github.com/ClickHouse/click-ui/releases) will be created containing all generated release assets.
+
+### Maintaining Multiple Versions
+
+We maintain long-lived branches for each version, so you can get fixes without upgrading:
 
 ```sh
-yarn changeset:version
+main → active development (latest features)
+├── chore/v2.2.x → maintenance for v2.2.x releases
+├── chore/v1.x.x → maintenance for v1.x.x releases
+└── chore/v0.5.x → maintenance for v0.5.x releases
 ```
 
-## Releases and Versions
+Here's how it works:
+
+New features and improvements land in main, while critical bugs and security fixes are backported to the relevant maintenance branch. We recommend tracking changes against a base minor branch (e.g. chore/v1.1.x rather than chore/v1.1.1) so that all patches within a minor version are consolidated in one place. Note that the branch naming convention may change in the future (e.g. to v1 or v1.x), but this is the current approach at the time of writing.
+
+> [!NOTE]
+> While some changes might only make sense for a specific version, it's best practice to source fixes from `main` whenever possible. This keeps versions aligned and reduces diversion over time. Otherwise, you must make sure that your changes are put in the main development branch.
+
+Let's say that you need something specific for an older version, you can work in version isolation without pulling in changes from active development.
 
-New versions and release notes are available at [GitHub Releases](https://github.com/ClickHouse/click-ui/releases).
+Each release gets tagged and lives on its own version branch, e.g. `v1.5.0` making it easy to apply patches without forcing you to upgrade to the latest version.
 
-To create a new release and publish a new version, follow the instructions in [publish.md](./docs/publish.md).
+#### Release Cycle
+
+Our releases start from the `main` branch and go through a simple two-step process to help ensure quality:
+
+**Pre-release (test/rc)**
+
+1. Create a pre-release pull request, e.g. a test or release candidate (rc)
+2. The team reviews and provides feedback
+3. Once approved and merged, our release publisher pushes it to npm, e.g. `1.2.5-test.1`
+4. You can find all pre-release versions in the [npm package versions tab](https://www.npmjs.com/package/@clickhouse/click-ui?activeTab=versions)
+
+**Production release (latest)**
+
+1. Once a pre-release has been tested and available on stage, you can promote it to production
+2. Create a "latest" release PR for team review
+3. After approval and merge, the publisher strips the pre-release suffix and publishes the final version, e.g. `1.2.5-test.1` becomes `1.2.5`
+
+This workflow lets us test changes at any time before they reach production while keeping the process simple, inclusive and collaborative!
+
+#### Applying Fixes to Stable Versions
+
+To keep active development moving while ensuring you can apply critical fixes when needed, the Click UI team recommends the following approach:
+
+1. Choose the version needing a fix (e.g. `chore/v0.5.0`)
+2. Apply your changes, like backporting a security fix or updating a design token
+3. Create a new release from that branch
+
+This lets us experiment and iterate freely on Click UI while giving you or your team a quick path to deploy urgent fixes without waiting for the next major release cycle.
+
+> [!WARNING]
+> Always use `chore/vX.X.X` branches for maintenance work, not `changeset-release/v*` branches. The `changeset-release` branches are auto-generated during publishing, e.g. `changeset-release/v0.2.0-test.0`) and not meant for direct updates. All version-specific changes should go through `chore/vX.X.X` branches where the full commit history is tracked.
+
+#### Switching Release Modes
+
+A new changeset is required before switching between release modes.
+
+Changesets are how the release pipeline determines whether anything has actually changed between versions. Without one, promoting a release from one mode to another (for example, from `test` to `rc`) would produce a package that is identical in content but with a different version label, which is meaningless and potentially confusing.
+
+Here's what changes in package.json:
+
+```sh
+{
+  "name": "@clickhouse/click-ui",
+-  "version": "1.1.0-test.1",
++  "version": "1.1.0-rc.1",
+  ...
+}
+```
+Always include a changeset to ensure each promotion reflects real, trackable changes.
 
-## Conventional commits
+### Conventional commits
 
 We prefer to commit our work following [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0) conventions. Conventional Commits are a simple way to write commit messages that both people and computers can understand. It help us keep track fo changes in a consistent manner, making it easier to see what was added, changed, or fixed in each commit or update.
 

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

@@ -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

@@ -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

@@ -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