@clickhouse/click-ui 0.0.148 → 0.0.149

package/dist/click-ui.es.js

@@ -14844,9 +14844,9 @@ const FlyoutContent = styled($5d3850c4d0b4e6c7$export$b6d9565de1e068cf).withConf
     height: ${$strategy === "relative" ? "100%" : "auto"};
     padding: 0 ${theme2.click.flyout.space[$type].x}
     gap: ${theme2.click.flyout.space[$type].gap};
+    box-shadow: ${$align === "start" ? theme2.click.flyout.shadow.reverse : theme2.click.flyout.shadow.default};
     border-${$align === "start" ? "right" : "left"}: 1px solid ${theme2.click.flyout.color.stroke.default};
     background: ${theme2.click.flyout.color.background.default};
-    box-shadow: ${theme2.click.flyout.shadow.default}};
 
     @media (max-width: 1024px) {
       ${$strategy === "relative" ? `
@@ -47288,7 +47288,8 @@ const click = {
       }
     },
     shadow: {
-      "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+      "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+      reverse: "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
     },
     size: {
       "default": {
@@ -47931,7 +47932,8 @@ const spaces = {
 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)"
+  "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)"
 };
 const breakpoint = {
   sizes: {

package/dist/click-ui.umd.js

@@ -14861,9 +14861,9 @@ var __publicField = (obj, key, value) => {
     height: ${$strategy === "relative" ? "100%" : "auto"};
     padding: 0 ${theme2.click.flyout.space[$type].x}
     gap: ${theme2.click.flyout.space[$type].gap};
+    box-shadow: ${$align === "start" ? theme2.click.flyout.shadow.reverse : theme2.click.flyout.shadow.default};
     border-${$align === "start" ? "right" : "left"}: 1px solid ${theme2.click.flyout.color.stroke.default};
     background: ${theme2.click.flyout.color.background.default};
-    box-shadow: ${theme2.click.flyout.shadow.default}};
 
     @media (max-width: 1024px) {
       ${$strategy === "relative" ? `
@@ -47305,7 +47305,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       },
       shadow: {
-        "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+        "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+        reverse: "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
       },
       size: {
         "default": {
@@ -47948,7 +47949,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   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)"
+    "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)"
   };
   const breakpoint = {
     sizes: {

package/dist/styles/types.d.ts

@@ -2479,6 +2479,7 @@ export interface Theme {
             };
             "shadow": {
                 "default": string;
+                "reverse": string;
             };
             "size": {
                 "default": {
@@ -3122,6 +3123,7 @@ export interface Theme {
         "1": string;
         "2": string;
         "3": string;
+        "4": string;
     };
     "breakpoint": {
         "sizes": {

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

@@ -2478,7 +2478,8 @@ declare const _default: {
         }
       },
       "shadow": {
-        "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+        "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+        "reverse": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
       },
       "size": {
         "default": {
@@ -3121,7 +3122,8 @@ declare const _default: {
   "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)"
+    "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)"
   },
   "breakpoint": {
     "sizes": {

package/package.json

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