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

package/dist/esm/components/tabs/MrlTabs/index.js

@@ -0,0 +1 @@
+export * from './MrlTabs';

package/dist/esm/components/tabs/constants.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/tabs/index.js

@@ -0,0 +1,5 @@
+export * from './MrlTab';
+export * from './MrlTabContent';
+export * from './MrlTabGroup';
+export * from './MrlTabLink';
+export * from './MrlTabs';

package/dist/esm/components/text/MrlText/MrlText.js

@@ -0,0 +1,41 @@
+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 classnames from 'classnames';
+import { setAttributes } from '../../../utils';
+import { textDefaults } from '../constants';
+import styles from './MrlText.module.scss.js';
+/**
+ * MrlText Component
+ *
+ * @param {MrlTextProps} props - MrlText component props
+ * @returns a paragraph element
+ */
+export function MrlText(props) {
+    const { attrs = {}, size = textDefaults.size, children, className, text, ['data-qa']: dataQa = attrs['data-qa'] } = props, rest = __rest(props, ["attrs", "size", "children", "className", "text", 'data-qa']);
+    const attributes = setAttributes(attrs, textDefaults.attrs);
+    const allClasses = classnames(
+    // @deprecated
+    'mrl-text', 'MrlText', styles['MrlText'], {
+        [styles[`MrlText--${size}`]]: size !== textDefaults.size,
+        [`MrlText--${size}`]: size !== textDefaults.size,
+        [attributes.className]: typeof attributes.className !== 'undefined',
+        [attributes.class]: typeof attributes.class !== 'undefined'
+    }, className);
+    // @deprecated
+    delete attributes.class;
+    delete attributes.className;
+    if (text && text !== '') {
+        return (React.createElement("p", Object.assign({}, attributes, rest, { "data-qa": dataQa, className: allClasses }), text));
+    }
+    return (React.createElement("p", Object.assign({}, attributes, rest, { "data-qa": dataQa, className: allClasses }), children));
+}

package/dist/esm/components/text/MrlText/MrlText.module.css

@@ -0,0 +1,30 @@
+.MrlText--BofS7 {
+  --mrl-text-size: var(--mrl-type-size-text);
+  --mrl-text-weight: var(--mrl-type-weight-text);
+  --mrl-text-spacing: var(--mrl-type-spacing-text);
+  --mrl-text-height: var(--mrl-type-line-height-text);
+}
+.MrlText--BofS7.MrlText--large--NtUYc {
+  --mrl-text-size: var(--mrl-type-size-text-large);
+  --mrl-text-height: var(--mrl-type-line-height-text-large);
+}
+.MrlText--BofS7.MrlText--small--LFM2j {
+  --mrl-text-size: var(--mrl-type-size-text-small);
+  --mrl-text-height: var(--mrl-type-line-height-text-small);
+}
+.MrlText--BofS7.MrlText--xsmall--1JLQ1 {
+  --mrl-text-size: var(--mrl-type-size-text-xsmall);
+  --mrl-text-height: var(--mrl-type-line-height-text-xsmall);
+}
+.MrlText--BofS7.MrlText--xxsmall--ikXeK {
+  --mrl-text-size: var(--mrl-type-size-text-xxsmall);
+  --mrl-text-height: var(--mrl-type-line-height-text-xxsmall);
+}
+
+.MrlText--BofS7 {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-text-size);
+  font-weight: var(--mrl-text-weight);
+  letter-spacing: var(--mrl-text-spacing);
+  line-height: var(--mrl-text-height);
+}

package/dist/esm/components/text/MrlText/MrlText.module.scss.js

@@ -0,0 +1,8 @@
+import "./MrlText.module.css";
+export default {
+	"MrlText": "MrlText--BofS7",
+	"MrlText--large": "MrlText--large--NtUYc",
+	"MrlText--small": "MrlText--small--LFM2j",
+	"MrlText--xsmall": "MrlText--xsmall--1JLQ1",
+	"MrlText--xxsmall": "MrlText--xxsmall--ikXeK"
+};

package/dist/esm/components/text/MrlText/index.js

@@ -0,0 +1 @@
+export * from './MrlText';

package/dist/esm/components/text/MrlTextHeading/MrlTextHeading.js

@@ -0,0 +1,47 @@
+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 classnames from 'classnames';
+import { setAttributes } from '../../../utils';
+import { headingDefaults } from '../constants';
+import styles from './MrlTextHeading.module.scss.js';
+/**
+ * MuralTextHeading component
+ * Used for creating semantic headings within a page
+ *
+ * @param {MrlTextHeadingProps} props - MrlTextHeading component props
+ * @returns a heading element
+ */
+export function MrlTextHeading(props) {
+    const { attrs = {}, children, className, hierarchy = headingDefaults.hierarchy, kind = headingDefaults.kind, level = headingDefaults.level, size = headingDefaults.size, text, ['data-qa']: dataQa = attrs['data-qa'] } = props, rest = __rest(props, ["attrs", "children", "className", "hierarchy", "kind", "level", "size", "text", 'data-qa']);
+    const attributes = setAttributes(attrs, headingDefaults.attrs);
+    const allClasses = classnames({
+        [styles[`MrlTextHeading-${kind}`]]: kind.length > 0,
+        [styles[`MrlTextHeading-${kind}--${size}`]]: size !== 'medium',
+        [styles[`MrlTextHeading-${kind}--${hierarchy}`]]: hierarchy !== 'primary',
+        [attributes.className]: typeof attributes.className !== 'undefined',
+        [attributes.class]: typeof attributes.class !== 'undefined'
+    }, 
+    // @deprecated
+    'mrl-text-heading', 'MrlTextHeading', className);
+    // @todo - 2563 - move to setAttributes
+    delete attributes.className;
+    delete attributes.class;
+    /**
+     * getting h1-h6 from the level prop
+     */
+    const Tag = `h${level}`;
+    if (text && text !== '') {
+        return (React.createElement(Tag, Object.assign({}, attributes, rest, { "data-qa": dataQa, className: allClasses }), text));
+    }
+    return (React.createElement(Tag, Object.assign({}, attributes, rest, { "data-qa": dataQa, className: allClasses }), children));
+}

package/dist/esm/components/text/MrlTextHeading/MrlTextHeading.module.css

@@ -0,0 +1,108 @@
+.MrlTextHeading-display--QzMex {
+  --mrl-heading-family: var(--mrl-heading-font-alt);
+  --mrl-heading-size: var(--mrl-type-size-display);
+  --mrl-heading-weight: var(--mrl-type-weight-display);
+  --mrl-heading-spacing: var(--mrl-type-spacing-display);
+  --mrl-heading-height: var(--mrl-type-line-height-display);
+}
+
+.MrlTextHeading-display--large---S6-0 {
+  --mrl-heading-size: var(--mrl-type-size-display-large);
+  --mrl-heading-spacing: var(--mrl-type-spacing-display-large);
+  --mrl-heading-height: var(--mrl-type-line-height-display-large);
+}
+
+.MrlTextHeading-display--small--dCHXW {
+  --mrl-heading-size: var(--mrl-type-size-display-small);
+  --mrl-heading-spacing: var(--mrl-type-spacing-display-small);
+  --mrl-heading-height: var(--mrl-type-line-height-display-small);
+}
+
+.MrlTextHeading-display--xsmall--ldx2X {
+  --mrl-heading-size: var(--mrl-type-size-display-xsmall);
+  --mrl-heading-spacing: var(--mrl-type-spacing-display-xsmall);
+  --mrl-heading-height: var(--mrl-type-line-height-display-xsmall);
+}
+
+.MrlTextHeading-headline--KKF-c {
+  --mrl-heading-family: var(--mrl-heading-font);
+  --mrl-heading-size: var(--mrl-type-size-headline);
+  --mrl-heading-weight: var(--mrl-type-weight-headline);
+  --mrl-heading-spacing: var(--mrl-type-spacing-headline);
+  --mrl-heading-height: var(--mrl-type-line-height-headline);
+}
+
+.MrlTextHeading-headline--large--ZwQxX {
+  --mrl-heading-size: var(--mrl-type-size-headline-large);
+  --mrl-heading-spacing: var(--mrl-type-spacing-headline-large);
+  --mrl-heading-height: var(--mrl-type-line-height-headline-large);
+}
+
+.MrlTextHeading-headline--small--aoiZN {
+  --mrl-heading-size: var(--mrl-type-size-headline-small);
+  --mrl-heading-spacing: var(--mrl-type-spacing-headline-small);
+  --mrl-heading-height: var(--mrl-type-line-height-headline-small);
+}
+
+.MrlTextHeading-title--496Km {
+  --mrl-heading-family: var(--mrl-heading-font);
+  --mrl-heading-size: var(--mrl-type-size-text);
+  --mrl-heading-weight: var(--mrl-type-weight-title);
+  --mrl-heading-spacing: var(--mrl-type-spacing-text);
+  --mrl-heading-height: var(--mrl-type-line-height-title);
+}
+
+.MrlTextHeading-title--large--WDb5K {
+  --mrl-heading-size: var(--mrl-type-size-text-large);
+  --mrl-heading-height: var(--mrl-type-line-height-title-large);
+}
+
+.MrlTextHeading-title--small--jaXxt {
+  --mrl-heading-size: var(--mrl-type-size-text-small);
+  --mrl-heading-height: var(--mrl-type-line-height-title-small);
+}
+
+.MrlTextHeading-title--xsmall--ealzD {
+  --mrl-heading-size: var(--mrl-type-size-text-xsmall);
+  --mrl-heading-height: var(--mrl-type-line-height-title-xsmall);
+}
+
+.MrlTextHeading-title--xxsmall--2Hq5F {
+  --mrl-heading-size: var(--mrl-type-size-text-xxsmall);
+  --mrl-heading-height: var(--mrl-type-line-height-title-xxsmall);
+}
+
+.MrlTextHeading-title--secondary--s7laN {
+  --mrl-heading-weight: var(--mrl-type-weight-title-secondary);
+}
+
+.MrlTextHeading-display--QzMex {
+  display: block;
+  font-family: var(--mrl-heading-family);
+  font-size: var(--mrl-heading-size);
+  font-weight: var(--mrl-heading-weight);
+  letter-spacing: var(--mrl-heading-spacing);
+  line-height: var(--mrl-heading-height);
+}
+
+.MrlTextHeading-headline--KKF-c {
+  display: block;
+  font-family: var(--mrl-heading-family);
+  font-size: var(--mrl-heading-size);
+  font-weight: var(--mrl-heading-weight);
+  letter-spacing: var(--mrl-heading-spacing);
+  line-height: var(--mrl-heading-height);
+}
+
+.MrlTextHeading-display--QzMex strong {
+  font-weight: var(--mrl-font-weight-02);
+}
+
+.MrlTextHeading-title--496Km {
+  display: block;
+  font-family: var(--mrl-heading-family);
+  font-size: var(--mrl-heading-size);
+  font-weight: var(--mrl-heading-weight);
+  letter-spacing: var(--mrl-heading-spacing);
+  line-height: var(--mrl-heading-height);
+}

package/dist/esm/components/text/MrlTextHeading/MrlTextHeading.module.scss.js

@@ -0,0 +1,16 @@
+import "./MrlTextHeading.module.css";
+export default {
+	"MrlTextHeading-display": "MrlTextHeading-display--QzMex",
+	"MrlTextHeading-display--large": "MrlTextHeading-display--large---S6-0",
+	"MrlTextHeading-display--small": "MrlTextHeading-display--small--dCHXW",
+	"MrlTextHeading-display--xsmall": "MrlTextHeading-display--xsmall--ldx2X",
+	"MrlTextHeading-headline": "MrlTextHeading-headline--KKF-c",
+	"MrlTextHeading-headline--large": "MrlTextHeading-headline--large--ZwQxX",
+	"MrlTextHeading-headline--small": "MrlTextHeading-headline--small--aoiZN",
+	"MrlTextHeading-title": "MrlTextHeading-title--496Km",
+	"MrlTextHeading-title--large": "MrlTextHeading-title--large--WDb5K",
+	"MrlTextHeading-title--small": "MrlTextHeading-title--small--jaXxt",
+	"MrlTextHeading-title--xsmall": "MrlTextHeading-title--xsmall--ealzD",
+	"MrlTextHeading-title--xxsmall": "MrlTextHeading-title--xxsmall--2Hq5F",
+	"MrlTextHeading-title--secondary": "MrlTextHeading-title--secondary--s7laN"
+};

package/dist/esm/components/text/MrlTextHeading/index.js

@@ -0,0 +1 @@
+export * from './MrlTextHeading';

package/dist/esm/components/text/constants.js

@@ -0,0 +1,39 @@
+export const textAllowedValues = {
+    sizes: [
+        'xxsmall',
+        'xsmall',
+        'small',
+        'medium',
+        'large'
+    ]
+};
+/**
+ * Default values for props on the Text component;
+ * Shared between the component and Storybook
+ */
+export const textDefaults = {
+    attrs: {},
+    size: 'medium'
+};
+/**
+ * Defines all of classes allowed for the type attribute;
+ * used for Storybook and testing
+ */
+export const headingAllowedValues = {
+    hierarchy: ['primary', 'secondary'],
+    kinds: ['display', 'headline', 'title'],
+    level: [
+        '1',
+        '2',
+        '3',
+        '4',
+        '5',
+        '6'
+    ],
+    sizes: ['small', 'medium', 'large']
+};
+/**
+ * Default values for props on the Text component;
+ * Shared between the component and Storybook
+ */
+export const headingDefaults = Object.assign(Object.assign({}, textDefaults), { hierarchy: 'primary', kind: 'headline', level: '2' });

package/dist/esm/components/text/index.js

@@ -0,0 +1,2 @@
+export * from './MrlText';
+export * from './MrlTextHeading';

package/dist/esm/components/toolbar/MrlToolbar/MrlToolbar.js

@@ -0,0 +1,122 @@
+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 classnames from 'classnames';
+import { more } from '@muraldevkit/ds-icons';
+import { MrlIconButton, MrlMenu, MrlRovingTabindex, MrlToolbarButton, MrlSvg } from '../../../';
+import styles from './MrlToolbar.module.scss.js';
+/**
+ * MrlToolbar component.
+ *
+ * @param props The MrlToolbar component properties.
+ * @param ref The ref to forward to the toolbar div element.
+ * @returns The MrlToolbar component.
+ */
+export const MrlToolbar = React.forwardRef(function MrlToolbar(props, ref) {
+    const { children, className, kind = 'default', label, maxVisibleItems = -1, menuButtonProps = {
+        kind: kind === 'inverse' ? 'ghost-inverse' : 'ghost',
+        position: props.orientation === 'vertical' ? 'right' : 'bottom',
+        size: 'small',
+        state: 'default',
+        text: 'More tools'
+    }, menuProps = {
+        actionState: { actionType: null, isOpen: false },
+        alignment: 'center',
+        clickOutsideEvent: 'mouseup',
+        isInternal: false,
+        isSubMenu: false,
+        menuOffset: 10,
+        position: 'bottom',
+        spacing: 'default',
+        triggerStopPropagation: false
+    }, orientation = 'horizontal', shouldUseRti, size = 'small', spaced } = props, rest = __rest(props, ["children", "className", "kind", "label", "maxVisibleItems", "menuButtonProps", "menuProps", "orientation", "shouldUseRti", "size", "spaced"]);
+    const toolbarClasses = classnames(styles['MrlToolbar'], 'MrlToolbar', className, {
+        [styles[`MrlToolbar-${kind}`]]: kind !== 'default',
+        [styles[`MrlToolbar-${orientation}`]]: orientation !== 'horizontal',
+        [styles[`MrlToolbar-${size}`]]: size !== 'small',
+        [styles['MrlToolbar-spaced']]: spaced
+    });
+    const menuTriggerRef = React.useRef(null);
+    // eslint-disable-next-line
+    const renderMenu = (items) => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const lockedChildren = [];
+        const menuItems = React.Children.map(items, (child) => {
+            if (child.props.lockedInToolbar) {
+                lockedChildren.push(child);
+                return;
+            }
+            if (child.type.name === 'MrlToolbarButton') {
+                return React.createElement(MrlToolbarButton, Object.assign({}, child.props, { renderInMenu: true }));
+            }
+            return child;
+        });
+        if (menuItems.length === 0) {
+            return;
+        }
+        return (React.createElement(React.Fragment, null,
+            React.createElement(MrlIconButton, Object.assign({ "data-roving": shouldUseRti ? 'true' : undefined, icon: React.createElement(MrlSvg, { svg: more }) }, menuButtonProps, { ref: menuTriggerRef })),
+            React.createElement(MrlMenu, Object.assign({ spacing: menuProps.spacing, position: menuProps.position, actionState: menuProps.actionState || { actionType: null, isOpen: false }, alignment: menuProps.alignment, triggerRef: menuTriggerRef }, menuProps), menuItems),
+            lockedChildren));
+    };
+    const renderChildren = () => {
+        if (children) {
+            const numberOfChildren = React.Children.count(children);
+            const childArray = React.Children.toArray(children);
+            const hasLimit = maxVisibleItems > 0;
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            let toolbarChildren = [];
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const menuChildren = [];
+            if (hasLimit && numberOfChildren > maxVisibleItems + 1) {
+                childArray.map((child, index) => {
+                    if (maxVisibleItems > index) {
+                        toolbarChildren.push(child);
+                    }
+                    else {
+                        menuChildren.push(child);
+                    }
+                });
+            }
+            else {
+                toolbarChildren = childArray;
+            }
+            if (kind === 'skeleton') {
+                const mediumButtonWidth = 24;
+                const smallButtonWidth = 32;
+                const xsmallButtonWidth = 32;
+                const buttonSize = size === 'xsmall'
+                    ? xsmallButtonWidth
+                    : size === 'medium'
+                        ? mediumButtonWidth
+                        : smallButtonWidth;
+                const skeletonSize = (numberOfChildren * buttonSize) / 16;
+                const displayStyle = orientation === 'vertical'
+                    ? { height: `${skeletonSize}rem` }
+                    : { width: `${skeletonSize}rem` };
+                return React.createElement("span", { style: displayStyle });
+            }
+            return (React.createElement(React.Fragment, null,
+                toolbarChildren,
+                renderMenu(menuChildren)));
+        }
+    };
+    const renderToolbar = () => {
+        return (React.createElement("div", Object.assign({}, rest, { className: toolbarClasses, "aria-label": label || rest['aria-label'], ref: ref }, (shouldUseRti ? { role: 'toolbar' } : {})), renderChildren()));
+    };
+    if (shouldUseRti) {
+        return React.createElement(MrlRovingTabindex, null, renderToolbar());
+    }
+    else {
+        return renderToolbar();
+    }
+});

package/dist/esm/components/toolbar/MrlToolbar/MrlToolbar.module.css

@@ -0,0 +1,55 @@
+.MrlToolbar--ILy6m {
+  align-items: center;
+  background: var(--mrl-color-background);
+  border-radius: var(--mrl-border-radius-container);
+  box-shadow: var(--mrl-shadows-lifted);
+  cursor: default;
+  display: flex;
+  gap: var(--mrl-spacing-02);
+  min-height: 3rem;
+  padding: var(--mrl-spacing-03);
+  pointer-events: all;
+  transition: opacity var(--mrl-duration-03) var(--mrl-timing-m3);
+}
+
+.MrlToolbar-inverse--PreZQ {
+  background: var(--mrl-color-background-inverse);
+  box-shadow: none;
+  color: var(--mrl-color-text-inverse);
+}
+
+.MrlToolbar-skeleton--tH2YJ.MrlToolbar-vertical--GmNQj {
+  background-color: rgba(var(--mrl-gray-30), 1);
+}
+
+.MrlToolbar-medium--ygo5b {
+  gap: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
+  min-height: 3.5rem;
+  padding: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
+}
+
+.MrlToolbar-xsmall--idjIR {
+  gap: var(--mrl-spacing-02);
+  min-height: 2rem;
+  padding: var(--mrl-spacing-02);
+}
+
+.MrlToolbar-vertical--GmNQj {
+  flex-direction: column;
+  min-height: 0;
+  min-width: 3rem;
+}
+.MrlToolbar-vertical--GmNQj.MrlToolbar-medium--ygo5b {
+  min-width: 3.5rem;
+}
+.MrlToolbar-vertical--GmNQj.MrlToolbar-xsmall--idjIR {
+  min-width: 2rem;
+}
+
+.MrlToolbar-spaced--oR9I5 {
+  gap: var(--mrl-spacing-05);
+  padding-left: var(--mrl-spacing-05);
+}
+.MrlToolbar-spaced--oR9I5 .mrlButton--HGpoJ + .mrlButton--HGpoJ {
+  margin-left: calc(var(--mrl-spacing-03) / 2 * -1);
+}

package/dist/esm/components/toolbar/MrlToolbar/MrlToolbar.module.scss.js

@@ -0,0 +1,11 @@
+import "./MrlToolbar.module.css";
+export default {
+	"MrlToolbar": "MrlToolbar--ILy6m",
+	"MrlToolbar-inverse": "MrlToolbar-inverse--PreZQ",
+	"MrlToolbar-skeleton": "MrlToolbar-skeleton--tH2YJ",
+	"MrlToolbar-vertical": "MrlToolbar-vertical--GmNQj",
+	"MrlToolbar-medium": "MrlToolbar-medium--ygo5b",
+	"MrlToolbar-xsmall": "MrlToolbar-xsmall--idjIR",
+	"MrlToolbar-spaced": "MrlToolbar-spaced--oR9I5",
+	"mrlButton": "mrlButton--HGpoJ"
+};

package/dist/esm/components/toolbar/MrlToolbar/index.js

@@ -0,0 +1 @@
+export * from './MrlToolbar';

package/dist/esm/components/toolbar/MrlToolbarButton/MrlToolbarButton.js

@@ -0,0 +1,34 @@
+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 { MrlIconButton, MrlMenuItem } from '../../../';
+import styles from './MrlToolbarButton.module.scss.js';
+import classnames from 'classnames';
+/**
+ * MrlToolbarButton component.
+ * @param props The MrlToolbarButton component properties.
+ * @returns The MrlToolbarButton component.
+ */
+export const MrlToolbarButton = React.forwardRef(function MrlToolbarButton(props, ref) {
+    const { className, icon, includeInRoving = false, menuItemProps, onClick, qa, renderInMenu, text, toolbarButtonProps = {
+        position: 'bottom',
+        size: 'small',
+        state: 'default'
+    } } = props, rest = __rest(props, ["className", "icon", "includeInRoving", "menuItemProps", "onClick", "qa", "renderInMenu", "text", "toolbarButtonProps"]);
+    const classes = classnames('MrlToolbarButton', className);
+    if (renderInMenu) {
+        return (React.createElement(MrlMenuItem, Object.assign({}, menuItemProps, { className: classes, "data-qa": qa, onClick: onClick }),
+            React.createElement("span", { className: styles.MrlToolbarButtonIcon }, icon),
+            text));
+    }
+    return (React.createElement(MrlIconButton, Object.assign({}, rest, toolbarButtonProps, { className: classes, "data-qa": qa, "data-roving": includeInRoving ? 'true' : undefined, icon: icon, onClick: onClick, ref: ref, text: text })));
+});

package/dist/esm/components/toolbar/MrlToolbarButton/MrlToolbarButton.module.css

@@ -0,0 +1,3 @@
+.MrlToolbarButtonIcon--7IKxw {
+  margin-right: var(--mrl-spacing-03);
+}

package/dist/esm/components/toolbar/MrlToolbarButton/MrlToolbarButton.module.scss.js

@@ -0,0 +1,4 @@
+import "./MrlToolbarButton.module.css";
+export default {
+	"MrlToolbarButtonIcon": "MrlToolbarButtonIcon--7IKxw"
+};

package/dist/esm/components/toolbar/MrlToolbarButton/index.js

@@ -0,0 +1 @@
+export * from './MrlToolbarButton';

package/dist/esm/components/toolbar/MrlToolbarItem/MrlToolbarItem.js

@@ -0,0 +1,13 @@
+/**
+ * MrlToolbarItem component.
+ *
+ * @param props The MrlToolbarItem component properties.
+ * @returns The MrlToolbarItem component.
+ */
+export const MrlToolbarItem = (props) => {
+    const { renderInMenu, menuItem = null, toolbarItem } = props;
+    if (renderInMenu) {
+        return menuItem;
+    }
+    return toolbarItem;
+};

package/dist/esm/components/toolbar/MrlToolbarItem/index.js

@@ -0,0 +1 @@
+export * from './MrlToolbarItem';

package/dist/esm/components/toolbar/index.js

@@ -0,0 +1,3 @@
+export * from './MrlToolbar';
+export * from './MrlToolbarButton';
+export * from './MrlToolbarItem';