@ultraviolet/ui 3.1.0 → 3.2.0

package/dist/components/RadioGroup/index.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/themes";
 import { useMemo, createContext, useContext } from "react";
 import { Label } from "../Label/index.js";
 import { Radio } from "../Radio/index.js";
@@ -51,7 +52,7 @@ const RadioGroupRadio = ({
     }
   );
 };
-const RadioGroup = ({
+const RadioGroupComponent = ({
   legend,
   legendDescription,
   value,
@@ -76,7 +77,7 @@ const RadioGroup = ({
     [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: [
+    /* @__PURE__ */ jsx("fieldset", { className: cn(className, fieldset), children: /* @__PURE__ */ jsxs(Stack, { gap: 1.5, children: [
       legend || description ? /* @__PURE__ */ jsxs(Stack, { gap: 0.5, children: [
         legend ? /* @__PURE__ */ jsx(
           Label,
@@ -121,7 +122,12 @@ const RadioGroup = ({
     error ? /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "danger", variant: "caption", children: error }) : null
   ] }) });
 };
-RadioGroup.Radio = RadioGroupRadio;
+const RadioGroup = Object.assign(
+  RadioGroupComponent,
+  {
+    Radio: RadioGroupRadio
+  }
+);
 export {
   RadioGroup
 };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/RadioGroup/styles.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,QAAQ,QAInB,CAAA"}

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

@@ -19,3 +19,4 @@ type RowProps = {
  */
 export declare const Row: ({ className, "data-testid": dataTestId, children, templateColumns, alignItems, justifyContent, gap, padding, style, }: RowProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Row/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAA;AACrD,OAAO,KAAK,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAA;AAItE,KAAK,cAAc,CAAC,CAAC,IACjB,CAAC,GACD,OAAO,CAAC,MAAM,CAAC,MAAM,kBAAkB,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,CAAC,CAAA;AAG/D,KAAK,QAAQ,CAAC,CAAC,SAAS,MAAM,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,SAAS,MAAM,EAAE,GACnE,CAAC,GACD,KAAK,CAAA;AAET,KAAK,QAAQ,GAAG;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,EAAE,SAAS,CAAA;IACnB,eAAe,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IACvC,GAAG,CAAC,EAAE,cAAc,CAChB,MAAM,kBAAkB,CAAC,OAAO,CAAC,GACjC,QAAQ,CAAC,MAAM,kBAAkB,CAAC,OAAO,CAAC,CAAC,CAC9C,CAAA;IACD,UAAU,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;IAC3C,cAAc,CAAC,EAAE,cAAc,CAAC,kBAAkB,CAAC,CAAA;IACnD,OAAO,CAAC,EAAE,cAAc,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC,CAAA;IAClD,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AA4BD;;GAEG;AACH,eAAO,MAAM,GAAG,GAAI,uHAUjB,QAAQ,4CA+CV,CAAA"}

package/dist/components/Row/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { consoleLightTheme } from "@ultraviolet/themes";
+import { cn, consoleLightTheme } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { row, sprinkles } from "./styles.css.js";
 import { paddings, templateColumn } from "./variables.css.js";
@@ -24,11 +24,15 @@ const Row = ({
 }) => /* @__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 }
-    })}`,
+    className: cn(
+      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({

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

@@ -469,3 +469,4 @@ export declare const sprinkles: ((props: {
     properties: Set<"alignItems" | "justifyContent" | "gap">;
 };
 export {};
+//# sourceMappingURL=styles.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/Row/styles.css.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAE1C,eAAO,MAAM,GAAG,QAiCd,CAAA;AA4BF,QAAA,MAAM,gBAAgB,EAAE,aAAa,CAAC,YAAY,CAAC,EAezC,CAAA;AAEV,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,gBAAgB,CAAC,CAAC,MAAM,CAAC,CAAA;AAE9D,QAAA,MAAM,oBAAoB,EAAE,aAAa,CAAC,gBAAgB,CAAC,EAajD,CAAA;AAEV,MAAM,MAAM,kBAAkB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AAEtE,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAS/B,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;CAAwC,CAAA"}

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

@@ -2,3 +2,4 @@ import { createVar } from '@vanilla-extract/css';
 import type { theme } from '@ultraviolet/themes';
 export declare const templateColumn: Record<keyof typeof theme.breakpoints, ReturnType<typeof createVar>>;
 export declare const paddings: Record<keyof typeof theme.breakpoints, ReturnType<typeof createVar>>;
+//# sourceMappingURL=variables.css.d.ts.map

package/dist/components/Row/variables.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables.css.d.ts","sourceRoot":"","sources":["../../../src/components/Row/variables.css.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAChD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAA;AAEhD,eAAO,MAAM,cAAc,EAAE,MAAM,CACjC,MAAM,OAAO,KAAK,CAAC,WAAW,EAC9B,UAAU,CAAC,OAAO,SAAS,CAAC,CAgC7B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,MAAM,CAC3B,MAAM,OAAO,KAAK,CAAC,WAAW,EAC9B,UAAU,CAAC,OAAO,SAAS,CAAC,CAgC7B,CAAA"}

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

@@ -7,3 +7,4 @@ type KeyGroupProps = {
 };
 export declare const KeyGroup: ({ keys, disabled, onClick }: KeyGroupProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=KeyGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"KeyGroup.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/KeyGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAI5B,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC,EAAE,CAAA;IAC9C,QAAQ,EAAE,cAAc,CAAC,OAAO,GAAG,CAAC,CAAC,UAAU,CAAC,CAAA;IAChD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB,CAAA;AAED,eAAO,MAAM,QAAQ,GAAI,6BAA6B,aAAa,4CAQlE,CAAA"}

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

@@ -7,3 +7,4 @@ import type { SearchInputProps } from './types';
  * - `toggleIsOpen`: a function to toggle the popup
  */
 export declare const SearchInput: import("react").ForwardRefExoticComponent<Omit<SearchInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/index.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,4HA8RvB,CAAA"}

package/dist/components/SearchInput/index.js

@@ -1,13 +1,14 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { SearchIcon } from "@ultraviolet/icons";
+import { cn } from "@ultraviolet/themes";
 import { forwardRef, useRef, useState, useReducer, useImperativeHandle, useEffect, useCallback, useMemo } from "react";
 import { isClientSide } from "../../helpers/isClientSide.js";
 import { Popup } from "../Popup/index.js";
 import { Stack } from "../Stack/index.js";
 import { TextInput } from "../TextInput/index.js";
 import { KeyGroup } from "./KeyGroup.js";
-import { searchInputPopup, searchInput, clickableStack } from "./styles.css.js";
+import { searchInputPopup, clickableStack, searchInput } from "./styles.css.js";
 const SearchInput = forwardRef(
   ({
     placeholder,
@@ -201,7 +202,7 @@ const SearchInput = forwardRef(
             "aria-live": ariaLive,
             autoComplete,
             autoFocus,
-            className: `${className ? `${className} ` : ""}${searchInput}`,
+            className: cn(className, searchInput),
             clearable: true,
             "data-testid": dataTestId,
             disabled,

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

@@ -1,3 +1,4 @@
 export declare const searchInputPopup: string;
 export declare const searchInput: string;
 export declare const clickableStack: string;
+//# sourceMappingURL=styles.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,QAO3B,CAAA;AAEF,eAAO,MAAM,WAAW,QAAY,CAAA;AAUpC,eAAO,MAAM,cAAc,QAA4B,CAAA"}

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

@@ -23,3 +23,4 @@ export type SearchInputProps = {
     className?: string;
 } & Exclude<ComponentProps<typeof TextInput>, 'prefix' | 'suffix' | 'clearable' | 'success' | 'onRandomize' | 'onChange' | 'type'>;
 export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SearchInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7E,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC7C,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AAE1C,KAAK,aAAa,GAAG;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,EAAE,OAAO,CAAA;IACf,YAAY,EAAE,qBAAqB,CAAA;CACpC,CAAA;AAED,MAAM,MAAM,8BAA8B,GAAG,CAAC,EAC5C,WAAW,EACX,MAAM,EACN,YAAY,GACb,EAAE,aAAa,KAAK,SAAS,CAAA;AAE9B,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,CAAC,EAAE,OAAO,CACtB,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,WAAW,CAAC,EACzC,aAAa,CACd,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,8BAA8B,GAAG,SAAS,CAAA;IACrD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAA;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAA;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,OAAO,CACT,cAAc,CAAC,OAAO,SAAS,CAAC,EAC9B,QAAQ,GACR,QAAQ,GACR,WAAW,GACX,SAAS,GACT,aAAa,GACb,UAAU,GACV,MAAM,CACT,CAAA"}

package/dist/components/SelectInput/SelectInputProvider.d.ts

@@ -41,3 +41,4 @@ type SelectInputProviderProps<IsMulti extends boolean> = {
 };
 export declare const SelectInputProvider: <T extends boolean>({ options, multiselect, selectAll, value, selectAllGroup, numberOfOptions, children, onChange, refSelect, onOpen, }: SelectInputProviderProps<T>) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=SelectInputProvider.d.ts.map

package/dist/components/SelectInput/SelectInputProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInputProvider.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/SelectInputProvider.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAU3E,OAAO,KAAK,EAAE,QAAQ,EAAc,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAEhF,KAAK,YAAY,GAAG;IAClB,OAAO,EAAE,QAAQ,CAAA;IACjB,QAAQ,EAAE,QAAQ,CAAC,cAAc,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC5C,iBAAiB,EAAE,OAAO,CAAA;IAC1B,oBAAoB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;IACvD,WAAW,EAAE,MAAM,CAAA;IACnB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAA;IAChD,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACtD,cAAc,EAAE,OAAO,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,gBAAgB,EAAE,QAAQ,CAAA;IAC1B,YAAY,EAAE,YAAY,CAAA;IAC1B,eAAe,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAA;CACzC,GAAG,CACA;IACE,WAAW,EAAE,IAAI,CAAA;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;CACrC,GACD;IACE,WAAW,EAAE,KAAK,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CACnC,CACJ,CAAA;AAoBD,eAAO,MAAM,cAAc,oBAAuC,CAAA;AAElE,KAAK,wBAAwB,CAAC,OAAO,SAAS,OAAO,IAAI;IACvD,OAAO,EAAE,QAAQ,CAAA;IACjB,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,SAAS,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACtD,QAAQ,EAAE,SAAS,CAAA;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACzB,cAAc,EAAE,OAAO,CAAA;IACvB,eAAe,EAAE,MAAM,CAAA;IACvB,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC5C,QAAQ,CAAC,EAAE,OAAO,SAAS,IAAI,GAC3B,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,GACzB,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,mBAAmB,GAAI,CAAC,SAAS,OAAO,EAAE,qHAWpD,wBAAwB,CAAC,CAAC,CAAC,4CAuP7B,CAAA"}

package/dist/components/SelectInput/components/Dropdown.d.ts

@@ -26,3 +26,4 @@ export type CreateDropdownProps = {
     isLoading?: boolean;
 };
 export declare const Dropdown: ({ children, emptyState, descriptionDirection, searchable, placeholder, footer, refSelect, loadMore, optionalInfoPlacement, isLoading, size, dropdownAlign, portalTarget, id, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/components/SelectInput/components/Dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/Dropdown.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAEV,cAAc,EAId,SAAS,EACT,SAAS,EAEV,MAAM,OAAO,CAAA;AAYd,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AAyBnC,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,SAAS,CAAA;IACrB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,CAAC,CAAC,aAAa,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IAC/D,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,CAAC,CAAA;IACrD,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,cAAc,CAAC,CAAA;CAC5D,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE,SAAS,CAAA;IACrB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAgkBD,eAAO,MAAM,QAAQ,GAAI,gLAetB,aAAa,4CAiMf,CAAA"}

package/dist/components/SelectInput/components/Dropdown.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useTheme } from "@ultraviolet/themes";
+import { useTheme, cn } from "@ultraviolet/themes";
 import { useState, useRef, use, useLayoutEffect, useCallback, useEffect, useMemo } from "react";
 import { Checkbox } from "../../Checkbox/index.js";
 import { ModalContext } from "../../Modal/ModalProvider.js";
@@ -250,7 +250,10 @@ const CreateDropdown = ({
                 children: group ? /* @__PURE__ */ jsx(
                   "button",
                   {
-                    className: `${selectAllGroup ? dropdownGroupSelectable : ""} ${dropdownGroup}`,
+                    className: cn(
+                      selectAllGroup ? dropdownGroupSelectable : "",
+                      dropdownGroup
+                    ),
                     "data-selectgroup": selectAllGroup,
                     "data-testid": `group-${index}`,
                     onClick: () => selectAllGroup ? handleSelectGroup(group) : null,
@@ -378,7 +381,7 @@ const CreateDropdown = ({
   ) : /* @__PURE__ */ jsxs(
     Stack,
     {
-      className: `${dropdownContainer} ${dropdownContainerUnGrouped}`,
+      className: cn(dropdownContainer, dropdownContainerUnGrouped),
       gap: 0.25,
       id: "select-dropdown",
       onKeyDown: handleKeyDownSelect,

package/dist/components/SelectInput/components/DropdownOption.d.ts

@@ -6,3 +6,4 @@ type DisplayOptionProps = {
 };
 export declare const DisplayOption: ({ option, optionalInfoPlacement, descriptionDirection, }: DisplayOptionProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=DropdownOption.d.ts.map

package/dist/components/SelectInput/components/DropdownOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownOption.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/DropdownOption.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAO1C,KAAK,kBAAkB,GAAG;IACxB,MAAM,EAAE,UAAU,CAAA;IAClB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;CACxC,CAAA;AAED,eAAO,MAAM,aAAa,GAAI,0DAI3B,kBAAkB,4CAkKpB,CAAA"}

package/dist/components/SelectInput/components/SearchBarDropdown.d.ts

@@ -7,3 +7,4 @@ type SearchBarProps = {
 };
 export declare const SearchBarDropdown: ({ placeholder, displayedOptions, setSearchBarActive, }: SearchBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=SearchBarDropdown.d.ts.map

package/dist/components/SelectInput/components/SearchBarDropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchBarDropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/SearchBarDropdown.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAIrD,OAAO,KAAK,EAAE,QAAQ,EAAc,MAAM,UAAU,CAAA;AAGpD,KAAK,cAAc,GAAG;IACpB,WAAW,EAAE,MAAM,CAAA;IACnB,gBAAgB,EAAE,QAAQ,CAAA;IAC1B,kBAAkB,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAA;CACtD,CAAA;AAqED,eAAO,MAAM,iBAAiB,GAAI,wDAI/B,cAAc,4CAqGhB,CAAA"}

package/dist/components/SelectInput/components/SelectBar.d.ts

@@ -17,3 +17,4 @@ type SelectBarProps = {
 };
 declare const SelectBar: ({ size, clearable, disabled, readOnly, placeholder, success, error, autoFocus, tooltip, innerRef, id, "data-testid": dataTestId, label, dropdownId, }: SelectBarProps) => import("react/jsx-runtime").JSX.Element;
 export { SelectBar };
+//# sourceMappingURL=SelectBar.d.ts.map

package/dist/components/SelectInput/components/SelectBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectBar.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/SelectBar.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AAmCjD,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,OAAO,CAAA;IACjB,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,QAAQ,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,aAAa,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB,CAAA;AAmID,QAAA,MAAM,SAAS,GAAI,uJAehB,cAAc,4CAwUhB,CAAA;AAED,OAAO,EAAE,SAAS,EAAE,CAAA"}

package/dist/components/SelectInput/components/SelectBar.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertCircleIcon, CheckCircleIcon, CloseIcon, ArrowDownIcon, PlusIcon } from "@ultraviolet/icons";
+import { cn } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { useState, useRef, useMemo, useEffect, useCallback, useLayoutEffect } from "react";
 import { Button } from "../../Button/index.js";
@@ -51,7 +52,7 @@ const DisplayValues = ({
             children: potentiallyNonOverflowedValues.map((option) => /* @__PURE__ */ jsx(
               Tag,
               {
-                className: `${option.value} ${selectBarTags.hidden}`,
+                className: cn(option.value, selectBarTags.hidden),
                 onClose: () => {
                 },
                 children: option?.label

package/dist/components/SelectInput/components/dropdown.css.d.ts

@@ -33,3 +33,4 @@ export declare const dropdownInfo: string;
 export declare const dropdownInfoTextItem: string;
 export declare const dropdownInfoContainer: string;
 export declare const searchBar: string;
+//# sourceMappingURL=dropdown.css.d.ts.map

package/dist/components/SelectInput/components/dropdown.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/dropdown.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,QAAQ,QAQnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAQlC,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;EA2CvB,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAAqC,CAAA;AAEpE,eAAO,MAAM,gBAAgB,QAAyC,CAAA;AAEtE,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAM/B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAAgC,CAAA;AAElE,eAAO,MAAM,SAAS,QAGpB,CAAA"}

package/dist/components/SelectInput/components/selectBar.css.d.ts

@@ -107,3 +107,4 @@ export declare const selectBarTags: Record<"hidden" | "visible", string>;
 export declare const selectedValues: string;
 export declare const plusTag: string;
 export declare const multiselectStack: string;
+//# sourceMappingURL=selectBar.css.d.ts.map

package/dist/components/SelectInput/components/selectBar.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectBar.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/selectBar.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,oBAItB,CAAA;AACF,eAAO,MAAM,WAAW,oBAItB,CAAA;AAEF,eAAO,MAAM,cAAc,QAGzB,CAAA;AAEF,eAAO,MAAM,sBAAsB,QAGjC,CAAA;AAgCF,eAAO,MAAM,aAAa,QAYxB,CAAA;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;+BA7BT,MAAM;;;;;;;;;;;;;;;;;;+BAAN,MAAM;;;;;;;;;;;;;;;;;;+BAAN,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwHjB,CAAA;AASF,eAAO,MAAM,aAAa,sCAMxB,CAAA;AAEF,eAAO,MAAM,cAAc,QAKzB,CAAA;AAEF,eAAO,MAAM,OAAO,QAAsC,CAAA;AAE1D,eAAO,MAAM,gBAAgB,QAI3B,CAAA"}

package/dist/components/SelectInput/findOptionInOptions.d.ts

@@ -1,2 +1,3 @@
 import type { DataType, OptionType } from './types';
 export declare const findOptionInOptions: (options: DataType, optionValue: string) => OptionType | undefined;
+//# sourceMappingURL=findOptionInOptions.d.ts.map

package/dist/components/SelectInput/findOptionInOptions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"findOptionInOptions.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/findOptionInOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAEnD,eAAO,MAAM,mBAAmB,GAAI,SAAS,QAAQ,EAAE,aAAa,MAAM,2BASzE,CAAA"}

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

@@ -129,3 +129,4 @@ type SelectInputProps<IsMulti extends undefined | boolean = false> = {
  */
 export declare const SelectInput: <IsMulti extends undefined | boolean>({ name, id, onBlur, onFocus, onChange, "aria-label": ariaLabel, value, label, helper, options, size, emptyState, descriptionDirection, success, error, "data-testid": dataTestId, className, tooltip, footer, placeholderSearch, placeholder, searchable, disabled, readOnly, clearable, multiselect, required, labelDescription, autofocus, loadMore, optionalInfoPlacement, isLoading, selectAll, selectAllGroup, dropdownAlign, portalTarget, onOpen, style, }: SelectInputProps<IsMulti>) => import("react/jsx-runtime").JSX.Element;
 export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/SelectInput/index.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/themes";
 import { useId, useRef } from "react";
 import { Label } from "../Label/index.js";
 import { Stack } from "../Stack/index.js";
@@ -7,7 +8,7 @@ import { Text } from "../Text/index.js";
 import { Dropdown } from "./components/Dropdown.js";
 import { SelectBar } from "./components/SelectBar.js";
 import { SelectInputProvider } from "./SelectInputProvider.js";
-import { selectinputContainer, selectinputHelper } from "./styles.css.js";
+import { selectinputHelper, selectinputContainer } from "./styles.css.js";
 const SelectInput = ({
   name,
   id,
@@ -73,7 +74,7 @@ const SelectInput = ({
         "div",
         {
           "aria-label": name,
-          className: `${className ? `${className} ` : ""}${selectinputContainer}`,
+          className: cn(className, selectinputContainer),
           onBlur,
           onFocus,
           style,

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oBAAoB,QAA2B,CAAA;AAC5D,eAAO,MAAM,iBAAiB,QAA4C,CAAA"}

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

@@ -41,3 +41,4 @@ export declare const INPUT_SIZE_HEIGHT: {
     readonly medium: "500";
     readonly small: "400";
 };
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectInput/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,SAAS,CAAA;IACvB,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB,GAAG,CACA;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,GACtC;IACE,KAAK,EAAE,SAAS,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;CACnB,CACJ,CAAA;AAED,MAAM,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,EAAE,UAAU,EAAE,CAAC,GAAG,UAAU,EAAE,CAAA;AAElE,MAAM,MAAM,YAAY,GAAG;IACzB,cAAc,EAAE,MAAM,EAAE,CAAA;IACxB,WAAW,EAAE,OAAO,CAAA;IACpB,cAAc,EAAE,MAAM,EAAE,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,WAAW,CAAA;CAAE,GACrB;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,aAAa,EAAE,MAAM,CAAA;CAAE,GAC9C;IACE,IAAI,EAAE,cAAc,CAAA;IACpB,aAAa,EAAE,UAAU,CAAA;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,GACD;IAAE,IAAI,EAAE,UAAU,CAAA;CAAE,GACpB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IACE,IAAI,EAAE,OAAO,CAAA;IACb,cAAc,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;IAC9C,cAAc,EAAE,YAAY,CAAC,gBAAgB,CAAC,CAAA;CAC/C,CAAA;AAEL,eAAO,MAAM,iBAAiB;;;;CAIpB,CAAA"}

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

@@ -30,3 +30,4 @@ export type SelectableCardProps = {
  * It can be used to create a list of selectable items or a single selectable item.
  */
 export declare const SelectableCard: import("react").ForwardRefExoticComponent<SelectableCardProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,WAAW,MAAM,4BAA4B,CAAA;AAGzD,OAAO,KAAK,EACV,kBAAkB,EAClB,aAAa,EACb,iBAAiB,EAIjB,SAAS,EACV,MAAM,OAAO,CAAA;AASd,OAAO,KAAK,EAAE,SAAS,EAAE,8BAA8B,EAAE,MAAM,aAAa,CAAA;AAgB5E,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EACL,CAAC,CAAC,EACA,QAAQ,EACR,OAAO,GACR,EAAE,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,UAAU,CAAC,KAAK,SAAS,CAAC,GACnE,SAAS,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,QAAQ,EAAE,kBAAkB,CAAC,gBAAgB,CAAC,CAAA;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC7C,MAAM,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAA;IAC5C,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,GAAG,CACA;IACE,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,KAAK,CAAA;CACpB,GACD;IACE,WAAW,CAAC,EAAE,8BAA8B,CAC1C,MAAM,OAAO,WAAW,EACxB,aAAa,CACd,CAAA;IACD,YAAY,CAAC,EAAE,KAAK,CAAA;CACrB,CACJ,GACC,SAAS,CAAA;AAEX;;;GAGG;AACH,eAAO,MAAM,cAAc,gHAwQ1B,CAAA"}

package/dist/components/SelectableCard/index.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as ProductIcon from "@ultraviolet/icons/product";
-import { useTheme } from "@ultraviolet/themes";
+import { useTheme, cn } from "@ultraviolet/themes";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { forwardRef, useRef, useState, useMemo, useEffect, useCallback } from "react";
 import { Checkbox } from "../Checkbox/index.js";
 import { Radio } from "../Radio/index.js";
 import { Stack } from "../Stack/index.js";
 import { Tooltip } from "../Tooltip/index.js";
-import { illustrationSelectableCard, divSelectableCard, imageSelectableCard, containerSelectableCard, labelContainerSelectableCard, selectableElementSelectableCard, stackSelectableCard } from "./styles.css.js";
+import { illustrationSelectableCard, divSelectableCard, imageSelectableCard, selectableElementSelectableCard, stackSelectableCard, containerSelectableCard, labelContainerSelectableCard } from "./styles.css.js";
 import { widthSelectable, labelDisplay, inputDisplay } from "./variables.css.js";
 const SelectableCard = forwardRef(
   ({
@@ -135,7 +135,14 @@ const SelectableCard = forwardRef(
       Stack,
       {
         alignItems: "start",
-        className: `${className ? `${className} ` : ""}${containerSelectableCard({ cursor: type === "checkbox" && isComplexChildren ? "default" : "custom", image })} ${labelContainerSelectableCard[label ? "label" : "noLabel"]}`,
+        className: cn(
+          className,
+          containerSelectableCard({
+            cursor: type === "checkbox" && isComplexChildren ? "default" : "custom",
+            image
+          }),
+          labelContainerSelectableCard[label ? "label" : "noLabel"]
+        ),
         "data-checked": checked,
         "data-disabled": disabled,
         "data-error": isError,

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

@@ -24,3 +24,4 @@ export declare const imageSelectableCard: string;
 export declare const illustrationSelectableCard: string;
 export declare const stackSelectableCard: string;
 export declare const selectableElementSelectableCard: string;
+//# sourceMappingURL=styles.css.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/styles.css.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;EA6DlC,CAAA;AAEF,eAAO,MAAM,4BAA4B,qCASvC,CAAA;AAUF,eAAO,MAAM,iBAAiB,QAS5B,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAM9B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAIrC,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAY9B,CAAA;AAEF,eAAO,MAAM,+BAA+B,QAc1C,CAAA"}

package/dist/components/SelectableCard/variables.css.d.ts

@@ -1,3 +1,4 @@
 export declare const inputDisplay: `var(--${string})`;
 export declare const labelDisplay: `var(--${string})`;
 export declare const widthSelectable: `var(--${string})`;
+//# sourceMappingURL=variables.css.d.ts.map

package/dist/components/SelectableCard/variables.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variables.css.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCard/variables.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,oBAAc,CAAA;AACvC,eAAO,MAAM,YAAY,oBAAc,CAAA;AACvC,eAAO,MAAM,eAAe,oBAAc,CAAA"}

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

@@ -1,6 +1,7 @@
 import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react';
 import { SelectableCard } from '../SelectableCard';
 export type CardSelectableCardProps = Omit<ComponentProps<typeof SelectableCard>, 'onChange' | 'checked' | 'type' | 'showTick'>;
+declare const CardSelectableCard: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, style, "data-testid": dataTestId, }: CardSelectableCardProps) => import("react/jsx-runtime").JSX.Element;
 type SelectableCardGroupProps = {
     legend?: string;
     legendDescription?: ReactNode;
@@ -18,8 +19,10 @@ type SelectableCardGroupProps = {
 /**
  * SelectableCardGroup is a component that allows users to select cards from a list of cards using SelectableCard.
  */
-export declare const SelectableCardGroup: {
-    ({ legend, legendDescription, value, className, helper, error, columns, children, onChange, name, required, type, showTick, }: SelectableCardGroupProps): import("react/jsx-runtime").JSX.Element;
-    Card: ({ value, disabled, children, className, isError, onFocus, onBlur, tooltip, id, label, style, "data-testid": dataTestId, }: CardSelectableCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const SelectableCardGroupComponent: ({ legend, legendDescription, value, className, helper, error, columns, children, onChange, name, required, type, showTick, }: SelectableCardGroupProps) => import("react/jsx-runtime").JSX.Element;
+type SelectableCardOptionGroupType = typeof SelectableCardGroupComponent & {
+    Card: typeof CardSelectableCard;
 };
+export declare const SelectableCardGroup: SelectableCardOptionGroupType;
 export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCardGroup/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAI3E,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAkBlD,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,cAAc,CAAC,OAAO,cAAc,CAAC,EACrC,UAAU,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAC7C,CAAA;AAED,QAAA,MAAM,kBAAkB,GAAI,2HAazB,uBAAuB,4CAqCzB,CAAA;AAED,KAAK,wBAAwB,GAAG;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAA;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,IAAI,EAAE,OAAO,GAAG,UAAU,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,GAAG,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC,CAAA;AAErE;;GAEG;AACH,QAAA,MAAM,4BAA4B,GAAI,8HAcnC,wBAAwB,4CAmD1B,CAAA;AAED,KAAK,6BAA6B,GAAG,OAAO,4BAA4B,GAAG;IACzE,IAAI,EAAE,OAAO,kBAAkB,CAAA;CAChC,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,6BAKjC,CAAA"}

package/dist/components/SelectableCardGroup/index.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "@ultraviolet/themes";
 import { useMemo, createContext, useContext } from "react";
 import { Label } from "../Label/index.js";
 import { Row } from "../Row/index.js";
@@ -52,7 +53,7 @@ const CardSelectableCard = ({
     }
   );
 };
-const SelectableCardGroup = ({
+const SelectableCardGroupComponent = ({
   legend,
   legendDescription,
   value,
@@ -80,24 +81,18 @@ const SelectableCardGroup = ({
     [name, value, onChange, required, type, showTick, error]
   );
   return /* @__PURE__ */ jsx(SelectableCardGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
-    /* @__PURE__ */ jsx(
-      "fieldset",
-      {
-        className: `${className ? `${className} ` : ""}${selectableCardGroupFieldSet}`,
-        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, selectableCardGroupFieldSet), 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 })
+    ] }) }),
     helper ? /* @__PURE__ */ jsx(
       Text,
       {
@@ -111,7 +106,12 @@ const SelectableCardGroup = ({
     error ? /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "danger", variant: "caption", children: error }) : null
   ] }) });
 };
-SelectableCardGroup.Card = CardSelectableCard;
+const SelectableCardGroup = Object.assign(
+  SelectableCardGroupComponent,
+  {
+    Card: CardSelectableCard
+  }
+);
 export {
   SelectableCardGroup
 };

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCardGroup/styles.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,2BAA2B,QAItC,CAAA"}

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

@@ -13,3 +13,4 @@ type SelectableCardOptionGroupContextType = {
 export declare const SelectableCardOptionGroupContext: import("react").Context<SelectableCardOptionGroupContextType>;
 export declare const useSelectableCardOptionGroup: () => SelectableCardOptionGroupContextType;
 export {};
+//# sourceMappingURL=Provider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Provider.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCardOptionGroup/Provider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAA;AAEhE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AACjD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,KAAK,oCAAoC,GAAG;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,KAAK,EAAE,OAAO,CAAA;IACd,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,KAAK,CAAA;IACX,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,OAAO,CAAC,CAAA;CAC1D,GAAG,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC,GACnE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAA;AAEzD,eAAO,MAAM,gCAAgC,+DAUzC,CAAA;AAEJ,eAAO,MAAM,4BAA4B,4CAUxC,CAAA"}

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

@@ -0,0 +1,37 @@
+import type { ComponentProps, InputHTMLAttributes, ReactNode } from 'react';
+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.**
+ */
+declare const SelectableCardOptionGroupComponent: ({ legend, legendDescription, className, required, columns, children, helper, error, onChange, value, optionValue, onChangeOption, name, disabled, size, style, }: SelectableCardOptionGroupProps) => import("react/jsx-runtime").JSX.Element;
+type SelectableCardOptionGroupType = typeof SelectableCardOptionGroupComponent & {
+    Option: typeof Option;
+};
+export declare const SelectableCardOptionGroup: SelectableCardOptionGroupType;
+export {};
+//# sourceMappingURL=SelectableCardOptionGroup.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableCardOptionGroup.d.ts","sourceRoot":"","sources":["../../../src/components/SelectableCardOptionGroup/SelectableCardOptionGroup.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,mBAAmB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAM3E,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAG5C,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAEpC,KAAK,8BAA8B,GAAG;IACpC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,iBAAiB,CAAC,EAAE,SAAS,CAAA;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;IAC9C;;OAEG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,aAAa,CAAC,CAAA;IAC1D,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,KAAK,CAAA;CACb,GAAG,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC,GACnE,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,CAAA;AAE/D;;;;;GAKG;AACH,QAAA,MAAM,kCAAkC,GAAI,kKAiBzC,8BAA8B,4CA0DhC,CAAA;AAED,KAAK,6BAA6B,GAChC,OAAO,kCAAkC,GAAG;IAC1C,MAAM,EAAE,OAAO,MAAM,CAAA;CACtB,CAAA;AAEH,eAAO,MAAM,yBAAyB,EAAE,6BAGpC,CAAA"}