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

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

@@ -1,40 +1,40 @@
 "use strict";
-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);
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TooltipContainer = void 0;
-var react_1 = require("@emotion/react");
-var styled_1 = __importDefault(require("@emotion/styled"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var tooltipAnimation = function (transformOrigin) {
-    var translate = common_1.getTranslateFromOrigin(transformOrigin, tokens_1.space.xxxs);
-    return react_1.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 react_1 = require("@emotion/react");
+const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const tooltipAnimation = (transformOrigin) => {
+    const translate = common_1.getTranslateFromOrigin(transformOrigin, tokens_1.space.xxxs);
+    return react_1.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',
 };
-exports.TooltipContainer = styled_1.default('div')(__assign(__assign({}, tokens_1.type.levels.subtext.medium), { display: 'inline-flex', position: 'relative', padding: tokens_1.spaceNumbers.xxs + tokens_1.spaceNumbers.xxxs, color: tokens_1.colors.frenchVanilla100, a: {
+exports.TooltipContainer = styled_1.default('div')({
+    ...tokens_1.type.levels.subtext.medium,
+    display: 'inline-flex',
+    position: 'relative',
+    padding: tokens_1.spaceNumbers.xxs + tokens_1.spaceNumbers.xxxs,
+    color: tokens_1.colors.frenchVanilla100,
+    a: {
         color: tokens_1.colors.frenchVanilla100,
         textDecoration: 'underline',
-    }, 
+    },
     // use :before vs margin to increase the tooltip hit-box
     ':before': {
         content: '""',
@@ -47,30 +47,33 @@ exports.TooltipContainer = styled_1.default('div')(__assign(__assign({}, tokens_
         left: 0,
         right: 0,
         bottom: 0,
-    }, 
+    },
     // offset tooltips by 2 pixels when a keyboard focus ring is detected
     '[data-whatinput=keyboard] &': {
         padding: tokens_1.spaceNumbers.xxs + tokens_1.spaceNumbers.xxxs + 2,
         ':before': {
             margin: tokens_1.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: -tokens_1.spaceNumbers.xxxs,
-    }, '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
+    },
+    '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
         right: -tokens_1.spaceNumbers.xxxs,
-    }, '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
+    },
+    '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
         top: -tokens_1.spaceNumbers.xxxs,
-    }, '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
+    },
+    '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
         bottom: -tokens_1.spaceNumbers.xxxs,
-    } }), function (_a) {
-    var _b = _a.transformOrigin, transformOrigin = _b === void 0 ? defaultTransformOrigin : _b;
+    },
+}, ({ transformOrigin = defaultTransformOrigin }) => {
     if (transformOrigin === null) {
         return {};
     }
@@ -79,8 +82,7 @@ exports.TooltipContainer = styled_1.default('div')(__assign(__assign({}, tokens_
         animationDuration: '150ms',
         animationTimingFunction: 'ease-out',
         transformOrigin: transformOrigin
-            ? transformOrigin.vertical + " " + transformOrigin.horizontal
+            ? `${transformOrigin.vertical} ${transformOrigin.horizontal}`
             : 'top center',
     };
 });
-var templateObject_1;

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

@@ -20,33 +20,32 @@ var __importStar = (this && this.__importStar) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useTooltip = void 0;
-var React = __importStar(require("react"));
-var popup_1 = require("@workday/canvas-kit-react/popup");
-var common_1 = require("@workday/canvas-kit-react/common");
-var useIntentTimer = function (fn, waitMs) {
-    if (waitMs === void 0) { waitMs = 0; }
-    var timer = React.useRef();
-    var start = function () {
+const React = __importStar(require("react"));
+const popup_1 = require("@workday/canvas-kit-react/popup");
+const common_1 = require("@workday/canvas-kit-react/common");
+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':
@@ -62,33 +61,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
  */
-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 = popup_1.usePopupModel();
-    var _g = React.useState(null), anchorElement = _g[0], setAnchorElement = _g[1];
-    var id = common_1.useUniqueId();
-    var intentTimerHide = useIntentTimer(popupModel.events.hide, hideDelay);
-    var intentTimerShow = useIntentTimer(popupModel.events.show, showDelay);
-    var onHide = function () {
+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 = popup_1.usePopupModel();
+    const [anchorElement, setAnchorElement] = React.useState(null);
+    const id = common_1.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();
@@ -98,16 +96,16 @@ function useTooltip(_a) {
     popup_1.useAlwaysCloseOnOutsideClick(popupModel);
     popup_1.useCloseOnFullscreenExit(popupModel);
     popup_1.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
@@ -116,11 +114,11 @@ 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/dist/es6/action-bar/lib/ActionBar.js

@@ -23,7 +23,7 @@ import { ActionBarItem } from './ActionBarItem';
  * <ActionBar model={model}>{Child components}</ActionBar>;
  * ```
  */
-export var ActionBar = createContainer()({
+export const ActionBar = createContainer()({
     displayName: 'ActionBar',
     modelHook: useActionBarModel,
     subComponents: {
@@ -68,9 +68,8 @@ export var ActionBar = createContainer()({
          *   </ActionBar.Menu.Card>
          * </ActionBar.Menu.Popper>
          */
-        Menu: Menu,
+        Menu,
     },
-})(function (_a, _, model) {
-    var children = _a.children;
+})(({ children }, _, model) => {
     return React.createElement(Menu, { model: model.menu }, children);
 });

package/dist/es6/action-bar/lib/ActionBarItem.js

@@ -1,24 +1,13 @@
-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 * as React from 'react';
 import { composeHooks, createSubcomponent } from '@workday/canvas-kit-react/common';
 import { SecondaryButton } from '@workday/canvas-kit-react/button';
 import { useOverflowListItemMeasure, useListItemRegister, } from '@workday/canvas-kit-react/collection';
 import { useActionBarModel } from './useActionBarModel';
-export var useActionBarItem = composeHooks(useOverflowListItemMeasure, useListItemRegister);
-export var ActionBarItem = createSubcomponent(SecondaryButton)({
+export const useActionBarItem = composeHooks(useOverflowListItemMeasure, useListItemRegister);
+export const ActionBarItem = createSubcomponent(SecondaryButton)({
     displayName: 'ActionBar.Item',
     modelHook: useActionBarModel,
     elemPropsHook: useActionBarItem,
-})(function (elemProps, Element) {
-    return React.createElement(Element, __assign({}, elemProps));
+})((elemProps, Element) => {
+    return React.createElement(Element, Object.assign({}, elemProps));
 });

package/dist/es6/action-bar/lib/ActionBarList.js

@@ -1,52 +1,27 @@
-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 { commonColors, colors, space } from '@workday/canvas-kit-react/tokens';
-import { createSubcomponent, getCanvasTheme, styled, } from '@workday/canvas-kit-react/common';
+import { createSubcomponent, getTheme, styled, } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { useOverflowListMeasure, useListRenderItems } from '@workday/canvas-kit-react/collection';
 import { useActionBarModel } from './useActionBarModel';
-var ResponsiveList = styled(Flex)(function (_a) {
-    var _b;
-    var theme = _a.theme;
-    var canvasTheme = getCanvasTheme(theme);
-    return _b = {},
-        _b[canvasTheme.breakpoints.down('s')] = {
+const ResponsiveList = styled(Flex)(({ theme }) => {
+    const { canvas: canvasTheme } = getTheme(theme);
+    return {
+        [canvasTheme.breakpoints.down('s')]: {
             padding: space.s,
             '> *': {
                 flex: 1,
             },
         },
-        _b;
+    };
 });
-export var useActionBarList = useOverflowListMeasure;
-export var ActionBarList = createSubcomponent('div')({
+export const useActionBarList = useOverflowListMeasure;
+export const ActionBarList = createSubcomponent('div')({
     displayName: 'ActionBar.List',
     modelHook: useActionBarModel,
     elemPropsHook: useActionBarList,
-})(function (_a, Element, model) {
-    var children = _a.children, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "overflowButton"]);
-    return (React.createElement(ResponsiveList, __assign({ as: Element, gap: "s", depth: 1, background: commonColors.background, borderTop: "solid 1px " + colors.soap400, padding: space.s + " " + space.xl + " ", position: "fixed", bottom: 0, left: 0, right: 0 }, elemProps),
+})(({ children, overflowButton, ...elemProps }, Element, model) => {
+    return (React.createElement(ResponsiveList, Object.assign({ as: Element, gap: "s", depth: 1, background: commonColors.background, borderTop: `solid 1px ${colors.soap400}`, padding: `${space.s} ${space.xl} `, position: "fixed", bottom: 0, left: 0, right: 0 }, elemProps),
         useListRenderItems(model, children),
         overflowButton));
 });

package/dist/es6/action-bar/lib/ActionBarOverflowButton.js

@@ -1,14 +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);
-};
 import * as React from 'react';
 import styled from '@emotion/styled';
 import { relatedActionsIcon } from '@workday/canvas-system-icons-web';
@@ -17,16 +6,16 @@ import { useOverflowListTarget } from '@workday/canvas-kit-react/collection';
 import { useMenuTarget } from '@workday/canvas-kit-react/menu';
 import { useActionBarModel } from './useActionBarModel';
 import { SecondaryButton } from '@workday/canvas-kit-react/button';
-var StyledSecondaryButton = styled(SecondaryButton)({
+const StyledSecondaryButton = styled(SecondaryButton)({
     flex: 0,
 });
-export var useActionBarOverflowButton = composeHooks(createElemPropsHook(useActionBarModel)(function () { return ({
+export const useActionBarOverflowButton = composeHooks(createElemPropsHook(useActionBarModel)(() => ({
     'aria-haspopup': true,
-}); }), useOverflowListTarget, createSubModelElemPropsHook(useActionBarModel)(function (m) { return m.menu; }, useMenuTarget));
-export var ActionBarOverflowButton = createSubcomponent('button')({
+})), useOverflowListTarget, createSubModelElemPropsHook(useActionBarModel)(m => m.menu, useMenuTarget));
+export const ActionBarOverflowButton = createSubcomponent('button')({
     displayName: 'ActionBar.OverflowButton',
     modelHook: useActionBarModel,
     elemPropsHook: useActionBarOverflowButton,
-})(function (elemProps, Element) {
-    return React.createElement(StyledSecondaryButton, __assign({ as: Element, icon: relatedActionsIcon }, elemProps));
+})((elemProps, Element) => {
+    return React.createElement(StyledSecondaryButton, Object.assign({ as: Element, icon: relatedActionsIcon }, elemProps));
 });

package/dist/es6/action-bar/lib/useActionBarModel.js

@@ -1,43 +1,35 @@
-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 React from 'react';
 import { createModelHook } from '@workday/canvas-kit-react/common';
 import { defaultGetId, useOverflowListModel } from '@workday/canvas-kit-react/collection';
 import { useMenuModel } from '@workday/canvas-kit-react/menu';
-export var useActionBarModel = createModelHook({
-    defaultConfig: __assign(__assign({}, useOverflowListModel.defaultConfig), { 
+export const useActionBarModel = createModelHook({
+    defaultConfig: {
+        ...useOverflowListModel.defaultConfig,
         /**
          * Optional id for the whole `ActionBar` group. If not provided, a unique id will be created.
          * @default useUniqueId()
          */
-        id: '', 
+        id: '',
         /**
          * The default ActionBar sub-components only handle rendering of button group in a horizontal orientation,
          * but the sub-components could be replaced to handle vertical orientations.
          * @default 'horizontal'
          */
-        orientation: 'horizontal', menuConfig: {} }),
+        orientation: 'horizontal',
+        menuConfig: {},
+    },
     requiredConfig: useOverflowListModel.requiredConfig,
-})(function (config) {
-    var getId = config.getId || defaultGetId;
-    var items = config.items;
-    var model = useOverflowListModel(useOverflowListModel.mergeConfig(config, {
+})(config => {
+    const getId = config.getId || defaultGetId;
+    const items = config.items;
+    const model = useOverflowListModel(useOverflowListModel.mergeConfig(config, {
         orientation: config.orientation || 'horizontal',
-        items: items,
+        items,
         shouldVirtualize: false,
     }));
-    var hiddenIds = model.state.hiddenIds;
-    var nonInteractiveIds = model.state.nonInteractiveIds;
-    var totalSize = model.state.items.length;
+    let hiddenIds = model.state.hiddenIds;
+    let nonInteractiveIds = model.state.nonInteractiveIds;
+    const totalSize = model.state.items.length;
     // Only show a maximum of 3 buttons
     if (totalSize - hiddenIds.length >= 3) {
         hiddenIds = items.slice(3, totalSize).map(getId);
@@ -47,25 +39,34 @@ export var useActionBarModel = createModelHook({
         hiddenIds = items.slice(1, totalSize).map(getId);
     }
     nonInteractiveIds = hiddenIds;
-    var state = __assign(__assign({}, model.state), { hiddenIds: hiddenIds,
-        nonInteractiveIds: nonInteractiveIds, orientation: config.orientation || 'horizontal' });
-    var overflowItems = React.useMemo(function () { return (items ? items.filter(function (item) { return state.hiddenIds.includes(getId(item)); }) : undefined); }, 
+    const state = {
+        ...model.state,
+        hiddenIds,
+        nonInteractiveIds,
+        orientation: config.orientation || 'horizontal',
+    };
+    const overflowItems = React.useMemo(() => (items ? items.filter(item => state.hiddenIds.includes(getId(item))) : undefined), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.hiddenIds, items]);
-    var events = __assign({}, model.events);
-    var menu = useMenuModel(useMenuModel.mergeConfig(config.menuConfig, {
-        id: "act-bar-menu-" + model.state.id,
+    const events = {
+        ...model.events,
+    };
+    const menu = useMenuModel(useMenuModel.mergeConfig(config.menuConfig, {
+        id: `act-bar-menu-${model.state.id}`,
         items: overflowItems,
-        nonInteractiveIds: state.nonInteractiveIds.filter(function (key) { return !state.hiddenIds.includes(key); }),
-        onSelect: function () {
+        nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+        onSelect() {
             menu.events.hide();
         },
-        onShow: function () {
+        onShow() {
             // Always select the first item when the menu is opened
             menu.events.goToFirst();
         },
     }));
-    return __assign(__assign({}, model), { state: state,
-        events: events,
-        menu: menu });
+    return {
+        ...model,
+        state,
+        events,
+        menu,
+    };
 });

package/dist/es6/avatar/lib/Avatar.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 React, { useState } from 'react';
 import { styled, focusRing, hideMouseFocus } from '@workday/canvas-kit-react/common';
 import isPropValid from '@emotion/is-prop-valid';
@@ -31,66 +9,66 @@ export var AvatarVariant;
     AvatarVariant[AvatarVariant["Light"] = 0] = "Light";
     AvatarVariant[AvatarVariant["Dark"] = 1] = "Dark";
 })(AvatarVariant || (AvatarVariant = {}));
-var fadeTransition = 'opacity 150ms linear';
-var StyledContainer = styled('button', {
-    shouldForwardProp: function (prop) { return isPropValid(prop) && prop !== 'size'; },
-})(__assign({ background: colors.soap200, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0, border: 0, boxSizing: 'border-box', overflow: 'hidden', borderRadius: borderRadius.circle, '&:not([disabled])': {
-        '&:focus': __assign({ outline: 'none' }, focusRing({ separation: 2 })),
-    } }, hideMouseFocus), function (_a) {
-    var size = _a.size;
-    return ({
-        height: size,
-        width: size,
-    });
-}, function (_a) {
-    var onClick = _a.onClick;
-    return ({
-        cursor: onClick ? 'pointer' : 'default',
-    });
-});
-var StyledStack = styled('span')({
+const fadeTransition = 'opacity 150ms linear';
+const StyledContainer = styled('button', {
+    shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
+})({
+    background: colors.soap200,
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 0,
+    border: 0,
+    boxSizing: 'border-box',
+    overflow: 'hidden',
+    borderRadius: borderRadius.circle,
+    '&:not([disabled])': {
+        '&:focus': {
+            outline: 'none',
+            ...focusRing({ separation: 2 }),
+        },
+    },
+    ...hideMouseFocus,
+}, ({ size }) => ({
+    height: size,
+    width: size,
+}), ({ onClick }) => ({
+    cursor: onClick ? 'pointer' : 'default',
+}));
+const StyledStack = styled('span')({
     position: 'absolute',
     top: 0,
     left: 0,
-}, function (_a) {
-    var size = _a.size;
-    return ({
-        height: size,
-        width: size,
-    });
-});
-var StyledIcon = styled(SystemIconCircle)({
+}, ({ size }) => ({
+    height: size,
+    width: size,
+}));
+const StyledIcon = styled(SystemIconCircle)({
     transition: fadeTransition,
-}, function (_a) {
-    var isImageLoaded = _a.isImageLoaded;
-    return ({
-        opacity: isImageLoaded ? 0 : 1,
-    });
-});
-var StyledImage = styled('img')({
+}, ({ isImageLoaded }) => ({
+    opacity: isImageLoaded ? 0 : 1,
+}));
+const StyledImage = styled('img')({
     width: '100%',
     height: '100%',
     borderRadius: borderRadius.circle,
     transition: fadeTransition,
-}, function (_a) {
-    var isLoaded = _a.isLoaded;
-    return ({
-        opacity: isLoaded ? 1 : 0,
-    });
-});
-export var Avatar = React.forwardRef(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? AvatarVariant.Light : _b, _c = _a.size, size = _c === void 0 ? SystemIconCircleSize.m : _c, _d = _a.altText, altText = _d === void 0 ? 'Avatar' : _d, url = _a.url, onClick = _a.onClick, elemProps = __rest(_a, ["variant", "size", "altText", "url", "onClick"]);
-    var _e = useState(false), imageLoaded = _e[0], setImageLoaded = _e[1];
-    var loadImage = function () {
+}, ({ isLoaded }) => ({
+    opacity: isLoaded ? 1 : 0,
+}));
+export const Avatar = React.forwardRef(({ variant = AvatarVariant.Light, size = SystemIconCircleSize.m, altText = 'Avatar', url, onClick, ...elemProps }, ref) => {
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const loadImage = () => {
         if (!imageLoaded) {
             setImageLoaded(true);
         }
     };
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         setImageLoaded(false);
     }, [url]);
-    var background = variant === AvatarVariant.Dark ? colors.blueberry400 : colors.soap300;
-    return (React.createElement(StyledContainer, __assign({ size: size, "aria-label": altText, onClick: onClick, disabled: onClick ? false : true, ref: ref }, elemProps),
+    const background = variant === AvatarVariant.Dark ? colors.blueberry400 : colors.soap300;
+    return (React.createElement(StyledContainer, Object.assign({ size: size, "aria-label": altText, onClick: onClick, disabled: onClick ? false : true, ref: ref }, elemProps),
         React.createElement(StyledStack, { size: size },
             React.createElement(StyledIcon, { icon: userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
         url && (React.createElement(StyledStack, { size: size },