@juspay/blend-design-system 0.0.37-beta.8 → 0.0.37

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

@@ -1,4 +1,6 @@
+/** @deprecated Will be deprecated soon. Use AccordionV2 instead. */
 export { default as Accordion } from './Accordion';
+/** @deprecated Will be deprecated soon. Use AccordionV2 instead. */
 export { default as AccordionItem } from './AccordionItem';
 export * from './accordion.tokens';
 export * from './types';

package/dist/components/AccordionV2/accordionV2.animations.d.ts

@@ -1,3 +1,3 @@
 export declare const accordionDown: import('styled-components/dist/models/Keyframes').default;
 export declare const accordionUp: import('styled-components/dist/models/Keyframes').default;
-export declare const ACCORDION_TRANSITION = "all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+export declare const ACCORDION_TRANSITION = "height 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)";

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use AlertV2 instead. */
 export { default as Alert } from './Alert';
 export * from './alert.tokens';
 export * from './types';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use AvatarV2 instead. */
 export { default as Avatar } from './Avatar';
 export * from './avatar.tokens';
 export * from './types';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use BreadcrumbV2 instead. */
 export { default as Breadcrumb } from './Breadcrumb';
 export * from './breadcrumb.tokens';
 export * from './types';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use ButtonV2 instead. */
 export { default as Button } from './Button';
 export * from './button.tokens';
 export * from './types';

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

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use ButtonGroupV2 instead. */
 export { default as ButtonGroup } from './ButtonGroup';
 export * from './types';

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use CardV2 instead. */
 export { default as Card } from './Card';
 export * from './card.tokens';
 export * from './types';

package/dist/components/CardV2/CardV2.d.ts

@@ -0,0 +1,45 @@
+import { CardV2Actions, CardV2Body, CardV2Content, CardV2Footer, CardV2Header, CardV2Media, CardV2Meta } from './CardV2Components';
+import { default as CardV2Skeleton } from './CardV2Skeleton';
+import { CardV2ActionPlacement, CardV2Orientation, CardV2Padding, CardV2Variant } from './cardV2.types';
+declare const CardV2Root: import('react').ForwardRefExoticComponent<{
+    variant?: CardV2Variant;
+    orientation?: CardV2Orientation;
+    padding?: CardV2Padding;
+    title?: import('react').ReactNode;
+    truncateTitle?: boolean;
+    subtitle?: import('react').ReactNode;
+    description?: import('react').ReactNode;
+    eyebrow?: import('react').ReactNode;
+    media?: import('react').ReactNode;
+    mediaWidth?: import('styled-components').CSSObject["width"];
+    mediaHeight?: import('styled-components').CSSObject["height"];
+    mediaMinHeight?: import('styled-components').CSSObject["minHeight"];
+    leadingSlot?: import('react').ReactNode;
+    trailingSlot?: import('react').ReactNode;
+    footer?: import('react').ReactNode;
+    actions?: import('./cardV2.types').CardV2Action | import('./cardV2.types').CardV2Action[];
+    actionPlacement?: CardV2ActionPlacement;
+    centered?: boolean;
+    interactive?: boolean;
+    selected?: boolean;
+    skeleton?: import('./cardV2.types').CardV2SkeletonProps;
+    width?: import('styled-components').CSSObject["width"];
+    minWidth?: import('styled-components').CSSObject["minWidth"];
+    maxWidth?: import('styled-components').CSSObject["maxWidth"];
+    height?: import('styled-components').CSSObject["height"];
+    minHeight?: import('styled-components').CSSObject["minHeight"];
+    maxHeight?: import('styled-components').CSSObject["maxHeight"];
+    scrollable?: boolean;
+    children?: import('react').ReactNode;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "title" | "children"> & import('react').RefAttributes<HTMLDivElement>>;
+declare const CardV2: typeof CardV2Root & {
+    Header: typeof CardV2Header;
+    Meta: typeof CardV2Meta;
+    Media: typeof CardV2Media;
+    Body: typeof CardV2Body;
+    Content: typeof CardV2Content;
+    Actions: typeof CardV2Actions;
+    Footer: typeof CardV2Footer;
+    Skeleton: typeof CardV2Skeleton;
+};
+export default CardV2;

package/dist/components/CardV2/CardV2.utils.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+import { CardV2TokensType } from './cardV2.tokens';
+import { CardV2Padding, CardV2Action } from './cardV2.types';
+export declare const isTextPrimitive: (value: unknown) => value is string | number;
+export declare const toCardV2ActionArray: (actions?: CardV2Action | CardV2Action[]) => import('../ButtonV2').ButtonV2Props[];
+export declare const getCardV2Padding: (tokens: CardV2TokensType, padding: CardV2Padding) => string;
+export declare const renderCardV2Text: ({ value, id, as, styles, dataElement, truncate, }: {
+    value?: ReactNode;
+    id: string;
+    as: "p" | "h2";
+    styles: React.CSSProperties;
+    dataElement: string;
+    truncate?: boolean;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/CardV2/CardV2Components.d.ts

@@ -0,0 +1,8 @@
+import { CardV2ActionsProps, CardV2BodyProps, CardV2FooterProps, CardV2HeaderProps, CardV2MediaProps, CardV2MetaProps, CardV2SectionProps } from './cardV2.types';
+export declare const CardV2Meta: ({ title, truncateTitle, subtitle, eyebrow, centered, }: CardV2MetaProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardV2Header: ({ title, truncateTitle, subtitle, eyebrow, leadingSlot, trailingSlot, centered, }: CardV2HeaderProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardV2Media: ({ children, orientation, width, height, minHeight, }: CardV2MediaProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardV2Actions: ({ actions, centered }: CardV2ActionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardV2Content: ({ children }: CardV2SectionProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardV2Body: ({ description, actions, centered, scrollable, children, }: CardV2BodyProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const CardV2Footer: ({ children, actions, centered, divider, }: CardV2FooterProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/CardV2/CardV2Context.d.ts

@@ -0,0 +1,14 @@
+import { CardV2TokensType } from './cardV2.tokens';
+export type CardV2ContextValue = {
+    tokens: CardV2TokensType;
+    centered: boolean;
+    scrollable: boolean;
+    ids: {
+        eyebrow: string;
+        title: string;
+        subtitle: string;
+        description: string;
+    };
+};
+export declare const CardV2Context: import('react').Context<CardV2ContextValue | null>;
+export declare const useCardV2Context: () => CardV2ContextValue | null;

package/dist/components/CardV2/CardV2Skeleton.d.ts

@@ -0,0 +1,6 @@
+import { CardV2SkeletonProps } from './cardV2.types';
+export type CardV2SkeletonComponentProps = {
+    skeleton?: CardV2SkeletonProps;
+};
+declare const CardV2Skeleton: ({ skeleton }: CardV2SkeletonComponentProps) => import("react/jsx-runtime").JSX.Element;
+export default CardV2Skeleton;

package/dist/components/CardV2/accessibility/CardV2AccessibilityReport.d.ts

@@ -0,0 +1,2 @@
+import { AccessibilityReport } from '../../StatCard/accessibility/StatCardAccessibilityReport';
+export declare const cardV2AccessibilityReport: AccessibilityReport;

package/dist/components/CardV2/accessibility/index.d.ts

@@ -0,0 +1 @@
+export { cardV2AccessibilityReport } from './CardV2AccessibilityReport';

package/dist/components/CardV2/cardV2.dark.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveCardV2Tokens } from './cardV2.tokens.types';
+export declare const getCardV2DarkTokens: (foundationToken: FoundationTokenType) => ResponsiveCardV2Tokens;

package/dist/components/CardV2/cardV2.light.tokens.d.ts

@@ -0,0 +1,3 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { ResponsiveCardV2Tokens } from './cardV2.tokens.types';
+export declare const getCardV2LightTokens: (foundationToken: FoundationTokenType) => ResponsiveCardV2Tokens;

package/dist/components/CardV2/cardV2.tokens.d.ts

@@ -0,0 +1,5 @@
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { Theme } from '../../context/theme.enum';
+import { ResponsiveCardV2Tokens } from './cardV2.tokens.types';
+export type { CardV2TokensType, ResponsiveCardV2Tokens, } from './cardV2.tokens.types';
+export declare const getCardV2Tokens: (foundationToken: FoundationTokenType, theme?: Theme | string) => ResponsiveCardV2Tokens;

package/dist/components/CardV2/cardV2.tokens.types.d.ts

@@ -0,0 +1,92 @@
+import { CSSObject } from 'styled-components';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+import { CardV2Orientation, CardV2Padding, CardV2Variant } from './cardV2.types';
+export type CardV2TokensType = {
+    width: CSSObject['width'];
+    minWidth: CSSObject['minWidth'];
+    maxWidth: CSSObject['maxWidth'];
+    borderRadius: CSSObject['borderRadius'];
+    border: {
+        [key in CardV2Variant]: CSSObject['border'];
+    };
+    backgroundColor: {
+        [key in CardV2Variant]: CSSObject['backgroundColor'];
+    };
+    boxShadow: {
+        [key in CardV2Variant]: CSSObject['boxShadow'];
+    };
+    state: {
+        hover: {
+            border: CSSObject['border'];
+            boxShadow: CSSObject['boxShadow'];
+        };
+        selected: {
+            border: CSSObject['border'];
+            boxShadow: CSSObject['boxShadow'];
+        };
+        focus: {
+            outline: CSSObject['outline'];
+            outlineOffset: CSSObject['outlineOffset'];
+        };
+    };
+    padding: {
+        [key in CardV2Padding]: {
+            x: CSSObject['padding'];
+            y: CSSObject['padding'];
+        };
+    };
+    layout: {
+        gap: CSSObject['gap'];
+        mediaGap: {
+            [key in CardV2Orientation]: CSSObject['gap'];
+        };
+    };
+    media: {
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+        minHeight: CSSObject['minHeight'];
+        borderRadius: CSSObject['borderRadius'];
+        backgroundColor: CSSObject['backgroundColor'];
+    };
+    header: {
+        gap: CSSObject['gap'];
+        eyebrow: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+        };
+        title: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+        };
+        subtitle: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+        };
+    };
+    body: {
+        gap: CSSObject['gap'];
+        description: {
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            lineHeight: CSSObject['lineHeight'];
+            color: CSSObject['color'];
+        };
+    };
+    footer: {
+        gap: CSSObject['gap'];
+        paddingTop: CSSObject['paddingTop'];
+        borderTop: CSSObject['borderTop'];
+    };
+    actions: {
+        gap: CSSObject['gap'];
+    };
+};
+export type ResponsiveCardV2Tokens = {
+    [key in keyof BreakpointType]: CardV2TokensType;
+};

package/dist/components/CardV2/cardV2.types.d.ts

@@ -0,0 +1,106 @@
+import { FC, ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
+import { CSSObject } from 'styled-components';
+import { ButtonV2Props } from '../ButtonV2/buttonV2.types';
+import { SkeletonVariant } from '../Skeleton/types';
+export declare enum CardV2Variant {
+    OUTLINED = "outlined",
+    ELEVATED = "elevated",
+    GHOST = "ghost"
+}
+export declare enum CardV2Orientation {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
+export declare enum CardV2Padding {
+    NONE = "none",
+    COMPACT = "compact",
+    COMFORTABLE = "comfortable"
+}
+export declare enum CardV2ActionPlacement {
+    BODY = "body",
+    FOOTER = "footer"
+}
+export type CardV2SkeletonProps = {
+    show?: boolean;
+    variant?: SkeletonVariant;
+    height?: CSSObject['height'];
+    width?: CSSObject['width'];
+};
+export type CardV2Action = ButtonV2Props;
+export type CardV2SectionProps = {
+    children?: ReactNode;
+};
+export type CardV2HeaderProps = {
+    title?: ReactNode;
+    truncateTitle?: boolean;
+    subtitle?: ReactNode;
+    eyebrow?: ReactNode;
+    leadingSlot?: ReactNode;
+    trailingSlot?: ReactNode;
+    centered?: boolean;
+};
+export type CardV2MetaProps = Pick<CardV2HeaderProps, 'title' | 'truncateTitle' | 'subtitle' | 'eyebrow' | 'centered'>;
+export type CardV2MediaProps = CardV2SectionProps & {
+    orientation?: CardV2Orientation;
+    width?: CSSObject['width'];
+    height?: CSSObject['height'];
+    minHeight?: CSSObject['minHeight'];
+};
+export type CardV2BodyProps = CardV2SectionProps & {
+    description?: ReactNode;
+    actions?: CardV2Action | CardV2Action[];
+    centered?: boolean;
+    scrollable?: boolean;
+};
+export type CardV2ActionsProps = {
+    actions?: CardV2Action | CardV2Action[];
+    centered?: boolean;
+};
+export type CardV2FooterProps = CardV2SectionProps & {
+    actions?: CardV2Action | CardV2Action[];
+    centered?: boolean;
+    divider?: boolean;
+};
+export type CardV2Props = {
+    variant?: CardV2Variant;
+    orientation?: CardV2Orientation;
+    padding?: CardV2Padding;
+    title?: ReactNode;
+    truncateTitle?: boolean;
+    subtitle?: ReactNode;
+    description?: ReactNode;
+    eyebrow?: ReactNode;
+    media?: ReactNode;
+    mediaWidth?: CSSObject['width'];
+    mediaHeight?: CSSObject['height'];
+    mediaMinHeight?: CSSObject['minHeight'];
+    leadingSlot?: ReactNode;
+    trailingSlot?: ReactNode;
+    footer?: ReactNode;
+    actions?: CardV2Action | CardV2Action[];
+    actionPlacement?: CardV2ActionPlacement;
+    centered?: boolean;
+    interactive?: boolean;
+    selected?: boolean;
+    skeleton?: CardV2SkeletonProps;
+    width?: CSSObject['width'];
+    minWidth?: CSSObject['minWidth'];
+    maxWidth?: CSSObject['maxWidth'];
+    height?: CSSObject['height'];
+    minHeight?: CSSObject['minHeight'];
+    maxHeight?: CSSObject['maxHeight'];
+    scrollable?: boolean;
+    children?: ReactNode;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'title' | 'children'>;
+export type CardV2Component = ForwardRefExoticComponent<CardV2Props & RefAttributes<HTMLDivElement>> & {
+    Header: FC<CardV2HeaderProps>;
+    Meta: FC<CardV2MetaProps>;
+    Media: FC<CardV2MediaProps>;
+    Body: FC<CardV2BodyProps>;
+    Content: FC<CardV2SectionProps>;
+    Actions: FC<CardV2ActionsProps>;
+    Footer: FC<CardV2FooterProps>;
+    Skeleton: FC<{
+        skeleton?: CardV2SkeletonProps;
+    }>;
+};

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

@@ -0,0 +1,5 @@
+export { default as CardV2 } from './CardV2';
+export { CardV2Actions, CardV2Body, CardV2Content, CardV2Footer, CardV2Header, CardV2Media, CardV2Meta, } from './CardV2Components';
+export { default as CardV2Skeleton } from './CardV2Skeleton';
+export * from './cardV2.types';
+export * from './cardV2.tokens';

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

@@ -1,12 +1,22 @@
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as Charts } from './Charts';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as CoreChart } from './CoreChart';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as ChartContainer } from './ChartContainer';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as ChartHeader } from './ChartHeader';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as ChartLegends } from './ChartLegend';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as SankeyNode } from './SankeyNode';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as SankeyLink } from './SankeyLink';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as BlendChart } from './BlendChart';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as BlendChartContainer } from './BlendChartContainer';
+/** @deprecated Will be deprecated soon. Use ChartV2 instead. */
 export { default as BlendChartHeader } from './BlendChartHeader';
 export * from './chart.tokens';
 export * from './types';

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

@@ -180,6 +180,7 @@ export type ChartsProps = {
     chartHeaderSlot: ReactNode;
     stackedLegends?: boolean;
     stackedLegendsData?: StackedLegendsDataPoint[];
+    showAllLegends?: boolean;
     barsize?: number;
     xAxis?: XAxisConfig;
     yAxis?: YAxisConfig;
@@ -238,6 +239,7 @@ export type ChartLegendsProps = {
         title: string;
         total?: string;
     }[];
+    showAllLegends?: boolean;
 };
 export type CustomTooltipProps = TooltipProps<ValueType, NameType> & {
     hoveredKey: string | null;

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

@@ -1,3 +1,4 @@
+/** @deprecated Will be deprecated soon. Use ChatInputV2 instead. */
 export { default as ChatInput } from './ChatInput';
 export * from './chatInput.tokens';
 export * from './types';

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

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use CheckboxV2 instead. */
 export { Checkbox } from './Checkbox';
 export * from './types';

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

@@ -1,2 +1,3 @@
+/** @deprecated Will be deprecated soon. Use CodeEditorV2 instead. */
 export { default as CodeEditor } from './CodeEditor';
 export * from './types';

package/dist/components/DataTable/PivotTableModal/pivotModal.styled.d.ts

@@ -0,0 +1,184 @@
+/**
+ * Scroll region without visible scrollbars (preview + config panels).
+ */
+export declare const NoScrollbar: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('../../Primitives/Block/Block').StateStyles & {
+    color?: import('styled-components').CSSObject["color"];
+    position?: import('styled-components').CSSObject["position"];
+    inset?: import('styled-components').CSSObject["inset"];
+    top?: import('styled-components').CSSObject["top"];
+    right?: import('styled-components').CSSObject["right"];
+    bottom?: import('styled-components').CSSObject["bottom"];
+    left?: import('styled-components').CSSObject["left"];
+    zIndex?: import('styled-components').CSSObject["zIndex"];
+    pointerEvents?: import('styled-components').CSSObject["pointerEvents"];
+    opacity?: import('styled-components').CSSObject["opacity"];
+    padding?: string | number;
+    paddingTop?: string | number;
+    paddingBottom?: string | number;
+    paddingLeft?: string | number;
+    paddingRight?: string | number;
+    paddingX?: string | number;
+    paddingY?: string | number;
+    margin?: string | number;
+    marginTop?: string | number;
+    marginBottom?: string | number;
+    marginLeft?: string | number;
+    marginRight?: string | number;
+    marginX?: string | number;
+    marginY?: string | number;
+    display?: import('styled-components').CSSObject["display"];
+    flexDirection?: import('styled-components').CSSObject["flexDirection"];
+    justifyContent?: import('styled-components').CSSObject["justifyContent"];
+    alignItems?: import('styled-components').CSSObject["alignItems"];
+    flexWrap?: import('styled-components').CSSObject["flexWrap"];
+    flexGrow?: import('styled-components').CSSObject["flexGrow"];
+    flexShrink?: import('styled-components').CSSObject["flexShrink"];
+    flexBasis?: import('styled-components').CSSObject["flexBasis"];
+    gap?: import('styled-components').CSSObject["gap"];
+    rowGap?: import('styled-components').CSSObject["rowGap"];
+    columnGap?: import('styled-components').CSSObject["columnGap"];
+    alignContent?: import('styled-components').CSSObject["alignContent"];
+    alignSelf?: import('styled-components').CSSObject["alignSelf"];
+    justifySelf?: import('styled-components').CSSObject["justifySelf"];
+    borderRadius?: import('styled-components').CSSObject["borderRadius"];
+    borderTopLeftRadius?: import('styled-components').CSSObject["borderTopLeftRadius"];
+    borderTopRightRadius?: import('styled-components').CSSObject["borderTopRightRadius"];
+    borderBottomLeftRadius?: import('styled-components').CSSObject["borderBottomLeftRadius"];
+    borderBottomRightRadius?: import('styled-components').CSSObject["borderBottomRightRadius"];
+    outline?: import('styled-components').CSSObject["outline"];
+    outlineColor?: import('styled-components').CSSObject["outlineColor"];
+    outlineWidth?: import('styled-components').CSSObject["outlineWidth"];
+    outlineStyle?: import('styled-components').CSSObject["outlineStyle"];
+    outlineOffset?: import('styled-components').CSSObject["outlineOffset"];
+    width?: import('styled-components').CSSObject["width"];
+    height?: import('styled-components').CSSObject["height"];
+    minWidth?: import('styled-components').CSSObject["minWidth"];
+    minHeight?: import('styled-components').CSSObject["minHeight"];
+    maxWidth?: import('styled-components').CSSObject["maxWidth"];
+    maxHeight?: import('styled-components').CSSObject["maxHeight"];
+    size?: string | number;
+    backgroundColor?: import('styled-components').CSSObject["backgroundColor"];
+    backgroundImage?: import('styled-components').CSSObject["backgroundImage"];
+    backgroundSize?: import('styled-components').CSSObject["backgroundSize"];
+    border?: import('styled-components').CSSObject["border"];
+    borderTop?: import('styled-components').CSSObject["borderTop"];
+    borderBottom?: import('styled-components').CSSObject["borderBottom"];
+    borderLeft?: import('styled-components').CSSObject["borderLeft"];
+    borderRight?: import('styled-components').CSSObject["borderRight"];
+    boxShadow?: import('styled-components').CSSObject["boxShadow"];
+    overflow?: import('styled-components').CSSObject["overflow"];
+    overflowX?: import('styled-components').CSSObject["overflowX"];
+    overflowY?: import('styled-components').CSSObject["overflowY"];
+    whiteSpace?: import('styled-components').CSSObject["whiteSpace"];
+    contentCentered?: boolean;
+    cursor?: import('styled-components').CSSObject["cursor"];
+    fontSize?: import('styled-components').CSSObject["fontSize"];
+    fontWeight?: import('styled-components').CSSObject["fontWeight"];
+    lineHeight?: import('styled-components').CSSObject["lineHeight"];
+    letterSpacing?: import('styled-components').CSSObject["letterSpacing"];
+    textAlign?: import('styled-components').CSSObject["textAlign"];
+    textTransform?: import('styled-components').CSSObject["textTransform"];
+    textOverflow?: import('styled-components').CSSObject["textOverflow"];
+    userSelect?: import('styled-components').CSSObject["userSelect"];
+    transform?: import('styled-components').CSSObject["transform"];
+    willChange?: import('styled-components').CSSObject["willChange"];
+    transformOrigin?: import('styled-components').CSSObject["transformOrigin"];
+    backfaceVisibility?: import('styled-components').CSSObject["backfaceVisibility"];
+    transition?: import('styled-components').CSSObject["transition"];
+    transitionDuration?: import('styled-components').CSSObject["transitionDuration"];
+    transitionTimingFunction?: import('styled-components').CSSObject["transitionTimingFunction"];
+    transitionDelay?: import('styled-components').CSSObject["transitionDelay"];
+} & Omit<import('react').HTMLAttributes<HTMLElement>, "color" | "as"> & {
+    children?: React.ReactNode;
+    as?: "div" | "article" | "button" | "footer" | "header" | "hr" | "label" | "main" | "nav" | "section" | "span";
+} & import('react').RefAttributes<HTMLDivElement>, never>> & string & Omit<import('react').ForwardRefExoticComponent<import('../../Primitives/Block/Block').StateStyles & {
+    color?: import('styled-components').CSSObject["color"];
+    position?: import('styled-components').CSSObject["position"];
+    inset?: import('styled-components').CSSObject["inset"];
+    top?: import('styled-components').CSSObject["top"];
+    right?: import('styled-components').CSSObject["right"];
+    bottom?: import('styled-components').CSSObject["bottom"];
+    left?: import('styled-components').CSSObject["left"];
+    zIndex?: import('styled-components').CSSObject["zIndex"];
+    pointerEvents?: import('styled-components').CSSObject["pointerEvents"];
+    opacity?: import('styled-components').CSSObject["opacity"];
+    padding?: string | number;
+    paddingTop?: string | number;
+    paddingBottom?: string | number;
+    paddingLeft?: string | number;
+    paddingRight?: string | number;
+    paddingX?: string | number;
+    paddingY?: string | number;
+    margin?: string | number;
+    marginTop?: string | number;
+    marginBottom?: string | number;
+    marginLeft?: string | number;
+    marginRight?: string | number;
+    marginX?: string | number;
+    marginY?: string | number;
+    display?: import('styled-components').CSSObject["display"];
+    flexDirection?: import('styled-components').CSSObject["flexDirection"];
+    justifyContent?: import('styled-components').CSSObject["justifyContent"];
+    alignItems?: import('styled-components').CSSObject["alignItems"];
+    flexWrap?: import('styled-components').CSSObject["flexWrap"];
+    flexGrow?: import('styled-components').CSSObject["flexGrow"];
+    flexShrink?: import('styled-components').CSSObject["flexShrink"];
+    flexBasis?: import('styled-components').CSSObject["flexBasis"];
+    gap?: import('styled-components').CSSObject["gap"];
+    rowGap?: import('styled-components').CSSObject["rowGap"];
+    columnGap?: import('styled-components').CSSObject["columnGap"];
+    alignContent?: import('styled-components').CSSObject["alignContent"];
+    alignSelf?: import('styled-components').CSSObject["alignSelf"];
+    justifySelf?: import('styled-components').CSSObject["justifySelf"];
+    borderRadius?: import('styled-components').CSSObject["borderRadius"];
+    borderTopLeftRadius?: import('styled-components').CSSObject["borderTopLeftRadius"];
+    borderTopRightRadius?: import('styled-components').CSSObject["borderTopRightRadius"];
+    borderBottomLeftRadius?: import('styled-components').CSSObject["borderBottomLeftRadius"];
+    borderBottomRightRadius?: import('styled-components').CSSObject["borderBottomRightRadius"];
+    outline?: import('styled-components').CSSObject["outline"];
+    outlineColor?: import('styled-components').CSSObject["outlineColor"];
+    outlineWidth?: import('styled-components').CSSObject["outlineWidth"];
+    outlineStyle?: import('styled-components').CSSObject["outlineStyle"];
+    outlineOffset?: import('styled-components').CSSObject["outlineOffset"];
+    width?: import('styled-components').CSSObject["width"];
+    height?: import('styled-components').CSSObject["height"];
+    minWidth?: import('styled-components').CSSObject["minWidth"];
+    minHeight?: import('styled-components').CSSObject["minHeight"];
+    maxWidth?: import('styled-components').CSSObject["maxWidth"];
+    maxHeight?: import('styled-components').CSSObject["maxHeight"];
+    size?: string | number;
+    backgroundColor?: import('styled-components').CSSObject["backgroundColor"];
+    backgroundImage?: import('styled-components').CSSObject["backgroundImage"];
+    backgroundSize?: import('styled-components').CSSObject["backgroundSize"];
+    border?: import('styled-components').CSSObject["border"];
+    borderTop?: import('styled-components').CSSObject["borderTop"];
+    borderBottom?: import('styled-components').CSSObject["borderBottom"];
+    borderLeft?: import('styled-components').CSSObject["borderLeft"];
+    borderRight?: import('styled-components').CSSObject["borderRight"];
+    boxShadow?: import('styled-components').CSSObject["boxShadow"];
+    overflow?: import('styled-components').CSSObject["overflow"];
+    overflowX?: import('styled-components').CSSObject["overflowX"];
+    overflowY?: import('styled-components').CSSObject["overflowY"];
+    whiteSpace?: import('styled-components').CSSObject["whiteSpace"];
+    contentCentered?: boolean;
+    cursor?: import('styled-components').CSSObject["cursor"];
+    fontSize?: import('styled-components').CSSObject["fontSize"];
+    fontWeight?: import('styled-components').CSSObject["fontWeight"];
+    lineHeight?: import('styled-components').CSSObject["lineHeight"];
+    letterSpacing?: import('styled-components').CSSObject["letterSpacing"];
+    textAlign?: import('styled-components').CSSObject["textAlign"];
+    textTransform?: import('styled-components').CSSObject["textTransform"];
+    textOverflow?: import('styled-components').CSSObject["textOverflow"];
+    userSelect?: import('styled-components').CSSObject["userSelect"];
+    transform?: import('styled-components').CSSObject["transform"];
+    willChange?: import('styled-components').CSSObject["willChange"];
+    transformOrigin?: import('styled-components').CSSObject["transformOrigin"];
+    backfaceVisibility?: import('styled-components').CSSObject["backfaceVisibility"];
+    transition?: import('styled-components').CSSObject["transition"];
+    transitionDuration?: import('styled-components').CSSObject["transitionDuration"];
+    transitionTimingFunction?: import('styled-components').CSSObject["transitionTimingFunction"];
+    transitionDelay?: import('styled-components').CSSObject["transitionDelay"];
+} & Omit<import('react').HTMLAttributes<HTMLElement>, "color" | "as"> & {
+    children?: React.ReactNode;
+    as?: "div" | "article" | "button" | "footer" | "header" | "hr" | "label" | "main" | "nav" | "section" | "span";
+} & import('react').RefAttributes<HTMLDivElement>>, keyof import('react').Component<any, {}, any>>;

package/dist/components/DataTable/TableBody/types.d.ts

@@ -1,4 +1,4 @@
-import { ColumnDefinition, RowActionsConfig } from '../types';
+import { ColumnDefinition, RowActionsConfig, RowAnimationConfig } from '../types';
 import { MobileDataTableConfig } from '../hooks/useMobileDataTable';
 import { SkeletonVariant } from '../../Skeleton/skeleton.tokens';
 export type TableBodyProps<T extends Record<string, unknown>> = {
@@ -56,4 +56,6 @@ export type TableBodyProps<T extends Record<string, unknown>> = {
         colIndex: number;
     } | null;
     onCellFocus?: (rowIndex: number, colIndex: number) => void;
+    enableRowAnimation?: boolean;
+    rowAnimationConfig?: RowAnimationConfig;
 };

package/dist/components/DataTable/hooks/index.d.ts

@@ -1,2 +1,4 @@
 export { useMobileDataTable } from './useMobileDataTable';
 export type { MobileDataTableConfig } from './useMobileDataTable';
+export { useReducedMotion } from './useReducedMotion';
+export { useRowFlip } from './useRowFlip';

package/dist/components/DataTable/hooks/useReducedMotion.d.ts

@@ -0,0 +1 @@
+export declare function useReducedMotion(): boolean;