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

package/dist/commonjs/testing/lib/permutateProps.js

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

package/dist/commonjs/text/lib/LabelText.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,23 +18,12 @@ 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.LabelText = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var Text_1 = require("./Text");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const Text_1 = require("./Text");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
 /**
  * This component is intended to be used for labeling input fields. It's built on top of the
  * {@link Text} component, so it has access to all `TextProps`. By default, it renders a semantic
@@ -65,8 +43,7 @@ var tokens_1 = require("@workday/canvas-kit-react/tokens");
  */
 exports.LabelText = common_1.createComponent('label')({
     displayName: 'Label',
-    Component: function (_a, ref, Element) {
-        var cursor = _a.cursor, disabled = _a.disabled, variant = _a.variant, elemProps = __rest(_a, ["cursor", "disabled", "variant"]);
-        return (React.createElement(Text_1.Text, __assign({ ref: ref, as: Element, typeLevel: "subtext.large", color: disabled && variant !== 'inverse' ? tokens_1.inputColors.disabled.text : undefined, cursor: cursor && !disabled ? cursor : 'default', opacity: disabled && variant === 'inverse' ? '.4' : '1', variant: variant }, elemProps)));
+    Component: ({ cursor, disabled, variant, ...elemProps }, ref, Element) => {
+        return (React.createElement(Text_1.Text, Object.assign({ ref: ref, as: Element, typeLevel: "subtext.large", color: disabled && variant !== 'inverse' ? tokens_1.inputColors.disabled.text : undefined, cursor: cursor && !disabled ? cursor : 'default', opacity: disabled && variant === 'inverse' ? '.4' : '1', variant: variant }, elemProps)));
     },
 });

package/dist/commonjs/text/lib/Text.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,31 +18,19 @@ 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.Text = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
 // type changes no need
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var layout_1 = require("@workday/canvas-kit-react/layout");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const layout_1 = require("@workday/canvas-kit-react/layout");
 /**
  * Function returns updated props by token and variant values
 */
-var validateProps = function (_a) {
-    var typeLevel = _a.typeLevel, variant = _a.variant, props = __rest(_a, ["typeLevel", "variant"]);
-    var updatedProps = props;
-    var tokenPropNames = [
+const validateProps = ({ typeLevel, variant, ...props }) => {
+    let updatedProps = props;
+    const tokenPropNames = [
         'color',
         'fontFamily',
         'fontSize',
@@ -67,17 +44,17 @@ var validateProps = function (_a) {
     by replacing them by token value
     */
     if (typeLevel) {
-        var _b = typeLevel.split('.'), level = _b[0], size = _b[1];
-        var tokenProps_1 = tokens_1.type.levels[level][size];
-        tokenPropNames.forEach(function (item) {
+        const [level, size] = typeLevel.split('.');
+        const tokenProps = tokens_1.type.levels[level][size];
+        tokenPropNames.forEach(item => {
             if (!props[item]) {
-                updatedProps[item] = tokenProps_1[item];
+                updatedProps[item] = tokenProps[item];
             }
         });
     }
     // If variant provided it updates color value by variant color
     if (variant) {
-        updatedProps = __assign(__assign({}, updatedProps), tokens_1.type.variants[variant]);
+        updatedProps = { ...updatedProps, ...tokens_1.type.variants[variant] };
     }
     return updatedProps;
 };
@@ -114,8 +91,5 @@ var validateProps = function (_a) {
 */
 exports.Text = common_1.createComponent('span')({
     displayName: 'Text',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(layout_1.Box, __assign({ ref: ref, as: Element }, validateProps(elemProps)), children));
-    },
+    Component: ({ children, ...elemProps }, ref, Element) => (React.createElement(layout_1.Box, Object.assign({ ref: ref, as: Element }, validateProps(elemProps)), children)),
 });

package/dist/commonjs/text/lib/TypeLevelComponents.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,22 +18,11 @@ 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.Title = exports.Heading = exports.BodyText = exports.Subtext = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var Text_1 = require("./Text");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const Text_1 = require("./Text");
 /**
  * This component is intended to be used for small subtext content or in tight spaces.
  * By default, it renders a semantic `p` element, but you can adjust this as needed with the `as` prop.
@@ -71,10 +49,9 @@ var Text_1 = require("./Text");
  */
 exports.Subtext = common_1.createComponent('p')({
     displayName: 'Subtext',
-    Component: function (_a, ref, Element) {
-        var size = _a.size, elemProps = __rest(_a, ["size"]);
-        var typeLevel = "subtext." + size;
-        return React.createElement(Text_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    Component: ({ size, ...elemProps }, ref, Element) => {
+        const typeLevel = `subtext.${size}`;
+        return React.createElement(Text_1.Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
     },
 });
 /**
@@ -103,10 +80,9 @@ exports.Subtext = common_1.createComponent('p')({
  */
 exports.BodyText = common_1.createComponent('p')({
     displayName: 'BodyText',
-    Component: function (_a, ref, Element) {
-        var size = _a.size, elemProps = __rest(_a, ["size"]);
-        var typeLevel = "body." + size;
-        return React.createElement(Text_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    Component: ({ size, ...elemProps }, ref, Element) => {
+        const typeLevel = `body.${size}`;
+        return React.createElement(Text_1.Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
     },
 });
 /**
@@ -135,10 +111,9 @@ exports.BodyText = common_1.createComponent('p')({
  */
 exports.Heading = common_1.createComponent('h2')({
     displayName: 'Heading',
-    Component: function (_a, ref, Element) {
-        var size = _a.size, elemProps = __rest(_a, ["size"]);
-        var typeLevel = "heading." + size;
-        return React.createElement(Text_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    Component: ({ size, ...elemProps }, ref, Element) => {
+        const typeLevel = `heading.${size}`;
+        return React.createElement(Text_1.Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
     },
 });
 /**
@@ -167,9 +142,8 @@ exports.Heading = common_1.createComponent('h2')({
  */
 exports.Title = common_1.createComponent('h1')({
     displayName: 'Title',
-    Component: function (_a, ref, Element) {
-        var size = _a.size, elemProps = __rest(_a, ["size"]);
-        var typeLevel = "title." + size;
-        return React.createElement(Text_1.Text, __assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
+    Component: ({ size, ...elemProps }, ref, Element) => {
+        const typeLevel = `title.${size}`;
+        return React.createElement(Text_1.Text, Object.assign({ ref: ref, as: Element, typeLevel: typeLevel }, elemProps));
     },
 });

package/dist/commonjs/text-area/lib/TextArea.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,22 +18,11 @@ 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.TextArea = exports.TextAreaResizeDirection = 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");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
 var TextAreaResizeDirection;
 (function (TextAreaResizeDirection) {
     TextAreaResizeDirection["None"] = "none";
@@ -52,39 +30,48 @@ var TextAreaResizeDirection;
     TextAreaResizeDirection["Horizontal"] = "horizontal";
     TextAreaResizeDirection["Vertical"] = "vertical";
 })(TextAreaResizeDirection = exports.TextAreaResizeDirection || (exports.TextAreaResizeDirection = {}));
-var StyledTextArea = common_1.styled('textarea')(function (_a) {
-    var theme = _a.theme, error = _a.error;
-    return (__assign(__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', minHeight: 64, minWidth: 280, transition: '0.2s box-shadow, 0.2s border-color', padding: tokens_1.spaceNumbers.xxs, margin: 0, '&::webkit-resizer': {
-            display: 'none',
-        }, '&::placeholder': {
-            color: tokens_1.inputColors.placeholder,
-        }, '&:hover': {
-            borderColor: tokens_1.inputColors.hoverBorder,
-        }, '&:focus:not([disabled])': {
-            borderColor: theme.canvas.palette.common.focusOutline,
-            boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
-            outline: 'none',
-        }, '&:disabled': {
-            backgroundColor: tokens_1.inputColors.disabled.background,
-            borderColor: tokens_1.inputColors.disabled.border,
+const StyledTextArea = common_1.styled('textarea')(({ theme, error }) => ({
+    ...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',
+    minHeight: 64,
+    minWidth: 280,
+    transition: '0.2s box-shadow, 0.2s border-color',
+    padding: tokens_1.spaceNumbers.xxs,
+    margin: 0,
+    '&::webkit-resizer': {
+        display: 'none',
+    },
+    '&::placeholder': {
+        color: tokens_1.inputColors.placeholder,
+    },
+    '&:hover': {
+        borderColor: tokens_1.inputColors.hoverBorder,
+    },
+    '&:focus:not([disabled])': {
+        borderColor: theme.canvas.palette.common.focusOutline,
+        boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
+        outline: 'none',
+    },
+    '&: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,
-            '&::placeholder': {
-                color: tokens_1.inputColors.disabled.text,
-            },
-        } }), common_1.errorRing(error, theme)));
-}, function (_a) {
-    var resize = _a.resize, grow = _a.grow;
-    return ({
-        width: grow ? '100%' : undefined,
-        resize: grow ? TextAreaResizeDirection.Vertical : resize,
-    });
-});
+        },
+    },
+    ...common_1.errorRing(error, theme),
+}), ({ resize, grow }) => ({
+    width: grow ? '100%' : undefined,
+    resize: grow ? TextAreaResizeDirection.Vertical : resize,
+}));
 exports.TextArea = common_1.createComponent('textarea')({
     displayName: 'TextArea',
-    Component: function (_a, ref, Element) {
-        var _b = _a.resize, resize = _b === void 0 ? TextAreaResizeDirection.Both : _b, grow = _a.grow, elemProps = __rest(_a, ["resize", "grow"]);
-        return React.createElement(StyledTextArea, __assign({ ref: ref, as: Element, grow: grow, resize: resize }, elemProps));
-    },
+    Component: ({ resize = TextAreaResizeDirection.Both, grow, ...elemProps }, ref, Element) => React.createElement(StyledTextArea, Object.assign({ ref: ref, as: Element, grow: grow, resize: resize }, elemProps)),
     subComponents: {
         ErrorType: common_1.ErrorType,
         ResizeDirection: TextAreaResizeDirection,

package/dist/commonjs/text-input/lib/InputIconContainer.js

@@ -23,25 +23,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputIconContainer = void 0;
-var React = __importStar(require("react"));
-var styled_1 = __importDefault(require("@emotion/styled"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var Container = styled_1.default('div')(function (_a) {
-    var grow = _a.grow;
-    return ({
-        display: grow ? 'block' : 'inline-block',
-        position: 'relative',
-    });
-});
-var IconContainer = styled_1.default('div')({
+const React = __importStar(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const Container = styled_1.default('div')(({ grow }) => ({
+    display: grow ? 'block' : 'inline-block',
+    position: 'relative',
+}));
+const IconContainer = styled_1.default('div')({
     position: 'absolute',
     top: tokens_1.space.xxs,
     right: tokens_1.space.xxs,
 });
-var InputIconContainer = function (_a) {
-    var grow = _a.grow, children = _a.children, icon = _a.icon;
-    return (React.createElement(Container, { grow: grow },
-        children,
-        icon && React.createElement(IconContainer, null, icon)));
-};
+const InputIconContainer = ({ grow, children, icon }) => (React.createElement(Container, { grow: grow },
+    children,
+    icon && React.createElement(IconContainer, null, icon)));
 exports.InputIconContainer = InputIconContainer;

package/dist/commonjs/text-input/lib/TextInput.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,64 +18,62 @@ 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.TextInput = 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 StyledTextInput = common_1.styled('input')(__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: 40, transition: '0.2s box-shadow, 0.2s border-color', padding: tokens_1.spaceNumbers.xxs, margin: 0, '&::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 StyledTextInput = common_1.styled('input')({
+    ...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: 40,
+    transition: '0.2s box-shadow, 0.2s border-color',
+    padding: tokens_1.spaceNumbers.xxs,
+    margin: 0,
+    '&::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,
         },
-    }, '::-ms-clear': {
+    },
+    '::-ms-clear': {
         display: 'none',
-    } }), function (_a) {
-    var width = _a.width;
-    return ({
-        minWidth: width || 280,
-        width: width,
-    });
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && {
-        width: '100%',
-    };
-}, function (_a) {
-    var theme = _a.theme, error = _a.error;
-    return __assign({ '&:focus:not([disabled])': {
+    },
+}, ({ width }) => ({
+    minWidth: width || 280,
+    width,
+}), ({ grow }) => grow && {
+    width: '100%',
+}, ({ theme, error }) => {
+    return {
+        '&:focus:not([disabled])': {
             borderColor: theme.canvas.palette.common.focusOutline,
-            boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
+            boxShadow: `inset 0 0 0 1px ${theme.canvas.palette.common.focusOutline}`,
             outline: 'none',
-        } }, common_1.errorRing(error, theme));
+        },
+        ...common_1.errorRing(error, theme),
+    };
 });
 exports.TextInput = common_1.createComponent('input')({
     displayName: 'TextInput',
-    Component: function (_a, ref, Element) {
-        var grow = _a.grow, error = _a.error, width = _a.width, elemProps = __rest(_a, ["grow", "error", "width"]);
-        return (React.createElement(StyledTextInput, __assign({ type: "text", ref: ref, as: Element, grow: grow, error: error, width: width }, elemProps)));
-    },
+    Component: ({ grow, error, width, ...elemProps }, ref, Element) => (React.createElement(StyledTextInput, Object.assign({ type: "text", ref: ref, as: Element, grow: grow, error: error, width: width }, elemProps))),
     subComponents: {
         ErrorType: common_1.ErrorType,
     },

package/dist/commonjs/toast/lib/Toast.js

@@ -1,47 +1,25 @@
 "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.Toast = 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 popup_1 = require("@workday/canvas-kit-react/popup");
-var ToastCloseIcon_1 = require("./ToastCloseIcon");
-var ToastIcon_1 = require("./ToastIcon");
-var ToastMessage_1 = require("./ToastMessage");
-var ToastLink_1 = require("./ToastLink");
-var ToastBody_1 = require("./ToastBody");
-var useToastModel_1 = require("./hooks/useToastModel");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const ToastCloseIcon_1 = require("./ToastCloseIcon");
+const ToastIcon_1 = require("./ToastIcon");
+const ToastMessage_1 = require("./ToastMessage");
+const ToastLink_1 = require("./ToastLink");
+const ToastBody_1 = require("./ToastBody");
+const useToastModel_1 = require("./hooks/useToastModel");
 /**
  * The function helps set the correct aria attributes based on the mode
  * @param mode Defines what aria attributes will be added to the main container
  * @param id Used to tie the Toast to Toast.Message for screen readers
  */
-var getAriaAttributes = function (mode, id) {
+const getAriaAttributes = (mode, id) => {
     switch (mode) {
         case 'dialog':
             return {
@@ -118,7 +96,6 @@ exports.Toast = common_1.createContainer('div')({
          */
         Link: ToastLink_1.ToastLink,
     },
-})(function (_a, _, model) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (react_1.default.createElement(popup_1.Popup.Card, __assign({ as: layout_1.Flex, width: 360, padding: "0" }, getAriaAttributes(model.state.mode, model.state.id), { flexDirection: "row", gap: "xxxs" }, elemProps), children));
+})(({ children, ...elemProps }, _, model) => {
+    return (react_1.default.createElement(popup_1.Popup.Card, Object.assign({ as: layout_1.Flex, width: 360, padding: "0" }, getAriaAttributes(model.state.mode, model.state.id), { flexDirection: "row", gap: "xxxs" }, elemProps), children));
 });