@uipath/apollo-react 4.10.0 → 4.11.0

package/dist/canvas/styles/variables.css

@@ -6,6 +6,7 @@ body.light, body.dark, body.light-hc, body.dark-hc {
   --canvas-background: var(--color-background);
   --canvas-background-secondary: var(--color-background-secondary);
   --canvas-background-raised: var(--color-background-raised);
+  --canvas-background-overlay: var(--color-background-selected);
   --canvas-background-hover: var(--color-background-hover);
   --canvas-background-inverse: var(--color-background-inverse);
   --canvas-border: var(--color-border);
@@ -31,6 +32,13 @@ body.light, body.dark, body.light-hc, body.dark-hc {
   --canvas-info-icon: var(--color-info-icon);
   --canvas-info-text: var(--color-info-text);
   --canvas-icon-default: var(--color-icon-default);
+  --canvas-node-shadow-rest: 0 2px 8px #0000002e;
+  --canvas-node-shadow-hover: 0 4px 16px #0000005c;
+  --canvas-node-shadow-lifted: 0 16px 48px #000000b8, 0 4px 16px #0006;
+}
+
+body.light, body.light-hc {
+  --canvas-node-shadow-lifted: 0 8px 24px #0000001f, 0 2px 8px #0000000f;
 }
 
 .future-light, .future-dark, .wireframe, .vertex, .canvas {
@@ -41,6 +49,7 @@ body.light, body.dark, body.light-hc, body.dark-hc {
   --canvas-background: var(--surface);
   --canvas-background-secondary: var(--background);
   --canvas-background-raised: var(--surface-raised);
+  --canvas-background-overlay: var(--surface-overlay);
   --canvas-background-hover: var(--surface-hover);
   --canvas-background-inverse: var(--surface-inverse);
   --canvas-border: var(--ap-wind-border);
@@ -66,5 +75,12 @@ body.light, body.dark, body.light-hc, body.dark-hc {
   --canvas-info-icon: var(--info, var(--color-sky-500));
   --canvas-info-text: var(--info, var(--color-sky-500));
   --canvas-icon-default: var(--foreground-muted);
+  --canvas-node-shadow-rest: 0 2px 8px #0000002e;
+  --canvas-node-shadow-hover: 0 4px 16px #0000005c;
+  --canvas-node-shadow-lifted: 0 16px 48px #000000b8, 0 4px 16px #0006;
+}
+
+.future-light, .wireframe {
+  --canvas-node-shadow-lifted: 0 8px 24px #0000001f, 0 2px 8px #0000000f;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-react",
-  "version": "4.10.0",
+  "version": "4.11.0",
   "description": "Apollo Design System - React component library with Material UI theming",
   "repository": {
     "type": "git",

package/dist/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.styles.cjs

@@ -1,70 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    StyledEdgeToolbarContainer: ()=>StyledEdgeToolbarContainer,
-    StyledEdgeToolbarContent: ()=>StyledEdgeToolbarContent
-});
-const styled_namespaceObject = require("@emotion/styled");
-var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
-const react_namespaceObject = require("motion/react");
-const StyledEdgeToolbarContainer = styled_default()(react_namespaceObject.motion.div)`
-  position: absolute;
-  pointer-events: auto;
-  z-index: 1000;
-  top: 0;
-  left: 0;
-`;
-const StyledEdgeToolbarContent = styled_default().div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-  padding: 2px;
-  background: var(--canvas-background);
-  border: 1px solid var(--canvas-border-grid);
-  border-radius: 8px;
-  box-shadow:
-    0 2px 8px rgba(0, 0, 0, 0.08),
-    0 1px 2px rgba(0, 0, 0, 0.04);
-`;
-exports.StyledEdgeToolbarContainer = __webpack_exports__.StyledEdgeToolbarContainer;
-exports.StyledEdgeToolbarContent = __webpack_exports__.StyledEdgeToolbarContent;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "StyledEdgeToolbarContainer",
-    "StyledEdgeToolbarContent"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.styles.d.ts

@@ -1,8 +0,0 @@
-export declare const StyledEdgeToolbarContainer: import("@emotion/styled").StyledComponent<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
-export declare const StyledEdgeToolbarContent: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-//# sourceMappingURL=EdgeToolbar.styles.d.ts.map

package/dist/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"EdgeToolbar.styles.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,0BAA0B;;UAMtC,CAAC;AAEF,eAAO,MAAM,wBAAwB;;;yGAYpC,CAAC"}

package/dist/canvas/components/Toolbar/EdgeToolbar/EdgeToolbar.styles.js

@@ -1,23 +0,0 @@
-import styled from "@emotion/styled";
-import { motion } from "motion/react";
-const StyledEdgeToolbarContainer = styled(motion.div)`
-  position: absolute;
-  pointer-events: auto;
-  z-index: 1000;
-  top: 0;
-  left: 0;
-`;
-const StyledEdgeToolbarContent = styled.div`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 4px;
-  padding: 2px;
-  background: var(--canvas-background);
-  border: 1px solid var(--canvas-border-grid);
-  border-radius: 8px;
-  box-shadow:
-    0 2px 8px rgba(0, 0, 0, 0.08),
-    0 1px 2px rgba(0, 0, 0, 0.04);
-`;
-export { StyledEdgeToolbarContainer, StyledEdgeToolbarContent };

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.styles.cjs

@@ -1,236 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    StyledOverflowContainer: ()=>StyledOverflowContainer,
-    StyledToolbarContainer: ()=>StyledToolbarContainer,
-    StyledDropdownItem: ()=>StyledDropdownItem,
-    StyledToolbarSeparator: ()=>StyledToolbarSeparator,
-    StyledDropdownMenu: ()=>StyledDropdownMenu
-});
-const styled_namespaceObject = require("@emotion/styled");
-var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
-const react_namespaceObject = require("motion/react");
-const StyledToolbarContainer = styled_default()(react_namespaceObject.motion.div, {
-    shouldForwardProp: (prop)=>!prop.startsWith('$')
-})`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px;
-  background: var(--canvas-background);
-  border: 1px solid var(--canvas-border-grid);
-  border-radius: 8px;
-  box-shadow:
-    0 2px 8px rgba(0, 0, 0, 0.08),
-    0 1px 2px rgba(0, 0, 0, 0.04);
-  pointer-events: auto;
-  z-index: 10;
-
-  ${({ $position, $align = 'center' })=>{
-    switch($position){
-        case 'top':
-            switch($align){
-                case 'start':
-                    return `
-              top: -40px;
-              left: 0;
-              flex-direction: row;
-            `;
-                case 'end':
-                    return `
-              top: -40px;
-              right: 0;
-              flex-direction: row;
-            `;
-                case 'center':
-                default:
-                    return `
-              top: -40px;
-              left: 0;
-              right: 0;
-              margin: 0 auto;
-              width: fit-content;
-              flex-direction: row;
-            `;
-            }
-        case 'bottom':
-            switch($align){
-                case 'start':
-                    return `
-              bottom: -40px;
-              left: 0;
-              flex-direction: row;
-            `;
-                case 'end':
-                    return `
-              bottom: -40px;
-              right: 0;
-              flex-direction: row;
-            `;
-                case 'center':
-                default:
-                    return `
-              bottom: -40px;
-              left: 0;
-              right: 0;
-              margin: 0 auto;
-              width: fit-content;
-              flex-direction: row;
-            `;
-            }
-        case 'left':
-            switch($align){
-                case 'start':
-                    return `
-              left: -40px;
-              top: 0;
-              flex-direction: column;
-            `;
-                case 'end':
-                    return `
-              left: -40px;
-              bottom: 0;
-              flex-direction: column;
-            `;
-                case 'center':
-                default:
-                    return `
-              left: -40px;
-              top: 0;
-              bottom: 0;
-              margin: auto 0;
-              height: fit-content;
-              flex-direction: column;
-            `;
-            }
-        case 'right':
-            switch($align){
-                case 'start':
-                    return `
-              right: -40px;
-              top: 0;
-              flex-direction: column;
-            `;
-                case 'end':
-                    return `
-              right: -40px;
-              bottom: 0;
-              flex-direction: column;
-            `;
-                case 'center':
-                default:
-                    return `
-              right: -40px;
-              top: 0;
-              bottom: 0;
-              margin: auto 0;
-              height: fit-content;
-              flex-direction: column;
-            `;
-            }
-    }
-}}
-`;
-const StyledToolbarSeparator = styled_default().div`
-  width: ${({ $orientation })=>'vertical' === $orientation ? '1px' : 'calc(100%)'};
-  height: ${({ $orientation })=>'horizontal' === $orientation ? '1px' : '20px'};
-  background: var(--canvas-border-grid);
-  align-self: center;
-`;
-const StyledDropdownMenu = styled_default()(react_namespaceObject.motion.div)`
-  position: absolute;
-  top: -2px;
-  left: calc(100% + 4px);
-  min-width: 180px;
-  background: var(--canvas-background);
-  border: 1px solid var(--canvas-border-subtle);
-  border-radius: 6px;
-  box-shadow:
-    0 4px 12px rgba(0, 0, 0, 0.08),
-    0 2px 4px rgba(0, 0, 0, 0.04);
-  padding: 4px;
-  z-index: 1000;
-  pointer-events: auto;
-`;
-const StyledDropdownItem = styled_default().button`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding: 8px 12px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: ${({ $disabled })=>$disabled ? 'not-allowed' : 'pointer'};
-  opacity: ${({ $disabled })=>$disabled ? 0.4 : 1};
-  transition: background 0.15s ease;
-  font-size: 14px;
-  color: var(--canvas-foreground);
-  text-align: left;
-  pointer-events: ${({ $disabled })=>$disabled ? 'none' : 'auto'};
-
-  &:hover:not(:disabled) {
-    background: var(--canvas-background-secondary);
-  }
-
-  svg {
-    flex-shrink: 0;
-    color: var(--canvas-foreground);
-  }
-
-  span {
-    flex: 1;
-    color: var(--canvas-foreground);
-  }
-`;
-const StyledOverflowContainer = styled_default().div`
-  position: relative;
-`;
-exports.StyledDropdownItem = __webpack_exports__.StyledDropdownItem;
-exports.StyledDropdownMenu = __webpack_exports__.StyledDropdownMenu;
-exports.StyledOverflowContainer = __webpack_exports__.StyledOverflowContainer;
-exports.StyledToolbarContainer = __webpack_exports__.StyledToolbarContainer;
-exports.StyledToolbarSeparator = __webpack_exports__.StyledToolbarSeparator;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "StyledDropdownItem",
-    "StyledDropdownMenu",
-    "StyledOverflowContainer",
-    "StyledToolbarContainer",
-    "StyledToolbarSeparator"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.styles.d.ts

@@ -1,26 +0,0 @@
-export declare const StyledToolbarContainer: import("@emotion/styled").StyledComponent<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme;
-} & {
-    $position: "top" | "bottom" | "left" | "right";
-    $align?: "start" | "center" | "end";
-}, {}, {}>;
-export declare const StyledToolbarSeparator: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    $orientation: "horizontal" | "vertical";
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StyledDropdownMenu: import("@emotion/styled").StyledComponent<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
-    theme?: import("@emotion/react").Theme;
-}, {}, {}>;
-export declare const StyledDropdownItem: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-} & {
-    $disabled?: boolean;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
-export declare const StyledOverflowContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-//# sourceMappingURL=NodeToolbar.styles.d.ts.map

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.styles.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NodeToolbar.styles.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/Toolbar/NodeToolbar/NodeToolbar.styles.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,sBAAsB;;;eAGtB,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO;aACrC,OAAO,GAAG,QAAQ,GAAG,KAAK;UAwHpC,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;kBAA8B,YAAY,GAAG,UAAU;yGAKzF,CAAC;AAEF,eAAO,MAAM,kBAAkB;;UAc9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;gBACjB,OAAO;qHA+BpB,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;yGAEnC,CAAC"}

package/dist/canvas/components/Toolbar/NodeToolbar/NodeToolbar.styles.js

@@ -1,180 +0,0 @@
-import styled from "@emotion/styled";
-import { motion } from "motion/react";
-const StyledToolbarContainer = styled(motion.div, {
-    shouldForwardProp: (prop)=>!prop.startsWith('$')
-})`
-  position: absolute;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 2px;
-  background: var(--canvas-background);
-  border: 1px solid var(--canvas-border-grid);
-  border-radius: 8px;
-  box-shadow:
-    0 2px 8px rgba(0, 0, 0, 0.08),
-    0 1px 2px rgba(0, 0, 0, 0.04);
-  pointer-events: auto;
-  z-index: 10;
-
-  ${({ $position, $align = 'center' })=>{
-    switch($position){
-        case 'top':
-            switch($align){
-                case 'start':
-                    return `
-              top: -40px;
-              left: 0;
-              flex-direction: row;
-            `;
-                case 'end':
-                    return `
-              top: -40px;
-              right: 0;
-              flex-direction: row;
-            `;
-                case 'center':
-                default:
-                    return `
-              top: -40px;
-              left: 0;
-              right: 0;
-              margin: 0 auto;
-              width: fit-content;
-              flex-direction: row;
-            `;
-            }
-        case 'bottom':
-            switch($align){
-                case 'start':
-                    return `
-              bottom: -40px;
-              left: 0;
-              flex-direction: row;
-            `;
-                case 'end':
-                    return `
-              bottom: -40px;
-              right: 0;
-              flex-direction: row;
-            `;
-                case 'center':
-                default:
-                    return `
-              bottom: -40px;
-              left: 0;
-              right: 0;
-              margin: 0 auto;
-              width: fit-content;
-              flex-direction: row;
-            `;
-            }
-        case 'left':
-            switch($align){
-                case 'start':
-                    return `
-              left: -40px;
-              top: 0;
-              flex-direction: column;
-            `;
-                case 'end':
-                    return `
-              left: -40px;
-              bottom: 0;
-              flex-direction: column;
-            `;
-                case 'center':
-                default:
-                    return `
-              left: -40px;
-              top: 0;
-              bottom: 0;
-              margin: auto 0;
-              height: fit-content;
-              flex-direction: column;
-            `;
-            }
-        case 'right':
-            switch($align){
-                case 'start':
-                    return `
-              right: -40px;
-              top: 0;
-              flex-direction: column;
-            `;
-                case 'end':
-                    return `
-              right: -40px;
-              bottom: 0;
-              flex-direction: column;
-            `;
-                case 'center':
-                default:
-                    return `
-              right: -40px;
-              top: 0;
-              bottom: 0;
-              margin: auto 0;
-              height: fit-content;
-              flex-direction: column;
-            `;
-            }
-    }
-}}
-`;
-const StyledToolbarSeparator = styled.div`
-  width: ${({ $orientation })=>'vertical' === $orientation ? '1px' : 'calc(100%)'};
-  height: ${({ $orientation })=>'horizontal' === $orientation ? '1px' : '20px'};
-  background: var(--canvas-border-grid);
-  align-self: center;
-`;
-const StyledDropdownMenu = styled(motion.div)`
-  position: absolute;
-  top: -2px;
-  left: calc(100% + 4px);
-  min-width: 180px;
-  background: var(--canvas-background);
-  border: 1px solid var(--canvas-border-subtle);
-  border-radius: 6px;
-  box-shadow:
-    0 4px 12px rgba(0, 0, 0, 0.08),
-    0 2px 4px rgba(0, 0, 0, 0.04);
-  padding: 4px;
-  z-index: 1000;
-  pointer-events: auto;
-`;
-const StyledDropdownItem = styled.button`
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-  padding: 8px 12px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  cursor: ${({ $disabled })=>$disabled ? 'not-allowed' : 'pointer'};
-  opacity: ${({ $disabled })=>$disabled ? 0.4 : 1};
-  transition: background 0.15s ease;
-  font-size: 14px;
-  color: var(--canvas-foreground);
-  text-align: left;
-  pointer-events: ${({ $disabled })=>$disabled ? 'none' : 'auto'};
-
-  &:hover:not(:disabled) {
-    background: var(--canvas-background-secondary);
-  }
-
-  svg {
-    flex-shrink: 0;
-    color: var(--canvas-foreground);
-  }
-
-  span {
-    flex: 1;
-    color: var(--canvas-foreground);
-  }
-`;
-const StyledOverflowContainer = styled.div`
-  position: relative;
-`;
-export { StyledDropdownItem, StyledDropdownMenu, StyledOverflowContainer, StyledToolbarContainer, StyledToolbarSeparator };

package/dist/canvas/components/Toolbar/shared/ToolbarButton.styles.cjs

@@ -1,78 +0,0 @@
-"use strict";
-var __webpack_require__ = {};
-(()=>{
-    __webpack_require__.n = (module)=>{
-        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
-        __webpack_require__.d(getter, {
-            a: getter
-        });
-        return getter;
-    };
-})();
-(()=>{
-    __webpack_require__.d = (exports1, definition)=>{
-        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
-            enumerable: true,
-            get: definition[key]
-        });
-    };
-})();
-(()=>{
-    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
-})();
-(()=>{
-    __webpack_require__.r = (exports1)=>{
-        if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
-            value: 'Module'
-        });
-        Object.defineProperty(exports1, '__esModule', {
-            value: true
-        });
-    };
-})();
-var __webpack_exports__ = {};
-__webpack_require__.r(__webpack_exports__);
-__webpack_require__.d(__webpack_exports__, {
-    StyledToolbarButton: ()=>StyledToolbarButton
-});
-const styled_namespaceObject = require("@emotion/styled");
-var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
-const react_namespaceObject = require("motion/react");
-const StyledToolbarButton = styled_default()(react_namespaceObject.motion.button, {
-    shouldForwardProp: (prop)=>!prop.startsWith('$')
-})`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  background: ${({ $isToggled, $hoverColor })=>$isToggled && ($hoverColor || 'var(--canvas-background-secondary)') || 'transparent'};
-  border: none;
-  border-radius: 8px;
-  cursor: ${({ $disabled })=>$disabled ? 'not-allowed' : 'pointer'};
-  opacity: ${({ $disabled })=>$disabled ? 0.4 : 1};
-  transition:
-    background 0.15s ease,
-    opacity 0.15s ease;
-  pointer-events: ${({ $disabled })=>$disabled ? 'none' : 'auto'};
-
-  &:hover:not(:disabled) {
-    background: ${({ $hoverColor })=>$hoverColor || 'var(--canvas-background-secondary)'};
-  }
-
-  &:active:not(:disabled) {
-    transform: scale(0.95);
-  }
-
-  svg {
-    color: ${({ $color })=>$color || 'var(--canvas-foreground)'};
-  }
-`;
-exports.StyledToolbarButton = __webpack_exports__.StyledToolbarButton;
-for(var __rspack_i in __webpack_exports__)if (-1 === [
-    "StyledToolbarButton"
-].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
-Object.defineProperty(exports, '__esModule', {
-    value: true
-});

package/dist/canvas/components/Toolbar/shared/ToolbarButton.styles.d.ts

@@ -1,9 +0,0 @@
-export declare const StyledToolbarButton: import("@emotion/styled").StyledComponent<Omit<import("motion/react").HTMLMotionProps<"button">, "ref"> & import("react").RefAttributes<HTMLButtonElement> & {
-    theme?: import("@emotion/react").Theme;
-} & {
-    $disabled?: boolean;
-    $isToggled?: boolean;
-    $color?: string;
-    $hoverColor?: string;
-}, {}, {}>;
-//# sourceMappingURL=ToolbarButton.styles.d.ts.map