@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.384-next.3

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.js

@@ -1,36 +1,14 @@
 "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.SegmentedControlButton = 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 tokens_1 = require("@workday/canvas-kit-react/tokens");
-var getIconButtonColors = function (toggled) {
+const react_1 = __importDefault(require("react"));
+const button_1 = require("@workday/canvas-kit-react/button");
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const getIconButtonColors = (toggled) => {
     return {
         default: {
             background: toggled ? tokens_1.colors.blueberry400 : tokens_1.colors.soap200,
@@ -55,60 +33,61 @@ var getIconButtonColors = function (toggled) {
         },
     };
 };
-var getSizeStyles = function (size) {
-    var sizeValue = size === 'large' ? "calc(" + tokens_1.space.xl + " + " + tokens_1.space.xxs + ")" : size === 'small' ? tokens_1.space.l : tokens_1.space.xl;
+const getSizeStyles = (size) => {
+    const sizeValue = size === 'large' ? `calc(${tokens_1.space.xl} + ${tokens_1.space.xxs})` : size === 'small' ? tokens_1.space.l : tokens_1.space.xl;
     return {
         width: sizeValue,
         height: sizeValue,
     };
 };
-var StyledButton = common_1.styled(button_1.BaseButton)({
+const StyledButton = common_1.styled(button_1.BaseButton)({
     borderRadius: tokens_1.borderRadius.zero,
-    border: "1px solid " + tokens_1.colors.soap500,
+    border: `1px solid ${tokens_1.colors.soap500}`,
     borderLeft: 'none',
     '&:first-of-type': {
-        borderRadius: tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m,
-        borderLeft: "1px solid " + tokens_1.colors.soap500,
+        borderRadius: `${tokens_1.borderRadius.m} 0 0 ${tokens_1.borderRadius.m}`,
+        borderLeft: `1px solid ${tokens_1.colors.soap500}`,
     },
     '&:last-of-type': {
-        borderRadius: "0 " + tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0",
+        borderRadius: `0 ${tokens_1.borderRadius.m} ${tokens_1.borderRadius.m} 0`,
     },
     '&[aria-pressed="true"]': {
-        borderColor: tokens_1.colors.blueberry400 + " !important",
+        borderColor: `${tokens_1.colors.blueberry400} !important`,
         '&:hover, &:focus:hover': {
             background: tokens_1.colors.blueberry400,
         },
     },
-    '&:focus': __assign({ borderRadius: tokens_1.borderRadius.m, zIndex: 1, animation: 'none', transition: 'all 120ms, border-radius 1ms' }, common_1.mouseFocusBehavior({
-        '&': {
-            borderRadius: tokens_1.borderRadius.zero,
-            '&:first-of-type': {
-                borderRadius: tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m,
-            },
-            '&:last-of-type': {
-                borderRadius: "0 " + tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0",
-            },
-        },
-    })),
-}, function (_a) {
-    var theme = _a.theme;
-    return ({
-        '[aria-pressed="true"]': {
-            borderColor: theme.canvas.palette.primary.main,
-            '&:hover, &:focus:hover': {
-                background: theme.canvas.palette.primary.main,
+    '&:focus': {
+        borderRadius: tokens_1.borderRadius.m,
+        zIndex: 1,
+        animation: 'none',
+        transition: 'all 120ms, border-radius 1ms',
+        ...common_1.mouseFocusBehavior({
+            '&': {
+                borderRadius: tokens_1.borderRadius.zero,
+                '&:first-of-type': {
+                    borderRadius: `${tokens_1.borderRadius.m} 0 0 ${tokens_1.borderRadius.m}`,
+                },
+                '&:last-of-type': {
+                    borderRadius: `0 ${tokens_1.borderRadius.m} ${tokens_1.borderRadius.m} 0`,
+                },
             },
+        }),
+    },
+}, ({ theme }) => ({
+    '[aria-pressed="true"]': {
+        borderColor: theme.canvas.palette.primary.main,
+        '&:hover, &:focus:hover': {
+            background: theme.canvas.palette.primary.main,
         },
-    });
-}, function (_a) {
-    var size = _a.size;
-    return (__assign({}, getSizeStyles(size)));
-});
+    },
+}), ({ size }) => ({
+    ...getSizeStyles(size),
+}));
 exports.SegmentedControlButton = common_1.createComponent('button')({
     displayName: 'Button',
-    Component: function (_a, ref, Element) {
-        var value = _a.value, icon = _a.icon, toggled = _a.toggled, props = __rest(_a, ["value", "icon", "toggled"]);
-        return (react_1.default.createElement(StyledButton, __assign({ as: Element, "aria-pressed": toggled, value: value, colors: getIconButtonColors(toggled), fillIcon: toggled, ref: ref }, props),
+    Component: ({ value, icon, toggled, ...props }, ref, Element) => {
+        return (react_1.default.createElement(StyledButton, Object.assign({ as: Element, "aria-pressed": toggled, value: value, colors: getIconButtonColors(toggled), fillIcon: toggled, ref: ref }, props),
             react_1.default.createElement(button_1.BaseButton.Icon, { size: props.size || 'large', icon: icon })));
     },
 });

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

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,49 +18,52 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Select = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var StyledSelect = common_1.styled('select')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { border: "1px solid " + tokens_1.inputColors.border, display: 'block', backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m, boxSizing: 'border-box', height: tokens_1.space.xl, minWidth: 280, transition: '0.2s box-shadow, 0.2s border-color', padding: tokens_1.spaceNumbers.xxs, margin: 0, MozAppearance: 'none', WebkitAppearance: 'none', '&::placeholder': {
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const StyledSelect = common_1.styled('select')({
+    ...tokens_1.type.levels.subtext.large,
+    border: `1px solid ${tokens_1.inputColors.border}`,
+    display: 'block',
+    backgroundColor: tokens_1.inputColors.background,
+    borderRadius: tokens_1.borderRadius.m,
+    boxSizing: 'border-box',
+    height: tokens_1.space.xl,
+    minWidth: 280,
+    transition: '0.2s box-shadow, 0.2s border-color',
+    padding: tokens_1.spaceNumbers.xxs,
+    margin: 0,
+    MozAppearance: 'none',
+    WebkitAppearance: 'none',
+    '&::placeholder': {
         color: tokens_1.inputColors.placeholder,
-    }, '&:hover': {
+    },
+    '&:hover': {
         borderColor: tokens_1.inputColors.hoverBorder,
-    }, '&:focus:not([disabled])': {
+    },
+    '&:focus:not([disabled])': {
         borderColor: tokens_1.inputColors.focusBorder,
-        boxShadow: "inset 0 0 0 1px " + tokens_1.inputColors.focusBorder,
+        boxShadow: `inset 0 0 0 1px ${tokens_1.inputColors.focusBorder}`,
         outline: 'none',
-    }, '&:disabled': {
+    },
+    '&:disabled': {
         backgroundColor: tokens_1.inputColors.disabled.background,
         borderColor: tokens_1.inputColors.disabled.border,
         color: tokens_1.inputColors.disabled.text,
         '&::placeholder': {
             color: tokens_1.inputColors.disabled.text,
         },
-    } }), function (_a) {
-    var error = _a.error;
-    return (__assign({}, common_1.errorRing(error)));
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && {
-        width: '100%',
-    };
+    },
+}, ({ error }) => ({
+    ...common_1.errorRing(error),
+}), ({ grow }) => grow && {
+    width: '100%',
 });
-var SelectDropdownIcon = common_1.styled(icon_1.SystemIcon)({
+const SelectDropdownIcon = common_1.styled(icon_1.SystemIcon)({
     position: 'absolute',
     top: tokens_1.space.xxxs,
     right: tokens_1.space.xxxs,
@@ -81,32 +73,23 @@ var SelectDropdownIcon = common_1.styled(icon_1.SystemIcon)({
         transition: '100ms fill',
     },
 });
-var SelectWrapper = common_1.styled('div')({
+const SelectWrapper = common_1.styled('div')({
     position: 'relative',
-}, function (_a) {
-    var grow = _a.grow;
-    return ({
-        display: grow ? 'block' : 'inline-block',
-    });
-}, function (_a) {
-    var disabled = _a.disabled;
-    return ({
-        '& span': {
-            backgroundColor: disabled ? tokens_1.colors.soap100 : tokens_1.colors.frenchVanilla100,
-        },
-        '&:hover path': {
-            fill: disabled ? undefined : tokens_1.colors.licorice500,
-        },
-    });
-});
+}, ({ grow }) => ({
+    display: grow ? 'block' : 'inline-block',
+}), ({ disabled }) => ({
+    '& span': {
+        backgroundColor: disabled ? tokens_1.colors.soap100 : tokens_1.colors.frenchVanilla100,
+    },
+    '&:hover path': {
+        fill: disabled ? undefined : tokens_1.colors.licorice500,
+    },
+}));
 exports.Select = common_1.createComponent('select')({
     displayName: 'Select',
-    Component: function (_a, ref, Element) {
-        var _b = _a.disabled, disabled = _b === void 0 ? false : _b, grow = _a.grow, children = _a.children, elemProps = __rest(_a, ["disabled", "grow", "children"]);
-        return (React.createElement(SelectWrapper, { grow: grow, disabled: disabled },
-            React.createElement(StyledSelect, __assign({ as: Element, disabled: disabled, grow: grow, ref: ref }, elemProps), children),
-            React.createElement(SelectDropdownIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon, color: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice200, colorHover: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice500 })));
-    },
+    Component: ({ disabled = false, grow, children, ...elemProps }, ref, Element) => (React.createElement(SelectWrapper, { grow: grow, disabled: disabled },
+        React.createElement(StyledSelect, Object.assign({ as: Element, disabled: disabled, grow: grow, ref: ref }, elemProps), children),
+        React.createElement(SelectDropdownIcon, { icon: canvas_system_icons_web_1.caretDownSmallIcon, color: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice200, colorHover: disabled ? tokens_1.colors.licorice100 : tokens_1.colors.licorice500 }))),
     subComponents: {
         ErrorType: common_1.ErrorType,
     },

package/dist/commonjs/select/lib/SelectOption.js

@@ -1,30 +1,4 @@
 "use strict";
-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) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -44,29 +18,13 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectOption = void 0;
-var React = __importStar(require("react"));
-var SelectOption = /** @class */ (function (_super) {
-    __extends(SelectOption, _super);
-    function SelectOption() {
-        return _super !== null && _super.apply(this, arguments) || this;
+const React = __importStar(require("react"));
+class SelectOption extends React.Component {
+    render() {
+        const { disabled = false, value, label, ...elemProps } = this.props;
+        return (React.createElement("option", Object.assign({ value: value, label: label, disabled: disabled }, elemProps), label));
     }
-    SelectOption.prototype.render = function () {
-        var _a = this.props, _b = _a.disabled, disabled = _b === void 0 ? false : _b, value = _a.value, label = _a.label, elemProps = __rest(_a, ["disabled", "value", "label"]);
-        return (React.createElement("option", __assign({ value: value, label: label, disabled: disabled }, elemProps), label));
-    };
-    return SelectOption;
-}(React.Component));
+}
 exports.SelectOption = SelectOption;

package/dist/commonjs/side-panel/lib/SidePanel.js

@@ -1,30 +1,4 @@
 "use strict";
-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) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -44,28 +18,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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.SidePanel = exports.SidePanelBackgroundColor = exports.SidePanelOpenDirection = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var button_1 = require("@workday/canvas-kit-react/button");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var text_1 = require("@workday/canvas-kit-react/text");
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const button_1 = require("@workday/canvas-kit-react/button");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const text_1 = require("@workday/canvas-kit-react/text");
 var SidePanelOpenDirection;
 (function (SidePanelOpenDirection) {
     SidePanelOpenDirection[SidePanelOpenDirection["Left"] = 0] = "Left";
@@ -77,8 +40,8 @@ var SidePanelBackgroundColor;
     SidePanelBackgroundColor[SidePanelBackgroundColor["Transparent"] = 1] = "Transparent";
     SidePanelBackgroundColor[SidePanelBackgroundColor["Gray"] = 2] = "Gray";
 })(SidePanelBackgroundColor = exports.SidePanelBackgroundColor || (exports.SidePanelBackgroundColor = {}));
-var closedWidth = tokens_1.space.xxl;
-var SidePanelContainer = styled_1.default('div')({
+const closedWidth = tokens_1.space.xxl;
+const SidePanelContainer = styled_1.default('div')({
     overflow: 'hidden',
     height: '100%',
     boxSizing: 'border-box',
@@ -86,15 +49,11 @@ var SidePanelContainer = styled_1.default('div')({
     flexDirection: 'column',
     transition: 'width 200ms ease',
     position: 'absolute',
-}, function (_a) {
-    var open = _a.open;
-    return ({
-        alignItems: open ? undefined : 'center',
-        boxShadow: open ? undefined : '0 8px 16px -8px rgba(0, 0, 0, 0.16)',
-    });
-}, function (_a) {
-    var open = _a.open, backgroundColor = _a.backgroundColor;
-    var openBackgroundColor;
+}, ({ open }) => ({
+    alignItems: open ? undefined : 'center',
+    boxShadow: open ? undefined : '0 8px 16px -8px rgba(0, 0, 0, 0.16)',
+}), ({ open, backgroundColor }) => {
+    let openBackgroundColor;
     switch (backgroundColor) {
         case SidePanelBackgroundColor.Transparent:
             openBackgroundColor = 'transparent';
@@ -110,78 +69,59 @@ var SidePanelContainer = styled_1.default('div')({
     return {
         backgroundColor: open ? openBackgroundColor : tokens_1.colors.frenchVanilla100,
     };
-}, function (_a) {
-    var open = _a.open, openWidth = _a.openWidth;
-    return ({
-        width: open ? openWidth : closedWidth,
-    });
-}, function (_a) {
-    var open = _a.open, padding = _a.padding;
-    return ({
-        padding: open ? padding || tokens_1.space.m : tokens_1.space.s + " 0",
-    });
-}, function (_a) {
-    var openDirection = _a.openDirection;
-    return ({
-        right: openDirection === SidePanelOpenDirection.Right ? tokens_1.space.zero : undefined,
-        left: openDirection === SidePanelOpenDirection.Left ? tokens_1.space.zero : undefined,
-    });
-});
-var ChildrenContainer = styled_1.default('div')({
+}, ({ open, openWidth }) => ({
+    width: open ? openWidth : closedWidth,
+}), ({ open, padding }) => ({
+    padding: open ? padding || tokens_1.space.m : `${tokens_1.space.s} 0`,
+}), ({ openDirection }) => ({
+    right: openDirection === SidePanelOpenDirection.Right ? tokens_1.space.zero : undefined,
+    left: openDirection === SidePanelOpenDirection.Left ? tokens_1.space.zero : undefined,
+}));
+const ChildrenContainer = styled_1.default('div')({
     transition: 'none',
     zIndex: 1, // show above SidePanelFooter when screen is small vertically
-}, function (_a) {
-    var open = _a.open, openWidth = _a.openWidth;
-    return ({
-        width: open ? openWidth : closedWidth,
-    });
-});
-var ToggleButton = styled_1.default(button_1.TertiaryButton)({
+}, ({ open, openWidth }) => ({
+    width: open ? openWidth : closedWidth,
+}));
+const ToggleButton = styled_1.default(button_1.TertiaryButton)({
     position: 'absolute',
     bottom: tokens_1.space.s,
-}, function (_a) {
-    var openDirection = _a.openDirection;
-    return ({
-        right: openDirection === SidePanelOpenDirection.Left ? tokens_1.space.s : '',
-        left: openDirection === SidePanelOpenDirection.Right ? tokens_1.space.s : '',
-    });
-});
-var SidePanelFooter = styled_1.default('div')({
+}, ({ openDirection }) => ({
+    right: openDirection === SidePanelOpenDirection.Left ? tokens_1.space.s : '',
+    left: openDirection === SidePanelOpenDirection.Right ? tokens_1.space.s : '',
+}));
+const SidePanelFooter = styled_1.default('div')({
     position: 'absolute',
     bottom: '0',
     height: 120,
     left: 0,
     background: 'linear-gradient(180deg, rgba(255, 255, 255, 0.0001) 0%, #FFFFFF 100%)',
-}, function (_a) {
-    var open = _a.open, openWidth = _a.openWidth;
-    return ({
-        width: open ? openWidth : tokens_1.space.xxl,
-    });
-});
-var SidePanel = /** @class */ (function (_super) {
-    __extends(SidePanel, _super);
-    function SidePanel(props) {
-        var _this = _super.call(this, props) || this;
-        _this.state = {
+}, ({ open, openWidth }) => ({
+    width: open ? openWidth : tokens_1.space.xxl,
+}));
+class SidePanel extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
             screenSize: typeof window !== 'undefined' ? window.innerWidth : 0,
         };
-        _this.handleResize = function () {
-            if (!_this.props.onBreakpointChange || !_this.props.breakpoint) {
+        this.handleResize = () => {
+            if (!this.props.onBreakpointChange || !this.props.breakpoint) {
                 return;
             }
-            if (window.innerWidth > _this.props.breakpoint && !_this.props.open) {
-                _this.props.onBreakpointChange(true);
+            if (window.innerWidth > this.props.breakpoint && !this.props.open) {
+                this.props.onBreakpointChange(true);
             }
-            if (window.innerWidth <= _this.props.breakpoint && _this.props.open) {
-                _this.props.onBreakpointChange(false);
+            if (window.innerWidth <= this.props.breakpoint && this.props.open) {
+                this.props.onBreakpointChange(false);
             }
         };
-        _this.onToggleClick = function () {
-            if (_this.props.onToggleClick) {
-                _this.props.onToggleClick();
+        this.onToggleClick = () => {
+            if (this.props.onToggleClick) {
+                this.props.onToggleClick();
             }
         };
-        _this.toggleButtonDirection = function (open, openDirection) {
+        this.toggleButtonDirection = (open, openDirection) => {
             if (openDirection !== SidePanelOpenDirection.Right) {
                 return open ? canvas_system_icons_web_1.chevronLeftIcon : canvas_system_icons_web_1.chevronRightIcon;
             }
@@ -189,25 +129,23 @@ var SidePanel = /** @class */ (function (_super) {
                 return open ? canvas_system_icons_web_1.chevronRightIcon : canvas_system_icons_web_1.chevronLeftIcon;
             }
         };
-        _this.handleResize = _this.handleResize.bind(_this);
-        return _this;
+        this.handleResize = this.handleResize.bind(this);
     }
-    SidePanel.prototype.componentDidMount = function () {
+    componentDidMount() {
         window.addEventListener('resize', this.handleResize);
-    };
-    SidePanel.prototype.componentWillUnmount = function () {
+    }
+    componentWillUnmount() {
         window.removeEventListener('resize', this.handleResize);
-    };
-    SidePanel.prototype.render = function () {
-        var _a = this.props, _b = _a.backgroundColor, backgroundColor = _b === void 0 ? SidePanelBackgroundColor.White : _b, _c = _a.openNavigationAriaLabel, openNavigationAriaLabel = _c === void 0 ? 'open navigation' : _c, _d = _a.closeNavigationAriaLabel, closeNavigationAriaLabel = _d === void 0 ? 'close navigation' : _d, _e = _a.openDirection, openDirection = _e === void 0 ? SidePanelOpenDirection.Left : _e, _f = _a.breakpoint, breakpoint = _f === void 0 ? 768 : _f, _g = _a.openWidth, openWidth = _g === void 0 ? 300 : _g, header = _a.header, onToggleClick = _a.onToggleClick, open = _a.open, padding = _a.padding, onBreakpointChange = _a.onBreakpointChange, elemProps = __rest(_a, ["backgroundColor", "openNavigationAriaLabel", "closeNavigationAriaLabel", "openDirection", "breakpoint", "openWidth", "header", "onToggleClick", "open", "padding", "onBreakpointChange"]);
-        return (React.createElement(SidePanelContainer, __assign({ role: "region", padding: padding, openDirection: openDirection, openWidth: openWidth, backgroundColor: backgroundColor, open: open }, elemProps),
+    }
+    render() {
+        const { backgroundColor = SidePanelBackgroundColor.White, openNavigationAriaLabel = 'open navigation', closeNavigationAriaLabel = 'close navigation', openDirection = SidePanelOpenDirection.Left, breakpoint = 768, openWidth = 300, header, onToggleClick, open, padding, onBreakpointChange, ...elemProps } = this.props;
+        return (React.createElement(SidePanelContainer, Object.assign({ role: "region", padding: padding, openDirection: openDirection, openWidth: openWidth, backgroundColor: backgroundColor, open: open }, elemProps),
             React.createElement(ChildrenContainer, { open: open, openWidth: openWidth },
                 header && open ? (React.createElement(text_1.Heading, { as: "h2", size: "small", marginTop: "zero" }, header)) : null,
                 this.props.children),
             React.createElement(SidePanelFooter, { openWidth: openWidth, open: open }, onToggleClick && (React.createElement(ToggleButton, { openDirection: openDirection, "aria-label": open ? closeNavigationAriaLabel : openNavigationAriaLabel, onClick: this.onToggleClick, icon: this.toggleButtonDirection(open, openDirection) })))));
-    };
-    SidePanel.OpenDirection = SidePanelOpenDirection;
-    SidePanel.BackgroundColor = SidePanelBackgroundColor;
-    return SidePanel;
-}(React.Component));
+    }
+}
 exports.SidePanel = SidePanel;
+SidePanel.OpenDirection = SidePanelOpenDirection;
+SidePanel.BackgroundColor = SidePanelBackgroundColor;