@clickhouse/click-ui 0.0.145 → 0.0.147

package/dist/click-ui.es.js

@@ -1494,6 +1494,12 @@ const Bell = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "
   /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M13.833 5.751V4.833C13.833 3.821 13.013 3 12 3V3C10.987 3 10.167 3.821 10.167 4.833V5.751", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
   /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.563 10.1882V10.1882C6.563 7.68523 8.592 5.65723 11.094 5.65723H12.907C15.41 5.65723 17.438 7.68623 17.438 10.1882V10.1882V12.9852C17.438 13.5152 17.649 14.0242 18.024 14.3992L18.665 15.0402C19.04 15.4152 19.251 15.9242 19.251 16.4542V16.4542C19.251 17.4982 18.405 18.3442 17.361 18.3442H6.64C5.596 18.3442 4.75 17.4982 4.75 16.4542V16.4542C4.75 15.9242 4.961 15.4152 5.336 15.0402L5.977 14.3992C6.352 14.0242 6.563 13.5152 6.563 12.9852V10.1882Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
+const DoubleCheckIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 12L13 17", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17 7L12.5 11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 17L3 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21 9L13 17L7 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
 const ICONS_MAP = {
   activity: Activity,
   alarm: Alarm,
@@ -1546,6 +1552,7 @@ const ICONS_MAP = {
   "dots-triangle": DotsTriangle,
   "dots-vertical": DotsVertical,
   "dots-vertical-double": DotsVerticalDouble,
+  "double-check": DoubleCheckIcon,
   download: Download,
   "download-in-circle": DownloadInCircle,
   email: Email,
@@ -10034,7 +10041,7 @@ const Button$1 = styled.button.attrs((props) => ({
   "aria-pressed": props.$active
 })).withConfig({
   componentId: "sc-ukgugp-1"
-})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:", ";color:", ";font:", ";padding:", " ", ";gap:", ";", " cursor:pointer;&:hover{background:", ";font:", ";}&:disabled{cursor:not-allowed;font:", ";background:", ";}&:active,&:focus{background:", ";font:", ";&:disabled{background:", ";}}border-radius:", ";"], ({
+})(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:", ";color:", ";font:", ";padding:", " ", ";gap:", ";", ";cursor:pointer;&:hover{background:", ";font:", ";color:", ";}&:disabled{cursor:not-allowed;font:", ";color:", ";background:", ';&:active,&:focus,&[aria-pressed="true"]{color:', ';}}&:active,&:focus,&[aria-pressed="true"]{background:', ";font:", ";color:", ";&:disabled{background:", ";}}border-radius:", ";"], ({
   $active,
   theme: theme2
 }) => $active ? theme2.click.button.group.color.background.active : theme2.click.button.group.color.background.default, ({
@@ -10055,15 +10062,23 @@ const Button$1 = styled.button.attrs((props) => ({
   theme: theme2
 }) => theme2.click.button.group.typography.label.hover, ({
   theme: theme2
+}) => theme2.click.button.group.color.text.hover, ({
+  theme: theme2
 }) => theme2.click.button.group.typography.label.disabled, ({
+  theme: theme2
+}) => theme2.click.button.group.color.text.disabled, ({
   theme: theme2,
   $active
 }) => theme2.click.button.group.color.background[$active ? "disabled-active" : "disabled"], ({
   theme: theme2
+}) => theme2.click.button.group.color.text.disabled, ({
+  theme: theme2
 }) => theme2.click.button.group.color.background.active, ({
   theme: theme2
 }) => theme2.click.button.group.typography.label.active, ({
   theme: theme2
+}) => theme2.click.button.group.color.text.active, ({
+  theme: theme2
 }) => theme2.click.button.group.color.background["disabled-active"], ({
   theme: theme2,
   $type,
@@ -10220,13 +10235,20 @@ const HeaderLeft = styled.div.withConfig({
 const Content$3 = styled.div.withConfig({
   componentId: "sc-1drx130-2"
 })(["display:flex;flex-direction:column;flex:1;"]);
-const InfoLink = styled.a.withConfig({
+const CustomIcon = styled.img.withConfig({
   componentId: "sc-1drx130-3"
+})(["height:", ";width:", ";"], ({
+  theme: theme2
+}) => theme2.click.image.lg.size.height, ({
+  theme: theme2
+}) => theme2.click.image.lg.size.width);
+const InfoLink = styled.a.withConfig({
+  componentId: "sc-1drx130-4"
 })(["display:flex;align-items:center;color:", ";text-decoration:none;"], ({
   theme: theme2
 }) => theme2.click.card.secondary.color.link.default);
 const ArrowContainer = styled(SvgImage).withConfig({
-  componentId: "sc-1drx130-4"
+  componentId: "sc-1drx130-5"
 })(["color:", ";height:", ";width:", ";"], ({
   theme: theme2
 }) => theme2.click.card.secondary.color.link.default, ({
@@ -10235,13 +10257,13 @@ const ArrowContainer = styled(SvgImage).withConfig({
   theme: theme2
 }) => theme2.click.image.md.size.width);
 const LinkText = styled(Text).withConfig({
-  componentId: "sc-1drx130-5"
+  componentId: "sc-1drx130-6"
 })([""]);
 const LinkArrow = styled(ArrowContainer).withConfig({
-  componentId: "sc-1drx130-6"
+  componentId: "sc-1drx130-7"
 })([""]);
 const Wrapper$a = styled.div.withConfig({
-  componentId: "sc-1drx130-7"
+  componentId: "sc-1drx130-8"
 })(["background-color:", ";border-radius:", ";border:", ";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,:focus{background-color:", ";cursor:pointer;", ",", "{color:", ';}}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}"], ({
   theme: theme2
 }) => theme2.click.card.secondary.color.background.default, ({
@@ -10275,6 +10297,7 @@ const Wrapper$a = styled.div.withConfig({
 const CardSecondary = ({
   title,
   icon,
+  iconUrl,
   badgeState,
   badgeText = "",
   hasShadow = false,
@@ -10287,7 +10310,7 @@ const CardSecondary = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$a, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$4, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderLeft, { $disabled: disabled, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "lg", "area-hidden": "" }),
+        iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(CustomIcon, { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true, size: "lg" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
       ] }),
       badgeText && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { text: badgeText, state: disabled == true ? "disabled" : badgeState })
@@ -10445,7 +10468,7 @@ const Wrapper$8 = styled.div.withConfig({
 }) => $isSelected ? `border-color: ${theme2.click.button.basic.color.primary.stroke.active};` : "");
 const Header$3 = styled.div.withConfig({
   componentId: "sc-2dguvi-1"
-})(["display:flex;flex-direction:column;align-items:", ";gap:", ";h3{color:", ";}svg{height:", ";width:", ";}"], ({
+})(["display:flex;flex-direction:column;align-items:", ";gap:", ";h3{color:", ";}svg,img{height:", ";width:", ";}"], ({
   $alignContent = "center"
 }) => ["start", "end"].includes($alignContent) ? `flex-${$alignContent}` : $alignContent, ({
   $size = "md",
@@ -10478,6 +10501,7 @@ const Card = ({
   alignContent,
   title,
   icon,
+  iconUrl,
   hasShadow = false,
   description,
   infoUrl,
@@ -10500,7 +10524,7 @@ const Card = ({
   const Component2 = !!infoUrl || typeof onButtonClick === "function" ? Button : "div";
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$8, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size2, "aria-disabled": disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
     (icon || title) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$3, { $size: size2, $disabled: disabled, $alignContent: alignContent, children: [
-      icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true }),
+      iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true }),
       title && /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
     ] }),
     (description || children) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Content$2, { $size: size2, $alignContent: alignContent, children: [
@@ -32473,6 +32497,11 @@ const InputElement = styled.input.withConfig({
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
+
+    &:disabled, &.disabled {
+      &::placeholder {
+      color: ${theme2.click.field.color.placeholder.disabled};
+    }
   `);
 const NumberInputElement = styled(InputElement).withConfig({
   componentId: "sc-1pvd2nj-2"
@@ -38392,7 +38421,7 @@ const Thead = ({
 };
 const TableRow = styled.tr.withConfig({
   componentId: "sc-1q458rb-3"
-})(["overflow:hidden;", " &:last-of-type{border-bottom:none;}@media (max-width:768px){position:relative;display:flex;flex-wrap:wrap;", "}"], ({
+})(["overflow:hidden;", " &:last-of-type,&:last-child{border-bottom:none;}@media (max-width:768px){position:relative;display:flex;flex-wrap:wrap;", "}"], ({
   theme: theme2,
   $isDeleted,
   $isDisabled,
@@ -38438,9 +38467,12 @@ const StyledColGroup = styled.colgroup.withConfig({
 })(["@media (max-width:768px){display:none;}"]);
 const StyledThead = styled.thead.withConfig({
   componentId: "sc-1q458rb-6"
-})(["tr{overflow:hidden;background-color:", ";}@media (max-width:768px){display:none;}"], ({
+})(["tr{overflow:hidden;background-color:", ";", "}@media (max-width:768px){display:none;}"], ({
   theme: theme2
-}) => theme2.click.table.header.color.background.default);
+}) => theme2.click.table.header.color.background.default, ({
+  theme: theme2
+}) => ` border-bottom: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.row.color.stroke.default};
+  `);
 const MobileHeader = styled.div.withConfig({
   componentId: "sc-1q458rb-7"
 })(["display:none;", " @media (max-width:768px){display:block;}"], ({
@@ -38487,7 +38519,12 @@ const ActionsContainer = styled.div.withConfig({
 })(["display:flex;flex-wrap:wrap;gap:0.5rem;overflow:hidden;@media (max-width:768px){flex-direction:column;overflow:auto;flex-wrap:nowrap;}"]);
 const TableWrapper = styled.div.withConfig({
   componentId: "sc-1q458rb-12"
-})(["width:100%;height:100%;overflow:auto;"]);
+})(["width:100%;height:100%;overflow:auto;", ""], ({
+  theme: theme2
+}) => `
+  border: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.global.color.stroke.default};
+  border-radius: ${theme2.click.table.radii.all}
+  `);
 const TableOuterContainer = styled.div.withConfig({
   componentId: "sc-1q458rb-13"
 })(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
@@ -38630,12 +38667,7 @@ const Table = forwardRef(({
 });
 const StyledTable = styled.table.withConfig({
   componentId: "sc-1q458rb-19"
-})(["width:100%;border-spacing:0;overflow:hidden;table-layout:fixed;", " @media (max-width:768px){border:none;table-layout:auto;}"], ({
-  theme: theme2
-}) => `
-    border-radius: ${theme2.click.table.radii.all};
-    border: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.global.color.stroke.default};
-  `);
+})(["width:100%;border-collapse:collapse;overflow:hidden;table-layout:fixed;@media (max-width:768px){border:none;table-layout:auto;}"]);
 const TextAreaField = forwardRef(({
   rows,
   disabled,
@@ -42219,15 +42251,15 @@ const click$2 = {
           "default": "rgba(0,0,0,0)",
           hover: "#282828",
           active: "lch(18.2 0 0)",
-          disabled: "#414141",
-          "disabled-active": "lch(22 0 0)",
+          disabled: "rgba(0,0,0,0)",
+          "disabled-active": "lch(0 0 0 / 0)",
           panel: "rgba(0,0,0,0)"
         },
         text: {
-          "default": "#ffffff",
-          hover: "#ffffff",
+          "default": "#c0c0c0",
+          hover: "#c0c0c0",
           active: "#ffffff",
-          disabled: "#808080",
+          disabled: "#414141",
           "disabled-active": "#808080"
         },
         stroke: {
@@ -42437,7 +42469,7 @@ const click$2 = {
         "default": "#ffffff",
         hover: "#ffffff",
         active: "#ffffff",
-        disabled: "#a0a0a0"
+        disabled: "#606060"
       }
     }
   },
@@ -42539,21 +42571,25 @@ const click$2 = {
         "default": "#b3b6bd",
         hover: "#b3b6bd",
         active: "#ffffff",
-        disabled: "#a0a0a0",
+        disabled: "#606060",
         error: "#ffbaba"
       },
       format: {
-        "default": "lch(72 4.18 268)",
-        hover: "lch(72 4.18 268)",
-        active: "lch(72 4.18 268)",
+        "default": "lch(62.9 0 0)",
+        hover: "lch(62.9 0 0)",
+        active: "lch(62.9 0 0)",
         disabled: "#808080",
-        error: "lch(72 4.18 268)"
+        error: "lch(62.9 0 0)"
       },
       genericLabel: {
         "default": "#ffffff",
         hover: "#ffffff",
         active: "#ffffff",
         disabled: "#a0a0a0"
+      },
+      placeholder: {
+        "default": "#808080",
+        disabled: "#606060"
       }
     }
   },
@@ -42574,11 +42610,11 @@ const click$2 = {
           disabled: "#414141"
         },
         format: {
-          "default": "lch(72 4.18 268)",
-          hover: "lch(72 4.18 268)",
-          active: "lch(72 4.18 268)",
+          "default": "lch(62.9 0 0)",
+          hover: "lch(62.9 0 0)",
+          active: "lch(62.9 0 0)",
           disabled: "#808080",
-          error: "lch(72 4.18 268)"
+          error: "lch(62.9 0 0)"
         },
         stroke: {
           "default": "#323232"
@@ -42617,7 +42653,7 @@ const click$2 = {
     autocomplete: {
       color: {
         placeholder: {
-          "default": "#9a9ea7"
+          "default": "#808080"
         },
         searchTerm: {
           "default": "#ffffff"
@@ -43689,16 +43725,16 @@ const click$1 = {
           "default": "rgba(0,0,0,0)",
           hover: "#f6f7fa",
           active: "lch(97.3 1.53 272)",
-          disabled: "#dfdfdf",
-          "disabled-active": "lch(71.1 0 0)",
+          disabled: "rgba(0,0,0,0)",
+          "disabled-active": "lch(77.8 1.22 272)",
           panel: "rgba(0,0,0,0)"
         },
         text: {
-          "default": "#161517",
-          hover: "#161517",
+          "default": "#505050",
+          hover: "#505050",
           active: "#161517",
           disabled: "#a0a0a0",
-          "disabled-active": "#808080"
+          "disabled-active": "#a0a0a0"
         },
         stroke: {
           "default": "rgba(0,0,0,0)",
@@ -44020,7 +44056,8 @@ const click$1 = {
         disabled: "#a0a0a0"
       },
       placeholder: {
-        "default": "#9a9ea7"
+        "default": "#9a9ea7",
+        disabled: "#b3b6bd"
       }
     }
   },
@@ -45475,16 +45512,16 @@ const click = {
           "default": "rgba(0,0,0,0)",
           hover: "#f6f7fa",
           active: "lch(97.3 1.53 272)",
-          disabled: "#dfdfdf",
-          "disabled-active": "lch(71.1 0 0)",
+          disabled: "rgba(0,0,0,0)",
+          "disabled-active": "lch(77.8 1.22 272)",
           panel: "rgba(0,0,0,0)"
         },
         text: {
-          "default": "#161517",
-          hover: "#161517",
+          "default": "#505050",
+          hover: "#505050",
           active: "#161517",
           disabled: "#a0a0a0",
-          "disabled-active": "#808080"
+          "disabled-active": "#a0a0a0"
         },
         stroke: {
           "default": "rgba(0,0,0,0)",
@@ -46076,7 +46113,8 @@ const click = {
         disabled: "#a0a0a0"
       },
       placeholder: {
-        "default": "#9a9ea7"
+        "default": "#9a9ea7",
+        disabled: "#b3b6bd"
       }
     }
   },
@@ -47624,6 +47662,7 @@ const palette = {
     "400": "#a0a0a0",
     "500": "#808080",
     "600": "#606060",
+    "650": "#505050",
     "700": "#414141",
     "712": "#323232",
     "725": "#282828",
@@ -47936,8 +47975,9 @@ const themes = {
 const useCUITheme = () => {
   const theme2 = useTheme();
   return {
-    name: theme2.name,
+    breakpoint: theme2.breakpoint,
     global: theme2.global,
+    name: theme2.name,
     sizes: theme2.sizes
   };
 };

package/dist/click-ui.umd.js

@@ -1511,6 +1511,12 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M13.833 5.751V4.833C13.833 3.821 13.013 3 12 3V3C10.987 3 10.167 3.821 10.167 4.833V5.751", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.563 10.1882V10.1882C6.563 7.68523 8.592 5.65723 11.094 5.65723H12.907C15.41 5.65723 17.438 7.68623 17.438 10.1882V10.1882V12.9852C17.438 13.5152 17.649 14.0242 18.024 14.3992L18.665 15.0402C19.04 15.4152 19.251 15.9242 19.251 16.4542V16.4542C19.251 17.4982 18.405 18.3442 17.361 18.3442H6.64C5.596 18.3442 4.75 17.4982 4.75 16.4542V16.4542C4.75 15.9242 4.961 15.4152 5.336 15.0402L5.977 14.3992C6.352 14.0242 6.563 13.5152 6.563 12.9852V10.1882Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
+  const DoubleCheckIcon = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 12L13 17", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17 7L12.5 11.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M8 17L3 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21 9L13 17L7 11", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
   const ICONS_MAP = {
     activity: Activity,
     alarm: Alarm,
@@ -1563,6 +1569,7 @@ var __publicField = (obj, key, value) => {
     "dots-triangle": DotsTriangle,
     "dots-vertical": DotsVertical,
     "dots-vertical-double": DotsVerticalDouble,
+    "double-check": DoubleCheckIcon,
     download: Download,
     "download-in-circle": DownloadInCircle,
     email: Email,
@@ -10051,7 +10058,7 @@ var __publicField = (obj, key, value) => {
     "aria-pressed": props.$active
   })).withConfig({
     componentId: "sc-ukgugp-1"
-  })(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:", ";color:", ";font:", ";padding:", " ", ";gap:", ";", " cursor:pointer;&:hover{background:", ";font:", ";}&:disabled{cursor:not-allowed;font:", ";background:", ";}&:active,&:focus{background:", ";font:", ";&:disabled{background:", ";}}border-radius:", ";"], ({
+  })(["box-sizing:border-box;display:flex;flex-direction:row;justify-content:center;align-items:center;border:none;background:", ";color:", ";font:", ";padding:", " ", ";gap:", ";", ";cursor:pointer;&:hover{background:", ";font:", ";color:", ";}&:disabled{cursor:not-allowed;font:", ";color:", ";background:", ';&:active,&:focus,&[aria-pressed="true"]{color:', ';}}&:active,&:focus,&[aria-pressed="true"]{background:', ";font:", ";color:", ";&:disabled{background:", ";}}border-radius:", ";"], ({
     $active,
     theme: theme2
   }) => $active ? theme2.click.button.group.color.background.active : theme2.click.button.group.color.background.default, ({
@@ -10072,15 +10079,23 @@ var __publicField = (obj, key, value) => {
     theme: theme2
   }) => theme2.click.button.group.typography.label.hover, ({
     theme: theme2
+  }) => theme2.click.button.group.color.text.hover, ({
+    theme: theme2
   }) => theme2.click.button.group.typography.label.disabled, ({
+    theme: theme2
+  }) => theme2.click.button.group.color.text.disabled, ({
     theme: theme2,
     $active
   }) => theme2.click.button.group.color.background[$active ? "disabled-active" : "disabled"], ({
     theme: theme2
+  }) => theme2.click.button.group.color.text.disabled, ({
+    theme: theme2
   }) => theme2.click.button.group.color.background.active, ({
     theme: theme2
   }) => theme2.click.button.group.typography.label.active, ({
     theme: theme2
+  }) => theme2.click.button.group.color.text.active, ({
+    theme: theme2
   }) => theme2.click.button.group.color.background["disabled-active"], ({
     theme: theme2,
     $type,
@@ -10237,13 +10252,20 @@ var __publicField = (obj, key, value) => {
   const Content$3 = styled.div.withConfig({
     componentId: "sc-1drx130-2"
   })(["display:flex;flex-direction:column;flex:1;"]);
-  const InfoLink = styled.a.withConfig({
+  const CustomIcon = styled.img.withConfig({
     componentId: "sc-1drx130-3"
+  })(["height:", ";width:", ";"], ({
+    theme: theme2
+  }) => theme2.click.image.lg.size.height, ({
+    theme: theme2
+  }) => theme2.click.image.lg.size.width);
+  const InfoLink = styled.a.withConfig({
+    componentId: "sc-1drx130-4"
   })(["display:flex;align-items:center;color:", ";text-decoration:none;"], ({
     theme: theme2
   }) => theme2.click.card.secondary.color.link.default);
   const ArrowContainer = styled(SvgImage).withConfig({
-    componentId: "sc-1drx130-4"
+    componentId: "sc-1drx130-5"
   })(["color:", ";height:", ";width:", ";"], ({
     theme: theme2
   }) => theme2.click.card.secondary.color.link.default, ({
@@ -10252,13 +10274,13 @@ var __publicField = (obj, key, value) => {
     theme: theme2
   }) => theme2.click.image.md.size.width);
   const LinkText = styled(Text).withConfig({
-    componentId: "sc-1drx130-5"
+    componentId: "sc-1drx130-6"
   })([""]);
   const LinkArrow = styled(ArrowContainer).withConfig({
-    componentId: "sc-1drx130-6"
+    componentId: "sc-1drx130-7"
   })([""]);
   const Wrapper$a = styled.div.withConfig({
-    componentId: "sc-1drx130-7"
+    componentId: "sc-1drx130-8"
   })(["background-color:", ";border-radius:", ";border:", ";max-width:420px;min-width:320px;display:flex;flex-direction:column;padding:", ";gap:", ";box-shadow:", ";&:hover,:focus{background-color:", ";cursor:pointer;", ",", "{color:", ';}}&[aria-disabled="true"],&[aria-disabled="true"]:hover,&[aria-disabled="true"]:focus,&[aria-disabled="true"]:active{', "}"], ({
     theme: theme2
   }) => theme2.click.card.secondary.color.background.default, ({
@@ -10292,6 +10314,7 @@ var __publicField = (obj, key, value) => {
   const CardSecondary = ({
     title,
     icon,
+    iconUrl,
     badgeState,
     badgeText = "",
     hasShadow = false,
@@ -10304,7 +10327,7 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$a, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$4, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderLeft, { $disabled: disabled, children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: "lg", "area-hidden": "" }),
+          iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(CustomIcon, { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true, size: "lg" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
         ] }),
         badgeText && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { text: badgeText, state: disabled == true ? "disabled" : badgeState })
@@ -10462,7 +10485,7 @@ var __publicField = (obj, key, value) => {
   }) => $isSelected ? `border-color: ${theme2.click.button.basic.color.primary.stroke.active};` : "");
   const Header$3 = styled.div.withConfig({
     componentId: "sc-2dguvi-1"
-  })(["display:flex;flex-direction:column;align-items:", ";gap:", ";h3{color:", ";}svg{height:", ";width:", ";}"], ({
+  })(["display:flex;flex-direction:column;align-items:", ";gap:", ";h3{color:", ";}svg,img{height:", ";width:", ";}"], ({
     $alignContent = "center"
   }) => ["start", "end"].includes($alignContent) ? `flex-${$alignContent}` : $alignContent, ({
     $size = "md",
@@ -10495,6 +10518,7 @@ var __publicField = (obj, key, value) => {
     alignContent,
     title,
     icon,
+    iconUrl,
     hasShadow = false,
     description,
     infoUrl,
@@ -10517,7 +10541,7 @@ var __publicField = (obj, key, value) => {
     const Component = !!infoUrl || typeof onButtonClick === "function" ? Button : "div";
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$8, { $alignContent: alignContent, $hasShadow: hasShadow, $size: size2, "aria-disabled": disabled, $isSelected: isSelected, tabIndex: 0, ...props, children: [
       (icon || title) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$3, { $size: size2, $disabled: disabled, $alignContent: alignContent, children: [
-        icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true }),
+        iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx("img", { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true }),
         title && /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
       ] }),
       (description || children) && /* @__PURE__ */ jsxRuntimeExports.jsxs(Content$2, { $size: size2, $alignContent: alignContent, children: [
@@ -32490,6 +32514,11 @@ var __publicField = (obj, key, value) => {
     &::placeholder {
       color: ${theme2.click.field.color.placeholder.default};
     }
+
+    &:disabled, &.disabled {
+      &::placeholder {
+      color: ${theme2.click.field.color.placeholder.disabled};
+    }
   `);
   const NumberInputElement = styled(InputElement).withConfig({
     componentId: "sc-1pvd2nj-2"
@@ -38409,7 +38438,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   };
   const TableRow = styled.tr.withConfig({
     componentId: "sc-1q458rb-3"
-  })(["overflow:hidden;", " &:last-of-type{border-bottom:none;}@media (max-width:768px){position:relative;display:flex;flex-wrap:wrap;", "}"], ({
+  })(["overflow:hidden;", " &:last-of-type,&:last-child{border-bottom:none;}@media (max-width:768px){position:relative;display:flex;flex-wrap:wrap;", "}"], ({
     theme: theme2,
     $isDeleted,
     $isDisabled,
@@ -38455,9 +38484,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   })(["@media (max-width:768px){display:none;}"]);
   const StyledThead = styled.thead.withConfig({
     componentId: "sc-1q458rb-6"
-  })(["tr{overflow:hidden;background-color:", ";}@media (max-width:768px){display:none;}"], ({
+  })(["tr{overflow:hidden;background-color:", ";", "}@media (max-width:768px){display:none;}"], ({
     theme: theme2
-  }) => theme2.click.table.header.color.background.default);
+  }) => theme2.click.table.header.color.background.default, ({
+    theme: theme2
+  }) => ` border-bottom: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.row.color.stroke.default};
+  `);
   const MobileHeader = styled.div.withConfig({
     componentId: "sc-1q458rb-7"
   })(["display:none;", " @media (max-width:768px){display:block;}"], ({
@@ -38504,7 +38536,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   })(["display:flex;flex-wrap:wrap;gap:0.5rem;overflow:hidden;@media (max-width:768px){flex-direction:column;overflow:auto;flex-wrap:nowrap;}"]);
   const TableWrapper = styled.div.withConfig({
     componentId: "sc-1q458rb-12"
-  })(["width:100%;height:100%;overflow:auto;"]);
+  })(["width:100%;height:100%;overflow:auto;", ""], ({
+    theme: theme2
+  }) => `
+  border: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.global.color.stroke.default};
+  border-radius: ${theme2.click.table.radii.all}
+  `);
   const TableOuterContainer = styled.div.withConfig({
     componentId: "sc-1q458rb-13"
   })(["display:flex;flex-direction:column;gap:1rem;width:100%;"]);
@@ -38647,12 +38684,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   });
   const StyledTable = styled.table.withConfig({
     componentId: "sc-1q458rb-19"
-  })(["width:100%;border-spacing:0;overflow:hidden;table-layout:fixed;", " @media (max-width:768px){border:none;table-layout:auto;}"], ({
-    theme: theme2
-  }) => `
-    border-radius: ${theme2.click.table.radii.all};
-    border: ${theme2.click.table.cell.stroke} solid ${theme2.click.table.global.color.stroke.default};
-  `);
+  })(["width:100%;border-collapse:collapse;overflow:hidden;table-layout:fixed;@media (max-width:768px){border:none;table-layout:auto;}"]);
   const TextAreaField = React.forwardRef(({
     rows,
     disabled,
@@ -42236,15 +42268,15 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             "default": "rgba(0,0,0,0)",
             hover: "#282828",
             active: "lch(18.2 0 0)",
-            disabled: "#414141",
-            "disabled-active": "lch(22 0 0)",
+            disabled: "rgba(0,0,0,0)",
+            "disabled-active": "lch(0 0 0 / 0)",
             panel: "rgba(0,0,0,0)"
           },
           text: {
-            "default": "#ffffff",
-            hover: "#ffffff",
+            "default": "#c0c0c0",
+            hover: "#c0c0c0",
             active: "#ffffff",
-            disabled: "#808080",
+            disabled: "#414141",
             "disabled-active": "#808080"
           },
           stroke: {
@@ -42454,7 +42486,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           "default": "#ffffff",
           hover: "#ffffff",
           active: "#ffffff",
-          disabled: "#a0a0a0"
+          disabled: "#606060"
         }
       }
     },
@@ -42556,21 +42588,25 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           "default": "#b3b6bd",
           hover: "#b3b6bd",
           active: "#ffffff",
-          disabled: "#a0a0a0",
+          disabled: "#606060",
           error: "#ffbaba"
         },
         format: {
-          "default": "lch(72 4.18 268)",
-          hover: "lch(72 4.18 268)",
-          active: "lch(72 4.18 268)",
+          "default": "lch(62.9 0 0)",
+          hover: "lch(62.9 0 0)",
+          active: "lch(62.9 0 0)",
           disabled: "#808080",
-          error: "lch(72 4.18 268)"
+          error: "lch(62.9 0 0)"
         },
         genericLabel: {
           "default": "#ffffff",
           hover: "#ffffff",
           active: "#ffffff",
           disabled: "#a0a0a0"
+        },
+        placeholder: {
+          "default": "#808080",
+          disabled: "#606060"
         }
       }
     },
@@ -42591,11 +42627,11 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             disabled: "#414141"
           },
           format: {
-            "default": "lch(72 4.18 268)",
-            hover: "lch(72 4.18 268)",
-            active: "lch(72 4.18 268)",
+            "default": "lch(62.9 0 0)",
+            hover: "lch(62.9 0 0)",
+            active: "lch(62.9 0 0)",
             disabled: "#808080",
-            error: "lch(72 4.18 268)"
+            error: "lch(62.9 0 0)"
           },
           stroke: {
             "default": "#323232"
@@ -42634,7 +42670,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       autocomplete: {
         color: {
           placeholder: {
-            "default": "#9a9ea7"
+            "default": "#808080"
           },
           searchTerm: {
             "default": "#ffffff"
@@ -43706,16 +43742,16 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             "default": "rgba(0,0,0,0)",
             hover: "#f6f7fa",
             active: "lch(97.3 1.53 272)",
-            disabled: "#dfdfdf",
-            "disabled-active": "lch(71.1 0 0)",
+            disabled: "rgba(0,0,0,0)",
+            "disabled-active": "lch(77.8 1.22 272)",
             panel: "rgba(0,0,0,0)"
           },
           text: {
-            "default": "#161517",
-            hover: "#161517",
+            "default": "#505050",
+            hover: "#505050",
             active: "#161517",
             disabled: "#a0a0a0",
-            "disabled-active": "#808080"
+            "disabled-active": "#a0a0a0"
           },
           stroke: {
             "default": "rgba(0,0,0,0)",
@@ -44037,7 +44073,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           disabled: "#a0a0a0"
         },
         placeholder: {
-          "default": "#9a9ea7"
+          "default": "#9a9ea7",
+          disabled: "#b3b6bd"
         }
       }
     },
@@ -45492,16 +45529,16 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
             "default": "rgba(0,0,0,0)",
             hover: "#f6f7fa",
             active: "lch(97.3 1.53 272)",
-            disabled: "#dfdfdf",
-            "disabled-active": "lch(71.1 0 0)",
+            disabled: "rgba(0,0,0,0)",
+            "disabled-active": "lch(77.8 1.22 272)",
             panel: "rgba(0,0,0,0)"
           },
           text: {
-            "default": "#161517",
-            hover: "#161517",
+            "default": "#505050",
+            hover: "#505050",
             active: "#161517",
             disabled: "#a0a0a0",
-            "disabled-active": "#808080"
+            "disabled-active": "#a0a0a0"
           },
           stroke: {
             "default": "rgba(0,0,0,0)",
@@ -46093,7 +46130,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           disabled: "#a0a0a0"
         },
         placeholder: {
-          "default": "#9a9ea7"
+          "default": "#9a9ea7",
+          disabled: "#b3b6bd"
         }
       }
     },
@@ -47641,6 +47679,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       "400": "#a0a0a0",
       "500": "#808080",
       "600": "#606060",
+      "650": "#505050",
       "700": "#414141",
       "712": "#323232",
       "725": "#282828",
@@ -47953,8 +47992,9 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   const useCUITheme = () => {
     const theme2 = styled.useTheme();
     return {
-      name: theme2.name,
+      breakpoint: theme2.breakpoint,
       global: theme2.global,
+      name: theme2.name,
       sizes: theme2.sizes
     };
   };

package/dist/components/CardPrimary/CardPrimary.d.ts

@@ -7,6 +7,7 @@ type ContentAlignment = "start" | "center" | "end";
 export interface CardPrimaryProps extends HTMLAttributes<HTMLDivElement>, WithTopBadgeProps {
     title?: string;
     icon?: IconName;
+    iconUrl?: string;
     hasShadow?: boolean;
     disabled?: boolean;
     description?: ReactNode;

package/dist/components/CardSecondary/CardSecondary.d.ts

@@ -4,7 +4,8 @@ import { HTMLAttributes, ReactNode } from 'react';
 export type BadgeState = "default" | "success" | "neutral" | "danger" | "disabled" | "warning" | "info";
 export interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
     title: string;
-    icon: IconName;
+    icon?: IconName;
+    iconUrl?: string;
     badgeState?: BadgeState;
     hasShadow?: boolean;
     disabled?: boolean;
@@ -13,4 +14,4 @@ export interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
     infoUrl?: string;
     infoText?: string;
 }
-export declare const CardSecondary: ({ title, icon, badgeState, badgeText, hasShadow, disabled, description, infoUrl, infoText, ...props }: CardSecondaryProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CardSecondary: ({ title, icon, iconUrl, badgeState, badgeText, hasShadow, disabled, description, infoUrl, infoText, ...props }: CardSecondaryProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/IconCommon.d.ts

@@ -51,6 +51,7 @@ export declare const ICONS_MAP: {
     "dots-triangle": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     "dots-vertical": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     "dots-vertical-double": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "double-check": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     download: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     "download-in-circle": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     email: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Icon/types.d.ts

@@ -5,7 +5,7 @@ import { LogoName } from '../Logos/types';
 import { PaymentName, PaymentProps } from '../icons/Payments';
 
 export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "no-cloud", "pause", "payment", "pencil", "pie-chart", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "stop", "support", "table", "taxi", "trash", "upload", "url", "user", "users", "warning", "waves"];
+export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "double-check", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "no-cloud", "pause", "payment", "pencil", "pie-chart", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "stop", "support", "table", "taxi", "trash", "upload", "url", "user", "users", "warning", "waves"];
 export type IconName = (typeof ICON_NAMES)[number];
 export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
     name: IconName;

package/dist/components/icons/DoubleCheckIcon.d.ts

@@ -0,0 +1,4 @@
+import { SVGAttributes } from 'react';
+
+declare const DoubleCheckIcon: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default DoubleCheckIcon;

package/dist/styles/types.d.ts

@@ -1309,6 +1309,7 @@ export interface Theme {
                 };
                 "placeholder": {
                     "default": string;
+                    "disabled": string;
                 };
             };
         };
@@ -2856,6 +2857,7 @@ export interface Theme {
             "400": string;
             "500": string;
             "600": string;
+            "650": string;
             "700": string;
             "712": string;
             "725": string;

package/dist/styles/variables.dark.json.d.ts

@@ -387,15 +387,15 @@ declare const _default: {
             "default": "rgba(0,0,0,0)",
             "hover": "#282828",
             "active": "lch(18.2 0 0)",
-            "disabled": "#414141",
-            "disabled-active": "lch(22 0 0)",
+            "disabled": "rgba(0,0,0,0)",
+            "disabled-active": "lch(0 0 0 / 0)",
             "panel": "rgba(0,0,0,0)"
           },
           "text": {
-            "default": "#ffffff",
-            "hover": "#ffffff",
+            "default": "#c0c0c0",
+            "hover": "#c0c0c0",
             "active": "#ffffff",
-            "disabled": "#808080",
+            "disabled": "#414141",
             "disabled-active": "#808080"
           },
           "stroke": {
@@ -605,7 +605,7 @@ declare const _default: {
           "default": "#ffffff",
           "hover": "#ffffff",
           "active": "#ffffff",
-          "disabled": "#a0a0a0"
+          "disabled": "#606060"
         }
       }
     },
@@ -707,21 +707,25 @@ declare const _default: {
           "default": "#b3b6bd",
           "hover": "#b3b6bd",
           "active": "#ffffff",
-          "disabled": "#a0a0a0",
+          "disabled": "#606060",
           "error": "#ffbaba"
         },
         "format": {
-          "default": "lch(72 4.18 268)",
-          "hover": "lch(72 4.18 268)",
-          "active": "lch(72 4.18 268)",
+          "default": "lch(62.9 0 0)",
+          "hover": "lch(62.9 0 0)",
+          "active": "lch(62.9 0 0)",
           "disabled": "#808080",
-          "error": "lch(72 4.18 268)"
+          "error": "lch(62.9 0 0)"
         },
         "genericLabel": {
           "default": "#ffffff",
           "hover": "#ffffff",
           "active": "#ffffff",
           "disabled": "#a0a0a0"
+        },
+        "placeholder": {
+          "default": "#808080",
+          "disabled": "#606060"
         }
       }
     },
@@ -742,11 +746,11 @@ declare const _default: {
             "disabled": "#414141"
           },
           "format": {
-            "default": "lch(72 4.18 268)",
-            "hover": "lch(72 4.18 268)",
-            "active": "lch(72 4.18 268)",
+            "default": "lch(62.9 0 0)",
+            "hover": "lch(62.9 0 0)",
+            "active": "lch(62.9 0 0)",
             "disabled": "#808080",
-            "error": "lch(72 4.18 268)"
+            "error": "lch(62.9 0 0)"
           },
           "stroke": {
             "default": "#323232"
@@ -785,7 +789,7 @@ declare const _default: {
       "autocomplete": {
         "color": {
           "placeholder": {
-            "default": "#9a9ea7"
+            "default": "#808080"
           },
           "searchTerm": {
             "default": "#ffffff"

package/dist/styles/variables.json.d.ts

@@ -707,16 +707,16 @@ declare const _default: {
             "default": "rgba(0,0,0,0)",
             "hover": "#f6f7fa",
             "active": "lch(97.3 1.53 272)",
-            "disabled": "#dfdfdf",
-            "disabled-active": "lch(71.1 0 0)",
+            "disabled": "rgba(0,0,0,0)",
+            "disabled-active": "lch(77.8 1.22 272)",
             "panel": "rgba(0,0,0,0)"
           },
           "text": {
-            "default": "#161517",
-            "hover": "#161517",
+            "default": "#505050",
+            "hover": "#505050",
             "active": "#161517",
             "disabled": "#a0a0a0",
-            "disabled-active": "#808080"
+            "disabled-active": "#a0a0a0"
           },
           "stroke": {
             "default": "rgba(0,0,0,0)",
@@ -1308,7 +1308,8 @@ declare const _default: {
           "disabled": "#a0a0a0"
         },
         "placeholder": {
-          "default": "#9a9ea7"
+          "default": "#9a9ea7",
+          "disabled": "#b3b6bd"
         }
       }
     },
@@ -2856,6 +2857,7 @@ declare const _default: {
       "400": "#a0a0a0",
       "500": "#808080",
       "600": "#606060",
+      "650": "#505050",
       "700": "#414141",
       "712": "#323232",
       "725": "#282828",

package/dist/styles/variables.light.json.d.ts

@@ -387,16 +387,16 @@ declare const _default: {
             "default": "rgba(0,0,0,0)",
             "hover": "#f6f7fa",
             "active": "lch(97.3 1.53 272)",
-            "disabled": "#dfdfdf",
-            "disabled-active": "lch(71.1 0 0)",
+            "disabled": "rgba(0,0,0,0)",
+            "disabled-active": "lch(77.8 1.22 272)",
             "panel": "rgba(0,0,0,0)"
           },
           "text": {
-            "default": "#161517",
-            "hover": "#161517",
+            "default": "#505050",
+            "hover": "#505050",
             "active": "#161517",
             "disabled": "#a0a0a0",
-            "disabled-active": "#808080"
+            "disabled-active": "#a0a0a0"
           },
           "stroke": {
             "default": "rgba(0,0,0,0)",
@@ -718,7 +718,8 @@ declare const _default: {
           "disabled": "#a0a0a0"
         },
         "placeholder": {
-          "default": "#9a9ea7"
+          "default": "#9a9ea7",
+          "disabled": "#b3b6bd"
         }
       }
     },

package/dist/theme/index.d.ts

@@ -6,7 +6,7 @@ declare module "styled-components" {
     interface DefaultTheme extends Theme {
     }
 }
-type CUIThemeType = Pick<Theme, "global" | "sizes" | "name">;
+type CUIThemeType = Pick<Theme, "breakpoint" | "global" | "name" | "sizes">;
 declare const useCUITheme: () => CUIThemeType;
 export type { ThemeName, CUIThemeType };
 export { useCUITheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.145",
+  "version": "0.0.147",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",