@workday/canvas-kit-preview-react 7.0.0-alpha.104-next.29 → 7.0.0-alpha.140-next.6

package/breadcrumbs/index.ts

@@ -1,5 +1 @@
-import {Breadcrumbs} from './lib/Breadcrumbs';
-
-export default Breadcrumbs;
-export {Breadcrumbs};
 export * from './lib/Breadcrumbs';

package/breadcrumbs/lib/Breadcrumbs/List/index.tsx

@@ -6,9 +6,10 @@ export type BreadcrumbsListProps = React.HTMLAttributes<HTMLUListElement>;
 
 export const BreadcrumbsList = createComponent('ul')({
   displayName: 'BreadcrumbsList',
-  Component: ({children, ...elemProps}: BreadcrumbsListProps, ref) => {
+  Component: (elemProps: BreadcrumbsListProps, ref, Element) => {
     return (
       <Flex
+        as={Element}
         padding="zero"
         margin="zero"
         display="inline-flex"
@@ -16,13 +17,10 @@ export const BreadcrumbsList = createComponent('ul')({
         minHeight={40}
         listStyle="none"
         style={{boxSizing: 'border-box'}}
-        as="ul"
         role="list"
         ref={ref}
         {...elemProps}
-      >
-        {children}
-      </Flex>
+      />
     );
   },
 });

package/breadcrumbs/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/breadcrumbs",
   "module": "../dist/es6/breadcrumbs",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/breadcrumbs"
 }

package/color-picker/README.md

@@ -20,7 +20,7 @@ preview-react add @workday/canvas-kit-preview-react
 
 ```tsx
 import * as React from 'react';
-import ColorPicker from '@workday/canvas-kit-preview-react/color-picker';
+import {ColorPicker} from '@workday/canvas-kit-preview-react/color-picker';
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {Popper, Popup} from '@workday/canvas-kit-react/popup';

package/color-picker/index.ts

@@ -1 +1 @@
-export {default, default as ColorPicker, ColorPickerProps} from './lib/ColorPicker';
+export {ColorPicker, ColorPickerProps} from './lib/ColorPicker';

package/color-picker/lib/ColorPicker.tsx

@@ -3,7 +3,7 @@ import {checkIcon} from '@workday/canvas-system-icons-web';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
 import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import * as React from 'react';
-import FormField from '@workday/canvas-kit-react/form-field';
+import {FormField} from '@workday/canvas-kit-react/form-field';
 import styled from '@emotion/styled';
 
 import {ResetButton} from './parts/ColorReset';
@@ -158,7 +158,7 @@ const isCustomColor = (colors: string[], hexCode?: string) => {
   return !colors.includes(lowercaseHex);
 };
 
-const ColorPicker = ({
+export const ColorPicker = ({
   colorSet = defaultColorSet,
   customHexInputLabel = 'Custom Hex Color',
   submitLabel = 'Submit',
@@ -215,4 +215,3 @@ const ColorPicker = ({
 };
 
 ColorPicker.defaultColorSet = defaultColorSet;
-export default ColorPicker;

package/color-picker/package.json

@@ -1,5 +1,6 @@
 {
   "main": "../dist/commonjs/color-picker",
   "module": "../dist/es6/color-picker",
-  "sideEffects": false
+  "sideEffects": false,
+  "types": "../dist/es6/color-picker"
 }

package/dist/commonjs/breadcrumbs/index.d.ts

@@ -1,5 +1,2 @@
-import { Breadcrumbs } from './lib/Breadcrumbs';
-export default Breadcrumbs;
-export { Breadcrumbs };
 export * from './lib/Breadcrumbs';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/breadcrumbs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAC,MAAM,mBAAmB,CAAC;AAE9C,eAAe,WAAW,CAAC;AAC3B,OAAO,EAAC,WAAW,EAAC,CAAC;AACrB,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../breadcrumbs/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/commonjs/breadcrumbs/index.js

@@ -10,8 +10,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Breadcrumbs = void 0;
-var Breadcrumbs_1 = require("./lib/Breadcrumbs");
-Object.defineProperty(exports, "Breadcrumbs", { enumerable: true, get: function () { return Breadcrumbs_1.Breadcrumbs; } });
-exports.default = Breadcrumbs_1.Breadcrumbs;
 __exportStar(require("./lib/Breadcrumbs"), exports);

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAE1E,eAAO,MAAM,eAAe,yFAqB1B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAE1E,eAAO,MAAM,eAAe,yFAmB1B,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.js

@@ -10,17 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -31,8 +20,7 @@ var common_1 = require("@workday/canvas-kit-react/common");
 var layout_1 = require("@workday/canvas-kit-react/layout");
 exports.BreadcrumbsList = common_1.createComponent('ul')({
     displayName: 'BreadcrumbsList',
-    Component: function (_a, ref) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (react_1.default.createElement(layout_1.Flex, __assign({ padding: "zero", margin: "zero", display: "inline-flex", alignItems: "center", minHeight: 40, listStyle: "none", style: { boxSizing: 'border-box' }, as: "ul", role: "list", ref: ref }, elemProps), children));
+    Component: function (elemProps, ref, Element) {
+        return (react_1.default.createElement(layout_1.Flex, __assign({ as: Element, padding: "zero", margin: "zero", display: "inline-flex", alignItems: "center", minHeight: 40, listStyle: "none", style: { boxSizing: 'border-box' }, role: "list", ref: ref }, elemProps)));
     },
 });

package/dist/commonjs/color-picker/index.d.ts

@@ -1,2 +1,2 @@
-export { default, default as ColorPicker, ColorPickerProps } from './lib/ColorPicker';
+export { ColorPicker, ColorPickerProps } from './lib/ColorPicker';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/color-picker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../color-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,mBAAmB,CAAC"}

package/dist/commonjs/color-picker/index.js

@@ -1,9 +1,5 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ColorPicker = exports.default = void 0;
+exports.ColorPicker = void 0;
 var ColorPicker_1 = require("./lib/ColorPicker");
-Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(ColorPicker_1).default; } });
-Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return __importDefault(ColorPicker_1).default; } });
+Object.defineProperty(exports, "ColorPicker", { enumerable: true, get: function () { return ColorPicker_1.ColorPicker; } });

package/dist/commonjs/color-picker/lib/ColorPicker.d.ts

@@ -47,9 +47,8 @@ export interface ColorPickerProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     resetLabel?: string;
 }
-declare const ColorPicker: {
+export declare const ColorPicker: {
     ({ colorSet, customHexInputLabel, submitLabel, onColorChange, onColorReset, onSubmitClick, resetLabel, resetColor, value, showCustomHexInput, ...elemProps }: ColorPickerProps): JSX.Element;
     defaultColorSet: string[];
 };
-export default ColorPicker;
 //# sourceMappingURL=ColorPicker.d.ts.map

package/dist/commonjs/color-picker/lib/ColorPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,QAAA,MAAM,WAAW;kKAYd,gBAAgB;;CA0ClB,CAAC;AAGF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ColorPicker.d.ts","sourceRoot":"","sources":["../../../../color-picker/lib/ColorPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;OAEG;IACH,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IACpB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,SAAS,KAAK,IAAI,CAAC;IACjD;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAsGD,eAAO,MAAM,WAAW;kKAYrB,gBAAgB;;CA0ClB,CAAC"}

package/dist/commonjs/color-picker/lib/ColorPicker.js

@@ -44,12 +44,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorPicker = void 0;
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var color_picker_1 = require("@workday/canvas-kit-react/color-picker");
 var button_1 = require("@workday/canvas-kit-react/button");
 var React = __importStar(require("react"));
-var form_field_1 = __importDefault(require("@workday/canvas-kit-react/form-field"));
+var form_field_1 = require("@workday/canvas-kit-react/form-field");
 var styled_1 = __importDefault(require("@emotion/styled"));
 var ColorReset_1 = require("./parts/ColorReset");
 var SwatchBook_1 = require("./parts/SwatchBook");
@@ -121,7 +122,7 @@ var ColorInputWrapper = styled_1.default('form')({
     flexDirection: 'row',
     justifyContent: 'space-between',
 });
-var ColorInputAndLabel = styled_1.default(form_field_1.default)({
+var ColorInputAndLabel = styled_1.default(form_field_1.FormField)({
     display: 'flex',
     flexDirection: 'column',
     margin: 0,
@@ -163,5 +164,5 @@ var ColorPicker = function (_a) {
                 React.createElement(HexColorInput, { onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
             React.createElement(CheckButton, { "aria-label": submitLabel, icon: canvas_system_icons_web_1.checkIcon })))));
 };
-ColorPicker.defaultColorSet = defaultColorSet;
-exports.default = ColorPicker;
+exports.ColorPicker = ColorPicker;
+exports.ColorPicker.defaultColorSet = defaultColorSet;

package/dist/commonjs/menu/index.d.ts

@@ -1,6 +1,3 @@
-import Menu, { MenuProps } from './lib/Menu';
-import MenuItem from './lib/MenuItem';
-export { Menu, MenuItem, MenuProps };
-export default Menu;
+export * from './lib/Menu';
 export * from './lib/MenuItem';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/menu/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,EAAE,EAAC,SAAS,EAAC,MAAM,YAAY,CAAC;AAC3C,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AAEtC,OAAO,EAAC,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAC,CAAC;AAEnC,eAAe,IAAI,CAAC;AACpB,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../menu/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}

package/dist/commonjs/menu/index.js

@@ -9,14 +9,6 @@ var __createBinding = (this && this.__createBinding) || (Object.create ? (functi
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuItem = exports.Menu = void 0;
-var Menu_1 = __importDefault(require("./lib/Menu"));
-exports.Menu = Menu_1.default;
-var MenuItem_1 = __importDefault(require("./lib/MenuItem"));
-exports.MenuItem = MenuItem_1.default;
-exports.default = Menu_1.default;
+__exportStar(require("./lib/Menu"), exports);
 __exportStar(require("./lib/MenuItem"), exports);

package/dist/commonjs/menu/lib/Menu.d.ts

@@ -39,7 +39,7 @@ export interface MenuProps extends GrowthBehavior, React.HTMLAttributes<HTMLULis
 export interface MenuState {
     selectedItemIndex: number;
 }
-export default class Menu extends React.Component<MenuProps, MenuState> {
+export declare class Menu extends React.Component<MenuProps, MenuState> {
     private id;
     private animateId;
     private menuRef;

package/dist/commonjs/menu/lib/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,oBAAoB;IAIb,MAAM;IAmDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA4E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CA+BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../menu/lib/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,aAAa,EAAC,MAAM,YAAY,CAAC;AAGzC,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG,MAAM,WAAW,SAAU,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACnF;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,MAAM,WAAW,SAAS;IACxB,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD,qBAAa,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,CAAC;IAC7D,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,SAAS;IAe5B,kBAAkB,CAAC,SAAS,EAAE,SAAS;IAevC,iBAAiB;IAKjB,oBAAoB;IAIb,MAAM;IAmDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA4E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CA+BxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}

package/dist/commonjs/menu/lib/Menu.js

@@ -57,6 +57,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Menu = void 0;
 var React = __importStar(require("react"));
 var styled_1 = __importDefault(require("@emotion/styled"));
 var card_1 = require("@workday/canvas-kit-react/card");
@@ -184,7 +185,7 @@ var Menu = /** @class */ (function (_super) {
         _this.setFirstCharacters = function () {
             var getFirstCharacter = function (child) {
                 var character = '';
-                if (!child || typeof child === 'boolean' || child === {}) {
+                if (!child || typeof child === 'boolean') {
                     character = '';
                 }
                 else if (typeof child === 'string' || typeof child === 'number') {
@@ -284,4 +285,4 @@ var Menu = /** @class */ (function (_super) {
     };
     return Menu;
 }(React.Component));
-exports.default = Menu;
+exports.Menu = Menu;

package/dist/commonjs/menu/lib/MenuItem.d.ts

@@ -43,11 +43,10 @@ export interface MenuItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
      */
     shouldClose?: boolean;
 }
-declare class MenuItem extends React.Component<MenuItemProps> {
+export declare class MenuItem extends React.Component<MenuItemProps> {
     ref: React.RefObject<HTMLLIElement>;
     componentDidUpdate: (prevProps: MenuItemProps) => void;
     render(): React.ReactNode;
     private handleClick;
 }
-export default MenuItem;
 //# sourceMappingURL=MenuItem.d.ts.map

package/dist/commonjs/menu/lib/MenuItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IAC1E;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwLD,cAAM,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IACnD,GAAG,iCAAoC;IAEvC,kBAAkB,cAAe,aAAa,UAM5C;IAEF,MAAM,IAAI,KAAK,CAAC,SAAS;IAyCzB,OAAO,CAAC,WAAW,CAOjB;CACH;AAcD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MenuItem.d.ts","sourceRoot":"","sources":["../../../../menu/lib/MenuItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IAC1E;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,aAAa,CAAC,EAAE,gBAAgB,CAAC;IACjC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAwLD,qBAAa,QAAS,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAC1D,GAAG,iCAAoC;IAEvC,kBAAkB,cAAe,aAAa,UAM5C;IAEF,MAAM,IAAI,KAAK,CAAC,SAAS;IAyCzB,OAAO,CAAC,WAAW,CAOjB;CACH"}

package/dist/commonjs/menu/lib/MenuItem.js

@@ -57,6 +57,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.MenuItem = void 0;
 var React = __importStar(require("react"));
 var styled_1 = __importDefault(require("@emotion/styled"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
@@ -227,6 +228,7 @@ var MenuItem = /** @class */ (function (_super) {
     };
     return MenuItem;
 }(React.Component));
+exports.MenuItem = MenuItem;
 /**
  * If we destructure props, shouldClose will be undefined because the value is only applied for the render method only.
  * We have to use defaultProps so that the value of shouldClose is applied for every method and therefore references in the Menu component.
@@ -238,4 +240,3 @@ MenuItem.defaultProps = {
     shouldClose: true,
     role: 'menuitem',
 };
-exports.default = MenuItem;

package/dist/commonjs/pill/lib/Pill.d.ts

@@ -10,8 +10,10 @@ export interface PillProps extends BoxProps {
 export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
     maxWidth: string | number;
     disabled: boolean;
+    id: string;
 }> & {} & {}, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };
@@ -19,6 +21,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
 }> & {
     Context: React.Context<{
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };
@@ -27,6 +30,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
 } & {
     Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };
@@ -34,6 +38,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
     }>;
     Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillAvatar").PillAvatarProps, {
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };
@@ -42,6 +47,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
     Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
     Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };
@@ -49,6 +55,7 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
     }>;
     IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
         state: {
+            id: string;
             maxWidth: string | number;
             disabled: boolean;
         };

package/dist/commonjs/pill/lib/Pill.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAC,QAAQ,EAA4B,MAAM,kCAAkC,CAAC;AAWrF,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAgID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6Df,CAAC"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAW1B,OAAO,EAAC,QAAQ,EAA4B,MAAM,kCAAkC,CAAC;AAWrF,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+Df,CAAC"}

package/dist/commonjs/pill/lib/Pill.js

@@ -111,7 +111,6 @@ var getRemovablePillColors = function (disabled) {
 };
 var pillBaseStyles = __assign(__assign({ display: 'inline-flex', alignItems: 'center', borderRadius: tokens_1.borderRadius.m, flexShrink: 0 }, tokens_1.type.levels.subtext.large), { color: tokens_1.colors.blackPepper400, boxShadow: 'none', outline: 'none', fontWeight: tokens_1.type.properties.fontWeights.medium, WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', width: 'fit-content', padding: "2px " + tokens_1.space.xxs, height: tokens_1.space.m, position: 'relative' });
 var StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))(__assign(__assign(__assign({}, pillBaseStyles), { '&:focus': {
-        borderColor: tokens_1.colors.blueberry400,
         'span[data-count="ck-pill-count"]': {
             borderTop: "1px solid " + tokens_1.colors.blueberry400,
             borderBottom: "1px solid " + tokens_1.colors.blueberry400,
@@ -128,10 +127,18 @@ var StyledBasePill = common_1.styled(button_1.BaseButton.as('button'))(__assign(
             border: 'none',
         },
     },
-})), layout_1.boxStyleFn);
+})), function (_a) {
+    var variant = _a.variant;
+    return ({
+        '&:focus': {
+            borderColor: variant === 'removable' ? undefined : tokens_1.colors.blueberry400,
+        },
+    });
+}, layout_1.boxStyleFn);
 var StyledNonInteractivePill = common_1.styled(StyledBasePill)({
     cursor: 'default',
     overflow: 'revert',
+    position: 'relative',
 });
 exports.Pill = common_1.createContainer('button')({
     modelHook: usePillModel_1.usePillModel,
@@ -145,7 +152,7 @@ exports.Pill = common_1.createContainer('button')({
 })(function (_a, Element, model) {
     var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, maxWidth = _a.maxWidth, elemProps = __rest(_a, ["variant", "maxWidth"]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        variant === 'readOnly' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + tokens_1.colors.licorice200 }, elemProps),
+        variant === 'readOnly' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + tokens_1.colors.licorice200, id: model.state.id }, elemProps),
             react_1.default.createElement(PillLabel_1.PillLabel, null, elemProps.children))),
         variant === 'default' && (react_1.default.createElement(StyledBasePill, __assign({ colors: getButtonPillColors(), as: Element }, elemProps, { disabled: model.state.disabled }),
             react_1.default.createElement(layout_1.HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center" }, react_1.default.Children.map(elemProps.children, function (child, index) {
@@ -154,7 +161,7 @@ exports.Pill = common_1.createContainer('button')({
                 }
                 return (react_1.default.createElement(layout_1.Stack.Item, { key: index, display: "inline-flex" }, child));
             })))),
-        variant === 'removable' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span' }, elemProps),
+        variant === 'removable' && (react_1.default.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span', variant: variant }, elemProps),
             react_1.default.createElement(layout_1.HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, react_1.default.Children.map(elemProps.children, function (child, index) {
                 if (typeof child === 'string') {
                     return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);

package/dist/commonjs/pill/lib/PillAvatar.d.ts

@@ -3,6 +3,7 @@ export interface PillAvatarProps extends AvatarProps {
 }
 export declare const PillAvatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillAvatarProps, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };

package/dist/commonjs/pill/lib/PillAvatar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGrE,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAKvD,eAAO,MAAM,UAAU;;;;;;EAcrB,CAAC"}
+{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAS,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAGrE,MAAM,WAAW,eAAgB,SAAQ,WAAW;CAAG;AAKvD,eAAO,MAAM,UAAU;;;;;;;EAerB,CAAC"}

package/dist/commonjs/pill/lib/PillAvatar.js

@@ -25,5 +25,5 @@ var usePillModel_1 = require("./usePillModel");
 exports.PillAvatar = common_1.createSubcomponent('button')({
     modelHook: usePillModel_1.usePillModel,
 })(function (elemProps, Element, model) {
-    return (react_1.default.createElement(avatar_1.Avatar, __assign({ style: { opacity: model.state.disabled ? '.7' : '1' }, as: "div", size: 18 }, elemProps, { disabled: model.state.disabled }), elemProps.children));
+    return (react_1.default.createElement(avatar_1.Avatar, __assign({ style: { opacity: model.state.disabled ? '.7' : '1' }, as: "div", size: 18, altText: undefined }, elemProps, { disabled: model.state.disabled }), elemProps.children));
 });

package/dist/commonjs/pill/lib/PillIcon.d.ts

@@ -9,6 +9,7 @@ export interface PillIconProps extends Omit<SystemIconProps, 'icon'> {
 }
 export declare const PillIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillIconProps, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };

package/dist/commonjs/pill/lib/PillIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ;;;;;;EAanB,CAAC"}
+{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAED,eAAO,MAAM,QAAQ;;;;;;;EAenB,CAAC"}

package/dist/commonjs/pill/lib/PillIcon.js

@@ -36,5 +36,5 @@ exports.PillIcon = common_1.createSubcomponent('span')({
     modelHook: usePillModel_1.usePillModel,
 })(function (_a, Element) {
     var size = _a.size, icon = _a.icon, elemProps = __rest(_a, ["size", "icon"]);
-    return (react_1.default.createElement(icon_1.SystemIcon, __assign({ marginInlineStart: "-" + tokens_1.space.xxxs, display: "flex", as: Element, size: 20, icon: icon || canvas_system_icons_web_1.plusIcon }, elemProps)));
+    return (react_1.default.createElement(icon_1.SystemIcon, __assign({ marginInlineStart: "-" + tokens_1.space.xxxs, display: "flex", as: Element, size: 20, role: "img", "aria-label": "add", icon: icon || canvas_system_icons_web_1.plusIcon }, elemProps)));
 });

package/dist/commonjs/pill/lib/PillIconButton.d.ts

@@ -6,9 +6,15 @@ export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
      * @default `xSmallIcon`
      */
     icon?: CanvasSystemIcon;
+    /**
+     * The aria label for the removable icon
+     * @default 'remove'
+     */
+    'aria-label'?: string;
 }
 export declare const PillIconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillIconButtonProps, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };

package/dist/commonjs/pill/lib/PillIconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAuDD,eAAO,MAAM,cAAc;;;;;;EAuB1B,CAAC"}
+{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAG3E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,CAAC;IACxE;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AA6CD,eAAO,MAAM,cAAc;;;;;;;EAgC1B,CAAC"}

package/dist/commonjs/pill/lib/PillIconButton.js

@@ -47,9 +47,7 @@ var getIconColors = function () {
         focus: {
             icon: tokens_1.colors.licorice500,
             focusRing: common_1.focusRing({
-                width: 0,
                 innerColor: 'transparent',
-                outerColor: 'transparent',
             }),
         },
         disabled: {
@@ -58,31 +56,26 @@ var getIconColors = function () {
         },
     };
 };
-var StyledFocusTarget = common_1.styled('span')({
-    height: 20,
-    position: 'absolute',
-    right: '5px',
-    left: tokens_1.space.xxxs,
-    margin: 0,
-    borderRadius: tokens_1.borderRadius.m,
-    '&:focus': __assign({ outline: 'none' }, common_1.focusRing({
-        outerColor: tokens_1.colors.blueberry400,
-        innerColor: 'transparent',
-        separation: 0,
-        width: 2,
-        inset: 'inner',
-    })),
-});
 var StyledIconButton = common_1.styled(button_1.BaseButton)({
-    marginInlineEnd: '-14px !important',
-    paddingInlineEnd: tokens_1.space.xxxs,
-    marginInlineStart: "-" + tokens_1.space.xxs + " !important",
+    marginInlineEnd: '-7px',
+    marginInlineStart: "-2px",
+    overflow: 'visible',
+    '::after': {
+        content: '""',
+        height: tokens_1.space.l,
+        width: tokens_1.space.l,
+        position: 'absolute',
+        left: '-7px',
+        bottom: '-7px',
+        margin: 0,
+        pointerEvents: 'all',
+        cursor: 'pointer',
+    },
 });
 exports.PillIconButton = common_1.createSubcomponent('button')({
     modelHook: usePillModel_1.usePillModel,
 })(function (_a, Element, model) {
-    var size = _a.size, _b = _a.icon, icon = _b === void 0 ? canvas_system_icons_web_1.xSmallIcon : _b, maxWidth = _a.maxWidth, children = _a.children, elemProps = __rest(_a, ["size", "icon", "maxWidth", "children"]);
-    return (react_1.default.createElement(StyledIconButton, __assign({ borderRadius: "s", height: tokens_1.space.l, width: tokens_1.space.l, padding: "zero", disabled: model.state.disabled, colors: getIconColors(), tabIndex: -1, as: Element, position: "relative" }, elemProps),
-        react_1.default.createElement(StyledFocusTarget, { "aria-hidden": "true", tabIndex: model.state.disabled ? -1 : 0 }),
-        react_1.default.createElement(icon_1.SystemIcon, { icon: icon, size: 24 })));
+    var size = _a.size, _b = _a.icon, icon = _b === void 0 ? canvas_system_icons_web_1.xSmallIcon : _b, maxWidth = _a.maxWidth, children = _a.children, _c = _a["aria-label"], ariaLabel = _c === void 0 ? 'remove' : _c, elemProps = __rest(_a, ["size", "icon", "maxWidth", "children", 'aria-label']);
+    return (react_1.default.createElement(StyledIconButton, __assign({ borderRadius: "s", height: 20, width: 20, padding: "zero", disabled: model.state.disabled, colors: getIconColors(), "aria-labelledby": "removable-" + model.state.id + " label-" + model.state.id, as: Element, position: "relative" }, elemProps),
+        react_1.default.createElement(icon_1.SystemIcon, { "aria-label": ariaLabel, id: "removable-" + model.state.id, icon: icon, size: tokens_1.space.m, "aria-hidden": true, role: "img" })));
 });

package/dist/commonjs/pill/lib/PillLabel.d.ts

@@ -5,6 +5,7 @@ export interface PillLabelProps extends BoxProps {
 }
 export declare const PillLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillLabelProps, {
     state: {
+        id: string;
         maxWidth: string | number;
         disabled: boolean;
     };

package/dist/commonjs/pill/lib/PillLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAKxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAQD,eAAO,MAAM,SAAS;;;;;;EAepB,CAAC"}
+{"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAC/D,OAAO,EAAkB,oBAAoB,EAAC,MAAM,mCAAmC,CAAC;AAKxF,MAAM,WAAW,cAAe,SAAQ,QAAQ;IAC9C,YAAY,CAAC,EAAE,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC,CAAC;CACvD;AAQD,eAAO,MAAM,SAAS;;;;;;;EAgBpB,CAAC"}

package/dist/commonjs/pill/lib/PillLabel.js

@@ -43,5 +43,5 @@ exports.PillLabel = common_1.createSubcomponent('span')({
 })(function (_a, Element, model) {
     var tooltipProps = _a.tooltipProps, elemProps = __rest(_a, ["tooltipProps"]);
     return (react_1.default.createElement(tooltip_1.OverflowTooltip, __assign({}, tooltipProps),
-        react_1.default.createElement(StyledLabelContainer, __assign({ color: model.state.disabled ? tokens_1.colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element }, elemProps), elemProps.children)));
+        react_1.default.createElement(StyledLabelContainer, __assign({ color: model.state.disabled ? tokens_1.colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element, id: "label-" + model.state.id }, elemProps), elemProps.children)));
 });