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

package/checkbox/lib/Checkbox.tsx

@@ -12,13 +12,7 @@ import {
   Themeable,
   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';
@@ -67,17 +61,10 @@ export interface CheckboxProps extends Themeable {
   variant?: 'inverse' | undefined;
 }
 
-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',
 });
 
@@ -88,8 +75,8 @@ const CheckboxContainer = styled('div')({
  */
 const CheckboxInputWrapper = styled('div')<Pick<CheckboxProps, 'disabled'>>({
   display: 'flex',
-  height: `${checkboxHeight}rem`,
-  minWidth: `${checkboxWidth}rem`,
+  height: `calc(${space.s} + 2px)`,
+  minWidth: `calc(${space.s} + 2px)`,
   marginTop: '3px',
   alignSelf: 'flex-start',
 });
@@ -98,9 +85,9 @@ const CheckboxRipple = styled('span')<Pick<CheckboxProps, 'disabled' | 'variant'
   {
     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
   },
@@ -126,8 +113,8 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
     variant,
   }) => ({
     borderRadius: borderRadius.s,
-    width: checkboxTapArea,
-    height: checkboxTapArea,
+    width: space.m,
+    height: space.m,
     margin: 0,
     marginTop: '-3px',
     marginLeft: '-3px',
@@ -139,11 +126,12 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
     },
 
     // States
-    '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active': {
-      '~ div:first-of-type': {
-        borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
+    '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active':
+      {
+        '~ div:first-of-type': {
+          borderColor: variant === 'inverse' ? colors.soap300 : inputColors.hoverBorder,
+        },
       },
-    },
     '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
       borderColor: variant === 'inverse' ? colors.soap300 : themePrimary.main,
       backgroundColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main,
@@ -210,7 +198,9 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
   }),
   ({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}) => {
@@ -226,11 +216,12 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
           variant === 'inverse' ? `1px solid ${colors.soap300}` : `1px solid ${errorColors.inner}`,
         boxShadow: `0 0 0 1px ${errorColors.inner}, 0 0 0 2px ${errorColors.outer}`,
       },
-      '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active': {
-        '~ div:first-of-type': {
-          borderColor: variant === 'inverse' ? `1px solid ${colors.soap300}` : errorColors.inner,
+      '&:not(:checked):not(:indeterminate):not(:disabled):not(:focus):hover, &:not(:checked):not(:indeterminate):not(:disabled):active':
+        {
+          '~ div:first-of-type': {
+            borderColor: variant === 'inverse' ? `1px solid ${colors.soap300}` : errorColors.inner,
+          },
         },
-      },
       '&:checked ~ div:first-of-type, &:indeterminate ~ div:first-of-type': {
         borderColor: variant === 'inverse' ? colors.soap300 : theme.canvas.palette.primary.main,
         boxShadow: `
@@ -260,13 +251,13 @@ const CheckboxBackground = styled('div')<CheckboxProps>(
     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}`,
@@ -373,7 +364,7 @@ export const Checkbox = createComponent('input')({
             htmlFor={inputId}
             disabled={disabled}
             variant={variant}
-            paddingInlineStart={checkboxLabelDistance}
+            paddingInlineStart={space.xs}
             cursor="pointer"
           >
             {label}

package/dist/commonjs/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/commonjs/checkbox/lib/Checkbox.js

@@ -26,16 +26,10 @@ const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const icon_1 = require("@workday/canvas-kit-react/icon");
 const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 const text_1 = require("@workday/canvas-kit-react/text");
-const checkboxHeight = (tokens_1.spaceNumbers.xl - tokens_1.spaceNumbers.xxxs) / 2;
-const checkboxTapArea = tokens_1.space.m;
-const checkboxContainerHeight = checkboxTapArea;
-const checkboxLabelDistance = `${tokens_1.spaceNumbers.xs}rem`;
-const checkboxWidth = checkboxHeight;
-const rippleRadius = (tokens_1.spaceNumbers.l - checkboxWidth) / 2;
 const CheckboxContainer = common_1.styled('div')({
     display: 'flex',
     alignItems: 'center',
-    minHeight: checkboxContainerHeight,
+    minHeight: tokens_1.space.m,
     position: 'relative',
 });
 /**
@@ -45,17 +39,17 @@ const CheckboxContainer = common_1.styled('div')({
  */
 const CheckboxInputWrapper = common_1.styled('div')({
     display: 'flex',
-    height: `${checkboxHeight}rem`,
-    minWidth: `${checkboxWidth}rem`,
+    height: `calc(${tokens_1.space.s} + 2px)`,
+    minWidth: `calc(${tokens_1.space.s} + 2px)`,
     marginTop: '3px',
     alignSelf: 'flex-start',
 });
 const CheckboxRipple = common_1.styled('span')({
     borderRadius: tokens_1.borderRadius.circle,
     boxShadow: `0 0 0 0 ${tokens_1.colors.soap200}`,
-    height: `${checkboxHeight}rem`,
+    height: `calc(${tokens_1.space.s} + 2px)`,
     transition: 'box-shadow 150ms ease-out',
-    width: `${checkboxWidth}rem`,
+    width: `calc(${tokens_1.space.s} + 2px)`,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
 }, ({ variant }) => ({
@@ -67,8 +61,8 @@ const CheckboxRipple = common_1.styled('span')({
  */
 const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: { primary: themePrimary, common: { focusOutline: themeFocusOutline }, }, }, }, variant, }) => ({
     borderRadius: tokens_1.borderRadius.s,
-    width: checkboxTapArea,
-    height: checkboxTapArea,
+    width: tokens_1.space.m,
+    height: tokens_1.space.m,
     margin: 0,
     marginTop: '-3px',
     marginLeft: '-3px',
@@ -146,7 +140,9 @@ const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: {
     }),
 }), ({ disabled }) => ({
     '&:hover ~ span:first-of-type': {
-        boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}rem ${tokens_1.colors.soap200}`,
+        boxShadow: disabled
+            ? undefined
+            : `0 0 0 calc((${tokens_1.space.l} - (${tokens_1.space.s} + 2px)) / 2) ${tokens_1.colors.soap200}`,
     },
 }), ({ theme, error, variant }) => {
     const errorColors = common_1.getErrorColors(error, theme);
@@ -189,13 +185,13 @@ const CheckboxBackground = common_1.styled('div')({
     borderRadius: tokens_1.borderRadius.s,
     boxSizing: 'border-box',
     display: 'flex',
-    height: `${checkboxHeight}rem`,
+    height: `calc(${tokens_1.space.s} + 2px)`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: `${checkboxWidth}rem`,
+    width: `calc(${tokens_1.space.s} + 2px)`,
 }, ({ variant }) => ({
     border: `1px solid ${variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.border}`,
 }));
@@ -248,7 +244,7 @@ exports.Checkbox = common_1.createComponent('input')({
                     React.createElement(CheckboxCheck, { checked: checked, indeterminate: indeterminate }, indeterminate ? (React.createElement(IndeterminateBox, { variant: variant })) : checked ? (React.createElement(icon_1.SystemIcon, { icon: canvas_system_icons_web_1.checkSmallIcon, color: variant === 'inverse'
                             ? theme.canvas.palette.primary.main
                             : theme.canvas.palette.primary.contrast })) : null))),
-            label && (React.createElement(text_1.LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: checkboxLabelDistance, cursor: "pointer" }, label))));
+            label && (React.createElement(text_1.LabelText, { htmlFor: inputId, disabled: disabled, variant: variant, paddingInlineStart: tokens_1.space.xs, cursor: "pointer" }, label))));
     },
     subComponents: {
         ErrorType: common_1.ErrorType,

package/dist/commonjs/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/commonjs/radio/lib/Radio.js

@@ -24,18 +24,11 @@ const React = __importStar(require("react"));
 const common_1 = require("@workday/canvas-kit-react/common");
 const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const text_1 = require("@workday/canvas-kit-react/text");
-const radioBorderRadius = `${tokens_1.spaceNumbers.xxs + 0.0625}rem`;
-const radioDot = tokens_1.space.xxs;
-const radioHeight = (tokens_1.spaceNumbers.xl - tokens_1.spaceNumbers.xxxs) / 2;
-const radioTapArea = tokens_1.space.m;
-const radioContainerHeight = radioTapArea;
-const radioLabelDistance = tokens_1.space.xs;
-const radioWidth = radioHeight;
-const rippleRadius = (tokens_1.spaceNumbers.l - radioWidth) / 2;
+const radioBorderRadius = 9;
 const RadioContainer = common_1.styled('div')({
     display: 'flex',
     alignItems: 'center',
-    minHeight: radioContainerHeight,
+    minHeight: tokens_1.space.m,
     position: 'relative',
 });
 /**
@@ -45,24 +38,24 @@ const RadioContainer = common_1.styled('div')({
  */
 const RadioInputWrapper = common_1.styled('div')({
     display: 'flex',
-    height: `${radioHeight}rem`,
-    width: `${radioWidth}rem`,
+    height: `calc(${tokens_1.space.s} + 2px)`,
+    width: `calc(${tokens_1.space.s} + 2px)`,
 });
 const RadioRipple = common_1.styled('span')({
     borderRadius: tokens_1.borderRadius.circle,
     boxShadow: `0 0 0 0 ${tokens_1.colors.soap200}`,
-    height: `${radioHeight}rem`,
+    height: `calc(${tokens_1.space.s} + 2px)`,
     transition: 'box-shadow 150ms ease-out',
-    width: `${radioWidth}rem`,
+    width: `calc(${tokens_1.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 = common_1.styled('input')({
-    borderRadius: radioBorderRadius,
-    width: radioTapArea,
-    height: radioTapArea,
+    borderRadius: `calc(${tokens_1.space.xxs} + 1px)`,
+    width: tokens_1.space.m,
+    height: tokens_1.space.m,
     margin: 0,
     marginTop: '-3px',
     marginLeft: '-3px',
@@ -84,7 +77,9 @@ const RadioInput = common_1.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 ${tokens_1.colors.soap200}`,
+        boxShadow: disabled
+            ? undefined
+            : `0 0 0 calc((${tokens_1.space.l} - (${tokens_1.space.s} + 2px)) / 2) ${tokens_1.colors.soap200}`,
     },
     // `div:first-of-type` refers to the `RadioBackground`, the visual facade of the
     // input (which is visually hidden)
@@ -163,13 +158,13 @@ const RadioBackground = common_1.styled('div')({
     borderWidth: '1px',
     boxSizing: 'border-box',
     display: 'flex',
-    height: `${radioHeight}rem`,
+    height: `calc(${tokens_1.space.s} + 2px)`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: `${radioWidth}rem`,
+    width: `calc(${tokens_1.space.s} + 2px)`,
 }, ({ checked, disabled, variant, theme: { canvas: { palette: { primary: themePrimary }, }, }, }) => ({
     borderColor: checked
         ? variant === 'inverse'
@@ -193,10 +188,10 @@ const RadioCheck = common_1.styled('div')({
     borderRadius: radioBorderRadius,
     display: 'flex',
     flexDirection: 'column',
-    height: radioDot,
+    height: tokens_1.space.xxs,
     pointerEvents: 'none',
     transition: 'transform 200ms ease, opacity 200ms ease',
-    width: radioDot,
+    width: tokens_1.space.xxs,
 }, ({ theme, variant }) => ({
     backgroundColor: variant === 'inverse'
         ? theme.canvas.palette.primary.main
@@ -215,6 +210,6 @@ exports.Radio = common_1.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(text_1.LabelText, { paddingLeft: radioLabelDistance, htmlFor: inputId, disabled: disabled, variant: variant }, label))));
+            label && (React.createElement(text_1.LabelText, { paddingLeft: tokens_1.space.xs, htmlFor: inputId, disabled: disabled, variant: variant }, label))));
     },
 });

package/dist/commonjs/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/commonjs/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/commonjs/table/lib/Table.js

@@ -39,8 +39,7 @@ const TableComponent = styled_1.default('table')(tokens_1.type.levels.subtext.la
     },
 });
 /**
- * @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.
  */
 class Table extends React.Component {
     render() {

package/dist/commonjs/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/commonjs/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/commonjs/table/lib/TableRow.js

@@ -30,8 +30,7 @@ const tokens_1 = require("@workday/canvas-kit-react/tokens");
 const common_1 = require("@workday/canvas-kit-react/common");
 const Table_1 = require("./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.
  */
 var TableRowState;
 (function (TableRowState) {
@@ -106,7 +105,7 @@ const StyledTableRow = styled_1.default('tr')({
         fontSize: 13,
         borderRight: Table_1.cellBorder,
         borderBottom: Table_1.cellBorder,
-        height: `${tokens_1.spaceNumbers.xl + tokens_1.spaceNumbers.xxs}rem`,
+        height: `calc(${tokens_1.space.xl} + ${tokens_1.space.xxs})`,
         boxSizing: 'border-box',
         transition: 'background-color 0.2s',
     },
@@ -194,8 +193,7 @@ const StyledTableRow = styled_1.default('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.
  */
 exports.TableRow = common_1.createComponent('tr')({
     displayName: 'TableRow',

package/dist/commonjs/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/commonjs/text-area/lib/TextArea.js

@@ -38,7 +38,7 @@ const StyledTextArea = common_1.styled('textarea')(({ theme, error }) => ({
     borderRadius: tokens_1.borderRadius.m,
     boxSizing: 'border-box',
     minHeight: tokens_1.space.xxl,
-    minWidth: `${tokens_1.spaceNumbers.xxxl * 3 + tokens_1.spaceNumbers.xl}rem`,
+    minWidth: `calc((${tokens_1.space.xxxl} * 3) + ${tokens_1.space.xl})`,
     transition: '0.2s box-shadow, 0.2s border-color',
     padding: tokens_1.space.xxs,
     margin: 0,

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

@@ -32,7 +32,7 @@ const StyledTextInput = common_1.styled('input')({
     boxSizing: 'border-box',
     height: 40,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: `${tokens_1.spaceNumbers.xxs}rem`,
+    padding: tokens_1.space.xxs,
     margin: 0,
     '&::placeholder': {
         color: tokens_1.inputColors.placeholder,

package/dist/commonjs/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/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,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/commonjs/tokens/lib/space.js

@@ -34,40 +34,33 @@ exports.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).
  */
 exports.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/commonjs/tooltip/lib/TooltipContainer.js

@@ -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.s - 0.125}rem`,
+        padding: `calc(${tokens_1.space.s} - 0.125rem)`,
         ':before': {
-            margin: `${tokens_1.spaceNumbers.xxxs + 0.125}rem`,
+            margin: `calc(${tokens_1.space.xxxs} + 0.125rem)`,
         },
     },
     // Hide tooltip when the reference element is either clipped or fully hidden