@ultraviolet/ui 3.1.0 → 3.2.0

package/dist/components/SelectableCardOptionGroup/{index.js → SelectableCardOptionGroup.js}

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/themes";
 import { useMemo } from "react";
 import { Label } from "../Label/index.js";
 import { Row } from "../Row/index.js";
@@ -8,7 +9,7 @@ import { Text } from "../Text/index.js";
 import { Option } from "./components/Option.js";
 import { SelectableCardOptionGroupContext } from "./Provider.js";
 import { selectableCardOptionFieldSet } from "./styles.css.js";
-const SelectableCardOptionGroup = ({
+const SelectableCardOptionGroupComponent = ({
   legend,
   legendDescription,
   className,
@@ -51,24 +52,18 @@ const SelectableCardOptionGroup = ({
     ]
   );
   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 })
-        ] })
-      }
-    ),
+    /* @__PURE__ */ jsx("fieldset", { className: cn(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,
       {
@@ -81,7 +76,9 @@ const SelectableCardOptionGroup = ({
     ) : null
   ] }) });
 };
-SelectableCardOptionGroup.Option = Option;
+const SelectableCardOptionGroup = Object.assign(SelectableCardOptionGroupComponent, {
+  Option
+});
 export {
   SelectableCardOptionGroup
 };

package/dist/components/SelectableCardOptionGroup/components/Image.d.ts

@@ -8,3 +8,4 @@ type ImageType = {
 };
 export declare const Image: ({ src, alt, size, disabled, className }: ImageType) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=Image.d.ts.map

package/dist/components/SelectableCardOptionGroup/components/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectableCardOptionGroup/components/Image.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAOrC,KAAK,SAAS,GAAG;IACf,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,KAAK,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,KAAK,GAAI,yCAAyC,SAAS,4CASvE,CAAA"}

package/dist/components/SelectableCardOptionGroup/components/Image.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/themes";
 import { disabledImage } from "../styles.css.js";
 const IMAGE_SIZES = {
   large: 56,
@@ -9,7 +10,7 @@ const Image = ({ src, alt, size, disabled, className }) => /* @__PURE__ */ jsx(
   "img",
   {
     alt,
-    className: `${className ? `${className} ` : ""}${disabled ? disabledImage : ""}`,
+    className: cn(className, disabled ? disabledImage : ""),
     "data-disabled": disabled,
     height: IMAGE_SIZES[size],
     src,

package/dist/components/SelectableCardOptionGroup/components/Option.d.ts

@@ -17,3 +17,4 @@ type OptionProps = Omit<ComponentProps<typeof SelectableCard>, 'onChange'> & {
 };
 export declare const Option: ({ value, label, labelDescription, "aria-label": ariaLabel, children, className, options, optionPlaceholder, image, disabled, id, "data-testid": dataTestId, tooltip, style, }: OptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=Option.d.ts.map

package/dist/components/SelectableCardOptionGroup/components/Option.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectableCardOptionGroup/components/Option.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AACrD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAa/C,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E,KAAK,EAAE,MAAM,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,OAAO,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,SAAS,CAAC,CAAA;IACtD,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,OAAO,CAAC,CAAA;IACzD,iBAAiB,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,aAAa,CAAC,CAAA;IACrE,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,gBAAgB,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,kBAAkB,CAAC,CAAA;IACnE,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,CAAA;AAED,eAAO,MAAM,MAAM,GAAI,+KAepB,WAAW,4CAwGb,CAAA"}

package/dist/components/SelectableCardOptionGroup/components/Option.js

@@ -1,12 +1,13 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/themes";
 import { useId } from "react";
 import { Label } from "../../Label/index.js";
 import { SelectableCard } from "../../SelectableCard/index.js";
 import { SelectInput } from "../../SelectInput/index.js";
 import { Stack } from "../../Stack/index.js";
 import { useSelectableCardOptionGroup } from "../Provider.js";
-import { selectableCard, optionFullHeight, optionPadded, optionSelectInput, optionSelectInputDisabled, optionSelectInputError } from "../styles.css.js";
+import { optionFullHeight, optionPadded, optionSelectInput, optionSelectInputDisabled, optionSelectInputError, selectableCard } from "../styles.css.js";
 import { Image } from "./Image.js";
 const Option = ({
   value,
@@ -39,7 +40,7 @@ const Option = ({
     SelectableCard,
     {
       checked: groupValue === value,
-      className: `${className ? `${className} ` : ""}${selectableCard}`,
+      className: cn(className, selectableCard),
       "data-testid": dataTestId,
       disabled: disabled || groupDisabled,
       isError: error,
@@ -114,7 +115,11 @@ const Option = ({
               SelectInput,
               {
                 "aria-label": typeof label === "string" ? `${label} option` : `${value} option`,
-                className: `${optionSelectInput} ${disabled || groupDisabled ? optionSelectInputDisabled : ""} ${error ? optionSelectInputError : ""}`,
+                className: cn(
+                  optionSelectInput,
+                  disabled || groupDisabled ? optionSelectInputDisabled : "",
+                  error ? optionSelectInputError : ""
+                ),
                 "data-testid": dataTestId ? `${dataTestId}-select` : void 0,
                 disabled: disabled || groupDisabled,
                 error,

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

@@ -1,48 +1,2 @@
-import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react';
-import { Label } from '../Label';
-import { Option } from './components/Option';
-import type { Sizes } from './types';
-type SelectableCardOptionGroupProps = {
-    legend?: string;
-    legendDescription?: ReactNode;
-    className?: string;
-    required?: boolean;
-    columns?: number;
-    children: ReactNode;
-    helper?: ReactNode;
-    error?: ReactNode;
-    /**
-     * The value that is selected among selectable card options.
-     */
-    value?: ComponentProps<typeof Option>['value'];
-    /**
-     * The value that is selected among select input options.
-     */
-    optionValue?: ComponentProps<typeof Option>['optionValue'];
-    onChangeOption: (value: string) => void;
-    disabled?: boolean;
-    size?: Sizes;
-} & Required<Pick<InputHTMLAttributes<HTMLInputElement>, 'onChange'>> & Pick<InputHTMLAttributes<HTMLInputElement>, 'name' | 'style'>;
-/**
- * SelectableCardOptionGroup gives you a group of SelectInput within a SelectableCard component.
- * It's an input that provide the choice of one value and sub options to choose from.
- *
- * **Be aware that once you click on the component, the first value of options will be selected by default.**
- */
-export declare const SelectableCardOptionGroup: {
-    ({ legend, legendDescription, className, required, columns, children, helper, error, onChange, value, optionValue, onChangeOption, name, disabled, size, style, }: SelectableCardOptionGroupProps): import("react/jsx-runtime").JSX.Element;
-    Option: ({ value, label, labelDescription, "aria-label": ariaLabel, children, className, options, optionPlaceholder, image, disabled, id, "data-testid": dataTestId, tooltip, style, }: Omit<import("../SelectableCard").SelectableCardProps & import("react").RefAttributes<HTMLDivElement>, "onChange"> & {
-        value: string;
-        className?: string;
-        children?: ReactNode;
-        options: ComponentProps<typeof import("..").SelectInput>["options"];
-        optionValue?: ComponentProps<typeof import("..").SelectInput>["value"];
-        optionPlaceholder?: ComponentProps<typeof import("..").SelectInput>["placeholder"];
-        image?: ReactNode;
-        labelDescription?: ComponentProps<typeof Label>["labelDescription"];
-        id?: string;
-        'data-testid'?: string;
-        tooltip?: string;
-    }) => import("react/jsx-runtime").JSX.Element;
-};
-export {};
+export { SelectableCardOptionGroup } from './SelectableCardOptionGroup';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCardOptionGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAA"}

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

@@ -6,3 +6,4 @@ export declare const optionSelectInput: string;
 export declare const optionSelectInputDisabled: string;
 export declare const optionSelectInputError: string;
 export declare const optionPadded: string;
+//# sourceMappingURL=styles.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCardOptionGroup/styles.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,4BAA4B,QAIvC,CAAA;AAEF,eAAO,MAAM,aAAa,QAExB,CAAA;AAEF,eAAO,MAAM,cAAc,QAIzB,CAAA;AAQF,eAAO,MAAM,gBAAgB,QAA4B,CAAA;AAEzD,eAAO,MAAM,iBAAiB,QAAY,CAAA;AAC1C,eAAO,MAAM,yBAAyB,QAAY,CAAA;AAClD,eAAO,MAAM,sBAAsB,QAAY,CAAA;AA+B/C,eAAO,MAAM,YAAY,QAEvB,CAAA"}

package/dist/components/SelectableCardOptionGroup/types.d.ts

@@ -1 +1,2 @@
 export type Sizes = 'large' | 'medium';
+//# sourceMappingURL=types.d.ts.map

package/dist/components/SelectableCardOptionGroup/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCardOptionGroup/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,QAAQ,CAAA"}

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

@@ -12,3 +12,4 @@ type SeparatorProps = {
  */
 export declare const Separator: ({ direction, thickness, sentiment, className, "data-testid": dataTestId, children, style, }: SeparatorProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAA;AAGrD,KAAK,cAAc,GAAG;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,iBAAiB,CAAA;AAErB;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,6FAQvB,cAAc,4CAiCd,CAAA"}

package/dist/components/Separator/index.js

@@ -1,7 +1,8 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { iconWraperSeparator, hr, thicknessSeparator } from "./styles.css.js";
+import { hr, thicknessSeparator, iconWraperSeparator } from "./styles.css.js";
 const Separator = ({
   direction = "horizontal",
   thickness = 1,
@@ -14,7 +15,7 @@ const Separator = ({
   "div",
   {
     "aria-orientation": direction,
-    className: `${className ? `${className} ` : ""}${iconWraperSeparator({ direction, sentiment })}`,
+    className: cn(className, iconWraperSeparator({ direction, sentiment })),
     "data-testid": dataTestId,
     role: "separator",
     style,
@@ -44,7 +45,7 @@ const Separator = ({
   "hr",
   {
     "aria-orientation": direction,
-    className: `${className ? `${className} ` : ""}${hr({ direction, sentiment })}`,
+    className: cn(className, hr({ direction, sentiment })),
     "data-testid": dataTestId,
     role: "separator",
     style: assignInlineVars({

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

@@ -123,3 +123,4 @@ export declare const hr: import("@vanilla-extract/recipes").RuntimeFn<{
     };
 }>;
 export type SeparatorVariants = NonNullable<RecipeVariants<typeof iconWraperSeparator>>;
+//# sourceMappingURL=styles.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Separator/styles.css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAA;AAI9D,eAAO,MAAM,kBAAkB,oBAAc,CAAA;AAc7C,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8B9B,CAAA;AACF,eAAO,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkCb,CAAA;AAEF,MAAM,MAAM,iBAAiB,GAAG,WAAW,CACzC,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAC3C,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Block.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Block.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,KAAK,GAAI,YAAgB;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,4CAWxD,CAAA"}

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

@@ -2,3 +2,4 @@ export declare const Blocks: ({ col, length, }: {
     col?: number;
     length?: number;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Blocks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Blocks.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Blocks.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,MAAM,GAAI,kBAGpB;IACD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,4CAcA,CAAA"}

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

@@ -2,3 +2,4 @@ export declare const BoxWithIcon: ({ col, length, }: {
     col?: number;
     length?: number;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BoxWithIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BoxWithIcon.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/BoxWithIcon.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,WAAW,GAAI,kBAGzB;IACD,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,4CAcA,CAAA"}

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

@@ -1 +1,2 @@
 export declare const Donut: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Donut.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Donut.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Donut.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK,+CAyBjB,CAAA"}

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

@@ -1 +1,2 @@
 export declare const IconSkeleton: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=IconSkeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"IconSkeleton.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/IconSkeleton.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,+CAAyC,CAAA"}

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

@@ -1 +1,2 @@
 export declare const Line: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Line.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Line.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Line.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,IAAI,+CAOhB,CAAA"}

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

@@ -2,3 +2,4 @@ export declare const List: ({ length, col, }: {
     length?: number;
     col?: number;
 }) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=List.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/List.tsx"],"names":[],"mappings":"AAmBA,eAAO,MAAM,IAAI,GAAI,kBAGlB;IACD,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;CACb,4CAMA,CAAA"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Slider.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,MAAM,GAAI,YAAgB;IAAE,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,4CAazD,CAAA"}

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

@@ -1 +1,2 @@
 export declare const Square: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Square.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Square.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/Square.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM,+CAA2C,CAAA"}

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

@@ -40,3 +40,4 @@ type SkeletonProps = {
 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 {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAW1C,QAAA,MAAM,QAAQ;;cANP,CAAA;;;WACc,CAAC;cACb,CAAC;;;WAAD,CAAA;cAAiB,CAAC;;;;;cAIhB,CAAC;WACL,CAAC;;;cAPE,CAAC;;;CAeD,CAAA;AAEV,KAAK,eAAe,GAAG,MAAM,OAAO,QAAQ,CAAA;AAE5C,KAAK,aAAa,GAAG;IACnB,OAAO,CAAC,EAAE,eAAe,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,iGAQtB,aAAa,4CAiBf,CAAA;AAGD,eAAO,MAAM,aAAa,EAA4B,eAAe,EAAE,CAAA"}

package/dist/components/Skeleton/index.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/themes";
 import { Block } from "./Block.js";
 import { Blocks } from "./Blocks.js";
 import { BoxWithIcon } from "./BoxWithIcon.js";
@@ -8,7 +9,7 @@ import { Line } from "./Line.js";
 import { List } from "./List.js";
 import { Slider } from "./Slider.js";
 import { Square } from "./Square.js";
-import { skeletonContainer, skeletonHighlight } from "./styles.css.js";
+import { skeletonHighlight, skeletonContainer } from "./styles.css.js";
 const variants = {
   block: Block,
   blocks: Blocks,
@@ -35,7 +36,7 @@ const Skeleton = ({
       "aria-busy": true,
       "aria-label": ariaLabel,
       "aria-live": "polite",
-      className: `${className ? `${className} ` : ""}${skeletonContainer}`,
+      className: cn(className, skeletonContainer),
       "data-testid": dataTestId,
       style,
       children: [

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

@@ -1,2 +1,3 @@
 export declare const skeletonContainer: string;
 export declare const skeletonHighlight: string;
+//# sourceMappingURL=styles.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/styles.css.ts"],"names":[],"mappings":"AAgBA,eAAO,MAAM,iBAAiB,QAQ5B,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAqB5B,CAAA"}

package/dist/components/Skeleton/stylesVariants.css.d.ts

@@ -20,3 +20,4 @@ export declare const sliderSkeletonContainer: string;
 export declare const sliderSkeletonCard: string;
 export declare const sliderSkeletonBanner: string;
 export declare const squareSkeleton: string;
+//# sourceMappingURL=stylesVariants.css.d.ts.map

package/dist/components/Skeleton/stylesVariants.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stylesVariants.css.d.ts","sourceRoot":"","sources":["../../../src/components/Skeleton/stylesVariants.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,oBAAc,CAAA;AAClC,eAAO,MAAM,SAAS,oBAAc,CAAA;AACpC,eAAO,MAAM,YAAY,oBAAc,CAAA;AAEvC,eAAO,MAAM,WAAW,SAAS,CAAA;AAEjC,eAAO,MAAM,iBAAiB,QAS5B,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAQ5B,CAAA;AAEF,eAAO,MAAM,eAAe,QAI1B,CAAA;AAEF,eAAO,MAAM,cAAc,QAQzB,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAS9B,CAAA;AAEF,eAAO,MAAM,sBAAsB,QAEjC,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAI3B,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAM9B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAIhC,CAAA;AAEF,eAAO,MAAM,YAAY,QAOvB,CAAA;AAEF,eAAO,MAAM,YAAY,QAMvB,CAAA;AAEF,eAAO,MAAM,cAAc,QAUzB,CAAA;AAEF,eAAO,MAAM,eAAe,QAE1B,CAAA;AAEF,eAAO,MAAM,cAAc,QAIzB,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAMlC,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAM7B,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAK/B,CAAA;AAEF,eAAO,MAAM,cAAc,QAKzB,CAAA"}

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

@@ -1,2 +1,3 @@
 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("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, labelDescription, }: DoubleSliderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DoubleSlider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DoubleSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/DoubleSlider.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAGjD,eAAO,MAAM,YAAY,GAAI,+PA0B1B,iBAAiB,4CAmXnB,CAAA"}

package/dist/components/Slider/components/DoubleSlider.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useTheme } from "@ultraviolet/themes";
+import { useTheme, cn } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useId, useRef, useState, useEffect, useMemo, useCallback } from "react";
 import { Label } from "../../Label/index.js";
@@ -9,7 +9,7 @@ import { Stack } from "../../Stack/index.js";
 import { Text } from "../../Text/index.js";
 import { Tooltip } from "../../Tooltip/index.js";
 import { THUMB_SIZE } from "../constant.js";
-import { sliderDoubleWrapper, sliderTooltip, sliderCustomRail, sliderInnerRail, sliderDouble, sliderThumbStyle, thumbColor, leftVar, tooltipLeft, sliderDoubleText } from "../styles.css.js";
+import { sliderDoubleWrapper, sliderTooltip, sliderCustomRail, sliderInnerRail, thumbColor, leftVar, sliderDouble, sliderThumbStyle, tooltipLeft, sliderDoubleText } from "../styles.css.js";
 import { Options } from "./Options.js";
 const DoubleSlider = ({
   name,
@@ -35,7 +35,8 @@ const DoubleSlider = ({
   suffix,
   required,
   tooltipPosition,
-  "aria-label": ariaLabel
+  "aria-label": ariaLabel,
+  labelDescription
 }) => {
   const theme = useTheme();
   const localId = useId();
@@ -207,7 +208,15 @@ const DoubleSlider = ({
     });
   }, [min, max, value]);
   return /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 1, justifyContent: "left", children: [
-    label ? /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ jsx(Label, { htmlFor: finalId, required, children: label }) }) : null,
+    label ? /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "space-between", children: /* @__PURE__ */ jsx(
+      Label,
+      {
+        htmlFor: finalId,
+        labelDescription,
+        required,
+        children: label
+      }
+    ) }) : null,
     /* @__PURE__ */ jsxs(Stack, { direction, gap: 1, width: "100%", children: [
       direction === "column" ? /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
         styledValue(leftToShow, "left"),
@@ -250,7 +259,15 @@ const DoubleSlider = ({
                     "input",
                     {
                       "aria-label": ariaLabel ?? name,
-                      className: `${className ? `${className} ` : ""}${sliderDouble({ disabled, hasTooltip: !!tooltip })} ${sliderThumbStyle({ disabled: !!disabled, hasTooltipDouble: !!tooltip, isDouble: true })}`,
+                      className: cn(
+                        className,
+                        sliderDouble({ disabled, hasTooltip: !!tooltip }),
+                        sliderThumbStyle({
+                          disabled: !!disabled,
+                          hasTooltipDouble: !!tooltip,
+                          isDouble: true
+                        })
+                      ),
                       "data-direction": direction,
                       "data-error": error,
                       "data-testid": dataTestId ? `${dataTestId}-left` : "handle-left",
@@ -290,7 +307,15 @@ const DoubleSlider = ({
                     "input",
                     {
                       "aria-label": ariaLabel ?? name,
-                      className: `${className ? `${className} ` : ""}${sliderDouble({ disabled, hasTooltip: !!tooltip })} ${sliderThumbStyle({ disabled, hasTooltipDouble: !!tooltip, isDouble: true })}`,
+                      className: cn(
+                        className,
+                        sliderDouble({ disabled, hasTooltip: !!tooltip }),
+                        sliderThumbStyle({
+                          disabled,
+                          hasTooltipDouble: !!tooltip,
+                          isDouble: true
+                        })
+                      ),
                       "data-direction": direction,
                       "data-error": error,
                       "data-testid": dataTestId ? `${dataTestId}-right` : "handle-right",
@@ -307,7 +332,7 @@ const DoubleSlider = ({
                       onFocus,
                       step,
                       style: assignInlineVars({
-                        [leftVar]: `calc(${(selectedIndexes[1] - min) * 100 / (max - min)}% - ${THUMB_SIZE / 2}px`,
+                        [leftVar]: `calc(${((selectedIndexes[1] ?? 0) - min) * 100 / (max - min)}% - ${THUMB_SIZE / 2}px`,
                         [thumbColor]: theme.theme === "light" ? theme.colors.neutral.background : theme.colors.neutral.backgroundStronger
                       }),
                       type: "range",

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

@@ -9,3 +9,4 @@ export type OptionsProps = {
     step: number;
 };
 export declare const Options: ({ ticks, min, max, value, step }: OptionsProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Options.d.ts.map

package/dist/components/Slider/components/Options.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Options.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/Options.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE;QACL,KAAK,EAAE,MAAM,CAAA;QACb,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;KAC3B,EAAE,CAAA;IACH,GAAG,EAAE,MAAM,CAAA;IACX,GAAG,EAAE,MAAM,CAAA;IACX,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED,eAAO,MAAM,OAAO,GAAI,kCAAkC,YAAY,4CA+CrE,CAAA"}

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

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

package/dist/components/Slider/components/SingleSlider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSlider.d.ts","sourceRoot":"","sources":["../../../../src/components/Slider/components/SingleSlider.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAGjD,eAAO,MAAM,YAAY,GAAI,+PA0B1B,iBAAiB,4CA8NnB,CAAA"}

package/dist/components/Slider/components/SingleSlider.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useTheme } from "@ultraviolet/themes";
+import { useTheme, cn } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useId, useState, useRef, useEffect, useMemo, useCallback } from "react";
 import { Label } from "../../Label/index.js";
@@ -9,7 +9,7 @@ import { Stack } from "../../Stack/index.js";
 import { Text } from "../../Text/index.js";
 import { Tooltip } from "../../Tooltip/index.js";
 import { THUMB_SIZE } from "../constant.js";
-import { sliderTooltip, sliderSingle, sliderThumbStyle, thumbColor, leftVar, tooltipLeft, sliderNumberInput, sliderDoubleText } from "../styles.css.js";
+import { sliderTooltip, thumbColor, leftVar, sliderSingle, sliderThumbStyle, tooltipLeft, sliderNumberInput, sliderDoubleText } from "../styles.css.js";
 import { Options } from "./Options.js";
 const SingleSlider = ({
   name,
@@ -34,6 +34,7 @@ const SingleSlider = ({
   prefix,
   suffix,
   required,
+  labelDescription,
   "aria-label": ariaLabel,
   tooltipPosition
 }) => {
@@ -154,7 +155,7 @@ const SingleSlider = ({
     return void 0;
   }, [tooltip, selectedIndex]);
   const placementTooltip = (selectedIndex - min) / (max - min) * (sliderWidth - THUMB_SIZE) + THUMB_SIZE / 2 - sliderWidth / 2;
-  const valueToShow = options ? options[selectedIndex]?.value : selectedIndex;
+  const valueToShow = options?.[selectedIndex] ? options[selectedIndex].value : selectedIndex;
   return /* @__PURE__ */ jsxs(Stack, { direction, gap: 1, justifyContent: "left", children: [
     label ? /* @__PURE__ */ jsxs(
       Stack,
@@ -163,7 +164,15 @@ const SingleSlider = ({
         direction: "row",
         justifyContent: "space-between",
         children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: finalId, required, children: label }),
+          /* @__PURE__ */ jsx(
+            Label,
+            {
+              htmlFor: finalId,
+              labelDescription,
+              required,
+              children: label
+            }
+          ),
           direction === "column" ? styledValue(valueToShow) : null
         ]
       }
@@ -184,7 +193,11 @@ const SingleSlider = ({
             {
               "aria-disabled": disabled,
               "aria-label": ariaLabel ?? name,
-              className: `${className ? `${className} ` : ""}${sliderSingle({ direction, disabled, error: !!error })} ${sliderThumbStyle({ disabled, isDouble: false })}`,
+              className: cn(
+                className,
+                sliderSingle({ direction, disabled, error: !!error }),
+                sliderThumbStyle({ disabled, isDouble: false })
+              ),
               "data-direction": direction,
               "data-error": !!error,
               "data-testid": dataTestId,

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

@@ -1 +1,2 @@
 export declare const THUMB_SIZE = 16;
+//# sourceMappingURL=constant.d.ts.map

package/dist/components/Slider/constant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constant.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/constant.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,KAAK,CAAA"}

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

@@ -4,4 +4,5 @@ import type { SliderProps } from './types';
  * - For a simple slider (one handle) : prop `value` must be number.
  * - For a double slider (two handles):  prop `value` must be an array of numbers (of length 2) and prop `double` must be set to `true`. **Make sure that others props have the correct type.**
  */
-export declare const Slider: ({ name, label, helper, tooltip, direction, input, prefix, unit, suffix, required, disabled, error, options, "data-testid": dataTestId, value, onChange, min, double, max, step, id, onBlur, onFocus, className, tooltipPosition, style, "aria-label": ariaLabel, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Slider: ({ name, label, helper, tooltip, direction, input, prefix, unit, suffix, required, disabled, error, options, "data-testid": dataTestId, value, onChange, min, double, max, step, id, onBlur, onFocus, className, tooltipPosition, style, labelDescription, "aria-label": ariaLabel, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAE1C;;;;GAIG;AACH,eAAO,MAAM,MAAM,GAAI,sRA6BpB,WAAW,4CA8Fb,CAAA"}