@easypost/easy-ui 1.0.0-alpha.85 → 1.0.0-alpha.86

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @easypost/easy-ui
 
+## 1.0.0-alpha.86
+
+### Minor Changes
+
+- 21cb65b: feat: support background colors and borderless config for PillGroup and add pillBackground and isPillBorderless prop to MultiSelect
+
 ## 1.0.0-alpha.85
 
 ### Patch Changes

package/MultiSelect/MultiSelect.d.ts

@@ -3,7 +3,7 @@ import { Key, useFilter } from "react-aria";
 import { ComboBoxProps } from "react-aria-components";
 import { AsyncListData, useAsyncList, useListData } from "react-stately";
 import { MenuOverlayProps } from "../Menu/MenuOverlay";
-import { PillProps } from "../PillGroup";
+import { PillProps, PillBackground } from "../PillGroup";
 import { MultiSelectDropdownOption, MultiSelectDropdownOptionText } from "./MultiSelectDropdown";
 export type Item = {
     key: Key;
@@ -64,6 +64,16 @@ export type MultiSelectProps<T extends object> = {
      * the currently selected items.
      */
     selectedItems: T[];
+    /**
+     * The background of individual pills. Maps to token theme colors.
+     */
+    pillBackground?: PillBackground;
+    /**
+     * Whether or not individual pills have a border.
+     *
+     * @default false
+     */
+    isPillBorderless?: boolean;
 };
 /**
  * An input and dropdown that allows users to select multiple options from a list.

package/MultiSelect/MultiSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,GAAG,EAAE,SAAS,EAAkB,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAoB,aAAa,EAAS,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAa,SAAS,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAEL,yBAAyB,EACzB,6BAA6B,EAC9B,MAAM,uBAAuB,CAAC;AAM/B,MAAM,MAAM,IAAI,GAAG;IAAE,GAAG,EAAE,GAAG,CAAA;CAAE,GAAG,SAAS,CAAC;AAE5C,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC/C;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAE3D;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IAEhD;;;OAGG;IACH,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAEzC;;;OAGG;IACH,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;IAE3C;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAE1C;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;IAEjE;;;OAGG;IACH,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;IAEjD;;;OAGG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAEzC;;;OAGG;IACH,aAAa,EAAE,CAAC,EAAE,CAAC;CACpB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,IAAI,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,qBAmJrE;yBAnJe,WAAW;;;;;AAoK3B,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;AAChD,YAAY,EAAE,GAAG,EAAE,CAAC"}
+{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/MultiSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,GAAG,EAAE,SAAS,EAAkB,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAoB,aAAa,EAAS,MAAM,uBAAuB,CAAC;AAC/E,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AAEvD,OAAO,EAAa,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AACpE,OAAO,EAEL,yBAAyB,EACzB,6BAA6B,EAC9B,MAAM,uBAAuB,CAAC;AAM/B,MAAM,MAAM,IAAI,GAAG;IAAE,GAAG,EAAE,GAAG,CAAA;CAAE,GAAG,SAAS,CAAC;AAE5C,MAAM,MAAM,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IAC/C;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAE3D;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC;IAEhD;;;OAGG;IACH,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;IAEzC;;;OAGG;IACH,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;IAE3C;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;IAE1C;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC;IAEjE;;;OAGG;IACH,aAAa,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC;IAEjD;;;OAGG;IACH,iBAAiB,EAAE,CAAC,KAAK,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAExC;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,KAAK,CAAC,SAAS,CAAC;IAEzC;;;OAGG;IACH,aAAa,EAAE,CAAC,EAAE,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,cAAc,CAAC;IAEhC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8CG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,IAAI,EAAE,KAAK,EAAE,gBAAgB,CAAC,CAAC,CAAC,qBAuJrE;yBAvJe,WAAW;;;;;AAwK3B,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;AAChD,YAAY,EAAE,GAAG,EAAE,CAAC"}

package/MultiSelect/MultiSelect.stories.d.ts

@@ -8,4 +8,6 @@ export declare const AsyncDropdown: Story;
 export declare const WithIcons: Story;
 export declare const DisabledKeys: Story;
 export declare const MaxItemsUntilScroll: Story;
+export declare const PillBackground: Story;
+export declare const PillBorder: Story;
 //# sourceMappingURL=MultiSelect.stories.d.ts.map

package/MultiSelect/MultiSelect.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelect.stories.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/MultiSelect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AASlD,OAAO,EAEL,WAAW,EAIZ,MAAM,eAAe,CAAC;AAyBvB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAYlC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqC3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA2CvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwC1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAwCjC,CAAC"}
+{"version":3,"file":"MultiSelect.stories.d.ts","sourceRoot":"","sources":["../../src/MultiSelect/MultiSelect.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAUlD,OAAO,EAEL,WAAW,EAIZ,MAAM,eAAe,CAAC;AAyBvB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAC;AAE1C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAelC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,gBAAgB,EAAE,KAoC9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAqC3B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KA2CvB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAwC1B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAwCjC,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KA2C5B,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAyCxB,CAAC"}

package/MultiSelect/index.js

@@ -57,7 +57,7 @@ const utils = require("../__chunks__/utils-B-3LZYje.js");
 const useHover = require("../__chunks__/useHover-BMIowV0x.js");
 const useFocusRing = require("../__chunks__/useFocusRing-ygRrwBu3.js");
 const mergeProps = require("../__chunks__/mergeProps-d7wJkv71.js");
-const PillGroup = require("../__chunks__/PillGroup-B9WQ2to5.js");
+const PillGroup = require("../__chunks__/PillGroup-BWNzHd3P.js");
 const Dialog = require("../__chunks__/Dialog-D1oLQPjX.js");
 const filterDOMProps = require("../__chunks__/filterDOMProps-D3iOHP0H.js");
 const useResizeObserver = require("../__chunks__/useResizeObserver-BsbT3mjh.js");
@@ -1881,7 +1881,7 @@ const styles = {
 };
 function MultiSelect(props) {
   const { children, disabledKeys, dropdownItems = [], inputValue, isLoading, maxItemsUntilScroll = utilities.DEFAULT_MAX_ITEMS_UNTIL_SCROLL, onInputChange = () => {
-  }, onSelectionChange, placeholder, renderPill, selectedItems } = props;
+  }, onSelectionChange, placeholder, renderPill, selectedItems, pillBackground, isPillBorderless } = props;
   const rootRef = React.useRef(null);
   const clearComboBoxButtonRef = React.useRef(null);
   const menuRef = React.useRef(null);
@@ -1939,7 +1939,9 @@ function MultiSelect(props) {
       gap: "1"
     },
     onRemove: onRemoveSelectedItem,
-    label: "Selected items"
+    label: "Selected items",
+    background: pillBackground,
+    isBorderless: isPillBorderless
   }, renderPill) : React.createElement(VisuallyHidden.$5c3e21d68f1c4674$export$439d29a4e110a164, null, React.createElement(Text.Text, null, "No selected items")), React.createElement("div", {
     className: styles.comboBoxContainer
   }, React.createElement($d01f2c01039c0eec$export$72b9695b8216309a, {

package/MultiSelect/index.mjs

@@ -56,8 +56,8 @@ import { $ as $64fa3d84918910a7$export$29f1550f4b0d4415, a as $64fa3d84918910a7$
 import { $ as $6179b936705e76d3$export$ae780daf29e6d456 } from "../__chunks__/useHover-CwJuylzq.mjs";
 import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "../__chunks__/useFocusRing-DAMeUI3t.mjs";
 import { f as $ff5963eb1fccf552$export$e08e3b67e392101e, $ as $3ef42575df84b30b$export$9d1611c77c2fe928 } from "../__chunks__/mergeProps-CORsYhTp.mjs";
-import { $ as $0d86e9c8f07f9a7b$export$79c0c687a5963b0a, a as $eed445e0843c11d0$export$7ff8f37d2d81a48d, b as $e1995378a142960e$export$bf788dd355e3a401, c as $01b77f81d0f07f68$export$75b6ee27786ba447, d as $eed445e0843c11d0$export$7c5906fe4f1f2af2, e as $514c0188e459b4c0$export$9afb8bc826b033ea, f as $eed445e0843c11d0$export$41f133550aa26f48, g as $eed445e0843c11d0$export$a11e76429ed99b4, P as PillGroup } from "../__chunks__/PillGroup-CuPREwvS.mjs";
-import { h } from "../__chunks__/PillGroup-CuPREwvS.mjs";
+import { $ as $0d86e9c8f07f9a7b$export$79c0c687a5963b0a, a as $eed445e0843c11d0$export$7ff8f37d2d81a48d, b as $e1995378a142960e$export$bf788dd355e3a401, c as $01b77f81d0f07f68$export$75b6ee27786ba447, d as $eed445e0843c11d0$export$7c5906fe4f1f2af2, e as $514c0188e459b4c0$export$9afb8bc826b033ea, f as $eed445e0843c11d0$export$41f133550aa26f48, g as $eed445e0843c11d0$export$a11e76429ed99b4, P as PillGroup } from "../__chunks__/PillGroup-D0TUV_Qh.mjs";
+import { h } from "../__chunks__/PillGroup-D0TUV_Qh.mjs";
 import { c as $de32f1b87079253c$export$d2f961adcb0afbe, d as $07b14b47974efb58$export$9b9a0cd73afb7ca4, a as $07b14b47974efb58$export$5b6b19405a83ff9d } from "../__chunks__/Dialog-71SzSgdZ.mjs";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "../__chunks__/filterDOMProps-EDDcM64A.mjs";
 import { $ as $9daab02d461809db$export$683480f191c0e3ea } from "../__chunks__/useResizeObserver-Dyb4wvuA.mjs";
@@ -1864,7 +1864,7 @@ const styles = {
 };
 function MultiSelect(props) {
   const { children, disabledKeys, dropdownItems = [], inputValue, isLoading, maxItemsUntilScroll = DEFAULT_MAX_ITEMS_UNTIL_SCROLL, onInputChange = () => {
-  }, onSelectionChange, placeholder, renderPill, selectedItems } = props;
+  }, onSelectionChange, placeholder, renderPill, selectedItems, pillBackground, isPillBorderless } = props;
   const rootRef = useRef(null);
   const clearComboBoxButtonRef = useRef(null);
   const menuRef = useRef(null);
@@ -1922,7 +1922,9 @@ function MultiSelect(props) {
       gap: "1"
     },
     onRemove: onRemoveSelectedItem,
-    label: "Selected items"
+    label: "Selected items",
+    background: pillBackground,
+    isBorderless: isPillBorderless
   }, renderPill) : React__default.createElement($5c3e21d68f1c4674$export$439d29a4e110a164, null, React__default.createElement(Text, null, "No selected items")), React__default.createElement("div", {
     className: styles.comboBoxContainer
   }, React__default.createElement($d01f2c01039c0eec$export$72b9695b8216309a, {

package/PillGroup/PillGroup.d.ts

@@ -1,7 +1,8 @@
 import React from "react";
 import type { TagGroupProps, TagListProps } from "react-aria-components";
-import { IconSymbol } from "../types";
+import { IconSymbol, ThemeTokenNamespace } from "../types";
 import { HorizontalStackProps } from "../HorizontalStack";
+export type PillBackground = ThemeTokenNamespace<"color">;
 /**
  * Assists in managing state for list data for `<PillGroup />`
  *
@@ -14,6 +15,14 @@ export type PillGroupProps<T> = Pick<TagGroupProps, "onRemove"> & Pick<TagListPr
     label: string;
     /** HorizontalStack props except children and as */
     horizontalStackContainerProps?: Omit<HorizontalStackProps, "children" | "as">;
+    /** The background of individual pills. Maps to token theme colors. */
+    background?: PillBackground;
+    /**
+     * Whether or not individual pills have a border.
+     *
+     * @default false
+     */
+    isBorderless?: boolean;
 };
 /**
  * A `<PillGroup />` displays a focusable list of labels, categories, keywords, or

package/PillGroup/PillGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillGroup.d.ts","sourceRoot":"","sources":["../../src/PillGroup/PillGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAKzE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,uCAEpD;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,GAC7D,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC5C,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,6BAA6B,CAAC,EAAE,IAAI,CAClC,oBAAoB,EACpB,UAAU,GAAG,IAAI,CAClB,CAAC;CACH,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,qBA+BnE;yBA/Be,SAAS;sBAwCJ,SAAS;;AAP9B,MAAM,MAAM,SAAS,GAAG;IACtB,wBAAwB;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}
+{"version":3,"file":"PillGroup.d.ts","sourceRoot":"","sources":["../../src/PillGroup/PillGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAKzE,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,UAAU,CAAC;AAY3D,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D,MAAM,MAAM,cAAc,GAAG,mBAAmB,CAAC,OAAO,CAAC,CAAC;AAE1D;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,EAAE,YAAY,EAAE,CAAC,EAAE,uCAEpD;AAED,MAAM,MAAM,cAAc,CAAC,CAAC,IAAI,IAAI,CAAC,aAAa,EAAE,UAAU,CAAC,GAC7D,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC5C,yBAAyB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,mDAAmD;IACnD,6BAA6B,CAAC,EAAE,IAAI,CAClC,oBAAoB,EACpB,UAAU,GAAG,IAAI,CAClB,CAAC;IACF,sEAAsE;IACtE,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAC;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmDG;AACH,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,qBA+CnE;yBA/Ce,SAAS;sBAwDJ,SAAS;;AAP9B,MAAM,MAAM,SAAS,GAAG;IACtB,wBAAwB;IACxB,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,uCAAuC;IACvC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC"}

package/PillGroup/PillGroup.stories.d.ts

@@ -8,4 +8,6 @@ export declare const StandardIconSymbol: Story;
 export declare const ImageSymbol: Story;
 export declare const Positioning: Story;
 export declare const Removal: Story;
+export declare const Background: Story;
+export declare const Border: Story;
 //# sourceMappingURL=PillGroup.stories.d.ts.map

package/PillGroup/PillGroup.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillGroup.stories.d.ts","sourceRoot":"","sources":["../../src/PillGroup/PillGroup.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAoC,MAAM,aAAa,CAAC;AAE1E,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAOxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAOhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC"}
+{"version":3,"file":"PillGroup.stories.d.ts","sourceRoot":"","sources":["../../src/PillGroup/PillGroup.stories.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,SAAS,EAAoC,MAAM,aAAa,CAAC;AAE1E,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAC;AAOxC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAOhC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,eAAO,MAAM,OAAO,EAAE,KAWrB,CAAC;AAEF,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAWzB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAsBrB,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAwBpB,CAAC"}

package/PillGroup/PillGroupContext.d.ts

@@ -0,0 +1,9 @@
+import { PillBackground } from "./PillGroup";
+type InternalPillGroupContextType = {
+    background: PillBackground;
+    isBorderless: boolean;
+};
+export declare const InternalPillGroupContext: import("react").Context<InternalPillGroupContextType | null>;
+export declare function useInternalPillGroupContext(): InternalPillGroupContextType;
+export {};
+//# sourceMappingURL=PillGroupContext.d.ts.map

package/PillGroup/PillGroupContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PillGroupContext.d.ts","sourceRoot":"","sources":["../../src/PillGroup/PillGroupContext.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,KAAK,4BAA4B,GAAG;IAClC,UAAU,EAAE,cAAc,CAAC;IAC3B,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,eAAO,MAAM,wBAAwB,8DACqB,CAAC;AAE3D,wBAAgB,2BAA2B,iCAQ1C"}

package/PillGroup/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const PillGroup = require("../__chunks__/PillGroup-B9WQ2to5.js");
+const PillGroup = require("../__chunks__/PillGroup-BWNzHd3P.js");
 exports.PillGroup = PillGroup.PillGroup;
 exports.usePillListState = PillGroup.usePillListState;

package/PillGroup/index.mjs

@@ -1,4 +1,4 @@
-import { P, u } from "../__chunks__/PillGroup-CuPREwvS.mjs";
+import { P, u } from "../__chunks__/PillGroup-D0TUV_Qh.mjs";
 export {
   P as PillGroup,
   u as usePillListState

package/__chunks__/{PillGroup-B9WQ2to5.js → PillGroup-BWNzHd3P.js}

@@ -2127,11 +2127,21 @@ const $eaf9e70818b436db$export$3288d34c523a1192 = /* @__PURE__ */ $e1995378a1429
     ]
   }, renderProps.children)));
 });
-const Pill$1 = "_Pill_108dn_4";
-const remove = "_remove_108dn_13";
-const list = "_list_108dn_25";
+const InternalPillGroupContext = React.createContext(null);
+function useInternalPillGroupContext() {
+  const pillGroupContext = React.useContext(InternalPillGroupContext);
+  if (!pillGroupContext) {
+    throw new Error("InternalPillGroupContext must be used inside a <PillGroup />");
+  }
+  return pillGroupContext;
+}
+const Pill$1 = "_Pill_tvu53_4";
+const borderless = "_borderless_tvu53_14";
+const remove = "_remove_tvu53_18";
+const list = "_list_tvu53_30";
 const styles = {
   Pill: Pill$1,
+  borderless,
   remove,
   list
 };
@@ -2141,22 +2151,34 @@ function usePillListState(initialItems) {
   });
 }
 function PillGroup(props) {
-  const { label, items, children, horizontalStackContainerProps = {} } = props;
+  const { label, items, children, horizontalStackContainerProps = {}, background = "neutral.000", isBorderless = false } = props;
   const { align, blockAlign, gap, wrap = true, inline } = horizontalStackContainerProps;
+  const context2 = React.useMemo(() => {
+    return {
+      background,
+      isBorderless
+    };
+  }, [background, isBorderless]);
   const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, utilities_css.getResponsiveDesignToken("pill-group", "gap", "space", gap)), utilities_css.getComponentToken("pill-group", "align", align)), utilities_css.getComponentToken("pill-group", "block-align", blockAlign)), utilities_css.getComponentToken("pill-group", "wrap", wrap ? "wrap" : "nowrap")), utilities_css.getComponentToken("pill-group", "display", inline ? "inline-flex" : "flex"));
-  return React.createElement($eaf9e70818b436db$export$67ea30858aaf75e3, __spreadValues({}, props), React.createElement(Text.Text, {
+  return React.createElement(InternalPillGroupContext.Provider, {
+    value: context2
+  }, React.createElement($eaf9e70818b436db$export$67ea30858aaf75e3, __spreadValues({}, props), React.createElement(Text.Text, {
     visuallyHidden: true
   }, React.createElement($01b77f81d0f07f68$export$b04be29aa201d4f5, null, label)), React.createElement($eaf9e70818b436db$export$f9fef0f55402315b, {
     items,
     className: styles.list,
     style
-  }, children));
+  }, children)));
 }
 function Pill(props) {
   const { label, icon } = props;
+  const { background, isBorderless } = useInternalPillGroupContext();
+  const style = __spreadValues({}, utilities_css.getComponentThemeToken("pill", "background", "color", background));
+  const className = utilities_css.classNames(styles.Pill, isBorderless && styles.borderless);
   return React.createElement($eaf9e70818b436db$export$3288d34c523a1192, __spreadValues({
     textValue: label,
-    className: styles.Pill
+    className,
+    style
   }, props), ({ allowsRemoving }) => React.createElement(React.Fragment, null, icon && React.createElement(Icon.Icon, {
     size: "xs",
     symbol: icon,

package/__chunks__/{PillGroup-CuPREwvS.mjs → PillGroup-D0TUV_Qh.mjs}

@@ -62,7 +62,7 @@ import { $ as $fca6afa0e843324b$export$f12b703ca79dfbb1 } from "./useLocalizedSt
 import { C as Close } from "./Close-Cq6Q6MN6.mjs";
 import { I as Icon } from "./Icon-0SN9dbwU.mjs";
 import { T as Text } from "./Text-CX5GoBTS.mjs";
-import { getComponentToken, getResponsiveDesignToken } from "../utilities/css.mjs";
+import { getComponentToken, getResponsiveDesignToken, getComponentThemeToken, classNames } from "../utilities/css.mjs";
 function $0d86e9c8f07f9a7b$export$762f73dccccd255d(options) {
   let { initialItems = [], initialSelectedKeys, getKey = (item) => {
     var _item_id;
@@ -2126,11 +2126,21 @@ const $eaf9e70818b436db$export$3288d34c523a1192 = /* @__PURE__ */ $e1995378a1429
     ]
   }, renderProps.children)));
 });
-const Pill$1 = "_Pill_108dn_4";
-const remove = "_remove_108dn_13";
-const list = "_list_108dn_25";
+const InternalPillGroupContext = createContext(null);
+function useInternalPillGroupContext() {
+  const pillGroupContext = useContext(InternalPillGroupContext);
+  if (!pillGroupContext) {
+    throw new Error("InternalPillGroupContext must be used inside a <PillGroup />");
+  }
+  return pillGroupContext;
+}
+const Pill$1 = "_Pill_tvu53_4";
+const borderless = "_borderless_tvu53_14";
+const remove = "_remove_tvu53_18";
+const list = "_list_tvu53_30";
 const styles = {
   Pill: Pill$1,
+  borderless,
   remove,
   list
 };
@@ -2140,22 +2150,34 @@ function usePillListState(initialItems) {
   });
 }
 function PillGroup(props) {
-  const { label, items, children, horizontalStackContainerProps = {} } = props;
+  const { label, items, children, horizontalStackContainerProps = {}, background = "neutral.000", isBorderless = false } = props;
   const { align, blockAlign, gap, wrap = true, inline } = horizontalStackContainerProps;
+  const context = useMemo(() => {
+    return {
+      background,
+      isBorderless
+    };
+  }, [background, isBorderless]);
   const style = __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues({}, getResponsiveDesignToken("pill-group", "gap", "space", gap)), getComponentToken("pill-group", "align", align)), getComponentToken("pill-group", "block-align", blockAlign)), getComponentToken("pill-group", "wrap", wrap ? "wrap" : "nowrap")), getComponentToken("pill-group", "display", inline ? "inline-flex" : "flex"));
-  return React__default.createElement($eaf9e70818b436db$export$67ea30858aaf75e3, __spreadValues({}, props), React__default.createElement(Text, {
+  return React__default.createElement(InternalPillGroupContext.Provider, {
+    value: context
+  }, React__default.createElement($eaf9e70818b436db$export$67ea30858aaf75e3, __spreadValues({}, props), React__default.createElement(Text, {
     visuallyHidden: true
   }, React__default.createElement($01b77f81d0f07f68$export$b04be29aa201d4f5, null, label)), React__default.createElement($eaf9e70818b436db$export$f9fef0f55402315b, {
     items,
     className: styles.list,
     style
-  }, children));
+  }, children)));
 }
 function Pill(props) {
   const { label, icon } = props;
+  const { background, isBorderless } = useInternalPillGroupContext();
+  const style = __spreadValues({}, getComponentThemeToken("pill", "background", "color", background));
+  const className = classNames(styles.Pill, isBorderless && styles.borderless);
   return React__default.createElement($eaf9e70818b436db$export$3288d34c523a1192, __spreadValues({
     textValue: label,
-    className: styles.Pill
+    className,
+    style
   }, props), ({ allowsRemoving }) => React__default.createElement(React__default.Fragment, null, icon && React__default.createElement(Icon, {
     size: "xs",
     symbol: icon,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easypost/easy-ui",
-  "version": "1.0.0-alpha.85",
+  "version": "1.0.0-alpha.86",
   "sideEffects": [
     "**/*.css"
   ],

package/style.css

@@ -1500,16 +1500,21 @@
 }/**
  * Do not edit directly, this file was auto-generated.
  */
-._Pill_108dn_4 {
+._Pill_tvu53_4 {
   display: inline-flex;
   border-radius: var(--ezui-shape-border-radius-md);
   padding: calc(var(--ezui-space-1) - var(--ezui-shape-border-width-1));
   gap: var(--ezui-space-0-5);
   border: var(--ezui-shape-border-width-1) solid var(--ezui-color-gray-400);
   align-items: center;
+  background: var(--ezui-c-pill-background);
 }
 
-._remove_108dn_13 {
+._borderless_tvu53_14 {
+  border: none;
+}
+
+._remove_tvu53_18 {
   appearance: none;
   margin: 0;
   padding: 0;
@@ -1521,56 +1526,56 @@
   cursor: pointer;
 }
 
-._list_108dn_25 {
+._list_tvu53_30 {
   display: var(--ezui-c-pill-group-display);
   flex-wrap: var(--ezui-c-pill-group-wrap);
   align-items: var(--ezui-c-pill-group-block-align);
   justify-content: var(--ezui-c-pill-group-align);
   min-width: 0;
 }
-._list_108dn_25 {
+._list_tvu53_30 {
   --ezui-c-pill-group-gap-xs: initial;
 }
-._list_108dn_25 {
+._list_tvu53_30 {
   --ezui-c-pill-group-gap-sm: initial;
 }
-._list_108dn_25 {
+._list_tvu53_30 {
   --ezui-c-pill-group-gap-md: initial;
 }
-._list_108dn_25 {
+._list_tvu53_30 {
   --ezui-c-pill-group-gap-lg: initial;
 }
-._list_108dn_25 {
+._list_tvu53_30 {
   --ezui-c-pill-group-gap-xl: initial;
 }
-._list_108dn_25 {
+._list_tvu53_30 {
   --ezui-c-pill-group-gap-xxl: initial;
 }
-._list_108dn_25 {
+._list_tvu53_30 {
   gap: var(--ezui-c-pill-group-gap-xs);
 }
 @media (min-width: 30em) {
-  ._list_108dn_25 {
+  ._list_tvu53_30 {
     gap: var(--ezui-c-pill-group-gap-sm, var(--ezui-c-pill-group-gap-xs, initial));
   }
 }
 @media (min-width: 40em) {
-  ._list_108dn_25 {
+  ._list_tvu53_30 {
     gap: var(--ezui-c-pill-group-gap-md, var(--ezui-c-pill-group-gap-sm, var(--ezui-c-pill-group-gap-xs, initial)));
   }
 }
 @media (min-width: 64em) {
-  ._list_108dn_25 {
+  ._list_tvu53_30 {
     gap: var(--ezui-c-pill-group-gap-lg, var(--ezui-c-pill-group-gap-md, var(--ezui-c-pill-group-gap-sm, var(--ezui-c-pill-group-gap-xs, initial))));
   }
 }
 @media (min-width: 85em) {
-  ._list_108dn_25 {
+  ._list_tvu53_30 {
     gap: var(--ezui-c-pill-group-gap-xl, var(--ezui-c-pill-group-gap-lg, var(--ezui-c-pill-group-gap-md, var(--ezui-c-pill-group-gap-sm, var(--ezui-c-pill-group-gap-xs, initial)))));
   }
 }
 @media (min-width: 120em) {
-  ._list_108dn_25 {
+  ._list_tvu53_30 {
     gap: var(--ezui-c-pill-group-gap-xxl, var(--ezui-c-pill-group-gap-xl, var(--ezui-c-pill-group-gap-lg, var(--ezui-c-pill-group-gap-md, var(--ezui-c-pill-group-gap-sm, var(--ezui-c-pill-group-gap-xs, initial))))));
   }
 }/**