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

package/dist/esm/components/form/select/styles/default.js

@@ -0,0 +1,175 @@
+import { keyframes } from '@emotion/react';
+/**
+ * MrlSelect styles object for the default kind
+ * @returns a styles object
+ */
+export function defaultStyles() {
+    const outlineAnimation = keyframes({
+        '0%': {
+            outline: '0 solid transparent',
+            outlineOffset: '1px'
+        },
+        '50%': {
+            outline: '4px solid var(--mrl-color-focus)',
+            outlineOffset: '1px'
+        },
+        '100%': {
+            outline: '2px solid var(--mrl-color-focus)',
+            outlineOffset: '1px'
+        }
+    });
+    return {
+        control: (baseStyles, state) => {
+            const hasError = state.selectProps['aria-invalid'];
+            const isReadOnly = state.selectProps['aria-readonly'];
+            const styles = Object.assign(Object.assign({}, baseStyles), { cursor: 'pointer', color: 'var(--mrl-color-text-secondary)', backgroundColor: 'var(--mrl-color-background-input)', borderWidth: 'var(--mrl-line-width-control)', borderColor: 'var(--mrl-color-line)', borderStyle: 'solid', borderRadius: 'var(--mrl-radii-03)', boxShadow: 'none', boxSizing: 'border-box', fontSize: 'var(--mrl-type-size-text-small)', margin: '0', padding: 'calc(var(--mrl-spacing-02) + var(--mrl-spacing-01)) var(--mrl-spacing-03)', outline: 'var(--mrl-line-width-focus) solid transparent', outlineOffset: 'var(--mrl-space-offset-focus)', '&:hover': {
+                    color: 'var(--mrl-color-text-selected)',
+                    borderColor: 'var(--mrl-color-line-hover)'
+                } });
+            // Populated (open)
+            if (state.menuIsOpen) {
+                styles.color = 'var(--mrl-color-text-selected)';
+                styles.borderColor = 'var(--mrl-color-line-hover)';
+            }
+            // Populated (closed)
+            if (state.hasValue) {
+                styles.color = 'var(--mrl-color-text-selected)';
+            }
+            // Focus
+            if (state.isFocused && !state.menuIsOpen) {
+                styles.color = 'var(--mrl-color-text-selected)';
+                styles.borderColor = 'var(--mrl-color-line-hover)';
+                styles.outlineColor = 'var(--mrl-color-focus)';
+                styles.animationFillMode = 'forwards';
+                styles.animationIterationCount = 1;
+                styles.animation = `${outlineAnimation} var(--mrl-duration-03) var(--mrl-timing-m3)`;
+            }
+            // Alert
+            if (hasError) {
+                styles.color = 'var(--mrl-color-text-selected)';
+                styles.borderColor = 'rgba(var(--mrl-status-error), 1)';
+                styles['&:hover'] = {
+                    borderColor: 'rgba(var(--mrl-status-error), 1)'
+                };
+            }
+            // Disabled (default and populated)
+            if (state.isDisabled) {
+                styles.color = 'var(--mrl-color-text-disabled)';
+                styles.borderColor = 'var(--mrl-color-line-disabled)';
+                styles['&:hover'] = {
+                    borderColor: 'var(--mrl-color-line-disabled)'
+                };
+            }
+            // Read only
+            if (isReadOnly) {
+                styles.color = 'var(--mrl-color-text-selected)';
+                styles.borderColor = 'transparent';
+                styles.backgroundColor = 'var(--mrl-black-opacity-00)';
+                styles['&:hover'] = {
+                    borderColor: 'transparent'
+                };
+            }
+            return styles;
+        },
+        clearIndicator: (baseStyles, props) => {
+            if (props.selectProps.showClearIndicatorIcon) {
+                return Object.assign(Object.assign({}, baseStyles), { color: 'var(--mrl-color-text-selected)', display: 'inline-block', padding: '0 var(--mrl-spacing-02) 0 0', margin: 0, height: 'var(--mrl-spacing-06)', '&:hover': {
+                        color: 'var(--mrl-color-text-selected)'
+                    } });
+            }
+            return Object.assign(Object.assign({}, baseStyles), { display: 'none' });
+        },
+        valueContainer: (baseStyles) => {
+            return Object.assign(Object.assign({}, baseStyles), { padding: 0, minHeight: 'var(--mrl-spacing-07)', gap: 'var(--mrl-spacing-01)' });
+        },
+        indicatorSeparator: () => {
+            return {
+                display: 'none'
+            };
+        },
+        indicatorsContainer: (baseStyles, state) => {
+            const isReadOnly = state.selectProps['aria-readonly'];
+            return Object.assign(Object.assign(Object.assign({}, baseStyles), (isReadOnly && { display: 'none' })), { height: 'auto' });
+        },
+        input: (baseStyles) => {
+            return Object.assign(Object.assign({}, baseStyles), { padding: 0, margin: 0 });
+        },
+        menuList: (baseStyles) => {
+            return Object.assign(Object.assign({}, baseStyles), { padding: 'var(--mrl-space-inset)', margin: 0 });
+        },
+        menu: (baseStyles) => {
+            return Object.assign(Object.assign({}, baseStyles), { marginTop: 'calc(-1 * var(--mrl-spacing-02))', marginBottom: 'calc(-1 * var(--mrl-spacing-02))', borderRadius: 'var(--mrl-radii-03)', padding: 0, boxShadow: 'var(--mrl-shadow-01)' });
+        },
+        option: (baseStyles, state) => {
+            const styles = Object.assign(Object.assign({}, baseStyles), { backgroundColor: 'var(--mrl-color-background-input)', position: 'relative', cursor: 'pointer', display: 'flex', borderRadius: 'var(--mrl-radii-03)', fontSize: 'var(--mrl-type-size-text-small)', fontWeight: 'var(--mrl-type-weight-title-secondary)', letterSpacing: 'var(--mrl-type-spacing-text)', lineHeight: 'var(--mrl-type-line-height-text-small)', color: 'var(--mrl-color-text)', paddingTop: 'calc(var(--mrl-spacing-01) + var(--mrl-spacing-02))', paddingRight: 'var(--mrl-space-inset)', paddingBottom: 'calc(var(--mrl-spacing-01) + var(--mrl-spacing-02))', marginBottom: 'var(--mrl-spacing-02)', outline: 'var(--mrl-line-width-focus) solid transparent', outlineOffset: 'var(--mrl-space-offset-focus)', '&:hover': {
+                    backgroundColor: 'var(--mrl-black-opacity-00)'
+                }, ':active': {
+                    backgroundColor: 'var(--mrl-color-background-highlight-hover)'
+                } });
+            if (state.isSelected) {
+                styles.backgroundColor = 'var(--mrl-color-background-highlight-selected)';
+                styles.color = 'var(--mrl-color-text-highlight-selected)';
+                styles.outlineColor = 'transparent';
+                styles['&:hover'] = {
+                    backgroundColor: 'var(--mrl-color-background-highlight-selected)'
+                };
+            }
+            if (state.isFocused) {
+                styles.borderColor = 'var(--mrl-color-line-hover)';
+                styles.outlineColor = 'var(--mrl-color-focus)';
+                styles.animationFillMode = 'forwards';
+                styles.animationIterationCount = 1;
+                styles.animation = `${outlineAnimation} var(--mrl-duration-03) var(--mrl-timing-m3)`;
+            }
+            if (state.isSelected && state.isFocused) {
+                styles.backgroundColor = 'var(--mrl-color-background-highlight-selected)';
+                styles.color = 'var(--mrl-color-text-highlight-selected)';
+                styles.outlineColor = 'var(--mrl-color-focus)';
+            }
+            return styles;
+        },
+        placeholder: (baseStyles, state) => {
+            const isMulti = state.isMulti;
+            const styles = Object.assign(Object.assign({}, baseStyles), { color: 'inherit', lineHeight: 'inherit' });
+            // Multi-select
+            if (isMulti) {
+                styles.marginLeft = 0;
+            }
+            return styles;
+        },
+        singleValue: (baseStyles) => {
+            const styles = Object.assign(Object.assign({}, baseStyles), { color: 'inherit' });
+            return styles;
+        },
+        multiValue: (baseStyles) => {
+            const styles = Object.assign(Object.assign({}, baseStyles), { margin: 0, padding: 0, backgroundColor: 'rgba(var(--mrl-gray-10), 1)', boxSizing: 'border-box', borderStyle: 'solid', borderRadius: 'var(--mrl-radii-02)', borderColor: 'var(--mrl-black-opacity-00)', borderWidth: 'var(--mrl-line-width-control)', display: 'flex', alignItems: 'center', height: 'var(--mrl-spacing-07)' });
+            return styles;
+        },
+        multiValueLabel: (baseStyles) => {
+            const styles = Object.assign(Object.assign({}, baseStyles), { padding: 'var(--mrl-spacing-01)', paddingLeft: 'calc(var(--mrl-spacing-02) + var(--mrl-spacing-01))', paddingRight: 'var(--mrl-spacing-01)', fontSize: 'var(--mrl-font-size-02)', fontWeight: 'var(--mrl-font-weight-02)', color: 'var(--mrl-color-text)' });
+            return styles;
+        },
+        multiValueRemove: (baseStyles) => {
+            const styles = Object.assign(Object.assign({}, baseStyles), { padding: 0, margin: 0, borderStyle: 'solid', borderRadius: 'var(--mrl-radii-02)', height: 'var(--mrl-spacing-05)', width: 'var(--mrl-spacing-05)', color: 'var(--mrl-color-text)', backgroundColor: 'rgba(var(--mrl-gray-10), 1)', '&:hover': {
+                    color: 'var(--mrl-color-text-selected)',
+                    backgroundColor: 'rgba(var(--mrl-gray-10), 1)'
+                } });
+            return styles;
+        },
+        noOptionsMessage: (baseStyles) => {
+            const styles = Object.assign(Object.assign({}, baseStyles), { color: 'var(--mrl-color-text-secondary)', fontSize: 'var(--mrl-type-size-text-small)', padding: 0 });
+            return styles;
+        },
+        loadingMessage: (baseStyles) => {
+            return Object.assign(Object.assign({}, baseStyles), { color: 'var(--mrl-color-text-secondary)', fontSize: 'var(--mrl-type-size-text-small)', padding: 0 });
+        },
+        group: (baseStyles) => {
+            const styles = Object.assign(Object.assign({}, baseStyles), { paddingTop: 0, paddingBottom: 'var(--mrl-spacing-01)' });
+            return styles;
+        },
+        groupHeading: (baseStyles) => {
+            const styles = Object.assign(Object.assign({}, baseStyles), { paddingLeft: 0, textTransform: 'capitalize', marginBottom: 'var(--mrl-spacing-03)', color: 'var(--mrl-color-text-secondary)', fontSize: 'var(--mrl-font-size-02)' });
+            return styles;
+        }
+    };
+}

package/dist/esm/components/form/select/styles/index.js

@@ -0,0 +1,22 @@
+import { defaultStyles } from './default';
+import { inlineStyles } from './inline';
+import { inlineNoLabelStyles } from './inlineNoLabel';
+import { inlineStackedStyles } from './inlineStacked';
+/**
+ * Gets the styles objects for each MrlSelect kind
+ *
+ * @param kind - the select kind
+ * @returns the styles object for react-select
+ */
+export function getSelectStyles(kind = 'default') {
+    if (kind === 'inline') {
+        return inlineStyles();
+    }
+    if (kind === 'inline-stacked') {
+        return inlineStackedStyles();
+    }
+    if (kind === 'inline-no-label') {
+        return inlineNoLabelStyles();
+    }
+    return defaultStyles();
+}

package/dist/esm/components/form/select/styles/inline.js

@@ -0,0 +1,42 @@
+import { defaultStyles } from './default';
+/**
+ * MrlSelect styles object for the inline kind
+ *
+ * @returns a styles object
+ */
+export function inlineStyles() {
+    return Object.assign(Object.assign({}, defaultStyles()), { container: (baseStyles) => {
+            return Object.assign(Object.assign({}, baseStyles), { flexGrow: 1 });
+        }, control: (baseStyles, state) => {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const styles = defaultStyles().control(baseStyles, state);
+            const hasError = state.selectProps['aria-invalid'];
+            const isReadOnly = state.selectProps['aria-readonly'];
+            styles.borderColor = 'transparent';
+            styles['&:hover'] = {
+                backgroundColor: 'var(--mrl-black-opacity-00)',
+                borderColor: 'transparent',
+                color: 'var(--mrl-color-text-selected)'
+            };
+            if (state.menuIsOpen) {
+                styles.backgroundColor = 'var(--mrl-black-opacity-01)';
+            }
+            if (hasError) {
+                styles.borderColor = 'rgba(var(--mrl-status-error), 1)';
+                styles.paddingLeft =
+                    'calc(var(--mrl-spacing-02) + var(--mrl-spacing-01)) var(--mrl-spacing-03)';
+                styles['&:hover'] = {
+                    backgroundColor: 'var(--mrl-black-opacity-00)',
+                    borderColor: 'rgba(var(--mrl-status-error), 1)',
+                    color: 'var(--mrl-color-text-selected)'
+                };
+            }
+            if (isReadOnly) {
+                styles.backgroundColor = 'var(--mrl-color-background)';
+            }
+            if (state.selectProps.isMulti) {
+                styles.paddingLeft = 0;
+            }
+            return styles;
+        } });
+}

package/dist/esm/components/form/select/styles/inlineNoLabel.js

@@ -0,0 +1,48 @@
+import { defaultStyles } from './default';
+/**
+ * MrlSelect styles object for the inline-no-label kind
+ *
+ * @returns a styles object
+ */
+export function inlineNoLabelStyles() {
+    return Object.assign(Object.assign({}, defaultStyles()), { container: (baseStyles) => {
+            return Object.assign(Object.assign({}, baseStyles), { flexGrow: 1 });
+        }, control: (baseStyles, state) => {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const styles = defaultStyles().control(baseStyles, state);
+            const hasError = state.selectProps['aria-invalid'];
+            const isReadOnly = state.selectProps['aria-readonly'];
+            styles.borderColor = 'transparent';
+            styles.color = 'var(--mrl-color-text-label)';
+            styles.fontWeight = 'var(--mrl-font-weight-04)';
+            styles.minHeight = 'var(--mrl-spacing-06)';
+            styles.padding = 'var(--mrl-spacing-03) var(--mrl-space-inset)';
+            styles['&:hover'] = {
+                backgroundColor: 'var(--mrl-black-opacity-00)',
+                borderColor: 'transparent',
+                color: 'var(--mrl-color-text-selected)'
+            };
+            if (state.menuIsOpen) {
+                styles.backgroundColor = 'var(--mrl-black-opacity-01)';
+            }
+            if (hasError) {
+                styles.paddingLeft =
+                    'calc(var(--mrl-spacing-02) + var(--mrl-spacing-01)) var(--mrl-spacing-03)';
+                styles.borderColor = 'rgba(var(--mrl-status-error), 1)';
+                styles['&:hover'] = {
+                    backgroundColor: 'var(--mrl-black-opacity-00)',
+                    borderColor: 'rgba(var(--mrl-status-error), 1)',
+                    color: 'var(--mrl-color-text-selected)'
+                };
+            }
+            if (isReadOnly) {
+                styles.backgroundColor = 'var(--mrl-color-background)';
+            }
+            if (state.selectProps.isMulti) {
+                styles.paddingLeft = 0;
+            }
+            return styles;
+        }, valueContainer: (baseStyles) => {
+            return Object.assign(Object.assign({}, baseStyles), { minHeight: 'var(--mrl-spacing-06)', padding: 0 });
+        } });
+}

package/dist/esm/components/form/select/styles/inlineStacked.js

@@ -0,0 +1,24 @@
+import { defaultStyles } from './default';
+import { inlineStyles } from './inline';
+/**
+ * MrlSelect styles object for the inline-stacked kind
+ *
+ * @returns a styles object
+ */
+export function inlineStackedStyles() {
+    return Object.assign(Object.assign({}, defaultStyles()), { control: (baseStyles, state) => {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const styles = inlineStyles().control(baseStyles, state);
+            const hasError = state.selectProps['aria-invalid'];
+            styles.paddingLeft = 0;
+            styles.transition =
+                'background-color var(--mrl-duration-03) var(--mrl-timing-m2), padding-left var(--mrl-duration-03) var(--mrl-timing-m2)';
+            styles['&:hover'] = Object.assign(Object.assign({}, styles['&:hover']), { paddingLeft: 'var(--mrl-space-inset-control-small)' });
+            if (hasError || state.isFocused || state.menuIsOpen) {
+                styles.paddingLeft = 'var(--mrl-space-inset-control-small)';
+            }
+            return styles;
+        }, placeholder: (baseStyles) => {
+            return Object.assign(Object.assign({}, baseStyles), { marginLeft: 0 });
+        } });
+}

package/dist/esm/components/form/select/types.js

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

package/dist/esm/components/form/select/utils/closeMenuOnScroll.js

@@ -0,0 +1,19 @@
+/**
+ * Evaluates the scroll event target with a given class name to prevent closing the select menu when
+ * it renders inside a scrollable container.
+ * if the scroll event target contains the provided class, the function return `false` to keep the menu open.
+ * In most scenarios, `className` will be the class name of the select menu list.
+ *
+ * @param  className - The class name to check against the target element's class list.
+ * @returns An event handler function that takes an event as an argument
+ */
+export function closeMenuOnScroll(className) {
+    return function (e) {
+        e.stopPropagation();
+        const el = e.target;
+        if (el && el.classList && typeof el.classList.contains === 'function') {
+            return !el.classList.contains(className);
+        }
+        return true;
+    };
+}

package/dist/esm/components/form/select/utils/index.js

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

package/dist/esm/components/form/switch/MrlSwitch/MrlSwitch.js

@@ -0,0 +1,32 @@
+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 { memo, useMemo } from 'react';
+import { MrlSwitchStandalone } from '../MrlSwitchStandalone/MrlSwitchStandalone';
+import { getUniqueId } from '../../../../utils';
+import styles from './MrlSwitch.module.scss.js';
+export const MrlSwitch = memo((_a) => {
+    var { className, disabled, id = undefined, label, onChange, selected = false } = _a, rest = __rest(_a, ["className", "disabled", "id", "label", "onChange", "selected"]);
+    const inputId = useMemo(() => id || getUniqueId('mrl-toggle-'), [id]);
+    const textOnlyLabel = typeof label === 'string';
+    const containerClasses = classnames('MrlSwitch', styles['MrlSwitch'], className, {
+        ['mrl-label']: textOnlyLabel,
+        [styles['MrlLabel']]: textOnlyLabel,
+        ['MrlSwitch-disabled']: disabled,
+        [styles['MrlSwitch-disabled']]: disabled
+    });
+    return (React.createElement("label", { className: containerClasses },
+        label,
+        React.createElement(MrlSwitchStandalone, Object.assign({}, rest, { disabled: disabled, id: inputId, onChange: onChange, selected: selected }))));
+});
+MrlSwitch.displayName = 'MrlSwitch';

package/dist/esm/components/form/switch/MrlSwitch/MrlSwitch.module.css

@@ -0,0 +1,118 @@
+: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--tH-gV:checked ~ .mrl-checkbox-inputDisplay--R6HrC,
+.MrlCheckboxStandalone-input--YsuV7:checked ~ .MrlCheckboxStandalone-inputDisplay--lXlet,
+.mrl-checkbox-input--tH-gV:indeterminate ~ .mrl-checkbox-inputDisplay--R6HrC,
+.MrlCheckboxStandalone-input--YsuV7:indeterminate ~ .MrlCheckboxStandalone-inputDisplay--lXlet {
+  --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)
+  );
+}
+
+.MrlTextInput--x4NU2 {
+  --mrl-text-input-icon-size: var(--mrl-spacing-06);
+  --mrl-text-input-icon-offset: var(--mrl-input-icon-offset);
+}
+
+.MrlLabel--KMOKK {
+  --mrl-label-text-color: var(--mrl-color-text-label);
+  --mrl-label-font-size: var(--mrl-type-size-text-small);
+  --mrl-label-line-height: var(--mrl-type-line-height-text-small);
+  --mrl-label-font-weight: var(--mrl-type-weight-title-secondary);
+  --mrl-label-offset-vertical: var(--mrl-space-stack-related-small);
+}
+
+.MrlLabel--inline--3j0qy {
+  --mrl-label-offset-vertical: 0;
+  --mrl-label-offset-inline: var(--mrl-space-inline-sibling-xsmall);
+  --mrl-label-icon-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-label-icon-size: var(--mrl-spacing-06);
+}
+
+.MrlLabel--KMOKK.mrl-is--disabled--EKp-- {
+  --mrl-label-text-color: var(--mrl-color-text-disabled);
+}
+
+.MrlLabel--KMOKK {
+  color: var(--mrl-label-text-color);
+  display: block;
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-label-font-size);
+  font-weight: var(--mrl-label-font-weight);
+  line-height: var(--mrl-label-line-height);
+  margin-bottom: var(--mrl-label-offset-vertical);
+  padding-left: var(--mrl-text-input-border-width);
+}
+
+.MrlLabel--inline--3j0qy {
+  align-items: center;
+  display: inline-flex;
+  margin-left: var(--mrl-label-offset-inline);
+  padding-left: 0;
+}
+
+.MrlLabel-icon--ucgYF {
+  height: var(--mrl-label-icon-size);
+  margin: var(--mrl-label-icon-inset) calc(var(--mrl-label-icon-inset) + var(--mrl-label-offset-inline)) var(--mrl-label-icon-inset) var(--mrl-label-icon-inset);
+  width: var(--mrl-label-icon-size);
+}
+
+.MrlSwitch--13D1Q {
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0;
+}
+
+.MrlSwitch-disabled--u0UvG {
+  color: rgba(var(--mrl-gray-40), 1);
+}

package/dist/esm/components/form/switch/MrlSwitch/MrlSwitch.module.scss.js

@@ -0,0 +1,14 @@
+import "./MrlSwitch.module.css";
+export default {
+	"mrl-checkbox-input": "mrl-checkbox-input--tH-gV",
+	"mrl-checkbox-inputDisplay": "mrl-checkbox-inputDisplay--R6HrC",
+	"MrlCheckboxStandalone-input": "MrlCheckboxStandalone-input--YsuV7",
+	"MrlCheckboxStandalone-inputDisplay": "MrlCheckboxStandalone-inputDisplay--lXlet",
+	"MrlTextInput": "MrlTextInput--x4NU2",
+	"MrlLabel": "MrlLabel--KMOKK",
+	"MrlLabel--inline": "MrlLabel--inline--3j0qy",
+	"mrl-is--disabled": "mrl-is--disabled--EKp--",
+	"MrlLabel-icon": "MrlLabel-icon--ucgYF",
+	"MrlSwitch": "MrlSwitch--13D1Q",
+	"MrlSwitch-disabled": "MrlSwitch-disabled--u0UvG"
+};

package/dist/esm/components/form/switch/MrlSwitch/index.js

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

package/dist/esm/components/form/switch/MrlSwitchStandalone/MrlSwitchStandalone.js

@@ -0,0 +1,35 @@
+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 { check, minus } from '@muraldevkit/ds-icons';
+import * as React from 'react';
+import classnames from 'classnames';
+import { memo, useState, useEffect } from 'react';
+import { MrlSvg } from '../../../svg/MrlSvg/MrlSvg';
+import styles from './MrlSwitchStandalone.module.scss.js';
+export const MrlSwitchStandalone = memo((_a) => {
+    var { className, id, labelledBy, onChange, selected = false } = _a, rest = __rest(_a, ["className", "id", "labelledBy", "onChange", "selected"]);
+    const [isChecked, setIsChecked] = useState(selected);
+    useEffect(() => {
+        setIsChecked(selected);
+    }, [selected]);
+    const handleChange = (e) => {
+        setIsChecked(e.target.checked);
+        onChange(e);
+    };
+    const containerClasses = classnames(className, 'MrlSwitchStandalone', styles['MrlSwitchStandalone']);
+    return (React.createElement("div", { className: containerClasses },
+        React.createElement("input", Object.assign({}, rest, { "aria-labelledby": labelledBy, "aria-checked": isChecked, className: classnames('MrlSwitchStandalone-checkbox', styles['MrlSwitchStandalone-checkbox']), id: id, onChange: handleChange, type: "checkbox", role: "switch" })),
+        React.createElement("span", { className: classnames('MrlSwitchStandalone-switch', styles['MrlSwitchStandalone-switch']) }),
+        React.createElement("span", { className: classnames('MrlSwitchStandalone-switch-indicator', styles['MrlSwitchStandalone-switch-indicator']) },
+            React.createElement(MrlSvg, { size: "auto", svg: isChecked ? check : minus }))));
+});
+MrlSwitchStandalone.displayName = 'MrlSwitchStandalone';