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

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

@@ -0,0 +1,84 @@
+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 { selectMenuDefaults } from '../../constants';
+import { setAttributes } from '../../../../utils';
+import { useSelect } from '../context/SelectContext';
+import styles from './MrlLegacySelectMenu.module.scss.js';
+import { useCoordinate } from '../../../../hooks';
+/**
+ * Creating and exporting component class for Mural Select Menu
+ * Note, this component doesn't doesn't handle any functionality
+ * For accessibility and keyboard support, all functionality is
+ * controlled by the wrapping mrl-select but we need this component
+ * within our HTML structure for valid aria usage.
+ *
+ * @param {MrlLegacySelectMenuProptypes} props MrlLegacySelectMenuProptypes
+ * @returns {React.ReactElement} returns a MrlLegacySelectMenu
+ */
+export const MrlLegacySelectMenu = (_a) => {
+    var { attrs = {}, children, labelId, position = selectMenuDefaults.position } = _a, theRest = __rest(_a, ["attrs", "children", "labelId", "position"]);
+    const [calcPosition, setCalcPosition] = React.useState(position);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { dispatch, state: dispatchState } = useSelect();
+    const selectRef = React.useRef(null);
+    const coords = useCoordinate(selectRef.current, true, dispatchState.open);
+    /**
+     * Position menu based on coordinates
+     */
+    React.useLayoutEffect(() => {
+        const isInView = coords &&
+            coords.top >= 0 &&
+            coords.left >= 0 &&
+            coords.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            coords.right <= (window.innerWidth || document.documentElement.clientWidth);
+        if (!isInView) {
+            setCalcPosition(position === 'bottom' ? 'top' : 'bottom');
+        }
+        setCalcPosition(position);
+    }, [position, coords, dispatchState.open]);
+    const attributes = setAttributes(attrs, {
+        'aria-activedescendant': !!dispatchState.selectedItem
+    });
+    const allClasses = React.useCallback(() => {
+        return classnames('mrl-selectMenu', attributes.className, theRest.className, {
+            [styles['mrl-selectMenu']]: true,
+            [styles[`mrl-selectMenu--${calcPosition}`]]: true,
+            [styles[`mrl-selectMenu--open`]]: dispatchState.open
+        });
+    }, [calcPosition, dispatchState.open, attributes.className, theRest.className]);
+    const closeSelect = React.useCallback((e) => {
+        if (e.key === 'Escape') {
+            e.stopPropagation();
+            e.preventDefault();
+            dispatch({ payload: 'keyboard', type: 'close' });
+        }
+    }, [dispatch]);
+    React.useEffect(() => {
+        const selectRefCurrent = selectRef.current;
+        if (selectRefCurrent) {
+            selectRefCurrent.addEventListener('keydown', closeSelect);
+        }
+        return () => {
+            if (selectRefCurrent) {
+                selectRefCurrent.removeEventListener('keydown', closeSelect);
+            }
+        };
+    }, [closeSelect, selectRef]);
+    return (React.createElement("div", Object.assign({}, attributes, theRest, { className: allClasses(), ref: selectRef, "aria-labelledby": labelId, id: dispatchState.id, role: "listbox" }), React.Children.map(children, (child, index) => {
+        if (React.isValidElement(child)) {
+            return React.cloneElement(child, { index });
+        }
+        return child;
+    })));
+};

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

@@ -0,0 +1,29 @@
+.mrl-selectMenu--1rmdG {
+  --mrl-select-item-height: 34px;
+}
+
+.mrl-selectMenu--1rmdG {
+  background: var(--mrl-color-background);
+  border-radius: var(--mrl-radii-03);
+  box-shadow: var(--mrl-shadow-01);
+  display: none;
+  left: 0;
+  max-height: calc(var(--mrl-select-item-height) * 6);
+  overflow-y: auto;
+  padding: var(--mrl-spacing-03);
+  position: absolute;
+  right: 0;
+  z-index: 1000;
+}
+
+.mrl-selectMenu--bottom--nx9Kx {
+  top: calc(100% + var(--mrl-spacing-02));
+}
+
+.mrl-selectMenu-bottom--top--FruJU {
+  bottom: calc(100% + var(--mrl-spacing-02));
+}
+
+.mrl-selectMenu--open--X6ygM {
+  display: block;
+}

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

@@ -0,0 +1,7 @@
+import "./MrlLegacySelectMenu.module.css";
+export default {
+	"mrl-selectMenu": "mrl-selectMenu--1rmdG",
+	"mrl-selectMenu--bottom": "mrl-selectMenu--bottom--nx9Kx",
+	"mrl-selectMenu-bottom--top": "mrl-selectMenu-bottom--top--FruJU",
+	"mrl-selectMenu--open": "mrl-selectMenu--open--X6ygM"
+};

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

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

package/dist/esm/components/form/legacy-select/context/SelectContext.js

@@ -0,0 +1,86 @@
+import * as React from 'react';
+const SelectStateContext = React.createContext(undefined);
+function selectReducer(state, action) {
+    switch (action.type) {
+        case 'open': {
+            return Object.assign(Object.assign({}, state), { focus: true, open: true });
+        }
+        case 'close': {
+            return Object.assign(Object.assign({}, state), { actionType: action.payload, focus: false, open: false });
+        }
+        case 'disabled': {
+            return Object.assign(Object.assign({}, state), { disabled: true, focus: false, open: false });
+        }
+        case 'read-only': {
+            return Object.assign(Object.assign({}, state), { disabled: false, focus: false, open: false });
+        }
+        case 'select': {
+            return Object.assign(Object.assign({}, state), { selectedItem: action.payload });
+        }
+        case 'selectedText': {
+            return Object.assign(Object.assign({}, state), { selectedText: action.payload });
+        }
+        case 'default': {
+            return Object.assign(Object.assign({}, state), { disabled: false, focus: false, open: false });
+        }
+        case 'defaultValue': {
+            return Object.assign(Object.assign({}, state), { defaultValue: action.payload });
+        }
+        case 'focus': {
+            return Object.assign(Object.assign({}, state), { focus: true, focusIndex: action.payload });
+        }
+        case 'controlledValue': {
+            return Object.assign(Object.assign({}, state), { controlledValue: action.payload });
+        }
+        default: {
+            throw new Error(`Unhandled action type: ${action}`);
+        }
+    }
+}
+/**
+ * Select provider
+ *
+ * @param {SelectProviderProps} props SelectProvider props
+ * @returns {React.ReactElement} returns a booted select provider.
+ */
+function SelectProvider({ children, hookChange, id, defaultValue, selectState, value }) {
+    const [state, dispatch] = React.useReducer(selectReducer, {
+        controlledValue: value,
+        defaultValue: defaultValue,
+        disabled: selectState === 'disabled',
+        focus: false,
+        focusIndex: 0,
+        id,
+        open: selectState === 'open',
+        readOnly: selectState === 'read-only'
+    });
+    const dispatchWithMiddleware = (action) => {
+        if (action.type === 'select' && state.selectedItem !== action.payload && state.open) {
+            hookChange === null || hookChange === void 0 ? void 0 : hookChange(action.payload);
+        }
+        dispatch(action);
+    };
+    const providedValue = { dispatch: dispatchWithMiddleware, state };
+    React.useEffect(() => {
+        dispatch({ type: selectState || 'default' });
+    }, [selectState]);
+    React.useEffect(() => {
+        if (value) {
+            dispatch({ payload: value, type: 'controlledValue' });
+        }
+    }, [value]);
+    return (React.createElement(SelectStateContext.Provider, { value: providedValue }, children));
+}
+/**
+ * useSelect hook
+ *
+ * @returns returns hook for the select provider.
+ */
+function useSelect() {
+    const context = React.useContext(SelectStateContext);
+    if (context === undefined) {
+        throw new Error('looks like you are using MrlLegacySelect components outside of a MrlLegacySelect. Either wrap the components in a MrlLegacySelect or a SelectProvider');
+    }
+    return context;
+}
+export { SelectProvider, useSelect };

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

@@ -0,0 +1,30 @@
+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 { useRef } from 'react';
+import { MrlLegacySelect as Select } from './MrlLegacySelect';
+import { SelectProvider } from './context/SelectContext';
+import { getUniqueId } from '../../../utils';
+import { selectDefaults } from '../constants';
+/**
+ * Creates and exports component class for Mural Select
+ *
+ * @param {MrlLegacySelectProptypes} props MrlLegacySelectProptypes
+ * @returns {React.ReactElement} returns a MrlLegacySelect wrapped in a select provider.
+ */
+export const MrlLegacySelect = (_a) => {
+    var { hookChange, id, defaultValue, state = selectDefaults.state, children, value } = _a, rest = __rest(_a, ["hookChange", "id", "defaultValue", "state", "children", "value"]);
+    const selectIdRef = useRef(getUniqueId('mrl-select'));
+    const selectId = id || selectIdRef.current;
+    return (React.createElement(SelectProvider, { hookChange: hookChange, id: selectId, defaultValue: defaultValue, selectState: state, value: value },
+        React.createElement(Select, Object.assign({}, rest), children)));
+};

package/dist/esm/components/form/legacy-select/stories.data.js

@@ -0,0 +1,197 @@
+export const countries = [
+    'Afghanistan',
+    'Albania',
+    'Algeria',
+    'Andorra',
+    'Angola',
+    'Antigua and Barbuda',
+    'Argentina',
+    'Armenia',
+    'Australia',
+    'Austria',
+    'Azerbaijan',
+    'Bahamas',
+    'Bahrain',
+    'Bangladesh',
+    'Barbados',
+    'Belarus',
+    'Belgium',
+    'Belize',
+    'Benin',
+    'Bhutan',
+    'Bolivia',
+    'Bosnia and Herzegovina',
+    'Botswana',
+    'Brazil',
+    'Brunei',
+    'Bulgaria',
+    'Burkina Faso',
+    'Burundi',
+    "Côte d'Ivoire",
+    'Cabo Verde',
+    'Cambodia',
+    'Cameroon',
+    'Canada',
+    'Central African Republic',
+    'Chad',
+    'Chile',
+    'China',
+    'Colombia',
+    'Comoros',
+    'Congo (Congo-Brazzaville)',
+    'Costa Rica',
+    'Croatia',
+    'Cuba',
+    'Cyprus',
+    'Czechia (Czech Republic)',
+    'Democratic Republic of the Congo',
+    'Denmark',
+    'Djibouti',
+    'Dominica',
+    'Dominican Republic',
+    'Ecuador',
+    'Egypt',
+    'El Salvador',
+    'Equatorial Guinea',
+    'Eritrea',
+    'Estonia',
+    'Eswatini (fmr. Swaziland)',
+    'Ethiopia',
+    'Fiji',
+    'Finland',
+    'France',
+    'Gabon',
+    'Gambia',
+    'Georgia',
+    'Germany',
+    'Ghana',
+    'Greece',
+    'Grenada',
+    'Guatemala',
+    'Guinea',
+    'Guinea-Bissau',
+    'Guyana',
+    'Haiti',
+    'Holy See',
+    'Honduras',
+    'Hungary',
+    'Iceland',
+    'India',
+    'Indonesia',
+    'Iran',
+    'Iraq',
+    'Ireland',
+    'Israel',
+    'Italy',
+    'Jamaica',
+    'Japan',
+    'Jordan',
+    'Kazakhstan',
+    'Kenya',
+    'Kiribati',
+    'Kuwait',
+    'Kyrgyzstan',
+    'Laos',
+    'Latvia',
+    'Lebanon',
+    'Lesotho',
+    'Liberia',
+    'Libya',
+    'Liechtenstein',
+    'Lithuania',
+    'Luxembourg',
+    'Madagascar',
+    'Malawi',
+    'Malaysia',
+    'Maldives',
+    'Mali',
+    'Malta',
+    'Marshall Islands',
+    'Mauritania',
+    'Mauritius',
+    'Mexico',
+    'Micronesia',
+    'Moldova',
+    'Monaco',
+    'Mongolia',
+    'Montenegro',
+    'Morocco',
+    'Mozambique',
+    'Myanmar (formerly Burma)',
+    'Namibia',
+    'Nauru',
+    'Nepal',
+    'Netherlands',
+    'New Zealand',
+    'Nicaragua',
+    'Niger',
+    'Nigeria',
+    'North Korea',
+    'North Macedonia (formerly Macedonia)',
+    'Norway',
+    'Oman',
+    'Pakistan',
+    'Palau',
+    'Palestine State',
+    'Panama',
+    'Papua New Guinea',
+    'Paraguay',
+    'Peru',
+    'Philippines',
+    'Poland',
+    'Portugal',
+    'Qatar',
+    'Romania',
+    'Russia',
+    'Rwanda',
+    'Saint Kitts and Nevis',
+    'Saint Lucia',
+    'Saint Vincent and the Grenadines',
+    'Samoa',
+    'San Marino',
+    'Sao Tome and Principe',
+    'Saudi Arabia',
+    'Senegal',
+    'Serbia',
+    'Seychelles',
+    'Sierra Leone',
+    'Singapore',
+    'Slovakia',
+    'Slovenia',
+    'Solomon Islands',
+    'Somalia',
+    'South Africa',
+    'South Korea',
+    'South Sudan',
+    'Spain',
+    'Sri Lanka',
+    'Sudan',
+    'Suriname',
+    'Sweden',
+    'Switzerland',
+    'Syria',
+    'Tajikistan',
+    'Tanzania',
+    'Thailand',
+    'Timor-Leste',
+    'Togo',
+    'Tonga',
+    'Trinidad and Tobago',
+    'Tunisia',
+    'Turkey',
+    'Turkmenistan',
+    'Tuvalu',
+    'Uganda',
+    'Ukraine',
+    'United Arab Emirates',
+    'United Kingdom',
+    'United States of America',
+    'Uruguay',
+    'Uzbekistan',
+    'Vanuatu',
+    'Venezuela',
+    'Vietnam',
+    'Yemen',
+    'Zambia',
+    'Zimbabwe'
+];

package/dist/esm/components/form/radio/MrlRadioButton/MrlRadioButton.js

@@ -0,0 +1,34 @@
+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 } from '../../../../utils';
+import { MrlRadioButtonStandalone } from '../../../';
+import { MrlLabelWithDescription } from '../../label/MrlLabelWithDescription';
+import { getDescribedby } from '../../utils';
+import styles from './MrlRadioButton.module.scss.js';
+/**
+ * Form element with an associated text label and description that allows the user to select one
+ * option from a provided list
+ *
+ * @param {MrlRadioButtonProps} props - the component props
+ * @returns an input with type "radio" with an associated label
+ */
+export function MrlRadioButton(_a) {
+    var { className, description, hasMultilineLabel = false, name, value, icon, disabled = false, hasError = false, label, style } = _a, rest = __rest(_a, ["className", "description", "hasMultilineLabel", "name", "value", "icon", "disabled", "hasError", "label", "style"]);
+    const radioButtonIdRef = React.useRef(getUniqueId('mrl-radio-button'));
+    const descriptionId = `${radioButtonIdRef.current}-description`;
+    const allClasses = classnames(className, 'MrlRadioButton', styles['MrlRadioButton']);
+    return (React.createElement("div", { className: allClasses, style: style },
+        React.createElement(MrlRadioButtonStandalone, Object.assign({}, rest, { id: radioButtonIdRef.current, className: allClasses, name: name, value: value, disabled: disabled, hasError: !disabled && hasError }, getDescribedby(rest['aria-describedby'], typeof description === 'string' ? descriptionId : undefined))),
+        React.createElement(MrlLabelWithDescription, { "data-qa": `${rest['data-qa']}-label`, isDisabled: disabled, isSelected: rest.defaultChecked || rest.checked, hasMultilineLabel: hasMultilineLabel, htmlFor: radioButtonIdRef.current, icon: icon, label: label, description: description, descriptionId: descriptionId })));
+}

package/dist/esm/components/form/radio/MrlRadioButton/MrlRadioButton.module.css

@@ -0,0 +1,7 @@
+.MrlRadioButton--Jph1I {
+  align-items: center;
+  display: flex;
+}
+.MrlRadioButton--Jph1I > :first-child {
+  align-self: flex-start;
+}

package/dist/esm/components/form/radio/MrlRadioButton/MrlRadioButton.module.scss.js

@@ -0,0 +1,4 @@
+import "./MrlRadioButton.module.css";
+export default {
+	"MrlRadioButton": "MrlRadioButton--Jph1I"
+};

package/dist/esm/components/form/radio/MrlRadioButton/index.js

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

package/dist/esm/components/form/radio/MrlRadioButtonStandalone/MrlRadioButtonStandalone.global.css

@@ -0,0 +1,122 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper {
+  position: relative;
+}
+
+.MrlRadioButtonStandalone-input {
+  position: relative;
+  position: absolute;
+}
+.MrlRadioButtonStandalone-input:focus-visible + .mrl-u-focus-indicator {
+  outline: none;
+}
+.MrlRadioButtonStandalone-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-rounded) + 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;
+  }
+}
+
+.MrlRadioButtonStandalone-focus-indicator {
+  height: var(--mrl-radio-button-height);
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: auto;
+  width: var(--mrl-radio-button-width);
+}

package/dist/esm/components/form/radio/MrlRadioButtonStandalone/MrlRadioButtonStandalone.js

@@ -0,0 +1,40 @@
+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 } from '../../../../utils';
+import styles from './MrlRadioButtonStandalone.module.scss.js';
+import './MrlRadioButtonStandalone.global.css';
+/**
+ * Input that allows the user to select one options from a provided radio group.
+ * Note, this component does not provide out of the box accessibility for ensuring
+ * an associated label and must be manually setup during adoption.
+ *
+ * @param {MrlRadioButtonStandaloneProps} props - the component props
+ * @returns an input element with type="radio"
+ */
+export function MrlRadioButtonStandalone(_a) {
+    var { className, disabled, hasError, id, name, ref, value } = _a, rest = __rest(_a, ["className", "disabled", "hasError", "id", "name", "ref", "value"]);
+    // Use id if the developer passes in a custom id
+    // but we need to ensure one exists for accessibility
+    const radioIdRef = React.useRef(id || getUniqueId('mrl-radio'));
+    if (!(id || rest['aria-labelledby'])) {
+        console.warn('Warning: MrlRadioButtonStandalone must have either an id or' +
+            ' aria-labelledby attribute for proper accessibility.');
+    }
+    return (React.createElement("span", { className: classnames(styles['MrlRadioButtonStandalone'], 'mrl-u-focus-wrapper') },
+        React.createElement("input", Object.assign({}, rest, { className: classnames('MrlRadioButtonStandalone-input', styles['MrlRadioButtonStandalone-input'], 'MrlRadioButtonStandalone', {
+                [styles.hasError]: hasError
+            }, className), id: radioIdRef.current, ref: ref, name: name, value: value, disabled: disabled, type: "radio" })),
+        React.createElement("span", { className: "mrl-u-focus-indicator MrlRadioButtonStandalone-focus-indicator" }),
+        React.createElement("span", { className: classnames(styles['MrlRadioButtonStandalone-faux-input'], 'MrlRadioButtonStandalone-faux-input') })));
+}