@preply/ds-web-lib 11.0.0 → 11.1.0

package/dist/components/Box/Box.js

@@ -1,95 +1,3 @@
-import { jsx } from "react/jsx-runtime";
-import { BOX_RADIUS_DEFAULT, LAYOUT_TAG_DEFAULT, BOX_PADDING_DEFAULT } from "@preply/ds-core";
-import { moduleClassNames, stringClassNames, getDatasetProps } from "@preply/ds-web-core";
-import { forwardRef } from "react";
-import { filterAttributesPassedByRadixUIAtRuntime } from "../../utils/filterAttributesPassedByRadixUIAtRuntime.js";
-import { g as getLayoutPaddingClassnames } from "../../layout-padding-D5I6rRlL.js";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import '../../assets/Box.css';const Box$1 = "Box__sKgFi";
-const styles = {
-  Box: Box$1,
-  "Box--box-radius-0": "Box--box-radius-0__54Jf2",
-  "Box--box-radius-2": "Box--box-radius-2__pEI33",
-  "Box--box-radius-4": "Box--box-radius-4__z3MJd",
-  "Box--box-radius-8": "Box--box-radius-8__iQAzJ",
-  "Box--box-radius-16": "Box--box-radius-16__NGCMF",
-  "Box--box-radius-300": "Box--box-radius-300__0X-HP",
-  "Box--narrow-l--box-radius-0": "Box--narrow-l--box-radius-0__nCUtM",
-  "Box--narrow-l--box-radius-2": "Box--narrow-l--box-radius-2__Cze1y",
-  "Box--narrow-l--box-radius-4": "Box--narrow-l--box-radius-4__G5JK-",
-  "Box--narrow-l--box-radius-8": "Box--narrow-l--box-radius-8__yWuos",
-  "Box--narrow-l--box-radius-16": "Box--narrow-l--box-radius-16__Zyr3O",
-  "Box--narrow-l--box-radius-300": "Box--narrow-l--box-radius-300__YWYwi",
-  "Box--medium-s--box-radius-0": "Box--medium-s--box-radius-0__WKjfo",
-  "Box--medium-s--box-radius-2": "Box--medium-s--box-radius-2__aRF-8",
-  "Box--medium-s--box-radius-4": "Box--medium-s--box-radius-4__rLRaG",
-  "Box--medium-s--box-radius-8": "Box--medium-s--box-radius-8__bfknI",
-  "Box--medium-s--box-radius-16": "Box--medium-s--box-radius-16__ph01E",
-  "Box--medium-s--box-radius-300": "Box--medium-s--box-radius-300__TK3VE",
-  "Box--medium-l--box-radius-0": "Box--medium-l--box-radius-0__lPezW",
-  "Box--medium-l--box-radius-2": "Box--medium-l--box-radius-2__bmunw",
-  "Box--medium-l--box-radius-4": "Box--medium-l--box-radius-4__IUY2C",
-  "Box--medium-l--box-radius-8": "Box--medium-l--box-radius-8__Q67vL",
-  "Box--medium-l--box-radius-16": "Box--medium-l--box-radius-16__-vjtO",
-  "Box--medium-l--box-radius-300": "Box--medium-l--box-radius-300__RnKpK",
-  "Box--wide-s--box-radius-0": "Box--wide-s--box-radius-0__q7wPC",
-  "Box--wide-s--box-radius-2": "Box--wide-s--box-radius-2__OXe-M",
-  "Box--wide-s--box-radius-4": "Box--wide-s--box-radius-4__sp-lm",
-  "Box--wide-s--box-radius-8": "Box--wide-s--box-radius-8__i3loZ",
-  "Box--wide-s--box-radius-16": "Box--wide-s--box-radius-16__lkphx",
-  "Box--wide-s--box-radius-300": "Box--wide-s--box-radius-300__HNn5b",
-  "Box--wide-l--box-radius-0": "Box--wide-l--box-radius-0__yBz-a",
-  "Box--wide-l--box-radius-2": "Box--wide-l--box-radius-2__-9J90",
-  "Box--wide-l--box-radius-4": "Box--wide-l--box-radius-4__WWouo",
-  "Box--wide-l--box-radius-8": "Box--wide-l--box-radius-8__FjMqp",
-  "Box--wide-l--box-radius-16": "Box--wide-l--box-radius-16__Nf6SP",
-  "Box--wide-l--box-radius-300": "Box--wide-l--box-radius-300__tdPjt",
-  "Box--background-primary": "Box--background-primary__iwTv3",
-  "Box--background-secondary": "Box--background-secondary__BDhTr",
-  "Box--background-tertiary": "Box--background-tertiary__71k6r",
-  "Box--background-overlay": "Box--background-overlay__K0eEJ",
-  "Box--background-disabled": "Box--background-disabled__5J3YK",
-  "Box--background-brand": "Box--background-brand__uZPPV",
-  "Box--background-brandB2b": "Box--background-brandB2b__-CJU6",
-  "Box--background-accentLight": "Box--background-accentLight__xKZph",
-  "Box--background-accentDark": "Box--background-accentDark__Zr7i7",
-  "Box--background-positiveLight": "Box--background-positiveLight__dPlfk",
-  "Box--background-positiveDark": "Box--background-positiveDark__Z5umI",
-  "Box--background-infoLight": "Box--background-infoLight__jOsWt",
-  "Box--background-infoDark": "Box--background-infoDark__17bK4",
-  "Box--background-warningLight": "Box--background-warningLight__o5wMl",
-  "Box--background-warningDark": "Box--background-warningDark__VxpPI",
-  "Box--background-criticalLight": "Box--background-criticalLight__h-v7I",
-  "Box--background-criticalDark": "Box--background-criticalDark__X4qyY",
-  "Box--background-statusOnline": "Box--background-statusOnline__RsqXY",
-  "Box--background-statusOffline": "Box--background-statusOffline__n49GJ",
-  "Box--background-primaryInverted": "Box--background-primaryInverted__R1bFi",
-  "Box--background-secondaryInverted": "Box--background-secondaryInverted__PUg12",
-  "Box--background-tertiaryInverted": "Box--background-tertiaryInverted__lwYUb"
-};
-const Box = forwardRef(function BoxComponent({
-  children,
-  background = "primary",
-  radius = BOX_RADIUS_DEFAULT,
-  padding = BOX_PADDING_DEFAULT,
-  tag,
-  dataset,
-  ...restPropsPassedByRadixUI
-}, ref) {
-  const classNames = moduleClassNames(styles, webComponentNames.Box, [stringClassNames("box-radius", radius), stringClassNames("background", background)]);
-  const paddingClassNames = getLayoutPaddingClassnames(padding);
-  const Tag = tag != null ? tag : LAYOUT_TAG_DEFAULT;
-  const allClassNames = [...classNames, ...paddingClassNames];
-  const props = {
-    ...filterAttributesPassedByRadixUIAtRuntime(restPropsPassedByRadixUI),
-    ref,
-    className: allClassNames.join(" "),
-    ...getDatasetProps(dataset, {
-      preplyDsComponent: webComponentNames.Box
-    })
-  };
-  return /* @__PURE__ */ jsx(Tag, { ...props, children });
-});
-export {
-  Box
-};
+import "../../jsx-runtime-i4KUlhDu.js";
+import { t as Box } from "../../Box-BJBE9KNm.js";
+export { Box };

package/dist/components/BubbleCounter/BubbleCounter.js

@@ -1,31 +1,26 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
+import { t as BubbleCounter_module_default } from "../../BubbleCounter.module-BU2S0euA.js";
+import "react";
 import { getDatasetProps } from "@preply/ds-web-core";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { b as bubbleCounterStyles } from "../../BubbleCounter.module-QMwXWFIS.js";
-const BubbleCounter = ({
-  count,
-  showEmpty = false,
-  limit = 99,
-  size = "large",
-  variant = "dark",
-  children,
-  dataset
-}) => {
-  if (count === void 0 && !showEmpty) {
-    return children != null ? children : /* @__PURE__ */ jsx(Fragment, {});
-  }
-  const counter = /* @__PURE__ */ jsx("span", { className: [bubbleCounterStyles.bubbleCounter, bubbleCounterStyles[`size-${size}`], bubbleCounterStyles[`variant-${variant}`]].join(" "), ...getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.BubbleCounter
-  }), children: typeof count === "number" && /* eslint-disable-next-line formatjs/no-literal-string-in-jsx */
-  (count > limit ? `${limit}+` : count) });
-  if (!children) {
-    return counter;
-  }
-  return /* @__PURE__ */ jsxs("div", { className: bubbleCounterStyles.childTargetOverlay, children: [
-    counter,
-    children
-  ] });
-};
-export {
-  BubbleCounter
+//#region src/components/BubbleCounter/BubbleCounter.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var BubbleCounter = ({ count, showEmpty = false, limit = 99, size = "large", variant = "dark", children, dataset }) => {
+	if (count === void 0 && !showEmpty) return children !== null && children !== void 0 ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {});
+	const counter = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+		className: [
+			BubbleCounter_module_default.bubbleCounter,
+			BubbleCounter_module_default[`size-${size}`],
+			BubbleCounter_module_default[`variant-${variant}`]
+		].join(" "),
+		...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.BubbleCounter }),
+		children: typeof count === "number" && (count > limit ? `${limit}+` : count)
+	});
+	if (!children) return counter;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: BubbleCounter_module_default.childTargetOverlay,
+		children: [counter, children]
+	});
 };
+//#endregion
+export { BubbleCounter };

package/dist/components/Button/Button.js

@@ -1,80 +1,4 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { BUTTON_SIZE_DEFAULT, BUTTON_VARIANT_DEFAULT } from "@preply/ds-core";
-import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { moduleClassNames, stringClassNames } from "@preply/ds-web-core";
-import { forwardRef } from "react";
-import { renderIcon } from "../../utils/render-icon.js";
-import { ButtonBase } from "../private/ButtonBase/ButtonBase.js";
-import '../../assets/Button.css';const Button$1 = "Button__lJRiF";
-const leadingIcon = "leadingIcon__OZj4E";
-const trailingIcon = "trailingIcon__d6fiW";
-const icon = "icon__M1Hs-";
-const styles = {
-  Button: Button$1,
-  leadingIcon,
-  trailingIcon,
-  "Button--size-s": "Button--size-s__02RwJ",
-  icon,
-  "Button--size-m": "Button--size-m__m1kGp",
-  "Button--size-small": "Button--size-small__hrJyO",
-  "Button--size-medium": "Button--size-medium__ToEik",
-  "Button--size-l": "Button--size-l__rHzPz",
-  "Button--size-large": "Button--size-large__2ARbP",
-  "Button--narrow-l--size-s": "Button--narrow-l--size-s__1iIxT",
-  "Button--narrow-l--size-m": "Button--narrow-l--size-m__Hn-71",
-  "Button--narrow-l--size-small": "Button--narrow-l--size-small__clOC0",
-  "Button--narrow-l--size-medium": "Button--narrow-l--size-medium__4CZXu",
-  "Button--narrow-l--size-l": "Button--narrow-l--size-l__VsnrA",
-  "Button--narrow-l--size-large": "Button--narrow-l--size-large__NNkfS",
-  "Button--medium-s--size-s": "Button--medium-s--size-s__JOAqd",
-  "Button--medium-s--size-m": "Button--medium-s--size-m__hQdSS",
-  "Button--medium-s--size-small": "Button--medium-s--size-small__EweV7",
-  "Button--medium-s--size-medium": "Button--medium-s--size-medium__72Buq",
-  "Button--medium-s--size-l": "Button--medium-s--size-l__cRcEp",
-  "Button--medium-s--size-large": "Button--medium-s--size-large__PaPLT",
-  "Button--medium-l--size-s": "Button--medium-l--size-s__FrGUu",
-  "Button--medium-l--size-m": "Button--medium-l--size-m__SWC53",
-  "Button--medium-l--size-small": "Button--medium-l--size-small__36CyE",
-  "Button--medium-l--size-medium": "Button--medium-l--size-medium__ySDr1",
-  "Button--medium-l--size-l": "Button--medium-l--size-l__ImFHA",
-  "Button--medium-l--size-large": "Button--medium-l--size-large__o93q-",
-  "Button--wide-s--size-s": "Button--wide-s--size-s__fGKJg",
-  "Button--wide-s--size-m": "Button--wide-s--size-m__qAksG",
-  "Button--wide-s--size-small": "Button--wide-s--size-small__sKZpV",
-  "Button--wide-s--size-medium": "Button--wide-s--size-medium__ovQ2U",
-  "Button--wide-s--size-l": "Button--wide-s--size-l__MTeN9",
-  "Button--wide-s--size-large": "Button--wide-s--size-large__vQ0OS",
-  "Button--wide-l--size-s": "Button--wide-l--size-s__ROYdJ",
-  "Button--wide-l--size-m": "Button--wide-l--size-m__4cVoF",
-  "Button--wide-l--size-small": "Button--wide-l--size-small__RU5x9",
-  "Button--wide-l--size-medium": "Button--wide-l--size-medium__Hv0g8",
-  "Button--wide-l--size-l": "Button--wide-l--size-l__r0ktJ",
-  "Button--wide-l--size-large": "Button--wide-l--size-large__WblYc"
-};
-const Button = forwardRef(function ButtonComponent({
-  variant = BUTTON_VARIANT_DEFAULT,
-  size = BUTTON_SIZE_DEFAULT,
-  url,
-  a11yLabel,
-  leadingSvgIcon,
-  trailingSvgIcon,
-  children,
-  ...props
-}, ref) {
-  const hasIcon = !!leadingSvgIcon || !!trailingSvgIcon;
-  const classNames = moduleClassNames(styles, webComponentNames.Button, [stringClassNames("size", size)]);
-  return /* @__PURE__ */ jsxs(ButtonBase, { ...props, ref, isIconButton: false, variant, size, url, a11yLabel, preplyDsComponent: webComponentNames.Button, className: hasIcon ? classNames.join(" ") : "", children: [
-    !!leadingSvgIcon && /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${styles.leadingIcon}`, children: renderIcon(leadingSvgIcon, {
-      "aria-hidden": "true",
-      focusable: "false"
-    }) }),
-    children,
-    !!trailingSvgIcon && /* @__PURE__ */ jsx("span", { className: `${styles.icon} ${styles.trailingIcon}`, children: renderIcon(trailingSvgIcon, {
-      "aria-hidden": "true",
-      focusable: "false"
-    }) })
-  ] });
-});
-export {
-  Button
-};
+import "../../render-icon-Ch3b2dE0.js";
+import "../../jsx-runtime-i4KUlhDu.js";
+import { t as Button } from "../../Button-C35BZJZT.js";
+export { Button };

package/dist/components/CalloutBanner/CalloutBanner.js

@@ -1,15 +1,64 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { t as require_jsx_runtime } from "../../jsx-runtime-i4KUlhDu.js";
 import { CalloutBannerRoot } from "./primitives/CalloutBannerRoot.js";
-const CalloutBanner = forwardRef(function CalloutBannerComponent({
-  variant = "neutral",
-  size = "regular",
-  children,
-  dataset
-}, ref) {
-  return /* @__PURE__ */ jsx(CalloutBannerRoot, { ref, variant, size, dataset, children });
+import { forwardRef } from "react";
+//#region src/components/CalloutBanner/CalloutBanner.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* The Callout banner is used to share informational, helpful, or promotional
+* messages within a product interface.
+*
+* It appears inline within a page or section, not at the top of the screen.
+* Its goal is to draw gentle attention without overpowering surrounding content.
+*
+* Do not use for urgent or blocking information—use the `<AlertBanner />` instead.
+*
+* @example
+* // Neutral banner
+* <CalloutBanner>
+*   This is a neutral banner.
+* </CalloutBanner>
+*
+* @example
+* // Info banner with leading icon
+* <CalloutBanner variant="info">
+*   <CalloutBannerIcon />
+*   This is an info banner.
+* </CalloutBanner>
+*
+* @example
+* // Dismissible banner with trailing dismiss button
+* {showBanner && (
+*   <CalloutBanner>
+*     <CalloutBannerText>
+*       This is a dismissible banner.
+*     </CalloutBannerText>
+*     <CalloutBannerDismissButton onClick={() => setShowBanner(false)} />
+*   </CalloutBanner>
+* )}
+*
+* @example
+* // Custom banner using `CalloutBannerRoot` primitive and `className` prop
+* {showBanner && (
+*   <CalloutBannerRoot className={myCustomStyles.banner}>
+*     <CalloutBannerIcon svg={myCustomIcon} className={myCustomStyles.icon} />
+*     <CalloutBannerText className={myCustomStyles.text}>
+*       This is a custom banner.
+*     </CalloutBannerText>
+*     <CalloutBannerDismissButton>
+*       <MyCustomButton onClick={() => setShowBanner(false)} />
+*     </CalloutBannerDismissButton>
+*   </CalloutBannerRoot>
+* )}
+*/
+var CalloutBanner = forwardRef(function CalloutBannerComponent({ variant = "neutral", size = "regular", children, dataset }, ref) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalloutBannerRoot, {
+		ref,
+		variant,
+		size,
+		dataset,
+		children
+	});
 });
-export {
-  CalloutBanner
-};
+//#endregion
+export { CalloutBanner };

package/dist/components/CalloutBanner/primitives/CalloutBannerDismissButton.js

@@ -1,28 +1,56 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import "../../../render-icon-Ch3b2dE0.js";
+import { t as require_jsx_runtime } from "../../../jsx-runtime-i4KUlhDu.js";
+import { t as index_module_default } from "../../../index.module-1c7ENvxc.js";
+import { t as IconButton } from "../../../IconButton-BPKpgfep.js";
+import { genericAriaLabels } from "../../../utils/shared-strings.js";
 import { forwardRef } from "react";
 import { useIntl } from "react-intl";
 import CloseSvg from "@preply/ds-media-icons/dist/24/TokyoUIClose.svg";
-import { IconButton } from "../../IconButton/IconButton.js";
-import { genericAriaLabels } from "../../../utils/shared-strings.js";
-import { s as styles } from "../../../index.module-Q9TzIR6B.js";
-const CalloutBannerDismissButton = forwardRef(function CalloutBannerDismissButton2({
-  children,
-  className = "",
-  ...props
-}, ref) {
-  const classNames = [styles.dismissButton, className].join(" ");
-  return /* @__PURE__ */ jsx("div", { ref, className: classNames, children: children != null ? children : /* @__PURE__ */ jsx(CalloutBannerDefaultDismissButton, { ...props }) });
+//#region src/components/CalloutBanner/primitives/CalloutBannerDismissButton.tsx
+var import_jsx_runtime = require_jsx_runtime();
+/**
+* A dismiss button for the callout banner.
+*
+* Note: The root of this component is a `div` element. It renders the default
+* dismiss button by default, but you can override it with the `children` prop.
+* You can also use the `className` prop to override the default styles for the
+* container.
+*
+* @example
+* // Default dismiss button
+* <CalloutBannerDismissButton onClick={() => setShowBanner(false)} />
+*
+* @example
+* // Custom dismiss button
+* <CalloutBannerDismissButton>
+*   <MyCustomButton onClick={() => setShowBanner(false)} />
+* </CalloutBannerDismissButton>
+*
+* @example
+* // Custom dismiss button with style override class name
+* <CalloutBannerDismissButton className={myCustomStyles.dismissButtonContainer}>
+*   <MyCustomButton onClick={() => setShowBanner(false)} />
+* </CalloutBannerDismissButton>
+*/
+var CalloutBannerDismissButton = forwardRef(function CalloutBannerDismissButton({ children, className = "", ...props }, ref) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		ref,
+		className: [index_module_default.dismissButton, className].join(" "),
+		children: children !== null && children !== void 0 ? children : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalloutBannerDefaultDismissButton, { ...props })
+	});
 });
-const CalloutBannerDefaultDismissButton = forwardRef(function CalloutBannerDismissButton3({
-  onClick,
-  dataset
-}, ref) {
-  const {
-    formatMessage
-  } = useIntl();
-  return /* @__PURE__ */ jsx(IconButton, { ref, onClick, svg: CloseSvg, size: "small", variant: "ghost", assistiveText: formatMessage(genericAriaLabels.close), dataset });
+var CalloutBannerDefaultDismissButton = forwardRef(function CalloutBannerDismissButton({ onClick, dataset }, ref) {
+	const { formatMessage } = useIntl();
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(IconButton, {
+		ref,
+		onClick,
+		svg: CloseSvg,
+		size: "small",
+		variant: "ghost",
+		assistiveText: formatMessage(genericAriaLabels.close),
+		dataset
+	});
 });
-export {
-  CalloutBannerDismissButton
-};
+//#endregion
+export { CalloutBannerDismissButton };

package/dist/components/CalloutBanner/primitives/CalloutBannerIcon.js

@@ -1,50 +1,91 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { t as Icon } from "../../../Icon-CixAeOSd.js";
+import "../../../render-icon-Ch3b2dE0.js";
+import { t as require_jsx_runtime } from "../../../jsx-runtime-i4KUlhDu.js";
+import { t as index_module_default } from "../../../index.module-1c7ENvxc.js";
+import { CalloutBannerContext } from "./CalloutBannerRoot.js";
 import { forwardRef, useContext } from "react";
-import TokyoUIInfo from "@preply/ds-media-icons/dist/24/TokyoUIInfo.svg";
-import TokyoUIErrorWarning from "@preply/ds-media-icons/dist/24/TokyoUIErrorWarning.svg";
-import TokyoUIError from "@preply/ds-media-icons/dist/24/TokyoUIError.svg";
 import TokyoUICheck from "@preply/ds-media-icons/dist/24/TokyoUICheck.svg";
-import { Icon } from "../../Icon/Icon.js";
-import { s as styles } from "../../../index.module-Q9TzIR6B.js";
-import { CalloutBannerContext } from "./CalloutBannerRoot.js";
-const CalloutBannerInfoIcon = () => /* @__PURE__ */ jsx(Icon, { svg: TokyoUIInfo, size: "24" });
-const CalloutBannerPositiveIcon = () => /* @__PURE__ */ jsx(Icon, { svg: TokyoUICheck, size: "24" });
-const CalloutBannerWarningIcon = () => /* @__PURE__ */ jsx(Icon, { svg: TokyoUIErrorWarning, size: "24" });
-const CalloutBannerCriticalIcon = () => /* @__PURE__ */ jsx(Icon, { svg: TokyoUIError, size: "24" });
-const calloutBannerIconMap = {
-  info: CalloutBannerInfoIcon,
-  positive: CalloutBannerPositiveIcon,
-  warning: CalloutBannerWarningIcon,
-  critical: CalloutBannerCriticalIcon
-};
-const CalloutBannerIcon = forwardRef(function CalloutBannerIcon2({
-  svg,
-  children,
-  className = ""
-}, ref) {
-  const {
-    variant
-  } = useContext(CalloutBannerContext);
-  const classNames = [styles.icon, className].join(" ");
-  let icon = null;
-  if (children) {
-    icon = children;
-  } else if (svg) {
-    icon = /* @__PURE__ */ jsx(Icon, { svg, size: "24" });
-  } else if (variant && variant in calloutBannerIconMap) {
-    icon = calloutBannerIconMap[variant]();
-  }
-  if (!icon) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx("div", { ref, className: classNames, children: icon });
+import TokyoUIError from "@preply/ds-media-icons/dist/24/TokyoUIError.svg";
+import TokyoUIErrorWarning from "@preply/ds-media-icons/dist/24/TokyoUIErrorWarning.svg";
+import TokyoUIInfo from "@preply/ds-media-icons/dist/24/TokyoUIInfo.svg";
+//#region src/components/CalloutBanner/primitives/CalloutBannerIcon.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var CalloutBannerInfoIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+	svg: TokyoUIInfo,
+	size: "24"
+});
+var CalloutBannerPositiveIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+	svg: TokyoUICheck,
+	size: "24"
 });
-export {
-  CalloutBannerCriticalIcon,
-  CalloutBannerIcon,
-  CalloutBannerInfoIcon,
-  CalloutBannerPositiveIcon,
-  CalloutBannerWarningIcon,
-  calloutBannerIconMap
+var CalloutBannerWarningIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+	svg: TokyoUIErrorWarning,
+	size: "24"
+});
+var CalloutBannerCriticalIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+	svg: TokyoUIError,
+	size: "24"
+});
+var calloutBannerIconMap = {
+	info: CalloutBannerInfoIcon,
+	positive: CalloutBannerPositiveIcon,
+	warning: CalloutBannerWarningIcon,
+	critical: CalloutBannerCriticalIcon
 };
+/**
+* An icon for the callout banner.
+*
+* This component will render the appropriate icon based on the parent
+* `CalloutBanner` component's `variant` prop — these semantic icons are also
+* exported for the following variants:
+* - `info` -> `<CalloutBannerInfoIcon />`
+* - `positive` -> `<CalloutBannerPositiveIcon />`
+* - `warning` -> `<CalloutBannerWarningIcon />`
+* - `critical` -> `<CalloutBannerCriticalIcon />`
+*
+* The icon can be overridden by passing a custom SVG icon via the `svg` prop.
+*
+* If you want to place any leading element inside of the `CalloutBanner`,
+* with the same spacing as the icon, you can pass it as a child element.
+*
+* Note: The root of this component is a `div` element. You can use the
+* `className` prop to override the default styles for the **container**.
+*
+* @example
+* // Context-aware icon
+* <CalloutBannerIcon />
+*
+* @example
+* // Custom SVG icon
+* <CalloutBannerIcon svg={myCustomIcon} />
+*
+* @example
+* // Icon container style override class name
+* <CalloutBannerIcon className={myCustomStyles.icon} />
+*
+* @example
+* // Custom leading element
+* <CalloutBannerIcon>
+*   <Avatar size="24" />
+* </CalloutBannerIcon>
+*/
+var CalloutBannerIcon = forwardRef(function CalloutBannerIcon({ svg, children, className = "" }, ref) {
+	const { variant } = useContext(CalloutBannerContext);
+	const classNames = [index_module_default.icon, className].join(" ");
+	let icon = null;
+	if (children) icon = children;
+	else if (svg) icon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, {
+		svg,
+		size: "24"
+	});
+	else if (variant && variant in calloutBannerIconMap) icon = calloutBannerIconMap[variant]();
+	if (!icon) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		ref,
+		className: classNames,
+		children: icon
+	});
+});
+//#endregion
+export { CalloutBannerCriticalIcon, CalloutBannerIcon, CalloutBannerInfoIcon, CalloutBannerPositiveIcon, CalloutBannerWarningIcon, calloutBannerIconMap };

package/dist/components/CalloutBanner/primitives/CalloutBannerRoot.js

@@ -1,30 +1,56 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { t as require_jsx_runtime } from "../../../jsx-runtime-i4KUlhDu.js";
+import { t as index_module_default } from "../../../index.module-1c7ENvxc.js";
 import { createContext, forwardRef } from "react";
 import { getDatasetProps } from "@preply/ds-web-core";
 import { webComponentNames } from "@preply/ds-visual-coverage-preply-component-names";
-import { s as styles } from "../../../index.module-Q9TzIR6B.js";
-const CalloutBannerContext = createContext({
-  variant: "neutral",
-  size: "regular"
+//#region src/components/CalloutBanner/primitives/CalloutBannerRoot.tsx
+var import_jsx_runtime = require_jsx_runtime();
+var CalloutBannerContext = createContext({
+	variant: "neutral",
+	size: "regular"
 });
-const CalloutBannerRoot = forwardRef(function CalloutBannerRoot2({
-  variant = "neutral",
-  size = "regular",
-  children,
-  dataset,
-  className = "",
-  ...props
-}, ref) {
-  const classNames = [styles.banner, className].join(" ");
-  return /* @__PURE__ */ jsx(CalloutBannerContext.Provider, { value: {
-    variant,
-    size
-  }, children: /* @__PURE__ */ jsx("div", { ref, role: "note", className: classNames, ...getDatasetProps(dataset, {
-    preplyDsComponent: webComponentNames.CalloutBanner
-  }), "data-variant": variant, "data-size": size, ...props, children }) });
+/**
+* The root primitive for the callout banner.
+*
+* This component is used to create a custom callout banner; it accepts a
+* `className prop to override the default styles for the callout banner
+* container. The `variant` prop is exposed as a data attribute on the root
+* element to aid in styling.
+*
+* You can use the other `CalloutBanner*` subcomponents as you normally would
+* with the `CalloutBanner` component.
+*
+* @example
+* // Custom callout banner with style override class name
+* <CalloutBannerRoot className={customStyles.pinkBanner}>
+*   {children}
+* </CalloutBannerRoot>
+*
+* @example
+* // CSS
+* .pinkBanner[data-variant='neutral'] {
+*   background-color: hotpink;
+* }
+*/
+var CalloutBannerRoot = forwardRef(function CalloutBannerRoot({ variant = "neutral", size = "regular", children, dataset, className = "", ...props }, ref) {
+	const classNames = [index_module_default.banner, className].join(" ");
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalloutBannerContext.Provider, {
+		value: {
+			variant,
+			size
+		},
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			ref,
+			role: "note",
+			className: classNames,
+			...getDatasetProps(dataset, { preplyDsComponent: webComponentNames.CalloutBanner }),
+			"data-variant": variant,
+			"data-size": size,
+			...props,
+			children
+		})
+	});
 });
-export {
-  CalloutBannerContext,
-  CalloutBannerRoot
-};
+//#endregion
+export { CalloutBannerContext, CalloutBannerRoot };