@workday/canvas-kit-preview-react 7.0.0-alpha.0-next.5 → 7.0.0-alpha.78-next.6

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {BaseButton} from '@workday/canvas-kit-react/button';
 import {relatedActionsIcon} from '@workday/canvas-system-icons-web';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {colors} from '@workday/canvas-kit-react/tokens';
-import {createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent, EmotionCanvasTheme, useTheme} from '@workday/canvas-kit-react/common';
+import {colors, space} from '@workday/canvas-kit-react/tokens';
 
-export interface DropdownButtonProps extends IconButtonProps {
+export interface DropdownButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   /**
    * The accessibility label for the button
    */
@@ -22,35 +22,64 @@ export interface DropdownButtonProps extends IconButtonProps {
   toggled: boolean;
 }
 
-export const DropdownButton = createComponent(IconButton)({
+export const DropdownButton = createComponent('button')({
   displayName: 'DropdownButton',
   Component: (
-    {
-      buttonIcon = relatedActionsIcon,
-      toggled,
-      variant = 'plain',
-      ...elemProps
-    }: DropdownButtonProps,
+    {buttonIcon = relatedActionsIcon, toggled, ...elemProps}: DropdownButtonProps,
     ref,
     Element
   ) => {
-    const hasPlainVariant = variant === 'plain';
-
+    const theme = useTheme();
     return (
-      <Element
+      <BaseButton
+        as={Element}
         ref={ref}
-        type="button"
-        style={hasPlainVariant ? {margin: '0 1px'} : {}}
-        variant={variant}
-        icon={buttonIcon}
-        color={colors.licorice200}
-        toggled={toggled}
-        aria-pressed={undefined} // removing aria-pressed from IconButton and opting for aria-expanded
+        aria-pressed={undefined} // removing aria-pressed from button and opting for aria-expanded
         aria-expanded={toggled}
         aria-haspopup
         aria-controls="menu"
+        size="small"
+        height={space.l}
+        width={space.l}
+        padding={space.zero}
+        colors={getDropdownColors(toggled, theme)}
         {...elemProps}
-      />
+      >
+        <BaseButton.Icon icon={buttonIcon} />
+      </BaseButton>
     );
   },
 });
+
+const getDropdownColors = (toggled: boolean, theme: EmotionCanvasTheme) => {
+  const {
+    canvas: {
+      palette: {primary: themePrimary},
+    },
+  } = theme;
+
+  return {
+    default: {
+      icon: toggled ? themePrimary.main : colors.blackPepper400,
+      label: themePrimary.main,
+    },
+    hover: {
+      background: colors.soap200,
+      icon: toggled ? themePrimary.dark : colors.blackPepper500,
+      label: themePrimary.dark,
+    },
+    active: {
+      background: colors.soap300,
+      icon: toggled ? themePrimary.dark : colors.blackPepper500,
+      label: themePrimary.dark,
+    },
+    focus: {
+      icon: toggled ? themePrimary.main : colors.blackPepper500,
+      label: themePrimary.main,
+    },
+    disabled: {
+      icon: toggled ? themePrimary.main : colors.blackPepper400,
+      label: themePrimary.main,
+    },
+  };
+};

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

@@ -13,7 +13,7 @@ import {
 import {Breadcrumb} from '../types';
 // local components
 import {DropdownMenuItemLink} from './MenuItemLink';
-import {Box, BoxProps} from '@workday/canvas-kit-labs-react/common';
+import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 
 export interface DropdownMenuProps {
   /**

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

@@ -23,6 +23,7 @@ const ListItem = styled('li')(
     flexDirection: 'column',
     textAlign: 'left',
     ...type.levels.subtext.large,
+    fontWeight: 500,
   },
 
   ({maxWidth}: CurrentItemProps) => ({

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

@@ -4,7 +4,7 @@ import {chevronLeftSmallIcon, chevronRightSmallIcon} from '@workday/canvas-syste
 import {colors} from '@workday/canvas-kit-react/tokens';
 
 import {useRTL} from '../hooks';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 export type ListItemProps = React.HTMLAttributes<HTMLLIElement>;
 
@@ -19,6 +19,10 @@ export const BreadcrumbsListItem = ({children, ...props}: ListItemProps) => {
         icon={icon}
         color={colors.licorice200}
         colorHover={colors.licorice200}
+        size={20}
+        height={32}
+        width={32}
+        styles={{justifyContent: 'center', alignItems: 'center', display: 'inline-flex'}}
         aria-hidden
       />
     </Flex>

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import {createComponent} from '@workday/canvas-kit-react/common';
-import {Flex} from '@workday/canvas-kit-labs-react/layout';
+import {Flex} from '@workday/canvas-kit-react/layout';
 
 export type BreadcrumbsListProps = React.HTMLAttributes<HTMLUListElement>;
 

package/color-picker/lib/ColorPicker.tsx

@@ -1,7 +1,7 @@
 import {colors, space} from '@workday/canvas-kit-react/tokens';
 import {checkIcon} from '@workday/canvas-system-icons-web';
 import {ColorInput} from '@workday/canvas-kit-react/color-picker';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import * as React from 'react';
 import FormField from '@workday/canvas-kit-react/form-field';
 import styled from '@emotion/styled';
@@ -141,7 +141,7 @@ const ColorInputAndLabel = styled(FormField)({
   margin: 0,
 });
 
-const CheckButton = styled(IconButton)({
+const CheckButton = styled(SecondaryButton)({
   alignSelf: 'flex-end',
 });
 
@@ -207,7 +207,7 @@ const ColorPicker = ({
               showCheck={value === validHexValue || value === customHexValue}
             />
           </ColorInputAndLabel>
-          <CheckButton aria-label={submitLabel} variant="circleFilled" icon={checkIcon} />
+          <CheckButton aria-label={submitLabel} icon={checkIcon} />
         </ColorInputWrapper>
       )}
     </ColorPickerContainer>

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

@@ -1,6 +1,6 @@
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import React from 'react';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-export interface DropdownButtonProps extends IconButtonProps {
+export interface DropdownButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
     /**
      * The accessibility label for the button
      */
@@ -16,5 +16,5 @@ export interface DropdownButtonProps extends IconButtonProps {
      */
     toggled: boolean;
 }
-export declare const DropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<import("@workday/canvas-kit-react/common").ElementComponent<"button", IconButtonProps>, DropdownButtonProps>;
+export declare const DropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", DropdownButtonProps>;
 //# sourceMappingURL=Button.d.ts.map

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":"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"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/Dropdown/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAClF;;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,4FA2BzB,CAAC"}

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

@@ -29,13 +29,41 @@ exports.DropdownButton = void 0;
 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");
 var common_1 = require("@workday/canvas-kit-react/common");
-exports.DropdownButton = common_1.createComponent(button_1.IconButton)({
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+exports.DropdownButton = common_1.createComponent('button')({
     displayName: 'DropdownButton',
     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';
-        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)));
+        var _b = _a.buttonIcon, buttonIcon = _b === void 0 ? canvas_system_icons_web_1.relatedActionsIcon : _b, toggled = _a.toggled, elemProps = __rest(_a, ["buttonIcon", "toggled"]);
+        var theme = common_1.useTheme();
+        return (react_1.default.createElement(button_1.BaseButton, __assign({ as: Element, ref: ref, "aria-pressed": undefined, "aria-expanded": toggled, "aria-haspopup": true, "aria-controls": "menu", size: "small", height: tokens_1.space.l, width: tokens_1.space.l, padding: tokens_1.space.zero, colors: getDropdownColors(toggled, theme) }, elemProps),
+            react_1.default.createElement(button_1.BaseButton.Icon, { icon: buttonIcon })));
     },
 });
+var getDropdownColors = function (toggled, theme) {
+    var themePrimary = theme.canvas.palette.primary;
+    return {
+        default: {
+            icon: toggled ? themePrimary.main : tokens_1.colors.blackPepper400,
+            label: themePrimary.main,
+        },
+        hover: {
+            background: tokens_1.colors.soap200,
+            icon: toggled ? themePrimary.dark : tokens_1.colors.blackPepper500,
+            label: themePrimary.dark,
+        },
+        active: {
+            background: tokens_1.colors.soap300,
+            icon: toggled ? themePrimary.dark : tokens_1.colors.blackPepper500,
+            label: themePrimary.dark,
+        },
+        focus: {
+            icon: toggled ? themePrimary.main : tokens_1.colors.blackPepper500,
+            label: themePrimary.main,
+        },
+        disabled: {
+            icon: toggled ? themePrimary.main : tokens_1.colors.blackPepper400,
+            label: themePrimary.main,
+        },
+    };
+};

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

@@ -31,8 +31,8 @@ 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 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 layout_1 = require("@workday/canvas-kit-react/layout");
+var StyledDropdownMenu = common_1.styled(layout_1.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',

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

@@ -1 +1 @@
-{"version":3,"file":"CurrentItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC3E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAgBD,eAAO,MAAM,WAAW,yCAAwC,gBAAgB,gBA8B/E,CAAC"}
+{"version":3,"file":"CurrentItem.d.ts","sourceRoot":"","sources":["../../../../../../breadcrumbs/lib/Breadcrumbs/List/CurrentItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC;IAC3E;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAiBD,eAAO,MAAM,WAAW,yCAAwC,gBAAgB,gBA8B/E,CAAC"}

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

@@ -33,7 +33,7 @@ var tooltip_1 = require("@workday/canvas-kit-react/tooltip");
 var popup_1 = require("@workday/canvas-kit-react/popup");
 var hooks_1 = require("./hooks");
 var styles_1 = require("./styles");
-var ListItem = common_1.styled('li')(__assign({ display: 'flex', alignItems: 'center', flexDirection: 'column', textAlign: 'left' }, tokens_1.type.levels.subtext.large), function (_a) {
+var ListItem = common_1.styled('li')(__assign(__assign({ display: 'flex', alignItems: 'center', flexDirection: 'column', textAlign: 'left' }, tokens_1.type.levels.subtext.large), { fontWeight: 500 }), function (_a) {
     var maxWidth = _a.maxWidth;
     return (__assign({}, styles_1.truncateStyles(maxWidth)));
 });

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,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,oBAAY,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,CAAC;AAEhE,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,wDAmB/B,CAAC"}

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

@@ -31,13 +31,13 @@ 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 layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var layout_1 = require("@workday/canvas-kit-react/layout");
 var 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 (react_1.default.createElement(layout_1.Flex, __assign({ as: "li", alignItems: "center" }, props),
         children,
-        react_1.default.createElement(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, size: 20, height: 32, width: 32, styles: { justifyContent: 'center', alignItems: 'center', display: 'inline-flex' }, "aria-hidden": true })));
 };
 exports.BreadcrumbsListItem = BreadcrumbsListItem;

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

@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BreadcrumbsList = void 0;
 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");
+var layout_1 = require("@workday/canvas-kit-react/layout");
 exports.BreadcrumbsList = common_1.createComponent('ul')({
     displayName: 'BreadcrumbsList',
     Component: function (_a, ref) {

package/dist/commonjs/color-picker/lib/ColorPicker.js

@@ -126,7 +126,7 @@ var ColorInputAndLabel = styled_1.default(form_field_1.default)({
     flexDirection: 'column',
     margin: 0,
 });
-var CheckButton = styled_1.default(button_1.IconButton)({
+var CheckButton = styled_1.default(button_1.SecondaryButton)({
     alignSelf: 'flex-end',
 });
 var HexColorInput = styled_1.default(color_picker_1.ColorInput)({
@@ -161,7 +161,7 @@ var ColorPicker = function (_a) {
         showCustomHexInput && (React.createElement(ColorInputWrapper, { onSubmit: onSubmit },
             React.createElement(ColorInputAndLabel, { label: customHexInputLabel },
                 React.createElement(HexColorInput, { onChange: onCustomHexChange, onValidColorChange: onValidCustomHexChange, value: customHexValue, showCheck: value === validHexValue || value === customHexValue })),
-            React.createElement(CheckButton, { "aria-label": submitLabel, variant: "circleFilled", icon: canvas_system_icons_web_1.checkIcon })))));
+            React.createElement(CheckButton, { "aria-label": submitLabel, icon: canvas_system_icons_web_1.checkIcon })))));
 };
 ColorPicker.defaultColorSet = defaultColorSet;
 exports.default = ColorPicker;

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Stack, StackSpacing } from '@workday/canvas-kit-labs-react/layout';
+import { Stack, StackSpacing } from '@workday/canvas-kit-react/layout';
 import { FormFieldModel, FormFieldModelConfig } from './hooks';
 export declare const FormFieldModelContext: React.Context<import("@workday/canvas-kit-react/common").Model<{
     hasError?: boolean | undefined;

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,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"}
+{"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,kCAAkC,CAAC;AAErE,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/FormField.js

@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormField = exports.FormFieldModelContext = void 0;
 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");
+var layout_1 = require("@workday/canvas-kit-react/layout");
 var hooks_1 = require("./hooks");
 var FormFieldInput_1 = require("./FormFieldInput");
 var FormFieldLabel_1 = require("./FormFieldLabel");

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-labs-react/common';
+import { Box } from '@workday/canvas-kit-react/layout';
 import { FormFieldModel } from './hooks';
 export interface FormFieldHintProps extends ExtractProps<typeof Box, never> {
     model?: FormFieldModel;

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":"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"}
+{"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,kCAAkC,CAAC;AAG/D,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

@@ -29,10 +29,10 @@ exports.FormFieldHint = void 0;
 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 layout_1 = require("@workday/canvas-kit-react/layout");
 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));
+var StyledHint = common_1.styled(layout_1.Box)(__assign({}, tokens_1.type.levels.subtext.medium));
 exports.FormFieldHint = common_1.createComponent('p')({
     displayName: 'FormField.Hint',
     Component: function (_a, ref, Element) {

package/dist/commonjs/form-field/lib/FormFieldInput.d.ts

@@ -1,5 +1,5 @@
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { Box } from '@workday/canvas-kit-labs-react/common';
+import { Box } from '@workday/canvas-kit-react/layout';
 import { FormFieldModel } from './hooks';
 export interface FormFieldInputProps extends ExtractProps<typeof Box, never> {
     model?: FormFieldModel;

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

@@ -1 +1 @@
-{"version":3,"file":"FormFieldInput.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAG1D,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,2FAQzB,CAAC"}
+{"version":3,"file":"FormFieldInput.d.ts","sourceRoot":"","sources":["../../../../form-field/lib/FormFieldInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,YAAY,EAAkB,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,GAAG,EAAC,MAAM,kCAAkC,CAAC;AAGrD,OAAO,EAAC,cAAc,EAAoB,MAAM,SAAS,CAAC;AAE1D,MAAM,WAAW,mBAAoB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC1E,KAAK,CAAC,EAAE,cAAc,CAAC;CACxB;AAED,eAAO,MAAM,cAAc,2FAQzB,CAAC"}

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

@@ -28,7 +28,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFieldInput = void 0;
 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 layout_1 = require("@workday/canvas-kit-react/layout");
 var FormField_1 = require("./FormField");
 var hooks_1 = require("./hooks");
 exports.FormFieldInput = common_1.createComponent('input')({
@@ -37,6 +37,6 @@ exports.FormFieldInput = common_1.createComponent('input')({
         var model = _a.model, elemProps = __rest(_a, ["model"]);
         var localModel = common_1.useModelContext(FormField_1.FormFieldModelContext, model);
         var props = hooks_1.useFormFieldInput(localModel, elemProps, ref);
-        return react_1.default.createElement(common_2.Box, __assign({ as: Element }, props));
+        return react_1.default.createElement(layout_1.Box, __assign({ as: Element }, props));
     },
 });

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
-import { HStack, StackSpacing } from '@workday/canvas-kit-labs-react/layout';
+import { HStack, StackSpacing } from '@workday/canvas-kit-react/layout';
 import { FormFieldModel } from './hooks';
 export interface FormFieldLabelProps extends Omit<ExtractProps<typeof HStack, never>, 'spacing'> {
     model?: FormFieldModel;

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":"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"}
+{"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;AAC1C,OAAO,EAAM,MAAM,EAAE,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAI3E,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

@@ -28,13 +28,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormFieldLabel = void 0;
 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 layout_1 = require("@workday/canvas-kit-react/layout");
 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 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)({
+var StyledAsterisk = common_1.styled(layout_1.Box)({
     fontSize: tokens_1.type.properties.fontSizes[20],
     fontWeight: tokens_1.type.properties.fontWeights.regular,
     textDecoration: 'unset',

package/dist/commonjs/form-field/lib/hooks/useFormFieldOrientation.d.ts

@@ -1,4 +1,4 @@
-import { StackSpacing, StackProps } from '@workday/canvas-kit-labs-react/layout';
+import { StackSpacing, StackProps } from '@workday/canvas-kit-react/layout';
 /**
  * Adds the necessary layout props to a `FormField` component.
  */

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

@@ -1 +1 @@
-{"version":3,"file":"useFormFieldOrientation.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldOrientation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,UAAU,EAAC,MAAM,uCAAuC,CAAC;AAG/E;;GAEG;AACH,eAAO,MAAM,uBAAuB,gBAAiB,YAAY,GAAG,UAAU;mBAE3D,UAAU,CAAC,eAAe,CAAC;gBAC9B,UAAU,CAAC,YAAY,CAAC;aAC3B,YAAY;CAkBxB,CAAC"}
+{"version":3,"file":"useFormFieldOrientation.d.ts","sourceRoot":"","sources":["../../../../../form-field/lib/hooks/useFormFieldOrientation.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAG1E;;GAEG;AACH,eAAO,MAAM,uBAAuB,gBAAiB,YAAY,GAAG,UAAU;mBAE3D,UAAU,CAAC,eAAe,CAAC;gBAC9B,UAAU,CAAC,YAAY,CAAC;aAC3B,YAAY;CAkBxB,CAAC"}

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

@@ -2,7 +2,7 @@
 /** @jsx jsx */
 import * as React from 'react';
 import { jsx } from '@emotion/react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 export declare type SidePanelVariant = 'standard' | 'alternate';
 export declare type SidePanelTransitionStates = 'collapsed' | 'collapsing' | 'expanded' | 'expanding';
 export interface SidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -67,10 +67,10 @@ export declare const SidePanelContext: React.Context<{
     origin: string;
 }>;
 declare const SidePanel: {
-    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
+    ({ as, children, collapsedWidth, expanded, expandedWidth, onAnimationEnd, onAnimationStart, onExpandedChange, onStateTransition, origin, variant, touched, ...elemProps }: SidePanelProps): jsx.JSX.Element;
     ToggleButton: ({ variant, icon, tooltipTextExpand: expandLabel, tooltipTextCollapse: collapseLabel, ...rest }: ToggleButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>) => jsx.JSX.Element;
 };
-export declare type ToggleButtonProps = IconButtonProps & {
+export declare type ToggleButtonProps = TertiaryButtonProps & {
     /**
      * The tooltip text to expand the side panel
      * @default 'Expand'

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,0BAA0B;AAC1B,eAAe;AACf,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAM,GAAG,EAAY,MAAM,gBAAgB,CAAC;AACnD,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;sKAcZ,cAAc;mHAqGd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,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;AAE/B,OAAO,EAAM,GAAG,EAAuB,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAiB,mBAAmB,EAAC,MAAM,kCAAkC,CAAC;AAKrF,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;+KAcZ,cAAc;mHA0Gd,iBAAiB,GAAG,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAxBnE,CAAC;AAEF,oBAAY,iBAAiB,GAAG,mBAAmB,GAAG;IACpD;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B,CAAC;AAgDF,eAAe,SAAS,CAAC"}

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

@@ -55,7 +55,6 @@ 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,
@@ -63,7 +62,13 @@ var createKeyframes = function (from, to) {
     };
     return react_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 StyledPanel = common_1.styled(common_2.Box)({
+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')({
     overflow: 'hidden',
     position: 'relative',
     boxSizing: 'border-box',
@@ -74,10 +79,8 @@ 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, 
-    // 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];
+    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];
     React.useEffect(function () {
         if (typeof onExpandedChange !== 'undefined') {
             onExpandedChange(expanded);
@@ -116,7 +119,18 @@ var SidePanel = function (_a) {
             onAnimationStart(event);
         }
     };
-    return (react_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),
+    return (react_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),
         react_1.jsx(exports.SidePanelContext.Provider, { value: {
                 state: state,
                 origin: origin,
@@ -126,7 +140,7 @@ var SidePanel = function (_a) {
  * A toggle button styled specifically for the side panel container.
  */
 var ToggleButton = function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'plain' : _b, _c = _a.icon, icon = _c === void 0 ? canvas_system_icons_web_1.transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
+    var _b = _a.variant, variant = _b === void 0 ? undefined : _b, _c = _a.icon, icon = _c === void 0 ? canvas_system_icons_web_1.transformationImportIcon : _c, _d = _a.tooltipTextExpand, expandLabel = _d === void 0 ? 'Expand' : _d, _e = _a.tooltipTextCollapse, collapseLabel = _e === void 0 ? 'Collapse' : _e, rest = __rest(_a, ["variant", "icon", "tooltipTextExpand", "tooltipTextCollapse"]);
     var context = React.useContext(exports.SidePanelContext);
     var useRTLOrigin = function () {
         var isRTL = common_1.useIsRTL();
@@ -142,6 +156,7 @@ var ToggleButton = function (_a) {
     var buttonStyle = react_1.css({
         position: 'absolute',
         top: tokens_1.space.m,
+        width: tokens_1.space.l,
         right: context.state === 'collapsed' ? 0 : rtlOrigin === 'left' ? tokens_1.space.s : undefined,
         left: context.state === 'collapsed' ? 0 : rtlOrigin === 'right' ? tokens_1.space.s : undefined,
         margin: context.state === 'collapsed' ? 'auto' : 0,
@@ -150,7 +165,7 @@ var ToggleButton = function (_a) {
             : "scaleX(" + (rtlOrigin === 'left' ? '-1' : '1') + ")",
     });
     return (react_1.jsx(tooltip_1.Tooltip, { title: context.state === 'collapsed' ? expandLabel : collapseLabel, type: "muted" },
-        react_1.jsx(button_1.IconButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
+        react_1.jsx(button_1.TertiaryButton, __assign({ type: "button", css: buttonStyle, icon: icon, variant: variant }, rest))));
 };
 SidePanel.ToggleButton = ToggleButton;
 exports.default = SidePanel;

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

@@ -29,7 +29,7 @@ exports.TextArea = exports.TextAreaModelContext = void 0;
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
-var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var layout_1 = require("@workday/canvas-kit-react/layout");
 var hooks_1 = require("./hooks");
 var TextAreaField_1 = require("./TextAreaField");
 var TextAreaLabel_1 = require("./TextAreaLabel");

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

@@ -29,7 +29,7 @@ exports.TextInput = exports.TextInputModelContext = void 0;
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
 var form_field_1 = require("@workday/canvas-kit-preview-react/form-field");
-var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var layout_1 = require("@workday/canvas-kit-react/layout");
 var hooks_1 = require("./hooks");
 var TextInputField_1 = require("./TextInputField");
 var TextInputLabel_1 = require("./TextInputLabel");