@wix/patterns 1.255.0 → 1.256.0

package/src/components/Illustration/AddItemEmptyState.tsx

@@ -0,0 +1,38 @@
+import React, { memo, SVGAttributes } from 'react';
+
+export const AddItemEmptyState = memo(function AddItemEmptyState(
+  props: SVGAttributes<HTMLOrSVGElement>,
+) {
+  return (
+    <svg width="120" height="120" viewBox="0 0 120 120" {...props}>
+      <path
+        d="M86.048 8.821L49.156 22.191C47.1886 22.9039 45.585 24.3691 44.698 26.2644C43.8109 28.1596 43.7131 30.3296 44.426 32.297L44.644 32.899C45.3569 34.8664 46.8221 36.47 48.7174 37.357C50.6126 38.2441 52.7826 38.3419 54.75 37.629L91.642 24.259C93.6094 23.5461 95.213 22.0809 96.1 20.1856C96.987 18.2904 97.0849 16.1204 96.372 14.153L96.154 13.551C95.4411 11.5836 93.9758 9.98003 92.0806 9.09298C90.1854 8.20593 88.0154 8.1081 86.048 8.821Z"
+        fill="#C2E2FF"
+      />
+      <path
+        d="M95.4151 46.93L63.6291 40.912L57.6121 72.698L89.3971 78.715L95.4151 46.929V46.93Z"
+        fill="#116DFF"
+      />
+      <path
+        d="M85.34 60.98L77.03 59.4L78.59 51.16L77.61 50.98L76.05 59.22L67.88 57.67L67.7 58.65L75.86 60.2L74.3 68.44L75.29 68.63L76.85 60.39L85.16 61.96L85.34 60.98Z"
+        fill="white"
+      />
+      <path
+        d="M83.3 112.89C73.47 112.89 64.46 105.47 62.2 94.79L73.94 92.3C75.14 97.97 80.0399 101.75 84.8799 100.72C87.1099 100.25 89.03 98.8 90.29 96.65C91.66 94.3 92.08 91.44 91.47 88.59L103.21 86.1C104.43 91.87 103.53 97.77 100.66 102.69C97.68 107.81 92.96 111.28 87.37 112.46C86.01 112.75 84.6499 112.89 83.3099 112.89H83.3Z"
+        fill="#FFB6AC"
+      />
+      <path
+        d="M40 102C40 96.477 35.523 92 30 92C24.477 92 20 96.477 20 102C20 107.523 24.477 112 30 112C35.523 112 40 107.523 40 102Z"
+        fill="#28BF9A"
+      />
+      <path
+        d="M42.97 48.98C47.63 59.3 43.03 71.44 32.71 76.1C22.39 80.76 10.25 76.16 5.58997 65.84"
+        fill="#FFD527"
+      />
+      <path
+        d="M29.59 23.83L22.41 32.35L11.45 30.39L7.66003 19.92L14.84 11.4L25.8 13.36L29.59 23.83ZM111 31.5C111 28.46 108.54 26 105.5 26C102.46 26 100 28.46 100 31.5C100 34.54 102.46 37 105.5 37C108.54 37 111 34.54 111 31.5ZM115 59H100V60H115V59ZM105 65H98V66H105V65Z"
+        fill="#192C55"
+      />
+    </svg>
+  );
+});

package/src/components/Illustration/CollectionPremiumEmptyStateIllustration.tsx

@@ -0,0 +1,47 @@
+import React, { memo, SVGAttributes } from 'react';
+
+export const CollectionPremiumEmptyStateIllustration = memo(
+  function CollectionPremiumEmptyStateIllustration(
+    props: SVGAttributes<HTMLOrSVGElement>,
+  ) {
+    return (
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="120"
+        height="120"
+        viewBox="0 0 120 120"
+        fill="none"
+        {...props}
+      >
+        <path
+          d="M89.9246 29.7913L2.30566 46.458L14.3605 109.832L101.979 93.165L89.9246 29.7913Z"
+          fill="white"
+        />
+        <path
+          d="M90.559 33.1349L21.7036 46.2324L33.1231 106.266L101.978 93.1684L90.559 33.1349Z"
+          fill="#C2E2FF"
+        />
+        <path
+          d="M80.4949 86.0762L110.94 93.8697C112.587 94.2561 113.611 95.9017 113.23 97.5497L108.5 116.05C108.039 117.682 106.344 118.635 104.71 118.18L74.4399 110.43C73.6468 110.244 72.9598 109.751 72.5303 109.059C72.1009 108.367 71.964 107.533 72.1499 106.74L76.8799 88.2397C77.3287 86.6693 78.9191 85.7326 80.4949 86.0762ZM89.3352 26.6708L90.9722 35.2765L3.35326 51.9431L1.71631 43.3374L89.3352 26.6708ZM61.5199 3.96973L63.5099 27.1997L31.9999 33.0697L27.6399 11.3597L39.2299 19.8197L45.3899 6.96973L53.3399 17.0397L61.5199 3.96973Z"
+          fill="#116DFF"
+        />
+        <path
+          d="M86.9894 40.1707L89.9046 55.4959L31.099 66.6817L28.1839 51.3565L86.9894 40.1707ZM7.31988 45.54C7.9771 45.54 8.50988 46.0728 8.50988 46.73C8.50988 47.3872 7.9771 47.92 7.31988 47.92C6.66266 47.92 6.12988 47.3872 6.12988 46.73C6.12988 46.0728 6.66266 45.54 7.31988 45.54ZM11.8499 44.68C12.5071 44.68 13.0399 45.2127 13.0399 45.87C13.0399 46.5272 12.5071 47.06 11.8499 47.06C11.1927 47.06 10.6599 46.5272 10.6599 45.87C10.6599 45.2127 11.1927 44.68 11.8499 44.68ZM16.2199 43.85C16.8771 43.85 17.4099 44.3828 17.4099 45.04C17.4099 45.6972 16.8771 46.23 16.2199 46.23C15.5627 46.23 15.0299 45.6972 15.0299 45.04C15.0299 44.3828 15.5627 43.85 16.2199 43.85Z"
+          fill="white"
+        />
+        <path
+          d="M23.4093 48.1216L34.4213 106.014L14.4101 109.82L3.39807 51.9281L23.4093 48.1216ZM76.5614 89.4936L112.909 98.7991L112.019 102.277L75.671 92.9714L76.5614 89.4936ZM73.7861 52.1598L73.9728 53.1422L35.2557 60.4999L35.069 59.5175L73.7861 52.1598ZM56.8072 50.5216L56.9939 51.504L34.3688 55.8036L34.1821 54.8212L56.8072 50.5216ZM92.5212 12.3009L92.8614 13.2413L71.4309 20.9948L71.0907 20.0545L92.5212 12.3009ZM75.6169 6.86035L76.3681 7.52048L68.2946 16.707L67.5435 16.0469L75.6169 6.86035Z"
+          fill="#192C55"
+        />
+        <path
+          d="M44.6799 86.5904L104.36 57.6504L117.12 83.8904L57.4399 112.83L44.6799 86.5904Z"
+          fill="white"
+        />
+        <path
+          d="M104.83 56.33L104.86 56.36L118.49 84.36L56.9998 114.17L43.3398 86.12L104.83 56.33ZM95.6687 62.9894L54.7584 82.8081C55.5908 84.9982 55.6307 87.4217 54.8535 89.6517C54.0157 92.0555 52.2944 94.0452 50.0461 95.2213L49.9918 95.248L53.7034 102.87C58.4059 101.01 63.8018 102.97 66.1966 107.47L107.326 87.5417C105.411 82.8753 107.288 77.4904 111.698 75.0275L108.077 67.5871C103.401 69.3966 98.0594 67.4465 95.6687 62.9894ZM74.9709 79.0503C78.3928 75.7803 83.8207 75.9066 87.0945 79.3325C90.3684 82.7583 90.2483 88.1864 86.8265 91.4564C83.4046 94.7264 77.9767 94.6001 74.7029 91.1742C71.4291 87.7484 71.5491 82.3203 74.9709 79.0503Z"
+          fill="#28BF9A"
+        />
+      </svg>
+    );
+  },
+);

package/src/components/InfiniteScrollLoader/InfiniteScrollLoader.tsx

@@ -0,0 +1,25 @@
+import React, { MutableRefObject } from 'react';
+import { Box, Loader, LoaderProps } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { CollectionStateProps } from '../collectionStateProps';
+import { FiltersMap } from '@wix/bex-core';
+import { InfiniteScrollLoaderBase } from './InfiniteScrollLoaderBase';
+
+export interface InfiniteScrollLoaderProps<T, F extends FiltersMap>
+  extends CollectionStateProps<T, F>,
+    Partial<LoaderProps> {
+  targetRef: MutableRefObject<HTMLElement | null | undefined>;
+}
+
+export const InfiniteScrollLoader = observer(function Table<
+  T,
+  F extends FiltersMap,
+>({ state, targetRef, ...rest }: InfiniteScrollLoaderProps<T, F>) {
+  return (
+    <InfiniteScrollLoaderBase state={state} targetRef={targetRef}>
+      <Box align="center" padding="large">
+        <Loader {...rest} />
+      </Box>
+    </InfiniteScrollLoaderBase>
+  );
+});

package/src/components/InfiniteScrollLoader/InfiniteScrollLoaderBase.tsx

@@ -0,0 +1,32 @@
+import React, { MutableRefObject } from 'react';
+import { LoaderProps } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+import { CollectionStateProps } from '../collectionStateProps';
+import { FiltersMap } from '@wix/bex-core';
+
+export interface InfiniteScrollLoaderProps<T, F extends FiltersMap>
+  extends CollectionStateProps<T, F>,
+    Partial<LoaderProps> {
+  targetRef: MutableRefObject<HTMLElement | null | undefined>;
+  children: JSX.Element;
+}
+
+export const InfiniteScrollLoaderBase = observer(
+  function InfiniteScrollLoaderBase<T, F extends FiltersMap>({
+    state,
+    targetRef,
+    children,
+  }: InfiniteScrollLoaderProps<T, F>) {
+    const { fetchedLastPage, showRefreshLoader, showErrorState } = state;
+    return (
+      <>
+        <div
+          ref={(el) => {
+            targetRef.current = el as HTMLElement | null;
+          }}
+        />
+        {!fetchedLastPage && !showRefreshLoader && !showErrorState && children}
+      </>
+    );
+  },
+);

package/src/components/InfiniteScrollLoader/InfiniteScrollLoaderBaseProps.ts

@@ -0,0 +1,6 @@
+import { MutableRefObject } from 'react';
+import { LoaderProps } from '@wix/design-system';
+
+export interface InfiniteScrollLoaderBaseProps extends Partial<LoaderProps> {
+  targetRef: MutableRefObject<HTMLElement | null | undefined>;
+}

package/src/components/InfiniteScrollLoader/SkeletonInfiniteScrollLoader.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap } from '@wix/bex-core';
+import { GridBaseState } from '../../state';
+import { InfiniteScrollLoaderBaseProps } from './InfiniteScrollLoaderBaseProps';
+import { InfiniteScrollLoaderBase } from './InfiniteScrollLoaderBase';
+import { SkeletonGrid } from '../SkeletonGrid';
+import { Box } from '@wix/design-system';
+
+export interface SkeletonInfiniteScrollLoaderProps<T, F extends FiltersMap>
+  extends InfiniteScrollLoaderBaseProps {
+  state: GridBaseState<T, F>;
+}
+
+function _SkeletonInfiniteScrollLoader<T, F extends FiltersMap>({
+  state,
+  targetRef,
+  dataHook,
+}: SkeletonInfiniteScrollLoaderProps<T, F>) {
+  const { contentPaddingPx } = state.toolbar;
+
+  return (
+    <InfiniteScrollLoaderBase state={state.collection} targetRef={targetRef}>
+      <Box dataHook={dataHook} paddingBottom={contentPaddingPx}>
+        <SkeletonGrid state={state} />
+      </Box>
+    </InfiniteScrollLoaderBase>
+  );
+}
+
+export const SkeletonInfiniteScrollLoader = observer(
+  _SkeletonInfiniteScrollLoader,
+);

package/src/components/InitialLoader/InitialLoader.tsx

@@ -0,0 +1,28 @@
+import React, { CSSProperties } from 'react';
+import { Box, BoxProps, Loader, LoaderProps } from '@wix/design-system';
+
+export interface InitialLoaderProps
+  extends Partial<LoaderProps>,
+    Partial<Omit<BoxProps & CSSProperties, keyof LoaderProps>> {
+  state: {
+    internalScroll?: boolean;
+  };
+}
+
+export function InitialLoader(props: InitialLoaderProps) {
+  const { dataHook, size, state, minHeight = '300px', ...rest } = props;
+
+  return (
+    <Box
+      backgroundColor="D80"
+      align="center"
+      verticalAlign="middle"
+      borderRadius="8px"
+      minHeight={minHeight}
+      height={state.internalScroll ? '100%' : undefined}
+      {...rest}
+    >
+      <Loader dataHook={dataHook} size={size} />
+    </Box>
+  );
+}

package/src/components/InitialLoader/InitialSkeletonLoader.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { GridBaseState } from '../../state';
+import { FiltersMap } from '@wix/bex-core';
+import { SkeletonGrid } from '../SkeletonGrid';
+import { Box } from '@wix/design-system';
+import { observer } from 'mobx-react-lite';
+
+export interface InitialSkeletonLoaderProps<T, F extends FiltersMap> {
+  dataHook?: string;
+  state: GridBaseState<T, F>;
+}
+
+function _InitialSkeletonLoader<T, F extends FiltersMap>({
+  state,
+  dataHook,
+}: InitialSkeletonLoaderProps<T, F>) {
+  const {
+    toolbar: { contentPaddingPx },
+  } = state;
+
+  return (
+    <Box
+      dataHook={dataHook}
+      direction="vertical"
+      paddingBottom={contentPaddingPx}
+    >
+      <SkeletonGrid state={state} />
+    </Box>
+  );
+}
+
+export const InitialSkeletonLoader = observer(_InitialSkeletonLoader);

package/src/components/InitialLoader/index.ts

@@ -0,0 +1 @@
+export * from './InitialLoader';

package/src/components/InitialLoadingConditional.tsx

@@ -0,0 +1,35 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { observer } from 'mobx-react-lite';
+import { TaskState } from '@wix/bex-core';
+
+function _InitialLoadingConditional({
+  children = null,
+  loadingElement = null,
+  hideLoadingElement,
+  state,
+}: {
+  children?: ReactNode;
+  hideLoadingElement?: boolean;
+  loadingElement?: ReactElement | null;
+  state: { initTask: TaskState<unknown> };
+}) {
+  const { initTask } = state;
+  const { status } = initTask;
+  const { isLoading, isIdle } = status;
+
+  if (initTask.status.isError) {
+    return null;
+  }
+
+  if (hideLoadingElement) {
+    return <>{children}</>;
+  }
+
+  if (isIdle || isLoading) {
+    return loadingElement;
+  }
+
+  return <>{children}</>;
+}
+
+export const InitialLoadingConditional = observer(_InitialLoadingConditional);

package/src/components/InputOverflow/InputOverflow.st.css

@@ -0,0 +1,7 @@
+.root {
+  -st-states: selected, focused;
+}
+
+.root:selected:not(:focused) input::placeholder {
+  color: #000624;
+}

package/src/components/InputOverflow/InputOverflow.st.css.ts

@@ -0,0 +1,25 @@
+// @ts-nocheck
+
+
+import { classesRuntime, statesRuntime } from "../../stylable-esm-runtime.js";
+
+
+
+var _namespace_ = "InputOverflow2505631700";
+var _style_ = classesRuntime.bind(null, _namespace_);
+
+export var cssStates = statesRuntime.bind(null, _namespace_);
+export var style = _style_;
+export var st: import("@stylable/runtime").STFunction = _style_;
+
+export var namespace = _namespace_;
+export var classes = {"root":"InputOverflow2505631700__root"};
+export var keyframes = {}; 
+export var layers = {};
+export var containers = {};
+export var stVars = {}; 
+export var vars = {}; 
+
+
+
+

package/src/components/InputOverflow/InputOverflow.tsx

@@ -0,0 +1,70 @@
+import React, { useRef, useEffect, forwardRef } from 'react';
+import { Box, Input, InputProps } from '@wix/design-system';
+import { TextOverflowState } from '@wix/bex-core';
+import { observer } from 'mobx-react-lite';
+import { st, classes } from './InputOverflow.st.css.js';
+
+export interface InputOverflowProps extends InputProps {
+  state: TextOverflowState;
+  text: string;
+  selected: boolean;
+  focused: boolean;
+}
+
+export const InputOverflow = observer(
+  forwardRef((props: InputOverflowProps, ref) => {
+    const { state, selected, focused, text, ...inputProps } = props;
+    const helperNodeRef = useRef<HTMLInputElement>();
+
+    useEffect(() => {
+      if (!helperNodeRef.current) {
+        return;
+      }
+
+      return state.init(helperNodeRef.current);
+    }, []);
+
+    return (
+      <Box position="relative" direction="vertical">
+        <div
+          style={{
+            height: 0,
+            visibility: 'hidden',
+          }}
+          aria-hidden
+        >
+          <Input
+            {...inputProps}
+            ref={ref}
+            textOverflow={undefined}
+            clearButton={false}
+            onClear={undefined}
+            value={text}
+            inputRef={(node) => {
+              helperNodeRef.current = node;
+            }}
+          />
+        </div>
+        <Input
+          {...inputProps}
+          ref={ref}
+          onKeyDown={(e) => {
+            if (
+              e.nativeEvent.code === 'Space' &&
+              document.querySelectorAll('[data-option-hovered]').length === 0
+            ) {
+              e.stopPropagation();
+            }
+
+            inputProps.onKeyDown?.(e);
+          }}
+          textOverflow={undefined}
+          className={st(classes.root, {
+            selected,
+            focused,
+          })}
+        />
+      </Box>
+    );
+  }),
+);

package/src/components/InputOverflow/index.ts

@@ -0,0 +1 @@
+export * from './InputOverflow';

package/src/components/Kanban/Card.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap, KeyedItem } from '@wix/bex-core';
+import { Box, Text, ClickableCard } from '@wix/design-system';
+import { KanbanBaseProps } from './KanbanProps';
+import { ItemActionsState } from '../../state';
+import { CardActions } from './CardActions';
+import { KanbanState } from '../../state/KanbanState';
+
+export interface KanbanCardProps<T, S, F extends FiltersMap> {
+  keyedItem: KeyedItem<T>;
+  stageKey: string;
+  originalItem: T;
+  itemIndex: number;
+  item: {
+    key: string;
+    title?: string | React.ReactNode;
+    subtitle?: React.ReactNode;
+    additionalInfo?: React.ReactNode;
+    badge?: React.ReactNode;
+  };
+  actionCell?: KanbanBaseProps<T, S, F>['actionCell'];
+  itemActionsState: ItemActionsState<T, F>;
+  dataExtension?: KanbanBaseProps<T, S, F>['dataExtension'];
+  tags?: KanbanBaseProps<T, S, F>['tags'];
+  isDragging?: boolean;
+  state: KanbanState<T, S, F>;
+}
+
+function _CardComponent<T, S, F extends FiltersMap>({
+  originalItem,
+  itemIndex,
+  item,
+  stageKey,
+  actionCell,
+  itemActionsState,
+  isDragging,
+  state,
+}: KanbanCardProps<T, S, F>) {
+  const { title, subtitle, additionalInfo, badge } = item;
+
+  return (
+    <div
+      data-hook={`kanban-card-container-${stageKey}-${item.key}`}
+      style={{
+        marginRight: '12px',
+        marginLeft: '12px',
+        overflow: 'visible',
+        width: '246px',
+        opacity: isDragging ? 0.8 : 1,
+      }}
+    >
+      <ClickableCard hasPadding={false} skin="shadow">
+        <Box
+          padding="12px"
+          dataHook={`kanban-card-${stageKey}-${item.key}`}
+          direction="vertical"
+        >
+          {typeof title === 'string' ? (
+            <Box paddingBottom="3px">
+              <Text
+                dataHook={`kanban-card-title-${stageKey}-${item.key}`}
+                size="small"
+                weight="normal"
+                ellipsis={true}
+                maxLines={2}
+              >
+                {title}
+              </Text>
+            </Box>
+          ) : (
+            <Box
+              zIndex={51}
+              paddingBottom="3px"
+              dataHook={`kanban-card-title-${stageKey}-${item.key}`}
+            >
+              {title}
+            </Box>
+          )}
+
+          <Box direction="vertical" gap="1px">
+            <Box>{badge}</Box>
+            <Box>{subtitle}</Box>
+            <Box>{additionalInfo}</Box>
+          </Box>
+          <Box align="right" paddingTop="6px">
+            <CardActions
+              actionCell={actionCell}
+              originalItem={originalItem}
+              itemIndex={itemIndex}
+              itemActionsState={itemActionsState}
+              stageKey={stageKey}
+              item={item}
+              state={state}
+            />
+          </Box>
+        </Box>
+      </ClickableCard>
+    </div>
+  );
+}
+
+export const CardComponent = observer(_CardComponent);

package/src/components/Kanban/CardActions.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { FiltersMap } from '@wix/bex-core';
+import { Box, Button } from '@wix/design-system';
+import { useCardActions } from './useCardActions';
+import { KanbanCardProps } from './Card';
+import { MessageActionModal } from '../ActionModal';
+import { DisabledTooltip } from '../DisabledTooltip';
+
+type CardActionsProps<T, S, F extends FiltersMap> = Pick<
+  KanbanCardProps<T, S, F>,
+  | 'actionCell'
+  | 'originalItem'
+  | 'itemIndex'
+  | 'itemActionsState'
+  | 'stageKey'
+  | 'item'
+  | 'state'
+>;
+
+function _CardActions<T, S, F extends FiltersMap>({
+  actionCell,
+  originalItem,
+  itemIndex,
+  itemActionsState,
+  stageKey,
+  item,
+  state,
+}: CardActionsProps<T, S, F>) {
+  const { secondaryActions, primaryActionProps } = useCardActions({
+    actionCell,
+    originalItem,
+    itemIndex,
+    itemActionsState,
+    stageKey,
+    cardKey: item.key,
+    state,
+  });
+
+  return (
+    <>
+      {/* Render modals from ItemActionsState */}
+      {itemActionsState.confirmModal.value && (
+        <MessageActionModal
+          state={itemActionsState.confirmModal}
+          {...itemActionsState.confirmModal.value}
+        />
+      )}
+      <Box gap="9px">
+        {secondaryActions}
+        {primaryActionProps && (
+          <DisabledTooltip
+            content={primaryActionProps.disabledMessage}
+            disabled={!primaryActionProps.disabled}
+            dataHook={`kanban-card-primary-action-tooltip-${stageKey}-${item.key}`}
+          >
+            <Button
+              style={{ zIndex: 50 }}
+              size="tiny"
+              priority="secondary"
+              onClick={(e) => {
+                e.stopPropagation();
+                primaryActionProps.onClick();
+              }}
+              disabled={primaryActionProps.disabled}
+              prefixIcon={primaryActionProps.prefixIcon}
+              dataHook={`kanban-card-primary-action-${stageKey}-${item.key}`}
+            >
+              {primaryActionProps.text}
+            </Button>
+          </DisabledTooltip>
+        )}
+      </Box>
+    </>
+  );
+}
+
+export const CardActions = observer(_CardActions);

package/src/components/Kanban/CardsSkeleton.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  Box,
+  SkeletonCircle,
+  SkeletonGroup,
+  SkeletonLine,
+  SkeletonRectangle,
+} from '@wix/design-system';
+
+const numberOfCards = 4;
+
+function CardSkeleton({ index }: { index: number }) {
+  return (
+    <Box
+      key={index}
+      data-hook="kanban-card-skeleton"
+      padding="12px"
+      borderRadius="6px"
+      backgroundColor="white"
+      direction="vertical"
+      gap="12px"
+      border="1px solid #DFE3EB"
+      height="120px"
+      marginBottom={index !== numberOfCards - 1 ? '0px' : '12px'}
+      boxShadow="0 4px 10px rgba(0, 0, 0, 0.05)"
+      marginLeft="12px"
+      marginRight="12px"
+    >
+      <SkeletonGroup skin="light" backgroundColor="white">
+        {/* Title and Subtitle Skeletons */}
+        <Box direction="vertical" gap="8px" flex="1">
+          <SkeletonLine width="162px" />
+          <SkeletonLine width="114px" />
+        </Box>
+
+        {/* Avatar and Actions Skeleton */}
+        <Box alignContent="space-between" marginTop="70px" justifySelf="end">
+          <Box verticalAlign="middle" gap="9px">
+            <SkeletonCircle diameter="18px" />
+            <SkeletonRectangle width="114px" height="18px" />
+          </Box>
+        </Box>
+      </SkeletonGroup>
+    </Box>
+  );
+}
+
+export function CardsSkeleton({ stageKey }: { stageKey: string }) {
+  return (
+    <Box
+      direction="vertical"
+      gap="12px"
+      dataHook={`kanban-cards-skeleton-${stageKey}`}
+    >
+      {Array.from({ length: numberOfCards }, (_, index) => (
+        <CardSkeleton index={index} key={index} />
+      ))}
+    </Box>
+  );
+}