@d4gger/design-system 3.0.1 → 4.0.0

package/dist/components/notification-center.css

@@ -2,10 +2,14 @@
 
 .dsx-notification-center {
   box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-notification-center--popover {
-  width: 320px;
+  width: var(--dsx-sheet-width-sm);
   border-radius: var(--dsx-rounded-lg);
   border: var(--dsx-border-width-sm) solid var(--dsx-panel-border-color);
   background: var(--dsx-color-panel-translucent);
@@ -23,6 +27,9 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  flex-wrap: wrap;
+  flex-shrink: 0;
+  gap: var(--dsx-space-sm);
   padding: var(--dsx-space-md);
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
 }
@@ -35,6 +42,8 @@
 }
 
 .dsx-notification-center__list {
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
   max-height: 400px;
 }
@@ -46,16 +55,36 @@
   padding: var(--dsx-space-md);
   border-bottom: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
   cursor: pointer;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: start;
+  font: inherit;
+  color: inherit;
+  background: transparent;
+  border-top: 0;
+  border-right: 0;
+  border-left: var(--dsx-border-width-sm) solid transparent;
+  overflow-wrap: anywhere;
 }
 
 .dsx-notification-center__item:last-child {
   border-bottom: none;
 }
 
-.dsx-notification-center__item:hover {
+.dsx-notification-center__item:hover,
+.dsx-notification-center__item:focus-visible {
   background: var(--dsx-effect-hover-ghost);
 }
 
+.dsx-notification-center__item:focus-visible {
+  outline: var(--dsx-border-width-md) solid var(--dsx-color-primary);
+  outline-offset: calc(-1 * var(--dsx-border-width-md));
+}
+
+.dsx-notification-center__item:active {
+  background: var(--dsx-effect-pressed-layer);
+}
+
 .dsx-notification-center__item--unread {
   background: var(--dsx-color-surface-raised);
   border-left: var(--dsx-border-width-sm) solid var(--dsx-color-primary);
@@ -84,25 +113,36 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-shrink: 0;
   padding: var(--dsx-space-sm);
   border-top: var(--dsx-border-width-sm) solid var(--dsx-color-outline-variant);
 }
 
-.dsx-notification-center__trigger {
+.dsx-notification-center__trigger.dsx-icon-button {
   position: relative;
   display: inline-flex;
   align-items: center;
+  gap: 0;
+  width: auto;
+  min-width: calc(var(--dsx-size-xl) + var(--dsx-space-xs));
+  height: calc(var(--dsx-size-xl) + var(--dsx-space-xs));
+  padding-inline: var(--dsx-space-sm);
+}
+
+.dsx-notification-center__trigger .dsx-icon-button__content {
+  gap: 0;
 }
 
 .dsx-notification-center__badge {
-  position: absolute;
-  top: calc(-1 * var(--dsx-space-xs));
-  right: calc(-1 * var(--dsx-space-xs));
-  min-width: var(--dsx-size-xs);
-  height: var(--dsx-size-xs);
+  position: relative;
+  top: calc(-1 * var(--dsx-space-sm));
+  margin-inline-start: calc(-1 * var(--dsx-space-xs));
+  flex-shrink: 0;
+  min-width: var(--dsx-size-sm);
+  height: var(--dsx-size-sm);
   padding: 0 var(--dsx-space-xs);
   border-radius: var(--dsx-rounded-full);
   font-size: var(--dsx-typography-label-small-font-size);
-  line-height: var(--dsx-size-xs);
+  line-height: var(--dsx-size-sm);
   text-align: center;
 }

package/dist/components/notificationCenter/NotificationCenter.cjs

@@ -42,6 +42,7 @@ var import_react_slot = require("@radix-ui/react-slot");
 var import_extractProps = require("../../_internal/helpers/extractProps");
 var import_Badge = require("../badge/Badge");
 var import_IconButton = require("../iconButton/IconButton");
+var import_Icon = require("../icon/Icon");
 var import_notificationCenter = require("./notificationCenter.props");
 var import_jsx_runtime = require("react/jsx-runtime");
 const NotificationCenter = React.forwardRef(
@@ -116,22 +117,26 @@ NotificationCenterItem.displayName = "NotificationCenterItem";
 const NotificationCenterTrigger = React.forwardRef(
   ({ children, unreadCount, className, ...props }, forwardedRef) => {
     const { asChild, ...triggerProps } = (0, import_extractProps.extractProps)(props, import_notificationCenter.notificationCenterTriggerPropDefs);
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_IconButton.IconButton,
-        {
-          ...triggerProps,
-          ref: forwardedRef,
-          asChild,
-          variant: "ghost",
-          size: "sm",
-          className: (0, import_classnames.default)("dsx-notification-center__trigger", className),
-          "aria-label": props["aria-label"] ?? "Notifications",
-          children
-        }
-      ),
-      unreadCount && unreadCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.Badge, { variant: "error", size: "sm", className: "dsx-notification-center__badge", children: unreadCount > 99 ? "99+" : unreadCount }) : null
-    ] });
+    const badge = unreadCount && unreadCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Badge.Badge, { variant: "primary", size: "sm", className: "dsx-notification-center__badge", "aria-hidden": "true", children: unreadCount > 99 ? "99+" : unreadCount }) : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_IconButton.IconButton,
+      {
+        ...triggerProps,
+        ref: forwardedRef,
+        asChild,
+        variant: "ghost",
+        size: "sm",
+        className: (0, import_classnames.default)("dsx-notification-center__trigger", className),
+        "aria-label": props["aria-label"] ?? (unreadCount && unreadCount > 0 ? `Notifications, ${unreadCount} unread` : "Notifications"),
+        children: asChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_slot.Slot, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children }),
+          badge
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+          children ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Icon.Icon, { name: "bell", size: "sm" }),
+          badge
+        ] })
+      }
+    );
   }
 );
 NotificationCenterTrigger.displayName = "NotificationCenterTrigger";

package/dist/components/notificationCenter/NotificationCenter.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/notificationCenter/NotificationCenter.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 { Badge } from '../badge/Badge'\nimport { IconButton } from '../iconButton/IconButton'\nimport {\n  notificationCenterPropDefs,\n  notificationCenterHeaderPropDefs,\n  notificationCenterListPropDefs,\n  notificationCenterFooterPropDefs,\n  notificationCenterItemPropDefs,\n  notificationCenterTriggerPropDefs,\n} from './notificationCenter.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype NotificationCenterOwnProps = GetPropDefTypes<typeof notificationCenterPropDefs>\ntype NotificationCenterHeaderOwnProps = GetPropDefTypes<typeof notificationCenterHeaderPropDefs>\ntype NotificationCenterListOwnProps = GetPropDefTypes<typeof notificationCenterListPropDefs>\ntype NotificationCenterFooterOwnProps = GetPropDefTypes<typeof notificationCenterFooterPropDefs>\ntype NotificationCenterItemOwnProps = GetPropDefTypes<typeof notificationCenterItemPropDefs>\ntype NotificationCenterTriggerOwnProps = GetPropDefTypes<typeof notificationCenterTriggerPropDefs>\n\ninterface NotificationCenterProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterOwnProps {\n  unreadCount?: number\n}\ninterface NotificationCenterHeaderProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterHeaderOwnProps {}\ninterface NotificationCenterListProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterListOwnProps {}\ninterface NotificationCenterFooterProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterFooterOwnProps {}\ninterface NotificationCenterItemProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterItemOwnProps {}\ninterface NotificationCenterTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, NotificationCenterTriggerOwnProps {\n  unreadCount?: number\n}\n\nconst NotificationCenter = React.forwardRef<HTMLDivElement, NotificationCenterProps>(\n  ({ children, unreadCount, ...props }, forwardedRef) => {\n    const { asChild, className, variant = 'popover', ...notificationCenterProps } = extractProps(\n      props,\n      notificationCenterPropDefs,\n    )\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...notificationCenterProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-notification-center',\n          variant === 'popover' && 'dsx-notification-center--popover',\n          variant === 'sidebar' && 'dsx-notification-center--sidebar',\n          className,\n        )}\n        data-unread={unreadCount && unreadCount > 0 ? String(unreadCount) : undefined}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenter.displayName = 'NotificationCenter'\n\nconst NotificationCenterHeader = React.forwardRef<HTMLDivElement, NotificationCenterHeaderProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...headerProps } = extractProps(props, notificationCenterHeaderPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...headerProps} ref={forwardedRef} className={classNames('dsx-notification-center__header', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterHeader.displayName = 'NotificationCenterHeader'\n\nconst NotificationCenterList = React.forwardRef<HTMLDivElement, NotificationCenterListProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...listProps } = extractProps(props, notificationCenterListPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...listProps} ref={forwardedRef} className={classNames('dsx-notification-center__list', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterList.displayName = 'NotificationCenterList'\n\nconst NotificationCenterFooter = React.forwardRef<HTMLDivElement, NotificationCenterFooterProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...footerProps } = extractProps(props, notificationCenterFooterPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...footerProps} ref={forwardedRef} className={classNames('dsx-notification-center__footer', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterFooter.displayName = 'NotificationCenterFooter'\n\nconst NotificationCenterItem = React.forwardRef<HTMLDivElement, NotificationCenterItemProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, unread = false, ...itemProps } = extractProps(\n      props,\n      notificationCenterItemPropDefs,\n    )\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...itemProps}\n        ref={forwardedRef}\n        data-unread={unread ? 'true' : undefined}\n        className={classNames('dsx-notification-center__item', unread && 'dsx-notification-center__item--unread', className)}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterItem.displayName = 'NotificationCenterItem'\n\nconst NotificationCenterTrigger = React.forwardRef<HTMLButtonElement, NotificationCenterTriggerProps>(\n  ({ children, unreadCount, className, ...props }, forwardedRef) => {\n    const { asChild, ...triggerProps } = extractProps(props, notificationCenterTriggerPropDefs)\n\n    return (\n      <>\n        <IconButton\n          {...triggerProps}\n          ref={forwardedRef}\n          asChild={asChild}\n          variant=\"ghost\"\n          size=\"sm\"\n          className={classNames('dsx-notification-center__trigger', className)}\n          aria-label={props['aria-label'] ?? 'Notifications'}\n        >\n          {children}\n        </IconButton>\n        {unreadCount && unreadCount > 0 ? (\n          <Badge variant=\"error\" size=\"sm\" className=\"dsx-notification-center__badge\">\n            {unreadCount > 99 ? '99+' : unreadCount}\n          </Badge>\n        ) : null}\n      </>\n    )\n  },\n)\nNotificationCenterTrigger.displayName = 'NotificationCenterTrigger'\n\nconst NotificationCenterRoot: typeof NotificationCenter & {\n  Header: typeof NotificationCenterHeader\n  List: typeof NotificationCenterList\n  Footer: typeof NotificationCenterFooter\n  Item: typeof NotificationCenterItem\n  Trigger: typeof NotificationCenterTrigger\n} = Object.assign(NotificationCenter, {\n  Header: NotificationCenterHeader,\n  List: NotificationCenterList,\n  Footer: NotificationCenterFooter,\n  Item: NotificationCenterItem,\n  Trigger: NotificationCenterTrigger,\n})\n\nexport {\n  NotificationCenterRoot as NotificationCenter,\n  NotificationCenterHeader,\n  NotificationCenterList,\n  NotificationCenterFooter,\n  NotificationCenterItem,\n  NotificationCenterTrigger,\n}\nexport type {\n  NotificationCenterProps,\n  NotificationCenterHeaderProps,\n  NotificationCenterListProps,\n  NotificationCenterFooterProps,\n  NotificationCenterItemProps,\n  NotificationCenterTriggerProps,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Badge } from '../badge/Badge'\nimport { IconButton } from '../iconButton/IconButton'\nimport { Icon } from '../icon/Icon'\nimport {\n  notificationCenterPropDefs,\n  notificationCenterHeaderPropDefs,\n  notificationCenterListPropDefs,\n  notificationCenterFooterPropDefs,\n  notificationCenterItemPropDefs,\n  notificationCenterTriggerPropDefs,\n} from './notificationCenter.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype NotificationCenterOwnProps = GetPropDefTypes<typeof notificationCenterPropDefs>\ntype NotificationCenterHeaderOwnProps = GetPropDefTypes<typeof notificationCenterHeaderPropDefs>\ntype NotificationCenterListOwnProps = GetPropDefTypes<typeof notificationCenterListPropDefs>\ntype NotificationCenterFooterOwnProps = GetPropDefTypes<typeof notificationCenterFooterPropDefs>\ntype NotificationCenterItemOwnProps = GetPropDefTypes<typeof notificationCenterItemPropDefs>\ntype NotificationCenterTriggerOwnProps = GetPropDefTypes<typeof notificationCenterTriggerPropDefs>\n\ninterface NotificationCenterProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterOwnProps {\n  unreadCount?: number\n}\ninterface NotificationCenterHeaderProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterHeaderOwnProps {}\ninterface NotificationCenterListProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterListOwnProps {}\ninterface NotificationCenterFooterProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterFooterOwnProps {}\ninterface NotificationCenterItemProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterItemOwnProps {}\ninterface NotificationCenterTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, NotificationCenterTriggerOwnProps {\n  unreadCount?: number\n}\n\nconst NotificationCenter = React.forwardRef<HTMLDivElement, NotificationCenterProps>(\n  ({ children, unreadCount, ...props }, forwardedRef) => {\n    const { asChild, className, variant = 'popover', ...notificationCenterProps } = extractProps(\n      props,\n      notificationCenterPropDefs,\n    )\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...notificationCenterProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-notification-center',\n          variant === 'popover' && 'dsx-notification-center--popover',\n          variant === 'sidebar' && 'dsx-notification-center--sidebar',\n          className,\n        )}\n        data-unread={unreadCount && unreadCount > 0 ? String(unreadCount) : undefined}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenter.displayName = 'NotificationCenter'\n\nconst NotificationCenterHeader = React.forwardRef<HTMLDivElement, NotificationCenterHeaderProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...headerProps } = extractProps(props, notificationCenterHeaderPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...headerProps} ref={forwardedRef} className={classNames('dsx-notification-center__header', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterHeader.displayName = 'NotificationCenterHeader'\n\nconst NotificationCenterList = React.forwardRef<HTMLDivElement, NotificationCenterListProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...listProps } = extractProps(props, notificationCenterListPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...listProps} ref={forwardedRef} className={classNames('dsx-notification-center__list', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterList.displayName = 'NotificationCenterList'\n\nconst NotificationCenterFooter = React.forwardRef<HTMLDivElement, NotificationCenterFooterProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...footerProps } = extractProps(props, notificationCenterFooterPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...footerProps} ref={forwardedRef} className={classNames('dsx-notification-center__footer', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterFooter.displayName = 'NotificationCenterFooter'\n\nconst NotificationCenterItem = React.forwardRef<HTMLDivElement, NotificationCenterItemProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, unread = false, ...itemProps } = extractProps(\n      props,\n      notificationCenterItemPropDefs,\n    )\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...itemProps}\n        ref={forwardedRef}\n        data-unread={unread ? 'true' : undefined}\n        className={classNames('dsx-notification-center__item', unread && 'dsx-notification-center__item--unread', className)}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterItem.displayName = 'NotificationCenterItem'\n\nconst NotificationCenterTrigger = React.forwardRef<HTMLButtonElement, NotificationCenterTriggerProps>(\n  ({ children, unreadCount, className, ...props }, forwardedRef) => {\n    const { asChild, ...triggerProps } = extractProps(props, notificationCenterTriggerPropDefs)\n    const badge = unreadCount && unreadCount > 0 ? (\n      <Badge variant=\"primary\" size=\"sm\" className=\"dsx-notification-center__badge\" aria-hidden=\"true\">\n        {unreadCount > 99 ? '99+' : unreadCount}\n      </Badge>\n    ) : null\n\n    return (\n        <IconButton\n          {...triggerProps}\n          ref={forwardedRef}\n          asChild={asChild}\n          variant=\"ghost\"\n          size=\"sm\"\n          className={classNames('dsx-notification-center__trigger', className)}\n          aria-label={props['aria-label'] ?? (unreadCount && unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications')}\n        >\n          {asChild ? (\n            <Slot><Slottable>{children}</Slottable>{badge}</Slot>\n          ) : (\n            <>{children ?? <Icon name=\"bell\" size=\"sm\" />}{badge}</>\n          )}\n        </IconButton>\n    )\n  },\n)\nNotificationCenterTrigger.displayName = 'NotificationCenterTrigger'\n\nconst NotificationCenterRoot: typeof NotificationCenter & {\n  Header: typeof NotificationCenterHeader\n  List: typeof NotificationCenterList\n  Footer: typeof NotificationCenterFooter\n  Item: typeof NotificationCenterItem\n  Trigger: typeof NotificationCenterTrigger\n} = Object.assign(NotificationCenter, {\n  Header: NotificationCenterHeader,\n  List: NotificationCenterList,\n  Footer: NotificationCenterFooter,\n  Item: NotificationCenterItem,\n  Trigger: NotificationCenterTrigger,\n})\n\nexport {\n  NotificationCenterRoot as NotificationCenter,\n  NotificationCenterHeader,\n  NotificationCenterList,\n  NotificationCenterFooter,\n  NotificationCenterItem,\n  NotificationCenterTrigger,\n}\nexport type {\n  NotificationCenterProps,\n  NotificationCenterHeaderProps,\n  NotificationCenterListProps,\n  NotificationCenterFooterProps,\n  NotificationCenterItemProps,\n  NotificationCenterTriggerProps,\n}\n"],
+  "mappings": "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",
   "names": ["classNames"]
 }

package/dist/components/notificationCenter/NotificationCenter.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.d.cts","sourceRoot":"","sources":["../../../src/components/notificationCenter/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,iCAAiC,GAAG,eAAe,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAElG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,0BAA0B;IACxG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,8BAA+B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iCAAiC;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,kBAAkB,gGAwBvB,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAW3B,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAmB3B,CAAA;AAGD,QAAA,MAAM,yBAAyB,0GAyB9B,CAAA;AAGD,QAAA,MAAM,sBAAsB,EAAE,OAAO,kBAAkB,GAAG;IACxD,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,OAAO,EAAE,OAAO,yBAAyB,CAAA;CAOzC,CAAA;AAEF,OAAO,EACL,sBAAsB,IAAI,kBAAkB,EAC5C,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,GAC1B,CAAA;AACD,YAAY,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,8BAA8B,GAC/B,CAAA"}
+{"version":3,"file":"NotificationCenter.d.cts","sourceRoot":"","sources":["../../../src/components/notificationCenter/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,iCAAiC,GAAG,eAAe,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAElG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,0BAA0B;IACxG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,8BAA+B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iCAAiC;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,kBAAkB,gGAwBvB,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAW3B,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAmB3B,CAAA;AAGD,QAAA,MAAM,yBAAyB,0GA2B9B,CAAA;AAGD,QAAA,MAAM,sBAAsB,EAAE,OAAO,kBAAkB,GAAG;IACxD,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,OAAO,EAAE,OAAO,yBAAyB,CAAA;CAOzC,CAAA;AAEF,OAAO,EACL,sBAAsB,IAAI,kBAAkB,EAC5C,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,GAC1B,CAAA;AACD,YAAY,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,8BAA8B,GAC/B,CAAA"}

package/dist/components/notificationCenter/NotificationCenter.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.d.mts","sourceRoot":"","sources":["../../../src/components/notificationCenter/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,iCAAiC,GAAG,eAAe,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAElG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,0BAA0B;IACxG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,8BAA+B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iCAAiC;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,kBAAkB,gGAwBvB,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAW3B,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAmB3B,CAAA;AAGD,QAAA,MAAM,yBAAyB,0GAyB9B,CAAA;AAGD,QAAA,MAAM,sBAAsB,EAAE,OAAO,kBAAkB,GAAG;IACxD,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,OAAO,EAAE,OAAO,yBAAyB,CAAA;CAOzC,CAAA;AAEF,OAAO,EACL,sBAAsB,IAAI,kBAAkB,EAC5C,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,GAC1B,CAAA;AACD,YAAY,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,8BAA8B,GAC/B,CAAA"}
+{"version":3,"file":"NotificationCenter.d.mts","sourceRoot":"","sources":["../../../src/components/notificationCenter/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,iCAAiC,GAAG,eAAe,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAElG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,0BAA0B;IACxG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,8BAA+B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iCAAiC;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,kBAAkB,gGAwBvB,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAW3B,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAmB3B,CAAA;AAGD,QAAA,MAAM,yBAAyB,0GA2B9B,CAAA;AAGD,QAAA,MAAM,sBAAsB,EAAE,OAAO,kBAAkB,GAAG;IACxD,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,OAAO,EAAE,OAAO,yBAAyB,CAAA;CAOzC,CAAA;AAEF,OAAO,EACL,sBAAsB,IAAI,kBAAkB,EAC5C,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,GAC1B,CAAA;AACD,YAAY,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,8BAA8B,GAC/B,CAAA"}

package/dist/components/notificationCenter/NotificationCenter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NotificationCenter.d.ts","sourceRoot":"","sources":["../../../src/components/notificationCenter/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,iCAAiC,GAAG,eAAe,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAElG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,0BAA0B;IACxG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,8BAA+B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iCAAiC;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,kBAAkB,gGAwBvB,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAW3B,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAmB3B,CAAA;AAGD,QAAA,MAAM,yBAAyB,0GAyB9B,CAAA;AAGD,QAAA,MAAM,sBAAsB,EAAE,OAAO,kBAAkB,GAAG;IACxD,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,OAAO,EAAE,OAAO,yBAAyB,CAAA;CAOzC,CAAA;AAEF,OAAO,EACL,sBAAsB,IAAI,kBAAkB,EAC5C,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,GAC1B,CAAA;AACD,YAAY,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,8BAA8B,GAC/B,CAAA"}
+{"version":3,"file":"NotificationCenter.d.ts","sourceRoot":"","sources":["../../../src/components/notificationCenter/NotificationCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAQ9B,OAAO,EACL,0BAA0B,EAC1B,gCAAgC,EAChC,8BAA8B,EAC9B,gCAAgC,EAChC,8BAA8B,EAC9B,iCAAiC,EAClC,MAAM,4BAA4B,CAAA;AAEnC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAEpE,KAAK,0BAA0B,GAAG,eAAe,CAAC,OAAO,0BAA0B,CAAC,CAAA;AACpF,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,gCAAgC,GAAG,eAAe,CAAC,OAAO,gCAAgC,CAAC,CAAA;AAChG,KAAK,8BAA8B,GAAG,eAAe,CAAC,OAAO,8BAA8B,CAAC,CAAA;AAC5F,KAAK,iCAAiC,GAAG,eAAe,CAAC,OAAO,iCAAiC,CAAC,CAAA;AAElG,UAAU,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,0BAA0B;IACxG,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AACD,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,6BAA8B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,gCAAgC;CAAG;AACzH,UAAU,2BAA4B,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,8BAA8B;CAAG;AACrH,UAAU,8BAA+B,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,iCAAiC;IAC/H,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,QAAA,MAAM,kBAAkB,gGAwBvB,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAW3B,CAAA;AAGD,QAAA,MAAM,wBAAwB,sGAW7B,CAAA;AAGD,QAAA,MAAM,sBAAsB,oGAmB3B,CAAA;AAGD,QAAA,MAAM,yBAAyB,0GA2B9B,CAAA;AAGD,QAAA,MAAM,sBAAsB,EAAE,OAAO,kBAAkB,GAAG;IACxD,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,MAAM,EAAE,OAAO,wBAAwB,CAAA;IACvC,IAAI,EAAE,OAAO,sBAAsB,CAAA;IACnC,OAAO,EAAE,OAAO,yBAAyB,CAAA;CAOzC,CAAA;AAEF,OAAO,EACL,sBAAsB,IAAI,kBAAkB,EAC5C,wBAAwB,EACxB,sBAAsB,EACtB,wBAAwB,EACxB,sBAAsB,EACtB,yBAAyB,GAC1B,CAAA;AACD,YAAY,EACV,uBAAuB,EACvB,6BAA6B,EAC7B,2BAA2B,EAC3B,6BAA6B,EAC7B,2BAA2B,EAC3B,8BAA8B,GAC/B,CAAA"}

package/dist/components/notificationCenter/NotificationCenter.js

@@ -1,9 +1,10 @@
 import * as React from "react";
 import classNames from "classnames";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { Badge } from "../badge/Badge.js";
 import { IconButton } from "../iconButton/IconButton.js";
+import { Icon } from "../icon/Icon.js";
 import {
   notificationCenterPropDefs,
   notificationCenterHeaderPropDefs,
@@ -85,22 +86,26 @@ NotificationCenterItem.displayName = "NotificationCenterItem";
 const NotificationCenterTrigger = React.forwardRef(
   ({ children, unreadCount, className, ...props }, forwardedRef) => {
     const { asChild, ...triggerProps } = extractProps(props, notificationCenterTriggerPropDefs);
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        IconButton,
-        {
-          ...triggerProps,
-          ref: forwardedRef,
-          asChild,
-          variant: "ghost",
-          size: "sm",
-          className: classNames("dsx-notification-center__trigger", className),
-          "aria-label": props["aria-label"] ?? "Notifications",
-          children
-        }
-      ),
-      unreadCount && unreadCount > 0 ? /* @__PURE__ */ jsx(Badge, { variant: "error", size: "sm", className: "dsx-notification-center__badge", children: unreadCount > 99 ? "99+" : unreadCount }) : null
-    ] });
+    const badge = unreadCount && unreadCount > 0 ? /* @__PURE__ */ jsx(Badge, { variant: "primary", size: "sm", className: "dsx-notification-center__badge", "aria-hidden": "true", children: unreadCount > 99 ? "99+" : unreadCount }) : null;
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        ...triggerProps,
+        ref: forwardedRef,
+        asChild,
+        variant: "ghost",
+        size: "sm",
+        className: classNames("dsx-notification-center__trigger", className),
+        "aria-label": props["aria-label"] ?? (unreadCount && unreadCount > 0 ? `Notifications, ${unreadCount} unread` : "Notifications"),
+        children: asChild ? /* @__PURE__ */ jsxs(Slot, { children: [
+          /* @__PURE__ */ jsx(Slottable, { children }),
+          badge
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          children ?? /* @__PURE__ */ jsx(Icon, { name: "bell", size: "sm" }),
+          badge
+        ] })
+      }
+    );
   }
 );
 NotificationCenterTrigger.displayName = "NotificationCenterTrigger";

package/dist/components/notificationCenter/NotificationCenter.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/notificationCenter/NotificationCenter.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 { Badge } from '../badge/Badge'\nimport { IconButton } from '../iconButton/IconButton'\nimport {\n  notificationCenterPropDefs,\n  notificationCenterHeaderPropDefs,\n  notificationCenterListPropDefs,\n  notificationCenterFooterPropDefs,\n  notificationCenterItemPropDefs,\n  notificationCenterTriggerPropDefs,\n} from './notificationCenter.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype NotificationCenterOwnProps = GetPropDefTypes<typeof notificationCenterPropDefs>\ntype NotificationCenterHeaderOwnProps = GetPropDefTypes<typeof notificationCenterHeaderPropDefs>\ntype NotificationCenterListOwnProps = GetPropDefTypes<typeof notificationCenterListPropDefs>\ntype NotificationCenterFooterOwnProps = GetPropDefTypes<typeof notificationCenterFooterPropDefs>\ntype NotificationCenterItemOwnProps = GetPropDefTypes<typeof notificationCenterItemPropDefs>\ntype NotificationCenterTriggerOwnProps = GetPropDefTypes<typeof notificationCenterTriggerPropDefs>\n\ninterface NotificationCenterProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterOwnProps {\n  unreadCount?: number\n}\ninterface NotificationCenterHeaderProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterHeaderOwnProps {}\ninterface NotificationCenterListProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterListOwnProps {}\ninterface NotificationCenterFooterProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterFooterOwnProps {}\ninterface NotificationCenterItemProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterItemOwnProps {}\ninterface NotificationCenterTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, NotificationCenterTriggerOwnProps {\n  unreadCount?: number\n}\n\nconst NotificationCenter = React.forwardRef<HTMLDivElement, NotificationCenterProps>(\n  ({ children, unreadCount, ...props }, forwardedRef) => {\n    const { asChild, className, variant = 'popover', ...notificationCenterProps } = extractProps(\n      props,\n      notificationCenterPropDefs,\n    )\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...notificationCenterProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-notification-center',\n          variant === 'popover' && 'dsx-notification-center--popover',\n          variant === 'sidebar' && 'dsx-notification-center--sidebar',\n          className,\n        )}\n        data-unread={unreadCount && unreadCount > 0 ? String(unreadCount) : undefined}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenter.displayName = 'NotificationCenter'\n\nconst NotificationCenterHeader = React.forwardRef<HTMLDivElement, NotificationCenterHeaderProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...headerProps } = extractProps(props, notificationCenterHeaderPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...headerProps} ref={forwardedRef} className={classNames('dsx-notification-center__header', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterHeader.displayName = 'NotificationCenterHeader'\n\nconst NotificationCenterList = React.forwardRef<HTMLDivElement, NotificationCenterListProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...listProps } = extractProps(props, notificationCenterListPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...listProps} ref={forwardedRef} className={classNames('dsx-notification-center__list', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterList.displayName = 'NotificationCenterList'\n\nconst NotificationCenterFooter = React.forwardRef<HTMLDivElement, NotificationCenterFooterProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...footerProps } = extractProps(props, notificationCenterFooterPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...footerProps} ref={forwardedRef} className={classNames('dsx-notification-center__footer', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterFooter.displayName = 'NotificationCenterFooter'\n\nconst NotificationCenterItem = React.forwardRef<HTMLDivElement, NotificationCenterItemProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, unread = false, ...itemProps } = extractProps(\n      props,\n      notificationCenterItemPropDefs,\n    )\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...itemProps}\n        ref={forwardedRef}\n        data-unread={unread ? 'true' : undefined}\n        className={classNames('dsx-notification-center__item', unread && 'dsx-notification-center__item--unread', className)}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterItem.displayName = 'NotificationCenterItem'\n\nconst NotificationCenterTrigger = React.forwardRef<HTMLButtonElement, NotificationCenterTriggerProps>(\n  ({ children, unreadCount, className, ...props }, forwardedRef) => {\n    const { asChild, ...triggerProps } = extractProps(props, notificationCenterTriggerPropDefs)\n\n    return (\n      <>\n        <IconButton\n          {...triggerProps}\n          ref={forwardedRef}\n          asChild={asChild}\n          variant=\"ghost\"\n          size=\"sm\"\n          className={classNames('dsx-notification-center__trigger', className)}\n          aria-label={props['aria-label'] ?? 'Notifications'}\n        >\n          {children}\n        </IconButton>\n        {unreadCount && unreadCount > 0 ? (\n          <Badge variant=\"error\" size=\"sm\" className=\"dsx-notification-center__badge\">\n            {unreadCount > 99 ? '99+' : unreadCount}\n          </Badge>\n        ) : null}\n      </>\n    )\n  },\n)\nNotificationCenterTrigger.displayName = 'NotificationCenterTrigger'\n\nconst NotificationCenterRoot: typeof NotificationCenter & {\n  Header: typeof NotificationCenterHeader\n  List: typeof NotificationCenterList\n  Footer: typeof NotificationCenterFooter\n  Item: typeof NotificationCenterItem\n  Trigger: typeof NotificationCenterTrigger\n} = Object.assign(NotificationCenter, {\n  Header: NotificationCenterHeader,\n  List: NotificationCenterList,\n  Footer: NotificationCenterFooter,\n  Item: NotificationCenterItem,\n  Trigger: NotificationCenterTrigger,\n})\n\nexport {\n  NotificationCenterRoot as NotificationCenter,\n  NotificationCenterHeader,\n  NotificationCenterList,\n  NotificationCenterFooter,\n  NotificationCenterItem,\n  NotificationCenterTrigger,\n}\nexport type {\n  NotificationCenterProps,\n  NotificationCenterHeaderProps,\n  NotificationCenterListProps,\n  NotificationCenterFooterProps,\n  NotificationCenterItemProps,\n  NotificationCenterTriggerProps,\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Badge } from '../badge/Badge'\nimport { IconButton } from '../iconButton/IconButton'\nimport { Icon } from '../icon/Icon'\nimport {\n  notificationCenterPropDefs,\n  notificationCenterHeaderPropDefs,\n  notificationCenterListPropDefs,\n  notificationCenterFooterPropDefs,\n  notificationCenterItemPropDefs,\n  notificationCenterTriggerPropDefs,\n} from './notificationCenter.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype NotificationCenterOwnProps = GetPropDefTypes<typeof notificationCenterPropDefs>\ntype NotificationCenterHeaderOwnProps = GetPropDefTypes<typeof notificationCenterHeaderPropDefs>\ntype NotificationCenterListOwnProps = GetPropDefTypes<typeof notificationCenterListPropDefs>\ntype NotificationCenterFooterOwnProps = GetPropDefTypes<typeof notificationCenterFooterPropDefs>\ntype NotificationCenterItemOwnProps = GetPropDefTypes<typeof notificationCenterItemPropDefs>\ntype NotificationCenterTriggerOwnProps = GetPropDefTypes<typeof notificationCenterTriggerPropDefs>\n\ninterface NotificationCenterProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterOwnProps {\n  unreadCount?: number\n}\ninterface NotificationCenterHeaderProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterHeaderOwnProps {}\ninterface NotificationCenterListProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterListOwnProps {}\ninterface NotificationCenterFooterProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterFooterOwnProps {}\ninterface NotificationCenterItemProps extends React.HTMLAttributes<HTMLDivElement>, NotificationCenterItemOwnProps {}\ninterface NotificationCenterTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, NotificationCenterTriggerOwnProps {\n  unreadCount?: number\n}\n\nconst NotificationCenter = React.forwardRef<HTMLDivElement, NotificationCenterProps>(\n  ({ children, unreadCount, ...props }, forwardedRef) => {\n    const { asChild, className, variant = 'popover', ...notificationCenterProps } = extractProps(\n      props,\n      notificationCenterPropDefs,\n    )\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...notificationCenterProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-notification-center',\n          variant === 'popover' && 'dsx-notification-center--popover',\n          variant === 'sidebar' && 'dsx-notification-center--sidebar',\n          className,\n        )}\n        data-unread={unreadCount && unreadCount > 0 ? String(unreadCount) : undefined}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenter.displayName = 'NotificationCenter'\n\nconst NotificationCenterHeader = React.forwardRef<HTMLDivElement, NotificationCenterHeaderProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...headerProps } = extractProps(props, notificationCenterHeaderPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...headerProps} ref={forwardedRef} className={classNames('dsx-notification-center__header', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterHeader.displayName = 'NotificationCenterHeader'\n\nconst NotificationCenterList = React.forwardRef<HTMLDivElement, NotificationCenterListProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...listProps } = extractProps(props, notificationCenterListPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...listProps} ref={forwardedRef} className={classNames('dsx-notification-center__list', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterList.displayName = 'NotificationCenterList'\n\nconst NotificationCenterFooter = React.forwardRef<HTMLDivElement, NotificationCenterFooterProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, ...footerProps } = extractProps(props, notificationCenterFooterPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...footerProps} ref={forwardedRef} className={classNames('dsx-notification-center__footer', className)}>\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterFooter.displayName = 'NotificationCenterFooter'\n\nconst NotificationCenterItem = React.forwardRef<HTMLDivElement, NotificationCenterItemProps>(\n  ({ children, ...props }, forwardedRef) => {\n    const { asChild, className, unread = false, ...itemProps } = extractProps(\n      props,\n      notificationCenterItemPropDefs,\n    )\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp\n        {...itemProps}\n        ref={forwardedRef}\n        data-unread={unread ? 'true' : undefined}\n        className={classNames('dsx-notification-center__item', unread && 'dsx-notification-center__item--unread', className)}\n      >\n        {children}\n      </Comp>\n    )\n  },\n)\nNotificationCenterItem.displayName = 'NotificationCenterItem'\n\nconst NotificationCenterTrigger = React.forwardRef<HTMLButtonElement, NotificationCenterTriggerProps>(\n  ({ children, unreadCount, className, ...props }, forwardedRef) => {\n    const { asChild, ...triggerProps } = extractProps(props, notificationCenterTriggerPropDefs)\n    const badge = unreadCount && unreadCount > 0 ? (\n      <Badge variant=\"primary\" size=\"sm\" className=\"dsx-notification-center__badge\" aria-hidden=\"true\">\n        {unreadCount > 99 ? '99+' : unreadCount}\n      </Badge>\n    ) : null\n\n    return (\n        <IconButton\n          {...triggerProps}\n          ref={forwardedRef}\n          asChild={asChild}\n          variant=\"ghost\"\n          size=\"sm\"\n          className={classNames('dsx-notification-center__trigger', className)}\n          aria-label={props['aria-label'] ?? (unreadCount && unreadCount > 0 ? `Notifications, ${unreadCount} unread` : 'Notifications')}\n        >\n          {asChild ? (\n            <Slot><Slottable>{children}</Slottable>{badge}</Slot>\n          ) : (\n            <>{children ?? <Icon name=\"bell\" size=\"sm\" />}{badge}</>\n          )}\n        </IconButton>\n    )\n  },\n)\nNotificationCenterTrigger.displayName = 'NotificationCenterTrigger'\n\nconst NotificationCenterRoot: typeof NotificationCenter & {\n  Header: typeof NotificationCenterHeader\n  List: typeof NotificationCenterList\n  Footer: typeof NotificationCenterFooter\n  Item: typeof NotificationCenterItem\n  Trigger: typeof NotificationCenterTrigger\n} = Object.assign(NotificationCenter, {\n  Header: NotificationCenterHeader,\n  List: NotificationCenterList,\n  Footer: NotificationCenterFooter,\n  Item: NotificationCenterItem,\n  Trigger: NotificationCenterTrigger,\n})\n\nexport {\n  NotificationCenterRoot as NotificationCenter,\n  NotificationCenterHeader,\n  NotificationCenterList,\n  NotificationCenterFooter,\n  NotificationCenterItem,\n  NotificationCenterTrigger,\n}\nexport type {\n  NotificationCenterProps,\n  NotificationCenterHeaderProps,\n  NotificationCenterListProps,\n  NotificationCenterFooterProps,\n  NotificationCenterItemProps,\n  NotificationCenterTriggerProps,\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/pills/Pills.cjs

@@ -110,7 +110,7 @@ const Pill = React.forwardRef(
         "data-radius": radius,
         "data-tone": tone,
         children: [
-          children,
+          asChild ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_slot.Slottable, { children }) : children,
           removable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "button",
             {

package/dist/components/pills/Pills.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/pills/Pills.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 { Icon } from '../icon/Icon'\nimport {\n  pillsPropDefs,\n  pillPropDefs,\n} from './pills.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PillsOwnProps = GetPropDefTypes<typeof pillsPropDefs>\ntype PillOwnProps = GetPropDefTypes<typeof pillPropDefs>\n\ninterface PillsProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'color'>, PillsOwnProps {}\ninterface PillProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'color'>, PillOwnProps {\n  onRemove?: () => void\n}\n\ninterface PillsContextValue {\n  size?: PillOwnProps['size']\n  variant?: PillOwnProps['variant']\n  color?: PillOwnProps['color']\n  radius?: PillOwnProps['radius']\n}\n\nconst PillsContext = React.createContext<PillsContextValue>({})\n\n// Root variant vocabulary (solid/soft/outline) mapped onto the item vocabulary\n// so the root prop cascades instead of writing a data attribute no CSS reads.\nconst rootVariantMap = {\n  solid: 'default',\n  soft: 'soft',\n  outline: 'outline',\n} as const\n\nconst Pills = React.forwardRef<HTMLUListElement, PillsProps>(({ children, ...props }, forwardedRef) => {\n  const { asChild, className, color, radius, size = 'md', variant = 'solid', ...pillsProps } = extractProps(props, pillsPropDefs)\n  const Comp = asChild ? Slot : 'ul'\n\n  return (\n    <PillsContext.Provider value={{ size, variant: rootVariantMap[variant] ?? 'default', color, radius }}>\n      <Comp\n        {...pillsProps}\n        ref={forwardedRef}\n        className={classNames('dsx-pills', className)}\n        data-accent-color={color}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {children}\n      </Comp>\n    </PillsContext.Provider>\n  )\n})\nPills.displayName = 'Pills'\n\nconst Pill = React.forwardRef<HTMLLIElement, PillProps>(\n  ({ children, onRemove, size: sizeProp, color: colorProp, radius: radiusProp, variant: variantProp, ...props }, forwardedRef) => {\n    const context = React.useContext(PillsContext)\n    const {\n      asChild,\n      className,\n      variant = 'default',\n      size = 'md',\n      color,\n      radius,\n      tone,\n      removable = false,\n      ...pillProps\n    } = extractProps(\n      {\n        ...props,\n        variant: variantProp ?? context.variant,\n        size: sizeProp ?? context.size,\n        color: colorProp ?? context.color,\n        radius: radiusProp ?? context.radius,\n      },\n      pillPropDefs,\n    )\n    const Comp = asChild ? Slot : 'li'\n\n    return (\n      <Comp\n        {...pillProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-pill',\n          variant === 'default' && 'dsx-pill--default',\n          variant === 'secondary' && 'dsx-pill--secondary',\n          variant === 'soft' && 'dsx-pill--soft',\n          variant === 'destructive' && 'dsx-pill--destructive',\n          variant === 'outline' && 'dsx-pill--outline',\n          variant === 'ghost' && 'dsx-pill--ghost',\n          variant === 'link' && 'dsx-pill--link',\n          size === 'sm' && 'dsx-pill--sm',\n          size === 'md' && 'dsx-pill--md',\n          size === 'lg' && 'dsx-pill--lg',\n          className,\n        )}\n        data-accent-color={color}\n        data-radius={radius}\n        data-tone={tone}\n      >\n        {children}\n        {removable ? (\n          <button\n            type=\"button\"\n            className=\"dsx-pill__remove\"\n            aria-label=\"Remove\"\n            onClick={onRemove}\n          >\n            <Icon name=\"x\" size=\"sm\" />\n          </button>\n        ) : null}\n      </Comp>\n    )\n  },\n)\nPill.displayName = 'Pill'\n\nconst PillsRoot: typeof Pills & {\n  Pill: typeof Pill\n} = Object.assign(Pills, {\n  Pill,\n})\n\nexport {\n  PillsRoot as Pills,\n  Pill,\n}\nexport type {\n  PillsProps,\n  PillProps,\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AAErB,0BAA6B;AAC7B,kBAAqB;AACrB,mBAGO;AAmCD;AAhBN,MAAM,eAAe,MAAM,cAAiC,CAAC,CAAC;AAI9D,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,QAAQ,MAAM,WAAyC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACrG,QAAM,EAAE,SAAS,WAAW,OAAO,QAAQ,OAAO,MAAM,UAAU,SAAS,GAAG,WAAW,QAAI,kCAAa,OAAO,0BAAa;AAC9H,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE,4CAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,MAAM,SAAS,eAAe,OAAO,KAAK,WAAW,OAAO,OAAO,GACjG;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACD,MAAM,cAAc;AAEpB,MAAM,OAAO,MAAM;AAAA,EACjB,CAAC,EAAE,UAAU,UAAU,MAAM,UAAU,OAAO,WAAW,QAAQ,YAAY,SAAS,aAAa,GAAG,MAAM,GAAG,iBAAiB;AAC9H,UAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,GAAG;AAAA,IACL,QAAI;AAAA,MACF;AAAA,QACE,GAAG;AAAA,QACH,SAAS,eAAe,QAAQ;AAAA,QAChC,MAAM,YAAY,QAAQ;AAAA,QAC1B,OAAO,aAAa,QAAQ;AAAA,QAC5B,QAAQ,cAAc,QAAQ;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,kBAAAA;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,eAAe;AAAA,UAC3B,YAAY,UAAU;AAAA,UACtB,YAAY,iBAAiB;AAAA,UAC7B,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,QACA,qBAAmB;AAAA,QACnB,eAAa;AAAA,QACb,aAAW;AAAA,QAEV;AAAA;AAAA,UACA,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAW;AAAA,cACX,SAAS;AAAA,cAET,sDAAC,oBAAK,MAAK,KAAI,MAAK,MAAK;AAAA;AAAA,UAC3B,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAEnB,MAAM,YAEF,OAAO,OAAO,OAAO;AAAA,EACvB;AACF,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport {\n  pillsPropDefs,\n  pillPropDefs,\n} from './pills.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PillsOwnProps = GetPropDefTypes<typeof pillsPropDefs>\ntype PillOwnProps = GetPropDefTypes<typeof pillPropDefs>\n\ninterface PillsProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'color'>, PillsOwnProps {}\ninterface PillProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'color'>, PillOwnProps {\n  onRemove?: () => void\n}\n\ninterface PillsContextValue {\n  size?: PillOwnProps['size']\n  variant?: PillOwnProps['variant']\n  color?: PillOwnProps['color']\n  radius?: PillOwnProps['radius']\n}\n\nconst PillsContext = React.createContext<PillsContextValue>({})\n\n// Root variant vocabulary (solid/soft/outline) mapped onto the item vocabulary\n// so the root prop cascades instead of writing a data attribute no CSS reads.\nconst rootVariantMap = {\n  solid: 'default',\n  soft: 'soft',\n  outline: 'outline',\n} as const\n\nconst Pills = React.forwardRef<HTMLUListElement, PillsProps>(({ children, ...props }, forwardedRef) => {\n  const { asChild, className, color, radius, size = 'md', variant = 'solid', ...pillsProps } = extractProps(props, pillsPropDefs)\n  const Comp = asChild ? Slot : 'ul'\n\n  return (\n    <PillsContext.Provider value={{ size, variant: rootVariantMap[variant] ?? 'default', color, radius }}>\n      <Comp\n        {...pillsProps}\n        ref={forwardedRef}\n        className={classNames('dsx-pills', className)}\n        data-accent-color={color}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {children}\n      </Comp>\n    </PillsContext.Provider>\n  )\n})\nPills.displayName = 'Pills'\n\nconst Pill = React.forwardRef<HTMLLIElement, PillProps>(\n  ({ children, onRemove, size: sizeProp, color: colorProp, radius: radiusProp, variant: variantProp, ...props }, forwardedRef) => {\n    const context = React.useContext(PillsContext)\n    const {\n      asChild,\n      className,\n      variant = 'default',\n      size = 'md',\n      color,\n      radius,\n      tone,\n      removable = false,\n      ...pillProps\n    } = extractProps(\n      {\n        ...props,\n        variant: variantProp ?? context.variant,\n        size: sizeProp ?? context.size,\n        color: colorProp ?? context.color,\n        radius: radiusProp ?? context.radius,\n      },\n      pillPropDefs,\n    )\n    const Comp = asChild ? Slot : 'li'\n\n    return (\n      <Comp\n        {...pillProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-pill',\n          variant === 'default' && 'dsx-pill--default',\n          variant === 'secondary' && 'dsx-pill--secondary',\n          variant === 'soft' && 'dsx-pill--soft',\n          variant === 'destructive' && 'dsx-pill--destructive',\n          variant === 'outline' && 'dsx-pill--outline',\n          variant === 'ghost' && 'dsx-pill--ghost',\n          variant === 'link' && 'dsx-pill--link',\n          size === 'sm' && 'dsx-pill--sm',\n          size === 'md' && 'dsx-pill--md',\n          size === 'lg' && 'dsx-pill--lg',\n          className,\n        )}\n        data-accent-color={color}\n        data-radius={radius}\n        data-tone={tone}\n      >\n        {asChild ? <Slottable>{children}</Slottable> : children}\n        {removable ? (\n          <button\n            type=\"button\"\n            className=\"dsx-pill__remove\"\n            aria-label=\"Remove\"\n            onClick={onRemove}\n          >\n            <Icon name=\"x\" size=\"sm\" />\n          </button>\n        ) : null}\n      </Comp>\n    )\n  },\n)\nPill.displayName = 'Pill'\n\nconst PillsRoot: typeof Pills & {\n  Pill: typeof Pill\n} = Object.assign(Pills, {\n  Pill,\n})\n\nexport {\n  PillsRoot as Pills,\n  Pill,\n}\nexport type {\n  PillsProps,\n  PillProps,\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAgC;AAEhC,0BAA6B;AAC7B,kBAAqB;AACrB,mBAGO;AAmCD;AAhBN,MAAM,eAAe,MAAM,cAAiC,CAAC,CAAC;AAI9D,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,QAAQ,MAAM,WAAyC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACrG,QAAM,EAAE,SAAS,WAAW,OAAO,QAAQ,OAAO,MAAM,UAAU,SAAS,GAAG,WAAW,QAAI,kCAAa,OAAO,0BAAa;AAC9H,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE,4CAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,MAAM,SAAS,eAAe,OAAO,KAAK,WAAW,OAAO,OAAO,GACjG;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACD,MAAM,cAAc;AAEpB,MAAM,OAAO,MAAM;AAAA,EACjB,CAAC,EAAE,UAAU,UAAU,MAAM,UAAU,OAAO,WAAW,QAAQ,YAAY,SAAS,aAAa,GAAG,MAAM,GAAG,iBAAiB;AAC9H,UAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,GAAG;AAAA,IACL,QAAI;AAAA,MACF;AAAA,QACE,GAAG;AAAA,QACH,SAAS,eAAe,QAAQ;AAAA,QAChC,MAAM,YAAY,QAAQ;AAAA,QAC1B,OAAO,aAAa,QAAQ;AAAA,QAC5B,QAAQ,cAAc,QAAQ;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,eAAW,kBAAAA;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,eAAe;AAAA,UAC3B,YAAY,UAAU;AAAA,UACtB,YAAY,iBAAiB;AAAA,UAC7B,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,QACA,qBAAmB;AAAA,QACnB,eAAa;AAAA,QACb,aAAW;AAAA,QAEV;AAAA,oBAAU,4CAAC,+BAAW,UAAS,IAAe;AAAA,UAC9C,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAW;AAAA,cACX,SAAS;AAAA,cAET,sDAAC,oBAAK,MAAK,KAAI,MAAK,MAAK;AAAA;AAAA,UAC3B,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAEnB,MAAM,YAEF,OAAO,OAAO,OAAO;AAAA,EACvB;AACF,CAAC;",
   "names": ["classNames"]
 }

package/dist/components/pills/Pills.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import classNames from "classnames";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot, Slottable } from "@radix-ui/react-slot";
 import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { Icon } from "../icon/Icon.js";
 import {
@@ -79,7 +79,7 @@ const Pill = React.forwardRef(
         "data-radius": radius,
         "data-tone": tone,
         children: [
-          children,
+          asChild ? /* @__PURE__ */ jsx(Slottable, { children }) : children,
           removable ? /* @__PURE__ */ jsx(
             "button",
             {

package/dist/components/pills/Pills.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/pills/Pills.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 { Icon } from '../icon/Icon'\nimport {\n  pillsPropDefs,\n  pillPropDefs,\n} from './pills.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PillsOwnProps = GetPropDefTypes<typeof pillsPropDefs>\ntype PillOwnProps = GetPropDefTypes<typeof pillPropDefs>\n\ninterface PillsProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'color'>, PillsOwnProps {}\ninterface PillProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'color'>, PillOwnProps {\n  onRemove?: () => void\n}\n\ninterface PillsContextValue {\n  size?: PillOwnProps['size']\n  variant?: PillOwnProps['variant']\n  color?: PillOwnProps['color']\n  radius?: PillOwnProps['radius']\n}\n\nconst PillsContext = React.createContext<PillsContextValue>({})\n\n// Root variant vocabulary (solid/soft/outline) mapped onto the item vocabulary\n// so the root prop cascades instead of writing a data attribute no CSS reads.\nconst rootVariantMap = {\n  solid: 'default',\n  soft: 'soft',\n  outline: 'outline',\n} as const\n\nconst Pills = React.forwardRef<HTMLUListElement, PillsProps>(({ children, ...props }, forwardedRef) => {\n  const { asChild, className, color, radius, size = 'md', variant = 'solid', ...pillsProps } = extractProps(props, pillsPropDefs)\n  const Comp = asChild ? Slot : 'ul'\n\n  return (\n    <PillsContext.Provider value={{ size, variant: rootVariantMap[variant] ?? 'default', color, radius }}>\n      <Comp\n        {...pillsProps}\n        ref={forwardedRef}\n        className={classNames('dsx-pills', className)}\n        data-accent-color={color}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {children}\n      </Comp>\n    </PillsContext.Provider>\n  )\n})\nPills.displayName = 'Pills'\n\nconst Pill = React.forwardRef<HTMLLIElement, PillProps>(\n  ({ children, onRemove, size: sizeProp, color: colorProp, radius: radiusProp, variant: variantProp, ...props }, forwardedRef) => {\n    const context = React.useContext(PillsContext)\n    const {\n      asChild,\n      className,\n      variant = 'default',\n      size = 'md',\n      color,\n      radius,\n      tone,\n      removable = false,\n      ...pillProps\n    } = extractProps(\n      {\n        ...props,\n        variant: variantProp ?? context.variant,\n        size: sizeProp ?? context.size,\n        color: colorProp ?? context.color,\n        radius: radiusProp ?? context.radius,\n      },\n      pillPropDefs,\n    )\n    const Comp = asChild ? Slot : 'li'\n\n    return (\n      <Comp\n        {...pillProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-pill',\n          variant === 'default' && 'dsx-pill--default',\n          variant === 'secondary' && 'dsx-pill--secondary',\n          variant === 'soft' && 'dsx-pill--soft',\n          variant === 'destructive' && 'dsx-pill--destructive',\n          variant === 'outline' && 'dsx-pill--outline',\n          variant === 'ghost' && 'dsx-pill--ghost',\n          variant === 'link' && 'dsx-pill--link',\n          size === 'sm' && 'dsx-pill--sm',\n          size === 'md' && 'dsx-pill--md',\n          size === 'lg' && 'dsx-pill--lg',\n          className,\n        )}\n        data-accent-color={color}\n        data-radius={radius}\n        data-tone={tone}\n      >\n        {children}\n        {removable ? (\n          <button\n            type=\"button\"\n            className=\"dsx-pill__remove\"\n            aria-label=\"Remove\"\n            onClick={onRemove}\n          >\n            <Icon name=\"x\" size=\"sm\" />\n          </button>\n        ) : null}\n      </Comp>\n    )\n  },\n)\nPill.displayName = 'Pill'\n\nconst PillsRoot: typeof Pills & {\n  Pill: typeof Pill\n} = Object.assign(Pills, {\n  Pill,\n})\n\nexport {\n  PillsRoot as Pills,\n  Pill,\n}\nexport type {\n  PillsProps,\n  PillProps,\n}\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AAErB,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAmCD,cA0CA,YA1CA;AAhBN,MAAM,eAAe,MAAM,cAAiC,CAAC,CAAC;AAI9D,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,QAAQ,MAAM,WAAyC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACrG,QAAM,EAAE,SAAS,WAAW,OAAO,QAAQ,OAAO,MAAM,UAAU,SAAS,GAAG,WAAW,IAAI,aAAa,OAAO,aAAa;AAC9H,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,MAAM,SAAS,eAAe,OAAO,KAAK,WAAW,OAAO,OAAO,GACjG;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACD,MAAM,cAAc;AAEpB,MAAM,OAAO,MAAM;AAAA,EACjB,CAAC,EAAE,UAAU,UAAU,MAAM,UAAU,OAAO,WAAW,QAAQ,YAAY,SAAS,aAAa,GAAG,MAAM,GAAG,iBAAiB;AAC9H,UAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,GAAG;AAAA,IACL,IAAI;AAAA,MACF;AAAA,QACE,GAAG;AAAA,QACH,SAAS,eAAe,QAAQ;AAAA,QAChC,MAAM,YAAY,QAAQ;AAAA,QAC1B,OAAO,aAAa,QAAQ;AAAA,QAC5B,QAAQ,cAAc,QAAQ;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,eAAe;AAAA,UAC3B,YAAY,UAAU;AAAA,UACtB,YAAY,iBAAiB;AAAA,UAC7B,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,QACA,qBAAmB;AAAA,QACnB,eAAa;AAAA,QACb,aAAW;AAAA,QAEV;AAAA;AAAA,UACA,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAW;AAAA,cACX,SAAS;AAAA,cAET,8BAAC,QAAK,MAAK,KAAI,MAAK,MAAK;AAAA;AAAA,UAC3B,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAEnB,MAAM,YAEF,OAAO,OAAO,OAAO;AAAA,EACvB;AACF,CAAC;",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Slot, Slottable } from '@radix-ui/react-slot'\n\nimport { extractProps } from '../../_internal/helpers/extractProps'\nimport { Icon } from '../icon/Icon'\nimport {\n  pillsPropDefs,\n  pillPropDefs,\n} from './pills.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PillsOwnProps = GetPropDefTypes<typeof pillsPropDefs>\ntype PillOwnProps = GetPropDefTypes<typeof pillPropDefs>\n\ninterface PillsProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'color'>, PillsOwnProps {}\ninterface PillProps extends Omit<React.HTMLAttributes<HTMLLIElement>, 'color'>, PillOwnProps {\n  onRemove?: () => void\n}\n\ninterface PillsContextValue {\n  size?: PillOwnProps['size']\n  variant?: PillOwnProps['variant']\n  color?: PillOwnProps['color']\n  radius?: PillOwnProps['radius']\n}\n\nconst PillsContext = React.createContext<PillsContextValue>({})\n\n// Root variant vocabulary (solid/soft/outline) mapped onto the item vocabulary\n// so the root prop cascades instead of writing a data attribute no CSS reads.\nconst rootVariantMap = {\n  solid: 'default',\n  soft: 'soft',\n  outline: 'outline',\n} as const\n\nconst Pills = React.forwardRef<HTMLUListElement, PillsProps>(({ children, ...props }, forwardedRef) => {\n  const { asChild, className, color, radius, size = 'md', variant = 'solid', ...pillsProps } = extractProps(props, pillsPropDefs)\n  const Comp = asChild ? Slot : 'ul'\n\n  return (\n    <PillsContext.Provider value={{ size, variant: rootVariantMap[variant] ?? 'default', color, radius }}>\n      <Comp\n        {...pillsProps}\n        ref={forwardedRef}\n        className={classNames('dsx-pills', className)}\n        data-accent-color={color}\n        data-radius={radius}\n        data-size={size}\n        data-variant={variant}\n      >\n        {children}\n      </Comp>\n    </PillsContext.Provider>\n  )\n})\nPills.displayName = 'Pills'\n\nconst Pill = React.forwardRef<HTMLLIElement, PillProps>(\n  ({ children, onRemove, size: sizeProp, color: colorProp, radius: radiusProp, variant: variantProp, ...props }, forwardedRef) => {\n    const context = React.useContext(PillsContext)\n    const {\n      asChild,\n      className,\n      variant = 'default',\n      size = 'md',\n      color,\n      radius,\n      tone,\n      removable = false,\n      ...pillProps\n    } = extractProps(\n      {\n        ...props,\n        variant: variantProp ?? context.variant,\n        size: sizeProp ?? context.size,\n        color: colorProp ?? context.color,\n        radius: radiusProp ?? context.radius,\n      },\n      pillPropDefs,\n    )\n    const Comp = asChild ? Slot : 'li'\n\n    return (\n      <Comp\n        {...pillProps}\n        ref={forwardedRef}\n        className={classNames(\n          'dsx-pill',\n          variant === 'default' && 'dsx-pill--default',\n          variant === 'secondary' && 'dsx-pill--secondary',\n          variant === 'soft' && 'dsx-pill--soft',\n          variant === 'destructive' && 'dsx-pill--destructive',\n          variant === 'outline' && 'dsx-pill--outline',\n          variant === 'ghost' && 'dsx-pill--ghost',\n          variant === 'link' && 'dsx-pill--link',\n          size === 'sm' && 'dsx-pill--sm',\n          size === 'md' && 'dsx-pill--md',\n          size === 'lg' && 'dsx-pill--lg',\n          className,\n        )}\n        data-accent-color={color}\n        data-radius={radius}\n        data-tone={tone}\n      >\n        {asChild ? <Slottable>{children}</Slottable> : children}\n        {removable ? (\n          <button\n            type=\"button\"\n            className=\"dsx-pill__remove\"\n            aria-label=\"Remove\"\n            onClick={onRemove}\n          >\n            <Icon name=\"x\" size=\"sm\" />\n          </button>\n        ) : null}\n      </Comp>\n    )\n  },\n)\nPill.displayName = 'Pill'\n\nconst PillsRoot: typeof Pills & {\n  Pill: typeof Pill\n} = Object.assign(Pills, {\n  Pill,\n})\n\nexport {\n  PillsRoot as Pills,\n  Pill,\n}\nexport type {\n  PillsProps,\n  PillProps,\n}\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,MAAM,iBAAiB;AAEhC,SAAS,oBAAoB;AAC7B,SAAS,YAAY;AACrB;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAmCD,cA0CA,YA1CA;AAhBN,MAAM,eAAe,MAAM,cAAiC,CAAC,CAAC;AAI9D,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AACX;AAEA,MAAM,QAAQ,MAAM,WAAyC,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,iBAAiB;AACrG,QAAM,EAAE,SAAS,WAAW,OAAO,QAAQ,OAAO,MAAM,UAAU,SAAS,GAAG,WAAW,IAAI,aAAa,OAAO,aAAa;AAC9H,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE,oBAAC,aAAa,UAAb,EAAsB,OAAO,EAAE,MAAM,SAAS,eAAe,OAAO,KAAK,WAAW,OAAO,OAAO,GACjG;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,aAAa,SAAS;AAAA,MAC5C,qBAAmB;AAAA,MACnB,eAAa;AAAA,MACb,aAAW;AAAA,MACX,gBAAc;AAAA,MAEb;AAAA;AAAA,EACH,GACF;AAEJ,CAAC;AACD,MAAM,cAAc;AAEpB,MAAM,OAAO,MAAM;AAAA,EACjB,CAAC,EAAE,UAAU,UAAU,MAAM,UAAU,OAAO,WAAW,QAAQ,YAAY,SAAS,aAAa,GAAG,MAAM,GAAG,iBAAiB;AAC9H,UAAM,UAAU,MAAM,WAAW,YAAY;AAC7C,UAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY;AAAA,MACZ,GAAG;AAAA,IACL,IAAI;AAAA,MACF;AAAA,QACE,GAAG;AAAA,QACH,SAAS,eAAe,QAAQ;AAAA,QAChC,MAAM,YAAY,QAAQ;AAAA,QAC1B,OAAO,aAAa,QAAQ;AAAA,QAC5B,QAAQ,cAAc,QAAQ;AAAA,MAChC;AAAA,MACA;AAAA,IACF;AACA,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK;AAAA,QACL,WAAW;AAAA,UACT;AAAA,UACA,YAAY,aAAa;AAAA,UACzB,YAAY,eAAe;AAAA,UAC3B,YAAY,UAAU;AAAA,UACtB,YAAY,iBAAiB;AAAA,UAC7B,YAAY,aAAa;AAAA,UACzB,YAAY,WAAW;AAAA,UACvB,YAAY,UAAU;AAAA,UACtB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB,SAAS,QAAQ;AAAA,UACjB;AAAA,QACF;AAAA,QACA,qBAAmB;AAAA,QACnB,eAAa;AAAA,QACb,aAAW;AAAA,QAEV;AAAA,oBAAU,oBAAC,aAAW,UAAS,IAAe;AAAA,UAC9C,YACC;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,WAAU;AAAA,cACV,cAAW;AAAA,cACX,SAAS;AAAA,cAET,8BAAC,QAAK,MAAK,KAAI,MAAK,MAAK;AAAA;AAAA,UAC3B,IACE;AAAA;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,KAAK,cAAc;AAEnB,MAAM,YAEF,OAAO,OAAO,OAAO;AAAA,EACvB;AACF,CAAC;",
   "names": []
 }

package/dist/components/pills.css

@@ -12,6 +12,9 @@
 
 .dsx-pill {
   display: inline-flex;
+  min-width: 0;
+  max-width: 100%;
+  overflow-wrap: anywhere;
   align-items: center;
   gap: var(--dsx-space-xs);
   cursor: default;
@@ -150,6 +153,9 @@
 
 .dsx-pill__remove {
   display: inline-flex;
+  flex: none;
+  min-width: max(var(--dsx-size-md), calc(var(--dsx-size-md) / var(--dsx-density-scale, 1)));
+  min-height: max(var(--dsx-size-md), calc(var(--dsx-size-md) / var(--dsx-density-scale, 1)));
   align-items: center;
   justify-content: center;
   padding: 0;

package/dist/components/popover.css

@@ -6,6 +6,8 @@
      above that owning surface; otherwise the portal paints behind the control that opened it. */
   z-index: calc(var(--dsx-z-index-modal, 90) + 1);
   gap: var(--dsx-space-md);
+  grid-template-columns: minmax(0, 1fr);
+  overflow-wrap: anywhere;
   min-width: var(--dsx-popover-min-width);
   max-width: min(var(--dsx-popover-max-width), calc(100vw - var(--dsx-dialog-viewport-gap)));
   padding: var(--dsx-space-md);
@@ -43,12 +45,49 @@
 }
 
 .dsx-popover__close {
-  position: absolute;
-  top: var(--dsx-space-md);
-  right: var(--dsx-space-md);
-  width: var(--dsx-size-lg);
-  height: var(--dsx-size-lg);
-  border-radius: var(--dsx-rounded-full);
+  min-width: var(--dsx-size-md);
+  min-height: var(--dsx-size-md);
+}
+
+/* Close may compose a public Button. Restore its rest palette after the
+   shared overlay close reset; Button's state selectors retain precedence. */
+.dsx-popover__close:where(.dsx-button) {
+  border-width: var(--dsx-border-width-sm);
+  border-style: solid;
+  border-color: transparent;
+}
+
+.dsx-popover__close:where(.dsx-button[data-variant='primary']) {
+  background: var(--dsx-color-accent-track);
+  border-color: var(--dsx-color-accent-track);
+  color: var(--dsx-color-accent-contrast);
+}
+
+.dsx-popover__close:where(.dsx-button[data-variant='secondary']) {
+  background: var(--dsx-color-secondary);
+  border-color: var(--dsx-color-secondary);
+  color: var(--dsx-color-on-secondary);
+}
+
+:where([data-dsx-theme='dark']) .dsx-popover__close:where(.dsx-button[data-variant='secondary']) {
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-popover__close:where(.dsx-button[data-variant='outline']) {
+  background: transparent;
+  border-color: var(--dsx-color-outline-variant);
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-popover__close:where(.dsx-button[data-variant='ghost']) {
+  background: transparent;
+  color: var(--dsx-color-on-surface);
+}
+
+.dsx-popover__close:where(.dsx-button[data-variant='destructive']) {
+  background: var(--dsx-color-error);
+  border-color: var(--dsx-color-error);
+  color: var(--dsx-color-on-error);
 }
 
 .dsx-popover-show-arrow {

package/dist/components/prose.css

@@ -4,9 +4,9 @@
 .dsx-prose h1, .dsx-prose h2, .dsx-prose h3, .dsx-prose h4 { margin-block: var(--dsx-space-xl) var(--dsx-space-sm); font-family: var(--dsx-typography-headline-large-font-family); line-height: var(--dsx-typography-headline-large-line-height); }
 .dsx-prose p, .dsx-prose ul, .dsx-prose ol, .dsx-prose blockquote, .dsx-prose pre, .dsx-prose figure, .dsx-prose table { margin-block: var(--dsx-space-md); }
 .dsx-prose a { color: var(--dsx-color-accent-indicator); text-underline-offset: var(--dsx-space-xs); }
-.dsx-prose blockquote { margin-inline: 0; padding-inline-start: var(--dsx-space-md); border-inline-start: var(--dsx-border-width-md) solid var(--dsx-color-accent-indicator); color: var(--dsx-color-on-surface-variant); }
-.dsx-prose code { padding: 0 var(--dsx-space-xs); border-radius: var(--dsx-rounded-sm); background: var(--dsx-color-surface-sunken); }
-.dsx-prose pre { overflow-x: auto; padding: var(--dsx-space-md); border-radius: var(--dsx-rounded-md); background: var(--dsx-color-surface-sunken); }
+.dsx-prose blockquote { margin-inline: 0; padding-inline-start: var(--dsx-space-md); border-inline-start: var(--dsx-boundary-divider-width) solid var(--dsx-color-accent-border); color: var(--dsx-color-on-surface-variant); }
+.dsx-prose code { padding: 0 var(--dsx-space-xs); border-radius: var(--dsx-rounded-sm); background: var(--dsx-code-soft-background); }
+.dsx-prose pre { overflow-x: auto; padding: var(--dsx-space-md); border-radius: var(--dsx-rounded-md); background: var(--dsx-code-soft-background); }
 .dsx-prose pre code { padding: 0; background: transparent; }
 .dsx-prose img { display: block; max-width: 100%; height: auto; border-radius: var(--dsx-rounded-md); }
 .dsx-prose figcaption { margin-block-start: var(--dsx-space-sm); color: var(--dsx-color-on-surface-variant); font-family: var(--dsx-typography-label-medium-font-family); font-size: var(--dsx-typography-label-medium-font-size); line-height: var(--dsx-typography-label-medium-line-height); text-align: center; }

package/dist/components/qr-code.css

@@ -2,6 +2,7 @@
 
 .dsx-qr-code {
   display: inline-flex;
+  flex-shrink: 0;
   align-items: center;
   justify-content: center;
   padding: var(--dsx-space-md);
@@ -13,6 +14,8 @@
 .dsx-qr-code svg,
 .dsx-qr-code:where(.dsx-qr-code-size-sm, .dsx-qr-code-size-md, .dsx-qr-code-size-lg) svg {
   display: block;
+  flex-shrink: 0;
+  max-width: none;
   border-radius: var(--dsx-rounded-sm);
 }
 
@@ -26,10 +29,10 @@
   border-color: var(--dsx-color-high-contrast-border);
 }
 
-.dsx-qr-code[data-high-contrast='true'] svg rect[fill] {
+.dsx-qr-code[data-high-contrast='true'] :where(svg > path:last-of-type) {
   fill: var(--dsx-color-high-contrast);
 }
 
-.dsx-qr-code[data-high-contrast='true'] svg rect[fill]:first-of-type {
+.dsx-qr-code[data-high-contrast='true'] :where(svg > path:first-of-type) {
   fill: var(--dsx-color-surface-raised);
 }