@workday/canvas-kit-preview-react 9.0.0-alpha.364-next.3 → 9.0.0-alpha.382-next.2

package/dist/es6/select/lib/scrolling.js

@@ -1,14 +1,13 @@
 // Modified from https://gist.github.com/hsablonniere/2581101
-export var scrollIntoViewIfNeeded = function (elem, centerIfNeeded) {
-    if (centerIfNeeded === void 0) { centerIfNeeded = true; }
-    var parent = elem.parentElement;
+export const scrollIntoViewIfNeeded = (elem, centerIfNeeded = true) => {
+    const parent = elem.parentElement;
     if (elem && parent) {
-        var parentComputedStyle = window.getComputedStyle(parent, null);
-        var parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10);
+        const parentComputedStyle = window.getComputedStyle(parent, null);
+        const parentBorderTopWidth = parseInt(parentComputedStyle.getPropertyValue('border-top-width'), 10);
         // Check if elem is out of view at the top edge of the parent's viewport
-        var overTop = elem.offsetTop < parent.scrollTop + parentBorderTopWidth;
+        const overTop = elem.offsetTop < parent.scrollTop + parentBorderTopWidth;
         // Check if elem is out of view at the bottom edge of the parent's viewport
-        var overBottom = elem.offsetTop + elem.offsetHeight >
+        const overBottom = elem.offsetTop + elem.offsetHeight >
             parent.scrollTop + parentBorderTopWidth + parent.clientHeight;
         if ((overTop || overBottom) && centerIfNeeded) {
             parent.scrollTop = Math.floor(elem.offsetTop - parent.clientHeight / 2 - parentBorderTopWidth + elem.clientHeight / 2);

package/dist/es6/select/lib/utils.js

@@ -1,8 +1,8 @@
-export var getIndexByValue = function (options, value) {
+export const getIndexByValue = (options, value) => {
     if (!options || value === undefined) {
         return -1;
     }
-    for (var i = 0; i < options.length; i++) {
+    for (let i = 0; i < options.length; i++) {
         if (options[i].value === value) {
             return i;
         }
@@ -10,7 +10,7 @@ export var getIndexByValue = function (options, value) {
     return -1;
 };
 // If the value doesn't exist in the options, return index 0
-export var getCorrectedIndexByValue = function (options, value) {
-    var indexByValue = getIndexByValue(options, value);
+export const getCorrectedIndexByValue = (options, value) => {
+    const indexByValue = getIndexByValue(options, value);
     return indexByValue === -1 ? 0 : indexByValue;
 };

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

@@ -1,29 +1,3 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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;
-};
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
@@ -32,45 +6,57 @@ import { jsx, keyframes } from '@emotion/react';
 import { colors, depth } from '@workday/canvas-kit-react/tokens';
 import { SidePanelContext } from './hooks';
 import { SidePanelToggleButton } from './SidePanelToggleButton';
-var createKeyframes = function (from, to) {
-    var normalized = {
+const createKeyframes = (from, to) => {
+    const normalized = {
         from: typeof from === 'number' ? from + 'px' : from,
         to: typeof to === 'number' ? to + 'px' : to,
     };
-    return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    from {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    } to {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    }\n  "], ["\n    from {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    } to {\n      width: ", ";\n      min-width: ", ";\n      max-width: ", ";\n    }\n  "])), normalized.from, normalized.from, normalized.from, normalized.to, normalized.to, normalized.to);
+    return keyframes `
+    from {
+      width: ${normalized.from};
+      min-width: ${normalized.from};
+      max-width: ${normalized.from};
+    } to {
+      width: ${normalized.to};
+      min-width: ${normalized.to};
+      max-width: ${normalized.to};
+    }
+  `;
 };
-var containerVariantStyle = {
-    alternate: __assign({ backgroundColor: colors.frenchVanilla100 }, depth[5]),
+const containerVariantStyle = {
+    alternate: {
+        backgroundColor: colors.frenchVanilla100,
+        ...depth[5],
+    },
     standard: {
         backgroundColor: colors.soap100,
     },
 };
-var Panel = styled('section')({
+const Panel = styled('section')({
     overflow: 'hidden',
     position: 'relative',
     boxSizing: 'border-box',
     height: '100%',
 });
-export var SidePanel = createComponent('section')({
+export const SidePanel = createComponent('section')({
     displayName: 'SidePanel',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, _b = _a.collapsedWidth, collapsedWidth = _b === void 0 ? 64 : _b, _c = _a.expanded, expanded = _c === void 0 ? true : _c, _d = _a.expandedWidth, expandedWidth = _d === void 0 ? 320 : _d, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _e = _a.origin, origin = _e === void 0 ? 'left' : _e, _f = _a.variant, variant = _f === void 0 ? 'standard' : _f, touched = _a.touched, elemProps = __rest(_a, ["children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "variant", "touched"]);
-        var _g = React.useState(expanded ? 'expanded' : 'collapsed'), state = _g[0], setState = _g[1];
-        React.useEffect(function () {
+    Component({ children, collapsedWidth = 64, expanded = true, expandedWidth = 320, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin = 'left', variant = 'standard', touched, ...elemProps }, ref, Element) {
+        const [state, setState] = React.useState(expanded ? 'expanded' : 'collapsed');
+        React.useEffect(() => {
             if (typeof onExpandedChange !== 'undefined') {
                 onExpandedChange(expanded);
             }
         }, [expanded, onExpandedChange]);
-        React.useEffect(function () {
+        React.useEffect(() => {
             if (typeof onStateTransition !== 'undefined') {
                 onStateTransition(state);
             }
         }, [state, onStateTransition]);
-        var motion = {
+        const motion = {
             collapse: createKeyframes(expandedWidth, collapsedWidth),
             expand: createKeyframes(collapsedWidth, expandedWidth),
         };
-        var handleAnimationEnd = function (event) {
+        const handleAnimationEnd = (event) => {
             if (event.currentTarget === event.target) {
                 if (event.animationName === motion.collapse.name) {
                     setState('collapsed');
@@ -83,7 +69,7 @@ export var SidePanel = createComponent('section')({
                 onAnimationEnd(event);
             }
         };
-        var handleAnimationStart = function (event) {
+        const handleAnimationStart = (event) => {
             if (event.currentTarget === event.target) {
                 if (event.animationName === motion.collapse.name ||
                     event.animationName === motion.expand.name) {
@@ -94,21 +80,21 @@ export var SidePanel = createComponent('section')({
                 onAnimationStart(event);
             }
         };
-        return (jsx(Panel, __assign({ ref: ref, as: Element, css: [
+        return (jsx(Panel, Object.assign({ ref: ref, as: Element, css: [
                 {
                     width: expanded ? expandedWidth : collapsedWidth,
                     maxWidth: expanded ? expandedWidth : collapsedWidth,
                     // mounted.current will be false on the first render, thus you won't get an unwanted animation here
                     // Will animate again if you force a re-render (like in Storybook)
                     animation: touched
-                        ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out"
+                        ? `${expanded ? motion.expand : motion.collapse} 200ms ease-out`
                         : undefined,
                 },
                 containerVariantStyle[variant],
             ], onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
             jsx(SidePanelContext.Provider, { value: {
-                    state: state,
-                    origin: origin,
+                    state,
+                    origin,
                 } }, children)));
     },
     subComponents: {
@@ -124,4 +110,3 @@ export var SidePanel = createComponent('section')({
         ToggleButton: SidePanelToggleButton,
     },
 });
-var templateObject_1;

package/dist/es6/side-panel/lib/SidePanelToggleButton.js

@@ -1,25 +1,3 @@
-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;
-};
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
@@ -33,13 +11,12 @@ import { SidePanelContext } from './hooks';
 /**
  * A toggle button styled specifically for the side panel container.
  */
-export var SidePanelToggleButton = createComponent('button')({
+export const SidePanelToggleButton = createComponent('button')({
     displayName: 'SidePanel.ToggleButton',
-    Component: function (_a) {
-        var _b = _a.variant, variant = _b === void 0 ? undefined : _b, _c = _a.icon, icon = _c === void 0 ? transformationImportIcon : _c, _d = _a.tooltipTextExpand, tooltipTextExpand = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, tooltipTextCollapse = _e === void 0 ? 'Collapse' : _e, elemProps = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
-        var context = React.useContext(SidePanelContext);
-        var useRTLOrigin = function () {
-            var isRTL = useIsRTL();
+    Component({ variant = undefined, icon = transformationImportIcon, tooltipTextExpand = 'Expand', tooltipTextCollapse = 'Collapse', ...elemProps }) {
+        const context = React.useContext(SidePanelContext);
+        const useRTLOrigin = () => {
+            const isRTL = useIsRTL();
             // if the direction is set to RTl, flip the origin
             if (isRTL) {
                 return context.origin === 'left' ? 'right' : 'left';
@@ -47,9 +24,9 @@ export var SidePanelToggleButton = createComponent('button')({
             // Otherwise, default to returning the origin
             return context.origin;
         };
-        var rtlOrigin = useRTLOrigin();
+        const rtlOrigin = useRTLOrigin();
         // Note: Depending on the collapsed width, the button could "jump" to it's final position.
-        var buttonStyle = css({
+        const buttonStyle = css({
             position: 'absolute',
             top: space.m,
             width: space.l,
@@ -57,10 +34,10 @@ export var SidePanelToggleButton = createComponent('button')({
             left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? space.s : undefined,
             margin: context.state === 'collapsed' ? 'auto' : 0,
             transform: context.state === 'collapsed' || context.state === 'collapsing'
-                ? "scaleX(" + (rtlOrigin === 'left' ? '1' : '-1') + ")"
-                : "scaleX(" + (rtlOrigin === 'left' ? '-1' : '1') + ")",
+                ? `scaleX(${rtlOrigin === 'left' ? '1' : '-1'})`
+                : `scaleX(${rtlOrigin === 'left' ? '-1' : '1'})`,
         });
         return (jsx(Tooltip, { title: context.state === 'collapsed' ? tooltipTextExpand : tooltipTextCollapse, type: "muted" },
-            jsx(TertiaryButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, elemProps))));
+            jsx(TertiaryButton, Object.assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, elemProps))));
     },
 });

package/dist/es6/side-panel/lib/hooks.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export var SidePanelContext = React.createContext({
+export const SidePanelContext = React.createContext({
     state: 'expanded',
     origin: 'left',
 });
@@ -19,52 +19,52 @@ import { useUniqueId } from '@workday/canvas-kit-react/common';
  * });
  * ```
  */
-export var useSidePanel = function (config) {
-    var _a = React.useState(false), touched = _a[0], setTouched = _a[1];
-    var configParams = config
+export const useSidePanel = (config) => {
+    const [touched, setTouched] = React.useState(false);
+    const configParams = config
         ? config
         : {
             initialExpanded: true,
             panelId: undefined,
             labelId: undefined,
         };
-    var _b = configParams.initialExpanded, initialExpanded = _b === void 0 ? true : _b, panelIdParam = configParams.panelId, labelIdParam = configParams.labelId;
-    var _c = React.useState(initialExpanded), expanded = _c[0], setExpanded = _c[1];
-    var panelId = useUniqueId(panelIdParam);
-    var labelId = useUniqueId(labelIdParam);
+    const { initialExpanded = true, panelId: panelIdParam, labelId: labelIdParam } = configParams;
+    const [expanded, setExpanded] = React.useState(initialExpanded);
+    const panelId = useUniqueId(panelIdParam);
+    const labelId = useUniqueId(labelIdParam);
     // This prevents keyframes animations from rendering prematurely
-    var handleSetTouched = function () {
+    const handleSetTouched = () => {
         if (touched === false) {
             setTouched(true);
         }
     };
-    var handleClick = function () {
+    const handleClick = () => {
         handleSetExpanded(!expanded);
     };
-    var handleSetExpanded = function (newExpandedState) {
+    const handleSetExpanded = (newExpandedState) => {
         handleSetTouched();
         setExpanded(newExpandedState);
     };
-    var panelProps = {
+    const panelProps = {
         expanded: expanded,
         id: panelId,
         'aria-labelledby': labelId,
-        touched: touched,
+        touched,
     };
-    var labelProps = {
+    const labelProps = {
         id: labelId,
     };
-    var controlProps = {
+    const controlProps = {
         'aria-controls': panelId,
         'aria-expanded': expanded,
         'aria-labelledby': labelId,
         onClick: handleClick,
     };
     return {
-        expanded: expanded,
+        expanded,
         setExpanded: handleSetExpanded,
-        panelProps: panelProps,
-        labelProps: labelProps,
-        controlProps: controlProps,
+        panelProps,
+        labelProps,
+        controlProps,
     };
 };

package/dist/es6/status-indicator/lib/StatusIndicator.js

@@ -1,34 +1,11 @@
-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 React from 'react';
 import { createContainer, createElemPropsHook } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { StatusIndicatorIcon, statusIndicatorColors } from './StatusIndicatorIcon';
 import { StatusIndicatorLabel } from './StatusIndicatorLabel';
 import { useStatusIndicatorModel } from './hooks';
-export var useStatusIndicator = createElemPropsHook(useStatusIndicatorModel)(function (_a) {
-    var state = _a.state;
-    var colors = statusIndicatorColors[state.variant][state.emphasis];
+export const useStatusIndicator = createElemPropsHook(useStatusIndicatorModel)(({ state }) => {
+    const colors = statusIndicatorColors[state.variant][state.emphasis];
     return {
         opacity: state.variant === 'transparent' ? '0.85' : undefined,
         color: colors.text,
@@ -45,7 +22,7 @@ export var useStatusIndicator = createElemPropsHook(useStatusIndicatorModel)(fun
  * </StatusIndicator>
  * ```
  */
-export var StatusIndicator = createContainer('div')({
+export const StatusIndicator = createContainer('div')({
     displayName: 'StatusIndicator',
     modelHook: useStatusIndicatorModel,
     elemPropsHook: useStatusIndicator,
@@ -69,7 +46,6 @@ export var StatusIndicator = createContainer('div')({
          */
         Icon: StatusIndicatorIcon,
     },
-})(function (_a, Element, model) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(Flex, __assign({ gap: "xxxs", as: Element, maxWidth: 200, paddingX: "xxxs", display: "inline-flex", alignItems: "center", height: 20, borderRadius: "s" }, elemProps), children));
+})(({ children, ...elemProps }, Element, model) => {
+    return (React.createElement(Flex, Object.assign({ gap: "xxxs", as: Element, maxWidth: 200, paddingX: "xxxs", display: "inline-flex", alignItems: "center", height: 20, borderRadius: "s" }, elemProps), children));
 });

package/dist/es6/status-indicator/lib/StatusIndicatorIcon.js

@@ -1,20 +1,9 @@
-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);
-};
 import React from 'react';
 import { createElemPropsHook, createSubcomponent } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { useStatusIndicatorModel } from './hooks';
 import { colors } from '@workday/canvas-kit-react/tokens';
-export var statusIndicatorColors = {
+export const statusIndicatorColors = {
     gray: {
         high: {
             text: colors.frenchVanilla100,
@@ -76,17 +65,16 @@ export var statusIndicatorColors = {
         },
     },
 };
-export var useStatusIndicatorIcon = createElemPropsHook(useStatusIndicatorModel)(function (_a) {
-    var state = _a.state;
-    var colors = statusIndicatorColors[state.variant][state.emphasis];
+export const useStatusIndicatorIcon = createElemPropsHook(useStatusIndicatorModel)(({ state }) => {
+    const colors = statusIndicatorColors[state.variant][state.emphasis];
     return {
         color: colors.text,
         colorHover: colors.background,
     };
 });
-export var StatusIndicatorIcon = createSubcomponent('span')({
+export const StatusIndicatorIcon = createSubcomponent('span')({
     modelHook: useStatusIndicatorModel,
     elemPropsHook: useStatusIndicatorIcon,
-})(function (elemProps, Element, model) {
-    return React.createElement(SystemIcon, __assign({ as: Element, size: 20, role: "img" }, elemProps));
+})((elemProps, Element, model) => {
+    return React.createElement(SystemIcon, Object.assign({ as: Element, size: 20, role: "img" }, elemProps));
 });

package/dist/es6/status-indicator/lib/StatusIndicatorLabel.js

@@ -1,32 +1,9 @@
-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 React from 'react';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Text } from '@workday/canvas-kit-react/text';
-export var StatusIndicatorLabel = createComponent('span')({
+export const StatusIndicatorLabel = createComponent('span')({
     displayName: 'StatusIndicator.Label',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(Text, __assign({ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", typeLevel: "subtext.large", fontWeight: "bold", textTransform: "capitalize", ref: ref, color: "inherit", as: Element }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Text, Object.assign({ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", typeLevel: "subtext.large", fontWeight: "bold", textTransform: "capitalize", ref: ref, color: "inherit", as: Element }, elemProps), children));
     },
 });

package/dist/es6/status-indicator/lib/hooks/useStatusIndicatorModel.js

@@ -1,16 +1,5 @@
-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);
-};
 import { createModelHook } from '@workday/canvas-kit-react/common';
-export var useStatusIndicatorModel = createModelHook({
+export const useStatusIndicatorModel = createModelHook({
     defaultConfig: {
         /**
          * Defines the emphasis of the `StatusIndicator`.
@@ -25,7 +14,9 @@ export var useStatusIndicatorModel = createModelHook({
          */
         variant: 'gray',
     },
-})(function (config) {
-    var state = __assign({}, config);
-    return { state: state, events: {} };
+})(config => {
+    const state = {
+        ...config,
+    };
+    return { state, events: {} };
 });

package/dist/es6/text-area/lib/TextArea.js

@@ -1,31 +1,9 @@
-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 React from 'react';
 import { createContainer } from '@workday/canvas-kit-react/common';
 import { FormField, useFormFieldModel, useFormFieldOrientation, } from '@workday/canvas-kit-preview-react/form-field';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { TextAreaField } from './TextAreaField';
-export var TextArea = createContainer('div')({
+export const TextArea = createContainer('div')({
     displayName: 'TextArea',
     modelHook: useFormFieldModel,
     subComponents: {
@@ -33,8 +11,7 @@ export var TextArea = createContainer('div')({
         Label: FormField.Label,
         Hint: FormField.Hint,
     },
-})(function (_a, Element) {
-    var children = _a.children, orientation = _a.orientation, elemProps = __rest(_a, ["children", "orientation"]);
-    var layoutProps = useFormFieldOrientation(orientation);
-    return (React.createElement(Flex, __assign({ as: Element }, layoutProps, elemProps), children));
+})(({ children, orientation, ...elemProps }, Element) => {
+    const layoutProps = useFormFieldOrientation(orientation);
+    return (React.createElement(Flex, Object.assign({ as: Element }, layoutProps, elemProps), children));
 });

package/dist/es6/text-area/lib/TextAreaField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAyCA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;EAgCxB,CAAC"}
+{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AA6CA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;EAgCxB,CAAC"}

package/dist/es6/text-area/lib/TextAreaField.js

@@ -1,34 +1,11 @@
-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;
-};
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { borderRadius, inputColors, spaceNumbers, type, } from '@workday/canvas-kit-react/tokens';
-import { createSubcomponent, useTheme } from '@workday/canvas-kit-react/common';
-import { useThemedRing } from '@workday/canvas-kit-labs-react/common';
+import { createSubcomponent, useTheme, useThemedRing, } from '@workday/canvas-kit-react/common';
 import { FormField } from '@workday/canvas-kit-preview-react/form-field';
 import { useTextInputModel } from '@workday/canvas-kit-preview-react/text-input';
-var baseStyles = {
+const baseStyles = {
     transition: '0.2s box-shadow, 0.2s border-color',
     resize: 'both',
     '&::webkit-resizer': {
@@ -52,20 +29,19 @@ var baseStyles = {
         },
     },
 };
-export var TextAreaField = createSubcomponent('textarea')({
+export const TextAreaField = createSubcomponent('textarea')({
     displayName: 'TextArea.Field',
     modelHook: useTextInputModel,
-})(function (_a, Element, model) {
-    var elemProps = __rest(_a, []);
-    var theme = useTheme();
-    var errorRing = useThemedRing('error');
-    var focusStyles = model.state.hasError
+})(({ ...elemProps }, Element, model) => {
+    const theme = useTheme();
+    const errorRing = useThemedRing('error');
+    const focusStyles = model.state.hasError
         ? errorRing
         : {
             '&: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}`,
             },
         };
-    return (jsx(FormField.Input, __assign({ as: Element }, type.levels.subtext.large, { css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + inputColors.border, display: "block", backgroundColor: inputColors.background, borderRadius: borderRadius.m, minHeight: 64, minWidth: 280, padding: spaceNumbers.xxs, margin: 0 })));
+    return (jsx(FormField.Input, Object.assign({ as: Element }, type.levels.subtext.large, { css: [baseStyles, focusStyles] }, elemProps, { border: `1px solid ${inputColors.border}`, display: "block", backgroundColor: inputColors.background, borderRadius: borderRadius.m, minHeight: 64, minWidth: 280, padding: spaceNumbers.xxs, margin: 0 })));
 });