import dedent from "dedent";
import { Accordion } from "../styles/lib/components/Accordion/Accordion.playroom.mjs";
import { jsx } from "react/jsx-runtime";
import { useFallbackState } from "../styles/lib/playroom/FrameComponent.mjs";
import { useRef, forwardRef, useState, useEffect } from "react";
import { v4 } from "uuid";
import { AccordionItem as AccordionItem$1, Inline as Inline$1, validInlineComponents, IconClear } from "../styles/lib/components/Accordion/AccordionItem.mjs";
import { IconAdd, IconBookmark, IconCaution, IconCompany, IconCompose, IconCopy, IconCreditCard, IconCritical, IconDate, IconDelete, IconDesktop, IconDocument, IconDocumentBroken, IconDownload, IconEdit, IconEducation, IconEnlarge, IconFilter, IconFlag, IconGrid, IconHeart, IconHelp, IconHistory, IconHome, IconImage, IconInfo, IconInvoice, IconLanguage, IconLink, IconLinkBroken, IconList, IconLocation, IconMail, IconMessage, IconMinus, IconMobile, IconMoney, IconNewWindow, IconNote, IconNotification, IconOverflow, IconPeople, IconPersonAdd, IconPersonVerified, IconPhone, IconPlatformAndroid, IconPlatformApple, IconPositive, IconPrint, IconProfile, IconPromote, IconRecommended, IconRefresh, IconResume, IconSearch, IconSecurity, IconSend, IconSent, IconSettings, IconShare, IconSocialFacebook, IconSocialGitHub, IconSocialInstagram, IconSocialLinkedIn, IconSocialMedium, IconSocialTwitter, IconSocialYouTube, IconStar, IconStatistics, IconSubCategory, IconTag, IconTick, IconTime, IconTip, IconUpload, IconVideo, IconVisibility, IconWorkExperience, IconZoomIn, IconZoomOut, Text } from "../styles/lib/components/Accordion/AccordionItem.mjs";
import { Alert as Alert$1 } from "../styles/lib/components/Alert/Alert.mjs";
import { Autosuggest as Autosuggest$1 } from "../styles/lib/components/Autosuggest/Autosuggest.mjs";
import { useResponsiveValue } from "../styles/lib/components/Autosuggest/Autosuggest.mjs";
import { Badge as Badge$1, ButtonLink as ButtonLink$1, Card as Card$1, validCardComponents, Checkbox as Checkbox$1, CheckboxStandalone as CheckboxStandalone$1, Dialog as Dialog$1, Disclosure as Disclosure$1, Drawer as Drawer$1, MenuItem as MenuItem$1, MenuItemLink as MenuItemLink$1, Notice as Notice$1, PasswordField as PasswordField$1, Radio as Radio$1, RadioGroup as RadioGroup$1, TextField as TextField$1 } from "../styles/lib/components/private/Placeholder/Placeholder.mjs";
import { Actions, BoxRenderer, Placeholder, RadioItem, TabPanels, TextLinkButton, ThemeNameConsumer, ToastProvider, filterSuggestions, useBreakpoint, useColor, useToast } from "../styles/lib/components/private/Placeholder/Placeholder.mjs";
import { Bleed as Bleed$1, validBleedComponents, Button as Button$1, buttonVariants, buttonTones } from "../styles/lib/components/Button/Button.mjs";
import { Box } from "../styles/lib/components/Box/Box.playroom.mjs";
import { ButtonIcon as ButtonIcon$1, buttonIconVariants, buttonIconTones } from "../styles/lib/components/ButtonIcon/ButtonIcon.mjs";
import { breakpointNames } from "../styles/lib/css/breakpoints.mjs";
import { space } from "../styles/lib/css/atoms/atomicProperties.mjs";
import { Columns as Columns$1 } from "../styles/lib/components/Columns/Columns.mjs";
import { validColumnsComponents } from "../styles/lib/components/Column/Column.mjs";
import { Column } from "../styles/lib/components/Column/Column.mjs";
import { AllowCloseContext } from "../styles/lib/components/private/Modal/Modal.mjs";
import { Dropdown as Dropdown$1 } from "../styles/lib/components/Dropdown/Dropdown.mjs";
import { FieldLabel as FieldLabel$1, FieldMessage as FieldMessage$1, tones, MonthPicker as MonthPicker$1 } from "../styles/lib/components/MonthPicker/MonthPicker.mjs";
import { Heading as Heading$1 } from "../styles/lib/components/Heading/Heading.mjs";
import { Link as Link$1, Pagination as Pagination$1, defaultPageLimit } from "../styles/lib/components/Pagination/Pagination.mjs";
import { List as List$1 } from "../styles/lib/components/List/List.mjs";
import { MenuItemCheckbox as MenuItemCheckbox$1 } from "../styles/lib/components/MenuItemCheckbox/MenuItemCheckbox.mjs";
import { OverflowMenu as OverflowMenu$1 } from "../styles/lib/components/OverflowMenu/OverflowMenu.mjs";
import { Rating as Rating$1 } from "../styles/lib/components/Rating/Rating.mjs";
import { Stack as Stack$1, validStackComponents } from "../styles/lib/components/Stack/Stack.mjs";
import { TabsProvider as TabsProvider$1, Tab as Tab$1 } from "../styles/lib/components/Tabs/Tab.mjs";
import { useSpace } from "../styles/lib/components/Tabs/Tab.mjs";
import { Tabs as Tabs$1 } from "../styles/lib/components/Tabs/Tabs.mjs";
import { Tag as Tag$1 } from "../styles/lib/components/Tag/Tag.mjs";
import { Textarea as Textarea$1 } from "../styles/lib/components/Textarea/Textarea.mjs";
import { TextDropdown as TextDropdown$1, parseSimpleToComplexOption } from "../styles/lib/components/TextDropdown/TextDropdown.mjs";
import { Tiles as Tiles$1 } from "../styles/lib/components/Tiles/Tiles.mjs";
import { Toggle as Toggle$1 } from "../styles/lib/components/Toggle/Toggle.mjs";
import { TooltipRenderer as TooltipRenderer$1 } from "../styles/lib/components/TooltipRenderer/TooltipRenderer.mjs";
import { BraidPortal, useThemeName } from "../styles/lib/components/TooltipRenderer/TooltipRenderer.mjs";
import { BraidProvider, makeLinkComponent } from "../side-effects/lib/components/BraidProvider/BraidProvider.mjs";
import { ContentBlock } from "../styles/lib/components/ContentBlock/ContentBlock.mjs";
import { Divider } from "../styles/lib/components/Divider/Divider.mjs";
import { Hidden } from "../styles/lib/components/Hidden/Hidden.mjs";
import { HiddenVisually } from "../styles/lib/components/HiddenVisually/HiddenVisually.mjs";
import { IconRenderer } from "../styles/lib/components/icons/IconRenderer.mjs";
import { Loader } from "../styles/lib/components/Loader/Loader.mjs";
import { MenuItemDivider, MenuRenderer } from "../styles/lib/components/MenuRenderer/MenuRenderer.mjs";
import { PageBlock } from "../styles/lib/components/private/Modal/ModalContent.mjs";
import { Page } from "../styles/lib/components/Page/Page.mjs";
import { Secondary } from "../styles/lib/components/Secondary/Secondary.mjs";
import { Step } from "../styles/lib/components/Stepper/Step.mjs";
import { Stepper } from "../styles/lib/components/Stepper/Stepper.mjs";
import { Strong } from "../styles/lib/components/Strong/Strong.mjs";
import { TabPanel } from "../styles/lib/components/Tabs/TabPanel.mjs";
import { TextLink } from "../styles/lib/components/TextLink/TextLink.mjs";
import { IconArrow } from "../styles/lib/components/icons/IconArrow/IconArrow.mjs";
import { IconChevron } from "../styles/lib/components/icons/IconChevron/IconChevron.mjs";
import { IconThumb } from "../styles/lib/components/icons/IconThumb/IconThumb.mjs";
const useFallbackId = () => useRef(`fallbackId-${v4()}`).current;
const AccordionItem = ({
  id,
  label,
  stateName,
  expanded,
  onToggle,
  size,
  tone,
  weight,
  badge,
  icon,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(
    stateName,
    expanded,
    onToggle,
    false
  );
  return /* @__PURE__ */ jsx(
    AccordionItem$1,
    {
      id: id ?? fallbackId,
      expanded: state,
      onToggle: handleChange,
      label: typeof label !== "boolean" ? label : "",
      size: typeof size === "boolean" ? void 0 : size,
      tone: typeof tone === "boolean" ? void 0 : tone,
      weight: typeof weight === "boolean" ? void 0 : weight,
      badge: typeof badge === "boolean" ? void 0 : badge,
      icon: typeof icon === "boolean" ? void 0 : icon,
      ...restProps
    }
  );
};
const Alert = ({ tone, ...restProps }) => /* @__PURE__ */ jsx(
  Alert$1,
  {
    tone: typeof tone !== "boolean" ? tone : void 0,
    ...restProps
  }
);
function Autosuggest({
  id,
  stateName,
  value,
  onChange,
  onClear,
  ...restProps
}) {
  const fallbackId = useFallbackId();
  const blankValue = { text: "" };
  const [state, handleChange] = useFallbackState(
    stateName,
    value,
    onChange,
    blankValue
  );
  return /* @__PURE__ */ jsx(
    Autosuggest$1,
    {
      id: id ?? fallbackId,
      value: state,
      onChange: handleChange,
      onClear: () => {
        handleChange(blankValue);
        onClear == null ? void 0 : onClear();
      },
      ...restProps
    }
  );
}
const Badge = ({ tone, ...restProps }) => /* @__PURE__ */ jsx(
  Badge$1,
  {
    tone: typeof tone !== "boolean" ? tone : void 0,
    ...restProps
  }
);
Badge.__isBadge__ = true;
const Bleed = ({ component, ...restProps }) => /* @__PURE__ */ jsx(
  Bleed$1,
  {
    component: component && validBleedComponents.indexOf(component) > -1 ? component : void 0,
    ...restProps
  }
);
const Button = forwardRef(
  ({ variant, tone, ...restProps }, ref) => {
    const isValidVariant = variant && buttonVariants.indexOf(variant) > -1;
    const isValidTone = tone && buttonTones.indexOf(tone) > -1;
    return /* @__PURE__ */ jsx(
      Button$1,
      {
        ref,
        variant: isValidVariant ? variant : void 0,
        tone: isValidTone ? tone : void 0,
        ...restProps
      }
    );
  }
);
Button.displayName = "Button";
const ButtonIcon = forwardRef(
  ({ variant, id, tone, ...restProps }, ref) => {
    const fallbackId = useFallbackId();
    const isValidVariant = variant && buttonIconVariants.indexOf(variant) > -1;
    const isValidTone = tone && buttonIconTones.indexOf(tone) > -1;
    return /* @__PURE__ */ jsx(
      ButtonIcon$1,
      {
        ref,
        id: id ?? fallbackId,
        variant: isValidVariant ? variant : void 0,
        tone: isValidTone ? tone : void 0,
        ...restProps
      }
    );
  }
);
ButtonIcon.displayName = "ButtonIcon";
const ButtonLink = forwardRef(
  ({ variant, ...restProps }, ref) => {
    const isValidVariant = variant && buttonVariants.indexOf(variant) > -1;
    return /* @__PURE__ */ jsx(
      ButtonLink$1,
      {
        ref,
        variant: isValidVariant ? variant : void 0,
        ...restProps
      }
    );
  }
);
ButtonLink.displayName = "ButtonLink";
const Card = ({ component, ...restProps }) => /* @__PURE__ */ jsx(
  Card$1,
  {
    component: component && validCardComponents.indexOf(component) > -1 ? component : void 0,
    ...restProps
  }
);
const Checkbox = ({
  id,
  stateName,
  checked,
  onChange,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(
    stateName,
    checked,
    onChange,
    false
  );
  return /* @__PURE__ */ jsx(
    Checkbox$1,
    {
      id: id ?? fallbackId,
      checked: state,
      onChange: handleChange,
      ...restProps
    }
  );
};
const CheckboxStandalone = ({
  id,
  stateName,
  checked,
  onChange,
  "aria-label": ariaLabel,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(
    stateName,
    checked,
    onChange,
    false
  );
  return /* @__PURE__ */ jsx(
    CheckboxStandalone$1,
    {
      id: id ?? fallbackId,
      checked: state,
      onChange: handleChange,
      "aria-label": ariaLabel ?? "",
      ...restProps
    }
  );
};
const validSpaceValues = Object.keys(space);
const cleanSpaceValue = (space2) => {
  const validResponsiveObject = typeof space2 === "object" && Object.keys(space2).some(
    (bp) => breakpointNames.includes(bp) && validSpaceValues.includes(space2[bp])
  );
  const validArray = Array.isArray(space2) && space2.some((s) => validSpaceValues.includes(s));
  const validSpace = typeof space2 === "string" && validSpaceValues.includes(space2);
  return validSpace || validResponsiveObject || validArray ? space2 : void 0;
};
const Columns = ({
  space: space2,
  align,
  alignY,
  component,
  ...restProps
}) => /* @__PURE__ */ jsx(
  Columns$1,
  {
    space: cleanSpaceValue(space2) || "none",
    align: typeof align !== "boolean" ? align : void 0,
    alignY: typeof alignY !== "boolean" ? alignY : void 0,
    component: component && validColumnsComponents.indexOf(component) > -1 ? component : void 0,
    ...restProps
  }
);
const Dialog = ({
  id,
  stateName,
  open,
  onClose,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(
    stateName,
    open,
    onClose,
    false
  );
  return /* @__PURE__ */ jsx(
    AllowCloseContext.Provider,
    {
      value: onClose !== void 0 || stateName !== void 0,
      children: /* @__PURE__ */ jsx(
        Dialog$1,
        {
          id: id ?? fallbackId,
          open: state,
          onClose: handleChange,
          ...restProps
        }
      )
    }
  );
};
const Disclosure = ({
  id,
  stateName,
  expanded,
  expandLabel,
  collapseLabel,
  onToggle,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(
    stateName,
    expanded,
    onToggle,
    false
  );
  return /* @__PURE__ */ jsx(
    Disclosure$1,
    {
      id: id ?? fallbackId,
      expanded: state,
      onToggle: handleChange,
      expandLabel: typeof expandLabel !== "boolean" ? expandLabel : "",
      collapseLabel: typeof collapseLabel !== "boolean" ? collapseLabel : "",
      ...restProps
    }
  );
};
const Drawer = ({
  id,
  stateName,
  open,
  onClose,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(
    stateName,
    open,
    onClose,
    false
  );
  return /* @__PURE__ */ jsx(
    AllowCloseContext.Provider,
    {
      value: onClose !== void 0 || stateName !== void 0,
      children: /* @__PURE__ */ jsx(
        Drawer$1,
        {
          id: id ?? fallbackId,
          ...restProps,
          open: state,
          onClose: handleChange
        }
      )
    }
  );
};
const Dropdown = ({
  id,
  stateName,
  value,
  onChange,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(
    stateName,
    value,
    onChange,
    ""
  );
  return /* @__PURE__ */ jsx(
    Dropdown$1,
    {
      id: id ?? fallbackId,
      value: state,
      onChange: handleChange,
      ...restProps
    }
  );
};
const FieldLabel = ({
  id,
  htmlFor,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const fallbackFor = useFallbackId();
  return /* @__PURE__ */ jsx(
    FieldLabel$1,
    {
      id: id ?? fallbackId,
      htmlFor: htmlFor ?? fallbackFor,
      ...restProps
    }
  );
};
const FieldMessage = ({
  id,
  tone,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  return /* @__PURE__ */ jsx(
    FieldMessage$1,
    {
      id: id ?? fallbackId,
      tone: tone && tones.indexOf(tone) > -1 ? tone : void 0,
      ...restProps
    }
  );
};
const Heading = ({ level, ...restProps }) => /* @__PURE__ */ jsx(Heading$1, { level: level || "3", ...restProps });
const Inline = ({
  space: space2,
  align,
  alignY,
  component,
  ...restProps
}) => /* @__PURE__ */ jsx(
  Inline$1,
  {
    space: cleanSpaceValue(space2) || "none",
    align: typeof align !== "boolean" ? align : void 0,
    alignY: typeof alignY !== "boolean" ? alignY : void 0,
    component: component && validInlineComponents.indexOf(component) > -1 ? component : void 0,
    ...restProps
  }
);
const Link = forwardRef(
  ({ href, onClick, ...restProps }, ref) => /* @__PURE__ */ jsx(
    Link$1,
    {
      ref,
      href: href ?? "",
      onClick: onClick ? onClick : (event) => event == null ? void 0 : event.preventDefault(),
      ...restProps
    }
  )
);
const List = ({ space: space2, ...props }) => {
  const cleanSpace = cleanSpaceValue(space2);
  if (props.type === "icon" && (!("icon" in props) || !props.icon)) {
    return /* @__PURE__ */ jsx(List$1, { ...props, space: cleanSpace, icon: /* @__PURE__ */ jsx(IconClear, {}) });
  }
  return /* @__PURE__ */ jsx(List$1, { space: cleanSpace, ...props });
};
const MonthPicker = ({
  id,
  stateName,
  value,
  onChange,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(
    stateName,
    value,
    onChange,
    {}
  );
  return /* @__PURE__ */ jsx(
    MonthPicker$1,
    {
      id: id ?? fallbackId,
      value: state,
      onChange: handleChange,
      ...restProps
    }
  );
};
const MenuItem = ({ badge, ...restProps }) => /* @__PURE__ */ jsx(
  MenuItem$1,
  {
    badge: typeof badge === "boolean" ? void 0 : badge,
    ...restProps
  }
);
MenuItem.__isMenuItem__ = true;
const MenuItemLink = ({ badge, ...restProps }) => /* @__PURE__ */ jsx(
  MenuItemLink$1,
  {
    badge: typeof badge === "boolean" ? void 0 : badge,
    ...restProps
  }
);
MenuItemLink.__isMenuItem__ = true;
const MenuItemCheckbox = ({
  badge,
  ...restProps
}) => /* @__PURE__ */ jsx(
  MenuItemCheckbox$1,
  {
    badge: typeof badge === "boolean" ? void 0 : badge,
    ...restProps
  }
);
MenuItemCheckbox.__isMenuItem__ = true;
const Notice = ({ tone, ...restProps }) => /* @__PURE__ */ jsx(
  Notice$1,
  {
    tone: typeof tone !== "boolean" ? tone : void 0,
    ...restProps
  }
);
const OverflowMenu = ({ id, ...restProps }) => {
  const fallbackId = useFallbackId();
  return /* @__PURE__ */ jsx(OverflowMenu$1, { id: id ?? fallbackId, ...restProps });
};
const defaultPage = 1;
const defaultTotal = 10;
const resolveFallbackPage = (page, total) => {
  if (typeof page === "number") {
    return page > 0 ? page : 1;
  }
  if (typeof total === "number" && total > 0) {
    return Math.ceil(total / 2);
  }
  return defaultPage;
};
const resolveFallbackTotal = (total, resolvedPage) => {
  if (typeof total === "number" && total > 0) {
    return total;
  }
  return resolvedPage > defaultPageLimit ? resolvedPage * 2 : defaultTotal;
};
const Pagination = ({
  page,
  total,
  linkProps,
  label,
  ...restProps
}) => {
  const fallbackPage = resolveFallbackPage(page, total);
  const fallbackTotal = resolveFallbackTotal(total, fallbackPage);
  const [currentPage, setCurrentPage] = useState(fallbackPage);
  const fallbackLinkProps = ({
    page: newPage
  }) => ({
    href: "#",
    onClick: (e) => {
      e.preventDefault();
      setCurrentPage(newPage);
    }
  });
  useEffect(() => {
    setCurrentPage(resolveFallbackPage(page, total));
  }, [page, total]);
  return /* @__PURE__ */ jsx(
    Pagination$1,
    {
      page: currentPage,
      total: total || fallbackTotal,
      label: label || `Page ${currentPage} of results`,
      linkProps: linkProps ?? fallbackLinkProps,
      ...restProps
    }
  );
};
const PasswordField = ({
  id,
  stateName,
  value,
  onChange,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(
    stateName,
    value,
    onChange,
    ""
  );
  return /* @__PURE__ */ jsx(
    PasswordField$1,
    {
      id: id ?? fallbackId,
      value: state,
      onChange: handleChange,
      autoComplete: "off",
      ...restProps
    }
  );
};
const Radio = ({
  id,
  checked,
  onChange,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [fallbackChecked, setFallbackChecked] = useState(false);
  return /* @__PURE__ */ jsx(
    Radio$1,
    {
      id: id ?? fallbackId,
      checked: checked ?? fallbackChecked,
      onChange: onChange ? onChange : (event) => setFallbackChecked(event.currentTarget.checked),
      ...restProps
    }
  );
};
const RadioGroup = ({
  id,
  stateName,
  value,
  onChange,
  children,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(stateName, value, onChange);
  return /* @__PURE__ */ jsx(
    RadioGroup$1,
    {
      ...restProps,
      id: id ?? fallbackId,
      value: state,
      onChange: handleChange,
      children
    }
  );
};
const Rating = ({ rating, ...restProps }) => /* @__PURE__ */ jsx(
  Rating$1,
  {
    rating: typeof rating === "number" ? rating : 0,
    ...restProps
  }
);
const Stack = ({
  space: space2,
  align,
  component,
  ...restProps
}) => /* @__PURE__ */ jsx(
  Stack$1,
  {
    space: cleanSpaceValue(space2) || "none",
    align: typeof align !== "boolean" ? align : void 0,
    component: component && validStackComponents.indexOf(component) > -1 ? component : void 0,
    ...restProps
  }
);
const TabsProvider = ({
  id,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  return /* @__PURE__ */ jsx(TabsProvider$1, { id: id ?? fallbackId, ...restProps });
};
const Tabs = ({ label, ...restProps }) => /* @__PURE__ */ jsx(Tabs$1, { label: "", ...restProps });
const Tab = ({ icon, ...restProps }) => /* @__PURE__ */ jsx(
  Tab$1,
  {
    icon: typeof icon === "boolean" ? void 0 : icon,
    ...restProps
  }
);
Tab.__isTab__ = true;
const Tag = ({ icon, id, ...restProps }) => {
  const fallbackId = useFallbackId();
  return /* @__PURE__ */ jsx(
    Tag$1,
    {
      id: id ?? fallbackId,
      icon: typeof icon !== "boolean" ? icon : void 0,
      ...restProps
    }
  );
};
const Textarea = ({
  id,
  stateName,
  value,
  onChange,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(
    stateName,
    value,
    onChange,
    ""
  );
  return /* @__PURE__ */ jsx(
    Textarea$1,
    {
      id: id ?? fallbackId,
      value: state,
      onChange: handleChange,
      autoComplete: "off",
      ...restProps
    }
  );
};
const fallbackOptions = ["TextDropdown"];
function resolveValue(value, options) {
  if (typeof value === "undefined") {
    if (Array.isArray(options) && options.length > 0) {
      return parseSimpleToComplexOption(options[0]).value;
    }
    return fallbackOptions[0];
  }
  return value;
}
function resolveOptions(options) {
  return Array.isArray(options) && options.length > 0 ? options : fallbackOptions;
}
function TextDropdown({
  id,
  value,
  label,
  onChange,
  options = fallbackOptions,
  ...restProps
}) {
  const fallbackId = useFallbackId();
  const [internalValue, setInternalValue] = useState(
    resolveValue(value, options)
  );
  const [internalOptions, setInternalOptions] = useState(
    resolveOptions(options)
  );
  useEffect(() => {
    if (options !== internalOptions) {
      setInternalOptions(resolveOptions(options));
      setInternalValue(resolveValue(value, options));
    }
  }, [internalOptions, value, options]);
  return /* @__PURE__ */ jsx(
    TextDropdown$1,
    {
      id: id ?? fallbackId,
      label: label ?? "No label provided",
      value: internalValue,
      options: internalOptions,
      onChange: onChange ? onChange : setInternalValue,
      ...restProps
    }
  );
}
const TextField = ({
  id,
  stateName,
  value,
  onChange,
  onClear,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(
    stateName,
    value,
    onChange,
    ""
  );
  return /* @__PURE__ */ jsx(
    TextField$1,
    {
      id: id ?? fallbackId,
      value: state,
      onChange: handleChange,
      onClear: () => {
        handleChange({ currentTarget: { value: "" } });
        onClear == null ? void 0 : onClear();
      },
      autoComplete: "off",
      ...restProps
    }
  );
};
const Tiles = ({ space: space2, columns, ...restProps }) => /* @__PURE__ */ jsx(
  Tiles$1,
  {
    space: cleanSpaceValue(space2) || "none",
    columns: typeof columns === "boolean" || !columns ? 1 : columns,
    ...restProps
  }
);
const Toggle = ({
  id,
  stateName,
  on,
  onChange,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  const [state, handleChange] = useFallbackState(
    stateName,
    on,
    onChange,
    false
  );
  return /* @__PURE__ */ jsx(
    Toggle$1,
    {
      id: id ?? fallbackId,
      on: state,
      onChange: handleChange,
      ...restProps
    }
  );
};
const TooltipRenderer = ({
  id,
  ...restProps
}) => {
  const fallbackId = useFallbackId();
  return /* @__PURE__ */ jsx(TooltipRenderer$1, { id: id ?? fallbackId, ...restProps });
};
const global = globalThis;
if (global.__IS_PLAYROOM_ENVIRONMENT__ !== "clearly") {
  throw new Error(dedent`
    Playroom prototyping components are being imported instead of Braid components.
    ‎
    These components must not be used in production. Please import from the top level Braid entry point:
    ‎
    -import { Component } from 'braid-design-system/playroom/components';
    +import { Component } from 'braid-design-system';
  `);
}
export {
  Accordion,
  AccordionItem,
  Actions,
  Alert,
  Autosuggest,
  Badge,
  Bleed,
  Box,
  BoxRenderer,
  BraidPortal,
  BraidProvider,
  Button,
  ButtonIcon,
  ButtonLink,
  Card,
  Checkbox,
  CheckboxStandalone,
  Column,
  Columns,
  ContentBlock,
  Dialog,
  Disclosure,
  Divider,
  Drawer,
  Dropdown,
  FieldLabel,
  FieldMessage,
  Heading,
  Hidden,
  HiddenVisually,
  IconAdd,
  IconArrow,
  IconBookmark,
  IconCaution,
  IconChevron,
  IconClear,
  IconCompany,
  IconCompose,
  IconCopy,
  IconCreditCard,
  IconCritical,
  IconDate,
  IconDelete,
  IconDesktop,
  IconDocument,
  IconDocumentBroken,
  IconDownload,
  IconEdit,
  IconEducation,
  IconEnlarge,
  IconFilter,
  IconFlag,
  IconGrid,
  IconHeart,
  IconHelp,
  IconHistory,
  IconHome,
  IconImage,
  IconInfo,
  IconInvoice,
  IconLanguage,
  IconLink,
  IconLinkBroken,
  IconList,
  IconLocation,
  IconMail,
  IconMessage,
  IconMinus,
  IconMobile,
  IconMoney,
  IconNewWindow,
  IconNote,
  IconNotification,
  IconOverflow,
  IconPeople,
  IconPersonAdd,
  IconPersonVerified,
  IconPhone,
  IconPlatformAndroid,
  IconPlatformApple,
  IconPositive,
  IconPrint,
  IconProfile,
  IconPromote,
  IconRecommended,
  IconRefresh,
  IconRenderer,
  IconResume,
  IconSearch,
  IconSecurity,
  IconSend,
  IconSent,
  IconSettings,
  IconShare,
  IconSocialFacebook,
  IconSocialGitHub,
  IconSocialInstagram,
  IconSocialLinkedIn,
  IconSocialMedium,
  IconSocialTwitter,
  IconSocialYouTube,
  IconStar,
  IconStatistics,
  IconSubCategory,
  IconTag,
  IconThumb,
  IconTick,
  IconTime,
  IconTip,
  IconUpload,
  IconVideo,
  IconVisibility,
  IconWorkExperience,
  IconZoomIn,
  IconZoomOut,
  Inline,
  Link,
  List,
  Loader,
  MenuItem,
  MenuItemCheckbox,
  MenuItemDivider,
  MenuItemLink,
  MenuRenderer,
  MonthPicker,
  Notice,
  OverflowMenu,
  Page,
  PageBlock,
  Pagination,
  PasswordField,
  Placeholder,
  Radio,
  RadioGroup,
  RadioItem,
  Rating,
  Secondary,
  Stack,
  Step,
  Stepper,
  Strong,
  Tab,
  TabPanel,
  TabPanels,
  Tabs,
  TabsProvider,
  Tag,
  Text,
  TextDropdown,
  TextField,
  TextLink,
  TextLinkButton,
  Textarea,
  ThemeNameConsumer,
  Tiles,
  ToastProvider,
  Toggle,
  TooltipRenderer,
  filterSuggestions,
  makeLinkComponent,
  useBreakpoint,
  useColor,
  useResponsiveValue,
  useSpace,
  useThemeName,
  useToast
};
