@workday/canvas-kit-react 10.0.0-alpha.539-next.0 → 10.0.0-alpha.540-next.0

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,EAEV,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;;CA2EnB,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,EAEV,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;AAkPD,eAAO,MAAM,QAAQ;;CA2EnB,CAAC"}

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

@@ -1,19 +1,13 @@
 import * as React from 'react';
 import { createComponent, ErrorType, useUniqueId, focusRing, mouseFocusBehavior, getErrorColors, styled, useTheme, useLocalRef, } from '@workday/canvas-kit-react/common';
-import { borderRadius, colors, inputColors, space, spaceNumbers, } from '@workday/canvas-kit-react/tokens';
+import { borderRadius, colors, inputColors, space } 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 = (spaceNumbers.xl - spaceNumbers.xxxs) / 2;
-const checkboxTapArea = space.m;
-const checkboxContainerHeight = checkboxTapArea;
-const checkboxLabelDistance = `${spaceNumbers.xs}rem`;
-const checkboxWidth = checkboxHeight;
-const rippleRadius = (spaceNumbers.l - checkboxWidth) / 2;
 const CheckboxContainer = styled('div')({
     display: 'flex',
     alignItems: 'center',
-    minHeight: checkboxContainerHeight,
+    minHeight: space.m,
     position: 'relative',
 });
 /**
@@ -23,17 +17,17 @@ const CheckboxContainer = styled('div')({
  */
 const CheckboxInputWrapper = styled('div')({
     display: 'flex',
-    height: `${checkboxHeight}rem`,
-    minWidth: `${checkboxWidth}rem`,
+    height: `calc(${space.s} + 2px)`,
+    minWidth: `calc(${space.s} + 2px)`,
     marginTop: '3px',
     alignSelf: 'flex-start',
 });
 const CheckboxRipple = styled('span')({
     borderRadius: borderRadius.circle,
     boxShadow: `0 0 0 0 ${colors.soap200}`,
-    height: `${checkboxHeight}rem`,
+    height: `calc(${space.s} + 2px)`,
     transition: 'box-shadow 150ms ease-out',
-    width: `${checkboxWidth}rem`,
+    width: `calc(${space.s} + 2px)`,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
 }, ({ variant }) => ({
@@ -45,8 +39,8 @@ const CheckboxRipple = styled('span')({
  */
 const CheckboxInput = styled('input')(({ theme: { canvas: { palette: { primary: themePrimary, common: { focusOutline: themeFocusOutline }, }, }, }, variant, }) => ({
     borderRadius: borderRadius.s,
-    width: checkboxTapArea,
-    height: checkboxTapArea,
+    width: space.m,
+    height: space.m,
     margin: 0,
     marginTop: '-3px',
     marginLeft: '-3px',
@@ -124,7 +118,9 @@ const CheckboxInput = styled('input')(({ theme: { canvas: { palette: { primary:
     }),
 }), ({ disabled }) => ({
     '&:hover ~ span:first-of-type': {
-        boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}rem ${colors.soap200}`,
+        boxShadow: disabled
+            ? undefined
+            : `0 0 0 calc((${space.l} - (${space.s} + 2px)) / 2) ${colors.soap200}`,
     },
 }), ({ theme, error, variant }) => {
     const errorColors = getErrorColors(error, theme);
@@ -167,13 +163,13 @@ const CheckboxBackground = styled('div')({
     borderRadius: borderRadius.s,
     boxSizing: 'border-box',
     display: 'flex',
-    height: `${checkboxHeight}rem`,
+    height: `calc(${space.s} + 2px)`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: `${checkboxWidth}rem`,
+    width: `calc(${space.s} + 2px)`,
 }, ({ variant }) => ({
     border: `1px solid ${variant === 'inverse' ? colors.soap300 : inputColors.border}`,
 }));
@@ -226,7 +222,7 @@ export const Checkbox = createComponent('input')({
                     React.createElement(CheckboxCheck, { checked: checked, indeterminate: indeterminate }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : checked ? (React.createElement(SystemIcon, { icon: checkSmallIcon, color: variant === 'inverse'
                             ? theme.canvas.palette.primary.main
                             : theme.canvas.palette.primary.contrast })) : null))),
-            label && (React.createElement(LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: checkboxLabelDistance, cursor: "pointer" }, label))));
+            label && (React.createElement(LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: space.xs, cursor: "pointer" }, label))));
     },
     subComponents: {
         ErrorType,

package/dist/es6/radio/lib/Radio.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../radio/lib/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAU1C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C;;;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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;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,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAmOD,eAAO,MAAM,KAAK,kFAqDhB,CAAC"}
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../radio/lib/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAI1C,MAAM,WAAW,UAAW,SAAQ,SAAS;IAC3C;;;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,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;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,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8ND,eAAO,MAAM,KAAK,kFAgDhB,CAAC"}

package/dist/es6/radio/lib/Radio.js

@@ -1,19 +1,12 @@
 import * as React from 'react';
 import { createComponent, focusRing, mouseFocusBehavior, styled, useUniqueId, } from '@workday/canvas-kit-react/common';
-import { borderRadius, colors, inputColors, space, spaceNumbers, } from '@workday/canvas-kit-react/tokens';
+import { borderRadius, colors, inputColors, space } from '@workday/canvas-kit-react/tokens';
 import { LabelText } from '@workday/canvas-kit-react/text';
-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 = space.xs;
-const radioWidth = radioHeight;
-const rippleRadius = (spaceNumbers.l - radioWidth) / 2;
+const radioBorderRadius = 9;
 const RadioContainer = styled('div')({
     display: 'flex',
     alignItems: 'center',
-    minHeight: radioContainerHeight,
+    minHeight: space.m,
     position: 'relative',
 });
 /**
@@ -23,24 +16,24 @@ const RadioContainer = styled('div')({
  */
 const RadioInputWrapper = styled('div')({
     display: 'flex',
-    height: `${radioHeight}rem`,
-    width: `${radioWidth}rem`,
+    height: `calc(${space.s} + 2px)`,
+    width: `calc(${space.s} + 2px)`,
 });
 const RadioRipple = styled('span')({
     borderRadius: borderRadius.circle,
     boxShadow: `0 0 0 0 ${colors.soap200}`,
-    height: `${radioHeight}rem`,
+    height: `calc(${space.s} + 2px)`,
     transition: 'box-shadow 150ms ease-out',
-    width: `${radioWidth}rem`,
+    width: `calc(${space.s} + 2px)`,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
 }, ({ variant }) => ({
     opacity: variant === 'inverse' ? '0.4' : '1',
 }));
 const RadioInput = styled('input')({
-    borderRadius: radioBorderRadius,
-    width: radioTapArea,
-    height: radioTapArea,
+    borderRadius: `calc(${space.xxs} + 1px)`,
+    width: space.m,
+    height: space.m,
     margin: 0,
     marginTop: '-3px',
     marginLeft: '-3px',
@@ -62,7 +55,9 @@ const RadioInput = styled('input')({
     // `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}rem ${colors.soap200}`,
+        boxShadow: disabled
+            ? undefined
+            : `0 0 0 calc((${space.l} - (${space.s} + 2px)) / 2) ${colors.soap200}`,
     },
     // `div:first-of-type` refers to the `RadioBackground`, the visual facade of the
     // input (which is visually hidden)
@@ -141,13 +136,13 @@ const RadioBackground = styled('div')({
     borderWidth: '1px',
     boxSizing: 'border-box',
     display: 'flex',
-    height: `${radioHeight}rem`,
+    height: `calc(${space.s} + 2px)`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: `${radioWidth}rem`,
+    width: `calc(${space.s} + 2px)`,
 }, ({ checked, disabled, variant, theme: { canvas: { palette: { primary: themePrimary }, }, }, }) => ({
     borderColor: checked
         ? variant === 'inverse'
@@ -171,10 +166,10 @@ const RadioCheck = styled('div')({
     borderRadius: radioBorderRadius,
     display: 'flex',
     flexDirection: 'column',
-    height: radioDot,
+    height: space.xxs,
     pointerEvents: 'none',
     transition: 'transform 200ms ease, opacity 200ms ease',
-    width: radioDot,
+    width: space.xxs,
 }, ({ theme, variant }) => ({
     backgroundColor: variant === 'inverse'
         ? theme.canvas.palette.primary.main
@@ -193,6 +188,6 @@ export const Radio = createComponent('input')({
                 React.createElement(RadioRipple, { variant: variant }),
                 React.createElement(RadioBackground, { checked: checked, disabled: disabled, variant: variant },
                     React.createElement(RadioCheck, { checked: checked, variant: variant }))),
-            label && (React.createElement(LabelText, { paddingLeft: radioLabelDistance, htmlFor: inputId, disabled: disabled, variant: variant }, label))));
+            label && (React.createElement(LabelText, { paddingLeft: space.xs, htmlFor: inputId, disabled: disabled, variant: variant }, label))));
     },
 });

package/dist/es6/table/lib/Table.d.ts

@@ -3,8 +3,7 @@ export declare const borderWidth = 1;
 export declare const borderColor: string;
 export declare const cellBorder: string;
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
- * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
  */
 export declare class Table extends React.Component<React.TableHTMLAttributes<HTMLTableElement>> {
     render(): JSX.Element;

package/dist/es6/table/lib/Table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../table/lib/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,WAAW,QAAiB,CAAC;AAC1C,eAAO,MAAM,UAAU,QAA0C,CAAC;AAYlE;;;GAGG;AACH,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC9E,MAAM;CAKd"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../../table/lib/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,eAAO,MAAM,WAAW,IAAI,CAAC;AAC7B,eAAO,MAAM,WAAW,QAAiB,CAAC;AAC1C,eAAO,MAAM,UAAU,QAA0C,CAAC;AAYlE;;GAEG;AACH,qBAAa,KAAM,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC9E,MAAM;CAKd"}

package/dist/es6/table/lib/Table.js

@@ -14,8 +14,7 @@ const TableComponent = styled('table')(type.levels.subtext.large, {
     },
 });
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
- * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
  */
 export class Table extends React.Component {
     render() {

package/dist/es6/table/lib/TableRow.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { StyledType } from '@workday/canvas-kit-react/common';
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
- * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
  */
 export declare enum TableRowState {
     Error = 0,
@@ -13,8 +12,7 @@ export declare enum TableRowState {
     Selected = 5
 }
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
- * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
  */
 export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
     /**
@@ -28,8 +26,7 @@ export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement>
     header?: boolean;
 }
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
- * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
  */
 export declare const TableRow: import("@workday/canvas-kit-react/common").ElementComponent<"tr", TableRowProps & StyledType> & {
     State: typeof TableRowState;

package/dist/es6/table/lib/TableRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAkB,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAG7E;;;GAGG;AACH,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,KAAK,IAAA;IACL,UAAU,IAAA;IACV,UAAU,IAAA;IACV,KAAK,IAAA;IACL,QAAQ,IAAA;CACT;AAED;;;GAGG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAuKD;;;GAGG;AACH,eAAO,MAAM,QAAQ;;CAgBnB,CAAC"}
+{"version":3,"file":"TableRow.d.ts","sourceRoot":"","sources":["../../../../table/lib/TableRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAkB,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAG7E;;GAEG;AACH,oBAAY,aAAa;IACvB,KAAK,IAAA;IACL,KAAK,IAAA;IACL,UAAU,IAAA;IACV,UAAU,IAAA;IACV,KAAK,IAAA;IACL,QAAQ,IAAA;CACT;AAED;;GAEG;AACH,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,mBAAmB,CAAC;IAC9E;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAuKD;;GAEG;AACH,eAAO,MAAM,QAAQ;;CAgBnB,CAAC"}

package/dist/es6/table/lib/TableRow.js

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { rgba } from 'polished';
-import { colors, space, spaceNumbers, statusColors } from '@workday/canvas-kit-react/tokens';
+import { colors, space, statusColors } from '@workday/canvas-kit-react/tokens';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { borderColor, borderWidth, cellBorder } from './Table';
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
- * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
  */
 export var TableRowState;
 (function (TableRowState) {
@@ -81,7 +80,7 @@ const StyledTableRow = styled('tr')({
         fontSize: 13,
         borderRight: cellBorder,
         borderBottom: cellBorder,
-        height: `${spaceNumbers.xl + spaceNumbers.xxs}rem`,
+        height: `calc(${space.xl} + ${space.xxs})`,
         boxSizing: 'border-box',
         transition: 'background-color 0.2s',
     },
@@ -169,8 +168,7 @@ const StyledTableRow = styled('tr')({
     }
 });
 /**
- * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version.
- * Please consider using [`Table in Preview`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) instead.
+ * @deprecated ⚠️ `Table` has been deprecated and will be removed in a future major version. Please use [`Table`](https://workday.github.io/canvas-kit/?path=/docs/preview-table--basic) in Preview instead.
  */
 export const TableRow = createComponent('tr')({
     displayName: 'TableRow',

package/dist/es6/text-area/lib/TextArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,cAAc,EACd,SAAS,EAGT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAS1C,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC/D;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,QAAQ,aAAa;CACtB;AA8CD,eAAO,MAAM,QAAQ;;;CAWnB,CAAC"}
+{"version":3,"file":"TextArea.d.ts","sourceRoot":"","sources":["../../../../text-area/lib/TextArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,cAAc,EACd,SAAS,EAGT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAG1C,MAAM,WAAW,aAAc,SAAQ,SAAS,EAAE,cAAc;IAC9D;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,mBAAmB,CAAC,KAAK,IAAI,CAAC;IAC/D;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,uBAAuB,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,GAAG,CAAC;CACb;AAED,oBAAY,uBAAuB;IACjC,IAAI,SAAS;IACb,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,QAAQ,aAAa;CACtB;AA8CD,eAAO,MAAM,QAAQ;;;CAWnB,CAAC"}

package/dist/es6/text-area/lib/TextArea.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createComponent, ErrorType, errorRing, styled, } from '@workday/canvas-kit-react/common';
-import { borderRadius, inputColors, space, spaceNumbers, type, } from '@workday/canvas-kit-react/tokens';
+import { borderRadius, inputColors, space, type } from '@workday/canvas-kit-react/tokens';
 export var TextAreaResizeDirection;
 (function (TextAreaResizeDirection) {
     TextAreaResizeDirection["None"] = "none";
@@ -16,7 +16,7 @@ const StyledTextArea = styled('textarea')(({ theme, error }) => ({
     borderRadius: borderRadius.m,
     boxSizing: 'border-box',
     minHeight: space.xxl,
-    minWidth: `${spaceNumbers.xxxl * 3 + spaceNumbers.xl}rem`,
+    minWidth: `calc((${space.xxxl} * 3) + ${space.xl})`,
     transition: '0.2s box-shadow, 0.2s border-color',
     padding: space.xxs,
     margin: 0,

package/dist/es6/text-input/lib/TextInput.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createComponent, ErrorType, errorRing, styled, } from '@workday/canvas-kit-react/common';
-import { borderRadius, inputColors, spaceNumbers, type } from '@workday/canvas-kit-react/tokens';
+import { borderRadius, inputColors, space, type } from '@workday/canvas-kit-react/tokens';
 const StyledTextInput = styled('input')({
     ...type.levels.subtext.large,
     border: `1px solid ${inputColors.border}`,
@@ -10,7 +10,7 @@ const StyledTextInput = styled('input')({
     boxSizing: 'border-box',
     height: 40,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: `${spaceNumbers.xxs}rem`,
+    padding: space.xxs,
     margin: 0,
     '&::placeholder': {
         color: inputColors.placeholder,

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

@@ -37,46 +37,59 @@ export declare type CanvasSpaceValues = ValueOf<CanvasSpace>;
  *
  * */
 export declare const space: CanvasSpace;
-/** Type for the `spaceNumbers` object with keys and numeric rem values (numbers) */
+/**
+ * Example using `space` with calc instead of deprecated `spaceNumbers`.
+ *
+ * ```tsx
+ *  // With deprecated `spaceNumbers`
+ * {
+ *  paddingLeft: spaceNumbers.xl + 2 // 42px
+ * }
+ * ```
+ *
+ * ```tsx
+ * // With `rem` based `space` tokens
+ * {
+ *  padding: `calc(${space.xl} + 2px)` // 42px
+ * }
+ * ```
+ *
+ * @deprecated ⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
+ */
 export declare type CanvasSpaceNumbers = {
     zero: 0;
-    xxxs: 0.25;
-    xxs: 0.5;
-    xs: 0.75;
-    s: 1;
-    m: 1.5;
-    l: 2;
-    xl: 2.5;
-    xxl: 4;
-    xxxl: 5;
+    xxxs: 4;
+    xxs: 8;
+    xs: 12;
+    s: 16;
+    m: 24;
+    l: 32;
+    xl: 40;
+    xxl: 64;
+    xxxl: 80;
 };
-/** The numeric rem values for CanvasSpaceNumbers (numbers) */
+/** The numeric rem values for CanvasSpaceNumbers (numbers)
+ * @deprecated ⚠️ `CanvasSpaceNumberValues` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
+ */
 export declare type CanvasSpaceNumberValues = ValueOf<CanvasSpaceNumbers>;
 /**
- * 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
+ * Example using `space` with calc instead of deprecated `spaceNumbers`.
+ *
  * ```tsx
- * const buttonPaddingLeft = `${spaceNumbers.s + iconSize}rem`;
+ *  // With deprecated `spaceNumbers`
+ * {
+ *  paddingLeft: spaceNumbers.xl + 2 // 42px
+ * }
  * ```
  *
- * 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        |
+ * ```tsx
+ * // With `rem` based `space` tokens
+ * {
+ *  padding: `calc(${space.xl} + 2px)` // 42px
+ * }
+ * ```
  *
+ * @deprecated ⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
  */
 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,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"}
+{"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;;;;;;;;;;;;;;;;;;GAkBG;AACH,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;;GAEG;AACH,oBAAY,uBAAuB,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC;AAElE;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,YAAY,EAAE,kBAW1B,CAAC"}

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

@@ -31,40 +31,33 @@ export const space = {
     xxxl: '5rem',
 };
 /**
- * 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
+ * Example using `space` with calc instead of deprecated `spaceNumbers`.
+ *
  * ```tsx
- * const buttonPaddingLeft = `${spaceNumbers.s + iconSize}rem`;
+ *  // With deprecated `spaceNumbers`
+ * {
+ *  paddingLeft: spaceNumbers.xl + 2 // 42px
+ * }
  * ```
  *
- * 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        |
+ * ```tsx
+ * // With `rem` based `space` tokens
+ * {
+ *  padding: `calc(${space.xl} + 2px)` // 42px
+ * }
+ * ```
  *
+ * @deprecated ⚠️ `spaceNumbers` has been deprecated in a future major version. Please use our `rem` based [`space`](https://workday.github.io/canvas-kit/?path=/docs/tokens--space) tokens. In the case where you need to calculate a value, use [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/CSS/calc).
  */
 export const spaceNumbers = {
     zero: 0,
-    xxxs: 0.25,
-    xxs: 0.5,
-    xs: 0.75,
-    s: 1,
-    m: 1.5,
-    l: 2,
-    xl: 2.5,
-    xxl: 4,
-    xxxl: 5,
+    xxxs: 4,
+    xxs: 8,
+    xs: 12,
+    s: 16,
+    m: 24,
+    l: 32,
+    xl: 40,
+    xxl: 64,
+    xxxl: 80,
 };

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

@@ -1,6 +1,6 @@
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
-import { borderRadius, colors, space, spaceNumbers, type } from '@workday/canvas-kit-react/tokens';
+import { borderRadius, colors, space, type } from '@workday/canvas-kit-react/tokens';
 import { getTranslateFromOrigin } from '@workday/canvas-kit-react/common';
 const tooltipAnimation = (transformOrigin) => {
     const translate = getTranslateFromOrigin(transformOrigin, space.xxxs);
@@ -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.s - 0.125}rem`,
+        padding: `calc(${space.s} - 0.125rem)`,
         ':before': {
-            margin: `${spaceNumbers.xxxs + 0.125}rem`,
+            margin: `calc(${space.xxxs} + 0.125rem)`,
         },
     },
     // Hide tooltip when the reference element is either clipped or fully hidden

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "10.0.0-alpha.539-next.0",
+  "version": "10.0.0-alpha.540-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,8 +49,8 @@
     "@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.539-next.0",
-    "@workday/canvas-kit-styling": "^10.0.0-alpha.539-next.0",
+    "@workday/canvas-kit-popup-stack": "^10.0.0-alpha.540-next.0",
+    "@workday/canvas-kit-styling": "^10.0.0-alpha.540-next.0",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "0.1.6",
     "@workday/design-assets-types": "^0.2.8",
@@ -68,5 +68,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "9a4ff36a2264964c41a928b8eca5adb75b8ac056"
+  "gitHead": "fc8abdabca2c55aad11f09a8f05570bd55aa3478"
 }