@ngrok/mantle 0.60.2 → 0.61.0

package/dist/mantle.css

@@ -5,72 +5,56 @@
 @source "../src";
 @source "../dist";
 
-/* Euclid Square */
 @font-face {
-	font-family: EuclidSquare;
+	font-family: "Roobert";
+	src:
+		url("https://assets.ngrok.com/fonts/roobert/roobert-proportional-vf.woff2")
+			format("woff2 supports variations"),
+		url("https://assets.ngrok.com/fonts/roobert/roobert-proportional-vf.woff2")
+			format("woff2-variations");
+	font-weight: 300 900;
+	font-display: swap;
 	font-style: normal;
-	font-weight: normal;
-	src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-Regular-WebS.woff")
-		format("woff");
-}
-
-@font-face {
-	font-family: EuclidSquare;
-	font-style: italic;
-	font-weight: normal;
-	src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-RegularItalic-WebS.woff")
-		format("woff");
 }
 
 @font-face {
-	font-family: EuclidSquare;
+	font-family: "JetBrains Mono";
+	src:
+		url("https://assets.ngrok.com/fonts/jetbrains/jetbrainsmono-wght.woff2")
+			format("woff2 supports variations"),
+		url("https://assets.ngrok.com/fonts/jetbrains/jetbrainsmono-wght.woff2")
+			format("woff2-variations");
+	font-weight: 100 800;
+	font-display: swap;
 	font-style: normal;
-	font-weight: 500;
-	src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-Medium-WebS.woff")
-		format("woff");
 }
 
 @font-face {
-	font-family: EuclidSquare;
+	font-family: "JetBrains Mono";
+	src:
+		url("https://assets.ngrok.com/fonts/jetbrains/jetbrainsmono-italic-wght.woff2")
+			format("woff2 supports variations"),
+		url("https://assets.ngrok.com/fonts/jetbrains/jetbrainsmono-italic-wght.woff2")
+			format("woff2-variations");
+	font-weight: 100 800;
+	font-display: swap;
 	font-style: italic;
-	font-weight: 500;
-	src: url("https://assets.ngrok.com/fonts/euclid-square/EuclidSquare-MediumItalic-WebS.woff")
-		format("woff");
 }
 
-/* IBM Plex Mono */
-
 @font-face {
-	font-family: IBMPlexMono;
-	font-style: normal;
+	font-family: "Family";
+	font-display: swap;
+	src: url("https://assets.ngrok.com/fonts/family/family-regular.woff2") format("woff2");
 	font-weight: normal;
-	src: url("https://assets.ngrok.com/fonts/ibm-plex-mono/IBMPlexMono-Text.woff")
-		format("woff");
-}
-
-@font-face {
-	font-family: IBMPlexMono;
-	font-style: italic;
-	font-weight: normal;
-	src: url("https://assets.ngrok.com/fonts/ibm-plex-mono/IBMPlexMono-TextItalic.woff")
-		format("woff");
-}
-
-/* semibold is actually 600, but mapping it to 500 works better across AntD */
-@font-face {
-	font-family: IBMPlexMono;
 	font-style: normal;
-	font-weight: 500;
-	src: url("https://assets.ngrok.com/fonts/ibm-plex-mono/IBMPlexMono-SemiBold.woff")
-		format("woff");
 }
 
 @font-face {
-	font-family: IBMPlexMono;
+	font-family: "Family";
+	font-display: swap;
+	src: url("https://assets.ngrok.com/fonts/family/family-italic.woff2") format("woff2");
+	font-weight: normal;
 	font-style: italic;
-	font-weight: 500;
-	src: url("https://assets.ngrok.com/fonts/ibm-plex-mono/IBMPlexMono-SemiBoldItalic.woff")
-		format("woff");
 }
 
 @custom-variant light (&:where(.light, .light *, [data-theme="light"], [data-applied-theme="light"]));
@@ -140,29 +124,29 @@
 :root[data-applied-theme="light"] {
 	color-scheme: light;
 
-	--color-neutral-50: oklch(98.4% 0.0017 258.6);
-	--color-neutral-100: oklch(96.7% 0.0032 261.6);
-	--color-neutral-200: oklch(91.9% 0.007 264.5);
-	--color-neutral-300: oklch(87% 0.0101 267.3);
-	--color-neutral-400: oklch(71% 0.0199 269.9);
-	--color-neutral-500: oklch(55.2% 0.0232 272.2);
-	--color-neutral-600: oklch(44.5% 0.0262 274.2);
-	--color-neutral-700: oklch(37% 0.0281 276.1);
-	--color-neutral-800: oklch(31% 0.0269 277.9);
-	--color-neutral-900: oklch(27% 0.0262 279.5);
-	--color-neutral-950: oklch(21.5% 0.0215 281.2);
-
-	--color-gray-50: oklch(98.4% 0.0017 258.6);
-	--color-gray-100: oklch(96.7% 0.0032 261.6);
-	--color-gray-200: oklch(91.9% 0.007 264.5);
-	--color-gray-300: oklch(87% 0.0101 267.3);
-	--color-gray-400: oklch(71% 0.0199 269.9);
-	--color-gray-500: oklch(55.2% 0.0232 272.2);
-	--color-gray-600: oklch(44.5% 0.0262 274.2);
-	--color-gray-700: oklch(37% 0.0281 276.1);
-	--color-gray-800: oklch(31% 0.0269 277.9);
-	--color-gray-900: oklch(27% 0.0262 279.5);
-	--color-gray-950: oklch(21.5% 0.0215 281.2);
+	--color-neutral-50: oklch(98.5% 0 0);
+	--color-neutral-100: oklch(97% 0 0);
+	--color-neutral-200: oklch(92.2% 0 0);
+	--color-neutral-300: oklch(87% 0 0);
+	--color-neutral-400: oklch(70.8% 0 0);
+	--color-neutral-500: oklch(55.6% 0 0);
+	--color-neutral-600: oklch(43.9% 0 0);
+	--color-neutral-700: oklch(37.1% 0 0);
+	--color-neutral-800: oklch(26.9% 0 0);
+	--color-neutral-900: oklch(20.5% 0 0);
+	--color-neutral-950: oklch(18.2% 0 0);
+
+	--color-gray-50: oklch(98.5% 0 0);
+	--color-gray-100: oklch(97% 0 0);
+	--color-gray-200: oklch(92.2% 0 0);
+	--color-gray-300: oklch(87% 0 0);
+	--color-gray-400: oklch(70.8% 0 0);
+	--color-gray-500: oklch(55.6% 0 0);
+	--color-gray-600: oklch(43.9% 0 0);
+	--color-gray-700: oklch(37.1% 0 0);
+	--color-gray-800: oklch(26.9% 0 0);
+	--color-gray-900: oklch(20.5% 0 0);
+	--color-gray-950: oklch(18.2% 0 0);
 
 	--color-blue-50: oklch(96.8% 0.015 265.9);
 	--color-blue-100: oklch(92.7% 0.0337 265.8);
@@ -177,18 +161,18 @@
 	--color-blue-950: oklch(26.6% 0.0958 273.2);
 
 	--color-red-50: oklch(97.1% 0.013 17.38);
-  --color-red-100: oklch(93.6% 0.032 17.717);
-  --color-red-200: oklch(88.5% 0.062 18.334);
-  --color-red-300: oklch(80.8% 0.114 19.571);
-  --color-red-400: oklch(70.4% 0.191 22.216);
-  --color-red-500: oklch(63.7% 0.237 25.331);
-  --color-red-600: oklch(57.7% 0.245 27.325);
-  --color-red-700: oklch(50.5% 0.213 27.518);
-  --color-red-800: oklch(44.4% 0.177 26.899);
-  --color-red-900: oklch(39.6% 0.141 25.723);
-  --color-red-950: oklch(25.8% 0.092 26.042);
-
-  --background-color-base: var(--color-neutral-50);
+	--color-red-100: oklch(93.6% 0.032 17.717);
+	--color-red-200: oklch(88.5% 0.062 18.334);
+	--color-red-300: oklch(80.8% 0.114 19.571);
+	--color-red-400: oklch(70.4% 0.191 22.216);
+	--color-red-500: oklch(63.7% 0.237 25.331);
+	--color-red-600: oklch(57.7% 0.245 27.325);
+	--color-red-700: oklch(50.5% 0.213 27.518);
+	--color-red-800: oklch(44.4% 0.177 26.899);
+	--color-red-900: oklch(39.6% 0.141 25.723);
+	--color-red-950: oklch(25.8% 0.092 26.042);
+
+	--background-color-base: var(--color-neutral-50);
 	--background-color-card: var(--color-white);
 	--background-color-popover: var(--color-white);
 	--background-color-dialog: var(--color-white);
@@ -262,29 +246,29 @@
 	--color-black: oklch(100% 0 0);
 
 	/* Reverse all the color values */
-	--color-neutral-50: oklch(21.5% 0.0215 281.2);
-	--color-neutral-100: oklch(27% 0.0262 279.5);
-	--color-neutral-200: oklch(31% 0.0269 277.9);
-	--color-neutral-300: oklch(37% 0.0281 276.1);
-	--color-neutral-400: oklch(44.5% 0.0262 274.2);
-	--color-neutral-500: oklch(55.2% 0.0232 272.2);
-	--color-neutral-600: oklch(71% 0.0199 269.9);
-	--color-neutral-700: oklch(87% 0.0101 267.3);
-	--color-neutral-800: oklch(91.9% 0.007 264.5);
-	--color-neutral-900: oklch(96.7% 0.0032 261.6);
-	--color-neutral-950: oklch(98.4% 0.0017 258.6);
-
-	--color-gray-50: oklch(21.5% 0.0215 281.2);
-	--color-gray-100: oklch(27% 0.0262 279.5);
-	--color-gray-200: oklch(31% 0.0269 277.9);
-	--color-gray-300: oklch(37% 0.0281 276.1);
-	--color-gray-400: oklch(44.5% 0.0262 274.2);
-	--color-gray-500: oklch(55.2% 0.0232 272.2);
-	--color-gray-600: oklch(71% 0.0199 269.9);
-	--color-gray-700: oklch(87% 0.0101 267.3);
-	--color-gray-800: oklch(91.9% 0.007 264.5);
-	--color-gray-900: oklch(96.7% 0.0032 261.6);
-	--color-gray-950: oklch(98.4% 0.0017 258.6);
+	--color-neutral-50: oklch(18.2% 0 0);
+	--color-neutral-100: oklch(20.5% 0 0);
+	--color-neutral-200: oklch(26.9% 0 0);
+	--color-neutral-300: oklch(37.1% 0 0);
+	--color-neutral-400: oklch(43.9% 0 0);
+	--color-neutral-500: oklch(55.6% 0 0);
+	--color-neutral-600: oklch(70.8% 0 0);
+	--color-neutral-700: oklch(87% 0 0);
+	--color-neutral-800: oklch(92.2% 0 0);
+	--color-neutral-900: oklch(97% 0 0);
+	--color-neutral-950: oklch(98.5% 0 0);
+
+	--color-gray-50: oklch(18.2% 0 0);
+	--color-gray-100: oklch(20.5% 0 0);
+	--color-gray-200: oklch(26.9% 0 0);
+	--color-gray-300: oklch(37.1% 0 0);
+	--color-gray-400: oklch(43.9% 0 0);
+	--color-gray-500: oklch(55.6% 0 0);
+	--color-gray-600: oklch(70.8% 0 0);
+	--color-gray-700: oklch(87% 0 0);
+	--color-gray-800: oklch(92.2% 0 0);
+	--color-gray-900: oklch(97% 0 0);
+	--color-gray-950: oklch(98.5% 0 0);
 
 	--color-blue-50: oklch(26.6% 0.0958 273.2);
 	--color-blue-100: oklch(35.3% 0.1525 269.7);
@@ -658,29 +642,29 @@
 	--color-fuchsia-900: oklch(34.08% 0.1487 324.91);
 	--color-fuchsia-950: oklch(29.32% 0.1309 325.66);
 
-	--color-neutral-50: oklch(98.46% 0.0017 247.84);
-	--color-neutral-100: oklch(96.7% 0.0029 264.54);
-	--color-neutral-200: oklch(91.88% 0.0071 268.54);
-	--color-neutral-300: oklch(44.47% 0.0267 274.21);
-	--color-neutral-400: oklch(41.87% 0.0255 273.5);
-	--color-neutral-500: oklch(38.18% 0.0242 275.69);
-	--color-neutral-600: oklch(34.89% 0.0262 278.99);
-	--color-neutral-700: oklch(32.11% 0.025 278.52);
-	--color-neutral-800: oklch(28.42% 0.0222 277.48);
-	--color-neutral-900: oklch(25.22% 0.0227 280.91);
-	--color-neutral-950: oklch(20.9% 0.0218 280.29);
-
-	--color-gray-50: oklch(98.46% 0.0017 247.84);
-	--color-gray-100: oklch(96.7% 0.0029 264.54);
-	--color-gray-200: oklch(91.88% 0.0071 268.54);
-	--color-gray-300: oklch(44.47% 0.0267 274.21);
-	--color-gray-400: oklch(41.87% 0.0255 273.5);
-	--color-gray-500: oklch(38.18% 0.0242 275.69);
-	--color-gray-600: oklch(34.89% 0.0262 278.99);
-	--color-gray-700: oklch(32.11% 0.025 278.52);
-	--color-gray-800: oklch(28.42% 0.0222 277.48);
-	--color-gray-900: oklch(25.22% 0.0227 280.91);
-	--color-gray-950: oklch(20.9% 0.0218 280.29);
+	--color-neutral-50: oklch(98.46% 0 0);
+	--color-neutral-100: oklch(96.7% 0 0);
+	--color-neutral-200: oklch(91.88% 0 0);
+	--color-neutral-300: oklch(44.47% 0 0);
+	--color-neutral-400: oklch(41.87% 0 0);
+	--color-neutral-500: oklch(38.18% 0 0);
+	--color-neutral-600: oklch(34.89% 0 0);
+	--color-neutral-700: oklch(32.11% 0 0);
+	--color-neutral-800: oklch(28.42% 0 0);
+	--color-neutral-900: oklch(25.22% 0 0);
+	--color-neutral-950: oklch(18.2% 0 0);
+
+	--color-gray-50: oklch(98.46% 0 0);
+	--color-gray-100: oklch(96.7% 0 0);
+	--color-gray-200: oklch(91.88% 0 0);
+	--color-gray-300: oklch(44.47% 0 0);
+	--color-gray-400: oklch(41.87% 0 0);
+	--color-gray-500: oklch(38.18% 0 0);
+	--color-gray-600: oklch(34.89% 0 0);
+	--color-gray-700: oklch(32.11% 0 0);
+	--color-gray-800: oklch(28.42% 0 0);
+	--color-gray-900: oklch(25.22% 0 0);
+	--color-gray-950: oklch(18.2% 0 0);
 
 	--color-green-50: oklch(98.37% 0.0156 154.48);
 	--color-green-100: oklch(96.43% 0.0401 157.79);
@@ -959,29 +943,29 @@
 	--color-fuchsia-900: oklch(94.64% 0.0411 319.72);
 	--color-fuchsia-950: oklch(97.92% 0.0156 319.45);
 
-	--color-neutral-50: oklch(20.9% 0.0218 280.29);
-	--color-neutral-100: oklch(26.98% 0.026 281.31);
-	--color-neutral-200: oklch(30.97% 0.0271 278.76);
-	--color-neutral-300: oklch(71.07% 0.0191 275.53);
-	--color-neutral-400: oklch(75.47% 0.0146 272.63);
-	--color-neutral-500: oklch(79.79% 0.0134 266.68);
-	--color-neutral-600: oklch(82.97% 0.0116 269.53);
-	--color-neutral-700: oklch(87.04% 0.0098 273.34);
-	--color-neutral-800: oklch(91.24% 0.0058 264.53);
-	--color-neutral-900: oklch(94.51% 0.0034 247.86);
-	--color-neutral-950: oklch(98.46% 0.0017 247.84);
-
-	--color-gray-50: oklch(20.9% 0.0218 280.29);
-	--color-gray-100: oklch(26.98% 0.026 281.31);
-	--color-gray-200: oklch(30.97% 0.0271 278.76);
-	--color-gray-300: oklch(71.07% 0.0191 275.53);
-	--color-gray-400: oklch(75.47% 0.0146 272.63);
-	--color-gray-500: oklch(79.79% 0.0134 266.68);
-	--color-gray-600: oklch(82.97% 0.0116 269.53);
-	--color-gray-700: oklch(87.04% 0.0098 273.34);
-	--color-gray-800: oklch(91.24% 0.0058 264.53);
-	--color-gray-900: oklch(94.51% 0.0034 247.86);
-	--color-gray-950: oklch(98.46% 0.0017 247.84);
+	--color-neutral-50: oklch(18.2% 0 0);
+	--color-neutral-100: oklch(26.98% 0 0);
+	--color-neutral-200: oklch(30.97% 0 0);
+	--color-neutral-300: oklch(71.07% 0 0);
+	--color-neutral-400: oklch(75.47% 0 0);
+	--color-neutral-500: oklch(79.79% 0 0);
+	--color-neutral-600: oklch(82.97% 0 0);
+	--color-neutral-700: oklch(87.04% 0 0);
+	--color-neutral-800: oklch(91.24% 0 0);
+	--color-neutral-900: oklch(94.51% 0 0);
+	--color-neutral-950: oklch(98.46% 0 0);
+
+	--color-gray-50: oklch(18.2% 0 0);
+	--color-gray-100: oklch(26.98% 0 0);
+	--color-gray-200: oklch(30.97% 0 0);
+	--color-gray-300: oklch(71.07% 0 0);
+	--color-gray-400: oklch(75.47% 0 0);
+	--color-gray-500: oklch(79.79% 0 0);
+	--color-gray-600: oklch(82.97% 0 0);
+	--color-gray-700: oklch(87.04% 0 0);
+	--color-gray-800: oklch(91.24% 0 0);
+	--color-gray-900: oklch(94.51% 0 0);
+	--color-gray-950: oklch(98.46% 0 0);
 
 	--color-green-50: oklch(26.64% 0.0628 152.93);
 	--color-green-100: oklch(38.95% 0.0881 152.83);
@@ -1192,15 +1176,16 @@
 }
 
 @theme inline {
-	--font-sans: "EuclidSquare", ui-sans-serif, system-ui, sans-serif,
-		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+	--font-sans: "Roobert", ui-sans-serif, system-ui, sans-serif;
+	--font-mono:
+		"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono,
+		Courier New, monospace;
+	--font-family: "Family", "Georgia", serif;
 	--font-body: var(--font-sans);
-	--font-mono: "IBMPlexMono", ui-monospace, SFMono-Regular, Menlo, Monaco,
-		Consolas, "Liberation Mono", "Courier New", monospace;
 
 	/* Fluid typography */
-	--text-lg:  clamp(1.075rem, 0.525rem + 0.75vw, 1.125rem);
-	--text-xl:  clamp(1.1rem, 0.80rem + 0.75vw, 1.25rem);
+	--text-lg: clamp(1.075rem, 0.525rem + 0.75vw, 1.125rem);
+	--text-xl: clamp(1.1rem, 0.8rem + 0.75vw, 1.25rem);
 	--text-2xl: clamp(1.2rem, 0.9rem + 0.75vw, 1.5rem);
 	--text-3xl: clamp(1.5rem, 1.275rem + 0.75vw, 1.875rem);
 	--text-4xl: clamp(1.8rem, 1.65rem + 0.75vw, 2.25rem);
@@ -1216,39 +1201,27 @@
 	--text-mono--line-height: 1.25rem;
 	--text-size-inherit: inherit;
 
-	--shadow-sm: 0px 1px 2px 0
-		--alpha(var(--shadow-color) / var(--shadow-first-opacity));
-	--shadow: 0px 1px 2px -1px
-		--alpha(var(--shadow-color) / var(--shadow-second-opacity)), 0px 1px 3px 0px
-		--alpha(var(--shadow-color) / var(--shadow-second-opacity));
+	--shadow-sm: 0px 1px 2px 0 --alpha(var(--shadow-color) / var(--shadow-first-opacity));
+	--shadow:
+		0px 1px 2px -1px --alpha(var(--shadow-color) / var(--shadow-second-opacity)),
+		0px 1px 3px 0px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
 	--shadow-md:
-		0px 2px 13px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)), 0px 2px 4px -2px --alpha(
-			var(--shadow-color) /
-			var(--shadow-second-opacity)
-		), 0px 4px 6px -1px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
+		0px 2px 13px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
+		0px 2px 4px -2px --alpha(var(--shadow-color) / var(--shadow-second-opacity)),
+		0px 4px 6px -1px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
 	--shadow-lg:
-		0px 1px 13px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)), 0px 4px 6px -4px --alpha(
-			var(--shadow-color) /
-			var(--shadow-second-opacity)
-		), 0px 10px 15px -3px --alpha(
-			var(--shadow-color) /
-			var(--shadow-second-opacity)
-		);
+		0px 1px 13px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
+		0px 4px 6px -4px --alpha(var(--shadow-color) / var(--shadow-second-opacity)),
+		0px 10px 15px -3px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
 	--shadow-xl:
-		0px 0px 15px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)), 0px 8px 10px -6px --alpha(
-			var(--shadow-color) /
-			var(--shadow-second-opacity)
-		), 0px 20px 25px -5px --alpha(
-			var(--shadow-color) /
-			var(--shadow-second-opacity)
-		);
+		0px 0px 15px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
+		0px 8px 10px -6px --alpha(var(--shadow-color) / var(--shadow-second-opacity)),
+		0px 20px 25px -5px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
 	--shadow-2xl:
-		0px 0px 15px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)), 0px 11px 10px 0px --alpha(
-			var(--shadow-color) /
-			var(--shadow-first-opacity)
-		), 0px 17px 25px 2px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
-	--shadow-inner: inset 0px 2px 4px 0px
-		--alpha(var(--shadow-color) / var(--shadow-first-opacity));
+		0px 0px 15px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
+		0px 11px 10px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity)),
+		0px 17px 25px 2px --alpha(var(--shadow-color) / var(--shadow-second-opacity));
+	--shadow-inner: inset 0px 2px 4px 0px --alpha(var(--shadow-color) / var(--shadow-first-opacity));
 
 	--color-accent-50: var(--color-blue-50);
 	--color-accent-100: var(--color-blue-100);
@@ -1362,15 +1335,15 @@
 }
 
 @layer base {
-  button:not(:disabled),
-  [role="button"]:not(:disabled) {
-    cursor: pointer;
-  }
-
-  b,
-  strong {
-  	font-weight: 500;
-  }
+	button:not(:disabled),
+	[role="button"]:not(:disabled) {
+		cursor: pointer;
+	}
+
+	b,
+	strong {
+		font-weight: 500;
+	}
 }
 
 @utility cursor-inherit {
@@ -1406,59 +1379,51 @@
 
 @utility scroll-shadow {
 	/* Shadow Cover TOP */
-	background: linear-gradient(
-			var(--background-color-base) 30%,
-			--alpha(var(--background-color-base) / 0%)
-		)
-		center top,
-		/* Shadow Cover BOTTOM */ linear-gradient(
-			--alpha(var(--background-color-base) / 0%),
-			var(--background-color-base) 70%
-		)
-		center bottom,
-		/* Shadow TOP */ radial-gradient(
-			farthest-side at 50% 0,
-			var(--navigation-shadow),
-			rgb(0 0 0 / 0%)
-		)
-		center top,
-		/* Shadow BOTTOM */ radial-gradient(
-			farthest-side at 50% 100%,
-			var(--navigation-shadow),
-			rgb(0 0 0 / 0%)
-		)
-		center bottom;
+	background:
+		linear-gradient(var(--background-color-base) 30%, --alpha(var(--background-color-base) / 0%))
+			center top,
+		/* Shadow Cover BOTTOM */
+			linear-gradient(--alpha(var(--background-color-base) / 0%), var(--background-color-base) 70%)
+			center bottom,
+		/* Shadow TOP */
+			radial-gradient(farthest-side at 50% 0, var(--navigation-shadow), rgb(0 0 0 / 0%)) center top,
+		/* Shadow BOTTOM */
+			radial-gradient(farthest-side at 50% 100%, var(--navigation-shadow), rgb(0 0 0 / 0%)) center
+			bottom;
 	background-repeat: no-repeat;
-	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+	background-size:
+		100% 40px,
+		100% 40px,
+		100% 14px,
+		100% 14px;
 	background-attachment: local, local, scroll, scroll;
 }
 
 @utility nav-scroll-shadow {
 	/* Shadow Cover TOP */
-	background: linear-gradient(
-			var(--background-color-popover) 30%,
-			--alpha(var(--background-color-popover) / 0%)
-		)
-		center top,
-		/* Shadow Cover BOTTOM */ linear-gradient(
-			--alpha(var(--background-color-popover) / 0%),
-			var(--background-color-popover) 70%
-		)
-		center bottom,
-		/* Shadow TOP */ radial-gradient(
-			farthest-side at 50% 0,
-			var(--navigation-shadow),
-			rgb(0 0 0 / 0%)
-		)
-		center top,
-		/* Shadow BOTTOM */ radial-gradient(
-			farthest-side at 50% 100%,
-			var(--navigation-shadow),
-			rgb(0 0 0 / 0%)
-		)
-		center bottom;
+	background:
+		linear-gradient(
+				var(--background-color-popover) 30%,
+				--alpha(var(--background-color-popover) / 0%)
+			)
+			center top,
+		/* Shadow Cover BOTTOM */
+			linear-gradient(
+				--alpha(var(--background-color-popover) / 0%),
+				var(--background-color-popover) 70%
+			)
+			center bottom,
+		/* Shadow TOP */
+			radial-gradient(farthest-side at 50% 0, var(--navigation-shadow), rgb(0 0 0 / 0%)) center top,
+		/* Shadow BOTTOM */
+			radial-gradient(farthest-side at 50% 100%, var(--navigation-shadow), rgb(0 0 0 / 0%)) center
+			bottom;
 	background-repeat: no-repeat;
-	background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+	background-size:
+		100% 40px,
+		100% 40px,
+		100% 14px,
+		100% 14px;
 	background-attachment: local, local, scroll, scroll;
 }
 

package/dist/media-object.js

@@ -1,2 +1,2 @@
-import{a as m}from"./chunk-UNFO4DZV.js";import{a as p}from"./chunk-PFXFESEN.js";import{forwardRef as r}from"react";import{jsx as i}from"react/jsx-runtime";var l=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("flex gap-4",o),style:n,children:t}));l.displayName="MediaObject";var d=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("shrink-0 leading-none",o),style:n,children:t}));d.displayName="MediaObjectMedia";var c=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("min-w-0 flex-1",o),style:n,children:t}));c.displayName="MediaObject.Content";var f={Root:l,Media:d,Content:c};export{f as MediaObject};
+import{a as m}from"./chunk-ODDNPNLN.js";import{a as p}from"./chunk-PFXFESEN.js";import{forwardRef as r}from"react";import{jsx as i}from"react/jsx-runtime";var l=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("flex gap-4",o),style:n,children:t}));l.displayName="MediaObject";var d=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("shrink-0 leading-none",o),style:n,children:t}));d.displayName="MediaObjectMedia";var c=r(({asChild:e=!1,className:o,children:t,style:n},s)=>i(e?m:"div",{ref:s,className:p("min-w-0 flex-1",o),style:n,children:t}));c.displayName="MediaObject.Content";var f={Root:l,Media:d,Content:c};export{f as MediaObject};
 //# sourceMappingURL=media-object.js.map

package/dist/media-object.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/media-object/media-object.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype Props = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n */\nconst Root = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"flex gap-4\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"MediaObject\";\n\n/**\n * The container for an image or icon to display in the media slot of the media object.\n */\nconst Media = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"shrink-0 leading-none\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nMedia.displayName = \"MediaObjectMedia\";\n\n/**\n * The container for the content slot of a media object.\n */\nconst Content = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\"min-w-0 flex-1\", className)}\n\t\t\t\tstyle={style}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nContent.displayName = \"MediaObject.Content\";\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n *\n * Change the spacing between the media and content by passing a `gap-*` class.\n * The default gap is `gap-4`.\n *\n * Use flexbox utilities to change the alignment of the media and content.\n *\n * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n * components as direct children.\n *\n * @see https://mantle.ngrok.com/components/media-object\n *\n * @example\n * ```tsx\n * <MediaObject.Root>\n *   <MediaObject.Media>\n *     <ExampleMedia />\n *   </MediaObject.Media>\n *   <MediaObject.Content>\n *     <p>Ea culpa id id ea minim labore.</p>\n *   </MediaObject.Content>\n * </MediaObject.Root>\n * ```\n */\nconst MediaObject = {\n\t/**\n\t * The media object is an image/icon (media) to the left, with descriptive\n\t * content (title and subtitle/description) to the right. This is the root\n\t * component of the media object.\n\t *\n\t * Change the spacing between the media and content by passing a `gap-*` class.\n\t * The default gap is `gap-4`.\n\t *\n\t * Use flexbox utilities to change the alignment of the media and content.\n\t *\n\t * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n\t * components as direct children.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for an image or icon to display in the media slot of the media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-media\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tMedia,\n\t/**\n\t * The container for the content slot of a media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tContent,\n} as const;\n\nexport {\n\t//,\n\tMediaObject,\n};\n"],"mappings":"gFACA,OAAS,cAAAA,MAAkB,QAiBxB,cAAAC,MAAA,oBALH,IAAMC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,aAAcL,CAAS,EACrC,MAAOE,EAEN,SAAAD,EACF,CAGH,EACAJ,EAAK,YAAc,cAKnB,IAAMS,EAAQR,EACb,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,wBAAyBL,CAAS,EAChD,MAAOE,EAEN,SAAAD,EACF,CAGH,EACAK,EAAM,YAAc,mBAKpB,IAAMC,EAAUT,EACf,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CACA,IAAKD,EACL,UAAWE,EAAG,iBAAkBL,CAAS,EACzC,MAAOE,EAEN,SAAAD,EACF,CAGH,EACAM,EAAQ,YAAc,sBA6BtB,IAAMC,EAAc,CA4BnB,KAAAX,EAkBA,MAAAS,EAkBA,QAAAC,CACD","names":["forwardRef","jsx","Root","forwardRef","asChild","className","children","style","ref","Slot","cx","Media","Content","MediaObject"]}
+{"version":3,"sources":["../src/components/media-object/media-object.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport { forwardRef } from \"react\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Slot } from \"../slot/index.js\";\n\ntype Props = ComponentProps<\"div\"> & WithAsChild;\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n */\nconst Root = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"flex gap-4\", className)} style={style}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nRoot.displayName = \"MediaObject\";\n\n/**\n * The container for an image or icon to display in the media slot of the media object.\n */\nconst Media = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"shrink-0 leading-none\", className)} style={style}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nMedia.displayName = \"MediaObjectMedia\";\n\n/**\n * The container for the content slot of a media object.\n */\nconst Content = forwardRef<HTMLDivElement, Props>(\n\t({ asChild = false, className, children, style }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<Component ref={ref} className={cx(\"min-w-0 flex-1\", className)} style={style}>\n\t\t\t\t{children}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nContent.displayName = \"MediaObject.Content\";\n\n/**\n * The media object is an image/icon (media) to the left, with descriptive\n * content (title and subtitle/description) to the right. This is the root\n * component of the media object.\n *\n * Change the spacing between the media and content by passing a `gap-*` class.\n * The default gap is `gap-4`.\n *\n * Use flexbox utilities to change the alignment of the media and content.\n *\n * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n * components as direct children.\n *\n * @see https://mantle.ngrok.com/components/media-object\n *\n * @example\n * ```tsx\n * <MediaObject.Root>\n *   <MediaObject.Media>\n *     <ExampleMedia />\n *   </MediaObject.Media>\n *   <MediaObject.Content>\n *     <p>Ea culpa id id ea minim labore.</p>\n *   </MediaObject.Content>\n * </MediaObject.Root>\n * ```\n */\nconst MediaObject = {\n\t/**\n\t * The media object is an image/icon (media) to the left, with descriptive\n\t * content (title and subtitle/description) to the right. This is the root\n\t * component of the media object.\n\t *\n\t * Change the spacing between the media and content by passing a `gap-*` class.\n\t * The default gap is `gap-4`.\n\t *\n\t * Use flexbox utilities to change the alignment of the media and content.\n\t *\n\t * Compose the media object with the `MediaObject.Media` and `MediaObject.Content`\n\t * components as direct children.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The container for an image or icon to display in the media slot of the media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-media\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tMedia,\n\t/**\n\t * The container for the content slot of a media object.\n\t *\n\t * @see https://mantle.ngrok.com/components/media-object#api-media-object-content\n\t *\n\t * @example\n\t * ```tsx\n\t * <MediaObject.Root>\n\t *   <MediaObject.Media>\n\t *     <ExampleMedia />\n\t *   </MediaObject.Media>\n\t *   <MediaObject.Content>\n\t *     <p>Ea culpa id id ea minim labore.</p>\n\t *   </MediaObject.Content>\n\t * </MediaObject.Root>\n\t * ```\n\t */\n\tContent,\n} as const;\n\nexport {\n\t//,\n\tMediaObject,\n};\n"],"mappings":"gFACA,OAAS,cAAAA,MAAkB,QAiBxB,cAAAC,MAAA,oBALH,IAAMC,EAAOC,EACZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,aAAcL,CAAS,EAAG,MAAOE,EAClE,SAAAD,EACF,CAGH,EACAJ,EAAK,YAAc,cAKnB,IAAMS,EAAQR,EACb,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,wBAAyBL,CAAS,EAAG,MAAOE,EAC7E,SAAAD,EACF,CAGH,EACAK,EAAM,YAAc,mBAKpB,IAAMC,EAAUT,EACf,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,SAAAC,EAAU,MAAAC,CAAM,EAAGC,IAIhDP,EAHiBG,EAAUK,EAAO,MAGjC,CAAU,IAAKD,EAAK,UAAWE,EAAG,iBAAkBL,CAAS,EAAG,MAAOE,EACtE,SAAAD,EACF,CAGH,EACAM,EAAQ,YAAc,sBA6BtB,IAAMC,EAAc,CA4BnB,KAAAX,EAkBA,MAAAS,EAkBA,QAAAC,CACD","names":["forwardRef","jsx","Root","forwardRef","asChild","className","children","style","ref","Slot","cx","Media","Content","MediaObject"]}

package/dist/pagination.js

@@ -1,2 +1,2 @@
-import{a as p}from"./chunk-JATU64S7.js";import{b as v}from"./chunk-YKYEISYH.js";import"./chunk-MF2QITTY.js";import{a as b}from"./chunk-GC6NS32Q.js";import{c as m}from"./chunk-3AUCEZTZ.js";import"./chunk-M6TUHYJA.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-2NIR7PCL.js";import{a as z}from"./chunk-UNFO4DZV.js";import"./chunk-NZ6DRFAL.js";import{a as P}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as U}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as j}from"@phosphor-icons/react/CaretRight";import{createContext as k,forwardRef as c,useContext as y,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),x=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});x.displayName="CursorPagination";var h=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(b,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(U,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(v,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(j,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));h.displayName="CursorButtons";var E=[5,10,20,50,100],N=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=y(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});N.displayName="CursorPageSizeSelect";function O({asChild:r=!1,className:e,...a}){let t=y(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?z:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}O.displayName="CursorPageSizeValue";var F={Root:x,Buttons:h,PageSizeSelect:N,PageSizeValue:O};import{useEffect as T,useState as V}from"react";function W({listSize:r,pageSize:e}){let[a,t]=V(1),[i,o]=V(e);T(()=>{o(e),t(1)},[e]),T(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function B(u){let L=Math.max(1,Math.min(u,n));t(L)}function R(){d&&t(u=>Math.min(u+1,n))}function w(){C&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function M(){t(n)}function G(){t(1)}return{currentPage:a,goToFirstPage:G,goToLastPage:M,goToPage:B,hasNextPage:d,hasPreviousPage:C,nextPage:R,offset:g,pageSize:i,previousPage:w,setPageSize:I,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
+import{a as p}from"./chunk-ERCBHCUY.js";import{b as v}from"./chunk-LURP5WQR.js";import"./chunk-MF2QITTY.js";import{a as b}from"./chunk-Y7RHMF43.js";import{c as m}from"./chunk-ZCTK5X4D.js";import"./chunk-SK2YHT6N.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-OP6JMBKJ.js";import"./chunk-SBVSECWW.js";import{a as z}from"./chunk-ODDNPNLN.js";import"./chunk-NZ6DRFAL.js";import{a as P}from"./chunk-PFXFESEN.js";import{CaretLeftIcon as U}from"@phosphor-icons/react/CaretLeft";import{CaretRightIcon as j}from"@phosphor-icons/react/CaretRight";import{createContext as k,forwardRef as c,useContext as y,useState as A}from"react";import f from"tiny-invariant";import{jsx as s,jsxs as l}from"react/jsx-runtime";var S=k(void 0),x=c(({className:r,children:e,defaultPageSize:a,...t},i)=>{let[o,n]=A(a);return s(S.Provider,{value:{defaultPageSize:a,pageSize:o,setPageSize:n},children:s("div",{className:P("inline-flex items-center justify-between gap-2",r),ref:i,...t,children:e})})});x.displayName="CursorPagination";var h=c(({hasNextPage:r,hasPreviousPage:e,onNextPage:a,onPreviousPage:t,...i},o)=>l(b,{appearance:"panel",ref:o,...i,children:[s(m,{appearance:"ghost",disabled:!e,icon:s(U,{}),label:"Previous page",onClick:t,size:"sm",type:"button"}),s(v,{orientation:"vertical",className:"min-h-5"}),s(m,{appearance:"ghost",disabled:!r,icon:s(j,{}),label:"Next page",onClick:a,size:"sm",type:"button"})]}));h.displayName="CursorButtons";var E=[5,10,20,50,100],N=c(({className:r,pageSizes:e=E,onChangePageSize:a,...t},i)=>{let o=y(S);return f(o,"CursorPageSizeSelect must be used as a child of a CursorPagination component"),f(e.includes(o.defaultPageSize),"CursorPagination.defaultPageSize must be included in CursorPageSizeSelect.pageSizes"),f(e.includes(o.pageSize),"CursorPagination.pageSize must be included in CursorPageSizeSelect.pageSizes"),l(p.Root,{defaultValue:`${o.pageSize}`,onValueChange:n=>{let g=Number.parseInt(n,10);Number.isNaN(g)&&(g=o.defaultPageSize),o.setPageSize(g),a?.(g)},children:[s(p.Trigger,{ref:i,className:P("w-auto min-w-36",r),value:o.pageSize,...t,children:s(p.Value,{})}),s(p.Content,{width:"trigger",children:e.map(n=>l(p.Item,{value:`${n}`,children:[n," per page"]},n))})]})});N.displayName="CursorPageSizeSelect";function O({asChild:r=!1,className:e,...a}){let t=y(S);return f(t,"CursorPageSizeValue must be used as a child of a CursorPagination component"),l(r?z:"span",{className:P("text-muted text-sm font-normal",e),...a,children:[t.pageSize," per page"]})}O.displayName="CursorPageSizeValue";var F={Root:x,Buttons:h,PageSizeSelect:N,PageSizeValue:O};import{useEffect as T,useState as V}from"react";function W({listSize:r,pageSize:e}){let[a,t]=V(1),[i,o]=V(e);T(()=>{o(e),t(1)},[e]),T(()=>{t(1)},[r]);let n=Math.ceil(r/i),g=(a-1)*i,C=a>1,d=a<n;function B(u){let L=Math.max(1,Math.min(u,n));t(L)}function R(){d&&t(u=>Math.min(u+1,n))}function w(){C&&t(u=>Math.max(u-1,1))}function I(u){o(u),t(1)}function M(){t(n)}function G(){t(1)}return{currentPage:a,goToFirstPage:G,goToLastPage:M,goToPage:B,hasNextPage:d,hasPreviousPage:C,nextPage:R,offset:g,pageSize:i,previousPage:w,setPageSize:I,totalPages:n}}function $(r,e){return r.slice(e.offset,e.offset+e.pageSize)}export{F as CursorPagination,$ as getOffsetPaginatedSlice,W as useOffsetPagination};
 //# sourceMappingURL=pagination.js.map