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

package/dist/es6/tokens/lib/type/index.js

@@ -18,10 +18,10 @@ export { fontFamily, monoFontFamily } from './fontFamilies';
  *
  * You can find more detailed information by inspecting individual properties.
  */
-var properties = {
-    fontFamilies: fontFamilies,
-    fontSizes: fontSizes,
-    fontWeights: fontWeights,
+const properties = {
+    fontFamilies,
+    fontSizes,
+    fontWeights,
 };
 /**
  * ### Canvas Type Tokens
@@ -34,8 +34,8 @@ var properties = {
  * - `properties` - provide low-level type properties (font families, sizes, and weights)
  * - `variants` - provide modifiers for text styles (error, hint, and inverse)
  * */
-export var type = {
-    levels: levels,
-    properties: properties,
-    variants: variants,
+export const type = {
+    levels,
+    properties,
+    variants,
 };

package/dist/es6/tokens/lib/type/levels.js

@@ -32,7 +32,7 @@ import { fontWeights } from './fontWeights';
  * );
  * ```
  */
-export var levels = {
+export const levels = {
     title: {
         large: {
             fontFamily: fontFamilies.default,

package/dist/es6/tokens/lib/type/variants.js

@@ -25,7 +25,7 @@ import { typeColors, statusColors } from '@workday/canvas-colors-web';
  * );
  * ```
  */
-export var variants = {
+export const variants = {
     error: {
         color: statusColors.error,
     },

package/dist/es6/tooltip/lib/OverflowTooltip.js

@@ -1,25 +1,3 @@
-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 __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;
-};
 import * as React from 'react';
 import { getTransformFromPlacement, Popper } from '@workday/canvas-kit-react/popup';
 import { mergeCallback } from '@workday/canvas-kit-react/common';
@@ -29,8 +7,8 @@ import { useTooltip } from './useTooltip';
  * Look for an element within the tree for an overflow element (auto, scroll, clip, or hidden).
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
  */
-export var findOverflowElement = function (element) {
-    var style = getComputedStyle(element);
+export const findOverflowElement = (element) => {
+    const style = getComputedStyle(element);
     if (style.overflow === 'auto' ||
         style.overflow === 'scroll' ||
         style.overflow === 'clip' ||
@@ -38,8 +16,8 @@ export var findOverflowElement = function (element) {
         return element;
     }
     else if (element.children) {
-        for (var i = 0; i < element.children.length; i++) {
-            var overflowElement = findOverflowElement(element.children[i]);
+        for (let i = 0; i < element.children.length; i++) {
+            const overflowElement = findOverflowElement(element.children[i]);
             if (overflowElement) {
                 return overflowElement;
             }
@@ -52,14 +30,14 @@ export var findOverflowElement = function (element) {
  * Look for an element within the tree for a `text-overflow` CSS property of `ellipsis`.
  * This could be the passed element, or a descendant. If no element is found, `null` is returned.
  */
-export var findEllipsisElement = function (element) {
-    var style = getComputedStyle(element);
+export const findEllipsisElement = (element) => {
+    const style = getComputedStyle(element);
     if (style.textOverflow === 'ellipsis' || Number(style.webkitLineClamp) > 0) {
         return element;
     }
     else {
-        for (var i = 0; i < element.children.length; i++) {
-            var overflowElement = findEllipsisElement(element.children[i]);
+        for (let i = 0; i < element.children.length; i++) {
+            const overflowElement = findEllipsisElement(element.children[i]);
             if (overflowElement) {
                 return overflowElement;
             }
@@ -67,17 +45,16 @@ export var findEllipsisElement = function (element) {
         return null;
     }
 };
-var isOverflowed = function (element) {
-    var overflowElement = findEllipsisElement(element) || findOverflowElement(element);
+const isOverflowed = (element) => {
+    const overflowElement = findEllipsisElement(element) || findOverflowElement(element);
     if (overflowElement) {
         return (overflowElement.scrollWidth > overflowElement.clientWidth ||
             overflowElement.scrollHeight > overflowElement.clientHeight);
     }
     return false;
 };
-function mergeCallbacks(elemProps, componentProps, keys) {
-    if (keys === void 0) { keys = Object.keys(componentProps); }
-    return keys.reduce(function (mergedProps, key) {
+function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentProps)) {
+    return keys.reduce((mergedProps, key) => {
         if (typeof elemProps[key] === 'function') {
             mergedProps[key] = mergeCallback(componentProps[key], elemProps[key]);
         }
@@ -87,30 +64,33 @@ function mergeCallbacks(elemProps, componentProps, keys) {
         return mergedProps;
     }, {});
 }
-export var OverflowTooltip = function (_a) {
-    var _b = _a.placement, placement = _b === void 0 ? 'top' : _b, children = _a.children, elemProps = __rest(_a, ["placement", "children"]);
-    var _c = React.useState(''), titleText = _c[0], setTitleText = _c[1];
-    var _d = useTooltip({ type: 'muted' }), targetProps = _d.targetProps, popperProps = _d.popperProps, tooltipProps = _d.tooltipProps;
-    var onMouseEnter = function (event) {
-        var target = event.currentTarget;
+export const OverflowTooltip = ({ placement = 'top', children, ...elemProps }) => {
+    const [titleText, setTitleText] = React.useState('');
+    const { targetProps, popperProps, tooltipProps } = useTooltip({ type: 'muted' });
+    const onMouseEnter = (event) => {
+        const target = event.currentTarget;
         setTitleText(target instanceof HTMLElement ? target.innerText : '');
         if (isOverflowed(target)) {
             targetProps.onMouseEnter(event);
         }
     };
-    var onFocus = function (event) {
-        var target = event.currentTarget;
+    const onFocus = (event) => {
+        const target = event.currentTarget;
         setTitleText(target instanceof HTMLElement ? target.innerText : '');
         if (isOverflowed(target)) {
             targetProps.onFocus(event);
         }
     };
     return (React.createElement(React.Fragment, null,
-        React.cloneElement(children, __assign(__assign(__assign({}, targetProps), { onMouseEnter: onMouseEnter,
-            onFocus: onFocus, 'aria-label': undefined }), mergeCallbacks(__assign(__assign({}, targetProps), { onMouseEnter: onMouseEnter, onFocus: onFocus }), children.props))),
-        React.createElement(Popper, __assign({ placement: placement }, popperProps), function (_a) {
-            var placement = _a.placement;
-            var transformOrigin = getTransformFromPlacement(placement);
-            return (React.createElement(TooltipContainer, __assign({ transformOrigin: transformOrigin }, tooltipProps, elemProps), titleText));
+        React.cloneElement(children, {
+            ...targetProps,
+            onMouseEnter,
+            onFocus,
+            'aria-label': undefined,
+            ...mergeCallbacks({ ...targetProps, onMouseEnter, onFocus }, children.props),
+        }),
+        React.createElement(Popper, Object.assign({ placement: placement }, popperProps), ({ placement }) => {
+            const transformOrigin = getTransformFromPlacement(placement);
+            return (React.createElement(TooltipContainer, Object.assign({ transformOrigin: transformOrigin }, tooltipProps, elemProps), titleText));
         })));
 };

package/dist/es6/tooltip/lib/Tooltip.js

@@ -1,34 +1,11 @@
-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 __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;
-};
 import * as React from 'react';
 import innerText from 'react-innertext';
 import { getTransformFromPlacement, Popper } from '@workday/canvas-kit-react/popup';
 import { createComponent, mergeCallback } from '@workday/canvas-kit-react/common';
 import { TooltipContainer } from './TooltipContainer';
 import { useTooltip } from './useTooltip';
-function mergeCallbacks(elemProps, componentProps, keys) {
-    if (keys === void 0) { keys = Object.keys(componentProps); }
-    return keys.reduce(function (mergedProps, key) {
+function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentProps)) {
+    return keys.reduce((mergedProps, key) => {
         if (typeof elemProps[key] === 'function') {
             mergedProps[key] = mergeCallback(componentProps[key], elemProps[key]);
         }
@@ -38,25 +15,27 @@ function mergeCallbacks(elemProps, componentProps, keys) {
         return mergedProps;
     }, {});
 }
-export var Tooltip = createComponent('div')({
+export const Tooltip = createComponent('div')({
     displayName: 'Tooltip',
-    Component: function (_a) {
-        var _b = _a.type, type = _b === void 0 ? 'label' : _b, _c = _a.placement, placement = _c === void 0 ? 'top' : _c, title = _a.title, children = _a.children, _d = _a.showDelay, showDelay = _d === void 0 ? 300 : _d, _e = _a.hideDelay, hideDelay = _e === void 0 ? 100 : _e, elemProps = __rest(_a, ["type", "placement", "title", "children", "showDelay", "hideDelay"]);
-        var titleText = innerText(title);
-        var _f = useTooltip({
-            type: type,
-            titleText: titleText,
-            showDelay: showDelay,
-            hideDelay: hideDelay,
-        }), targetProps = _f.targetProps, popperProps = _f.popperProps, tooltipProps = _f.tooltipProps;
+    Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, ...elemProps }) {
+        const titleText = innerText(title);
+        const { targetProps, popperProps, tooltipProps } = useTooltip({
+            type,
+            titleText,
+            showDelay,
+            hideDelay,
+        });
         return (React.createElement(React.Fragment, null,
-            React.cloneElement(children, __assign(__assign(__assign({}, targetProps), mergeCallbacks(children.props, targetProps)), (type === 'muted' && children.props['aria-label']
-                ? { 'aria-label': children.props['aria-label'] }
-                : {}))),
-            React.createElement(Popper, __assign({ placement: placement }, popperProps), function (_a) {
-                var placement = _a.placement;
-                var transformOrigin = getTransformFromPlacement(placement);
-                return (React.createElement(TooltipContainer, __assign({ transformOrigin: transformOrigin }, elemProps, tooltipProps), title));
+            React.cloneElement(children, {
+                ...targetProps,
+                ...mergeCallbacks(children.props, targetProps),
+                ...(type === 'muted' && children.props['aria-label']
+                    ? { 'aria-label': children.props['aria-label'] }
+                    : {}),
+            }),
+            React.createElement(Popper, Object.assign({ placement: placement }, popperProps), ({ placement }) => {
+                const transformOrigin = getTransformFromPlacement(placement);
+                return (React.createElement(TooltipContainer, Object.assign({ transformOrigin: transformOrigin }, elemProps, tooltipProps), title));
             })));
     },
 });

package/dist/es6/tooltip/lib/TooltipContainer.js

@@ -1,34 +1,34 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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);
-};
 import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { borderRadius, colors, space, spaceNumbers, type } from '@workday/canvas-kit-react/tokens';
 import { getTranslateFromOrigin } from '@workday/canvas-kit-react/common';
-var tooltipAnimation = function (transformOrigin) {
-    var translate = getTranslateFromOrigin(transformOrigin, space.xxxs);
-    return keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "], ["\n    0% {\n      opacity: 0;\n      transform: translate(", "px, ", "px);\n    }\n    100% {\n      opacity: 1;\n      transform: translate(0);\n    }\n  "])), translate.x, translate.y);
+const tooltipAnimation = (transformOrigin) => {
+    const translate = getTranslateFromOrigin(transformOrigin, space.xxxs);
+    return keyframes `
+    0% {
+      opacity: 0;
+      transform: translate(${translate.x}px, ${translate.y}px);
+    }
+    100% {
+      opacity: 1;
+      transform: translate(0);
+    }
+  `;
 };
-var defaultTransformOrigin = {
+const defaultTransformOrigin = {
     vertical: 'bottom',
     horizontal: 'center',
 };
-export var TooltipContainer = styled('div')(__assign(__assign({}, type.levels.subtext.medium), { display: 'inline-flex', position: 'relative', padding: spaceNumbers.xxs + spaceNumbers.xxxs, color: colors.frenchVanilla100, a: {
+export const TooltipContainer = styled('div')({
+    ...type.levels.subtext.medium,
+    display: 'inline-flex',
+    position: 'relative',
+    padding: spaceNumbers.xxs + spaceNumbers.xxxs,
+    color: colors.frenchVanilla100,
+    a: {
         color: colors.frenchVanilla100,
         textDecoration: 'underline',
-    }, 
+    },
     // use :before vs margin to increase the tooltip hit-box
     ':before': {
         content: '""',
@@ -41,30 +41,33 @@ export var TooltipContainer = styled('div')(__assign(__assign({}, type.levels.su
         left: 0,
         right: 0,
         bottom: 0,
-    }, 
+    },
     // offset tooltips by 2 pixels when a keyboard focus ring is detected
     '[data-whatinput=keyboard] &': {
         padding: spaceNumbers.xxs + spaceNumbers.xxxs + 2,
         ':before': {
             margin: spaceNumbers.xxxs + 2,
         },
-    }, 
+    },
     // Hide tooltip when the reference element is either clipped or fully hidden
     '[data-popper-reference-hidden] &': {
         visibility: 'hidden',
         pointerEvents: 'none',
-    }, 
+    },
     // Fix offsets based on placement
     '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
         left: -spaceNumbers.xxxs,
-    }, '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
+    },
+    '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
         right: -spaceNumbers.xxxs,
-    }, '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
+    },
+    '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
         top: -spaceNumbers.xxxs,
-    }, '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
+    },
+    '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
         bottom: -spaceNumbers.xxxs,
-    } }), function (_a) {
-    var _b = _a.transformOrigin, transformOrigin = _b === void 0 ? defaultTransformOrigin : _b;
+    },
+}, ({ transformOrigin = defaultTransformOrigin }) => {
     if (transformOrigin === null) {
         return {};
     }
@@ -73,8 +76,7 @@ export var TooltipContainer = styled('div')(__assign(__assign({}, type.levels.su
         animationDuration: '150ms',
         animationTimingFunction: 'ease-out',
         transformOrigin: transformOrigin
-            ? transformOrigin.vertical + " " + transformOrigin.horizontal
+            ? `${transformOrigin.vertical} ${transformOrigin.horizontal}`
             : 'top center',
     };
 });
-var templateObject_1;

package/dist/es6/tooltip/lib/useTooltip.js

@@ -1,30 +1,29 @@
 import * as React from 'react';
 import { useCloseOnEscape, useAlwaysCloseOnOutsideClick, usePopupModel, useCloseOnFullscreenExit, useCloseOnTargetHidden, } from '@workday/canvas-kit-react/popup';
 import { useUniqueId } from '@workday/canvas-kit-react/common';
-var useIntentTimer = function (fn, waitMs) {
-    if (waitMs === void 0) { waitMs = 0; }
-    var timer = React.useRef();
-    var start = function () {
+const useIntentTimer = (fn, waitMs = 0) => {
+    const timer = React.useRef();
+    const start = () => {
         timer.current = window.setTimeout(fn, waitMs);
     };
-    var clear = function () {
+    const clear = () => {
         window.clearTimeout(timer.current);
         timer.current = undefined;
     };
     // be sure to clear our timeout
-    React.useEffect(function () {
-        return function () {
+    React.useEffect(() => {
+        return () => {
             window.clearTimeout(timer.current);
         };
     }, [timer]);
     return {
-        start: start,
-        clear: clear,
+        start,
+        clear,
     };
 };
-var isInteractiveElement = function (element) {
-    var tagName = element.tagName.toLowerCase();
-    var tabIndex = element.getAttribute('tabindex');
+const isInteractiveElement = (element) => {
+    const tagName = element.tagName.toLowerCase();
+    const tabIndex = element.getAttribute('tabindex');
     switch (tagName) {
         case 'button':
         case 'input':
@@ -40,33 +39,32 @@ var isInteractiveElement = function (element) {
  * Convenience hook for creating components with tooltips. It will return an object of properties to mix
  * into a target, popper and tooltip
  */
-export function useTooltip(_a) {
-    var _b = _a === void 0 ? {} : _a, _c = _b.type, type = _c === void 0 ? 'label' : _c, _d = _b.titleText, titleText = _d === void 0 ? '' : _d, _e = _b.showDelay, showDelay = _e === void 0 ? 300 : _e, _f = _b.hideDelay, hideDelay = _f === void 0 ? 100 : _f;
-    var mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
-    var popupModel = usePopupModel();
-    var _g = React.useState(null), anchorElement = _g[0], setAnchorElement = _g[1];
-    var id = useUniqueId();
-    var intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
-    var intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
-    var onHide = function () {
+export function useTooltip({ type = 'label', titleText = '', showDelay = 300, hideDelay = 100, } = {}) {
+    const mouseDownRef = React.useRef(false); // use to prevent newly focused from making tooltip flash
+    const popupModel = usePopupModel();
+    const [anchorElement, setAnchorElement] = React.useState(null);
+    const id = useUniqueId();
+    const intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
+    const intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
+    const onHide = () => {
         intentTimerHide.start();
         intentTimerShow.clear();
     };
-    var onOpen = function () {
+    const onOpen = () => {
         intentTimerShow.start();
         intentTimerHide.clear();
     };
-    var onOpenFromTarget = function (event) {
+    const onOpenFromTarget = (event) => {
         setAnchorElement(event.currentTarget);
         onOpen();
     };
-    var onFocus = function (event) {
+    const onFocus = (event) => {
         if (!mouseDownRef.current) {
             onOpenFromTarget(event);
         }
         mouseDownRef.current = false;
     };
-    var onMouseDown = function (event) {
+    const onMouseDown = (event) => {
         mouseDownRef.current = true;
         if (isInteractiveElement(event.currentTarget)) {
             popupModel.events.hide();
@@ -76,16 +74,16 @@ export function useTooltip(_a) {
     useAlwaysCloseOnOutsideClick(popupModel);
     useCloseOnFullscreenExit(popupModel);
     useCloseOnTargetHidden(popupModel);
-    var visible = popupModel.state.visibility !== 'hidden';
-    var targetProps = {
+    const visible = popupModel.state.visibility !== 'hidden';
+    const targetProps = {
         // extra description of the target element for assistive technology
         'aria-describedby': type === 'describe' && visible ? id : undefined,
         // This will replace the accessible name of the target element
         'aria-label': type === 'label' ? titleText : undefined,
         onMouseEnter: onOpenFromTarget,
         onMouseLeave: onHide,
-        onMouseDown: onMouseDown,
-        onFocus: onFocus,
+        onMouseDown,
+        onFocus,
         onBlur: onHide,
     };
     // remove `aria-describedby` if undefined to not override what's provided
@@ -94,11 +92,11 @@ export function useTooltip(_a) {
     }
     return {
         /** Mix these properties into the target element. **Must be an Element** */
-        targetProps: targetProps,
+        targetProps,
         /** Mix these properties into the `Popper` component */
         popperProps: {
             open: visible,
-            anchorElement: anchorElement,
+            anchorElement,
             ref: popupModel.state.stackRef,
         },
         /** Mix these properties into the `TooltipContainer` component */

package/icon/lib/AccentIcon.tsx

@@ -3,14 +3,15 @@ import {colors} from '@workday/canvas-kit-react/tokens';
 import {CanvasAccentIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import {Icon, IconProps} from './Icon';
-import {createComponent} from '@workday/canvas-kit-react/common';
+import {createComponent, getColor} from '@workday/canvas-kit-react/common';
+import {SystemPropValues} from '@workday/canvas-kit-react/layout';
 
 export interface AccentIconStyles {
   /**
    * The fill color of the AccentIcon.
    * @default colors.blueberry500
    */
-  color?: string;
+  color?: SystemPropValues['color'];
   /**
    * If true, set the background fill of the AccentIcon to `transparent`. If false, set the background fill of the AccentIcon to `colors.frenchVanilla100`.
    * @default false
@@ -18,9 +19,7 @@ export interface AccentIconStyles {
   transparent?: boolean;
 }
 
-export interface AccentIconProps
-  extends AccentIconStyles,
-    Omit<IconProps, 'src' | 'type' | 'color'> {
+export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src' | 'type'> {
   /**
    *  The icon to display from `@workday/canvas-accent-icons-web`.
    */
@@ -37,7 +36,7 @@ export const accentIconStyles = ({
   transparent = false,
 }: AccentIconStyles): CSSObject => ({
   '& .color-500': {
-    fill: color,
+    fill: getColor(color),
   },
   '& .french-vanilla-100': {
     fill: transparent ? 'transparent' : colors.frenchVanilla100,

package/icon/lib/SystemIcon.tsx

@@ -3,8 +3,7 @@ import {iconColors} from '@workday/canvas-kit-react/tokens';
 import {CanvasSystemIcon, CanvasIconTypes} from '@workday/design-assets-types';
 import {CSSObject} from '@emotion/styled';
 import {Icon, IconProps} from './Icon';
-import {createComponent} from '@workday/canvas-kit-react/common';
-import {getColor} from './utils';
+import {createComponent, getColor} from '@workday/canvas-kit-react/common';
 import {SystemPropValues} from '@workday/canvas-kit-react/layout';
 
 export interface SystemIconStyles {

package/icon/lib/SystemIconCircle.tsx

@@ -4,7 +4,8 @@ import isPropValid from '@emotion/is-prop-valid';
 import {colors, borderRadius} from '@workday/canvas-kit-react/tokens';
 import {SystemIcon, SystemIconProps} from './SystemIcon';
 import {CanvasSystemIcon} from '@workday/design-assets-types';
-import {createComponent, pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {createComponent, getColor, pickForegroundColor} from '@workday/canvas-kit-react/common';
+import {SystemPropValues} from '@workday/canvas-kit-react/layout';
 
 export enum SystemIconCircleSize {
   xs = 16,
@@ -20,7 +21,7 @@ export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirr
    * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
    * @default colors.soap300
    */
-  background?: string;
+  background?: SystemPropValues['color'];
   /**
    * The icon to display from `@workday/canvas-accent-icons-web`.
    */
@@ -50,7 +51,7 @@ const Container = styled('div', {
     },
   },
   ({background}) => ({
-    background: background,
+    background: getColor(background),
   }),
   ({size}) => ({
     width: size,

package/icon/lib/utils.ts

@@ -1,15 +1,7 @@
 import {CanvasIcon, CanvasIconTypes} from '@workday/design-assets-types';
-import {CanvasColor, colors} from '@workday/canvas-kit-react/tokens';
 
 export function validateIconType(icon: CanvasIcon, expectedType: CanvasIconTypes) {
   if (icon.type !== expectedType) {
     throw `${icon.name}: Icon type "${icon.type}" does not match expected type "${expectedType}"`;
   }
 }
-
-export function getColor(value?: CanvasColor | string) {
-  if (value! in colors) {
-    return colors[value as keyof typeof colors];
-  }
-  return value;
-}

package/layout/lib/utils/position.ts

@@ -30,6 +30,10 @@ export type PositionStyleProps = {
    * - no bidirectional support
    * */
   left?: number | string;
+  /**
+   * - sets [CSS inset property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset)
+   */
+  inset?: number | string;
   /**
    * - sets [CSS inset-inline-start property](https://developer.mozilla.org/en-US/docs/Web/CSS/inset-inline-start)
    * - bidirectional support
@@ -73,6 +77,11 @@ export const positionStyleFnConfigs: StyleFnConfig[] = [
     properties: ['left'],
     system: 'none',
   },
+  {
+    name: 'inset',
+    properties: ['inset'],
+    system: 'none',
+  },
   {
     name: 'insetInlineStart',
     properties: ['insetInlineStart'],

package/modal/lib/ModalBody.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import {
   createSubcomponent,
   ExtractProps,
-  getCanvasTheme,
+  getTheme,
   styled,
   StyledType,
 } from '@workday/canvas-kit-react/common';
@@ -15,7 +15,7 @@ import {useModalModel} from './hooks';
 export interface ModalBodyProps extends ExtractProps<typeof Popup.Body, never> {}
 
 const ResponsiveModalBody = styled(Popup.Body)<ModalBodyProps & StyledType>(({theme}) => {
-  const canvasTheme = getCanvasTheme(theme);
+  const {canvas: canvasTheme} = getTheme(theme);
   return {
     [canvasTheme.breakpoints.down('s')]: {
       marginBottom: space.zero,

package/modal/lib/ModalCard.tsx

@@ -5,7 +5,7 @@ import {
   ExtractProps,
   StyledType,
   styled,
-  getCanvasTheme,
+  getTheme,
 } from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';
 import {Popup} from '@workday/canvas-kit-react/popup';
@@ -15,7 +15,7 @@ import {useModalCard, useModalModel} from './hooks';
 export interface ModalCardProps extends ExtractProps<typeof Popup.Card, never> {}
 
 const ResponsiveModalCard = styled(Popup.Card)<ModalCardProps & StyledType>(({theme}) => {
-  const canvasTheme = getCanvasTheme(theme);
+  const {canvas: canvasTheme} = getTheme(theme);
   return {
     margin: space.xl,
     [canvasTheme.breakpoints.down('s')]: {