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

package/dist/styles/MrlTextInput/module.scss

@@ -1,70 +0,0 @@
-@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-@use '../../forms.global.scss' as *;
-@use './MrlTextInput.variables.scss';
-.MrlTextInput {
-	@include mrl-text-inputs;
-	@include mrl-text-inputs-read-only;
-	@include mrl-focus($style: 'outline');
-	&--wrapper {
-		position: relative;
-	}
-	&::-ms-clear,
-	&::-ms-reveal {
-		display: none;
-		height: 0;
-		width: 0;
-	}
-	&::-webkit-search-decoration,
-	&::-webkit-search-cancel-button,
-	&::-webkit-search-results-button,
-	&::-webkit-search-results-decoration {
-		display: none;
-	}
-}
-.MrlTextInput--dynamicIcon {
-	padding-right: calc(
-		var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) +
-			var(--mrl-text-input-icon-offset)
-	);
-}
-.MrlTextInput--persistIcon {
-	padding-left: calc(
-		var(--mrl-text-input-inset-horizontal) + var(--mrl-text-input-icon-size) +
-			var(--mrl-text-input-icon-offset)
-	);
-}
-.MrlTextInput--active {
-	border-color: var(--mrl-text-input-border-color-hover);
-}
-.MrlTextInput-dynamicIcon,
-.MrlTextInput-persistIcon {
-	color: var(--mrl-text-input-border-color);
-	position: absolute;
-	top: calc(var(--mrl-text-input-inset-vertical) + var(--mrl-line-width-border));
-	transition: color var(--mrl-duration-03) var(--mrl-timing-m2);
-	z-index: $mrl-zIndex-focus + 1;
-	&--disabled {
-		color: var(--mrl-text-input-border-color-disabled);
-	}
-}
-.MrlTextInput-dynamicIcon {
-	right: var(--mrl-text-input-inset-horizontal);
-}
-.MrlTextInput-persistIcon {
-	left: var(--mrl-text-input-inset-horizontal);
-}
-.MrlTextInput-persistIcon--active,
-.MrlTextInput-dynamicIcon--active {
-	color: var(--mrl-text-input-border-color-hover);
-}
-.MrlTextInput-dynamicIcon > button {
-	@include mrl-focus;
-	background: none;
-	border: none;
-	color: inherit;
-	cursor: pointer;
-	height: 20px;
-	outline: none;
-	padding: 0;
-}

package/dist/styles/MrlTextInput/variables.scss

@@ -1,5 +0,0 @@
-@use '../../forms.variables.scss';
-.MrlTextInput {
-	--mrl-text-input-icon-size: var(--mrl-spacing-06);
-	--mrl-text-input-icon-offset: var(--mrl-input-icon-offset);
-}

package/dist/styles/MrlTextarea/global.scss

@@ -1,12 +0,0 @@
-
-@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-@use '../../forms.global.scss' as *;
-@use '../../forms.variables.scss';
-.MrlTextarea {
-	@include mrl-focus($style: 'outline');
-}
-.MrlTextarea--wrapper {
-	display: flex;
-	flex-direction: column;
-	position: relative;
-}

package/dist/styles/MrlTextarea/module.scss

@@ -1,18 +0,0 @@
-
-@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-@use '../../forms.global.scss' as *;
-@use '../../forms.variables.scss';
-.MrlTextarea {
-	@include mrl-text-inputs;
-	@include mrl-text-inputs-read-only;
-	resize: vertical;
-	&--auto-expand {
-		display: block;
-		max-height: 120px;
-		overflow: hidden;
-		resize: none;
-	}
-	&--read-only {
-		resize: none;
-	}
-}

package/dist/styles/MrlToast/module.scss

@@ -1,114 +0,0 @@
-@use '@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-.MrlToast {
-	align-items: center;
-	background-color: rgba(var(--mrl-status-info), 1);
-	border-radius: var(--mrl-border-radius-container);
-	box-shadow: var(--mrl-shadows-lifted);
-	color: rgba(var(--mrl-white), 1);
-	display: flex;
-	gap: var(--mrl-space-inset);
-	height: max-content;
-	justify-content: space-between;
-	max-width: 32rem;
-	min-height: var(--mrl-spacing-09);
-	min-width: 8.75rem;
-	padding: var(--mrl-space-inset-control-small) var(--mrl-spacing-05)
-		var(--mrl-space-inset-control-small) var(--mrl-spacing-04);
-	pointer-events: auto;
-	width: fit-content;
-	z-index: $mrl-zIndex-notifications-toast;
-	&.closing {
-		animation: fadeout 0.3s forwards;
-		padding: 20px;
-	}
-	@keyframes fadeout {
-		from {
-			opacity: 1;
-		}
-		to {
-			opacity: 0;
-			visibility: hidden;
-		}
-	}
-	.iconWrapper {
-		align-items: center;
-		display: flex;
-		flex-shrink: 0;
-		height: var(--mrl-spacing-06);
-	}
-	.content {
-		align-items: center;
-		display: flex;
-		gap: var(--mrl-space-inset);
-	}
-	.primaryMessage {
-		font-family: var(--mrl-heading-font);
-		font-size: var(--mrl-font-size-03);
-		font-weight: var(--mrl-font-weight-04);
-		letter-spacing: var(--mrl-letter-spacing-03);
-		line-height: var(--mrl-line-height-08);
-	}
-	.secondaryMessage {
-		font-family: var(--mrl-body-font);
-		font-size: var(--mrl-font-size-03);
-		font-weight: var(--mrl-font-weight-01);
-		letter-spacing: var(--mrl-letter-spacing-03);
-		line-height: var(--mrl-line-height-08);
-	}
-	.cta-container {
-		align-items: center;
-		display: flex;
-		height: 100%;
-		justify-content: center;
-	}
-	.cta {
-		vertical-align: middle;
-		&--secondary {
-			margin-right: var(--mrl-spacing-02);
-		}
-		&--close {
-			margin-left: var(--mrl-spacing-02);
-		}
-	}
-	&.reducedPadding {
-		padding: var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-02) var(--mrl-spacing-04);
-		.content {
-			margin-right: var(--mrl-space-inline-sibling);
-		}
-	}
-	&.infoNotification {
-		background-color: rgba(var(--mrl-status-info), 1);
-	}
-	&.warningNotification {
-		background-color: rgba(var(--mrl-status-warning), 1);
-		color: var(--mrl-color-text);
-	}
-	&.successNotification {
-		background-color: rgba(var(--mrl-status-success), 1);
-	}
-	&.errorNotification {
-		background-color: rgba(var(--mrl-status-error), 1);
-	}
-	&.privateNotification {
-		background-color: rgba(var(--mrl-status-private), 1);
-	}
-	&.generalNotification {
-		background-color: var(--mrl-color-background-inverse);
-		color: var(--mrl-color-text-inverse);
-		max-width: 100%;
-		.secondaryMessage {
-			color: var(--mrl-color-text-inverse-secondary);
-		}
-	}
-	&.collaboratorNotification {
-		background-color: transparent;
-		.primaryMessage {
-			align-items: center;
-			display: flex;
-			gap: var(--mrl-spacing-04);
-		}
-		&.darkCollaborator {
-			color: var(--mrl-color-text);
-		}
-	}
-}

package/dist/styles/MrlToolbar/module.scss

@@ -1,53 +0,0 @@
-
-$medium-size: 3.5rem;
-$small-size: 3rem;
-$xsmall-size: 2rem;
-.MrlToolbar {
-	align-items: center;
-	background: var(--mrl-color-background);
-	border-radius: var(--mrl-border-radius-container);
-	box-shadow: var(--mrl-shadows-lifted);
-	cursor: default;
-	display: flex;
-	gap: var(--mrl-spacing-02);
-	min-height: $small-size;
-	padding: var(--mrl-spacing-03);
-	pointer-events: all;
-	transition: opacity var(--mrl-duration-03) var(--mrl-timing-m3);
-}
-.MrlToolbar-inverse {
-	background: var(--mrl-color-background-inverse);
-	box-shadow: none;
-	color: var(--mrl-color-text-inverse);
-}
-.MrlToolbar-skeleton.MrlToolbar-vertical {
-	background-color: rgba(var(--mrl-gray-30), 1);
-}
-.MrlToolbar-medium {
-	gap: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
-	min-height: $medium-size;
-	padding: calc(var(--mrl-spacing-02) + var(--mrl-spacing-01));
-}
-.MrlToolbar-xsmall {
-	gap: var(--mrl-spacing-01);
-	min-height: $xsmall-size;
-	padding: var(--mrl-spacing-02);
-}
-.MrlToolbar-vertical {
-	flex-direction: column;
-	min-height: 0;
-	min-width: $small-size;
-	&.MrlToolbar-medium {
-		min-width: $medium-size;
-	}
-	&.MrlToolbar-xsmall {
-		min-width: $xsmall-size;
-	}
-}
-.MrlToolbar-spaced {
-	gap: var(--mrl-spacing-05);
-	padding-left: var(--mrl-spacing-05);
-	.mrlButton + .mrlButton {
-		margin-left: calc(var(--mrl-spacing-03) / 2 * -1);
-	}
-}

package/dist/styles/MrlToolbarButton/module.scss

@@ -1,3 +0,0 @@
-.MrlToolbarButtonIcon {
-	margin-right: var(--mrl-spacing-03);
-}

package/dist/styles/MrlTooltipContent/global.scss

@@ -1,146 +0,0 @@
-
-@use 'sass:math';
-@use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
-$mrl-tooltip-arrow-horizontal-center: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
-$mrl-tooltip-arrow-vertical-center: calc(var(--mrl-tooltip-arrow-size) * -1 / 2 + 1px);
-$mrl-tooltip-arrow-size: math.hypot(8px, 5px);
-@use '../tooltip.mixins.scss' as *;
-@use './MrlTooltipContent.variables.scss';
-.mrl-tooltip-content {
-	background: var(--mrl-tooltip-background-color);
-	border-radius: var(--mrl-tooltip-border-radius);
-	color: var(--mrl-tooltip-text-color);
-	cursor: default;
-	font-family: var(--mrl-body-font);
-	font-size: var(--mrl-tooltip-font-size);
-	font-weight: var(--mrl-type-weight-title-secondary);
-	line-height: var(--mrl-tooltip-line-height);
-	max-width: calc(var(--mrl-spacing-09) * 7);
-	overflow-wrap: break-word;
-	padding: var(--mrl-tooltip-padding);
-	position: absolute;
-	transition-property: opacity;
-	white-space: normal;
-	width: max-content;
-	z-index: $mrl-zIndex-tooltips;
-}
-.mrl-tooltip-content__hover {
-	background: transparent;
-	position: absolute;
-}
-.mrl-tooltip-content::after {
-	background: transparent;
-	border-bottom: $mrl-tooltip-arrow-size solid var(--mrl-tooltip-background-color);
-	border-right: $mrl-tooltip-arrow-size solid transparent;
-	content: '';
-	height: 0;
-	position: absolute;
-	transform: rotate(135deg);
-	width: 0;
-}
-.mrl-tooltip-content[data-position='top'] {
-	bottom: 100%;
-	margin-bottom: var(--mrl-tooltip-trigger-offset);
-	right: 50%;
-	transform: translateX(50%);
-	&::after {
-		border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
-		bottom: $mrl-tooltip-arrow-vertical-center;
-		left: $mrl-tooltip-arrow-horizontal-center;
-		transform: rotate(315deg);
-	}
-	.mrl-tooltip-content__hover {
-		height: 10px;
-		left: 0;
-		top: 100%;
-		width: 100%;
-	}
-}
-.mrl-tooltip-content[data-anchor='start'] {
-	left: 0;
-	right: initial;
-	transform: none;
-	&::after {
-		left: var(--mrl-tooltip-arrow-spacing);
-	}
-	&.mrlIconButton--small-wrapper::after {
-		left: var(--mrl-spacing-04);
-	}
-	&.mrlIconButton--xsmall-wrapper::after {
-		left: var(--mrl-spacing-03);
-	}
-}
-.mrl-tooltip-content[data-anchor='end'] {
-	right: 0;
-	transform: none;
-	&::after {
-		left: auto;
-		right: var(--mrl-tooltip-arrow-spacing);
-	}
-	&.mrlIconButton--small-wrapper::after {
-		left: auto;
-		right: var(--mrl-spacing-04);
-	}
-	&.mrlIconButton--xsmall-wrapper::after {
-		left: auto;
-		right: var(--mrl-spacing-03);
-	}
-}
-.mrl-tooltip-content[data-position='bottom'] {
-	margin-top: var(--mrl-tooltip-trigger-offset);
-	top: 100%;
-	&::after {
-		border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
-		top: $mrl-tooltip-arrow-vertical-center;
-	}
-	.mrl-tooltip-content__hover {
-		height: 10px;
-		left: 0;
-		top: -10px;
-		width: 100%;
-	}
-}
-.mrl-tooltip-content[data-position='bottom'][data-anchor='center'] {
-	right: 50%;
-	transform: translateX(50%);
-	&::after {
-		left: calc(50% - var(--mrl-tooltip-arrow-size) / 2);
-	}
-}
-.mrl-tooltip-content[data-position='left'] {
-	left: initial;
-	margin-right: var(--mrl-tooltip-trigger-offset);
-	right: 100%;
-	top: 50%;
-	transform: translateY(-50%);
-	&::after {
-		border-top-right-radius: var(--mrl-tooltip-arrow-border-radius);
-		display: var(--mrl-tooltip-arrow-display-left-right);
-		right: $mrl-tooltip-arrow-vertical-center;
-		top: $mrl-tooltip-arrow-horizontal-center;
-	}
-	.mrl-tooltip-content__hover {
-		height: 23px;
-		right: -10px;
-		top: 0;
-		width: 100%;
-	}
-}
-.mrl-tooltip-content[data-position='right'] {
-	left: 100%;
-	margin-left: var(--mrl-tooltip-trigger-offset);
-	top: 50%;
-	transform: translateY(-50%);
-	&::after {
-		border-bottom-left-radius: var(--mrl-tooltip-arrow-border-radius);
-		display: var(--mrl-tooltip-arrow-display-left-right);
-		left: $mrl-tooltip-arrow-vertical-center;
-		top: $mrl-tooltip-arrow-horizontal-center;
-	}
-	.mrl-tooltip-content__hover {
-		height: 23px;
-		left: -10px;
-		top: 0;
-		width: 100%;
-	}
-}

package/dist/styles/MrlTooltipContent/variables.scss

@@ -1,17 +0,0 @@
-.mrl-tooltip-content {
-	--mrl-tooltip-background-color: var(--mrl-color-background-inverse);
-	--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);
-	--mrl-tooltip-border-radius: var(--mrl-border-radius-content-large);
-	--mrl-tooltip-font-size: var(--mrl-type-size-text-xsmall);
-	--mrl-tooltip-line-height: var(--mrl-type-line-height-text-xsmall);
-	--mrl-tooltip-padding: var(--mrl-spacing-02) var(--mrl-spacing-03);
-	--mrl-tooltip-arrow-size: 8px;
-	--mrl-tooltip-arrow-border-radius: 1px;
-	--mrl-tooltip-arrow-spacing: var(--mrl-spacing-06);
-	--mrl-tooltip-arrow-display-left-right: none;
-	--mrl-tooltip-trigger-offset: var(--mrl-spacing-03);
-	&--inverse {
-		--mrl-tooltip-background-color: var(--mrl-gray-80);
-		--mrl-tooltip-text-color: var(--mrl-color-text-inverse-secondary);
-	}
-}

package/dist/styles/MrlTopbar/module.scss

@@ -1,12 +0,0 @@
-
-@use '../layout.variables' as *;
-.MrlTopbar {
-	min-height: $topbar-height;
-	width: 100%;
-	&--mobile {
-		padding-left: calc(var(--mrl-spacing-10) + var(--mrl-spacing-01));
-	}
-}
-.MrlTopbar--no-sidebar {
-	margin-left: 0;
-}

package/dist/styles/a11y-helpers/global.scss

@@ -1,5 +0,0 @@
-
-@use './a11y.mixins.scss' as *;
-.mrl-visually-hidden {
-	@include mrl-a11y-text;
-}

package/dist/styles/a11y-helpers/mixins.scss

@@ -1,11 +0,0 @@
-
-@mixin mrl-a11y-text() {
-	clip: rect(1px, 1px, 1px, 1px);
-	clip-path: inset(50%);
-	height: 1px;
-	margin: -1px;
-	overflow: hidden;
-	padding: 0;
-	position: absolute;
-	width: 1px;
-}

package/dist/styles/button/global.scss

@@ -1,38 +0,0 @@
-
-@use '~@muraldevkit/ds-foundation/src/styles/_mixins' as *;
-@use '~@muraldevkit/ds-foundation/src/styles/skeletons/button' as *;
-@use './button.mixins.scss' as *;
-$mrl-interaction-scope: ':not(#{$mrl-button-toggle-selector}):not([aria-disabled="true"])';
-.mrlIconButton,
-.mrlButton {
-	@include mrl-button-common;
-	display: inline-flex;
-	position: relative;
-	visibility: inherit;
-	&:focus-visible {
-		@include mrl-focus($position: 'none');
-	}
-	&--inverse:focus-visible,
-	&--ghost-inverse:focus-visible {
-		@include mrl-focus($is-inverse: 'true');
-	}
-	&:hover {
-		cursor: pointer;
-	}
-	&[aria-disabled='true'] {
-		@include mrl-button-common-disabled;
-	}
-	&[aria-disabled='true']:hover {
-		@include mrl-button-common-disabled;
-	}
-	&:hover#{$mrl-interaction-scope} {
-		@include mrl-button-common-hover;
-	}
-	&:active#{$mrl-interaction-scope} {
-		@include mrl-button-common-active;
-	}
-	&--skeleton,
-	&--skeleton[aria-disabled='true'] {
-		@include mrl-button-skeleton;
-	}
-}

package/dist/styles/button/mixins.scss

@@ -1,42 +0,0 @@
-
-$mrl-button-toggle-selector: '[aria-pressed="true"],[aria-expanded="true"],[aria-selected="true"],[aria-checked="true"]';
-@mixin mrl-button-common-motion() {
-	transition: all var(--mrl-duration-03) var(--mrl-timing-m1);
-}
-@mixin mrl-button-common() {
-	background: var(--mrl-button-background-color);
-	border: none;
-	border-radius: var(--mrl-button-border-radius);
-	box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color);
-	color: var(--mrl-button-text-color);
-	justify-content: center;
-	outline: none;
-	@include mrl-button-common-motion;
-}
-@mixin mrl-button-common-hover() {
-	background: var(--mrl-button-background-color-hover);
-	box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-hover);
-	color: var(--mrl-button-text-color-hover);
-}
-@mixin mrl-button-common-active() {
-	background: var(--mrl-button-background-color-active);
-	box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-active);
-	color: var(--mrl-button-text-color-active);
-}
-@mixin mrl-button-common-disabled() {
-	background: var(--mrl-button-background-color-disabled);
-	box-shadow: inset 0 0 0 var(--mrl-button-border-width) var(--mrl-button-border-color-disabled);
-	color: var(--mrl-button-text-color-disabled);
-	cursor: default;
-}
-@mixin mrl-button-common-selected-underline {
-	background: var(--mrl-color-accent);
-	border-radius: 1px 1px 0 0;
-	bottom: calc((var(--mrl-button-underline-width) + var(--mrl-spacing-02)) * -1);
-	content: '';
-	display: block;
-	height: var(--mrl-button-underline-width);
-	left: var(--mrl-spacing-02);
-	position: absolute;
-	width: calc(100% - (var(--mrl-spacing-02) * 2));
-}