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

package/dist/styles/MrlSkeletonText/module.scss

@@ -0,0 +1,24 @@
+
+@use '../skeleton.mixins.scss' as *;
+$line: var(--mrl-spacing-03);
+.MrlSkeletonText {
+	@include mrl-skeleton-base;
+	@include mrl-skeleton-shimmer-effect;
+}
+$mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
+@each $size in $mrl-title-sizes {
+	.MrlSkeletonText-#{$size} {
+		$line-height: calc(
+			var(--mrl-type-size-text-#{$size}) * var(--mrl-type-line-height-text-#{$size})
+		);
+		height: $line;
+		margin-bottom: calc($line-height - $line);
+		margin-top: calc(calc($line-height - $line) / 2);
+	}
+}
+.MrlSkeletonText-medium {
+	$line-height: calc(var(--mrl-type-size-text) * var(--mrl-type-line-height-text));
+	height: $line;
+	margin-bottom: calc($line-height - $line);
+	margin-top: calc(calc($line-height - $line) / 2);
+}

package/dist/styles/MrlSmartTable/module.scss

@@ -0,0 +1,40 @@
+
+@use '../table.variables.scss';
+$allowSortingGap: var(--mrl-spacing-01);
+$iconSpaceSize: var(--mrl-spacing-06);
+.MrlSmartTable--accessible-visually-hidden-button {
+	all: unset;
+	cursor: pointer;
+	&:focus {
+		outline: revert;
+	}
+	&.align-right {
+		width: 100%;
+	}
+}
+.allowsSorting {
+	align-items: center;
+	display: flex;
+	gap: $allowSortingGap;
+	justify-content: flex-start;
+	width: 100%;
+	&.align-right {
+		justify-content: flex-end;
+		&.noSortSelected {
+			padding-left: calc(#{$iconSpaceSize} + #{$allowSortingGap});
+		}
+	}
+}
+.empty-icon-space {
+	height: $iconSpaceSize;
+	width: $iconSpaceSize;
+}
+.MrlTableRow--selected,
+.MrlTableRow--selected > :global(.MrlTableCell) {
+	background-color: var(--mrl-table-row-background-selected);
+	border-bottom-color: rgba(var(--mrl-blue-20), 1);
+}
+.MrlTableRow--disabled,
+.MrlTableRow--disabled > :global(.MrlTableCell) {
+	color: var(--mrl-table-disabled-color);
+}

package/dist/styles/MrlSpinner/module.scss

@@ -0,0 +1,109 @@
+
+$mrl-spinner-size: var(--mrl-spacing-06);
+$mrl-spinner-size-medium: var(--mrl-spacing-07);
+$mrl-spinner-size-large: var(--mrl-spacing-09);
+$mrl-spinner-logo-width: 99px;
+$mrl-spinner-logo-height-large: 93px;
+$spinner-size: $mrl-spinner-size;
+$spinner-sm-scale: 1; 
+$spinner-md-scale: 1.2; 
+$spinner-lg-scale: 2; 
+@mixin spinner-size-variant($scale) {
+	&::before {
+		transform: scale($scale);
+	}
+}
+@keyframes spin {
+	from {
+		transform: rotate(0);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+.MrlSpinner-container {
+	height: $mrl-spinner-size;
+	overflow: hidden;
+	position: relative;
+	width: $mrl-spinner-size;
+	&--medium {
+		height: $mrl-spinner-size-medium;
+		width: $mrl-spinner-size-medium;
+	}
+	&--large {
+		height: $mrl-spinner-size-large;
+		width: $mrl-spinner-size-large;
+		&.MrlSpinner-container--logo {
+			height: $mrl-spinner-logo-height-large;
+		}
+	}
+}
+.MrlSpinner {
+	align-items: center;
+	animation: 500ms spin var(--mrl-timing-m3) infinite;
+	display: flex;
+	height: $mrl-spinner-size;
+	justify-content: center;
+	width: $mrl-spinner-size;
+	&::before {
+		background: conic-gradient(
+			from 11.31deg at 50% 50%,
+			rgba(var(--mrl-blue-70), 0) 0deg,
+			rgba(var(--mrl-blue-70), 0) 0.26deg,
+			rgba(var(--mrl-blue-70), 0) 60deg,
+			rgba(var(--mrl-blue-70), 0.26) 114.38deg,
+			rgba(var(--mrl-blue-70), 1) 217.5deg,
+			rgba(var(--mrl-blue-70), 1) 360deg
+		);
+		border-radius: 6px;
+		clip-path: path(
+			'M10 1c0-.552-.449-1.005-.999-.95C3.947.55 0 4.813 0 10c0 5.523 4.477 10 10 10s10-4.477 10-10a9.987 9.987 0 0 0-4.152-8.112c-.452-.327-1.073-.154-1.347.332-.268.477-.099 1.077.337 1.408a8 8 0 1 1-5.836-1.566C9.55 1.993 10 1.552 10 1Z'
+		);
+		content: '';
+		display: block;
+		height: $spinner-size;
+		width: $spinner-size;
+	}
+	&--medium {
+		height: $mrl-spinner-size-medium;
+		width: $mrl-spinner-size-medium;
+		@include spinner-size-variant($spinner-md-scale);
+	}
+	&--large {
+		height: $mrl-spinner-size-large;
+		width: $mrl-spinner-size-large;
+		@include spinner-size-variant($spinner-lg-scale);
+	}
+	&--inverse::before {
+		background: conic-gradient(
+			from 11.31deg at 50% 50%,
+			rgba(var(--mrl-white), 0) 0deg,
+			rgba(var(--mrl-white), 0) 0.26deg,
+			rgba(var(--mrl-white), 0) 60deg,
+			rgba(var(--mrl-white), 0.26) 114.38deg,
+			rgba(var(--mrl-white), 1) 217.5deg,
+			rgba(var(--mrl-white), 1) 360deg
+		);
+	}
+}
+.MrlSpinner-container--logo {
+	text-align: center;
+	&.MrlSpinner-container {
+		display: block;
+		min-height: calc(var(--mrl-spacing-12) + var(--mrl-spacing-02));
+		width: $mrl-spinner-logo-width;
+	}
+	.MrlSpinner {
+		margin: 0 auto;
+	}
+}
+.MrlSpinnerLogo {
+	display: block;
+	margin-top: var(--mrl-spacing-07);
+	width: $mrl-spinner-logo-width;
+}
+@media (prefers-reduced-motion) {
+	.MrlSpinner {
+		animation: 1.5s spin linear 4;
+	}
+}

package/dist/styles/MrlSvg/module.scss

@@ -0,0 +1,24 @@
+@use '../svg.variables.scss';
+.MrlSvgContainer {
+	color: inherit;
+	display: inline-flex;
+	height: var(--mrl-svg-size);
+	width: var(--mrl-svg-size);
+}
+.MrlSvgContainer--auto {
+	height: 100%;
+	width: 100%;
+}
+.MrlSvg {
+	display: inline-block;
+	fill: currentcolor;
+	height: auto;
+	width: var(--mrl-svg-size);
+	* {
+		pointer-events: none;
+	}
+}
+.MrlSvg--auto {
+	height: 100%;
+	width: 100%;
+}

package/dist/styles/MrlSvgAnimate/module.scss

@@ -0,0 +1,13 @@
+@use '../svg.variables.scss';
+.MrlSvgAnimate {
+	display: inline-block;
+	fill: currentcolor;
+	height: var(--mrl-svg-size);
+	width: var(--mrl-svg-size);
+	* {
+		pointer-events: none;
+	}
+}
+.MrlSvgAnimate--auto {
+	width: 100%;
+}

package/dist/styles/MrlSwitch/module.scss

@@ -0,0 +1,10 @@
+@use '../../label/MrlLabel/MrlLabel.module.scss';
+.MrlSwitch {
+	align-items: center;
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 0;
+}
+.MrlSwitch-disabled {
+	color: rgba(var(--mrl-gray-40), 1);
+}

package/dist/styles/MrlSwitchStandalone/module.scss

@@ -0,0 +1,84 @@
+@use '@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+.MrlSwitchStandalone-switch {
+	background-color: rgba(var(--mrl-gray-80), 1);
+	border-radius: 0.625rem;
+	cursor: pointer;
+	display: block;
+	height: var(--mrl-spacing-06);
+	width: calc(var(--mrl-spacing-08) + var(--mrl-spacing-02));
+	@media (prefers-reduced-motion: no-preference) {
+		transition: var(--mrl-duration-02);
+	}
+}
+.MrlSwitchStandalone-switch-indicator {
+	align-content: center;
+	background-color: var(--mrl-color-background);
+	border-radius: 0.375rem;
+	bottom: calc(var(--mrl-spacing-03) - var(--mrl-spacing-02));
+	color: var(--mrl-color-background-secondary);
+	display: flex;
+	height: var(--mrl-spacing-04);
+	left: var(--mrl-spacing-02);
+	pointer-events: none;
+	position: absolute;
+	width: var(--mrl-spacing-04);
+	@media (prefers-reduced-motion: no-preference) {
+		transition: var(--mrl-duration-02) var(--mrl-timing-m1);
+	}
+	.mrl-svg {
+		height: var(--mrl-spacing-04);
+		pointer-events: none;
+		width: var(--mrl-spacing-04);
+	}
+}
+.MrlSwitchStandalone {
+	height: 100%;
+	position: relative;
+	.MrlSwitchStandalone-checkbox {
+		cursor: pointer;
+		height: var(--mrl-spacing-06);
+		opacity: 0;
+		position: absolute;
+		width: calc(var(--mrl-spacing-08) + var(--mrl-spacing-02));
+	}
+}
+.MrlSwitchStandalone-checkbox {
+	&:hover + .MrlSwitchStandalone-switch {
+		background-color: rgba(var(--mrl-gray-90), 1);
+	}
+	&:active + .MrlSwitchStandalone-switch {
+		background-color: rgba(var(--mrl-gray-100), 1);
+	}
+	&:disabled {
+		+ .MrlSwitchStandalone-switch,
+		&:hover + .MrlSwitchStandalone-switch {
+			background-color: rgba(var(--mrl-gray-40), 1);
+		}
+		~ .MrlSwitchStandalone-switch-indicator {
+			color: rgba(var(--mrl-gray-40), 1);
+		}
+	}
+	&:focus-visible + .MrlSwitchStandalone-switch::after {
+		@include mrl-focus-pseudo-element;
+	}
+	&[aria-checked='true'] {
+		+ .MrlSwitchStandalone-switch {
+			background-color: rgba(var(--mrl-blue-70), 1);
+		}
+		~ .MrlSwitchStandalone-switch-indicator {
+			$switch-knob-on-position: calc(var(--mrl-spacing-08) - var(--mrl-spacing-05));
+			color: rgba(var(--mrl-blue-70), 1);
+			transform: translateX($switch-knob-on-position);
+		}
+		&:hover + .MrlSwitchStandalone-switch {
+			background-color: rgba(var(--mrl-blue-80), 1);
+		}
+		&:active + .MrlSwitchStandalone-switch {
+			background-color: rgba(var(--mrl-blue-90), 1);
+		}
+		&:disabled + .MrlSwitchStandalone-switch,
+		&:disabled:hover + .MrlSwitchStandalone-switch {
+			background-color: rgba(var(--mrl-gray-40), 1);
+		}
+	}
+}

package/dist/styles/MrlTab/module.scss

@@ -0,0 +1,117 @@
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+.MrlTab-Text {
+	border-bottom: var(--mrl-line-width-control) solid transparent;
+	display: block;
+	line-height: var(--mrl-line-height-08);
+	margin: 0;
+	padding: var(--mrl-space-stack-related-small) var(--mrl-space-stack-related) var(--mrl-spacing-01);
+	position: relative;
+	text-wrap: nowrap;
+	z-index: 5;
+}
+.MrlTab-icon {
+	display: block;
+	height: var(--mrl-spacing-07);
+	margin: var(--mrl-spacing-01) auto;
+	overflow: hidden;
+	width: var(--mrl-spacing-07);
+}
+.MrlTab {
+	background-color: transparent;
+	border: none;
+	color: var(--mrl-color-text-emph);
+	cursor: pointer;
+	display: inline-block;
+	font-family: var(--mrl-heading-font);
+	font-size: var(--mrl-font-size-01);
+	font-weight: var(--mrl-font-weight-02);
+	letter-spacing: var(--mrl-letter-spacing-04);
+	line-height: var(--mrl-line-height-08);
+	margin-left: var(--mrl-spacing-03);
+	padding: 0;
+	position: relative;
+	text-decoration: none;
+	vertical-align: bottom;
+	&:first-child {
+		margin-left: 0;
+	}
+	&:not(.MrlTab-selected) .MrlTab-icon {
+		opacity: 0.8;
+	}
+	&:hover {
+		color: var(--mrl-color-text-hover);
+		.MrlTab-icon {
+			opacity: 1;
+		}
+		.MrlTab-Text {
+			border-bottom-color: var(--mrl-color-text-emph-hover);
+		}
+	}
+	&:active {
+		color: var(--mrl-color-text-active);
+		.MrlTab-icon {
+			opacity: 1;
+		}
+	}
+	&:focus-visible {
+		background-color: var(--mrl-color-background);
+		border-color: transparent;
+		outline: none;
+		&::after {
+			@include mrl-focus-pseudo-element;
+			border-radius: var(--mrl-border-radius-content-large);
+		}
+		.MrlTab-Text {
+			border-color: var(--mrl-color-line-emph);
+		}
+		&:hover .MrlTab-Text {
+			border-bottom-color: var(--mrl-color-text-emph-hover);
+		}
+	}
+}
+.MrlTab-selected {
+	.MrlTab-Text {
+		border-bottom-color: var(--mrl-color-text-emph-selected);
+		color: var(--mrl-color-text-emph-selected);
+	}
+	&:hover {
+		.MrlTab-Text {
+			border-bottom-color: var(--mrl-color-text-emph-selected);
+			color: var(--mrl-color-text-emph-selected);
+		}
+	}
+	&:focus-visible {
+		.MrlTab-Text {
+			border-bottom-color: var(--mrl-color-text-emph-selected);
+		}
+		&:hover {
+			.MrlTab-Text {
+				border-bottom-color: var(--mrl-color-text-emph-selected);
+			}
+		}
+	}
+}
+:global(.MrlTabs-caps) {
+	.MrlTab {
+		text-transform: capitalize;
+	}
+}
+:global(.MrlTabs-large) {
+	.MrlTab {
+		font-size: var(--mrl-font-size-03);
+		line-height: var(--mrl-line-height-07);
+		padding-top: var(--mrl-spacing-01);
+	}
+	.MrlTab-Text {
+		padding-bottom: var(--mrl-space-stack-related-small);
+	}
+	.MrlTab-icon {
+		margin-bottom: 0;
+		margin-top: 0;
+	}
+}
+:global(.MrlTabs-evenSpacing) {
+	.MrlTab {
+		flex: 1;
+	}
+}

package/dist/styles/MrlTabContent/module.scss

@@ -0,0 +1,7 @@
+.MrlTabContent {
+	display: block;
+	padding: var(--mrl-spacing-05) 0 0;
+	&-hidden {
+		display: none;
+	}
+}

package/dist/styles/MrlTabGroup/module.scss

@@ -0,0 +1,66 @@
+.MrlTabGroup-container {
+	display: flex;
+	overflow: hidden;
+	padding: 4px;
+	position: relative;
+	&::before {
+		background-color: var(--mrl-color-background-decorative);
+		bottom: 4px;
+		content: '';
+		height: var(--mrl-line-width-control);
+		left: -4px;
+		position: absolute;
+		right: -4px;
+	}
+}
+.MrlTabGroup {
+	display: inline-flex;
+	position: relative;
+	transform: translateX(0);
+	width: 100%;
+	@media (prefers-reduced-motion: no-preference) {
+		transition: 0.3s ease-in-out;
+	}
+}
+.MrlTabGroup-fade {
+	bottom: 6px;
+	position: absolute;
+	top: 0;
+	width: 3.4375rem;
+}
+.MrlTabGroup-fadeNext {
+	background: linear-gradient(
+		to right,
+		rgba(var(--mrl-white), 0) 0%,
+		rgba(var(--mrl-white), 0.4) 20%,
+		rgba(var(--mrl-white), 0.6) 30%,
+		var(--mrl-color-background) 60%
+	);
+	right: 0;
+}
+.MrlTabGroup-fadePrev {
+	background: linear-gradient(
+		to left,
+		rgba(var(--mrl-white), 0) 0%,
+		rgba(var(--mrl-white), 0.4) 20%,
+		rgba(var(--mrl-white), 0.6) 30%,
+		rgba(var(--mrl-white), 1) 60%
+	);
+	left: 0;
+}
+.MrlTabGroup-nav {
+	align-items: center;
+	bottom: 0;
+	display: flex;
+	position: absolute;
+	top: 0;
+	z-index: 1;
+}
+.MrlTabGroup-next {
+	bottom: var(--mrl-spacing-02);
+	right: 0;
+}
+.MrlTabGroup-prev {
+	bottom: var(--mrl-spacing-02);
+	left: 0;
+}

package/dist/styles/MrlTable/module.scss

@@ -0,0 +1,5 @@
+
+@use '../table.variables.scss';
+.MrlTable {
+	width: 100%;
+}

package/dist/styles/MrlTableBody/module.scss

@@ -0,0 +1,2 @@
+
+@use '../table.variables.scss';

package/dist/styles/MrlTableCell/module.scss

@@ -0,0 +1,10 @@
+
+@use '../table.variables.scss';
+@use '../table.global.scss' as *;
+.MrlTableCell {
+	@include mrl-cell-layout;
+	@include mrl-table-sticky-column;
+	&.align-right {
+		text-align: right;
+	}
+}

package/dist/styles/MrlTableColumn/module.scss

@@ -0,0 +1,27 @@
+
+@use '../table.variables.scss';
+@use '../table.global.scss' as *;
+.MrlTableColumn {
+	@include mrl-cell-layout;
+	@include mrl-table-sticky-column;
+	color: var(--mrl-color-text);
+	font-size: var(--mrl-type-size-text-small);
+	font-weight: var(--mrl-type-weight-title);
+	position: relative;
+	&.align-right {
+		text-align: right;
+	}
+	&.clickable:hover {
+		background-color: var(--mrl-table-column-background-hover);
+		cursor: pointer;
+		user-select: none;
+	}
+	:global(.MrlTableColumn--tooltip) {
+		margin-left: var(--mrl-spacing-02);
+	}
+	:global(.MrlTableColumn--sort-indicator),
+	:global(.MrlTableColumn--tooltip) {
+		color: var(--mrl-table-column-svg-color);
+		vertical-align: text-top;
+	}
+}

package/dist/styles/MrlTableEmptyState/module.scss

@@ -0,0 +1,14 @@
+
+@use '../table.variables.scss';
+.MrlTableEmptyState {
+	align-items: center;
+	background-color: var(--mrl-black-opacity-00);
+	color: var(--mrl-color-text-secondary);
+	display: flex;
+	font-size: var(--mrl-type-size-text-small);
+	font-weight: var(--mrl-type-weight-text);
+	justify-content: center;
+	min-height: var(--mrl-table-empty-state-min-height);
+	padding-block: var(--mrl-table-empty-state-padding-block);
+	padding-inline: var(--mrl-table-empty-state-padding-block);
+}

package/dist/styles/MrlTableHeader/module.scss

@@ -0,0 +1,7 @@
+
+@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
+@use '../table.variables.scss';
+.MrlTableHeader {
+	background-color: var(--mrl-color-background);
+	border-bottom: var(--mrl-table-header-row-border-bottom);
+}

package/dist/styles/MrlTableRow/module.scss

@@ -0,0 +1,17 @@
+
+@use '../table.variables.scss';
+@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
+.MrlTableRow {
+	background-color: var(--mrl-table-row-background);
+	border-bottom: var(--mrl-table-row-border-bottom);
+	font-size: var(--mrl-type-size-text-small);
+	font-weight: var(--mrl-type-weight-text);
+	height: var(--mrl-table-row-height);
+	outline: none;
+	&:hover:not(:global(.MrlTableRow--selected)) > td {
+		background-color: var(--mrl-table-row-background-hover);
+	}
+	&:focus-visible {
+		@include mrl-focus;
+	}
+}

package/dist/styles/MrlText/module.scss

@@ -0,0 +1,8 @@
+@use './MrlText.variables.scss';
+.MrlText {
+	font-family: var(--mrl-body-font);
+	font-size: var(--mrl-text-size);
+	font-weight: var(--mrl-text-weight);
+	letter-spacing: var(--mrl-text-spacing);
+	line-height: var(--mrl-text-height);
+}

package/dist/styles/MrlText/variables.scss

@@ -0,0 +1,14 @@
+
+.MrlText {
+	--mrl-text-size: var(--mrl-type-size-text);
+	--mrl-text-weight: var(--mrl-type-weight-text);
+	--mrl-text-spacing: var(--mrl-type-spacing-text);
+	--mrl-text-height: var(--mrl-type-line-height-text);
+	$mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
+	@each $size in $mrl-title-sizes {
+		&.MrlText--#{$size} {
+			--mrl-text-size: var(--mrl-type-size-text-#{$size});
+			--mrl-text-height: var(--mrl-type-line-height-text-#{$size});
+		}
+	}
+}

package/dist/styles/MrlTextHeading/module.scss

@@ -0,0 +1,24 @@
+@use './MrlTextHeading.variables.scss';
+$mrl-heading-use-cases: 'display', 'headline';
+$mrl-heading-sizes: 'large', 'small';
+@each $use-case in $mrl-heading-use-cases {
+	.MrlTextHeading-#{$use-case} {
+		display: block;
+		font-family: var(--mrl-heading-family);
+		font-size: var(--mrl-heading-size);
+		font-weight: var(--mrl-heading-weight);
+		letter-spacing: var(--mrl-heading-spacing);
+		line-height: var(--mrl-heading-height);
+	}
+}
+.MrlTextHeading-display strong {
+	font-weight: var(--mrl-font-weight-02);
+}
+.MrlTextHeading-title {
+	display: block;
+	font-family: var(--mrl-heading-family);
+	font-size: var(--mrl-heading-size);
+	font-weight: var(--mrl-heading-weight);
+	letter-spacing: var(--mrl-heading-spacing);
+	line-height: var(--mrl-heading-height);
+}

package/dist/styles/MrlTextHeading/variables.scss

@@ -0,0 +1,40 @@
+
+$mrl-heading-use-cases: 'display', 'headline';
+$mrl-heading-sizes: 'large', 'small', 'xsmall';
+@each $use-case in $mrl-heading-use-cases {
+	.MrlTextHeading-#{$use-case} {
+		@if $use-case == 'display' {
+			--mrl-heading-family: var(--mrl-heading-font-alt);
+		} @else {
+			--mrl-heading-family: var(--mrl-heading-font);
+		}
+		--mrl-heading-size: var(--mrl-type-size-#{$use-case});
+		--mrl-heading-weight: var(--mrl-type-weight-#{$use-case});
+		--mrl-heading-spacing: var(--mrl-type-spacing-#{$use-case});
+		--mrl-heading-height: var(--mrl-type-line-height-#{$use-case});
+	}
+	@each $size in $mrl-heading-sizes {
+		.MrlTextHeading-#{$use-case}--#{$size} {
+			--mrl-heading-size: var(--mrl-type-size-#{$use-case}-#{$size});
+			--mrl-heading-spacing: var(--mrl-type-spacing-#{$use-case}-#{$size});
+			--mrl-heading-height: var(--mrl-type-line-height-#{$use-case}-#{$size});
+		}
+	}
+}
+.MrlTextHeading-title {
+	--mrl-heading-family: var(--mrl-heading-font);
+	--mrl-heading-size: var(--mrl-type-size-text);
+	--mrl-heading-weight: var(--mrl-type-weight-title);
+	--mrl-heading-spacing: var(--mrl-type-spacing-text);
+	--mrl-heading-height: var(--mrl-type-line-height-title);
+}
+$mrl-title-sizes: 'large', 'small', 'xsmall', 'xxsmall';
+@each $size in $mrl-title-sizes {
+	.MrlTextHeading-title--#{$size} {
+		--mrl-heading-size: var(--mrl-type-size-text-#{$size});
+		--mrl-heading-height: var(--mrl-type-line-height-title-#{$size});
+	}
+}
+.MrlTextHeading-title--secondary {
+	--mrl-heading-weight: var(--mrl-type-weight-title-secondary);
+}