@workday/canvas-kit-react 6.8.8 → 6.9.0-next.4

package/dist/es6/popup/lib/hooks/usePopupTarget.js

@@ -1,8 +1,9 @@
-import { createHook, useForkRef } from '@workday/canvas-kit-react/common';
+import { createElemPropsHook, useForkRef } from '@workday/canvas-kit-react/common';
+import { usePopupModel } from './usePopupModel';
 /**
  * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
  */
-export var usePopupTarget = createHook(function (_a, ref) {
+export var usePopupTarget = createElemPropsHook(usePopupModel)(function (_a, ref) {
     var events = _a.events, state = _a.state;
     var elementRef = useForkRef(ref, state.targetRef);
     return {
@@ -16,10 +17,10 @@ export var usePopupTarget = createHook(function (_a, ref) {
                 state.targetRef.current = event.currentTarget;
             }
             if (state.visibility !== 'hidden') {
-                events.hide({ event: event });
+                events.hide(event);
             }
             else {
-                events.show({ event: event });
+                events.show(event);
             }
         },
     };

package/dist/es6/popup/lib/hooks/usePopupTargetContext.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
+ */
+export declare const usePopupTargetContext: <P extends {}, R>(model: {
+    state: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("react").RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    ref: (instance: any) => void;
+    onContextMenu: (event: React.MouseEvent) => void;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# sourceMappingURL=usePopupTargetContext.d.ts.map

package/dist/es6/popup/lib/hooks/usePopupTargetContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopupTargetContext.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupTargetContext.ts"],"names":[],"mappings":"AAGA;;GAEG;AACH,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;2BAIP,gBAAgB;;;OAmBzC,CAAC"}

package/dist/es6/popup/lib/hooks/usePopupTargetContext.js

@@ -0,0 +1,29 @@
+import { createElemPropsHook, useForkRef } from '@workday/canvas-kit-react/common';
+import { usePopupModel } from './usePopupModel';
+/**
+ * Adds the necessary props to a `Target` component. Used by the Popup.Target subcomponent.
+ */
+export var usePopupTargetContext = createElemPropsHook(usePopupModel)(function (_a, ref) {
+    var events = _a.events, state = _a.state;
+    var elementRef = useForkRef(ref, state.targetRef);
+    return {
+        ref: elementRef,
+        onContextMenu: function (event) {
+            // If we're wrapping a target component that doesn't handle ref forwarding, update the
+            // `state.targetRef` manually. This ensures that custom target components don't need to handle
+            // ref forwarding since ref forwarding is only really needed to programmatically open popups
+            // around a target _before_ a user clicks. In that rare case, ref forwarding is required.
+            if (!state.targetRef.current) {
+                state.targetRef.current = event.currentTarget;
+            }
+            if (state.visibility !== 'hidden') {
+                events.hide(event);
+            }
+            else {
+                events.show(event);
+            }
+            // Prevent the default context menu from showing to avoid double menus
+            event.preventDefault();
+        },
+    };
+});

package/dist/es6/popup/lib/hooks/useReturnFocus.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * 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
@@ -5,5 +6,24 @@
  *
  * This should be used on popup elements that use `useInitialFocus`.
  */
-export declare const useReturnFocus: (model: import("../../../common").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+export declare const useReturnFocus: <P extends {}, R>(model: {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        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=useReturnFocus.d.ts.map

package/dist/es6/popup/lib/hooks/useReturnFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAKA;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,6IAe1B,CAAC"}
+{"version":3,"file":"useReturnFocus.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useReturnFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;GAMG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;OAezB,CAAC"}

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

@@ -1,5 +1,6 @@
 import React from 'react';
-import { changeFocus } from '@workday/canvas-kit-react/common';
+import { changeFocus, createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { usePopupModel } from './usePopupModel';
 /**
  * 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
@@ -7,8 +8,7 @@ import { changeFocus } from '@workday/canvas-kit-react/common';
  *
  * This should be used on popup elements that use `useInitialFocus`.
  */
-export var useReturnFocus = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+export var useReturnFocus = createElemPropsHook(usePopupModel)(function (model) {
     var visible = model.state.visibility !== 'hidden';
     React.useLayoutEffect(function () {
         if (!visible) {
@@ -20,5 +20,5 @@ export var useReturnFocus = function (model, elemProps) {
             changeFocus(element);
         };
     }, [model.state.returnFocusRef, model.state.targetRef, visible]);
-    return elemProps;
-};
+    return {};
+});

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

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * 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
@@ -6,5 +7,24 @@
  * 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: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+export declare const useTransferOnFullscreenEnter: <P extends {}, R>(model: {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        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/es6/popup/lib/hooks/useTransferOnFullscreenEnter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTransferOnFullscreenEnter.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenEnter.ts"],"names":[],"mappings":"AAMA;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,sIA6BxC,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;;;;;;;;;;;;;;;;;;;OA6BvC,CAAC"}

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import screenfull from 'screenfull';
 import { PopupStack } from '@workday/canvas-kit-popup-stack';
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { usePopupModel } from './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
@@ -9,8 +11,7 @@ import { PopupStack } from '@workday/canvas-kit-popup-stack';
  * 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 var useTransferOnFullscreenEnter = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+export var useTransferOnFullscreenEnter = createElemPropsHook(usePopupModel)(function (model) {
     var handler = React.useCallback(function (event) {
         if (screenfull.isFullscreen && model.state.stackRef.current) {
             PopupStack.transferToCurrentContext({
@@ -32,5 +33,5 @@ export var useTransferOnFullscreenEnter = function (model, elemProps) {
         }
         return;
     }, [handler, visible]);
-    return elemProps;
-};
+    return {};
+});

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

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * 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.
@@ -5,5 +6,24 @@
  * 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: (model: import("../../..").Model<import("./usePopupModel").PopupState, import("./usePopupModel").PopupEvents>, elemProps?: {}) => {};
+export declare const useTransferOnFullscreenExit: <P extends {}, R>(model: {
+    state: {
+        stackRef: React.RefObject<HTMLDivElement>;
+        targetRef: React.RefObject<HTMLButtonElement>;
+        initialFocusRef: React.RefObject<any> | undefined;
+        returnFocusRef: React.RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        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/es6/popup/lib/hooks/useTransferOnFullscreenExit.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTransferOnFullscreenExit.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/useTransferOnFullscreenExit.ts"],"names":[],"mappings":"AAMA;;;;;;GAMG;AACH,eAAO,MAAM,2BAA2B,sIA6BvC,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;;;;;;;;;;;;;;;;;;;OA6BtC,CAAC"}

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

@@ -1,6 +1,8 @@
 import React from 'react';
 import screenfull from 'screenfull';
 import { PopupStack } from '@workday/canvas-kit-popup-stack';
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { usePopupModel } from './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.
@@ -8,8 +10,7 @@ import { PopupStack } from '@workday/canvas-kit-popup-stack';
  * 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 var useTransferOnFullscreenExit = function (model, elemProps) {
-    if (elemProps === void 0) { elemProps = {}; }
+export var useTransferOnFullscreenExit = createElemPropsHook(usePopupModel)(function (model) {
     var handler = React.useCallback(function (event) {
         if (!screenfull.isFullscreen && model.state.stackRef.current) {
             PopupStack.transferToCurrentContext({
@@ -31,5 +32,5 @@ export var useTransferOnFullscreenExit = function (model, elemProps) {
         }
         return;
     }, [handler, visible]);
-    return elemProps;
-};
+    return {};
+});

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

@@ -33,6 +33,7 @@ export interface RadioProps extends Themeable {
      * The value of the Radio button.
      */
     value?: string;
+    variant?: 'inverse' | undefined;
 }
 export declare const Radio: import("../../common").ElementComponent<"input", RadioProps>;
 export default Radio;

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

@@ -1 +1 @@
-{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../../../radio/lib/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAML,SAAS,EAEV,MAAM,kCAAkC,CAAC;AAQ1C,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;CAChB;AAyLD,eAAO,MAAM,KAAK,8DAqChB,CAAC;AAEH,eAAe,KAAK,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;AAQ1C,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;AAkPD,eAAO,MAAM,KAAK,8DAgDhB,CAAC;AAEH,eAAe,KAAK,CAAC"}

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

@@ -55,7 +55,11 @@ var RadioRipple = styled('span')({
     width: radioWidth,
     position: 'absolute',
     pointerEvents: 'none',
-    zIndex: -1,
+}, function (_a) {
+    var variant = _a.variant;
+    return ({
+        opacity: variant === 'inverse' ? '0.4' : '1',
+    });
 });
 var RadioInput = styled('input')({
     borderRadius: radioBorderRadius,
@@ -70,7 +74,7 @@ var RadioInput = styled('input')({
         outline: 'none',
     },
 }, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, _b = _a.theme.canvas.palette, themePrimary = _b.primary, themeFocusOutline = _b.common.focusOutline;
+    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
@@ -89,25 +93,52 @@ var RadioInput = styled('input')({
         // input (which is visually hidden)
         '&:hover ~ div:first-of-type': {
             backgroundColor: checked
-                ? themePrimary.main
+                ? variant === 'inverse'
+                    ? colors.frenchVanilla100
+                    : themePrimary.main
                 : disabled
                     ? inputColors.disabled.background
                     : 'white',
             borderColor: checked
-                ? themePrimary.main
+                ? variant === 'inverse'
+                    ? colors.soap300
+                    : themePrimary.main
                 : disabled
                     ? inputColors.disabled.border
-                    : inputColors.hoverBorder,
+                    : variant === 'inverse'
+                        ? colors.soap300
+                        : inputColors.hoverBorder,
             borderWidth: '1px',
         }, '&:focus, &focus:hover': {
-            '& ~ div:first-of-type': {
-                borderColor: checked ? themePrimary.main : themeFocusOutline,
-                borderWidth: '2px',
-            },
-        }, '&:checked:focus ~ div:first-of-type': __assign({}, focusRing({ separation: 2, outerColor: themeFocusOutline })) }, mouseFocusBehavior({
-        '&:focus ~ div:first-of-type': __assign(__assign({}, focusRing({ width: 0, outerColor: themeFocusOutline })), { borderWidth: '1px', borderColor: checked ? themePrimary.main : inputColors.border }),
+            '& ~ div:first-of-type': __assign({ borderWidth: '2px', borderColor: variant === 'inverse' ? colors.blackPepper400 : themeFocusOutline, boxShadow: 'none' }, focusRing({
+                width: variant === 'inverse' ? 2 : 0,
+                separation: 0,
+                animate: false,
+                innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+                outerColor: variant === 'inverse' ? colors.frenchVanilla100 : undefined,
+            })),
+        }, '&:checked:focus ~ div:first-of-type': __assign(__assign({}, focusRing({
+            separation: 2,
+            width: 2,
+            innerColor: variant === 'inverse' ? colors.blackPepper400 : undefined,
+            outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        })), { borderColor: variant === 'inverse' ? colors.frenchVanilla100 : themePrimary.main, borderWidth: '2px' }) }, mouseFocusBehavior({
+        '&:focus ~ div:first-of-type': __assign(__assign({}, focusRing({
+            width: 0,
+            outerColor: variant === 'inverse' ? colors.frenchVanilla100 : themeFocusOutline,
+        })), { borderWidth: '1px', borderColor: checked
+                ? variant === 'inverse'
+                    ? colors.soap300
+                    : themePrimary.main
+                : inputColors.border }),
         '&:focus:hover ~ div:first-of-type, &:focus:active ~ div:first-of-type': {
-            borderColor: checked ? themePrimary.main : inputColors.hoverBorder,
+            borderColor: checked
+                ? variant === 'inverse'
+                    ? colors.soap300
+                    : themePrimary.main
+                : variant === 'inverse'
+                    ? colors.soap300
+                    : inputColors.hoverBorder,
         },
     })));
 });
@@ -127,18 +158,25 @@ var RadioBackground = styled('div')({
     transition: 'border 200ms ease, background 200ms',
     width: radioWidth,
 }, function (_a) {
-    var checked = _a.checked, disabled = _a.disabled, themePrimary = _a.theme.canvas.palette.primary;
+    var checked = _a.checked, disabled = _a.disabled, variant = _a.variant, themePrimary = _a.theme.canvas.palette.primary;
     return ({
         borderColor: checked
-            ? themePrimary.main
+            ? variant === 'inverse'
+                ? colors.soap300
+                : themePrimary.main
             : disabled
                 ? inputColors.disabled.border
-                : inputColors.border,
+                : variant === 'inverse'
+                    ? colors.soap300
+                    : inputColors.border,
         backgroundColor: checked
-            ? themePrimary.main
+            ? variant === 'inverse'
+                ? colors.frenchVanilla100
+                : themePrimary.main
             : disabled
                 ? inputColors.disabled.background
                 : 'white',
+        opacity: disabled && variant === 'inverse' ? '.4' : '1',
     });
 });
 var RadioCheck = styled('div')({
@@ -150,9 +188,11 @@ var RadioCheck = styled('div')({
     transition: 'transform 200ms ease, opacity 200ms ease',
     width: radioDot,
 }, function (_a) {
-    var theme = _a.theme;
+    var theme = _a.theme, variant = _a.variant;
     return ({
-        backgroundColor: theme.canvas.palette.primary.contrast,
+        backgroundColor: variant === 'inverse'
+            ? theme.canvas.palette.primary.main
+            : theme.canvas.palette.primary.contrast,
     });
 }, function (_a) {
     var checked = _a.checked;
@@ -162,21 +202,29 @@ var RadioCheck = styled('div')({
     });
 });
 var RadioLabel = styled('label')(__assign(__assign({}, canvas.type.levels.subtext.large), { paddingLeft: radioLabelDistance }), function (_a) {
-    var disabled = _a.disabled;
-    return (disabled ? { color: inputColors.disabled.text } : { cursor: 'pointer' });
+    var variant = _a.variant;
+    return (variant === 'inverse' ? { color: colors.frenchVanilla100 } : undefined);
+}, function (_a) {
+    var disabled = _a.disabled, variant = _a.variant;
+    return disabled
+        ? {
+            color: variant === 'inverse' ? colors.frenchVanilla100 : inputColors.disabled.text,
+            opacity: variant === 'inverse' ? '.4' : '1',
+        }
+        : { cursor: 'pointer' };
 });
 export var Radio = 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, elemProps = __rest(_a, ["checked", "id", "label", "disabled", "name", "onChange", "value"]);
+        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 = 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 }, elemProps)),
-                React.createElement(RadioRipple, null),
-                React.createElement(RadioBackground, { checked: checked, disabled: disabled },
-                    React.createElement(RadioCheck, { checked: checked }))),
-            label && (React.createElement(RadioLabel, { htmlFor: inputId, disabled: disabled }, label))));
+                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(RadioRipple, { variant: variant }),
+                React.createElement(RadioBackground, { checked: checked, disabled: disabled, variant: variant },
+                    React.createElement(RadioCheck, { checked: checked, variant: variant }))),
+            label && (React.createElement(RadioLabel, { htmlFor: inputId, disabled: disabled, variant: variant }, label))));
     },
 });
 export default Radio;

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

@@ -2,7 +2,7 @@ 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
+            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) {

package/dist/es6/segmented-control/lib/SegmentedControl.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { IconButtonProps } from '@workday/canvas-kit-react/button';
+import { SegmentedControlButtonProps } from './SegmentedControlButton';
 export interface SegmentedControlProps {
     /**
-     * The IconButton children of the SegmentedControl (must be at least two).
+     * The Button children of the SegmentedControl (must be at least two).
      * TODO: Add support for text children
      */
-    children: React.ReactElement<IconButtonProps>[];
+    children: React.ReactElement<SegmentedControlButtonProps>[];
     /**
-     * The value or index of the IconButton that the SegmentedControl should be toggled on to.
-     * If a string is provided, the IconButton with the corresponding value will be selected.
-     * If a number is provided, the IconButton with the corresponding index will be selected.
+     * The value or index of the Button that the SegmentedControl should be toggled on to.
+     * If a string is provided, the Button with the corresponding value will be selected.
+     * If a number is provided, the Button with the corresponding index will be selected.
      * @default 0
      */
     value?: string | number;
@@ -20,6 +20,8 @@ export interface SegmentedControlProps {
      */
     onChange?: (value: string | number) => void;
 }
-declare const SegmentedControl: ({ value, children, onChange, ...elemProps }: SegmentedControlProps) => JSX.Element;
+export declare const SegmentedControl: import("../../common").ElementComponent<"div", SegmentedControlProps> & {
+    Button: import("../../common").ElementComponent<"button", SegmentedControlButtonProps>;
+};
 export default SegmentedControl;
 //# sourceMappingURL=SegmentedControl.d.ts.map

package/dist/es6/segmented-control/lib/SegmentedControl.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAa,eAAe,EAAC,MAAM,kCAAkC,CAAC;AAG7E,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,eAAe,CAAC,EAAE,CAAC;IAEhD;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7C;AAsED,QAAA,MAAM,gBAAgB,qFAsBrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"SegmentedControl.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControl.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAyB,2BAA2B,EAAC,MAAM,0BAA0B,CAAC;AAE7F,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,2BAA2B,CAAC,EAAE,CAAC;IAE5D;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;CAC7C;AAsBD,eAAO,MAAM,gBAAgB;;CA+B3B,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/dist/es6/segmented-control/lib/SegmentedControl.js

@@ -21,50 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { borderRadius, colors } from '@workday/canvas-kit-react/tokens';
-import { IconButton } from '@workday/canvas-kit-react/button';
-import { mouseFocusBehavior, styled } from '@workday/canvas-kit-react/common';
-var SegmentedControlContainer = styled('div')({
-    '& button': {
-        borderRadius: borderRadius.zero,
-        border: "1px solid " + colors.soap500,
-        borderLeft: 'none',
-        '&[aria-pressed="true"]': {
-            borderColor: colors.blueberry400,
-            '&:hover, &:focus:hover': {
-                background: colors.blueberry400,
-            },
-        },
-        '&:first-of-type': {
-            borderRadius: borderRadius.m + " 0 0 " + borderRadius.m,
-            borderLeft: "1px solid " + colors.soap500,
-        },
-        '&:last-of-type': {
-            borderRadius: "0 " + borderRadius.m + " " + borderRadius.m + " 0",
-        },
-        '&:focus': __assign({ borderRadius: borderRadius.m, zIndex: 1, animation: 'none', transition: 'all 120ms, border-radius 1ms' }, mouseFocusBehavior({
-            '&': {
-                borderRadius: borderRadius.zero,
-                '&:first-of-type': {
-                    borderRadius: borderRadius.m + " 0 0 " + borderRadius.m,
-                },
-                '&:last-of-type': {
-                    borderRadius: "0 " + borderRadius.m + " " + borderRadius.m + " 0",
-                },
-            },
-        })),
-    },
-}, function (_a) {
-    var theme = _a.theme;
-    return ({
-        '& button[aria-pressed="true"]': {
-            borderColor: theme.canvas.palette.primary.main,
-            '&:hover, &:focus:hover': {
-                background: theme.canvas.palette.primary.main,
-            },
-        },
-    });
-});
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { SegmentedControlButton } from './SegmentedControlButton';
 var onButtonClick = function (existingOnClick, onChange, index, event) {
     if (existingOnClick) {
         existingOnClick(event);
@@ -79,17 +37,22 @@ var onButtonClick = function (existingOnClick, onChange, index, event) {
         }
     }
 };
-var SegmentedControl = function (_a) {
-    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(SegmentedControlContainer, __assign({}, elemProps), React.Children.map(children, function (child, index) {
-        if (typeof child.type === typeof IconButton) {
-            return React.cloneElement(child, {
-                toggled: typeof value === 'number' ? index === value : child.props.value === value,
-                variant: 'squareFilled',
-                onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
-            });
-        }
-        return child;
-    })));
-};
+export var SegmentedControl = 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) {
+            if (typeof child.type === typeof SegmentedControlButton) {
+                return React.cloneElement(child, {
+                    toggled: typeof value === 'number' ? index === value : child.props.value === value,
+                    onClick: onButtonClick.bind(undefined, child.props.onClick, onChange, index),
+                });
+            }
+            return child;
+        })));
+    },
+    subComponents: {
+        Button: SegmentedControlButton,
+    },
+});
 export default SegmentedControl;

package/dist/es6/segmented-control/lib/SegmentedControlButton.d.ts

@@ -0,0 +1,8 @@
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+export interface SegmentedControlButtonProps {
+    toggled?: boolean;
+    icon: CanvasSystemIcon;
+    value?: string | number;
+}
+export declare const SegmentedControlButton: import("../../common").ElementComponent<"button", SegmentedControlButtonProps>;
+//# sourceMappingURL=SegmentedControlButton.d.ts.map

package/dist/es6/segmented-control/lib/SegmentedControlButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControlButton.d.ts","sourceRoot":"","sources":["../../../../segmented-control/lib/SegmentedControlButton.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AA4E9D,MAAM,WAAW,2BAA2B;IAC1C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,EAAE,gBAAgB,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACzB;AAED,eAAO,MAAM,sBAAsB,gFAiBjC,CAAC"}