@purpurds/dismissable-chip-group 0.0.1

package/dist/LICENSE.txt

@@ -0,0 +1,45 @@
+Name: @purpurds/heading
+Version: 7.0.0
+License: AGPL-3.0-only
+Private: false
+
+---
+
+Name: classnames
+Version: 2.5.1
+License: MIT
+Private: false
+Description: A simple utility for conditionally joining classNames together
+Repository: git+https://github.com/JedWatson/classnames.git
+Author: Jed Watson
+License Copyright:
+===
+
+The MIT License (MIT)
+
+Copyright (c) 2018 Jed Watson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+---
+
+Name: @purpurds/icon
+Version: 7.0.0
+License: AGPL-3.0-only
+Private: false

package/dist/dismissable-chip-group-item.d.ts

@@ -0,0 +1,14 @@
+import { default as React, ReactNode } from 'react';
+
+export type DismissableChipGroupItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    ["aria-label"]: string;
+    ["data-testid"]?: string;
+    children: ReactNode;
+    id?: string;
+    onDismiss?: (id?: string) => void;
+};
+export declare const DismissableChipGroupItem: {
+    ({ children, id, onDismiss, disabled, ...props }: DismissableChipGroupItemProps): React.JSX.Element;
+    displayName: string;
+};
+//# sourceMappingURL=dismissable-chip-group-item.d.ts.map

package/dist/dismissable-chip-group-item.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dismissable-chip-group-item.d.ts","sourceRoot":"","sources":["../src/dismissable-chip-group-item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAE,MAAM,OAAO,CAAC;AAOrD,MAAM,MAAM,6BAA6B,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAC1F,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC;IACvB,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CACnC,CAAC;AAIF,eAAO,MAAM,wBAAwB;sDAMlC,6BAA6B;;CA0B/B,CAAC"}

package/dist/dismissable-chip-group.cjs.js

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),q=require("react");function I(i){return i&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i}var f={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/var g;function T(){return g||(g=1,function(i){(function(){var u={}.hasOwnProperty;function t(){for(var r="",e=0;e<arguments.length;e++){var n=arguments[e];n&&(r=s(r,p(n)))}return r}function p(r){if(typeof r=="string"||typeof r=="number")return r;if(typeof r!="object")return"";if(Array.isArray(r))return t.apply(null,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var e="";for(var n in r)u.call(r,n)&&r[n]&&(e=s(e,n));return e}function s(r,e){return e?r?r+" "+e:r+e:r}i.exports?(t.default=t,i.exports=t):window.classNames=t})()}(f)),f.exports}var L=T();const P=I(L),o={"purpur-heading":"_purpur-heading_k9fhq_1","purpur-heading--hyphens":"_purpur-heading--hyphens_k9fhq_8","purpur-heading--negative":"_purpur-heading--negative_k9fhq_11","purpur-heading--subsection-100":"_purpur-heading--subsection-100_k9fhq_14","purpur-heading--title-100":"_purpur-heading--title-100_k9fhq_20","purpur-heading--title-200":"_purpur-heading--title-200_k9fhq_26","purpur-heading--title-300":"_purpur-heading--title-300_k9fhq_32","purpur-heading--title-400":"_purpur-heading--title-400_k9fhq_38","purpur-heading--title-500":"_purpur-heading--title-500_k9fhq_44","purpur-heading--title-600":"_purpur-heading--title-600_k9fhq_50","purpur-heading--title-700":"_purpur-heading--title-700_k9fhq_56","purpur-heading--display-25":"_purpur-heading--display-25_k9fhq_62","purpur-heading--display-50":"_purpur-heading--display-50_k9fhq_68","purpur-heading--display-100":"_purpur-heading--display-100_k9fhq_74","purpur-heading--display-200":"_purpur-heading--display-200_k9fhq_80"},A={TITLE100:"title-100"},l="purpur-heading",$=({children:i,className:u="",enableHyphenation:t=!1,negative:p=!1,tag:s,variant:r=A.TITLE100,...e})=>{const n=s,C=P([u,o[l],o[`${l}--${r}`],{[o[`${l}--hyphens`]]:t,[o[`${l}--negative`]]:p}]);return a.jsx(n,{className:C,...e,children:i})};$.displayName="Heading";function M(i){return i&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i}var c={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/var m;function E(){return m||(m=1,function(i){(function(){var u={}.hasOwnProperty;function t(){for(var r="",e=0;e<arguments.length;e++){var n=arguments[e];n&&(r=s(r,p.call(this,n)))}return r}function p(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return t.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var e="";for(var n in r)u.call(r,n)&&r[n]&&(e=s(e,this&&this[n]||n));return e}function s(r,e){return e?r?r+" "+e:r+e:r}i.exports?(t.default=t,i.exports=t):window.classNames=t})()}(c)),c.exports}var G=E();const j=M(G),N={"purpur-dismissable-chip-group":"_purpur-dismissable-chip-group_15nn8_1","purpur-dismissable-chip-group__container":"_purpur-dismissable-chip-group__container_15nn8_7","purpur-dismissable-chip-group__container--full-width":"_purpur-dismissable-chip-group__container--full-width_15nn8_14","purpur-dismissable-chip-group-item-wrapper":"_purpur-dismissable-chip-group-item-wrapper_15nn8_17","purpur-dismissable-chip-group-item":"_purpur-dismissable-chip-group-item_15nn8_17","purpur-dismissable-chip-group-item--disabled":"_purpur-dismissable-chip-group-item--disabled_15nn8_43"};function B(i){return i&&i.__esModule&&Object.prototype.hasOwnProperty.call(i,"default")?i.default:i}var v={exports:{}};/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/var y;function D(){return y||(y=1,function(i){(function(){var u={}.hasOwnProperty;function t(){for(var r="",e=0;e<arguments.length;e++){var n=arguments[e];n&&(r=s(r,p.call(this,n)))}return r}function p(r){if(typeof r=="string"||typeof r=="number")return this&&this[r]||r;if(typeof r!="object")return"";if(Array.isArray(r))return t.apply(this,r);if(r.toString!==Object.prototype.toString&&!r.toString.toString().includes("[native code]"))return r.toString();var e="";for(var n in r)u.call(r,n)&&r[n]&&(e=s(e,this&&this[n]||n));return e}function s(r,e){return e?r?r+" "+e:r+e:r}i.exports?(t.default=t,i.exports=t):window.classNames=t})()}(v)),v.exports}var H=D();const z=B(H),R={"purpur-icon":"_purpur-icon_8u1lq_1","purpur-icon--xxs":"_purpur-icon--xxs_8u1lq_4","purpur-icon--xs":"_purpur-icon--xs_8u1lq_8","purpur-icon--sm":"_purpur-icon--sm_8u1lq_12","purpur-icon--md":"_purpur-icon--md_8u1lq_16","purpur-icon--lg":"_purpur-icon--lg_8u1lq_20","purpur-icon--xl":"_purpur-icon--xl_8u1lq_24"},F=z.bind(R),b="purpur-icon",V="md",Z=i=>i.filter(u=>Object.keys(u).length>=1).map(u=>`${u.name}="${u.value}"`).join(" "),J=({content:i="",title:u}={})=>{const t=[{name:"xmlns",value:"http://www.w3.org/2000/svg"},{name:"fill",value:"currentColor"},{name:"viewBox",value:"0 0 24 24"},u?{name:"role",value:"img"}:{name:"aria-hidden",value:"true"}],p=u?`<title>${u}</title>`:"";return`<svg ${Z(t)}>${p}${i}</svg>`},K=i=>i.replace(/<(\/?)svg([^>]*)>/g,"").trim(),S=({["data-testid"]:i,svg:u,allyTitle:t,className:p,size:s=V,...r})=>{const e=J({content:K(u.svg),title:t}),n=F(p,b,`${b}--${s}`);return a.jsx("span",{className:n,"data-testid":i,dangerouslySetInnerHTML:{__html:e},...r})};S.displayName="Icon";const Q={name:"close",svg:'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M4.864 4.864a.9.9 0 0 1 1.273 0L12 10.727l5.864-5.863a.9.9 0 0 1 1.272 1.272L13.273 12l5.863 5.864a.9.9 0 1 1-1.272 1.272L12 13.273l-5.863 5.863a.9.9 0 0 1-1.273-1.272L10.727 12 4.864 6.136a.9.9 0 0 1 0-1.272Z" clip-rule="evenodd"/></svg>',keywords:["close"],category:"utility"},k=i=>a.jsx(S,{...i,svg:Q});k.displayName="IconClose";const x=j.bind(N),d="purpur-dismissable-chip-group-item",O=({children:i,id:u,onDismiss:t,disabled:p,...s})=>{const r=e=>{p?e.preventDefault():t==null||t(u)};return a.jsx("li",{className:x(`${d}-wrapper`),children:q.createElement("button",{...s,className:x(`${d}`,{[`${d}--disabled`]:p}),key:u,disabled:p,"aria-disabled":p,onClick:r},i,a.jsx(k,{size:"sm"}))},u)};O.displayName="DismissableChipGroupItem";const w=j.bind(N),h="purpur-dismissable-chip-group",_=({children:i,className:u,fullWidth:t=!1,title:p,titleTag:s,...r})=>{const e=q.useId(),n=w([u,h]);return a.jsxs("div",{...r,"aria-labelledby":p?`${e}-label`:void 0,className:n,role:"group",children:[p&&a.jsx($,{tag:s??"h2",variant:"subsection-100",children:p}),a.jsx("ul",{"data-testid":"dismissable-chip-group-container",className:w(`${h}__container`,{[`${h}__container--full-width`]:t}),"aria-live":"polite","aria-relevant":"additions removals",children:i})]})};_.Item=O;_.displayName="DismissableChipGroup";exports.DismissableChipGroup=_;
+//# sourceMappingURL=dismissable-chip-group.cjs.js.map

package/dist/dismissable-chip-group.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dismissable-chip-group.cjs.js","sources":["../../heading/dist/heading.es.js","../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../../icon/dist/icon-BqK8slmm.mjs","../../icon/dist/components/close.es.js","../src/dismissable-chip-group-item.tsx","../src/dismissable-chip-group.tsx"],"sourcesContent":["import { jsx as _ } from \"react/jsx-runtime\";\nfunction f(t) {\n  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, \"default\") ? t.default : t;\n}\nvar l = { exports: {} };\n/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\nvar d;\nfunction g() {\n  return d || (d = 1, function(t) {\n    (function() {\n      var s = {}.hasOwnProperty;\n      function n() {\n        for (var e = \"\", r = 0; r < arguments.length; r++) {\n          var i = arguments[r];\n          i && (e = p(e, h(i)));\n        }\n        return e;\n      }\n      function h(e) {\n        if (typeof e == \"string\" || typeof e == \"number\")\n          return e;\n        if (typeof e != \"object\")\n          return \"\";\n        if (Array.isArray(e))\n          return n.apply(null, e);\n        if (e.toString !== Object.prototype.toString && !e.toString.toString().includes(\"[native code]\"))\n          return e.toString();\n        var r = \"\";\n        for (var i in e)\n          s.call(e, i) && e[i] && (r = p(r, i));\n        return r;\n      }\n      function p(e, r) {\n        return r ? e ? e + \" \" + r : e + r : e;\n      }\n      t.exports ? (n.default = n, t.exports = n) : window.classNames = n;\n    })();\n  }(l)), l.exports;\n}\nvar c = g();\nconst y = /* @__PURE__ */ f(c), u = {\n  \"purpur-heading\": \"_purpur-heading_k9fhq_1\",\n  \"purpur-heading--hyphens\": \"_purpur-heading--hyphens_k9fhq_8\",\n  \"purpur-heading--negative\": \"_purpur-heading--negative_k9fhq_11\",\n  \"purpur-heading--subsection-100\": \"_purpur-heading--subsection-100_k9fhq_14\",\n  \"purpur-heading--title-100\": \"_purpur-heading--title-100_k9fhq_20\",\n  \"purpur-heading--title-200\": \"_purpur-heading--title-200_k9fhq_26\",\n  \"purpur-heading--title-300\": \"_purpur-heading--title-300_k9fhq_32\",\n  \"purpur-heading--title-400\": \"_purpur-heading--title-400_k9fhq_38\",\n  \"purpur-heading--title-500\": \"_purpur-heading--title-500_k9fhq_44\",\n  \"purpur-heading--title-600\": \"_purpur-heading--title-600_k9fhq_50\",\n  \"purpur-heading--title-700\": \"_purpur-heading--title-700_k9fhq_56\",\n  \"purpur-heading--display-25\": \"_purpur-heading--display-25_k9fhq_62\",\n  \"purpur-heading--display-50\": \"_purpur-heading--display-50_k9fhq_68\",\n  \"purpur-heading--display-100\": \"_purpur-heading--display-100_k9fhq_74\",\n  \"purpur-heading--display-200\": \"_purpur-heading--display-200_k9fhq_80\"\n}, k = {\n  H1: \"h1\",\n  H2: \"h2\",\n  H3: \"h3\",\n  H4: \"h4\",\n  H5: \"h5\",\n  H6: \"h6\"\n}, T = {\n  TITLE100: \"title-100\",\n  TITLE200: \"title-200\",\n  TITLE300: \"title-300\",\n  TITLE400: \"title-400\",\n  TITLE500: \"title-500\",\n  TITLE600: \"title-600\",\n  TITLE700: \"title-700\",\n  SUBSECTION100: \"subsection-100\"\n}, I = {\n  DISPLAY25: \"display-25\",\n  DISPLAY50: \"display-50\",\n  DISPLAY100: \"display-100\",\n  DISPLAY200: \"display-200\"\n}, a = \"purpur-heading\", q = ({\n  children: t,\n  className: s = \"\",\n  enableHyphenation: n = !1,\n  negative: h = !1,\n  tag: p,\n  variant: e = T.TITLE100,\n  ...r\n}) => {\n  const i = p, o = y([\n    s,\n    u[a],\n    u[`${a}--${e}`],\n    {\n      [u[`${a}--hyphens`]]: n,\n      [u[`${a}--negative`]]: h\n    }\n  ]);\n  return /* @__PURE__ */ _(i, { className: o, ...r, children: t });\n};\nq.displayName = \"Heading\";\nexport {\n  I as DisplayVariant,\n  q as Heading,\n  k as HeadingTag,\n  T as TitleVariant\n};\n//# sourceMappingURL=heading.es.js.map\n","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import { jsx as a } from \"react/jsx-runtime\";\nfunction f(r) {\n  return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, \"default\") ? r.default : r;\n}\nvar c = { exports: {} };\n/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\nvar p;\nfunction m() {\n  return p || (p = 1, function(r) {\n    (function() {\n      var e = {}.hasOwnProperty;\n      function o() {\n        for (var t = \"\", n = 0; n < arguments.length; n++) {\n          var s = arguments[n];\n          s && (t = i(t, u.call(this, s)));\n        }\n        return t;\n      }\n      function u(t) {\n        if (typeof t == \"string\" || typeof t == \"number\")\n          return this && this[t] || t;\n        if (typeof t != \"object\")\n          return \"\";\n        if (Array.isArray(t))\n          return o.apply(this, t);\n        if (t.toString !== Object.prototype.toString && !t.toString.toString().includes(\"[native code]\"))\n          return t.toString();\n        var n = \"\";\n        for (var s in t)\n          e.call(t, s) && t[s] && (n = i(n, this && this[s] || s));\n        return n;\n      }\n      function i(t, n) {\n        return n ? t ? t + \" \" + n : t + n : t;\n      }\n      r.exports ? (o.default = o, r.exports = o) : window.classNames = o;\n    })();\n  }(c)), c.exports;\n}\nvar _ = m();\nconst d = /* @__PURE__ */ f(_), v = {\n  \"purpur-icon\": \"_purpur-icon_8u1lq_1\",\n  \"purpur-icon--xxs\": \"_purpur-icon--xxs_8u1lq_4\",\n  \"purpur-icon--xs\": \"_purpur-icon--xs_8u1lq_8\",\n  \"purpur-icon--sm\": \"_purpur-icon--sm_8u1lq_12\",\n  \"purpur-icon--md\": \"_purpur-icon--md_8u1lq_16\",\n  \"purpur-icon--lg\": \"_purpur-icon--lg_8u1lq_20\",\n  \"purpur-icon--xl\": \"_purpur-icon--xl_8u1lq_24\"\n}, g = d.bind(v), l = \"purpur-icon\", x = \"md\", h = (r) => r.filter((e) => Object.keys(e).length >= 1).map((e) => `${e.name}=\"${e.value}\"`).join(\" \"), y = ({ content: r = \"\", title: e } = {}) => {\n  const o = [\n    { name: \"xmlns\", value: \"http://www.w3.org/2000/svg\" },\n    { name: \"fill\", value: \"currentColor\" },\n    { name: \"viewBox\", value: \"0 0 24 24\" },\n    e ? { name: \"role\", value: \"img\" } : { name: \"aria-hidden\", value: \"true\" }\n  ], u = e ? `<title>${e}</title>` : \"\";\n  return `<svg ${h(o)}>${u}${r}</svg>`;\n}, S = (r) => r.replace(/<(\\/?)svg([^>]*)>/g, \"\").trim(), b = ({\n  [\"data-testid\"]: r,\n  svg: e,\n  allyTitle: o,\n  className: u,\n  size: i = x,\n  ...t\n}) => {\n  const n = y({\n    content: S(e.svg),\n    title: o\n  }), s = g(u, l, `${l}--${i}`);\n  return /* @__PURE__ */ a(\n    \"span\",\n    {\n      className: s,\n      \"data-testid\": r,\n      dangerouslySetInnerHTML: { __html: n },\n      ...t\n    }\n  );\n};\nb.displayName = \"Icon\";\nexport {\n  b as I\n};\n//# sourceMappingURL=icon-BqK8slmm.mjs.map\n","import { jsx as l } from \"react/jsx-runtime\";\nimport { I as e } from \"../icon-BqK8slmm.mjs\";\nconst s = {\n  name: \"close\",\n  svg: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M4.864 4.864a.9.9 0 0 1 1.273 0L12 10.727l5.864-5.863a.9.9 0 0 1 1.272 1.272L13.273 12l5.863 5.864a.9.9 0 1 1-1.272 1.272L12 13.273l-5.863 5.863a.9.9 0 0 1-1.273-1.272L10.727 12 4.864 6.136a.9.9 0 0 1 0-1.272Z\" clip-rule=\"evenodd\"/></svg>',\n  keywords: [\"close\"],\n  category: \"utility\"\n}, r = (o) => /* @__PURE__ */ l(e, { ...o, svg: s });\nr.displayName = \"IconClose\";\nexport {\n  r as IconClose\n};\n//# sourceMappingURL=close.es.js.map\n","import React, { MouseEvent, ReactNode } from \"react\";\nimport { IconClose } from \"@purpurds/icon/close\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./dismissable-chip-group.module.scss\";\nconst cx = c.bind(styles);\n\nexport type DismissableChipGroupItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  [\"aria-label\"]: string;\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  id?: string;\n  onDismiss?: (id?: string) => void;\n};\n\nconst rootClassName = \"purpur-dismissable-chip-group-item\";\n\nexport const DismissableChipGroupItem = ({\n  children,\n  id,\n  onDismiss,\n  disabled,\n  ...props\n}: DismissableChipGroupItemProps) => {\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (disabled) {\n      e.preventDefault();\n    } else {\n      onDismiss?.(id);\n    }\n  };\n\n  return (\n    <li key={id} className={cx(`${rootClassName}-wrapper`)}>\n      <button\n        {...props}\n        className={cx(`${rootClassName}`, {\n          [`${rootClassName}--disabled`]: disabled,\n        })}\n        key={id}\n        disabled={disabled}\n        aria-disabled={disabled}\n        onClick={handleClick}\n      >\n        {children}\n        <IconClose size=\"sm\" />\n      </button>\n    </li>\n  );\n};\n\nDismissableChipGroupItem.displayName = \"DismissableChipGroupItem\";\n","import React, { ReactNode, useId } from \"react\";\nimport { Heading, HeadingTagType } from \"@purpurds/heading\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./dismissable-chip-group.module.scss\";\nimport { DismissableChipGroupItem } from \"./dismissable-chip-group-item\";\nconst cx = c.bind(styles);\n\nexport type DismissableChipGroupProps = {\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  className?: string;\n  fullWidth?: boolean;\n  title?: string;\n  titleTag?: HeadingTagType;\n};\n\nconst rootClassName = \"purpur-dismissable-chip-group\";\n\nexport const DismissableChipGroup = ({\n  children,\n  className,\n  fullWidth = false,\n  title,\n  titleTag,\n  ...props\n}: DismissableChipGroupProps) => {\n  const id = useId();\n  const classes = cx([className, rootClassName]);\n\n  return (\n    <div\n      {...props}\n      aria-labelledby={title ? `${id}-label` : undefined}\n      className={classes}\n      role=\"group\"\n    >\n      {title && (\n        <Heading tag={titleTag ?? \"h2\"} variant=\"subsection-100\">\n          {title}\n        </Heading>\n      )}\n      <ul\n        data-testid=\"dismissable-chip-group-container\"\n        className={cx(`${rootClassName}__container`, {\n          [`${rootClassName}__container--full-width`]: fullWidth,\n        })}\n        aria-live=\"polite\"\n        aria-relevant=\"additions removals\"\n      >\n        {children}\n      </ul>\n    </div>\n  );\n};\n\nDismissableChipGroup.Item = DismissableChipGroupItem;\n\nDismissableChipGroup.displayName = \"DismissableChipGroup\";\n"],"names":["f","t","l","d","g","s","n","e","r","i","p","h","c","y","u","T","a","q","o","_","hasOwn","classNames","classes","arg","appendClass","parseValue","key","value","newClass","module","m","v","x","S","b","cx","styles","rootClassName","DismissableChipGroupItem","children","id","onDismiss","disabled","props","handleClick","createElement","jsx","IconClose","DismissableChipGroup","className","fullWidth","title","titleTag","useId","jsxs","Heading"],"mappings":"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","x_google_ignoreList":[1]}

package/dist/dismissable-chip-group.d.ts

@@ -0,0 +1,20 @@
+import { default as React, ReactNode } from 'react';
+import { HeadingTagType } from '@purpurds/heading';
+
+export type DismissableChipGroupProps = {
+    ["data-testid"]?: string;
+    children: ReactNode;
+    className?: string;
+    fullWidth?: boolean;
+    title?: string;
+    titleTag?: HeadingTagType;
+};
+export declare const DismissableChipGroup: {
+    ({ children, className, fullWidth, title, titleTag, ...props }: DismissableChipGroupProps): React.JSX.Element;
+    Item: {
+        ({ children, id, onDismiss, disabled, ...props }: import('./dismissable-chip-group-item').DismissableChipGroupItemProps): React.JSX.Element;
+        displayName: string;
+    };
+    displayName: string;
+};
+//# sourceMappingURL=dismissable-chip-group.d.ts.map

package/dist/dismissable-chip-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dismissable-chip-group.d.ts","sourceRoot":"","sources":["../src/dismissable-chip-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAS,MAAM,OAAO,CAAC;AAChD,OAAO,EAAW,cAAc,EAAE,MAAM,mBAAmB,CAAC;AAO5D,MAAM,MAAM,yBAAyB,GAAG;IACtC,CAAC,aAAa,CAAC,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,cAAc,CAAC;CAC3B,CAAC;AAIF,eAAO,MAAM,oBAAoB;oEAO9B,yBAAyB;;;;;;CA4B3B,CAAC"}

package/dist/dismissable-chip-group.es.js

@@ -0,0 +1,291 @@
+import { jsx as s, jsxs as C } from "react/jsx-runtime";
+import { createElement as I, useId as L } from "react";
+function T(i) {
+  return i && i.__esModule && Object.prototype.hasOwnProperty.call(i, "default") ? i.default : i;
+}
+var _ = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+var f;
+function A() {
+  return f || (f = 1, function(i) {
+    (function() {
+      var u = {}.hasOwnProperty;
+      function t() {
+        for (var r = "", e = 0; e < arguments.length; e++) {
+          var n = arguments[e];
+          n && (r = a(r, p(n)));
+        }
+        return r;
+      }
+      function p(r) {
+        if (typeof r == "string" || typeof r == "number")
+          return r;
+        if (typeof r != "object")
+          return "";
+        if (Array.isArray(r))
+          return t.apply(null, r);
+        if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+          return r.toString();
+        var e = "";
+        for (var n in r)
+          u.call(r, n) && r[n] && (e = a(e, n));
+        return e;
+      }
+      function a(r, e) {
+        return e ? r ? r + " " + e : r + e : r;
+      }
+      i.exports ? (t.default = t, i.exports = t) : window.classNames = t;
+    })();
+  }(_)), _.exports;
+}
+var P = A();
+const E = /* @__PURE__ */ T(P), o = {
+  "purpur-heading": "_purpur-heading_k9fhq_1",
+  "purpur-heading--hyphens": "_purpur-heading--hyphens_k9fhq_8",
+  "purpur-heading--negative": "_purpur-heading--negative_k9fhq_11",
+  "purpur-heading--subsection-100": "_purpur-heading--subsection-100_k9fhq_14",
+  "purpur-heading--title-100": "_purpur-heading--title-100_k9fhq_20",
+  "purpur-heading--title-200": "_purpur-heading--title-200_k9fhq_26",
+  "purpur-heading--title-300": "_purpur-heading--title-300_k9fhq_32",
+  "purpur-heading--title-400": "_purpur-heading--title-400_k9fhq_38",
+  "purpur-heading--title-500": "_purpur-heading--title-500_k9fhq_44",
+  "purpur-heading--title-600": "_purpur-heading--title-600_k9fhq_50",
+  "purpur-heading--title-700": "_purpur-heading--title-700_k9fhq_56",
+  "purpur-heading--display-25": "_purpur-heading--display-25_k9fhq_62",
+  "purpur-heading--display-50": "_purpur-heading--display-50_k9fhq_68",
+  "purpur-heading--display-100": "_purpur-heading--display-100_k9fhq_74",
+  "purpur-heading--display-200": "_purpur-heading--display-200_k9fhq_80"
+}, M = {
+  TITLE100: "title-100"
+}, l = "purpur-heading", w = ({
+  children: i,
+  className: u = "",
+  enableHyphenation: t = !1,
+  negative: p = !1,
+  tag: a,
+  variant: r = M.TITLE100,
+  ...e
+}) => {
+  const n = a, O = E([
+    u,
+    o[l],
+    o[`${l}--${r}`],
+    {
+      [o[`${l}--hyphens`]]: t,
+      [o[`${l}--negative`]]: p
+    }
+  ]);
+  return /* @__PURE__ */ s(n, { className: O, ...e, children: i });
+};
+w.displayName = "Heading";
+function B(i) {
+  return i && i.__esModule && Object.prototype.hasOwnProperty.call(i, "default") ? i.default : i;
+}
+var c = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+var g;
+function G() {
+  return g || (g = 1, function(i) {
+    (function() {
+      var u = {}.hasOwnProperty;
+      function t() {
+        for (var r = "", e = 0; e < arguments.length; e++) {
+          var n = arguments[e];
+          n && (r = a(r, p.call(this, n)));
+        }
+        return r;
+      }
+      function p(r) {
+        if (typeof r == "string" || typeof r == "number")
+          return this && this[r] || r;
+        if (typeof r != "object")
+          return "";
+        if (Array.isArray(r))
+          return t.apply(this, r);
+        if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+          return r.toString();
+        var e = "";
+        for (var n in r)
+          u.call(r, n) && r[n] && (e = a(e, this && this[n] || n));
+        return e;
+      }
+      function a(r, e) {
+        return e ? r ? r + " " + e : r + e : r;
+      }
+      i.exports ? (t.default = t, i.exports = t) : window.classNames = t;
+    })();
+  }(c)), c.exports;
+}
+var H = G();
+const $ = /* @__PURE__ */ B(H), q = {
+  "purpur-dismissable-chip-group": "_purpur-dismissable-chip-group_15nn8_1",
+  "purpur-dismissable-chip-group__container": "_purpur-dismissable-chip-group__container_15nn8_7",
+  "purpur-dismissable-chip-group__container--full-width": "_purpur-dismissable-chip-group__container--full-width_15nn8_14",
+  "purpur-dismissable-chip-group-item-wrapper": "_purpur-dismissable-chip-group-item-wrapper_15nn8_17",
+  "purpur-dismissable-chip-group-item": "_purpur-dismissable-chip-group-item_15nn8_17",
+  "purpur-dismissable-chip-group-item--disabled": "_purpur-dismissable-chip-group-item--disabled_15nn8_43"
+};
+function z(i) {
+  return i && i.__esModule && Object.prototype.hasOwnProperty.call(i, "default") ? i.default : i;
+}
+var m = { exports: {} };
+/*!
+	Copyright (c) 2018 Jed Watson.
+	Licensed under the MIT License (MIT), see
+	http://jedwatson.github.io/classnames
+*/
+var v;
+function D() {
+  return v || (v = 1, function(i) {
+    (function() {
+      var u = {}.hasOwnProperty;
+      function t() {
+        for (var r = "", e = 0; e < arguments.length; e++) {
+          var n = arguments[e];
+          n && (r = a(r, p.call(this, n)));
+        }
+        return r;
+      }
+      function p(r) {
+        if (typeof r == "string" || typeof r == "number")
+          return this && this[r] || r;
+        if (typeof r != "object")
+          return "";
+        if (Array.isArray(r))
+          return t.apply(this, r);
+        if (r.toString !== Object.prototype.toString && !r.toString.toString().includes("[native code]"))
+          return r.toString();
+        var e = "";
+        for (var n in r)
+          u.call(r, n) && r[n] && (e = a(e, this && this[n] || n));
+        return e;
+      }
+      function a(r, e) {
+        return e ? r ? r + " " + e : r + e : r;
+      }
+      i.exports ? (t.default = t, i.exports = t) : window.classNames = t;
+    })();
+  }(m)), m.exports;
+}
+var F = D();
+const R = /* @__PURE__ */ z(F), V = {
+  "purpur-icon": "_purpur-icon_8u1lq_1",
+  "purpur-icon--xxs": "_purpur-icon--xxs_8u1lq_4",
+  "purpur-icon--xs": "_purpur-icon--xs_8u1lq_8",
+  "purpur-icon--sm": "_purpur-icon--sm_8u1lq_12",
+  "purpur-icon--md": "_purpur-icon--md_8u1lq_16",
+  "purpur-icon--lg": "_purpur-icon--lg_8u1lq_20",
+  "purpur-icon--xl": "_purpur-icon--xl_8u1lq_24"
+}, Z = R.bind(V), y = "purpur-icon", J = "md", K = (i) => i.filter((u) => Object.keys(u).length >= 1).map((u) => `${u.name}="${u.value}"`).join(" "), Q = ({ content: i = "", title: u } = {}) => {
+  const t = [
+    { name: "xmlns", value: "http://www.w3.org/2000/svg" },
+    { name: "fill", value: "currentColor" },
+    { name: "viewBox", value: "0 0 24 24" },
+    u ? { name: "role", value: "img" } : { name: "aria-hidden", value: "true" }
+  ], p = u ? `<title>${u}</title>` : "";
+  return `<svg ${K(t)}>${p}${i}</svg>`;
+}, U = (i) => i.replace(/<(\/?)svg([^>]*)>/g, "").trim(), N = ({
+  ["data-testid"]: i,
+  svg: u,
+  allyTitle: t,
+  className: p,
+  size: a = J,
+  ...r
+}) => {
+  const e = Q({
+    content: U(u.svg),
+    title: t
+  }), n = Z(p, y, `${y}--${a}`);
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      className: n,
+      "data-testid": i,
+      dangerouslySetInnerHTML: { __html: e },
+      ...r
+    }
+  );
+};
+N.displayName = "Icon";
+const W = {
+  name: "close",
+  svg: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M4.864 4.864a.9.9 0 0 1 1.273 0L12 10.727l5.864-5.863a.9.9 0 0 1 1.272 1.272L13.273 12l5.863 5.864a.9.9 0 1 1-1.272 1.272L12 13.273l-5.863 5.863a.9.9 0 0 1-1.273-1.272L10.727 12 4.864 6.136a.9.9 0 0 1 0-1.272Z" clip-rule="evenodd"/></svg>',
+  keywords: ["close"],
+  category: "utility"
+}, k = (i) => /* @__PURE__ */ s(N, { ...i, svg: W });
+k.displayName = "IconClose";
+const b = $.bind(q), d = "purpur-dismissable-chip-group-item", S = ({
+  children: i,
+  id: u,
+  onDismiss: t,
+  disabled: p,
+  ...a
+}) => {
+  const r = (e) => {
+    p ? e.preventDefault() : t == null || t(u);
+  };
+  return /* @__PURE__ */ s("li", { className: b(`${d}-wrapper`), children: /* @__PURE__ */ I(
+    "button",
+    {
+      ...a,
+      className: b(`${d}`, {
+        [`${d}--disabled`]: p
+      }),
+      key: u,
+      disabled: p,
+      "aria-disabled": p,
+      onClick: r
+    },
+    i,
+    /* @__PURE__ */ s(k, { size: "sm" })
+  ) }, u);
+};
+S.displayName = "DismissableChipGroupItem";
+const x = $.bind(q), h = "purpur-dismissable-chip-group", j = ({
+  children: i,
+  className: u,
+  fullWidth: t = !1,
+  title: p,
+  titleTag: a,
+  ...r
+}) => {
+  const e = L(), n = x([u, h]);
+  return /* @__PURE__ */ C(
+    "div",
+    {
+      ...r,
+      "aria-labelledby": p ? `${e}-label` : void 0,
+      className: n,
+      role: "group",
+      children: [
+        p && /* @__PURE__ */ s(w, { tag: a ?? "h2", variant: "subsection-100", children: p }),
+        /* @__PURE__ */ s(
+          "ul",
+          {
+            "data-testid": "dismissable-chip-group-container",
+            className: x(`${h}__container`, {
+              [`${h}__container--full-width`]: t
+            }),
+            "aria-live": "polite",
+            "aria-relevant": "additions removals",
+            children: i
+          }
+        )
+      ]
+    }
+  );
+};
+j.Item = S;
+j.displayName = "DismissableChipGroup";
+export {
+  j as DismissableChipGroup
+};
+//# sourceMappingURL=dismissable-chip-group.es.js.map

package/dist/dismissable-chip-group.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dismissable-chip-group.es.js","sources":["../../heading/dist/heading.es.js","../../../common/temp/node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/bind.js","../../icon/dist/icon-BqK8slmm.mjs","../../icon/dist/components/close.es.js","../src/dismissable-chip-group-item.tsx","../src/dismissable-chip-group.tsx"],"sourcesContent":["import { jsx as _ } from \"react/jsx-runtime\";\nfunction f(t) {\n  return t && t.__esModule && Object.prototype.hasOwnProperty.call(t, \"default\") ? t.default : t;\n}\nvar l = { exports: {} };\n/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\nvar d;\nfunction g() {\n  return d || (d = 1, function(t) {\n    (function() {\n      var s = {}.hasOwnProperty;\n      function n() {\n        for (var e = \"\", r = 0; r < arguments.length; r++) {\n          var i = arguments[r];\n          i && (e = p(e, h(i)));\n        }\n        return e;\n      }\n      function h(e) {\n        if (typeof e == \"string\" || typeof e == \"number\")\n          return e;\n        if (typeof e != \"object\")\n          return \"\";\n        if (Array.isArray(e))\n          return n.apply(null, e);\n        if (e.toString !== Object.prototype.toString && !e.toString.toString().includes(\"[native code]\"))\n          return e.toString();\n        var r = \"\";\n        for (var i in e)\n          s.call(e, i) && e[i] && (r = p(r, i));\n        return r;\n      }\n      function p(e, r) {\n        return r ? e ? e + \" \" + r : e + r : e;\n      }\n      t.exports ? (n.default = n, t.exports = n) : window.classNames = n;\n    })();\n  }(l)), l.exports;\n}\nvar c = g();\nconst y = /* @__PURE__ */ f(c), u = {\n  \"purpur-heading\": \"_purpur-heading_k9fhq_1\",\n  \"purpur-heading--hyphens\": \"_purpur-heading--hyphens_k9fhq_8\",\n  \"purpur-heading--negative\": \"_purpur-heading--negative_k9fhq_11\",\n  \"purpur-heading--subsection-100\": \"_purpur-heading--subsection-100_k9fhq_14\",\n  \"purpur-heading--title-100\": \"_purpur-heading--title-100_k9fhq_20\",\n  \"purpur-heading--title-200\": \"_purpur-heading--title-200_k9fhq_26\",\n  \"purpur-heading--title-300\": \"_purpur-heading--title-300_k9fhq_32\",\n  \"purpur-heading--title-400\": \"_purpur-heading--title-400_k9fhq_38\",\n  \"purpur-heading--title-500\": \"_purpur-heading--title-500_k9fhq_44\",\n  \"purpur-heading--title-600\": \"_purpur-heading--title-600_k9fhq_50\",\n  \"purpur-heading--title-700\": \"_purpur-heading--title-700_k9fhq_56\",\n  \"purpur-heading--display-25\": \"_purpur-heading--display-25_k9fhq_62\",\n  \"purpur-heading--display-50\": \"_purpur-heading--display-50_k9fhq_68\",\n  \"purpur-heading--display-100\": \"_purpur-heading--display-100_k9fhq_74\",\n  \"purpur-heading--display-200\": \"_purpur-heading--display-200_k9fhq_80\"\n}, k = {\n  H1: \"h1\",\n  H2: \"h2\",\n  H3: \"h3\",\n  H4: \"h4\",\n  H5: \"h5\",\n  H6: \"h6\"\n}, T = {\n  TITLE100: \"title-100\",\n  TITLE200: \"title-200\",\n  TITLE300: \"title-300\",\n  TITLE400: \"title-400\",\n  TITLE500: \"title-500\",\n  TITLE600: \"title-600\",\n  TITLE700: \"title-700\",\n  SUBSECTION100: \"subsection-100\"\n}, I = {\n  DISPLAY25: \"display-25\",\n  DISPLAY50: \"display-50\",\n  DISPLAY100: \"display-100\",\n  DISPLAY200: \"display-200\"\n}, a = \"purpur-heading\", q = ({\n  children: t,\n  className: s = \"\",\n  enableHyphenation: n = !1,\n  negative: h = !1,\n  tag: p,\n  variant: e = T.TITLE100,\n  ...r\n}) => {\n  const i = p, o = y([\n    s,\n    u[a],\n    u[`${a}--${e}`],\n    {\n      [u[`${a}--hyphens`]]: n,\n      [u[`${a}--negative`]]: h\n    }\n  ]);\n  return /* @__PURE__ */ _(i, { className: o, ...r, children: t });\n};\nq.displayName = \"Heading\";\nexport {\n  I as DisplayVariant,\n  q as Heading,\n  k as HeadingTag,\n  T as TitleVariant\n};\n//# sourceMappingURL=heading.es.js.map\n","/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\n/* global define */\n\n(function () {\n\t'use strict';\n\n\tvar hasOwn = {}.hasOwnProperty;\n\n\tfunction classNames () {\n\t\tvar classes = '';\n\n\t\tfor (var i = 0; i < arguments.length; i++) {\n\t\t\tvar arg = arguments[i];\n\t\t\tif (arg) {\n\t\t\t\tclasses = appendClass(classes, parseValue.call(this, arg));\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction parseValue (arg) {\n\t\tif (typeof arg === 'string' || typeof arg === 'number') {\n\t\t\treturn this && this[arg] || arg;\n\t\t}\n\n\t\tif (typeof arg !== 'object') {\n\t\t\treturn '';\n\t\t}\n\n\t\tif (Array.isArray(arg)) {\n\t\t\treturn classNames.apply(this, arg);\n\t\t}\n\n\t\tif (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {\n\t\t\treturn arg.toString();\n\t\t}\n\n\t\tvar classes = '';\n\n\t\tfor (var key in arg) {\n\t\t\tif (hasOwn.call(arg, key) && arg[key]) {\n\t\t\t\tclasses = appendClass(classes, this && this[key] || key);\n\t\t\t}\n\t\t}\n\n\t\treturn classes;\n\t}\n\n\tfunction appendClass (value, newClass) {\n\t\tif (!newClass) {\n\t\t\treturn value;\n\t\t}\n\t\n\t\tif (value) {\n\t\t\treturn value + ' ' + newClass;\n\t\t}\n\t\n\t\treturn value + newClass;\n\t}\n\n\tif (typeof module !== 'undefined' && module.exports) {\n\t\tclassNames.default = classNames;\n\t\tmodule.exports = classNames;\n\t} else if (typeof define === 'function' && typeof define.amd === 'object' && define.amd) {\n\t\t// register as 'classnames', consistent with npm package name\n\t\tdefine('classnames', [], function () {\n\t\t\treturn classNames;\n\t\t});\n\t} else {\n\t\twindow.classNames = classNames;\n\t}\n}());\n","import { jsx as a } from \"react/jsx-runtime\";\nfunction f(r) {\n  return r && r.__esModule && Object.prototype.hasOwnProperty.call(r, \"default\") ? r.default : r;\n}\nvar c = { exports: {} };\n/*!\n\tCopyright (c) 2018 Jed Watson.\n\tLicensed under the MIT License (MIT), see\n\thttp://jedwatson.github.io/classnames\n*/\nvar p;\nfunction m() {\n  return p || (p = 1, function(r) {\n    (function() {\n      var e = {}.hasOwnProperty;\n      function o() {\n        for (var t = \"\", n = 0; n < arguments.length; n++) {\n          var s = arguments[n];\n          s && (t = i(t, u.call(this, s)));\n        }\n        return t;\n      }\n      function u(t) {\n        if (typeof t == \"string\" || typeof t == \"number\")\n          return this && this[t] || t;\n        if (typeof t != \"object\")\n          return \"\";\n        if (Array.isArray(t))\n          return o.apply(this, t);\n        if (t.toString !== Object.prototype.toString && !t.toString.toString().includes(\"[native code]\"))\n          return t.toString();\n        var n = \"\";\n        for (var s in t)\n          e.call(t, s) && t[s] && (n = i(n, this && this[s] || s));\n        return n;\n      }\n      function i(t, n) {\n        return n ? t ? t + \" \" + n : t + n : t;\n      }\n      r.exports ? (o.default = o, r.exports = o) : window.classNames = o;\n    })();\n  }(c)), c.exports;\n}\nvar _ = m();\nconst d = /* @__PURE__ */ f(_), v = {\n  \"purpur-icon\": \"_purpur-icon_8u1lq_1\",\n  \"purpur-icon--xxs\": \"_purpur-icon--xxs_8u1lq_4\",\n  \"purpur-icon--xs\": \"_purpur-icon--xs_8u1lq_8\",\n  \"purpur-icon--sm\": \"_purpur-icon--sm_8u1lq_12\",\n  \"purpur-icon--md\": \"_purpur-icon--md_8u1lq_16\",\n  \"purpur-icon--lg\": \"_purpur-icon--lg_8u1lq_20\",\n  \"purpur-icon--xl\": \"_purpur-icon--xl_8u1lq_24\"\n}, g = d.bind(v), l = \"purpur-icon\", x = \"md\", h = (r) => r.filter((e) => Object.keys(e).length >= 1).map((e) => `${e.name}=\"${e.value}\"`).join(\" \"), y = ({ content: r = \"\", title: e } = {}) => {\n  const o = [\n    { name: \"xmlns\", value: \"http://www.w3.org/2000/svg\" },\n    { name: \"fill\", value: \"currentColor\" },\n    { name: \"viewBox\", value: \"0 0 24 24\" },\n    e ? { name: \"role\", value: \"img\" } : { name: \"aria-hidden\", value: \"true\" }\n  ], u = e ? `<title>${e}</title>` : \"\";\n  return `<svg ${h(o)}>${u}${r}</svg>`;\n}, S = (r) => r.replace(/<(\\/?)svg([^>]*)>/g, \"\").trim(), b = ({\n  [\"data-testid\"]: r,\n  svg: e,\n  allyTitle: o,\n  className: u,\n  size: i = x,\n  ...t\n}) => {\n  const n = y({\n    content: S(e.svg),\n    title: o\n  }), s = g(u, l, `${l}--${i}`);\n  return /* @__PURE__ */ a(\n    \"span\",\n    {\n      className: s,\n      \"data-testid\": r,\n      dangerouslySetInnerHTML: { __html: n },\n      ...t\n    }\n  );\n};\nb.displayName = \"Icon\";\nexport {\n  b as I\n};\n//# sourceMappingURL=icon-BqK8slmm.mjs.map\n","import { jsx as l } from \"react/jsx-runtime\";\nimport { I as e } from \"../icon-BqK8slmm.mjs\";\nconst s = {\n  name: \"close\",\n  svg: '<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"currentColor\"><path fill-rule=\"evenodd\" d=\"M4.864 4.864a.9.9 0 0 1 1.273 0L12 10.727l5.864-5.863a.9.9 0 0 1 1.272 1.272L13.273 12l5.863 5.864a.9.9 0 1 1-1.272 1.272L12 13.273l-5.863 5.863a.9.9 0 0 1-1.273-1.272L10.727 12 4.864 6.136a.9.9 0 0 1 0-1.272Z\" clip-rule=\"evenodd\"/></svg>',\n  keywords: [\"close\"],\n  category: \"utility\"\n}, r = (o) => /* @__PURE__ */ l(e, { ...o, svg: s });\nr.displayName = \"IconClose\";\nexport {\n  r as IconClose\n};\n//# sourceMappingURL=close.es.js.map\n","import React, { MouseEvent, ReactNode } from \"react\";\nimport { IconClose } from \"@purpurds/icon/close\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./dismissable-chip-group.module.scss\";\nconst cx = c.bind(styles);\n\nexport type DismissableChipGroupItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  [\"aria-label\"]: string;\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  id?: string;\n  onDismiss?: (id?: string) => void;\n};\n\nconst rootClassName = \"purpur-dismissable-chip-group-item\";\n\nexport const DismissableChipGroupItem = ({\n  children,\n  id,\n  onDismiss,\n  disabled,\n  ...props\n}: DismissableChipGroupItemProps) => {\n  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {\n    if (disabled) {\n      e.preventDefault();\n    } else {\n      onDismiss?.(id);\n    }\n  };\n\n  return (\n    <li key={id} className={cx(`${rootClassName}-wrapper`)}>\n      <button\n        {...props}\n        className={cx(`${rootClassName}`, {\n          [`${rootClassName}--disabled`]: disabled,\n        })}\n        key={id}\n        disabled={disabled}\n        aria-disabled={disabled}\n        onClick={handleClick}\n      >\n        {children}\n        <IconClose size=\"sm\" />\n      </button>\n    </li>\n  );\n};\n\nDismissableChipGroupItem.displayName = \"DismissableChipGroupItem\";\n","import React, { ReactNode, useId } from \"react\";\nimport { Heading, HeadingTagType } from \"@purpurds/heading\";\nimport c from \"classnames/bind\";\n\nimport styles from \"./dismissable-chip-group.module.scss\";\nimport { DismissableChipGroupItem } from \"./dismissable-chip-group-item\";\nconst cx = c.bind(styles);\n\nexport type DismissableChipGroupProps = {\n  [\"data-testid\"]?: string;\n  children: ReactNode;\n  className?: string;\n  fullWidth?: boolean;\n  title?: string;\n  titleTag?: HeadingTagType;\n};\n\nconst rootClassName = \"purpur-dismissable-chip-group\";\n\nexport const DismissableChipGroup = ({\n  children,\n  className,\n  fullWidth = false,\n  title,\n  titleTag,\n  ...props\n}: DismissableChipGroupProps) => {\n  const id = useId();\n  const classes = cx([className, rootClassName]);\n\n  return (\n    <div\n      {...props}\n      aria-labelledby={title ? `${id}-label` : undefined}\n      className={classes}\n      role=\"group\"\n    >\n      {title && (\n        <Heading tag={titleTag ?? \"h2\"} variant=\"subsection-100\">\n          {title}\n        </Heading>\n      )}\n      <ul\n        data-testid=\"dismissable-chip-group-container\"\n        className={cx(`${rootClassName}__container`, {\n          [`${rootClassName}__container--full-width`]: fullWidth,\n        })}\n        aria-live=\"polite\"\n        aria-relevant=\"additions removals\"\n      >\n        {children}\n      </ul>\n    </div>\n  );\n};\n\nDismissableChipGroup.Item = DismissableChipGroupItem;\n\nDismissableChipGroup.displayName = \"DismissableChipGroup\";\n"],"names":["f","t","l","d","g","s","n","e","r","i","p","h","c","y","u","T","a","q","o","_","hasOwn","classNames","classes","arg","appendClass","parseValue","key","value","newClass","module","m","v","x","S","b","cx","styles","rootClassName","DismissableChipGroupItem","children","id","onDismiss","disabled","props","handleClick","createElement","jsx","IconClose","DismissableChipGroup","className","fullWidth","title","titleTag","useId","jsxs","Heading"],"mappings":"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","x_google_ignoreList":[1]}

package/dist/metadata.js

@@ -0,0 +1,7 @@
+module.exports = {
+  "moduleName": "dismissable-chip-group",
+  "exports": [
+    "DismissableChipGroupProps",
+    "DismissableChipGroup"
+  ]
+};

package/dist/styles.css

@@ -0,0 +1 @@
+._purpur-dismissable-chip-group_15nn8_1{display:flex;flex-direction:column;gap:var(--purpur-spacing-150);align-items:flex-start}._purpur-dismissable-chip-group__container_15nn8_7{display:flex;flex-wrap:wrap;margin:0;padding:0;gap:var(--purpur-spacing-200)}._purpur-dismissable-chip-group__container--full-width_15nn8_14{width:100%}._purpur-dismissable-chip-group__container--full-width_15nn8_14 ._purpur-dismissable-chip-group-item-wrapper_15nn8_17{flex-grow:1}._purpur-dismissable-chip-group__container--full-width_15nn8_14 ._purpur-dismissable-chip-group-item_15nn8_17{width:100%}._purpur-dismissable-chip-group-item_15nn8_17{position:relative;display:inline-flex;justify-content:center;align-items:center;gap:var(--purpur-spacing-100);padding:calc(var(--purpur-spacing-10) * 10 - var(--purpur-border-width-xs)) calc(var(--purpur-spacing-200) - var(--purpur-border-width-xs));border:var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-primary);border-radius:var(--purpur-border-radius-md);background:var(--purpur-color-background-interactive-transparent);color:var(--purpur-color-text-interactive-primary);font-family:var(--purpur-typography-family-default);font-size:var(--purpur-typography-scale-100);line-height:var(--purpur-typography-line-height-loose);font-weight:var(--purpur-typography-weight-normal);list-style:none;cursor:pointer;transition:background var(--purpur-motion-duration-100) ease,color var(--purpur-motion-duration-100) ease,border-color var(--purpur-motion-duration-100) ease}._purpur-dismissable-chip-group-item--disabled_15nn8_43{border-color:var(--purpur-color-border-medium);color:var(--purpur-color-text-weak);cursor:not-allowed}._purpur-dismissable-chip-group-item_15nn8_17:hover:not(._purpur-dismissable-chip-group-item--disabled_15nn8_43){padding:calc(var(--purpur-spacing-10) * 10 - var(--purpur-border-width-sm)) calc(var(--purpur-spacing-200) - var(--purpur-border-width-sm));border-width:var(--purpur-border-width-sm);border-color:var(--purpur-color-border-interactive-primary-hover);background:var(--purpur-color-background-interactive-transparent-hover);color:var(--purpur-color-text-interactive-primary-hover)}._purpur-dismissable-chip-group-item_15nn8_17:active:not(._purpur-dismissable-chip-group-item--disabled_15nn8_43){border-color:var(--purpur-color-border-interactive-primary-active);background:var(--purpur-color-background-interactive-transparent-active);color:var(--purpur-color-text-interactive-primary-active)}._purpur-dismissable-chip-group-item_15nn8_17:focus{outline:0}._purpur-dismissable-chip-group-item_15nn8_17:focus:focus-visible:after{content:"";position:absolute;inset:calc(-1 * (var(--purpur-border-width-sm) * 2 + var(--purpur-border-width-xs)));border-radius:var(--purpur-spacing-150);border:var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus)}._purpur-dismissable-chip-group-item-wrapper_15nn8_17{list-style:none}

package/eslint.config.mjs

@@ -0,0 +1,2 @@
+import purpurCommon from "@purpurds/component-rig/eslint.config.mjs";
+export default purpurCommon;

package/package.json

@@ -0,0 +1,74 @@
+{
+  "name": "@purpurds/dismissable-chip-group",
+  "version": "0.0.1",
+  "license": "AGPL-3.0-only",
+  "main": "./dist/dismissable-chip-group.cjs.js",
+  "types": "./dist/dismissable-chip-group.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/dismissable-chip-group.cjs.js",
+      "types": "./dist/dismissable-chip-group.d.ts",
+      "default": "./dist/dismissable-chip-group.es.js"
+    },
+    "./styles": "./dist/styles.css",
+    "./metadata": "./dist/metadata.js"
+  },
+  "source": "src/dismissable-chip-group.tsx",
+  "dependencies": {
+    "classnames": "~2.5.0",
+    "@purpurds/tokens": "7.0.0",
+    "@purpurds/heading": "7.0.0",
+    "@purpurds/icon": "7.0.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "~1.10.0",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/react": "^8.6.4",
+    "@testing-library/dom": "~10.4.0",
+    "@testing-library/jest-dom": "~6.4.0",
+    "@testing-library/react": "~16.2.0",
+    "@types/node": "20.12.12",
+    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.0.10",
+    "eslint": "9.24.0",
+    "jsdom": "~22.1.0",
+    "lint-staged": "15.5.0",
+    "prettier": "~2.8.8",
+    "react-dom": "^19.0.0",
+    "react": "^19.0.0",
+    "storybook": "^8.6.4",
+    "typescript": "^5.6.3",
+    "vite": "^6.2.1",
+    "vitest": "^3.1.2",
+    "@purpurds/button": "7.0.0",
+    "@purpurds/component-rig": "1.0.0"
+  },
+  "peerDependencies": {
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
+  },
+  "scripts": {
+    "build:dev": "vite",
+    "build:watch": "vite build --watch",
+    "build": "vite build",
+    "ci:build": "rushx build",
+    "coverage": "vitest run --coverage",
+    "lint:fix": "eslint . --fix",
+    "lint": "lint-staged --no-stash 2>&1",
+    "sbdev": "rush sbdev",
+    "test:unit": "vitest run --passWithNoTests",
+    "test:watch": "vitest --watch",
+    "test": "rushx test:unit",
+    "typecheck": "tsc -p ./tsconfig.json"
+  }
+}

package/src/dismissable-chip-group-item.tsx

@@ -0,0 +1,52 @@
+import React, { MouseEvent, ReactNode } from "react";
+import { IconClose } from "@purpurds/icon/close";
+import c from "classnames/bind";
+
+import styles from "./dismissable-chip-group.module.scss";
+const cx = c.bind(styles);
+
+export type DismissableChipGroupItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  ["aria-label"]: string;
+  ["data-testid"]?: string;
+  children: ReactNode;
+  id?: string;
+  onDismiss?: (id?: string) => void;
+};
+
+const rootClassName = "purpur-dismissable-chip-group-item";
+
+export const DismissableChipGroupItem = ({
+  children,
+  id,
+  onDismiss,
+  disabled,
+  ...props
+}: DismissableChipGroupItemProps) => {
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    if (disabled) {
+      e.preventDefault();
+    } else {
+      onDismiss?.(id);
+    }
+  };
+
+  return (
+    <li key={id} className={cx(`${rootClassName}-wrapper`)}>
+      <button
+        {...props}
+        className={cx(`${rootClassName}`, {
+          [`${rootClassName}--disabled`]: disabled,
+        })}
+        key={id}
+        disabled={disabled}
+        aria-disabled={disabled}
+        onClick={handleClick}
+      >
+        {children}
+        <IconClose size="sm" />
+      </button>
+    </li>
+  );
+};
+
+DismissableChipGroupItem.displayName = "DismissableChipGroupItem";

package/src/dismissable-chip-group.module.scss

@@ -0,0 +1,88 @@
+.purpur-dismissable-chip-group {
+  $root: &;
+  display: flex;
+  flex-direction: column;
+  gap: var(--purpur-spacing-150);
+  align-items: flex-start;
+
+  &__container {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    gap: var(--purpur-spacing-200);
+
+    &--full-width {
+      width: 100%;
+  
+      #{$root}-item-wrapper {
+        flex-grow: 1;
+      }
+
+      #{$root}-item {
+        width: 100%;
+      }
+    }
+  }
+}
+
+.purpur-dismissable-chip-group-item {
+  $root: &;
+  position: relative;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--purpur-spacing-100);
+  padding: calc((var(--purpur-spacing-10) * 10) - var(--purpur-border-width-xs))
+    calc(var(--purpur-spacing-200) - var(--purpur-border-width-xs));
+  border: var(--purpur-border-width-xs) solid var(--purpur-color-border-interactive-primary);
+  border-radius: var(--purpur-border-radius-md);
+  background: var(--purpur-color-background-interactive-transparent);
+  color: var(--purpur-color-text-interactive-primary);
+  font-family: var(--purpur-typography-family-default);
+  font-size: var(--purpur-typography-scale-100);
+  line-height: var(--purpur-typography-line-height-loose);
+  font-weight: var(--purpur-typography-weight-normal);
+  list-style: none;
+  cursor: pointer;
+  transition: background var(--purpur-motion-duration-100) ease,
+    color var(--purpur-motion-duration-100) ease,
+    border-color var(--purpur-motion-duration-100) ease;
+
+  &--disabled {
+    border-color: var(--purpur-color-border-medium);
+    color: var(--purpur-color-text-weak);
+    cursor: not-allowed;
+  }
+
+  &:hover:not(#{$root}--disabled) {
+    padding: calc((var(--purpur-spacing-10) * 10) - var(--purpur-border-width-sm))
+      calc(var(--purpur-spacing-200) - var(--purpur-border-width-sm));
+    border-width: var(--purpur-border-width-sm);
+    border-color: var(--purpur-color-border-interactive-primary-hover);
+    background: var(--purpur-color-background-interactive-transparent-hover);
+    color: var(--purpur-color-text-interactive-primary-hover);
+  }
+
+  &:active:not(#{$root}--disabled) {
+    border-color: var(--purpur-color-border-interactive-primary-active);
+    background: var(--purpur-color-background-interactive-transparent-active);
+    color: var(--purpur-color-text-interactive-primary-active);
+  }
+
+  &:focus {
+    outline: 0;
+
+    &:focus-visible::after {
+      content: "";
+      position: absolute;
+      inset: calc(-1 * calc((var(--purpur-border-width-sm) * 2) + var(--purpur-border-width-xs)));
+      border-radius: var(--purpur-spacing-150);
+      border: var(--purpur-border-width-sm) solid var(--purpur-color-border-interactive-focus);
+    }
+  }
+}
+
+.purpur-dismissable-chip-group-item-wrapper {
+  list-style: none;
+}

package/src/dismissable-chip-group.stories.tsx

@@ -0,0 +1,188 @@
+import React, { useState } from "react";
+import { Button } from "@purpurds/button";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import "@purpurds/button/styles";
+import "@purpurds/heading/styles";
+import "@purpurds/icon/styles";
+import { DismissableChipGroup } from "./dismissable-chip-group";
+
+const meta = {
+  title: "Inputs/DismissableChipGroup",
+  component: DismissableChipGroup,
+  parameters: {
+    design: [
+      {
+        name: "DismissableChipGroup",
+        type: "figma",
+        url: "https://www.figma.com/design/XEaIIFskrrxIBHMZDkIuIg/Purpur-DS---Component-library---guidelines?node-id=1190-108&p=f&t=CotI9ZkeWvGgJKgd-0",
+      },
+    ],
+  },
+  subcomponents: {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    //@ts-ignore
+    "DismissableChipGroup.Item": DismissableChipGroup.Item,
+  },
+} satisfies Meta<typeof DismissableChipGroup>;
+
+export default meta;
+
+export const Showcase: StoryObj<typeof DismissableChipGroup> = {
+  args: {
+    fullWidth: false,
+    title: "Optional DismissableChipGroup title",
+    titleTag: "h2",
+    "data-testid": "dismissable-chip-group",
+  },
+  render: (args) => {
+    const { ...rest } = args;
+
+    const items = [
+      {
+        id: "1",
+        label: "Chip 1",
+        disabled: false,
+        "aria-label": "Press to remove the filter Chip 1",
+        "data-testid": "item-1",
+      },
+      {
+        id: "2",
+        label: "Chip 2",
+        disabled: false,
+        "aria-label": "Press to remove the filter Chip 2",
+        "data-testid": "item-2",
+      },
+      {
+        id: "3",
+        label: "Chip 3",
+        disabled: true,
+        "aria-label": "Press to remove the filter Chip 3",
+        "data-testid": "item-3",
+      },
+    ];
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [chipItems, setChipItems] = useState(items);
+
+    const onDismiss = (id?: string) => {
+      setChipItems((prevItems) => prevItems.filter((item) => item.id !== id));
+    };
+
+    return (
+      <DismissableChipGroup {...rest}>
+        {chipItems.map((chipItem) => (
+          <DismissableChipGroup.Item
+            key={chipItem.id}
+            id={chipItem.id}
+            disabled={chipItem.disabled}
+            aria-label={chipItem["aria-label"]}
+            data-testid={chipItem["data-testid"]}
+            onDismiss={onDismiss}
+          >
+            {chipItem.label}
+          </DismissableChipGroup.Item>
+        ))}
+      </DismissableChipGroup>
+    );
+  },
+  tags: ["visual:check"],
+};
+
+export const BulkActions: StoryObj<typeof DismissableChipGroup> = {
+  args: {
+    fullWidth: false,
+  },
+  render: (args) => {
+    const { ...rest } = args;
+
+    const items = [
+      {
+        id: "1",
+        label: "Chip 1",
+        disabled: false,
+        "aria-label": "Press to remove the filter Chip 1",
+        "data-testid": "item-1",
+      },
+      {
+        id: "2",
+        label: "Chip 2",
+        disabled: false,
+        "aria-label": "Press to remove the filter Chip 2",
+        "data-testid": "item-2",
+      },
+    ];
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [chipItems, setChipItems] = useState(items);
+
+    const onDismiss = (id?: string) => {
+      setChipItems((prevItems) => prevItems.filter((item) => item.id !== id));
+    };
+
+    return (
+      <div>
+        <Button
+          aria-label="Press to clear all chips"
+          variant="text"
+          onClick={() => {
+            setChipItems([]);
+          }}
+        >
+          Clear All
+        </Button>
+        <DismissableChipGroup {...rest}>
+          {chipItems.map((chipItem) => (
+            <DismissableChipGroup.Item
+              key={chipItem.id}
+              id={chipItem.id}
+              disabled={chipItem.disabled}
+              aria-label={chipItem["aria-label"]}
+              data-testid={chipItem["data-testid"]}
+              onDismiss={onDismiss}
+            >
+              {chipItem.label}
+            </DismissableChipGroup.Item>
+          ))}
+        </DismissableChipGroup>
+        <Button
+          aria-label="Press to reset all chips"
+          variant="text"
+          onClick={() => {
+            setChipItems(items);
+          }}
+        >
+          Reset
+        </Button>
+      </div>
+    );
+  },
+  tags: ["visual:check"],
+};
+
+export const DismissableChipGroupItem: StoryObj<typeof DismissableChipGroup.Item> = {
+  args: {
+    ["aria-label"]: "Press to remove the filter Chip 1",
+    ["data-testid"]: "item-1",
+    id: "chip-item-1",
+    disabled: false,
+    onDismiss: (id) => {
+      console.log(`Chip "${id}" clicked`);
+    },
+  },
+  render: (args) => {
+    const { id, disabled, onDismiss, ...rest } = args;
+
+    return (
+      <DismissableChipGroup.Item
+        {...rest}
+        key={id}
+        id={id}
+        disabled={disabled}
+        onDismiss={onDismiss}
+      >
+        Chip 1
+      </DismissableChipGroup.Item>
+    );
+  },
+  tags: ["visual:check"],
+};

package/src/dismissable-chip-group.test.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+import * as matchers from "@testing-library/jest-dom/matchers";
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { DismissableChipGroup } from "./dismissable-chip-group";
+
+expect.extend(matchers);
+
+describe("DismissableChipGroup", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("should render chips with correct text content", () => {
+    render(
+      <DismissableChipGroup>
+        <DismissableChipGroup.Item id="chip-1" aria-label="Chip 1" data-testid="chip-1">
+          Chip 1
+        </DismissableChipGroup.Item>
+      </DismissableChipGroup>
+    );
+    expect(screen.getByTestId("chip-1")).toHaveTextContent("Chip 1");
+  });
+
+  it("should render with a title and items", () => {
+    render(
+      <DismissableChipGroup title="Test Title">
+        <DismissableChipGroup.Item id="chip-1" aria-label="Chip 1" data-testid="chip-1">
+          Chip 1
+        </DismissableChipGroup.Item>
+      </DismissableChipGroup>
+    );
+    expect(screen.getByText("Test Title")).toBeInTheDocument();
+    expect(screen.getByTestId("chip-1")).toHaveTextContent("Chip 1");
+  });
+
+  it("should call onDismiss with the correct id when a chip is dismissed", () => {
+    const onDismissMock = vi.fn();
+    render(
+      <DismissableChipGroup>
+        <DismissableChipGroup.Item
+          id="chip-1"
+          aria-label="Chip 1"
+          data-testid="chip-1"
+          onDismiss={onDismissMock}
+        >
+          Chip 1
+        </DismissableChipGroup.Item>
+      </DismissableChipGroup>
+    );
+    screen.getByTestId("chip-1").click();
+    expect(onDismissMock).toHaveBeenCalledWith("chip-1");
+  });
+
+  it("should apply full-width class when fullWidth is true", () => {
+    const { container } = render(
+      <DismissableChipGroup fullWidth>
+        <DismissableChipGroup.Item id="chip-1" aria-label="Chip 1" data-testid="chip-1">
+          Chip 1
+        </DismissableChipGroup.Item>
+      </DismissableChipGroup>
+    );
+
+    // Find the inner container div
+    const innerContainer = container.querySelector(".purpur-dismissable-chip-group__container");
+
+    // Assert that the full-width class is applied
+    expect(innerContainer).toHaveClass("purpur-dismissable-chip-group__container--full-width");
+  });
+
+  it("should render disabled chips with correct attributes", () => {
+    render(
+      <DismissableChipGroup>
+        <DismissableChipGroup.Item id="chip-1" aria-label="Chip 1" data-testid="chip-1" disabled>
+          Chip 1
+        </DismissableChipGroup.Item>
+      </DismissableChipGroup>
+    );
+    const chip = screen.getByTestId("chip-1");
+    expect(chip).toBeDisabled();
+    expect(chip).toHaveAttribute("aria-disabled", "true");
+  });
+
+  it("should set aria-labelledby correctly when a title is provided", () => {
+    render(
+      <DismissableChipGroup title="Test Title">
+        <DismissableChipGroup.Item id="chip-1" aria-label="Chip 1" data-testid="chip-1">
+          Chip 1
+        </DismissableChipGroup.Item>
+      </DismissableChipGroup>
+    );
+    const container = screen.getByRole("group");
+    expect(container).toHaveAttribute("aria-labelledby");
+  });
+
+  it("should not set aria-labelledby when no title is provided", () => {
+    render(
+      <DismissableChipGroup>
+        <DismissableChipGroup.Item id="chip-1" aria-label="Chip 1" data-testid="chip-1">
+          Chip 1
+        </DismissableChipGroup.Item>
+      </DismissableChipGroup>
+    );
+    const container = screen.getByRole("group");
+    expect(container).not.toHaveAttribute("aria-labelledby");
+  });
+
+  it("should not call onDismiss when a disabled chip is clicked", () => {
+    const onDismissMock = vi.fn();
+    render(
+      <DismissableChipGroup>
+        <DismissableChipGroup.Item
+          id="chip-1"
+          aria-label="Chip 1"
+          data-testid="chip-1"
+          onDismiss={onDismissMock}
+          disabled
+        >
+          Chip 1
+        </DismissableChipGroup.Item>
+      </DismissableChipGroup>
+    );
+    screen.getByTestId("chip-1").click();
+    expect(onDismissMock).not.toHaveBeenCalled();
+  });
+
+  it("should render multiple chips correctly", () => {
+    render(
+      <>
+        <DismissableChipGroup>
+          <DismissableChipGroup.Item id="chip-1" aria-label="Chip 1" data-testid="chip-1">
+            Chip 1
+          </DismissableChipGroup.Item>
+        </DismissableChipGroup>
+        <DismissableChipGroup>
+          <DismissableChipGroup.Item id="chip-2" aria-label="Chip 2" data-testid="chip-2">
+            Chip 2
+          </DismissableChipGroup.Item>
+        </DismissableChipGroup>
+        <DismissableChipGroup>
+          <DismissableChipGroup.Item id="chip-3" aria-label="Chip 3" data-testid="chip-3">
+            Chip 3
+          </DismissableChipGroup.Item>
+        </DismissableChipGroup>
+      </>
+    );
+    expect(screen.getByTestId("chip-1")).toHaveTextContent("Chip 1");
+    expect(screen.getByTestId("chip-2")).toHaveTextContent("Chip 2");
+    expect(screen.getByTestId("chip-3")).toHaveTextContent("Chip 3");
+  });
+});

package/src/dismissable-chip-group.tsx

@@ -0,0 +1,59 @@
+import React, { ReactNode, useId } from "react";
+import { Heading, HeadingTagType } from "@purpurds/heading";
+import c from "classnames/bind";
+
+import styles from "./dismissable-chip-group.module.scss";
+import { DismissableChipGroupItem } from "./dismissable-chip-group-item";
+const cx = c.bind(styles);
+
+export type DismissableChipGroupProps = {
+  ["data-testid"]?: string;
+  children: ReactNode;
+  className?: string;
+  fullWidth?: boolean;
+  title?: string;
+  titleTag?: HeadingTagType;
+};
+
+const rootClassName = "purpur-dismissable-chip-group";
+
+export const DismissableChipGroup = ({
+  children,
+  className,
+  fullWidth = false,
+  title,
+  titleTag,
+  ...props
+}: DismissableChipGroupProps) => {
+  const id = useId();
+  const classes = cx([className, rootClassName]);
+
+  return (
+    <div
+      {...props}
+      aria-labelledby={title ? `${id}-label` : undefined}
+      className={classes}
+      role="group"
+    >
+      {title && (
+        <Heading tag={titleTag ?? "h2"} variant="subsection-100">
+          {title}
+        </Heading>
+      )}
+      <ul
+        data-testid="dismissable-chip-group-container"
+        className={cx(`${rootClassName}__container`, {
+          [`${rootClassName}__container--full-width`]: fullWidth,
+        })}
+        aria-live="polite"
+        aria-relevant="additions removals"
+      >
+        {children}
+      </ul>
+    </div>
+  );
+};
+
+DismissableChipGroup.Item = DismissableChipGroupItem;
+
+DismissableChipGroup.displayName = "DismissableChipGroup";

package/src/global.d.ts

@@ -0,0 +1,4 @@
+declare module "*.scss" {
+  const styles: { [className: string]: string };
+  export default styles;
+}