@fibery/ui-kit 4.1.0 → 4.2.0

package/src/icons/react/gauge.tsx

@@ -0,0 +1,18 @@
+/**
+ * This file was automatically generated. Do not edit manually.
+ * 
+ * @see import("../svg/gauge.svg")
+ * @see import("../../../scripts/generate-icons.mjs")
+ */
+
+import {forwardRef} from "react";
+import GaugeSvg from "../ast/gauge";
+import {Icon} from "../icon";
+import type {IconBaseProps} from "../types";
+
+const Gauge = forwardRef<SVGSVGElement, IconBaseProps>(function Gauge(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={GaugeSvg} />});
+
+export default Gauge;

package/src/icons/react/index.tsx

@@ -1,6 +1,6 @@
 /**
  * This file was automatically generated. Do not edit manually.
- * 
+ *
  * @see import("../../../scripts/generate-icons.mjs")
  */
 
@@ -121,6 +121,7 @@ export {default as Pin} from "./pin";
 export {default as PinFilled} from "./pin-filled";
 export {default as Photo} from "./photo";
 export {default as People} from "./people";
+export {default as PeopleEdit} from "./people-edit";
 export {default as PeopleCheck} from "./people-check";
 export {default as Pencil} from "./pencil";
 export {default as PanelAdd} from "./panel-add";
@@ -209,6 +210,7 @@ export {default as GlobeSimple} from "./globe-simple";
 export {default as Gitlab} from "./gitlab";
 export {default as Github} from "./github";
 export {default as Gift} from "./gift";
+export {default as Gauge} from "./gauge";
 export {default as FullscreenModeOn} from "./fullscreen-mode-on";
 export {default as FullscreenModeOnIcon} from "./fullscreen-mode-on-icon";
 export {default as FullscreenModeOffIcon} from "./fullscreen-mode-off-icon";

package/src/icons/react/people-edit.tsx

@@ -0,0 +1,18 @@
+/**
+ * This file was automatically generated. Do not edit manually.
+ * 
+ * @see import("../svg/people-edit.svg")
+ * @see import("../../../scripts/generate-icons.mjs")
+ */
+
+import {forwardRef} from "react";
+import PeopleEditSvg from "../ast/people-edit";
+import {Icon} from "../icon";
+import type {IconBaseProps} from "../types";
+
+const PeopleEdit = forwardRef<SVGSVGElement, IconBaseProps>(function PeopleEdit(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={PeopleEditSvg} />});
+
+export default PeopleEdit;

package/src/icons/svg/gauge.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M9.00005 1.79999C10.4613 1.79999 11.8198 2.2368 12.9551 2.98475L11.5058 3.71249C10.7463 3.35192 9.89677 3.14999 9.00005 3.14999C5.76908 3.14999 3.15005 5.76902 3.15005 8.99999C3.15005 12.231 5.76908 14.85 9.00005 14.85C12.231 14.85 14.85 12.231 14.85 8.99999C14.85 8.29925 14.7262 7.62756 14.5002 7.00487L15.3633 5.63202C15.8964 6.63719 16.2 7.78288 16.2 8.99999C16.2 12.9765 12.9766 16.2 9.00005 16.2C5.0235 16.2 1.80005 12.9765 1.80005 8.99999C1.80005 5.02344 5.0235 1.79999 9.00005 1.79999ZM10.4573 10.052C10.1303 10.5042 9.60067 10.8 9.00005 10.8C8.00594 10.8 7.20005 9.9941 7.20005 8.99999C7.20005 8.3121 7.58569 7.71392 8.15278 7.41092L13.95 4.49999L10.4573 10.052ZM9.00005 8.09999C8.50299 8.09999 8.10005 8.50293 8.10005 8.99999C8.10005 9.49704 8.50299 9.89999 9.00005 9.89999C9.49711 9.89999 9.90005 9.49704 9.90005 8.99999C9.90005 8.50293 9.49711 8.09999 9.00005 8.09999Z"
+    fill="#635E57"/>
+</svg>

package/src/icons/svg/people-edit.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.4399 9.79102C15.1232 9.10791 16.2312 9.10783 16.9145 9.79102L17.5004 10.377C18.1834 11.0603 18.1835 12.1683 17.5004 12.8516L14.3393 16.0127C14.2491 16.1029 14.1368 16.1691 14.0141 16.2041L11.2182 17C10.9567 17.0743 10.6752 17.0007 10.4828 16.8086C10.2906 16.6163 10.2171 16.3348 10.2914 16.0732L11.0873 13.2773L11.1196 13.1875C11.157 13.1 11.211 13.0199 11.2787 12.9521L14.4399 9.79102ZM7.75824 10.7236C8.1716 10.6971 8.50824 11.036 8.50824 11.4502C8.50813 11.8643 8.17125 12.1969 7.75824 12.2275C6.88807 12.2921 6.0578 12.4738 5.36664 12.8018C4.49735 13.2144 3.86704 13.8446 3.59906 14.7793C3.49396 15.146 3.48358 15.7009 3.518 16.2295C3.5262 16.3552 3.64112 16.5 3.85589 16.5H7.75628C8.1705 16.5 8.50628 16.8358 8.50628 17.25C8.50628 17.6642 8.1705 18 7.75628 18H3.85589C2.94088 18 2.08622 17.3288 2.02093 16.3271C1.98473 15.7714 1.97596 14.9968 2.15667 14.3662C2.56673 12.9355 3.54875 12.0047 4.72308 11.4473C5.65412 11.0053 6.71646 10.7904 7.75824 10.7236ZM15.8539 10.8516C15.7564 10.7542 15.598 10.7542 15.5004 10.8516L12.477 13.874L12.103 15.1875L13.4164 14.8135L16.4399 11.791C16.5371 11.6935 16.5371 11.5351 16.4399 11.4375L15.8539 10.8516ZM8.50531 2C10.5211 2 12.1557 3.63455 12.1557 5.65039C12.1555 7.66605 10.521 9.2998 8.50531 9.2998C6.48976 9.29961 4.8561 7.66593 4.85589 5.65039C4.85589 3.63467 6.48963 2.00019 8.50531 2ZM8.50531 3.5C7.31806 3.50019 6.35589 4.4631 6.35589 5.65039C6.3561 6.8375 7.31819 7.79961 8.50531 7.7998C9.69259 7.7998 10.6555 6.83762 10.6557 5.65039C10.6557 4.46298 9.69272 3.5 8.50531 3.5Z"/>
+</svg>
+

package/src/images-gallery/images-gallery.tsx

@@ -3,7 +3,6 @@ import {noop} from "@fibery/helpers/src/_";
 import "photoswipe/style.css";
 import {createContext} from "@fibery/react/src/create-context";
 import {css} from "@linaria/core";
-/* eslint-disable max-lines */
 import PhotoSwipeLightbox, {type PhotoSwipeEventsMap, type PhotoSwipeOptions} from "photoswipe/lightbox";
 import type {PropsWithChildren} from "react";
 import {useCallback, useEffect, useMemo, useReducer, useRef, useState} from "react";

package/src/images-gallery/slide-buttons.tsx

@@ -8,6 +8,7 @@ import {Button} from "../button/button";
 import {IconButton} from "../button/icon-button";
 import {copyUrlToClipboard} from "../copy-to-clipboard";
 import {space} from "../design-system";
+import {canShareFile, shareFile} from "../file-item/share-file";
 import ArrowForward from "../icons/react/arrow-forward";
 import Back from "../icons/react/back";
 import Close from "../icons/react/close";
@@ -15,12 +16,13 @@ import Link from "../icons/react/link";
 import LoupeZoomIn from "../icons/react/loupe-zoom-in";
 import LoupeZoomOut from "../icons/react/loupe-zoom-out";
 import RicheditorOpenLink from "../icons/react/richeditor-open-link";
+import Share from "../icons/react/share";
 import {safeAreaInsetRightVar, safeAreaInsetTopVar} from "../mobile-styles";
 import {ThemeProvider} from "../theme-provider";
 import type {ThemeMode} from "../theme-settings";
 import {ToastProvider, useToast} from "../toast/toast-provider";
 import type {ToastQueue} from "../toast/toast-queue";
-import {useIsPhone} from "../use-is-phone";
+import {isPhoneApp, isPhoneMode} from "../use-is-phone";
 
 const barClassName = css`
   position: absolute;
@@ -78,7 +80,7 @@ export function SlideButtons({
     };
   }, [items, pswp]);
 
-  const isPhone = useIsPhone();
+  const isPhone = isPhoneMode();
 
   return (
     <ToastProvider toastQueue={toastQueue}>
@@ -90,17 +92,23 @@ export function SlideButtons({
             {slideState.actions ? (
               <SlideActionsMenu actions={slideState.actions} uiHandlers={uiHandlers} />
             ) : slideState.src ? (
-              <IconButton
-                size={isPhone ? "large" : "medium"}
-                color="neutral"
-                variant="soft"
-                onClick={() => {
-                  window.open(slideState.src, "_blank");
-                  uiHandlers.showUI();
-                }}
-              >
-                <RicheditorOpenLink />
-              </IconButton>
+              isPhoneApp() ? (
+                canShareFile() ? (
+                  <ShareButton pswp={pswp} showUI={uiHandlers.showUI} />
+                ) : null
+              ) : (
+                <IconButton
+                  size={isPhone ? "large" : "medium"}
+                  color="neutral"
+                  variant="soft"
+                  onClick={() => {
+                    window.open(slideState.src, "_blank");
+                    uiHandlers.showUI();
+                  }}
+                >
+                  <RicheditorOpenLink />
+                </IconButton>
+              )
             ) : null}
 
             <IconButton
@@ -157,7 +165,7 @@ function SlideActionsMenu({
   uiHandlers: {showUI: () => void; setForceShowUI: (value: boolean) => void};
 }) {
   const [container, setContainer] = useState<HTMLDivElement | null>();
-  const isPhone = useIsPhone();
+  const isPhone = isPhoneMode();
   return (
     <div>
       <ActionsMenu
@@ -178,10 +186,35 @@ function SlideActionsMenu({
   );
 }
 
+function ShareButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
+  const toast = useToast();
+  const isPhone = isPhoneMode();
+  return (
+    <IconButton
+      size={isPhone ? "large" : "medium"}
+      color="neutral"
+      variant="soft"
+      onClick={() => {
+        showUI();
+        const src = pswp.currSlide?.data.src;
+        if (!src) {
+          toast.error({title: "Unable to share file"});
+          return;
+        }
+        shareFile(src, pswp.currSlide?.data.label, {toast}).catch((error) =>
+          toast.error({title: "Unable to share file", subTitle: error.message})
+        );
+      }}
+    >
+      <Share />
+    </IconButton>
+  );
+}
+
 function ZoomButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
   const [zoomed, setZoomed] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
-  const isPhone = useIsPhone();
+  const isPhone = isPhoneMode();
 
   useEffect(() => {
     if (!pswp) {
@@ -231,7 +264,7 @@ function ZoomButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
 
 function CopyURLButton({pswp, showUI}: {pswp: PhotoSwipe; showUI: () => void}) {
   const toast = useToast();
-  const isPhone = useIsPhone();
+  const isPhone = isPhoneMode();
   return (
     <Button
       onClick={() => {

package/src/is-in-popup.ts

@@ -3,9 +3,6 @@ import type {$TSFixMe} from "./tsfixme";
 
 const selectors = [
   ".vzdrp-popover",
-  ".prosemirror-popover",
-  ".ant-modal-wrap",
-  ".ant-dropdown",
   ".react-select-menu",
   "[data-radix-popper-content-wrapper]",
   `.${basicPopupContainerClassName}`,

package/src/loading-sausage.tsx

@@ -3,7 +3,7 @@ import {css} from "@linaria/core";
 import {styled} from "@linaria/react";
 import cn from "classnames";
 import type {ComponentType, ReactNode} from "react";
-import {memo, useRef} from "react";
+import {memo, useState} from "react";
 
 import {space, themeVars} from "./design-system";
 
@@ -124,11 +124,11 @@ export const LoadingSausage = memo(function LoadingSausage({
   margins = true,
   animateAppearance = false,
 }: LoadingSausageProps): JSX.Element {
-  const widthRef = useRef(getRandomInt(minWidth, maxWidth, index));
+  const [width] = useState(() => getRandomInt(minWidth, maxWidth, index));
   return (
     <Container
       height={height}
-      style={{width: widthRef.current, height}}
+      style={{width, height}}
       className={cn(
         loadingSausageStyle,
         inverted ? light : dark,

package/src/palettes/diff-colors.test.ts

@@ -16,7 +16,7 @@ import {
   withColorDiff,
 } from "./diff-colors";
 
-// oxlint-disable-next-line no-control-regex
+// eslint-disable-next-line no-control-regex
 const stripAnsi = (s: string) => s.replace(/\x1b\[[0-9;]*m/g, "");
 
 describe("extractColorOrThrow", () => {

package/src/palettes/inspect.defs.colors.neutral-arch.test.ts

@@ -1,6 +1,5 @@
 import {withColorDiff} from "./diff-colors";
 import {neutralArchPalette} from "./neutral-arch";
-/* eslint-disable max-lines */
 import {colors} from "./testkit";
 
 test("snapshot", () => {
@@ -424,6 +423,14 @@ test("snapshot", () => {
         "#D33E4E   | hsl( 354  63%  54%) | oklch(0.59 0.18  19 )",
         "#ED9697   | hsl( 359  71%  76%) | oklch(0.76 0.11  19 )",
       ],
+      "collectionViewBg": [
+        "#FCFCFC   | hsl(none   0%  99%) | oklch(0.99 0    none)",
+        "#1C1C1C   | hsl(none   0%  11%) | oklch(0.23 0    none)",
+      ],
+      "collectionViewBorder": [
+        "0 0 0 1px       #E3E3E399 | hsl(none   0%  89% / 0.6 ) | oklch(0.92 0    none / 0.6 )",
+        "0 0 0 1px       #5252524D | hsl(none   0%  32% / 0.3 ) | oklch(0.44 0    none / 0.3 )",
+      ],
       "colorAI": [
         "#9D63D4   | hsl( 271  57%  61%) | oklch(0.61 0.17 306 )",
         "#8349B6   | hsl( 272  43%  50%) | oklch(0.53 0.17 306 )",
@@ -652,6 +659,14 @@ test("snapshot", () => {
         "#F5F5F5   | hsl(none   0%  96%) | oklch(0.97 0    none)",
         "#171717   | hsl(none   0%   9%) | oklch(0.2  0    none)",
       ],
+      "colorBgCodeEditor": [
+        "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "#242424   | hsl(none   0%  14%) | oklch(0.26 0    none)",
+      ],
+      "colorBgCommentHover": [
+        "#F7F7F7   | hsl(none   0%  97%) | oklch(0.98 0    none)",
+        "#1C1C1C   | hsl(none   0%  11%) | oklch(0.23 0    none)",
+      ],
       "colorBgDbTabFocus": [
         "#E3E3E3   | hsl(none   0%  89%) | oklch(0.92 0    none)",
         "#333333   | hsl(none   0%  20%) | oklch(0.32 0    none)",
@@ -720,6 +735,10 @@ test("snapshot", () => {
         "#00000099 | hsl(none   0%   0% / 0.6 ) | oklch(0    0    none / 0.6 )",
         "#00000099 | hsl(none   0%   0% / 0.6 ) | oklch(0    0    none / 0.6 )",
       ],
+      "colorBgFloatingPanel": [
+        "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "#292929   | hsl(none   0%  16%) | oklch(0.28 0    none)",
+      ],
       "colorBgLaneSubtle": [
         "#0000000D | hsl(none   0%   0% / 0.05) | oklch(0    0    none / 0.05)",
         "#FFFFFF0D | hsl(none   0% 100% / 0.05) | oklch(1    0    none / 0.05)",
@@ -778,11 +797,11 @@ test("snapshot", () => {
       ],
       "colorBgMenuItemFocus": [
         "#E3E3E3   | hsl(none   0%  89%) | oklch(0.92 0    none)",
-        "#2E2E2E   | hsl(none   0%  18%) | oklch(0.3  0    none)",
+        "#333333   | hsl(none   0%  20%) | oklch(0.32 0    none)",
       ],
       "colorBgMenuItemHover": [
         "#E8E8E8   | hsl(none   0%  91%) | oklch(0.93 0    none)",
-        "#1C1C1C   | hsl(none   0%  11%) | oklch(0.23 0    none)",
+        "#2E2E2E   | hsl(none   0%  18%) | oklch(0.3  0    none)",
       ],
       "colorBgMenuItemSelected": [
         "#F7E0D3CC | hsl(  22  69%  90% / 0.8 ) | oklch(0.92 0.03  52  / 0.8 )",
@@ -814,15 +833,15 @@ test("snapshot", () => {
       ],
       "colorBgNotificationHover": [
         "#F5F5F5   | hsl(none   0%  96%) | oklch(0.97 0    none)",
-        "#292929   | hsl(none   0%  16%) | oklch(0.28 0    none)",
+        "#1C1C1C   | hsl(none   0%  11%) | oklch(0.23 0    none)",
       ],
       "colorBgNotificationSelected": [
         "#FDF3EE   | hsl(  20  79%  96%) | oklch(0.97 0.01  49 )",
-        "#432412   | hsl(  22  58%  17%) | oklch(0.3  0.06  50 )",
+        "#281911   | hsl(  21  40%  11%) | oklch(0.23 0.03  49 )",
       ],
       "colorBgNotificationSelectedHover": [
         "#FAEBE3   | hsl(  21  70%  94%) | oklch(0.95 0.02  50 )",
-        "#58321C   | hsl(  22  52%  23%) | oklch(0.36 0.06  50 )",
+        "#392012   | hsl(  22  52%  15%) | oklch(0.27 0.05  49 )",
       ],
       "colorBgObjectEditorSeparator": [
         "#171717   | hsl(none   0%   9%) | oklch(0.2  0    none)",
@@ -834,7 +853,7 @@ test("snapshot", () => {
       ],
       "colorBgPopup": [
         "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
-        "#292929   | hsl(none   0%  16%) | oklch(0.28 0    none)",
+        "#242424   | hsl(none   0%  14%) | oklch(0.26 0    none)",
       ],
       "colorBgReactionsDefault": [
         "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
@@ -853,24 +872,28 @@ test("snapshot", () => {
         "#B54A00   | hsl(  25 100%  35%) | oklch(0.54 0.15  45 )",
       ],
       "colorBgRelationContainer": [
-        "#F7F7F7   | hsl(none   0%  97%) | oklch(0.98 0    none)",
-        "#171717   | hsl(none   0%   9%) | oklch(0.2  0    none)",
+        "#FCFCFC   | hsl(none   0%  99%) | oklch(0.99 0    none)",
+        "#1C1C1C   | hsl(none   0%  11%) | oklch(0.23 0    none)",
       ],
       "colorBgScrollFade": [
         "#FFFFFF26 | hsl(none   0% 100% / 0.15) | oklch(1    0    none / 0.15)",
         "#00000026 | hsl(none   0%   0% / 0.15) | oklch(0    0    none / 0.15)",
       ],
+      "colorBgSearchPanel": [
+        "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "#1C1C1C   | hsl(none   0%  11%) | oklch(0.23 0    none)",
+      ],
       "colorBgSearchRowCreateHover": [
         "#FAEBE3   | hsl(  21  70%  94%) | oklch(0.95 0.02  50 )",
         "#432412   | hsl(  22  58%  17%) | oklch(0.3  0.06  50 )",
       ],
       "colorBgSearchRowHover": [
         "#EDEDED   | hsl(none   0%  93%) | oklch(0.95 0    none)",
-        "#2E2E2E   | hsl(none   0%  18%) | oklch(0.3  0    none)",
+        "#242424   | hsl(none   0%  14%) | oklch(0.26 0    none)",
       ],
       "colorBgSegmentedControl": [
         "#E8E8E8CC | hsl(none   0%  91% / 0.8 ) | oklch(0.93 0    none / 0.8 )",
-        "#242424CC | hsl(none   0%  14% / 0.8 ) | oklch(0.26 0    none / 0.8 )",
+        "#1C1C1CCC | hsl(none   0%  11% / 0.8 ) | oklch(0.23 0    none / 0.8 )",
       ],
       "colorBgSegmentedControlActive": [
         "#FCFCFC   | hsl(none   0%  99%) | oklch(0.99 0    none)",
@@ -908,6 +931,10 @@ test("snapshot", () => {
         "#FCFCFC   | hsl(none   0%  99%) | oklch(0.99 0    none)",
         "#171717   | hsl(none   0%   9%) | oklch(0.2  0    none)",
       ],
+      "colorBgViewMetaItem": [
+        "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "#1C1C1C   | hsl(none   0%  11%) | oklch(0.23 0    none)",
+      ],
       "colorBgWhiteboard": [
         "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
         "#171717   | hsl(none   0%   9%) | oklch(0.2  0    none)",
@@ -1396,6 +1423,33 @@ test("snapshot", () => {
         "#924C1E   | hsl(  24  66%  35%) | oklch(0.49 0.11  50 )",
         "#924C1E   | hsl(  24  66%  35%) | oklch(0.49 0.11  50 )",
       ],
+      "dbSettingsCardBg": [
+        "#F7F7F7   | hsl(none   0%  97%) | oklch(0.98 0    none)",
+        "#1C1C1C   | hsl(none   0%  11%) | oklch(0.23 0    none)",
+      ],
+      "dbSettingsCardBorder": [
+        "0 0 0 1px       #E3E3E3CC | hsl(none   0%  89% / 0.8 ) | oklch(0.92 0    none / 0.8 )",
+        "0 0 0 1px       #33333399 | hsl(none   0%  20% / 0.6 ) | oklch(0.32 0    none / 0.6 )",
+      ],
+      "dbSettingsSidebarBg": [
+        "#F7F7F7   | hsl(none   0%  97%) | oklch(0.98 0    none)",
+        "#1C1C1C   | hsl(none   0%  11%) | oklch(0.23 0    none)",
+      ],
+      "dbSettingsSidebarIconBg": [
+        "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
+        "#242424   | hsl(none   0%  14%) | oklch(0.26 0    none)",
+      ],
+      "dbSettingsSidebarIconBorder": [
+        [
+          "0 1px 4px 0     #5E5E5E1A | hsl(none   0%  37% / 0.1 ) | oklch(0.48 0    none / 0.1 )",
+          "0 0 0 0.5px     #E8E8E880 | hsl(none   0%  91% / 0.5 ) | oklch(0.93 0    none / 0.5 )",
+        ],
+        "0 0 0 1px       #70707033 | hsl(none   0%  44% / 0.2 ) | oklch(0.55 0    none / 0.2 )",
+      ],
+      "dbSettingsSidebarItemHover": [
+        "#EDEDED   | hsl(none   0%  93%) | oklch(0.95 0    none)",
+        "#292929   | hsl(none   0%  16%) | oklch(0.28 0    none)",
+      ],
       "disabledInversedTextColor": [
         "#00000040 | hsl(none   0%   0% / 0.25) | oklch(0    0    none / 0.25)",
         "#FFFFFF40 | hsl(none   0% 100% / 0.25) | oklch(1    0    none / 0.25)",
@@ -1678,15 +1732,15 @@ test("snapshot", () => {
       ],
       "inputBgColor": [
         "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
-        "#1C1C1C   | hsl(none   0%  11%) | oklch(0.23 0    none)",
+        "#171717   | hsl(none   0%   9%) | oklch(0.2  0    none)",
       ],
       "inputBorderBlendMode": [
         "multiply",
         "lighten",
       ],
       "inputBorderColor": [
-        "0 0 0 1px       #E3E3E3B3 | hsl(none   0%  89% / 0.7 ) | oklch(0.92 0    none / 0.7 )",
-        "0 0 0 1px       #525252B3 | hsl(none   0%  32% / 0.7 ) | oklch(0.44 0    none / 0.7 )",
+        "0 0 0 1px       #E3E3E3CC | hsl(none   0%  89% / 0.8 ) | oklch(0.92 0    none / 0.8 )",
+        "0 0 0 1px       #52525266 | hsl(none   0%  32% / 0.4 ) | oklch(0.44 0    none / 0.4 )",
       ],
       "inputBorderFocusColor": [
         "0 0 0 1px       #C7C7C7   | hsl(none   0%  78%) | oklch(0.83 0    none)",
@@ -1694,7 +1748,7 @@ test("snapshot", () => {
       ],
       "inputBorderHoverColor": [
         "0 0 0 1px       #DBDBDB   | hsl(none   0%  86%) | oklch(0.89 0    none)",
-        "0 0 0 1px       #525252   | hsl(none   0%  32%) | oklch(0.44 0    none)",
+        "0 0 0 1px       #3D3D3D   | hsl(none   0%  24%) | oklch(0.36 0    none)",
       ],
       "inputBorderWarningColor": [
         "0 0 0 1px       #F6D900   | hsl(  53 100%  48%) | oklch(0.88 0.18  99 )",
@@ -1709,8 +1763,8 @@ test("snapshot", () => {
         "#3333334D | hsl(none   0%  20% / 0.3 ) | oklch(0.32 0    none / 0.3 )",
       ],
       "inputDisabledBorderColor": [
-        "0 0 0 1px       #E3E3E333 | hsl(none   0%  89% / 0.2 ) | oklch(0.92 0    none / 0.2 )",
-        "0 0 0 1px       #52525233 | hsl(none   0%  32% / 0.2 ) | oklch(0.44 0    none / 0.2 )",
+        "0 0 0 1px       #E3E3E399 | hsl(none   0%  89% / 0.6 ) | oklch(0.92 0    none / 0.6 )",
+        "0 0 0 1px       #5252524D | hsl(none   0%  32% / 0.3 ) | oklch(0.44 0    none / 0.3 )",
       ],
       "inputErrorBorderColor": [
         "0 0 0 1px       #AF2438   | hsl( 351  66%  41%) | oklch(0.5  0.17  19 )",
@@ -1770,7 +1824,7 @@ test("snapshot", () => {
       ],
       "mainBg": [
         "#F5F5F5   | hsl(none   0%  96%) | oklch(0.97 0    none)",
-        "#0D0D0D   | hsl(none   0%   5%) | oklch(0.16 0    none)",
+        "#242424   | hsl(none   0%  14%) | oklch(0.26 0    none)",
       ],
       "mentionBgColor": [
         "#DBDBDB4D | hsl(none   0%  86% / 0.3 ) | oklch(0.89 0    none / 0.3 )",
@@ -1778,7 +1832,7 @@ test("snapshot", () => {
       ],
       "menuBg": [
         "#F5F5F5   | hsl(none   0%  96%) | oklch(0.97 0    none)",
-        "#0D0D0D   | hsl(none   0%   5%) | oklch(0.16 0    none)",
+        "#242424   | hsl(none   0%  14%) | oklch(0.26 0    none)",
       ],
       "menuIconColor": [
         "#171717B3 | hsl(none   0%   9% / 0.7 ) | oklch(0.2  0    none / 0.7 )",
@@ -1912,6 +1966,10 @@ test("snapshot", () => {
         "#FFFFFF   | hsl(none   0% 100%) | oklch(1    0    none)",
         "#171717   | hsl(none   0%   9%) | oklch(0.2  0    none)",
       ],
+      "panelBorder": [
+        "0 0 0 1px       #C7C7C733 | hsl(none   0%  78% / 0.2 ) | oklch(0.83 0    none / 0.2 )",
+        "0 0 0 1px       #52525233 | hsl(none   0%  32% / 0.2 ) | oklch(0.44 0    none / 0.2 )",
+      ],
       "panelContentBg": [
         "#F7F7F7   | hsl(none   0%  97%) | oklch(0.98 0    none)",
         "#171717   | hsl(none   0%   9%) | oklch(0.2  0    none)",
@@ -2054,27 +2112,27 @@ test("snapshot", () => {
       ],
       "shadowCardDefault": [
         [
-          "0 0 0 1px       #E3E3E3B3 | hsl(none   0%  89% / 0.7 ) | oklch(0.92 0    none / 0.7 )",
+          "0 0 0 1px       #E3E3E3CC | hsl(none   0%  89% / 0.8 ) | oklch(0.92 0    none / 0.8 )",
           "0 1px 4px 0     #1717170D | hsl(none   0%   9% / 0.05) | oklch(0.2  0    none / 0.05)",
         ],
         [
-          "0 0 0 1px       #525252B3 | hsl(none   0%  32% / 0.7 ) | oklch(0.44 0    none / 0.7 )",
+          "0 0 0 1px       #52525266 | hsl(none   0%  32% / 0.4 ) | oklch(0.44 0    none / 0.4 )",
           "0 1px 4px 0     #1717171A | hsl(none   0%   9% / 0.1 ) | oklch(0.2  0    none / 0.1 )",
         ],
       ],
       "shadowCardHover": [
         [
-          "0 0 0 1px       #E3E3E3B3 | hsl(none   0%  89% / 0.7 ) | oklch(0.92 0    none / 0.7 )",
+          "0 0 0 1px       #E3E3E3CC | hsl(none   0%  89% / 0.8 ) | oklch(0.92 0    none / 0.8 )",
           "0 2px 6px 0     #1717170D | hsl(none   0%   9% / 0.05) | oklch(0.2  0    none / 0.05)",
         ],
         [
-          "0 0 0 1px       #525252B3 | hsl(none   0%  32% / 0.7 ) | oklch(0.44 0    none / 0.7 )",
+          "0 0 0 1px       #52525266 | hsl(none   0%  32% / 0.4 ) | oklch(0.44 0    none / 0.4 )",
           "0 2px 6px 0     #1717171A | hsl(none   0%   9% / 0.1 ) | oklch(0.2  0    none / 0.1 )",
         ],
       ],
       "shadowCardInset": [
-        "inset 0 0 0 1px #E3E3E3B3 | hsl(none   0%  89% / 0.7 ) | oklch(0.92 0    none / 0.7 )",
-        "inset 0 0 0 1px #525252B3 | hsl(none   0%  32% / 0.7 ) | oklch(0.44 0    none / 0.7 )",
+        "inset 0 0 0 1px #E3E3E3CC | hsl(none   0%  89% / 0.8 ) | oklch(0.92 0    none / 0.8 )",
+        "inset 0 0 0 1px #52525266 | hsl(none   0%  32% / 0.4 ) | oklch(0.44 0    none / 0.4 )",
       ],
       "shadowEntityBoxDefault": [
         "0 2px 4px 0     #1717170D | hsl(none   0%   9% / 0.05) | oklch(0.2  0    none / 0.05)",
@@ -2088,6 +2146,16 @@ test("snapshot", () => {
         "0 4px 8px 0     #1717171A | hsl(none   0%   9% / 0.1 ) | oklch(0.2  0    none / 0.1 )",
         "0 4px 8px 0     #1717171A | hsl(none   0%   9% / 0.1 ) | oklch(0.2  0    none / 0.1 )",
       ],
+      "shadowFloatingPanel": [
+        [
+          "0 0 0 1px       #78787826 | hsl(none   0%  47% / 0.15) | oklch(0.57 0    none / 0.15)",
+          "0 3px 12px 0    #5E5E5E26 | hsl(none   0%  37% / 0.15) | oklch(0.48 0    none / 0.15)",
+        ],
+        [
+          "0 0 0 1px       #333333   | hsl(none   0%  20%) | oklch(0.32 0    none)",
+          "0 3px 12px 0    #17171780 | hsl(none   0%   9% / 0.5 ) | oklch(0.2  0    none / 0.5 )",
+        ],
+      ],
       "shadowMenuHeaderAvatar": [
         [
           "0 1px 4px 0     #5E5E5E1A | hsl(none   0%  37% / 0.1 ) | oklch(0.48 0    none / 0.1 )",
@@ -2191,7 +2259,7 @@ test("snapshot", () => {
       ],
       "surfaceElevationS": [
         "0 2px 4px 0     #0000000D | hsl(none   0%   0% / 0.05) | oklch(0    0    none / 0.05)",
-        "0 2px 4px 0     #FFFFFF08 | hsl(none   0% 100% / 0.03) | oklch(1    0    none / 0.03)",
+        "0 2px 4px 0     #1717170D | hsl(none   0%   9% / 0.05) | oklch(0.2  0    none / 0.05)",
       ],
       "swatchDefault": [
         "#FBA32F   | hsl(  34  96%  58%) | oklch(0.79 0.16  68 )",