@workday/canvas-kit-labs-react 7.1.5 → 7.2.0-427-next.2

package/dist/es6/common/lib/storybook-utils/permutateProps.js

@@ -1,43 +0,0 @@
-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);
-};
-export var permutateProps = function (allProps, filter, remainingProps, values) {
-    if (remainingProps === void 0) { remainingProps = Object.keys(allProps); }
-    if (values === void 0) { values = {}; }
-    // When there are no more props to combine with, return result
-    var prop = remainingProps[0];
-    if (!prop) {
-        var props_1 = {};
-        Object.keys(values).forEach(function (prop) {
-            var _a;
-            props_1[prop] = (_a = values === null || values === void 0 ? void 0 : values[prop]) === null || _a === void 0 ? void 0 : _a.value;
-        });
-        if (filter && !filter(props_1)) {
-            return [];
-        }
-        var label = Object.keys(values)
-            .map(function (prop) { var _a; return (_a = values === null || values === void 0 ? void 0 : values[prop]) === null || _a === void 0 ? void 0 : _a.label; })
-            .join(' ');
-        return [
-            {
-                label: label,
-                props: props_1,
-            },
-        ];
-    }
-    var possiblePropValues = allProps[prop];
-    var permutations = possiblePropValues === null || possiblePropValues === void 0 ? void 0 : possiblePropValues.map(function (value) {
-        var newValues = __assign({}, values); // Required so we don't overwrite previous references
-        newValues[prop] = value;
-        return permutateProps(allProps, filter, remainingProps.slice(1, remainingProps.length), newValues);
-    });
-    return permutations.flat();
-};

package/dist/es6/common/lib/storybook-utils/propTypes.d.ts

@@ -1,15 +0,0 @@
-export declare type PropDeclaration = {
-    value: any;
-    label: string;
-};
-export declare type PropsDeclaration = {
-    [key: string]: PropDeclaration[];
-};
-export declare type Props = {
-    [key: string]: any;
-};
-export declare type PropCombination = {
-    label: string;
-    props: Props;
-};
-//# sourceMappingURL=propTypes.d.ts.map

package/dist/es6/common/lib/storybook-utils/propTypes.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"propTypes.d.ts","sourceRoot":"","sources":["../../../../../common/lib/storybook-utils/propTypes.ts"],"names":[],"mappings":"AAAA,oBAAY,eAAe,GAAG;IAC5B,KAAK,EAAE,GAAG,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAAC,CAAC,GAAG,EAAE,MAAM,GAAG,eAAe,EAAE,CAAA;CAAC,CAAC;AAElE,oBAAY,KAAK,GAAG;IAClB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACpB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC;CACd,CAAC"}

package/dist/es6/common/lib/storybook-utils/propTypes.js

@@ -1 +0,0 @@
-export {};

package/dist/es6/common/lib/theming/useThemedRing.d.ts

@@ -1,11 +0,0 @@
-import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
-import { CSSProperties } from '@workday/canvas-kit-react/tokens';
-declare type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
-interface ContrastColors {
-    outer?: string;
-    inner?: string;
-}
-export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): ContrastColors;
-export declare const useThemedRing: (type: paletteSelection) => CSSProperties;
-export {};
-//# sourceMappingURL=useThemedRing.d.ts.map

package/dist/es6/common/lib/theming/useThemedRing.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useThemedRing.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useThemedRing.ts"],"names":[],"mappings":"AACA,OAAO,EAAqB,kBAAkB,EAAC,MAAM,kCAAkC,CAAC;AACxF,OAAO,EAAS,aAAa,EAA4B,MAAM,kCAAkC,CAAC;AAGlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AACzF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,cAAc,CAsBhB;AAED,eAAO,MAAM,aAAa,SAAU,gBAAgB,KAAG,aAyBtD,CAAC"}

package/dist/es6/common/lib/theming/useThemedRing.js

@@ -1,59 +0,0 @@
-import { useThemeRTL } from './useThemeRTL';
-import { colors, inputColors, statusColors } from '@workday/canvas-kit-react/tokens';
-import chroma from 'chroma-js';
-var isAccessible = function (foreground, background) {
-    if (background === void 0) { background = colors.frenchVanilla100; }
-    return chroma.contrast(foreground, background) >= 3;
-};
-var getPaletteColorsFromTheme = function (palette, fallbackColors) {
-    return {
-        outer: isAccessible(palette.main)
-            ? palette.main
-            : isAccessible(palette.darkest)
-                ? palette.darkest
-                : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.outer,
-        inner: (fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.inner) ? fallbackColors.inner : palette.main,
-    };
-};
-export function getPaletteColors(type, theme) {
-    var palette = theme.canvas.palette[type];
-    switch (type) {
-        case 'error': {
-            return getPaletteColorsFromTheme(palette, { outer: inputColors.error.border });
-        }
-        case 'alert': {
-            return getPaletteColorsFromTheme(palette, { outer: colors.cantaloupe600 });
-        }
-        case 'success': {
-            return getPaletteColorsFromTheme(palette, {
-                outer: colors.greenApple600,
-                // The theme default for success.main is set to the darkest GreenApple
-                // For our default ring, we need to override it so the inner ring is a bit lighter
-                inner: palette.main === colors.greenApple600 ? statusColors.success : palette.main,
-            });
-        }
-        default: {
-            return getPaletteColorsFromTheme(palette);
-        }
-    }
-}
-export var useThemedRing = function (type) {
-    var _a = useThemeRTL(), themeRTL = _a.themeRTL, theme = _a.theme;
-    var paletteColors = getPaletteColors(type, theme);
-    if (!((paletteColors === null || paletteColors === void 0 ? void 0 : paletteColors.outer) || (paletteColors === null || paletteColors === void 0 ? void 0 : paletteColors.inner))) {
-        return {};
-    }
-    var errorBoxShadow = "inset 0 0 0 " + (paletteColors.outer === paletteColors.inner ? 1 : 2) + "px " + paletteColors.inner;
-    return themeRTL({
-        borderColor: paletteColors.outer,
-        transition: '100ms box-shadow',
-        boxShadow: errorBoxShadow,
-        '&:hover, &:disabled': {
-            borderColor: paletteColors.outer,
-        },
-        '&:focus:not([disabled])': {
-            borderColor: paletteColors.outer,
-            boxShadow: errorBoxShadow + ",\n        0 0 0 2px " + colors.frenchVanilla100 + ",\n        0 0 0 4px " + (theme ? theme.canvas.palette.common.focusOutline : inputColors.focusBorder),
-        },
-    });
-};

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

@@ -1,6 +0,0 @@
-import Drawer from './lib/Drawer';
-import DrawerHeader from './lib/DrawerHeader';
-export { Drawer, DrawerHeader };
-export default Drawer;
-export * from './lib/Drawer';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,CAAC;AAC9B,eAAe,MAAM,CAAC;AACtB,cAAc,cAAc,CAAC"}

package/dist/es6/drawer/index.js

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

package/dist/es6/drawer/lib/Drawer.d.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { CanvasSpaceValues } from '@workday/canvas-kit-react/tokens';
-export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The padding of the Drawer contents.
-     * @default space.s
-     */
-    padding?: CanvasSpaceValues;
-    /**
-     * The direction from which the Drawer opens. Accepts `Left` or `Right`.
-     * @default DrawerDirection.Right
-     */
-    openDirection?: DrawerDirection;
-    /**
-     * The width of the Drawer in `px`.
-     * @default 360
-     */
-    width?: number;
-    /**
-     * If true, render the Drawer with a drop shadow.
-     * @default false
-     */
-    showDropShadow?: boolean;
-    /**
-     * The optional DrawerHeader component of the Drawer. Shows an optional string and close button.
-     */
-    header?: React.ReactElement;
-    /**
-     * The `aria-labelledby` of the Drawer. Set this when there is a `header` for accessibility. The `role` attribute should also be used when this attribute is present. This value should be the same as the `id` attribute of the `header` element.
-     */
-    'aria-labelledby'?: string;
-    /**
-     * The `aria-label` for the Drawer. Set this when there is NO `header` for accessibility.
-     */
-    'aria-label'?: string;
-    /**
-     * The role of the Drawer. If `role` is provided, you must also set `aria-labelledby` to link `header` to the `role`.
-     */
-    role?: string;
-}
-export declare enum DrawerDirection {
-    Left = 0,
-    Right = 1
-}
-export default class Drawer extends React.Component<DrawerProps, {}> {
-    static OpenDirection: typeof DrawerDirection;
-    render(): JSX.Element;
-}
-//# sourceMappingURL=Drawer.d.ts.map

package/dist/es6/drawer/lib/Drawer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../../drawer/lib/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAgB,iBAAiB,EAAC,MAAM,kCAAkC,CAAC;AAElF,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,eAAe,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC5B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,oBAAY,eAAe;IACzB,IAAI,IAAA;IACJ,KAAK,IAAA;CACN;AA4CD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC;IAClE,MAAM,CAAC,aAAa,yBAAmB;IAEhC,MAAM;CAyBd"}

package/dist/es6/drawer/lib/Drawer.js

@@ -1,99 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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;
-};
-import * as React from 'react';
-import styled from '@emotion/styled';
-import { colors, space } from '@workday/canvas-kit-react/tokens';
-export var DrawerDirection;
-(function (DrawerDirection) {
-    DrawerDirection[DrawerDirection["Left"] = 0] = "Left";
-    DrawerDirection[DrawerDirection["Right"] = 1] = "Right";
-})(DrawerDirection || (DrawerDirection = {}));
-var DrawerContainer = styled('div')({
-    height: '100%',
-    backgroundColor: 'white',
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'absolute',
-}, function (_a) {
-    var width = _a.width;
-    return ({
-        width: width,
-    });
-}, function (_a) {
-    var showDropShadow = _a.showDropShadow, openDirection = _a.openDirection;
-    return ({
-        boxShadow: openDirection === DrawerDirection.Right && showDropShadow
-            ? '-8px 0px 16px 0 rgba(0,0,0,0.12)'
-            : openDirection === DrawerDirection.Left && showDropShadow
-                ? '8px 0px 16px 0 rgba(0,0,0,0.12)'
-                : undefined,
-    });
-}, function (_a) {
-    var openDirection = _a.openDirection;
-    return ({
-        borderLeft: openDirection === DrawerDirection.Right ? "1px solid " + colors.soap400 : undefined,
-        borderRight: openDirection === DrawerDirection.Left ? "1px solid " + colors.soap400 : undefined,
-        right: openDirection === DrawerDirection.Right ? space.zero : undefined,
-        left: openDirection === DrawerDirection.Left ? space.zero : undefined,
-    });
-});
-var ChildrenContainer = styled('div')({
-    height: '100%',
-    overflowY: 'auto',
-    wordBreak: 'break-word',
-    wordWrap: 'break-word',
-    position: 'relative',
-}, function (_a) {
-    var padding = _a.padding;
-    return ({
-        padding: padding,
-    });
-});
-var Drawer = /** @class */ (function (_super) {
-    __extends(Drawer, _super);
-    function Drawer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Drawer.prototype.render = function () {
-        var _a = this.props, _b = _a.padding, padding = _b === void 0 ? space.s : _b, _c = _a.width, width = _c === void 0 ? 360 : _c, _d = _a.openDirection, openDirection = _d === void 0 ? DrawerDirection.Right : _d, _e = _a.showDropShadow, showDropShadow = _e === void 0 ? false : _e, children = _a.children, header = _a.header, role = _a.role, elemProps = __rest(_a, ["padding", "width", "openDirection", "showDropShadow", "children", "header", "role"]);
-        return (React.createElement(DrawerContainer, __assign({ role: role }, elemProps, { showDropShadow: showDropShadow, width: width, openDirection: openDirection }),
-            header,
-            React.createElement(ChildrenContainer, { padding: padding }, children)));
-    };
-    Drawer.OpenDirection = DrawerDirection;
-    return Drawer;
-}(React.Component));
-export default Drawer;

package/dist/es6/drawer/lib/DrawerHeader.d.ts

@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { CanvasColor } from '@workday/canvas-kit-react/tokens';
-export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The text of the DrawerHeader. This text will also be applied as the `title` attribute of the header element.
-     */
-    title?: string;
-    /**
-     * The function called when the DrawerHeader close button is clicked.
-     */
-    onClose?: React.MouseEventHandler<HTMLButtonElement>;
-    /**
-     * The `aria-label` for the DrawHeader close button. Useful for i18n.
-     * @default Close
-     */
-    closeIconAriaLabel?: string;
-    /**
-     * The background color of the DrawerHeader.
-     */
-    headerColor?: CanvasColor | string;
-    /**
-     * The border color of the DrawerHeader. This should match something close to `headerColor`.
-     */
-    borderColor?: CanvasColor | string;
-    /**
-     * If true, render the icon and header in white. Useful for preserving contrast with a dark `headerColor`.
-     * @default false
-     */
-    inverse?: boolean;
-    /**
-     * The unique id of the DrawerHeader for accessibility.
-     */
-    id?: string;
-}
-export default class DrawerHeader extends React.Component<DrawerHeaderProps, {}> {
-    render(): JSX.Element;
-}
-//# sourceMappingURL=DrawerHeader.d.ts.map

package/dist/es6/drawer/lib/DrawerHeader.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DrawerHeader.d.ts","sourceRoot":"","sources":["../../../../drawer/lib/DrawerHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAsB,WAAW,EAAa,MAAM,kCAAkC,CAAC;AAI9F,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACnC;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,MAAM,CAAC;IACnC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAsCD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,EAAE,EAAE,CAAC;IACvE,MAAM;CA4Bd"}

package/dist/es6/drawer/lib/DrawerHeader.js

@@ -1,81 +0,0 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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;
-};
-import * as React from 'react';
-import styled from '@emotion/styled';
-import { colors, space, type, typeColors } from '@workday/canvas-kit-react/tokens';
-import { TertiaryButton } from '@workday/canvas-kit-react/button';
-import { xIcon } from '@workday/canvas-system-icons-web';
-var headerHeight = 56;
-var HeaderContainer = styled('div')({
-    height: headerHeight,
-    display: 'flex',
-    alignItems: 'center',
-    padding: "0 " + space.s,
-    justifyContent: 'space-between',
-}, function (_a) {
-    var borderColor = _a.borderColor;
-    return ({
-        borderBottom: "1px solid " + borderColor,
-    });
-}, function (_a) {
-    var headerColor = _a.headerColor;
-    return ({
-        backgroundColor: headerColor,
-    });
-});
-var HeaderTitle = styled('h4')(__assign(__assign({}, type.levels.body.small), { fontWeight: type.properties.fontWeights.bold, whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden', paddingRight: space.xxxs }), function (_a) {
-    var inverse = _a.inverse;
-    return ({
-        color: inverse ? colors.frenchVanilla100 : typeColors.heading,
-    });
-});
-var CloseButton = styled(TertiaryButton)({
-    margin: '-8px',
-});
-var DrawerHeader = /** @class */ (function (_super) {
-    __extends(DrawerHeader, _super);
-    function DrawerHeader() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    DrawerHeader.prototype.render = function () {
-        var _a = this.props, _b = _a.closeIconAriaLabel, closeIconAriaLabel = _b === void 0 ? 'Close' : _b, _c = _a.headerColor, headerColor = _c === void 0 ? colors.soap100 : _c, _d = _a.borderColor, borderColor = _d === void 0 ? colors.soap500 : _d, _e = _a.inverse, inverse = _e === void 0 ? false : _e, onClose = _a.onClose, title = _a.title, id = _a.id, elemProps = __rest(_a, ["closeIconAriaLabel", "headerColor", "borderColor", "inverse", "onClose", "title", "id"]);
-        return (React.createElement(HeaderContainer, __assign({ borderColor: borderColor }, elemProps, { headerColor: headerColor }),
-            React.createElement(HeaderTitle, { id: id, inverse: inverse, title: title }, title),
-            onClose && closeIconAriaLabel && (React.createElement(CloseButton, { variant: inverse ? 'inverse' : undefined, onClick: onClose, "aria-label": closeIconAriaLabel, icon: xIcon }))));
-    };
-    return DrawerHeader;
-}(React.Component));
-export default DrawerHeader;

package/drawer/README.md

@@ -1,35 +0,0 @@
-# Canvas Kit React Drawer
-
-<a href="https://github.com/Workday/canvas-kit/tree/master/modules/labs-react/README.md">
-  <img src="https://img.shields.io/badge/LABS-alpha-orange" alt="LABS: Alpha" />
-</a>  This component is work in progress and currently in pre-release.
-
-## Installation
-
-```sh
-yarn add @workday/canvas-kit-labs-react
-```
-
-## Usage
-
-```tsx
-import * as React from 'react';
-import {Drawer, DrawerDirection, DrawerHeader} from '@workday/canvas-kit-labs-react/drawer';
-import {space} from '@workday/canvas-kit-react/tokens';
-
-<div style={{height: '100vh', position: 'relative'}}>
-  <Drawer
-    header={
-      <DrawerHeader
-        onClose={() => {
-          window.alert('onClose Clicked');
-        }}
-        headerTitle={'Drawer Header'}
-      />
-    }
-    openDirection={DrawerDirection.Left}
-    padding={space.l}
-    showDropShadow={true}
-  ></Drawer>
-</div>;
-```

package/drawer/index.ts

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

package/drawer/lib/Drawer.tsx

@@ -1,119 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import {colors, space, CanvasSpaceValues} from '@workday/canvas-kit-react/tokens';
-
-export interface DrawerProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * The padding of the Drawer contents.
-   * @default space.s
-   */
-  padding?: CanvasSpaceValues;
-  /**
-   * The direction from which the Drawer opens. Accepts `Left` or `Right`.
-   * @default DrawerDirection.Right
-   */
-  openDirection?: DrawerDirection;
-  /**
-   * The width of the Drawer in `px`.
-   * @default 360
-   */
-  width?: number;
-  /**
-   * If true, render the Drawer with a drop shadow.
-   * @default false
-   */
-  showDropShadow?: boolean;
-  /**
-   * The optional DrawerHeader component of the Drawer. Shows an optional string and close button.
-   */
-  header?: React.ReactElement;
-  /**
-   * The `aria-labelledby` of the Drawer. Set this when there is a `header` for accessibility. The `role` attribute should also be used when this attribute is present. This value should be the same as the `id` attribute of the `header` element.
-   */
-  'aria-labelledby'?: string;
-  /**
-   * The `aria-label` for the Drawer. Set this when there is NO `header` for accessibility.
-   */
-  'aria-label'?: string;
-  /**
-   * The role of the Drawer. If `role` is provided, you must also set `aria-labelledby` to link `header` to the `role`.
-   */
-  role?: string;
-}
-
-export enum DrawerDirection {
-  Left,
-  Right,
-}
-
-const DrawerContainer = styled('div')<
-  Pick<DrawerProps, 'width' | 'showDropShadow' | 'openDirection'>
->(
-  {
-    height: '100%',
-    backgroundColor: 'white',
-    display: 'flex',
-    flexDirection: 'column',
-    position: 'absolute',
-  },
-  ({width}) => ({
-    width: width,
-  }),
-  ({showDropShadow, openDirection}) => ({
-    boxShadow:
-      openDirection === DrawerDirection.Right && showDropShadow
-        ? '-8px 0px 16px 0 rgba(0,0,0,0.12)'
-        : openDirection === DrawerDirection.Left && showDropShadow
-        ? '8px 0px 16px 0 rgba(0,0,0,0.12)'
-        : undefined,
-  }),
-  ({openDirection}) => ({
-    borderLeft: openDirection === DrawerDirection.Right ? `1px solid ${colors.soap400}` : undefined,
-    borderRight: openDirection === DrawerDirection.Left ? `1px solid ${colors.soap400}` : undefined,
-    right: openDirection === DrawerDirection.Right ? space.zero : undefined,
-    left: openDirection === DrawerDirection.Left ? space.zero : undefined,
-  })
-);
-
-const ChildrenContainer = styled('div')<Pick<DrawerProps, 'padding'>>(
-  {
-    height: '100%',
-    overflowY: 'auto',
-    wordBreak: 'break-word',
-    wordWrap: 'break-word', // Needed for IE11
-    position: 'relative',
-  },
-  ({padding}) => ({
-    padding: padding,
-  })
-);
-
-export default class Drawer extends React.Component<DrawerProps, {}> {
-  static OpenDirection = DrawerDirection;
-
-  public render() {
-    const {
-      padding = space.s,
-      width = 360,
-      openDirection = DrawerDirection.Right,
-      showDropShadow = false,
-      children,
-      header,
-      role,
-      ...elemProps
-    } = this.props;
-
-    return (
-      <DrawerContainer
-        role={role}
-        {...elemProps}
-        showDropShadow={showDropShadow}
-        width={width}
-        openDirection={openDirection}
-      >
-        {header}
-        <ChildrenContainer padding={padding}>{children}</ChildrenContainer>
-      </DrawerContainer>
-    );
-  }
-}