@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

package/dist/es6/layout/lib/Box.js

@@ -1,46 +1,49 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import styled from '@emotion/styled';
 import isPropValid from '@emotion/is-prop-valid';
 import { createComponent, useConstant } from '@workday/canvas-kit-react/common';
 // style props
+import { background } from './utils/background';
 import { border } from './utils/border';
 import { color } from './utils/color';
 import { depth } from './utils/depth';
 import { flexItem } from './utils/flexItem';
+import { gridItem } from './utils/gridItem';
 import { layout } from './utils/layout';
 import { other } from './utils/other';
 import { position } from './utils/position';
 import { space } from './utils/space';
-var omittedProps = ['display', 'color', 'height', 'overflow', 'width', 'border', 'background'];
-var shouldForwardProp = function (prop) {
+import { text } from './utils/text';
+const omittedProps = [
+    'display',
+    'color',
+    'height',
+    'overflow',
+    'width',
+    'border',
+    'background',
+    'fontSize',
+    'fontWeight',
+    'fontFamily',
+    'letterSpacing',
+    'lineHeight',
+    'textAlign',
+    'opacity',
+    'textDecoration',
+    'textOverflow',
+    'textTransform',
+    'textShadow',
+    'whiteSpace',
+    'wordBreak',
+];
+const shouldForwardProp = (prop) => {
     return isPropValid(prop) && !omittedProps.includes(prop);
 };
 /**
  * A function that allows us to call Box styles on an element and reduce the amount of elements in the React Dom tree.
  * Instead of using the `as` in a styled function, you can just call this instead to pass those props to the styled element
  * @example
+ * ```
  * import { boxStyleFn } from '@workday/canvas-kit-react/layout';
  * const StyledHeader = styled('h1')(
  *  boxStyleFn,
@@ -49,27 +52,32 @@ var shouldForwardProp = function (prop) {
  *  }
  * )
  *
- * ....
+ * ...
  *
  * <StyledHeader color='red'>Hello World</StyledHeader>
+ * ```
  */
-export var boxStyleFn = function (props) {
+export const boxStyleFn = (props) => {
     return [
         {
             boxSizing: 'border-box',
         },
+        background,
         border,
         color,
         depth,
         flexItem,
+        gridItem,
         layout,
+        other,
         position,
         space,
-    ].reduce(function (result, style) {
+        text,
+    ].reduce((result, style) => {
         // @ts-ignore
-        var temp = typeof style === 'function' ? style(props) : style;
+        const temp = typeof style === 'function' ? style(props) : style;
         // eslint-disable-next-line guard-for-in
-        for (var key in temp) {
+        for (const key in temp) {
             // @ts-ignore
             result[key] = temp[key];
         }
@@ -77,13 +85,9 @@ export var boxStyleFn = function (props) {
     }, {});
 };
 // Meant to be used with elements. The `shouldForwardProps` will remove all style props
-var StyledBoxElement = styled('div', { shouldForwardProp: shouldForwardProp })({
-    boxSizing: 'border-box',
-}, border, color, depth, flexItem, layout, position, space);
+const StyledBoxElement = styled('div', { shouldForwardProp })(boxStyleFn);
 // Meant to be used with components. There is no `shouldForwardProps` - all props will be forwarded to the component
-var StyledBoxComponent = styled('div')({
-    boxSizing: 'border-box',
-}, border, color, depth, flexItem, layout, other, position, space);
+const StyledBoxComponent = styled('div')(boxStyleFn);
 /**
  * `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.
@@ -101,13 +105,10 @@ var StyledBoxComponent = styled('div')({
  * );
  *
  */
-export var Box = createComponent('div')({
+export const Box = createComponent('div')({
     displayName: 'Box',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        var BoxComponent = useConstant(function () {
-            return typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent;
-        });
-        return (React.createElement(BoxComponent, __assign({ as: Element, ref: ref }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        const BoxComponent = useConstant(() => typeof Element === 'string' ? StyledBoxElement : StyledBoxComponent);
+        return (React.createElement(BoxComponent, Object.assign({ as: Element, ref: ref }, elemProps), children));
     },
 });

package/dist/es6/layout/lib/Flex.d.ts

@@ -1,12 +1,13 @@
 import { BoxProps } from './Box';
 import { FlexStyleProps } from './utils/flex';
-export declare type FlexProps = BoxProps & FlexStyleProps;
+export declare type FlexProps = Omit<BoxProps, 'display'> & FlexStyleProps;
 /**
  * `Flex` is a low-level layout component that provides a common, ergonomic API for applying CSS flexbox styles.
  * It is highly flexible, and can be used on its own or to build other components.
  * `Flex` is built on top of `Box` and has access to all `BoxProps`.
  *
  * @example
+ * ```tsx
  * import { Flex, FlexProps } from '@workday/canvas-kit-react/layout';
  *
  * interface CardProps extends FlexProps {
@@ -20,7 +21,9 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
  *     <p>This card uses flexbox to set its layout.</p>
  *   </Flex>
  * );
- *
+ * ```
  */
-export declare const Flex: import("../../common").ElementComponent<"div", import("..").BorderShorthandStyleProps & import("..").BorderColorStyleProps & import("..").BorderRadiusStyleProps & import("..").BorderLineStyleProps & import("..").BorderWidthStyleProps & import("..").BorderLogicalStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").LayoutStyleProps & import("./utils/other").OtherStyleProps & import("..").PositionStandardProps & import("..").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & FlexStyleProps>;
+export declare const Flex: import("@workday/canvas-kit-react/common").ElementComponent<"div", Omit<BoxProps, "display"> & FlexStyleProps> & {
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("..").BackgroundStyleProps & import("./utils/border/color").BorderColorStyleProps & import("./utils/border/lineStyle").BorderLineStyleProps & import("./utils/border/radius").BorderRadiusStyleProps & import("./utils/border/shorthand").BorderShorthandStyleProps & import("./utils/border/width").BorderWidthStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").GridItemStyleProps & import("..").LayoutStyleProps & import("..").OtherStyleProps & import("..").PositionStyleProps & import("..").SpaceStyleProps & import("..").TextStyleProps>;
+};
 //# sourceMappingURL=Flex.d.ts.map

package/dist/es6/layout/lib/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,QAAQ,GAAG,cAAc,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,gnBASf,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Flex.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC;AASnE;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;;CAYf,CAAC"}

package/dist/es6/layout/lib/Flex.js

@@ -1,31 +1,9 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Box } from './Box';
 import { flex } from './utils/flex';
-var StyledFlex = styled(Box)({
+const StyledFlex = styled(Box)({
     display: 'flex',
 }, flex);
 /**
@@ -34,6 +12,7 @@ var StyledFlex = styled(Box)({
  * `Flex` is built on top of `Box` and has access to all `BoxProps`.
  *
  * @example
+ * ```tsx
  * import { Flex, FlexProps } from '@workday/canvas-kit-react/layout';
  *
  * interface CardProps extends FlexProps {
@@ -47,12 +26,14 @@ var StyledFlex = styled(Box)({
  *     <p>This card uses flexbox to set its layout.</p>
  *   </Flex>
  * );
- *
+ * ```
  */
-export var Flex = createComponent('div')({
+export const Flex = createComponent('div')({
     displayName: 'Flex',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(StyledFlex, __assign({ as: Element, ref: ref }, elemProps), children));
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(StyledFlex, Object.assign({ as: Element, ref: ref }, elemProps), children));
+    },
+    subComponents: {
+        Item: Box,
     },
 });

package/dist/es6/layout/lib/Grid.d.ts

@@ -0,0 +1,51 @@
+import { BoxProps } from './Box';
+import { GridStyleProps } from './utils/grid';
+export declare type GridProps = Omit<BoxProps, 'display'> & GridStyleProps;
+export declare type GridItemProps = BoxProps;
+/**
+ * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
+ * It is highly flexible, and can be used on its own or to build other components.
+ * `Grid` is built on top of `Box` and has access to all `BoxProps`.
+ *
+ * @example
+ * ```tsx
+ * import { Grid } from '@workday/canvas-kit-react/layout';
+ *
+ * interface CardProps extends GridProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `GridProps`
+ * const Card = (props: CardProps) => (
+ *   <Grid gridAutoFlow="row" alignItems="start" depth={1} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <p>This card uses grid to set its layout.</p>
+ *   </Grid>
+ * );
+ *```
+ */
+export declare const Grid: import("@workday/canvas-kit-react/common").ElementComponent<"div", Omit<BoxProps, "display"> & GridStyleProps> & {
+    /**
+     * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
+     *
+     * @example
+     * ```
+     * import { Grid } from '@workday/canvas-kit-react/layout';
+     * `Grid` is built on top of `Box` so `<Grid.Item />` gets all `BoxProps` as well.
+     *
+     * interface CardProps extends GridItemStyleProps {
+     *   // card-specific props
+     * }
+     *
+     * // `Card`'s default values are set using `GridItemStyleProps`
+     * const Card = (props: CardProps) => (
+     *   <Grid.Item gridRowStart="1" gridArea="Card" {...props}>
+     *     <h1>Hello, Card!</h1>
+     *     <p>This card uses grid child specific props to set its layout.</p>
+     *   </Grid.Item>
+     * );
+     *```
+     */
+    Item: import("@workday/canvas-kit-react/common").ElementComponent<"div", import("..").BackgroundStyleProps & import("./utils/border/color").BorderColorStyleProps & import("./utils/border/lineStyle").BorderLineStyleProps & import("./utils/border/radius").BorderRadiusStyleProps & import("./utils/border/shorthand").BorderShorthandStyleProps & import("./utils/border/width").BorderWidthStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").GridItemStyleProps & import("..").LayoutStyleProps & import("..").OtherStyleProps & import("..").PositionStyleProps & import("..").SpaceStyleProps & import("..").TextStyleProps>;
+};
+//# sourceMappingURL=Grid.d.ts.map

package/dist/es6/layout/lib/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Grid.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAM,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,GAAG,cAAc,CAAC;AACnE,oBAAY,aAAa,GAAG,QAAQ,CAAC;AAoBrC;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI;IAUb;;;;;;;;;;;;;;;;;;;;OAoBG;;CAIL,CAAC"}

package/dist/es6/layout/lib/Grid.js

@@ -0,0 +1,66 @@
+import * as React from 'react';
+import styled from '@emotion/styled';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Box } from './Box';
+import { grid } from './utils/grid';
+const StyledGrid = styled(Box)({
+    display: 'grid',
+}, grid);
+const GridItem = createComponent('div')({
+    displayName: 'Grid.Item',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(Box, Object.assign({ as: Element, ref: ref }, elemProps), children));
+    },
+});
+/**
+ * `Grid` is a two-dimensional layout system for the web. It lets you lay content out in rows and columns.
+ * It is highly flexible, and can be used on its own or to build other components.
+ * `Grid` is built on top of `Box` and has access to all `BoxProps`.
+ *
+ * @example
+ * ```tsx
+ * import { Grid } from '@workday/canvas-kit-react/layout';
+ *
+ * interface CardProps extends GridProps {
+ *   // card-specific props
+ * }
+ *
+ * // `Card`'s default values are set using `GridProps`
+ * const Card = (props: CardProps) => (
+ *   <Grid gridAutoFlow="row" alignItems="start" depth={1} space="m" {...props}>
+ *     <h1>Hello, Card!</h1>
+ *     <p>This card uses grid to set its layout.</p>
+ *   </Grid>
+ * );
+ *```
+ */
+export const Grid = createComponent('div')({
+    displayName: 'Grid',
+    Component: ({ children, ...elemProps }, ref, Element) => {
+        return (React.createElement(StyledGrid, Object.assign({ as: Element, ref: ref }, elemProps), children));
+    },
+    subComponents: {
+        /**
+         * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
+         *
+         * @example
+         * ```
+         * import { Grid } from '@workday/canvas-kit-react/layout';
+         * `Grid` is built on top of `Box` so `<Grid.Item />` gets all `BoxProps` as well.
+         *
+         * interface CardProps extends GridItemStyleProps {
+         *   // card-specific props
+         * }
+         *
+         * // `Card`'s default values are set using `GridItemStyleProps`
+         * const Card = (props: CardProps) => (
+         *   <Grid.Item gridRowStart="1" gridArea="Card" {...props}>
+         *     <h1>Hello, Card!</h1>
+         *     <p>This card uses grid child specific props to set its layout.</p>
+         *   </Grid.Item>
+         * );
+         *```
+         */
+        Item: GridItem,
+    },
+});

package/dist/es6/layout/lib/utils/background.d.ts

@@ -0,0 +1,44 @@
+import { Property } from 'csstype';
+import { StyleFnConfig } from './buildStyleFns';
+import { SystemPropValues } from './systemProps';
+/** style props to set CSS background properties */
+export declare type BackgroundStyleProps = {
+    /**
+     * - sets [CSS background property](https://developer.mozilla.org/en-US/docs/Web/CSS/background)
+     * - system tokens: `color`
+     * */
+    background?: SystemPropValues['color'];
+    /** sets [CSS background-attachment property](https://developer.mozilla.org/en-US/docs/Web/CSS/) */
+    backgroundAttachment?: Property.BackgroundAttachment;
+    /**
+     * - sets [CSS background-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)
+     * - system tokens: `color`
+     * */
+    backgroundColor?: SystemPropValues['color'];
+    /** sets [CSS background-image property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) */
+    backgroundImage?: Property.BackgroundImage;
+    /** sets [CSS background-position property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) */
+    backgroundPosition?: Property.BackgroundPosition;
+    /** sets [CSS background-repeat property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) */
+    backgroundRepeat?: Property.BackgroundRepeat;
+    /** sets [CSS background-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/background-size) */
+    backgroundSize?: Property.BackgroundSize;
+};
+export declare const backgroundStyleFnConfigs: StyleFnConfig[];
+export declare const backgroundFns: import("./buildStyleFns").StyleFns;
+/**
+ * A style prop function that takes component props and returns border styles.
+ * Some props, such as background and backgroundColor, are connected to our design tokens.
+ * If no `BackgroundStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * ```tsx
+ * const BackgroundExample = () => (
+ *   <Box backgroundColor="blueberry500">
+ *     Hello, background styles!
+ *   </Box>
+ * );
+ *```
+ */
+export declare const background: (props: BackgroundStyleProps) => {};
+//# sourceMappingURL=background.d.ts.map

package/dist/es6/layout/lib/utils/background.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"background.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/background.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAkC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC/E,OAAO,EAAC,gBAAgB,EAAC,MAAM,eAAe,CAAC;AAE/C,mDAAmD;AACnD,oBAAY,oBAAoB,GAAG;IACjC;;;SAGK;IACL,UAAU,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACvC,mGAAmG;IACnG,oBAAoB,CAAC,EAAE,QAAQ,CAAC,oBAAoB,CAAC;IACrD;;;SAGK;IACL,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C,8GAA8G;IAC9G,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,oHAAoH;IACpH,kBAAkB,CAAC,EAAE,QAAQ,CAAC,kBAAkB,CAAC;IACjD,gHAAgH;IAChH,gBAAgB,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC;IAC7C,4GAA4G;IAC5G,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;CAC1C,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,aAAa,EAoCnD,CAAC;AAEF,eAAO,MAAM,aAAa,oCAA0C,CAAC;AACrE;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,qCAAwD,CAAC"}

package/dist/es6/layout/lib/utils/background.js

@@ -0,0 +1,54 @@
+import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
+export const backgroundStyleFnConfigs = [
+    {
+        name: 'background',
+        properties: ['background'],
+        system: 'color',
+    },
+    {
+        name: 'backgroundAttachment',
+        properties: ['backgroundAttachment'],
+        system: 'none',
+    },
+    {
+        name: 'backgroundColor',
+        properties: ['backgroundColor'],
+        system: 'color',
+    },
+    {
+        name: 'backgroundImage',
+        properties: ['backgroundImage'],
+        system: 'none',
+    },
+    {
+        name: 'backgroundPosition',
+        properties: ['backgroundPosition'],
+        system: 'none',
+    },
+    {
+        name: 'backgroundRepeat',
+        properties: ['backgroundRepeat'],
+        system: 'none',
+    },
+    {
+        name: 'backgroundSize',
+        properties: ['backgroundSize'],
+        system: 'none',
+    },
+];
+export const backgroundFns = buildStyleFns(backgroundStyleFnConfigs);
+/**
+ * A style prop function that takes component props and returns border styles.
+ * Some props, such as background and backgroundColor, are connected to our design tokens.
+ * If no `BackgroundStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * ```tsx
+ * const BackgroundExample = () => (
+ *   <Box backgroundColor="blueberry500">
+ *     Hello, background styles!
+ *   </Box>
+ * );
+ *```
+ */
+export const background = buildStylePropFn(backgroundFns);

package/dist/es6/layout/lib/utils/border/color.d.ts

@@ -0,0 +1,47 @@
+import { StyleFnConfig } from '../buildStyleFns';
+import { SystemPropValues } from '../systemProps';
+/** style props to set CSS border color properties */
+export declare type BorderColorStyleProps = {
+    /**
+     * - sets [CSS border-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-color)
+     * - system tokens: `color`
+     */
+    borderColor?: SystemPropValues['color'];
+    /**
+     * - sets [CSS border-top-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-color)
+     * - system tokens: `color`
+     */
+    borderTopColor?: SystemPropValues['color'];
+    /**
+     * - sets [CSS border-right-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-color)
+     * - no bidirectional support
+     * - system tokens: `color`
+     */
+    borderRightColor?: SystemPropValues['color'];
+    /**
+     * - sets [CSS border-bottom-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-color)
+     * - system tokens: `color`
+     */
+    borderBottomColor?: SystemPropValues['color'];
+    /**
+     * - sets [CSS border-left-color property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-color)
+     * - no bidirectional support
+     * - system tokens: `color`
+     */
+    borderLeftColor?: SystemPropValues['color'];
+    /**
+     * - sets [CSS border-inline-start-color property ](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-color)
+     * - bidirectional support
+     * - system tokens: `color`
+     */
+    borderInlineStartColor?: SystemPropValues['color'];
+    /**
+     * - sets [CSS border-inline-end-color property ](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-color)
+     * - bidirectional support
+     * - system tokens: `color`
+     */
+    borderInlineEndColor?: SystemPropValues['color'];
+};
+export declare const borderColorStyleFnConfigs: StyleFnConfig[];
+export declare const borderColorFns: import("../buildStyleFns").StyleFns;
+//# sourceMappingURL=color.d.ts.map

package/dist/es6/layout/lib/utils/border/color.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../../layout/lib/utils/border/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAgB,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAC,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AAEhD,qDAAqD;AACrD,oBAAY,qBAAqB,GAAG;IAClC;;;OAGG;IACH,WAAW,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC;;;OAGG;IACH,cAAc,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC3C;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC7C;;;OAGG;IACH,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC9C;;;;OAIG;IACH,eAAe,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC5C;;;;OAIG;IACH,sBAAsB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACnD;;;;OAIG;IACH,oBAAoB,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,yBAAyB,EAAE,aAAa,EAoCpD,CAAC;AAEF,eAAO,MAAM,cAAc,qCAA2C,CAAC"}

package/dist/es6/layout/lib/utils/border/color.js

@@ -0,0 +1,39 @@
+import { buildStyleFns } from '../buildStyleFns';
+export const borderColorStyleFnConfigs = [
+    {
+        name: 'borderColor',
+        properties: ['borderColor'],
+        system: 'color',
+    },
+    {
+        name: 'borderTopColor',
+        properties: ['borderTopColor'],
+        system: 'color',
+    },
+    {
+        name: 'borderRightColor',
+        properties: ['borderRightColor'],
+        system: 'color',
+    },
+    {
+        name: 'borderBottomColor',
+        properties: ['borderBottomColor'],
+        system: 'color',
+    },
+    {
+        name: 'borderLeftColor',
+        properties: ['borderLeftColor'],
+        system: 'color',
+    },
+    {
+        name: 'borderInlineStartColor',
+        properties: ['borderInlineStartColor'],
+        system: 'color',
+    },
+    {
+        name: 'borderInlineEndColor',
+        properties: ['borderInlineEndColor'],
+        system: 'color',
+    },
+];
+export const borderColorFns = buildStyleFns(borderColorStyleFnConfigs);

package/dist/es6/layout/lib/utils/border/index.d.ts

@@ -0,0 +1,26 @@
+import { BorderColorStyleProps } from './color';
+import { BorderLineStyleProps } from './lineStyle';
+import { BorderRadiusStyleProps } from './radius';
+import { BorderShorthandStyleProps } from './shorthand';
+import { BorderWidthStyleProps } from './width';
+export declare type BorderStyleProps = BorderColorStyleProps & BorderLineStyleProps & BorderRadiusStyleProps & BorderShorthandStyleProps & BorderWidthStyleProps;
+/**
+ * A style prop function that takes component 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
+ * ```tsx
+ * const BorderExample = () => (
+ *   <Box
+ *    border="solid 1px"
+ *    borderColor="soap500"
+ *    borderRadius="l"
+ *   >
+ *     Hello, border styles!
+ *   </Box>
+ * );
+ *```
+ */
+export declare const border: (props: BorderStyleProps) => {};
+export declare const borderStyleFnConfigs: import("../buildStyleFns").StyleFnConfig[];
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/layout/lib/utils/border/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../layout/lib/utils/border/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,qBAAqB,EAA4C,MAAM,SAAS,CAAC;AACzF,OAAO,EAAC,oBAAoB,EAA+C,MAAM,aAAa,CAAC;AAC/F,OAAO,EAAC,sBAAsB,EAA8C,MAAM,UAAU,CAAC;AAC7F,OAAO,EACL,yBAAyB,EAG1B,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,qBAAqB,EAA4C,MAAM,SAAS,CAAC;AAEzF,oBAAY,gBAAgB,GAAG,qBAAqB,GAClD,oBAAoB,GACpB,sBAAsB,GACtB,yBAAyB,GACzB,qBAAqB,CAAC;AAExB;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,MAAM,iCAMjB,CAAC;AAEH,eAAO,MAAM,oBAAoB,4CAMhC,CAAC"}

package/dist/es6/layout/lib/utils/border/index.js

@@ -0,0 +1,37 @@
+import { buildStylePropFn } from '../buildStyleFns';
+import { borderColorFns, borderColorStyleFnConfigs } from './color';
+import { borderLineStyleFns, borderLineStyleFnConfigs } from './lineStyle';
+import { borderRadiusFns, borderRadiusStyleFnConfigs } from './radius';
+import { borderShorthandFns, borderShorthandStyleFnConfigs, } from './shorthand';
+import { borderWidthFns, borderWidthStyleFnConfigs } from './width';
+/**
+ * A style prop function that takes component 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
+ * ```tsx
+ * const BorderExample = () => (
+ *   <Box
+ *    border="solid 1px"
+ *    borderColor="soap500"
+ *    borderRadius="l"
+ *   >
+ *     Hello, border styles!
+ *   </Box>
+ * );
+ *```
+ */
+export const border = buildStylePropFn({
+    ...borderColorFns,
+    ...borderLineStyleFns,
+    ...borderRadiusFns,
+    ...borderShorthandFns,
+    ...borderWidthFns,
+});
+export const borderStyleFnConfigs = [
+    ...borderColorStyleFnConfigs,
+    ...borderLineStyleFnConfigs,
+    ...borderRadiusStyleFnConfigs,
+    ...borderShorthandStyleFnConfigs,
+    ...borderWidthStyleFnConfigs,
+];