@ultraviolet/ui 3.3.1 → 3.4.0

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

@@ -1,3 +1,4 @@
+/* empty css                             */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var containerAvatar = createRuntimeFn({ defaultClassName: "uv_19x8y1k0", variantClassNames: { shape: { circle: "uv_19x8y1k1", square: "uv_19x8y1k2" }, size: { large: "uv_19x8y1k3", medium: "uv_19x8y1k4", small: "uv_19x8y1k5", xsmall: "uv_19x8y1k6" }, sentiment: { primary: "uv_19x8y1k7", neutral: "uv_19x8y1k8" } }, defaultVariants: {}, compoundVariants: [[{ size: "large", shape: "square" }, "uv_19x8y1k9"], [{ size: "medium", shape: "square" }, "uv_19x8y1ka"], [{ size: "small", shape: "square" }, "uv_19x8y1kb"], [{ size: "xsmall", shape: "square" }, "uv_19x8y1kc"]] });

package/dist/components/Avatar/variables.css.js

@@ -1,4 +1,3 @@
-/* empty css                             */
 var finalSizeAvatar = "var(--uv_18799yd0)";
 var finalColorAvatar = "var(--uv_18799yd1)";
 var halvedColorAvatar = "var(--uv_18799yd2)";

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

@@ -1,4 +1,3 @@
-/* empty css                                                  */
 /* empty css                          */
 var stackCard = "uv_1p7tz3i0";
 var borderedBox = "uv_1p7tz3i1";

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":"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;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,yGAYnB,UAAU,4CAoCV,CAAA"}

package/dist/components/Label/index.js

@@ -77,8 +77,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,
     {

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

@@ -1,3 +1,4 @@
+/* empty css                             */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var containerPopup = createRuntimeFn({ defaultClassName: "uv_w40vpo2", variantClassNames: { hasMaxHeight: { true: "uv_w40vpo3" } }, defaultVariants: {}, compoundVariants: [] });

package/dist/components/Popup/variables.css.js

@@ -1,4 +1,3 @@
-/* empty css                             */
 var arrowTop = "var(--uv_ozfz3c0)";
 var arrowLeft = "var(--uv_ozfz3c1)";
 var arrowTransform = "var(--uv_ozfz3c2)";

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

@@ -1,4 +1,3 @@
-/* empty css                             */
 /* empty css                          */
 var progressContainer = "uv_1pgcd801";
 var customText = "uv_1pgcd802";

package/dist/components/ProgressBar/variables.css.js

@@ -1,3 +1,4 @@
+/* empty css                             */
 var percentageValue = "var(--uv_1taqqht0)";
 export {
   percentageValue

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

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/Dropdown.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,cAAc,EAId,SAAS,EACT,SAAS,EAEV,MAAM,OAAO,CAAA;AAYd,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AA0BnC,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;AAikBD,eAAO,MAAM,QAAQ,GAAI,gLAetB,aAAa,4CAuMf,CAAA"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/Dropdown.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,cAAc,EAId,SAAS,EACT,SAAS,EAEV,MAAM,OAAO,CAAA;AAYd,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AA0BnC,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;AAukBD,eAAO,MAAM,QAAQ,GAAI,gLAetB,aAAa,4CAuMf,CAAA"}

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

@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useTheme } from "@ultraviolet/themes";
 import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useState, useRef, use, useCallback, useLayoutEffect, useEffect, useMemo } from "react";
+import { useState, useRef, useContext, useCallback, useLayoutEffect, useEffect, useMemo } from "react";
 import { Checkbox } from "../../Checkbox/index.js";
 import { ModalContext } from "../../Modal/ModalProvider.js";
 import { Popup } from "../../Popup/index.js";
@@ -13,7 +13,7 @@ import { Text } from "../../Text/index.js";
 import { useSelectInput } from "../SelectInputProvider.js";
 import { INPUT_SIZE_HEIGHT } from "../types.js";
 import { DisplayOption } from "./DropdownOption.js";
-import { footer, dropdown, dropdownWidth, dropdownEmptyState, dropdownContainer, dropdownItem, dropdownCheckbox, dropdownGroupWrapper, dropdownGroupSelectable, dropdownGroup, dropdownLoadMore, dropdownContainerUnGrouped } from "./dropdown.css.js";
+import { footer, dropdown, dropdownWidth, dropdownEmptyState, dropdownContainer, dropdownCheckbox, dropdownItem, dropdownGroupWrapper, dropdownGroupSelectable, dropdownGroup, dropdownLoadMore, dropdownContainerUnGrouped } from "./dropdown.css.js";
 import { SearchBarDropdown } from "./SearchBarDropdown.js";
 const DROPDOWN_MAX_HEIGHT = 256;
 const NON_SEARCHABLE_KEYS = [
@@ -208,7 +208,9 @@ const CreateDropdown = ({
               "aria-disabled": false,
               "aria-label": "select-all",
               "aria-selected": selectedData.allSelected,
-              className: dropdownItem({ selected: selectedData.allSelected }),
+              className: cn(
+                dropdownItem({ selected: selectedData.allSelected })
+              ),
               "data-testid": "select-all",
               id: "select-all",
               onClick: selectAllOptions,
@@ -311,10 +313,12 @@ const CreateDropdown = ({
                 "aria-disabled": !!option.disabled,
                 "aria-label": option.value,
                 "aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
-                className: dropdownItem({
-                  disabled: !!option.disabled,
-                  selected: selectedData.selectedValues.includes(option.value) && !option.disabled
-                }),
+                className: cn(
+                  dropdownItem({
+                    disabled: !!option.disabled,
+                    selected: selectedData.selectedValues.includes(option.value) && !option.disabled
+                  })
+                ),
                 "data-testid": `option-${option.value}`,
                 id: `option-${indexOption}`,
                 onClick: (event) => {
@@ -396,7 +400,7 @@ const CreateDropdown = ({
             "aria-disabled": false,
             "aria-label": "select-all",
             "aria-selected": selectedData.allSelected,
-            className: dropdownItem({ selected: selectedData.allSelected }),
+            className: cn(dropdownItem({ selected: selectedData.allSelected })),
             "data-testid": "select-all",
             onClick: selectAllOptions,
             onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
@@ -437,10 +441,12 @@ const CreateDropdown = ({
               "aria-disabled": !!option.disabled,
               "aria-label": option.value,
               "aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
-              className: dropdownItem({
-                disabled: !!option.disabled,
-                selected: selectedData.selectedValues.includes(option.value) && !option.disabled
-              }),
+              className: cn(
+                dropdownItem({
+                  disabled: !!option.disabled,
+                  selected: selectedData.selectedValues.includes(option.value) && !option.disabled
+                })
+              ),
               "data-testid": `option-${option.value}`,
               id: `option-${index}`,
               onClick: (event) => {
@@ -538,7 +544,7 @@ const Dropdown = ({
   const [maxWidth, setWidth] = useState(
     refSelect.current?.offsetWidth ?? "100%"
   );
-  const modalContext = use(ModalContext);
+  const modalContext = useContext(ModalContext);
   const resizeDropdown = useCallback(() => {
     if (refSelect.current && refSelect.current.getBoundingClientRect().width > 0 && refSelect.current.getBoundingClientRect().width !== maxWidth) {
       setWidth(refSelect.current.getBoundingClientRect().width);

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

@@ -5,6 +5,7 @@ export declare const dropdownContainerUnGrouped: string;
 export declare const dropdownGroup: string;
 export declare const dropdownGroupSelectable: string;
 export declare const dropdownGroupWrapper: string;
+export declare const dropdownItemBase: string;
 export declare const dropdownItem: import("@vanilla-extract/recipes").RuntimeFn<{
     selected: {
         true: {

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

@@ -1 +1 @@
-{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,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"}
+{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,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,gBAAgB,QAgB3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;EA2BvB,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/dropdown.css.js

@@ -7,15 +7,15 @@ var dropdownContainerUnGrouped = "uv_5kpm8k3";
 var dropdownGroup = "uv_5kpm8k4";
 var dropdownGroupSelectable = "uv_5kpm8k5";
 var dropdownGroupWrapper = "uv_5kpm8k6";
-var dropdownItem = createRuntimeFn({ defaultClassName: "uv_5kpm8k7", variantClassNames: { selected: { true: "uv_5kpm8k8" }, disabled: { true: "uv_5kpm8k9" } }, defaultVariants: { disabled: false, selected: false }, compoundVariants: [] });
-var footer = "uv_5kpm8ka";
-var dropdownCheckbox = "uv_5kpm8kb";
-var dropdownEmptyState = "uv_5kpm8kc";
-var dropdownLoadMore = "uv_5kpm8kd";
-var dropdownInfo = "uv_5kpm8ke";
-var dropdownInfoTextItem = "uv_5kpm8kf";
-var dropdownInfoContainer = "uv_5kpm8kg";
-var searchBar = "uv_5kpm8kh";
+var dropdownItem = createRuntimeFn({ defaultClassName: "uv_5kpm8k8 uv_5kpm8k7", variantClassNames: { selected: { true: "uv_5kpm8k9" }, disabled: { true: "uv_5kpm8ka" } }, defaultVariants: { disabled: false, selected: false }, compoundVariants: [] });
+var footer = "uv_5kpm8kb";
+var dropdownCheckbox = "uv_5kpm8kc";
+var dropdownEmptyState = "uv_5kpm8kd";
+var dropdownLoadMore = "uv_5kpm8ke";
+var dropdownInfo = "uv_5kpm8kf";
+var dropdownInfoTextItem = "uv_5kpm8kg";
+var dropdownInfoContainer = "uv_5kpm8kh";
+var searchBar = "uv_5kpm8ki";
 export {
   dropdown,
   dropdownCheckbox,

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

@@ -1,5 +1,4 @@
 /* empty css                                 */
-/* empty css                             */
 /* empty css                                    */
 /* empty css                          */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";

package/dist/components/SelectableCard/variables.css.js

@@ -1,3 +1,4 @@
+/* empty css                             */
 var inputDisplay = "var(--uv_18vc4d30)";
 var labelDisplay = "var(--uv_18vc4d31)";
 var widthSelectable = "var(--uv_18vc4d32)";

package/dist/components/compositions/OptionSelector/RevealOnHover.d.ts

@@ -0,0 +1,6 @@
+import type { ReactNode } from 'react';
+export declare const RevealOnHover: ({ content, hoverContent, }: {
+    content: ReactNode;
+    hoverContent: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=RevealOnHover.d.ts.map

package/dist/components/compositions/OptionSelector/RevealOnHover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RevealOnHover.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/RevealOnHover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,eAAO,MAAM,aAAa,GAAI,4BAG3B;IACD,OAAO,EAAE,SAAS,CAAA;IAClB,YAAY,EAAE,SAAS,CAAA;CACxB,4CAKA,CAAA"}

package/dist/components/compositions/OptionSelector/RevealOnHover.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { revealOnHover } from "./styles.css.js";
+const RevealOnHover = ({
+  content,
+  hoverContent
+}) => /* @__PURE__ */ jsxs("div", { className: revealOnHover, children: [
+  /* @__PURE__ */ jsx("div", { "data-visibility": "unhover", children: content }),
+  /* @__PURE__ */ jsx("div", { "data-visibility": "hover", children: hoverContent })
+] });
+export {
+  RevealOnHover
+};

package/dist/components/compositions/OptionSelector/__mock__/resources.d.ts

@@ -0,0 +1,35 @@
+export declare const firstSelectorOptions: {
+    content: import("react/jsx-runtime").JSX.Element;
+    icon: import("react/jsx-runtime").JSX.Element;
+    value: string;
+}[];
+export declare const franceOptions: ({
+    content: import("react/jsx-runtime").JSX.Element;
+    hoverContent: import("react/jsx-runtime").JSX.Element;
+    icon: import("react/jsx-runtime").JSX.Element;
+    optionalInfo: import("react/jsx-runtime").JSX.Element;
+    value: string;
+} | {
+    content: import("react/jsx-runtime").JSX.Element;
+    hoverContent: import("react/jsx-runtime").JSX.Element;
+    icon: import("react/jsx-runtime").JSX.Element;
+    value: string;
+    optionalInfo?: undefined;
+})[];
+export declare const polandOptions: {
+    content: import("react/jsx-runtime").JSX.Element;
+    hoverContent: import("react/jsx-runtime").JSX.Element;
+    icon: import("react/jsx-runtime").JSX.Element;
+    value: string;
+}[];
+export declare const netherlandsOptions: {
+    content: import("react/jsx-runtime").JSX.Element;
+    hoverContent: import("react/jsx-runtime").JSX.Element;
+    icon: import("react/jsx-runtime").JSX.Element;
+    value: string;
+}[];
+export type ValueType = {
+    first?: string;
+    second?: string;
+};
+//# sourceMappingURL=resources.d.ts.map

package/dist/components/compositions/OptionSelector/__mock__/resources.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resources.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/OptionSelector/__mock__/resources.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;;;GA2ChC,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;IAwEzB,CAAA;AAED,eAAO,MAAM,aAAa;;;;;GAmEzB,CAAA;AAED,eAAO,MAAM,kBAAkB;;;;;GAmE9B,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA"}

package/dist/components/compositions/OptionSelector/index.d.ts

@@ -0,0 +1,7 @@
+import type { OptionSelectorProps } from './types';
+/**
+ * A compound selection component that displays two sequential select inputs
+ * where the first selection contextualizes and filters the options available in the second.
+ */
+export declare const OptionSelector: ({ className, style, "data-testid": dataTestId, firstSelector, secondSelector, size, disabled, readOnly, "aria-label": ariaLabel, error, required, onChange, name, value, }: OptionSelectorProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/compositions/OptionSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,mBAAmB,EAAkB,MAAM,SAAS,CAAA;AA0ClE;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,4KAe5B,mBAAmB,4CAgHrB,CAAA"}

package/dist/components/compositions/OptionSelector/index.js

@@ -0,0 +1,149 @@
+"use client";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { RayStartArrowIcon } from "@ultraviolet/icons";
+import { cn } from "@ultraviolet/utils";
+import { useMemo } from "react";
+import { Label } from "../../Label/index.js";
+import { SelectInput } from "../../SelectInput/index.js";
+import { Stack } from "../../Stack/index.js";
+import { RevealOnHover } from "./RevealOnHover.js";
+import { firstLabel, secondLabel, firstSelectInput, arrow, secondSelectInput, optionSelectorWrapper } from "./styles.css.js";
+const IconWithContent = ({
+  content,
+  icon
+}) => /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1.5", children: [
+  icon,
+  content
+] });
+const makeSelectInputOptions = (options) => options.map((option) => {
+  const optionLabel = option.hoverContent ? /* @__PURE__ */ jsx(
+    RevealOnHover,
+    {
+      content: /* @__PURE__ */ jsx(IconWithContent, { content: option.content, icon: option.icon }),
+      hoverContent: /* @__PURE__ */ jsx(IconWithContent, { content: option.hoverContent, icon: option.icon })
+    }
+  ) : /* @__PURE__ */ jsx(IconWithContent, { content: option.content, icon: option.icon });
+  return {
+    disabled: option.disabled,
+    label: optionLabel,
+    optionalInfo: option.optionalInfo,
+    searchText: option.value,
+    tooltip: option.tooltip,
+    value: option.value
+  };
+});
+const OptionSelector = ({
+  className,
+  style,
+  "data-testid": dataTestId,
+  firstSelector,
+  secondSelector,
+  size = "large",
+  disabled,
+  readOnly,
+  "aria-label": ariaLabel,
+  error,
+  required,
+  onChange,
+  name,
+  value
+}) => {
+  const firstValue = useMemo(() => {
+    if (value?.first) {
+      return value.first;
+    }
+    if (firstSelector.options.length === 1) {
+      onChange?.({
+        first: firstSelector.options[0].value,
+        second: value?.second
+      });
+      return firstSelector.options[0].value;
+    }
+    return void 0;
+  }, [value?.first, value?.second, onChange, firstSelector]);
+  const secondValue = useMemo(() => {
+    if (value?.second) {
+      return value.second;
+    }
+    if (secondSelector?.options.length === 1) {
+      onChange?.({
+        first: value?.first,
+        second: secondSelector.options[0].value
+      });
+      return secondSelector?.options[0].value;
+    }
+    return void 0;
+  }, [secondSelector, value?.first, value?.second, onChange]);
+  const firstSelectorOptions = makeSelectInputOptions(firstSelector.options);
+  const secondSelectorOptions = secondSelector?.options ? makeSelectInputOptions(secondSelector.options) : void 0;
+  const onChangeFirstSelector = (val) => {
+    onChange?.({ first: val, second: value?.second });
+  };
+  const onChangeSecondSelector = (val) => onChange?.({ first: value?.first, second: val });
+  return /* @__PURE__ */ jsxs(
+    "fieldset",
+    {
+      "aria-label": ariaLabel,
+      "aria-required": required,
+      className: cn(className, optionSelectorWrapper),
+      "data-testid": dataTestId,
+      name,
+      style,
+      children: [
+        /* @__PURE__ */ jsx(Label, { className: firstLabel, children: firstSelector.label }),
+        firstValue && secondSelector && secondSelectorOptions ? /* @__PURE__ */ jsx(Label, { className: secondLabel, children: secondSelector?.label }) : null,
+        /* @__PURE__ */ jsx(
+          SelectInput,
+          {
+            className: firstSelectInput,
+            "data-testid": "first-selector",
+            disabled: firstSelector.disabled || disabled,
+            error: error || firstSelector.error,
+            helper: firstSelector.helper,
+            labelDescription: firstSelector.labelDescription,
+            onChange: onChangeFirstSelector,
+            optionalInfoPlacement: "right",
+            options: firstSelectorOptions,
+            placeholder: firstSelector.placeholder,
+            readOnly: firstSelector.options.length === 1 || firstSelector.readOnly || readOnly,
+            required,
+            size,
+            value: firstValue
+          }
+        ),
+        firstValue && secondSelector && secondSelectorOptions ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            RayStartArrowIcon,
+            {
+              className: arrow,
+              prominence: "weak",
+              sentiment: "neutral",
+              size
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectInput,
+            {
+              className: secondSelectInput,
+              "data-testid": "second-selector",
+              disabled: !!firstSelector.error || secondSelector.disabled || disabled,
+              error: !!error || secondSelector.error,
+              helper: secondSelector.helper,
+              labelDescription: secondSelector.labelDescription,
+              onChange: onChangeSecondSelector,
+              optionalInfoPlacement: "right",
+              options: secondSelectorOptions,
+              placeholder: secondSelector.placeholder,
+              readOnly: secondSelector.options.length === 1 || secondSelector.readOnly || readOnly,
+              size,
+              value: secondValue
+            }
+          )
+        ] }) : null
+      ]
+    }
+  );
+};
+export {
+  OptionSelector
+};

package/dist/components/compositions/OptionSelector/styles.css.d.ts

@@ -0,0 +1,8 @@
+export declare const optionSelectorWrapper: string;
+export declare const revealOnHover: string;
+export declare const firstLabel: string;
+export declare const secondLabel: string;
+export declare const firstSelectInput: string;
+export declare const secondSelectInput: string;
+export declare const arrow: string;
+//# sourceMappingURL=styles.css.d.ts.map

package/dist/components/compositions/OptionSelector/styles.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,QAMhC,CAAA;AAEF,eAAO,MAAM,aAAa,QAAY,CAAA;AAwBtC,eAAO,MAAM,UAAU,QAGrB,CAAA;AAEF,eAAO,MAAM,WAAW,QAGtB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAG3B,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAG5B,CAAA;AAEF,eAAO,MAAM,KAAK,QAGhB,CAAA"}

package/dist/components/compositions/OptionSelector/styles.css.js

@@ -0,0 +1,19 @@
+/* empty css                                                     */
+/* empty css                                                       */
+/* empty css                          */
+var optionSelectorWrapper = "uv_12opk3l0";
+var revealOnHover = "uv_12opk3l1";
+var firstLabel = "uv_12opk3l2";
+var secondLabel = "uv_12opk3l3";
+var firstSelectInput = "uv_12opk3l4";
+var secondSelectInput = "uv_12opk3l5";
+var arrow = "uv_12opk3l6";
+export {
+  arrow,
+  firstLabel,
+  firstSelectInput,
+  optionSelectorWrapper,
+  revealOnHover,
+  secondLabel,
+  secondSelectInput
+};

package/dist/components/compositions/OptionSelector/types.d.ts

@@ -0,0 +1,37 @@
+import type { ComponentProps, CSSProperties, ReactNode } from 'react';
+import type { SelectInput } from '../../SelectInput';
+export type SelectorOption = {
+    content: ReactNode;
+    icon?: ReactNode;
+    value: string;
+    hoverContent?: ReactNode;
+    disabled?: boolean;
+    tooltip?: string;
+    optionalInfo?: ReactNode;
+};
+export type SelectorProps = Pick<ComponentProps<typeof SelectInput>, 'label' | 'labelDescription' | 'error' | 'disabled' | 'helper' | 'readOnly' | 'placeholder'> & {
+    options: SelectorOption[];
+};
+export type OptionSelectorProps = {
+    className?: string;
+    'data-testid'?: string;
+    style?: CSSProperties;
+    firstSelector: SelectorProps;
+    secondSelector?: SelectorProps;
+    size?: ComponentProps<typeof SelectInput>['size'];
+    disabled?: boolean;
+    readOnly?: boolean;
+    name?: string;
+    'aria-label'?: string;
+    error?: string | boolean;
+    required?: boolean;
+    onChange?: (values: {
+        first?: string;
+        second?: string;
+    }) => void;
+    value?: {
+        first?: string;
+        second?: string;
+    };
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/components/compositions/OptionSelector/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,WAAW,CAAC,EAChC,OAAO,GACP,kBAAkB,GAClB,OAAO,GACP,UAAU,GACV,QAAQ,GACR,UAAU,GACV,aAAa,CAChB,GAAG;IAAE,OAAO,EAAE,cAAc,EAAE,CAAA;CAAE,CAAA;AAEjC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,aAAa,EAAE,aAAa,CAAA;IAC5B,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAChE,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAC5C,CAAA"}

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

@@ -0,0 +1,2 @@
+export { OptionSelector } from './OptionSelector';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/compositions/index.js

@@ -0,0 +1,4 @@
+import { OptionSelector } from "./OptionSelector/index.js";
+export {
+  OptionSelector
+};