@workday/canvas-kit-preview-react 7.0.0-alpha.0-next.5 → 7.0.0-alpha.100-next.25

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"PillCount.d.ts","sourceRoot":"","sources":["../../../../pill/lib/PillCount.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAGjE,MAAM,WAAW,cAAe,SAAQ,SAAS;CAAG;AASpD,eAAO,MAAM,SAAS,qFAuBpB,CAAC"}

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

@@ -0,0 +1,45 @@
+"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.PillCount = void 0;
+var react_1 = __importDefault(require("react"));
+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 StyledCountContainer = common_1.styled(layout_1.Flex.as('span'))({
+    borderTopLeftRadius: tokens_1.borderRadius.zero,
+    borderTopRightRadius: tokens_1.borderRadius.m,
+    borderBottomLeftRadius: tokens_1.borderRadius.zero,
+    borderBottomRightRadius: tokens_1.borderRadius.m,
+});
+exports.PillCount = common_1.createComponent('span')({
+    displayName: 'Pill.Avatar',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (react_1.default.createElement(StyledCountContainer, __assign({ display: "inline-flex", alignItems: "center", justifyContent: "center", as: Element, height: 22, minWidth: 22, padding: "0  " + tokens_1.space.xxxs, marginInlineEnd: "-" + tokens_1.space.xxs, marginInlineStart: "" + tokens_1.space.xxxs, backgroundColor: tokens_1.colors.soap500, "data-count": "ck-pill-count", ref: ref }, elemProps), children));
+    },
+});

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

@@ -0,0 +1,17 @@
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+export interface PillIconProps extends Omit<SystemIconProps, 'icon'> {
+    /**
+     * The system icon rendered by the component
+     * @default `plusIcon`
+     */
+    icon?: CanvasSystemIcon;
+}
+export declare const PillIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillIconProps, {
+    state: {
+        maxWidth: string | number;
+        disabled: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=PillIcon.d.ts.map

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

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

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

@@ -0,0 +1,40 @@
+"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.PillIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var icon_1 = require("@workday/canvas-kit-react/icon");
+var usePillModel_1 = require("./usePillModel");
+var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+exports.PillIcon = common_1.createSubcomponent('span')({
+    modelHook: usePillModel_1.usePillModel,
+})(function (_a, Element) {
+    var size = _a.size, icon = _a.icon, elemProps = __rest(_a, ["size", "icon"]);
+    return (react_1.default.createElement(icon_1.SystemIcon, __assign({ marginInlineStart: "-" + tokens_1.space.xxxs, display: "flex", as: Element, size: 20, icon: icon || canvas_system_icons_web_1.plusIcon }, elemProps)));
+});

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

@@ -0,0 +1,17 @@
+import { SystemIconProps } from '@workday/canvas-kit-react/icon';
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+export interface PillIconButtonProps extends Omit<SystemIconProps, 'icon'> {
+    /**
+     * The system icon rendered by the button
+     * @default `xSmallIcon`
+     */
+    icon?: CanvasSystemIcon;
+}
+export declare const PillIconButton: import("@workday/canvas-kit-react/common").ElementComponentM<"button", PillIconButtonProps, {
+    state: {
+        maxWidth: string | number;
+        disabled: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=PillIconButton.d.ts.map

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

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

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

@@ -0,0 +1,88 @@
+"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.PillIconButton = void 0;
+var react_1 = __importDefault(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var icon_1 = require("@workday/canvas-kit-react/icon");
+var usePillModel_1 = require("./usePillModel");
+var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var button_1 = require("@workday/canvas-kit-react/button");
+var getIconColors = function () {
+    return {
+        default: {
+            icon: tokens_1.colors.licorice200,
+        },
+        hover: {
+            icon: tokens_1.colors.licorice500,
+        },
+        active: {
+            icon: tokens_1.colors.licorice500,
+        },
+        focus: {
+            icon: tokens_1.colors.licorice500,
+            focusRing: common_1.focusRing({
+                width: 0,
+                innerColor: 'transparent',
+                outerColor: 'transparent',
+            }),
+        },
+        disabled: {
+            icon: tokens_1.colors.licorice100,
+            opacity: '1',
+        },
+    };
+};
+var StyledFocusTarget = common_1.styled('span')({
+    height: 20,
+    position: 'absolute',
+    right: '5px',
+    left: tokens_1.space.xxxs,
+    margin: 0,
+    borderRadius: tokens_1.borderRadius.m,
+    '&:focus': __assign({ outline: 'none' }, common_1.focusRing({
+        outerColor: tokens_1.colors.blueberry400,
+        innerColor: 'transparent',
+        separation: 0,
+        width: 2,
+        inset: 'inner',
+    })),
+});
+var StyledIconButton = common_1.styled(button_1.BaseButton)({
+    marginInlineEnd: '-14px !important',
+    paddingInlineEnd: tokens_1.space.xxxs,
+    marginInlineStart: "-" + tokens_1.space.xxs + " !important",
+});
+exports.PillIconButton = common_1.createSubcomponent('button')({
+    modelHook: usePillModel_1.usePillModel,
+})(function (_a, Element, model) {
+    var size = _a.size, _b = _a.icon, icon = _b === void 0 ? canvas_system_icons_web_1.xSmallIcon : _b, maxWidth = _a.maxWidth, children = _a.children, elemProps = __rest(_a, ["size", "icon", "maxWidth", "children"]);
+    return (react_1.default.createElement(StyledIconButton, __assign({ borderRadius: "s", height: tokens_1.space.l, width: tokens_1.space.l, padding: "zero", disabled: model.state.disabled, colors: getIconColors(), tabIndex: -1, as: Element, position: "relative" }, elemProps),
+        react_1.default.createElement(StyledFocusTarget, { "aria-hidden": "true", tabIndex: model.state.disabled ? -1 : 0 }),
+        react_1.default.createElement(icon_1.SystemIcon, { icon: icon, size: 24 })));
+});

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

@@ -0,0 +1,13 @@
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+import { OverflowTooltipProps } from '@workday/canvas-kit-react/tooltip';
+export interface PillLabelProps extends BoxProps {
+    tooltipProps?: Omit<OverflowTooltipProps, 'children'>;
+}
+export declare const PillLabel: import("@workday/canvas-kit-react/common").ElementComponentM<"span", PillLabelProps, {
+    state: {
+        maxWidth: string | number;
+        disabled: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=PillLabel.d.ts.map

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

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

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

@@ -0,0 +1,47 @@
+"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.PillLabel = void 0;
+var react_1 = __importDefault(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var layout_1 = require("@workday/canvas-kit-react/layout");
+var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+var usePillModel_1 = require("./usePillModel");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var StyledLabelContainer = common_1.styled(layout_1.Box.as('span'))({
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    display: 'block',
+});
+exports.PillLabel = common_1.createSubcomponent('span')({
+    modelHook: usePillModel_1.usePillModel,
+})(function (_a, Element, model) {
+    var tooltipProps = _a.tooltipProps, elemProps = __rest(_a, ["tooltipProps"]);
+    return (react_1.default.createElement(tooltip_1.OverflowTooltip, __assign({}, tooltipProps),
+        react_1.default.createElement(StyledLabelContainer, __assign({ color: model.state.disabled ? tokens_1.colors.licorice100 : 'inherit', maxWidth: model.state.maxWidth, as: Element }, elemProps), elemProps.children)));
+});

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

@@ -0,0 +1,58 @@
+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: string | number;
+    /**
+     * Use to disable a pill.
+     */
+    disabled: boolean;
+}> & {} & {}) | undefined) => {
+    state: {
+        /**
+         * 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: string | number;
+        /**
+         * Use to disable a pill.
+         */
+        disabled: boolean;
+    };
+    events: {};
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
+    /**
+     * 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: string | number;
+    /**
+     * Use to disable a pill.
+     */
+    disabled: boolean;
+}, {}, {
+    /**
+     * 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: string | number;
+    /**
+     * Use to disable a pill.
+     */
+    disabled: boolean;
+}, {}, {
+    state: {
+        /**
+         * 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: string | number;
+        /**
+         * Use to disable a pill.
+         */
+        disabled: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=usePillModel.d.ts.map

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

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

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

@@ -0,0 +1,31 @@
+"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.usePillModel = void 0;
+var common_1 = require("@workday/canvas-kit-react/common");
+exports.usePillModel = common_1.createModelHook({
+    defaultConfig: {
+        /**
+         * 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: 200,
+        /**
+         * Use to disable a pill.
+         */
+        disabled: false,
+    },
+})(function (config) {
+    var state = __assign({}, config);
+    return { state: state, events: {} };
+});

package/dist/commonjs/side-panel/lib/SidePanel.d.ts

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import * as React from 'react';
 import { jsx } from '@emotion/react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 export declare type SidePanelVariant = 'standard' | 'alternate';
 export declare type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
 export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -50,7 +50,7 @@ export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onStateTransition?: (state?: SidePanelTransitionStates) => void;
     /**
-     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 3 depth.
+     * The style variant of the side panel. 'standard' is with a `soap100` background, no depth. 'alternate' is a `frenchVanilla100` background with a level 6 depth.
      *
      * @default 'standard'
      */
@@ -67,10 +67,10 @@ export declare const SidePanelContext: React.Context<{
     origin: string;
 }>;
 declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
+    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
     ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => jsx.JSX.Element;
 };
-export declare type ToggleButtonProps = IconButtonProps & {
+export declare type ToggleButtonProps = TertiaryButtonProps & {
     /**
      * The tooltip text to expand the side panel
      * @default 'Expand'

package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAY,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAM7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AA4BD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;sKAcZ,cAAc;mHAqGd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,eAAe,GAAG;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AA+CF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAuB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;+KAcZ,cAAc;mHA0Gd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,mBAAmB,GAAG;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAgDF,eAAe,SAAS,CAAC"}