@clickhouse/click-ui 0.6.0 → 0.6.1-rc2

package/dist/esm/components/Text/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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,yBAEC,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,MAAAA,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,WAAW9B,KAAK;;;;"}
+{"version":3,"file":"index.js","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/esm/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/esm/components/Title/Title.module.css.js

@@ -0,0 +1,27 @@
+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
+};
+
+export { styles as default, title, title_align_center, title_align_left, title_align_right, title_color_default, title_color_muted };
+//# sourceMappingURL=Title.module.css.js.map

package/dist/esm/components/Title/Title.module.css.js.map

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

package/dist/esm/components/Title/index.js

@@ -1,7 +1,81 @@
+import "./Title.css";
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './Title.module.css.js';
+import { cva } from 'class-variance-authority';
 
+const titleVariants = cva(styles.title, {
+  variants: {
+    color: {
+      default: styles["title_color_default"],
+      muted: styles["title_color_muted"]
+    },
+    align: {
+      left: styles["title_align_left"],
+      center: styles["title_align_center"],
+      right: styles["title_align_right"]
+    },
+    family: {
+      product: "",
+      brand: ""
+    },
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: ""
+    }
+  },
+  compoundVariants: [{
+    family: "product",
+    size: "xs",
+    class: styles["title_font_product-xs"]
+  }, {
+    family: "product",
+    size: "sm",
+    class: styles["title_font_product-sm"]
+  }, {
+    family: "product",
+    size: "md",
+    class: styles["title_font_product-md"]
+  }, {
+    family: "product",
+    size: "lg",
+    class: styles["title_font_product-lg"]
+  }, {
+    family: "product",
+    size: "xl",
+    class: styles["title_font_product-xl"]
+  }, {
+    family: "brand",
+    size: "xs",
+    class: styles["title_font_brand-xs"]
+  }, {
+    family: "brand",
+    size: "sm",
+    class: styles["title_font_brand-sm"]
+  }, {
+    family: "brand",
+    size: "md",
+    class: styles["title_font_brand-md"]
+  }, {
+    family: "brand",
+    size: "lg",
+    class: styles["title_font_brand-lg"]
+  }, {
+    family: "brand",
+    size: "xl",
+    class: styles["title_font_brand-xl"]
+  }],
+  defaultVariants: {
+    color: "default",
+    align: "left",
+    family: "product",
+    size: "md"
+  }
+});
 const Title = forwardRef(({
   align,
   size,
@@ -9,25 +83,17 @@ const Title = forwardRef(({
   type,
   color,
   children,
+  className,
   ...props
-}, ref) => /* @__PURE__ */ jsx(CuiTitle, { ref, $align: align, $color: color, $size: size, $family: family, as: type, ...props, children }));
-const CuiTitle = 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__ */ jsx(Component, { ref, ...props, className: cn(titleVariants({
+    color,
+    align,
+    family,
+    size
+  }), className), children });
+});
 
 export { Title };
 //# sourceMappingURL=index.js.map

package/dist/esm/components/Title/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","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","CuiTitle","styled","div","withConfig","componentId","$size","$family","theme","typography","styles","titles","$color","click","global","title","$align","muted"],"mappings":";;;;AAuBO,MAAMA,KAAAA,GAAQC,WACnB,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,wBACzD,GAAA,CAAC,QAAA,EAAA,EACC,GAAA,EACA,MAAA,EAAQP,OACR,MAAA,EAAQI,KAAAA,EACR,KAAA,EAAOH,IAAAA,EACP,SAASC,MAAAA,EACT,EAAA,EAAIC,MACJ,GAAIG,KAAAA,EAEHD,UACH,CAEJ;AAEA,MAAMG,QAAAA,GAAWC,MAAAA,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,CAAOjB,MAAMkB,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,CAAOjB,MAAMkB,KAAAA,CAAMH,MAAM,GAKxE,CAAC;AAAA,EAAEJ;AAAM,CAAA,KAAMA,KAAAA,CAAMK,KAAAA,CAAMC,MAAAA,CAAOjB,KAAAA,CAAMkB,MAAME,KAAK,CAAA;;;;"}
+{"version":3,"file":"index.js","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/esm/index.js

@@ -14,7 +14,7 @@ export { Tooltip } from './components/Tooltip/index.js';
 export { THEMES, themes } from './theme/theme.core.js';
 export { getAvailableThemeNames, getDefaultThemeName, getFallbackThemeName, isValidThemeName } from './theme/theme.utils.js';
 export { InitCUIThemeScript } from './theme/InitCUIThemeScript/index.js';
-export { linkStyles } from './components/Link/common.js';
+export { linkStyles } from './styles/linkStyles.js';
 export { Accordion } from './components/Accordion/index.js';
 export { Alert, DangerAlert, InfoAlert, SuccessAlert, WarningAlert } from './components/Alert/index.js';
 export { AutoComplete } from './components/AutoComplete/index.js';

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

@@ -21,4 +21,4 @@ const linkStyles = css(["font:", ";color:", ";margin:0;text-decoration:none;disp
 }) => theme.click.global.color.text.link.default);
 
 export { linkStyles };
-//# sourceMappingURL=common.js.map
+//# sourceMappingURL=linkStyles.js.map

package/dist/esm/styles/linkStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"linkStyles.js","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,GAAAA,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/esm/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/esm/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/esm/theme/tokens/variables.dark.js

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