@fibery/ui-kit 1.34.1 → 1.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.34.1",
+  "version": "1.34.2",
   "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",
@@ -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

@@ -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/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;
@@ -342,14 +342,14 @@ export const themeColors = {
   // :focus
   colorBgEntityBoxDefaultFocus: [whiteA.whiteA0, slateDark.slate3],
   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],
   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}`],
@@ -459,27 +459,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: [
@@ -621,13 +604,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 +616,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;

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/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/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/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,6 +79,7 @@ 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';
@@ -264,6 +266,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,6 +297,7 @@ 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';

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/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/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,6 +79,7 @@ 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';
@@ -264,6 +266,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,6 +297,7 @@ 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';

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, [])}
+      }
     }
   }
 `;