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

package/dist/cjs/components/form/select/components/MrlSelectMultiValueRemove.js

@@ -0,0 +1,41 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlSelectMultiValueRemove = void 0;
+const React = __importStar(require("react"));
+const react_select_1 = require("react-select");
+const MrlSvg_1 = require("../../../svg/MrlSvg");
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+/**
+ * MrlSelectMultiValueRemove component
+ *
+ * @param props - the react-select multi value remove props
+ * @returns a multi value remove component
+ */
+function MrlSelectMultiValueRemove(props) {
+    return (React.createElement(react_select_1.components.MultiValueRemove, Object.assign({}, props),
+        React.createElement(MrlSvg_1.MrlSvg, { svg: ds_icons_1.close, size: "auto" })));
+}
+exports.MrlSelectMultiValueRemove = MrlSelectMultiValueRemove;

package/dist/cjs/components/form/select/components/MrlSelectOption.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlSelectOption = void 0;
+const React = __importStar(require("react"));
+const react_select_1 = require("react-select");
+const MrlSvg_1 = require("../../../svg/MrlSvg");
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+/**
+ * MrlSelectOption component
+ *
+ * @param props - the react-select option props
+ * @returns a select option
+ */
+function MrlSelectOption(props) {
+    const { isSelected, children } = props;
+    return (React.createElement(react_select_1.components.Option, Object.assign({}, props),
+        children,
+        isSelected && (React.createElement(MrlSvg_1.MrlSvg, { svg: ds_icons_1.check, size: "small", style: {
+                height: 'var(--mrl-spacing-05)',
+                position: 'absolute',
+                right: 'var(--mrl-space-inset)',
+                top: 'var(--mrl-space-inset)',
+                width: 'var(--mrl-spacing-05)'
+            } }))));
+}
+exports.MrlSelectOption = MrlSelectOption;

package/dist/cjs/components/form/select/components/MrlSelectValueContainer.js

@@ -0,0 +1,39 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlSelectValueContainer = void 0;
+const React = __importStar(require("react"));
+const react_select_1 = require("react-select");
+/**
+ * MrlSelectValueContainer component
+ *
+ * @param props - the react-select value container props
+ * @returns a value container component
+ */
+function MrlSelectValueContainer(props) {
+    const dataQa = props.selectProps['data-qa'];
+    return (React.createElement(react_select_1.components.ValueContainer, Object.assign({}, props, { innerProps: Object.assign(Object.assign({}, props.innerProps), (dataQa && { 'data-qa': `${dataQa}-value-container` })) })));
+}
+exports.MrlSelectValueContainer = MrlSelectValueContainer;

package/dist/cjs/components/form/select/components/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlSelectDropdownIndicator"), exports);
+__exportStar(require("./MrlSelectOption"), exports);
+__exportStar(require("./MrlSelectMultiValueRemove"), exports);
+__exportStar(require("./MrlSelectMultiValue"), exports);
+__exportStar(require("./MrlSelectContainer"), exports);
+__exportStar(require("./MrlSelectValueContainer"), exports);
+__exportStar(require("./MrlSelectClearIndicator"), exports);

package/dist/cjs/components/form/select/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MrlSelect"), exports);
+__exportStar(require("./MrlMultiSelect"), exports);
+__exportStar(require("./MrlCreatableSelect"), exports);
+__exportStar(require("./MrlMultiCreatableSelect"), exports);
+__exportStar(require("./components"), exports);
+__exportStar(require("./utils"), exports);

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

@@ -0,0 +1,179 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultStyles = void 0;
+const react_1 = require("@emotion/react");
+/**
+ * MrlSelect styles object for the default kind
+ * @returns a styles object
+ */
+function defaultStyles() {
+    const outlineAnimation = (0, react_1.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;
+        }
+    };
+}
+exports.defaultStyles = defaultStyles;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectStyles = void 0;
+const default_1 = require("./default");
+const inline_1 = require("./inline");
+const inlineNoLabel_1 = require("./inlineNoLabel");
+const inlineStacked_1 = require("./inlineStacked");
+/**
+ * Gets the styles objects for each MrlSelect kind
+ *
+ * @param kind - the select kind
+ * @returns the styles object for react-select
+ */
+function getSelectStyles(kind = 'default') {
+    if (kind === 'inline') {
+        return (0, inline_1.inlineStyles)();
+    }
+    if (kind === 'inline-stacked') {
+        return (0, inlineStacked_1.inlineStackedStyles)();
+    }
+    if (kind === 'inline-no-label') {
+        return (0, inlineNoLabel_1.inlineNoLabelStyles)();
+    }
+    return (0, default_1.defaultStyles)();
+}
+exports.getSelectStyles = getSelectStyles;

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

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inlineStyles = void 0;
+const default_1 = require("./default");
+/**
+ * MrlSelect styles object for the inline kind
+ *
+ * @returns a styles object
+ */
+function inlineStyles() {
+    return Object.assign(Object.assign({}, (0, default_1.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 = (0, default_1.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;
+        } });
+}
+exports.inlineStyles = inlineStyles;

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

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inlineNoLabelStyles = void 0;
+const default_1 = require("./default");
+/**
+ * MrlSelect styles object for the inline-no-label kind
+ *
+ * @returns a styles object
+ */
+function inlineNoLabelStyles() {
+    return Object.assign(Object.assign({}, (0, default_1.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 = (0, default_1.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 });
+        } });
+}
+exports.inlineNoLabelStyles = inlineNoLabelStyles;

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

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.inlineStackedStyles = void 0;
+const default_1 = require("./default");
+const inline_1 = require("./inline");
+/**
+ * MrlSelect styles object for the inline-stacked kind
+ *
+ * @returns a styles object
+ */
+function inlineStackedStyles() {
+    return Object.assign(Object.assign({}, (0, default_1.defaultStyles)()), { control: (baseStyles, state) => {
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            const styles = (0, inline_1.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 });
+        } });
+}
+exports.inlineStackedStyles = inlineStackedStyles;

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

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.closeMenuOnScroll = void 0;
+/**
+ * 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
+ */
+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;
+    };
+}
+exports.closeMenuOnScroll = closeMenuOnScroll;

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./closeMenuOnScroll"), exports);

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

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MrlSwitch = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const MrlSwitchStandalone_1 = require("../MrlSwitchStandalone/MrlSwitchStandalone");
+const utils_1 = require("../../../../utils");
+const MrlSwitch_module_scss_1 = __importDefault(require("./MrlSwitch.module.scss.js"));
+exports.MrlSwitch = (0, react_1.memo)((_a) => {
+    var { className, disabled, id = undefined, label, onChange, selected = false } = _a, rest = __rest(_a, ["className", "disabled", "id", "label", "onChange", "selected"]);
+    const inputId = (0, react_1.useMemo)(() => id || (0, utils_1.getUniqueId)('mrl-toggle-'), [id]);
+    const textOnlyLabel = typeof label === 'string';
+    const containerClasses = (0, classnames_1.default)('MrlSwitch', MrlSwitch_module_scss_1.default['MrlSwitch'], className, {
+        ['mrl-label']: textOnlyLabel,
+        [MrlSwitch_module_scss_1.default['MrlLabel']]: textOnlyLabel,
+        ['MrlSwitch-disabled']: disabled,
+        [MrlSwitch_module_scss_1.default['MrlSwitch-disabled']]: disabled
+    });
+    return (React.createElement("label", { className: containerClasses },
+        label,
+        React.createElement(MrlSwitchStandalone_1.MrlSwitchStandalone, Object.assign({}, rest, { disabled: disabled, id: inputId, onChange: onChange, selected: selected }))));
+});
+exports.MrlSwitch.displayName = 'MrlSwitch';