@muraldevkit/ui-toolkit 4.36.0-dev-o8OA.1 → 4.36.0-dev-X9Pu.1

package/dist/index.js.LICENSE.txt

@@ -1,17 +0,0 @@
-/**
- * @license
- * Lodash <https://lodash.com/>
- * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
-/** @license React v16.13.1
- * react-is.production.min.js
- *
- * Copyright (c) Facebook, Inc. and its affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */

package/dist/src/components/layout/error-page/MrlBrandColors/MrlBrandColors.functions.scss

@@ -1,12 +0,0 @@
-@use 'sass:list';
-@function color-grid($color-counts) {
-	$template-areas: '';
-	@each $color-count in $color-counts {
-		$color: list.nth($color-count, 1);
-		$count: list.nth($color-count, 2);
-		@for $i from 1 through $count {
-			$template-areas: '#{$template-areas} #{$color}';
-		}
-	}
-	@return $template-areas;
-}

package/dist/styles/MrlAvatar/module.scss

@@ -1,97 +0,0 @@
-.MrlAvatar-content {
-	border: var(--mrl-stroke-02) solid transparent;
-	border-radius: var(--mrl-radii-03);
-	display: block;
-	font-size: var(--mrl-font-size-04);
-	font-weight: var(--mrl-font-weight-04);
-	height: 100%;
-	line-height: 2.875rem;
-	max-width: 100%;
-	overflow: hidden;
-	text-align: center;
-	width: 100%;
-	:global(.MrlSvgContainer) {
-		display: block;
-		height: auto;
-		max-width: 100%;
-		width: 100%;
-	}
-}
-.MrlAvatar {
-	border-radius: var(--mrl-radii-03);
-	box-shadow: 0 0 1px 1px rgba(0, 0, 0, 4%) inset;
-	box-sizing: border-box;
-	display: block;
-	height: var(--mrl-spacing-10);
-	position: relative;
-	width: var(--mrl-spacing-10);
-	&--xsmall {
-		height: var(--mrl-spacing-07);
-		width: var(--mrl-spacing-07);
-		.MrlAvatar-content {
-			font-size: var(--mrl-font-size-02);
-			line-height: 1.375rem;
-		}
-	}
-	&--small {
-		height: var(--mrl-spacing-08);
-		width: var(--mrl-spacing-08);
-		.MrlAvatar-content {
-			font-size: var(--mrl-font-size-02);
-			line-height: 1.875rem;
-		}
-	}
-	&--large {
-		border-radius: var(--mrl-radii-06);
-		height: var(--mrl-spacing-13);
-		width: var(--mrl-spacing-13);
-		.MrlAvatar-content {
-			border-radius: var(--mrl-radii-06);
-			font-size: var(--mrl-font-size-07);
-			line-height: 5.875rem;
-		}
-	}
-}
-.MrlAvatar-image {
-	display: block;
-	height: auto;
-	max-width: 100%;
-	width: 100%;
-}
-.MrlAvatar-icon-container {
-	border-radius: 1rem;
-	bottom: -0.1875rem;
-	color: var(--mrl-color-background);
-	position: absolute;
-	.MrlAvatar-icon {
-		display: block;
-		left: 50%;
-		position: absolute;
-		:global(.mrl-svg) {
-			margin: 0;
-		}
-	}
-}
-.MrlAvatar-icon-container--small {
-	height: 1rem;
-	right: -0.1875rem;
-	width: 1rem;
-	.MrlAvatar-icon {
-		height: 1rem;
-		margin-left: -0.3125rem;
-		top: 0;
-		width: 0.625rem;
-	}
-}
-.MrlAvatar-icon-container--xsmall {
-	border-radius: 0.75rem;
-	height: 0.75rem;
-	right: -0.125rem;
-	width: 0.75rem;
-	.MrlAvatar-icon {
-		height: 0.5rem;
-		margin-left: -0.225rem;
-		top: -0.1rem;
-		width: 0.5rem;
-	}
-}

package/dist/styles/MrlAvatarButton/module.scss

@@ -1,41 +0,0 @@
-@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-.MrlAvatarButton {
-	background-color: transparent;
-	border: none;
-	border-radius: var(--mrl-radii-03);
-	margin: 0;
-	outline: none;
-	padding: 0;
-	position: relative;
-	&::after {
-		background-color: rgba(0, 0, 0, 0%);
-		border-radius: var(--mrl-radii-03);
-		content: '';
-		display: block;
-		inset: 0;
-		position: absolute;
-	}
-	&:focus-visible {
-		@include mrl-focus;
-	}
-	&:hover {
-		cursor: pointer;
-		&::after {
-			background-color: rgba(var(--mrl-gray-90), 0.32);
-		}
-	}
-	&:active {
-		&::after {
-			background-color: rgba(var(--mrl-gray-90), 0.64);
-		}
-	}
-	&--large {
-		border-radius: var(--mrl-radii-06);
-		&:focus-visible {
-			@include mrl-focus($element-radius: 'var(--mrl-radii-06)');
-		}
-		&::after {
-			border-radius: var(--mrl-radii-06);
-		}
-	}
-}

package/dist/styles/MrlBadge/module.scss

@@ -1,39 +0,0 @@
-
-.MrlBadge {
-	align-items: center;
-	background-color: var(--mrl-black-opacity-01);
-	border-radius: var(--mrl-radii-04);
-	color: var(--mrl-color-text-emph);
-	display: inline-flex;
-	flex-shrink: 1;
-	font-size: var(--mrl-font-size-02);
-	font-weight: var(--mrl-font-weight-02);
-	height: var(--mrl-spacing-06);
-	padding: var(--mrl-spacing-01) calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-	width: auto;
-	:global(.MrlSvgContainer) {
-		flex-shrink: 0;
-		height: var(--mrl-spacing-04);
-		margin-left: var(--mrl-spacing-02);
-		width: var(--mrl-spacing-04);
-	}
-	&--error {
-		background-color: var(--mrl-color-background-error-light);
-		color: var(--mrl-color-text-error);
-	}
-	&--info {
-		background-color: var(--mrl-color-background-info-light);
-		color: rgb(var(--mrl-status-info));
-	}
-	&--success {
-		background-color: var(--mrl-color-background-success-light);
-		color: rgb(var(--mrl-status-success));
-	}
-	&--warning {
-		background-color: var(--mrl-color-background-warning-light);
-		color: var(--mrl-color-text-warning-light);
-		:global(.MrlSvgContainer) {
-			color: rgb(var(--mrl-status-warning));
-		}
-	}
-}

package/dist/styles/MrlBadgeNotification/module.scss

@@ -1,38 +0,0 @@
-
-.MrlBadgeNotification {
-	align-items: center;
-	background-color: rgb(var(--mrl-gray-90));
-	border: var(--mrl-line-width-border-fine) solid rgb(var(--mrl-white));
-	border-radius: var(--mrl-radii-04);
-	box-sizing: border-box;
-	color: var(--mrl-color-text-inverse);
-	display: inline-flex;
-	flex-shrink: 1;
-	font-size: var(--mrl-font-size-02);
-	font-weight: var(--mrl-font-weight-02);
-	height: var(--mrl-spacing-03);
-	justify-content: center;
-	padding: 0;
-	width: var(--mrl-spacing-03);
-	&--info {
-		background-color: var(--mrl-color-background-info);
-	}
-	&--numeric {
-		font-size: 0.5625rem;
-		height: var(--mrl-spacing-05);
-		padding: 0 var(--mrl-spacing-01);
-		width: var(--mrl-spacing-05);
-	}
-}
-:global(.mrlButton),
-:global(.mrlIconButton) {
-	.MrlBadgeNotification {
-		position: absolute;
-		right: 0;
-		top: 0;
-		&--numeric {
-			right: calc(var(--mrl-spacing-01) * -1);
-			top: calc(var(--mrl-spacing-01) * -1);
-		}
-	}
-}

package/dist/styles/MrlBlockNotification/global.scss

@@ -1,19 +0,0 @@
-
-@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-@use './MrlBlockNotification.mixins.scss' as *;
-.mrl-blockNotification {
-	border-radius: var(--mrl-blockNotification-radius);
-	&.mrl-is--transitioning {
-		@include mrl-block-notification-fade-out;
-	}
-	&.mrl-is--closed {
-		display: none;
-		padding: 0;
-	}
-}
-@media (prefers-reduced-motion: no-preference) {
-	.mrl-blockNotification.mrl-is--transitioning {
-		@include mrl-block-notification-slide-out;
-	}
-}

package/dist/styles/MrlBlockNotification/mixins.scss

@@ -1,20 +0,0 @@
-
-@mixin mrl-block-notification-animate-in() {
-	margin-top: 0;
-	opacity: 1;
-	transition-duration: var(--mrl-duration-03);
-	transition-property: margin opacity;
-	transition-timing-function: var(--mrl-timing-m1);
-}
-@mixin mrl-block-notification-fade-in() {
-	opacity: 0;
-}
-@mixin mrl-block-notification-slide-in() {
-	margin-top: calc(var(--mrl-blockNotification-height));
-}
-@mixin mrl-block-notification-fade-out() {
-	opacity: 0;
-}
-@mixin mrl-block-notification-slide-out() {
-	margin-top: calc(var(--mrl-blockNotification-height) * -1);
-}

package/dist/styles/MrlBlockNotification/module.scss

@@ -1,79 +0,0 @@
-
-@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
-@use './MrlBlockNotification.variables.scss';
-@use './MrlBlockNotification.mixins.scss' as *;
-$mrl-notification-close-inset: var(--mrl-spacing-02);
-.mrl-blockNotification-icon {
-	display: flex;
-	min-width: fit-content;
-	svg {
-		color: var(--mrl-blockNotification-svg-color);
-	}
-}
-.mrl-blockNotification {
-	@include mrl-block-notification-animate-in;
-	align-items: center;
-	background: var(--mrl-blockNotification-background);
-	color: var(--mrl-blockNotification-color);
-	display: flex;
-	flex-direction: row;
-	gap: var(--mrl-blockNotification-inline-spacing);
-	justify-content: center;
-	min-height: var(--mrl-blockNotification-height);
-	padding: var(--mrl-blockNotification-inset-spacing);
-	position: relative;
-	width: 100%;
-	.mrl-blockNotification-close-wrapper {
-		position: absolute;
-		right: $mrl-notification-close-inset;
-		top: 50%;
-		transform: translateY(-50%);
-		svg {
-			color: var(--mrl-blockNotification-color);
-		}
-	}
-	&[data-scope='inline'] {
-		display: inline-flex;
-		justify-content: start;
-		position: relative;
-		width: 100%;
-		.cta {
-			margin: var(--mrl-blockNotification-cta-spacing);
-		}
-		.mrl-blockNotification-icon {
-			align-self: baseline;
-		}
-		.mrl-blockNotification-close-wrapper {
-			position: absolute;
-			top: 20px;
-		}
-	}
-}
-.mrl-blockNotification--dismissible {
-	padding-right: calc(
-		#{$mrl-notification-close-inset} + var(--mrl-blockNotification-inline-spacing) + var(--mrl-spacing-08)
-	);
-	position: relative;
-}
-.mrl-blockNotification-message {
-	align-items: center;
-	max-width: 45rem;
-	h2,
-	p {
-		display: contents;
-	}
-	h2::after {
-		content: '\00a0';
-		display: contents;
-	}
-	p {
-		@include mrl-text-static('small');
-	}
-}
-.mrl-blockNotification-heading {
-	color: var(--mrl-blockNotification-heading-color);
-	display: inline;
-	margin-right: var(--mrl-blockNotification-inline-spacing-message);
-}

package/dist/styles/MrlBlockNotification/variables.scss

@@ -1,66 +0,0 @@
-
-.mrl-blockNotification {
-	--mrl-blockNotification-background: var(--mrl-color-background-info);
-	--mrl-blockNotification-background-general: rgba(var(--mrl-gray-100), 1);
-	--mrl-blockNotification-color: rgba(var(--mrl-gray-10), 1);
-	--mrl-blockNotification-heading-color: var(--mrl-color-text-inverse);
-	--mrl-blockNotification-height: var(--mrl-spacing-09);
-	--mrl-blockNotification-inline-spacing: var(--mrl-spacing-03);
-	--mrl-blockNotification-inline-spacing-message: var(--mrl-spacing-02);
-	--mrl-blockNotification-inset-spacing: var(--mrl-spacing-02) var(--mrl-spacing-07);
-	--mrl-blockNotification-radius: 0;
-	--mrl-blockNotification-svg-color: var(--mrl-color-text-inverse);
-}
-.mrl-blockNotification[data-kind='info'] {
-	--mrl-blockNotification-background: var(--mrl-color-background-info);
-	&[data-scope='inline'] {
-		--mrl-blockNotification-background: var(--mrl-color-background-info-light);
-		--mrl-blockNotification-color: var(--mrl-color-text-info);
-		--mrl-blockNotification-svg-color: var(--mrl-color-text-info);
-		--mrl-blockNotification-heading-color: var(--mrl-color-text-info);
-	}
-}
-.mrl-blockNotification[data-kind='error'] {
-	--mrl-blockNotification-background: var(--mrl-color-background-error);
-	&[data-scope='inline'] {
-		--mrl-blockNotification-background: var(--mrl-color-background-error-light);
-		--mrl-blockNotification-color: var(--mrl-color-text-error);
-		--mrl-blockNotification-svg-color: var(--mrl-color-text-error);
-		--mrl-blockNotification-heading-color: var(--mrl-color-text-error);
-	}
-}
-.mrl-blockNotification[data-kind='success'] {
-	--mrl-blockNotification-background: var(--mrl-color-background-success);
-	&[data-scope='inline'] {
-		--mrl-blockNotification-background: var(--mrl-color-background-success-light);
-		--mrl-blockNotification-color: var(--mrl-color-text-success);
-		--mrl-blockNotification-svg-color: var(--mrl-color-text-success);
-		--mrl-blockNotification-heading-color: var(--mrl-color-text-success);
-	}
-}
-.mrl-blockNotification[data-kind='warning'] {
-	--mrl-blockNotification-background: var(--mrl-color-background-warning);
-	--mrl-blockNotification-color: rgba(var(--mrl-gray-90), 1);
-	--mrl-blockNotification-heading-color: rgba(var(--mrl-black), 1);
-	--mrl-blockNotification-svg-color: rgba(var(--mrl-color-text-warning), 1);
-	&[data-scope='inline'] {
-		--mrl-blockNotification-background: var(--mrl-color-background-warning-light);
-		--mrl-blockNotification-color: var(--mrl-color-text-warning);
-		--mrl-blockNotification-heading-color: var(--mrl-color-text-warning);
-		--mrl-blockNotification-svg-color: rgba(var(--mrl-status-warning), 1);
-	}
-}
-.mrl-blockNotification[data-kind='general'],
-.mrl-blockNotification[data-kind='private'] {
-	--mrl-blockNotification-background: var(--mrl-blockNotification-background-general);
-}
-.mrl-blockNotification[data-scope='inline'] {
-	--mrl-blockNotification-radius: var(--mrl-border-radius-content-large);
-	--mrl-blockNotification-inset-spacing: calc(var(--mrl-spacing-03) + var(--mrl-spacing-01))
-		var(--mrl-spacing-04);
-	--mrl-blockNotification-cta-spacing: calc(
-			calc(var(--mrl-spacing-03) - var(--mrl-spacing-01)) * -1
-		)
-		calc(var(--mrl-spacing-03) * -1) calc(calc(var(--mrl-spacing-03) - var(--mrl-spacing-01)) * -1)
-		0;
-}

package/dist/styles/MrlBrandColors/mixins.scss

@@ -1,9 +0,0 @@
-@use './MrlBrandColors.functions.scss' as functions;
-@mixin pattern-classes($patterns) {
-	@each $pattern-name, $color-counts in $patterns {
-		$grid-template-areas: functions.color-grid($color-counts);
-		.#{$pattern-name} {
-			grid-template-areas: $grid-template-areas;
-		}
-	}
-}

package/dist/styles/MrlBrandColors/module.scss

@@ -1,24 +0,0 @@
-@use '@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
-@use './MrlBrandColors.functions.scss' as *;
-@use './MrlBrandColors.variables.scss' as *;
-@use './MrlBrandColors.mixins.scss' as *;
-@each $name, $color in $colors {
-	.MrlBrandColor-#{$name} {
-		background-color: #{$color};
-		grid-area: #{$name};
-	}
-}
-.MrlBrandColors {
-	display: grid;
-	grid-template-columns: repeat(8, 1fr);
-	grid-template-rows: 1fr;
-	height: 15rem;
-	width: 100%;
-}
-@include pattern-classes($patterns-xs);
-@media (min-width: $mrl-breakpoint-01) {
-	.MrlBrandColors {
-		grid-template-columns: repeat(32, 1fr);
-	}
-	@include pattern-classes($patterns);
-}

package/dist/styles/MrlBrandColors/variables.scss

@@ -1,89 +0,0 @@
-
-$colors: (
-	color-black: #000,
-	color-jade: #00c27a,
-	color-blue: #5887ff,
-	color-pink: #fc83ff,
-	color-red: #ff4b4b,
-	color-yellow: #fa0,
-	color-grape: #be53ff,
-	color-sky: #79c1ff,
-	color-lemon: #ffe146,
-	color-lavander: #e6bfff
-);
-$patterns: (
-	MrlPattern-01: (
-		(color-blue, 2),
-		(color-pink, 12),
-		(color-jade, 1),
-		(color-yellow, 8),
-		(color-red, 6),
-		(color-black, 3)
-	),
-	MrlPattern-02: (
-		(color-blue, 3),
-		(color-black, 3),
-		(color-yellow, 1),
-		(color-red, 9),
-		(color-grape, 10),
-		(color-jade, 6)
-	),
-	MrlPattern-03: (
-		(color-black, 3),
-		(color-lemon, 2),
-		(color-red, 6),
-		(color-pink, 12),
-		(color-jade, 6),
-		(color-sky, 4)
-	),
-	MrlPattern-04: (
-		(color-jade, 2),
-		(color-sky, 6),
-		(color-black, 3),
-		(color-pink, 12),
-		(color-lemon, 7),
-		(color-red, 2)
-	),
-	MrlPattern-05: (
-		(color-lavander, 3),
-		(color-jade, 6),
-		(color-black, 2),
-		(color-yellow, 12),
-		(color-blue, 7),
-		(color-red, 2)
-	),
-	MrlPattern-06: (
-		(color-yellow, 5),
-		(color-lavander, 3),
-		(color-jade, 12),
-		(color-black, 3),
-		(color-red, 1),
-		(color-sky, 8)
-	)
-);
-$patterns-xs: (
-	MrlPattern-01: (
-		(color-blue, 2),
-		(color-pink, 6)
-	),
-	MrlPattern-02: (
-		(color-red, 5),
-		(color-grape, 3)
-	),
-	MrlPattern-03: (
-		(color-pink, 6),
-		(color-jade, 2)
-	),
-	MrlPattern-04: (
-		(color-pink, 5),
-		(color-lemon, 3)
-	),
-	MrlPattern-05: (
-		(color-lavander, 2),
-		(color-jade, 6)
-	),
-	MrlPattern-06: (
-		(color-jade, 6),
-		(color-black, 2)
-	)
-);

package/dist/styles/MrlButton/global.scss

@@ -1,69 +0,0 @@
-
-@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
-@use '../button.global.scss' as *;
-@use '../button.variables.scss' as *;
-.mrlButton {
-	@include mrl-text-interactive('small');
-	@include mrl-button-size;
-	align-items: center;
-	display: inline-flex;
-	min-width: auto;
-	padding: var(--mrl-button-inset-vertical) var(--mrl-button-inset-horizontal);
-	text-align: center;
-	vertical-align: middle;
-	white-space: nowrap;
-	.mrl-tooltip-trigger-content {
-		align-items: center;
-		display: inline-flex;
-	}
-	&.mrlButton--small {
-		@include mrl-text-interactive('xsmall');
-		@include mrl-button-size('small');
-	}
-	&.mrlButton--large {
-		@include mrl-text-interactive;
-		@include mrl-button-size('large');
-	}
-	.MrlSvgContainer,
-	.MrlSpinner-container {
-		margin-right: var(--mrl-button-icon-margin-right);
-		max-width: var(--mrl-button-icon-size);
-		min-width: var(--mrl-button-icon-size);
-	}
-	.mrlButton-spinner-container {
-		margin: 0 auto;
-		position: absolute;
-	}
-}
-.mrlButton--loading .mrlButton-text {
-	opacity: 0;
-}
-.mrlButton--icon-before {
-	padding-left: var(--mrl-spacing-04);
-	&.mrlButton--small {
-		padding-left: var(--mrl-spacing-03);
-	}
-	&.mrlButton--ghost,
-	&.mrlButton--ghost-inverse {
-		padding-left: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-		padding-right: var(--mrl-spacing-03);
-	}
-}
-.mrlButton--icon-after {
-	flex-direction: row-reverse;
-	padding-right: var(--mrl-spacing-04);
-	&.mrlButton--small {
-		padding-right: var(--mrl-spacing-03);
-	}
-	&.mrlButton--ghost,
-	&.mrlButton--ghost-inverse {
-		padding-left: var(--mrl-spacing-03);
-		padding-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));
-	}
-	.MrlSvgContainer,
-	.MrlSpinner-container {
-		margin-left: var(--mrl-button-icon-margin-right);
-		margin-right: 0;
-	}
-}

package/dist/styles/MrlCallout/module.scss

@@ -1,47 +0,0 @@
-@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-.MrlCallout {
-	&--content {
-		max-width: 17.5rem;
-	}
-	&--title {
-		font-size: var(--mrl-font-size-03);
-		margin-bottom: var(--mrl-spacing-02);
-		padding-right: var(--mrl-spacing-06);
-	}
-	&--eyebrow {
-		font-size: var(--mrl-font-size-01);
-		font-weight: var(--mrl-font-weight-04);
-		margin-bottom: var(--mrl-spacing-02);
-		padding-right: var(--mrl-spacing-06);
-	}
-	&--description {
-		p {
-			font-size: var(--mrl-font-size-02);
-			padding-right: var(--mrl-spacing-06);
-		}
-	}
-	&--image {
-		margin-top: var(--mrl-spacing-05);
-		img {
-			height: auto;
-			width: 100%;
-		}
-	}
-	&--footer {
-		display: flex;
-		justify-content: flex-start;
-		margin-top: var(--mrl-spacing-05);
-		:global(.mrlButton:last-child) {
-			margin-left: auto;
-		}
-	}
-	:global(.mrlButton:focus-visible) {
-		@include mrl-focus($is-inverse: 'true');
-	}
-}
-@media screen and (min-resolution: 384dpi) and (max-resolution: 399dpi),
-	(min-resolution: 4dppx) and (max-resolution: 3.99dppx) {
-	.MrlCallout > div:first-child {
-		min-height: 75px;
-	}
-}

package/dist/styles/MrlCheckbox/global.scss

@@ -1,18 +0,0 @@
-
-@use '../../forms.global.scss' as *;
-@use './MrlCheckbox.variables.scss';
-.MrlCheckbox-input:disabled {
-	~ .MrlCheckbox-inputDisplay {
-		--mrl-checkbox-input-border-color: var(--mrl-color-background-disabled);
-	}
-}
-.MrlCheckbox-input:checked:disabled {
-	~ .MrlCheckbox-inputDisplay {
-		--mrl-checkbox-input-background: var(--mrl-color-background-disabled);
-	}
-}
-.MrlCheckbox-input:checked[aria-invalid='true'] {
-	~ .MrlCheckbox-inputDisplay {
-		--mrl-checkbox-input-background: var(--mrl-color-background-error);
-	}
-}