@workday/canvas-kit-preview-react 9.0.0-alpha.338-next.5 → 9.0.0-alpha.348-next.3

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

@@ -2,7 +2,6 @@ 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;
     /**
@@ -13,13 +12,12 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
      * - `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()`
+     * @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;
 }> & {} & {}) | undefined) => {
@@ -28,13 +26,11 @@ 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;
         /**
          * 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;
     };
@@ -43,7 +39,6 @@ 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;
     /**
@@ -54,13 +49,12 @@ export declare const useFormFieldModel: (<TT_Special_Generic>(config?: (Partial<
      * - `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()`
+     * @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;
 }, {}, {
@@ -68,13 +62,11 @@ 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;
     /**
      * 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;
 }, {}, {
@@ -83,13 +75,11 @@ 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;
         /**
          * 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;
     };

package/dist/es6/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":"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"}
+{"version":3,"file":"useFormFieldModel.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,iBAAiB;IAE1B;;;OAGG;;IAEH;;;;;;;;;OASG;;IAEH;;;OAGG;;;;;QAnBH;;;WAGG;;QAaH;;;WAGG;;;;;IAnBH;;;OAGG;;IAEH;;;;;;;;;OASG;;IAEH;;;OAGG;;;;IAnBH;;;OAGG;;IAaH;;;OAGG;;;;;QAnBH;;;WAGG;;QAaH;;;WAGG;;;;EAeL,CAAC"}

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

@@ -15,7 +15,6 @@ export var useFormFieldModel = createModelHook({
         /**
          * 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,
         /**
@@ -26,13 +25,12 @@ export var useFormFieldModel = createModelHook({
          * - `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()`
+         * @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,
     },

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

@@ -56,12 +56,19 @@ export interface DeprecatedMenuState {
     selectedItemIndex: number;
 }
 /**
- * ### Deprecated Menu
+ * As of Canvas Kit v8, this component is being soft-deprecated. It will be hard-deprecated
+ * (completely removed) in v9. Please see the [upgrade
+ * guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
+ * more information.
  *
- * As of Canvas Kit v8, this component is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v9. Please see the
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
- * for more information.
+ * `DeprecatedMenu` renders a styled `<ul role="menu">` element within a {@link Card} and follows
+ * the [Active Menu
+ * pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
+ * using `aria-activedescendant`.
+ *
+ * Undocumented props are spread to the underlying `<ul>` element.
+ *
+ * @deprecated
  */
 export declare class DeprecatedMenu extends React.Component<DeprecatedMenuProps, DeprecatedMenuState> {
     private id;

package/dist/es6/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,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,GAC3C,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD;;;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;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD;;;;;;;GAOG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,mBAAmB;IAetC,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAejD,iBAAiB;IAYjB,oBAAoB;IAIb,MAAM;IAyDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA+E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CAkCxB;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,uBAAuB,EAAC,MAAM,YAAY,CAAC;AAGnD,OAAO,EAAiB,cAAc,EAAmB,MAAM,kCAAkC,CAAC;AAElG;;;;;;;GAOG;AACH,MAAM,WAAW,mBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACxC;;OAEG;IACH,QAAQ,CAAC,EACL,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,GAC3C,KAAK,CAAC,YAAY,CAAC,uBAAuB,CAAC,EAAE,CAAC;IAClD;;;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;;;;;;;GAOG;AACH,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,MAAM,CAAC;CAC3B;AAaD;;;;;;;;;;;;;;GAcG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,SAAS,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;IAC3F,OAAO,CAAC,EAAE,CAAsB;IAChC,OAAO,CAAC,SAAS,CAAU;IAE3B,OAAO,CAAC,OAAO,CAAoC;IACnD,OAAO,CAAC,eAAe,CAAY;gBAEvB,KAAK,EAAE,mBAAmB;IAetC,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAejD,iBAAiB;IAYjB,oBAAoB;IAIb,MAAM;IAyDN,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,MAAM,CAQjE;IAEK,sBAAsB,UAAW,MAAM,GAAG,SAAS,KAAG,IAAI,CAE/D;IAEF,OAAO,CAAC,uBAAuB,CA+E7B;IAEF,OAAO,CAAC,WAAW,CAoBjB;IAEF,OAAO,CAAC,kBAAkB,CAWxB;IAEF,OAAO,CAAC,kBAAkB,CAkCxB;IAEF,OAAO,CAAC,sBAAsB,CAU5B;IAEF,OAAO,CAAC,sBAAsB,CAG5B;CACH"}

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

@@ -6,6 +6,8 @@ var __extends = (this && this.__extends) || (function () {
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -42,12 +44,19 @@ var List = styled('ul')(__assign({ background: commonColors.background, borderRa
         outline: 'none',
     } }, hideMouseFocus));
 /**
- * ### Deprecated Menu
+ * As of Canvas Kit v8, this component is being soft-deprecated. It will be hard-deprecated
+ * (completely removed) in v9. Please see the [upgrade
+ * guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
+ * more information.
  *
- * As of Canvas Kit v8, this component is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v9. Please see the
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
- * for more information.
+ * `DeprecatedMenu` renders a styled `<ul role="menu">` element within a {@link Card} and follows
+ * the [Active Menu
+ * pattern](https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions-active-descendant.html)
+ * using `aria-activedescendant`.
+ *
+ * Undocumented props are spread to the underlying `<ul>` element.
+ *
+ * @deprecated
  */
 var DeprecatedMenu = /** @class */ (function (_super) {
     __extends(DeprecatedMenu, _super);

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

@@ -57,12 +57,22 @@ export interface DeprecatedMenuItemProps extends React.LiHTMLAttributes<HTMLLIEl
     shouldClose?: boolean;
 }
 /**
- * ### Deprecated Menu Item
+ * `DeprecatedMenuItem` renders an `<li>` element with the correct attributes to ensure it is
+ * accessible. If you choose to implement your own custom menu items, be sure to use semantic `<li>`
+ * elements with the following attributes:
  *
- * As of Canvas Kit v8, Menu is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v9. Please see the
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
- * for more information.
+ * - `role="menuitem"`
+ * - `tabindex={-1}`
+ * - `id`s following this pattern: `${MenuId}-${index}`
+ *
+ * As of Canvas Kit v8, Menu is being soft-deprecated. It will be hard-deprecated (completely
+ * removed) in v9. Please see the [upgrade
+ * guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
+ * more information.
+ *
+ * Undocumented props are spread to the underlying `<li>` element.
+ *
+ * @deprecated
  */
 export declare class DeprecatedMenuItem extends React.Component<DeprecatedMenuItemProps> {
     ref: React.RefObject<HTMLLIElement>;

package/dist/es6/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;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACpF;;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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;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;AA2LD;;;;;;;GAOG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;IAC9E,GAAG,iCAAoC;IAEvC,iBAAiB;IASjB,kBAAkB,cAAe,uBAAuB,UAMtD;IAEF,MAAM;IA4CN,OAAO,CAAC,WAAW,CAOjB;CACH"}
+{"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;;;;;;;GAOG;AACH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACpF;;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,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;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;AA2LD;;;;;;;;;;;;;;;;;GAiBG;AACH,qBAAa,kBAAmB,SAAQ,KAAK,CAAC,SAAS,CAAC,uBAAuB,CAAC;IAC9E,GAAG,iCAAoC;IAEvC,iBAAiB;IASjB,kBAAkB,cAAe,uBAAuB,UAMtD;IAEF,MAAM;IA4CN,OAAO,CAAC,WAAW,CAOjB;CACH"}

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

@@ -6,6 +6,8 @@ var __extends = (this && this.__extends) || (function () {
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -118,7 +120,7 @@ var Divider = styled('hr')({
 var iconSize = 24;
 var iconPadding = 16;
 var StyledSystemIcon = styled(SystemIcon)({
-    minWidth: iconSize + iconPadding,
+    minWidth: iconSize + iconPadding, // gives padding between LabelContainer, no matter the direction
 });
 var SecondaryStyledSystemIcon = styled(SystemIcon)({
     display: "flex",
@@ -172,12 +174,22 @@ var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
     }
 };
 /**
- * ### Deprecated Menu Item
+ * `DeprecatedMenuItem` renders an `<li>` element with the correct attributes to ensure it is
+ * accessible. If you choose to implement your own custom menu items, be sure to use semantic `<li>`
+ * elements with the following attributes:
+ *
+ * - `role="menuitem"`
+ * - `tabindex={-1}`
+ * - `id`s following this pattern: `${MenuId}-${index}`
+ *
+ * As of Canvas Kit v8, Menu is being soft-deprecated. It will be hard-deprecated (completely
+ * removed) in v9. Please see the [upgrade
+ * guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page) for
+ * more information.
+ *
+ * Undocumented props are spread to the underlying `<li>` element.
  *
- * As of Canvas Kit v8, Menu is being soft-deprecated.
- * It will be hard-deprecated (completely removed) in v9. Please see the
- * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
- * for more information.
+ * @deprecated
  */
 var DeprecatedMenuItem = /** @class */ (function (_super) {
     __extends(DeprecatedMenuItem, _super);

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

@@ -6,6 +6,49 @@ export interface PillProps extends BoxProps {
      */
     variant?: 'default' | 'readOnly' | 'removable';
 }
+/**
+ * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
+ * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
+ * (icons or avatars) are intended to be descriptive, helping support the label. They should not
+ * receive focus.
+ *
+ * `Pill` is the container component. It also provides a React context model for its subcomponents.
+ * Based on the `variant` prop this component will render different styled `Pill`s.
+ *
+ * Example of read only:
+ *
+ * ```tsx
+ * <Pill variant="readOnly">This is a read only</Pill>
+ * ```
+ *
+ * Example of interactive:
+ *
+ * ```tsx
+ * <Pill onClick={() => console.log('clicked')}>
+ *   <Pill.Avatar /> Regina Skeltor
+ * </Pill>
+ * ```
+ *
+ * Example of removable:
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   <Pill.Avatar /> Regina Skeltor
+ *   <Pill.IconButton onClick={() => console.log('clicked')} />
+ * </Pill>
+ * ```
+ *
+ * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
+ * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
+ * intentional click target that prevents users from accidentally deleting an item.
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   Shoes
+ *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+ * </Pill>
+ * ```
+ */
 export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
     maxWidth: string | number;
     disabled: boolean;
@@ -18,7 +61,18 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
     };
     events: {};
 }> & {
-    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
+    /**
+     * This component renders an avatar. It supports all props of the `Avatar` component.
+     *
+     * ```tsx
+     * <Pill variant="removable">
+     *   <Pill.Avatar url={avatarUrl} />
+     *   Regina Skeltor
+     *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+     * </Pill>
+     * ```
+     */
+    Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillAvatar").PillAvatarProps, {
         state: {
             id: string;
             maxWidth: string | number;
@@ -26,7 +80,30 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
         };
         events: {};
     }>;
-    Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillAvatar").PillAvatarProps, {
+    /**
+     * This component renders its `children` as the count.
+     *
+     * ```tsx
+     * <Pill onClick={() => console.warn('clicked')}>
+     *   Shoes
+     *   <Pill.Count>30</Pill.Count>
+     * </Pill>
+     * ```
+     */
+    Count: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./PillCount").PillCountProps>;
+    /**
+     * This component renders an `icon`. It not be used with the `default` styling – not `readOnly`
+     * or `removable` variants. By default it renders a `plusIcon` but it can be overridden by
+     * providing an icon to the `icon` prop.
+     *
+     * ```tsx
+     * <Pill onClick={() => console.warn('clicked')}>
+     *   <Pill.Icon />
+     *   <Pill.Label>Regina Skeltor</Pill.Label>
+     * </Pill>
+     * ```
+     */
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
         state: {
             id: string;
             maxWidth: string | number;
@@ -34,8 +111,19 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
         };
         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, {
+    /**
+     * This component renders a custom icon button. It is only intended to be used with the
+     * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
+     * an icon to the `icon` prop.
+     *
+     * ```tsx
+     * <Pill variant="removable">
+     *   Pink Shirts
+     *   <Pill.IconButton onClick={() => console.warn('clicked')} />
+     * </Pill>
+     * ```
+     */
+    IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
         state: {
             id: string;
             maxWidth: string | number;
@@ -43,7 +131,17 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
         };
         events: {};
     }>;
-    IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
+    /**
+     * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
+     * There's no need to use this component directly since the overflow is handled for you automatically.
+     *
+     * ```tsx
+     * <Pill variant="readOnly">
+     *   <Pill.Label>Read-only</Pill.Label>
+     * </Pill>
+     * ```
+     */
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillLabel").PillLabelProps, {
         state: {
             id: string;
             maxWidth: string | number;

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

@@ -1 +1 @@
-{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAW5E,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"}
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../../pill/lib/Pill.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAC,QAAQ,EAAmB,MAAM,kCAAkC,CAAC;AAW5E,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,UAAU,GAAG,WAAW,CAAC;CAChD;AAsID;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;IAIb;;;;;;;;;;OAUG;;;;;;;;;IAEH;;;;;;;;;OASG;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;;;OAWG;;;;;;;;;IAEH;;;;;;;;;OASG;;;;;;;;;CAyDL,CAAC"}

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

@@ -134,14 +134,113 @@ var StyledNonInteractivePill = styled(StyledBasePill)({
     overflow: 'revert',
     position: 'relative',
 });
+/**
+ * By default, a `Pill` renders an interactive element that accepts subcomponents. By "interactive"
+ * we mean that the Pill container is a focusable element (a `<button>`). All leading elements
+ * (icons or avatars) are intended to be descriptive, helping support the label. They should not
+ * receive focus.
+ *
+ * `Pill` is the container component. It also provides a React context model for its subcomponents.
+ * Based on the `variant` prop this component will render different styled `Pill`s.
+ *
+ * Example of read only:
+ *
+ * ```tsx
+ * <Pill variant="readOnly">This is a read only</Pill>
+ * ```
+ *
+ * Example of interactive:
+ *
+ * ```tsx
+ * <Pill onClick={() => console.log('clicked')}>
+ *   <Pill.Avatar /> Regina Skeltor
+ * </Pill>
+ * ```
+ *
+ * Example of removable:
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   <Pill.Avatar /> Regina Skeltor
+ *   <Pill.IconButton onClick={() => console.log('clicked')} />
+ * </Pill>
+ * ```
+ *
+ * If you set the `Pill` `variant` to `removable`, it will render a `<span>` element. You can then
+ * provide a `Pill.IconButton` that acts as the focus target. This creates a smaller, more
+ * intentional click target that prevents users from accidentally deleting an item.
+ *
+ * ```tsx
+ * <Pill variant="removable">
+ *   Shoes
+ *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+ * </Pill>
+ * ```
+ */
 export var Pill = createContainer('button')({
+    displayName: 'Pill',
     modelHook: usePillModel,
     subComponents: {
-        Icon: PillIcon,
+        /**
+         * This component renders an avatar. It supports all props of the `Avatar` component.
+         *
+         * ```tsx
+         * <Pill variant="removable">
+         *   <Pill.Avatar url={avatarUrl} />
+         *   Regina Skeltor
+         *   <Pill.IconButton onClick={() => console.log('handle remove')} />
+         * </Pill>
+         * ```
+         */
         Avatar: PillAvatar,
+        /**
+         * This component renders its `children` as the count.
+         *
+         * ```tsx
+         * <Pill onClick={() => console.warn('clicked')}>
+         *   Shoes
+         *   <Pill.Count>30</Pill.Count>
+         * </Pill>
+         * ```
+         */
         Count: PillCount,
-        Label: PillLabel,
+        /**
+         * This component renders an `icon`. It not be used with the `default` styling – not `readOnly`
+         * or `removable` variants. By default it renders a `plusIcon` but it can be overridden by
+         * providing an icon to the `icon` prop.
+         *
+         * ```tsx
+         * <Pill onClick={() => console.warn('clicked')}>
+         *   <Pill.Icon />
+         *   <Pill.Label>Regina Skeltor</Pill.Label>
+         * </Pill>
+         * ```
+         */
+        Icon: PillIcon,
+        /**
+         * This component renders a custom icon button. It is only intended to be used with the
+         * `removable` variant. By default, it renders a `xSmallIcon` but can be overridden by providing
+         * an icon to the `icon` prop.
+         *
+         * ```tsx
+         * <Pill variant="removable">
+         *   Pink Shirts
+         *   <Pill.IconButton onClick={() => console.warn('clicked')} />
+         * </Pill>
+         * ```
+         */
         IconButton: PillIconButton,
+        /**
+         * This component renders a `<span>` that automatically handles overflow by rendering a tooltip.
+         * There's no need to use this component directly since the overflow is handled for you automatically.
+         *
+         * ```tsx
+         * <Pill variant="readOnly">
+         *   <Pill.Label>Read-only</Pill.Label>
+         * </Pill>
+         * ```
+         */
+        Label: PillLabel,
     },
 })(function (_a, Element, model) {
     var _b = _a.variant, variant = _b === void 0 ? 'default' : _b, maxWidth = _a.maxWidth, elemProps = __rest(_a, ["variant", "maxWidth"]);

package/dist/es6/segmented-control/index.d.ts

@@ -1,3 +1,5 @@
 export * from './lib/SegmentedControl';
 export * from './lib/hooks/useSegmentedControlModel';
+export * from './lib/hooks/useSegmentedControlItem';
+export { useSegmentedControlList } from './lib/SegmentedControlList';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/segmented-control/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../segmented-control/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../segmented-control/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,sCAAsC,CAAC;AACrD,cAAc,qCAAqC,CAAC;AACpD,OAAO,EAAC,uBAAuB,EAAC,MAAM,4BAA4B,CAAC"}

package/dist/es6/segmented-control/index.js

@@ -1,2 +1,4 @@
 export * from './lib/SegmentedControl';
 export * from './lib/hooks/useSegmentedControlModel';
+export * from './lib/hooks/useSegmentedControlItem';
+export { useSegmentedControlList } from './lib/SegmentedControlList';