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

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

@@ -21,5 +21,5 @@ type ProgressBarProps = {
 /**
  * Progress bar component to display progress of a task. Can be used to display progress of a form or a loading state.
  */
-export declare const ProgressBar: ({ progress, value, sentiment, className, "data-testid": dataTestId, showProgress, prefix, suffix, max, label, labelDescription, direction, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, style, }: ProgressBarProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ProgressBar: ({ progress, value, sentiment, className, "data-testid": dataTestId, showProgress, prefix, suffix, max, label, labelDescription, direction, "aria-labelledby": ariaLabelledBy, "aria-label": ariaLabel, style, }: ProgressBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/ProgressBar/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 { Label } from "../Label/index.js";
 import { Stack } from "../Stack/index.js";
@@ -22,25 +22,79 @@ const ProgressBar = ({
   "aria-labelledby": ariaLabelledBy,
   "aria-label": ariaLabel,
   style
-}) => /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction, gap: direction === "column" ? 1 : 2, children: [
-  direction === "column" && (label || showProgress) ? /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: !label && showProgress ? "right" : "space-between", width: "100%", children: [
-    /* @__PURE__ */ jsx(Label, { labelDescription, size: "medium", children: label }),
-    showProgress ? /* @__PURE__ */ jsxs(Text, { as: "label", placement: "right", sentiment: "neutral", variant: "bodySmall", children: [
-      prefix,
-      suffix === "%" ? 100 * value / max : value,
-      suffix
-    ] }) : null
-  ] }) : null,
-  direction === "row" && label ? /* @__PURE__ */ jsx(Label, { labelDescription, size: "medium", children: label }) : null,
-  /* @__PURE__ */ jsx("div", { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-valuemax": max, "aria-valuemin": 0, "aria-valuenow": value, className: `${className ? `${className} ` : ""}${progressContainer}`, "data-testid": dataTestId, role: "progressbar", style, children: progress ? /* @__PURE__ */ jsx("div", { className: progressBar }) : /* @__PURE__ */ jsx("div", { className: filledBarSentiments[sentiment], style: assignInlineVars({
-    [percentageValue]: `${100 * Math.max(0, Math.min(max, value)) / max}%`
-  }) }) }),
-  showProgress && direction === "row" ? /* @__PURE__ */ jsx(Stack, { direction: "row", gap: 1, width: "fit-content", children: /* @__PURE__ */ jsxs(Text, { as: "label", className: customText, sentiment: "neutral", variant: "bodySmall", children: [
-    prefix,
-    suffix === "%" ? 100 * value / max : value,
-    suffix
-  ] }) }) : null
-] });
+}) => /* @__PURE__ */ jsxs(
+  Stack,
+  {
+    alignItems: "center",
+    direction,
+    gap: direction === "column" ? 1 : 2,
+    children: [
+      direction === "column" && (label || showProgress) ? /* @__PURE__ */ jsxs(
+        Stack,
+        {
+          direction: "row",
+          justifyContent: !label && showProgress ? "right" : "space-between",
+          width: "100%",
+          children: [
+            /* @__PURE__ */ jsx(Label, { labelDescription, size: "medium", children: label }),
+            showProgress ? /* @__PURE__ */ jsxs(
+              Text,
+              {
+                as: "label",
+                placement: "right",
+                sentiment: "neutral",
+                variant: "bodySmall",
+                children: [
+                  prefix,
+                  suffix === "%" ? 100 * value / max : value,
+                  suffix
+                ]
+              }
+            ) : null
+          ]
+        }
+      ) : null,
+      direction === "row" && label ? /* @__PURE__ */ jsx(Label, { labelDescription, size: "medium", children: label }) : null,
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
+          "aria-valuemax": max,
+          "aria-valuemin": 0,
+          "aria-valuenow": value,
+          className: `${className ? `${className} ` : ""}${progressContainer}`,
+          "data-testid": dataTestId,
+          role: "progressbar",
+          style,
+          children: progress ? /* @__PURE__ */ jsx("div", { className: progressBar }) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: filledBarSentiments[sentiment],
+              style: assignInlineVars({
+                [percentageValue]: `${100 * Math.max(0, Math.min(max, value)) / max}%`
+              })
+            }
+          )
+        }
+      ),
+      showProgress && direction === "row" ? /* @__PURE__ */ jsx(Stack, { direction: "row", gap: 1, width: "fit-content", children: /* @__PURE__ */ jsxs(
+        Text,
+        {
+          as: "label",
+          className: customText,
+          sentiment: "neutral",
+          variant: "bodySmall",
+          children: [
+            prefix,
+            suffix === "%" ? 100 * value / max : value,
+            suffix
+          ]
+        }
+      ) }) : null
+    ]
+  }
+);
 export {
   ProgressBar
 };

package/dist/components/Radio/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { forwardRef, useId } from "react";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
@@ -10,60 +10,92 @@ const RadioMarkedIcon = () => /* @__PURE__ */ jsxs("g", { children: [
   /* @__PURE__ */ jsx("circle", { className: innerCircleRing, cx: "12", cy: "12", r: "8" }),
   /* @__PURE__ */ jsx("circle", { className: radioMark, cx: "12", cy: "12", r: "5" })
 ] });
-const Radio = forwardRef(({
-  checked = false,
-  onChange,
-  onFocus,
-  onBlur,
-  disabled = false,
-  error,
-  name,
-  value,
-  label,
-  helper,
-  className,
-  autoFocus,
-  onKeyDown,
-  tooltip,
-  "aria-label": ariaLabel,
-  "data-testid": dataTestId,
-  tabIndex,
-  id,
-  style
-}, forwadedRef) => {
-  const generatedId = useId();
-  const localId = id || generatedId;
-  return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(Stack, { className: radioStack, gap: 0.5, children: [
-    /* @__PURE__ */ jsxs("div", { "aria-disabled": disabled, className: `${className ? `${className} ` : ""}${container}`, "data-checked": checked, "data-error": error, "data-testid": dataTestId, children: [
-      /* @__PURE__ */ jsx(
-        "input",
+const Radio = forwardRef(
+  ({
+    checked = false,
+    onChange,
+    onFocus,
+    onBlur,
+    disabled = false,
+    error,
+    name,
+    value,
+    label,
+    helper,
+    className,
+    autoFocus,
+    onKeyDown,
+    tooltip,
+    "aria-label": ariaLabel,
+    "data-testid": dataTestId,
+    tabIndex,
+    id,
+    style
+  }, forwadedRef) => {
+    const generatedId = useId();
+    const localId = id || generatedId;
+    return /* @__PURE__ */ jsx(Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxs(Stack, { className: radioStack, gap: 0.5, children: [
+      /* @__PURE__ */ jsxs(
+        "div",
         {
           "aria-disabled": disabled,
-          "aria-invalid": !!error,
-          "aria-label": ariaLabel,
-          autoFocus,
-          checked,
-          className: radio,
-          disabled,
-          id: localId,
-          name,
-          onBlur,
-          onChange,
-          onFocus,
-          onKeyDown,
-          ref: forwadedRef,
-          style,
-          tabIndex,
-          type: "radio",
-          value
+          className: `${className ? `${className} ` : ""}${container}`,
+          "data-checked": checked,
+          "data-error": error,
+          "data-testid": dataTestId,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                "aria-disabled": disabled,
+                "aria-invalid": !!error,
+                "aria-label": ariaLabel,
+                autoFocus,
+                checked,
+                className: radio,
+                disabled,
+                id: localId,
+                name,
+                onBlur,
+                onChange,
+                onFocus,
+                onKeyDown,
+                ref: forwadedRef,
+                style,
+                tabIndex,
+                type: "radio",
+                value
+              }
+            ),
+            /* @__PURE__ */ jsx("svg", { className: ring, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(RadioMarkedIcon, {}) }),
+            label ? /* @__PURE__ */ jsx(Fragment, { children: typeof label === "string" ? /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "label",
+                className: textLabel,
+                htmlFor: localId,
+                prominence: "default",
+                variant: "body",
+                children: label
+              }
+            ) : /* @__PURE__ */ jsx("label", { className: labelStyle, htmlFor: localId, children: label }) }) : null
+          ]
         }
       ),
-      /* @__PURE__ */ jsx("svg", { className: ring, viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(RadioMarkedIcon, {}) }),
-      label ? /* @__PURE__ */ jsx(Fragment, { children: typeof label === "string" ? /* @__PURE__ */ jsx(Text, { as: "label", className: textLabel, htmlFor: localId, prominence: "default", variant: "body", children: label }) : /* @__PURE__ */ jsx("label", { className: labelStyle, htmlFor: localId, children: label }) }) : null
-    ] }),
-    helper ? /* @__PURE__ */ jsx(Text, { as: "span", className: margedText, prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null
-  ] }) });
-});
+      helper ? /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "span",
+          className: margedText,
+          prominence: "weak",
+          sentiment: "neutral",
+          variant: "caption",
+          children: helper
+        }
+      ) : null
+    ] }) });
+  }
+);
 export {
   Radio
 };

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

@@ -16,7 +16,7 @@ type RadioGroupProps = {
  * RadioGroup is a component that allows users to select one option from a list of options using radio.
  */
 export declare const RadioGroup: {
-    ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, }: RadioGroupProps): import("@emotion/react/jsx-runtime").JSX.Element;
-    Radio: ({ onFocus, onBlur, disabled, error, value, label, helper, className, autoFocus, onKeyDown, tooltip, "data-testid": dataTestId, style, }: RadioGroupRadioProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    ({ legend, legendDescription, value, className, helper, error, direction, children, onChange, name, description, required, }: RadioGroupProps): import("react/jsx-runtime").JSX.Element;
+    Radio: ({ onFocus, onBlur, disabled, error, value, label, helper, className, autoFocus, onKeyDown, tooltip, "data-testid": dataTestId, style, }: RadioGroupRadioProps) => import("react/jsx-runtime").JSX.Element;
 };
 export {};

package/dist/components/RadioGroup/index.js

@@ -1,12 +1,14 @@
 "use client";
-import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useMemo, createContext, useContext } from "react";
 import { Label } from "../Label/index.js";
 import { Radio } from "../Radio/index.js";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
 import { fieldset } from "./styles.css.js";
-const RadioGroupContext = createContext(void 0);
+const RadioGroupContext = createContext(
+  void 0
+);
 const RadioGroupRadio = ({
   onFocus,
   onBlur,
@@ -26,13 +28,28 @@ const RadioGroupRadio = ({
   if (!context) {
     throw new Error("RadioGroup.Radio can only be used inside a RadioGroup");
   }
-  const {
-    groupName,
-    onChange,
-    groupValue,
-    error: errorContext
-  } = context;
-  return /* @__PURE__ */ jsx(Radio, { autoFocus, checked: groupValue === value, className, "data-testid": dataTestId, disabled, error: error || errorContext, helper, label, name: groupName, onBlur, onChange, onFocus, onKeyDown, style, tooltip, value });
+  const { groupName, onChange, groupValue, error: errorContext } = context;
+  return /* @__PURE__ */ jsx(
+    Radio,
+    {
+      autoFocus,
+      checked: groupValue === value,
+      className,
+      "data-testid": dataTestId,
+      disabled,
+      error: error || errorContext,
+      helper,
+      label,
+      name: groupName,
+      onBlur,
+      onChange,
+      onFocus,
+      onKeyDown,
+      style,
+      tooltip,
+      value
+    }
+  );
 };
 const RadioGroup = ({
   legend,
@@ -48,22 +65,59 @@ const RadioGroup = ({
   description,
   required = false
 }) => {
-  const contextValue = useMemo(() => ({
-    error: !!error,
-    groupName: name,
-    groupValue: value,
-    onChange,
-    required
-  }), [name, value, onChange, required, error]);
+  const contextValue = useMemo(
+    () => ({
+      error: !!error,
+      groupName: name,
+      groupValue: value,
+      onChange,
+      required
+    }),
+    [name, value, onChange, required, error]
+  );
   return /* @__PURE__ */ jsx(RadioGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
     /* @__PURE__ */ jsx("fieldset", { className: `${className ? `${className} ` : ""}${fieldset}`, children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
       legend || description ? /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
-        legend ? /* @__PURE__ */ jsx(Label, { as: "legend", labelDescription: legendDescription, required, children: legend }) : null,
-        description ? /* @__PURE__ */ jsx(Text, { as: typeof description === "string" ? "p" : "div", prominence: "weak", sentiment: "neutral", variant: "bodySmall", children: description }) : null
+        legend ? /* @__PURE__ */ jsx(
+          Label,
+          {
+            as: "legend",
+            labelDescription: legendDescription,
+            required,
+            children: legend
+          }
+        ) : null,
+        description ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            as: typeof description === "string" ? "p" : "div",
+            prominence: "weak",
+            sentiment: "neutral",
+            variant: "bodySmall",
+            children: description
+          }
+        ) : null
       ] }) : null,
-      /* @__PURE__ */ jsx(Stack, { alignItems: "start", direction, gap: direction === "column" ? 1 : 2, children })
+      /* @__PURE__ */ jsx(
+        Stack,
+        {
+          alignItems: "start",
+          direction,
+          gap: direction === "column" ? 1 : 2,
+          children
+        }
+      )
     ] }) }),
-    helper ? /* @__PURE__ */ jsx(Text, { as: "span", prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null,
+    helper ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "span",
+        prominence: "weak",
+        sentiment: "neutral",
+        variant: "caption",
+        children: helper
+      }
+    ) : null,
     error ? /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "danger", variant: "caption", children: error }) : null
   ] }) });
 };

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

@@ -17,5 +17,5 @@ type RowProps = {
 /**
  * Row component is a wrapper for grid layout.
  */
-export declare const Row: ({ className, "data-testid": dataTestId, children, templateColumns, alignItems, justifyContent, gap, padding, style, }: RowProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const Row: ({ className, "data-testid": dataTestId, children, templateColumns, alignItems, justifyContent, gap, padding, style, }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Row/index.js

@@ -1,13 +1,16 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { consoleLightTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { row, sprinkles } from "./styles.css.js";
 import { paddings, templateColumn } from "./variables.css.js";
-const mapRepsonsiveGap = (object) => object ? Object.keys(object).reduce((acc, key) => ({
-  ...acc,
-  [key]: consoleLightTheme.space[object[key]]
-}), {}) : {};
+const mapRepsonsiveGap = (object) => object ? Object.keys(object).reduce(
+  (acc, key) => ({
+    ...acc,
+    [key]: consoleLightTheme.space[object[key]]
+  }),
+  {}
+) : {};
 const Row = ({
   className,
   "data-testid": dataTestId,
@@ -18,29 +21,37 @@ const Row = ({
   gap,
   padding,
   style
-}) => /* @__PURE__ */ jsx("div", { className: `${className ? `${className} ` : ""}${row} ${sprinkles({
-  alignItems: typeof alignItems === "object" ? alignItems : {
-    xxsmall: alignItems
-  },
-  gap: typeof gap === "object" ? mapRepsonsiveGap(gap) : {
-    xxsmall: gap ? consoleLightTheme.space[gap] : void 0
-  },
-  justifyContent: typeof justifyContent === "object" ? justifyContent : {
-    xxsmall: justifyContent
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: `${className ? `${className} ` : ""}${row} ${sprinkles({
+      alignItems: typeof alignItems === "object" ? alignItems : { xxsmall: alignItems },
+      gap: typeof gap === "object" ? mapRepsonsiveGap(gap) : { xxsmall: gap ? consoleLightTheme.space[gap] : void 0 },
+      justifyContent: typeof justifyContent === "object" ? justifyContent : { xxsmall: justifyContent }
+    })}`,
+    "data-testid": dataTestId,
+    style: {
+      ...assignInlineVars({
+        ...Object.keys(templateColumn).reduce(
+          (acc, column) => ({
+            ...acc,
+            [templateColumn[column]]: typeof templateColumns === "object" ? templateColumns[column] || "" : templateColumns
+          }),
+          {}
+        ),
+        ...Object.keys(paddings).reduce(
+          (acc, localPadding) => ({
+            ...acc,
+            [paddings[localPadding]]: typeof padding === "object" ? padding[localPadding] || "" : padding
+          }),
+          {}
+        )
+      }),
+      ...style
+    },
+    children
   }
-})}`, "data-testid": dataTestId, style: {
-  ...assignInlineVars({
-    ...Object.keys(templateColumn).reduce((acc, column) => ({
-      ...acc,
-      [templateColumn[column]]: typeof templateColumns === "object" ? templateColumns[column] || "" : templateColumns
-    }), {}),
-    ...Object.keys(paddings).reduce((acc, localPadding) => ({
-      ...acc,
-      [paddings[localPadding]]: typeof padding === "object" ? padding[localPadding] || "" : padding
-    }), {})
-  }),
-  ...style
-}, children });
+);
 export {
   Row
 };

package/dist/components/Row/styles.css.d.ts

@@ -223,6 +223,17 @@ export declare const responsiveProperties: {
                         xxsmall: string;
                     };
                 };
+                "anchor-center": {
+                    defaultClass: string;
+                    conditions: {
+                        large: string;
+                        medium: string;
+                        small: string;
+                        xlarge: string;
+                        xsmall: string;
+                        xxsmall: string;
+                    };
+                };
             };
         };
         justifyContent: {

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

@@ -2,13 +2,13 @@
 /* empty css                          */
 import { createSprinkles } from "@vanilla-extract/sprinkles/createRuntimeSprinkles";
 var row = "uv_x6hyh50";
-var responsiveProperties = function() {
+var responsiveProperties = (function() {
   var x = { conditions: { defaultCondition: "xxsmall", conditionNames: ["xxsmall", "xsmall", "small", "medium", "large", "xlarge"], responsiveArray: ["xxsmall", "xsmall", "small", "medium", "large"] }, styles: { gap: { values: { "0rem": { conditions: { xxsmall: "uv_x6hyh51", xsmall: "uv_x6hyh52", small: "uv_x6hyh53", medium: "uv_x6hyh54", large: "uv_x6hyh55", xlarge: "uv_x6hyh56" }, defaultClass: "uv_x6hyh51" }, "0.5rem": { conditions: { xxsmall: "uv_x6hyh57", xsmall: "uv_x6hyh58", small: "uv_x6hyh59", medium: "uv_x6hyh5a", large: "uv_x6hyh5b", xlarge: "uv_x6hyh5c" }, defaultClass: "uv_x6hyh57" }, "1rem": { conditions: { xxsmall: "uv_x6hyh5d", xsmall: "uv_x6hyh5e", small: "uv_x6hyh5f", medium: "uv_x6hyh5g", large: "uv_x6hyh5h", xlarge: "uv_x6hyh5i" }, defaultClass: "uv_x6hyh5d" }, "1.5rem": { conditions: { xxsmall: "uv_x6hyh5j", xsmall: "uv_x6hyh5k", small: "uv_x6hyh5l", medium: "uv_x6hyh5m", large: "uv_x6hyh5n", xlarge: "uv_x6hyh5o" }, defaultClass: "uv_x6hyh5j" }, "2rem": { conditions: { xxsmall: "uv_x6hyh5p", xsmall: "uv_x6hyh5q", small: "uv_x6hyh5r", medium: "uv_x6hyh5s", large: "uv_x6hyh5t", xlarge: "uv_x6hyh5u" }, defaultClass: "uv_x6hyh5p" }, "2.5rem": { conditions: { xxsmall: "uv_x6hyh5v", xsmall: "uv_x6hyh5w", small: "uv_x6hyh5x", medium: "uv_x6hyh5y", large: "uv_x6hyh5z", xlarge: "uv_x6hyh510" }, defaultClass: "uv_x6hyh5v" }, "3rem": { conditions: { xxsmall: "uv_x6hyh511", xsmall: "uv_x6hyh512", small: "uv_x6hyh513", medium: "uv_x6hyh514", large: "uv_x6hyh515", xlarge: "uv_x6hyh516" }, defaultClass: "uv_x6hyh511" }, "3.5rem": { conditions: { xxsmall: "uv_x6hyh517", xsmall: "uv_x6hyh518", small: "uv_x6hyh519", medium: "uv_x6hyh51a", large: "uv_x6hyh51b", xlarge: "uv_x6hyh51c" }, defaultClass: "uv_x6hyh517" }, "4rem": { conditions: { xxsmall: "uv_x6hyh51d", xsmall: "uv_x6hyh51e", small: "uv_x6hyh51f", medium: "uv_x6hyh51g", large: "uv_x6hyh51h", xlarge: "uv_x6hyh51i" }, defaultClass: "uv_x6hyh51d" }, "4.5rem": { conditions: { xxsmall: "uv_x6hyh51j", xsmall: "uv_x6hyh51k", small: "uv_x6hyh51l", medium: "uv_x6hyh51m", large: "uv_x6hyh51n", xlarge: "uv_x6hyh51o" }, defaultClass: "uv_x6hyh51j" }, "5rem": { conditions: { xxsmall: "uv_x6hyh51p", xsmall: "uv_x6hyh51q", small: "uv_x6hyh51r", medium: "uv_x6hyh51s", large: "uv_x6hyh51t", xlarge: "uv_x6hyh51u" }, defaultClass: "uv_x6hyh51p" }, "0.25rem": { conditions: { xxsmall: "uv_x6hyh51v", xsmall: "uv_x6hyh51w", small: "uv_x6hyh51x", medium: "uv_x6hyh51y", large: "uv_x6hyh51z", xlarge: "uv_x6hyh520" }, defaultClass: "uv_x6hyh51v" }, "0.125rem": { conditions: { xxsmall: "uv_x6hyh521", xsmall: "uv_x6hyh522", small: "uv_x6hyh523", medium: "uv_x6hyh524", large: "uv_x6hyh525", xlarge: "uv_x6hyh526" }, defaultClass: "uv_x6hyh521" }, "0.75rem": { conditions: { xxsmall: "uv_x6hyh527", xsmall: "uv_x6hyh528", small: "uv_x6hyh529", medium: "uv_x6hyh52a", large: "uv_x6hyh52b", xlarge: "uv_x6hyh52c" }, defaultClass: "uv_x6hyh527" } }, responsiveArray: void 0 }, alignItems: { values: { normal: { conditions: { xxsmall: "uv_x6hyh52d", xsmall: "uv_x6hyh52e", small: "uv_x6hyh52f", medium: "uv_x6hyh52g", large: "uv_x6hyh52h", xlarge: "uv_x6hyh52i" }, defaultClass: "uv_x6hyh52d" }, stretch: { conditions: { xxsmall: "uv_x6hyh52j", xsmall: "uv_x6hyh52k", small: "uv_x6hyh52l", medium: "uv_x6hyh52m", large: "uv_x6hyh52n", xlarge: "uv_x6hyh52o" }, defaultClass: "uv_x6hyh52j" }, center: { conditions: { xxsmall: "uv_x6hyh52p", xsmall: "uv_x6hyh52q", small: "uv_x6hyh52r", medium: "uv_x6hyh52s", large: "uv_x6hyh52t", xlarge: "uv_x6hyh52u" }, defaultClass: "uv_x6hyh52p" }, start: { conditions: { xxsmall: "uv_x6hyh52v", xsmall: "uv_x6hyh52w", small: "uv_x6hyh52x", medium: "uv_x6hyh52y", large: "uv_x6hyh52z", xlarge: "uv_x6hyh530" }, defaultClass: "uv_x6hyh52v" }, end: { conditions: { xxsmall: "uv_x6hyh531", xsmall: "uv_x6hyh532", small: "uv_x6hyh533", medium: "uv_x6hyh534", large: "uv_x6hyh535", xlarge: "uv_x6hyh536" }, defaultClass: "uv_x6hyh531" }, "flex-start": { conditions: { xxsmall: "uv_x6hyh537", xsmall: "uv_x6hyh538", small: "uv_x6hyh539", medium: "uv_x6hyh53a", large: "uv_x6hyh53b", xlarge: "uv_x6hyh53c" }, defaultClass: "uv_x6hyh537" }, "flex-end": { conditions: { xxsmall: "uv_x6hyh53d", xsmall: "uv_x6hyh53e", small: "uv_x6hyh53f", medium: "uv_x6hyh53g", large: "uv_x6hyh53h", xlarge: "uv_x6hyh53i" }, defaultClass: "uv_x6hyh53d" }, "self-start": { conditions: { xxsmall: "uv_x6hyh53j", xsmall: "uv_x6hyh53k", small: "uv_x6hyh53l", medium: "uv_x6hyh53m", large: "uv_x6hyh53n", xlarge: "uv_x6hyh53o" }, defaultClass: "uv_x6hyh53j" }, "self-end": { conditions: { xxsmall: "uv_x6hyh53p", xsmall: "uv_x6hyh53q", small: "uv_x6hyh53r", medium: "uv_x6hyh53s", large: "uv_x6hyh53t", xlarge: "uv_x6hyh53u" }, defaultClass: "uv_x6hyh53p" }, baseline: { conditions: { xxsmall: "uv_x6hyh53v", xsmall: "uv_x6hyh53w", small: "uv_x6hyh53x", medium: "uv_x6hyh53y", large: "uv_x6hyh53z", xlarge: "uv_x6hyh540" }, defaultClass: "uv_x6hyh53v" }, "first baseline": { conditions: { xxsmall: "uv_x6hyh541", xsmall: "uv_x6hyh542", small: "uv_x6hyh543", medium: "uv_x6hyh544", large: "uv_x6hyh545", xlarge: "uv_x6hyh546" }, defaultClass: "uv_x6hyh541" }, "last baseline": { conditions: { xxsmall: "uv_x6hyh547", xsmall: "uv_x6hyh548", small: "uv_x6hyh549", medium: "uv_x6hyh54a", large: "uv_x6hyh54b", xlarge: "uv_x6hyh54c" }, defaultClass: "uv_x6hyh547" }, "safe center": { conditions: { xxsmall: "uv_x6hyh54d", xsmall: "uv_x6hyh54e", small: "uv_x6hyh54f", medium: "uv_x6hyh54g", large: "uv_x6hyh54h", xlarge: "uv_x6hyh54i" }, defaultClass: "uv_x6hyh54d" }, "unsafe center": { conditions: { xxsmall: "uv_x6hyh54j", xsmall: "uv_x6hyh54k", small: "uv_x6hyh54l", medium: "uv_x6hyh54m", large: "uv_x6hyh54n", xlarge: "uv_x6hyh54o" }, defaultClass: "uv_x6hyh54j" } }, responsiveArray: void 0 }, justifyContent: { values: { normal: { conditions: { xxsmall: "uv_x6hyh54p", xsmall: "uv_x6hyh54q", small: "uv_x6hyh54r", medium: "uv_x6hyh54s", large: "uv_x6hyh54t", xlarge: "uv_x6hyh54u" }, defaultClass: "uv_x6hyh54p" }, center: { conditions: { xxsmall: "uv_x6hyh54v", xsmall: "uv_x6hyh54w", small: "uv_x6hyh54x", medium: "uv_x6hyh54y", large: "uv_x6hyh54z", xlarge: "uv_x6hyh550" }, defaultClass: "uv_x6hyh54v" }, start: { conditions: { xxsmall: "uv_x6hyh551", xsmall: "uv_x6hyh552", small: "uv_x6hyh553", medium: "uv_x6hyh554", large: "uv_x6hyh555", xlarge: "uv_x6hyh556" }, defaultClass: "uv_x6hyh551" }, end: { conditions: { xxsmall: "uv_x6hyh557", xsmall: "uv_x6hyh558", small: "uv_x6hyh559", medium: "uv_x6hyh55a", large: "uv_x6hyh55b", xlarge: "uv_x6hyh55c" }, defaultClass: "uv_x6hyh557" }, "flex-start": { conditions: { xxsmall: "uv_x6hyh55d", xsmall: "uv_x6hyh55e", small: "uv_x6hyh55f", medium: "uv_x6hyh55g", large: "uv_x6hyh55h", xlarge: "uv_x6hyh55i" }, defaultClass: "uv_x6hyh55d" }, "flex-end": { conditions: { xxsmall: "uv_x6hyh55j", xsmall: "uv_x6hyh55k", small: "uv_x6hyh55l", medium: "uv_x6hyh55m", large: "uv_x6hyh55n", xlarge: "uv_x6hyh55o" }, defaultClass: "uv_x6hyh55j" }, left: { conditions: { xxsmall: "uv_x6hyh55p", xsmall: "uv_x6hyh55q", small: "uv_x6hyh55r", medium: "uv_x6hyh55s", large: "uv_x6hyh55t", xlarge: "uv_x6hyh55u" }, defaultClass: "uv_x6hyh55p" }, right: { conditions: { xxsmall: "uv_x6hyh55v", xsmall: "uv_x6hyh55w", small: "uv_x6hyh55x", medium: "uv_x6hyh55y", large: "uv_x6hyh55z", xlarge: "uv_x6hyh560" }, defaultClass: "uv_x6hyh55v" }, "space-between": { conditions: { xxsmall: "uv_x6hyh561", xsmall: "uv_x6hyh562", small: "uv_x6hyh563", medium: "uv_x6hyh564", large: "uv_x6hyh565", xlarge: "uv_x6hyh566" }, defaultClass: "uv_x6hyh561" }, "space-around": { conditions: { xxsmall: "uv_x6hyh567", xsmall: "uv_x6hyh568", small: "uv_x6hyh569", medium: "uv_x6hyh56a", large: "uv_x6hyh56b", xlarge: "uv_x6hyh56c" }, defaultClass: "uv_x6hyh567" }, "space-evenly": { conditions: { xxsmall: "uv_x6hyh56d", xsmall: "uv_x6hyh56e", small: "uv_x6hyh56f", medium: "uv_x6hyh56g", large: "uv_x6hyh56h", xlarge: "uv_x6hyh56i" }, defaultClass: "uv_x6hyh56d" }, stretch: { conditions: { xxsmall: "uv_x6hyh56j", xsmall: "uv_x6hyh56k", small: "uv_x6hyh56l", medium: "uv_x6hyh56m", large: "uv_x6hyh56n", xlarge: "uv_x6hyh56o" }, defaultClass: "uv_x6hyh56j" } }, responsiveArray: void 0 } } };
   x.styles.gap.responsiveArray = x.conditions.responsiveArray;
   x.styles.alignItems.responsiveArray = x.conditions.responsiveArray;
   x.styles.justifyContent.responsiveArray = x.conditions.responsiveArray;
   return x;
-}();
+})();
 var sprinkles = createSprinkles(responsiveProperties);
 export {
   responsiveProperties,

package/dist/components/SearchInput/KeyGroup.d.ts

@@ -5,5 +5,5 @@ type KeyGroupProps = {
     disabled: ComponentProps<typeof Key>['disabled'];
     onClick?: () => void;
 };
-export declare const KeyGroup: ({ keys, disabled, onClick }: KeyGroupProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const KeyGroup: ({ keys, disabled, onClick }: KeyGroupProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/SearchInput/KeyGroup.js

@@ -1,13 +1,9 @@
 "use client";
-import { jsx } from "@emotion/react/jsx-runtime";
+import { jsx } from "react/jsx-runtime";
 import { Key } from "../Key/index.js";
 import { Stack } from "../Stack/index.js";
 import { clickableStack } from "./styles.css.js";
-const KeyGroup = ({
-  keys,
-  disabled,
-  onClick
-}) => /* @__PURE__ */ jsx(Stack, { className: clickableStack, direction: "row", gap: 0.5, onClick, children: keys.map((key) => /* @__PURE__ */ jsx(Key, { "data-testid": `key-${key}`, disabled, children: key }, key)) });
+const KeyGroup = ({ keys, disabled, onClick }) => /* @__PURE__ */ jsx(Stack, { className: clickableStack, direction: "row", gap: 0.5, onClick, children: keys.map((key) => /* @__PURE__ */ jsx(Key, { "data-testid": `key-${key}`, disabled, children: key }, key)) });
 export {
   KeyGroup
 };