@workday/canvas-kit-labs-react 7.0.0-alpha.0-next.5 → 7.0.0-alpha.100-next.25

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,6 +1,4 @@
 export * from './combobox';
 export * from './common';
 export * from './drawer';
-export * from './header';
-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.5+b69254c7",
+  "version": "7.0.0-alpha.100-next.25+911bfad3",
   "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",
@@ -17,25 +17,16 @@
     "*/lib/*",
     "*/index.ts",
     "dist/",
-    "index.ts",
-    "ts3.5/**/*"
+    "index.ts"
   ],
-  "typesVersions": {
-    "<=3.5": {
-      "*": [
-        "ts3.5/*"
-      ]
-    }
-  },
   "scripts": {
     "watch": "yarn build:es6 -w",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "clean": "rimraf dist && rimraf ts3.5 && rimraf .build-info && mkdirp dist && mkdirp ts3.5/dist",
+    "clean": "rimraf dist && rimraf .build-info && mkdirp dist",
     "build:cjs": "tsc -p tsconfig.cjs.json",
     "build:es6": "tsc -p tsconfig.es6.json",
     "build:rebuild": "npm-run-all clean build",
-    "build:downlevel-dts": "yarn run downlevel-dts dist ts3.5/dist",
-    "build": "npm-run-all --parallel build:cjs build:es6 --sequential build:downlevel-dts",
+    "build": "npm-run-all --parallel build:cjs build:es6",
     "prepack": "node ../../utils/publish.js pre labs-react",
     "postpack": "node ../../utils/publish.js post labs-react",
     "depcheck": "node ../../utils/check-dependencies-exist.js",
@@ -52,19 +43,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.5+b69254c7",
-    "@workday/canvas-kit-react": "^7.0.0-alpha.0-next.5+b69254c7",
-    "@workday/canvas-system-icons-web": "1.0.41",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.100-next.25+911bfad3",
+    "@workday/canvas-kit-react": "^7.0.0-alpha.100-next.25+911bfad3",
+    "@workday/canvas-system-icons-web": "^3.0.0",
     "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": "b69254c752dc3fcc508e3b93164f8f7a83b005bb"
+  "gitHead": "911bfad34147c054ac08fd77845d0a0339fd3f95"
 }

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/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>
-    );
-  },
-});

package/common/lib/utils/border.ts

@@ -1,263 +0,0 @@
-import {
-  borderRadius as borderRadiusTokens,
-  CanvasBorderRadiusKeys,
-  colors as colorTokens,
-  CanvasColor,
-} from '@workday/canvas-kit-react/tokens';
-import {
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
-
-import {PropertyBorder} from './types';
-
-/** style props to set the border properties */
-export type BorderShorthandStyleProps = {
-  /** sets `border` property */
-  border?: string;
-  /** sets `border-top` property */
-  borderTop?: string;
-  /** sets `border-right` property (no bidirectional support) */
-  borderRight?: string;
-  /** sets `border-bottom` property */
-  borderBottom?: string;
-  /** sets `border-left` property (no bidirectional support) */
-  borderLeft?: string;
-};
-
-/** style props to set the border color properties */
-export type BorderColorStyleProps = {
-  /** sets `border-color` property */
-  borderColor?: CanvasColor | (string & {});
-  /** sets `border-top-color` property */
-  borderTopColor?: CanvasColor | (string & {});
-  /** sets `border-right-color` property (no bidirectional support) */
-  borderRightColor?: CanvasColor | (string & {});
-  /** sets `border-bottom-color` property */
-  borderBottomColor?: CanvasColor | (string & {});
-  /** sets `border-left-color` property (no bidirectional support) */
-  borderLeftColor?: CanvasColor | (string & {});
-};
-
-/** style props to set the border radius properties */
-export type BorderRadiusStyleProps = {
-  /** sets `border-radius` property */
-  borderRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-top-left-radius` property */
-  borderTopLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-top-right-radius` property */
-  borderTopRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-bottom-left-radius` property */
-  borderBottomLeftRadius?: CanvasBorderRadiusKeys | number | (string & {});
-  /** sets `border-bottom-right-radius` property */
-  borderBottomRightRadius?: CanvasBorderRadiusKeys | number | (string & {});
-};
-
-/** style props to set the border style properties */
-export type BorderLineStyleProps = {
-  /** sets `border-style` property */
-  borderStyle?: PropertyBorder;
-  /** sets `border-top-style` property */
-  borderTopStyle?: PropertyBorder;
-  /** sets `border-right-style` property (no bidirectional support) */
-  borderRightStyle?: PropertyBorder;
-  /** sets `border-bottom-style` property */
-  borderBottomStyle?: PropertyBorder;
-  /** sets `border-left-style` property (no bidirectional support) */
-  borderLeftStyle?: PropertyBorder;
-};
-
-/** style props to set the border width properties */
-export type BorderWidthStyleProps = {
-  /** sets `border-width` property */
-  borderWidth?: string | number;
-  /** sets `border-top-width` property */
-  borderTopWidth?: string | number;
-  /** sets `border-right-width` property (no bidirectional support) */
-  borderRightWidth?: string | number;
-  /** sets `border-bottom-width` property */
-  borderBottomWidth?: string | number;
-  /** sets `border-left-width` property (no bidirectional support) */
-  borderLeftWidth?: string | number;
-};
-
-export type BorderLogicalStyleProps = {
-  /** sets `border-left` property (bidirectional support) */
-  borderInlineStart?: string;
-  /** sets `border-left-color` property (bidirectional support) */
-  borderInlineStartColor?: CanvasColor | (string & {});
-  /** sets `border-left-style` property (bidirectional support) */
-  borderInlineStartStyle?: PropertyBorder;
-  /** sets `border-left-width` property (bidirectional support) */
-  borderInlineStartWidth?: string | number;
-  /** sets `border-right` property (bidirectional support) */
-  borderInlineEnd?: string;
-  /** sets `border-right-color` property (bidirectional support) */
-  borderInlineEndColor?: CanvasColor | (string & {});
-  /** sets `border-right-style` property (bidirectional support) */
-  borderInlineEndStyle?: PropertyBorder;
-  /** sets `border-right-width` property (bidirectional support) */
-  borderInlineEndWidth?: string | number;
-};
-
-/** a collection style props for border properties */
-export type BorderStyleProps = BorderShorthandStyleProps &
-  BorderColorStyleProps &
-  BorderRadiusStyleProps &
-  BorderLineStyleProps &
-  BorderWidthStyleProps &
-  BorderLogicalStyleProps;
-
-// border logical prop handlers
-const borderInlineStart = (isRTL: boolean) => (isRTL ? 'borderRight' : 'borderLeft');
-const borderInlineEnd = (isRTL: boolean) => (isRTL ? 'borderLeft' : 'borderRight');
-const borderInlineStartColor = (isRTL: boolean) => (isRTL ? 'borderRightColor' : 'borderLeftColor');
-const borderInlineEndColor = (isRTL: boolean) => (isRTL ? 'borderLeftColor' : 'borderRightColor');
-const borderInlineStartStyle = (isRTL: boolean) => (isRTL ? 'borderRightStyle' : 'borderLeftStyle');
-const borderInlineEndStyle = (isRTL: boolean) => (isRTL ? 'borderLeftStyle' : 'borderRightStyle');
-const borderInlineStartWidth = (isRTL: boolean) => (isRTL ? 'borderRightWidth' : 'borderLeftWidth');
-const borderInlineEndWidth = (isRTL: boolean) => (isRTL ? 'borderLeftWidth' : 'borderRightWidth');
-
-const borderShorthandProps = {
-  border: 'border',
-  borderTop: 'borderTop',
-  borderRight: 'borderRight',
-  borderBottom: 'borderBottom',
-  borderLeft: 'borderLeft',
-  borderInlineStart,
-  borderInlineEnd,
-};
-
-const borderColors = {
-  borderColor: 'borderColor',
-  borderTopColor: 'borderTopColor',
-  borderRightColor: 'borderRightColor',
-  borderBottomColor: 'borderBottomColor',
-  borderLeftColor: 'borderLeftColor',
-  borderInlineStartColor,
-  borderInlineEndColor,
-};
-
-const borderRadii = {
-  borderRadius: 'borderRadius',
-  borderTopLeftRadius: 'borderTopLeftRadius',
-  borderTopRightRadius: 'borderTopRightRadius',
-  borderBottomLeftRadius: 'borderBottomLeftRadius',
-  borderBottomRightRadius: 'borderBottomRightRadius',
-};
-
-const borderStyles = {
-  borderStyle: 'borderStyle',
-  borderTopStyle: 'borderTopStyle',
-  borderRightStyle: 'borderRightStyle',
-  borderBottomStyle: 'borderBottomStyle',
-  borderLeftStyle: 'borderLeftStyle',
-  borderInlineStartStyle,
-  borderInlineEndStyle,
-};
-
-const borderWidths = {
-  borderWidth: 'borderWidth',
-  borderTopWidth: 'borderTopWidth',
-  borderRightWidth: 'borderRightWidth',
-  borderBottomWidth: 'borderBottomWidth',
-  borderLeftWidth: 'borderLeftWidth',
-  borderInlineStartWidth,
-  borderInlineEndWidth,
-};
-
-/**
- * A style prop function that takes components props and returns border styles. Some props, such as borderRadius and borderColor, are connected to our design tokens.
- * If no `BorderStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `border` with low-level, styled components
- * const BoxExample = () => (
- *   <Box border={`solid 1px #333333 ${colors.blackPepper400}`}>Hello, border styles!</Box>
- * );
- *
- */
-export function border<P extends BorderStyleProps & {theme?: PartialEmotionCanvasTheme}>(props: P) {
-  // border will always be used within the context of a component, but eslint doesn't know that
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const {canvas} = useTheme(props.theme);
-  const isRTL = canvas.direction === ContentDirection.RTL;
-  const styles = {};
-  for (const key in props) {
-    if (props.hasOwnProperty(key)) {
-      if (key in borderShorthandProps) {
-        const value = props[key as keyof BorderShorthandStyleProps];
-        let attr: string;
-        if (key === 'borderInlineStart') {
-          attr = borderInlineStart(isRTL);
-        } else if (key === 'borderInlineEnd') {
-          attr = borderInlineEnd(isRTL);
-        } else {
-          attr = borderShorthandProps[key as keyof BorderShorthandStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderColors) {
-        const propValue = props[key as keyof BorderColorStyleProps] as CanvasColor | string;
-        const value = colorTokens[propValue as CanvasColor] || propValue;
-        let attr: string;
-        if (key === 'borderInlineStartColor') {
-          attr = borderInlineStartColor(isRTL);
-        } else if (key === 'borderInlineEndColor') {
-          attr = borderInlineEndColor(isRTL);
-        } else {
-          attr = borderColors[key as keyof BorderColorStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderRadii) {
-        const propValue = props[key as keyof BorderRadiusStyleProps] as
-          | CanvasBorderRadiusKeys
-          | number
-          | string;
-        const value = borderRadiusTokens[propValue as CanvasBorderRadiusKeys] || propValue;
-        const attr = borderRadii[key as keyof BorderRadiusStyleProps];
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderStyles) {
-        const value = props[key as keyof BorderLineStyleProps];
-        let attr: string;
-        if (key === 'borderInlineStartStyle') {
-          attr = borderInlineStartStyle(isRTL);
-        } else if (key === 'borderInlineEndStyle') {
-          attr = borderInlineEndStyle(isRTL);
-        } else {
-          attr = borderStyles[key as keyof BorderLineStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-        continue;
-      }
-
-      if (key in borderWidths) {
-        const value = props[key as keyof BorderWidthStyleProps];
-        let attr: string;
-        if (key === 'borderInlineStartWidth') {
-          attr = borderInlineStartWidth(isRTL);
-        } else if (key === 'borderInlineEndWidth') {
-          attr = borderInlineEndWidth(isRTL);
-        } else {
-          attr = borderWidths[key as keyof BorderWidthStyleProps];
-        }
-        // @ts-ignore TS doesn't like adding a potentially unknown key to an object, but because we own this object, it's fine.
-        styles[attr] = value;
-      }
-    }
-  }
-  return styles;
-}