@ultraviolet/plus 3.0.0-beta.16 → 3.0.0-beta.17

package/dist/components/Plans/index.js

@@ -1,4 +1,4 @@
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { CloseIcon, CheckCircleIcon } from "@ultraviolet/icons";
 import { Text, Badge, Stack } from "@ultraviolet/ui";
 import { useState } from "react";
@@ -22,76 +22,165 @@ const Plans = ({
   const [hoveredPlan, setHoveredPlan] = useState();
   return /* @__PURE__ */ jsxs("table", { className: plans, style, children: [
     /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
-      /* @__PURE__ */ jsx("td", { className: plansCell({
-        hide: hideLabels
-      }), children: !hideFeatureText ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "headingSmallStrong", children: locales$1["plans.features"] }) : null }),
+      /* @__PURE__ */ jsx("td", { className: plansCell({ hide: hideLabels }), children: !hideFeatureText ? /* @__PURE__ */ jsx(Text, { as: "span", variant: "headingSmallStrong", children: locales$1["plans.features"] }) : null }),
       plans$1.map((plan) => {
         const computedDisabled = !!(plan.outOfStock || plan.disabled);
         const selectable = hasCardBehavior && !computedDisabled;
-        return /* @__PURE__ */ jsxs("td", { className: plansCell({
-          activeColor: value === plan.value || hoveredPlan === plan.value,
-          disabled: computedDisabled,
-          focus: focusedPlan === plan.value,
-          hideLabels,
-          selectable
-        }), onBlur: selectable ? () => setHoveredPlan(void 0) : void 0, onClick: selectable ? () => onChange(plan.value) : void 0, onFocus: selectable ? () => setHoveredPlan(plan.value) : void 0, onKeyDown: (event) => {
-          if ([" ", "Enter"].includes(event.key) && selectable) {
-            onChange(plan.value);
-          }
-        }, onMouseOut: selectable ? () => setHoveredPlan(void 0) : void 0, onMouseOver: selectable ? () => setHoveredPlan(plan.value) : void 0, children: [
-          plan.outOfStock ? /* @__PURE__ */ jsx(Badge, { className: plansOutOfStockBadge, size: "small", children: locales$1["plans.outOfStock"] }) : null,
-          plan.header.quotas ? /* @__PURE__ */ jsx(Badge, { className: plansOutOfStockBadge, size: "small", children: plan.header.quotas }) : null,
-          /* @__PURE__ */ jsx(PlanHeader, { currentPlanValue: value, disabled: computedDisabled, fieldName, onChange, plan, setFocusedPlan })
-        ] }, plan.value);
+        return /* @__PURE__ */ jsxs(
+          "td",
+          {
+            className: plansCell({
+              activeColor: value === plan.value || hoveredPlan === plan.value,
+              disabled: computedDisabled,
+              focus: focusedPlan === plan.value,
+              hideLabels,
+              selectable
+            }),
+            onBlur: selectable ? () => setHoveredPlan(void 0) : void 0,
+            onClick: selectable ? () => onChange(plan.value) : void 0,
+            onFocus: selectable ? () => setHoveredPlan(plan.value) : void 0,
+            onKeyDown: (event) => {
+              if ([" ", "Enter"].includes(event.key) && selectable) {
+                onChange(plan.value);
+              }
+            },
+            onMouseOut: selectable ? () => setHoveredPlan(void 0) : void 0,
+            onMouseOver: selectable ? () => setHoveredPlan(plan.value) : void 0,
+            children: [
+              plan.outOfStock ? /* @__PURE__ */ jsx(Badge, { className: plansOutOfStockBadge, size: "small", children: locales$1["plans.outOfStock"] }) : null,
+              plan.header.quotas ? /* @__PURE__ */ jsx(Badge, { className: plansOutOfStockBadge, size: "small", children: plan.header.quotas }) : null,
+              /* @__PURE__ */ jsx(
+                PlanHeader,
+                {
+                  currentPlanValue: value,
+                  disabled: computedDisabled,
+                  fieldName,
+                  onChange,
+                  plan,
+                  setFocusedPlan
+                }
+              )
+            ]
+          },
+          plan.value
+        );
       })
     ] }) }),
     /* @__PURE__ */ jsx("tbody", { children: features.map((feature) => {
       if ("group" in feature) {
-        return /* @__PURE__ */ jsxs("tr", { className: hideLabels ? plansRowHidden : "", children: [
-          /* @__PURE__ */ jsx("td", { className: plansCell({}), children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
-            /* @__PURE__ */ jsx(Text, { as: "p", className: plansUppercaseText, sentiment: "neutral", variant: "bodySmallStronger", children: feature.group }),
-            feature.hint ? /* @__PURE__ */ jsx(FeatureHint, { hint: feature.hint }) : null
-          ] }) }),
-          plans$1.map((plan) => /* @__PURE__ */ jsx("td", { className: plansCell({
-            activeColor: value === plan.value || hoveredPlan === plan.value,
-            disabled: plan.outOfStock || plan.disabled,
-            focus: focusedPlan === plan.value,
-            hide: hideLabels
-          }) }, plan.value))
-        ] }, feature.group);
+        return /* @__PURE__ */ jsxs(
+          "tr",
+          {
+            className: hideLabels ? plansRowHidden : "",
+            children: [
+              /* @__PURE__ */ jsx("td", { className: plansCell({}), children: /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "p",
+                    className: plansUppercaseText,
+                    sentiment: "neutral",
+                    variant: "bodySmallStronger",
+                    children: feature.group
+                  }
+                ),
+                feature.hint ? /* @__PURE__ */ jsx(FeatureHint, { hint: feature.hint }) : null
+              ] }) }),
+              plans$1.map((plan) => /* @__PURE__ */ jsx(
+                "td",
+                {
+                  className: plansCell({
+                    activeColor: value === plan.value || hoveredPlan === plan.value,
+                    disabled: plan.outOfStock || plan.disabled,
+                    focus: focusedPlan === plan.value,
+                    hide: hideLabels
+                  })
+                },
+                plan.value
+              ))
+            ]
+          },
+          feature.group
+        );
       }
       const featureKey = feature.key ?? "";
       return /* @__PURE__ */ jsxs("tr", { children: [
-        /* @__PURE__ */ jsx("td", { className: plansCell({
-          hide: hideLabels
-        }), children: /* @__PURE__ */ jsxs(Stack, { children: [
+        /* @__PURE__ */ jsx("td", { className: plansCell({ hide: hideLabels }), children: /* @__PURE__ */ jsxs(Stack, { children: [
           /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: 1, children: [
             /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodyStrong", children: feature.text }),
             /* @__PURE__ */ jsx(FeatureHint, { hint: feature.hint })
           ] }),
-          feature.description ? /* @__PURE__ */ jsx(Text, { as: "div", placement: "start", prominence: "weak", sentiment: "neutral", variant: "caption", children: feature.description }) : null
+          feature.description ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "div",
+              placement: "start",
+              prominence: "weak",
+              sentiment: "neutral",
+              variant: "caption",
+              children: feature.description
+            }
+          ) : null
         ] }) }),
         plans$1.map((plan) => {
           const computedDisabled = plan.outOfStock || plan.disabled;
           const selectable = hasCardBehavior && !computedDisabled;
-          return /* @__PURE__ */ jsxs("td", { className: plansCell({
-            activeColor: value === plan.value || hoveredPlan === plan.value,
-            disabled: computedDisabled,
-            focus: focusedPlan === plan.value,
-            hideLabels,
-            selectable
-          }), "data-testid": `${plan.value}-${feature.key}`, onBlur: () => {
-          }, onClick: selectable ? () => onChange(plan.value) : void 0, onFocus: () => {
-          }, onKeyDown: () => {
-          }, onMouseOut: selectable ? () => {
-            setHoveredPlan(void 0);
-          } : void 0, onMouseOver: selectable ? () => {
-            setHoveredPlan(plan.value);
-          } : void 0, children: [
-            plan.data[featureKey] === false ? /* @__PURE__ */ jsx(CloseIcon, { disabled: computedDisabled, prominence: "weak", sentiment: "neutral", size: "large" }) : null,
-            plan.data[featureKey] === true ? /* @__PURE__ */ jsx(CheckCircleIcon, { disabled: computedDisabled, sentiment: "success", size: "medium" }) : null,
-            typeof plan.data[featureKey] !== "boolean" ? /* @__PURE__ */ jsx(Text, { as: "span", disabled: computedDisabled, sentiment: "neutral", variant: "body", children: plan.data[featureKey] }) : null
-          ] }, plan.value);
+          return /* @__PURE__ */ jsxs(
+            "td",
+            {
+              className: plansCell({
+                activeColor: value === plan.value || hoveredPlan === plan.value,
+                disabled: computedDisabled,
+                focus: focusedPlan === plan.value,
+                hideLabels,
+                selectable
+              }),
+              "data-testid": `${plan.value}-${feature.key}`,
+              onBlur: () => {
+              },
+              onClick: selectable ? () => onChange(plan.value) : void 0,
+              onFocus: () => {
+              },
+              onKeyDown: () => {
+              },
+              onMouseOut: selectable ? () => {
+                setHoveredPlan(void 0);
+              } : void 0,
+              onMouseOver: selectable ? () => {
+                setHoveredPlan(plan.value);
+              } : void 0,
+              children: [
+                plan.data[featureKey] === false ? /* @__PURE__ */ jsx(
+                  CloseIcon,
+                  {
+                    disabled: computedDisabled,
+                    prominence: "weak",
+                    sentiment: "neutral",
+                    size: "large"
+                  }
+                ) : null,
+                plan.data[featureKey] === true ? /* @__PURE__ */ jsx(
+                  CheckCircleIcon,
+                  {
+                    disabled: computedDisabled,
+                    sentiment: "success",
+                    size: "medium"
+                  }
+                ) : null,
+                typeof plan.data[featureKey] !== "boolean" ? /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    as: "span",
+                    disabled: computedDisabled,
+                    sentiment: "neutral",
+                    variant: "body",
+                    children: plan.data[featureKey]
+                  }
+                ) : null
+              ]
+            },
+            plan.value
+          );
         })
       ] }, feature.key);
     }) })

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

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

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

@@ -18,5 +18,5 @@ type StepProps = {
     completed: boolean;
     'data-testid'?: string;
 };
-export declare const SteppedList: ({ stepNumber, stepTitle, completed, stepIcon, "data-testid": dataTestId, }: StepProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const SteppedList: ({ stepNumber, stepTitle, completed, stepIcon, "data-testid": dataTestId, }: StepProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SteppedListCard/Step.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { CheckIcon } from "@ultraviolet/icons";
 import { StepList, Text } from "@ultraviolet/ui";
 import { useContext } from "react";
@@ -14,7 +14,47 @@ const SteppedList = ({
 }) => {
   const containerData = useContext(Data);
   const active = containerData.currentStep === stepNumber;
-  return completed ? /* @__PURE__ */ jsx(StepList.Item, { bulletContent: /* @__PURE__ */ jsx(CheckIcon, {}), className: steppedListCardStep, "data-testid": dataTestId, onClick: () => containerData.setCurrentStep(stepNumber), prominence: active ? "strong" : "default", sentiment: "primary", size: "small", children: /* @__PURE__ */ jsx(Text, { as: "h3", className: steppedListCardStepTitle, variant: active ? "bodyStrong" : "body", children: stepTitle }) }) : /* @__PURE__ */ jsx(StepList.Item, { bulletContent: stepIcon ?? String(stepNumber), className: steppedListCardStep, "data-testid": dataTestId, onClick: () => containerData.setCurrentStep(stepNumber), prominence: active ? "strong" : void 0, sentiment: active ? "primary" : void 0, size: "small", children: /* @__PURE__ */ jsx(Text, { as: "h3", className: steppedListCardStepTitle, variant: active ? "bodyStrong" : "body", children: stepTitle }) });
+  return completed ? /* @__PURE__ */ jsx(
+    StepList.Item,
+    {
+      bulletContent: /* @__PURE__ */ jsx(CheckIcon, {}),
+      className: steppedListCardStep,
+      "data-testid": dataTestId,
+      onClick: () => containerData.setCurrentStep(stepNumber),
+      prominence: active ? "strong" : "default",
+      sentiment: "primary",
+      size: "small",
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "h3",
+          className: steppedListCardStepTitle,
+          variant: active ? "bodyStrong" : "body",
+          children: stepTitle
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx(
+    StepList.Item,
+    {
+      bulletContent: stepIcon ?? String(stepNumber),
+      className: steppedListCardStep,
+      "data-testid": dataTestId,
+      onClick: () => containerData.setCurrentStep(stepNumber),
+      prominence: active ? "strong" : void 0,
+      sentiment: active ? "primary" : void 0,
+      size: "small",
+      children: /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "h3",
+          className: steppedListCardStepTitle,
+          variant: active ? "bodyStrong" : "body",
+          children: stepTitle
+        }
+      )
+    }
+  );
 };
 export {
   SteppedList

package/dist/components/SteppedListCard/SteppedListCard.d.ts

@@ -55,7 +55,7 @@ type SteppedListContainerProps = {
  * It can pass prop "nextStep" to its children.
  */
 declare const SteppedListCard: {
-    ({ header, showToggleOption, hideTooltipText, hideText, showText, showTooltipText, children, steps, onClickHide, }: SteppedListContainerProps): import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ header, showToggleOption, hideTooltipText, hideText, showText, showTooltipText, children, steps, onClickHide, }: SteppedListContainerProps): import("react/jsx-runtime").JSX.Element;
     Step: ({ subHeader, children, image, stepNumber, completed, style, }: {
         subHeader?: ReactNode;
         children: ((nextStep: (completed?: boolean) => void) => ReactNode) | ReactNode;
@@ -63,6 +63,6 @@ declare const SteppedListCard: {
         stepNumber: number;
         completed?: boolean;
         style?: import("react").CSSProperties;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+    }) => import("react/jsx-runtime").JSX.Element | null;
 };
 export { SteppedListCard };

package/dist/components/SteppedListCard/SteppedListCard.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Stack, Text, Button, Card, Row, StepList } from "@ultraviolet/ui";
 import { Children, useState, useMemo } from "react";
 import { Data } from "./helper.js";
@@ -21,15 +21,26 @@ const SteppedListCard = ({
   const [currentStep, setCurrentStep] = useState(1);
   const [hidden, setHidden] = useState(false);
   const [done, setDone] = useState(new Array(steps.length).fill(false));
-  const values = useMemo(() => ({
-    currentStep,
-    done,
-    numberOfSteps,
-    onClickHide,
-    setCurrentStep,
-    setDone,
-    setHidden
-  }), [currentStep, setCurrentStep, numberOfSteps, done, setDone, setHidden, onClickHide]);
+  const values = useMemo(
+    () => ({
+      currentStep,
+      done,
+      numberOfSteps,
+      onClickHide,
+      setCurrentStep,
+      setDone,
+      setHidden
+    }),
+    [
+      currentStep,
+      setCurrentStep,
+      numberOfSteps,
+      done,
+      setDone,
+      setHidden,
+      onClickHide
+    ]
+  );
   const onClickHideButton = () => {
     if (onClickHide) {
       onClickHide();
@@ -38,16 +49,52 @@ const SteppedListCard = ({
     }
   };
   return /* @__PURE__ */ jsx(Data.Provider, { value: values, children: /* @__PURE__ */ jsxs(Stack, { gap: 2, width: "100%", children: [
-    /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", justifyContent: "space-between", children: [
-      typeof header === "string" ? /* @__PURE__ */ jsx(Text, { as: "h3", variant: "heading", children: header }) : header,
-      showToggleOption ? /* @__PURE__ */ jsx(Button, { className: hideButton, onClick: onClickHideButton, sentiment: "neutral", size: "small", tooltip: hidden ? showTooltipText : hideTooltipText, variant: "ghost", children: hidden ? showText : hideText }) : null
-    ] }),
+    /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        alignItems: "center",
+        direction: "row",
+        justifyContent: "space-between",
+        children: [
+          typeof header === "string" ? /* @__PURE__ */ jsx(Text, { as: "h3", variant: "heading", children: header }) : header,
+          showToggleOption ? /* @__PURE__ */ jsx(
+            Button,
+            {
+              className: hideButton,
+              onClick: onClickHideButton,
+              sentiment: "neutral",
+              size: "small",
+              tooltip: hidden ? showTooltipText : hideTooltipText,
+              variant: "ghost",
+              children: hidden ? showText : hideText
+            }
+          ) : null
+        ]
+      }
+    ),
     hidden ? null : /* @__PURE__ */ jsx(Card, { className: steppedListCard, children: /* @__PURE__ */ jsxs(Row, { templateColumns: "1fr 3fr", children: [
-      /* @__PURE__ */ jsx(Stack, { className: steppedListCardWrapper, direction: "column", gap: 4, children: /* @__PURE__ */ jsx(StepList, { children: steps.map((step, index) => {
-        const stepTitle = typeof step === "string" ? step : step.title;
-        const stepIcon = typeof step === "string" ? void 0 : step.icon;
-        return /* @__PURE__ */ jsx(SteppedList, { completed: done[index], stepIcon, stepNumber: index + 1, stepTitle }, stepTitle);
-      }) }) }),
+      /* @__PURE__ */ jsx(
+        Stack,
+        {
+          className: steppedListCardWrapper,
+          direction: "column",
+          gap: 4,
+          children: /* @__PURE__ */ jsx(StepList, { children: steps.map((step, index) => {
+            const stepTitle = typeof step === "string" ? step : step.title;
+            const stepIcon = typeof step === "string" ? void 0 : step.icon;
+            return /* @__PURE__ */ jsx(
+              SteppedList,
+              {
+                completed: done[index],
+                stepIcon,
+                stepNumber: index + 1,
+                stepTitle
+              },
+              stepTitle
+            );
+          }) })
+        }
+      ),
       children
     ] }) })
   ] }) });

package/dist/components/SteppedListCard/SteppedListContent.d.ts

@@ -7,5 +7,5 @@ type SteppedListContentProps = {
     completed?: boolean;
     style?: CSSProperties;
 };
-export declare const SteppedListContent: ({ subHeader, children, image, stepNumber, completed, style, }: SteppedListContentProps) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+export declare const SteppedListContent: ({ subHeader, children, image, stepNumber, completed, style, }: SteppedListContentProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/components/SteppedListCard/SteppedListContent.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Stack, Text } from "@ultraviolet/ui";
 import { useContext, useEffect } from "react";
 import { Data, nextStep } from "./helper.js";
@@ -31,16 +31,18 @@ const SteppedListContent = ({
   if (stepNumber === currentStep) {
     return /* @__PURE__ */ jsxs(Stack, { className: steppedListCardContent, style, children: [
       /* @__PURE__ */ jsx("div", { className: steppedListCardSubHeader, children: typeof subHeader === "string" ? /* @__PURE__ */ jsx(Text, { as: "h3", variant: "headingSmallStrong", children: subHeader }) : subHeader }),
-      typeof children === "function" ? children((completedArg) => nextStep({
-        completed: completedArg,
-        done,
-        numberOfSteps,
-        onClickHide,
-        setCompleted: setDone,
-        setCurrentStep,
-        setHidden,
-        stepNumber
-      })) : children,
+      typeof children === "function" ? children(
+        (completedArg) => nextStep({
+          completed: completedArg,
+          done,
+          numberOfSteps,
+          onClickHide,
+          setCompleted: setDone,
+          setCurrentStep,
+          setHidden,
+          stepNumber
+        })
+      ) : children,
       /* @__PURE__ */ jsx("div", { className: steppedListCardImage, children: image })
     ] });
   }

package/dist/components/SteppedListCard/helper.js

@@ -23,7 +23,9 @@ const nextStep = ({
   onClickHide
 }) => {
   const newValue = completed === void 0 ? done[stepNumber - 1] : completed;
-  const tempDone = done.map((item, index) => index === stepNumber - 1 ? newValue : item);
+  const tempDone = done.map(
+    (item, index) => index === stepNumber - 1 ? newValue : item
+  );
   setCompleted(tempDone);
   if (numberOfSteps > stepNumber) {
     setCurrentStep(stepNumber + 1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/plus",
-  "version": "3.0.0-beta.16",
+  "version": "3.0.0-beta.17",
   "description": "Ultraviolet Plus",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -54,7 +54,7 @@
   "peerDependencies": {
     "react": "18.x || 19.x",
     "react-dom": "18.x || 19.x",
-    "@ultraviolet/ui": "3.0.0-beta.27"
+    "@ultraviolet/ui": "3.0.0-beta.28"
   },
   "devDependencies": {
     "@babel/core": "7.28.5",
@@ -63,7 +63,7 @@
     "react": "19.2.0",
     "react-dom": "19.2.0",
     "@ultraviolet/illustrations": "6.0.0-beta.6",
-    "@ultraviolet/ui": "3.0.0-beta.27",
+    "@ultraviolet/ui": "3.0.0-beta.28",
     "@utils/test": "0.0.1"
   },
   "dependencies": {
@@ -75,7 +75,7 @@
     "@vanilla-extract/recipes": "0.5.7",
     "csstype": "3.1.3",
     "react-intersection-observer": "9.16.0",
-    "@ultraviolet/icons": "5.0.0-beta.11",
+    "@ultraviolet/icons": "5.0.0-beta.12",
     "@ultraviolet/themes": "3.0.0-beta.4"
   },
   "scripts": {