@workday/canvas-kit-react 10.0.0-alpha.446-next.0 → 10.0.0-alpha.449-next.0

package/dist/es6/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/es6/tokens/index.js

@@ -2,7 +2,7 @@ import { buttonColors, chartingColorOffsets, chartingColors, colors, commonColor
 import { borderRadius } from './lib/radius';
 import { BrandingColor } from './lib/colors.types';
 import { depth } from './lib/depth';
-import { space, spaceNumbers, } from './lib/space';
+import { space, spaceNumbers } from './lib/space';
 import { type, fontFamily, monoFontFamily, } from './lib/type';
 export const canvas = {
     buttonColors,

package/dist/es6/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/es6/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/es6/tokens/lib/depth.js

@@ -25,21 +25,21 @@ export const 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/es6/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/es6/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/es6/tokens/lib/space.js

@@ -1,32 +1,70 @@
-/** 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 const 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        |
+ *
  */
 export const 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/es6/tooltip/lib/TooltipContainer.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.0.0-alpha.446-next.0",
+  "version": "10.0.0-alpha.449-next.0",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -49,7 +49,7 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.446-next.0",
+    "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.449-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.8",
     "chroma-js": "^2.1.0",
@@ -66,5 +66,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "7202c6904b61f4ef6d4a221276faa1e13062c8e3"
+  "gitHead": "aec7d64ecbea44ef7b474ec988885000069ff000"
 }

package/popup/lib/Popper.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as PopperJS from '@popperjs/core';
+import { Placement as PopperJSPlacement, Options, Instance, Modifier, createPopper } from '@popperjs/core';
 
-export type Placement = `${PopperJS.Placement}`; // Use template literals to make documentation list them out
-export type PopperOptions = PopperJS.Options;
+export type Placement = `${PopperJSPlacement}`; // Use template literals to make documentation list them out
+export type PopperOptions = Options;
 export const defaultFallbackPlacements: Placement[] = ['top', 'right', 'bottom', 'left'];
 
 import {usePopupStack} from './hooks';
@@ -74,7 +74,7 @@ export interface PopperProps {
    * Reference to the PopperJS instance. Useful for making direct method calls on the popper
    * instance like `update`.
    */
-  popperInstanceRef?: React.Ref<PopperJS.Instance>;
+  popperInstanceRef?: React.Ref<Instance>;
 }
 
 /**
@@ -142,7 +142,7 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
     const placementRef = React.useRef(popperPlacement);
     placementRef.current = placement;
 
-    const placementModifier = React.useMemo((): PopperJS.Modifier<any, any> => {
+    const placementModifier = React.useMemo((): Modifier<any, any> => {
       return {
         name: 'setPlacement',
         enabled: true,
@@ -169,7 +169,7 @@ const OpenPopper = React.forwardRef<HTMLDivElement, PopperProps>(
       }
 
       if (stackRef.current) {
-        const instance = PopperJS.createPopper(anchorEl, stackRef.current, {
+        const instance = createPopper(anchorEl, stackRef.current, {
           placement: popperPlacement,
           ...popperOptions,
           modifiers: [

package/popup/lib/fallbackPlacements.ts

@@ -1,6 +1,14 @@
-import * as PopperJS from '@popperjs/core';
+import {
+  Placement as PopperJSPlacement,
+  placements,
+  State,
+  detectOverflow,
+  SideObject,
+  Modifier,
+  ModifierArguments,
+} from '@popperjs/core';
 
-export type Placement = PopperJS.Placement; // Use template literals to make documentation list them out
+export type Placement = PopperJSPlacement; // Use template literals to make documentation list them out
 
 const getOppositePlacement = (popperPlacement: Placement): Placement => {
   const [first, second] = popperPlacement.split('-');
@@ -23,7 +31,7 @@ const getOppositePlacement = (popperPlacement: Placement): Placement => {
   }
   if (second) {
     oppositePlacement =
-      PopperJS.placements.find(placement => placement.includes(`${oppositePlacement}-${second}`)) ??
+      placements.find(placement => placement.includes(`${oppositePlacement}-${second}`)) ??
       oppositePlacement;
   }
   return oppositePlacement;
@@ -31,7 +39,7 @@ const getOppositePlacement = (popperPlacement: Placement): Placement => {
 
 const choseAvailablePlacement = (
   placements: Placement[],
-  state: PopperJS.State,
+  state: State,
   preferredPlacement: Placement
 ): Placement => {
   if (placements.length === 0 || placements[0].split('-')[0] === 'auto') {
@@ -39,7 +47,7 @@ const choseAvailablePlacement = (
   }
 
   const {reference, popper} = state.rects;
-  const overflow = PopperJS.detectOverflow({...state, placement: placements[0]});
+  const overflow = detectOverflow({...state, placement: placements[0]});
   const direction = /left|right/.test(placements[0].split('-')[0]) ? 'horizontal' : 'vertical';
   const isOverflowed =
     (overflow.top > 0 || overflow.bottom > 0 || overflow.left > 0 || overflow.right > 0) &&
@@ -48,7 +56,7 @@ const choseAvailablePlacement = (
         popper.height / 2 - overflow.bottom < reference.height
       : popper.width - overflow.left < reference.width ||
         popper.width - overflow.right < reference.width);
-  const key = placements[0].split('-')[0] as keyof PopperJS.SideObject;
+  const key = placements[0].split('-')[0] as keyof SideObject;
 
   if (!isOverflowed && overflow[key] <= 0) {
     return placements[0];
@@ -63,14 +71,14 @@ export type Options = {
 
 const name = 'fallbackModifier';
 
-export const fallbackPlacementsModifier: PopperJS.Modifier<typeof name, Options> = {
+export const fallbackPlacementsModifier: Modifier<typeof name, Options> = {
   name: name,
   enabled: true,
   phase: 'main',
   data: {
     _skip: false,
   },
-  fn({state, options}: PopperJS.ModifierArguments<Options>) {
+  fn({state, options}: ModifierArguments<Options>) {
     const preferredPlacement = state.options.placement;
     const {fallbackPlacements} = options;
 

package/radio/lib/Radio.tsx

@@ -8,7 +8,13 @@ import {
   Themeable,
   useUniqueId,
 } 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 {LabelText} from '@workday/canvas-kit-react/text';
 
 export interface RadioProps extends Themeable {
@@ -47,13 +53,13 @@ export interface RadioProps extends Themeable {
   variant?: 'inverse' | undefined;
 }
 
-const radioBorderRadius = 9;
-const radioDot = 8;
-const radioHeight = 18;
-const radioTapArea = spaceNumbers.m;
+const radioBorderRadius = `${spaceNumbers.xxs + 0.0625}rem`;
+const radioDot = space.xxs;
+const radioHeight = (spaceNumbers.xl - spaceNumbers.xxxs) / 2;
+const radioTapArea = space.m;
 const radioContainerHeight = radioTapArea;
-const radioLabelDistance = spaceNumbers.xs;
-const radioWidth = 18;
+const radioLabelDistance = space.xs;
+const radioWidth = radioHeight;
 const rippleRadius = (spaceNumbers.l - radioWidth) / 2;
 
 const RadioContainer = styled('div')({
@@ -70,17 +76,17 @@ const RadioContainer = styled('div')({
  */
 const RadioInputWrapper = styled('div')<Pick<RadioProps, 'disabled'>>({
   display: 'flex',
-  height: radioHeight,
-  width: radioWidth,
+  height: `${radioHeight}rem`,
+  width: `${radioWidth}rem`,
 });
 
 const RadioRipple = styled('span')<Pick<RadioProps, 'disabled' | 'variant'>>(
   {
     borderRadius: borderRadius.circle,
     boxShadow: `0 0 0 0 ${colors.soap200}`,
-    height: radioHeight,
+    height: `${radioHeight}rem`,
     transition: 'box-shadow 150ms ease-out',
-    width: radioWidth,
+    width: `${radioWidth}rem`,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
   },
@@ -129,7 +135,7 @@ const RadioInput = styled('input')<RadioProps & StyledType>(
     // `span:first-of-type` refers to `RadioRipple`, the light grey
     // element that animates around the component on hover
     '&: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}`,
     },
 
     // `div:first-of-type` refers to the `RadioBackground`, the visual facade of the
@@ -212,13 +218,13 @@ const RadioBackground = styled('div')<RadioProps>(
     borderWidth: '1px',
     boxSizing: 'border-box',
     display: 'flex',
-    height: radioHeight,
+    height: `${radioHeight}rem`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: radioWidth,
+    width: `${radioWidth}rem`,
   },
   ({
     checked,

package/select/lib/Select.tsx

@@ -8,14 +8,7 @@ import {
   styled,
   Themeable,
 } from '@workday/canvas-kit-react/common';
-import {
-  colors,
-  borderRadius,
-  inputColors,
-  spaceNumbers,
-  type,
-  space,
-} from '@workday/canvas-kit-react/tokens';
+import {colors, borderRadius, inputColors, type, space} from '@workday/canvas-kit-react/tokens';
 import {caretDownSmallIcon} from '@workday/canvas-system-icons-web';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {SelectOption} from './SelectOption';
@@ -55,7 +48,7 @@ const StyledSelect = styled('select')<SelectProps & StyledType>(
     height: space.xl,
     minWidth: 280,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: spaceNumbers.xxs,
+    padding: space.xxs,
     margin: 0, // Fix Safari
     MozAppearance: 'none', // FF bugfix: hide arrow so it doesn't show under ours
     WebkitAppearance: 'none',

package/table/lib/TableRow.tsx

@@ -100,7 +100,7 @@ const StyledTableRow = styled('tr')<TableRowProps>(
       fontSize: 13,
       borderRight: cellBorder,
       borderBottom: cellBorder,
-      height: spaceNumbers.xl + spaceNumbers.xxs,
+      height: `${spaceNumbers.xl + spaceNumbers.xxs}rem`,
       boxSizing: 'border-box',
       transition: 'background-color 0.2s',
     },

package/text-area/lib/TextArea.tsx

@@ -8,7 +8,13 @@ import {
   styled,
   Themeable,
 } from '@workday/canvas-kit-react/common';
-import {borderRadius, inputColors, spaceNumbers, type} from '@workday/canvas-kit-react/tokens';
+import {
+  borderRadius,
+  inputColors,
+  space,
+  spaceNumbers,
+  type,
+} from '@workday/canvas-kit-react/tokens';
 
 export interface TextAreaProps extends Themeable, GrowthBehavior {
   /**
@@ -59,10 +65,10 @@ const StyledTextArea = styled('textarea')<TextAreaProps & StyledType>(
     backgroundColor: inputColors.background,
     borderRadius: borderRadius.m,
     boxSizing: 'border-box',
-    minHeight: 64,
-    minWidth: 280,
+    minHeight: space.xxl,
+    minWidth: `${spaceNumbers.xxxl * 3 + spaceNumbers.xl}rem`,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: spaceNumbers.xxs, // Compensate for border
+    padding: space.xxs, // Compensate for border
     margin: 0, // Fix Safari
     '&::webkit-resizer': {
       display: 'none',