@ultraviolet/ui 3.0.0-beta.24 → 3.0.0-beta.25

package/dist/components/Snippet/index.cjs

@@ -41,7 +41,8 @@ const Snippet = ({
   initiallyExpanded,
   rows = 4,
   noExpandable = false,
-  onCopy
+  onCopy,
+  style
 }) => {
   const theme = ThemeProvider.useTheme();
   const [showMore, setShowMore] = react.useReducer((value) => !value, initiallyExpanded ?? false);
@@ -50,7 +51,7 @@ const Snippet = ({
   const multiline = numberOfLines > 1;
   const hasShowMoreButton = numberOfLines > rows && multiline && !noExpandable;
   const minHeight = rows * Number.parseFloat(theme.typography.code.lineHeight) * 16 + Number.parseFloat(theme.space[4]) * 16;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.snippetContainer[multiline ? "multiline" : "oneLine"]}`, "data-testid": dataTestId, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { className: styles_css.stackStyle, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.snippetContainer[multiline ? "multiline" : "oneLine"]}`, "data-testid": dataTestId, style, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { className: styles_css.stackStyle, children: [
     hasShowMoreButton ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Expandable, { minHeight, opened: showMore, children: /* @__PURE__ */ jsxRuntime.jsx(CodeContent, { lines, multiline, noExpandable, prefix, rows, children }) }) : /* @__PURE__ */ jsxRuntime.jsx(CodeContent, { lines, multiline, noExpandable, prefix, rows, children }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.buttonContainer[multiline && numberOfLines > 1 ? "multiline" : "oneLine"], children: /* @__PURE__ */ jsxRuntime.jsx(index$2.CopyButton, { copiedText, copyText, onCopy, sentiment: "neutral", value: children }) }),
     hasShowMoreButton ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.showMoreContainer[showMore ? "true" : "false"], children: /* @__PURE__ */ jsxRuntime.jsx("button", { "aria-expanded": showMore, className: styles_css.showMoreButton, onClick: setShowMore, type: "button", children: /* @__PURE__ */ jsxRuntime.jsxs(index$3.Text, { as: "span", className: styles_css.centeredText, sentiment: "neutral", variant: "bodySmallStrong", children: [

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

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, CSSProperties } from 'react';
 import { CopyButton } from '../CopyButton';
 type Prefixes = 'lines' | 'command';
 type SnippetProps = {
@@ -17,10 +17,11 @@ type SnippetProps = {
     rows?: number;
     noExpandable?: boolean;
     onCopy?: () => void;
+    style?: CSSProperties;
 } & Pick<ComponentProps<typeof CopyButton>, 'copyText' | 'copiedText'>;
 /**
  * Snippet component is used to display code snippets with the ability to copy the code.
  * It also has the ability to show/hide the code snippet if it has more than 4 lines.
  */
-export declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, initiallyExpanded, rows, noExpandable, onCopy, }: SnippetProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Snippet: ({ children, copyText, copiedText, showText, hideText, prefix, className, "data-testid": dataTestId, initiallyExpanded, rows, noExpandable, onCopy, style, }: SnippetProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Snippet/index.js

@@ -39,7 +39,8 @@ const Snippet = ({
   initiallyExpanded,
   rows = 4,
   noExpandable = false,
-  onCopy
+  onCopy,
+  style
 }) => {
   const theme = useTheme();
   const [showMore, setShowMore] = useReducer((value) => !value, initiallyExpanded ?? false);
@@ -48,7 +49,7 @@ const Snippet = ({
   const multiline = numberOfLines > 1;
   const hasShowMoreButton = numberOfLines > rows && multiline && !noExpandable;
   const minHeight = rows * Number.parseFloat(theme.typography.code.lineHeight) * 16 + Number.parseFloat(theme.space[4]) * 16;
-  return /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${snippetContainer[multiline ? "multiline" : "oneLine"]}`, "data-testid": dataTestId, children: /* @__PURE__ */ jsxs(Stack, { className: stackStyle, children: [
+  return /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${snippetContainer[multiline ? "multiline" : "oneLine"]}`, "data-testid": dataTestId, style, children: /* @__PURE__ */ jsxs(Stack, { className: stackStyle, children: [
     hasShowMoreButton ? /* @__PURE__ */ jsx(Expandable, { minHeight, opened: showMore, children: /* @__PURE__ */ jsx(CodeContent, { lines, multiline, noExpandable, prefix: prefix2, rows, children }) }) : /* @__PURE__ */ jsx(CodeContent, { lines, multiline, noExpandable, prefix: prefix2, rows, children }),
     /* @__PURE__ */ jsx("div", { className: buttonContainer[multiline && numberOfLines > 1 ? "multiline" : "oneLine"], children: /* @__PURE__ */ jsx(CopyButton, { copiedText, copyText, onCopy, sentiment: "neutral", value: children }) }),
     hasShowMoreButton ? /* @__PURE__ */ jsx("div", { className: showMoreContainer[showMore ? "true" : "false"], children: /* @__PURE__ */ jsx("button", { "aria-expanded": showMore, className: showMoreButton, onClick: setShowMore, type: "button", children: /* @__PURE__ */ jsxs(Text, { as: "span", className: centeredText, sentiment: "neutral", variant: "bodySmallStrong", children: [

package/dist/components/Stack/index.cjs

@@ -27,6 +27,7 @@ const Stack = ({
   flex,
   as,
   ref,
+  style,
   ...props
 }) => {
   const wrapValue = react.useMemo(() => {
@@ -67,12 +68,15 @@ const Stack = ({
       "data-testid": dataTestId,
       id,
       ref,
-      style: dynamic.assignInlineVars({
-        [variables_css.widthVar]: width?.toString(),
-        [variables_css.maxWidthVar]: maxWidth?.toString(),
-        [variables_css.minWidthVar]: minWidth?.toString(),
-        [variables_css.flexVar]: flex?.toString()
-      }),
+      style: {
+        ...dynamic.assignInlineVars({
+          [variables_css.widthVar]: width?.toString(),
+          [variables_css.maxWidthVar]: maxWidth?.toString(),
+          [variables_css.minWidthVar]: minWidth?.toString(),
+          [variables_css.flexVar]: flex?.toString()
+        }),
+        ...style
+      },
       ...props,
       children
     }

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

@@ -20,5 +20,5 @@ type OwnStackProps = {
     id?: string;
 };
 export type StackProps<T extends ElementType = 'div'> = PolymorphicComponentProps<T, OwnStackProps>;
-export declare const Stack: <T extends ElementType = "div">({ gap, direction, alignItems, justifyContent, wrap, className, children, id, "data-testid": dataTestId, width, maxWidth, minWidth, flex, as, ref, ...props }: StackProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Stack: <T extends ElementType = "div">({ gap, direction, alignItems, justifyContent, wrap, className, children, id, "data-testid": dataTestId, width, maxWidth, minWidth, flex, as, ref, style, ...props }: StackProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Stack/index.js

@@ -25,6 +25,7 @@ const Stack = ({
   flex,
   as,
   ref,
+  style,
   ...props
 }) => {
   const wrapValue = useMemo(() => {
@@ -65,12 +66,15 @@ const Stack = ({
       "data-testid": dataTestId,
       id,
       ref,
-      style: assignInlineVars({
-        [widthVar]: width?.toString(),
-        [maxWidthVar]: maxWidth?.toString(),
-        [minWidthVar]: minWidth?.toString(),
-        [flexVar]: flex?.toString()
-      }),
+      style: {
+        ...assignInlineVars({
+          [widthVar]: width?.toString(),
+          [maxWidthVar]: maxWidth?.toString(),
+          [minWidthVar]: minWidth?.toString(),
+          [flexVar]: flex?.toString()
+        }),
+        ...style
+      },
       ...props,
       children
     }

package/dist/components/Status/index.cjs

@@ -10,10 +10,11 @@ const Status = ({
   tooltip,
   sentiment,
   "data-testid": dataTestId,
-  notification
+  notification,
+  style
 }) => /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${className ? `${className} ` : ""}${styles_css.status({
   notification
-})}`, "data-testid": dataTestId, children: [
+})}`, "data-testid": dataTestId, style, children: [
   animated ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_css.animatedCircleStatus({
     sentiment
   }) }) : null,

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

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 import type { SENTIMENTS } from './constant';
 type StatusSentiment = (typeof SENTIMENTS)[number];
 type StatusProps = {
@@ -10,9 +11,10 @@ type StatusProps = {
      * This prop will set status as a notification and make it absolute to its parent displayed on top right.
      */
     notification?: boolean;
+    style?: CSSProperties;
 };
 /**
  * Status component used to display a colored circle with a tooltip for additional information.
  */
-export declare const Status: ({ animated, className, tooltip, sentiment, "data-testid": dataTestId, notification, }: StatusProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Status: ({ animated, className, tooltip, sentiment, "data-testid": dataTestId, notification, style, }: StatusProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Status/index.js

@@ -8,10 +8,11 @@ const Status = ({
   tooltip,
   sentiment,
   "data-testid": dataTestId,
-  notification
+  notification,
+  style
 }) => /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs("span", { className: `${className ? `${className} ` : ""}${status({
   notification
-})}`, "data-testid": dataTestId, children: [
+})}`, "data-testid": dataTestId, style, children: [
   animated ? /* @__PURE__ */ jsx("span", { className: animatedCircleStatus({
     sentiment
   }) }) : null,

package/dist/components/StepList/index.cjs

@@ -25,7 +25,8 @@ const Item = ({
 const StepList = ({
   children,
   className,
+  style,
   "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: `${className ? `${className} ` : ""}${styles_css.steps}`, "data-testid": dataTestId, children });
+}) => /* @__PURE__ */ jsxRuntime.jsx("ul", { className: `${className ? `${className} ` : ""}${styles_css.steps}`, "data-testid": dataTestId, style, children });
 StepList.Item = Item;
 exports.StepList = StepList;

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

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 import { Bullet } from '../Bullet';
 export type Sizes = 'small' | 'medium';
 type ItemProps = {
@@ -16,13 +16,14 @@ type StepListProps = {
     children: ReactNode;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 /**
  * StepList component is used to display a list of steps.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
 export declare const StepList: {
-    ({ children, className, "data-testid": dataTestId, }: StepListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ children, className, style, "data-testid": dataTestId, }: StepListProps): import("@emotion/react/jsx-runtime").JSX.Element;
     Item: ({ bulletContent, sentiment, prominence, children, onClick, onKeyDown, size, disabled, className, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/StepList/index.js

@@ -23,8 +23,9 @@ const Item = ({
 const StepList = ({
   children,
   className,
+  style,
   "data-testid": dataTestId
-}) => /* @__PURE__ */ jsx("ul", { className: `${className ? `${className} ` : ""}${steps}`, "data-testid": dataTestId, children });
+}) => /* @__PURE__ */ jsx("ul", { className: `${className ? `${className} ` : ""}${steps}`, "data-testid": dataTestId, style, children });
 StepList.Item = Item;
 export {
   StepList

package/dist/components/Stepper/Step.cjs

@@ -16,6 +16,7 @@ const Step = ({
   title,
   children,
   className,
+  style,
   "data-testid": dataTestId
 }) => {
   const {
@@ -51,7 +52,7 @@ const Step = ({
       }
       onClick?.(index$3);
     }
-  }, children: [
+  }, style, children: [
     isDone && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Bullet, { className: styles_css.stepBullet({
       disabled,
       isActive,

package/dist/components/Stepper/Step.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type StepProps = {
     onClick?: (index: number) => void;
     /**
@@ -20,6 +20,7 @@ type StepProps = {
     children?: ReactNode;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
-export declare const Step: ({ index, onClick, disabled, title, children, className, "data-testid": dataTestId, }: StepProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Step: ({ index, onClick, disabled, title, children, className, style, "data-testid": dataTestId, }: StepProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Stepper/Step.js

@@ -14,6 +14,7 @@ const Step = ({
   title,
   children,
   className,
+  style,
   "data-testid": dataTestId
 }) => {
   const {
@@ -49,7 +50,7 @@ const Step = ({
       }
       onClick?.(index);
     }
-  }, children: [
+  }, style, children: [
     isDone && !disabled ? /* @__PURE__ */ jsx(Bullet, { className: stepBullet({
       disabled,
       isActive,

package/dist/components/Stepper/index.cjs

@@ -15,14 +15,15 @@ const Stepper = ({
   labelPosition = "bottom",
   size = "medium",
   "data-testid": dataTestId,
-  separator = true
+  separator = true,
+  style
 }) => {
   const cleanChildren = react.Children.toArray(children).filter(react.isValidElement);
   const lastStep = react.Children.count(cleanChildren) - 1;
   return /* @__PURE__ */ jsxRuntime.jsx(StepperProvider.StepperProvider, { animated, interactive, labelPosition, selected, separator, size, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.stepperContainer({
     labelPosition,
     separator
-  })}`, "data-testid": dataTestId, children: react.Children.map(cleanChildren, (child, index) => {
+  })}`, "data-testid": dataTestId, style, children: react.Children.map(cleanChildren, (child, index) => {
     const getTemporal = () => {
       if (index < selected) {
         return "done";

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type StepperProps = {
     animated?: boolean;
     /**
@@ -15,10 +15,11 @@ type StepperProps = {
     size?: 'small' | 'medium';
     'data-testid'?: string;
     separator?: boolean;
+    style?: CSSProperties;
 };
 export declare const Stepper: {
-    ({ children, interactive, selected, animated, className, labelPosition, size, "data-testid": dataTestId, separator, }: StepperProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Step: ({ index, onClick, disabled, title, children, className, "data-testid": dataTestId, }: {
+    ({ children, interactive, selected, animated, className, labelPosition, size, "data-testid": dataTestId, separator, style, }: StepperProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Step: ({ index, onClick, disabled, title, children, className, style, "data-testid": dataTestId, }: {
         onClick?: (index: number) => void;
         index?: number;
         disabled?: boolean;
@@ -26,6 +27,7 @@ export declare const Stepper: {
         children?: ReactNode;
         className?: string;
         'data-testid'?: string;
+        style?: CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/Stepper/index.js

@@ -13,14 +13,15 @@ const Stepper = ({
   labelPosition = "bottom",
   size = "medium",
   "data-testid": dataTestId,
-  separator = true
+  separator = true,
+  style
 }) => {
   const cleanChildren = Children.toArray(children).filter(isValidElement);
   const lastStep = Children.count(cleanChildren) - 1;
   return /* @__PURE__ */ jsx(StepperProvider, { animated, interactive, labelPosition, selected, separator, size, children: /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${stepperContainer({
     labelPosition,
     separator
-  })}`, "data-testid": dataTestId, children: Children.map(cleanChildren, (child, index) => {
+  })}`, "data-testid": dataTestId, style, children: Children.map(cleanChildren, (child, index) => {
     const getTemporal = () => {
       if (index < selected) {
         return "done";

package/dist/components/SwitchButton/Option.cjs

@@ -11,7 +11,8 @@ const Option = ({
   children,
   "data-testid": dataTestId,
   disabled,
-  tooltip
+  tooltip,
+  style
 }) => {
   const context = SwitchButtonContext.useSwitchButton();
   const ref = react.useRef(null);
@@ -34,6 +35,6 @@ const Option = ({
       setRefOptions([...refOptions, option]);
     }
   }, [refOptions, setRefOptions, value]);
-  return /* @__PURE__ */ jsxRuntime.jsx(index.SelectableCard, { checked: localValue === value, className: styles_css.switchButtonOption[sentiment], "data-checked": localValue === value, "data-testid": dataTestId ?? `switch-button-${value}`, disabled: !!disabled, label: children, name, onBlur, onChange: handleOnChange, onFocus, ref, tooltip, value });
+  return /* @__PURE__ */ jsxRuntime.jsx(index.SelectableCard, { checked: localValue === value, className: styles_css.switchButtonOption[sentiment], "data-checked": localValue === value, "data-testid": dataTestId ?? `switch-button-${value}`, disabled: !!disabled, label: children, name, onBlur, onChange: handleOnChange, onFocus, ref, style, tooltip, value });
 };
 exports.Option = Option;

package/dist/components/SwitchButton/Option.d.ts

@@ -1,10 +1,11 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type OptionProps = {
     value: string;
     children: ReactNode;
     'data-testid'?: string;
     disabled?: boolean;
     tooltip?: string;
+    style?: CSSProperties;
 };
-export declare const Option: ({ value, children, "data-testid": dataTestId, disabled, tooltip, }: OptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Option: ({ value, children, "data-testid": dataTestId, disabled, tooltip, style, }: OptionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SwitchButton/Option.js

@@ -9,7 +9,8 @@ const Option = ({
   children,
   "data-testid": dataTestId,
   disabled,
-  tooltip
+  tooltip,
+  style
 }) => {
   const context = useSwitchButton();
   const ref = useRef(null);
@@ -32,7 +33,7 @@ const Option = ({
       setRefOptions([...refOptions, option]);
     }
   }, [refOptions, setRefOptions, value]);
-  return /* @__PURE__ */ jsx(SelectableCard, { checked: localValue === value, className: switchButtonOption[sentiment], "data-checked": localValue === value, "data-testid": dataTestId ?? `switch-button-${value}`, disabled: !!disabled, label: children, name, onBlur, onChange: handleOnChange, onFocus, ref, tooltip, value });
+  return /* @__PURE__ */ jsx(SelectableCard, { checked: localValue === value, className: switchButtonOption[sentiment], "data-checked": localValue === value, "data-testid": dataTestId ?? `switch-button-${value}`, disabled: !!disabled, label: children, name, onBlur, onChange: handleOnChange, onFocus, ref, style, tooltip, value });
 };
 export {
   Option

package/dist/components/SwitchButton/index.cjs

@@ -21,7 +21,8 @@ const SwitchButton = ({
   tooltip,
   className,
   children,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const containerRef = react.useRef(null);
   const [localValue, setLocalValue] = react.useState(value);
@@ -100,7 +101,7 @@ const SwitchButton = ({
     if (mouseDownSide) {
       setWidth(width - constant.FOCUS_OVERLAY_SCALE_RATIO);
     }
-  }, ref: containerRef, children: [
+  }, ref: containerRef, style, children: [
     width ? /* @__PURE__ */ jsxRuntime.jsx(FocusOverlay.FocusOverlay, { cardWidth: width, mouseDownSide, position, sentiment }) : null,
     children
   ] }) }) }) });

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

@@ -1,4 +1,4 @@
-import type { ChangeEventHandler, FocusEventHandler, ReactNode } from 'react';
+import type { ChangeEventHandler, CSSProperties, FocusEventHandler, ReactNode } from 'react';
 type SwitchButtonProps = {
     name?: string;
     children: ReactNode;
@@ -11,18 +11,20 @@ type SwitchButtonProps = {
     'data-testid'?: string;
     size?: 'small' | 'medium';
     sentiment?: 'primary' | 'neutral';
+    style?: CSSProperties;
 };
 /**
  * SwitchButton is a component that allows the user to select between two options.
  */
 export declare const SwitchButton: {
-    ({ value, onChange, onFocus, onBlur, name, size, sentiment, tooltip, className, children, "data-testid": dataTestId, }: SwitchButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Option: ({ value, children, "data-testid": dataTestId, disabled, tooltip, }: {
+    ({ value, onChange, onFocus, onBlur, name, size, sentiment, tooltip, className, children, "data-testid": dataTestId, style, }: SwitchButtonProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    Option: ({ value, children, "data-testid": dataTestId, disabled, tooltip, style, }: {
         value: string;
         children: ReactNode;
         'data-testid'?: string;
         disabled?: boolean;
         tooltip?: string;
+        style?: CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/SwitchButton/index.js

@@ -19,7 +19,8 @@ const SwitchButton = ({
   tooltip,
   className,
   children,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const containerRef = useRef(null);
   const [localValue, setLocalValue] = useState(value);
@@ -98,7 +99,7 @@ const SwitchButton = ({
     if (mouseDownSide) {
       setWidth(width - FOCUS_OVERLAY_SCALE_RATIO);
     }
-  }, ref: containerRef, children: [
+  }, ref: containerRef, style, children: [
     width ? /* @__PURE__ */ jsx(FocusOverlay, { cardWidth: width, mouseDownSide, position, sentiment }) : null,
     children
   ] }) }) }) });

package/dist/components/Table/Cell.cjs

@@ -12,7 +12,8 @@ const Cell = ({
   colSpan,
   rowSpan,
   sentiment,
-  align = "left"
+  align = "left",
+  style
 }) => {
   const {
     maxWidth,
@@ -22,10 +23,13 @@ const Cell = ({
   return /* @__PURE__ */ jsxRuntime.jsx("td", { align, className: `${className ? `${className} ` : ""}${styles_css.tableCell({
     align,
     sentiment
-  })}`, colSpan, rowSpan, style: dynamic.assignInlineVars({
-    [variables_css.widthCell]: width,
-    [variables_css.minWidthCell]: minWidth,
-    [variables_css.maxWidthCell]: maxWidth
-  }), children });
+  })}`, colSpan, rowSpan, style: {
+    ...dynamic.assignInlineVars({
+      [variables_css.widthCell]: width,
+      [variables_css.minWidthCell]: minWidth,
+      [variables_css.maxWidthCell]: maxWidth
+    }),
+    ...style
+  }, children });
 };
 exports.Cell = Cell;

package/dist/components/Table/Cell.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { Color } from '../../theme';
 type Align = 'left' | 'center' | 'right';
 type CellProps = {
@@ -8,6 +8,7 @@ type CellProps = {
     rowSpan?: number;
     sentiment?: Color;
     align?: Align;
+    style?: CSSProperties;
 };
-export declare const Cell: ({ children, className, colSpan, rowSpan, sentiment, align, }: CellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Cell: ({ children, className, colSpan, rowSpan, sentiment, align, style, }: CellProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table/Cell.js

@@ -10,7 +10,8 @@ const Cell = ({
   colSpan,
   rowSpan,
   sentiment,
-  align = "left"
+  align = "left",
+  style
 }) => {
   const {
     maxWidth,
@@ -20,11 +21,14 @@ const Cell = ({
   return /* @__PURE__ */ jsx("td", { align, className: `${className ? `${className} ` : ""}${tableCell({
     align,
     sentiment
-  })}`, colSpan, rowSpan, style: assignInlineVars({
-    [widthCell]: width,
-    [minWidthCell]: minWidth,
-    [maxWidthCell]: maxWidth
-  }), children });
+  })}`, colSpan, rowSpan, style: {
+    ...assignInlineVars({
+      [widthCell]: width,
+      [minWidthCell]: minWidth,
+      [maxWidthCell]: maxWidth
+    }),
+    ...style
+  }, children });
 };
 export {
   Cell

package/dist/components/Table/Row.cjs

@@ -21,6 +21,7 @@ const Row = ({
   highlightAnimation,
   expandable,
   expanded,
+  style,
   "data-testid": dataTestid
 }) => {
   const {
@@ -69,7 +70,7 @@ const Row = ({
     }
   }, [refList, setRefList]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: `${className ? `${className}` : ""}${highlightAnimation ? ` ${styles_css.tableTrAnimation}` : ""}`, "data-testid": dataTestid, role: canClickRowToExpand ? "button row" : "row", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: `${className ? `${className}` : ""}${highlightAnimation ? ` ${styles_css.tableTrAnimation}` : ""}`, "data-testid": dataTestid, role: canClickRowToExpand ? "button row" : "row", style, children: [
       selectable ? /* @__PURE__ */ jsxRuntime.jsx(ColumnProvider.ColumnProvider, { width: themes.theme.sizing[300], children: /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { className: styles_css$1.listNoPaddingCell, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.tableCheckboxContainer, children: /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: typeof selectDisabled === "string" ? selectDisabled : void 0, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.Checkbox, { "aria-label": "select", checked: selectedRowIds[id], className: inRange?.includes(id) ? styles_css$1.listCheckboxInRange : void 0, disabled: !!selectDisabled, name: "table-select-checkbox", onChange: () => handleOnChange(id, selectedRowIds[id]), ref: checkboxRowRef, value: id }) }) }) }) }) : null,
       expandButton ? /* @__PURE__ */ jsxRuntime.jsx(ColumnProvider.ColumnProvider, { width: themes.theme.sizing[300], children: /* @__PURE__ */ jsxRuntime.jsx(Cell.Cell, { className: styles_css$1.listNoPaddingCell, children: /* @__PURE__ */ jsxRuntime.jsx(index$2.Button, { "aria-label": "expand", "data-testid": "list-expand-button", disabled: !expandable, onClick: toggleRowExpand, sentiment: "neutral", size: "xsmall", variant: "ghost", children: expandedRowIds[id] ? /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowUpIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowDownIcon, {}) }) }) }) : null,
       react.Children.map(children, (child, index2) => {

package/dist/components/Table/Row.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type RowProps = {
     children: ReactNode;
     expandable?: ReactNode;
@@ -11,6 +11,7 @@ type RowProps = {
     selectDisabled?: boolean | string;
     highlightAnimation?: boolean;
     expanded?: boolean;
+    style?: CSSProperties;
 };
-export declare const Row: ({ children, className, id, selectDisabled, highlightAnimation, expandable, expanded, "data-testid": dataTestid, }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Row: ({ children, className, id, selectDisabled, highlightAnimation, expandable, expanded, style, "data-testid": dataTestid, }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Table/Row.js

@@ -19,6 +19,7 @@ const Row = ({
   highlightAnimation,
   expandable,
   expanded,
+  style,
   "data-testid": dataTestid
 }) => {
   const {
@@ -67,7 +68,7 @@ const Row = ({
     }
   }, [refList, setRefList]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("tr", { className: `${className ? `${className}` : ""}${highlightAnimation ? ` ${tableTrAnimation}` : ""}`, "data-testid": dataTestid, role: canClickRowToExpand ? "button row" : "row", children: [
+    /* @__PURE__ */ jsxs("tr", { className: `${className ? `${className}` : ""}${highlightAnimation ? ` ${tableTrAnimation}` : ""}`, "data-testid": dataTestid, role: canClickRowToExpand ? "button row" : "row", style, children: [
       selectable ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx("div", { className: tableCheckboxContainer, children: /* @__PURE__ */ jsx(Tooltip, { text: typeof selectDisabled === "string" ? selectDisabled : void 0, children: /* @__PURE__ */ jsx(Checkbox, { "aria-label": "select", checked: selectedRowIds[id], className: inRange?.includes(id) ? listCheckboxInRange : void 0, disabled: !!selectDisabled, name: "table-select-checkbox", onChange: () => handleOnChange(id, selectedRowIds[id]), ref: checkboxRowRef, value: id }) }) }) }) }) : null,
       expandButton ? /* @__PURE__ */ jsx(ColumnProvider, { width: theme.sizing[300], children: /* @__PURE__ */ jsx(Cell, { className: listNoPaddingCell, children: /* @__PURE__ */ jsx(Button, { "aria-label": "expand", "data-testid": "list-expand-button", disabled: !expandable, onClick: toggleRowExpand, sentiment: "neutral", size: "xsmall", variant: "ghost", children: expandedRowIds[id] ? /* @__PURE__ */ jsx(ArrowUpIcon, {}) : /* @__PURE__ */ jsx(ArrowDownIcon, {}) }) }) }) : null,
       Children.map(children, (child, index) => {

package/dist/components/Table/index.cjs

@@ -39,8 +39,9 @@ const BaseTable = react.forwardRef(({
   bordered = false,
   stripped = false,
   autoCollapse = false,
-  onSelectedChange
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx(TableContext.TableProvider, { autoCollapse, bordered, columns, expandButton: expandable, onSelectedChange, selectable, stripped, children: /* @__PURE__ */ jsxRuntime.jsx(TableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: `${styles_css.table}${stripped ? ` ${styles_css.tableStripped}` : ""}${bordered ? ` ${styles_css.tableBordered}` : ""}`, ref, children: [
+  onSelectedChange,
+  style
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(TableContext.TableProvider, { autoCollapse, bordered, columns, expandButton: expandable, onSelectedChange, selectable, stripped, children: /* @__PURE__ */ jsxRuntime.jsx(TableContainer, { children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: `${styles_css.table}${stripped ? ` ${styles_css.tableStripped}` : ""}${bordered ? ` ${styles_css.tableBordered}` : ""}`, ref, style, children: [
   /* @__PURE__ */ jsxRuntime.jsx(Header.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(HeaderRow.HeaderRow, { hasSelectAllColumn: selectable, children: columns.map((column, index) => /* @__PURE__ */ jsxRuntime.jsx(HeaderCell.HeaderCell, { align: column.align, info: column.info, isOrdered: column.isOrdered, maxWidth: column.maxWidth, minWidth: column.minWidth, onOrder: column.onOrder, orderDirection: column.orderDirection, width: column.width, children: column.label }, `header-column-${index}`)) }) }),
   loading ? /* @__PURE__ */ jsxRuntime.jsx(Body.Body, { children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonRows.SkeletonRows, { cols: columns.length, rows: 5, selectable }) }) : children
 ] }) }) }));