@cube-dev/ui-kit 0.197.0 → 0.198.1

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

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.1 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
 import { Block } from "../../Block.js";
 import { useI18n } from "../../../i18n/useI18n.js";
@@ -6,7 +6,6 @@ import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/status/LoadingAnimation/LoadingAnimation.tsx
 const CubeElement = tasty({
 	as: "svg",
@@ -287,7 +286,7 @@ function LoadingAnimation(t0) {
 	} else t11 = $[16];
 	return t11;
 }
-
 //#endregion
 export { LoadingAnimation };
+
 //# sourceMappingURL=LoadingAnimation.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingAnimation.js","names":["tasty","CSSProperties","RefObject","useRef","useI18n","useLayoutEffect","Block","CubeBlockProps","CubeElement","as","styles","display","position","width","height","animationName","animationDuration","animationIterationCount","animationTimingFunction","zIndex","dice0","from","transform","to","dice1","dice2","useTimelineSyncedAnimation","ref","isAnimated","$","_c","t0","element","current","getAnimations","animation","timeline","ownerDocument","startTime","t1","CubeProps","index","style","Cube","undefined","t2","t3","t4","Symbol","for","t5","SIZE_MAP","small","medium","large","CubeLoadingAnimationProps","size","LoadingAnimation","props","t","numSize","t6","t10","t7","t8","t9","t11"],"sources":["../../../../src/components/status/LoadingAnimation/LoadingAnimation.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { CSSProperties, RefObject, useRef } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { Block, CubeBlockProps } from '../../Block';\n\nconst CubeElement = tasty({\n  as: 'svg',\n  styles: {\n    display: 'block',\n    position: 'absolute',\n    width: '50%',\n    height: '50%',\n\n    // The three visible faces of the cube get their colors via the SVG\n    // `fill=\"…\"` attribute on each `<path>` (see the JSX below), NOT via a\n    // tasty `fill` style. Tasty's `fill` is a typed shorthand for\n    // `background-color` — applying it to an SVG `<path>` would inject\n    // `background-color: …` which paths simply ignore (this was the\n    // \"invisible cube\" bug). Pointing the SVG `fill` attribute at the\n    // adaptive `--loading-face-N-color` CSS variables published by Glaze\n    // (defined in `src/tokens/palette.ts`) keeps the three faces driven by\n    // the design system without going through a style property tasty would\n    // re-route to the wrong CSS slot.\n    //\n    // Those three tokens are the kit's shared isometric-cube ramp — `NoDataIcon`\n    // draws its crate from the same ones — and they are pinned by a WCAG floor\n    // against `surface` rather than by a tone delta, so the faces hold the same\n    // separation in light, dark, and high contrast. See the recipe's comment for\n    // why that matters.\n\n    animationName: {\n      '': 'none',\n      'index=0': 'dice0',\n      'index=1': 'dice1',\n      'index=2': 'dice2',\n    },\n    animationDuration: {\n      '': '0s',\n      'index=0 | index=1 | index=2': '2s',\n    },\n    animationIterationCount: {\n      '': 1,\n      'index=0 | index=1 | index=2': 'infinite',\n    },\n    animationTimingFunction: {\n      '': 'ease',\n      'index=0 | index=1 | index=2': 'ease',\n    },\n    zIndex: {\n      '': 0,\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\n/**\n * Phase-lock a cube's `dice*` animation to the document timeline.\n *\n * A page under load mounts these animations at whatever moment each level of\n * the tree resolves — a route shell, then a panel, then the table inside it —\n * and every wrapper that appears around a running `LoadingAnimation` remounts\n * it. A CSS animation is created with its start time at \"now\", so each of\n * those events snapped the cubes back to the first frame: the visible symptom\n * is a loader that keeps stuttering back to the start while the page settles.\n *\n * Moving the start time to 0 puts it at the origin of the document timeline,\n * so the cube's position is a function of the timeline's current reading and\n * nothing else. Two consequences: a remount picks up exactly where the removed\n * element was, and every instance in the document runs in lockstep, because\n * they all read the same clock.\n *\n * Done through the animation object in a layout effect (before the first paint\n * of the new element) rather than through a negative `animation-delay`: the\n * delay would have to be computed during render from `Date.now()`, which is\n * both a different clock than the one the animation runs on — so the phase\n * would be off by the render-to-paint gap — and a value that differs between\n * the server and the client, i.e. a hydration mismatch on every render.\n */\nfunction useTimelineSyncedAnimation(\n  ref: RefObject<SVGSVGElement | null>,\n  isAnimated: boolean,\n) {\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    // `getAnimations` is absent in jsdom, where there is nothing to sync.\n    if (!isAnimated || !element?.getAnimations) return;\n\n    for (const animation of element.getAnimations()) {\n      // These elements carry nothing but the `dice*` animation, and it always\n      // runs on the document timeline — the one timeline an explicit numeric\n      // start time is meaningful against.\n      if (animation.timeline === element.ownerDocument.timeline) {\n        animation.startTime = 0;\n      }\n    }\n  }, [isAnimated]);\n}\n\ninterface CubeProps {\n  index?: 0 | 1 | 2;\n  style?: CSSProperties;\n}\n\nfunction Cube({ index, style }: CubeProps) {\n  const ref = useRef<SVGSVGElement>(null);\n\n  useTimelineSyncedAnimation(ref, index != null);\n\n  return (\n    <CubeElement\n      ref={ref}\n      mods={index != null ? { index } : undefined}\n      style={style}\n      viewBox=\"0 0 36 41\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fill=\"var(--loading-face-1-color)\"\n        d=\"M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z\"\n      />\n      <path\n        fill=\"var(--loading-face-2-color)\"\n        d=\"M18 41L0 30.75l.101-20.5L18 20.5\"\n      />\n      <path\n        fill=\"var(--loading-face-3-color)\"\n        d=\"M36 30.75L18 41V20.6l17.899-10.25L36 30.75z\"\n      />\n    </CubeElement>\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 { t } = useI18n();\n  const numSize: number = SIZE_MAP[size] || size || SIZE_MAP.medium;\n\n  return (\n    <Block\n      role=\"img\"\n      aria-label={t('loadingAnimation.ariaLabel', '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":"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"}
+{"version":3,"file":"LoadingAnimation.js","names":["tasty","CSSProperties","RefObject","useRef","useI18n","useLayoutEffect","Block","CubeBlockProps","CubeElement","as","styles","display","position","width","height","animationName","animationDuration","animationIterationCount","animationTimingFunction","zIndex","dice0","from","transform","to","dice1","dice2","useTimelineSyncedAnimation","ref","isAnimated","$","_c","t0","element","current","getAnimations","animation","timeline","ownerDocument","startTime","t1","CubeProps","index","style","Cube","undefined","t2","t3","t4","Symbol","for","t5","SIZE_MAP","small","medium","large","CubeLoadingAnimationProps","size","LoadingAnimation","props","t","numSize","t6","t10","t7","t8","t9","t11","_c"],"sources":["../../../../src/components/status/LoadingAnimation/LoadingAnimation.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { CSSProperties, RefObject, useRef } from 'react';\n\nimport { useI18n } from '../../../i18n';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { Block, CubeBlockProps } from '../../Block';\n\nconst CubeElement = tasty({\n  as: 'svg',\n  styles: {\n    display: 'block',\n    position: 'absolute',\n    width: '50%',\n    height: '50%',\n\n    // The three visible faces of the cube get their colors via the SVG\n    // `fill=\"…\"` attribute on each `<path>` (see the JSX below), NOT via a\n    // tasty `fill` style. Tasty's `fill` is a typed shorthand for\n    // `background-color` — applying it to an SVG `<path>` would inject\n    // `background-color: …` which paths simply ignore (this was the\n    // \"invisible cube\" bug). Pointing the SVG `fill` attribute at the\n    // adaptive `--loading-face-N-color` CSS variables published by Glaze\n    // (defined in `src/tokens/palette.ts`) keeps the three faces driven by\n    // the design system without going through a style property tasty would\n    // re-route to the wrong CSS slot.\n    //\n    // Those three tokens are the kit's shared isometric-cube ramp — `NoDataIcon`\n    // draws its crate from the same ones — and they are pinned by a WCAG floor\n    // against `surface` rather than by a tone delta, so the faces hold the same\n    // separation in light, dark, and high contrast. See the recipe's comment for\n    // why that matters.\n\n    animationName: {\n      '': 'none',\n      'index=0': 'dice0',\n      'index=1': 'dice1',\n      'index=2': 'dice2',\n    },\n    animationDuration: {\n      '': '0s',\n      'index=0 | index=1 | index=2': '2s',\n    },\n    animationIterationCount: {\n      '': 1,\n      'index=0 | index=1 | index=2': 'infinite',\n    },\n    animationTimingFunction: {\n      '': 'ease',\n      'index=0 | index=1 | index=2': 'ease',\n    },\n    zIndex: {\n      '': 0,\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\n/**\n * Phase-lock a cube's `dice*` animation to the document timeline.\n *\n * A page under load mounts these animations at whatever moment each level of\n * the tree resolves — a route shell, then a panel, then the table inside it —\n * and every wrapper that appears around a running `LoadingAnimation` remounts\n * it. A CSS animation is created with its start time at \"now\", so each of\n * those events snapped the cubes back to the first frame: the visible symptom\n * is a loader that keeps stuttering back to the start while the page settles.\n *\n * Moving the start time to 0 puts it at the origin of the document timeline,\n * so the cube's position is a function of the timeline's current reading and\n * nothing else. Two consequences: a remount picks up exactly where the removed\n * element was, and every instance in the document runs in lockstep, because\n * they all read the same clock.\n *\n * Done through the animation object in a layout effect (before the first paint\n * of the new element) rather than through a negative `animation-delay`: the\n * delay would have to be computed during render from `Date.now()`, which is\n * both a different clock than the one the animation runs on — so the phase\n * would be off by the render-to-paint gap — and a value that differs between\n * the server and the client, i.e. a hydration mismatch on every render.\n */\nfunction useTimelineSyncedAnimation(\n  ref: RefObject<SVGSVGElement | null>,\n  isAnimated: boolean,\n) {\n  useLayoutEffect(() => {\n    const element = ref.current;\n\n    // `getAnimations` is absent in jsdom, where there is nothing to sync.\n    if (!isAnimated || !element?.getAnimations) return;\n\n    for (const animation of element.getAnimations()) {\n      // These elements carry nothing but the `dice*` animation, and it always\n      // runs on the document timeline — the one timeline an explicit numeric\n      // start time is meaningful against.\n      if (animation.timeline === element.ownerDocument.timeline) {\n        animation.startTime = 0;\n      }\n    }\n  }, [isAnimated]);\n}\n\ninterface CubeProps {\n  index?: 0 | 1 | 2;\n  style?: CSSProperties;\n}\n\nfunction Cube({ index, style }: CubeProps) {\n  const ref = useRef<SVGSVGElement>(null);\n\n  useTimelineSyncedAnimation(ref, index != null);\n\n  return (\n    <CubeElement\n      ref={ref}\n      mods={index != null ? { index } : undefined}\n      style={style}\n      viewBox=\"0 0 36 41\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fill=\"var(--loading-face-1-color)\"\n        d=\"M35.899 10.351l-18 10.25L.1 10.25l18-10.25L35.9 10.351z\"\n      />\n      <path\n        fill=\"var(--loading-face-2-color)\"\n        d=\"M18 41L0 30.75l.101-20.5L18 20.5\"\n      />\n      <path\n        fill=\"var(--loading-face-3-color)\"\n        d=\"M36 30.75L18 41V20.6l17.899-10.25L36 30.75z\"\n      />\n    </CubeElement>\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 { t } = useI18n();\n  const numSize: number = SIZE_MAP[size] || size || SIZE_MAP.medium;\n\n  return (\n    <Block\n      role=\"img\"\n      aria-label={t('loadingAnimation.ariaLabel', '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":"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"}

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

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

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

@@ -1,9 +1,8 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.1 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { memo } from "react";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/status/Spin/Cube.tsx
 const CubeElement = tasty({
 	role: "presentation",
@@ -108,7 +107,7 @@ const Cube = memo(function Cube(t0) {
 	} else t1 = $[1];
 	return t1;
 });
-
 //#endregion
 export { Cube };
+
 //# sourceMappingURL=Cube.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Cube.js","names":["tasty","memo","SpinCubeProps","CubeElement","role","styles","boxSizing","position","top","left","width","height","border","overflow","contain","pointerEvents","userSelect","animationName","animationDuration","animationIterationCount","animationTimingFunction","animationPlayState","content","display","radius","fill","transform","Cube","t0","$","_c","$position","t1"],"sources":["../../../../src/components/status/Spin/Cube.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { memo } from 'react';\n\nimport { SpinCubeProps } from './types';\n\nconst CubeElement = tasty({\n  role: 'presentation',\n  styles: {\n    '$cube-border-width': '(4 / 100 * $cube-spin-size)',\n    '$cube-border-compensation': '(-1 * $cube-border-width)',\n    '$cube-size': '((100% - 2 * $cube-border-width) / 2)',\n\n    boxSizing: 'content-box',\n    position: 'absolute',\n    top: '$cube-border-compensation',\n    left: '$cube-border-compensation',\n    width: '$cube-size',\n    height: '$cube-size',\n    border: '$cube-border-width solid #clear',\n    overflow: 'hidden',\n    contain: 'size layout style paint',\n    pointerEvents: 'none',\n    userSelect: 'none',\n\n    animationName: {\n      '': 'none',\n      'position=top': 'cube-spin-top',\n      'position=right': 'cube-spin-right',\n      'position=bottom': 'cube-spin-bottom',\n    },\n    animationDuration: '2.2s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'cubic-bezier(0.5, 0.05, 0.3, 0.95)',\n    animationPlayState: {\n      '': 'running',\n      '@media(prefers-reduced-motion)': 'paused',\n    },\n\n    '&::before': {\n      '$cube-round-radius': '(4 / 100 * $cube-spin-size)',\n      content: '\"\"',\n      display: 'block',\n      width: '100%',\n      height: '100%',\n      radius: '$cube-round-radius',\n      fill: {\n        'position=top': '#7a77ff',\n        'position=right': '#727290',\n        'position=bottom': '#ff6492',\n      },\n    },\n\n    '@keyframes': {\n      'cube-spin-top': {\n        '0%': { transform: 'translate(0%, 0)' },\n        '8%': { transform: 'translate(100%, 0)' },\n        '17%': { transform: 'translate(100%, 0)' },\n        '25%': { transform: 'translate(100%, 0)' },\n        '33%': { transform: 'translate(100%, 100%)' },\n        '42%': { transform: 'translate(100%, 100%)' },\n        '50%': { transform: 'translate(100%, 100%)' },\n        '58%': { transform: 'translate(0, 100%)' },\n        '67%': { transform: 'translate(0, 100%)' },\n        '75%': { transform: 'translate(0, 100%)' },\n        '83%': { transform: 'translate(0, 0)' },\n        '92%': { transform: 'translate(0, 0)' },\n        '100%': { transform: 'translate(0, 0)' },\n      },\n      'cube-spin-right': {\n        '0%': { transform: 'translate(100%, 100%)' },\n        '8%': { transform: 'translate(100%, 100%)' },\n        '17%': { transform: 'translate(100%, 100%)' },\n        '25%': { transform: 'translate(0, 100%)' },\n        '33%': { transform: 'translate(0, 100%)' },\n        '42%': { transform: 'translate(0, 100%)' },\n        '50%': { transform: 'translate(0, 0)' },\n        '58%': { transform: 'translate(0, 0)' },\n        '67%': { transform: 'translate(0, 0)' },\n        '75%': { transform: 'translate(100%, 0)' },\n        '83%': { transform: 'translate(100%, 0)' },\n        '92%': { transform: 'translate(100%, 0)' },\n        '100%': { transform: 'translate(100%, 100%)' },\n      },\n      'cube-spin-bottom': {\n        '0%': { transform: 'translate(0, 100%)' },\n        '8%': { transform: 'translate(0, 100%)' },\n        '17%': { transform: 'translate(0, 0)' },\n        '25%': { transform: 'translate(0, 0)' },\n        '33%': { transform: 'translate(0, 0)' },\n        '42%': { transform: 'translate(100%, 0)' },\n        '50%': { transform: 'translate(100%, 0)' },\n        '58%': { transform: 'translate(100%, 0)' },\n        '67%': { transform: 'translate(100%, 100%)' },\n        '75%': { transform: 'translate(100%, 100%)' },\n        '83%': { transform: 'translate(100%, 100%)' },\n        '92%': { transform: 'translate(0, 100%)' },\n        '100%': { transform: 'translate(0, 100%)' },\n      },\n    },\n  },\n});\n\nexport const Cube = memo(function Cube({ $position }: SpinCubeProps) {\n  return <CubeElement mods={{ position: $position }} />;\n});\n"],"mappings":";;;;;;;AAKA,MAAMG,cAAcH,MAAM;CACxBI,MAAM;CACNC,QAAQ;EACN,sBAAsB;EACtB,6BAA6B;EAC7B,cAAc;EAEdC,WAAW;EACXC,UAAU;EACVC,KAAK;EACLC,MAAM;EACNC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,SAAS;EACTC,eAAe;EACfC,YAAY;EAEZC,eAAe;GACb,IAAI;GACJ,gBAAgB;GAChB,kBAAkB;GAClB,mBAAmB;GACpB;EACDC,mBAAmB;EACnBC,yBAAyB;EACzBC,yBAAyB;EACzBC,oBAAoB;GAClB,IAAI;GACJ,kCAAkC;GACnC;EAED,aAAa;GACX,sBAAsB;GACtBC,SAAS;GACTC,SAAS;GACTb,OAAO;GACPC,QAAQ;GACRa,QAAQ;GACRC,MAAM;IACJ,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;IACrB;GACD;EAED,cAAc;GACZ,iBAAiB;IACf,MAAM,EAAEC,WAAW,oBAAoB;IACvC,MAAM,EAAEA,WAAW,sBAAsB;IACzC,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,mBAAmB;IACvC,QAAQ,EAAEA,WAAW,mBAAkB;IACxC;GACD,mBAAmB;IACjB,MAAM,EAAEA,WAAW,yBAAyB;IAC5C,MAAM,EAAEA,WAAW,yBAAyB;IAC5C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,QAAQ,EAAEA,WAAW,yBAAwB;IAC9C;GACD,oBAAoB;IAClB,MAAM,EAAEA,WAAW,sBAAsB;IACzC,MAAM,EAAEA,WAAW,sBAAsB;IACzC,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,mBAAmB;IACvC,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,yBAAyB;IAC7C,OAAO,EAAEA,WAAW,sBAAsB;IAC1C,QAAQ,EAAEA,WAAW,sBAAqB;IAC5C;GACF;EACF;CACD,CAAC;AAEF,MAAaC,OAAO1B,KAAK,SAAA0B,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAc,MAAA,EAAAC,cAAAH;CAA4B,IAAAI;AAAA,KAAAH,EAAA,OAAAE,WAAA;AAC1DC,OAAA,oBAAC,eAAkB,MAAA,EAAAzB,UAAYwB,WAAU,GAAK;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;OAAAA,MAAAH,EAAA;AAAA,QAA9CG;EACP"}
+{"version":3,"file":"Cube.js","names":["tasty","memo","SpinCubeProps","CubeElement","role","styles","boxSizing","position","top","left","width","height","border","overflow","contain","pointerEvents","userSelect","animationName","animationDuration","animationIterationCount","animationTimingFunction","animationPlayState","content","display","radius","fill","transform","Cube","t0","$","_c","$position","t1","_c"],"sources":["../../../../src/components/status/Spin/Cube.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { memo } from 'react';\n\nimport { SpinCubeProps } from './types';\n\nconst CubeElement = tasty({\n  role: 'presentation',\n  styles: {\n    '$cube-border-width': '(4 / 100 * $cube-spin-size)',\n    '$cube-border-compensation': '(-1 * $cube-border-width)',\n    '$cube-size': '((100% - 2 * $cube-border-width) / 2)',\n\n    boxSizing: 'content-box',\n    position: 'absolute',\n    top: '$cube-border-compensation',\n    left: '$cube-border-compensation',\n    width: '$cube-size',\n    height: '$cube-size',\n    border: '$cube-border-width solid #clear',\n    overflow: 'hidden',\n    contain: 'size layout style paint',\n    pointerEvents: 'none',\n    userSelect: 'none',\n\n    animationName: {\n      '': 'none',\n      'position=top': 'cube-spin-top',\n      'position=right': 'cube-spin-right',\n      'position=bottom': 'cube-spin-bottom',\n    },\n    animationDuration: '2.2s',\n    animationIterationCount: 'infinite',\n    animationTimingFunction: 'cubic-bezier(0.5, 0.05, 0.3, 0.95)',\n    animationPlayState: {\n      '': 'running',\n      '@media(prefers-reduced-motion)': 'paused',\n    },\n\n    '&::before': {\n      '$cube-round-radius': '(4 / 100 * $cube-spin-size)',\n      content: '\"\"',\n      display: 'block',\n      width: '100%',\n      height: '100%',\n      radius: '$cube-round-radius',\n      fill: {\n        'position=top': '#7a77ff',\n        'position=right': '#727290',\n        'position=bottom': '#ff6492',\n      },\n    },\n\n    '@keyframes': {\n      'cube-spin-top': {\n        '0%': { transform: 'translate(0%, 0)' },\n        '8%': { transform: 'translate(100%, 0)' },\n        '17%': { transform: 'translate(100%, 0)' },\n        '25%': { transform: 'translate(100%, 0)' },\n        '33%': { transform: 'translate(100%, 100%)' },\n        '42%': { transform: 'translate(100%, 100%)' },\n        '50%': { transform: 'translate(100%, 100%)' },\n        '58%': { transform: 'translate(0, 100%)' },\n        '67%': { transform: 'translate(0, 100%)' },\n        '75%': { transform: 'translate(0, 100%)' },\n        '83%': { transform: 'translate(0, 0)' },\n        '92%': { transform: 'translate(0, 0)' },\n        '100%': { transform: 'translate(0, 0)' },\n      },\n      'cube-spin-right': {\n        '0%': { transform: 'translate(100%, 100%)' },\n        '8%': { transform: 'translate(100%, 100%)' },\n        '17%': { transform: 'translate(100%, 100%)' },\n        '25%': { transform: 'translate(0, 100%)' },\n        '33%': { transform: 'translate(0, 100%)' },\n        '42%': { transform: 'translate(0, 100%)' },\n        '50%': { transform: 'translate(0, 0)' },\n        '58%': { transform: 'translate(0, 0)' },\n        '67%': { transform: 'translate(0, 0)' },\n        '75%': { transform: 'translate(100%, 0)' },\n        '83%': { transform: 'translate(100%, 0)' },\n        '92%': { transform: 'translate(100%, 0)' },\n        '100%': { transform: 'translate(100%, 100%)' },\n      },\n      'cube-spin-bottom': {\n        '0%': { transform: 'translate(0, 100%)' },\n        '8%': { transform: 'translate(0, 100%)' },\n        '17%': { transform: 'translate(0, 0)' },\n        '25%': { transform: 'translate(0, 0)' },\n        '33%': { transform: 'translate(0, 0)' },\n        '42%': { transform: 'translate(100%, 0)' },\n        '50%': { transform: 'translate(100%, 0)' },\n        '58%': { transform: 'translate(100%, 0)' },\n        '67%': { transform: 'translate(100%, 100%)' },\n        '75%': { transform: 'translate(100%, 100%)' },\n        '83%': { transform: 'translate(100%, 100%)' },\n        '92%': { transform: 'translate(0, 100%)' },\n        '100%': { transform: 'translate(0, 100%)' },\n      },\n    },\n  },\n});\n\nexport const Cube = memo(function Cube({ $position }: SpinCubeProps) {\n  return <CubeElement mods={{ position: $position }} />;\n});\n"],"mappings":";;;;;;AAKA,MAAMG,cAAcH,MAAM;CACxBI,MAAM;CACNC,QAAQ;EACN,sBAAsB;EACtB,6BAA6B;EAC7B,cAAc;EAEdC,WAAW;EACXC,UAAU;EACVC,KAAK;EACLC,MAAM;EACNC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,SAAS;EACTC,eAAe;EACfC,YAAY;EAEZC,eAAe;GACb,IAAI;GACJ,gBAAgB;GAChB,kBAAkB;GAClB,mBAAmB;EACrB;EACAC,mBAAmB;EACnBC,yBAAyB;EACzBC,yBAAyB;EACzBC,oBAAoB;GAClB,IAAI;GACJ,kCAAkC;EACpC;EAEA,aAAa;GACX,sBAAsB;GACtBC,SAAS;GACTC,SAAS;GACTb,OAAO;GACPC,QAAQ;GACRa,QAAQ;GACRC,MAAM;IACJ,gBAAgB;IAChB,kBAAkB;IAClB,mBAAmB;GACrB;EACF;EAEA,cAAc;GACZ,iBAAiB;IACf,MAAM,EAAEC,WAAW,mBAAmB;IACtC,MAAM,EAAEA,WAAW,qBAAqB;IACxC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,QAAQ,EAAEA,WAAW,kBAAkB;GACzC;GACA,mBAAmB;IACjB,MAAM,EAAEA,WAAW,wBAAwB;IAC3C,MAAM,EAAEA,WAAW,wBAAwB;IAC3C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,QAAQ,EAAEA,WAAW,wBAAwB;GAC/C;GACA,oBAAoB;IAClB,MAAM,EAAEA,WAAW,qBAAqB;IACxC,MAAM,EAAEA,WAAW,qBAAqB;IACxC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,kBAAkB;IACtC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,qBAAqB;IACzC,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,wBAAwB;IAC5C,OAAO,EAAEA,WAAW,qBAAqB;IACzC,QAAQ,EAAEA,WAAW,qBAAqB;GAC5C;EACF;CACF;AACF,CAAC;AAED,MAAaC,OAAO1B,KAAK,SAAA0B,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAc,MAAA,EAAAC,cAAAH;CAA4B,IAAAI;CAAA,IAAAH,EAAA,OAAAE,WAAA;EAC1DC,KAAA,oBAAC,aAAD,EAAmB,MAAA,EAAAzB,UAAYwB,UAAU,EAAC,CAAA;EAAIF,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,OAA9CG;AAA8C,CACtD"}

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

@@ -1,11 +1,10 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.1 | Cube Dev Team */
 import { Cube } from "./Cube.js";
 import { SpinsContainer } from "./SpinsContainer.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { memo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-
 //#region src/components/status/Spin/InternalSpinner.tsx
 const SpinsBox = tasty({ styles: {
 	position: "relative",
@@ -41,7 +40,7 @@ const CUBE_SIZE_MAP = {
 	default: 32,
 	large: 48
 };
-
 //#endregion
 export { InternalSpinner };
+
 //# sourceMappingURL=InternalSpinner.js.map

package/dist/components/status/Spin/InternalSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"InternalSpinner.js","names":["tasty","memo","Cube","SpinsContainer","InternalSpinnerProps","SpinSize","SpinsBox","styles","position","blockSize","InternalSpinner","props","$","_c","size","t0","CUBE_SIZE_MAP","t1","Symbol","for","t2","Record","small","default","large"],"sources":["../../../../src/components/status/Spin/InternalSpinner.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { memo } from 'react';\n\nimport { Cube } from './Cube';\nimport { SpinsContainer } from './SpinsContainer';\nimport { InternalSpinnerProps, SpinSize } from './types';\n\nconst SpinsBox = tasty({ styles: { position: 'relative', blockSize: '100%' } });\n\nexport const InternalSpinner = memo(function InternalSpinner(\n  props: InternalSpinnerProps,\n) {\n  const { size } = props;\n\n  return (\n    // Even though using size as a key resets the animation, it helps safari to resize the cubes.\n    <SpinsContainer key={size} ownSize={CUBE_SIZE_MAP[size]}>\n      <SpinsBox>\n        <Cube $position=\"top\" />\n        <Cube $position=\"right\" />\n        <Cube $position=\"bottom\" />\n      </SpinsBox>\n    </SpinsContainer>\n  );\n});\n\nconst CUBE_SIZE_MAP: Record<SpinSize, number> = {\n  small: 24,\n  default: 32,\n  large: 48,\n};\n"],"mappings":";;;;;;;;;AAOA,MAAMM,WAAWN,MAAM,EAAEO,QAAQ;CAAEC,UAAU;CAAYC,WAAW;CAAO,EAAG,CAAC;AAE/E,MAAaC,kBAAkBT,KAAK,SAAAS,gBAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAGlC,MAAA,EAAAC,SAAiBH;CAIqB,MAAAI,KAAAC,cAAcF;CAAK,IAAAG;AAAA,KAAAL,EAAA,OAAAM,OAAAC,IAAA,4BAAA,EAAA;AACrDF,OAAA,qBAAC;GACC,oBAAC,QAAe,WAAA,QAChB;uBAAC,QAAe,WAAA,UAChB;uBAAC,QAAe,WAAA,WAClB;MAAW;AAAAL,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CAAA,IAAAQ;AAAA,KAAAR,EAAA,OAAAE,QAAAF,EAAA,OAAAG,IAAA;AALbK,OAAA,oBAAC;GAAmC,SAAAL;aAClCE;KADmBH,KAMJ;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;AAAAH,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;AAAA,QANjBQ;EAQF;AAEF,MAAMJ,gBAA0C;CAC9CM,OAAO;CACPC,SAAS;CACTC,OAAO;CACR"}
+{"version":3,"file":"InternalSpinner.js","names":["tasty","memo","Cube","SpinsContainer","InternalSpinnerProps","SpinSize","SpinsBox","styles","position","blockSize","InternalSpinner","props","$","_c","size","t0","CUBE_SIZE_MAP","t1","Symbol","for","t2","Record","small","default","large","_c"],"sources":["../../../../src/components/status/Spin/InternalSpinner.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { memo } from 'react';\n\nimport { Cube } from './Cube';\nimport { SpinsContainer } from './SpinsContainer';\nimport { InternalSpinnerProps, SpinSize } from './types';\n\nconst SpinsBox = tasty({ styles: { position: 'relative', blockSize: '100%' } });\n\nexport const InternalSpinner = memo(function InternalSpinner(\n  props: InternalSpinnerProps,\n) {\n  const { size } = props;\n\n  return (\n    // Even though using size as a key resets the animation, it helps safari to resize the cubes.\n    <SpinsContainer key={size} ownSize={CUBE_SIZE_MAP[size]}>\n      <SpinsBox>\n        <Cube $position=\"top\" />\n        <Cube $position=\"right\" />\n        <Cube $position=\"bottom\" />\n      </SpinsBox>\n    </SpinsContainer>\n  );\n});\n\nconst CUBE_SIZE_MAP: Record<SpinSize, number> = {\n  small: 24,\n  default: 32,\n  large: 48,\n};\n"],"mappings":";;;;;;;;AAOA,MAAMM,WAAWN,MAAM,EAAEO,QAAQ;CAAEC,UAAU;CAAYC,WAAW;AAAO,EAAE,CAAC;AAE9E,MAAaC,kBAAkBT,KAAK,SAAAS,gBAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAGlC,MAAA,EAAAC,SAAiBH;CAIqB,MAAAI,KAAAC,cAAcF;CAAK,IAAAG;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EACrDF,KAAA,qBAAC,UAAD,EAAA,UAAA;GACE,oBAAC,MAAD,EAAgB,WAAA,MAAK,CAAA;GACrB,oBAAC,MAAD,EAAgB,WAAA,QAAO,CAAA;GACvB,oBAAC,MAAD,EAAgB,WAAA,SAAQ,CAAA;EAHjB,EAAA,CAAA;EAIEL,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAE,QAAAF,EAAA,OAAAG,IAAA;EALbK,KAAA,oBAAC,gBAAD;GAAoC,SAAAL;GAClCE,UAAAA;EADa,GAAMH,IAAN;EAMEF,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OANjBQ;AAMiB,CAEpB;AAED,MAAMJ,gBAA0C;CAC9CM,OAAO;CACPC,SAAS;CACTC,OAAO;AACT"}

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

@@ -1,9 +1,6 @@
 
 import { CubeSpinProps } from "./types.js";
-import * as react from "react";
-
 //#region src/components/status/Spin/Spin.d.ts
-declare function Spin(props: CubeSpinProps): react.JSX.Element;
+export declare function Spin(props: CubeSpinProps): import("react").JSX.Element;
 //#endregion
-export { Spin };
 //# sourceMappingURL=Spin.d.ts.map

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

@@ -1,10 +1,9 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.1 | Cube Dev Team */
 import { Block } from "../../Block.js";
 import { InternalSpinner } from "./InternalSpinner.js";
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { Fragment, jsx } from "react/jsx-runtime";
-
 //#region src/components/status/Spin/Spin.tsx
 const SpinContainer = tasty(Block, { styles: { lineHeight: "0" } });
 function Spin(props) {
@@ -38,7 +37,7 @@ function Spin(props) {
 	} else t3 = $[6];
 	return t3;
 }
-
 //#endregion
 export { Spin };
+
 //# sourceMappingURL=Spin.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Spin.js","names":["tasty","Block","InternalSpinner","CubeSpinProps","SpinContainer","styles","lineHeight","Spin","props","$","_c","size","t0","spinning","t1","children","undefined","t2","t3"],"sources":["../../../../src/components/status/Spin/Spin.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Block } from '../../Block';\n\nimport { InternalSpinner } from './InternalSpinner';\nimport { CubeSpinProps } from './types';\n\nconst SpinContainer = tasty(Block, { styles: { lineHeight: '0' } });\n\nexport function Spin(props: CubeSpinProps) {\n  const { size = 'default', spinning = true, children, styles } = props;\n\n  if (!spinning) {\n    return <>{children}</>;\n  }\n\n  return (\n    <SpinContainer styles={styles}>\n      <InternalSpinner size={size} />\n    </SpinContainer>\n  );\n}\n"],"mappings":";;;;;;;;AAOA,MAAMI,gBAAgBJ,MAAMC,OAAO,EAAEI,QAAQ,EAAEC,YAAY,KAAI,EAAG,CAAC;AAEnE,SAAOC,KAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CACL,MAAA,EAAAC,MAAAC,IAAAC,UAAAC,IAAAC,UAAAV,WAAgEG;CAAxD,MAAAG,OAAAC,OAAAI,SAAA,YAAAJ;AAER,KAAI,EAFsBE,OAAAE,SAAA,OAAAF,KAEb;EAAA,IAAAG;AAAA,MAAAR,EAAA,OAAAM,UAAA;AACJE,QAAA,gCAAGF,WAAY;AAAAN,KAAA,KAAAM;AAAAN,KAAA,KAAAQ;QAAAA,MAAAR,EAAA;AAAA,SAAfQ;;CACR,IAAAA;AAAA,KAAAR,EAAA,OAAAE,MAAA;AAIGM,OAAA,oBAAC,mBAAsBN,OAAQ;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAQ;OAAAA,MAAAR,EAAA;CAAA,IAAAS;AAAA,KAAAT,EAAA,OAAAJ,UAAAI,EAAA,OAAAQ,IAAA;AADjCC,OAAA,oBAAC;GAAsBb;aACrBY;IACc;AAAAR,IAAA,KAAAJ;AAAAI,IAAA,KAAAQ;AAAAR,IAAA,KAAAS;OAAAA,MAAAT,EAAA;AAAA,QAFhBS"}
+{"version":3,"file":"Spin.js","names":["tasty","Block","InternalSpinner","CubeSpinProps","SpinContainer","styles","lineHeight","Spin","props","$","_c","size","t0","spinning","t1","children","undefined","t2","t3","_c"],"sources":["../../../../src/components/status/Spin/Spin.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\n\nimport { Block } from '../../Block';\n\nimport { InternalSpinner } from './InternalSpinner';\nimport { CubeSpinProps } from './types';\n\nconst SpinContainer = tasty(Block, { styles: { lineHeight: '0' } });\n\nexport function Spin(props: CubeSpinProps) {\n  const { size = 'default', spinning = true, children, styles } = props;\n\n  if (!spinning) {\n    return <>{children}</>;\n  }\n\n  return (\n    <SpinContainer styles={styles}>\n      <InternalSpinner size={size} />\n    </SpinContainer>\n  );\n}\n"],"mappings":";;;;;;;AAOA,MAAMI,gBAAgBJ,MAAMC,OAAO,EAAEI,QAAQ,EAAEC,YAAY,IAAI,EAAE,CAAC;AAElE,SAAOC,KAAAC,OAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CACL,MAAA,EAAAC,MAAAC,IAAAC,UAAAC,IAAAC,UAAAV,WAAgEG;CAAxD,MAAAG,OAAAC,OAAAI,KAAAA,IAAA,YAAAJ;CAER,IAAI,EAFsBE,OAAAE,KAAAA,IAAA,OAAAF,KAEb;EAAA,IAAAG;EAAA,IAAAR,EAAA,OAAAM,UAAA;GACJE,KAAA,oBAAA,UAAA,EAAGF,SAAQ,CAAA;GAAIN,EAAA,KAAAM;GAAAN,EAAA,KAAAQ;EAAA,OAAAA,KAAAR,EAAA;EAAA,OAAfQ;CAAe;CACvB,IAAAA;CAAA,IAAAR,EAAA,OAAAE,MAAA;EAIGM,KAAA,oBAAC,iBAAD,EAAuBN,KAAI,CAAA;EAAIF,EAAA,KAAAE;EAAAF,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAJ,UAAAI,EAAA,OAAAQ,IAAA;EADjCC,KAAA,oBAAC,eAAD;GAAuBb;GACrBY,UAAAA;EADY,CAAA;EAEER,EAAA,KAAAJ;EAAAI,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAFhBS;AAEgB"}

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

@@ -1,8 +1,7 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.1 | Cube Dev Team */
 import { c } from "react/compiler-runtime";
 import { tasty } from "@tenphi/tasty";
 import { jsx } from "react/jsx-runtime";
-
 //#region src/components/status/Spin/SpinsContainer.tsx
 const SpinsContainerElement = tasty({
 	role: "presentation",
@@ -43,7 +42,7 @@ function SpinsContainer(t0) {
 	} else t3 = $[4];
 	return t3;
 }
-
 //#endregion
 export { SpinsContainer };
+
 //# sourceMappingURL=SpinsContainer.js.map

package/dist/components/status/Spin/SpinsContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"SpinsContainer.js","names":["tasty","ReactNode","SpinsContainerElement","role","styles","boxSizing","display","padding","width","height","opacity","contain","SpinsContainerProps","ownSize","children","SpinsContainer","t0","$","_c","t1","t2","t3"],"sources":["../../../../src/components/status/Spin/SpinsContainer.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nconst SpinsContainerElement = tasty({\n  role: 'presentation',\n  styles: {\n    boxSizing: 'border-box',\n    display: 'inline-block',\n    padding: '(1 / 10 * $cube-spin-size)',\n    width: '$cube-spin-size',\n    height: '$cube-spin-size',\n    opacity: 0.8,\n    contain: 'size layout style paint',\n    // animation: {\n    //   '': 'cube-spin-reduced-motion 2s infinite ease-in-out',\n    //   '@media(prefers-reduced-motion)': 'none',\n    // },\n\n    '@keyframes': {\n      'cube-spin-reduced-motion': {\n        '0%': 'opacity: 0.4;',\n        '50%': 'opacity: 0.8;',\n        '100%': 'opacity: 0.4;',\n      },\n    },\n  },\n});\n\nexport interface SpinsContainerProps {\n  ownSize: number;\n  children?: ReactNode;\n}\n\nexport function SpinsContainer({ ownSize, children }: SpinsContainerProps) {\n  return (\n    <SpinsContainerElement tokens={{ '$cube-spin-size': `${ownSize}px` }}>\n      {children}\n    </SpinsContainerElement>\n  );\n}\n"],"mappings":";;;;;;AAGA,MAAME,wBAAwBF,MAAM;CAClCG,MAAM;CACNC,QAAQ;EACNC,WAAW;EACXC,SAAS;EACTC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,SAAS;EAMT,cAAc,EACZ,4BAA4B;GAC1B,MAAM;GACN,OAAO;GACP,QAAQ;GACV,EACF;EACF;CACD,CAAC;AAOF,SAAOI,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAwB,MAAA,EAAAL,SAAAC,aAAAE;CAEyB,MAAAG,KAAA,GAAGN,QAAO;CAAI,IAAAO;AAAA,KAAAH,EAAA,OAAAE,IAAA;AAAnCC,OAAA,EAAA,mBAAqBD,IAAgB;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAG;OAAAA,MAAAH,EAAA;CAAA,IAAAI;AAAA,KAAAJ,EAAA,OAAAH,YAAAG,EAAA,OAAAG,IAAA;AAApEC,OAAA,oBAAC;GAA8B,QAAAD;GAC5BN;IACqB;AAAAG,IAAA,KAAAH;AAAAG,IAAA,KAAAG;AAAAH,IAAA,KAAAI;OAAAA,MAAAJ,EAAA;AAAA,QAFxBI"}
+{"version":3,"file":"SpinsContainer.js","names":["tasty","ReactNode","SpinsContainerElement","role","styles","boxSizing","display","padding","width","height","opacity","contain","SpinsContainerProps","ownSize","children","SpinsContainer","t0","$","_c","t1","t2","t3","_c"],"sources":["../../../../src/components/status/Spin/SpinsContainer.tsx"],"sourcesContent":["import { tasty } from '@tenphi/tasty';\nimport { ReactNode } from 'react';\n\nconst SpinsContainerElement = tasty({\n  role: 'presentation',\n  styles: {\n    boxSizing: 'border-box',\n    display: 'inline-block',\n    padding: '(1 / 10 * $cube-spin-size)',\n    width: '$cube-spin-size',\n    height: '$cube-spin-size',\n    opacity: 0.8,\n    contain: 'size layout style paint',\n    // animation: {\n    //   '': 'cube-spin-reduced-motion 2s infinite ease-in-out',\n    //   '@media(prefers-reduced-motion)': 'none',\n    // },\n\n    '@keyframes': {\n      'cube-spin-reduced-motion': {\n        '0%': 'opacity: 0.4;',\n        '50%': 'opacity: 0.8;',\n        '100%': 'opacity: 0.4;',\n      },\n    },\n  },\n});\n\nexport interface SpinsContainerProps {\n  ownSize: number;\n  children?: ReactNode;\n}\n\nexport function SpinsContainer({ ownSize, children }: SpinsContainerProps) {\n  return (\n    <SpinsContainerElement tokens={{ '$cube-spin-size': `${ownSize}px` }}>\n      {children}\n    </SpinsContainerElement>\n  );\n}\n"],"mappings":";;;;;AAGA,MAAME,wBAAwBF,MAAM;CAClCG,MAAM;CACNC,QAAQ;EACNC,WAAW;EACXC,SAAS;EACTC,SAAS;EACTC,OAAO;EACPC,QAAQ;EACRC,SAAS;EACTC,SAAS;EAMT,cAAc,EACZ,4BAA4B;GAC1B,MAAM;GACN,OAAO;GACP,QAAQ;EACV,EACF;CACF;AACF,CAAC;AAOD,SAAOI,eAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAwB,MAAA,EAAAL,SAAAC,aAAAE;CAEyB,MAAAG,KAAA,GAAGN,QAAO;CAAI,IAAAO;CAAA,IAAAH,EAAA,OAAAE,IAAA;EAAnCC,KAAA,EAAA,mBAAqBD,GAAe;EAACF,EAAA,KAAAE;EAAAF,EAAA,KAAAG;CAAA,OAAAA,KAAAH,EAAA;CAAA,IAAAI;CAAA,IAAAJ,EAAA,OAAAH,YAAAG,EAAA,OAAAG,IAAA;EAApEC,KAAA,oBAAC,uBAAD;GAA+B,QAAAD;GAC5BN;EADmB,CAAA;EAEEG,EAAA,KAAAH;EAAAG,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAAA,KAAAJ,EAAA;CAAA,OAFxBI;AAEwB"}

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

@@ -1,3 +1,4 @@
 
 import { CubeSpinProps } from "./types.js";
-import { Spin } from "./Spin.js";
+import { Spin } from "./Spin.js";
+export { type CubeSpinProps, Spin };

package/dist/components/status/Spin/types.d.ts

@@ -1,10 +1,9 @@
 
 import { Styles } from "@tenphi/tasty";
 import { ReactNode } from "react";
-
 //#region src/components/status/Spin/types.d.ts
-type SpinSize = 'small' | 'default' | 'large';
-type CubeSpinProps = {
+export type SpinSize = 'small' | 'default' | 'large';
+export type CubeSpinProps = {
   /**
    * Size of the spin.
    * @default 'default'
@@ -19,5 +18,4 @@ type CubeSpinProps = {
   styles?: Styles;
 };
 //#endregion
-export { CubeSpinProps };
 //# sourceMappingURL=types.d.ts.map

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

@@ -3,4 +3,5 @@ import { CubeSpinProps } from "./Spin/types.js";
 import { Spin } from "./Spin/Spin.js";
 import "./Spin/index.js";
 import { CubeLoadingAnimationProps, LoadingAnimation } from "./LoadingAnimation/LoadingAnimation.js";
-import "./LoadingAnimation/index.js";
+import "./LoadingAnimation/index.js";
+export { type CubeLoadingAnimationProps, type CubeSpinProps, LoadingAnimation, Spin };

package/dist/data/item-themes.d.ts

@@ -1,8 +1,6 @@
 
 import { Styles } from "@tenphi/tasty";
-
 //#region src/data/item-themes.d.ts
-type ItemVariant = 'current.item' | 'current.primary' | 'current.outline' | 'current.outline-2' | 'current.clear' | 'current.link' | 'current.card' | 'default.primary' | 'default.outline' | 'default.outline-2' | 'default.clear' | 'default.link' | 'default.item' | 'default.card' | 'primary.card' | 'danger.primary' | 'danger.outline' | 'danger.outline-2' | 'danger.clear' | 'danger.link' | 'danger.item' | 'danger.card' | 'success.primary' | 'success.outline' | 'success.outline-2' | 'success.clear' | 'success.link' | 'success.item' | 'success.card' | 'warning.primary' | 'warning.outline' | 'warning.outline-2' | 'warning.clear' | 'warning.link' | 'warning.item' | 'warning.card' | 'note.primary' | 'note.outline' | 'note.outline-2' | 'note.clear' | 'note.link' | 'note.item' | 'note.card' | 'special.primary' | 'special.outline' | 'special.clear' | 'special.link' | 'special.item';
+export type ItemVariant = 'current.item' | 'current.primary' | 'current.outline' | 'current.outline-2' | 'current.clear' | 'current.link' | 'current.card' | 'default.primary' | 'default.outline' | 'default.outline-2' | 'default.clear' | 'default.link' | 'default.item' | 'default.card' | 'primary.card' | 'danger.primary' | 'danger.outline' | 'danger.outline-2' | 'danger.clear' | 'danger.link' | 'danger.item' | 'danger.card' | 'success.primary' | 'success.outline' | 'success.outline-2' | 'success.clear' | 'success.link' | 'success.item' | 'success.card' | 'warning.primary' | 'warning.outline' | 'warning.outline-2' | 'warning.clear' | 'warning.link' | 'warning.item' | 'warning.card' | 'note.primary' | 'note.outline' | 'note.outline-2' | 'note.clear' | 'note.link' | 'note.item' | 'note.card' | 'special.primary' | 'special.outline' | 'special.clear' | 'special.link' | 'special.item';
 //#endregion
-export { ItemVariant };
 //# sourceMappingURL=item-themes.d.ts.map

package/dist/data/item-themes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.197.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.198.1 | Cube Dev Team */
 //#region src/data/item-themes.ts
 const VALIDATION_STYLES = { border: {
 	invalid: "#danger-accent-text",
@@ -989,7 +989,7 @@ const ITEM_RESTING_COLOR_VARIANTS = Object.fromEntries(Object.entries(ITEM_VARIA
 		}
 	}];
 }));
-
 //#endregion
-export { CURRENT_CLEAR_STYLES, CURRENT_LINK_STYLES, CURRENT_OUTLINE_2_STYLES, CURRENT_OUTLINE_STYLES, CURRENT_PRIMARY_STYLES, DANGER_CLEAR_STYLES, DANGER_LINK_STYLES, DANGER_OUTLINE_2_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_LINK_STYLES, DEFAULT_OUTLINE_2_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, ITEM_ACTION_BASE_STYLES, ITEM_RESTING_COLOR_VARIANTS, ITEM_VARIANTS, NOTE_CLEAR_STYLES, NOTE_LINK_STYLES, NOTE_OUTLINE_2_STYLES, NOTE_OUTLINE_STYLES, NOTE_PRIMARY_STYLES, ROW_STATE_ALIASES, SPECIAL_CLEAR_STYLES, SPECIAL_LINK_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_LINK_STYLES, SUCCESS_OUTLINE_2_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, WARNING_CLEAR_STYLES, WARNING_LINK_STYLES, WARNING_OUTLINE_2_STYLES, WARNING_OUTLINE_STYLES, WARNING_PRIMARY_STYLES, resolveItemVariant };
+export { CURRENT_CARD_STYLES, CURRENT_CLEAR_STYLES, CURRENT_ITEM_STYLES, CURRENT_LINK_STYLES, CURRENT_OUTLINE_2_STYLES, CURRENT_OUTLINE_STYLES, CURRENT_PRIMARY_STYLES, DANGER_CARD_STYLES, DANGER_CLEAR_STYLES, DANGER_ITEM_STYLES, DANGER_LINK_STYLES, DANGER_OUTLINE_2_STYLES, DANGER_OUTLINE_STYLES, DANGER_PRIMARY_STYLES, DEFAULT_CARD_STYLES, DEFAULT_CLEAR_STYLES, DEFAULT_ITEM_STYLES, DEFAULT_LINK_STYLES, DEFAULT_OUTLINE_2_STYLES, DEFAULT_OUTLINE_STYLES, DEFAULT_PRIMARY_STYLES, ITEM_ACTION_BASE_STYLES, ITEM_RESTING_COLOR_VARIANTS, ITEM_VARIANTS, NOTE_CARD_STYLES, NOTE_CLEAR_STYLES, NOTE_ITEM_STYLES, NOTE_LINK_STYLES, NOTE_OUTLINE_2_STYLES, NOTE_OUTLINE_STYLES, NOTE_PRIMARY_STYLES, PRIMARY_CARD_STYLES, ROW_STATE_ALIASES, SPECIAL_CLEAR_STYLES, SPECIAL_ITEM_STYLES, SPECIAL_LINK_STYLES, SPECIAL_OUTLINE_STYLES, SPECIAL_PRIMARY_STYLES, SUCCESS_CARD_STYLES, SUCCESS_CLEAR_STYLES, SUCCESS_ITEM_STYLES, SUCCESS_LINK_STYLES, SUCCESS_OUTLINE_2_STYLES, SUCCESS_OUTLINE_STYLES, SUCCESS_PRIMARY_STYLES, VALIDATION_STYLES, WARNING_CARD_STYLES, WARNING_CLEAR_STYLES, WARNING_ITEM_STYLES, WARNING_LINK_STYLES, WARNING_OUTLINE_2_STYLES, WARNING_OUTLINE_STYLES, WARNING_PRIMARY_STYLES, resolveItemVariant };
+
 //# sourceMappingURL=item-themes.js.map