@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

package/dist/commonjs/icon/lib/SystemIcon.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,63 +18,47 @@ 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.SystemIcon = exports.systemIconStyles = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var design_assets_types_1 = require("@workday/design-assets-types");
-var Icon_1 = require("./Icon");
-var common_1 = require("@workday/canvas-kit-react/common");
-var utils_1 = require("./utils");
-var systemIconStyles = function (_a) {
-    var accent = _a.accent, accentHover = _a.accentHover, _b = _a.background, background = _b === void 0 ? 'transparent' : _b, _c = _a.backgroundHover, backgroundHover = _c === void 0 ? 'transparent' : _c, _d = _a.color, color = _d === void 0 ? tokens_1.iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? tokens_1.iconColors.hover : _e, fill = _a.fill, fillHover = _a.fillHover;
-    return ({
-        '& .wd-icon-fill': {
-            fill: utils_1.getColor(fill) || utils_1.getColor(color),
-        },
-        ':hover .wd-icon-fill': {
-            fill: utils_1.getColor(fillHover) || utils_1.getColor(colorHover),
-        },
-        '& .wd-icon-accent, & .wd-icon-accent2': {
-            fill: utils_1.getColor(accent) || utils_1.getColor(color),
-        },
-        ':hover .wd-icon-accent, :hover .wd-icon-accent2': {
-            fill: utils_1.getColor(accentHover) || utils_1.getColor(colorHover),
-        },
-        '& .wd-icon-background': {
-            fill: utils_1.getColor(background),
-        },
-        ':hover .wd-icon-background': {
-            fill: utils_1.getColor(backgroundHover),
-        },
-    });
-};
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const design_assets_types_1 = require("@workday/design-assets-types");
+const Icon_1 = require("./Icon");
+const common_1 = require("@workday/canvas-kit-react/common");
+const systemIconStyles = ({ accent, accentHover, background = 'transparent', backgroundHover = 'transparent', color = tokens_1.iconColors.standard, colorHover = tokens_1.iconColors.hover, fill, fillHover, }) => ({
+    '& .wd-icon-fill': {
+        fill: common_1.getColor(fill) || common_1.getColor(color),
+    },
+    ':hover .wd-icon-fill': {
+        fill: common_1.getColor(fillHover) || common_1.getColor(colorHover),
+    },
+    '& .wd-icon-accent, & .wd-icon-accent2': {
+        fill: common_1.getColor(accent) || common_1.getColor(color),
+    },
+    ':hover .wd-icon-accent, :hover .wd-icon-accent2': {
+        fill: common_1.getColor(accentHover) || common_1.getColor(colorHover),
+    },
+    '& .wd-icon-background': {
+        fill: common_1.getColor(background),
+    },
+    ':hover .wd-icon-background': {
+        fill: common_1.getColor(backgroundHover),
+    },
+});
 exports.systemIconStyles = systemIconStyles;
 exports.SystemIcon = common_1.createComponent('span')({
     displayName: 'SystemIcon',
-    Component: function (_a, ref, Element) {
-        var _b = _a.background, background = _b === void 0 ? 'transparent' : _b, _c = _a.backgroundHover, backgroundHover = _c === void 0 ? 'transparent' : _c, _d = _a.color, color = _d === void 0 ? tokens_1.iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? tokens_1.iconColors.hover : _e, icon = _a.icon, accent = _a.accent, accentHover = _a.accentHover, fill = _a.fill, fillHover = _a.fillHover, size = _a.size, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["background", "backgroundHover", "color", "colorHover", "icon", "accent", "accentHover", "fill", "fillHover", "size", "shouldMirror"]);
-        var style = exports.systemIconStyles({
-            accent: accent,
-            accentHover: accentHover,
-            background: background,
-            backgroundHover: backgroundHover,
-            color: color,
-            colorHover: colorHover,
-            fill: fill,
-            fillHover: fillHover,
+    Component: ({ background = 'transparent', backgroundHover = 'transparent', color = tokens_1.iconColors.standard, colorHover = tokens_1.iconColors.hover, icon, accent, accentHover, fill, fillHover, size, shouldMirror, ...elemProps }, ref, Element) => {
+        const style = exports.systemIconStyles({
+            accent,
+            accentHover,
+            background,
+            backgroundHover,
+            color,
+            colorHover,
+            fill,
+            fillHover,
         });
-        return (React.createElement(Icon_1.Icon, __assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.System, size: size, as: Element, shouldMirror: shouldMirror, ref: ref, styles: style }, elemProps)));
+        return (React.createElement(Icon_1.Icon, Object.assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.System, size: size, as: Element, shouldMirror: shouldMirror, ref: ref, styles: style }, elemProps)));
     },
 });

package/dist/commonjs/icon/lib/SystemIconCircle.d.ts

@@ -1,5 +1,6 @@
 import { SystemIconProps } from './SystemIcon';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
+import { SystemPropValues } from '@workday/canvas-kit-react/layout';
 export declare enum SystemIconCircleSize {
     xs = 16,
     s = 24,
@@ -13,7 +14,7 @@ export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirr
      * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
      * @default colors.soap300
      */
-    background?: string;
+    background?: SystemPropValues['color'];
     /**
      * The icon to display from `@workday/canvas-accent-icons-web`.
      */

package/dist/commonjs/icon/lib/SystemIconCircle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAClF;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,eAAO,MAAM,gBAAgB,4FA8B3B,CAAC"}
+{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAElE,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAClF;;;OAGG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,eAAO,MAAM,gBAAgB,4FA8B3B,CAAC"}

package/dist/commonjs/icon/lib/SystemIconCircle.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,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.SystemIconCircle = exports.SystemIconCircleSize = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var SystemIcon_1 = require("./SystemIcon");
-var common_1 = require("@workday/canvas-kit-react/common");
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const SystemIcon_1 = require("./SystemIcon");
+const common_1 = require("@workday/canvas-kit-react/common");
 var SystemIconCircleSize;
 (function (SystemIconCircleSize) {
     SystemIconCircleSize[SystemIconCircleSize["xs"] = 16] = "xs";
@@ -60,8 +38,8 @@ var SystemIconCircleSize;
     SystemIconCircleSize[SystemIconCircleSize["xl"] = 64] = "xl";
     SystemIconCircleSize[SystemIconCircleSize["xxl"] = 120] = "xxl";
 })(SystemIconCircleSize = exports.SystemIconCircleSize || (exports.SystemIconCircleSize = {}));
-var Container = styled_1.default('div', {
-    shouldForwardProp: function (prop) { return is_prop_valid_1.default(prop) && prop !== 'size'; },
+const Container = styled_1.default('div', {
+    shouldForwardProp: prop => is_prop_valid_1.default(prop) && prop !== 'size',
 })({
     display: 'flex',
     alignItems: 'center',
@@ -75,25 +53,18 @@ var Container = styled_1.default('div', {
         width: '100%',
         height: '100%',
     },
-}, function (_a) {
-    var background = _a.background;
-    return ({
-        background: background,
-    });
-}, function (_a) {
-    var size = _a.size;
-    return ({
-        width: size,
-        height: size,
-    });
-});
+}, ({ background }) => ({
+    background: common_1.getColor(background),
+}), ({ size }) => ({
+    width: size,
+    height: size,
+}));
 exports.SystemIconCircle = common_1.createComponent('span')({
     displayName: 'SystemIconCircle',
-    Component: function (_a, ref, Element) {
-        var _b = _a.background, background = _b === void 0 ? tokens_1.colors.soap200 : _b, _c = _a.size, size = _c === void 0 ? SystemIconCircleSize.l : _c, icon = _a.icon, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["background", "size", "icon", "shouldMirror"]);
-        var iconColor = common_1.pickForegroundColor(background, 'rgba(0,0,0,0.65)', tokens_1.colors.frenchVanilla100);
-        var iconSize = size * 0.625;
-        return (React.createElement(Container, __assign({ background: background, size: size }, elemProps),
+    Component: ({ background = tokens_1.colors.soap200, size = SystemIconCircleSize.l, icon, shouldMirror, ...elemProps }, ref, Element) => {
+        const iconColor = common_1.pickForegroundColor(background, 'rgba(0,0,0,0.65)', tokens_1.colors.frenchVanilla100);
+        const iconSize = size * 0.625;
+        return (React.createElement(Container, Object.assign({ background: background, size: size }, elemProps),
             React.createElement(SystemIcon_1.SystemIcon, { icon: icon, color: iconColor, colorHover: iconColor, as: Element, size: iconSize, ref: ref, shouldMirror: shouldMirror })));
     },
 });

package/dist/commonjs/icon/lib/utils.d.ts

@@ -1,5 +1,3 @@
 import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
-import { CanvasColor } from '@workday/canvas-kit-react/tokens';
 export declare function validateIconType(icon: CanvasIcon, expectedType: CanvasIconTypes): void;
-export declare function getColor(value?: CanvasColor | string): string | undefined;
 //# sourceMappingURL=utils.d.ts.map

package/dist/commonjs/icon/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../icon/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AACzE,OAAO,EAAC,WAAW,EAAS,MAAM,kCAAkC,CAAC;AAErE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,eAAe,QAI/E;AAED,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,WAAW,GAAG,MAAM,sBAKpD"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../icon/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAEzE,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,UAAU,EAAE,YAAY,EAAE,eAAe,QAI/E"}

package/dist/commonjs/icon/lib/utils.js

@@ -1,17 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getColor = exports.validateIconType = void 0;
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
+exports.validateIconType = void 0;
 function validateIconType(icon, expectedType) {
     if (icon.type !== expectedType) {
-        throw icon.name + ": Icon type \"" + icon.type + "\" does not match expected type \"" + expectedType + "\"";
+        throw `${icon.name}: Icon type "${icon.type}" does not match expected type "${expectedType}"`;
     }
 }
 exports.validateIconType = validateIconType;
-function getColor(value) {
-    if (value in tokens_1.colors) {
-        return tokens_1.colors[value];
-    }
-    return value;
-}
-exports.getColor = getColor;

package/dist/commonjs/layout/lib/Box.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,39 +18,28 @@ 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.Box = exports.boxStyleFn = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
-var common_1 = require("@workday/canvas-kit-react/common");
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const is_prop_valid_1 = __importDefault(require("@emotion/is-prop-valid"));
+const common_1 = require("@workday/canvas-kit-react/common");
 // style props
-var background_1 = require("./utils/background");
-var border_1 = require("./utils/border");
-var color_1 = require("./utils/color");
-var depth_1 = require("./utils/depth");
-var flexItem_1 = require("./utils/flexItem");
-var gridItem_1 = require("./utils/gridItem");
-var layout_1 = require("./utils/layout");
-var other_1 = require("./utils/other");
-var position_1 = require("./utils/position");
-var space_1 = require("./utils/space");
-var text_1 = require("./utils/text");
-var omittedProps = [
+const background_1 = require("./utils/background");
+const border_1 = require("./utils/border");
+const color_1 = require("./utils/color");
+const depth_1 = require("./utils/depth");
+const flexItem_1 = require("./utils/flexItem");
+const gridItem_1 = require("./utils/gridItem");
+const layout_1 = require("./utils/layout");
+const other_1 = require("./utils/other");
+const position_1 = require("./utils/position");
+const space_1 = require("./utils/space");
+const text_1 = require("./utils/text");
+const omittedProps = [
     'display',
     'color',
     'height',
@@ -83,7 +61,7 @@ var omittedProps = [
     'whiteSpace',
     'wordBreak',
 ];
-var shouldForwardProp = function (prop) {
+const shouldForwardProp = (prop) => {
     return is_prop_valid_1.default(prop) && !omittedProps.includes(prop);
 };
 /**
@@ -104,7 +82,7 @@ var shouldForwardProp = function (prop) {
  * <StyledHeader color='red'>Hello World</StyledHeader>
  * ```
  */
-var boxStyleFn = function (props) {
+const boxStyleFn = (props) => {
     return [
         {
             boxSizing: 'border-box',
@@ -120,11 +98,11 @@ var boxStyleFn = function (props) {
         position_1.position,
         space_1.space,
         text_1.text,
-    ].reduce(function (result, style) {
+    ].reduce((result, style) => {
         // @ts-ignore
-        var temp = typeof style === 'function' ? style(props) : style;
+        const temp = typeof style === 'function' ? style(props) : style;
         // eslint-disable-next-line guard-for-in
-        for (var key in temp) {
+        for (const key in temp) {
             // @ts-ignore
             result[key] = temp[key];
         }
@@ -133,9 +111,9 @@ var boxStyleFn = function (props) {
 };
 exports.boxStyleFn = boxStyleFn;
 // Meant to be used with elements. The `shouldForwardProps` will remove all style props
-var StyledBoxElement = styled_1.default('div', { shouldForwardProp: shouldForwardProp })(exports.boxStyleFn);
+const StyledBoxElement = styled_1.default('div', { shouldForwardProp })(exports.boxStyleFn);
 // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
-var StyledBoxComponent = styled_1.default('div')(exports.boxStyleFn);
+const StyledBoxComponent = styled_1.default('div')(exports.boxStyleFn);
 /**
  * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
  * It is highly flexible, and its primary purpose is to build other components.
@@ -155,11 +133,8 @@ var StyledBoxComponent = styled_1.default('div')(exports.boxStyleFn);
  */
 exports.Box = common_1.createComponent('div')({
     displayName: 'Box',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        var BoxComponent = common_1.useConstant(function () {
-            return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
-        });
-        return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        const BoxComponent = common_1.useConstant(() => typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent);
+        return (React.createElement(BoxComponent, Object.assign({ as: Element, ref: ref }, elemProps), children));
     },
 });

package/dist/commonjs/layout/lib/Flex.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,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.Flex = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var Box_1 = require("./Box");
-var flex_1 = require("./utils/flex");
-var StyledFlex = styled_1.default(Box_1.Box)({
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const Box_1 = require("./Box");
+const flex_1 = require("./utils/flex");
+const StyledFlex = styled_1.default(Box_1.Box)({
     display: 'flex',
 }, flex_1.flex);
 /**
@@ -77,9 +55,8 @@ var StyledFlex = styled_1.default(Box_1.Box)({
  */
 exports.Flex = common_1.createComponent('div')({
     displayName: 'Flex',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(StyledFlex, __assign({ as: Element, ref: ref }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(StyledFlex, Object.assign({ as: Element, ref: ref }, elemProps), children));
     },
     subComponents: {
         Item: Box_1.Box,

package/dist/commonjs/layout/lib/Grid.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,35 +18,23 @@ 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.Grid = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var Box_1 = require("./Box");
-var grid_1 = require("./utils/grid");
-var StyledGrid = styled_1.default(Box_1.Box)({
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const Box_1 = require("./Box");
+const grid_1 = require("./utils/grid");
+const StyledGrid = styled_1.default(Box_1.Box)({
     display: 'grid',
 }, grid_1.grid);
-var GridItem = common_1.createComponent('div')({
+const GridItem = common_1.createComponent('div')({
     displayName: 'Grid.Item',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Box_1.Box, __assign({ as: Element, ref: ref }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Box_1.Box, Object.assign({ as: Element, ref: ref }, elemProps), children));
     },
 });
 /**
@@ -84,9 +61,8 @@ var GridItem = common_1.createComponent('div')({
  */
 exports.Grid = common_1.createComponent('div')({
     displayName: 'Grid',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(StyledGrid, __assign({ as: Element, ref: ref }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(StyledGrid, Object.assign({ as: Element, ref: ref }, elemProps), children));
     },
     subComponents: {
         /**

package/dist/commonjs/layout/lib/utils/background.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.background = exports.backgroundFns = exports.backgroundStyleFnConfigs = void 0;
-var buildStyleFns_1 = require("./buildStyleFns");
+const buildStyleFns_1 = require("./buildStyleFns");
 exports.backgroundStyleFnConfigs = [
     {
         name: 'background',

package/dist/commonjs/layout/lib/utils/border/color.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.borderColorFns = exports.borderColorStyleFnConfigs = void 0;
-var buildStyleFns_1 = require("../buildStyleFns");
+const buildStyleFns_1 = require("../buildStyleFns");
 exports.borderColorStyleFnConfigs = [
     {
         name: 'borderColor',

package/dist/commonjs/layout/lib/utils/border/index.js

@@ -1,28 +1,12 @@
 "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 __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.borderStyleFnConfigs = exports.border = void 0;
-var buildStyleFns_1 = require("../buildStyleFns");
-var color_1 = require("./color");
-var lineStyle_1 = require("./lineStyle");
-var radius_1 = require("./radius");
-var shorthand_1 = require("./shorthand");
-var width_1 = require("./width");
+const buildStyleFns_1 = require("../buildStyleFns");
+const color_1 = require("./color");
+const lineStyle_1 = require("./lineStyle");
+const radius_1 = require("./radius");
+const shorthand_1 = require("./shorthand");
+const width_1 = require("./width");
 /**
  * A style prop function that takes component props and returns border styles. Some props, such as borderRadius and borderColor, are connected to our design tokens.
  * If no `BorderStyleProps` are found, it returns an empty object.
@@ -40,5 +24,17 @@ var width_1 = require("./width");
  * );
  *```
  */
-exports.border = buildStyleFns_1.buildStylePropFn(__assign(__assign(__assign(__assign(__assign({}, color_1.borderColorFns), lineStyle_1.borderLineStyleFns), radius_1.borderRadiusFns), shorthand_1.borderShorthandFns), width_1.borderWidthFns));
-exports.borderStyleFnConfigs = __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], color_1.borderColorStyleFnConfigs), lineStyle_1.borderLineStyleFnConfigs), radius_1.borderRadiusStyleFnConfigs), shorthand_1.borderShorthandStyleFnConfigs), width_1.borderWidthStyleFnConfigs);
+exports.border = buildStyleFns_1.buildStylePropFn({
+    ...color_1.borderColorFns,
+    ...lineStyle_1.borderLineStyleFns,
+    ...radius_1.borderRadiusFns,
+    ...shorthand_1.borderShorthandFns,
+    ...width_1.borderWidthFns,
+});
+exports.borderStyleFnConfigs = [
+    ...color_1.borderColorStyleFnConfigs,
+    ...lineStyle_1.borderLineStyleFnConfigs,
+    ...radius_1.borderRadiusStyleFnConfigs,
+    ...shorthand_1.borderShorthandStyleFnConfigs,
+    ...width_1.borderWidthStyleFnConfigs,
+];

package/dist/commonjs/layout/lib/utils/border/lineStyle.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.borderLineStyleFns = exports.borderLineStyleFnConfigs = void 0;
-var buildStyleFns_1 = require("../buildStyleFns");
+const buildStyleFns_1 = require("../buildStyleFns");
 exports.borderLineStyleFnConfigs = [
     {
         name: 'borderCollapse',

package/dist/commonjs/layout/lib/utils/border/radius.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.borderRadiusFns = exports.borderRadiusStyleFnConfigs = void 0;
-var buildStyleFns_1 = require("../buildStyleFns");
+const buildStyleFns_1 = require("../buildStyleFns");
 exports.borderRadiusStyleFnConfigs = [
     {
         name: 'borderRadius',