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

package/dist/esm/components/divider/MrlDivider/MrlDivider.js

@@ -0,0 +1,56 @@
+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 classnames from 'classnames';
+import * as React from 'react';
+import { setAttributes } from '../../../utils';
+import { defaults } from '../constants';
+import styles from './MrlDivider.module.scss.js';
+/**
+ * Used to visually and semantically separate two elements.
+ * For visual separation only view this package's mixins
+ *
+ * @param props - component props
+ * @returns a MrlDivider React component.
+ */
+export function MrlDivider(_a) {
+    var { attrs = {}, className = '', kind = defaults.kind, length, orientation = defaults.orientation, spacing = defaults.spacing, weight = defaults.weight } = _a, remainingProps = __rest(_a, ["attrs", "className", "kind", "length", "orientation", "spacing", "weight"]);
+    const hasDefinedLength = typeof length !== 'undefined' && length !== '';
+    delete attrs.class;
+    delete attrs.className;
+    const attributes = setAttributes(attrs);
+    // apply classes in a logic order, not based on alphabetization
+    /* eslint-disable sort-keys */
+    const allClasses = classnames({
+        'mrl-divider': true,
+        [styles.MrlDivider]: true,
+        [styles['MrlDivider--center']]: hasDefinedLength,
+        [styles[`MrlDivider--${kind}`]]: kind !== defaults.kind,
+        // The implementation between the two different orientations is so different so
+        // we want to make sure we are always scoping our CSS instead of overwriting it
+        [styles[`MrlDivider--${orientation}`]]: true,
+        [styles[`MrlDivider--${spacing}`]]: orientation === 'horizontal' ? spacing !== defaults.spacing : spacing === 'none',
+        [styles[`MrlDivider--${weight}`]]: weight !== defaults.weight
+    }, className);
+    /* eslint-enable sort-keys */
+    if (hasDefinedLength) {
+        if (typeof attributes.style === 'undefined') {
+            attributes.style = {};
+        }
+        if (orientation === 'vertical') {
+            attributes.style.height = length;
+        }
+        else {
+            attributes.style.width = length;
+        }
+    }
+    return (React.createElement("div", Object.assign({ role: "separator", "aria-orientation": orientation, "aria-hidden": "true" }, attributes, remainingProps, { className: allClasses })));
+}

package/dist/esm/components/divider/MrlDivider/MrlDivider.module.css

@@ -0,0 +1,59 @@
+:root,
+.MrlDivider--CdLtC {
+  --mrl-divider-size: var(--mrl-spacing-01);
+  --mrl-divider-spacing: var(--mrl-space-stack-section-divider);
+  --mrl-divider-color: var(--mrl-black-opacity-01);
+}
+
+.MrlDivider--none--qnH8s {
+  --mrl-divider-spacing: 0;
+}
+
+.MrlDivider--small--JNypK {
+  --mrl-divider-spacing: var(--mrl-space-stack-section-divider-small);
+}
+
+.MrlDivider--large--djOAy {
+  --mrl-divider-spacing: var(--mrl-space-stack-section-divider-large);
+}
+
+.MrlDivider--xlarge--51-SU {
+  --mrl-divider-spacing: var(--mrl-space-stack-section-divider-xlarge);
+}
+
+.MrlDivider--inverse--Mcvld {
+  --mrl-divider-color: var(--mrl-white-opacity-02);
+}
+
+.MrlDivider--vertical--5d0Uj {
+  --mrl-divider-spacing: var(--mrl-spacing-02);
+}
+.MrlDivider--vertical--5d0Uj.MrlDivider--none--qnH8s {
+  --mrl-divider-spacing: 0;
+}
+
+.MrlDivider--thin--hL-qg {
+  --mrl-divider-size: var(--mrl-line-width-border-fine);
+}
+
+.MrlDivider--horizontal--5YBFD {
+  background-color: var(--mrl-divider-color);
+  display: block;
+  height: var(--mrl-divider-size);
+  margin: var(--mrl-divider-spacing) 0;
+  width: 100%;
+}
+.MrlDivider--horizontal--5YBFD .MrlDivider--center---vsxu {
+  margin: var(--mrl-divider-spacing) auto;
+}
+
+.MrlDivider--vertical--5d0Uj {
+  align-self: stretch;
+  background-color: var(--mrl-divider-color);
+  display: inline-block;
+  margin: 0 var(--mrl-divider-spacing);
+  width: var(--mrl-divider-size);
+}
+.MrlDivider--vertical--5d0Uj .MrlDivider--center---vsxu {
+  align-self: center;
+}

package/dist/esm/components/divider/MrlDivider/MrlDivider.module.scss.js

@@ -0,0 +1,13 @@
+import "./MrlDivider.module.css";
+export default {
+	"MrlDivider": "MrlDivider--CdLtC",
+	"MrlDivider--none": "MrlDivider--none--qnH8s",
+	"MrlDivider--small": "MrlDivider--small--JNypK",
+	"MrlDivider--large": "MrlDivider--large--djOAy",
+	"MrlDivider--xlarge": "MrlDivider--xlarge--51-SU",
+	"MrlDivider--inverse": "MrlDivider--inverse--Mcvld",
+	"MrlDivider--vertical": "MrlDivider--vertical--5d0Uj",
+	"MrlDivider--thin": "MrlDivider--thin--hL-qg",
+	"MrlDivider--horizontal": "MrlDivider--horizontal--5YBFD",
+	"MrlDivider--center": "MrlDivider--center---vsxu"
+};

package/dist/esm/components/divider/MrlDivider/index.js

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

package/dist/esm/components/divider/constants.js

@@ -0,0 +1,16 @@
+export const allowedValues = {
+    kinds: ['default', 'inverse'],
+    orientations: ['horizontal', 'vertical'],
+    spacings: ['none', 'small', 'medium', 'large', 'xlarge'],
+    weight: ['thin', 'default']
+};
+/**
+ * Default values for props on the Divider component;
+ * Shared between the component and Storybook
+ */
+export const defaults = {
+    kind: 'default',
+    orientation: 'horizontal',
+    spacing: 'medium',
+    weight: 'default'
+};

package/dist/esm/components/divider/index.js

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

package/dist/esm/components/empty/MrlEmpty.module.css

@@ -0,0 +1,23 @@
+.mrl-empty--EQ4ks {
+  text-align: center;
+}
+
+.mrl-empty-default--135Q1 {
+  max-width: 200px;
+}
+
+.mrl-empty-large--pUG8V {
+  max-width: 360px;
+}
+
+.mrl-empty-text--R5soL {
+  margin: var(--mrl-spacing-05) 0;
+}
+
+.mrl-empty-text-large--zp2k- {
+  margin: var(--mrl-spacing-06) 0;
+}
+
+.mrl-empty-color-text-secondary--HpLOH {
+  color: var(--mrl-color-text-secondary);
+}

package/dist/esm/components/empty/MrlEmpty.module.scss.js

@@ -0,0 +1,9 @@
+import "./MrlEmpty.module.css";
+export default {
+	"mrl-empty": "mrl-empty--EQ4ks",
+	"mrl-empty-default": "mrl-empty-default--135Q1",
+	"mrl-empty-large": "mrl-empty-large--pUG8V",
+	"mrl-empty-text": "mrl-empty-text--R5soL",
+	"mrl-empty-text-large": "mrl-empty-text-large--zp2k-",
+	"mrl-empty-color-text-secondary": "mrl-empty-color-text-secondary--HpLOH"
+};

package/dist/esm/components/empty/default/MrlEmpty.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import classnames from 'classnames';
+import { MrlCol, MrlGrid, MrlRow } from '../../grid';
+import { MrlText, MrlTextHeading } from '../../text';
+import styles from '../MrlEmpty.module.scss.js';
+/**
+ * MrlEmpty for when there is no data to display for a single component.
+ * @param MrlEmptyProps props
+ * @returns MrlEmpty component
+ */
+export const MrlEmpty = (_a) => {
+    var { graphic, description, action, heading } = _a, rest = __rest(_a, ["graphic", "description", "action", "heading"]);
+    const classNames = classnames(styles['mrl-empty'], styles['mrl-empty-default']);
+    return (React.createElement(MrlGrid, Object.assign({ className: classNames }, rest),
+        graphic && (React.createElement(MrlRow, { align: "center", justify: "center" },
+            React.createElement(MrlCol, { col: 12 }, graphic))),
+        React.createElement(MrlRow, { align: "center", justify: "center", className: styles['mrl-empty-text'] },
+            React.createElement(MrlCol, { col: 12 },
+                React.createElement(MrlTextHeading, { level: "4", hierarchy: "primary", size: "medium", kind: "title" }, heading)),
+            React.createElement(MrlCol, { col: 12 },
+                React.createElement(MrlText, { size: "xsmall", attrs: { className: styles['mrl-empty-color-text-secondary'] } }, description))),
+        action && (React.createElement(MrlRow, { align: "center", justify: "center" },
+            React.createElement(MrlCol, { col: 12 }, action)))));
+};

package/dist/esm/components/empty/default/index.js

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

package/dist/esm/components/empty/index.js

@@ -0,0 +1,2 @@
+export * from './default';
+export * from './large';

package/dist/esm/components/empty/large/MrlEmptyLarge.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import * as React from 'react';
+import { MrlCol, MrlGrid, MrlRow } from '../../grid';
+import { MrlText, MrlTextHeading } from '../../text';
+import styles from '../MrlEmpty.module.scss.js';
+import classnames from 'classnames';
+/**
+ * MrlEmptyLarge for when there is no data to display for an entire page.
+ * @param MrlEmptyProps props
+ * @returns MrlEmptyLarge
+ */
+export const MrlEmptyLarge = (_a) => {
+    var { graphic, heading, description, action } = _a, rest = __rest(_a, ["graphic", "heading", "description", "action"]);
+    const classNames = classnames(styles['mrl-empty'], styles['mrl-empty-large']);
+    return (React.createElement(MrlGrid, Object.assign({ className: classNames }, rest),
+        graphic && (React.createElement(MrlRow, { align: "center", justify: "center" },
+            React.createElement(MrlCol, { col: 12 }, graphic))),
+        React.createElement(MrlRow, { align: "center", justify: "center", className: styles['mrl-empty-text-large'] },
+            React.createElement(MrlCol, { col: 12 },
+                React.createElement(MrlTextHeading, { level: "4", hierarchy: "primary", size: "large", kind: "title" }, heading)),
+            React.createElement(MrlCol, { col: 12 },
+                React.createElement(MrlText, { size: "medium", attrs: { className: styles['mrl-empty-color-text-secondary'] } }, description))),
+        action && (React.createElement(MrlRow, { align: "center", justify: "center" },
+            React.createElement(MrlCol, { col: 12 }, action)))));
+};

package/dist/esm/components/empty/large/index.js

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

package/dist/esm/components/error-boundary/MrlErrorBoundary.js

@@ -0,0 +1,59 @@
+import * as React from 'react';
+/**
+ * When an error occurs during rendering, this component catches the error.
+ * Renders a fallback component for a user friendly msg and calls the log error callback.
+ *
+ * Error boundaries DO NOT catch errors for:
+ * Event handlers
+ * Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
+ * Server side rendering
+ * Errors thrown in the error boundary itself (rather than its children)
+ *
+ * @param ErrorProps
+ * @returns ErrorBoundary component
+ */
+class ErrorBoundary extends React.Component {
+    /**
+     * Error boundry
+     *
+     * @param props fallback and logError
+     */
+    constructor(props) {
+        super(props);
+        this.state = {
+            hasError: false
+        };
+    }
+    /**
+     * componentDidCatch react lifecycle method
+     *
+     * @param error error object
+     * @param errorInfo react.error info
+     */
+    componentDidCatch(error, errorInfo) {
+        var _a, _b;
+        (_b = (_a = this.props).logError) === null || _b === void 0 ? void 0 : _b.call(_a, error, errorInfo);
+    }
+    /**
+     * Renders react node wrapped in error handler.
+     *
+     * @returns React.ReactNode
+     */
+    render() {
+        if (this.state.hasError) {
+            return this.props.fallback;
+        }
+        return this.props.children;
+    }
+}
+/**
+ * Update state so the next render will show the fallback UI.
+ *
+ * @param _error Error
+ * @returns State
+ */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+ErrorBoundary.getDerivedStateFromError = (_error) => {
+    return { hasError: true };
+};
+export const MrlErrorBoundary = ErrorBoundary;

package/dist/esm/components/error-boundary/index.js

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

package/dist/esm/components/filter/MrlFilter/MrlFilter.js

@@ -0,0 +1,28 @@
+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 { MrlFilterContextProvider } from '../MrlFilterContext';
+import classnames from 'classnames';
+import styles from './MrlFilter.module.scss.js';
+import { MrlRovingTabindex } from '../../rovingTabindex';
+/**
+ * MrlFilter component.
+ *
+ * @param props - The component props.
+ * @returns The MrlFilter component.
+ */
+export function MrlFilter(props) {
+    const { children, className, defaultCheckedValue, onFilterChange, orientation, radioGroupLabel, ['data-qa']: dataQa } = props, rest = __rest(props, ["children", "className", "defaultCheckedValue", "onFilterChange", "orientation", "radioGroupLabel", 'data-qa']);
+    return (React.createElement(MrlFilterContextProvider, { defaultCheckedValue: defaultCheckedValue, onFilterChange: onFilterChange },
+        React.createElement(MrlRovingTabindex, { orientation: orientation },
+            React.createElement("div", Object.assign({}, rest, { "data-qa": dataQa, "aria-label": radioGroupLabel, role: "radiogroup", className: classnames(styles['MrlFilter'], 'MrlFilter', className) }), children))));
+}

package/dist/esm/components/filter/MrlFilter/MrlFilter.module.css

@@ -0,0 +1,5 @@
+.MrlFilter--22siM {
+  display: flex;
+  gap: var(--mrl-spacing-02);
+  margin: var(--mrl-spacing-05) 0;
+}

package/dist/esm/components/filter/MrlFilter/MrlFilter.module.scss.js

@@ -0,0 +1,4 @@
+import "./MrlFilter.module.css";
+export default {
+	"MrlFilter": "MrlFilter--22siM"
+};

package/dist/esm/components/filter/MrlFilter/index.js

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

package/dist/esm/components/filter/MrlFilterContext/MrlFilterContext.js

@@ -0,0 +1,54 @@
+import * as React from 'react';
+/**
+ * Context for the MrlFilter component.
+ *
+ * This context provides the state and dispatch function for managing the filter state.
+ * It is used internally by the MrlFilterContextProvider and can be accessed via the useMrlFilterContext hook.
+ */
+const MrlFilterContext = React.createContext(undefined);
+const mrlFilterReducer = (state, action) => {
+    switch (action.type) {
+        case 'SET_CHECKED': {
+            return Object.assign(Object.assign({}, state), { checked: action.payload });
+        }
+        default:
+            return state;
+    }
+};
+/**
+ * MrlFilterContextProvider component.
+ *
+ * @param props - The component props.
+ * @returns The MrlFilterContextProvider component.
+ */
+export function MrlFilterContextProvider(props) {
+    const { children, defaultCheckedValue = '', onFilterChange } = props;
+    const isInitialRenderRef = React.useRef(true);
+    const [state, dispatch] = React.useReducer(mrlFilterReducer, {
+        checked: defaultCheckedValue
+    });
+    React.useEffect(() => {
+        if (isInitialRenderRef.current) {
+            isInitialRenderRef.current = false;
+        }
+        else {
+            onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(state.checked);
+        }
+    }, [state.checked, onFilterChange]);
+    return (React.createElement(MrlFilterContext.Provider, { value: { dispatch, state } }, children));
+}
+/**
+ * Custom hook to use the MrlFilterContext.
+ *
+ * This hook provides access to the MrlFilterContext value.
+ *
+ * @returns The MrlFilterContext value.
+ * @throws Will throw an error if used outside of a MrlFilterContextProvider.
+ */
+export const useMrlFilterContext = () => {
+    const context = React.useContext(MrlFilterContext);
+    if (!context) {
+        throw new Error('useMrlFilterContext must be used within a MrlFilterContextProvider');
+    }
+    return context;
+};

package/dist/esm/components/filter/MrlFilterContext/index.js

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

package/dist/esm/components/filter/MrlFilterItem/MrlFilterItem.js

@@ -0,0 +1,42 @@
+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 styles from './MrlFilterItem.module.scss.js';
+import { getUniqueId } from '../../../utils';
+import { useMrlFilterContext } from '../MrlFilterContext';
+import { MrlBadge } from '../../badge';
+/**
+ * MrlFilterItem component.
+ *
+ * @param props - The component props.
+ * @returns The MrlFilterItem component.
+ */
+export function MrlFilterItem(props) {
+    const { ['data-qa']: dataQa, id, children, className, value, count } = props, rest = __rest(props, ['data-qa', "id", "children", "className", "value", "count"]);
+    const { state, dispatch } = useMrlFilterContext();
+    function handleFilterChange() {
+        dispatch({
+            payload: value,
+            type: 'SET_CHECKED'
+        });
+    }
+    const filterItemIdRef = React.useRef(id || getUniqueId('mrl-filter-item'));
+    const isChecked = state.checked === value;
+    return (
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus, jsx-a11y/click-events-have-key-events
+    React.createElement("span", Object.assign({}, rest, { "data-qa": dataQa, "data-roving": "true", onClick: handleFilterChange, onFocus: handleFilterChange, "aria-checked": isChecked, role: "radio", id: filterItemIdRef.current, className: classnames(styles['MrlFilterItem'], 'MrlFilterItem', {
+            [styles['MrlFilterItem-has-count']]: typeof count !== 'undefined'
+        }, className) }),
+        children,
+        typeof count !== 'undefined' && (React.createElement(MrlBadge, { text: String(count), "aria-label": `, ${count} items` }))));
+}

package/dist/esm/components/filter/MrlFilterItem/MrlFilterItem.module.css

@@ -0,0 +1,158 @@
+/* stylelint-disable scss/operator-no-newline-after */
+.mrl-u-focus-wrapper--88sNj {
+  position: relative;
+}
+
+.MrlFilterItem--yUzim {
+  position: relative;
+  align-items: center;
+  background-color: var(--mrl-color-background-decorative);
+  border-radius: var(--mrl-border-radius-rounded);
+  color: rgba(var(--mrl-gray-100), 1);
+  display: flex;
+  font-family: var(--mrl-body-font);
+  font-size: var(--mrl-font-size-02);
+  font-weight: var(--mrl-font-weight-04);
+  gap: var(--mrl-spacing-02);
+  height: var(--mrl-spacing-08);
+  justify-content: center;
+  line-height: var(--mrl-line-height-06);
+  min-width: 3.5rem;
+  outline-color: transparent;
+  padding: var(--mrl-spacing-03) var(--mrl-spacing-04);
+  text-align: center;
+  transition: outline-color var(--mrl-duration-04) var(--mrl-timing-m2), background-color var(--mrl-duration-04) var(--mrl-timing-m2), color var(--mrl-duration-04) var(--mrl-timing-m2);
+}
+.MrlFilterItem--yUzim:focus-visible {
+  outline: none;
+}
+.MrlFilterItem--yUzim:focus-visible::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) + 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---PQHg;
+}
+@keyframes border-animation---PQHg {
+  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--I8FbR {
+  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--7wBJq {
+  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;
+  }
+}
+.MrlFilterItem--yUzim::after, .MrlFilterItem--yUzim:focus-visible::after {
+  border-radius: var(--mrl-border-radius-rounded);
+}
+.MrlFilterItem--yUzim .MrlBadge {
+  border-radius: var(--mrl-border-radius-rounded);
+  color: rgba(var(--mrl-gray-100), 1);
+  font-size: 0.625rem;
+  font-weight: var(--mrl-font-weight-04);
+  height: var(--mrl-spacing-05);
+  line-height: var(--mrl-line-height-02);
+  padding: var(--mrl-spacing-01) var(--mrl-spacing-02);
+  transition: outline-color var(--mrl-duration-04) var(--mrl-timing-m2), background-color var(--mrl-duration-04) var(--mrl-timing-m2), color var(--mrl-duration-04) var(--mrl-timing-m2);
+}
+.MrlFilterItem--yUzim:hover {
+  background-color: var(--mrl-color-background-highlight-emph-active);
+  cursor: pointer;
+}
+.MrlFilterItem--yUzim[aria-checked=true] {
+  background-color: var(--mrl-color-background-inverse);
+  color: var(--mrl-color-text-inverse-selected);
+}
+.MrlFilterItem--yUzim[aria-checked=true] .MrlBadge {
+  background-color: var(--mrl-color-background);
+  color: rgba(var(--mrl-gray-100), 1);
+}
+
+.MrlFilterItem-has-count--ApmvA {
+  padding-right: var(--mrl-spacing-03);
+}

package/dist/esm/components/filter/MrlFilterItem/MrlFilterItem.module.scss.js

@@ -0,0 +1,9 @@
+import "./MrlFilterItem.module.css";
+export default {
+	"mrl-u-focus-wrapper": "mrl-u-focus-wrapper--88sNj",
+	"MrlFilterItem": "MrlFilterItem--yUzim",
+	"border-animation": "border-animation---PQHg",
+	"MrlFilterItem-has-count": "MrlFilterItem-has-count--ApmvA",
+	"border-animation-inverse": "border-animation-inverse--I8FbR",
+	"outline-animation": "outline-animation--7wBJq"
+};

package/dist/esm/components/filter/MrlFilterItem/index.js

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

package/dist/esm/components/filter/index.js

@@ -0,0 +1,3 @@
+export * from './MrlFilterContext';
+export * from './MrlFilterItem';
+export * from './MrlFilter';