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

package/dist/esm/components/focus-trap/MrlFocusTrap/MrlFocusTrap.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 { 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

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

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

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

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

@@ -0,0 +1,97 @@
+/* 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

@@ -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 { 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

@@ -0,0 +1,98 @@
+/* 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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +1,218 @@
+/* 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

@@ -0,0 +1,54 @@
+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'] })))));
+}