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

package/dist/cjs/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.js

@@ -0,0 +1,84 @@
+"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.MrlCheckboxStandalone = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const utils_1 = require("../../../../utils");
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const constants_1 = require("../../constants");
+const __1 = require("../../../");
+const MrlCheckboxStandalone_module_scss_1 = __importDefault(require("./MrlCheckboxStandalone.module.scss.js"));
+require("./MrlCheckboxStandalone.global.css");
+/**
+ * Input that allows the user to select one or more options from a provided list.
+ * Note, this component does not provide out of the box accessibility for ensuring
+ * an associated label and must be manually setup during adoption.
+ * @param {MrlCheckboxStandaloneProps} props - the component props
+ * @returns a checkbox element
+ */
+function MrlCheckboxStandalone(_a) {
+    var { attrs = {}, state = constants_1.checkboxDefaults.state, selected = constants_1.checkboxDefaults.selected } = _a, rest = __rest(_a, ["attrs", "state", "selected"]);
+    // Use attrs.id if the developer passes in a custom id
+    // but we need to ensure one exists for accessibility
+    const checkboxIdRef = React.useRef(attrs.id || (0, utils_1.getUniqueId)('mrl-checkbox'));
+    const inputRef = React.useRef(null);
+    if (!(attrs.id || attrs['aria-labelledby'])) {
+        console.warn('Warning: Mural Standalone Checkboxes must have either an id or' +
+            ' aria-labelledby attribute for proper accessibility.');
+    }
+    // We need to use the ref to set indetermiant attr
+    // due to not being an intrinsic HTML attr
+    React.useEffect(() => {
+        const indeterminate = selected === 'indeterminate';
+        if (inputRef.current) {
+            inputRef.current.indeterminate = indeterminate;
+        }
+    }, [selected]);
+    delete attrs.class;
+    delete attrs.className;
+    const attributes = (0, utils_1.setAttributes)(attrs);
+    return (React.createElement("div", { className: (0, classnames_1.default)(MrlCheckboxStandalone_module_scss_1.default['MrlCheckboxStandalone'], 'MrlCheckboxStandalone') },
+        React.createElement("span", { className: "mrl-u-focus-wrapper" },
+            React.createElement("input", Object.assign({}, rest, attributes, { "aria-invalid": state === 'error', checked: selected === 'checked', disabled: state === 'disabled', id: checkboxIdRef.current, ref: inputRef, type: "checkbox", className: (0, classnames_1.default)(MrlCheckboxStandalone_module_scss_1.default['MrlCheckboxStandalone-input'], 'MrlCheckboxStandalone-input') })),
+            React.createElement("span", { className: "mrl-u-focus-indicator" }),
+            React.createElement("span", { className: (0, classnames_1.default)(MrlCheckboxStandalone_module_scss_1.default['MrlCheckboxStandalone-inputDisplay'], 'MrlCheckboxStandalone-inputDisplay') },
+                React.createElement(__1.MrlSvg, { svg: selected !== 'indeterminate' ? ds_icons_1.check : ds_icons_1.minus, size: "auto", className: MrlCheckboxStandalone_module_scss_1.default['MrlCheckboxStandalone-inputDisplay-icon'] })))));
+}
+exports.MrlCheckboxStandalone = MrlCheckboxStandalone;

package/dist/cjs/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.module.css

@@ -0,0 +1,148 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--ix8Iv {
+  position: relative;
+}
+
+.MrlForm-counter--vGLl9 {
+  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--5FkKb:checked ~ .mrl-checkbox-inputDisplay--vLdgG,
+.MrlCheckboxStandalone-input--RovqT:checked ~ .MrlCheckboxStandalone-inputDisplay--kj7hF,
+.mrl-checkbox-input--5FkKb:indeterminate ~ .mrl-checkbox-inputDisplay--vLdgG,
+.MrlCheckboxStandalone-input--RovqT:indeterminate ~ .MrlCheckboxStandalone-inputDisplay--kj7hF {
+  --mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);
+  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1);
+}
+
+:host {
+  --mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
+  --mrl-select-item-spacing-stack: var(--mrl-spacing-02);
+  --mrl-select-item-text-affordance: calc(
+  	var(--mrl-type-line-height-text-small) * var(--mrl-type-size-text-small)
+  );
+}
+
+.MrlCheckboxStandalone-input--RovqT[aria-invalid=true] ~ .MrlCheckboxStandalone-inputDisplay--kj7hF {
+  --mrl-checkbox-input-border-color: var(--mrl-color-background-error);
+}
+
+.MrlCheckboxStandalone-input--RovqT:checked[aria-invalid=true] ~ .MrlCheckboxStandalone-inputDisplay--kj7hF {
+  --mrl-checkbox-input-border-color: var(--mrl-color-background-error);
+  --mrl-checkbox-input-background: var(--mrl-color-background-error);
+}
+
+/* stylelint-disable no-descending-specificity */
+.MrlCheckboxStandalone-input--RovqT:disabled ~ .MrlCheckboxStandalone-inputDisplay--kj7hF {
+  --mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
+}
+
+.MrlCheckboxStandalone-input--RovqT:checked:disabled ~ .MrlCheckboxStandalone-inputDisplay--kj7hF {
+  --mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
+  --mrl-checkbox-input-background: var(--mrl-color-background-disabled);
+}
+
+/* stylelint-enable no-descending-specificity */
+.MrlCheckboxStandalone--fMYY5:hover {
+  --mrl-checkbox-input-border-color: rgba(var(--mrl-gray-90), 1);
+}
+
+.MrlCheckboxStandalone--fMYY5 {
+  height: var(--mrl-checkbox-input-affordance);
+  padding: var(--mrl-checkbox-input-inset) var(--mrl-checkbox-input-inset) var(--mrl-checkbox-input-inset) var(--mrl-spacing-01);
+  width: var(--mrl-checkbox-input-affordance);
+  align-items: center;
+  display: flex;
+  min-height: var(--mrl-checkbox-height);
+  position: relative;
+}
+
+.MrlCheckboxStandalone-inputDisplay--kj7hF {
+  background: var(--mrl-checkbox-input-background);
+  border-color: var(--mrl-checkbox-input-border-color);
+  border-radius: var(--mrl-checkbox-input-border-radius);
+  border-style: solid;
+  border-width: var(--mrl-checkbox-input-border-width);
+  color: var(--mrl-checkbox-input-color);
+  display: flex;
+  height: var(--mrl-checkbox-input-size);
+  width: var(--mrl-checkbox-input-size);
+  z-index: 1;
+}
+
+.MrlCheckboxStandalone-inputDisplay-icon--v4zgX {
+  display: none;
+}
+
+.MrlCheckboxStandalone-input--RovqT {
+  cursor: pointer;
+  height: var(--mrl-checkbox-input-size);
+  margin: 0;
+  opacity: 0;
+  width: var(--mrl-checkbox-input-size);
+  z-index: 2;
+}
+.MrlCheckboxStandalone-input--RovqT:checked ~ .MrlCheckboxStandalone-inputDisplay--kj7hF .MrlCheckboxStandalone-inputDisplay-icon--v4zgX {
+  display: block;
+}
+.MrlCheckboxStandalone-input--RovqT:indeterminate ~ .MrlCheckboxStandalone-inputDisplay--kj7hF .MrlCheckboxStandalone-inputDisplay-icon--v4zgX {
+  display: block;
+}
+
+.MrlCheckboxStandalone--fMYY5 .MrlCheckboxStandalone-input--RovqT {
+  left: 0;
+  position: absolute;
+}

package/dist/cjs/components/form/checkbox/MrlCheckboxStandalone/MrlCheckboxStandalone.module.scss.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlCheckboxStandalone.module.css");
+exports.default = {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--ix8Iv",
+	"MrlForm-counter": "MrlForm-counter--vGLl9",
+	"mrl-checkbox-input": "mrl-checkbox-input--5FkKb",
+	"mrl-checkbox-inputDisplay": "mrl-checkbox-inputDisplay--vLdgG",
+	"MrlCheckboxStandalone-input": "MrlCheckboxStandalone-input--RovqT",
+	"MrlCheckboxStandalone-inputDisplay": "MrlCheckboxStandalone-inputDisplay--kj7hF",
+	"MrlCheckboxStandalone": "MrlCheckboxStandalone--fMYY5",
+	"MrlCheckboxStandalone-inputDisplay-icon": "MrlCheckboxStandalone-inputDisplay-icon--v4zgX"
+};

package/dist/cjs/components/form/checkbox/MrlCheckboxStandalone/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("./MrlCheckboxStandalone"), exports);

package/dist/cjs/components/form/constants.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textareaDefaults = exports.fieldsetDefault = exports.labelDefaults = exports.allowedLabelValues = exports.selectDefaults = exports.allowedSelectValues = exports.selectMenuDefaults = exports.allowedSelectMenuValues = exports.selectItemDefaults = exports.allowedSelectItemValues = exports.checkboxDefaults = exports.allowedCheckboxValues = void 0;
+/*
+ * Checkbox component
+ * ------------------------------------------------------------------
+ */
+exports.allowedCheckboxValues = {
+    selected: ['default', 'checked', 'indeterminate'],
+    states: [
+        'default',
+        'disabled',
+        'error',
+        'read-only'
+    ]
+};
+exports.checkboxDefaults = {
+    selected: 'default',
+    state: 'default'
+};
+/*
+ * Select component
+ * ------------------------------------------------------------------
+ */
+exports.allowedSelectItemValues = {
+    states: ['default', 'disabled', 'selected']
+};
+exports.selectItemDefaults = {
+    state: 'default'
+};
+exports.allowedSelectMenuValues = {
+    positions: ['bottom', 'top']
+};
+exports.selectMenuDefaults = {
+    position: 'bottom'
+};
+// Selects are an extension of the shared "allowedValues" object but
+// TypeScript won't let me combine the two objects.
+exports.allowedSelectValues = {
+    states: [
+        'default',
+        'disabled',
+        'open',
+        'read-only'
+    ]
+};
+exports.selectDefaults = {
+    kind: 'default',
+    size: 'default',
+    state: 'default'
+};
+/*
+ * Label component
+ * ------------------------------------------------------------------
+ */
+exports.allowedLabelValues = {
+    kinds: ['block', 'inline'],
+    states: ['default', 'disabled']
+};
+exports.labelDefaults = {
+    kind: 'block',
+    state: 'default'
+};
+/**
+ * Default values for props on the Fieldset component;
+ * Shared between the component and Storybook
+ */
+exports.fieldsetDefault = {
+    label: "fieldset's legend label"
+};
+/**
+ * Default values for props on the Fieldset component which is used to group Textarea components;
+ * Shared between the component and Storybook
+ */
+exports.textareaDefaults = {
+    disabled: false,
+    label: 'Legend'
+};

package/dist/cjs/components/form/date-picker/MrlDatePicker.js

@@ -0,0 +1,105 @@
+"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.MrlDatePicker = void 0;
+const React = __importStar(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const ds_icons_1 = require("@muraldevkit/ds-icons");
+const useActiveColor_1 = require("../hooks/useActiveColor");
+const MrlSvg_1 = require("../../svg/MrlSvg");
+const MrlDatePicker_module_scss_1 = __importDefault(require("./MrlDatePicker.module.scss.js"));
+/**
+ * Allows the user to input a date
+ *
+ * @param {MrlDatePickerProps} props - the component props
+ * @param {HTMLInputElement} ref - a ref to the input element in the DOM
+ * @returns a date input element
+ */
+exports.MrlDatePicker = React.forwardRef(function MrlDatePicker(props, ref) {
+    const { autofocus = false, className, inputId, kind = 'default', onBlur, onFocus, onMouseEnter, onMouseLeave, state, value, ['data-qa']: qa } = props, rest = __rest(props, ["autofocus", "className", "inputId", "kind", "onBlur", "onFocus", "onMouseEnter", "onMouseLeave", "state", "value", 'data-qa']);
+    const dateInputRef = React.useRef(null);
+    const { hasActiveColor, setHasActiveColor } = (0, useActiveColor_1.useActiveColor)(state);
+    React.useImperativeHandle(ref, () => dateInputRef.current);
+    const handleOnBlur = React.useCallback((e) => {
+        if (typeof onBlur !== 'undefined') {
+            onBlur(e);
+        }
+        setHasActiveColor(false);
+    }, [setHasActiveColor, onBlur]);
+    const handleOnFocus = React.useCallback((e) => {
+        if (typeof onFocus === 'function') {
+            onFocus(e);
+        }
+        setHasActiveColor(true);
+    }, [setHasActiveColor, onFocus]);
+    const handleOnMouseEnter = React.useCallback((e) => {
+        if (typeof onMouseEnter === 'function') {
+            onMouseEnter(e);
+        }
+        setHasActiveColor(true);
+    }, [setHasActiveColor, onMouseEnter]);
+    const handleOnMouseLeave = React.useCallback((e) => {
+        if (typeof onMouseLeave === 'function') {
+            onMouseLeave(e);
+        }
+        setHasActiveColor(false);
+    }, [setHasActiveColor, onMouseLeave]);
+    const showPicker = React.useCallback(() => {
+        if (dateInputRef.current && typeof dateInputRef.current.showPicker === 'function') {
+            dateInputRef.current.showPicker();
+        }
+    }, []);
+    React.useEffect(() => {
+        if (dateInputRef.current && autofocus) {
+            dateInputRef.current.focus();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const inputClasses = (0, classnames_1.default)('MrlDatePicker', MrlDatePicker_module_scss_1.default['MrlDatePicker'], {
+        [MrlDatePicker_module_scss_1.default['MrlDatePicker--borderless']]: kind === 'borderless',
+        [MrlDatePicker_module_scss_1.default['MrlDatePicker--active']]: hasActiveColor
+    }, className);
+    const iconClasses = (0, classnames_1.default)('MrlDatePicker--icon', MrlDatePicker_module_scss_1.default['MrlDatePicker--icon'], {
+        [MrlDatePicker_module_scss_1.default['MrlDatePicker--icon-active']]: hasActiveColor
+    });
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { className: (0, classnames_1.default)('MrlDatePicker--container', MrlDatePicker_module_scss_1.default['MrlDatePicker--container']) },
+            React.createElement("input", Object.assign({ type: "date" }, rest, { "data-qa": qa, "aria-invalid": state === 'error', className: inputClasses, disabled: state === 'disabled', onBlur: handleOnBlur, onClick: showPicker, onFocus: handleOnFocus, onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave, id: inputId, readOnly: state === 'read-only', ref: dateInputRef, value: value })),
+            React.createElement(MrlSvg_1.MrlSvg, { "aria-hidden": "true", className: iconClasses, svg: ds_icons_1.calendar, size: "small" }))));
+});

package/dist/cjs/components/form/date-picker/MrlDatePicker.module.css

@@ -0,0 +1,185 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--4HNAM {
+  position: relative;
+}
+
+.MrlForm-counter---QaWk {
+  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--lRHEu:checked ~ .mrl-checkbox-inputDisplay--dGjS3,
+.MrlCheckboxStandalone-input--TCjhO:checked ~ .MrlCheckboxStandalone-inputDisplay--gvbtL,
+.mrl-checkbox-input--lRHEu:indeterminate ~ .mrl-checkbox-inputDisplay--dGjS3,
+.MrlCheckboxStandalone-input--TCjhO:indeterminate ~ .MrlCheckboxStandalone-inputDisplay--gvbtL {
+  --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)
+  );
+}
+
+.MrlDatePicker--dx0vl {
+  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%;
+  height: var(--mrl-spacing-09);
+}
+.MrlDatePicker--dx0vl::placeholder {
+  color: var(--mrl-text-input-placeholder-color);
+}
+.MrlDatePicker--dx0vl:hover {
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-hover);
+  --mrl-text-input-background: var(--mrl-text-input-background-color-hover);
+}
+.MrlDatePicker--dx0vl:focus {
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-focus);
+  color: var(--mrl-text-input-color-focus);
+}
+.MrlDatePicker--dx0vl:focus-visible {
+  outline: none;
+}
+.MrlDatePicker--dx0vl:disabled {
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-disabled);
+  color: var(--mrl-text-input-color-disabled);
+  pointer-events: none;
+}
+.MrlDatePicker--dx0vl:disabled::placeholder {
+  color: var(--mrl-text-input-color-disabled);
+}
+.MrlDatePicker--dx0vl[aria-invalid=true] {
+  border-color: var(--mrl-color-background-error);
+}
+.MrlDatePicker--dx0vl:not(:disabled):read-only {
+  --mrl-text-input-background: var(--mrl-text-input-background-color-read-only);
+  --mrl-text-input-border-color: var(--mrl-text-input-border-color-read-only);
+  color: var(--mrl-text-input-color-read-only);
+}
+.MrlDatePicker--dx0vl:focus-visible {
+  animation-duration: var(--mrl-duration-03);
+  animation-fill-mode: forwards;
+  animation-iteration-count: 1;
+  animation-name: outline-animation--AzDy6;
+  animation-timing-function: var(--mrl-timing-m3);
+}
+@keyframes outline-animation--AzDy6 {
+  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;
+  }
+}
+.MrlDatePicker--dx0vl[type=date]::-webkit-calendar-picker-indicator {
+  opacity: 0;
+}
+
+.MrlDatePicker--borderless--ah-Bg {
+  background-color: var(--mrl-color-background-input);
+  border-color: transparent;
+  padding-left: 0;
+}
+.MrlDatePicker--borderless--ah-Bg.MrlDatePicker--active--c2fZ2 {
+  border-color: transparent;
+}
+
+.MrlDatePicker--container--DgZ8P {
+  position: relative;
+}
+.MrlDatePicker--container--DgZ8P:focus-within .MrlDatePicker--borderless--ah-Bg:not(:read-only, :disabled), .MrlDatePicker--container--DgZ8P:active .MrlDatePicker--borderless--ah-Bg:not(:read-only, :disabled), .MrlDatePicker--container--DgZ8P:hover .MrlDatePicker--borderless--ah-Bg:not(:read-only, :disabled) {
+  background-color: var(--mrl-black-opacity-01);
+  padding-left: var(--mrl-space-inset-control-small);
+}
+
+.MrlDatePicker--active--c2fZ2 {
+  border-color: var(--mrl-text-input-border-color-hover);
+}
+
+.MrlDatePicker--icon--UXuDu {
+  color: var(--mrl-text-input-border-color);
+  display: flex;
+  pointer-events: none;
+  position: absolute;
+  right: var(--mrl-spacing-03);
+  top: var(--mrl-spacing-03);
+}
+
+.MrlDatePicker--icon-active--6UlB7 {
+  color: var(--mrl-text-input-border-color-hover);
+}

package/dist/cjs/components/form/date-picker/MrlDatePicker.module.scss.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./MrlDatePicker.module.css");
+exports.default = {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--4HNAM",
+	"MrlForm-counter": "MrlForm-counter---QaWk",
+	"mrl-checkbox-input": "mrl-checkbox-input--lRHEu",
+	"mrl-checkbox-inputDisplay": "mrl-checkbox-inputDisplay--dGjS3",
+	"MrlCheckboxStandalone-input": "MrlCheckboxStandalone-input--TCjhO",
+	"MrlCheckboxStandalone-inputDisplay": "MrlCheckboxStandalone-inputDisplay--gvbtL",
+	"MrlDatePicker": "MrlDatePicker--dx0vl",
+	"outline-animation": "outline-animation--AzDy6",
+	"MrlDatePicker--borderless": "MrlDatePicker--borderless--ah-Bg",
+	"MrlDatePicker--active": "MrlDatePicker--active--c2fZ2",
+	"MrlDatePicker--container": "MrlDatePicker--container--DgZ8P",
+	"MrlDatePicker--icon": "MrlDatePicker--icon--UXuDu",
+	"MrlDatePicker--icon-active": "MrlDatePicker--icon-active--6UlB7"
+};

package/dist/cjs/components/form/date-picker/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("./MrlDatePicker"), exports);