@workday/canvas-kit-labs-react 7.0.0-alpha.0-next.6 → 7.0.0-alpha.79-next.7

package/dist/es6/search-form/lib/SearchForm.js

@@ -36,7 +36,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { colors, space, spaceNumbers } from '@workday/canvas-kit-react/tokens';
 import { styled, generateUniqueId } from '@workday/canvas-kit-react/common';
-import { IconButton } from '@workday/canvas-kit-react/button';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { searchIcon, xIcon } from '@workday/canvas-system-icons-web';
 import { FormField, FormFieldLabelPosition } from '@workday/canvas-kit-react/form-field';
 import { Combobox } from '@workday/canvas-kit-labs-react/combobox';
@@ -106,26 +106,20 @@ var SearchContainer = styled('div')({
 var SearchCombobox = styled(Combobox)({
     width: "100%",
 });
-var SearchIcon = styled(IconButton)(function (_a) {
+var SearchIcon = styled(TertiaryButton)(function (_a) {
     var isCollapsed = _a.isCollapsed, isHidden = _a.isHidden;
-    var collapsedSize = 40;
-    var size = 32;
-    var collapseStyles = isCollapsed
-        ? {
-            minWidth: collapsedSize,
-            width: collapsedSize,
-            minHeight: collapsedSize,
-            height: collapsedSize,
-        }
-        : {
-            minWidth: size,
-            width: size,
-            minHeight: size,
-            height: size,
-        };
-    return __assign({ position: "absolute", margin: isCollapsed ? "auto " + space.xxs : "auto " + space.xxxs, top: 0, bottom: 0, left: 0, padding: 0, zIndex: 3, display: isHidden ? 'none' : 'flex' }, collapseStyles);
+    return {
+        position: "absolute",
+        margin: isCollapsed ? "auto " + space.xxs : "auto " + space.xxxs,
+        top: 0,
+        bottom: 0,
+        left: 0,
+        padding: 0,
+        zIndex: 3,
+        display: isHidden ? 'none' : 'flex',
+    };
 });
-var CloseButton = styled(IconButton)(function (_a) {
+var CloseButton = styled(TertiaryButton)(function (_a) {
     var isCollapsed = _a.isCollapsed, showForm = _a.showForm;
     var collapseStyles = isCollapsed && showForm
         ? {
@@ -221,11 +215,11 @@ var SearchForm = /** @class */ (function (_super) {
                 background = formCollapsedBackground;
             }
             var isDarkBackground = chroma(background).get('lab.l') < 70;
-            return isDarkBackground ? 'inverse' : 'plain';
+            return isDarkBackground ? 'inverse' : undefined;
         };
         _this.handleSubmit = function (event) {
             event.preventDefault();
-            if (_this.state.searchQuery.trim()) {
+            if (_this.props.allowEmptyStringSearch || _this.state.searchQuery.trim()) {
                 _this.props.onSubmit(event);
             }
             else {
@@ -279,7 +273,7 @@ var SearchForm = /** @class */ (function (_super) {
         }
     };
     SearchForm.prototype.render = function () {
-        var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign"]);
+        var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, _k = _a.allowEmptyStringSearch, allowEmptyStringSearch = _k === void 0 ? false : _k, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign", "allowEmptyStringSearch"]);
         return (React.createElement(StyledSearchForm, __assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": this.labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
             React.createElement(SearchContainer, { height: height },
                 React.createElement(SearchIcon, { "aria-label": submitAriaLabel, icon: searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), type: "submit", isHidden: !!isCollapsed && !this.state.showForm }),
@@ -287,7 +281,7 @@ var SearchForm = /** @class */ (function (_super) {
                 React.createElement(SearchField, { grow: grow, id: this.labelId, inputId: "input-" + this.labelId, label: inputLabel, labelPosition: FormFieldLabelPosition.Hidden, useFieldset: false, isCollapsed: isCollapsed, showForm: this.state.showForm, height: height },
                     React.createElement(SearchCombobox, { initialValue: initialValue, clearButtonVariant: this.getIconButtonType(), autocompleteItems: autocompleteItems, onChange: this.handleSearchInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, showClearButton: !isCollapsed && showClearButton, clearButtonAriaLabel: clearButtonAriaLabel, labelId: this.labelId },
                         React.createElement(SearchInput, { ref: this.inputRef, value: this.state.searchQuery, placeholder: placeholder, isCollapsed: isCollapsed, inputColors: this.getThemeColors(), height: height, name: "search", autoComplete: "off" }))),
-                React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: xIcon, isCollapsed: isCollapsed, variant: "plain", showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
+                React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: xIcon, isCollapsed: isCollapsed, showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
     };
     SearchForm.Theme = SearchTheme;
     return SearchForm;

package/drawer/lib/DrawerHeader.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import {colors, space, type, CanvasColor, typeColors} from '@workday/canvas-kit-react/tokens';
-import {IconButton} from '@workday/canvas-kit-react/button';
+import {TertiaryButton} from '@workday/canvas-kit-react/button';
 import {xIcon} from '@workday/canvas-system-icons-web';
 
 export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -69,7 +69,7 @@ const HeaderTitle = styled('h4')<Pick<DrawerHeaderProps, 'inverse'>>(
   })
 );
 
-const CloseButton = styled(IconButton)({
+const CloseButton = styled(TertiaryButton)({
   margin: '-8px', // for inverse and plain button, we always want this margin
 });
 
@@ -93,7 +93,7 @@ export default class DrawerHeader extends React.Component<DrawerHeaderProps, {}>
         </HeaderTitle>
         {onClose && closeIconAriaLabel && (
           <CloseButton
-            variant={inverse ? 'inverse' : 'plain'}
+            variant={inverse ? 'inverse' : undefined}
             onClick={onClose}
             aria-label={closeIconAriaLabel}
             icon={xIcon}

package/index.ts

@@ -1,5 +1,4 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './layout';
 export * from './search-form';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-labs-react",
-  "version": "7.0.0-alpha.0-next.6+54a4c8c1",
+  "version": "7.0.0-alpha.79-next.7+578f91ad",
   "description": "Canvas Kit Labs is an incubator for new and experimental components. Since we have a rather rigorous process for getting components in at a production level, it can be valuable to make them available earlier while we continuously iterate on the API/functionality. The Labs modules allow us to do that as needed.",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -52,19 +52,17 @@
     "react": "^16.8 || ^17.0"
   },
   "dependencies": {
-    "@emotion/is-prop-valid": "^1.1.1",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.0-next.6+54a4c8c1",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.6+54a4c8c1",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.79-next.7+578f91ad",
+    "@workday/canvas-kit-react": "^7.0.0-alpha.79-next.7+578f91ad",
     "@workday/canvas-system-icons-web": "1.0.41",
     "chroma-js": "^2.1.0",
-    "csstype": "^2.6.17",
     "lodash.flatten": "^4.4.0",
     "rtl-css-js": "^1.14.1"
   },
   "devDependencies": {
     "@types/lodash.flatten": "^4.4.6"
   },
-  "gitHead": "54a4c8c15a1863d7560dc5a1397028c0e6d72236"
+  "gitHead": "578f91adfde267929daf4f55b7a6463f8739421e"
 }

package/search-form/lib/SearchForm.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import {CSSObject} from '@emotion/styled';
 import {colors, space, spaceNumbers} from '@workday/canvas-kit-react/tokens';
 import {GrowthBehavior, styled, generateUniqueId} from '@workday/canvas-kit-react/common';
-import {IconButton, IconButtonProps} from '@workday/canvas-kit-react/button';
+import {TertiaryButton, TertiaryButtonProps} from '@workday/canvas-kit-react/button';
 import {searchIcon, xIcon} from '@workday/canvas-system-icons-web';
 import {FormField, FormFieldLabelPosition} from '@workday/canvas-kit-react/form-field';
 import {Combobox} from '@workday/canvas-kit-labs-react/combobox';
@@ -82,6 +82,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
    * @default 40
    */
   height?: number;
+  /**
+   * If true, allow onSubmit being called when input value is empty.
+   * @default false
+   */
+  allowEmptyStringSearch?: boolean;
 }
 
 export interface SearchFormState {
@@ -164,39 +169,22 @@ const SearchCombobox = styled(Combobox)({
   width: `100%`,
 });
 
-const SearchIcon = styled(IconButton)<Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}>(
-  ({isCollapsed, isHidden}) => {
-    const collapsedSize = 40;
-    const size = 32;
-    const collapseStyles: CSSObject = isCollapsed
-      ? {
-          minWidth: collapsedSize,
-          width: collapsedSize,
-          minHeight: collapsedSize,
-          height: collapsedSize,
-        }
-      : {
-          minWidth: size,
-          width: size,
-          minHeight: size,
-          height: size,
-        };
-
-    return {
-      position: `absolute`,
-      margin: isCollapsed ? `auto ${space.xxs}` : `auto ${space.xxxs}`,
-      top: 0,
-      bottom: 0,
-      left: 0,
-      padding: 0,
-      zIndex: 3,
-      display: isHidden ? 'none' : 'flex',
-      ...collapseStyles,
-    };
-  }
-);
+const SearchIcon = styled(TertiaryButton)<
+  Pick<SearchFormProps, 'isCollapsed'> & {isHidden: boolean}
+>(({isCollapsed, isHidden}) => {
+  return {
+    position: `absolute`,
+    margin: isCollapsed ? `auto ${space.xxs}` : `auto ${space.xxxs}`,
+    top: 0,
+    bottom: 0,
+    left: 0,
+    padding: 0,
+    zIndex: 3,
+    display: isHidden ? 'none' : 'flex',
+  };
+});
 
-const CloseButton = styled(IconButton)<
+const CloseButton = styled(TertiaryButton)<
   Pick<SearchFormProps, 'isCollapsed'> & Pick<SearchFormState, 'showForm'>
 >(({isCollapsed, showForm}) => {
   const collapseStyles: CSSObject =
@@ -320,18 +308,18 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
     return getInputColors(theme, this.state.isFocused);
   };
 
-  getIconButtonType = (): IconButtonProps['variant'] => {
+  getIconButtonType = (): TertiaryButtonProps['variant'] => {
     let background = this.getThemeColors().background || `#fff`;
     if (this.props.isCollapsed && this.state.showForm) {
       background = formCollapsedBackground;
     }
     const isDarkBackground = chroma(background as string).get('lab.l') < 70;
-    return isDarkBackground ? 'inverse' : 'plain';
+    return isDarkBackground ? 'inverse' : undefined;
   };
 
   handleSubmit = (event: React.FormEvent<HTMLFormElement>): void => {
     event.preventDefault();
-    if (this.state.searchQuery.trim()) {
+    if (this.props.allowEmptyStringSearch || this.state.searchQuery.trim()) {
       this.props.onSubmit(event);
     } else {
       this.focusInput();
@@ -407,6 +395,7 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
       initialValue,
       searchTheme,
       rightAlign,
+      allowEmptyStringSearch = false,
       ...elemProps
     } = this.props;
 
@@ -479,7 +468,6 @@ export class SearchForm extends React.Component<SearchFormProps, SearchFormState
             aria-label={closeButtonAriaLabel}
             icon={xIcon}
             isCollapsed={isCollapsed}
-            variant="plain"
             showForm={this.state.showForm}
             onClick={this.closeCollapsedSearch}
             type="button"

package/ts3.5/dist/commonjs/combobox/lib/Combobox.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
 import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { TextInputProps } from '@workday/canvas-kit-react/text-input';
 export interface ComboBoxMenuItemGroup {
     header: React.ReactElement<MenuItemProps>;
@@ -17,10 +17,9 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
      */
     initialValue?: string;
     /**
-     * The variant of the Combobox clear button.
-     * @default IconButton.Variant.Plain
+     * The variant of the Combobox clear button. The default is a TertiaryButton
      */
-    clearButtonVariant?: IconButtonProps['variant'];
+    clearButtonVariant?: TertiaryButtonProps['variant'];
     /**
      * If true, render the Combobox with a button to clear the text input.
      * @default false

package/ts3.5/dist/commonjs/common/index.d.ts

@@ -1,12 +1,4 @@
-export * from './lib/Box';
 export * from './lib/theming';
-export { BorderStyleProps } from './lib/utils/border';
-export { ColorStyleProps } from './lib/utils/color';
-export { DepthStyleProps } from './lib/utils/depth';
-export { FlexItemStyleProps } from './lib/utils/flexItem';
-export { LayoutStyleProps } from './lib/utils/layout';
-export { PositionStyleProps } from './lib/utils/position';
-export { SpaceStyleProps } from './lib/utils/space';
 export { ComponentStatesTable } from './lib/storybook-utils/ComponentStatesTable';
 export { permutateProps } from './lib/storybook-utils/permutateProps';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/index.d.ts

@@ -1,6 +1,5 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './layout';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/commonjs/search-form/lib/SearchForm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
 import { SearchTheme, SearchThemeAttributes } from './themes';
 export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
@@ -74,6 +74,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
      * @default 40
      */
     height?: number;
+    /**
+     * If true, allow onSubmit being called when input value is empty.
+     * @default false
+     */
+    allowEmptyStringSearch?: boolean;
 }
 export interface SearchFormState {
     showForm: boolean;
@@ -88,7 +93,7 @@ export declare class SearchForm extends React.Component<SearchFormProps, SearchF
     state: Readonly<SearchFormState>;
     private getTheme;
     private getThemeColors;
-    getIconButtonType: () => IconButtonProps['variant'];
+    getIconButtonType: () => TertiaryButtonProps['variant'];
     handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     openCollapsedSearch: () => void;
     closeCollapsedSearch: () => void;

package/ts3.5/dist/es6/combobox/lib/Combobox.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
 import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { TextInputProps } from '@workday/canvas-kit-react/text-input';
 export interface ComboBoxMenuItemGroup {
     header: React.ReactElement<MenuItemProps>;
@@ -17,10 +17,9 @@ export interface ComboboxProps extends GrowthBehavior, React.HTMLAttributes<HTML
      */
     initialValue?: string;
     /**
-     * The variant of the Combobox clear button.
-     * @default IconButton.Variant.Plain
+     * The variant of the Combobox clear button. The default is a TertiaryButton
      */
-    clearButtonVariant?: IconButtonProps['variant'];
+    clearButtonVariant?: TertiaryButtonProps['variant'];
     /**
      * If true, render the Combobox with a button to clear the text input.
      * @default false

package/ts3.5/dist/es6/common/index.d.ts

@@ -1,12 +1,4 @@
-export * from './lib/Box';
 export * from './lib/theming';
-export { BorderStyleProps } from './lib/utils/border';
-export { ColorStyleProps } from './lib/utils/color';
-export { DepthStyleProps } from './lib/utils/depth';
-export { FlexItemStyleProps } from './lib/utils/flexItem';
-export { LayoutStyleProps } from './lib/utils/layout';
-export { PositionStyleProps } from './lib/utils/position';
-export { SpaceStyleProps } from './lib/utils/space';
 export { ComponentStatesTable } from './lib/storybook-utils/ComponentStatesTable';
 export { permutateProps } from './lib/storybook-utils/permutateProps';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/index.d.ts

@@ -1,6 +1,5 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './layout';
 export * from './search-form';
 //# sourceMappingURL=index.d.ts.map

package/ts3.5/dist/es6/search-form/lib/SearchForm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GrowthBehavior } from '@workday/canvas-kit-react/common';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { TertiaryButtonProps } from '@workday/canvas-kit-react/button';
 import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
 import { SearchTheme, SearchThemeAttributes } from './themes';
 export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
@@ -74,6 +74,11 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
      * @default 40
      */
     height?: number;
+    /**
+     * If true, allow onSubmit being called when input value is empty.
+     * @default false
+     */
+    allowEmptyStringSearch?: boolean;
 }
 export interface SearchFormState {
     showForm: boolean;
@@ -88,7 +93,7 @@ export declare class SearchForm extends React.Component<SearchFormProps, SearchF
     state: Readonly<SearchFormState>;
     private getTheme;
     private getThemeColors;
-    getIconButtonType: () => IconButtonProps['variant'];
+    getIconButtonType: () => TertiaryButtonProps['variant'];
     handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
     openCollapsedSearch: () => void;
     closeCollapsedSearch: () => void;

package/common/lib/Box.tsx

@@ -1,92 +0,0 @@
-import * as React from 'react';
-import styled from '@emotion/styled';
-import isPropValid from '@emotion/is-prop-valid';
-import {createComponent, StyledType, useConstant} from '@workday/canvas-kit-react/common';
-
-// style props
-import {border, BorderStyleProps} from './utils/border';
-import {color, ColorStyleProps} from './utils/color';
-import {depth, DepthStyleProps} from './utils/depth';
-import {flexItem, FlexItemStyleProps} from './utils/flexItem';
-import {layout, LayoutStyleProps} from './utils/layout';
-import {other, OtherStyleProps} from './utils/other';
-import {position, PositionStyleProps} from './utils/position';
-import {space, SpaceStyleProps} from './utils/space';
-
-export type BoxProps = BorderStyleProps &
-  ColorStyleProps &
-  DepthStyleProps &
-  FlexItemStyleProps &
-  LayoutStyleProps &
-  OtherStyleProps &
-  PositionStyleProps &
-  SpaceStyleProps & {
-    children?: React.ReactNode;
-  };
-
-const omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
-
-const shouldForwardProp = (prop: string) => {
-  return isPropValid(prop) && !omittedProps.includes(prop);
-};
-
-// Meant to be used with elements. The `shouldForwardProps` will remove all style props
-const StyledBoxElement = styled('div', {shouldForwardProp})<StyledType & BoxProps>(
-  {
-    boxSizing: 'border-box',
-  },
-  border,
-  color,
-  depth,
-  flexItem,
-  layout,
-  position,
-  space
-);
-
-// Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
-const StyledBoxComponent = styled('div')<StyledType & BoxProps>(
-  {
-    boxSizing: 'border-box',
-  },
-  border,
-  color,
-  depth,
-  flexItem,
-  layout,
-  other,
-  position,
-  space
-);
-
-/**
- * `Box` is a primitive component that provides a common, ergonomic API around Canvas design tokens.
- * It is highly flexible, and its primary purpose is to build other components.
- *
- * @example
- * import { Box, BoxProps } from '@workday/canvas-kit-labs-react/common';
- *
- * interface CardProps extends BoxProps {
- *   // card-specific props
- * }
- *
- * // `Card`'s default values are set using `BoxProps`
- * const Card = (props: CardProps) => (
- *   <Box depth={2} padding="m" borderRadius="l" {...props}>Hello, Card!</Box>
- * );
- *
- */
-export const Box = createComponent('div')({
-  displayName: 'Box',
-  Component: ({children, ...elemProps}: BoxProps, ref, Element) => {
-    const BoxComponent = useConstant(() =>
-      typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent
-    );
-
-    return (
-      <BoxComponent as={Element} ref={ref} {...elemProps}>
-        {children}
-      </BoxComponent>
-    );
-  },
-});