braid-design-system 32.16.0 → 32.16.2

package/dist/playroom/components.mjs

@@ -1,824 +1,168 @@
 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, IconSocialX, IconSocialYouTube, IconSort, 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 });
-};
+import { Accordion } from "../lib/components/Accordion/Accordion.playroom.mjs";
+import { AccordionItem } from "../lib/components/Accordion/AccordionItem.playroom.mjs";
+import { Alert } from "../lib/components/Alert/Alert.playroom.mjs";
+import { Autosuggest } from "../lib/components/Autosuggest/Autosuggest.playroom.mjs";
+import { Badge } from "../lib/components/Badge/Badge.playroom.mjs";
+import { Bleed } from "../lib/components/Bleed/Bleed.playroom.mjs";
+import { Box } from "../lib/components/Box/Box.playroom.mjs";
+import { Button } from "../lib/components/Button/Button.playroom.mjs";
+import { ButtonIcon } from "../lib/components/ButtonIcon/ButtonIcon.playroom.mjs";
+import { ButtonLink } from "../lib/components/ButtonLink/ButtonLink.playroom.mjs";
+import { Card } from "../lib/components/Card/Card.playroom.mjs";
+import { Checkbox } from "../lib/components/Checkbox/Checkbox.playroom.mjs";
+import { CheckboxStandalone } from "../lib/components/Checkbox/CheckboxStandalone.playroom.mjs";
+import { Columns } from "../lib/components/Columns/Columns.playroom.mjs";
+import { Dialog } from "../lib/components/Dialog/Dialog.playroom.mjs";
+import { Disclosure } from "../lib/components/Disclosure/Disclosure.playroom.mjs";
+import { Drawer } from "../lib/components/Drawer/Drawer.playroom.mjs";
+import { Dropdown } from "../lib/components/Dropdown/Dropdown.playroom.mjs";
+import { FieldLabel } from "../lib/components/FieldLabel/FieldLabel.playroom.mjs";
+import { FieldMessage } from "../lib/components/FieldMessage/FieldMessage.playroom.mjs";
+import { Heading } from "../lib/components/Heading/Heading.playroom.mjs";
+import { Inline } from "../lib/components/Inline/Inline.playroom.mjs";
+import { Link } from "../lib/components/Link/Link.playroom.mjs";
+import { List } from "../lib/components/List/List.playroom.mjs";
+import { MonthPicker } from "../lib/components/MonthPicker/MonthPicker.playroom.mjs";
+import { MenuItem } from "../lib/components/MenuItem/MenuItem.playroom.mjs";
+import { MenuItemLink } from "../lib/components/MenuItem/MenuItemLink.playroom.mjs";
+import { MenuItemCheckbox } from "../lib/components/MenuItemCheckbox/MenuItemCheckbox.playroom.mjs";
+import { Notice } from "../lib/components/Notice/Notice.playroom.mjs";
+import { OverflowMenu } from "../lib/components/OverflowMenu/OverflowMenu.playroom.mjs";
+import { Pagination } from "../lib/components/Pagination/Pagination.playroom.mjs";
+import { PasswordField } from "../lib/components/PasswordField/PasswordField.playroom.mjs";
+import { Radio } from "../lib/components/Radio/Radio.playroom.mjs";
+import { RadioGroup } from "../lib/components/RadioGroup/RadioGroup.playroom.mjs";
+import { Rating } from "../lib/components/Rating/Rating.playroom.mjs";
+import { Stack } from "../lib/components/Stack/Stack.playroom.mjs";
+import { Tab, Tabs, TabsProvider } from "../lib/components/Tabs/Tabs.playroom.mjs";
+import { Tag } from "../lib/components/Tag/Tag.playroom.mjs";
+import { Textarea } from "../lib/components/Textarea/Textarea.playroom.mjs";
+import { TextDropdown } from "../lib/components/TextDropdown/TextDropdown.playroom.mjs";
+import { TextField } from "../lib/components/TextField/TextField.playroom.mjs";
+import { Tiles } from "../lib/components/Tiles/Tiles.playroom.mjs";
+import { Toggle } from "../lib/components/Toggle/Toggle.playroom.mjs";
+import { TooltipRenderer } from "../lib/components/TooltipRenderer/TooltipRenderer.playroom.mjs";
+import { Placeholder } from "../lib/components/private/Placeholder/Placeholder.mjs";
+import { BraidProvider, makeLinkComponent } from "../lib/components/BraidProvider/BraidProvider.mjs";
+import { BraidPortal } from "../lib/components/BraidPortal/BraidPortal.mjs";
+import { ThemeNameConsumer } from "../lib/components/ThemeNameConsumer/ThemeNameConsumer.mjs";
+import { useThemeName } from "../lib/components/useThemeName/useThemeName.mjs";
+import { useSpace } from "../lib/components/useSpace/useSpace.mjs";
+import { useColor } from "../lib/components/useColor/useColor.mjs";
+import { useBreakpoint } from "../lib/components/useBreakpoint/useBreakpoint.mjs";
+import { useResponsiveValue } from "../lib/components/useResponsiveValue/useResponsiveValue.mjs";
+import { Actions } from "../lib/components/Actions/Actions.mjs";
+import { filterSuggestions } from "../lib/components/Autosuggest/filterSuggestions.mjs";
+import { BoxRenderer } from "../lib/components/Box/BoxRenderer.mjs";
+import { Column } from "../lib/components/Column/Column.mjs";
+import { ContentBlock } from "../lib/components/ContentBlock/ContentBlock.mjs";
+import { Divider } from "../lib/components/Divider/Divider.mjs";
+import { Hidden } from "../lib/components/Hidden/Hidden.mjs";
+import { HiddenVisually } from "../lib/components/HiddenVisually/HiddenVisually.mjs";
+import { IconRenderer } from "../lib/components/icons/IconRenderer.mjs";
+import { Loader } from "../lib/components/Loader/Loader.mjs";
+import { MenuRenderer } from "../lib/components/MenuRenderer/MenuRenderer.mjs";
+import { MenuItemDivider } from "../lib/components/MenuItemDivider/MenuItemDivider.mjs";
+import { PageBlock } from "../lib/components/PageBlock/PageBlock.mjs";
+import { Page } from "../lib/components/Page/Page.mjs";
+import { RadioItem } from "../lib/components/RadioGroup/RadioItem.mjs";
+import { Secondary } from "../lib/components/Secondary/Secondary.mjs";
+import { Step } from "../lib/components/Stepper/Step.mjs";
+import { Stepper } from "../lib/components/Stepper/Stepper.mjs";
+import { Strong } from "../lib/components/Strong/Strong.mjs";
+import { TabPanels } from "../lib/components/Tabs/TabPanels.mjs";
+import { TabPanel } from "../lib/components/Tabs/TabPanel.mjs";
+import { Text } from "../lib/components/Text/Text.mjs";
+import { TextLink } from "../lib/components/TextLink/TextLink.mjs";
+import { TextLinkButton } from "../lib/components/TextLinkButton/TextLinkButton.mjs";
+import { ToastProvider, useToast } from "../lib/components/useToast/ToastContext.mjs";
+import { IconAdd } from "../lib/components/icons/IconAdd/IconAdd.mjs";
+import { IconArrow } from "../lib/components/icons/IconArrow/IconArrow.mjs";
+import { IconBookmark } from "../lib/components/icons/IconBookmark/IconBookmark.mjs";
+import { IconCaution } from "../lib/components/icons/IconCaution/IconCaution.mjs";
+import { IconChevron } from "../lib/components/icons/IconChevron/IconChevron.mjs";
+import { IconClear } from "../lib/components/icons/IconClear/IconClear.mjs";
+import { IconCompany } from "../lib/components/icons/IconCompany/IconCompany.mjs";
+import { IconCompose } from "../lib/components/icons/IconCompose/IconCompose.mjs";
+import { IconCopy } from "../lib/components/icons/IconCopy/IconCopy.mjs";
+import { IconCreditCard } from "../lib/components/icons/IconCreditCard/IconCreditCard.mjs";
+import { IconCritical } from "../lib/components/icons/IconCritical/IconCritical.mjs";
+import { IconDate } from "../lib/components/icons/IconDate/IconDate.mjs";
+import { IconDelete } from "../lib/components/icons/IconDelete/IconDelete.mjs";
+import { IconDesktop } from "../lib/components/icons/IconDesktop/IconDesktop.mjs";
+import { IconDocument } from "../lib/components/icons/IconDocument/IconDocument.mjs";
+import { IconDocumentBroken } from "../lib/components/icons/IconDocumentBroken/IconDocumentBroken.mjs";
+import { IconDownload } from "../lib/components/icons/IconDownload/IconDownload.mjs";
+import { IconEdit } from "../lib/components/icons/IconEdit/IconEdit.mjs";
+import { IconEducation } from "../lib/components/icons/IconEducation/IconEducation.mjs";
+import { IconEnlarge } from "../lib/components/icons/IconEnlarge/IconEnlarge.mjs";
+import { IconFilter } from "../lib/components/icons/IconFilter/IconFilter.mjs";
+import { IconFlag } from "../lib/components/icons/IconFlag/IconFlag.mjs";
+import { IconGrid } from "../lib/components/icons/IconGrid/IconGrid.mjs";
+import { IconHeart } from "../lib/components/icons/IconHeart/IconHeart.mjs";
+import { IconHelp } from "../lib/components/icons/IconHelp/IconHelp.mjs";
+import { IconHistory } from "../lib/components/icons/IconHistory/IconHistory.mjs";
+import { IconHome } from "../lib/components/icons/IconHome/IconHome.mjs";
+import { IconImage } from "../lib/components/icons/IconImage/IconImage.mjs";
+import { IconInfo } from "../lib/components/icons/IconInfo/IconInfo.mjs";
+import { IconInvoice } from "../lib/components/icons/IconInvoice/IconInvoice.mjs";
+import { IconLanguage } from "../lib/components/icons/IconLanguage/IconLanguage.mjs";
+import { IconLink } from "../lib/components/icons/IconLink/IconLink.mjs";
+import { IconLinkBroken } from "../lib/components/icons/IconLinkBroken/IconLinkBroken.mjs";
+import { IconList } from "../lib/components/icons/IconList/IconList.mjs";
+import { IconLocation } from "../lib/components/icons/IconLocation/IconLocation.mjs";
+import { IconMail } from "../lib/components/icons/IconMail/IconMail.mjs";
+import { IconMessage } from "../lib/components/icons/IconMessage/IconMessage.mjs";
+import { IconMinus } from "../lib/components/icons/IconMinus/IconMinus.mjs";
+import { IconMobile } from "../lib/components/icons/IconMobile/IconMobile.mjs";
+import { IconMoney } from "../lib/components/icons/IconMoney/IconMoney.mjs";
+import { IconNewWindow } from "../lib/components/icons/IconNewWindow/IconNewWindow.mjs";
+import { IconNote } from "../lib/components/icons/IconNote/IconNote.mjs";
+import { IconNotification } from "../lib/components/icons/IconNotification/IconNotification.mjs";
+import { IconOverflow } from "../lib/components/icons/IconOverflow/IconOverflow.mjs";
+import { IconPeople } from "../lib/components/icons/IconPeople/IconPeople.mjs";
+import { IconPersonAdd } from "../lib/components/icons/IconPersonAdd/IconPersonAdd.mjs";
+import { IconPersonVerified } from "../lib/components/icons/IconPersonVerified/IconPersonVerified.mjs";
+import { IconPhone } from "../lib/components/icons/IconPhone/IconPhone.mjs";
+import { IconPlatformAndroid } from "../lib/components/icons/IconPlatformAndroid/IconPlatformAndroid.mjs";
+import { IconPlatformApple } from "../lib/components/icons/IconPlatformApple/IconPlatformApple.mjs";
+import { IconPositive } from "../lib/components/icons/IconPositive/IconPositive.mjs";
+import { IconPrint } from "../lib/components/icons/IconPrint/IconPrint.mjs";
+import { IconProfile } from "../lib/components/icons/IconProfile/IconProfile.mjs";
+import { IconPromote } from "../lib/components/icons/IconPromote/IconPromote.mjs";
+import { IconRecommended } from "../lib/components/icons/IconRecommended/IconRecommended.mjs";
+import { IconRefresh } from "../lib/components/icons/IconRefresh/IconRefresh.mjs";
+import { IconResume } from "../lib/components/icons/IconResume/IconResume.mjs";
+import { IconSearch } from "../lib/components/icons/IconSearch/IconSearch.mjs";
+import { IconSecurity } from "../lib/components/icons/IconSecurity/IconSecurity.mjs";
+import { IconSend } from "../lib/components/icons/IconSend/IconSend.mjs";
+import { IconSent } from "../lib/components/icons/IconSent/IconSent.mjs";
+import { IconSettings } from "../lib/components/icons/IconSettings/IconSettings.mjs";
+import { IconShare } from "../lib/components/icons/IconShare/IconShare.mjs";
+import { IconSocialFacebook } from "../lib/components/icons/IconSocialFacebook/IconSocialFacebook.mjs";
+import { IconSocialGitHub } from "../lib/components/icons/IconSocialGitHub/IconSocialGitHub.mjs";
+import { IconSocialInstagram } from "../lib/components/icons/IconSocialInstagram/IconSocialInstagram.mjs";
+import { IconSocialLinkedIn } from "../lib/components/icons/IconSocialLinkedIn/IconSocialLinkedIn.mjs";
+import { IconSocialMedium } from "../lib/components/icons/IconSocialMedium/IconSocialMedium.mjs";
+import { IconSocialTwitter } from "../lib/components/icons/IconSocialTwitter/IconSocialTwitter.mjs";
+import { IconSocialX } from "../lib/components/icons/IconSocialX/IconSocialX.mjs";
+import { IconSocialYouTube } from "../lib/components/icons/IconSocialYouTube/IconSocialYouTube.mjs";
+import { IconSort } from "../lib/components/icons/IconSort/IconSort.mjs";
+import { IconStar } from "../lib/components/icons/IconStar/IconStar.mjs";
+import { IconStatistics } from "../lib/components/icons/IconStatistics/IconStatistics.mjs";
+import { IconSubCategory } from "../lib/components/icons/IconSubCategory/IconSubCategory.mjs";
+import { IconTag } from "../lib/components/icons/IconTag/IconTag.mjs";
+import { IconThumb } from "../lib/components/icons/IconThumb/IconThumb.mjs";
+import { IconTick } from "../lib/components/icons/IconTick/IconTick.mjs";
+import { IconTime } from "../lib/components/icons/IconTime/IconTime.mjs";
+import { IconTip } from "../lib/components/icons/IconTip/IconTip.mjs";
+import { IconUpload } from "../lib/components/icons/IconUpload/IconUpload.mjs";
+import { IconVideo } from "../lib/components/icons/IconVideo/IconVideo.mjs";
+import { IconVisibility } from "../lib/components/icons/IconVisibility/IconVisibility.mjs";
+import { IconWorkExperience } from "../lib/components/icons/IconWorkExperience/IconWorkExperience.mjs";
+import { IconZoomIn } from "../lib/components/icons/IconZoomIn/IconZoomIn.mjs";
+import { IconZoomOut } from "../lib/components/icons/IconZoomOut/IconZoomOut.mjs";
 const global = globalThis;
 if (global.__IS_PLAYROOM_ENVIRONMENT__ !== "clearly") {
   throw new Error(dedent`