@cube-dev/ui-kit 0.114.0 → 0.115.0

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

@@ -0,0 +1,117 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { TooltipContext } from "./context.js";
+import { Block } from "../../Block.js";
+import { _ActiveZone } from "../../content/ActiveZone/ActiveZone.js";
+import { DisplayTransition } from "../../helpers/DisplayTransition/DisplayTransition.js";
+import { Portal } from "../../portal/Portal.js";
+import { isValidElement, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useOverlayPosition, useTooltipTrigger } from "react-aria";
+import { FocusableProvider } from "@react-aria/focus";
+import { useTooltipTriggerState } from "react-stately";
+
+//#region src/components/overlays/Tooltip/TooltipTrigger.tsx
+const DEFAULT_OFFSET = 8;
+const DEFAULT_CROSS_OFFSET = 0;
+function isTriggerFunction(value) {
+	return typeof value === "function";
+}
+function isReactElement(value) {
+	return isValidElement(value);
+}
+/**
+* TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
+* the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip
+* relative to the trigger.
+*/
+function TooltipTrigger(props) {
+	let { children, activeWrap, targetRef: externalRef, crossOffset = DEFAULT_CROSS_OFFSET, isDisabled, isMaterial, isLight, offset = DEFAULT_OFFSET, trigger: triggerAction, delay = 250, isOpen, onOpenChange, defaultOpen, disableFocusableProvider } = props;
+	const [trigger, tooltip] = Array.isArray(children) ? children : [children];
+	if (!isReactElement(tooltip)) throw new Error("CubeUIKit: TooltipTrigger expects the second child to be a valid React element (Tooltip component).");
+	if (!isTriggerFunction(trigger) && !isReactElement(trigger) && typeof trigger !== "string") throw new Error("CubeUIKit: TooltipTrigger expects the first child to be a function, React element, or string.");
+	if (activeWrap && true) console.warn("CubeUIKit: The `activeWrap` prop is deprecated. Use function-as-first-child pattern instead.");
+	let internalRef = useRef(null);
+	let tooltipTriggerRef = externalRef ?? internalRef;
+	let overlayRef = useRef(null);
+	let state = useTooltipTriggerState({
+		delay,
+		...props,
+		isDismissable: false
+	});
+	let { triggerProps, tooltipProps } = useTooltipTrigger({
+		trigger: triggerAction,
+		delay,
+		isOpen,
+		onOpenChange,
+		isDismissable: false,
+		defaultOpen
+	}, state, tooltipTriggerRef);
+	let { overlayProps, arrowProps, placement, updatePosition } = useOverlayPosition({
+		placement: props.placement || "top",
+		targetRef: tooltipTriggerRef,
+		overlayRef,
+		offset,
+		crossOffset,
+		isDismissable: false,
+		isOpen: state.isOpen
+	});
+	const tooltipContextValue = {
+		state,
+		placement: placement || props.placement || "top",
+		ref: overlayRef,
+		overlayProps,
+		arrowProps,
+		minOffset: "var(--gap)",
+		minScale: "1",
+		isMaterial,
+		isLight,
+		updatePosition,
+		...tooltipProps
+	};
+	if (isTriggerFunction(trigger)) return /* @__PURE__ */ jsxs(Fragment$1, { children: [trigger(triggerProps, tooltipTriggerRef), /* @__PURE__ */ jsx(DisplayTransition, {
+		isShown: state.isOpen,
+		children: ({ phase, isShown, ref: transitionRef }) => /* @__PURE__ */ jsx(TooltipContext.Provider, {
+			value: {
+				...tooltipContextValue,
+				phase,
+				isShown,
+				ref: overlayRef,
+				transitionRef
+			},
+			children: /* @__PURE__ */ jsx(Portal, { children: tooltip })
+		})
+	})] });
+	if (!activeWrap && typeof trigger === "string") {
+		console.warn("CubeUIKit: Tooltips are only supported on elements that are both focusable and hoverable. To solve this issue you can: 1) Use active element as a trigger (`Button`, `Link`, etc); 2) Use function-as-first-child pattern to manually apply trigger props; 3) Use `ActiveZone` component to manually wrap the content.");
+		return /* @__PURE__ */ jsx(Block, { children: trigger });
+	}
+	function onClick(e) {
+		e?.currentTarget?.parentNode.click();
+	}
+	const triggerContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [activeWrap ? /* @__PURE__ */ jsx(_ActiveZone, {
+		onClick,
+		children: trigger
+	}) : trigger, /* @__PURE__ */ jsx(DisplayTransition, {
+		isShown: state.isOpen && !isDisabled,
+		children: ({ phase, isShown, ref: transitionRef }) => /* @__PURE__ */ jsx(TooltipContext.Provider, {
+			value: {
+				...tooltipContextValue,
+				phase,
+				isShown,
+				ref: overlayRef,
+				transitionRef
+			},
+			children: /* @__PURE__ */ jsx(Portal, { children: tooltip })
+		})
+	})] });
+	if (disableFocusableProvider) return triggerContent;
+	return /* @__PURE__ */ jsx(FocusableProvider, {
+		...triggerProps,
+		ref: tooltipTriggerRef,
+		children: triggerContent
+	});
+}
+
+//#endregion
+export { TooltipTrigger };
+//# sourceMappingURL=TooltipTrigger.js.map

package/dist/components/overlays/Tooltip/TooltipTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipTrigger.js","names":["ActiveZone"],"sources":["../../../../src/components/overlays/Tooltip/TooltipTrigger.tsx"],"sourcesContent":["import { FocusableProvider } from '@react-aria/focus';\nimport {\n  HTMLAttributes,\n  isValidElement,\n  ReactElement,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport {\n  Placement,\n  TooltipTriggerProps,\n  useOverlayPosition,\n  useTooltipTrigger,\n} from 'react-aria';\nimport { useTooltipTriggerState } from 'react-stately';\n\nimport { Block } from '../../Block';\nimport { ActiveZone } from '../../content/ActiveZone/ActiveZone';\nimport { DisplayTransition } from '../../helpers/DisplayTransition/DisplayTransition';\nimport { Portal } from '../../portal';\n\nimport { TooltipContext } from './context';\n\nconst DEFAULT_OFFSET = 8; // Offset needed to reach 4px/5px (med/large) distance between tooltip and trigger button\nconst DEFAULT_CROSS_OFFSET = 0;\n\n// Type guards\nfunction isTriggerFunction(value: unknown): value is TooltipTriggerFunction {\n  return typeof value === 'function';\n}\n\nfunction isReactElement(value: unknown): value is ReactElement {\n  return isValidElement(value);\n}\n\nexport type TooltipTriggerFunction = (\n  triggerProps: HTMLAttributes<HTMLElement>,\n  ref: RefObject<HTMLElement>,\n) => ReactNode;\n\nexport interface CubeTooltipTriggerProps extends TooltipTriggerProps {\n  children: [ReactElement | string | TooltipTriggerFunction, ReactElement];\n  crossOffset?: number;\n  offset?: number;\n  placement?: Placement;\n  isMaterial?: boolean;\n  isLight?: boolean;\n  /**\n   * @deprecated Use function-as-first-child pattern instead.\n   * Whether the trigger should have an ActiveZone wrap to make sure it's focusable and hoverable.\n   * Otherwise, tooltip won't work.\n   */\n  activeWrap?: boolean;\n  /**\n   * External ref to use instead of internal ref (optional).\n   */\n  targetRef?: RefObject<HTMLElement>;\n  isOpen?: boolean;\n  onOpenChange?: (isOpen: boolean) => void;\n  defaultOpen?: boolean;\n  /**\n   * Whether the tooltip should be disabled, independent of the trigger.\n   */\n  isDisabled?: boolean;\n  /**\n   * The delay time for the tooltip to show up.\n   * @default 1500\n   */\n  delay?: number;\n  /**\n   * The delay time for the tooltip to close.\n   * @default 500\n   */\n  closeDelay?: number;\n  /**\n   * By default, opens for both focus and hover. Can be made to open only for focus.\n   */\n  trigger?: 'focus';\n  /**\n   * When true, FocusableProvider won't be applied to the trigger.\n   * Useful when trigger already handles focus or uses render props pattern.\n   */\n  disableFocusableProvider?: boolean;\n}\n\n/**\n * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing\n * the Tooltip when the user hovers over or focuses the trigger, and positioning the Tooltip\n * relative to the trigger.\n */\nexport function TooltipTrigger(props: CubeTooltipTriggerProps) {\n  let {\n    children,\n    activeWrap,\n    targetRef: externalRef,\n    crossOffset = DEFAULT_CROSS_OFFSET,\n    isDisabled,\n    isMaterial,\n    isLight,\n    offset = DEFAULT_OFFSET,\n    trigger: triggerAction,\n    delay = 250,\n    isOpen,\n    onOpenChange,\n    defaultOpen,\n    disableFocusableProvider,\n  } = props;\n\n  // Extract both children without using React.Children.toArray so we don't lose\n  // function-as-child (render-prop) which React.Children filters out.\n  const rawChildrenArray = Array.isArray(children)\n    ? (children as unknown[])\n    : ([children] as unknown[]);\n\n  const [trigger, tooltip] = rawChildrenArray;\n\n  // Type guard the tooltip\n  if (!isReactElement(tooltip)) {\n    throw new Error(\n      'CubeUIKit: TooltipTrigger expects the second child to be a valid React element (Tooltip component).',\n    );\n  }\n\n  // Type guard the trigger\n  if (\n    !isTriggerFunction(trigger) &&\n    !isReactElement(trigger) &&\n    typeof trigger !== 'string'\n  ) {\n    throw new Error(\n      'CubeUIKit: TooltipTrigger expects the first child to be a function, React element, or string.',\n    );\n  }\n\n  // Show deprecation warning for activeWrap\n  if (activeWrap && process.env.NODE_ENV === 'development') {\n    console.warn(\n      'CubeUIKit: The `activeWrap` prop is deprecated. Use function-as-first-child pattern instead.',\n    );\n  }\n\n  let internalRef = useRef<HTMLElement>(null!);\n  let tooltipTriggerRef = externalRef ?? internalRef;\n  let overlayRef = useRef<HTMLElement | null>(null);\n\n  let state = useTooltipTriggerState({ delay, ...props, isDismissable: false });\n\n  let { triggerProps, tooltipProps } = useTooltipTrigger(\n    {\n      trigger: triggerAction,\n      delay,\n      isOpen,\n      onOpenChange,\n      isDismissable: false,\n      defaultOpen,\n    },\n    state,\n    tooltipTriggerRef,\n  );\n\n  let { overlayProps, arrowProps, placement, updatePosition } =\n    useOverlayPosition({\n      placement: props.placement || 'top',\n      targetRef: tooltipTriggerRef,\n      overlayRef,\n      offset,\n      crossOffset,\n      isDismissable: false,\n      isOpen: state.isOpen,\n    });\n\n  const tooltipContextValue = {\n    state,\n    placement: placement || props.placement || 'top',\n    ref: overlayRef,\n    overlayProps,\n    arrowProps,\n    minOffset: 'var(--gap)',\n    minScale: '1',\n    isMaterial,\n    isLight,\n    updatePosition,\n    ...tooltipProps,\n  };\n\n  // Function trigger pattern (new)\n  if (isTriggerFunction(trigger)) {\n    return (\n      <>\n        {trigger(triggerProps, tooltipTriggerRef)}\n        <DisplayTransition isShown={state.isOpen}>\n          {({ phase, isShown, ref: transitionRef }) => (\n            <TooltipContext.Provider\n              value={{\n                ...tooltipContextValue,\n                phase,\n                isShown,\n                ref: overlayRef,\n                transitionRef,\n              }}\n            >\n              <Portal>{tooltip}</Portal>\n            </TooltipContext.Provider>\n          )}\n        </DisplayTransition>\n      </>\n    );\n  }\n\n  // Legacy element/string trigger pattern\n  if (!activeWrap && typeof trigger === 'string') {\n    console.warn(\n      'CubeUIKit: Tooltips are only supported on elements that are both focusable and hoverable. To solve this issue you can: 1) Use active element as a trigger (`Button`, `Link`, etc); 2) Use function-as-first-child pattern to manually apply trigger props; 3) Use `ActiveZone` component to manually wrap the content.',\n    );\n\n    return <Block>{trigger}</Block>;\n  }\n\n  function onClick(e) {\n    e?.currentTarget?.parentNode.click();\n  }\n\n  const triggerContent = (\n    <>\n      {activeWrap ? (\n        <ActiveZone onClick={onClick}>{trigger}</ActiveZone>\n      ) : (\n        trigger\n      )}\n      <DisplayTransition isShown={state.isOpen && !isDisabled}>\n        {({ phase, isShown, ref: transitionRef }) => (\n          <TooltipContext.Provider\n            value={{\n              ...tooltipContextValue,\n              phase,\n              isShown,\n              ref: overlayRef,\n              transitionRef,\n            }}\n          >\n            <Portal>{tooltip}</Portal>\n          </TooltipContext.Provider>\n        )}\n      </DisplayTransition>\n    </>\n  );\n\n  if (disableFocusableProvider) {\n    return triggerContent;\n  }\n\n  return (\n    <FocusableProvider {...triggerProps} ref={tooltipTriggerRef}>\n      {triggerContent}\n    </FocusableProvider>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,iBAAiB;AACvB,MAAM,uBAAuB;AAG7B,SAAS,kBAAkB,OAAiD;AAC1E,QAAO,OAAO,UAAU;;AAG1B,SAAS,eAAe,OAAuC;AAC7D,QAAO,eAAe,MAAM;;;;;;;AA0D9B,SAAgB,eAAe,OAAgC;CAC7D,IAAI,EACF,UACA,YACA,WAAW,aACX,cAAc,sBACd,YACA,YACA,SACA,SAAS,gBACT,SAAS,eACT,QAAQ,KACR,QACA,cACA,aACA,6BACE;CAQJ,MAAM,CAAC,SAAS,WAJS,MAAM,QAAQ,SAAS,GAC3C,WACA,CAAC,SAAS;AAKf,KAAI,CAAC,eAAe,QAAQ,CAC1B,OAAM,IAAI,MACR,sGACD;AAIH,KACE,CAAC,kBAAkB,QAAQ,IAC3B,CAAC,eAAe,QAAQ,IACxB,OAAO,YAAY,SAEnB,OAAM,IAAI,MACR,gGACD;AAIH,KAAI,cAAc,KAChB,SAAQ,KACN,+FACD;CAGH,IAAI,cAAc,OAAoB,KAAM;CAC5C,IAAI,oBAAoB,eAAe;CACvC,IAAI,aAAa,OAA2B,KAAK;CAEjD,IAAI,QAAQ,uBAAuB;EAAE;EAAO,GAAG;EAAO,eAAe;EAAO,CAAC;CAE7E,IAAI,EAAE,cAAc,iBAAiB,kBACnC;EACE,SAAS;EACT;EACA;EACA;EACA,eAAe;EACf;EACD,EACD,OACA,kBACD;CAED,IAAI,EAAE,cAAc,YAAY,WAAW,mBACzC,mBAAmB;EACjB,WAAW,MAAM,aAAa;EAC9B,WAAW;EACX;EACA;EACA;EACA,eAAe;EACf,QAAQ,MAAM;EACf,CAAC;CAEJ,MAAM,sBAAsB;EAC1B;EACA,WAAW,aAAa,MAAM,aAAa;EAC3C,KAAK;EACL;EACA;EACA,WAAW;EACX,UAAU;EACV;EACA;EACA;EACA,GAAG;EACJ;AAGD,KAAI,kBAAkB,QAAQ,CAC5B,QACE,8CACG,QAAQ,cAAc,kBAAkB,EACzC,oBAAC;EAAkB,SAAS,MAAM;aAC9B,EAAE,OAAO,SAAS,KAAK,oBACvB,oBAAC,eAAe;GACd,OAAO;IACL,GAAG;IACH;IACA;IACA,KAAK;IACL;IACD;aAED,oBAAC,oBAAQ,UAAiB;IACF;GAEV,IACnB;AAKP,KAAI,CAAC,cAAc,OAAO,YAAY,UAAU;AAC9C,UAAQ,KACN,yTACD;AAED,SAAO,oBAAC,mBAAO,UAAgB;;CAGjC,SAAS,QAAQ,GAAG;AAClB,KAAG,eAAe,WAAW,OAAO;;CAGtC,MAAM,iBACJ,8CACG,aACC,oBAACA;EAAoB;YAAU;GAAqB,GAEpD,SAEF,oBAAC;EAAkB,SAAS,MAAM,UAAU,CAAC;aACzC,EAAE,OAAO,SAAS,KAAK,oBACvB,oBAAC,eAAe;GACd,OAAO;IACL,GAAG;IACH;IACA;IACA,KAAK;IACL;IACD;aAED,oBAAC,oBAAQ,UAAiB;IACF;GAEV,IACnB;AAGL,KAAI,yBACF,QAAO;AAGT,QACE,oBAAC;EAAkB,GAAI;EAAc,KAAK;YACvC;GACiB"}

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

@@ -0,0 +1,9 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import React from "react";
+
+//#region src/components/overlays/Tooltip/context.ts
+const TooltipContext = React.createContext({});
+
+//#endregion
+export { TooltipContext };
+//# sourceMappingURL=context.js.map

package/dist/components/overlays/Tooltip/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":[],"sources":["../../../../src/components/overlays/Tooltip/context.ts"],"sourcesContent":["import React, { HTMLAttributes, RefCallback, RefObject } from 'react';\nimport { TooltipTriggerState } from 'react-stately';\n\nimport { PlacementAxis } from '../../../shared';\nimport { Props } from '../../../tasty';\n\ntype Phase = 'enter' | 'entered' | 'exit' | 'unmounted';\n\ninterface TooltipContextProps {\n  state?: TooltipTriggerState;\n  ref?: RefObject<HTMLDivElement>;\n  transitionRef?: RefCallback<HTMLDivElement>;\n  placement?: PlacementAxis;\n  arrowProps?: HTMLAttributes<HTMLElement>;\n  overlayProps?: Props;\n  minScale?: string | number;\n  minOffset?: string | number;\n  isMaterial?: boolean;\n  isLight?: boolean;\n  phase?: Phase;\n  isShown?: boolean;\n  updatePosition?: () => void;\n}\n\nexport const TooltipContext = React.createContext<TooltipContextProps>({});\n"],"mappings":";;;;AAwBA,MAAa,iBAAiB,MAAM,cAAmC,EAAE,CAAC"}

package/dist/components/portal/Portal.d.ts

@@ -0,0 +1,32 @@
+
+import { PortalProps } from "./types.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/portal/Portal.d.ts
+/**
+ * This component renders its children outside the current DOM hierarchy.
+ *
+ * React [doesn't support](https://github.com/facebook/react/issues/13097) portal API in SSR, so, if you want to
+ * render a Portal in SSR, use prop `disabled`.
+ *
+ * By default, Portal's children render under the `<Root />` component.
+ *
+ * ***Important***: Since React doesn't support portals on SSR, `<Portal />` children renders in the next tick.
+ * If you need to make some computations, use the `onMount` callback
+ *
+ * @see https://reactjs.org/docs/portals.html
+ *
+ * @example ```jsx
+ *  <div>
+ *    Portal will be rendered outside me!
+ *
+ *    <Portal>
+ *      <div>some content will be shown outside the parent container</div>
+ *    </Portal>
+ *  </div>
+ * ```
+ */
+declare function Portal(props: PortalProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { Portal };
+//# sourceMappingURL=Portal.d.ts.map

package/dist/components/portal/Portal.js

@@ -0,0 +1,39 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { usePortal } from "./usePortal.js";
+import { Fragment, jsx } from "react/jsx-runtime";
+import { createPortal } from "react-dom";
+
+//#region src/components/portal/Portal.tsx
+/**
+* This component renders its children outside the current DOM hierarchy.
+*
+* React [doesn't support](https://github.com/facebook/react/issues/13097) portal API in SSR, so, if you want to
+* render a Portal in SSR, use prop `disabled`.
+*
+* By default, Portal's children render under the `<Root />` component.
+*
+* ***Important***: Since React doesn't support portals on SSR, `<Portal />` children renders in the next tick.
+* If you need to make some computations, use the `onMount` callback
+*
+* @see https://reactjs.org/docs/portals.html
+*
+* @example ```jsx
+*  <div>
+*    Portal will be rendered outside me!
+*
+*    <Portal>
+*      <div>some content will be shown outside the parent container</div>
+*    </Portal>
+*  </div>
+* ```
+*/
+function Portal(props) {
+	const { children, mountRoot, isDisabled } = usePortal(props);
+	if (isDisabled) return /* @__PURE__ */ jsx(Fragment, { children });
+	if (!mountRoot) return /* @__PURE__ */ jsx(Fragment, { children });
+	return createPortal(children, mountRoot);
+}
+
+//#endregion
+export { Portal };
+//# sourceMappingURL=Portal.js.map

package/dist/components/portal/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","names":[],"sources":["../../../src/components/portal/Portal.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\n\nimport { PortalProps } from './types';\nimport { usePortal } from './usePortal';\n\n/**\n * This component renders its children outside the current DOM hierarchy.\n *\n * React [doesn't support](https://github.com/facebook/react/issues/13097) portal API in SSR, so, if you want to\n * render a Portal in SSR, use prop `disabled`.\n *\n * By default, Portal's children render under the `<Root />` component.\n *\n * ***Important***: Since React doesn't support portals on SSR, `<Portal />` children renders in the next tick.\n * If you need to make some computations, use the `onMount` callback\n *\n * @see https://reactjs.org/docs/portals.html\n *\n * @example ```jsx\n *  <div>\n *    Portal will be rendered outside me!\n *\n *    <Portal>\n *      <div>some content will be shown outside the parent container</div>\n *    </Portal>\n *  </div>\n * ```\n */\nexport function Portal(props: PortalProps) {\n  const { children, mountRoot, isDisabled } = usePortal(props);\n\n  if (isDisabled) return <>{children}</>;\n  // Render inline until mountRoot is available (fixes timing issues in tests and SSR)\n  if (!mountRoot) return <>{children}</>;\n  return createPortal(children, mountRoot);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BA,SAAgB,OAAO,OAAoB;CACzC,MAAM,EAAE,UAAU,WAAW,eAAe,UAAU,MAAM;AAE5D,KAAI,WAAY,QAAO,gCAAG,WAAY;AAEtC,KAAI,CAAC,UAAW,QAAO,gCAAG,WAAY;AACtC,QAAO,aAAa,UAAU,UAAU"}

package/dist/components/portal/PortalProvider.js

@@ -0,0 +1,21 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { createContext, useContext } from "react";
+
+//#region src/components/portal/PortalProvider.ts
+const PortalContext = createContext(null);
+/**
+* @private
+* @internal Don't even try to use it
+*/
+function usePortalContext() {
+	return { root: useContext(PortalContext) };
+}
+/**
+* @private
+* @internal Don't even try to use it
+*/
+const PortalProvider = PortalContext.Provider;
+
+//#endregion
+export { PortalProvider, usePortalContext };
+//# sourceMappingURL=PortalProvider.js.map

package/dist/components/portal/PortalProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortalProvider.js","names":[],"sources":["../../../src/components/portal/PortalProvider.ts"],"sourcesContent":["import { createContext, RefObject, useContext } from 'react';\n\nconst PortalContext = createContext<RefObject<HTMLElement | null> | null>(null);\n\n/**\n * @private\n * @internal Don't even try to use it\n */\nexport function usePortalContext(): {\n  root: RefObject<HTMLElement | null> | null;\n} {\n  const root = useContext(PortalContext);\n\n  return { root };\n}\n\n/**\n * @private\n * @internal Don't even try to use it\n */\nexport const PortalProvider = PortalContext.Provider;\n"],"mappings":";;;;AAEA,MAAM,gBAAgB,cAAoD,KAAK;;;;;AAM/E,SAAgB,mBAEd;AAGA,QAAO,EAAE,MAFI,WAAW,cAAc,EAEvB;;;;;;AAOjB,MAAa,iBAAiB,cAAc"}

package/dist/components/portal/index.d.ts

@@ -0,0 +1,3 @@
+
+import { PortalProps } from "./types.js";
+import { Portal } from "./Portal.js";

package/dist/components/portal/types.d.ts

@@ -0,0 +1,27 @@
+
+import { MutableRefObject, ReactNode, RefObject } from "react";
+
+//#region src/components/portal/types.d.ts
+interface PortalProps {
+  /**
+   * Ref, where `<Portal />` should render its children
+   * By default it renders under `<Root />`
+   *
+   * @default null
+   */
+  root?: MutableRefObject<HTMLElement | null> | RefObject<HTMLElement | null>;
+  /**
+   * Disables portal's API
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Callback, will be called after portal's children mounted
+   */
+  onMount?: () => void;
+  children?: ReactNode;
+}
+//#endregion
+export { PortalProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/portal/usePortal.js

@@ -0,0 +1,41 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { usePortalContext } from "./PortalProvider.js";
+import { useEffect, useRef, useState } from "react";
+import invariant from "tiny-invariant";
+
+//#region src/components/portal/usePortal.ts
+/**
+* @internal Do not use it
+*/
+function usePortal(props) {
+	const { children, isDisabled = false, root = null, onMount } = props;
+	const onMountRef = useRef(onMount);
+	const portalContext = usePortalContext();
+	const [mountRoot, setMountRoot] = useState(null);
+	onMountRef.current = onMount;
+	useEffect(() => {
+		if (!isDisabled) {
+			const contextRoot = portalContext.root;
+			const currentRoot = root?.current ?? null;
+			const currentContextRoot = contextRoot?.current ?? null;
+			invariant(!(contextRoot === null && currentRoot === null), "Before using Portal, you need to specify a root, where the component should be mounted or put the component under the <Root /> component");
+			setMountRoot(currentRoot ?? currentContextRoot);
+		}
+	}, [
+		root,
+		portalContext.root,
+		isDisabled
+	]);
+	useEffect(() => {
+		if (isDisabled || mountRoot) onMountRef.current?.();
+	}, [isDisabled, mountRoot]);
+	return {
+		isDisabled,
+		children,
+		mountRoot
+	};
+}
+
+//#endregion
+export { usePortal };
+//# sourceMappingURL=usePortal.js.map

package/dist/components/portal/usePortal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePortal.js","names":[],"sources":["../../../src/components/portal/usePortal.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport invariant from 'tiny-invariant';\n\nimport { usePortalContext } from './PortalProvider';\nimport { PortalProps } from './types';\n\n/**\n * @internal Do not use it\n */\nexport function usePortal(props: PortalProps) {\n  const { children, isDisabled = false, root = null, onMount } = props;\n\n  const onMountRef = useRef(onMount);\n  const portalContext = usePortalContext();\n  const [mountRoot, setMountRoot] = useState<HTMLElement | null>(null);\n  onMountRef.current = onMount;\n\n  useEffect(() => {\n    if (!isDisabled) {\n      const contextRoot = portalContext.root;\n      const currentRoot = root?.current ?? null;\n      const currentContextRoot = contextRoot?.current ?? null;\n\n      invariant(\n        !(contextRoot === null && currentRoot === null),\n        'Before using Portal, you need to specify a root, where the component should be mounted or put the component under the <Root /> component',\n      );\n\n      setMountRoot(currentRoot ?? currentContextRoot);\n    }\n  }, [root, portalContext.root, isDisabled]);\n\n  useEffect(() => {\n    if (isDisabled || mountRoot) {\n      onMountRef.current?.();\n    }\n  }, [isDisabled, mountRoot]);\n\n  return {\n    isDisabled,\n    children,\n    mountRoot,\n  };\n}\n"],"mappings":";;;;;;;;;AASA,SAAgB,UAAU,OAAoB;CAC5C,MAAM,EAAE,UAAU,aAAa,OAAO,OAAO,MAAM,YAAY;CAE/D,MAAM,aAAa,OAAO,QAAQ;CAClC,MAAM,gBAAgB,kBAAkB;CACxC,MAAM,CAAC,WAAW,gBAAgB,SAA6B,KAAK;AACpE,YAAW,UAAU;AAErB,iBAAgB;AACd,MAAI,CAAC,YAAY;GACf,MAAM,cAAc,cAAc;GAClC,MAAM,cAAc,MAAM,WAAW;GACrC,MAAM,qBAAqB,aAAa,WAAW;AAEnD,aACE,EAAE,gBAAgB,QAAQ,gBAAgB,OAC1C,2IACD;AAED,gBAAa,eAAe,mBAAmB;;IAEhD;EAAC;EAAM,cAAc;EAAM;EAAW,CAAC;AAE1C,iBAAgB;AACd,MAAI,cAAc,UAChB,YAAW,WAAW;IAEvB,CAAC,YAAY,UAAU,CAAC;AAE3B,QAAO;EACL;EACA;EACA;EACD"}

package/dist/components/shared/InvalidIcon.js

@@ -0,0 +1,13 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { WarningIcon } from "../../icons/WarningIcon.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/shared/InvalidIcon.tsx
+const InvalidIcon = /* @__PURE__ */ jsx(WarningIcon, {
+	"data-element": "ValidationIcon",
+	color: "#danger"
+});
+
+//#endregion
+export { InvalidIcon };
+//# sourceMappingURL=InvalidIcon.js.map

package/dist/components/shared/InvalidIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvalidIcon.js","names":[],"sources":["../../../src/components/shared/InvalidIcon.tsx"],"sourcesContent":["import { WarningIcon } from '../../icons';\n\nexport const InvalidIcon = (\n  <WarningIcon data-element=\"ValidationIcon\" color=\"#danger\" />\n);\n"],"mappings":";;;;;AAEA,MAAa,cACX,oBAAC;CAAY,gBAAa;CAAiB,OAAM;EAAY"}

package/dist/components/shared/ValidIcon.js

@@ -0,0 +1,13 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { CheckIcon } from "../../icons/CheckIcon.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/shared/ValidIcon.tsx
+const ValidIcon = /* @__PURE__ */ jsx(CheckIcon, {
+	"data-element": "ValidationIcon",
+	color: "#success"
+});
+
+//#endregion
+export { ValidIcon };
+//# sourceMappingURL=ValidIcon.js.map

package/dist/components/shared/ValidIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ValidIcon.js","names":[],"sources":["../../../src/components/shared/ValidIcon.tsx"],"sourcesContent":["import { CheckIcon } from '../../icons';\n\nexport const ValidIcon = (\n  <CheckIcon data-element=\"ValidationIcon\" color=\"#success\" />\n);\n"],"mappings":";;;;;AAEA,MAAa,YACX,oBAAC;CAAU,gBAAa;CAAiB,OAAM;EAAa"}

package/dist/components/status/LoadingAnimation/LoadingAnimation.d.ts

@@ -0,0 +1,15 @@
+
+import { CubeBlockProps } from "../../Block.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/components/status/LoadingAnimation/LoadingAnimation.d.ts
+interface CubeLoadingAnimationProps extends CubeBlockProps {
+  size?: 'small' | 'medium' | 'large' | number;
+}
+declare function LoadingAnimation({
+  size,
+  ...props
+}: CubeLoadingAnimationProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { CubeLoadingAnimationProps, LoadingAnimation };
+//# sourceMappingURL=LoadingAnimation.d.ts.map

package/dist/components/status/LoadingAnimation/LoadingAnimation.js

@@ -0,0 +1,119 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { Block } from "../../Block.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/status/LoadingAnimation/LoadingAnimation.tsx
+const CubeElement = tasty({
+	as: "img",
+	role: "presentation",
+	src: "data:image/svg+xml,%3Csvg width='36' height='41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z' fill='%23FAFAFF'/%3E%3Cpath d='M18 41L0 30.75l.101-20.5L18 20.5' fill='%23E5E5F6'/%3E%3Cpath d='M36 30.75L18 41V20.6l17.899-10.25L36 30.75z' fill='%23C0C0EA'/%3E%3C/svg%3E",
+	alt: "",
+	styles: {
+		display: "block",
+		position: "absolute",
+		width: "50%",
+		height: "50%",
+		animationName: {
+			"index=0": "dice0",
+			"index=1": "dice1",
+			"index=2": "dice2"
+		},
+		animationDuration: { "index=0 | index=1 | index=2": "2s" },
+		animationIterationCount: { "index=0 | index=1 | index=2": "infinite" },
+		animationTimingFunction: { "index=0 | index=1 | index=2": "ease" },
+		zIndex: { "index=0 | index=1 | index=2": 0 },
+		"@keyframes": {
+			dice0: {
+				from: {
+					transform: "translate(49%, 0.5%)",
+					zIndex: 0
+				},
+				"25%": {
+					transform: "translate(49%, 0.5%)",
+					zIndex: 0
+				},
+				"50%": {
+					transform: "translate(0%, 25%)",
+					zIndex: 0
+				},
+				"51%": { zIndex: 1 },
+				"75%": { zIndex: 1 },
+				to: {
+					transform: "translate(0%, 25%)",
+					zIndex: 1
+				}
+			},
+			dice1: {
+				from: {
+					transform: "translate(0%, 25%)",
+					zIndex: 3
+				},
+				"25%": {
+					transform: "translate(49%, 49%)",
+					zIndex: 3
+				},
+				"75%": {
+					transform: "translate(49%, 49%)",
+					zIndex: 2
+				},
+				to: {
+					transform: "translate(98%, 25%)",
+					zIndex: 1
+				}
+			},
+			dice2: {
+				from: {
+					transform: "translate(98%, 25%)",
+					zIndex: 1
+				},
+				"50%": {
+					transform: "translate(98%, 25%)",
+					zIndex: 0
+				},
+				"75%": {
+					transform: "translate(49%, 0.5%)",
+					zIndex: 0
+				},
+				to: {
+					transform: "translate(49%, 0.5%)",
+					zIndex: 0
+				}
+			}
+		}
+	}
+});
+function Cube({ index, style }) {
+	return /* @__PURE__ */ jsx(CubeElement, {
+		mods: index != null ? { index } : void 0,
+		style
+	});
+}
+const SIZE_MAP = {
+	small: 32,
+	medium: 64,
+	large: 96
+};
+function LoadingAnimation({ size = "medium", ...props }) {
+	const numSize = SIZE_MAP[size] || size || SIZE_MAP.medium;
+	return /* @__PURE__ */ jsxs(Block, {
+		role: "img",
+		"aria-label": "Loading animation",
+		width: numSize,
+		height: numSize * 1.1388888889,
+		style: { position: "relative" },
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(Cube, { style: { transform: "translate(0%, 72.5%)" } }),
+			/* @__PURE__ */ jsx(Cube, { style: { transform: "translate(98%, 72.5%)" } }),
+			/* @__PURE__ */ jsx(Cube, { style: { transform: "translate(49%, 96.5%)" } }),
+			/* @__PURE__ */ jsx(Cube, { index: 0 }),
+			/* @__PURE__ */ jsx(Cube, { index: 1 }),
+			/* @__PURE__ */ jsx(Cube, { index: 2 })
+		]
+	});
+}
+
+//#endregion
+export { LoadingAnimation };
+//# sourceMappingURL=LoadingAnimation.js.map

package/dist/components/status/LoadingAnimation/LoadingAnimation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoadingAnimation.js","names":[],"sources":["../../../../src/components/status/LoadingAnimation/LoadingAnimation.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { tasty } from '../../../tasty';\nimport { Block, CubeBlockProps } from '../../Block';\n\nconst CUBE_IMAGE =\n  \"data:image/svg+xml,%3Csvg width='36' height='41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z' fill='%23FAFAFF'/%3E%3Cpath d='M18 41L0 30.75l.101-20.5L18 20.5' fill='%23E5E5F6'/%3E%3Cpath d='M36 30.75L18 41V20.6l17.899-10.25L36 30.75z' fill='%23C0C0EA'/%3E%3C/svg%3E\";\n\nconst CubeElement = tasty({\n  as: 'img',\n  role: 'presentation',\n  src: CUBE_IMAGE,\n  alt: '',\n  styles: {\n    display: 'block',\n    position: 'absolute',\n    width: '50%',\n    height: '50%',\n\n    animationName: {\n      'index=0': 'dice0',\n      'index=1': 'dice1',\n      'index=2': 'dice2',\n    },\n    animationDuration: {\n      'index=0 | index=1 | index=2': '2s',\n    },\n    animationIterationCount: {\n      'index=0 | index=1 | index=2': 'infinite',\n    },\n    animationTimingFunction: {\n      'index=0 | index=1 | index=2': 'ease',\n    },\n    zIndex: {\n      'index=0 | index=1 | index=2': 0,\n    },\n\n    '@keyframes': {\n      dice0: {\n        from: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '25%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        '50%': { transform: 'translate(0%, 25%)', zIndex: 0 },\n        '51%': { zIndex: 1 },\n        '75%': { zIndex: 1 },\n        to: { transform: 'translate(0%, 25%)', zIndex: 1 },\n      },\n      dice1: {\n        from: { transform: 'translate(0%, 25%)', zIndex: 3 },\n        '25%': { transform: 'translate(49%, 49%)', zIndex: 3 },\n        '75%': { transform: 'translate(49%, 49%)', zIndex: 2 },\n        to: { transform: 'translate(98%, 25%)', zIndex: 1 },\n      },\n      dice2: {\n        from: { transform: 'translate(98%, 25%)', zIndex: 1 },\n        '50%': { transform: 'translate(98%, 25%)', zIndex: 0 },\n        '75%': { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n        to: { transform: 'translate(49%, 0.5%)', zIndex: 0 },\n      },\n    },\n  },\n});\n\ninterface CubeProps {\n  index?: 0 | 1 | 2;\n  style?: CSSProperties;\n}\n\nfunction Cube({ index, style }: CubeProps) {\n  return (\n    <CubeElement mods={index != null ? { index } : undefined} style={style} />\n  );\n}\n\nconst SIZE_MAP = {\n  small: 32,\n  medium: 64,\n  large: 96,\n};\n\nexport interface CubeLoadingAnimationProps extends CubeBlockProps {\n  size?: 'small' | 'medium' | 'large' | number;\n}\n\nexport function LoadingAnimation({\n  size = 'medium',\n  ...props\n}: CubeLoadingAnimationProps) {\n  const numSize: number = SIZE_MAP[size] || size || SIZE_MAP.medium;\n\n  return (\n    <Block\n      role=\"img\"\n      aria-label=\"Loading animation\"\n      width={numSize}\n      height={numSize * 1.1388888889}\n      style={{ position: 'relative' }}\n      {...props}\n    >\n      <Cube style={{ transform: 'translate(0%, 72.5%)' }} />\n      <Cube style={{ transform: 'translate(98%, 72.5%)' }} />\n      <Cube style={{ transform: 'translate(49%, 96.5%)' }} />\n      <Cube index={0} />\n      <Cube index={1} />\n      <Cube index={2} />\n    </Block>\n  );\n}\n"],"mappings":";;;;;;AAQA,MAAM,cAAc,MAAM;CACxB,IAAI;CACJ,MAAM;CACN,KALA;CAMA,KAAK;CACL,QAAQ;EACN,SAAS;EACT,UAAU;EACV,OAAO;EACP,QAAQ;EAER,eAAe;GACb,WAAW;GACX,WAAW;GACX,WAAW;GACZ;EACD,mBAAmB,EACjB,+BAA+B,MAChC;EACD,yBAAyB,EACvB,+BAA+B,YAChC;EACD,yBAAyB,EACvB,+BAA+B,QAChC;EACD,QAAQ,EACN,+BAA+B,GAChC;EAED,cAAc;GACZ,OAAO;IACL,MAAM;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACtD,OAAO;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACvD,OAAO;KAAE,WAAW;KAAsB,QAAQ;KAAG;IACrD,OAAO,EAAE,QAAQ,GAAG;IACpB,OAAO,EAAE,QAAQ,GAAG;IACpB,IAAI;KAAE,WAAW;KAAsB,QAAQ;KAAG;IACnD;GACD,OAAO;IACL,MAAM;KAAE,WAAW;KAAsB,QAAQ;KAAG;IACpD,OAAO;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACtD,OAAO;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACtD,IAAI;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACpD;GACD,OAAO;IACL,MAAM;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACrD,OAAO;KAAE,WAAW;KAAuB,QAAQ;KAAG;IACtD,OAAO;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACvD,IAAI;KAAE,WAAW;KAAwB,QAAQ;KAAG;IACrD;GACF;EACF;CACF,CAAC;AAOF,SAAS,KAAK,EAAE,OAAO,SAAoB;AACzC,QACE,oBAAC;EAAY,MAAM,SAAS,OAAO,EAAE,OAAO,GAAG;EAAkB;GAAS;;AAI9E,MAAM,WAAW;CACf,OAAO;CACP,QAAQ;CACR,OAAO;CACR;AAMD,SAAgB,iBAAiB,EAC/B,OAAO,UACP,GAAG,SACyB;CAC5B,MAAM,UAAkB,SAAS,SAAS,QAAQ,SAAS;AAE3D,QACE,qBAAC;EACC,MAAK;EACL,cAAW;EACX,OAAO;EACP,QAAQ,UAAU;EAClB,OAAO,EAAE,UAAU,YAAY;EAC/B,GAAI;;GAEJ,oBAAC,QAAK,OAAO,EAAE,WAAW,wBAAwB,GAAI;GACtD,oBAAC,QAAK,OAAO,EAAE,WAAW,yBAAyB,GAAI;GACvD,oBAAC,QAAK,OAAO,EAAE,WAAW,yBAAyB,GAAI;GACvD,oBAAC,QAAK,OAAO,IAAK;GAClB,oBAAC,QAAK,OAAO,IAAK;GAClB,oBAAC,QAAK,OAAO,IAAK;;GACZ"}

package/dist/components/status/LoadingAnimation/index.d.ts

@@ -0,0 +1,2 @@
+
+import { CubeLoadingAnimationProps, LoadingAnimation } from "./LoadingAnimation.js";

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

@@ -0,0 +1,104 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { tasty } from "../../../tasty/tasty.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/status/Spin/Cube.tsx
+const CubeElement = tasty({
+	role: "presentation",
+	styles: {
+		"$cube-border-width": "(4 / 100 * $cube-spin-size)",
+		"$cube-border-compensation": "(-1 * $cube-border-width)",
+		"$cube-size": "((100% - 2 * $cube-border-width) / 2)",
+		boxSizing: "content-box",
+		position: "absolute",
+		top: "$cube-border-compensation",
+		left: "$cube-border-compensation",
+		width: "$cube-size",
+		height: "$cube-size",
+		border: "$cube-border-width solid transparent",
+		overflow: "hidden",
+		contain: "size layout style paint",
+		pointerEvents: "none",
+		userSelect: "none",
+		animationName: {
+			"position=top": "cube-spin-top",
+			"position=right": "cube-spin-right",
+			"position=bottom": "cube-spin-bottom"
+		},
+		animationDuration: "2.2s",
+		animationIterationCount: "infinite",
+		animationTimingFunction: "cubic-bezier(0.5, 0.05, 0.3, 0.95)",
+		animationPlayState: {
+			"": "running",
+			"@media(prefers-reduced-motion)": "paused"
+		},
+		"&::before": {
+			"$cube-round-radius": "(4 / 100 * $cube-spin-size)",
+			content: "\"\"",
+			display: "block",
+			width: "100%",
+			height: "100%",
+			radius: "$cube-round-radius",
+			fill: {
+				"position=top": "#7a77ff",
+				"position=right": "#727290",
+				"position=bottom": "#ff6492"
+			}
+		},
+		"@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)" }
+			},
+			"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%)" }
+			},
+			"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%)" }
+			}
+		}
+	}
+});
+const Cube = memo(function Cube({ $position }) {
+	return /* @__PURE__ */ jsx(CubeElement, { mods: { position: $position } });
+});
+
+//#endregion
+export { Cube };
+//# sourceMappingURL=Cube.js.map