@parrot-co/parrot-ui
Version:
React UI components by Parrot built on top of react-aria (https://react-spectrum.adobe.com/react-aria/index.html
1,314 lines (1,127 loc) • 185 kB
JavaScript
import {jsx as $hgUW1$jsx, jsxs as $hgUW1$jsxs, Fragment as $hgUW1$Fragment} from "react/jsx-runtime";
import $hgUW1$react, {forwardRef as $hgUW1$forwardRef, createContext as $hgUW1$createContext, Children as $hgUW1$Children, useMemo as $hgUW1$useMemo, isValidElement as $hgUW1$isValidElement, useContext as $hgUW1$useContext, useRef as $hgUW1$useRef, cloneElement as $hgUW1$cloneElement, createElement as $hgUW1$createElement, useState as $hgUW1$useState, useEffect as $hgUW1$useEffect, useCallback as $hgUW1$useCallback} from "react";
import {useTextField as $hgUW1$useTextField, useLocale as $hgUW1$useLocale, useNumberField as $hgUW1$useNumberField, useToggleButton as $hgUW1$useToggleButton, useButton as $hgUW1$useButton, useCheckbox as $hgUW1$useCheckbox, useCheckboxGroupItem as $hgUW1$useCheckboxGroupItem, useFocusRing as $hgUW1$useFocusRing, VisuallyHidden as $hgUW1$VisuallyHidden, useCheckboxGroup as $hgUW1$useCheckboxGroup, useMenuTrigger as $hgUW1$useMenuTrigger, usePress as $hgUW1$usePress, mergeProps as $hgUW1$mergeProps, useMenu as $hgUW1$useMenu, useMenuItem as $hgUW1$useMenuItem, useMenuSection as $hgUW1$useMenuSection, useSeparator as $hgUW1$useSeparator, usePopover as $hgUW1$usePopover, Overlay as $hgUW1$Overlay, useFilter as $hgUW1$useFilter, useComboBox as $hgUW1$useComboBox, useListBox as $hgUW1$useListBox, useOption as $hgUW1$useOption, useListBoxSection as $hgUW1$useListBoxSection, useRadio as $hgUW1$useRadio, useRadioGroup as $hgUW1$useRadioGroup, useDatePicker as $hgUW1$useDatePicker, useDateField as $hgUW1$useDateField, useDateSegment as $hgUW1$useDateSegment, useCalendar as $hgUW1$useCalendar, useCalendarGrid as $hgUW1$useCalendarGrid, useCalendarCell as $hgUW1$useCalendarCell, useDrop as $hgUW1$useDrop, useProgressBar as $hgUW1$useProgressBar, useHover as $hgUW1$useHover, useSwitch as $hgUW1$useSwitch, useNumberFormatter as $hgUW1$useNumberFormatter, useSlider as $hgUW1$useSlider, useSliderThumb as $hgUW1$useSliderThumb, useTabList as $hgUW1$useTabList, useTab as $hgUW1$useTab, useTabPanel as $hgUW1$useTabPanel, useModalOverlay as $hgUW1$useModalOverlay, useDialog as $hgUW1$useDialog, useOverlayTrigger as $hgUW1$useOverlayTrigger, useTag as $hgUW1$useTag, useTagGroup as $hgUW1$useTagGroup} from "react-aria";
import {useNumberFieldState as $hgUW1$useNumberFieldState, useToggleState as $hgUW1$useToggleState, useCheckboxGroupState as $hgUW1$useCheckboxGroupState, useMenuTriggerState as $hgUW1$useMenuTriggerState, useTreeState as $hgUW1$useTreeState, Item as $hgUW1$Item, Section as $hgUW1$Section, useAsyncList as $hgUW1$useAsyncList, useComboBoxState as $hgUW1$useComboBoxState, useListState as $hgUW1$useListState, useRadioGroupState as $hgUW1$useRadioGroupState, useDatePickerState as $hgUW1$useDatePickerState, useDateFieldState as $hgUW1$useDateFieldState, useCalendarState as $hgUW1$useCalendarState, useSliderState as $hgUW1$useSliderState, useTabListState as $hgUW1$useTabListState, useOverlayTriggerState as $hgUW1$useOverlayTriggerState} from "react-stately";
import {HiEye as $hgUW1$HiEye, HiCheck as $hgUW1$HiCheck, HiSelector as $hgUW1$HiSelector, HiOutlineCalendar as $hgUW1$HiOutlineCalendar, HiChevronLeft as $hgUW1$HiChevronLeft, HiChevronRight as $hgUW1$HiChevronRight, HiOutlineDocumentAdd as $hgUW1$HiOutlineDocumentAdd, HiOutlineCheckCircle as $hgUW1$HiOutlineCheckCircle, HiOutlineTrash as $hgUW1$HiOutlineTrash, HiOutlineExclamationCircle as $hgUW1$HiOutlineExclamationCircle, HiOutlineRefresh as $hgUW1$HiOutlineRefresh, HiOutlinePaperClip as $hgUW1$HiOutlinePaperClip, HiX as $hgUW1$HiX} from "react-icons/hi";
import {parseDate as $hgUW1$parseDate, GregorianCalendar as $hgUW1$GregorianCalendar, createCalendar as $hgUW1$createCalendar, endOfMonth as $hgUW1$endOfMonth, getWeeksInMonth as $hgUW1$getWeeksInMonth, isSameMonth as $hgUW1$isSameMonth} from "@internationalized/date";
import {parseColor as $hgUW1$parseColor, useColorAreaState as $hgUW1$useColorAreaState, useColorFieldState as $hgUW1$useColorFieldState, useColorSliderState as $hgUW1$useColorSliderState} from "@react-stately/color";
import {useColorArea as $hgUW1$useColorArea, useColorField as $hgUW1$useColorField, useColorSwatch as $hgUW1$useColorSwatch, useColorSlider as $hgUW1$useColorSlider} from "@react-aria/color";
function $0f90ef71a188bc45$export$7e4aa119212bc614(value) {
return typeof value === "number";
}
function $0f90ef71a188bc45$export$43bee75e5e14138e(value) {
return value !== null && Array.isArray(value);
}
function $0f90ef71a188bc45$export$4c0262a4f954db45(value) {
return $0f90ef71a188bc45$export$43bee75e5e14138e(value) && value.length === 0;
}
function $0f90ef71a188bc45$export$a6cdc56e425d0d0a(value) {
return (typeof value === "object" || typeof value === "function") && !Array.isArray(value) && value !== null;
}
function $0f90ef71a188bc45$export$83b788b1a3698c03(value) {
return $0f90ef71a188bc45$export$a6cdc56e425d0d0a(value) && Object.keys(value).length === 0;
}
function $0f90ef71a188bc45$export$36496bb54b8933da(value) {
return Object.values(value).filter((value)=>{
return value === "" || value === undefined || value === null;
}).length > 0;
}
function $0f90ef71a188bc45$export$ae45edb09e2fe7c2(value) {
return value == null;
}
function $0f90ef71a188bc45$export$fce6876652108ab(value) {
return value === undefined;
}
// cns("p-button", {space: true, firs-item:false}, className, [className], ()=>"hello world")
function $cce662c1d2ec881b$var$processClassValue(value) {
if (!value) return null;
if (typeof value === "function") return $cce662c1d2ec881b$var$processClassValue(value?.());
if ((0, $0f90ef71a188bc45$export$43bee75e5e14138e)(value)) {
let i = 0;
let temp = "";
while(i < value.length){
const result = $cce662c1d2ec881b$var$processClassValue(value[i++]);
if (result) {
temp && (temp += " ");
temp += `${result}`;
}
}
return temp;
}
if ((0, $0f90ef71a188bc45$export$a6cdc56e425d0d0a)(value)) {
let str = "";
for(const key in value)if (value[key]) {
str && (str += " ");
str += `${key}`;
}
return str;
}
return value;
}
function $cce662c1d2ec881b$export$a274e22fb40f762e(...args) {
let i = 0;
let classStr = "";
while(i < args.length){
const result = $cce662c1d2ec881b$var$processClassValue(args[i++]);
if (result) {
classStr && (classStr += " ");
classStr += result;
}
}
return classStr;
}
function $cce662c1d2ec881b$export$c9058316764c140e(...refs) {
return (node)=>{
for (const ref of refs){
if (typeof ref === "function") ref(node);
else if (ref && typeof ref === "object") ref.current = node;
}
};
}
const $cce662c1d2ec881b$var$validDOMProperties = new Set([
// Common HTML attributes
"accept",
"acceptCharset",
"accessKey",
"action",
"allowFullScreen",
"allowTransparency",
"alt",
"async",
"autoComplete",
"autoFocus",
"autoPlay",
"capture",
"cellPadding",
"cellSpacing",
"challenge",
"charSet",
"checked",
"cite",
"classID",
"className",
"colSpan",
"cols",
"content",
"contentEditable",
"contextMenu",
"controls",
"coords",
"crossOrigin",
"data",
"dateTime",
"default",
"defer",
"dir",
"disabled",
"download",
"draggable",
"encType",
"form",
"formAction",
"formEncType",
"formMethod",
"formNoValidate",
"formTarget",
"frameBorder",
"headers",
"height",
"hidden",
"high",
"href",
"hrefLang",
"htmlFor",
"httpEquiv",
"icon",
"id",
"inputMode",
"integrity",
"is",
"keyParams",
"keyType",
"kind",
"label",
"lang",
"list",
"loop",
"low",
"manifest",
"marginHeight",
"marginWidth",
"max",
"maxLength",
"media",
"mediaGroup",
"method",
"min",
"minLength",
"multiple",
"muted",
"name",
"noValidate",
"nonce",
"open",
"optimum",
"pattern",
"placeholder",
"poster",
"preload",
"profile",
"radioGroup",
"readOnly",
"referrerPolicy",
"rel",
"required",
"reversed",
"role",
"rowSpan",
"rows",
"sandbox",
"scope",
"scoped",
"scrolling",
"seamless",
"selected",
"shape",
"size",
"sizes",
"span",
"spellCheck",
"src",
"srcDoc",
"srcLang",
"srcSet",
"start",
"step",
"style",
"summary",
"tabIndex",
"target",
"title",
"type",
"useMap",
"value",
"width",
"wmode",
"wrap",
// Event handlers
"onCopy",
"onCut",
"onPaste",
"onCompositionEnd",
"onCompositionStart",
"onCompositionUpdate",
"onKeyDown",
"onKeyPress",
"onKeyUp",
"onFocus",
"onBlur",
"onChange",
"onInput",
"onInvalid",
"onSubmit",
"onClick",
"onContextMenu",
"onDoubleClick",
"onDrag",
"onDragEnd",
"onDragEnter",
"onDragExit",
"onDragLeave",
"onDragOver",
"onDragStart",
"onDrop",
"onMouseDown",
"onMouseEnter",
"onMouseLeave",
"onMouseMove",
"onMouseOut",
"onMouseOver",
"onMouseUp",
"onSelect",
"onTouchCancel",
"onTouchEnd",
"onTouchMove",
"onTouchStart",
"onScroll",
"onWheel",
"onAbort",
"onCanPlay",
"onCanPlayThrough",
"onDurationChange",
"onEmptied",
"onEncrypted",
"onEnded",
"onError",
"onLoadedData",
"onLoadedMetadata",
"onLoadStart",
"onPause",
"onPlay",
"onPlaying",
"onProgress",
"onRateChange",
"onSeeked",
"onSeeking",
"onStalled",
"onSuspend",
"onTimeUpdate",
"onVolumeChange",
"onWaiting",
"onLoad",
"onAnimationStart",
"onAnimationEnd",
"onAnimationIteration",
"onTransitionEnd",
"onToggle"
]);
function $cce662c1d2ec881b$export$457c3d6518dd4c6f(props) {
const newProps = {};
for(const key in props){
if (!key.startsWith("data-") && !$cce662c1d2ec881b$var$validDOMProperties.has(key)) continue;
newProps[key] = props[key];
}
return newProps;
}
const $ee0105641360f1c1$export$23c260ee8e4dfaad = ({ stretchX: stretchX, stretchY: stretchY, stretchXY: stretchXY, children: children, className: className, position: position, as: as = "div", ...props }, ref)=>{
const Comp = as;
return /*#__PURE__*/ (0, $hgUW1$jsx)(Comp, {
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)({
[`position-${position}`]: !!position,
"stretch-x": !!stretchX,
"stretch-y": !!stretchY,
"stretch-xy": !!stretchXY,
[`${className}`]: !!className
}),
ref: ref,
...props,
children: children
});
};
$ee0105641360f1c1$export$23c260ee8e4dfaad.displayName = "Box";
const $ee0105641360f1c1$export$e71c4d32a2263218 = /*#__PURE__*/ $hgUW1$forwardRef($ee0105641360f1c1$export$23c260ee8e4dfaad);
const $074ec3363f6c932f$export$36308cce1deef340 = [
"tomato",
"red",
"crimson",
"pink",
"plum",
"purple",
"violet",
"indigo",
"blue",
"cyan",
"teal",
"green",
"grass",
"orange",
"brown",
"sky",
"mint",
"lime",
"yellow",
"amber",
"gold",
"bronze",
"gray",
"mauve",
"slate",
"sage",
"olive",
"sand"
];
const $074ec3363f6c932f$export$b4e0e71242920c6a = {
sharp: "none",
pill: "full",
rounded: undefined
};
function $0ad0bc75b5eb16a6$export$de9bdbce6502b027(name, length = 1) {
if (!name || length < 1) return "";
if (length == 1) return name.charAt(0);
return name.trim().split(/\s+/).slice(0, length).map((c)=>c.charAt(0)).join("");
}
function $0ad0bc75b5eb16a6$export$1c4d39b152e0f791(deprecatedProp, newProp, value) {
if (!(0, $0f90ef71a188bc45$export$ae45edb09e2fe7c2)(value)) console.warn(`${deprecatedProp} is deprecated and will be removed in a future release. ${newProp ? `Please use ${newProp} instead.` : ""}`);
}
function $0ad0bc75b5eb16a6$export$d41d9ab3de2def3d(text) {
const str = String(text);
let hash = 0;
let char;
if (str.trim().length === 0) return hash;
for(let i = 0; i < str.length; i++){
char = str.charCodeAt(i);
hash = (hash << 5) - hash + char;
// Convert to 32bit integer
hash &= hash;
}
return Math.abs(hash);
}
function $0ad0bc75b5eb16a6$export$d560c7e4a29451c2() {
return Math.random().toString(36);
}
function $0ad0bc75b5eb16a6$export$e4369cabd7e84cd9(string) {
const hash = $0ad0bc75b5eb16a6$export$d41d9ab3de2def3d(string);
return (0, $074ec3363f6c932f$export$36308cce1deef340)[hash % (0, $074ec3363f6c932f$export$36308cce1deef340).length];
}
function $0ad0bc75b5eb16a6$export$2db1d02db18b2d82(prefix, value) {
if (!value) return "";
if (typeof value === "string" || typeof value === "number") return `${prefix}-${value}`;
let classNames = "";
for (const key of Object.keys(value)){
const breakpoint = key;
const breakpointValue = value[breakpoint];
if (breakpointValue) {
classNames && (classNames += " ");
classNames += breakpoint === "base" ? `${prefix}-${breakpointValue}` : `${breakpoint}:${prefix}-${breakpointValue}`;
}
}
return classNames;
}
const $11bc53f9891a6532$export$de87bc49c164ff72 = (props, ref)=>{
const { columns: columns = 12, gap: gap = "sm", gapX: gapX, gapY: gapY, align: align, justify: justify, as: as, className: className, ...otherProps } = props;
return(// TODO figure out why ts is screaming over here
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $ee0105641360f1c1$export$e71c4d32a2263218), {
as: as,
ref: ref,
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-grid", "display-grid", (0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("columns", columns), (0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("gap", gap), (0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("column-gap", gapX), (0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("row-gap", gapY), (0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("flex-align", align), (0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("flex-justify", justify), className),
...otherProps
}));
};
$11bc53f9891a6532$export$de87bc49c164ff72.displayName = "Grid";
const $11bc53f9891a6532$export$ef2184bd89960b14 = /*#__PURE__*/ $hgUW1$forwardRef($11bc53f9891a6532$export$de87bc49c164ff72);
const $11bc53f9891a6532$export$faaf771f35016530 = (props, ref)=>{
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $ee0105641360f1c1$export$e71c4d32a2263218), {
ref: ref,
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-grid-item", (0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("col-span", props.colSpan), props.className),
...props
});
};
const $11bc53f9891a6532$export$9eb849b9b922d396 = /*#__PURE__*/ $hgUW1$forwardRef($11bc53f9891a6532$export$faaf771f35016530);
$11bc53f9891a6532$export$faaf771f35016530.displayName = "GridItem";
const $e2f278d76a00796a$export$21ee1313e2afe36c = (props, ref)=>{
const { justify: justify, align: align, direction: direction, gap: gap = "sm", columnGap: columnGap, rowGap: rowGap, inline: inline, wrap: wrap, stack: stack, className: className, as: as, ...otherProps } = props;
const flexDirection = stack ? "column" : direction ?? "row";
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $ee0105641360f1c1$export$e71c4d32a2263218), {
as: as,
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(className, inline ? "display-inline-flex" : "display-flex", `flex-direction-${flexDirection}`, wrap && `flex-${wrap}`, justify && `flex-justify-${justify}`, align && `flex-align-${align}`, (0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("gap", gap), (0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("column-gap", columnGap), (0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("row-gap", rowGap)),
// TODO - Fix types here - seems to work just fine though
ref: ref,
...(0, $cce662c1d2ec881b$export$457c3d6518dd4c6f)(otherProps),
children: props.children
});
};
$e2f278d76a00796a$export$21ee1313e2afe36c.displayName = "Flex";
const $e2f278d76a00796a$export$f51f4c4ede09e011 = /*#__PURE__*/ $hgUW1$forwardRef($e2f278d76a00796a$export$21ee1313e2afe36c);
const $3157c40f7d0e6fa2$export$f5a10939c0132d55 = (props, ref)=>{
const { textCase: textCase, size: size = "sm", weight: weight, color: color = "gray", variant: variant = "default", highlight: highlight, align: align, lineHeight: lineHeight, underline: underline, italic: italic, as: Comp = "span", className: className, ...rest } = props;
return /*#__PURE__*/ (0, $hgUW1$jsx)(Comp, {
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-text", className, {
[`text-highlight`]: !!highlight,
[`text-weight-${weight}`]: !!weight,
[`text-align-${align}`]: !!align,
[`text-line-height-${lineHeight}`]: !!lineHeight,
[`text-transform-${textCase}`]: !!textCase
}, (0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("text-size", size)),
"data-underline": underline,
"data-italic": italic,
"data-color": color,
"data-color-variant": variant,
ref: ref,
...rest
});
};
$3157c40f7d0e6fa2$export$f5a10939c0132d55.displayName = "Text";
const $3157c40f7d0e6fa2$export$5f1af8db9871e1d6 = /*#__PURE__*/ $hgUW1$forwardRef($3157c40f7d0e6fa2$export$f5a10939c0132d55);
const $eea734bbd8b9efff$var$InputLabel = /*#__PURE__*/ (0, $hgUW1$react).forwardRef(({ children: children, className: className, color: color, ...props }, ref)=>{
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
ref: ref,
size: "sm",
color: color || "gray",
variant: "light",
as: "label",
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
className,
"p-input-label"
]),
...props,
children: children
});
});
$eea734bbd8b9efff$var$InputLabel.displayName = "InputLabel";
var $eea734bbd8b9efff$export$2e2bcd8739ae039 = $eea734bbd8b9efff$var$InputLabel;
const $9e021ab4f609c8de$var$InputError = /*#__PURE__*/ (0, $hgUW1$react).forwardRef(({ children: children, validationStatus: validationStatus = "error", ...props }, ref)=>{
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
size: "sm",
className: "p-input-error",
lineHeight: "base",
as: "div",
color: "red",
variant: "default",
"data-validation-status": validationStatus,
ref: ref,
...props,
children: children
});
});
$9e021ab4f609c8de$var$InputError.displayName = "InputError";
var $9e021ab4f609c8de$export$2e2bcd8739ae039 = $9e021ab4f609c8de$var$InputError;
const $41cc567ab0625f8f$var$SpaceContext = /*#__PURE__*/ $hgUW1$createContext({
classNames: {},
compactItemWrapperAdjust: ""
});
function $41cc567ab0625f8f$export$eef1e68107c58ef2({ children: children, compact: compact, gap: gap, className: className, classNames: classNames, style: style, styles: styles, ...props }) {
const childrenCount = $hgUW1$Children.count(children);
const nodes = $hgUW1$useMemo(()=>{
return $hgUW1$Children.map(children, (child, index)=>{
const isFirstChild = index == 0;
const isLastChild = index == childrenCount - 1;
if (!/*#__PURE__*/ $hgUW1$isValidElement(child)) return null;
return /*#__PURE__*/ (0, $hgUW1$jsx)($41cc567ab0625f8f$var$SpaceContext.Provider, {
value: {
classNames: {
"space-item-first": isFirstChild,
"space-item-last": isLastChild,
"space-item": true
},
compactItemWrapperAdjust: isLastChild ? "" : "compact-item-wrapper-adjust"
},
children: child
});
});
}, [
children
]);
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
"data-compact": compact,
style: {
...style,
...styles?.wrapper
},
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
className,
"p-space",
classNames?.wrapper
]),
gap: gap ?? "none",
...props,
children: nodes
});
}
function $41cc567ab0625f8f$export$450c36e0b0e62ccd() {
return $hgUW1$useContext($41cc567ab0625f8f$var$SpaceContext);
}
const $5fc28f26e128d5c0$var$ThemeContext = /*#__PURE__*/ $hgUW1$createContext(null);
function $5fc28f26e128d5c0$export$d8964aec282183a3(props) {
const { children: children, className: className, scaling: scaling = "100%", ...themeProps } = props;
return /*#__PURE__*/ (0, $hgUW1$jsx)($5fc28f26e128d5c0$var$ThemeContext.Provider, {
value: themeProps,
children: /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
id: "parrot-theme-provider",
"data-gray-variant": themeProps.grayVariant,
"data-radius": themeProps.radius,
"data-color": themeProps.color,
"data-scaling": scaling,
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
"parrot-theme",
className
]),
children: children
})
});
}
function $5fc28f26e128d5c0$export$93d4e7f90805808f(options) {
const theme = $hgUW1$useContext($5fc28f26e128d5c0$var$ThemeContext);
if (!theme && options?.requireThemeProvider) throw new Error("No theme found");
return theme;
}
function $095d89378519ff08$export$a455218a85c89869({ label: label, description: description, error: error, color: color = "gray", radius: radius, size: size = "md", className: className, classNames: classNames, style: style, styles: styles, prepend: prepend, append: append, appearance: appearance = "outline", validationStatus: validationStatus, labelProps: labelProps, errorMessageProps: errorMessageProps, descriptionProps: descriptionProps, children: children, replaceDefaultControlWrapper: replaceDefaultControlWrapper, isDisabled: isDisabled, wrapperRef: wrapperRef, ...props }) {
const space = (0, $41cc567ab0625f8f$export$450c36e0b0e62ccd)();
const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
ref: wrapperRef,
...props,
"data-color": color,
"data-radius": radius ?? theme?.radius ?? "lg",
"data-size": size,
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-input-group", space.compactItemWrapperAdjust, className, classNames?.wrapper),
stack: true,
gap: "3xs",
style: {
...style,
...styles?.wrapper
},
children: [
label && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $eea734bbd8b9efff$export$2e2bcd8739ae039), {
style: styles?.label,
className: classNames?.label,
color: color,
...labelProps,
children: label
}),
!replaceDefaultControlWrapper && /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
align: "center",
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(space.classNames, "p-input-control"),
"data-has-error": !!error,
"data-appearance": appearance,
"data-disabled": isDisabled,
stretchX: true,
inline: true,
position: "relative",
children: [
prepend && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
className: "add-on add-on-left",
children: prepend
}),
children,
append && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
className: "add-on add-on-right",
children: append
})
]
}),
replaceDefaultControlWrapper && children,
error && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $9e021ab4f609c8de$export$2e2bcd8739ae039), {
validationStatus: validationStatus,
...errorMessageProps,
children: error
}),
description && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
as: "div",
variant: "light",
color: "gray",
size: "sm",
lineHeight: "short",
...descriptionProps,
children: description
})
]
});
}
$095d89378519ff08$export$a455218a85c89869.displayName = "Field";
function $ef10b8551376ecd8$export$f5b8910cec6cf069({ className: className, classNames: classNames, style: style, styles: styles, onChange: onChange, inputRef: inputRef, ...props }) {
const internalInputRef = (0, $hgUW1$react).useRef(null);
const { labelProps: labelProps, inputProps: inputProps, errorMessageProps: errorMessageProps, descriptionProps: descriptionProps } = (0, $hgUW1$useTextField)({
...props,
onChange: onChange,
inputElementType: "input"
}, internalInputRef);
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $095d89378519ff08$export$a455218a85c89869), {
labelProps: labelProps,
descriptionProps: descriptionProps,
errorMessageProps: errorMessageProps,
className: className,
classNames: classNames,
styles: styles,
style: style,
...props,
children: /*#__PURE__*/ (0, $hgUW1$jsx)("input", {
ref: (0, $cce662c1d2ec881b$export$c9058316764c140e)(inputRef, internalInputRef),
"data-has-left-addon": !!props.prepend,
"data-has-right-addon": !!props.append,
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)("p-text-input-el"),
...inputProps
})
});
}
const $e1148cdb3a130657$export$3b0d6d7590275603 = /*#__PURE__*/ $hgUW1$forwardRef(({ color: color = "var(--color-10)", className: className, style: style, size: size = "sm", ...props }, ref)=>{
const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
return /*#__PURE__*/ (0, $hgUW1$jsx)("div", {
"data-color": theme?.color ?? "gray",
style: {
fill: color,
...style
},
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
className,
"p-loader-wrapper"
]),
ref: ref,
...props,
children: /*#__PURE__*/ (0, $hgUW1$jsx)("svg", {
className: "p-loader-svg",
"data-size": size,
viewBox: "0 0 1024 1024",
fill: "inherit",
children: /*#__PURE__*/ (0, $hgUW1$jsx)("path", {
d: "M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
})
})
});
});
$e1148cdb3a130657$export$3b0d6d7590275603.displayName = "Loader";
function $b35ea695a7e1feb7$export$30a06c8d3562193f(object, keys) {
const keySet = new Set(keys);
return Object.keys(object).reduce((obj, key)=>{
if (!keySet.has(key)) obj[key] = object[key];
return obj;
}, {});
}
function $b35ea695a7e1feb7$export$357523c63a2253b9(object, keys) {
// TODO handle invalid objects properly
if (!object) return {};
return Object.keys(object).reduce((obj, key)=>{
if (keys.includes(key)) return {
...obj,
[key]: object[key]
};
return {
...obj
};
}, {});
}
function $b35ea695a7e1feb7$export$65980d18b75784e2(object, keys) {
const picked = $b35ea695a7e1feb7$export$357523c63a2253b9(object, keys);
const omitted = $b35ea695a7e1feb7$export$30a06c8d3562193f(object, keys);
return [
picked,
omitted
];
}
function $b35ea695a7e1feb7$export$d2dae087199d2383(object) {
return Object.keys(object).reduce((obj, key)=>{
if (object[key] == null) return {
...obj
};
return {
...obj,
[key]: object[key]
};
}, {});
}
const $9230e224c5c26d9c$var$ButtonGroupContext = /*#__PURE__*/ $hgUW1$createContext({});
function $9230e224c5c26d9c$export$69b1032f2ecdf404({ color: color, variant: variant, size: size, compact: compact, radius: radius, gap: gap, children: children, idleColor: idleColor, activeColor: activeColor, idleVariant: idleVariant, activeVariant: activeVariant, isToggle: isToggle, className: className, classNames: classNames, style: style, styles: styles }) {
const cleanProps = (0, $b35ea695a7e1feb7$export$d2dae087199d2383)({
color: color,
variant: variant,
size: size,
radius: radius,
idleColor: idleColor,
activeColor: activeColor,
idleVariant: idleVariant,
activeVariant: activeVariant,
isToggle: isToggle
});
return /*#__PURE__*/ (0, $hgUW1$jsx)($9230e224c5c26d9c$var$ButtonGroupContext.Provider, {
value: cleanProps,
children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $41cc567ab0625f8f$export$eef1e68107c58ef2), {
className: className,
classNames: classNames,
style: style,
styles: styles,
gap: gap,
compact: compact,
children: children
})
});
}
function $9230e224c5c26d9c$export$749e21be8b14b968() {
return $hgUW1$useContext($9230e224c5c26d9c$var$ButtonGroupContext);
}
const $d95a2216d3ccf702$export$353f5b6fc5456de1 = /*#__PURE__*/ (0, $hgUW1$react).forwardRef((props, ref)=>{
const space = (0, $41cc567ab0625f8f$export$450c36e0b0e62ccd)();
const buttonGroupProps = (0, $9230e224c5c26d9c$export$749e21be8b14b968)();
const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
const { color: color = theme?.color ?? "violet", variant: variant = "solid", append: append, prepend: prepend, size: size = "md", children: children, as: as = "button", className: className, isLoading: isLoading, radius: radius = "full", isToggle: isToggle, activeColor: activeColor = theme?.color, activeVariant: activeVariant = "solid", idleColor: idleColor = "gray", idleVariant: idleVariant = "outline", isIconButton: isIconButton, style: style, classNames: classNames, styles: styles, form: form, ...otherProps } = {
...buttonGroupProps,
...props
};
const state = isToggle ? (0, $hgUW1$useToggleState)({
...otherProps
}) : {};
const buttonRef = (0, $hgUW1$react).useRef(null);
const { buttonProps: buttonProps, isPressed: isPressed } = isToggle ? (0, $hgUW1$useToggleButton)({
...otherProps,
elementType: as
}, state, buttonRef) : (0, $hgUW1$useButton)({
...otherProps,
elementType: as
}, buttonRef);
function getColor() {
if (!state.isSelected && isToggle) return {
color: idleColor,
variant: idleVariant
};
if (state.isSelected && isToggle) return {
color: activeColor,
variant: activeVariant
};
return {
variant: variant,
color: color
};
}
const Comp = as;
return /*#__PURE__*/ (0, $hgUW1$jsxs)(Comp, {
style: {
...style,
...styles?.wrapper
},
"data-is-toggle": isToggle,
"data-pressed": isPressed,
"data-radius": radius,
"data-icon-button": isIconButton,
"data-loading": isLoading,
"aria-busy": isLoading,
"data-color": getColor().color,
"data-variant": getColor().variant,
"data-selected": state.isSelected,
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)((0, $0ad0bc75b5eb16a6$export$2db1d02db18b2d82)("size", size), className, "p-button", space.classNames),
ref: (0, $cce662c1d2ec881b$export$c9058316764c140e)(ref, buttonRef),
form: form,
...buttonProps,
children: [
prepend,
children,
isLoading ? /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e1148cdb3a130657$export$3b0d6d7590275603), {
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
"p-button-loader",
classNames?.loader
]),
style: {
marginLeft: 8,
...styles?.loader
},
color: "inherit",
size: "xs"
}) : append
]
});
});
$d95a2216d3ccf702$export$353f5b6fc5456de1.displayName = "Button";
const $e3f71af5eaf1c216$export$c25acd513dcc8062 = /*#__PURE__*/ $hgUW1$forwardRef((props, ref)=>{
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $d95a2216d3ccf702$export$353f5b6fc5456de1), {
isIconButton: true,
ref: ref,
...props,
children: props.children
});
});
$e3f71af5eaf1c216$export$c25acd513dcc8062.displayName = "IconButton";
function $2e89c7375b40283e$export$6bf0cd3a219bbade({ appearance: appearance = "outline", size: size = "md", color: color = "gray", classNames: classNames, styles: styles, append: append, prepend: prepend, placeholder: placeholder, showSteppers: showSteppers = false, error: error, label: label, minValue: minValue, maxValue: maxValue, formatOptions: formatOptions, inputRef: inputRef, incrementIcon: incrementIcon, decrementIcon: decrementIcon, onChange: onChange, ...props }) {
const ariaProps = {
...props,
maxValue: maxValue,
formatOptions: formatOptions,
minValue: minValue,
onChange: onChange,
"aria-label": props["aria-label"] ?? "number input"
};
const space = (0, $41cc567ab0625f8f$export$450c36e0b0e62ccd)();
const internalInputRef = $hgUW1$useRef(null);
const { locale: locale } = (0, $hgUW1$useLocale)();
const state = (0, $hgUW1$useNumberFieldState)({
...ariaProps,
locale: locale
});
const { errorMessageProps: errorMessageProps, descriptionProps: descriptionProps, labelProps: labelProps, groupProps: groupProps, inputProps: inputProps, incrementButtonProps: incrementButtonProps, decrementButtonProps: decrementButtonProps } = (0, $hgUW1$useNumberField)(ariaProps, state, internalInputRef);
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $095d89378519ff08$export$a455218a85c89869), {
classNames: classNames,
color: color,
size: size,
labelProps: labelProps,
descriptionProps: descriptionProps,
errorMessageProps: errorMessageProps,
error: error,
label: label,
replaceDefaultControlWrapper: true,
...props,
children: /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
gap: "4xs",
...groupProps,
className: "p-input-container",
children: [
showSteppers && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e3f71af5eaf1c216$export$c25acd513dcc8062), {
...decrementButtonProps,
radius: "md",
color: color,
variant: "outline",
size: size,
className: classNames?.decrement,
style: styles?.decrement,
children: decrementIcon
}),
/*#__PURE__*/ (0, $hgUW1$jsx)("input", {
style: styles?.input,
ref: (0, $cce662c1d2ec881b$export$c9058316764c140e)(internalInputRef, inputRef),
placeholder: placeholder,
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(classNames?.input, "p-input-control", "space-item", space.classNames),
"data-appearance": appearance,
"data-has-left-addon": !!prepend,
"data-has-right-addon": !!append,
type: "text",
...inputProps
}),
showSteppers && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e3f71af5eaf1c216$export$c25acd513dcc8062), {
...incrementButtonProps,
radius: "md",
color: color,
variant: "outline",
size: size,
className: classNames?.increment,
style: styles?.increment,
children: incrementIcon
})
]
})
});
}
function $5e6f334f3e354c44$export$b28585a458fee016({ wrapperRef: wrapperRef, ...props }) {
const [showPassword, setShowPassword] = (0, $hgUW1$react).useState(false);
return /*#__PURE__*/ (0, $hgUW1$jsx)((0, $ef10b8551376ecd8$export$f5b8910cec6cf069), {
wrapperRef: wrapperRef,
...props,
type: showPassword ? "text" : "password",
append: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $e3f71af5eaf1c216$export$c25acd513dcc8062), {
onPress: ()=>setShowPassword((p)=>!p),
size: "sm",
variant: "light",
children: /*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$HiEye), {
size: 16
})
})
});
}
const $7794de767effca39$export$379139ebc1c2b235 = /*#__PURE__*/ (0, $hgUW1$react).forwardRef(({ appearance: appearance = "outline", resize: resize, label: label, description: description, error: error, color: color = "gray", style: style, radius: radius, ...props }, ref)=>{
const textAreaRef = (0, $hgUW1$react).useRef(null);
const { labelProps: labelProps, inputProps: inputProps, errorMessageProps: errorMessageProps, descriptionProps: descriptionProps } = (0, $hgUW1$useTextField)({
...props,
inputElementType: "textarea",
label: label,
description: description,
errorMessage: error
}, textAreaRef);
const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
"data-color": color,
"data-radius": radius ?? theme?.radius ?? "lg",
style: style,
className: "p-input-group",
ref: ref,
stack: true,
gap: "2xs",
children: [
label && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $eea734bbd8b9efff$export$2e2bcd8739ae039), {
...labelProps,
children: label
}),
/*#__PURE__*/ (0, $hgUW1$jsx)("textarea", {
className: "p-input-control p-text-area",
disabled: props.isDisabled,
"data-has-error": !!error,
"data-resize": resize,
"data-appearance": appearance,
...inputProps
}),
error && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $9e021ab4f609c8de$export$2e2bcd8739ae039), {
...errorMessageProps,
children: error
}),
description && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
lineHeight: "base",
...descriptionProps,
variant: "light",
as: "div",
size: "sm",
children: description
})
]
});
});
$7794de767effca39$export$379139ebc1c2b235.displayName = "Textarea";
const $1ab2e355b7aa4310$export$f9c6924e160136d1 = /*#__PURE__*/ (0, $hgUW1$react).createContext(null);
const $1ab2e355b7aa4310$export$4aa08d5625cb8ead = /*#__PURE__*/ (0, $hgUW1$react).forwardRef((props, ref)=>{
const { children: children, align: align, justify: justify, label: label, description: description, errorMessage: errorMessage, size: size, appearance: appearance, color: color, shape: shape } = props;
const state = (0, $hgUW1$useCheckboxGroupState)(props);
const { groupProps: groupProps, labelProps: labelProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = (0, $hgUW1$useCheckboxGroup)(props, state);
return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $e2f278d76a00796a$export$f51f4c4ede09e011), {
align: align,
justify: justify,
ref: ref,
stack: true,
gap: "2xs",
...groupProps,
children: [
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
...labelProps,
children: label
}),
/*#__PURE__*/ (0, $hgUW1$jsx)($1ab2e355b7aa4310$export$f9c6924e160136d1.Provider, {
value: {
state: state,
props: {
size: size,
appearance: appearance,
color: color,
shape: shape
}
},
children: children
}),
description && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $3157c40f7d0e6fa2$export$5f1af8db9871e1d6), {
lineHeight: "base",
variant: "lighter",
size: "xs",
...descriptionProps,
children: description
}),
errorMessage && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $9e021ab4f609c8de$export$2e2bcd8739ae039), {
...errorMessageProps,
children: errorMessage
})
]
});
});
$1ab2e355b7aa4310$export$4aa08d5625cb8ead.displayName = "CheckboxGroup";
const $0ca204e719955216$export$48513f6b9f8ce62d = /*#__PURE__*/ (0, $hgUW1$react).forwardRef((props, ref)=>{
const { appearance: appearance, size: size, shape: shape = "round", color: color, className: className, classNames: classNames, styles: styles, style: style, ...otherProps } = props;
// check if checkbox is rendered in a group context
const groupContext = (0, $hgUW1$react).useContext((0, $1ab2e355b7aa4310$export$f9c6924e160136d1));
const groupState = groupContext?.state;
const groupProps = groupContext?.props;
const isWithinGroup = groupState != null;
const singleState = (0, $hgUW1$useToggleState)(props);
const inputRef = (0, $hgUW1$react).useRef(null);
const single = (0, $hgUW1$useCheckbox)(otherProps, singleState, inputRef);
const group = groupState && (0, $hgUW1$useCheckboxGroupItem)(otherProps, groupState, inputRef);
const { isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $hgUW1$useFocusRing)();
const inputProps = isWithinGroup ? group?.inputProps : single.inputProps;
const state = isWithinGroup ? groupState : singleState;
const isSelected = isWithinGroup ? groupState.isSelected(props.value ?? "") : state.isSelected;
function getRadius() {
const resolvedShape = shape || groupProps?.shape || undefined;
if (resolvedShape === "sharp") return "none";
if (resolvedShape === "round") return "md";
return undefined;
}
const resolvedColor = color || groupProps?.color || undefined;
const resolvedAppearance = appearance || groupProps?.appearance || "outline";
const resolvedSize = size || groupProps?.size || "md";
return /*#__PURE__*/ (0, $hgUW1$jsxs)("label", {
style: {
...style,
...styles?.wrapper
},
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(className, "p-checkbox", classNames?.wrapper),
"data-disabled": inputProps?.disabled,
ref: ref,
children: [
/*#__PURE__*/ (0, $hgUW1$jsx)((0, $hgUW1$VisuallyHidden), {
children: /*#__PURE__*/ (0, $hgUW1$jsx)("input", {
type: "checkbox",
ref: inputRef,
...inputProps,
...focusProps
})
}),
/*#__PURE__*/ (0, $hgUW1$jsxs)("div", {
style: {
...style,
...styles?.checkbox
},
"data-color": resolvedColor,
"data-radius": getRadius(),
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
"p-fake-checkbox",
classNames?.checkbox
]),
"data-focused": isFocusVisible,
"aria-hidden": "true",
"data-checked": isSelected && !props.isIndeterminate,
"data-indeterminate": props.isIndeterminate,
"data-size": resolvedSize,
"data-appearance": resolvedAppearance,
children: [
isSelected && !props.isIndeterminate && /*#__PURE__*/ (0, $hgUW1$jsx)("svg", {
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
"p-checkbox-icon",
classNames?.icon
]),
stroke: "white",
width: "0.75rem",
height: "0.75rem",
viewBox: "0 0 18 18",
children: /*#__PURE__*/ (0, $hgUW1$jsx)("polyline", {
points: "1 9 7 14 15 4",
fill: "none",
strokeWidth: 3,
strokeDasharray: 22,
strokeDashoffset: isSelected ? 44 : 66,
style: {
transition: "all 400ms"
}
})
}),
props.isIndeterminate && /*#__PURE__*/ (0, $hgUW1$jsx)((0, $ee0105641360f1c1$export$e71c4d32a2263218), {
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
"p-checkbox-icon",
classNames?.icon
]),
style: {
background: "var(--color-12)",
width: "70%",
height: 2,
borderRadius: 4
}
})
]
}),
otherProps.children
]
});
});
$0ca204e719955216$export$48513f6b9f8ce62d.displayName = "checkbox";
function $454673c0f3cc088e$export$16ce288f89fa631c({ className: className, classNames: classNames, styles: styles, style: style, ...props }) {
const ctx = (0, $hgUW1$react).useContext((0, $1ab2e355b7aa4310$export$f9c6924e160136d1));
if (!ctx) throw new Error("CheckboxItem must be used within a CheckboxGroup");
const ref = (0, $hgUW1$react).useRef(null);
const { inputProps: inputProps } = (0, $hgUW1$useCheckboxGroupItem)(props, ctx.state, ref);
const isSelected = ctx.state.isSelected(props.value);
const isDisabled = ctx.state.isDisabled || props.isDisabled;
return /*#__PURE__*/ (0, $hgUW1$jsxs)("label", {
style: {
...style,
...styles?.wrapper
},
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)(className, "p-checkbox-item", classNames?.wrapper),
"data-disabled": isDisabled,
"data-checked": isSelected,
children: [
/*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$VisuallyHidden), {
children: [
" ",
/*#__PURE__*/ (0, $hgUW1$jsx)("input", {
type: "checkbox",
ref: ref,
...inputProps
})
]
}),
props.children
]
});
}
function $fc3eb9661261e42e$export$91527519cfe8e396({ state: state, children: children, popoverRef: popoverRef, style: style, styles: styles, classNames: classNames, className: className, ...props }) {
const internalPopoverRef = $hgUW1$useRef(null);
const theme = (0, $5fc28f26e128d5c0$export$93d4e7f90805808f)();
const { popoverProps: popoverProps, underlayProps: underlayProps } = (0, $hgUW1$usePopover)({
...props,
popoverRef: internalPopoverRef
}, state);
const { style: internalStyle, ...otherPopoverProps } = popoverProps;
return /*#__PURE__*/ (0, $hgUW1$jsxs)((0, $hgUW1$Overlay), {
children: [
/*#__PURE__*/ (0, $hgUW1$jsx)("div", {
...underlayProps,
style: styles?.underlay,
className: (0, $cce662c1d2ec881b$export$a274e22fb40f762e)([
"underlay",
classNames?.underlay
])
}),
/*#__PURE__*/ (0, $hgUW1$jsx)("div", {
"data-color": theme?.color,
"data-radius": theme?.radius,
ref: (0, $cce662c1d2ec881b$export$c9058316764c140e)(popoverRef, internalPopoverRef),
cl