@muraldevkit/ui-toolkit 4.65.3-dev-IWCo.1 → 4.66.0-dev-avUr.1

package/dist/esm/components/modal/MrlModalHeader/MrlModalHeader.module.css

@@ -0,0 +1,287 @@
+:root {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton);
+  --mrl-button-border-radius: var(--mrl-border-radius-functional);
+}
+
+.mrl-u-preHydrateSkeleton--BIRn4 mrl-button:not(.hydrated--XvRC7),
+.mrl-u-preHydrateSkeleton--BIRn4 mrl-icon-button:not(.hydrated--XvRC7),
+.mrl-u-preHydrateSkeleton--BIRn4 mrl-shadow-button:not(.hydrated--XvRC7) {
+  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: transparent;
+  display: inline-flex;
+  font-family: var(--mrl-body-font);
+  pointer-events: none;
+  visibility: inherit;
+}
+.mrl-u-preHydrateSkeleton--BIRn4 mrl-button[kind=inverse]:not(.hydrated--XvRC7),
+.mrl-u-preHydrateSkeleton--BIRn4 mrl-button[kind=ghost-inverse]:not(.hydrated--XvRC7),
+.mrl-u-preHydrateSkeleton--BIRn4 mrl-icon-button[kind=inverse]:not(.hydrated--XvRC7),
+.mrl-u-preHydrateSkeleton--BIRn4 mrl-icon-button[kind=ghost-inverse]:not(.hydrated--XvRC7),
+.mrl-u-preHydrateSkeleton--BIRn4 mrl-shadow-button[kind=inverse]:not(.hydrated--XvRC7),
+.mrl-u-preHydrateSkeleton--BIRn4 mrl-shadow-button[kind=ghost-inverse]:not(.hydrated--XvRC7) {
+  --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--g3VN9,
+.mrlButton--RnOYy {
+  --mrl-button-background-color: var(--mrl-color-background);
+  --mrl-button-background-color-active: rgba(var(--mrl-gray-20), 1);
+  --mrl-button-background-color-disabled: var(--mrl-color-background);
+  --mrl-button-background-color-hover: rgba(var(--mrl-gray-10), 1);
+  --mrl-button-border-color: rgba(var(--mrl-gray-30), 1);
+  --mrl-button-border-color-active: rgba(var(--mrl-gray-50), 1);
+  --mrl-button-border-color-disabled: rgba(var(--mrl-gray-20), 1);
+  --mrl-button-border-color-hover: rgba(var(--mrl-gray-40), 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--umy6n,
+.mrlButton--small--Oc9fm {
+  min-height: var(--mrl-spacing-08);
+  --mrl-button-icon-size: var(--mrl-spacing-06);
+  --mrl-button-inset-horizontal: var(--mrl-spacing-04);
+}
+.mrlIconButton--g3VN9.mrlIconButton--xsmall--CqDs6,
+.mrlButton--RnOYy.mrlIconButton--xsmall--CqDs6 {
+  --mrl-button-icon-size: var(--mrl-spacing-06);
+}
+.mrlIconButton--g3VN9.mrlButton--xsmall--fS-Lm,
+.mrlButton--RnOYy.mrlButton--xsmall--fS-Lm {
+  --mrl-button-icon-size: var(--mrl-spacing-05);
+}
+.mrlIconButton--g3VN9.mrlIconButton--small--umy6n,
+.mrlButton--RnOYy.mrlIconButton--small--umy6n {
+  min-height: var(--mrl-spacing-08);
+  min-width: var(--mrl-spacing-08);
+}
+.mrlIconButton--g3VN9.mrlIconButton--small--umy6n + .mrl-tooltip-content--b1eFU,
+.mrlButton--RnOYy.mrlIconButton--small--umy6n + .mrl-tooltip-content--b1eFU {
+  --mrl-tooltip-arrow-spacing: calc(
+  	(var(--mrl-spacing-08) - var(--mrl-tooltip-arrow-size)) / 2
+  );
+}
+.mrlIconButton--large--GXUAJ,
+.mrlButton--large--42zQF {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+  --mrl-button-inset-horizontal: var(--mrl-spacing-05);
+}
+.mrlIconButton--g3VN9.mrlIconButton--large--GXUAJ,
+.mrlButton--RnOYy.mrlIconButton--large--GXUAJ {
+  min-height: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+  min-width: calc(var(--mrl-spacing-09) + var(--mrl-spacing-02));
+}
+.mrlIconButton--g3VN9.mrlButton--primary--Uow3U, .mrlIconButton--g3VN9.mrlButton--ghost--h3Sm6, .mrlIconButton--g3VN9.mrlButton--ghost-inverse--GpfpU, .mrlIconButton--g3VN9.mrlIconButton--primary--zJ85-, .mrlIconButton--g3VN9.mrlIconButton--ghost--NN5Cc, .mrlIconButton--g3VN9.mrlIconButton--ghost-inverse--cKZUk,
+.mrlButton--RnOYy.mrlButton--primary--Uow3U,
+.mrlButton--RnOYy.mrlButton--ghost--h3Sm6,
+.mrlButton--RnOYy.mrlButton--ghost-inverse--GpfpU,
+.mrlButton--RnOYy.mrlIconButton--primary--zJ85-,
+.mrlButton--RnOYy.mrlIconButton--ghost--NN5Cc,
+.mrlButton--RnOYy.mrlIconButton--ghost-inverse--cKZUk {
+  --mrl-button-border-color: transparent;
+  --mrl-button-border-color-active: transparent;
+  --mrl-button-border-color-hover: transparent;
+  --mrl-button-border-color-disabled: transparent;
+}
+.mrlIconButton--secondary-native--8BWN2,
+.mrlButton--secondary-native--PMH42 {
+  --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--zJ85-,
+.mrlButton--primary--Uow3U {
+  --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--primary-native--pIPFk,
+.mrlButton--primary-native--r-YgV {
+  --mrl-button-background-color: transparent;
+  --mrl-button-background-color-active: var(--mrl-black-opacity-01);
+  --mrl-button-background-color-disabled: transparent;
+  --mrl-button-background-color-hover: var(--mrl-black-opacity-00);
+  --mrl-button-border-color: transparent;
+  --mrl-button-border-color-active: transparent;
+  --mrl-button-border-color-hover: transparent;
+  --mrl-button-border-color-disabled: transparent;
+  --mrl-button-text-color: rgba(var(--mrl-blue-70), 1);
+  --mrl-button-text-color-active: rgba(var(--mrl-blue-70), 1);
+  --mrl-button-text-color-disabled: var(--mrl-black-opacity-03);
+  --mrl-button-text-color-hover: rgba(var(--mrl-blue-70), 1);
+}
+.mrlIconButton--ghost--NN5Cc,
+.mrlButton--ghost--h3Sm6 {
+  --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--NN5Cc[aria-pressed=true], .mrlIconButton--ghost--NN5Cc[aria-checked=true], .mrlIconButton--ghost--NN5Cc[aria-expanded=true], .mrlIconButton--ghost--NN5Cc[aria-selected=true],
+.mrlButton--ghost--h3Sm6[aria-pressed=true],
+.mrlButton--ghost--h3Sm6[aria-checked=true],
+.mrlButton--ghost--h3Sm6[aria-expanded=true],
+.mrlButton--ghost--h3Sm6[aria-selected=true] {
+  --mrl-button-background-color: var(--mrl-color-background-inverse);
+  --mrl-button-text-color: var(--mrl-color-text-inverse);
+}
+.mrlIconButton--ghost-inverse--cKZUk,
+.mrlButton--ghost-inverse--GpfpU {
+  --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--cKZUk.mrlButton--skeleton--5ov8q,
+.mrlButton--ghost-inverse--GpfpU.mrlButton--skeleton--5ov8q {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+}
+.mrlIconButton--ghost-inverse--cKZUk.toggleStyle--default--QNEQy[aria-pressed=true], .mrlIconButton--ghost-inverse--cKZUk.toggleStyle--default--QNEQy[aria-checked=true], .mrlIconButton--ghost-inverse--cKZUk.toggleStyle--default--QNEQy[aria-expanded=true], .mrlIconButton--ghost-inverse--cKZUk.toggleStyle--default--QNEQy[aria-selected=true],
+.mrlButton--ghost-inverse--GpfpU.toggleStyle--default--QNEQy[aria-pressed=true],
+.mrlButton--ghost-inverse--GpfpU.toggleStyle--default--QNEQy[aria-checked=true],
+.mrlButton--ghost-inverse--GpfpU.toggleStyle--default--QNEQy[aria-expanded=true],
+.mrlButton--ghost-inverse--GpfpU.toggleStyle--default--QNEQy[aria-selected=true] {
+  --mrl-button-background-color: var(--mrl-color-background);
+  --mrl-button-text-color: var(--mrl-color-text);
+}
+.mrlIconButton--ghost-inverse--cKZUk.toggleStyle--secondary--qhWfE[aria-pressed=true], .mrlIconButton--ghost-inverse--cKZUk.toggleStyle--secondary--qhWfE[aria-checked=true], .mrlIconButton--ghost-inverse--cKZUk.toggleStyle--secondary--qhWfE[aria-expanded=true], .mrlIconButton--ghost-inverse--cKZUk.toggleStyle--secondary--qhWfE[aria-selected=true],
+.mrlButton--ghost-inverse--GpfpU.toggleStyle--secondary--qhWfE[aria-pressed=true],
+.mrlButton--ghost-inverse--GpfpU.toggleStyle--secondary--qhWfE[aria-checked=true],
+.mrlButton--ghost-inverse--GpfpU.toggleStyle--secondary--qhWfE[aria-expanded=true],
+.mrlButton--ghost-inverse--GpfpU.toggleStyle--secondary--qhWfE[aria-selected=true] {
+  --mrl-button-background-color: var(--mrl-color-accent);
+  --mrl-button-text-color: var(--mrl-color-text-inverse);
+}
+.mrlIconButton--ghost-inverse--cKZUk[aria-disabled=true][aria-pressed=true], .mrlIconButton--ghost-inverse--cKZUk[aria-disabled=true][aria-checked=true], .mrlIconButton--ghost-inverse--cKZUk[aria-disabled=true][aria-expanded=true], .mrlIconButton--ghost-inverse--cKZUk[aria-disabled=true][aria-selected=true],
+.mrlButton--ghost-inverse--GpfpU[aria-disabled=true][aria-pressed=true],
+.mrlButton--ghost-inverse--GpfpU[aria-disabled=true][aria-checked=true],
+.mrlButton--ghost-inverse--GpfpU[aria-disabled=true][aria-expanded=true],
+.mrlButton--ghost-inverse--GpfpU[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--oLFG9,
+.mrlButton--inverse--oCgEH {
+  --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: transparent;
+  --mrl-button-border-color-active: transparent;
+  --mrl-button-border-color-hover: transparent;
+  --mrl-button-border-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);
+}
+.mrlIconButton--inverse--oLFG9.mrlButton--skeleton--5ov8q,
+.mrlButton--inverse--oCgEH.mrlButton--skeleton--5ov8q {
+  --mrl-button-background-color-skeleton: var(--mrl-color-skeleton-inverse);
+}
+.mrlIconButton--g3VN9[aria-disabled=true][aria-pressed=true], .mrlIconButton--g3VN9[aria-disabled=true][aria-checked=true], .mrlIconButton--g3VN9[aria-disabled=true][aria-expanded=true], .mrlIconButton--g3VN9[aria-disabled=true][aria-selected=true],
+.mrlButton--RnOYy[aria-disabled=true][aria-pressed=true],
+.mrlButton--RnOYy[aria-disabled=true][aria-checked=true],
+.mrlButton--RnOYy[aria-disabled=true][aria-expanded=true],
+.mrlButton--RnOYy[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);
+}
+
+.mrl-modal--7dmxe {
+  --mrl-modal-header-text-color: rgba(var(--mrl-gray-100), 1);
+  --mrl-modal-padding-vertical: var(--mrl-spacing-07);
+  --mrl-modal-padding-vertical-bottom: var(--mrl-spacing-06);
+  --mrl-modal-padding-vertical-top: var(--mrl-spacing-07);
+  --mrl-modal-padding-vertical-footer: var(--mrl-spacing-07);
+  --mrl-modal-padding-vertical-content: var(--mrl-spacing-02);
+  --mrl-modal-padding-horizontal: var(--mrl-spacing-07);
+  --mrl-modal-close-inline-margin: var(--mrl-space-inline-related);
+  --mrl-modal-close-offset: var(--mrl-spacing-06);
+}
+
+@media screen and (min-width: 37.5rem) {
+  .mrl-modal--7dmxe,
+  .mrl-modal--7dmxe .footer--DkKVV.slotted--kHz4C .mrl-modal-footer--x-NcO,
+  .mrl-modal--7dmxe .header----Xl-.slotted--kHz4C .mrl-modal-header--CYjrs {
+    --mrl-modal-padding-horizontal: var(--mrl-spacing-08);
+  }
+  .mrl-modal--large--vx8IO,
+  .mrl-modal--large--vx8IO .footer--DkKVV.slotted--kHz4C .mrl-modal-footer--x-NcO,
+  .mrl-modal--large--vx8IO .header----Xl-.slotted--kHz4C .mrl-modal-header--CYjrs {
+    --mrl-modal-padding-horizontal: var(--mrl-spacing-09);
+  }
+}
+.mrl-native-modal--R8UjV,
+.mrl-display-modal--cPYLk {
+  --mrl-modal-padding-horizontal: var(--mrl-spacing-05);
+}
+
+.mrl-modal-header--CYjrs {
+  color: var(--mrl-modal-header-text-color);
+  display: flex;
+  min-height: calc(var(--mrl-type-size-headline-large) * var(--mrl-type-line-height-headline-large));
+  padding: var(--mrl-modal-padding-vertical-top) calc(
+			var(--mrl-spacing-09) + var(--mrl-modal-close-offset) + var(--mrl-modal-close-inline-margin)
+		) var(--mrl-modal-padding-vertical-bottom) var(--mrl-modal-padding-horizontal);
+  transition: box-shadow var(--mrl-duration-04) var(--mrl-timing-m2);
+}
+
+.mrl-modal-scroll-shadow-top--r37bG {
+  box-shadow: var(--mrl-shadow-01);
+  border-top-left-radius: var(--mrl-modal-border-radius);
+  border-top-right-radius: var(--mrl-modal-border-radius);
+}

package/dist/esm/components/modal/MrlModalHeader/MrlModalHeader.module.scss.js

@@ -0,0 +1,39 @@
+import "./MrlModalHeader.module.css";
+export default {
+	"mrl-u-preHydrateSkeleton": "mrl-u-preHydrateSkeleton--BIRn4",
+	"hydrated": "hydrated--XvRC7",
+	"mrlIconButton": "mrlIconButton--g3VN9",
+	"mrlButton": "mrlButton--RnOYy",
+	"mrlIconButton--small": "mrlIconButton--small--umy6n",
+	"mrlButton--small": "mrlButton--small--Oc9fm",
+	"mrlIconButton--xsmall": "mrlIconButton--xsmall--CqDs6",
+	"mrlButton--xsmall": "mrlButton--xsmall--fS-Lm",
+	"mrl-tooltip-content": "mrl-tooltip-content--b1eFU",
+	"mrlIconButton--large": "mrlIconButton--large--GXUAJ",
+	"mrlButton--large": "mrlButton--large--42zQF",
+	"mrlButton--primary": "mrlButton--primary--Uow3U",
+	"mrlButton--ghost": "mrlButton--ghost--h3Sm6",
+	"mrlButton--ghost-inverse": "mrlButton--ghost-inverse--GpfpU",
+	"mrlIconButton--primary": "mrlIconButton--primary--zJ85-",
+	"mrlIconButton--ghost": "mrlIconButton--ghost--NN5Cc",
+	"mrlIconButton--ghost-inverse": "mrlIconButton--ghost-inverse--cKZUk",
+	"mrlIconButton--secondary-native": "mrlIconButton--secondary-native--8BWN2",
+	"mrlButton--secondary-native": "mrlButton--secondary-native--PMH42",
+	"mrlIconButton--primary-native": "mrlIconButton--primary-native--pIPFk",
+	"mrlButton--primary-native": "mrlButton--primary-native--r-YgV",
+	"mrlButton--skeleton": "mrlButton--skeleton--5ov8q",
+	"toggleStyle--default": "toggleStyle--default--QNEQy",
+	"toggleStyle--secondary": "toggleStyle--secondary--qhWfE",
+	"mrlIconButton--inverse": "mrlIconButton--inverse--oLFG9",
+	"mrlButton--inverse": "mrlButton--inverse--oCgEH",
+	"mrl-modal": "mrl-modal--7dmxe",
+	"footer": "footer--DkKVV",
+	"slotted": "slotted--kHz4C",
+	"mrl-modal-footer": "mrl-modal-footer--x-NcO",
+	"header": "header----Xl-",
+	"mrl-modal-header": "mrl-modal-header--CYjrs",
+	"mrl-modal--large": "mrl-modal--large--vx8IO",
+	"mrl-native-modal": "mrl-native-modal--R8UjV",
+	"mrl-display-modal": "mrl-display-modal--cPYLk",
+	"mrl-modal-scroll-shadow-top": "mrl-modal-scroll-shadow-top--r37bG"
+};

package/dist/esm/components/modal/MrlModalHeader/index.js

@@ -0,0 +1 @@
+export { MrlModalHeader } from './MrlModalHeader';

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

@@ -0,0 +1,18 @@
+/*
+ * Modal component
+ * ------------------------------------------------------------------
+ */
+export const allowedValues = {
+    sizes: ['small', 'medium', 'large'],
+    states: ['open', 'close']
+};
+/**
+ * Default values for props on the Modal component;
+ * Shared between the component and Storybook
+ */
+export const defaults = {
+    attrs: {},
+    size: 'medium',
+    state: 'close'
+};
+export const TransitionDuration = 300;

package/dist/esm/components/modal/demo/ModalWithTriggerDemo.js

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { MrlButton, MrlLabel, MrlModal, MrlModalContent, MrlModalFooter, MrlModalHeader, MrlSelect, MrlText, MrlTextInput } from '../../';
+import '../MrlModal/stories.css';
+const roleOptions = [
+    { label: 'Viewer', value: 'viewer' },
+    { label: 'Editor', value: 'editor' },
+    { label: 'Facilitator', value: 'facilitator' },
+    { label: 'Admin', value: 'admin' }
+];
+/**
+ * Demo for a modal with a trigger button
+ *
+ * @param {object} props - The props object
+ * @param {Function} props.hookClose - hookClose for modal
+ * @returns {Element} Rendered demo
+ */
+export const ModalWithTriggerDemo = ({ closable = true, hookClose = undefined }) => {
+    const [state, setState] = React.useState('close');
+    const isMounted = React.useRef(true);
+    React.useEffect(() => {
+        // set isMounted to true when component mounts
+        isMounted.current = true;
+        return () => {
+            // set isMounted to false when component unmounts
+            isMounted.current = false;
+        };
+    }, []);
+    const handleClose = () => {
+        if (isMounted.current)
+            setState('close');
+        hookClose && hookClose();
+    };
+    const handleClick = (e) => {
+        e.preventDefault();
+        if (state === 'close')
+            setState('open');
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MrlButton, { text: "Modal Trigger Button", onClick: handleClick, kind: "primary" }),
+        state === 'open' && (React.createElement(MrlModal, { attrs: { className: 'test' }, state: state, hookClose: handleClose, size: "large", closable: closable },
+            React.createElement(React.Fragment, null,
+                React.createElement(MrlModalHeader, { text: "Invite collaborator" }),
+                React.createElement(MrlModalContent, null,
+                    React.createElement("div", { className: "modal-trigger-demo-form" },
+                        React.createElement(MrlText, { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat, nibh at sollicitudin bibendum, augue urna varius massa, vitae facilisis ligula metus vel lectus. Suspendisse potenti. Donec vel eros id lacus finibus tincidunt." }),
+                        React.createElement(MrlText, { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat, nibh at sollicitudin bibendum, augue urna varius massa, vitae facilisis ligula metus vel lectus. Suspendisse potenti. Donec vel eros id lacus finibus tincidunt." }),
+                        React.createElement(MrlText, { text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer feugiat, nibh at sollicitudin bibendum, augue urna varius massa, vitae facilisis ligula metus vel lectus. Suspendisse potenti. Donec vel eros id lacus finibus tincidunt." }),
+                        React.createElement("div", { className: "modal-trigger-demo-form__field" },
+                            React.createElement(MrlLabel, { htmlFor: "invite-full-name", text: "Full name" }),
+                            React.createElement(MrlTextInput, { inputId: "invite-full-name", placeholder: "Ada Lovelace", autoComplete: "name", "data-qa": "modal-invite-full-name" })),
+                        React.createElement("div", { className: "modal-trigger-demo-form__field" },
+                            React.createElement(MrlLabel, { htmlFor: "invite-email", text: "Work email" }),
+                            React.createElement(MrlTextInput, { inputId: "invite-email", placeholder: "name@company.com", type: "email", autoComplete: "email", "data-qa": "modal-invite-email" })),
+                        React.createElement("div", { className: "modal-trigger-demo-form__field" },
+                            React.createElement(MrlLabel, { htmlFor: "invite-team", text: "Team or workspace (optional)" }),
+                            React.createElement(MrlTextInput, { inputId: "invite-team", placeholder: "e.g. Product design", "data-qa": "modal-invite-team" })),
+                        React.createElement("div", { className: "modal-trigger-demo-form__field" },
+                            React.createElement(MrlLabel, { htmlFor: "invite-role", text: "Default role", state: "default" }),
+                            React.createElement(MrlSelect, { inputId: "invite-role", placeholder: "Choose a role", options: roleOptions, defaultValue: roleOptions[1], "data-qa": "modal-invite-role-select" })),
+                        React.createElement("div", { className: "modal-trigger-demo-form__field" },
+                            React.createElement(MrlLabel, { htmlFor: "other", text: "Other" }),
+                            React.createElement(MrlTextInput, { inputId: "other", placeholder: "Other details", "data-qa": "modal-other" })),
+                        React.createElement("div", { className: "modal-trigger-demo-form__field" },
+                            React.createElement(MrlLabel, { htmlFor: "more-details", text: "Another field" }),
+                            React.createElement(MrlTextInput, { inputId: "more-field", placeholder: "One last field", "data-qa": "modal-field" })))),
+                React.createElement(MrlModalFooter, null,
+                    React.createElement(MrlButton, Object.assign({}, { attrs: { class: 'modal-tertiary', id: 'tertiary-button' } }, { text: "tertiary", onClick: () => console.log('click tertiary'), state: "default", kind: "ghost" })),
+                    React.createElement(MrlButton, Object.assign({}, { attrs: { id: 'secondary-button' } }, { text: "secondary", onClick: () => console.log, state: "default" })),
+                    React.createElement(MrlButton, Object.assign({}, { attrs: { id: 'primary-button' } }, { text: "primary", onClick: () => console.log, state: "default", kind: "primary" }))))))));
+};

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

@@ -0,0 +1,5 @@
+export * from './MrlModal';
+export * from './MrlModalContent';
+export * from './MrlModalFooter';
+export * from './MrlModalHeader';
+export * from './constants';

package/dist/esm/components/navigation-sidebar/MrlSidebarNavGroup/MrlSidebarNavGroup.js

@@ -0,0 +1,36 @@
+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 { MrlTextHeading } from '../../';
+import { getUniqueId } from '../../../utils';
+import styles from './MrlSidebarNavGroup.module.scss.js';
+/**
+ * Sidebar group component
+ *
+ * @param {MrlSidebarNavGroupProps} props - the component props
+ * @returns a sidebar nav group
+ */
+export function MrlSidebarNavGroup(_a) {
+    var { className, children, level = '3', headingText, style, hiddenHeading } = _a, rest = __rest(_a, ["className", "children", "level", "headingText", "style", "hiddenHeading"]);
+    const allClasses = classnames(styles['MrlSidebarNavGroup'], className);
+    const headingIdRef = React.useRef(getUniqueId('mrl-sidebar-nav-group-heading'));
+    const navLabelProps = hiddenHeading
+        ? { 'aria-label': headingText }
+        : { 'aria-labelledby': headingIdRef.current };
+    return (React.createElement("nav", Object.assign({ className: allClasses, style: style }, navLabelProps, rest),
+        headingText && !hiddenHeading && (React.createElement(MrlTextHeading, { attrs: {
+                className: styles['MrlSidebarNavGroup-heading'],
+                id: headingIdRef.current
+            }, level: level, text: headingText, size: "xsmall", hierarchy: "secondary", kind: "title" })),
+        React.createElement("ul", null, children)));
+}

package/dist/esm/components/navigation-sidebar/MrlSidebarNavGroup/MrlSidebarNavGroup.module.css

@@ -0,0 +1,8 @@
+.MrlSidebarNavGroup--JG0dz {
+  margin-bottom: var(--mrl-spacing-07);
+}
+
+.MrlSidebarNavGroup-heading--V-MO6 {
+  color: var(--mrl-color-text-secondary);
+  margin-bottom: var(--mrl-spacing-03);
+}

package/dist/esm/components/navigation-sidebar/MrlSidebarNavGroup/MrlSidebarNavGroup.module.scss.js

@@ -0,0 +1,5 @@
+import "./MrlSidebarNavGroup.module.css";
+export default {
+	"MrlSidebarNavGroup": "MrlSidebarNavGroup--JG0dz",
+	"MrlSidebarNavGroup-heading": "MrlSidebarNavGroup-heading--V-MO6"
+};

package/dist/esm/components/navigation-sidebar/MrlSidebarNavGroup/index.js

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

package/dist/esm/components/navigation-sidebar/MrlSidebarNavItem/MrlSidebarNavItem.js

@@ -0,0 +1,33 @@
+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 { MrlSvg } from '../../';
+import styles from './MrlSidebarNavItem.module.scss.js';
+/**
+ * Sidebar nav item component
+ * @param {MrlSidebarNavItemProps} props - the component props
+ * @returns a sidebar nav item
+ */
+export function MrlSidebarNavItem(_a) {
+    var { className, ['data-qa']: qa, icon, isSelected, text, renderLink } = _a, rest = __rest(_a, ["className", 'data-qa', "icon", "isSelected", "text", "renderLink"]);
+    const allClasses = classnames('MrlSidebarNavItem', styles['MrlSidebarNavItem'], {
+        [styles['MrlSidebarNavItem-selected']]: isSelected,
+        'MrlSidebarNavItem-selected': isSelected,
+        [styles['hasIcon']]: typeof icon !== 'undefined'
+    }, className);
+    return (React.createElement("li", Object.assign({}, rest, { "data-qa": qa, className: allClasses }), renderLink({
+        linkContent: (React.createElement(React.Fragment, null,
+            icon && (React.createElement(MrlSvg, { "aria-hidden": "true", svg: icon, className: styles['MrlSidebarNavItem-icon'], size: "auto" })),
+            text))
+    })));
+}

package/dist/esm/components/navigation-sidebar/MrlSidebarNavItem/MrlSidebarNavItem.module.css

@@ -0,0 +1,132 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--Ta1qj {
+  position: relative;
+}
+
+.MrlSidebarNavItem--c5els {
+  height: var(--mrl-spacing-08);
+  margin-bottom: var(--mrl-spacing-01);
+}
+.MrlSidebarNavItem--c5els > a {
+  align-items: center;
+  border-radius: var(--mrl-border-radius-content-large);
+  color: var(--mrl-color-text-heading);
+  display: inline-flex;
+  height: 100%;
+  outline: none;
+  padding: var(--mrl-spacing-03) var(--mrl-spacing-04);
+  position: relative;
+  text-decoration: none;
+  width: 100%;
+  font-family: var(--mrl-body-font);
+  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);
+}
+.MrlSidebarNavItem--c5els > a: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--dZKon;
+}
+@keyframes border-animation--dZKon {
+  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--aZk9W {
+  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);
+  }
+}
+.MrlSidebarNavItem--c5els > a:hover {
+  background-color: rgba(var(--mrl-gray-20), 1);
+}
+.MrlSidebarNavItem--c5els > a:active {
+  background-color: rgba(var(--mrl-gray-30), 1);
+}
+.MrlSidebarNavItem--c5els.hasIcon--Id011 > a {
+  padding: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02)) calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));
+}
+.MrlSidebarNavItem--c5els.MrlSidebarNavItem-selected--vVSo- a, .MrlSidebarNavItem--c5els.MrlSidebarNavItem-selected--vVSo- a:hover {
+  background-color: var(--mrl-color-background-highlight-active);
+  color: var(--mrl-color-text-inverse-active);
+}
+
+.MrlSidebarNavItem-icon--YvDsP {
+  height: var(--mrl-spacing-06);
+  margin-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));
+  width: var(--mrl-spacing-06);
+}

package/dist/esm/components/navigation-sidebar/MrlSidebarNavItem/MrlSidebarNavItem.module.scss.js

@@ -0,0 +1,10 @@
+import "./MrlSidebarNavItem.module.css";
+export default {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--Ta1qj",
+	"MrlSidebarNavItem": "MrlSidebarNavItem--c5els",
+	"border-animation": "border-animation--dZKon",
+	"hasIcon": "hasIcon--Id011",
+	"MrlSidebarNavItem-selected": "MrlSidebarNavItem-selected--vVSo-",
+	"MrlSidebarNavItem-icon": "MrlSidebarNavItem-icon--YvDsP",
+	"border-animation-inverse": "border-animation-inverse--aZk9W"
+};