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

package/dist/esm/components/form/legacy-select/MrlLegacySelect/MrlLegacySelect.module.css

@@ -0,0 +1,319 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--N3M5U {
+  position: relative;
+}
+
+: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--mxyTc:checked ~ .mrl-checkbox-inputDisplay--HAb8X,
+.MrlCheckboxStandalone-input--h9013:checked ~ .MrlCheckboxStandalone-inputDisplay--fUhs-,
+.mrl-checkbox-input--mxyTc:indeterminate ~ .mrl-checkbox-inputDisplay--HAb8X,
+.MrlCheckboxStandalone-input--h9013:indeterminate ~ .MrlCheckboxStandalone-inputDisplay--fUhs- {
+  --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)
+  );
+}
+
+.MrlForm-counter---akvk {
+  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%;
+}
+
+.mrl-select--GCrJo {
+  --mrl-select-trigger-indicator-color: var(--mrl-text-input-border-color);
+  --mrl-select-trigger-indicator-color-hover: var(--mrl-text-input-border-color-hover);
+  --mrl-select-trigger-indicator-color-focus: var(--mrl-text-input-border-color-focus);
+}
+
+.mrl-select--GCrJo:focus-within > .mrl-select-trigger--inline--KArrm {
+  --mrl-text-input-border-color-focus: transparent;
+}
+
+.mrl-select--GCrJo {
+  display: block;
+  position: relative;
+}
+
+.mrl-select-trigger--UUVVY {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-small);
+  font-weight: var(--mrl-type-weight-text);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-text-small);
+  background: var(--mrl-text-input-background);
+  border-color: var(--mrl-text-input-border-color);
+  border-radius: var(--mrl-text-input-border-radius);
+  border-style: solid;
+  border-width: var(--mrl-text-input-border-width);
+  color: var(--mrl-text-input-color);
+  margin: 0;
+  min-height: var(--mrl-text-input-height);
+  padding: var(--mrl-text-input-inset-vertical) var(--mrl-text-input-inset-horizontal);
+  transition: background-color var(--mrl-duration-03) var(--mrl-timing-m2), border-color var(--mrl-duration-03) var(--mrl-timing-m2), color var(--mrl-duration-03) var(--mrl-timing-m2), padding-left var(--mrl-duration-03) var(--mrl-timing-m2);
+  width: 100%;
+  align-items: center;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  padding-right: var(--mrl-input-icon-offset);
+  position: relative;
+  width: auto;
+}
+.mrl-select-trigger--UUVVY::placeholder {
+  color: var(--mrl-text-input-placeholder-color);
+}
+.mrl-select-trigger--UUVVY:hover {
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-hover);
+  --mrl-text-input-background: var(--mrl-text-input-background-color-hover);
+}
+.mrl-select-trigger--UUVVY:focus {
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-focus);
+  color: var(--mrl-text-input-color-focus);
+}
+.mrl-select-trigger--UUVVY:focus-visible {
+  outline: none;
+}
+.mrl-select-trigger--UUVVY:disabled {
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-disabled);
+  color: var(--mrl-text-input-color-disabled);
+  pointer-events: none;
+}
+.mrl-select-trigger--UUVVY:disabled::placeholder {
+  color: var(--mrl-text-input-color-disabled);
+}
+.mrl-select-trigger--UUVVY[aria-invalid=true] {
+  border-color: var(--mrl-color-background-error);
+}
+
+.mrl-select--read-only--SmmR6 {
+  pointer-events: none;
+}
+.mrl-select--read-only--SmmR6 .mrl-select-trigger--UUVVY {
+  background-color: var(--mrl-select-background-color-read-only);
+  border-color: var(--mrl-select-border-color-read-only);
+}
+
+.mrl-select--GCrJo:focus-within > .mrl-select-trigger--UUVVY {
+  border-color: var(--mrl-text-input-border-color-focus);
+}
+
+.mrl-select--GCrJo:focus-within > .mrl-select-trigger--UUVVY::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) + var(--mrl-text-input-border-width)) * -1);
+  content: "";
+  display: block;
+  left: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-text-input-border-width)) * -1);
+  position: absolute;
+  right: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-text-input-border-width)) * -1);
+  top: calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-text-input-border-width)) * -1);
+  z-index: 1;
+  animation-name: border-animation--E8hLn;
+}
+@keyframes border-animation--E8hLn {
+  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) + var(--mrl-text-input-border-width)
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-text-input-border-width)
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-text-input-border-width)
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-text-input-border-width)
+					) * -1);
+  }
+}
+@keyframes border-animation-inverse--AktDJ {
+  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) + var(--mrl-text-input-border-width)
+					) * -1);
+    left: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-text-input-border-width)
+					) * -1);
+    right: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-text-input-border-width)
+					) * -1);
+    top: calc((
+						var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + var(--mrl-text-input-border-width)
+					) * -1);
+  }
+}
+
+.mrl-select--GCrJo:focus-visible {
+  outline: none;
+}
+
+.mrl-select-trigger--UUVVY span {
+  display: flex;
+}
+
+.mrl-select-trigger--UUVVY span mrl-svg {
+  flex-basis: fit-content;
+  margin-right: var(--mrl-select-item-icon-spacing);
+  max-width: var(--mrl-select-item-icon-size);
+}
+
+.mrl-select-trigger-indicator--K9Hbd {
+  color: var(--mrl-trigger-indicator-color);
+  margin-left: var(--mrl-input-icon-offset);
+}
+
+.mrl-select-trigger-indicator--K9Hbd.mrl-is--open--HVbzI {
+  transform: rotate(180deg);
+}
+
+.mrl-select--GCrJo:focus-within .mrl-select-trigger-indicator--K9Hbd {
+  color: var(--mrl-trigger-indicator-color-focus);
+}
+
+.mrl-select-trigger--UUVVY:hover .mrl-select-trigger-indicator--K9Hbd {
+  color: var(--mrl-trigger-indicator-color-hover);
+}
+
+.mrl-select-trigger--inline--KArrm {
+  --mrl-text-input-border-color: transparent;
+  --mrl-text-input-border-color-focus: transparent;
+  --mrl-text-input-inset-vertical: var(--mrl-spacing-02);
+  --mrl-text-input-inset-horizontal: var(--mrl-spacing-03);
+  --mrl-text-input-height: var(--mrl-spacing-08);
+  font-weight: var(--mrl-font-weight-04);
+}
+.mrl-select-trigger--inline--KArrm:hover {
+  --mrl-text-input-background-color-hover: var(--mrl-black-opacity-00);
+  --mrl-text-input-border-color: transparent;
+}
+
+.mrl-select-trigger--inline-label--fEQI3 {
+  --mrl-text-input-border-color: transparent;
+  --mrl-text-input-border-color-focus: transparent;
+  --mrl-text-input-inset-vertical: var(--mrl-spacing-02);
+  --mrl-text-input-inset-horizontal: var(--mrl-spacing-03);
+  --mrl-text-input-height: var(--mrl-spacing-08);
+  color: var(--mrl-color-text-secondary);
+}
+.mrl-select-trigger--inline-label--fEQI3:hover {
+  --mrl-text-input-background-color-hover: var(--mrl-black-opacity-00);
+  --mrl-text-input-border-color: transparent;
+}
+
+.mrl-select-trigger--large--2rale {
+  --mrl-text-input-height: var(--mrl-spacing-09);
+}
+
+/* stylelint-disable no-descending-specificity */
+.mrl-select--disabled--pBMeQ .mrl-select-trigger--UUVVY {
+  color: var(--mrl-text-input-color-disabled);
+  pointer-events: none;
+}
+.mrl-select--disabled--pBMeQ .mrl-select-trigger-border--Xz-mq {
+  border-color: var(--mrl-text-input-border-color-disabled);
+}
+.mrl-select--disabled--pBMeQ .mrl-select-trigger-indicator--K9Hbd {
+  color: var(--mrl-text-input-color-disabled);
+  cursor: default;
+  pointer-events: none;
+}

package/dist/esm/components/form/legacy-select/MrlLegacySelect/MrlLegacySelect.module.scss.js

@@ -0,0 +1,21 @@
+import "./MrlLegacySelect.module.css";
+export default {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--N3M5U",
+	"mrl-checkbox-input": "mrl-checkbox-input--mxyTc",
+	"mrl-checkbox-inputDisplay": "mrl-checkbox-inputDisplay--HAb8X",
+	"MrlCheckboxStandalone-input": "MrlCheckboxStandalone-input--h9013",
+	"MrlCheckboxStandalone-inputDisplay": "MrlCheckboxStandalone-inputDisplay--fUhs-",
+	"MrlForm-counter": "MrlForm-counter---akvk",
+	"mrl-select": "mrl-select--GCrJo",
+	"mrl-select-trigger--inline": "mrl-select-trigger--inline--KArrm",
+	"mrl-select-trigger": "mrl-select-trigger--UUVVY",
+	"mrl-select--read-only": "mrl-select--read-only--SmmR6",
+	"border-animation": "border-animation--E8hLn",
+	"mrl-select-trigger-indicator": "mrl-select-trigger-indicator--K9Hbd",
+	"mrl-is--open": "mrl-is--open--HVbzI",
+	"mrl-select-trigger--inline-label": "mrl-select-trigger--inline-label--fEQI3",
+	"mrl-select-trigger--large": "mrl-select-trigger--large--2rale",
+	"mrl-select--disabled": "mrl-select--disabled--pBMeQ",
+	"mrl-select-trigger-border": "mrl-select-trigger-border--Xz-mq",
+	"border-animation-inverse": "border-animation-inverse--AktDJ"
+};

package/dist/esm/components/form/legacy-select/MrlLegacySelect/index.js

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

package/dist/esm/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.js

@@ -0,0 +1,122 @@
+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 { useSelect } from '../context/SelectContext';
+import { setAttributes } from '../../../../utils';
+import { MrlSvg } from '../../../';
+import { check } from '@muraldevkit/ds-icons';
+import styles from './MrlLegacySelectItem.module.scss.js';
+const getChildText = (children) => {
+    let textContent = '';
+    // Iterate through the children, in the event someone passes
+    // multiple HTML and or components into the select item
+    React.Children.forEach(children, (child) => {
+        // concatenate any text content we get if they are strings
+        if (typeof child === 'string') {
+            textContent += child;
+            return;
+        }
+        // but if the child is an HTML element, we need to handle it a bit differently
+        if (React.isValidElement(child) && typeof child.props.children === 'string') {
+            textContent += child.props.children;
+        }
+    });
+    // we also want to remove any whitespace from the beginning or end.
+    return textContent.trim();
+};
+/**
+ * Renders a select component
+ *
+ * @param {MrlLegacySelectItemProptypes} props the props for your MrlLink
+ * @returns {React.ReactElement} an a element containing the text you pass
+ */
+export const MrlLegacySelectItem = (_a) => {
+    var { attrs = {}, children, index, value, isDisabled } = _a, theRest = __rest(_a, ["attrs", "children", "index", "value", "isDisabled"]);
+    const focusRef = React.useRef(null);
+    const { dispatch, state: dispatchState } = useSelect();
+    const disabled = dispatchState.disabled || isDisabled;
+    const childText = getChildText(children);
+    const setSelectedItem = () => {
+        dispatch({ payload: value, type: 'select' });
+        dispatch({ payload: children, type: 'selectedText' });
+        dispatch({ payload: index, type: 'focus' });
+    };
+    const handleClick = (e) => {
+        var _a;
+        setSelectedItem();
+        dispatch({ payload: 'mouse', type: 'close' });
+        (_a = theRest.onClick) === null || _a === void 0 ? void 0 : _a.call(theRest, e);
+    };
+    const handleEnter = (event) => {
+        var _a;
+        const { key } = event;
+        // Selects the item on enter or spacebar and closes the select
+        if (key === 'Enter' || key === ' ') {
+            event.stopPropagation();
+            event.preventDefault();
+            setSelectedItem();
+            dispatch({ payload: 'keyboard', type: 'close' });
+            (_a = theRest.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(theRest, event);
+        }
+    };
+    /**
+     * Sets focus to select item if it's active when the select is opened
+     */
+    React.useEffect(() => {
+        var _a;
+        if (index === dispatchState.focusIndex) {
+            (_a = focusRef === null || focusRef === void 0 ? void 0 : focusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [index, dispatchState, focusRef]);
+    /**
+     * Sets up default state of selectbox based on the value of the select item
+     */
+    React.useEffect(() => {
+        const isSelectedValue = dispatchState.selectedItem === value;
+        const isDefaultValue = dispatchState.defaultValue === value && !dispatchState.selectedItem;
+        const isFirstItem = !dispatchState.defaultValue && !dispatchState.selectedItem && index === 0;
+        if (isSelectedValue || isDefaultValue || isFirstItem) {
+            dispatch({ payload: value, type: 'select' });
+            dispatch({ payload: children, type: 'selectedText' });
+            // sets focus to defaultValue when select is opened
+            if (index)
+                dispatch({ payload: index, type: 'focus' });
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [dispatchState.defaultValue, dispatchState.selectedText, index]);
+    const attributes = setAttributes(attrs, {
+        // Note, the ID of this component if not set by the developer, is
+        // programmatically applied by the mrl-select component
+        'aria-disabled': disabled,
+        'aria-label': childText,
+        'aria-selected': dispatchState.selectedItem === value,
+        'auto-focus': 'true',
+        'data-value': value,
+        role: 'option',
+        tabIndex: '-1'
+    });
+    const allClasses = classnames(attrs.className, theRest.className, 'mrl-selectItem', {
+        [styles['mrl-is--selected']]: dispatchState.selectedItem === value,
+        [styles['mrl-is--focused']]: dispatchState.focusIndex === index,
+        [styles['mrl-is--hidden']]: !dispatchState.open,
+        [styles['mrl-selectItem']]: true
+    });
+    return (
+    // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+    React.createElement("div", Object.assign({}, attributes, theRest, { ref: focusRef, className: allClasses }, (!disabled && { onClick: handleClick }), (!disabled && { onKeyDown: handleEnter })),
+        children,
+        dispatchState.selectedItem === value ? (React.createElement(MrlSvg, { svg: check, className: styles['mrl-selectItem-selectedIcon'], size: "small", attrs: {
+                'aria-hidden': 'true',
+                class: styles['mrl-selectItem-selectedIcon']
+            } })) : ('')));
+};

package/dist/esm/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.module.css

@@ -0,0 +1,148 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--3-aet {
+  position: relative;
+}
+
+.MrlForm-counter--6dL9Y {
+  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--ZW5eH:checked ~ .mrl-checkbox-inputDisplay--EWqw7,
+.MrlCheckboxStandalone-input--Vgntb:checked ~ .MrlCheckboxStandalone-inputDisplay--3RpE1,
+.mrl-checkbox-input--ZW5eH:indeterminate ~ .mrl-checkbox-inputDisplay--EWqw7,
+.MrlCheckboxStandalone-input--Vgntb:indeterminate ~ .MrlCheckboxStandalone-inputDisplay--3RpE1 {
+  --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)
+  );
+}
+
+.mrl-selectItem--ehrx7 {
+  --mrl-select-item-background: var(--mrl-color-background);
+  --mrl-select-item-color: var(--mrl-color-text-highlight);
+  --mrl-select-item-padding: var(--mrl-select-item-padding-vertical)
+  	var(--mrl-select-item-padding-horizontal);
+  --mrl-select-item-padding-horizontal: var(--mrl-spacing-04);
+  --mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-select-item-border-radius: var(--mrl-border-radius-functional);
+  --mrl-select-item-icon-size: var(--mrl-spacing-06);
+  --mrl-select-item-icon-spacing: var(--mrl-spacing-03);
+}
+
+.mrl-selectItem--ehrx7:hover {
+  --mrl-select-item-background: var(--mrl-color-background-highlight-hover);
+  --mrl-select-item-color: var(--mrl-color-text-highlight-hover);
+}
+
+.mrl-is--selected--l-jy5 {
+  --mrl-select-item-background: var(--mrl-color-background-highlight-selected);
+  --mrl-select-item-color: var(--mrl-color-text-highlight-selected);
+}
+
+.mrl-selectItem--ehrx7[aria-disabled=true],
+.mrl-selectItem--ehrx7[aria-disabled=true]:hover {
+  --mrl-select-item-background: transparent;
+  --mrl-select-item-color: var(--mrl-color-text-disabled);
+}
+
+.mrl-select-item--j3k4e {
+  display: block;
+}
+
+.mrl-selectItem--ehrx7 {
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-type-size-text-small);
+  font-weight: var(--mrl-type-weight-title-secondary);
+  letter-spacing: var(--mrl-type-spacing-text);
+  line-height: var(--mrl-type-line-height-text-small);
+  background: var(--mrl-select-item-background);
+  border-radius: var(--mrl-select-item-border-radius);
+  color: var(--mrl-select-item-color);
+  cursor: pointer;
+  display: flex;
+  padding: var(--mrl-select-item-padding-vertical) var(--mrl-select-item-padding-horizontal);
+  position: relative;
+}
+
+.mrl-selectItem-selectedIcon--O0RHy {
+  position: absolute;
+  right: var(--mrl-select-item-icon-spacing);
+  width: var(--mrl-select-item-icon-size);
+}
+
+.mrl-is--selected--l-jy5 {
+  padding-right: calc(var(--mrl-select-item-icon-spacing) + var(var(--mrl-select-item-icon-size)) + var(var(-mrl-select-item-icon-spacing)));
+}
+
+.mrl-is--focused--3eZR8 {
+  outline: 5px auto Highlight;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+
+.mrl-selectItem--ehrx7[aria-disabled=true],
+.mrl-selectItem--ehrx7[aria-disabled=true]:hover {
+  cursor: default;
+}
+
+.mrl-is--hidden--YKHUM {
+  display: none;
+}

package/dist/esm/components/form/legacy-select/MrlLegacySelectItem/MrlLegacySelectItem.module.scss.js

@@ -0,0 +1,15 @@
+import "./MrlLegacySelectItem.module.css";
+export default {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--3-aet",
+	"MrlForm-counter": "MrlForm-counter--6dL9Y",
+	"mrl-checkbox-input": "mrl-checkbox-input--ZW5eH",
+	"mrl-checkbox-inputDisplay": "mrl-checkbox-inputDisplay--EWqw7",
+	"MrlCheckboxStandalone-input": "MrlCheckboxStandalone-input--Vgntb",
+	"MrlCheckboxStandalone-inputDisplay": "MrlCheckboxStandalone-inputDisplay--3RpE1",
+	"mrl-selectItem": "mrl-selectItem--ehrx7",
+	"mrl-is--selected": "mrl-is--selected--l-jy5",
+	"mrl-select-item": "mrl-select-item--j3k4e",
+	"mrl-selectItem-selectedIcon": "mrl-selectItem-selectedIcon--O0RHy",
+	"mrl-is--focused": "mrl-is--focused--3eZR8",
+	"mrl-is--hidden": "mrl-is--hidden--YKHUM"
+};

package/dist/esm/components/form/legacy-select/MrlLegacySelectItem/index.js

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