@clickhouse/click-ui 0.0.152 → 0.0.154

package/dist/click-ui.es.js

@@ -10097,9 +10097,11 @@ const Button = ({
   showLabelWithLoading = false,
   ...delegated
 }) => /* @__PURE__ */ jsxRuntimeExports.jsxs(StyledButton, { $styleType: type, $align: align, $fillWidth: fillWidth, disabled: disabled || loading, role: "button", ...delegated, children: [
-  iconLeft && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconLeft, "aria-hidden": true, size: "sm" }),
-  label ?? children,
-  iconRight && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconRight, "aria-hidden": true, size: "sm" }),
+  !loading && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+    iconLeft && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconLeft, "aria-hidden": true, size: "sm" }),
+    label ?? children,
+    iconRight && /* @__PURE__ */ jsxRuntimeExports.jsx(ButtonIcon, { name: iconRight, "aria-hidden": true, size: "sm" })
+  ] }),
   loading && /* @__PURE__ */ jsxRuntimeExports.jsxs(LoadingIconWrapper, { "data-testid": "click-ui-loading-icon-wrapper", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "loading-animated", "data-testid": "click-ui-loading-icon", "aria-label": "loading" }),
     showLabelWithLoading ? label ?? children : ""
@@ -10107,7 +10109,7 @@ const Button = ({
 ] });
 const LoadingIconWrapper = styled.div.withConfig({
   componentId: "sc-1k4tz4c-0"
-})(["position:absolute;background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;align-items:center;gap:0.5rem;"]);
+})(["background-color:inherit;top:0;left:0;bottom:0;right:0;display:flex;align-content:center;justify-content:center;align-items:center;gap:0.5rem;"]);
 const StyledButton = styled(BaseButton).withConfig({
   componentId: "sc-1k4tz4c-1"
 })(["width:", ";color:", ";background-color:", ";border:", " solid ", ";font:", ";position:relative;display:flex;align-items:center;justify-content:", ";white-space:nowrap;&:hover{background-color:", ";border:", " solid ", ";transition:", ";font:", ";}&:active,&:focus{background-color:", ";border:1px solid ", ";font:", ";}&:disabled,&:disabled:hover,&:disabled:active{background-color:", ";color:", ";border:", " solid ", ";font:", ";}"], ({
@@ -10248,10 +10250,12 @@ const CustomIcon = styled.img.withConfig({
 }) => theme2.click.image.lg.size.width);
 const InfoLink = styled.a.withConfig({
   componentId: "sc-1drx130-4"
-})(["display:flex;align-items:center;color:", ";text-decoration:none;"], ({
+})(["display:flex;align-items:center;color:", ";gap:", ";text-decoration:none;"], ({
+  theme: theme2
+}) => theme2.click.card.secondary.color.link.default, ({
   theme: theme2
-}) => theme2.click.card.secondary.color.link.default);
-const ArrowContainer = styled(SvgImage).withConfig({
+}) => theme2.click.card.secondary.space.link.gap);
+const LinkIconContainer = styled(SvgImage).withConfig({
   componentId: "sc-1drx130-5"
 })(["color:", ";height:", ";width:", ";"], ({
   theme: theme2
@@ -10263,7 +10267,7 @@ const ArrowContainer = styled(SvgImage).withConfig({
 const LinkText = styled(Text).withConfig({
   componentId: "sc-1drx130-6"
 })([""]);
-const LinkArrow = styled(ArrowContainer).withConfig({
+const LinkIcon = styled(LinkIconContainer).withConfig({
   componentId: "sc-1drx130-7"
 })([""]);
 const Wrapper$a = styled.div.withConfig({
@@ -10283,7 +10287,7 @@ const Wrapper$a = styled.div.withConfig({
   theme: theme2
 }) => $hasShadow ? theme2.shadow[1] : "none", ({
   theme: theme2
-}) => theme2.click.card.secondary.color.background.hover, LinkText, LinkArrow, ({
+}) => theme2.click.card.secondary.color.background.hover, LinkText, LinkIcon, ({
   theme: theme2
 }) => theme2.click.card.secondary.color.link.hover, ({
   theme: theme2
@@ -10294,7 +10298,7 @@ const Wrapper$a = styled.div.withConfig({
       cursor: not-allowed;
 
       ${LinkText},
-      ${LinkArrow} {
+      ${LinkIcon} {
         color: ${theme2.click.card.secondary.color.link.disabled};
       }
     `);
@@ -10309,6 +10313,8 @@ const CardSecondary = ({
   description,
   infoUrl,
   infoText,
+  infoIcon = "chevron-right",
+  infoIconSize = "md",
   ...props
 }) => {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$a, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
@@ -10322,7 +10328,7 @@ const CardSecondary = ({
     /* @__PURE__ */ jsxRuntimeExports.jsx(Content$3, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { color: "muted", children: description }) }),
     (infoUrl || infoText) && /* @__PURE__ */ jsxRuntimeExports.jsxs(InfoLink, { href: disabled ? void 0 : infoUrl, as: disabled || !infoUrl || infoUrl.length === 0 ? "div" : "a", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(LinkText, { children: infoText }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(LinkArrow, { name: "chevron-right" })
+      /* @__PURE__ */ jsxRuntimeExports.jsx(LinkIcon, { size: infoIconSize, name: infoIcon })
     ] })
   ] });
 };
@@ -40994,7 +41000,7 @@ const click$3 = {
           background: {
             "default": "#FFC029",
             hover: "lch(89.3 45.8 82.1)",
-            active: "lch(82.6 42.4 82.1)"
+            active: "rgb(93.2% 79.3% 49.6%)"
           },
           text: {
             "default": "#151515"
@@ -41002,7 +41008,7 @@ const click$3 = {
           stroke: {
             "default": "#FFC029",
             hover: "lch(89.3 45.8 82.1)",
-            active: "lch(82.6 42.4 82.1)"
+            active: "rgb(93.2% 79.3% 49.6%)"
           }
         },
         secondary: {
@@ -41014,7 +41020,7 @@ const click$3 = {
           stroke: {
             "default": "#e6e7e9",
             hover: "#e6e7e9",
-            active: "lch(83.8 2.3 258)"
+            active: "rgb(81% 82.1% 83.6%)"
           },
           text: {
             "default": "#161517"
@@ -41088,12 +41094,12 @@ const click$3 = {
           background: {
             "default": "#FFC029",
             hover: "lch(89.3 45.8 82.1)",
-            active: "lch(78.5 40.3 82.1)"
+            active: "lch(79.1 40.8 82.1)"
           },
           stroke: {
             "default": "rgba(0,0,0,0)",
             hover: "lch(89.3 45.8 82.1)",
-            active: "lch(78.5 40.3 82.1)"
+            active: "lch(79.1 40.8 82.1)"
           },
           text: {
             "default": "#151515",
@@ -41168,13 +41174,13 @@ const click$3 = {
           main: {
             "default": "#FFC029",
             hover: "lch(81.7 41.9 82.1)",
-            active: "lch(75.6 38.8 82.1)",
+            active: "lch(76.2 39.3 82.1)",
             disabled: "lch(81.3 0 0)"
           },
           action: {
             "default": "lch(77.8 74.1 79.3)",
             hover: "lch(77.6 39.8 82.1)",
-            active: "lch(69.2 35.5 82.1)",
+            active: "lch(69.7 36 82.1)",
             disabled: "lch(74.4 0 0)"
           }
         },
@@ -41193,7 +41199,7 @@ const click$3 = {
         divide: {
           "default": "lch(68.1 64.8 79.3)",
           hover: "lch(71.5 36.7 82.1)",
-          active: "lch(66.1 33.9 82.1)",
+          active: "lch(66.7 34.4 82.1)",
           disabled: "lch(71.1 0 0)"
         }
       },
@@ -41977,7 +41983,7 @@ const click$2 = {
         success: "#004206",
         neutral: "#414141",
         danger: "#610000",
-        disabled: "lch(26.2 0 0)",
+        disabled: "rgb(24.2% 24.2% 24.2%)",
         info: "#09255B",
         warning: "#4f2b00"
       }
@@ -42009,8 +42015,8 @@ const click$2 = {
         primary: {
           background: {
             "default": "#FAFF69",
-            hover: "lch(98.3 49.3 103)",
-            active: "lch(90.2 65.2 103)",
+            hover: "rgb(98.6% 100% 58.8%)",
+            active: "rgb(90.7% 92.5% 38.1%)",
             disabled: "#414141"
           },
           text: {
@@ -42022,7 +42028,7 @@ const click$2 = {
           stroke: {
             "default": "#FAFF69",
             hover: "#FAFF69",
-            active: "lch(82.5 59.7 103)",
+            active: "lch(83.3 60.6 103)",
             disabled: "#414141"
           }
         },
@@ -42030,13 +42036,13 @@ const click$2 = {
           background: {
             "default": "#1F1F1C",
             hover: "#282828",
-            active: "lch(20.3 0 0)",
+            active: "rgb(19.9% 19.9% 19.9%)",
             disabled: "#414141"
           },
           stroke: {
             "default": "#414141",
             hover: "#53575f",
-            active: "lch(23.3 2.63 306)",
+            active: "rgb(22.9% 22.1% 23.6%)",
             disabled: "#414141"
           },
           text: {
@@ -42110,13 +42116,13 @@ const click$2 = {
         secondary: {
           background: {
             "default": "#FAFF69",
-            hover: "lch(98.3 49.3 103)",
-            active: "lch(85.7 61.9 103)"
+            hover: "rgb(98.6% 100% 58.8%)",
+            active: "lch(86.5 62.9 103)"
           },
           stroke: {
             "default": "rgba(0,0,0,0)",
-            hover: "lch(98.3 49.3 103)",
-            active: "lch(85.7 61.9 103)"
+            hover: "rgb(98.6% 100% 58.8%)",
+            active: "lch(86.5 62.9 103)"
           },
           text: {
             "default": "#1F1F1C",
@@ -42190,14 +42196,14 @@ const click$2 = {
         background: {
           main: {
             "default": "#FAFF69",
-            hover: "lch(89.9 45.1 103)",
-            active: "lch(82.5 59.7 103)",
+            hover: "lch(89.7 46.7 104)",
+            active: "lch(83.3 60.6 103)",
             disabled: "lch(25.2 0 0)"
           },
           action: {
             "default": "lch(87.8 63.4 103)",
-            hover: "lch(82.7 41.5 103)",
-            active: "lch(72.6 52.5 103)",
+            hover: "lch(82.5 43 104)",
+            active: "lch(73.3 53.3 103)",
             disabled: "lch(22.2 0 0)"
           }
         },
@@ -42215,8 +42221,8 @@ const click$2 = {
         },
         divide: {
           "default": "lch(85.4 61.7 103)",
-          hover: "lch(78.7 39.5 103)",
-          active: "lch(72.2 52.2 103)",
+          hover: "lch(78.5 40.9 104)",
+          active: "lch(72.9 53 103)",
           disabled: "lch(23.1 0 0)"
         }
       },
@@ -42224,20 +42230,20 @@ const click$2 = {
         divide: {
           "default": "lch(31.2 0 0)",
           hover: "lch(34.8 0 0)",
-          active: "lch(24.1 2.6 306)",
+          active: "lch(24.8 2.56 307)",
           disabled: "lch(23.4 0 0)"
         },
         background: {
           main: {
             "default": "#1F1F1C",
             hover: "#282828",
-            active: "lch(20.3 0 0)",
+            active: "rgb(19.9% 19.9% 19.9%)",
             disabled: "#414141"
           },
           action: {
             "default": "#282828",
             hover: "lch(18.2 0 0)",
-            active: "lch(21.1 0 0)",
+            active: "lch(21.9 0 0)",
             disabled: "lch(23.9 0 0)"
           }
         },
@@ -42250,7 +42256,7 @@ const click$2 = {
         stroke: {
           "default": "#414141",
           hover: "#414141",
-          active: "lch(24.1 2.6 306)",
+          active: "lch(24.8 2.56 307)",
           disabled: "rgba(0,0,0,0)"
         }
       }
@@ -42298,7 +42304,7 @@ const click$2 = {
         stroke: {
           "default": "#323232",
           hover: "#53575f",
-          active: "lch(23.3 2.63 306)"
+          active: "rgb(22.9% 22.1% 23.6%)"
         },
         text: {
           "default": "#ffffff",
@@ -43484,7 +43490,7 @@ const click$1 = {
           background: {
             "default": "#302e32",
             hover: "lch(29.5 4.18 267)",
-            active: "lch(6.42 1.33 305)",
+            active: "rgb(7.98% 7.62% 8.34%)",
             disabled: "#dfdfdf"
           },
           text: {
@@ -43496,7 +43502,7 @@ const click$1 = {
           stroke: {
             "default": "#302e32",
             hover: "lch(29.5 4.18 267)",
-            active: "lch(6.42 1.33 305)",
+            active: "rgb(7.98% 7.62% 8.34%)",
             disabled: "#dfdfdf"
           }
         },
@@ -43510,7 +43516,7 @@ const click$1 = {
           stroke: {
             "default": "#e6e7e9",
             hover: "#e6e7e9",
-            active: "lch(83.8 2.3 258)",
+            active: "rgb(81% 82.1% 83.6%)",
             disabled: "#dfdfdf"
           },
           text: {
@@ -43585,12 +43591,12 @@ const click$1 = {
           background: {
             "default": "#302e32",
             hover: "lch(29.5 4.18 267)",
-            active: "lch(6.1 1.26 305)"
+            active: "lch(5.9 1.18 305)"
           },
           stroke: {
             "default": "rgba(0,0,0,0)",
             hover: "lch(29.5 4.18 267)",
-            active: "lch(6.1 1.26 305)"
+            active: "lch(5.9 1.18 305)"
           },
           text: {
             "default": "#ffffff",
@@ -43665,7 +43671,7 @@ const click$1 = {
           main: {
             "default": "#302e32",
             hover: "lch(27 3.82 267)",
-            active: "lch(5.87 1.22 305)",
+            active: "lch(5.68 1.13 305)",
             disabled: "lch(81.3 0 0)"
           },
           action: {
@@ -43698,7 +43704,7 @@ const click$1 = {
         divide: {
           "default": "lch(92 1.05 266)",
           hover: "lch(92.4 0.99 266)",
-          active: "lch(83.8 2.3 258)",
+          active: "rgb(81% 82.1% 83.6%)",
           disabled: "lch(75.5 0 0)"
         },
         background: {
@@ -45177,7 +45183,7 @@ const click = {
           background: {
             "default": "#302e32",
             hover: "lch(29.5 4.18 267)",
-            active: "lch(6.42 1.33 305)",
+            active: "rgb(7.98% 7.62% 8.34%)",
             disabled: "#dfdfdf"
           },
           text: {
@@ -45189,7 +45195,7 @@ const click = {
           stroke: {
             "default": "#302e32",
             hover: "lch(29.5 4.18 267)",
-            active: "lch(6.42 1.33 305)",
+            active: "rgb(7.98% 7.62% 8.34%)",
             disabled: "#dfdfdf"
           }
         },
@@ -45203,7 +45209,7 @@ const click = {
           stroke: {
             "default": "#e6e7e9",
             hover: "#e6e7e9",
-            active: "lch(83.8 2.3 258)",
+            active: "rgb(81% 82.1% 83.6%)",
             disabled: "#dfdfdf"
           },
           text: {
@@ -45304,12 +45310,12 @@ const click = {
           background: {
             "default": "#302e32",
             hover: "lch(29.5 4.18 267)",
-            active: "lch(6.1 1.26 305)"
+            active: "lch(5.9 1.18 305)"
           },
           stroke: {
             "default": "rgba(0,0,0,0)",
             hover: "lch(29.5 4.18 267)",
-            active: "lch(6.1 1.26 305)"
+            active: "lch(5.9 1.18 305)"
           },
           text: {
             "default": "#ffffff",
@@ -45411,7 +45417,7 @@ const click = {
           main: {
             "default": "#302e32",
             hover: "lch(27 3.82 267)",
-            active: "lch(5.87 1.22 305)",
+            active: "lch(5.68 1.13 305)",
             disabled: "lch(81.3 0 0)"
           },
           action: {
@@ -45444,7 +45450,7 @@ const click = {
         divide: {
           "default": "lch(92 1.05 266)",
           hover: "lch(92.4 0.99 266)",
-          active: "lch(83.8 2.3 258)",
+          active: "rgb(81% 82.1% 83.6%)",
           disabled: "lch(75.5 0 0)"
         },
         background: {
@@ -45600,7 +45606,10 @@ const click = {
     secondary: {
       space: {
         all: "1rem",
-        gap: "1rem"
+        gap: "1rem",
+        link: {
+          gap: "0.5rem"
+        }
       },
       radii: {
         all: "0.25rem"