@0xsquid/ui 0.24.1 → 0.25.1-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/cjs/index.js CHANGED
@@ -6564,7 +6564,7 @@ var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
6564
6564
  * @param {string|number} tokenPrice - The price of one token in USD
6565
6565
  * @returns {BigNumber} - The equivalent amount in USD
6566
6566
  */
6567
- function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 4) {
6567
+ function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 2) {
6568
6568
  if (!tokenAmount || !tokenPrice)
6569
6569
  return '';
6570
6570
  const amount = new BigNumber(tokenAmount);
@@ -6586,7 +6586,7 @@ function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
6586
6586
  return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
6587
6587
  }
6588
6588
  const INTL_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
6589
- minimumFractionDigits: 0,
6589
+ minimumFractionDigits: 2,
6590
6590
  maximumFractionDigits: 5,
6591
6591
  });
6592
6592
  /**
@@ -17049,7 +17049,7 @@ const dropdownPositionClassMap = {
17049
17049
  const statusBadge = {
17050
17050
  completed: {},
17051
17051
  pending: {
17052
- badge: jsxRuntime.jsx(Loader, { size: "16", strokeWidth: "4" }),
17052
+ badge: (jsxRuntime.jsx(Loader, { size: "16", strokeWidth: "4", className: "group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900" })),
17053
17053
  containerClassName: 'tw-bg-royal-400',
17054
17054
  },
17055
17055
  failed: {
@@ -17590,11 +17590,14 @@ function NavigationBar(_a) {
17590
17590
  ? 'tw-w-full tw-pr-squid-xs mobile-xs-height:tw-pr-squid-m'
17591
17591
  : 'tw-pr-squid-m mobile-lg:tw-pl-squid-l', !title && 'tw-w-full mobile-xs-height:tw-w-[unset]'), children: [displayBackButton ? (jsxRuntime.jsx(Button$1, { className: displayButtonShadows
17592
17592
  ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
17593
- : undefined, variant: "tertiary", size: "md", isLoading: isLoading, icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsxRuntime.jsx(Tooltip, Object.assign({}, action.tooltip, { childrenClassName: "tw-rounded-squid-m", containerClassName: "tw-rounded-squid-m", tooltipWidth: "max", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "tertiary", isLoading: isLoading, label: typeof action.labelOrIcon === 'string'
17594
- ? action.labelOrIcon
17595
- : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
17596
- ? null
17597
- : action.labelOrIcon, onClick: action.onClick, chip: action.chip }) }), action.id))) })] }), title ? (jsxRuntime.jsx("div", { className: cn('tw-h-squid-xxl tw-w-full tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l',
17593
+ : undefined, variant: "tertiary", size: "md", isLoading: isLoading, icon: jsxRuntime.jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsxRuntime.jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsxRuntime.jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => {
17594
+ var _a;
17595
+ return (jsxRuntime.jsx(Tooltip, Object.assign({}, action.tooltip, { tooltipContent: isLoading ? undefined : (_a = action.tooltip) === null || _a === void 0 ? void 0 : _a.tooltipContent, childrenClassName: "tw-rounded-squid-m", containerClassName: "tw-rounded-squid-m", tooltipWidth: "max", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "tertiary", isLoading: isLoading, label: typeof action.labelOrIcon === 'string'
17596
+ ? action.labelOrIcon
17597
+ : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
17598
+ ? null
17599
+ : action.labelOrIcon, onClick: action.onClick, chip: action.chip }) }), action.id));
17600
+ }) })] }), title ? (jsxRuntime.jsx("div", { className: cn('tw-h-squid-xxl tw-w-full tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l',
17598
17601
  // hide the title on small screens when back button is displayed, so it's positioned on the left
17599
17602
  displayBackButton
17600
17603
  ? 'tw-hidden mobile-xs-height:tw-flex'
@@ -18578,7 +18581,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
18578
18581
  ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
18579
18582
  : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsxRuntime.jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18580
18583
  ? 'tw-text-grey-600'
18581
- : 'tw-text-royal-400' })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { token: {
18584
+ : 'tw-text-royal-400' })] })] }))] }) })) }), jsxRuntime.jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsxRuntime.jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsxRuntime.jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsxRuntime.jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsxRuntime.jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
18582
18585
  decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
18583
18586
  symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : '',
18584
18587
  price: tokenPrice,
@@ -18654,7 +18657,7 @@ const SwapStepsCollapsed = React$1.forwardRef((props, ref) => {
18654
18657
  : 'tw-animate-fade-out') }), jsxRuntime.jsx("div", { style: {
18655
18658
  zIndex: 20,
18656
18659
  display: isRouteVisible ? 'none' : 'block',
18657
- }, onClick: handleToggleRouteSteps, className: "tw-absolute tw-inset-0 tw-h-[60px] tw-cursor-pointer tw-rounded-squid-l tw-border tw-border-material-light-thin" }), jsxRuntime.jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
18660
+ }, onClick: handleToggleRouteSteps, className: "tw-absolute tw-inset-0 tw-h-[60px] tw-cursor-pointer tw-rounded-squid-l tw-border tw-border-material-light-thin hover:tw-border-material-light-average hover:tw-bg-material-light-thin" }), jsxRuntime.jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
18658
18661
  [CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
18659
18662
  [CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
18660
18663
  }, className: cn('tw-relative tw-h-[60px] tw-max-h-[470px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl mobile-xs-height:tw-max-h-[535px]', isRouteVisible &&
@@ -18663,7 +18666,6 @@ const SwapStepsCollapsed = React$1.forwardRef((props, ref) => {
18663
18666
  : 'tw-animate-collapse-route')), children: jsxRuntime.jsxs("div", { className: cn('tw-flex tw-flex-col tw-gap-squid-xxs', isRouteVisible || isShowRouteAnimationRunning
18664
18667
  ? 'tw-max-h-[470px] mobile-xs-height:tw-max-h-[535px]'
18665
18668
  : ''), style: {
18666
- paddingTop: `${STEP_ITEM_HEIGHT / 2}px`,
18667
18669
  transition: isShowRouteAnimationRunning
18668
18670
  ? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
18669
18671
  : isRouteVisible
@@ -18675,6 +18677,7 @@ const SwapStepsCollapsed = React$1.forwardRef((props, ref) => {
18675
18677
  }, children: [jsxRuntime.jsx("ul", { ref: routeStepsListRef, style: {
18676
18678
  zIndex: isRouteVisible ? 0 : -10,
18677
18679
  scrollbarWidth: 'none',
18680
+ paddingTop: 10,
18678
18681
  }, className: "tw-relative tw-flex tw-w-modal-compact tw-max-w-full tw-flex-1 tw-grow-0 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-pb-squid-xxs mobile-lg:tw-w-modal-large", children: steps.map((step, index) => (jsxRuntime.jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks,
18679
18682
  // show separator for all steps except the first one
18680
18683
  showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? 'pending' : step.status }, index))) }), jsxRuntime.jsx("footer", { className: "tw-flex tw-max-h-[55px] tw-min-h-[55px] tw-w-full tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-s tw-pb-squid-s", children: jsxRuntime.jsx(Button$1, { size: "md", variant: "secondary", onClick: footerButton === null || footerButton === void 0 ? void 0 : footerButton.onClick, link: footerButton === null || footerButton === void 0 ? void 0 : footerButton.link, label: footerButton === null || footerButton === void 0 ? void 0 : footerButton.label, className: "tw-w-full", containerClassName: "tw-w-full" }) })] }) })] }) }) }));
@@ -25927,6 +25930,24 @@ function DesktopTooltip({ children, tooltipContent, tooltipWidth = 'container',
25927
25930
  displayDelayMs,
25928
25931
  isTooltipVisible,
25929
25932
  ]);
25933
+ React$1.useEffect(() => {
25934
+ const onMouseMove = (event) => {
25935
+ var _a, _b;
25936
+ const mouseIsMovingOutOfTooltip = event.target !== tooltipRef.current &&
25937
+ event.target !== (tooltipTriggerRef === null || tooltipTriggerRef === void 0 ? void 0 : tooltipTriggerRef.current) &&
25938
+ !((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
25939
+ !((_b = tooltipTriggerRef === null || tooltipTriggerRef === void 0 ? void 0 : tooltipTriggerRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
25940
+ if (mouseIsMovingOutOfTooltip) {
25941
+ handleMouseLeave();
25942
+ }
25943
+ };
25944
+ if (isTooltipVisible) {
25945
+ document.addEventListener('mousemove', onMouseMove);
25946
+ }
25947
+ return () => {
25948
+ document.removeEventListener('mousemove', onMouseMove);
25949
+ };
25950
+ }, [isTooltipVisible]);
25930
25951
  const handleMouseEnter = React$1.useCallback((e) => {
25931
25952
  var _a;
25932
25953
  if (e.target === tooltipRef.current ||
@@ -25968,18 +25989,19 @@ const RegExpNonZeroValue = /[^0.]/;
25968
25989
  const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
25969
25990
  const notInteractiveChipClassName = 'tw-cursor-not-allowed';
25970
25991
  const loadingClassName = 'tw-opacity-50';
25971
- var InputMode;
25972
- (function (InputMode) {
25973
- InputMode[InputMode["TOKEN"] = 0] = "TOKEN";
25974
- InputMode[InputMode["USD"] = 1] = "USD";
25975
- })(InputMode || (InputMode = {}));
25976
- function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
25977
- token: '0.001',
25978
- usd: '0.01',
25979
- }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton, }) {
25980
- var _a;
25992
+ var UserInputType;
25993
+ (function (UserInputType) {
25994
+ UserInputType[UserInputType["TOKEN"] = 0] = "TOKEN";
25995
+ UserInputType[UserInputType["USD"] = 1] = "USD";
25996
+ })(UserInputType || (UserInputType = {}));
25997
+ function NumericInput(_a) {
25998
+ var _b;
25999
+ var { priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 2, formatIfVerySmall = {
26000
+ token: '0.001',
26001
+ usd: '0.01',
26002
+ }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton } = _a, props = __rest$1(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "direction", "inputModeButton", "isInteractive", "balanceButton"]);
25981
26003
  const [inputValue, setInputValue] = React$1.useState('');
25982
- const [inputMode, setInputMode] = React$1.useState(InputMode.TOKEN);
26004
+ const [userInputType, setUserInputType] = React$1.useState(UserInputType.TOKEN);
25983
26005
  const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
25984
26006
  React$1.useEffect(() => {
25985
26007
  if (forcedAmount !== undefined) {
@@ -25988,11 +26010,11 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
25988
26010
  }, [forcedAmount]);
25989
26011
  const updateInputValue = React$1.useCallback((newValue) => {
25990
26012
  const safeNewValue = trimExtraDecimals(newValue, token.decimals);
25991
- const formattedAmount = inputMode === InputMode.TOKEN
26013
+ const formattedAmount = userInputType === UserInputType.TOKEN
25992
26014
  ? safeNewValue
25993
26015
  : convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
25994
26016
  setInputValue(formattedAmount);
25995
- }, [inputMode, token.price, direction, token.decimals]);
26017
+ }, [userInputType, token.price, direction, token.decimals]);
25996
26018
  const onBalanceButtonClick = React$1.useCallback(() => {
25997
26019
  if (balanceChipClickable) {
25998
26020
  updateInputValue(balance);
@@ -26004,7 +26026,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
26004
26026
  ]);
26005
26027
  const handleInputChange = (e) => {
26006
26028
  let value = e.target.value.replace(/,/g, '.'); // Replace commas with dots
26007
- const maxDecimalsForInputType = inputMode === InputMode.TOKEN ? token.decimals : maxUsdDecimals;
26029
+ const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
26008
26030
  const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
26009
26031
  if (isValidAmount) {
26010
26032
  setInputValue(value);
@@ -26023,12 +26045,14 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
26023
26045
  const handleSwitchInputMode = () => {
26024
26046
  var _a;
26025
26047
  if (inputValue !== '') {
26026
- const convertedAmount = inputMode === InputMode.TOKEN
26048
+ const convertedAmount = userInputType === UserInputType.TOKEN
26027
26049
  ? convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
26028
26050
  : convertUSDToTokenAmount(inputValue, token.price, token.decimals);
26029
26051
  setInputValue(convertedAmount);
26030
26052
  }
26031
- setInputMode((prevMode) => prevMode === InputMode.TOKEN ? InputMode.USD : InputMode.TOKEN);
26053
+ setUserInputType((prevMode) => prevMode === UserInputType.TOKEN
26054
+ ? UserInputType.USD
26055
+ : UserInputType.TOKEN);
26032
26056
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
26033
26057
  };
26034
26058
  const getRawAmounts = (amount) => {
@@ -26039,7 +26063,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
26039
26063
  isTokenAmountVerySmall: false,
26040
26064
  isUsdAmountVerySmall: false,
26041
26065
  };
26042
- if (inputMode === InputMode.TOKEN) {
26066
+ if (userInputType === UserInputType.TOKEN) {
26043
26067
  const usdRawAmount = convertTokenAmountToUSD(amount, token.price, maxUsdDecimals);
26044
26068
  const tokenRawAmount = amount;
26045
26069
  const isTokenAmountVerySmall = !!tokenRawAmount &&
@@ -26079,7 +26103,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
26079
26103
  var _a;
26080
26104
  if (isNaN(Number(inputValue)) || inputValue === '')
26081
26105
  return '0';
26082
- if (inputMode === InputMode.TOKEN) {
26106
+ if (userInputType === UserInputType.TOKEN) {
26083
26107
  if (direction === 'from') {
26084
26108
  return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
26085
26109
  }
@@ -26092,13 +26116,15 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
26092
26116
  }
26093
26117
  }, [
26094
26118
  inputValue,
26095
- inputMode,
26096
- token.price,
26119
+ userInputType,
26097
26120
  direction,
26121
+ token.price,
26122
+ maxUsdDecimals,
26098
26123
  inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd,
26124
+ token.decimals,
26099
26125
  ]);
26100
26126
  const AmountChip = isInteractive ? 'button' : 'div';
26101
- const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
26127
+ const priceImpactClass = ((_b = Number(priceImpactPercentage)) !== null && _b !== void 0 ? _b : 0) > Number(criticalPriceImpactPercentage)
26102
26128
  ? 'tw-text-status-negative'
26103
26129
  : 'tw-text-grey-300';
26104
26130
  const BalanceChipTag = balanceChipClickable ? 'button' : 'div';
@@ -26109,13 +26135,13 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
26109
26135
  const inputRef = React$1.useRef(null);
26110
26136
  return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [isInteractive && !isLoading ? (jsxRuntime.jsxs("form", { className: containerClassname, onSubmit: (e) => {
26111
26137
  e.preventDefault();
26112
- }, children: [inputMode === InputMode.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 mobile-sm-height:tw-h-[65px]", children: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
26138
+ }, children: [userInputType === UserInputType.USD && (jsxRuntime.jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsxRuntime.jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', userInputType === UserInputType.USD && 'tw-pl-[33px]') }, props))] })) : (jsxRuntime.jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsxRuntime.jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 mobile-sm-height:tw-h-[65px]", children: jsxRuntime.jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxRuntime.jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsxRuntime.jsx("div", { className: "tw-px-squid-xs", children: jsxRuntime.jsx(ErrorMessage, { message: error.message }) })) : (jsxRuntime.jsx(Tooltip, Object.assign({}, (isLoading
26113
26139
  ? undefined
26114
- : inputMode === InputMode.TOKEN
26140
+ : userInputType === UserInputType.TOKEN
26115
26141
  ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
26116
26142
  : inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.usdModeTooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxRuntime.jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive
26117
26143
  ? interactiveChipClassName
26118
- : notInteractiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
26144
+ : notInteractiveChipClassName), children: [jsxRuntime.jsx(SwapInputsIcon, {}), userInputType === UserInputType.TOKEN ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxRuntime.jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsxRuntime.jsx(CaptionText, { children: isUsdAmountVerySmall
26119
26145
  ? formatIfVerySmall.token
26120
26146
  : amountFormatted })] }) })) : (jsxRuntime.jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsxRuntime.jsx(CaptionText, { children: isTokenAmountVerySmall
26121
26147
  ? formatIfVerySmall.token
@@ -26375,9 +26401,24 @@ const emptyChainIconTextClassNameMap = {
26375
26401
  primary: 'tw-text-grey-100',
26376
26402
  accent: 'group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900',
26377
26403
  };
26404
+ const outlineWidthMap = {
26405
+ loading: {
26406
+ inner: 75,
26407
+ outer: 74,
26408
+ },
26409
+ empty: {
26410
+ inner: 76,
26411
+ outer: 77,
26412
+ },
26413
+ full: {
26414
+ inner: 101,
26415
+ outer: 97,
26416
+ },
26417
+ };
26378
26418
  function AssetsButton({ chain, token, onClick, variant = 'primary', isLoading = false, tooltip, }) {
26379
26419
  var _a;
26380
26420
  const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
26421
+ const outlineWidth = outlineWidthMap[isLoading ? 'loading' : !!token && !!chain ? 'full' : 'empty'];
26381
26422
  const chainBgColor = (_a = (chain && chain.bgColor)) !== null && _a !== void 0 ? _a : defaultBgColor;
26382
26423
  const tokenBgColor = (chain && token && !isLoading && token.bgColor) || defaultBgColor;
26383
26424
  const bgGradient = React$1.useMemo(() => {
@@ -26390,13 +26431,13 @@ function AssetsButton({ chain, token, onClick, variant = 'primary', isLoading =
26390
26431
  return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
26391
26432
  }, [chainBgColor, tokenBgColor, chain, token, isLoading]);
26392
26433
  const ButtonTag = isLoading ? 'div' : 'button';
26393
- return (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-w-fit", children: jsxRuntime.jsxs(ButtonTag, { onClick: isLoading ? undefined : onClick, disabled: isLoading, "aria-disabled": isLoading, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant], isLoading && 'tw-cursor-not-allowed'), children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between', chain && token && !isLoading
26434
+ return (jsxRuntime.jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-w-fit", tooltipContent: isLoading ? undefined : tooltip === null || tooltip === void 0 ? void 0 : tooltip.tooltipContent, children: jsxRuntime.jsxs(ButtonTag, { onClick: isLoading ? undefined : onClick, disabled: isLoading, "aria-disabled": isLoading, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant], isLoading ? 'tw-cursor-not-allowed' : 'tw-group/assets-button'), children: [jsxRuntime.jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsxRuntime.jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxRuntime.jsxs("svg", { className: "tw-absolute -tw-left-[2px] -tw-top-[2px] tw-z-20 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.inner, height: "44", viewBox: `0 0 ${outlineWidth.inner} 44`, fill: "none", children: [jsxRuntime.jsx("clipPath", { id: "halfClip1", children: jsxRuntime.jsx("rect", { x: "0", y: "0", width: outlineWidth.inner, height: "44" }) }), jsxRuntime.jsx("path", { d: "M59.1506 36.849L59.1508 36.8492C63.2511 40.9496 68.6272 43 74.0001 43H145C156.598 43 166 33.598 166 22C166 10.402 156.598 1 145 1H74.0001C68.6272 0.999977 63.2511 3.05042 59.1508 7.15076C58.6183 7.68325 58.0958 8.22097 57.5842 8.74755L57.5817 8.75009C55.9228 10.4574 54.3925 12.0283 52.8031 13.1834C51.2282 14.3279 49.6791 15 48 15C46.3209 15 44.7718 14.3279 43.1969 13.1834C41.6075 12.0283 40.0772 10.4574 38.4183 8.75009L38.4159 8.74759C37.9042 8.22101 37.3817 7.68327 36.8492 7.15076C32.7489 3.05042 27.3728 0.999977 21.9999 1C16.6271 1.00002 11.251 3.05047 7.15076 7.15076C3.05045 11.2511 1 16.6272 1 22C1 27.3728 3.05045 32.7489 7.15076 36.8492C11.251 40.9495 16.6271 43 21.9999 43C27.3728 43 32.7489 40.9496 36.8492 36.8492L36.8494 36.849C37.3794 36.3188 37.8994 35.7834 38.4088 35.2589L38.4108 35.2569C40.0704 33.5483 41.6019 31.9756 43.1928 30.8191C44.7691 29.6731 46.3197 29 48 29C49.6803 29 51.2309 29.6731 52.8072 30.8191C54.3981 31.9756 55.9296 33.5483 57.5892 35.2569L57.5912 35.2589C58.1006 35.7834 58.6206 36.3188 59.1506 36.849Z", stroke: "currentColor", className: "tw-text-grey-900", "stroke-width": "2", "clip-path": "url(#halfClip1)" /* Apply the clipPath */ })] }), jsxRuntime.jsxs("svg", { className: "tw-absolute -tw-left-[4px] -tw-top-[4px] tw-z-10 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.outer, height: "48", viewBox: `0 0 ${outlineWidth.outer} 48`, fill: "none", children: [jsxRuntime.jsx("clipPath", { id: "halfClip2", children: jsxRuntime.jsx("rect", { x: "0", y: "0", width: outlineWidth.outer, height: "48" }) }), jsxRuntime.jsx("path", { d: "M60.4432 39.5559L60.4437 39.5564C64.7391 43.8517 70.3729 46 76.0001 46H147C159.15 46 169 36.1503 169 24C169 11.8497 159.15 2 147 2H76.0001C70.3729 1.99998 64.7391 4.14825 60.4437 8.44365C59.9062 8.98109 59.3797 9.52298 58.8697 10.0479L58.8645 10.0532C57.1905 11.7761 55.7217 13.2796 54.2152 14.3745C52.7378 15.4481 51.3923 16 50 16C48.6077 16 47.2622 15.4481 45.7848 14.3745C44.2783 13.2796 42.8095 11.7761 41.1355 10.0532L41.1305 10.0481C40.6205 9.52314 40.0939 8.98117 39.5563 8.44365C35.2609 4.14825 29.6271 1.99998 23.9999 2C18.3727 2.00002 12.739 4.1483 8.44365 8.44365C4.14827 12.739 2 18.3728 2 24C2 29.6272 4.14827 35.261 8.44365 39.5564C12.739 43.8517 18.3727 46 23.9999 46C29.6271 46 35.2609 43.8517 39.5563 39.5564L39.5568 39.5559C40.0917 39.0207 40.6159 38.481 41.1237 37.9582L41.1281 37.9537C42.8028 36.2295 44.2728 34.7243 45.7808 33.6279C47.2597 32.5528 48.6066 32 50 32C51.3934 32 52.7403 32.5528 54.2192 33.6279C55.7272 34.7243 57.1972 36.2295 58.8719 37.9537L58.8763 37.9582C59.3841 38.481 59.9083 39.0207 60.4432 39.5559Z", stroke: "currentColor", className: "tw-text-material-light-average", "stroke-width": "4", "clip-path": "url(#halfClip2)" /* Apply the clipPath */ })] }), jsxRuntime.jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between', chain && token && !isLoading
26394
26435
  ? 'tw-w-[90px]'
26395
26436
  : 'tw-w-full tw-max-w-[72px]'), style: {
26396
26437
  backgroundImage: bgGradient,
26397
- }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chain && !isLoading ? (jsxRuntime.jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (!isLoading && (jsxRuntime.jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsxRuntime.jsx(PlusIcon, {}) }))) }) }), chain && token && !isLoading ? (jsxRuntime.jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-overflow-hidden'), children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
26438
+ }, children: jsxRuntime.jsx("div", { className: clsx(imageClass), children: chain && !isLoading ? (jsxRuntime.jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (!isLoading && (jsxRuntime.jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsxRuntime.jsx(PlusIcon, {}) }))) }) }), chain && token && !isLoading ? (jsxRuntime.jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-z-[5] tw-h-squid-xl tw-overflow-hidden'), children: [jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
26398
26439
  backgroundColor: tokenBgColor,
26399
- } }), jsxRuntime.jsx("img", { src: token.iconUrl, alt: token.symbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n tw-border-t tw-border-material-light-thin" })] })) : null, jsxRuntime.jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', chain && token && !isLoading && 'tw-pl-[7px]'), style: {
26440
+ } }), jsxRuntime.jsx("img", { src: token.iconUrl, alt: token.symbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsxRuntime.jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n tw-border-t tw-border-material-light-thin" })] })) : null, jsxRuntime.jsxs("div", { className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border tw-border-l-0 tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs before:tw-absolute before:-tw-inset-[3px] before:tw-z-[1] before:tw-w-[calc(100%+3px)] before:tw-translate-x-[3px] before:tw-rounded-br-full before:tw-rounded-tr-full before:tw-border-2 before:tw-border-l-0 before:tw-border-transparent after:tw-absolute after:-tw-inset-[5px] after:tw-z-0 after:tw-w-[calc(100%+4px)] after:tw-translate-x-[6px] after:tw-rounded-br-full after:tw-rounded-tr-full after:tw-border-4 after:tw-border-l-0 after:tw-border-transparent group-hover/assets-button:before:tw-border-grey-900 group-hover/assets-button:after:tw-border-material-light-average', chain && token && !isLoading && 'tw-pl-[7px]'), style: {
26400
26441
  backgroundColor: tokenBgColor,
26401
26442
  color: token === null || token === void 0 ? void 0 : token.textColor,
26402
26443
  }, children: [jsxRuntime.jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', (!token || !chain || isLoading) && 'tw-w-[135px]'), children: chain && token && !isLoading
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { SwapDirection } from '../../types/components';
2
3
  import { TooltipProps } from './Tooltip';
3
4
  interface Token {
@@ -5,7 +6,7 @@ interface Token {
5
6
  symbol: string;
6
7
  decimals: number;
7
8
  }
8
- interface NumericInputProps {
9
+ interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
9
10
  token: Token;
10
11
  onAmountChange: (tokenAmount: string) => void;
11
12
  forcedAmount?: string;
@@ -33,5 +34,5 @@ interface NumericInputProps {
33
34
  tooltip?: Omit<TooltipProps, 'children'>;
34
35
  };
35
36
  }
36
- export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
37
+ export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
37
38
  export {};
@@ -4,7 +4,6 @@ interface SwapConfigurationProps {
4
4
  direction: SwapDirection;
5
5
  priceImpactPercentage?: string;
6
6
  amount?: string;
7
- forcedAmount?: string;
8
7
  tokenPrice?: number;
9
8
  balance?: string;
10
9
  isFetching?: boolean;
package/dist/esm/index.js CHANGED
@@ -6544,7 +6544,7 @@ var debounce$1 = /*@__PURE__*/getDefaultExportFromCjs(debounce_1);
6544
6544
  * @param {string|number} tokenPrice - The price of one token in USD
6545
6545
  * @returns {BigNumber} - The equivalent amount in USD
6546
6546
  */
6547
- function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 4) {
6547
+ function convertTokenAmountToUSD(tokenAmount, tokenPrice, maxDecimals = 2) {
6548
6548
  if (!tokenAmount || !tokenPrice)
6549
6549
  return '';
6550
6550
  const amount = new BigNumber(tokenAmount);
@@ -6566,7 +6566,7 @@ function convertUSDToTokenAmount(usdAmount, tokenPrice, maxDecimals) {
6566
6566
  return amount.dividedBy(price).decimalPlaces(maxDecimals).toString();
6567
6567
  }
6568
6568
  const INTL_NUMBER_FORMATTER = new Intl.NumberFormat('en-US', {
6569
- minimumFractionDigits: 0,
6569
+ minimumFractionDigits: 2,
6570
6570
  maximumFractionDigits: 5,
6571
6571
  });
6572
6572
  /**
@@ -17029,7 +17029,7 @@ const dropdownPositionClassMap = {
17029
17029
  const statusBadge = {
17030
17030
  completed: {},
17031
17031
  pending: {
17032
- badge: jsx(Loader, { size: "16", strokeWidth: "4" }),
17032
+ badge: (jsx(Loader, { size: "16", strokeWidth: "4", className: "group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900" })),
17033
17033
  containerClassName: 'tw-bg-royal-400',
17034
17034
  },
17035
17035
  failed: {
@@ -17570,11 +17570,14 @@ function NavigationBar(_a) {
17570
17570
  ? 'tw-w-full tw-pr-squid-xs mobile-xs-height:tw-pr-squid-m'
17571
17571
  : 'tw-pr-squid-m mobile-lg:tw-pl-squid-l', !title && 'tw-w-full mobile-xs-height:tw-w-[unset]'), children: [displayBackButton ? (jsx(Button$1, { className: displayButtonShadows
17572
17572
  ? 'group-data-[squid-theme-type=dark]:tw-shadow-elevation-dark-2 group-data-[squid-theme-type=light]:tw-shadow-elevation-light-2'
17573
- : undefined, variant: "tertiary", size: "md", isLoading: isLoading, icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => (jsx(Tooltip, Object.assign({}, action.tooltip, { childrenClassName: "tw-rounded-squid-m", containerClassName: "tw-rounded-squid-m", tooltipWidth: "max", children: jsx(Button$1, { size: "md", variant: "tertiary", isLoading: isLoading, label: typeof action.labelOrIcon === 'string'
17574
- ? action.labelOrIcon
17575
- : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
17576
- ? null
17577
- : action.labelOrIcon, onClick: action.onClick, chip: action.chip }) }), action.id))) })] }), title ? (jsx("div", { className: cn('tw-h-squid-xxl tw-w-full tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l',
17573
+ : undefined, variant: "tertiary", size: "md", isLoading: isLoading, icon: jsx(ArrowLeftIcon, {}), onClick: onBackButtonClick })) : null, logoUrl ? (jsx("img", { src: logoUrl, className: "tw-h-squid-xl tw-min-w-squid-xl" })) : null, jsx("span", { className: "tw-flex tw-flex-1 tw-items-center tw-justify-end tw-gap-squid-xxs", children: actions === null || actions === void 0 ? void 0 : actions.map((action) => {
17574
+ var _a;
17575
+ return (jsx(Tooltip, Object.assign({}, action.tooltip, { tooltipContent: isLoading ? undefined : (_a = action.tooltip) === null || _a === void 0 ? void 0 : _a.tooltipContent, childrenClassName: "tw-rounded-squid-m", containerClassName: "tw-rounded-squid-m", tooltipWidth: "max", children: jsx(Button$1, { size: "md", variant: "tertiary", isLoading: isLoading, label: typeof action.labelOrIcon === 'string'
17576
+ ? action.labelOrIcon
17577
+ : undefined, className: "tw-text-grey-300", icon: typeof action.labelOrIcon === 'string'
17578
+ ? null
17579
+ : action.labelOrIcon, onClick: action.onClick, chip: action.chip }) }), action.id));
17580
+ }) })] }), title ? (jsx("div", { className: cn('tw-h-squid-xxl tw-w-full tw-items-center tw-px-squid-m tw-py-squid-xxs mobile-lg:tw-px-squid-l',
17578
17581
  // hide the title on small screens when back button is displayed, so it's positioned on the left
17579
17582
  displayBackButton
17580
17583
  ? 'tw-hidden mobile-xs-height:tw-flex'
@@ -18558,7 +18561,7 @@ function SwapConfiguration({ amount, tokenPrice = 0, isFetching: isFetchingProp
18558
18561
  ? walletButton === null || walletButton === void 0 ? void 0 : walletButton.address
18559
18562
  : (_a = walletButton === null || walletButton === void 0 ? void 0 : walletButton.emptyAddressLabel) !== null && _a !== void 0 ? _a : 'Connect wallet' }), jsx(ChevronArrowIcon, { className: (walletButton === null || walletButton === void 0 ? void 0 : walletButton.address)
18560
18563
  ? 'tw-text-grey-600'
18561
- : 'tw-text-royal-400' })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { token: {
18564
+ : 'tw-text-royal-400' })] })] }))] }) })) }), jsx("div", { className: "tw-px-squid-m mobile-lg:tw-px-squid-l", children: jsx(AssetsButton, Object.assign({}, assetsButton, { chain: chain, token: token, isLoading: isLoading })) }), isFetching && (jsx("div", { className: "tw-absolute tw-bottom-2 tw-left-squid-m tw-z-10 tw-overflow-hidden mobile-lg:tw-left-squid-l", children: jsx("div", { className: "tw-h-[94px] tw-w-[1260px] tw-animate-move-loading-cover-to-right tw-bg-dark-cover" }) })), jsx(NumericInput, { inputMode: "decimal", pattern: "[0-9.,]*", token: {
18562
18565
  decimals: (_b = token === null || token === void 0 ? void 0 : token.decimals) !== null && _b !== void 0 ? _b : 18,
18563
18566
  symbol: (_c = token === null || token === void 0 ? void 0 : token.symbol) !== null && _c !== void 0 ? _c : '',
18564
18567
  price: tokenPrice,
@@ -18634,7 +18637,7 @@ const SwapStepsCollapsed = forwardRef((props, ref) => {
18634
18637
  : 'tw-animate-fade-out') }), jsx("div", { style: {
18635
18638
  zIndex: 20,
18636
18639
  display: isRouteVisible ? 'none' : 'block',
18637
- }, onClick: handleToggleRouteSteps, className: "tw-absolute tw-inset-0 tw-h-[60px] tw-cursor-pointer tw-rounded-squid-l tw-border tw-border-material-light-thin" }), jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
18640
+ }, onClick: handleToggleRouteSteps, className: "tw-absolute tw-inset-0 tw-h-[60px] tw-cursor-pointer tw-rounded-squid-l tw-border tw-border-material-light-thin hover:tw-border-material-light-average hover:tw-bg-material-light-thin" }), jsx("div", { onClick: isShowRouteAnimationRunning ? undefined : handleToggleRouteSteps, style: {
18638
18641
  [CSS_VARS.COLLAPSE_ROUTE_DURATION]: `${ANIMATION_DURATIONS.HIDE_ROUTE}ms`,
18639
18642
  [CSS_VARS.EXPAND_ROUTE_DURATION]: `${ANIMATION_DURATIONS.SHOW_ROUTE}ms`,
18640
18643
  }, className: cn('tw-relative tw-h-[60px] tw-max-h-[470px] tw-w-full tw-overflow-hidden tw-rounded-squid-l tw-border tw-border-material-light-thin tw-bg-grey-800 tw-backdrop-blur-2xl mobile-xs-height:tw-max-h-[535px]', isRouteVisible &&
@@ -18643,7 +18646,6 @@ const SwapStepsCollapsed = forwardRef((props, ref) => {
18643
18646
  : 'tw-animate-collapse-route')), children: jsxs("div", { className: cn('tw-flex tw-flex-col tw-gap-squid-xxs', isRouteVisible || isShowRouteAnimationRunning
18644
18647
  ? 'tw-max-h-[470px] mobile-xs-height:tw-max-h-[535px]'
18645
18648
  : ''), style: {
18646
- paddingTop: `${STEP_ITEM_HEIGHT / 2}px`,
18647
18649
  transition: isShowRouteAnimationRunning
18648
18650
  ? `transform ${ANIMATION_DURATIONS.SHOW_ROUTE}ms ${ANIMATION_TIMINGS.CHANGE_SWAP_STEP}`
18649
18651
  : isRouteVisible
@@ -18655,6 +18657,7 @@ const SwapStepsCollapsed = forwardRef((props, ref) => {
18655
18657
  }, children: [jsx("ul", { ref: routeStepsListRef, style: {
18656
18658
  zIndex: isRouteVisible ? 0 : -10,
18657
18659
  scrollbarWidth: 'none',
18660
+ paddingTop: 10,
18658
18661
  }, className: "tw-relative tw-flex tw-w-modal-compact tw-max-w-full tw-flex-1 tw-grow-0 tw-flex-col-reverse tw-items-center tw-self-stretch tw-overflow-y-auto tw-overflow-x-hidden tw-px-squid-xs tw-pb-squid-xxs mobile-lg:tw-w-modal-large", children: steps.map((step, index) => (jsx(SwapStepItem, { descriptionBlocks: step.descriptionBlocks,
18659
18662
  // show separator for all steps except the first one
18660
18663
  showStepSeparator: index > 0, link: step.link, status: newStepIndex < index ? 'pending' : step.status }, index))) }), jsx("footer", { className: "tw-flex tw-max-h-[55px] tw-min-h-[55px] tw-w-full tw-justify-center tw-gap-squid-xs tw-self-stretch tw-px-squid-s tw-pb-squid-s", children: jsx(Button$1, { size: "md", variant: "secondary", onClick: footerButton === null || footerButton === void 0 ? void 0 : footerButton.onClick, link: footerButton === null || footerButton === void 0 ? void 0 : footerButton.link, label: footerButton === null || footerButton === void 0 ? void 0 : footerButton.label, className: "tw-w-full", containerClassName: "tw-w-full" }) })] }) })] }) }) }));
@@ -25907,6 +25910,24 @@ function DesktopTooltip({ children, tooltipContent, tooltipWidth = 'container',
25907
25910
  displayDelayMs,
25908
25911
  isTooltipVisible,
25909
25912
  ]);
25913
+ useEffect(() => {
25914
+ const onMouseMove = (event) => {
25915
+ var _a, _b;
25916
+ const mouseIsMovingOutOfTooltip = event.target !== tooltipRef.current &&
25917
+ event.target !== (tooltipTriggerRef === null || tooltipTriggerRef === void 0 ? void 0 : tooltipTriggerRef.current) &&
25918
+ !((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) &&
25919
+ !((_b = tooltipTriggerRef === null || tooltipTriggerRef === void 0 ? void 0 : tooltipTriggerRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target));
25920
+ if (mouseIsMovingOutOfTooltip) {
25921
+ handleMouseLeave();
25922
+ }
25923
+ };
25924
+ if (isTooltipVisible) {
25925
+ document.addEventListener('mousemove', onMouseMove);
25926
+ }
25927
+ return () => {
25928
+ document.removeEventListener('mousemove', onMouseMove);
25929
+ };
25930
+ }, [isTooltipVisible]);
25910
25931
  const handleMouseEnter = useCallback((e) => {
25911
25932
  var _a;
25912
25933
  if (e.target === tooltipRef.current ||
@@ -25948,18 +25969,19 @@ const RegExpNonZeroValue = /[^0.]/;
25948
25969
  const interactiveChipClassName = 'hover:tw-bg-material-light-thin';
25949
25970
  const notInteractiveChipClassName = 'tw-cursor-not-allowed';
25950
25971
  const loadingClassName = 'tw-opacity-50';
25951
- var InputMode;
25952
- (function (InputMode) {
25953
- InputMode[InputMode["TOKEN"] = 0] = "TOKEN";
25954
- InputMode[InputMode["USD"] = 1] = "USD";
25955
- })(InputMode || (InputMode = {}));
25956
- function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 4, formatIfVerySmall = {
25957
- token: '0.001',
25958
- usd: '0.01',
25959
- }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton, }) {
25960
- var _a;
25972
+ var UserInputType;
25973
+ (function (UserInputType) {
25974
+ UserInputType[UserInputType["TOKEN"] = 0] = "TOKEN";
25975
+ UserInputType[UserInputType["USD"] = 1] = "USD";
25976
+ })(UserInputType || (UserInputType = {}));
25977
+ function NumericInput(_a) {
25978
+ var _b;
25979
+ var { priceImpactPercentage, balance = '0', error, criticalPriceImpactPercentage = 5, token, onAmountChange, forcedAmount, maxUsdDecimals = 2, formatIfVerySmall = {
25980
+ token: '0.001',
25981
+ usd: '0.01',
25982
+ }, showDetails = true, isLoading = false, direction, inputModeButton, isInteractive = false, balanceButton } = _a, props = __rest$1(_a, ["priceImpactPercentage", "balance", "error", "criticalPriceImpactPercentage", "token", "onAmountChange", "forcedAmount", "maxUsdDecimals", "formatIfVerySmall", "showDetails", "isLoading", "direction", "inputModeButton", "isInteractive", "balanceButton"]);
25961
25983
  const [inputValue, setInputValue] = useState('');
25962
- const [inputMode, setInputMode] = useState(InputMode.TOKEN);
25984
+ const [userInputType, setUserInputType] = useState(UserInputType.TOKEN);
25963
25985
  const balanceChipClickable = isInteractive && parseFloat(balance) > 0;
25964
25986
  useEffect(() => {
25965
25987
  if (forcedAmount !== undefined) {
@@ -25968,11 +25990,11 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
25968
25990
  }, [forcedAmount]);
25969
25991
  const updateInputValue = useCallback((newValue) => {
25970
25992
  const safeNewValue = trimExtraDecimals(newValue, token.decimals);
25971
- const formattedAmount = inputMode === InputMode.TOKEN
25993
+ const formattedAmount = userInputType === UserInputType.TOKEN
25972
25994
  ? safeNewValue
25973
25995
  : convertTokenAmountToUSD(safeNewValue, token.price, maxUsdDecimals);
25974
25996
  setInputValue(formattedAmount);
25975
- }, [inputMode, token.price, direction, token.decimals]);
25997
+ }, [userInputType, token.price, direction, token.decimals]);
25976
25998
  const onBalanceButtonClick = useCallback(() => {
25977
25999
  if (balanceChipClickable) {
25978
26000
  updateInputValue(balance);
@@ -25984,7 +26006,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
25984
26006
  ]);
25985
26007
  const handleInputChange = (e) => {
25986
26008
  let value = e.target.value.replace(/,/g, '.'); // Replace commas with dots
25987
- const maxDecimalsForInputType = inputMode === InputMode.TOKEN ? token.decimals : maxUsdDecimals;
26009
+ const maxDecimalsForInputType = userInputType === UserInputType.TOKEN ? token.decimals : maxUsdDecimals;
25988
26010
  const isValidAmount = new RegExp(`^\\d*\\.?\\d{0,${maxDecimalsForInputType}}$`).test(value);
25989
26011
  if (isValidAmount) {
25990
26012
  setInputValue(value);
@@ -26003,12 +26025,14 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
26003
26025
  const handleSwitchInputMode = () => {
26004
26026
  var _a;
26005
26027
  if (inputValue !== '') {
26006
- const convertedAmount = inputMode === InputMode.TOKEN
26028
+ const convertedAmount = userInputType === UserInputType.TOKEN
26007
26029
  ? convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals)
26008
26030
  : convertUSDToTokenAmount(inputValue, token.price, token.decimals);
26009
26031
  setInputValue(convertedAmount);
26010
26032
  }
26011
- setInputMode((prevMode) => prevMode === InputMode.TOKEN ? InputMode.USD : InputMode.TOKEN);
26033
+ setUserInputType((prevMode) => prevMode === UserInputType.TOKEN
26034
+ ? UserInputType.USD
26035
+ : UserInputType.TOKEN);
26012
26036
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
26013
26037
  };
26014
26038
  const getRawAmounts = (amount) => {
@@ -26019,7 +26043,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
26019
26043
  isTokenAmountVerySmall: false,
26020
26044
  isUsdAmountVerySmall: false,
26021
26045
  };
26022
- if (inputMode === InputMode.TOKEN) {
26046
+ if (userInputType === UserInputType.TOKEN) {
26023
26047
  const usdRawAmount = convertTokenAmountToUSD(amount, token.price, maxUsdDecimals);
26024
26048
  const tokenRawAmount = amount;
26025
26049
  const isTokenAmountVerySmall = !!tokenRawAmount &&
@@ -26059,7 +26083,7 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
26059
26083
  var _a;
26060
26084
  if (isNaN(Number(inputValue)) || inputValue === '')
26061
26085
  return '0';
26062
- if (inputMode === InputMode.TOKEN) {
26086
+ if (userInputType === UserInputType.TOKEN) {
26063
26087
  if (direction === 'from') {
26064
26088
  return formatAmount(convertTokenAmountToUSD(inputValue, token.price, maxUsdDecimals));
26065
26089
  }
@@ -26072,13 +26096,15 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
26072
26096
  }
26073
26097
  }, [
26074
26098
  inputValue,
26075
- inputMode,
26076
- token.price,
26099
+ userInputType,
26077
26100
  direction,
26101
+ token.price,
26102
+ maxUsdDecimals,
26078
26103
  inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.amountUsd,
26104
+ token.decimals,
26079
26105
  ]);
26080
26106
  const AmountChip = isInteractive ? 'button' : 'div';
26081
- const priceImpactClass = ((_a = Number(priceImpactPercentage)) !== null && _a !== void 0 ? _a : 0) > Number(criticalPriceImpactPercentage)
26107
+ const priceImpactClass = ((_b = Number(priceImpactPercentage)) !== null && _b !== void 0 ? _b : 0) > Number(criticalPriceImpactPercentage)
26082
26108
  ? 'tw-text-status-negative'
26083
26109
  : 'tw-text-grey-300';
26084
26110
  const BalanceChipTag = balanceChipClickable ? 'button' : 'div';
@@ -26089,13 +26115,13 @@ function NumericInput({ priceImpactPercentage, balance = '0', error, criticalPri
26089
26115
  const inputRef = useRef(null);
26090
26116
  return (jsxs(Fragment, { children: [isInteractive && !isLoading ? (jsxs("form", { className: containerClassname, onSubmit: (e) => {
26091
26117
  e.preventDefault();
26092
- }, children: [inputMode === InputMode.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", { ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', inputMode === InputMode.USD && 'tw-pl-[33px]') })] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 mobile-sm-height:tw-h-[65px]", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
26118
+ }, children: [userInputType === UserInputType.USD && (jsx("span", { className: "tw-absolute tw-left-5 tw-top-[11px] tw-leading-[43px] tw-text-grey-600 mobile-lg:tw-left-[30px]", children: "$" })), jsx("input", Object.assign({ ref: inputRef, type: "text", value: inputValue, onChange: handleInputChange, placeholder: "0", className: cn('tw-h-[55px] tw-w-full tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-grey-300 placeholder:tw-text-grey-600 hover:tw-bg-material-light-thin focus:tw-bg-material-light-thin focus:tw-text-royal-400 focus:tw-outline-none', userInputType === UserInputType.USD && 'tw-pl-[33px]') }, props))] })) : (jsx("div", { className: cn(containerClassname, (isLoading || Number(inputValue || 0) === 0) && loadingClassName), children: jsx("div", { className: "tw-flex tw-h-[55px] tw-w-full tw-items-center tw-rounded-squid-s tw-bg-transparent tw-px-squid-xs tw-py-squid-s tw-text-heading-small tw-font-heading-regular tw-text-grey-300 mobile-sm-height:tw-h-[65px]", children: jsx("span", { children: inputValue || 0 }) }) })), !showDetails ? null : (jsxs("footer", { className: cn('tw-flex tw-h-squid-m tw-max-h-squid-m tw-items-center tw-justify-between tw-gap-2 tw-px-squid-xs tw-text-grey-500 mobile-lg:tw-px-squid-m', isLoading && loadingClassName), children: [error ? (jsx("div", { className: "tw-px-squid-xs", children: jsx(ErrorMessage, { message: error.message }) })) : (jsx(Tooltip, Object.assign({}, (isLoading
26093
26119
  ? undefined
26094
- : inputMode === InputMode.TOKEN
26120
+ : userInputType === UserInputType.TOKEN
26095
26121
  ? inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.tokenModeTooltip
26096
26122
  : inputModeButton === null || inputModeButton === void 0 ? void 0 : inputModeButton.usdModeTooltip), { tooltipWidth: "max", childrenClassName: "tw-rounded-squid-s", containerClassName: "tw-rounded-squid-s", children: jsxs(AmountChip, { onClick: isInteractive ? handleSwitchInputMode : undefined, className: cn(buttonClassName, isInteractive
26097
26123
  ? interactiveChipClassName
26098
- : notInteractiveChipClassName), children: [jsx(SwapInputsIcon, {}), inputMode === InputMode.TOKEN ? (jsx(Fragment, { children: jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
26124
+ : notInteractiveChipClassName), children: [jsx(SwapInputsIcon, {}), userInputType === UserInputType.TOKEN ? (jsx(Fragment, { children: jsxs("span", { className: "tw-flex tw-items-center tw-text-grey-500", children: [jsxs(CaptionText, { className: "tw-opacity-66", children: [isUsdAmountVerySmall ? '<' : '', "$"] }), jsx(CaptionText, { children: isUsdAmountVerySmall
26099
26125
  ? formatIfVerySmall.token
26100
26126
  : amountFormatted })] }) })) : (jsxs("span", { className: "tw-text-grey-500", children: [isTokenAmountVerySmall ? '<' : '', jsx(CaptionText, { children: isTokenAmountVerySmall
26101
26127
  ? formatIfVerySmall.token
@@ -26355,9 +26381,24 @@ const emptyChainIconTextClassNameMap = {
26355
26381
  primary: 'tw-text-grey-100',
26356
26382
  accent: 'group-data-[squid-theme-type=dark]:tw-text-grey-100 group-data-[squid-theme-type=light]:tw-text-grey-900',
26357
26383
  };
26384
+ const outlineWidthMap = {
26385
+ loading: {
26386
+ inner: 75,
26387
+ outer: 74,
26388
+ },
26389
+ empty: {
26390
+ inner: 76,
26391
+ outer: 77,
26392
+ },
26393
+ full: {
26394
+ inner: 101,
26395
+ outer: 97,
26396
+ },
26397
+ };
26358
26398
  function AssetsButton({ chain, token, onClick, variant = 'primary', isLoading = false, tooltip, }) {
26359
26399
  var _a;
26360
26400
  const defaultBgColor = `var(${themeTypesKeys[themeKeyVariantMap[variant]].cssVariable})`;
26401
+ const outlineWidth = outlineWidthMap[isLoading ? 'loading' : !!token && !!chain ? 'full' : 'empty'];
26361
26402
  const chainBgColor = (_a = (chain && chain.bgColor)) !== null && _a !== void 0 ? _a : defaultBgColor;
26362
26403
  const tokenBgColor = (chain && token && !isLoading && token.bgColor) || defaultBgColor;
26363
26404
  const bgGradient = useMemo(() => {
@@ -26370,13 +26411,13 @@ function AssetsButton({ chain, token, onClick, variant = 'primary', isLoading =
26370
26411
  return `linear-gradient(to right, ${chainBgColor} 43.5%, ${tokenBgColor} 56.55%)`;
26371
26412
  }, [chainBgColor, tokenBgColor, chain, token, isLoading]);
26372
26413
  const ButtonTag = isLoading ? 'div' : 'button';
26373
- return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-w-fit", children: jsxs(ButtonTag, { onClick: isLoading ? undefined : onClick, disabled: isLoading, "aria-disabled": isLoading, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant], isLoading && 'tw-cursor-not-allowed'), children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between', chain && token && !isLoading
26414
+ return (jsx(Tooltip, Object.assign({}, tooltip, { tooltipWidth: "max", containerClassName: "tw-w-fit", tooltipContent: isLoading ? undefined : tooltip === null || tooltip === void 0 ? void 0 : tooltip.tooltipContent, children: jsxs(ButtonTag, { onClick: isLoading ? undefined : onClick, disabled: isLoading, "aria-disabled": isLoading, className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-items-center focus:tw-outline-none', buttonTextClassNameMap[variant], isLoading ? 'tw-cursor-not-allowed' : 'tw-group/assets-button'), children: [jsx("svg", { className: "tw-absolute tw-left-0 tw-z-10 tw-h-[40px] tw-w-[72px] tw-text-material-light-thin", viewBox: "0 0 72 40", xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", children: jsx("path", { d: "m57.86 5.86c-.53.53-1.05 1.06-1.56 1.59-3.29 3.38-6.37 6.55-10.3 6.55s-7.01-3.17-10.3-6.55c-.51-.53-1.03-1.06-1.56-1.59-3.9-3.91-9.02-5.86-14.14-5.86s-10.24 1.95-14.14 5.86c-3.91 3.9-5.86 9.02-5.86 14.14s1.95 10.24 5.86 14.14c3.91 3.91 9.02 5.86 14.14 5.86s10.24-1.95 14.14-5.86c.52-.53 1.04-1.06 1.55-1.58 3.29-3.39 6.37-6.56 10.31-6.56s7.02 3.17 10.31 6.56c.51.53 1.03 1.06 1.55 1.58 3.91 3.91 9.02 5.86 14.14 5.86v-40c-5.12 0-10.24 1.95-14.14 5.86zm14.14 33.14c-5.07 0-9.85-1.98-13.43-5.56-.52-.52-1.02-1.04-1.54-1.57-3.43-3.53-6.67-6.86-11.02-6.86s-7.6 3.33-11.04 6.88c-.5.52-1.01 1.04-1.53 1.56-3.59 3.59-8.36 5.57-13.44 5.57s-9.85-1.98-13.43-5.57c-3.59-3.59-5.56-8.36-5.56-13.43s1.98-9.85 5.56-13.44c3.58-3.6 8.35-5.58 13.43-5.58s9.85 1.98 13.44 5.57c.52.52 1.04 1.05 1.55 1.58 3.43 3.53 6.66 6.86 11.02 6.86s7.59-3.33 11.02-6.86c.51-.52 1.02-1.05 1.55-1.58 3.59-3.59 8.36-5.56 13.43-5.56v38z" }) }), jsxs("svg", { className: "tw-absolute -tw-left-[2px] -tw-top-[2px] tw-z-20 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.inner, height: "44", viewBox: `0 0 ${outlineWidth.inner} 44`, fill: "none", children: [jsx("clipPath", { id: "halfClip1", children: jsx("rect", { x: "0", y: "0", width: outlineWidth.inner, height: "44" }) }), jsx("path", { d: "M59.1506 36.849L59.1508 36.8492C63.2511 40.9496 68.6272 43 74.0001 43H145C156.598 43 166 33.598 166 22C166 10.402 156.598 1 145 1H74.0001C68.6272 0.999977 63.2511 3.05042 59.1508 7.15076C58.6183 7.68325 58.0958 8.22097 57.5842 8.74755L57.5817 8.75009C55.9228 10.4574 54.3925 12.0283 52.8031 13.1834C51.2282 14.3279 49.6791 15 48 15C46.3209 15 44.7718 14.3279 43.1969 13.1834C41.6075 12.0283 40.0772 10.4574 38.4183 8.75009L38.4159 8.74759C37.9042 8.22101 37.3817 7.68327 36.8492 7.15076C32.7489 3.05042 27.3728 0.999977 21.9999 1C16.6271 1.00002 11.251 3.05047 7.15076 7.15076C3.05045 11.2511 1 16.6272 1 22C1 27.3728 3.05045 32.7489 7.15076 36.8492C11.251 40.9495 16.6271 43 21.9999 43C27.3728 43 32.7489 40.9496 36.8492 36.8492L36.8494 36.849C37.3794 36.3188 37.8994 35.7834 38.4088 35.2589L38.4108 35.2569C40.0704 33.5483 41.6019 31.9756 43.1928 30.8191C44.7691 29.6731 46.3197 29 48 29C49.6803 29 51.2309 29.6731 52.8072 30.8191C54.3981 31.9756 55.9296 33.5483 57.5892 35.2569L57.5912 35.2589C58.1006 35.7834 58.6206 36.3188 59.1506 36.849Z", stroke: "currentColor", className: "tw-text-grey-900", "stroke-width": "2", "clip-path": "url(#halfClip1)" /* Apply the clipPath */ })] }), jsxs("svg", { className: "tw-absolute -tw-left-[4px] -tw-top-[4px] tw-z-10 tw-hidden group-hover/assets-button:tw-block", xmlns: "http://www.w3.org/2000/svg", width: outlineWidth.outer, height: "48", viewBox: `0 0 ${outlineWidth.outer} 48`, fill: "none", children: [jsx("clipPath", { id: "halfClip2", children: jsx("rect", { x: "0", y: "0", width: outlineWidth.outer, height: "48" }) }), jsx("path", { d: "M60.4432 39.5559L60.4437 39.5564C64.7391 43.8517 70.3729 46 76.0001 46H147C159.15 46 169 36.1503 169 24C169 11.8497 159.15 2 147 2H76.0001C70.3729 1.99998 64.7391 4.14825 60.4437 8.44365C59.9062 8.98109 59.3797 9.52298 58.8697 10.0479L58.8645 10.0532C57.1905 11.7761 55.7217 13.2796 54.2152 14.3745C52.7378 15.4481 51.3923 16 50 16C48.6077 16 47.2622 15.4481 45.7848 14.3745C44.2783 13.2796 42.8095 11.7761 41.1355 10.0532L41.1305 10.0481C40.6205 9.52314 40.0939 8.98117 39.5563 8.44365C35.2609 4.14825 29.6271 1.99998 23.9999 2C18.3727 2.00002 12.739 4.1483 8.44365 8.44365C4.14827 12.739 2 18.3728 2 24C2 29.6272 4.14827 35.261 8.44365 39.5564C12.739 43.8517 18.3727 46 23.9999 46C29.6271 46 35.2609 43.8517 39.5563 39.5564L39.5568 39.5559C40.0917 39.0207 40.6159 38.481 41.1237 37.9582L41.1281 37.9537C42.8028 36.2295 44.2728 34.7243 45.7808 33.6279C47.2597 32.5528 48.6066 32 50 32C51.3934 32 52.7403 32.5528 54.2192 33.6279C55.7272 34.7243 57.1972 36.2295 58.8719 37.9537L58.8763 37.9582C59.3841 38.481 59.9083 39.0207 60.4432 39.5559Z", stroke: "currentColor", className: "tw-text-material-light-average", "stroke-width": "4", "clip-path": "url(#halfClip2)" /* Apply the clipPath */ })] }), jsx("div", { className: cn('tw-assets-button-mask tw-flex tw-h-squid-xl tw-w-[92px] tw-items-center tw-justify-between', chain && token && !isLoading
26374
26415
  ? 'tw-w-[90px]'
26375
26416
  : 'tw-w-full tw-max-w-[72px]'), style: {
26376
26417
  backgroundImage: bgGradient,
26377
- }, children: jsx("div", { className: clsx(imageClass), children: chain && !isLoading ? (jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (!isLoading && (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) }))) }) }), chain && token && !isLoading ? (jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-h-squid-xl tw-overflow-hidden'), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
26418
+ }, children: jsx("div", { className: clsx(imageClass), children: chain && !isLoading ? (jsx("img", { src: chain.iconUrl, alt: "", className: "tw-rounded-full" })) : (!isLoading && (jsx("span", { className: emptyChainIconTextClassNameMap[variant], children: jsx(PlusIcon, {}) }))) }) }), chain && token && !isLoading ? (jsxs("div", { className: clsx(imageClass, 'tw-absolute tw-left-[54px] tw-z-[5] tw-h-squid-xl tw-overflow-hidden'), children: [jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px]", style: {
26378
26419
  backgroundColor: tokenBgColor,
26379
- } }), jsx("img", { src: token.iconUrl, alt: token.symbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n tw-border-t tw-border-material-light-thin" })] })) : null, jsxs("div", { className: cn('tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border-b tw-border-r tw-border-t tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs', chain && token && !isLoading && 'tw-pl-[7px]'), style: {
26420
+ } }), jsx("img", { src: token.iconUrl, alt: token.symbol, className: "tw-absolute tw-h-squid-xl tw-w-squid-xl tw-rounded-full" }), jsx("div", { className: "tw-absolute tw-right-0 tw-h-full tw-w-[22px] tw-border-b\n tw-border-t tw-border-material-light-thin" })] })) : null, jsxs("div", { className: cn('tw-relative tw-flex tw-h-squid-xl tw-w-fit tw-min-w-squid-xl tw-items-center tw-gap-squid-xxs tw-rounded-br-full tw-rounded-tr-full tw-border tw-border-l-0 tw-border-material-light-thin tw-py-squid-xs tw-pr-squid-xs before:tw-absolute before:-tw-inset-[3px] before:tw-z-[1] before:tw-w-[calc(100%+3px)] before:tw-translate-x-[3px] before:tw-rounded-br-full before:tw-rounded-tr-full before:tw-border-2 before:tw-border-l-0 before:tw-border-transparent after:tw-absolute after:-tw-inset-[5px] after:tw-z-0 after:tw-w-[calc(100%+4px)] after:tw-translate-x-[6px] after:tw-rounded-br-full after:tw-rounded-tr-full after:tw-border-4 after:tw-border-l-0 after:tw-border-transparent group-hover/assets-button:before:tw-border-grey-900 group-hover/assets-button:after:tw-border-material-light-average', chain && token && !isLoading && 'tw-pl-[7px]'), style: {
26380
26421
  backgroundColor: tokenBgColor,
26381
26422
  color: token === null || token === void 0 ? void 0 : token.textColor,
26382
26423
  }, children: [jsx(BodyText, { size: "small", className: cn('tw-leading-[13px]', (!token || !chain || isLoading) && 'tw-w-[135px]'), children: chain && token && !isLoading
@@ -1,3 +1,4 @@
1
+ /// <reference types="react" />
1
2
  import { SwapDirection } from '../../types/components';
2
3
  import { TooltipProps } from './Tooltip';
3
4
  interface Token {
@@ -5,7 +6,7 @@ interface Token {
5
6
  symbol: string;
6
7
  decimals: number;
7
8
  }
8
- interface NumericInputProps {
9
+ interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
9
10
  token: Token;
10
11
  onAmountChange: (tokenAmount: string) => void;
11
12
  forcedAmount?: string;
@@ -33,5 +34,5 @@ interface NumericInputProps {
33
34
  tooltip?: Omit<TooltipProps, 'children'>;
34
35
  };
35
36
  }
36
- export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
37
+ export declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): import("react/jsx-runtime").JSX.Element;
37
38
  export {};
@@ -4,7 +4,6 @@ interface SwapConfigurationProps {
4
4
  direction: SwapDirection;
5
5
  priceImpactPercentage?: string;
6
6
  amount?: string;
7
- forcedAmount?: string;
8
7
  tokenPrice?: number;
9
8
  balance?: string;
10
9
  isFetching?: boolean;
package/dist/index.css CHANGED
@@ -1,4 +1,4 @@
1
1
  .rdp{--rdp-cell-size:40px;--rdp-caption-font-size:18px;--rdp-accent-color:#00f;--rdp-background-color:#e7edff;--rdp-accent-color-dark:#3003e1;--rdp-background-color-dark:#180270;--rdp-outline:2px solid var(--rdp-accent-color);--rdp-outline-selected:3px solid var(--rdp-accent-color);--rdp-selected-color:#fff;margin:1em}.rdp-vhidden{clip:rect(1px,1px,1px,1px)!important;-moz-appearance:none;-webkit-appearance:none;appearance:none;background:transparent;border:0!important;box-sizing:border-box;height:1px!important;margin:0;overflow:hidden!important;padding:0!important;position:absolute!important;top:0;width:1px!important}.rdp-button_reset{appearance:none;-moz-appearance:none;-webkit-appearance:none;background:none;color:inherit;cursor:default;font:inherit;margin:0;padding:0;position:relative}.rdp-button_reset:focus-visible{outline:none}.rdp-button{border:2px solid transparent}.rdp-button[disabled]:not(.rdp-day_selected){opacity:.25}.rdp-button:not([disabled]){cursor:pointer}.rdp-button:focus-visible:not([disabled]){background-color:var(--rdp-background-color);border:var(--rdp-outline);color:inherit}.rdp-button:hover:not([disabled]):not(.rdp-day_selected){background-color:var(--rdp-background-color)}.rdp-months{display:flex}.rdp-month{margin:0 1em}.rdp-month:first-child{margin-left:0}.rdp-month:last-child{margin-right:0}.rdp-table{border-collapse:collapse;margin:0;max-width:calc(var(--rdp-cell-size)*7)}.rdp-with_weeknumber .rdp-table{border-collapse:collapse;max-width:calc(var(--rdp-cell-size)*8)}.rdp-caption{align-items:center;display:flex;justify-content:space-between;padding:0;text-align:left}.rdp-multiple_months .rdp-caption{display:block;position:relative;text-align:center}.rdp-caption_dropdowns,.rdp-caption_label{display:inline-flex;position:relative}.rdp-caption_label{align-items:center;border:2px solid transparent;color:currentColor;font-family:inherit;font-size:var(--rdp-caption-font-size);font-weight:700;margin:0;padding:0 .25em;white-space:nowrap;z-index:1}.rdp-nav{white-space:nowrap}.rdp-multiple_months .rdp-caption_start .rdp-nav{left:0;position:absolute;top:50%;transform:translateY(-50%)}.rdp-multiple_months .rdp-caption_end .rdp-nav{position:absolute;right:0;top:50%;transform:translateY(-50%)}.rdp-nav_button{align-items:center;border-radius:100%;display:inline-flex;height:var(--rdp-cell-size);justify-content:center;padding:.25em;width:var(--rdp-cell-size)}.rdp-dropdown_month,.rdp-dropdown_year{align-items:center;display:inline-flex;position:relative}.rdp-dropdown{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:none;bottom:0;cursor:inherit;font-family:inherit;font-size:inherit;left:0;line-height:inherit;margin:0;opacity:0;padding:0;position:absolute;top:0;width:100%;z-index:2}.rdp-dropdown[disabled]{color:unset;opacity:unset}.rdp-dropdown:focus-visible:not([disabled])+.rdp-caption_label{background-color:var(--rdp-background-color);border:var(--rdp-outline);border-radius:6px}.rdp-dropdown_icon{margin:0 0 0 5px}.rdp-head{border:0}.rdp-head_row,.rdp-row{height:100%}.rdp-head_cell{font-size:.75em;font-weight:700;height:100%;height:var(--rdp-cell-size);padding:0;text-align:center;text-transform:uppercase;vertical-align:middle}.rdp-tbody{border:0}.rdp-tfoot{margin:.5em}.rdp-cell{height:100%;height:var(--rdp-cell-size);padding:0;text-align:center;width:var(--rdp-cell-size)}.rdp-weeknumber{font-size:.75em}.rdp-day,.rdp-weeknumber{align-items:center;border:2px solid transparent;border-radius:100%;box-sizing:border-box;display:flex;height:var(--rdp-cell-size);justify-content:center;margin:0;max-width:var(--rdp-cell-size);overflow:hidden;width:var(--rdp-cell-size)}.rdp-day_today:not(.rdp-day_outside){font-weight:700}.rdp-day_selected,.rdp-day_selected:focus-visible,.rdp-day_selected:hover{background-color:var(--rdp-accent-color);color:var(--rdp-selected-color);opacity:1}.rdp-day_outside{opacity:.5}.rdp-day_selected:focus-visible{outline:var(--rdp-outline);outline-offset:2px;z-index:1}.rdp:not([dir=rtl]) .rdp-day_range_start:not(.rdp-day_range_end){border-bottom-right-radius:0;border-top-right-radius:0}.rdp:not([dir=rtl]) .rdp-day_range_end:not(.rdp-day_range_start),.rdp[dir=rtl] .rdp-day_range_start:not(.rdp-day_range_end){border-bottom-left-radius:0;border-top-left-radius:0}.rdp[dir=rtl] .rdp-day_range_end:not(.rdp-day_range_start){border-bottom-right-radius:0;border-top-right-radius:0}.rdp-day_range_end.rdp-day_range_start{border-radius:100%}.rdp-day_range_middle{border-radius:0}
2
2
  /*
3
3
  ! tailwindcss v3.4.1 | MIT License | https://tailwindcss.com
4
- */*,:after,:before{border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.tw-sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.tw-pointer-events-none{pointer-events:none}.tw-visible{visibility:visible}.tw-invisible{visibility:hidden}.tw-fixed{position:fixed}.tw-absolute{position:absolute}.tw-relative{position:relative}.tw-inset-0{inset:0}.tw-inset-squid-xxs{inset:.3125rem}.tw-inset-y-0{bottom:0;top:0}.-tw-bottom-20{bottom:-5rem}.-tw-left-\[20px\]{left:-20px}.-tw-left-\[2px\]{left:-2px}.-tw-left-\[4px\]{left:-4px}.-tw-left-\[5px\]{left:-5px}.-tw-right-1\/3{right:-33.333333%}.-tw-right-squid-xxs{right:-.3125rem}.-tw-top-8{top:-2rem}.-tw-top-\[2px\]{top:-2px}.-tw-top-\[4px\]{top:-4px}.-tw-top-\[55px\]{top:-55px}.-tw-top-squid-xxs{top:-.3125rem}.tw-bottom-0{bottom:0}.tw-bottom-0\.5{bottom:.125rem}.tw-bottom-1\/2{bottom:50%}.tw-bottom-2{bottom:.5rem}.tw-bottom-7{bottom:1.75rem}.tw-bottom-full{bottom:100%}.tw-bottom-squid-xxs{bottom:.3125rem}.tw-left-0{left:0}.tw-left-1\/2{left:50%}.tw-left-5{left:1.25rem}.tw-left-\[-14px\]{left:-14px}.tw-left-\[15px\]{left:15px}.tw-left-\[17px\]{left:17px}.tw-left-\[1px\]{left:1px}.tw-left-\[26px\]{left:26px}.tw-left-\[2px\]{left:2px}.tw-left-\[54px\]{left:54px}.tw-left-\[calc\(50\%-2px\)\]{left:calc(50% - 2px)}.tw-left-squid-m{left:1.25rem}.tw-left-squid-s{left:.9375rem}.tw-left-squid-xs{left:.625rem}.tw-right-0{right:0}.tw-right-1{right:.25rem}.tw-right-1\.5{right:.375rem}.tw-right-4{right:1rem}.tw-right-\[40px\]{right:40px}.tw-right-\[calc\(100\%-10px\)\]{right:calc(100% - 10px)}.tw-right-full{right:100%}.tw-right-squid-xs{right:.625rem}.tw-right-squid-xxs{right:.3125rem}.tw-top-0{top:0}.tw-top-7{top:1.75rem}.tw-top-\[11px\]{top:11px}.tw-top-\[2px\]{top:2px}.tw-top-full{top:100%}.tw-top-squid-xs{top:.625rem}.tw-top-squid-xxs{top:.3125rem}.-tw-z-40{z-index:-40}.tw-z-0{z-index:0}.tw-z-10{z-index:10}.tw-z-20{z-index:20}.tw-z-40{z-index:40}.tw-z-50{z-index:50}.tw-z-\[5\]{z-index:5}.tw-m-0{margin:0}.tw-mx-auto{margin-left:auto;margin-right:auto}.tw-mx-squid-xxs{margin-left:.3125rem;margin-right:.3125rem}.tw-my-4{margin-bottom:1rem;margin-top:1rem}.-tw-mb-1{margin-bottom:-.25rem}.-tw-ml-1{margin-left:-.25rem}.-tw-ml-squid-xs{margin-left:-.625rem}.tw-ml-2{margin-left:.5rem}.tw-mr-1{margin-right:.25rem}.tw-mr-1\.5{margin-right:.375rem}.tw-mr-squid-xs{margin-right:.625rem}.tw-mt-0{margin-top:0}.tw-mt-0\.5{margin-top:.125rem}.tw-mt-1{margin-top:.25rem}.tw-block{display:block}.tw-inline-block{display:inline-block}.tw-flex{display:flex}.tw-inline-flex{display:inline-flex}.tw-grid{display:grid}.tw-hidden{display:none}.tw-aspect-square{aspect-ratio:1/1}.\!tw-h-\[30px\]{height:30px!important}.tw-h-1{height:.25rem}.tw-h-1\.5{height:.375rem}.tw-h-10{height:2.5rem}.tw-h-2{height:.5rem}.tw-h-2\.5{height:.625rem}.tw-h-4{height:1rem}.tw-h-5{height:1.25rem}.tw-h-52{height:13rem}.tw-h-6{height:1.5rem}.tw-h-8{height:2rem}.tw-h-\[0\.8em\]{height:.8em}.tw-h-\[1\.2em\]{height:1.2em}.tw-h-\[1000px\]{height:1000px}.tw-h-\[10px\]{height:10px}.tw-h-\[110px\]{height:110px}.tw-h-\[130px\]{height:130px}.tw-h-\[14px\]{height:14px}.tw-h-\[16px\]{height:16px}.tw-h-\[17px\]{height:17px}.tw-h-\[195px\]{height:195px}.tw-h-\[21px\]{height:21px}.tw-h-\[240px\]{height:240px}.tw-h-\[26px\]{height:26px}.tw-h-\[30px\]{height:30px}.tw-h-\[31px\]{height:31px}.tw-h-\[40px\]{height:40px}.tw-h-\[42px\]{height:42px}.tw-h-\[46px\]{height:46px}.tw-h-\[50px\]{height:50px}.tw-h-\[52px\]{height:52px}.tw-h-\[535px\]{height:535px}.tw-h-\[536px\]{height:536px}.tw-h-\[540px\]{height:540px}.tw-h-\[55px\]{height:55px}.tw-h-\[60px\]{height:60px}.tw-h-\[65px\]{height:65px}.tw-h-\[69px\]{height:69px}.tw-h-\[80px\]{height:80px}.tw-h-\[94px\]{height:94px}.tw-h-\[95px\]{height:95px}.tw-h-button{height:3.75rem}.tw-h-card-small{height:580px}.tw-h-full{height:100%}.tw-h-list-item-large{height:3.125rem}.tw-h-list-item-small{height:2.5rem}.tw-h-screen{height:100vh}.tw-h-squid-l{height:1.875rem}.tw-h-squid-m{height:1.25rem}.tw-h-squid-xl{height:2.5rem}.tw-h-squid-xs{height:.625rem}.tw-h-squid-xxl{height:3.75rem}.\!tw-max-h-\[470px\]{max-height:470px!important}.tw-max-h-\[120px\]{max-height:120px}.tw-max-h-\[445px\]{max-height:445px}.tw-max-h-\[470px\]{max-height:470px}.tw-max-h-\[540px\]{max-height:540px}.tw-max-h-\[55px\]{max-height:55px}.tw-max-h-\[60px\]{max-height:60px}.tw-max-h-\[80px\]{max-height:80px}.tw-max-h-\[80vh\]{max-height:80vh}.tw-max-h-full{max-height:100%}.tw-max-h-list-item-small{max-height:2.5rem}.tw-max-h-modal-compact{max-height:631px}.tw-max-h-squid-m{max-height:1.25rem}.tw-max-h-squid-xl{max-height:2.5rem}.tw-min-h-\[195px\]{min-height:195px}.tw-min-h-\[30px\]{min-height:30px}.tw-min-h-\[55px\]{min-height:55px}.tw-min-h-button{min-height:3.75rem}.tw-min-h-full{min-height:100%}.tw-min-h-squid-l{min-height:1.875rem}.tw-min-h-squid-m{min-height:1.25rem}.tw-min-h-squid-xl{min-height:2.5rem}.\!tw-w-fit{width:-moz-fit-content!important;width:fit-content!important}.tw-w-10{width:2.5rem}.tw-w-12{width:3rem}.tw-w-36{width:9rem}.tw-w-4{width:1rem}.tw-w-5{width:1.25rem}.tw-w-52{width:13rem}.tw-w-6{width:1.5rem}.tw-w-8{width:2rem}.tw-w-96{width:24rem}.tw-w-\[1\.2em\]{width:1.2em}.tw-w-\[1\.5px\]{width:1.5px}.tw-w-\[1000px\]{width:1000px}.tw-w-\[100px\]{width:100px}.tw-w-\[106\.5px\]{width:106.5px}.tw-w-\[110px\]{width:110px}.tw-w-\[1260px\]{width:1260px}.tw-w-\[135px\]{width:135px}.tw-w-\[140px\]{width:140px}.tw-w-\[150px\]{width:150px}.tw-w-\[157px\]{width:157px}.tw-w-\[160px\]{width:160px}.tw-w-\[16px\]{width:16px}.tw-w-\[180px\]{width:180px}.tw-w-\[22px\]{width:22px}.tw-w-\[26px\]{width:26px}.tw-w-\[299px\]{width:299px}.tw-w-\[2px\]{width:2px}.tw-w-\[30px\]{width:30px}.tw-w-\[31px\]{width:31px}.tw-w-\[36px\]{width:36px}.tw-w-\[3px\]{width:3px}.tw-w-\[40px\]{width:40px}.tw-w-\[42px\]{width:42px}.tw-w-\[44px\]{width:44px}.tw-w-\[470px\]{width:470px}.tw-w-\[500px\]{width:500px}.tw-w-\[50px\]{width:50px}.tw-w-\[52px\]{width:52px}.tw-w-\[54px\]{width:54px}.tw-w-\[56\%\]{width:56%}.tw-w-\[600px\]{width:600px}.tw-w-\[60px\]{width:60px}.tw-w-\[67\%\]{width:67%}.tw-w-\[69px\]{width:69px}.tw-w-\[70px\]{width:70px}.tw-w-\[720px\]{width:720px}.tw-w-\[72px\]{width:72px}.tw-w-\[80px\]{width:80px}.tw-w-\[90px\]{width:90px}.tw-w-\[92px\]{width:92px}.tw-w-\[94px\]{width:94px}.tw-w-fit{width:-moz-fit-content;width:fit-content}.tw-w-full{width:100%}.tw-w-max{width:-moz-max-content;width:max-content}.tw-w-modal-compact{width:373px}.tw-w-squid-l{width:1.875rem}.tw-w-squid-m{width:1.25rem}.tw-w-squid-s{width:.9375rem}.tw-w-squid-xl{width:2.5rem}.tw-w-squid-xxl{width:3.75rem}.\!tw-min-w-0{min-width:0!important}.tw-min-w-8{min-width:2rem}.tw-min-w-\[30px\]{min-width:30px}.tw-min-w-\[60px\]{min-width:60px}.tw-min-w-list-item-small{min-width:21.25rem}.tw-min-w-squid-xl{min-width:2.5rem}.tw-min-w-squid-xxl{min-width:3.75rem}.tw-max-w-96{max-width:24rem}.tw-max-w-\[100vw\]{max-width:100vw}.tw-max-w-\[180px\]{max-width:180px}.tw-max-w-\[200px\]{max-width:200px}.tw-max-w-\[299px\]{max-width:299px}.tw-max-w-\[320px\]{max-width:320px}.tw-max-w-\[70px\]{max-width:70px}.tw-max-w-\[72px\]{max-width:72px}.tw-max-w-\[80px\]{max-width:80px}.tw-max-w-full{max-width:100%}.tw-max-w-modal-compact{max-width:373px}.tw-max-w-none{max-width:none}.tw-max-w-xl{max-width:36rem}.tw-flex-1{flex:1 1 0%}.tw-flex-shrink-0{flex-shrink:0}.tw-flex-grow{flex-grow:1}.tw-grow-0{flex-grow:0}.tw-origin-center{transform-origin:center}.-tw-translate-x-1\/2{--tw-translate-x:-50%}.-tw-translate-x-1\/2,.-tw-translate-x-1\/3{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-tw-translate-x-1\/3{--tw-translate-x:-33.333333%}.-tw-translate-y-1\/2{--tw-translate-y:-50%}.-tw-translate-y-1\/2,.tw-translate-x-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tw-translate-x-1\/2{--tw-translate-x:50%}.tw-translate-y-1\/2{--tw-translate-y:50%}.-tw-rotate-90,.tw-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-tw-rotate-90{--tw-rotate:-90deg}.tw-rotate-0{--tw-rotate:0deg}.tw-rotate-0,.tw-rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tw-rotate-180{--tw-rotate:180deg}.tw-rotate-90{--tw-rotate:90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes tw-blur-in{0%{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}to{-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);background-color:var(--squid-theme-material-dark-average)}}.tw-animate-blur-in{animation:tw-blur-in var(--squid-animation-blur-in-duration,0s) cubic-bezier(.165,.84,.44,1) both}@keyframes tw-blur-out{0%{-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);background-color:var(--squid-theme-material-dark-average)}to{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.tw-animate-blur-out{animation:tw-blur-out var(--squid-animation-blur-out-duration,0s) cubic-bezier(.165,.84,.44,1) both}@keyframes tw-collapse-route{0%{height:100%}to{height:60px}}.tw-animate-collapse-route{animation:tw-collapse-route var(--squid-animation-collapse-to-bottom-duration,0s) linear both}@keyframes tw-expand-route{0%{height:60px}to{height:100%}}.tw-animate-expand-route{animation:tw-expand-route var(--squid-animation-expand-to-top-duration,0s) linear both}@keyframes tw-fade-in{0%{opacity:0}to{opacity:1}}.tw-animate-fade-in{animation:tw-fade-in var(--squid-animation-fade-in-duration,0s) ease-out both}@keyframes tw-fade-out{0%{opacity:1}to{opacity:0}}.tw-animate-fade-out{animation:tw-fade-out var(--squid-animation-fade-out-duration,0s) ease-out both}@keyframes tw-loading-gradient{0%{opacity:0;transform:translateX(-70%)}50%{opacity:1}to{opacity:0;transform:translateX(70%)}}.tw-animate-loading-gradient{animation:tw-loading-gradient 1s ease-in-out infinite both}@keyframes tw-move-loading-cover-to-right{0%{transform:translateX(-64%)}to{transform:translateX(0)}}.tw-animate-move-loading-cover-to-right{animation:tw-move-loading-cover-to-right 1.4s linear infinite}@keyframes tw-scale-and-fade-down{0%{opacity:1;transform:scale(1)}to{opacity:.5;transform:scale(.9)}}.tw-animate-scale-and-fade-down{animation:tw-scale-and-fade-down var(--squid-animation-scale-and-fade-down-duration,0s) linear both}@keyframes tw-scale-and-fade-up{0%{opacity:.5;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.tw-animate-scale-and-fade-up{animation:tw-scale-and-fade-up var(--squid-animation-scale-and-fade-up-duration,0s) linear both}@keyframes tw-slide-to-bottom{0%{transform:translateZ(0)}to{transform:translate3d(0,650px,0)}}.tw-animate-slide-to-bottom{animation:tw-slide-to-bottom var(--squid-animation-slide-to-bottom-duration,0s) cubic-bezier(.165,.84,.44,1) both}@keyframes tw-slide-to-top{0%{transform:translate3d(0,650px,0)}to{transform:translateZ(0)}}.tw-animate-slide-to-top{animation:tw-slide-to-top var(--squid-animation-slide-to-top-duration,0s) cubic-bezier(.165,.84,.44,1) both}.tw-cursor-help{cursor:help}.tw-cursor-not-allowed{cursor:not-allowed}.tw-cursor-pointer{cursor:pointer}.tw-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.tw-grid-cols-\[100px\,1fr\,100px\]{grid-template-columns:100px 1fr 100px}.tw-grid-cols-\[180px_299px\]{grid-template-columns:180px 299px}.tw-grid-cols-\[40px\,1fr\,60px\]{grid-template-columns:40px 1fr 60px}.tw-grid-cols-\[70px_1fr\]{grid-template-columns:70px 1fr}.tw-flex-row-reverse{flex-direction:row-reverse}.tw-flex-col{flex-direction:column}.tw-flex-col-reverse{flex-direction:column-reverse}.tw-flex-wrap{flex-wrap:wrap}.tw-items-start{align-items:flex-start}.tw-items-end{align-items:flex-end}.tw-items-center{align-items:center}.tw-items-stretch{align-items:stretch}.tw-justify-start{justify-content:flex-start}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-0{gap:0}.tw-gap-0\.5{gap:.125rem}.tw-gap-1{gap:.25rem}.tw-gap-1\.5{gap:.375rem}.tw-gap-2{gap:.5rem}.tw-gap-\[2px\]{gap:2px}.tw-gap-squid-m{gap:1.25rem}.tw-gap-squid-s{gap:.9375rem}.tw-gap-squid-xs{gap:.625rem}.tw-gap-squid-xxs{gap:.3125rem}.tw-gap-x-squid-xs{-moz-column-gap:.625rem;column-gap:.625rem}.tw-divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.tw-divide-material-light-thin>:not([hidden])~:not([hidden]){border-color:var(--squid-theme-material-light-thin)}.tw-self-end{align-self:flex-end}.tw-self-stretch{align-self:stretch}.tw-overflow-auto{overflow:auto}.tw-overflow-hidden{overflow:hidden}.tw-overflow-y-auto{overflow-y:auto}.tw-overflow-x-hidden{overflow-x:hidden}.tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tw-text-nowrap{text-wrap:nowrap}.tw-rounded-2xl{border-radius:1rem}.tw-rounded-\[20px\]{border-radius:20px}.tw-rounded-\[25px\]{border-radius:25px}.tw-rounded-full{border-radius:9999px}.tw-rounded-md{border-radius:.375rem}.tw-rounded-sm{border-radius:.125rem}.tw-rounded-squid-l{border-radius:1.875rem}.tw-rounded-squid-m{border-radius:1.25rem}.tw-rounded-squid-s{border-radius:.9375rem}.tw-rounded-squid-xs{border-radius:.625rem}.tw-rounded-squid-xxl{border-radius:3.75rem}.tw-rounded-squid-xxs{border-radius:.3125rem}.tw-rounded-xl{border-radius:.75rem}.tw-rounded-bl-squid-l{border-bottom-left-radius:1.875rem}.tw-rounded-br-full{border-bottom-right-radius:9999px}.tw-rounded-br-squid-l{border-bottom-right-radius:1.875rem}.tw-rounded-tl-\[25px\]{border-top-left-radius:25px}.tw-rounded-tl-squid-l{border-top-left-radius:1.875rem}.tw-rounded-tl-xl{border-top-left-radius:.75rem}.tw-rounded-tr-\[25px\]{border-top-right-radius:25px}.tw-rounded-tr-full{border-top-right-radius:9999px}.tw-rounded-tr-squid-l{border-top-right-radius:1.875rem}.tw-rounded-tr-xl{border-top-right-radius:.75rem}.tw-border{border-width:1px}.tw-border-2{border-width:2px}.tw-border-\[1px\]{border-width:1px}.tw-border-y-\[4px\]{border-bottom-width:4px;border-top-width:4px}.tw-border-b{border-bottom-width:1px}.tw-border-r{border-right-width:1px}.tw-border-t{border-top-width:1px}.tw-border-solid{border-style:solid}.\!tw-border-transparent{border-color:transparent!important}.tw-border-grey-500{border-color:var(--squid-theme-grey-500)}.tw-border-grey-800{border-color:var(--squid-theme-grey-800)}.tw-border-grey-900{border-color:var(--squid-theme-grey-900)}.tw-border-material-light-thin{border-color:var(--squid-theme-material-light-thin)}.tw-border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59/var(--tw-border-opacity))}.tw-border-transparent{border-color:transparent}.tw-border-b-material-dark-thin{border-bottom-color:var(--squid-theme-material-dark-thin)}.tw-border-t-material-light-thin{border-top-color:var(--squid-theme-material-light-thin)}.\!tw-bg-grey-100{background-color:var(--squid-theme-grey-100)!important}.\!tw-bg-grey-300{background-color:var(--squid-theme-grey-300)!important}.\!tw-bg-grey-500{background-color:var(--squid-theme-grey-500)!important}.\!tw-bg-grey-600{background-color:var(--squid-theme-grey-600)!important}.\!tw-bg-grey-800{background-color:var(--squid-theme-grey-800)!important}.\!tw-bg-material-light-thin{background-color:var(--squid-theme-material-light-thin)!important}.\!tw-bg-status-negative{background-color:var(--squid-theme-status-negative)!important}.\!tw-bg-status-partial{background-color:var(--squid-theme-status-partial)!important}.\!tw-bg-status-positive{background-color:var(--squid-theme-status-positive)!important}.\!tw-bg-transparent{background-color:transparent!important}.tw-bg-\[\#E4FE53\]{--tw-bg-opacity:1;background-color:rgb(228 254 83/var(--tw-bg-opacity))}.tw-bg-\[currentColor\],.tw-bg-current{background-color:currentColor}.tw-bg-grey-100{background-color:var(--squid-theme-grey-100)}.tw-bg-grey-300{background-color:var(--squid-theme-grey-300)}.tw-bg-grey-500{background-color:var(--squid-theme-grey-500)}.tw-bg-grey-700{background-color:var(--squid-theme-grey-700)}.tw-bg-grey-800{background-color:var(--squid-theme-grey-800)}.tw-bg-grey-900{background-color:var(--squid-theme-grey-900)}.tw-bg-inherit{background-color:inherit}.tw-bg-material-dark-thick{background-color:var(--squid-theme-material-dark-thick)}.tw-bg-material-dark-thin{background-color:var(--squid-theme-material-dark-thin)}.tw-bg-material-light-thin{background-color:var(--squid-theme-material-light-thin)}.tw-bg-royal-400{background-color:var(--squid-theme-royal-400)}.tw-bg-royal-500{background-color:var(--squid-theme-royal-500)}.tw-bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.tw-bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity))}.tw-bg-status-negative{background-color:var(--squid-theme-status-negative)}.tw-bg-status-partial{background-color:var(--squid-theme-status-partial)}.tw-bg-status-positive{background-color:var(--squid-theme-status-positive)}.tw-bg-transparent{background-color:transparent}.tw-bg-dark-cover{background-image:linear-gradient(90deg,var(--squid-theme-material-dark-thick) 45.4%,transparent 50.85%,var(--squid-theme-material-dark-thick) 55.61%)}.tw-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.tw-bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-gradient-stops))}.tw-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.tw-bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.tw-bg-royal-dark{background-image:linear-gradient(180deg,#bf91f2,#a577d8)}.tw-bg-royal-light{background-image:linear-gradient(180deg,#a577d8,#bf91f2)}.tw-from-grey-800{--tw-gradient-from:var(--squid-theme-grey-800) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-from-grey-900{--tw-gradient-from:var(--squid-theme-grey-900) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.tw-fill-current{fill:currentColor}.tw-fill-grey-300{fill:var(--squid-theme-grey-300)}.tw-stroke-grey-100{stroke:var(--squid-theme-grey-100)}.tw-stroke-grey-300{stroke:var(--squid-theme-grey-300)}.tw-stroke-grey-900{stroke:var(--squid-theme-grey-900)}.tw-object-cover{-o-object-fit:cover;object-fit:cover}.\!tw-p-0{padding:0!important}.tw-p-0{padding:0}.tw-p-0\.5{padding:.125rem}.tw-p-1{padding:.25rem}.tw-p-2{padding:.5rem}.tw-p-4{padding:1rem}.tw-p-8{padding:2rem}.tw-p-\[3px\]{padding:3px}.tw-p-squid-l{padding:1.875rem}.tw-p-squid-xs{padding:.625rem}.tw-p-squid-xxl{padding:3.75rem}.tw-p-squid-xxs{padding:.3125rem}.\!tw-px-0{padding-left:0!important;padding-right:0!important}.\!tw-px-4{padding-left:1rem!important;padding-right:1rem!important}.tw-px-0{padding-left:0;padding-right:0}.tw-px-4{padding-left:1rem;padding-right:1rem}.tw-px-\[3px\]{padding-left:3px;padding-right:3px}.tw-px-squid-l{padding-left:1.875rem;padding-right:1.875rem}.tw-px-squid-m{padding-left:1.25rem;padding-right:1.25rem}.tw-px-squid-s{padding-left:.9375rem;padding-right:.9375rem}.tw-px-squid-xs{padding-left:.625rem;padding-right:.625rem}.tw-px-squid-xxl{padding-left:3.75rem;padding-right:3.75rem}.tw-px-squid-xxs{padding-left:.3125rem;padding-right:.3125rem}.tw-py-0{padding-bottom:0;padding-top:0}.tw-py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.tw-py-2{padding-bottom:.5rem;padding-top:.5rem}.tw-py-\[1px\]{padding-bottom:1px;padding-top:1px}.tw-py-squid-l{padding-bottom:1.875rem;padding-top:1.875rem}.tw-py-squid-m{padding-bottom:1.25rem;padding-top:1.25rem}.tw-py-squid-s{padding-bottom:.9375rem;padding-top:.9375rem}.tw-py-squid-xl{padding-bottom:2.5rem;padding-top:2.5rem}.tw-py-squid-xs{padding-bottom:.625rem;padding-top:.625rem}.tw-py-squid-xxs{padding-bottom:.3125rem;padding-top:.3125rem}.tw-pb-\[15px\]{padding-bottom:15px}.tw-pb-squid-l{padding-bottom:1.875rem}.tw-pb-squid-m{padding-bottom:1.25rem}.tw-pb-squid-s{padding-bottom:.9375rem}.tw-pb-squid-xs{padding-bottom:.625rem}.tw-pb-squid-xxs{padding-bottom:.3125rem}.tw-pl-1{padding-left:.25rem}.tw-pl-\[33px\]{padding-left:33px}.tw-pl-\[40px\]{padding-left:40px}.tw-pl-\[75px\]{padding-left:75px}.tw-pl-\[7px\]{padding-left:7px}.tw-pl-squid-m{padding-left:1.25rem}.tw-pl-squid-xxs{padding-left:.3125rem}.tw-pr-1{padding-right:.25rem}.tw-pr-2{padding-right:.5rem}.tw-pr-2\.5{padding-right:.625rem}.tw-pr-4{padding-right:1rem}.tw-pr-\[40px\]{padding-right:40px}.tw-pr-\[70px\]{padding-right:70px}.tw-pr-squid-l{padding-right:1.875rem}.tw-pr-squid-m{padding-right:1.25rem}.tw-pr-squid-xl{padding-right:2.5rem}.tw-pr-squid-xs{padding-right:.625rem}.tw-pr-squid-xxs{padding-right:.3125rem}.tw-pt-0{padding-top:0}.tw-pt-\[5px\]{padding-top:5px}.tw-pt-squid-m{padding-top:1.25rem}.tw-pt-squid-xs{padding-top:.625rem}.tw-pt-squid-xxs{padding-top:.3125rem}.tw-text-left{text-align:left}.tw-text-center{text-align:center}.tw-text-right{text-align:right}.tw-font-geist{font-family:Geist,sans-serif}.tw-text-body-large{font-size:1.75625rem}.tw-text-body-medium{font-size:1.40625rem}.tw-text-body-small{font-size:1.14375rem}.tw-text-caption{font-size:.875rem}.tw-text-heading-large{font-size:4.40625rem}.tw-text-heading-medium{font-size:3.08125rem}.tw-text-heading-small{font-size:2.1875rem}.tw-text-lg{font-size:1.125rem;line-height:1.75rem}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-text-xs{font-size:.75rem;line-height:1rem}.\!tw-font-medium{font-weight:500!important}.tw-font-heading-bold{font-weight:600}.tw-font-heading-regular{font-weight:400}.tw-font-semibold,.tw-font-typography-bold{font-weight:600}.tw-font-typography-regular{font-weight:400}.\!tw-leading-\[10px\]{line-height:10px!important}.\!tw-leading-\[13px\]{line-height:13px!important}.\!tw-leading-\[16px\]{line-height:16px!important}.\!tw-leading-\[17px\]{line-height:17px!important}.\!tw-leading-\[18px\]{line-height:18px!important}.\!tw-leading-\[1\]{line-height:1!important}.\!tw-leading-\[20px\]{line-height:20px!important}.\!tw-leading-\[9px\]{line-height:9px!important}.tw-leading-5{line-height:1.25rem}.tw-leading-\[0\]{line-height:0}.tw-leading-\[10px\]{line-height:10px}.tw-leading-\[13px\]{line-height:13px}.tw-leading-\[1\]{line-height:1}.tw-leading-\[43px\]{line-height:43px}.tw-leading-body-large{line-height:39.34px}.tw-leading-body-medium{line-height:31.5px}.tw-leading-body-small{line-height:25.62px}.tw-leading-caption{line-height:19.6px}.tw-leading-heading-large{line-height:66.97px}.tw-leading-heading-medium{line-height:49.3px}.tw-leading-heading-small{line-height:38.5px}.tw-tracking-body-large{letter-spacing:-.843px}.tw-tracking-body-medium{letter-spacing:-.675px}.tw-tracking-body-small{letter-spacing:-.366px}.tw-tracking-heading-large{letter-spacing:-3.525px}.tw-tracking-heading-medium{letter-spacing:-2.465px}.tw-tracking-heading-small{letter-spacing:-1.05px}.\!tw-text-\[transparent\]{color:transparent!important}.\!tw-text-grey-300{color:var(--squid-theme-grey-300)!important}.\!tw-text-grey-500{color:var(--squid-theme-grey-500)!important}.\!tw-text-grey-600{color:var(--squid-theme-grey-600)!important}.\!tw-text-grey-800{color:var(--squid-theme-grey-800)!important}.tw-text-\[\#FBFBFD\]{--tw-text-opacity:1;color:rgb(251 251 253/var(--tw-text-opacity))}.tw-text-grey-100{color:var(--squid-theme-grey-100)}.tw-text-grey-200{color:var(--squid-theme-grey-200)}.tw-text-grey-300{color:var(--squid-theme-grey-300)}.tw-text-grey-400{color:var(--squid-theme-grey-400)}.tw-text-grey-500{color:var(--squid-theme-grey-500)}.tw-text-grey-600{color:var(--squid-theme-grey-600)}.tw-text-grey-700{color:var(--squid-theme-grey-700)}.tw-text-grey-800{color:var(--squid-theme-grey-800)}.tw-text-grey-900{color:var(--squid-theme-grey-900)}.tw-text-material-light-average{color:var(--squid-theme-material-light-average)}.tw-text-material-light-thick{color:var(--squid-theme-material-light-thick)}.tw-text-material-light-thin{color:var(--squid-theme-material-light-thin)}.tw-text-royal-400{color:var(--squid-theme-royal-400)}.tw-text-royal-500{color:var(--squid-theme-royal-500)}.tw-text-status-negative{color:var(--squid-theme-status-negative)}.tw-text-status-partial{color:var(--squid-theme-status-partial)}.tw-text-status-positive{color:var(--squid-theme-status-positive)}.tw-text-transparent{color:transparent}.tw-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.\!tw-opacity-100{opacity:1!important}.tw-opacity-0{opacity:0}.tw-opacity-100{opacity:1}.tw-opacity-33{opacity:.33}.tw-opacity-50{opacity:.5}.tw-opacity-66{opacity:.66}.tw-shadow-elevation-light-1{--tw-shadow:0px 1px 2px 0px #0000001a;--tw-shadow-colored:0px 1px 2px 0px var(--tw-shadow-color)}.tw-shadow-elevation-light-1,.tw-shadow-elevation-light-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-shadow-elevation-light-2{--tw-shadow:0px 2px 5px 1px rgba(0,0,0,.1),0px 5px 20px -1px rgba(0,0,0,.1);--tw-shadow-colored:0px 2px 5px 1px var(--tw-shadow-color),0px 5px 20px -1px var(--tw-shadow-color)}.tw-shadow-elevation-light-3{--tw-shadow:0px 2px 4px 0px rgba(0,0,0,.1),0px 5px 50px -1px rgba(0,0,0,.2);--tw-shadow-colored:0px 2px 4px 0px var(--tw-shadow-color),0px 5px 50px -1px var(--tw-shadow-color)}.tw-shadow-elevation-light-3,.tw-shadow-inset-royal{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-shadow-inset-royal{--tw-shadow:0px 0px 50px 0px #876fe2 inset;--tw-shadow-colored:inset 0px 0px 50px 0px var(--tw-shadow-color)}.tw-shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-outline{outline-style:solid}.tw-outline-1{outline-width:1px}.tw-outline-2{outline-width:2px}.-tw-outline-offset-2{outline-offset:-2px}.-tw-outline-offset-\[1px\]{outline-offset:-1px}.\!tw-outline-status-negative{outline-color:var(--squid-theme-status-negative)!important}.tw-outline-material-light-thin{outline-color:var(--squid-theme-material-light-thin)}.tw-outline-royal-500{outline-color:var(--squid-theme-royal-500)}.tw-backdrop-blur-2xl{--tw-backdrop-blur:blur(40px)}.tw-backdrop-blur-2xl,.tw-backdrop-blur-lg{-webkit-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);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)}.tw-backdrop-blur-lg{--tw-backdrop-blur:blur(16px)}.tw-backdrop-blur\/10{--tw-backdrop-blur:blur(10px)}.tw-backdrop-blur\/10,.tw-backdrop-blur\/20{-webkit-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);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)}.tw-backdrop-blur\/20{--tw-backdrop-blur:blur(20px)}.tw-backdrop-saturate-150{--tw-backdrop-saturate:saturate(1.5);-webkit-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);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)}.tw-transition-\[border-width\]{transition-duration:.15s;transition-property:border-width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-transition-\[width\,height\]{transition-duration:.15s;transition-property:width,height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-delay-300{transition-delay:.3s}.tw-duration-1000{transition-duration:1s}.tw-duration-150{transition-duration:.15s}.tw-duration-200{transition-duration:.2s}.tw-duration-300{transition-duration:.3s}.tw-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@font-face{font-family:Geist;src:local("Geist"),url(fonts/Geist-Variable.woff2) format("woff2")}*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}.tw-assets-button-mask{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjBBMTkuOTM4IDE5LjkzOCAwIDAgMSA1Ljg1OCA1Ljg1OCAxOS45MzcgMTkuOTM3IDAgMCAxIDIwIDBhMTkuOTM3IDE5LjkzNyAwIDAgMSAxNC4xNDIgNS44NThjLjUyOC41MjcgMS4wNDYgMS4wNiAxLjU2IDEuNTg5QzM4Ljk4OCAxMC44MyA0Mi4wNjcgMTQgNDYgMTRjMy45MzIgMCA3LjAxMS0zLjE3IDEwLjI5OS02LjU1My41MTMtLjUyOCAxLjAzMS0xLjA2MiAxLjU1OS0xLjU5QTE5LjkzNyAxOS45MzcgMCAwIDEgNzIgMHY0MGExOS45MzcgMTkuOTM3IDAgMCAxLTE0LjE0Mi01Ljg1OGMtLjUyNS0uNTI1LTEuMDQtMS4wNTYtMS41NTEtMS41ODJDNTMuMDE3IDI5LjE3NCA0OS45MzQgMjYgNDYgMjZzLTcuMDE3IDMuMTc0LTEwLjMwNiA2LjU2Yy0uNTExLjUyNi0xLjAyNyAxLjA1Ny0xLjU1MiAxLjU4MkExOS45MzcgMTkuOTM3IDAgMCAxIDIwIDQwYTE5LjkzNyAxOS45MzcgMCAwIDEtMTQuMTQyLTUuODU4QTE5LjkzNyAxOS45MzcgMCAwIDEgMCAyMFoiIGZpbGw9IiNGQkZCRkQiIHN0eWxlPSJmaWxsOmNvbG9yKGRpc3BsYXktcDMgLjk4NCAuOTg2MSAuOTkwNCk7ZmlsbC1vcGFjaXR5OjEiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjBBMTkuOTM4IDE5LjkzOCAwIDAgMSA1Ljg1OCA1Ljg1OCAxOS45MzcgMTkuOTM3IDAgMCAxIDIwIDBhMTkuOTM3IDE5LjkzNyAwIDAgMSAxNC4xNDIgNS44NThjLjUyOC41MjcgMS4wNDYgMS4wNiAxLjU2IDEuNTg5QzM4Ljk4OCAxMC44MyA0Mi4wNjcgMTQgNDYgMTRjMy45MzIgMCA3LjAxMS0zLjE3IDEwLjI5OS02LjU1My41MTMtLjUyOCAxLjAzMS0xLjA2MiAxLjU1OS0xLjU5QTE5LjkzNyAxOS45MzcgMCAwIDEgNzIgMHY0MGExOS45MzcgMTkuOTM3IDAgMCAxLTE0LjE0Mi01Ljg1OGMtLjUyNS0uNTI1LTEuMDQtMS4wNTYtMS41NTEtMS41ODJDNTMuMDE3IDI5LjE3NCA0OS45MzQgMjYgNDYgMjZzLTcuMDE3IDMuMTc0LTEwLjMwNiA2LjU2Yy0uNTExLjUyNi0xLjAyNyAxLjA1Ny0xLjU1MiAxLjU4MkExOS45MzcgMTkuOTM3IDAgMCAxIDIwIDQwYTE5LjkzNyAxOS45MzcgMCAwIDEtMTQuMTQyLTUuODU4QTE5LjkzNyAxOS45MzcgMCAwIDEgMCAyMFoiIGZpbGw9IiNGQkZCRkQiIHN0eWxlPSJmaWxsOmNvbG9yKGRpc3BsYXktcDMgLjk4NCAuOTg2MSAuOTkwNCk7ZmlsbC1vcGFjaXR5OjEiLz48L3N2Zz4=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.tw-font-geist{font-feature-settings:"ss01" on,"ss03" on}li{list-style-type:none}.squid-property-row-bg:nth-child(odd)>div{background:linear-gradient(91deg,var(--squid-theme-grey-100-005) 0,transparent 100%)}:focus-visible{outline-color:var(--squid-theme-royal-500);outline-style:solid;outline-width:2px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}:invalid{outline-color:var(--squid-theme-status-negative)}.tw-group[data-squid-theme-type=dark] #squid-lottie-animation #keystroke{stroke:var(--squid-theme-grey-100)!important}.tw-group[data-squid-theme-type=light] #squid-lottie-animation #keystroke{stroke:var(--squid-theme-grey-900)!important}#squid-lottie-animation #keyfill{fill:var(--squid-theme-royal-500)!important}.tw-timeline-gradient-mask{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 calc(50% - 15px),#000 calc(50% + 15px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 calc(50% - 15px),#000 calc(50% + 15px),transparent)}input.date-input-no-icon::-webkit-calendar-picker-indicator,input.date-input-no-icon::-webkit-inner-spin-button{-webkit-appearance:none;display:none}@keyframes loading-gradient-scroll{0%{transform:translateX(-56%)}to{transform:translateX(0)}}.loading-gradient{--mid-color:transparent;overflow:hidden;position:relative;[data-squid-theme-type=dark] &{--mid-color:var(--squid-theme-material-light-average)}&:after{animation:loading-gradient-scroll 1s ease-in-out infinite both;background-image:linear-gradient(to right,var(--squid-theme-material-light-thin) 43%,var(--mid-color) 52%,var(--squid-theme-material-light-thin) 56%);content:"";display:block;height:100%;left:0;position:absolute;top:0;width:230%}}.boost-badge{--boost-badge-badge-color:var(--squid-theme-royal-400);--boost-badge-text-color:var(--squid-theme-grey-900);--boost-badge-shadow-color:#e4fe53;[data-squid-theme-type=dark] &{--boost-badge-badge-color:#e4fe53;--boost-badge-shadow-color:var(--squid-theme-royal-400)}}:root{.rdp{--rdp-accent-color:var(--squid-theme-material-light-thin);--rdp-background-color:transparent;margin:0!important}.rdp-month,.rdp-table{width:100%}.rdp-table{border-spacing:2px}.rdp-nav{width:28.5%;button{width:50%}}.rdp-cell,.rdp-head_cell{flex-grow:1;font-size:.875rem;height:auto;width:auto}.rdp-head_cell{height:2.5rem}.rdp-day{width:100%}.rdp-caption_label{font-weight:400}.rdp-day,.rdp-day_range_end.rdp-day_range_start{border-radius:.3125rem!important}.day-picker-from .rdp-day_range_start,.day-picker-to .rdp-day_range_end{--tw-text-opacity:1;background-color:var(--squid-theme-royal-500);color:rgb(255 255 255/var(--tw-text-opacity))}.rdp-button:hover:not([disabled]):not(.rdp-nav_button){border:2px solid var(--squid-theme-royal-500)}}.sb-show-main.sb-main-centered #storybook-root{margin:0;padding:0;width:100%}@media (min-width:480px){.sb-show-main.sb-main-centered #storybook-root{margin:auto;width:auto}}.squid-animated-loader-dash{stroke-dasharray:20.942,62.827;stroke-dashoffset:0;animation:squid-animated-loader-dash-grow var(--squid-loader-rotate-duration) infinite alternate ease-in-out}@keyframes squid-animated-loader-dash-grow{0%{stroke-dasharray:62.827;stroke-dashoffset:0}to{stroke-dasharray:4141.884;stroke-dashoffset:-20.942}}.squid-animated-loader{animation:rotate-360 var(--squid-loader-rotate-duration) linear infinite}@keyframes rotate-360{to{transform:rotate(1turn)}}.placeholder\:tw-text-grey-600::-moz-placeholder{color:var(--squid-theme-grey-600)}.placeholder\:tw-text-grey-600::placeholder{color:var(--squid-theme-grey-600)}.placeholder-shown\:tw-text-grey-600:-moz-placeholder-shown{color:var(--squid-theme-grey-600)}.placeholder-shown\:tw-text-grey-600:placeholder-shown{color:var(--squid-theme-grey-600)}.invalid\:tw-outline-status-negative:invalid{outline-color:var(--squid-theme-status-negative)}.hover\:tw-border-material-light-average:hover{border-color:var(--squid-theme-material-light-average)}.hover\:tw-bg-material-light-thin:hover{background-color:var(--squid-theme-material-light-thin)}.hover\:tw-text-grey-400:hover{color:var(--squid-theme-grey-400)}.hover\:tw-opacity-100:hover{opacity:1}.focus\:tw-bg-material-light-thin:focus{background-color:var(--squid-theme-material-light-thin)}.focus\:tw-text-royal-400:focus{color:var(--squid-theme-royal-400)}.focus\:tw-opacity-100:focus{opacity:1}.focus\:tw-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\:tw-outline-status-partial:focus-visible{outline-color:var(--squid-theme-status-partial)}.disabled\:tw-cursor-not-allowed:disabled{cursor:not-allowed}.tw-group\/base-button:hover .group-hover\/base-button\:tw-block,.tw-group\/list-item:hover .group-hover\/list-item\:tw-block{display:block}.tw-group\/history-item:hover .group-hover\/history-item\:tw-hidden{display:none}.tw-group\/flip-button:hover .group-hover\/flip-button\:tw-rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tw-group\/boost-toggle:hover .group-hover\/boost-toggle\:tw-from-material-light-blend-grey-900{--tw-gradient-from:var(--squid-theme-material-light-blend-grey-900) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-group\/swap-step-item-button:hover .group-hover\/swap-step-item-button\:tw-from-grey-700{--tw-gradient-from:var(--squid-theme-grey-700) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-group\/collapsing-section:hover .group-hover\/collapsing-section\:tw-opacity-100{opacity:1}.tw-group\/history-item:hover .group-hover\/history-item\:tw-opacity-0{opacity:0}.tw-group\/history-item:hover .group-hover\/history-item\:tw-opacity-100,.tw-group\/list-item:focus .group-focus\/list-item\:tw-opacity-100,.tw-group\/list-item:hover .group-hover\/list-item\:tw-opacity-100{opacity:1}.tw-group\/boost-toggle:disabled .group-disabled\/boost-toggle\:tw-grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.tw-peer:focus~.peer-focus\:tw-hidden{display:none}.tw-peer:focus~.peer-focus\:tw-opacity-0{opacity:0}.aria-disabled\:tw-bg-grey-600[aria-disabled=true]{background-color:var(--squid-theme-grey-600)}.aria-disabled\:tw-text-grey-800[aria-disabled=true]{color:var(--squid-theme-grey-800)}@keyframes tw-move-to-left-with-spring-bounce{0%{transform:translateX(25%)}50%{transform:translateX(-27%)}80%{transform:translateX(-24%)}to{transform:translateX(-25%)}}.data-\[boost-mode\=boost\]\:tw-animate-move-to-left-with-spring-bounce[data-boost-mode=boost]{animation:tw-move-to-left-with-spring-bounce var(--squid-animation-move-with-spring-bounce-duration,0s) ease-out both}@keyframes tw-move-to-right-with-spring-bounce{0%{transform:translateX(-25%)}50%{transform:translateX(27%)}80%{transform:translateX(24%)}to{transform:translateX(25%)}}.data-\[boost-mode\=normal\]\:tw-animate-move-to-right-with-spring-bounce[data-boost-mode=normal]{animation:tw-move-to-right-with-spring-bounce var(--squid-animation-move-with-spring-bounce-duration,0s) ease-out both}.tw-group[data-boost-mode=boost] .group-data-\[boost-mode\=boost\]\:tw-left-\[calc\(50\%-2px\)\]{left:calc(50% - 2px)}.tw-group[data-boost-mode=normal] .group-data-\[boost-mode\=normal\]\:tw-left-\[calc\(50\%-6px\)\]{left:calc(50% - 6px)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-bg-grey-100{background-color:var(--squid-theme-grey-100)}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-bg-grey-900{background-color:var(--squid-theme-grey-900)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=\'dark\'\]\:tw-bg-royal-dark{background-image:linear-gradient(180deg,#bf91f2,#a577d8)}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=\'light\'\]\:tw-bg-royal-light{background-image:linear-gradient(180deg,#a577d8,#bf91f2)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-text-grey-100{color:var(--squid-theme-grey-100)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-text-material-light-average{color:var(--squid-theme-material-light-average)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-text-royal-700{color:var(--squid-theme-royal-700)}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-text-grey-900{color:var(--squid-theme-grey-900)}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-text-transparent{color:transparent}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-text-volt-700{color:var(--squid-theme-volt-700)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-shadow-elevation-dark-2{--tw-shadow:0px 2px 5px 1px rgba(0,0,0,.2),0px 5px 20px -1px rgba(0,0,0,.33);--tw-shadow-colored:0px 2px 5px 1px var(--tw-shadow-color),0px 5px 20px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-shadow-elevation-dark-3{--tw-shadow:0px 2px 4px 0px rgba(0,0,0,.2),0px 5px 50px -1px rgba(0,0,0,.33);--tw-shadow-colored:0px 2px 4px 0px var(--tw-shadow-color),0px 5px 50px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-shadow-elevation-light-2{--tw-shadow:0px 2px 5px 1px rgba(0,0,0,.1),0px 5px 20px -1px rgba(0,0,0,.1);--tw-shadow-colored:0px 2px 5px 1px var(--tw-shadow-color),0px 5px 20px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-shadow-elevation-light-3{--tw-shadow:0px 2px 4px 0px rgba(0,0,0,.1),0px 5px 50px -1px rgba(0,0,0,.2);--tw-shadow-colored:0px 2px 4px 0px var(--tw-shadow-color),0px 5px 50px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-peer[data-boost-mode=boost]~.peer-data-\[boost-mode\=boost\]\:tw-bg-status-positive{background-color:var(--squid-theme-status-positive)}.tw-peer[data-boost-mode=normal]~.peer-data-\[boost-mode\=normal\]\:tw-bg-current{background-color:currentColor}@media (min-width:360px){.mobile-xs\:tw-flex{display:flex}.mobile-xs\:tw-w-modal-compact{width:373px}.mobile-xs\:tw-justify-normal{justify-content:normal}}@media (min-width:480px){.mobile-lg\:-tw-left-\[3px\]{left:-3px}.mobile-lg\:tw-left-\[30px\]{left:30px}.mobile-lg\:tw-left-squid-l{left:1.875rem}.mobile-lg\:tw-block{display:block}.mobile-lg\:tw-h-auto{height:auto}.mobile-lg\:tw-max-h-modal-large{max-height:600px}.mobile-lg\:tw-w-\[140px\]{width:140px}.mobile-lg\:tw-w-\[190px\]{width:190px}.mobile-lg\:tw-w-card-large{width:480px}.mobile-lg\:tw-w-full{width:100%}.mobile-lg\:tw-w-modal-extra-large{width:440px}.mobile-lg\:tw-w-modal-large{width:400px}.mobile-lg\:tw-w-squid-xl{width:2.5rem}.mobile-lg\:tw-min-w-modal-large{min-width:400px}.mobile-lg\:tw-max-w-card-large{max-width:480px}.mobile-lg\:tw-max-w-modal-large{max-width:400px}.mobile-lg\:tw-rounded-squid-l{border-radius:1.875rem}.mobile-lg\:tw-px-squid-l{padding-left:1.875rem;padding-right:1.875rem}.mobile-lg\:tw-px-squid-m{padding-left:1.25rem;padding-right:1.25rem}.mobile-lg\:tw-px-squid-xs{padding-left:.625rem;padding-right:.625rem}.mobile-lg\:tw-px-squid-xxs{padding-left:.3125rem;padding-right:.3125rem}.mobile-lg\:tw-pl-squid-l{padding-left:1.875rem}}@media (min-height:650px){.mobile-xs-height\:tw-flex{display:flex}.mobile-xs-height\:tw-h-\[160px\]{height:160px}.mobile-xs-height\:tw-h-\[195px\]{height:195px}.mobile-xs-height\:tw-h-card-compact{height:640px}.mobile-xs-height\:tw-max-h-\[535px\]{max-height:535px}.mobile-xs-height\:tw-w-\[unset\]{width:unset}.mobile-xs-height\:tw-flex-col{flex-direction:column}.mobile-xs-height\:tw-pr-squid-m{padding-right:1.25rem}}@media (min-height:670px){.mobile-sm-height\:tw-h-\[205px\]{height:205px}.mobile-sm-height\:tw-h-\[65px\]{height:65px}.mobile-sm-height\:tw-h-\[75px\]{height:75px}.mobile-sm-height\:tw-h-card-large{height:660px}.mobile-sm-height\:tw-max-h-\[535px\]{max-height:535px}.mobile-sm-height\:tw-py-squid-s{padding-bottom:.9375rem;padding-top:.9375rem}}@media (prefers-color-scheme:dark){.dark\:tw-border-b-material-light-thin{border-bottom-color:var(--squid-theme-material-light-thin)}.dark\:tw-bg-material-dark-thick{background-color:var(--squid-theme-material-dark-thick)}.dark\:tw-text-grey-900{color:var(--squid-theme-grey-900)}}
4
+ */*,:after,:before{border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.tw-sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.tw-pointer-events-none{pointer-events:none}.tw-visible{visibility:visible}.tw-invisible{visibility:hidden}.tw-fixed{position:fixed}.tw-absolute{position:absolute}.tw-relative{position:relative}.tw-inset-0{inset:0}.tw-inset-squid-xxs{inset:.3125rem}.tw-inset-y-0{bottom:0;top:0}.-tw-bottom-20{bottom:-5rem}.-tw-left-\[20px\]{left:-20px}.-tw-left-\[2px\]{left:-2px}.-tw-left-\[4px\]{left:-4px}.-tw-left-\[5px\]{left:-5px}.-tw-right-1\/3{right:-33.333333%}.-tw-right-squid-xxs{right:-.3125rem}.-tw-top-8{top:-2rem}.-tw-top-\[2px\]{top:-2px}.-tw-top-\[4px\]{top:-4px}.-tw-top-\[55px\]{top:-55px}.-tw-top-squid-xxs{top:-.3125rem}.tw-bottom-0{bottom:0}.tw-bottom-0\.5{bottom:.125rem}.tw-bottom-1\/2{bottom:50%}.tw-bottom-2{bottom:.5rem}.tw-bottom-7{bottom:1.75rem}.tw-bottom-full{bottom:100%}.tw-bottom-squid-xxs{bottom:.3125rem}.tw-left-0{left:0}.tw-left-1\/2{left:50%}.tw-left-5{left:1.25rem}.tw-left-\[-14px\]{left:-14px}.tw-left-\[15px\]{left:15px}.tw-left-\[17px\]{left:17px}.tw-left-\[1px\]{left:1px}.tw-left-\[26px\]{left:26px}.tw-left-\[2px\]{left:2px}.tw-left-\[54px\]{left:54px}.tw-left-\[calc\(50\%-2px\)\]{left:calc(50% - 2px)}.tw-left-squid-m{left:1.25rem}.tw-left-squid-s{left:.9375rem}.tw-left-squid-xs{left:.625rem}.tw-right-0{right:0}.tw-right-1{right:.25rem}.tw-right-1\.5{right:.375rem}.tw-right-4{right:1rem}.tw-right-\[40px\]{right:40px}.tw-right-\[calc\(100\%-10px\)\]{right:calc(100% - 10px)}.tw-right-full{right:100%}.tw-right-squid-xs{right:.625rem}.tw-right-squid-xxs{right:.3125rem}.tw-top-0{top:0}.tw-top-7{top:1.75rem}.tw-top-\[11px\]{top:11px}.tw-top-\[2px\]{top:2px}.tw-top-full{top:100%}.tw-top-squid-xs{top:.625rem}.tw-top-squid-xxs{top:.3125rem}.-tw-z-40{z-index:-40}.tw-z-0{z-index:0}.tw-z-10{z-index:10}.tw-z-20{z-index:20}.tw-z-40{z-index:40}.tw-z-50{z-index:50}.tw-z-\[5\]{z-index:5}.tw-m-0{margin:0}.tw-mx-auto{margin-left:auto;margin-right:auto}.tw-mx-squid-xxs{margin-left:.3125rem;margin-right:.3125rem}.tw-my-4{margin-bottom:1rem;margin-top:1rem}.-tw-mb-1{margin-bottom:-.25rem}.-tw-ml-1{margin-left:-.25rem}.-tw-ml-squid-xs{margin-left:-.625rem}.tw-ml-2{margin-left:.5rem}.tw-mr-1{margin-right:.25rem}.tw-mr-1\.5{margin-right:.375rem}.tw-mr-squid-xs{margin-right:.625rem}.tw-mt-0{margin-top:0}.tw-mt-0\.5{margin-top:.125rem}.tw-mt-1{margin-top:.25rem}.tw-block{display:block}.tw-inline-block{display:inline-block}.tw-flex{display:flex}.tw-inline-flex{display:inline-flex}.tw-grid{display:grid}.tw-hidden{display:none}.tw-aspect-square{aspect-ratio:1/1}.\!tw-h-\[30px\]{height:30px!important}.tw-h-1{height:.25rem}.tw-h-1\.5{height:.375rem}.tw-h-10{height:2.5rem}.tw-h-2{height:.5rem}.tw-h-2\.5{height:.625rem}.tw-h-4{height:1rem}.tw-h-5{height:1.25rem}.tw-h-52{height:13rem}.tw-h-6{height:1.5rem}.tw-h-8{height:2rem}.tw-h-\[0\.8em\]{height:.8em}.tw-h-\[1\.2em\]{height:1.2em}.tw-h-\[1000px\]{height:1000px}.tw-h-\[10px\]{height:10px}.tw-h-\[110px\]{height:110px}.tw-h-\[130px\]{height:130px}.tw-h-\[14px\]{height:14px}.tw-h-\[16px\]{height:16px}.tw-h-\[17px\]{height:17px}.tw-h-\[195px\]{height:195px}.tw-h-\[21px\]{height:21px}.tw-h-\[240px\]{height:240px}.tw-h-\[26px\]{height:26px}.tw-h-\[30px\]{height:30px}.tw-h-\[31px\]{height:31px}.tw-h-\[40px\]{height:40px}.tw-h-\[42px\]{height:42px}.tw-h-\[46px\]{height:46px}.tw-h-\[50px\]{height:50px}.tw-h-\[52px\]{height:52px}.tw-h-\[535px\]{height:535px}.tw-h-\[536px\]{height:536px}.tw-h-\[540px\]{height:540px}.tw-h-\[55px\]{height:55px}.tw-h-\[60px\]{height:60px}.tw-h-\[65px\]{height:65px}.tw-h-\[69px\]{height:69px}.tw-h-\[80px\]{height:80px}.tw-h-\[94px\]{height:94px}.tw-h-\[95px\]{height:95px}.tw-h-button{height:3.75rem}.tw-h-card-small{height:580px}.tw-h-full{height:100%}.tw-h-list-item-large{height:3.125rem}.tw-h-list-item-small{height:2.5rem}.tw-h-screen{height:100vh}.tw-h-squid-l{height:1.875rem}.tw-h-squid-m{height:1.25rem}.tw-h-squid-xl{height:2.5rem}.tw-h-squid-xs{height:.625rem}.tw-h-squid-xxl{height:3.75rem}.\!tw-max-h-\[470px\]{max-height:470px!important}.tw-max-h-\[120px\]{max-height:120px}.tw-max-h-\[445px\]{max-height:445px}.tw-max-h-\[470px\]{max-height:470px}.tw-max-h-\[540px\]{max-height:540px}.tw-max-h-\[55px\]{max-height:55px}.tw-max-h-\[60px\]{max-height:60px}.tw-max-h-\[80px\]{max-height:80px}.tw-max-h-\[80vh\]{max-height:80vh}.tw-max-h-full{max-height:100%}.tw-max-h-list-item-small{max-height:2.5rem}.tw-max-h-modal-compact{max-height:631px}.tw-max-h-squid-m{max-height:1.25rem}.tw-max-h-squid-xl{max-height:2.5rem}.tw-min-h-\[195px\]{min-height:195px}.tw-min-h-\[30px\]{min-height:30px}.tw-min-h-\[55px\]{min-height:55px}.tw-min-h-button{min-height:3.75rem}.tw-min-h-full{min-height:100%}.tw-min-h-squid-l{min-height:1.875rem}.tw-min-h-squid-m{min-height:1.25rem}.tw-min-h-squid-xl{min-height:2.5rem}.\!tw-w-fit{width:-moz-fit-content!important;width:fit-content!important}.tw-w-10{width:2.5rem}.tw-w-12{width:3rem}.tw-w-36{width:9rem}.tw-w-4{width:1rem}.tw-w-5{width:1.25rem}.tw-w-52{width:13rem}.tw-w-6{width:1.5rem}.tw-w-8{width:2rem}.tw-w-96{width:24rem}.tw-w-\[1\.2em\]{width:1.2em}.tw-w-\[1\.5px\]{width:1.5px}.tw-w-\[1000px\]{width:1000px}.tw-w-\[100px\]{width:100px}.tw-w-\[106\.5px\]{width:106.5px}.tw-w-\[110px\]{width:110px}.tw-w-\[1260px\]{width:1260px}.tw-w-\[135px\]{width:135px}.tw-w-\[140px\]{width:140px}.tw-w-\[150px\]{width:150px}.tw-w-\[157px\]{width:157px}.tw-w-\[160px\]{width:160px}.tw-w-\[16px\]{width:16px}.tw-w-\[180px\]{width:180px}.tw-w-\[22px\]{width:22px}.tw-w-\[26px\]{width:26px}.tw-w-\[299px\]{width:299px}.tw-w-\[2px\]{width:2px}.tw-w-\[30px\]{width:30px}.tw-w-\[31px\]{width:31px}.tw-w-\[36px\]{width:36px}.tw-w-\[3px\]{width:3px}.tw-w-\[40px\]{width:40px}.tw-w-\[42px\]{width:42px}.tw-w-\[44px\]{width:44px}.tw-w-\[470px\]{width:470px}.tw-w-\[500px\]{width:500px}.tw-w-\[50px\]{width:50px}.tw-w-\[52px\]{width:52px}.tw-w-\[54px\]{width:54px}.tw-w-\[56\%\]{width:56%}.tw-w-\[600px\]{width:600px}.tw-w-\[60px\]{width:60px}.tw-w-\[67\%\]{width:67%}.tw-w-\[69px\]{width:69px}.tw-w-\[70px\]{width:70px}.tw-w-\[720px\]{width:720px}.tw-w-\[72px\]{width:72px}.tw-w-\[80px\]{width:80px}.tw-w-\[90px\]{width:90px}.tw-w-\[92px\]{width:92px}.tw-w-\[94px\]{width:94px}.tw-w-fit{width:-moz-fit-content;width:fit-content}.tw-w-full{width:100%}.tw-w-max{width:-moz-max-content;width:max-content}.tw-w-modal-compact{width:373px}.tw-w-squid-l{width:1.875rem}.tw-w-squid-m{width:1.25rem}.tw-w-squid-s{width:.9375rem}.tw-w-squid-xl{width:2.5rem}.tw-w-squid-xxl{width:3.75rem}.\!tw-min-w-0{min-width:0!important}.tw-min-w-8{min-width:2rem}.tw-min-w-\[30px\]{min-width:30px}.tw-min-w-\[60px\]{min-width:60px}.tw-min-w-list-item-small{min-width:21.25rem}.tw-min-w-squid-xl{min-width:2.5rem}.tw-min-w-squid-xxl{min-width:3.75rem}.tw-max-w-96{max-width:24rem}.tw-max-w-\[100vw\]{max-width:100vw}.tw-max-w-\[180px\]{max-width:180px}.tw-max-w-\[200px\]{max-width:200px}.tw-max-w-\[299px\]{max-width:299px}.tw-max-w-\[320px\]{max-width:320px}.tw-max-w-\[70px\]{max-width:70px}.tw-max-w-\[72px\]{max-width:72px}.tw-max-w-\[80px\]{max-width:80px}.tw-max-w-full{max-width:100%}.tw-max-w-modal-compact{max-width:373px}.tw-max-w-none{max-width:none}.tw-max-w-xl{max-width:36rem}.tw-flex-1{flex:1 1 0%}.tw-flex-shrink-0{flex-shrink:0}.tw-flex-grow{flex-grow:1}.tw-grow-0{flex-grow:0}.tw-origin-center{transform-origin:center}.-tw-translate-x-1\/2{--tw-translate-x:-50%}.-tw-translate-x-1\/2,.-tw-translate-x-1\/3{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-tw-translate-x-1\/3{--tw-translate-x:-33.333333%}.-tw-translate-y-1\/2{--tw-translate-y:-50%}.-tw-translate-y-1\/2,.tw-translate-x-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tw-translate-x-1\/2{--tw-translate-x:50%}.tw-translate-y-1\/2{--tw-translate-y:50%}.-tw-rotate-90,.tw-translate-y-1\/2{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-tw-rotate-90{--tw-rotate:-90deg}.tw-rotate-0{--tw-rotate:0deg}.tw-rotate-0,.tw-rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tw-rotate-180{--tw-rotate:180deg}.tw-rotate-90{--tw-rotate:90deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}@keyframes tw-blur-in{0%{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}to{-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);background-color:var(--squid-theme-material-dark-average)}}.tw-animate-blur-in{animation:tw-blur-in var(--squid-animation-blur-in-duration,0s) cubic-bezier(.165,.84,.44,1) both}@keyframes tw-blur-out{0%{-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%);background-color:var(--squid-theme-material-dark-average)}to{-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.tw-animate-blur-out{animation:tw-blur-out var(--squid-animation-blur-out-duration,0s) cubic-bezier(.165,.84,.44,1) both}@keyframes tw-collapse-route{0%{height:100%}to{height:60px}}.tw-animate-collapse-route{animation:tw-collapse-route var(--squid-animation-collapse-to-bottom-duration,0s) linear both}@keyframes tw-expand-route{0%{height:60px}to{height:100%}}.tw-animate-expand-route{animation:tw-expand-route var(--squid-animation-expand-to-top-duration,0s) linear both}@keyframes tw-fade-in{0%{opacity:0}to{opacity:1}}.tw-animate-fade-in{animation:tw-fade-in var(--squid-animation-fade-in-duration,0s) ease-out both}@keyframes tw-fade-out{0%{opacity:1}to{opacity:0}}.tw-animate-fade-out{animation:tw-fade-out var(--squid-animation-fade-out-duration,0s) ease-out both}@keyframes tw-loading-gradient{0%{opacity:0;transform:translateX(-70%)}50%{opacity:1}to{opacity:0;transform:translateX(70%)}}.tw-animate-loading-gradient{animation:tw-loading-gradient 1s ease-in-out infinite both}@keyframes tw-move-loading-cover-to-right{0%{transform:translateX(-64%)}to{transform:translateX(0)}}.tw-animate-move-loading-cover-to-right{animation:tw-move-loading-cover-to-right 1.4s linear infinite}@keyframes tw-scale-and-fade-down{0%{opacity:1;transform:scale(1)}to{opacity:.5;transform:scale(.9)}}.tw-animate-scale-and-fade-down{animation:tw-scale-and-fade-down var(--squid-animation-scale-and-fade-down-duration,0s) linear both}@keyframes tw-scale-and-fade-up{0%{opacity:.5;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.tw-animate-scale-and-fade-up{animation:tw-scale-and-fade-up var(--squid-animation-scale-and-fade-up-duration,0s) linear both}@keyframes tw-slide-to-bottom{0%{transform:translateZ(0)}to{transform:translate3d(0,650px,0)}}.tw-animate-slide-to-bottom{animation:tw-slide-to-bottom var(--squid-animation-slide-to-bottom-duration,0s) cubic-bezier(.165,.84,.44,1) both}@keyframes tw-slide-to-top{0%{transform:translate3d(0,650px,0)}to{transform:translateZ(0)}}.tw-animate-slide-to-top{animation:tw-slide-to-top var(--squid-animation-slide-to-top-duration,0s) cubic-bezier(.165,.84,.44,1) both}.tw-cursor-help{cursor:help}.tw-cursor-not-allowed{cursor:not-allowed}.tw-cursor-pointer{cursor:pointer}.tw-select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.tw-grid-cols-\[100px\,1fr\,100px\]{grid-template-columns:100px 1fr 100px}.tw-grid-cols-\[180px_299px\]{grid-template-columns:180px 299px}.tw-grid-cols-\[40px\,1fr\,60px\]{grid-template-columns:40px 1fr 60px}.tw-grid-cols-\[70px_1fr\]{grid-template-columns:70px 1fr}.tw-flex-row-reverse{flex-direction:row-reverse}.tw-flex-col{flex-direction:column}.tw-flex-col-reverse{flex-direction:column-reverse}.tw-flex-wrap{flex-wrap:wrap}.tw-items-start{align-items:flex-start}.tw-items-end{align-items:flex-end}.tw-items-center{align-items:center}.tw-items-stretch{align-items:stretch}.tw-justify-start{justify-content:flex-start}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.tw-gap-0{gap:0}.tw-gap-0\.5{gap:.125rem}.tw-gap-1{gap:.25rem}.tw-gap-1\.5{gap:.375rem}.tw-gap-2{gap:.5rem}.tw-gap-\[2px\]{gap:2px}.tw-gap-squid-m{gap:1.25rem}.tw-gap-squid-s{gap:.9375rem}.tw-gap-squid-xs{gap:.625rem}.tw-gap-squid-xxs{gap:.3125rem}.tw-gap-x-squid-xs{-moz-column-gap:.625rem;column-gap:.625rem}.tw-divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.tw-divide-material-light-thin>:not([hidden])~:not([hidden]){border-color:var(--squid-theme-material-light-thin)}.tw-self-end{align-self:flex-end}.tw-self-stretch{align-self:stretch}.tw-overflow-auto{overflow:auto}.tw-overflow-hidden{overflow:hidden}.tw-overflow-y-auto{overflow-y:auto}.tw-overflow-x-hidden{overflow-x:hidden}.tw-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tw-text-nowrap{text-wrap:nowrap}.tw-rounded-2xl{border-radius:1rem}.tw-rounded-\[20px\]{border-radius:20px}.tw-rounded-\[25px\]{border-radius:25px}.tw-rounded-full{border-radius:9999px}.tw-rounded-md{border-radius:.375rem}.tw-rounded-sm{border-radius:.125rem}.tw-rounded-squid-l{border-radius:1.875rem}.tw-rounded-squid-m{border-radius:1.25rem}.tw-rounded-squid-s{border-radius:.9375rem}.tw-rounded-squid-xs{border-radius:.625rem}.tw-rounded-squid-xxl{border-radius:3.75rem}.tw-rounded-squid-xxs{border-radius:.3125rem}.tw-rounded-xl{border-radius:.75rem}.tw-rounded-bl-squid-l{border-bottom-left-radius:1.875rem}.tw-rounded-br-full{border-bottom-right-radius:9999px}.tw-rounded-br-squid-l{border-bottom-right-radius:1.875rem}.tw-rounded-tl-\[25px\]{border-top-left-radius:25px}.tw-rounded-tl-squid-l{border-top-left-radius:1.875rem}.tw-rounded-tl-xl{border-top-left-radius:.75rem}.tw-rounded-tr-\[25px\]{border-top-right-radius:25px}.tw-rounded-tr-full{border-top-right-radius:9999px}.tw-rounded-tr-squid-l{border-top-right-radius:1.875rem}.tw-rounded-tr-xl{border-top-right-radius:.75rem}.tw-border{border-width:1px}.tw-border-2{border-width:2px}.tw-border-\[1px\]{border-width:1px}.tw-border-y-\[4px\]{border-bottom-width:4px;border-top-width:4px}.tw-border-b{border-bottom-width:1px}.tw-border-l-0{border-left-width:0}.tw-border-t{border-top-width:1px}.tw-border-solid{border-style:solid}.\!tw-border-transparent{border-color:transparent!important}.tw-border-grey-500{border-color:var(--squid-theme-grey-500)}.tw-border-grey-800{border-color:var(--squid-theme-grey-800)}.tw-border-grey-900{border-color:var(--squid-theme-grey-900)}.tw-border-material-light-thin{border-color:var(--squid-theme-material-light-thin)}.tw-border-slate-800{--tw-border-opacity:1;border-color:rgb(30 41 59/var(--tw-border-opacity))}.tw-border-transparent{border-color:transparent}.tw-border-b-material-dark-thin{border-bottom-color:var(--squid-theme-material-dark-thin)}.tw-border-t-material-light-thin{border-top-color:var(--squid-theme-material-light-thin)}.\!tw-bg-grey-100{background-color:var(--squid-theme-grey-100)!important}.\!tw-bg-grey-300{background-color:var(--squid-theme-grey-300)!important}.\!tw-bg-grey-500{background-color:var(--squid-theme-grey-500)!important}.\!tw-bg-grey-600{background-color:var(--squid-theme-grey-600)!important}.\!tw-bg-grey-800{background-color:var(--squid-theme-grey-800)!important}.\!tw-bg-material-light-thin{background-color:var(--squid-theme-material-light-thin)!important}.\!tw-bg-status-negative{background-color:var(--squid-theme-status-negative)!important}.\!tw-bg-status-partial{background-color:var(--squid-theme-status-partial)!important}.\!tw-bg-status-positive{background-color:var(--squid-theme-status-positive)!important}.\!tw-bg-transparent{background-color:transparent!important}.tw-bg-\[\#E4FE53\]{--tw-bg-opacity:1;background-color:rgb(228 254 83/var(--tw-bg-opacity))}.tw-bg-\[currentColor\],.tw-bg-current{background-color:currentColor}.tw-bg-grey-100{background-color:var(--squid-theme-grey-100)}.tw-bg-grey-300{background-color:var(--squid-theme-grey-300)}.tw-bg-grey-500{background-color:var(--squid-theme-grey-500)}.tw-bg-grey-700{background-color:var(--squid-theme-grey-700)}.tw-bg-grey-800{background-color:var(--squid-theme-grey-800)}.tw-bg-grey-900{background-color:var(--squid-theme-grey-900)}.tw-bg-inherit{background-color:inherit}.tw-bg-material-dark-thick{background-color:var(--squid-theme-material-dark-thick)}.tw-bg-material-dark-thin{background-color:var(--squid-theme-material-dark-thin)}.tw-bg-material-light-thin{background-color:var(--squid-theme-material-light-thin)}.tw-bg-royal-400{background-color:var(--squid-theme-royal-400)}.tw-bg-royal-500{background-color:var(--squid-theme-royal-500)}.tw-bg-slate-900{--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity))}.tw-bg-slate-950{--tw-bg-opacity:1;background-color:rgb(2 6 23/var(--tw-bg-opacity))}.tw-bg-status-negative{background-color:var(--squid-theme-status-negative)}.tw-bg-status-partial{background-color:var(--squid-theme-status-partial)}.tw-bg-status-positive{background-color:var(--squid-theme-status-positive)}.tw-bg-transparent{background-color:transparent}.tw-bg-dark-cover{background-image:linear-gradient(90deg,var(--squid-theme-material-dark-thick) 45.4%,transparent 50.85%,var(--squid-theme-material-dark-thick) 55.61%)}.tw-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}.tw-bg-gradient-to-l{background-image:linear-gradient(to left,var(--tw-gradient-stops))}.tw-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.tw-bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}.tw-bg-royal-dark{background-image:linear-gradient(180deg,#bf91f2,#a577d8)}.tw-bg-royal-light{background-image:linear-gradient(180deg,#a577d8,#bf91f2)}.tw-from-grey-800{--tw-gradient-from:var(--squid-theme-grey-800) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-from-grey-900{--tw-gradient-from:var(--squid-theme-grey-900) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-to-transparent{--tw-gradient-to:transparent var(--tw-gradient-to-position)}.tw-fill-current{fill:currentColor}.tw-fill-grey-300{fill:var(--squid-theme-grey-300)}.tw-stroke-grey-100{stroke:var(--squid-theme-grey-100)}.tw-stroke-grey-300{stroke:var(--squid-theme-grey-300)}.tw-stroke-grey-900{stroke:var(--squid-theme-grey-900)}.tw-object-cover{-o-object-fit:cover;object-fit:cover}.\!tw-p-0{padding:0!important}.tw-p-0{padding:0}.tw-p-0\.5{padding:.125rem}.tw-p-1{padding:.25rem}.tw-p-2{padding:.5rem}.tw-p-4{padding:1rem}.tw-p-8{padding:2rem}.tw-p-\[3px\]{padding:3px}.tw-p-squid-l{padding:1.875rem}.tw-p-squid-xs{padding:.625rem}.tw-p-squid-xxl{padding:3.75rem}.tw-p-squid-xxs{padding:.3125rem}.\!tw-px-0{padding-left:0!important;padding-right:0!important}.\!tw-px-4{padding-left:1rem!important;padding-right:1rem!important}.tw-px-0{padding-left:0;padding-right:0}.tw-px-4{padding-left:1rem;padding-right:1rem}.tw-px-\[3px\]{padding-left:3px;padding-right:3px}.tw-px-squid-l{padding-left:1.875rem;padding-right:1.875rem}.tw-px-squid-m{padding-left:1.25rem;padding-right:1.25rem}.tw-px-squid-s{padding-left:.9375rem;padding-right:.9375rem}.tw-px-squid-xs{padding-left:.625rem;padding-right:.625rem}.tw-px-squid-xxl{padding-left:3.75rem;padding-right:3.75rem}.tw-px-squid-xxs{padding-left:.3125rem;padding-right:.3125rem}.tw-py-0{padding-bottom:0;padding-top:0}.tw-py-0\.5{padding-bottom:.125rem;padding-top:.125rem}.tw-py-2{padding-bottom:.5rem;padding-top:.5rem}.tw-py-\[1px\]{padding-bottom:1px;padding-top:1px}.tw-py-squid-l{padding-bottom:1.875rem;padding-top:1.875rem}.tw-py-squid-m{padding-bottom:1.25rem;padding-top:1.25rem}.tw-py-squid-s{padding-bottom:.9375rem;padding-top:.9375rem}.tw-py-squid-xl{padding-bottom:2.5rem;padding-top:2.5rem}.tw-py-squid-xs{padding-bottom:.625rem;padding-top:.625rem}.tw-py-squid-xxs{padding-bottom:.3125rem;padding-top:.3125rem}.tw-pb-\[15px\]{padding-bottom:15px}.tw-pb-squid-l{padding-bottom:1.875rem}.tw-pb-squid-m{padding-bottom:1.25rem}.tw-pb-squid-s{padding-bottom:.9375rem}.tw-pb-squid-xs{padding-bottom:.625rem}.tw-pb-squid-xxs{padding-bottom:.3125rem}.tw-pl-1{padding-left:.25rem}.tw-pl-\[33px\]{padding-left:33px}.tw-pl-\[40px\]{padding-left:40px}.tw-pl-\[75px\]{padding-left:75px}.tw-pl-\[7px\]{padding-left:7px}.tw-pl-squid-m{padding-left:1.25rem}.tw-pl-squid-xxs{padding-left:.3125rem}.tw-pr-1{padding-right:.25rem}.tw-pr-2{padding-right:.5rem}.tw-pr-2\.5{padding-right:.625rem}.tw-pr-4{padding-right:1rem}.tw-pr-\[40px\]{padding-right:40px}.tw-pr-\[70px\]{padding-right:70px}.tw-pr-squid-l{padding-right:1.875rem}.tw-pr-squid-m{padding-right:1.25rem}.tw-pr-squid-xl{padding-right:2.5rem}.tw-pr-squid-xs{padding-right:.625rem}.tw-pr-squid-xxs{padding-right:.3125rem}.tw-pt-0{padding-top:0}.tw-pt-\[5px\]{padding-top:5px}.tw-pt-squid-m{padding-top:1.25rem}.tw-pt-squid-xs{padding-top:.625rem}.tw-pt-squid-xxs{padding-top:.3125rem}.tw-text-left{text-align:left}.tw-text-center{text-align:center}.tw-text-right{text-align:right}.tw-font-geist{font-family:Geist,sans-serif}.tw-text-body-large{font-size:1.75625rem}.tw-text-body-medium{font-size:1.40625rem}.tw-text-body-small{font-size:1.14375rem}.tw-text-caption{font-size:.875rem}.tw-text-heading-large{font-size:4.40625rem}.tw-text-heading-medium{font-size:3.08125rem}.tw-text-heading-small{font-size:2.1875rem}.tw-text-lg{font-size:1.125rem;line-height:1.75rem}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-text-xs{font-size:.75rem;line-height:1rem}.\!tw-font-medium{font-weight:500!important}.tw-font-heading-bold{font-weight:600}.tw-font-heading-regular{font-weight:400}.tw-font-semibold,.tw-font-typography-bold{font-weight:600}.tw-font-typography-regular{font-weight:400}.\!tw-leading-\[10px\]{line-height:10px!important}.\!tw-leading-\[13px\]{line-height:13px!important}.\!tw-leading-\[16px\]{line-height:16px!important}.\!tw-leading-\[17px\]{line-height:17px!important}.\!tw-leading-\[18px\]{line-height:18px!important}.\!tw-leading-\[1\]{line-height:1!important}.\!tw-leading-\[20px\]{line-height:20px!important}.\!tw-leading-\[9px\]{line-height:9px!important}.tw-leading-5{line-height:1.25rem}.tw-leading-\[0\]{line-height:0}.tw-leading-\[10px\]{line-height:10px}.tw-leading-\[13px\]{line-height:13px}.tw-leading-\[1\]{line-height:1}.tw-leading-\[43px\]{line-height:43px}.tw-leading-body-large{line-height:39.34px}.tw-leading-body-medium{line-height:31.5px}.tw-leading-body-small{line-height:25.62px}.tw-leading-caption{line-height:19.6px}.tw-leading-heading-large{line-height:66.97px}.tw-leading-heading-medium{line-height:49.3px}.tw-leading-heading-small{line-height:38.5px}.tw-tracking-body-large{letter-spacing:-.843px}.tw-tracking-body-medium{letter-spacing:-.675px}.tw-tracking-body-small{letter-spacing:-.366px}.tw-tracking-heading-large{letter-spacing:-3.525px}.tw-tracking-heading-medium{letter-spacing:-2.465px}.tw-tracking-heading-small{letter-spacing:-1.05px}.\!tw-text-\[transparent\]{color:transparent!important}.\!tw-text-grey-300{color:var(--squid-theme-grey-300)!important}.\!tw-text-grey-500{color:var(--squid-theme-grey-500)!important}.\!tw-text-grey-600{color:var(--squid-theme-grey-600)!important}.\!tw-text-grey-800{color:var(--squid-theme-grey-800)!important}.tw-text-\[\#FBFBFD\]{--tw-text-opacity:1;color:rgb(251 251 253/var(--tw-text-opacity))}.tw-text-grey-100{color:var(--squid-theme-grey-100)}.tw-text-grey-200{color:var(--squid-theme-grey-200)}.tw-text-grey-300{color:var(--squid-theme-grey-300)}.tw-text-grey-400{color:var(--squid-theme-grey-400)}.tw-text-grey-500{color:var(--squid-theme-grey-500)}.tw-text-grey-600{color:var(--squid-theme-grey-600)}.tw-text-grey-700{color:var(--squid-theme-grey-700)}.tw-text-grey-800{color:var(--squid-theme-grey-800)}.tw-text-grey-900{color:var(--squid-theme-grey-900)}.tw-text-material-light-average{color:var(--squid-theme-material-light-average)}.tw-text-material-light-thick{color:var(--squid-theme-material-light-thick)}.tw-text-material-light-thin{color:var(--squid-theme-material-light-thin)}.tw-text-royal-400{color:var(--squid-theme-royal-400)}.tw-text-royal-500{color:var(--squid-theme-royal-500)}.tw-text-status-negative{color:var(--squid-theme-status-negative)}.tw-text-status-partial{color:var(--squid-theme-status-partial)}.tw-text-status-positive{color:var(--squid-theme-status-positive)}.tw-text-transparent{color:transparent}.tw-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.\!tw-opacity-100{opacity:1!important}.tw-opacity-0{opacity:0}.tw-opacity-100{opacity:1}.tw-opacity-33{opacity:.33}.tw-opacity-50{opacity:.5}.tw-opacity-66{opacity:.66}.tw-shadow-elevation-light-1{--tw-shadow:0px 1px 2px 0px #0000001a;--tw-shadow-colored:0px 1px 2px 0px var(--tw-shadow-color)}.tw-shadow-elevation-light-1,.tw-shadow-elevation-light-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-shadow-elevation-light-2{--tw-shadow:0px 2px 5px 1px rgba(0,0,0,.1),0px 5px 20px -1px rgba(0,0,0,.1);--tw-shadow-colored:0px 2px 5px 1px var(--tw-shadow-color),0px 5px 20px -1px var(--tw-shadow-color)}.tw-shadow-elevation-light-3{--tw-shadow:0px 2px 4px 0px rgba(0,0,0,.1),0px 5px 50px -1px rgba(0,0,0,.2);--tw-shadow-colored:0px 2px 4px 0px var(--tw-shadow-color),0px 5px 50px -1px var(--tw-shadow-color)}.tw-shadow-elevation-light-3,.tw-shadow-inset-royal{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-shadow-inset-royal{--tw-shadow:0px 0px 50px 0px #876fe2 inset;--tw-shadow-colored:inset 0px 0px 50px 0px var(--tw-shadow-color)}.tw-shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-outline{outline-style:solid}.tw-outline-1{outline-width:1px}.tw-outline-2{outline-width:2px}.-tw-outline-offset-2{outline-offset:-2px}.-tw-outline-offset-\[1px\]{outline-offset:-1px}.\!tw-outline-status-negative{outline-color:var(--squid-theme-status-negative)!important}.tw-outline-material-light-thin{outline-color:var(--squid-theme-material-light-thin)}.tw-outline-royal-500{outline-color:var(--squid-theme-royal-500)}.tw-backdrop-blur-2xl{--tw-backdrop-blur:blur(40px)}.tw-backdrop-blur-2xl,.tw-backdrop-blur-lg{-webkit-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);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)}.tw-backdrop-blur-lg{--tw-backdrop-blur:blur(16px)}.tw-backdrop-blur\/10{--tw-backdrop-blur:blur(10px)}.tw-backdrop-blur\/10,.tw-backdrop-blur\/20{-webkit-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);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)}.tw-backdrop-blur\/20{--tw-backdrop-blur:blur(20px)}.tw-backdrop-saturate-150{--tw-backdrop-saturate:saturate(1.5);-webkit-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);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)}.tw-transition-\[border-width\]{transition-duration:.15s;transition-property:border-width;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-transition-\[width\,height\]{transition-duration:.15s;transition-property:width,height;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-transition-opacity{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-delay-300{transition-delay:.3s}.tw-duration-1000{transition-duration:1s}.tw-duration-150{transition-duration:.15s}.tw-duration-200{transition-duration:.2s}.tw-duration-300{transition-duration:.3s}.tw-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}@font-face{font-family:Geist;src:local("Geist"),url(fonts/Geist-Variable.woff2) format("woff2")}*,:after,:before{box-sizing:border-box}:disabled{cursor:not-allowed}.tw-assets-button-mask{-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjBBMTkuOTM4IDE5LjkzOCAwIDAgMSA1Ljg1OCA1Ljg1OCAxOS45MzcgMTkuOTM3IDAgMCAxIDIwIDBhMTkuOTM3IDE5LjkzNyAwIDAgMSAxNC4xNDIgNS44NThjLjUyOC41MjcgMS4wNDYgMS4wNiAxLjU2IDEuNTg5QzM4Ljk4OCAxMC44MyA0Mi4wNjcgMTQgNDYgMTRjMy45MzIgMCA3LjAxMS0zLjE3IDEwLjI5OS02LjU1My41MTMtLjUyOCAxLjAzMS0xLjA2MiAxLjU1OS0xLjU5QTE5LjkzNyAxOS45MzcgMCAwIDEgNzIgMHY0MGExOS45MzcgMTkuOTM3IDAgMCAxLTE0LjE0Mi01Ljg1OGMtLjUyNS0uNTI1LTEuMDQtMS4wNTYtMS41NTEtMS41ODJDNTMuMDE3IDI5LjE3NCA0OS45MzQgMjYgNDYgMjZzLTcuMDE3IDMuMTc0LTEwLjMwNiA2LjU2Yy0uNTExLjUyNi0xLjAyNyAxLjA1Ny0xLjU1MiAxLjU4MkExOS45MzcgMTkuOTM3IDAgMCAxIDIwIDQwYTE5LjkzNyAxOS45MzcgMCAwIDEtMTQuMTQyLTUuODU4QTE5LjkzNyAxOS45MzcgMCAwIDEgMCAyMFoiIGZpbGw9IiNGQkZCRkQiIHN0eWxlPSJmaWxsOmNvbG9yKGRpc3BsYXktcDMgLjk4NCAuOTg2MSAuOTkwNCk7ZmlsbC1vcGFjaXR5OjEiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNzIiIGhlaWdodD0iNDAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTAgMjBBMTkuOTM4IDE5LjkzOCAwIDAgMSA1Ljg1OCA1Ljg1OCAxOS45MzcgMTkuOTM3IDAgMCAxIDIwIDBhMTkuOTM3IDE5LjkzNyAwIDAgMSAxNC4xNDIgNS44NThjLjUyOC41MjcgMS4wNDYgMS4wNiAxLjU2IDEuNTg5QzM4Ljk4OCAxMC44MyA0Mi4wNjcgMTQgNDYgMTRjMy45MzIgMCA3LjAxMS0zLjE3IDEwLjI5OS02LjU1My41MTMtLjUyOCAxLjAzMS0xLjA2MiAxLjU1OS0xLjU5QTE5LjkzNyAxOS45MzcgMCAwIDEgNzIgMHY0MGExOS45MzcgMTkuOTM3IDAgMCAxLTE0LjE0Mi01Ljg1OGMtLjUyNS0uNTI1LTEuMDQtMS4wNTYtMS41NTEtMS41ODJDNTMuMDE3IDI5LjE3NCA0OS45MzQgMjYgNDYgMjZzLTcuMDE3IDMuMTc0LTEwLjMwNiA2LjU2Yy0uNTExLjUyNi0xLjAyNyAxLjA1Ny0xLjU1MiAxLjU4MkExOS45MzcgMTkuOTM3IDAgMCAxIDIwIDQwYTE5LjkzNyAxOS45MzcgMCAwIDEtMTQuMTQyLTUuODU4QTE5LjkzNyAxOS45MzcgMCAwIDEgMCAyMFoiIGZpbGw9IiNGQkZCRkQiIHN0eWxlPSJmaWxsOmNvbG9yKGRpc3BsYXktcDMgLjk4NCAuOTg2MSAuOTkwNCk7ZmlsbC1vcGFjaXR5OjEiLz48L3N2Zz4=");-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.tw-font-geist{font-feature-settings:"ss01" on,"ss03" on}li{list-style-type:none}.squid-property-row-bg:nth-child(odd)>div{background:linear-gradient(91deg,var(--squid-theme-grey-100-005) 0,transparent 100%)}:focus-visible{outline-color:var(--squid-theme-royal-500);outline-style:solid;outline-width:2px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}:invalid{outline-color:var(--squid-theme-status-negative)}.tw-group[data-squid-theme-type=dark] #squid-lottie-animation #keystroke{stroke:var(--squid-theme-grey-100)!important}.tw-group[data-squid-theme-type=light] #squid-lottie-animation #keystroke{stroke:var(--squid-theme-grey-900)!important}#squid-lottie-animation #keyfill{fill:var(--squid-theme-royal-500)!important}.tw-timeline-gradient-mask{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 calc(50% - 15px),#000 calc(50% + 15px),transparent);mask-image:linear-gradient(180deg,transparent 0,#000 calc(50% - 15px),#000 calc(50% + 15px),transparent)}input.date-input-no-icon::-webkit-calendar-picker-indicator,input.date-input-no-icon::-webkit-inner-spin-button{-webkit-appearance:none;display:none}@keyframes loading-gradient-scroll{0%{transform:translateX(-56%)}to{transform:translateX(0)}}.loading-gradient{--mid-color:transparent;overflow:hidden;position:relative;[data-squid-theme-type=dark] &{--mid-color:var(--squid-theme-material-light-average)}&:after{animation:loading-gradient-scroll 1s ease-in-out infinite both;background-image:linear-gradient(to right,var(--squid-theme-material-light-thin) 43%,var(--mid-color) 52%,var(--squid-theme-material-light-thin) 56%);content:"";display:block;height:100%;left:0;position:absolute;top:0;width:230%}}.boost-badge{--boost-badge-badge-color:var(--squid-theme-royal-400);--boost-badge-text-color:var(--squid-theme-grey-900);--boost-badge-shadow-color:#e4fe53;[data-squid-theme-type=dark] &{--boost-badge-badge-color:#e4fe53;--boost-badge-shadow-color:var(--squid-theme-royal-400)}}:root{.rdp{--rdp-accent-color:var(--squid-theme-material-light-thin);--rdp-background-color:transparent;margin:0!important}.rdp-month,.rdp-table{width:100%}.rdp-table{border-spacing:2px}.rdp-nav{width:28.5%;button{width:50%}}.rdp-cell,.rdp-head_cell{flex-grow:1;font-size:.875rem;height:auto;width:auto}.rdp-head_cell{height:2.5rem}.rdp-day{width:100%}.rdp-caption_label{font-weight:400}.rdp-day,.rdp-day_range_end.rdp-day_range_start{border-radius:.3125rem!important}.day-picker-from .rdp-day_range_start,.day-picker-to .rdp-day_range_end{--tw-text-opacity:1;background-color:var(--squid-theme-royal-500);color:rgb(255 255 255/var(--tw-text-opacity))}.rdp-button:hover:not([disabled]):not(.rdp-nav_button){border:2px solid var(--squid-theme-royal-500)}}.sb-show-main.sb-main-centered #storybook-root{margin:0;padding:0;width:100%}@media (min-width:480px){.sb-show-main.sb-main-centered #storybook-root{margin:auto;width:auto}}.squid-animated-loader-dash{stroke-dasharray:20.942,62.827;stroke-dashoffset:0;animation:squid-animated-loader-dash-grow var(--squid-loader-rotate-duration) infinite alternate ease-in-out}@keyframes squid-animated-loader-dash-grow{0%{stroke-dasharray:62.827;stroke-dashoffset:0}to{stroke-dasharray:4141.884;stroke-dashoffset:-20.942}}.squid-animated-loader{animation:rotate-360 var(--squid-loader-rotate-duration) linear infinite}@keyframes rotate-360{to{transform:rotate(1turn)}}.placeholder\:tw-text-grey-600::-moz-placeholder{color:var(--squid-theme-grey-600)}.placeholder\:tw-text-grey-600::placeholder{color:var(--squid-theme-grey-600)}.before\:tw-absolute:before{content:var(--tw-content);position:absolute}.before\:-tw-inset-\[3px\]:before{content:var(--tw-content);inset:-3px}.before\:tw-z-\[1\]:before{content:var(--tw-content);z-index:1}.before\:tw-w-\[calc\(100\%\+3px\)\]:before{content:var(--tw-content);width:calc(100% + 3px)}.before\:tw-translate-x-\[3px\]:before{--tw-translate-x:3px;content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.before\:tw-rounded-br-full:before{border-bottom-right-radius:9999px;content:var(--tw-content)}.before\:tw-rounded-tr-full:before{border-top-right-radius:9999px;content:var(--tw-content)}.before\:tw-border-2:before{border-width:2px;content:var(--tw-content)}.before\:tw-border-l-0:before{border-left-width:0;content:var(--tw-content)}.before\:tw-border-transparent:before{border-color:transparent;content:var(--tw-content)}.after\:tw-absolute:after{content:var(--tw-content);position:absolute}.after\:-tw-inset-\[5px\]:after{content:var(--tw-content);inset:-5px}.after\:tw-z-0:after{content:var(--tw-content);z-index:0}.after\:tw-w-\[calc\(100\%\+4px\)\]:after{content:var(--tw-content);width:calc(100% + 4px)}.after\:tw-translate-x-\[6px\]:after{--tw-translate-x:6px;content:var(--tw-content);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.after\:tw-rounded-br-full:after{border-bottom-right-radius:9999px;content:var(--tw-content)}.after\:tw-rounded-tr-full:after{border-top-right-radius:9999px;content:var(--tw-content)}.after\:tw-border-4:after{border-width:4px;content:var(--tw-content)}.after\:tw-border-l-0:after{border-left-width:0;content:var(--tw-content)}.after\:tw-border-transparent:after{border-color:transparent;content:var(--tw-content)}.placeholder-shown\:tw-text-grey-600:-moz-placeholder-shown{color:var(--squid-theme-grey-600)}.placeholder-shown\:tw-text-grey-600:placeholder-shown{color:var(--squid-theme-grey-600)}.invalid\:tw-outline-status-negative:invalid{outline-color:var(--squid-theme-status-negative)}.hover\:tw-border-material-light-average:hover{border-color:var(--squid-theme-material-light-average)}.hover\:tw-bg-material-light-thin:hover{background-color:var(--squid-theme-material-light-thin)}.hover\:tw-text-grey-400:hover{color:var(--squid-theme-grey-400)}.hover\:tw-opacity-100:hover{opacity:1}.focus\:tw-bg-material-light-thin:focus{background-color:var(--squid-theme-material-light-thin)}.focus\:tw-text-royal-400:focus{color:var(--squid-theme-royal-400)}.focus\:tw-opacity-100:focus{opacity:1}.focus\:tw-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\:tw-outline-status-partial:focus-visible{outline-color:var(--squid-theme-status-partial)}.disabled\:tw-cursor-not-allowed:disabled{cursor:not-allowed}.tw-group\/assets-button:hover .group-hover\/assets-button\:tw-block,.tw-group\/base-button:hover .group-hover\/base-button\:tw-block,.tw-group\/list-item:hover .group-hover\/list-item\:tw-block{display:block}.tw-group\/history-item:hover .group-hover\/history-item\:tw-hidden{display:none}.tw-group\/flip-button:hover .group-hover\/flip-button\:tw-rotate-180{--tw-rotate:180deg;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.tw-group\/boost-toggle:hover .group-hover\/boost-toggle\:tw-from-material-light-blend-grey-900{--tw-gradient-from:var(--squid-theme-material-light-blend-grey-900) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-group\/swap-step-item-button:hover .group-hover\/swap-step-item-button\:tw-from-grey-700{--tw-gradient-from:var(--squid-theme-grey-700) var(--tw-gradient-from-position);--tw-gradient-to:hsla(0,0%,100%,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-group\/collapsing-section:hover .group-hover\/collapsing-section\:tw-opacity-100{opacity:1}.tw-group\/history-item:hover .group-hover\/history-item\:tw-opacity-0{opacity:0}.tw-group\/history-item:hover .group-hover\/history-item\:tw-opacity-100,.tw-group\/list-item:hover .group-hover\/list-item\:tw-opacity-100{opacity:1}.tw-group\/assets-button:hover .group-hover\/assets-button\:before\:tw-border-grey-900:before{border-color:var(--squid-theme-grey-900);content:var(--tw-content)}.tw-group\/assets-button:hover .group-hover\/assets-button\:after\:tw-border-material-light-average:after{border-color:var(--squid-theme-material-light-average);content:var(--tw-content)}.tw-group\/list-item:focus .group-focus\/list-item\:tw-opacity-100{opacity:1}.tw-group\/boost-toggle:disabled .group-disabled\/boost-toggle\:tw-grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.tw-peer:focus~.peer-focus\:tw-hidden{display:none}.tw-peer:focus~.peer-focus\:tw-opacity-0{opacity:0}.aria-disabled\:tw-bg-grey-600[aria-disabled=true]{background-color:var(--squid-theme-grey-600)}.aria-disabled\:tw-text-grey-800[aria-disabled=true]{color:var(--squid-theme-grey-800)}@keyframes tw-move-to-left-with-spring-bounce{0%{transform:translateX(25%)}50%{transform:translateX(-27%)}80%{transform:translateX(-24%)}to{transform:translateX(-25%)}}.data-\[boost-mode\=boost\]\:tw-animate-move-to-left-with-spring-bounce[data-boost-mode=boost]{animation:tw-move-to-left-with-spring-bounce var(--squid-animation-move-with-spring-bounce-duration,0s) ease-out both}@keyframes tw-move-to-right-with-spring-bounce{0%{transform:translateX(-25%)}50%{transform:translateX(27%)}80%{transform:translateX(24%)}to{transform:translateX(25%)}}.data-\[boost-mode\=normal\]\:tw-animate-move-to-right-with-spring-bounce[data-boost-mode=normal]{animation:tw-move-to-right-with-spring-bounce var(--squid-animation-move-with-spring-bounce-duration,0s) ease-out both}.tw-group[data-boost-mode=boost] .group-data-\[boost-mode\=boost\]\:tw-left-\[calc\(50\%-2px\)\]{left:calc(50% - 2px)}.tw-group[data-boost-mode=normal] .group-data-\[boost-mode\=normal\]\:tw-left-\[calc\(50\%-6px\)\]{left:calc(50% - 6px)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-bg-grey-100{background-color:var(--squid-theme-grey-100)}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-bg-grey-900{background-color:var(--squid-theme-grey-900)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=\'dark\'\]\:tw-bg-royal-dark{background-image:linear-gradient(180deg,#bf91f2,#a577d8)}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=\'light\'\]\:tw-bg-royal-light{background-image:linear-gradient(180deg,#a577d8,#bf91f2)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-text-grey-100{color:var(--squid-theme-grey-100)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-text-material-light-average{color:var(--squid-theme-material-light-average)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-text-royal-700{color:var(--squid-theme-royal-700)}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-text-grey-900{color:var(--squid-theme-grey-900)}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-text-transparent{color:transparent}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-text-volt-700{color:var(--squid-theme-volt-700)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-shadow-elevation-dark-2{--tw-shadow:0px 2px 5px 1px rgba(0,0,0,.2),0px 5px 20px -1px rgba(0,0,0,.33);--tw-shadow-colored:0px 2px 5px 1px var(--tw-shadow-color),0px 5px 20px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-group[data-squid-theme-type=dark] .group-data-\[squid-theme-type\=dark\]\:tw-shadow-elevation-dark-3{--tw-shadow:0px 2px 4px 0px rgba(0,0,0,.2),0px 5px 50px -1px rgba(0,0,0,.33);--tw-shadow-colored:0px 2px 4px 0px var(--tw-shadow-color),0px 5px 50px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-shadow-elevation-light-2{--tw-shadow:0px 2px 5px 1px rgba(0,0,0,.1),0px 5px 20px -1px rgba(0,0,0,.1);--tw-shadow-colored:0px 2px 5px 1px var(--tw-shadow-color),0px 5px 20px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-group[data-squid-theme-type=light] .group-data-\[squid-theme-type\=light\]\:tw-shadow-elevation-light-3{--tw-shadow:0px 2px 4px 0px rgba(0,0,0,.1),0px 5px 50px -1px rgba(0,0,0,.2);--tw-shadow-colored:0px 2px 4px 0px var(--tw-shadow-color),0px 5px 50px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-peer[data-boost-mode=boost]~.peer-data-\[boost-mode\=boost\]\:tw-bg-status-positive{background-color:var(--squid-theme-status-positive)}.tw-peer[data-boost-mode=normal]~.peer-data-\[boost-mode\=normal\]\:tw-bg-current{background-color:currentColor}@media (min-width:360px){.mobile-xs\:tw-flex{display:flex}.mobile-xs\:tw-w-modal-compact{width:373px}.mobile-xs\:tw-justify-normal{justify-content:normal}}@media (min-width:480px){.mobile-lg\:-tw-left-\[3px\]{left:-3px}.mobile-lg\:tw-left-\[30px\]{left:30px}.mobile-lg\:tw-left-squid-l{left:1.875rem}.mobile-lg\:tw-block{display:block}.mobile-lg\:tw-h-auto{height:auto}.mobile-lg\:tw-max-h-modal-large{max-height:600px}.mobile-lg\:tw-w-\[140px\]{width:140px}.mobile-lg\:tw-w-\[190px\]{width:190px}.mobile-lg\:tw-w-card-large{width:480px}.mobile-lg\:tw-w-full{width:100%}.mobile-lg\:tw-w-modal-extra-large{width:440px}.mobile-lg\:tw-w-modal-large{width:400px}.mobile-lg\:tw-w-squid-xl{width:2.5rem}.mobile-lg\:tw-min-w-modal-large{min-width:400px}.mobile-lg\:tw-max-w-card-large{max-width:480px}.mobile-lg\:tw-max-w-modal-large{max-width:400px}.mobile-lg\:tw-rounded-squid-l{border-radius:1.875rem}.mobile-lg\:tw-px-squid-l{padding-left:1.875rem;padding-right:1.875rem}.mobile-lg\:tw-px-squid-m{padding-left:1.25rem;padding-right:1.25rem}.mobile-lg\:tw-px-squid-xs{padding-left:.625rem;padding-right:.625rem}.mobile-lg\:tw-px-squid-xxs{padding-left:.3125rem;padding-right:.3125rem}.mobile-lg\:tw-pl-squid-l{padding-left:1.875rem}}@media (min-height:650px){.mobile-xs-height\:tw-flex{display:flex}.mobile-xs-height\:tw-h-\[160px\]{height:160px}.mobile-xs-height\:tw-h-\[195px\]{height:195px}.mobile-xs-height\:tw-h-card-compact{height:640px}.mobile-xs-height\:tw-max-h-\[535px\]{max-height:535px}.mobile-xs-height\:tw-w-\[unset\]{width:unset}.mobile-xs-height\:tw-flex-col{flex-direction:column}.mobile-xs-height\:tw-pr-squid-m{padding-right:1.25rem}}@media (min-height:670px){.mobile-sm-height\:tw-h-\[205px\]{height:205px}.mobile-sm-height\:tw-h-\[65px\]{height:65px}.mobile-sm-height\:tw-h-\[75px\]{height:75px}.mobile-sm-height\:tw-h-card-large{height:660px}.mobile-sm-height\:tw-max-h-\[535px\]{max-height:535px}.mobile-sm-height\:tw-py-squid-s{padding-bottom:.9375rem;padding-top:.9375rem}}@media (prefers-color-scheme:dark){.dark\:tw-border-b-material-light-thin{border-bottom-color:var(--squid-theme-material-light-thin)}.dark\:tw-bg-material-dark-thick{background-color:var(--squid-theme-material-dark-thick)}.dark\:tw-text-grey-900{color:var(--squid-theme-grey-900)}}
package/dist/index.d.ts CHANGED
@@ -171,7 +171,7 @@ interface Token$1 {
171
171
  symbol: string;
172
172
  decimals: number;
173
173
  }
174
- interface NumericInputProps {
174
+ interface NumericInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
175
175
  token: Token$1;
176
176
  onAmountChange: (tokenAmount: string) => void;
177
177
  forcedAmount?: string;
@@ -199,7 +199,7 @@ interface NumericInputProps {
199
199
  tooltip?: Omit<TooltipProps, 'children'>;
200
200
  };
201
201
  }
202
- declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, }: NumericInputProps): react_jsx_runtime.JSX.Element;
202
+ declare function NumericInput({ priceImpactPercentage, balance, error, criticalPriceImpactPercentage, token, onAmountChange, forcedAmount, maxUsdDecimals, formatIfVerySmall, showDetails, isLoading, direction, inputModeButton, isInteractive, balanceButton, ...props }: NumericInputProps): react_jsx_runtime.JSX.Element;
203
203
 
204
204
  interface SettingsSliderProps {
205
205
  value: number | undefined;
@@ -1852,7 +1852,6 @@ interface SwapConfigurationProps {
1852
1852
  direction: SwapDirection;
1853
1853
  priceImpactPercentage?: string;
1854
1854
  amount?: string;
1855
- forcedAmount?: string;
1856
1855
  tokenPrice?: number;
1857
1856
  balance?: string;
1858
1857
  isFetching?: boolean;
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "url": "git+https://github.com/0xsquid/squid-ui.git"
6
6
  },
7
7
  "description": "Squid's UI components",
8
- "version": "0.24.1",
8
+ "version": "0.25.1-beta.0",
9
9
  "author": "",
10
10
  "license": "MIT",
11
11
  "resolutions": {