@d4gger/design-system 3.0.0 → 4.0.0

package/README.md

@@ -12,6 +12,25 @@ pnpm add @d4gger/design-system react react-dom lucide-react
 React 18 and 19 are supported. Add optional peers only for the advanced
 surfaces you use.
 
+## Migrating from 3.x
+
+Text and Heading now accept single typography and spacing values. Replace
+responsive maps on `size`, `color`, `align`, `wrap`, `trim`, `weight`, and
+the margin/padding props with scalar values. Choose one readable type role;
+put responsive spacing and composition on layout primitives such as Flex and Grid.
+
+```tsx
+// 3.x
+<Text size={{ initial: '2', md: '3' }}>Workspace update</Text>
+
+// 4.x
+<Text size="3">Workspace update</Text>
+```
+
+Responsive layout props remain available. There is no compatibility adapter
+for the removed typography maps. Rebuild generated declarations and styles
+together when upgrading.
+
 ## Start using it
 
 Import the complete stylesheet once at application entry:

package/dist/{components/controlGroup/ControlGroup.cjs → _internal/floatingLayer.cjs}

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -26,31 +27,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var ControlGroup_exports = {};
-__export(ControlGroup_exports, {
-  ControlGroup: () => ControlGroup
+var floatingLayer_exports = {};
+__export(floatingLayer_exports, {
+  FloatingLayerHostContext: () => FloatingLayerHostContext,
+  useFloatingLayerHost: () => useFloatingLayerHost
 });
-module.exports = __toCommonJS(ControlGroup_exports);
+module.exports = __toCommonJS(floatingLayer_exports);
 var React = __toESM(require("react"), 1);
-var import_classnames = __toESM(require("classnames"), 1);
-var import_react_slot = require("@radix-ui/react-slot");
-var import_extractProps = require("../../_internal/helpers/extractProps");
-var import_controlGroup = require("./controlGroup.props");
-var import_jsx_runtime = require("react/jsx-runtime");
-const ControlGroup = React.forwardRef((props, forwardedRef) => {
-  const { asChild, className, size, radius, ...controlGroupProps } = (0, import_extractProps.extractProps)(props, import_controlGroup.controlGroupPropDefs);
-  const Comp = asChild ? import_react_slot.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    Comp,
-    {
-      ...controlGroupProps,
-      ref: forwardedRef,
-      role: props.role ?? "group",
-      className: (0, import_classnames.default)("dsx-control-group", className),
-      "data-size": size,
-      "data-group-radius": radius
-    }
-  );
-});
-ControlGroup.displayName = "ControlGroup";
-//# sourceMappingURL=ControlGroup.cjs.map
+const FloatingLayerHostContext = React.createContext(false);
+function useFloatingLayerHost() {
+  return React.useContext(FloatingLayerHostContext);
+}
+//# sourceMappingURL=floatingLayer.cjs.map

package/dist/_internal/floatingLayer.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/_internal/floatingLayer.ts"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\n/**\n * Shared floating-layer tier signal (nested-tier policy).\n *\n * Menu-tier floating content (`Select`, `Combobox`, `DropdownMenu` \u2014 all\n * through `MenuContent`) paints at the dropdown tier (`--dsx-z-index-dropdown`,\n * 50), while modal-tier hosts (`Popover.Content` at `modal + 1`,\n * `Dialog.Content` at `modal`) portal to the same `document.body` level and\n * copy their content `z-index` onto their Radix wrappers. A menu opened inside\n * one of those hosts therefore paints *behind* its own host. A flat token bump\n * of the dropdown tier cannot fix this: the nested menu needs `modal + 2` to\n * clear its host, but a standalone page-level menu must stay *below* the modal\n * overlay (`--dsx-z-index-overlay`, 80) so an open Dialog still masks page\n * content. One static value cannot satisfy both, so the escalation is\n * contextual: modal-tier hosts provide this context from their content, and\n * menu-tier contents consume it to add the `dsx-menu__nested` class (resolved\n * to `modal + 2` by `_internal/baseMenu.css`).\n *\n * Provided at *content* level (not root) on purpose: `Combobox` is itself a\n * `Popover`, so a root-level signal would make every standalone Combobox\n * self-escalate above modal overlays. Content-level means only a menu nested\n * inside a *foreign* host escalates. `AlertDialog.Content` inherits the\n * behavior for free because it renders through `Dialog.Content`.\n */\nconst FloatingLayerHostContext = React.createContext(false)\n\nfunction useFloatingLayerHost(): boolean {\n  return React.useContext(FloatingLayerHostContext)\n}\n\nexport { FloatingLayerHostContext, useFloatingLayerHost }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AAyBvB,MAAM,2BAA2B,MAAM,cAAc,KAAK;AAE1D,SAAS,uBAAgC;AACvC,SAAO,MAAM,WAAW,wBAAwB;AAClD;",
+  "names": []
+}

package/dist/_internal/floatingLayer.d.cts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+/**
+ * Shared floating-layer tier signal (nested-tier policy).
+ *
+ * Menu-tier floating content (`Select`, `Combobox`, `DropdownMenu` — all
+ * through `MenuContent`) paints at the dropdown tier (`--dsx-z-index-dropdown`,
+ * 50), while modal-tier hosts (`Popover.Content` at `modal + 1`,
+ * `Dialog.Content` at `modal`) portal to the same `document.body` level and
+ * copy their content `z-index` onto their Radix wrappers. A menu opened inside
+ * one of those hosts therefore paints *behind* its own host. A flat token bump
+ * of the dropdown tier cannot fix this: the nested menu needs `modal + 2` to
+ * clear its host, but a standalone page-level menu must stay *below* the modal
+ * overlay (`--dsx-z-index-overlay`, 80) so an open Dialog still masks page
+ * content. One static value cannot satisfy both, so the escalation is
+ * contextual: modal-tier hosts provide this context from their content, and
+ * menu-tier contents consume it to add the `dsx-menu__nested` class (resolved
+ * to `modal + 2` by `_internal/baseMenu.css`).
+ *
+ * Provided at *content* level (not root) on purpose: `Combobox` is itself a
+ * `Popover`, so a root-level signal would make every standalone Combobox
+ * self-escalate above modal overlays. Content-level means only a menu nested
+ * inside a *foreign* host escalates. `AlertDialog.Content` inherits the
+ * behavior for free because it renders through `Dialog.Content`.
+ */
+declare const FloatingLayerHostContext: React.Context<boolean>;
+declare function useFloatingLayerHost(): boolean;
+export { FloatingLayerHostContext, useFloatingLayerHost };
+//# sourceMappingURL=floatingLayer.d.cts.map

package/dist/_internal/floatingLayer.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatingLayer.d.cts","sourceRoot":"","sources":["../../src/_internal/floatingLayer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,wBAAwB,wBAA6B,CAAA;AAE3D,iBAAS,oBAAoB,IAAI,OAAO,CAEvC;AAED,OAAO,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/_internal/floatingLayer.d.mts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+/**
+ * Shared floating-layer tier signal (nested-tier policy).
+ *
+ * Menu-tier floating content (`Select`, `Combobox`, `DropdownMenu` — all
+ * through `MenuContent`) paints at the dropdown tier (`--dsx-z-index-dropdown`,
+ * 50), while modal-tier hosts (`Popover.Content` at `modal + 1`,
+ * `Dialog.Content` at `modal`) portal to the same `document.body` level and
+ * copy their content `z-index` onto their Radix wrappers. A menu opened inside
+ * one of those hosts therefore paints *behind* its own host. A flat token bump
+ * of the dropdown tier cannot fix this: the nested menu needs `modal + 2` to
+ * clear its host, but a standalone page-level menu must stay *below* the modal
+ * overlay (`--dsx-z-index-overlay`, 80) so an open Dialog still masks page
+ * content. One static value cannot satisfy both, so the escalation is
+ * contextual: modal-tier hosts provide this context from their content, and
+ * menu-tier contents consume it to add the `dsx-menu__nested` class (resolved
+ * to `modal + 2` by `_internal/baseMenu.css`).
+ *
+ * Provided at *content* level (not root) on purpose: `Combobox` is itself a
+ * `Popover`, so a root-level signal would make every standalone Combobox
+ * self-escalate above modal overlays. Content-level means only a menu nested
+ * inside a *foreign* host escalates. `AlertDialog.Content` inherits the
+ * behavior for free because it renders through `Dialog.Content`.
+ */
+declare const FloatingLayerHostContext: React.Context<boolean>;
+declare function useFloatingLayerHost(): boolean;
+export { FloatingLayerHostContext, useFloatingLayerHost };
+//# sourceMappingURL=floatingLayer.d.mts.map

package/dist/_internal/floatingLayer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatingLayer.d.mts","sourceRoot":"","sources":["../../src/_internal/floatingLayer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,wBAAwB,wBAA6B,CAAA;AAE3D,iBAAS,oBAAoB,IAAI,OAAO,CAEvC;AAED,OAAO,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/_internal/floatingLayer.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+/**
+ * Shared floating-layer tier signal (nested-tier policy).
+ *
+ * Menu-tier floating content (`Select`, `Combobox`, `DropdownMenu` — all
+ * through `MenuContent`) paints at the dropdown tier (`--dsx-z-index-dropdown`,
+ * 50), while modal-tier hosts (`Popover.Content` at `modal + 1`,
+ * `Dialog.Content` at `modal`) portal to the same `document.body` level and
+ * copy their content `z-index` onto their Radix wrappers. A menu opened inside
+ * one of those hosts therefore paints *behind* its own host. A flat token bump
+ * of the dropdown tier cannot fix this: the nested menu needs `modal + 2` to
+ * clear its host, but a standalone page-level menu must stay *below* the modal
+ * overlay (`--dsx-z-index-overlay`, 80) so an open Dialog still masks page
+ * content. One static value cannot satisfy both, so the escalation is
+ * contextual: modal-tier hosts provide this context from their content, and
+ * menu-tier contents consume it to add the `dsx-menu__nested` class (resolved
+ * to `modal + 2` by `_internal/baseMenu.css`).
+ *
+ * Provided at *content* level (not root) on purpose: `Combobox` is itself a
+ * `Popover`, so a root-level signal would make every standalone Combobox
+ * self-escalate above modal overlays. Content-level means only a menu nested
+ * inside a *foreign* host escalates. `AlertDialog.Content` inherits the
+ * behavior for free because it renders through `Dialog.Content`.
+ */
+declare const FloatingLayerHostContext: React.Context<boolean>;
+declare function useFloatingLayerHost(): boolean;
+export { FloatingLayerHostContext, useFloatingLayerHost };
+//# sourceMappingURL=floatingLayer.d.ts.map

package/dist/_internal/floatingLayer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"floatingLayer.d.ts","sourceRoot":"","sources":["../../src/_internal/floatingLayer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,QAAA,MAAM,wBAAwB,wBAA6B,CAAA;AAE3D,iBAAS,oBAAoB,IAAI,OAAO,CAEvC;AAED,OAAO,EAAE,wBAAwB,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/_internal/floatingLayer.js

@@ -0,0 +1,11 @@
+"use client";
+import * as React from "react";
+const FloatingLayerHostContext = React.createContext(false);
+function useFloatingLayerHost() {
+  return React.useContext(FloatingLayerHostContext);
+}
+export {
+  FloatingLayerHostContext,
+  useFloatingLayerHost
+};
+//# sourceMappingURL=floatingLayer.js.map

package/dist/_internal/floatingLayer.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/_internal/floatingLayer.ts"],
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\n/**\n * Shared floating-layer tier signal (nested-tier policy).\n *\n * Menu-tier floating content (`Select`, `Combobox`, `DropdownMenu` \u2014 all\n * through `MenuContent`) paints at the dropdown tier (`--dsx-z-index-dropdown`,\n * 50), while modal-tier hosts (`Popover.Content` at `modal + 1`,\n * `Dialog.Content` at `modal`) portal to the same `document.body` level and\n * copy their content `z-index` onto their Radix wrappers. A menu opened inside\n * one of those hosts therefore paints *behind* its own host. A flat token bump\n * of the dropdown tier cannot fix this: the nested menu needs `modal + 2` to\n * clear its host, but a standalone page-level menu must stay *below* the modal\n * overlay (`--dsx-z-index-overlay`, 80) so an open Dialog still masks page\n * content. One static value cannot satisfy both, so the escalation is\n * contextual: modal-tier hosts provide this context from their content, and\n * menu-tier contents consume it to add the `dsx-menu__nested` class (resolved\n * to `modal + 2` by `_internal/baseMenu.css`).\n *\n * Provided at *content* level (not root) on purpose: `Combobox` is itself a\n * `Popover`, so a root-level signal would make every standalone Combobox\n * self-escalate above modal overlays. Content-level means only a menu nested\n * inside a *foreign* host escalates. `AlertDialog.Content` inherits the\n * behavior for free because it renders through `Dialog.Content`.\n */\nconst FloatingLayerHostContext = React.createContext(false)\n\nfunction useFloatingLayerHost(): boolean {\n  return React.useContext(FloatingLayerHostContext)\n}\n\nexport { FloatingLayerHostContext, useFloatingLayerHost }\n"],
+  "mappings": ";AAEA,YAAY,WAAW;AAyBvB,MAAM,2BAA2B,MAAM,cAAc,KAAK;AAE1D,SAAS,uBAAgC;AACvC,SAAO,MAAM,WAAW,wBAAwB;AAClD;",
+  "names": []
+}

package/dist/components/accordion.css

@@ -2,7 +2,7 @@
 
 .dsx-accordion__item {
   width: 100%;
-  overflow: hidden;
+  overflow: visible;
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline);
 }
 
@@ -33,10 +33,11 @@
   flex: 1;
   min-width: 0;
   text-align: start;
+  overflow-wrap: anywhere;
 }
 
 .dsx-accordion__trigger[data-state='open'] {
-  color: var(--dsx-color-primary);
+  color: var(--dsx-color-accent-indicator);
 }
 
 .dsx-accordion__trigger:focus-visible {
@@ -89,3 +90,9 @@
   font-family: var(--dsx-typography-body-medium-font-family), sans-serif;
   font-size: var(--dsx-typography-body-medium-font-size);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .dsx-accordion__chevron { transition: none; }
+}
+
+.dsx-accordion__trigger:disabled { opacity: var(--dsx-opacity-disabled); }

package/dist/components/alert/Alert.cjs

@@ -39,7 +39,6 @@ var React = __toESM(require("react"), 1);
 var import_classnames = __toESM(require("classnames"), 1);
 var import_react_slot = require("@radix-ui/react-slot");
 var import_extractProps = require("../../_internal/helpers/extractProps");
-var import_Card = require("../card/Card");
 var import_Icon = require("../icon/Icon");
 var import_alert = require("./alert.props");
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -54,6 +53,7 @@ const AlertRoot = React.forwardRef((props, forwardedRef) => {
     color,
     highContrast = false,
     icon,
+    children,
     role,
     size = "md",
     variant = "default",
@@ -61,19 +61,23 @@ const AlertRoot = React.forwardRef((props, forwardedRef) => {
   } = (0, import_extractProps.extractProps)(props, import_alert.alertPropDefs);
   const Comp = asChild ? import_react_slot.Slot : "div";
   const fallbackIcon = variant === "success" ? "check-circle" : variant === "default" ? "info" : "alert-triangle";
+  const child = asChild ? React.Children.only(children) : null;
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    icon === null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "dsx-alert__icon", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: fallbackIcon, size: "md", strokeWidth: "var(--dsx-icon-stroke-width-strong, 2.25)" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-alert__content", children: child ? child.props.children : children })
+  ] });
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_Card.CardRoot,
+    Comp,
     {
-      asChild: true,
+      ...alertProps,
+      ref: forwardedRef,
+      role: role ?? "alert",
       className: (0, import_classnames.default)("dsx-alert", className),
       "data-accent-color": color,
       "data-high-contrast": highContrast ? "true" : void 0,
       "data-size": size,
       "data-variant": variant,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Comp, { ...alertProps, ref: forwardedRef, role: role ?? "alert", children: [
-        icon === null ? null : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", className: "dsx-alert__icon", children: icon ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: fallbackIcon, size: "md", strokeWidth: "var(--dsx-icon-stroke-width-strong, 2.25)" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dsx-alert__content", children: alertProps.children })
-      ] })
+      children: child ? React.cloneElement(child, void 0, content) : content
     }
   );
 });

package/dist/components/alert/Alert.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/alert/Alert.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { CardRoot } from '../card/Card'\nimport { Icon } from '../icon/Icon'\nimport { alertDescriptionPropDefs, alertPropDefs, alertTitlePropDefs } from './alert.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype AlertActionElement = React.ComponentRef<'div'>\n\nconst AlertAction = React.forwardRef<AlertActionElement, React.ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, forwardedRef) => (\n    <div {...props} ref={forwardedRef} className={classNames('dsx-alert__action', className)} />\n  ),\n)\nAlertAction.displayName = 'AlertAction'\n\ntype AlertElement = React.ComponentRef<'div'>\ntype AlertOwnProps = GetPropDefTypes<typeof alertPropDefs> & {\n  icon?: React.ReactNode\n}\n\ninterface AlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>, AlertOwnProps {}\n\nconst AlertRoot = React.forwardRef<AlertElement, AlertProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    color,\n    highContrast = false,\n    icon,\n    role,\n    size = 'md',\n    variant = 'default',\n    ...alertProps\n  } = extractProps(props, alertPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const fallbackIcon = variant === 'success' ? 'check-circle' : variant === 'default' ? 'info' : 'alert-triangle'\n\n  return (\n    <CardRoot\n      asChild\n      className={classNames('dsx-alert', className)}\n      data-accent-color={color}\n      data-high-contrast={highContrast ? 'true' : undefined}\n      data-size={size}\n      data-variant={variant}\n    >\n      <Comp {...alertProps} ref={forwardedRef} role={role ?? 'alert'}>\n        {icon === null ? null : (\n          <span aria-hidden=\"true\" className=\"dsx-alert__icon\">\n            {icon ?? <Icon name={fallbackIcon} size=\"md\" strokeWidth=\"var(--dsx-icon-stroke-width-strong, 2.25)\" />}\n          </span>\n        )}\n        <div className=\"dsx-alert__content\">{alertProps.children}</div>\n      </Comp>\n    </CardRoot>\n  )\n})\nAlertRoot.displayName = 'Alert'\n\ntype AlertTitleElement = React.ComponentRef<'h5'>\ntype AlertTitleOwnProps = GetPropDefTypes<typeof alertTitlePropDefs>\n\ninterface AlertTitleProps extends React.ComponentPropsWithoutRef<'h5'>, AlertTitleOwnProps {}\n\nconst AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>((props, forwardedRef) => {\n  const { asChild, className, ...titleProps } = extractProps(props, alertTitlePropDefs)\n  const Comp = asChild ? Slot : 'h5'\n\n  return <Comp {...titleProps} ref={forwardedRef} className={classNames('dsx-alert__title', className)} />\n})\nAlertTitle.displayName = 'AlertTitle'\n\ntype AlertDescriptionElement = React.ComponentRef<'p'>\ntype AlertDescriptionOwnProps = GetPropDefTypes<typeof alertDescriptionPropDefs>\n\ninterface AlertDescriptionProps\n  extends React.ComponentPropsWithoutRef<'p'>,\n    AlertDescriptionOwnProps {}\n\nconst AlertDescription = React.forwardRef<AlertDescriptionElement, AlertDescriptionProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...descriptionProps } = extractProps(props, alertDescriptionPropDefs)\n    const Comp = asChild ? Slot : 'p'\n\n    return (\n      <Comp\n        {...descriptionProps}\n        ref={forwardedRef}\n        className={classNames('dsx-alert__description', className)}\n      />\n    )\n  },\n)\nAlertDescription.displayName = 'AlertDescription'\n\nconst Alert: typeof AlertRoot & {\n  Title: typeof AlertTitle\n  Description: typeof AlertDescription\n  Action: typeof AlertAction\n} = Object.assign(AlertRoot, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n  Action: AlertAction,\n})\n\nexport { Alert, AlertAction, AlertDescription, AlertRoot, AlertTitle }\nexport type { AlertDescriptionProps, AlertProps, AlertTitleProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AAErB,0BAA6B;AAC7B,kBAAyB;AACzB,kBAAqB;AACrB,mBAA4E;AAQxE;AAFJ,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,iBACxB,4CAAC,SAAK,GAAG,OAAO,KAAK,cAAc,eAAW,kBAAAA,SAAW,qBAAqB,SAAS,GAAG;AAE9F;AACA,YAAY,cAAc;AAS1B,MAAM,YAAY,MAAM,WAAqC,CAAC,OAAO,iBAAiB;AACpF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG;AAAA,EACL,QAAI,kCAAa,OAAO,0BAAa;AACrC,QAAM,OAAO,UAAU,yBAAO;AAC9B,QAAM,eAAe,YAAY,YAAY,iBAAiB,YAAY,YAAY,SAAS;AAE/F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAO;AAAA,MACP,eAAW,kBAAAA,SAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,sBAAoB,eAAe,SAAS;AAAA,MAC5C,aAAW;AAAA,MACX,gBAAc;AAAA,MAEd,uDAAC,QAAM,GAAG,YAAY,KAAK,cAAc,MAAM,QAAQ,SACpD;AAAA,iBAAS,OAAO,OACf,4CAAC,UAAK,eAAY,QAAO,WAAU,mBAChC,kBAAQ,4CAAC,oBAAK,MAAM,cAAc,MAAK,MAAK,aAAY,6CAA4C,GACvG;AAAA,QAEF,4CAAC,SAAI,WAAU,sBAAsB,qBAAW,UAAS;AAAA,SAC3D;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,UAAU,cAAc;AAOxB,MAAM,aAAa,MAAM,WAA+C,CAAC,OAAO,iBAAiB;AAC/F,QAAM,EAAE,SAAS,WAAW,GAAG,WAAW,QAAI,kCAAa,OAAO,+BAAkB;AACpF,QAAM,OAAO,UAAU,yBAAO;AAE9B,SAAO,4CAAC,QAAM,GAAG,YAAY,KAAK,cAAc,eAAW,kBAAAA,SAAW,oBAAoB,SAAS,GAAG;AACxG,CAAC;AACD,WAAW,cAAc;AASzB,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,QAAI,kCAAa,OAAO,qCAAwB;AAChG,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,kBAAAA,SAAW,0BAA0B,SAAS;AAAA;AAAA,IAC3D;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAE/B,MAAM,QAIF,OAAO,OAAO,WAAW;AAAA,EAC3B,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AACV,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { alertDescriptionPropDefs, alertPropDefs, alertTitlePropDefs } from './alert.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype AlertActionElement = React.ComponentRef<'div'>\n\nconst AlertAction = React.forwardRef<AlertActionElement, React.ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, forwardedRef) => (\n    <div {...props} ref={forwardedRef} className={classNames('dsx-alert__action', className)} />\n  ),\n)\nAlertAction.displayName = 'AlertAction'\n\ntype AlertElement = React.ComponentRef<'div'>\ntype AlertOwnProps = GetPropDefTypes<typeof alertPropDefs> & {\n  icon?: React.ReactNode\n}\n\ninterface AlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>, AlertOwnProps {}\n\nconst AlertRoot = React.forwardRef<AlertElement, AlertProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    color,\n    highContrast = false,\n    icon,\n    children,\n    role,\n    size = 'md',\n    variant = 'default',\n    ...alertProps\n  } = extractProps(props, alertPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const fallbackIcon = variant === 'success' ? 'check-circle' : variant === 'default' ? 'info' : 'alert-triangle'\n  const child = asChild ? React.Children.only(children) as React.ReactElement<{ children?: React.ReactNode }> : null\n  const content = <>\n    {icon === null ? null : (\n      <span aria-hidden=\"true\" className=\"dsx-alert__icon\">\n        {icon ?? <Icon name={fallbackIcon} size=\"md\" strokeWidth=\"var(--dsx-icon-stroke-width-strong, 2.25)\" />}\n      </span>\n    )}\n    <div className=\"dsx-alert__content\">{child ? child.props.children : children}</div>\n  </>\n\n  return (\n    <Comp\n      {...alertProps}\n      ref={forwardedRef}\n      role={role ?? 'alert'}\n      className={classNames('dsx-alert', className)}\n      data-accent-color={color}\n      data-high-contrast={highContrast ? 'true' : undefined}\n      data-size={size}\n      data-variant={variant}\n    >\n      {child ? React.cloneElement(child, undefined, content) : content}\n    </Comp>\n  )\n})\nAlertRoot.displayName = 'Alert'\n\ntype AlertTitleElement = React.ComponentRef<'h5'>\ntype AlertTitleOwnProps = GetPropDefTypes<typeof alertTitlePropDefs>\n\ninterface AlertTitleProps extends React.ComponentPropsWithoutRef<'h5'>, AlertTitleOwnProps {}\n\nconst AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>((props, forwardedRef) => {\n  const { asChild, className, ...titleProps } = extractProps(props, alertTitlePropDefs)\n  const Comp = asChild ? Slot : 'h5'\n\n  return <Comp {...titleProps} ref={forwardedRef} className={classNames('dsx-alert__title', className)} />\n})\nAlertTitle.displayName = 'AlertTitle'\n\ntype AlertDescriptionElement = React.ComponentRef<'p'>\ntype AlertDescriptionOwnProps = GetPropDefTypes<typeof alertDescriptionPropDefs>\n\ninterface AlertDescriptionProps\n  extends React.ComponentPropsWithoutRef<'p'>,\n    AlertDescriptionOwnProps {}\n\nconst AlertDescription = React.forwardRef<AlertDescriptionElement, AlertDescriptionProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...descriptionProps } = extractProps(props, alertDescriptionPropDefs)\n    const Comp = asChild ? Slot : 'p'\n\n    return (\n      <Comp\n        {...descriptionProps}\n        ref={forwardedRef}\n        className={classNames('dsx-alert__description', className)}\n      />\n    )\n  },\n)\nAlertDescription.displayName = 'AlertDescription'\n\nconst Alert: typeof AlertRoot & {\n  Title: typeof AlertTitle\n  Description: typeof AlertDescription\n  Action: typeof AlertAction\n} = Object.assign(AlertRoot, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n  Action: AlertAction,\n})\n\nexport { Alert, AlertAction, AlertDescription, AlertRoot, AlertTitle }\nexport type { AlertDescriptionProps, AlertProps, AlertTitleProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AAErB,0BAA6B;AAC7B,kBAAqB;AACrB,mBAA4E;AAQxE;AAFJ,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,iBACxB,4CAAC,SAAK,GAAG,OAAO,KAAK,cAAc,eAAW,kBAAAA,SAAW,qBAAqB,SAAS,GAAG;AAE9F;AACA,YAAY,cAAc;AAS1B,MAAM,YAAY,MAAM,WAAqC,CAAC,OAAO,iBAAiB;AACpF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG;AAAA,EACL,QAAI,kCAAa,OAAO,0BAAa;AACrC,QAAM,OAAO,UAAU,yBAAO;AAC9B,QAAM,eAAe,YAAY,YAAY,iBAAiB,YAAY,YAAY,SAAS;AAC/F,QAAM,QAAQ,UAAU,MAAM,SAAS,KAAK,QAAQ,IAA0D;AAC9G,QAAM,UAAU,4EACb;AAAA,aAAS,OAAO,OACf,4CAAC,UAAK,eAAY,QAAO,WAAU,mBAChC,kBAAQ,4CAAC,oBAAK,MAAM,cAAc,MAAK,MAAK,aAAY,6CAA4C,GACvG;AAAA,IAEF,4CAAC,SAAI,WAAU,sBAAsB,kBAAQ,MAAM,MAAM,WAAW,UAAS;AAAA,KAC/E;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,QAAQ;AAAA,MACd,eAAW,kBAAAA,SAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,sBAAoB,eAAe,SAAS;AAAA,MAC5C,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb,kBAAQ,MAAM,aAAa,OAAO,QAAW,OAAO,IAAI;AAAA;AAAA,EAC3D;AAEJ,CAAC;AACD,UAAU,cAAc;AAOxB,MAAM,aAAa,MAAM,WAA+C,CAAC,OAAO,iBAAiB;AAC/F,QAAM,EAAE,SAAS,WAAW,GAAG,WAAW,QAAI,kCAAa,OAAO,+BAAkB;AACpF,QAAM,OAAO,UAAU,yBAAO;AAE9B,SAAO,4CAAC,QAAM,GAAG,YAAY,KAAK,cAAc,eAAW,kBAAAA,SAAW,oBAAoB,SAAS,GAAG;AACxG,CAAC;AACD,WAAW,cAAc;AASzB,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,QAAI,kCAAa,OAAO,qCAAwB;AAChG,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,kBAAAA,SAAW,0BAA0B,SAAS;AAAA;AAAA,IAC3D;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAE/B,MAAM,QAIF,OAAO,OAAO,WAAW;AAAA,EAC3B,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AACV,CAAC;",
   "names": ["classNames"]
 }

package/dist/components/alert/Alert.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.cts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAIpE,QAAA,MAAM,WAAW,mKAIhB,CAAA;AAID,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AAEnG,QAAA,MAAM,SAAS,mFAkCb,CAAA;AAIF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,kBAAkB;CAAG;AAE7F,QAAA,MAAM,UAAU,4FAKd,CAAA;AAIF,KAAK,wBAAwB,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAEhF,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACzC,wBAAwB;CAAG;AAE/B,QAAA,MAAM,gBAAgB,oGAarB,CAAA;AAGD,QAAA,MAAM,KAAK,EAAE,OAAO,SAAS,GAAG;IAC9B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,WAAW,EAAE,OAAO,gBAAgB,CAAA;IACpC,MAAM,EAAE,OAAO,WAAW,CAAA;CAK1B,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AACtE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"Alert.d.cts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAIpE,QAAA,MAAM,WAAW,mKAIhB,CAAA;AAID,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AAEnG,QAAA,MAAM,SAAS,mFAuCb,CAAA;AAIF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,kBAAkB;CAAG;AAE7F,QAAA,MAAM,UAAU,4FAKd,CAAA;AAIF,KAAK,wBAAwB,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAEhF,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACzC,wBAAwB;CAAG;AAE/B,QAAA,MAAM,gBAAgB,oGAarB,CAAA;AAGD,QAAA,MAAM,KAAK,EAAE,OAAO,SAAS,GAAG;IAC9B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,WAAW,EAAE,OAAO,gBAAgB,CAAA;IACpC,MAAM,EAAE,OAAO,WAAW,CAAA;CAK1B,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AACtE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/alert/Alert.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.mts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAIpE,QAAA,MAAM,WAAW,mKAIhB,CAAA;AAID,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AAEnG,QAAA,MAAM,SAAS,mFAkCb,CAAA;AAIF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,kBAAkB;CAAG;AAE7F,QAAA,MAAM,UAAU,4FAKd,CAAA;AAIF,KAAK,wBAAwB,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAEhF,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACzC,wBAAwB;CAAG;AAE/B,QAAA,MAAM,gBAAgB,oGAarB,CAAA;AAGD,QAAA,MAAM,KAAK,EAAE,OAAO,SAAS,GAAG;IAC9B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,WAAW,EAAE,OAAO,gBAAgB,CAAA;IACpC,MAAM,EAAE,OAAO,WAAW,CAAA;CAK1B,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AACtE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"Alert.d.mts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAIpE,QAAA,MAAM,WAAW,mKAIhB,CAAA;AAID,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AAEnG,QAAA,MAAM,SAAS,mFAuCb,CAAA;AAIF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,kBAAkB;CAAG;AAE7F,QAAA,MAAM,UAAU,4FAKd,CAAA;AAIF,KAAK,wBAAwB,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAEhF,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACzC,wBAAwB;CAAG;AAE/B,QAAA,MAAM,gBAAgB,oGAarB,CAAA;AAGD,QAAA,MAAM,KAAK,EAAE,OAAO,SAAS,GAAG;IAC9B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,WAAW,EAAE,OAAO,gBAAgB,CAAA;IACpC,MAAM,EAAE,OAAO,WAAW,CAAA;CAK1B,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AACtE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/alert/Alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAIpE,QAAA,MAAM,WAAW,mKAIhB,CAAA;AAID,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AAEnG,QAAA,MAAM,SAAS,mFAkCb,CAAA;AAIF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,kBAAkB;CAAG;AAE7F,QAAA,MAAM,UAAU,4FAKd,CAAA;AAIF,KAAK,wBAAwB,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAEhF,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACzC,wBAAwB;CAAG;AAE/B,QAAA,MAAM,gBAAgB,oGAarB,CAAA;AAGD,QAAA,MAAM,KAAK,EAAE,OAAO,SAAS,GAAG;IAC9B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,WAAW,EAAE,OAAO,gBAAgB,CAAA;IACpC,MAAM,EAAE,OAAO,WAAW,CAAA;CAK1B,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AACtE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../../src/components/alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,EAAE,wBAAwB,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAA;AAE3F,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAIpE,QAAA,MAAM,WAAW,mKAIhB,CAAA;AAID,KAAK,aAAa,GAAG,eAAe,CAAC,OAAO,aAAa,CAAC,GAAG;IAC3D,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,UAAU,UAAW,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,EAAE,aAAa;CAAG;AAEnG,QAAA,MAAM,SAAS,mFAuCb,CAAA;AAIF,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,kBAAkB;CAAG;AAE7F,QAAA,MAAM,UAAU,4FAKd,CAAA;AAIF,KAAK,wBAAwB,GAAG,eAAe,CAAC,OAAO,wBAAwB,CAAC,CAAA;AAEhF,UAAU,qBACR,SAAQ,KAAK,CAAC,wBAAwB,CAAC,GAAG,CAAC,EACzC,wBAAwB;CAAG;AAE/B,QAAA,MAAM,gBAAgB,oGAarB,CAAA;AAGD,QAAA,MAAM,KAAK,EAAE,OAAO,SAAS,GAAG;IAC9B,KAAK,EAAE,OAAO,UAAU,CAAA;IACxB,WAAW,EAAE,OAAO,gBAAgB,CAAA;IACpC,MAAM,EAAE,OAAO,WAAW,CAAA;CAK1B,CAAA;AAEF,OAAO,EAAE,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,SAAS,EAAE,UAAU,EAAE,CAAA;AACtE,YAAY,EAAE,qBAAqB,EAAE,UAAU,EAAE,eAAe,EAAE,CAAA"}

package/dist/components/alert/Alert.js

@@ -2,10 +2,9 @@ import * as React from "react";
 import classNames from "classnames";
 import { Slot } from "@radix-ui/react-slot";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
-import { CardRoot } from "../card/Card.js";
 import { Icon } from "../icon/Icon.js";
 import { alertDescriptionPropDefs, alertPropDefs, alertTitlePropDefs } from "./alert.props.js";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const AlertAction = React.forwardRef(
   ({ className, ...props }, forwardedRef) => /* @__PURE__ */ jsx("div", { ...props, ref: forwardedRef, className: classNames("dsx-alert__action", className) })
 );
@@ -17,6 +16,7 @@ const AlertRoot = React.forwardRef((props, forwardedRef) => {
     color,
     highContrast = false,
     icon,
+    children,
     role,
     size = "md",
     variant = "default",
@@ -24,19 +24,23 @@ const AlertRoot = React.forwardRef((props, forwardedRef) => {
   } = extractProps(props, alertPropDefs);
   const Comp = asChild ? Slot : "div";
   const fallbackIcon = variant === "success" ? "check-circle" : variant === "default" ? "info" : "alert-triangle";
+  const child = asChild ? React.Children.only(children) : null;
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    icon === null ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "dsx-alert__icon", children: icon ?? /* @__PURE__ */ jsx(Icon, { name: fallbackIcon, size: "md", strokeWidth: "var(--dsx-icon-stroke-width-strong, 2.25)" }) }),
+    /* @__PURE__ */ jsx("div", { className: "dsx-alert__content", children: child ? child.props.children : children })
+  ] });
   return /* @__PURE__ */ jsx(
-    CardRoot,
+    Comp,
     {
-      asChild: true,
+      ...alertProps,
+      ref: forwardedRef,
+      role: role ?? "alert",
       className: classNames("dsx-alert", className),
       "data-accent-color": color,
       "data-high-contrast": highContrast ? "true" : void 0,
       "data-size": size,
       "data-variant": variant,
-      children: /* @__PURE__ */ jsxs(Comp, { ...alertProps, ref: forwardedRef, role: role ?? "alert", children: [
-        icon === null ? null : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "dsx-alert__icon", children: icon ?? /* @__PURE__ */ jsx(Icon, { name: fallbackIcon, size: "md", strokeWidth: "var(--dsx-icon-stroke-width-strong, 2.25)" }) }),
-        /* @__PURE__ */ jsx("div", { className: "dsx-alert__content", children: alertProps.children })
-      ] })
+      children: child ? React.cloneElement(child, void 0, content) : content
     }
   );
 });

package/dist/components/alert/Alert.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/alert/Alert.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { CardRoot } from '../card/Card'\nimport { Icon } from '../icon/Icon'\nimport { alertDescriptionPropDefs, alertPropDefs, alertTitlePropDefs } from './alert.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype AlertActionElement = React.ComponentRef<'div'>\n\nconst AlertAction = React.forwardRef<AlertActionElement, React.ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, forwardedRef) => (\n    <div {...props} ref={forwardedRef} className={classNames('dsx-alert__action', className)} />\n  ),\n)\nAlertAction.displayName = 'AlertAction'\n\ntype AlertElement = React.ComponentRef<'div'>\ntype AlertOwnProps = GetPropDefTypes<typeof alertPropDefs> & {\n  icon?: React.ReactNode\n}\n\ninterface AlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>, AlertOwnProps {}\n\nconst AlertRoot = React.forwardRef<AlertElement, AlertProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    color,\n    highContrast = false,\n    icon,\n    role,\n    size = 'md',\n    variant = 'default',\n    ...alertProps\n  } = extractProps(props, alertPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const fallbackIcon = variant === 'success' ? 'check-circle' : variant === 'default' ? 'info' : 'alert-triangle'\n\n  return (\n    <CardRoot\n      asChild\n      className={classNames('dsx-alert', className)}\n      data-accent-color={color}\n      data-high-contrast={highContrast ? 'true' : undefined}\n      data-size={size}\n      data-variant={variant}\n    >\n      <Comp {...alertProps} ref={forwardedRef} role={role ?? 'alert'}>\n        {icon === null ? null : (\n          <span aria-hidden=\"true\" className=\"dsx-alert__icon\">\n            {icon ?? <Icon name={fallbackIcon} size=\"md\" strokeWidth=\"var(--dsx-icon-stroke-width-strong, 2.25)\" />}\n          </span>\n        )}\n        <div className=\"dsx-alert__content\">{alertProps.children}</div>\n      </Comp>\n    </CardRoot>\n  )\n})\nAlertRoot.displayName = 'Alert'\n\ntype AlertTitleElement = React.ComponentRef<'h5'>\ntype AlertTitleOwnProps = GetPropDefTypes<typeof alertTitlePropDefs>\n\ninterface AlertTitleProps extends React.ComponentPropsWithoutRef<'h5'>, AlertTitleOwnProps {}\n\nconst AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>((props, forwardedRef) => {\n  const { asChild, className, ...titleProps } = extractProps(props, alertTitlePropDefs)\n  const Comp = asChild ? Slot : 'h5'\n\n  return <Comp {...titleProps} ref={forwardedRef} className={classNames('dsx-alert__title', className)} />\n})\nAlertTitle.displayName = 'AlertTitle'\n\ntype AlertDescriptionElement = React.ComponentRef<'p'>\ntype AlertDescriptionOwnProps = GetPropDefTypes<typeof alertDescriptionPropDefs>\n\ninterface AlertDescriptionProps\n  extends React.ComponentPropsWithoutRef<'p'>,\n    AlertDescriptionOwnProps {}\n\nconst AlertDescription = React.forwardRef<AlertDescriptionElement, AlertDescriptionProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...descriptionProps } = extractProps(props, alertDescriptionPropDefs)\n    const Comp = asChild ? Slot : 'p'\n\n    return (\n      <Comp\n        {...descriptionProps}\n        ref={forwardedRef}\n        className={classNames('dsx-alert__description', className)}\n      />\n    )\n  },\n)\nAlertDescription.displayName = 'AlertDescription'\n\nconst Alert: typeof AlertRoot & {\n  Title: typeof AlertTitle\n  Description: typeof AlertDescription\n  Action: typeof AlertAction\n} = Object.assign(AlertRoot, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n  Action: AlertAction,\n})\n\nexport { Alert, AlertAction, AlertDescription, AlertRoot, AlertTitle }\nexport type { AlertDescriptionProps, AlertProps, AlertTitleProps }\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AAErB,SAAS,oBAAoB;AAC7B,SAAS,gBAAgB;AACzB,SAAS,YAAY;AACrB,SAAS,0BAA0B,eAAe,0BAA0B;AAQxE,cAoCE,YApCF;AAFJ,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,iBACxB,oBAAC,SAAK,GAAG,OAAO,KAAK,cAAc,WAAW,WAAW,qBAAqB,SAAS,GAAG;AAE9F;AACA,YAAY,cAAc;AAS1B,MAAM,YAAY,MAAM,WAAqC,CAAC,OAAO,iBAAiB;AACpF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,aAAa;AACrC,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,eAAe,YAAY,YAAY,iBAAiB,YAAY,YAAY,SAAS;AAE/F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAO;AAAA,MACP,WAAW,WAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,sBAAoB,eAAe,SAAS;AAAA,MAC5C,aAAW;AAAA,MACX,gBAAc;AAAA,MAEd,+BAAC,QAAM,GAAG,YAAY,KAAK,cAAc,MAAM,QAAQ,SACpD;AAAA,iBAAS,OAAO,OACf,oBAAC,UAAK,eAAY,QAAO,WAAU,mBAChC,kBAAQ,oBAAC,QAAK,MAAM,cAAc,MAAK,MAAK,aAAY,6CAA4C,GACvG;AAAA,QAEF,oBAAC,SAAI,WAAU,sBAAsB,qBAAW,UAAS;AAAA,SAC3D;AAAA;AAAA,EACF;AAEJ,CAAC;AACD,UAAU,cAAc;AAOxB,MAAM,aAAa,MAAM,WAA+C,CAAC,OAAO,iBAAiB;AAC/F,QAAM,EAAE,SAAS,WAAW,GAAG,WAAW,IAAI,aAAa,OAAO,kBAAkB;AACpF,QAAM,OAAO,UAAU,OAAO;AAE9B,SAAO,oBAAC,QAAM,GAAG,YAAY,KAAK,cAAc,WAAW,WAAW,oBAAoB,SAAS,GAAG;AACxG,CAAC;AACD,WAAW,cAAc;AASzB,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,IAAI,aAAa,OAAO,wBAAwB;AAChG,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,WAAW,0BAA0B,SAAS;AAAA;AAAA,IAC3D;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAE/B,MAAM,QAIF,OAAO,OAAO,WAAW;AAAA,EAC3B,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AACV,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport { alertDescriptionPropDefs, alertPropDefs, alertTitlePropDefs } from './alert.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype AlertActionElement = React.ComponentRef<'div'>\n\nconst AlertAction = React.forwardRef<AlertActionElement, React.ComponentPropsWithoutRef<'div'>>(\n  ({ className, ...props }, forwardedRef) => (\n    <div {...props} ref={forwardedRef} className={classNames('dsx-alert__action', className)} />\n  ),\n)\nAlertAction.displayName = 'AlertAction'\n\ntype AlertElement = React.ComponentRef<'div'>\ntype AlertOwnProps = GetPropDefTypes<typeof alertPropDefs> & {\n  icon?: React.ReactNode\n}\n\ninterface AlertProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'color'>, AlertOwnProps {}\n\nconst AlertRoot = React.forwardRef<AlertElement, AlertProps>((props, forwardedRef) => {\n  const {\n    asChild,\n    className,\n    color,\n    highContrast = false,\n    icon,\n    children,\n    role,\n    size = 'md',\n    variant = 'default',\n    ...alertProps\n  } = extractProps(props, alertPropDefs)\n  const Comp = asChild ? Slot : 'div'\n  const fallbackIcon = variant === 'success' ? 'check-circle' : variant === 'default' ? 'info' : 'alert-triangle'\n  const child = asChild ? React.Children.only(children) as React.ReactElement<{ children?: React.ReactNode }> : null\n  const content = <>\n    {icon === null ? null : (\n      <span aria-hidden=\"true\" className=\"dsx-alert__icon\">\n        {icon ?? <Icon name={fallbackIcon} size=\"md\" strokeWidth=\"var(--dsx-icon-stroke-width-strong, 2.25)\" />}\n      </span>\n    )}\n    <div className=\"dsx-alert__content\">{child ? child.props.children : children}</div>\n  </>\n\n  return (\n    <Comp\n      {...alertProps}\n      ref={forwardedRef}\n      role={role ?? 'alert'}\n      className={classNames('dsx-alert', className)}\n      data-accent-color={color}\n      data-high-contrast={highContrast ? 'true' : undefined}\n      data-size={size}\n      data-variant={variant}\n    >\n      {child ? React.cloneElement(child, undefined, content) : content}\n    </Comp>\n  )\n})\nAlertRoot.displayName = 'Alert'\n\ntype AlertTitleElement = React.ComponentRef<'h5'>\ntype AlertTitleOwnProps = GetPropDefTypes<typeof alertTitlePropDefs>\n\ninterface AlertTitleProps extends React.ComponentPropsWithoutRef<'h5'>, AlertTitleOwnProps {}\n\nconst AlertTitle = React.forwardRef<AlertTitleElement, AlertTitleProps>((props, forwardedRef) => {\n  const { asChild, className, ...titleProps } = extractProps(props, alertTitlePropDefs)\n  const Comp = asChild ? Slot : 'h5'\n\n  return <Comp {...titleProps} ref={forwardedRef} className={classNames('dsx-alert__title', className)} />\n})\nAlertTitle.displayName = 'AlertTitle'\n\ntype AlertDescriptionElement = React.ComponentRef<'p'>\ntype AlertDescriptionOwnProps = GetPropDefTypes<typeof alertDescriptionPropDefs>\n\ninterface AlertDescriptionProps\n  extends React.ComponentPropsWithoutRef<'p'>,\n    AlertDescriptionOwnProps {}\n\nconst AlertDescription = React.forwardRef<AlertDescriptionElement, AlertDescriptionProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...descriptionProps } = extractProps(props, alertDescriptionPropDefs)\n    const Comp = asChild ? Slot : 'p'\n\n    return (\n      <Comp\n        {...descriptionProps}\n        ref={forwardedRef}\n        className={classNames('dsx-alert__description', className)}\n      />\n    )\n  },\n)\nAlertDescription.displayName = 'AlertDescription'\n\nconst Alert: typeof AlertRoot & {\n  Title: typeof AlertTitle\n  Description: typeof AlertDescription\n  Action: typeof AlertAction\n} = Object.assign(AlertRoot, {\n  Title: AlertTitle,\n  Description: AlertDescription,\n  Action: AlertAction,\n})\n\nexport { Alert, AlertAction, AlertDescription, AlertRoot, AlertTitle }\nexport type { AlertDescriptionProps, AlertProps, AlertTitleProps }\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AAErB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB,SAAS,0BAA0B,eAAe,0BAA0B;AAQxE,SA4Bc,UA5Bd,KA4Bc,YA5Bd;AAFJ,MAAM,cAAc,MAAM;AAAA,EACxB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,iBACxB,oBAAC,SAAK,GAAG,OAAO,KAAK,cAAc,WAAW,WAAW,qBAAqB,SAAS,GAAG;AAE9F;AACA,YAAY,cAAc;AAS1B,MAAM,YAAY,MAAM,WAAqC,CAAC,OAAO,iBAAiB;AACpF,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA;AAAA,IACA,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG;AAAA,EACL,IAAI,aAAa,OAAO,aAAa;AACrC,QAAM,OAAO,UAAU,OAAO;AAC9B,QAAM,eAAe,YAAY,YAAY,iBAAiB,YAAY,YAAY,SAAS;AAC/F,QAAM,QAAQ,UAAU,MAAM,SAAS,KAAK,QAAQ,IAA0D;AAC9G,QAAM,UAAU,iCACb;AAAA,aAAS,OAAO,OACf,oBAAC,UAAK,eAAY,QAAO,WAAU,mBAChC,kBAAQ,oBAAC,QAAK,MAAM,cAAc,MAAK,MAAK,aAAY,6CAA4C,GACvG;AAAA,IAEF,oBAAC,SAAI,WAAU,sBAAsB,kBAAQ,MAAM,MAAM,WAAW,UAAS;AAAA,KAC/E;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,MAAM,QAAQ;AAAA,MACd,WAAW,WAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,sBAAoB,eAAe,SAAS;AAAA,MAC5C,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb,kBAAQ,MAAM,aAAa,OAAO,QAAW,OAAO,IAAI;AAAA;AAAA,EAC3D;AAEJ,CAAC;AACD,UAAU,cAAc;AAOxB,MAAM,aAAa,MAAM,WAA+C,CAAC,OAAO,iBAAiB;AAC/F,QAAM,EAAE,SAAS,WAAW,GAAG,WAAW,IAAI,aAAa,OAAO,kBAAkB;AACpF,QAAM,OAAO,UAAU,OAAO;AAE9B,SAAO,oBAAC,QAAM,GAAG,YAAY,KAAK,cAAc,WAAW,WAAW,oBAAoB,SAAS,GAAG;AACxG,CAAC;AACD,WAAW,cAAc;AASzB,MAAM,mBAAmB,MAAM;AAAA,EAC7B,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,SAAS,WAAW,GAAG,iBAAiB,IAAI,aAAa,OAAO,wBAAwB;AAChG,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW,WAAW,0BAA0B,SAAS;AAAA;AAAA,IAC3D;AAAA,EAEJ;AACF;AACA,iBAAiB,cAAc;AAE/B,MAAM,QAIF,OAAO,OAAO,WAAW;AAAA,EAC3B,OAAO;AAAA,EACP,aAAa;AAAA,EACb,QAAQ;AACV,CAAC;",
   "names": []
 }

package/dist/components/alert.css

@@ -2,6 +2,7 @@
 @import '../../_internal/baseCard.css';
 
 .dsx-alert {
+  box-sizing: border-box;
   display: flex;
   align-items: flex-start;
   gap: var(--dsx-space-md);
@@ -23,16 +24,28 @@
   color: currentColor;
 }
 
+.dsx-alert__icon { flex-shrink: 0; }
+
 .dsx-alert__action {
   align-self: center;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+  gap: var(--dsx-space-sm);
 }
 
 .dsx-alert__content {
   display: grid;
   gap: var(--dsx-space-xs);
   flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
 }
 
+.dsx-alert[data-variant='warning'] { border-color: var(--dsx-color-warning); }
+.dsx-alert[data-variant='success'] { border-color: var(--dsx-color-success); }
+.dsx-alert[data-variant='destructive'] { border-color: var(--dsx-color-error); }
+.dsx-alert[data-high-contrast='true'] { border-color: var(--dsx-color-high-contrast-border); }
+
 .dsx-alert__title {
   margin: 0;
   font-family: var(--dsx-typography-label-large-font-family), sans-serif;

package/dist/components/article-nodes.css

@@ -2,7 +2,22 @@
 .dsx-article-image__media, .dsx-before-after img { display: block; width: 100%; height: auto; border-radius: var(--dsx-rounded-md); }
 .dsx-article-image figcaption { margin-block-start: var(--dsx-space-sm); color: var(--dsx-color-on-surface-variant); text-align: center; }
 .dsx-article-embed, .dsx-article-poll { display: grid; gap: var(--dsx-space-sm); padding: var(--dsx-space-md); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface-raised); }
+.dsx-article-image, .dsx-article-embed, .dsx-article-poll, .dsx-before-after { min-width: 0; overflow-wrap: anywhere; }
 .dsx-before-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dsx-space-sm); overflow-x: auto; }
 .dsx-before-after > div { min-width: var(--dsx-size-3xl); }
 .dsx-before-after span { display: block; margin-block-start: var(--dsx-space-xs); color: var(--dsx-color-on-surface-variant); }
-.dsx-article-poll button { min-height: var(--dsx-size-lg); }
+.dsx-article-poll__option { min-width: 0; width: 100%; }
+.dsx-article-video { margin: var(--dsx-space-md) 0; min-width: 0; }
+.dsx-article-video__media { display: block; width: 100%; border-radius: var(--dsx-rounded-md); }
+.dsx-article-video figcaption { margin-block-start: var(--dsx-space-sm); color: var(--dsx-color-on-surface-variant); }
+.dsx-article-platform-tabs { min-width: 0; }
+.dsx-article-poll__result { display: grid; gap: var(--dsx-space-xs); min-width: 0; }
+.dsx-article-poll__result progress { width: 100%; accent-color: var(--dsx-color-accent-indicator); }
+.dsx-article-poll__actions { display: flex; flex-wrap: wrap; gap: var(--dsx-space-sm); }
+.dsx-article-editor-block { display: grid; gap: var(--dsx-space-md); min-width: 0; margin-block: var(--dsx-space-md); padding: var(--dsx-space-md); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface); }
+.dsx-article-editor-block[aria-current='true'] { border-color: var(--dsx-color-accent-border); }
+.dsx-article-editor-block__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dsx-space-sm); }
+.dsx-article-editor-block__actions { display: flex; flex-wrap: wrap; gap: var(--dsx-space-xs); }
+.dsx-article-editor-block__fields { display: grid; gap: var(--dsx-space-sm); min-width: 0; }
+.dsx-article-editor-block__content { min-width: 0; }
+.dsx-article-editor-block__textarea { width: 100%; min-height: var(--dsx-size-4xl); display: block; padding: var(--dsx-space-sm); border: var(--dsx-border-width-sm) solid var(--dsx-color-outline); border-radius: var(--dsx-rounded-sm); background: var(--dsx-color-surface-raised); color: var(--dsx-color-on-surface); font: inherit; }

package/dist/components/articleNodes/ArticleNodes.cjs

@@ -30,12 +30,17 @@ var ArticleNodes_exports = {};
 __export(ArticleNodes_exports, {
   ArticleEmbed: () => ArticleEmbed,
   ArticleImage: () => ArticleImage,
+  ArticleMaterialLink: () => ArticleMaterialLink,
+  ArticlePlatformTabs: () => ArticlePlatformTabs,
   ArticlePoll: () => ArticlePoll,
+  ArticleVideo: () => ArticleVideo,
   BeforeAfterComparison: () => BeforeAfterComparison
 });
 module.exports = __toCommonJS(ArticleNodes_exports);
 var React = __toESM(require("react"), 1);
 var import_classnames = __toESM(require("classnames"), 1);
+var import_Button = require("../button/Button");
+var import_Tabs = require("../tabs/Tabs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const ArticleImage = ({ caption, className, alt = "", ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { className: "dsx-article-image", children: [
   /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { ...props, alt, className: (0, import_classnames.default)("dsx-article-image__media", className) }),
@@ -61,16 +66,52 @@ const BeforeAfterComparison = ({ beforeSrc, afterSrc, beforeAlt, afterAlt, befor
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: afterLabel })
   ] })
 ] });
-const ArticlePoll = ({ pollId, question, options = [], state = "ready", onLoad, onVote, className, ...props }) => {
+const ArticleVideo = ({ caption, className, controls = true, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("figure", { className: "dsx-article-video", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("video", { ...props, controls, className: (0, import_classnames.default)("dsx-article-video__media", className) }),
+  caption ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("figcaption", { children: caption }) : null
+] });
+const ArticleMaterialLink = ({ materialId, href, children, unavailableLabel = "Material unavailable", ...props }) => {
+  let allowed = false;
+  try {
+    allowed = ["http:", "https:"].includes(new URL(href ?? "", "https://example.invalid").protocol);
+  } catch {
+  }
+  return href && allowed ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { ...props, href, "data-dsx-material-id": materialId, children }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "status", "data-dsx-material-id": materialId, children: unavailableLabel });
+};
+const ArticlePlatformTabs = ({ tabs, value, onValueChange, className, dir, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Tabs.Tabs, { ...props, dir: dir === "rtl" || dir === "ltr" ? dir : void 0, className: (0, import_classnames.default)("dsx-article-platform-tabs", className), defaultValue: tabs[0]?.platform, value, onValueChange, children: [
+  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Tabs.Tabs.List, { "aria-label": "Platform instructions", children: [
+    tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tabs.Tabs.Trigger, { value: tab.platform, children: tab.label }, tab.platform)),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tabs.Tabs.Indicator, {})
+  ] }),
+  tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Tabs.Tabs.Content, { value: tab.platform, children: tab.content }, tab.platform))
+] });
+const ArticlePoll = ({ pollId, question, options = [], state = "ready", onLoad, onVote, selection, multiple = false, onSelectionChange, onSubmit, onRetract, totalVotes, className, ...props }) => {
   React.useEffect(() => {
     onLoad?.(pollId);
   }, [pollId, onLoad]);
+  const controlled = selection !== void 0;
+  const total = totalVotes ?? options.reduce((sum, option) => sum + (option.votes ?? 0), 0);
+  const inert = state === "closed" || state === "loading" || state === "error" || !controlled && state !== "ready";
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...props, className: (0, import_classnames.default)("dsx-article-poll", className), "data-dsx-poll-id": pollId, "data-state": state, "aria-busy": state === "loading" || void 0, children: [
     question ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: question }) : null,
-    state === "error" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "alert", children: "Poll unavailable" }) : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("button", { type: "button", disabled: state !== "ready", onClick: () => onVote?.(pollId, option.id), children: [
-      option.label,
-      option.votes === void 0 ? null : ` (${option.votes})`
-    ] }, option.id))
+    state === "closed" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "status", children: "Poll closed" }) : null,
+    state === "error" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { role: "alert", children: "Poll unavailable" }) : options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-article-poll__result", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Button.Button, { className: "dsx-article-poll__option", type: "button", size: "lg", variant: selection?.includes(option.id) ? "secondary" : "outline", "aria-pressed": controlled ? selection.includes(option.id) : void 0, disabled: inert, onClick: () => {
+        if (!controlled) {
+          onVote?.(pollId, option.id);
+          return;
+        }
+        onSelectionChange?.(multiple ? selection.includes(option.id) ? selection.filter((id) => id !== option.id) : [...selection, option.id] : [option.id]);
+      }, children: [
+        option.label,
+        option.votes === void 0 ? null : ` (${option.votes})`
+      ] }),
+      option.votes !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("progress", { "aria-label": `${String(option.label)} results`, value: option.votes, max: Math.max(total, 1) }) : null
+    ] }, option.id)),
+    controlled && !inert ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "dsx-article-poll__actions", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "lg", disabled: !selection.length || !onSubmit, onClick: () => onSubmit?.(pollId, selection), children: state === "voted" ? "Change vote" : "Vote" }),
+      state === "voted" && onRetract ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Button.Button, { type: "button", size: "lg", variant: "outline", onClick: () => onRetract(pollId), children: "Retract vote" }) : null
+    ] }) : null
   ] });
 };
 //# sourceMappingURL=ArticleNodes.cjs.map