@clickhouse/click-ui 0.0.252-rc.6 → 0.0.252-test.7

package/README.md

@@ -22,13 +22,33 @@ You can find the official docs for the Click UI design system and component libr
 * [Development](#development)
   - [Generating design tokens](#generating-design-tokens)
   - [Local development](#local-development)
+  - [Circular dependency check](#circular-dependency-check)
 * [Tests](#Tests)
   - [Functional tests](#functional-tests)
   - [Visual regression tests](#visual-regression-tests)
 * [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)
+  - [Component-level imports](#component-level-imports)
+  - [Public API](#public-api)
+  - [Examples](#examples)
+* [Themes](#themes)
+  - [Prevent theme flash](#prevent-theme-flash)
+  - [Theme Persistence](#theme-persistence)
+  - [Custom styling with CSS](#custom-styling-with-css)
+* [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)
+* [Contributing](#contributing)
+  - [Component RFC](#component-rfc)
+  - [Conventional commits](#conventional-commits)
 
 ## Requirements
 
@@ -70,18 +90,32 @@ After cloning the repository change to the work directory and install the depend
 yarn
 ```
 
+### Circular dependency check
+
+Check for circular dependencies that can cause build and runtime issues:
+
+```sh
+yarn circular-dependency:check
+```
+
+If circular dependencies are found it'll exit with a report showing the affeced files which require your attention.
+
 ### Generating design tokens
 
 Tokens are provided by a style directionary sourced from [tokens-studio](https://tokens.studio/).
 
 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 +128,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 +175,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 +211,180 @@ 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
+
+Navigate to your app's work directory and add the package.
+
+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>
+  );
+}
+```
+
+To learn more about individual components, visit [Click UI components](https://clickhouse.design/click-ui).
+
+### Component-level imports
+
+Components can be imported directly by name, providing a succinct import syntax.
+
+```ts
+import { Button } from '@clickhouse/click-ui/Button';
+```
+
+The exports map is auto-generated from the public API defined in `src/index.ts`, learn to manage by reading the [Public API](#public-api) section.
 
-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.
+> [!WARNING]
+> Some components depend on the theme provider. These will fail if used outside of `ClickUIProvider`. In next versions, this will change and consumer apps will have the ability to use them without the provider wrapping.
 
-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.
+### Public API
 
-```typescript
+The public API is controlled through the main barrel file at `src/index.ts`. This file serves as the single source of truth for all components, types, and utilities exported by the package.
+
+> [!NOTE]
+> The `generate:exports` script uses the TypeScript Compiler API to parse `src/index.ts` directly and extract only the components that are explicitly exported. This ensures that only public API components get subpath exports in `package.json`, while internal components remain inaccessible via direct imports.
+
+Maintainers can add or remove components from the public API by updating the exports in this file. Each export should include both the component and its associated types to ensure consumers have full type support.
+
+Here's an example of `src/index.ts`:
+
+```ts
+// Adding a new component to the public API
+export { Button } from './components/Button';
+export type { ButtonProps } from './components/Button';
+
+// Removing a component (simply delete)
+```
+
+After, you must run the `generate:exports` to update the component-level exports in the package.json file:
+
+```sh
+yarn generate:exports
+```
+
+Once complete, commit your changes.
+
+#### Breaking change support
+
+When introducing breaking changes or deprecating types, maintainers can provide retroactive support by creating custom type aliases. This allows consumers to migrate gradually while maintaining backwards compatibility.
+
+```ts
+// Backwards compatibility: export legacy type name
+// that maps to the new type
+export type { NewComponentProps as LegacyComponentProps } from './components/NewComponent';
+
+// Or create a custom type for transition periods
+export type DeprecatedProps = NewProps & {
+  /** @deprecated Use `newProp` instead */
+  oldProp?: string;
+};
+```
+
+> [!NOTE]
+> When deprecating types or components, consider adding JSDoc `@deprecated` annotations to guide consumers towards the updated API. This provides clear migration paths and IDE warnings.
+
+### 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 +412,154 @@ function App() {
 export default App
 ```
 
-## Changeset
+## Themes
 
-Learn to manage the versioning of changelog entries.
+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.
 
-The following is a brief description of available commands to allow a person making a contribution make key decisions about their changes.
+> [!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.
 
-It'll generate a changeset, which is effectively two key bits of information:
+### Prevent theme flash
 
-- A version type which follows [semver](https://semver.org/)
-- Change information placed in a changelog
+To prevent flash of incorrect theme, import the `InitCUIThemeScript` component and place it in the `<head>` of your HTML.
 
-Make good use of this simple workflow to help us release new package versions more confidently.
+The script reads the theme from localStorage and applies it immediately before React hydration to prevent flashing.
 
-### Add a new changeset
+```ts
+import { InitCUIThemeScript } from '@clickhouse/click-ui';
+```
 
-When contributing, declare an intent or describe the changes you're making or adding to a release by executing the `changeset:add` command.
+Simple usage (no props needed):
 
-The wizard will ask a few questions and generate a changelog entry for you:
+```jsx
+<html>
+  <head>
+    <InitCUIThemeScript />
+  </head>
+  <body>
+    <ClickUIProvider theme={theme} persistTheme>
+      {children}
+    </ClickUIProvider>
+  </body>
+</html>
+```
 
-```sh
-yarn changeset:add
+> [!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>
+  );
+};
 ```
 
-The changesets tool keeps track of all declared changes in the `.changeset` directory.
+> [!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.
 
-Once completed, you must commit the changeset!
+### Custom Styling with CSS
 
-### Checking the changeset status
+The `InitCUIThemeScript` applies a `data-cui-theme` attribute to the root `<html>` element, allowing you to style custom elements with vanilla CSS.
 
-To check if your branch contains a changeset:
+For example, edit your consumer app `stylesheet` and introduce custom styles as follows:
 
-```sh
-yarn changeset:status
+```css
+[data-cui-theme="light"] {
+  --my-app-bg: #ffffff;
+  --my-app-text: #1a1a1a;
+}
+
+[data-cui-theme="dark"] {
+  --my-app-bg: #0a0a0a;
+  --my-app-text: #f5f5f5;
+}
+
+.my-custom-component {
+  background: var(--my-app-bg);
+  color: var(--my-app-text);
+}
 ```
 
-### Create a new version and changelogs
+## Assets management
 
-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:
+The Click UI has image asset files, such as Flags, Icons, Logos and Payments.
 
-> [!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.
+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.
+
+### Convert SVG to React Component
+
+We provide an automated tool to convert SVG files to React components for Flags, Icons, Logos and Payments.
+
+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**.
+
+In the root of Click UI repository, you'd run:
 
 ```sh
-yarn changeset:version
+yarn convert:logo ~/Downloads/click-ui.svg
+```
+
+Or provide explicit component name:
+
+```sh
+yarn convert:logo ~/Downloads/click-ui.svg Click_UI
 ```
 
-## Releases and Versions
+Alternatively, you can replace `logo` in the command by the remaining assets types, e.g. `convert:flag` or `convert:icon`.
+
+For more detailed instructions, see [converting SVG to React Components](./docs/converting-svg-to-react-components).
+
+## Release
+
+Releases are automated via GitHub Actions. A workflow creates a PR with version bumps and changelogs for review. Once merged, the package is published to npm and a GitHub release is created.
+
+Use the [Create a new release Pull Request](./docs/package-release.md#create-a-new-release-pull-request) for a quick automated process.
 
-New versions and release notes are available at [GitHub Releases](https://github.com/ClickHouse/click-ui/releases).
+See [Package Release](./docs/package-release.md) for detailed instructions, including use-cases.
 
-To create a new release and publish a new version, follow the instructions in [publish.md](./docs/publish.md).
+### Component RFC
+
+To propose a new component, open an RFC using the [Component RFC template](https://github.com/ClickHouse/click-ui/compare/main...branchName?template=component_rfc.md).
+
+> [!NOTE]
+> Replace the <branchName> in the Component RFC template URL by your branch name.
+
+For example, to open a Component RFC for branch name `feat/slider`, you'd open the URL:
+
+```sh
+https://github.com/ClickHouse/click-ui/compare/main...feat/slider?template=component_rfc.md
+```
+
+For GitHub CLI users:
+
+```sh
+gh pr create --template component_rfc.md
+```
 
-## 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/index.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/index.cjs');
+const Text = require('../Typography/Text/index.cjs');
+const Spacer = require('../Spacer/index.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=index.cjs.map

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

@@ -0,0 +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/Typography';\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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"}