braid-design-system 32.16.0 → 32.16.2

package/dist/styles/lib/components/private/Placeholder/Placeholder.cjs

@@ -1,1277 +0,0 @@
-"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;