@ultraviolet/ui 3.3.1 → 3.5.0

package/dist/components/Checkbox/index.js

@@ -108,8 +108,8 @@ const Checkbox = forwardRef(
               y: "11"
             }
           ) }) }),
-          !children && !required && !helper && !error ? null : /* @__PURE__ */ jsxs(Stack, { flex: 1, gap: 0.5, children: [
-            !children && !required ? null : /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", flex: 1, gap: 0.5, children: [
+          children || required || helper || error ? /* @__PURE__ */ jsxs(Stack, { flex: 1, gap: 0.5, children: [
+            children || required ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", flex: 1, gap: 0.5, children: [
               children ? /* @__PURE__ */ jsx(Fragment, { children: typeof children === "string" ? /* @__PURE__ */ jsx(
                 Text,
                 {
@@ -123,7 +123,7 @@ const Checkbox = forwardRef(
                 }
               ) : /* @__PURE__ */ jsx("label", { className: label, htmlFor: localId, children }) }) : null,
               required ? /* @__PURE__ */ jsx(Text, { as: "sup", sentiment: "danger", variant: "body", children: "*" }) : null
-            ] }),
+            ] }) : null,
             helper ? /* @__PURE__ */ jsx(
               Text,
               {
@@ -144,7 +144,7 @@ const Checkbox = forwardRef(
                 children: error
               }
             ) : null
-          ] })
+          ] }) : null
         ]
       }
     ) });

package/dist/components/Chip/ChipIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChipIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/ChipIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,IAAI,MAAM,oBAAoB,CAAA;AAG1C,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAA;AAIjE,KAAK,QAAQ,GAAG,8BAA8B,CAAC,MAAM,OAAO,IAAI,EAAE,MAAM,CAAC,CAAA;AAEzE,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,+CAItB,YAAY,4CA2Dd,CAAA"}
+{"version":3,"file":"ChipIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/ChipIcon.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,IAAI,MAAM,oBAAoB,CAAA;AAG1C,OAAO,KAAK,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAA;AAIjE,KAAK,QAAQ,GAAG,8BAA8B,CAAC,MAAM,OAAO,IAAI,EAAE,MAAM,CAAC,CAAA;AAEzE,KAAK,YAAY,GAAG;IAClB;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,aAAa,CAAC,EAAE,MAAM,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,+CAItB,YAAY,4CA4Dd,CAAA"}

package/dist/components/Chip/ChipIcon.js

@@ -14,7 +14,10 @@ const ChipIcon = ({
     throw new Error("Chip.Icon can only be used inside a Chip component");
   }
   const { disabled, isActive, iconRef } = context;
-  const IconUsed = Icon[`${name.charAt(0).toUpperCase() + name.slice(1)}Icon`];
+  const IconUsed = (
+    // biome-ignore lint/performance/noDynamicNamespaceImportAccess: to fix
+    Icon[`${name.charAt(0).toUpperCase() + name.slice(1)}Icon`]
+  );
   if (onClick) {
     return /* @__PURE__ */ jsx(
       "button",

package/dist/components/CopyButton/index.js

@@ -35,7 +35,7 @@ const CopyButton = ({
       style,
       tooltip: isCopied ? copiedText : copyText,
       type: "button",
-      variant: !bordered ? "ghost" : "outlined",
+      variant: bordered ? "outlined" : "ghost",
       children: [
         isCopied ? /* @__PURE__ */ jsx(CheckIcon, {}) : /* @__PURE__ */ jsx(CopyContentIcon, {}),
         children

package/dist/components/DateInput/components/CalendarContent.js

@@ -32,15 +32,15 @@ const CalendarContent = () => {
           disabled: !!(minDate && minDate > new Date(yearToShow, monthToShow - 1, 0)) || disabled,
           onClick: () => {
             if ((!minDate || minDate <= new Date(yearToShow, monthToShow - 1, 0)) && !readOnly) {
-              if (!showMonthYearPicker) {
+              if (showMonthYearPicker) {
+                setYearToShow(yearToShow - 1);
+              } else {
                 const [prevMonth, year] = getPreviousMonth(
                   monthToShow,
                   yearToShow
                 );
                 setMonthToShow(prevMonth);
                 setYearToShow(year);
-              } else {
-                setYearToShow(yearToShow - 1);
               }
             }
           },
@@ -59,7 +59,7 @@ const CalendarContent = () => {
           sentiment: "neutral",
           variant: "bodyStrong",
           children: [
-            !showMonthYearPicker ? MONTHS_ARR[monthToShow - 1] : null,
+            showMonthYearPicker ? null : MONTHS_ARR[monthToShow - 1],
             " ",
             yearToShow
           ]
@@ -72,12 +72,12 @@ const CalendarContent = () => {
           disabled: !!(maxDate && maxDate < new Date(yearToShow, monthToShow, 1)) || disabled,
           onClick: () => {
             if ((!maxDate || maxDate >= new Date(yearToShow, monthToShow, 1)) && !readOnly) {
-              if (!showMonthYearPicker) {
+              if (showMonthYearPicker) {
+                setYearToShow(yearToShow + 1);
+              } else {
                 const [monthNext, year] = getNextMonth(monthToShow, yearToShow);
                 setMonthToShow(monthNext);
                 setYearToShow(year);
-              } else {
-                setYearToShow(yearToShow + 1);
               }
             }
           },

package/dist/components/DateInput/components/CalendarDaily.js

@@ -179,7 +179,7 @@ const Daily = () => {
           "data-testid": createTestId(),
           disabled: disabled || isExcluded || isOutsideRange,
           onClick: (event) => {
-            if (!isExcluded && !isOutsideRange && !readOnly) {
+            if (!(isExcluded || isOutsideRange || readOnly)) {
               const newDate = getNewDate();
               if (selectsRange) {
                 onClickRange(event, newDate);

package/dist/components/DateInput/components/CalendarMonthly.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalendarMonthly.d.ts","sourceRoot":"","sources":["../../../../src/components/DateInput/components/CalendarMonthly.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,OAAO,+CAgKnB,CAAA"}
+{"version":3,"file":"CalendarMonthly.d.ts","sourceRoot":"","sources":["../../../../src/components/DateInput/components/CalendarMonthly.tsx"],"names":[],"mappings":"AAaA,eAAO,MAAM,OAAO,+CAgKnB,CAAA"}

package/dist/components/DateInput/components/CalendarMonthly.js

@@ -101,7 +101,7 @@ const Monthly = () => {
         className: cn(dayMonth, capitalizedText),
         disabled: disabled || isExcluded || isOutsideRange,
         onClick: (event) => {
-          if (!isExcluded && !isOutsideRange && !readOnly) {
+          if (!(isExcluded || isOutsideRange || readOnly)) {
             if (selectsRange) {
               onClickRange(event, constructedDate);
             } else {

package/dist/components/DateInput/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/helpers.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM,EAAE,MAAM,MAAM,WAK3D,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,OAAO,MAAM,WAAgC,CAAA;AAErE,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM,EAAE,MAAM,MAAM,aAM3D,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,MAAM,MAAM,aAMvD,CAAA;AAGD,eAAO,MAAM,WAAW,GAAI,MAAM,IAAI,EAAE,UAAU,IAAI,YAEP,CAAA;AAG/C,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,EAAE,UAAU,IAAI,YAGL,CAAA;AAmB/C,eAAO,MAAM,WAAW,GACtB,eAAe,IAAI,GAAG,IAAI,EAC1B,eAAe;IACb,KAAK,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAA;CACjB,GAAG,IAAI,EACR,qBAAqB,OAAO,EAC5B,cAAc,OAAO,EACrB,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,MAAM,GAAG,SAAS,uBAsB9C,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,EAAE,qBAAqB,OAAO,gBAkBrE,CAAA;AAED,eAAO,MAAM,eAAe,GAC1B,OAAO,MAAM,EACb,qBAAqB,OAAO,+BAgB7B,CAAA"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/components/DateInput/helpers.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM,EAAE,MAAM,MAAM,WAK3D,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,OAAO,MAAM,WAAgC,CAAA;AAErE,eAAO,MAAM,gBAAgB,GAAI,OAAO,MAAM,EAAE,MAAM,MAAM,aAM3D,CAAA;AAED,eAAO,MAAM,YAAY,GAAI,OAAO,MAAM,EAAE,MAAM,MAAM,aAMvD,CAAA;AAGD,eAAO,MAAM,WAAW,GAAI,MAAM,IAAI,EAAE,UAAU,IAAI,YAEP,CAAA;AAG/C,eAAO,MAAM,SAAS,GAAI,MAAM,IAAI,EAAE,UAAU,IAAI,YAGL,CAAA;AAmB/C,eAAO,MAAM,WAAW,GACtB,eAAe,IAAI,GAAG,IAAI,EAC1B,eAAe;IACb,KAAK,EAAE,IAAI,GAAG,IAAI,CAAA;IAClB,GAAG,EAAE,IAAI,GAAG,IAAI,CAAA;CACjB,GAAG,IAAI,EACR,qBAAqB,OAAO,EAC5B,cAAc,OAAO,EACrB,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,KAAK,MAAM,GAAG,SAAS,uBAsB9C,CAAA;AAED,eAAO,MAAM,UAAU,GAAI,OAAO,MAAM,EAAE,qBAAqB,OAAO,gBAmBrE,CAAA;AAED,eAAO,MAAM,eAAe,GAC1B,OAAO,MAAM,EACb,qBAAqB,OAAO,+BAgB7B,CAAA"}

package/dist/components/Dialog/components/Buttons.js

@@ -4,7 +4,7 @@ import { Stack } from "../../Stack/index.js";
 const DialogButtons = ({
   secondaryButton,
   primaryButton
-}) => /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, justifyContent: "end", children: [
+}) => /* @__PURE__ */ jsxs(Stack, { direction: "row", gap: 2, justifyContent: "flex-end", children: [
   secondaryButton,
   primaryButton
 ] });

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

@@ -43,11 +43,11 @@ export declare const Dialog: (({ ariaLabel, className, children, "data-testid":
         onKeyDown?: import("react").ButtonHTMLAttributes<HTMLButtonElement>["onKeyDown"];
         style?: import("react").CSSProperties;
     } & {
-        size?: "large" | "medium" | "small" | "xsmall" | undefined;
+        disabled?: boolean | undefined;
         fullWidth?: boolean | undefined;
         sentiment?: "primary" | "secondary" | "neutral" | "success" | "danger" | "warning" | "info" | "white" | "black" | undefined;
+        size?: "large" | "medium" | "small" | "xsmall" | undefined;
         variant?: "filled" | "outlined" | "ghost" | undefined;
-        disabled?: boolean | undefined;
     } & {
         children: import("react").ReactNode;
         name?: string;

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

@@ -1,7 +1,7 @@
 /* empty css                                                     */
 /* empty css                                 */
 /* empty css                          */
-var drawer = { small: "uv_1iezf7y3", medium: "uv_1iezf7y4", large: "uv_1iezf7y5" };
+var drawer = { large: "uv_1iezf7y3", medium: "uv_1iezf7y4", small: "uv_1iezf7y5" };
 var drawerContentWrapper = "uv_1iezf7y6";
 var drawerChildrenWrapper = "uv_1iezf7y7";
 var drawerContent = "uv_1iezf7y8";

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

@@ -5,22 +5,22 @@ declare const CONTAINER_SIZES: {
 };
 export type SizesTypes = keyof typeof CONTAINER_SIZES;
 export declare const emptyStateContainer: import("@vanilla-extract/recipes").RuntimeFn<{
-    size: {
-        small: {
-            maxWidth: "45rem";
-        };
-        medium: {
-            maxWidth: "45rem";
+    bordered: {
+        true: {
+            border: `1px solid var(--${string})`;
+            borderRadius: `var(--${string})`;
         };
+    };
+    size: {
         large: {
             maxWidth: "71.25rem";
             padding: "0 8.75rem";
         };
-    };
-    bordered: {
-        true: {
-            border: `1px solid var(--${string})`;
-            borderRadius: `var(--${string})`;
+        medium: {
+            maxWidth: "45rem";
+        };
+        small: {
+            maxWidth: "45rem";
         };
     };
 }>;

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

@@ -1,8 +1,8 @@
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var emptyStateContainer = createRuntimeFn({ defaultClassName: "uv_a1urqq0", variantClassNames: { size: { small: "uv_a1urqq1", medium: "uv_a1urqq2", large: "uv_a1urqq3" }, bordered: { true: "uv_a1urqq4" } }, defaultVariants: { bordered: false, size: "large" }, compoundVariants: [] });
+var emptyStateContainer = createRuntimeFn({ defaultClassName: "uv_a1urqq0", variantClassNames: { bordered: { true: "uv_a1urqq1" }, size: { large: "uv_a1urqq2", medium: "uv_a1urqq3", small: "uv_a1urqq4" } }, defaultVariants: { bordered: false, size: "large" }, compoundVariants: [] });
 var paddedStack = "uv_a1urqq5";
-var emptyStateImage = { small: "uv_a1urqq6", medium: "uv_a1urqq7", large: "uv_a1urqq8" };
+var emptyStateImage = { large: "uv_a1urqq6", medium: "uv_a1urqq7", small: "uv_a1urqq8" };
 export {
   emptyStateContainer,
   emptyStateImage,

package/dist/components/Expandable/index.js

@@ -17,7 +17,7 @@ const NoAnimationExpandable = ({
   {
     className,
     "data-testid": dataTestId,
-    style: { display: !opened ? "none" : void 0, minHeight, ...style },
+    style: { display: opened ? void 0 : "none", minHeight, ...style },
     children
   }
 );

package/dist/components/ExpandableCard/styles.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableCard/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAEpB,CAAA;AAEF,eAAO,MAAM,YAAY,QA4BvB,CAAA;AAEF,eAAO,MAAM,YAAY,QAgBvB,CAAA;AAEF,eAAO,MAAM,YAAY,QAgBvB,CAAA;AAEF,eAAO,MAAM,OAAO,QAQlB,CAAA;AAKF,eAAO,MAAM,UAAU,QAErB,CAAA;AAMF,eAAO,MAAM,iBAAiB,QAoB5B,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/ExpandableCard/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,SAAS,QAEpB,CAAA;AAEF,eAAO,MAAM,YAAY,QA2BvB,CAAA;AAEF,eAAO,MAAM,YAAY,QAgBvB,CAAA;AAEF,eAAO,MAAM,YAAY,QAevB,CAAA;AAEF,eAAO,MAAM,OAAO,QAQlB,CAAA;AAKF,eAAO,MAAM,UAAU,QAErB,CAAA;AAMF,eAAO,MAAM,iBAAiB,QAmB5B,CAAA"}

package/dist/components/FileInput/index.js

@@ -248,7 +248,7 @@ const FileInputBase = ({
                 /* @__PURE__ */ jsx(
                   Text,
                   {
-                    as: isSmall ? "label" : "p",
+                    as: isSmall ? "label" : "div",
                     className: isSmall ? titleSmall[disabled ? "disabled" : "default"] : void 0,
                     disabled,
                     htmlFor: inputId,

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

@@ -1,22 +1,22 @@
 export declare const dropzone: import("@vanilla-extract/recipes").RuntimeFn<{
-    state: {
-        over: {};
-        default: {};
-        page: {};
+    disabled: {
+        true: {
+            background: `var(--${string})`;
+            cursor: "not-allowed";
+        };
     };
     size: {
-        small: {
+        medium: {
             padding: `var(--${string})`;
         };
-        medium: {
+        small: {
             padding: `var(--${string})`;
         };
     };
-    disabled: {
-        true: {
-            cursor: "not-allowed";
-            background: `var(--${string})`;
-        };
+    state: {
+        default: {};
+        over: {};
+        page: {};
     };
 }>;
 export declare const fileInput: string;

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

@@ -1,13 +1,13 @@
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var dropzone = createRuntimeFn({ defaultClassName: "uv_12cubgs0", variantClassNames: { state: { over: "uv_12cubgs1", "default": "uv_12cubgs2", page: "uv_12cubgs3" }, size: { small: "uv_12cubgs4", medium: "uv_12cubgs5" }, disabled: { true: "uv_12cubgs6" } }, defaultVariants: { state: "default", size: "medium", disabled: false }, compoundVariants: [[{ disabled: false, state: "over" }, "uv_12cubgs7"]] });
+var dropzone = createRuntimeFn({ defaultClassName: "uv_12cubgs0", variantClassNames: { disabled: { true: "uv_12cubgs1" }, size: { medium: "uv_12cubgs2", small: "uv_12cubgs3" }, state: { "default": "uv_12cubgs4", over: "uv_12cubgs5", page: "uv_12cubgs6" } }, defaultVariants: { disabled: false, size: "medium", state: "default" }, compoundVariants: [[{ disabled: false, state: "over" }, "uv_12cubgs7"]] });
 var fileInput = "uv_12cubgs8";
 var titleSmall = { "default": "uv_12cubgs9", disabled: "uv_12cubgsa" };
 var overlayWrapper = "uv_12cubgsb";
-var dropzoneOverlay = { over: "uv_12cubgsd uv_12cubgsc", "default": "uv_12cubgse uv_12cubgsc", page: "uv_12cubgsf uv_12cubgsc" };
-var dropzoneOverlayDisabled = { over: "uv_12cubgsh uv_12cubgsg", "default": "uv_12cubgsi", page: "uv_12cubgsj uv_12cubgsg" };
-var fileViewerContainer = { error: "uv_12cubgsl uv_12cubgsk", "default": "uv_12cubgsm uv_12cubgsk", strong: "uv_12cubgsn uv_12cubgsk" };
-var fileViewerImage = { error: "uv_12cubgsp uv_12cubgso", "default": "uv_12cubgsq uv_12cubgso" };
+var dropzoneOverlay = { "default": "uv_12cubgsd uv_12cubgsc", over: "uv_12cubgse uv_12cubgsc", page: "uv_12cubgsf uv_12cubgsc" };
+var dropzoneOverlayDisabled = { "default": "uv_12cubgsh", over: "uv_12cubgsi uv_12cubgsg", page: "uv_12cubgsj uv_12cubgsg" };
+var fileViewerContainer = { "default": "uv_12cubgsl uv_12cubgsk", error: "uv_12cubgsm uv_12cubgsk", strong: "uv_12cubgsn uv_12cubgsk" };
+var fileViewerImage = { "default": "uv_12cubgsp uv_12cubgso", error: "uv_12cubgsq uv_12cubgso" };
 var fileInfo = "uv_12cubgsr";
 export {
   dropzone,

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

@@ -1,6 +1,6 @@
 /* empty css                          */
 var closeButton = "uv_1dgk2tq0";
-var container = { info: "uv_1dgk2tq2 uv_1dgk2tq1", danger: "uv_1dgk2tq3 uv_1dgk2tq1", promotional: "uv_1dgk2tq4 uv_1dgk2tq1" };
+var container = { danger: "uv_1dgk2tq2 uv_1dgk2tq1", info: "uv_1dgk2tq3 uv_1dgk2tq1", promotional: "uv_1dgk2tq4 uv_1dgk2tq1" };
 export {
   closeButton,
   container

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

@@ -1,29 +1,29 @@
 export declare const key: import("@vanilla-extract/recipes").RuntimeFn<{
-    prominence: {
-        strong: {};
-        default: {};
-    };
     disabled: {
         true: {};
     };
+    prominence: {
+        default: {};
+        strong: {};
+    };
     sentiment: {
-        primary: {
-            backgroundColor: `var(--${string})`;
-            borderColor: `var(--${string})`;
-        };
         neutral: {
             background: `var(--${string})`;
             borderColor: `var(--${string})`;
         };
+        primary: {
+            backgroundColor: `var(--${string})`;
+            borderColor: `var(--${string})`;
+        };
     };
     size: {
-        small: {
-            minWidth: `var(--${string})`;
-            height: `var(--${string})`;
-        };
         medium: {
+            height: `var(--${string})`;
             minWidth: `var(--${string})`;
+        };
+        small: {
             height: `var(--${string})`;
+            minWidth: `var(--${string})`;
         };
     };
 }>;

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

@@ -1,6 +1,6 @@
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var key = createRuntimeFn({ defaultClassName: "uv_1g4bp0q0", variantClassNames: { prominence: { strong: "uv_1g4bp0q1", "default": "uv_1g4bp0q2" }, disabled: { true: "uv_1g4bp0q3" }, sentiment: { primary: "uv_1g4bp0q4", neutral: "uv_1g4bp0q5" }, size: { small: "uv_1g4bp0q6", medium: "uv_1g4bp0q7" } }, defaultVariants: { prominence: "default", disabled: false, size: "medium", sentiment: "neutral" }, compoundVariants: [[{ prominence: "strong", sentiment: "neutral" }, "uv_1g4bp0q8"], [{ sentiment: "neutral", prominence: "strong", disabled: true }, "uv_1g4bp0q9"], [{ disabled: true, sentiment: "neutral" }, "uv_1g4bp0qa"], [{ sentiment: "primary", prominence: "strong" }, "uv_1g4bp0qb"], [{ sentiment: "primary", prominence: "strong", disabled: true }, "uv_1g4bp0qc"], [{ disabled: true, sentiment: "primary" }, "uv_1g4bp0qd"]] });
+var key = createRuntimeFn({ defaultClassName: "uv_1g4bp0q0", variantClassNames: { disabled: { true: "uv_1g4bp0q1" }, prominence: { "default": "uv_1g4bp0q2", strong: "uv_1g4bp0q3" }, sentiment: { neutral: "uv_1g4bp0q4", primary: "uv_1g4bp0q5" }, size: { medium: "uv_1g4bp0q6", small: "uv_1g4bp0q7" } }, defaultVariants: { disabled: false, prominence: "default", sentiment: "neutral", size: "medium" }, compoundVariants: [[{ prominence: "strong", sentiment: "neutral" }, "uv_1g4bp0q8"], [{ disabled: true, prominence: "strong", sentiment: "neutral" }, "uv_1g4bp0q9"], [{ disabled: true, sentiment: "neutral" }, "uv_1g4bp0qa"], [{ prominence: "strong", sentiment: "primary" }, "uv_1g4bp0qb"], [{ disabled: true, prominence: "strong", sentiment: "primary" }, "uv_1g4bp0qc"], [{ disabled: true, sentiment: "primary" }, "uv_1g4bp0qd"]] });
 export {
   key
 };

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

@@ -14,10 +14,11 @@ type LabelProps = {
     sentiment?: ComponentProps<typeof Text>['sentiment'];
     disabled?: boolean;
     style?: CSSProperties;
+    className?: string;
 };
 /**
  * Label is used inside all of our input components, but it can be used outside for design purposes
  */
-export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, className, }: LabelProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Label/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAqE9B,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,WAAW,CAAC,CAAA;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,8FAWnB,UAAU,4CAoCV,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AA4E9B,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,WAAW,CAAC,CAAA;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,yGAYnB,UAAU,4CAqCV,CAAA"}

package/dist/components/Label/index.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/utils";
 import { useMemo } from "react";
 import { Stack } from "../Stack/index.js";
 import { Text } from "../Text/index.js";
@@ -13,7 +14,8 @@ const LabelRequiredOrNot = ({
   as,
   sentiment,
   disabled,
-  style
+  style,
+  className
 }) => {
   const textPointerValue = useMemo(() => {
     if (disabled) {
@@ -25,38 +27,48 @@ const LabelRequiredOrNot = ({
     return "default";
   }, [disabled, htmlFor]);
   if (required) {
-    return /* @__PURE__ */ jsxs(Stack, { alignItems: "start", direction: "row", gap: "0.5", style, children: [
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          as: as === "label" ? "label" : "legend",
-          className: textPointer[textPointerValue],
-          disabled,
-          htmlFor,
-          id,
-          sentiment,
-          variant: size === "large" ? "bodyStrong" : "bodySmallStrong",
-          children
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        Text,
-        {
-          "aria-label": "required",
-          as: "span",
-          disabled,
-          sentiment: "danger",
-          variant: size === "large" ? "bodyStrong" : "bodySmallStrong",
-          children: "*"
-        }
-      )
-    ] });
+    return /* @__PURE__ */ jsxs(
+      Stack,
+      {
+        alignItems: "flex-start",
+        className,
+        direction: "row",
+        gap: "0.5",
+        style,
+        children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: as === "label" ? "label" : "legend",
+              className: textPointer[textPointerValue],
+              disabled,
+              htmlFor,
+              id,
+              sentiment,
+              variant: size === "large" ? "bodyStrong" : "bodySmallStrong",
+              children
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              "aria-label": "required",
+              as: "span",
+              disabled,
+              sentiment: "danger",
+              variant: size === "large" ? "bodyStrong" : "bodySmallStrong",
+              children: "*"
+            }
+          )
+        ]
+      }
+    );
   }
   return /* @__PURE__ */ jsx(
     Text,
     {
       as: as === "label" ? "label" : "legend",
-      className: textPointer[textPointerValue],
+      className: cn(textPointer[textPointerValue], className),
       disabled,
       htmlFor,
       id,
@@ -77,8 +89,9 @@ const Label = ({
   id,
   sentiment = "neutral",
   disabled,
-  style
-}) => labelDescription ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1", children: [
+  style,
+  className
+}) => labelDescription ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className, direction: "row", gap: "1", children: [
   /* @__PURE__ */ jsx(
     LabelRequiredOrNot,
     {
@@ -98,6 +111,7 @@ const Label = ({
   LabelRequiredOrNot,
   {
     as,
+    className,
     disabled,
     htmlFor,
     id,

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

@@ -1,5 +1,5 @@
 /* empty css                          */
-var textPointer = { disabled: "uv_17td3g90", htmlFor: "uv_17td3g91", "default": "uv_17td3g92" };
+var textPointer = { "default": "uv_17td3g90", disabled: "uv_17td3g91", htmlFor: "uv_17td3g92" };
 export {
   textPointer
 };

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

@@ -1,62 +1,69 @@
 export declare const link: import("@vanilla-extract/recipes").RuntimeFn<{
+    oneLine: {
+        false: {
+            width: "fit-content";
+        };
+        true: {
+            display: "block";
+            overflow: "hidden";
+            textOverflow: "ellipsis";
+            whiteSpace: "nowrap";
+        };
+    };
+    prominence: {
+        [k: string]: {};
+    };
     sentiment: {
-        primary: {
+        info: {
             selectors: {
-                '&:hover::after': {
+                '&:focus::after': {
                     backgroundColor: `var(--${string})`;
                 };
-                '&:focus::after': {
+                '&:hover::after': {
                     backgroundColor: `var(--${string})`;
                 };
             };
         };
-        info: {
+        primary: {
             selectors: {
-                '&:hover::after': {
+                '&:focus::after': {
                     backgroundColor: `var(--${string})`;
                 };
-                '&:focus::after': {
+                '&:hover::after': {
                     backgroundColor: `var(--${string})`;
                 };
             };
         };
     };
-    prominence: {
-        [k: string]: {};
-    };
-    oneLine: {
-        true: {
-            whiteSpace: "nowrap";
-            textOverflow: "ellipsis";
-            overflow: "hidden";
-            display: "block";
-        };
-        false: {
-            width: "fit-content";
+    type: {
+        inline: {
+            textDecoration: "underline";
+            textDecorationThickness: number;
         };
+        standalone: {};
     };
     variant: {
-        captionStrong: {
-            fontSize: `var(--${string})`;
+        bodySmallStrong: {
             fontFamily: `var(--${string})`;
+            fontSize: `var(--${string})`;
             fontWeight: `var(--${string})`;
             letterSpacing: `var(--${string})`;
             lineHeight: `var(--${string})`;
             paragraphSpacing: `var(--${string})`;
             textCase: `var(--${string})`;
         };
-        bodySmallStrong: {
-            fontSize: `var(--${string})`;
+        bodyStrong: {
             fontFamily: `var(--${string})`;
+            fontSize: `var(--${string})`;
             fontWeight: `var(--${string})`;
             letterSpacing: `var(--${string})`;
             lineHeight: `var(--${string})`;
             paragraphSpacing: `var(--${string})`;
             textCase: `var(--${string})`;
         };
-        bodyStrong: {
-            fontSize: `var(--${string})`;
+        captionStrong: {
             fontFamily: `var(--${string})`;
+            fontSize: `var(--${string})`;
             fontWeight: `var(--${string})`;
             letterSpacing: `var(--${string})`;
             lineHeight: `var(--${string})`;
@@ -64,13 +71,6 @@ export declare const link: import("@vanilla-extract/recipes").RuntimeFn<{
             textCase: `var(--${string})`;
         };
     };
-    type: {
-        inline: {
-            textDecoration: "underline";
-            textDecorationThickness: number;
-        };
-        standalone: {};
-    };
 }>;
 export declare const containerIconLink: string;
 export declare const defaultLink: string;

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

@@ -1,6 +1,6 @@
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
-var link = createRuntimeFn({ defaultClassName: "uv_1dtqm9e0", variantClassNames: { sentiment: { primary: "uv_1dtqm9e1", info: "uv_1dtqm9e2" }, prominence: { "default": "uv_1dtqm9e3", strong: "uv_1dtqm9e4", stronger: "uv_1dtqm9e5", weak: "uv_1dtqm9e6" }, oneLine: { true: "uv_1dtqm9e7", false: "uv_1dtqm9e8" }, variant: { captionStrong: "uv_1dtqm9e9", bodySmallStrong: "uv_1dtqm9ea", bodyStrong: "uv_1dtqm9eb" }, type: { inline: "uv_1dtqm9ec", standalone: "uv_1dtqm9ed" } }, defaultVariants: { prominence: "default", sentiment: "info", oneLine: false, variant: "bodyStrong", type: "standalone" }, compoundVariants: [[{ sentiment: "primary", prominence: "default" }, "uv_1dtqm9ee"], [{ sentiment: "primary", prominence: "strong" }, "uv_1dtqm9ef"], [{ sentiment: "primary", prominence: "stronger" }, "uv_1dtqm9eg"], [{ sentiment: "primary", prominence: "weak" }, "uv_1dtqm9eh"], [{ sentiment: "info", prominence: "default" }, "uv_1dtqm9ei"], [{ sentiment: "info", prominence: "strong" }, "uv_1dtqm9ej"], [{ sentiment: "info", prominence: "stronger" }, "uv_1dtqm9ek"], [{ sentiment: "info", prominence: "weak" }, "uv_1dtqm9el"]] });
+var link = createRuntimeFn({ defaultClassName: "uv_1dtqm9e0", variantClassNames: { oneLine: { false: "uv_1dtqm9e1", true: "uv_1dtqm9e2" }, prominence: { "default": "uv_1dtqm9e3", strong: "uv_1dtqm9e4", stronger: "uv_1dtqm9e5", weak: "uv_1dtqm9e6" }, sentiment: { info: "uv_1dtqm9e7", primary: "uv_1dtqm9e8" }, type: { inline: "uv_1dtqm9e9", standalone: "uv_1dtqm9ea" }, variant: { bodySmallStrong: "uv_1dtqm9eb", bodyStrong: "uv_1dtqm9ec", captionStrong: "uv_1dtqm9ed" } }, defaultVariants: { oneLine: false, prominence: "default", sentiment: "info", type: "standalone", variant: "bodyStrong" }, compoundVariants: [[{ prominence: "default", sentiment: "primary" }, "uv_1dtqm9ee"], [{ prominence: "strong", sentiment: "primary" }, "uv_1dtqm9ef"], [{ prominence: "stronger", sentiment: "primary" }, "uv_1dtqm9eg"], [{ prominence: "weak", sentiment: "primary" }, "uv_1dtqm9eh"], [{ prominence: "default", sentiment: "info" }, "uv_1dtqm9ei"], [{ prominence: "strong", sentiment: "info" }, "uv_1dtqm9ej"], [{ prominence: "stronger", sentiment: "info" }, "uv_1dtqm9ek"], [{ prominence: "weak", sentiment: "info" }, "uv_1dtqm9el"]] });
 var containerIconLink = "uv_1dtqm9em";
 var defaultLink = "uv_1dtqm9en";
 var iconLeftLink = "uv_1dtqm9eo";