@clickhouse/click-ui 0.6.2-rc3 → 0.8.0

package/dist/cjs/components/CodeBlock/InlineCodeBlock.cjs

@@ -1,23 +1,16 @@
+require("./InlineCodeBlock.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const InlineCodeBlock_module = require('./InlineCodeBlock.module.css.cjs');
 
-const InlineContainer = styledComponents.styled.span.withConfig({
-  componentId: "sc-ugg5k0-0"
-})(["", ""], ({
-  theme
-}) => `
-    background: ${theme.click.codeInline.color.background.default};
-    color: ${theme.click.codeInline.color.text.default};
-    border: 1px solid ${theme.click.codeInline.color.stroke.default};
-    font: ${theme.click.codeInline.typography.text.default};
-    border-radius: ${theme.click.codeInline.radii.all};
-    padding: 0 ${theme.click.codeInline.space.x};
-  `);
-const InlineCodeBlock = (props) => /* @__PURE__ */ jsxRuntime.jsx(InlineContainer, { ...props });
+const InlineCodeBlock = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: cva.cn(InlineCodeBlock_module.default.inline, className) });
 
 exports.InlineCodeBlock = InlineCodeBlock;
 //# sourceMappingURL=InlineCodeBlock.cjs.map

package/dist/cjs/components/CodeBlock/InlineCodeBlock.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"InlineCodeBlock.cjs","sources":["../../../../src/components/CodeBlock/InlineCodeBlock.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { styled } from 'styled-components';\n\nconst InlineContainer = styled.span`\n  ${({ theme }) => `\n    background: ${theme.click.codeInline.color.background.default};\n    color: ${theme.click.codeInline.color.text.default};\n    border: 1px solid ${theme.click.codeInline.color.stroke.default};\n    font: ${theme.click.codeInline.typography.text.default};\n    border-radius: ${theme.click.codeInline.radii.all};\n    padding: 0 ${theme.click.codeInline.space.x};\n  `}\n`;\nexport const InlineCodeBlock = (props: HTMLAttributes<HTMLSpanElement>) => (\n  <InlineContainer {...props} />\n);\n"],"names":["InlineContainer","styled","span","withConfig","componentId","theme","click","codeInline","color","background","default","text","stroke","typography","radii","all","space","x","InlineCodeBlock","props","jsx"],"mappings":";;;;;;;AAGA,MAAMA,eAAAA,GAAkBC,uBAAAA,CAAOC,IAAAA,CAAIC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,GAC/B,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,gBAAA,EACDA,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMC,WAAWC,OAAO,CAAA;AAAA,WAAA,EACpDL,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMG,KAAKD,OAAO,CAAA;AAAA,sBAAA,EAC9BL,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWC,KAAAA,CAAMI,OAAOF,OAAO,CAAA;AAAA,UAAA,EACvDL,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWM,UAAAA,CAAWF,KAAKD,OAAO,CAAA;AAAA,mBAAA,EACrCL,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWO,KAAAA,CAAMC,GAAG,CAAA;AAAA,eAAA,EACpCV,KAAAA,CAAMC,KAAAA,CAAMC,UAAAA,CAAWS,KAAAA,CAAMC,CAAC,CAAA;AAAA,EAAA,CAC5C,CAAA;AAEI,MAAMC,kBAAkBA,CAACC,KAAAA,qBAC9BC,cAAA,CAAC,eAAA,EAAA,EAAgB,GAAID,KAAAA,EAAM;;;;"}
+{"version":3,"file":"InlineCodeBlock.cjs","sources":["../../../../src/components/CodeBlock/InlineCodeBlock.tsx"],"sourcesContent":["import { HTMLAttributes } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './InlineCodeBlock.module.css';\n\nexport const InlineCodeBlock = ({\n  className,\n  ...props\n}: HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    {...props}\n    className={cn(styles.inline, className)}\n  />\n);\n"],"names":["InlineCodeBlock","className","props","jsx","cn","styles","inline"],"mappings":";;;;;;;;AAIO,MAAMA,kBAAkBA,CAAC;AAAA,EAC9BC,SAAAA;AAAAA,EACA,GAAGC;AAC4B,CAAA,qBAC/BC,cAAA,CAAC,UACC,GAAID,KAAAA,EACJ,WAAWE,MAAAA,CAAGC,8BAAAA,CAAOC,MAAAA,EAAQL,SAAS,CAAA,EAAE;;;;"}

package/dist/cjs/components/CodeBlock/InlineCodeBlock.css

@@ -0,0 +1,10 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. codeInline) */
+
+.inline__jYdpl {
+  padding: 0 var(--click-codeInline-space-x);
+  border: 1px solid var(--click-codeInline-color-stroke-default);
+  border-radius: var(--click-codeInline-radii-all);
+  background: var(--click-codeInline-color-background-default);
+  color: var(--click-codeInline-color-text-default);
+  font: var(--click-codeInline-typography-text-default);
+}

package/dist/cjs/components/CodeBlock/InlineCodeBlock.module.css.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const inline = "inline__jYdpl";
+const styles = {
+	inline: inline
+};
+
+exports.default = styles;
+exports.inline = inline;
+//# sourceMappingURL=InlineCodeBlock.module.css.cjs.map

package/dist/cjs/components/CodeBlock/InlineCodeBlock.module.css.cjs.map

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

package/dist/cjs/components/CodeBlock/index.cjs

@@ -1,3 +1,4 @@
+require("./CodeBlock.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -5,9 +6,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
 const reactSyntaxHighlighter = require('react-syntax-highlighter');
-const EmptyButton = require('../EmptyButton/index.cjs');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
 const useColorStyle = require('./useColorStyle.cjs');
+const CodeBlock_module = require('./CodeBlock.module.css.cjs');
 const sql = require('react-syntax-highlighter/dist/cjs/languages/hljs/sql.js');
 const bash = require('react-syntax-highlighter/dist/cjs/languages/hljs/bash.js');
 const json = require('react-syntax-highlighter/dist/cjs/languages/hljs/json.js');
@@ -28,47 +29,6 @@ reactSyntaxHighlighter.Light.registerLanguage("bash", bash__default.default.defa
 reactSyntaxHighlighter.Light.registerLanguage("json", json__default.default.default || json__default.default);
 reactSyntaxHighlighter.Light.registerLanguage("tsx", tsx__default.default.default || tsx__default.default);
 reactSyntaxHighlighter.Light.registerLanguage("plaintext", plaintext__default.default.default || plaintext__default.default);
-const CodeBlockContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-18gnqgi-0"
-})(["width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;position:relative;", ""], ({
-  theme,
-  $theme
-}) => {
-  const themeName = theme.name;
-  const codeTheme = theme.click.codeblock[`${!$theme ? themeName : $theme}Mode`].color;
-  return `
-    color: ${codeTheme.numbers.default};
-    .linenumber {
-      color: ${codeTheme.numbers.default}
-    }
-  `;
-});
-const CodeButton = styledComponents.styled(EmptyButton.EmptyButton).withConfig({
-  componentId: "sc-18gnqgi-1"
-})(["", ""], ({
-  $copied,
-  $error,
-  theme
-}) => `
-    color: ${$copied ? theme.click.alert.color.text.success : $error ? theme.click.alert.color.text.danger : "inherit"};
-    padding: 0;
-    border: 0;
-  `);
-const Highlighter = styledComponents.styled(reactSyntaxHighlighter.Light).withConfig({
-  componentId: "sc-18gnqgi-2"
-})(["background:transparent;padding:0;margin:0;"]);
-const CodeContent = styledComponents.styled.code.withConfig({
-  componentId: "sc-18gnqgi-3"
-})(["font-family:inherit;color:inherit;"]);
-const ButtonContainer = styledComponents.styled.div.withConfig({
-  componentId: "sc-18gnqgi-4"
-})(["position:absolute;display:flex;", ""], ({
-  theme
-}) => `
-    gap:  0.625rem;
-    top: ${theme.click.codeblock.space.y};
-    right: ${theme.click.codeblock.space.x};
-  `);
 const CodeBlock = ({
   children,
   language,
@@ -78,12 +38,16 @@ const CodeBlock = ({
   wrapLines = false,
   onCopy,
   onCopyError,
+  className,
+  style,
   ...props
 }) => {
   const [copied, setCopied] = react.useState(false);
   const [errorCopy, setErrorCopy] = react.useState(false);
   const [wrap, setWrap] = react.useState(wrapLines);
   const customStyle = useColorStyle.default(theme);
+  const numbersColor = useColorStyle.useNumbersColor(theme);
+  const buttonStateColors = useColorStyle.useButtonStateColors();
   const copyCodeToClipboard = async () => {
     try {
       await navigator.clipboard.writeText(children);
@@ -107,13 +71,18 @@ const CodeBlock = ({
   const wrapElement = () => {
     setWrap((wrap2) => !wrap2);
   };
-  const CodeWithRef = (props2) => /* @__PURE__ */ jsxRuntime.jsx(CodeContent, { ...props2 });
-  return /* @__PURE__ */ jsxRuntime.jsxs(CodeBlockContainer, { $theme: theme, ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(ButtonContainer, { children: [
-      showWrapButton && /* @__PURE__ */ jsxRuntime.jsx(CodeButton, { as: IconButton.IconButton, $copied: false, $error: false, icon: "document", onClick: wrapElement }),
-      /* @__PURE__ */ jsxRuntime.jsx(CodeButton, { as: IconButton.IconButton, $copied: copied, $error: errorCopy, icon: copied ? "check" : errorCopy ? "warning" : "copy", onClick: copyCodeToClipboard })
+  const CodeWithRef = (props2) => /* @__PURE__ */ jsxRuntime.jsx("code", { ...props2, className: cva.cn(CodeBlock_module.default["codeblock__content"], props2.className) });
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...props, style: {
+    "--codeblock-numbers": numbersColor,
+    ...style
+  }, className: cva.cn(CodeBlock_module.default.codeblock, className), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: CodeBlock_module.default["codeblock__button-container"], children: [
+      showWrapButton && /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { className: CodeBlock_module.default["codeblock__button"], icon: "document", onClick: wrapElement }),
+      /* @__PURE__ */ jsxRuntime.jsx(IconButton.IconButton, { className: CodeBlock_module.default["codeblock__button"], style: {
+        "--codeblock-button": copied ? buttonStateColors.success : errorCopy ? buttonStateColors.danger : void 0
+      }, icon: copied ? "check" : errorCopy ? "warning" : "copy", onClick: copyCodeToClipboard })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Highlighter, { language, style: customStyle, CodeTag: CodeWithRef, renderer: ({
+    /* @__PURE__ */ jsxRuntime.jsx(reactSyntaxHighlighter.Light, { language, style: customStyle, CodeTag: CodeWithRef, className: CodeBlock_module.default["codeblock__highlighter"], renderer: ({
       rows,
       stylesheet,
       useInlineStyles

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState } from 'react';\nimport { Light as SyntaxHighlighter, createElement } from 'react-syntax-highlighter';\n\nimport { EmptyButton } from '@/components/EmptyButton';\nimport { IconButton } from '@/components/IconButton';\n\nimport { styled } from 'styled-components';\nimport useColorStyle from './useColorStyle';\nimport { CodeBlockProps, CodeThemeType } from './CodeBlock.types';\n\n/* eslint-disable import/extensions */\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport tsx from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport plaintext from 'react-syntax-highlighter/dist/cjs/languages/hljs/plaintext.js';\n/* eslint-enable import/extensions */\n\nSyntaxHighlighter.registerLanguage('sql', sql.default || sql);\nSyntaxHighlighter.registerLanguage('bash', bash.default || bash);\nSyntaxHighlighter.registerLanguage('json', json.default || json);\nSyntaxHighlighter.registerLanguage('tsx', tsx.default || tsx);\nSyntaxHighlighter.registerLanguage('plaintext', plaintext.default || plaintext);\n\ninterface RendererNodeType {\n  type: 'element' | 'text';\n  value?: string | number | undefined;\n  tagName?: keyof React.JSX.IntrinsicElements | React.ComponentType | undefined;\n  properties?: { className: unknown[]; [key: string]: unknown };\n  children?: RendererNodeType[];\n}\ninterface CustomRendererProps {\n  rows: RendererNodeType[];\n  stylesheet: { [key: string]: React.CSSProperties };\n  useInlineStyles: boolean;\n}\n\nconst CodeBlockContainer = styled.div<{ $theme?: CodeThemeType }>`\n  width: 100%;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  position: relative;\n  ${({ theme, $theme }) => {\n    const themeName = theme.name as CodeThemeType;\n\n    const codeTheme = theme.click.codeblock[`${!$theme ? themeName : $theme}Mode`].color;\n    return `\n    color: ${codeTheme.numbers.default};\n    .linenumber {\n      color: ${codeTheme.numbers.default}\n    }\n  `;\n  }}\n`;\n\nconst CodeButton = styled(EmptyButton)<{ $copied: boolean; $error: boolean }>`\n  ${({ $copied, $error, theme }) => `\n    color: ${\n      $copied\n        ? theme.click.alert.color.text.success\n        : $error\n          ? theme.click.alert.color.text.danger\n          : 'inherit'\n    };\n    padding: 0;\n    border: 0;\n  `}\n`;\n\nconst Highlighter = styled(SyntaxHighlighter)`\n  background: transparent;\n  padding: 0;\n  margin: 0;\n`;\n\nconst CodeContent = styled.code`\n  font-family: inherit;\n  color: inherit;\n`;\n\nconst ButtonContainer = styled.div`\n  position: absolute;\n  display: flex;\n  ${({ theme }) => `\n    gap:  0.625rem;\n    top: ${theme.click.codeblock.space.y};\n    right: ${theme.click.codeblock.space.x};\n  `}\n`;\n\nexport const CodeBlock = ({\n  children,\n  language,\n  theme,\n  showLineNumbers,\n  showWrapButton = false,\n  wrapLines = false,\n  onCopy,\n  onCopyError,\n  ...props\n}: CodeBlockProps) => {\n  const [copied, setCopied] = useState(false);\n  const [errorCopy, setErrorCopy] = useState(false);\n  const [wrap, setWrap] = useState(wrapLines);\n  const customStyle = useColorStyle(theme);\n\n  const copyCodeToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(children);\n      if (typeof onCopy == 'function') {\n        onCopy(children);\n      }\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (error) {\n      let message = 'Unable to copy code';\n      if (error instanceof Error) {\n        message = error.message;\n      }\n      setErrorCopy(true);\n      if (typeof onCopyError === 'function') {\n        onCopyError(message);\n      }\n      setTimeout(() => setErrorCopy(false), 2000);\n    }\n  };\n  const wrapElement = () => {\n    setWrap(wrap => !wrap);\n  };\n\n  const CodeWithRef = (props: HTMLAttributes<HTMLElement>) => <CodeContent {...props} />;\n  return (\n    <CodeBlockContainer\n      $theme={theme}\n      {...props}\n    >\n      <ButtonContainer>\n        {showWrapButton && (\n          <CodeButton\n            as={IconButton}\n            $copied={false}\n            $error={false}\n            icon=\"document\"\n            onClick={wrapElement}\n          />\n        )}\n        <CodeButton\n          as={IconButton}\n          $copied={copied}\n          $error={errorCopy}\n          icon={copied ? 'check' : errorCopy ? 'warning' : 'copy'}\n          onClick={copyCodeToClipboard}\n        />\n      </ButtonContainer>\n      <Highlighter\n        language={language}\n        style={customStyle}\n        CodeTag={CodeWithRef}\n        renderer={({ rows, stylesheet, useInlineStyles }: CustomRendererProps) => {\n          return rows.map((row, index) => {\n            const children = row.children;\n            const lineNumberElement = children?.shift();\n\n            /**\n             * We will take current structure of the rows and rebuild it\n             * according to the suggestion here https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/376#issuecomment-1246115899\n             */\n            if (lineNumberElement) {\n              row.children = [\n                lineNumberElement,\n                {\n                  children,\n                  properties: {\n                    className: [],\n                  },\n                  tagName: 'span',\n                  type: 'element',\n                },\n              ];\n            }\n\n            return createElement({\n              node: row,\n              stylesheet,\n              useInlineStyles,\n              key: index,\n            });\n          });\n        }}\n        showLineNumbers={showLineNumbers}\n        wrapLines={wrap || wrapLines}\n        wrapLongLines={wrap || wrapLines}\n      >\n        {children}\n      </Highlighter>\n    </CodeBlockContainer>\n  );\n};\n"],"names":["SyntaxHighlighter","registerLanguage","sql","default","bash","json","tsx","plaintext","CodeBlockContainer","styled","div","withConfig","componentId","theme","$theme","themeName","name","codeTheme","click","codeblock","color","numbers","CodeButton","EmptyButton","$copied","$error","alert","text","success","danger","Highlighter","CodeContent","code","ButtonContainer","space","y","x","CodeBlock","children","language","showLineNumbers","showWrapButton","wrapLines","onCopy","onCopyError","props","copied","setCopied","useState","errorCopy","setErrorCopy","wrap","setWrap","customStyle","useColorStyle","copyCodeToClipboard","navigator","clipboard","writeText","setTimeout","error","message","Error","wrapElement","CodeWithRef","jsx","jsxs","IconButton","rows","stylesheet","useInlineStyles","map","row","index","lineNumberElement","shift","properties","className","tagName","type","createElement","node","key"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import React, { HTMLAttributes, useState } from 'react';\nimport { Light as SyntaxHighlighter, createElement } from 'react-syntax-highlighter';\n\nimport { IconButton } from '@/components/IconButton';\n\nimport { cn } from '@/lib/cva';\nimport useColorStyle, { useButtonStateColors, useNumbersColor } from './useColorStyle';\nimport { CodeBlockProps } from './CodeBlock.types';\nimport styles from './CodeBlock.module.css';\n\n/* eslint-disable import/extensions */\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport tsx from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js';\n// @ts-expect-error - Importing CJS modules in ESM context requires explicit .js extension\nimport plaintext from 'react-syntax-highlighter/dist/cjs/languages/hljs/plaintext.js';\n/* eslint-enable import/extensions */\n\nSyntaxHighlighter.registerLanguage('sql', sql.default || sql);\nSyntaxHighlighter.registerLanguage('bash', bash.default || bash);\nSyntaxHighlighter.registerLanguage('json', json.default || json);\nSyntaxHighlighter.registerLanguage('tsx', tsx.default || tsx);\nSyntaxHighlighter.registerLanguage('plaintext', plaintext.default || plaintext);\n\ninterface RendererNodeType {\n  type: 'element' | 'text';\n  value?: string | number | undefined;\n  tagName?: keyof React.JSX.IntrinsicElements | React.ComponentType | undefined;\n  properties?: { className: unknown[]; [key: string]: unknown };\n  children?: RendererNodeType[];\n}\ninterface CustomRendererProps {\n  rows: RendererNodeType[];\n  stylesheet: { [key: string]: React.CSSProperties };\n  useInlineStyles: boolean;\n}\n\nexport const CodeBlock = ({\n  children,\n  language,\n  theme,\n  showLineNumbers,\n  showWrapButton = false,\n  wrapLines = false,\n  onCopy,\n  onCopyError,\n  className,\n  style,\n  ...props\n}: CodeBlockProps) => {\n  const [copied, setCopied] = useState(false);\n  const [errorCopy, setErrorCopy] = useState(false);\n  const [wrap, setWrap] = useState(wrapLines);\n  const customStyle = useColorStyle(theme);\n  const numbersColor = useNumbersColor(theme);\n  const buttonStateColors = useButtonStateColors();\n\n  const copyCodeToClipboard = async () => {\n    try {\n      await navigator.clipboard.writeText(children);\n      if (typeof onCopy == 'function') {\n        onCopy(children);\n      }\n      setCopied(true);\n      setTimeout(() => setCopied(false), 2000);\n    } catch (error) {\n      let message = 'Unable to copy code';\n      if (error instanceof Error) {\n        message = error.message;\n      }\n      setErrorCopy(true);\n      if (typeof onCopyError === 'function') {\n        onCopyError(message);\n      }\n      setTimeout(() => setErrorCopy(false), 2000);\n    }\n  };\n  const wrapElement = () => {\n    setWrap(wrap => !wrap);\n  };\n\n  const CodeWithRef = (props: HTMLAttributes<HTMLElement>) => (\n    <code\n      {...props}\n      className={cn(styles['codeblock__content'], props.className)}\n    />\n  );\n  return (\n    <div\n      {...props}\n      style={{ '--codeblock-numbers': numbersColor, ...style } as React.CSSProperties}\n      className={cn(styles.codeblock, className)}\n    >\n      <div className={styles['codeblock__button-container']}>\n        {showWrapButton && (\n          <IconButton\n            className={styles['codeblock__button']}\n            icon=\"document\"\n            onClick={wrapElement}\n          />\n        )}\n        <IconButton\n          className={styles['codeblock__button']}\n          style={\n            {\n              '--codeblock-button': copied\n                ? buttonStateColors.success\n                : errorCopy\n                  ? buttonStateColors.danger\n                  : undefined,\n            } as React.CSSProperties\n          }\n          icon={copied ? 'check' : errorCopy ? 'warning' : 'copy'}\n          onClick={copyCodeToClipboard}\n        />\n      </div>\n      <SyntaxHighlighter\n        language={language}\n        style={customStyle}\n        CodeTag={CodeWithRef}\n        className={styles['codeblock__highlighter']}\n        renderer={({ rows, stylesheet, useInlineStyles }: CustomRendererProps) => {\n          return rows.map((row, index) => {\n            const children = row.children;\n            const lineNumberElement = children?.shift();\n\n            /**\n             * We will take current structure of the rows and rebuild it\n             * according to the suggestion here https://github.com/react-syntax-highlighter/react-syntax-highlighter/issues/376#issuecomment-1246115899\n             */\n            if (lineNumberElement) {\n              row.children = [\n                lineNumberElement,\n                {\n                  children,\n                  properties: {\n                    className: [],\n                  },\n                  tagName: 'span',\n                  type: 'element',\n                },\n              ];\n            }\n\n            return createElement({\n              node: row,\n              stylesheet,\n              useInlineStyles,\n              key: index,\n            });\n          });\n        }}\n        showLineNumbers={showLineNumbers}\n        wrapLines={wrap || wrapLines}\n        wrapLongLines={wrap || wrapLines}\n      >\n        {children}\n      </SyntaxHighlighter>\n    </div>\n  );\n};\n"],"names":["SyntaxHighlighter","registerLanguage","sql","default","bash","json","tsx","plaintext","CodeBlock","children","language","theme","showLineNumbers","showWrapButton","wrapLines","onCopy","onCopyError","className","style","props","copied","setCopied","useState","errorCopy","setErrorCopy","wrap","setWrap","customStyle","useColorStyle","numbersColor","useNumbersColor","buttonStateColors","useButtonStateColors","copyCodeToClipboard","navigator","clipboard","writeText","setTimeout","error","message","Error","wrapElement","CodeWithRef","jsx","cn","styles","jsxs","codeblock","IconButton","success","danger","undefined","rows","stylesheet","useInlineStyles","map","row","index","lineNumberElement","shift","properties","tagName","type","createElement","node","key"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBAA,4BAAAA,CAAkBC,gBAAAA,CAAiB,KAAA,EAAOC,oBAAAA,CAAIC,OAAAA,IAAWD,oBAAG,CAAA;AAC5DF,4BAAAA,CAAkBC,gBAAAA,CAAiB,MAAA,EAAQG,qBAAAA,CAAKD,OAAAA,IAAWC,qBAAI,CAAA;AAC/DJ,4BAAAA,CAAkBC,gBAAAA,CAAiB,MAAA,EAAQI,qBAAAA,CAAKF,OAAAA,IAAWE,qBAAI,CAAA;AAC/DL,4BAAAA,CAAkBC,gBAAAA,CAAiB,KAAA,EAAOK,oBAAAA,CAAIH,OAAAA,IAAWG,oBAAG,CAAA;AAC5DN,4BAAAA,CAAkBC,gBAAAA,CAAiB,WAAA,EAAaM,0BAAAA,CAAUJ,OAAAA,IAAWI,0BAAS,CAAA;AAevE,MAAMC,YAAYA,CAAC;AAAA,EACxBC,QAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,cAAAA,GAAiB,KAAA;AAAA,EACjBC,SAAAA,GAAY,KAAA;AAAA,EACZC,MAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACA,GAAGC;AACW,CAAA,KAAM;AACpB,EAAA,MAAM,CAACC,MAAAA,EAAQC,SAAS,CAAA,GAAIC,eAAS,KAAK,CAAA;AAC1C,EAAA,MAAM,CAACC,SAAAA,EAAWC,YAAY,CAAA,GAAIF,eAAS,KAAK,CAAA;AAChD,EAAA,MAAM,CAACG,IAAAA,EAAMC,OAAO,CAAA,GAAIJ,eAASR,SAAS,CAAA;AAC1C,EAAA,MAAMa,WAAAA,GAAcC,sBAAcjB,KAAK,CAAA;AACvC,EAAA,MAAMkB,YAAAA,GAAeC,8BAAgBnB,KAAK,CAAA;AAC1C,EAAA,MAAMoB,oBAAoBC,kCAAAA,EAAqB;AAE/C,EAAA,MAAMC,sBAAsB,YAAY;AACtC,IAAA,IAAI;AACF,MAAA,MAAMC,SAAAA,CAAUC,SAAAA,CAAUC,SAAAA,CAAU3B,QAAQ,CAAA;AAC5C,MAAA,IAAI,OAAOM,UAAU,UAAA,EAAY;AAC/BA,QAAAA,MAAAA,CAAON,QAAQ,CAAA;AAAA,MACjB;AACAY,MAAAA,SAAAA,CAAU,IAAI,CAAA;AACdgB,MAAAA,UAAAA,CAAW,MAAMhB,SAAAA,CAAU,KAAK,CAAA,EAAG,GAAI,CAAA;AAAA,IACzC,SAASiB,KAAAA,EAAO;AACd,MAAA,IAAIC,OAAAA,GAAU,qBAAA;AACd,MAAA,IAAID,iBAAiBE,KAAAA,EAAO;AAC1BD,QAAAA,OAAAA,GAAUD,KAAAA,CAAMC,OAAAA;AAAAA,MAClB;AACAf,MAAAA,YAAAA,CAAa,IAAI,CAAA;AACjB,MAAA,IAAI,OAAOR,gBAAgB,UAAA,EAAY;AACrCA,QAAAA,WAAAA,CAAYuB,OAAO,CAAA;AAAA,MACrB;AACAF,MAAAA,UAAAA,CAAW,MAAMb,YAAAA,CAAa,KAAK,CAAA,EAAG,GAAI,CAAA;AAAA,IAC5C;AAAA,EACF,CAAA;AACA,EAAA,MAAMiB,cAAcA,MAAM;AACxBf,IAAAA,OAAAA,CAAQD,CAAAA,KAAAA,KAAQ,CAACA,KAAI,CAAA;AAAA,EACvB,CAAA;AAEA,EAAA,MAAMiB,WAAAA,GAAcA,CAACvB,MAAAA,qBACnBwB,cAAA,CAAC,aACKxB,MAAAA,EACJ,SAAA,EAAWyB,MAAAA,CAAGC,wBAAAA,CAAO,oBAAoB,CAAA,EAAG1B,MAAAA,CAAMF,SAAS,CAAA,EAAE,CAAA;AAGjE,EAAA,uBACE6B,eAAA,CAAC,KAAA,EAAA,EACC,GAAI3B,KAAAA,EACJ,KAAA,EAAO;AAAA,IAAE,qBAAA,EAAuBU,YAAAA;AAAAA,IAAc,GAAGX;AAAAA,KACjD,SAAA,EAAW0B,MAAAA,CAAGC,wBAAAA,CAAOE,SAAAA,EAAW9B,SAAS,CAAA,EAEzC,QAAA,EAAA;AAAA,oBAAA6B,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWD,wBAAAA,CAAO,6BAA6B,CAAA,EACjDhC,QAAAA,EAAAA;AAAAA,MAAAA,cAAAA,oBACC8B,cAAA,CAACK,yBACC,SAAA,EAAWH,wBAAAA,CAAO,mBAAmB,CAAA,EACrC,IAAA,EAAK,UAAA,EACL,OAAA,EAASJ,WAAAA,EAAY,CAAA;AAAA,qCAGxBO,qBAAA,EAAA,EACC,SAAA,EAAWH,wBAAAA,CAAO,mBAAmB,GACrC,KAAA,EACE;AAAA,QACE,sBAAsBzB,MAAAA,GAClBW,iBAAAA,CAAkBkB,OAAAA,GAClB1B,SAAAA,GACEQ,kBAAkBmB,MAAAA,GAClBC;AAAAA,OACR,EAEF,MAAM/B,MAAAA,GAAS,OAAA,GAAUG,YAAY,SAAA,GAAY,MAAA,EACjD,SAASU,mBAAAA,EAAoB;AAAA,KAAA,EAEjC,CAAA;AAAA,oBACAU,cAAA,CAAC3C,4BAAA,EAAA,EACC,QAAA,EACA,KAAA,EAAO2B,WAAAA,EACP,OAAA,EAASe,WAAAA,EACT,SAAA,EAAWG,wBAAAA,CAAO,wBAAwB,CAAA,EAC1C,QAAA,EAAU,CAAC;AAAA,MAAEO,IAAAA;AAAAA,MAAMC,UAAAA;AAAAA,MAAYC;AAAAA,KAAqC,KAAM;AACxE,MAAA,OAAOF,IAAAA,CAAKG,GAAAA,CAAI,CAACC,GAAAA,EAAKC,KAAAA,KAAU;AAC9B,QAAA,MAAMhD,YAAW+C,GAAAA,CAAI/C,QAAAA;AACrB,QAAA,MAAMiD,iBAAAA,GAAoBjD,WAAUkD,KAAAA,EAAM;AAM1C,QAAA,IAAID,iBAAAA,EAAmB;AACrBF,UAAAA,GAAAA,CAAI/C,QAAAA,GAAW,CACbiD,iBAAAA,EACA;AAAA,YACEjD,QAAAA,EAAAA,SAAAA;AAAAA,YACAmD,UAAAA,EAAY;AAAA,cACV3C,WAAW;AAAA,aACb;AAAA,YACA4C,OAAAA,EAAS,MAAA;AAAA,YACTC,IAAAA,EAAM;AAAA,WACP,CAAA;AAAA,QAEL;AAEA,QAAA,OAAOC,oCAAAA,CAAc;AAAA,UACnBC,IAAAA,EAAMR,GAAAA;AAAAA,UACNH,UAAAA;AAAAA,UACAC,eAAAA;AAAAA,UACAW,GAAAA,EAAKR;AAAAA,SACN,CAAA;AAAA,MACH,CAAC,CAAA;AAAA,IACH,CAAA,EACA,iBACA,SAAA,EAAWhC,IAAAA,IAAQX,WACnB,aAAA,EAAeW,IAAAA,IAAQX,WAEtBL,QAAAA,EACH;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/cjs/components/CodeBlock/useColorStyle.cjs

@@ -123,6 +123,21 @@ const useColorStyle = (defaultTheme) => {
     }
   };
 };
+const useNumbersColor = (defaultTheme) => {
+  const theme = styledComponents.useTheme();
+  const inheritedThemeName = theme.name;
+  const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;
+  return theme.click.codeblock[`${themeName}Mode`].color.numbers.default;
+};
+const useButtonStateColors = () => {
+  const theme = styledComponents.useTheme();
+  return {
+    success: theme.click.alert.color.text.success,
+    danger: theme.click.alert.color.text.danger
+  };
+};
 
 exports.default = useColorStyle;
+exports.useButtonStateColors = useButtonStateColors;
+exports.useNumbersColor = useNumbersColor;
 //# sourceMappingURL=useColorStyle.cjs.map

package/dist/cjs/components/CodeBlock/useColorStyle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"useColorStyle.cjs","sources":["../../../../src/components/CodeBlock/useColorStyle.ts"],"sourcesContent":["import { useTheme } from 'styled-components';\nimport { CodeThemeType } from './CodeBlock.types';\n\nconst useColorStyle = (defaultTheme?: CodeThemeType) => {\n  const theme = useTheme();\n  const inheritedThemeName = theme.name as CodeThemeType;\n  const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;\n  const codeTheme = theme.click.codeblock[`${themeName}Mode`].color;\n\n  return {\n    hljs: {\n      display: 'block',\n      overflowX: 'auto',\n      padding: `${theme.click.codeblock.space.y} ${theme.click.codeblock.space.x}`,\n      color: codeTheme.text.default,\n      background: codeTheme.background.default,\n      borderRadius: theme.click.codeblock.radii.all,\n      font: theme.click.codeblock.typography.text.default,\n    },\n    'hljs-comment': {\n      color: themeName === 'dark' ? '#999999' : '#656e77',\n    },\n    'hljs-keyword': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-selector-tag': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-meta-keyword': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-doctag': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-section': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-selector-class': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-meta': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-selector-pseudo': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-attr': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-attribute': {\n      color: themeName === 'dark' ? '#c59bc1' : '#803378',\n    },\n    'hljs-name': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-type': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-number': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-selector-id': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-quote': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-template-tag': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-built_in': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-title': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-literal': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-string': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-regexp': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-symbol': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-variable': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-template-variable': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-link': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-selector-attr': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-meta-string': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-bullet': {\n      color: themeName === 'dark' ? '#cccccc' : '#535a60',\n    },\n    'hljs-code': {\n      color: themeName === 'dark' ? '#cccccc' : '#535a60',\n    },\n    'hljs-deletion': {\n      color: themeName === 'dark' ? '#de7176' : '#c02d2e',\n    },\n    'hljs-addition': {\n      color: themeName === 'dark' ? '#76c490' : '#2f6f44',\n    },\n    'hljs-emphasis': {\n      fontStyle: 'italic',\n    },\n    'hljs-strong': {\n      fontWeight: 'bold',\n    },\n  };\n};\n\nexport default useColorStyle;\n"],"names":["useColorStyle","defaultTheme","theme","useTheme","inheritedThemeName","name","themeName","codeTheme","click","codeblock","color","hljs","display","overflowX","padding","space","y","x","text","default","background","borderRadius","radii","all","font","typography","fontStyle","fontWeight"],"mappings":";;;;;;AAGA,MAAMA,aAAAA,GAAgBA,CAACC,YAAAA,KAAiC;AACtD,EAAA,MAAMC,QAAQC,yBAAAA,EAAS;AACvB,EAAA,MAAMC,qBAAqBF,KAAAA,CAAMG,IAAAA;AACjC,EAAA,MAAMC,SAAAA,GAAY,CAACL,YAAAA,GAAeG,kBAAAA,GAAqBH,YAAAA;AACvD,EAAA,MAAMM,YAAYL,KAAAA,CAAMM,KAAAA,CAAMC,UAAU,CAAA,EAAGH,SAAS,MAAM,CAAA,CAAEI,KAAAA;AAE5D,EAAA,OAAO;AAAA,IACLC,IAAAA,EAAM;AAAA,MACJC,OAAAA,EAAS,OAAA;AAAA,MACTC,SAAAA,EAAW,MAAA;AAAA,MACXC,OAAAA,EAAS,CAAA,EAAGZ,KAAAA,CAAMM,KAAAA,CAAMC,SAAAA,CAAUM,KAAAA,CAAMC,CAAC,CAAA,CAAA,EAAId,KAAAA,CAAMM,KAAAA,CAAMC,SAAAA,CAAUM,KAAAA,CAAME,CAAC,CAAA,CAAA;AAAA,MAC1EP,KAAAA,EAAOH,UAAUW,IAAAA,CAAKC,OAAAA;AAAAA,MACtBC,UAAAA,EAAYb,UAAUa,UAAAA,CAAWD,OAAAA;AAAAA,MACjCE,YAAAA,EAAcnB,KAAAA,CAAMM,KAAAA,CAAMC,SAAAA,CAAUa,KAAAA,CAAMC,GAAAA;AAAAA,MAC1CC,IAAAA,EAAMtB,KAAAA,CAAMM,KAAAA,CAAMC,SAAAA,CAAUgB,WAAWP,IAAAA,CAAKC;AAAAA,KAC9C;AAAA,IACA,cAAA,EAAgB;AAAA,MACdT,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,cAAA,EAAgB;AAAA,MACdI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,mBAAA,EAAqB;AAAA,MACnBI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,mBAAA,EAAqB;AAAA,MACnBI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,aAAA,EAAe;AAAA,MACbI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,cAAA,EAAgB;AAAA,MACdI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,qBAAA,EAAuB;AAAA,MACrBI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,WAAA,EAAa;AAAA,MACXI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,sBAAA,EAAwB;AAAA,MACtBI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,WAAA,EAAa;AAAA,MACXI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChBI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,WAAA,EAAa;AAAA,MACXI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,WAAA,EAAa;AAAA,MACXI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,aAAA,EAAe;AAAA,MACbI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,kBAAA,EAAoB;AAAA,MAClBI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,YAAA,EAAc;AAAA,MACZI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,mBAAA,EAAqB;AAAA,MACnBI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,eAAA,EAAiB;AAAA,MACfI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,YAAA,EAAc;AAAA,MACZI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,cAAA,EAAgB;AAAA,MACdI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,aAAA,EAAe;AAAA,MACbI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,aAAA,EAAe;AAAA,MACbI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,aAAA,EAAe;AAAA,MACbI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,eAAA,EAAiB;AAAA,MACfI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,wBAAA,EAA0B;AAAA,MACxBI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,WAAA,EAAa;AAAA,MACXI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,oBAAA,EAAsB;AAAA,MACpBI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,kBAAA,EAAoB;AAAA,MAClBI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,aAAA,EAAe;AAAA,MACbI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,WAAA,EAAa;AAAA,MACXI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,eAAA,EAAiB;AAAA,MACfI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,eAAA,EAAiB;AAAA,MACfI,KAAAA,EAAOJ,SAAAA,KAAc,MAAA,GAAS,SAAA,GAAY;AAAA,KAC5C;AAAA,IACA,eAAA,EAAiB;AAAA,MACfoB,SAAAA,EAAW;AAAA,KACb;AAAA,IACA,aAAA,EAAe;AAAA,MACbC,UAAAA,EAAY;AAAA;AACd,GACF;AACF;;;;"}
+{"version":3,"file":"useColorStyle.cjs","sources":["../../../../src/components/CodeBlock/useColorStyle.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport { useTheme } from 'styled-components';\nimport { CodeThemeType } from './CodeBlock.types';\n\nconst useColorStyle = (defaultTheme?: CodeThemeType): Record<string, CSSProperties> => {\n  const theme = useTheme();\n  const inheritedThemeName = theme.name as CodeThemeType;\n  const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;\n  const codeTheme = theme.click.codeblock[`${themeName}Mode`].color;\n\n  return {\n    hljs: {\n      display: 'block',\n      overflowX: 'auto',\n      padding: `${theme.click.codeblock.space.y} ${theme.click.codeblock.space.x}`,\n      color: codeTheme.text.default,\n      background: codeTheme.background.default,\n      borderRadius: theme.click.codeblock.radii.all,\n      font: theme.click.codeblock.typography.text.default,\n    },\n    'hljs-comment': {\n      color: themeName === 'dark' ? '#999999' : '#656e77',\n    },\n    'hljs-keyword': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-selector-tag': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-meta-keyword': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-doctag': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-section': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-selector-class': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-meta': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-selector-pseudo': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-attr': {\n      color: themeName === 'dark' ? '#88aece' : '#015692',\n    },\n    'hljs-attribute': {\n      color: themeName === 'dark' ? '#c59bc1' : '#803378',\n    },\n    'hljs-name': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-type': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-number': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-selector-id': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-quote': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-template-tag': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-built_in': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-title': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-literal': {\n      color: themeName === 'dark' ? '#f08d49' : '#b75501',\n    },\n    'hljs-string': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-regexp': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-symbol': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-variable': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-template-variable': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-link': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-selector-attr': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-meta-string': {\n      color: themeName === 'dark' ? '#b5bd68' : '#54790d',\n    },\n    'hljs-bullet': {\n      color: themeName === 'dark' ? '#cccccc' : '#535a60',\n    },\n    'hljs-code': {\n      color: themeName === 'dark' ? '#cccccc' : '#535a60',\n    },\n    'hljs-deletion': {\n      color: themeName === 'dark' ? '#de7176' : '#c02d2e',\n    },\n    'hljs-addition': {\n      color: themeName === 'dark' ? '#76c490' : '#2f6f44',\n    },\n    'hljs-emphasis': {\n      fontStyle: 'italic',\n    },\n    'hljs-strong': {\n      fontWeight: 'bold',\n    },\n  };\n};\n\nexport const useNumbersColor = (defaultTheme?: CodeThemeType): string => {\n  const theme = useTheme();\n  const inheritedThemeName = theme.name as CodeThemeType;\n  const themeName = !defaultTheme ? inheritedThemeName : defaultTheme;\n  return theme.click.codeblock[`${themeName}Mode`].color.numbers.default;\n};\n\nexport const useButtonStateColors = (): { success: string; danger: string } => {\n  const theme = useTheme();\n  return {\n    success: theme.click.alert.color.text.success,\n    danger: theme.click.alert.color.text.danger,\n  };\n};\n\nexport default useColorStyle;\n"],"names":["useColorStyle","defaultTheme","theme","useTheme","inheritedThemeName","name","themeName","codeTheme","click","codeblock","color","hljs","display","overflowX","padding","space","y","x","text","default","background","borderRadius","radii","all","font","typography","fontStyle","fontWeight","useNumbersColor","numbers","useButtonStateColors","success","alert","danger"],"mappings":"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"}

package/dist/cjs/components/ConfirmationDialog/ConfirmationDialog.css

@@ -0,0 +1,20 @@
+.content__fI-1- {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+}
+
+.actions__14jg2 {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--click-dialog-space-gap);
+}
+
+/* 640px = theme.breakpoint.sizes.sm; CSS media queries can't reference JS theme tokens */
+/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
+   required for browser compatibility per .browserslistrc */
+@media (max-width: 640px) {
+  .actions__14jg2 {
+    flex-direction: column;
+  }
+}

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

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const content = "content__fI-1-";
+const actions = "actions__14jg2";
+const styles = {
+	content: content,
+	actions: actions
+};
+
+exports.actions = actions;
+exports.content = content;
+exports.default = styles;
+//# sourceMappingURL=ConfirmationDialog.module.css.cjs.map

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

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

package/dist/cjs/components/ConfirmationDialog/index.cjs

@@ -1,24 +1,19 @@
+require("./ConfirmationDialog.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const ConfirmationDialog_module = require('./ConfirmationDialog.module.css.cjs');
 const Dialog = require('../Dialog/index.cjs');
 const Container = require('../Container/index.cjs');
 const Text = require('../Text/index.cjs');
 const Separator = require('../Separator/index.cjs');
 
-const ActionsWrapper = styledComponents.styled.div.withConfig({
-  componentId: "sc-6eozxy-0"
-})(["display:flex;justify-content:flex-end;gap:", ";@media (max-width:", "){flex-direction:column;}"], (props) => props.theme.click.dialog.space.gap, ({
-  theme
-}) => theme.breakpoint.sizes.sm);
-const DialogContent = styledComponents.styled.div.withConfig({
-  componentId: "sc-6eozxy-1"
-})(["overflow:hidden;display:flex;flex-direction:column;"]);
 const ConfirmationDialog = ({
   children,
+  className,
   disabled,
   loading,
   message,
@@ -39,10 +34,10 @@ const ConfirmationDialog = ({
     if (!open2 && onCancel) {
       onCancel();
     }
-  }, children: /* @__PURE__ */ jsxRuntime.jsxs(DialogContent, { as: Dialog.Dialog.Content, title, showClose, ...props, children: [
+  }, children: /* @__PURE__ */ jsxRuntime.jsxs(Dialog.Dialog.Content, { title, showClose, ...props, className: cva.cn(ConfirmationDialog_module.default.content, className), children: [
     /* @__PURE__ */ jsxRuntime.jsx(Container.Container, { overflow: "auto", grow: "1", orientation: "vertical", children: children ? children : /* @__PURE__ */ jsxRuntime.jsx(Text.Text, { children: message }) }),
     /* @__PURE__ */ jsxRuntime.jsx(Separator.Separator, { size: "xl" }),
-    /* @__PURE__ */ jsxRuntime.jsxs(ActionsWrapper, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ConfirmationDialog_module.default.actions, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Dialog.Dialog.Close, { label: secondaryActionLabel, "data-testid": "cancel-action-button" }),
       /* @__PURE__ */ jsxRuntime.jsx(Dialog.Dialog.Close, { loading: !!loading, disabled: !!disabled || !!loading, type: primaryActionType, label: primaryActionLabel, autoFocus: open, onClick: () => {
         if (onConfirm) {

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/ConfirmationDialog/ConfirmationDialog.tsx"],"sourcesContent":["import { Container } from '@/components/Container';\nimport { Dialog } from '@/components/Dialog';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\nimport { ReactElement } from 'react';\nimport { styled } from 'styled-components';\nimport { ConfirmationDialogProps } from './ConfirmationDialog.types';\n\nconst ActionsWrapper = styled.div`\n  display: flex;\n  justify-content: flex-end;\n  gap: ${props => props.theme.click.dialog.space.gap};\n  @media (max-width: ${({ theme }) => theme.breakpoint.sizes.sm}) {\n    flex-direction: column;\n  }\n`;\n\nconst DialogContent = styled.div`\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n`;\n\nexport const ConfirmationDialog = ({\n  children,\n  disabled,\n  loading,\n  message,\n  onCancel,\n  onConfirm,\n  open,\n  primaryActionLabel = 'Confirm',\n  primaryActionType = 'primary',\n  secondaryActionLabel = 'Cancel',\n  showClose,\n  title,\n  ...props\n}: ConfirmationDialogProps): ReactElement => {\n  if (children && message) {\n    throw new Error(\"You can't pass children and message props at the same time\");\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(open: boolean) => {\n        if (!open && onCancel) {\n          onCancel();\n        }\n      }}\n    >\n      <DialogContent\n        as={Dialog.Content}\n        title={title}\n        showClose={showClose}\n        {...props}\n      >\n        <Container\n          overflow=\"auto\"\n          grow=\"1\"\n          orientation=\"vertical\"\n        >\n          {children ? children : <Text>{message}</Text>}\n        </Container>\n        <Separator size=\"xl\" />\n        <ActionsWrapper>\n          <Dialog.Close\n            label={secondaryActionLabel}\n            data-testid=\"cancel-action-button\"\n          />\n          <Dialog.Close\n            loading={!!loading}\n            disabled={!!disabled || !!loading}\n            type={primaryActionType}\n            label={primaryActionLabel}\n            autoFocus={open}\n            onClick={() => {\n              if (onConfirm) {\n                onConfirm();\n              }\n            }}\n            data-testid=\"confirm-action-button\"\n          />\n        </ActionsWrapper>\n      </DialogContent>\n    </Dialog>\n  );\n};\n"],"names":["ActionsWrapper","styled","div","withConfig","componentId","props","theme","click","dialog","space","gap","breakpoint","sizes","sm","DialogContent","ConfirmationDialog","children","disabled","loading","message","onCancel","onConfirm","open","primaryActionLabel","primaryActionType","secondaryActionLabel","showClose","title","Error","jsx","Dialog","Content","Container","Text","Separator"],"mappings":";;;;;;;;;;;AAQA,MAAMA,cAAAA,GAAiBC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4CAAA,EAAA,qBAAA,EAAA,2BAAA,CAAA,EAGxBC,CAAAA,KAAAA,KAASA,KAAAA,CAAMC,KAAAA,CAAMC,KAAAA,CAAMC,MAAAA,CAAOC,KAAAA,CAAMC,KAC1B,CAAC;AAAA,EAAEJ;AAAM,CAAA,KAAMA,KAAAA,CAAMK,UAAAA,CAAWC,KAAAA,CAAMC,EAAE,CAAA;AAK/D,MAAMC,aAAAA,GAAgBb,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qDAAA,CAAA,CAAA;AAMzB,MAAMW,qBAAqBA,CAAC;AAAA,EACjCC,QAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,kBAAAA,GAAqB,SAAA;AAAA,EACrBC,iBAAAA,GAAoB,SAAA;AAAA,EACpBC,oBAAAA,GAAuB,QAAA;AAAA,EACvBC,SAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACA,GAAGtB;AACoB,CAAA,KAAoB;AAC3C,EAAA,IAAIW,YAAYG,OAAAA,EAAS;AACvB,IAAA,MAAM,IAAIS,MAAM,4DAA4D,CAAA;AAAA,EAC9E;AAEA,EAAA,uBACEC,cAAA,CAACC,aAAA,EAAA,EACC,IAAA,EACA,YAAA,EAAc,CAACR,KAAAA,KAAkB;AAC/B,IAAA,IAAI,CAACA,SAAQF,QAAAA,EAAU;AACrBA,MAAAA,QAAAA,EAAS;AAAA,IACX;AAAA,EACF,CAAA,EAEA,0CAAC,aAAA,EAAA,EACC,EAAA,EAAIU,cAAOC,OAAAA,EACX,KAAA,EACA,SAAA,EACA,GAAI1B,KAAAA,EAEJ,QAAA,EAAA;AAAA,oBAAAwB,cAAA,CAACG,mBAAA,EAAA,EACC,QAAA,EAAS,MAAA,EACT,IAAA,EAAK,GAAA,EACL,WAAA,EAAY,UAAA,EAEXhB,QAAAA,EAAAA,QAAAA,GAAWA,QAAAA,mBAAWa,cAAA,CAACI,SAAA,EAAA,EAAMd,QAAAA,EAAAA,OAAAA,EAAQ,CAAA,EACxC,CAAA;AAAA,oBACAU,cAAA,CAACK,mBAAA,EAAA,EAAU,IAAA,EAAK,IAAA,EAAI,CAAA;AAAA,oCACnB,cAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAL,cAAA,CAACC,cAAO,KAAA,EAAP,EACC,KAAA,EAAOL,oBAAAA,EACP,eAAY,sBAAA,EAAsB,CAAA;AAAA,sBAEpCI,cAAA,CAACC,cAAO,KAAA,EAAP,EACC,SAAS,CAAC,CAACZ,OAAAA,EACX,QAAA,EAAU,CAAC,CAACD,YAAY,CAAC,CAACC,SAC1B,IAAA,EAAMM,iBAAAA,EACN,OAAOD,kBAAAA,EACP,SAAA,EAAWD,IAAAA,EACX,OAAA,EAAS,MAAM;AACb,QAAA,IAAID,SAAAA,EAAW;AACbA,UAAAA,SAAAA,EAAU;AAAA,QACZ;AAAA,MACF,CAAA,EACA,eAAY,uBAAA,EAAuB;AAAA,KAAA,EAEvC;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/ConfirmationDialog/ConfirmationDialog.tsx"],"sourcesContent":["import { Container } from '@/components/Container';\nimport { Dialog } from '@/components/Dialog';\nimport { Separator } from '@/components/Separator';\nimport { Text } from '@/components/Text';\nimport { ReactElement } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './ConfirmationDialog.module.css';\nimport { ConfirmationDialogProps } from './ConfirmationDialog.types';\n\nexport const ConfirmationDialog = ({\n  children,\n  className,\n  disabled,\n  loading,\n  message,\n  onCancel,\n  onConfirm,\n  open,\n  primaryActionLabel = 'Confirm',\n  primaryActionType = 'primary',\n  secondaryActionLabel = 'Cancel',\n  showClose,\n  title,\n  ...props\n}: ConfirmationDialogProps): ReactElement => {\n  if (children && message) {\n    throw new Error(\"You can't pass children and message props at the same time\");\n  }\n\n  return (\n    <Dialog\n      open={open}\n      onOpenChange={(open: boolean) => {\n        if (!open && onCancel) {\n          onCancel();\n        }\n      }}\n    >\n      <Dialog.Content\n        title={title}\n        showClose={showClose}\n        {...props}\n        className={cn(styles.content, className)}\n      >\n        <Container\n          overflow=\"auto\"\n          grow=\"1\"\n          orientation=\"vertical\"\n        >\n          {children ? children : <Text>{message}</Text>}\n        </Container>\n        <Separator size=\"xl\" />\n        <div className={styles.actions}>\n          <Dialog.Close\n            label={secondaryActionLabel}\n            data-testid=\"cancel-action-button\"\n          />\n          <Dialog.Close\n            loading={!!loading}\n            disabled={!!disabled || !!loading}\n            type={primaryActionType}\n            label={primaryActionLabel}\n            autoFocus={open}\n            onClick={() => {\n              if (onConfirm) {\n                onConfirm();\n              }\n            }}\n            data-testid=\"confirm-action-button\"\n          />\n        </div>\n      </Dialog.Content>\n    </Dialog>\n  );\n};\n"],"names":["ConfirmationDialog","children","className","disabled","loading","message","onCancel","onConfirm","open","primaryActionLabel","primaryActionType","secondaryActionLabel","showClose","title","props","Error","jsx","Dialog","jsxs","cn","styles","content","Container","Text","Separator","actions"],"mappings":";;;;;;;;;;;;AASO,MAAMA,qBAAqBA,CAAC;AAAA,EACjCC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,kBAAAA,GAAqB,SAAA;AAAA,EACrBC,iBAAAA,GAAoB,SAAA;AAAA,EACpBC,oBAAAA,GAAuB,QAAA;AAAA,EACvBC,SAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACA,GAAGC;AACoB,CAAA,KAAoB;AAC3C,EAAA,IAAIb,YAAYI,OAAAA,EAAS;AACvB,IAAA,MAAM,IAAIU,MAAM,4DAA4D,CAAA;AAAA,EAC9E;AAEA,EAAA,uBACEC,cAAA,CAACC,aAAA,EAAA,EACC,IAAA,EACA,YAAA,EAAc,CAACT,KAAAA,KAAkB;AAC/B,IAAA,IAAI,CAACA,SAAQF,QAAAA,EAAU;AACrBA,MAAAA,QAAAA,EAAS;AAAA,IACX;AAAA,EACF,CAAA,EAEA,QAAA,kBAAAY,eAAA,CAACD,aAAA,CAAO,OAAA,EAAP,EACC,KAAA,EACA,SAAA,EACA,GAAIH,KAAAA,EACJ,SAAA,EAAWK,MAAAA,CAAGC,iCAAAA,CAAOC,OAAAA,EAASnB,SAAS,CAAA,EAEvC,QAAA,EAAA;AAAA,oBAAAc,cAAA,CAACM,mBAAA,EAAA,EACC,QAAA,EAAS,MAAA,EACT,IAAA,EAAK,GAAA,EACL,WAAA,EAAY,UAAA,EAEXrB,QAAAA,EAAAA,QAAAA,GAAWA,QAAAA,mBAAWe,cAAA,CAACO,SAAA,EAAA,EAAMlB,QAAAA,EAAAA,OAAAA,EAAQ,CAAA,EACxC,CAAA;AAAA,oBACAW,cAAA,CAACQ,mBAAA,EAAA,EAAU,IAAA,EAAK,IAAA,EAAI,CAAA;AAAA,oBACpBN,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAWE,iCAAAA,CAAOK,OAAAA,EACrB,QAAA,EAAA;AAAA,sBAAAT,cAAA,CAACC,cAAO,KAAA,EAAP,EACC,KAAA,EAAON,oBAAAA,EACP,eAAY,sBAAA,EAAsB,CAAA;AAAA,sBAEpCK,cAAA,CAACC,cAAO,KAAA,EAAP,EACC,SAAS,CAAC,CAACb,OAAAA,EACX,QAAA,EAAU,CAAC,CAACD,YAAY,CAAC,CAACC,SAC1B,IAAA,EAAMM,iBAAAA,EACN,OAAOD,kBAAAA,EACP,SAAA,EAAWD,IAAAA,EACX,OAAA,EAAS,MAAM;AACb,QAAA,IAAID,SAAAA,EAAW;AACbA,UAAAA,SAAAA,EAAU;AAAA,QACZ;AAAA,MACF,CAAA,EACA,eAAY,uBAAA,EAAuB;AAAA,KAAA,EAEvC;AAAA,GAAA,EACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/cjs/components/ContextMenu/ContextMenu.css

@@ -0,0 +1,40 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. genericMenu) */
+
+.trigger__4-zK2:focus-visible {
+  outline: 2px solid var(--click-global-color-outline-default);
+  outline-offset: 2px;
+}
+
+.right-menu-content__0-EQz {
+  z-index: 1;
+  flex-direction: column;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='bottom'] {
+  margin-top: -1px;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='top'] {
+  margin-bottom: -1px;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='left'] {
+  margin-right: -1px;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='left'] .popover-arrow__z8r3W {
+  margin-right: 1rem;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='right'] {
+  margin-left: -1px;
+}
+
+.right-menu-content_show-arrow__-yaE-[data-side='right'] .popover-arrow__z8r3W {
+  margin-left: 1rem;
+}
+
+.group__4UU7V {
+  width: 100%;
+  border-bottom: 1px solid var(--click-genericMenu-item-color-default-stroke-default);
+}

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const trigger = "trigger__4-zK2";
+const group = "group__4UU7V";
+const styles = {
+	trigger: trigger,
+	"right-menu-content": "right-menu-content__0-EQz",
+	"right-menu-content_show-arrow": "right-menu-content_show-arrow__-yaE-",
+	group: group
+};
+
+exports.default = styles;
+exports.group = group;
+exports.trigger = trigger;
+//# sourceMappingURL=ContextMenu.module.css.cjs.map

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

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

package/dist/cjs/components/ContextMenu/index.cjs

@@ -1,17 +1,20 @@
+require("./ContextMenu.css");
 'use strict';
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const jsxRuntime = require('react/jsx-runtime');
 const RightMenu = require('@radix-ui/react-context-menu');
-const styledComponents = require('styled-components');
 const react = require('react');
 const GenericMenu = require('../GenericMenu/index.cjs');
+const cva = require('../../lib/cva.cjs');
 const PopoverArrow = require('../Assets/Icons/Popover-Arrow.cjs');
 const IconWrapper = require('../IconWrapper/index.cjs');
 const useInputModality = require('../../hooks/internal/useInputModality.cjs');
 const PortalContext = require('../../providers/PortalContext.cjs');
+const ContextMenu_module = require('./ContextMenu.module.css.cjs');
 const Icon = require('../Icon/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -34,16 +37,12 @@ function _interopNamespace(e) {
 const RightMenu__namespace = /*#__PURE__*/_interopNamespace(RightMenu);
 
 const ContextMenu = (props) => /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Root, { ...props });
-const TriggerDiv = styledComponents.styled.div.withConfig({
-  componentId: "sc-8z6kye-0"
-})(["&:focus-visible{outline:2px solid ", ";outline-offset:2px;}"], ({
-  theme
-}) => theme.click.global.color.outline.default);
 const ContextMenuTrigger = react.forwardRef(({
   disabled,
+  className,
   ...props
 }, ref) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxRuntime.jsx(TriggerDiv, { ref, ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Trigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref, ...props, className: cva.cn(ContextMenu_module.default.trigger, className) }) });
 });
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
 ContextMenu.Trigger = ContextMenuTrigger;
@@ -60,31 +59,25 @@ const ContextMenuSubTrigger = ({
 };
 ContextMenuSubTrigger.displayName = "ContextMenuSubTrigger";
 ContextMenu.SubTrigger = ContextMenuSubTrigger;
-const RightMenuContent = styledComponents.styled(GenericMenu.GenericMenuPanel).withConfig({
-  componentId: "sc-8z6kye-1"
-})(["flex-direction:column;z-index:1;", ";"], ({
-  $showArrow
-}) => $showArrow ? `
-      &[data-side="bottom"] {
-        margin-top: -1px;
-      }
-      &[data-side="top"] {
-        margin-bottom: -1px;
-      }
-      &[data-side="left"] {
-        margin-right: -1px;
-        .popover-arrow {
-          margin-right: 1rem;
-        }
-      }
-      }
-      &[data-side="right"] {
-        margin-left: -1px;
-        .popover-arrow {
-          margin-left: 1rem;
-        }
-      }
-  ` : "");
+const rightMenuContentVariants = classVarianceAuthority.cva(ContextMenu_module.default["right-menu-content"], {
+  variants: {
+    showArrow: {
+      true: ContextMenu_module.default["right-menu-content_show-arrow"],
+      false: ""
+    }
+  },
+  defaultVariants: {
+    showArrow: false
+  }
+});
+const _RightMenuContent = ({
+  showArrow,
+  className,
+  ...props
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuPanel, { ref, showArrow, ...props, className: cva.cn(rightMenuContentVariants({
+  showArrow
+}), className) });
+const RightMenuContent = react.forwardRef(_RightMenuContent);
 const ContextMenuContent = ({
   sub,
   children,
@@ -100,32 +93,25 @@ const ContextMenuContent = ({
   const ContentElement = sub ? RightMenu__namespace.SubContent : RightMenu__namespace.Content;
   const inputModalityProps = useInputModality.useInputModality();
   const portalContainer = PortalContext.useResolvedPortalContainer(container);
-  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RightMenuContent, { ...props, $type: "context-menu", $showArrow: showArrow, as: ContentElement, ...inputModalityProps, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(RightMenuContent, { ...props, type: "context-menu", showArrow, as: ContentElement, ...inputModalityProps, children: [
     showArrow && /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.Arrow, { asChild: true, as: RightMenu__namespace.Arrow, width: 20, height: 10, children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrow.default, { className: "popover-arrow" }) }),
     children
   ] }) });
 };
 ContextMenuContent.displayName = "ContextMenuContent";
 ContextMenu.Content = ContextMenuContent;
-const RightMenuGroup = styledComponents.styled(RightMenu__namespace.Group).withConfig({
-  componentId: "sc-8z6kye-2"
-})(["width:100%;border-bottom:1px solid ", ";"], ({
-  theme
-}) => theme.click.genericMenu.item.color.default.stroke.default);
-const ContextMenuGroup = (props) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RightMenuGroup, { ...props });
+const ContextMenuGroup = ({
+  className,
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Group, { ...props, className: cva.cn(ContextMenu_module.default.group, className) });
 };
 ContextMenuGroup.displayName = "ContextMenuGroup";
 ContextMenu.Group = ContextMenuGroup;
-const RightMenuSub = styledComponents.styled(RightMenu__namespace.Sub).withConfig({
-  componentId: "sc-8z6kye-3"
-})(["border-bottom:1px solid ", ";"], ({
-  theme
-}) => theme.click.genericMenu.item.color.default.stroke.default);
 const ContextMenuSub = ({
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(RightMenuSub, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(RightMenu__namespace.Sub, { ...props });
 };
 ContextMenuSub.displayName = "ContextMenuSub";
 ContextMenu.Sub = ContextMenuSub;
@@ -136,7 +122,7 @@ const ContextMenuItem = ({
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuItem, { as: RightMenu__namespace.Item, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(GenericMenu.GenericMenuItem, { as: RightMenu__namespace.Item, type, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper.IconWrapper, { icon, iconDir, children }) });
 };
 ContextMenuItem.displayName = "ContextMenuItem";
 ContextMenu.Item = ContextMenuItem;