@charcoal-ui/react 2.0.1 → 2.1.0

package/dist/index.js

@@ -0,0 +1,4401 @@
+// src/core/ComponentAbstraction.tsx
+import React, { useContext } from "react";
+var DefaultLink = React.forwardRef(
+  function DefaultLink2({ to, children, ...rest }, ref) {
+    return /* @__PURE__ */ React.createElement("a", { href: to, ref, ...rest }, children);
+  }
+);
+var DefaultValue = {
+  Link: DefaultLink
+};
+var ComponentAbstractionContext = React.createContext(DefaultValue);
+function ComponentAbstraction({ children, components }) {
+  return /* @__PURE__ */ React.createElement(
+    ComponentAbstractionContext.Provider,
+    {
+      value: { ...DefaultValue, ...components }
+    },
+    children
+  );
+}
+function useComponentAbstraction() {
+  return useContext(ComponentAbstractionContext);
+}
+
+// src/core/SSRProvider.tsx
+import { SSRProvider } from "@react-aria/ssr";
+
+// src/core/OverlayProvider.tsx
+import { OverlayProvider } from "@react-aria/overlays";
+
+// src/components/Button/index.tsx
+import React3 from "react";
+import styled3 from "styled-components";
+
+// src/_lib/index.ts
+function unreachable(value) {
+  throw new Error(
+    arguments.length === 0 ? "unreachable" : `unreachable (${JSON.stringify(value)})`
+  );
+}
+
+// src/styled.ts
+import styled from "styled-components";
+import { createTheme } from "@charcoal-ui/styled";
+var theme = createTheme(styled);
+
+// src/components/Clickable/index.tsx
+import React2 from "react";
+import styled2, { css } from "styled-components";
+import { disabledSelector } from "@charcoal-ui/utils";
+var Clickable = React2.forwardRef(
+  function Clickable2(props, ref) {
+    const { Link } = useComponentAbstraction();
+    if ("to" in props) {
+      const { onClick, disabled = false, ...rest } = props;
+      return /* @__PURE__ */ React2.createElement(
+        A,
+        {
+          ...rest,
+          as: disabled ? void 0 : Link,
+          onClick: disabled ? void 0 : onClick,
+          "aria-disabled": disabled,
+          ref
+        }
+      );
+    } else {
+      return /* @__PURE__ */ React2.createElement(Button, { ...props, ref });
+    }
+  }
+);
+var Clickable_default = Clickable;
+var clickableCss = css`
+  /* Clickable style */
+  cursor: pointer;
+
+  ${disabledSelector} {
+    cursor: default;
+  }
+`;
+var Button = styled2.button`
+  /* Reset button appearance */
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+
+  &:focus {
+    outline: none;
+  }
+
+  /* Change the font styles in all browsers. */
+  font: inherit;
+
+  /* Remove the margin in Firefox and Safari. */
+  margin: 0;
+
+  /* Show the overflow in Edge. */
+  overflow: visible;
+
+  /* Remove the inheritance of text transform in Firefox. */
+  text-transform: none;
+
+  /* Remove the inner border and padding in Firefox. */
+  &::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+  }
+
+  ${clickableCss}
+`;
+var A = styled2.span`
+  /* Reset a-tag appearance */
+  color: inherit;
+
+  &:focus {
+    outline: none;
+  }
+
+  .text {
+    top: calc(1em + 2em);
+  }
+
+  ${clickableCss}
+`;
+
+// src/components/Button/index.tsx
+var Button2 = React3.forwardRef(function Button3({
+  children,
+  variant = "Default",
+  size = "M",
+  fixed = false,
+  disabled = false,
+  ...rest
+}, ref) {
+  return /* @__PURE__ */ React3.createElement(
+    StyledButton,
+    {
+      ...rest,
+      disabled,
+      variant,
+      size,
+      fixed,
+      ref
+    },
+    children
+  );
+});
+var Button_default = Button2;
+var StyledButton = styled3(Clickable_default).withConfig({
+  shouldForwardProp(prop) {
+    return prop !== "fixed";
+  }
+}).attrs(styledProps)`
+  width: ${(p) => p.fixed ? "stretch" : "min-content"};
+  display: inline-grid;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+
+  ${(p) => theme((o) => [
+  o.font[p.font].hover.press,
+  o.bg[p.background].hover.press,
+  o.typography(14).bold.preserveHalfLeading,
+  o.padding.horizontal(p.padding),
+  o.disabled,
+  o.borderRadius("oval"),
+  o.outline.default.focus
+])}
+
+  /* よく考えたらheight=32って定義が存在しないな... */
+  height: ${(p) => p.height}px;
+`;
+function styledProps(props) {
+  return {
+    ...props,
+    ...variantToProps(props.variant),
+    ...sizeToProps(props.size)
+  };
+}
+function variantToProps(variant) {
+  switch (variant) {
+    case "Overlay":
+      return { font: "text5", background: "surface4" };
+    case "Default":
+      return { font: "text2", background: "surface3" };
+    case "Primary":
+      return { font: "text5", background: "brand" };
+    case "Navigation":
+      return { font: "text5", background: "surface6" };
+    case "Danger":
+      return { font: "text5", background: "assertive" };
+    default:
+      return unreachable(variant);
+  }
+}
+function sizeToProps(size) {
+  switch (size) {
+    case "S":
+      return {
+        height: 32,
+        padding: 16
+      };
+    case "M":
+      return {
+        height: 40,
+        padding: 24
+      };
+  }
+}
+
+// src/components/IconButton/index.tsx
+import React4 from "react";
+import styled4 from "styled-components";
+var IconButton = React4.forwardRef(
+  function IconButtonInner({ variant = "Default", size = "M", icon, ...rest }, ref) {
+    validateIconSize(size, icon);
+    return /* @__PURE__ */ React4.createElement(StyledIconButton, { ...rest, ref, variant, size }, /* @__PURE__ */ React4.createElement("pixiv-icon", { name: icon }));
+  }
+);
+var IconButton_default = IconButton;
+var StyledIconButton = styled4(Clickable_default).attrs(styledProps2)`
+  user-select: none;
+
+  width: ${(p) => p.width}px;
+  height: ${(p) => p.height}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ font, background }) => theme((o) => [
+  o.font[font],
+  o.bg[background].hover.press,
+  o.disabled,
+  o.borderRadius("oval"),
+  o.outline.default.focus
+])}
+`;
+function styledProps2(props) {
+  return {
+    ...props,
+    ...variantToProps2(props.variant),
+    ...sizeToProps2(props.size)
+  };
+}
+function variantToProps2(variant) {
+  switch (variant) {
+    case "Default":
+      return { font: "text3", background: "transparent" };
+    case "Overlay":
+      return { font: "text5", background: "surface4" };
+  }
+}
+function sizeToProps2(size) {
+  switch (size) {
+    case "XS":
+      return {
+        width: 20,
+        height: 20
+      };
+    case "S":
+      return {
+        width: 32,
+        height: 32
+      };
+    case "M":
+      return {
+        width: 40,
+        height: 40
+      };
+  }
+}
+function validateIconSize(size, icon) {
+  let requiredIconSize;
+  switch (size) {
+    case "XS":
+      requiredIconSize = "16";
+      break;
+    case "S":
+    case "M":
+      requiredIconSize = "24";
+      break;
+  }
+  const result = /^\d*/u.exec(icon);
+  if (result == null) {
+    throw new Error("Invalid icon name");
+  }
+  const [iconSize] = result;
+  if (iconSize !== requiredIconSize) {
+    console.warn(
+      `IconButton with size "${size}" expect icon size "${requiredIconSize}, but got "${iconSize}"`
+    );
+  }
+}
+
+// src/components/Radio/index.tsx
+import React5, { useCallback, useContext as useContext2 } from "react";
+import styled5 from "styled-components";
+import warning from "warning";
+import { px } from "@charcoal-ui/utils";
+function Radio({
+  value,
+  forceChecked = false,
+  disabled = false,
+  children
+}) {
+  const {
+    name,
+    selected,
+    disabled: isParentDisabled,
+    readonly,
+    hasError,
+    onChange
+  } = useContext2(RadioGroupContext);
+  warning(
+    name !== void 0,
+    `"name" is not Provided for <Radio>. Perhaps you forgot to wrap with <RadioGroup> ?`
+  );
+  const isSelected = value === selected;
+  const isDisabled = disabled || isParentDisabled;
+  const isReadonly = readonly && !isSelected;
+  const handleChange = useCallback(
+    (e) => {
+      onChange(e.currentTarget.value);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ React5.createElement(RadioRoot, { "aria-disabled": isDisabled || isReadonly }, /* @__PURE__ */ React5.createElement(
+    RadioInput,
+    {
+      name,
+      value,
+      checked: forceChecked || isSelected,
+      hasError,
+      onChange: handleChange,
+      disabled: isDisabled || isReadonly
+    }
+  ), children != null && /* @__PURE__ */ React5.createElement(RadioLabel, null, children));
+}
+var RadioRoot = styled5.label`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-gap: ${({ theme: theme4 }) => px(theme4.spacing[4])};
+  align-items: center;
+  cursor: pointer;
+
+  ${theme((o) => [o.disabled])}
+`;
+var RadioInput = styled5.input.attrs({ type: "radio" })`
+  /** Make prior to browser default style */
+  &[type='radio'] {
+    appearance: none;
+    display: block;
+    box-sizing: border-box;
+
+    padding: 6px;
+
+    width: 20px;
+    height: 20px;
+
+    ${({ hasError = false }) => theme((o) => [
+  o.borderRadius("oval"),
+  o.bg.text5.hover.press,
+  hasError && o.outline.assertive
+])};
+
+    &:not(:checked) {
+      border-width: 2px;
+      border-style: solid;
+      border-color: ${({ theme: theme4 }) => theme4.color.text4};
+    }
+
+    &:checked {
+      ${theme((o) => o.bg.brand.hover.press)}
+
+      &::after {
+        content: '';
+        display: block;
+        width: 8px;
+        height: 8px;
+        pointer-events: none;
+
+        ${theme((o) => [o.bg.text5.hover.press, o.borderRadius("oval")])}
+      }
+    }
+
+    ${theme((o) => o.outline.default.focus)}
+  }
+`;
+var RadioLabel = styled5.div`
+  ${theme((o) => [o.typography(14)])}
+`;
+var StyledRadioGroup = styled5.div`
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-gap: ${({ theme: theme4 }) => px(theme4.spacing[8])};
+`;
+var RadioGroupContext = React5.createContext({
+  name: void 0,
+  selected: void 0,
+  disabled: false,
+  readonly: false,
+  hasError: false,
+  onChange() {
+    throw new Error(
+      "Cannot find onChange() handler. Perhaps you forgot to wrap with <RadioGroup> ?"
+    );
+  }
+});
+function RadioGroup({
+  className,
+  value,
+  label,
+  name,
+  onChange,
+  disabled,
+  readonly,
+  hasError,
+  children
+}) {
+  const handleChange = useCallback(
+    (next) => {
+      onChange(next);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ React5.createElement(
+    RadioGroupContext.Provider,
+    {
+      value: {
+        name,
+        selected: value,
+        disabled: disabled ?? false,
+        readonly: readonly ?? false,
+        hasError: hasError ?? false,
+        onChange: handleChange
+      }
+    },
+    /* @__PURE__ */ React5.createElement(
+      StyledRadioGroup,
+      {
+        role: "radiogroup",
+        "aria-orientation": "vertical",
+        "aria-label": label,
+        "aria-invalid": hasError,
+        className
+      },
+      children
+    )
+  );
+}
+
+// src/components/MultiSelect/index.tsx
+import React6, { useCallback as useCallback2, useContext as useContext3 } from "react";
+import styled6, { css as css2 } from "styled-components";
+import warning2 from "warning";
+import { disabledSelector as disabledSelector2, px as px2 } from "@charcoal-ui/utils";
+
+// src/components/MultiSelect/context.ts
+import { createContext } from "react";
+var MultiSelectGroupContext = createContext({
+  name: void 0,
+  selected: [],
+  disabled: false,
+  readonly: false,
+  hasError: false,
+  onChange() {
+    throw new Error(
+      "Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?"
+    );
+  }
+});
+
+// src/components/MultiSelect/index.tsx
+function MultiSelect({
+  value,
+  forceChecked = false,
+  disabled = false,
+  onChange,
+  variant = "default",
+  children
+}) {
+  const {
+    name,
+    selected,
+    disabled: parentDisabled,
+    readonly,
+    hasError,
+    onChange: parentOnChange
+  } = useContext3(MultiSelectGroupContext);
+  warning2(
+    name !== void 0,
+    `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
+  );
+  const isSelected = selected.includes(value) || forceChecked;
+  const isDisabled = disabled || parentDisabled || readonly;
+  const handleChange = useCallback2(
+    (event) => {
+      if (!(event.currentTarget instanceof HTMLInputElement)) {
+        return;
+      }
+      if (onChange)
+        onChange({ value, selected: event.currentTarget.checked });
+      parentOnChange({ value, selected: event.currentTarget.checked });
+    },
+    [onChange, parentOnChange, value]
+  );
+  return /* @__PURE__ */ React6.createElement(MultiSelectRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ React6.createElement(
+    MultiSelectInput,
+    {
+      ...{
+        name,
+        value,
+        hasError
+      },
+      checked: isSelected,
+      disabled: isDisabled,
+      onChange: handleChange,
+      overlay: variant === "overlay",
+      "aria-invalid": hasError
+    }
+  ), /* @__PURE__ */ React6.createElement(
+    MultiSelectInputOverlay,
+    {
+      overlay: variant === "overlay",
+      hasError,
+      "aria-hidden": true
+    },
+    /* @__PURE__ */ React6.createElement("pixiv-icon", { name: "24/Check", "unsafe-non-guideline-scale": 16 / 24 })
+  ), Boolean(children) && /* @__PURE__ */ React6.createElement(MultiSelectLabel, null, children));
+}
+var MultiSelectRoot = styled6.label`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  ${disabledSelector2} {
+    cursor: default;
+  }
+  gap: ${({ theme: theme4 }) => px2(theme4.spacing[4])};
+  ${theme((o) => o.disabled)}
+`;
+var MultiSelectLabel = styled6.div`
+  display: flex;
+  align-items: center;
+  ${theme((o) => [o.typography(14), o.font.text1])}
+`;
+var MultiSelectInput = styled6.input.attrs({ type: "checkbox" })`
+  &[type='checkbox'] {
+    appearance: none;
+    display: block;
+    width: 20px;
+    height: 20px;
+    margin: 0;
+
+    &:checked {
+      ${theme((o) => o.bg.brand.hover.press)}
+    }
+
+    ${({ hasError, overlay }) => theme((o) => [
+  o.bg.text3.hover.press,
+  o.borderRadius("oval"),
+  hasError && !overlay && o.outline.assertive,
+  overlay && o.bg.surface4
+])};
+  }
+`;
+var MultiSelectInputOverlay = styled6.div`
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ hasError, overlay }) => theme((o) => [
+  o.width.px(24),
+  o.height.px(24),
+  o.borderRadius("oval"),
+  o.font.text5,
+  hasError && overlay && o.outline.assertive
+])}
+
+  ${({ overlay }) => overlay && css2`
+      border-color: ${({ theme: theme4 }) => theme4.color.text5};
+      border-width: 2px;
+      border-style: solid;
+    `}
+`;
+function MultiSelectGroup({
+  className,
+  name,
+  ariaLabel,
+  selected,
+  onChange,
+  disabled = false,
+  readonly = false,
+  hasError = false,
+  children
+}) {
+  const handleChange = useCallback2(
+    (payload) => {
+      const index = selected.indexOf(payload.value);
+      if (payload.selected) {
+        if (index < 0) {
+          onChange([...selected, payload.value]);
+        }
+      } else {
+        if (index >= 0) {
+          onChange([...selected.slice(0, index), ...selected.slice(index + 1)]);
+        }
+      }
+    },
+    [onChange, selected]
+  );
+  return /* @__PURE__ */ React6.createElement(
+    MultiSelectGroupContext.Provider,
+    {
+      value: {
+        name,
+        selected: Array.from(new Set(selected)),
+        disabled,
+        readonly,
+        hasError,
+        onChange: handleChange
+      }
+    },
+    /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        className,
+        "aria-label": ariaLabel,
+        "data-testid": "SelectGroup"
+      },
+      children
+    )
+  );
+}
+
+// src/components/Switch/index.tsx
+import { useSwitch } from "@react-aria/switch";
+import React7, { useRef, useMemo } from "react";
+import { useToggleState } from "react-stately";
+import styled7 from "styled-components";
+import { disabledSelector as disabledSelector3, px as px3 } from "@charcoal-ui/utils";
+function SwitchCheckbox(props) {
+  const { disabled, className } = props;
+  const ariaSwitchProps = useMemo(
+    () => ({
+      ...props,
+      "aria-label": "children" in props ? void 0 : props.label,
+      isDisabled: props.disabled,
+      isSelected: props.checked
+    }),
+    [props]
+  );
+  const state = useToggleState(ariaSwitchProps);
+  const ref = useRef(null);
+  const {
+    inputProps: { className: _className, type: _type, ...rest }
+  } = useSwitch(ariaSwitchProps, state, ref);
+  return /* @__PURE__ */ React7.createElement(Label, { className, "aria-disabled": disabled }, /* @__PURE__ */ React7.createElement(SwitchInput, { ...rest, ref }), "children" in props ? /* @__PURE__ */ React7.createElement(LabelInner, null, props.children) : void 0);
+}
+var Label = styled7.label`
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+  gap: ${({ theme: theme4 }) => px3(theme4.spacing[4])};
+  cursor: pointer;
+  outline: 0;
+
+  ${theme((o) => o.disabled)}
+
+  ${disabledSelector3} {
+    cursor: default;
+  }
+`;
+var LabelInner = styled7.div`
+  ${theme((o) => o.typography(14))}
+`;
+var SwitchInput = styled7.input.attrs({
+  type: "checkbox"
+})`
+  &[type='checkbox'] {
+    appearance: none;
+    display: inline-flex;
+    position: relative;
+    box-sizing: border-box;
+    width: 28px;
+    border: 2px solid transparent;
+    transition: box-shadow 0.2s, background-color 0.2s;
+    cursor: inherit;
+    ${theme((o) => [
+  o.borderRadius(16),
+  o.height.px(16),
+  o.bg.text4.hover.press,
+  o.outline.default.focus
+])}
+
+    &::after {
+      content: '';
+      position: absolute;
+      display: block;
+      top: 0;
+      left: 0;
+      width: 12px;
+      height: 12px;
+      transform: translateX(0);
+      transition: transform 0.2s;
+      ${theme((o) => [o.bg.text5.hover.press, o.borderRadius("oval")])}
+    }
+
+    &:checked {
+      ${theme((o) => o.bg.brand.hover.press)}
+
+      &::after {
+        transform: translateX(12px);
+      }
+    }
+  }
+`;
+
+// src/components/TextField/index.tsx
+import { useTextField } from "@react-aria/textfield";
+import { useVisuallyHidden } from "@react-aria/visually-hidden";
+import React9, {
+  useCallback as useCallback3,
+  useEffect,
+  useRef as useRef2,
+  useState
+} from "react";
+import styled9, { css as css3 } from "styled-components";
+
+// src/components/FieldLabel/index.tsx
+import React8 from "react";
+import styled8 from "styled-components";
+import { createTheme as createTheme2 } from "@charcoal-ui/styled";
+var FieldLabel = React8.forwardRef(
+  function FieldLabel2({
+    style,
+    className,
+    label,
+    required = false,
+    requiredText,
+    subLabel,
+    ...labelProps
+  }, ref) {
+    return /* @__PURE__ */ React8.createElement(FieldLabelWrapper, { style, className }, /* @__PURE__ */ React8.createElement(Label2, { ref, ...labelProps }, label), required && /* @__PURE__ */ React8.createElement(RequiredText, null, requiredText), /* @__PURE__ */ React8.createElement(SubLabelClickable, null, /* @__PURE__ */ React8.createElement("span", null, subLabel)));
+  }
+);
+var FieldLabel_default = FieldLabel;
+var theme2 = createTheme2(styled8);
+var Label2 = styled8.label`
+  ${theme2((o) => [o.typography(14).bold, o.font.text1])}
+`;
+var RequiredText = styled8.span`
+  ${theme2((o) => [o.typography(14), o.font.text3])}
+`;
+var SubLabelClickable = styled8.div`
+  ${theme2((o) => [
+  o.typography(14),
+  o.font.text3.hover.press,
+  o.outline.default.focus
+])}
+`;
+var FieldLabelWrapper = styled8.div`
+  display: inline-flex;
+  align-items: center;
+
+  > ${RequiredText} {
+    ${theme2((o) => o.margin.left(4))}
+  }
+
+  > ${SubLabelClickable} {
+    ${theme2((o) => o.margin.left("auto"))}
+  }
+`;
+
+// src/components/TextField/index.tsx
+import { createTheme as createTheme3 } from "@charcoal-ui/styled";
+var theme3 = createTheme3(styled9);
+function mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(value);
+      } else if (ref !== null) {
+        ;
+        ref.current = value;
+      }
+    }
+  };
+}
+function countCodePointsInString(string) {
+  return Array.from(string).length;
+}
+var TextField = React9.forwardRef(
+  function TextField2(props, ref) {
+    return props.multiline !== void 0 && props.multiline ? /* @__PURE__ */ React9.createElement(MultiLineTextField, { ref, ...props }) : /* @__PURE__ */ React9.createElement(SingleLineTextField, { ref, ...props });
+  }
+);
+var TextField_default = TextField;
+var SingleLineTextField = React9.forwardRef(function SingleLineTextFieldInner({ onChange, ...props }, forwardRef4) {
+  const {
+    className,
+    showLabel = false,
+    showCount = false,
+    label,
+    requiredText,
+    subLabel,
+    disabled = false,
+    required,
+    invalid = false,
+    assistiveText,
+    maxLength,
+    prefix = null,
+    suffix = null
+  } = props;
+  const { visuallyHiddenProps } = useVisuallyHidden();
+  const ariaRef = useRef2(null);
+  const prefixRef = useRef2(null);
+  const suffixRef = useRef2(null);
+  const [count, setCount] = useState(countCodePointsInString(props.value ?? ""));
+  const [prefixWidth, setPrefixWidth] = useState(0);
+  const [suffixWidth, setSuffixWidth] = useState(0);
+  const nonControlled = props.value === void 0;
+  const handleChange = useCallback3(
+    (value) => {
+      const count2 = countCodePointsInString(value);
+      if (maxLength !== void 0 && count2 > maxLength) {
+        return;
+      }
+      if (nonControlled) {
+        setCount(count2);
+      }
+      onChange?.(value);
+    },
+    [maxLength, nonControlled, onChange]
+  );
+  useEffect(() => {
+    setCount(countCodePointsInString(props.value ?? ""));
+  }, [props.value]);
+  const { inputProps, labelProps, descriptionProps, errorMessageProps } = useTextField(
+    {
+      inputElementType: "input",
+      isDisabled: disabled,
+      isRequired: required,
+      validationState: invalid ? "invalid" : "valid",
+      description: !invalid && assistiveText,
+      errorMessage: invalid && assistiveText,
+      onChange: handleChange,
+      ...props
+    },
+    ariaRef
+  );
+  useEffect(() => {
+    const prefixObserver = new ResizeObserver((entries) => {
+      setPrefixWidth(entries[0].contentRect.width);
+    });
+    const suffixObserver = new ResizeObserver((entries) => {
+      setSuffixWidth(entries[0].contentRect.width);
+    });
+    if (prefixRef.current !== null) {
+      prefixObserver.observe(prefixRef.current);
+    }
+    if (suffixRef.current !== null) {
+      suffixObserver.observe(suffixRef.current);
+    }
+    return () => {
+      suffixObserver.disconnect();
+      prefixObserver.disconnect();
+    };
+  }, []);
+  return /* @__PURE__ */ React9.createElement(TextFieldRoot, { className, isDisabled: disabled }, /* @__PURE__ */ React9.createElement(
+    TextFieldLabel,
+    {
+      label,
+      requiredText,
+      required,
+      subLabel,
+      ...labelProps,
+      ...!showLabel ? visuallyHiddenProps : {}
+    }
+  ), /* @__PURE__ */ React9.createElement(StyledInputContainer, null, /* @__PURE__ */ React9.createElement(PrefixContainer, { ref: prefixRef }, /* @__PURE__ */ React9.createElement(Affix, null, prefix)), /* @__PURE__ */ React9.createElement(
+    StyledInput,
+    {
+      ref: mergeRefs(forwardRef4, ariaRef),
+      invalid,
+      extraLeftPadding: prefixWidth,
+      extraRightPadding: suffixWidth,
+      ...inputProps
+    }
+  ), /* @__PURE__ */ React9.createElement(SuffixContainer, { ref: suffixRef }, /* @__PURE__ */ React9.createElement(Affix, null, suffix), showCount && /* @__PURE__ */ React9.createElement(SingleLineCounter, null, maxLength !== void 0 ? `${count}/${maxLength}` : count))), assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ React9.createElement(
+    AssistiveText,
+    {
+      invalid,
+      ...invalid ? errorMessageProps : descriptionProps
+    },
+    assistiveText
+  ));
+});
+var MultiLineTextField = React9.forwardRef(function MultiLineTextFieldInner({ onChange, ...props }, forwardRef4) {
+  const {
+    className,
+    showCount = false,
+    showLabel = false,
+    label,
+    requiredText,
+    subLabel,
+    disabled = false,
+    required,
+    invalid = false,
+    assistiveText,
+    maxLength,
+    autoHeight = false,
+    rows: initialRows = 4
+  } = props;
+  const { visuallyHiddenProps } = useVisuallyHidden();
+  const textareaRef = useRef2(null);
+  const ariaRef = useRef2(null);
+  const [count, setCount] = useState(countCodePointsInString(props.value ?? ""));
+  const [rows, setRows] = useState(initialRows);
+  const syncHeight = useCallback3(
+    (textarea) => {
+      const rows2 = (`${textarea.value}
+`.match(/\n/gu)?.length ?? 0) || 1;
+      setRows(initialRows <= rows2 ? rows2 : initialRows);
+    },
+    [initialRows]
+  );
+  const nonControlled = props.value === void 0;
+  const handleChange = useCallback3(
+    (value) => {
+      const count2 = countCodePointsInString(value);
+      if (maxLength !== void 0 && count2 > maxLength) {
+        return;
+      }
+      if (nonControlled) {
+        setCount(count2);
+      }
+      if (autoHeight && textareaRef.current !== null) {
+        syncHeight(textareaRef.current);
+      }
+      onChange?.(value);
+    },
+    [autoHeight, maxLength, nonControlled, onChange, syncHeight]
+  );
+  useEffect(() => {
+    setCount(countCodePointsInString(props.value ?? ""));
+  }, [props.value]);
+  const { inputProps, labelProps, descriptionProps, errorMessageProps } = useTextField(
+    {
+      inputElementType: "textarea",
+      isDisabled: disabled,
+      isRequired: required,
+      validationState: invalid ? "invalid" : "valid",
+      description: !invalid && assistiveText,
+      errorMessage: invalid && assistiveText,
+      onChange: handleChange,
+      ...props
+    },
+    ariaRef
+  );
+  useEffect(() => {
+    if (autoHeight && textareaRef.current !== null) {
+      syncHeight(textareaRef.current);
+    }
+  }, [autoHeight, syncHeight]);
+  return /* @__PURE__ */ React9.createElement(TextFieldRoot, { className, isDisabled: disabled }, /* @__PURE__ */ React9.createElement(
+    TextFieldLabel,
+    {
+      label,
+      requiredText,
+      required,
+      subLabel,
+      ...labelProps,
+      ...!showLabel ? visuallyHiddenProps : {}
+    }
+  ), /* @__PURE__ */ React9.createElement(
+    StyledTextareaContainer,
+    {
+      invalid,
+      rows: showCount ? rows + 1 : rows
+    },
+    /* @__PURE__ */ React9.createElement(
+      StyledTextarea,
+      {
+        ref: mergeRefs(textareaRef, forwardRef4, ariaRef),
+        rows,
+        noBottomPadding: showCount,
+        ...inputProps
+      }
+    ),
+    showCount && /* @__PURE__ */ React9.createElement(MultiLineCounter, null, maxLength !== void 0 ? `${count}/${maxLength}` : count)
+  ), assistiveText != null && assistiveText.length !== 0 && /* @__PURE__ */ React9.createElement(
+    AssistiveText,
+    {
+      invalid,
+      ...invalid ? errorMessageProps : descriptionProps
+    },
+    assistiveText
+  ));
+});
+var TextFieldRoot = styled9.div`
+  display: flex;
+  flex-direction: column;
+
+  ${(p) => p.isDisabled && { opacity: p.theme.elementEffect.disabled.opacity }}
+`;
+var TextFieldLabel = styled9(FieldLabel_default)`
+  ${theme3((o) => o.margin.bottom(8))}
+`;
+var StyledInputContainer = styled9.div`
+  height: 40px;
+  display: grid;
+  position: relative;
+`;
+var PrefixContainer = styled9.span`
+  position: absolute;
+  top: 50%;
+  left: 8px;
+  transform: translateY(-50%);
+`;
+var SuffixContainer = styled9.span`
+  position: absolute;
+  top: 50%;
+  right: 8px;
+  transform: translateY(-50%);
+
+  display: flex;
+  gap: 8px;
+`;
+var Affix = styled9.span`
+  user-select: none;
+
+  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text2])}
+`;
+var StyledInput = styled9.input`
+  border: none;
+  box-sizing: border-box;
+  outline: none;
+  font-family: inherit;
+
+  /* Prevent zooming for iOS Safari */
+  transform-origin: top left;
+  transform: scale(0.875);
+  width: calc(100% / 0.875);
+  height: calc(100% / 0.875);
+  font-size: calc(14px / 0.875);
+  line-height: calc(22px / 0.875);
+  padding-left: calc((8px + ${(p) => p.extraLeftPadding}px) / 0.875);
+  padding-right: calc((8px + ${(p) => p.extraRightPadding}px) / 0.875);
+  border-radius: calc(4px / 0.875);
+
+  /* Display box-shadow for iOS Safari */
+  appearance: none;
+
+  ${(p) => theme3((o) => [
+  o.bg.surface3.hover,
+  o.outline.default.focus,
+  p.invalid && o.outline.assertive,
+  o.font.text2
+])}
+
+  &::placeholder {
+    ${theme3((o) => o.font.text3)}
+  }
+`;
+var StyledTextareaContainer = styled9.div`
+  position: relative;
+  overflow: hidden;
+  padding: 0 8px;
+
+  ${(p) => theme3((o) => [
+  o.bg.surface3.hover,
+  p.invalid && o.outline.assertive,
+  o.font.text2,
+  o.borderRadius(4)
+])}
+
+  &:focus-within {
+    ${(p) => theme3((o) => p.invalid ? o.outline.assertive : o.outline.default)}
+  }
+
+  ${({ rows }) => css3`
+    height: calc(22px * ${rows} + 18px);
+  `};
+`;
+var StyledTextarea = styled9.textarea`
+  border: none;
+  outline: none;
+  resize: none;
+  font-family: inherit;
+  color: inherit;
+
+  /* Prevent zooming for iOS Safari */
+  transform-origin: top left;
+  transform: scale(0.875);
+  width: calc(100% / 0.875);
+  font-size: calc(14px / 0.875);
+  line-height: calc(22px / 0.875);
+  padding: calc(9px / 0.875) 0 ${(p) => p.noBottomPadding ? 0 : ""};
+
+  ${({ rows = 1 }) => css3`
+    height: calc(22px / 0.875 * ${rows});
+  `};
+
+  /* Display box-shadow for iOS Safari */
+  appearance: none;
+
+  background: none;
+
+  &::placeholder {
+    ${theme3((o) => o.font.text3)}
+  }
+
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* Hide scrollbar for IE, Edge and Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+`;
+var SingleLineCounter = styled9.span`
+  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+`;
+var MultiLineCounter = styled9.span`
+  position: absolute;
+  bottom: 9px;
+  right: 8px;
+
+  ${theme3((o) => [o.typography(14).preserveHalfLeading, o.font.text3])}
+`;
+var AssistiveText = styled9.p`
+  ${(p) => theme3((o) => [
+  o.typography(14),
+  o.margin.top(8),
+  o.margin.bottom(0),
+  o.font[p.invalid ? "assertive" : "text1"]
+])}
+`;
+
+// src/components/Icon/index.tsx
+import React10 from "react";
+import "@charcoal-ui/icons";
+var Icon = React10.forwardRef(function IconInner({ name, scale, unsafeNonGuidelineScale, className, ...rest }, ref) {
+  return /* @__PURE__ */ React10.createElement(
+    "pixiv-icon",
+    {
+      ref,
+      name,
+      scale,
+      "unsafe-non-guideline-scale": unsafeNonGuidelineScale,
+      class: className,
+      ...rest
+    }
+  );
+});
+var Icon_default = Icon;
+
+// src/components/Modal/index.tsx
+import React11, { useContext as useContext4, useRef as useRef3 } from "react";
+import {
+  Overlay,
+  useModalOverlay,
+  useOverlay,
+  usePreventScroll
+} from "@react-aria/overlays";
+import styled10, { css as css4, useTheme } from "styled-components";
+import { FocusScope } from "@react-aria/focus";
+import { useDialog } from "@react-aria/dialog";
+
+// ../foundation/src/grid.ts
+var COLUMN_UNIT = 80;
+var GUTTER_UNIT = 24;
+function columnSystem(span, column, gutter) {
+  return span * column + (span - 1) * gutter;
+}
+
+// src/components/Modal/index.tsx
+import { maxWidth } from "@charcoal-ui/utils";
+import { useMedia } from "@charcoal-ui/styled";
+import { animated, useTransition, easings } from "react-spring";
+var DEFAULT_Z_INDEX = 10;
+function Modal({
+  children,
+  zIndex = DEFAULT_Z_INDEX,
+  portalContainer,
+  ...props
+}) {
+  const {
+    title,
+    size = "M",
+    bottomSheet = false,
+    isDismissable,
+    onClose,
+    isOpen = false
+  } = props;
+  const ref = useRef3(null);
+  const { overlayProps, underlayProps } = useOverlay(props, ref);
+  usePreventScroll();
+  const { modalProps } = useModalOverlay(
+    props,
+    {
+      close: onClose,
+      isOpen,
+      open: () => {
+      },
+      setOpen: () => {
+      },
+      toggle: () => {
+      }
+    },
+    ref
+  );
+  const { dialogProps, titleProps } = useDialog(props, ref);
+  const theme4 = useTheme();
+  const isMobile = useMedia(maxWidth(theme4.breakpoint.screen1)) ?? false;
+  const transitionEnabled = isMobile && bottomSheet !== false;
+  const transition = useTransition(isOpen, {
+    from: {
+      transform: "translateY(100%)",
+      backgroundColor: "rgba(0, 0, 0, 0)"
+    },
+    enter: {
+      transform: "translateY(0%)",
+      backgroundColor: "rgba(0, 0, 0, 0.4)"
+    },
+    leave: {
+      transform: "translateY(100%)",
+      backgroundColor: "rgba(0, 0, 0, 0)"
+    },
+    config: transitionEnabled ? { duration: 400, easing: easings.easeOutQuart } : { duration: 0 }
+  });
+  const showDismiss = !isMobile || bottomSheet !== true;
+  return transition(
+    ({ backgroundColor, transform }, item) => item && /* @__PURE__ */ React11.createElement(Overlay, null, /* @__PURE__ */ React11.createElement(
+      ModalBackground,
+      {
+        zIndex,
+        ...underlayProps,
+        style: transitionEnabled ? { backgroundColor } : {}
+      },
+      /* @__PURE__ */ React11.createElement(FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ React11.createElement(
+        ModalDialog,
+        {
+          ref,
+          ...overlayProps,
+          ...modalProps,
+          ...dialogProps,
+          style: transitionEnabled ? { transform } : {},
+          size,
+          bottomSheet
+        },
+        /* @__PURE__ */ React11.createElement(
+          ModalContext.Provider,
+          {
+            value: { titleProps, title, close: onClose, showDismiss }
+          },
+          children,
+          isDismissable === true && /* @__PURE__ */ React11.createElement(
+            ModalCrossButton,
+            {
+              size: "S",
+              icon: "24/Close",
+              onClick: onClose
+            }
+          )
+        )
+      ))
+    ))
+  );
+}
+var ModalContext = React11.createContext({
+  titleProps: {},
+  title: "",
+  close: void 0,
+  showDismiss: true
+});
+var ModalBackground = animated(styled10.div`
+  z-index: ${({ zIndex }) => zIndex};
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  ${theme((o) => [o.bg.surface4])}
+`);
+var ModalDialog = animated(styled10.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: ${(p) => p.size === "S" ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === "M" ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === "L" ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : unreachable(p.size)}px;
+
+  ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
+
+  @media ${({ theme: theme4 }) => maxWidth(theme4.breakpoint.screen1)} {
+    ${(p) => p.bottomSheet === "full" ? css4`
+            top: auto;
+            bottom: 0;
+            left: 0;
+            transform: none;
+            border-radius: 0;
+            width: 100%;
+            height: 100%;
+          ` : p.bottomSheet ? css4`
+            top: auto;
+            bottom: 0;
+            left: 0;
+            transform: none;
+            border-radius: 0;
+            width: 100%;
+          ` : css4`
+            width: calc(100% - 48px);
+          `}
+  }
+`);
+var ModalCrossButton = styled10(IconButton_default)`
+  position: absolute;
+  top: 8px;
+  right: 8px;
+
+  ${theme((o) => [o.font.text3.hover.press])}
+`;
+function ModalTitle(props) {
+  const { titleProps, title } = useContext4(ModalContext);
+  return /* @__PURE__ */ React11.createElement(ModalHeading, { ...titleProps, ...props }, title);
+}
+var ModalHeading = styled10.h3`
+  margin: 0;
+  font-weight: inherit;
+  font-size: inherit;
+`;
+
+// src/components/Modal/ModalPlumbing.tsx
+import React12 from "react";
+import styled11 from "styled-components";
+import { maxWidth as maxWidth2 } from "@charcoal-ui/utils";
+function ModalHeader() {
+  return /* @__PURE__ */ React12.createElement(ModalHeaderRoot, null, /* @__PURE__ */ React12.createElement(StyledModalTitle, null));
+}
+var ModalHeaderRoot = styled11.div`
+  height: 64px;
+  display: grid;
+  align-content: center;
+  justify-content: center;
+`;
+var StyledModalTitle = styled11(ModalTitle)`
+  ${theme((o) => [o.font.text1, o.typography(16).bold])}
+`;
+var ModalAlign = styled11.div`
+  ${theme((o) => [o.padding.horizontal(24)])}
+
+  @media ${({ theme: theme4 }) => maxWidth2(theme4.breakpoint.screen1)} {
+    ${theme((o) => [o.padding.horizontal(16)])}
+  }
+`;
+var ModalBody = styled11.div`
+  ${theme((o) => [o.padding.bottom(40)])}
+`;
+var ModalButtons = styled11.div`
+  display: grid;
+  grid-auto-flow: row;
+  grid-row-gap: 8px;
+  ${theme((o) => [o.padding.horizontal(24).top(16)])}
+
+  @media ${({ theme: theme4 }) => maxWidth2(theme4.breakpoint.screen1)} {
+    ${theme((o) => [o.padding.horizontal(16)])}
+  }
+`;
+
+// src/components/LoadingSpinner/index.tsx
+import { transparentize } from "polished";
+import React13, { useImperativeHandle, useRef as useRef4 } from "react";
+import styled12, { keyframes } from "styled-components";
+function LoadingSpinner({
+  size = 48,
+  padding = 16,
+  transparent = false
+}) {
+  return /* @__PURE__ */ React13.createElement(LoadingSpinnerRoot, { size, padding, transparent }, /* @__PURE__ */ React13.createElement(LoadingSpinnerIcon, null));
+}
+var LoadingSpinnerRoot = styled12.div.attrs({ role: "progressbar" })`
+  margin: auto;
+  padding: ${(props) => props.padding}px;
+  border-radius: 8px;
+  font-size: ${(props) => props.size}px;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  background-color: ${({ theme: theme4, transparent }) => transparent ? "transparent" : transparentize(0.32, theme4.color.background1)};
+  color: ${({ theme: theme4 }) => theme4.color.text4};
+`;
+var scaleout = keyframes`
+  from {
+    transform: scale(0);
+    opacity: 1;
+  }
+
+  to {
+    transform: scale(1);
+    opacity: 0;
+  }
+`;
+var Icon2 = styled12.div.attrs({ role: "presentation" })`
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  animation: ${scaleout} 1s both ease-out;
+  animation-iteration-count: ${(p) => p.once ? 1 : "infinite"};
+
+  &[data-reset-animation] {
+    animation: none;
+  }
+`;
+var LoadingSpinnerIcon = React13.forwardRef(function LoadingSpinnerIcon2({ once = false }, ref) {
+  const iconRef = useRef4(null);
+  useImperativeHandle(ref, () => ({
+    restart: () => {
+      if (!iconRef.current) {
+        return;
+      }
+      iconRef.current.dataset.resetAnimation = "true";
+      void iconRef.current.offsetWidth;
+      delete iconRef.current.dataset.resetAnimation;
+    }
+  }));
+  return /* @__PURE__ */ React13.createElement(Icon2, { ref: iconRef, once });
+});
+
+// src/components/DropdownSelector/index.tsx
+import React16, { useMemo as useMemo4, useRef as useRef7 } from "react";
+import styled14 from "styled-components";
+import { Item, useSelectState } from "react-stately";
+import { disabledSelector as disabledSelector4 } from "@charcoal-ui/utils";
+import { useVisuallyHidden as useVisuallyHidden2 } from "@react-aria/visually-hidden";
+import { useSelect, HiddenSelect } from "@react-aria/select";
+import { useButton } from "@react-aria/button";
+
+// src/components/DropdownSelector/Listbox.tsx
+import React14, { memo, useRef as useRef5, Fragment, useMemo as useMemo2 } from "react";
+import styled13, { css as css5 } from "styled-components";
+
+// ../../node_modules/@react-aria/utils/dist/module.js
+import $12uGp$react, { useState as $12uGp$useState, useRef as $12uGp$useRef, useCallback as $12uGp$useCallback, useEffect as $12uGp$useEffect } from "react";
+import { useSSRSafeId as $12uGp$useSSRSafeId } from "@react-aria/ssr";
+
+// ../../node_modules/clsx/dist/clsx.m.js
+function toVal(mix) {
+  var k, y, str = "";
+  if (typeof mix === "string" || typeof mix === "number") {
+    str += mix;
+  } else if (typeof mix === "object") {
+    if (Array.isArray(mix)) {
+      for (k = 0; k < mix.length; k++) {
+        if (mix[k]) {
+          if (y = toVal(mix[k])) {
+            str && (str += " ");
+            str += y;
+          }
+        }
+      }
+    } else {
+      for (k in mix) {
+        if (mix[k]) {
+          str && (str += " ");
+          str += k;
+        }
+      }
+    }
+  }
+  return str;
+}
+function clsx_m_default() {
+  var i = 0, tmp, x, str = "";
+  while (i < arguments.length) {
+    if (tmp = arguments[i++]) {
+      if (x = toVal(tmp)) {
+        str && (str += " ");
+        str += x;
+      }
+    }
+  }
+  return str;
+}
+
+// ../../node_modules/@react-aria/utils/dist/module.js
+var $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c = typeof window !== "undefined" ? $12uGp$react.useLayoutEffect : () => {
+};
+var $bdb11010cef70236$var$idsUpdaterMap = /* @__PURE__ */ new Map();
+function $bdb11010cef70236$export$f680877a34711e37(defaultId) {
+  let [value, setValue] = $12uGp$useState(defaultId);
+  let nextId = $12uGp$useRef(null);
+  let res = $12uGp$useSSRSafeId(value);
+  let updateValue = $12uGp$useCallback((val) => {
+    nextId.current = val;
+  }, []);
+  $bdb11010cef70236$var$idsUpdaterMap.set(res, updateValue);
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    let r = res;
+    return () => {
+      $bdb11010cef70236$var$idsUpdaterMap.delete(r);
+    };
+  }, [
+    res
+  ]);
+  $12uGp$useEffect(() => {
+    let newId = nextId.current;
+    if (newId) {
+      nextId.current = null;
+      setValue(newId);
+    }
+  });
+  return res;
+}
+function $bdb11010cef70236$export$cd8c9cb68f842629(idA, idB) {
+  if (idA === idB)
+    return idA;
+  let setIdA = $bdb11010cef70236$var$idsUpdaterMap.get(idA);
+  if (setIdA) {
+    setIdA(idB);
+    return idB;
+  }
+  let setIdB = $bdb11010cef70236$var$idsUpdaterMap.get(idB);
+  if (setIdB) {
+    setIdB(idA);
+    return idA;
+  }
+  return idB;
+}
+function $bdb11010cef70236$export$b4cc09c592e8fdb8(depArray = []) {
+  let id = $bdb11010cef70236$export$f680877a34711e37();
+  let [resolvedId, setResolvedId] = $1dbecbe27a04f9af$export$14d238f342723f25(id);
+  let updateId = $12uGp$useCallback(() => {
+    setResolvedId(function* () {
+      yield id;
+      yield document.getElementById(id) ? id : void 0;
+    });
+  }, [
+    id,
+    setResolvedId
+  ]);
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(updateId, [
+    id,
+    updateId,
+    ...depArray
+  ]);
+  return resolvedId;
+}
+function $ff5963eb1fccf552$export$e08e3b67e392101e(...callbacks) {
+  return (...args) => {
+    for (let callback of callbacks)
+      if (typeof callback === "function")
+        callback(...args);
+  };
+}
+function $3ef42575df84b30b$export$9d1611c77c2fe928(...args) {
+  let result = {
+    ...args[0]
+  };
+  for (let i = 1; i < args.length; i++) {
+    let props = args[i];
+    for (let key in props) {
+      let a = result[key];
+      let b = props[key];
+      if (typeof a === "function" && typeof b === "function" && key[0] === "o" && key[1] === "n" && key.charCodeAt(2) >= 65 && key.charCodeAt(2) <= 90)
+        result[key] = $ff5963eb1fccf552$export$e08e3b67e392101e(a, b);
+      else if ((key === "className" || key === "UNSAFE_className") && typeof a === "string" && typeof b === "string")
+        result[key] = clsx_m_default(a, b);
+      else if (key === "id" && a && b)
+        result.id = $bdb11010cef70236$export$cd8c9cb68f842629(a, b);
+      else
+        result[key] = b !== void 0 ? b : a;
+    }
+  }
+  return result;
+}
+var $65484d02dcb7eb3e$var$DOMPropNames = /* @__PURE__ */ new Set([
+  "id"
+]);
+var $65484d02dcb7eb3e$var$labelablePropNames = /* @__PURE__ */ new Set([
+  "aria-label",
+  "aria-labelledby",
+  "aria-describedby",
+  "aria-details"
+]);
+var $65484d02dcb7eb3e$var$propRe = /^(data-.*)$/;
+function $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, opts = {}) {
+  let { labelable, propNames } = opts;
+  let filteredProps = {};
+  for (const prop in props)
+    if (Object.prototype.hasOwnProperty.call(props, prop) && ($65484d02dcb7eb3e$var$DOMPropNames.has(prop) || labelable && $65484d02dcb7eb3e$var$labelablePropNames.has(prop) || (propNames === null || propNames === void 0 ? void 0 : propNames.has(prop)) || $65484d02dcb7eb3e$var$propRe.test(prop)))
+      filteredProps[prop] = props[prop];
+  return filteredProps;
+}
+function $7215afc6de606d6b$export$de79e2c695e052f3(element) {
+  if ($7215afc6de606d6b$var$supportsPreventScroll())
+    element.focus({
+      preventScroll: true
+    });
+  else {
+    let scrollableElements = $7215afc6de606d6b$var$getScrollableElements(element);
+    element.focus();
+    $7215afc6de606d6b$var$restoreScrollPosition(scrollableElements);
+  }
+}
+var $7215afc6de606d6b$var$supportsPreventScrollCached = null;
+function $7215afc6de606d6b$var$supportsPreventScroll() {
+  if ($7215afc6de606d6b$var$supportsPreventScrollCached == null) {
+    $7215afc6de606d6b$var$supportsPreventScrollCached = false;
+    try {
+      var focusElem = document.createElement("div");
+      focusElem.focus({
+        get preventScroll() {
+          $7215afc6de606d6b$var$supportsPreventScrollCached = true;
+          return true;
+        }
+      });
+    } catch (e) {
+    }
+  }
+  return $7215afc6de606d6b$var$supportsPreventScrollCached;
+}
+function $7215afc6de606d6b$var$getScrollableElements(element) {
+  var parent = element.parentNode;
+  var scrollableElements = [];
+  var rootScrollingElement = document.scrollingElement || document.documentElement;
+  while (parent instanceof HTMLElement && parent !== rootScrollingElement) {
+    if (parent.offsetHeight < parent.scrollHeight || parent.offsetWidth < parent.scrollWidth)
+      scrollableElements.push({
+        element: parent,
+        scrollTop: parent.scrollTop,
+        scrollLeft: parent.scrollLeft
+      });
+    parent = parent.parentNode;
+  }
+  if (rootScrollingElement instanceof HTMLElement)
+    scrollableElements.push({
+      element: rootScrollingElement,
+      scrollTop: rootScrollingElement.scrollTop,
+      scrollLeft: rootScrollingElement.scrollLeft
+    });
+  return scrollableElements;
+}
+function $7215afc6de606d6b$var$restoreScrollPosition(scrollableElements) {
+  for (let { element, scrollTop, scrollLeft } of scrollableElements) {
+    element.scrollTop = scrollTop;
+    element.scrollLeft = scrollLeft;
+  }
+}
+var $bbed8b41f857bcc0$var$transitionsByElement = /* @__PURE__ */ new Map();
+var $bbed8b41f857bcc0$var$transitionCallbacks = /* @__PURE__ */ new Set();
+function $bbed8b41f857bcc0$var$setupGlobalEvents() {
+  if (typeof window === "undefined")
+    return;
+  let onTransitionStart = (e) => {
+    let transitions = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
+    if (!transitions) {
+      transitions = /* @__PURE__ */ new Set();
+      $bbed8b41f857bcc0$var$transitionsByElement.set(e.target, transitions);
+      e.target.addEventListener("transitioncancel", onTransitionEnd);
+    }
+    transitions.add(e.propertyName);
+  };
+  let onTransitionEnd = (e) => {
+    let properties = $bbed8b41f857bcc0$var$transitionsByElement.get(e.target);
+    if (!properties)
+      return;
+    properties.delete(e.propertyName);
+    if (properties.size === 0) {
+      e.target.removeEventListener("transitioncancel", onTransitionEnd);
+      $bbed8b41f857bcc0$var$transitionsByElement.delete(e.target);
+    }
+    if ($bbed8b41f857bcc0$var$transitionsByElement.size === 0) {
+      for (let cb of $bbed8b41f857bcc0$var$transitionCallbacks)
+        cb();
+      $bbed8b41f857bcc0$var$transitionCallbacks.clear();
+    }
+  };
+  document.body.addEventListener("transitionrun", onTransitionStart);
+  document.body.addEventListener("transitionend", onTransitionEnd);
+}
+if (typeof document !== "undefined") {
+  if (document.readyState !== "loading")
+    $bbed8b41f857bcc0$var$setupGlobalEvents();
+  else
+    document.addEventListener("DOMContentLoaded", $bbed8b41f857bcc0$var$setupGlobalEvents);
+}
+function $bbed8b41f857bcc0$export$24490316f764c430(fn) {
+  requestAnimationFrame(() => {
+    if ($bbed8b41f857bcc0$var$transitionsByElement.size === 0)
+      fn();
+    else
+      $bbed8b41f857bcc0$var$transitionCallbacks.add(fn);
+  });
+}
+function $03deb23ff14920c4$export$4eaf04e54aa8eed6() {
+  let globalListeners = $12uGp$useRef(/* @__PURE__ */ new Map());
+  let addGlobalListener = $12uGp$useCallback((eventTarget, type, listener, options) => {
+    let fn = (options === null || options === void 0 ? void 0 : options.once) ? (...args) => {
+      globalListeners.current.delete(listener);
+      listener(...args);
+    } : listener;
+    globalListeners.current.set(listener, {
+      type,
+      eventTarget,
+      fn,
+      options
+    });
+    eventTarget.addEventListener(type, listener, options);
+  }, []);
+  let removeGlobalListener = $12uGp$useCallback((eventTarget, type, listener, options) => {
+    var ref;
+    let fn = ((ref = globalListeners.current.get(listener)) === null || ref === void 0 ? void 0 : ref.fn) || listener;
+    eventTarget.removeEventListener(type, fn, options);
+    globalListeners.current.delete(listener);
+  }, []);
+  let removeAllGlobalListeners = $12uGp$useCallback(() => {
+    globalListeners.current.forEach((value, key) => {
+      removeGlobalListener(value.eventTarget, value.type, key, value.options);
+    });
+  }, [
+    removeGlobalListener
+  ]);
+  $12uGp$useEffect(() => {
+    return removeAllGlobalListeners;
+  }, [
+    removeAllGlobalListeners
+  ]);
+  return {
+    addGlobalListener,
+    removeGlobalListener,
+    removeAllGlobalListeners
+  };
+}
+function $313b98861ee5dd6c$export$d6875122194c7b44(props, defaultLabel) {
+  let { id, "aria-label": label, "aria-labelledby": labelledBy } = props;
+  id = $bdb11010cef70236$export$f680877a34711e37(id);
+  if (labelledBy && label) {
+    let ids = /* @__PURE__ */ new Set([
+      ...labelledBy.trim().split(/\s+/),
+      id
+    ]);
+    labelledBy = [
+      ...ids
+    ].join(" ");
+  } else if (labelledBy)
+    labelledBy = labelledBy.trim().split(/\s+/).join(" ");
+  if (!label && !labelledBy && defaultLabel)
+    label = defaultLabel;
+  return {
+    id,
+    "aria-label": label,
+    "aria-labelledby": labelledBy
+  };
+}
+function $df56164dff5785e2$export$4338b53315abf666(forwardedRef) {
+  const objRef = $12uGp$useRef();
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    if (!forwardedRef)
+      return;
+    if (typeof forwardedRef === "function")
+      forwardedRef(objRef.current);
+    else
+      forwardedRef.current = objRef.current;
+  }, [
+    forwardedRef
+  ]);
+  return objRef;
+}
+function $e7801be82b4b2a53$export$4debdb1a3f0fa79e(context, ref) {
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    if (context && context.ref && ref) {
+      context.ref.current = ref.current;
+      return () => {
+        context.ref.current = null;
+      };
+    }
+  }, [
+    context,
+    ref
+  ]);
+}
+var $5df64b3807dc15ee$var$visualViewport = typeof window !== "undefined" && window.visualViewport;
+var $ef06256079686ba0$var$descriptionId = 0;
+var $ef06256079686ba0$var$descriptionNodes = /* @__PURE__ */ new Map();
+function $ef06256079686ba0$export$f8aeda7b10753fa1(description) {
+  let [id1, setId] = $12uGp$useState(void 0);
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    if (!description)
+      return;
+    let desc = $ef06256079686ba0$var$descriptionNodes.get(description);
+    if (!desc) {
+      let id = `react-aria-description-${$ef06256079686ba0$var$descriptionId++}`;
+      setId(id);
+      let node = document.createElement("div");
+      node.id = id;
+      node.style.display = "none";
+      node.textContent = description;
+      document.body.appendChild(node);
+      desc = {
+        refCount: 0,
+        element: node
+      };
+      $ef06256079686ba0$var$descriptionNodes.set(description, desc);
+    } else
+      setId(desc.element.id);
+    desc.refCount++;
+    return () => {
+      if (--desc.refCount === 0) {
+        desc.element.remove();
+        $ef06256079686ba0$var$descriptionNodes.delete(description);
+      }
+    };
+  }, [
+    description
+  ]);
+  return {
+    "aria-describedby": description ? id1 : void 0
+  };
+}
+function $c87311424ea30a05$var$testUserAgent(re) {
+  var ref;
+  if (typeof window === "undefined" || window.navigator == null)
+    return false;
+  return ((ref = window.navigator["userAgentData"]) === null || ref === void 0 ? void 0 : ref.brands.some(
+    (brand) => re.test(brand.brand)
+  )) || re.test(window.navigator.userAgent);
+}
+function $c87311424ea30a05$var$testPlatform(re) {
+  var ref;
+  return typeof window !== "undefined" && window.navigator != null ? re.test(((ref = window.navigator["userAgentData"]) === null || ref === void 0 ? void 0 : ref.platform) || window.navigator.platform) : false;
+}
+function $c87311424ea30a05$export$9ac100e40613ea10() {
+  return $c87311424ea30a05$var$testPlatform(/^Mac/i);
+}
+function $c87311424ea30a05$export$186c6964ca17d99() {
+  return $c87311424ea30a05$var$testPlatform(/^iPhone/i);
+}
+function $c87311424ea30a05$export$7bef049ce92e4224() {
+  return $c87311424ea30a05$var$testPlatform(/^iPad/i) || $c87311424ea30a05$export$9ac100e40613ea10() && navigator.maxTouchPoints > 1;
+}
+function $c87311424ea30a05$export$fedb369cb70207f1() {
+  return $c87311424ea30a05$export$186c6964ca17d99() || $c87311424ea30a05$export$7bef049ce92e4224();
+}
+function $c87311424ea30a05$export$e1865c3bedcd822b() {
+  return $c87311424ea30a05$export$9ac100e40613ea10() || $c87311424ea30a05$export$fedb369cb70207f1();
+}
+function $c87311424ea30a05$export$78551043582a6a98() {
+  return $c87311424ea30a05$var$testUserAgent(/AppleWebKit/i) && !$c87311424ea30a05$export$6446a186d09e379e();
+}
+function $c87311424ea30a05$export$6446a186d09e379e() {
+  return $c87311424ea30a05$var$testUserAgent(/Chrome/i);
+}
+function $c87311424ea30a05$export$a11b0059900ceec8() {
+  return $c87311424ea30a05$var$testUserAgent(/Android/i);
+}
+function $e9faafb641e167db$export$90fc3a17d93f704c(ref, event, handler1, options) {
+  let handlerRef = $12uGp$useRef(handler1);
+  handlerRef.current = handler1;
+  let isDisabled = handler1 == null;
+  $12uGp$useEffect(() => {
+    if (isDisabled)
+      return;
+    let element = ref.current;
+    let handler = (e) => handlerRef.current.call(this, e);
+    element.addEventListener(event, handler, options);
+    return () => {
+      element.removeEventListener(event, handler, options);
+    };
+  }, [
+    ref,
+    event,
+    options,
+    isDisabled
+  ]);
+}
+function $1dbecbe27a04f9af$export$14d238f342723f25(defaultValue) {
+  let [value, setValue] = $12uGp$useState(defaultValue);
+  let valueRef = $12uGp$useRef(value);
+  let effect = $12uGp$useRef(null);
+  valueRef.current = value;
+  let nextRef = $12uGp$useRef(null);
+  nextRef.current = () => {
+    let newValue = effect.current.next();
+    if (newValue.done) {
+      effect.current = null;
+      return;
+    }
+    if (value === newValue.value)
+      nextRef.current();
+    else
+      setValue(newValue.value);
+  };
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    if (effect.current)
+      nextRef.current();
+  });
+  let queue = $12uGp$useCallback((fn) => {
+    effect.current = fn(valueRef.current);
+    nextRef.current();
+  }, [
+    effect,
+    nextRef
+  ]);
+  return [
+    value,
+    queue
+  ];
+}
+function $2f04cbc44ee30ce0$export$53a0910f038337bd(scrollView, element) {
+  let offsetX = $2f04cbc44ee30ce0$var$relativeOffset(scrollView, element, "left");
+  let offsetY = $2f04cbc44ee30ce0$var$relativeOffset(scrollView, element, "top");
+  let width = element.offsetWidth;
+  let height = element.offsetHeight;
+  let x = scrollView.scrollLeft;
+  let y = scrollView.scrollTop;
+  let maxX = x + scrollView.offsetWidth;
+  let maxY = y + scrollView.offsetHeight;
+  if (offsetX <= x)
+    x = offsetX;
+  else if (offsetX + width > maxX)
+    x += offsetX + width - maxX;
+  if (offsetY <= y)
+    y = offsetY;
+  else if (offsetY + height > maxY)
+    y += offsetY + height - maxY;
+  scrollView.scrollLeft = x;
+  scrollView.scrollTop = y;
+}
+function $2f04cbc44ee30ce0$var$relativeOffset(ancestor, child, axis) {
+  const prop = axis === "left" ? "offsetLeft" : "offsetTop";
+  let sum = 0;
+  while (child.offsetParent) {
+    sum += child[prop];
+    if (child.offsetParent === ancestor)
+      break;
+    else if (child.offsetParent.contains(ancestor)) {
+      sum -= ancestor[prop];
+      break;
+    }
+    child = child.offsetParent;
+  }
+  return sum;
+}
+function $6a7db85432448f7f$export$60278871457622de(event) {
+  if (event.mozInputSource === 0 && event.isTrusted)
+    return true;
+  if ($c87311424ea30a05$export$a11b0059900ceec8() && event.pointerType)
+    return event.type === "click" && event.buttons === 1;
+  return event.detail === 0 && !event.pointerType;
+}
+function $6a7db85432448f7f$export$29bf1b5f2c56cf63(event) {
+  return event.width === 0 && event.height === 0 || event.width === 1 && event.height === 1 && event.pressure === 0 && event.detail === 0 && event.pointerType === "mouse";
+}
+
+// ../../node_modules/@react-aria/interactions/dist/module.js
+import $bx7SL$react, { useRef as $bx7SL$useRef, useContext as $bx7SL$useContext, useState as $bx7SL$useState, useMemo as $bx7SL$useMemo, useEffect as $bx7SL$useEffect, useCallback as $bx7SL$useCallback } from "react";
+var $14c0b72509d70225$var$state = "default";
+var $14c0b72509d70225$var$savedUserSelect = "";
+var $14c0b72509d70225$var$modifiedElementMap = /* @__PURE__ */ new WeakMap();
+function $14c0b72509d70225$export$16a4697467175487(target) {
+  if ($c87311424ea30a05$export$fedb369cb70207f1()) {
+    if ($14c0b72509d70225$var$state === "default") {
+      $14c0b72509d70225$var$savedUserSelect = document.documentElement.style.webkitUserSelect;
+      document.documentElement.style.webkitUserSelect = "none";
+    }
+    $14c0b72509d70225$var$state = "disabled";
+  } else if (target instanceof HTMLElement || target instanceof SVGElement) {
+    $14c0b72509d70225$var$modifiedElementMap.set(target, target.style.userSelect);
+    target.style.userSelect = "none";
+  }
+}
+function $14c0b72509d70225$export$b0d6fa1ab32e3295(target) {
+  if ($c87311424ea30a05$export$fedb369cb70207f1()) {
+    if ($14c0b72509d70225$var$state !== "disabled")
+      return;
+    $14c0b72509d70225$var$state = "restoring";
+    setTimeout(() => {
+      $bbed8b41f857bcc0$export$24490316f764c430(() => {
+        if ($14c0b72509d70225$var$state === "restoring") {
+          if (document.documentElement.style.webkitUserSelect === "none")
+            document.documentElement.style.webkitUserSelect = $14c0b72509d70225$var$savedUserSelect || "";
+          $14c0b72509d70225$var$savedUserSelect = "";
+          $14c0b72509d70225$var$state = "default";
+        }
+      });
+    }, 300);
+  } else if (target instanceof HTMLElement || target instanceof SVGElement) {
+    if (target && $14c0b72509d70225$var$modifiedElementMap.has(target)) {
+      let targetOldUserSelect = $14c0b72509d70225$var$modifiedElementMap.get(target);
+      if (target.style.userSelect === "none")
+        target.style.userSelect = targetOldUserSelect;
+      if (target.getAttribute("style") === "")
+        target.removeAttribute("style");
+      $14c0b72509d70225$var$modifiedElementMap.delete(target);
+    }
+  }
+}
+var $ae1eeba8b9eafd08$export$5165eccb35aaadb5 = $bx7SL$react.createContext(null);
+$ae1eeba8b9eafd08$export$5165eccb35aaadb5.displayName = "PressResponderContext";
+function $f6c31cce2adf654f$var$usePressResponderContext(props) {
+  let context = $bx7SL$useContext($ae1eeba8b9eafd08$export$5165eccb35aaadb5);
+  if (context) {
+    let { register, ...contextProps } = context;
+    props = $3ef42575df84b30b$export$9d1611c77c2fe928(contextProps, props);
+    register();
+  }
+  $e7801be82b4b2a53$export$4debdb1a3f0fa79e(context, props.ref);
+  return props;
+}
+function $f6c31cce2adf654f$export$45712eceda6fad21(props) {
+  let {
+    onPress: onPress1,
+    onPressChange: onPressChange1,
+    onPressStart: onPressStart1,
+    onPressEnd: onPressEnd1,
+    onPressUp: onPressUp1,
+    isDisabled: isDisabled1,
+    isPressed: isPressedProp,
+    preventFocusOnPress,
+    shouldCancelOnPointerExit,
+    allowTextSelectionOnPress,
+    ref: _,
+    ...domProps
+  } = $f6c31cce2adf654f$var$usePressResponderContext(props);
+  let propsRef = $bx7SL$useRef(null);
+  propsRef.current = {
+    onPress: onPress1,
+    onPressChange: onPressChange1,
+    onPressStart: onPressStart1,
+    onPressEnd: onPressEnd1,
+    onPressUp: onPressUp1,
+    isDisabled: isDisabled1,
+    shouldCancelOnPointerExit
+  };
+  let [isPressed, setPressed] = $bx7SL$useState(false);
+  let ref = $bx7SL$useRef({
+    isPressed: false,
+    ignoreEmulatedMouseEvents: false,
+    ignoreClickAfterPress: false,
+    didFirePressStart: false,
+    activePointerId: null,
+    target: null,
+    isOverTarget: false,
+    pointerType: null
+  });
+  let { addGlobalListener, removeAllGlobalListeners } = $03deb23ff14920c4$export$4eaf04e54aa8eed6();
+  let pressProps1 = $bx7SL$useMemo(() => {
+    let state = ref.current;
+    let triggerPressStart = (originalEvent, pointerType) => {
+      let { onPressStart, onPressChange, isDisabled } = propsRef.current;
+      if (isDisabled || state.didFirePressStart)
+        return;
+      if (onPressStart)
+        onPressStart({
+          type: "pressstart",
+          pointerType,
+          target: originalEvent.currentTarget,
+          shiftKey: originalEvent.shiftKey,
+          metaKey: originalEvent.metaKey,
+          ctrlKey: originalEvent.ctrlKey,
+          altKey: originalEvent.altKey
+        });
+      if (onPressChange)
+        onPressChange(true);
+      state.didFirePressStart = true;
+      setPressed(true);
+    };
+    let triggerPressEnd = (originalEvent, pointerType, wasPressed = true) => {
+      let { onPressEnd, onPressChange, onPress, isDisabled } = propsRef.current;
+      if (!state.didFirePressStart)
+        return;
+      state.ignoreClickAfterPress = true;
+      state.didFirePressStart = false;
+      if (onPressEnd)
+        onPressEnd({
+          type: "pressend",
+          pointerType,
+          target: originalEvent.currentTarget,
+          shiftKey: originalEvent.shiftKey,
+          metaKey: originalEvent.metaKey,
+          ctrlKey: originalEvent.ctrlKey,
+          altKey: originalEvent.altKey
+        });
+      if (onPressChange)
+        onPressChange(false);
+      setPressed(false);
+      if (onPress && wasPressed && !isDisabled)
+        onPress({
+          type: "press",
+          pointerType,
+          target: originalEvent.currentTarget,
+          shiftKey: originalEvent.shiftKey,
+          metaKey: originalEvent.metaKey,
+          ctrlKey: originalEvent.ctrlKey,
+          altKey: originalEvent.altKey
+        });
+    };
+    let triggerPressUp = (originalEvent, pointerType) => {
+      let { onPressUp, isDisabled } = propsRef.current;
+      if (isDisabled)
+        return;
+      if (onPressUp)
+        onPressUp({
+          type: "pressup",
+          pointerType,
+          target: originalEvent.currentTarget,
+          shiftKey: originalEvent.shiftKey,
+          metaKey: originalEvent.metaKey,
+          ctrlKey: originalEvent.ctrlKey,
+          altKey: originalEvent.altKey
+        });
+    };
+    let cancel = (e) => {
+      if (state.isPressed) {
+        if (state.isOverTarget)
+          triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType, false);
+        state.isPressed = false;
+        state.isOverTarget = false;
+        state.activePointerId = null;
+        state.pointerType = null;
+        removeAllGlobalListeners();
+        if (!allowTextSelectionOnPress)
+          $14c0b72509d70225$export$b0d6fa1ab32e3295(state.target);
+      }
+    };
+    let pressProps = {
+      onKeyDown(e) {
+        if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && e.currentTarget.contains(e.target)) {
+          if ($f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(e.target, e.key))
+            e.preventDefault();
+          e.stopPropagation();
+          if (!state.isPressed && !e.repeat) {
+            state.target = e.currentTarget;
+            state.isPressed = true;
+            triggerPressStart(e, "keyboard");
+            addGlobalListener(document, "keyup", onKeyUp, false);
+          }
+        } else if (e.key === "Enter" && $f6c31cce2adf654f$var$isHTMLAnchorLink(e.currentTarget))
+          e.stopPropagation();
+      },
+      onKeyUp(e) {
+        if ($f6c31cce2adf654f$var$isValidKeyboardEvent(e.nativeEvent, e.currentTarget) && !e.repeat && e.currentTarget.contains(e.target))
+          triggerPressUp($f6c31cce2adf654f$var$createEvent(state.target, e), "keyboard");
+      },
+      onClick(e) {
+        if (e && !e.currentTarget.contains(e.target))
+          return;
+        if (e && e.button === 0) {
+          e.stopPropagation();
+          if (isDisabled1)
+            e.preventDefault();
+          if (!state.ignoreClickAfterPress && !state.ignoreEmulatedMouseEvents && (state.pointerType === "virtual" || $6a7db85432448f7f$export$60278871457622de(e.nativeEvent))) {
+            if (!isDisabled1 && !preventFocusOnPress)
+              $7215afc6de606d6b$export$de79e2c695e052f3(e.currentTarget);
+            triggerPressStart(e, "virtual");
+            triggerPressUp(e, "virtual");
+            triggerPressEnd(e, "virtual");
+          }
+          state.ignoreEmulatedMouseEvents = false;
+          state.ignoreClickAfterPress = false;
+        }
+      }
+    };
+    let onKeyUp = (e) => {
+      if (state.isPressed && $f6c31cce2adf654f$var$isValidKeyboardEvent(e, state.target)) {
+        if ($f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(e.target, e.key))
+          e.preventDefault();
+        e.stopPropagation();
+        state.isPressed = false;
+        let target = e.target;
+        triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), "keyboard", state.target.contains(target));
+        removeAllGlobalListeners();
+        if (state.target instanceof HTMLElement && state.target.contains(target) && ($f6c31cce2adf654f$var$isHTMLAnchorLink(state.target) || state.target.getAttribute("role") === "link"))
+          state.target.click();
+      }
+    };
+    if (typeof PointerEvent !== "undefined") {
+      pressProps.onPointerDown = (e) => {
+        if (e.button !== 0 || !e.currentTarget.contains(e.target))
+          return;
+        if ($6a7db85432448f7f$export$29bf1b5f2c56cf63(e.nativeEvent)) {
+          state.pointerType = "virtual";
+          return;
+        }
+        if ($f6c31cce2adf654f$var$shouldPreventDefault(e.currentTarget))
+          e.preventDefault();
+        state.pointerType = e.pointerType;
+        e.stopPropagation();
+        if (!state.isPressed) {
+          state.isPressed = true;
+          state.isOverTarget = true;
+          state.activePointerId = e.pointerId;
+          state.target = e.currentTarget;
+          if (!isDisabled1 && !preventFocusOnPress)
+            $7215afc6de606d6b$export$de79e2c695e052f3(e.currentTarget);
+          if (!allowTextSelectionOnPress)
+            $14c0b72509d70225$export$16a4697467175487(state.target);
+          triggerPressStart(e, state.pointerType);
+          addGlobalListener(document, "pointermove", onPointerMove, false);
+          addGlobalListener(document, "pointerup", onPointerUp, false);
+          addGlobalListener(document, "pointercancel", onPointerCancel, false);
+        }
+      };
+      pressProps.onMouseDown = (e) => {
+        if (!e.currentTarget.contains(e.target))
+          return;
+        if (e.button === 0) {
+          if ($f6c31cce2adf654f$var$shouldPreventDefault(e.currentTarget))
+            e.preventDefault();
+          e.stopPropagation();
+        }
+      };
+      pressProps.onPointerUp = (e) => {
+        if (!e.currentTarget.contains(e.target) || state.pointerType === "virtual")
+          return;
+        if (e.button === 0 && $f6c31cce2adf654f$var$isOverTarget(e, e.currentTarget))
+          triggerPressUp(e, state.pointerType || e.pointerType);
+      };
+      let onPointerMove = (e) => {
+        if (e.pointerId !== state.activePointerId)
+          return;
+        if ($f6c31cce2adf654f$var$isOverTarget(e, state.target)) {
+          if (!state.isOverTarget) {
+            state.isOverTarget = true;
+            triggerPressStart($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType);
+          }
+        } else if (state.isOverTarget) {
+          state.isOverTarget = false;
+          triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType, false);
+          if (propsRef.current.shouldCancelOnPointerExit)
+            cancel(e);
+        }
+      };
+      let onPointerUp = (e) => {
+        if (e.pointerId === state.activePointerId && state.isPressed && e.button === 0) {
+          if ($f6c31cce2adf654f$var$isOverTarget(e, state.target))
+            triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType);
+          else if (state.isOverTarget)
+            triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType, false);
+          state.isPressed = false;
+          state.isOverTarget = false;
+          state.activePointerId = null;
+          state.pointerType = null;
+          removeAllGlobalListeners();
+          if (!allowTextSelectionOnPress)
+            $14c0b72509d70225$export$b0d6fa1ab32e3295(state.target);
+        }
+      };
+      let onPointerCancel = (e) => {
+        cancel(e);
+      };
+      pressProps.onDragStart = (e) => {
+        if (!e.currentTarget.contains(e.target))
+          return;
+        cancel(e);
+      };
+    } else {
+      pressProps.onMouseDown = (e) => {
+        if (e.button !== 0 || !e.currentTarget.contains(e.target))
+          return;
+        if ($f6c31cce2adf654f$var$shouldPreventDefault(e.currentTarget))
+          e.preventDefault();
+        e.stopPropagation();
+        if (state.ignoreEmulatedMouseEvents)
+          return;
+        state.isPressed = true;
+        state.isOverTarget = true;
+        state.target = e.currentTarget;
+        state.pointerType = $6a7db85432448f7f$export$60278871457622de(e.nativeEvent) ? "virtual" : "mouse";
+        if (!isDisabled1 && !preventFocusOnPress)
+          $7215afc6de606d6b$export$de79e2c695e052f3(e.currentTarget);
+        triggerPressStart(e, state.pointerType);
+        addGlobalListener(document, "mouseup", onMouseUp, false);
+      };
+      pressProps.onMouseEnter = (e) => {
+        if (!e.currentTarget.contains(e.target))
+          return;
+        e.stopPropagation();
+        if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
+          state.isOverTarget = true;
+          triggerPressStart(e, state.pointerType);
+        }
+      };
+      pressProps.onMouseLeave = (e) => {
+        if (!e.currentTarget.contains(e.target))
+          return;
+        e.stopPropagation();
+        if (state.isPressed && !state.ignoreEmulatedMouseEvents) {
+          state.isOverTarget = false;
+          triggerPressEnd(e, state.pointerType, false);
+          if (propsRef.current.shouldCancelOnPointerExit)
+            cancel(e);
+        }
+      };
+      pressProps.onMouseUp = (e) => {
+        if (!e.currentTarget.contains(e.target))
+          return;
+        if (!state.ignoreEmulatedMouseEvents && e.button === 0)
+          triggerPressUp(e, state.pointerType);
+      };
+      let onMouseUp = (e) => {
+        if (e.button !== 0)
+          return;
+        state.isPressed = false;
+        removeAllGlobalListeners();
+        if (state.ignoreEmulatedMouseEvents) {
+          state.ignoreEmulatedMouseEvents = false;
+          return;
+        }
+        if ($f6c31cce2adf654f$var$isOverTarget(e, state.target))
+          triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType);
+        else if (state.isOverTarget)
+          triggerPressEnd($f6c31cce2adf654f$var$createEvent(state.target, e), state.pointerType, false);
+        state.isOverTarget = false;
+      };
+      pressProps.onTouchStart = (e) => {
+        if (!e.currentTarget.contains(e.target))
+          return;
+        e.stopPropagation();
+        let touch = $f6c31cce2adf654f$var$getTouchFromEvent(e.nativeEvent);
+        if (!touch)
+          return;
+        state.activePointerId = touch.identifier;
+        state.ignoreEmulatedMouseEvents = true;
+        state.isOverTarget = true;
+        state.isPressed = true;
+        state.target = e.currentTarget;
+        state.pointerType = "touch";
+        if (!isDisabled1 && !preventFocusOnPress)
+          $7215afc6de606d6b$export$de79e2c695e052f3(e.currentTarget);
+        if (!allowTextSelectionOnPress)
+          $14c0b72509d70225$export$16a4697467175487(state.target);
+        triggerPressStart(e, state.pointerType);
+        addGlobalListener(window, "scroll", onScroll, true);
+      };
+      pressProps.onTouchMove = (e) => {
+        if (!e.currentTarget.contains(e.target))
+          return;
+        e.stopPropagation();
+        if (!state.isPressed)
+          return;
+        let touch = $f6c31cce2adf654f$var$getTouchById(e.nativeEvent, state.activePointerId);
+        if (touch && $f6c31cce2adf654f$var$isOverTarget(touch, e.currentTarget)) {
+          if (!state.isOverTarget) {
+            state.isOverTarget = true;
+            triggerPressStart(e, state.pointerType);
+          }
+        } else if (state.isOverTarget) {
+          state.isOverTarget = false;
+          triggerPressEnd(e, state.pointerType, false);
+          if (propsRef.current.shouldCancelOnPointerExit)
+            cancel(e);
+        }
+      };
+      pressProps.onTouchEnd = (e) => {
+        if (!e.currentTarget.contains(e.target))
+          return;
+        e.stopPropagation();
+        if (!state.isPressed)
+          return;
+        let touch = $f6c31cce2adf654f$var$getTouchById(e.nativeEvent, state.activePointerId);
+        if (touch && $f6c31cce2adf654f$var$isOverTarget(touch, e.currentTarget)) {
+          triggerPressUp(e, state.pointerType);
+          triggerPressEnd(e, state.pointerType);
+        } else if (state.isOverTarget)
+          triggerPressEnd(e, state.pointerType, false);
+        state.isPressed = false;
+        state.activePointerId = null;
+        state.isOverTarget = false;
+        state.ignoreEmulatedMouseEvents = true;
+        if (!allowTextSelectionOnPress)
+          $14c0b72509d70225$export$b0d6fa1ab32e3295(state.target);
+        removeAllGlobalListeners();
+      };
+      pressProps.onTouchCancel = (e) => {
+        if (!e.currentTarget.contains(e.target))
+          return;
+        e.stopPropagation();
+        if (state.isPressed)
+          cancel(e);
+      };
+      let onScroll = (e) => {
+        if (state.isPressed && e.target.contains(state.target))
+          cancel({
+            currentTarget: state.target,
+            shiftKey: false,
+            ctrlKey: false,
+            metaKey: false,
+            altKey: false
+          });
+      };
+      pressProps.onDragStart = (e) => {
+        if (!e.currentTarget.contains(e.target))
+          return;
+        cancel(e);
+      };
+    }
+    return pressProps;
+  }, [
+    addGlobalListener,
+    isDisabled1,
+    preventFocusOnPress,
+    removeAllGlobalListeners,
+    allowTextSelectionOnPress
+  ]);
+  $bx7SL$useEffect(() => {
+    return () => {
+      if (!allowTextSelectionOnPress)
+        $14c0b72509d70225$export$b0d6fa1ab32e3295(ref.current.target);
+    };
+  }, [
+    allowTextSelectionOnPress
+  ]);
+  return {
+    isPressed: isPressedProp || isPressed,
+    pressProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, pressProps1)
+  };
+}
+function $f6c31cce2adf654f$var$isHTMLAnchorLink(target) {
+  return target.tagName === "A" && target.hasAttribute("href");
+}
+function $f6c31cce2adf654f$var$isValidKeyboardEvent(event, currentTarget) {
+  const { key, code } = event;
+  const element = currentTarget;
+  const role = element.getAttribute("role");
+  return (key === "Enter" || key === " " || key === "Spacebar" || code === "Space") && !(element instanceof HTMLInputElement && !$f6c31cce2adf654f$var$isValidInputKey(element, key) || element instanceof HTMLTextAreaElement || element.isContentEditable) && (!$f6c31cce2adf654f$var$isHTMLAnchorLink(element) || role === "button" && key !== "Enter") && !(role === "link" && key !== "Enter");
+}
+function $f6c31cce2adf654f$var$getTouchFromEvent(event) {
+  const { targetTouches } = event;
+  if (targetTouches.length > 0)
+    return targetTouches[0];
+  return null;
+}
+function $f6c31cce2adf654f$var$getTouchById(event, pointerId) {
+  const changedTouches = event.changedTouches;
+  for (let i = 0; i < changedTouches.length; i++) {
+    const touch = changedTouches[i];
+    if (touch.identifier === pointerId)
+      return touch;
+  }
+  return null;
+}
+function $f6c31cce2adf654f$var$createEvent(target, e) {
+  return {
+    currentTarget: target,
+    shiftKey: e.shiftKey,
+    ctrlKey: e.ctrlKey,
+    metaKey: e.metaKey,
+    altKey: e.altKey
+  };
+}
+function $f6c31cce2adf654f$var$getPointClientRect(point) {
+  let offsetX = point.width / 2 || point.radiusX || 0;
+  let offsetY = point.height / 2 || point.radiusY || 0;
+  return {
+    top: point.clientY - offsetY,
+    right: point.clientX + offsetX,
+    bottom: point.clientY + offsetY,
+    left: point.clientX - offsetX
+  };
+}
+function $f6c31cce2adf654f$var$areRectanglesOverlapping(a, b) {
+  if (a.left > b.right || b.left > a.right)
+    return false;
+  if (a.top > b.bottom || b.top > a.bottom)
+    return false;
+  return true;
+}
+function $f6c31cce2adf654f$var$isOverTarget(point, target) {
+  let rect = target.getBoundingClientRect();
+  let pointRect = $f6c31cce2adf654f$var$getPointClientRect(point);
+  return $f6c31cce2adf654f$var$areRectanglesOverlapping(rect, pointRect);
+}
+function $f6c31cce2adf654f$var$shouldPreventDefault(target) {
+  return !(target instanceof HTMLElement) || !target.draggable;
+}
+function $f6c31cce2adf654f$var$shouldPreventDefaultKeyboard(target, key) {
+  if (target instanceof HTMLInputElement)
+    return !$f6c31cce2adf654f$var$isValidInputKey(target, key);
+  if (target instanceof HTMLButtonElement)
+    return target.type !== "submit";
+  return true;
+}
+var $f6c31cce2adf654f$var$nonTextInputTypes = /* @__PURE__ */ new Set([
+  "checkbox",
+  "radio",
+  "range",
+  "color",
+  "file",
+  "image",
+  "button",
+  "submit",
+  "reset"
+]);
+function $f6c31cce2adf654f$var$isValidInputKey(target, key) {
+  return target.type === "checkbox" || target.type === "radio" ? key === " " : $f6c31cce2adf654f$var$nonTextInputTypes.has(target.type);
+}
+var $8a9cb279dc87e130$export$905e7fc544a71f36 = class {
+  isDefaultPrevented() {
+    return this.nativeEvent.defaultPrevented;
+  }
+  preventDefault() {
+    this.defaultPrevented = true;
+    this.nativeEvent.preventDefault();
+  }
+  stopPropagation() {
+    this.nativeEvent.stopPropagation();
+    this.isPropagationStopped = () => true;
+  }
+  isPropagationStopped() {
+    return false;
+  }
+  persist() {
+  }
+  constructor(type, nativeEvent) {
+    this.nativeEvent = nativeEvent;
+    this.target = nativeEvent.target;
+    this.currentTarget = nativeEvent.currentTarget;
+    this.relatedTarget = nativeEvent.relatedTarget;
+    this.bubbles = nativeEvent.bubbles;
+    this.cancelable = nativeEvent.cancelable;
+    this.defaultPrevented = nativeEvent.defaultPrevented;
+    this.eventPhase = nativeEvent.eventPhase;
+    this.isTrusted = nativeEvent.isTrusted;
+    this.timeStamp = nativeEvent.timeStamp;
+    this.type = type;
+  }
+};
+function $8a9cb279dc87e130$export$715c682d09d639cc(onBlur) {
+  let stateRef = $bx7SL$useRef({
+    isFocused: false,
+    onBlur,
+    observer: null
+  });
+  stateRef.current.onBlur = onBlur;
+  $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c(() => {
+    const state = stateRef.current;
+    return () => {
+      if (state.observer) {
+        state.observer.disconnect();
+        state.observer = null;
+      }
+    };
+  }, []);
+  return $bx7SL$useCallback((e1) => {
+    if (e1.target instanceof HTMLButtonElement || e1.target instanceof HTMLInputElement || e1.target instanceof HTMLTextAreaElement || e1.target instanceof HTMLSelectElement) {
+      stateRef.current.isFocused = true;
+      let target = e1.target;
+      let onBlurHandler = (e) => {
+        var _current, ref;
+        stateRef.current.isFocused = false;
+        if (target.disabled)
+          (ref = (_current = stateRef.current).onBlur) === null || ref === void 0 ? void 0 : ref.call(_current, new $8a9cb279dc87e130$export$905e7fc544a71f36("blur", e));
+        if (stateRef.current.observer) {
+          stateRef.current.observer.disconnect();
+          stateRef.current.observer = null;
+        }
+      };
+      target.addEventListener("focusout", onBlurHandler, {
+        once: true
+      });
+      stateRef.current.observer = new MutationObserver(() => {
+        if (stateRef.current.isFocused && target.disabled) {
+          stateRef.current.observer.disconnect();
+          target.dispatchEvent(new FocusEvent("blur"));
+          target.dispatchEvent(new FocusEvent("focusout", {
+            bubbles: true
+          }));
+        }
+      });
+      stateRef.current.observer.observe(target, {
+        attributes: true,
+        attributeFilter: [
+          "disabled"
+        ]
+      });
+    }
+  }, []);
+}
+var $507fabe10e71c6fb$var$currentModality = null;
+var $507fabe10e71c6fb$var$changeHandlers = /* @__PURE__ */ new Set();
+var $507fabe10e71c6fb$var$hasSetupGlobalListeners = false;
+var $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
+var $507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
+function $507fabe10e71c6fb$var$triggerChangeHandlers(modality, e) {
+  for (let handler of $507fabe10e71c6fb$var$changeHandlers)
+    handler(modality, e);
+}
+function $507fabe10e71c6fb$var$isValidKey(e) {
+  return !(e.metaKey || !$c87311424ea30a05$export$9ac100e40613ea10() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
+}
+function $507fabe10e71c6fb$var$handleKeyboardEvent(e) {
+  $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
+  if ($507fabe10e71c6fb$var$isValidKey(e)) {
+    $507fabe10e71c6fb$var$currentModality = "keyboard";
+    $507fabe10e71c6fb$var$triggerChangeHandlers("keyboard", e);
+  }
+}
+function $507fabe10e71c6fb$var$handlePointerEvent(e) {
+  $507fabe10e71c6fb$var$currentModality = "pointer";
+  if (e.type === "mousedown" || e.type === "pointerdown") {
+    $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
+    $507fabe10e71c6fb$var$triggerChangeHandlers("pointer", e);
+  }
+}
+function $507fabe10e71c6fb$var$handleClickEvent(e) {
+  if ($6a7db85432448f7f$export$60278871457622de(e)) {
+    $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
+    $507fabe10e71c6fb$var$currentModality = "virtual";
+  }
+}
+function $507fabe10e71c6fb$var$handleFocusEvent(e) {
+  if (e.target === window || e.target === document)
+    return;
+  if (!$507fabe10e71c6fb$var$hasEventBeforeFocus && !$507fabe10e71c6fb$var$hasBlurredWindowRecently) {
+    $507fabe10e71c6fb$var$currentModality = "virtual";
+    $507fabe10e71c6fb$var$triggerChangeHandlers("virtual", e);
+  }
+  $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
+  $507fabe10e71c6fb$var$hasBlurredWindowRecently = false;
+}
+function $507fabe10e71c6fb$var$handleWindowBlur() {
+  $507fabe10e71c6fb$var$hasEventBeforeFocus = false;
+  $507fabe10e71c6fb$var$hasBlurredWindowRecently = true;
+}
+function $507fabe10e71c6fb$var$setupGlobalFocusEvents() {
+  if (typeof window === "undefined" || $507fabe10e71c6fb$var$hasSetupGlobalListeners)
+    return;
+  let focus = HTMLElement.prototype.focus;
+  HTMLElement.prototype.focus = function() {
+    $507fabe10e71c6fb$var$hasEventBeforeFocus = true;
+    focus.apply(this, arguments);
+  };
+  document.addEventListener("keydown", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+  document.addEventListener("keyup", $507fabe10e71c6fb$var$handleKeyboardEvent, true);
+  document.addEventListener("click", $507fabe10e71c6fb$var$handleClickEvent, true);
+  window.addEventListener("focus", $507fabe10e71c6fb$var$handleFocusEvent, true);
+  window.addEventListener("blur", $507fabe10e71c6fb$var$handleWindowBlur, false);
+  if (typeof PointerEvent !== "undefined") {
+    document.addEventListener("pointerdown", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    document.addEventListener("pointermove", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    document.addEventListener("pointerup", $507fabe10e71c6fb$var$handlePointerEvent, true);
+  } else {
+    document.addEventListener("mousedown", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    document.addEventListener("mousemove", $507fabe10e71c6fb$var$handlePointerEvent, true);
+    document.addEventListener("mouseup", $507fabe10e71c6fb$var$handlePointerEvent, true);
+  }
+  $507fabe10e71c6fb$var$hasSetupGlobalListeners = true;
+}
+if (typeof document !== "undefined") {
+  if (document.readyState !== "loading")
+    $507fabe10e71c6fb$var$setupGlobalFocusEvents();
+  else
+    document.addEventListener("DOMContentLoaded", $507fabe10e71c6fb$var$setupGlobalFocusEvents);
+}
+function $507fabe10e71c6fb$export$b9b3dfddab17db27() {
+  return $507fabe10e71c6fb$var$currentModality !== "pointer";
+}
+function $9ab94262bd0047c7$export$420e68273165f4ec(props) {
+  let { isDisabled, onBlurWithin, onFocusWithin, onFocusWithinChange } = props;
+  let state = $bx7SL$useRef({
+    isFocusWithin: false
+  });
+  let onBlur = $bx7SL$useCallback((e) => {
+    if (state.current.isFocusWithin && !e.currentTarget.contains(e.relatedTarget)) {
+      state.current.isFocusWithin = false;
+      if (onBlurWithin)
+        onBlurWithin(e);
+      if (onFocusWithinChange)
+        onFocusWithinChange(false);
+    }
+  }, [
+    onBlurWithin,
+    onFocusWithinChange,
+    state
+  ]);
+  let onSyntheticFocus = $8a9cb279dc87e130$export$715c682d09d639cc(onBlur);
+  let onFocus = $bx7SL$useCallback((e) => {
+    if (!state.current.isFocusWithin) {
+      if (onFocusWithin)
+        onFocusWithin(e);
+      if (onFocusWithinChange)
+        onFocusWithinChange(true);
+      state.current.isFocusWithin = true;
+      onSyntheticFocus(e);
+    }
+  }, [
+    onFocusWithin,
+    onFocusWithinChange,
+    onSyntheticFocus
+  ]);
+  if (isDisabled)
+    return {
+      focusWithinProps: {
+        onFocus: null,
+        onBlur: null
+      }
+    };
+  return {
+    focusWithinProps: {
+      onFocus,
+      onBlur
+    }
+  };
+}
+var $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = false;
+var $6179b936705e76d3$var$hoverCount = 0;
+function $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents() {
+  $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = true;
+  setTimeout(() => {
+    $6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents = false;
+  }, 50);
+}
+function $6179b936705e76d3$var$handleGlobalPointerEvent(e) {
+  if (e.pointerType === "touch")
+    $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents();
+}
+function $6179b936705e76d3$var$setupGlobalTouchEvents() {
+  if (typeof document === "undefined")
+    return;
+  if (typeof PointerEvent !== "undefined")
+    document.addEventListener("pointerup", $6179b936705e76d3$var$handleGlobalPointerEvent);
+  else
+    document.addEventListener("touchend", $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents);
+  $6179b936705e76d3$var$hoverCount++;
+  return () => {
+    $6179b936705e76d3$var$hoverCount--;
+    if ($6179b936705e76d3$var$hoverCount > 0)
+      return;
+    if (typeof PointerEvent !== "undefined")
+      document.removeEventListener("pointerup", $6179b936705e76d3$var$handleGlobalPointerEvent);
+    else
+      document.removeEventListener("touchend", $6179b936705e76d3$var$setGlobalIgnoreEmulatedMouseEvents);
+  };
+}
+function $6179b936705e76d3$export$ae780daf29e6d456(props) {
+  let { onHoverStart, onHoverChange, onHoverEnd, isDisabled } = props;
+  let [isHovered, setHovered] = $bx7SL$useState(false);
+  let state = $bx7SL$useRef({
+    isHovered: false,
+    ignoreEmulatedMouseEvents: false,
+    pointerType: "",
+    target: null
+  }).current;
+  $bx7SL$useEffect($6179b936705e76d3$var$setupGlobalTouchEvents, []);
+  let { hoverProps: hoverProps1, triggerHoverEnd: triggerHoverEnd1 } = $bx7SL$useMemo(() => {
+    let triggerHoverStart = (event, pointerType) => {
+      state.pointerType = pointerType;
+      if (isDisabled || pointerType === "touch" || state.isHovered || !event.currentTarget.contains(event.target))
+        return;
+      state.isHovered = true;
+      let target = event.currentTarget;
+      state.target = target;
+      if (onHoverStart)
+        onHoverStart({
+          type: "hoverstart",
+          target,
+          pointerType
+        });
+      if (onHoverChange)
+        onHoverChange(true);
+      setHovered(true);
+    };
+    let triggerHoverEnd = (event, pointerType) => {
+      state.pointerType = "";
+      state.target = null;
+      if (pointerType === "touch" || !state.isHovered)
+        return;
+      state.isHovered = false;
+      let target = event.currentTarget;
+      if (onHoverEnd)
+        onHoverEnd({
+          type: "hoverend",
+          target,
+          pointerType
+        });
+      if (onHoverChange)
+        onHoverChange(false);
+      setHovered(false);
+    };
+    let hoverProps = {};
+    if (typeof PointerEvent !== "undefined") {
+      hoverProps.onPointerEnter = (e) => {
+        if ($6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents && e.pointerType === "mouse")
+          return;
+        triggerHoverStart(e, e.pointerType);
+      };
+      hoverProps.onPointerLeave = (e) => {
+        if (!isDisabled && e.currentTarget.contains(e.target))
+          triggerHoverEnd(e, e.pointerType);
+      };
+    } else {
+      hoverProps.onTouchStart = () => {
+        state.ignoreEmulatedMouseEvents = true;
+      };
+      hoverProps.onMouseEnter = (e) => {
+        if (!state.ignoreEmulatedMouseEvents && !$6179b936705e76d3$var$globalIgnoreEmulatedMouseEvents)
+          triggerHoverStart(e, "mouse");
+        state.ignoreEmulatedMouseEvents = false;
+      };
+      hoverProps.onMouseLeave = (e) => {
+        if (!isDisabled && e.currentTarget.contains(e.target))
+          triggerHoverEnd(e, "mouse");
+      };
+    }
+    return {
+      hoverProps,
+      triggerHoverEnd
+    };
+  }, [
+    onHoverStart,
+    onHoverChange,
+    onHoverEnd,
+    isDisabled,
+    state
+  ]);
+  $bx7SL$useEffect(() => {
+    if (isDisabled)
+      triggerHoverEnd1({
+        currentTarget: state.target
+      }, state.pointerType);
+  }, [
+    isDisabled
+  ]);
+  return {
+    hoverProps: hoverProps1,
+    isHovered
+  };
+}
+var $8a26561d2877236e$var$DEFAULT_THRESHOLD = 500;
+function $8a26561d2877236e$export$c24ed0104d07eab9(props) {
+  let { isDisabled, onLongPressStart, onLongPressEnd, onLongPress, threshold = $8a26561d2877236e$var$DEFAULT_THRESHOLD, accessibilityDescription } = props;
+  const timeRef = $bx7SL$useRef(null);
+  let { addGlobalListener, removeGlobalListener } = $03deb23ff14920c4$export$4eaf04e54aa8eed6();
+  let { pressProps } = $f6c31cce2adf654f$export$45712eceda6fad21({
+    isDisabled,
+    onPressStart(e1) {
+      if (e1.pointerType === "mouse" || e1.pointerType === "touch") {
+        if (onLongPressStart)
+          onLongPressStart({
+            ...e1,
+            type: "longpressstart"
+          });
+        timeRef.current = setTimeout(() => {
+          e1.target.dispatchEvent(new PointerEvent("pointercancel", {
+            bubbles: true
+          }));
+          if (onLongPress)
+            onLongPress({
+              ...e1,
+              type: "longpress"
+            });
+          timeRef.current = null;
+        }, threshold);
+        if (e1.pointerType === "touch") {
+          let onContextMenu = (e) => {
+            e.preventDefault();
+          };
+          addGlobalListener(e1.target, "contextmenu", onContextMenu, {
+            once: true
+          });
+          addGlobalListener(window, "pointerup", () => {
+            setTimeout(() => {
+              removeGlobalListener(e1.target, "contextmenu", onContextMenu);
+            }, 30);
+          }, {
+            once: true
+          });
+        }
+      }
+    },
+    onPressEnd(e) {
+      if (timeRef.current)
+        clearTimeout(timeRef.current);
+      if (onLongPressEnd && (e.pointerType === "mouse" || e.pointerType === "touch"))
+        onLongPressEnd({
+          ...e,
+          type: "longpressend"
+        });
+    }
+  });
+  let descriptionProps = $ef06256079686ba0$export$f8aeda7b10753fa1(onLongPress && !isDisabled ? accessibilityDescription : null);
+  return {
+    longPressProps: $3ef42575df84b30b$export$9d1611c77c2fe928(pressProps, descriptionProps)
+  };
+}
+
+// ../../node_modules/@react-aria/label/dist/module.js
+function $d191a55c9702f145$export$8467354a121f1b9f(props) {
+  let { id, label, "aria-labelledby": ariaLabelledby, "aria-label": ariaLabel, labelElementType = "label" } = props;
+  id = $bdb11010cef70236$export$f680877a34711e37(id);
+  let labelId = $bdb11010cef70236$export$f680877a34711e37();
+  let labelProps = {};
+  if (label) {
+    ariaLabelledby = ariaLabelledby ? `${ariaLabelledby} ${labelId}` : labelId;
+    labelProps = {
+      id: labelId,
+      htmlFor: labelElementType === "label" ? id : void 0
+    };
+  } else if (!ariaLabelledby && !ariaLabel)
+    console.warn("If you do not provide a visible label, you must specify an aria-label or aria-labelledby attribute for accessibility");
+  let fieldProps = $313b98861ee5dd6c$export$d6875122194c7b44({
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby
+  });
+  return {
+    labelProps,
+    fieldProps
+  };
+}
+
+// ../../node_modules/@react-aria/selection/dist/module.js
+import { useRef as $eCAIO$useRef, useEffect as $eCAIO$useEffect, useMemo as $eCAIO$useMemo } from "react";
+import { getFocusableTreeWalker as $eCAIO$getFocusableTreeWalker, focusSafely as $eCAIO$focusSafely } from "@react-aria/focus";
+
+// ../../node_modules/@react-aria/i18n/dist/real-module.js
+import $iFADg$react, { useContext as $iFADg$useContext, useState as $iFADg$useState, useEffect as $iFADg$useEffect, useMemo as $iFADg$useMemo, useRef as $iFADg$useRef } from "react";
+import { useIsSSR as $iFADg$useIsSSR } from "@react-aria/ssr";
+var $148a7a147e38ea7f$var$RTL_SCRIPTS = /* @__PURE__ */ new Set([
+  "Arab",
+  "Syrc",
+  "Samr",
+  "Mand",
+  "Thaa",
+  "Mend",
+  "Nkoo",
+  "Adlm",
+  "Rohg",
+  "Hebr"
+]);
+var $148a7a147e38ea7f$var$RTL_LANGS = /* @__PURE__ */ new Set([
+  "ae",
+  "ar",
+  "arc",
+  "bcc",
+  "bqi",
+  "ckb",
+  "dv",
+  "fa",
+  "glk",
+  "he",
+  "ku",
+  "mzn",
+  "nqo",
+  "pnb",
+  "ps",
+  "sd",
+  "ug",
+  "ur",
+  "yi"
+]);
+function $148a7a147e38ea7f$export$702d680b21cbd764(locale) {
+  if (Intl.Locale) {
+    let script = new Intl.Locale(locale).maximize().script;
+    return $148a7a147e38ea7f$var$RTL_SCRIPTS.has(script);
+  }
+  let lang = locale.split("-")[0];
+  return $148a7a147e38ea7f$var$RTL_LANGS.has(lang);
+}
+function $1e5a04cdaf7d1af8$export$f09106e7c6677ec5() {
+  let locale = typeof navigator !== "undefined" && (navigator.language || navigator.userLanguage) || "en-US";
+  try {
+    Intl.DateTimeFormat.supportedLocalesOf([
+      locale
+    ]);
+  } catch (_err) {
+    locale = "en-US";
+  }
+  return {
+    locale,
+    direction: $148a7a147e38ea7f$export$702d680b21cbd764(locale) ? "rtl" : "ltr"
+  };
+}
+var $1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
+var $1e5a04cdaf7d1af8$var$listeners = /* @__PURE__ */ new Set();
+function $1e5a04cdaf7d1af8$var$updateLocale() {
+  $1e5a04cdaf7d1af8$var$currentLocale = $1e5a04cdaf7d1af8$export$f09106e7c6677ec5();
+  for (let listener of $1e5a04cdaf7d1af8$var$listeners)
+    listener($1e5a04cdaf7d1af8$var$currentLocale);
+}
+function $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a() {
+  let isSSR = $iFADg$useIsSSR();
+  let [defaultLocale, setDefaultLocale] = $iFADg$useState($1e5a04cdaf7d1af8$var$currentLocale);
+  $iFADg$useEffect(() => {
+    if ($1e5a04cdaf7d1af8$var$listeners.size === 0)
+      window.addEventListener("languagechange", $1e5a04cdaf7d1af8$var$updateLocale);
+    $1e5a04cdaf7d1af8$var$listeners.add(setDefaultLocale);
+    return () => {
+      $1e5a04cdaf7d1af8$var$listeners.delete(setDefaultLocale);
+      if ($1e5a04cdaf7d1af8$var$listeners.size === 0)
+        window.removeEventListener("languagechange", $1e5a04cdaf7d1af8$var$updateLocale);
+    };
+  }, []);
+  if (isSSR)
+    return {
+      locale: "en-US",
+      direction: "ltr"
+    };
+  return defaultLocale;
+}
+var $18f2051aff69b9bf$var$I18nContext = /* @__PURE__ */ $iFADg$react.createContext(null);
+function $18f2051aff69b9bf$export$43bb16f9c6d9e3f7() {
+  let defaultLocale = $1e5a04cdaf7d1af8$export$188ec29ebc2bdc3a();
+  let context = $iFADg$useContext($18f2051aff69b9bf$var$I18nContext);
+  return context || defaultLocale;
+}
+var $325a3faab7a68acd$var$cache = /* @__PURE__ */ new Map();
+function $325a3faab7a68acd$export$a16aca283550c30d(options) {
+  let { locale } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+  let cacheKey = locale + (options ? Object.entries(options).sort(
+    (a, b) => a[0] < b[0] ? -1 : 1
+  ).join() : "");
+  if ($325a3faab7a68acd$var$cache.has(cacheKey))
+    return $325a3faab7a68acd$var$cache.get(cacheKey);
+  let formatter = new Intl.Collator(locale, options);
+  $325a3faab7a68acd$var$cache.set(cacheKey, formatter);
+  return formatter;
+}
+
+// ../../node_modules/@react-aria/selection/dist/module.js
+function $feb5ffebff200149$export$d3e3bd3e26688c04(e) {
+  return $c87311424ea30a05$export$e1865c3bedcd822b() ? e.altKey : e.ctrlKey;
+}
+function $feb5ffebff200149$export$16792effe837dba3(e) {
+  if ($c87311424ea30a05$export$9ac100e40613ea10())
+    return e.metaKey;
+  return e.ctrlKey;
+}
+var $fb3050f43d946246$var$TYPEAHEAD_DEBOUNCE_WAIT_MS = 1e3;
+function $fb3050f43d946246$export$e32c88dfddc6e1d8(options) {
+  let { keyboardDelegate, selectionManager, onTypeSelect } = options;
+  let state = $eCAIO$useRef({
+    search: "",
+    timeout: null
+  }).current;
+  let onKeyDown = (e) => {
+    let character = $fb3050f43d946246$var$getStringForKey(e.key);
+    if (!character || e.ctrlKey || e.metaKey)
+      return;
+    if (character === " " && state.search.trim().length > 0) {
+      e.preventDefault();
+      if (!("continuePropagation" in e))
+        e.stopPropagation();
+    }
+    state.search += character;
+    let key = keyboardDelegate.getKeyForSearch(state.search, selectionManager.focusedKey);
+    if (key == null)
+      key = keyboardDelegate.getKeyForSearch(state.search);
+    if (key != null) {
+      selectionManager.setFocusedKey(key);
+      if (onTypeSelect)
+        onTypeSelect(key);
+    }
+    clearTimeout(state.timeout);
+    state.timeout = setTimeout(() => {
+      state.search = "";
+    }, $fb3050f43d946246$var$TYPEAHEAD_DEBOUNCE_WAIT_MS);
+  };
+  return {
+    typeSelectProps: {
+      onKeyDownCapture: keyboardDelegate.getKeyForSearch ? onKeyDown : null
+    }
+  };
+}
+function $fb3050f43d946246$var$getStringForKey(key) {
+  if (key.length === 1 || !/^[A-Z]/i.test(key))
+    return key;
+  return "";
+}
+function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
+  let { selectionManager: manager, keyboardDelegate: delegate, ref, autoFocus = false, shouldFocusWrap = false, disallowEmptySelection = false, disallowSelectAll = false, selectOnFocus = manager.selectionBehavior === "replace", disallowTypeAhead = false, shouldUseVirtualFocus, allowsTabNavigation = false, isVirtualized, scrollRef = ref } = options;
+  let { direction } = $18f2051aff69b9bf$export$43bb16f9c6d9e3f7();
+  let onKeyDown = (e) => {
+    if (e.altKey && e.key === "Tab")
+      e.preventDefault();
+    if (!ref.current.contains(e.target))
+      return;
+    const navigateToKey = (key, childFocus) => {
+      if (key != null) {
+        manager.setFocusedKey(key, childFocus);
+        if (e.shiftKey && manager.selectionMode === "multiple")
+          manager.extendSelection(key);
+        else if (selectOnFocus && !$feb5ffebff200149$export$d3e3bd3e26688c04(e))
+          manager.replaceSelection(key);
+      }
+    };
+    switch (e.key) {
+      case "ArrowDown":
+        if (delegate.getKeyBelow) {
+          var ref4, ref1;
+          e.preventDefault();
+          let nextKey = manager.focusedKey != null ? delegate.getKeyBelow(manager.focusedKey) : (ref4 = delegate.getFirstKey) === null || ref4 === void 0 ? void 0 : ref4.call(delegate);
+          if (nextKey == null && shouldFocusWrap)
+            nextKey = (ref1 = delegate.getFirstKey) === null || ref1 === void 0 ? void 0 : ref1.call(delegate, manager.focusedKey);
+          navigateToKey(nextKey);
+        }
+        break;
+      case "ArrowUp":
+        if (delegate.getKeyAbove) {
+          var ref2, ref3;
+          e.preventDefault();
+          let nextKey = manager.focusedKey != null ? delegate.getKeyAbove(manager.focusedKey) : (ref2 = delegate.getLastKey) === null || ref2 === void 0 ? void 0 : ref2.call(delegate);
+          if (nextKey == null && shouldFocusWrap)
+            nextKey = (ref3 = delegate.getLastKey) === null || ref3 === void 0 ? void 0 : ref3.call(delegate, manager.focusedKey);
+          navigateToKey(nextKey);
+        }
+        break;
+      case "ArrowLeft":
+        if (delegate.getKeyLeftOf) {
+          e.preventDefault();
+          let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
+          navigateToKey(nextKey, direction === "rtl" ? "first" : "last");
+        }
+        break;
+      case "ArrowRight":
+        if (delegate.getKeyRightOf) {
+          e.preventDefault();
+          let nextKey = delegate.getKeyRightOf(manager.focusedKey);
+          navigateToKey(nextKey, direction === "rtl" ? "last" : "first");
+        }
+        break;
+      case "Home":
+        if (delegate.getFirstKey) {
+          e.preventDefault();
+          let firstKey = delegate.getFirstKey(manager.focusedKey, $feb5ffebff200149$export$16792effe837dba3(e));
+          manager.setFocusedKey(firstKey);
+          if ($feb5ffebff200149$export$16792effe837dba3(e) && e.shiftKey && manager.selectionMode === "multiple")
+            manager.extendSelection(firstKey);
+          else if (selectOnFocus)
+            manager.replaceSelection(firstKey);
+        }
+        break;
+      case "End":
+        if (delegate.getLastKey) {
+          e.preventDefault();
+          let lastKey = delegate.getLastKey(manager.focusedKey, $feb5ffebff200149$export$16792effe837dba3(e));
+          manager.setFocusedKey(lastKey);
+          if ($feb5ffebff200149$export$16792effe837dba3(e) && e.shiftKey && manager.selectionMode === "multiple")
+            manager.extendSelection(lastKey);
+          else if (selectOnFocus)
+            manager.replaceSelection(lastKey);
+        }
+        break;
+      case "PageDown":
+        if (delegate.getKeyPageBelow) {
+          e.preventDefault();
+          let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
+          navigateToKey(nextKey);
+        }
+        break;
+      case "PageUp":
+        if (delegate.getKeyPageAbove) {
+          e.preventDefault();
+          let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
+          navigateToKey(nextKey);
+        }
+        break;
+      case "a":
+        if ($feb5ffebff200149$export$16792effe837dba3(e) && manager.selectionMode === "multiple" && disallowSelectAll !== true) {
+          e.preventDefault();
+          manager.selectAll();
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        if (!disallowEmptySelection)
+          manager.clearSelection();
+        break;
+      case "Tab":
+        if (!allowsTabNavigation) {
+          if (e.shiftKey)
+            ref.current.focus();
+          else {
+            let walker = $eCAIO$getFocusableTreeWalker(ref.current, {
+              tabbable: true
+            });
+            let next;
+            let last;
+            do {
+              last = walker.lastChild();
+              if (last)
+                next = last;
+            } while (last);
+            if (next && !next.contains(document.activeElement))
+              $7215afc6de606d6b$export$de79e2c695e052f3(next);
+          }
+          break;
+        }
+    }
+  };
+  let scrollPos = $eCAIO$useRef({
+    top: 0,
+    left: 0
+  });
+  $e9faafb641e167db$export$90fc3a17d93f704c(scrollRef, "scroll", isVirtualized ? null : () => {
+    scrollPos.current = {
+      top: scrollRef.current.scrollTop,
+      left: scrollRef.current.scrollLeft
+    };
+  });
+  let onFocus = (e) => {
+    if (manager.isFocused) {
+      if (!e.currentTarget.contains(e.target))
+        manager.setFocused(false);
+      return;
+    }
+    if (!e.currentTarget.contains(e.target))
+      return;
+    manager.setFocused(true);
+    if (manager.focusedKey == null) {
+      let navigateToFirstKey = (key) => {
+        if (key != null) {
+          manager.setFocusedKey(key);
+          if (selectOnFocus)
+            manager.replaceSelection(key);
+        }
+      };
+      let relatedTarget = e.relatedTarget;
+      var _lastSelectedKey, _firstSelectedKey;
+      if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING)
+        navigateToFirstKey((_lastSelectedKey = manager.lastSelectedKey) !== null && _lastSelectedKey !== void 0 ? _lastSelectedKey : delegate.getLastKey());
+      else
+        navigateToFirstKey((_firstSelectedKey = manager.firstSelectedKey) !== null && _firstSelectedKey !== void 0 ? _firstSelectedKey : delegate.getFirstKey());
+    } else if (!isVirtualized) {
+      scrollRef.current.scrollTop = scrollPos.current.top;
+      scrollRef.current.scrollLeft = scrollPos.current.left;
+      let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`);
+      if (element) {
+        $7215afc6de606d6b$export$de79e2c695e052f3(element);
+        $2f04cbc44ee30ce0$export$53a0910f038337bd(scrollRef.current, element);
+      }
+    }
+  };
+  let onBlur = (e) => {
+    if (!e.currentTarget.contains(e.relatedTarget))
+      manager.setFocused(false);
+  };
+  const autoFocusRef = $eCAIO$useRef(autoFocus);
+  $eCAIO$useEffect(() => {
+    if (autoFocusRef.current) {
+      let focusedKey = null;
+      if (autoFocus === "first")
+        focusedKey = delegate.getFirstKey();
+      if (autoFocus === "last")
+        focusedKey = delegate.getLastKey();
+      let selectedKeys = manager.selectedKeys;
+      if (selectedKeys.size)
+        focusedKey = selectedKeys.values().next().value;
+      manager.setFocused(true);
+      manager.setFocusedKey(focusedKey);
+      if (focusedKey == null && !shouldUseVirtualFocus)
+        $eCAIO$focusSafely(ref.current);
+    }
+    autoFocusRef.current = false;
+  }, []);
+  $eCAIO$useEffect(() => {
+    if (!isVirtualized && manager.focusedKey && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
+      let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`);
+      if (element)
+        $2f04cbc44ee30ce0$export$53a0910f038337bd(scrollRef.current, element);
+    }
+  }, [
+    isVirtualized,
+    scrollRef,
+    manager.focusedKey
+  ]);
+  let handlers = {
+    onKeyDown,
+    onFocus,
+    onBlur,
+    onMouseDown(e) {
+      if (scrollRef.current === e.target)
+        e.preventDefault();
+    }
+  };
+  let { typeSelectProps } = $fb3050f43d946246$export$e32c88dfddc6e1d8({
+    keyboardDelegate: delegate,
+    selectionManager: manager
+  });
+  if (!disallowTypeAhead)
+    handlers = $3ef42575df84b30b$export$9d1611c77c2fe928(typeSelectProps, handlers);
+  let tabIndex;
+  if (!shouldUseVirtualFocus)
+    tabIndex = manager.focusedKey == null ? 0 : -1;
+  return {
+    collectionProps: {
+      ...handlers,
+      tabIndex
+    }
+  };
+}
+function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
+  let { selectionManager: manager, key, ref, shouldSelectOnPressUp, isVirtualized, shouldUseVirtualFocus, focus, isDisabled, onAction, allowsDifferentPressOrigin } = options;
+  let onSelect = (e) => {
+    if (e.pointerType === "keyboard" && $feb5ffebff200149$export$d3e3bd3e26688c04(e))
+      manager.toggleSelection(key);
+    else {
+      if (manager.selectionMode === "none")
+        return;
+      if (manager.selectionMode === "single") {
+        if (manager.isSelected(key) && !manager.disallowEmptySelection)
+          manager.toggleSelection(key);
+        else
+          manager.replaceSelection(key);
+      } else if (e && e.shiftKey)
+        manager.extendSelection(key);
+      else if (manager.selectionBehavior === "toggle" || e && ($feb5ffebff200149$export$16792effe837dba3(e) || e.pointerType === "touch" || e.pointerType === "virtual"))
+        manager.toggleSelection(key);
+      else
+        manager.replaceSelection(key);
+    }
+  };
+  $eCAIO$useEffect(() => {
+    let isFocused = key === manager.focusedKey;
+    if (isFocused && manager.isFocused && !shouldUseVirtualFocus && document.activeElement !== ref.current) {
+      if (focus)
+        focus();
+      else
+        $eCAIO$focusSafely(ref.current);
+    }
+  }, [
+    ref,
+    key,
+    manager.focusedKey,
+    manager.childFocusStrategy,
+    manager.isFocused,
+    shouldUseVirtualFocus
+  ]);
+  isDisabled = isDisabled || manager.isDisabled(key);
+  let itemProps = {};
+  if (!shouldUseVirtualFocus && !isDisabled)
+    itemProps = {
+      tabIndex: key === manager.focusedKey ? 0 : -1,
+      onFocus(e) {
+        if (e.target === ref.current)
+          manager.setFocusedKey(key);
+      }
+    };
+  else if (isDisabled)
+    itemProps.onMouseDown = (e) => {
+      e.preventDefault();
+    };
+  let allowsSelection = !isDisabled && manager.canSelectItem(key);
+  let allowsActions = onAction && !isDisabled;
+  let hasPrimaryAction = allowsActions && (manager.selectionBehavior === "replace" ? !allowsSelection : manager.isEmpty);
+  let hasSecondaryAction = allowsActions && allowsSelection && manager.selectionBehavior === "replace";
+  let hasAction = hasPrimaryAction || hasSecondaryAction;
+  let modality = $eCAIO$useRef(null);
+  let longPressEnabled = hasAction && allowsSelection;
+  let longPressEnabledOnPressStart = $eCAIO$useRef(false);
+  let hadPrimaryActionOnPressStart = $eCAIO$useRef(false);
+  let itemPressProps = {};
+  if (shouldSelectOnPressUp) {
+    itemPressProps.onPressStart = (e) => {
+      modality.current = e.pointerType;
+      longPressEnabledOnPressStart.current = longPressEnabled;
+      if (e.pointerType === "keyboard" && (!hasAction || $880e95eb8b93ba9a$var$isSelectionKey()))
+        onSelect(e);
+    };
+    if (!allowsDifferentPressOrigin)
+      itemPressProps.onPress = (e) => {
+        if (hasPrimaryAction || hasSecondaryAction && e.pointerType !== "mouse") {
+          if (e.pointerType === "keyboard" && !$880e95eb8b93ba9a$var$isActionKey())
+            return;
+          onAction();
+        } else if (e.pointerType !== "keyboard")
+          onSelect(e);
+      };
+    else {
+      itemPressProps.onPressUp = (e) => {
+        if (e.pointerType !== "keyboard")
+          onSelect(e);
+      };
+      itemPressProps.onPress = hasPrimaryAction ? () => onAction() : null;
+    }
+  } else {
+    itemPressProps.onPressStart = (e) => {
+      modality.current = e.pointerType;
+      longPressEnabledOnPressStart.current = longPressEnabled;
+      hadPrimaryActionOnPressStart.current = hasPrimaryAction;
+      if (e.pointerType === "mouse" && !hasPrimaryAction || e.pointerType === "keyboard" && (!onAction || $880e95eb8b93ba9a$var$isSelectionKey()))
+        onSelect(e);
+    };
+    itemPressProps.onPress = (e) => {
+      if (e.pointerType === "touch" || e.pointerType === "pen" || e.pointerType === "virtual" || e.pointerType === "keyboard" && hasAction && $880e95eb8b93ba9a$var$isActionKey() || e.pointerType === "mouse" && hadPrimaryActionOnPressStart.current) {
+        if (hasAction)
+          onAction();
+        else
+          onSelect(e);
+      }
+    };
+  }
+  if (!isVirtualized)
+    itemProps["data-key"] = key;
+  itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;
+  let { pressProps, isPressed } = $f6c31cce2adf654f$export$45712eceda6fad21(itemPressProps);
+  let onDoubleClick = hasSecondaryAction ? (e) => {
+    if (modality.current === "mouse") {
+      e.stopPropagation();
+      e.preventDefault();
+      onAction();
+    }
+  } : void 0;
+  let { longPressProps } = $8a26561d2877236e$export$c24ed0104d07eab9({
+    isDisabled: !longPressEnabled,
+    onLongPress(e) {
+      if (e.pointerType === "touch") {
+        onSelect(e);
+        manager.setSelectionBehavior("toggle");
+      }
+    }
+  });
+  let onDragStartCapture = (e) => {
+    if (modality.current === "touch" && longPressEnabledOnPressStart.current)
+      e.preventDefault();
+  };
+  return {
+    itemProps: $3ef42575df84b30b$export$9d1611c77c2fe928(itemProps, allowsSelection || hasPrimaryAction ? pressProps : {}, longPressEnabled ? longPressProps : {}, {
+      onDoubleClick,
+      onDragStartCapture
+    }),
+    isPressed,
+    isSelected: manager.isSelected(key),
+    isDisabled,
+    allowsSelection,
+    hasAction
+  };
+}
+function $880e95eb8b93ba9a$var$isActionKey() {
+  let event = window.event;
+  return (event === null || event === void 0 ? void 0 : event.key) === "Enter";
+}
+function $880e95eb8b93ba9a$var$isSelectionKey() {
+  let event = window.event;
+  return (event === null || event === void 0 ? void 0 : event.key) === " " || (event === null || event === void 0 ? void 0 : event.code) === "Space";
+}
+var $2a25aae57d74318e$export$a05409b8bb224a5a = class {
+  getKeyBelow(key) {
+    key = this.collection.getKeyAfter(key);
+    while (key != null) {
+      let item = this.collection.getItem(key);
+      if (item.type === "item" && !this.disabledKeys.has(key))
+        return key;
+      key = this.collection.getKeyAfter(key);
+    }
+  }
+  getKeyAbove(key) {
+    key = this.collection.getKeyBefore(key);
+    while (key != null) {
+      let item = this.collection.getItem(key);
+      if (item.type === "item" && !this.disabledKeys.has(key))
+        return key;
+      key = this.collection.getKeyBefore(key);
+    }
+  }
+  getFirstKey() {
+    let key = this.collection.getFirstKey();
+    while (key != null) {
+      let item = this.collection.getItem(key);
+      if (item.type === "item" && !this.disabledKeys.has(key))
+        return key;
+      key = this.collection.getKeyAfter(key);
+    }
+  }
+  getLastKey() {
+    let key = this.collection.getLastKey();
+    while (key != null) {
+      let item = this.collection.getItem(key);
+      if (item.type === "item" && !this.disabledKeys.has(key))
+        return key;
+      key = this.collection.getKeyBefore(key);
+    }
+  }
+  getItem(key) {
+    return this.ref.current.querySelector(`[data-key="${key}"]`);
+  }
+  getKeyPageAbove(key) {
+    let menu = this.ref.current;
+    let item = this.getItem(key);
+    if (!item)
+      return null;
+    let pageY = Math.max(0, item.offsetTop + item.offsetHeight - menu.offsetHeight);
+    while (item && item.offsetTop > pageY) {
+      key = this.getKeyAbove(key);
+      item = this.getItem(key);
+    }
+    return key;
+  }
+  getKeyPageBelow(key) {
+    let menu = this.ref.current;
+    let item = this.getItem(key);
+    if (!item)
+      return null;
+    let pageY = Math.min(menu.scrollHeight, item.offsetTop - item.offsetHeight + menu.offsetHeight);
+    while (item && item.offsetTop < pageY) {
+      key = this.getKeyBelow(key);
+      item = this.getItem(key);
+    }
+    return key;
+  }
+  getKeyForSearch(search, fromKey) {
+    if (!this.collator)
+      return null;
+    let collection = this.collection;
+    let key = fromKey || this.getFirstKey();
+    while (key != null) {
+      let item = collection.getItem(key);
+      let substring = item.textValue.slice(0, search.length);
+      if (item.textValue && this.collator.compare(substring, search) === 0)
+        return key;
+      key = this.getKeyBelow(key);
+    }
+    return null;
+  }
+  constructor(collection, disabledKeys, ref, collator) {
+    this.collection = collection;
+    this.disabledKeys = disabledKeys;
+    this.ref = ref;
+    this.collator = collator;
+  }
+};
+function $982254629710d113$export$b95089534ab7c1fd(props) {
+  let { selectionManager, collection, disabledKeys, ref, keyboardDelegate, autoFocus, shouldFocusWrap, isVirtualized, disallowEmptySelection, selectOnFocus = selectionManager.selectionBehavior === "replace", disallowTypeAhead, shouldUseVirtualFocus, allowsTabNavigation } = props;
+  let collator = $325a3faab7a68acd$export$a16aca283550c30d({
+    usage: "search",
+    sensitivity: "base"
+  });
+  let disabledBehavior = selectionManager.disabledBehavior;
+  let delegate = $eCAIO$useMemo(
+    () => keyboardDelegate || new $2a25aae57d74318e$export$a05409b8bb224a5a(collection, disabledBehavior === "selection" ? /* @__PURE__ */ new Set() : disabledKeys, ref, collator),
+    [
+      keyboardDelegate,
+      collection,
+      disabledKeys,
+      ref,
+      collator,
+      disabledBehavior
+    ]
+  );
+  let { collectionProps } = $ae20dd8cbca75726$export$d6daf82dcd84e87c({
+    ref,
+    selectionManager,
+    keyboardDelegate: delegate,
+    autoFocus,
+    shouldFocusWrap,
+    disallowEmptySelection,
+    selectOnFocus,
+    disallowTypeAhead,
+    shouldUseVirtualFocus,
+    allowsTabNavigation,
+    isVirtualized,
+    scrollRef: ref
+  });
+  return {
+    listProps: collectionProps
+  };
+}
+
+// ../../node_modules/@react-stately/collections/dist/module.js
+import $tyW6A$react, { useMemo as $tyW6A$useMemo, useRef as $tyW6A$useRef } from "react";
+function $c1d7fb2ec91bae71$var$Item(props) {
+  return null;
+}
+$c1d7fb2ec91bae71$var$Item.getCollectionNode = function* getCollectionNode(props, context) {
+  let { childItems, title, children } = props;
+  let rendered = props.title || props.children;
+  let textValue = props.textValue || (typeof rendered === "string" ? rendered : "") || props["aria-label"] || "";
+  if (!textValue && !(context === null || context === void 0 ? void 0 : context.suppressTextValueWarning))
+    console.warn("<Item> with non-plain text contents is unsupported by type to select for accessibility. Please add a `textValue` prop.");
+  yield {
+    type: "item",
+    props,
+    rendered,
+    textValue,
+    "aria-label": props["aria-label"],
+    hasChildNodes: $c1d7fb2ec91bae71$var$hasChildItems(props),
+    *childNodes() {
+      if (childItems)
+        for (let child1 of childItems)
+          yield {
+            type: "item",
+            value: child1
+          };
+      else if (title) {
+        let items = [];
+        $tyW6A$react.Children.forEach(children, (child) => {
+          items.push({
+            type: "item",
+            element: child
+          });
+        });
+        yield* items;
+      }
+    }
+  };
+};
+function $c1d7fb2ec91bae71$var$hasChildItems(props) {
+  if (props.hasChildItems != null)
+    return props.hasChildItems;
+  if (props.childItems)
+    return true;
+  if (props.title && $tyW6A$react.Children.count(props.children) > 0)
+    return true;
+  return false;
+}
+function $9fc4852771d079eb$var$Section(props) {
+  return null;
+}
+$9fc4852771d079eb$var$Section.getCollectionNode = function* getCollectionNode2(props) {
+  let { children, title, items: items1 } = props;
+  yield {
+    type: "section",
+    props,
+    hasChildNodes: true,
+    rendered: title,
+    "aria-label": props["aria-label"],
+    *childNodes() {
+      if (typeof children === "function") {
+        if (!items1)
+          throw new Error("props.children was a function but props.items is missing");
+        for (let item of items1)
+          yield {
+            type: "item",
+            value: item,
+            renderer: children
+          };
+      } else {
+        let items = [];
+        $tyW6A$react.Children.forEach(children, (child) => {
+          items.push({
+            type: "item",
+            element: child
+          });
+        });
+        yield* items;
+      }
+    }
+  };
+};
+var $453cc9f0df89c0a5$var$cache = /* @__PURE__ */ new WeakMap();
+function $453cc9f0df89c0a5$export$77d5aafae4e095b2(collection) {
+  let count = $453cc9f0df89c0a5$var$cache.get(collection);
+  if (count != null)
+    return count;
+  count = 0;
+  for (let item of collection)
+    if (item.type === "section")
+      count += $453cc9f0df89c0a5$export$77d5aafae4e095b2(item.childNodes);
+    else
+      count++;
+  $453cc9f0df89c0a5$var$cache.set(collection, count);
+  return count;
+}
+
+// ../../node_modules/@react-aria/listbox/dist/module.js
+var $b1f0cad8af73213b$export$3585ede4d035bf14 = /* @__PURE__ */ new WeakMap();
+function $b1f0cad8af73213b$var$normalizeKey(key) {
+  if (typeof key === "string")
+    return key.replace(/\s*/g, "");
+  return "" + key;
+}
+function $b1f0cad8af73213b$export$9145995848b05025(state, itemKey) {
+  let data = $b1f0cad8af73213b$export$3585ede4d035bf14.get(state);
+  if (!data)
+    throw new Error("Unknown list");
+  return `${data.id}-option-${$b1f0cad8af73213b$var$normalizeKey(itemKey)}`;
+}
+function $c132121280ec012d$export$50eacbbf140a3141(props, state, ref) {
+  let domProps = $65484d02dcb7eb3e$export$457c3d6518dd4c6f(props, {
+    labelable: true
+  });
+  let { listProps } = $982254629710d113$export$b95089534ab7c1fd({
+    ...props,
+    ref,
+    selectionManager: state.selectionManager,
+    collection: state.collection,
+    disabledKeys: state.disabledKeys
+  });
+  let { focusWithinProps } = $9ab94262bd0047c7$export$420e68273165f4ec({
+    onFocusWithin: props.onFocus,
+    onBlurWithin: props.onBlur,
+    onFocusWithinChange: props.onFocusChange
+  });
+  let id = $bdb11010cef70236$export$f680877a34711e37(props.id);
+  $b1f0cad8af73213b$export$3585ede4d035bf14.set(state, {
+    id,
+    shouldUseVirtualFocus: props.shouldUseVirtualFocus,
+    shouldSelectOnPressUp: props.shouldSelectOnPressUp,
+    shouldFocusOnHover: props.shouldFocusOnHover,
+    isVirtualized: props.isVirtualized,
+    onAction: props.onAction
+  });
+  let { labelProps, fieldProps } = $d191a55c9702f145$export$8467354a121f1b9f({
+    ...props,
+    id,
+    labelElementType: "span"
+  });
+  return {
+    labelProps,
+    listBoxProps: $3ef42575df84b30b$export$9d1611c77c2fe928(domProps, focusWithinProps, state.selectionManager.selectionMode === "multiple" ? {
+      "aria-multiselectable": "true"
+    } : {}, {
+      role: "listbox",
+      ...$3ef42575df84b30b$export$9d1611c77c2fe928(fieldProps, listProps)
+    })
+  };
+}
+function $293f70390ea03370$export$497855f14858aa34(props, state, ref) {
+  let { key } = props;
+  let data = $b1f0cad8af73213b$export$3585ede4d035bf14.get(state);
+  var _isDisabled;
+  let isDisabled = (_isDisabled = props.isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : state.disabledKeys.has(key);
+  var _isSelected;
+  let isSelected = (_isSelected = props.isSelected) !== null && _isSelected !== void 0 ? _isSelected : state.selectionManager.isSelected(key);
+  let isFocused = state.selectionManager.focusedKey === key;
+  var _shouldSelectOnPressUp;
+  let shouldSelectOnPressUp = (_shouldSelectOnPressUp = props.shouldSelectOnPressUp) !== null && _shouldSelectOnPressUp !== void 0 ? _shouldSelectOnPressUp : data.shouldSelectOnPressUp;
+  var _shouldFocusOnHover;
+  let shouldFocusOnHover = (_shouldFocusOnHover = props.shouldFocusOnHover) !== null && _shouldFocusOnHover !== void 0 ? _shouldFocusOnHover : data.shouldFocusOnHover;
+  var _shouldUseVirtualFocus;
+  let shouldUseVirtualFocus = (_shouldUseVirtualFocus = props.shouldUseVirtualFocus) !== null && _shouldUseVirtualFocus !== void 0 ? _shouldUseVirtualFocus : data.shouldUseVirtualFocus;
+  var _isVirtualized;
+  let isVirtualized = (_isVirtualized = props.isVirtualized) !== null && _isVirtualized !== void 0 ? _isVirtualized : data.isVirtualized;
+  let labelId = $bdb11010cef70236$export$b4cc09c592e8fdb8();
+  let descriptionId = $bdb11010cef70236$export$b4cc09c592e8fdb8();
+  let optionProps = {
+    role: "option",
+    "aria-disabled": isDisabled,
+    "aria-selected": state.selectionManager.selectionMode !== "none" ? isSelected : void 0
+  };
+  if (!($c87311424ea30a05$export$9ac100e40613ea10() && $c87311424ea30a05$export$78551043582a6a98())) {
+    optionProps["aria-label"] = props["aria-label"];
+    optionProps["aria-labelledby"] = labelId;
+    optionProps["aria-describedby"] = descriptionId;
+  }
+  if (isVirtualized) {
+    optionProps["aria-posinset"] = state.collection.getItem(key).index + 1;
+    optionProps["aria-setsize"] = $453cc9f0df89c0a5$export$77d5aafae4e095b2(state.collection);
+  }
+  let { itemProps, isPressed, hasAction, allowsSelection } = $880e95eb8b93ba9a$export$ecf600387e221c37({
+    selectionManager: state.selectionManager,
+    key,
+    ref,
+    shouldSelectOnPressUp,
+    allowsDifferentPressOrigin: shouldSelectOnPressUp && shouldFocusOnHover,
+    isVirtualized,
+    shouldUseVirtualFocus,
+    isDisabled,
+    onAction: data.onAction ? () => data.onAction(key) : void 0
+  });
+  let { hoverProps } = $6179b936705e76d3$export$ae780daf29e6d456({
+    isDisabled: isDisabled || !shouldFocusOnHover,
+    onHoverStart() {
+      if (!$507fabe10e71c6fb$export$b9b3dfddab17db27()) {
+        state.selectionManager.setFocused(true);
+        state.selectionManager.setFocusedKey(key);
+      }
+    }
+  });
+  return {
+    optionProps: {
+      ...optionProps,
+      ...$3ef42575df84b30b$export$9d1611c77c2fe928(itemProps, hoverProps),
+      id: $b1f0cad8af73213b$export$9145995848b05025(state, key)
+    },
+    labelProps: {
+      id: labelId
+    },
+    descriptionProps: {
+      id: descriptionId
+    },
+    isFocused,
+    isSelected,
+    isDisabled,
+    isPressed,
+    allowsSelection,
+    hasAction
+  };
+}
+
+// src/components/DropdownSelector/Listbox.tsx
+import { useFocusRing } from "@react-aria/focus";
+import { px as px4 } from "@charcoal-ui/utils";
+var Listbox = ({
+  state,
+  mode = "default",
+  ...props
+}) => {
+  const ref = useRef5(null);
+  const { listBoxProps } = $c132121280ec012d$export$50eacbbf140a3141(props, state, ref);
+  const collection = useMemo2(
+    () => [...state.collection].map((node, index, self) => ({
+      node,
+      first: index === 0,
+      last: index === self.length - 1
+    })),
+    [state.collection]
+  );
+  return /* @__PURE__ */ React14.createElement(ListboxRoot, { ref, ...listBoxProps }, collection.map(({ node, last }) => /* @__PURE__ */ React14.createElement(Fragment, { key: node.key }, /* @__PURE__ */ React14.createElement(Option, { item: node, state, mode }), !last && mode === "separator" && /* @__PURE__ */ React14.createElement(Divider, null))));
+};
+var Listbox_default = memo(Listbox);
+var ListboxRoot = styled13.ul`
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+
+  ${theme((o) => [
+  o.bg.background1,
+  o.border.default,
+  o.borderRadius(8),
+  o.outline.default.focus
+])}
+`;
+var Divider = styled13.div.attrs({ role: "separator" })`
+  display: flex;
+  ${theme((o) => [o.padding.horizontal(8)])}
+
+  &:before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: #00000014;
+  }
+`;
+var Option = ({ item, state, mode }) => {
+  const ref = useRef5(null);
+  const { optionProps, isSelected } = $293f70390ea03370$export$497855f14858aa34(item, state, ref);
+  const { focusProps } = useFocusRing();
+  return /* @__PURE__ */ React14.createElement(OptionRoot, { ...$3ef42575df84b30b$export$9d1611c77c2fe928(optionProps, focusProps), ref, mode }, /* @__PURE__ */ React14.createElement(OptionCheckIcon, { name: "16/Check", isSelected }), /* @__PURE__ */ React14.createElement(OptionText, null, item.rendered));
+};
+var OptionRoot = styled13.li`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme: theme4 }) => px4(theme4.spacing[4])};
+  height: 40px;
+  cursor: pointer;
+  outline: none;
+
+  ${({ mode }) => theme((o) => [
+  o.padding.horizontal(8),
+  mode === "separator" && o.padding.vertical(4)
+])}
+
+  &:focus {
+    ${theme((o) => [o.bg.surface3])}
+  }
+`;
+var OptionCheckIcon = styled13(Icon_default)`
+  visibility: hidden;
+
+  ${({ isSelected }) => isSelected && css5`
+      visibility: visible;
+    `}
+`;
+var OptionText = styled13.span`
+  display: block;
+  ${theme((o) => [o.typography(14)])}
+`;
+
+// src/components/DropdownSelector/Popover.tsx
+import { FocusScope as FocusScope2 } from "@react-aria/focus";
+import { DismissButton, useOverlay as useOverlay2 } from "@react-aria/overlays";
+import React15, {
+  useRef as useRef6,
+  useMemo as useMemo3,
+  memo as memo2
+} from "react";
+var Popover = ({ open, onClose, children, ...props }) => {
+  const ref = useRef6(null);
+  const { overlayProps } = useOverlay2(
+    useMemo3(
+      () => ({
+        isOpen: open,
+        onClose,
+        shouldCloseOnBlur: true,
+        isDismissable: true
+      }),
+      [onClose, open]
+    ),
+    ref
+  );
+  return /* @__PURE__ */ React15.createElement(FocusScope2, { restoreFocus: true }, /* @__PURE__ */ React15.createElement("div", { ...$3ef42575df84b30b$export$9d1611c77c2fe928(overlayProps, props), ref }, children, /* @__PURE__ */ React15.createElement(DismissButton, { onDismiss: onClose })));
+};
+var Popover_default = memo2(Popover);
+
+// src/components/DropdownSelector/index.tsx
+var DropdownSelector = ({
+  open,
+  className,
+  label = "",
+  requiredText = "",
+  subLabel,
+  assertiveText,
+  autoComplete,
+  invalid = false,
+  disabled = false,
+  required = false,
+  showLabel = false,
+  mode = "default",
+  ...props
+}) => {
+  const { visuallyHiddenProps } = useVisuallyHidden2();
+  const triggerRef = useRef7(null);
+  const selectProps = useMemo4(
+    () => ({
+      ...props,
+      label,
+      isOpen: open,
+      isDisabled: disabled,
+      isRequired: required,
+      errorMessage: invalid && assertiveText,
+      validationState: invalid ? "invalid" : "valid",
+      onSelectionChange: props.onChange,
+      selectedKey: props.value,
+      defaultSelectedKey: props.defaultValue
+    }),
+    [assertiveText, disabled, invalid, label, open, props, required]
+  );
+  const state = useSelectState(selectProps);
+  const {
+    labelProps,
+    triggerProps,
+    valueProps,
+    menuProps,
+    errorMessageProps,
+    descriptionProps
+  } = useSelect(selectProps, state, triggerRef);
+  const { buttonProps } = useButton(triggerProps, triggerRef);
+  const hasAssertiveText = assertiveText !== void 0 && assertiveText.length > 0;
+  return /* @__PURE__ */ React16.createElement(DropdownSelectorRoot, { "aria-disabled": disabled, className }, /* @__PURE__ */ React16.createElement(
+    DropdownFieldLabel,
+    {
+      label,
+      required,
+      requiredText,
+      subLabel,
+      ...labelProps,
+      ...!showLabel ? visuallyHiddenProps : {}
+    }
+  ), /* @__PURE__ */ React16.createElement(
+    HiddenSelect,
+    {
+      state,
+      triggerRef,
+      label,
+      name: props.name,
+      isDisabled: disabled,
+      autoComplete
+    }
+  ), /* @__PURE__ */ React16.createElement(DropdownButtonWrapper, null, /* @__PURE__ */ React16.createElement(DropdownButton, { ...buttonProps, ref: triggerRef, invalid }, /* @__PURE__ */ React16.createElement(DropdownButtonText, { ...valueProps }, state.selectedItem ? state.selectedItem.rendered : props.placeholder), /* @__PURE__ */ React16.createElement(Icon_default, { name: "16/Menu" })), state.isOpen && /* @__PURE__ */ React16.createElement(DropdownPopover, { open: state.isOpen, onClose: () => state.close() }, /* @__PURE__ */ React16.createElement(Listbox_default, { ...menuProps, state, mode }))), hasAssertiveText && /* @__PURE__ */ React16.createElement(
+    AssertiveText,
+    {
+      invalid,
+      ...invalid ? errorMessageProps : descriptionProps
+    },
+    assertiveText
+  ));
+};
+var DropdownSelector_default = DropdownSelector;
+var DropdownSelectorItem = Item;
+var DropdownSelectorRoot = styled14.div`
+  position: relative;
+  display: inline-block;
+
+  ${disabledSelector4} {
+    cursor: default;
+    ${theme((o) => o.disabled)}
+  }
+`;
+var DropdownFieldLabel = styled14(FieldLabel_default)`
+  width: 100%;
+
+  ${theme((o) => o.margin.bottom(8))}
+`;
+var DropdownButtonWrapper = styled14.div`
+  position: relative;
+`;
+var DropdownButton = styled14.button`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  height: 40px;
+  width: 288px;
+  box-sizing: border-box;
+  cursor: pointer;
+
+  ${disabledSelector4} {
+    cursor: default;
+  }
+
+  ${({ invalid }) => theme((o) => [
+  o.border.default,
+  o.padding.horizontal(8),
+  o.outline.default.focus,
+  o.bg.surface3,
+  o.borderRadius(4),
+  invalid && o.outline.assertive
+])}
+`;
+var DropdownButtonText = styled14.span`
+  text-align: left;
+
+  ${theme((o) => [o.typography(14), o.font.text2])}
+`;
+var AssertiveText = styled14.div`
+  ${({ invalid }) => theme((o) => [
+  o.typography(14),
+  o.margin.top(8),
+  invalid && o.font.assertive
+])}
+`;
+var DropdownPopover = styled14(Popover_default)`
+  position: absolute;
+  width: 100%;
+
+  top: 100%;
+  margin-top: 2px;
+`;
+
+// src/components/SegmentedControl/index.tsx
+import React18, { forwardRef, memo as memo3, useMemo as useMemo5, useRef as useRef8 } from "react";
+import { useRadioGroupState } from "react-stately";
+import {
+  useRadio,
+  useRadioGroup
+} from "@react-aria/radio";
+import styled15 from "styled-components";
+import { disabledSelector as disabledSelector5 } from "@charcoal-ui/utils";
+
+// src/components/SegmentedControl/RadioGroupContext.tsx
+import React17, { createContext as createContext2, useContext as useContext5 } from "react";
+var RadioContext = createContext2(null);
+var RadioProvider = ({
+  value,
+  children
+}) => {
+  return /* @__PURE__ */ React17.createElement(RadioContext.Provider, { value }, children);
+};
+var useRadioContext = () => {
+  const state = useContext5(RadioContext);
+  if (state === null)
+    throw new Error("`<RadioProvider>` is not likely mounted.");
+  return state;
+};
+
+// src/components/SegmentedControl/index.tsx
+var SegmentedControl = forwardRef(
+  function SegmentedControlInner(props, ref) {
+    const ariaRadioGroupProps = useMemo5(
+      () => ({
+        ...props,
+        isDisabled: props.disabled,
+        isReadOnly: props.readonly,
+        isRequired: props.required
+      }),
+      [props]
+    );
+    const state = useRadioGroupState(ariaRadioGroupProps);
+    const { radioGroupProps } = useRadioGroup(ariaRadioGroupProps, state);
+    const segmentedControlItems = useMemo5(() => {
+      return props.data.map(
+        (d) => typeof d === "string" ? { value: d, label: d } : d
+      );
+    }, [props.data]);
+    return /* @__PURE__ */ React18.createElement(SegmentedControlRoot, { ref, ...radioGroupProps }, /* @__PURE__ */ React18.createElement(RadioProvider, { value: state }, segmentedControlItems.map((item) => /* @__PURE__ */ React18.createElement(
+      Segmented,
+      {
+        key: item.value,
+        value: item.value,
+        disabled: item.disabled
+      },
+      item.label
+    ))));
+  }
+);
+var SegmentedControl_default = memo3(SegmentedControl);
+var Segmented = ({ children, ...props }) => {
+  const state = useRadioContext();
+  const ref = useRef8(null);
+  const ariaRadioProps = useMemo5(
+    () => ({ ...props, isDisabled: props.disabled }),
+    [props]
+  );
+  const { inputProps, isDisabled, isSelected } = useRadio(
+    ariaRadioProps,
+    state,
+    ref
+  );
+  return /* @__PURE__ */ React18.createElement(
+    SegmentedRoot,
+    {
+      "aria-disabled": isDisabled || state.isReadOnly,
+      checked: isSelected
+    },
+    /* @__PURE__ */ React18.createElement(SegmentedInput, { ...inputProps, ref }),
+    /* @__PURE__ */ React18.createElement(RadioLabel2, null, /* @__PURE__ */ React18.createElement(SegmentedLabelInner, null, children))
+  );
+};
+var SegmentedControlRoot = styled15.div`
+  display: inline-flex;
+  align-items: center;
+
+  ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
+`;
+var SegmentedRoot = styled15.label`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  height: 32px;
+
+  ${disabledSelector5} {
+    cursor: default;
+  }
+
+  ${({ checked }) => theme((o) => [
+  o.padding.horizontal(16),
+  o.borderRadius(16),
+  o.disabled,
+  checked === true && o.bg.brand,
+  checked === true ? o.font.text5 : o.font.text2
+])}
+`;
+var SegmentedInput = styled15.input`
+  position: absolute;
+
+  height: 0px;
+  width: 0px;
+  padding: 0;
+  margin: 0;
+
+  appearance: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  opacity: 0;
+`;
+var RadioLabel2 = styled15.div`
+  background: transparent;
+  display: flex;
+  align-items: center;
+  height: 22px;
+`;
+var SegmentedLabelInner = styled15.div`
+  ${theme((o) => [o.typography(14)])}
+`;
+
+// src/components/Checkbox/index.tsx
+import React19, { forwardRef as forwardRef2, memo as memo4, useMemo as useMemo6 } from "react";
+import styled16, { css as css6 } from "styled-components";
+import { useCheckbox } from "@react-aria/checkbox";
+import { useToggleState as useToggleState2 } from "react-stately";
+import { disabledSelector as disabledSelector6, px as px5 } from "@charcoal-ui/utils";
+var Checkbox = forwardRef2(
+  function CheckboxInner(props, ref) {
+    const ariaCheckboxProps = useMemo6(
+      () => ({
+        ...props,
+        isSelected: props.checked,
+        defaultSelected: props.defaultChecked,
+        "aria-label": "children" in props ? void 0 : props.label,
+        isDisabled: props.disabled
+      }),
+      [props]
+    );
+    const state = useToggleState2(ariaCheckboxProps);
+    const objectRef = $df56164dff5785e2$export$4338b53315abf666(ref);
+    const { inputProps } = useCheckbox(ariaCheckboxProps, state, objectRef);
+    const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
+    return /* @__PURE__ */ React19.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ React19.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ React19.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ React19.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 })), "children" in props && /* @__PURE__ */ React19.createElement(InputLabel, null, props.children));
+  }
+);
+var Checkbox_default = memo4(Checkbox);
+var hiddenCss = css6`
+  visibility: hidden;
+`;
+var InputRoot = styled16.label`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  ${disabledSelector6} {
+    cursor: default;
+  }
+
+  gap: ${({ theme: theme4 }) => px5(theme4.spacing[4])};
+  ${theme((o) => [o.disabled])}
+`;
+var CheckboxInput = styled16.input`
+  &[type='checkbox'] {
+    appearance: none;
+    display: block;
+    cursor: pointer;
+    margin: 0;
+    width: 20px;
+    height: 20px;
+
+    &:checked {
+      ${theme((o) => o.bg.brand.hover.press)}
+    }
+    &:not(:checked) {
+      border-width: 2px;
+      border-style: solid;
+      border-color: ${({ theme: theme4 }) => theme4.color.text4};
+    }
+    ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
+  }
+`;
+var CheckboxInputOverlay = styled16.div`
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${theme((o) => [o.width.px(24), o.height.px(24), o.font.text5])}
+
+  ${({ checked }) => checked !== true && hiddenCss};
+`;
+var InputLabel = styled16.div`
+  ${theme((o) => [o.typography(14)])}
+`;
+
+// src/components/TagItem/index.tsx
+import React20, {
+  forwardRef as forwardRef3,
+  memo as memo5,
+  useMemo as useMemo7
+} from "react";
+import styled17, { css as css7 } from "styled-components";
+import { disabledSelector as disabledSelector7, px as px6 } from "@charcoal-ui/utils";
+import { useButton as useButton2 } from "@react-aria/button";
+var sizeMap = {
+  S: 32,
+  M: 40
+};
+var TagItem = forwardRef3(
+  function TagItemInner({
+    label,
+    translatedLabel,
+    bgColor = "#7ACCB1",
+    bgImage,
+    size = "M",
+    disabled,
+    status = "default",
+    ...props
+  }, _ref) {
+    const ref = $df56164dff5785e2$export$4338b53315abf666(_ref);
+    const ariaButtonProps = useMemo7(
+      () => ({
+        elementType: "a",
+        isDisabled: disabled,
+        ...props
+      }),
+      [disabled, props]
+    );
+    const { buttonProps } = useButton2(ariaButtonProps, ref);
+    const hasTranslatedLabel = translatedLabel !== void 0 && translatedLabel.length > 0;
+    return /* @__PURE__ */ React20.createElement(
+      TagItemRoot,
+      {
+        ref,
+        size: hasTranslatedLabel ? "M" : size,
+        status,
+        ...buttonProps
+      },
+      /* @__PURE__ */ React20.createElement(Background, { bgColor, bgImage }),
+      /* @__PURE__ */ React20.createElement(Inner, null, /* @__PURE__ */ React20.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ React20.createElement(TranslatedLabel, null, /* @__PURE__ */ React20.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ React20.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ React20.createElement(Icon_default, { name: "16/Remove" }))
+    );
+  }
+);
+var TagItem_default = memo5(TagItem);
+var TagItemRoot = styled17.a`
+  isolation: isolate;
+  position: relative;
+  height: ${({ size }) => sizeMap[size]}px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  cursor: pointer;
+  overflow: hidden;
+
+  ${({ size, status }) => theme((o) => [
+  o.outline.default.focus,
+  o.borderRadius(4),
+  status !== "active" && size === "M" && o.padding.horizontal(24),
+  status !== "active" && size === "S" && o.padding.horizontal(16),
+  status === "inactive" && o.bg.surface3,
+  status === "inactive" ? o.font.text2 : o.font.text5,
+  ...status === "active" ? [o.padding.left(16), o.padding.right(8)] : []
+])}
+
+  ${disabledSelector7} {
+    ${theme((o) => [o.disabled])}
+    cursor: default;
+  }
+`;
+var Background = styled17.div`
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+
+  background-color: ${({ bgColor }) => bgColor};
+
+  ${({ bgImage }) => bgImage !== void 0 && css7`
+      ${theme((o) => [o.bg.surface4])}
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-position: center;
+        background-size: cover;
+        background-image: url(${bgImage});
+        mix-blend-mode: overlay;
+      }
+    `}
+`;
+var Inner = styled17.div`
+  display: inline-flex;
+  gap: ${({ theme: theme4 }) => px6(theme4.spacing[8])};
+  align-items: center;
+  z-index: 2;
+`;
+var labelCSS = css7`
+  ${theme((o) => [o.typography(14).bold])}
+`;
+var translateLabelCSS = css7`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  font-size: 10px;
+`;
+var LabelWrapper = styled17.div`
+  ${({ isTranslate }) => isTranslate ?? false ? translateLabelCSS : labelCSS}
+`;
+var Label3 = styled17.span`
+  max-width: 152px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: inherit;
+  color: inherit;
+  line-height: inherit;
+`;
+var TranslatedLabel = styled17.div`
+  ${theme((o) => [o.typography(12).bold])}
+`;
+export {
+  Button_default as Button,
+  Checkbox_default as Checkbox,
+  Clickable_default as Clickable,
+  ComponentAbstraction,
+  DropdownSelector_default as DropdownSelector,
+  DropdownSelectorItem,
+  Icon_default as Icon,
+  IconButton_default as IconButton,
+  LoadingSpinner,
+  LoadingSpinnerIcon,
+  Modal,
+  ModalAlign,
+  ModalBody,
+  ModalButtons,
+  ModalHeader,
+  MultiSelect,
+  MultiSelectGroup,
+  OverlayProvider,
+  Radio,
+  RadioGroup,
+  SSRProvider,
+  SegmentedControl_default as SegmentedControl,
+  SwitchCheckbox as Switch,
+  TagItem_default as TagItem,
+  TextField_default as TextField,
+  useComponentAbstraction
+};
+//# sourceMappingURL=index.js.map