@cube-dev/ui-kit 0.10.11 → 0.11.0

package/cjs/components/overlays/Tooltip/TooltipProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/Tooltip/TooltipTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/overlays/Tooltip/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/pickers/ComboBox/ComboBox.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/pickers/Menu/Menu.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 
@@ -24,7 +24,7 @@ const MenuItem_1 = require("./MenuItem");
 const MenuSection_1 = require("./MenuSection");
 const context_1 = require("./context");
 function Menu(props, ref) {
-    const { header, footer } = props;
+    const { header, footer, selectionIcon } = props;
     const domRef = (0, utils_2.useDOMRef)(ref);
     const contextProps = (0, context_1.useMenuContext)();
     const completeProps = (0, utils_1.mergeProps)(contextProps, props);
@@ -44,9 +44,9 @@ function Menu(props, ref) {
     (0, utils_1.useSyncRef)(contextProps, domRef);
     return ((0, jsx_runtime_1.jsxs)(styled_1.StyledMenu, { ...(0, utils_1.mergeProps)(menuProps, completeProps, baseProps), ref: domRef, children: [header && (0, jsx_runtime_1.jsx)(styled_1.StyledMenuHeader, { children: header }, void 0), items.map((item) => {
                 if (item.type === 'section') {
-                    return ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSection, { item: item, state: state, onAction: completeProps.onAction }, item.key));
+                    return ((0, jsx_runtime_1.jsx)(MenuSection_1.MenuSection, { item: item, state: state, selectionIcon: selectionIcon, onAction: completeProps.onAction }, item.key));
                 }
-                let menuItem = ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { item: item, state: state, onAction: completeProps.onAction }, item.key));
+                let menuItem = ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { item: item, state: state, selectionIcon: selectionIcon, onAction: completeProps.onAction }, item.key));
                 if (item.wrapper) {
                     menuItem = item.wrapper(menuItem);
                 }

package/cjs/components/pickers/Menu/MenuButton.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 
@@ -11,6 +11,7 @@ exports.MenuButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const actions_1 = require("../../actions");
 const Text_1 = require("../../content/Text");
+const tasty_1 = require("../../../tasty");
 const Space_1 = require("../../layout/Space");
 const icons_1 = require("@ant-design/icons");
 const ACTION_BUTTON = {
@@ -37,7 +38,8 @@ const ACTION_BUTTON = {
     shadow: '#clear',
     padding: {
         '': '(0.75x - 1px) (1.5x - 1px)',
-        'selectable & !selected': '(0.75x - 1px) (1.5x - 1px) (0.75x - 1px) (1.5x - 1px + 22px)',
+        'selectable & !selected': '(0.75x - 1px) (1.5x - 1px) (0.75x - 1px) (1.5x - 1px)',
+        'selectionIcon & selectable & !selected': '(0.75x - 1px) (1.5x - 1px) (0.75x - 1px) (1.5x - 1px + 22px)',
     },
     display: 'flex',
     flow: 'row',
@@ -51,12 +53,38 @@ const ACTION_BUTTON = {
         },
     },
 };
+const RadioIcon = (0, tasty_1.tasty)({
+    styles: {
+        display: 'flex',
+        width: '1.875x',
+        placeContent: 'center',
+        '&::before': {
+            display: 'block',
+            content: '""',
+            width: '1x',
+            height: '1x',
+            radius: 'round',
+            fill: '#current',
+        },
+    },
+});
 const getPostfix = (postfix) => typeof postfix === 'string' ? ((0, jsx_runtime_1.jsx)(Text_1.Text, { nowrap: true, color: "inherit", "data-element": "Postfix", children: postfix }, void 0)) : (postfix);
+const getSelectionTypeIcon = (selectionIcon) => {
+    switch (selectionIcon) {
+        case 'checkbox':
+            return (0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, {}, void 0);
+        case 'radio':
+            return (0, jsx_runtime_1.jsx)(RadioIcon, {}, void 0);
+        default:
+            return null;
+    }
+};
 function MenuButton({ children, icon, postfix, ...props }) {
-    const { isSelected, isSelectable } = props;
-    const checkIcon = isSelectable && isSelected ? (0, jsx_runtime_1.jsx)(icons_1.CheckOutlined, {}, void 0) : null;
+    const { selectionIcon, isSelected, isSelectable } = props;
+    const checkIcon = isSelectable && isSelected ? getSelectionTypeIcon(selectionIcon) : null;
     const mods = {
         ...props.mods,
+        selectionIcon: !!selectionIcon,
         selectable: isSelectable,
         selected: isSelected,
     };

package/cjs/components/pickers/Menu/MenuItem.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 
@@ -19,7 +19,7 @@ const styled_1 = require("./styled");
 const MenuButton_1 = require("./MenuButton");
 /** @private */
 function MenuItem(props) {
-    const { item, state, isVirtualized, onAction } = props;
+    const { item, state, selectionIcon, isVirtualized, onAction } = props;
     const { onClose, closeOnSelect } = (0, context_1.useMenuContext)();
     const { rendered, key, props: itemProps } = item;
     const isSelectable = state.selectionManager.selectionMode !== 'none';
@@ -37,7 +37,7 @@ function MenuItem(props) {
         isVirtualized,
         onAction,
     }, state, ref);
-    let contents = typeof rendered === 'string' ? ((0, jsx_runtime_1.jsx)(MenuButton_1.MenuButton, { ...itemProps, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0)) : (rendered);
+    let contents = typeof rendered === 'string' ? ((0, jsx_runtime_1.jsx)(MenuButton_1.MenuButton, { ...itemProps, selectionIcon: selectionIcon, isSelectable: isSelectable, isSelected: isSelected, isDisabled: isDisabled, children: rendered }, void 0)) : (rendered);
     return ((0, jsx_runtime_1.jsx)(focus_1.FocusRing, { children: (0, jsx_runtime_1.jsx)(styled_1.StyledMenuItem, { ...(0, react_2.mergeProps)(menuItemProps, hoverProps), ref: ref, mods: {
                 disabled: isDisabled,
                 selected: isSelected,

package/cjs/components/pickers/Menu/MenuSection.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/pickers/Menu/MenuTrigger.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/pickers/Menu/context.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/pickers/Menu/styled.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/pickers/Select/Select.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/Portal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/PortalProvider.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/storybook/templates/CustomRoot.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/storybook/templates/PortalOrder.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/storybook/templates/basic.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/storybook/templates/index.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/types.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/portal/usePortal.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/status/LoadingAnimation/LoadingAnimation.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 

package/cjs/components/status/LoadingAnimation/index.js

@@ -0,0 +1,14 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoadingAnimation = void 0;
+var LoadingAnimation_1 = require("./LoadingAnimation");
+Object.defineProperty(exports, "LoadingAnimation", { enumerable: true, get: function () { return LoadingAnimation_1.LoadingAnimation; } });
+
+        

package/cjs/components/status/Spin/Cube.js

@@ -0,0 +1,196 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Cube = void 0;
+const react_1 = require("react");
+const styled_components_1 = __importDefault(require("styled-components"));
+const fillByPosition = {
+    top: '#7a77ff',
+    right: '#727290',
+    bottom: '#ff6492',
+};
+exports.Cube = (0, react_1.memo)(styled_components_1.default.div.attrs(({ position }) => ({
+    role: 'presentation',
+    style: {
+        '--cube-spin-animation-name': `cube-spin-${position}`,
+        '--cube-spin-fill': fillByPosition[position],
+    },
+})) `
+  --cube-spin-cube-border-width: calc(4 / 100 * var(--cube-spin-size));
+  --cube-spin-cube-border-compensation: calc(
+    -1 * (var(--cube-spin-cube-border-width))
+  );
+  --cube-spin-cube-size: calc(
+    (100% - 2 * var(--cube-spin-cube-border-width)) / 2
+  );
+
+  box-sizing: content-box;
+  position: absolute;
+  top: var(--cube-spin-cube-border-compensation);
+  left: var(--cube-spin-cube-border-compensation);
+  width: var(--cube-spin-cube-size);
+  height: var(--cube-spin-cube-size);
+  border: var(--cube-spin-cube-border-width) solid transparent;
+  overflow: hidden;
+  contain: size layout style paint;
+  pointer-events: none;
+  user-select: none;
+
+  animation-name: var(--cube-spin-animation-name);
+  animation-duration: 2.2s;
+  animation-iteration-count: infinite;
+  animation-timing-function: cubic-bezier(0.5, 0.05, 0.3, 0.95);
+
+  @media (prefers-reduced-motion) {
+    animation-play-state: paused;
+  }
+
+  &::before {
+    --cube-spin-cube-round-radius: calc((4 / 100) * var(--cube-spin-size));
+
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: var(--cube-spin-cube-round-radius);
+
+    background-color: var(--cube-spin-fill);
+  }
+
+  @keyframes cube-spin-top {
+    0% {
+      transform: translate(0%, 0);
+    }
+    8% {
+      transform: translate(100%, 0);
+    }
+    17% {
+      transform: translate(100%, 0);
+    }
+    25% {
+      transform: translate(100%, 0);
+    }
+    33% {
+      transform: translate(100%, 100%);
+    }
+    42% {
+      transform: translate(100%, 100%);
+    }
+    50% {
+      transform: translate(100%, 100%);
+    }
+    58% {
+      transform: translate(0, 100%);
+    }
+    67% {
+      transform: translate(0, 100%);
+    }
+    75% {
+      transform: translate(0, 100%);
+    }
+    83% {
+      transform: translate(0, 0);
+    }
+    92% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(0, 0);
+    }
+  }
+
+  @keyframes cube-spin-right {
+    0% {
+      transform: translate(100%, 100%);
+    }
+    8% {
+      transform: translate(100%, 100%);
+    }
+    17% {
+      transform: translate(100%, 100%);
+    }
+    25% {
+      transform: translate(0, 100%);
+    }
+    33% {
+      transform: translate(0, 100%);
+    }
+    42% {
+      transform: translate(0, 100%);
+    }
+    50% {
+      transform: translate(0, 0);
+    }
+    58% {
+      transform: translate(0, 0);
+    }
+    67% {
+      transform: translate(0, 0);
+    }
+    75% {
+      transform: translate(100%, 0);
+    }
+    83% {
+      transform: translate(100%, 0);
+    }
+    92% {
+      transform: translate(100%, 0);
+    }
+    100% {
+      transform: translate(100%, 100%);
+    }
+  }
+
+  @keyframes cube-spin-bottom {
+    0% {
+      transform: translate(0, 100%);
+    }
+    8% {
+      transform: translate(0, 100%);
+    }
+    17% {
+      transform: translate(0, 0);
+    }
+    25% {
+      transform: translate(0, 0);
+    }
+    33% {
+      transform: translate(0, 0);
+    }
+    42% {
+      transform: translate(100%, 0);
+    }
+    50% {
+      transform: translate(100%, 0);
+    }
+    58% {
+      transform: translate(100%, 0);
+    }
+    67% {
+      transform: translate(100%, 100%);
+    }
+    75% {
+      transform: translate(100%, 100%);
+    }
+    83% {
+      transform: translate(100%, 100%);
+    }
+    92% {
+      transform: translate(0, 100%);
+    }
+    100% {
+      transform: translate(0, 100%);
+    }
+  }
+`);
+
+        

package/cjs/components/status/Spin/InternalSpinner.js

@@ -0,0 +1,29 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InternalSpinner = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const tasty_1 = require("../../../tasty");
+const Cube_1 = require("./Cube");
+const SpinsContainer_1 = require("./SpinsContainer");
+const SpinsBox = (0, tasty_1.tasty)({ styles: { position: 'relative', blockSize: '100%' } });
+exports.InternalSpinner = (0, react_1.memo)(function InternalSpinner(props) {
+    const { size } = props;
+    return (
+    // Even though using size as a key resets the animation, it helps safari to resize the cubes.
+    (0, jsx_runtime_1.jsx)(SpinsContainer_1.SpinsContainer, { ownSize: CUBE_SIZE_MAP[size], children: (0, jsx_runtime_1.jsxs)(SpinsBox, { children: [(0, jsx_runtime_1.jsx)(Cube_1.Cube, { position: "top" }, void 0), (0, jsx_runtime_1.jsx)(Cube_1.Cube, { position: "right" }, void 0), (0, jsx_runtime_1.jsx)(Cube_1.Cube, { position: "bottom" }, void 0)] }, void 0) }, size));
+});
+const CUBE_SIZE_MAP = {
+    small: 24,
+    default: 32,
+    large: 48,
+};
+
+        

package/cjs/components/status/Spin/Spin.js

@@ -1,7 +1,7 @@
 /**
  * @license MIT
  * author: Cube Dev Team
- * @cube-dev/ui-kit v0.10.11
+ * @cube-dev/ui-kit v0.11.0
  * Released under the MIT license.
  */
 
@@ -9,30 +9,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Spin = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const InternalSpinner_1 = require("./InternalSpinner");
+const tasty_1 = require("../../../tasty");
 const Block_1 = require("../../Block");
-const SIZE_MAP = {
-    small: 3,
-    default: 4,
-    large: 6,
-};
-const Spin = ({ size, spinning, style, children, ...props }, ref) => {
-    const localSize = (size && SIZE_MAP[size]) || size || SIZE_MAP.default;
-    if (spinning === false) {
+const SpinContainer = (0, tasty_1.tasty)(Block_1.Block, { styles: { lineHeight: '0' } });
+function Spin(props) {
+    const { size = 'default', spinning = true, children, styles } = props;
+    if (!spinning) {
         return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: children }, void 0);
     }
-    return ((0, jsx_runtime_1.jsx)(Block_1.Block, { ref: ref, role: "img", "aria-label": "Loading animation", height: "1em 1em", opacity: ".8", style: {
-            fontSize: localSize * 8,
-            position: 'relative',
-            ...(style || {}),
-        }, ...props, children: (0, jsx_runtime_1.jsxs)("svg", { xmlns: "http://www.w3.org/2000/svg", style: {
-                margin: 'auto',
-                display: 'inline-block',
-                width: '1em',
-                height: '1em',
-            }, viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", children: [(0, jsx_runtime_1.jsxs)("rect", { fill: "#7a77ff", x: "14", y: "14", width: "32", height: "32", rx: "4", ry: "4", children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "x", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-2.083333333333333s" }, void 0), (0, jsx_runtime_1.jsx)("animate", { attributeName: "y", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-1.5151515151515151s" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("rect", { fill: "#ff6492", x: "14", y: "14", width: "32", height: "32", rx: "4", ry: "4", children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "x", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-1.325757575757576s" }, void 0), (0, jsx_runtime_1.jsx)("animate", { attributeName: "y", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-0.7575757575757576s" }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("rect", { fill: "#727290", x: "14", y: "14", width: "32", height: "32", rx: "4", ry: "4", children: [(0, jsx_runtime_1.jsx)("animate", { attributeName: "x", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "-0.5681818181818182s" }, void 0), (0, jsx_runtime_1.jsx)("animate", { attributeName: "y", dur: "2.272727272727273s", repeatCount: "indefinite", keyTimes: "0;0.083;0.25;0.333;0.5;0.583;0.75;0.833;1", values: "14;54;54;54;54;14;14;14;14", begin: "0s" }, void 0)] }, void 0)] }, void 0) }, void 0));
-};
-const _Spin = (0, react_1.forwardRef)(Spin);
-exports.Spin = _Spin;
+    return ((0, jsx_runtime_1.jsx)(SpinContainer, { styles: styles, children: (0, jsx_runtime_1.jsx)(InternalSpinner_1.InternalSpinner, { size: size }, void 0) }, void 0));
+}
+exports.Spin = Spin;
 
         

package/cjs/components/status/Spin/SpinsContainer.js

@@ -0,0 +1,45 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.11.0
+ * Released under the MIT license.
+ */
+
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SpinsContainer = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.SpinsContainer = styled_components_1.default.div.attrs(({ ownSize }) => ({
+    role: 'presentation',
+    style: { '--cube-spin-size': `${ownSize}px` },
+})) `
+  box-sizing: border-box;
+
+  display: inline-block;
+  padding: calc(10 / 100 * var(--cube-spin-size));
+  width: var(--cube-spin-size);
+  height: var(--cube-spin-size);
+  opacity: 0.8;
+  contain: size layout style paint;
+
+  @media (prefers-reduced-motion) {
+    animation: cube-spin-reduced-motion 2s infinite ease-in-out;
+  }
+
+  @keyframes cube-spin-reduced-motion {
+    0% {
+      opacity: 0.4;
+    }
+    50% {
+      opacity: 0.8;
+    }
+    100% {
+      opacity: 0.4;
+    }
+  }
+`;
+
+