@workday/canvas-kit-react 8.0.0-alpha.208-next.1 → 8.0.0-alpha.216-next.4

package/layout/lib/utils/text.ts

@@ -1,57 +1,122 @@
 import {Property} from 'csstype';
 
-/** style props to for text properties */
+import {buildStyleFns, buildStylePropFn, StyleFnConfig} from './buildStyleFns';
+import {SystemPropValues} from './systemProps';
+
+/** style props to for CSS font and text properties */
 export type TextStyleProps = {
-  /** sets `line-height` property */
+  /**
+   * - sets [CSS font-family property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family)
+   * - system tokens: `font` */
+  fontFamily?: Property.FontFamily | SystemPropValues['font'];
+  /**
+   * - sets [CSS font-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size)
+   * - system tokens: `fontSize` */
+  fontSize?: Property.FontSize | SystemPropValues['fontSize'];
+  /** sets [CSS font-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) */
+  fontStyle?: Property.FontStyle;
+  /**
+   * - sets [CSS font-weight property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)
+   * - system tokens: `fontWeight` */
+  fontWeight?: Property.FontWeight | SystemPropValues['fontWeight'];
+  /** sets [CSS line-height property](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height) */
   lineHeight?: Property.LineHeight;
-  /** sets `letter-spacing` property */
+  /** sets [CSS letter-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing) */
   letterSpacing?: Property.LetterSpacing;
-  /** sets `text-align` property */
+  /** sets [CSS text-align property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align) */
   textAlign?: Property.TextAlign;
-  /** sets `text-decoration` property */
+  /** sets [CSS text-decoration property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration) */
   textDecoration?: Property.TextDecoration;
-  /** sets `text-overflow` property */
+  /** sets [CSS text-overflow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow) */
   textOverflow?: Property.TextOverflow;
-  /** sets `text-transform` property */
+  /** sets [CSS text-transform property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform) */
   textTransform?: Property.TextTransform;
-  /** sets `text-shadow` property */
+  /** sets [CSS text-shadow property](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow) */
   textShadow?: Property.TextShadow;
-  /** sets `white-space` property */
+  /** sets [CSS white-space property](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space) */
   whiteSpace?: Property.WhiteSpace;
-  /** sets `word-break` property */
+  /** sets [CSS word-break property](https://developer.mozilla.org/en-US/docs/Web/CSS/word-break) */
   wordBreak?: Property.WordBreak;
 };
 
-const textProps = [
-  'lineHeight',
-  'letterSpacing',
-  'textAlign',
-  'textDecoration',
-  'textOverflow',
-  'textTransform',
-  'textShadow',
-  'whiteSpace',
-  'wordBreak',
+export const textStyleFnConfigs: StyleFnConfig[] = [
+  {
+    name: 'fontFamily',
+    properties: ['fontFamily'],
+    system: 'font',
+  },
+  {
+    name: 'fontSize',
+    properties: ['fontSize'],
+    system: 'fontSize',
+  },
+  {
+    name: 'fontStyle',
+    properties: ['fontStyle'],
+    system: 'none',
+  },
+  {
+    name: 'fontWeight',
+    properties: ['fontWeight'],
+    system: 'fontWeight',
+  },
+  {
+    name: 'lineHeight',
+    properties: ['lineHeight'],
+    system: 'none',
+  },
+  {
+    name: 'letterSpacing',
+    properties: ['letterSpacing'],
+    system: 'none',
+  },
+  {
+    name: 'textAlign',
+    properties: ['textAlign'],
+    system: 'none',
+  },
+  {
+    name: 'textDecoration',
+    properties: ['textDecoration'],
+    system: 'none',
+  },
+  {
+    name: 'textOverflow',
+    properties: ['textOverflow'],
+    system: 'none',
+  },
+  {
+    name: 'textTransform',
+    properties: ['textTransform'],
+    system: 'none',
+  },
+  {
+    name: 'textShadow',
+    properties: ['textShadow'],
+    system: 'none',
+  },
+  {
+    name: 'whiteSpace',
+    properties: ['whiteSpace'],
+    system: 'none',
+  },
+  {
+    name: 'wordBreak',
+    properties: ['wordBreak'],
+    system: 'none',
+  },
 ];
 
+export const textStyleFns = buildStyleFns(textStyleFnConfigs);
 /**
- * A style prop function that takes components props and returns text styles.
+ * A style prop function that takes component props and returns font and text styles.
  * If no `TextStyleProps` are found, it returns an empty object.
  *
  * @example
- * // You'll most likely use `text-align` with low-level, styled components
+ * ```
  * const BoxExample = () => (
- *   <Box textAlign="center">Hello, alignment!</Box>
+ *   <Box textAlign="center" fontWeight="medium">Hello, alignment!</Box>
  * );
- *
+ * ```
  */
-export function text<P extends TextStyleProps>(props: P) {
-  let styles = {};
-  for (const key in props) {
-    if (textProps.includes(key)) {
-      const value = props[key as keyof TextStyleProps] as string;
-      styles = {...styles, [key]: value};
-    }
-  }
-  return styles;
-}
+export const text = buildStylePropFn<TextStyleProps>(textStyleFns);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "8.0.0-alpha.208-next.1+7ab4aa5f",
+  "version": "8.0.0-alpha.216-next.4+df0f1156",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.208-next.1+7ab4aa5f",
+    "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.216-next.4+df0f1156",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -67,5 +67,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "7ab4aa5fb8c81b2929cab767cd3dfd0dd7d2372f"
+  "gitHead": "df0f115637454a88469b36a9686c0c666995290f"
 }

package/popup/lib/hooks/useReturnFocus.tsx

@@ -1,9 +1,35 @@
 import React from 'react';
 
-import {changeFocus, createElemPropsHook} from '@workday/canvas-kit-react/common';
+import {changeFocus, createElemPropsHook, isFocusable} from '@workday/canvas-kit-react/common';
 
 import {usePopupModel} from './usePopupModel';
 
+function getScrollParent(element: HTMLElement): HTMLElement {
+  if (element === document.body || !element.parentElement) {
+    return element;
+  }
+  const styles = getComputedStyle(element);
+
+  if (styles.overflowY === 'scroll' || styles.overflowY === 'auto') {
+    return element;
+  }
+
+  return getScrollParent(element.parentElement);
+}
+
+/**
+ * Get a focusable element in an element's tree
+ */
+function getFocusableElement(element: Element | null): Element | null {
+  if (element === null || element === document.body || !element.parentElement) {
+    return null;
+  } else if (isFocusable(element)) {
+    return element;
+  }
+
+  return getFocusableElement(element.parentElement);
+}
+
 /**
  * Returns focus to the target element when the popup is hidden. This works well with
  * `useInitialFocus`. This should be used with `useFocusRedirect` or `useFocusTrap` for a complete
@@ -13,6 +39,7 @@ import {usePopupModel} from './usePopupModel';
  */
 export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
   const visible = model.state.visibility !== 'hidden';
+  const elementRef = React.useRef<Element | null>(null);
 
   // This boolean tracks keyboard-driven focus changes. This is required for `useFocusRedirect` as
   // focus redirection needs synchronous focus management and everything else needs asynchronous
@@ -30,19 +57,62 @@ export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
     requiresFocusChangeRef.current = false;
   }, []);
 
+  // track mousedown events to determine if the mouse target is a focusable element. If it is, we
+  // should not return focus
+  const onMouseDown = React.useCallback((event: MouseEvent) => {
+    elementRef.current = event.target as Element;
+  }, []);
+
+  const onMouseUp = React.useCallback(() => {
+    elementRef.current = null;
+  }, []);
+
+  // We use `useLayoutEffect` because the callback will be called _before_ the browser changes
+  // focus. This allows the browser to change focus as normal. For example, if the popup closes
+  // because the user hits the tab key when focused on the last focusable element,
+  // `useFocusRedirect` will cause the popup to close before the browser is finished processing the
+  // `keydown`. The browser's default action of a keydown of a tab key is to advance focus to the
+  // next focusable element. This means that the `useFocusRedirect` will change focus back to the
+  // target, then the tab key is processed by the browser to focus on the next item after the target
+  // without us having to use a focus manager to guess what the next focusable element is.
+  //
+  // But because we're using `useLayoutEffect` instead of `useEffect`, we cannot use
+  // `document.activeElement` (because the focus hasn't changed yet because the browser hasn't
+  // triggered a default action yet) to determine if a user clicked on something that can accept
+  // focus itself. If we don't short-circuit return focus, the user will intend to click on an
+  // `input` element only to get focus changed back. This is annoying to users and unintuitive. Instead,
+  // we'll use `mousedown` and `mouseup` to determine if we're closing because of a mouse click.
   React.useLayoutEffect(() => {
     if (!visible) {
       return;
     }
     // capture the element here. The refs will be null by the time the cleanup function is called
     const element = (model.state.returnFocusRef || model.state.targetRef).current as HTMLElement;
-
+    document.addEventListener('mousedown', onMouseDown, true);
+    document.addEventListener('mouseup', onMouseUp, true);
     document.addEventListener('keydown', onKeyDown, true);
     document.addEventListener('keyup', onKeyUp, true);
 
     return () => {
+      document.removeEventListener('mousedown', onMouseDown, true);
+      document.removeEventListener('mouseup', onMouseUp, true);
       document.removeEventListener('keydown', onKeyDown, true);
       document.removeEventListener('keyup', onKeyUp, true);
+      const scrollParent = getScrollParent(element);
+      const scrollParentRect = scrollParent.getBoundingClientRect();
+      const elementRect = element.getBoundingClientRect();
+
+      // Don't change focus if user focused on a different element like a `input` or the target
+      // element isn't on at least halfway rendered on the screen.
+      if (
+        (elementRef.current && getFocusableElement(elementRef.current)) ||
+        elementRect.top + elementRect.height / 2 < scrollParentRect.top ||
+        elementRect.bottom - elementRect.height / 2 > scrollParentRect.bottom ||
+        elementRect.left + elementRect.width / 2 < scrollParentRect.left ||
+        elementRect.right - elementRect.width / 2 > scrollParentRect.right
+      ) {
+        return;
+      }
 
       if (requiresFocusChangeRef.current) {
         // We need to change focus _before_ the browser process the default action of picking a new
@@ -56,8 +126,17 @@ export const useReturnFocus = createElemPropsHook(usePopupModel)(model => {
           changeFocus(element);
         });
       }
+      elementRef.current = null;
     };
-  }, [model.state.returnFocusRef, model.state.targetRef, visible, onKeyDown, onKeyUp]);
+  }, [
+    model.state.returnFocusRef,
+    model.state.targetRef,
+    visible,
+    onMouseDown,
+    onMouseUp,
+    onKeyDown,
+    onKeyUp,
+  ]);
 
   return {};
 });

package/tokens/lib/colors.types.ts

@@ -27,11 +27,8 @@ export enum BrandingColor {
   BlackPepper = 'blackPepper',
 }
 
-// See https://stackoverflow.com/questions/51465182/typescript-remove-index-signature-using-mapped-types/51956054
-type KnownKeys<T> = {
-  [K in keyof T]: string extends K ? never : number extends K ? never : K;
-} extends {[_ in keyof T]: infer U}
-  ? U
-  : never;
+type RemoveIndex<T> = {
+  [ K in keyof T as string extends K ? never : number extends K ? never : K ] : T[K]
+};
 
-export type CanvasColor = KnownKeys<typeof colors>;
+export type CanvasColor = keyof RemoveIndex<typeof colors>;

package/dist/commonjs/layout/lib/utils/border.d.ts

@@ -1,103 +0,0 @@
-import { CanvasBorderRadiusKeys, CanvasColor } from '@workday/canvas-kit-react/tokens';
-import { PartialEmotionCanvasTheme } from '@workday/canvas-kit-react/common';
-import { Property } from 'csstype';
-/** style props to set the border properties */
-export declare 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 declare 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 declare 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 declare type BorderLineStyleProps = {
-    /** sets `border-style` property */
-    borderStyle?: Property.Border;
-    /** sets `border-top-style` property */
-    borderTopStyle?: Property.Border;
-    /** sets `border-right-style` property (no bidirectional support) */
-    borderRightStyle?: Property.Border;
-    /** sets `border-bottom-style` property */
-    borderBottomStyle?: Property.Border;
-    /** sets `border-left-style` property (no bidirectional support) */
-    borderLeftStyle?: Property.Border;
-};
-/** style props to set the border width properties */
-export declare 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 declare 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?: Property.Border;
-    /** 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?: Property.Border;
-    /** sets `border-right-width` property (bidirectional support) */
-    borderInlineEndWidth?: string | number;
-};
-/** a collection style props for border properties */
-export declare type BorderStyleProps = BorderShorthandStyleProps & BorderColorStyleProps & BorderRadiusStyleProps & BorderLineStyleProps & BorderWidthStyleProps & BorderLogicalStyleProps;
-/**
- * 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 declare function border<P extends BorderStyleProps & {
-    theme?: PartialEmotionCanvasTheme;
-}>(props: P): {};
-//# sourceMappingURL=border.d.ts.map

package/dist/commonjs/layout/lib/utils/border.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"border.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/border.ts"],"names":[],"mappings":"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"}

package/dist/commonjs/layout/lib/utils/border.js

@@ -1,153 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.border = void 0;
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-// border logical prop handlers
-var borderInlineStart = function (isRTL) { return (isRTL ? 'borderRight' : 'borderLeft'); };
-var borderInlineEnd = function (isRTL) { return (isRTL ? 'borderLeft' : 'borderRight'); };
-var borderInlineStartColor = function (isRTL) { return (isRTL ? 'borderRightColor' : 'borderLeftColor'); };
-var borderInlineEndColor = function (isRTL) { return (isRTL ? 'borderLeftColor' : 'borderRightColor'); };
-var borderInlineStartStyle = function (isRTL) { return (isRTL ? 'borderRightStyle' : 'borderLeftStyle'); };
-var borderInlineEndStyle = function (isRTL) { return (isRTL ? 'borderLeftStyle' : 'borderRightStyle'); };
-var borderInlineStartWidth = function (isRTL) { return (isRTL ? 'borderRightWidth' : 'borderLeftWidth'); };
-var borderInlineEndWidth = function (isRTL) { return (isRTL ? 'borderLeftWidth' : 'borderRightWidth'); };
-var borderShorthandProps = {
-    border: 'border',
-    borderTop: 'borderTop',
-    borderRight: 'borderRight',
-    borderBottom: 'borderBottom',
-    borderLeft: 'borderLeft',
-    borderInlineStart: borderInlineStart,
-    borderInlineEnd: borderInlineEnd,
-};
-var borderColors = {
-    borderColor: 'borderColor',
-    borderTopColor: 'borderTopColor',
-    borderRightColor: 'borderRightColor',
-    borderBottomColor: 'borderBottomColor',
-    borderLeftColor: 'borderLeftColor',
-    borderInlineStartColor: borderInlineStartColor,
-    borderInlineEndColor: borderInlineEndColor,
-};
-var borderRadii = {
-    borderRadius: 'borderRadius',
-    borderTopLeftRadius: 'borderTopLeftRadius',
-    borderTopRightRadius: 'borderTopRightRadius',
-    borderBottomLeftRadius: 'borderBottomLeftRadius',
-    borderBottomRightRadius: 'borderBottomRightRadius',
-};
-var borderStyles = {
-    borderStyle: 'borderStyle',
-    borderTopStyle: 'borderTopStyle',
-    borderRightStyle: 'borderRightStyle',
-    borderBottomStyle: 'borderBottomStyle',
-    borderLeftStyle: 'borderLeftStyle',
-    borderInlineStartStyle: borderInlineStartStyle,
-    borderInlineEndStyle: borderInlineEndStyle,
-};
-var borderWidths = {
-    borderWidth: 'borderWidth',
-    borderTopWidth: 'borderTopWidth',
-    borderRightWidth: 'borderRightWidth',
-    borderBottomWidth: 'borderBottomWidth',
-    borderLeftWidth: 'borderLeftWidth',
-    borderInlineStartWidth: borderInlineStartWidth,
-    borderInlineEndWidth: 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>
- * );
- *
- */
-function border(props) {
-    // 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
-    var canvas = common_1.useTheme(props.theme).canvas;
-    var isRTL = canvas.direction === common_1.ContentDirection.RTL;
-    var styles = {};
-    for (var key in props) {
-        if (props.hasOwnProperty(key)) {
-            if (key in borderShorthandProps) {
-                var value = props[key];
-                var attr = void 0;
-                if (key === 'borderInlineStart') {
-                    attr = borderInlineStart(isRTL);
-                }
-                else if (key === 'borderInlineEnd') {
-                    attr = borderInlineEnd(isRTL);
-                }
-                else {
-                    attr = borderShorthandProps[key];
-                }
-                // @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) {
-                var propValue = props[key];
-                var value = tokens_1.colors[propValue] || propValue;
-                var attr = void 0;
-                if (key === 'borderInlineStartColor') {
-                    attr = borderInlineStartColor(isRTL);
-                }
-                else if (key === 'borderInlineEndColor') {
-                    attr = borderInlineEndColor(isRTL);
-                }
-                else {
-                    attr = borderColors[key];
-                }
-                // @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) {
-                var propValue = props[key];
-                var value = tokens_1.borderRadius[propValue] || propValue;
-                var attr = borderRadii[key];
-                // @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) {
-                var value = props[key];
-                var attr = void 0;
-                if (key === 'borderInlineStartStyle') {
-                    attr = borderInlineStartStyle(isRTL);
-                }
-                else if (key === 'borderInlineEndStyle') {
-                    attr = borderInlineEndStyle(isRTL);
-                }
-                else {
-                    attr = borderStyles[key];
-                }
-                // @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) {
-                var value = props[key];
-                var attr = void 0;
-                if (key === 'borderInlineStartWidth') {
-                    attr = borderInlineStartWidth(isRTL);
-                }
-                else if (key === 'borderInlineEndWidth') {
-                    attr = borderInlineEndWidth(isRTL);
-                }
-                else {
-                    attr = borderWidths[key];
-                }
-                // @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;
-}
-exports.border = border;

package/dist/commonjs/layout/lib/utils/font.d.ts

@@ -1,29 +0,0 @@
-import { Property } from 'csstype';
-import { CanvasTypeProperties } from '@workday/canvas-kit-react/tokens';
-export declare type FontFamilyTokens = keyof CanvasTypeProperties['fontFamilies'];
-export declare type FontSizeTokens = keyof CanvasTypeProperties['fontSizes'];
-export declare type FontWeightTokens = keyof CanvasTypeProperties['fontWeights'];
-/** style props to for color properties */
-export declare type FontStyleProps = {
-    /** sets `font-family` property */
-    fontFamily?: Property.FontFamily | FontFamilyTokens;
-    /** sets `font-size` property */
-    fontSize?: Property.FontSize | FontSizeTokens;
-    /** sets `font-style` property */
-    fontStyle?: Property.FontStyle;
-    /** sets `font-weight` property */
-    fontWeight?: Property.FontWeight | FontWeightTokens;
-};
-/**
- * A style prop function that takes components props and returns font styles from canvas token values.
- * If no `FontStyleProps` are found, it returns an empty object.
- *
- * @example
- * // You'll most likely use `font` with low-level, styled components
- * const BoxExample = () => (
- *   <Box fontFamily="monospace" fontWeight="medium">Hello, fonts!</Box>
- * );
- *
- */
-export declare function font<P extends FontStyleProps>(props: P): {};
-//# sourceMappingURL=font.d.ts.map

package/dist/commonjs/layout/lib/utils/font.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"font.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/font.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AACjC,OAAO,EAAO,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AAE5E,oBAAY,gBAAgB,GAAG,MAAM,oBAAoB,CAAC,cAAc,CAAC,CAAC;AAC1E,oBAAY,cAAc,GAAG,MAAM,oBAAoB,CAAC,WAAW,CAAC,CAAC;AACrE,oBAAY,gBAAgB,GAAG,MAAM,oBAAoB,CAAC,aAAa,CAAC,CAAC;AAGzE,0CAA0C;AAC1C,oBAAY,cAAc,GAAG;IAC3B,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,GAAG,gBAAgB,CAAC;IACpD,gCAAgC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,GAAG,cAAc,CAAC;IAC9C,iCAAiC;IACjC,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,GAAG,gBAAgB,CAAC;CACrD,CAAC;AAyBF;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,CAAC,MAYtD"}