@ultraviolet/ui 3.0.0-beta.25 → 3.0.0-beta.27

package/dist/components/SelectInput/components/SelectBar.cjs

@@ -1,237 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const Icon = require("@ultraviolet/icons");
-const dynamic = require("@vanilla-extract/dynamic");
-const react = require("react");
-const index$3 = require("../../Button/index.cjs");
-const index$2 = require("../../Stack/index.cjs");
-const index$4 = require("../../Tag/index.cjs");
-const index$1 = require("../../Text/index.cjs");
-const index = require("../../Tooltip/index.cjs");
-const findOptionInOptions = require("../findOptionInOptions.cjs");
-const SelectInputProvider = require("../SelectInputProvider.cjs");
-const selectBar_css = require("./selectBar.css.cjs");
-const SIZES_TAG = {
-  gap: 8,
-  paddings: 16
-};
-const DisplayValues = ({
-  refTag,
-  nonOverflowedValues,
-  potentiallyNonOverflowedValues,
-  disabled,
-  readOnly,
-  overflowed,
-  overflowAmount,
-  size,
-  measureRef,
-  lastElementMaxWidth,
-  overflow,
-  refPlusTag,
-  displayShadowCopy
-}) => {
-  const {
-    multiselect,
-    selectedData,
-    setSelectedData,
-    options,
-    onChange
-  } = SelectInputProvider.useSelectInput();
-  return multiselect ? /* @__PURE__ */ jsxRuntime.jsxs(index$2.Stack, { alignItems: "center", className: selectBar_css.multiselectStack, direction: "row", gap: "1", ref: refTag, wrap: "nowrap", children: [
-    displayShadowCopy ? /* @__PURE__ */ jsxRuntime.jsx("div", { ref: measureRef, style: {
-      position: "absolute"
-    }, children: potentiallyNonOverflowedValues.map((option) => /* @__PURE__ */ jsxRuntime.jsx(index$4.Tag, { className: `${option.value} ${selectBar_css.selectBarTags.hidden}`, onClose: () => {
-    }, children: option?.label }, option.value)) }) : null,
-    nonOverflowedValues.map((option, index2) => /* @__PURE__ */ jsxRuntime.jsx(index$4.Tag, { className: selectBar_css.selectBarTags.visible, "data-testid": "selected-options-tags", disabled, onClose: !readOnly ? (event) => {
-      event.stopPropagation();
-      setSelectedData({
-        clickedOption: option,
-        type: "selectOption"
-      });
-      const newSelectedValues = selectedData.selectedValues?.filter((val) => val !== option.value);
-      onChange?.(newSelectedValues);
-    } : void 0, sentiment: "neutral", style: index2 === nonOverflowedValues.length - 1 && overflow ? dynamic.assignInlineVars({
-      [selectBar_css.minWidthTag]: "auto",
-      [selectBar_css.maxWidthTag]: `${lastElementMaxWidth}px`
-    }) : void 0, children: option?.label }, option?.value)),
-    overflowed ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Stack, { justifyContent: "center", ref: refPlusTag, children: /* @__PURE__ */ jsxRuntime.jsxs(index$4.Tag, { "aria-label": "Plus tag", className: selectBar_css.plusTag, "data-testid": "plus-tag", disabled, sentiment: "neutral", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Icon.PlusIcon, { size: "xsmall" }),
-      overflowAmount
-    ] }, "+") }) : null
-  ] }) : /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "span", className: selectBar_css.selectedValues, disabled, prominence: "default", sentiment: "neutral", variant: size === "large" ? "body" : "bodySmall", children: selectedData.selectedValues[0] ? findOptionInOptions.findOptionInOptions(options, selectedData.selectedValues[0])?.label : null });
-};
-const SelectBar = ({
-  size,
-  clearable,
-  disabled,
-  readOnly,
-  placeholder,
-  success,
-  error,
-  autoFocus,
-  tooltip,
-  innerRef,
-  id,
-  "data-testid": dataTestId,
-  label,
-  dropdownId
-}) => {
-  const {
-    isDropdownVisible,
-    onChange,
-    setIsDropdownVisible,
-    options,
-    selectedData,
-    setSelectedData,
-    multiselect
-  } = SelectInputProvider.useSelectInput();
-  const openable = !(readOnly || disabled);
-  const [displayShadowCopy, setDisplayShadowCopy] = react.useState(false);
-  const refTag = react.useRef(null);
-  const measureRef = react.useRef(null);
-  const arrowRef = react.useRef(null);
-  const refPlusTag = react.useRef(null);
-  const [overflowAmount, setOverflowAmount] = react.useState(0);
-  const [overflow, setOverflow] = react.useState(false);
-  const [lastElementMaxWidth, setLastElementMaxWidth] = react.useState(0);
-  const [nonOverflowedValues, setNonOverFlowedValues] = react.useState(() => {
-    if (selectedData.selectedValues[0]) {
-      const firstSelectOption = findOptionInOptions.findOptionInOptions(options, selectedData.selectedValues[0]);
-      return firstSelectOption ? [firstSelectOption] : [];
-    }
-    return [];
-  });
-  const potentiallyNonOverflowedValues = react.useMemo(() => selectedData.selectedValues.map((selectedValue) => findOptionInOptions.findOptionInOptions(options, selectedValue)).filter((option) => !!option), [options, selectedData.selectedValues]);
-  const state = react.useMemo(() => {
-    if (error) {
-      return "danger";
-    }
-    if (success) {
-      return "success";
-    }
-    return "neutral";
-  }, [error, success]);
-  react.useEffect(() => {
-    setDisplayShadowCopy(true);
-  }, [selectedData.selectedValues.length]);
-  const getWidth = react.useCallback(() => {
-    if (refTag.current) {
-      return refTag.current.offsetWidth;
-    }
-    return innerRef.current?.offsetWidth ?? 0 - (arrowRef.current?.offsetWidth ?? 0) - SIZES_TAG.paddings;
-  }, [innerRef.current?.offsetWidth]);
-  react.useLayoutEffect(() => {
-    if (selectedData.selectedValues.length === 0) {
-      setOverflowAmount(0);
-      setNonOverFlowedValues([]);
-    }
-    if (measureRef.current && selectedData.selectedValues.length > 0) {
-      const toMeasureElements = measureRef.current.children;
-      const toMeasureElementsArray = [...toMeasureElements];
-      const innerWidth = getWidth();
-      const {
-        measuredVisibleTags,
-        measuredHiddenTags,
-        accumulatedWidth,
-        lastVisibleElementWidth,
-        lastVisibleLabel
-      } = toMeasureElementsArray.reduce((accumulator, currentValue, index2) => {
-        const elementWidth = currentValue.offsetWidth;
-        const newAccumulatedWidth = accumulator.accumulatedWidth + elementWidth + SIZES_TAG.gap;
-        const canBeVisible = newAccumulatedWidth <= innerWidth;
-        return {
-          accumulatedWidth: !canBeVisible ? accumulator.accumulatedWidth : newAccumulatedWidth,
-          lastVisibleElementWidth: canBeVisible ? elementWidth : accumulator.lastVisibleElementWidth,
-          lastVisibleLabel: canBeVisible ? potentiallyNonOverflowedValues[index2].label : accumulator.lastVisibleLabel,
-          measuredHiddenTags: accumulator.measuredHiddenTags + (!canBeVisible ? 1 : 0),
-          measuredVisibleTags: [...accumulator.measuredVisibleTags, canBeVisible && potentiallyNonOverflowedValues[index2]].filter(Boolean)
-        };
-      }, {
-        accumulatedWidth: 0,
-        lastVisibleElementWidth: 0,
-        lastVisibleLabel: "",
-        measuredHiddenTags: 0,
-        measuredVisibleTags: []
-      });
-      const additionnalElementsWidth = SIZES_TAG.paddings + (refPlusTag.current?.offsetWidth ?? 0);
-      const finalWidth = accumulatedWidth + (measuredHiddenTags ? additionnalElementsWidth : 0);
-      const overflowPx = finalWidth - innerWidth;
-      const hasOverflow = overflowPx > 0;
-      const hasHiddenTags = measuredHiddenTags > 0;
-      const lastVisibleElementMaxSize = lastVisibleElementWidth - overflowPx;
-      if (measuredHiddenTags === 1 && measuredVisibleTags.length === 0) {
-        setOverflowAmount(0);
-        setNonOverFlowedValues([potentiallyNonOverflowedValues[0]]);
-        const newOverflowPx = lastVisibleElementWidth + (measuredHiddenTags > 1 ? additionnalElementsWidth : 0) - innerWidth;
-        setLastElementMaxWidth(lastVisibleElementWidth - newOverflowPx);
-        setOverflow(true);
-      } else if (hasOverflow && hasHiddenTags && (lastVisibleElementMaxSize > 65 || measuredVisibleTags.length === 1 && lastVisibleElementMaxSize > 65) && typeof lastVisibleLabel === "string") {
-        setLastElementMaxWidth(lastVisibleElementMaxSize);
-        setOverflow(true);
-        setOverflowAmount(measuredHiddenTags);
-        setNonOverFlowedValues(measuredVisibleTags);
-      } else if (hasOverflow && hasHiddenTags) {
-        setLastElementMaxWidth(0);
-        setOverflow(false);
-        setOverflowAmount(measuredHiddenTags + 1);
-        setNonOverFlowedValues(measuredVisibleTags.slice(0, -1));
-      } else {
-        setOverflow(false);
-        setOverflowAmount(measuredHiddenTags);
-        setNonOverFlowedValues(measuredVisibleTags);
-      }
-    }
-    setDisplayShadowCopy(false);
-  }, [displayShadowCopy, potentiallyNonOverflowedValues, selectedData.selectedValues.length, getWidth]);
-  react.useEffect(() => {
-    setSelectedData({
-      type: "update"
-    });
-  }, [setSelectedData, options]);
-  const shouldDisplayValues = react.useMemo(() => {
-    if (multiselect) {
-      return potentiallyNonOverflowedValues.length > 0 || selectedData.selectedValues.some((selectedValue) => findOptionInOptions.findOptionInOptions(options, selectedValue) !== void 0);
-    }
-    return selectedData.selectedValues[0] !== void 0 && findOptionInOptions.findOptionInOptions(options, selectedData.selectedValues[0]) !== void 0;
-  }, [multiselect, options, potentiallyNonOverflowedValues.length, selectedData.selectedValues]);
-  return /* @__PURE__ */ jsxRuntime.jsx(index.Tooltip, { text: tooltip, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-controls": dropdownId, "aria-expanded": isDropdownVisible, "aria-label": label, autoFocus, className: selectBar_css.selectBar({
-    disabled,
-    dropdownVisible: isDropdownVisible,
-    readOnly,
-    size,
-    state
-  }), "data-disabled": disabled, "data-readonly": readOnly, "data-testid": dataTestId, id, onClick: openable ? () => setIsDropdownVisible(!isDropdownVisible) : void 0, onKeyDown: (event) => {
-    if (event.key === "ArrowDown") {
-      if (!isDropdownVisible) {
-        setIsDropdownVisible(true);
-      } else {
-        document.getElementById(`option-0`)?.focus();
-      }
-    }
-    if (event.key === " ") {
-      event.preventDefault();
-    }
-    return ["Enter", " "].includes(event.key) && openable ? setIsDropdownVisible(!isDropdownVisible) : null;
-  }, ref: innerRef, role: "combobox", tabIndex: 0, children: [
-    shouldDisplayValues ? /* @__PURE__ */ jsxRuntime.jsx(DisplayValues, { disabled, displayShadowCopy, lastElementMaxWidth, measureRef, nonOverflowedValues, overflow, overflowAmount, overflowed: !!overflowAmount, potentiallyNonOverflowedValues, readOnly, refPlusTag, refTag, size }) : /* @__PURE__ */ jsxRuntime.jsx(index$1.Text, { as: "span", className: selectBar_css.selectinputPlaceholder, disabled, prominence: "weak", sentiment: "neutral", variant: size === "large" ? "body" : "bodySmall", children: placeholder }),
-    /* @__PURE__ */ jsxRuntime.jsxs(index$2.Stack, { alignItems: "center", className: selectBar_css.selectbarState, direction: "row", gap: 1, ref: arrowRef, children: [
-      error ? /* @__PURE__ */ jsxRuntime.jsx(Icon.AlertCircleIcon, { sentiment: "danger" }) : null,
-      success && !error ? /* @__PURE__ */ jsxRuntime.jsx(Icon.CheckCircleIcon, { sentiment: "success" }) : null,
-      clearable && selectedData.selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(index$3.Button, { "aria-label": "clear value", "data-testid": "clear-all", disabled: disabled || !selectedData.selectedValues[0] || readOnly, onClick: (event) => {
-        event.stopPropagation();
-        setSelectedData({
-          type: "clearAll"
-        });
-        if (multiselect) {
-          onChange?.([]);
-        } else {
-          onChange?.("");
-        }
-      }, sentiment: "neutral", size: "small", variant: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(Icon.CloseIcon, {}) }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(Icon.ArrowDownIcon, { "aria-label": "show dropdown", disabled: disabled || readOnly, sentiment: "neutral", size: "small" })
-    ] })
-  ] }) });
-};
-exports.SelectBar = SelectBar;

package/dist/components/SelectInput/components/dropdown.css.cjs

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                              */
-const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var dropdown = "uv_5kpm8k0";
-var dropdownContainer = "uv_5kpm8k1";
-var dropdownContainerUnGrouped = "uv_5kpm8k2";
-var dropdownGroup = "uv_5kpm8k3";
-var dropdownGroupSelectable = "uv_5kpm8k4";
-var dropdownGroupWrapper = "uv_5kpm8k5";
-var dropdownItem = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_5kpm8k6", variantClassNames: { selected: { true: "uv_5kpm8k7" }, disabled: { true: "uv_5kpm8k8" } }, defaultVariants: { disabled: false, selected: false }, compoundVariants: [] });
-var footer = "uv_5kpm8k9";
-var dropdownCheckbox = "uv_5kpm8ka";
-var dropdownEmptyState = "uv_5kpm8kb";
-var dropdownLoadMore = "uv_5kpm8kc";
-var dropdownInfo = "uv_5kpm8kd";
-var dropdownInfoTextItem = "uv_5kpm8ke";
-var dropdownInfoContainer = "uv_5kpm8kf";
-var searchBar = "uv_5kpm8kg";
-exports.dropdown = dropdown;
-exports.dropdownCheckbox = dropdownCheckbox;
-exports.dropdownContainer = dropdownContainer;
-exports.dropdownContainerUnGrouped = dropdownContainerUnGrouped;
-exports.dropdownEmptyState = dropdownEmptyState;
-exports.dropdownGroup = dropdownGroup;
-exports.dropdownGroupSelectable = dropdownGroupSelectable;
-exports.dropdownGroupWrapper = dropdownGroupWrapper;
-exports.dropdownInfo = dropdownInfo;
-exports.dropdownInfoContainer = dropdownInfoContainer;
-exports.dropdownInfoTextItem = dropdownInfoTextItem;
-exports.dropdownItem = dropdownItem;
-exports.dropdownLoadMore = dropdownLoadMore;
-exports.footer = footer;
-exports.searchBar = searchBar;

package/dist/components/SelectInput/components/selectBar.css.cjs

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                               */
-const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var maxWidthTag = "var(--uv_1ba7knd0)";
-var minWidthTag = "var(--uv_1ba7knd1)";
-var selectbarState = "uv_1ba7knd2";
-var selectinputPlaceholder = "uv_1ba7knd3";
-var selectBar = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_1ba7knd5 uv_1ba7knd4", variantClassNames: { size: { small: "uv_1ba7knd6", medium: "uv_1ba7knd7", large: "uv_1ba7knd8" }, state: { neutral: "uv_1ba7knd9", success: "uv_1ba7knda", danger: "uv_1ba7kndb" }, dropdownVisible: { true: "uv_1ba7kndc" }, readOnly: { true: "uv_1ba7kndd" }, disabled: { true: "uv_1ba7knde" } }, defaultVariants: { state: "neutral", size: "large", dropdownVisible: false, readOnly: false, disabled: false }, compoundVariants: [[{ dropdownVisible: true, state: "neutral" }, "uv_1ba7kndf"], [{ dropdownVisible: true, state: "success" }, "uv_1ba7kndg"], [{ dropdownVisible: true, state: "danger" }, "uv_1ba7kndh"]] });
-var selectBarTags = { hidden: "uv_1ba7kndj uv_1ba7kndi", visible: "uv_1ba7kndk uv_1ba7kndi" };
-var selectedValues = "uv_1ba7kndl";
-var plusTag = "uv_1ba7kndm";
-var multiselectStack = "uv_1ba7kndn";
-exports.maxWidthTag = maxWidthTag;
-exports.minWidthTag = minWidthTag;
-exports.multiselectStack = multiselectStack;
-exports.plusTag = plusTag;
-exports.selectBar = selectBar;
-exports.selectBarTags = selectBarTags;
-exports.selectbarState = selectbarState;
-exports.selectedValues = selectedValues;
-exports.selectinputPlaceholder = selectinputPlaceholder;

package/dist/components/SelectInput/findOptionInOptions.cjs

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const findOptionInOptions = (options, optionValue) => {
-  let flatOptions = [];
-  if (!Array.isArray(options)) {
-    flatOptions = Object.keys(options).flatMap((group) => options[group]);
-  } else {
-    flatOptions = options;
-  }
-  return flatOptions.find((option) => option.value === optionValue);
-};
-exports.findOptionInOptions = findOptionInOptions;

package/dist/components/SelectInput/index.cjs

@@ -1,68 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const index$1 = require("../Label/index.cjs");
-const index = require("../Stack/index.cjs");
-const index$2 = require("../Text/index.cjs");
-const Dropdown = require("./components/Dropdown.cjs");
-const SelectBar = require("./components/SelectBar.cjs");
-const SelectInputProvider = require("./SelectInputProvider.cjs");
-const styles_css = require("./styles.css.cjs");
-const SelectInput = ({
-  name,
-  id,
-  onBlur,
-  onFocus,
-  onChange,
-  "aria-label": ariaLabel,
-  value,
-  label,
-  helper,
-  options,
-  size = "large",
-  emptyState,
-  descriptionDirection = "column",
-  success,
-  error,
-  "data-testid": dataTestId,
-  className,
-  tooltip,
-  footer,
-  placeholderSearch = "Search in list",
-  placeholder = "Select item",
-  searchable = true,
-  disabled = false,
-  readOnly = false,
-  clearable = false,
-  multiselect = false,
-  required = false,
-  labelDescription,
-  autofocus,
-  loadMore,
-  optionalInfoPlacement = "right",
-  isLoading,
-  selectAll,
-  selectAllGroup = false,
-  dropdownAlign,
-  portalTarget,
-  onOpen,
-  style
-}) => {
-  const localId = react.useId();
-  const finalId = id ?? localId;
-  const dropdownId = react.useId();
-  const ref = react.useRef(null);
-  const numberOfOptions = Array.isArray(options) ? options.length : Object.values(options).reduce((acc, current) => acc + current.filter((option) => !option.disabled).length, 0);
-  const finalDataTestId = dataTestId ?? `select-input-${name ?? "name"}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectInputProvider.SelectInputProvider, { multiselect, numberOfOptions, onChange, onOpen, options, refSelect: ref, selectAll, selectAllGroup, value, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "aria-label": name, className: `${className ? `${className} ` : ""}${styles_css.selectinputContainer}`, onBlur, onFocus, style, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Dropdown.Dropdown, { descriptionDirection, dropdownAlign, emptyState, footer, id: dropdownId, isLoading, loadMore, optionalInfoPlacement, placeholder: placeholderSearch, portalTarget, refSelect: ref, searchable, size, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { "aria-label": ariaLabel, gap: 0.5, children: [
-      label || labelDescription ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Label, { htmlFor: finalId, labelDescription, required, size, children: label }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(SelectBar.SelectBar, { autoFocus: autofocus, clearable, "data-testid": finalDataTestId, disabled, dropdownId, error, id: finalId, innerRef: ref, label, placeholder, readOnly, size, success, tooltip })
-    ] }) }),
-    !error && !success && helper ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "p", className: styles_css.selectinputHelper, prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null,
-    error && typeof error === "string" || success ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Text, { as: "p", className: styles_css.selectinputHelper, prominence: "default", sentiment: error ? "danger" : "success", variant: "caption", children: error || success }) : null
-  ] }) });
-};
-exports.SelectInput = SelectInput;

package/dist/components/SelectInput/styles.css.cjs

@@ -1,7 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                            */
-var selectinputContainer = "uv_uf6pag0";
-var selectinputHelper = "uv_uf6pag1";
-exports.selectinputContainer = selectinputContainer;
-exports.selectinputHelper = selectinputHelper;

package/dist/components/SelectInput/types.cjs

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const INPUT_SIZE_HEIGHT = {
-  large: "600",
-  medium: "500",
-  small: "400"
-  // sizing theme tokens key
-};
-exports.INPUT_SIZE_HEIGHT = INPUT_SIZE_HEIGHT;

package/dist/components/SelectableCard/index.cjs

@@ -1,149 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const ProductIcon = require("@ultraviolet/icons/product");
-const themes = require("@ultraviolet/themes");
-const dynamic = require("@vanilla-extract/dynamic");
-const react = require("react");
-const index$3 = require("../Checkbox/index.cjs");
-const index$2 = require("../Radio/index.cjs");
-const index = require("../Stack/index.cjs");
-const index$1 = require("../Tooltip/index.cjs");
-const styles_css = require("./styles.css.cjs");
-const variables_css = require("./variables.css.cjs");
-function _interopNamespaceCompat(e) {
-  if (e && typeof e === "object" && "default" in e) return e;
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e) {
-    for (const k in e) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e[k]
-        });
-      }
-    }
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-const ProductIcon__namespace = /* @__PURE__ */ _interopNamespaceCompat(ProductIcon);
-const SelectableCard = react.forwardRef(({
-  name,
-  value,
-  onChange,
-  showTick = false,
-  type = "radio",
-  checked = false,
-  disabled = false,
-  children,
-  className,
-  isError,
-  onFocus,
-  onBlur,
-  tooltip,
-  id,
-  label,
-  "data-testid": dataTestId,
-  productIcon,
-  illustration,
-  "aria-label": ariaLabel,
-  style
-}, ref) => {
-  const theme = themes.useTheme();
-  const innerRef = react.useRef(null);
-  const childrenRef = react.useRef(null);
-  const [svgContent, setSvgContent] = react.useState(null);
-  const image = react.useMemo(() => {
-    if (illustration) {
-      return "illustration";
-    }
-    if (productIcon) {
-      return "icon";
-    }
-    return "none";
-  }, [illustration, productIcon]);
-  react.useEffect(() => {
-    if (illustration?.endsWith(".svg")) {
-      fetch(illustration).then((response) => response.text()).then((svg) => {
-        const updatedSvg = svg.replace(/fill="[^"]*"/g, `fill="${theme.colors.neutral.backgroundStronger}"`).replace(/width="[^"]*"/g, `width="220px"`).replace(/height="[^"]*"/g, `height="220px"`);
-        setSvgContent(updatedSvg);
-      }).catch(() => null);
-    }
-  });
-  const ProductIconUsed = productIcon ? ProductIcon__namespace[`${productIcon.charAt(0).toUpperCase() + productIcon.slice(1)}ProductIcon`] : null;
-  const ParentContainer = react.useCallback(({
-    children: subChildren
-  }) => {
-    if (tooltip) {
-      return /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { flex: 1, children: /* @__PURE__ */ jsxRuntime.jsx(index$1.Tooltip, { containerFullHeight: true, text: tooltip, children: subChildren }) });
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(index$1.Tooltip, { children: subChildren });
-  }, [tooltip]);
-  const IllustrationContainer = react.useCallback(({
-    children: subChildren
-  }) => {
-    if (ProductIconUsed || illustration) {
-      return /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { alignItems: "stretch", direction: "row", flex: 1, justifyContent: "space-between", width: "100%", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { className: styles_css.illustrationSelectableCard, children: subChildren }),
-        /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { justifyContent: "center", children: ProductIconUsed ? /* @__PURE__ */ jsxRuntime.jsx(ProductIconUsed, { size: "large" }) : null }),
-        illustration ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles_css.divSelectableCard, children: illustration.endsWith(".svg") && svgContent ? /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: styles_css.imageSelectableCard,
-            dangerouslySetInnerHTML: {
-              __html: svgContent
-            }
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("img", { alt: "illustration", className: styles_css.imageSelectableCard, src: illustration, width: 220 }) }) : null
-      ] });
-    }
-    return subChildren;
-  }, [ProductIconUsed, illustration, svgContent]);
-  const onKeyDown = react.useCallback((event) => {
-    if (event.key === " " && innerRef?.current) {
-      event.preventDefault();
-      innerRef.current.click();
-    }
-  }, [innerRef]);
-  const isComplexChildren = ["function", "array", "object"].includes(typeof children);
-  const onClickContainer = react.useCallback((event) => {
-    if (innerRef.current && !disabled) {
-      const inputElement = innerRef.current;
-      const labelElement = document.querySelector(`label[for="${inputElement.id}"]`);
-      const targetNode = event.target;
-      if (!inputElement.contains(targetNode) && !labelElement?.contains(targetNode)) {
-        inputElement.click();
-      }
-    }
-  }, [disabled]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ParentContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { alignItems: "start", className: `${className ? `${className} ` : ""}${styles_css.containerSelectableCard({
-    cursor: type === "checkbox" && isComplexChildren ? "default" : "custom",
-    image
-  })} ${styles_css.labelContainerSelectableCard[label ? "label" : "noLabel"]}`, "data-checked": checked, "data-disabled": disabled, "data-error": isError, "data-testid": dataTestId, "data-type": type, direction: label ? "column" : "row", flex: 1, gap: 0.5, onClick: type === "checkbox" && isComplexChildren ? void 0 : onClickContainer, onKeyDown, ref, role: "button", style: {
-    ...dynamic.assignInlineVars({
-      [variables_css.inputDisplay]: !showTick ? "none" : "inline",
-      [variables_css.labelDisplay]: !showTick && !label ? "none" : "inline",
-      [variables_css.widthSelectable]: label ? "100%" : "auto"
-    }),
-    ...style
-  }, tabIndex: disabled ? void 0 : 0, children: /* @__PURE__ */ jsxRuntime.jsxs(IllustrationContainer, { children: [
-    type === "radio" ? /* @__PURE__ */ jsxRuntime.jsx(index$2.Radio, { checked, className: styles_css.selectableElementSelectableCard, "data-error": isError, disabled, error: isError, id, name, onBlur, onChange, onFocus, ref: innerRef, tabIndex: -1, value, ...label ? {
-      label
-    } : {
-      "aria-label": ariaLabel
-    } }) : /* @__PURE__ */ jsxRuntime.jsx(index$3.Checkbox, { checked, className: styles_css.selectableElementSelectableCard, "data-error": isError, disabled, error: isError, id, name, onBlur, onChange, onFocus, ref: innerRef, tabIndex: -1, value, ...label ? {
-      "aria-label": void 0,
-      children: label
-    } : {
-      "aria-label": ariaLabel
-    } }),
-    children ? /* @__PURE__ */ jsxRuntime.jsx(index.Stack, { className: styles_css.stackSelectableCard, "data-has-default-cursor": type === "checkbox" && isComplexChildren, "data-has-label": !!label && showTick, onKeyDown: (event) => event.stopPropagation(), ref: childrenRef, width: "100%", children: typeof children === "function" ? children({
-      checked,
-      disabled
-    }) : children }) : null
-  ] }) }) });
-});
-exports.SelectableCard = SelectableCard;

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

@@ -1,21 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                                   */
-;/* empty css                               */
-;/* empty css                                      */
-;/* empty css                            */
-const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var containerSelectableCard = createRuntimeFn.createRuntimeFn({ defaultClassName: "uv_475tnd0", variantClassNames: { image: { none: "uv_475tnd1", icon: "uv_475tnd2", illustration: "uv_475tnd3" }, cursor: { "default": "uv_475tnd4", custom: "uv_475tnd5" } }, defaultVariants: { image: "none", cursor: "custom" }, compoundVariants: [] });
-var labelContainerSelectableCard = { label: "uv_475tnd6", noLabel: "uv_475tnd7" };
-var divSelectableCard = "uv_475tnd8";
-var imageSelectableCard = "uv_475tnd9";
-var illustrationSelectableCard = "uv_475tnda";
-var stackSelectableCard = "uv_475tndb";
-var selectableElementSelectableCard = "uv_475tndc";
-exports.containerSelectableCard = containerSelectableCard;
-exports.divSelectableCard = divSelectableCard;
-exports.illustrationSelectableCard = illustrationSelectableCard;
-exports.imageSelectableCard = imageSelectableCard;
-exports.labelContainerSelectableCard = labelContainerSelectableCard;
-exports.selectableElementSelectableCard = selectableElementSelectableCard;
-exports.stackSelectableCard = stackSelectableCard;

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

@@ -1,8 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-var inputDisplay = "var(--uv_18vc4d30)";
-var labelDisplay = "var(--uv_18vc4d31)";
-var widthSelectable = "var(--uv_18vc4d32)";
-exports.inputDisplay = inputDisplay;
-exports.labelDisplay = labelDisplay;
-exports.widthSelectable = widthSelectable;

package/dist/components/SelectableCardGroup/index.cjs

@@ -1,75 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const jsxRuntime = require("@emotion/react/jsx-runtime");
-const react = require("react");
-const index$1 = require("../Label/index.cjs");
-const index$2 = require("../Row/index.cjs");
-const index$4 = require("../SelectableCard/index.cjs");
-const index = require("../Stack/index.cjs");
-const index$3 = require("../Text/index.cjs");
-const styles_css = require("./styles.css.cjs");
-const SelectableCardGroupContext = react.createContext(void 0);
-const CardSelectableCard = ({
-  value,
-  disabled,
-  children,
-  className,
-  isError,
-  onFocus,
-  onBlur,
-  tooltip,
-  id,
-  label,
-  style,
-  "data-testid": dataTestId
-}) => {
-  const context = react.useContext(SelectableCardGroupContext);
-  if (!context) {
-    throw new Error("SelectableCardGroup.Card can only be used inside a SelectableCardGroup");
-  }
-  const {
-    groupName,
-    onChange,
-    groupValue,
-    type,
-    showTick,
-    error
-  } = context;
-  return /* @__PURE__ */ jsxRuntime.jsx(index$4.SelectableCard, { checked: typeof groupValue === "object" ? groupValue.includes(value) : groupValue === value, className, "data-testid": dataTestId, disabled, id, isError: isError || error, label, name: groupName, onBlur, onChange, onFocus, showTick, style, tooltip, type, value, children });
-};
-const SelectableCardGroup = ({
-  legend,
-  legendDescription,
-  value,
-  className,
-  helper,
-  error,
-  columns = 1,
-  children,
-  onChange,
-  name,
-  required = false,
-  type,
-  showTick = false
-}) => {
-  const contextValue = react.useMemo(() => ({
-    error: !!error,
-    groupName: name,
-    groupValue: value,
-    onChange,
-    required,
-    showTick,
-    type
-  }), [name, value, onChange, required, type, showTick, error]);
-  return /* @__PURE__ */ jsxRuntime.jsx(SelectableCardGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 1, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className: `${className ? `${className} ` : ""}${styles_css.selectableCardGroupFieldSet}`, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Stack, { gap: 1.5, children: [
-      legend ? /* @__PURE__ */ jsxRuntime.jsx(index$1.Label, { as: "legend", labelDescription: legendDescription, required, children: legend }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(index$2.Row, { gap: 2, templateColumns: `repeat(${columns}, minmax(0, 1fr))`, children })
-    ] }) }),
-    helper ? /* @__PURE__ */ jsxRuntime.jsx(index$3.Text, { as: "span", prominence: "weak", sentiment: "neutral", variant: "caption", children: helper }) : null,
-    error ? /* @__PURE__ */ jsxRuntime.jsx(index$3.Text, { as: "span", sentiment: "danger", variant: "caption", children: error }) : null
-  ] }) });
-};
-SelectableCardGroup.Card = CardSelectableCard;
-exports.SelectableCardGroup = SelectableCardGroup;

package/dist/components/SelectableCardGroup/styles.css.cjs

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                            */
-var selectableCardGroupFieldSet = "uv_7j58nd0";
-exports.selectableCardGroupFieldSet = selectableCardGroupFieldSet;