braid-design-system 32.16.0 → 32.16.2

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

@@ -1,133 +0,0 @@
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-const styles_lib_components_Box_Box_cjs = require("../Box/Box.cjs");
-const styles_lib_components_Columns_Columns_cjs = require("../Columns/Columns.cjs");
-const styles_lib_components_Column_Column_cjs = require("../Column/Column.cjs");
-const styles_lib_components_Accordion_AccordionItem_cjs = require("../Accordion/AccordionItem.cjs");
-const styles_lib_components_Box_BackgroundContext_cjs = require("../Box/BackgroundContext.cjs");
-const styles_lib_css_textAlignedToIcon_css_cjs = require("../../css/textAlignedToIcon.css.cjs");
-const styles_lib_components_Accordion_Accordion_cjs = require("../Accordion/Accordion.cjs");
-const styles_lib_components_private_touchable_virtualTouchable_cjs = require("../private/touchable/virtualTouchable.cjs");
-const styles_lib_hooks_useIcon_index_cjs = require("../../hooks/useIcon/index.cjs");
-const sideEffects_lib_components_BraidProvider_BraidProvider_cjs = require("../../../../side-effects/lib/components/BraidProvider/BraidProvider.cjs");
-const styles_lib_components_Alert_Alert_css_cjs = require("./Alert.css.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: styles_lib_components_Accordion_AccordionItem_cjs.IconPositive,
-  info: styles_lib_components_Accordion_AccordionItem_cjs.IconInfo,
-  promote: styles_lib_components_Accordion_AccordionItem_cjs.IconPromote,
-  caution: styles_lib_components_Accordion_AccordionItem_cjs.IconCaution,
-  critical: styles_lib_components_Accordion_AccordionItem_cjs.IconCritical
-};
-const Alert = ({
-  tone = "info",
-  children,
-  id,
-  closeLabel = "Close",
-  data,
-  onClose,
-  ...restProps
-}) => {
-  const isLegacyTheme = sideEffects_lib_components_BraidProvider_BraidProvider_cjs.useBraidTheme().legacy;
-  const parentBackground = styles_lib_components_Box_BackgroundContext_cjs.useBackground();
-  const Icon = icons[tone];
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    styles_lib_components_Box_Box_cjs.Box,
-    {
-      id,
-      background: backgroundForTone[tone],
-      paddingY: "medium",
-      paddingX: "gutter",
-      borderRadius,
-      position: "relative",
-      overflow: "hidden",
-      role: "alert",
-      "aria-live": "polite",
-      ...styles_lib_components_Accordion_Accordion_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(styles_lib_components_Columns_Columns_cjs.Columns, { space: "small", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { tone }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Box_Box_cjs.Box, { className: styles_lib_css_textAlignedToIcon_css_cjs.textAlignedToIcon.standard, children }) }),
-          onClose ? /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Column_Column_cjs.Column, { width: "content", children: /* @__PURE__ */ jsxRuntime.jsxs(
-            styles_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: [
-                styles_lib_components_Alert_Alert_css_cjs.closeButton,
-                styles_lib_hooks_useIcon_index_cjs.iconContainerSize(),
-                styles_lib_components_private_touchable_virtualTouchable_cjs.virtualTouchable()
-              ],
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  styles_lib_components_Accordion_AccordionItem_cjs.Overlay,
-                  {
-                    component: "span",
-                    boxShadow: "outlineFocus",
-                    transition: "fast",
-                    onlyVisibleForKeyboardNavigation: true,
-                    borderRadius: "full",
-                    className: styles_lib_components_Alert_Alert_css_cjs.closeButtonFocus
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  styles_lib_components_Accordion_AccordionItem_cjs.Overlay,
-                  {
-                    component: "span",
-                    background: "surface",
-                    transition: "fast",
-                    borderRadius: "full",
-                    className: styles_lib_components_Alert_Alert_css_cjs.closeButtonHover
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  styles_lib_components_Box_Box_cjs.Box,
-                  {
-                    component: "span",
-                    display: "block",
-                    zIndex: 1,
-                    position: "relative",
-                    children: /* @__PURE__ */ jsxRuntime.jsx(styles_lib_components_Accordion_AccordionItem_cjs.IconClear, { size: "fill", tone })
-                  }
-                )
-              ]
-            }
-          ) }) : null
-        ] }),
-        isLegacyTheme && parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsxRuntime.jsx(
-          styles_lib_components_Accordion_AccordionItem_cjs.Overlay,
-          {
-            borderRadius,
-            boxShadow: { lightMode: borderForTone[tone] },
-            visible: true
-          }
-        )
-      ]
-    }
-  );
-};
-exports.Alert = Alert;

package/dist/styles/lib/components/Alert/Alert.mjs

@@ -1,134 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Box } from "../Box/Box.mjs";
-import { Columns } from "../Columns/Columns.mjs";
-import { Column } from "../Column/Column.mjs";
-import { Overlay, IconClear, IconPositive, IconInfo, IconPromote, IconCaution, IconCritical } from "../Accordion/AccordionItem.mjs";
-import { useBackground } from "../Box/BackgroundContext.mjs";
-import { textAlignedToIcon } from "../../css/textAlignedToIcon.css.mjs";
-import { buildDataAttributes } from "../Accordion/Accordion.mjs";
-import { virtualTouchable } from "../private/touchable/virtualTouchable.mjs";
-import { iconContainerSize } from "../../hooks/useIcon/index.mjs";
-import { useBraidTheme } from "../../../../side-effects/lib/components/BraidProvider/BraidProvider.mjs";
-import { closeButton, closeButtonFocus, closeButtonHover } from "./Alert.css.mjs";
-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: IconPositive,
-  info: IconInfo,
-  promote: IconPromote,
-  caution: IconCaution,
-  critical: IconCritical
-};
-const Alert = ({
-  tone = "info",
-  children,
-  id,
-  closeLabel = "Close",
-  data,
-  onClose,
-  ...restProps
-}) => {
-  const isLegacyTheme = useBraidTheme().legacy;
-  const parentBackground = useBackground();
-  const Icon = icons[tone];
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      id,
-      background: backgroundForTone[tone],
-      paddingY: "medium",
-      paddingX: "gutter",
-      borderRadius,
-      position: "relative",
-      overflow: "hidden",
-      role: "alert",
-      "aria-live": "polite",
-      ...buildDataAttributes({ data, validateRestProps: restProps }),
-      children: [
-        /* @__PURE__ */ jsxs(Columns, { space: "small", children: [
-          /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsx(Icon, { tone }) }),
-          /* @__PURE__ */ jsx(Column, { children: /* @__PURE__ */ jsx(Box, { className: textAlignedToIcon.standard, children }) }),
-          onClose ? /* @__PURE__ */ jsx(Column, { width: "content", children: /* @__PURE__ */ jsxs(
-            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: [
-                closeButton,
-                iconContainerSize(),
-                virtualTouchable()
-              ],
-              children: [
-                /* @__PURE__ */ jsx(
-                  Overlay,
-                  {
-                    component: "span",
-                    boxShadow: "outlineFocus",
-                    transition: "fast",
-                    onlyVisibleForKeyboardNavigation: true,
-                    borderRadius: "full",
-                    className: closeButtonFocus
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Overlay,
-                  {
-                    component: "span",
-                    background: "surface",
-                    transition: "fast",
-                    borderRadius: "full",
-                    className: closeButtonHover
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  Box,
-                  {
-                    component: "span",
-                    display: "block",
-                    zIndex: 1,
-                    position: "relative",
-                    children: /* @__PURE__ */ jsx(IconClear, { size: "fill", tone })
-                  }
-                )
-              ]
-            }
-          ) }) : null
-        ] }),
-        isLegacyTheme && parentBackground.lightMode !== "surface" && /* @__PURE__ */ jsx(
-          Overlay,
-          {
-            borderRadius,
-            boxShadow: { lightMode: borderForTone[tone] },
-            visible: true
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  Alert
-};