@ultraviolet/ui 3.3.1 → 3.5.0

package/dist/components/TreeMapChart/index.js

@@ -2,10 +2,10 @@
 import { jsx } from "react/jsx-runtime";
 import { ResponsiveTreeMapHtml } from "@nivo/treemap";
 import { useTheme } from "@ultraviolet/themes";
+import { cn } from "@ultraviolet/utils";
 import { useMemo, useCallback } from "react";
 import { getDataColors } from "../../helpers/treeMap.js";
-import { Text } from "../Text/index.js";
-import { treeMapContentWrapper } from "./styles.css.js";
+import { treeMapContainer } from "./styles.css.js";
 import { Tooltip } from "./Tooltip.js";
 const TreeMapChart = ({
   height = "537px",
@@ -17,7 +17,6 @@ const TreeMapChart = ({
   "data-testid": dataTestId
 }) => {
   const theme = useTheme();
-  const DEFAULT_COLOR = theme.colors.primary.text;
   const colors = useMemo(() => getDataColors(data, theme), [data, theme]);
   const tooltip = useCallback(
     (props) => {
@@ -26,48 +25,46 @@ const TreeMapChart = ({
     },
     [tooltipFunction]
   );
-  const nodeComponent = useCallback(
-    ({ node }) => {
-      const backgroundColor = colors[node.data.id] || DEFAULT_COLOR;
-      const spacing = 4;
-      return /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: treeMapContentWrapper,
-          onMouseEnter: node.onMouseEnter,
-          onMouseLeave: node.onMouseLeave,
-          onMouseMove: node.onMouseMove,
-          style: {
-            backgroundColor,
-            height: node.height - spacing,
-            left: node.x + spacing / 2,
-            top: node.y + spacing / 2,
-            width: node.width - spacing
-          },
-          children: /* @__PURE__ */ jsx(Text, { as: "div", oneLine: true, variant: "captionStrong", children: node.data.content })
-        }
-      );
-    },
-    [colors, DEFAULT_COLOR]
+  const nivoTheme = useMemo(
+    () => ({
+      labels: {
+        text: theme.typography.captionStrong
+      }
+    }),
+    [theme.typography.captionStrong]
   );
-  return /* @__PURE__ */ jsx("div", { className, "data-testid": dataTestId, style: { height }, children: /* @__PURE__ */ jsx(
-    ResponsiveTreeMapHtml,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      animate: false,
-      data,
-      enableParentLabel: false,
-      identity: "id",
-      labelSkipSize: 0,
-      leavesOnly: true,
-      motionConfig: "none",
-      nodeComponent,
-      orientLabel: false,
-      tile: "squarify",
-      tooltip,
-      value: "value",
-      ...chartProps
+      className: cn(className, treeMapContainer),
+      "data-testid": dataTestId,
+      style: { height },
+      children: /* @__PURE__ */ jsx(
+        ResponsiveTreeMapHtml,
+        {
+          animate: false,
+          borderColor: theme.colors.neutral.background,
+          borderWidth: 2,
+          colors,
+          data,
+          enableParentLabel: false,
+          identity: "id",
+          label: (node) => typeof node.data.content === "string" ? node.data.content : node.id,
+          labelSkipSize: 20,
+          labelTextColor: theme.colors.neutral.background,
+          leavesOnly: true,
+          motionConfig: "none",
+          nodeOpacity: 1,
+          orientLabel: false,
+          theme: nivoTheme,
+          tile: "squarify",
+          tooltip,
+          value: "value",
+          ...chartProps
+        }
+      )
     }
-  ) });
+  );
 };
 export {
   TreeMapChart

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

@@ -1,3 +1,3 @@
 export declare const treeMapTooltipContainer: string;
-export declare const treeMapContentWrapper: string;
+export declare const treeMapContainer: string;
 //# sourceMappingURL=styles.css.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/TreeMapChart/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,QAOlC,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAKhC,CAAA"}
+{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../src/components/TreeMapChart/styles.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,uBAAuB,QAOlC,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAE3B,CAAA"}

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

@@ -1,7 +1,7 @@
 /* empty css                          */
 var treeMapTooltipContainer = "uv_1pnrimq0";
-var treeMapContentWrapper = "uv_1pnrimq1";
+var treeMapContainer = "uv_1pnrimq1";
 export {
-  treeMapContentWrapper,
+  treeMapContainer,
   treeMapTooltipContainer
 };

package/dist/components/UnitInput/index.js

@@ -183,7 +183,7 @@ const UnitInput = ({
             children: error || success || helper
           }
         ) : null,
-        !error && !success && typeof helper !== "string" && helper ? helper : null
+        !(error || success) && typeof helper !== "string" && helper ? helper : null
       ]
     }
   );

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

@@ -1,10 +1,10 @@
 /* empty css                                                     */
 /* empty css                          */
 var widthSelectInput = "var(--uv_gwf0fl0)";
-var unitInputNumber = { small: "uv_gwf0fl2 uv_gwf0fl1", medium: "uv_gwf0fl3 uv_gwf0fl1", large: "uv_gwf0fl4 uv_gwf0fl1" };
-var unitInputState = { readOnly: "uv_gwf0fl6 uv_gwf0fl5", disabled: "uv_gwf0fl7 uv_gwf0fl5", success: "uv_gwf0fl8 uv_gwf0fl5", error: "uv_gwf0fl9 uv_gwf0fl5", "default": "uv_gwf0fla uv_gwf0fl5" };
+var unitInputNumber = { large: "uv_gwf0fl2 uv_gwf0fl1", medium: "uv_gwf0fl3 uv_gwf0fl1", small: "uv_gwf0fl4 uv_gwf0fl1" };
+var unitInputState = { "default": "uv_gwf0fl6 uv_gwf0fl5", disabled: "uv_gwf0fl7 uv_gwf0fl5", error: "uv_gwf0fl8 uv_gwf0fl5", readOnly: "uv_gwf0fl9 uv_gwf0fl5", success: "uv_gwf0fla uv_gwf0fl5" };
 var unitInputNumberWrapper = "uv_gwf0flb";
-var unitInputSize = { small: "uv_gwf0flc", medium: "uv_gwf0fld", large: "uv_gwf0fle" };
+var unitInputSize = { large: "uv_gwf0flc", medium: "uv_gwf0fld", small: "uv_gwf0fle" };
 var unitInputUnitWidth = "uv_gwf0flf";
 var unitInputUnit = "uv_gwf0flg";
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VerificationCode/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAGV,aAAa,EAGb,SAAS,EACV,MAAM,OAAO,CAAA;AAWd,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,8NAoB9B,qBAAqB,4CAwNvB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/VerificationCode/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAGV,aAAa,EAGb,SAAS,EACV,MAAM,OAAO,CAAA;AAWd,KAAK,qBAAqB,GAAG;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;IAC9C;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAClC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACpC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAA;IACxB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,GAAI,8NAoB9B,qBAAqB,4CAyNvB,CAAA"}

package/dist/components/VerificationCode/index.js

@@ -195,13 +195,13 @@ const VerificationCode = ({
           {
             as: "p",
             disabled,
-            prominence: !error && !success ? "weak" : "default",
+            prominence: error || success ? "default" : "weak",
             sentiment,
             variant: "caption",
             children: error || success || helper
           }
         ) : null,
-        !error && !success && typeof helper !== "string" && helper ? helper : null
+        !(error || success) && typeof helper !== "string" && helper ? helper : null
       ]
     }
   );

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

@@ -1,5 +1,5 @@
 /* empty css                          */
-var inputSizes = { small: "uv_1k9synd0", medium: "uv_1k9synd1", large: "uv_1k9synd2", xlarge: "uv_1k9synd3" };
+var inputSizes = { large: "uv_1k9synd0", medium: "uv_1k9synd1", small: "uv_1k9synd2", xlarge: "uv_1k9synd3" };
 var inputClass = "uv_1k9synd4";
 var filedSetClass = "uv_1k9synd5";
 export {

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":"AAqBA,OAAO,KAAK,EAAE,mBAAmB,EAAkB,MAAM,SAAS,CAAA;AA+ClE;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,4KAe5B,mBAAmB,4CA0IrB,CAAA"}

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

@@ -0,0 +1,181 @@
+"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 { Text } from "../../Text/index.js";
+import { RevealOnHover } from "./RevealOnHover.js";
+import { firstLabel, secondLabel, firstSelectInput, arrow, secondSelectInput, errorFirstSelector, errorSecondSelector, 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 })
+    },
+    option.value
+  ) : /* @__PURE__ */ jsx(
+    IconWithContent,
+    {
+      content: option.content,
+      icon: option.icon
+    },
+    option.value
+  );
+  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 (
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: to fix
+    /* @__PURE__ */ jsxs(
+      "fieldset",
+      {
+        "aria-label": ariaLabel,
+        "aria-required": required,
+        className: cn(className, optionSelectorWrapper),
+        "data-testid": dataTestId,
+        name,
+        style,
+        children: [
+          /* @__PURE__ */ jsx(Label, { className: firstLabel, required, children: firstSelector.label }),
+          firstValue && secondSelector && secondSelectorOptions ? /* @__PURE__ */ jsx(Label, { className: secondLabel, required, 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,
+          firstSelector.error && typeof firstSelector.error === "string" ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "p",
+              className: errorFirstSelector,
+              sentiment: "danger",
+              variant: "caption",
+              children: firstSelector.error
+            }
+          ) : null,
+          secondSelector?.error && typeof secondSelector?.error === "string" ? /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "p",
+              className: errorSecondSelector,
+              sentiment: "danger",
+              variant: "caption",
+              children: secondSelector.error
+            }
+          ) : null
+        ]
+      }
+    )
+  );
+};
+export {
+  OptionSelector
+};

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

@@ -0,0 +1,10 @@
+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;
+export declare const errorFirstSelector: string;
+export declare const errorSecondSelector: 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;AAEF,eAAO,MAAM,kBAAkB,QAI7B,CAAA;AAEF,eAAO,MAAM,mBAAmB,QAI9B,CAAA"}

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

@@ -0,0 +1,23 @@
+/* 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";
+var errorFirstSelector = "uv_12opk3l7";
+var errorSecondSelector = "uv_12opk3l8";
+export {
+  arrow,
+  errorFirstSelector,
+  errorSecondSelector,
+  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
+};

package/dist/helpers/treeMap.d.ts

@@ -1,7 +1,6 @@
 import type { DefaultTreeMapDatum } from '@nivo/treemap';
 import type { consoleLightTheme } from '@ultraviolet/themes';
 type Theme = typeof consoleLightTheme;
-type ReturnType = Record<string, string>;
 /**
  * Recursively collects all IDs from a tree map data structure.
  *
@@ -65,11 +64,11 @@ export declare const getOpacity: (n: number) => number;
  */
 export declare const percentToHex: (percentage: number) => string;
 /**
- * Generates a color mapping for tree map data with graduated opacity values.
+ * Generates the needed colors for the tree map with graduated opacity values.
  *
  * @param {DefaultTreeMapDatum} data - The tree map data structure to generate colors for
  * @param {Theme} theme - The theme object containing color configuration
- * @returns {ReturnType} An object mapping node IDs to color strings in hex format with alpha channel
+ * @returns {string[]} An array of color strings in hex format with alpha channel
  *
  * @description
  * This function creates a color scheme for a tree map visualization by:
@@ -85,8 +84,8 @@ export declare const percentToHex: (percentage: number) => string;
  * const data = { id: 'root', children: [{ id: 'child1' }, { id: 'child2' }] }
  * const theme = { colors: { primary: { text: '#3B82F6' } } }
  * getDataColors(data, theme)
- * // returns { 'root': '#3B82F6FF', 'child1': '#3B82F600', 'child2': '#3B82F610' }
+ * // returns { '#3B82F6FF', '#3B82F600', '#3B82F610' }
  */
-export declare const getDataColors: (data: DefaultTreeMapDatum, theme: Theme) => ReturnType;
+export declare const getDataColors: (data: DefaultTreeMapDatum, theme: Theme) => string[];
 export {};
 //# sourceMappingURL=treeMap.d.ts.map

package/dist/helpers/treeMap.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"treeMap.d.ts","sourceRoot":"","sources":["../../src/helpers/treeMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAE5D,KAAK,KAAK,GAAG,OAAO,iBAAiB,CAAA;AACrC,KAAK,UAAU,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,SAAS,GAAI,MAAM,mBAAmB,KAAG,MAAM,EAU3D,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,UAAU,GAAI,GAAG,MAAM,KAAG,MAkBtC,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,GAAI,YAAY,MAAM,KAAG,MAKjD,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,aAAa,GACxB,MAAM,mBAAmB,EACzB,OAAO,KAAK,KACX,UAaF,CAAA"}
+{"version":3,"file":"treeMap.d.ts","sourceRoot":"","sources":["../../src/helpers/treeMap.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,eAAe,CAAA;AACxD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAE5D,KAAK,KAAK,GAAG,OAAO,iBAAiB,CAAA;AAErC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,SAAS,GAAI,MAAM,mBAAmB,KAAG,MAAM,EAU3D,CAAA;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,UAAU,GAAI,GAAG,MAAM,KAAG,MAkBtC,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,YAAY,GAAI,YAAY,MAAM,KAAG,MAKjD,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,aAAa,GACxB,MAAM,mBAAmB,EACzB,OAAO,KAAK,KACX,MAAM,EASR,CAAA"}

package/dist/helpers/treeMap.js

@@ -28,11 +28,13 @@ const percentToHex = (percentage) => {
 };
 const getDataColors = (data, theme) => {
   const baseColor = theme.colors.primary.text;
-  const colors = {};
-  getAllIds(data).forEach((element, key) => {
-    colors[element] = `${baseColor}${percentToHex(getOpacity((100 - key) % 100))}`;
-  });
-  return colors;
+  return getAllIds(data).map(
+    (_, index) => (
+      // if we have more than 100 elements, we use the mod function to be able to return to the start
+      // as we only have 100 transparency values for a given color
+      `${baseColor}${percentToHex(getOpacity((100 - index) % 100))}`
+    )
+  );
 };
 export {
   getAllIds,

package/dist/theme/ThemeProvider.d.ts

@@ -598,6 +598,39 @@ export declare const useTheme: () => {
             textDecoration: string;
             weight: string;
         };
+        codeSmall: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        codeSmallStrong: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
+        codeSmallStronger: {
+            fontFamily: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            paragraphSpacing: string;
+            textCase: string;
+            textDecoration: string;
+            weight: string;
+        };
         codeStrong: {
             fontFamily: string;
             fontSize: string;