@chitrank2050/monoline-ui 0.2.0

package/components/tag/index.d.ts

@@ -0,0 +1,35 @@
+import * as React$1 from 'react';
+
+type TagSize = "sm" | "md" | "lg";
+type TagVariant = "filter" | "chip";
+interface TagBaseProps {
+    active?: boolean;
+    interactive?: boolean;
+    size?: TagSize;
+    variant?: TagVariant;
+    asChild?: boolean;
+}
+type InteractiveTagProps = TagBaseProps & React$1.ComponentProps<"button"> & {
+    interactive?: true;
+};
+type StaticTagProps = TagBaseProps & React$1.ComponentProps<"span"> & {
+    interactive?: false;
+};
+type TagProps = InteractiveTagProps | StaticTagProps;
+type TagCountProps = React$1.ComponentProps<"span">;
+
+declare function TagCount({ className, ref, ...props }: TagCountProps): React.ReactElement;
+
+declare function TagRoot({ className, active, size, variant, interactive, asChild, ref, ...props }: TagProps): React.ReactElement;
+
+/**
+ * @module Tag
+ * Description for Tag component.
+ */
+
+declare const Tag: typeof TagRoot & {
+    displayName: string;
+    Count: typeof TagCount;
+};
+
+export { type InteractiveTagProps, type StaticTagProps, Tag, type TagCountProps, type TagProps, type TagSize, type TagVariant };

package/components/tag/index.js

@@ -0,0 +1,2 @@
+export{a as Tag}from'../../chunk-B5P3RAN2.js';import'../../chunk-AACTIVV7.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/components/tag/tag.css

@@ -0,0 +1,10 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-tag[data-interactive="false"] {
+		border-color: var(--border-strong);
+		background: transparent;
+		color: var(--text-body);
+		box-shadow: none;
+	}
+}

package/components/testimonial/index.d.ts

@@ -0,0 +1,30 @@
+import { TestimonialGrid } from '../testimonial-grid/index.js';
+import * as React$1 from 'react';
+
+type TestimonialSize = "sm" | "md" | "lg";
+type TestimonialVariant = "default" | "plain";
+interface TestimonialProps extends Omit<React$1.ComponentProps<"figure">, "role"> {
+    quote: React$1.ReactNode;
+    author: React$1.ReactNode;
+    authorHref?: string;
+    role?: React$1.ReactNode;
+    initials?: string;
+    avatarSrc?: string;
+    avatarAlt?: string;
+    size?: TestimonialSize;
+    variant?: TestimonialVariant;
+}
+
+declare function TestimonialRoot({ className, quote, author, authorHref, role, initials, avatarSrc, avatarAlt, size, variant, ref, ...props }: TestimonialProps): React.ReactElement;
+
+/**
+ * @module Testimonial
+ * Description for Testimonial component.
+ */
+
+declare const Testimonial: typeof TestimonialRoot & {
+    displayName: string;
+    Grid: typeof TestimonialGrid;
+};
+
+export { Testimonial, TestimonialGrid, type TestimonialProps, type TestimonialSize, type TestimonialVariant };

package/components/testimonial/index.js

@@ -0,0 +1,2 @@
+export{a as Testimonial}from'../../chunk-6AEWSPAE.js';export{a as TestimonialGrid}from'../../chunk-R2YSVBHS.js';import'../../chunk-N37GMCSK.js';import'../../chunk-AACTIVV7.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/testimonial/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/components/testimonial/testimonial.css

@@ -0,0 +1,109 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-testimonial {
+		--ml-testimonial-gap: var(--ml-space-4);
+		--ml-testimonial-padding: var(--ml-space-5);
+		--ml-testimonial-quote-text: var(--text-md);
+		--ml-testimonial-name-text: var(--text-sm);
+		--ml-testimonial-role-text: var(--text-2xs);
+		--ml-testimonial-mark-text: var(--text-5xl);
+
+		display: flex;
+		flex-direction: column;
+		gap: var(--ml-testimonial-gap);
+		border: var(--border-thin) solid var(--border);
+		border-radius: var(--radius-2xl);
+		background: var(--surface);
+		padding: var(--ml-testimonial-padding);
+		color: var(--text-body);
+	}
+
+	.ml-testimonial[data-size="sm"] {
+		--ml-testimonial-gap: var(--ml-space-3);
+		--ml-testimonial-padding: var(--ml-space-4);
+		--ml-testimonial-quote-text: var(--text-sm);
+		--ml-testimonial-name-text: var(--text-xs);
+		--ml-testimonial-role-text: var(--text-3xs);
+		--ml-testimonial-mark-text: var(--text-4xl);
+	}
+
+	.ml-testimonial[data-size="lg"] {
+		--ml-testimonial-gap: var(--ml-space-5);
+		--ml-testimonial-padding: var(--ml-space-7);
+		--ml-testimonial-quote-text: var(--text-lg);
+		--ml-testimonial-name-text: var(--text-base);
+		--ml-testimonial-role-text: var(--text-xs);
+	}
+
+	.ml-testimonial__mark {
+		color: var(--accent);
+		font-family: var(--font-mono);
+		font-size: var(--ml-testimonial-mark-text);
+		line-height: 0.5;
+		opacity: 0.7;
+	}
+
+	.ml-testimonial__quote {
+		margin: 0;
+		color: var(--text-body);
+		font-size: var(--ml-testimonial-quote-text);
+		line-height: var(--leading-relaxed);
+		text-wrap: pretty;
+	}
+
+	.ml-testimonial[data-size="lg"] .ml-testimonial__quote {
+		font-family: var(--font-headline);
+		font-weight: 500;
+	}
+
+	.ml-testimonial__author {
+		display: flex;
+		align-items: center;
+		gap: var(--ml-space-3);
+		margin-block-start: auto;
+		border-block-start: var(--border-thin) solid var(--border);
+		padding-block-start: var(--ml-space-4);
+	}
+
+	.ml-testimonial__author-copy {
+		display: flex;
+		min-width: 0;
+		flex-direction: column;
+	}
+
+	.ml-testimonial__name {
+		color: var(--primary);
+		font-size: var(--ml-testimonial-name-text);
+		font-weight: 600;
+		line-height: var(--leading-snug);
+	}
+
+	a.ml-testimonial__name {
+		text-decoration: none;
+		display: inline-flex;
+		align-items: center;
+		gap: var(--ml-space-1);
+		transition: color var(--duration-micro) var(--ease-out);
+	}
+
+	a.ml-testimonial__name:hover {
+		color: var(--accent);
+	}
+
+	.ml-testimonial__role {
+		color: var(--text-muted);
+		font-family: var(--font-mono);
+		font-size: var(--ml-testimonial-role-text);
+		line-height: var(--leading-normal);
+	}
+
+	.ml-testimonial[data-variant="plain"] .ml-testimonial__quote {
+		font-family: var(--font-sans);
+		font-weight: 500;
+	}
+
+	.ml-testimonial[data-variant="plain"] .ml-testimonial__author {
+		margin-block-start: auto;
+	}
+}

package/components/testimonial-grid/index.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from 'react';
+
+type TestimonialGridVariant = "grid" | "masonry";
+type TestimonialGridAlign = "start" | "stretch";
+interface TestimonialGridProps extends React$1.ComponentProps<"div"> {
+    variant?: TestimonialGridVariant;
+    align?: TestimonialGridAlign;
+}
+
+declare function TestimonialGrid({ align, className, variant, ref, ...props }: TestimonialGridProps): React.ReactElement;
+
+export { TestimonialGrid, type TestimonialGridAlign, type TestimonialGridProps, type TestimonialGridVariant };

package/components/testimonial-grid/index.js

@@ -0,0 +1,2 @@
+export{a as TestimonialGrid}from'../../chunk-R2YSVBHS.js';import'../../chunk-AACTIVV7.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/testimonial-grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/components/testimonial-grid/testimonial-grid.css

@@ -0,0 +1,58 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-testimonial-grid {
+		--ml-testimonial-grid-gap: var(--ml-space-4);
+
+		width: 100%;
+	}
+
+	.ml-testimonial-grid[data-variant="grid"] {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr);
+		gap: var(--ml-testimonial-grid-gap);
+		align-items: stretch;
+	}
+
+	.ml-testimonial-grid[data-variant="grid"][data-align="start"] {
+		align-items: start;
+	}
+
+	.ml-testimonial-grid[data-variant="masonry"] {
+		column-count: 1;
+		column-gap: var(--ml-testimonial-grid-gap);
+	}
+
+	.ml-testimonial-grid[data-variant="masonry"] > * {
+		break-inside: avoid;
+		margin-block-end: var(--ml-testimonial-grid-gap);
+	}
+
+	@media (min-width: 48rem) {
+		.ml-testimonial-grid {
+			--ml-testimonial-grid-gap: var(--ml-space-5);
+		}
+
+		.ml-testimonial-grid[data-variant="grid"] {
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+		}
+
+		.ml-testimonial-grid[data-variant="masonry"] {
+			column-count: 2;
+		}
+	}
+
+	@media (min-width: 64rem) {
+		.ml-testimonial-grid {
+			--ml-testimonial-grid-gap: var(--ml-space-6);
+		}
+
+		.ml-testimonial-grid[data-variant="grid"] {
+			grid-template-columns: repeat(3, minmax(0, 1fr));
+		}
+
+		.ml-testimonial-grid[data-variant="masonry"] {
+			column-count: 3;
+		}
+	}
+}

package/components/theme-switcher/index.d.ts

@@ -0,0 +1,24 @@
+import * as React$1 from 'react';
+
+type ThemeSwitcherTheme = "light" | "dark";
+type ThemeSwitcherMode = "mini" | "full";
+type ThemeSwitcherSize = "sm" | "md" | "lg";
+interface ThemeSwitcherProps extends Omit<React$1.ComponentProps<"button">, "onChange"> {
+    theme: ThemeSwitcherTheme;
+    mode?: ThemeSwitcherMode;
+    size?: ThemeSwitcherSize;
+    onThemeChange: (theme: ThemeSwitcherTheme) => void;
+    lightLabel?: string;
+    darkLabel?: string;
+}
+
+declare function ThemeSwitcherRoot({ className, theme, mode, size, onThemeChange, lightLabel, darkLabel, disabled, type, ref, ...props }: ThemeSwitcherProps): React.ReactElement;
+
+/**
+ * @module theme-switcher
+ * Description for theme-switcher component.
+ */
+
+declare const ThemeSwitcher: typeof ThemeSwitcherRoot;
+
+export { ThemeSwitcher, type ThemeSwitcherMode, type ThemeSwitcherProps, type ThemeSwitcherSize, type ThemeSwitcherTheme };

package/components/theme-switcher/index.js

@@ -0,0 +1,2 @@
+export{a as ThemeSwitcher}from'../../chunk-FLUGXF5D.js';import'../../chunk-QUG36ONS.js';import'../../chunk-JBOP2AJB.js';import'../../chunk-AACTIVV7.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/theme-switcher/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/components/theme-switcher/theme-switcher.css

@@ -0,0 +1,130 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-theme-switcher {
+		display: inline-flex;
+		align-items: center;
+		color: var(--text);
+	}
+
+	.ml-theme-switcher__icon {
+		display: inline-grid;
+		place-items: center;
+		color: var(--text-muted);
+		font-size: var(--text-2xl);
+		line-height: 1;
+		transition:
+			color var(--duration-micro) var(--ease-out),
+			opacity var(--duration-micro) var(--ease-out),
+			transform var(--duration-short) var(--ease-out);
+	}
+
+	.ml-theme-switcher--mini {
+		padding: 0;
+	}
+
+	.ml-theme-switcher--mini .ml-theme-switcher__icon {
+		color: var(--text);
+		font-size: var(--text-base);
+	}
+
+	.ml-theme-switcher--mini[data-size="lg"] .ml-theme-switcher__icon {
+		font-size: var(--text-xl);
+	}
+
+	.ml-theme-switcher--full {
+		gap: var(--space-4);
+	}
+
+	.ml-theme-switcher--full[data-size="sm"] {
+		gap: var(--space-3);
+	}
+
+	.ml-theme-switcher--full[data-size="sm"] .ml-theme-switcher__icon {
+		font-size: var(--text-xl);
+	}
+
+	.ml-theme-switcher--full[data-size="lg"] {
+		gap: var(--space-5);
+	}
+
+	.ml-theme-switcher--full[data-size="lg"] .ml-theme-switcher__icon {
+		font-size: var(--text-3xl);
+	}
+
+	.ml-theme-switcher__toggle {
+		border-color: var(--primary);
+		background: var(--primary);
+		transition:
+			background-color var(--duration-short) var(--ease-out),
+			border-color var(--duration-short) var(--ease-out),
+			box-shadow var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-theme-switcher__toggle .ml-toggle__thumb {
+		background: var(--primary-foreground);
+		transition:
+			background-color var(--duration-short) var(--ease-out),
+			transform var(--duration-short) var(--ease-out-expo);
+	}
+
+	.theme-transitioning .ml-theme-switcher__toggle .ml-toggle__thumb {
+		transition:
+			background-color var(--duration-short) var(--ease-out),
+			transform var(--duration-short) var(--ease-out-expo);
+	}
+
+	.theme-transitioning,
+	.theme-transitioning *,
+	.theme-transitioning *::before,
+	.theme-transitioning *::after {
+		transition:
+			background-color var(--duration-short) var(--ease-out),
+			border-color var(--duration-short) var(--ease-out),
+			color var(--duration-short) var(--ease-out),
+			box-shadow var(--duration-short) var(--ease-out) !important;
+	}
+
+	:root:not([data-theme="light"]) .ml-theme-switcher__toggle,
+	[data-theme="dark"] .ml-theme-switcher__toggle {
+		border-color: var(--border-strong);
+		background: var(--surface);
+	}
+
+	:root:not([data-theme="light"]) .ml-theme-switcher__toggle .ml-toggle__thumb,
+	[data-theme="dark"] .ml-theme-switcher__toggle .ml-toggle__thumb {
+		background: var(--primary);
+	}
+
+	.ml-theme-switcher__toggle[data-state="on"] {
+		border-color: var(--accent);
+		background: var(--accent-soft);
+	}
+
+	.ml-theme-switcher__toggle[data-state="on"] .ml-toggle__thumb {
+		background: var(--accent);
+	}
+
+	.ml-theme-switcher__toggle:hover:not(:disabled) {
+		border-color: var(--accent);
+	}
+
+	.ml-theme-switcher__toggle:active:not(:disabled) {
+		box-shadow: inset 0 0 0 var(--border-thin)
+			color-mix(in oklch, var(--accent) 28%, transparent);
+	}
+
+	.ml-theme-switcher--full[data-theme-value="light"]
+		.ml-theme-switcher__icon:first-child,
+	.ml-theme-switcher--full[data-theme-value="dark"]
+		.ml-theme-switcher__icon:last-child {
+		color: var(--text);
+	}
+
+	.ml-theme-switcher--full[data-theme-value="light"]
+		.ml-theme-switcher__icon:last-child,
+	.ml-theme-switcher--full[data-theme-value="dark"]
+		.ml-theme-switcher__icon:first-child {
+		opacity: 0.62;
+	}
+}

package/components/toast/index.d.ts

@@ -0,0 +1,20 @@
+import * as React$1 from 'react';
+
+type ToastVariant = "accent" | "success" | "warn";
+interface ToastProps extends React$1.ComponentProps<"div"> {
+    variant?: ToastVariant;
+    onDismiss?: () => void;
+}
+
+declare function ToastRoot({ className, variant, children, onDismiss, ref, ...props }: ToastProps): React.ReactElement;
+
+/**
+ * @module Toast
+ * Description for Toast component.
+ */
+
+declare const Toast: typeof ToastRoot & {
+    displayName: string;
+};
+
+export { Toast, type ToastProps, type ToastVariant };

package/components/toast/index.js

@@ -0,0 +1,2 @@
+export{a as Toast}from'../../chunk-7ANXAXP5.js';import'../../chunk-AACTIVV7.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/components/toast/toast.css

@@ -0,0 +1,22 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-toast {
+		border-color: var(--border-strong);
+		background: var(--button);
+		box-shadow: 0 12px 36px oklch(0 0 0 / 0.4);
+	}
+
+	.ml-toast-dot--accent {
+		background: var(--accent);
+		box-shadow: 0 0 0 4px var(--accent-soft);
+	}
+
+	.ml-toast-dot--success {
+		background: var(--callout-tip-accent, var(--accent));
+	}
+
+	.ml-toast-dot--warn {
+		background: oklch(0.7 0.16 80);
+	}
+}

package/components/toc/index.d.ts

@@ -0,0 +1,27 @@
+import * as React$1 from 'react';
+
+interface TocItem {
+    id: string;
+    label: React$1.ReactNode;
+}
+interface TocProps extends React$1.ComponentProps<"nav"> {
+    items: TocItem[];
+    activeId?: string;
+    heading?: React$1.ReactNode;
+    scrollOffset?: number;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+}
+
+declare function TocRoot({ className, items, activeId: controlledActive, heading, scrollOffset, collapsible, defaultOpen, ref, ...props }: TocProps): React.ReactElement;
+
+/**
+ * @module Toc
+ * Description for Toc component.
+ */
+
+declare const Toc: typeof TocRoot & {
+    displayName: string;
+};
+
+export { Toc, type TocItem, type TocProps };

package/components/toc/index.js

@@ -0,0 +1,2 @@
+export{a as Toc}from'../../chunk-ZU3HIOBU.js';import'../../chunk-VSATIFOR.js';import'../../chunk-AACTIVV7.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/toc/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/components/toggle/index.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+type ToggleSize = "sm" | "md" | "lg";
+interface ToggleProps extends Omit<React.ComponentProps<"button">, "onChange"> {
+    size?: ToggleSize;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+
+declare function ToggleRoot({ className, size, checked, defaultChecked, onCheckedChange, onClick, disabled, ref, ...props }: ToggleProps): React.ReactElement;
+
+/**
+ * @module toggle
+ * Description for toggle component.
+ */
+
+declare const Toggle: typeof ToggleRoot;
+
+export { Toggle, type ToggleProps, type ToggleSize };

package/components/toggle/index.js

@@ -0,0 +1,2 @@
+export{a as Toggle}from'../../chunk-QUG36ONS.js';import'../../chunk-AACTIVV7.js';//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/components/toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/components/toggle/toggle.css

@@ -0,0 +1,108 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+	.ml-toggle {
+		--ml-toggle-height: var(--ml-space-10);
+		--ml-toggle-width: var(--ml-space-20);
+		--ml-toggle-padding: var(--ml-space-0-5);
+		--ml-toggle-border-width: var(--border-medium);
+		--ml-toggle-thumb-size: calc(
+			var(--ml-toggle-height) - (var(--ml-toggle-padding) * 2) -
+				(var(--ml-toggle-border-width) * 2)
+		);
+		--ml-toggle-travel: calc(
+			var(--ml-toggle-width) - var(--ml-toggle-thumb-size) -
+				(var(--ml-toggle-padding) * 2) - (var(--ml-toggle-border-width) * 2)
+		);
+
+		position: relative;
+		display: inline-flex;
+		inline-size: var(--ml-toggle-width);
+		block-size: var(--ml-toggle-height);
+		flex-shrink: 0;
+		align-items: center;
+		overflow: hidden;
+		padding: var(--ml-toggle-padding);
+		border: var(--ml-toggle-border-width) solid var(--primary);
+		border-radius: var(--radius-pill);
+		background: var(--primary);
+		cursor: pointer;
+		transition:
+			background-color var(--duration-short) var(--ease-out),
+			border-color var(--duration-short) var(--ease-out),
+			box-shadow var(--duration-micro) var(--ease-out);
+	}
+
+	.ml-toggle[data-size="sm"] {
+		--ml-toggle-height: var(--ml-space-8);
+		--ml-toggle-width: var(--ml-space-14);
+	}
+
+	.ml-toggle[data-size="lg"] {
+		--ml-toggle-height: var(--ml-space-12);
+		--ml-toggle-width: var(--space-24);
+	}
+
+	.ml-toggle[data-state="on"] {
+		border-color: var(--accent);
+		background: var(--accent-soft);
+	}
+
+	.ml-toggle[data-state="off"]:hover:not(:disabled) {
+		border-color: var(--border-strong);
+	}
+
+	.ml-toggle[data-state="on"]:hover:not(:disabled) {
+		border-color: var(--accent);
+		background: var(--accent-soft);
+	}
+
+	.ml-toggle:active:not(:disabled) {
+		box-shadow: inset 0 0 0 var(--border-thin)
+			color-mix(in oklch, var(--primary) 24%, transparent);
+	}
+
+	.ml-toggle:focus-visible {
+		outline: none;
+		box-shadow: var(--focus-ring);
+	}
+
+	.ml-toggle:disabled {
+		cursor: not-allowed;
+		opacity: 0.45;
+	}
+
+	.ml-toggle__thumb {
+		display: block;
+		inline-size: var(--ml-toggle-thumb-size);
+		block-size: var(--ml-toggle-thumb-size);
+		border-radius: var(--radius-pill);
+		background: var(--primary-foreground);
+		transform: translate3d(0, 0, 0);
+		transition:
+			background-color var(--duration-short) var(--ease-out),
+			transform var(--duration-short) var(--ease-out-expo);
+	}
+
+	:root:not([data-theme="light"]) .ml-toggle[data-state="off"],
+	[data-theme="dark"] .ml-toggle[data-state="off"] {
+		border-color: var(--border-strong);
+		background: var(--surface);
+	}
+
+	:root:not([data-theme="light"])
+		.ml-toggle[data-state="off"]
+		.ml-toggle__thumb,
+	[data-theme="dark"] .ml-toggle[data-state="off"] .ml-toggle__thumb {
+		background: var(--primary);
+	}
+
+	.ml-toggle[data-state="on"] .ml-toggle__thumb {
+		background: var(--accent);
+		transform: translate3d(var(--ml-toggle-travel), 0, 0);
+	}
+
+	.ml-toggle:disabled .ml-toggle__thumb {
+		transition-duration: var(--duration-instant);
+	}
+}

package/foundations/breakpoints.d.ts

@@ -0,0 +1,12 @@
+declare const monolineBreakpoints: {
+    readonly mobile: 390;
+    readonly mobileMax: 767;
+    readonly tablet: 834;
+    readonly tabletMin: 768;
+    readonly tabletMax: 1023;
+    readonly desktop: 1280;
+    readonly wide: 1536;
+};
+type MonolineBreakpoint = keyof typeof monolineBreakpoints;
+
+export { type MonolineBreakpoint, monolineBreakpoints };