@muraldevkit/ui-toolkit 1.1.0 → 1.3.0

package/dist/components/button/MrlButton/MrlButton.d.ts

@@ -0,0 +1,78 @@
+import React from 'react';
+import { MrlButtonKind, MrlButtonSize, MrlButtonState, ToggleAria, ToggleStyle, IconPosition } from '../constants';
+import { AttrsObject } from '../../../utils';
+import './MrlButton.scss';
+interface MrlButtonProps {
+    /**
+     * Allow developers to add badge to buttons.
+     */
+    badge?: React.ReactElement;
+    /**
+     * @deprecated - Use state="disabled" or "selected-disabled" or "skeleton" instead.
+     * Allow developers to change the disabled state based on user interactions.
+     */
+    disabled?: boolean;
+    /**
+     * Allow developers to add icon to buttons.
+     */
+    icon?: React.ReactElement;
+    /**
+     * onClick event for the button.
+     */
+    onClick: (e: React.SyntheticEvent<HTMLButtonElement>) => void;
+    /**
+     * Changes the visual emphasis of the button.
+     */
+    kind?: MrlButtonKind;
+    /**
+     * Changes the size of the button so it can scale with its surrounding context.
+     */
+    size?: MrlButtonSize;
+    /**
+     * The textual label describing the button's purpose/action.
+     */
+    text: string;
+    /**
+     * Changes the state of the button based on user permissions or actions.
+     *
+     * Note: The Basic Button does not fully support state="disabled", use
+     * the 'disabled' prop instead. Since it does not support state="disabled",
+     * it also doesn't not support state="selected-disabled".
+     */
+    state: MrlButtonState;
+    /**
+     * Selected state variant when the button is a Toggle Button. The visual styles
+     * are also impacted by the "kind" prop. Toggle buttons are only supported
+     * when "kind" is set to either "ghost" or "ghost-inverse". Setting this prop
+     * informs the component that this is a toggle button and to add that functionality
+     */
+    toggleStyle?: ToggleStyle;
+    /**
+     * Determines which aria setup to use for various toggle/selected styles.
+     * pressed - use for an traditional “toggle button”
+     * selected - use for tabs and custom select options
+     * expanded - use for menus, panels, and popovers
+     * checked - use for custom [radiobutton](https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/#wai-aria-roles-states-and-properties-16)
+     * 		or [checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/#wai-aria-roles-states-and-properties-5) inputs
+     */
+    toggleAria?: ToggleAria;
+    /**
+     * Allows developers to right-align an icon within a button.
+     */
+    iconPos?: IconPosition;
+    /**
+     * Applies additional HTML attributes to the nested `button` element during the
+     * hydration process.
+     * When using in a framework wrapper (e.g., React), treat it as an object and don't stringify.
+     * Otherwise, the value object needs to be stringified to not receive `"[Object object]"`.
+     * Example: `attrs='{ "type": "reset" }'`
+     */
+    attrs?: AttrsObject | string;
+    /**
+     * Allows developers the ability to disable built in event listeners so they can manage user
+     * interactions from the application.
+     */
+    disableEvents?: boolean;
+}
+export declare const MrlButton: React.ForwardRefExoticComponent<MrlButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

package/dist/components/button/MrlButton/helpers.d.ts

@@ -0,0 +1,21 @@
+import { MrlButtonState } from '../constants';
+/**
+ * Determines if the button is disabled since multiple states represent disabled
+ *
+ * @private
+ * @param {MrlButtonState} [currentState] - the value of this.state from the component.
+ * @param {MrlButtonState} [enforcedState] - optionally pass in a state to check against.
+ * 		This is used for @Watch statements where this.state is not consistent.
+ * @returns {boolean} - if the button is disabled
+ */
+export declare const _isDisabled: (currentState: MrlButtonState, enforcedState?: MrlButtonState) => boolean;
+/**
+ * Determines if the button is selected since multiple states represent selected
+ *
+ * @private
+ * @param {MrlButtonState} [currentState] - the value of this.state from the component.
+ * @param {MrlButtonState} [enforcedState] - optionally pass in a state to check against.
+ * 		This is used for @Watch statements where this.state is not consistent.
+ * @returns {boolean} - if the button is disabled
+ */
+export declare const _isSelected: (currentState: MrlButtonState, enforcedState?: MrlButtonState) => boolean;

package/dist/components/button/MrlButton/index.d.ts

@@ -0,0 +1 @@
+export { MrlButton } from "./MrlButton";

package/dist/components/button/constants.d.ts

@@ -0,0 +1,34 @@
+export declare const allowedButtonValues: {
+    iconPositions: readonly ["before", "after"];
+    kinds: readonly ["secondary", "primary", "ghost", "inverse", "ghost-inverse"];
+    sizes: readonly ["medium", "small", "large"];
+    states: readonly ["default", "disabled", "selected", "selected-disabled", "skeleton"];
+    toggleAriaTypes: readonly ["expanded", "pressed", "selected", "checked"];
+    toggleStyles: readonly ["default", "secondary"];
+    types: readonly ["button", "reset", "submit"];
+};
+export type MrlButtonType = (typeof allowedButtonValues.types)[number];
+export type MrlButtonKind = (typeof allowedButtonValues.kinds)[number];
+export type MrlButtonSize = (typeof allowedButtonValues.sizes)[number];
+export type MrlButtonState = (typeof allowedButtonValues.states)[number];
+export type ToggleStyle = (typeof allowedButtonValues.toggleStyles)[number];
+export type ToggleAria = (typeof allowedButtonValues.toggleAriaTypes)[number];
+export type IconPosition = (typeof allowedButtonValues.iconPositions)[number];
+export type MrlGhostIconButtonSize = (typeof allowedButtonValues.sizes)[number] | 'xsmall';
+export interface ButtonDefaults {
+    attrs: {
+        [key: string]: unknown;
+    };
+    disabled: boolean;
+    iconPos: IconPosition;
+    kind: MrlButtonKind;
+    size: MrlButtonSize;
+    state: MrlButtonState;
+    text: string;
+    toggleAria: ToggleAria;
+}
+/**
+ * Default values for props on the Button component;
+ * Shared between the component and Storybook
+ */
+export declare const buttonDefaults: ButtonDefaults;

package/dist/components/button/index.d.ts

@@ -0,0 +1 @@
+export * from "./MrlButton";

package/dist/components/index.d.ts

@@ -1 +1,3 @@
+export * from './button';
 export * from "./svg";
+export * from "./tooltip";

package/dist/components/svg/constants.d.ts

@@ -13,11 +13,11 @@ interface AllowedValues {
  * Defines all of values allowed for attributes with limited values;
  * used for Storybook and testing
  */
-export declare const allowedValues: AllowedValues;
+export declare const allowedSvgValues: AllowedValues;
 /**
  * Default values for props on the SVG component;
  * Shared between the component and Storybook
  */
-export declare const defaults: SVGDefaults;
+export declare const svgDefaults: SVGDefaults;
 export type SVGObject = Record<string, any>;
 export {};

package/dist/components/tooltip/MrlTooltip/MrlTooltip.d.ts

@@ -0,0 +1,32 @@
+import React, { ReactElement } from 'react';
+import { AttrsObject } from '../../../utils';
+import { MrlTooltipAnchor, MrlTooltipPosition } from '../constants';
+interface MrlTooltipProps {
+    /** The textual label of tooltip */
+    text: string;
+    /**
+     * Children to be rendered within the tooltip. The first child is used as the trigger.
+     *
+     * Warning: The tooltip is only setup to work with a single trigger. If multiple children
+     * are passed in the component will not have event handling for the additional child elements.
+     */
+    children: React.ReactElement;
+    /**
+     * Attributes that are applied to the component during the initial render.
+     *
+     * Example usage: html attributes, custom data attributes (data-qa), aria
+     */
+    attrs?: AttrsObject | string;
+    /** The placement of the tooltip in relation to its trigger */
+    position?: MrlTooltipPosition;
+    /** The arrow position of the tooltip in relation to its trigger's content */
+    anchor?: MrlTooltipAnchor;
+}
+/**
+ * MrlTooltip Component
+ *
+ * @param {MrlTooltipProps} props - The props of the component
+ * @returns {HTMLElement} a configured Tooltip component
+ */
+export declare const MrlTooltip: (props: MrlTooltipProps) => ReactElement;
+export {};

package/dist/components/tooltip/MrlTooltipContent/MrlTooltipContent.d.ts

@@ -0,0 +1,38 @@
+import { ReactElement } from 'react';
+import { AttrsObject } from '../../../utils';
+import { MrlTooltipAnchor, MrlTooltipPosition, MrlTooltipState } from '../constants';
+interface MrlTooltipContentProps {
+    /**
+     * The arrow position of the tooltip in relation to its trigger's content.
+     * Note, if the content is shorter than the width of the trigger, always use
+     * "center" to ensure the arrow does not become misaligned.
+     */
+    anchor: MrlTooltipAnchor;
+    /**
+     * Attributes that are applied to the component during the initial render.
+     *
+     * Example usage: html attributes, custom data attributes (data-qa), aria
+     */
+    attrs: AttrsObject | string;
+    /** The id of the tooltip used for aria-describedby in the parent component */
+    id: string;
+    /** The placement of the tooltip in relation to its trigger */
+    position: MrlTooltipPosition;
+    /**
+     * Changes the state of the tooltip based on user actions.
+     */
+    state?: MrlTooltipState;
+    /** The tooltip content to display */
+    text: string;
+}
+/**
+ * MrlTooltipContent Component
+ *
+ * The tooltip content is the text that is displayed when the user hovers over the trigger.
+ * IMPORTANT: This component is not intended to be used directly, it should always be a child of MrlTooltip.
+ *
+ * @param {MrlTooltipContentProps} props - the props of the tooltip content
+ * @returns {HTMLElement} a configured Tooltip Content component
+ */
+export declare const MrlTooltipContent: (props: MrlTooltipContentProps) => ReactElement;
+export {};

package/dist/components/tooltip/constants.d.ts

@@ -0,0 +1,29 @@
+import { AttrsObject } from '../../utils';
+/**
+ * Important Note:
+ * If you update this file, you need to update the constants file in "component-button"
+ * because the Icon button uses the tooltip component. This is known tech debt.
+ */
+/**
+ * Defines all the values allowed for tooltip props.
+ * Used for Storybook and testing
+ */
+export declare const allowedMrlTooltipValues: {
+    anchors: readonly ["start", "center", "end"];
+    positions: readonly ["top", "bottom", "left", "right"];
+    state: readonly ["show", "hide"];
+};
+export type MrlTooltipPosition = typeof allowedMrlTooltipValues.positions[number];
+export type MrlTooltipAnchor = typeof allowedMrlTooltipValues.anchors[number];
+export type MrlTooltipState = typeof allowedMrlTooltipValues.state[number];
+export interface MrlTooltipDefaults {
+    anchor: MrlTooltipAnchor;
+    attrs: AttrsObject;
+    position: MrlTooltipPosition;
+    state: MrlTooltipState;
+}
+/**
+ * Default values for props on the Tooltip component;
+ * Shared between the component and Storybook
+ */
+export declare const MrlTooltipDefaults: MrlTooltipDefaults;

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./MrlTooltip/MrlTooltip";
+export * from './constants';

package/dist/index.js

@@ -1 +1 @@
-!function(e,r){if("object"==typeof exports&&"object"==typeof module)module.exports=r(require("react"),require("classnames"));else if("function"==typeof define&&define.amd)define(["React","classnames"],r);else{var t="object"==typeof exports?r(require("react"),require("classnames")):r(e.React,e.classnames);for(var n in t)("object"==typeof exports?exports:e)[n]=t[n]}}(self,((e,r)=>(()=>{"use strict";var t={899:(e,r,t)=>{t.d(r,{Z:()=>i});var n=t(81),a=t.n(n),o=t(645),s=t.n(o)()(a());s.push([e.id,".MrlSvg--StPVX{--mrl-svg-size: var(--mrl-spacing-07)}.MrlSvg--small--zP1On{--mrl-svg-size: var(--mrl-spacing-06)}.MrlSvg--large--HeoAa{--mrl-svg-size: var(--mrl-spacing-10)}.MrlSvg--auto--w9gVr{--mrl-svg-size: 100%}.MrlSvg--StPVX{display:inline-block;fill:currentcolor;height:var(--mrl-svg-size);width:var(--mrl-svg-size)}.MrlSvg--StPVX *{pointer-events:none}.MrlSvg--auto--w9gVr{width:100%}",""]),s.locals={MrlSvg:"MrlSvg--StPVX","MrlSvg--small":"MrlSvg--small--zP1On","MrlSvg--large":"MrlSvg--large--HeoAa","MrlSvg--auto":"MrlSvg--auto--w9gVr"};const i=s},645:e=>{e.exports=function(e){var r=[];return r.toString=function(){return this.map((function(r){var t="",n=void 0!==r[5];return r[4]&&(t+="@supports (".concat(r[4],") {")),r[2]&&(t+="@media ".concat(r[2]," {")),n&&(t+="@layer".concat(r[5].length>0?" ".concat(r[5]):""," {")),t+=e(r),n&&(t+="}"),r[2]&&(t+="}"),r[4]&&(t+="}"),t})).join("")},r.i=function(e,t,n,a,o){"string"==typeof e&&(e=[[null,e,void 0]]);var s={};if(n)for(var i=0;i<this.length;i++){var c=this[i][0];null!=c&&(s[c]=!0)}for(var l=0;l<e.length;l++){var u=[].concat(e[l]);n&&s[u[0]]||(void 0!==o&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=o),t&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=t):u[2]=t),a&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=a):u[4]="".concat(a)),r.push(u))}},r}},81:e=>{e.exports=function(e){return e[1]}},379:e=>{var r=[];function t(e){for(var t=-1,n=0;n<r.length;n++)if(r[n].identifier===e){t=n;break}return t}function n(e,n){for(var o={},s=[],i=0;i<e.length;i++){var c=e[i],l=n.base?c[0]+n.base:c[0],u=o[l]||0,f="".concat(l," ").concat(u);o[l]=u+1;var p=t(f),d={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==p)r[p].references++,r[p].updater(d);else{var v=a(d,n);n.byIndex=i,r.splice(i,0,{identifier:f,updater:v,references:1})}s.push(f)}return s}function a(e,r){var t=r.domAPI(r);return t.update(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap&&r.supports===e.supports&&r.layer===e.layer)return;t.update(e=r)}else t.remove()}}e.exports=function(e,a){var o=n(e=e||[],a=a||{});return function(e){e=e||[];for(var s=0;s<o.length;s++){var i=t(o[s]);r[i].references--}for(var c=n(e,a),l=0;l<o.length;l++){var u=t(o[l]);0===r[u].references&&(r[u].updater(),r.splice(u,1))}o=c}}},569:e=>{var r={};e.exports=function(e,t){var n=function(e){if(void 0===r[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}r[e]=t}return r[e]}(e);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");n.appendChild(t)}},216:e=>{e.exports=function(e){var r=document.createElement("style");return e.setAttributes(r,e.attributes),e.insert(r,e.options),r}},565:(e,r,t)=>{e.exports=function(e){var r=t.nc;r&&e.setAttribute("nonce",r)}},795:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var r=e.insertStyleElement(e);return{update:function(t){!function(e,r,t){var n="";t.supports&&(n+="@supports (".concat(t.supports,") {")),t.media&&(n+="@media ".concat(t.media," {"));var a=void 0!==t.layer;a&&(n+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),n+=t.css,a&&(n+="}"),t.media&&(n+="}"),t.supports&&(n+="}");var o=t.sourceMap;o&&"undefined"!=typeof btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),r.styleTagTransform(n,e,r.options)}(r,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(r)}}}},589:e=>{e.exports=function(e,r){if(r.styleSheet)r.styleSheet.cssText=e;else{for(;r.firstChild;)r.removeChild(r.firstChild);r.appendChild(document.createTextNode(e))}}},200:e=>{e.exports=r},639:r=>{r.exports=e}},n={};function a(e){var r=n[e];if(void 0!==r)return r.exports;var o=n[e]={id:e,exports:{}};return t[e](o,o.exports,a),o.exports}a.n=e=>{var r=e&&e.__esModule?()=>e.default:()=>e;return a.d(r,{a:r}),r},a.d=(e,r)=>{for(var t in r)a.o(r,t)&&!a.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:r[t]})},a.o=(e,r)=>Object.prototype.hasOwnProperty.call(e,r),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.nc=void 0;var o={};return(()=>{a.r(o),a.d(o,{MrlSvg:()=>N,allowedValues:()=>v,defaults:()=>m,getCamelCase:()=>s,getUniqueId:()=>d,isObject:()=>i,setAttributes:()=>f,setClasses:()=>u});var e=a(639),r=a.n(e),t=a(200),n=a.n(t),s=function(e){return e.trim().replace(/[-_]+/g," ").replace(/[`"',.;:?!@#$%^&*()~[\]{}|/\\<>]+/g,"").replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,(function(e,r){return 0==+e?"":0===r?e.toLowerCase():e.toUpperCase()}))},i=function(e){return(!e||!Array.isArray(e))&&e instanceof Object},c=function(){return c=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},c.apply(this,arguments)},l=function(e){try{return JSON.parse(e)}catch(r){return console.error("The attrs property is not properly-formatted JSON:"),console.error(e),console.error(r),r}},u=function(e,r){var t,n="string"==typeof e?l(e):e;return i(n)&&n.class?c(((t={})["".concat(n.class)]=void 0!==n.class&&n.class.length>0,t),r):r},f=function(e,r,t){void 0===r&&(r={});var a="string"==typeof e?l(e):e;return a?Object.assign({},r,a,{class:n()(t,a.class)}):{}},p=0,d=function(e){return void 0===e&&(e="mrl"),p++,"".concat(e,"-").concat(p)},v={sizes:["medium","small","large","auto"],themes:["classic","default"]},m={attrs:{role:"presentation"},size:"medium",theme:"default"},g=a(379),y=a.n(g),h=a(795),b=a.n(h),S=a(569),O=a.n(S),M=a(565),x=a.n(M),w=a(216),j=a.n(w),P=a(589),A=a.n(P),C=a(899),E={};E.styleTagTransform=A(),E.setAttributes=x(),E.insert=O().bind(null,"head"),E.domAPI=b(),E.insertStyleElement=j(),y()(C.Z,E);const T=C.Z&&C.Z.locals?C.Z.locals:void 0;var z=function(){return z=Object.assign||function(e){for(var r,t=1,n=arguments.length;t<n;t++)for(var a in r=arguments[t])Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a]);return e},z.apply(this,arguments)},N=function(e){var t,a=e.theme,o=e.size,c=void 0===o?"medium":o,l=e.svg,p=e.attrs,v=void 0===p?{}:p,g=e.isClone,y=void 0!==g&&g,h=function(e,r){var t={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(n=Object.getOwnPropertySymbols(e);a<n.length;a++)r.indexOf(n[a])<0&&Object.prototype.propertyIsEnumerable.call(e,n[a])&&(t[n[a]]=e[n[a]])}return t}(e,["theme","size","svg","attrs","isClone"]),b="There has been an issue rendering your SVG!",S=function(e,t,a){if(void 0===t&&(t={}),"text"===e.type)return e.value;var o=e.name,i=e.attributes||{};return Object.keys(i).forEach((function(e){var r="data-"===e.slice(0,5)?e:s(e);i[r]=i[e],e!==r&&delete i[e]})),"svg"===o?r().createElement("svg",z({},i,t,h,{className:n()(a),key:d()}),Array.isArray(e.children)&&e.children.map((function(e){return S(e)}))):r().createElement(o,z({},i,{key:d()}),Array.isArray(e.children)&&e.children.map((function(e){return S(e)})))},O=function(e,t,o,s){void 0===t&&(t={});var i=""===o?"This icon":o,c=Object.keys(e).length>0?"".concat(i," has no '").concat(a,"' theme found! Please try another SVG or theme."):"No valid themes found.";return console.warn(b),console.warn(c),r().createElement("span",z({className:n()(s)},t))};if(y)return r().createElement("span",null);if(!l)return r().createElement("span",null);var M=f(v,m.attrs),x=u(v,((t={})[T.MrlSvg]=!0,t[T["MrlSvg--".concat(c)]]="medium"!==c,t));delete M.class;var w="string"==typeof l;if(w&&!function(e){try{JSON.parse(e)}catch(r){return console.warn("".concat(b," Invalid SVG code:")),console.warn(e),!1}return!0}(l))return r().createElement("span",null);var j=w?JSON.parse(l):l,P=Object.keys(j),A=function(e){var r=e.indexOf("default")>=0,t=e.indexOf("rebrand")>=0;return"rebrand"!==a||t?a&&""!==a?a:r?"default":null:"default"}(P);return A&&""!==A?j[A]?S(j[A],M,x):i(j[P[0]])?O(j,M,j[P[0]].attributes["data-mrl-svg-name"],x):O(j):S(j,M,x)}})(),o})()));
+!function(r,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("classnames"));else if("function"==typeof define&&define.amd)define(["React","classnames"],t);else{var e="object"==typeof exports?t(require("react"),require("classnames")):t(r.React,r.classnames);for(var o in e)("object"==typeof exports?exports:r)[o]=e[o]}}(self,((r,t)=>(()=>{"use strict";var e={705:(r,t,e)=>{e.d(t,{Z:()=>i});var o=e(81),a=e.n(o),n=e(645),l=e.n(n)()(a());l.push([r.id,'.mrl-u-focus-wrapper{position:relative}:root{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton);--mrl-button-border-radius: var(--mrl-border-radius-functional)}.mrl-u-preHydrateSkeleton mrl-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button:not(.hydrated){min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09);background:var(--mrl-button-background-color-skeleton);border-radius:var(--mrl-button-border-radius);box-shadow:none;color:rgba(0,0,0,0);display:inline-flex;font-family:var(--mrl-font-family-01);pointer-events:none;visibility:inherit}.mrl-u-preHydrateSkeleton mrl-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-icon-button[kind=ghost-inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=inverse]:not(.hydrated),.mrl-u-preHydrateSkeleton mrl-shadow-button[kind=ghost-inverse]:not(.hydrated){--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}mrl-button[size=small],mrl-shadow-button[size=small]{min-height:var(--mrl-spacing-08)}mrl-icon-button[size=small]{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}mrl-button[size=large],mrl-shadow-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=large]{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));min-width:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}mrl-icon-button[size=xsmall][kind=ghost],mrl-icon-button[size=xsmall][kind=ghost-inverse]{min-height:var(--mrl-spacing-07);min-width:var(--mrl-spacing-07)}.mrlIconButton,.mrlButton{background:var(--mrl-button-background-color);border:none;border-radius:var(--mrl-button-border-radius);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color);color:var(--mrl-button-text-color);justify-content:center;min-width:auto;outline:none;transition:all var(--mrl-duration-03) var(--mrl-timing-m1);transition-property:background-color,border-color,color;display:inline-flex;position:relative;visibility:inherit}.mrlIconButton:focus-visible::after,.mrlButton:focus-visible::after{border:var(--mrl-line-width-focus) solid var(--mrl-color-focus);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}.mrlIconButton--inverse:focus-visible::after,.mrlIconButton--ghost-inverse:focus-visible::after,.mrlButton--inverse:focus-visible::after,.mrlButton--ghost-inverse:focus-visible::after{border:var(--mrl-line-width-focus) solid var(--mrl-color-focus-inverse);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}.mrlIconButton:hover,.mrlButton:hover{cursor:pointer}.mrlIconButton[aria-disabled=true],.mrlButton[aria-disabled=true]{background:var(--mrl-button-background-color-disabled);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-disabled);color:var(--mrl-button-text-color-disabled);cursor:default}.mrlIconButton[aria-disabled=true]:hover,.mrlButton[aria-disabled=true]:hover{background:var(--mrl-button-background-color-disabled);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-disabled);color:var(--mrl-button-text-color-disabled);cursor:default}.mrlIconButton:hover:not([aria-pressed=true],[aria-expanded=true],[aria-selected=true],[aria-checked=true]):not([aria-disabled=true]),.mrlButton:hover:not([aria-pressed=true],[aria-expanded=true],[aria-selected=true],[aria-checked=true]):not([aria-disabled=true]){background:var(--mrl-button-background-color-hover);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-hover);color:var(--mrl-button-text-color-hover)}.mrlIconButton:active:not([aria-pressed=true],[aria-expanded=true],[aria-selected=true],[aria-checked=true]):not([aria-disabled=true]),.mrlButton:active:not([aria-pressed=true],[aria-expanded=true],[aria-selected=true],[aria-checked=true]):not([aria-disabled=true]){background:var(--mrl-button-background-color-active);box-shadow:inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-active);color:var(--mrl-button-text-color-active)}.mrlIconButton--skeleton,.mrlIconButton--skeleton[aria-disabled=true],.mrlButton--skeleton,.mrlButton--skeleton[aria-disabled=true]{min-height:var(--mrl-spacing-09);min-width:var(--mrl-spacing-09);background:var(--mrl-button-background-color-skeleton);border-radius:var(--mrl-button-border-radius);box-shadow:none;color:rgba(0,0,0,0);display:inline-flex;font-family:var(--mrl-font-family-01);pointer-events:none;visibility:inherit}.mrlIconButton,.mrlButton{--mrl-button-background-color: var(--mrl-color-background);--mrl-button-background-color-active: rgba(var(--mrl-gray-30), 1);--mrl-button-background-color-disabled: var(--mrl-color-background);--mrl-button-background-color-hover: rgba(var(--mrl-gray-20), 1);--mrl-button-border-color: rgba(var(--mrl-gray-80), 1);--mrl-button-border-color-active: rgba(var(--mrl-black), 1);--mrl-button-border-color-disabled: var(--mrl-color-line-disabled);--mrl-button-border-color-hover: rgba(var(--mrl-gray-90), 1);--mrl-button-border-width: var(--mrl-line-width-border);--mrl-button-icon-size: var(--mrl-spacing-07);--mrl-button-text-color: rgba(var(--mrl-gray-80), 1);--mrl-button-text-color-active: rgba(var(--mrl-black), 1);--mrl-button-text-color-disabled: var(--mrl-color-text-disabled);--mrl-button-text-color-hover: rgba(var(--mrl-gray-90), 1);--mrl-button-inset-vertical: 0;--mrl-button-inset-horizontal: var(--mrl-space-inset-control-large);--mrl-button-icon-margin-right: var(--mrl-space-inline-related)}.mrlIconButton--small,.mrlButton--small{min-height:var(--mrl-spacing-08);--mrl-button-icon-size: var(--mrl-spacing-06);--mrl-button-inset-horizontal: var(--mrl-spacing-04)}.mrlIconButton.mrlIconButton--small,.mrlButton.mrlIconButton--small{min-height:var(--mrl-spacing-08);min-width:var(--mrl-spacing-08)}.mrlIconButton--large,.mrlButton--large{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));--mrl-button-inset-horizontal: var(--mrl-spacing-05)}.mrlIconButton.mrlIconButton--large,.mrlButton.mrlIconButton--large{min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));min-width:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}.mrlIconButton.mrlButton--primary,.mrlIconButton.mrlButton--ghost,.mrlIconButton.mrlButton--ghost-inverse,.mrlIconButton.mrlIconButton--ghost,.mrlButton.mrlButton--primary,.mrlButton.mrlButton--ghost,.mrlButton.mrlButton--ghost-inverse,.mrlButton.mrlIconButton--ghost{--mrl-button-border-color: transparent;--mrl-button-border-color-active: transparent;--mrl-button-border-color-hover: transparent;--mrl-button-border-color-disabled: transparent}.mrlIconButton--primary,.mrlButton--primary{--mrl-button-background-color: var(--mrl-color-brand);--mrl-button-background-color-active: var(--mrl-color-brand-active);--mrl-button-background-color-disabled: var(--mrl-color-background-disabled);--mrl-button-background-color-hover: var(--mrl-color-brand-hover);--mrl-button-text-color: var(--mrl-color-text-inverse);--mrl-button-text-color-active: var(--mrl-color-text-inverse);--mrl-button-text-color-disabled: var(--mrl-color-text-inverse);--mrl-button-text-color-hover: var(--mrl-color-text-inverse)}.mrlIconButton--ghost,.mrlButton--ghost{--mrl-button-background-color: transparent;--mrl-button-background-color-active: var(--mrl-black-opacity-01);--mrl-button-background-color-hover: var(--mrl-black-opacity-00);--mrl-button-background-color-disabled: transparent;--mrl-button-text-color: rgba(var(--mrl-gray-100), 1);--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);--mrl-button-text-color-disabled: var(--mrl-black-opacity-03);--mrl-button-text-color-hover: rgba(var(--mrl-gray-100), 1);--mrl-button-inset-horizontal: calc( var(--mrl-spacing-01) + var(--mrl-spacing-02) );--mrl-button-icon-margin-right: var(--mrl-spacing-02)}.mrlIconButton--ghost[aria-pressed=true],.mrlIconButton--ghost[aria-checked=true],.mrlIconButton--ghost[aria-expanded=true],.mrlIconButton--ghost[aria-selected=true],.mrlButton--ghost[aria-pressed=true],.mrlButton--ghost[aria-checked=true],.mrlButton--ghost[aria-expanded=true],.mrlButton--ghost[aria-selected=true]{--mrl-button-background-color: var(--mrl-color-background-inverse);--mrl-button-text-color: var(--mrl-color-text-inverse)}.mrlIconButton--ghost-inverse,.mrlButton--ghost-inverse{--mrl-button-background-color: transparent;--mrl-button-background-color-active: var(--mrl-white-opacity-04);--mrl-button-background-color-hover: var(--mrl-white-opacity-02);--mrl-button-background-color-disabled: transparent;--mrl-button-text-color: var(--mrl-color-text-inverse);--mrl-button-text-color-active: var(--mrl-color-text-inverse);--mrl-button-text-color-hover: var(--mrl-color-text-inverse);--mrl-button-text-color-disabled: var(--mrl-white-opacity-04);--mrl-button-inset-horizontal: calc( var(--mrl-spacing-01) + var(--mrl-spacing-02) );--mrl-button-icon-margin-right: var(--mrl-spacing-02)}.mrlIconButton--ghost-inverse.mrlButton--skeleton,.mrlButton--ghost-inverse.mrlButton--skeleton{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}.mrlIconButton--ghost-inverse.toggleStyle--default[aria-pressed=true],.mrlIconButton--ghost-inverse.toggleStyle--default[aria-checked=true],.mrlIconButton--ghost-inverse.toggleStyle--default[aria-expanded=true],.mrlIconButton--ghost-inverse.toggleStyle--default[aria-selected=true],.mrlButton--ghost-inverse.toggleStyle--default[aria-pressed=true],.mrlButton--ghost-inverse.toggleStyle--default[aria-checked=true],.mrlButton--ghost-inverse.toggleStyle--default[aria-expanded=true],.mrlButton--ghost-inverse.toggleStyle--default[aria-selected=true]{--mrl-button-background-color: var(--mrl-color-background);--mrl-button-text-color: var(--mrl-color-text)}.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-pressed=true],.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-checked=true],.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-expanded=true],.mrlIconButton--ghost-inverse.toggleStyle--secondary[aria-selected=true],.mrlButton--ghost-inverse.toggleStyle--secondary[aria-pressed=true],.mrlButton--ghost-inverse.toggleStyle--secondary[aria-checked=true],.mrlButton--ghost-inverse.toggleStyle--secondary[aria-expanded=true],.mrlButton--ghost-inverse.toggleStyle--secondary[aria-selected=true]{--mrl-button-background-color: var(--mrl-color-accent);--mrl-button-text-color: var(--mrl-color-text-inverse)}.mrlIconButton--ghost-inverse[aria-disabled=true][aria-pressed=true],.mrlIconButton--ghost-inverse[aria-disabled=true][aria-checked=true],.mrlIconButton--ghost-inverse[aria-disabled=true][aria-expanded=true],.mrlIconButton--ghost-inverse[aria-disabled=true][aria-selected=true],.mrlButton--ghost-inverse[aria-disabled=true][aria-pressed=true],.mrlButton--ghost-inverse[aria-disabled=true][aria-checked=true],.mrlButton--ghost-inverse[aria-disabled=true][aria-expanded=true],.mrlButton--ghost-inverse[aria-disabled=true][aria-selected=true]{--mrl-button-background-color-disabled: var(--mrl-white-opacity-03);--mrl-button-text-color-disabled: var(--mrl-white-opacity-04)}.mrlIconButton--inverse,.mrlButton--inverse{--mrl-button-background-color: var(--mrl-color-background);--mrl-button-background-color-active: var(--mrl-white-opacity-06);--mrl-button-background-color-hover: var(--mrl-white-opacity-08);--mrl-button-background-color-disabled: var(--mrl-white-opacity-03);--mrl-button-border-color: rgba(var(--mrl-gray-20), 1);--mrl-button-border-color-active: var(--mrl-black-opacity-00);--mrl-button-border-color-hover: var(--mrl-black-opacity-00);--mrl-button-border-color-disabled: var(--mrl-black-opacity-00);--mrl-button-text-color: rgba(var(--mrl-gray-100), 1);--mrl-button-text-color-active: rgba(var(--mrl-gray-100), 1);--mrl-button-text-color-disabled: var(--mrl-black-opacity-03)}.mrlIconButton--inverse.mrlButton--skeleton,.mrlButton--inverse.mrlButton--skeleton{--mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse)}.mrlIconButton[aria-disabled=true][aria-pressed=true],.mrlIconButton[aria-disabled=true][aria-checked=true],.mrlIconButton[aria-disabled=true][aria-expanded=true],.mrlIconButton[aria-disabled=true][aria-selected=true],.mrlButton[aria-disabled=true][aria-pressed=true],.mrlButton[aria-disabled=true][aria-checked=true],.mrlButton[aria-disabled=true][aria-expanded=true],.mrlButton[aria-disabled=true][aria-selected=true]{--mrl-button-background-color-disabled: var(--mrl-black-opacity-03);--mrl-button-text-color-disabled: var(--mrl-color-text-inverse)}.mrlButton{font-family:var(--mrl-font-family-01);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive-small);min-height:var(--mrl-spacing-09);align-items:center;display:inline-flex;padding:var(--mrl-button-inset-vertical) var(--mrl-button-inset-horizontal);text-align:center;vertical-align:middle;white-space:nowrap}.mrlButton.mrlButton--small{font-family:var(--mrl-font-family-01);font-size:var(--mrl-type-size-text-xsmall);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-interactive-xsmall);line-height:var(--mrl-type-line-height-interactive-xsmall);min-height:var(--mrl-spacing-08)}.mrlButton.mrlButton--large{font-family:var(--mrl-font-family-01);font-size:var(--mrl-type-size-text);font-weight:var(--mrl-type-weight-interactive);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-interactive);min-height:calc(var(--mrl-spacing-09) + var(--mrl-spacing-02))}.mrlButton .MrlSvgContainer{margin-right:var(--mrl-button-icon-margin-right);max-width:var(--mrl-button-icon-size);min-width:var(--mrl-button-icon-size)}.mrlButton.mrlButton--icon-after{flex-direction:row-reverse}.mrlButton.mrlButton--icon-after .MrlSvgContainer{margin-left:var(--mrl-button-icon-margin-right);margin-right:0}',""]);const i=l},899:(r,t,e)=>{e.d(t,{Z:()=>i});var o=e(81),a=e.n(o),n=e(645),l=e.n(n)()(a());l.push([r.id,".MrlSvg--StPVX{--mrl-svg-size: var(--mrl-spacing-07)}.MrlSvg--small--zP1On{--mrl-svg-size: var(--mrl-spacing-06)}.MrlSvg--large--HeoAa{--mrl-svg-size: var(--mrl-spacing-10)}.MrlSvg--auto--w9gVr{--mrl-svg-size: 100%}.MrlSvgContainer--xWawW{display:inline-flex}.MrlSvg--StPVX{display:inline-block;fill:currentcolor;height:var(--mrl-svg-size);width:var(--mrl-svg-size)}.MrlSvg--StPVX *{pointer-events:none}.MrlSvg--auto--w9gVr{width:100%}",""]),l.locals={MrlSvg:"MrlSvg--StPVX","MrlSvg--small":"MrlSvg--small--zP1On","MrlSvg--large":"MrlSvg--large--HeoAa","MrlSvg--auto":"MrlSvg--auto--w9gVr",MrlSvgContainer:"MrlSvgContainer--xWawW"};const i=l},221:(r,t,e)=>{e.d(t,{Z:()=>i});var o=e(81),a=e.n(o),n=e(645),l=e.n(n)()(a());l.push([r.id,".mrl-tooltip-wrapper--cqLMv{display:inline-flex;position:relative}",""]),l.locals={"mrl-tooltip-wrapper":"mrl-tooltip-wrapper--cqLMv"};const i=l},658:(r,t,e)=>{e.d(t,{Z:()=>i});var o=e(81),a=e.n(o),n=e(645),l=e.n(n)()(a());l.push([r.id,'.mrl-tooltip-content--K4VTC{--mrl-tooltip-background-color: var(--mrl-color-background-inverse);--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);--mrl-tooltip-border-radius: var(--mrl-border-radius-content-large);--mrl-tooltip-font-size: var(--mrl-type-size-text-xsmall);--mrl-tooltip-line-height: var(--mrl-type-line-height-text-xsmall);--mrl-tooltip-padding: var(--mrl-spacing-02) var(--mrl-spacing-04);--mrl-tooltip-arrow-size: 8px;--mrl-tooltip-arrow-border-radius: 1px;--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);--mrl-tooltip-arrow-display-left-right: none;--mrl-tooltip-trigger-offset: var(--mrl-spacing-03)}.mrl-tooltip-content--K4VTC{background:var(--mrl-tooltip-background-color);border-radius:var(--mrl-tooltip-border-radius);color:var(--mrl-tooltip-text-color);cursor:default;font-family:proxima-nova,sans-serif;font-size:var(--mrl-tooltip-font-size);font-weight:var(--mrl-type-weight-title-secondary);line-height:var(--mrl-tooltip-line-height);max-width:calc(var(--mrl-spacing-09)*7);opacity:0;overflow-wrap:break-word;padding:var(--mrl-tooltip-padding);pointer-events:none;position:absolute;transition-property:opacity;white-space:normal;width:max-content;z-index:900}.mrl-tooltip-content--K4VTC::after{background:rgba(0,0,0,0);border-bottom:9.4339811321px solid var(--mrl-tooltip-background-color);border-right:9.4339811321px solid rgba(0,0,0,0);content:"";height:0;position:absolute;transform:rotate(135deg);width:0}.mrl-tooltip-content--K4VTC[data-state=show],.mrl-tooltip-content--K4VTC:hover{opacity:1;pointer-events:inherit;transition-delay:var(--mrl-duration-03);transition-duration:var(--mrl-duration-03);transition-timing-function:var(--mrl-timing-m2)}.mrl-tooltip-content--K4VTC[data-position=top]{bottom:100%;margin-bottom:var(--mrl-tooltip-trigger-offset);right:50%;transform:translateX(50%)}.mrl-tooltip-content--K4VTC[data-position=top]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);bottom:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);left:calc(50% - var(--mrl-tooltip-arrow-size)/2);transform:rotate(315deg)}.mrl-tooltip-content--K4VTC[data-anchor=start]{left:0;right:initial;transform:none}.mrl-tooltip-content--K4VTC[data-anchor=start]::after{left:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-content--K4VTC[data-anchor=end]{right:0;transform:none}.mrl-tooltip-content--K4VTC[data-anchor=end]::after{left:auto;right:var(--mrl-tooltip-arrow-spacing)}.mrl-tooltip-content--K4VTC[data-position=bottom]{margin-top:var(--mrl-tooltip-trigger-offset);top:100%}.mrl-tooltip-content--K4VTC[data-position=bottom]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);top:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px)}.mrl-tooltip-content--K4VTC[data-position=bottom][data-anchor=center]{right:50%;transform:translateX(50%)}.mrl-tooltip-content--K4VTC[data-position=bottom][data-anchor=center]::after{left:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content--K4VTC[data-position=left]{left:initial;margin-right:var(--mrl-tooltip-trigger-offset);right:100%;top:50%;transform:translateY(-50%)}.mrl-tooltip-content--K4VTC[data-position=left]::after{border-top-right-radius:var(--mrl-tooltip-arrow-border-radius);display:var(--mrl-tooltip-arrow-display-left-right);right:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:calc(50% - var(--mrl-tooltip-arrow-size)/2)}.mrl-tooltip-content--K4VTC[data-position=right]{left:100%;margin-left:var(--mrl-tooltip-trigger-offset);top:50%;transform:translateY(-50%)}.mrl-tooltip-content--K4VTC[data-position=right]::after{border-bottom-left-radius:var(--mrl-tooltip-arrow-border-radius);display:var(--mrl-tooltip-arrow-display-left-right);left:calc(var(--mrl-tooltip-arrow-size)*-1/2 + 1px);top:calc(50% - var(--mrl-tooltip-arrow-size)/2)}',""]),l.locals={"mrl-tooltip-content":"mrl-tooltip-content--K4VTC"};const i=l},645:r=>{r.exports=function(r){var t=[];return t.toString=function(){return this.map((function(t){var e="",o=void 0!==t[5];return t[4]&&(e+="@supports (".concat(t[4],") {")),t[2]&&(e+="@media ".concat(t[2]," {")),o&&(e+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),e+=r(t),o&&(e+="}"),t[2]&&(e+="}"),t[4]&&(e+="}"),e})).join("")},t.i=function(r,e,o,a,n){"string"==typeof r&&(r=[[null,r,void 0]]);var l={};if(o)for(var i=0;i<this.length;i++){var s=this[i][0];null!=s&&(l[s]=!0)}for(var c=0;c<r.length;c++){var u=[].concat(r[c]);o&&l[u[0]]||(void 0!==n&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=n),e&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=e):u[2]=e),a&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=a):u[4]="".concat(a)),t.push(u))}},t}},81:r=>{r.exports=function(r){return r[1]}},379:r=>{var t=[];function e(r){for(var e=-1,o=0;o<t.length;o++)if(t[o].identifier===r){e=o;break}return e}function o(r,o){for(var n={},l=[],i=0;i<r.length;i++){var s=r[i],c=o.base?s[0]+o.base:s[0],u=n[c]||0,m="".concat(c," ").concat(u);n[c]=u+1;var d=e(m),v={css:s[1],media:s[2],sourceMap:s[3],supports:s[4],layer:s[5]};if(-1!==d)t[d].references++,t[d].updater(v);else{var p=a(v,o);o.byIndex=i,t.splice(i,0,{identifier:m,updater:p,references:1})}l.push(m)}return l}function a(r,t){var e=t.domAPI(t);return e.update(r),function(t){if(t){if(t.css===r.css&&t.media===r.media&&t.sourceMap===r.sourceMap&&t.supports===r.supports&&t.layer===r.layer)return;e.update(r=t)}else e.remove()}}r.exports=function(r,a){var n=o(r=r||[],a=a||{});return function(r){r=r||[];for(var l=0;l<n.length;l++){var i=e(n[l]);t[i].references--}for(var s=o(r,a),c=0;c<n.length;c++){var u=e(n[c]);0===t[u].references&&(t[u].updater(),t.splice(u,1))}n=s}}},569:r=>{var t={};r.exports=function(r,e){var o=function(r){if(void 0===t[r]){var e=document.querySelector(r);if(window.HTMLIFrameElement&&e instanceof window.HTMLIFrameElement)try{e=e.contentDocument.head}catch(r){e=null}t[r]=e}return t[r]}(r);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(e)}},216:r=>{r.exports=function(r){var t=document.createElement("style");return r.setAttributes(t,r.attributes),r.insert(t,r.options),t}},565:(r,t,e)=>{r.exports=function(r){var t=e.nc;t&&r.setAttribute("nonce",t)}},795:r=>{r.exports=function(r){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=r.insertStyleElement(r);return{update:function(e){!function(r,t,e){var o="";e.supports&&(o+="@supports (".concat(e.supports,") {")),e.media&&(o+="@media ".concat(e.media," {"));var a=void 0!==e.layer;a&&(o+="@layer".concat(e.layer.length>0?" ".concat(e.layer):""," {")),o+=e.css,a&&(o+="}"),e.media&&(o+="}"),e.supports&&(o+="}");var n=e.sourceMap;n&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(n))))," */")),t.styleTagTransform(o,r,t.options)}(t,r,e)},remove:function(){!function(r){if(null===r.parentNode)return!1;r.parentNode.removeChild(r)}(t)}}}},589:r=>{r.exports=function(r,t){if(t.styleSheet)t.styleSheet.cssText=r;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(r))}}},200:r=>{r.exports=t},639:t=>{t.exports=r}},o={};function a(r){var t=o[r];if(void 0!==t)return t.exports;var n=o[r]={id:r,exports:{}};return e[r](n,n.exports,a),n.exports}a.n=r=>{var t=r&&r.__esModule?()=>r.default:()=>r;return a.d(t,{a:t}),t},a.d=(r,t)=>{for(var e in t)a.o(t,e)&&!a.o(r,e)&&Object.defineProperty(r,e,{enumerable:!0,get:t[e]})},a.o=(r,t)=>Object.prototype.hasOwnProperty.call(r,t),a.r=r=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(r,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(r,"__esModule",{value:!0})},a.nc=void 0;var n={};return(()=>{a.r(n),a.d(n,{MrlButton:()=>E,MrlSvg:()=>H,MrlTooltip:()=>G,MrlTooltipDefaults:()=>L,allowedMrlTooltipValues:()=>q,allowedSvgValues:()=>j,getCamelCase:()=>c,getUniqueId:()=>b,isObject:()=>u,setAttributes:()=>p,setClasses:()=>v,svgDefaults:()=>P});var r=a(639),t=a.n(r),e=a(200),o=a.n(e),l={iconPositions:["before","after"],kinds:["secondary","primary","ghost","inverse","ghost-inverse"],sizes:["medium","small","large"],states:["default","disabled","selected","selected-disabled","skeleton"],toggleAriaTypes:["expanded","pressed","selected","checked"],toggleStyles:["default","secondary"],types:["button","reset","submit"]},i=function(r,t){var e=t||r;return"disabled"===e||"selected-disabled"===e||"skeleton"===e},s=function(r,t){var e=t||r;return"selected"===e||"selected-disabled"===e},c=function(r){return r.trim().replace(/[-_]+/g," ").replace(/[`"',.;:?!@#$%^&*()~[\]{}|/\\<>]+/g,"").replace(/(?:^\w|[A-Z]|\b\w|\s+)/g,(function(r,t){return 0==+r?"":0===t?r.toLowerCase():r.toUpperCase()}))},u=function(r){return(!r||!Array.isArray(r))&&r instanceof Object},m=function(){return m=Object.assign||function(r){for(var t,e=1,o=arguments.length;e<o;e++)for(var a in t=arguments[e])Object.prototype.hasOwnProperty.call(t,a)&&(r[a]=t[a]);return r},m.apply(this,arguments)},d=function(r){try{return JSON.parse(r)}catch(t){return console.error("The attrs property is not properly-formatted JSON:"),console.error(r),console.error(t),t}},v=function(r,t){var e,o="string"==typeof r?d(r):r;return o&&u(o)&&o.class?m(((e={})["".concat(o.class)]=void 0!==o.class&&o.class.length>0,e),t):t},p=function(r,t,e,a){void 0===t&&(t={}),void 0===a&&(a=!1);var n="string"==typeof r?d(r):r;return n?a?Object.assign({},t,n,{className:o()(e,n.class)}):Object.assign({},t,n,{class:o()(e,n.class)}):{}},g=0,b=function(r){return void 0===r&&(r="mrl"),g++,"".concat(r,"-").concat(g)},h=a(379),f=a.n(h),y=a(795),x=a.n(y),k=a(569),w=a.n(k),B=a(565),S=a.n(B),I=a(216),z=a.n(I),C=a(589),O=a.n(C),T=a(705),M={};M.styleTagTransform=O(),M.setAttributes=S(),M.insert=w().bind(null,"head"),M.domAPI=x(),M.insertStyleElement=z(),f()(T.Z,M),T.Z&&T.Z.locals&&T.Z.locals;var V=function(){return V=Object.assign||function(r){for(var t,e=1,o=arguments.length;e<o;e++)for(var a in t=arguments[e])Object.prototype.hasOwnProperty.call(t,a)&&(r[a]=t[a]);return r},V.apply(this,arguments)},E=t().forwardRef((function(e,a){var n,c=e.attrs,u=e.badge,m=e.disabled,d=void 0!==m&&m,v=e.icon,g=e.iconPos,b=e.kind,h=void 0===b?"secondary":b,f=e.onClick,y=e.toggleAria,x=void 0===y?"expanded":y,k=e.toggleStyle,w=e.text,B=e.size,S=void 0===B?"medium":B,I=e.state,z=void 0===I?"default":I,C=(0,r.useState)((function(){return s(z)})),O=C[0],T=C[1],M=k&&l.toggleStyles.includes(k);(0,r.useEffect)((function(){T(!s(z))}),[z]);var E=o()("mrlButton","mrlButton--".concat(S),"mrlButton--".concat(h),"skeleton"===z&&"mrlButton--skeleton",M&&"toggleStyle--".concat(k),v&&"mrlButton--icon-".concat(g)),j=p(c||"",V(V({"aria-disabled":i(z)||d,"aria-label":w},M&&((n={})["aria-".concat(x)]=O||!1,n)),{role:"button",type:"button"}));return t().createElement("button",V({},j,{className:E,ref:a,onClick:function(r){r.stopPropagation(),i(z)||d||(M&&T((function(r){return!r})),f(r))},onKeyDown:function(r){i(z)||d||" "!==r.key&&"Enter"!==r.key||(r.preventDefault(),T((function(r){return!r})),f(r))}}),v,w,u)})),j={sizes:["medium","small","large","auto"],themes:["classic","default"]},P={attrs:{role:"presentation"},size:"medium",theme:"default"},A=a(899),K={};K.styleTagTransform=O(),K.setAttributes=S(),K.insert=w().bind(null,"head"),K.domAPI=x(),K.insertStyleElement=z(),f()(A.Z,K);const Z=A.Z&&A.Z.locals?A.Z.locals:void 0;var N=function(){return N=Object.assign||function(r){for(var t,e=1,o=arguments.length;e<o;e++)for(var a in t=arguments[e])Object.prototype.hasOwnProperty.call(t,a)&&(r[a]=t[a]);return r},N.apply(this,arguments)},H=function(r){var e,a=r.theme,n=r.size,l=void 0===n?"medium":n,i=r.svg,s=r.attrs,m=void 0===s?{}:s,d=r.isClone,g=void 0!==d&&d,h=function(r,t){var e={};for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&t.indexOf(o)<0&&(e[o]=r[o]);if(null!=r&&"function"==typeof Object.getOwnPropertySymbols){var a=0;for(o=Object.getOwnPropertySymbols(r);a<o.length;a++)t.indexOf(o[a])<0&&Object.prototype.propertyIsEnumerable.call(r,o[a])&&(e[o[a]]=r[o[a]])}return e}(r,["theme","size","svg","attrs","isClone"]),f="There has been an issue rendering your SVG!",y=function(r,e,a){if(void 0===e&&(e={}),"text"===r.type)return r.value;var n=r.name,l=r.attributes||{};return Object.keys(l).forEach((function(r){var t="data-"===r.slice(0,5)?r:c(r);l[t]=l[r],r!==t&&delete l[r]})),"svg"===n?t().createElement("span",{className:o()(Z.MrlSvgContainer,"MrlSvgContainer")},t().createElement("svg",N({},l,e,h,{className:o()(a),key:b()}),Array.isArray(r.children)&&r.children.map((function(r){return y(r)})))):t().createElement(n,N({},l,{key:b()}),Array.isArray(r.children)&&r.children.map((function(r){return y(r)})))},x=function(r,e,n,l){void 0===e&&(e={});var i=""===n?"This icon":n,s=Object.keys(r).length>0?"".concat(i," has no '").concat(a,"' theme found! Please try another SVG or theme."):"No valid themes found.";return console.warn(f),console.warn(s),t().createElement("span",N({className:o()(l)},e))};if(g)return t().createElement("span",null);if(!i)return t().createElement("span",null);var k=p(m,P.attrs),w=v(m,((e={})[Z.MrlSvg]=!0,e[Z["MrlSvg--".concat(l)]]="medium"!==l,e));delete k.class;var B="string"==typeof i;if(B&&!function(r){try{JSON.parse(r)}catch(t){return console.warn("".concat(f," Invalid SVG code:")),console.warn(r),!1}return!0}(i))return t().createElement("span",null);var S=B?JSON.parse(i):i,I=Object.keys(S),z=function(r){var t=r.indexOf("default")>=0,e=r.indexOf("rebrand")>=0;return"rebrand"!==a||e?a&&""!==a?a:t?"default":null:"default"}(I);return z&&""!==z?S[z]?y(S[z],k,w):u(S[I[0]])?x(S,k,S[I[0]].attributes["data-mrl-svg-name"],w):x(S):y(S,k,w)},q={anchors:["start","center","end"],positions:["top","bottom","left","right"],state:["show","hide"]},L={anchor:"center",attrs:{},position:"right",state:"hide"},D=a(658),R={};R.styleTagTransform=O(),R.setAttributes=S(),R.insert=w().bind(null,"head"),R.domAPI=x(),R.insertStyleElement=z(),f()(D.Z,R);const X=D.Z&&D.Z.locals?D.Z.locals:void 0;var J=function(){return J=Object.assign||function(r){for(var t,e=1,o=arguments.length;e<o;e++)for(var a in t=arguments[e])Object.prototype.hasOwnProperty.call(t,a)&&(r[a]=t[a]);return r},J.apply(this,arguments)},_=function(r){var e=r.anchor,a=r.attrs,n=r.id,l=r.position,i=r.state,s=r.text,c=p(a,L.attrs,void 0,!0),u=v(a,{"mrl-tooltip-content":!0});return t().createElement("div",J({"data-anchor":e,"data-position":l,"data-state":i,id:n,role:"tooltip"},c,{className:o()(u,X["mrl-tooltip-content"])}),s)},U=a(221),W={};W.styleTagTransform=O(),W.setAttributes=S(),W.insert=w().bind(null,"head"),W.domAPI=x(),W.insertStyleElement=z(),f()(U.Z,W);const F=U.Z&&U.Z.locals?U.Z.locals:void 0;var G=function(e){var o=e.children,a=e.text,n=e.attrs,l=void 0===n?{}:n,i=e.position,s=void 0===i?L.position||"top":i,c=e.anchor,u=void 0===c?L.anchor:c,m=(0,r.useState)("hide"),d=m[0],v=m[1],p=(0,r.useState)(""),g=p[0],h=p[1],f=(0,r.useRef)(null),y=function(){v("show")},x=(0,r.useCallback)((function(){v("show")}),[]),k=function(){v("hide")},w=function(r){"Escape"===r.key&&k()};return(0,r.useEffect)((function(){""===g&&h(b("mrl-tooltip"))}),[g]),(0,r.useEffect)((function(){var r=f.current;return function(){r&&r.removeEventListener("focus",x)}}),[x]),t().createElement("div",{className:F["mrl-tooltip"]},t().createElement("div",{className:F["mrl-tooltip-wrapper"]},t().Children.map(o,(function(r,e){return 0===e&&t().isValidElement(r)?t().cloneElement(r,{"aria-describedby":g,onBlur:k,onFocus:x,onKeyDown:w,onMouseOut:k,onMouseOver:y,ref:f}):r})),t().createElement(_,{attrs:l,anchor:u,id:g,position:s,text:a,state:d})))}})(),n})()));

package/dist/utils/setAttributes/setAttributes.d.ts

@@ -14,16 +14,19 @@ export type ClassObject = Record<string, boolean>;
  * @param {ClassObject} defaultClasses - design system component classes to apply
  * @returns {ClassObject} - with all classes
  */
-export declare const setClasses: (customClasses: AttrsObject | string, defaultClasses: ClassObject) => ClassObject;
+export declare const setClasses: (customClasses: AttrsObject | string | undefined, defaultClasses: ClassObject) => ClassObject;
 /**
  * Set an object of attributes to be used in a given component.
  *
- * @param {AttrsObject | string} attributes - the custom attributes passed to the component
- * @param {AttrsObject} [defaults={}] - an optional object of the default attributes of a component
- * @param {string} className - default classes to apply to the component
- * @returns {AttrsObject} - an object of component attributes
+ * @param {AttrsObject | string} attributes - The custom attributes passed to the component
+ * @param {AttrsObject} [defaults={}] - An optional object of the default attributes of a component
+ * @param {string} className - Default classes to apply to the component
+ * @param {boolean} forReact - Whether or not the attributes are being set for a React component.
+ *
+ * Use when applying attributes such as a className directly to a react component.
+ * @returns {AttrsObject} - An object of component attributes
  */
-export declare const setAttributes: (attributes: AttrsObject | string, defaults?: AttrsObject, className?: string) => AttrsObject;
+export declare const setAttributes: (attributes: AttrsObject | string | undefined, defaults?: AttrsObject, className?: string, forReact?: boolean) => AttrsObject;
 /**
  *  Generates unique identifier
  *

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "1.1.0",
+	"version": "1.3.0",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",