@d4gger/design-system 3.0.1 → 4.0.1

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  /** Largest count the badge draws; above it the badge reads `{max}+`. Default 99. The accessible name keeps the real count. */\n  max?: number\n}\n\nconst DEFAULT_BADGE_MAX = 99\n\n// A cap that is not a positive whole number falls back to the default, so a bad prop never prints \"NaN+\" or \"0+\".\nfunction resolveBadgeMax(max: number | undefined): number {\n  return max !== undefined && Number.isInteger(max) && max > 0 ? max : DEFAULT_BADGE_MAX\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, max, className, ...props }, forwardedRef) => {\n    const { asChild, ...triggerProps } = extractProps(props, notificationCenterTriggerPropDefs)\n    const cap = resolveBadgeMax(max)\n    const badge = unreadCount && unreadCount > 0 ? (\n      <Badge variant=\"primary\" size=\"sm\" className=\"dsx-notification-center__badge\" aria-hidden=\"true\">\n        {unreadCount > cap ? `${cap}+` : 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/page-header.css

@@ -10,6 +10,27 @@
   flex-shrink: 0;
 }
 
+/* variant="floating": a glass bar that sits inside the page with its own edge, the header of the
+   floating shells (direction C). Same glass recipe as `Card variant="glass"`, except the outer shadow.
+   The page decides whether it sticks. Prefixed backdrop-filter first, standard last (see baseCard.css).
+
+   The shadow falls below the bar only (offset = -spread, so it starts at the bar's bottom edge). The bar sits
+   flush at the edge of a scroll container (`Sidebar.Inset`, overflow: auto), which clips anything painted past
+   its left, right and top edges: a full-ring shadow ended in a vertical cut at the bar's side, visible in the
+   light theme (G-21). Offset, blur and the strong card shadow colour are the existing tokens; at the bar's edge
+   this reads as the old shadow does (measured in the batch's verification.md). */
+.dsx-page-header:where([data-variant='floating']) {
+  border: var(--dsx-border-width-sm) solid var(--dsx-effect-panel-glass-border);
+  border-radius: var(--dsx-rounded-lg);
+  background: var(--dsx-color-panel-translucent);
+  box-shadow:
+    inset 0 1px 0 0 var(--dsx-effect-panel-glass-rim-highlight),
+    inset 0 0 0 1px var(--dsx-effect-panel-glass-rim),
+    0 var(--dsx-shadow-offset-lg) var(--dsx-shadow-blur-md) calc(-1 * var(--dsx-shadow-offset-lg)) var(--dsx-effect-shadow-card-strong);
+  -webkit-backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+  backdrop-filter: var(--dsx-effect-panel-glass-backdrop-filter);
+}
+
 .dsx-page-header__title {
   margin: 0;
   font-family: var(--dsx-typography-headline-medium-font-family);

package/dist/components/pageHeader/PageHeader.cjs

@@ -41,9 +41,17 @@ var import_extractProps = require("../../_internal/helpers/extractProps");
 var import_pageHeader = require("./pageHeader.props");
 var import_jsx_runtime = require("react/jsx-runtime");
 const PageHeaderRoot = React.forwardRef((props, forwardedRef) => {
-  const { asChild, className, ...headerProps } = (0, import_extractProps.extractProps)(props, import_pageHeader.pageHeaderPropDefs);
+  const { asChild, className, variant = "default", ...headerProps } = (0, import_extractProps.extractProps)(props, import_pageHeader.pageHeaderPropDefs);
   const Comp = asChild ? import_react_slot.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Comp, { ...headerProps, ref: forwardedRef, className: (0, import_classnames.default)("dsx-page-header", className) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Comp,
+    {
+      ...headerProps,
+      ref: forwardedRef,
+      className: (0, import_classnames.default)("dsx-page-header", className),
+      "data-variant": variant
+    }
+  );
 });
 PageHeaderRoot.displayName = "PageHeader";
 const PageHeaderTitle = React.forwardRef((props, forwardedRef) => {

package/dist/components/pageHeader/PageHeader.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/pageHeader/PageHeader.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 { pageHeaderActionsPropDefs, pageHeaderPropDefs, pageHeaderTitlePropDefs } from './pageHeader.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PageHeaderElement = React.ComponentRef<'div'>\ntype PageHeaderOwnProps = GetPropDefTypes<typeof pageHeaderPropDefs>\n\ninterface PageHeaderProps extends React.ComponentPropsWithoutRef<'div'>, PageHeaderOwnProps {}\n\nconst PageHeaderRoot = React.forwardRef<PageHeaderElement, PageHeaderProps>((props, forwardedRef) => {\n  const { asChild, className, ...headerProps } = extractProps(props, pageHeaderPropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  return <Comp {...headerProps} ref={forwardedRef} className={classNames('dsx-page-header', className)} />\n})\nPageHeaderRoot.displayName = 'PageHeader'\n\ntype PageHeaderTitleElement = React.ComponentRef<'h1'>\ntype PageHeaderTitleOwnProps = GetPropDefTypes<typeof pageHeaderTitlePropDefs>\n\ninterface PageHeaderTitleProps extends React.ComponentPropsWithoutRef<'h1'>, PageHeaderTitleOwnProps {}\n\nconst PageHeaderTitle = React.forwardRef<PageHeaderTitleElement, PageHeaderTitleProps>((props, forwardedRef) => {\n  const { asChild, className, ...titleProps } = extractProps(props, pageHeaderTitlePropDefs)\n  const Comp = asChild ? Slot : 'h1'\n\n  return <Comp {...titleProps} ref={forwardedRef} className={classNames('dsx-page-header__title', className)} />\n})\nPageHeaderTitle.displayName = 'PageHeaderTitle'\n\ntype PageHeaderActionsElement = React.ComponentRef<'div'>\ntype PageHeaderActionsOwnProps = GetPropDefTypes<typeof pageHeaderActionsPropDefs>\n\ninterface PageHeaderActionsProps extends React.ComponentPropsWithoutRef<'div'>, PageHeaderActionsOwnProps {}\n\nconst PageHeaderActions = React.forwardRef<PageHeaderActionsElement, PageHeaderActionsProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...actionsProps } = extractProps(props, pageHeaderActionsPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...actionsProps} ref={forwardedRef} className={classNames('dsx-page-header__actions', className)} />\n    )\n  },\n)\nPageHeaderActions.displayName = 'PageHeaderActions'\n\nconst PageHeader: typeof PageHeaderRoot & {\n  Actions: typeof PageHeaderActions\n  Title: typeof PageHeaderTitle\n} = Object.assign(PageHeaderRoot, {\n  Actions: PageHeaderActions,\n  Title: PageHeaderTitle,\n})\n\nexport { PageHeader, PageHeaderActions, PageHeaderRoot, PageHeaderTitle }\nexport type { PageHeaderActionsProps, PageHeaderProps, PageHeaderTitleProps }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AAErB,0BAA6B;AAC7B,wBAAuF;AAa9E;AAJT,MAAM,iBAAiB,MAAM,WAA+C,CAAC,OAAO,iBAAiB;AACnG,QAAM,EAAE,SAAS,WAAW,GAAG,YAAY,QAAI,kCAAa,OAAO,oCAAkB;AACrF,QAAM,OAAO,UAAU,yBAAO;AAE9B,SAAO,4CAAC,QAAM,GAAG,aAAa,KAAK,cAAc,eAAW,kBAAAA,SAAW,mBAAmB,SAAS,GAAG;AACxG,CAAC;AACD,eAAe,cAAc;AAO7B,MAAM,kBAAkB,MAAM,WAAyD,CAAC,OAAO,iBAAiB;AAC9G,QAAM,EAAE,SAAS,WAAW,GAAG,WAAW,QAAI,kCAAa,OAAO,yCAAuB;AACzF,QAAM,OAAO,UAAU,yBAAO;AAE9B,SAAO,4CAAC,QAAM,GAAG,YAAY,KAAK,cAAc,eAAW,kBAAAA,SAAW,0BAA0B,SAAS,GAAG;AAC9G,CAAC;AACD,gBAAgB,cAAc;AAO9B,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,QAAI,kCAAa,OAAO,2CAAyB;AAC7F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,QAAM,GAAG,cAAc,KAAK,cAAc,eAAW,kBAAAA,SAAW,4BAA4B,SAAS,GAAG;AAAA,EAE7G;AACF;AACA,kBAAkB,cAAc;AAEhC,MAAM,aAGF,OAAO,OAAO,gBAAgB;AAAA,EAChC,SAAS;AAAA,EACT,OAAO;AACT,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 { pageHeaderActionsPropDefs, pageHeaderPropDefs, pageHeaderTitlePropDefs } from './pageHeader.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PageHeaderElement = React.ComponentRef<'div'>\ntype PageHeaderOwnProps = GetPropDefTypes<typeof pageHeaderPropDefs>\n\ninterface PageHeaderProps extends React.ComponentPropsWithoutRef<'div'>, PageHeaderOwnProps {}\n\nconst PageHeaderRoot = React.forwardRef<PageHeaderElement, PageHeaderProps>((props, forwardedRef) => {\n  const { asChild, className, variant = 'default', ...headerProps } = extractProps(props, pageHeaderPropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      {...headerProps}\n      ref={forwardedRef}\n      className={classNames('dsx-page-header', className)}\n      data-variant={variant}\n    />\n  )\n})\nPageHeaderRoot.displayName = 'PageHeader'\n\ntype PageHeaderTitleElement = React.ComponentRef<'h1'>\ntype PageHeaderTitleOwnProps = GetPropDefTypes<typeof pageHeaderTitlePropDefs>\n\ninterface PageHeaderTitleProps extends React.ComponentPropsWithoutRef<'h1'>, PageHeaderTitleOwnProps {}\n\nconst PageHeaderTitle = React.forwardRef<PageHeaderTitleElement, PageHeaderTitleProps>((props, forwardedRef) => {\n  const { asChild, className, ...titleProps } = extractProps(props, pageHeaderTitlePropDefs)\n  const Comp = asChild ? Slot : 'h1'\n\n  return <Comp {...titleProps} ref={forwardedRef} className={classNames('dsx-page-header__title', className)} />\n})\nPageHeaderTitle.displayName = 'PageHeaderTitle'\n\ntype PageHeaderActionsElement = React.ComponentRef<'div'>\ntype PageHeaderActionsOwnProps = GetPropDefTypes<typeof pageHeaderActionsPropDefs>\n\ninterface PageHeaderActionsProps extends React.ComponentPropsWithoutRef<'div'>, PageHeaderActionsOwnProps {}\n\nconst PageHeaderActions = React.forwardRef<PageHeaderActionsElement, PageHeaderActionsProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...actionsProps } = extractProps(props, pageHeaderActionsPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...actionsProps} ref={forwardedRef} className={classNames('dsx-page-header__actions', className)} />\n    )\n  },\n)\nPageHeaderActions.displayName = 'PageHeaderActions'\n\nconst PageHeader: typeof PageHeaderRoot & {\n  Actions: typeof PageHeaderActions\n  Title: typeof PageHeaderTitle\n} = Object.assign(PageHeaderRoot, {\n  Actions: PageHeaderActions,\n  Title: PageHeaderTitle,\n})\n\nexport { PageHeader, PageHeaderActions, PageHeaderRoot, PageHeaderTitle }\nexport type { PageHeaderActionsProps, PageHeaderProps, PageHeaderTitleProps }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,wBAAuB;AACvB,wBAAqB;AAErB,0BAA6B;AAC7B,wBAAuF;AAcnF;AALJ,MAAM,iBAAiB,MAAM,WAA+C,CAAC,OAAO,iBAAiB;AACnG,QAAM,EAAE,SAAS,WAAW,UAAU,WAAW,GAAG,YAAY,QAAI,kCAAa,OAAO,oCAAkB;AAC1G,QAAM,OAAO,UAAU,yBAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,eAAW,kBAAAA,SAAW,mBAAmB,SAAS;AAAA,MAClD,gBAAc;AAAA;AAAA,EAChB;AAEJ,CAAC;AACD,eAAe,cAAc;AAO7B,MAAM,kBAAkB,MAAM,WAAyD,CAAC,OAAO,iBAAiB;AAC9G,QAAM,EAAE,SAAS,WAAW,GAAG,WAAW,QAAI,kCAAa,OAAO,yCAAuB;AACzF,QAAM,OAAO,UAAU,yBAAO;AAE9B,SAAO,4CAAC,QAAM,GAAG,YAAY,KAAK,cAAc,eAAW,kBAAAA,SAAW,0BAA0B,SAAS,GAAG;AAC9G,CAAC;AACD,gBAAgB,cAAc;AAO9B,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,QAAI,kCAAa,OAAO,2CAAyB;AAC7F,UAAM,OAAO,UAAU,yBAAO;AAE9B,WACE,4CAAC,QAAM,GAAG,cAAc,KAAK,cAAc,eAAW,kBAAAA,SAAW,4BAA4B,SAAS,GAAG;AAAA,EAE7G;AACF;AACA,kBAAkB,cAAc;AAEhC,MAAM,aAGF,OAAO,OAAO,gBAAgB;AAAA,EAChC,SAAS;AAAA,EACT,OAAO;AACT,CAAC;",
   "names": ["classNames"]
 }

package/dist/components/pageHeader/PageHeader.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.cts","sourceRoot":"","sources":["../../../src/components/pageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAE3G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,kBAAkB;CAAG;AAE9F,QAAA,MAAM,cAAc,wFAKlB,CAAA;AAIF,KAAK,uBAAuB,GAAG,eAAe,CAAC,OAAO,uBAAuB,CAAC,CAAA;AAE9E,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,uBAAuB;CAAG;AAEvG,QAAA,MAAM,eAAe,iGAKnB,CAAA;AAIF,KAAK,yBAAyB,GAAG,eAAe,CAAC,OAAO,yBAAyB,CAAC,CAAA;AAElF,UAAU,sBAAuB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,yBAAyB;CAAG;AAE5G,QAAA,MAAM,iBAAiB,+FAStB,CAAA;AAGD,QAAA,MAAM,UAAU,EAAE,OAAO,cAAc,GAAG;IACxC,OAAO,EAAE,OAAO,iBAAiB,CAAA;IACjC,KAAK,EAAE,OAAO,eAAe,CAAA;CAI7B,CAAA;AAEF,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA;AACzE,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAA"}
+{"version":3,"file":"PageHeader.d.cts","sourceRoot":"","sources":["../../../src/components/pageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAE3G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,kBAAkB;CAAG;AAE9F,QAAA,MAAM,cAAc,wFAYlB,CAAA;AAIF,KAAK,uBAAuB,GAAG,eAAe,CAAC,OAAO,uBAAuB,CAAC,CAAA;AAE9E,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,uBAAuB;CAAG;AAEvG,QAAA,MAAM,eAAe,iGAKnB,CAAA;AAIF,KAAK,yBAAyB,GAAG,eAAe,CAAC,OAAO,yBAAyB,CAAC,CAAA;AAElF,UAAU,sBAAuB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,yBAAyB;CAAG;AAE5G,QAAA,MAAM,iBAAiB,+FAStB,CAAA;AAGD,QAAA,MAAM,UAAU,EAAE,OAAO,cAAc,GAAG;IACxC,OAAO,EAAE,OAAO,iBAAiB,CAAA;IACjC,KAAK,EAAE,OAAO,eAAe,CAAA;CAI7B,CAAA;AAEF,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA;AACzE,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/components/pageHeader/PageHeader.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.mts","sourceRoot":"","sources":["../../../src/components/pageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAE3G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,kBAAkB;CAAG;AAE9F,QAAA,MAAM,cAAc,wFAKlB,CAAA;AAIF,KAAK,uBAAuB,GAAG,eAAe,CAAC,OAAO,uBAAuB,CAAC,CAAA;AAE9E,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,uBAAuB;CAAG;AAEvG,QAAA,MAAM,eAAe,iGAKnB,CAAA;AAIF,KAAK,yBAAyB,GAAG,eAAe,CAAC,OAAO,yBAAyB,CAAC,CAAA;AAElF,UAAU,sBAAuB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,yBAAyB;CAAG;AAE5G,QAAA,MAAM,iBAAiB,+FAStB,CAAA;AAGD,QAAA,MAAM,UAAU,EAAE,OAAO,cAAc,GAAG;IACxC,OAAO,EAAE,OAAO,iBAAiB,CAAA;IACjC,KAAK,EAAE,OAAO,eAAe,CAAA;CAI7B,CAAA;AAEF,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA;AACzE,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAA"}
+{"version":3,"file":"PageHeader.d.mts","sourceRoot":"","sources":["../../../src/components/pageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAE3G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,kBAAkB;CAAG;AAE9F,QAAA,MAAM,cAAc,wFAYlB,CAAA;AAIF,KAAK,uBAAuB,GAAG,eAAe,CAAC,OAAO,uBAAuB,CAAC,CAAA;AAE9E,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,uBAAuB;CAAG;AAEvG,QAAA,MAAM,eAAe,iGAKnB,CAAA;AAIF,KAAK,yBAAyB,GAAG,eAAe,CAAC,OAAO,yBAAyB,CAAC,CAAA;AAElF,UAAU,sBAAuB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,yBAAyB;CAAG;AAE5G,QAAA,MAAM,iBAAiB,+FAStB,CAAA;AAGD,QAAA,MAAM,UAAU,EAAE,OAAO,cAAc,GAAG;IACxC,OAAO,EAAE,OAAO,iBAAiB,CAAA;IACjC,KAAK,EAAE,OAAO,eAAe,CAAA;CAI7B,CAAA;AAEF,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA;AACzE,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/components/pageHeader/PageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/pageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAE3G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,kBAAkB;CAAG;AAE9F,QAAA,MAAM,cAAc,wFAKlB,CAAA;AAIF,KAAK,uBAAuB,GAAG,eAAe,CAAC,OAAO,uBAAuB,CAAC,CAAA;AAE9E,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,uBAAuB;CAAG;AAEvG,QAAA,MAAM,eAAe,iGAKnB,CAAA;AAIF,KAAK,yBAAyB,GAAG,eAAe,CAAC,OAAO,yBAAyB,CAAC,CAAA;AAElF,UAAU,sBAAuB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,yBAAyB;CAAG;AAE5G,QAAA,MAAM,iBAAiB,+FAStB,CAAA;AAGD,QAAA,MAAM,UAAU,EAAE,OAAO,cAAc,GAAG;IACxC,OAAO,EAAE,OAAO,iBAAiB,CAAA;IACjC,KAAK,EAAE,OAAO,eAAe,CAAA;CAI7B,CAAA;AAEF,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA;AACzE,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAA"}
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/pageHeader/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAA;AAE3G,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAA;AAGpE,KAAK,kBAAkB,GAAG,eAAe,CAAC,OAAO,kBAAkB,CAAC,CAAA;AAEpE,UAAU,eAAgB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,kBAAkB;CAAG;AAE9F,QAAA,MAAM,cAAc,wFAYlB,CAAA;AAIF,KAAK,uBAAuB,GAAG,eAAe,CAAC,OAAO,uBAAuB,CAAC,CAAA;AAE9E,UAAU,oBAAqB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,EAAE,uBAAuB;CAAG;AAEvG,QAAA,MAAM,eAAe,iGAKnB,CAAA;AAIF,KAAK,yBAAyB,GAAG,eAAe,CAAC,OAAO,yBAAyB,CAAC,CAAA;AAElF,UAAU,sBAAuB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,yBAAyB;CAAG;AAE5G,QAAA,MAAM,iBAAiB,+FAStB,CAAA;AAGD,QAAA,MAAM,UAAU,EAAE,OAAO,cAAc,GAAG;IACxC,OAAO,EAAE,OAAO,iBAAiB,CAAA;IACjC,KAAK,EAAE,OAAO,eAAe,CAAA;CAI7B,CAAA;AAEF,OAAO,EAAE,UAAU,EAAE,iBAAiB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA;AACzE,YAAY,EAAE,sBAAsB,EAAE,eAAe,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/components/pageHeader/PageHeader.js

@@ -5,9 +5,17 @@ import { extractProps } from "../../_internal/helpers/extractProps.js";
 import { pageHeaderActionsPropDefs, pageHeaderPropDefs, pageHeaderTitlePropDefs } from "./pageHeader.props.js";
 import { jsx } from "react/jsx-runtime";
 const PageHeaderRoot = React.forwardRef((props, forwardedRef) => {
-  const { asChild, className, ...headerProps } = extractProps(props, pageHeaderPropDefs);
+  const { asChild, className, variant = "default", ...headerProps } = extractProps(props, pageHeaderPropDefs);
   const Comp = asChild ? Slot : "div";
-  return /* @__PURE__ */ jsx(Comp, { ...headerProps, ref: forwardedRef, className: classNames("dsx-page-header", className) });
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ...headerProps,
+      ref: forwardedRef,
+      className: classNames("dsx-page-header", className),
+      "data-variant": variant
+    }
+  );
 });
 PageHeaderRoot.displayName = "PageHeader";
 const PageHeaderTitle = React.forwardRef((props, forwardedRef) => {

package/dist/components/pageHeader/PageHeader.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/pageHeader/PageHeader.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 { pageHeaderActionsPropDefs, pageHeaderPropDefs, pageHeaderTitlePropDefs } from './pageHeader.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PageHeaderElement = React.ComponentRef<'div'>\ntype PageHeaderOwnProps = GetPropDefTypes<typeof pageHeaderPropDefs>\n\ninterface PageHeaderProps extends React.ComponentPropsWithoutRef<'div'>, PageHeaderOwnProps {}\n\nconst PageHeaderRoot = React.forwardRef<PageHeaderElement, PageHeaderProps>((props, forwardedRef) => {\n  const { asChild, className, ...headerProps } = extractProps(props, pageHeaderPropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  return <Comp {...headerProps} ref={forwardedRef} className={classNames('dsx-page-header', className)} />\n})\nPageHeaderRoot.displayName = 'PageHeader'\n\ntype PageHeaderTitleElement = React.ComponentRef<'h1'>\ntype PageHeaderTitleOwnProps = GetPropDefTypes<typeof pageHeaderTitlePropDefs>\n\ninterface PageHeaderTitleProps extends React.ComponentPropsWithoutRef<'h1'>, PageHeaderTitleOwnProps {}\n\nconst PageHeaderTitle = React.forwardRef<PageHeaderTitleElement, PageHeaderTitleProps>((props, forwardedRef) => {\n  const { asChild, className, ...titleProps } = extractProps(props, pageHeaderTitlePropDefs)\n  const Comp = asChild ? Slot : 'h1'\n\n  return <Comp {...titleProps} ref={forwardedRef} className={classNames('dsx-page-header__title', className)} />\n})\nPageHeaderTitle.displayName = 'PageHeaderTitle'\n\ntype PageHeaderActionsElement = React.ComponentRef<'div'>\ntype PageHeaderActionsOwnProps = GetPropDefTypes<typeof pageHeaderActionsPropDefs>\n\ninterface PageHeaderActionsProps extends React.ComponentPropsWithoutRef<'div'>, PageHeaderActionsOwnProps {}\n\nconst PageHeaderActions = React.forwardRef<PageHeaderActionsElement, PageHeaderActionsProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...actionsProps } = extractProps(props, pageHeaderActionsPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...actionsProps} ref={forwardedRef} className={classNames('dsx-page-header__actions', className)} />\n    )\n  },\n)\nPageHeaderActions.displayName = 'PageHeaderActions'\n\nconst PageHeader: typeof PageHeaderRoot & {\n  Actions: typeof PageHeaderActions\n  Title: typeof PageHeaderTitle\n} = Object.assign(PageHeaderRoot, {\n  Actions: PageHeaderActions,\n  Title: PageHeaderTitle,\n})\n\nexport { PageHeader, PageHeaderActions, PageHeaderRoot, PageHeaderTitle }\nexport type { PageHeaderActionsProps, PageHeaderProps, PageHeaderTitleProps }\n"],
-  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AAErB,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B,oBAAoB,+BAA+B;AAa9E;AAJT,MAAM,iBAAiB,MAAM,WAA+C,CAAC,OAAO,iBAAiB;AACnG,QAAM,EAAE,SAAS,WAAW,GAAG,YAAY,IAAI,aAAa,OAAO,kBAAkB;AACrF,QAAM,OAAO,UAAU,OAAO;AAE9B,SAAO,oBAAC,QAAM,GAAG,aAAa,KAAK,cAAc,WAAW,WAAW,mBAAmB,SAAS,GAAG;AACxG,CAAC;AACD,eAAe,cAAc;AAO7B,MAAM,kBAAkB,MAAM,WAAyD,CAAC,OAAO,iBAAiB;AAC9G,QAAM,EAAE,SAAS,WAAW,GAAG,WAAW,IAAI,aAAa,OAAO,uBAAuB;AACzF,QAAM,OAAO,UAAU,OAAO;AAE9B,SAAO,oBAAC,QAAM,GAAG,YAAY,KAAK,cAAc,WAAW,WAAW,0BAA0B,SAAS,GAAG;AAC9G,CAAC;AACD,gBAAgB,cAAc;AAO9B,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,IAAI,aAAa,OAAO,yBAAyB;AAC7F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,QAAM,GAAG,cAAc,KAAK,cAAc,WAAW,WAAW,4BAA4B,SAAS,GAAG;AAAA,EAE7G;AACF;AACA,kBAAkB,cAAc;AAEhC,MAAM,aAGF,OAAO,OAAO,gBAAgB;AAAA,EAChC,SAAS;AAAA,EACT,OAAO;AACT,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 { pageHeaderActionsPropDefs, pageHeaderPropDefs, pageHeaderTitlePropDefs } from './pageHeader.props'\n\nimport type { GetPropDefTypes } from '../../_internal/props/propDef'\n\ntype PageHeaderElement = React.ComponentRef<'div'>\ntype PageHeaderOwnProps = GetPropDefTypes<typeof pageHeaderPropDefs>\n\ninterface PageHeaderProps extends React.ComponentPropsWithoutRef<'div'>, PageHeaderOwnProps {}\n\nconst PageHeaderRoot = React.forwardRef<PageHeaderElement, PageHeaderProps>((props, forwardedRef) => {\n  const { asChild, className, variant = 'default', ...headerProps } = extractProps(props, pageHeaderPropDefs)\n  const Comp = asChild ? Slot : 'div'\n\n  return (\n    <Comp\n      {...headerProps}\n      ref={forwardedRef}\n      className={classNames('dsx-page-header', className)}\n      data-variant={variant}\n    />\n  )\n})\nPageHeaderRoot.displayName = 'PageHeader'\n\ntype PageHeaderTitleElement = React.ComponentRef<'h1'>\ntype PageHeaderTitleOwnProps = GetPropDefTypes<typeof pageHeaderTitlePropDefs>\n\ninterface PageHeaderTitleProps extends React.ComponentPropsWithoutRef<'h1'>, PageHeaderTitleOwnProps {}\n\nconst PageHeaderTitle = React.forwardRef<PageHeaderTitleElement, PageHeaderTitleProps>((props, forwardedRef) => {\n  const { asChild, className, ...titleProps } = extractProps(props, pageHeaderTitlePropDefs)\n  const Comp = asChild ? Slot : 'h1'\n\n  return <Comp {...titleProps} ref={forwardedRef} className={classNames('dsx-page-header__title', className)} />\n})\nPageHeaderTitle.displayName = 'PageHeaderTitle'\n\ntype PageHeaderActionsElement = React.ComponentRef<'div'>\ntype PageHeaderActionsOwnProps = GetPropDefTypes<typeof pageHeaderActionsPropDefs>\n\ninterface PageHeaderActionsProps extends React.ComponentPropsWithoutRef<'div'>, PageHeaderActionsOwnProps {}\n\nconst PageHeaderActions = React.forwardRef<PageHeaderActionsElement, PageHeaderActionsProps>(\n  (props, forwardedRef) => {\n    const { asChild, className, ...actionsProps } = extractProps(props, pageHeaderActionsPropDefs)\n    const Comp = asChild ? Slot : 'div'\n\n    return (\n      <Comp {...actionsProps} ref={forwardedRef} className={classNames('dsx-page-header__actions', className)} />\n    )\n  },\n)\nPageHeaderActions.displayName = 'PageHeaderActions'\n\nconst PageHeader: typeof PageHeaderRoot & {\n  Actions: typeof PageHeaderActions\n  Title: typeof PageHeaderTitle\n} = Object.assign(PageHeaderRoot, {\n  Actions: PageHeaderActions,\n  Title: PageHeaderTitle,\n})\n\nexport { PageHeader, PageHeaderActions, PageHeaderRoot, PageHeaderTitle }\nexport type { PageHeaderActionsProps, PageHeaderProps, PageHeaderTitleProps }\n"],
+  "mappings": "AAAA,YAAY,WAAW;AACvB,OAAO,gBAAgB;AACvB,SAAS,YAAY;AAErB,SAAS,oBAAoB;AAC7B,SAAS,2BAA2B,oBAAoB,+BAA+B;AAcnF;AALJ,MAAM,iBAAiB,MAAM,WAA+C,CAAC,OAAO,iBAAiB;AACnG,QAAM,EAAE,SAAS,WAAW,UAAU,WAAW,GAAG,YAAY,IAAI,aAAa,OAAO,kBAAkB;AAC1G,QAAM,OAAO,UAAU,OAAO;AAE9B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,WAAW,WAAW,mBAAmB,SAAS;AAAA,MAClD,gBAAc;AAAA;AAAA,EAChB;AAEJ,CAAC;AACD,eAAe,cAAc;AAO7B,MAAM,kBAAkB,MAAM,WAAyD,CAAC,OAAO,iBAAiB;AAC9G,QAAM,EAAE,SAAS,WAAW,GAAG,WAAW,IAAI,aAAa,OAAO,uBAAuB;AACzF,QAAM,OAAO,UAAU,OAAO;AAE9B,SAAO,oBAAC,QAAM,GAAG,YAAY,KAAK,cAAc,WAAW,WAAW,0BAA0B,SAAS,GAAG;AAC9G,CAAC;AACD,gBAAgB,cAAc;AAO9B,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,OAAO,iBAAiB;AACvB,UAAM,EAAE,SAAS,WAAW,GAAG,aAAa,IAAI,aAAa,OAAO,yBAAyB;AAC7F,UAAM,OAAO,UAAU,OAAO;AAE9B,WACE,oBAAC,QAAM,GAAG,cAAc,KAAK,cAAc,WAAW,WAAW,4BAA4B,SAAS,GAAG;AAAA,EAE7G;AACF;AACA,kBAAkB,cAAc;AAEhC,MAAM,aAGF,OAAO,OAAO,gBAAgB;AAAA,EAChC,SAAS;AAAA,EACT,OAAO;AACT,CAAC;",
   "names": []
 }

package/dist/components/pageHeader/pageHeader.props.cjs

@@ -24,8 +24,14 @@ __export(pageHeader_props_exports, {
 });
 module.exports = __toCommonJS(pageHeader_props_exports);
 var import_asChild = require("../../_internal/props/asChild.prop");
+const pageHeaderVariants = ["default", "floating"];
 const pageHeaderPropDefs = {
-  ...import_asChild.asChildPropDef
+  ...import_asChild.asChildPropDef,
+  variant: {
+    type: "enum",
+    values: pageHeaderVariants,
+    default: "default"
+  }
 };
 const pageHeaderTitlePropDefs = {
   ...import_asChild.asChildPropDef

package/dist/components/pageHeader/pageHeader.props.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/pageHeader/pageHeader.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst pageHeaderPropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nconst pageHeaderTitlePropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nconst pageHeaderActionsPropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nexport { pageHeaderActionsPropDefs, pageHeaderPropDefs, pageHeaderTitlePropDefs }\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,qBAAqB;AAAA,EACzB,GAAG;AACL;AAIA,MAAM,0BAA0B;AAAA,EAC9B,GAAG;AACL;AAIA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst pageHeaderVariants = ['default', 'floating'] as const\n\nconst pageHeaderPropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: pageHeaderVariants,\n    default: 'default',\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof pageHeaderVariants)[number]>\n}\n\nconst pageHeaderTitlePropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nconst pageHeaderActionsPropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nexport { pageHeaderActionsPropDefs, pageHeaderPropDefs, pageHeaderTitlePropDefs }\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+B;AAI/B,MAAM,qBAAqB,CAAC,WAAW,UAAU;AAEjD,MAAM,qBAAqB;AAAA,EACzB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAKA,MAAM,0BAA0B;AAAA,EAC9B,GAAG;AACL;AAIA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;",
   "names": []
 }

package/dist/components/pageHeader/pageHeader.props.d.cts

@@ -1,4 +1,9 @@
 declare const pageHeaderPropDefs: {
+    variant: {
+        type: "enum";
+        values: readonly ["default", "floating"];
+        default: "default";
+    };
     asChild: {
         type: "boolean";
         default: false;

package/dist/components/pageHeader/pageHeader.props.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"pageHeader.props.d.cts","sourceRoot":"","sources":["../../../src/components/pageHeader/pageHeader.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,kBAAkB;;;;;CAIvB,CAAA;AAED,QAAA,MAAM,uBAAuB;;;;;CAI5B,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;CAI9B,CAAA;AAED,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"pageHeader.props.d.cts","sourceRoot":"","sources":["../../../src/components/pageHeader/pageHeader.props.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,kBAAkB;;;;;;;;;;CAUvB,CAAA;AAED,QAAA,MAAM,uBAAuB;;;;;CAI5B,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;CAI9B,CAAA;AAED,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/pageHeader/pageHeader.props.d.mts

@@ -1,4 +1,9 @@
 declare const pageHeaderPropDefs: {
+    variant: {
+        type: "enum";
+        values: readonly ["default", "floating"];
+        default: "default";
+    };
     asChild: {
         type: "boolean";
         default: false;

package/dist/components/pageHeader/pageHeader.props.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"pageHeader.props.d.mts","sourceRoot":"","sources":["../../../src/components/pageHeader/pageHeader.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,kBAAkB;;;;;CAIvB,CAAA;AAED,QAAA,MAAM,uBAAuB;;;;;CAI5B,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;CAI9B,CAAA;AAED,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"pageHeader.props.d.mts","sourceRoot":"","sources":["../../../src/components/pageHeader/pageHeader.props.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,kBAAkB;;;;;;;;;;CAUvB,CAAA;AAED,QAAA,MAAM,uBAAuB;;;;;CAI5B,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;CAI9B,CAAA;AAED,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/pageHeader/pageHeader.props.d.ts

@@ -1,4 +1,9 @@
 declare const pageHeaderPropDefs: {
+    variant: {
+        type: "enum";
+        values: readonly ["default", "floating"];
+        default: "default";
+    };
     asChild: {
         type: "boolean";
         default: false;

package/dist/components/pageHeader/pageHeader.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pageHeader.props.d.ts","sourceRoot":"","sources":["../../../src/components/pageHeader/pageHeader.props.ts"],"names":[],"mappings":"AAIA,QAAA,MAAM,kBAAkB;;;;;CAIvB,CAAA;AAED,QAAA,MAAM,uBAAuB;;;;;CAI5B,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;CAI9B,CAAA;AAED,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,CAAA"}
+{"version":3,"file":"pageHeader.props.d.ts","sourceRoot":"","sources":["../../../src/components/pageHeader/pageHeader.props.ts"],"names":[],"mappings":"AAMA,QAAA,MAAM,kBAAkB;;;;;;;;;;CAUvB,CAAA;AAED,QAAA,MAAM,uBAAuB;;;;;CAI5B,CAAA;AAED,QAAA,MAAM,yBAAyB;;;;;CAI9B,CAAA;AAED,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,CAAA"}

package/dist/components/pageHeader/pageHeader.props.js

@@ -1,6 +1,12 @@
 import { asChildPropDef } from "../../_internal/props/asChild.prop.js";
+const pageHeaderVariants = ["default", "floating"];
 const pageHeaderPropDefs = {
-  ...asChildPropDef
+  ...asChildPropDef,
+  variant: {
+    type: "enum",
+    values: pageHeaderVariants,
+    default: "default"
+  }
 };
 const pageHeaderTitlePropDefs = {
   ...asChildPropDef

package/dist/components/pageHeader/pageHeader.props.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/pageHeader/pageHeader.props.ts"],
-  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst pageHeaderPropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nconst pageHeaderTitlePropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nconst pageHeaderActionsPropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nexport { pageHeaderActionsPropDefs, pageHeaderPropDefs, pageHeaderTitlePropDefs }\n"],
-  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,qBAAqB;AAAA,EACzB,GAAG;AACL;AAIA,MAAM,0BAA0B;AAAA,EAC9B,GAAG;AACL;AAIA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;",
+  "sourcesContent": ["import { asChildPropDef } from '../../_internal/props/asChild.prop'\n\nimport type { PropDef } from '../../_internal/props/propDef'\n\nconst pageHeaderVariants = ['default', 'floating'] as const\n\nconst pageHeaderPropDefs = {\n  ...asChildPropDef,\n  variant: {\n    type: 'enum',\n    values: pageHeaderVariants,\n    default: 'default',\n  },\n} satisfies {\n  asChild: PropDef\n  variant: PropDef<(typeof pageHeaderVariants)[number]>\n}\n\nconst pageHeaderTitlePropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nconst pageHeaderActionsPropDefs = {\n  ...asChildPropDef,\n} satisfies {\n  asChild: PropDef\n}\n\nexport { pageHeaderActionsPropDefs, pageHeaderPropDefs, pageHeaderTitlePropDefs }\n"],
+  "mappings": "AAAA,SAAS,sBAAsB;AAI/B,MAAM,qBAAqB,CAAC,WAAW,UAAU;AAEjD,MAAM,qBAAqB;AAAA,EACzB,GAAG;AAAA,EACH,SAAS;AAAA,IACP,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAKA,MAAM,0BAA0B;AAAA,EAC9B,GAAG;AACL;AAIA,MAAM,4BAA4B;AAAA,EAChC,GAAG;AACL;",
   "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);
 }

package/dist/components/qrCode/QrCode.cjs

@@ -53,29 +53,32 @@ const QRCode = React.forwardRef((props, forwardedRef) => {
     marginSize = 0,
     fgColor,
     bgColor,
+    children,
     ...restProps
   } = (0, import_extractProps.extractProps)(props, import_qrCode.qrCodePropDefs);
   const Comp = asChild ? import_react_slot.Slot : "div";
   const resolvedSize = sizeMap[size] ?? 192;
+  const matrix = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_qrcode.QRCodeSVG,
+    {
+      value,
+      size: resolvedSize,
+      level,
+      marginSize,
+      fgColor: fgColor ?? "var(--dsx-color-on-surface)",
+      bgColor: bgColor ?? "var(--dsx-color-surface-raised)"
+    }
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Comp,
     {
+      role: "img",
       ...restProps,
       ref: forwardedRef,
       className: (0, import_classnames.default)("dsx-qr-code", className),
       "data-slot": "qr-code",
       "data-size": size,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_qrcode.QRCodeSVG,
-        {
-          value,
-          size: resolvedSize,
-          level,
-          marginSize,
-          fgColor: fgColor ?? "var(--dsx-color-on-surface)",
-          bgColor: bgColor ?? "var(--dsx-color-surface-raised)"
-        }
-      )
+      children: asChild && React.isValidElement(children) ? React.cloneElement(children, void 0, matrix) : matrix
     }
   );
 });