@muraldevkit/ui-toolkit 4.66.0-dev-7XJy.1 → 4.66.0-dev-7K0j.1

package/dist/cjs/components/avatar/MrlAvatar/MrlAvatar.js

@@ -0,0 +1,127 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlAvatar = exports.defaultAvatarValues = void 0;
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const colors_1 = require("@tactivos/mural-shared/lib/colors");
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const MrlSvg_1 = require("../../svg/MrlSvg/MrlSvg");
+const MrlAvatar_module_scss_1 = __importDefault(require("./MrlAvatar.module.scss.js"));
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const avatarValues = {
+    kind: ['default', 'facilitator', 'lock'],
+    size: ['xsmall', 'small', 'medium', 'large']
+};
+exports.defaultAvatarValues = {
+    avatarColor: '#2f2f2f',
+    kind: 'default',
+    size: 'medium'
+};
+/**
+ * Renders an avatar component
+ * @param {MrlAvatarPropTypes} props the props for your MrlAvatar
+ * @returns {React.ReactElement} an avatar containing the props you pass
+ */
+const MrlAvatar = (_a) => {
+    var { alt, avatarColor = exports.defaultAvatarValues.avatarColor, dataQa, kind = exports.defaultAvatarValues.kind, image, name, onImageError, showBorder = false, size = exports.defaultAvatarValues.size } = _a, rest = __rest(_a, ["alt", "avatarColor", "dataQa", "kind", "image", "name", "onImageError", "showBorder", "size"]);
+    const containerClasses = (0, classnames_1.default)(MrlAvatar_module_scss_1.default['MrlAvatar'], 'MrlAvatar', {
+        [MrlAvatar_module_scss_1.default[`MrlAvatar--${size}`]]: size && size !== 'medium'
+    });
+    const isFacilitatorSize = size === 'small' || size === 'xsmall';
+    const showIcon = kind !== 'default' && isFacilitatorSize;
+    const iconContainerClasses = (0, classnames_1.default)(MrlAvatar_module_scss_1.default['MrlAvatar-icon-container'], {
+        [MrlAvatar_module_scss_1.default[`MrlAvatar-icon-container--${size}`]]: size && size !== 'medium'
+    });
+    const getAvatarRgb = () => {
+        if ((0, colors_1.isValidHexColor)(avatarColor)) {
+            return (0, colors_1.hexToRgb)(avatarColor).toString();
+        }
+        if ((0, colors_1.isValidRgbString)(avatarColor)) {
+            return avatarColor.substring(4, avatarColor.length - 1);
+        }
+        if ((0, colors_1.isValidRgbaString)(avatarColor)) {
+            const lastComma = avatarColor.lastIndexOf(',');
+            return avatarColor.substring(5, lastComma);
+        }
+    };
+    const renderImage = () => {
+        if (typeof image === 'string') {
+            const imgAltText = alt ? alt : name ? `${name}'s avatar` : 'Participant avatar';
+            return (React.createElement("img", { alt: imgAltText, className: MrlAvatar_module_scss_1.default['MrlAvatar-image'], "data-qa": `${dataQa || 'avatar'}-image`, onError: onImageError, src: image }));
+        }
+        return image;
+    };
+    const getInitials = (str) => {
+        if (!str) {
+            return '';
+        }
+        const textLength = size === 'xsmall' ? 1 : 2;
+        // Take the name passed in.
+        return (str
+            // Split it at each space to create an array of words
+            .split(' ')
+            // Take the first character from each word.
+            .map((item) => item.charAt(0).toUpperCase())
+            // Bring the characters back into one word
+            .join('')
+            // Make sure we remove spaces
+            .replace(/ /g, '')
+            // Return the correct number of characters
+            .substring(0, textLength));
+    };
+    const isDarkText = (0, colors_1.stickyTextColor)(avatarColor, '#000000', '#ffffff') === '#ffffff';
+    const safeColor = getAvatarRgb();
+    const backgroundColor = image && typeof image === 'string'
+        ? 'rgba(var(--mrl-color-white), 1)'
+        : `rgba(${safeColor}, 0.08)`;
+    const borderColor = showIcon || showBorder ? `rgba(${safeColor}, 1` : 'transparent';
+    const textColor = isDarkText ? `rgba(${safeColor}, 1` : 'rgba(--mrl-gray-90, 1)';
+    return (React.createElement("div", Object.assign({ className: containerClasses, "data-qa": dataQa }, rest),
+        React.createElement("span", { "aria-label": name, className: `${MrlAvatar_module_scss_1.default['MrlAvatar-content']} MrlAvatar-content`, "data-qa": dataQa && `avatar-${image ? 'image-container' : 'initials'}`, style: {
+                backgroundColor: backgroundColor,
+                borderColor: borderColor,
+                color: textColor
+            } }, image ? renderImage() : React.createElement("span", { "aria-hidden": "true" }, getInitials(name))),
+        showIcon && (React.createElement("span", { className: iconContainerClasses, style: {
+                backgroundColor: borderColor
+            } },
+            React.createElement(MrlSvg_1.MrlSvg, { className: MrlAvatar_module_scss_1.default['MrlAvatar-icon'], size: "auto", svg: kind === 'facilitator' ? ds_icons_1.facilitatorBadge : ds_icons_1.lock })))));
+};
+exports.MrlAvatar = MrlAvatar;

package/dist/cjs/components/avatar/MrlAvatar/MrlAvatar.module.css

@@ -0,0 +1,102 @@
+.MrlAvatar-content--UQV5P {
+  border: var(--mrl-stroke-02) solid transparent;
+  border-radius: var(--mrl-radii-03);
+  display: block;
+  font-size: var(--mrl-font-size-04);
+  font-weight: var(--mrl-font-weight-04);
+  height: 100%;
+  line-height: 2.875rem;
+  max-width: 100%;
+  overflow: hidden;
+  text-align: center;
+  width: 100%;
+}
+.MrlAvatar-content--UQV5P .MrlSvgContainer {
+  display: block;
+  height: auto;
+  max-width: 100%;
+  width: 100%;
+}
+
+.MrlAvatar--CSmJ1 {
+  border-radius: var(--mrl-radii-03);
+  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.04) inset;
+  box-sizing: border-box;
+  display: block;
+  height: var(--mrl-spacing-10);
+  position: relative;
+  width: var(--mrl-spacing-10);
+}
+.MrlAvatar--xsmall--zH7bY {
+  height: var(--mrl-spacing-07);
+  width: var(--mrl-spacing-07);
+}
+.MrlAvatar--xsmall--zH7bY .MrlAvatar-content--UQV5P {
+  font-size: var(--mrl-font-size-02);
+  line-height: 1.375rem;
+}
+.MrlAvatar--small--0DC-V {
+  height: var(--mrl-spacing-08);
+  width: var(--mrl-spacing-08);
+}
+.MrlAvatar--small--0DC-V .MrlAvatar-content--UQV5P {
+  font-size: var(--mrl-font-size-02);
+  line-height: 1.875rem;
+}
+.MrlAvatar--large--PVJ9- {
+  border-radius: var(--mrl-radii-06);
+  height: var(--mrl-spacing-13);
+  width: var(--mrl-spacing-13);
+}
+.MrlAvatar--large--PVJ9- .MrlAvatar-content--UQV5P {
+  border-radius: var(--mrl-radii-06);
+  font-size: var(--mrl-font-size-07);
+  line-height: 5.875rem;
+}
+
+.MrlAvatar-image--JrO9I {
+  display: block;
+  height: auto;
+  max-width: 100%;
+  width: 100%;
+}
+
+.MrlAvatar-icon-container--O40ga {
+  border-radius: 1rem;
+  bottom: -0.1875rem;
+  color: var(--mrl-color-background);
+  position: absolute;
+}
+.MrlAvatar-icon-container--O40ga .MrlAvatar-icon--dPg3T {
+  display: block;
+  left: 50%;
+  position: absolute;
+}
+.MrlAvatar-icon-container--O40ga .MrlAvatar-icon--dPg3T .mrl-svg {
+  margin: 0;
+}
+
+.MrlAvatar-icon-container--small--oLvxG {
+  height: 1rem;
+  right: -0.1875rem;
+  width: 1rem;
+}
+.MrlAvatar-icon-container--small--oLvxG .MrlAvatar-icon--dPg3T {
+  height: 1rem;
+  margin-left: -0.3125rem;
+  top: 0;
+  width: 0.625rem;
+}
+
+.MrlAvatar-icon-container--xsmall--6Wbc1 {
+  border-radius: 0.75rem;
+  height: 0.75rem;
+  right: -0.125rem;
+  width: 0.75rem;
+}
+.MrlAvatar-icon-container--xsmall--6Wbc1 .MrlAvatar-icon--dPg3T {
+  height: 0.5rem;
+  margin-left: -0.225rem;
+  top: -0.1rem;
+  width: 0.5rem;
+}

package/dist/cjs/components/avatar/MrlAvatar/MrlAvatar.module.scss.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlAvatar.module.css");
+exports.default = {
+	"MrlAvatar-content": "MrlAvatar-content--UQV5P",
+	"MrlAvatar": "MrlAvatar--CSmJ1",
+	"MrlAvatar--xsmall": "MrlAvatar--xsmall--zH7bY",
+	"MrlAvatar--small": "MrlAvatar--small--0DC-V",
+	"MrlAvatar--large": "MrlAvatar--large--PVJ9-",
+	"MrlAvatar-image": "MrlAvatar-image--JrO9I",
+	"MrlAvatar-icon-container": "MrlAvatar-icon-container--O40ga",
+	"MrlAvatar-icon": "MrlAvatar-icon--dPg3T",
+	"MrlAvatar-icon-container--small": "MrlAvatar-icon-container--small--oLvxG",
+	"MrlAvatar-icon-container--xsmall": "MrlAvatar-icon-container--xsmall--6Wbc1"
+};

package/dist/cjs/components/avatar/MrlAvatar/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlAvatar"), exports);

package/dist/cjs/components/avatar/MrlAvatarButton/MrlAvatarButton.js

@@ -0,0 +1,91 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlAvatarButton = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const MrlAvatar_1 = require("../MrlAvatar/MrlAvatar");
+const MrlSpinner_1 = require("../../loader/MrlSpinner/MrlSpinner");
+const MrlTooltip_1 = require("../../tooltip/MrlTooltip/MrlTooltip");
+const helpers_1 = require("../../button/helpers");
+const constants_1 = require("../../button/constants");
+const utils_1 = require("../../../utils");
+const MrlAvatarButton_module_scss_1 = __importDefault(require("./MrlAvatarButton.module.scss.js"));
+/**
+ * Renders an avatar button
+ * @param {MrlAvatarButtonPropTypes} props the props for your MrlAvatarButton
+ * @returns {React.ReactElement} an avatar button containing the props you pass
+ */
+const MrlAvatarButton = (_a) => {
+    var { buttonClassName, dataQa, id, includeInRoving, isToggleButton, label, loading = false, loadingText = 'Loading', onClick, size, state = 'default', toggleAria = constants_1.buttonDefaults.toggleAria, tooltip, triggerRef } = _a, rest = __rest(_a, ["buttonClassName", "dataQa", "id", "includeInRoving", "isToggleButton", "label", "loading", "loadingText", "onClick", "size", "state", "toggleAria", "tooltip", "triggerRef"]);
+    const [isSelected, setIsSelected] = React.useState(() => (0, helpers_1._isSelected)(state));
+    /**
+     * We need to watch the value of state to keep in sync
+     * the value of state passed as props and the internal
+     * isSelected piece of state.
+     */
+    React.useEffect(() => {
+        // allows consumers to set the 'selected' or 'selected-disabled' state from a parent component.
+        setIsSelected((0, helpers_1._isSelected)(state));
+    }, [state]);
+    const spinner = (React.createElement(MrlSpinner_1.MrlSpinner, { className: "mrlButton-spinner MrlAvatarButton-spinner", kind: "default", role: "none", size: "small", text: loadingText }));
+    const attributes = (0, utils_1.setAttributes)({}, Object.assign(Object.assign({ 'aria-disabled': (0, helpers_1._isDisabled)(state, loading), 'aria-label': label }, (isToggleButton && { [`aria-${toggleAria}`]: isSelected || false })), { 'data-roving': includeInRoving ? 'true' : undefined, role: 'button', type: 'button' }));
+    /**
+     * Handle onClick events
+     * @param {React.MouseEvent<HTMLButtonElement>} e - mouse event
+     */
+    function handleOnClick(e) {
+        e.stopPropagation();
+        if ((0, helpers_1._isDisabled)(state, loading)) {
+            return;
+        }
+        if (isToggleButton) {
+            setIsSelected((prevIsSelected) => !prevIsSelected);
+        }
+        if (onClick && typeof onClick === 'function') {
+            onClick(e);
+        }
+    }
+    const buttonClasses = (0, classnames_1.default)('MrlAvatarButton', MrlAvatarButton_module_scss_1.default['MrlAvatarButton'], buttonClassName, {
+        [MrlAvatarButton_module_scss_1.default['MrlAvatarButton--large']]: size && size === 'large'
+    });
+    const renderAvatarButton = () => (React.createElement("button", Object.assign({}, attributes, { "aria-label": tooltip && tooltip.text, className: buttonClasses, "data-qa": dataQa && `${dataQa}-button`, id: id, onClick: handleOnClick, ref: triggerRef }), loading ? spinner : React.createElement(MrlAvatar_1.MrlAvatar, Object.assign({ dataQa: dataQa, size: size }, rest))));
+    return !tooltip ? (renderAvatarButton()) : (React.createElement(MrlTooltip_1.MrlTooltip, { position: tooltip.position || 'bottom', anchor: tooltip.anchor || 'center', text: tooltip.text, dataQa: tooltip.dataQa }, renderAvatarButton()));
+};
+exports.MrlAvatarButton = MrlAvatarButton;

package/dist/cjs/components/avatar/MrlAvatarButton/MrlAvatarButton.module.css

@@ -0,0 +1,251 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--8DmMq {
+  position: relative;
+}
+
+.MrlAvatarButton--bUWfo {
+  background-color: transparent;
+  border: none;
+  border-radius: var(--mrl-radii-03);
+  margin: 0;
+  outline: none;
+  padding: 0;
+  position: relative;
+}
+.MrlAvatarButton--bUWfo::after {
+  background-color: rgba(0, 0, 0, 0);
+  border-radius: var(--mrl-radii-03);
+  content: "";
+  display: block;
+  inset: 0;
+  position: absolute;
+}
+.MrlAvatarButton--bUWfo:focus-visible {
+  position: relative;
+}
+.MrlAvatarButton--bUWfo:focus-visible:focus-visible {
+  outline: none;
+}
+.MrlAvatarButton--bUWfo:focus-visible:focus-visible::after {
+  animation-duration: var(--mrl-duration-03);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  animation-timing-function: var(--mrl-timing-m3);
+  border: 0 solid transparent;
+  border-radius: calc(
+		var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
+	);
+  bottom: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  content: "";
+  display: block;
+  left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  position: absolute;
+  right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  z-index: 1;
+  animation-name: border-animation--WmmO5;
+}
+@keyframes border-animation--WmmO5 {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+@keyframes border-animation-inverse--vVAD2 {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+@keyframes outline-animation--3IYVa {
+  0% {
+    outline: 0 solid transparent;
+    outline-offset: 1px;
+  }
+  50% {
+    outline: 4px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+  100% {
+    outline: 2px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+}
+.MrlAvatarButton--bUWfo:hover {
+  cursor: pointer;
+}
+.MrlAvatarButton--bUWfo:hover::after {
+  background-color: rgba(var(--mrl-gray-90), 0.32);
+}
+.MrlAvatarButton--bUWfo:active::after {
+  background-color: rgba(var(--mrl-gray-90), 0.64);
+}
+.MrlAvatarButton--large--ANQDR {
+  border-radius: var(--mrl-radii-06);
+}
+.MrlAvatarButton--large--ANQDR:focus-visible {
+  position: relative;
+}
+.MrlAvatarButton--large--ANQDR:focus-visible:focus-visible {
+  outline: none;
+}
+.MrlAvatarButton--large--ANQDR:focus-visible:focus-visible::after {
+  animation-duration: var(--mrl-duration-03);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  animation-timing-function: var(--mrl-timing-m3);
+  border: 0 solid transparent;
+  border-radius: calc(
+		var(--mrl-radii-06) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
+	);
+  bottom: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  content: "";
+  display: block;
+  left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  position: absolute;
+  right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
+  z-index: 1;
+  animation-name: border-animation--WmmO5;
+}
+@keyframes border-animation--WmmO5 {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+@keyframes border-animation-inverse--vVAD2 {
+  0% {
+    border-color: transparent;
+    border-width: 0;
+    bottom: var(--mrl-space-offset-focus);
+    left: var(--mrl-space-offset-focus);
+    right: var(--mrl-space-offset-focus);
+    top: var(--mrl-space-offset-focus);
+  }
+  50% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: 0.25rem;
+    bottom: calc(var(--mrl-spacing-02) * -1);
+    left: calc(var(--mrl-spacing-02) * -1);
+    right: calc(var(--mrl-spacing-02) * -1);
+    top: calc(var(--mrl-spacing-02) * -1);
+  }
+  100% {
+    border-color: var(--mrl-color-focus-inverse);
+    border-width: var(--mrl-line-width-focus);
+    bottom: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
+					) * -1);
+  }
+}
+@keyframes outline-animation--3IYVa {
+  0% {
+    outline: 0 solid transparent;
+    outline-offset: 1px;
+  }
+  50% {
+    outline: 4px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+  100% {
+    outline: 2px solid var(--mrl-color-focus);
+    outline-offset: 1px;
+  }
+}
+.MrlAvatarButton--large--ANQDR::after {
+  border-radius: var(--mrl-radii-06);
+}

package/dist/cjs/components/avatar/MrlAvatarButton/MrlAvatarButton.module.scss.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlAvatarButton.module.css");
+exports.default = {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--8DmMq",
+	"MrlAvatarButton": "MrlAvatarButton--bUWfo",
+	"border-animation": "border-animation--WmmO5",
+	"MrlAvatarButton--large": "MrlAvatarButton--large--ANQDR",
+	"border-animation-inverse": "border-animation-inverse--vVAD2",
+	"outline-animation": "outline-animation--3IYVa"
+};

package/dist/cjs/components/avatar/MrlAvatarButton/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlAvatarButton"), exports);

package/dist/cjs/components/avatar/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlAvatar"), exports);
+__exportStar(require("./MrlAvatarButton"), exports);