@fibery/ui-kit 1.34.1 → 1.34.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.34.1",
+  "version": "1.34.3",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -35,8 +35,8 @@
   ],
   "license": "UNLICENSED",
   "dependencies": {
-    "@linaria/core": "5.0.1",
-    "@linaria/react": "5.0.1",
+    "@linaria/core": "6.2.0",
+    "@linaria/react": "6.2.1",
     "@popperjs/core": "2.11.6",
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-context-menu": "2.2.1",
@@ -74,9 +74,9 @@
     "screenfull": "6.0.1",
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
-    "@fibery/emoji-data": "2.6.0",
     "@fibery/helpers": "1.3.0",
-    "@fibery/react": "1.4.0"
+    "@fibery/react": "1.4.0",
+    "@fibery/emoji-data": "2.6.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -85,7 +85,7 @@
   "devDependencies": {
     "@babel/core": "7.23.9",
     "@babel/runtime": "7.23.9",
-    "@linaria/babel-preset": "5.0.3",
+    "@wyw-in-js/babel-preset": "0.5.5",
     "@testing-library/dom": "8.19.1",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",

package/src/antd/styles.ts

@@ -34,7 +34,7 @@ export const inputOverrides = {
     transition: `box-shadow ${transition}`,
     boxShadow: `var(--input-border, ${themeVars.inputBorderColor})`,
     letterSpacing: 0,
-    "::placeholder": {
+    "&::placeholder": {
       color: themeVars.inputPlaceholderTextColor,
     },
   },
@@ -54,7 +54,7 @@ export const inputOverrides = {
     transition: `box-shadow ${transition}`,
     WebkitTextFillColor: "currentColor",
     cursor: "default",
-    ":hover": {
+    "&:hover": {
       boxShadow: `${themeVars.inputDisabledBorderColor}`,
     },
   },
@@ -74,8 +74,8 @@ export const inputStyles = css`
       padding: 0,
       textAlign: "left",
       boxShadow: shadows.border,
-      ":hover": inputOverrides.hover,
-      ":focus": inputOverrides.focus,
+      "&:hover": inputOverrides.hover,
+      "&:focus": inputOverrides.focus,
     },
     "& .ant-input-group": {borderSpacing: 1, ...textStyles.regular},
     "& .ant-input": inputOverrides.main,

package/src/button/base-button.tsx

@@ -1,4 +1,4 @@
-import {CSSProperties, css, cx} from "@linaria/core";
+import {css, CSSProperties, cx} from "@linaria/core";
 import {forwardRef} from "react";
 import {themeVars} from "../design-system";
 import {iconColorVar} from "../icons/Icon";
@@ -31,10 +31,10 @@ export const baseButton = css`
 
   box-shadow: inset 0 0 0 1px var(--fibery-button-border-color);
 
-  :hover:not(:disabled) {
+  &:hover:not(:disabled) {
     background-color: var(--fibery-button-hover-color);
   }
-  :active {
+  &:active {
     color: var(--fibery-button-text-active-color);
     ${iconColorVar}: var(--fibery-button-text-active-color);
   }
@@ -46,16 +46,16 @@ export const baseButton = css`
     background-color: var(--fibery-button-hover-color);
   }
 
-  :disabled {
+  &:disabled {
     cursor: default;
     opacity: 0.4;
   }
 
-  :focus {
+  &:focus {
     outline: none;
   }
 
-  :focus-visible {
+  &:focus-visible {
     background-color: var(--fibery-button-hover-color);
     outline: 2px solid var(--fibery-button-focus-color);
   }
@@ -63,8 +63,10 @@ export const baseButton = css`
 
 const reset = css`
   /* make sure it doesn't reset properties set from outside (https://the.fibery.io/SoftDev/bug/Next-button-in-integration-is-flaky-and-can-be-out-of-style-10916) */
-  :global(:where(.${baseButton})) {
-    all: unset;
+  :global() {
+    button:where(.${baseButton}) {
+      all: unset;
+    }
   }
 `;
 

package/src/button/button.tsx

@@ -3,7 +3,7 @@ import {forwardRef} from "react";
 import {border, fontWeight, space, textStyles} from "../design-system";
 import {iconSizeVar} from "../icons/Icon";
 import SpinnerIcon from "../icons/react/Spinner";
-import {BaseButtonProps, BaseButton, ButtonSize} from "./base-button";
+import {BaseButton, BaseButtonProps, ButtonSize} from "./base-button";
 import {useIsSupportHardwareKeyboard} from "../use-is-support-hardware-keyboard";
 
 export type ButtonProps = {

package/src/button/icon-button.tsx

@@ -1,9 +1,9 @@
 import {css, cx} from "@linaria/core";
 import {forwardRef} from "react";
-import {BaseButtonProps, BaseButton, ButtonSize} from "./base-button";
 import {border, space} from "../design-system";
 import {iconSizeVar} from "../icons/Icon";
 import Spinner from "../icons/react/Spinner";
+import {BaseButton, BaseButtonProps, ButtonSize} from "./base-button";
 
 export type IconButtonProps = {
   size?: ButtonSize;

package/src/design-system.ts

@@ -2,6 +2,8 @@
 import chroma from "chroma-js";
 import ColorHash from "color-hash";
 import _ from "lodash";
+import {a11yColor} from "./a11y-color";
+import {createInlineTheme as createInlineStyles, varPrefix} from "./create-inline-theme";
 import {
   blackA,
   blue,
@@ -18,8 +20,6 @@ import {
   yellow,
   yellowDark,
 } from "./palette";
-import {a11yColor} from "./a11y-color";
-import {createInlineTheme as createInlineStyles, varPrefix} from "./create-inline-theme";
 import {ThemeMode} from "./theme-settings";
 
 export const typeSizes = [26, 24, 18, 16, 14, 12, 10, 8] as const;
@@ -341,15 +341,17 @@ export const themeColors = {
   ],
   // :focus
   colorBgEntityBoxDefaultFocus: [whiteA.whiteA0, slateDark.slate3],
+  colorOverlayEntityBoxDefaultFocus: [indigo.indigo9, indigoDark.indigo9],
   shadowStrokeEntityBoxDefaultFocus: [
-    `0 0 0 2px ${getOpacities(indigo.indigo9).opacity20}`,
-    `0 0 0 2px ${getOpacities(indigoDark.indigo9).opacity20}`,
+    `0 0 0 2px ${getOpacities(indigo.indigo9).opacity40}`,
+    `0 0 0 2px ${getOpacities(indigoDark.indigo9).opacity40}`,
   ],
   // :focus:hover
   colorBgEntityBoxDefaultFocusHover: [whiteA.whiteA0, slateDark.slate4],
+  colorOverlayEntityBoxDefaultFocusHover: [indigo.indigo9, indigoDark.indigo9],
   shadowStrokeEntityBoxDefaultFocusHover: [
-    `0 0 0 2px ${getOpacities(indigo.indigo9).opacity40}`,
-    `0 0 0 2px ${getOpacities(indigoDark.indigo9).opacity40}`,
+    `0 0 0 2px ${getOpacities(indigo.indigo9).opacity60}`,
+    `0 0 0 2px ${getOpacities(indigoDark.indigo9).opacity60}`,
   ],
   //::drag
   opacityEntityBoxDefaultDrag: [`${opacity.opacity40}`, `${opacity.opacity40}`],
@@ -426,6 +428,11 @@ export const themeColors = {
   allowedDropColor: [getOpacities(slate.slate3).opacity80, getOpacities(slateDark.slate3).opacity80],
   relationViewBgColor: [slate.slate2, slateDark.slate3],
 
+  mySpaceIconColor: [blackA.blackA11, whiteA.whiteA11],
+  mySpaceIconBg: [getOpacities(blackA.blackA11).opacity20, getOpacities(whiteA.whiteA11).opacity20],
+  favoritesIconColor: [yellow.yellow8, yellowDark.yellow11],
+  favoritesIconBg: [getOpacities(yellow.yellow8).opacity20, getOpacities(yellowDark.yellow11).opacity20],
+
   // Unit
   unitBg: [slate.slate3, slateDark.slate6],
   unitBgHover: [slate.slate4, slateDark.slate7],
@@ -459,27 +466,10 @@ export const themeColors = {
   infoBox: [getOpacities(yellow.yellow4).opacity50, getOpacities(yellowDark.yellow9).opacity20],
   appCardBgColor: [whiteA.whiteA0, slateDark.slate2],
   appCardHoverColor: [getOpacities(slate.slate1).opacity95, slateDark.slate2],
-  appCardShadow: [
-    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 4px -4px ${getOpacities(slate.slate10).opacity20}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate8).opacity50}, 0 2px 4px -4px ${getOpacities(slateDark.slate1).opacity50}`,
-  ],
-  appCardShadowHover: [
-    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 6px 8px -4px ${getOpacities(slate.slate10).opacity30}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate8).opacity60}, 0 6px 8px -4px ${
-      getOpacities(slateDark.slate1).opacity100
-    }`,
-  ],
   modalBg: [getOpacities(slate.slate11).opacity20, getOpacities(slateDark.slate2).opacity50],
   modalContentBg: [whiteA.whiteA0, slateDark.slate3],
   progressIconBg: [getOpacities(slate.slate8).opacity50, getOpacities(slateDark.slate10).opacity20],
   progressIconFill: [slate.slate11, slateDark.slate11],
-  instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity95, getOpacities(slateDark.slate4).opacity95],
-  instrumentsMenuShadow: [
-    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 12px -2px ${getOpacities(slate.slate10).opacity15}`,
-    `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 2px 12px -6px ${
-      getOpacities(slateDark.slate1).opacity15
-    }`,
-  ],
   selectedColorBorder: [getOpacities(slate.slate6).opacity25, getOpacities(slate.slate6).opacity25],
   formBg: [slate.slate2, slateDark.slate2],
   formHeaderShadow: [
@@ -511,6 +501,7 @@ export const themeColors = {
   progressText: [slate.slate11, slate.slate11],
   progressFillBg: [slate.slate11, slate.slate11],
   progressFillText: [whiteA.whiteA0, whiteA.whiteA0],
+  progressBarFillNeutral: [getOpacities(slate.slate9).opacity20, getOpacities(slateDark.slate9).opacity20],
   progressBarFill: [indigo.indigo9, indigoDark.indigo10],
   progressBarBg: [getOpacities(indigo.indigo9).opacity25, getOpacities(indigoDark.indigo10).opacity25],
   searchFiltersBg: [slate.slate1, slateDark.slate2],
@@ -621,13 +612,11 @@ export const themeColors = {
   colorBgToastDefault: [slate.slate1, slateDark.slate1],
   colorBgDbTabHover: [slate.slate3, slateDark.slate4],
   colorBgDbTabFocus: [slate.slate6, slateDark.slate6],
-
   colorBgTabHover: [getOpacities(slate.slate11).opacity10, getOpacities(slateDark.slate11).opacity10],
 
   // Chat
   colorBgMessageContainer: [slate.slate3, slateDark.slate6],
   colorBgMessageContainerHover: [slate.slate2, slateDark.slate3],
-
   colorBgEntityAvatarDefault: [indigo.indigo1, indigoDark.indigo1],
   colorBgEntityAvatarHover: [indigo.indigo3, indigoDark.indigo3],
   colorTextEntityAvatarDefault: [indigo.indigo8, indigoDark.indigo8],
@@ -635,6 +624,16 @@ export const themeColors = {
 
   // Text editor
   colorBgEditorImageZoomed: [getOpacities(slate.slate3).opacity90, getOpacities(slateDark.slate6).opacity90],
+
+  //Whiteboard
+  instrumentsMenuBg: [getOpacities(whiteA.whiteA0).opacity95, getOpacities(slateDark.slate4).opacity95],
+  instrumentsMenuShadow: [
+    `0 0 0 1px ${getOpacities(slate.slate10).opacity10}, 0 2px 12px -2px ${getOpacities(slate.slate10).opacity15}`,
+    `0 0 0 1px ${getOpacities(slateDark.slate1).opacity10}, 0 2px 12px -6px ${
+      getOpacities(slateDark.slate1).opacity15
+    }`,
+  ],
+  commentBubbleBg: [whiteA.whiteA0, slateDark.slate6],
 } as const;
 
 type ThemeDefs = typeof themeColors;
@@ -911,7 +910,7 @@ export const layout = {
   enumItemHeight: 32,
   menuItemHeight: 32,
   newMenuItemHeight: 28, // I'm ok
-  newMenuIconSize: 20,
+  newMenuIconSize: 18,
   viewHeaderHeight: space.s12 * 7,
   viewHeaderCompactHeight: 52,
   columnMinWidth: 240,

package/src/icons/ast/CommentBubble.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const CommentBubble: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"m3.506 13.734.012.023c.262.491.272 1.031.258 1.347-.016.38-.086.784-.193 1.173-.094.345-.23.728-.416 1.106.751-.145 1.525-.41 2.087-.697l.681-.35.683.347a7.43 7.43 0 0 0 3.38.811c4.132 0 7.496-3.364 7.496-7.497 0-4.132-3.364-7.497-7.497-7.497C5.865 2.5 2.5 5.865 2.5 9.997c0 1.308.348 2.6.993 3.715l.013.022Zm4.829 5.105a8.99 8.99 0 0 1-2.397-.819c-1.017.522-2.58.98-3.868.98a5.38 5.38 0 0 1-.271-.007.843.843 0 0 1-.551-1.439c.84-.84 1.214-2.59.946-3.09A8.956 8.956 0 0 1 1 9.996C1 5.037 5.036 1 9.997 1s8.997 4.036 8.997 8.997-4.036 8.997-8.997 8.997a8.935 8.935 0 0 1-1.662-.155Z"},"children":[]}],"metadata":""}]},"name":"comment-bubble"};
+
+export default CommentBubble;

package/src/icons/ast/EditValue.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const EditValue: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M3.5 6.25a.75.75 0 0 1 .75-.75h11.5a.75.75 0 0 1 .75.75v2a.75.75 0 0 0 1.5 0v-2A2.25 2.25 0 0 0 15.75 4H4.25A2.25 2.25 0 0 0 2 6.25v5.5A2.25 2.25 0 0 0 4.25 14H12a.75.75 0 0 0 0-1.5H4.25a.75.75 0 0 1-.75-.75v-5.5Zm2.25 2a.75.75 0 0 0 0 1.5h2.5a.75.75 0 0 0 0-1.5h-2.5Zm9 2a.75.75 0 0 0 0 1.5h1v4.5h-1a.75.75 0 0 0 0 1.5h3.5a.75.75 0 0 0 0-1.5h-1v-4.5h1a.75.75 0 0 0 0-1.5h-3.5Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"edit-value"};
+
+export default EditValue;

package/src/icons/ast/Equation.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const Equation: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M11.667 2.306a.75.75 0 0 0-.701.483L6.323 15.005l-1.55-3.374a.75.75 0 0 0-.68-.437H1.943a.75.75 0 0 0 0 1.5h1.667l2.096 4.563a.75.75 0 0 0 1.383-.046l5.094-13.405h5.872a.75.75 0 0 0 0-1.5h-6.39Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M15.5 11.272c.62-.653 1.415-1.189 2.463-1.189a.75.75 0 1 1 0 1.5c-.479 0-.907.229-1.375.722-.402.422-.768.968-1.174 1.593.269.663.515 1.227.824 1.648.326.444.659.648 1.114.648a.75.75 0 0 1 0 1.5c-1.072 0-1.809-.56-2.323-1.26a6.493 6.493 0 0 1-.61-1.057 8.202 8.202 0 0 1-1.017 1.164c-.72.663-1.618 1.153-2.772 1.153a.75.75 0 1 1 0-1.5c.68 0 1.232-.273 1.754-.755.482-.445.906-1.037 1.347-1.705-.246-.6-.479-1.112-.765-1.502-.325-.444-.658-.649-1.114-.649a.75.75 0 0 1 0-1.5c1.072 0 1.81.56 2.324 1.262.202.275.379.585.537.905.248-.349.509-.685.787-.978Z"},"children":[]}],"metadata":""}]},"name":"equation"};
+
+export default Equation;

package/src/icons/ast/LockOutline.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const LockOutline: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M6.912 2.44C7.594 1.488 8.647 1 10 1s2.406.487 3.088 1.44c.647.908.882 2.135.882 3.477v.913h.28c.707 0 1.408.2 1.939.692.54.5.811 1.216.811 2.058v5.67c0 .87-.54 1.56-1.041 1.986-.263.223-.55.406-.827.536-.26.122-.575.228-.882.228h-8.5C4.107 18 3 16.744 3 15.25V9.58c0-.842.273-1.559.813-2.059.53-.49 1.23-.691 1.937-.691h.28v-.913c0-1.342.235-2.569.882-3.476Zm.618 4.39h4.94v-.913c0-1.21-.22-2.067-.603-2.605-.35-.49-.908-.812-1.867-.812-.96 0-1.516.321-1.867.812-.384.538-.603 1.395-.603 2.605v.913ZM4.832 8.623c-.175.161-.332.445-.332.957v5.67c0 .715.484 1.25 1.25 1.25h8.502a.979.979 0 0 0 .242-.086c.155-.072.33-.183.493-.321.35-.298.513-.608.513-.843V9.58c0-.513-.157-.797-.33-.958-.184-.17-.484-.292-.92-.292h-8.5c-.434 0-.734.122-.918.293ZM10 10.5a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0v-2.25a.75.75 0 0 1 .75-.75Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"lock-outline"};
+
+export default LockOutline;

package/src/icons/ast/LoupeZoomOut.ts

@@ -3,6 +3,6 @@
 
 import { IconDefinition } from '../types';
 
-const LoupeZoomOut: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M6.5 8.05a.75.75 0 1 0 0 1.5H11a.75.75 0 0 0 0-1.5H6.5Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M8.75 15.835a7.055 7.055 0 0 0 4.378-1.515l3.782 3.771a.835.835 0 0 0 1.18-1.182l-3.78-3.768a7.085 7.085 0 1 0-5.56 2.694ZM3.335 8.75a5.415 5.415 0 1 1 10.83 0 5.415 5.415 0 0 1-10.83 0Z"},"children":[]}],"metadata":""}]},"name":"loupe-zoom-out"};
+const LoupeZoomOut: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M6.5 8.05a.75.75 0 1 0 0 1.5H11a.75.75 0 0 0 0-1.5z"},"children":[]},{"type":"element","tagName":"path","properties":{"clipRule":"evenodd","d":"M8.75 15.835a7.055 7.055 0 0 0 4.378-1.514l3.782 3.77a.835.835 0 0 0 1.18-1.182l-3.78-3.768a7.085 7.085 0 1 0-5.56 2.694zM3.335 8.75a5.415 5.415 0 1 1 10.83 0 5.415 5.415 0 0 1-10.83 0z","fillRule":"evenodd"},"children":[]}],"metadata":""}]},"name":"loupe-zoom-out"};
 
 export default LoupeZoomOut;

package/src/icons/ast/ShowAuthor.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ShowAuthor: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10 9C8.07 9 6.5 7.43 6.5 5.5S8.07 2 10 2s3.5 1.57 3.5 3.5S11.93 9 10 9Zm0-5.5c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z"},"children":[]},{"type":"element","tagName":"path","properties":{"d":"M8.78 17.95c-1.3-.1-2.57-.34-3.77-.72-.62-.2-1.13-.65-1.4-1.24-.26-.58-.27-1.25 0-1.83A7.002 7.002 0 0 1 10 9.99l.243.02c.437.035.67.053.9.095.262.048.52.126 1.074.294l.533.161c.38.16.56.6.39.98-.16.38-.6.56-.98.39-.7-.3-1.43-.45-2.16-.45-2.17 0-4.14 1.29-5.02 3.27-.09.19-.08.41 0 .6.09.2.27.36.48.43 1.09.34 2.24.56 3.43.65.41.03.72.39.69.8-.03.39-.41.72-.8.72Z"},"children":[]},{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M10.72 18.28c.14.14.33.22.53.22v-.01c.08 0 .16-.01.24-.04l2.46-.85c.25-.09.48-.23.67-.42l3.3-3.3c.78-.78.77-2.03 0-2.81-.78-.77-2.04-.77-2.81 0l-3.3 3.3c-.19.19-.34.42-.42.67l-.85 2.46c-.09.28-.02.58.18.78Zm5.45-6.14c.1-.09.22-.14.34-.14l-.01-.01c.13 0 .25.05.35.15.19.19.19.49 0 .68l-3.3 3.3a.18.18 0 0 1-.09.06l-1 .35.35-1c.01-.03.03-.06.06-.09l3.3-3.3Z"},"children":[]}],"metadata":""}]},"name":"show-author"};
+
+export default ShowAuthor;

package/src/icons/ast/TextToolAlignBottom.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const TextToolAlignBottom: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M1.5 11a.75.75 0 0 1 .75-.75h15.5a.75.75 0 0 1 0 1.5H2.25A.75.75 0 0 1 1.5 11Zm0 5a.75.75 0 0 1 .75-.75h15.5a.75.75 0 0 1 0 1.5H2.25A.75.75 0 0 1 1.5 16Z"},"children":[]}],"metadata":""}]},"name":"text-tool-align-bottom"};
+
+export default TextToolAlignBottom;

package/src/icons/ast/TextToolAlignMiddle.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const TextToolAlignMiddle: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M1.5 7.5a.75.75 0 0 1 .75-.75h15.5a.75.75 0 0 1 0 1.5H2.25a.75.75 0 0 1-.75-.75Zm0 5a.75.75 0 0 1 .75-.75h15.5a.75.75 0 0 1 0 1.5H2.25a.75.75 0 0 1-.75-.75Z"},"children":[]}],"metadata":""}]},"name":"text-tool-align-middle"};
+
+export default TextToolAlignMiddle;

package/src/icons/ast/TextToolAlignTop.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const TextToolAlignTop: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M1.5 4a.75.75 0 0 1 .75-.75h15.5a.75.75 0 0 1 0 1.5H2.25A.75.75 0 0 1 1.5 4Zm0 5a.75.75 0 0 1 .75-.75h15.5a.75.75 0 0 1 0 1.5H2.25A.75.75 0 0 1 1.5 9Z"},"children":[]}],"metadata":""}]},"name":"text-tool-align-top"};
+
+export default TextToolAlignTop;

package/src/icons/ast/UnitsFieldIconButton.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UnitsFieldIconButton: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M5 12.75A2.25 2.25 0 0 0 7.25 15h5.5A2.25 2.25 0 0 0 15 12.75v-5.5A2.25 2.25 0 0 0 12.75 5h-5.5A2.25 2.25 0 0 0 5 7.25v5.5Zm1.5 0c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-5.5a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v5.5Zm3-4.25a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1h1a1 1 0 0 0 1-1v-1a1 1 0 0 0-1-1h-1Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"units-field-icon-button"};
+
+export default UnitsFieldIconButton;

package/src/icons/ast/UnlockFilled.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UnlockFilled: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M14 1c-1.363 0-2.425.5-3.11 1.483-.654.934-.89 2.196-.89 3.577v.77H4.75c-.706 0-1.406.2-1.937.691C2.273 8.021 2 8.737 2 9.58v5.67C2 16.744 3.107 18 4.75 18h8.5c.307 0 .622-.106.882-.228.277-.13.564-.313.827-.536.5-.426 1.041-1.116 1.041-1.986V9.58c0-.842-.271-1.558-.811-2.058-.53-.492-1.232-.692-1.939-.692h-1.739v-.77c0-1.245.221-2.127.608-2.68.354-.506.914-.836 1.881-.836s1.527.33 1.88.836c.38.543.524 1.208.578 1.874.033.412.363.746.776.746.42 0 .764-.344.732-.764-.073-.974-.29-1.943-.855-2.753C16.424 1.5 15.363 1 14 1ZM9.75 11.25a.75.75 0 0 0-1.5 0v2.25a.75.75 0 0 0 1.5 0v-2.25Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"unlock-filled"};
+
+export default UnlockFilled;

package/src/icons/ast/UnlockOutline.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UnlockOutline: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"width":20,"height":20,"fill":"none"},"children":[{"type":"element","tagName":"path","properties":{"fillRule":"evenodd","clipRule":"evenodd","d":"M14 1c-1.363 0-2.425.5-3.11 1.483-.654.934-.89 2.196-.89 3.577v.77H4.75c-.706 0-1.406.2-1.937.691C2.273 8.021 2 8.737 2 9.58v5.67C2 16.744 3.107 18 4.75 18h8.5c.307 0 .622-.106.882-.228.277-.13.564-.313.827-.536.5-.426 1.041-1.116 1.041-1.986V9.58c0-.842-.271-1.558-.811-2.058-.53-.492-1.232-.692-1.939-.692h-1.739v-.77c0-1.245.221-2.127.608-2.68.354-.506.914-.836 1.881-.836s1.527.33 1.88.836c.391.559.532 1.246.582 1.932.03.413.36.748.775.748.42 0 .763-.343.734-.761-.07-.996-.282-1.989-.86-2.816C16.424 1.5 15.363 1 14 1ZM3.832 8.623c-.175.161-.332.445-.332.957v5.67c0 .715.484 1.25 1.25 1.25h8.502c.017-.004.099-.018.242-.086.155-.072.33-.183.493-.321.35-.298.513-.608.513-.843V9.58c0-.513-.157-.797-.33-.958-.184-.17-.484-.292-.92-.292h-8.5c-.434 0-.734.122-.918.293ZM9.75 11.25a.75.75 0 0 0-1.5 0v2.25a.75.75 0 0 0 1.5 0v-2.25Z","fill":"currentColor"},"children":[]}],"metadata":""}]},"name":"unlock-outline"};
+
+export default UnlockOutline;

package/src/icons/ast/index.tsx

@@ -65,6 +65,7 @@ export { default as ColorCoding } from './ColorCoding';
 export { default as Columns2 } from './Columns2';
 export { default as Columns4 } from './Columns4';
 export { default as Columns } from './Columns';
+export { default as CommentBubble } from './CommentBubble';
 export { default as Copy } from './Copy';
 export { default as Create } from './Create';
 export { default as DatabaseStroke } from './DatabaseStroke';
@@ -78,9 +79,11 @@ export { default as DragBlockHandle } from './DragBlockHandle';
 export { default as DragHandle } from './DragHandle';
 export { default as Duplicate } from './Duplicate';
 export { default as DynamicFilterValue } from './DynamicFilterValue';
+export { default as EditValue } from './EditValue';
 export { default as Email } from './Email';
 export { default as EmojiDelete } from './EmojiDelete';
 export { default as EntityMerge } from './EntityMerge';
+export { default as Equation } from './Equation';
 export { default as Export } from './Export';
 export { default as ExtensionAssignments } from './ExtensionAssignments';
 export { default as ExtensionAvatar } from './ExtensionAvatar';
@@ -141,6 +144,7 @@ export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
 export { default as Link } from './Link';
+export { default as LockOutline } from './LockOutline';
 export { default as Lock } from './Lock';
 export { default as Loom } from './Loom';
 export { default as LoupeZoomIn } from './LoupeZoomIn';
@@ -247,6 +251,7 @@ export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as Shared } from './Shared';
 export { default as ShieldKeyhole } from './ShieldKeyhole';
+export { default as ShowAuthor } from './ShowAuthor';
 export { default as SidebarFieldsOpened } from './SidebarFieldsOpened';
 export { default as SidebarFields } from './SidebarFields';
 export { default as Sidebar } from './Sidebar';
@@ -264,6 +269,9 @@ export { default as Spinner } from './Spinner';
 export { default as Success } from './Success';
 export { default as Templates } from './Templates';
 export { default as Terminal } from './Terminal';
+export { default as TextToolAlignBottom } from './TextToolAlignBottom';
+export { default as TextToolAlignMiddle } from './TextToolAlignMiddle';
+export { default as TextToolAlignTop } from './TextToolAlignTop';
 export { default as Twitter } from './Twitter';
 export { default as TypeBoolean } from './TypeBoolean';
 export { default as TypeButton } from './TypeButton';
@@ -292,12 +300,15 @@ export { default as UnitsCounter } from './UnitsCounter';
 export { default as UnitsDbBadgeAbbr } from './UnitsDbBadgeAbbr';
 export { default as UnitsDbBadgeFull } from './UnitsDbBadgeFull';
 export { default as UnitsDbIcon } from './UnitsDbIcon';
+export { default as UnitsFieldIconButton } from './UnitsFieldIconButton';
 export { default as UnitsField } from './UnitsField';
 export { default as UnitsInput } from './UnitsInput';
 export { default as UnitsProgressBar } from './UnitsProgressBar';
 export { default as UnitsRichText } from './UnitsRichText';
 export { default as UnitsSnippet } from './UnitsSnippet';
 export { default as Unlink } from './Unlink';
+export { default as UnlockFilled } from './UnlockFilled';
+export { default as UnlockOutline } from './UnlockOutline';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
 export { default as UserRole } from './UserRole';

package/src/icons/react/CommentBubble.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import CommentBubbleSvg from '../ast/CommentBubble';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const CommentBubble = forwardRef<SVGSVGElement, IconBaseProps>(function CommentBubble(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={CommentBubbleSvg} />});
+
+export default CommentBubble;

package/src/icons/react/EditValue.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import EditValueSvg from '../ast/EditValue';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const EditValue = forwardRef<SVGSVGElement, IconBaseProps>(function EditValue(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={EditValueSvg} />});
+
+export default EditValue;

package/src/icons/react/Equation.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import EquationSvg from '../ast/Equation';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const Equation = forwardRef<SVGSVGElement, IconBaseProps>(function Equation(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={EquationSvg} />});
+
+export default Equation;

package/src/icons/react/LockOutline.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import LockOutlineSvg from '../ast/LockOutline';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const LockOutline = forwardRef<SVGSVGElement, IconBaseProps>(function LockOutline(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={LockOutlineSvg} />});
+
+export default LockOutline;

package/src/icons/react/ShowAuthor.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import ShowAuthorSvg from '../ast/ShowAuthor';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const ShowAuthor = forwardRef<SVGSVGElement, IconBaseProps>(function ShowAuthor(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={ShowAuthorSvg} />});
+
+export default ShowAuthor;

package/src/icons/react/TextToolAlignBottom.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import TextToolAlignBottomSvg from '../ast/TextToolAlignBottom';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const TextToolAlignBottom = forwardRef<SVGSVGElement, IconBaseProps>(function TextToolAlignBottom(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={TextToolAlignBottomSvg} />});
+
+export default TextToolAlignBottom;

package/src/icons/react/TextToolAlignMiddle.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import TextToolAlignMiddleSvg from '../ast/TextToolAlignMiddle';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const TextToolAlignMiddle = forwardRef<SVGSVGElement, IconBaseProps>(function TextToolAlignMiddle(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={TextToolAlignMiddleSvg} />});
+
+export default TextToolAlignMiddle;

package/src/icons/react/TextToolAlignTop.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import TextToolAlignTopSvg from '../ast/TextToolAlignTop';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const TextToolAlignTop = forwardRef<SVGSVGElement, IconBaseProps>(function TextToolAlignTop(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={TextToolAlignTopSvg} />});
+
+export default TextToolAlignTop;

package/src/icons/react/UnitsFieldIconButton.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import UnitsFieldIconButtonSvg from '../ast/UnitsFieldIconButton';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnitsFieldIconButton = forwardRef<SVGSVGElement, IconBaseProps>(function UnitsFieldIconButton(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={UnitsFieldIconButtonSvg} />});
+
+export default UnitsFieldIconButton;

package/src/icons/react/UnlockFilled.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import UnlockFilledSvg from '../ast/UnlockFilled';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnlockFilled = forwardRef<SVGSVGElement, IconBaseProps>(function UnlockFilled(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={UnlockFilledSvg} />});
+
+export default UnlockFilled;

package/src/icons/react/UnlockOutline.tsx

@@ -0,0 +1,13 @@
+// This icon file is generated automatically.
+
+import {forwardRef} from 'react';
+import UnlockOutlineSvg from '../ast/UnlockOutline';
+import { Icon } from '../Icon';
+import { IconBaseProps } from '../types';
+
+const UnlockOutline = forwardRef<SVGSVGElement, IconBaseProps>(function UnlockOutline(
+  props: IconBaseProps,
+  ref: React.Ref<SVGSVGElement>
+) {return <Icon {...props} className={props.className} ref={ref} icon={UnlockOutlineSvg} />});
+
+export default UnlockOutline;

package/src/icons/react/index.tsx

@@ -65,6 +65,7 @@ export { default as ColorCoding } from './ColorCoding';
 export { default as Columns2 } from './Columns2';
 export { default as Columns4 } from './Columns4';
 export { default as Columns } from './Columns';
+export { default as CommentBubble } from './CommentBubble';
 export { default as Copy } from './Copy';
 export { default as Create } from './Create';
 export { default as DatabaseStroke } from './DatabaseStroke';
@@ -78,9 +79,11 @@ export { default as DragBlockHandle } from './DragBlockHandle';
 export { default as DragHandle } from './DragHandle';
 export { default as Duplicate } from './Duplicate';
 export { default as DynamicFilterValue } from './DynamicFilterValue';
+export { default as EditValue } from './EditValue';
 export { default as Email } from './Email';
 export { default as EmojiDelete } from './EmojiDelete';
 export { default as EntityMerge } from './EntityMerge';
+export { default as Equation } from './Equation';
 export { default as Export } from './Export';
 export { default as ExtensionAssignments } from './ExtensionAssignments';
 export { default as ExtensionAvatar } from './ExtensionAvatar';
@@ -141,6 +144,7 @@ export { default as LeftPanel } from './LeftPanel';
 export { default as Levels } from './Levels';
 export { default as LineDivider } from './LineDivider';
 export { default as Link } from './Link';
+export { default as LockOutline } from './LockOutline';
 export { default as Lock } from './Lock';
 export { default as Loom } from './Loom';
 export { default as LoupeZoomIn } from './LoupeZoomIn';
@@ -247,6 +251,7 @@ export { default as Settings } from './Settings';
 export { default as Share } from './Share';
 export { default as Shared } from './Shared';
 export { default as ShieldKeyhole } from './ShieldKeyhole';
+export { default as ShowAuthor } from './ShowAuthor';
 export { default as SidebarFieldsOpened } from './SidebarFieldsOpened';
 export { default as SidebarFields } from './SidebarFields';
 export { default as Sidebar } from './Sidebar';
@@ -264,6 +269,9 @@ export { default as Spinner } from './Spinner';
 export { default as Success } from './Success';
 export { default as Templates } from './Templates';
 export { default as Terminal } from './Terminal';
+export { default as TextToolAlignBottom } from './TextToolAlignBottom';
+export { default as TextToolAlignMiddle } from './TextToolAlignMiddle';
+export { default as TextToolAlignTop } from './TextToolAlignTop';
 export { default as Twitter } from './Twitter';
 export { default as TypeBoolean } from './TypeBoolean';
 export { default as TypeButton } from './TypeButton';
@@ -292,12 +300,15 @@ export { default as UnitsCounter } from './UnitsCounter';
 export { default as UnitsDbBadgeAbbr } from './UnitsDbBadgeAbbr';
 export { default as UnitsDbBadgeFull } from './UnitsDbBadgeFull';
 export { default as UnitsDbIcon } from './UnitsDbIcon';
+export { default as UnitsFieldIconButton } from './UnitsFieldIconButton';
 export { default as UnitsField } from './UnitsField';
 export { default as UnitsInput } from './UnitsInput';
 export { default as UnitsProgressBar } from './UnitsProgressBar';
 export { default as UnitsRichText } from './UnitsRichText';
 export { default as UnitsSnippet } from './UnitsSnippet';
 export { default as Unlink } from './Unlink';
+export { default as UnlockFilled } from './UnlockFilled';
+export { default as UnlockOutline } from './UnlockOutline';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
 export { default as UserRole } from './UserRole';

package/src/select/styles.ts

@@ -34,7 +34,7 @@ function createControlStyle({
       minHeight: layout.inputHeight,
       ...(state.isFocused && inputOverrides.focus),
       ...(state.isDisabled && inputOverrides.disabled),
-      ":hover": !state.isFocused && !state.isDisabled ? inputOverrides.hover : {},
+      "&:hover": !state.isFocused && !state.isDisabled ? inputOverrides.hover : {},
       paddingLeft: space.s10,
       paddingRight: space.s12,
       "& > div": childDivStyle,

package/src/theme-styles.ts

@@ -4,12 +4,12 @@ const lightTheme = getThemeColors(colors.brandColors.blue, "light");
 const darkTheme = getThemeColors(colors.brandColors.blue, "dark");
 
 export const themeStyles = css`
-  :global(html) {
-    &:root {
+  :global() {
+    html:root {
       ${createInlineTheme(lightTheme, [])}
-    }
-    &.dark-theme:root {
-      ${createInlineTheme(darkTheme, [])}
+      &.dark-theme {
+        ${createInlineTheme(darkTheme, [])}
+      }
     }
   }
 `;

package/src/toggle.tsx

@@ -168,7 +168,14 @@ export const Toggle: FC<ToggleProps> = ({
           <Input
             outlineColor={outlineColor}
             onChange={onChange}
-            className={className}
+            className={cx(
+              className,
+              disabled
+                ? css`
+                    cursor: default;
+                  `
+                : null
+            )}
             type="checkbox"
             disabled={disabled}
             checked={value}

package/src/tooltip.tsx

@@ -31,31 +31,29 @@ export const tooltipStyle = css`
   padding: ${space.s6}px ${space.s8}px;
   border-radius: ${border.radius6}px;
   box-shadow: ${themeVars.actionMenuShadow};
-
-  @media (prefers-reduced-motion: no-preference) {
-    @keyframes zoomIn {
-      from {
-        opacity: 0;
-        transform: scale(0.8);
-      }
-
-      to {
-        opacity: 1;
-        transform: scale(1);
-      }
+  @keyframes zoomIn {
+    from {
+      opacity: 0;
+      transform: scale(0.8);
     }
 
-    @keyframes zoomOut {
-      from {
-        transform: scale(1);
-      }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
 
-      to {
-        opacity: 0;
-        transform: scale(0.8);
-      }
+  @keyframes zoomOut {
+    from {
+      transform: scale(1);
     }
 
+    to {
+      opacity: 0;
+      transform: scale(0.8);
+    }
+  }
+  @media (prefers-reduced-motion: no-preference) {
     will-change: transform, opacity;
     transform-origin: var(--radix-tooltip-content-transform-origin);
     animation-duration: 0.1s;