@spaced-out/ui-design-system 0.5.36 → 0.5.38

package/.cspell/custom-words.txt

@@ -1,5 +1,6 @@
 Aaiun
 Aditya
+aditya-senapati
 aditya-kaushal
 Aliasify
 amet

package/.github/workflows/publish_to_npm.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Check Permissions
         id: check-permissions
         env:
-          ALLOWED_USERS: superrover, Anant-Raj, diwakersurya, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense, keshavsensehq, SahilShrivastava1, aditya-kaushal, LakshayKumar-1
+          ALLOWED_USERS: superrover, Anant-Raj, diwakersurya, ashwini-sensehq, vish-sah, VishalBarnawal, sanskar-s, VivekJangid, sharad-kushwah, Swatantramishra1, bhatiarush27, darsh-mecwan-sense, keshavsensehq, SahilShrivastava1, aditya-kaushal, LakshayKumar-1, aditya-senapati
         if: ${{ !contains(env.ALLOWED_USERS, github.actor) }}
         run: |
           echo "You don't have correct permissions to do this release"

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.5.38](https://github.com/spaced-out/ui-design-system/compare/v0.5.37...v0.5.38) (2025-12-19)
+
+
+### Features
+
+* **ScrollingLoader:** Add animated loading component with skeleton rows and cycling text ([#453](https://github.com/spaced-out/ui-design-system/issues/453)) ([6b489cc](https://github.com/spaced-out/ui-design-system/commit/6b489ccc9195c36908779be8e2d64589cbe2aae0))
+
+### [0.5.37](https://github.com/spaced-out/ui-design-system/compare/v0.5.36...v0.5.37) (2025-12-18)
+
+
+### Features
+
+* **GDS-519:** Stage Arrows ([#410](https://github.com/spaced-out/ui-design-system/issues/410)) ([16e40a8](https://github.com/spaced-out/ui-design-system/commit/16e40a85168d100eef29874ab30ff64f1041ff89))
+* github permission for genesis ([#452](https://github.com/spaced-out/ui-design-system/issues/452)) ([33b49cd](https://github.com/spaced-out/ui-design-system/commit/33b49cdd0819d01984efb03d95bfef30ef9b92f8))
+
 ### [0.5.36](https://github.com/spaced-out/ui-design-system/compare/v0.5.35...v0.5.36) (2025-12-15)
 
 

package/design-tokens/size/base-size.json

@@ -18,6 +18,9 @@
     "12":{
       "value": "12px"
     },
+    "16":{
+      "value": "16px"
+    },
     "18": {
       "value": "18px"
     },
@@ -96,6 +99,9 @@
     "140": {
       "value": "140px"
     },
+    "150": {
+      "value": "150px"
+    },
     "160": {
       "value": "160px"
     },
@@ -120,6 +126,9 @@
     "276": {
       "value": "276px"
     },
+    "284": {
+      "value": "284px"
+    },
     "300": {
       "value": "300px"
     },
@@ -132,6 +141,9 @@
     "400": {
       "value": "400px"
     },
+    "426": {
+      "value": "426px"
+    },
     "480": {
       "value": "480px"
     },

package/lib/components/ScrollingLoader/ScrollingLoader.d.ts

@@ -0,0 +1,35 @@
+import type { Flow } from 'flow-to-typescript-codemod';
+export declare const SCROLLING_LOADER_SIZE: Readonly<{
+    medium: "medium";
+    large: "large";
+    fluid: "fluid";
+}>;
+export type ScrollingLoaderSize = (typeof SCROLLING_LOADER_SIZE)[keyof typeof SCROLLING_LOADER_SIZE];
+type ClassNames = Readonly<{
+    wrapper?: string;
+    skeletonContainer?: string;
+    textContainer?: string;
+}>;
+export interface IconItem {
+    name: string;
+    type?: 'regular' | 'solid' | 'duotone' | 'brands';
+}
+export interface ScrollingLoaderProps {
+    /** List of icons to display in skeleton rows */
+    iconList: IconItem[];
+    /** List of text messages to cycle through */
+    textList: string[];
+    /** Size variant of the loader */
+    size?: ScrollingLoaderSize;
+    /** Custom class names for styling */
+    classNames?: ClassNames;
+    /** Test ID for the component */
+    testId?: string;
+    /** Animation duration in ms for each text item (default: 2500) */
+    textAnimationDuration?: number;
+    /** Whether to loop through texts or stop at the last one (default: false) */
+    loopTexts?: boolean;
+}
+export declare const ScrollingLoader: Flow.AbstractComponent<ScrollingLoaderProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=ScrollingLoader.d.ts.map

package/lib/components/ScrollingLoader/ScrollingLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollingLoader.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollingLoader/ScrollingLoader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAUrD,eAAO,MAAM,qBAAqB;;;;EAIhC,CAAC;AAEH,MAAM,MAAM,mBAAmB,GAC7B,CAAC,OAAO,qBAAqB,CAAC,CAAC,MAAM,OAAO,qBAAqB,CAAC,CAAC;AAErE,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC,CAAC;AAEH,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,CAAC;CACnD;AAED,MAAM,WAAW,oBAAoB;IACnC,gDAAgD;IAChD,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,iCAAiC;IACjC,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,qCAAqC;IACrC,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,gCAAgC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kEAAkE;IAClE,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,6EAA6E;IAC7E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,EAAE,IAAI,CAAC,iBAAiB,CAClD,oBAAoB,EACpB,cAAc,CAqOf,CAAC"}

package/lib/components/ScrollingLoader/ScrollingLoader.js

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ScrollingLoader = exports.SCROLLING_LOADER_SIZE = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _qa = require("../../utils/qa");
+var _SemanticIcon = require("../Icon/SemanticIcon");
+var _ScrollingLoaderModule = _interopRequireDefault(require("./ScrollingLoader.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SCROLLING_LOADER_SIZE = exports.SCROLLING_LOADER_SIZE = Object.freeze({
+  medium: 'medium',
+  large: 'large',
+  fluid: 'fluid'
+});
+const ScrollingLoader = exports.ScrollingLoader = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    iconList,
+    textList,
+    size = SCROLLING_LOADER_SIZE.medium,
+    classNames,
+    testId,
+    textAnimationDuration = 2500,
+    loopTexts = false
+  } = _ref;
+  // Track active and exiting text indices for animation
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  const [exitingIndex, setExitingIndex] = React.useState(null);
+
+  // Ref to track active index for interval callback (avoids stale closure)
+  const activeIndexRef = React.useRef(0);
+
+  // Ref to track textList length for interval callback (supports streaming without restart)
+  const textListLengthRef = React.useRef(textList.length);
+
+  // Ref to track loopTexts for interval callback (avoids stale closure)
+  const loopTextsRef = React.useRef(loopTexts);
+
+  // Ref to track the timeout for clearing exiting state
+  const exitingTimeoutRef = React.useRef(null);
+
+  // Create extended icon list for infinite scroll effect with unique IDs
+  const extendedIconList = React.useMemo(() =>
+  // Duplicate the list to create seamless looping
+  [...iconList, ...iconList].map((icon, idx) => ({
+    ...icon,
+    id: `${icon.name}-${idx < iconList.length ? 'a' : 'b'}-${idx % iconList.length}`
+  })), [iconList]);
+  const skeletonAnimationDuration = iconList.length * 1.5;
+
+  // Create text items with unique IDs
+  const textItems = React.useMemo(() => textList.map((text, idx) => ({
+    text,
+    id: `text-${idx}-${text.slice(0, 10).replace(/\s/g, '')}`,
+    index: idx
+  })), [textList]);
+
+  // Keep textList length ref in sync (supports streaming without restarting interval)
+  React.useEffect(() => {
+    textListLengthRef.current = textList.length;
+  }, [textList.length]);
+
+  // Keep loopTexts ref in sync
+  React.useEffect(() => {
+    loopTextsRef.current = loopTexts;
+  }, [loopTexts]);
+
+  // Reset indices when textList length decreases and current index is out of bounds
+  // This prevents invisible text when switching to a shorter list
+  React.useEffect(() => {
+    if (activeIndexRef.current >= textList.length) {
+      activeIndexRef.current = 0;
+      setActiveIndex(0);
+      setExitingIndex(null);
+    }
+  }, [textList.length]);
+
+  // Animation interval - uses refs to support streaming without restart
+  React.useEffect(() => {
+    const interval = setInterval(() => {
+      const currentLength = textListLengthRef.current;
+      const shouldLoop = loopTextsRef.current;
+
+      // Only animate if we have multiple items
+      if (currentLength <= 1) {
+        return;
+      }
+      const currentIndex = activeIndexRef.current;
+      const isAtLastItem = currentIndex === currentLength - 1;
+
+      // If not looping and at the last item, don't advance
+      if (!shouldLoop && isAtLastItem) {
+        return;
+      }
+      const nextIndex = (currentIndex + 1) % currentLength;
+
+      // Set exiting index to current
+      setExitingIndex(currentIndex);
+
+      // Clear any existing timeout before creating a new one
+      if (exitingTimeoutRef.current !== null) {
+        clearTimeout(exitingTimeoutRef.current);
+      }
+
+      // Clear exiting state after animation completes
+      exitingTimeoutRef.current = setTimeout(() => {
+        setExitingIndex(null);
+      }, 350);
+
+      // Update ref and state
+      activeIndexRef.current = nextIndex;
+      setActiveIndex(nextIndex);
+    }, textAnimationDuration);
+    return () => {
+      clearInterval(interval);
+      // Clean up any pending timeout on unmount
+      if (exitingTimeoutRef.current !== null) {
+        clearTimeout(exitingTimeoutRef.current);
+      }
+    };
+  }, [textAnimationDuration]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: ref,
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'wrapper'
+    }),
+    className: (0, _classify.default)(_ScrollingLoaderModule.default.wrapper, {
+      [_ScrollingLoaderModule.default.medium]: size === SCROLLING_LOADER_SIZE.medium,
+      [_ScrollingLoaderModule.default.large]: size === SCROLLING_LOADER_SIZE.large,
+      [_ScrollingLoaderModule.default.fluid]: size === SCROLLING_LOADER_SIZE.fluid
+    }, classNames?.wrapper),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'skeleton'
+      }),
+      className: (0, _classify.default)(_ScrollingLoaderModule.default.skeletonContainer, classNames?.skeletonContainer),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _ScrollingLoaderModule.default.skeletonScroller,
+        style: {
+          '--animation-duration': `${skeletonAnimationDuration}s`
+        },
+        children: extendedIconList.map(icon => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classify.default)(_ScrollingLoaderModule.default.skeletonRow, {
+            [_ScrollingLoaderModule.default.skeletonRowSmall]: size === SCROLLING_LOADER_SIZE.medium,
+            [_ScrollingLoaderModule.default.skeletonRowLarge]: size === SCROLLING_LOADER_SIZE.large || size === SCROLLING_LOADER_SIZE.fluid
+          }),
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: `skeleton-row-${icon.id}`
+          }),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SemanticIcon.SemanticIcon, {
+            name: icon.name,
+            type: icon.type || 'regular',
+            size: size === SCROLLING_LOADER_SIZE.medium ? 'small' : 'medium',
+            semantic: "neutral",
+            testId: (0, _qa.generateTestId)({
+              base: testId,
+              slot: `icon-${icon.id}`
+            })
+          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: _ScrollingLoaderModule.default.skeletonBars,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: _ScrollingLoaderModule.default.skeletonBarTitle
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+              className: _ScrollingLoaderModule.default.skeletonBarSubtitle
+            })]
+          })]
+        }, icon.id))
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _ScrollingLoaderModule.default.gradientTop
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _ScrollingLoaderModule.default.gradientBottom
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      "data-testid": (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'text'
+      }),
+      className: (0, _classify.default)(_ScrollingLoaderModule.default.textContainer, classNames?.textContainer),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _ScrollingLoaderModule.default.textScroller,
+        children: textItems.map(item => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          className: (0, _classify.default)(_ScrollingLoaderModule.default.textItem, {
+            [_ScrollingLoaderModule.default.textItemMedium]: size === SCROLLING_LOADER_SIZE.medium,
+            [_ScrollingLoaderModule.default.textItemLarge]: size === SCROLLING_LOADER_SIZE.large || size === SCROLLING_LOADER_SIZE.fluid,
+            [_ScrollingLoaderModule.default.textItemStatic]: textList.length <= 1,
+            [_ScrollingLoaderModule.default.textItemActive]: textList.length > 1 && item.index === activeIndex,
+            [_ScrollingLoaderModule.default.textItemExiting]: textList.length > 1 && item.index === exitingIndex
+          }),
+          "data-testid": (0, _qa.generateTestId)({
+            base: testId,
+            slot: `text-item-${item.id}`
+          }),
+          children: item.text
+        }, item.id))
+      })
+    })]
+  });
+});

package/lib/components/ScrollingLoader/ScrollingLoader.module.css

@@ -0,0 +1,283 @@
+@value (
+  colorBackgroundTertiary,
+  colorBackgroundSecondary,
+  colorBorderTertiary,
+  colorTextPrimary,
+  colorFillNone
+) from '../../styles/variables/_color.css';
+
+@value (
+  spaceNone,
+  spaceXXSmall,
+  spaceXSmall,
+  spaceSmall,
+  spaceMedium,
+  spaceFluid,
+  spaceNegHalfFluid
+) from '../../styles/variables/_space.css';
+
+@value (
+  size8,
+  size12,
+  size16,
+  size20,
+  size24,
+  size34,
+  size42,
+  size90,
+  size100,
+  size150,
+  size200,
+  size240,
+  size260,
+  size276,
+  size284,
+  size300,
+  size320,
+  size426,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+@value (
+  borderRadiusXSmall,
+  borderRadiusMedium,
+  borderWidthPrimary
+) from '../../styles/variables/_border.css';
+
+@value (
+  motionDurationNormal,
+  motionDurationSlow,
+  motionEaseInEaseOut
+) from '../../styles/variables/_motion.css';
+
+@value (
+  opacity0,
+  opacity100
+) from '../../styles/variables/_opacity.css';
+
+@value (
+  fontWeightMedium
+) from '../../styles/variables/_font.css';
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: spaceMedium;
+}
+
+.medium {
+  width: size284;
+}
+
+.large {
+  width: size426;
+}
+
+.fluid {
+  width: sizeFluid;
+}
+
+/* Skeleton Container */
+.skeletonContainer {
+  position: relative;
+  width: sizeFluid;
+  overflow: hidden;
+  border: borderWidthPrimary dashed colorBorderTertiary;
+  border-radius: borderRadiusMedium;
+  background-color: colorBackgroundTertiary;
+}
+
+/* Size-specific skeleton container heights */
+.medium .skeletonContainer {
+  height: size200;
+}
+
+.large .skeletonContainer,
+.fluid .skeletonContainer {
+  height: size300;
+}
+
+.skeletonScroller {
+  --animation-duration: 9s;
+  display: flex;
+  flex-direction: column;
+  gap: spaceMedium;
+  animation: scrollUp var(--animation-duration) linear infinite;
+}
+
+/* Size-specific skeleton scroller padding */
+.medium .skeletonScroller {
+  padding: spaceSmall;
+}
+
+.large .skeletonScroller,
+.fluid .skeletonScroller {
+  padding: spaceMedium;
+}
+
+.skeletonRow {
+  display: flex;
+  align-items: center;
+  gap: spaceXSmall;
+  flex-shrink: 0;
+}
+
+.skeletonRowSmall {
+  gap: spaceXSmall;
+}
+
+.skeletonRowLarge {
+  gap: spaceSmall;
+}
+
+.skeletonBars {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXSmall;
+  flex: 1;
+}
+
+.skeletonBarTitle {
+  width: size90;
+  height: size12;
+  background-color: colorBackgroundSecondary;
+  border-radius: borderRadiusXSmall;
+}
+
+.skeletonBarSubtitle {
+  width: sizeFluid;
+  height: size8;
+  background-color: colorBackgroundSecondary;
+  border-radius: borderRadiusXSmall;
+}
+
+.skeletonRowLarge .skeletonBarTitle {
+  height: calc(size8 * 2);
+}
+
+.skeletonRowLarge .skeletonBarSubtitle {
+  height: size12;
+}
+
+/* Gradient Overlays */
+.gradientTop {
+  position: absolute;
+  top: calc(borderWidthPrimary * -1);
+  left: calc(borderWidthPrimary * -1);
+  right: calc(borderWidthPrimary * -1);
+  background: linear-gradient(
+    to bottom,
+    colorBackgroundTertiary opacity0,
+    colorFillNone opacity100
+  );
+  pointer-events: none;
+}
+
+.gradientBottom {
+  position: absolute;
+  bottom: calc(borderWidthPrimary * -1);
+  left: calc(borderWidthPrimary * -1);
+  right: calc(borderWidthPrimary * -1);
+  background: linear-gradient(
+    to top,
+    colorBackgroundTertiary opacity0,
+    colorFillNone opacity100
+  );
+  pointer-events: none;
+}
+
+/* Size-specific gradient overlay heights (50% of container height) */
+.medium .gradientTop,
+.medium .gradientBottom {
+  height: size100;
+}
+
+.large .gradientTop,
+.large .gradientBottom,
+.fluid .gradientTop,
+.fluid .gradientBottom {
+  height: size150;
+}
+
+/* Text Container */
+.textContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  width: sizeFluid;
+  overflow: hidden;
+}
+
+/* Size-specific text container heights */
+.medium .textContainer {
+  height: calc(size20 + borderWidthPrimary);
+}
+
+.large .textContainer,
+.fluid .textContainer {
+  height: size24;
+}
+
+.textScroller {
+  position: absolute;
+  top: spaceNone;
+  left: spaceNone;
+  right: spaceNone;
+  bottom: spaceNone;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.textItem {
+  position: absolute;
+  white-space: nowrap;
+  color: colorTextPrimary;
+  font-weight: fontWeightMedium;
+  opacity: opacity0;
+  transform: translateY(spaceFluid);
+  /* No transition by default - allows instant reset without animation */
+}
+
+/* Size-specific text typography - applied conditionally via TSX */
+.textItemMedium {
+  composes: bodyMedium from '../../styles/typography.module.css';
+}
+
+.textItemLarge {
+  composes: bodyLarge from '../../styles/typography.module.css';
+}
+
+/* Active state - text sliding in and visible */
+.textItemActive {
+  opacity: opacity100;
+  transform: translateY(spaceNone);
+  transition: opacity motionDurationNormal motionEaseInEaseOut,
+    transform motionDurationNormal motionEaseInEaseOut;
+}
+
+/* Exiting state - text sliding out upward */
+.textItemExiting {
+  opacity: opacity0;
+  transform: translateY(spaceNegHalfFluid);
+  transition: opacity motionDurationNormal motionEaseInEaseOut,
+    transform motionDurationNormal motionEaseInEaseOut;
+}
+
+/* Static state for single item - no animation */
+.textItemStatic {
+  opacity: opacity100;
+  transform: translateY(spaceNone);
+}
+
+/* Scroll Animation */
+@keyframes scrollUp {
+  0% {
+    transform: translateY(spaceNone);
+  }
+  100% {
+    transform: translateY(spaceNegHalfFluid);
+  }
+}

package/lib/components/ScrollingLoader/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../components/ScrollingLoader/ScrollingLoader';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/ScrollingLoader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollingLoader/index.ts"],"names":[],"mappings":"AAAA,cAAc,gDAAgD,CAAC"}

package/lib/components/ScrollingLoader/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ScrollingLoader = require("./ScrollingLoader");
+Object.keys(_ScrollingLoader).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ScrollingLoader[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ScrollingLoader[key];
+    }
+  });
+});

package/lib/components/StageArrows/StageArrow/StageArrow.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+import type { IconType } from '../../../components/Icon';
+import type { BaseTooltipProps } from '../../../components/Tooltip/Tooltip';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    icon?: string;
+}>;
+export declare const STAGE_ARROW_TYPE: Readonly<{
+    primary: "primary";
+    danger: "danger";
+    success: "success";
+    warning: "warning";
+    information: "information";
+}>;
+export type StageArrowType = (typeof STAGE_ARROW_TYPE)[keyof typeof STAGE_ARROW_TYPE];
+export interface StageArrowProps {
+    id: string;
+    type?: StageArrowType;
+    disabled?: boolean;
+    iconLeftName?: string;
+    iconLeftType?: IconType;
+    iconRightName?: string;
+    iconRightType?: IconType;
+    classNames?: ClassNames;
+    isEndStageArrow?: boolean;
+    isStartStageArrow?: boolean;
+    onStageArrowClick?: ((id: string, e?: React.SyntheticEvent<HTMLElement> | null | undefined) => unknown) | null | undefined;
+    children: React.ReactNode;
+    tooltip?: BaseTooltipProps;
+    testId?: string;
+    locked?: boolean;
+}
+export declare const StageArrow: Flow.AbstractComponent<StageArrowProps, HTMLButtonElement>;
+export {};
+//# sourceMappingURL=StageArrow.d.ts.map

package/lib/components/StageArrows/StageArrow/StageArrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StageArrow.d.ts","sourceRoot":"","sources":["../../../../src/components/StageArrows/StageArrow/StageArrow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAOrD,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAElD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,gCAAgC,CAAC;AAOrE,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;EAM3B,CAAC;AAEH,MAAM,MAAM,cAAc,GACxB,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,OAAO,gBAAgB,CAAC,CAAC;AAE3D,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,aAAa,CAAC,EAAE,QAAQ,CAAC;IACzB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,iBAAiB,CAAC,EACd,CAAC,CACC,EAAE,EAAE,MAAM,EACV,CAAC,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG,IAAI,GAAG,SAAS,KACrD,OAAO,CAAC,GACb,IAAI,GACJ,SAAS,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,UAAU,EAAE,IAAI,CAAC,iBAAiB,CAC7C,eAAe,EACf,iBAAiB,CAsFlB,CAAC"}