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

package/dist/esm/components/focus-trap/MrlFocusTrap/MrlFocusTrap.js

@@ -1,41 +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 { trapFocus } from '../../../utils/trapFocus';
-/**
- * Focus Trap React Component
- * @param {object} props - The component props.
- * @param {React.ReactElement} props.children - A function that returns the component's child element and receives a ref to the container.
- * @param {boolean} [props.disabled] - Specifies whether the focus trap should be disabled.
- * @param { React.RefObject<HTMLElement>} props.containerRef - Focus trap container reference
- * @returns {React.ReactElement} - The rendered FocusTrap component.
- */
-export const MrlFocusTrap = (_a) => {
-    var { children, disabled, disableAutofocus = false, containerRef } = _a, rest = __rest(_a, ["children", "disabled", "disableAutofocus", "containerRef"]);
-    const focusTrapRef = React.useRef(null);
-    React.useEffect(() => {
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
-        let cleanupFn = () => { };
-        const containerElement = (containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) || focusTrapRef.current;
-        if (containerElement && !disabled) {
-            cleanupFn = trapFocus(containerElement, disableAutofocus);
-        }
-        return cleanupFn;
-    }, [containerRef, disabled, disableAutofocus]);
-    if (typeof children === 'function') {
-        return children(focusTrapRef);
-    }
-    return containerRef ? (React.createElement(React.Fragment, null,
-        " ",
-        children,
-        " ")) : (React.createElement("div", Object.assign({}, rest, { ref: focusTrapRef }), children));
-};

package/dist/esm/components/focus-trap/MrlFocusTrap/index.js

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

package/dist/esm/components/focus-trap/index.js

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

package/dist/esm/components/form/checkbox/MrlCheckbox/MrlCheckbox.global.css

@@ -1,97 +0,0 @@
-/* stylelint-disable scss/operator-no-newline-after */
-.mrl-u-focus-wrapper {
-  position: relative;
-}
-
-.MrlForm-counter {
-  font-family: var(--mrl-body-font);
-  font-size: var(--mrl-type-size-text-xxsmall);
-  font-weight: var(--mrl-type-weight-text);
-  letter-spacing: var(--mrl-type-spacing-text);
-  line-height: var(--mrl-type-line-height-text-xxsmall);
-  color: rgba(var(--mrl-gray-80), 1);
-  display: block;
-  margin-top: var(--mrl-spacing-02);
-  text-align: right;
-  width: 100%;
-}
-
-:root,
-:host {
-  --mrl-text-input-background: var(--mrl-color-background);
-  --mrl-text-input-background-color-hover: var(--mrl-color-background);
-  --mrl-text-input-background-color-read-only: var(--mrl-black-opacity-00);
-  --mrl-text-input-border-color: rgba(var(--mrl-gray-60), 1);
-  --mrl-text-input-border-width: var(--mrl-line-width-border);
-  --mrl-text-input-border-color-hover: var(--mrl-color-line-hover);
-  --mrl-text-input-border-color-disabled: var(--mrl-color-line-disabled);
-  --mrl-text-input-border-color-read-only: rgba(0, 0, 0, 0%);
-  --mrl-text-input-border-color-focus: var(--mrl-color-line-active);
-  --mrl-text-input-border-radius: var(--mrl-border-radius-functional);
-  --mrl-text-input-color: rgba(var(--mrl-gray-90), 1);
-  --mrl-text-input-color-focus: rgba(var(--mrl-gray-100), 1);
-  --mrl-text-input-color-disabled: var(--mrl-color-text-disabled);
-  --mrl-text-input-color-read-only: var(--mrl-gray-90);
-  --mrl-text-input-height: var(--mrl-spacing-09);
-  --mrl-text-input-placeholder-color: var(--mrl-color-text-secondary);
-  --mrl-text-input-inset-vertical: var(--mrl-space-inset);
-  --mrl-text-input-inset-horizontal: var(--mrl-space-inset-control-small);
-  --mrl-text-input-padding: var(--mrl-text-input-inset-vertical)
-  	var(--mrl-text-input-inset-horizontal);
-  --mrl-input-icon-offset: var(--mrl-spacing-03);
-  --mrl-checkbox-height: var(--mrl-spacing-09);
-  --mrl-checkbox-input-affordance: var(--mrl-spacing-08);
-  --mrl-checkbox-input-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-checkbox-input-size: var(--mrl-spacing-06);
-  --mrl-checkbox-input-background: var(--mrl-color-background);
-  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-60), 1);
-  --mrl-checkbox-input-color: var(--mrl-color-text-inverse);
-  --mrl-checkbox-input-border-width: var(--mrl-line-width-control);
-  --mrl-checkbox-input-border-radius: var(--mrl-border-radius-content);
-  --mrl-radio-button-height: var(--mrl-spacing-06);
-  --mrl-radio-button-width: var(--mrl-spacing-06);
-  --mrl-radio-button-fill-size: var(--mrl-spacing-04);
-  --mrl-radio-button-border-color: rgba(var(--mrl-gray-60), 1);
-  --mrl-radio-button-border-width: var(--mrl-line-width-border);
-  --mrl-radio-button-border-radius: var(--mrl-border-radius-rounded);
-  --mrl-radio-button-background: var(--mrl-color-background);
-  --mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);
-  --mrl-select-background-color-read-only: var(--mrl-black-opacity-00);
-  --mrl-select-border-color-read-only: rgba(0, 0, 0, 0%);
-}
-
-.mrl-checkbox-input:checked ~ .mrl-checkbox-inputDisplay,
-.MrlCheckboxStandalone-input:checked ~ .MrlCheckboxStandalone-inputDisplay,
-.mrl-checkbox-input:indeterminate ~ .mrl-checkbox-inputDisplay,
-.MrlCheckboxStandalone-input:indeterminate ~ .MrlCheckboxStandalone-inputDisplay {
-  --mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);
-  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1);
-}
-
-:host {
-  --mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-select-item-spacing-stack: var(--mrl-spacing-02);
-  --mrl-select-item-text-affordance: calc(
-  	var(--mrl-type-line-height-text-small) * var(--mrl-type-size-text-small)
-  );
-}
-
-.MrlCheckbox-input[aria-invalid=true] ~ .mrl-checkbox-inputDisplay {
-  --mrl-checkbox-input-border-color: var(--mrl-color-background-error);
-}
-
-.MrlCheckbox:hover {
-  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-90), 1);
-}
-
-.MrlCheckbox-input:disabled ~ .MrlCheckbox-inputDisplay {
-  --mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
-}
-
-.MrlCheckbox-input:checked:disabled ~ .MrlCheckbox-inputDisplay {
-  --mrl-checkbox-input-background: var(--mrl-color-background-disabled);
-}
-
-.MrlCheckbox-input:checked[aria-invalid=true] ~ .MrlCheckbox-inputDisplay {
-  --mrl-checkbox-input-background: var(--mrl-color-background-error);
-}

package/dist/esm/components/form/checkbox/MrlCheckbox/MrlCheckbox.js

@@ -1,47 +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 { getUniqueId, setAttributes } from '../../../../utils';
-import { checkboxDefaults } from '../../constants';
-import { MrlCheckboxStandalone } from '../MrlCheckboxStandalone/MrlCheckboxStandalone';
-import { checkInvalidAttributes } from '../../../../utils/checkInvalidAttributes';
-import './MrlCheckbox.global.css';
-import styles from './MrlCheckbox.module.scss.js';
-import { MrlLabelWithDescription } from '../../label/MrlLabelWithDescription';
-import { getDescribedby } from '../../utils';
-/**
- * Form element with an associated text label that allows the user to select one or more options
- * from a provided list
- * @param {MrlCheckboxProps} props - the component props
- * @returns a checkbox element with an associated label
- */
-export function MrlCheckbox(_a) {
-    var { attrs = {}, className, description, hasMultilineLabel = false, state = checkboxDefaults.state, selected = checkboxDefaults.selected, icon, label } = _a, rest = __rest(_a, ["attrs", "className", "description", "hasMultilineLabel", "state", "selected", "icon", "label"]);
-    const checkboxIdRef = React.useRef(getUniqueId('mrl-checkbox'));
-    const descriptionId = `${checkboxIdRef.current}-description`;
-    const allClasses = classnames(attrs.class || attrs.className, className, 'MrlCheckbox', styles['MrlCheckbox'], {
-        [styles['mrl-is--disabled']]: state === 'disabled',
-        [styles['mrl-is--invalid']]: state === 'error',
-        [styles['mrl-is--selected']]: selected === 'checked',
-        [styles['mrl-is--indeterminate']]: selected === 'indeterminate'
-    });
-    checkInvalidAttributes(attrs);
-    delete attrs.class;
-    delete attrs.className;
-    const attributes = setAttributes(attrs, Object.assign(Object.assign({}, getDescribedby(attrs['aria-describedby'], typeof description === 'string' ? descriptionId : undefined)), { id: checkboxIdRef.current }));
-    // setAttributes always sets className="" which always triggers the warning message in the MrlCheckboxStandalone component
-    delete attributes.className;
-    return (React.createElement("div", { className: allClasses },
-        React.createElement(MrlCheckboxStandalone, Object.assign({}, rest, { selected: selected, state: state, attrs: attributes })),
-        React.createElement(MrlLabelWithDescription, { isDisabled: state === 'disabled', isSelected: selected === 'checked', isIndeterminate: selected === 'indeterminate', hasMultilineLabel: hasMultilineLabel, htmlFor: checkboxIdRef.current, icon: icon, label: label, description: description, descriptionId: descriptionId })));
-}

package/dist/esm/components/form/checkbox/MrlCheckbox/MrlCheckbox.module.css

@@ -1,98 +0,0 @@
-/* stylelint-disable scss/operator-no-newline-after */
-.mrl-u-focus-wrapper--tOVOX {
-  position: relative;
-}
-
-.MrlForm-counter--SNWOj {
-  font-family: var(--mrl-body-font);
-  font-size: var(--mrl-type-size-text-xxsmall);
-  font-weight: var(--mrl-type-weight-text);
-  letter-spacing: var(--mrl-type-spacing-text);
-  line-height: var(--mrl-type-line-height-text-xxsmall);
-  color: rgba(var(--mrl-gray-80), 1);
-  display: block;
-  margin-top: var(--mrl-spacing-02);
-  text-align: right;
-  width: 100%;
-}
-
-:root,
-:host {
-  --mrl-text-input-background: var(--mrl-color-background);
-  --mrl-text-input-background-color-hover: var(--mrl-color-background);
-  --mrl-text-input-background-color-read-only: var(--mrl-black-opacity-00);
-  --mrl-text-input-border-color: rgba(var(--mrl-gray-60), 1);
-  --mrl-text-input-border-width: var(--mrl-line-width-border);
-  --mrl-text-input-border-color-hover: var(--mrl-color-line-hover);
-  --mrl-text-input-border-color-disabled: var(--mrl-color-line-disabled);
-  --mrl-text-input-border-color-read-only: rgba(0, 0, 0, 0%);
-  --mrl-text-input-border-color-focus: var(--mrl-color-line-active);
-  --mrl-text-input-border-radius: var(--mrl-border-radius-functional);
-  --mrl-text-input-color: rgba(var(--mrl-gray-90), 1);
-  --mrl-text-input-color-focus: rgba(var(--mrl-gray-100), 1);
-  --mrl-text-input-color-disabled: var(--mrl-color-text-disabled);
-  --mrl-text-input-color-read-only: var(--mrl-gray-90);
-  --mrl-text-input-height: var(--mrl-spacing-09);
-  --mrl-text-input-placeholder-color: var(--mrl-color-text-secondary);
-  --mrl-text-input-inset-vertical: var(--mrl-space-inset);
-  --mrl-text-input-inset-horizontal: var(--mrl-space-inset-control-small);
-  --mrl-text-input-padding: var(--mrl-text-input-inset-vertical)
-  	var(--mrl-text-input-inset-horizontal);
-  --mrl-input-icon-offset: var(--mrl-spacing-03);
-  --mrl-checkbox-height: var(--mrl-spacing-09);
-  --mrl-checkbox-input-affordance: var(--mrl-spacing-08);
-  --mrl-checkbox-input-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-checkbox-input-size: var(--mrl-spacing-06);
-  --mrl-checkbox-input-background: var(--mrl-color-background);
-  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-60), 1);
-  --mrl-checkbox-input-color: var(--mrl-color-text-inverse);
-  --mrl-checkbox-input-border-width: var(--mrl-line-width-control);
-  --mrl-checkbox-input-border-radius: var(--mrl-border-radius-content);
-  --mrl-radio-button-height: var(--mrl-spacing-06);
-  --mrl-radio-button-width: var(--mrl-spacing-06);
-  --mrl-radio-button-fill-size: var(--mrl-spacing-04);
-  --mrl-radio-button-border-color: rgba(var(--mrl-gray-60), 1);
-  --mrl-radio-button-border-width: var(--mrl-line-width-border);
-  --mrl-radio-button-border-radius: var(--mrl-border-radius-rounded);
-  --mrl-radio-button-background: var(--mrl-color-background);
-  --mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);
-  --mrl-select-background-color-read-only: var(--mrl-black-opacity-00);
-  --mrl-select-border-color-read-only: rgba(0, 0, 0, 0%);
-}
-
-.mrl-checkbox-input--qh0AE:checked ~ .mrl-checkbox-inputDisplay--BzZOw,
-.MrlCheckboxStandalone-input--S-VSR:checked ~ .MrlCheckboxStandalone-inputDisplay--3DnU1,
-.mrl-checkbox-input--qh0AE:indeterminate ~ .mrl-checkbox-inputDisplay--BzZOw,
-.MrlCheckboxStandalone-input--S-VSR:indeterminate ~ .MrlCheckboxStandalone-inputDisplay--3DnU1 {
-  --mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);
-  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1);
-}
-
-:host {
-  --mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-select-item-spacing-stack: var(--mrl-spacing-02);
-  --mrl-select-item-text-affordance: calc(
-  	var(--mrl-type-line-height-text-small) * var(--mrl-type-size-text-small)
-  );
-}
-
-.MrlCheckbox-input--an99U[aria-invalid=true] ~ .mrl-checkbox-inputDisplay--BzZOw {
-  --mrl-checkbox-input-border-color: var(--mrl-color-background-error);
-}
-
-.MrlCheckbox--M-yX5:hover {
-  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-90), 1);
-}
-
-.MrlCheckbox--M-yX5 {
-  align-items: center;
-  display: flex;
-  min-height: var(--mrl-checkbox-height);
-  position: relative;
-}
-.MrlCheckbox--M-yX5 .MrlCheckboxStandalone {
-  padding-right: var(--mrl-checkbox-input-inset);
-}
-.MrlCheckbox--M-yX5 :first-child {
-  align-self: flex-start;
-}

package/dist/esm/components/form/checkbox/MrlCheckbox/MrlCheckbox.module.scss.js

@@ -1,11 +0,0 @@
-import "./MrlCheckbox.module.css";
-export default {
-	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--tOVOX",
-	"MrlForm-counter": "MrlForm-counter--SNWOj",
-	"mrl-checkbox-input": "mrl-checkbox-input--qh0AE",
-	"mrl-checkbox-inputDisplay": "mrl-checkbox-inputDisplay--BzZOw",
-	"MrlCheckboxStandalone-input": "MrlCheckboxStandalone-input--S-VSR",
-	"MrlCheckboxStandalone-inputDisplay": "MrlCheckboxStandalone-inputDisplay--3DnU1",
-	"MrlCheckbox-input": "MrlCheckbox-input--an99U",
-	"MrlCheckbox": "MrlCheckbox--M-yX5"
-};

package/dist/esm/components/form/checkbox/MrlCheckbox/index.js

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

package/dist/esm/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.global.css

@@ -1,218 +0,0 @@
-/* stylelint-disable scss/operator-no-newline-after */
-.mrl-u-focus-wrapper {
-  position: relative;
-}
-
-.MrlForm-counter {
-  font-family: var(--mrl-body-font);
-  font-size: var(--mrl-type-size-text-xxsmall);
-  font-weight: var(--mrl-type-weight-text);
-  letter-spacing: var(--mrl-type-spacing-text);
-  line-height: var(--mrl-type-line-height-text-xxsmall);
-  color: rgba(var(--mrl-gray-80), 1);
-  display: block;
-  margin-top: var(--mrl-spacing-02);
-  text-align: right;
-  width: 100%;
-}
-
-:root,
-:host {
-  --mrl-text-input-background: var(--mrl-color-background);
-  --mrl-text-input-background-color-hover: var(--mrl-color-background);
-  --mrl-text-input-background-color-read-only: var(--mrl-black-opacity-00);
-  --mrl-text-input-border-color: rgba(var(--mrl-gray-60), 1);
-  --mrl-text-input-border-width: var(--mrl-line-width-border);
-  --mrl-text-input-border-color-hover: var(--mrl-color-line-hover);
-  --mrl-text-input-border-color-disabled: var(--mrl-color-line-disabled);
-  --mrl-text-input-border-color-read-only: rgba(0, 0, 0, 0%);
-  --mrl-text-input-border-color-focus: var(--mrl-color-line-active);
-  --mrl-text-input-border-radius: var(--mrl-border-radius-functional);
-  --mrl-text-input-color: rgba(var(--mrl-gray-90), 1);
-  --mrl-text-input-color-focus: rgba(var(--mrl-gray-100), 1);
-  --mrl-text-input-color-disabled: var(--mrl-color-text-disabled);
-  --mrl-text-input-color-read-only: var(--mrl-gray-90);
-  --mrl-text-input-height: var(--mrl-spacing-09);
-  --mrl-text-input-placeholder-color: var(--mrl-color-text-secondary);
-  --mrl-text-input-inset-vertical: var(--mrl-space-inset);
-  --mrl-text-input-inset-horizontal: var(--mrl-space-inset-control-small);
-  --mrl-text-input-padding: var(--mrl-text-input-inset-vertical)
-  	var(--mrl-text-input-inset-horizontal);
-  --mrl-input-icon-offset: var(--mrl-spacing-03);
-  --mrl-checkbox-height: var(--mrl-spacing-09);
-  --mrl-checkbox-input-affordance: var(--mrl-spacing-08);
-  --mrl-checkbox-input-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-checkbox-input-size: var(--mrl-spacing-06);
-  --mrl-checkbox-input-background: var(--mrl-color-background);
-  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-60), 1);
-  --mrl-checkbox-input-color: var(--mrl-color-text-inverse);
-  --mrl-checkbox-input-border-width: var(--mrl-line-width-control);
-  --mrl-checkbox-input-border-radius: var(--mrl-border-radius-content);
-  --mrl-radio-button-height: var(--mrl-spacing-06);
-  --mrl-radio-button-width: var(--mrl-spacing-06);
-  --mrl-radio-button-fill-size: var(--mrl-spacing-04);
-  --mrl-radio-button-border-color: rgba(var(--mrl-gray-60), 1);
-  --mrl-radio-button-border-width: var(--mrl-line-width-border);
-  --mrl-radio-button-border-radius: var(--mrl-border-radius-rounded);
-  --mrl-radio-button-background: var(--mrl-color-background);
-  --mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);
-  --mrl-select-background-color-read-only: var(--mrl-black-opacity-00);
-  --mrl-select-border-color-read-only: rgba(0, 0, 0, 0%);
-}
-
-.mrl-checkbox-input:checked ~ .mrl-checkbox-inputDisplay,
-.MrlCheckboxStandalone-input:checked ~ .MrlCheckboxStandalone-inputDisplay,
-.mrl-checkbox-input:indeterminate ~ .mrl-checkbox-inputDisplay,
-.MrlCheckboxStandalone-input:indeterminate ~ .MrlCheckboxStandalone-inputDisplay {
-  --mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);
-  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1);
-}
-
-:host {
-  --mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-  --mrl-select-item-spacing-stack: var(--mrl-spacing-02);
-  --mrl-select-item-text-affordance: calc(
-  	var(--mrl-type-line-height-text-small) * var(--mrl-type-size-text-small)
-  );
-}
-
-.MrlCheckboxStandalone-input[aria-invalid=true] ~ .MrlCheckboxStandalone-inputDisplay {
-  --mrl-checkbox-input-border-color: var(--mrl-color-background-error);
-}
-
-.MrlCheckboxStandalone-input:checked[aria-invalid=true] ~ .MrlCheckboxStandalone-inputDisplay {
-  --mrl-checkbox-input-border-color: var(--mrl-color-background-error);
-  --mrl-checkbox-input-background: var(--mrl-color-background-error);
-}
-
-/* stylelint-disable no-descending-specificity */
-.MrlCheckboxStandalone-input:disabled ~ .MrlCheckboxStandalone-inputDisplay {
-  --mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
-}
-
-.MrlCheckboxStandalone-input:checked:disabled ~ .MrlCheckboxStandalone-inputDisplay {
-  --mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
-  --mrl-checkbox-input-background: var(--mrl-color-background-disabled);
-}
-
-/* stylelint-enable no-descending-specificity */
-.MrlCheckboxStandalone:hover {
-  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-90), 1);
-}
-
-.MrlCheckboxStandalone-input {
-  position: relative;
-  /* stylelint-disable order/properties-alphabetical-order */
-  position: absolute;
-}
-.MrlCheckboxStandalone-input:focus-visible + .mrl-u-focus-indicator {
-  outline: none;
-}
-.MrlCheckboxStandalone-input:focus-visible + .mrl-u-focus-indicator::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-content) + 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;
-}
-@keyframes border-animation {
-  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 {
-  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 {
-  0% {
-    outline: 0 solid transparent;
-    outline-offset: 1px;
-  }
-  50% {
-    outline: 4px solid var(--mrl-color-focus);
-    outline-offset: 1px;
-  }
-  100% {
-    outline: 2px solid var(--mrl-color-focus);
-    outline-offset: 1px;
-  }
-}
-.MrlCheckboxStandalone-input + .mrl-u-focus-indicator {
-  position: absolute;
-  left: 0;
-  top: auto;
-  height: var(--mrl-checkbox-input-size);
-  width: var(--mrl-checkbox-input-size);
-}

package/dist/esm/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.js

@@ -1,54 +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 { getUniqueId, setAttributes } from '../../../../utils';
-import { check, minus } from '@muraldevkit/ds-icons';
-import { checkboxDefaults } from '../../constants';
-import { MrlSvg } from '../../../';
-import styles from './MrlCheckboxStandalone.module.scss.js';
-import './MrlCheckboxStandalone.global.css';
-/**
- * Input that allows the user to select one or more options from a provided list.
- * Note, this component does not provide out of the box accessibility for ensuring
- * an associated label and must be manually setup during adoption.
- * @param {MrlCheckboxStandaloneProps} props - the component props
- * @returns a checkbox element
- */
-export function MrlCheckboxStandalone(_a) {
-    var { attrs = {}, state = checkboxDefaults.state, selected = checkboxDefaults.selected } = _a, rest = __rest(_a, ["attrs", "state", "selected"]);
-    // Use attrs.id if the developer passes in a custom id
-    // but we need to ensure one exists for accessibility
-    const checkboxIdRef = React.useRef(attrs.id || getUniqueId('mrl-checkbox'));
-    const inputRef = React.useRef(null);
-    if (!(attrs.id || attrs['aria-labelledby'])) {
-        console.warn('Warning: Mural Standalone Checkboxes must have either an id or' +
-            ' aria-labelledby attribute for proper accessibility.');
-    }
-    // We need to use the ref to set indetermiant attr
-    // due to not being an intrinsic HTML attr
-    React.useEffect(() => {
-        const indeterminate = selected === 'indeterminate';
-        if (inputRef.current) {
-            inputRef.current.indeterminate = indeterminate;
-        }
-    }, [selected]);
-    delete attrs.class;
-    delete attrs.className;
-    const attributes = setAttributes(attrs);
-    return (React.createElement("div", { className: classnames(styles['MrlCheckboxStandalone'], 'MrlCheckboxStandalone') },
-        React.createElement("span", { className: "mrl-u-focus-wrapper" },
-            React.createElement("input", Object.assign({}, rest, attributes, { "aria-invalid": state === 'error', checked: selected === 'checked', disabled: state === 'disabled', id: checkboxIdRef.current, ref: inputRef, type: "checkbox", className: classnames(styles['MrlCheckboxStandalone-input'], 'MrlCheckboxStandalone-input') })),
-            React.createElement("span", { className: "mrl-u-focus-indicator" }),
-            React.createElement("span", { className: classnames(styles['MrlCheckboxStandalone-inputDisplay'], 'MrlCheckboxStandalone-inputDisplay') },
-                React.createElement(MrlSvg, { svg: selected !== 'indeterminate' ? check : minus, size: "auto", className: styles['MrlCheckboxStandalone-inputDisplay-icon'] })))));
-}