@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.5d5a2b2

package/dist/elements/Pill/index.css

@@ -1,8 +1,8 @@
 @layer payload-default {
   .pill {
-    --pill-padding-block: 0px;
-    --pill-padding-inline-start: 0px;
-    --pill-padding-inline-end: 0px;
+    --pill-padding-block: 0;
+    --pill-padding-inline-start: 0;
+    --pill-padding-inline-end: 0;
     --pill-icon-size: var(--spacer-4);
     padding: var(--pill-padding-block) var(--pill-padding-inline-end) var(--pill-padding-block)
       var(--pill-padding-inline-start);
@@ -13,9 +13,9 @@
     line-height: var(--text-body-medium-line-height);
     letter-spacing: var(--text-body-medium-letter-spacing);
     display: inline-flex;
-    background: var(--color-black-200);
-    color: var(--text-default);
-    border-radius: var(--radius-medium);
+    background: var(--ramp-black-200);
+    color: var(--color-text);
+    border-radius: var(--button-radius);
     cursor: inherit;
     border: 0;
     align-items: center;
@@ -49,11 +49,6 @@
     text-overflow: ellipsis;
   }
 
-  .pill--has-action {
-    cursor: pointer;
-    text-decoration: none;
-  }
-
   .pill--is-dragging {
     cursor: grabbing;
   }
@@ -61,7 +56,7 @@
   .pill--has-icon {
     gap: 0;
     --pill-padding-inline-start: var(--spacer-2);
-    --pill-padding-inline-end: calc(var(--base) * 0.1);
+    --pill-padding-inline-end: var(--spacer-1);
   }
 
   .pill--has-icon svg {
@@ -70,79 +65,52 @@
 
   .pill--align-icon-left {
     flex-direction: row-reverse;
-    --pill-padding-inline-start: calc(var(--base) * 0.1);
+    --pill-padding-inline-start: var(--spacer-1);
     --pill-padding-inline-end: var(--spacer-2);
   }
 
-  .pill--style-white.pill--has-action:hover {
-    background: var(--bg-default-secondary-hover);
-  }
-
-  .pill--style-white.pill--has-action:active {
-    background: var(--bg-default-secondary-pressed);
-  }
-
   .pill--style-always-white {
-    background: var(--bg-inverse-default);
-    color: var(--text-inverse-oninverse);
-  }
-
-  .pill--style-always-white.pill--has-action:hover {
-    background: var(--bg-inverse-hover);
-  }
-
-  .pill--style-always-white.pill--has-action:active {
-    background: var(--bg-inverse-pressed);
+    background: var(--color-bg-inverse);
+    color: var(--color-text-oninverse);
   }
 
-  .pill--style-light.pill--has-action:hover {
-    background: var(--bg-default-secondary-hover);
-  }
-
-  .pill--style-light.pill--has-action:active {
-    background: var(--bg-default-secondary-pressed);
+  .pill--style-light-gray {
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
   }
 
-  .pill--style-light-gray {
-    background: var(--bg-default-secondary);
-    color: var(--text-default);
+  .pill--style-light {
+    background: var(--color-bg-secondary);
+    color: var(--color-text);
   }
 
   .pill--style-warning {
-    background: var(--bg-warning-tertiary);
-    color: var(--text-warning-default);
+    background: var(--color-bg-warning-tertiary);
+    color: var(--color-text-warning);
   }
 
   .pill--style-success {
-    background: var(--bg-success-tertiary);
-    color: var(--text-success-default);
+    background: var(--color-bg-selected);
+    color: var(--color-text-brand);
   }
 
   .pill--style-error {
-    background: var(--bg-danger-tertiary);
-    color: var(--text-danger-default);
+    background: var(--color-bg-danger-tertiary);
+    color: var(--color-text-danger);
   }
 
   .pill--style-dark {
-    background: var(--color-grey-600);
-    color: var(--color-white-800);
+    background: var(--ramp-grey-600);
+    color: var(--ramp-white-800);
   }
 
   .pill--style-dark svg .stroke {
-    stroke: var(--color-white-800);
+    stroke: var(--ramp-white-800);
     fill: none;
   }
 
   .pill--style-dark svg .fill {
-    fill: var(--color-white-800);
-  }
-
-  .pill--style-dark.pill--has-action:hover {
-    background: var(--color-grey-600);
-  }
-
-  .pill--style-dark.pill--has-action:active {
-    background: var(--color-grey-600);
+    fill: var(--ramp-white-800);
   }
 
   .pill--size-medium {
@@ -152,23 +120,15 @@
   }
 
   .pill--size-small {
-    --pill-icon-size: calc(var(--base) * 0.9);
+    --pill-icon-size: var(--spacer-3);
     --pill-padding-block: 0;
     --pill-padding-inline-start: var(--spacer-1);
     --pill-padding-inline-end: var(--spacer-1);
   }
 
   html[data-theme='light'] .pill--style-always-white {
-    background: var(--bg-default);
-    color: var(--text-default);
-    border: 1px solid var(--border-default);
-  }
-
-  html[data-theme='light'] .pill--style-always-white.pill--has-action:hover {
-    background: var(--bg-default-secondary-hover);
-  }
-
-  html[data-theme='light'] .pill--style-always-white.pill--has-action:active {
-    background: var(--bg-default-secondary-pressed);
+    background: var(--color-bg);
+    color: var(--color-text);
+    border: var(--stroke-width-small) solid var(--color-border);
   }
 }

package/dist/elements/Pill/index.d.ts

@@ -15,21 +15,12 @@ export type PillProps = {
     } & HTMLAttributes<HTMLElement>;
     icon?: React.ReactNode;
     id?: string;
-    onClick?: () => void;
     /**
      * @default 'light'
      */
     pillStyle?: PillStyle;
     rounded?: boolean;
     size?: 'medium' | 'small';
-    to?: string;
-};
-export type RenderedTypeProps = {
-    children: React.ReactNode;
-    className?: string;
-    onClick?: () => void;
-    to: string;
-    type?: 'button';
 };
 import './index.css';
 export declare const Pill: React.FC<PillProps>;

package/dist/elements/Pill/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,cAAc,EAAE,MAAM,OAAO,CAAA;AAExD,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,MAAM,MAAM,SAAS,GACjB,cAAc,GACd,MAAM,GACN,OAAO,GACP,OAAO,GACP,YAAY,GACZ,SAAS,GACT,SAAS,GACT,OAAO,CAAA;AAEX,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE;QACb,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;KACpC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IACzB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,CAAC,EAAE,QAAQ,CAAA;CAChB,CAAA;AAGD,OAAO,aAAa,CAAA;AAoGpB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAOpC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Pill/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAE3C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,MAAM,SAAS,GACjB,cAAc,GACd,MAAM,GACN,OAAO,GACP,OAAO,GACP,YAAY,GACZ,SAAS,GACT,SAAS,GACT,OAAO,CAAA;AAEX,MAAM,MAAM,SAAS,GAAG;IACtB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE;QACb,GAAG,EAAE,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAAA;KACpC,GAAG,cAAc,CAAC,WAAW,CAAC,CAAA;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;OAEG;IACH,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;CAC1B,CAAA;AAGD,OAAO,aAAa,CAAA;AA0EpB,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAOpC,CAAA"}

package/dist/elements/Pill/index.js

@@ -2,8 +2,7 @@
 
 import { c as _c } from "react/compiler-runtime";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react'; // TODO: abstract this out to support all routers
-import { Link } from '../Link/index.js';
+import React from 'react';
 import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js';
 import './index.css';
 const baseClass = 'pill';
@@ -68,121 +67,39 @@ const DraggablePill = props => {
   return t4;
 };
 const StaticPill = props => {
-  const $ = _c(27);
   const {
     id,
-    alignIcon: t0,
-    "aria-checked": ariaChecked,
-    "aria-controls": ariaControls,
-    "aria-expanded": ariaExpanded,
-    "aria-label": ariaLabel,
+    alignIcon = 'right',
+    'aria-checked': ariaChecked,
+    'aria-controls': ariaControls,
+    'aria-expanded': ariaExpanded,
+    'aria-label': ariaLabel,
     children,
     className,
     draggable,
     elementProps,
     icon,
-    onClick,
-    pillStyle: t1,
+    pillStyle = 'light',
     rounded,
-    size: t2,
-    to
+    size = 'medium'
   } = props;
-  const alignIcon = t0 === undefined ? "right" : t0;
-  const pillStyle = t1 === undefined ? "light" : t1;
-  const size = t2 === undefined ? "medium" : t2;
-  const [isHydrated, setIsHydrated] = useState(false);
-  let t3;
-  let t4;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = () => {
-      setIsHydrated(true);
-    };
-    t4 = [];
-    $[0] = t3;
-    $[1] = t4;
-  } else {
-    t3 = $[0];
-    t4 = $[1];
-  }
-  useEffect(t3, t4);
-  const isButton = onClick && !to;
-  const t5 = `${baseClass}--style-${pillStyle}`;
-  const t6 = `${baseClass}--size-${size}`;
-  const t7 = className && className;
-  const t8 = to && `${baseClass}--has-link`;
-  const t9 = (to || onClick) && `${baseClass}--has-action`;
-  const t10 = icon && `${baseClass}--has-icon`;
-  const t11 = icon && `${baseClass}--align-icon-${alignIcon}`;
-  const t12 = draggable && `${baseClass}--draggable`;
-  const t13 = rounded && `${baseClass}--rounded`;
-  let t14;
-  if ($[2] !== t10 || $[3] !== t11 || $[4] !== t12 || $[5] !== t13 || $[6] !== t5 || $[7] !== t6 || $[8] !== t7 || $[9] !== t8 || $[10] !== t9) {
-    t14 = [baseClass, t5, t6, t7, t8, t9, t10, t11, t12, t13].filter(Boolean);
-    $[2] = t10;
-    $[3] = t11;
-    $[4] = t12;
-    $[5] = t13;
-    $[6] = t5;
-    $[7] = t6;
-    $[8] = t7;
-    $[9] = t8;
-    $[10] = t9;
-    $[11] = t14;
-  } else {
-    t14 = $[11];
-  }
-  const classes = t14.join(" ");
-  let Element = "div";
-  if (isButton) {
-    Element = "button";
-  }
-  if (to) {
-    Element = Link;
-  }
-  const t15 = isButton ? !isHydrated : undefined;
-  const t16 = to || null;
-  const t17 = isButton ? "button" : undefined;
-  let t18;
-  if ($[12] !== Element || $[13] !== ariaChecked || $[14] !== ariaControls || $[15] !== ariaExpanded || $[16] !== ariaLabel || $[17] !== children || $[18] !== classes || $[19] !== elementProps || $[20] !== icon || $[21] !== id || $[22] !== onClick || $[23] !== t15 || $[24] !== t16 || $[25] !== t17) {
-    t18 = _jsxs(Element, {
-      ...elementProps,
-      "aria-checked": ariaChecked,
-      "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded,
-      "aria-label": ariaLabel,
-      className: classes,
-      disabled: t15,
-      href: t16,
-      id,
-      onClick,
-      type: t17,
-      children: [_jsx("span", {
-        className: `${baseClass}__label`,
-        children
-      }), Boolean(icon) && _jsx("span", {
-        className: `${baseClass}__icon`,
-        children: icon
-      })]
-    });
-    $[12] = Element;
-    $[13] = ariaChecked;
-    $[14] = ariaControls;
-    $[15] = ariaExpanded;
-    $[16] = ariaLabel;
-    $[17] = children;
-    $[18] = classes;
-    $[19] = elementProps;
-    $[20] = icon;
-    $[21] = id;
-    $[22] = onClick;
-    $[23] = t15;
-    $[24] = t16;
-    $[25] = t17;
-    $[26] = t18;
-  } else {
-    t18 = $[26];
-  }
-  return t18;
+  const classes = [baseClass, `${baseClass}--style-${pillStyle}`, `${baseClass}--size-${size}`, className && className, icon && `${baseClass}--has-icon`, icon && `${baseClass}--align-icon-${alignIcon}`, draggable && `${baseClass}--draggable`, rounded && `${baseClass}--rounded`].filter(Boolean).join(' ');
+  return /*#__PURE__*/_jsxs("div", {
+    ...elementProps,
+    "aria-checked": ariaChecked,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-label": ariaLabel,
+    className: classes,
+    id: id,
+    children: [/*#__PURE__*/_jsx("span", {
+      className: `${baseClass}__label`,
+      children: children
+    }), Boolean(icon) && /*#__PURE__*/_jsx("span", {
+      className: `${baseClass}__icon`,
+      children: icon
+    })]
+  });
 };
 export const Pill = props => {
   const {

package/dist/elements/Pill/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useState","Link","useDraggableSortable","baseClass","DraggablePill","props","$","id","className","t0","attributes","isDragging","listeners","setNodeRef","transform","t1","t2","filter","Boolean","t3","join","t4","_jsx","StaticPill","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","size","to","undefined","isHydrated","setIsHydrated","Symbol","for","isButton","t5","t6","t7","t8","t9","t10","t11","t12","t13","t14","classes","Element","t15","t16","t17","t18","_jsxs","disabled","href","type","Pill"],"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport React, { useEffect, useState } from 'react' // TODO: abstract this out to support all routers\n\nimport { Link } from '../Link/index.js'\n\nexport type PillStyle =\n  | 'always-white'\n  | 'dark'\n  | 'error'\n  | 'light'\n  | 'light-gray'\n  | 'success'\n  | 'warning'\n  | 'white'\n\nexport type PillProps = {\n  alignIcon?: 'left' | 'right'\n  'aria-checked'?: boolean\n  'aria-controls'?: string\n  'aria-expanded'?: boolean\n  'aria-label'?: string\n  children?: React.ReactNode\n  className?: string\n  draggable?: boolean\n  elementProps?: {\n    ref: React.RefCallback<HTMLElement>\n  } & HTMLAttributes<HTMLElement>\n  icon?: React.ReactNode\n  id?: string\n  onClick?: () => void\n  /**\n   * @default 'light'\n   */\n  pillStyle?: PillStyle\n  rounded?: boolean\n  size?: 'medium' | 'small'\n  to?: string\n}\n\nexport type RenderedTypeProps = {\n  children: React.ReactNode\n  className?: string\n  onClick?: () => void\n  to: string\n  type?: 'button'\n}\n\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport './index.css'\n\nconst baseClass = 'pill'\n\nconst DraggablePill: React.FC<PillProps> = (props) => {\n  const { id, className } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id,\n  })\n\n  return (\n    <StaticPill\n      {...props}\n      className={[isDragging && `${baseClass}--is-dragging`, className].filter(Boolean).join(' ')}\n      elementProps={{\n        ...listeners,\n        ...attributes,\n        ref: setNodeRef,\n        style: {\n          transform,\n        },\n      }}\n    />\n  )\n}\n\nconst StaticPill: React.FC<PillProps> = (props) => {\n  const {\n    id,\n    alignIcon = 'right',\n    'aria-checked': ariaChecked,\n    'aria-controls': ariaControls,\n    'aria-expanded': ariaExpanded,\n    'aria-label': ariaLabel,\n    children,\n    className,\n    draggable,\n    elementProps,\n    icon,\n    onClick,\n    pillStyle = 'light',\n    rounded,\n    size = 'medium',\n    to,\n  } = props\n\n  const [isHydrated, setIsHydrated] = useState(false)\n\n  useEffect(() => {\n    setIsHydrated(true)\n  }, [])\n\n  const isButton = onClick && !to\n\n  const classes = [\n    baseClass,\n    `${baseClass}--style-${pillStyle}`,\n    `${baseClass}--size-${size}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n    draggable && `${baseClass}--draggable`,\n    rounded && `${baseClass}--rounded`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let Element: ElementType | React.FC<RenderedTypeProps> = 'div'\n\n  if (isButton) {\n    Element = 'button'\n  }\n\n  if (to) {\n    Element = Link\n  }\n\n  return (\n    <Element\n      {...elementProps}\n      aria-checked={ariaChecked}\n      aria-controls={ariaControls}\n      aria-expanded={ariaExpanded}\n      aria-label={ariaLabel}\n      className={classes}\n      disabled={isButton ? !isHydrated : undefined}\n      href={to || null}\n      id={id}\n      onClick={onClick}\n      type={isButton ? 'button' : undefined}\n    >\n      <span className={`${baseClass}__label`}>{children}</span>\n      {Boolean(icon) && <span className={`${baseClass}__icon`}>{icon}</span>}\n    </Element>\n  )\n}\n\nexport const Pill: React.FC<PillProps> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggablePill {...props} />\n  }\n  return <StaticPill {...props} />\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"index.js","names":["c","_c","React","useDraggableSortable","baseClass","DraggablePill","props","$","id","className","t0","attributes","isDragging","listeners","setNodeRef","transform","t1","t2","filter","Boolean","t3","join","t4","_jsx","StaticPill","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","pillStyle","rounded","size","classes","_jsxs","Pill"],"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { HTMLAttributes } from 'react'\n\nimport React from 'react'\n\nexport type PillStyle =\n  | 'always-white'\n  | 'dark'\n  | 'error'\n  | 'light'\n  | 'light-gray'\n  | 'success'\n  | 'warning'\n  | 'white'\n\nexport type PillProps = {\n  alignIcon?: 'left' | 'right'\n  'aria-checked'?: boolean\n  'aria-controls'?: string\n  'aria-expanded'?: boolean\n  'aria-label'?: string\n  children?: React.ReactNode\n  className?: string\n  draggable?: boolean\n  elementProps?: {\n    ref: React.RefCallback<HTMLElement>\n  } & HTMLAttributes<HTMLElement>\n  icon?: React.ReactNode\n  id?: string\n  /**\n   * @default 'light'\n   */\n  pillStyle?: PillStyle\n  rounded?: boolean\n  size?: 'medium' | 'small'\n}\n\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport './index.css'\n\nconst baseClass = 'pill'\n\nconst DraggablePill: React.FC<PillProps> = (props) => {\n  const { id, className } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id,\n  })\n\n  return (\n    <StaticPill\n      {...props}\n      className={[isDragging && `${baseClass}--is-dragging`, className].filter(Boolean).join(' ')}\n      elementProps={{\n        ...listeners,\n        ...attributes,\n        ref: setNodeRef,\n        style: {\n          transform,\n        },\n      }}\n    />\n  )\n}\n\nconst StaticPill: React.FC<PillProps> = (props) => {\n  const {\n    id,\n    alignIcon = 'right',\n    'aria-checked': ariaChecked,\n    'aria-controls': ariaControls,\n    'aria-expanded': ariaExpanded,\n    'aria-label': ariaLabel,\n    children,\n    className,\n    draggable,\n    elementProps,\n    icon,\n    pillStyle = 'light',\n    rounded,\n    size = 'medium',\n  } = props\n\n  const classes = [\n    baseClass,\n    `${baseClass}--style-${pillStyle}`,\n    `${baseClass}--size-${size}`,\n    className && className,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n    draggable && `${baseClass}--draggable`,\n    rounded && `${baseClass}--rounded`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  return (\n    <div\n      {...elementProps}\n      aria-checked={ariaChecked}\n      aria-controls={ariaControls}\n      aria-expanded={ariaExpanded}\n      aria-label={ariaLabel}\n      className={classes}\n      id={id}\n    >\n      <span className={`${baseClass}__label`}>{children}</span>\n      {Boolean(icon) && <span className={`${baseClass}__icon`}>{icon}</span>}\n    </div>\n  )\n}\n\nexport const Pill: React.FC<PillProps> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggablePill {...props} />\n  }\n  return <StaticPill {...props} />\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/elements/PillSelector/index.css

@@ -0,0 +1,33 @@
+@layer payload-default {
+  .pill-selector {
+    display: flex;
+    flex-wrap: wrap;
+    background: var(--theme-elevation-50);
+    padding: var(--spacer-4);
+    gap: var(--spacer-2-5);
+  }
+
+  .pill-selector__draggable-item {
+    cursor: grab;
+
+    &:active {
+      cursor: grabbing;
+    }
+  }
+
+  .pill-selector__draggable-item--is-dragging {
+    cursor: grabbing;
+    z-index: 1;
+  }
+
+  /* TODO: delete this once all icons have been migrated to viewbox edge-to-edge */
+  .pill-selector .pill__icon {
+    padding: 0;
+  }
+
+  @media (max-width: 768px) {
+    .pill-selector {
+      padding: var(--spacer-2-5);
+    }
+  }
+}

package/dist/elements/PillSelector/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import './index.scss';
+import './index.css';
 export type SelectablePill = {
     key?: string;
     Label?: React.ReactNode;

package/dist/elements/PillSelector/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PillSelector/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAMzB,OAAO,cAAc,CAAA;AAIrB,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,CAAC,IAAI,EAAE;YAAE,aAAa,EAAE,MAAM,CAAC;YAAC,WAAW,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAA;KAC1E,CAAA;IACD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAClE,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkDxC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/PillSelector/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAA;AAOzB,OAAO,aAAa,CAAA;AAIpB,MAAM,MAAM,cAAc,GAAG;IAC3B,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG;IAClB,SAAS,CAAC,EAAE;QACV,SAAS,EAAE,CAAC,IAAI,EAAE;YAAE,aAAa,EAAE,MAAM,CAAC;YAAC,WAAW,EAAE,MAAM,CAAA;SAAE,KAAK,IAAI,CAAA;KAC1E,CAAA;IACD,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,IAAI,EAAE,cAAc,CAAA;KAAE,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAClE,KAAK,EAAE,cAAc,EAAE,CAAA;CACxB,CAAA;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAkFxC,CAAA"}

package/dist/elements/PillSelector/index.js

@@ -1,12 +1,14 @@
 'use client';
 
 import { jsx as _jsx } from "react/jsx-runtime";
+import { horizontalListSortingStrategy } from '@dnd-kit/sortable';
 import React from 'react';
 import { PlusIcon } from '../../icons/Plus/index.js';
 import { XIcon } from '../../icons/X/index.js';
+import { Chip } from '../Chip/index.js';
+import { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js';
 import { DraggableSortable } from '../DraggableSortable/index.js';
-import { Pill } from '../Pill/index.js';
-import './index.scss';
+import './index.css';
 const baseClass = 'pill-selector';
 /**
  * Displays a wrappable list of pills that can be selected or deselected.
@@ -22,34 +24,10 @@ export const PillSelector = ({
   // This creates a new function reference on each recomputation, causing React to treat it as a
   // different component type, triggering unmount/mount cycles instead of just updating props.
   // GOOD: Use conditional rendering directly: draggable ? <DraggableSortable /> : <div />
-  const pillElements = React.useMemo(() => {
-    return pills.map((pill, i) => {
-      return /*#__PURE__*/_jsx(Pill, {
-        alignIcon: "left",
-        "aria-checked": pill.selected,
-        className: [`${baseClass}__pill`, pill.selected && `${baseClass}__pill--selected`].filter(Boolean).join(' '),
-        draggable: Boolean(draggable),
-        icon: pill.selected ? /*#__PURE__*/_jsx(XIcon, {}) : /*#__PURE__*/_jsx(PlusIcon, {}),
-        id: pill.name,
-        onClick: () => {
-          if (onClick) {
-            void onClick({
-              pill
-            });
-          }
-        },
-        size: "small",
-        children: pill.Label ?? /*#__PURE__*/_jsx("span", {
-          className: `${baseClass}__pill-label`,
-          children: pill.name
-        })
-      }, pill.key ?? `${pill.name}-${i}`);
-    });
-  }, [pills, onClick, draggable]);
   if (draggable) {
     return /*#__PURE__*/_jsx(DraggableSortable, {
       className: baseClass,
-      ids: pills.map(pill_0 => pill_0.name),
+      ids: pills.map(pill => pill.name),
       onDragEnd: ({
         moveFromIndex,
         moveToIndex
@@ -59,12 +37,71 @@ export const PillSelector = ({
           moveToIndex
         });
       },
-      children: pillElements
+      sortingStrategy: horizontalListSortingStrategy,
+      children: pills.map((pill, i) => /*#__PURE__*/_jsx(DraggableSortableItem, {
+        id: pill.name,
+        children: ({
+          attributes,
+          isDragging,
+          listeners,
+          setNodeRef,
+          transform
+        }) => {
+          // Exclude tabIndex from attributes - the action button inside handles focus
+          const {
+            tabIndex: _tabIndex,
+            ...restAttributes
+          } = attributes;
+          return /*#__PURE__*/_jsx(Chip, {
+            "aria-label": pill.name,
+            className: [`${baseClass}__draggable-item`, isDragging && `${baseClass}__draggable-item--is-dragging`].filter(Boolean).join(' '),
+            elementProps: {
+              ...listeners,
+              ...restAttributes,
+              ref: setNodeRef,
+              style: {
+                ...restAttributes.style,
+                transform
+              }
+            },
+            icon: pill.selected ? /*#__PURE__*/_jsx(XIcon, {}) : /*#__PURE__*/_jsx(PlusIcon, {}),
+            id: pill.name,
+            onClick: () => {
+              if (onClick) {
+                void onClick({
+                  pill
+                });
+              }
+            },
+            selected: pill.selected,
+            children: pill.Label ?? /*#__PURE__*/_jsx("span", {
+              className: `${baseClass}__pill-label`,
+              children: pill.name
+            })
+          });
+        }
+      }, pill.key ?? `${pill.name}-${i}`))
     });
   }
   return /*#__PURE__*/_jsx("div", {
     className: baseClass,
-    children: pillElements
+    children: pills.map((pill, i) => /*#__PURE__*/_jsx(Chip, {
+      "aria-label": pill.name,
+      icon: pill.selected ? /*#__PURE__*/_jsx(XIcon, {}) : /*#__PURE__*/_jsx(PlusIcon, {}),
+      id: pill.name,
+      onClick: () => {
+        if (onClick) {
+          void onClick({
+            pill
+          });
+        }
+      },
+      selected: pill.selected,
+      children: pill.Label ?? /*#__PURE__*/_jsx("span", {
+        className: `${baseClass}__pill-label`,
+        children: pill.name
+      })
+    }, pill.key ?? `${pill.name}-${i}`))
   });
 };
 //# sourceMappingURL=index.js.map

package/dist/elements/PillSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PlusIcon","XIcon","DraggableSortable","Pill","baseClass","PillSelector","draggable","onClick","pills","pillElements","useMemo","map","pill","i","_jsx","alignIcon","selected","className","filter","Boolean","join","icon","id","name","size","Label","key","ids","onDragEnd","moveFromIndex","moveToIndex"],"sources":["../../../src/elements/PillSelector/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill-selector'\n\nexport type SelectablePill = {\n  key?: string\n  Label?: React.ReactNode\n  name: string\n  selected: boolean\n}\n\nexport type Props = {\n  draggable?: {\n    onDragEnd: (args: { moveFromIndex: number; moveToIndex: number }) => void\n  }\n  onClick?: (args: { pill: SelectablePill }) => Promise<void> | void\n  pills: SelectablePill[]\n}\n\n/**\n * Displays a wrappable list of pills that can be selected or deselected.\n * If `draggable` is true, the pills can be reordered by dragging.\n */\nexport const PillSelector: React.FC<Props> = ({ draggable, onClick, pills }) => {\n  // IMPORTANT: Do NOT wrap DraggableSortable in a dynamic component function using useMemo.\n  // BAD: useMemo(() => ({ children }) => <DraggableSortable>...</DraggableSortable>, [deps])\n  // This creates a new function reference on each recomputation, causing React to treat it as a\n  // different component type, triggering unmount/mount cycles instead of just updating props.\n  // GOOD: Use conditional rendering directly: draggable ? <DraggableSortable /> : <div />\n  const pillElements = React.useMemo(() => {\n    return pills.map((pill, i) => {\n      return (\n        <Pill\n          alignIcon=\"left\"\n          aria-checked={pill.selected}\n          className={[`${baseClass}__pill`, pill.selected && `${baseClass}__pill--selected`]\n            .filter(Boolean)\n            .join(' ')}\n          draggable={Boolean(draggable)}\n          icon={pill.selected ? <XIcon /> : <PlusIcon />}\n          id={pill.name}\n          key={pill.key ?? `${pill.name}-${i}`}\n          onClick={() => {\n            if (onClick) {\n              void onClick({ pill })\n            }\n          }}\n          size=\"small\"\n        >\n          {pill.Label ?? <span className={`${baseClass}__pill-label`}>{pill.name}</span>}\n        </Pill>\n      )\n    })\n  }, [pills, onClick, draggable])\n\n  if (draggable) {\n    return (\n      <DraggableSortable\n        className={baseClass}\n        ids={pills.map((pill) => pill.name)}\n        onDragEnd={({ moveFromIndex, moveToIndex }) => {\n          draggable.onDragEnd({\n            moveFromIndex,\n            moveToIndex,\n          })\n        }}\n      >\n        {pillElements}\n      </DraggableSortable>\n    )\n  }\n\n  return <div className={baseClass}>{pillElements}</div>\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,KAAK,QAAQ;AACtB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAiBlB;;;;AAIA,OAAO,MAAMC,YAAA,GAAgCA,CAAC;EAAEC,SAAS;EAAEC,OAAO;EAAEC;AAAK,CAAE;EACzE;EACA;EACA;EACA;EACA;EACA,MAAMC,YAAA,GAAeV,KAAA,CAAMW,OAAO,CAAC;IACjC,OAAOF,KAAA,CAAMG,GAAG,CAAC,CAACC,IAAA,EAAMC,CAAA;MACtB,oBACEC,IAAA,CAACX,IAAA;QACCY,SAAA,EAAU;QACV,gBAAcH,IAAA,CAAKI,QAAQ;QAC3BC,SAAA,EAAW,CAAC,GAAGb,SAAA,QAAiB,EAAEQ,IAAA,CAAKI,QAAQ,IAAI,GAAGZ,SAAA,kBAA2B,CAAC,CAC/Ec,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;QACRd,SAAA,EAAWa,OAAA,CAAQb,SAAA;QACnBe,IAAA,EAAMT,IAAA,CAAKI,QAAQ,gBAAGF,IAAA,CAACb,KAAA,qBAAWa,IAAA,CAACd,QAAA;QACnCsB,EAAA,EAAIV,IAAA,CAAKW,IAAI;QAEbhB,OAAA,EAASA,CAAA;UACP,IAAIA,OAAA,EAAS;YACX,KAAKA,OAAA,CAAQ;cAAEK;YAAK;UACtB;QACF;QACAY,IAAA,EAAK;kBAEJZ,IAAA,CAAKa,KAAK,iBAAIX,IAAA,CAAC;UAAKG,SAAA,EAAW,GAAGb,SAAA,cAAuB;oBAAGQ,IAAA,CAAKW;;SAR7DX,IAAA,CAAKc,GAAG,IAAI,GAAGd,IAAA,CAAKW,IAAI,IAAIV,CAAA,EAAG;IAW1C;EACF,GAAG,CAACL,KAAA,EAAOD,OAAA,EAASD,SAAA,CAAU;EAE9B,IAAIA,SAAA,EAAW;IACb,oBACEQ,IAAA,CAACZ,iBAAA;MACCe,SAAA,EAAWb,SAAA;MACXuB,GAAA,EAAKnB,KAAA,CAAMG,GAAG,CAAEC,MAAA,IAASA,MAAA,CAAKW,IAAI;MAClCK,SAAA,EAAWA,CAAC;QAAEC,aAAa;QAAEC;MAAW,CAAE;QACxCxB,SAAA,CAAUsB,SAAS,CAAC;UAClBC,aAAA;UACAC;QACF;MACF;gBAECrB;;EAGP;EAEA,oBAAOK,IAAA,CAAC;IAAIG,SAAA,EAAWb,SAAA;cAAYK;;AACrC","ignoreList":[]}
+{"version":3,"file":"index.js","names":["horizontalListSortingStrategy","React","PlusIcon","XIcon","Chip","DraggableSortableItem","DraggableSortable","baseClass","PillSelector","draggable","onClick","pills","_jsx","className","ids","map","pill","name","onDragEnd","moveFromIndex","moveToIndex","sortingStrategy","i","id","children","attributes","isDragging","listeners","setNodeRef","transform","tabIndex","_tabIndex","restAttributes","filter","Boolean","join","elementProps","ref","style","icon","selected","Label","key"],"sources":["../../../src/elements/PillSelector/index.tsx"],"sourcesContent":["'use client'\n\nimport { horizontalListSortingStrategy } from '@dnd-kit/sortable'\nimport React from 'react'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { Chip } from '../Chip/index.js'\nimport { DraggableSortableItem } from '../DraggableSortable/DraggableSortableItem/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport './index.css'\n\nconst baseClass = 'pill-selector'\n\nexport type SelectablePill = {\n  key?: string\n  Label?: React.ReactNode\n  name: string\n  selected: boolean\n}\n\nexport type Props = {\n  draggable?: {\n    onDragEnd: (args: { moveFromIndex: number; moveToIndex: number }) => void\n  }\n  onClick?: (args: { pill: SelectablePill }) => Promise<void> | void\n  pills: SelectablePill[]\n}\n\n/**\n * Displays a wrappable list of pills that can be selected or deselected.\n * If `draggable` is true, the pills can be reordered by dragging.\n */\nexport const PillSelector: React.FC<Props> = ({ draggable, onClick, pills }) => {\n  // IMPORTANT: Do NOT wrap DraggableSortable in a dynamic component function using useMemo.\n  // BAD: useMemo(() => ({ children }) => <DraggableSortable>...</DraggableSortable>, [deps])\n  // This creates a new function reference on each recomputation, causing React to treat it as a\n  // different component type, triggering unmount/mount cycles instead of just updating props.\n  // GOOD: Use conditional rendering directly: draggable ? <DraggableSortable /> : <div />\n\n  if (draggable) {\n    return (\n      <DraggableSortable\n        className={baseClass}\n        ids={pills.map((pill) => pill.name)}\n        onDragEnd={({ moveFromIndex, moveToIndex }) => {\n          draggable.onDragEnd({\n            moveFromIndex,\n            moveToIndex,\n          })\n        }}\n        sortingStrategy={horizontalListSortingStrategy}\n      >\n        {pills.map((pill, i) => (\n          <DraggableSortableItem id={pill.name} key={pill.key ?? `${pill.name}-${i}`}>\n            {({ attributes, isDragging, listeners, setNodeRef, transform }) => {\n              // Exclude tabIndex from attributes - the action button inside handles focus\n              const { tabIndex: _tabIndex, ...restAttributes } = attributes\n              return (\n                <Chip\n                  aria-label={pill.name}\n                  className={[\n                    `${baseClass}__draggable-item`,\n                    isDragging && `${baseClass}__draggable-item--is-dragging`,\n                  ]\n                    .filter(Boolean)\n                    .join(' ')}\n                  elementProps={{\n                    ...listeners,\n                    ...restAttributes,\n                    ref: setNodeRef,\n                    style: {\n                      ...restAttributes.style,\n                      transform,\n                    },\n                  }}\n                  icon={pill.selected ? <XIcon /> : <PlusIcon />}\n                  id={pill.name}\n                  onClick={() => {\n                    if (onClick) {\n                      void onClick({ pill })\n                    }\n                  }}\n                  selected={pill.selected}\n                >\n                  {pill.Label ?? <span className={`${baseClass}__pill-label`}>{pill.name}</span>}\n                </Chip>\n              )\n            }}\n          </DraggableSortableItem>\n        ))}\n      </DraggableSortable>\n    )\n  }\n\n  return (\n    <div className={baseClass}>\n      {pills.map((pill, i) => (\n        <Chip\n          aria-label={pill.name}\n          icon={pill.selected ? <XIcon /> : <PlusIcon />}\n          id={pill.name}\n          key={pill.key ?? `${pill.name}-${i}`}\n          onClick={() => {\n            if (onClick) {\n              void onClick({ pill })\n            }\n          }}\n          selected={pill.selected}\n        >\n          {pill.Label ?? <span className={`${baseClass}__pill-label`}>{pill.name}</span>}\n        </Chip>\n      ))}\n    </div>\n  )\n}\n"],"mappings":"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","ignoreList":[]}