@ultraviolet/ui 3.0.0-beta.27 → 3.0.0-beta.29

package/dist/components/SelectableCardOptionGroup/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { Label } from "../Label/index.js";
 import { Row } from "../Row/index.js";
@@ -26,23 +26,59 @@ const SelectableCardOptionGroup = ({
   size = "large",
   style
 }) => {
-  const contextValue = useMemo(() => ({
-    disabled,
-    error: !!error,
-    groupName: name,
-    groupValue: value,
-    onChange,
-    onChangeOption,
-    optionValue,
-    required,
-    size
-  }), [disabled, error, name, onChange, onChangeOption, optionValue, required, value, size]);
+  const contextValue = useMemo(
+    () => ({
+      disabled,
+      error: !!error,
+      groupName: name,
+      groupValue: value,
+      onChange,
+      onChangeOption,
+      optionValue,
+      required,
+      size
+    }),
+    [
+      disabled,
+      error,
+      name,
+      onChange,
+      onChangeOption,
+      optionValue,
+      required,
+      value,
+      size
+    ]
+  );
   return /* @__PURE__ */ jsx(SelectableCardOptionGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, style, children: [
-    /* @__PURE__ */ jsx("fieldset", { className: `${className ? `${className} ` : ""}${selectableCardOptionFieldSet}`, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
-      legend ? /* @__PURE__ */ jsx(Label, { as: "legend", labelDescription: legendDescription, required, children: legend }) : null,
-      /* @__PURE__ */ jsx(Row, { gap: 2, templateColumns: `repeat(${columns}, minmax(0, 1fr))`, children })
-    ] }) }),
-    error && typeof error === "string" || helper ? /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: error ? "danger" : "neutral", variant: "caption", children: helper || error }) : null
+    /* @__PURE__ */ jsx(
+      "fieldset",
+      {
+        className: `${className ? `${className} ` : ""}${selectableCardOptionFieldSet}`,
+        children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
+          legend ? /* @__PURE__ */ jsx(
+            Label,
+            {
+              as: "legend",
+              labelDescription: legendDescription,
+              required,
+              children: legend
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(Row, { gap: 2, templateColumns: `repeat(${columns}, minmax(0, 1fr))`, children })
+        ] })
+      }
+    ),
+    error && typeof error === "string" || helper ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "span",
+        prominence: "weak",
+        sentiment: error ? "danger" : "neutral",
+        variant: "caption",
+        children: helper || error
+      }
+    ) : null
   ] }) });
 };
 SelectableCardOptionGroup.Option = Option;

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

@@ -10,5 +10,5 @@ type SeparatorProps = {
 /**
  * Separator component used to separate content with a horizontal or vertical line.
  */
-export declare const Separator: ({ direction, thickness, sentiment, className, "data-testid": dataTestId, children, style, }: SeparatorProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Separator: ({ direction, thickness, sentiment, className, "data-testid": dataTestId, children, style, }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Separator/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { iconWraperSeparator, hr, thicknessSeparator } from "./styles.css.js";
 const Separator = ({
@@ -10,31 +10,48 @@ const Separator = ({
   "data-testid": dataTestId,
   children,
   style
-}) => children ? /* @__PURE__ */ jsxs("div", { "aria-orientation": direction, className: `${className ? `${className} ` : ""}${iconWraperSeparator({
-  direction,
-  sentiment
-})}`, "data-testid": dataTestId, role: "separator", style, children: [
-  /* @__PURE__ */ jsx("hr", { className: hr({
-    direction,
-    hasIcon: true,
-    sentiment
-  }), style: assignInlineVars({
-    [thicknessSeparator]: `${thickness}px`
-  }) }),
-  children,
-  /* @__PURE__ */ jsx("hr", { className: hr({
-    direction,
-    hasIcon: true,
-    sentiment
-  }), style: assignInlineVars({
-    [thicknessSeparator]: `${thickness}px`
-  }) })
-] }) : /* @__PURE__ */ jsx("hr", { "aria-orientation": direction, className: `${className ? `${className} ` : ""}${hr({
-  direction,
-  sentiment
-})}`, "data-testid": dataTestId, role: "separator", style: assignInlineVars({
-  [thicknessSeparator]: `${thickness}px`
-}) });
+}) => children ? /* @__PURE__ */ jsxs(
+  "div",
+  {
+    "aria-orientation": direction,
+    className: `${className ? `${className} ` : ""}${iconWraperSeparator({ direction, sentiment })}`,
+    "data-testid": dataTestId,
+    role: "separator",
+    style,
+    children: [
+      /* @__PURE__ */ jsx(
+        "hr",
+        {
+          className: hr({ direction, hasIcon: true, sentiment }),
+          style: assignInlineVars({
+            [thicknessSeparator]: `${thickness}px`
+          })
+        }
+      ),
+      children,
+      /* @__PURE__ */ jsx(
+        "hr",
+        {
+          className: hr({ direction, hasIcon: true, sentiment }),
+          style: assignInlineVars({
+            [thicknessSeparator]: `${thickness}px`
+          })
+        }
+      )
+    ]
+  }
+) : /* @__PURE__ */ jsx(
+  "hr",
+  {
+    "aria-orientation": direction,
+    className: `${className ? `${className} ` : ""}${hr({ direction, sentiment })}`,
+    "data-testid": dataTestId,
+    role: "separator",
+    style: assignInlineVars({
+      [thicknessSeparator]: `${thickness}px`
+    })
+  }
+);
 export {
   Separator
 };

package/dist/components/Skeleton/Block.d.ts

@@ -1,3 +1,3 @@
 export declare const Block: ({ length }: {
     length?: number;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Block.js

@@ -1,14 +1,10 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { IconSkeleton } from "./IconSkeleton.js";
 import { Line } from "./Line.js";
 import { blockSkeletonList, blockSkeletonLine } from "./stylesVariants.css.js";
-const Block = ({
-  length = 3
-}) => /* @__PURE__ */ jsx("ul", { className: blockSkeletonList, children: Array.from({
-  length
-}, (_, i) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("li", { className: blockSkeletonLine, children: [
+const Block = ({ length = 3 }) => /* @__PURE__ */ jsx("ul", { className: blockSkeletonList, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("li", { className: blockSkeletonLine, children: [
   /* @__PURE__ */ jsx(IconSkeleton, {}),
   /* @__PURE__ */ jsx(Line, {})
 ] }) }, `skeleton-block-${i}`)) });

package/dist/components/Skeleton/Blocks.d.ts

@@ -1,4 +1,4 @@
 export declare const Blocks: ({ col, length, }: {
     col?: number;
     length?: number;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Blocks.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { IconSkeleton } from "./IconSkeleton.js";
 import { Line } from "./Line.js";
@@ -7,14 +7,19 @@ import { blocksContainer, blocksSkeleton, columns } from "./stylesVariants.css.j
 const Blocks = ({
   col = 4,
   length = 8
-}) => /* @__PURE__ */ jsx("div", { className: blocksContainer, style: assignInlineVars({
-  [columns]: col.toString()
-}), children: Array.from({
-  length
-}, (_, i) => /* @__PURE__ */ jsxs("div", { className: blocksSkeleton, children: [
-  /* @__PURE__ */ jsx(IconSkeleton, {}),
-  /* @__PURE__ */ jsx(Line, {})
-] }, `skeleton-blocks-${i}`)) });
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: blocksContainer,
+    style: assignInlineVars({
+      [columns]: col.toString()
+    }),
+    children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxs("div", { className: blocksSkeleton, children: [
+      /* @__PURE__ */ jsx(IconSkeleton, {}),
+      /* @__PURE__ */ jsx(Line, {})
+    ] }, `skeleton-blocks-${i}`))
+  }
+);
 export {
   Blocks
 };

package/dist/components/Skeleton/BoxWithIcon.d.ts

@@ -1,4 +1,4 @@
 export declare const BoxWithIcon: ({ col, length, }: {
     col?: number;
     length?: number;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/BoxWithIcon.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { IconSkeleton } from "./IconSkeleton.js";
 import { Line } from "./Line.js";
@@ -7,14 +7,19 @@ import { blocksContainer, boxWithIconSkeleton, columns } from "./stylesVariants.
 const BoxWithIcon = ({
   col = 4,
   length = 8
-}) => /* @__PURE__ */ jsx("div", { className: blocksContainer, style: assignInlineVars({
-  [columns]: col.toString()
-}), children: Array.from({
-  length
-}, (_, i) => /* @__PURE__ */ jsxs("div", { className: boxWithIconSkeleton, children: [
-  /* @__PURE__ */ jsx(IconSkeleton, {}),
-  /* @__PURE__ */ jsx(Line, {})
-] }, `skeleton-box-${i}`)) });
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: blocksContainer,
+    style: assignInlineVars({
+      [columns]: col.toString()
+    }),
+    children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxs("div", { className: boxWithIconSkeleton, children: [
+      /* @__PURE__ */ jsx(IconSkeleton, {}),
+      /* @__PURE__ */ jsx(Line, {})
+    ] }, `skeleton-box-${i}`))
+  }
+);
 export {
   BoxWithIcon
 };

package/dist/components/Skeleton/Donut.d.ts

@@ -1 +1 @@
-export declare const Donut: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Donut: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Donut.js

@@ -1,9 +1,17 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Line } from "./Line.js";
 import { donutSkeletonContainer, donutSkeletonSvg, donutSkeletonCircle, CIRCLE_SIZE, donutSkeletonLineList } from "./stylesVariants.css.js";
 const Donut = () => /* @__PURE__ */ jsxs("div", { className: donutSkeletonContainer, children: [
-  /* @__PURE__ */ jsx("svg", { className: donutSkeletonSvg, children: /* @__PURE__ */ jsx("circle", { className: donutSkeletonCircle, cx: `${CIRCLE_SIZE / 2}rem`, cy: `${CIRCLE_SIZE / 2}rem`, r: "90" }) }),
+  /* @__PURE__ */ jsx("svg", { className: donutSkeletonSvg, children: /* @__PURE__ */ jsx(
+    "circle",
+    {
+      className: donutSkeletonCircle,
+      cx: `${CIRCLE_SIZE / 2}rem`,
+      cy: `${CIRCLE_SIZE / 2}rem`,
+      r: "90"
+    }
+  ) }),
   /* @__PURE__ */ jsxs("ul", { className: donutSkeletonLineList, children: [
     /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Line, {}) }),
     /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Line, {}) }),

package/dist/components/Skeleton/IconSkeleton.d.ts

@@ -1 +1 @@
-export declare const IconSkeleton: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const IconSkeleton: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/IconSkeleton.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { iconSkeleton } from "./stylesVariants.css.js";
 const IconSkeleton = () => /* @__PURE__ */ jsx("div", { className: iconSkeleton });
 export {

package/dist/components/Skeleton/Line.d.ts

@@ -1 +1 @@
-export declare const Line: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Line: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Line.js

@@ -1,12 +1,18 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { lineSkeleton, widthLine } from "./stylesVariants.css.js";
 const sizes = ["5rem", "7.5rem", "10rem", "12.5rem"];
 const randomSize = () => sizes[Math.floor(Math.random() * sizes.length)];
-const Line = () => /* @__PURE__ */ jsx("div", { className: lineSkeleton, style: assignInlineVars({
-  [widthLine]: randomSize()
-}) });
+const Line = () => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: lineSkeleton,
+    style: assignInlineVars({
+      [widthLine]: randomSize()
+    })
+  }
+);
 export {
   Line
 };

package/dist/components/Skeleton/List.d.ts

@@ -1,4 +1,4 @@
 export declare const List: ({ length, col, }: {
     length?: number;
     col?: number;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/List.js

@@ -1,18 +1,12 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Line } from "./Line.js";
 import { listSkeletonUl, listSkeletonLi, listSkeletonDiv } from "./stylesVariants.css.js";
-const Item = ({
-  col = 3
-}) => /* @__PURE__ */ jsx("li", { className: listSkeletonLi, children: Array.from({
-  length: col
-}, (_, i) => /* @__PURE__ */ jsx("div", { className: listSkeletonDiv, children: /* @__PURE__ */ jsx(Line, {}) }, `skeleton-list-col-${i}`)) });
+const Item = ({ col = 3 }) => /* @__PURE__ */ jsx("li", { className: listSkeletonLi, children: Array.from({ length: col }, (_, i) => /* @__PURE__ */ jsx("div", { className: listSkeletonDiv, children: /* @__PURE__ */ jsx(Line, {}) }, `skeleton-list-col-${i}`)) });
 const List = ({
   length = 3,
   col = 3
-}) => /* @__PURE__ */ jsx("ul", { className: listSkeletonUl, children: Array.from({
-  length
-}, (_, i) => /* @__PURE__ */ jsx(Item, { col }, `skeleton-list-${i}`)) });
+}) => /* @__PURE__ */ jsx("ul", { className: listSkeletonUl, children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx(Item, { col }, `skeleton-list-${i}`)) });
 export {
   List
 };

package/dist/components/Skeleton/Slider.d.ts

@@ -1,3 +1,3 @@
 export declare const Slider: ({ length }: {
     length?: number;
-}) => import("@emotion/react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Slider.js

@@ -1,14 +1,17 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { sliderSkeletonContainer, sliderSkeletonCard, sliderSkeletonBanner, sliderLength } from "./stylesVariants.css.js";
-const Slider = ({
-  length = 4
-}) => /* @__PURE__ */ jsx("div", { className: sliderSkeletonContainer, style: assignInlineVars({
-  [sliderLength]: length.toString()
-}), children: Array.from({
-  length
-}, (_, i) => /* @__PURE__ */ jsx("div", { className: sliderSkeletonCard, children: /* @__PURE__ */ jsx("div", { className: sliderSkeletonBanner }) }, `skeleton-slider-card-${i}`)) });
+const Slider = ({ length = 4 }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: sliderSkeletonContainer,
+    style: assignInlineVars({
+      [sliderLength]: length.toString()
+    }),
+    children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsx("div", { className: sliderSkeletonCard, children: /* @__PURE__ */ jsx("div", { className: sliderSkeletonBanner }) }, `skeleton-slider-card-${i}`))
+  }
+);
 export {
   Slider
 };

package/dist/components/Skeleton/Square.d.ts

@@ -1 +1 @@
-export declare const Square: () => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Square: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/Skeleton/Square.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { squareSkeleton } from "./stylesVariants.css.js";
 const Square = () => /* @__PURE__ */ jsx("div", { className: squareSkeleton });
 export {

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

@@ -2,25 +2,25 @@ import type { CSSProperties } from 'react';
 declare const variants: {
     readonly block: ({ length }: {
         length?: number;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     readonly blocks: ({ col, length, }: {
         col?: number;
         length?: number;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     readonly box: ({ col, length, }: {
         col?: number;
         length?: number;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    readonly donut: () => import("@emotion/react/jsx-runtime").JSX.Element;
-    readonly line: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
+    readonly donut: () => import("react/jsx-runtime").JSX.Element;
+    readonly line: () => import("react/jsx-runtime").JSX.Element;
     readonly list: ({ length, col, }: {
         length?: number;
         col?: number;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     readonly slider: ({ length }: {
         length?: number;
-    }) => import("@emotion/react/jsx-runtime").JSX.Element;
-    readonly square: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
+    readonly square: () => import("react/jsx-runtime").JSX.Element;
 };
 type SkeletonVariant = keyof typeof variants;
 type SkeletonProps = {
@@ -37,6 +37,6 @@ type SkeletonProps = {
  * It is used to provide a better user experience by showing a temporary placeholder reflecting the dimensions of the
  * content that will eventually be loaded on the screen.
  */
-export declare const Skeleton: ({ variant, length, col, className, "aria-label": ariaLabel, "data-testid": dataTestId, style, }: SkeletonProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Skeleton: ({ variant, length, col, className, "aria-label": ariaLabel, "data-testid": dataTestId, style, }: SkeletonProps) => import("react/jsx-runtime").JSX.Element;
 export declare const skeletonTypes: SkeletonVariant[];
 export {};

package/dist/components/Skeleton/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { Block } from "./Block.js";
 import { Blocks } from "./Blocks.js";
 import { BoxWithIcon } from "./BoxWithIcon.js";
@@ -29,10 +29,21 @@ const Skeleton = ({
   style
 }) => {
   const Component = variants[variant];
-  return /* @__PURE__ */ jsxs("div", { "aria-busy": true, "aria-label": ariaLabel, "aria-live": "polite", className: `${className ? `${className} ` : ""}${skeletonContainer}`, "data-testid": dataTestId, style, children: [
-    /* @__PURE__ */ jsx(Component, { col, length }),
-    /* @__PURE__ */ jsx("div", { className: skeletonHighlight })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "aria-busy": true,
+      "aria-label": ariaLabel,
+      "aria-live": "polite",
+      className: `${className ? `${className} ` : ""}${skeletonContainer}`,
+      "data-testid": dataTestId,
+      style,
+      children: [
+        /* @__PURE__ */ jsx(Component, { col, length }),
+        /* @__PURE__ */ jsx("div", { className: skeletonHighlight })
+      ]
+    }
+  );
 };
 export {
   Skeleton

package/dist/components/Slider/components/DoubleSlider.d.ts

@@ -1,2 +1,2 @@
 import type { DoubleSliderProps } from '../types';
-export declare const DoubleSlider: ({ name, tooltip, direction, disabled, error, "data-testid": dataTestId, value, onChange, min, max, step, id, onBlur, onFocus, options, unit, label, className, input, prefix, suffix, required, tooltipPosition, "aria-label": ariaLabel, }: DoubleSliderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const DoubleSlider: ({ name, tooltip, direction, disabled, error, "data-testid": dataTestId, value, onChange, min, max, step, id, onBlur, onFocus, options, unit, label, className, input, prefix, suffix, required, tooltipPosition, "aria-label": ariaLabel, }: DoubleSliderProps) => import("react/jsx-runtime").JSX.Element;