@ultraviolet/plus 3.0.0-beta.12 → 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/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/Conversation/styles.css.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                                                    */
 ;/* empty css                            */
 var conversationInfos = { left: "uv_plus_16zcyo51 uv_plus_16zcyo50", right: "uv_plus_16zcyo52 uv_plus_16zcyo50" };
 var styledText = "uv_plus_16zcyo53";

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

@@ -1,4 +1,3 @@
-/* empty css                                                  */
 /* empty css                          */
 var conversationInfos = { left: "uv_plus_16zcyo51 uv_plus_16zcyo50", right: "uv_plus_16zcyo52 uv_plus_16zcyo50" };
 var styledText = "uv_plus_16zcyo53";

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;