@workday/canvas-kit-preview-react 7.0.0-alpha.103-next.28 → 7.0.0-alpha.129-next.3

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

@@ -203,6 +203,7 @@ var MenuItem = /** @class */ (function (_super) {
     };
     return MenuItem;
 }(React.Component));
+export { 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.
@@ -214,4 +215,3 @@ MenuItem.defaultProps = {
     shouldClose: true,
     role: 'menuitem',
 };
-export default MenuItem;

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

@@ -8,18 +8,21 @@ export interface PillProps extends BoxProps {
     variant?: 'default' | 'readOnly' | 'removable';
 }
 export declare const Pill: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillProps & Partial<{
-    maxWidth: React.ReactText;
+    maxWidth: string | number;
     disabled: boolean;
+    id: string;
 }> & {} & {}, {
     state: {
-        maxWidth: React.ReactText;
+        id: string;
+        maxWidth: string | number;
         disabled: boolean;
     };
     events: {};
 }> & {
     Context: React.Context<{
         state: {
-            maxWidth: React.ReactText;
+            id: string;
+            maxWidth: string | number;
             disabled: boolean;
         };
         events: {};
@@ -27,14 +30,16 @@ export declare const Pill: import("@workday/canvas-kit-react/common").ElementCom
 } & {
     Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./PillIcon").PillIconProps, {
         state: {
-            maxWidth: React.ReactText;
+            id: string;
+            maxWidth: string | number;
             disabled: boolean;
         };
         events: {};
     }>;
     Avatar: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillAvatar").PillAvatarProps, {
         state: {
-            maxWidth: React.ReactText;
+            id: string;
+            maxWidth: string | number;
             disabled: boolean;
         };
         events: {};
@@ -42,14 +47,16 @@ 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: {
-            maxWidth: React.ReactText;
+            id: string;
+            maxWidth: string | number;
             disabled: boolean;
         };
         events: {};
     }>;
     IconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", import("./PillIconButton").PillIconButtonProps, {
         state: {
-            maxWidth: React.ReactText;
+            id: string;
+            maxWidth: string | number;
             disabled: boolean;
         };
         events: {};

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":"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/es6/pill/lib/Pill.js

@@ -105,7 +105,6 @@ var getRemovablePillColors = function (disabled) {
 };
 var pillBaseStyles = __assign(__assign({ display: 'inline-flex', alignItems: 'center', borderRadius: borderRadius.m, flexShrink: 0 }, type.levels.subtext.large), { color: colors.blackPepper400, boxShadow: 'none', outline: 'none', fontWeight: type.properties.fontWeights.medium, WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', width: 'fit-content', padding: "2px " + space.xxs, height: space.m, position: 'relative' });
 var StyledBasePill = styled(BaseButton.as('button'))(__assign(__assign(__assign({}, pillBaseStyles), { '&:focus': {
-        borderColor: colors.blueberry400,
         'span[data-count="ck-pill-count"]': {
             borderTop: "1px solid " + colors.blueberry400,
             borderBottom: "1px solid " + colors.blueberry400,
@@ -122,10 +121,18 @@ var StyledBasePill = styled(BaseButton.as('button'))(__assign(__assign(__assign(
             border: 'none',
         },
     },
-})), boxStyleFn);
+})), function (_a) {
+    var variant = _a.variant;
+    return ({
+        '&:focus': {
+            borderColor: variant === 'removable' ? undefined : colors.blueberry400,
+        },
+    });
+}, boxStyleFn);
 var StyledNonInteractivePill = styled(StyledBasePill)({
     cursor: 'default',
     overflow: 'revert',
+    position: 'relative',
 });
 export var Pill = createContainer('button')({
     modelHook: usePillModel,
@@ -139,7 +146,7 @@ export var Pill = 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.createElement(React.Fragment, null,
-        variant === 'readOnly' && (React.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + colors.licorice200 }, elemProps),
+        variant === 'readOnly' && (React.createElement(StyledNonInteractivePill, __assign({ maxWidth: model.state.maxWidth, as: Element !== 'button' ? Element : 'span', border: "1px solid " + colors.licorice200, id: model.state.id }, elemProps),
             React.createElement(PillLabel, null, elemProps.children))),
         variant === 'default' && (React.createElement(StyledBasePill, __assign({ colors: getButtonPillColors(), as: Element }, elemProps, { disabled: model.state.disabled }),
             React.createElement(HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center" }, React.Children.map(elemProps.children, function (child, index) {
@@ -148,7 +155,7 @@ export var Pill = createContainer('button')({
                 }
                 return (React.createElement(Stack.Item, { key: index, display: "inline-flex" }, child));
             })))),
-        variant === 'removable' && (React.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span' }, elemProps),
+        variant === 'removable' && (React.createElement(StyledNonInteractivePill, __assign({ colors: getRemovablePillColors(model.state.disabled), as: Element !== 'button' ? Element : 'span', variant: variant }, elemProps),
             React.createElement(HStack, { spacing: "xxxs", display: "inline-flex", alignItems: "center", justifyContent: "center" }, React.Children.map(elemProps.children, function (child, index) {
                 if (typeof child === 'string') {
                     return React.createElement(PillLabel, { key: index }, child);

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

@@ -1,10 +1,10 @@
-import React from 'react';
 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: React.ReactText;
+        id: string;
+        maxWidth: string | number;
         disabled: boolean;
     };
     events: {};

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

@@ -1 +1 @@
-{"version":3,"file":"PillAvatar.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillAvatar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,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/es6/pill/lib/PillAvatar.js

@@ -19,5 +19,5 @@ import { usePillModel } from './usePillModel';
 export var PillAvatar = createSubcomponent('button')({
     modelHook: usePillModel,
 })(function (elemProps, Element, model) {
-    return (React.createElement(Avatar, __assign({ style: { opacity: model.state.disabled ? '.7' : '1' }, as: "div", size: 18 }, elemProps, { disabled: model.state.disabled }), elemProps.children));
+    return (React.createElement(Avatar, __assign({ style: { opacity: model.state.disabled ? '.7' : '1' }, as: "div", size: 18, altText: undefined }, elemProps, { disabled: model.state.disabled }), elemProps.children));
 });

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SystemIconProps } from '@workday/canvas-kit-react/icon';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 export interface PillIconProps extends Omit<SystemIconProps, 'icon'> {
@@ -10,7 +9,8 @@ export interface PillIconProps extends Omit<SystemIconProps, 'icon'> {
 }
 export declare const PillIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillIconProps, {
     state: {
-        maxWidth: React.ReactText;
+        id: string;
+        maxWidth: string | number;
         disabled: boolean;
     };
     events: {};

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

@@ -1 +1 @@
-{"version":3,"file":"PillIcon.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,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/es6/pill/lib/PillIcon.js

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

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { SystemIconProps } from '@workday/canvas-kit-react/icon';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
@@ -7,10 +6,16 @@ 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: {
-        maxWidth: React.ReactText;
+        id: string;
+        maxWidth: string | number;
         disabled: boolean;
     };
     events: {};

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

@@ -1 +1 @@
-{"version":3,"file":"PillIconButton.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillIconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,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/es6/pill/lib/PillIconButton.js

@@ -25,7 +25,7 @@ import { focusRing, styled, createSubcomponent } from '@workday/canvas-kit-react
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { usePillModel } from './usePillModel';
 import { xSmallIcon } from '@workday/canvas-system-icons-web';
-import { borderRadius, colors, space } from '@workday/canvas-kit-react/tokens';
+import { colors, space } from '@workday/canvas-kit-react/tokens';
 import { BaseButton } from '@workday/canvas-kit-react/button';
 var getIconColors = function () {
     return {
@@ -41,9 +41,7 @@ var getIconColors = function () {
         focus: {
             icon: colors.licorice500,
             focusRing: focusRing({
-                width: 0,
                 innerColor: 'transparent',
-                outerColor: 'transparent',
             }),
         },
         disabled: {
@@ -52,31 +50,26 @@ var getIconColors = function () {
         },
     };
 };
-var StyledFocusTarget = styled('span')({
-    height: 20,
-    position: 'absolute',
-    right: '5px',
-    left: space.xxxs,
-    margin: 0,
-    borderRadius: borderRadius.m,
-    '&:focus': __assign({ outline: 'none' }, focusRing({
-        outerColor: colors.blueberry400,
-        innerColor: 'transparent',
-        separation: 0,
-        width: 2,
-        inset: 'inner',
-    })),
-});
 var StyledIconButton = styled(BaseButton)({
-    marginInlineEnd: '-14px !important',
-    paddingInlineEnd: space.xxxs,
-    marginInlineStart: "-" + space.xxs + " !important",
+    marginInlineEnd: '-7px',
+    marginInlineStart: "-2px",
+    overflow: 'visible',
+    '::after': {
+        content: '""',
+        height: space.l,
+        width: space.l,
+        position: 'absolute',
+        left: '-7px',
+        bottom: '-7px',
+        margin: 0,
+        pointerEvents: 'all',
+        cursor: 'pointer',
+    },
 });
 export var PillIconButton = createSubcomponent('button')({
     modelHook: usePillModel,
 })(function (_a, Element, model) {
-    var size = _a.size, _b = _a.icon, icon = _b === void 0 ? xSmallIcon : _b, maxWidth = _a.maxWidth, children = _a.children, elemProps = __rest(_a, ["size", "icon", "maxWidth", "children"]);
-    return (React.createElement(StyledIconButton, __assign({ borderRadius: "s", height: space.l, width: space.l, padding: "zero", disabled: model.state.disabled, colors: getIconColors(), tabIndex: -1, as: Element, position: "relative" }, elemProps),
-        React.createElement(StyledFocusTarget, { "aria-hidden": "true", tabIndex: model.state.disabled ? -1 : 0 }),
-        React.createElement(SystemIcon, { icon: icon, size: 24 })));
+    var size = _a.size, _b = _a.icon, icon = _b === void 0 ? 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.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.createElement(SystemIcon, { "aria-label": ariaLabel, id: "removable-" + model.state.id, icon: icon, size: space.m, "aria-hidden": true, role: "img" })));
 });

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

@@ -1,4 +1,3 @@
-import React from 'react';
 import { BoxProps } from '@workday/canvas-kit-react/layout';
 import { OverflowTooltipProps } from '@workday/canvas-kit-react/tooltip';
 export interface PillLabelProps extends BoxProps {
@@ -6,7 +5,8 @@ export interface PillLabelProps extends BoxProps {
 }
 export declare const PillLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillLabelProps, {
     state: {
-        maxWidth: React.ReactText;
+        id: string;
+        maxWidth: string | number;
         disabled: boolean;
     };
     events: {};

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

@@ -1 +1 @@
-{"version":3,"file":"PillLabel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,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/es6/pill/lib/PillLabel.js

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

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

@@ -3,18 +3,24 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
      * Determines the max width of the pill. If the pill text is longer than the max width,
      * text will be truncated and a tooltip will show the rest of the content when hovered over
      */
-    maxWidth: import("react").ReactText;
+    maxWidth: string | number;
     /**
      * Use to disable a pill.
      */
     disabled: boolean;
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: string;
 }> & {} & {}) | undefined) => {
     state: {
+        id: string;
         /**
          * Determines the max width of the pill. If the pill text is longer than the max width,
          * text will be truncated and a tooltip will show the rest of the content when hovered over
          */
-        maxWidth: import("react").ReactText;
+        maxWidth: string | number;
         /**
          * Use to disable a pill.
          */
@@ -26,28 +32,35 @@ export declare const usePillModel: (<TT_Special_Generic>(config?: (Partial<{
      * Determines the max width of the pill. If the pill text is longer than the max width,
      * text will be truncated and a tooltip will show the rest of the content when hovered over
      */
-    maxWidth: import("react").ReactText;
+    maxWidth: string | number;
     /**
      * Use to disable a pill.
      */
     disabled: boolean;
+    /**
+     * ID used to add accessibility labels to pill elements.
+     * @default `useUniqueId()`
+     */
+    id: string;
 }, {}, {
+    id: string;
     /**
      * Determines the max width of the pill. If the pill text is longer than the max width,
      * text will be truncated and a tooltip will show the rest of the content when hovered over
      */
-    maxWidth: import("react").ReactText;
+    maxWidth: string | number;
     /**
      * Use to disable a pill.
      */
     disabled: boolean;
 }, {}, {
     state: {
+        id: string;
         /**
          * Determines the max width of the pill. If the pill text is longer than the max width,
          * text will be truncated and a tooltip will show the rest of the content when hovered over
          */
-        maxWidth: import("react").ReactText;
+        maxWidth: string | number;
         /**
          * Use to disable a pill.
          */

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

@@ -1 +1 @@
-{"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;;OAGG;;IAEH;;OAEG;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;;IAPH;;;OAGG;;IAEH;;OAEG;;;IAPH;;;OAGG;;IAEH;;OAEG;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;EASL,CAAC"}
+{"version":3,"file":"usePillModel.d.ts","sourceRoot":"","sources":["../../../../pill/lib/usePillModel.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;IAErB;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;;QAZH;;;WAGG;;QAEH;;WAEG;;;;;IAPH;;;OAGG;;IAEH;;OAEG;;IAEH;;;OAGG;;;;IAZH;;;OAGG;;IAEH;;OAEG;;;;;QAPH;;;WAGG;;QAEH;;WAEG;;;;EAgBL,CAAC"}

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

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { createModelHook } from '@workday/canvas-kit-react/common';
+import { createModelHook, useUniqueId } from '@workday/canvas-kit-react/common';
 export var usePillModel = createModelHook({
     defaultConfig: {
         /**
@@ -21,8 +21,14 @@ export var usePillModel = createModelHook({
          * Use to disable a pill.
          */
         disabled: false,
+        /**
+         * ID used to add accessibility labels to pill elements.
+         * @default `useUniqueId()`
+         */
+        id: '',
     },
 })(function (config) {
-    var state = __assign({}, config);
+    var id = useUniqueId(config.id);
+    var state = __assign(__assign({}, config), { id: id });
     return { state: state, events: {} };
 });

package/dist/es6/select/index.d.ts

@@ -1,6 +1,3 @@
-import Select from './lib/Select';
-export default Select;
-export { Select };
 export * from './lib/Select';
-export { Option, RenderableOption, RenderOptionFunction } from './lib/SelectBase';
+export { Option, RenderableOption, RenderOptionFunction, RenderSelectedFunction, } from './lib/SelectBase';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/select/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../select/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,cAAc,cAAc,CAAC;AAE7B,OAAO,EAAC,MAAM,EAAE,gBAAgB,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../select/index.ts"],"names":[],"mappings":"AACA,cAAc,cAAc,CAAC;AAE7B,OAAO,EACL,MAAM,EACN,gBAAgB,EAChB,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC"}

package/dist/es6/select/index.js

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

package/dist/es6/select/lib/Select.d.ts

@@ -21,5 +21,4 @@ export interface SelectProps extends CoreSelectBaseProps {
 export declare const Select: import("@workday/canvas-kit-react/common").ElementComponent<"button", SelectProps> & {
     ErrorType: typeof ErrorType;
 };
-export default Select;
 //# sourceMappingURL=Select.d.ts.map

package/dist/es6/select/lib/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAmB,EAAC,mBAAmB,EAAE,MAAM,EAAmB,MAAM,cAAc,CAAC;AAIvF,MAAM,WAAW,WAAY,SAAQ,mBAAmB;IACtD;;;;;;;;;;;;;;OAcG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAC9B;AAoiBD,eAAO,MAAM,MAAM;;CAUjB,CAAC;AAEH,eAAe,MAAM,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAa,mBAAmB,EAAE,MAAM,EAAmB,MAAM,cAAc,CAAC;AAIvF,MAAM,WAAW,WAAY,SAAQ,mBAAmB;IACtD;;;;;;;;;;;;;;OAcG;IACH,OAAO,EAAE,CAAC,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CAC9B;AAoiBD,eAAO,MAAM,MAAM;;CAUjB,CAAC"}

package/dist/es6/select/lib/Select.js

@@ -36,7 +36,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { ErrorType, createComponent, useForkRef, generateUniqueId, } from '@workday/canvas-kit-react/common';
 import { menuAnimationDuration } from './SelectMenu';
-import SelectBase from './SelectBase';
+import { SelectBase } from './SelectBase';
 import { getCorrectedIndexByValue } from './utils';
 var SelectContainer = /** @class */ (function (_super) {
     __extends(SelectContainer, _super);
@@ -494,4 +494,3 @@ export var Select = createComponent('button')({
         ErrorType: ErrorType,
     },
 });
-export default Select;

package/dist/es6/select/lib/SelectBase.d.ts

@@ -17,6 +17,9 @@ export interface NormalizedOption extends Option {
     id: string;
     label: string;
 }
+export interface RenderSelectedFunction {
+    (option: NormalizedOption): React.ReactNode;
+}
 export interface RenderableOption extends NormalizedOption {
     focused: boolean;
     selected: boolean;
@@ -47,6 +50,22 @@ export interface CoreSelectBaseProps extends Themeable, GrowthBehavior, Pick<Rea
      * @default defaultRenderOption
      */
     renderOption?: RenderOptionFunction;
+    /**
+     * The function called to render the selected option.
+     *
+     * The `option` argument passed to the function is an object which contains the following:
+     *
+     * * `data: object` (data object carried over from the corresponding option originally passed into the component)
+     * * `disabled: boolean`
+     * * `id: string`
+     * * `label: string`
+     * * `value: string`
+     *
+     * If you omit the `renderSelected` prop, each option will be rendered using a `defaultRenderSelected` function provided by the component.
+     *
+     * @default defaultRenderSelected
+     */
+    renderSelected?: RenderSelectedFunction;
     /**
      * The value of the Select.
      */
@@ -118,6 +137,6 @@ export interface SelectBaseProps extends CoreSelectBaseProps, StyledType {
 }
 export declare const buttonBorderWidth = 1;
 export declare const buttonDefaultWidth = 280;
-declare const SelectBase: ({ "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired, as, forwardedButtonRef, localButtonRef, disabled, error, focusedOptionIndex, grow, inputRef, menuPlacement, menuRef, menuVisibility, onChange, onKeyDown, onClose, onOptionSelection, options, renderOption, required, shouldMenuAutoFlip, shouldMenuAutoFocus, value, ...elemProps }: SelectBaseProps) => JSX.Element;
-export default SelectBase;
+export declare const SelectBase: ({ "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired, as, forwardedButtonRef, localButtonRef, disabled, error, focusedOptionIndex, grow, inputRef, menuPlacement, menuRef, menuVisibility, onChange, onKeyDown, onClose, onOptionSelection, options, renderOption, renderSelected, required, shouldMenuAutoFlip, shouldMenuAutoFocus, value, ...elemProps }: SelectBaseProps) => JSX.Element;
+export {};
 //# sourceMappingURL=SelectBase.d.ts.map

package/dist/es6/select/lib/SelectBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectBase.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectBase.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectBase.tsx"],"names":[],"mappings":"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"}

package/dist/es6/select/lib/SelectBase.js

@@ -25,8 +25,8 @@ import { errorRing, styled, useUniqueId, } from '@workday/canvas-kit-react/commo
 import { colors, borderRadius, inputColors, spaceNumbers, type, space, } from '@workday/canvas-kit-react/tokens';
 import { caretDownSmallIcon } from '@workday/canvas-system-icons-web';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import SelectMenu from './SelectMenu';
-import SelectOption from './SelectOption';
+import { SelectMenu } from './SelectMenu';
+import { SelectOption } from './SelectOption';
 import { scrollIntoViewIfNeeded } from './scrolling';
 import { getCorrectedIndexByValue } from './utils';
 export var buttonBorderWidth = 1;
@@ -101,10 +101,13 @@ var SelectWrapper = styled('div')({
     });
 });
 var defaultRenderOption = function (option) {
-    return React.createElement("div", null, option.label);
+    return React.createElement("div", null, defaultRenderSelected(option));
 };
-var SelectBase = function (_a) {
-    var ariaLabelledBy = _a["aria-labelledby"], ariaRequired = _a["aria-required"], as = _a.as, forwardedButtonRef = _a.forwardedButtonRef, localButtonRef = _a.localButtonRef, disabled = _a.disabled, error = _a.error, _b = _a.focusedOptionIndex, focusedOptionIndex = _b === void 0 ? 0 : _b, grow = _a.grow, inputRef = _a.inputRef, _c = _a.menuPlacement, menuPlacement = _c === void 0 ? 'bottom' : _c, menuRef = _a.menuRef, _d = _a.menuVisibility, menuVisibility = _d === void 0 ? 'closed' : _d, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onClose = _a.onClose, onOptionSelection = _a.onOptionSelection, options = _a.options, _e = _a.renderOption, renderOption = _e === void 0 ? defaultRenderOption : _e, required = _a.required, _f = _a.shouldMenuAutoFlip, shouldMenuAutoFlip = _f === void 0 ? true : _f, _g = _a.shouldMenuAutoFocus, shouldMenuAutoFocus = _g === void 0 ? true : _g, value = _a.value, elemProps = __rest(_a, ['aria-labelledby', 'aria-required', "as", "forwardedButtonRef", "localButtonRef", "disabled", "error", "focusedOptionIndex", "grow", "inputRef", "menuPlacement", "menuRef", "menuVisibility", "onChange", "onKeyDown", "onClose", "onOptionSelection", "options", "renderOption", "required", "shouldMenuAutoFlip", "shouldMenuAutoFocus", "value"]);
+var defaultRenderSelected = function (option) {
+    return option.label;
+};
+export var SelectBase = function (_a) {
+    var ariaLabelledBy = _a["aria-labelledby"], ariaRequired = _a["aria-required"], as = _a.as, forwardedButtonRef = _a.forwardedButtonRef, localButtonRef = _a.localButtonRef, disabled = _a.disabled, error = _a.error, _b = _a.focusedOptionIndex, focusedOptionIndex = _b === void 0 ? 0 : _b, grow = _a.grow, inputRef = _a.inputRef, _c = _a.menuPlacement, menuPlacement = _c === void 0 ? 'bottom' : _c, menuRef = _a.menuRef, _d = _a.menuVisibility, menuVisibility = _d === void 0 ? 'closed' : _d, onChange = _a.onChange, onKeyDown = _a.onKeyDown, onClose = _a.onClose, onOptionSelection = _a.onOptionSelection, options = _a.options, _e = _a.renderOption, renderOption = _e === void 0 ? defaultRenderOption : _e, _f = _a.renderSelected, renderSelected = _f === void 0 ? defaultRenderSelected : _f, required = _a.required, _g = _a.shouldMenuAutoFlip, shouldMenuAutoFlip = _g === void 0 ? true : _g, _h = _a.shouldMenuAutoFocus, shouldMenuAutoFocus = _h === void 0 ? true : _h, value = _a.value, elemProps = __rest(_a, ['aria-labelledby', 'aria-required', "as", "forwardedButtonRef", "localButtonRef", "disabled", "error", "focusedOptionIndex", "grow", "inputRef", "menuPlacement", "menuRef", "menuVisibility", "onChange", "onKeyDown", "onClose", "onOptionSelection", "options", "renderOption", "renderSelected", "required", "shouldMenuAutoFlip", "shouldMenuAutoFocus", "value"]);
     var focusedOptionRef = React.useRef(null);
     var menuId = useUniqueId();
     var renderOptions = function (renderOption) {
@@ -179,7 +182,6 @@ var SelectBase = function (_a) {
     // Do a bit of error-checking in case options weren't provided
     var hasOptions = options.length > 0;
     var selectedOption = hasOptions ? options[getCorrectedIndexByValue(options, value)] : null;
-    var selectedOptionLabel = selectedOption ? selectedOption.label : '';
     var selectedOptionValue = selectedOption ? selectedOption.value : '';
     return (React.createElement(SelectWrapper, { grow: grow, disabled: disabled },
         React.createElement(SelectButton, __assign({ "aria-expanded": menuVisibility !== 'closed' ? 'true' : undefined, "aria-haspopup": "listbox", "aria-controls": menuVisibility !== 'closed' ? menuId : undefined, as: as, disabled: disabled, error: error, grow: grow, menuVisibility: menuVisibility, onKeyDown: onKeyDown, 
@@ -188,9 +190,8 @@ var SelectBase = function (_a) {
             // the menu)
             onKeyUp: function (e) {
                 e.preventDefault();
-            }, ref: forwardedButtonRef, type: "button", value: selectedOptionValue }, elemProps), selectedOptionLabel),
+            }, ref: forwardedButtonRef, type: "button", value: selectedOptionValue }, elemProps), !!selectedOption && renderSelected(selectedOption)),
         React.createElement(SelectInput, { onChange: onChange, ref: inputRef, type: "text", value: selectedOptionValue }),
         hasOptions && menuVisibility !== 'closed' && (React.createElement(SelectMenu, { "aria-activedescendant": options[focusedOptionIndex].id, "aria-labelledby": ariaLabelledBy, "aria-required": ariaRequired || required ? true : undefined, buttonRef: localButtonRef, id: menuId, error: error, menuRef: menuRef, onKeyDown: onKeyDown, onClose: onClose, placement: menuPlacement, shouldAutoFlip: shouldMenuAutoFlip, shouldAutoFocus: shouldMenuAutoFocus, visibility: menuVisibility }, renderOptions(renderOption))),
         React.createElement(SelectMenuIcon, { className: "menu-icon", icon: caretDownSmallIcon, color: disabled ? colors.licorice100 : colors.licorice200, colorHover: disabled ? colors.licorice100 : colors.licorice500, size: menuIconSize })));
 };
-export default SelectBase;

package/dist/es6/select/lib/SelectMenu.d.ts

@@ -37,6 +37,6 @@ interface SelectMenuProps extends Themeable, React.HTMLAttributes<HTMLUListEleme
     visibility?: MenuVisibility;
 }
 export declare const menuAnimationDuration = 200;
-declare const SelectMenu: ({ buttonRef, children, error, menuRef, onClose, placement, shouldAutoFlip, shouldAutoFocus, visibility, ...elemProps }: SelectMenuProps) => JSX.Element;
-export default SelectMenu;
+export declare const SelectMenu: ({ buttonRef, children, error, menuRef, onClose, placement, shouldAutoFlip, shouldAutoFocus, visibility, ...elemProps }: SelectMenuProps) => JSX.Element;
+export {};
 //# sourceMappingURL=SelectMenu.d.ts.map

package/dist/es6/select/lib/SelectMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAYlG,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAErC,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAEtD,UAAU,eACR,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAwKzC,QAAA,MAAM,UAAU,2HAWb,eAAe,gBA2DjB,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"SelectMenu.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAG/E,OAAO,EAAgC,SAAS,EAAS,MAAM,kCAAkC,CAAC;AAYlG,OAAO,EAAC,WAAW,EAAC,MAAM,UAAU,CAAC;AAErC,OAAO,EAAC,aAAa,EAAE,cAAc,EAAC,MAAM,SAAS,CAAC;AAEtD,UAAU,eACR,SAAQ,SAAS,EACf,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,EACtC,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IAC5B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC/C;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAC1B;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;CAC7B;AAED,eAAO,MAAM,qBAAqB,MAAM,CAAC;AAwKzC,eAAO,MAAM,UAAU,2HAWpB,eAAe,gBA2DjB,CAAC"}

package/dist/es6/select/lib/SelectMenu.js

@@ -170,7 +170,7 @@ var generatePopperOptions = function (props) {
         },
     };
 };
-var SelectMenu = function (_a) {
+export var SelectMenu = function (_a) {
     var buttonRef = _a.buttonRef, children = _a.children, error = _a.error, menuRef = _a.menuRef, onClose = _a.onClose, _b = _a.placement, placement = _b === void 0 ? 'bottom' : _b, _c = _a.shouldAutoFlip, shouldAutoFlip = _c === void 0 ? true : _c, _d = _a.shouldAutoFocus, shouldAutoFocus = _d === void 0 ? true : _d, _e = _a.visibility, visibility = _e === void 0 ? 'closed' : _e, elemProps = __rest(_a, ["buttonRef", "children", "error", "menuRef", "onClose", "placement", "shouldAutoFlip", "shouldAutoFocus", "visibility"]);
     var model = usePopupModel({
         initialVisibility: 'visible',
@@ -213,4 +213,3 @@ var SelectMenu = function (_a) {
         React.createElement(Menu, { error: error, visibility: visibility, width: width },
             React.createElement(MenuList, __assign({ error: error, ref: menuRef, role: "listbox", tabIndex: -1 }, elemProps), children))));
 };
-export default SelectMenu;

package/dist/es6/select/lib/SelectOption.d.ts

@@ -28,6 +28,5 @@ export interface SelectOptionProps extends Themeable, React.LiHTMLAttributes<HTM
      */
     value?: string;
 }
-declare const SelectOption: ({ children, focused, interactive, optionRef, value, ...elemProps }: SelectOptionProps) => JSX.Element;
-export default SelectOption;
+export declare const SelectOption: ({ children, focused, interactive, optionRef, value, ...elemProps }: SelectOptionProps) => JSX.Element;
 //# sourceMappingURL=SelectOption.d.ts.map

package/dist/es6/select/lib/SelectOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EACT,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACzF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED,QAAA,MAAM,YAAY,uEAOf,iBAAiB,gBAanB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"SelectOption.d.ts","sourceRoot":"","sources":["../../../../select/lib/SelectOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EACT,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,KAAK,CAAC,gBAAgB,CAAC,aAAa,CAAC;IACzF;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,aAAa,CAAC,CAAC;IACrC;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqED,eAAO,MAAM,YAAY,uEAOtB,iBAAiB,gBAanB,CAAC"}