@workday/canvas-kit-preview-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.102-next.27

package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.d.ts

@@ -2,11 +2,14 @@
  * Adds the necessary props to a `Hint` component.
  * Used by the FormField.Hint subcomponent and other input type components
  */
-export declare const useFormFieldHint: <P extends {}, R>(model: import("@workday/canvas-kit-react/common").Model<{
-    hasError?: boolean | undefined;
-    id?: string | undefined;
-    isRequired?: boolean | undefined;
-}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+export declare const useFormFieldHint: <P extends {}, R>(model: {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
     id: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;

package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldHint.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldHint.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;OAI3B,CAAC"}
+{"version":3,"file":"useFormFieldHint.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldHint.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,gBAAgB;;;;;;;;;;;OAI3B,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldHint.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormFieldHint = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
+var useFormFieldModel_1 = require("./useFormFieldModel");
 /**
  * Adds the necessary props to a `Hint` component.
  * Used by the FormField.Hint subcomponent and other input type components
  */
-exports.useFormFieldHint = common_1.createHook(function (_a) {
+exports.useFormFieldHint = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(function (_a) {
     var state = _a.state;
     return {
         id: "hint-" + state.id,

package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.d.ts

@@ -2,11 +2,14 @@
  * Adds the necessary props to an `Input` component.
  * Used by the FormField.Input subcomponent and other input type components
  */
-export declare const useFormFieldInput: <P extends {}, R>(model: import("@workday/canvas-kit-react/common").Model<{
-    hasError?: boolean | undefined;
-    id?: string | undefined;
-    isRequired?: boolean | undefined;
-}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+export declare const useFormFieldInput: <P extends {}, R>(model: {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
     required: boolean | undefined;
     'aria-invalid': boolean | undefined;
     'aria-describedby': string;

package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldInput.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldInput.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;OAO5B,CAAC"}
+{"version":3,"file":"useFormFieldInput.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldInput.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;OAO5B,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldInput.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormFieldInput = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
+var useFormFieldModel_1 = require("./useFormFieldModel");
 /**
  * Adds the necessary props to an `Input` component.
  * Used by the FormField.Input subcomponent and other input type components
  */
-exports.useFormFieldInput = common_1.createHook(function (_a) {
+exports.useFormFieldInput = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(function (_a) {
     var state = _a.state;
     return {
         required: state.isRequired ? true : undefined,

package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.d.ts

@@ -2,11 +2,14 @@
  * Adds the necessary props to a `Label` component.
  * Used by the FormField.Label subcomponent and other input type components
  */
-export declare const useFormFieldLabel: <P extends {}, R>(model: import("@workday/canvas-kit-react/common").Model<{
-    hasError?: boolean | undefined;
-    id?: string | undefined;
-    isRequired?: boolean | undefined;
-}, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+export declare const useFormFieldLabel: <P extends {}, R>(model: {
+    state: {
+        id: string;
+        hasError: boolean;
+        isRequired: boolean;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
     htmlFor: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;

package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldLabel.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;OAI5B,CAAC"}
+{"version":3,"file":"useFormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldLabel.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,iBAAiB;;;;;;;;;;;OAI5B,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldLabel.js

@@ -2,11 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormFieldLabel = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
+var useFormFieldModel_1 = require("./useFormFieldModel");
 /**
  * Adds the necessary props to a `Label` component.
  * Used by the FormField.Label subcomponent and other input type components
  */
-exports.useFormFieldLabel = common_1.createHook(function (_a) {
+exports.useFormFieldLabel = common_1.createElemPropsHook(useFormFieldModel_1.useFormFieldModel)(function (_a) {
     var state = _a.state;
     return {
         htmlFor: "input-" + state.id,

package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.d.ts

@@ -1,11 +1,10 @@
-import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
-declare type FormFieldState = {
+export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<{
     /**
      * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
      * `required` set to true, and usually some subcomponents will have a error color applied.
      * @default false
      */
-    hasError?: boolean;
+    hasError: boolean;
     /**
      * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
      * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
@@ -16,21 +15,84 @@ declare type FormFieldState = {
      * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
      * @default `useUniqueId()`
      */
-    id?: string;
+    id: string;
     /**
      * Optional flag to denote if this field is required. When true the `FormField.Input` will have
      * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
      * @default false
      */
-    isRequired?: boolean;
-};
-declare type FormFieldEvents = {};
-export declare type FormFieldModel = Model<FormFieldState, FormFieldEvents>;
-declare const formFieldEventMap: {
-    guards: {};
-    callbacks: {};
-};
-export declare type FormFieldModelConfig = FormFieldState & Partial<ToModelConfig<FormFieldState, FormFieldEvents, typeof formFieldEventMap>>;
-export declare const useFormFieldModel: (config?: FormFieldModelConfig) => FormFieldModel;
-export {};
+    isRequired: boolean;
+}> & {} & {}) | undefined) => {
+    state: {
+        id: string;
+        /**
+         * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
+         * `required` set to true, and usually some subcomponents will have a error color applied.
+         * @default false
+         */
+        hasError: boolean;
+        /**
+         * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+         * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+         * @default false
+         */
+        isRequired: boolean;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
+     * `required` set to true, and usually some subcomponents will have a error color applied.
+     * @default false
+     */
+    hasError: boolean;
+    /**
+     * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
+     * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+     * - `FormField.Input` will set `id` to `input-${id}`
+     * - `FormField.Label` will set `htmlFor` to `input-${id}`
+     * - `FormField.Hint` will set `id` to `hint-${id}`
+     *
+     * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+     * @default `useUniqueId()`
+     */
+    id: string;
+    /**
+     * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+     * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+     * @default false
+     */
+    isRequired: boolean;
+}, {}, {
+    id: string;
+    /**
+     * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
+     * `required` set to true, and usually some subcomponents will have a error color applied.
+     * @default false
+     */
+    hasError: boolean;
+    /**
+     * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+     * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+     * @default false
+     */
+    isRequired: boolean;
+}, {}, {
+    state: {
+        id: string;
+        /**
+         * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
+         * `required` set to true, and usually some subcomponents will have a error color applied.
+         * @default false
+         */
+        hasError: boolean;
+        /**
+         * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+         * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+         * @default false
+         */
+        isRequired: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=useFormFieldModel.d.ts.map

package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldModel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldModel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EACL,aAAa,EAGd,MAAM,kCAAkC,CAAC;AAE1C,aAAK,cAAc,GAAG;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;OASG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,aAAK,eAAe,GAAG,EAAE,CAAC;AAE1B,oBAAY,cAAc,GAAG,KAAK,CAAC,cAAc,EAAE,eAAe,CAAC,CAAC;AAEpE,QAAA,MAAM,iBAAiB;;;CAGrB,CAAC;AAEH,oBAAY,oBAAoB,GAAG,cAAc,GAC/C,OAAO,CAAC,aAAa,CAAC,cAAc,EAAE,eAAe,EAAE,OAAO,iBAAiB,CAAC,CAAC,CAAC;AAEpF,eAAO,MAAM,iBAAiB,YAAY,oBAAoB,KAAQ,cAerE,CAAC"}
+{"version":3,"file":"useFormFieldModel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;IAE1B;;;;OAIG;;IAEH;;;;;;;;;OASG;;IAEH;;;;OAIG;;;;;QArBH;;;;WAIG;;QAaH;;;;WAIG;;;;;IArBH;;;;OAIG;;IAEH;;;;;;;;;OASG;;IAEH;;;;OAIG;;;;IArBH;;;;OAIG;;IAaH;;;;OAIG;;;;;QArBH;;;;WAIG;;QAaH;;;;WAIG;;;;EAeL,CAAC"}

package/dist/commonjs/form-field/lib/hooks/useFormFieldModel.js

@@ -1,23 +1,49 @@
 "use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormFieldModel = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
-var formFieldEventMap = common_1.createEventMap()({
-    guards: {},
-    callbacks: {},
-});
-var useFormFieldModel = function (config) {
-    if (config === void 0) { config = {}; }
+exports.useFormFieldModel = common_1.createModelHook({
+    defaultConfig: {
+        /**
+         * Optional flag to denote if this field has an error to display. When true the `FormField.Input` will have
+         * `required` set to true, and usually some subcomponents will have a error color applied.
+         * @default false
+         */
+        hasError: false,
+        /**
+         * Optional `id` provided to `FormField`'s subcomponents as HTML attributes:
+         * - `FormField.Input` will set `aria-describedby` to `hint-${id}`
+         * - `FormField.Input` will set `id` to `input-${id}`
+         * - `FormField.Label` will set `htmlFor` to `input-${id}`
+         * - `FormField.Hint` will set `id` to `hint-${id}`
+         *
+         * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+         * @default `useUniqueId()`
+         */
+        id: '',
+        /**
+         * Optional flag to denote if this field is required. When true the `FormField.Input` will have
+         * `required` set to true, and an asterisk will be appended to the `FormField.Label`.
+         * @default false
+         */
+        isRequired: false,
+    },
+})(function (config) {
     var id = common_1.useUniqueId(config.id);
-    var state = {
-        hasError: config.hasError,
-        isRequired: config.isRequired,
-        id: id,
-    };
-    var events = common_1.useEventMap(formFieldEventMap, state, config, {});
+    var state = __assign(__assign({}, config), { id: id });
     return {
         state: state,
-        events: events,
+        events: {},
     };
-};
-exports.useFormFieldModel = useFormFieldModel;
+});

package/dist/commonjs/index.d.ts

@@ -2,6 +2,7 @@ export * from './breadcrumbs';
 export * from './color-picker';
 export * from './form-field';
 export * from './menu';
+export * from './pill';
 export * from './select';
 export * from './side-panel';
 export * from './text-area';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC"}

package/dist/commonjs/index.js

@@ -14,6 +14,7 @@ __exportStar(require("./breadcrumbs"), exports);
 __exportStar(require("./color-picker"), exports);
 __exportStar(require("./form-field"), exports);
 __exportStar(require("./menu"), exports);
+__exportStar(require("./pill"), exports);
 __exportStar(require("./select"), exports);
 __exportStar(require("./side-panel"), exports);
 __exportStar(require("./text-area"), exports);

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

@@ -268,7 +268,7 @@ var Menu = /** @class */ (function (_super) {
         var _a = this.props, _b = _a.id, id = _b === void 0 ? this.id : _b, _c = _a.isOpen, isOpen = _c === void 0 ? true : _c, children = _a.children, ariaLabelledby = _a["aria-labelledby"], grow = _a.grow, width = _a.width, onSelect = _a.onSelect, onClose = _a.onClose, initialSelectedItem = _a.initialSelectedItem, elemProps = __rest(_a, ["id", "isOpen", "children", 'aria-labelledby', "grow", "width", "onSelect", "onClose", "initialSelectedItem"]);
         var selectedItemIndex = this.state.selectedItemIndex;
         var cardWidth = grow ? '100%' : width;
-        return (React.createElement(card_1.Card, { style: { display: 'inline-block' }, padding: tokens_1.space.zero, width: cardWidth },
+        return (React.createElement(card_1.Card, { display: "inline-block", padding: tokens_1.space.zero, width: cardWidth, depth: 3 },
             React.createElement(card_1.Card.Body, null,
                 React.createElement(List, __assign({ role: "menu", tabIndex: 0, id: id, "aria-labelledby": ariaLabelledby, "aria-activedescendant": id + "-" + selectedItemIndex, onKeyDown: this.handleKeyboardShortcuts, ref: this.menuRef }, elemProps), React.Children.map(children, function (menuItem, index) {
                     if (!React.isValidElement(menuItem)) {

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

@@ -0,0 +1,3 @@
+export * from './lib/Pill';
+export * from './lib/usePillModel';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../pill/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC"}

package/dist/commonjs/pill/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+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 });
+__exportStar(require("./lib/Pill"), exports);
+__exportStar(require("./lib/usePillModel"), exports);

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+export interface PillProps extends BoxProps {
+    /**
+     * Defines what kind of pill to render stylistically and its interaction states
+     * @default 'default'
+     */
+    variant?: 'default' | 'readOnly' | 'removable';
+}
+export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
+    maxWidth: string | number;
+    disabled: boolean;
+}> & {} & {}, {
+    state: {
+        maxWidth: string | number;
+        disabled: boolean;
+    };
+    events: {};
+}> & {
+    Context: React.Context<{
+        state: {
+            maxWidth: string | number;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+} & {
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
+        state: {
+            maxWidth: string | number;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+    Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillAvatar").PillAvatarProps, {
+        state: {
+            maxWidth: string | number;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+    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: {
+            maxWidth: string | number;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+    IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
+        state: {
+            maxWidth: string | number;
+            disabled: boolean;
+        };
+        events: {};
+    }>;
+};
+//# sourceMappingURL=Pill.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,164 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pill = void 0;
+var react_1 = __importDefault(require("react"));
+var button_1 = require("@workday/canvas-kit-react/button");
+var common_1 = require("@workday/canvas-kit-react/common");
+var layout_1 = require("@workday/canvas-kit-react/layout");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var usePillModel_1 = require("./usePillModel");
+var PillIcon_1 = require("./PillIcon");
+var PillIconButton_1 = require("./PillIconButton");
+var PillCount_1 = require("./PillCount");
+var PillAvatar_1 = require("./PillAvatar");
+var PillLabel_1 = require("./PillLabel");
+var getButtonPillColors = function () {
+    return {
+        default: {
+            background: tokens_1.colors.soap300,
+            icon: tokens_1.colors.licorice200,
+            label: tokens_1.colors.blackPepper400,
+            border: tokens_1.colors.licorice200,
+        },
+        hover: {
+            icon: tokens_1.colors.licorice500,
+            background: tokens_1.colors.soap400,
+            border: tokens_1.colors.licorice400,
+        },
+        active: {
+            icon: tokens_1.colors.licorice500,
+            background: tokens_1.colors.soap500,
+            border: tokens_1.colors.licorice500,
+        },
+        focus: {
+            icon: tokens_1.colors.licorice500,
+            background: tokens_1.colors.soap300,
+            border: tokens_1.colors.blueberry400,
+            focusRing: common_1.focusRing({
+                width: 0,
+                inset: 'inner',
+                innerColor: tokens_1.colors.blueberry400,
+                outerColor: tokens_1.colors.blueberry400,
+                separation: 1,
+            }),
+        },
+        disabled: {
+            icon: tokens_1.colors.licorice100,
+            label: tokens_1.colors.licorice100,
+            background: tokens_1.colors.soap100,
+            border: tokens_1.colors.licorice100,
+            opacity: '1',
+        },
+    };
+};
+var getRemovablePillColors = function (disabled) {
+    return {
+        default: {
+            background: disabled ? tokens_1.colors.soap100 : tokens_1.colors.soap300,
+            icon: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice200,
+            label: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.blackPepper400,
+            border: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice200,
+        },
+        hover: {
+            icon: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice500,
+            background: disabled ? tokens_1.colors.soap100 : tokens_1.colors.soap300,
+            border: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice200,
+            label: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.blackPepper400,
+        },
+        active: {
+            icon: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice500,
+            background: disabled ? tokens_1.colors.soap100 : tokens_1.colors.soap500,
+            border: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice500,
+            label: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.blackPepper400,
+        },
+        focus: {
+            icon: tokens_1.colors.licorice200,
+            background: tokens_1.colors.soap300,
+            label: tokens_1.colors.blackPepper400,
+            focusRing: common_1.focusRing({
+                width: 0,
+                innerColor: 'transparent',
+                outerColor: 'transparent',
+            }),
+        },
+        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,
+            borderRight: "1px solid " + tokens_1.colors.blueberry400,
+        },
+    }, '&:active, &:active:hover, &:active:focus': {
+        'span[data-count="ck-pill-count"]': {
+            backgroundColor: tokens_1.colors.soap600,
+            border: 'none',
+        },
+    } }), common_1.mouseFocusBehavior({
+    '&:focus': {
+        'span[data-count="ck-pill-count"]': {
+            border: 'none',
+        },
+    },
+})), layout_1.boxStyleFn);
+var StyledNonInteractivePill = common_1.styled(StyledBasePill)({
+    cursor: 'default',
+    overflow: 'revert',
+});
+exports.Pill = common_1.createContainer('button')({
+    modelHook: usePillModel_1.usePillModel,
+    subComponents: {
+        Icon: PillIcon_1.PillIcon,
+        Avatar: PillAvatar_1.PillAvatar,
+        Count: PillCount_1.PillCount,
+        Label: PillLabel_1.PillLabel,
+        IconButton: PillIconButton_1.PillIconButton,
+    },
+})(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),
+            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) {
+                if (typeof child === 'string') {
+                    return react_1.default.createElement(PillLabel_1.PillLabel, { key: index }, child);
+                }
+                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),
+            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);
+                }
+                return react_1.default.createElement(layout_1.Stack.Item, { key: index }, child);
+            }))))));
+});

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

@@ -0,0 +1,11 @@
+import { AvatarProps } from '@workday/canvas-kit-react/avatar';
+export interface PillAvatarProps extends AvatarProps {
+}
+export declare const PillAvatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillAvatarProps, {
+    state: {
+        maxWidth: string | number;
+        disabled: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=PillAvatar.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,29 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PillAvatar = void 0;
+var react_1 = __importDefault(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var avatar_1 = require("@workday/canvas-kit-react/avatar");
+var usePillModel_1 = require("./usePillModel");
+// When the component is created, it needs to be a button element to match AvatarProps.
+// Once Avatar becomes a `createComponent` we can default the element type to a `div`
+// and the types should be properly extracted
+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));
+});

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

@@ -0,0 +1,5 @@
+import { FlexProps } from '@workday/canvas-kit-react/layout';
+export interface PillCountProps extends FlexProps {
+}
+export declare const PillCount: import("@workday/canvas-kit-react/common").ElementComponent<"span", PillCountProps>;
+//# sourceMappingURL=PillCount.d.ts.map