@a-type/ui 6.0.49 → 6.0.51

package/dist/components/dialog/Dialog.module.css

@@ -1,188 +0,0 @@
-.overlay {
-	position: fixed;
-	inset: 0;
-	@apply --mx-shadow;
-	/* --mx-shadow-value: inset 0 30px 60px 0px
-		--fn-color-faded(var(--m-color-main-ink), 20%); */
-	@apply --mx-bg(var(--m-color-neutral-ink));
-	@apply --mx-bg-faded(5%);
-	border-top: var(--m-lineWidth) solid var(--m-color-neutral);
-	transition: all var(--m-duration) var(--m-easing);
-	backdrop-filter: blur(2px);
-
-	&[data-starting-style],
-	&[data-ending-style] {
-		opacity: 0;
-	}
-}
-
-.content {
-	pointer-events: auto;
-	position: fixed;
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-	overflow: clip;
-	transition: all var(--m-duration) var(--m-easing);
-	--shadow-dir: 1;
-	@apply --mx-shadow;
-	--mx-shadow-value: 0 calc(var(--shadow-dir, 1) * var(--m-shadow-xl-y))
-		var(--m-shadow-xl-blur) var(--m-shadow-xl-spread) var(--m-shadow-xl-color);
-	@apply --mx-bg(var(--m-surface-ambient-bg));
-	@apply --mx-borderColor(var(--m-color-neutral-heavy));
-
-	left: 50%;
-	top: 50%;
-	max-height: 85vh;
-	max-width: 450px;
-	width: 90vw;
-	border-radius: var(--m-surface-radius);
-	transform: translate3d(-50%, -50%, 0);
-	will-change: transform, opacity;
-
-	&[data-starting-style],
-	&[data-ending-style] {
-		opacity: 0;
-		transform: translate3d(-50%, -45%, 0) scale(0.95);
-	}
-
-	&:not([data-disable-sheet='true']) {
-		@media (max-width: 600px) {
-			--shadow-dir: -1;
-			top: auto;
-			bottom: 0;
-			left: 0;
-			right: 0;
-			max-width: unset;
-			height: min-content;
-			width: 100vw;
-			border-radius: var(--m-surface-radius) var(--m-surface-radius) 0 0;
-			border-bottom-width: 0;
-			transform: translate(0, 0);
-			padding-bottom: env(safe-area-inset-bottom);
-			padding-top: var(--m-space-lg);
-
-			&[data-starting-style],
-			&[data-ending-style] {
-				opacity: 0;
-				transform: translate3d(0, 100%, 0) scale(0.98);
-			}
-
-			&[data-width='lg'] {
-				max-width: 800px;
-			}
-			&[data-width='md'] {
-				max-width: 600px;
-			}
-			&[data-width='sm'] {
-				max-width: 300px;
-			}
-
-			&[data-keyboard-behavior='overlay'] {
-				bottom: calc(
-					var(--mock-virtual-keyboard-height, env(keyboard-inset-height, 0px)) +
-						var(--gesture-y, 0px)
-				);
-				max-height: calc(
-					95vh -
-						var(--mock-virtual-keyboard-height, env(keyboard-inset-height, 0px))
-				);
-			}
-			&[data-keyboard-behavior='displace'] {
-				bottom: calc(
-					var(--viewport-bottom-offset, 0px) + var(--gesture-y, 0px)
-				);
-				max-height: calc(0.85 * var(--viewport-height, 100vh));
-			}
-		}
-	}
-}
-
-.contentScrollArea {
-	width: 100%;
-	height: 100%;
-}
-
-.contentScrollAreaContent {
-	display: flex;
-	flex-direction: column;
-	gap: var(--m-space-md);
-	padding: var(--m-surface-padding);
-}
-
-.swipeHandle {
-	display: block;
-	position: absolute;
-	top: 0;
-	left: 50%;
-	transform: translateX(-50%) scale(1);
-	width: 20%;
-	cursor: grab;
-	will-change: transform;
-	touch-action: none;
-	padding-block: var(--m-space-sm);
-	z-index: 1;
-
-	@media (min-width: 600px) {
-		display: none;
-	}
-}
-.swipeHandleBar {
-	height: 4px;
-	width: 100%;
-	@apply --mx-bg(var(--m-color-neutral));
-	border-radius: var(--m-radius-lg);
-}
-
-.close {
-	position: absolute;
-	right: var(--m-space-sm);
-	top: var(--m-space-sm);
-	z-index: 101;
-	display: flex;
-
-	&[data-show-on-mobile='false'] {
-		@media (max-width: 600px) {
-			display: none;
-		}
-	}
-}
-
-.title {
-	@apply --mx-fg(var(--m-color-neutral-ink));
-	font-size: var(--m-prose-primary-size);
-	font-weight: var(--m-prose-primary-weight);
-	line-height: var(--m-prose-primary-lineHeight);
-	margin-block-end: var(--m-space-xs);
-	margin-block-start: 0;
-}
-
-.description {
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	font-size: var(--m-prose-ambient-size);
-	line-height: var(--m-prose-ambient-lineHeight);
-	margin: 0;
-	margin-block-end: var(--m-space-xs);
-}
-
-.actions {
-	position: sticky;
-	bottom: var(--m-space-md);
-	z-index: 100;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: center;
-	justify-content: end;
-	align-self: end;
-	padding-bottom: 1px;
-	@apply --mx-shadow;
-	/* override blur in case user turned it off */
-	--mx-shadow-value: 0 calc(-1 * var(--m-shadow-md-y)) 16px
-		var(--m-shadow-md-spread) var(--m-color-neutral-paper);
-	@apply --mx-bg(var(--m-surface-ambient-bg));
-	@apply --mx-bg-faded(50%);
-	margin-block-start: var(--m-space-md);
-	gap: var(--m-space-sm);
-	border-radius: var(--m-surface-radius);
-}

package/dist/components/divider/Divider.module.css

@@ -1,10 +0,0 @@
-.root {
-	position: relative;
-	height: --fn-literal(1px);
-	width: 100%;
-	@apply --mx-bg(var(--m-color-neutral-ink));
-
-	&[data-padded] {
-		margin-block: var(--m-space-md);
-	}
-}

package/dist/components/dropdownMenu/DropdownMenu.module.css

@@ -1,3 +0,0 @@
-.content {
-	min-width: 220px;
-}

package/dist/components/editableText/EditableText.module.css

@@ -1,44 +0,0 @@
-.input {
-	& input {
-		font-size: inherit;
-	}
-}
-
-.button {
-	width: auto;
-	display: inline-flex;
-	align-items: center;
-	text-align: start;
-	font-size: inherit;
-	cursor: pointer;
-
-	@apply --mx-shadow;
-	--mx-shadow-value: none;
-
-	@apply --mx-fg(inherit);
-	@apply --mx-bg(transparent);
-	@apply --mx-borderColor(transparent);
-
-	padding: var(--m-control-padding);
-	gap: var(--m-space-sm);
-	border-radius: var(--m-control-radius);
-
-	&:hover,
-	&:focus-visible {
-		@apply --mx-bg(var(--m-color-neutral-light));
-		@apply --mx-bg-faded(80%);
-	}
-
-	&:focus {
-		outline: none;
-	}
-	&:focus-visible {
-		--mx-ring-value: --fn-focus-ring();
-	}
-}
-
-.icon {
-	opacity: 80%;
-	font-size: 1rem;
-	@apply --mx-stroke(var(--m-color-main-heavy));
-}

package/dist/components/emojiPicker/EmojiPicker.module.css

@@ -1,84 +0,0 @@
-.root {
-	height: --fn-literal(368px);
-	width: fit-content;
-	display: flex;
-	flex-direction: column;
-	isolation: isolate;
-	gap: var(--m-space-sm);
-	@apply --mx-bg(var(--m-surface-ambient-bg));
-}
-
-.search {
-	z-index: 10;
-	min-width: --fn-literal(80px);
-	width: 100%;
-}
-
-.viewport {
-	min-height: 0;
-	flex: 1;
-	overflow: clip;
-	@apply --mx-bg(var(--m-surface-ambient-bg));
-	border-radius: var(--m-surface-radius);
-}
-.viewportInner {
-	position: relative;
-	outline: hidden;
-}
-
-.loading {
-	position: absolute;
-	inset: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	@apply --mx-bg(inherit);
-}
-
-.empty {
-	position: absolute;
-	inset: 0;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	@apply --mx-bg(inherit);
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	font-size: var(--m-prose-ambient-size);
-	line-height: var(--m-prose-ambient-lineHeight);
-	font-weight: var(--m-prose-ambient-weight);
-}
-
-.categoryHeader {
-	position: sticky;
-	top: 0;
-	@apply --mx-bg(inherit);
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding: var(--m-space-sm) var(--m-space-md);
-	font-weight: semibold;
-	font-size: var(--m-prose-ambient-size);
-	line-height: var(--m-prose-ambient-lineHeight);
-}
-
-.row {
-	scroll-margin-block: var(--m-space-xs);
-	padding-inline: var(--m-space-xs);
-}
-
-.emoji {
-	padding: var(--m-space-xs);
-	font-size: --fn-literal(20px);
-}
-
-.list {
-	user-select: none;
-	padding-block-end: var(--m-space-md);
-}
-
-.skinToneButton {
-	padding: var(--m-space-xs);
-	font-size: --fn-literal(20px);
-}
-
-.skinToneSelector {
-	margin-right: auto;
-}

package/dist/components/forms/EmojiField.module.css

@@ -1,8 +0,0 @@
-.triggerIcon {
-	height: 20px;
-	width: 20px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: 20px;
-}

package/dist/components/forms/Field.module.css

@@ -1,62 +0,0 @@
-.root {
-	display: grid;
-	grid-template-areas: 'label' 'control' 'description';
-	justify-content: start;
-
-	&[data-horizontal] {
-		flex-direction: row;
-		align-items: center;
-		grid-template-areas: 'control label' 'description description';
-		grid-template-columns: auto 1fr;
-		&[data-reverse] {
-			grid-template-areas: 'label control' 'description description';
-			grid-template-columns: auto 1fr;
-		}
-	}
-
-	&[data-stretch] {
-		align-self: stretch;
-		justify-content: stretch;
-	}
-}
-
-.control {
-	grid-area: control;
-
-	[data-stretch] & {
-		align-self: stretch;
-		justify-content: stretch;
-		width: 100%;
-	}
-}
-
-.label {
-	grid-area: label;
-	@apply --mx-prose-ambient;
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	font-weight: var(--m-text-weight-bold);
-	margin-bottom: var(--m-space-xs);
-	margin-left: calc(var(--m-global-shape-roundness) * var(--m-space-md));
-
-	[data-horizontal] & {
-		@apply --mx-fg(var(--m-color-neutral-ink));
-		font-weight: var(--m-text-weight-normal);
-		margin-block-start: --fn-literal(5px);
-
-		[data-reverse] & {
-			margin-inline-start: 0;
-			margin-inline-end: calc(
-				var(--m-global-shape-roundness) * var(--m-space-md)
-			);
-		}
-	}
-}
-
-.description {
-	grid-area: description;
-	@apply --mx-prose-ambient;
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	font-style: italic;
-	margin-top: var(--m-space-sm);
-	margin-left: calc(var(--m-global-shape-roundness) * var(--m-space-md));
-}

package/dist/components/forms/Form.module.css

@@ -1,6 +0,0 @@
-.form {
-	display: flex;
-	align-items: start;
-	flex-direction: column;
-	gap: var(--m-space-lg);
-}

package/dist/components/forms/NumberStepperField.module.css

@@ -1,5 +0,0 @@
-.root {
-	display: flex;
-	flex-direction: column;
-	gap: var(--m-space-xs);
-}

package/dist/components/forms/TextField.module.css

@@ -1,11 +0,0 @@
-.root {
-	display: flex;
-	flex-direction: column;
-	align-items: stretch;
-	align-self: stretch;
-	gap: var(--m-space-xs);
-}
-
-.input {
-	width: 100%;
-}

package/dist/components/horizontalList/HorizontalList.module.css

@@ -1,50 +0,0 @@
-.root {
-	width: 100%;
-	max-height: 300px;
-	display: flex;
-	flex-direction: column;
-}
-
-.viewport {
-	display: flex;
-	flex-direction: row;
-}
-
-.content {
-	width: max-content;
-	display: flex;
-	flex-shrink: 0;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--m-space-sm);
-	padding: var(--m-space-sm) var(--m-space-sm) var(--m-space-md)
-		var(--m-space-sm);
-}
-
-.toggleButton {
-	&[data-open='false'] {
-		height: 100%;
-		border-inline-end: var(--m-lineWidth) solid var(--m-color-neutral);
-		border-top-left-radius: var(--m-radius-sm);
-		border-bottom-left-radius: var(--m-radius-sm);
-		border-top-right-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-}
-
-.toggleButtonWrapper {
-	position: sticky;
-	left: 0;
-	height: 100%;
-	top: var(--m-space-sm);
-	z-index: 1;
-	flex-shrink: 0;
-	@apply --mx-bg(inherit);
-}
-
-.chevronIcon {
-	transition: transform var(--m-duration) var(--m-easing);
-	&[data-flip='true'] {
-		transform: rotate(180deg);
-	}
-}

package/dist/components/icon/Icon.module.css

@@ -1,20 +0,0 @@
-.root {
-	fill: none;
-	flex-shrink: 0;
-
-	--size: 1em;
-	width: var(--size);
-	height: var(--size);
-
-	&[data-filled] {
-		fill: var(--m-color-main);
-	}
-}
-
-.spinner {
-	display: inline-block;
-	flex-shrink: 0;
-	--size: 1em;
-	width: var(--size);
-	height: var(--size);
-}

package/dist/components/imageUploader/ImageUploader.module.css

@@ -1,67 +0,0 @@
-.root {
-	position: relative;
-	border-radius: var(--m-surface-radius);
-}
-
-.input {
-	pointer-events: none;
-	position: absolute;
-	inset: 0;
-	opacity: 0;
-}
-
-.cameraRoot {
-	position: absolute;
-	z-index: 1;
-	height: 100%;
-	width: 100%;
-}
-
-.cameraCancelButton {
-	position: absolute;
-	top: var(--m-space-sm);
-	left: var(--m-space-sm);
-	@apply --mx-fg(var(--m-color-neutral-paper));
-}
-
-.removeButton {
-	position: absolute;
-	top: var(--m-space-sm);
-	right: var(--m-space-sm);
-	z-index: 10;
-	height: 32px;
-	width: 32px;
-	cursor: pointer;
-	padding: var(--m-space-sm);
-	@apply --mx-bg(var(--m-surface-ambient-bg));
-	@apply --mx-fg(var(--m-surface-ambient-fg));
-	@apply --mx-shadow;
-	border-radius: var(--m-radius-lg);
-	border: none;
-}
-
-.imagePreview {
-	width: 100%;
-	height: 100%;
-	object-fit: cover;
-	object-position: center;
-	border-radius: inherit;
-}
-
-.emptyControls {
-	position: absolute;
-	inset: 0;
-	min-height: 120px;
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: var(--m-space-sm);
-	@apply --mx-bg(var(--m-surface-primary-bg));
-	@apply --mx-fg(var(--m-surface-primary-fg));
-	border-radius: inherit;
-
-	&[dragging-over='true'] {
-		@apply --mx-bg-heavier(2);
-	}
-}

package/dist/components/img/Img.module.css

@@ -1,42 +0,0 @@
-.root {
-	&[data-full='width'],
-	&[data-full='true'] {
-		width: 100%;
-	}
-	&[data-full='height'],
-	&[data-full='true'] {
-		height: 100%;
-	}
-
-	&[data-fit='cover'] {
-		object-fit: cover;
-	}
-	&[data-fit='contain'] {
-		object-fit: contain;
-	}
-	&[data-fit='fill'] {
-		object-fit: fill;
-	}
-	&[data-fit='none'] {
-		object-fit: none;
-	}
-	&[data-fit='scale-down'] {
-		object-fit: scale-down;
-	}
-
-	&[data-position='top'] {
-		object-position: top;
-	}
-	&[data-position='bottom'] {
-		object-position: bottom;
-	}
-	&[data-position='left'] {
-		object-position: left;
-	}
-	&[data-position='right'] {
-		object-position: right;
-	}
-	&[data-position='center'] {
-		object-position: center;
-	}
-}

package/dist/components/input/Input.module.css

@@ -1,100 +0,0 @@
-.input {
-	display: flex;
-	flex-grow: 1;
-	user-select: auto;
-	padding: var(--m-control-padding-block) 0px;
-	min-width: 60px;
-
-	@apply --mx-fg(inherit);
-	@apply --mx-bg(transparent);
-	border: none;
-
-	font-family: inherit;
-	font-size: inherit;
-	line-height: inherit;
-
-	&::placeholder {
-		@apply --mx-fg(var(--m-color-neutral-heavy));
-	}
-
-	/* Focus visuals handled by wrapper */
-	&:focus,
-	&:focus-visible {
-		outline: none;
-	}
-
-	/* &:first-child {
-		padding-left: var(--m-control-padding-inline);
-		border-top-left-radius: inherit;
-		border-bottom-left-radius: inherit;
-	}
-	&:last-child {
-		padding-right: var(--m-control-padding-inline);
-		border-top-right-radius: inherit;
-		border-bottom-right-radius: inherit;
-	} */
-}
-
-.inputBorder {
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	gap: var(--m-space-xs);
-	width: max-content;
-	overflow: clip;
-
-	transition: box-shadow var(--m-duration) var(--m-easing);
-
-	@apply --mx-shadow;
-	--mx-shadow-value: inset var(--m-shadow-sm);
-
-	@apply --mx-fg(var(--m-control-fg));
-	@apply --mx-bg(var(--m-control-bg));
-	@apply --mx-borderColor(var(--m-control-borderColor));
-	border-radius: var(--m-control-radius);
-
-	font-size: var(--m-prose-secondary-size);
-	line-height: var(--m-prose-secondary-lineHeight);
-	font-weight: var(--m-prose-secondary-weight);
-
-	&:has(input:disabled),
-	&:has(textarea:disabled) {
-		--mx-shadow-value: 0 0 0 0 transparent;
-		@apply --mx-bg(transparent);
-		@apply --mx-borderColor-lighter(2);
-
-		& input:placeholder,
-		& textarea::placeholder {
-			@apply --mx-fg-lighter(2);
-		}
-	}
-
-	&:has(input:focus-visible[data-focus-clicked='false']),
-	&:has(textarea:focus-visible[data-focus-clicked='false']) {
-		@apply --mx-bg-lighter(3);
-		--mx-ring-value: --fn-focus-ring();
-	}
-	&:has(input:focus),
-	&:has(textarea:focus) {
-		@apply --mx-bg-lighter(3);
-		--mx-ring-value: --fn-ring(var(--m-color-main-light), 4px);
-	}
-
-	&:has(input:hover:not(:disabled):not(:focus)),
-	&:has(textarea:hover:not(:disabled):not(:focus)) {
-		@apply --mx-bg-lighter(2);
-		@apply --mx-borderColor-heavier(2);
-	}
-
-	& > [data-icon] {
-		margin-inline: var(--m-space-sm);
-	}
-
-	padding-inline: var(--m-control-padding-inline);
-	& > [data-input-border-flush]:first-child {
-		margin-left: calc(-1 * var(--m-control-padding-inline));
-	}
-	& > [data-input-border-flush]:last-child {
-		margin-right: calc(-1 * var(--m-control-padding-inline));
-	}
-}