@workday/canvas-kit-preview-react 7.0.0-alpha.0-next.1 → 7.0.0-alpha.0-next.3

package/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx

@@ -1,5 +1,4 @@
-/** @jsx jsx */
-import {css, jsx} from '@emotion/core';
+import React from 'react';
 import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
 import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
@@ -36,14 +35,12 @@ export const DropdownButton = createComponent(IconButton)({
     Element
   ) => {
     const hasPlainVariant = variant === 'plain';
-    // gives the plain icon variant a little extra space between the chevron separators
-    const customStyles = css(hasPlainVariant ? {margin: '0 1px'} : {});
 
     return (
       <Element
         ref={ref}
         type="button"
-        css={customStyles}
+        style={hasPlainVariant ? {margin: '0 1px'} : {}}
         variant={variant}
         icon={buttonIcon}
         color={colors.licorice200}

package/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx

@@ -1,7 +1,5 @@
-/** @jsx jsx */
 import React from 'react';
-import {css, jsx} from '@emotion/core';
-import {styled} from '@workday/canvas-kit-react/common';
+import {styled, StyledType} from '@workday/canvas-kit-react/common';
 import {
   borderRadius,
   colors,
@@ -15,6 +13,7 @@ import {
 import {Breadcrumb} from '../types';
 // local components
 import {DropdownMenuItemLink} from './MenuItemLink';
+import {Box, BoxProps} from '@workday/canvas-kit-labs-react/common';
 
 export interface DropdownMenuProps {
   /**
@@ -51,7 +50,7 @@ export interface DropdownMenuProps {
   toggleActiveItemDown: () => void;
 }
 
-const menuStyles = css({
+const StyledDropdownMenu = styled(Box)<BoxProps & StyledType>({
   ...type.levels.subtext.large,
   ...depth[2],
   backgroundColor: commonColors.background,
@@ -130,7 +129,7 @@ export const DropdownMenu = ({
   };
 
   return (
-    <div css={menuStyles}>
+    <StyledDropdownMenu>
       <MenuList {...elemProps}>
         {dropdownItems.map((item, i) => {
           const {index, link, text, ...elemProps} = item;
@@ -148,6 +147,6 @@ export const DropdownMenu = ({
           );
         })}
       </MenuList>
-    </div>
+    </StyledDropdownMenu>
   );
 };

package/breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx

@@ -1,25 +1,19 @@
-/** @jsx jsx */
 import React from 'react';
-import {css, jsx} from '@emotion/core';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {chevronLeftSmallIcon, chevronRightSmallIcon} from '@workday/canvas-system-icons-web';
 import {colors} from '@workday/canvas-kit-react/tokens';
 
 import {useRTL} from '../hooks';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
 
 export type ListItemProps = React.HTMLAttributes<HTMLLIElement>;
 
-const breadcrumbItemStyles = css({
-  display: `flex`,
-  alignItems: `center`,
-});
-
 export const BreadcrumbsListItem = ({children, ...props}: ListItemProps) => {
   const {shouldUseRTL} = useRTL();
   const icon = shouldUseRTL ? chevronLeftSmallIcon : chevronRightSmallIcon;
 
   return (
-    <li css={breadcrumbItemStyles} {...props}>
+    <Flex as="li" alignItems="center" {...props}>
       {children}
       <SystemIcon
         icon={icon}
@@ -27,6 +21,6 @@ export const BreadcrumbsListItem = ({children, ...props}: ListItemProps) => {
         colorHover={colors.licorice200}
         aria-hidden
       />
-    </li>
+    </Flex>
   );
 };

package/breadcrumbs/lib/Breadcrumbs/List/index.tsx

@@ -1,26 +1,28 @@
-/** @jsx jsx */
-import React, {forwardRef} from 'react';
-import {css, jsx} from '@emotion/core';
-
-const breadcrumbListStyles = css({
-  alignItems: 'center',
-  boxSizing: 'border-box',
-  display: 'inline-flex',
-  // minHeight set to keep the nav from bouncing when the icon button appears / disappears
-  minHeight: 40,
-  listStyle: 'none',
-  margin: 0,
-  padding: 0,
-});
+import React from 'react';
+import {createComponent} from '@workday/canvas-kit-react/common';
+import {Flex} from '@workday/canvas-kit-labs-react/layout';
 
 export type BreadcrumbsListProps = React.HTMLAttributes<HTMLUListElement>;
 
-export const BreadcrumbsList = forwardRef(
-  ({children, ...props}: BreadcrumbsListProps, ref: React.Ref<HTMLUListElement>) => {
+export const BreadcrumbsList = createComponent('ul')({
+  displayName: 'BreadcrumbsList',
+  Component: ({children, ...elemProps}: BreadcrumbsListProps, ref) => {
     return (
-      <ul css={breadcrumbListStyles} role="list" ref={ref} {...props}>
+      <Flex
+        padding="zero"
+        margin="zero"
+        display="inline-flex"
+        alignItems="center"
+        minHeight={40}
+        listStyle="none"
+        style={{boxSizing: 'border-box'}}
+        as="ul"
+        role="list"
+        ref={ref}
+        {...elemProps}
+      >
         {children}
-      </ul>
+      </Flex>
     );
-  }
-);
+  },
+});

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,0KAiCzB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAE7E,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,eAAe;IAC1D;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;;OAIG;IACH,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B;;OAEG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,cAAc,0KA+BzB,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Button.js

@@ -21,9 +21,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsx jsx */
-var core_1 = require("@emotion/core");
+var react_1 = __importDefault(require("react"));
 var button_1 = require("@workday/canvas-kit-react/button");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
@@ -33,8 +35,6 @@ exports.DropdownButton = common_1.createComponent(button_1.IconButton)({
     Component: function (_a, ref, Element) {
         var _b = _a.buttonIcon, buttonIcon = _b === void 0 ? canvas_system_icons_web_1.relatedActionsIcon : _b, toggled = _a.toggled, _c = _a.variant, variant = _c === void 0 ? 'plain' : _c, elemProps = __rest(_a, ["buttonIcon", "toggled", "variant"]);
         var hasPlainVariant = variant === 'plain';
-        // gives the plain icon variant a little extra space between the chevron separators
-        var customStyles = core_1.css(hasPlainVariant ? { margin: '0 1px' } : {});
-        return (core_1.jsx(Element, __assign({ ref: ref, type: "button", css: customStyles, variant: variant, icon: buttonIcon, color: tokens_1.colors.licorice200, toggled: toggled, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu" }, elemProps)));
+        return (react_1.default.createElement(Element, __assign({ ref: ref, type: "button", style: hasPlainVariant ? { margin: '0 1px' } : {}, variant: variant, icon: buttonIcon, color: tokens_1.colors.licorice200, toggled: toggled, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu" }, elemProps)));
     },
 });

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 import { Breadcrumb } from '../types';
 export interface DropdownMenuProps {

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAIpC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,kBAAkB,EAAE,UAAU,CAAC;IAC/B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACxE;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1D;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAgCD,eAAO,MAAM,YAAY,6LAqExB,CAAC"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAC,UAAU,EAAC,MAAM,UAAU,CAAC;AAKpC,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,kBAAkB,EAAE,UAAU,CAAC;IAC/B;;OAEG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,EAAE,UAAU,EAAE,CAAC;IAC5B;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,cAAc,CAAC,UAAU,CAAC,CAAC,CAAC;IACxE;;OAEG;IACH,qBAAqB,EAAE,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC1D;;OAEG;IACH,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB;;OAEG;IACH,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAgCD,eAAO,MAAM,YAAY,6LAqExB,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/Dropdown/Menu.js

@@ -21,13 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@emotion/core");
+var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 // local components
 var MenuItemLink_1 = require("./MenuItemLink");
-var menuStyles = core_1.css(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), tokens_1.depth[2]), { backgroundColor: tokens_1.commonColors.background, border: "1px solid " + tokens_1.colors.soap500, borderRadius: tokens_1.borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: tokens_1.space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
+var common_2 = require("@workday/canvas-kit-labs-react/common");
+var StyledDropdownMenu = common_1.styled(common_2.Box)(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), tokens_1.depth[2]), { backgroundColor: tokens_1.commonColors.background, border: "1px solid " + tokens_1.colors.soap500, borderRadius: tokens_1.borderRadius.m, boxSizing: 'border-box', display: 'inline-block', marginTop: tokens_1.space.xxxs, maxHeight: 200, outline: 'none', overflowY: 'auto', position: 'relative', width: 'max-content' }));
 var StyledMenuList = common_1.styled('ul')({
     boxSizing: 'border-box',
     listStyle: 'none',
@@ -38,7 +42,7 @@ var StyledMenuList = common_1.styled('ul')({
     wordWrap: 'break-word',
 });
 var MenuList = function (elemProps) {
-    return core_1.jsx(StyledMenuList, __assign({ role: "menu" }, elemProps));
+    return react_1.default.createElement(StyledMenuList, __assign({ role: "menu" }, elemProps));
 };
 exports.DropdownMenu = function (_a) {
     var activeDropdownItemRef = _a.activeDropdownItemRef, activeDropdownItem = _a.activeDropdownItem, _b = _a.dropdownItems, dropdownItems = _b === void 0 ? [] : _b, resetFocus = _a.resetFocus, setActiveDropdownItem = _a.setActiveDropdownItem, toggleActiveItemDown = _a.toggleActiveItemDown, toggleActiveItemUp = _a.toggleActiveItemUp, elemProps = __rest(_a, ["activeDropdownItemRef", "activeDropdownItem", "dropdownItems", "resetFocus", "setActiveDropdownItem", "toggleActiveItemDown", "toggleActiveItemUp"]);
@@ -78,11 +82,11 @@ exports.DropdownMenu = function (_a) {
                 break;
         }
     };
-    return (core_1.jsx("div", { css: menuStyles },
-        core_1.jsx(MenuList, __assign({}, elemProps), dropdownItems.map(function (item, i) {
+    return (react_1.default.createElement(StyledDropdownMenu, null,
+        react_1.default.createElement(MenuList, __assign({}, elemProps), dropdownItems.map(function (item, i) {
             var index = item.index, link = item.link, text = item.text, elemProps = __rest(item, ["index", "link", "text"]);
             var isFocused = index === activeDropdownItem.index;
-            return (core_1.jsx("li", { onKeyUp: handleItemKeyUp, onKeyDown: function (e) { return handleItemKeyDown(e, item); }, key: i },
-                core_1.jsx(MenuItemLink_1.DropdownMenuItemLink, __assign({ ref: isFocused ? activeDropdownItemRef : null, href: link }, elemProps), text)));
+            return (react_1.default.createElement("li", { onKeyUp: handleItemKeyUp, onKeyDown: function (e) { return handleItemKeyDown(e, item); }, key: i },
+                react_1.default.createElement(MenuItemLink_1.DropdownMenuItemLink, __assign({ ref: isFocused ? activeDropdownItemRef : null, href: link }, elemProps), text)));
         }))));
 };

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type ListItemProps = React.HTMLAttributes<HTMLLIElement>;
 export declare const BreadcrumbsListItem: ({ children, ...props }: ListItemProps) => JSX.Element;

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAOhE,eAAO,MAAM,mBAAmB,wDAe/B,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/ListItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAEhE,eAAO,MAAM,mBAAmB,wDAe/B,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/ListItem.js

@@ -21,21 +21,21 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var core_1 = require("@emotion/core");
+var react_1 = __importDefault(require("react"));
 var icon_1 = require("@workday/canvas-kit-react/icon");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var hooks_1 = require("../hooks");
-var breadcrumbItemStyles = core_1.css({
-    display: "flex",
-    alignItems: "center",
-});
+var layout_1 = require("@workday/canvas-kit-labs-react/layout");
 exports.BreadcrumbsListItem = function (_a) {
     var children = _a.children, props = __rest(_a, ["children"]);
     var shouldUseRTL = hooks_1.useRTL().shouldUseRTL;
     var icon = shouldUseRTL ? canvas_system_icons_web_1.chevronLeftSmallIcon : canvas_system_icons_web_1.chevronRightSmallIcon;
-    return (core_1.jsx("li", __assign({ css: breadcrumbItemStyles }, props),
+    return (react_1.default.createElement(layout_1.Flex, __assign({ as: "li", alignItems: "center" }, props),
         children,
-        core_1.jsx(icon_1.SystemIcon, { icon: icon, color: tokens_1.colors.licorice200, colorHover: tokens_1.colors.licorice200, "aria-hidden": true })));
+        react_1.default.createElement(icon_1.SystemIcon, { icon: icon, color: tokens_1.colors.licorice200, colorHover: tokens_1.colors.licorice200, "aria-hidden": true })));
 };

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.d.ts

@@ -1,5 +1,4 @@
-/** @jsx jsx */
 import React from 'react';
 export declare type BreadcrumbsListProps = React.HTMLAttributes<HTMLUListElement>;
-export declare const BreadcrumbsList: React.ForwardRefExoticComponent<BreadcrumbsListProps & React.RefAttributes<HTMLUListElement>>;
+export declare const BreadcrumbsList: import("@workday/canvas-kit-react/common").ElementComponent<"ul", BreadcrumbsListProps>;
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/index.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,oBAAY,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAE1E,eAAO,MAAM,eAAe,+FAQ3B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,oBAAY,oBAAoB,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AAE1E,eAAO,MAAM,eAAe,yFAqB1B,CAAC"}

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/List/index.js

@@ -21,21 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsx jsx */
-var react_1 = require("react");
-var core_1 = require("@emotion/core");
-var breadcrumbListStyles = core_1.css({
-    alignItems: 'center',
-    boxSizing: 'border-box',
-    display: 'inline-flex',
-    // minHeight set to keep the nav from bouncing when the icon button appears / disappears
-    minHeight: 40,
-    listStyle: 'none',
-    margin: 0,
-    padding: 0,
-});
-exports.BreadcrumbsList = react_1.forwardRef(function (_a, ref) {
-    var children = _a.children, props = __rest(_a, ["children"]);
-    return (core_1.jsx("ul", __assign({ css: breadcrumbListStyles, role: "list", ref: ref }, props), children));
+var react_1 = __importDefault(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+exports.BreadcrumbsList = common_1.createComponent('ul')({
+    displayName: 'BreadcrumbsList',
+    Component: function (_a, ref) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (react_1.default.createElement(layout_1.Flex, __assign({ padding: "zero", margin: "zero", display: "inline-flex", alignItems: "center", minHeight: 40, listStyle: "none", style: { boxSizing: 'border-box' }, as: "ul", role: "list", ref: ref }, elemProps), children));
+    },
 });

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/index.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="@emotion/core" />
 export declare const Breadcrumbs: {
     Nav: ({ "aria-label": ariaLabel, ...elemProps }: import("./Nav").BreadcrumbsNavProps) => JSX.Element;
     CollapsibleList: ({ children, buttonIcon, buttonAriaLabel, maxWidth, ...props }: import("./List/Collapsible").CollapsibleListProps) => JSX.Element;
-    List: import("react").ForwardRefExoticComponent<import("./List").BreadcrumbsListProps & import("react").RefAttributes<HTMLUListElement>>;
+    List: import("@workday/canvas-kit-react/common").ElementComponent<"ul", import("./List").BreadcrumbsListProps>;
     ListItem: ({ children, ...props }: import("./List/ListItem").ListItemProps) => JSX.Element;
     Link: ({ maxWidth, onAction, onClick, href, children, ...props }: import("./List/Link").BreadcrumbLinkProps) => JSX.Element;
     CurrentItem: ({ children, maxWidth, ...elemProps }: import("./List/CurrentItem").CurrentItemProps) => JSX.Element;

package/dist/commonjs/breadcrumbs/lib/Breadcrumbs/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../breadcrumbs/lib/Breadcrumbs/index.tsx"],"names":[],"mappings":";AAOA,eAAO,MAAM,WAAW;;;;;;;CAOvB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../breadcrumbs/lib/Breadcrumbs/index.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW;;;;;;;CAOvB,CAAC"}

package/dist/commonjs/form-field/lib/FormField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAE1E,OAAO,EAEL,cAAc,EACd,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,qBAAqB;;;;OAAiD,CAAC;AAEpF,MAAM,WAAW,cAAe,SAAQ,oBAAoB,EAAE,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9G,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAA;IACtC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,KAAK,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAE1E,OAAO,EAEL,cAAc,EACd,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAKjB,eAAO,MAAM,qBAAqB;;;;OAAiD,CAAC;AAEpF,MAAM,WAAW,cACf,SAAQ,oBAAoB,EAC1B,IAAI,CAAC,YAAY,CAAC,OAAO,KAAK,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IACpD,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,WAAW,EAAE,UAAU,GAAG,YAAY,CAAC;IACvC;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}

package/dist/commonjs/form-field/lib/FormFieldHint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAA4B,MAAM,kCAAkC,CAAC;AAE1G,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAG1D,OAAO,EAAC,cAAc,EAAmB,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IACzE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,sFA0BxB,CAAC"}
+{"version":3,"file":"FormFieldHint.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldHint.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,GAAG,EAAW,MAAM,uCAAuC,CAAC;AAGpE,OAAO,EAAC,cAAc,EAAmB,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IACzE,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,eAAO,MAAM,aAAa,sFAuBxB,CAAC"}

package/dist/commonjs/form-field/lib/FormFieldHint.js

@@ -21,14 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsx jsx */
-var core_1 = require("@emotion/core");
+var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var common_2 = require("@workday/canvas-kit-labs-react/common");
 var FormField_1 = require("./FormField");
 var hooks_1 = require("./hooks");
+var StyledHint = common_1.styled(common_2.Box)(__assign({}, tokens_1.type.levels.subtext.medium));
 exports.FormFieldHint = common_1.createComponent('p')({
     displayName: 'FormField.Hint',
     Component: function (_a, ref, Element) {
@@ -40,6 +43,6 @@ exports.FormFieldHint = common_1.createComponent('p')({
             // If there is no hint text just skip rendering
             return null;
         }
-        return (core_1.jsx(common_2.Box, __assign({ as: Element, css: __assign({}, tokens_1.type.levels.subtext.medium), color: localModel.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: tokens_1.space.xxs }, props), children));
+        return (react_1.default.createElement(StyledHint, __assign({ as: Element, color: localModel.state.hasError ? theme.canvas.palette.error.main : undefined, marginY: tokens_1.space.xxs }, props), children));
     },
 });

package/dist/commonjs/form-field/lib/FormFieldLabel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAG3E,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAcD,eAAO,MAAM,cAAc,2FA2BzB,CAAC"}
+{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAG1C,OAAO,EAAC,MAAM,EAAE,YAAY,EAAC,MAAM,uCAAuC,CAAC;AAG3E,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC;IAC9F,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAaD,eAAO,MAAM,cAAc,2FAkBzB,CAAC"}

package/dist/commonjs/form-field/lib/FormFieldLabel.js

@@ -21,22 +21,23 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsx jsx */
-var core_1 = require("@emotion/core");
+var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
+var common_2 = require("@workday/canvas-kit-labs-react/common");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var layout_1 = require("@workday/canvas-kit-labs-react/layout");
 var FormField_1 = require("./FormField");
 var hooks_1 = require("./hooks");
-var styles = {
-    label: __assign(__assign({}, tokens_1.type.levels.subtext.large), { fontWeight: tokens_1.type.properties.fontWeights.medium }),
-    asterisk: {
-        fontSize: tokens_1.type.properties.fontSizes[16],
-        fontWeight: tokens_1.type.properties.fontWeights.regular,
-        textDecoration: 'unset',
-    },
-};
+var StyledFormFieldLabel = common_1.styled('span')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { fontWeight: tokens_1.type.properties.fontWeights.medium }));
+var StyledAsterisk = common_1.styled(common_2.Box)({
+    fontSize: tokens_1.type.properties.fontSizes[20],
+    fontWeight: tokens_1.type.properties.fontWeights.regular,
+    textDecoration: 'unset',
+});
 exports.FormFieldLabel = common_1.createComponent('label')({
     displayName: 'FormField.Label',
     Component: function (_a, ref) {
@@ -44,8 +45,8 @@ exports.FormFieldLabel = common_1.createComponent('label')({
         var localModel = common_1.useModelContext(FormField_1.FormFieldModelContext, model);
         var props = hooks_1.useFormFieldLabel(localModel, elemProps, ref);
         var theme = common_1.useTheme();
-        return (core_1.jsx(layout_1.HStack, __assign({ as: "label", spacing: spacing, css: styles.label, minWidth: '180px' }, props),
-            core_1.jsx("span", null, children),
-            localModel.state.isRequired && (core_1.jsx("span", { css: [styles.asterisk, { color: theme.canvas.palette.error.main }], "aria-hidden": "true" }, "*"))));
+        return (react_1.default.createElement(layout_1.HStack, __assign({ as: "label", spacing: spacing, minWidth: "180px" }, props),
+            react_1.default.createElement(StyledFormFieldLabel, null, children),
+            localModel.state.isRequired && (react_1.default.createElement(StyledAsterisk, { as: "span", color: theme.canvas.palette.error.main, "aria-hidden": "true" }, "*"))));
     },
 });

package/dist/commonjs/side-panel/lib/SidePanel.d.ts

@@ -1,3 +1,4 @@
+/** @jsxRuntime classic */
 /** @jsx jsx */
 import * as React from 'react';
 import { IconButtonProps } from '@workday/canvas-kit-react/button';
@@ -65,7 +66,7 @@ export declare const SidePanelContext: React.Context<{
     origin: string;
 }>;
 declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): JSX.Element;
+    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): JSX.Element;
     ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: IconButtonProps & {
         /**
          * The tooltip text to expand the side panel

package/dist/commonjs/side-panel/lib/SidePanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAK7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AAsCD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;;;QAmGb;;;WAGG;;QAEH;;;WAGG;;;CAXJ,CAAC;AAEF,oBAAY,iBAAiB,GAAG,eAAe,GAAG;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AA+CF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"SidePanel.d.ts","sourceRoot":"","sources":["../../../../side-panel/lib/SidePanel.tsx"],"names":[],"mappings":"AAAA,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAM7E,oBAAY,gBAAgB,GAAG,UAAU,GAAG,WAAW,CAAC;AACxD,oBAAY,yBAAyB,GAAG,WAAW,GAAG,YAAY,GAAG,UAAU,GAAG,WAAW,CAAC;AAE9F,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;;OAIG;IACH,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IACvB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,aAAa,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC1B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,QAAQ,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD;;;;;;OAMG;IACH,iBAAiB,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,yBAAyB,KAAK,IAAI,CAAC;IAChE;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B;;;;OAIG;IACH,OAAO,EAAE,OAAO,CAAC;CAClB;AA4BD,eAAO,MAAM,gBAAgB;;;EAG3B,CAAC;AAEH,QAAA,MAAM,SAAS;;;QA8Fb;;;WAGG;;QAEH;;;WAGG;;;CAXJ,CAAC;AAEF,oBAAY,iBAAiB,GAAG,eAAe,GAAG;IAChD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AA+CF,eAAe,SAAS,CAAC"}

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

@@ -33,6 +33,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
 /** @jsx jsx */
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
@@ -41,6 +42,7 @@ var button_1 = require("@workday/canvas-kit-react/button");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
+var common_2 = require("@workday/canvas-kit-labs-react/common");
 var createKeyframes = function (from, to) {
     var normalized = {
         from: typeof from === 'number' ? from + 'px' : from,
@@ -48,13 +50,7 @@ var createKeyframes = function (from, to) {
     };
     return core_1.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);
 };
-var containerVariantStyle = {
-    alternate: __assign({ backgroundColor: tokens_1.colors.frenchVanilla100 }, tokens_1.depth[3]),
-    standard: {
-        backgroundColor: tokens_1.colors.soap100,
-    },
-};
-var Panel = common_1.styled('section')({
+var StyledPanel = common_1.styled(common_2.Box)({
     overflow: 'hidden',
     position: 'relative',
     boxSizing: 'border-box',
@@ -65,8 +61,10 @@ exports.SidePanelContext = React.createContext({
     origin: 'left',
 });
 var SidePanel = function (_a) {
-    var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f, _g = _a.variant, variant = _g === void 0 ? 'standard' : _g, touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "variant", "touched"]);
-    var _h = React.useState(expanded ? 'expanded' : 'collapsed'), state = _h[0], setState = _h[1];
+    var _b = _a.as, as = _b === void 0 ? 'section' : _b, children = _a.children, _c = _a.collapsedWidth, collapsedWidth = _c === void 0 ? 64 : _c, _d = _a.expanded, expanded = _d === void 0 ? true : _d, _e = _a.expandedWidth, expandedWidth = _e === void 0 ? 320 : _e, onAnimationEnd = _a.onAnimationEnd, onAnimationStart = _a.onAnimationStart, onExpandedChange = _a.onExpandedChange, onStateTransition = _a.onStateTransition, _f = _a.origin, origin = _f === void 0 ? 'left' : _f, 
+    // variant = 'standard',
+    touched = _a.touched, elemProps = __rest(_a, ["as", "children", "collapsedWidth", "expanded", "expandedWidth", "onAnimationEnd", "onAnimationStart", "onExpandedChange", "onStateTransition", "origin", "touched"]);
+    var _g = React.useState(expanded ? 'expanded' : 'collapsed'), state = _g[0], setState = _g[1];
     React.useEffect(function () {
         if (typeof onExpandedChange !== 'undefined') {
             onExpandedChange(expanded);
@@ -105,18 +103,7 @@ var SidePanel = function (_a) {
             onAnimationStart(event);
         }
     };
-    return (core_1.jsx(Panel, __assign({ as: as, 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"
-                    : undefined,
-            },
-            containerVariantStyle[variant],
-        ], onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
+    return (core_1.jsx(StyledPanel, __assign({ as: as, width: expanded ? expandedWidth : collapsedWidth, maxWidth: expanded ? expandedWidth : collapsedWidth, backgroundColor: elemProps.variant === 'alternate' ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.soap100, depth: elemProps.variant === 'alternate' ? 3 : undefined, animation: touched ? (expanded ? motion.expand : motion.collapse) + " 200ms ease-out" : undefined, onAnimationEnd: handleAnimationEnd, onAnimationStart: handleAnimationStart }, elemProps),
         core_1.jsx(exports.SidePanelContext.Provider, { value: {
                 state: state,
                 origin: origin,

package/dist/commonjs/text-area/lib/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,SAAS,EAAiD,MAAM,8CAA8C,CAAC;AAGvH,OAAO,EAAE,aAAa,EAAoB,MAAM,SAAS,CAAC;AAK1D,eAAO,MAAM,oBAAoB;;;;OAAwB,CAAC;AAE1D,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;CAqBnB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAC,aAAa,EAAmB,MAAM,SAAS,CAAC;AAKxD,eAAO,MAAM,oBAAoB;;;;OAAwB,CAAC;AAE1D,MAAM,WAAW,aAAc,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,QAAQ;;;;CAqBnB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAkB,YAAY,EAA4B,MAAM,kCAAkC,CAAC;AAE1G,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAGvE,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAExC,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACrF,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA4BD,eAAO,MAAM,aAAa,6FAiCxB,CAAC"}
+{"version":3,"file":"TextAreaField.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextAreaField.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAGvE,OAAO,EAAC,aAAa,EAAC,MAAM,SAAS,CAAC;AAEtC,MAAM,WAAW,kBAAmB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACrF,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA4BD,eAAO,MAAM,aAAa,6FAkCxB,CAAC"}

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

@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
 /** @jsx jsx */
 var core_1 = require("@emotion/core");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
@@ -60,6 +61,6 @@ exports.TextAreaField = common_1.createComponent('textarea')({
                     boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
                 },
             };
-        return (core_1.jsx(form_field_1.FormField.Input, __assign({ as: "textarea", ref: ref, css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + tokens_1.inputColors.border, display: 'block', backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m, minHeight: 64, minWidth: 280, padding: tokens_1.spaceNumbers.xxs, margin: 0 })));
+        return (core_1.jsx(form_field_1.FormField.Input, __assign({ as: "textarea", ref: ref, css: [baseStyles, focusStyles] }, elemProps, { border: "1px solid " + tokens_1.inputColors.border, display: "block", backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m, minHeight: 64, minWidth: 280, padding: tokens_1.spaceNumbers.xxs, margin: 0 })));
     },
 });

package/dist/commonjs/text-area/lib/hooks/useTextAreaModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACf,MAAM,8CAA8C,CAAC;AAEtD,eAAO,MAAM,gBAAgB;;;;MAAoB,CAAC;AAElD,oBAAY,aAAa,GAAG,cAAc,CAAC"}
+{"version":3,"file":"useTextAreaModel.d.ts","sourceRoot":"","sources":["../../../../../text-area/lib/hooks/useTextAreaModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAE/F,eAAO,MAAM,gBAAgB;;;;MAAoB,CAAC;AAElD,oBAAY,aAAa,GAAG,cAAc,CAAC"}

package/dist/commonjs/text-input/lib/TextInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,SAAS,EAAiD,MAAM,8CAA8C,CAAC;AAGvH,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAK1D,eAAO,MAAM,qBAAqB;;;;OAAwB,CAAC;AAE3D,MAAM,WAAW,cAAgB,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}
+{"version":3,"file":"TextInput.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EACL,SAAS,EAGV,MAAM,8CAA8C,CAAC;AAGtD,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAK1D,eAAO,MAAM,qBAAqB;;;;OAAwB,CAAC;AAE3D,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,SAAS,EAAE,KAAK,CAAC;IAC3E,KAAK,CAAC,EAAE,cAAc,CAAC;IACvB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS;;;;CAqBpB,CAAC"}

package/dist/commonjs/text-input/lib/TextInputField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAkB,YAAY,EAA4B,MAAM,kCAAkC,CAAC;AAE1G,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAGvE,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACtF,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AA2BD,eAAO,MAAM,cAAc,2FAkCzB,CAAC"}
+{"version":3,"file":"TextInputField.d.ts","sourceRoot":"","sources":["../../../../text-input/lib/TextInputField.tsx"],"names":[],"mappings":"AAWA,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,SAAS,EAAC,MAAM,8CAA8C,CAAC;AAGvE,OAAO,EAAoB,cAAc,EAAC,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACtF,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AA2BD,eAAO,MAAM,cAAc,2FAkCzB,CAAC"}

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

@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsxRuntime classic */
 /** @jsx jsx */
 var core_1 = require("@emotion/core");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
@@ -62,6 +63,6 @@ exports.TextInputField = common_1.createComponent('input')({
                     boxShadow: "inset 0 0 0 1px " + theme.canvas.palette.common.focusOutline,
                 },
             };
-        return (core_1.jsx(form_field_1.FormField.Input, __assign({ as: "input", css: [baseStyles, focusStyles], padding: tokens_1.space.xxs, margin: 0, display: 'block', height: '40px', minWidth: '280px', border: "1px solid " + tokens_1.inputColors.border, backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m }, props)));
+        return (core_1.jsx(form_field_1.FormField.Input, __assign({ as: "input", css: [baseStyles, focusStyles], padding: tokens_1.space.xxs, margin: 0, display: "block", height: "40px", minWidth: "280px", border: "1px solid " + tokens_1.inputColors.border, backgroundColor: tokens_1.inputColors.background, borderRadius: tokens_1.borderRadius.m }, props)));
     },
 });

package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAEL,cAAc,EACf,MAAM,8CAA8C,CAAC;AAEtD,eAAO,MAAM,iBAAiB;;;;MAAoB,CAAC;AAEnD,oBAAY,cAAc,GAAG,cAAc,CAAC"}
+{"version":3,"file":"useTextInputModel.d.ts","sourceRoot":"","sources":["../../../../../text-input/lib/hooks/useTextInputModel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,cAAc,EAAC,MAAM,8CAA8C,CAAC;AAE/F,eAAO,MAAM,iBAAiB;;;;MAAoB,CAAC;AAEnD,oBAAY,cAAc,GAAG,cAAc,CAAC"}