@0xsequence/marketplace-sdk 1.0.0 → 1.1.0

package/src/react/ui/modals/MakeOfferModal/Modal.tsx

@@ -203,103 +203,101 @@ const Modal = observer(() => {
 	];
 
 	return (
-		<>
-			<ActionModal
-				isOpen={makeOfferModal$.isOpen.get()}
-				chainId={Number(chainId)}
-				onClose={() => {
-					makeOfferModal$.close();
-					selectWaasFeeOptionsStore.send({ type: 'hide' });
-					steps$.transaction.isExecuting.set(false);
+		<ActionModal
+			isOpen={makeOfferModal$.isOpen.get()}
+			chainId={Number(chainId)}
+			onClose={() => {
+				makeOfferModal$.close();
+				selectWaasFeeOptionsStore.send({ type: 'hide' });
+				steps$.transaction.isExecuting.set(false);
+			}}
+			title="Make an offer"
+			ctas={ctas}
+			modalLoading={modalLoading}
+			spinnerContainerClassname="h-[188px]"
+			hideCtas={shouldHideOfferButton}
+		>
+			<TokenPreview
+				collectionName={collection?.name}
+				collectionAddress={collectionAddress}
+				collectibleId={collectibleId}
+				chainId={chainId}
+			/>
+
+			<PriceInput
+				chainId={chainId}
+				collectionAddress={collectionAddress}
+				price={offerPrice}
+				onPriceChange={(newPrice) => {
+					makeOfferModal$.offerPrice.set(newPrice);
+					makeOfferModal$.offerPriceChanged.set(true);
 				}}
-				title="Make an offer"
-				ctas={ctas}
-				modalLoading={modalLoading}
-				spinnerContainerClassname="h-[188px]"
-				hideCtas={shouldHideOfferButton}
-			>
-				<TokenPreview
-					collectionName={collection?.name}
-					collectionAddress={collectionAddress}
-					collectibleId={collectibleId}
-					chainId={chainId}
-				/>
+				onCurrencyChange={(newCurrency) => {
+					makeOfferModal$.offerPrice.currency.set(newCurrency);
+				}}
+				includeNativeCurrency={false}
+				checkBalance={{
+					enabled: true,
+					callback: (state) => setInsufficientBalance(state),
+				}}
+				disabled={shouldHideOfferButton}
+			/>
 
-				<PriceInput
-					chainId={chainId}
-					collectionAddress={collectionAddress}
-					price={offerPrice}
-					onPriceChange={(newPrice) => {
-						makeOfferModal$.offerPrice.set(newPrice);
-						makeOfferModal$.offerPriceChanged.set(true);
-					}}
-					onCurrencyChange={(newCurrency) => {
-						makeOfferModal$.offerPrice.currency.set(newCurrency);
-					}}
-					includeNativeCurrency={false}
-					checkBalance={{
-						enabled: true,
-						callback: (state) => setInsufficientBalance(state),
-					}}
+			{collection?.type === ContractType.ERC1155 && (
+				<QuantityInput
+					quantity={use$(makeOfferModal$.quantity)}
+					invalidQuantity={use$(makeOfferModal$.invalidQuantity)}
+					onQuantityChange={(quantity) =>
+						makeOfferModal$.quantity.set(quantity)
+					}
+					onInvalidQuantityChange={(invalid) =>
+						makeOfferModal$.invalidQuantity.set(invalid)
+					}
+					decimals={collectible?.decimals || 0}
+					maxQuantity={String(Number.MAX_SAFE_INTEGER)}
 					disabled={shouldHideOfferButton}
 				/>
+			)}
 
-				{collection?.type === ContractType.ERC1155 && (
-					<QuantityInput
-						quantity={use$(makeOfferModal$.quantity)}
-						invalidQuantity={use$(makeOfferModal$.invalidQuantity)}
-						onQuantityChange={(quantity) =>
-							makeOfferModal$.quantity.set(quantity)
-						}
-						onInvalidQuantityChange={(invalid) =>
-							makeOfferModal$.invalidQuantity.set(invalid)
-						}
-						decimals={collectible?.decimals || 0}
-						maxQuantity={String(Number.MAX_SAFE_INTEGER)}
-						disabled={shouldHideOfferButton}
-					/>
-				)}
-
-				{offerPrice.amountRaw !== '0' &&
-					offerPriceChanged &&
-					!insufficientBalance && (
-						<FloorPriceText
-							tokenId={collectibleId}
-							chainId={chainId}
-							collectionAddress={collectionAddress}
-							price={offerPrice}
-							onBuyNow={() => {
-								makeOfferModal$.close();
+			{offerPrice.amountRaw !== '0' &&
+				offerPriceChanged &&
+				!insufficientBalance && (
+					<FloorPriceText
+						tokenId={collectibleId}
+						chainId={chainId}
+						collectionAddress={collectionAddress}
+						price={offerPrice}
+						onBuyNow={() => {
+							makeOfferModal$.close();
 
-								if (lowestListing) {
-									buyModal.show({
-										chainId,
-										collectionAddress,
-										collectibleId,
-										orderId: lowestListing.orderId,
-										marketplace: lowestListing.marketplace,
-									});
-								}
-							}}
-						/>
-					)}
-				<ExpirationDateSelect
-					date={makeOfferModal$.expiry.get()}
-					onDateChange={(date) => makeOfferModal$.expiry.set(date)}
-					disabled={shouldHideOfferButton}
-				/>
-
-				{waasFeeOptionsShown && (
-					<SelectWaasFeeOptions
-						chainId={Number(chainId)}
-						onCancel={() => {
-							makeOfferModal$.offerIsBeingProcessed.set(false);
-							steps$.transaction.isExecuting.set(false);
+							if (lowestListing) {
+								buyModal.show({
+									chainId,
+									collectionAddress,
+									collectibleId,
+									orderId: lowestListing.orderId,
+									marketplace: lowestListing.marketplace,
+								});
+							}
 						}}
-						titleOnConfirm="Processing offer..."
 					/>
 				)}
-			</ActionModal>
-		</>
+			<ExpirationDateSelect
+				date={makeOfferModal$.expiry.get()}
+				onDateChange={(date) => makeOfferModal$.expiry.set(date)}
+				disabled={shouldHideOfferButton}
+			/>
+
+			{waasFeeOptionsShown && (
+				<SelectWaasFeeOptions
+					chainId={Number(chainId)}
+					onCancel={() => {
+						makeOfferModal$.offerIsBeingProcessed.set(false);
+						steps$.transaction.isExecuting.set(false);
+					}}
+					titleOnConfirm="Processing offer..."
+				/>
+			)}
+		</ActionModal>
 	);
 });

package/src/react/ui/modals/MakeOfferModal/hooks/useMakeOffer.tsx

@@ -2,6 +2,7 @@
 
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
+import type { Address } from 'viem';
 import { OrderbookKind } from '../../../../../types';
 import type { MarketCollection } from '../../../../../types/new-marketplace-types';
 import type { TransactionSteps } from '../../../../_internal';
@@ -14,7 +15,7 @@ import { useTransactionSteps } from './useTransactionSteps';
 interface UseMakeOfferArgs {
 	offerInput: OfferInput;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;

package/src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx

@@ -28,7 +28,7 @@ export type ExecutionState = 'approval' | 'offer' | null;
 interface UseTransactionStepsArgs {
 	offerInput: OfferInput;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;

package/src/react/ui/modals/SellModal/hooks/useGetTokenApproval.tsx

@@ -1,4 +1,5 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
+import type { Address } from 'viem';
 import { useAccount } from 'wagmi';
 import {
 	type GenerateSellTransactionArgs,
@@ -12,7 +13,7 @@ import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee'
 
 export interface UseGetTokenApprovalDataArgs {
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	marketplace: MarketplaceKind;
 	ordersData: Array<OrderData>;
 }

package/src/react/ui/modals/SellModal/hooks/useSell.tsx

@@ -2,6 +2,7 @@
 
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
+import type { Address } from 'viem';
 import type { MarketplaceKind, TransactionSteps } from '../../../../_internal';
 import type { ModalCallbacks } from '../../_internal/types';
 import { useGetTokenApprovalData } from './useGetTokenApproval';
@@ -17,7 +18,7 @@ export type SellOrder = {
 interface UseSellArgs {
 	collectibleId: string;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	marketplace: MarketplaceKind;
 	ordersData: Array<SellOrder>;
 	callbacks?: ModalCallbacks;

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.test.tsx

@@ -6,10 +6,10 @@ import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { useAccount } from 'wagmi';
 import { ActionModal } from './ActionModal';
 
-const mockShowSwitchChainModal = vi.fn();
-vi.mock('../switchChainModal', () => ({
-	useSwitchChainModal: () => ({
-		show: mockShowSwitchChainModal,
+const mockShowSwitchChainErrorModal = vi.fn();
+vi.mock('../switchChainErrorModal', () => ({
+	useSwitchChainErrorModal: () => ({
+		show: mockShowSwitchChainErrorModal,
 		close: vi.fn(),
 	}),
 }));
@@ -96,11 +96,12 @@ describe('ActionModal', () => {
 			expect(onClick).toHaveBeenCalled();
 		});
 
-		it('should show switch chain modal when chain mismatch', async () => {
+		it('should attempt chain switching when chain mismatch occurs', async () => {
+			const onClick = vi.fn();
 			render(
 				<ActionModal
 					{...defaultProps}
-					ctas={[{ label: 'Test', onClick: vi.fn(), testid: 'test-btn' }]}
+					ctas={[{ label: 'Test', onClick, testid: 'test-btn' }]}
 					chainId={polygon.id}
 				/>,
 			);
@@ -110,10 +111,12 @@ describe('ActionModal', () => {
 				fireEvent.click(button);
 			});
 
-			expect(mockShowSwitchChainModal).toHaveBeenCalledWith({
+			// When there's a chain mismatch, the switch chain error modal should be shown
+			// and onClick should not be called immediately
+			expect(mockShowSwitchChainErrorModal).toHaveBeenCalledWith({
 				chainIdToSwitchTo: polygon.id,
-				onSuccess: expect.any(Function),
 			});
+			expect(onClick).not.toHaveBeenCalled();
 		});
 
 		it('should handle chain switching for WaaS wallets', async () => {
@@ -135,12 +138,20 @@ describe('ActionModal', () => {
 				},
 			);
 
+			// Wait for the account to be connected and initial chainId to be shown
+			await waitFor(() => {
+				expect(screen.getByText('1')).toBeInTheDocument(); // mainnet.id
+			});
+
 			await waitFor(() => {
 				const button = screen.getByTestId('test-btn');
 				fireEvent.click(button);
 			});
 
-			expect(screen.getByText(polygon.id)).toBeInTheDocument();
+			// For WaaS wallets, chain switching should show error modal since mock connector fails
+			expect(mockShowSwitchChainErrorModal).toHaveBeenCalledWith({
+				chainIdToSwitchTo: polygon.id,
+			});
 		});
 	});
 

package/src/react/ui/modals/_internal/components/priceInput/index.tsx

@@ -127,10 +127,10 @@ export default function PriceInput({
 				<CurrencyImage price={price} />
 			</div>
 
-			<div className="[&>label>div>div>.rounded-xl]:h-9 [&>label>div>div>.rounded-xl]:rounded-sm [&>label>div>div>.rounded-xl]:px-2 [&>label]:gap-1">
+			<div className="[&>label]:gap-1">
 				<NumericInput
 					ref={inputRef}
-					className="ml-5 w-full text-xs"
+					className="h-9 w-full rounded-sm px-2 [&>input]:pl-5 [&>input]:text-xs"
 					name="price-input"
 					decimals={currencyDecimals}
 					label="Enter price"

package/src/react/ui/modals/_internal/components/switchChainErrorModal/__tests__/SwitchChainErrorModal.test.tsx

@@ -0,0 +1,80 @@
+import { render, renderHook, screen, wagmiConfig, waitFor } from '@test';
+import { beforeEach, describe, expect, test, vi } from 'vitest';
+import { useAccount } from 'wagmi';
+import SwitchChainErrorModal, { useSwitchChainErrorModal } from '../index';
+import { switchChainErrorModalStore } from '../store';
+
+vi.mock('wagmi', async () => {
+	const actual = await vi.importActual('wagmi');
+	return {
+		...actual,
+		useAccount: vi.fn(),
+	};
+});
+
+const mockUseAccount = vi.mocked(useAccount);
+
+const chainToSwitchTo = wagmiConfig.chains[1]; //Polygon
+
+describe('SwitchChainErrorModal', () => {
+	beforeEach(() => {
+		// Reset store to initial state
+		switchChainErrorModalStore.send({ type: 'close' });
+		vi.clearAllMocks();
+
+		mockUseAccount.mockReturnValue({
+			chainId: wagmiConfig.chains[0].id,
+			isConnected: true,
+		} as any);
+	});
+
+	test('opens switch chain error modal with correct chain', async () => {
+		const { result } = renderHook(() => useSwitchChainErrorModal());
+
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
+		render(<SwitchChainErrorModal />);
+
+		await waitFor(() => {
+			const titleElement = screen.getByText('Switching network failed');
+			expect(titleElement).toBeInTheDocument();
+		});
+
+		const titleElement = await screen.findByText('Switching network failed');
+		expect(titleElement).toBeInTheDocument();
+
+		const messageElement = await screen.findByText(
+			`There was an error switching to ${chainToSwitchTo.name}. Please try changing the network in your wallet manually.`,
+		);
+		expect(messageElement).toBeInTheDocument();
+	});
+
+	test('closes switch chain modal using close callback', async () => {
+		const { result } = renderHook(() => useSwitchChainErrorModal());
+
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
+		render(<SwitchChainErrorModal />);
+
+		switchChainErrorModalStore.send({ type: 'close' });
+
+		const titleElement = screen.queryByText('Switching network failed');
+		await waitFor(() => {
+			expect(titleElement).not.toBeInTheDocument();
+		});
+	});
+
+	test('does not show modal if current chain matches target chain', () => {
+		// Mock user already being on Polygon
+		mockUseAccount.mockReturnValue({
+			chainId: chainToSwitchTo.id,
+			isConnected: true,
+		} as any);
+
+		const { result } = renderHook(() => useSwitchChainErrorModal());
+		result.current.show({ chainIdToSwitchTo: chainToSwitchTo.id });
+
+		render(<SwitchChainErrorModal />);
+
+		const titleElement = screen.queryByText('Switching network failed');
+		expect(titleElement).not.toBeInTheDocument();
+	});
+});

package/src/react/ui/modals/_internal/components/switchChainErrorModal/index.tsx

@@ -0,0 +1,64 @@
+'use client';
+
+import { Modal, Text } from '@0xsequence/design-system';
+import { useAccount } from 'wagmi';
+import { getPresentableChainName } from '../../../../../../utils/network';
+import AlertMessage from '../alertMessage';
+import { MODAL_OVERLAY_PROPS } from '../consts';
+import {
+	switchChainErrorModalStore,
+	useChainIdToSwitchTo,
+	useIsOpen,
+} from './store';
+
+export type ShowSwitchChainModalArgs = {
+	chainIdToSwitchTo: number;
+};
+
+export const useSwitchChainErrorModal = () => {
+	return {
+		show: (args: ShowSwitchChainModalArgs) =>
+			switchChainErrorModalStore.send({ type: 'open', ...args }),
+		close: () => switchChainErrorModalStore.send({ type: 'close' }),
+	};
+};
+
+const SwitchChainErrorModal = () => {
+	const { chainId: currentChainId } = useAccount();
+	const isOpen = useIsOpen();
+	const chainIdToSwitchTo = useChainIdToSwitchTo();
+
+	const chainName = chainIdToSwitchTo
+		? getPresentableChainName(chainIdToSwitchTo)
+		: '';
+
+	const handleClose = () => {
+		switchChainErrorModalStore.send({ type: 'close' });
+	};
+
+	if (!isOpen || !chainIdToSwitchTo || currentChainId === chainIdToSwitchTo)
+		return null;
+
+	return (
+		<Modal
+			isDismissible={true}
+			onClose={handleClose}
+			disableAnimation
+			size="sm"
+			overlayProps={MODAL_OVERLAY_PROPS}
+		>
+			<div className="grid flex-col gap-6 p-7">
+				<Text className="text-xl" fontWeight="bold" color="text100">
+					Switching network failed
+				</Text>
+
+				<AlertMessage
+					type="warning"
+					message={`There was an error switching to ${chainName}. Please try changing the network in your wallet manually.`}
+				/>
+			</div>
+		</Modal>
+	);
+};
+
+export default SwitchChainErrorModal;

package/src/react/ui/modals/_internal/components/switchChainErrorModal/store.ts

@@ -0,0 +1,42 @@
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+import type { ShowSwitchChainModalArgs } from '.';
+
+export interface SwitchChainErrorModalState {
+	isOpen: boolean;
+	chainIdToSwitchTo: number | undefined;
+	isSwitching: boolean;
+}
+
+const initialContext: SwitchChainErrorModalState = {
+	isOpen: false,
+	chainIdToSwitchTo: undefined,
+	isSwitching: false,
+};
+
+export const switchChainErrorModalStore = createStore({
+	context: initialContext,
+	on: {
+		open: (context, event: ShowSwitchChainModalArgs) => ({
+			...context,
+			isOpen: true,
+			chainIdToSwitchTo: event.chainIdToSwitchTo,
+		}),
+		close: (context) => ({
+			...context,
+			isOpen: false,
+			chainIdToSwitchTo: undefined,
+			isSwitching: false,
+		}),
+	},
+});
+
+// Selector hooks
+export const useIsOpen = () =>
+	useSelector(switchChainErrorModalStore, (state) => state.context.isOpen);
+
+export const useChainIdToSwitchTo = () =>
+	useSelector(
+		switchChainErrorModalStore,
+		(state) => state.context.chainIdToSwitchTo,
+	);

package/src/react/ui/modals/_internal/types.ts

@@ -8,7 +8,6 @@ export interface ActionButton {
 export type ModalCallbacks = {
 	onSuccess?: ({ hash, orderId }: { hash?: Hash; orderId?: string }) => void;
 	onError?: (error: Error) => void;
-	onBuyAtFloorPrice?: () => void;
 	successActionButtons?: ActionButton[];
 };
 

package/src/styles/styles.ts

@@ -27,7 +27,7 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
   --tw-gradient-via-position: 50%;
   --tw-gradient-to-position: 100%;
 }
-/*! tailwindcss v4.1.11 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.1.13 | MIT License | https://tailwindcss.com */
 @layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
@@ -231,6 +231,9 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
   ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
     padding-block: 0;
   }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
   :-moz-ui-invalid {
     box-shadow: none;
   }
@@ -671,9 +674,6 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
   .w-\[124px\] {
     width: 124px;
   }
-  .w-\[147px\] {
-    width: 147px;
-  }
   .w-\[148px\] {
     width: 148px;
   }
@@ -1057,6 +1057,12 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
   .bg-background-primary {
     background-color: var(--seq-color-background-primary);
   }
+  .bg-background-primary\/25 {
+    background-color: var(--seq-color-background-primary);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--seq-color-background-primary) 25%, transparent);
+    }
+  }
   .bg-background-raised {
     background-color: var(--seq-color-background-raised);
   }
@@ -1600,7 +1606,7 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
   .transition {
-    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
@@ -1963,7 +1969,6 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
   }
   .after\:content-\[\"\"\] {
     &::after {
-      content: var(--tw-content);
       --tw-content: "";
       content: var(--tw-content);
     }
@@ -2006,6 +2011,13 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
       }
     }
   }
+  .hover\:animate-none {
+    &:hover {
+      @media (hover: hover) {
+        animation: none;
+      }
+    }
+  }
   .hover\:bg-button-glass {
     &:hover {
       @media (hover: hover) {
@@ -2020,6 +2032,13 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
       }
     }
   }
+  .hover\:opacity-50 {
+    &:hover {
+      @media (hover: hover) {
+        opacity: 50%;
+      }
+    }
+  }
   .hover\:opacity-80 {
     &:hover {
       @media (hover: hover) {
@@ -2381,6 +2400,17 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
       justify-self: center;
     }
   }
+  .\[\&\>input\]\:pl-5 {
+    &>input {
+      padding-left: calc(var(--spacing) * 5);
+    }
+  }
+  .\[\&\>input\]\:text-xs {
+    &>input {
+      font-size: var(--text-xs);
+      line-height: var(--tw-leading, var(--text-xs--line-height));
+    }
+  }
   .\[\&\>label\]\:flex {
     &>label {
       display: flex;
@@ -2422,21 +2452,6 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
       width: 100%;
     }
   }
-  .\[\&\>label\>div\>div\>\.rounded-xl\]\:h-9 {
-    &>label>div>div>.rounded-xl {
-      height: calc(var(--spacing) * 9);
-    }
-  }
-  .\[\&\>label\>div\>div\>\.rounded-xl\]\:rounded-sm {
-    &>label>div>div>.rounded-xl {
-      border-radius: var(--radius-sm);
-    }
-  }
-  .\[\&\>label\>div\>div\>\.rounded-xl\]\:px-2 {
-    &>label>div>div>.rounded-xl {
-      padding-inline: calc(var(--spacing) * 2);
-    }
-  }
   .\[\&\>label\>div\>div\>div\]\:h-9 {
     &>label>div>div>div {
       height: calc(var(--spacing) * 9);
@@ -2656,9 +2671,17 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
   --rdp-range_middle-background-color: var(--rdp-accent-background-color);
   --rdp-range_middle-color: inherit;
   --rdp-range_start-color: white;
-  --rdp-range_start-background: linear-gradient(var(--rdp-gradient-direction), transparent 50%, var(--rdp-range_middle-background-color) 50%);
+  --rdp-range_start-background: linear-gradient(
+    var(--rdp-gradient-direction),
+    transparent 50%,
+    var(--rdp-range_middle-background-color) 50%
+  );
   --rdp-range_start-date-background-color: var(--rdp-accent-color);
-  --rdp-range_end-background: linear-gradient(var(--rdp-gradient-direction), var(--rdp-range_middle-background-color) 50%, transparent 50%);
+  --rdp-range_end-background: linear-gradient(
+    var(--rdp-gradient-direction),
+    var(--rdp-range_middle-background-color) 50%,
+    transparent 50%
+  );
   --rdp-range_end-color: white;
   --rdp-range_end-date-background-color: var(--rdp-accent-color);
   --rdp-week_number-border-radius: 100%;
@@ -2879,7 +2902,6 @@ export const styles = String.raw`/* Modified Tailwind CSS, to avoid issues with
   background-color: var(--rdp-range_middle-background-color);
 }
 .rdp-range_middle .rdp-day_button {
-  border-color: transparent;
   border: unset;
   border-radius: unset;
   color: var(--rdp-range_middle-color);