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

package/dist/components/VerificationCode/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { useId, useState, createRef, useMemo } from "react";
 import { Label } from "../Label/index.js";
 import { Text } from "../Text/index.js";
@@ -30,11 +30,14 @@ const VerificationCode = ({
 }) => {
   const uniqueId = useId();
   const id = inputId || uniqueId;
-  const valuesArray = Object.assign(new Array(fields).fill(""), [...initialValue.substring(0, fields)]);
+  const valuesArray = Object.assign(new Array(fields).fill(""), [
+    ...initialValue.substring(0, fields)
+  ]);
   const [values, setValues] = useState(valuesArray);
-  const inputRefs = Array.from({
-    length: fields
-  }, () => createRef());
+  const inputRefs = Array.from(
+    { length: fields },
+    () => createRef()
+  );
   const triggerChange = (inputValues) => {
     const stringValue = inputValues.join("");
     if (onChange) {
@@ -45,9 +48,7 @@ const VerificationCode = ({
     }
   };
   const inputOnChange = (index) => (event) => {
-    let {
-      value
-    } = event.target;
+    let { value } = event.target;
     if (type === "number") {
       value = event.target.value.replace(/[^\d]/gi, "");
     }
@@ -69,7 +70,7 @@ const VerificationCode = ({
     const prevIndex = index - 1;
     const nextIndex = index + 1;
     const first = inputRefs[0];
-    const last = inputRefs[inputRefs.length - 1];
+    const last = inputRefs.at(-1);
     const prev = inputRefs[prevIndex];
     const next = inputRefs[nextIndex];
     const vals = [...values];
@@ -112,17 +113,24 @@ const VerificationCode = ({
   };
   const inputOnPaste = (currentIndex) => (event) => {
     event.preventDefault();
-    const pastedValue = [...event.clipboardData.getData("Text")].map((copiedValue) => (
-      // Replace non number char with empty char when type is number
-      type === "number" ? copiedValue.replace(/[^\d]/gi, "") : copiedValue
-    ));
-    pastedValue.splice(fields - currentIndex < pastedValue.length ? fields - currentIndex : pastedValue.length);
+    const pastedValue = [...event.clipboardData.getData("Text")].map(
+      (copiedValue) => (
+        // Replace non number char with empty char when type is number
+        type === "number" ? copiedValue.replace(/[^\d]/gi, "") : copiedValue
+      )
+    );
+    pastedValue.splice(
+      fields - currentIndex < pastedValue.length ? fields - currentIndex : pastedValue.length
+    );
     setValues((vals) => {
       const newArray = structuredClone(vals);
       newArray.splice(currentIndex, pastedValue.length, ...pastedValue);
       return newArray;
     });
-    const nextIndex = Math.min(currentIndex + pastedValue.filter((item) => item !== "").length, inputRefs.length - 1);
+    const nextIndex = Math.min(
+      currentIndex + pastedValue.filter((item) => item !== "").length,
+      inputRefs.length - 1
+    );
     const next = inputRefs[nextIndex];
     next?.current?.focus();
     triggerChange(pastedValue);
@@ -136,12 +144,63 @@ const VerificationCode = ({
     }
     return "neutral";
   }, [error, success]);
-  return /* @__PURE__ */ jsxs("fieldset", { className: `${className ? `${className} ` : ""}${filedSetClass}`, "data-testid": dataTestId, style, children: [
-    label || labelDescription ? /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-0`, id: `${id}-label`, labelDescription, required, size: size === "xlarge" ? "large" : size, children: label }) : null,
-    /* @__PURE__ */ jsx("div", { children: values.map((value, index) => /* @__PURE__ */ jsx("input", { "aria-invalid": !!error, "aria-label": `${ariaLabel} ${index}`, autoComplete: "off", className: `${inputSizes[size]} ${inputClass}`, "data-success": !!success, "data-testid": index, disabled, id: `${id}-${index}`, onChange: inputOnChange(index), onFocus: inputOnFocus, onKeyDown: inputOnKeyDown(index), onPaste: inputOnPaste(index), pattern: type === "number" ? "[0-9]*" : void 0, placeholder: placeholder?.[index] ?? "", ref: inputRefs[index], required, type: type === "number" ? "tel" : type, value }, `field-${index}`)) }),
-    error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(Text, { as: "p", disabled, prominence: !error && !success ? "weak" : "default", sentiment, variant: "caption", children: error || success || helper }) : null,
-    !error && !success && typeof helper !== "string" && helper ? helper : null
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      className: `${className ? `${className} ` : ""}${filedSetClass}`,
+      "data-testid": dataTestId,
+      style,
+      children: [
+        label || labelDescription ? /* @__PURE__ */ jsx(
+          Label,
+          {
+            htmlFor: `${id}-0`,
+            id: `${id}-label`,
+            labelDescription,
+            required,
+            size: size === "xlarge" ? "large" : size,
+            children: label
+          }
+        ) : null,
+        /* @__PURE__ */ jsx("div", { children: values.map((value, index) => /* @__PURE__ */ jsx(
+          "input",
+          {
+            "aria-invalid": !!error,
+            "aria-label": `${ariaLabel} ${index}`,
+            autoComplete: "off",
+            className: `${inputSizes[size]} ${inputClass}`,
+            "data-success": !!success,
+            "data-testid": index,
+            disabled,
+            id: `${id}-${index}`,
+            onChange: inputOnChange(index),
+            onFocus: inputOnFocus,
+            onKeyDown: inputOnKeyDown(index),
+            onPaste: inputOnPaste(index),
+            pattern: type === "number" ? "[0-9]*" : void 0,
+            placeholder: placeholder?.[index] ?? "",
+            ref: inputRefs[index],
+            required,
+            type: type === "number" ? "tel" : type,
+            value
+          },
+          `field-${index}`
+        )) }),
+        error || typeof success === "string" || typeof helper === "string" ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: "p",
+            disabled,
+            prominence: !error && !success ? "weak" : "default",
+            sentiment,
+            variant: "caption",
+            children: error || success || helper
+          }
+        ) : null,
+        !error && !success && typeof helper !== "string" && helper ? helper : null
+      ]
+    }
+  );
 };
 export {
   VerificationCode

package/dist/helpers/legend.js

@@ -1,13 +1,13 @@
 const getLegendColor = (theme) => {
-  const {
-    colors
-  } = theme;
+  const { colors } = theme;
   return Object.keys(colors.other.data.charts).filter((key) => !["success", "danger"].includes(key)).toSorted((a, b) => {
     if (Number(a.replace("data", "")) < Number(b.replace("data", ""))) {
       return -1;
     }
     return 1;
-  }).map((key) => colors.other.data.charts[key]);
+  }).map(
+    (key) => colors.other.data.charts[key]
+  );
 };
 export {
   getLegendColor

package/dist/helpers/treeMap.d.ts

@@ -1,5 +1,6 @@
-import type { Theme } from '@emotion/react';
 import type { DefaultTreeMapDatum } from '@nivo/treemap';
+import type { consoleLightTheme } from '@ultraviolet/themes';
+type Theme = typeof consoleLightTheme;
 type ReturnType = Record<string, string>;
 /**
  * Recursively collects all IDs from a tree map data structure.

package/dist/index.d.ts

@@ -2,4 +2,4 @@ import './utils/animations/animations.css';
 export * from './components';
 export type { UltravioletUITheme } from './theme';
 export { darkTheme, default as theme, extendTheme, ThemeProvider, useTheme, } from './theme';
-export { Breakpoint, bounce, bounceDefault, down, fadeIn, fadeInDefault, fadeOut, fadeOutDefault, flash, flashDefault, getUUID, normalize, ping, pingDefault, pulse, pulseDefault, quickScaleDown, quickScaleDownDefault, scaleBack, scaleBackDefault, scaleDown, scaleDownDefault, scaleForward, scaleForwardDefault, scaleUp, scaleUpDefault, sketchIn, sketchInDefault, sketchOut, sketchOutDefault, slideDownLarge, slideDownLargeDefault, slideFromBottom, slideFromBottomDefault, slideFromLeft, slideFromLeftDefault, slideFromRight, slideFromRightDefault, slideFromTop, slideFromTopDefault, slideToBottom, slideToBottomDefault, slideToLeft, slideToLeftDefault, slideToRight, slideToRightDefault, slideToTop, slideToTopDefault, slideUpLarge, slideUpLargeDefault, unfoldIn, unfoldInDefault, unfoldOut, unfoldOutDefault, up, zoomIn, zoomInDefault, zoomOut, zoomOutDefault, } from './utils';
+export { bounce, bounceDefault, down, fadeIn, fadeInDefault, fadeOut, fadeOutDefault, flash, flashDefault, getUUID, normalize, ping, pingDefault, pulse, pulseDefault, quickScaleDown, quickScaleDownDefault, scaleBack, scaleBackDefault, scaleDown, scaleDownDefault, scaleForward, scaleForwardDefault, scaleUp, scaleUpDefault, sketchIn, sketchInDefault, sketchOut, sketchOutDefault, slideDownLarge, slideDownLargeDefault, slideFromBottom, slideFromBottomDefault, slideFromLeft, slideFromLeftDefault, slideFromRight, slideFromRightDefault, slideFromTop, slideFromTopDefault, slideToBottom, slideToBottomDefault, slideToLeft, slideToLeftDefault, slideToRight, slideToRightDefault, slideToTop, slideToTopDefault, slideUpLarge, slideUpLargeDefault, unfoldIn, unfoldInDefault, unfoldOut, unfoldOutDefault, up, zoomIn, zoomInDefault, zoomOut, zoomOutDefault, } from './utils';

package/dist/index.js

@@ -1,7 +1,6 @@
 /* empty css                                */
 import { extendTheme } from "./theme/index.js";
-import { default as default2 } from "./utils/responsive/Breakpoint.js";
-import { default as default3 } from "./utils/normalize.js";
+import { default as default2 } from "./utils/normalize.js";
 import { ThemeProvider, consoleDarkTheme, consoleLightTheme, useTheme } from "@ultraviolet/themes";
 import { bounce, fadeIn, fadeOut, flash, ping, pulse, quickScaleDown, scaleBack, scaleDown, scaleForward, scaleUp, sketchIn, sketchOut, slideDownLarge, slideFromBottom, slideFromLeft, slideFromRight, slideFromTop, slideToBottom, slideToLeft, slideToRight, slideToTop, slideUpLarge, unfoldIn, unfoldOut, zoomIn, zoomOut } from "./utils/animations/animationsVE.css.js";
 import { bounce as bounce2, fadeIn as fadeIn2, fadeOut as fadeOut2, flash as flash2, ping as ping2, pulse as pulse2, quickScaleDown as quickScaleDown2, scaleBack as scaleBack2, scaleDown as scaleDown2, scaleForward as scaleForward2, scaleUp as scaleUp2, sketchIn as sketchIn2, sketchOut as sketchOut2, slideDownLarge as slideDownLarge2, slideFromBottom as slideFromBottom2, slideFromLeft as slideFromLeft2, slideFromRight as slideFromRight2, slideFromTop as slideFromTop2, slideToBottom as slideToBottom2, slideToLeft as slideToLeft2, slideToRight as slideToRight2, slideToTop as slideToTop2, slideUpLarge as slideUpLarge2, unfoldIn as unfoldIn2, unfoldOut as unfoldOut2, zoomIn as zoomIn2, zoomOut as zoomOut2 } from "./utils/animations/animations.js";
@@ -93,7 +92,6 @@ export {
   BarChart,
   BarStack,
   Breadcrumbs,
-  default2 as Breakpoint,
   Bullet,
   Button,
   Card,
@@ -175,7 +173,7 @@ export {
   flash,
   flash2 as flashDefault,
   getUUID,
-  default3 as normalize,
+  default2 as normalize,
   notification,
   ping,
   ping2 as pingDefault,

package/dist/theme/ThemeProvider.d.ts

@@ -733,5 +733,5 @@ type ThemeProviderProps = {
  * ThemeProvider will apply generated global CSS variables to the application in the `<head>`.
  * If no theme is provided, it will default to `lightTheme`.
  */
-export declare const ThemeProvider: ({ children, theme, }: ThemeProviderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ children, theme, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/theme/ThemeProvider.js

@@ -1,5 +1,5 @@
 "use client";
-import "@emotion/react/jsx-runtime";
+import "react/jsx-runtime";
 import { consoleLightTheme } from "@ultraviolet/themes";
 import "@vanilla-extract/dynamic";
 import { useContext, createContext } from "react";
@@ -7,7 +7,9 @@ const ThemeContext = createContext(consoleLightTheme);
 const useTheme = () => {
   const context = useContext(ThemeContext);
   if (!context) {
-    throw new Error("useTheme must be used within a ThemeProvider imported from @ultraviolet/ui");
+    throw new Error(
+      "useTheme must be used within a ThemeProvider imported from @ultraviolet/ui"
+    );
   }
   return context;
 };

package/dist/theme/index.js

@@ -1,14 +1,7 @@
 import { consoleLightTheme } from "@ultraviolet/themes";
 import { ThemeProvider, consoleDarkTheme, consoleLightTheme as consoleLightTheme2, useTheme } from "@ultraviolet/themes";
 import deepmerge from "deepmerge";
-const {
-  colors,
-  shadows,
-  typography,
-  space,
-  radii,
-  breakpoints
-} = consoleLightTheme;
+const { colors, shadows, typography, space, radii, breakpoints } = consoleLightTheme;
 const extendTheme = (extendedTheme) => deepmerge(consoleLightTheme, extendedTheme);
 export {
   ThemeProvider,