@a-type/ui 6.0.50 → 6.0.52

package/dist/components/card/Card.module.css

@@ -1,183 +0,0 @@
-.root {
-	position: relative;
-	height: max-content;
-	display: flex;
-	flex-direction: column;
-	overflow: clip;
-
-	@apply --mx-shadow(var(--m-shadow-sm));
-	border-width: var(--m-lineWidth-sm);
-	border-radius: var(--m-surface-radius);
-
-	font-size: var(--m-prose-secondary-size);
-	line-height: var(--m-prose-secondary-lineHeight);
-	font-weight: var(--m-prose-secondary-weight);
-
-	padding: 0;
-
-	&[data-emphasis='ambient'] {
-		@apply --mx-surface-ambient;
-		padding: 0;
-		@apply --mx-bg(--fn-color-heavier(var(--m-surface-ambient-bg), 0.2));
-		@apply --mx-borderColor-faded(50%);
-	}
-	&[data-emphasis='secondary'] {
-		@apply --mx-surface-secondary;
-		padding: 0;
-		@apply --mx-borderColor-faded(50%);
-	}
-	&[data-emphasis='primary'] {
-		@apply --mx-surface-primary;
-		padding: 0;
-		@apply --mx-borderColor-faded(50%);
-	}
-}
-
-.main {
-	position: relative;
-	z-index: 1;
-	min-height: --fn-literal(40px);
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-	align-items: start;
-	gap: var(--m-space-xs);
-
-	text-align: start;
-	font-size: var(--m-prose-ambient-size);
-	line-height: var(--m-prose-ambient-lineHeight);
-	font-weight: var(--m-prose-ambient-weight);
-
-	padding: var(--m-space-md);
-	padding-bottom: var(--m-space-xs);
-	gap: var(--m-space-sm);
-
-	transition: all var(--m-duration) var(--m-easing);
-
-	@apply --mx-shadow;
-	/* Purposefully don't use mixin, allow children to inherit from card root */
-	background-color: transparent;
-
-	border-top-left-radius: inherit;
-	border-top-right-radius: inherit;
-	border-width: 0;
-
-	&[data-interactive] {
-		cursor: pointer;
-
-		&:hover,
-		&:focus-visible,
-		&[data-focus-visible] {
-			@apply --mx-fg(var(--m-color-neutral-ink));
-			background-color: --fn-color-faded(var(--m-color-neutral-ink), 10%);
-		}
-
-		&:focus {
-			outline: none;
-		}
-		&:focus-visible,
-		&[data-focus-visible] {
-			@apply --mx-ring(inset 0 0 0 2px var(--m-color-neutral-ink));
-		}
-
-		&:disabled,
-		&[data-disabled] {
-			cursor: default;
-		}
-	}
-}
-
-.title {
-	z-index: 1;
-	padding: var(--m-space-xs) var(--m-space-md);
-
-	@apply --mx-prose-primary;
-
-	text-overflow: ellipsis;
-	white-space: nowrap;
-	overflow: clip;
-	max-width: 100%;
-	display: block;
-	border-radius: var(--m-radius-md);
-
-	@apply --mx-bg(inherit);
-}
-
-.content {
-	z-index: 1;
-	display: flex;
-	flex-direction: row;
-	gap: var(--m-space-sm);
-	align-items: center;
-	border-radius: var(--m-radius-sm);
-
-	padding: var(--m-space-sm) var(--m-space-md);
-
-	font-size: var(--m-prose-ambient-size);
-	line-height: 1;
-	font-weight: var(--m-prose-ambient-weight);
-
-	@apply --mx-bg(inherit);
-	@apply --mx-bg-faded(70%);
-
-	&[data-unstyled] {
-		background-color: unset;
-		padding: 0;
-		border-width: 0;
-	}
-}
-
-.image {
-	position: absolute;
-	bottom: 0;
-	right: 0;
-	top: 0;
-	z-index: 0;
-	height: 100%;
-	width: 100%;
-
-	background-size: cover;
-	background-position: center;
-	object-fit: cover;
-}
-
-.footer {
-	position: relative;
-	z-index: 1;
-	display: flex;
-	flex-direction: row;
-	flex-shrink: 0;
-	padding: var(--m-space-md);
-}
-
-.actions {
-	display: flex;
-	flex-direction: row;
-	gap: var(--m-space-sm);
-	align-items: center;
-
-	margin: auto auto auto --fn-literal(0px);
-	padding: 0;
-
-	@apply --mx-bg(--fn-color-faded(var(--m-surface-ambient-bg), 50%));
-	/* @apply --mx-borderColor(var(--m-surface-ambient-borderColor));
-	border-width: var(--m-lineWidth-sm); */
-	border-radius: var(--m-action-radius);
-}
-
-.menu {
-	margin: auto;
-	margin-right: 0;
-	padding: 0;
-
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-
-	gap: var(--m-space-xs);
-
-	@apply --mx-bg(--fn-color-faded(var(--m-surface-ambient-bg), 50%));
-	@apply --mx-borderColor(var(--m-surface-ambient-borderColor));
-	border-width: var(--m-lineWidth-sm);
-	border-radius: var(--m-action-radius);
-}

package/dist/components/checkbox/Checkbox.module.css

@@ -1,74 +0,0 @@
-@keyframes checkbox-fade {
-	from {
-		background-color: var(--mx-bg-ref);
-		opacity: 1;
-	}
-	to {
-		background-color: transparent;
-		opacity: 0.9;
-		border-color: transparent;
-		box-shadow: none;
-	}
-}
-
-.root {
-	position: relative;
-	display: block;
-	flex-shrink: 0;
-
-	--size: 28px;
-	height: var(--size);
-	width: var(--size);
-
-	cursor: pointer;
-
-	transition: var(--m-duration) var(--m-easing);
-
-	@apply --mx-shadow;
-	@apply --mx-bg(var(--m-control-bg));
-	@apply --mx-borderColor(var(--m-control-borderColor));
-	border-radius: var(--m-control-radius);
-	border-width: var(--m-lineWidth-md);
-
-	&:focus {
-		outline: none;
-	}
-	&:focus-visible {
-		--mx-ring-value: --fn-focus-ring();
-	}
-
-	&:hover:not(:disabled) {
-		@apply --mx-bg-lighter(2);
-		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 2px);
-	}
-
-	&:active:not(:disabled) {
-		@apply --mx-bg-heavier(1);
-		--mx-ring-value: --fn-ring(var(--mx-bg-ref), 2px);
-	}
-
-	&:disabled {
-		box-shadow: none;
-		@apply --mx-bg(transparent);
-		@apply --mx-borderColor(var(--m-color-neutral-light));
-	}
-
-	&[data-checked] {
-		@apply --mx-bg(var(--m-color-main));
-		@apply --mx-borderColor(var(--m-color-main-ink));
-
-		&[data-checked-mode='faded'] {
-			animation-name: checkbox-fade;
-			animation-duration: 5s;
-			animation-fill-mode: forwards;
-		}
-	}
-}
-
-.indicator {
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	color: var(--m-color-main-ink);
-}

package/dist/components/chip/Chip.module.css

@@ -1,32 +0,0 @@
-.root {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--m-space-md);
-	white-space: nowrap;
-
-	@apply --mx-bg(var(--m-color-neutral-paper));
-	@apply --mx-fg(contrast-color(var(--mx-bg-ref)));
-	@apply --mx-borderColor(var(--m-color-main-heavy));
-
-	border-width: var(--m-lineWidth-sm);
-	border-radius: var(--m-action-radius);
-
-	font-size: var(--m-prose-ambient-size);
-	line-height: normal;
-	font-weight: var(--m-prose-ambient-weight);
-	font-family: var(--m-prose-ambient-font);
-
-	&& {
-		padding: var(--m-space-sm) var(--m-space-md);
-	}
-
-	&[data-emphasis='primary'] {
-		@apply --mx-bg(var(--m-color-main-wash));
-		@apply --mx-borderColor(var(--m-color-main-heavy));
-	}
-	&[data-emphasis='ambient'] {
-		@apply --mx-bg(transparent);
-		@apply --mx-borderColor(transparent);
-		@apply --mx-fg(var(--m-color-neutral-ink));
-	}
-}

package/dist/components/collapsible/Collapsible.module.css

@@ -1,36 +0,0 @@
-.root {
-	overflow: clip;
-	transition: all var(--m-duration) var(--m-easing);
-
-	&[data-horizontal],
-	&[data-both] {
-		width: var(--collapsible-panel-width);
-	}
-	&[data-vertical],
-	&[data-both] {
-		height: var(--collapsible-panel-height);
-	}
-
-	&[data-starting-style],
-	&[data-ending-style] {
-		&[data-vertical],
-		&[data-both] {
-			height: 0;
-		}
-		&[data-horizontal],
-		&[data-both] {
-			width: 0;
-		}
-	}
-
-	&[data-hidden]:not([hidden='until-found']) {
-		display: none;
-	}
-}
-
-.icon {
-	transition: transform var(--m-duration) var(--m-easing);
-	[data-panel-open] & {
-		transform: rotate(180deg);
-	}
-}

package/dist/components/combobox/Combobox.module.css

@@ -1,170 +0,0 @@
-.backdrop {
-	position: fixed;
-	inset: 0;
-}
-
-.empty:not(:empty) {
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding: var(--m-space-sm);
-	font-size: var(--m-prose-ambient-size);
-	line-height: var(--m-prose-ambient-lineHeight);
-	font-weight: var(--m-prose-ambient-weight);
-}
-
-.group {
-	display: flex;
-	flex-direction: column;
-	overflow: clip;
-	padding: var(--m-space-md);
-	gap: var(--m-space-xs);
-}
-
-.groupItem {
-	@apply --mx-ring;
-	&[data-highlighted] {
-		@apply --mx-ring(--fn-ring(var(--m-color-main-mid), 2px));
-	}
-}
-
-.groupItemList {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: var(--m-space-xs);
-}
-
-.groupLabel {
-	text-transform: uppercase;
-	width: 100%;
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding-inline: var(--m-space-xs);
-	font-size: var(--m-prose-ambient-size);
-	line-height: var(--m-prose-ambient-lineHeight);
-	font-weight: var(--m-prose-ambient-weight);
-}
-
-.icon {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	flex-shrink: 0;
-	transition: transform var(--m-duration) var(--m-easing);
-
-	&[data-open] {
-		transform: rotate(180deg);
-	}
-}
-
-.chips {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	align-items: center;
-	gap: var(--m-space-xs);
-	padding-inline-start: var(--m-space-md);
-}
-
-.chipsList {
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: var(--m-space-xs);
-	padding-inline: var(--m-space-sm);
-	margin-inline-start: calc(-1 * var(--m-space-md));
-
-	&:empty {
-		display: none;
-	}
-}
-
-.chipInput {
-	min-width: 3ch;
-	flex-grow: 1;
-	padding-inline-start: 0px;
-}
-
-.chipInputWrapper {
-	max-width: 100%;
-	min-width: 12ch;
-	display: flex;
-	flex-direction: row;
-	flex-grow: 1;
-	align-items: center;
-	gap: var(--m-space-xs);
-}
-
-.chip {
-	margin-block: auto;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	padding-inline: var(--m-space-sm);
-	gap: var(--m-space-xs);
-}
-
-.chipRemove {
-	min-height: 0;
-	min-width: 0;
-	padding: 0;
-	line-height: 1;
-	margin-block: calc(-1 * var(--m-space-xs));
-	margin-inline-end: calc(-1 * var(--m-space-sm));
-}
-
-.item[data-selected] {
-	@apply --mx-fg(var(--m-color-main-ink));
-	@apply --mx-bg-heavier(1);
-}
-
-.itemIndicator {
-	margin-inline-start: auto;
-	height: --fn-literal(10px);
-	width: --fn-literal(10px);
-	stroke-width: var(--m-lineWidth-lg);
-}
-
-.list {
-	display: flex;
-	flex-direction: column;
-	outline: none;
-	overscroll-behavior: contain;
-	overflow-y: auto;
-	overflow-x: clip;
-
-	&:empty {
-		padding: 0;
-	}
-}
-
-.popup {
-	width: var(--anchor-width);
-	display: flex;
-	flex-direction: column;
-}
-
-.row {
-	display: flex;
-	align-items: center;
-	gap: var(--m-space-xs);
-}
-
-.multiValue {
-	max-width: 100%;
-	display: flex;
-	flex-direction: row;
-	flex-wrap: wrap;
-	gap: var(--m-space-xs);
-}
-
-.clearAndCaret {
-	display: flex;
-	flex-shrink: 0;
-	align-items: center;
-	margin-right: calc(-1 * var(--m-control-padding-inline));
-}
-
-.details {
-	@apply --mx-prose-ambient;
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-	padding: var(--m-space-md);
-}

package/dist/components/datePicker/Calendar.module.css

@@ -1,167 +0,0 @@
-.monthRow {
-	width: 100%;
-	display: flex;
-	flex-direction: row;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.monthLabel {
-	min-width: 0;
-	align-self: center;
-	overflow: hidden;
-	white-space: nowrap;
-	text-overflow: ellipsis;
-	text-align: center;
-	font-size: var(--m-prose-ambient-size);
-	font-weight: bold;
-}
-
-.monthButton {
-	align-self: center;
-}
-
-.calendarGridRoot {
-	display: grid;
-	grid-template-columns: repeat(7, var(--day-size, 32px));
-	grid-auto-rows: var(--day-size, 32px);
-	overflow: hidden;
-	padding: var(--m-space-sm);
-	border-radius: var(--m-radius-sm);
-}
-
-.dayLabel {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	font-size: var(--m-prose-ambient-size);
-	@apply --mx-fg(var(--m-color-neutral-heavy));
-}
-
-.calendarDay {
-	position: relative;
-	margin-bottom: --fn-literal(-1px);
-	margin-right: --fn-literal(-1px);
-
-	@apply --mx-fg(var(--m-color-neutral-ink));
-	@apply --mx-bg(var(--m-color-neutral-paper));
-	@apply --mx-borderColor(transparent);
-
-	display: flex;
-	cursor: pointer;
-	align-items: center;
-	justify-content: center;
-	transition: all var(--m-duration) var(--m-easing);
-
-	@apply --mx-shadow;
-	--mx-shadow-value: var(--m-shadow-sm);
-
-	&[data-highlighted] {
-		z-index: 1;
-		outline: none;
-		--mx-ring-value: --fn-ring(var(--m-color-main-heavy), 2px);
-	}
-
-	&[data-selected] {
-		z-index: 2;
-		@apply --mx-bg(var(--m-color-main));
-		border-radius: var(--m-radius-sm);
-	}
-
-	&[data-in-range] {
-		z-index: 1;
-		border-radius: 0;
-		@apply --mx-bg(var(--m-color-main-light));
-		--mx-shadow-value: 0 0 0 0 transparent;
-	}
-
-	&[data-disabled='true'] {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-
-	/* Today indicator dot */
-	&[data-today]::before {
-		content: '';
-		position: absolute;
-		left: --fn-literal(1px);
-		top: --fn-literal(1px);
-		width: --fn-literal(6px);
-		height: --fn-literal(6px);
-		background-color: var(--m-color-palette-attention);
-		border-radius: var(--m-radius-lg);
-		border: 1px solid var(--m-color-neutral-ink);
-	}
-
-	/* Calendar grid edge borders */
-	&[data-top-edge] {
-		border-top-color: var(--m-color-neutral);
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
-	&[data-bottom-edge] {
-		border-bottom-color: var(--m-color-neutral);
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-	&[data-first-column] {
-		border-left-color: var(--m-color-neutral);
-		border-top-left-radius: 0;
-		border-bottom-left-radius: 0;
-	}
-	&[data-last-column] {
-		border-right-color: var(--m-color-neutral);
-		border-top-right-radius: 0;
-		border-bottom-right-radius: 0;
-	}
-	&[data-day-first] {
-		border-left-color: var(--m-color-neutral);
-		border-top-left-radius: var(--m-radius-sm);
-	}
-	&[data-day-last] {
-		border-right-color: var(--m-color-neutral);
-		border-bottom-right-radius: var(--m-radius-sm);
-		border-top-right-radius: 0;
-	}
-	&[data-first-column][data-bottom-edge] {
-		border-bottom-left-radius: var(--m-radius-sm);
-	}
-	&[data-last-column][data-bottom-edge] {
-		border-bottom-right-radius: var(--m-radius-sm);
-	}
-	&[data-first-column][data-top-edge] {
-		border-top-left-radius: var(--m-radius-sm);
-	}
-	&[data-last-column][data-top-edge] {
-		border-top-right-radius: var(--m-radius-sm);
-	}
-
-	&[data-range-end] {
-		z-index: 1;
-		@apply --mx-bg(var(--m-color-main));
-		border-radius: 0 var(--m-radius-sm) var(--m-radius-sm) 0;
-		--mx-shadow-value: 0 0 0 0 transparent;
-	}
-
-	&[data-range-start] {
-		z-index: 1;
-		@apply --mx-bg(var(--m-color-main));
-		/* tl tr br bl */
-		border-radius: var(--m-radius-sm) 0 0 var(--m-radius-sm);
-	}
-
-	&[data-different-month] {
-		visibility: hidden;
-	}
-
-	&:hover {
-		z-index: 100;
-		outline: none;
-		--mx-ring-value: --fn-ring(var(--m-color-main-heavy), 2px);
-	}
-
-	&:active {
-		@apply --mx-bg(var(--m-color-main-light));
-		border-radius: var(--m-radius-sm);
-	}
-}

package/dist/components/datePicker/datePicker.module.css

@@ -1,7 +0,0 @@
-.root {
-	width: --fn-literal(calc(var(--day-size, 32px) * 7));
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-}

package/dist/components/datePicker/dateRangePicker.module.css

@@ -1,38 +0,0 @@
-.root {
-	display: flex;
-	justify-content: center;
-}
-
-.rangeLayout {
-	display: grid;
-	grid-template-columns: auto 1fr auto;
-	grid-template-areas:
-		'prevMonth leftMonth nextMonth'
-		'leftGrid leftGrid leftGrid';
-	grid-template-rows: auto 1fr;
-	gap: var(--m-space-sm);
-
-	@media (min-width: 640px) {
-		grid-template-columns: auto 1fr 1fr auto;
-		grid-template-areas:
-			'prevMonth leftMonth rightMonth nextMonth'
-			'leftGrid leftGrid rightGrid rightGrid';
-	}
-}
-
-/* Elements only visible at sm+ breakpoint */
-.smOnly {
-	display: none;
-
-	@media (min-width: 640px) {
-		display: block;
-	}
-}
-
-.smOnlyGrid {
-	display: none;
-
-	@media (min-width: 640px) {
-		display: grid;
-	}
-}