@clickhouse/click-ui 0.0.178 → 0.0.179

package/dist/click-ui.es.js

@@ -1722,6 +1722,13 @@ const DeepNote = (props) => /* @__PURE__ */ jsxs("svg", { width: "64", height: "
   /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_472_6299", children: /* @__PURE__ */ jsx("rect", { width: "64", height: "62", fill: "white", transform: "translate(0 1)" }) }) })
 ] });
 const DeltaLake = (props) => /* @__PURE__ */ jsx("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M63.3797 52.0798L33.9975 1.84243C33.3404 0.719191 31.717 0.719191 31.0599 1.84243L6.08989 44.5351C5.6511 45.2861 6.44314 46.1531 7.23033 45.784C7.55358 45.6318 7.92667 45.4788 8.33636 45.3262L8.32798 45.343C8.32798 45.343 9.01022 45.0784 10.163 44.7132C11.4335 44.3229 12.8258 43.9534 14.0862 43.6412C17.6129 42.8271 22.2341 42.1642 26.4012 42.8562C30.2361 43.4925 32.9069 44.5205 34.8521 45.5309C35.7438 45.9948 36.5862 44.8305 35.8651 44.1298C33.0762 41.4194 28.7848 38.1476 22.2575 36.7765C21.9717 36.7165 21.8284 36.3941 21.9762 36.1419L31.8066 19.3339C32.1298 18.7818 32.9276 18.7818 33.2508 19.3339L52.0252 51.4341C52.4208 52.1102 52.0892 52.9737 51.3465 53.2224C49.8753 53.7141 48.1179 54.0819 46.1506 54.0819C44.8991 54.0819 43.64 53.9342 42.3778 53.6409C42.3778 53.6409 38.7396 53.0667 33.8766 50.1654C29.0137 47.2644 19.6375 43.5635 9.1165 49.555C4.6337 52.4356 1.64679 56.3756 0.0728454 58.8492C-0.173675 59.2364 0.251893 59.6981 0.656734 59.482C4.27164 57.5508 14.0182 52.99 22.8008 54.6296C28.021 55.6038 33.9864 59.5446 40.1878 61.8043C50.4464 65.6058 60.504 59.2368 60.5256 59.2231C61.5888 58.5206 62.2133 57.9865 62.3196 57.8939L62.4479 57.7819C64.0871 56.3513 64.4783 53.9575 63.3797 52.0798Z", fill: "#00ADD4" }) });
+const DigitalOcean = (props) => /* @__PURE__ */ jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_10220_29310)", children: [
+    /* @__PURE__ */ jsx("path", { d: "M32.0036 61V49.7625C43.9081 49.7625 53.1483 37.9813 48.5771 25.4424C47.7373 23.1414 46.4046 21.0518 44.6722 19.3201C42.9399 17.5884 40.8499 16.2564 38.5486 15.4174C26.0206 10.8826 14.2158 20.0846 14.2158 31.9837H3C3 13.0195 21.3498 -1.76868 41.2438 4.44276C49.9438 7.17057 56.8639 14.0726 59.5591 22.749C65.7759 42.6684 51.0095 61.0054 32.0036 61.0054V61Z", fill: "#0080FF" }),
+    /* @__PURE__ */ jsx("path", { d: "M20.853 49.7937V38.6196H32.0325V49.7937H20.853ZM12.2382 58.4031V49.7937H20.853V58.4031H12.2382ZM12.2382 49.7937H5.03711V42.5981H12.2382V49.7937Z", fill: "#0080FF" })
+  ] }),
+  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_10220_29310", children: /* @__PURE__ */ jsx("rect", { width: "58", height: "58", fill: "white", transform: "translate(3 3)" }) }) })
+] });
 const FeatureDatabaseLight = (props) => /* @__PURE__ */ jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M57.9071 49.179C57.6808 49.3474 57.4413 49.5105 57.1913 49.6737C52.4676 52.708 42.9622 54.858 32.0012 54.858C21.0401 54.858 11.535 52.7106 6.81102 49.6737C6.55838 49.5132 6.32154 49.3474 6.09521 49.179V56.3814C6.09521 57.0236 6.46891 57.613 7.04789 58.192C7.8479 58.9946 9.02687 59.7236 10.4953 60.392C15.348 62.5973 23.177 64 32.001 64C40.8251 64 48.6541 62.5974 53.5041 60.392C54.9725 59.7236 56.1515 58.9946 56.9515 58.192C57.5305 57.613 57.9042 57.0235 57.9042 56.3814L57.9071 49.179Z", fill: "url(#paint0_linear_17_266)" }),
   /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M57.9072 36.9887C57.6809 37.1571 57.4414 37.3203 57.1914 37.4834C52.4676 40.5177 42.9623 42.6651 32.0012 42.6651C21.0402 42.6651 11.535 40.5177 6.81108 37.4808C6.55845 37.3203 6.3216 37.1545 6.09528 36.9861V44.1885C6.09528 44.8307 6.46898 45.4201 7.04796 45.9991C7.84797 46.8017 9.02694 47.5307 10.4954 48.1991C15.3481 50.4044 23.177 51.8097 32.0011 51.8097C40.8252 51.8097 48.6542 50.4071 53.5041 48.2018C54.9726 47.5333 56.1516 46.8044 56.9516 46.0017C57.5305 45.4228 57.9042 44.8333 57.9042 44.1912L57.9072 36.9887Z", fill: "url(#paint1_linear_17_266)" }),
@@ -2138,6 +2145,7 @@ const LogosLight = {
   decodeable: Decodeable,
   deepnote: DeepNote,
   deltalake: DeltaLake,
+  digital_ocean: DigitalOcean,
   feature_database: FeatureDatabaseLight,
   feature_hexagon: FeatureHexagonLight,
   fivetran: Fivetran,
@@ -2341,6 +2349,7 @@ const LogosDark = {
   decodeable: Decodeable,
   deepnote: DeepNote,
   deltalake: DeltaLake,
+  digital_ocean: DigitalOcean,
   feature_database: FeatureDatabaseDark,
   feature_hexagon: FeatureHexagonDark,
   fivetran: Fivetran,
@@ -42648,6 +42657,18 @@ const click$3 = {
         slate: "#9a9ea7"
       }
     }
+  },
+  serviceCard: {
+    color: {
+      background: {
+        "default": "#FBFCFF",
+        hover: "lch(99 1.55 272)"
+      },
+      stroke: {
+        "default": "#e6e7e9",
+        hover: "rgb(81% 82.1% 83.6%)"
+      }
+    }
   }
 };
 const name$3 = "classic";
@@ -44371,6 +44392,18 @@ const click$2 = {
         slate: "#9a9ea7"
       }
     }
+  },
+  serviceCard: {
+    color: {
+      background: {
+        "default": "rgb(17.8% 17.8% 17.8%)",
+        hover: "lch(19.1 0 0)"
+      },
+      stroke: {
+        "default": "rgb(23.6% 23.6% 23.6%)",
+        hover: "rgb(27.4% 27.4% 27.4%)"
+      }
+    }
   }
 };
 const name$2 = "dark";
@@ -46084,6 +46117,18 @@ const click$1 = {
         slate: "#9a9ea7"
       }
     }
+  },
+  serviceCard: {
+    color: {
+      background: {
+        "default": "#FBFCFF",
+        hover: "lch(99 1.55 272)"
+      },
+      stroke: {
+        "default": "#e6e7e9",
+        hover: "rgb(81% 82.1% 83.6%)"
+      }
+    }
   }
 };
 const name$1 = "light";
@@ -49208,12 +49253,25 @@ const click = {
         slate: "#9a9ea7"
       }
     }
+  },
+  serviceCard: {
+    color: {
+      background: {
+        "default": "#FBFCFF",
+        hover: "lch(99 1.55 272)"
+      },
+      stroke: {
+        "default": "#e6e7e9",
+        hover: "rgb(81% 82.1% 83.6%)"
+      }
+    }
   }
 };
 const transition = {
   "default": "all 100ms ease-in 0ms",
   duration: {
     slow: "300ms",
+    smooth: "150ms",
     medium: "100ms",
     fast: "50ms"
   },
@@ -49664,7 +49722,8 @@ const shadow = {
   "1": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)",
   "2": "0 4px 4px 0 rgba(88, 92, 98, 0.06), inset 5px 0 10px 0 rgba(104, 105, 111, 0.1)",
   "3": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
-  "4": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+  "4": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+  "5": "0 2px 2px 0 rgba(0, 0, 0, 0.03)"
 };
 const breakpoint = {
   sizes: {

package/dist/click-ui.umd.js

@@ -1738,6 +1738,13 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_472_6299", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "64", height: "62", fill: "white", transform: "translate(0 1)" }) }) })
   ] });
   const DeltaLake = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M63.3797 52.0798L33.9975 1.84243C33.3404 0.719191 31.717 0.719191 31.0599 1.84243L6.08989 44.5351C5.6511 45.2861 6.44314 46.1531 7.23033 45.784C7.55358 45.6318 7.92667 45.4788 8.33636 45.3262L8.32798 45.343C8.32798 45.343 9.01022 45.0784 10.163 44.7132C11.4335 44.3229 12.8258 43.9534 14.0862 43.6412C17.6129 42.8271 22.2341 42.1642 26.4012 42.8562C30.2361 43.4925 32.9069 44.5205 34.8521 45.5309C35.7438 45.9948 36.5862 44.8305 35.8651 44.1298C33.0762 41.4194 28.7848 38.1476 22.2575 36.7765C21.9717 36.7165 21.8284 36.3941 21.9762 36.1419L31.8066 19.3339C32.1298 18.7818 32.9276 18.7818 33.2508 19.3339L52.0252 51.4341C52.4208 52.1102 52.0892 52.9737 51.3465 53.2224C49.8753 53.7141 48.1179 54.0819 46.1506 54.0819C44.8991 54.0819 43.64 53.9342 42.3778 53.6409C42.3778 53.6409 38.7396 53.0667 33.8766 50.1654C29.0137 47.2644 19.6375 43.5635 9.1165 49.555C4.6337 52.4356 1.64679 56.3756 0.0728454 58.8492C-0.173675 59.2364 0.251893 59.6981 0.656734 59.482C4.27164 57.5508 14.0182 52.99 22.8008 54.6296C28.021 55.6038 33.9864 59.5446 40.1878 61.8043C50.4464 65.6058 60.504 59.2368 60.5256 59.2231C61.5888 58.5206 62.2133 57.9865 62.3196 57.8939L62.4479 57.7819C64.0871 56.3513 64.4783 53.9575 63.3797 52.0798Z", fill: "#00ADD4" }) });
+  const DigitalOcean = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_10220_29310)", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M32.0036 61V49.7625C43.9081 49.7625 53.1483 37.9813 48.5771 25.4424C47.7373 23.1414 46.4046 21.0518 44.6722 19.3201C42.9399 17.5884 40.8499 16.2564 38.5486 15.4174C26.0206 10.8826 14.2158 20.0846 14.2158 31.9837H3C3 13.0195 21.3498 -1.76868 41.2438 4.44276C49.9438 7.17057 56.8639 14.0726 59.5591 22.749C65.7759 42.6684 51.0095 61.0054 32.0036 61.0054V61Z", fill: "#0080FF" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.853 49.7937V38.6196H32.0325V49.7937H20.853ZM12.2382 58.4031V49.7937H20.853V58.4031H12.2382ZM12.2382 49.7937H5.03711V42.5981H12.2382V49.7937Z", fill: "#0080FF" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_10220_29310", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "58", height: "58", fill: "white", transform: "translate(3 3)" }) }) })
+  ] });
   const FeatureDatabaseLight = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "64", height: "64", viewBox: "0 0 64 64", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M57.9071 49.179C57.6808 49.3474 57.4413 49.5105 57.1913 49.6737C52.4676 52.708 42.9622 54.858 32.0012 54.858C21.0401 54.858 11.535 52.7106 6.81102 49.6737C6.55838 49.5132 6.32154 49.3474 6.09521 49.179V56.3814C6.09521 57.0236 6.46891 57.613 7.04789 58.192C7.8479 58.9946 9.02687 59.7236 10.4953 60.392C15.348 62.5973 23.177 64 32.001 64C40.8251 64 48.6541 62.5974 53.5041 60.392C54.9725 59.7236 56.1515 58.9946 56.9515 58.192C57.5305 57.613 57.9042 57.0235 57.9042 56.3814L57.9071 49.179Z", fill: "url(#paint0_linear_17_266)" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M57.9072 36.9887C57.6809 37.1571 57.4414 37.3203 57.1914 37.4834C52.4676 40.5177 42.9623 42.6651 32.0012 42.6651C21.0402 42.6651 11.535 40.5177 6.81108 37.4808C6.55845 37.3203 6.3216 37.1545 6.09528 36.9861V44.1885C6.09528 44.8307 6.46898 45.4201 7.04796 45.9991C7.84797 46.8017 9.02694 47.5307 10.4954 48.1991C15.3481 50.4044 23.177 51.8097 32.0011 51.8097C40.8252 51.8097 48.6542 50.4071 53.5041 48.2018C54.9726 47.5333 56.1516 46.8044 56.9516 46.0017C57.5305 45.4228 57.9042 44.8333 57.9042 44.1912L57.9072 36.9887Z", fill: "url(#paint1_linear_17_266)" }),
@@ -2154,6 +2161,7 @@ var __publicField = (obj, key, value) => {
     decodeable: Decodeable,
     deepnote: DeepNote,
     deltalake: DeltaLake,
+    digital_ocean: DigitalOcean,
     feature_database: FeatureDatabaseLight,
     feature_hexagon: FeatureHexagonLight,
     fivetran: Fivetran,
@@ -2357,6 +2365,7 @@ var __publicField = (obj, key, value) => {
     decodeable: Decodeable,
     deepnote: DeepNote,
     deltalake: DeltaLake,
+    digital_ocean: DigitalOcean,
     feature_database: FeatureDatabaseDark,
     feature_hexagon: FeatureHexagonDark,
     fivetran: Fivetran,
@@ -42664,6 +42673,18 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           slate: "#9a9ea7"
         }
       }
+    },
+    serviceCard: {
+      color: {
+        background: {
+          "default": "#FBFCFF",
+          hover: "lch(99 1.55 272)"
+        },
+        stroke: {
+          "default": "#e6e7e9",
+          hover: "rgb(81% 82.1% 83.6%)"
+        }
+      }
     }
   };
   const name$3 = "classic";
@@ -44387,6 +44408,18 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           slate: "#9a9ea7"
         }
       }
+    },
+    serviceCard: {
+      color: {
+        background: {
+          "default": "rgb(17.8% 17.8% 17.8%)",
+          hover: "lch(19.1 0 0)"
+        },
+        stroke: {
+          "default": "rgb(23.6% 23.6% 23.6%)",
+          hover: "rgb(27.4% 27.4% 27.4%)"
+        }
+      }
     }
   };
   const name$2 = "dark";
@@ -46100,6 +46133,18 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           slate: "#9a9ea7"
         }
       }
+    },
+    serviceCard: {
+      color: {
+        background: {
+          "default": "#FBFCFF",
+          hover: "lch(99 1.55 272)"
+        },
+        stroke: {
+          "default": "#e6e7e9",
+          hover: "rgb(81% 82.1% 83.6%)"
+        }
+      }
     }
   };
   const name$1 = "light";
@@ -49224,12 +49269,25 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
           slate: "#9a9ea7"
         }
       }
+    },
+    serviceCard: {
+      color: {
+        background: {
+          "default": "#FBFCFF",
+          hover: "lch(99 1.55 272)"
+        },
+        stroke: {
+          "default": "#e6e7e9",
+          hover: "rgb(81% 82.1% 83.6%)"
+        }
+      }
     }
   };
   const transition = {
     "default": "all 100ms ease-in 0ms",
     duration: {
       slow: "300ms",
+      smooth: "150ms",
       medium: "100ms",
       fast: "50ms"
     },
@@ -49680,7 +49738,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     "1": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)",
     "2": "0 4px 4px 0 rgba(88, 92, 98, 0.06), inset 5px 0 10px 0 rgba(104, 105, 111, 0.1)",
     "3": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
-    "4": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+    "4": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+    "5": "0 2px 2px 0 rgba(0, 0, 0, 0.03)"
   };
   const breakpoint = {
     sizes: {

package/dist/components/Logos/DigitalOcean.d.ts

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

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

@@ -1 +1 @@
-export type LogoName = "clickhouse" | "airbyte" | "aws-s3" | "aws-athena" | "aws-kinesis" | "aws-redshift" | "aws-msk" | "kafka" | "feature_database" | "feature_hexagon" | "fivetran" | "confluent" | "hex" | "tableau" | "grafana" | "superset" | "metabase" | "microsoft" | "aws" | "gcp" | "gcs" | "azure" | "azure-event-hub" | "dbeaver" | "dbt" | "jdbc" | "mysql" | "postgres" | "postgres_cdc" | "google" | "github" | "decodeable" | "golang" | "prequel" | "python" | "deepnote" | "nodejs" | "datagrip" | "vector" | "kubenetes" | "c#" | "redpanda" | "rust" | "hudi" | "deltalake" | "snowflake" | "mongodb" | "bigquery" | "iceberg" | "upstash" | "warpstream";
+export type LogoName = "clickhouse" | "airbyte" | "aws-s3" | "aws-athena" | "aws-kinesis" | "aws-redshift" | "aws-msk" | "kafka" | "digital_ocean" | "feature_database" | "feature_hexagon" | "fivetran" | "confluent" | "hex" | "tableau" | "grafana" | "superset" | "metabase" | "microsoft" | "aws" | "gcp" | "gcs" | "azure" | "azure-event-hub" | "dbeaver" | "dbt" | "jdbc" | "mysql" | "postgres" | "postgres_cdc" | "google" | "github" | "decodeable" | "golang" | "prequel" | "python" | "deepnote" | "nodejs" | "datagrip" | "vector" | "kubenetes" | "c#" | "redpanda" | "rust" | "hudi" | "deltalake" | "snowflake" | "mongodb" | "bigquery" | "iceberg" | "upstash" | "warpstream";

package/dist/styles/types.d.ts

@@ -3015,11 +3015,24 @@ export interface Theme {
                 };
             };
         };
+        "serviceCard": {
+            "color": {
+                "background": {
+                    "default": string;
+                    "hover": string;
+                };
+                "stroke": {
+                    "default": string;
+                    "hover": string;
+                };
+            };
+        };
     };
     "transition": {
         "default": string;
         "duration": {
             "slow": string;
+            "smooth": string;
             "medium": string;
             "fast": string;
         };
@@ -3471,6 +3484,7 @@ export interface Theme {
         "2": string;
         "3": string;
         "4": string;
+        "5": string;
     };
     "breakpoint": {
         "sizes": {

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

@@ -860,6 +860,18 @@ declare const _default: {
           "slate": "#9a9ea7"
         }
       }
+    },
+    "serviceCard": {
+      "color": {
+        "background": {
+          "default": "#FBFCFF",
+          "hover": "lch(99 1.55 272)"
+        },
+        "stroke": {
+          "default": "#e6e7e9",
+          "hover": "rgb(81% 82.1% 83.6%)"
+        }
+      }
     }
   },
   "name": "classic",

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

@@ -1617,6 +1617,18 @@ declare const _default: {
           "slate": "#9a9ea7"
         }
       }
+    },
+    "serviceCard": {
+      "color": {
+        "background": {
+          "default": "rgb(17.8% 17.8% 17.8%)",
+          "hover": "lch(19.1 0 0)"
+        },
+        "stroke": {
+          "default": "rgb(23.6% 23.6% 23.6%)",
+          "hover": "rgb(27.4% 27.4% 27.4%)"
+        }
+      }
     }
   },
   "name": "dark",

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

@@ -3014,12 +3014,25 @@ declare const _default: {
           "slate": "#9a9ea7"
         }
       }
+    },
+    "serviceCard": {
+      "color": {
+        "background": {
+          "default": "#FBFCFF",
+          "hover": "lch(99 1.55 272)"
+        },
+        "stroke": {
+          "default": "#e6e7e9",
+          "hover": "rgb(81% 82.1% 83.6%)"
+        }
+      }
     }
   },
   "transition": {
     "default": "all 100ms ease-in 0ms",
     "duration": {
       "slow": "300ms",
+      "smooth": "150ms",
       "medium": "100ms",
       "fast": "50ms"
     },
@@ -3470,7 +3483,8 @@ declare const _default: {
     "1": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)",
     "2": "0 4px 4px 0 rgba(88, 92, 98, 0.06), inset 5px 0 10px 0 rgba(104, 105, 111, 0.1)",
     "3": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
-    "4": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+    "4": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+    "5": "0 2px 2px 0 rgba(0, 0, 0, 0.03)"
   },
   "breakpoint": {
     "sizes": {

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

@@ -1604,6 +1604,18 @@ declare const _default: {
           "slate": "#9a9ea7"
         }
       }
+    },
+    "serviceCard": {
+      "color": {
+        "background": {
+          "default": "#FBFCFF",
+          "hover": "lch(99 1.55 272)"
+        },
+        "stroke": {
+          "default": "#e6e7e9",
+          "hover": "rgb(81% 82.1% 83.6%)"
+        }
+      }
     }
   },
   "name": "light",

package/package.json

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