@workday/canvas-kit-react 8.0.0-alpha.150-next.2 → 8.0.0-alpha.155-next.0

package/dist/es6/index.d.ts

@@ -27,6 +27,7 @@ export * from './status-indicator';
 export * from './switch';
 export * from './table';
 export * from './tabs';
+export * from './text';
 export * from './text-area';
 export * from './text-input';
 export * from './toast';

package/dist/es6/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,qBAAqB,CAAC;AACpC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,oBAAoB,CAAC;AACnC,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC"}

package/dist/es6/index.js

@@ -27,6 +27,7 @@ export * from './status-indicator';
 export * from './switch';
 export * from './table';
 export * from './tabs';
+export * from './text';
 export * from './text-area';
 export * from './text-input';
 export * from './toast';

package/dist/es6/layout/index.d.ts

@@ -6,9 +6,11 @@ export * from './lib/utils/border';
 export * from './lib/utils/color';
 export { DepthStyleProps } from './lib/utils/depth';
 export * from './lib/utils/flexItem';
+export * from './lib/utils/font';
 export * from './lib/utils/layout';
 export * from './lib/utils/position';
 export { SpaceStyleProps } from './lib/utils/space';
+export * from './lib/utils/text';
 export * from './lib/Flex';
 export * from './lib/Grid';
 export * from './lib/Stack';

package/dist/es6/layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../layout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AACpC,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAC;AAEpC,OAAO,EAAE,MAAM,EAAE,MAAM,EAAC,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,OAAO,EAAC,eAAe,EAAC,MAAM,mBAAmB,CAAC;AAClD,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC;AAC5B,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC"}

package/dist/es6/layout/index.js

@@ -5,8 +5,10 @@ export * from './lib/Box';
 export * from './lib/utils/border';
 export * from './lib/utils/color';
 export * from './lib/utils/flexItem';
+export * from './lib/utils/font';
 export * from './lib/utils/layout';
 export * from './lib/utils/position';
+export * from './lib/utils/text';
 export * from './lib/Flex';
 export * from './lib/Grid';
 export * from './lib/Stack';

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

@@ -3,11 +3,13 @@ import { BorderStyleProps } from './utils/border';
 import { ColorStyleProps } from './utils/color';
 import { DepthStyleProps } from './utils/depth';
 import { FlexItemStyleProps } from './utils/flexItem';
+import { FontStyleProps } from './utils/font';
 import { LayoutStyleProps } from './utils/layout';
 import { OtherStyleProps } from './utils/other';
 import { PositionStyleProps } from './utils/position';
 import { SpaceStyleProps } from './utils/space';
-export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & {
+import { TextStyleProps } from './utils/text';
+export declare type BoxProps = BorderStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & FontStyleProps & LayoutStyleProps & OtherStyleProps & PositionStyleProps & SpaceStyleProps & TextStyleProps & {
     children?: React.ReactNode;
 };
 /**
@@ -44,5 +46,5 @@ export declare const boxStyleFn: <P extends BoxProps>(props: P) => {};
  * );
  *
  */
-export declare const Box: import("../../common").ElementComponent<"div", import("./utils/border").BorderShorthandStyleProps & import("./utils/border").BorderColorStyleProps & import("./utils/border").BorderRadiusStyleProps & import("./utils/border").BorderLineStyleProps & import("./utils/border").BorderWidthStyleProps & import("./utils/border").BorderLogicalStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & LayoutStyleProps & OtherStyleProps & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps>;
+export declare const Box: import("../../common").ElementComponent<"div", import("./utils/border").BorderShorthandStyleProps & import("./utils/border").BorderColorStyleProps & import("./utils/border").BorderRadiusStyleProps & import("./utils/border").BorderLineStyleProps & import("./utils/border").BorderWidthStyleProps & import("./utils/border").BorderLogicalStyleProps & ColorStyleProps & DepthStyleProps & FlexItemStyleProps & FontStyleProps & LayoutStyleProps & OtherStyleProps & import("./utils/position").PositionStandardProps & import("./utils/position").PositionLogicalProps & import("./utils/space").SpaceStandardProps & import("./utils/space").SpaceLogicalProps & TextStyleProps>;
 //# sourceMappingURL=Box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AAErD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,eAAe,GAAG;IAChB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AAQJ;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,sCAsBtB,CAAC;AA+BF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,unBAad,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../../layout/lib/Box.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAClD,OAAO,EAAS,gBAAgB,EAAC,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAW,kBAAkB,EAAC,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAQ,eAAe,EAAC,MAAM,eAAe,CAAC;AACrD,OAAO,EAAO,cAAc,EAAC,MAAM,cAAc,CAAC;AAElD,oBAAY,QAAQ,GAAG,gBAAgB,GACrC,eAAe,GACf,eAAe,GACf,kBAAkB,GAClB,cAAc,GACd,gBAAgB,GAChB,eAAe,GACf,kBAAkB,GAClB,eAAe,GACf,cAAc,GAAG;IACf,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B,CAAC;AA4BJ;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,UAAU,sCAwBtB,CAAC;AAmCF;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,GAAG,ypBAad,CAAC"}

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

@@ -29,11 +29,33 @@ import { border } from './utils/border';
 import { color } from './utils/color';
 import { depth } from './utils/depth';
 import { flexItem } from './utils/flexItem';
+import { font } from './utils/font';
 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'];
+import { text } from './utils/text';
+var omittedProps = [
+    'display',
+    'color',
+    'height',
+    'overflow',
+    'width',
+    'border',
+    'background',
+    'fontSize',
+    'fontWeight',
+    'fontFamily',
+    'letterSpacing',
+    'lineHeight',
+    'textAlign',
+    'textDecoration',
+    'textOverflow',
+    'textTransform',
+    'textShadow',
+    'whiteSpace',
+    'wordBreak',
+];
 var shouldForwardProp = function (prop) {
     return isPropValid(prop) && !omittedProps.includes(prop);
 };
@@ -62,9 +84,11 @@ export var boxStyleFn = function (props) {
         color,
         depth,
         flexItem,
+        font,
         layout,
         position,
         space,
+        text,
     ].reduce(function (result, style) {
         // @ts-ignore
         var temp = typeof style === 'function' ? style(props) : style;
@@ -79,11 +103,11 @@ 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);
+}, border, color, depth, flexItem, font, layout, position, space, text);
 // 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);
+}, border, color, depth, flexItem, font, layout, other, position, space, text);
 /**
  * `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.

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

@@ -22,5 +22,5 @@ export declare type FlexProps = BoxProps & FlexStyleProps;
  * );
  *
  */
-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("../../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 & FlexStyleProps>;
 //# 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,QAAQ,GAAG,cAAc,CAAC;AASlD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,4qBASf,CAAC"}

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

@@ -25,7 +25,7 @@ export declare type GridItemProps = BoxProps & GridItemStyleProps;
  * );
  *```
  */
-export declare const Grid: 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 & GridStyleProps> & {
+export declare const Grid: 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 & GridStyleProps> & {
     /**
      * `<Grid.Item />` is the child specific sub-component to `<Grid/>`. `<Grid.Item />` gets child specific props, whereas `<Grid./>` gets parent container props.
      *
@@ -47,6 +47,6 @@ export declare const Grid: import("../../common").ElementComponent<"div", import
      * );
      *```
      */
-    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 & GridItemStyleProps>;
+    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 & GridItemStyleProps>;
 };
 //# sourceMappingURL=Grid.d.ts.map

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

@@ -9,7 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { colors as colorTokens } from '@workday/canvas-kit-react/tokens';
+// type changes no need
+import { colors as colorTokens, } from '@workday/canvas-kit-react/tokens';
 var getBackground = function (value) { return ({
     background: colorTokens[value] || value,
 }); };

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

@@ -0,0 +1,53 @@
+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);
+};
+import { type } from '@workday/canvas-kit-react/tokens';
+var getFontFamily = function (value) { return ({
+    fontFamily: type.properties.fontFamilies[value] || value,
+}); };
+var getFontSize = function (value) { return ({
+    fontSize: type.properties.fontSizes[value] || value,
+}); };
+var getFontStyle = function (value) { return ({
+    fontStyle: value,
+}); };
+var getFontWeight = function (value) { return ({
+    fontWeight: 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>
+ * );
+ *
+ */
+export 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;
+}

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

@@ -0,0 +1,44 @@
+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 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>
+ * );
+ *
+ */
+export 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;
+}

package/dist/es6/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/es6/modal/lib/ModalCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAEjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAQpB,CAAC"}
+{"version":3,"file":"ModalCard.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,KAAK,EAAC,MAAM,iCAAiC,CAAC;AAItD,MAAM,WAAW,cAAe,SAAQ,YAAY,CAAC,OAAO,KAAK,CAAC,IAAI,EAAE,KAAK,CAAC;CAAG;AAWjF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;EAMpB,CAAC"}

package/dist/es6/modal/lib/ModalCard.js

@@ -10,13 +10,27 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import * as React from 'react';
-import { createSubcomponent } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, styled, } from '@workday/canvas-kit-react/common';
+import { space } from '@workday/canvas-kit-react/tokens';
 import { Popup } from '@workday/canvas-kit-react/popup';
 import { useModalCard, useModalModel } from './hooks';
+var ResponsiveModalCard = styled(Popup.Card)(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            margin: space.xl,
+            padding: space.l
+        },
+        _b[theme.canvas.breakpoints.down('s')] = {
+            margin: "0 0 " + space.xl,
+            padding: space.m,
+        },
+        _b);
+});
 export var ModalCard = createSubcomponent('div')({
     displayName: 'Modal.Card',
     modelHook: useModalModel,
     elemPropsHook: useModalCard,
 })(function (elemProps, Element) {
-    return (React.createElement(Popup.Card, __assign({ as: Element, width: 440, borderWidth: 0, margin: "xl", depth: 6 }, elemProps)));
+    return React.createElement(ResponsiveModalCard, __assign({ as: Element, width: 440, borderWidth: 0, depth: 6 }, elemProps));
 });

package/dist/es6/modal/lib/ModalOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG/D,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;CAAG;AA+CtD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;OAQ1B,CAAC"}
+{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../../modal/lib/ModalOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAG/D,MAAM,WAAW,iBAAkB,SAAQ,QAAQ;CAAG;AAiDtD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;EAOvB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;OAQ1B,CAAC"}

package/dist/es6/modal/lib/ModalOverlay.js

@@ -40,20 +40,28 @@ var Container = styled(Box)({
 // positioning, but seems to when using flexbox centering. This messes up Popper calculations inside
 // the Modal. The centering container forces a "center" pixel calculation by making sure the width
 // is always an even number
-var CenteringContainer = styled('div')({
-    maxHeight: '100vh',
-    display: 'flex',
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    alignItems: 'center',
-    justifyContent: 'center',
-    // IE11 fix for setting min-height in a flex container
-    ':before': {
-        display: 'block',
-        content: "''",
-        height: '100vh',
-    },
+var ResponsiveContainer = styled('div')(function (_a) {
+    var _b;
+    var theme = _a.theme;
+    return (_b = {
+            maxHeight: '100vh',
+            display: 'flex',
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            justifyContent: 'center',
+            alignItems: 'center',
+            // IE11 fix for setting min-height in a flex container
+            ':before': {
+                display: 'block',
+                content: "''",
+                height: '100vh',
+            }
+        },
+        _b[theme.canvas.breakpoints.down('s')] = {
+            alignItems: 'end',
+        },
+        _b);
 });
 export var ModalOverlay = createSubcomponent('div')({
     displayName: 'Modal.Overlay',
@@ -77,13 +85,15 @@ var OpenModalOverlay = createSubcomponent('div')({
 })(function (elemProps, Element, model) {
     var windowSize = useWindowSize();
     var content = (React.createElement(Container, __assign({ as: Element }, elemProps),
-        React.createElement(CenteringContainer
+        React.createElement(ResponsiveContainer
         // make sure the centering container is an even number of pixels to avoid sub-pixel
         // inaccuracies due to centering
         , { 
             // make sure the centering container is an even number of pixels to avoid sub-pixel
             // inaccuracies due to centering
-            style: { width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw' } }, elemProps.children)));
+            style: {
+                width: windowSize.width % 2 === 1 ? 'calc(100vw - 1px)' : '100vw',
+            } }, elemProps.children)));
     // only render something on the client
     if (typeof window !== 'undefined') {
         return ReactDOM.createPortal(content, model.state.stackRef.current);

package/dist/es6/modal/lib/hooks/useCloseOnOverlayClick.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useCloseOnOverlayClick.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useCloseOnOverlayClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;OA8CjC,CAAC"}
+{"version":3,"file":"useCloseOnOverlayClick.d.ts","sourceRoot":"","sources":["../../../../../modal/lib/hooks/useCloseOnOverlayClick.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;GAIG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;OAgDjC,CAAC"}

package/dist/es6/modal/lib/hooks/useCloseOnOverlayClick.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { PopupStack } from '@workday/canvas-kit-popup-stack';
-import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { createElemPropsHook, useModalityType } from '@workday/canvas-kit-react/common';
 import { usePopupModel } from '@workday/canvas-kit-react/popup';
 /**
  * Registers global listener for all clicks. It will only call the PopupModel's `hide` event if the
@@ -8,6 +8,7 @@ import { usePopupModel } from '@workday/canvas-kit-react/popup';
  * and `useCloseOnOverlayClick` is the Overlay is a child of a `stackRef` element and has a different
  */
 export var useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(function (model) {
+    var modality = useModalityType();
     var onClick = React.useCallback(function (event) {
         if (!model.state.stackRef.current) {
             return;
@@ -24,12 +25,13 @@ export var useCloseOnOverlayClick = createElemPropsHook(usePopupModel)(function
             element = (element === null || element === void 0 ? void 0 : element.parentElement) || null;
         }
         if (dialog &&
+            modality !== 'touch' &&
             elements.length &&
             elements[elements.length - 1] === model.state.stackRef.current &&
             elementsBetweenDialogAnBody.some(function (element) { return element === event.target; })) {
             model.events.hide(event);
         }
-    }, [model.state.stackRef, model.events]);
+    }, [model.state.stackRef, model.events, modality]);
     var visible = model.state.visibility !== 'hidden';
     React.useLayoutEffect(function () {
         var _a;

package/dist/es6/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/es6/pagination/lib/Pagination/AdditionalDetails.js

@@ -21,22 +21,23 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { type, typeColors, space } from '@workday/canvas-kit-react/tokens';
+import { type, space, typeColors } from '@workday/canvas-kit-react/tokens';
 import { accessibleHide, styled } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { useLiveRegion } from './common/useLiveRegion';
 var StyledAdditionalDetails = styled(Flex)(function (_a) {
     var shouldHideDetails = _a.shouldHideDetails;
-    var styles = __assign(__assign({}, type.levels.subtext.medium), { color: typeColors.hint });
     if (shouldHideDetails) {
-        return __assign(__assign(__assign({}, styles), accessibleHide), { marginTop: space.zero });
+        return __assign(__assign({}, accessibleHide), { marginTop: space.zero });
     }
     else {
-        return __assign(__assign({}, styles), { marginTop: space.xs });
+        return {
+            marginTop: space.xs,
+        };
     }
 });
 export var AdditionalDetails = function (_a) {
     var model = _a.model, children = _a.children, shouldAnnounceToScreenReader = _a.shouldAnnounceToScreenReader, elemProps = __rest(_a, ["model", "children", "shouldAnnounceToScreenReader"]);
     var liveRegionProps = useLiveRegion({ shouldAnnounceToScreenReader: shouldAnnounceToScreenReader });
-    return (React.createElement(StyledAdditionalDetails, __assign({}, liveRegionProps, elemProps), typeof children === 'function' ? children(model) : children));
+    return (React.createElement(StyledAdditionalDetails, __assign({}, type.levels.subtext.medium, { color: typeColors.hint }, liveRegionProps, elemProps), typeof children === 'function' ? children(model) : children));
 };