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

package/dist/esm/components/button/MrlProcessingButton/MrlProcessingButton.js

@@ -1,92 +0,0 @@
-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 { MrlButton } from '../MrlButton';
-import { MrlSvg } from '../../svg';
-import { placeholder } from '@muraldevkit/ds-icons';
-import { MrlLiveRegion } from '../../live-region';
-import styles from './MrlProcessingButton.module.scss.js';
-export const DEFAULT_RESET_TIME = 4000;
-export const DEFAULT_FEEDBACK_TIME = 500;
-/**
- * A specialized button component that provides visual feedback during processing operations.
- *
- * The MrlProcessingButton extends the standard MrlButton with additional processing state
- * management and user feedback capabilities. It automatically handles the transition between
- * normal, loading, and completion states to provide clear visual feedback to users.
- *
- * @param props - The component props extending MrlButtonProps with additional processing capabilities
- * @returns a MrlProcessingButton React component
- */
-export function MrlProcessingButton(props) {
-    var _a, _b, _c, _d, _e;
-    const { ['data-qa']: dataQa, processingButtonConfig, resetTime = DEFAULT_RESET_TIME, className } = props, buttonProps = __rest(props, ['data-qa', "processingButtonConfig", "resetTime", "className"]);
-    const [currentState, setCurrentState] = React.useState('normal');
-    const timeoutRef = React.useRef(null);
-    const handleClick = () => {
-        if (currentState === 'processing')
-            return;
-        setCurrentState('processing');
-    };
-    const feedbackTime = (_a = processingButtonConfig.processing.feedbackTime) !== null && _a !== void 0 ? _a : DEFAULT_FEEDBACK_TIME;
-    const executeAction = React.useCallback(() => {
-        processingButtonConfig.processing
-            .action()
-            .then(() => {
-            if (processingButtonConfig.success) {
-                setCurrentState('success');
-            }
-            else {
-                setCurrentState('normal');
-            }
-        })
-            .catch(() => {
-            if (processingButtonConfig.error) {
-                setCurrentState('error');
-            }
-            else {
-                setCurrentState('normal');
-            }
-        });
-    }, [
-        processingButtonConfig.error,
-        processingButtonConfig.processing,
-        processingButtonConfig.success
-    ]);
-    React.useEffect(() => {
-        switch (currentState) {
-            case 'processing':
-                timeoutRef.current = setTimeout(executeAction, feedbackTime);
-                break;
-            case 'success':
-            case 'error':
-                timeoutRef.current = setTimeout(() => {
-                    setCurrentState('normal');
-                }, resetTime);
-                break;
-            default:
-                break;
-        }
-        return () => {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-        };
-    }, [currentState, processingButtonConfig, resetTime, executeAction, feedbackTime]);
-    const button = currentState === 'processing' ? (React.createElement(MrlButton, Object.assign({ "data-qa": dataQa }, buttonProps, { className: classnames(styles['MrlProcessingButton'], styles['MrlProcessingButton-is-processing'], className), "aria-busy": true, "aria-disabled": false, 
-        // We need to use a placeholder icon to display text and the MrlSpinner
-        icon: React.createElement(MrlSvg, { svg: placeholder }), loading: true, loadingText: " ", state: "disabled", text: processingButtonConfig.processing.text || processingButtonConfig.normal.text }))) : (React.createElement(MrlButton, Object.assign({ "data-qa": dataQa, className: className }, buttonProps, { icon: ((_b = processingButtonConfig[currentState]) === null || _b === void 0 ? void 0 : _b.icon) && (React.createElement(MrlSvg, { svg: (_c = processingButtonConfig[currentState]) === null || _c === void 0 ? void 0 : _c.icon })), onClick: handleClick, state: "default", text: ((_d = processingButtonConfig[currentState]) === null || _d === void 0 ? void 0 : _d.text) || '' })));
-    return (React.createElement(React.Fragment, null,
-        button,
-        React.createElement(MrlLiveRegion, { ariaLive: "assertive", srContent: ((_e = processingButtonConfig[currentState]) === null || _e === void 0 ? void 0 : _e.text) || '' })));
-}

package/dist/esm/components/button/MrlProcessingButton/MrlProcessingButton.module.css

@@ -1,6 +0,0 @@
-.MrlProcessingButton--ClCVf[aria-disabled=false].MrlProcessingButton-is-processing--CNqDf[aria-disabled=false] {
-  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;
-}

package/dist/esm/components/button/MrlProcessingButton/MrlProcessingButton.module.scss.js

@@ -1,5 +0,0 @@
-import "./MrlProcessingButton.module.css";
-export default {
-	"MrlProcessingButton": "MrlProcessingButton--ClCVf",
-	"MrlProcessingButton-is-processing": "MrlProcessingButton-is-processing--CNqDf"
-};

package/dist/esm/components/button/MrlProcessingButton/actions.js

@@ -1,35 +0,0 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-/**
- * Copies text to the clipboard using the browser's clipboard API
- * @param text - The text to copy to clipboard
- * @param processing_time - The time to wait before copying the text to the clipboard
- * @returns Promise that resolves when text is copied
- */
-export function copyToClipboard(text, processing_time) {
-    return __awaiter(this, void 0, void 0, function* () {
-        return new Promise((resolve, reject) => {
-            if (processing_time) {
-                setTimeout(() => {
-                    navigator.clipboard.writeText(text).then(resolve).catch(reject);
-                }, processing_time);
-            }
-            else {
-                navigator.clipboard.writeText(text).then(resolve).catch(reject);
-            }
-        });
-    });
-}
-/**
- * Actions for the MrlProcessingButton
- */
-export const MRL_PROCESSING_BUTTON_ACTIONS = {
-    copyToClipboard
-};

package/dist/esm/components/button/MrlProcessingButton/index.js

@@ -1,2 +0,0 @@
-export * from './MrlProcessingButton';
-export * from './actions';

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

@@ -1,37 +0,0 @@
-/*
- * Button component constants
- * ------------------------------------------------------------------
- */
-export const allowedButtonValues = {
-    iconPositions: ['before', 'after'],
-    kinds: [
-        'secondary',
-        'primary',
-        'ghost',
-        'inverse',
-        'ghost-inverse',
-        'primary-native',
-        'secondary-native'
-    ],
-    sizes: ['xsmall', 'small', 'medium', 'large'],
-    states: ['default', 'disabled', 'selected', 'selected-disabled', 'skeleton'],
-    toggleAriaTypes: ['expanded', 'pressed', 'selected', 'checked'],
-    toggleStyles: ['default', 'secondary'],
-    types: ['button', 'reset', 'submit']
-};
-/**
- * Default values for props on the Button component;
- * Shared between the component and Storybook
- */
-export const buttonDefaults = {
-    attrs: {
-        type: 'button'
-    },
-    disabled: false,
-    iconPos: 'before',
-    kind: 'secondary',
-    size: 'medium',
-    state: 'default',
-    text: 'Button',
-    toggleAria: 'expanded'
-};

package/dist/esm/components/button/helpers.js

@@ -1,63 +0,0 @@
-import { allowedButtonValues } from './constants';
-/**
- * Determines what loader should be displayed in which types of buttons.
- *
- * @private
- * @param {MrlButtonKind} [buttonKind] - the kind of the current button.
- * @param {MrlGhostIconButtonSize} [buttonSize] - the size of the current button.
- * @returns {SpinnerComponent} - an MrlSpinner element themed to the button.
- */
-export const _spinnerProps = (buttonKind, buttonSize) => {
-    /** Set the Spinner kind */
-    const spinnerStyle = buttonKind === 'primary' || buttonKind === 'ghost-inverse' ? 'inverse' : 'default';
-    /** Set the Spinner size */
-    const spinnerSize = buttonSize === 'large' || buttonSize === 'medium'
-        ? 'medium'
-        : buttonSize === 'xsmall'
-            ? 'xsmall'
-            : 'small';
-    return {
-        kind: spinnerStyle,
-        size: spinnerSize
-    };
-};
-/**
- * Determines if the button is disabled since multiple states represent disabled
- *
- * @private
- * @param {MrlButtonState} [currentState] - the value of this.state from the component.
- * @param {boolean} [isLoading] - if the button is loading
- * @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 const _isDisabled = (currentState, isLoading, enforcedState) => {
-    const value = enforcedState || currentState;
-    // We treat Skeleton as disabled so users can't interact with it
-    // Note: this may need to be re-evaluated a bit when we allow screen reader and
-    // keyboard users access to disabled buttons as we would still not want them to
-    // access hydrated skeletons.
-    return isLoading || value === 'disabled' || value === 'selected-disabled' || value === 'skeleton'
-        ? true
-        : false;
-};
-/**
- * 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 const _isSelected = (currentState, enforcedState) => {
-    const value = enforcedState || currentState;
-    return value === 'selected' || value === 'selected-disabled' ? true : false;
-};
-/**
- * MrlIconButton and MrlAnimatedIconButton could behave as a toggle button if toggleStyle is 'default' or 'secondary'
- *
- * @param {ToggleStyle} toggleStyle type of toggle
- * @returns {boolean} returns boolean if it's togglable
- */
-export const _isToggleButton = (toggleStyle) => toggleStyle && allowedButtonValues.toggleStyles.includes(toggleStyle);

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

@@ -1,4 +0,0 @@
-export * from './MrlAnimatedIconButton';
-export * from './MrlButton';
-export * from './MrlIconButton';
-export * from './MrlProcessingButton';

package/dist/esm/components/callout/MrlCallout/MrlCallout.js

@@ -1,76 +0,0 @@
-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 { MrlPopover } from '../../popover';
-import { MrlText, MrlTextHeading } from '../../text';
-import styles from './MrlCallout.module.scss.js';
-import { MrlButton } from '../../button';
-import { getUniqueId } from '../../../utils';
-import { PORTAL_LAYERS } from '../../../utils/layers';
-import { useRef } from 'react';
-/**
- * MrlCallout component.
- *
- * @param props - The props.
- * @returns {React.ReactElement} The MrlCallout component.
- */
-export const MrlCallout = (props) => {
-    // In some cases when `show` is false, the content is also null or empty.
-    // At the same time callout shows fade-out animation and do not disappear immediately.
-    // Saving last visible content to show it while animating on close.
-    const savedContent = useRef();
-    if (props.show) {
-        savedContent.current = {
-            alignment: props.alignment,
-            description: props.description,
-            eyebrow: props.eyebrow,
-            image: props.image,
-            kind: props.kind,
-            title: props.title
-        };
-    }
-    const _a = props.show ? props : Object.assign(Object.assign({}, props), savedContent.current), { ariaControls, alignment = 'center', children, description, disableClickOutside = true, disableFocusTrap = true, eyebrow, hasCloseButton = true, image, kind = 'primary', onOpen, onClose, point = true, position = 'bottom', primaryCta, secondaryCta, show = true, spacing, title } = _a, rest = __rest(_a, ["ariaControls", "alignment", "children", "description", "disableClickOutside", "disableFocusTrap", "eyebrow", "hasCloseButton", "image", "kind", "onOpen", "onClose", "point", "position", "primaryCta", "secondaryCta", "show", "spacing", "title"]);
-    if (React.isValidElement(children) && children.type === React.Fragment) {
-        throw new Error('MrlCallout accepts a single child and does not accept a React.Fragment as a child.');
-    }
-    const calloutId = React.useMemo(() => getUniqueId('callout-append'), []);
-    const triggerRef = React.useRef(null);
-    const childElement = React.useMemo(() => {
-        return React.Children.map(children, (child) => {
-            return React.cloneElement(child, Object.assign(Object.assign(Object.assign({}, child.props), (child.type !== 'button' && { role: 'button' })), { 'aria-controls': ariaControls, 'aria-expanded': show, id: calloutId }));
-        });
-    }, [calloutId, children, show, ariaControls]);
-    // Setting trigger ref to the element with the calloutId (set above in the childElement useMemo)
-    //
-    // We are using querySelector to set the triggerRef instead of assigning a ref directly in childElement because
-    // a child element may already have a ref assigned to it and we don't want to override it.
-    React.useEffect(() => {
-        triggerRef.current = document.querySelector(`#${calloutId}`);
-    }, [calloutId]);
-    const popoverKind = kind === 'primary' ? 'inverse' : 'primary';
-    const primaryCtaKind = kind === 'primary' ? 'inverse' : 'secondary';
-    const secondaryCtaKind = kind === 'primary' ? 'ghost-inverse' : 'ghost';
-    return (React.createElement(React.Fragment, null,
-        childElement,
-        triggerRef && (React.createElement(MrlPopover, Object.assign({ actionState: { actionType: 'click', isOpen: show }, alignment: alignment, className: styles['MrlCallout'], disableClickToOpen: true, disableClickOutside: disableClickOutside, disableFocusTrap: disableFocusTrap, hasCloseButton: hasCloseButton, kind: popoverKind, onClose: onClose, onOpen: onOpen, point: point, portalProps: {
-                id: PORTAL_LAYERS.CALLOUT.name,
-                layer: PORTAL_LAYERS.CALLOUT
-            }, position: position, spacing: spacing, triggerRef: triggerRef }, rest),
-            React.createElement("div", { className: styles['MrlCallout--content'] },
-                eyebrow && (React.createElement(MrlText, { attrs: { className: styles['MrlCallout--eyebrow'] }, text: eyebrow })),
-                title && (React.createElement(MrlTextHeading, { className: styles['MrlCallout--title'], level: "2", text: title })),
-                description && (React.createElement("div", { className: styles['MrlCallout--description'] }, typeof description === 'string' ? React.createElement(MrlText, { text: description }) : description)),
-                image && React.createElement("div", { className: styles['MrlCallout--image'] }, image),
-                (primaryCta || secondaryCta) && (React.createElement("div", { className: styles['MrlCallout--footer'] },
-                    secondaryCta && (React.createElement(MrlButton, { "data-qa": secondaryCta.dataQa, kind: secondaryCtaKind, onClick: secondaryCta.onClick, text: secondaryCta.text, size: "small" })),
-                    primaryCta && (React.createElement(MrlButton, { "data-qa": primaryCta.dataQa, kind: primaryCtaKind, onClick: primaryCta.onClick, text: primaryCta.text, size: "small" })))))))));
-};

package/dist/esm/components/callout/MrlCallout/MrlCallout.module.css

@@ -1,158 +0,0 @@
-/* stylelint-disable scss/operator-no-newline-after */
-.mrl-u-focus-wrapper--2sA95 {
-  position: relative;
-}
-
-.MrlCallout--content--Et-FY {
-  max-width: 17.5rem;
-}
-.MrlCallout--title--v82T3 {
-  font-size: var(--mrl-font-size-03);
-  margin-bottom: var(--mrl-spacing-02);
-  padding-right: var(--mrl-spacing-06);
-}
-.MrlCallout--eyebrow--OVcTC {
-  font-size: var(--mrl-font-size-01);
-  font-weight: var(--mrl-font-weight-04);
-  margin-bottom: var(--mrl-spacing-02);
-  padding-right: var(--mrl-spacing-06);
-}
-.MrlCallout--description--fgfRy p {
-  font-size: var(--mrl-font-size-02);
-  padding-right: var(--mrl-spacing-06);
-}
-.MrlCallout--image--N-lhU {
-  margin-top: var(--mrl-spacing-05);
-}
-.MrlCallout--image--N-lhU img {
-  height: auto;
-  width: 100%;
-}
-.MrlCallout--footer--oEaG1 {
-  display: flex;
-  justify-content: flex-start;
-  margin-top: var(--mrl-spacing-05);
-}
-.MrlCallout--footer--oEaG1 .mrlButton {
-  margin-left: var(--mrl-spacing-03);
-}
-.MrlCallout--footer--oEaG1 .mrlButton:first-child {
-  margin-left: auto;
-}
-.MrlCallout--hjjNH .mrlButton:focus-visible {
-  position: relative;
-}
-.MrlCallout--hjjNH .mrlButton:focus-visible:focus-visible {
-  outline: none;
-}
-.MrlCallout--hjjNH .mrlButton:focus-visible:focus-visible::after {
-  animation-duration: var(--mrl-duration-03);
-  animation-fill-mode: forwards;
-  animation-iteration-count: 1;
-  animation-timing-function: var(--mrl-timing-m3);
-  border: 0 solid transparent;
-  border-radius: calc(
-		var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus)
-	);
-  bottom: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  content: "";
-  display: block;
-  left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  position: absolute;
-  right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px) * -1);
-  z-index: 1;
-  animation-name: border-animation-inverse--t-3GP;
-}
-@keyframes border-animation--4eksx {
-  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--t-3GP {
-  0% {
-    border-color: transparent;
-    border-width: 0;
-    bottom: var(--mrl-space-offset-focus);
-    left: var(--mrl-space-offset-focus);
-    right: var(--mrl-space-offset-focus);
-    top: var(--mrl-space-offset-focus);
-  }
-  50% {
-    border-color: var(--mrl-color-focus-inverse);
-    border-width: 0.25rem;
-    bottom: calc(var(--mrl-spacing-02) * -1);
-    left: calc(var(--mrl-spacing-02) * -1);
-    right: calc(var(--mrl-spacing-02) * -1);
-    top: calc(var(--mrl-spacing-02) * -1);
-  }
-  100% {
-    border-color: var(--mrl-color-focus-inverse);
-    border-width: var(--mrl-line-width-focus);
-    bottom: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    left: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    right: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-    top: calc((
-						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px
-					) * -1);
-  }
-}
-@keyframes outline-animation--hdiQx {
-  0% {
-    outline: 0 solid transparent;
-    outline-offset: 1px;
-  }
-  50% {
-    outline: 4px solid var(--mrl-color-focus-inverse);
-    outline-offset: 1px;
-  }
-  100% {
-    outline: 2px solid var(--mrl-color-focus-inverse);
-    outline-offset: 1px;
-  }
-}
-
-/**
- * This media query applies only to when we are 400% zoom.
- * - we apply a min height to the callout content so the callout does not collapse on itself when scrolling enables
- */
-@media screen and (min-resolution: 384dpi) and (max-resolution: 399dpi), (min-resolution: 4dppx) and (max-resolution: 3.99dppx) {
-  .MrlCallout--hjjNH > div:first-child {
-    min-height: 75px;
-  }
-}

package/dist/esm/components/callout/MrlCallout/MrlCallout.module.scss.js

@@ -1,14 +0,0 @@
-import "./MrlCallout.module.css";
-export default {
-	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--2sA95",
-	"MrlCallout--content": "MrlCallout--content--Et-FY",
-	"MrlCallout--title": "MrlCallout--title--v82T3",
-	"MrlCallout--eyebrow": "MrlCallout--eyebrow--OVcTC",
-	"MrlCallout--description": "MrlCallout--description--fgfRy",
-	"MrlCallout--image": "MrlCallout--image--N-lhU",
-	"MrlCallout--footer": "MrlCallout--footer--oEaG1",
-	"MrlCallout": "MrlCallout--hjjNH",
-	"border-animation-inverse": "border-animation-inverse--t-3GP",
-	"border-animation": "border-animation--4eksx",
-	"outline-animation": "outline-animation--hdiQx"
-};

package/dist/esm/components/callout/MrlCallout/index.js

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

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

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

package/dist/esm/components/container/MrlContainer/MrlContainer.js

@@ -1,34 +0,0 @@
-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 { defaults } from '../constants';
-import styles from './MrlContainer.module.scss.js';
-/**
- * Used to visually and group content and
- * provide structure in layouts.
- *
- * @param props - component props
- * @returns a MrlContainer React component.
- */
-export function MrlContainer(_a) {
-    var { children, className, kind = defaults.kind } = _a, remainingProps = __rest(_a, ["children", "className", "kind"]);
-    const allClasses = classnames({
-        'mrl-container': true,
-        [styles.MrlContainer]: true,
-        [styles[`MrlContainer--${kind}`]]: kind !== defaults.kind,
-        [`MrlContainer--${kind}`]: kind !== defaults.kind
-    }, className);
-    return (React.createElement("div", Object.assign({}, remainingProps, { className: allClasses }), kind === 'nested-options' ? (React.createElement("div", { className: classnames(styles['MrlContainer--nested-options-container'], 'MrlContainer--nested-options-container') },
-        React.createElement("div", { className: classnames(styles['MrlContainer--nested-options-divider'], 'MrlContainer--nested-options-divider') }),
-        React.createElement("div", null, children))) : (children)));
-}

package/dist/esm/components/container/MrlContainer/MrlContainer.module.css

@@ -1,42 +0,0 @@
-:root,
-.MrlContainer--nIscq {
-  --mrl-container-background: rgba(var(--mrl-white), 1);
-  --mrl-container-background--helper: rgba(var(--mrl-gray-10), 1);
-  --mrl-container-border-color: rgba(var(--mrl-gray-20), 1);
-  --mrl-container-border-radius: var(--mrl-radii-04);
-  --mrl-container-border-width: var(--mrl-stroke-01);
-  --mrl-container-padding: var(--mrl-spacing-07);
-}
-
-.MrlContainer--nIscq {
-  background-color: var(--mrl-container-background);
-  border: var(--mrl-container-border-width) solid var(--mrl-container-border-color);
-  border-radius: var(--mrl-container-border-radius);
-  overflow: hidden;
-  padding: var(--mrl-container-padding);
-}
-
-.MrlContainer--helper--EjD6A {
-  background-color: var(--mrl-container-background--helper);
-}
-
-.MrlContainer--nested--rKuON {
-  background-color: var(--mrl-color-background-highlight-secondary);
-  border-color: var(--mrl-color-line-highlight-secondary);
-}
-
-.MrlContainer--nested-options--TURNx {
-  background-color: transparent;
-  border: none;
-  padding: var(--mrl-space-inset-control-large) 0 var(--mrl-space-stack-related) var(--mrl-space-inset-container);
-}
-.MrlContainer--nested-options-container--ga4qT {
-  display: flex;
-}
-.MrlContainer--nested-options-divider--JW7Uh {
-  background-color: var(--mrl-color-background-highlight-selected);
-  border-radius: var(--mrl-radii-03);
-  flex-shrink: 0;
-  margin-right: var(--mrl-spacing-06);
-  width: var(--mrl-spacing-02);
-}

package/dist/esm/components/container/MrlContainer/MrlContainer.module.scss.js

@@ -1,9 +0,0 @@
-import "./MrlContainer.module.css";
-export default {
-	"MrlContainer": "MrlContainer--nIscq",
-	"MrlContainer--helper": "MrlContainer--helper--EjD6A",
-	"MrlContainer--nested": "MrlContainer--nested--rKuON",
-	"MrlContainer--nested-options": "MrlContainer--nested-options--TURNx",
-	"MrlContainer--nested-options-container": "MrlContainer--nested-options-container--ga4qT",
-	"MrlContainer--nested-options-divider": "MrlContainer--nested-options-divider--JW7Uh"
-};

package/dist/esm/components/container/MrlContainer/index.js

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

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

@@ -1,10 +0,0 @@
-export const allowedValues = {
-    kinds: ['default', 'helper', 'nested', 'nested-options']
-};
-/**
- * Default values for props on the MrlContainer component;
- * Shared between the component and Storybook
- */
-export const defaults = {
-    kind: 'default'
-};

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

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