@payloadcms/ui 4.0.0-internal.38b7f1d → 4.0.0-internal.4c792ad

package/dist/elements/PermanentlyDeleteButton/index.js

@@ -3,13 +3,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useModal } from '@faceless-ui/modal';
 import { getTranslation } from '@payloadcms/translations';
-import { useRouter } from 'next/navigation.js';
 import { formatAdminURL } from 'payload/shared';
 import * as qs from 'qs-esm';
 import React, { Fragment, useCallback } from 'react';
 import { toast } from 'sonner';
 import { useConfig } from '../../providers/Config/index.js';
 import { useDocumentTitle } from '../../providers/DocumentTitle/index.js';
+import { useRouter } from '../../providers/RouterAdapter/index.js';
 import { useRouteTransition } from '../../providers/RouteTransition/index.js';
 import { useTranslation } from '../../providers/Translation/index.js';
 import { requests } from '../../utilities/api.js';

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["useModal","getTranslation","useRouter","formatAdminURL","qs","React","Fragment","useCallback","toast","useConfig","useDocumentTitle","useRouteTransition","useTranslation","requests","Button","ConfirmationModal","Translation","PermanentlyDeleteButton","props","id","buttonId","collectionSlug","onDelete","redirectAfterDelete","singularLabel","title","titleFromProps","config","routes","admin","adminRoute","api","serverURL","getEntityConfig","collectionConfig","router","i18n","t","startRouteTransition","openModal","modalSlug","addDefaultError","error","handleDelete","url","apiRoute","path","stringify","trash","where","and","equals","deletedAt","exists","addQueryPrefix","res","delete","headers","language","json","status","success","label","message","push","errors","forEach","_err","_jsxs","_jsx","buttonStyle","onClick","body","elements","1","children","i18nKey","variables","confirmingLabel","heading","onConfirm"],"sources":["../../../src/elements/PermanentlyDeleteButton/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { useRouter } from 'next/navigation.js'\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { Fragment, useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentTitle } from '../../providers/DocumentTitle/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { Button } from '../Button/index.js'\nimport { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport { Translation } from '../Translation/index.js'\n\nexport type Props = {\n  readonly buttonId?: string\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly id?: string\n  readonly onDelete?: DocumentDrawerContextType['onDelete']\n  readonly redirectAfterDelete?: boolean\n  readonly singularLabel: SanitizedCollectionConfig['labels']['singular']\n  readonly title?: string\n}\n\nexport const PermanentlyDeleteButton: React.FC<Props> = (props) => {\n  const {\n    id,\n    buttonId,\n    collectionSlug,\n    onDelete,\n    redirectAfterDelete = true,\n    singularLabel,\n    title: titleFromProps,\n  } = props\n\n  const {\n    config: {\n      routes: { admin: adminRoute, api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n  const router = useRouter()\n  const { i18n, t } = useTranslation()\n  const { title } = useDocumentTitle()\n  const { startRouteTransition } = useRouteTransition()\n  const { openModal } = useModal()\n\n  const modalSlug = `perma-delete-${id}`\n\n  const addDefaultError = useCallback(() => {\n    toast.error(t('error:deletingTitle', { title }))\n  }, [t, title])\n\n  const handleDelete = useCallback(async () => {\n    try {\n      const url = formatAdminURL({\n        apiRoute: api,\n        path: `/${collectionSlug}${qs.stringify(\n          {\n            trash: true,\n            where: {\n              and: [{ id: { equals: id } }, { deletedAt: { exists: true } }],\n            },\n          },\n          {\n            addQueryPrefix: true,\n          },\n        )}`,\n      })\n\n      const res = await requests.delete(url, {\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      })\n\n      const json = await res.json()\n\n      if (res.status < 400) {\n        toast.success(\n          t('general:titleDeleted', {\n            label: getTranslation(singularLabel, i18n),\n            title,\n          }) || json.message,\n        )\n\n        if (redirectAfterDelete) {\n          return startRouteTransition(() =>\n            router.push(\n              formatAdminURL({\n                adminRoute,\n                path: `/collections/${collectionSlug}/trash`,\n                serverURL,\n              }),\n            ),\n          )\n        }\n\n        if (typeof onDelete === 'function') {\n          await onDelete({ id, collectionConfig })\n        }\n\n        return\n      }\n\n      if (json.errors) {\n        json.errors.forEach((error) => toast.error(error.message))\n      } else {\n        addDefaultError()\n      }\n    } catch (_err) {\n      addDefaultError()\n    }\n  }, [\n    serverURL,\n    api,\n    collectionSlug,\n    id,\n    t,\n    singularLabel,\n    addDefaultError,\n    i18n,\n    title,\n    router,\n    adminRoute,\n    redirectAfterDelete,\n    onDelete,\n    collectionConfig,\n    startRouteTransition,\n  ])\n\n  if (id) {\n    return (\n      <Fragment>\n        <Button\n          buttonStyle=\"secondary\"\n          id={buttonId}\n          onClick={() => {\n            openModal(modalSlug)\n          }}\n        >\n          {t('general:permanentlyDelete')}\n        </Button>\n        <ConfirmationModal\n          body={\n            <Translation\n              elements={{\n                '1': ({ children }) => <strong>{children}</strong>,\n              }}\n              i18nKey=\"general:aboutToPermanentlyDelete\"\n              t={t}\n              variables={{\n                label: getTranslation(singularLabel, i18n),\n                title: titleFromProps || title || id,\n              }}\n            />\n          }\n          confirmingLabel={t('general:deleting')}\n          heading={t('general:confirmDeletion')}\n          modalSlug={modalSlug}\n          onConfirm={handleDelete}\n        />\n      </Fragment>\n    )\n  }\n\n  return null\n}\n"],"mappings":"AAAA;;;AAIA,SAASA,QAAQ,QAAQ;AACzB,SAASC,cAAc,QAAQ;AAC/B,SAASC,SAAS,QAAQ;AAC1B,SAASC,cAAc,QAAQ;AAC/B,YAAYC,EAAA,MAAQ;AACpB,OAAOC,KAAA,IAASC,QAAQ,EAAEC,WAAW,QAAQ;AAC7C,SAASC,KAAK,QAAQ;AAItB,SAASC,SAAS,QAAQ;AAC1B,SAASC,gBAAgB,QAAQ;AACjC,SAASC,kBAAkB,QAAQ;AACnC,SAASC,cAAc,QAAQ;AAC/B,SAASC,QAAQ,QAAQ;AACzB,SAASC,MAAM,QAAQ;AACvB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,WAAW,QAAQ;AAY5B,OAAO,MAAMC,uBAAA,GAA4CC,KAAA;EACvD,MAAM;IACJC,EAAE;IACFC,QAAQ;IACRC,cAAc;IACdC,QAAQ;IACRC,mBAAA,GAAsB,IAAI;IAC1BC,aAAa;IACbC,KAAA,EAAOC;EAAc,CACtB,GAAGR,KAAA;EAEJ,MAAM;IACJS,MAAA,EAAQ;MACNC,MAAA,EAAQ;QAAEC,KAAA,EAAOC,UAAU;QAAEC;MAAG,CAAE;MAClCC;IAAS,CACV;IACDC;EAAe,CAChB,GAAGxB,SAAA;EAEJ,MAAMyB,gBAAA,GAAmBD,eAAA,CAAgB;IAAEZ;EAAe;EAC1D,MAAMc,MAAA,GAASjC,SAAA;EACf,MAAM;IAAEkC,IAAI;IAAEC;EAAC,CAAE,GAAGzB,cAAA;EACpB,MAAM;IAAEa;EAAK,CAAE,GAAGf,gBAAA;EAClB,MAAM;IAAE4B;EAAoB,CAAE,GAAG3B,kBAAA;EACjC,MAAM;IAAE4B;EAAS,CAAE,GAAGvC,QAAA;EAEtB,MAAMwC,SAAA,GAAY,gBAAgBrB,EAAA,EAAI;EAEtC,MAAMsB,eAAA,GAAkBlC,WAAA,CAAY;IAClCC,KAAA,CAAMkC,KAAK,CAACL,CAAA,CAAE,uBAAuB;MAAEZ;IAAM;EAC/C,GAAG,CAACY,CAAA,EAAGZ,KAAA,CAAM;EAEb,MAAMkB,YAAA,GAAepC,WAAA,CAAY;IAC/B,IAAI;MACF,MAAMqC,GAAA,GAAMzC,cAAA,CAAe;QACzB0C,QAAA,EAAUd,GAAA;QACVe,IAAA,EAAM,IAAIzB,cAAA,GAAiBjB,EAAA,CAAG2C,SAAS,CACrC;UACEC,KAAA,EAAO;UACPC,KAAA,EAAO;YACLC,GAAA,EAAK,CAAC;cAAE/B,EAAA,EAAI;gBAAEgC,MAAA,EAAQhC;cAAG;YAAE,GAAG;cAAEiC,SAAA,EAAW;gBAAEC,MAAA,EAAQ;cAAK;YAAE;UAC9D;QACF,GACA;UACEC,cAAA,EAAgB;QAClB;MAEJ;MAEA,MAAMC,GAAA,GAAM,MAAM1C,QAAA,CAAS2C,MAAM,CAACZ,GAAA,EAAK;QACrCa,OAAA,EAAS;UACP,mBAAmBrB,IAAA,CAAKsB,QAAQ;UAChC,gBAAgB;QAClB;MACF;MAEA,MAAMC,IAAA,GAAO,MAAMJ,GAAA,CAAII,IAAI;MAE3B,IAAIJ,GAAA,CAAIK,MAAM,GAAG,KAAK;QACpBpD,KAAA,CAAMqD,OAAO,CACXxB,CAAA,CAAE,wBAAwB;UACxByB,KAAA,EAAO7D,cAAA,CAAeuB,aAAA,EAAeY,IAAA;UACrCX;QACF,MAAMkC,IAAA,CAAKI,OAAO;QAGpB,IAAIxC,mBAAA,EAAqB;UACvB,OAAOe,oBAAA,CAAqB,MAC1BH,MAAA,CAAO6B,IAAI,CACT7D,cAAA,CAAe;YACb2B,UAAA;YACAgB,IAAA,EAAM,gBAAgBzB,cAAA,QAAsB;YAC5CW;UACF;QAGN;QAEA,IAAI,OAAOV,QAAA,KAAa,YAAY;UAClC,MAAMA,QAAA,CAAS;YAAEH,EAAA;YAAIe;UAAiB;QACxC;QAEA;MACF;MAEA,IAAIyB,IAAA,CAAKM,MAAM,EAAE;QACfN,IAAA,CAAKM,MAAM,CAACC,OAAO,CAAExB,KAAA,IAAUlC,KAAA,CAAMkC,KAAK,CAACA,KAAA,CAAMqB,OAAO;MAC1D,OAAO;QACLtB,eAAA;MACF;IACF,EAAE,OAAO0B,IAAA,EAAM;MACb1B,eAAA;IACF;EACF,GAAG,CACDT,SAAA,EACAD,GAAA,EACAV,cAAA,EACAF,EAAA,EACAkB,CAAA,EACAb,aAAA,EACAiB,eAAA,EACAL,IAAA,EACAX,KAAA,EACAU,MAAA,EACAL,UAAA,EACAP,mBAAA,EACAD,QAAA,EACAY,gBAAA,EACAI,oBAAA,CACD;EAED,IAAInB,EAAA,EAAI;IACN,oBACEiD,KAAA,CAAC9D,QAAA;8BACC+D,IAAA,CAACvD,MAAA;QACCwD,WAAA,EAAY;QACZnD,EAAA,EAAIC,QAAA;QACJmD,OAAA,EAASA,CAAA;UACPhC,SAAA,CAAUC,SAAA;QACZ;kBAECH,CAAA,CAAE;uBAELgC,IAAA,CAACtD,iBAAA;QACCyD,IAAA,eACEH,IAAA,CAACrD,WAAA;UACCyD,QAAA,EAAU;YACR,KAAKC,CAAC;cAAEC;YAAQ,CAAE,kBAAKN,IAAA,CAAC;wBAAQM;;UAClC;UACAC,OAAA,EAAQ;UACRvC,CAAA,EAAGA,CAAA;UACHwC,SAAA,EAAW;YACTf,KAAA,EAAO7D,cAAA,CAAeuB,aAAA,EAAeY,IAAA;YACrCX,KAAA,EAAOC,cAAA,IAAkBD,KAAA,IAASN;UACpC;;QAGJ2D,eAAA,EAAiBzC,CAAA,CAAE;QACnB0C,OAAA,EAAS1C,CAAA,CAAE;QACXG,SAAA,EAAWA,SAAA;QACXwC,SAAA,EAAWrC;;;EAInB;EAEA,OAAO;AACT","ignoreList":[]}
+{"version":3,"file":"index.js","names":["useModal","getTranslation","formatAdminURL","qs","React","Fragment","useCallback","toast","useConfig","useDocumentTitle","useRouter","useRouteTransition","useTranslation","requests","Button","ConfirmationModal","Translation","PermanentlyDeleteButton","props","id","buttonId","collectionSlug","onDelete","redirectAfterDelete","singularLabel","title","titleFromProps","config","routes","admin","adminRoute","api","serverURL","getEntityConfig","collectionConfig","router","i18n","t","startRouteTransition","openModal","modalSlug","addDefaultError","error","handleDelete","url","apiRoute","path","stringify","trash","where","and","equals","deletedAt","exists","addQueryPrefix","res","delete","headers","language","json","status","success","label","message","push","errors","forEach","_err","_jsxs","_jsx","buttonStyle","onClick","body","elements","1","children","i18nKey","variables","confirmingLabel","heading","onConfirm"],"sources":["../../../src/elements/PermanentlyDeleteButton/index.tsx"],"sourcesContent":["'use client'\n\nimport type { SanitizedCollectionConfig } from 'payload'\n\nimport { useModal } from '@faceless-ui/modal'\nimport { getTranslation } from '@payloadcms/translations'\nimport { formatAdminURL } from 'payload/shared'\nimport * as qs from 'qs-esm'\nimport React, { Fragment, useCallback } from 'react'\nimport { toast } from 'sonner'\n\nimport type { DocumentDrawerContextType } from '../DocumentDrawer/Provider.js'\n\nimport { useConfig } from '../../providers/Config/index.js'\nimport { useDocumentTitle } from '../../providers/DocumentTitle/index.js'\nimport { useRouter } from '../../providers/RouterAdapter/index.js'\nimport { useRouteTransition } from '../../providers/RouteTransition/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport { requests } from '../../utilities/api.js'\nimport { Button } from '../Button/index.js'\nimport { ConfirmationModal } from '../ConfirmationModal/index.js'\nimport { Translation } from '../Translation/index.js'\n\nexport type Props = {\n  readonly buttonId?: string\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n  readonly id?: string\n  readonly onDelete?: DocumentDrawerContextType['onDelete']\n  readonly redirectAfterDelete?: boolean\n  readonly singularLabel: SanitizedCollectionConfig['labels']['singular']\n  readonly title?: string\n}\n\nexport const PermanentlyDeleteButton: React.FC<Props> = (props) => {\n  const {\n    id,\n    buttonId,\n    collectionSlug,\n    onDelete,\n    redirectAfterDelete = true,\n    singularLabel,\n    title: titleFromProps,\n  } = props\n\n  const {\n    config: {\n      routes: { admin: adminRoute, api },\n      serverURL,\n    },\n    getEntityConfig,\n  } = useConfig()\n\n  const collectionConfig = getEntityConfig({ collectionSlug })\n  const router = useRouter()\n  const { i18n, t } = useTranslation()\n  const { title } = useDocumentTitle()\n  const { startRouteTransition } = useRouteTransition()\n  const { openModal } = useModal()\n\n  const modalSlug = `perma-delete-${id}`\n\n  const addDefaultError = useCallback(() => {\n    toast.error(t('error:deletingTitle', { title }))\n  }, [t, title])\n\n  const handleDelete = useCallback(async () => {\n    try {\n      const url = formatAdminURL({\n        apiRoute: api,\n        path: `/${collectionSlug}${qs.stringify(\n          {\n            trash: true,\n            where: {\n              and: [{ id: { equals: id } }, { deletedAt: { exists: true } }],\n            },\n          },\n          {\n            addQueryPrefix: true,\n          },\n        )}`,\n      })\n\n      const res = await requests.delete(url, {\n        headers: {\n          'Accept-Language': i18n.language,\n          'Content-Type': 'application/json',\n        },\n      })\n\n      const json = await res.json()\n\n      if (res.status < 400) {\n        toast.success(\n          t('general:titleDeleted', {\n            label: getTranslation(singularLabel, i18n),\n            title,\n          }) || json.message,\n        )\n\n        if (redirectAfterDelete) {\n          return startRouteTransition(() =>\n            router.push(\n              formatAdminURL({\n                adminRoute,\n                path: `/collections/${collectionSlug}/trash`,\n                serverURL,\n              }),\n            ),\n          )\n        }\n\n        if (typeof onDelete === 'function') {\n          await onDelete({ id, collectionConfig })\n        }\n\n        return\n      }\n\n      if (json.errors) {\n        json.errors.forEach((error) => toast.error(error.message))\n      } else {\n        addDefaultError()\n      }\n    } catch (_err) {\n      addDefaultError()\n    }\n  }, [\n    serverURL,\n    api,\n    collectionSlug,\n    id,\n    t,\n    singularLabel,\n    addDefaultError,\n    i18n,\n    title,\n    router,\n    adminRoute,\n    redirectAfterDelete,\n    onDelete,\n    collectionConfig,\n    startRouteTransition,\n  ])\n\n  if (id) {\n    return (\n      <Fragment>\n        <Button\n          buttonStyle=\"secondary\"\n          id={buttonId}\n          onClick={() => {\n            openModal(modalSlug)\n          }}\n        >\n          {t('general:permanentlyDelete')}\n        </Button>\n        <ConfirmationModal\n          body={\n            <Translation\n              elements={{\n                '1': ({ children }) => <strong>{children}</strong>,\n              }}\n              i18nKey=\"general:aboutToPermanentlyDelete\"\n              t={t}\n              variables={{\n                label: getTranslation(singularLabel, i18n),\n                title: titleFromProps || title || id,\n              }}\n            />\n          }\n          confirmingLabel={t('general:deleting')}\n          heading={t('general:confirmDeletion')}\n          modalSlug={modalSlug}\n          onConfirm={handleDelete}\n        />\n      </Fragment>\n    )\n  }\n\n  return null\n}\n"],"mappings":"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","ignoreList":[]}

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(--color-bg-secondary);
+    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":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AAGA,OAAOC,KAAA,MAAW;AAkClB,SAASC,oBAAoB,QAAQ;AACrC,OAAO;AAEP,MAAMC,SAAA,GAAY;AAElB,MAAMC,aAAA,GAAqCC,KAAA;EAAA,MAAAC,CAAA,GAAAN,EAAA;EACzC;IAAAO,EAAA;IAAAC;EAAA,IAA0BH,KAAA;EAAA,IAAAI,EAAA;EAAA,IAAAH,CAAA,QAAAC,EAAA;IAEgEE,EAAA;MAAAF;IAAA;IAE1FD,CAAA,MAAAC,EAAA;IAAAD,CAAA,MAAAG,EAAA;EAAA;IAAAA,EAAA,GAAAH,CAAA;EAAA;EAFA;IAAAI,UAAA;IAAAC,UAAA;IAAAC,SAAA;IAAAC,UAAA;IAAAC;EAAA,IAAqEZ,oBAAA,CAAqBO,EAE1F;EAKgB,MAAAM,EAAA,GAAAJ,UAAA,IAAc,GAAAR,SAAA,eAA2B;EAAA,IAAAa,EAAA;EAAA,IAAAV,CAAA,QAAAE,SAAA,IAAAF,CAAA,QAAAS,EAAA;IAA1CC,EAAA,IAACD,EAAyC,EAAEP,SAAA,EAAAS,MAAA,CAAAC,OAAkB;IAAAZ,CAAA,MAAAE,SAAA;IAAAF,CAAA,MAAAS,EAAA;IAAAT,CAAA,MAAAU,EAAA;EAAA;IAAAA,EAAA,GAAAV,CAAA;EAAA;EAA9D,MAAAa,EAAA,GAAAH,EAA8D,CAAAI,IAAA,CAAc;EAAA,IAAAC,EAAA;EAAA,IAAAf,CAAA,QAAAI,UAAA,IAAAJ,CAAA,QAAAM,SAAA,IAAAN,CAAA,QAAAD,KAAA,IAAAC,CAAA,QAAAO,UAAA,IAAAP,CAAA,QAAAa,EAAA,IAAAb,CAAA,SAAAQ,SAAA;IAFzFO,EAAA,GAAAC,IAAA,CAAAC,UAAA;MAAA,GACMlB,KAAK;MAAAG,SAAA,EACEW,EAA4E;MAAAK,YAAA;QAAA,GAElFZ,SAAS;QAAA,GACTF,UAAU;QAAAe,GAAA,EACRZ,UAAA;QAAAa,KAAA;UAAAZ;QAAA;MAAA;IAAA,C;;;;;;;;;;;SANTO,E;CAaJ;AAEA,MAAME,UAAA,GAAmClB,KAAA;EACvC,MAAM;IACJE,EAAE;IACFoB,SAAA,GAAY,OAAO;IACnB,gBAAgBC,WAAW;IAC3B,iBAAiBC,YAAY;IAC7B,iBAAiBC,YAAY;IAC7B,cAAcC,SAAS;IACvBC,QAAQ;IACRxB,SAAS;IACTyB,SAAS;IACTT,YAAY;IACZU,IAAI;IACJC,SAAA,GAAY,OAAO;IACnBC,OAAO;IACPC,IAAA,GAAO;EAAQ,CAChB,GAAGhC,KAAA;EAEJ,MAAMiC,OAAA,GAAU,CACdnC,SAAA,EACA,GAAGA,SAAA,WAAoBgC,SAAA,EAAW,EAClC,GAAGhC,SAAA,UAAmBkC,IAAA,EAAM,EAC5B7B,SAAA,IAAaA,SAAA,EACb0B,IAAA,IAAQ,GAAG/B,SAAA,YAAqB,EAChC+B,IAAA,IAAQ,GAAG/B,SAAA,gBAAyBwB,SAAA,EAAW,EAC/CM,SAAA,IAAa,GAAG9B,SAAA,aAAsB,EACtCiC,OAAA,IAAW,GAAGjC,SAAA,WAAoB,CACnC,CACEc,MAAM,CAACC,OAAA,EACPE,IAAI,CAAC;EAER,oBACEmB,KAAA,CAAC;IACE,GAAGf,YAAY;IAChB,gBAAcI,WAAA;IACd,iBAAeC,YAAA;IACf,iBAAeC,YAAA;IACf,cAAYC,SAAA;IACZvB,SAAA,EAAW8B,OAAA;IACX/B,EAAA,EAAIA,EAAA;4BAEJe,IAAA,CAAC;MAAKd,SAAA,EAAW,GAAGL,SAAA,SAAkB;gBAAG6B;QACxCd,OAAA,CAAQgB,IAAA,kBAASZ,IAAA,CAAC;MAAKd,SAAA,EAAW,GAAGL,SAAA,QAAiB;gBAAG+B;;;AAGhE;AAEA,OAAO,MAAMM,IAAA,GAA6BnC,KAAA;EACxC,MAAM;IAAE4B;EAAS,CAAE,GAAG5B,KAAA;EAEtB,IAAI4B,SAAA,EAAW;IACb,oBAAOX,IAAA,CAAClB,aAAA;MAAe,GAAGC;;EAC5B;EACA,oBAAOiB,IAAA,CAACC,UAAA;IAAY,GAAGlB;;AACzB","ignoreList":[]}

package/dist/elements/PillSelector/index.css

@@ -0,0 +1,33 @@
+@layer payload-default {
+  .pill-selector {
+    display: flex;
+    flex-wrap: wrap;
+    background: var(--color-bg-secondary);
+    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