@workday/canvas-kit-react 10.0.0-alpha.444-next.0 → 10.0.0-alpha.447-next.0

package/dist/commonjs/tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,MAAM,EAEN,SAAS,EAKV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAChH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAClE,OAAO,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,IAAI,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEF,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,aAAa,GACd,CAAC;AAEF,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,GACd,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,MAAM,EAEN,SAAS,EAKV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAChH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAClE,OAAO,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EAAC,MAAM,aAAa,CAAC;AACnC,OAAO,EAAC,IAAI,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBlB,CAAC;AAEF,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,aAAa,GACd,CAAC;AAEF,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACnB,aAAa,GACd,CAAA"}

package/dist/commonjs/tokens/lib/depth.d.ts

@@ -29,7 +29,7 @@ export declare type CanvasDepth = {
      * ```
      */
     1: {
-        boxShadow: '0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)';
+        boxShadow: '0 0.0625rem 0.25rem rgba(31, 38, 46, 0.12), 0 0.125rem 0.5rem rgba(31, 38, 46, 0.08)';
     };
     /**
      * ### Depth 2
@@ -45,7 +45,7 @@ export declare type CanvasDepth = {
      * ```
      */
     2: {
-        boxShadow: '0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)';
+        boxShadow: '0 0.125rem 0.5rem rgba(31, 38, 46, 0.12), 0 0.25rem 1rem rgba(31, 38, 46, 0.08)';
     };
     /**
      * ### Depth 3
@@ -61,7 +61,7 @@ export declare type CanvasDepth = {
      * ```
      */
     3: {
-        boxShadow: '0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)';
+        boxShadow: '0 0.1875rem 0.75rem rgba(31, 38, 46, 0.12), 0 0.375rem 1.5rem rgba(31, 38, 46, 0.08)';
     };
     /**
      * ### Depth 4
@@ -76,7 +76,7 @@ export declare type CanvasDepth = {
      * ```
      */
     4: {
-        boxShadow: '0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)';
+        boxShadow: '0 0.25rem 1rem rgba(31, 38, 46, 0.12), 0 0.5rem 2rem rgba(31, 38, 46, 0.08)';
     };
     /**
      * ### Depth 5
@@ -92,7 +92,7 @@ export declare type CanvasDepth = {
      * ```
      */
     5: {
-        boxShadow: '0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)';
+        boxShadow: '0 0.3125rem 1.25rem rgba(31, 38, 46, 0.12), 0 0.625rem 2.5rem rgba(31, 38, 46, 0.08)';
     };
     /**
      * ### Depth 6
@@ -108,7 +108,7 @@ export declare type CanvasDepth = {
      * ```
      */
     6: {
-        boxShadow: '0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)';
+        boxShadow: '0 0.375rem 1.5rem rgba(31, 38, 46, 0.12), 0 0.75rem 3rem rgba(31, 38, 46, 0.08)';
     };
 };
 declare type ValueOf<T> = T[keyof T];

package/dist/commonjs/tokens/lib/depth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/depth.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,wEAAwE,CAAC;KACrF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,yEAAyE,CAAC;KACtF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,0EAA0E,CAAC;KACvF,CAAC;IACF;;;;;;;;;;;OAWG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,0EAA0E,CAAC;KACvF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,2EAA2E,CAAC;KACxF,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,2EAA2E,CAAC;KACxF,CAAC;CACH,CAAC;AAEF,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK,EAAE,WAsBnB,CAAC"}
+{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/depth.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE;QACJ,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,sFAAsF,CAAC;KACnG,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,iFAAiF,CAAC;KAC9F,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,sFAAsF,CAAC;KACnG,CAAC;IACF;;;;;;;;;;;OAWG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,6EAA6E,CAAC;KAC1F,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,sFAAsF,CAAC;KACnG,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,iFAAiF,CAAC;KAC9F,CAAC;CACH,CAAC;AAEF,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,KAAK,EAAE,WAyBnB,CAAC"}

package/dist/commonjs/tokens/lib/depth.js

@@ -28,21 +28,21 @@ exports.depth = {
         boxShadow: 'none',
     },
     1: {
-        boxShadow: '0px 1px 4px rgba(31, 38, 46, 0.12), 0px 2px 8px rgba(31, 38, 46, 0.08)',
+        boxShadow: '0 0.0625rem 0.25rem rgba(31, 38, 46, 0.12), 0 0.125rem 0.5rem rgba(31, 38, 46, 0.08)',
     },
     2: {
-        boxShadow: '0px 2px 8px rgba(31, 38, 46, 0.12), 0px 4px 16px rgba(31, 38, 46, 0.08)',
+        boxShadow: '0 0.125rem 0.5rem rgba(31, 38, 46, 0.12), 0 0.25rem 1rem rgba(31, 38, 46, 0.08)',
     },
     3: {
-        boxShadow: '0px 3px 12px rgba(31, 38, 46, 0.12), 0px 6px 24px rgba(31, 38, 46, 0.08)',
+        boxShadow: '0 0.1875rem 0.75rem rgba(31, 38, 46, 0.12), 0 0.375rem 1.5rem rgba(31, 38, 46, 0.08)',
     },
     4: {
-        boxShadow: '0px 4px 16px rgba(31, 38, 46, 0.12), 0px 8px 32px rgba(31, 38, 46, 0.08)',
+        boxShadow: '0 0.25rem 1rem rgba(31, 38, 46, 0.12), 0 0.5rem 2rem rgba(31, 38, 46, 0.08)',
     },
     5: {
-        boxShadow: '0px 5px 20px rgba(31, 38, 46, 0.12), 0px 10px 40px rgba(31, 38, 46, 0.08)',
+        boxShadow: '0 0.3125rem 1.25rem rgba(31, 38, 46, 0.12), 0 0.625rem 2.5rem rgba(31, 38, 46, 0.08)',
     },
     6: {
-        boxShadow: '0px 6px 24px rgba(31, 38, 46, 0.12), 0px 12px 48px rgba(31, 38, 46, 0.08)',
+        boxShadow: '0 0.375rem 1.5rem rgba(31, 38, 46, 0.12), 0 0.75rem 3rem rgba(31, 38, 46, 0.08)',
     },
 };

package/dist/commonjs/tokens/lib/space.d.ts

@@ -1,44 +1,82 @@
 declare type ValueOf<T> = T[keyof T];
-/** Type for the `space` object with keys and px values (strings) */
+/** Type for the `space` object with keys and rem values (strings) */
 export declare type CanvasSpace = {
-    zero: '0px';
-    xxxs: '4px';
-    xxs: '8px';
-    xs: '12px';
-    s: '16px';
-    m: '24px';
-    l: '32px';
-    xl: '40px';
-    xxl: '64px';
-    xxxl: '80px';
+    zero: '0';
+    xxxs: '0.25rem';
+    xxs: '0.5rem';
+    xs: '0.75rem';
+    s: '1rem';
+    m: '1.5rem';
+    l: '2rem';
+    xl: '2.5rem';
+    xxl: '4rem';
+    xxxl: '5rem';
 };
 /** Type for `CanvasSpace` keys */
 export declare type CanvasSpaceKeys = keyof CanvasSpace;
-/** The px values for CanvasSpace (strings) */
+/** The rem values for CanvasSpace (strings) */
 export declare type CanvasSpaceValues = ValueOf<CanvasSpace>;
-/** An object of space keys and px values (strings) */
+/**
+ * An object of space keys and rem values (strings)
+ *
+ * Below is a table to show the equivalent values from `px` to `rem`.
+ * This is based on the default browser font size which is `16px`.
+ *
+ * | px Value  | rem Value | space token |
+ * | --------- | --------- | ----------- |
+ * | 0         | 0         | zero        |
+ * | 4px       | 0.25rem   | xxxs        |
+ * | 8px       | 0.5rem    | xxs         |
+ * | 12px      | 0.75rem   | xs          |
+ * | 16px      | 1rem      | s           |
+ * | 24px      | 1.5rem    | m           |
+ * | 32px      | 2rem      | l           |
+ * | 40px      | 2.5rem    | xl          |
+ * | 64px      | 4rem      | xxl         |
+ * | 80px      | 5rem      | xxxl        |
+ *
+ * */
 export declare const space: CanvasSpace;
-/** Type for the `spaceNumbers` object with keys and numeric px values (numbers) */
+/** Type for the `spaceNumbers` object with keys and numeric rem values (numbers) */
 export declare type CanvasSpaceNumbers = {
     zero: 0;
-    xxxs: 4;
-    xxs: 8;
-    xs: 12;
-    s: 16;
-    m: 24;
-    l: 32;
-    xl: 40;
-    xxl: 64;
-    xxxl: 80;
+    xxxs: 0.25;
+    xxs: 0.5;
+    xs: 0.75;
+    s: 1;
+    m: 1.5;
+    l: 2;
+    xl: 2.5;
+    xxl: 4;
+    xxxl: 5;
 };
-/** The numeric px values for CanvasSpaceNumbers (numbers) */
+/** The numeric rem values for CanvasSpaceNumbers (numbers) */
 export declare type CanvasSpaceNumberValues = ValueOf<CanvasSpaceNumbers>;
 /**
- * An object of space keys and their numeric px values (numbers)
- * - These are helpful when you need a raw numeric px value.
+ * An object of space keys and their numeric rem values (numbers)
+ * - These are helpful when you need a raw numeric rem value.
  * - Here's an example usage to perform calculations:
  * @example
- * const buttonPaddingLeft = spaceNumbers.s + iconSize;
+ * ```tsx
+ * const buttonPaddingLeft = `${spaceNumbers.s + iconSize}rem`;
+ * ```
+ *
+ * Below is a table to show the equivalent values from `px` to `rem`.
+ * This is based on the default browser font size which is `16px`.
+ *
+ * | px Value  | rem Value | space token |
+ * | --------- | --------- | ----------- |
+ * | 0         | 0         | zero        |
+ * | 4px       | 0.25rem   | xxxs        |
+ * | 8px       | 0.5rem    | xxs         |
+ * | 12px      | 0.75rem   | xs          |
+ * | 16px      | 1rem      | s           |
+ * | 24px      | 1.5rem    | m           |
+ * | 32px      | 2rem      | l           |
+ * | 40px      | 2.5rem    | xl          |
+ * | 64px      | 4rem      | xxl         |
+ * | 80px      | 5rem      | xxxl        |
+ *
  */
 export declare const spaceNumbers: CanvasSpaceNumbers;
 export {};

package/dist/commonjs/tokens/lib/space.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"space.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/space.ts"],"names":[],"mappings":"AAAA,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAO7B,oEAAoE;AACpE,oBAAY,WAAW,GAAG;IACxB,IAAI,EAAE,KAAK,CAAC;IACZ,IAAI,EAAE,KAAK,CAAC;IACZ,GAAG,EAAE,KAAK,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,kCAAkC;AAClC,oBAAY,eAAe,GAAG,MAAM,WAAW,CAAC;AAEhD,8CAA8C;AAC9C,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD,sDAAsD;AACtD,eAAO,MAAM,KAAK,EAAE,WAWnB,CAAC;AAEF,mFAAmF;AACnF,oBAAY,kBAAkB,GAAG;IAC/B,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,CAAC,CAAC;IACR,GAAG,EAAE,CAAC,CAAC;IACP,EAAE,EAAE,EAAE,CAAC;IACP,CAAC,EAAE,EAAE,CAAC;IACN,CAAC,EAAE,EAAE,CAAC;IACN,CAAC,EAAE,EAAE,CAAC;IACN,EAAE,EAAE,EAAE,CAAC;IACP,GAAG,EAAE,EAAE,CAAC;IACR,IAAI,EAAE,EAAE,CAAC;CACV,CAAC;AAEF,6DAA6D;AAC7D,oBAAY,uBAAuB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAElE;;;;;;GAMG;AACH,eAAO,MAAM,YAAY,EAAE,kBAW1B,CAAC"}
+{"version":3,"file":"space.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/space.ts"],"names":[],"mappings":"AAAA,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAO7B,qEAAqE;AACrE,oBAAY,WAAW,GAAG;IACxB,IAAI,EAAE,GAAG,CAAC;IACV,IAAI,EAAE,SAAS,CAAC;IAChB,GAAG,EAAE,QAAQ,CAAC;IACd,EAAE,EAAE,SAAS,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,QAAQ,CAAC;IACZ,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,QAAQ,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,kCAAkC;AAClC,oBAAY,eAAe,GAAG,MAAM,WAAW,CAAC;AAEhD,+CAA+C;AAC/C,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;KAmBK;AACL,eAAO,MAAM,KAAK,EAAE,WAWnB,CAAC;AAEF,oFAAoF;AACpF,oBAAY,kBAAkB,GAAG;IAC/B,IAAI,EAAE,CAAC,CAAC;IACR,IAAI,EAAE,IAAI,CAAC;IACX,GAAG,EAAE,GAAG,CAAC;IACT,EAAE,EAAE,IAAI,CAAC;IACT,CAAC,EAAE,CAAC,CAAC;IACL,CAAC,EAAE,GAAG,CAAC;IACP,CAAC,EAAE,CAAC,CAAC;IACL,EAAE,EAAE,GAAG,CAAC;IACR,GAAG,EAAE,CAAC,CAAC;IACP,IAAI,EAAE,CAAC,CAAC;CACT,CAAC;AAEF,8DAA8D;AAC9D,oBAAY,uBAAuB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAElE;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,YAAY,EAAE,kBAW1B,CAAC"}

package/dist/commonjs/tokens/lib/space.js

@@ -1,35 +1,73 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.spaceNumbers = exports.space = void 0;
-/** An object of space keys and px values (strings) */
+/**
+ * An object of space keys and rem values (strings)
+ *
+ * Below is a table to show the equivalent values from `px` to `rem`.
+ * This is based on the default browser font size which is `16px`.
+ *
+ * | px Value  | rem Value | space token |
+ * | --------- | --------- | ----------- |
+ * | 0         | 0         | zero        |
+ * | 4px       | 0.25rem   | xxxs        |
+ * | 8px       | 0.5rem    | xxs         |
+ * | 12px      | 0.75rem   | xs          |
+ * | 16px      | 1rem      | s           |
+ * | 24px      | 1.5rem    | m           |
+ * | 32px      | 2rem      | l           |
+ * | 40px      | 2.5rem    | xl          |
+ * | 64px      | 4rem      | xxl         |
+ * | 80px      | 5rem      | xxxl        |
+ *
+ * */
 exports.space = {
-    zero: '0px',
-    xxxs: '4px',
-    xxs: '8px',
-    xs: '12px',
-    s: '16px',
-    m: '24px',
-    l: '32px',
-    xl: '40px',
-    xxl: '64px',
-    xxxl: '80px',
+    zero: '0',
+    xxxs: '0.25rem',
+    xxs: '0.5rem',
+    xs: '0.75rem',
+    s: '1rem',
+    m: '1.5rem',
+    l: '2rem',
+    xl: '2.5rem',
+    xxl: '4rem',
+    xxxl: '5rem',
 };
 /**
- * An object of space keys and their numeric px values (numbers)
- * - These are helpful when you need a raw numeric px value.
+ * An object of space keys and their numeric rem values (numbers)
+ * - These are helpful when you need a raw numeric rem value.
  * - Here's an example usage to perform calculations:
  * @example
- * const buttonPaddingLeft = spaceNumbers.s + iconSize;
+ * ```tsx
+ * const buttonPaddingLeft = `${spaceNumbers.s + iconSize}rem`;
+ * ```
+ *
+ * Below is a table to show the equivalent values from `px` to `rem`.
+ * This is based on the default browser font size which is `16px`.
+ *
+ * | px Value  | rem Value | space token |
+ * | --------- | --------- | ----------- |
+ * | 0         | 0         | zero        |
+ * | 4px       | 0.25rem   | xxxs        |
+ * | 8px       | 0.5rem    | xxs         |
+ * | 12px      | 0.75rem   | xs          |
+ * | 16px      | 1rem      | s           |
+ * | 24px      | 1.5rem    | m           |
+ * | 32px      | 2rem      | l           |
+ * | 40px      | 2.5rem    | xl          |
+ * | 64px      | 4rem      | xxl         |
+ * | 80px      | 5rem      | xxxl        |
+ *
  */
 exports.spaceNumbers = {
     zero: 0,
-    xxxs: 4,
-    xxs: 8,
-    xs: 12,
-    s: 16,
-    m: 24,
-    l: 32,
-    xl: 40,
-    xxl: 64,
-    xxxl: 80,
+    xxxs: 0.25,
+    xxs: 0.5,
+    xs: 0.75,
+    s: 1,
+    m: 1.5,
+    l: 2,
+    xl: 2.5,
+    xxl: 4,
+    xxxl: 5,
 };

package/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts

@@ -25,6 +25,13 @@ export interface OverflowTooltipProps extends Omit<React.HTMLAttributes<HTMLDivE
      * @default 'top'
      */
     placement?: Placement;
+    /**
+     * Define fallback placements by providing a list of {@link Placement} in array (in order of preference).
+     * The default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial
+     * and opposite placements are not available, the fallback placements will be in use. Use an empty array to
+     * disable the fallback placements.
+     */
+    fallbackPlacements?: Placement[];
 }
-export declare const OverflowTooltip: ({ placement, children, ...elemProps }: OverflowTooltipProps) => JSX.Element;
+export declare const OverflowTooltip: ({ placement, fallbackPlacements, children, ...elemProps }: OverflowTooltipProps) => JSX.Element;
 //# sourceMappingURL=OverflowTooltip.d.ts.map

package/dist/commonjs/tooltip/lib/OverflowTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAmBhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAahE,CAAC;AAcF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAiBD,eAAO,MAAM,eAAe,0CAIzB,oBAAoB,gBAwCtB,CAAC"}
+{"version":3,"file":"OverflowTooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/OverflowTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAmBhE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,YAAa,OAAO,KAAG,OAAO,GAAG,IAahE,CAAC;AAcF,MAAM,WAAW,oBAAqB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;CAClC;AAiBD,eAAO,MAAM,eAAe,8DAKzB,oBAAoB,gBAwCtB,CAAC"}

package/dist/commonjs/tooltip/lib/OverflowTooltip.js

@@ -88,7 +88,7 @@ function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentP
         return mergedProps;
     }, {});
 }
-const OverflowTooltip = ({ placement = 'top', children, ...elemProps }) => {
+const OverflowTooltip = ({ placement = 'top', fallbackPlacements = popup_1.defaultFallbackPlacements, children, ...elemProps }) => {
     const [titleText, setTitleText] = React.useState('');
     const { targetProps, popperProps, tooltipProps } = useTooltip_1.useTooltip({ type: 'muted' });
     const onMouseEnter = (event) => {
@@ -113,7 +113,7 @@ const OverflowTooltip = ({ placement = 'top', children, ...elemProps }) => {
             'aria-label': undefined,
             ...mergeCallbacks({ ...targetProps, onMouseEnter, onFocus }, children.props),
         }),
-        React.createElement(popup_1.Popper, Object.assign({ placement: placement }, popperProps), ({ placement }) => {
+        React.createElement(popup_1.Popper, Object.assign({ placement: placement, fallbackPlacements: fallbackPlacements }, popperProps), ({ placement }) => {
             const transformOrigin = popup_1.getTransformFromPlacement(placement);
             return (React.createElement(TooltipContainer_1.TooltipContainer, Object.assign({ transformOrigin: transformOrigin }, tooltipProps, elemProps), titleText));
         })));

package/dist/commonjs/tooltip/lib/Tooltip.d.ts

@@ -20,6 +20,13 @@ export interface TooltipProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
      * @default 'top'
      */
     placement?: Placement;
+    /**
+     * Define fallback placements by providing a list of {@link Placement} in array (in order of preference).
+     * The default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial
+     * and opposite placements are not available, the fallback placements will be in use. Use an empty array to
+     * disable the fallback placements.
+     */
+    fallbackPlacements?: Placement[];
     /**
      * Determines the tooltip type for accessibility.
      *

package/dist/commonjs/tooltip/lib/Tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAM7F,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,kFAyClB,CAAC"}
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../../tooltip/lib/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,SAAS,EAGV,MAAM,iCAAiC,CAAC;AAMzC,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACvF;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;;;;;;;;;;;;OAeG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC;IACtC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAiBD,eAAO,MAAM,OAAO,kFA0ClB,CAAC"}

package/dist/commonjs/tooltip/lib/Tooltip.js

@@ -42,7 +42,7 @@ function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentP
 }
 exports.Tooltip = common_1.createComponent('div')({
     displayName: 'Tooltip',
-    Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, ...elemProps }) {
+    Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, fallbackPlacements = popup_1.defaultFallbackPlacements, ...elemProps }) {
         const titleText = react_innertext_1.default(title);
         const { targetProps, popperProps, tooltipProps } = useTooltip_1.useTooltip({
             type,
@@ -58,7 +58,7 @@ exports.Tooltip = common_1.createComponent('div')({
                     ? { 'aria-label': children.props['aria-label'] }
                     : {}),
             }),
-            React.createElement(popup_1.Popper, Object.assign({ placement: placement }, popperProps), ({ placement }) => {
+            React.createElement(popup_1.Popper, Object.assign({ placement: placement, fallbackPlacements: fallbackPlacements }, popperProps), ({ placement }) => {
                 const transformOrigin = popup_1.getTransformFromPlacement(placement);
                 return (React.createElement(TooltipContainer_1.TooltipContainer, Object.assign({ transformOrigin: transformOrigin }, elemProps, tooltipProps), title));
             })));

package/dist/commonjs/tooltip/lib/TooltipContainer.js

@@ -29,7 +29,7 @@ exports.TooltipContainer = styled_1.default('div')({
     ...tokens_1.type.levels.subtext.medium,
     display: 'inline-flex',
     position: 'relative',
-    padding: tokens_1.spaceNumbers.xxs + tokens_1.spaceNumbers.xxxs,
+    padding: tokens_1.space.xs,
     color: tokens_1.colors.frenchVanilla100,
     a: {
         color: tokens_1.colors.frenchVanilla100,
@@ -40,7 +40,7 @@ exports.TooltipContainer = styled_1.default('div')({
         content: '""',
         borderRadius: tokens_1.borderRadius.m,
         zIndex: -1,
-        margin: tokens_1.spaceNumbers.xxxs,
+        margin: tokens_1.space.xxxs,
         backgroundColor: 'rgba(0,0,0,.85)',
         position: 'absolute',
         top: 0,
@@ -50,9 +50,9 @@ exports.TooltipContainer = styled_1.default('div')({
     },
     // offset tooltips by 2 pixels when a keyboard focus ring is detected
     '[data-whatinput=keyboard] &': {
-        padding: tokens_1.spaceNumbers.xxs + tokens_1.spaceNumbers.xxxs + 2,
+        padding: `${tokens_1.spaceNumbers.s - 0.125}rem`,
         ':before': {
-            margin: tokens_1.spaceNumbers.xxxs + 2,
+            margin: `${tokens_1.spaceNumbers.xxxs + 0.125}rem`,
         },
     },
     // Hide tooltip when the reference element is either clipped or fully hidden
@@ -62,16 +62,16 @@ exports.TooltipContainer = styled_1.default('div')({
     },
     // Fix offsets based on placement
     '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
-        left: -tokens_1.spaceNumbers.xxxs,
+        left: `-${tokens_1.space.xxxs}`,
     },
     '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
-        right: -tokens_1.spaceNumbers.xxxs,
+        right: `-${tokens_1.space.xxxs}`,
     },
     '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
-        top: -tokens_1.spaceNumbers.xxxs,
+        top: `-${tokens_1.space.xxxs}`,
     },
     '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
-        bottom: -tokens_1.spaceNumbers.xxxs,
+        bottom: `-${tokens_1.space.xxxs}`,
     },
 }, ({ transformOrigin = defaultTransformOrigin }) => {
     if (transformOrigin === null) {

package/dist/es6/button/lib/BaseButton.d.ts

@@ -26,7 +26,7 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
  */
 export interface BaseButtonProps extends Omit<ButtonContainerProps, 'ref'> {
 }
-export declare const getMinWidthStyles: (children: React.ReactNode, size: ButtonSizes | TertiaryButtonSizes) => "24px" | "32px" | "40px" | "80px" | "auto" | "48px" | "112px" | "96px";
+export declare const getMinWidthStyles: (children: React.ReactNode, size: ButtonSizes | TertiaryButtonSizes) => "1.5rem" | "2rem" | "2.5rem" | "5rem" | "auto" | "48px" | "112px" | "96px";
 export declare const getPaddingStyles: (children: React.ReactNode, size: ButtonSizes | TertiaryButtonSizes, icon: CanvasSystemIcon | undefined, iconPosition: IconPositions | undefined) => string | 0;
 export declare const BaseButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ButtonContainerProps> & {
     Icon: import("@workday/canvas-kit-react/common").ElementComponent<"span", import("./parts/ButtonLabelIcon").ButtonLabelIconProps>;

package/dist/es6/button/lib/BaseButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAEL,cAAc,EAMf,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAI/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAGtF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAgL7E,eAAO,MAAM,iBAAiB,aAClB,MAAM,SAAS,QACnB,WAAW,GAAG,mBAAmB,2EAcxC,CAAC;AAEF,eAAO,MAAM,gBAAgB,aACjB,MAAM,SAAS,QACnB,WAAW,GAAG,mBAAmB,QACjC,gBAAgB,GAAG,SAAS,gBACpB,aAAa,GAAG,SAAS,eAiDxC,CAAC;AAEF,eAAO,MAAM,UAAU;;;CAarB,CAAC"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAEL,cAAc,EAMf,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,eAAe,EAAC,MAAM,gCAAgC,CAAC;AAI/D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,mBAAmB,EAAC,MAAM,SAAS,CAAC;AAGtF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAgL7E,eAAO,MAAM,iBAAiB,aAClB,MAAM,SAAS,QACnB,WAAW,GAAG,mBAAmB,+EAcxC,CAAC;AAEF,eAAO,MAAM,gBAAgB,aACjB,MAAM,SAAS,QACnB,WAAW,GAAG,mBAAmB,QACjC,gBAAgB,GAAG,SAAS,gBACpB,aAAa,GAAG,SAAS,eAiDxC,CAAC;AAEF,eAAO,MAAM,UAAU;;;CAarB,CAAC"}

package/dist/es6/button/lib/BaseButton.js

@@ -64,7 +64,7 @@ const ButtonContainer = styled('button')({
                 fontWeight: type.properties.fontWeights.bold,
                 height: '48px',
                 '& > * ': {
-                    margin: `0 ${spaceNumbers.xxs / 2}px`,
+                    margin: `0 ${space.xxxs}`,
                 },
             };
         case 'medium':
@@ -72,14 +72,14 @@ const ButtonContainer = styled('button')({
             return {
                 height: space.xl,
                 '& > * ': {
-                    margin: `0 ${spaceNumbers.xxs / 2}px`,
+                    margin: `0 ${space.xxxs}`,
                 },
             };
         case 'small':
             return {
                 height: space.l,
                 '& > * ': {
-                    margin: `0 ${spaceNumbers.xxxs / 2}px`,
+                    margin: `0 ${spaceNumbers.xxxs / 2}rem`,
                 },
             };
         case 'extraSmall':
@@ -88,7 +88,7 @@ const ButtonContainer = styled('button')({
                 fontWeight: type.properties.fontWeights.bold,
                 height: space.m,
                 '& > * ': {
-                    margin: `0 ${spaceNumbers.xxxs / 2}px`,
+                    margin: `0 ${spaceNumbers.xxxs / 2}rem`,
                 },
             };
     }

package/dist/es6/checkbox/lib/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAM1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAqPD,eAAO,MAAM,QAAQ;;CAmEnB,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../checkbox/lib/Checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAOT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAY1C,MAAM,WAAW,aAAc,SAAQ,SAAS;IAC9C;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAqPD,eAAO,MAAM,QAAQ;;CAmEnB,CAAC"}

package/dist/es6/checkbox/lib/Checkbox.js

@@ -1,14 +1,14 @@
 import * as React from 'react';
 import { createComponent, ErrorType, useUniqueId, focusRing, mouseFocusBehavior, getErrorColors, styled, useTheme, } from '@workday/canvas-kit-react/common';
-import { borderRadius, colors, inputColors, spaceNumbers } from '@workday/canvas-kit-react/tokens';
+import { borderRadius, colors, inputColors, space, spaceNumbers, } from '@workday/canvas-kit-react/tokens';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { checkSmallIcon } from '@workday/canvas-system-icons-web';
 import { LabelText } from '@workday/canvas-kit-react/text';
-const checkboxHeight = 18;
-const checkboxTapArea = spaceNumbers.m;
+const checkboxHeight = (spaceNumbers.xl - spaceNumbers.xxxs) / 2;
+const checkboxTapArea = space.m;
 const checkboxContainerHeight = checkboxTapArea;
-const checkboxLabelDistance = spaceNumbers.xs;
-const checkboxWidth = 18;
+const checkboxLabelDistance = `${spaceNumbers.xs}rem`;
+const checkboxWidth = checkboxHeight;
 const rippleRadius = (spaceNumbers.l - checkboxWidth) / 2;
 const CheckboxContainer = styled('div')({
     display: 'flex',
@@ -23,17 +23,17 @@ const CheckboxContainer = styled('div')({
  */
 const CheckboxInputWrapper = styled('div')({
     display: 'flex',
-    height: checkboxHeight,
-    minWidth: checkboxWidth,
+    height: `${checkboxHeight}rem`,
+    minWidth: `${checkboxWidth}rem`,
     marginTop: '3px',
     alignSelf: 'flex-start',
 });
 const CheckboxRipple = styled('span')({
     borderRadius: borderRadius.circle,
     boxShadow: `0 0 0 0 ${colors.soap200}`,
-    height: checkboxHeight,
+    height: `${checkboxHeight}rem`,
     transition: 'box-shadow 150ms ease-out',
-    width: checkboxWidth,
+    width: `${checkboxWidth}rem`,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
 }, ({ variant }) => ({
@@ -124,7 +124,7 @@ const CheckboxInput = styled('input')(({ theme: { canvas: { palette: { primary:
     }),
 }), ({ disabled }) => ({
     '&:hover ~ span:first-of-type': {
-        boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}px ${colors.soap200}`,
+        boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}rem ${colors.soap200}`,
     },
 }), ({ theme, error, variant }) => {
     const errorColors = getErrorColors(error, theme);
@@ -167,13 +167,13 @@ const CheckboxBackground = styled('div')({
     borderRadius: borderRadius.s,
     boxSizing: 'border-box',
     display: 'flex',
-    height: checkboxHeight,
+    height: `${checkboxHeight}rem`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: checkboxWidth,
+    width: `${checkboxWidth}rem`,
 }, ({ variant }) => ({
     border: `1px solid ${variant === 'inverse' ? colors.soap300 : inputColors.border}`,
 }));

package/dist/es6/popup/lib/Popper.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import * as PopperJS from '@popperjs/core';
 export declare type Placement = `${PopperJS.Placement}`;
 export declare type PopperOptions = PopperJS.Options;
+export declare const defaultFallbackPlacements: Placement[];
 export interface PopperProps {
     /**
      * The reference element used to position the Popper. Popper content will try to follow the
@@ -39,6 +40,13 @@ export interface PopperProps {
      * @default bottom
      */
     placement?: Placement;
+    /**
+     * Define fallback placements by providing a list of {@link Placement} in array (in order of preference).
+     * The default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial
+     * and opposite placements are not available, the fallback placements will be in use. Use an empty array to
+     * disable the fallback placements.
+     */
+    fallbackPlacements?: Placement[];
     /**
      * A callback function that will be called whenever PopperJS chooses a placement that is different
      * from the provided `placement` preference. If a `placement` preference doesn't fit, PopperJS

package/dist/es6/popup/lib/Popper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;AAChD,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAK7C,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}
+{"version":3,"file":"Popper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/Popper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;AAChD,oBAAY,aAAa,GAAG,QAAQ,CAAC,OAAO,CAAC;AAC7C,eAAO,MAAM,yBAAyB,EAAE,SAAS,EAAuC,CAAC;AAMzF,MAAM,WAAW,WAAW;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,GAAG,OAAO,GAAG,IAAI,CAAC;IAC1D;;;;;OAKG;IACH,QAAQ,EAAE,CAAC,CAAC,KAAK,EAAE;QAAC,SAAS,EAAE,SAAS,CAAA;KAAC,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IACjF;;;;;;OAMG;IACH,mBAAmB,CAAC,EAAE,MAAM,OAAO,CAAC;IACpC;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IACvC;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;CAClD;AAED;;;;;;;;;;;;;;GAcG;AACH,eAAO,MAAM,MAAM,oFAQlB,CAAC"}