@clickhouse/click-ui 0.4.0 → 0.6.0-rc1

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { styled } from 'styled-components';\n\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'mono';\nexport type TextAlignment = 'left' | 'center' | 'right';\nexport type TextColor = 'default' | 'muted' | 'danger' | 'disabled' | 'warning';\n\nexport interface TextProps<T extends ElementType = 'p'> {\n  /** The text content to display */\n  children: ReactNode;\n  /** The text alignment */\n  align?: TextAlignment;\n  /** The text color variant */\n  color?: TextColor;\n  /** The font size of the text */\n  size?: TextSize;\n  /** The font weight of the text */\n  weight?: TextWeight;\n  /** Additional CSS class name */\n  className?: string;\n  /** Custom component to render as */\n  component?: T;\n  /** Whether the text should fill the full width of its container */\n  fillWidth?: boolean;\n}\n\ntype TextPolymorphicComponent = <T extends ElementType = 'p'>(\n  props: Omit<ComponentProps<T>, keyof T> & TextProps<T>\n) => ReactNode;\n\nconst _Text = <T extends ElementType = 'p'>(\n  {\n    align,\n    color,\n    size,\n    weight,\n    className,\n    children,\n    component,\n    fillWidth,\n    ...props\n  }: Omit<ComponentProps<T>, keyof T> & TextProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => (\n  <CuiText\n    as={component ?? 'p'}\n    ref={ref}\n    $align={align}\n    $color={color}\n    $size={size}\n    $weight={weight}\n    $fillWidth={fillWidth}\n    className={className}\n    {...props}\n  >\n    {children}\n  </CuiText>\n);\n\nconst CuiText = styled.p<{\n  $align?: TextAlignment;\n  $color?: TextColor;\n  $size?: TextSize;\n  $weight?: TextWeight;\n  $fillWidth?: boolean;\n}>`\n  font: ${({ $size = 'md', $weight = 'normal', theme }) =>\n    theme.typography.styles.product.text[$weight][$size]};\n  color: ${({ $color = 'default', theme }) => theme.click.global.color.text[$color]};\n  text-align: ${({ $align = 'left' }) => $align};\n  margin: 0;\n  ${({ $fillWidth }) => $fillWidth && 'width: 100%'};\n`;\n\n_Text.displayName = 'Text';\n\nexport const Text: TextPolymorphicComponent = forwardRef(_Text);\n"],"names":["_Text","align","color","size","weight","className","children","component","fillWidth","props","ref","CuiText","styled","p","withConfig","componentId","$size","$weight","theme","typography","styles","product","text","$color","click","global","$align","$fillWidth","displayName","Text","forwardRef"],"mappings":";;;;;;;;AAqCA,MAAMA,QAAQ,CACZ;AAAA,EACEC,KAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,IAAAA;AAAAA,EACAC,MAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACA,GAAGC;AAC4C,CAAA,EACjDC,GAAAA,oCAEC,OAAA,EAAA,EACC,EAAA,EAAIH,aAAa,GAAA,EACjB,GAAA,EACA,QAAQN,KAAAA,EACR,MAAA,EAAQC,OACR,KAAA,EAAOC,IAAAA,EACP,SAASC,MAAAA,EACT,UAAA,EAAYI,WACZ,SAAA,EACA,GAAIC,OAEHH,QAAAA,EACH,CAAA;AAGF,MAAMK,OAAAA,GAAUC,uBAAAA,CAAOC,CAAAA,CAACC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,OAAA,EAAA,SAAA,EAAA,gBAAA,YAAA,EAAA,GAAA,GAOd,CAAC;AAAA,EAAEC,KAAAA,GAAQ,IAAA;AAAA,EAAMC,OAAAA,GAAU,QAAA;AAAA,EAAUC;AAAM,CAAA,KACjDA,KAAAA,CAAMC,WAAWC,MAAAA,CAAOC,OAAAA,CAAQC,KAAKL,OAAO,CAAA,CAAED,KAAK,CAAA,EAC5C,CAAC;AAAA,EAAEO,MAAAA,GAAS,SAAA;AAAA,EAAWL;AAAM,CAAA,KAAMA,MAAMM,KAAAA,CAAMC,MAAAA,CAAOvB,MAAMoB,IAAAA,CAAKC,MAAM,GAClE,CAAC;AAAA,EAAEG,MAAAA,GAAS;AAAO,CAAA,KAAMA,QAErC,CAAC;AAAA,EAAEC;AAAW,CAAA,KAAMA,cAAc,aAAa,CAAA;AAGnD3B,KAAAA,CAAM4B,WAAAA,GAAc,MAAA;AAEb,MAAMC,IAAAA,GAAiCC,iBAAW9B,KAAK;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n  ComponentProps,\n  ComponentPropsWithRef,\n  ElementType,\n  ReactNode,\n  forwardRef,\n} from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Text.module.css';\n\nexport type TextSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type TextWeight = 'normal' | 'medium' | 'semibold' | 'bold' | 'mono';\nexport type TextAlignment = 'left' | 'center' | 'right';\nexport type TextColor = 'default' | 'muted' | 'danger' | 'disabled' | 'warning';\n\nexport interface TextProps<T extends ElementType = 'p'> {\n  /** The text content to display */\n  children: ReactNode;\n  /** The text alignment */\n  align?: TextAlignment;\n  /** The text color variant */\n  color?: TextColor;\n  /** The font size of the text */\n  size?: TextSize;\n  /** The font weight of the text */\n  weight?: TextWeight;\n  /** Additional CSS class name */\n  className?: string;\n  /** Custom component to render as */\n  component?: T;\n  /** Whether the text should fill the full width of its container */\n  fillWidth?: boolean;\n}\n\ntype TextPolymorphicComponent = <T extends ElementType = 'p'>(\n  props: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>\n) => ReactNode;\n\nconst textVariants = cva(styles.text, {\n  variants: {\n    color: {\n      default: styles['text_color_default'],\n      muted: styles['text_color_muted'],\n      danger: styles['text_color_danger'],\n      disabled: styles['text_color_disabled'],\n      warning: styles['text_color_warning'],\n    },\n    align: {\n      left: styles['text_align_left'],\n      center: styles['text_align_center'],\n      right: styles['text_align_right'],\n    },\n    fillWidth: {\n      true: styles['text_fill-width'],\n    },\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n    },\n    weight: {\n      normal: '',\n      medium: '',\n      semibold: '',\n      bold: '',\n      mono: '',\n    },\n  },\n  compoundVariants: [\n    { weight: 'normal', size: 'xs', class: styles['text_font_normal-xs'] },\n    { weight: 'normal', size: 'sm', class: styles['text_font_normal-sm'] },\n    { weight: 'normal', size: 'md', class: styles['text_font_normal-md'] },\n    { weight: 'normal', size: 'lg', class: styles['text_font_normal-lg'] },\n    { weight: 'medium', size: 'xs', class: styles['text_font_medium-xs'] },\n    { weight: 'medium', size: 'sm', class: styles['text_font_medium-sm'] },\n    { weight: 'medium', size: 'md', class: styles['text_font_medium-md'] },\n    { weight: 'medium', size: 'lg', class: styles['text_font_medium-lg'] },\n    { weight: 'semibold', size: 'xs', class: styles['text_font_semibold-xs'] },\n    { weight: 'semibold', size: 'sm', class: styles['text_font_semibold-sm'] },\n    { weight: 'semibold', size: 'md', class: styles['text_font_semibold-md'] },\n    { weight: 'semibold', size: 'lg', class: styles['text_font_semibold-lg'] },\n    { weight: 'bold', size: 'xs', class: styles['text_font_bold-xs'] },\n    { weight: 'bold', size: 'sm', class: styles['text_font_bold-sm'] },\n    { weight: 'bold', size: 'md', class: styles['text_font_bold-md'] },\n    { weight: 'bold', size: 'lg', class: styles['text_font_bold-lg'] },\n    { weight: 'mono', size: 'xs', class: styles['text_font_mono-xs'] },\n    { weight: 'mono', size: 'sm', class: styles['text_font_mono-sm'] },\n    { weight: 'mono', size: 'md', class: styles['text_font_mono-md'] },\n    { weight: 'mono', size: 'lg', class: styles['text_font_mono-lg'] },\n  ],\n  defaultVariants: {\n    color: 'default',\n    align: 'left',\n    size: 'md',\n    weight: 'normal',\n  },\n});\n\nconst _Text = <T extends ElementType = 'p'>(\n  {\n    align,\n    color,\n    size,\n    weight,\n    className,\n    children,\n    component,\n    fillWidth,\n    ...props\n  }: Omit<ComponentProps<T>, keyof TextProps<T>> & TextProps<T>,\n  ref: ComponentPropsWithRef<T>['ref']\n) => {\n  const Component = component ?? 'p';\n  return (\n    <Component\n      ref={ref}\n      {...props}\n      className={cn(textVariants({ color, align, size, weight, fillWidth }), className)}\n    >\n      {children}\n    </Component>\n  );\n};\n\n_Text.displayName = 'Text';\n\nexport const Text: TextPolymorphicComponent = forwardRef(_Text);\n"],"names":["textVariants","cva","styles","text","variants","color","default","muted","danger","disabled","warning","align","left","center","right","fillWidth","true","size","xs","sm","md","lg","weight","normal","medium","semibold","bold","mono","compoundVariants","class","defaultVariants","_Text","className","children","component","props","ref","Component","cn","displayName","Text","forwardRef"],"mappings":"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"}

package/dist/cjs/components/Title/Title.css

@@ -0,0 +1,99 @@
+.title__t68i9 {
+  /* anchors inherit the title color via this local alias; the color
+     modifiers below redefine it so links track the chosen title color. */
+  --title-link-color: var(--click-global-color-title-default);
+
+  margin: 0;
+  padding: 0;
+  color: var(--click-global-color-title-default);
+  font: var(--typography-styles-product-titles-md);
+  font-style: inherit;
+  text-align: left;
+}
+
+.title__t68i9 a,
+.title__t68i9 a:visited {
+  color: var(--title-link-color);
+  cursor: pointer;
+}
+
+.title__t68i9 a:hover {
+  color: var(--click-global-color-title-muted);
+}
+
+/* font shorthand depends on both family and size; one class per pairing
+   mirrors the single `font:` declaration emitted by styled-components. */
+
+.title_font_product-xs__IdFu4 {
+  font: var(--typography-styles-product-titles-xs);
+  font-style: inherit;
+}
+
+.title_font_product-sm__9RMAB {
+  font: var(--typography-styles-product-titles-sm);
+  font-style: inherit;
+}
+
+.title_font_product-md__uDEhW {
+  font: var(--typography-styles-product-titles-md);
+  font-style: inherit;
+}
+
+.title_font_product-lg__BtA0P {
+  font: var(--typography-styles-product-titles-lg);
+  font-style: inherit;
+}
+
+.title_font_product-xl__VFvtd {
+  font: var(--typography-styles-product-titles-xl);
+  font-style: inherit;
+}
+
+.title_font_brand-xs__8A0De {
+  font: var(--typography-styles-brand-titles-xs);
+  font-style: inherit;
+}
+
+.title_font_brand-sm__6QsrH {
+  font: var(--typography-styles-brand-titles-sm);
+  font-style: inherit;
+}
+
+.title_font_brand-md__YOk4n {
+  font: var(--typography-styles-brand-titles-md);
+  font-style: inherit;
+}
+
+.title_font_brand-lg__90bGM {
+  font: var(--typography-styles-brand-titles-lg);
+  font-style: inherit;
+}
+
+.title_font_brand-xl__aDCet {
+  font: var(--typography-styles-brand-titles-xl);
+  font-style: inherit;
+}
+
+.title_color_default__4FO-y {
+  --title-link-color: var(--click-global-color-title-default);
+
+  color: var(--click-global-color-title-default);
+}
+
+.title_color_muted__sJNEb {
+  --title-link-color: var(--click-global-color-title-muted);
+
+  color: var(--click-global-color-title-muted);
+}
+
+.title_align_left__-s5o9 {
+  text-align: left;
+}
+
+.title_align_center__33VmS {
+  text-align: center;
+}
+
+.title_align_right__483BF {
+  text-align: right;
+}

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

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const title = "title__t68i9";
+const title_color_default = "title_color_default__4FO-y";
+const title_color_muted = "title_color_muted__sJNEb";
+const title_align_left = "title_align_left__-s5o9";
+const title_align_center = "title_align_center__33VmS";
+const title_align_right = "title_align_right__483BF";
+const styles = {
+	title: title,
+	"title_font_product-xs": "title_font_product-xs__IdFu4",
+	"title_font_product-sm": "title_font_product-sm__9RMAB",
+	"title_font_product-md": "title_font_product-md__uDEhW",
+	"title_font_product-lg": "title_font_product-lg__BtA0P",
+	"title_font_product-xl": "title_font_product-xl__VFvtd",
+	"title_font_brand-xs": "title_font_brand-xs__8A0De",
+	"title_font_brand-sm": "title_font_brand-sm__6QsrH",
+	"title_font_brand-md": "title_font_brand-md__YOk4n",
+	"title_font_brand-lg": "title_font_brand-lg__90bGM",
+	"title_font_brand-xl": "title_font_brand-xl__aDCet",
+	title_color_default: title_color_default,
+	title_color_muted: title_color_muted,
+	title_align_left: title_align_left,
+	title_align_center: title_align_center,
+	title_align_right: title_align_right
+};
+
+exports.default = styles;
+exports.title = title;
+exports.title_align_center = title_align_center;
+exports.title_align_left = title_align_left;
+exports.title_align_right = title_align_right;
+exports.title_color_default = title_color_default;
+exports.title_color_muted = title_color_muted;
+//# sourceMappingURL=Title.module.css.cjs.map

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

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

package/dist/cjs/components/Title/index.cjs

@@ -1,11 +1,85 @@
+require("./Title.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const Title_module = require('./Title.module.css.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
+const titleVariants = classVarianceAuthority.cva(Title_module.default.title, {
+  variants: {
+    color: {
+      default: Title_module.default["title_color_default"],
+      muted: Title_module.default["title_color_muted"]
+    },
+    align: {
+      left: Title_module.default["title_align_left"],
+      center: Title_module.default["title_align_center"],
+      right: Title_module.default["title_align_right"]
+    },
+    family: {
+      product: "",
+      brand: ""
+    },
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: ""
+    }
+  },
+  compoundVariants: [{
+    family: "product",
+    size: "xs",
+    class: Title_module.default["title_font_product-xs"]
+  }, {
+    family: "product",
+    size: "sm",
+    class: Title_module.default["title_font_product-sm"]
+  }, {
+    family: "product",
+    size: "md",
+    class: Title_module.default["title_font_product-md"]
+  }, {
+    family: "product",
+    size: "lg",
+    class: Title_module.default["title_font_product-lg"]
+  }, {
+    family: "product",
+    size: "xl",
+    class: Title_module.default["title_font_product-xl"]
+  }, {
+    family: "brand",
+    size: "xs",
+    class: Title_module.default["title_font_brand-xs"]
+  }, {
+    family: "brand",
+    size: "sm",
+    class: Title_module.default["title_font_brand-sm"]
+  }, {
+    family: "brand",
+    size: "md",
+    class: Title_module.default["title_font_brand-md"]
+  }, {
+    family: "brand",
+    size: "lg",
+    class: Title_module.default["title_font_brand-lg"]
+  }, {
+    family: "brand",
+    size: "xl",
+    class: Title_module.default["title_font_brand-xl"]
+  }],
+  defaultVariants: {
+    color: "default",
+    align: "left",
+    family: "product",
+    size: "md"
+  }
+});
 const Title = react.forwardRef(({
   align,
   size,
@@ -13,25 +87,17 @@ const Title = react.forwardRef(({
   type,
   color,
   children,
+  className,
   ...props
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx(CuiTitle, { ref, $align: align, $color: color, $size: size, $family: family, as: type, ...props, children }));
-const CuiTitle = styledComponents.styled.div.withConfig({
-  componentId: "sc-1tw8tql-0"
-})(["font:", ";color:", ";margin:0;padding:0;font-style:inherit;text-align:", ";a,a:visited{color:", ";cursor:pointer;}a:hover{color:", ";}"], ({
-  $size = "md",
-  $family = "product",
-  theme
-}) => theme.typography.styles[$family].titles[$size], ({
-  $color = "default",
-  theme
-}) => theme.click.global.color.title[$color], ({
-  $align = "left"
-}) => $align, ({
-  $color = "default",
-  theme
-}) => theme.click.global.color.title[$color], ({
-  theme
-}) => theme.click.global.color.title.muted);
+}, ref) => {
+  const Component = type;
+  return /* @__PURE__ */ jsxRuntime.jsx(Component, { ref, ...props, className: cva.cn(titleVariants({
+    color,
+    align,
+    family,
+    size
+  }), className), children });
+});
 
 exports.Title = Title;
 //# sourceMappingURL=index.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../../../../src/components/Title/Title.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { styled } from 'styled-components';\n\nexport type TitleAlignment = 'left' | 'center' | 'right';\nexport type TitleColor = 'default' | 'muted';\nexport type TitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type TitleFamily = 'product' | 'brand';\nexport type TitleType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /** The text alignment of the title */\n  align?: TitleAlignment;\n  /** The color variant of the title */\n  color?: TitleColor;\n  /** The font size of the title */\n  size?: TitleSize;\n  /** The font family to use - product or brand */\n  family?: TitleFamily;\n  /** The heading level (h1-h6) */\n  type: TitleType;\n}\n\n/** The `title` component allows you to easily add headings to your pages. They do not include built in margins. */\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(\n  ({ align, size, family, type, color, children, ...props }, ref) => (\n    <CuiTitle\n      ref={ref}\n      $align={align}\n      $color={color}\n      $size={size}\n      $family={family}\n      as={type}\n      {...props}\n    >\n      {children}\n    </CuiTitle>\n  )\n);\n\nconst CuiTitle = styled.div<{\n  $align?: TitleAlignment;\n  $color?: TitleColor;\n  $size?: TitleSize;\n  $family?: TitleFamily;\n}>`\n  font: ${({ $size = 'md', $family = 'product', theme }) =>\n    theme.typography.styles[$family].titles[$size]};\n  color: ${({ $color = 'default', theme }) => theme.click.global.color.title[$color]};\n  margin: 0;\n  padding: 0;\n  font-style: inherit;\n  text-align: ${({ $align = 'left' }) => $align};\n\n  a,\n  a:visited {\n    color: ${({ $color = 'default', theme }) => theme.click.global.color.title[$color]};\n    cursor: pointer;\n  }\n\n  a:hover {\n    color: ${({ theme }) => theme.click.global.color.title.muted};\n  }\n`;\n"],"names":["Title","forwardRef","align","size","family","type","color","children","props","ref","jsx","CuiTitle","styled","div","withConfig","componentId","$size","$family","theme","typography","styles","titles","$color","click","global","title","$align","muted"],"mappings":";;;;;;;;AAuBO,MAAMA,KAAAA,GAAQC,iBACnB,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,IAAAA;AAAAA,EAAMC,MAAAA;AAAAA,EAAQC,IAAAA;AAAAA,EAAMC,KAAAA;AAAAA,EAAOC,QAAAA;AAAAA,EAAU,GAAGC;AAAM,CAAA,EAAGC,wBACzDC,cAAA,CAAC,QAAA,EAAA,EACC,GAAA,EACA,MAAA,EAAQR,OACR,MAAA,EAAQI,KAAAA,EACR,KAAA,EAAOH,IAAAA,EACP,SAASC,MAAAA,EACT,EAAA,EAAIC,MACJ,GAAIG,KAAAA,EAEHD,UACH,CAEJ;AAEA,MAAMI,QAAAA,GAAWC,uBAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,OAAA,EAAA,SAAA,EAAA,sDAAA,qBAAA,EAAA,iCAAA,EAAA,IAAA,CAAA,EAMjB,CAAC;AAAA,EAAEC,KAAAA,GAAQ,IAAA;AAAA,EAAMC,OAAAA,GAAU,SAAA;AAAA,EAAWC;AAAM,CAAA,KAClDA,KAAAA,CAAMC,WAAWC,MAAAA,CAAOH,OAAO,EAAEI,MAAAA,CAAOL,KAAK,GACtC,CAAC;AAAA,EAAEM,MAAAA,GAAS,SAAA;AAAA,EAAWJ;AAAM,CAAA,KAAMA,MAAMK,KAAAA,CAAMC,MAAAA,CAAOlB,MAAMmB,KAAAA,CAAMH,MAAM,GAInE,CAAC;AAAA,EAAEI,MAAAA,GAAS;AAAO,CAAA,KAAMA,QAI5B,CAAC;AAAA,EAAEJ,MAAAA,GAAS,SAAA;AAAA,EAAWJ;AAAM,CAAA,KAAMA,MAAMK,KAAAA,CAAMC,MAAAA,CAAOlB,MAAMmB,KAAAA,CAAMH,MAAM,GAKxE,CAAC;AAAA,EAAEJ;AAAM,CAAA,KAAMA,KAAAA,CAAMK,KAAAA,CAAMC,MAAAA,CAAOlB,KAAAA,CAAMmB,MAAME,KAAK,CAAA;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Title/Title.tsx"],"sourcesContent":["import { HTMLAttributes, forwardRef } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './Title.module.css';\n\nexport type TitleAlignment = 'left' | 'center' | 'right';\nexport type TitleColor = 'default' | 'muted';\nexport type TitleSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\nexport type TitleFamily = 'product' | 'brand';\nexport type TitleType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n\nexport interface TitleProps extends HTMLAttributes<HTMLHeadingElement> {\n  /** The text alignment of the title */\n  align?: TitleAlignment;\n  /** The color variant of the title */\n  color?: TitleColor;\n  /** The font size of the title */\n  size?: TitleSize;\n  /** The font family to use - product or brand */\n  family?: TitleFamily;\n  /** The heading level (h1-h6) */\n  type: TitleType;\n}\n\nconst titleVariants = cva(styles.title, {\n  variants: {\n    color: {\n      default: styles['title_color_default'],\n      muted: styles['title_color_muted'],\n    },\n    align: {\n      left: styles['title_align_left'],\n      center: styles['title_align_center'],\n      right: styles['title_align_right'],\n    },\n    family: {\n      product: '',\n      brand: '',\n    },\n    size: {\n      xs: '',\n      sm: '',\n      md: '',\n      lg: '',\n      xl: '',\n    },\n  },\n  compoundVariants: [\n    { family: 'product', size: 'xs', class: styles['title_font_product-xs'] },\n    { family: 'product', size: 'sm', class: styles['title_font_product-sm'] },\n    { family: 'product', size: 'md', class: styles['title_font_product-md'] },\n    { family: 'product', size: 'lg', class: styles['title_font_product-lg'] },\n    { family: 'product', size: 'xl', class: styles['title_font_product-xl'] },\n    { family: 'brand', size: 'xs', class: styles['title_font_brand-xs'] },\n    { family: 'brand', size: 'sm', class: styles['title_font_brand-sm'] },\n    { family: 'brand', size: 'md', class: styles['title_font_brand-md'] },\n    { family: 'brand', size: 'lg', class: styles['title_font_brand-lg'] },\n    { family: 'brand', size: 'xl', class: styles['title_font_brand-xl'] },\n  ],\n  defaultVariants: {\n    color: 'default',\n    align: 'left',\n    family: 'product',\n    size: 'md',\n  },\n});\n\n/** The `title` component allows you to easily add headings to your pages. They do not include built in margins. */\nexport const Title = forwardRef<HTMLHeadingElement, TitleProps>(\n  ({ align, size, family, type, color, children, className, ...props }, ref) => {\n    const Component = type;\n    return (\n      <Component\n        ref={ref}\n        {...props}\n        className={cn(titleVariants({ color, align, family, size }), className)}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n"],"names":["titleVariants","cva","styles","title","variants","color","default","muted","align","left","center","right","family","product","brand","size","xs","sm","md","lg","xl","compoundVariants","class","defaultVariants","Title","forwardRef","type","children","className","props","ref","Component","cn"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -18,7 +18,7 @@ const Tooltip = require('./components/Tooltip/index.cjs');
 const theme_core = require('./theme/theme.core.cjs');
 const theme_utils = require('./theme/theme.utils.cjs');
 const InitCUIThemeScript = require('./theme/InitCUIThemeScript/index.cjs');
-const common = require('./components/Link/common.cjs');
+const linkStyles = require('./styles/linkStyles.cjs');
 const Accordion = require('./components/Accordion/index.cjs');
 const Alert = require('./components/Alert/index.cjs');
 const AutoComplete = require('./components/AutoComplete/index.cjs');
@@ -107,7 +107,7 @@ exports.getDefaultThemeName = theme_utils.getDefaultThemeName;
 exports.getFallbackThemeName = theme_utils.getFallbackThemeName;
 exports.isValidThemeName = theme_utils.isValidThemeName;
 exports.InitCUIThemeScript = InitCUIThemeScript.InitCUIThemeScript;
-exports.linkStyles = common.linkStyles;
+exports.linkStyles = linkStyles.linkStyles;
 exports.Accordion = Accordion.Accordion;
 exports.Alert = Alert.Alert;
 exports.DangerAlert = Alert.DangerAlert;

package/dist/cjs/{components/Link/common.cjs → styles/linkStyles.cjs}

@@ -25,4 +25,4 @@ const linkStyles = styledComponents.css(["font:", ";color:", ";margin:0;text-dec
 }) => theme.click.global.color.text.link.default);
 
 exports.linkStyles = linkStyles;
-//# sourceMappingURL=common.cjs.map
+//# sourceMappingURL=linkStyles.cjs.map

package/dist/cjs/styles/linkStyles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkStyles.cjs","sources":["../../../src/styles/linkStyles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport type { TextSize, TextWeight } from '@/components/Text';\n\nexport type StyledLinkProps = { $size: TextSize; $weight: TextWeight };\n\nexport const linkStyles = css<StyledLinkProps>`\n  font: ${({ $size, $weight = 'normal', theme }) =>\n    theme.typography.styles.product.text[$weight][$size]};\n  color: ${({ theme }) => theme.click.global.color.text.link.default};\n  margin: 0;\n  text-decoration: none;\n  display: inline-flex;\n  gap: ${({ $size, theme }) =>\n    $size === 'xs' || $size === 'sm'\n      ? theme.click.link.space.sm.gap\n      : theme.click.link.space.md.gap};\n  margin-right: ${({ $size, theme }) =>\n    $size === 'xs' || $size === 'sm'\n      ? theme.click.link.space.sm.gap\n      : theme.click.link.space.md.gap};\n  align-items: center;\n\n  &:hover,\n  &:focus {\n    color: ${({ theme }) => theme.click.global.color.text.link.hover};\n    transition: ${({ theme }) => theme.transition.default};\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:visited {\n    color: ${({ theme }) => theme.click.global.color.text.link.default};\n  }\n`;\n"],"names":["linkStyles","css","$size","$weight","theme","typography","styles","product","text","click","global","color","link","default","space","sm","gap","md","hover","transition"],"mappings":";;;;;;AAKO,MAAMA,UAAAA,GAAaC,oBAAAA,uOAChB,CAAC;AAAA,EAAEC,KAAAA;AAAAA,EAAOC,OAAAA,GAAU,QAAA;AAAA,EAAUC;AAAM,CAAA,KAC1CA,KAAAA,CAAMC,WAAWC,MAAAA,CAAOC,OAAAA,CAAQC,KAAKL,OAAO,CAAA,CAAED,KAAK,CAAA,EAC5C,CAAC;AAAA,EAAEE;AAAM,CAAA,KAAMA,MAAMK,KAAAA,CAAMC,MAAAA,CAAOC,MAAMH,IAAAA,CAAKI,IAAAA,CAAKC,SAIpD,CAAC;AAAA,EAAEX,KAAAA;AAAAA,EAAOE;AAAM,CAAA,KACrBF,UAAU,IAAA,IAAQA,KAAAA,KAAU,IAAA,GACxBE,KAAAA,CAAMK,MAAMG,IAAAA,CAAKE,KAAAA,CAAMC,EAAAA,CAAGC,GAAAA,GAC1BZ,MAAMK,KAAAA,CAAMG,IAAAA,CAAKE,KAAAA,CAAMG,EAAAA,CAAGD,KAChB,CAAC;AAAA,EAAEd,KAAAA;AAAAA,EAAOE;AAAM,CAAA,KAC9BF,UAAU,IAAA,IAAQA,KAAAA,KAAU,IAAA,GACxBE,KAAAA,CAAMK,MAAMG,IAAAA,CAAKE,KAAAA,CAAMC,EAAAA,CAAGC,GAAAA,GAC1BZ,MAAMK,KAAAA,CAAMG,IAAAA,CAAKE,KAAAA,CAAMG,EAAAA,CAAGD,KAKrB,CAAC;AAAA,EAAEZ;AAAM,CAAA,KAAMA,MAAMK,KAAAA,CAAMC,MAAAA,CAAOC,MAAMH,IAAAA,CAAKI,IAAAA,CAAKM,OAC7C,CAAC;AAAA,EAAEd;AAAM,CAAA,KAAMA,KAAAA,CAAMe,UAAAA,CAAWN,OAAAA,EAMrC,CAAC;AAAA,EAAET;AAAM,CAAA,KAAMA,MAAMK,KAAAA,CAAMC,MAAAA,CAAOC,KAAAA,CAAMH,IAAAA,CAAKI,KAAKC,OAAO;;;;"}

package/dist/cjs/theme/styles/tokens-dark.css

@@ -910,6 +910,7 @@
   --click-genericMenu-item-color-default-background-active: #282828;
   --click-genericMenu-item-color-default-background-disabled: #414141;
   --click-genericMenu-item-color-default-stroke-default: #323232;
+  --click-genericMenu-item-color-default-stroke-focus: #faff69;
   --click-genericMenu-item-color-format-default: lch(62.868 0 none);
   --click-genericMenu-item-color-format-hover: rgb(60.157% 60.157% 60.157%);
   --click-genericMenu-item-color-format-active: rgb(60.157% 60.157% 60.157%);
@@ -928,6 +929,7 @@
   --click-genericMenu-item-color-danger-background-active: rgb(100% 13.725% 13.725% / 0.45);
   --click-genericMenu-item-color-danger-background-disabled: #414141;
   --click-genericMenu-item-color-danger-stroke-default: rgba(0, 0, 0, 0);
+  --click-genericMenu-item-color-danger-stroke-focus: #faff69;
   --click-genericMenu-itemCustom-typography-label-sm: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --click-genericMenu-itemCustom-typography-label-lg: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --click-genericMenu-button-space-gap: 0.25rem;
@@ -1433,6 +1435,7 @@
   --click-global-color-text-link-default: #faff69;
   --click-global-color-text-link-hover: #feffc2;
   --click-global-color-text-danger: #ffbaba;
+  --click-global-color-text-warning: #ffb88f;
   --click-global-color-stroke-default: #323232;
   --click-global-color-stroke-muted: #323232;
   --click-global-color-stroke-intense: #414141;

package/dist/cjs/theme/styles/tokens-light.css

@@ -902,6 +902,7 @@
   --click-genericMenu-item-color-default-background-active: #ffffff;
   --click-genericMenu-item-color-default-background-disabled: #ffffff;
   --click-genericMenu-item-color-default-stroke-default: #e6e7e9;
+  --click-genericMenu-item-color-default-stroke-focus: #437eef;
   --click-genericMenu-item-color-format-default: lch(71.998 4.1843 268.48);
   --click-genericMenu-item-color-format-hover: lch(71.998 4.1843 268.48);
   --click-genericMenu-item-color-format-active: lch(71.998 4.1843 268.48);
@@ -918,6 +919,8 @@
   --click-genericMenu-item-color-danger-background-hover: rgb(100% 13.725% 13.725% / 0.2);
   --click-genericMenu-item-color-danger-background-active: rgb(100% 13.725% 13.725% / 0.3);
   --click-genericMenu-item-color-danger-background-disabled: #ffffff;
+  --click-genericMenu-item-color-danger-stroke-default: rgba(0, 0, 0, 0);
+  --click-genericMenu-item-color-danger-stroke-focus: #437eef;
   --click-genericMenu-itemCustom-typography-label-sm: 500 0.75rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --click-genericMenu-itemCustom-typography-label-lg: 400 0.875rem/1.5 "Inter", "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
   --click-genericMenu-button-space-gap: 0.25rem;
@@ -1426,6 +1429,7 @@
   --click-global-color-text-link-default: #437eef;
   --click-global-color-text-link-hover: #104ec6;
   --click-global-color-text-danger: #c10000;
+  --click-global-color-text-warning: #a33c00;
   --click-global-color-title-default: lch(11.126 1.374 305.43);
   --click-global-color-title-muted: #696e79;
   --click-global-color-outline-default: #437eef;

package/dist/cjs/theme/tokens/variables.dark.cjs

@@ -1907,7 +1907,8 @@ const theme = {
               disabled: "#414141"
             },
             stroke: {
-              default: "#323232"
+              default: "#323232",
+              focus: "#faff69"
             }
           },
           format: {
@@ -1937,7 +1938,8 @@ const theme = {
               disabled: "#414141"
             },
             stroke: {
-              default: "rgba(0, 0, 0, 0)"
+              default: "rgba(0, 0, 0, 0)",
+              focus: "#faff69"
             }
           }
         }