@trackunit/react-components 0.1.66 → 0.1.68

package/index.cjs

@@ -7,9 +7,9 @@ var tailwindStyledComponents = require('@trackunit/tailwind-styled-components');
 var React = require('react');
 var uiIcons = require('@trackunit/ui-icons');
 var reactUse = require('react-use');
+var uuid = require('uuid');
 var dateFns = require('date-fns');
 var react = require('@floating-ui/react');
-var reactRouterDom = require('react-router-dom');
 var reactDayPicker = require('react-day-picker');
 var locale = require('date-fns/locale');
 var reactBrowserHooks = require('react-browser-hooks');
@@ -19,6 +19,7 @@ var ReactAsyncCreatableSelect = require('react-select/async-creatable');
 var ReactCreatableSelect = require('react-select/creatable');
 var ReactAsyncSelect = require('react-select/async');
 var libphonenumberJs = require('libphonenumber-js');
+var reactRouterDom = require('react-router-dom');
 var reactHelmetAsync = require('react-helmet-async');
 var uiDesignTokens = require('@trackunit/ui-design-tokens');
 
@@ -392,7 +393,7 @@ const CustomIcon = tailwindStyledComponents.twx(Icon) `
  * @returns {JSX.Element} Text component
  */
 const Text$1 = ({ children, type = "p", size = "medium", align = "left", weight = "normal", underline = false, inverted = false, subtle = false, italicize = false, uppercase = false, className, dataTestId, }) => {
-    return (jsxRuntime.jsx(StyledText$4, Object.assign({ "$as": type, className: className, "$align": align, "$inverted": inverted, "$subtle": subtle, "$italicize": italicize, "$uppercase": uppercase, "$size": size, "$weight": weight, "$underline": underline, "data-testid": dataTestId }, { children: children })));
+    return (jsxRuntime.jsx(StyledText$3, Object.assign({ "$as": type, className: className, "$align": align, "$inverted": inverted, "$subtle": subtle, "$italicize": italicize, "$uppercase": uppercase, "$size": size, "$weight": weight, "$underline": underline, "data-testid": dataTestId }, { children: children })));
 };
 const getTextSize = () => ({ $size }) => {
     const sizes = {
@@ -423,7 +424,7 @@ const getTextAlignment = () => ({ $align }) => {
     };
     return alignments[$align];
 };
-const StyledText$4 = tailwindStyledComponents.tw.text `
+const StyledText$3 = tailwindStyledComponents.tw.text `
   tu-text
   ${getFontColor$1()}
   ${p => (p.$italicize ? tailwindStyledComponents.tws `tu-text--italic` : "")}
@@ -522,7 +523,7 @@ const Badge = (_a) => {
         return null;
     }
     const displayedCount = count && max ? (count > max ? `${max}+` : count) : count;
-    return (jsxRuntime.jsx(StyledText$3, Object.assign({ className: className, "$color": color, "$subtle": subtle, "$count": count, "data-testid": dataTestId, "$as": "span" }, { children: displayedCount })));
+    return (jsxRuntime.jsx(StyledText$2, Object.assign({ className: className, "$color": color, "$subtle": subtle, "$count": count, "data-testid": dataTestId, "$as": "span" }, { children: displayedCount })));
 };
 const getBadgeModifierClass = () => ({ $color, $subtle }) => {
     const colorClasses = {
@@ -531,7 +532,7 @@ const getBadgeModifierClass = () => ({ $color, $subtle }) => {
     };
     return colorClasses[$color];
 };
-const StyledText$3 = tailwindStyledComponents.tw.text `
+const StyledText$2 = tailwindStyledComponents.tw.text `
   tu-badge
   ${({ $count }) => ($count === null || $count === undefined) && tailwindStyledComponents.tws `tu-badge--square`}
   ${getBadgeModifierClass()}
@@ -825,7 +826,7 @@ const CheckboxWrapper = tailwindStyledComponents.tw.span `
             ? tailwindStyledComponents.tws `tu-checkbox--selected`
             : tailwindStyledComponents.tws `tu-checkbox--deselected`;
 }}
-  
+
   ${({ $isInvalid }) => $isInvalid && tailwindStyledComponents.tws `tu-checkbox--invalid`}
 `;
 
@@ -907,17 +908,28 @@ const DateInput = React.forwardRef((_a, ref) => {
 });
 
 /**
- * @param {PopoverProps} props The children to render in the popover
- * @returns {ReactElement} Popover with specified content and placement
+ * The hook that powers the Popover component.
+ * It should not be used directly, but rather through the Popover component.
+ *
+ * @param {PopoverProps} options The options for the popover
+ * @returns {ReturnType<usePopover>} The data for the popover
  */
-const Popover = ({ children, render, placement, activation = { click: true, hover: false }, className, dataTestId, }) => {
-    const [open, setOpen] = React.useState(false);
-    const { x, y, reference, floating, strategy, context } = react.useFloating({
-        open,
-        onOpenChange: setOpen,
+const usePopover = (_a) => {
+    var { initialOpen = false, placement = "bottom", isModal, isOpen: controlledIsOpen, activation = { click: true, hover: false }, onOpenStateChange: setControlledIsOpen } = _a, restOptions = __rest(_a, ["initialOpen", "placement", "isModal", "isOpen", "activation", "onOpenStateChange"]);
+    const [uncontrolledIsOpen, setUncontrolledIsOpen] = React.useState(initialOpen);
+    const [labelId, setLabelId] = React.useState();
+    const [descriptionId, setDescriptionId] = React.useState();
+    const isOpen = controlledIsOpen !== null && controlledIsOpen !== void 0 ? controlledIsOpen : uncontrolledIsOpen;
+    const setIsOpen = setControlledIsOpen !== null && setControlledIsOpen !== void 0 ? setControlledIsOpen : setUncontrolledIsOpen;
+    const popoverData = react.useFloating({
+        placement,
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        whileElementsMounted: react.autoUpdate,
         middleware: [
             react.offset(8),
             react.flip({ fallbackPlacements: ["top", "bottom", "right", "left"] }),
+            react.shift(),
             react.size({
                 apply({ availableWidth, availableHeight, elements }) {
                     Object.assign(elements.floating.style, {
@@ -926,83 +938,68 @@ const Popover = ({ children, render, placement, activation = { click: true, hove
                     });
                 },
             }),
-            react.shift(),
         ],
-        placement,
-        whileElementsMounted: react.autoUpdate,
     });
-    const { getReferenceProps, getFloatingProps } = react.useInteractions([
-        react.useClick(context, { enabled: activation.click, ignoreMouse: activation.hover }),
-        react.useHover(context, { enabled: activation.hover }),
-        react.useRole(context),
-        react.useDismiss(context),
+    const popoverContext = popoverData.context;
+    const clickInteraction = react.useClick(popoverContext, { enabled: activation.click, ignoreMouse: activation.hover });
+    const dismissInteraction = react.useDismiss(popoverContext);
+    const hoverInteraction = react.useHover(popoverContext, { enabled: activation.hover });
+    const roleInteraction = react.useRole(popoverContext);
+    const combinedInteractions = react.useInteractions([
+        clickInteraction,
+        hoverInteraction,
+        dismissInteraction,
+        roleInteraction,
     ]);
-    // Preserve the consumer's ref
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const ref = React.useMemo(() => mergeRefs([reference, children.ref]), [reference, children]);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [React.cloneElement(children, getReferenceProps(Object.assign({ ref }, children.props))), jsxRuntime.jsx(react.FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: open && (jsxRuntime.jsx(react.FloatingFocusManager, Object.assign({ guards: false, context: context, modal: false, order: ["reference", "content"], returnFocus: false }, { children: jsxRuntime.jsx("div", Object.assign({ ref: floating, className: `tu-popover-container animate-fade-in-fast ${className !== null && className !== void 0 ? className : ""}`, "data-testid": dataTestId, style: {
-                            position: strategy,
-                            top: y !== null && y !== void 0 ? y : 0,
-                            left: x !== null && x !== void 0 ? x : 0,
-                            display: "flex",
-                        } }, getFloatingProps(), { children: render({
-                            close: () => {
-                                setOpen(false);
-                            },
-                        }) })) }))) }))] }));
-};
-// Utility to merge refs — Heavily inspired by https://github.com/gregberge/react-merge-refs
-function mergeRefs(refs) {
-    return value => {
-        refs.forEach(ref => {
-            if (typeof ref === "function") {
-                ref(value);
-            }
-            else if (ref !== null) {
-                ref.current = value;
-            }
-        });
-    };
-}
+    return React.useMemo(() => (Object.assign(Object.assign(Object.assign({ isOpen,
+        setIsOpen }, combinedInteractions), popoverData), { isModal,
+        labelId,
+        descriptionId,
+        setLabelId,
+        setDescriptionId, customProps: restOptions })), [isOpen, setIsOpen, combinedInteractions, popoverData, isModal, labelId, descriptionId, restOptions]);
+};
 
+const PopoverContext = React.createContext(null);
 /**
- * The PopoverList component.
+ * A hook to get the popover context.
+ * It should only be used by the Popover components.
  *
- * @param {PopoverListProps} props - The props for the PopoverList component
- * @returns {JSX.Element} PopoverList component
+ * @returns {ContextType} The popover context
  */
-const PopoverList = ({ className, children, dataTestId }) => {
-    return (jsxRuntime.jsx(Card, Object.assign({ className: className, dataTestId: dataTestId }, { children: jsxRuntime.jsx(StyledCardBody, Object.assign({ density: "comfortable" }, { children: jsxRuntime.jsx(List, { children: children }) })) })));
+const usePopoverContext = () => {
+    const context = React.useContext(PopoverContext);
+    if (context === null) {
+        throw new Error("Popover components must be wrapped in <Popover />");
+    }
+    return context;
 };
-const List = tailwindStyledComponents.tw.ul `
-  tu-popover-list
-`;
-const StyledCardBody = tailwindStyledComponents.twx(CardBody) `
-  tu-popover-list-body
-`;
-
 /**
- * The PopoverListItem component.
+ * The popover component.
+ * - This component should wrap all the popover components.
+ * - It returns a context that is used by the popover components.
+ * - The context is used to share the state of the popover, such as the open state and the reference element.
+ *
+ * To open the popover, use the `<PopoverTrigger />` component.
  *
- * @param {PopoverListItemProps} props - The props for the PopoverListItem component
- * @returns {JSX.Element} PopoverListItem component
+ * To render the content of the popover, use the `<PopoverContent />` component.
+ *
+ *
+ * @param {PopoverProps} props The props for the popover
+ * @returns {JSX.Element} A Popover Context Provider contining the children
  */
-const PopoverListItem = ({ selected, children, disabled, ariaLabel, url, onClick, prefix, suffix, dataTestId, className, }) => {
-    const content = (jsxRuntime.jsxs("div", Object.assign({ className: "flex items-center gap-3" }, { children: [prefix && jsxRuntime.jsx("div", { children: prefix }), jsxRuntime.jsx(StyledText$2, Object.assign({ weight: selected ? "bold" : "normal", "$selected": selected }, { children: children })), suffix && jsxRuntime.jsx("div", { children: suffix })] })));
-    return (jsxRuntime.jsx(ListItem, Object.assign({ "$selected": selected, disabled: disabled, onClick: onClick, "aria-label": ariaLabel, "data-testid": dataTestId, className: className }, { children: url ? jsxRuntime.jsx(PopoverLink, Object.assign({ to: url }, { children: content })) : content })));
-};
-const StyledText$2 = tailwindStyledComponents.twx(Text$1) `
-  tu-popover-list-item__text
-  ${p => p.$selected && tailwindStyledComponents.tws `tu-popover-list-item__text--selected`}
-`;
-const ListItem = tailwindStyledComponents.tw.li `
-  group
-  tu-popover-list-item
-  ${p => p.disabled && tailwindStyledComponents.tws `tu-popover-list-item--disabled`}
-`;
-const PopoverLink = tailwindStyledComponents.twx(reactRouterDom.Link) `
-  tu-popover-list-item__anchor
-`;
+const Popover = (_a) => {
+    var { children, isModal = false } = _a, restOptions = __rest(_a, ["children", "isModal"]);
+    const popover = usePopover(Object.assign({ isModal }, restOptions));
+    return jsxRuntime.jsx(PopoverContext.Provider, Object.assign({ value: popover }, { children: children }));
+};
+
+const PopoverContent = React__default["default"].forwardRef(function PopoverContent(_a, propRef) {
+    var _b, _c, _d, _e;
+    var { className, dataTestId, children } = _a, props = __rest(_a, ["className", "dataTestId", "children"]);
+    const _f = usePopoverContext(), { context: floatingContext, customProps } = _f, context = __rest(_f, ["context", "customProps"]);
+    const ref = react.useMergeRefs([context.refs.setFloating, propRef]);
+    return (jsxRuntime.jsx(react.FloatingPortal, Object.assign({ id: "tu-floating-ui" }, { children: context.isOpen && (jsxRuntime.jsx(react.FloatingFocusManager, Object.assign({ guards: false, context: floatingContext, modal: context.isModal, order: ["reference", "content"] }, { children: jsxRuntime.jsx("div", Object.assign({ ref: ref, className: `tu-popover-container animate-fade-in-fast ${(_b = className !== null && className !== void 0 ? className : customProps.className) !== null && _b !== void 0 ? _b : ""}`, "data-testid": (_c = dataTestId !== null && dataTestId !== void 0 ? dataTestId : customProps.dataTestId) !== null && _c !== void 0 ? _c : "popover-content", style: Object.assign({ position: context.strategy, top: (_d = context.y) !== null && _d !== void 0 ? _d : 0, left: (_e = context.x) !== null && _e !== void 0 ? _e : 0, width: "max-content" }, props.style), "aria-labelledby": context.labelId, "aria-describedby": context.descriptionId }, context.getFloatingProps(props), { children: typeof children === "function" ? children(() => context.setIsOpen(false)) : children })) }))) })));
+});
 
 /**
  * The PopoverTitle component.
@@ -1021,6 +1018,20 @@ const StyledText$1 = tailwindStyledComponents.twx(Text$1) `
 tu-popover-title-text
 `;
 
+const PopoverTrigger = React.forwardRef(function PopoverTrigger(_a, propRef) {
+    var { children, renderButton } = _a, props = __rest(_a, ["children", "renderButton"]);
+    const context = usePopoverContext();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const childrenRef = children.ref;
+    const ref = react.useMergeRefs([context.refs.setReference, propRef, childrenRef]);
+    if (!renderButton && React.isValidElement(children)) {
+        return React.cloneElement(children, context.getReferenceProps(Object.assign(Object.assign(Object.assign({ ref }, props), children.props), { "data-state": context.isOpen ? "open" : "closed" })));
+    }
+    else {
+        return (jsxRuntime.jsx(Button, Object.assign({ ref: ref, type: "button", "data-state": context.isOpen ? "open" : "closed" }, context.getReferenceProps(props), { children: children })));
+    }
+});
+
 /**
  * The Tooltip component is used to show helpful tips or contextual information to the users.
  *
@@ -1035,7 +1046,7 @@ const Tooltip = (_a) => {
     }
     return (jsxRuntime.jsx(TooltipContainer, Object.assign({ dataTestId: dataTestId }, rest, { children: wrappedChildren })));
 };
-const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxRuntime.jsx(StyledPopover, Object.assign({ className: "tu-tooltip__container", placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "", render: () => (jsxRuntime.jsx(Content, Object.assign({ "$mode": mode }, { children: jsxRuntime.jsx(Text$1, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) }))) }, { children: children })));
+const TooltipContainer = ({ label, placement = "bottom", mode = "dark", contentTextType = "p", children, dataTestId, }) => (jsxRuntime.jsxs(StyledPopover, Object.assign({ className: "tu-tooltip__container", placement: placement, activation: { hover: true }, dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "" }, { children: [jsxRuntime.jsx(PopoverTrigger, { children: children }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx(Content, Object.assign({ "$mode": mode }, { children: jsxRuntime.jsx(Text$1, Object.assign({ inverted: mode === "dark", type: contentTextType }, { children: label })) })) })] })));
 const Flex$1 = tailwindStyledComponents.tw.div `
   inline-flex
 `;
@@ -1069,13 +1080,13 @@ const TipContainer = tailwindStyledComponents.tw.text `
  * @param {FormGroupProps} props - The props for the FormGroup component
  * @returns {JSX.Element} FormGroup component
  */
-const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, disabled = false, }) => {
-    return (jsxRuntime.jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxRuntime.jsxs(ContainerBefore, { children: [jsxRuntime.jsx(FormGroupLabel, Object.assign({ dataTestId: dataTestId && `${dataTestId}-label` }, { children: label })), tip && jsxRuntime.jsx(Tip, Object.assign({ dataTestId: dataTestId && `${dataTestId}-tip` }, { children: tip }))] }), children, jsxRuntime.jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsxRuntime.jsx("span", Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsxRuntime.jsx(HelpAddon, Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
+const FormGroup = ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, htmlFor, children, disabled = false, }) => {
+    return (jsxRuntime.jsxs(FormGroupRoot, Object.assign({ className: className, "data-testid": dataTestId, "$disabled": disabled }, { children: [jsxRuntime.jsxs(ContainerBefore, { children: [jsxRuntime.jsx(FormGroupLabel, Object.assign({ dataTestId: dataTestId && `${dataTestId}-label`, htmlFor: htmlFor, id: htmlFor + "-label" }, { children: label })), tip && jsxRuntime.jsx(Tip, Object.assign({ dataTestId: dataTestId && `${dataTestId}-tip` }, { children: tip }))] }), children, jsxRuntime.jsxs(ContainerAfter, Object.assign({ "$isInvalid": isInvalid }, { children: [helpText && jsxRuntime.jsx("span", Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpText` }, { children: helpText })), helpAddon && jsxRuntime.jsx(HelpAddon, Object.assign({ "data-testid": dataTestId && `${dataTestId}-helpAddon` }, { children: helpAddon }))] }))] })));
 };
-const FormGroupRoot = tailwindStyledComponents.tw.label `
+const FormGroupRoot = tailwindStyledComponents.tw.div `
   tu-form-group
   ${({ $disabled }) => {
-    return $disabled ? "pointer-events-none	" : null;
+    return $disabled ? "pointer-events-none" : null;
 }}
 `;
 const ContainerBefore = tailwindStyledComponents.tw.div `
@@ -1089,7 +1100,7 @@ const ContainerAfter = tailwindStyledComponents.tw.div `
   ${({ $isInvalid }) => ($isInvalid ? tailwindStyledComponents.tws `tu-form-group__container-after--invalid` : null)}
 `;
 const HelpAddon = tailwindStyledComponents.tw.span `
-  tu-form-group__help-addon 
+  tu-form-group__help-addon
 `;
 
 /**
@@ -1100,9 +1111,10 @@ const HelpAddon = tailwindStyledComponents.tw.span `
  * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
  */
 const DateField = React.forwardRef((_a, ref) => {
-    var { label, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(DateInput, Object.assign({ ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const htmlForId = id ? id : "dateField-" + uuid.v4();
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(DateInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, defaultValue: defaultValue, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 const localeLookup = {
@@ -1155,7 +1167,7 @@ const DayPicker = ({ onDaySelect, disabledDays, selectedDays, language, classNam
  * @returns {JSX.Element} DayPickerPopover component
  */
 const DayPickerPopover = ({ disabledDays, className, dataTestId, selectedDay, onDaySelect, color = "secondary", placement, size = "small", buttonContent, language, }) => {
-    return (jsxRuntime.jsx(Popover, Object.assign({ placement: placement, render: () => (jsxRuntime.jsx(PopoverList, { children: jsxRuntime.jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) })) }, { children: jsxRuntime.jsx(Button, Object.assign({ color: color, size: size, className: className, prefix: jsxRuntime.jsx(Icon, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker" }, { children: buttonContent })) })));
+    return (jsxRuntime.jsxs(Popover, Object.assign({ placement: placement }, { children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(Button, Object.assign({ color: color, size: size, className: className, prefix: jsxRuntime.jsx(Icon, { name: "CalendarIcon", size: "small" }), dataTestId: dataTestId !== null && dataTestId !== void 0 ? dataTestId : "show-day-picker" }, { children: buttonContent })) }), jsxRuntime.jsx(PopoverContent, { children: jsxRuntime.jsx(Card, { children: jsxRuntime.jsx(DayPicker, { disabledDays: disabledDays, onDaySelect: onDaySelect, selectedDays: selectedDay, language: language }) }) })] })));
 };
 
 /**
@@ -1316,15 +1328,16 @@ const EmailInput = React__namespace.forwardRef((_a, ref) => {
  *
  */
 const EmailField = React.forwardRef((_a, ref) => {
-    var { label, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "className", "defaultValue", "dataTestId"]);
     const [value, setValue] = React.useState(defaultValue);
+    const htmlForId = id ? id : "emailField-" + uuid.v4();
     // Type guard to check if value is a string
     function isString(inputValue) {
         return typeof inputValue === "string";
     }
     // Check the regular expression only if value is a string
     const renderAsInvalid = !!errorMessage || (isString(value) && !/^\S+@\S+\.\S+$/.test(value));
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(EmailInput, Object.assign({ ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(EmailInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, value: value, onChange: e => setValue(e.target.value), isInvalid: renderAsInvalid, disabled: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -1439,7 +1452,7 @@ const MenuItem = ({ className, dataTestId, label, children, selected, focused, p
     return (jsxRuntime.jsxs(Container$4, Object.assign({}, containerProps, { onClick: e => {
             e.stopPropagation();
             onClick && onClick(e);
-        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsxRuntime.jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))), children !== null && children !== void 0 ? children : jsxRuntime.jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: label })), suffix && (jsxRuntime.jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
+        }, "$selected": selected, "$focused": focused, tabIndex: 0, "$disabled": disabled }, { children: [prefix && (jsxRuntime.jsx(Prefix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-prefix` }, { children: prefix }))), children && typeof children !== "string" ? (children) : (jsxRuntime.jsx(Label, Object.assign({ "data-testid": dataTestId && `${dataTestId}-label` }, { children: children !== null && children !== void 0 ? children : label }))), suffix && (jsxRuntime.jsx(Suffix, Object.assign({ "$selected": selected, "data-testid": dataTestId && `${dataTestId}-suffix` }, { children: suffix })))] })));
 };
 const Container$4 = tailwindStyledComponents.tw.div `
   group tu-menu-item
@@ -1470,7 +1483,7 @@ const MenuList = (_a) => {
     var { dataTestId, className, children, withStickyHeader = false, showDivider = false } = _a; __rest(_a, ["dataTestId", "className", "children", "withStickyHeader", "showDivider"]);
     const childrenArr = React.Children.toArray(children);
     const isLastItem = (index) => index === childrenArr.length - 1;
-    return (jsxRuntime.jsx(Container$3, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0 }, { children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsxRuntime.jsx(Divider, {})] }))) })));
+    return (jsxRuntime.jsx(Container$3, Object.assign({ "$withStickyHeader": withStickyHeader, "data-testid": dataTestId, className: className, tabIndex: 0, role: "list" }, { children: React.Children.map(childrenArr, (menuItem, index) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [menuItem, showDivider && !isLastItem(index) && jsxRuntime.jsx(Divider, {})] }))) })));
 };
 const Container$3 = tailwindStyledComponents.tw.div `
   tu-menu-list
@@ -1501,9 +1514,9 @@ const MoreMenu = ({ className, dataTestId, dotsDirection = "horizontal", menuPla
     reactBrowserHooks.useClickOutside(actionMenuRef, () => {
         setActionMenuIsOpen(false);
     });
-    return (jsxRuntime.jsx(Root$4, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsx(Popover, Object.assign({ render: () => children, placement: menuPlacement }, { children: jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
-                    setActionMenuIsOpen(!actionMenuIsOpen);
-                } })) })) })));
+    return (jsxRuntime.jsx(Root$4, Object.assign({ ref: actionMenuRef, className: className, "data-testid": dataTestId }, { children: jsxRuntime.jsxs(Popover, Object.assign({ placement: menuPlacement }, { children: [jsxRuntime.jsx(PopoverTrigger, { children: jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ name: dotsName }, iconProps)), onClick: () => {
+                            setActionMenuIsOpen(!actionMenuIsOpen);
+                        } })) }), jsxRuntime.jsx(PopoverContent, { children: children })] })) })));
 };
 const Root$4 = tailwindStyledComponents.tw.div `
   tu-more-menu
@@ -1599,9 +1612,10 @@ const NumberInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput,
  * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
 const NumberField = React.forwardRef((_a, ref) => {
-    var { label, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, helpAddon, isInvalid, maxLength, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(NumberInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const htmlForId = id ? id : "numberField-" + uuid.v4();
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(NumberInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2330,9 +2344,10 @@ const Container = tailwindStyledComponents.tw.div `
  * @returns {JSX.Element} - The PhoneField component.
  */
 const PhoneField = React.forwardRef((_a, ref) => {
-    var { label, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
+    var { label, id, tip, helpText, isInvalid, errorMessage, value, helpAddon, className, defaultValue, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "isInvalid", "errorMessage", "value", "helpAddon", "className", "defaultValue", "dataTestId"]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(PhoneInput, Object.assign({ value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
+    const htmlForId = id ? id : "phoneField-" + uuid.v4();
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon, disabled: rest.disabled, className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(PhoneInput, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", value: value || defaultValue, isInvalid: renderAsInvalid }, rest)) })));
 });
 
 function useConfirmExit(confirmExit, when = true) {
@@ -2426,7 +2441,7 @@ ${({ $inline }) => ($inline ? tailwindStyledComponents.tws `tu-radiogroup--inlin
 const RadioItem = ({ label, value, dataTestId, className, description }) => {
     const groupCtx = React__namespace.useContext(RadioGroupContext);
     const isChecked = (groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.value) === value;
-    return (jsxRuntime.jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsxRuntime.jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, type: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxRuntime.jsxs(LabelContainer$1, { children: [jsxRuntime.jsx(Label$2, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsxRuntime.jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id} ${label}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
+    return (jsxRuntime.jsxs(InputWrapper, Object.assign({ className: className, htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Wrapper` }, { children: [jsxRuntime.jsx(Input, { id: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, type: "radio", role: "radio", value: value, checked: isChecked, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, "$isInvalid": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid, onChange: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.onChange, "data-testid": dataTestId, "$checked": isChecked }), jsxRuntime.jsxs(LabelContainer$1, { children: [jsxRuntime.jsx(Label$2, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, dataTestId: dataTestId && `${dataTestId}-Label`, disabled: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled, isInvalid: groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.isInvalid }, { children: label })), description && (jsxRuntime.jsx(Description$1, Object.assign({ htmlFor: `${groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.id}-${value}`, "data-testid": dataTestId && `${dataTestId}-Description`, "$disabled": groupCtx === null || groupCtx === void 0 ? void 0 : groupCtx.disabled }, { children: description })))] })] })));
 };
 const InputWrapper = tailwindStyledComponents.tw.label `tu-radioitem__wrapper`;
 const Input = tailwindStyledComponents.tw.input `
@@ -2586,9 +2601,17 @@ const Sidebar = ({ childContainerClassName, children, breakpoint = "lg", classNa
                     circular: false,
                     variant: "transparent",
                     color: "secondary",
-                }, menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId && `${dataTestId}-more-menu` }, { children: jsxRuntime.jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId && `${dataTestId}-menu-list` }, { children: React__default["default"].Children.map(children, child => {
-                        return itemOverflowMap[child.props.id] ? child : null;
-                    }) })) }))) : null] })));
+                }, menuPlacement: "bottom-end" }, moreMenuProps, { className: `${(moreMenuProps === null || moreMenuProps === void 0 ? void 0 : moreMenuProps.className) || ""} !p-0`, dataTestId: dataTestId && `${dataTestId}-more-menu` }, { children: close => (jsxRuntime.jsx(MenuList, Object.assign({}, menuListProps, { dataTestId: dataTestId && `${dataTestId}-menu-list` }, { children: React__default["default"].Children.map(children, child => {
+                        return itemOverflowMap[child.props.id]
+                            ? React__default["default"].cloneElement(child, {
+                                onClick: () => {
+                                    var _a, _b;
+                                    (_b = (_a = child === null || child === void 0 ? void 0 : child.props) === null || _a === void 0 ? void 0 : _a.onClick) === null || _b === void 0 ? void 0 : _b.call(_a);
+                                    close();
+                                },
+                            })
+                            : null;
+                    }) }))) }))) : null] })));
 };
 const Root$2 = tailwindStyledComponents.tw.div `
   tu-sidebar
@@ -2613,7 +2636,7 @@ const ChildContainer = tailwindStyledComponents.tw.div `
  */
 const TextArea = React__namespace.forwardRef((_a, ref) => {
     var { id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize = "vertical", defaultValue, className, required, dataTestId, isInvalid } = _a, rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "className", "required", "dataTestId", "isInvalid"]);
-    return (jsxRuntime.jsx(StyledTextArea, Object.assign({ name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, "$resize": resize, "$invalid": isInvalid, ref: ref, defaultValue: defaultValue, required: required }, rest, { onChange: onChange, "data-testid": dataTestId })));
+    return (jsxRuntime.jsx(StyledTextArea, Object.assign({ id: id, name: name, value: value, rows: rows, disabled: disabled, placeholder: placeholder, readOnly: readOnly, tabIndex: tabIndex, onFocus: onFocus, onBlur: onBlur, maxLength: maxLength, "$resize": resize, "$invalid": isInvalid, ref: ref, defaultValue: defaultValue, required: required }, rest, { onChange: onChange, "data-testid": dataTestId })));
 });
 const StyledTextArea = tailwindStyledComponents.tw.textarea `
   tu-textarea
@@ -2650,17 +2673,18 @@ const Root$1 = tailwindStyledComponents.tw.span `
 `;
 
 const TextAreaField = React__namespace.forwardRef((_a, ref) => {
-    var { label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
     const [valueLength, setValueLength] = React__namespace.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
+    const htmlForId = id ? id : "textAreaField-" + uuid.v4();
     const handleChange = React__namespace.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(TextArea, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, helpAddon: helpAddon ||
+            (maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), className: className, dataTestId: dataTestId && `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(TextArea, Object.assign({ id: htmlForId, "aria-labelledby": htmlForId + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2671,17 +2695,18 @@ const TextAreaField = React__namespace.forwardRef((_a, ref) => {
  * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
  */
 const TextField = React__namespace.forwardRef((_a, ref) => {
-    var { label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+    var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
     const [valueLength, setValueLength] = React__namespace.useState(value ? `${value}`.length : 0);
     const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
+    const htmlFor = id ? id : "textField-" + uuid.v4();
     const handleChange = React__namespace.useCallback((event) => {
         setValueLength(event.target.value.length);
         if (onChange) {
             onChange(event);
         }
     }, [onChange]);
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
-            (maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsxRuntime.jsx(TextInput, Object.assign({ ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlFor, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: (renderAsInvalid && errorMessage) || helpText, helpAddon: helpAddon ||
+            (maxLength !== null && maxLength !== undefined && (jsxRuntime.jsx(TextLengthIndicator, { length: valueLength, maxLength: maxLength }))), dataTestId: dataTestId && `${dataTestId}-FormGroup`, disabled: rest.readOnly }, { children: jsxRuntime.jsx(TextInput, Object.assign({ id: htmlFor, "aria-labelledby": htmlFor + "-label", ref: ref, maxLength: maxLength, value: value, isInvalid: renderAsInvalid }, rest, { className: className, onChange: handleChange, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -2769,9 +2794,10 @@ tu-upload-input`;
  * Upload fields enable the user to upload Files.
  */
 const UploadField = React.forwardRef((_a, ref) => {
-    var { label, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
+    var { label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId } = _a, rest = __rest(_a, ["label", "id", "tip", "helpText", "errorMessage", "isInvalid", "className", "value", "dataTestId"]);
     const renderAsInvalid = isInvalid || Boolean(errorMessage);
-    return (jsxRuntime.jsx(FormGroup, Object.assign({ label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, dataTestId: `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(UploadInput, Object.assign({ ref: ref, isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
+    const htmlForId = id ? id : "uploadField-" + uuid.v4();
+    return (jsxRuntime.jsx(FormGroup, Object.assign({ htmlFor: htmlForId, label: label, tip: tip, isInvalid: renderAsInvalid, helpText: errorMessage || helpText, dataTestId: `${dataTestId}-FormGroup` }, { children: jsxRuntime.jsx(UploadInput, Object.assign({ ref: ref, id: htmlForId, "aria-labelledby": htmlForId + "-label", isInvalid: renderAsInvalid }, rest, { className: className, dataTestId: dataTestId })) })));
 });
 
 /**
@@ -3266,9 +3292,9 @@ exports.Pagination = Pagination;
 exports.PhoneField = PhoneField;
 exports.PhoneInput = PhoneInput;
 exports.Popover = Popover;
-exports.PopoverList = PopoverList;
-exports.PopoverListItem = PopoverListItem;
+exports.PopoverContent = PopoverContent;
 exports.PopoverTitle = PopoverTitle;
+exports.PopoverTrigger = PopoverTrigger;
 exports.Prompt = Prompt;
 exports.ROLE_CARD = ROLE_CARD;
 exports.RadioGroup = RadioGroup;
@@ -3311,5 +3337,6 @@ exports.useDebounce = useDebounce;
 exports.useDevicePixelRatio = useDevicePixelRatio;
 exports.useLocalStorage = useLocalStorage;
 exports.useModal = useModal;
+exports.usePopoverContext = usePopoverContext;
 exports.usePrompt = usePrompt;
 exports.useTimeout = useTimeout;

package/index.css

@@ -223,16 +223,15 @@
 
 /* CSS related to the RadioGroup component */
 .tu-radiogroup {
-  @apply flex 
-    gap-2 
-    w-fit	
-    flex-col 
+  @apply flex
+    gap-2
+    flex-col
     items-start;
 
   &--inline {
-    @apply flex 
-      gap-3 
-      flex-row 
+    @apply flex
+      gap-3
+      flex-row
       items-center;
   }
 }
@@ -240,14 +239,14 @@
 .tu-radioitem {
   @apply w-4
     h-4
-    appearance-none	
-    rounded-3xl	 
-    bg-white	
-    border-solid	
-    border  
-    border-slate-300	
+    appearance-none
+    rounded-3xl
+    bg-white
+    border-solid
+    border
+    border-slate-300
     shadow-sm
-    shrink-0	
+    shrink-0
     transition
     box-border
     hover:cursor-pointer
@@ -257,19 +256,19 @@
     focus:ring-blue-700;
 
   &__wrapper {
-    @apply flex  
+    @apply flex
       gap-2
       items-center;
   }
 
   &--checked {
-    @apply border-solid	
-      border-4 
+    @apply border-solid
+      border-4
       border-blue-600
       bg-white
-      hover:bg-slate-100 
+      hover:bg-slate-100
       hover:cursor-pointer
-      outline-0	
+      outline-0
       active:bg-slate-200
       active:ring-2
       active:ring-offset-2
@@ -292,8 +291,8 @@
   }
 
   &--disabled {
-    @apply bg-slate-400 
-      border-slate-300 
+    @apply bg-slate-400
+      border-slate-300
       cursor-not-allowed
       group-hover:bg-slate-400
       group-focus:bg-slate-400
@@ -316,12 +315,12 @@
   }
 
   &__description {
-    @apply text-sm	
+    @apply text-sm
       font-normal
-      text-slate-500	
+      text-slate-500
       text-left
       whitespace-nowrap
-      text-ellipsis	
+      text-ellipsis
       overflow-hidden;
 
     &--disabled {