@muraldevkit/ui-toolkit 4.45.2-dev-jOrv.1 → 4.46.0-dev-YZUx.1

package/dist/styles/MrlModalContent/module.scss

@@ -0,0 +1,19 @@
+@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+.mrl-modal-content {
+	@include mrl-focus($style: 'outline');
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	overflow-y: auto;
+	padding: var(--mrl-modal-padding-vertical-content) var(--mrl-modal-padding-horizontal);
+	:global(.mrl-native-modal) &,
+	:global(.mrl-display-modal) & {
+		margin-top: var(--mrl-spacing-03);
+		padding-bottom: var(--mrl-spacing-09);
+		@media screen and (min-width: $mrl-breakpoint-01) {
+			margin-bottom: var(--mrl-spacing-05);
+			padding-bottom: 0;
+		}
+	}
+}

package/dist/styles/MrlModalFooter/global.scss

@@ -0,0 +1,16 @@
+.mrl-modal-footer {
+	.mrlButton,
+	.modal-tertiary,
+	button {
+		align-self: flex-start;
+	}
+	.modal-secondary,
+	.modal-primary,
+	.mrlButton--primary,
+	.mrlButton--secondary {
+		margin-left: auto;
+	}
+	.mrlButton--primary {
+		margin: 0;
+	}
+}

package/dist/styles/MrlModalFooter/module.scss

@@ -0,0 +1,41 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/global-variables/breakpoints' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
+@use '../../../styles/shared/box-shadow/scrollShadow.scss' as *;
+@use './MrlModalFooter.variables.scss';
+.mrl-modal-footer {
+	display: flex;
+	flex-direction: row;
+	gap: var(--mrl-modal-footer-inline-margin);
+	padding: var(--mrl-modal-padding-vertical-footer) var(--mrl-modal-padding-horizontal);
+	transition: box-shadow var(--mrl-duration-04) var(--mrl-timing-m2);
+}
+.mrl-modal-footer-wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: var(--mrl-modal-footer-inline-margin);
+	width: 100%;
+}
+.slotted :global(.mrlButton) {
+	display: block;
+	width: 100%;
+}
+@media screen and (min-width: $mrl-breakpoint-01) {
+	.mrl-modal-footer {
+		flex-direction: row;
+		justify-content: space-between;
+	}
+	.mrl-modal-footer-wrapper {
+		flex-direction: row;
+		justify-content: right;
+	}
+	.mrl-modal-footer-wrapper .slotted {
+		display: inline-flex;
+		width: auto;
+	}
+}
+.mrl-modal-scroll-shadow-bottom {
+	@include scrollShadowBottom;
+	border-bottom-left-radius: var(--mrl-modal-border-radius);
+	border-bottom-right-radius: var(--mrl-modal-border-radius);
+}

package/dist/styles/MrlModalFooter/variables.scss

@@ -0,0 +1,5 @@
+
+@use '../modal.variables.scss';
+.mrl-modal-footer {
+	--mrl-modal-footer-inline-margin: var(--mrl-spacing-03);
+}

package/dist/styles/MrlModalHeader/module.scss

@@ -0,0 +1,21 @@
+
+@use '../../../styles/shared/box-shadow/scrollShadow.scss' as *;
+@use '../modal.variables.scss' as *;
+.mrl-modal-header {
+	color: var(--mrl-modal-header-text-color);
+	display: flex;
+	min-height: calc(
+		var(--mrl-type-size-headline-large) * var(--mrl-type-line-height-headline-large)
+	);
+	padding: var(--mrl-modal-padding-vertical-top)
+		calc(
+			#{$mrl-modal-close-size} + var(--mrl-modal-close-offset) + var(--mrl-modal-close-inline-margin)
+		)
+		var(--mrl-modal-padding-vertical-bottom) var(--mrl-modal-padding-horizontal);
+	transition: box-shadow var(--mrl-duration-04) var(--mrl-timing-m2);
+}
+.mrl-modal-scroll-shadow-top {
+	@include scrollShadowTop;
+	border-top-left-radius: var(--mrl-modal-border-radius);
+	border-top-right-radius: var(--mrl-modal-border-radius);
+}

package/dist/styles/MrlPage/module.scss

@@ -0,0 +1,13 @@
+
+@import '../layout.variables';
+.MrlPage {
+	background: var(--mrl-color-background-page);
+	display: flex;
+	flex-wrap: wrap;
+	padding-left: var(--mrl-spacing-05);
+	padding-right: var(--mrl-spacing-05);
+	position: relative;
+	&--no-topbar {
+		padding-top: var(--mrl-spacing-05);
+	}
+}

package/dist/styles/MrlPagination/module.scss

@@ -0,0 +1,29 @@
+.MrlPagination {
+	display: block;
+}
+.MrlPaginationList {
+	align-items: center;
+	display: flex;
+	margin: 0;
+	padding: 0;
+}
+.MrlPaginationItem {
+	height: var(--mrl-spacing-06);
+	margin: 0;
+	padding: 0;
+}
+.MrlPaginationText {
+	display: block;
+	font-size: var(--mrl-font-size-03);
+	padding-top: 0.1875rem;
+}
+.MrlPaginationRange {
+	font-weight: var(--mrl-font-weight-04);
+	padding: 0 var(--mrl-spacing-02);
+}
+.MrlPaginationDash {
+	font-weight: var(--mrl-font-weight-04);
+}
+.MrlPaginationTotal {
+	padding: 0 var(--mrl-spacing-02);
+}

package/dist/styles/MrlPanel/module.scss

@@ -0,0 +1,61 @@
+@use '@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+$mrl-panel-width: 16.75rem;
+.MrlPanel {
+	background-color: var(--mrl-color-background);
+	border-radius: var(--mrl-border-radius-container);
+	box-shadow: var(--mrl-shadows-raised);
+	display: flex;
+	flex-direction: column;
+	height: auto;
+	max-height: 100%;
+	overflow: hidden;
+	padding: var(--mrl-spacing-06) 0 0 0;
+	pointer-events: auto;
+	position: relative;
+	width: $mrl-panel-width;
+	z-index: $mrl-zIndex-panels;
+	.MrlPanel--header-content {
+		margin-bottom: calc(var(--mrl-spacing-06) - var(--mrl-spacing-01));
+		padding: 0 var(--mrl-spacing-09) 0 var(--mrl-spacing-06);
+		&.MrlPanel--header-content-description {
+			margin-bottom: calc(var(--mrl-spacing-04) - var(--mrl-spacing-01));
+		}
+		.MrlPanel--title {
+			height: auto;
+		}
+		.MrlPanel--top-actions {
+			align-items: center;
+			display: flex;
+			justify-content: center;
+			position: absolute;
+			right: calc(var(--mrl-spacing-10) - var(--mrl-spacing-02));
+			top: var(--mrl-spacing-04);
+		}
+		.MrlPanel--top-actions-divider {
+			align-self: auto;
+		}
+	}
+	.MrlPanel--close {
+		position: absolute;
+		right: var(--mrl-spacing-04);
+		top: var(--mrl-spacing-04);
+	}
+}
+.MrlPanel--scrollable {
+	outline: none;
+	overflow: clip scroll;
+	overflow-y: overlay;
+	padding-left: var(--mrl-spacing-06);
+	padding-right: var(--mrl-spacing-06);
+	padding-top: var(--mrl-spacing-01);
+	&:focus-visible {
+		outline: var(--mrl-spacing-01) var(--mrl-color-focus) solid;
+	}
+	&.MrlPanel--scrollable-has-sticky-header {
+		padding-top: 0;
+	}
+	.MrlPanel--description {
+		margin-bottom: var(--mrl-spacing-06);
+		padding-right: var(--mrl-space-inset-container-large);
+	}
+}

package/dist/styles/MrlPanelFooter/module.scss

@@ -0,0 +1,12 @@
+.MrlPanelFooter {
+	background-color: var(--mrl-color-background);
+	bottom: var(--mrl-spacing-03);
+	color: rgba(var(--mrl-gray-60), 1);
+	left: 0;
+	margin: 0 var(--mrl-spacing-06);
+	position: absolute;
+	width: calc(100% - var(--mrl-spacing-06) * 2);
+	.MrlPanelFooter--divider {
+		margin: 0 0 var(--mrl-spacing-02) 0;
+	}
+}

package/dist/styles/MrlPanelStickyHeader/module.scss

@@ -0,0 +1,14 @@
+.MrlPanelStickyHeader {
+	background-color: var(--mrl-color-background);
+	position: sticky;
+	top: 0;
+	&::after {
+		background: var(--mrl-color-background);
+		content: '';
+		display: block;
+		inset: 0 calc(-1 * var(--mrl-spacing-03));
+		pointer-events: all;
+		position: absolute;
+		z-index: -1;
+	}
+}

package/dist/styles/MrlPopover/module.scss

@@ -0,0 +1,112 @@
+@use '@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use '@muraldevkit/ds-foundation/src/styles/_mixins.scss' as *;
+@use './MrlPopover.variables.scss' as *;
+.MrlPopover {
+	background: var(--mrl-popover-background-color);
+	border-radius: var(--mrl-border-radius-functional-large);
+	box-shadow: var(--mrl-shadows-raised);
+	color: var(--mrl-popover-text-color);
+	flex-direction: column;
+	max-width: 600px;
+	opacity: 0;
+	overflow: hidden;
+	pointer-events: auto;
+	position: fixed;
+	z-index: $mrl-zIndex-menus;
+	z-index: $mrl-zIndex-popovers;
+	a {
+		color: var(--mrl-popover-text-color);
+	}
+	@include mrl-shadow('raised');
+	&--submenu {
+		left: 97%;
+		position: absolute;
+	}
+	&--close {
+		position: absolute;
+		right: 4px;
+		top: 6px;
+		transition: none;
+		svg {
+			color: var(--mrl-popover-text-color);
+		}
+	}
+	&.compact {
+		padding: var(--mrl-space-stack-related);
+	}
+	&.open {
+		display: flex;
+	}
+	&--scrolling--content {
+		overflow: hidden auto;
+		padding: var(--mrl-popover-padding) calc(var(--mrl-popover-padding) - 4px)
+			var(--mrl-popover-padding) var(--mrl-popover-padding);
+		.MrlPopover--close {
+			right: 8px;
+		}
+	}
+	&--point {
+		background: var(--mrl-popover-background-color);
+		border-radius: 0 2px;
+		height: 10px;
+		position: absolute;
+		width: 10px;
+		z-index: 2;
+		&[data-point*='bottom-'] {
+			top: -4px;
+			transform: rotate(315deg);
+		}
+		&[data-point*='top-'] {
+			bottom: -4px;
+			transform: rotate(315deg);
+		}
+		&[data-point='bottom-left'],
+		&[data-point='top-left'] {
+			left: 14px;
+		}
+		&[data-point='bottom-right'],
+		&[data-point='top-right'] {
+			right: 14px;
+		}
+		&[data-point='bottom-center'],
+		&[data-point='top-center'] {
+			left: calc(50% - 8px);
+		}
+		&[data-point*='left-'] {
+			right: -5px;
+			transform: rotate(225deg);
+		}
+		&[data-point*='right-'] {
+			left: -5px;
+			transform: rotate(45deg);
+		}
+		&[data-point='left-center'],
+		&[data-point='right-center'] {
+			top: calc(50% - 8px);
+		}
+		&[data-point='left-top'],
+		&[data-point='right-top'] {
+			top: 16px;
+		}
+		&[data-point='left-bottom'],
+		&[data-point='right-bottom'] {
+			bottom: 16px;
+		}
+	}
+}
+.inverse {
+	.MrlPopover--scrolling--content {
+		&::-webkit-scrollbar {
+			background-color: var(--mrl-popover-background-color);
+			border-radius: 10px;
+			width: 12px;
+		}
+		&::-webkit-scrollbar-thumb {
+			background-clip: content-box;
+			background-color: var(--mrl-popover-text-color);
+			border: 3px solid transparent;
+			border-radius: 10px;
+			position: relative;
+		}
+	}
+}

package/dist/styles/MrlPopover/variables.scss

@@ -0,0 +1,16 @@
+.primary {
+	--mrl-popover-background-color: var(--mrl-color-background);
+	--mrl-popover-text-color: var(--mrl-color-text);
+	--mrl-popover-text-emph-color: var(--mrl-color-text-emph);
+}
+.inverse {
+	--mrl-popover-background-color: var(--mrl-color-background-inverse);
+	--mrl-popover-text-color: var(--mrl-color-text-inverse);
+	--mrl-popover-text-emph-color: var(--mrl-color-text-emph);
+}
+.default {
+	--mrl-popover-padding: var(--mrl-spacing-05);
+}
+.compact {
+	--mrl-popover-padding: var(--mrl-spacing-04);
+}

package/dist/styles/MrlProgressBar/module.scss

@@ -0,0 +1,57 @@
+.MrlProgressBar-container {
+	min-width: 4.25rem;
+	padding: var(--mrl-spacing-03);
+	width: auto;
+}
+.MrlProgressBar {
+	background-color: var(--mrl-black-opacity-00);
+	border-radius: var(--mrl-radii-03);
+	height: var(--mrl-spacing-02);
+	overflow: hidden;
+	position: relative;
+	width: 100%;
+}
+.MrlProgressBar--complete {
+	background-color: rgba(var(--mrl-blue-70), 1);
+	border-radius: var(--mrl-radii-03);
+	height: var(--mrl-spacing-02);
+	left: 0;
+	position: absolute;
+	top: 0;
+}
+.MrlProgressBar--textContainer {
+	margin-top: var(--mrl-spacing-03);
+	text-align: center;
+}
+@keyframes timed {
+	0% {
+		width: 0;
+	}
+	15% {
+		width: 25%;
+	}
+	70% {
+		width: 72.5%;
+	}
+	100% {
+		width: 100%;
+	}
+}
+.MrlProgressBar--timed {
+	animation-name: timed;
+	animation-timing-function: var(--mrl-timing-m1);
+	width: 100%;
+}
+@keyframes indeterminate {
+	from {
+		left: -100%;
+	}
+	to {
+		left: 100%;
+	}
+}
+.MrlProgressBar--indeterminate {
+	animation: 2s indeterminate var(--mrl-timing-m1) infinite;
+	left: -100%;
+	width: 200%;
+}

package/dist/styles/MrlRadioButton/module.scss

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

package/dist/styles/MrlRadioButtonStandalone/global.scss

@@ -0,0 +1,16 @@
+@use '@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+.MrlRadioButtonStandalone-input {
+	@include mrl-focus(
+		$is-inline-element: 'true',
+		$element-radius: 'var(--mrl-border-radius-rounded)'
+	);
+	position: absolute;
+}
+.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/styles/MrlRadioButtonStandalone/module.scss

@@ -0,0 +1,59 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use '../../forms.variables.scss';
+@use './MrlRadioButtonStandalone.variables.scss';
+.MrlRadioButtonStandalone {
+	display: inline-block;
+	margin: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
+	margin-left: var(--mrl-spacing-01);
+	min-height: var(--mrl-radio-button-height);
+	min-width: var(--mrl-radio-button-width);
+	position: relative;
+}
+.MrlRadioButtonStandalone-input {
+	appearance: none;
+	cursor: pointer;
+	height: var(--mrl-radio-button-height);
+	left: 0;
+	margin: 0;
+	opacity: 0;
+	padding: 0;
+	position: absolute;
+	top: 0;
+	vertical-align: middle;
+	width: var(--mrl-radio-button-width);
+	z-index: $mrl-zIndex-focus;
+	&:disabled,
+	& ~ .MrlRadioButtonStandalone-faux-input {
+		cursor: default;
+		pointer-events: none;
+	}
+	& ~ .MrlRadioButtonStandalone-faux-input {
+		background-color: var(--mrl-radio-button-background);
+		border-color: var(--mrl-radio-button-border-color);
+		border-radius: var(--mrl-radio-button-border-radius);
+		border-style: solid;
+		border-width: var(--mrl-radio-button-border-width);
+		height: var(--mrl-radio-button-height);
+		left: 0;
+		position: absolute;
+		top: 0;
+		transition: background-color var(--mrl-duration-03) var(--mrl-timing-m2),
+			border-color var(--mrl-duration-03) var(--mrl-timing-m2);
+		width: var(--mrl-radio-button-width);
+		&::before {
+			background-color: var(--mrl-radio-button-background);
+			border-radius: var(--mrl-border-radius-rounded);
+			content: '';
+			cursor: pointer;
+			height: var(--mrl-radio-button-fill-size);
+			left: 50%;
+			position: absolute;
+			top: 50%;
+			transform: translate(-50%, -50%);
+			transition: background-color var(--mrl-duration-03) var(--mrl-timing-m2);
+			width: var(--mrl-radio-button-fill-size);
+		}
+	}
+}

package/dist/styles/MrlRadioButtonStandalone/variables.scss

@@ -0,0 +1,31 @@
+.MrlRadioButtonStandalone-input:focus-within ~ .MrlRadioButtonStandalone-faux-input {
+	--mrl-radio-button-border-color: var(--mrl-color-line-active);
+}
+.MrlRadioButtonStandalone-input:hover ~ .MrlRadioButtonStandalone-faux-input {
+	--mrl-radio-button-border-color: var(--mrl-color-line-hover);
+}
+.MrlRadioButtonStandalone-input:checked ~ .MrlRadioButtonStandalone-faux-input {
+	--mrl-radio-button-border-color: var(--mrl-radio-button-background-selected);
+	&::before {
+		--mrl-radio-button-background: var(--mrl-radio-button-background-selected);
+	}
+}
+.MrlRadioButtonStandalone-input:disabled ~ .MrlRadioButtonStandalone-faux-input {
+	--mrl-radio-button-border-color: var(--mrl-color-line-disabled);
+}
+.MrlRadioButtonStandalone-input.hasError ~ .MrlRadioButtonStandalone-faux-input,
+.MrlRadioButtonStandalone-input.hasError:checked ~ .MrlRadioButtonStandalone-faux-input,
+.MrlRadioButtonStandalone-input.hasError:hover ~ .MrlRadioButtonStandalone-faux-input {
+	--mrl-radio-button-border-color: var(--mrl-color-background-error);
+}
+.MrlRadioButtonStandalone-input.hasError:checked ~ .MrlRadioButtonStandalone-faux-input {
+	&::before {
+		--mrl-radio-button-background: var(--mrl-color-background-error);
+	}
+}
+.MrlRadioButtonStandalone-input:disabled:checked ~ .MrlRadioButtonStandalone-faux-input {
+	--mrl-radio-button-border-color: var(--mrl-color-line-disabled);
+	&::before {
+		--mrl-radio-button-background: var(--mrl-color-background-disabled);
+	}
+}

package/dist/styles/MrlSidebar/module.scss

@@ -0,0 +1,65 @@
+
+@use '../layout.variables' as *;
+@use '../../grid/grid.variables' as *;
+.MrlSidebar {
+	align-items: stretch;
+	margin-right: var(--mrl-spacing-05);
+	width: $sidebar-width;
+	&--mobile {
+		align-items: stretch;
+		background: var(--mrl-color-background-page);
+		border-radius: 0 var(--mrl-radii-03) var(--mrl-radii-03) 0;
+		bottom: 0;
+		left: calc(($sidebar-width + 2px) * -1);
+		max-height: calc(100% - var(--mrl-spacing-03));
+		overflow-y: auto;
+		padding: 4.5rem var(--mrl-space-inset-large) var(--mrl-space-inset-large);
+		position: fixed;
+		top: var(--mrl-spacing-03);
+		transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1),
+			left var(--mrl-duration-03) var(--mrl-timing-m1);
+		z-index: 2;
+		@media (prefers-reduced-motion: reduce) {
+			transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1);
+		}
+		&--open {
+			left: 0;
+			opacity: 1;
+		}
+	}
+	&--offset {
+		&.MrlSidebar--mobile,
+		&.MrlSidebar-overlay {
+			bottom: 0;
+		}
+	}
+}
+.MrlSidebar-menu.MrlSidebar-menu-trigger {
+	left: var(--mrl-spacing-05);
+	position: absolute;
+	top: var(--mrl-spacing-05);
+	width: 50px;
+	z-index: 1;
+}
+.MrlSidebar-menu-close {
+	position: fixed;
+}
+.MrlSidebar-overlay {
+	background-color: rgba(0, 0, 0, 56%);
+	inset: 0 0 0 -10000px;
+	opacity: 0;
+	pointer-events: none;
+	position: absolute;
+	transition: opacity var(--mrl-duration-03) var(--mrl-timing-m1);
+	z-index: 1;
+	&--visible {
+		opacity: 1;
+		pointer-events: initial;
+	}
+}
+.MrlSidebar-content {
+	display: none;
+	&--visible {
+		display: block;
+	}
+}

package/dist/styles/MrlSidebarNavGroup/module.scss

@@ -0,0 +1,8 @@
+
+.MrlSidebarNavGroup {
+	margin-bottom: var(--mrl-spacing-07);
+}
+.MrlSidebarNavGroup-heading {
+	color: var(--mrl-color-text-secondary);
+	margin-bottom: var(--mrl-spacing-03);
+}

package/dist/styles/MrlSidebarNavItem/module.scss

@@ -0,0 +1,47 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+$mrl-sidebar-nav-item-background-color-hover: rgba(var(--mrl-gray-20), 1);
+$mrl-sidebar-nav-item-background-color-active: rgba(var(--mrl-gray-30), 1);
+$mrl-sidebar-nav-item-background-color-selected: var(--mrl-color-background-highlight-active);
+$mrl-sidebar-nav-item-text-color-default: var(--mrl-color-text-heading);
+$mrl-sidebar-nav-item-text-color-selected: var(--mrl-color-text-inverse-active);
+.MrlSidebarNavItem {
+	height: var(--mrl-spacing-08);
+	margin-bottom: var(--mrl-spacing-01);
+	& > a {
+		align-items: center;
+		border-radius: var(--mrl-border-radius-content-large);
+		color: $mrl-sidebar-nav-item-text-color-default;
+		display: inline-flex;
+		height: 100%;
+		outline: none;
+		padding: var(--mrl-spacing-03) var(--mrl-spacing-04);
+		position: relative;
+		text-decoration: none;
+		width: 100%;
+		@include mrl-text-interactive('xsmall');
+		&:focus-visible::after {
+			@include mrl-focus-pseudo-element;
+		}
+		&:hover {
+			background-color: $mrl-sidebar-nav-item-background-color-hover;
+		}
+		&:active {
+			background-color: $mrl-sidebar-nav-item-background-color-active;
+		}
+	}
+	&.hasIcon > a {
+		padding: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02))
+			calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));
+	}
+	&.MrlSidebarNavItem-selected a,
+	&.MrlSidebarNavItem-selected a:hover {
+		background-color: $mrl-sidebar-nav-item-background-color-selected;
+		color: $mrl-sidebar-nav-item-text-color-selected;
+	}
+}
+.MrlSidebarNavItem-icon {
+	height: var(--mrl-spacing-06);
+	margin-right: calc(var(--mrl-spacing-01) + var(--mrl-spacing-03));
+	width: var(--mrl-spacing-06);
+}

package/dist/styles/MrlSkeleton/module.scss

@@ -0,0 +1,9 @@
+
+@use '../skeleton.mixins.scss' as *;
+.MrlSkeleton {
+	@include mrl-skeleton-base;
+	@include mrl-skeleton-shimmer-effect;
+}
+.MrlSkeleton-circle {
+	border-radius: 50%;
+}