braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/Accordion/Accordion.mjs

@@ -0,0 +1,59 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import assert from "assert";
+import { useMemo } from "react";
+import { normalizeResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { Box } from "../Box/Box.mjs";
+import { Stack } from "../Stack/Stack.mjs";
+import { Divider } from "../Divider/Divider.mjs";
+import { validTones, AccordionContext } from "./AccordionContext.mjs";
+const validSpaceValues = ["medium", "large", "xlarge"];
+const defaultSpaceForSize = {
+  divided: {
+    xsmall: "medium",
+    small: "medium",
+    standard: "medium",
+    large: "large"
+  },
+  undivided: {
+    xsmall: "large",
+    small: "large",
+    standard: "large",
+    large: "large"
+  }
+};
+const Accordion = ({
+  children,
+  size = "large",
+  tone,
+  weight,
+  space: spaceProp,
+  dividers = true,
+  data,
+  ...restProps
+}) => {
+  assert(
+    spaceProp === void 0 || Object.values(normalizeResponsiveValue(spaceProp)).every(
+      (value) => value === void 0 || validSpaceValues.includes(value)
+    ),
+    `To ensure adequate space for touch targets, 'space' prop values must be one of the following: ${validSpaceValues.map((x) => `"${x}"`).join(", ")}`
+  );
+  assert(
+    tone === void 0 || validTones.includes(tone),
+    `The 'tone' prop should be one of the following: ${validTones.map((x) => `"${x}"`).join(", ")}`
+  );
+  const contextValue = useMemo(
+    () => ({ size, tone, weight }),
+    [size, tone, weight]
+  );
+  const space = spaceProp ?? defaultSpaceForSize[dividers ? "divided" : "undivided"][size];
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: contextValue, children: !dividers ? /* @__PURE__ */ jsx(Stack, { space, data, children }) : /* @__PURE__ */ jsxs(Box, { ...buildDataAttributes({ data, validateRestProps: restProps }), children: [
+    /* @__PURE__ */ jsx(Divider, {}),
+    /* @__PURE__ */ jsx(Box, { paddingY: space, children: /* @__PURE__ */ jsx(Stack, { space, dividers: true, children }) }),
+    /* @__PURE__ */ jsx(Divider, {})
+  ] }) });
+};
+export {
+  Accordion,
+  validSpaceValues
+};

package/dist/lib/components/Accordion/Accordion.playroom.cjs

@@ -0,0 +1,34 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
+const lib_components_Accordion_Accordion_cjs = require("./Accordion.cjs");
+const lib_themes_wireframe_wireframeTheme_css_cjs = require("../../themes/wireframe/wireframeTheme.css.cjs");
+const spaceScale = ["none", ...Object.keys(lib_themes_wireframe_wireframeTheme_css_cjs.wireframe.space.space)];
+const filterSpace = (space) => {
+  const filteredSpace = lib_css_atoms_sprinkles_css_cjs.mapResponsiveValue(space, (value) => {
+    if (spaceScale.includes(value) && !lib_components_Accordion_Accordion_cjs.validSpaceValues.includes(value)) {
+      throw new Error(
+        `To ensure adequate space for touch targets, 'space' prop values must be one of the following: ${lib_components_Accordion_Accordion_cjs.validSpaceValues.map((x) => `"${x}"`).join(", ")}`
+      );
+    }
+    return lib_components_Accordion_Accordion_cjs.validSpaceValues.includes(value) ? value : "medium";
+  });
+  return filteredSpace;
+};
+const Accordion = ({
+  space,
+  size,
+  tone,
+  weight,
+  ...restProps
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  lib_components_Accordion_Accordion_cjs.Accordion,
+  {
+    size: typeof size === "boolean" ? void 0 : size,
+    tone: typeof tone === "boolean" ? void 0 : tone,
+    weight: typeof weight === "boolean" ? void 0 : weight,
+    space: typeof space === "string" || Array.isArray(space) ? filterSpace(space) : void 0,
+    ...restProps
+  }
+);
+exports.Accordion = Accordion;

package/dist/lib/components/Accordion/AccordionContext.cjs

@@ -0,0 +1,8 @@
+"use strict";
+const React = require("react");
+const validTones = ["neutral", "secondary"];
+const AccordionContext = React.createContext(
+  null
+);
+exports.AccordionContext = AccordionContext;
+exports.validTones = validTones;

package/dist/lib/components/Accordion/AccordionContext.mjs

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+const validTones = ["neutral", "secondary"];
+const AccordionContext = createContext(
+  null
+);
+export {
+  AccordionContext,
+  validTones
+};

package/dist/lib/components/Accordion/AccordionItem.cjs

@@ -0,0 +1,136 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const assert = require("assert");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
+const lib_components_Columns_Columns_cjs = require("../Columns/Columns.cjs");
+const lib_components_Column_Column_cjs = require("../Column/Column.cjs");
+const lib_components_Inline_Inline_cjs = require("../Inline/Inline.cjs");
+const lib_components_Disclosure_useDisclosure_cjs = require("../Disclosure/useDisclosure.cjs");
+const lib_components_private_touchable_virtualTouchable_cjs = require("../private/touchable/virtualTouchable.cjs");
+const lib_components_private_Overlay_Overlay_cjs = require("../private/Overlay/Overlay.cjs");
+const lib_components_Accordion_AccordionContext_cjs = require("./AccordionContext.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_Accordion_AccordionItem_css_cjs = require("./AccordionItem.css.cjs");
+const lib_components_icons_IconChevron_IconChevron_cjs = require("../icons/IconChevron/IconChevron.cjs");
+const lib_components_private_hideFocusRings_hideFocusRings_css_cjs = require("../private/hideFocusRings/hideFocusRings.css.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
+const itemSpaceForSize = {
+  xsmall: "small",
+  small: "medium",
+  standard: "medium",
+  large: "large"
+};
+const AccordionItem = ({
+  id,
+  label,
+  children,
+  badge,
+  size: sizeProp,
+  tone: toneProp,
+  weight: weightProp,
+  icon,
+  data,
+  ...restProps
+}) => {
+  const accordionContext = React.useContext(lib_components_Accordion_AccordionContext_cjs.AccordionContext);
+  assert__default.default(
+    !(accordionContext && sizeProp),
+    "Size cannot be set on AccordionItem when inside Accordion. Size should be set on Accordion instead."
+  );
+  assert__default.default(
+    !(accordionContext && toneProp),
+    "Tone cannot be set on AccordionItem when inside Accordion. Tone should be set on Accordion instead."
+  );
+  assert__default.default(
+    !(accordionContext && weightProp),
+    "Weight cannot be set on AccordionItem when inside Accordion. Weight should be set on Accordion instead."
+  );
+  assert__default.default(
+    toneProp === void 0 || lib_components_Accordion_AccordionContext_cjs.validTones.includes(toneProp),
+    `The 'tone' prop should be one of the following: ${lib_components_Accordion_AccordionContext_cjs.validTones.map((x) => `"${x}"`).join(", ")}`
+  );
+  assert__default.default(
+    // @ts-expect-error
+    !badge || badge.type.__isBadge__,
+    `AccordionItem badge prop can only be an instance of Badge. e.g. <AccordionItem badge={<Badge>New</Badge>}>`
+  );
+  assert__default.default(
+    !badge || badge.props.bleedY === void 0,
+    "Badge elements cannot set the 'bleedY' prop when passed to an AccordionItem component"
+  );
+  assert__default.default(
+    !icon || icon.props.size === void 0 && icon.props.tone === void 0,
+    "Icons cannot set the 'size' or 'tone' prop when passed to an AccordionItem component"
+  );
+  const size = (accordionContext == null ? void 0 : accordionContext.size) ?? sizeProp ?? "large";
+  const tone = (accordionContext == null ? void 0 : accordionContext.tone) ?? toneProp ?? "neutral";
+  const weight = (accordionContext == null ? void 0 : accordionContext.weight) ?? weightProp ?? "medium";
+  const itemSpace = itemSpaceForSize[size] ?? "none";
+  assert__default.default(
+    typeof label === "undefined" || typeof label === "string",
+    "Label must be a string"
+  );
+  const { expanded, buttonProps, contentProps } = lib_components_Disclosure_useDisclosure_cjs.useDisclosure({
+    id,
+    ...restProps.expanded !== void 0 ? {
+      onToggle: restProps.onToggle,
+      expanded: restProps.expanded
+    } : {
+      onToggle: restProps.onToggle
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }), children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Box_Box_cjs.Box, { position: "relative", display: "flex", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        lib_components_Box_Box_cjs.Box,
+        {
+          component: "button",
+          type: "button",
+          cursor: "pointer",
+          className: [lib_components_Accordion_AccordionItem_css_cjs.button, lib_components_private_touchable_virtualTouchable_cjs.virtualTouchable()],
+          outline: "none",
+          width: "full",
+          textAlign: "left",
+          ...buttonProps,
+          children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { component: "span", position: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { component: "span", space: itemSpace, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Inline_Inline_cjs.Inline, { component: "span", space: "small", alignY: "center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { size, weight, tone, icon, children: label }),
+              badge ? React.cloneElement(badge, { bleedY: true }) : null
+            ] }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(
+              lib_components_Text_Text_cjs.Text,
+              {
+                size,
+                weight,
+                tone: tone === "neutral" ? "secondary" : tone,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconChevron_IconChevron_cjs.IconChevron, { direction: expanded ? "up" : "down" })
+              }
+            ) })
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        lib_components_private_Overlay_Overlay_cjs.Overlay,
+        {
+          boxShadow: "outlineFocus",
+          borderRadius: "standard",
+          transition: "fast",
+          className: [lib_components_Accordion_AccordionItem_css_cjs.focusRing, lib_components_private_hideFocusRings_hideFocusRings_css_cjs.hideFocusRingsClassName]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_Box_Box_cjs.Box,
+      {
+        paddingTop: itemSpace,
+        display: expanded ? "block" : "none",
+        ...contentProps,
+        children
+      }
+    )
+  ] });
+};
+exports.AccordionItem = AccordionItem;

package/dist/lib/components/Accordion/AccordionItem.css.cjs

@@ -0,0 +1,21 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
+__vanilla_filescope__.setFileScope("src/lib/components/Accordion/AccordionItem.css.ts", "braid-design-system");
+const button = css.style({}, "button");
+const focusRing = css.style({
+  top: cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.space.xsmall),
+  bottom: cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.space.xsmall),
+  left: cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.space.xxsmall),
+  right: cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.space.xxsmall),
+  selectors: {
+    [`${button}:focus ~ &`]: {
+      opacity: 1
+    }
+  }
+}, "focusRing");
+__vanilla_filescope__.endFileScope();
+exports.button = button;
+exports.focusRing = focusRing;

package/dist/lib/components/Accordion/AccordionItem.mjs

@@ -0,0 +1,135 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useContext, cloneElement } from "react";
+import assert from "assert";
+import { Box } from "../Box/Box.mjs";
+import { Text } from "../Text/Text.mjs";
+import { Columns } from "../Columns/Columns.mjs";
+import { Column } from "../Column/Column.mjs";
+import { Inline } from "../Inline/Inline.mjs";
+import { useDisclosure } from "../Disclosure/useDisclosure.mjs";
+import { virtualTouchable } from "../private/touchable/virtualTouchable.mjs";
+import { Overlay } from "../private/Overlay/Overlay.mjs";
+import { AccordionContext, validTones } from "./AccordionContext.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { button, focusRing } from "./AccordionItem.css.mjs";
+import { IconChevron } from "../icons/IconChevron/IconChevron.mjs";
+import { hideFocusRingsClassName } from "../private/hideFocusRings/hideFocusRings.css.mjs";
+const itemSpaceForSize = {
+  xsmall: "small",
+  small: "medium",
+  standard: "medium",
+  large: "large"
+};
+const AccordionItem = ({
+  id,
+  label,
+  children,
+  badge,
+  size: sizeProp,
+  tone: toneProp,
+  weight: weightProp,
+  icon,
+  data,
+  ...restProps
+}) => {
+  const accordionContext = useContext(AccordionContext);
+  assert(
+    !(accordionContext && sizeProp),
+    "Size cannot be set on AccordionItem when inside Accordion. Size should be set on Accordion instead."
+  );
+  assert(
+    !(accordionContext && toneProp),
+    "Tone cannot be set on AccordionItem when inside Accordion. Tone should be set on Accordion instead."
+  );
+  assert(
+    !(accordionContext && weightProp),
+    "Weight cannot be set on AccordionItem when inside Accordion. Weight should be set on Accordion instead."
+  );
+  assert(
+    toneProp === void 0 || validTones.includes(toneProp),
+    `The 'tone' prop should be one of the following: ${validTones.map((x) => `"${x}"`).join(", ")}`
+  );
+  assert(
+    // @ts-expect-error
+    !badge || badge.type.__isBadge__,
+    `AccordionItem badge prop can only be an instance of Badge. e.g. <AccordionItem badge={<Badge>New</Badge>}>`
+  );
+  assert(
+    !badge || badge.props.bleedY === void 0,
+    "Badge elements cannot set the 'bleedY' prop when passed to an AccordionItem component"
+  );
+  assert(
+    !icon || icon.props.size === void 0 && icon.props.tone === void 0,
+    "Icons cannot set the 'size' or 'tone' prop when passed to an AccordionItem component"
+  );
+  const size = (accordionContext == null ? void 0 : accordionContext.size) ?? sizeProp ?? "large";
+  const tone = (accordionContext == null ? void 0 : accordionContext.tone) ?? toneProp ?? "neutral";
+  const weight = (accordionContext == null ? void 0 : accordionContext.weight) ?? weightProp ?? "medium";
+  const itemSpace = itemSpaceForSize[size] ?? "none";
+  assert(
+    typeof label === "undefined" || typeof label === "string",
+    "Label must be a string"
+  );
+  const { expanded, buttonProps, contentProps } = useDisclosure({
+    id,
+    ...restProps.expanded !== void 0 ? {
+      onToggle: restProps.onToggle,
+      expanded: restProps.expanded
+    } : {
+      onToggle: restProps.onToggle
+    }
+  });
+  return /* @__PURE__ */ jsxs(Box, { ...buildDataAttributes({ data, validateRestProps: restProps }), children: [
+    /* @__PURE__ */ jsxs(Box, { position: "relative", display: "flex", children: [
+      /* @__PURE__ */ jsx(
+        Box,
+        {
+          component: "button",
+          type: "button",
+          cursor: "pointer",
+          className: [button, virtualTouchable()],
+          outline: "none",
+          width: "full",
+          textAlign: "left",
+          ...buttonProps,
+          children: /* @__PURE__ */ jsx(Box, { component: "span", position: "relative", children: /* @__PURE__ */ jsxs(Columns, { component: "span", space: itemSpace, children: [
+            /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsxs(Inline, { component: "span", space: "small", alignY: "center", children: [
+              /* @__PURE__ */ jsx(Text, { size, weight, tone, icon, children: label }),
+              badge ? cloneElement(badge, { bleedY: true }) : null
+            ] }) }),
+            /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(
+              Text,
+              {
+                size,
+                weight,
+                tone: tone === "neutral" ? "secondary" : tone,
+                children: /* @__PURE__ */ jsx(IconChevron, { direction: expanded ? "up" : "down" })
+              }
+            ) })
+          ] }) })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Overlay,
+        {
+          boxShadow: "outlineFocus",
+          borderRadius: "standard",
+          transition: "fast",
+          className: [focusRing, hideFocusRingsClassName]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        paddingTop: itemSpace,
+        display: expanded ? "block" : "none",
+        ...contentProps,
+        children
+      }
+    )
+  ] });
+};
+export {
+  AccordionItem
+};

package/dist/lib/components/Accordion/AccordionItem.playroom.cjs

@@ -0,0 +1,42 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_playroom_playroomState_cjs = require("../../playroom/playroomState.cjs");
+const lib_playroom_utils_cjs = require("../../playroom/utils.cjs");
+const lib_components_Accordion_AccordionItem_cjs = require("./AccordionItem.cjs");
+const AccordionItem = ({
+  id,
+  label,
+  stateName,
+  expanded,
+  onToggle,
+  size,
+  tone,
+  weight,
+  badge,
+  icon,
+  ...restProps
+}) => {
+  const fallbackId = lib_playroom_utils_cjs.useFallbackId();
+  const [state, handleChange] = lib_playroom_playroomState_cjs.useFallbackState(
+    stateName,
+    expanded,
+    onToggle,
+    false
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Accordion_AccordionItem_cjs.AccordionItem,
+    {
+      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
+    }
+  );
+};
+exports.AccordionItem = AccordionItem;

package/dist/lib/components/Accordion/AccordionItem.playroom.mjs

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import { useFallbackState } from "../../playroom/playroomState.mjs";
+import { useFallbackId } from "../../playroom/utils.mjs";
+import { AccordionItem as AccordionItem$1 } from "./AccordionItem.mjs";
+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
+    }
+  );
+};
+export {
+  AccordionItem
+};

package/dist/lib/components/Actions/Actions.cjs

@@ -0,0 +1,10 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_components_Actions_ActionsContext_cjs = require("./ActionsContext.cjs");
+const lib_components_Inline_Inline_cjs = require("../Inline/Inline.cjs");
+const Actions = ({ size, data, children }) => {
+  const contextValue = React.useMemo(() => ({ size }), [size]);
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Actions_ActionsContext_cjs.ActionsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Inline_Inline_cjs.Inline, { collapseBelow: "tablet", space: "xsmall", data, children }) });
+};
+exports.Actions = Actions;

package/dist/lib/components/Actions/Actions.mjs

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { ActionsContext } from "./ActionsContext.mjs";
+import { Inline } from "../Inline/Inline.mjs";
+const Actions = ({ size, data, children }) => {
+  const contextValue = useMemo(() => ({ size }), [size]);
+  return /* @__PURE__ */ jsx(ActionsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Inline, { collapseBelow: "tablet", space: "xsmall", data, children }) });
+};
+export {
+  Actions
+};

package/dist/lib/components/Actions/ActionsContext.cjs

@@ -0,0 +1,4 @@
+"use strict";
+const React = require("react");
+const ActionsContext = React.createContext(null);
+exports.ActionsContext = ActionsContext;

package/dist/lib/components/Actions/ActionsContext.mjs

@@ -0,0 +1,5 @@
+import { createContext } from "react";
+const ActionsContext = createContext(null);
+export {
+  ActionsContext
+};

package/dist/lib/components/Alert/Alert.cjs

@@ -0,0 +1,139 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_Columns_Columns_cjs = require("../Columns/Columns.cjs");
+const lib_components_Column_Column_cjs = require("../Column/Column.cjs");
+const lib_components_private_Overlay_Overlay_cjs = require("../private/Overlay/Overlay.cjs");
+const lib_components_Box_BackgroundContext_cjs = require("../Box/BackgroundContext.cjs");
+const lib_css_textAlignedToIcon_css_cjs = require("../../css/textAlignedToIcon.css.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_private_touchable_virtualTouchable_cjs = require("../private/touchable/virtualTouchable.cjs");
+const lib_hooks_useIcon_index_cjs = require("../../hooks/useIcon/index.cjs");
+const lib_components_BraidProvider_BraidThemeContext_cjs = require("../BraidProvider/BraidThemeContext.cjs");
+const lib_components_Alert_Alert_css_cjs = require("./Alert.css.cjs");
+const lib_components_icons_IconClear_IconClear_cjs = require("../icons/IconClear/IconClear.cjs");
+const lib_components_icons_IconPositive_IconPositive_cjs = require("../icons/IconPositive/IconPositive.cjs");
+const lib_components_icons_IconInfo_IconInfo_cjs = require("../icons/IconInfo/IconInfo.cjs");
+const lib_components_icons_IconPromote_IconPromote_cjs = require("../icons/IconPromote/IconPromote.cjs");
+const lib_components_icons_IconCaution_IconCaution_cjs = require("../icons/IconCaution/IconCaution.cjs");
+const lib_components_icons_IconCritical_IconCritical_cjs = require("../icons/IconCritical/IconCritical.cjs");
+const borderRadius = "large";
+const backgroundForTone = {
+  promote: "promoteLight",
+  info: "infoLight",
+  positive: "positiveLight",
+  caution: "cautionLight",
+  critical: "criticalLight"
+};
+const borderForTone = {
+  promote: "borderPromoteLight",
+  info: "borderInfoLight",
+  positive: "borderPositiveLight",
+  caution: "borderCautionLight",
+  critical: "borderCriticalLight"
+};
+const icons = {
+  positive: lib_components_icons_IconPositive_IconPositive_cjs.IconPositive,
+  info: lib_components_icons_IconInfo_IconInfo_cjs.IconInfo,
+  promote: lib_components_icons_IconPromote_IconPromote_cjs.IconPromote,
+  caution: lib_components_icons_IconCaution_IconCaution_cjs.IconCaution,
+  critical: lib_components_icons_IconCritical_IconCritical_cjs.IconCritical
+};
+const Alert = ({
+  tone = "info",
+  children,
+  id,
+  closeLabel = "Close",
+  data,
+  onClose,
+  ...restProps
+}) => {
+  const isLegacyTheme = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme().legacy;
+  const parentBackground = lib_components_Box_BackgroundContext_cjs.useBackground();
+  const Icon = icons[tone];
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    lib_components_Box_Box_cjs.Box,
+    {
+      id,
+      background: backgroundForTone[tone],
+      paddingY: "medium",
+      paddingX: "gutter",
+      borderRadius,
+      position: "relative",
+      overflow: "hidden",
+      role: "alert",
+      "aria-live": "polite",
+      ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(lib_components_Columns_Columns_cjs.Columns, { space: "small", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { tone }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { className: lib_css_textAlignedToIcon_css_cjs.textAlignedToIcon.standard, children }) }),
+          onClose ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsxs(
+            lib_components_Box_Box_cjs.Box,
+            {
+              component: "button",
+              "aria-label": closeLabel,
+              borderRadius: "full",
+              cursor: "pointer",
+              position: "relative",
+              onClick: onClose,
+              outline: "none",
+              transition: "touchable",
+              transform: { active: "touchable" },
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              className: [
+                lib_components_Alert_Alert_css_cjs.closeButton,
+                lib_hooks_useIcon_index_cjs.iconContainerSize(),
+                lib_components_private_touchable_virtualTouchable_cjs.virtualTouchable()
+              ],
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lib_components_private_Overlay_Overlay_cjs.Overlay,
+                  {
+                    component: "span",
+                    boxShadow: "outlineFocus",
+                    transition: "fast",
+                    onlyVisibleForKeyboardNavigation: true,
+                    borderRadius: "full",
+                    className: lib_components_Alert_Alert_css_cjs.closeButtonFocus
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lib_components_private_Overlay_Overlay_cjs.Overlay,
+                  {
+                    component: "span",
+                    background: "surface",
+                    transition: "fast",
+                    borderRadius: "full",
+                    className: lib_components_Alert_Alert_css_cjs.closeButtonHover
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lib_components_Box_Box_cjs.Box,
+                  {
+                    component: "span",
+                    display: "block",
+                    zIndex: 1,
+                    position: "relative",
+                    children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconClear_IconClear_cjs.IconClear, { size: "fill", tone })
+                  }
+                )
+              ]
+            }
+          ) }) : null
+        ] }),
+        isLegacyTheme && parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_private_Overlay_Overlay_cjs.Overlay,
+          {
+            borderRadius,
+            boxShadow: { lightMode: borderForTone[tone] },
+            visible: true
+          }
+        )
+      ]
+    }
+  );
+};
+exports.Alert = Alert;