@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

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

@@ -4,15 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useReturnFocus = void 0;
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var usePopupModel_1 = require("./usePopupModel");
-var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const usePopupModel_1 = require("./usePopupModel");
+const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
 function getScrollParent(element) {
     if (element === document.body || !element.parentElement) {
         return element;
     }
-    var styles = getComputedStyle(element);
+    const styles = getComputedStyle(element);
     if (styles.overflowY === 'scroll' || styles.overflowY === 'auto') {
         return element;
     }
@@ -32,19 +32,19 @@ function getFocusableElement(element) {
 }
 /**
  * Returns focus to the target element when the popup is hidden. This works well with
- * `useInitialFocus`. This should be used with `useFocusRedirect` or `useFocusTrap` for a complete
- * focus management solution.
+ * {@link useInitialFocus}. This should be used with {@link useFocusRedirect} or
+ * {@link useFocusTrap} for a complete focus management solution.
  *
  * This should be used on popup elements that use `useInitialFocus`.
  */
-exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
-    var visible = model.state.visibility !== 'hidden';
-    var elementRef = react_1.default.useRef(null);
+exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+    const visible = model.state.visibility !== 'hidden';
+    const elementRef = react_1.default.useRef(null);
     // This boolean tracks keyboard-driven focus changes. This is required for `useFocusRedirect` as
     // focus redirection needs synchronous focus management and everything else needs asynchronous
     // focus management.
-    var requiresFocusChangeRef = react_1.default.useRef(false);
-    var onKeyDown = react_1.default.useCallback(function (event) {
+    const requiresFocusChangeRef = react_1.default.useRef(false);
+    const onKeyDown = react_1.default.useCallback((event) => {
         // The tab key changes focus
         if (event.key === 'Tab') {
             requiresFocusChangeRef.current = true;
@@ -52,7 +52,7 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
     }, []);
     // track mousedown events to determine if the mouse target is a focusable element. If it is, we
     // should not return focus
-    var onMouseDown = react_1.default.useCallback(function (event) {
+    const onMouseDown = react_1.default.useCallback((event) => {
         if (model.state.stackRef.current && event.target instanceof HTMLElement) {
             if (!canvas_kit_popup_stack_1.PopupStack.contains(model.state.stackRef.current, event.target)) {
                 elementRef.current = event.target;
@@ -74,24 +74,24 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
     // focus itself. If we don't short-circuit return focus, the user will intend to click on an
     // `input` element only to get focus changed back. This is annoying to users and unintuitive. Instead,
     // we'll use `mousedown` and `mouseup` to determine if we're closing because of a mouse click.
-    react_1.default.useLayoutEffect(function () {
+    react_1.default.useLayoutEffect(() => {
         if (!visible) {
             return;
         }
         // capture the element here. The refs will be null by the time the cleanup function is called
-        var element = (model.state.returnFocusRef || model.state.targetRef)
+        const element = (model.state.returnFocusRef || model.state.targetRef)
             .current;
         document.addEventListener('mousedown', onMouseDown, true);
         document.addEventListener('keydown', onKeyDown, true);
-        return function () {
+        return () => {
             document.removeEventListener('mousedown', onMouseDown, true);
             document.removeEventListener('keydown', onKeyDown, true);
             if (!element) {
                 return;
             }
-            var scrollParent = getScrollParent(element);
-            var scrollParentRect = scrollParent.getBoundingClientRect();
-            var elementRect = element.getBoundingClientRect();
+            const scrollParent = getScrollParent(element);
+            const scrollParentRect = scrollParent.getBoundingClientRect();
+            const elementRect = element.getBoundingClientRect();
             // Don't change focus if user focused on a different element like a `input` or the target
             // element isn't on at least halfway rendered on the screen.
             if ((elementRef.current && getFocusableElement(elementRef.current)) || // did the user click on a focusable element?
@@ -104,7 +104,11 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
                 elementRef.current = null;
                 return;
             }
-            if (requiresFocusChangeRef.current) {
+            const activeElementOutsidePopupStack = document.activeElement !== document.body &&
+                model.state.stackRef.current &&
+                document.activeElement instanceof HTMLElement &&
+                !canvas_kit_popup_stack_1.PopupStack.contains(model.state.stackRef.current, document.activeElement);
+            if (activeElementOutsidePopupStack || requiresFocusChangeRef.current) {
                 // We need to change focus _before_ the browser process the default action of picking a new
                 // focus target. Doing this immediately prevents the `focus` event from firing on `element`,
                 // but that's okay because the browser will change focus anyways.
@@ -113,12 +117,19 @@ exports.useReturnFocus = common_1.createElemPropsHook(usePopupModel_1.usePopupMo
             else {
                 // We wait a frame for the current event to process, allowing the browser to fire default
                 // actions. This delay allows the focus change to trigger a `focus` event on `element`.
-                requestAnimationFrame(function () {
+                requestAnimationFrame(() => {
                     common_1.changeFocus(element);
                 });
             }
             elementRef.current = null;
         };
-    }, [model.state.returnFocusRef, model.state.targetRef, visible, onMouseDown, onKeyDown]);
+    }, [
+        model.state.returnFocusRef,
+        model.state.targetRef,
+        visible,
+        onMouseDown,
+        onKeyDown,
+        model.state.stackRef,
+    ]);
     return {};
 });

package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts

@@ -7,7 +7,7 @@ import React from 'react';
  * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-export declare const useTransferOnFullscreenEnter: <P extends {}, R>(model: {
+export declare const useTransferOnFullscreenEnter: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -15,7 +15,7 @@ export declare const useTransferOnFullscreenEnter: <P extends {}, R>(model: {
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -24,7 +24,5 @@ export declare const useTransferOnFullscreenEnter: <P extends {}, R>(model: {
         show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
+}, {}>;
 //# sourceMappingURL=useTransferOnFullscreenEnter.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTransferOnFullscreenEnter.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenEnter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;;;OA6BvC,CAAC"}
+{"version":3,"file":"useTransferOnFullscreenEnter.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenEnter.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B;;;;;;;;;;;;;;;;;MA6BvC,CAAC"}

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

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTransferOnFullscreenEnter = void 0;
-var react_1 = __importDefault(require("react"));
-var screenfull_1 = __importDefault(require("screenfull"));
-var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
-var common_1 = require("@workday/canvas-kit-react/common");
-var usePopupModel_1 = require("./usePopupModel");
+const react_1 = __importDefault(require("react"));
+const screenfull_1 = __importDefault(require("screenfull"));
+const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+const common_1 = require("@workday/canvas-kit-react/common");
+const usePopupModel_1 = require("./usePopupModel");
 /**
  * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
  * popup would seem to disappear because the popup container element is not a child of the
@@ -17,8 +17,8 @@ var usePopupModel_1 = require("./usePopupModel");
  * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-exports.useTransferOnFullscreenEnter = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
-    var handler = react_1.default.useCallback(function (event) {
+exports.useTransferOnFullscreenEnter = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+    const handler = react_1.default.useCallback((event) => {
         if (screenfull_1.default.isFullscreen && model.state.stackRef.current) {
             canvas_kit_popup_stack_1.PopupStack.transferToCurrentContext({
                 element: model.state.stackRef.current,
@@ -26,14 +26,14 @@ exports.useTransferOnFullscreenEnter = common_1.createElemPropsHook(usePopupMode
             });
         }
     }, [model.state.stackRef, model.state.targetRef]);
-    var visible = model.state.visibility !== 'hidden';
-    react_1.default.useEffect(function () {
+    const visible = model.state.visibility !== 'hidden';
+    react_1.default.useEffect(() => {
         if (!visible) {
             return;
         }
         if (screenfull_1.default.isEnabled) {
             screenfull_1.default.on('change', handler);
-            return function () {
+            return () => {
                 screenfull_1.default.off('change', handler);
             };
         }

package/dist/commonjs/popup/lib/hooks/useTransferOnFullscreenExit.d.ts

@@ -6,7 +6,7 @@ import React from 'react';
  * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-export declare const useTransferOnFullscreenExit: <P extends {}, R>(model: {
+export declare const useTransferOnFullscreenExit: import("@workday/canvas-kit-react/common").BehaviorHook<{
     state: {
         stackRef: React.RefObject<HTMLDivElement>;
         targetRef: React.RefObject<HTMLButtonElement>;
@@ -14,7 +14,7 @@ export declare const useTransferOnFullscreenExit: <P extends {}, R>(model: {
         returnFocusRef: React.RefObject<any> | undefined;
         placement: import("@popperjs/core").Placement;
         id: string;
-        visibility: import("../../..").Visibility;
+        visibility: "hidden" | "visible";
     };
     events: {
         updatePlacement(data: {
@@ -23,7 +23,5 @@ export declare const useTransferOnFullscreenExit: <P extends {}, R>(model: {
         show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
-}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
-    ref: React.Ref<R>;
-} : {});
+}, {}>;
 //# sourceMappingURL=useTransferOnFullscreenExit.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"useTransferOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenExit.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;;;OA6BtC,CAAC"}
+{"version":3,"file":"useTransferOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenExit.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B;;;;;;;;;;;;;;;;;MA6BtC,CAAC"}

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

@@ -4,11 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTransferOnFullscreenExit = void 0;
-var react_1 = __importDefault(require("react"));
-var screenfull_1 = __importDefault(require("screenfull"));
-var canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
-var common_1 = require("@workday/canvas-kit-react/common");
-var usePopupModel_1 = require("./usePopupModel");
+const react_1 = __importDefault(require("react"));
+const screenfull_1 = __importDefault(require("screenfull"));
+const canvas_kit_popup_stack_1 = require("@workday/canvas-kit-popup-stack");
+const common_1 = require("@workday/canvas-kit-react/common");
+const usePopupModel_1 = require("./usePopupModel");
 /**
  * Makes the popup transfer to fullscreen when fullscreen is exited. Without this hook, the popup
  * would not operate correctly with other popups on the screen.
@@ -16,8 +16,8 @@ var usePopupModel_1 = require("./usePopupModel");
  * Don't use this in conjunction with a hook that will close the popup when exiting fullscreen.
  * Doing so would open the popup when the intention was to close it.
  */
-exports.useTransferOnFullscreenExit = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(function (model) {
-    var handler = react_1.default.useCallback(function (event) {
+exports.useTransferOnFullscreenExit = common_1.createElemPropsHook(usePopupModel_1.usePopupModel)(model => {
+    const handler = react_1.default.useCallback((event) => {
         if (!screenfull_1.default.isFullscreen && model.state.stackRef.current) {
             canvas_kit_popup_stack_1.PopupStack.transferToCurrentContext({
                 element: model.state.stackRef.current,
@@ -25,14 +25,14 @@ exports.useTransferOnFullscreenExit = common_1.createElemPropsHook(usePopupModel
             });
         }
     }, [model.state.stackRef, model.state.targetRef]);
-    var visible = model.state.visibility !== 'hidden';
-    react_1.default.useEffect(function () {
+    const visible = model.state.visibility !== 'hidden';
+    react_1.default.useEffect(() => {
         if (!visible) {
             return;
         }
         if (screenfull_1.default.isEnabled) {
             screenfull_1.default.on('change', handler);
-            return function () {
+            return () => {
                 screenfull_1.default.off('change', handler);
             };
         }

package/dist/commonjs/radio/lib/Radio.d.ts

@@ -35,5 +35,5 @@ export interface RadioProps extends Themeable {
     value?: string;
     variant?: 'inverse' | undefined;
 }
-export declare const Radio: import("../../common").ElementComponent<"input", RadioProps>;
+export declare const Radio: import("@workday/canvas-kit-react/common").ElementComponent<"input", RadioProps>;
 //# sourceMappingURL=Radio.d.ts.map

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,8DAqDhB,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;AAmOD,eAAO,MAAM,KAAK,kFAqDhB,CAAC"}

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

@@ -1,15 +1,4 @@
 "use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 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]; } });
@@ -29,32 +18,21 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Radio = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var text_1 = require("@workday/canvas-kit-react/text");
-var radioBorderRadius = 9;
-var radioDot = 8;
-var radioHeight = 18;
-var radioTapArea = tokens_1.spaceNumbers.m;
-var radioContainerHeight = radioTapArea;
-var radioLabelDistance = tokens_1.spaceNumbers.xs;
-var radioWidth = 18;
-var rippleRadius = (tokens_1.spaceNumbers.l - radioWidth) / 2;
-var RadioContainer = common_1.styled('div')({
+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 radioContainerHeight = radioTapArea;
+const radioLabelDistance = tokens_1.spaceNumbers.xs;
+const radioWidth = 18;
+const rippleRadius = (tokens_1.spaceNumbers.l - radioWidth) / 2;
+const RadioContainer = common_1.styled('div')({
     display: 'flex',
     alignItems: 'center',
     minHeight: radioContainerHeight,
@@ -65,26 +43,23 @@ var RadioContainer = common_1.styled('div')({
  * :hover on the radio when you hover on it's corresponding label.
  * This stops the ripple from showing when you hover on the label.
  */
-var RadioInputWrapper = common_1.styled('div')({
+const RadioInputWrapper = common_1.styled('div')({
     display: 'flex',
     height: radioHeight,
     width: radioWidth,
 });
-var RadioRipple = common_1.styled('span')({
+const RadioRipple = common_1.styled('span')({
     borderRadius: tokens_1.borderRadius.circle,
-    boxShadow: "0 0 0 0 " + tokens_1.colors.soap200,
+    boxShadow: `0 0 0 0 ${tokens_1.colors.soap200}`,
     height: radioHeight,
     transition: 'box-shadow 150ms ease-out',
     width: radioWidth,
     position: 'absolute',
-    pointerEvents: 'none',
-}, function (_a) {
-    var variant = _a.variant;
-    return ({
-        opacity: variant === 'inverse' ? '0.4' : '1',
-    });
-});
-var RadioInput = common_1.styled('input')({
+    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,
@@ -96,64 +71,79 @@ var RadioInput = common_1.styled('input')({
     '&:focus, &:active': {
         outline: 'none',
     },
-}, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, variant = _a.variant, _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
-    return (__assign({ cursor: disabled ? undefined : 'pointer', 
-        /**
-         * These selectors are targetting various sibling elements (~) here because
-         * their styles need to be connected to changes around the input's state
-         * (e.g. hover, focus, etc.).
-         *
-         * We are choosing not to use component selectors from Emotion in this case.
-         * The Babel transforms have been problematic in the past.
-         */
-        // `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,
-        }, 
-        // `div:first-of-type` refers to the `RadioBackground`, the visual facade of the
-        // input (which is visually hidden)
-        '&:hover ~ div:first-of-type': {
-            backgroundColor: checked
-                ? variant === 'inverse'
-                    ? tokens_1.colors.frenchVanilla100
-                    : themePrimary.main
-                : disabled
-                    ? tokens_1.inputColors.disabled.background
-                    : 'white',
-            borderColor: checked
-                ? variant === 'inverse'
+}, ({ checked, disabled, variant, theme: { canvas: { palette: { primary: themePrimary, common: { focusOutline: themeFocusOutline }, }, }, }, }) => ({
+    cursor: disabled ? undefined : 'pointer',
+    /**
+     * These selectors are targetting various sibling elements (~) here because
+     * their styles need to be connected to changes around the input's state
+     * (e.g. hover, focus, etc.).
+     *
+     * We are choosing not to use component selectors from Emotion in this case.
+     * The Babel transforms have been problematic in the past.
+     */
+    // `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}`,
+    },
+    // `div:first-of-type` refers to the `RadioBackground`, the visual facade of the
+    // input (which is visually hidden)
+    '&:hover ~ div:first-of-type': {
+        backgroundColor: checked
+            ? variant === 'inverse'
+                ? tokens_1.colors.frenchVanilla100
+                : themePrimary.main
+            : disabled
+                ? tokens_1.inputColors.disabled.background
+                : 'white',
+        borderColor: checked
+            ? variant === 'inverse'
+                ? tokens_1.colors.soap300
+                : themePrimary.main
+            : disabled
+                ? tokens_1.inputColors.disabled.border
+                : variant === 'inverse'
                     ? tokens_1.colors.soap300
-                    : themePrimary.main
-                : disabled
-                    ? tokens_1.inputColors.disabled.border
-                    : variant === 'inverse'
-                        ? tokens_1.colors.soap300
-                        : tokens_1.inputColors.hoverBorder,
-            borderWidth: '1px',
-        }, '&:focus, &focus:hover': {
-            '& ~ div:first-of-type': __assign({ borderWidth: '2px', borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themeFocusOutline, boxShadow: 'none' }, common_1.focusRing({
+                    : tokens_1.inputColors.hoverBorder,
+        borderWidth: '1px',
+    },
+    '&:focus, &focus:hover': {
+        '& ~ div:first-of-type': {
+            borderWidth: '2px',
+            borderColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : themeFocusOutline,
+            boxShadow: 'none',
+            ...common_1.focusRing({
                 width: variant === 'inverse' ? 2 : 0,
                 separation: 0,
                 animate: false,
                 innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
                 outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : undefined,
-            })),
-        }, '&:checked:focus ~ div:first-of-type': __assign(__assign({}, common_1.focusRing({
+            }),
+        },
+    },
+    '&:checked:focus ~ div:first-of-type': {
+        ...common_1.focusRing({
             separation: 2,
             width: 2,
             innerColor: variant === 'inverse' ? tokens_1.colors.blackPepper400 : undefined,
             outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
-        })), { borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main, borderWidth: '2px' }) }, common_1.mouseFocusBehavior({
-        '&:focus ~ div:first-of-type': __assign(__assign({}, common_1.focusRing({
-            width: 0,
-            outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
-        })), { borderWidth: '1px', borderColor: checked
+        }),
+        borderColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themePrimary.main,
+        borderWidth: '2px',
+    },
+    ...common_1.mouseFocusBehavior({
+        '&:focus ~ div:first-of-type': {
+            ...common_1.focusRing({
+                width: 0,
+                outerColor: variant === 'inverse' ? tokens_1.colors.frenchVanilla100 : themeFocusOutline,
+            }),
+            borderWidth: '1px',
+            borderColor: checked
                 ? variant === 'inverse'
                     ? tokens_1.colors.soap300
                     : themePrimary.main
-                : tokens_1.inputColors.border }),
+                : tokens_1.inputColors.border,
+        },
         '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': {
             borderColor: checked
                 ? variant === 'inverse'
@@ -163,9 +153,9 @@ var RadioInput = common_1.styled('input')({
                     ? tokens_1.colors.soap300
                     : tokens_1.inputColors.hoverBorder,
         },
-    })));
-});
-var RadioBackground = common_1.styled('div')({
+    }),
+}));
+const RadioBackground = common_1.styled('div')({
     alignItems: 'center',
     backgroundColor: tokens_1.colors.frenchVanilla100,
     borderRadius: radioBorderRadius,
@@ -180,29 +170,26 @@ var RadioBackground = common_1.styled('div')({
     position: 'absolute',
     transition: 'border 200ms ease, background 200ms',
     width: radioWidth,
-}, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, variant = _a.variant, themePrimary = _a.theme.canvas.palette.primary;
-    return ({
-        borderColor: checked
-            ? variant === 'inverse'
+}, ({ checked, disabled, variant, theme: { canvas: { palette: { primary: themePrimary }, }, }, }) => ({
+    borderColor: checked
+        ? variant === 'inverse'
+            ? tokens_1.colors.soap300
+            : themePrimary.main
+        : disabled
+            ? tokens_1.inputColors.disabled.border
+            : variant === 'inverse'
                 ? tokens_1.colors.soap300
-                : themePrimary.main
-            : disabled
-                ? tokens_1.inputColors.disabled.border
-                : variant === 'inverse'
-                    ? tokens_1.colors.soap300
-                    : tokens_1.inputColors.border,
-        backgroundColor: checked
-            ? variant === 'inverse'
-                ? tokens_1.colors.frenchVanilla100
-                : themePrimary.main
-            : disabled
-                ? tokens_1.inputColors.disabled.background
-                : 'white',
-        opacity: disabled && variant === 'inverse' ? '.4' : '1',
-    });
-});
-var RadioCheck = common_1.styled('div')({
+                : tokens_1.inputColors.border,
+    backgroundColor: checked
+        ? variant === 'inverse'
+            ? tokens_1.colors.frenchVanilla100
+            : themePrimary.main
+        : disabled
+            ? tokens_1.inputColors.disabled.background
+            : 'white',
+    opacity: disabled && variant === 'inverse' ? '.4' : '1',
+}));
+const RadioCheck = common_1.styled('div')({
     borderRadius: radioBorderRadius,
     display: 'flex',
     flexDirection: 'column',
@@ -210,28 +197,21 @@ var RadioCheck = common_1.styled('div')({
     pointerEvents: 'none',
     transition: 'transform 200ms ease, opacity 200ms ease',
     width: radioDot,
-}, function (_a) {
-    var theme = _a.theme, variant = _a.variant;
-    return ({
-        backgroundColor: variant === 'inverse'
-            ? theme.canvas.palette.primary.main
-            : theme.canvas.palette.primary.contrast,
-    });
-}, function (_a) {
-    var checked = _a.checked;
-    return ({
-        opacity: checked ? 1 : 0,
-        transform: checked ? 'scale(1)' : 'scale(0.5)',
-    });
-});
+}, ({ theme, variant }) => ({
+    backgroundColor: variant === 'inverse'
+        ? theme.canvas.palette.primary.main
+        : theme.canvas.palette.primary.contrast,
+}), ({ checked }) => ({
+    opacity: checked ? 1 : 0,
+    transform: checked ? 'scale(1)' : 'scale(0.5)',
+}));
 exports.Radio = common_1.createComponent('input')({
     displayName: 'Radio',
-    Component: function (_a, ref, Element) {
-        var _b = _a.checked, checked = _b === void 0 ? false : _b, id = _a.id, _c = _a.label, label = _c === void 0 ? '' : _c, disabled = _a.disabled, name = _a.name, onChange = _a.onChange, value = _a.value, variant = _a.variant, elemProps = __rest(_a, ["checked", "id", "label", "disabled", "name", "onChange", "value", "variant"]);
-        var inputId = common_1.useUniqueId(id);
+    Component: ({ checked = false, id, label = '', disabled, name, onChange, value, variant, ...elemProps }, ref, Element) => {
+        const inputId = common_1.useUniqueId(id);
         return (React.createElement(RadioContainer, null,
             React.createElement(RadioInputWrapper, { disabled: disabled },
-                React.createElement(RadioInput, __assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, name: name, onChange: onChange, type: "radio", value: value, "aria-checked": checked, variant: variant }, elemProps)),
+                React.createElement(RadioInput, Object.assign({ as: Element, checked: checked, disabled: disabled, id: inputId, ref: ref, name: name, onChange: onChange, type: "radio", value: value, "aria-checked": checked, variant: variant }, elemProps)),
                 React.createElement(RadioRipple, { variant: variant }),
                 React.createElement(RadioBackground, { checked: checked, disabled: disabled, variant: variant },
                     React.createElement(RadioCheck, { checked: checked, variant: variant }))),

package/dist/commonjs/radio/lib/RadioGroup.d.ts

@@ -24,11 +24,10 @@ export interface RadioGroupProps extends Themeable, GrowthBehavior {
      */
     onChange?: (value: string | number) => void;
 }
-declare class RadioGroup extends React.Component<RadioGroupProps> {
+export declare class RadioGroup extends React.Component<RadioGroupProps> {
     static ErrorType: typeof ErrorType;
     render(): React.ReactNode;
     private renderChild;
     private onRadioChange;
 }
-export { RadioGroup };
 //# sourceMappingURL=RadioGroup.d.ts.map