@workday/canvas-kit-react 7.0.0-alpha.129-next.3 → 7.0.0-alpha.256-next.2

package/dist/commonjs/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/commonjs/layout/lib/Grid.js

@@ -0,0 +1,115 @@
+"use strict";
+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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Grid = void 0;
+var React = __importStar(require("react"));
+var styled_1 = __importDefault(require("@emotion/styled"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var Box_1 = require("./Box");
+var grid_1 = require("./utils/grid");
+var StyledGrid = styled_1.default(Box_1.Box)({
+    display: 'grid',
+}, grid_1.grid);
+var GridItem = common_1.createComponent('div')({
+    displayName: 'Grid.Item',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(Box_1.Box, __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>
+ * );
+ *```
+ */
+exports.Grid = common_1.createComponent('div')({
+    displayName: 'Grid',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, elemProps = __rest(_a, ["children"]);
+        return (React.createElement(StyledGrid, __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/commonjs/layout/lib/Layout.d.ts

@@ -1,27 +1,44 @@
 import * as React from 'react';
-import { Column, ColumnProps } from './Column';
-export interface LayoutProps {
+import { DeprecatedColumn, DeprecatedColumnProps } from './Column';
+/**
+ * ### Deprecated Layout Props
+ *
+ * As of Canvas Kit v8, Layout is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export interface DeprecatedLayoutProps {
     /**
-     * The children of the Layout (cannot be empty).
+     * The children of the DeprecatedLayout (cannot be empty).
      */
-    children: React.ReactElement<ColumnProps>[] | React.ReactNode;
+    children: React.ReactElement<DeprecatedColumnProps>[] | React.ReactNode;
     /**
-     * The spacing of the Layout children.
+     * The spacing of the DeprecatedLayout children.
      */
     spacing?: number;
     /**
-     * The padding of the Layout's outside container.
+     * The padding of the DeprecatedLayout's outside container.
      * @default 12
      */
     gutter?: number | string;
     /**
-     * If true, set the max width of the Layout container to `1280px`.
+     * If true, set the max width of the DeprecatedLayout container to `1280px`.
      * @default false
      */
     capWidth?: boolean;
 }
-export declare class Layout extends React.Component<LayoutProps> {
-    static Column: typeof Column;
+/**
+ * ### Deprecated Layout
+ *
+ * As of Canvas Kit v8, Layout is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+export declare class DeprecatedLayout extends React.Component<DeprecatedLayoutProps> {
+    componentDidMount(): void;
+    static Column: typeof DeprecatedColumn;
     private renderChild;
     render(): JSX.Element;
 }

package/dist/commonjs/layout/lib/Layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,MAAM,EAAE,WAAW,EAAC,MAAM,UAAU,CAAC;AAI7C,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IAC9D;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkCD,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IACtD,OAAc,MAAM,gBAAU;IAE9B,OAAO,CAAC,WAAW,CAgBjB;IAEK,MAAM;CAed"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,gBAAgB,EAAE,qBAAqB,EAAC,MAAM,UAAU,CAAC;AAIjE;;;;;;;GAOG;AACH,MAAM,WAAW,qBAAqB;IACpC;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,qBAAqB,CAAC,EAAE,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAkCD;;;;;;;GAOG;AACH,qBAAa,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAC1E,iBAAiB;IASjB,OAAc,MAAM,0BAAoB;IAExC,OAAO,CAAC,WAAW,CAgBjB;IAEK,MAAM;CAed"}

package/dist/commonjs/layout/lib/Layout.js

@@ -57,7 +57,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Layout = void 0;
+exports.DeprecatedLayout = void 0;
 var React = __importStar(require("react"));
 var styled_1 = __importDefault(require("@emotion/styled"));
 var Column_1 = require("./Column");
@@ -89,15 +89,23 @@ var LayoutContainer = styled_1.default('div', {
         margin: '0 auto',
     };
 });
-var Layout = /** @class */ (function (_super) {
-    __extends(Layout, _super);
-    function Layout() {
+/**
+ * ### Deprecated Layout
+ *
+ * As of Canvas Kit v8, Layout is being soft-deprecated.
+ * It will be hard-deprecated (completely removed) in v9. Please see the
+ * [upgrade guide](https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page)
+ * for more information.
+ */
+var DeprecatedLayout = /** @class */ (function (_super) {
+    __extends(DeprecatedLayout, _super);
+    function DeprecatedLayout() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.renderChild = function (child, spacing) {
             if (!React.isValidElement(child)) {
                 return;
             }
-            if (child.type === Column_1.Column) {
+            if (child.type === Column_1.DeprecatedColumn) {
                 var childProps = child.props;
                 if (childProps.spacing || childProps.spacing === 0) {
                     return child;
@@ -108,13 +116,16 @@ var Layout = /** @class */ (function (_super) {
         };
         return _this;
     }
-    Layout.prototype.render = function () {
+    DeprecatedLayout.prototype.componentDidMount = function () {
+        console.warn("This component is being deprecated and will be removed in Canvas Kit V9.\n\n      For more information, please see the V8 upgrade guide:\n\n      https://workday.github.io/canvas-kit/?path=/story/welcome-upgrade-guides-v8-0--page\n      ");
+    };
+    DeprecatedLayout.prototype.render = function () {
         var _this = this;
         var _a = this.props, _b = _a.gutter, gutter = _b === void 0 ? tokens_1.canvas.space.xs : _b, _c = _a.spacing, spacing = _c === void 0 ? tokens_1.spaceNumbers.xs : _c, children = _a.children, capWidth = _a.capWidth, elemProps = __rest(_a, ["gutter", "spacing", "children", "capWidth"]);
         return (React.createElement(LayoutContainer, __assign({ spacing: spacing, gutter: gutter, capWidth: capWidth }, elemProps), React.Children.map(children, function (child) { return _this.renderChild(child, spacing); })));
     };
-    Layout.Column = Column_1.Column;
-    return Layout;
+    DeprecatedLayout.Column = Column_1.DeprecatedColumn;
+    return DeprecatedLayout;
 }(React.Component));
-exports.Layout = Layout;
-Layout.Column = Column_1.Column;
+exports.DeprecatedLayout = DeprecatedLayout;
+DeprecatedLayout.Column = Column_1.DeprecatedColumn;

package/dist/commonjs/layout/lib/Stack.d.ts

@@ -1,8 +1,8 @@
 import { FlexProps } from './Flex';
 import { StackStyleProps } from './utils/stack';
 export declare type StackProps = FlexProps & StackStyleProps;
-export declare const Stack: 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 & import("..").FlexStyleProps & StackStyleProps> & {
-    Item: 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>;
+export declare const Stack: import("../../common").ElementComponent<"div", StackProps> & {
+    Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
 export interface HStackProps extends StackProps {
     /**
@@ -12,7 +12,7 @@ export interface HStackProps extends StackProps {
     flexDirection?: 'row' | 'row-reverse';
 }
 export declare const HStack: import("../../common").ElementComponent<"div", HStackProps> & {
-    Item: 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>;
+    Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
 export interface VStackProps extends StackProps {
     /**
@@ -22,6 +22,6 @@ export interface VStackProps extends StackProps {
     flexDirection?: 'column' | 'column-reverse';
 }
 export declare const VStack: import("../../common").ElementComponent<"div", VStackProps> & {
-    Item: 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>;
+    Item: import("../../common").ElementComponent<"div", import("..").CommonStyleProps>;
 };
 //# sourceMappingURL=Stack.d.ts.map

package/dist/commonjs/layout/lib/Stack.js

@@ -80,8 +80,8 @@ exports.Stack = common_1.createComponent('div')({
 exports.HStack = common_1.createComponent('div')({
     displayName: 'HStack',
     Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: "row" }, elemProps), children));
+        var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'row' : _b, elemProps = __rest(_a, ["children", "flexDirection"]);
+        return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: flexDirection }, elemProps), children));
     },
     subComponents: {
         Item: StackItem,
@@ -90,8 +90,8 @@ exports.HStack = common_1.createComponent('div')({
 exports.VStack = common_1.createComponent('div')({
     displayName: 'VStack',
     Component: function (_a, ref, Element) {
-        var children = _a.children, elemProps = __rest(_a, ["children"]);
-        return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: "column" }, elemProps), children));
+        var children = _a.children, _b = _a.flexDirection, flexDirection = _b === void 0 ? 'column' : _b, elemProps = __rest(_a, ["children", "flexDirection"]);
+        return (React.createElement(exports.Stack, __assign({ as: Element, ref: ref, flexDirection: flexDirection }, elemProps), children));
     },
     subComponents: {
         Item: StackItem,

package/dist/commonjs/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/commonjs/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/commonjs/layout/lib/utils/background.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.background = exports.backgroundFns = exports.backgroundStyleFnConfigs = void 0;
+var buildStyleFns_1 = require("./buildStyleFns");
+exports.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',
+    },
+];
+exports.backgroundFns = buildStyleFns_1.buildStyleFns(exports.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>
+ * );
+ *```
+ */
+exports.background = buildStyleFns_1.buildStylePropFn(exports.backgroundFns);

package/dist/commonjs/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/commonjs/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/commonjs/layout/lib/utils/border/color.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.borderColorFns = exports.borderColorStyleFnConfigs = void 0;
+var buildStyleFns_1 = require("../buildStyleFns");
+exports.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',
+    },
+];
+exports.borderColorFns = buildStyleFns_1.buildStyleFns(exports.borderColorStyleFnConfigs);

package/dist/commonjs/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/commonjs/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/commonjs/layout/lib/utils/border/index.js

@@ -0,0 +1,46 @@
+"use strict";
+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 __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.borderStyleFnConfigs = exports.border = void 0;
+var buildStyleFns_1 = require("../buildStyleFns");
+var color_1 = require("./color");
+var lineStyle_1 = require("./lineStyle");
+var radius_1 = require("./radius");
+var shorthand_1 = require("./shorthand");
+var width_1 = require("./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>
+ * );
+ *```
+ */
+exports.border = buildStyleFns_1.buildStylePropFn(__assign(__assign(__assign(__assign(__assign({}, color_1.borderColorFns), lineStyle_1.borderLineStyleFns), radius_1.borderRadiusFns), shorthand_1.borderShorthandFns), width_1.borderWidthFns));
+exports.borderStyleFnConfigs = __spreadArrays(color_1.borderColorStyleFnConfigs, lineStyle_1.borderLineStyleFnConfigs, radius_1.borderRadiusStyleFnConfigs, shorthand_1.borderShorthandStyleFnConfigs, width_1.borderWidthStyleFnConfigs);

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

@@ -0,0 +1,38 @@
+import { Property } from 'csstype';
+import { StyleFnConfig } from '../buildStyleFns';
+/** style props to set CSS border style properties */
+export declare type BorderLineStyleProps = {
+    /** sets [CSS border-collapse property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse) */
+    borderCollapse?: Property.BorderCollapse;
+    /** sets [CSS border-spacing property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing) */
+    borderSpacing?: Property.BorderSpacing;
+    /** sets [CSS border-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-style) */
+    borderStyle?: Property.Border;
+    /** sets [CSS border-top-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-top-style) */
+    borderTopStyle?: Property.Border;
+    /**
+     * - sets [CSS border-right-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-style)
+     * - no bidirectional support
+     */
+    borderRightStyle?: Property.Border;
+    /** sets [CSS border-bottom-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-style) */
+    borderBottomStyle?: Property.Border;
+    /**
+     * - sets [CSS border-left-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-style)
+     * - no bidirectional support
+     */
+    borderLeftStyle?: Property.Border;
+    /**
+     * - sets [CSS border-inline-start-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-start-style)
+     * - bidirectional support
+     */
+    borderInlineStartStyle?: Property.Border;
+    /**
+     * - sets [CSS border-inline-end-style property](https://developer.mozilla.org/en-US/docs/Web/CSS/border-inline-end-style)
+     * - bidirectional support
+     */
+    borderInlineEndStyle?: Property.Border;
+};
+export declare const borderLineStyleFnConfigs: StyleFnConfig[];
+export declare const borderLineStyleFns: import("../buildStyleFns").StyleFns;
+//# sourceMappingURL=lineStyle.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lineStyle.d.ts","sourceRoot":"","sources":["../../../../../../layout/lib/utils/border/lineStyle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,OAAO,EAAgB,aAAa,EAAC,MAAM,kBAAkB,CAAC;AAE9D,qDAAqD;AACrD,oBAAY,oBAAoB,GAAG;IACjC,4GAA4G;IAC5G,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IACzC,0GAA0G;IAC1G,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,sGAAsG;IACtG,WAAW,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IAC9B,8GAA8G;IAC9G,cAAc,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACjC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACnC,oHAAoH;IACpH,iBAAiB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACpC;;;OAGG;IACH,eAAe,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IAClC;;;OAGG;IACH,sBAAsB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;IACzC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,QAAQ,CAAC,MAAM,CAAC;CACxC,CAAC;AAEF,eAAO,MAAM,wBAAwB,EAAE,aAAa,EA8CnD,CAAC;AAEF,eAAO,MAAM,kBAAkB,qCAA0C,CAAC"}