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

package/dist/components/Menu/components/Group.cjs

@@ -10,11 +10,12 @@ const Group = ({
   label,
   children,
   labelDescription,
-  emptyState
+  emptyState,
+  style
 }) => {
   const isChildrenEmpty = react.Children.count(children) === 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_css.menuGroup, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: "center", direction: "row", gap: 1, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles_css.menuGroup, style, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: "center", direction: "row", gap: 1, children: [
       /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "span", prominence: "weak", sentiment: "neutral", variant: "captionStrong", children: label }),
       labelDescription || null
     ] }) }),

package/dist/components/Menu/components/Group.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type GroupProps = {
     label: string;
     children: ReactNode;
@@ -7,6 +7,7 @@ type GroupProps = {
      * Empty state will be shown when there are no children
      */
     emptyState?: ReactNode;
+    style?: CSSProperties;
 };
-export declare const Group: ({ label, children, labelDescription, emptyState, }: GroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Group: ({ label, children, labelDescription, emptyState, style, }: GroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Menu/components/Group.js

@@ -8,11 +8,12 @@ const Group = ({
   label,
   children,
   labelDescription,
-  emptyState
+  emptyState,
+  style
 }) => {
   const isChildrenEmpty = Children.count(children) === 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("span", { className: menuGroup, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
+    /* @__PURE__ */ jsx("span", { className: menuGroup, style, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
       /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: "neutral", variant: "captionStrong", children: label }),
       labelDescription || null
     ] }) }),

package/dist/components/Menu/components/Item.cjs

@@ -21,7 +21,8 @@ const Item = react.forwardRef(({
   active,
   className,
   searchText,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }, ref) => {
   const {
     hideOnClickItem,
@@ -66,7 +67,7 @@ const Item = react.forwardRef(({
   if (href && !disabled) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.menuItemContainer({
       borderless
-    }), "data-search-text": searchText, children: /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("a", { className: `${className ? `${className} ` : ""}${styles_css.menuItem({
+    }), "data-search-text": searchText, style, children: /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("a", { className: `${className ? `${className} ` : ""}${styles_css.menuItem({
       borderless: true,
       disabled,
       sentiment
@@ -78,7 +79,7 @@ const Item = react.forwardRef(({
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.menuItemContainer({
     borderless
-  }), "data-search-text": searchText, children: /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: `${className ? `${className} ` : ""}${styles_css.menuItem({
+  }), "data-search-text": searchText, style, children: /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsx("button", { className: `${className ? `${className} ` : ""}${styles_css.menuItem({
     borderless,
     disabled,
     sentiment

package/dist/components/Menu/components/Item.d.ts

@@ -1,4 +1,4 @@
-import type { MouseEventHandler, ReactNode } from 'react';
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
 type MenuItemSentiment = 'neutral' | 'primary' | 'danger';
 type ItemProps = {
     href?: HTMLAnchorElement['href'];
@@ -17,6 +17,7 @@ type ItemProps = {
      * If you children is complex and you want to specify the search text use this prop.
      */
     searchText?: string;
+    style?: CSSProperties;
 };
 declare const Item: import("react").ForwardRefExoticComponent<ItemProps & import("react").RefAttributes<HTMLElement>>;
 export default Item;

package/dist/components/Menu/components/Item.js

@@ -20,7 +20,8 @@ const Item = forwardRef(({
   active,
   className,
   searchText,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }, ref) => {
   const {
     hideOnClickItem,
@@ -65,7 +66,7 @@ const Item = forwardRef(({
   if (href && !disabled) {
     return /* @__PURE__ */ jsx("div", { className: menuItemContainer({
       borderless
-    }), "data-search-text": searchText, children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx("a", { className: `${className ? `${className} ` : ""}${menuItem({
+    }), "data-search-text": searchText, style, children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx("a", { className: `${className ? `${className} ` : ""}${menuItem({
       borderless: true,
       disabled,
       sentiment
@@ -77,7 +78,7 @@ const Item = forwardRef(({
   }
   return /* @__PURE__ */ jsx("div", { className: menuItemContainer({
     borderless
-  }), "data-search-text": searchText, children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx("button", { className: `${className ? `${className} ` : ""}${menuItem({
+  }), "data-search-text": searchText, style, children: /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsx("button", { className: `${className ? `${className} ` : ""}${menuItem({
     borderless,
     disabled,
     sentiment

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

@@ -53,12 +53,13 @@ export declare const Menu: import("react").ForwardRefExoticComponent<{
     portalTarget?: HTMLElement;
     dynamicDomRendering?: boolean;
     style?: import("react").CSSProperties;
-} & import("react").RefAttributes<HTMLDivElement>, "align" | "dynamicDomRendering"> & import("react").RefAttributes<HTMLButtonElement>> & {
-    Group: ({ label, children, labelDescription, emptyState, }: {
+} & import("react").RefAttributes<HTMLDivElement>, "style" | "align" | "dynamicDomRendering"> & import("react").RefAttributes<HTMLButtonElement>> & {
+    Group: ({ label, children, labelDescription, emptyState, style, }: {
         label: string;
         children: import("react").ReactNode;
         labelDescription?: import("react").ReactNode;
         emptyState?: import("react").ReactNode;
+        style?: import("react").CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
     Item: import("react").ForwardRefExoticComponent<{
         href?: HTMLAnchorElement["href"];
@@ -74,5 +75,6 @@ export declare const Menu: import("react").ForwardRefExoticComponent<{
         active?: boolean;
         'data-testid'?: string;
         searchText?: string;
+        style?: import("react").CSSProperties;
     } & import("react").RefAttributes<HTMLElement>>;
 };

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

@@ -44,5 +44,5 @@ export type MenuProps = {
      * When set to true, the menu does not shrink (height) to avoid overflow on the page
      */
     noShrink?: boolean;
-} & Pick<ComponentProps<typeof Popup>, 'dynamicDomRendering' | 'align'>;
+} & Pick<ComponentProps<typeof Popup>, 'dynamicDomRendering' | 'align' | 'style'>;
 export {};

package/dist/components/Meter/index.cjs

@@ -11,13 +11,14 @@ const Meter = ({
   value,
   className,
   "data-testid": dataTestId,
+  style,
   id
 }) => {
   const toValue = (value + 1) / strength.length * 100;
   const width = `${toValue}%`;
   const backgroundColor = strength[value]?.color ?? strength[0].color;
   const text = strength[value]?.text ?? strength[0].text;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-labelledby": "meter-label", "aria-live": "polite", "aria-valuemax": strength.length ?? 0, "aria-valuemin": 0, "aria-valuenow": value, className, "data-testid": dataTestId, id, role: "meter", title, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-labelledby": "meter-label", "aria-live": "polite", "aria-valuemax": strength.length ?? 0, "aria-valuemin": 0, "aria-valuenow": value, className, "data-testid": dataTestId, id, role: "meter", style, title, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(index.Text, { as: "p", id: "meter-label", variant: "bodySmallStrong", children: [
       title,
       /* @__PURE__ */ jsxRuntime.jsx(index.Text, { as: "span", className: styles_css.strengthMeter, style: dynamic.assignInlineVars({

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

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 type Strength = {
     /**
      * Color to display
@@ -18,9 +19,10 @@ type PasswordStrengthMeterProps = {
     className?: string;
     'data-testid'?: string;
     id?: string;
+    style?: CSSProperties;
 };
 /**
  * Show strength of a password based on different criteria.
  */
-export declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, id, }: PasswordStrengthMeterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Meter: ({ strength, title, value, className, "data-testid": dataTestId, style, id, }: PasswordStrengthMeterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Meter/index.js

@@ -9,13 +9,14 @@ const Meter = ({
   value,
   className,
   "data-testid": dataTestId,
+  style,
   id
 }) => {
   const toValue = (value + 1) / strength.length * 100;
   const width = `${toValue}%`;
   const backgroundColor = strength[value]?.color ?? strength[0].color;
   const text = strength[value]?.text ?? strength[0].text;
-  return /* @__PURE__ */ jsxs("div", { "aria-labelledby": "meter-label", "aria-live": "polite", "aria-valuemax": strength.length ?? 0, "aria-valuemin": 0, "aria-valuenow": value, className, "data-testid": dataTestId, id, role: "meter", title, children: [
+  return /* @__PURE__ */ jsxs("div", { "aria-labelledby": "meter-label", "aria-live": "polite", "aria-valuemax": strength.length ?? 0, "aria-valuemin": 0, "aria-valuenow": value, className, "data-testid": dataTestId, id, role: "meter", style, title, children: [
     /* @__PURE__ */ jsxs(Text, { as: "p", id: "meter-label", variant: "bodySmallStrong", children: [
       title,
       /* @__PURE__ */ jsx(Text, { as: "span", className: strengthMeter, style: assignInlineVars({

package/dist/components/Modal/ModalContent.cjs

@@ -24,8 +24,9 @@ const ModalContent = ({
   handleOpen,
   handleToggle,
   finalId,
-  image
-}) => visible || open ? /* @__PURE__ */ jsxRuntime.jsx(Dialog.Dialog, { ariaLabel, backdropClassName, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id: finalId, image, onClose: handleClose, open: visible || open, placement, preventBodyScroll, size: finalSize, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  image,
+  style
+}) => visible || open ? /* @__PURE__ */ jsxRuntime.jsx(Dialog.Dialog, { ariaLabel, backdropClassName, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id: finalId, image, onClose: handleClose, open: visible || open, placement, preventBodyScroll, size: finalSize, style, children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
   typeof children === "function" ? children({
     close: handleClose,
     modalId: finalId,

package/dist/components/Modal/ModalContent.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentProps } from 'react';
+import type { ComponentProps, CSSProperties } from 'react';
 import type { Modal } from '.';
 import type { ModalPlacement, ModalSize } from './types';
 type ModalContentProps = ComponentProps<typeof Modal> & {
@@ -12,6 +12,7 @@ type ModalContentProps = ComponentProps<typeof Modal> & {
     handleClose: () => void;
     dataTestId?: string;
     image?: string;
+    style?: CSSProperties;
 };
-export declare const ModalContent: ({ visible, open, placement, finalSize, ariaLabel, hideOnClickOutside, hideOnEsc, preventBodyScroll, handleClose, className, backdropClassName, dataTestId, isClosable, children, handleOpen, handleToggle, finalId, image, }: ModalContentProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const ModalContent: ({ visible, open, placement, finalSize, ariaLabel, hideOnClickOutside, hideOnEsc, preventBodyScroll, handleClose, className, backdropClassName, dataTestId, isClosable, children, handleOpen, handleToggle, finalId, image, style, }: ModalContentProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/Modal/ModalContent.js

@@ -22,8 +22,9 @@ const ModalContent = ({
   handleOpen,
   handleToggle,
   finalId,
-  image
-}) => visible || open ? /* @__PURE__ */ jsx(Dialog, { ariaLabel, backdropClassName, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id: finalId, image, onClose: handleClose, open: visible || open, placement, preventBodyScroll, size: finalSize, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+  image,
+  style
+}) => visible || open ? /* @__PURE__ */ jsx(Dialog, { ariaLabel, backdropClassName, className, "data-testid": dataTestId, hideOnClickOutside, hideOnEsc, id: finalId, image, onClose: handleClose, open: visible || open, placement, preventBodyScroll, size: finalSize, style, children: /* @__PURE__ */ jsxs(Fragment, { children: [
   typeof children === "function" ? children({
     close: handleClose,
     modalId: finalId,

package/dist/components/Modal/components/Dialog.cjs

@@ -25,7 +25,8 @@ const Dialog = ({
   preventBodyScroll,
   hideOnEsc,
   backdropClassName,
-  image
+  image,
+  style
 }) => {
   const [isVisible, setIsVisible] = react.useState(false);
   const containerRef = react.useRef(document.createElement("div"));
@@ -133,10 +134,13 @@ const Dialog = ({
     placement,
     positivePosition: position > 0,
     size
-  })}`, "data-size": size, "data-testid": dataTestId, id, onCancel: stopCancel, onClose: stopCancel, onKeyDown: handleFocusTrap, onKeyUp: handleKeyUp, open: true, ref: dialogRef, style: dynamic.assignInlineVars({
-    [styles_css.topModal]: `-${top}px`,
-    [styles_css.positionModal]: `${position * 50}px`
-  }), tabIndex: 0, children: image ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+  })}`, "data-size": size, "data-testid": dataTestId, id, onCancel: stopCancel, onClose: stopCancel, onKeyDown: handleFocusTrap, onKeyUp: handleKeyUp, open: true, ref: dialogRef, style: {
+    ...dynamic.assignInlineVars({
+      [styles_css.topModal]: `-${top}px`,
+      [styles_css.positionModal]: `${position * 50}px`
+    }),
+    ...style
+  }, tabIndex: 0, children: image ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { alignItems: "end", className: styles_css.modalImageContainer, justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "illustration", className: styles_css.modalImage, src: image }) }),
     /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { className: styles_css.modalContent, gap: 5, children })
   ] }) : children }) }), containerRef.current);

package/dist/components/Modal/components/Dialog.d.ts

@@ -1,2 +1,2 @@
 import type { DialogProps } from '../types';
-export declare const Dialog: ({ children, placement, onClose, hideOnClickOutside, size, id, ariaLabel, className, "data-testid": dataTestId, preventBodyScroll, hideOnEsc, backdropClassName, image, }: DialogProps) => import("react").ReactPortal;
+export declare const Dialog: ({ children, placement, onClose, hideOnClickOutside, size, id, ariaLabel, className, "data-testid": dataTestId, preventBodyScroll, hideOnEsc, backdropClassName, image, style, }: DialogProps) => import("react").ReactPortal;

package/dist/components/Modal/components/Dialog.js

@@ -23,7 +23,8 @@ const Dialog = ({
   preventBodyScroll,
   hideOnEsc,
   backdropClassName,
-  image
+  image,
+  style
 }) => {
   const [isVisible, setIsVisible] = useState(false);
   const containerRef = useRef(document.createElement("div"));
@@ -131,10 +132,13 @@ const Dialog = ({
     placement,
     positivePosition: position > 0,
     size
-  })}`, "data-size": size, "data-testid": dataTestId, id, onCancel: stopCancel, onClose: stopCancel, onKeyDown: handleFocusTrap, onKeyUp: handleKeyUp, open: true, ref: dialogRef, style: assignInlineVars({
-    [topModal]: `-${top}px`,
-    [positionModal]: `${position * 50}px`
-  }), tabIndex: 0, children: image ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  })}`, "data-size": size, "data-testid": dataTestId, id, onCancel: stopCancel, onClose: stopCancel, onKeyDown: handleFocusTrap, onKeyUp: handleKeyUp, open: true, ref: dialogRef, style: {
+    ...assignInlineVars({
+      [topModal]: `-${top}px`,
+      [positionModal]: `${position * 50}px`
+    }),
+    ...style
+  }, tabIndex: 0, children: image ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Stack, { alignItems: "end", className: modalImageContainer, justifyContent: "center", children: /* @__PURE__ */ jsx("img", { alt: "illustration", className: modalImage, src: image }) }),
     /* @__PURE__ */ jsx(Stack, { className: modalContent, gap: 5, children })
   ] }) : children }) }), containerRef.current);

package/dist/components/Modal/index.cjs

@@ -23,7 +23,8 @@ const Modal = ({
   className,
   "data-testid": dataTestId,
   backdropClassName,
-  image
+  image,
+  style
 }) => {
   const [visible, setVisible] = react.useState(false);
   const controlId = react.useId();
@@ -51,7 +52,7 @@ const Modal = ({
   const context = react.useContext(ModalProvider.ModalContext);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     disclosure ? /* @__PURE__ */ jsxRuntime.jsx(Disclosure.Disclosure, { disclosure, handleClose, handleOpen, id: finalId, ref: disclosureRef, toggle: handleToggle, visible }) : null,
-    !context ? /* @__PURE__ */ jsxRuntime.jsx(ModalProvider.ModalProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalContent.ModalContent, { ariaLabel, backdropClassName, className, dataTestId, finalId, finalSize: size, handleClose, handleOpen, handleToggle, hideOnClickOutside, hideOnEsc, image, isClosable, open, placement, preventBodyScroll, visible, children }) }) : /* @__PURE__ */ jsxRuntime.jsx(ModalContent.ModalContent, { ariaLabel, backdropClassName, className, dataTestId, finalId, finalSize: size, handleClose, handleOpen, handleToggle, hideOnClickOutside, hideOnEsc, image, isClosable, open, placement, preventBodyScroll, visible, children })
+    !context ? /* @__PURE__ */ jsxRuntime.jsx(ModalProvider.ModalProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(ModalContent.ModalContent, { ariaLabel, backdropClassName, className, dataTestId, finalId, finalSize: size, handleClose, handleOpen, handleToggle, hideOnClickOutside, hideOnEsc, image, isClosable, open, placement, preventBodyScroll, style, visible, children }) }) : /* @__PURE__ */ jsxRuntime.jsx(ModalContent.ModalContent, { ariaLabel, backdropClassName, className, dataTestId, finalId, finalSize: size, handleClose, handleOpen, handleToggle, hideOnClickOutside, hideOnEsc, image, isClosable, open, placement, preventBodyScroll, style, visible, children })
   ] });
 };
 exports.Modal = Modal;

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

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode } from 'react';
+import type { CSSProperties, ReactElement, ReactNode } from 'react';
 import type { ModalPlacement, ModalSize, ModalState } from './types';
 export type ModalProps = {
     id?: string;
@@ -21,9 +21,10 @@ export type ModalProps = {
      * Add an image a the top of the modal.
      */
     image?: string;
+    style?: CSSProperties;
 };
 /**
  * Modal is a component that allows you to display content on top of other content.
  * It is often used to display a dialog with additional information or to ask for a confirmation.
  */
-export declare const Modal: ({ ariaLabel, id, children, disclosure, hideOnClickOutside, hideOnEsc, isClosable, onClose, onBeforeClose, open, placement, preventBodyScroll, size, className, "data-testid": dataTestId, backdropClassName, image, }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Modal: ({ ariaLabel, id, children, disclosure, hideOnClickOutside, hideOnEsc, isClosable, onClose, onBeforeClose, open, placement, preventBodyScroll, size, className, "data-testid": dataTestId, backdropClassName, image, style, }: ModalProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/components/Modal/index.js

@@ -21,7 +21,8 @@ const Modal = ({
   className,
   "data-testid": dataTestId,
   backdropClassName,
-  image
+  image,
+  style
 }) => {
   const [visible, setVisible] = useState(false);
   const controlId = useId();
@@ -49,7 +50,7 @@ const Modal = ({
   const context = useContext(ModalContext);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     disclosure ? /* @__PURE__ */ jsx(Disclosure, { disclosure, handleClose, handleOpen, id: finalId, ref: disclosureRef, toggle: handleToggle, visible }) : null,
-    !context ? /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(ModalContent, { ariaLabel, backdropClassName, className, dataTestId, finalId, finalSize: size, handleClose, handleOpen, handleToggle, hideOnClickOutside, hideOnEsc, image, isClosable, open, placement, preventBodyScroll, visible, children }) }) : /* @__PURE__ */ jsx(ModalContent, { ariaLabel, backdropClassName, className, dataTestId, finalId, finalSize: size, handleClose, handleOpen, handleToggle, hideOnClickOutside, hideOnEsc, image, isClosable, open, placement, preventBodyScroll, visible, children })
+    !context ? /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(ModalContent, { ariaLabel, backdropClassName, className, dataTestId, finalId, finalSize: size, handleClose, handleOpen, handleToggle, hideOnClickOutside, hideOnEsc, image, isClosable, open, placement, preventBodyScroll, style, visible, children }) }) : /* @__PURE__ */ jsx(ModalContent, { ariaLabel, backdropClassName, className, dataTestId, finalId, finalSize: size, handleClose, handleOpen, handleToggle, hideOnClickOutside, hideOnEsc, image, isClosable, open, placement, preventBodyScroll, style, visible, children })
   ] });
 };
 export {

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

@@ -1,4 +1,4 @@
-import type { ReactElement, ReactNode, RefObject } from 'react';
+import type { CSSProperties, ReactElement, ReactNode, RefObject } from 'react';
 export type ModalSize = 'large' | 'medium' | 'small' | 'xsmall' | 'xxsmall';
 export type ModalPlacement = 'bottom' | 'bottom-left' | 'bottom-right' | 'center' | 'top' | 'top-left' | 'top-right' | 'right' | 'left';
 export type ModalState = {
@@ -32,4 +32,5 @@ export type DialogProps = {
     'data-testid'?: string;
     children: ReactNode;
     image?: string;
+    style?: CSSProperties;
 };

package/dist/components/Notice/index.cjs

@@ -8,8 +8,9 @@ const styles_css = require("./styles.css.cjs");
 const Notice = ({
   children,
   className,
-  "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxRuntime.jsxs(index.Text, { as: "span", className: `${className ? `${className} ` : ""}${styles_css.notice}`, "data-testid": dataTestId, prominence: "weak", sentiment: "neutral", variant: "caption", children: [
+  "data-testid": dataTestId,
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsxs(index.Text, { as: "span", className: `${className ? `${className} ` : ""}${styles_css.notice}`, "data-testid": dataTestId, prominence: "weak", sentiment: "neutral", style, variant: "caption", children: [
   /* @__PURE__ */ jsxRuntime.jsx(Icon.InformationOutlineIcon, { prominence: "weak", sentiment: "neutral", size: "small" }),
   children
 ] });

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

@@ -1,11 +1,12 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type NoticeProps = {
     children: ReactNode;
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 /**
  * A Notice is used to display a short message to the user.
  */
-export declare const Notice: ({ children, className, "data-testid": dataTestId, }: NoticeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Notice: ({ children, className, "data-testid": dataTestId, style, }: NoticeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Notice/index.js

@@ -6,8 +6,9 @@ import { notice } from "./styles.css.js";
 const Notice = ({
   children,
   className,
-  "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxs(Text, { as: "span", className: `${className ? `${className} ` : ""}${notice}`, "data-testid": dataTestId, prominence: "weak", sentiment: "neutral", variant: "caption", children: [
+  "data-testid": dataTestId,
+  style
+}) => /* @__PURE__ */ jsxs(Text, { as: "span", className: `${className ? `${className} ` : ""}${notice}`, "data-testid": dataTestId, prominence: "weak", sentiment: "neutral", style, variant: "caption", children: [
   /* @__PURE__ */ jsx(InformationOutlineIcon, { prominence: "weak", sentiment: "neutral", size: "small" }),
   children
 ] });

package/dist/components/Notification/index.cjs

@@ -28,7 +28,8 @@ const NotificationContainer = ({
   position = "top-right",
   "data-testid": dataTestId,
   className,
+  style,
   containerId = "notification"
-}) => /* @__PURE__ */ jsxRuntime.jsx(reactToastify.ToastContainer, { autoClose, className: `${className ? `${className} ` : ""}${styles_css.notification}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, position, transition: reactToastify.Slide });
+}) => /* @__PURE__ */ jsxRuntime.jsx(reactToastify.ToastContainer, { autoClose, className: `${className ? `${className} ` : ""}${styles_css.notification}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, position, style, transition: reactToastify.Slide });
 exports.NotificationContainer = NotificationContainer;
 exports.notification = notification;

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

@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 import type { Theme as ThemeToastify, ToastOptions, TypeOptions } from 'react-toastify';
 type CloseButtonProps = {
     closeToast: (event: React.MouseEvent<HTMLElement>) => void;
@@ -31,6 +31,7 @@ type NotificationContainerProps = {
      * Give a personalized containerId in case there are multiple notifications with different styled to display
      */
     containerId?: string;
+    style?: CSSProperties;
 };
-export declare const NotificationContainer: ({ newestOnTop, limit, autoClose, position, "data-testid": dataTestId, className, containerId, }: NotificationContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const NotificationContainer: ({ newestOnTop, limit, autoClose, position, "data-testid": dataTestId, className, style, containerId, }: NotificationContainerProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Notification/index.js

@@ -26,8 +26,9 @@ const NotificationContainer = ({
   position = "top-right",
   "data-testid": dataTestId,
   className,
+  style,
   containerId = "notification"
-}) => /* @__PURE__ */ jsx(ToastContainer, { autoClose, className: `${className ? `${className} ` : ""}${notification$1}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, position, transition: Slide });
+}) => /* @__PURE__ */ jsx(ToastContainer, { autoClose, className: `${className ? `${className} ` : ""}${notification$1}`, containerId, "data-testid": dataTestId, draggable: false, hideProgressBar: true, icon: false, limit, newestOnTop, position, style, transition: Slide });
 export {
   NotificationContainer,
   notification

package/dist/components/NumberInput/index.cjs

@@ -37,7 +37,8 @@ const NumberInput = react.forwardRef(({
   "data-testid": dataTestId,
   required,
   autoFocus,
-  readOnly
+  readOnly,
+  style
 }, ref) => {
   const localRef = react.useRef(null);
   react.useImperativeHandle(ref, () => localRef.current);
@@ -128,7 +129,7 @@ const NumberInput = react.forwardRef(({
         }, onChange: onChange ? (event) => {
           const newNumber = Number.parseFloat(event.target.value);
           onChange(Number.isNaN(newNumber) ? null : newNumber);
-        } : void 0, onFocus, placeholder, readOnly, ref: localRef, required, step, type: "number", value: inputValue }),
+        } : void 0, onFocus, placeholder, readOnly, ref: localRef, required, step, style, type: "number", value: inputValue }),
         unit ? /* @__PURE__ */ jsxRuntime.jsx(index$5.Text, { as: "span", className: styles_css.unit({
           disabled,
           readOnly,

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

@@ -30,5 +30,5 @@ export declare const NumberInput: import("react").ForwardRefExoticComponent<{
     onChange?: (newValue: number | null) => void;
     min?: number;
     max?: number;
-} & Pick<InputHTMLAttributes<HTMLInputElement>, "disabled" | "id" | "name" | "aria-label" | "onFocus" | "onBlur" | "autoFocus" | "step" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "style" | "disabled" | "id" | "name" | "aria-label" | "onFocus" | "onBlur" | "autoFocus" | "step" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/NumberInput/index.js

@@ -35,7 +35,8 @@ const NumberInput = forwardRef(({
   "data-testid": dataTestId,
   required,
   autoFocus,
-  readOnly
+  readOnly,
+  style
 }, ref) => {
   const localRef = useRef(null);
   useImperativeHandle(ref, () => localRef.current);
@@ -126,7 +127,7 @@ const NumberInput = forwardRef(({
         }, onChange: onChange ? (event) => {
           const newNumber = Number.parseFloat(event.target.value);
           onChange(Number.isNaN(newNumber) ? null : newNumber);
-        } : void 0, onFocus, placeholder, readOnly, ref: localRef, required, step, type: "number", value: inputValue }),
+        } : void 0, onFocus, placeholder, readOnly, ref: localRef, required, step, style, type: "number", value: inputValue }),
         unit$1 ? /* @__PURE__ */ jsx(Text, { as: "span", className: unit({
           disabled,
           readOnly,

package/dist/components/Pagination/index.cjs

@@ -18,7 +18,8 @@ const Pagination = ({
   perPageText,
   numberOfItemsText,
   numberOfItems,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const [perPageComputed, setPerPage] = react.useState(perPage ?? 10);
   react.useEffect(() => {
@@ -34,7 +35,7 @@ const Pagination = ({
       setPerPage(perPage);
     }
   }, [perPage]);
-  return /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { direction: "row", justifyContent: "space-between", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { direction: "row", justifyContent: "space-between", style, children: [
     perPage ? /* @__PURE__ */ jsxRuntime.jsx(PerPage.PerPage, { numberOfItems, numberOfItemsText, onChangePerPage, page, perPage: perPageComputed, perPageText, setPerPage }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(PaginationButtons.PaginationButtons, { className, "data-testid": dataTestId, disabled, onChange, page, pageCount, pageTabCount, perPage: !!perPage })
   ] });

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

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 type PaginationProps = {
     /**
       Event function called when changing the page
@@ -20,6 +21,7 @@ type PaginationProps = {
     */
     disabled?: boolean;
     className?: string;
+    style?: CSSProperties;
     'data-testid'?: string;
 } & ({
     /**
@@ -53,5 +55,5 @@ type PaginationProps = {
  * Pagination is a component to navigate between pages, it is composed of 2 buttons to go to the previous and next page,
  * and a list of buttons to go to a specific page.
  */
-export declare const Pagination: ({ disabled, page, pageCount, onChange, pageTabCount, className, perPage, onChangePerPage, perPageText, numberOfItemsText, numberOfItems, "data-testid": dataTestId, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Pagination: ({ disabled, page, pageCount, onChange, pageTabCount, className, perPage, onChangePerPage, perPageText, numberOfItemsText, numberOfItems, "data-testid": dataTestId, style, }: PaginationProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Pagination/index.js

@@ -16,7 +16,8 @@ const Pagination = ({
   perPageText,
   numberOfItemsText,
   numberOfItems,
-  "data-testid": dataTestId
+  "data-testid": dataTestId,
+  style
 }) => {
   const [perPageComputed, setPerPage] = useState(perPage ?? 10);
   useEffect(() => {
@@ -32,7 +33,7 @@ const Pagination = ({
       setPerPage(perPage);
     }
   }, [perPage]);
-  return /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
+  return /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", style, children: [
     perPage ? /* @__PURE__ */ jsx(PerPage, { numberOfItems, numberOfItemsText, onChangePerPage, page, perPage: perPageComputed, perPageText, setPerPage }) : null,
     /* @__PURE__ */ jsx(PaginationButtons, { className, "data-testid": dataTestId, disabled, onChange, page, pageCount, pageTabCount, perPage: !!perPage })
   ] });

package/dist/components/PasswordCheck/index.cjs

@@ -9,8 +9,9 @@ const styles_css = require("./styles.css.cjs");
 const PasswordCheck = ({
   rules,
   className,
-  "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.passwordCheckContainer}`, "data-testid": dataTestId, children: rules.map((rule) => /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: "center", direction: "row", gap: 1, children: [
+  "data-testid": dataTestId,
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${styles_css.passwordCheckContainer}`, "data-testid": dataTestId, style, children: rules.map((rule) => /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: "center", direction: "row", gap: 1, children: [
   rule.valid ? /* @__PURE__ */ jsxRuntime.jsx(Icon.CheckCircleOutlineIcon, { prominence: "weak", sentiment: "success", size: "large" }) : /* @__PURE__ */ jsxRuntime.jsx(Icon.CloseCircleOutlineIcon, { prominence: "weak", sentiment: "neutral", size: "large" }),
   /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "p", variant: "bodySmall", children: rule.text })
 ] }, rule.name)) });

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

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 type Rule = {
     name: string;
     text: string;
@@ -11,10 +12,11 @@ type PasswordCheckProps = {
     rules: Rule[];
     className?: string;
     'data-testid'?: string;
+    style?: CSSProperties;
 };
 /**
  * PasswordCheck is a component that display a list of password rules with a check or a cross depending on the validity
  * of the rule.
  */
-export declare const PasswordCheck: ({ rules, className, "data-testid": dataTestId, }: PasswordCheckProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const PasswordCheck: ({ rules, className, "data-testid": dataTestId, style, }: PasswordCheckProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};