"use strict";
const styles_lib_components_TooltipRenderer_TooltipRenderer_cjs = require("../../TooltipRenderer/TooltipRenderer.cjs");
const sideEffects_lib_components_BraidProvider_BraidProvider_cjs = require("../../../../../side-effects/lib/components/BraidProvider/BraidProvider.cjs");
const styles_lib_components_Autosuggest_Autosuggest_cjs = require("../../Autosuggest/Autosuggest.cjs");
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const styles_lib_components_Button_Button_cjs = require("../../Button/Button.cjs");
const styles_lib_components_Accordion_AccordionItem_cjs = require("../../Accordion/AccordionItem.cjs");
const assert = require("assert");
const matchHighlights = require("autosuggest-highlight/match/index.js");
const styles_lib_components_Box_Box_cjs = require("../../Box/Box.cjs");
const styles_lib_components_Accordion_Accordion_cjs = require("../../Accordion/Accordion.cjs");
const clsx = require("clsx");
const styles_lib_components_Box_BackgroundContext_cjs = require("../../Box/BackgroundContext.cjs");
const styles_lib_css_atoms_atoms_cjs = require("../../../css/atoms/atoms.cjs");
const styles_lib_components_Box_ColoredBox_cjs = require("../../Box/ColoredBox.cjs");
const dedent = require("dedent");
const styles_lib_components_Column_Column_cjs = require("../../Column/Column.cjs");
const styles_lib_components_Hidden_Hidden_cjs = require("../../Hidden/Hidden.cjs");
const styles_lib_components_private_Keyline_Keyline_cjs = require("../Keyline/Keyline.cjs");
const styles_lib_components_private_InlineField_InlineField_cjs = require("../InlineField/InlineField.cjs");
const styles_lib_components_private_InlineField_StyledInput_cjs = require("../InlineField/StyledInput.cjs");
const styles_lib_components_private_Modal_Modal_cjs = require("../Modal/Modal.cjs");
const styles_lib_components_TextLink_TextLink_cjs = require("../../TextLink/TextLink.cjs");
const styles_lib_components_private_AvoidWidowIcon_AvoidWidowIcon_cjs = require("../AvoidWidowIcon/AvoidWidowIcon.cjs");
const styles_lib_components_Heading_Heading_cjs = require("../../Heading/Heading.cjs");
const styles_lib_components_icons_IconChevron_IconChevron_cjs = require("../../icons/IconChevron/IconChevron.cjs");
const styles_lib_components_MenuItem_useMenuItem_cjs = require("../../MenuItem/useMenuItem.cjs");
const styles_lib_components_Pagination_Pagination_cjs = require("../../Pagination/Pagination.cjs");
const styles_lib_components_Columns_Columns_cjs = require("../../Columns/Columns.cjs");
const styles_lib_components_private_Field_Field_cjs = require("../Field/Field.cjs");
const styles_lib_components_MonthPicker_MonthPicker_cjs = require("../../MonthPicker/MonthPicker.cjs");
const styles_lib_components_Stack_Stack_cjs = require("../../Stack/Stack.cjs");
const styles_lib_components_Tabs_Tab_cjs = require("../../Tabs/Tab.cjs");
const styles_lib_components_Tabs_TabPanel_cjs = require("../../Tabs/TabPanel.cjs");
const styles_lib_components_Textarea_Textarea_cjs = require("../../Textarea/Textarea.cjs");
const styles_lib_components_useToast_Toast_cjs = require("../../useToast/Toast.cjs");
const styles_lib_components_Tabs_Tabs_cjs = require("../../Tabs/Tabs.cjs");
const styles_lib_components_private_Placeholder_Placeholder_css_cjs = require("./Placeholder.css.cjs");
const styles_lib_themes_wireframe_wireframeTheme_css_cjs = require("../../../themes/wireframe/wireframeTheme.css.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
const matchHighlights__default = /* @__PURE__ */ _interopDefaultCompat(matchHighlights);
const clsx__default = /* @__PURE__ */ _interopDefaultCompat(clsx);
const dedent__default = /* @__PURE__ */ _interopDefaultCompat(dedent);
const ThemeNameConsumer = ({ children }) => children(styles_lib_components_TooltipRenderer_TooltipRenderer_cjs.useThemeName());
const useColor = () => sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().color;
const useBreakpoint = () => {
  if (process.env.NODE_ENV !== "production") {
    console.warn(
      `'useBreakpoint' has been deprecated. Use 'useResponsiveValue' instead: https://seek-oss.github.io/braid-design-system/components/useResponsiveValue`
    );
  }
  return styles_lib_components_Autosuggest_Autosuggest_cjs.useResponsiveValue()({
    mobile: "mobile",
    tablet: "tablet",
    desktop: "desktop"
  });
};
const Actions = ({ size, data, children }) => {
  const contextValue = React.useMemo(() => ({ size }), [size]);
  return /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Button_Button_cjs.ActionsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Inline, { collapseBelow: "tablet", space: "xsmall", data, children }) });
};
function matchSuggestion(suggestion, query) {
  const groupMatches = matchHighlights__default.default(
    suggestion.label ?? suggestion.text,
    query
  );
  return !groupMatches.length ? null : {
    ...suggestion,
    highlights: groupMatches.map(([start, end]) => ({ start, end }))
  };
}
function filterSuggestions(...args) {
  assert__default.default(
    [1, 2].includes(args.length),
    `Invalid number of arguments passed to "filterSuggestions". Expected 1 or 2, got ${args.length}`
  );
  if (args.length === 1) {
    return (inputValue) => filter(args[0], inputValue);
  } else if (args.length === 2) {
    return filter(args[0], args[1]);
  }
  function filter(suggestions, inputValue) {
    assert__default.default(
      typeof inputValue === "string" || typeof inputValue === "object" && inputValue !== null && "text" in inputValue,
      'The second argument to "filterSuggestions" must be a string or an Autosuggest value object, e.g. { text: "Hello world" }'
    );
    const query = (typeof inputValue === "string" ? inputValue : inputValue.text).trim();
    if (query === "") {
      return suggestions;
    }
    const filteredSuggestions = [];
    suggestions.forEach((suggestion) => {
      if ("suggestions" in suggestion) {
        const filteredGroupSuggestions = [];
        suggestion.suggestions.forEach((groupSuggestion) => {
          const filteredSuggestion = matchSuggestion(groupSuggestion, query);
          if (filteredSuggestion) {
            filteredGroupSuggestions.push(filteredSuggestion);
          }
        });
        if (filteredGroupSuggestions.length) {
          filteredSuggestions.push({
            ...suggestion,
            suggestions: filteredGroupSuggestions
          });
        }
      } else {
        const filteredSuggestion = matchSuggestion(suggestion, query);
        if (filteredSuggestion) {
          filteredSuggestions.push(filteredSuggestion);
        }
      }
    });
    return filteredSuggestions;
  }
}
const validTones = [
  "promote",
  "info",
  "neutral",
  "positive",
  "caution",
  "critical"
];
const lightModeBackgroundForTone = {
  positive: "positiveLight",
  critical: "criticalLight",
  info: "infoLight",
  promote: "promoteLight",
  neutral: "neutralLight",
  caution: "cautionLight"
};
const verticalPadding = "xxsmall";
const Badge = React.forwardRef(
  ({
    tone = "info",
    weight = "regular",
    bleedY = false,
    title,
    children,
    id,
    data,
    tabIndex,
    "aria-describedby": ariaDescribedBy,
    ...restProps
  }, ref) => {
    assert__default.default(
      validTones.indexOf(tone) >= 0,
      `Badge tone of "${tone}" is not valid.`
    );
    assert__default.default(
      React.Children.toArray(children).every(
        (child) => ["string", "number"].includes(typeof child)
      ),
      "Badge may only contain strings or numbers"
    );
    const content = /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Box_Box_cjs.Box,
      {
        component: "span",
        display: "flex",
        cursor: "default",
        ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
        children: /* @__PURE__ */ jsxRuntime.jsx(
          styles_lib_components_Box_Box_cjs.Box,
          {
            component: "span",
            id,
            ref,
            tabIndex,
            "aria-describedby": ariaDescribedBy,
            title: title ?? (!ariaDescribedBy ? children : void 0),
            background: weight === "strong" ? tone : lightModeBackgroundForTone[tone],
            paddingY: verticalPadding,
            paddingX: "xsmall",
            borderRadius: "standard",
            overflow: "hidden",
            children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { size: "xsmall", weight: "medium", maxLines: 1, children })
          }
        )
      }
    );
    return bleedY ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Button_Button_cjs.Bleed, { component: "span", vertical: verticalPadding, children: content }) : content;
  }
);
Badge.displayName = "Badge";
Badge.__isBadge__ = true;
const ColoredBoxRenderer = ({
  background,
  boxShadow,
  children,
  className
}) => {
  const { backgroundContext, classList } = styles_lib_components_Box_ColoredBox_cjs.useColoredBoxClasses({
    background,
    boxShadow
  });
  const element = children(clsx__default.default(className, classList));
  return backgroundContext ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_BackgroundContext_cjs.BackgroundProvider, { value: backgroundContext, children: element }) : element;
};
const BoxRenderer = ({
  children,
  component = "div",
  className,
  background,
  boxShadow,
  ...props
}) => {
  const classes = clsx__default.default(className, styles_lib_css_atoms_atoms_cjs.atoms({ reset: component, ...props }));
  return background || boxShadow ? /* @__PURE__ */ jsxRuntime.jsx(
    ColoredBoxRenderer,
    {
      background,
      boxShadow,
      className: classes,
      children
    }
  ) : children(classes);
};
const ButtonLink = React.forwardRef(
  ({
    children,
    size,
    tone,
    variant,
    bleedY,
    bleed,
    icon,
    iconPosition,
    loading,
    data,
    ...restProps
  }, ref) => {
    const LinkComponent = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useLinkComponent(ref);
    if (process.env.NODE_ENV !== "production") {
      if (typeof bleedY !== "undefined") {
        console.warn(
          dedent__default.default`
            The "bleedY" prop has been deprecated and will be removed in a future version. Use "bleed" instead.
               <Button
              %c-   bleedY
              %c+   bleed
               %c/>
          `,
          "color: red",
          "color: green",
          "color: inherit"
        );
      }
    }
    return /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Button_Button_cjs.ButtonContainer, { bleed, variant, children: /* @__PURE__ */ jsxRuntime.jsxs(
      styles_lib_components_Box_Box_cjs.Box,
      {
        component: LinkComponent,
        ref,
        ...restProps,
        ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: false }),
        ...styles_lib_components_Button_Button_cjs.useButtonStyles({
          variant,
          tone,
          size,
          bleed: bleed || bleedY,
          loading
        }),
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Button_Button_cjs.ButtonOverlays, { variant, tone }),
          /* @__PURE__ */ jsxRuntime.jsx(
            styles_lib_components_Button_Button_cjs.ButtonText,
            {
              variant,
              tone,
              size,
              loading,
              icon,
              iconPosition,
              bleed,
              children
            }
          )
        ]
      }
    ) });
  }
);
ButtonLink.displayName = "ButtonLink";
const validCardComponents = [
  "div",
  "article",
  "aside",
  "details",
  "main",
  "section"
];
const borderRadius = "large";
const Card = ({
  children,
  component = "div",
  tone,
  data,
  height,
  ...restProps
}) => {
  assert__default.default(
    validCardComponents.includes(component),
    `Invalid Card component: '${component}'. Should be one of [${validCardComponents.map((c) => `'${c}'`).join(", ")}]`
  );
  const isLegacyTheme = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy;
  let resolvedRounding;
  if ("rounded" in restProps) {
    resolvedRounding = borderRadius;
  } else if ("roundedAbove" in restProps) {
    const [roundedOnMobile, roundedOnTablet, roundedOnDesktop, roundedOnWide] = styles_lib_components_Hidden_Hidden_cjs.resolveResponsiveRangeProps({ above: restProps.roundedAbove });
    resolvedRounding = styles_lib_components_Column_Column_cjs.optimizeResponsiveArray([
      roundedOnMobile ? borderRadius : "none",
      roundedOnTablet ? borderRadius : "none",
      roundedOnDesktop ? borderRadius : "none",
      roundedOnWide ? borderRadius : "none"
    ]);
  }
  const roundingForTheme = !isLegacyTheme ? borderRadius : resolvedRounding;
  return /* @__PURE__ */ jsxRuntime.jsxs(
    styles_lib_components_Box_Box_cjs.Box,
    {
      component,
      position: "relative",
      background: "surface",
      padding: "gutter",
      borderRadius: roundingForTheme,
      boxShadow: !isLegacyTheme ? "borderNeutralLight" : void 0,
      height: height === "full" ? height : void 0,
      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
      children: [
        tone ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_private_Keyline_Keyline_cjs.Keyline, { tone, borderRadius: roundingForTheme }) : null,
        children
      ]
    }
  );
};
const resolveCheckedGroup = (values) => values.some((value) => value !== values[0]) ? "mixed" : values[0] ?? false;
const Checkbox = React.forwardRef(
  ({ checked, ...restProps }, ref) => {
    const calculatedChecked = Array.isArray(checked) ? resolveCheckedGroup(checked) : checked;
    return /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_private_InlineField_InlineField_cjs.InlineField,
      {
        ...restProps,
        checked: calculatedChecked,
        type: "checkbox",
        ref
      }
    );
  }
);
Checkbox.displayName = "Checkbox";
const CheckboxStandalone = React.forwardRef(({ checked, ...restProps }, ref) => {
  const calculatedChecked = Array.isArray(checked) ? resolveCheckedGroup(checked) : checked;
  return /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { position: "relative", children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.TextContext.Provider, { value: null, children: /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_private_InlineField_StyledInput_cjs.StyledInput,
    {
      ...restProps,
      checked: calculatedChecked,
      type: "checkbox",
      ref
    }
  ) }) });
});
const defaultWidth$1 = "small";
const modalStyle$1 = {
  position: "center",
  headingLevel: "3"
};
const Dialog = ({ width = defaultWidth$1, ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_private_Modal_Modal_cjs.Modal, { width, ...restProps, ...modalStyle$1 });
const noop = () => {
};
const TextLinkButton = ({
  weight,
  hitArea,
  id,
  onClick = noop,
  data,
  children,
  "aria-controls": ariaControls,
  "aria-expanded": ariaExpanded,
  "aria-describedby": ariaDescribedBy,
  "aria-label": ariaLabel,
  tabIndex,
  icon,
  iconPosition,
  ...restProps
}) => {
  const buttonRef = React.useRef(null);
  const classes = styles_lib_components_TextLink_TextLink_cjs.useLinkStyles({
    reset: false,
    weight,
    hitArea
  });
  const handleKeyboard = React.useCallback(
    (event) => {
      var _a;
      if (event.key === "Enter" || event.key === " ") {
        event.preventDefault();
        (_a = buttonRef.current) == null ? void 0 : _a.click();
      }
    },
    [buttonRef]
  );
  return /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_Box_Box_cjs.Box,
    {
      ref: buttonRef,
      role: "button",
      tabIndex: tabIndex ?? 0,
      component: "span",
      onClick,
      onKeyDown: handleKeyboard,
      "aria-controls": ariaControls,
      "aria-expanded": ariaExpanded,
      "aria-describedby": ariaDescribedBy,
      "aria-label": ariaLabel,
      id,
      className: classes,
      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
      children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_TextLink_TextLink_cjs.TextLinkContent, { icon, iconPosition, children })
    }
  );
};
const Disclosure = ({
  id,
  expandLabel,
  collapseLabel = expandLabel,
  space = "medium",
  children,
  data,
  weight,
  ...restProps
}) => {
  assert__default.default(
    typeof expandLabel === "undefined" || typeof expandLabel === "string",
    "'expandLabel' must be a string"
  );
  assert__default.default(
    typeof collapseLabel === "undefined" || typeof collapseLabel === "string",
    "'collapseLabel' must be a string"
  );
  const textContext = React.useContext(styles_lib_components_Accordion_AccordionItem_cjs.TextContext);
  const headingContext = React.useContext(styles_lib_components_Heading_Heading_cjs.HeadingContext);
  const isInline = Boolean(textContext || headingContext);
  const { expanded, buttonProps, contentProps } = styles_lib_components_Accordion_AccordionItem_cjs.useDisclosure({
    id,
    ...restProps.expanded !== void 0 ? {
      onToggle: restProps.onToggle,
      expanded: restProps.expanded
    } : {
      onToggle: restProps.onToggle
    }
  });
  const trigger = /* @__PURE__ */ jsxRuntime.jsxs(TextLinkButton, { hitArea: "large", weight, ...buttonProps, children: [
    expanded ? collapseLabel : expandLabel,
    /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_private_AvoidWidowIcon_AvoidWidowIcon_cjs.AvoidWidowIcon, { iconPosition: "trailing", children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_icons_IconChevron_IconChevron_cjs.IconChevron, { direction: expanded ? "up" : "down", alignY: "lowercase" }) })
  ] });
  const component = isInline ? "span" : "div";
  return /* @__PURE__ */ jsxRuntime.jsxs(
    styles_lib_components_Box_Box_cjs.Box,
    {
      component,
      display: isInline ? "inline" : void 0,
      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
      children: [
        /* @__PURE__ */ jsxRuntime.jsx(
          styles_lib_components_Box_Box_cjs.Box,
          {
            component,
            display: isInline ? "inline" : void 0,
            userSelect: "none",
            children: isInline ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
              " ",
              trigger
            ] }) : /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { children: trigger })
          }
        ),
        /* @__PURE__ */ jsxRuntime.jsx(
          styles_lib_components_Box_Box_cjs.Box,
          {
            component,
            paddingTop: space,
            display: expanded ? "block" : "none",
            ...contentProps,
            children
          }
        )
      ]
    }
  );
};
const validWidths = ["small", "medium", "large"];
const validPositions = ["left", "right"];
const defaultWidth = "medium";
const defaultPosition = "right";
const modalStyle = {
  headingLevel: "2",
  illustration: void 0
};
const Drawer = ({
  width = defaultWidth,
  position = defaultPosition,
  ...restProps
}) => {
  assert__default.default(validWidths.indexOf(width) >= 0, `Invalid width: ${width}`);
  assert__default.default(
    validPositions.indexOf(position) >= 0,
    `Invalid position: ${position}`
  );
  return /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_private_Modal_Modal_cjs.Modal, { width, position, ...restProps, ...modalStyle });
};
const MenuItem = ({
  children,
  onClick,
  data,
  tone,
  badge,
  icon,
  id
}) => {
  const { menuItemProps, MenuItemChildren } = styles_lib_components_MenuItem_useMenuItem_cjs.useMenuItem({
    tone,
    onClick,
    data,
    id
  });
  return /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { ...menuItemProps, component: "button", type: "button", children: /* @__PURE__ */ jsxRuntime.jsx(MenuItemChildren, { tone, icon, badge, children }) });
};
MenuItem.__isMenuItem__ = true;
const MenuItemLink = ({
  href,
  target,
  rel,
  onClick,
  tone,
  data,
  children,
  badge,
  icon,
  id
}) => {
  const { menuItemProps, MenuItemChildren } = styles_lib_components_MenuItem_useMenuItem_cjs.useMenuItem({
    displayName: "MenuItemLink",
    onClick,
    tone,
    data,
    id
  });
  return /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_Box_Box_cjs.Box,
    {
      component: styles_lib_components_Pagination_Pagination_cjs.Link,
      ...menuItemProps,
      href,
      target,
      rel,
      children: /* @__PURE__ */ jsxRuntime.jsx(MenuItemChildren, { tone, icon, badge, children })
    }
  );
};
MenuItemLink.__isMenuItem__ = true;
const icons = {
  positive: styles_lib_components_Accordion_AccordionItem_cjs.IconPositive,
  info: styles_lib_components_Accordion_AccordionItem_cjs.IconInfo,
  promote: styles_lib_components_Accordion_AccordionItem_cjs.IconPromote,
  critical: styles_lib_components_Accordion_AccordionItem_cjs.IconCritical
};
const Notice = ({
  tone = "info",
  data,
  children,
  ...restProps
}) => {
  const Icon = icons[tone];
  return /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_Box_Box_cjs.Box,
    {
      role: "alert",
      "aria-live": "polite",
      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
      children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.DefaultTextPropsProvider, { tone, children: /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Columns_Columns_cjs.Columns, { space: "xsmall", children: [
        /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }) }),
        /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { children })
      ] }) })
    }
  );
};
const PasswordField = React.forwardRef(
  ({
    value,
    onChange,
    onBlur,
    onFocus,
    placeholder,
    disabled,
    onVisibilityToggle,
    visibilityToggleLabel = "Toggle password visibility",
    id,
    ...restProps
  }, forwardedRef) => {
    const defaultRef = React.useRef(null);
    const inputRef = forwardedRef || defaultRef;
    const [visible, setVisibile] = React.useState(false);
    const visibilityHandler = React.useCallback(
      (event) => {
        if (event.button !== 0) {
          return;
        }
        const newState = !visible;
        setVisibile(newState);
        if (typeof onVisibilityToggle === "function") {
          onVisibilityToggle(newState);
        }
        if (inputRef && typeof inputRef === "object" && inputRef.current) {
          inputRef.current.focus();
        }
      },
      [visible, onVisibilityToggle, inputRef]
    );
    return /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_private_Field_Field_cjs.Field,
      {
        ...restProps,
        id,
        value,
        icon: void 0,
        prefix: void 0,
        disabled,
        secondaryMessage: null,
        alwaysShowSecondaryIcon: !disabled,
        secondaryIcon: disabled ? null : /* @__PURE__ */ jsxRuntime.jsx(
          styles_lib_components_Autosuggest_Autosuggest_cjs.FieldButtonIcon,
          {
            id: `${id}-toggle`,
            label: visibilityToggleLabel,
            onMouseDown: visibilityHandler,
            icon: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconVisibility, { hidden: visible })
          }
        ),
        children: (overlays, fieldProps, _, secondaryIcon) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            styles_lib_components_Box_Box_cjs.Box,
            {
              component: "input",
              type: visible ? "text" : "password",
              value,
              onChange,
              onFocus,
              onBlur,
              placeholder: !disabled ? placeholder : void 0,
              ...fieldProps,
              ref: inputRef
            }
          ),
          overlays,
          secondaryIcon
        ] })
      }
    );
  }
);
PasswordField.displayName = "PasswordField";
const RadioGroupContext = React.createContext(
  null
);
const RadioItemContext = React.createContext(null);
const Radio = React.forwardRef((props, ref) => {
  const radioGroupContext = React.useContext(RadioGroupContext);
  assert__default.default(
    radioGroupContext === null,
    'The "Radio" component has been deprecated. Use a "RadioItem" instead.'
  );
  if (process.env.NODE_ENV !== "production") {
    console.warn(
      dedent__default.default`
        The "Radio" component has been deprecated and will be removed in a future version. Use "RadioGroup" with "RadioItem" instead.
        %c
        - <Radio name="count" label="One" value="1" onChange={...} />
        - <Radio name="count" label="Two" value="2" onChange={...} checked />
        - <Radio name="count" label="Three" value="3" onChange={...}  />
        %c
        + <RadioGroup name="count" value="2" onChange={...}>
        +   <RadioItem label="One" value="1" />
        +   <RadioItem label="Two" value="2" />
        +   <RadioItem label="Three" value="3" />
        + </RadioGroup>
      `,
      "color: red",
      "color: green"
    );
  }
  return /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_private_InlineField_InlineField_cjs.InlineField,
    {
      ...props,
      inList: false,
      type: "radio",
      message: null,
      reserveMessageSpace: false,
      required: void 0,
      size: void 0,
      ref
    }
  );
});
Radio.displayName = "Radio";
const RadioItem = React.forwardRef(
  (props, ref) => {
    const radioGroupContext = React.useContext(RadioGroupContext);
    const radioItemContext = React.useContext(RadioItemContext);
    assert__default.default(
      radioGroupContext !== null && radioItemContext !== null,
      "All `RadioItem` buttons must be within a `RadioGroup`."
    );
    assert__default.default(
      typeof props.value !== "undefined" && props.value !== "",
      "All `RadioItem` buttons must have an associated `value`"
    );
    const checked = radioGroupContext.value === props.value;
    const isFirstRadioWithNoCheckedValueInGroup = radioItemContext === 0 && !Boolean(radioGroupContext.value);
    const tababble = checked || isFirstRadioWithNoCheckedValueInGroup;
    return /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_private_InlineField_InlineField_cjs.InlineField,
      {
        ...props,
        id: `${radioGroupContext.id}_${radioItemContext}`,
        name: radioGroupContext.name,
        checked,
        onChange: radioGroupContext.onChange,
        tone: radioGroupContext.tone === "critical" || radioGroupContext.tone === "neutral" ? radioGroupContext.tone : void 0,
        size: radioGroupContext.size,
        disabled: radioGroupContext.disabled || props.disabled,
        "aria-describedby": radioGroupContext["aria-describedby"],
        tabIndex: tababble ? 0 : -1,
        inList: true,
        type: "radio",
        message: null,
        reserveMessageSpace: false,
        required: void 0,
        ref
      }
    );
  }
);
RadioItem.displayName = "RadioItem";
const stackSpaceForSize = {
  small: "small",
  standard: "medium"
};
const RadioGroup = ({
  children,
  id,
  value,
  name,
  onChange,
  disabled,
  tone,
  size,
  ...props
}) => {
  const items = styles_lib_components_Accordion_AccordionItem_cjs.flattenChildren(children);
  const labelSpace = props.description ? "xxsmall" : "xsmall";
  assert__default.default(
    items.every(
      (item) => typeof item === "object" && "type" in item && item.type === RadioItem
    ),
    "All child nodes within a RadioGroup must be a RadioItem: https://seek-oss.github.io/braid-design-system/components/RadioGroup"
  );
  return /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_MonthPicker_MonthPicker_cjs.FieldGroup,
    {
      id,
      ...props,
      disabled,
      tone,
      space: "small",
      role: "radiogroup",
      children: (fieldGroupProps) => /* @__PURE__ */ jsxRuntime.jsx(
        RadioGroupContext.Provider,
        {
          value: {
            id,
            value,
            name: name || id,
            onChange,
            disabled,
            tone,
            size,
            ...fieldGroupProps
          },
          children: /* @__PURE__ */ jsxRuntime.jsx(
            styles_lib_components_Box_Box_cjs.Box,
            {
              paddingTop: "label" in props ? labelSpace : void 0,
              paddingBottom: props.message || props.reserveMessageSpace ? "xsmall" : void 0,
              children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Stack_Stack_cjs.Stack, { space: stackSpaceForSize[size || "standard"], children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(RadioItemContext.Provider, { value: i, children: item }, i)) })
            }
          )
        }
      )
    }
  );
};
RadioGroup.displayName = "RadioGroup";
const TabPanels = ({
  renderInactivePanels = false,
  children
}) => {
  const tabsContext = React.useContext(styles_lib_components_Tabs_Tab_cjs.TabsContext);
  if (!tabsContext) {
    throw new Error("TabPanels rendered outside TabsProvider context");
  }
  const { dispatch } = tabsContext;
  const panelItems = [];
  const panels = styles_lib_components_Accordion_AccordionItem_cjs.flattenChildren(children).map((panel, index) => {
    assert__default.default(
      // @ts-expect-error
      typeof panel === "object" && panel.type.__isTabPanel__,
      "Only TabPanel elements can be direct children of a TabPanels"
    );
    panelItems.push(index);
    return /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_Tabs_TabPanel_cjs.TabPanelsContext.Provider,
      {
        value: {
          renderInactive: renderInactivePanels,
          panelIndex: index
        },
        children: panel
      },
      index
    );
  });
  React.useEffect(() => {
    dispatch({ type: styles_lib_components_Tabs_Tab_cjs.TAB_PANELS_UPDATED, panels: panelItems });
  }, [panelItems.join(), dispatch]);
  return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: panels });
};
const validTypes = {
  text: "text",
  password: "password",
  email: "email",
  search: "search",
  number: "number",
  tel: "tel",
  url: "url"
};
const defaultInputModesForType = {
  text: "text",
  password: "text",
  email: "email",
  search: "search",
  number: "numeric",
  tel: "tel",
  url: "url"
};
const TextField = React.forwardRef(
  ({
    value,
    type = "text",
    onChange,
    onBlur,
    onFocus,
    onClear,
    placeholder,
    characterLimit,
    id,
    clearLabel,
    inputMode,
    step,
    ...restProps
  }, forwardedRef) => {
    const defaultRef = React.useRef(null);
    const inputRef = forwardedRef || defaultRef;
    const clearable = Boolean(
      typeof onClear !== "undefined" && !restProps.disabled && typeof value === "string" && value.length > 0
    );
    return /* @__PURE__ */ jsxRuntime.jsx(
      styles_lib_components_private_Field_Field_cjs.Field,
      {
        ...restProps,
        id,
        value,
        secondaryMessage: characterLimit ? styles_lib_components_Textarea_Textarea_cjs.getCharacterLimitStatus({
          value,
          characterLimit
        }) : null,
        secondaryIcon: onClear ? /* @__PURE__ */ jsxRuntime.jsx(
          styles_lib_components_Autosuggest_Autosuggest_cjs.ClearField,
          {
            id: `${id}-clear`,
            hide: !clearable,
            onClear,
            label: clearLabel,
            inputRef
          }
        ) : null,
        children: (overlays, fieldProps, icon, secondaryIcon, prefix) => /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
          icon,
          prefix,
          /* @__PURE__ */ jsxRuntime.jsx(
            styles_lib_components_Box_Box_cjs.Box,
            {
              component: "input",
              type: validTypes[type],
              value,
              onChange,
              onFocus,
              onBlur,
              placeholder: !restProps.disabled ? placeholder : void 0,
              ...fieldProps,
              inputMode: inputMode || defaultInputModesForType[type],
              step,
              ref: inputRef
            }
          ),
          overlays,
          secondaryIcon
        ] })
      }
    );
  }
);
TextField.displayName = "TextField";
const animationTimeout = 300;
const entranceTransition = "transform 0.2s ease, opacity 0.2s ease";
const exitTransition = "opacity 0.1s ease";
const animate = (element, transforms, transition, done) => {
  const fallbackTimeout = setTimeout(() => {
    if (done) {
      done();
    }
  }, animationTimeout);
  transforms.forEach(({ property, from = "" }) => {
    element.style.setProperty(property, from);
  });
  element.style.setProperty("transition", "");
  const transitionEndHandler = (ev) => {
    if (ev.target !== element) {
      return;
    }
    element.style.setProperty("transition", "");
    if (done) {
      done();
    }
    element.removeEventListener("transitionend", transitionEndHandler);
    clearTimeout(fallbackTimeout);
  };
  element.addEventListener("transitionend", transitionEndHandler);
  window.requestAnimationFrame(() => {
    window.requestAnimationFrame(() => {
      element.style.setProperty("transition", transition);
      transforms.forEach(({ property, to = "" }) => {
        element.style.setProperty(property, to);
      });
    });
  });
};
const useFlipList = () => {
  const refs = React.useMemo(() => /* @__PURE__ */ new Map(), []);
  const positions = React.useMemo(() => /* @__PURE__ */ new Map(), []);
  styles_lib_components_Tabs_Tabs_cjs.useIsomorphicLayoutEffect(() => {
    const animations = [];
    Array.from(refs.entries()).forEach(([id, element]) => {
      if (element) {
        const prevTop = positions.get(id);
        const { top, height } = element.getBoundingClientRect();
        if (typeof prevTop === "number" && prevTop !== top) {
          animations.push({
            element,
            transition: entranceTransition,
            transforms: [
              {
                property: "transform",
                from: `translateY(${prevTop - top}px)`
              }
            ]
          });
        } else if (typeof prevTop !== "number") {
          animations.push({
            element,
            transition: entranceTransition,
            transforms: [
              {
                property: "transform",
                from: `translateY(${height}px)`
              },
              {
                property: "opacity",
                from: "0"
              }
            ]
          });
        }
        positions.set(id, element.getBoundingClientRect().top);
      } else {
        refs.delete(id);
      }
    });
    animations.forEach(({ element, transforms, transition }) => {
      animate(element, transforms, transition);
    });
  });
  const remove = React.useCallback(
    (id, cb) => {
      const element = refs.get(id);
      if (element) {
        animate(
          element,
          [
            {
              property: "opacity",
              to: "0"
            }
          ],
          exitTransition,
          cb
        );
      }
    },
    [refs]
  );
  const itemRef = React.useCallback(
    (id) => (ref) => {
      refs.set(id, ref);
    },
    [refs]
  );
  return {
    itemRef,
    remove
  };
};
const Toaster = ({ toasts, removeToast }) => {
  const { itemRef, remove } = useFlipList();
  const onClose = React.useCallback(
    (dedupeKey, id) => {
      remove(id, () => {
        removeToast(dedupeKey);
      });
    },
    [remove, removeToast]
  );
  return /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_Box_Box_cjs.Box,
    {
      position: "fixed",
      zIndex: "notification",
      width: "full",
      pointerEvents: "none",
      paddingX: "gutter",
      bottom: 0,
      children: toasts.map(({ id, ...rest }) => /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { paddingBottom: "small", children: /* @__PURE__ */ jsxRuntime.jsx(
        styles_lib_components_useToast_Toast_cjs.ToastComponent,
        {
          ref: itemRef(id),
          id,
          onClose,
          ...rest
        }
      ) }, id))
    }
  );
};
let toastCounter = 0;
const ToastControllerContext = React.createContext(null);
const QUEUE_TOAST = 0;
const REMOVE_TOAST = 1;
function reducer(state, action) {
  switch (action.type) {
    case QUEUE_TOAST: {
      const { toast } = action;
      const hasExistingToast = state.toasts.some(
        (t) => t.dedupeKey === toast.dedupeKey
      );
      if (hasExistingToast) {
        return {
          toasts: state.toasts.map((t) => {
            if (t.dedupeKey === toast.dedupeKey) {
              return {
                ...t,
                shouldRemove: true
              };
            }
            return t;
          }),
          queuedToasts: {
            ...state.queuedToasts,
            [toast.dedupeKey]: toast
          }
        };
      }
      return {
        ...state,
        toasts: [...state.toasts, action.toast]
      };
    }
    case REMOVE_TOAST: {
      const toasts = state.toasts.filter(
        ({ dedupeKey }) => dedupeKey !== action.dedupeKey
      );
      const queuedToast = state.queuedToasts[action.dedupeKey];
      if (queuedToast) {
        return {
          queuedToasts: {
            ...state.queuedToasts,
            [action.dedupeKey]: void 0
          },
          toasts: [...toasts, queuedToast]
        };
      }
      return {
        ...state,
        toasts
      };
    }
  }
}
const InternalToastProvider = ({ children }) => {
  const [{ toasts }, dispatch] = React.useReducer(reducer, {
    toasts: [],
    queuedToasts: {}
  });
  const addToast = React.useCallback(
    (toast) => dispatch({ type: QUEUE_TOAST, toast }),
    []
  );
  const removeToast = React.useCallback(
    (dedupeKey) => dispatch({ type: REMOVE_TOAST, dedupeKey }),
    []
  );
  return /* @__PURE__ */ jsxRuntime.jsxs(ToastControllerContext.Provider, { value: addToast, children: [
    children,
    /* @__PURE__ */ jsxRuntime.jsx(ToastPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(Toaster, { toasts, removeToast }) })
  ] });
};
const ToastProvider = ({ children }) => {
  const currentContext = React.useContext(ToastControllerContext);
  if (currentContext !== null) {
    return /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children });
  }
  return /* @__PURE__ */ jsxRuntime.jsx(InternalToastProvider, { children });
};
const ToastPortal = ({ children }) => {
  const [toastElement, setElement] = React.useState(null);
  React.useEffect(() => {
    const toastContainerId = "braid-toast-container";
    let element = document.getElementById(toastContainerId);
    if (!element) {
      element = document.createElement("div");
      element.setAttribute("id", toastContainerId);
      element.setAttribute("class", "");
      document.body.appendChild(element);
    }
    setElement(element);
  }, []);
  if (!toastElement) {
    return null;
  }
  return /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_TooltipRenderer_TooltipRenderer_cjs.BraidPortal, { container: toastElement, children });
};
const useToast = () => {
  const { vanillaTheme } = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme();
  const addToast = React.useContext(ToastControllerContext);
  if (addToast === null) {
    throw new Error('No "ToastProvider" configured');
  }
  return React.useCallback(
    (toast) => {
      const id = `${toastCounter++}`;
      const dedupeKey = toast.key ?? id;
      addToast({
        ...toast,
        vanillaTheme,
        id,
        dedupeKey,
        shouldRemove: false
      });
    },
    [vanillaTheme, addToast]
  );
};
const resolveToPxIfUnitless = (value) => typeof value === "string" && /[0-9]$/.test(value) ? `${value}px` : value;
const PlaceholderContent = ({
  label,
  image
}) => {
  if (image) {
    return null;
  }
  if (label) {
    return /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.PublicBox, { paddingX: "xsmall", paddingY: "xxsmall", children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.Text, { size: "small", weight: "strong", align: "center", baseline: false, children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.PublicBox, { className: styles_lib_components_private_Placeholder_Placeholder_css_cjs.label, children: label }) }) });
  }
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      className: styles_lib_css_atoms_atoms_cjs.atoms({
        reset: "svg",
        position: "absolute",
        width: "full",
        height: "full"
      }),
      children: [
        /* @__PURE__ */ jsxRuntime.jsx("line", { className: styles_lib_components_private_Placeholder_Placeholder_css_cjs.line, x1: 0, y1: 0, x2: "100%", y2: "100%" }),
        /* @__PURE__ */ jsxRuntime.jsx("line", { className: styles_lib_components_private_Placeholder_Placeholder_css_cjs.line, x1: "100%", y1: 0, x2: 0, y2: "100%" })
      ]
    }
  );
};
const Placeholder = ({
  label,
  width = "auto",
  height = 120,
  shape = "rectangle",
  image,
  imageSize = "cover"
}) => {
  const lightness = styles_lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
  return /* @__PURE__ */ jsxRuntime.jsx(
    styles_lib_components_Box_Box_cjs.PublicBox,
    {
      position: "relative",
      overflow: "hidden",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      borderRadius: shape === "round" ? "full" : void 0,
      className: [
        styles_lib_themes_wireframe_wireframeTheme_css_cjs.wireframe.vanillaTheme,
        styles_lib_components_private_Placeholder_Placeholder_css_cjs.lightTheme[lightness.lightMode],
        styles_lib_components_private_Placeholder_Placeholder_css_cjs.darkTheme[lightness.darkMode],
        !image ? styles_lib_components_private_Placeholder_Placeholder_css_cjs.box : void 0
      ],
      style: {
        width: resolveToPxIfUnitless(width),
        height: resolveToPxIfUnitless(height),
        background: image ? `url(${image}) no-repeat center center` : void 0,
        backgroundSize: imageSize
      },
      children: /* @__PURE__ */ jsxRuntime.jsx(PlaceholderContent, { label, image })
    }
  );
};
exports.Actions = Actions;
exports.Badge = Badge;
exports.BoxRenderer = BoxRenderer;
exports.ButtonLink = ButtonLink;
exports.Card = Card;
exports.Checkbox = Checkbox;
exports.CheckboxStandalone = CheckboxStandalone;
exports.Dialog = Dialog;
exports.Disclosure = Disclosure;
exports.Drawer = Drawer;
exports.MenuItem = MenuItem;
exports.MenuItemLink = MenuItemLink;
exports.Notice = Notice;
exports.PasswordField = PasswordField;
exports.Placeholder = Placeholder;
exports.Radio = Radio;
exports.RadioGroup = RadioGroup;
exports.RadioItem = RadioItem;
exports.TabPanels = TabPanels;
exports.TextField = TextField;
exports.TextLinkButton = TextLinkButton;
exports.ThemeNameConsumer = ThemeNameConsumer;
exports.ToastProvider = ToastProvider;
exports.filterSuggestions = filterSuggestions;
exports.useBreakpoint = useBreakpoint;
exports.useColor = useColor;
exports.useToast = useToast;
exports.validCardComponents = validCardComponents;
