@ultraviolet/plus 3.0.0-beta.13 → 3.0.0-beta.14

package/dist/components/CodeEditor/CodeEditor.cjs

@@ -27,8 +27,9 @@ const CodeEditor = ({
   "data-testid": dataTestId,
   className,
   error,
-  lineNumbers = true
-}) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { className: disabled ? styles_css.disabledStack : "", gap: 0.5, children: [
+  lineNumbers = true,
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { className: disabled ? styles_css.disabledStack : "", gap: 0.5, style, children: [
   label ? /* @__PURE__ */ jsxRuntime.jsx(ui.Label, { labelDescription, children: label }) : null,
   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles_css.codeEditor[disabled ? "disabled" : "default"], children: [
     /* @__PURE__ */ jsxRuntime.jsx(CodeMirror__default.default, { "aria-disabled": disabled, "aria-label": ariaLabel, basicSetup: {

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

@@ -1,6 +1,6 @@
 import { langs } from '@uiw/codemirror-extensions-langs';
 import CodeMirror from '@uiw/react-codemirror';
-import type { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 type CodeEditorProps = {
     value: string;
     onChange: ComponentProps<typeof CodeMirror>['onChange'];
@@ -24,6 +24,7 @@ type CodeEditorProps = {
     className?: string;
     error?: string;
     lineNumbers?: boolean;
+    style?: CSSProperties;
 };
-export declare const CodeEditor: ({ value, onChange, extensions, onBlur, height, readOnly, autoCompletion, disabled, label, copyButton, id, helper, labelDescription, "aria-label": ariaLabel, "data-testid": dataTestId, className, error, lineNumbers, }: CodeEditorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CodeEditor: ({ value, onChange, extensions, onBlur, height, readOnly, autoCompletion, disabled, label, copyButton, id, helper, labelDescription, "aria-label": ariaLabel, "data-testid": dataTestId, className, error, lineNumbers, style, }: CodeEditorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CodeEditor/CodeEditor.js

@@ -23,8 +23,9 @@ const CodeEditor = ({
   "data-testid": dataTestId,
   className,
   error,
-  lineNumbers = true
-}) => /* @__PURE__ */ jsxs(Stack, { className: disabled ? disabledStack : "", gap: 0.5, children: [
+  lineNumbers = true,
+  style
+}) => /* @__PURE__ */ jsxs(Stack, { className: disabled ? disabledStack : "", gap: 0.5, style, children: [
   label ? /* @__PURE__ */ jsx(Label, { labelDescription, children: label }) : null,
   /* @__PURE__ */ jsxs("div", { className: codeEditor[disabled ? "disabled" : "default"], children: [
     /* @__PURE__ */ jsx(CodeMirror, { "aria-disabled": disabled, "aria-label": ariaLabel, basicSetup: {

package/dist/components/ContentCard/index.cjs

@@ -22,7 +22,8 @@ const ContentCard = react.forwardRef(({
   onClick,
   disabled,
   loading,
-  className
+  className,
+  style
 }, ref) => {
   const subContainerRef = react.useRef(null);
   const [subContainerHeight, setSubContainerHeight] = react.useState(subContainerRef?.current?.offsetHeight);
@@ -36,7 +37,7 @@ const ContentCard = react.forwardRef(({
     return "div";
   }, [href, onClick]);
   react.useEffect(() => setSubContainerHeight(subContainerRef?.current?.offsetHeight), [subContainerRef]);
-  return /* @__PURE__ */ jsxRuntime.jsx(Container, { className: `${className ? `${className} ` : ""}${styles_css.cardClass}${onClick || href ? ` ${styles_css.activeClass}` : ""}`, disabled, href: !disabled ? href : void 0, onClick: !disabled ? onClick : void 0, ref, role: onClick && !href ? "button" : void 0, target, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { direction }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { className: styles_css.fullHeight, direction, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Container, { className: `${className ? `${className} ` : ""}${styles_css.cardClass}${onClick || href ? ` ${styles_css.activeClass}` : ""}`, disabled, href: !disabled ? href : void 0, onClick: !disabled ? onClick : void 0, ref, role: onClick && !href ? "button" : void 0, style, target, children: loading ? /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { direction }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { className: styles_css.fullHeight, direction, children: [
     image ? /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "", className: styles_css.imageClass[direction], "data-disabled": disabled, height: direction === "column" ? 120 : void 0, src: image, style: dynamic.assignInlineVars({
       [styles_css.subContainerHeightVar]: subContainerHeight ? `${subContainerHeight.toString()}px` : void 0
     }), width: direction === "row" ? 220 : void 0 }) : null,

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

@@ -1,4 +1,4 @@
-import type { MouseEventHandler, ReactNode } from 'react';
+import type { CSSProperties, MouseEventHandler, ReactNode } from 'react';
 type ContentCardProps = {
     direction?: 'row' | 'column';
     /**
@@ -25,6 +25,7 @@ type ContentCardProps = {
     disabled?: boolean;
     loading?: boolean;
     className?: string;
+    style?: CSSProperties;
 };
 /**
  * ContentCard is a component that displays a title, subtitle, description, image and icon in a card.

package/dist/components/ContentCard/index.js

@@ -20,7 +20,8 @@ const ContentCard = forwardRef(({
   onClick,
   disabled,
   loading,
-  className
+  className,
+  style
 }, ref) => {
   const subContainerRef = useRef(null);
   const [subContainerHeight, setSubContainerHeight] = useState(subContainerRef?.current?.offsetHeight);
@@ -34,7 +35,7 @@ const ContentCard = forwardRef(({
     return "div";
   }, [href, onClick]);
   useEffect(() => setSubContainerHeight(subContainerRef?.current?.offsetHeight), [subContainerRef]);
-  return /* @__PURE__ */ jsx(Container, { className: `${className ? `${className} ` : ""}${cardClass}${onClick || href ? ` ${activeClass}` : ""}`, disabled, href: !disabled ? href : void 0, onClick: !disabled ? onClick : void 0, ref, role: onClick && !href ? "button" : void 0, target, children: loading ? /* @__PURE__ */ jsx(Skeleton, { direction }) : /* @__PURE__ */ jsxs(Stack, { className: fullHeight, direction, children: [
+  return /* @__PURE__ */ jsx(Container, { className: `${className ? `${className} ` : ""}${cardClass}${onClick || href ? ` ${activeClass}` : ""}`, disabled, href: !disabled ? href : void 0, onClick: !disabled ? onClick : void 0, ref, role: onClick && !href ? "button" : void 0, style, target, children: loading ? /* @__PURE__ */ jsx(Skeleton, { direction }) : /* @__PURE__ */ jsxs(Stack, { className: fullHeight, direction, children: [
     image ? /* @__PURE__ */ jsx("img", { alt: "", className: imageClass[direction], "data-disabled": disabled, height: direction === "column" ? 120 : void 0, src: image, style: assignInlineVars({
       [subContainerHeightVar]: subContainerHeight ? `${subContainerHeight.toString()}px` : void 0
     }), width: direction === "row" ? 220 : void 0 }) : null,

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

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

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

@@ -1,3 +1,4 @@
+/* empty css                                                  */
 /* empty css                          */
 var subContainerHeightVar = "var(--uv_plus_u4r1ts0)";
 var skeletonHeightVar = "var(--uv_plus_u4r1ts1)";

package/dist/components/ContentCardGroup/Card.cjs

@@ -14,8 +14,9 @@ const Card = react.forwardRef(({
   description,
   children,
   href,
-  target = "_blank"
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx("a", { className: styles_css.styledWrapper, href, ref, target, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { alignItems: "center", className: styles_css.fullHeightStack, direction: "row", gap: 2, justifyContent: "space-between", children: [
+  target = "_blank",
+  style
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx("a", { className: styles_css.styledWrapper, href, ref, style, target, children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { alignItems: "center", className: styles_css.fullHeightStack, direction: "row", gap: 2, justifyContent: "space-between", children: [
   /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, { className: styles_css.customStack, gap: "0.5", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
       subtitle ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: subtitleAs || "h5", oneLine: true, prominence: "weak", sentiment: "neutral", variant: "caption", children: subtitle }) : null,

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

@@ -1,4 +1,4 @@
-import type { AnchorHTMLAttributes, ElementType, ReactNode } from 'react';
+import type { AnchorHTMLAttributes, CSSProperties, ElementType, ReactNode } from 'react';
 type CardProps = {
     title?: string;
     titleAs?: ElementType;
@@ -8,6 +8,7 @@ type CardProps = {
     children?: ReactNode;
     href: string;
     target?: AnchorHTMLAttributes<HTMLAnchorElement>['target'];
+    style?: CSSProperties;
 };
 export declare const Card: import("react").ForwardRefExoticComponent<CardProps & import("react").RefAttributes<HTMLAnchorElement>>;
 export {};

package/dist/components/ContentCardGroup/Card.js

@@ -12,8 +12,9 @@ const Card = forwardRef(({
   description,
   children,
   href,
-  target = "_blank"
-}, ref) => /* @__PURE__ */ jsx("a", { className: styledWrapper, href, ref, target, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: fullHeightStack, direction: "row", gap: 2, justifyContent: "space-between", children: [
+  target = "_blank",
+  style
+}, ref) => /* @__PURE__ */ jsx("a", { className: styledWrapper, href, ref, style, target, children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className: fullHeightStack, direction: "row", gap: 2, justifyContent: "space-between", children: [
   /* @__PURE__ */ jsxs(Stack, { className: customStack, gap: "0.5", children: [
     /* @__PURE__ */ jsxs("div", { children: [
       subtitle ? /* @__PURE__ */ jsx(Text, { as: subtitleAs || "h5", oneLine: true, prominence: "weak", sentiment: "neutral", variant: "caption", children: subtitle }) : null,

package/dist/components/ContentCardGroup/index.cjs

@@ -9,8 +9,9 @@ const SkeletonCard = require("./SkeletonCard.cjs");
 const styles_css = require("./styles.css.cjs");
 const BaseContentCardGroup = react.forwardRef(({
   children,
-  loading
-}, ref) => /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { className: styles_css.groupCardWrapper, direction: "column", ref, children: !loading ? children : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react.Children.map(children, (_child, index) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonCard.SkeletonCard, {}, index)) }) }));
+  loading,
+  style
+}, ref) => /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { className: styles_css.groupCardWrapper, direction: "column", ref, style, children: !loading ? children : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: react.Children.map(children, (_child, index) => /* @__PURE__ */ jsxRuntime.jsx(SkeletonCard.SkeletonCard, {}, index)) }) }));
 const ContentCardGroup = Object.assign(BaseContentCardGroup, {
   Card: Card.Card
 });

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

@@ -1,7 +1,8 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type BaseContentCardGroupProps = {
     children: ReactNode;
     loading?: boolean;
+    style?: CSSProperties;
 };
 export declare const ContentCardGroup: import("react").ForwardRefExoticComponent<BaseContentCardGroupProps & import("react").RefAttributes<HTMLDivElement>> & {
     Card: import("react").ForwardRefExoticComponent<{
@@ -13,6 +14,7 @@ export declare const ContentCardGroup: import("react").ForwardRefExoticComponent
         children?: ReactNode;
         href: string;
         target?: import("react").AnchorHTMLAttributes<HTMLAnchorElement>["target"];
+        style?: CSSProperties;
     } & import("react").RefAttributes<HTMLAnchorElement>>;
 };
 export {};

package/dist/components/ContentCardGroup/index.js

@@ -7,8 +7,9 @@ import { SkeletonCard } from "./SkeletonCard.js";
 import { groupCardWrapper } from "./styles.css.js";
 const BaseContentCardGroup = forwardRef(({
   children,
-  loading
-}, ref) => /* @__PURE__ */ jsx(Stack, { className: groupCardWrapper, direction: "column", ref, children: !loading ? children : /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (_child, index) => /* @__PURE__ */ jsx(SkeletonCard, {}, index)) }) }));
+  loading,
+  style
+}, ref) => /* @__PURE__ */ jsx(Stack, { className: groupCardWrapper, direction: "column", ref, style, children: !loading ? children : /* @__PURE__ */ jsx(Fragment, { children: Children.map(children, (_child, index) => /* @__PURE__ */ jsx(SkeletonCard, {}, index)) }) }));
 const ContentCardGroup = Object.assign(BaseContentCardGroup, {
   Card
 });

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

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

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

@@ -1,4 +1,3 @@
-/* empty css                                                  */
 /* empty css                          */
 var customStack = "uv_plus_1gpmh3x0";
 var iconWrapper = "uv_plus_1gpmh3x1";

package/dist/components/Conversation/index.cjs

@@ -5,27 +5,32 @@ const jsxRuntime = require("@emotion/react/jsx-runtime");
 const ui = require("@ultraviolet/ui");
 const styles_css = require("./styles.css.cjs");
 const Conversation = ({
-  children
-}) => /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { children });
+  children,
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { style, children });
 const MessageInfos = ({
   children,
-  align
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.conversationInfos[align], children });
+  align,
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.conversationInfos[align], style, children });
 const Date = ({
-  children
-}) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "p", className: styles_css.styledText, prominence: "weak", variant: "bodySmall", children });
+  children,
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { as: "p", className: styles_css.styledText, prominence: "weak", style, variant: "bodySmall", children });
 const Message = ({
   className,
   children,
   avatar,
-  align = "right"
-}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className ? `${className} ` : ""}${styles_css.conversationContainer[align]}`, children: [
+  align = "right",
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${className ? `${className} ` : ""}${styles_css.conversationContainer[align]}`, style, children: [
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.conversationBubble, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.conversationRawMessage[align], children }) }),
   /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.conversationAvatar, children: avatar })
 ] });
 const MessageTag = ({
-  children
-}) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tag, { className: styles_css.conversationTag, children });
+  children,
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tag, { className: styles_css.conversationTag, style, children });
 Conversation.Date = Date;
 Conversation.Message = Message;
 Conversation.MessageInfos = MessageInfos;

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

@@ -1,35 +1,43 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 declare const Conversation: {
-    ({ children }: {
+    ({ children, style, }: {
         children: ReactNode;
+        style?: CSSProperties;
     }): import("@emotion/react/jsx-runtime").JSX.Element;
-    Date: ({ children }: {
+    Date: ({ children, style, }: {
         children: ReactNode;
+        style?: CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Message: ({ className, children, avatar, align, }: MessageProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-    MessageInfos: ({ children, align, }: {
+    Message: ({ className, children, avatar, align, style, }: MessageProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    MessageInfos: ({ children, align, style, }: {
         children: ReactNode;
         align: "left" | "right";
+        style?: CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    Tag: ({ children }: {
+    Tag: ({ children, style, }: {
         children: ReactNode;
+        style?: CSSProperties;
     }) => import("@emotion/react/jsx-runtime").JSX.Element;
 };
-export declare const MessageInfos: ({ children, align, }: {
+export declare const MessageInfos: ({ children, align, style, }: {
     children: ReactNode;
     align: "left" | "right";
+    style?: CSSProperties;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const Date: ({ children }: {
+export declare const Date: ({ children, style, }: {
     children: ReactNode;
+    style?: CSSProperties;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;
 type MessageProps = {
     className?: string;
     children: ReactNode;
     avatar: ReactNode;
     align?: 'left' | 'right';
+    style?: CSSProperties;
 };
-export declare const Message: ({ className, children, avatar, align, }: MessageProps) => import("@emotion/react/jsx-runtime").JSX.Element;
-export declare const MessageTag: ({ children }: {
+export declare const Message: ({ className, children, avatar, align, style, }: MessageProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const MessageTag: ({ children, style, }: {
     children: ReactNode;
+    style?: CSSProperties;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;
 export { Conversation };

package/dist/components/Conversation/index.js

@@ -3,27 +3,32 @@ import { jsx, jsxs } from "@emotion/react/jsx-runtime";
 import { Stack, Text, Tag } from "@ultraviolet/ui";
 import { styledText, conversationContainer, conversationBubble, conversationRawMessage, conversationAvatar, conversationInfos, conversationTag } from "./styles.css.js";
 const Conversation = ({
-  children
-}) => /* @__PURE__ */ jsx(Stack, { children });
+  children,
+  style
+}) => /* @__PURE__ */ jsx(Stack, { style, children });
 const MessageInfos = ({
   children,
-  align
-}) => /* @__PURE__ */ jsx("div", { className: conversationInfos[align], children });
+  align,
+  style
+}) => /* @__PURE__ */ jsx("div", { className: conversationInfos[align], style, children });
 const Date = ({
-  children
-}) => /* @__PURE__ */ jsx(Text, { as: "p", className: styledText, prominence: "weak", variant: "bodySmall", children });
+  children,
+  style
+}) => /* @__PURE__ */ jsx(Text, { as: "p", className: styledText, prominence: "weak", style, variant: "bodySmall", children });
 const Message = ({
   className,
   children,
   avatar,
-  align = "right"
-}) => /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}${conversationContainer[align]}`, children: [
+  align = "right",
+  style
+}) => /* @__PURE__ */ jsxs("div", { className: `${className ? `${className} ` : ""}${conversationContainer[align]}`, style, children: [
   /* @__PURE__ */ jsx("div", { className: conversationBubble, children: /* @__PURE__ */ jsx("div", { className: conversationRawMessage[align], children }) }),
   /* @__PURE__ */ jsx("div", { className: conversationAvatar, children: avatar })
 ] });
 const MessageTag = ({
-  children
-}) => /* @__PURE__ */ jsx(Tag, { className: conversationTag, children });
+  children,
+  style
+}) => /* @__PURE__ */ jsx(Tag, { className: conversationTag, style, children });
 Conversation.Date = Date;
 Conversation.Message = Message;
 Conversation.MessageInfos = MessageInfos;

package/dist/components/CustomerSatisfaction/index.cjs

@@ -40,11 +40,12 @@ const CustomerSatisfaction = ({
   value,
   onChange,
   "data-testid": dataTestId,
-  className
+  className,
+  style
 }) => {
   const [hoveredValue, setHoveredValue] = react.useState(0);
   const isHappy = react.useMemo(() => value > ratings.length / 2, [value]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { className, "data-testid": dataTestId, direction: "row", justifyContent: "space-between", children: ratings.map((rating) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Stack, { className, "data-testid": dataTestId, direction: "row", justifyContent: "space-between", style, children: ratings.map((rating) => {
     const isSelected = rating.value === value;
     const isOverfly = rating.value <= hoveredValue;
     const isScaled = rating.value === hoveredValue && isSelected;

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

@@ -1,3 +1,4 @@
+import type { CSSProperties } from 'react';
 declare const ratings: readonly [{
     readonly imgNotSelected: string;
     readonly imgSelected: string;
@@ -25,6 +26,7 @@ type CustomerSatisfactionProps = {
     onChange: (rating: Value) => void;
     'data-testid'?: string;
     className?: string;
+    style?: CSSProperties;
 };
-export declare const CustomerSatisfaction: ({ value, onChange, "data-testid": dataTestId, className, }: CustomerSatisfactionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const CustomerSatisfaction: ({ value, onChange, "data-testid": dataTestId, className, style, }: CustomerSatisfactionProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/CustomerSatisfaction/index.js

@@ -38,11 +38,12 @@ const CustomerSatisfaction = ({
   value,
   onChange,
   "data-testid": dataTestId,
-  className
+  className,
+  style
 }) => {
   const [hoveredValue, setHoveredValue] = useState(0);
   const isHappy = useMemo(() => value > ratings.length / 2, [value]);
-  return /* @__PURE__ */ jsx(Stack, { className, "data-testid": dataTestId, direction: "row", justifyContent: "space-between", children: ratings.map((rating) => {
+  return /* @__PURE__ */ jsx(Stack, { className, "data-testid": dataTestId, direction: "row", justifyContent: "space-between", style, children: ratings.map((rating) => {
     const isSelected = rating.value === value;
     const isOverfly = rating.value <= hoveredValue;
     const isScaled = rating.value === hoveredValue && isSelected;

package/dist/components/EstimateCost/Components/Item.cjs

@@ -68,8 +68,9 @@ const Item = react.memo(({
   // To change left cell typography prominence
   notice,
   // To display a gray text below the label
-  strikeThrough
+  strikeThrough,
   // To strike through the price
+  style
 }) => {
   const {
     locales,
@@ -157,7 +158,7 @@ const Item = react.memo(({
     hideFromOverlay,
     isFirstElement,
     shouldBeHidden
-  }) : components_css.estimateCostTr, children: [
+  }) : components_css.estimateCostTr, style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Cell, { className: styles_css.estimateCostCell({
       hasBorder: !isLastElement && !noBorder && !isOverlay
     }), style: dynamic.assignInlineVars({

package/dist/components/EstimateCost/Components/Item.d.ts

@@ -1,5 +1,5 @@
 import { Text } from '@ultraviolet/ui';
-import type { ComponentProps, ReactNode } from 'react';
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
 import type { BareEstimateProduct, EstimateProduct, Iteration } from '../types';
 type ItemProps = {
     amount?: number;
@@ -111,6 +111,7 @@ type ItemProps = {
      */
     unit?: 'mb' | 'gb' | 'tb' | 'seconds' | 'minutes' | 'hours' | 'days' | 'months' | 'years' | (string & NonNullable<unknown>);
     strikeThrough?: boolean;
+    style?: CSSProperties;
 };
-export declare const Item: import("react").MemoExoticComponent<({ discount, priceText, discountText, label, tooltipInfo, subLabel, price: basePrice, monthlyPrice, unit: baseUnit, amount: currentAmount, onAmountChange, amountFree, maxAmount, longFractionDigits, noIteration, noIterationText, noBorder, noPrice, isDefined, children, isFirstElement, isLastElement, isPrimaryBackground, productsCallback, iteration: receivedIteration, shouldBeHidden, hideFromOverlay, textNotDefined, animated, tabulation, labelTextVariant, labelTextProminence, notice, strikeThrough, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Item: import("react").MemoExoticComponent<({ discount, priceText, discountText, label, tooltipInfo, subLabel, price: basePrice, monthlyPrice, unit: baseUnit, amount: currentAmount, onAmountChange, amountFree, maxAmount, longFractionDigits, noIteration, noIterationText, noBorder, noPrice, isDefined, children, isFirstElement, isLastElement, isPrimaryBackground, productsCallback, iteration: receivedIteration, shouldBeHidden, hideFromOverlay, textNotDefined, animated, tabulation, labelTextVariant, labelTextProminence, notice, strikeThrough, style, }: ItemProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

package/dist/components/EstimateCost/Components/Item.js

@@ -66,8 +66,9 @@ const Item = memo(({
   // To change left cell typography prominence
   notice,
   // To display a gray text below the label
-  strikeThrough
+  strikeThrough,
   // To strike through the price
+  style
 }) => {
   const {
     locales,
@@ -155,7 +156,7 @@ const Item = memo(({
     hideFromOverlay,
     isFirstElement,
     shouldBeHidden
-  }) : estimateCostTr, children: [
+  }) : estimateCostTr, style, children: [
     /* @__PURE__ */ jsx(Cell, { className: estimateCostCell({
       hasBorder: !isLastElement && !noBorder && !isOverlay
     }), style: assignInlineVars({

package/dist/components/EstimateCost/Components/Region.cjs

@@ -20,12 +20,13 @@ const Region = react.memo(({
   discount,
   noBorder,
   noPrice,
-  hideFromOverlay
+  hideFromOverlay,
+  style
 }) => {
   const {
     locales
   } = EstimateCostProvider.useEstimateCost();
-  return /* @__PURE__ */ jsxRuntime.jsx(Item.Item, { animated, discount, hideFromOverlay, isFirstElement, isLastElement, iteration, label: locales["estimate.cost.region.label"], noBorder, noPrice, priceText, productsCallback, shouldBeHidden, children: /* @__PURE__ */ jsxRuntime.jsxs(Strong.Strong, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Item.Item, { animated, discount, hideFromOverlay, isFirstElement, isLastElement, iteration, label: locales["estimate.cost.region.label"], noBorder, noPrice, priceText, productsCallback, shouldBeHidden, style, children: /* @__PURE__ */ jsxRuntime.jsxs(Strong.Strong, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("img", { alt: label, className: styles_css.estimateCostImage, src: image }),
     label
   ] }) });

package/dist/components/EstimateCost/Components/Region.d.ts

@@ -17,6 +17,6 @@ type RegionProps = {
     image: string;
     noBorder?: boolean;
     noPrice?: boolean;
-} & Pick<ComponentProps<typeof Item>, 'hideFromOverlay'>;
-export declare const Region: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, hideFromOverlay, }: RegionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+} & Pick<ComponentProps<typeof Item>, 'hideFromOverlay' | 'style'>;
+export declare const Region: import("react").MemoExoticComponent<({ label, image, shouldBeHidden, priceText, animated, isFirstElement, isLastElement, productsCallback, iteration, discount, noBorder, noPrice, hideFromOverlay, style, }: RegionProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

package/dist/components/EstimateCost/Components/Region.js

@@ -18,12 +18,13 @@ const Region = memo(({
   discount,
   noBorder,
   noPrice,
-  hideFromOverlay
+  hideFromOverlay,
+  style
 }) => {
   const {
     locales
   } = useEstimateCost();
-  return /* @__PURE__ */ jsx(Item, { animated, discount, hideFromOverlay, isFirstElement, isLastElement, iteration, label: locales["estimate.cost.region.label"], noBorder, noPrice, priceText, productsCallback, shouldBeHidden, children: /* @__PURE__ */ jsxs(Strong, { children: [
+  return /* @__PURE__ */ jsx(Item, { animated, discount, hideFromOverlay, isFirstElement, isLastElement, iteration, label: locales["estimate.cost.region.label"], noBorder, noPrice, priceText, productsCallback, shouldBeHidden, style, children: /* @__PURE__ */ jsxs(Strong, { children: [
     /* @__PURE__ */ jsx("img", { alt: label, className: estimateCostImage, src: image }),
     label
   ] }) });

package/dist/components/EstimateCost/Components/Regular.cjs

@@ -9,7 +9,8 @@ const Regular = react.memo(({
   variant = "normal",
   isDisabledOnOverlay = false,
   children = null,
-  className
+  className,
+  style
 }) => {
   const {
     isOverlay
@@ -17,6 +18,6 @@ const Regular = react.memo(({
   return !isDisabledOnOverlay || !isOverlay ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${className ? `${className} ` : ""}${components_css.estimateCostRegular({
     isOverlay,
     variant
-  })}`, children }) : null;
+  })}`, style, children }) : null;
 });
 exports.Regular = Regular;

package/dist/components/EstimateCost/Components/Regular.d.ts

@@ -1,9 +1,10 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type RegularProps = {
     variant?: 'normal' | 'small' | 'big' | 'capitalized';
     isDisabledOnOverlay?: boolean;
     children?: ReactNode;
+    style?: CSSProperties;
     className?: string;
 };
-export declare const Regular: import("react").MemoExoticComponent<({ variant, isDisabledOnOverlay, children, className, }: RegularProps) => import("@emotion/react/jsx-runtime").JSX.Element | null>;
+export declare const Regular: import("react").MemoExoticComponent<({ variant, isDisabledOnOverlay, children, className, style, }: RegularProps) => import("@emotion/react/jsx-runtime").JSX.Element | null>;
 export {};

package/dist/components/EstimateCost/Components/Regular.js

@@ -7,7 +7,8 @@ const Regular = memo(({
   variant = "normal",
   isDisabledOnOverlay = false,
   children = null,
-  className
+  className,
+  style
 }) => {
   const {
     isOverlay
@@ -15,7 +16,7 @@ const Regular = memo(({
   return !isDisabledOnOverlay || !isOverlay ? /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${estimateCostRegular({
     isOverlay,
     variant
-  })}`, children }) : null;
+  })}`, style, children }) : null;
 });
 export {
   Regular

package/dist/components/EstimateCost/Components/Strong.cjs

@@ -6,10 +6,11 @@ const react = require("react");
 const components_css = require("./components.css.cjs");
 const Strong = react.memo(({
   variant = "normal",
-  children = null
+  children = null,
+  style
 }) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${components_css.estimateCostRegular({
   variant
 })} ${components_css.estimateCostStrong({
   variant
-})}`, children }));
+})}`, style, children }));
 exports.Strong = Strong;

package/dist/components/EstimateCost/Components/Strong.d.ts

@@ -1,8 +1,9 @@
-import type { ReactNode } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
 type StrongProps = {
     variant?: 'normal' | 'small' | 'big' | 'capitalized';
     children?: ReactNode;
     isDisabledOnOverlay?: boolean;
+    style?: CSSProperties;
 };
-export declare const Strong: import("react").MemoExoticComponent<({ variant, children }: StrongProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const Strong: import("react").MemoExoticComponent<({ variant, children, style }: StrongProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

package/dist/components/EstimateCost/Components/Strong.js

@@ -4,12 +4,13 @@ import { memo } from "react";
 import { estimateCostRegular, estimateCostStrong } from "./components.css.js";
 const Strong = memo(({
   variant = "normal",
-  children = null
+  children = null,
+  style
 }) => /* @__PURE__ */ jsx("div", { className: `${estimateCostRegular({
   variant
 })} ${estimateCostStrong({
   variant
-})}`, children }));
+})}`, style, children }));
 export {
   Strong
 };