@workday/canvas-kit-react 8.0.0-alpha.144-next.0 → 8.0.0-alpha.151-next.3

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

@@ -0,0 +1,117 @@
+"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 gridItem_1 = require("./utils/gridItem");
+var StyledGrid = styled_1.default(Box_1.Box)({
+    display: 'grid',
+}, grid_1.grid);
+var StyledGridItem = styled_1.default(Box_1.Box)(gridItem_1.gridItem);
+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(StyledGridItem, __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.
+ *
+ * @example
+ * ```
+ * import { Grid } from '@workday/canvas-kit-react/layout';
+ * `Grid` is built on top of `Box` and has access to all `BoxProps`.
+ *
+ * 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/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", import("..").BorderShorthandStyleProps & import("..").BorderColorStyleProps & import("..").BorderRadiusStyleProps & import("..").BorderLineStyleProps & import("..").BorderWidthStyleProps & import("..").BorderLogicalStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").FontStyleProps & import("..").LayoutStyleProps & import("./utils/other").OtherStyleProps & import("..").PositionStandardProps & import("..").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & import("..").TextStyleProps & 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("..").FontStyleProps & import("..").LayoutStyleProps & import("./utils/other").OtherStyleProps & import("..").PositionStandardProps & import("..").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & import("..").TextStyleProps>;
 };
 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("..").BorderShorthandStyleProps & import("..").BorderColorStyleProps & import("..").BorderRadiusStyleProps & import("..").BorderLineStyleProps & import("..").BorderWidthStyleProps & import("..").BorderLogicalStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").FontStyleProps & import("..").LayoutStyleProps & import("./utils/other").OtherStyleProps & import("..").PositionStandardProps & import("..").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & import("..").TextStyleProps>;
 };
 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("..").BorderShorthandStyleProps & import("..").BorderColorStyleProps & import("..").BorderRadiusStyleProps & import("..").BorderLineStyleProps & import("..").BorderWidthStyleProps & import("..").BorderLogicalStyleProps & import("..").ColorStyleProps & import("..").DepthStyleProps & import("..").FlexItemStyleProps & import("..").FontStyleProps & import("..").LayoutStyleProps & import("./utils/other").OtherStyleProps & import("..").PositionStandardProps & import("..").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & import("..").TextStyleProps>;
 };
 //# 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/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/color.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,IAAI,WAAW,EAAE,WAAW,EAAC,MAAM,kCAAkC,CAAC;AAEpF,oBAAY,WAAW,GAAG,OAAO,WAAW,CAAC;AAE7C,0CAA0C;AAC1C,oBAAY,eAAe,GAAG;IAC5B,iCAAiC;IACjC,UAAU,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACzC,uCAAuC;IACvC,eAAe,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACrC,CAAC;AAyBF;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,MAWxD"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/color.ts"],"names":[],"mappings":"AACA,OAAO,EACL,MAAM,IAAI,WAAW,EACrB,WAAW,EAEZ,MAAM,kCAAkC,CAAC;AAE1C,oBAAY,WAAW,GAAG,OAAO,WAAW,CAAC;AAE7C,0CAA0C;AAC1C,oBAAY,eAAe,GAAG;IAC5B,iCAAiC;IACjC,UAAU,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IACzC,uCAAuC;IACvC,eAAe,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAC9C,uCAAuC;IACvC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4BAA4B;IAC5B,KAAK,CAAC,EAAE,WAAW,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;CACrC,CAAC;AAyBF;;;;;;;;;;GAUG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,eAAe,EAAE,KAAK,EAAE,CAAC,MAWxD"}

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

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.color = void 0;
+// type changes no need
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var getBackground = function (value) { return ({
     background: tokens_1.colors[value] || value,

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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1 @@
+{"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"}

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

@@ -0,0 +1,57 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.font = void 0;
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var getFontFamily = function (value) { return ({
+    fontFamily: tokens_1.type.properties.fontFamilies[value] || value,
+}); };
+var getFontSize = function (value) { return ({
+    fontSize: tokens_1.type.properties.fontSizes[value] || value,
+}); };
+var getFontStyle = function (value) { return ({
+    fontStyle: value,
+}); };
+var getFontWeight = function (value) { return ({
+    fontWeight: tokens_1.type.properties.fontWeights[value] || value,
+}); };
+var fontProps = {
+    fontFamily: getFontFamily,
+    fontSize: getFontSize,
+    fontWeight: getFontWeight,
+    fontStyle: getFontStyle,
+};
+/**
+ * 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>
+ * );
+ *
+ */
+function font(props) {
+    var styles = {};
+    for (var key in props) {
+        if (key in fontProps) {
+            var value = props[key];
+            var fontFn = fontProps[key];
+            var style = fontFn(value);
+            styles = __assign(__assign({}, styles), style);
+        }
+    }
+    return styles;
+}
+exports.font = font;

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

@@ -0,0 +1,58 @@
+import { Property } from 'csstype';
+/** style props to for grid container properties */
+export declare type GridStyleProps = {
+    /** sets `align-items` property */
+    alignItems?: Property.AlignItems;
+    /** sets `align-content` property */
+    alignContent?: Property.AlignContent;
+    /**
+     * sets `display` property
+     * @default 'grid'
+     * */
+    display?: 'grid' | 'inline-grid';
+    /** sets `justify-items` property */
+    justifyItems?: Property.JustifyItems;
+    /** sets `justify-content` property */
+    justifyContent?: Property.JustifyContent;
+    /** sets `grid-template` property */
+    gridTemplate?: Property.GridTemplate;
+    /** sets `grid-template-area` property */
+    gridTemplateAreas?: Property.GridTemplateAreas;
+    /** sets `grid-template-columns` property */
+    gridTemplateColumns?: Property.GridTemplateColumns;
+    /** sets `grid-template-rows` property */
+    gridTemplateRows?: Property.GridTemplateRows;
+    /** sets `gap` property */
+    gridGap?: Property.GridGap;
+    /** sets `column-gap` property */
+    gridColumnGap?: Property.GridColumnGap;
+    /** sets `row-gap` property */
+    gridRowGap?: Property.GridRowGap;
+    /** sets `place-items` property */
+    gridPlaceItems?: Property.PlaceItems;
+    /** sets `grid-auto-columns` property */
+    gridAutoColumns?: Property.GridAutoColumns;
+    /** sets `grid-auto-rows` property */
+    gridAutoRows?: Property.GridAutoRows;
+    /** sets `grid-area` property */
+    gridArea?: Property.GridArea;
+    /** sets `grid-auto-flow` property */
+    gridAutoFlow?: Property.GridAutoFlow;
+    /** sets `grid` property */
+    grid?: Property.Grid;
+};
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid` with low-level, styled components
+ * const GridExample = () => (
+ *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
+ *     Hello, Grid!
+ *   </Grid>
+ * );
+ *
+ */
+export declare function grid<P extends GridStyleProps>(props: P): {};
+//# sourceMappingURL=grid.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"grid.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/grid.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,mDAAmD;AACnD,oBAAY,cAAc,GAAG;IAC3B,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC;;;SAGK;IACL,OAAO,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC;IACjC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,sCAAsC;IACtC,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IAGzC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,yCAAyC;IACzC,iBAAiB,CAAC,EAAE,QAAQ,CAAC,iBAAiB,CAAC;IAC/C,4CAA4C;IAC5C,mBAAmB,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC;IACnD,yCAAyC;IACzC,gBAAgB,CAAC,EAAE,QAAQ,CAAC,gBAAgB,CAAC;IAC7C,0BAA0B;IAC1B,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B,iCAAiC;IACjC,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,8BAA8B;IAC9B,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kCAAkC;IAClC,cAAc,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACrC,wCAAwC;IACxC,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,qCAAqC;IACrC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,gCAAgC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,qCAAqC;IACrC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,2BAA2B;IAC3B,IAAI,CAAC,EAAE,QAAQ,CAAC,IAAI,CAAC;CACtB,CAAC;AAuBF;;;;;;;;;;;;GAYG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,CAAC,MAWtD"}

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

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.grid = void 0;
+var gridProps = {
+    alignContent: 'alignContent',
+    alignItems: 'alignItems',
+    display: 'display',
+    justifyContent: 'justifyContent',
+    justifyItems: 'justifyItems',
+    gridTemplateAreas: 'gridTemplateAreas',
+    gridTemplate: 'gridTemplate',
+    gridTemplateColumns: 'gridTemplateColumns',
+    gridTemplateRows: 'gridTemplateRows',
+    gridGap: 'gridGap',
+    gridColumnGap: 'gridColumnGap',
+    gridRowGap: 'gridRowGap',
+    gridPlaceItems: 'gridPlaceItems',
+    gridAutoColumns: 'gridAutoColumns',
+    gridAutoRows: 'gridAutoRows',
+    gridAutoFlow: 'gridAutoFlow',
+    gridArea: 'gridArea',
+    grid: 'grid',
+};
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid` with low-level, styled components
+ * const GridExample = () => (
+ *   <Grid gridAutoFlow="row" justifyContent="center" alignItems="center">
+ *     Hello, Grid!
+ *   </Grid>
+ * );
+ *
+ */
+function grid(props) {
+    var styles = {};
+    for (var key in props) {
+        if (key in gridProps) {
+            var attr = gridProps[key];
+            var value = props[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.grid = grid;

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

@@ -0,0 +1,39 @@
+import { Property } from 'csstype';
+/** style props to for grid item properties */
+export declare type GridItemStyleProps = {
+    /** sets `grid-column-start` property */
+    gridColumnStart?: Property.GridColumnStart;
+    /** sets `grid-column-end` property */
+    gridColumnEnd?: Property.GridColumnEnd;
+    /** sets `grid-row-start` property */
+    gridRowStart?: Property.GridRowStart;
+    /** sets `grid-row-end` property */
+    gridRowEnd?: Property.GridRowEnd;
+    /** sets `grid-column` property */
+    gridColumn?: Property.GridColumn;
+    /** sets `grid-row` property */
+    gridRow?: Property.GridRow;
+    /** sets `grid-area` property */
+    gridArea?: Property.GridArea;
+    /** sets `justify-self` property */
+    justifySelf?: Property.JustifySelf;
+    /** sets `align-self` property */
+    alignSelf?: Property.AlignSelf;
+    /** sets `place-self` property */
+    placeSelf?: Property.PlaceSelf;
+};
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridItemStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid item` with low-level, styled components
+ * const GridItemExample = () => (
+ *   <Grid.Item gridRowStart="1" justifySelf="center" gridArea="Card">
+ *     Hello, Grid Item!
+ *   </Grid.Item>
+ * );
+ *
+ */
+export declare function gridItem<P extends GridItemStyleProps>(props: P): {};
+//# sourceMappingURL=gridItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gridItem.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/gridItem.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,8CAA8C;AAC9C,oBAAY,kBAAkB,GAAG;IAE/B,wCAAwC;IACxC,eAAe,CAAC,EAAE,QAAQ,CAAC,eAAe,CAAC;IAC3C,sCAAsC;IACtC,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,qCAAqC;IACrC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,mCAAmC;IACnC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,+BAA+B;IAC/B,OAAO,CAAC,EAAE,QAAQ,CAAC,OAAO,CAAC;IAC3B,gCAAgC;IAChC,QAAQ,CAAC,EAAE,QAAQ,CAAC,QAAQ,CAAC;IAC7B,mCAAmC;IACnC,WAAW,CAAC,EAAE,QAAQ,CAAC,WAAW,CAAC;IACnC,iCAAiC;IACjC,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,iCAAiC;IACjC,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC,CAAC;AAiBF;;;;;;;;;;;;GAYG;AAEH,wBAAgB,QAAQ,CAAC,CAAC,SAAS,kBAAkB,EAAE,KAAK,EAAE,CAAC,MAW9D"}

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.gridItem = void 0;
+/** style props to for grid item properties */
+var gridItemProps = {
+    //Child Props
+    gridColumnStart: 'gridColumnStart',
+    gridColumnEnd: 'gridColumnEnd',
+    gridRowStart: 'gridRowStart',
+    gridRowEnd: 'gridRowEnd',
+    gridColumn: 'gridColumn',
+    gridRow: 'gridRow',
+    gridArea: 'gridArea',
+    justifySelf: 'justifySelf',
+    alignSelf: 'alignSelf',
+    placeSelf: 'placeSelf',
+};
+/**
+ * A style prop function that takes component props and returns grid styles.
+ * If no `GridItemStyleProps` are found, it returns an empty object.
+ *
+ * @example
+ * // You'll most likely use `grid item` with low-level, styled components
+ * const GridItemExample = () => (
+ *   <Grid.Item gridRowStart="1" justifySelf="center" gridArea="Card">
+ *     Hello, Grid Item!
+ *   </Grid.Item>
+ * );
+ *
+ */
+function gridItem(props) {
+    var styles = {};
+    for (var key in props) {
+        if (key in gridItemProps) {
+            var attr = gridItemProps[key];
+            var value = props[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.gridItem = gridItem;

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

@@ -0,0 +1,35 @@
+import { Property } from 'csstype';
+/** style props to for text properties */
+export declare type TextStyleProps = {
+    /** sets `line-height` property */
+    lineHeight?: Property.LineHeight;
+    /** sets `letter-spacing` property */
+    letterSpacing?: Property.LetterSpacing;
+    /** sets `text-align` property */
+    textAlign?: Property.TextAlign;
+    /** sets `text-decoration` property */
+    textDecoration?: Property.TextDecoration;
+    /** sets `text-overflow` property */
+    textOverflow?: Property.TextOverflow;
+    /** sets `text-transform` property */
+    textTransform?: Property.TextTransform;
+    /** sets `text-shadow` property */
+    textShadow?: Property.TextShadow;
+    /** sets `white-space` property */
+    whiteSpace?: Property.WhiteSpace;
+    /** sets `word-break` property */
+    wordBreak?: Property.WordBreak;
+};
+/**
+ * A style prop function that takes components props and returns 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>
+ * );
+ *
+ */
+export declare function text<P extends TextStyleProps>(props: P): {};
+//# sourceMappingURL=text.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../../../../layout/lib/utils/text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,QAAQ,EAAC,MAAM,SAAS,CAAC;AAEjC,yCAAyC;AACzC,oBAAY,cAAc,GAAG;IAC3B,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,qCAAqC;IACrC,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,iCAAiC;IACjC,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;IAC/B,sCAAsC;IACtC,cAAc,CAAC,EAAE,QAAQ,CAAC,cAAc,CAAC;IACzC,oCAAoC;IACpC,YAAY,CAAC,EAAE,QAAQ,CAAC,YAAY,CAAC;IACrC,qCAAqC;IACrC,aAAa,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC;IACvC,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,kCAAkC;IAClC,UAAU,CAAC,EAAE,QAAQ,CAAC,UAAU,CAAC;IACjC,iCAAiC;IACjC,SAAS,CAAC,EAAE,QAAQ,CAAC,SAAS,CAAC;CAChC,CAAC;AAcF;;;;;;;;;;GAUG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,cAAc,EAAE,KAAK,EAAE,CAAC,MAStD"}

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

@@ -0,0 +1,48 @@
+"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);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.text = void 0;
+var textProps = [
+    'lineHeight',
+    'letterSpacing',
+    'textAlign',
+    'textDecoration',
+    'textOverflow',
+    'textTransform',
+    'textShadow',
+    'whiteSpace',
+    'wordBreak',
+];
+/**
+ * A style prop function that takes components props and returns 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>
+ * );
+ *
+ */
+function text(props) {
+    var _a;
+    var styles = {};
+    for (var key in props) {
+        if (textProps.includes(key)) {
+            var value = props[key];
+            styles = __assign(__assign({}, styles), (_a = {}, _a[key] = value, _a));
+        }
+    }
+    return styles;
+}
+exports.text = text;

package/dist/commonjs/modal/lib/Modal.d.ts

@@ -99,7 +99,7 @@ export declare const Modal: import("../../common").ComponentM<import("../../dial
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
 }> & {
-    Body: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & React.HTMLAttributes<HTMLDivElement>, {
+    Body: import("../../common").ElementComponentM<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").FontStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps & import("../..").TextStyleProps & React.HTMLAttributes<HTMLDivElement>, {
         state: {
             stackRef: React.RefObject<HTMLDivElement>;
             targetRef: React.RefObject<HTMLButtonElement>;

package/dist/commonjs/pagination/lib/Pagination/AdditionalDetails.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdditionalDetails.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/AdditionalDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAGjE,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE,KAAK,EAAE,eAAe,CAAC;IACvB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAuBD,eAAO,MAAM,iBAAiB,oEAK3B,sBAAsB,gBAQxB,CAAC"}
+{"version":3,"file":"AdditionalDetails.d.ts","sourceRoot":"","sources":["../../../../../pagination/lib/Pagination/AdditionalDetails.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,eAAe,EAAC,MAAM,SAAS,CAAC;AACxC,OAAO,EAAO,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAGjE,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACzE,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;IACxE,KAAK,EAAE,eAAe,CAAC;IACvB,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAiBD,eAAO,MAAM,iBAAiB,oEAK3B,sBAAsB,gBAaxB,CAAC"}

package/dist/commonjs/pagination/lib/Pagination/AdditionalDetails.js

@@ -49,17 +49,18 @@ var layout_1 = require("@workday/canvas-kit-react/layout");
 var useLiveRegion_1 = require("./common/useLiveRegion");
 var StyledAdditionalDetails = common_1.styled(layout_1.Flex)(function (_a) {
     var shouldHideDetails = _a.shouldHideDetails;
-    var styles = __assign(__assign({}, tokens_1.type.levels.subtext.medium), { color: tokens_1.typeColors.hint });
     if (shouldHideDetails) {
-        return __assign(__assign(__assign({}, styles), common_1.accessibleHide), { marginTop: tokens_1.space.zero });
+        return __assign(__assign({}, common_1.accessibleHide), { marginTop: tokens_1.space.zero });
     }
     else {
-        return __assign(__assign({}, styles), { marginTop: tokens_1.space.xs });
+        return {
+            marginTop: tokens_1.space.xs,
+        };
     }
 });
 var AdditionalDetails = function (_a) {
     var model = _a.model, children = _a.children, shouldAnnounceToScreenReader = _a.shouldAnnounceToScreenReader, elemProps = __rest(_a, ["model", "children", "shouldAnnounceToScreenReader"]);
     var liveRegionProps = useLiveRegion_1.useLiveRegion({ shouldAnnounceToScreenReader: shouldAnnounceToScreenReader });
-    return (React.createElement(StyledAdditionalDetails, __assign({}, liveRegionProps, elemProps), typeof children === 'function' ? children(model) : children));
+    return (React.createElement(StyledAdditionalDetails, __assign({}, tokens_1.type.levels.subtext.medium, { color: tokens_1.typeColors.hint }, liveRegionProps, elemProps), typeof children === 'function' ? children(model) : children));
 };
 exports.AdditionalDetails = AdditionalDetails;

package/dist/commonjs/pagination/lib/Pagination/GoTo/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAGzC,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IACrE,KAAK,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;CAC1E;AAQD,eAAO,MAAM,SAAS,sCAAqC,cAAc,gBAMxE,CAAC"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../../../../../pagination/lib/Pagination/GoTo/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAGzC,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC;IACrE,KAAK,EAAE,eAAe,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,CAAC;CAC1E;AAED,eAAO,MAAM,SAAS,sCAAqC,cAAc,gBAMxE,CAAC"}

package/dist/commonjs/pagination/lib/Pagination/GoTo/Label.js

@@ -43,11 +43,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GoToLabel = void 0;
 var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var StyledLabel = common_1.styled('label')(__assign(__assign({}, tokens_1.type.levels.subtext.medium), { color: tokens_1.typeColors.hint, whiteSpace: 'nowrap' }));
+var text_1 = require("@workday/canvas-kit-react/text");
 var GoToLabel = function (_a) {
     var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
-    return (React.createElement(StyledLabel, __assign({}, elemProps), typeof children === 'function' ? children(model) : children));
+    return (React.createElement(text_1.LabelText, __assign({ typeLevel: "subtext.medium", variant: "hint", whiteSpace: "nowrap" }, elemProps), typeof children === 'function' ? children(model) : children));
 };
 exports.GoToLabel = GoToLabel;