@workday/canvas-kit-react 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

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.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', // This is a decorative element we don't want it to block clicks to input
-}, function (_a) {
-    var variant = _a.variant;
-    return ({
-        opacity: variant === 'inverse' ? '0.4' : '1',
-    });
-});
-var RadioInput = common_1.styled('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.js

@@ -1,30 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        if (typeof b !== "function" && b !== null)
-            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-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]; } });
@@ -44,31 +18,20 @@ 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.RadioGroup = void 0;
-var React = __importStar(require("react"));
-var Radio_1 = require("./Radio");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var Container = common_1.styled('div')({
+const React = __importStar(require("react"));
+const Radio_1 = require("./Radio");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const Container = common_1.styled('div')({
     display: 'inline-block',
     boxSizing: 'border-box',
     borderRadius: tokens_1.borderRadius.m,
-    padding: tokens_1.space.xxxs + " " + tokens_1.space.xs,
-    margin: "-" + tokens_1.space.xxxs + " -" + tokens_1.space.xs,
+    padding: `${tokens_1.space.xxxs} ${tokens_1.space.xs}`,
+    margin: `-${tokens_1.space.xxxs} -${tokens_1.space.xs}`,
     '& > div': {
-        margin: tokens_1.space.xxs + " " + tokens_1.space.zero,
+        margin: `${tokens_1.space.xxs} ${tokens_1.space.zero}`,
         alignItems: 'flex-start',
         '> div': {
             flex: '0 0 auto',
@@ -80,59 +43,51 @@ var Container = common_1.styled('div')({
             marginBottom: tokens_1.space.xxxs,
         },
     },
-}, function (_a) {
-    var grow = _a.grow;
-    return grow && { width: '100%' };
-}, function (_a) {
-    var error = _a.error, theme = _a.theme;
-    var errorColors = common_1.getErrorColors(error, theme);
+}, ({ grow }) => grow && { width: '100%' }, ({ error, theme }) => {
+    const errorColors = common_1.getErrorColors(error, theme);
     return {
         transition: '100ms box-shadow',
         boxShadow: errorColors.outer !== errorColors.inner
-            ? "inset 0 0 0 1px " + errorColors.outer + ", inset 0 0 0 3px " + errorColors.inner
-            : "inset 0 0 0 2px " + errorColors.inner,
+            ? `inset 0 0 0 1px ${errorColors.outer}, inset 0 0 0 3px ${errorColors.inner}`
+            : `inset 0 0 0 2px ${errorColors.inner}`,
     };
 });
-var RadioGroup = /** @class */ (function (_super) {
-    __extends(RadioGroup, _super);
-    function RadioGroup() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.renderChild = function (child, index, value) {
+class RadioGroup extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.renderChild = (child, index, value) => {
             if (typeof child.type === typeof Radio_1.Radio) {
-                var childProps = child.props;
-                var checked = typeof value === 'number' ? index === value : childProps.value === value;
-                var name_1 = _this.props.name ? _this.props.name : childProps.name;
+                const childProps = child.props;
+                const checked = typeof value === 'number' ? index === value : childProps.value === value;
+                const name = this.props.name ? this.props.name : childProps.name;
                 return React.cloneElement(child, {
-                    checked: checked,
-                    name: name_1,
-                    onChange: _this.onRadioChange.bind(_this, childProps.onChange, index),
+                    checked,
+                    name,
+                    onChange: this.onRadioChange.bind(this, childProps.onChange, index),
                 });
             }
             return child;
         };
-        _this.onRadioChange = function (existingOnChange, index, event) {
+        this.onRadioChange = (existingOnChange, index, event) => {
             if (existingOnChange) {
                 existingOnChange(event);
             }
-            var target = event.currentTarget;
-            if (target && _this.props.onChange) {
+            const target = event.currentTarget;
+            if (target && this.props.onChange) {
                 if (target.value) {
-                    _this.props.onChange(target.value);
+                    this.props.onChange(target.value);
                 }
                 else {
-                    _this.props.onChange(index);
+                    this.props.onChange(index);
                 }
             }
         };
-        return _this;
     }
-    RadioGroup.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, _b = _a.value, value = _b === void 0 ? 0 : _b, children = _a.children, error = _a.error, onChange = _a.onChange, grow = _a.grow, elemProps = __rest(_a, ["value", "children", "error", "onChange", "grow"]);
-        return (React.createElement(Container, __assign({ error: error, grow: grow }, elemProps), React.Children.map(children, function (child, index) { return _this.renderChild(child, index, value); })));
-    };
-    RadioGroup.ErrorType = common_1.ErrorType;
-    return RadioGroup;
-}(React.Component));
+    render() {
+        const { value = 0, children, error, onChange, grow, ...elemProps } = this.props;
+        return (React.createElement(Container, Object.assign({ error: error, grow: grow }, elemProps), React.Children.map(children, (child, index) => this.renderChild(child, index, value))));
+    }
+}
 exports.RadioGroup = RadioGroup;
 RadioGroup.ErrorType = common_1.ErrorType;
+RadioGroup.ErrorType = common_1.ErrorType;

package/dist/commonjs/segmented-control/lib/SegmentedControl.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,27 +18,16 @@ 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.SegmentedControl = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var SegmentedControlButton_1 = require("./SegmentedControlButton");
-var onButtonClick = function (existingOnClick, onChange, index, event) {
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const SegmentedControlButton_1 = require("./SegmentedControlButton");
+const onButtonClick = (existingOnClick, onChange, index, event) => {
     if (existingOnClick) {
         existingOnClick(event);
     }
-    var target = event.currentTarget;
+    const target = event.currentTarget;
     if (target && onChange) {
         if (target.value) {
             onChange(target.value);
@@ -61,9 +39,8 @@ var onButtonClick = function (existingOnClick, onChange, index, event) {
 };
 exports.SegmentedControl = common_1.createComponent('div')({
     displayName: 'SegmentedControl',
-    Component: function (_a, ref) {
-        var _b = _a.value, value = _b === void 0 ? 0 : _b, children = _a.children, onChange = _a.onChange, elemProps = __rest(_a, ["value", "children", "onChange"]);
-        return (React.createElement("div", __assign({}, elemProps), React.Children.map(children, function (child, index) {
+    Component: ({ value = 0, children, onChange, ...elemProps }, ref) => {
+        return (React.createElement("div", Object.assign({}, elemProps), React.Children.map(children, (child, index) => {
             if (typeof child.type === typeof SegmentedControlButton_1.SegmentedControlButton) {
                 return React.cloneElement(child, {
                     toggled: typeof value === 'number' ? index === value : child.props.value === value,