@lifi/widget 4.0.0-beta.9 → 4.0.0

package/dist/esm/components/Search/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../../src/components/Search/SearchInput.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,2BAA2B,CAAA;AACjD,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAC/C,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAEvE,OAAO,EAAE,SAAS,EAAE,MAAM,oCAAoC,CAAA;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAA;AACvE,OAAO,EAAE,KAAK,EAAE,0BAA0B,EAAE,MAAM,wBAAwB,CAAA;AAc1E,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,QAAQ,EACR,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,EACT,IAAI,GAAG,QAAQ,GACE,EAAE,EAAE;IACrB,OAAO,CACL,KAAC,SAAS,cACR,KAAC,WAAW,IAAC,SAAS,kBACpB,KAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,WAAW,EAAE,WAAW,EACxB,cAAc,EACZ,KAAC,cAAc,IAAC,QAAQ,EAAC,OAAO,YAC9B,KAAC,MAAM,KAAG,GACK,EAEnB,YAAY,EACV,CAAC,KAAK,IAAI,QAAQ,EAAE,OAAO,EAAE,KAAK,CAAC;oBACnC,OAAO,IAAI,CACT,KAAC,cAAc,IAAC,QAAQ,EAAC,KAAK,YAC5B,KAAC,UAAU,IACT,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,gBACL,OAAO,EAClB,QAAQ,EAAE,CAAC,CAAC,EACZ,EAAE,EAAE;4BACF,OAAO,EAAE,GAAG;yBACb,YAED,KAAC,SAAS,IAAC,QAAQ,EAAE,IAAI,GAAI,GAClB,GACE,CAClB,EAEH,UAAU,EAAE;oBACV,SAAS,EAAE,QAAQ;oBACnB,QAAQ;oBACR,MAAM;oBACN,IAAI;oBACJ,KAAK;oBACL,SAAS,EAAE,GAAG;iBACf,EACD,YAAY,EAAC,KAAK,EAClB,SAAS,EAAE,SAAS,GACpB,GACU,GACJ,CACb,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC3D,MAAM,EAAE,YAAY,EAAE,GAAG,eAAe,EAAE,CAAA;IAE1C,OAAO,CACL,KAAC,0BAA0B,IAAC,YAAY,EAAE,YAAY,YACpD,KAAC,WAAW,OAAK,KAAK,EAAE,SAAS,SAAG,GACT,CAC9B,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SearchInput.js","names":[],"sources":["../../../../src/components/Search/SearchInput.tsx"],"sourcesContent":["import ClearIcon from '@mui/icons-material/Clear'\nimport Search from '@mui/icons-material/Search'\nimport { FormControl, IconButton, InputAdornment } from '@mui/material'\nimport type {\n  ChangeEventHandler,\n  FocusEventHandler,\n  JSX,\n  RefObject,\n} from 'react'\nimport { InputCard } from '../../components/Card/InputCard.js'\nimport { Input } from './SearchInput.style.js'\n\ninterface SearchInputProps {\n  inputRef?: RefObject<HTMLInputElement | null>\n  name?: string\n  value?: string\n  placeholder?: string\n  onChange?: ChangeEventHandler<HTMLInputElement>\n  onBlur?: FocusEventHandler<HTMLInputElement>\n  onClear?: () => void\n  autoFocus?: boolean\n  size?: 'small' | 'medium'\n}\n\nexport const SearchInput = ({\n  inputRef,\n  name,\n  placeholder,\n  onChange,\n  onBlur,\n  onClear,\n  value,\n  autoFocus,\n  size = 'medium',\n}: SearchInputProps): JSX.Element => {\n  return (\n    <InputCard>\n      <FormControl fullWidth>\n        <Input\n          inputRef={inputRef}\n          size={size}\n          placeholder={placeholder}\n          startAdornment={\n            <InputAdornment position=\"start\">\n              <Search />\n            </InputAdornment>\n          }\n          endAdornment={\n            (value || inputRef?.current?.value) &&\n            onClear && (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  size={size}\n                  onClick={onClear}\n                  aria-label=\"Clear\"\n                  tabIndex={-1}\n                  sx={{\n                    padding: 0.5,\n                  }}\n                >\n                  <ClearIcon fontSize={size} />\n                </IconButton>\n              </InputAdornment>\n            )\n          }\n          inputProps={{\n            inputMode: 'search',\n            onChange,\n            onBlur,\n            name,\n            value,\n            maxLength: 128,\n          }}\n          autoComplete=\"off\"\n          autoFocus={autoFocus}\n        />\n      </FormControl>\n    </InputCard>\n  )\n}\n"],"mappings":";;;;;;;AAwBA,MAAa,eAAe,EAC1B,UACA,MACA,aACA,UACA,QACA,SACA,OACA,WACA,OAAO,eAC4B;CACnC,OACE,oBAAC,WAAD,EAAA,UACE,oBAAC,aAAD;EAAa,WAAA;YACX,oBAAC,OAAD;GACY;GACJ;GACO;GACb,gBACE,oBAAC,gBAAD;IAAgB,UAAS;cACvB,oBAAC,QAAD,CAAS,CAAA;GACK,CAAA;GAElB,eACG,SAAS,UAAU,SAAS,UAC7B,WACE,oBAAC,gBAAD;IAAgB,UAAS;cACvB,oBAAC,YAAD;KACQ;KACN,SAAS;KACT,cAAW;KACX,UAAU;KACV,IAAI,EACF,SAAS,GACX;eAEA,oBAAC,WAAD,EAAW,UAAU,KAAO,CAAA;IAClB,CAAA;GACE,CAAA;GAGpB,YAAY;IACV,WAAW;IACX;IACA;IACA;IACA;IACA,WAAW;GACb;GACA,cAAa;GACF;EACZ,CAAA;CACU,CAAA,EACJ,CAAA;AAEf"}

package/dist/esm/components/Search/SearchInput.style.js

@@ -1,63 +1,27 @@
-import { Box, inputAdornmentClasses, inputBaseClasses, List, styled, svgIconClasses, } from '@mui/material';
-import { Input as InputBase } from '../../components/Input.js';
-export const Input = styled(InputBase, {
-    shouldForwardProp: (prop) => prop !== 'size',
-})(({ theme, size = 'medium' }) => ({
-    paddingRight: size === 'small' ? theme.spacing(1.25) : theme.spacing(1.75),
-    paddingLeft: theme.spacing(1.25),
-    fontSize: size === 'small' ? '0.875rem' : '1rem',
-    borderRadius: theme.vars.shape.borderRadius,
-    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
-        paddingRight: theme.spacing(1.25),
-    },
-    [`& .${inputBaseClasses.input}`]: {
-        padding: theme.spacing(1),
-    },
-    [`& .${inputAdornmentClasses.root}`]: {
-        marginLeft: 0,
-        marginRight: 0,
-        [`& .${svgIconClasses.root}`]: {
-            width: size === 'small' ? '1.25rem' : '1.5rem',
-        },
-    },
-    [`& .${inputAdornmentClasses.root}.${inputAdornmentClasses.positionEnd}`]: {
-        marginRight: size === 'small' ? theme.spacing(-0.5) : theme.spacing(-1),
-        [`& .${svgIconClasses.root}`]: {
-            width: size === 'small' ? '1rem' : '1.25rem',
-            height: size === 'small' ? '1rem' : '1.25rem',
-        },
-    },
-}));
-export const searchContainerHeight = 64;
-// When the widget is in Full Height layout mode in order to appear "sticky the StickySearchInputContainer needs to use
-// position fixed in the same way as the header (see Header.tsx). The headerHeight value here is used as the top value
-// to ensure that this container positioned correctly beneath the header
-export const StickySearchInputContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'headerHeight',
-})(({ theme, headerHeight }) => ({
-    position: 'sticky',
-    top: headerHeight,
-    zIndex: 1,
-    height: searchContainerHeight,
-    paddingBottom: theme.spacing(2),
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3),
-    backgroundColor: theme.vars.palette.background.default,
-    ...(theme.header?.position === 'fixed'
-        ? {
-            position: 'fixed',
-            minWidth: theme.breakpoints.values.xs,
-            maxWidth: theme.breakpoints.values.sm,
-            width: '100%',
-        }
-        : {}),
-}));
-// When in Full Height layout mode, as the StickySearchInputContainer (see above) uses fixed position, the list element needs to provide
-// additional paddingTop in order to be positioned correctly.
-export const SearchList = styled(List)(({ theme }) => ({
-    paddingTop: theme.header?.position === 'fixed' ? `${searchContainerHeight}px` : 0,
-    paddingLeft: theme.spacing(1.5),
-    paddingRight: theme.spacing(1.5),
-    paddingBottom: theme.spacing(1.5),
+import { Input as Input$1 } from "../Input.js";
+import { inputAdornmentClasses, inputBaseClasses, styled, svgIconClasses } from "@mui/material";
+//#region src/components/Search/SearchInput.style.tsx
+const Input = styled(Input$1, { shouldForwardProp: (prop) => prop !== "size" })(({ theme, size = "medium" }) => ({
+	paddingRight: size === "small" ? theme.spacing(1.25) : theme.spacing(1.75),
+	paddingLeft: theme.spacing(1.25),
+	fontSize: size === "small" ? "0.875rem" : "1rem",
+	borderRadius: theme.vars.shape.borderRadius,
+	[theme.breakpoints.down(theme.breakpoints.values.xs)]: { paddingRight: theme.spacing(1.25) },
+	[`& .${inputBaseClasses.input}`]: { padding: theme.spacing(1) },
+	[`& .${inputAdornmentClasses.root}`]: {
+		marginLeft: 0,
+		marginRight: 0,
+		[`& .${svgIconClasses.root}`]: { width: size === "small" ? "1.25rem" : "1.5rem" }
+	},
+	[`& .${inputAdornmentClasses.root}.${inputAdornmentClasses.positionEnd}`]: {
+		marginRight: size === "small" ? theme.spacing(-.5) : theme.spacing(-1),
+		[`& .${svgIconClasses.root}`]: {
+			width: size === "small" ? "1rem" : "1.25rem",
+			height: size === "small" ? "1rem" : "1.25rem"
+		}
+	}
 }));
+//#endregion
+export { Input };
+
 //# sourceMappingURL=SearchInput.style.js.map

package/dist/esm/components/Search/SearchInput.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.style.js","sourceRoot":"","sources":["../../../../src/components/Search/SearchInput.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,GAAG,EACH,qBAAqB,EACrB,gBAAgB,EAChB,IAAI,EACJ,MAAM,EACN,cAAc,GACf,MAAM,eAAe,CAAA;AACtB,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAM9D,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,SAAS,EAAE;IACrC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,MAAM;CAC7C,CAAC,CAAa,CAAC,EAAE,KAAK,EAAE,IAAI,GAAG,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC;IAC9C,YAAY,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;IAC1E,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;IAChC,QAAQ,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;IAChD,YAAY,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY;IAC3C,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE;QACrD,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;KAClC;IACD,CAAC,MAAM,gBAAgB,CAAC,KAAK,EAAE,CAAC,EAAE;QAChC,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;KAC1B;IACD,CAAC,MAAM,qBAAqB,CAAC,IAAI,EAAE,CAAC,EAAE;QACpC,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,CAAC,MAAM,cAAc,CAAC,IAAI,EAAE,CAAC,EAAE;YAC7B,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;SAC/C;KACF;IACD,CAAC,MAAM,qBAAqB,CAAC,IAAI,IAAI,qBAAqB,CAAC,WAAW,EAAE,CAAC,EAAE;QACzE,WAAW,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QACvE,CAAC,MAAM,cAAc,CAAC,IAAI,EAAE,CAAC,EAAE;YAC7B,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;YAC5C,MAAM,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;SAC9C;KACF;CACF,CAAC,CAAC,CAAA;AAMH,MAAM,CAAC,MAAM,qBAAqB,GAAG,EAAE,CAAA;AAEvC,uHAAuH;AACvH,sHAAsH;AACtH,wEAAwE;AACxE,MAAM,CAAC,MAAM,0BAA0B,GAAG,MAAM,CAAC,GAAG,EAAE;IACpD,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,cAAc;CACrD,CAAC,CAA6B,CAAC,EAAE,KAAK,EAAE,YAAY,EAAE,EAAE,EAAE,CAAC,CAAC;IAC3D,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,YAAY;IACjB,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,qBAAqB;IAC7B,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC/B,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC9B,eAAe,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;IACtD,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,QAAQ,KAAK,OAAO;QACpC,CAAC,CAAC;YACE,QAAQ,EAAE,OAAO;YACjB,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE;YACrC,QAAQ,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE;YACrC,KAAK,EAAE,MAAM;SACd;QACH,CAAC,CAAC,EAAE,CAAC;CACR,CAAC,CAAC,CAAA;AAEH,wIAAwI;AACxI,6DAA6D;AAC7D,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACrD,UAAU,EACR,KAAK,CAAC,MAAM,EAAE,QAAQ,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,qBAAqB,IAAI,CAAC,CAAC,CAAC,CAAC;IACvE,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IAC/B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;IAChC,aAAa,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;CAClC,CAAC,CAAC,CAAA"}
+{"version":3,"file":"SearchInput.style.js","names":["InputBase"],"sources":["../../../../src/components/Search/SearchInput.style.tsx"],"sourcesContent":["import {\n  inputAdornmentClasses,\n  inputBaseClasses,\n  styled,\n  svgIconClasses,\n} from '@mui/material'\nimport type React from 'react'\nimport { Input as InputBase } from '../../components/Input.js'\n\ninterface InputProps {\n  size?: 'small' | 'medium'\n}\n\nexport const Input: React.FC<\n  React.ComponentProps<typeof InputBase> & InputProps\n> = styled(InputBase, {\n  shouldForwardProp: (prop) => prop !== 'size',\n})<InputProps>(({ theme, size = 'medium' }) => ({\n  paddingRight: size === 'small' ? theme.spacing(1.25) : theme.spacing(1.75),\n  paddingLeft: theme.spacing(1.25),\n  fontSize: size === 'small' ? '0.875rem' : '1rem',\n  borderRadius: theme.vars.shape.borderRadius,\n  [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n    paddingRight: theme.spacing(1.25),\n  },\n  [`& .${inputBaseClasses.input}`]: {\n    padding: theme.spacing(1),\n  },\n  [`& .${inputAdornmentClasses.root}`]: {\n    marginLeft: 0,\n    marginRight: 0,\n    [`& .${svgIconClasses.root}`]: {\n      width: size === 'small' ? '1.25rem' : '1.5rem',\n    },\n  },\n  [`& .${inputAdornmentClasses.root}.${inputAdornmentClasses.positionEnd}`]: {\n    marginRight: size === 'small' ? theme.spacing(-0.5) : theme.spacing(-1),\n    [`& .${svgIconClasses.root}`]: {\n      width: size === 'small' ? '1rem' : '1.25rem',\n      height: size === 'small' ? '1rem' : '1.25rem',\n    },\n  },\n}))\n"],"mappings":";;;AAaA,MAAa,QAET,OAAOA,SAAW,EACpB,oBAAoB,SAAS,SAAS,OACxC,CAAC,GAAe,EAAE,OAAO,OAAO,gBAAgB;CAC9C,cAAc,SAAS,UAAU,MAAM,QAAQ,IAAI,IAAI,MAAM,QAAQ,IAAI;CACzE,aAAa,MAAM,QAAQ,IAAI;CAC/B,UAAU,SAAS,UAAU,aAAa;CAC1C,cAAc,MAAM,KAAK,MAAM;EAC9B,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI,EACrD,cAAc,MAAM,QAAQ,IAAI,EAClC;EACC,MAAM,iBAAiB,UAAU,EAChC,SAAS,MAAM,QAAQ,CAAC,EAC1B;EACC,MAAM,sBAAsB,SAAS;EACpC,YAAY;EACZ,aAAa;GACZ,MAAM,eAAe,SAAS,EAC7B,OAAO,SAAS,UAAU,YAAY,SACxC;CACF;EACC,MAAM,sBAAsB,KAAK,GAAG,sBAAsB,gBAAgB;EACzE,aAAa,SAAS,UAAU,MAAM,QAAQ,GAAI,IAAI,MAAM,QAAQ,EAAE;GACrE,MAAM,eAAe,SAAS;GAC7B,OAAO,SAAS,UAAU,SAAS;GACnC,QAAQ,SAAS,UAAU,SAAS;EACtC;CACF;AACF,EAAE"}

package/dist/esm/components/Search/SearchNotFound.js

@@ -1,5 +1,9 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import SearchOff from '@mui/icons-material/SearchOff';
-import { NotFoundContainer, NotFoundIconContainer, NotFoundMessage, } from './SearchNotFound.style.js';
-export const SearchNotFound = ({ message, adjustForStickySearchInput, }) => (_jsxs(NotFoundContainer, { adjustForStickySearchInput: adjustForStickySearchInput, children: [_jsx(NotFoundIconContainer, { children: _jsx(SearchOff, { fontSize: "inherit" }) }), _jsx(NotFoundMessage, { children: message })] }));
+import { NotFoundContainer, NotFoundIconContainer, NotFoundMessage } from "./SearchNotFound.style.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import SearchOff from "@mui/icons-material/SearchOff";
+//#region src/components/Search/SearchNotFound.tsx
+const SearchNotFound = ({ message }) => /* @__PURE__ */ jsxs(NotFoundContainer, { children: [/* @__PURE__ */ jsx(NotFoundIconContainer, { children: /* @__PURE__ */ jsx(SearchOff, { fontSize: "inherit" }) }), /* @__PURE__ */ jsx(NotFoundMessage, { children: message })] });
+//#endregion
+export { SearchNotFound };
+
 //# sourceMappingURL=SearchNotFound.js.map

package/dist/esm/components/Search/SearchNotFound.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchNotFound.js","sourceRoot":"","sources":["../../../../src/components/Search/SearchNotFound.tsx"],"names":[],"mappings":";AAAA,OAAO,SAAS,MAAM,+BAA+B,CAAA;AACrD,OAAO,EACL,iBAAiB,EACjB,qBAAqB,EACrB,eAAe,GAChB,MAAM,2BAA2B,CAAA;AAOlC,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,OAAO,EACP,0BAA0B,GACN,EAAE,EAAE,CAAC,CACzB,MAAC,iBAAiB,IAAC,0BAA0B,EAAE,0BAA0B,aACvE,KAAC,qBAAqB,cACpB,KAAC,SAAS,IAAC,QAAQ,EAAC,SAAS,GAAG,GACV,EACxB,KAAC,eAAe,cAAE,OAAO,GAAmB,IAC1B,CACrB,CAAA"}
+{"version":3,"file":"SearchNotFound.js","names":[],"sources":["../../../../src/components/Search/SearchNotFound.tsx"],"sourcesContent":["import SearchOff from '@mui/icons-material/SearchOff'\nimport type { JSX } from 'react'\nimport {\n  NotFoundContainer,\n  NotFoundIconContainer,\n  NotFoundMessage,\n} from './SearchNotFound.style.js'\n\ninterface SearchNotFoundProps {\n  message: string\n}\n\nexport const SearchNotFound = ({\n  message,\n}: SearchNotFoundProps): JSX.Element => (\n  <NotFoundContainer>\n    <NotFoundIconContainer>\n      <SearchOff fontSize=\"inherit\" />\n    </NotFoundIconContainer>\n    <NotFoundMessage>{message}</NotFoundMessage>\n  </NotFoundContainer>\n)\n"],"mappings":";;;;AAYA,MAAa,kBAAkB,EAC7B,cAEA,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,uBAAD,EAAA,UACE,oBAAC,WAAD,EAAW,UAAS,UAAW,CAAA,EACV,CAAA,GACvB,oBAAC,iBAAD,EAAA,UAAkB,QAAyB,CAAA,CAC1B,EAAA,CAAA"}

package/dist/esm/components/Search/SearchNotFound.style.js

@@ -1,30 +1,28 @@
-import { Box, styled, Typography } from '@mui/material';
-import { searchContainerHeight } from './SearchInput.style.js';
-export const NotFoundContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'adjustForStickySearchInput',
-})(({ theme, adjustForStickySearchInput }) => ({
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'column',
-    flex: 1,
-    padding: theme.spacing(3),
-    ...(adjustForStickySearchInput && theme.header?.position === 'fixed'
-        ? { paddingTop: `calc(${searchContainerHeight}px + ${theme.spacing(3)})` }
-        : {}),
+import { Box, Typography, styled } from "@mui/material";
+//#region src/components/Search/SearchNotFound.style.tsx
+const NotFoundContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	flexDirection: "column",
+	flex: 1,
+	padding: theme.spacing(3)
 }));
-export const NotFoundMessage = styled(Typography)(({ theme }) => ({
-    fontSize: 14,
-    whiteSpace: 'normal',
-    color: theme.vars.palette.text.secondary,
-    textAlign: 'center',
-    flex: 1,
-    marginTop: theme.spacing(2),
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
+const NotFoundMessage = styled(Typography)(({ theme }) => ({
+	fontSize: 14,
+	whiteSpace: "normal",
+	color: theme.vars.palette.text.secondary,
+	textAlign: "center",
+	flex: 1,
+	marginTop: theme.spacing(2),
+	paddingLeft: theme.spacing(2),
+	paddingRight: theme.spacing(2)
 }));
-export const NotFoundIconContainer = styled(Typography)(() => ({
-    fontSize: 48,
-    lineHeight: 1,
+const NotFoundIconContainer = styled(Typography)(() => ({
+	fontSize: 48,
+	lineHeight: 1
 }));
+//#endregion
+export { NotFoundContainer, NotFoundIconContainer, NotFoundMessage };
+
 //# sourceMappingURL=SearchNotFound.style.js.map

package/dist/esm/components/Search/SearchNotFound.style.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchNotFound.style.js","sourceRoot":"","sources":["../../../../src/components/Search/SearchNotFound.style.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAA;AAM9D,MAAM,CAAC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,EAAE;IAC3C,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,4BAA4B;CACnE,CAAC,CAAyB,CAAC,EAAE,KAAK,EAAE,0BAA0B,EAAE,EAAE,EAAE,CAAC,CAAC;IACrE,OAAO,EAAE,MAAM;IACf,cAAc,EAAE,QAAQ;IACxB,UAAU,EAAE,QAAQ;IACpB,aAAa,EAAE,QAAQ;IACvB,IAAI,EAAE,CAAC;IACP,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IACzB,GAAG,CAAC,0BAA0B,IAAI,KAAK,CAAC,MAAM,EAAE,QAAQ,KAAK,OAAO;QAClE,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,qBAAqB,QAAQ,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE;QAC1E,CAAC,CAAC,EAAE,CAAC;CACR,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAChE,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,QAAQ;IACpB,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS;IACxC,SAAS,EAAE,QAAQ;IACnB,IAAI,EAAE,CAAC;IACP,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3B,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7B,YAAY,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;CAC/B,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,GAAG,EAAE,CAAC,CAAC;IAC7D,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE,CAAC;CACd,CAAC,CAAC,CAAA"}
+{"version":3,"file":"SearchNotFound.style.js","names":[],"sources":["../../../../src/components/Search/SearchNotFound.style.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\n\nexport const NotFoundContainer: React.FC<BoxProps> = styled(Box)(\n  ({ theme }) => ({\n    display: 'flex',\n    justifyContent: 'center',\n    alignItems: 'center',\n    flexDirection: 'column',\n    flex: 1,\n    padding: theme.spacing(3),\n  })\n)\n\nexport const NotFoundMessage: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(({ theme }) => ({\n  fontSize: 14,\n  whiteSpace: 'normal',\n  color: theme.vars.palette.text.secondary,\n  textAlign: 'center',\n  flex: 1,\n  marginTop: theme.spacing(2),\n  paddingLeft: theme.spacing(2),\n  paddingRight: theme.spacing(2),\n}))\n\nexport const NotFoundIconContainer: React.FC<\n  React.ComponentProps<typeof Typography>\n> = styled(Typography)(() => ({\n  fontSize: 48,\n  lineHeight: 1,\n}))\n"],"mappings":";;AAIA,MAAa,oBAAwC,OAAO,GAAG,GAC5D,EAAE,aAAa;CACd,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,eAAe;CACf,MAAM;CACN,SAAS,MAAM,QAAQ,CAAC;AAC1B,EACF;AAEA,MAAa,kBAET,OAAO,UAAU,GAAG,EAAE,aAAa;CACrC,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;CAC/B,WAAW;CACX,MAAM;CACN,WAAW,MAAM,QAAQ,CAAC;CAC1B,aAAa,MAAM,QAAQ,CAAC;CAC5B,cAAc,MAAM,QAAQ,CAAC;AAC/B,EAAE;AAEF,MAAa,wBAET,OAAO,UAAU,SAAS;CAC5B,UAAU;CACV,YAAY;AACd,EAAE"}

package/dist/esm/components/SelectChainAndToken.js

@@ -1,30 +1,36 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, useMediaQuery } from '@mui/material';
-import { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js';
-import { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js';
-import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js';
-import { useFieldValues } from '../stores/form/useFieldValues.js';
-import { DisabledUI, HiddenUI } from '../types/widget.js';
-import { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js';
-export const SelectChainAndToken = (props) => {
-    const prefersNarrowView = useMediaQuery((theme) => theme.breakpoints.down('sm'));
-    const { disabledUI, hiddenUI, subvariant } = useWidgetConfig();
-    const [fromChain, toChain, fromToken, toToken] = useFieldValues('fromChain', 'toChain', 'fromToken', 'toToken');
-    const hiddenReverse = subvariant === 'refuel' ||
-        disabledUI?.includes(DisabledUI.FromToken) ||
-        disabledUI?.includes(DisabledUI.ToToken) ||
-        hiddenUI?.includes(HiddenUI.FromToken) ||
-        hiddenUI?.includes(HiddenUI.ToToken) ||
-        hiddenUI?.includes(HiddenUI.ReverseTokensButton);
-    const hiddenFromToken = hiddenUI?.includes(HiddenUI.FromToken);
-    const hiddenToToken = subvariant === 'custom' || hiddenUI?.includes(HiddenUI.ToToken);
-    const isCompact = !!fromChain &&
-        !!toChain &&
-        !!fromToken &&
-        !!toToken &&
-        !prefersNarrowView &&
-        !hiddenToToken &&
-        !hiddenFromToken;
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: isCompact ? 'row' : 'column' }, ...props, children: [!hiddenFromToken ? (_jsx(SelectTokenButton, { formType: "from", compact: isCompact, hiddenReverse: hiddenReverse })) : null, !hiddenToToken && !hiddenFromToken ? (!hiddenReverse ? (_jsx(ReverseTokensButton, { vertical: !isCompact })) : (_jsx(ReverseTokensButtonEmpty, {}))) : null, !hiddenToToken ? (_jsx(SelectTokenButton, { formType: "to", compact: isCompact, hiddenReverse: hiddenReverse })) : null] }));
+import { useWidgetConfig } from "../providers/WidgetProvider/WidgetProvider.js";
+import { ReverseTokensButtonEmpty } from "./ReverseTokensButton/ReverseTokensButton.style.js";
+import { ReverseTokensButton } from "./ReverseTokensButton/ReverseTokensButton.js";
+import { SelectTokenButton } from "./SelectTokenButton/SelectTokenButton.js";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/SelectChainAndToken.tsx
+const SelectChainAndToken = (props) => {
+	const { disabledUI, hiddenUI, mode } = useWidgetConfig();
+	const hiddenReverse = mode === "refuel" || disabledUI?.fromToken || disabledUI?.toToken || hiddenUI?.fromToken || hiddenUI?.toToken || hiddenUI?.reverseTokensButton;
+	const hiddenFromToken = hiddenUI?.fromToken;
+	const hiddenToToken = mode === "custom" || hiddenUI?.toToken;
+	const showReverseButton = !hiddenToToken && !hiddenFromToken;
+	return /* @__PURE__ */ jsxs(Box, {
+		...props,
+		sx: {
+			display: "flex",
+			...props.sx
+		},
+		children: [
+			!hiddenFromToken ? /* @__PURE__ */ jsx(SelectTokenButton, {
+				formType: "from",
+				hiddenReverse
+			}) : null,
+			showReverseButton ? !hiddenReverse ? /* @__PURE__ */ jsx(ReverseTokensButton, {}) : /* @__PURE__ */ jsx(ReverseTokensButtonEmpty, {}) : null,
+			!hiddenToToken ? /* @__PURE__ */ jsx(SelectTokenButton, {
+				formType: "to",
+				hiddenReverse
+			}) : null
+		]
+	});
 };
+//#endregion
+export { SelectChainAndToken };
+
 //# sourceMappingURL=SelectChainAndToken.js.map

package/dist/esm/components/SelectChainAndToken.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChainAndToken.js","sourceRoot":"","sources":["../../../src/components/SelectChainAndToken.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,aAAa,EAAE,MAAM,eAAe,CAAA;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,0DAA0D,CAAA;AAC9F,OAAO,EAAE,iBAAiB,EAAE,MAAM,sDAAsD,CAAA;AACxF,OAAO,EAAE,eAAe,EAAE,MAAM,+CAA+C,CAAA;AAC/E,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAA;AACjE,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,wBAAwB,EAAE,MAAM,oDAAoD,CAAA;AAE7F,MAAM,CAAC,MAAM,mBAAmB,GAAuB,CAAC,KAAK,EAAE,EAAE;IAC/D,MAAM,iBAAiB,GAAG,aAAa,CAAC,CAAC,KAAY,EAAE,EAAE,CACvD,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAC7B,CAAA;IACD,MAAM,EAAE,UAAU,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,CAAA;IAE9D,MAAM,CAAC,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO,CAAC,GAAG,cAAc,CAC7D,WAAW,EACX,SAAS,EACT,WAAW,EACX,SAAS,CACV,CAAA;IAED,MAAM,aAAa,GACjB,UAAU,KAAK,QAAQ;QACvB,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC;QAC1C,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC;QACxC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC;QACtC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC;QACpC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,mBAAmB,CAAC,CAAA;IAElD,MAAM,eAAe,GAAG,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAA;IAC9D,MAAM,aAAa,GACjB,UAAU,KAAK,QAAQ,IAAI,QAAQ,EAAE,QAAQ,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAA;IAEjE,MAAM,SAAS,GACb,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,OAAO;QACT,CAAC,iBAAiB;QAClB,CAAC,aAAa;QACd,CAAC,eAAe,CAAA;IAElB,OAAO,CACL,MAAC,GAAG,IACF,EAAE,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,EAAE,KAChE,KAAK,aAER,CAAC,eAAe,CAAC,CAAC,CAAC,CAClB,KAAC,iBAAiB,IAChB,QAAQ,EAAC,MAAM,EACf,OAAO,EAAE,SAAS,EAClB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC,CAAC,CAAC,IAAI,EACP,CAAC,aAAa,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CACpC,CAAC,aAAa,CAAC,CAAC,CAAC,CACf,KAAC,mBAAmB,IAAC,QAAQ,EAAE,CAAC,SAAS,GAAI,CAC9C,CAAC,CAAC,CAAC,CACF,KAAC,wBAAwB,KAAG,CAC7B,CACF,CAAC,CAAC,CAAC,IAAI,EACP,CAAC,aAAa,CAAC,CAAC,CAAC,CAChB,KAAC,iBAAiB,IAChB,QAAQ,EAAC,IAAI,EACb,OAAO,EAAE,SAAS,EAClB,aAAa,EAAE,aAAa,GAC5B,CACH,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"SelectChainAndToken.js","names":[],"sources":["../../../src/components/SelectChainAndToken.tsx"],"sourcesContent":["import type { BoxProps } from '@mui/material'\nimport { Box } from '@mui/material'\nimport { ReverseTokensButton } from '../components/ReverseTokensButton/ReverseTokensButton.js'\nimport { SelectTokenButton } from '../components/SelectTokenButton/SelectTokenButton.js'\nimport { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'\nimport { ReverseTokensButtonEmpty } from './ReverseTokensButton/ReverseTokensButton.style.js'\n\nexport const SelectChainAndToken: React.FC<BoxProps> = (props) => {\n  const { disabledUI, hiddenUI, mode } = useWidgetConfig()\n\n  const hiddenReverse =\n    mode === 'refuel' ||\n    disabledUI?.fromToken ||\n    disabledUI?.toToken ||\n    hiddenUI?.fromToken ||\n    hiddenUI?.toToken ||\n    hiddenUI?.reverseTokensButton\n\n  const hiddenFromToken = hiddenUI?.fromToken\n  const hiddenToToken = mode === 'custom' || hiddenUI?.toToken\n\n  const showReverseButton = !hiddenToToken && !hiddenFromToken\n\n  return (\n    <Box {...props} sx={{ display: 'flex', ...props.sx }}>\n      {!hiddenFromToken ? (\n        <SelectTokenButton formType=\"from\" hiddenReverse={hiddenReverse} />\n      ) : null}\n      {showReverseButton ? (\n        !hiddenReverse ? (\n          <ReverseTokensButton />\n        ) : (\n          <ReverseTokensButtonEmpty />\n        )\n      ) : null}\n      {!hiddenToToken ? (\n        <SelectTokenButton formType=\"to\" hiddenReverse={hiddenReverse} />\n      ) : null}\n    </Box>\n  )\n}\n"],"mappings":";;;;;;;AAOA,MAAa,uBAA2C,UAAU;CAChE,MAAM,EAAE,YAAY,UAAU,SAAS,gBAAgB;CAEvD,MAAM,gBACJ,SAAS,YACT,YAAY,aACZ,YAAY,WACZ,UAAU,aACV,UAAU,WACV,UAAU;CAEZ,MAAM,kBAAkB,UAAU;CAClC,MAAM,gBAAgB,SAAS,YAAY,UAAU;CAErD,MAAM,oBAAoB,CAAC,iBAAiB,CAAC;CAE7C,OACE,qBAAC,KAAD;EAAK,GAAI;EAAO,IAAI;GAAE,SAAS;GAAQ,GAAG,MAAM;EAAG;YAAnD;GACG,CAAC,kBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAsB;GAAgB,CAAA,IAChE;GACH,oBACC,CAAC,gBACC,oBAAC,qBAAD,CAAsB,CAAA,IAEtB,oBAAC,0BAAD,CAA2B,CAAA,IAE3B;GACH,CAAC,gBACA,oBAAC,mBAAD;IAAmB,UAAS;IAAoB;GAAgB,CAAA,IAC9D;EACD;;AAET"}

package/dist/esm/components/SelectTokenButton/SelectTokenButton.js

@@ -1,57 +1,70 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Skeleton } from '@mui/material';
-import { useNavigate } from '@tanstack/react-router';
-import { useTranslation } from 'react-i18next';
-import { useChain } from '../../hooks/useChain.js';
-import { useSwapOnly } from '../../hooks/useSwapOnly.js';
-import { useToken } from '../../hooks/useToken.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { HiddenUI } from '../../types/widget.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
-import { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js';
-import { TokenAvatar } from '../Avatar/TokenAvatar.js';
-import { CardTitle } from '../Card/CardTitle.js';
-import { CardContent, SelectTokenCard, SelectTokenCardHeader, } from './SelectTokenButton.style.js';
-export const SelectTokenButton = ({ formType, compact, hiddenReverse }) => {
-    const { t } = useTranslation();
-    const navigate = useNavigate();
-    const { disabledUI, subvariant, hiddenUI } = useWidgetConfig();
-    const swapOnly = useSwapOnly();
-    const tokenKey = FormKeyHelper.getTokenKey(formType);
-    const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), tokenKey);
-    const { chain, isLoading: isChainLoading } = useChain(chainId);
-    const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
-    const isAllNetworks = useChainOrderStore((state) => state[`${formType}IsAllNetworks`]);
-    const handleClick = () => {
-        navigate({
-            to: formType === 'from'
-                ? navigationRoutes.fromToken
-                : subvariant === 'refuel'
-                    ? navigationRoutes.toTokenNative
-                    : navigationRoutes.toToken,
-        });
-    };
-    const isSelected = !!(chain && token);
-    const onClick = !disabledUI?.includes(tokenKey) ? handleClick : undefined;
-    const defaultPlaceholder = formType === 'to' && subvariant === 'refuel'
-        ? t('main.selectChain')
-        : (formType === 'to' && swapOnly) ||
-            hiddenUI?.includes(HiddenUI.ChainSelect)
-            ? t('main.selectToken')
-            : t('main.selectChainAndToken');
-    const cardTitle = formType === 'from' && subvariant === 'custom'
-        ? t('header.payWith')
-        : t(`main.${formType}`);
-    return (_jsx(SelectTokenCard, { component: "button", onClick: onClick, children: _jsxs(CardContent, { formType: formType, compact: compact, mask: !hiddenReverse, children: [_jsx(CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (_jsx(SelectTokenCardHeader, { avatar: _jsx(AvatarBadgedSkeleton, {}), title: _jsx(Skeleton, { variant: "text", width: 64, height: 24 }), subheader: _jsx(Skeleton, { variant: "text", width: 72, height: 16 }), compact: compact })) : (_jsx(SelectTokenCardHeader, { avatar: isSelected ? (_jsx(TokenAvatar, { token: token, chain: chain })) : (_jsx(AvatarBadgedDefault, { chain: isAllNetworks ? undefined : chain })), title: isSelected ? token.symbol : defaultPlaceholder, slotProps: {
-                        title: {
-                            title: isSelected ? token.symbol : defaultPlaceholder,
-                        },
-                        subheader: {
-                            title: isSelected ? chain.name : undefined,
-                        },
-                    }, subheader: isSelected ? chain.name : null, selected: isSelected, compact: compact }))] }) }));
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useChain } from "../../hooks/useChain.js";
+import { useToken } from "../../hooks/useToken.js";
+import { AvatarBadgedDefault, AvatarBadgedSkeleton } from "../Avatar/Avatar.js";
+import { TokenAvatar } from "../Avatar/TokenAvatar.js";
+import { CardTitle } from "../Card/CardTitle.js";
+import { CardContent as CardContent$1, SelectTokenCard, SelectTokenCardHeader } from "./SelectTokenButton.style.js";
+import { useNavigate } from "@tanstack/react-router";
+import { Skeleton } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/SelectTokenButton/SelectTokenButton.tsx
+const SelectTokenButton = ({ formType, hiddenReverse }) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const { disabledUI, mode } = useWidgetConfig();
+	const tokenKey = FormKeyHelper.getTokenKey(formType);
+	const [chainId, tokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), tokenKey);
+	const { chain, isLoading: isChainLoading } = useChain(chainId);
+	const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress);
+	const isAllNetworks = useChainOrderStore((state) => state[`${formType}IsAllNetworks`]);
+	const handleClick = () => {
+		navigate({ to: formType === "from" ? navigationRoutes.fromToken : mode === "refuel" ? navigationRoutes.toTokenNative : navigationRoutes.toToken });
+	};
+	const isSelected = !!(chain && token);
+	const onClick = !disabledUI?.[tokenKey] ? handleClick : void 0;
+	const defaultPlaceholder = `${t("main.select")}...`;
+	const cardTitle = formType === "from" && mode === "custom" ? t("header.payWith") : t(`main.${formType}`);
+	return /* @__PURE__ */ jsx(SelectTokenCard, {
+		component: "button",
+		onClick,
+		children: /* @__PURE__ */ jsxs(CardContent$1, {
+			formType,
+			mask: !hiddenReverse,
+			children: [/* @__PURE__ */ jsx(CardTitle, { children: cardTitle }), chainId && tokenAddress && (isChainLoading || isTokenLoading) ? /* @__PURE__ */ jsx(SelectTokenCardHeader, {
+				avatar: /* @__PURE__ */ jsx(AvatarBadgedSkeleton, {}),
+				title: /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					width: 64,
+					height: 24
+				}),
+				subheader: /* @__PURE__ */ jsx(Skeleton, {
+					variant: "text",
+					width: 72,
+					height: 16
+				})
+			}) : /* @__PURE__ */ jsx(SelectTokenCardHeader, {
+				avatar: isSelected ? /* @__PURE__ */ jsx(TokenAvatar, {
+					token,
+					chain
+				}) : /* @__PURE__ */ jsx(AvatarBadgedDefault, { chain: isAllNetworks ? void 0 : chain }),
+				title: isSelected ? token.symbol : defaultPlaceholder,
+				slotProps: {
+					title: { title: isSelected ? token.symbol : defaultPlaceholder },
+					subheader: { title: isSelected ? chain.name : void 0 }
+				},
+				subheader: isSelected ? chain.name : null,
+				selected: isSelected
+			})]
+		})
+	});
 };
+//#endregion
+export { SelectTokenButton };
+
 //# sourceMappingURL=SelectTokenButton.js.map

package/dist/esm/components/SelectTokenButton/SelectTokenButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTokenButton.js","sourceRoot":"","sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectTokenButton.js","names":["CardContent"],"sources":["../../../../src/components/SelectTokenButton/SelectTokenButton.tsx"],"sourcesContent":["import { Skeleton } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { ChainOrderState } from '../../stores/chains/types.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AvatarBadgedDefault, AvatarBadgedSkeleton } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardTitle } from '../Card/CardTitle.js'\nimport {\n  CardContent,\n  SelectTokenCard,\n  SelectTokenCardHeader,\n} from './SelectTokenButton.style.js'\n\nexport const SelectTokenButton: React.FC<\n  FormTypeProps & {\n    hiddenReverse?: boolean\n  }\n> = ({ formType, hiddenReverse }) => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { disabledUI, mode } = useWidgetConfig()\n  const tokenKey = FormKeyHelper.getTokenKey(formType)\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    tokenKey\n  )\n  const { chain, isLoading: isChainLoading } = useChain(chainId)\n  const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)\n\n  const isAllNetworks = useChainOrderStore(\n    (state: ChainOrderState) => state[`${formType}IsAllNetworks`]\n  )\n\n  const handleClick = () => {\n    navigate({\n      to:\n        formType === 'from'\n          ? navigationRoutes.fromToken\n          : mode === 'refuel'\n            ? navigationRoutes.toTokenNative\n            : navigationRoutes.toToken,\n    })\n  }\n\n  const isSelected = !!(chain && token)\n  const onClick = !disabledUI?.[tokenKey as keyof DisabledUIConfig]\n    ? handleClick\n    : undefined\n  const defaultPlaceholder = `${t('main.select')}...`\n  const cardTitle: string =\n    formType === 'from' && mode === 'custom'\n      ? t('header.payWith')\n      : t(`main.${formType}`)\n  return (\n    <SelectTokenCard component=\"button\" onClick={onClick}>\n      <CardContent formType={formType} mask={!hiddenReverse}>\n        <CardTitle>{cardTitle}</CardTitle>\n        {chainId && tokenAddress && (isChainLoading || isTokenLoading) ? (\n          <SelectTokenCardHeader\n            avatar={<AvatarBadgedSkeleton />}\n            title={<Skeleton variant=\"text\" width={64} height={24} />}\n            subheader={<Skeleton variant=\"text\" width={72} height={16} />}\n          />\n        ) : (\n          <SelectTokenCardHeader\n            avatar={\n              isSelected ? (\n                <TokenAvatar token={token} chain={chain} />\n              ) : (\n                <AvatarBadgedDefault\n                  chain={isAllNetworks ? undefined : chain}\n                />\n              )\n            }\n            title={isSelected ? token.symbol : defaultPlaceholder}\n            slotProps={{\n              title: {\n                title: isSelected ? token.symbol : defaultPlaceholder,\n              },\n              subheader: {\n                title: isSelected ? chain.name : undefined,\n              },\n            }}\n            subheader={isSelected ? chain.name : null}\n            selected={isSelected}\n          />\n        )}\n      </CardContent>\n    </SelectTokenCard>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAa,qBAIR,EAAE,UAAU,oBAAoB;CACnC,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAC7C,MAAM,WAAW,cAAc,YAAY,QAAQ;CACnD,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,QACF;CACA,MAAM,EAAE,OAAO,WAAW,mBAAmB,SAAS,OAAO;CAC7D,MAAM,EAAE,OAAO,WAAW,mBAAmB,SAAS,SAAS,YAAY;CAE3E,MAAM,gBAAgB,oBACnB,UAA2B,MAAM,GAAG,SAAS,eAChD;CAEA,MAAM,oBAAoB;EACxB,SAAS,EACP,IACE,aAAa,SACT,iBAAiB,YACjB,SAAS,WACP,iBAAiB,gBACjB,iBAAiB,QAC3B,CAAC;CACH;CAEA,MAAM,aAAa,CAAC,EAAE,SAAS;CAC/B,MAAM,UAAU,CAAC,aAAa,YAC1B,cACA,KAAA;CACJ,MAAM,qBAAqB,GAAG,EAAE,aAAa,EAAE;CAC/C,MAAM,YACJ,aAAa,UAAU,SAAS,WAC5B,EAAE,gBAAgB,IAClB,EAAE,QAAQ,UAAU;CAC1B,OACE,oBAAC,iBAAD;EAAiB,WAAU;EAAkB;YAC3C,qBAACA,eAAD;GAAuB;GAAU,MAAM,CAAC;aAAxC,CACE,oBAAC,WAAD,EAAA,UAAY,UAAqB,CAAA,GAChC,WAAW,iBAAiB,kBAAkB,kBAC7C,oBAAC,uBAAD;IACE,QAAQ,oBAAC,sBAAD,CAAuB,CAAA;IAC/B,OAAO,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA;IACxD,WAAW,oBAAC,UAAD;KAAU,SAAQ;KAAO,OAAO;KAAI,QAAQ;IAAK,CAAA;GAC7D,CAAA,IAED,oBAAC,uBAAD;IACE,QACE,aACE,oBAAC,aAAD;KAAoB;KAAc;IAAQ,CAAA,IAE1C,oBAAC,qBAAD,EACE,OAAO,gBAAgB,KAAA,IAAY,MACpC,CAAA;IAGL,OAAO,aAAa,MAAM,SAAS;IACnC,WAAW;KACT,OAAO,EACL,OAAO,aAAa,MAAM,SAAS,mBACrC;KACA,WAAW,EACT,OAAO,aAAa,MAAM,OAAO,KAAA,EACnC;IACF;IACA,WAAW,aAAa,MAAM,OAAO;IACrC,UAAU;GACX,CAAA,CAEQ;;CACE,CAAA;AAErB"}