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

package/README.md

@@ -46,16 +46,11 @@ You will also need to import styles of components for them to have the correct s
 
 ```tsx
 import { ThemeProvider } from '@ultraviolet/ui'
-import { Button, normalize, theme } from '@ultraviolet/ui'
+import { Button, theme } from '@ultraviolet/ui'
 import '@ultraviolet/ui/styles'
 
 const App = () => (
   <ThemeProvider theme={theme}>
-    <Global
-    styles={css`
-        ${normalize()}
-      `}
-    />
     <Button onClick={() => console.log('clicked')}>Click Me</Button>
   </ThemeProvider>
 )

package/dist/components/ActionBar/index.cjs

@@ -11,8 +11,12 @@ const ActionBar = ({
   role = "dialog",
   rank = 0,
   className,
+  style,
   "data-testid": dataTestId
-}) => reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.actionBar}`, "data-testid": dataTestId, role, style: dynamic.assignInlineVars({
-  [styles_css.rankActionBar]: `${rank}`
-}), children: /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { alignItems: "center", className: styles_css.stackActionBar, children }) }), document.body);
+}) => reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.actionBar}`, "data-testid": dataTestId, role, style: {
+  ...dynamic.assignInlineVars({
+    [styles_css.rankActionBar]: `${rank}`
+  }),
+  ...style
+}, children: /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { alignItems: "center", className: styles_css.stackActionBar, children }) }), document.body);
 exports.ActionBar = ActionBar;

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type ActionBarProps = {
     children: ReactNode;
     /**
@@ -8,6 +8,7 @@ type ActionBarProps = {
     role?: string;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 /**
  * The ActionBar is a floating bar that appears at the bottom of a page.
@@ -16,5 +17,5 @@ type ActionBarProps = {
  * **Note:** ActionBar is added into a portal at the end of the body element. This means that it will always be on top of other elements without `z-index`,
  * and will not be affected by the layout of the page it is on.
  */
-export declare const ActionBar: ({ children, role, rank, className, "data-testid": dataTestId, }: ActionBarProps) => import("react").ReactPortal;
+export declare const ActionBar: ({ children, role, rank, className, style, "data-testid": dataTestId, }: ActionBarProps) => import("react").ReactPortal;
 export {};

package/dist/components/ActionBar/index.js

@@ -9,10 +9,14 @@ const ActionBar = ({
   role = "dialog",
   rank = 0,
   className,
+  style,
   "data-testid": dataTestId
-}) => createPortal(/* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${actionBar}`, "data-testid": dataTestId, role, style: assignInlineVars({
-  [rankActionBar]: `${rank}`
-}), children: /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: stackActionBar, children }) }), document.body);
+}) => createPortal(/* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${actionBar}`, "data-testid": dataTestId, role, style: {
+  ...assignInlineVars({
+    [rankActionBar]: `${rank}`
+  }),
+  ...style
+}, children: /* @__PURE__ */ jsx(Stack, { alignItems: "center", className: stackActionBar, children }) }), document.body);
 export {
   ActionBar
 };

package/dist/components/ActionBar/styles.css.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                                                    */
 ;/* empty css                                                       */
 ;/* empty css                            */
 var rankActionBar = "var(--uv_1p607tg0)";

package/dist/components/ActionBar/styles.css.js

@@ -1,4 +1,3 @@
-/* empty css                                                  */
 /* empty css                                                     */
 /* empty css                          */
 var rankActionBar = "var(--uv_1p607tg0)";

package/dist/components/Alert/index.cjs

@@ -25,7 +25,8 @@ const Alert = ({
   onClose,
   className,
   disabled,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const [opened, setOpened] = react.useState(true);
   const Icon$1 = sentimentIcons[sentiment];
@@ -34,7 +35,7 @@ const Alert = ({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { className: `${className ? `${className} ` : ""}${styles_css.alert({
     sentiment
-  })}`, "data-testid": dataTestId, direction: "row", gap: 1, children: [
+  })}`, "data-testid": dataTestId, direction: "row", gap: 1, style, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: "center", className: styles_css.wrapAlert, direction: "row", gap: 2, justifyContent: "space-between", wrap: true, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: "start", direction: "row", flex: "1 1 auto", gap: 2, children: [
         /* @__PURE__ */ jsxRuntime.jsx(Icon$1, { "aria-hidden": "true", prominence: sentiment === "neutral" ? "strong" : void 0, sentiment, size: "large" }),

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

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 import { Button } from '../Button';
 import type { AlertSentiment } from './type';
 type AlertProps = {
@@ -18,9 +18,10 @@ type AlertProps = {
      * Disabled the alert button.
      */
     disabled?: boolean;
+    style?: CSSProperties;
 };
 /**
  * Alert component is used to display a short, important message in a way that attracts the user's attention without interrupting the user's task.
  */
-export declare const Alert: ({ children, title, sentiment, buttonText, onClickButton, closable, onClose, className, disabled, "data-testid": dataTestId, }: AlertProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const Alert: ({ children, title, sentiment, buttonText, onClickButton, closable, onClose, className, disabled, "data-testid": dataTestId, style, }: AlertProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Alert/index.js

@@ -23,7 +23,8 @@ const Alert = ({
   onClose,
   className,
   disabled,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const [opened, setOpened] = useState(true);
   const Icon = sentimentIcons[sentiment];
@@ -32,7 +33,7 @@ const Alert = ({
   }
   return /* @__PURE__ */ jsxs(Stack, { className: `${className ? `${className} ` : ""}${alert({
     sentiment
-  })}`, "data-testid": dataTestId, direction: "row", gap: 1, children: [
+  })}`, "data-testid": dataTestId, direction: "row", gap: 1, style, children: [
     /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: wrapAlert, direction: "row", gap: 2, justifyContent: "space-between", wrap: true, children: [
       /* @__PURE__ */ jsxs(Stack, { alignItems: "start", direction: "row", flex: "1 1 auto", gap: 2, children: [
         /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true", prominence: sentiment === "neutral" ? "strong" : void 0, sentiment, size: "large" }),

package/dist/components/Avatar/index.cjs

@@ -22,7 +22,8 @@ const Avatar = ({
   onClick,
   className,
   children,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const isHalved = colors.length > 1;
   const finalColors = colors?.map((bgColor) => themes.theme.colors[bgColor]?.backgroundStrong ?? bgColor);
@@ -33,7 +34,8 @@ const Avatar = ({
     size
   })}`, "data-has-background": !["user", "image"].includes(variant), "data-testid": dataTestId, onClick, onKeyDown: (event) => event.key === " " || event.key === "Enter" ? onClick?.() : null, role: onClick ? "button" : void 0, style: {
     backgroundImage: image ? `url(${image})` : void 0,
-    backgroundSize: image ? "cover" : void 0
+    backgroundSize: image ? "cover" : void 0,
+    ...style
   }, children: [
     upload ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.uploadContainer({
       shape,

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

@@ -2,4 +2,4 @@ import type { AvatarProps } from './types';
 /**
  * The Avatar component is used to represent a user, product, or entity. It can be used to display an image, an icon, a text or a set of colors.
  */
-export declare const Avatar: ({ shape, variant, image, text, size, sentiment, colors, upload, onClick, className, children, "data-testid": dataTestId, }: AvatarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Avatar: ({ shape, variant, image, text, size, sentiment, colors, upload, onClick, className, children, "data-testid": dataTestId, style, }: AvatarProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Avatar/index.js

@@ -20,7 +20,8 @@ const Avatar = ({
   onClick,
   className,
   children,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const isHalved = colors.length > 1;
   const finalColors = colors?.map((bgColor) => theme.colors[bgColor]?.backgroundStrong ?? bgColor);
@@ -31,7 +32,8 @@ const Avatar = ({
     size
   })}`, "data-has-background": !["user", "image"].includes(variant), "data-testid": dataTestId, onClick, onKeyDown: (event) => event.key === " " || event.key === "Enter" ? onClick?.() : null, role: onClick ? "button" : void 0, style: {
     backgroundImage: image ? `url(${image})` : void 0,
-    backgroundSize: image ? "cover" : void 0
+    backgroundSize: image ? "cover" : void 0,
+    ...style
   }, children: [
     upload ? /* @__PURE__ */ jsx("div", { className: uploadContainer({
       shape,

package/dist/components/Avatar/styles.css.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                                    */
 ;/* empty css                               */
 ;/* empty css                            */
 const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");

package/dist/components/Avatar/styles.css.js

@@ -1,3 +1,4 @@
+/* empty css                                                  */
 /* empty css                             */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";

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

@@ -1,4 +1,4 @@
-import type { MouseEvent, ReactNode } from 'react';
+import type { CSSProperties, MouseEvent, ReactNode } from 'react';
 import type { SENTIMENTS, sizes } from './constants';
 export type Colors = [] | [string] | [string, string] | readonly [string, string] | readonly [string] | readonly [];
 export type SentimentColors = 'primary' | 'neutral' | 'success' | 'danger' | 'warning' | 'info';
@@ -10,6 +10,7 @@ type CommonProps = {
     onClick?: (event?: MouseEvent<HTMLDivElement>) => void;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 type VariantUser = {
     variant: 'user';

package/dist/components/Badge/index.cjs

@@ -13,7 +13,8 @@ const Badge = ({
   disabled = false,
   className,
   children,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const ariaLabel = react.useMemo(() => ["neutral", "primary"].some((baseSentiment) => baseSentiment === sentiment) ? void 0 : sentiment, [sentiment]);
   return /* @__PURE__ */ jsxRuntime.jsx(index.Text, { "aria-label": ariaLabel, as: "span", className: `${className ? `${className} ` : ""}${styles_css.badge({
@@ -21,6 +22,6 @@ const Badge = ({
     prominence,
     sentiment,
     size
-  })}`, "data-testid": dataTestId, prominence: disabled ? "weak" : "default", variant: constant.TEXT_VARIANT[size], whiteSpace: "nowrap", children });
+  })}`, "data-testid": dataTestId, prominence: disabled ? "weak" : "default", style, variant: constant.TEXT_VARIANT[size], whiteSpace: "nowrap", children });
 };
 exports.Badge = Badge;

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

@@ -1,12 +1,13 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { BadgeVariants } from './styles.css';
 type BadgeProps = {
     className?: string;
     children: ReactNode;
     'data-testid'?: string;
+    style?: CSSProperties;
 } & BadgeVariants;
 /**
  * Badge component is used to display a status or a label in a small container.
  */
-export declare const Badge: ({ sentiment, size, prominence, disabled, className, children, "data-testid": dataTestId, }: BadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Badge: ({ sentiment, size, prominence, disabled, className, children, "data-testid": dataTestId, style, }: BadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Badge/index.js

@@ -11,7 +11,8 @@ const Badge = ({
   disabled = false,
   className,
   children,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const ariaLabel = useMemo(() => ["neutral", "primary"].some((baseSentiment) => baseSentiment === sentiment) ? void 0 : sentiment, [sentiment]);
   return /* @__PURE__ */ jsx(Text, { "aria-label": ariaLabel, as: "span", className: `${className ? `${className} ` : ""}${badge({
@@ -19,7 +20,7 @@ const Badge = ({
     prominence,
     sentiment,
     size
-  })}`, "data-testid": dataTestId, prominence: disabled ? "weak" : "default", variant: TEXT_VARIANT[size], whiteSpace: "nowrap", children });
+  })}`, "data-testid": dataTestId, prominence: disabled ? "weak" : "default", style, variant: TEXT_VARIANT[size], whiteSpace: "nowrap", children });
 };
 export {
   Badge

package/dist/components/Banner/index.cjs

@@ -26,7 +26,8 @@ const Banner = ({
   image,
   className,
   closable = true,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const {
     theme
@@ -48,7 +49,7 @@ const Banner = ({
   return /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { className: `${className ? `${className} ` : ""}${styles_css.banner({
     size,
     variant
-  })}`, "data-testid": dataTestId, direction: "row", gap: 2, justifyContent: "space-between", children: [
+  })}`, "data-testid": dataTestId, direction: "row", gap: 2, justifyContent: "space-between", style, children: [
     image ? /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { className: styles_css.imageStackBanner[size], justifyContent: "center", children: typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", src: image }) : image }) : /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { className: styles_css.imageStackBanner[size], justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", src: defaultImage$1 }) }),
     /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: direction === "column" ? "start" : "center", direction, gap: 2, justifyContent: "space-between", style: {
       flex: 1

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

@@ -1,4 +1,4 @@
-import type { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 import { Button } from '../Button';
 import type { BannerVariants } from './styles.css';
 type BannerProps = {
@@ -18,9 +18,10 @@ type BannerProps = {
     closable?: boolean;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 } & BannerVariants;
 /**
  * Banner component is used to display an informative message to the user with style.
  */
-export declare const Banner: ({ variant, size, title, children, direction, onClose, buttonText, onClickButton, linkText, linkHref, image, className, closable, "data-testid": dataTestId, }: BannerProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const Banner: ({ variant, size, title, children, direction, onClose, buttonText, onClickButton, linkText, linkHref, image, className, closable, "data-testid": dataTestId, style, }: BannerProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Banner/index.js

@@ -24,7 +24,8 @@ const Banner = ({
   image,
   className,
   closable = true,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const {
     theme
@@ -46,7 +47,7 @@ const Banner = ({
   return /* @__PURE__ */ jsxs(Stack, { className: `${className ? `${className} ` : ""}${banner({
     size,
     variant
-  })}`, "data-testid": dataTestId, direction: "row", gap: 2, justifyContent: "space-between", children: [
+  })}`, "data-testid": dataTestId, direction: "row", gap: 2, justifyContent: "space-between", style, children: [
     image ? /* @__PURE__ */ jsx(Stack, { className: imageStackBanner[size], justifyContent: "center", children: typeof image === "string" ? /* @__PURE__ */ jsx("img", { alt: "", src: image }) : image }) : /* @__PURE__ */ jsx(Stack, { className: imageStackBanner[size], justifyContent: "center", children: /* @__PURE__ */ jsx("img", { alt: "", src: defaultImage }) }),
     /* @__PURE__ */ jsxs(Stack, { alignItems: direction === "column" ? "start" : "center", direction, gap: 2, justifyContent: "space-between", style: {
       flex: 1

package/dist/components/BarChart/index.cjs

@@ -28,7 +28,8 @@ const BarChart = ({
   tooltipFunction,
   chartProps,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const theme = themes.useTheme();
   const tooltip = react.useCallback((props) => {
@@ -40,7 +41,8 @@ const BarChart = ({
     return /* @__PURE__ */ jsxRuntime.jsx(Tooltip, { color, formattedValue, indexValue: indexValue.toString() });
   }, [tooltipFunction]);
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className, "data-testid": dataTestId, style: {
-    height
+    height,
+    ...style
   }, children: /* @__PURE__ */ jsxRuntime.jsx(bar.ResponsiveBar, { axisBottom: {
     format: axisFormatters?.bottom,
     tickPadding: 5,

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

@@ -1,7 +1,7 @@
 import type { BarDatum, BarSvgProps, BarTooltipProps } from '@nivo/bar';
 import { ResponsiveBar } from '@nivo/bar';
 import type { Box, DatumValue, ValueFormat } from '@nivo/core';
-import type { ComponentProps } from 'react';
+import type { ComponentProps, CSSProperties } from 'react';
 import BarChartTooltip from './Tooltip';
 type Formatter = ValueFormat<DatumValue>;
 type TickSpec = NonNullable<ComponentProps<typeof ResponsiveBar>['axisBottom']>['tickValues'];
@@ -17,11 +17,12 @@ type BarChartProps = {
     tooltipFunction?: (props: BarTooltipProps<BarDatum>) => ComponentProps<typeof BarChartTooltip>;
     chartProps?: Partial<BarSvgProps<BarDatum>>;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 /**
  * BarChart component is used to display data in a bar chart format. It uses the Nivo library under the hood.
  * See https://nivo.rocks/bar/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, }: BarChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, style, }: BarChartProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BarChart/index.js

@@ -26,7 +26,8 @@ const BarChart = ({
   tooltipFunction,
   chartProps,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const theme = useTheme();
   const tooltip = useCallback((props) => {
@@ -38,7 +39,8 @@ const BarChart = ({
     return /* @__PURE__ */ jsx(BarChartToolTip, { color, formattedValue, indexValue: indexValue.toString() });
   }, [tooltipFunction]);
   return /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, style: {
-    height
+    height,
+    ...style
   }, children: /* @__PURE__ */ jsx(ResponsiveBar, { axisBottom: {
     format: axisFormatters?.bottom,
     tickPadding: 5,

package/dist/components/BarStack/index.cjs

@@ -10,12 +10,13 @@ const BarStack = ({
   data,
   total,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const computedTotal = react.useMemo(() => total ?? data.reduce((acc, {
     value
   }) => acc + value, 0), [total, data]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.containerBarStack}`, "data-testid": dataTestId, children: data.map(({
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.containerBarStack}`, "data-testid": dataTestId, style, children: data.map(({
     id,
     value,
     text,

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

@@ -1,4 +1,4 @@
-import type { KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
+import type { CSSProperties, KeyboardEventHandler, MouseEventHandler, ReactNode } from 'react';
 type BarProps = {
     /**
      * Unique id of the bar
@@ -29,9 +29,10 @@ type BarStackProps = {
     total?: number;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 /**
  * BarStack is a graphic component that is used to show data in one dimension.
  */
-export declare const BarStack: ({ data, total, className, "data-testid": dataTestId, }: BarStackProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const BarStack: ({ data, total, className, "data-testid": dataTestId, style, }: BarStackProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/BarStack/index.js

@@ -8,12 +8,13 @@ const BarStack = ({
   data,
   total,
   className,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const computedTotal = useMemo(() => total ?? data.reduce((acc, {
     value
   }) => acc + value, 0), [total, data]);
-  return /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${containerBarStack}`, "data-testid": dataTestId, children: data.map(({
+  return /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${containerBarStack}`, "data-testid": dataTestId, style, children: data.map(({
     id,
     value,
     text,

package/dist/components/Breadcrumbs/index.cjs

@@ -7,7 +7,8 @@ const styles_css = require("./styles.css.cjs");
 const Breadcrumbs = ({
   children,
   className,
-  "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className, "data-testid": dataTestId, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: styles_css.breadcrumbs, children }) });
+  "data-testid": dataTestId,
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "breadcrumb", className, "data-testid": dataTestId, style, children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: styles_css.breadcrumbs, children }) });
 Breadcrumbs.Item = Item.Item;
 exports.Breadcrumbs = Breadcrumbs;

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

@@ -1,9 +1,10 @@
-import type { JSX, ReactNode } from 'react';
+import type { CSSProperties, JSX, ReactNode } from 'react';
 import { Item } from './components/Item';
 type BreadcrumbsProps = {
     children: ReactNode;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 type BreadcrumbsType = ((props: BreadcrumbsProps) => JSX.Element) & {
     Item: typeof Item;

package/dist/components/Breadcrumbs/index.js

@@ -5,8 +5,9 @@ import { breadcrumbs } from "./styles.css.js";
 const Breadcrumbs = ({
   children,
   className,
-  "data-testid": dataTestId
-}) => /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, "data-testid": dataTestId, children: /* @__PURE__ */ jsx("ol", { className: breadcrumbs, children }) });
+  "data-testid": dataTestId,
+  style
+}) => /* @__PURE__ */ jsx("nav", { "aria-label": "breadcrumb", className, "data-testid": dataTestId, style, children: /* @__PURE__ */ jsx("ol", { className: breadcrumbs, children }) });
 Breadcrumbs.Item = Item;
 export {
   Breadcrumbs

package/dist/components/Bullet/index.cjs

@@ -13,11 +13,12 @@ const Bullet = ({
   "data-testid": dataTestId,
   prominence = "default",
   children,
-  disabled
+  disabled,
+  style
 }) => /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { id: tooltipBaseId, text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.bullet({
   disabled,
   prominence,
   sentiment,
   size
-})}`, "data-testid": dataTestId, children }) });
+})}`, "data-testid": dataTestId, style, children }) });
 exports.Bullet = Bullet;

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { SENTIMENTS } from '../../theme';
 import type { PROMINENCES, SIZES } from './constants';
 type ProminenceType = keyof typeof PROMINENCES;
@@ -12,9 +12,10 @@ type BulletProps = {
     prominence?: ProminenceType;
     children?: ReactNode;
     disabled?: boolean;
+    style?: CSSProperties;
 };
 /**
  * Bullet component is used to display a small icon or text with a colored background in a circle.
  */
-export declare const Bullet: ({ className, sentiment, size, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, children, disabled, }: BulletProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Bullet: ({ className, sentiment, size, tooltip, tooltipBaseId, "data-testid": dataTestId, prominence, children, disabled, style, }: BulletProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Bullet/index.js

@@ -11,13 +11,14 @@ const Bullet = ({
   "data-testid": dataTestId,
   prominence = "default",
   children,
-  disabled
+  disabled,
+  style
 }) => /* @__PURE__ */ jsx(Tooltip, { id: tooltipBaseId, text: tooltip, children: /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${bullet({
   disabled,
   prominence,
   sentiment,
   size
-})}`, "data-testid": dataTestId, children }) });
+})}`, "data-testid": dataTestId, style, children }) });
 export {
   Bullet
 };

package/dist/components/Button/index.cjs

@@ -71,7 +71,7 @@ const Button = react.forwardRef(({
       sentiment,
       size,
       variant
-    })}`, "data-testid": dataTestId, download, href, onBlur, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, ref, role, tabIndex, target, type, children: content }) });
+    })}`, "data-testid": dataTestId, download, href, onBlur, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, ref, role, style, tabIndex, target, type, children: content }) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("button", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, autoFocus, className: `${className ? `${className} ` : ""}${styles_css.button({
     disabled,

package/dist/components/Button/index.js

@@ -69,7 +69,7 @@ const Button = forwardRef(({
       sentiment,
       size,
       variant
-    })}`, "data-testid": dataTestId, download, href, onBlur, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, ref, role, tabIndex, target, type, children: content }) });
+    })}`, "data-testid": dataTestId, download, href, onBlur, onClick, onMouseDown, onMouseEnter, onMouseLeave, onMouseOut, onMouseUp, ref, role, style, tabIndex, target, type, children: content }) });
   }
   return /* @__PURE__ */ jsx(Tooltip, { containerFullWidth: fullWidth, text: tooltip, children: /* @__PURE__ */ jsx("button", { "aria-controls": ariaControls, "aria-current": ariaCurrent, "aria-expanded": ariaExpanded, "aria-haspopup": ariaHaspopup, "aria-label": ariaLabel, autoFocus, className: `${className ? `${className} ` : ""}${button({
     disabled,

package/dist/components/Card/index.cjs

@@ -13,14 +13,15 @@ const Card = react.forwardRef(({
   active = false,
   children,
   className,
-  "data-testid": dataTestId
-}, ref) => header ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { className: `${className ? `${className} ` : ""}${styles_css.stackCard}`, "data-disabled": disabled, "data-testid": dataTestId, gap: 1, ref, children: [
+  "data-testid": dataTestId,
+  style
+}, ref) => header ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { className: `${className ? `${className} ` : ""}${styles_css.stackCard}`, "data-disabled": disabled, "data-testid": dataTestId, gap: 1, ref, style, children: [
   typeof header === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "h2", disabled, prominence: "strong", sentiment: "neutral", variant: "heading", children: header }) : header,
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.borderedBox, "data-disabled": disabled, "data-is-active": active, children: subHeader ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 2, children: [
     typeof subHeader === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "h3", disabled, sentiment: "neutral", variant: "headingSmallStrong", children: subHeader }) : subHeader,
     children
   ] }) : children })
-] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.borderedBox}`, "data-disabled": disabled, "data-is-active": active, "data-testid": dataTestId, ref, children: subHeader ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 2, children: [
+] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.borderedBox}`, "data-disabled": disabled, "data-is-active": active, "data-testid": dataTestId, ref, style, children: subHeader ? /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 2, children: [
   typeof subHeader === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "h3", disabled, sentiment: "neutral", variant: "headingSmallStrong", children: subHeader }) : subHeader,
   children
 ] }) : children }));

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type CardProps = {
     children: ReactNode;
     /**
@@ -13,6 +13,7 @@ type CardProps = {
     disabled?: boolean;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 /**
  * Card component is a simple component to display content in a box with a border.