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

package/button/lib/BaseButton.tsx

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

package/checkbox/lib/Checkbox.tsx

@@ -11,7 +11,13 @@ import {
   useTheme,
   Themeable,
 } from '@workday/canvas-kit-react/common';
-import {borderRadius, colors, inputColors, spaceNumbers} from '@workday/canvas-kit-react/tokens';
+import {
+  borderRadius,
+  colors,
+  inputColors,
+  space,
+  spaceNumbers,
+} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon} from '@workday/canvas-kit-react/icon';
 import {checkSmallIcon} from '@workday/canvas-system-icons-web';
 import {LabelText} from '@workday/canvas-kit-react/text';
@@ -60,11 +66,11 @@ export interface CheckboxProps extends Themeable {
   variant?: 'inverse' | undefined;
 }
 
-const checkboxHeight = 18;
-const checkboxTapArea = spaceNumbers.m;
+const checkboxHeight = (spaceNumbers.xl - spaceNumbers.xxxs) / 2;
+const checkboxTapArea = space.m;
 const checkboxContainerHeight = checkboxTapArea;
-const checkboxLabelDistance = spaceNumbers.xs;
-const checkboxWidth = 18;
+const checkboxLabelDistance = `${spaceNumbers.xs}rem`;
+const checkboxWidth = checkboxHeight;
 const rippleRadius = (spaceNumbers.l - checkboxWidth) / 2;
 
 const CheckboxContainer = styled('div')({
@@ -81,8 +87,8 @@ const CheckboxContainer = styled('div')({
  */
 const CheckboxInputWrapper = styled('div')<Pick<CheckboxProps, 'disabled'>>({
   display: 'flex',
-  height: checkboxHeight,
-  minWidth: checkboxWidth,
+  height: `${checkboxHeight}rem`,
+  minWidth: `${checkboxWidth}rem`,
   marginTop: '3px',
   alignSelf: 'flex-start',
 });
@@ -91,9 +97,9 @@ const CheckboxRipple = styled('span')<Pick<CheckboxProps, 'disabled' | 'variant'
   {
     borderRadius: borderRadius.circle,
     boxShadow: `0 0 0 0 ${colors.soap200}`,
-    height: checkboxHeight,
+    height: `${checkboxHeight}rem`,
     transition: 'box-shadow 150ms ease-out',
-    width: checkboxWidth,
+    width: `${checkboxWidth}rem`,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
   },
@@ -203,7 +209,7 @@ const CheckboxInput = styled('input')<CheckboxProps & StyledType>(
   }),
   ({disabled}) => ({
     '&:hover ~ span:first-of-type': {
-      boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}px ${colors.soap200}`,
+      boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}rem ${colors.soap200}`,
     },
   }),
   ({theme, error, variant}) => {
@@ -253,13 +259,13 @@ const CheckboxBackground = styled('div')<CheckboxProps>(
     borderRadius: borderRadius.s,
     boxSizing: 'border-box',
     display: 'flex',
-    height: checkboxHeight,
+    height: `${checkboxHeight}rem`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: checkboxWidth,
+    width: `${checkboxWidth}rem`,
   },
   ({variant}) => ({
     border: `1px solid ${variant === 'inverse' ? colors.soap300 : inputColors.border}`,

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

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

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

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

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

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

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

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

@@ -26,11 +26,11 @@ 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 = 18;
-const checkboxTapArea = tokens_1.spaceNumbers.m;
+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;
-const checkboxWidth = 18;
+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',
@@ -45,17 +45,17 @@ const CheckboxContainer = common_1.styled('div')({
  */
 const CheckboxInputWrapper = common_1.styled('div')({
     display: 'flex',
-    height: checkboxHeight,
-    minWidth: checkboxWidth,
+    height: `${checkboxHeight}rem`,
+    minWidth: `${checkboxWidth}rem`,
     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,
+    height: `${checkboxHeight}rem`,
     transition: 'box-shadow 150ms ease-out',
-    width: checkboxWidth,
+    width: `${checkboxWidth}rem`,
     position: 'absolute',
     pointerEvents: 'none', // This is a decorative element we don't want it to block clicks to input
 }, ({ variant }) => ({
@@ -146,7 +146,7 @@ const CheckboxInput = common_1.styled('input')(({ theme: { canvas: { palette: {
     }),
 }), ({ disabled }) => ({
     '&:hover ~ span:first-of-type': {
-        boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}px ${tokens_1.colors.soap200}`,
+        boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}rem ${tokens_1.colors.soap200}`,
     },
 }), ({ theme, error, variant }) => {
     const errorColors = common_1.getErrorColors(error, theme);
@@ -189,13 +189,13 @@ const CheckboxBackground = common_1.styled('div')({
     borderRadius: tokens_1.borderRadius.s,
     boxSizing: 'border-box',
     display: 'flex',
-    height: checkboxHeight,
+    height: `${checkboxHeight}rem`,
     justifyContent: 'center',
     padding: '0px 2px',
     pointerEvents: 'none',
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
-    width: checkboxWidth,
+    width: `${checkboxWidth}rem`,
 }, ({ variant }) => ({
     border: `1px solid ${variant === 'inverse' ? tokens_1.colors.soap300 : tokens_1.inputColors.border}`,
 }));

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

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

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

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

package/dist/commonjs/popup/lib/Popper.js

@@ -19,12 +19,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Popper = void 0;
+exports.Popper = exports.defaultFallbackPlacements = void 0;
 const React = __importStar(require("react"));
 const ReactDOM = __importStar(require("react-dom"));
 const PopperJS = __importStar(require("@popperjs/core"));
+exports.defaultFallbackPlacements = ['top', 'right', 'bottom', 'left'];
 const hooks_1 = require("./hooks");
 const common_1 = require("@workday/canvas-kit-react/common");
+const fallbackPlacements_1 = require("./fallbackPlacements");
 /**
  * A thin wrapper component around the Popper.js positioning engine. For reference:
  * https://popper.js.org/. `Popper` also automatically works with the {@link PopupStack} system.
@@ -61,19 +63,23 @@ const getElementFromRefOrElement = (input) => {
 const defaultPopperOptions = {};
 // Popper bails early if `open` is false and React hooks cannot be called conditionally,
 // so we're breaking out the open version into another component.
-const OpenPopper = React.forwardRef(({ anchorElement, getAnchorClientRect, popperOptions = defaultPopperOptions, placement: popperPlacement = 'bottom', onPlacementChange, children, portal, popperInstanceRef, }, ref) => {
+const OpenPopper = React.forwardRef(({ anchorElement, getAnchorClientRect, popperOptions = defaultPopperOptions, placement: popperPlacement = 'bottom', fallbackPlacements = exports.defaultFallbackPlacements, onPlacementChange, children, portal, popperInstanceRef, }, ref) => {
     const firstRender = React.useRef(true);
     const { localRef, elementRef } = common_1.useLocalRef(popperInstanceRef);
     const [placement, setPlacement] = React.useState(popperPlacement);
     const stackRef = hooks_1.usePopupStack(ref, anchorElement);
+    const placementRef = React.useRef(popperPlacement);
+    placementRef.current = placement;
     const placementModifier = React.useMemo(() => {
         return {
             name: 'setPlacement',
             enabled: true,
-            phase: 'main',
+            phase: 'afterWrite',
             fn({ state }) {
-                setPlacement(state.placement);
-                onPlacementChange === null || onPlacementChange === void 0 ? void 0 : onPlacementChange(state.placement);
+                if (placementRef.current !== state.placement) {
+                    setPlacement(state.placement);
+                    onPlacementChange === null || onPlacementChange === void 0 ? void 0 : onPlacementChange(state.placement);
+                }
             },
         };
     }, [setPlacement, onPlacementChange]);
@@ -90,7 +96,16 @@ const OpenPopper = React.forwardRef(({ anchorElement, getAnchorClientRect, poppe
             const instance = PopperJS.createPopper(anchorEl, stackRef.current, {
                 placement: popperPlacement,
                 ...popperOptions,
-                modifiers: [...(popperOptions.modifiers || []), placementModifier],
+                modifiers: [
+                    placementModifier,
+                    {
+                        ...fallbackPlacements_1.fallbackPlacementsModifier,
+                        options: {
+                            fallbackPlacements,
+                        },
+                    },
+                    ...(popperOptions.modifiers || []),
+                ],
             });
             elementRef(instance); // update the ref with the instance
             return () => {
@@ -110,11 +125,20 @@ const OpenPopper = React.forwardRef(({ anchorElement, getAnchorClientRect, poppe
             (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setOptions({
                 placement: popperPlacement,
                 ...popperOptions,
-                modifiers: [...(popperOptions.modifiers || []), placementModifier],
+                modifiers: [
+                    placementModifier,
+                    {
+                        ...fallbackPlacements_1.fallbackPlacementsModifier,
+                        options: {
+                            fallbackPlacements,
+                        },
+                    },
+                    ...(popperOptions.modifiers || []),
+                ],
             });
         }
         firstRender.current = false;
-    }, [popperOptions, popperPlacement, placementModifier, localRef]);
+    }, [popperOptions, popperPlacement, fallbackPlacements, placementModifier, localRef]);
     const contents = React.createElement(React.Fragment, null, isRenderProp(children) ? children({ placement }) : children);
     if (!portal) {
         return contents;

package/dist/commonjs/popup/lib/PopupPopper.d.ts

@@ -8,6 +8,13 @@ export interface PopupPopperProps extends PopperProps {
      * @default bottom
      */
     placement?: Placement;
+    /**
+     * Define fallback placements by providing a list of {@link Placement} in array (in order of preference).
+     * The default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial
+     * and opposite placements are not available, the fallback placements will be in use. Use an empty array to
+     * disable the fallback placements.
+     */
+    fallbackPlacements?: Placement[];
     /**
      * The additional options passed to the Popper's `popper.js` instance.
      */

package/dist/commonjs/popup/lib/PopupPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAU,WAAW,EAAC,MAAM,UAAU,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}
+{"version":3,"file":"PopupPopper.d.ts","sourceRoot":"","sources":["../../../../popup/lib/PopupPopper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,SAAS,EAAE,aAAa,EAAU,WAAW,EAAC,MAAM,UAAU,CAAC;AAEvE,MAAM,WAAW,gBAAiB,SAAQ,WAAW;IACnD;;;;;OAKG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB;;;;;OAKG;IACH,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;CACxC;AAED,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;EAMtB,CAAC"}

package/dist/commonjs/popup/lib/fallbackPlacements.d.ts

@@ -0,0 +1,9 @@
+import * as PopperJS from '@popperjs/core';
+export declare type Placement = PopperJS.Placement;
+export declare type Options = {
+    fallbackPlacements: Placement[];
+};
+declare const name = "fallbackModifier";
+export declare const fallbackPlacementsModifier: PopperJS.Modifier<typeof name, Options>;
+export {};
+//# sourceMappingURL=fallbackPlacements.d.ts.map

package/dist/commonjs/popup/lib/fallbackPlacements.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fallbackPlacements.d.ts","sourceRoot":"","sources":["../../../../popup/lib/fallbackPlacements.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,oBAAY,SAAS,GAAG,QAAQ,CAAC,SAAS,CAAC;AAyD3C,oBAAY,OAAO,GAAG;IACpB,kBAAkB,EAAE,SAAS,EAAE,CAAC;CACjC,CAAC;AAEF,QAAA,MAAM,IAAI,qBAAqB,CAAC;AAEhC,eAAO,MAAM,0BAA0B,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO,IAAI,EAAE,OAAO,CAwB9E,CAAC"}

package/dist/commonjs/popup/lib/fallbackPlacements.js

@@ -0,0 +1,94 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fallbackPlacementsModifier = void 0;
+const PopperJS = __importStar(require("@popperjs/core"));
+const getOppositePlacement = (popperPlacement) => {
+    var _a;
+    const [first, second] = popperPlacement.split('-');
+    let oppositePlacement;
+    switch (first) {
+        case 'top':
+            oppositePlacement = 'bottom';
+            break;
+        case 'bottom':
+            oppositePlacement = 'top';
+            break;
+        case 'left':
+            oppositePlacement = 'right';
+            break;
+        case 'right':
+            oppositePlacement = 'left';
+            break;
+        default:
+            oppositePlacement = 'auto';
+    }
+    if (second) {
+        oppositePlacement =
+            (_a = PopperJS.placements.find(placement => placement.includes(`${oppositePlacement}-${second}`))) !== null && _a !== void 0 ? _a : oppositePlacement;
+    }
+    return oppositePlacement;
+};
+const choseAvailablePlacement = (placements, state, preferredPlacement) => {
+    if (placements.length === 0 || placements[0].split('-')[0] === 'auto') {
+        return preferredPlacement;
+    }
+    const { reference, popper } = state.rects;
+    const overflow = PopperJS.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) &&
+        (direction === 'horizontal'
+            ? popper.height / 2 - overflow.top < reference.height ||
+                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];
+    if (!isOverflowed && overflow[key] <= 0) {
+        return placements[0];
+    }
+    else {
+        return choseAvailablePlacement(placements.slice(1), state, preferredPlacement);
+    }
+};
+const name = 'fallbackModifier';
+exports.fallbackPlacementsModifier = {
+    name: name,
+    enabled: true,
+    phase: 'main',
+    data: {
+        _skip: false,
+    },
+    fn({ state, options }) {
+        const preferredPlacement = state.options.placement;
+        const { fallbackPlacements } = options;
+        const placements = [
+            preferredPlacement,
+            getOppositePlacement(preferredPlacement),
+            ...(fallbackPlacements || []),
+        ];
+        const placementOverride = choseAvailablePlacement(placements, state, preferredPlacement);
+        if (state.placement !== placementOverride) {
+            state.modifiersData[name]._skip = true;
+            state.placement = placementOverride;
+            state.reset = true;
+        }
+    },
+};

package/dist/commonjs/popup/lib/hooks/usePopupPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupPopper.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupPopper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;mCAGX,SAAS;EAevB,CAAC"}
+{"version":3,"file":"usePopupPopper.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupPopper.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAC,MAAM,WAAW,CAAC;AAEpC;;;GAGG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;mCAOX,SAAS;EAevB,CAAC"}

package/dist/commonjs/popup/lib/hooks/usePopupPopper.js

@@ -13,12 +13,15 @@ const react_1 = __importDefault(require("react"));
  */
 exports.usePopupPopper = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(({ state, events }, ref) => {
     const elementRef = common_1.useForkRef(ref, state.stackRef);
+    // Create a mutable ref of the placement to keep a stable `onPlacementChange` reference.
+    const placementRef = react_1.default.useRef(state.placement);
+    placementRef.current = state.placement;
     const onPlacementChange = react_1.default.useCallback((placement) => {
-        if (placement !== state.placement) {
+        if (placement !== placementRef.current) {
             // only update if the placement has changed
             events.updatePlacement({ placement });
         }
-    }, [events, state.placement]);
+    }, [events]);
     return {
         open: state.visibility !== 'hidden',
         anchorElement: state.targetRef,

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;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;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;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"}

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

@@ -24,13 +24,13 @@ 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 = 9;
-const radioDot = 8;
-const radioHeight = 18;
-const radioTapArea = tokens_1.spaceNumbers.m;
+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.spaceNumbers.xs;
-const radioWidth = 18;
+const radioLabelDistance = tokens_1.space.xs;
+const radioWidth = radioHeight;
 const rippleRadius = (tokens_1.spaceNumbers.l - radioWidth) / 2;
 const RadioContainer = common_1.styled('div')({
     display: 'flex',
@@ -45,15 +45,15 @@ const RadioContainer = common_1.styled('div')({
  */
 const RadioInputWrapper = common_1.styled('div')({
     display: 'flex',
-    height: radioHeight,
-    width: radioWidth,
+    height: `${radioHeight}rem`,
+    width: `${radioWidth}rem`,
 });
 const RadioRipple = common_1.styled('span')({
     borderRadius: tokens_1.borderRadius.circle,
     boxShadow: `0 0 0 0 ${tokens_1.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
 }, ({ variant }) => ({
@@ -84,7 +84,7 @@ 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}px ${tokens_1.colors.soap200}`,
+        boxShadow: disabled ? undefined : `0 0 0 ${rippleRadius}rem ${tokens_1.colors.soap200}`,
     },
     // `div:first-of-type` refers to the `RadioBackground`, the visual facade of the
     // input (which is visually hidden)
@@ -163,13 +163,13 @@ const RadioBackground = common_1.styled('div')({
     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, disabled, variant, theme: { canvas: { palette: { primary: themePrimary }, }, }, }) => ({
     borderColor: checked
         ? variant === 'inverse'

package/dist/commonjs/select/lib/Select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,cAAc,EACd,SAAS,EAGT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAW1C,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;IAChF;;;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,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0ED,eAAO,MAAM,MAAM;;CAiBjB,CAAC"}
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../../../select/lib/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,cAAc,EACd,SAAS,EAGT,SAAS,EACV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAE5C,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,cAAc;IAC5D;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;IAChF;;;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,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC7D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0ED,eAAO,MAAM,MAAM;;CAiBjB,CAAC"}

package/dist/commonjs/select/lib/Select.js

@@ -35,7 +35,7 @@ const StyledSelect = common_1.styled('select')({
     height: tokens_1.space.xl,
     minWidth: 280,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: tokens_1.spaceNumbers.xxs,
+    padding: tokens_1.space.xxs,
     margin: 0,
     MozAppearance: 'none',
     WebkitAppearance: 'none',

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

@@ -102,7 +102,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,
+        height: `${tokens_1.spaceNumbers.xl + tokens_1.spaceNumbers.xxs}rem`,
         boxSizing: 'border-box',
         transition: 'background-color 0.2s',
     },

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;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"}
+{"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"}

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

@@ -37,10 +37,10 @@ const StyledTextArea = common_1.styled('textarea')(({ theme, error }) => ({
     backgroundColor: tokens_1.inputColors.background,
     borderRadius: tokens_1.borderRadius.m,
     boxSizing: 'border-box',
-    minHeight: 64,
-    minWidth: 280,
+    minHeight: tokens_1.space.xxl,
+    minWidth: `${tokens_1.spaceNumbers.xxxl * 3 + tokens_1.spaceNumbers.xl}rem`,
     transition: '0.2s box-shadow, 0.2s border-color',
-    padding: tokens_1.spaceNumbers.xxs,
+    padding: tokens_1.space.xxs,
     margin: 0,
     '&::webkit-resizer': {
         display: 'none',

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,
+    padding: `${tokens_1.spaceNumbers.xxs}rem`,
     margin: 0,
     '&::placeholder': {
         color: tokens_1.inputColors.placeholder,