@lidofinance/lido-ui 3.18.0 → 3.18.2

package/dist/cjs/styled-system/withStyledSystem.js

@@ -1,12 +1,14 @@
 'use strict';
 
 const styledComponentsWrapper = require('../utils/styled-components-wrapper.js');
-const shouldForwardProp = require('@styled-system/should-forward-prop');
+const _shouldForwardProp = require('@styled-system/should-forward-prop');
 const styledSystem = require('styled-system');
 
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 
 
+const shouldForwardProp = _shouldForwardProp.default || _shouldForwardProp;
+
 function withStyledSystem(Component) {
   return styledComponentsWrapper.default(Component).withConfig({
     shouldForwardProp

package/dist/cjs/styled-system/withStyledSystem.js.map

@@ -1 +1 @@
-{"version":3,"file":"withStyledSystem.js","sources":["../../../packages/styled-system/withStyledSystem.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport styled, {\n  AnyStyledComponent,\n  StyledComponent,\n  StyledComponentInnerComponent,\n  StyledComponentInnerOtherProps,\n  StyledComponentInnerAttrs,\n  DefaultTheme,\n} from '../utils/styled-components-wrapper.js'\nimport shouldForwardProp from '@styled-system/should-forward-prop'\nimport {\n  compose,\n  space,\n  color,\n  typography,\n  layout,\n  flexbox,\n  grid,\n  background,\n  border,\n  position,\n  shadow,\n} from 'styled-system'\nimport { ComponentType } from 'react'\nimport { StyledSystemProps } from './types.js'\n\ntype MergePropsWithSS<T extends object> = Omit<T, keyof StyledSystemProps> &\n  StyledSystemProps\n\nfunction withStyledSystem<\n  C extends AnyStyledComponent,\n  T extends object = DefaultTheme,\n  O extends object = {},\n  A extends keyof any = never,\n>(\n  Component: C,\n): StyledComponent<\n  StyledComponentInnerComponent<C>,\n  T,\n  MergePropsWithSS<O & StyledComponentInnerOtherProps<C>>,\n  A | StyledComponentInnerAttrs<C>\n>\n\nfunction withStyledSystem<\n  C extends keyof JSX.IntrinsicElements | ComponentType<any>,\n  T extends object = DefaultTheme,\n  O extends object = {},\n  A extends keyof any = never,\n>(Component: C): StyledComponent<C, T, MergePropsWithSS<O>, A>\n\nfunction withStyledSystem(Component: any) {\n  return styled(Component).withConfig<{}>({\n    shouldForwardProp,\n  })<StyledSystemProps>(\n    compose(\n      space,\n      color,\n      typography,\n      layout,\n      flexbox,\n      grid,\n      background,\n      border,\n      position,\n      shadow,\n    ),\n  )\n}\n\nexport default withStyledSystem\n"],"names":["withStyledSystem","Component","styled","withConfig","shouldForwardProp","compose","space","color","typography","layout","flexbox","grid","background","border","position","shadow"],"mappings":";;;;;;AAAA;;;AAqDA,SAASA,gBAAT,CAA0BC,SAA1B,EAA0C;AACxC,EAAA,OAAOC,+BAAM,CAACD,SAAD,CAAN,CAAkBE,UAAlB,CAAiC;AACtCC,IAAAA,iBAAAA;GADK,CAAA,CAGLC,oBAAO,CACLC,kBADK,EAELC,kBAFK,EAGLC,uBAHK,EAILC,mBAJK,EAKLC,oBALK,EAMLC,iBANK,EAOLC,uBAPK,EAQLC,mBARK,EASLC,qBATK,EAULC,mBAVK,CAHF,CAAP,CAAA;AAgBD;;;;"}
+{"version":3,"file":"withStyledSystem.js","sources":["../../../packages/styled-system/withStyledSystem.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport styled, {\n  AnyStyledComponent,\n  StyledComponent,\n  StyledComponentInnerComponent,\n  StyledComponentInnerOtherProps,\n  StyledComponentInnerAttrs,\n  DefaultTheme,\n} from '../utils/styled-components-wrapper.js'\n\n// The `@styled-system/should-forward-prop` has issues with ESM modules:\nimport _shouldForwardProp from '@styled-system/should-forward-prop'\n// @ts-expect-error Property 'default' does not exist on type 'genericShouldForwardProp'\nconst shouldForwardProp = _shouldForwardProp.default || _shouldForwardProp\n\nimport {\n  compose,\n  space,\n  color,\n  typography,\n  layout,\n  flexbox,\n  grid,\n  background,\n  border,\n  position,\n  shadow,\n} from 'styled-system'\nimport { ComponentType } from 'react'\nimport { StyledSystemProps } from './types.js'\n\ntype MergePropsWithSS<T extends object> = Omit<T, keyof StyledSystemProps> &\n  StyledSystemProps\n\nfunction withStyledSystem<\n  C extends AnyStyledComponent,\n  T extends object = DefaultTheme,\n  O extends object = {},\n  A extends keyof any = never,\n>(\n  Component: C,\n): StyledComponent<\n  StyledComponentInnerComponent<C>,\n  T,\n  MergePropsWithSS<O & StyledComponentInnerOtherProps<C>>,\n  A | StyledComponentInnerAttrs<C>\n>\n\nfunction withStyledSystem<\n  C extends keyof JSX.IntrinsicElements | ComponentType<any>,\n  T extends object = DefaultTheme,\n  O extends object = {},\n  A extends keyof any = never,\n>(Component: C): StyledComponent<C, T, MergePropsWithSS<O>, A>\n\nfunction withStyledSystem(Component: any) {\n  return styled(Component).withConfig<{}>({\n    shouldForwardProp,\n  })<StyledSystemProps>(\n    compose(\n      space,\n      color,\n      typography,\n      layout,\n      flexbox,\n      grid,\n      background,\n      border,\n      position,\n      shadow,\n    ),\n  )\n}\n\nexport default withStyledSystem\n"],"names":["shouldForwardProp","_shouldForwardProp","default","withStyledSystem","Component","styled","withConfig","compose","space","color","typography","layout","flexbox","grid","background","border","position","shadow"],"mappings":";;;;;;AAAA;;;AAgBA,MAAMA,iBAAiB,GAAGC,kBAAkB,CAACC,OAAnB,IAA8BD,kBAAxD,CAAA;;AA0CA,SAASE,gBAAT,CAA0BC,SAA1B,EAA0C;AACxC,EAAA,OAAOC,+BAAM,CAACD,SAAD,CAAN,CAAkBE,UAAlB,CAAiC;AACtCN,IAAAA,iBAAAA;GADK,CAAA,CAGLO,oBAAO,CACLC,kBADK,EAELC,kBAFK,EAGLC,uBAHK,EAILC,mBAJK,EAKLC,oBALK,EAMLC,iBANK,EAOLC,uBAPK,EAQLC,mBARK,EASLC,qBATK,EAULC,mBAVK,CAHF,CAAP,CAAA;AAgBD;;;;"}

package/dist/cjs/theme/cookie-theme-provider.js

@@ -38,7 +38,7 @@ const CookieThemeProvider = /*#__PURE__*/React.memo(_ref => {
   const isTopLevelProvider = Object.keys(parentTheme).length === 0; // we always start with default theme, or, if server wants to provide
   // specific default theme, with server-provided theme to avoid hydration errors
 
-  const [internalThemeName, setThemeName] = React.useState(elementThemeScript.getThemeNameFromUrl() || initialThemeName || constants.DEFAULT_THEME_NAME); // since we're using this component to provide cookie-theme,
+  const [internalThemeName, setThemeName] = React.useState(initialThemeName || constants.DEFAULT_THEME_NAME); // since we're using this component to provide cookie-theme,
   // we eventually want to respect theme provided in cookie, not general theme,
   // so we're picking `parentTheme.themeName` if we have one.
   // If user needs custom theme, not "cookie theme", he should use ThemeProvider instead.

package/dist/cjs/theme/cookie-theme-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"cookie-theme-provider.js","sources":["../../../packages/theme/cookie-theme-provider.tsx"],"sourcesContent":["import {\n  createContext,\n  FC,\n  memo,\n  PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport { ThemeProvider as StyledThemeProvider } from '../utils/styled-components-wrapper.js'\nimport {\n  DEFAULT_THEME_NAME,\n  prefersDarkThemeMediaQuery,\n  ThemeName,\n} from './constants.js'\nimport { themeMap } from './themes.js'\nimport { getThemeNameFromCookies } from './utils/cookies.js'\nimport { initColors } from './document-head-contents/index.js'\nimport {\n  getThemeNameFromUrl,\n  updateGlobalTheme,\n} from './document-head-contents/element-theme-script.js'\nimport { ThemeContext } from './types.js'\n\nconst defaultThemeContext = {} as ThemeContext\nexport const ThemeToggleContext =\n  createContext<ThemeContext>(defaultThemeContext)\n\n// we need to initialize this before react component code if we're using this provider or ThemeProvider\ninitColors()\n\n/**\n * This is really complicated logic here. Comments will be added on specific lines\n *\n * Cookie theme provider acts differently from common theme provider.\n * 1. it can be nested, BUT it should re-use value provided by itself for optimisation purposes\n * 2. if it is top-level, it is not altering itself, but instead altering theme behavior on HTMLElement level\n * 3. it does not support custom themes, preferring pre-defined themes instead\n * */\n\nexport const CookieThemeProvider: FC<\n  PropsWithChildren<{\n    // Use themeNameParent if you need get cookie in SSR\n    initialThemeName?: ThemeName\n    overrideThemeName?: ThemeName\n  }>\n> = memo(\n  ({\n    children,\n    initialThemeName,\n    // overrideThemeName is mainly used for storybook\n    overrideThemeName,\n  }) => {\n    const parentTheme = useContext(ThemeToggleContext)\n    // we do not want to do nested injections, and we're checking\n    // if context we inject in this component is already provided\n    const isTopLevelProvider = Object.keys(parentTheme).length === 0\n    // we always start with default theme, or, if server wants to provide\n    // specific default theme, with server-provided theme to avoid hydration errors\n    const [internalThemeName, setThemeName] = useState<ThemeName>(\n      getThemeNameFromUrl() || initialThemeName || DEFAULT_THEME_NAME,\n    )\n    // since we're using this component to provide cookie-theme,\n    // we eventually want to respect theme provided in cookie, not general theme,\n    // so we're picking `parentTheme.themeName` if we have one.\n    // If user needs custom theme, not \"cookie theme\", he should use ThemeProvider instead.\n    const themeName = parentTheme.themeName || internalThemeName\n\n    const theme = themeMap[themeName]\n\n    // This logic is really hydrating everything, since we started with server-rendered default prop.\n    // It also follows cookie value change.\n    useEffect(() => {\n      // This logic is useless if we're nested - it is already done in top-level provider\n      if (!isTopLevelProvider) {\n        return\n      }\n\n      const setTheme = () => {\n        const systemThemeName = prefersDarkThemeMediaQuery?.matches\n          ? ThemeName.dark\n          : ThemeName.light\n        const themeNameUrl = getThemeNameFromUrl()\n        const themeNameCookie = getThemeNameFromCookies()\n        const newThemeName =\n          // first, if we have some override (e.g. in Storybook), we respect it\n          overrideThemeName ||\n          // url query has higher priority than cookie\n          themeNameUrl ||\n          // then, if we have cookie theme, we use theme from cookie\n          themeNameCookie ||\n          // else, we follow theme we were provided in initialization from server,\n          // which means server explicitly wants specific theme by default, not \"follow-system\"\n          initialThemeName ||\n          // then, we use media query theme, if available (not all browsers may still support it)\n          systemThemeName ||\n          // and, finally, falling back to default\n          DEFAULT_THEME_NAME\n        setThemeName(newThemeName)\n        // and when theme is switched, we're setting global-level CSS variable data-attribute\n        // to modify CSS vars provided on a top-level\n        document.documentElement.dataset.lidoTheme = newThemeName\n      }\n\n      // Users may have auto-theme (switching on sunset or schedule or whatever) so we need to listen for this event\n      prefersDarkThemeMediaQuery?.addEventListener('change', setTheme)\n      setTheme()\n\n      // This code check that the theme cookie was changed on other tab or site (the same second-level domain)\n      const checkCookieThemeWasChanged = () => {\n        const themeNameCookie = getThemeNameFromCookies()\n\n        if (\n          themeNameCookie &&\n          (themeNameCookie === ThemeName.dark ||\n            themeNameCookie === ThemeName.light)\n        ) {\n          setThemeName(themeNameCookie)\n        }\n      }\n      window.addEventListener('focus', checkCookieThemeWasChanged)\n\n      return () => {\n        window.removeEventListener('focus', checkCookieThemeWasChanged)\n      }\n    }, [\n      initialThemeName,\n      isTopLevelProvider,\n      overrideThemeName,\n      parentTheme,\n      theme,\n    ])\n\n    const value = useMemo(\n      () => ({\n        themeName,\n        toggleTheme() {\n          setThemeName((themeName) => {\n            const newThemeName =\n              themeName === ThemeName.light ? ThemeName.dark : ThemeName.light\n            // note that we're writing cookie theme only on explicit calls,\n            // not on \"internal theme state\" change\n            updateGlobalTheme(newThemeName)\n            // we do not need to run setTheme here, as effect is triggered\n            return newThemeName\n          })\n        },\n      }),\n      [themeName],\n    )\n\n    if (isTopLevelProvider) {\n      // if this provider is top-level we rely on element-theme-script.tsx logic\n      // which defines data-lido-theme injection\n      return (\n        <ThemeToggleContext.Provider value={value}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </ThemeToggleContext.Provider>\n      )\n    } else if (overrideThemeName) {\n      return (\n        <div style={{ display: 'contents' }} data-lido-theme={themeName}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </div>\n      )\n    } else {\n      return <>{children}</>\n    }\n  },\n)\n\nCookieThemeProvider.displayName = 'CookieThemeProvider'\n"],"names":["defaultThemeContext","ThemeToggleContext","createContext","initColors","CookieThemeProvider","memo","children","initialThemeName","overrideThemeName","parentTheme","useContext","isTopLevelProvider","Object","keys","length","internalThemeName","setThemeName","useState","getThemeNameFromUrl","DEFAULT_THEME_NAME","themeName","theme","themeMap","useEffect","setTheme","systemThemeName","prefersDarkThemeMediaQuery","matches","ThemeName","dark","light","themeNameUrl","themeNameCookie","getThemeNameFromCookies","newThemeName","document","documentElement","dataset","lidoTheme","addEventListener","checkCookieThemeWasChanged","window","removeEventListener","value","useMemo","toggleTheme","updateGlobalTheme","_jsx","StyledThemeProvider","display","_Fragment","displayName"],"mappings":"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"}
+{"version":3,"file":"cookie-theme-provider.js","sources":["../../../packages/theme/cookie-theme-provider.tsx"],"sourcesContent":["import {\n  createContext,\n  FC,\n  memo,\n  PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport { ThemeProvider as StyledThemeProvider } from '../utils/styled-components-wrapper.js'\nimport {\n  DEFAULT_THEME_NAME,\n  prefersDarkThemeMediaQuery,\n  ThemeName,\n} from './constants.js'\nimport { themeMap } from './themes.js'\nimport { getThemeNameFromCookies } from './utils/cookies.js'\nimport { initColors } from './document-head-contents/index.js'\nimport {\n  getThemeNameFromUrl,\n  updateGlobalTheme,\n} from './document-head-contents/element-theme-script.js'\nimport { ThemeContext } from './types.js'\n\nconst defaultThemeContext = {} as ThemeContext\nexport const ThemeToggleContext =\n  createContext<ThemeContext>(defaultThemeContext)\n\n// we need to initialize this before react component code if we're using this provider or ThemeProvider\ninitColors()\n\n/**\n * This is really complicated logic here. Comments will be added on specific lines\n *\n * Cookie theme provider acts differently from common theme provider.\n * 1. it can be nested, BUT it should re-use value provided by itself for optimisation purposes\n * 2. if it is top-level, it is not altering itself, but instead altering theme behavior on HTMLElement level\n * 3. it does not support custom themes, preferring pre-defined themes instead\n * */\n\nexport const CookieThemeProvider: FC<\n  PropsWithChildren<{\n    // Use themeNameParent if you need get cookie in SSR\n    initialThemeName?: ThemeName\n    overrideThemeName?: ThemeName\n  }>\n> = memo(\n  ({\n    children,\n    initialThemeName,\n    // overrideThemeName is mainly used for storybook\n    overrideThemeName,\n  }) => {\n    const parentTheme = useContext(ThemeToggleContext)\n    // we do not want to do nested injections, and we're checking\n    // if context we inject in this component is already provided\n    const isTopLevelProvider = Object.keys(parentTheme).length === 0\n    // we always start with default theme, or, if server wants to provide\n    // specific default theme, with server-provided theme to avoid hydration errors\n    const [internalThemeName, setThemeName] = useState<ThemeName>(\n      initialThemeName || DEFAULT_THEME_NAME,\n    )\n    // since we're using this component to provide cookie-theme,\n    // we eventually want to respect theme provided in cookie, not general theme,\n    // so we're picking `parentTheme.themeName` if we have one.\n    // If user needs custom theme, not \"cookie theme\", he should use ThemeProvider instead.\n    const themeName = parentTheme.themeName || internalThemeName\n\n    const theme = themeMap[themeName]\n\n    // This logic is really hydrating everything, since we started with server-rendered default prop.\n    // It also follows cookie value change.\n    useEffect(() => {\n      // This logic is useless if we're nested - it is already done in top-level provider\n      if (!isTopLevelProvider) {\n        return\n      }\n\n      const setTheme = () => {\n        const systemThemeName = prefersDarkThemeMediaQuery?.matches\n          ? ThemeName.dark\n          : ThemeName.light\n        const themeNameUrl = getThemeNameFromUrl()\n        const themeNameCookie = getThemeNameFromCookies()\n        const newThemeName =\n          // first, if we have some override (e.g. in Storybook), we respect it\n          overrideThemeName ||\n          // url query has higher priority than cookie\n          themeNameUrl ||\n          // then, if we have cookie theme, we use theme from cookie\n          themeNameCookie ||\n          // else, we follow theme we were provided in initialization from server,\n          // which means server explicitly wants specific theme by default, not \"follow-system\"\n          initialThemeName ||\n          // then, we use media query theme, if available (not all browsers may still support it)\n          systemThemeName ||\n          // and, finally, falling back to default\n          DEFAULT_THEME_NAME\n        setThemeName(newThemeName)\n        // and when theme is switched, we're setting global-level CSS variable data-attribute\n        // to modify CSS vars provided on a top-level\n        document.documentElement.dataset.lidoTheme = newThemeName\n      }\n\n      // Users may have auto-theme (switching on sunset or schedule or whatever) so we need to listen for this event\n      prefersDarkThemeMediaQuery?.addEventListener('change', setTheme)\n      setTheme()\n\n      // This code check that the theme cookie was changed on other tab or site (the same second-level domain)\n      const checkCookieThemeWasChanged = () => {\n        const themeNameCookie = getThemeNameFromCookies()\n\n        if (\n          themeNameCookie &&\n          (themeNameCookie === ThemeName.dark ||\n            themeNameCookie === ThemeName.light)\n        ) {\n          setThemeName(themeNameCookie)\n        }\n      }\n      window.addEventListener('focus', checkCookieThemeWasChanged)\n\n      return () => {\n        window.removeEventListener('focus', checkCookieThemeWasChanged)\n      }\n    }, [\n      initialThemeName,\n      isTopLevelProvider,\n      overrideThemeName,\n      parentTheme,\n      theme,\n    ])\n\n    const value = useMemo(\n      () => ({\n        themeName,\n        toggleTheme() {\n          setThemeName((themeName) => {\n            const newThemeName =\n              themeName === ThemeName.light ? ThemeName.dark : ThemeName.light\n            // note that we're writing cookie theme only on explicit calls,\n            // not on \"internal theme state\" change\n            updateGlobalTheme(newThemeName)\n            // we do not need to run setTheme here, as effect is triggered\n            return newThemeName\n          })\n        },\n      }),\n      [themeName],\n    )\n\n    if (isTopLevelProvider) {\n      // if this provider is top-level we rely on element-theme-script.tsx logic\n      // which defines data-lido-theme injection\n      return (\n        <ThemeToggleContext.Provider value={value}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </ThemeToggleContext.Provider>\n      )\n    } else if (overrideThemeName) {\n      return (\n        <div style={{ display: 'contents' }} data-lido-theme={themeName}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </div>\n      )\n    } else {\n      return <>{children}</>\n    }\n  },\n)\n\nCookieThemeProvider.displayName = 'CookieThemeProvider'\n"],"names":["defaultThemeContext","ThemeToggleContext","createContext","initColors","CookieThemeProvider","memo","children","initialThemeName","overrideThemeName","parentTheme","useContext","isTopLevelProvider","Object","keys","length","internalThemeName","setThemeName","useState","DEFAULT_THEME_NAME","themeName","theme","themeMap","useEffect","setTheme","systemThemeName","prefersDarkThemeMediaQuery","matches","ThemeName","dark","light","themeNameUrl","getThemeNameFromUrl","themeNameCookie","getThemeNameFromCookies","newThemeName","document","documentElement","dataset","lidoTheme","addEventListener","checkCookieThemeWasChanged","window","removeEventListener","value","useMemo","toggleTheme","updateGlobalTheme","_jsx","StyledThemeProvider","display","_Fragment","displayName"],"mappings":"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"}

package/dist/esm/styled-system/withStyledSystem.mjs

@@ -1,10 +1,12 @@
 import styled from '../utils/styled-components-wrapper.mjs';
-import shouldForwardProp from '@styled-system/should-forward-prop';
+import _shouldForwardProp from '@styled-system/should-forward-prop';
 import { compose, space, color, typography, layout, flexbox, grid, background, border, position, shadow } from 'styled-system';
 
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 
 
+const shouldForwardProp = _shouldForwardProp.default || _shouldForwardProp;
+
 function withStyledSystem(Component) {
   return styled(Component).withConfig({
     shouldForwardProp

package/dist/esm/styled-system/withStyledSystem.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"withStyledSystem.mjs","sources":["../../../packages/styled-system/withStyledSystem.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport styled, {\n  AnyStyledComponent,\n  StyledComponent,\n  StyledComponentInnerComponent,\n  StyledComponentInnerOtherProps,\n  StyledComponentInnerAttrs,\n  DefaultTheme,\n} from '../utils/styled-components-wrapper.js'\nimport shouldForwardProp from '@styled-system/should-forward-prop'\nimport {\n  compose,\n  space,\n  color,\n  typography,\n  layout,\n  flexbox,\n  grid,\n  background,\n  border,\n  position,\n  shadow,\n} from 'styled-system'\nimport { ComponentType } from 'react'\nimport { StyledSystemProps } from './types.js'\n\ntype MergePropsWithSS<T extends object> = Omit<T, keyof StyledSystemProps> &\n  StyledSystemProps\n\nfunction withStyledSystem<\n  C extends AnyStyledComponent,\n  T extends object = DefaultTheme,\n  O extends object = {},\n  A extends keyof any = never,\n>(\n  Component: C,\n): StyledComponent<\n  StyledComponentInnerComponent<C>,\n  T,\n  MergePropsWithSS<O & StyledComponentInnerOtherProps<C>>,\n  A | StyledComponentInnerAttrs<C>\n>\n\nfunction withStyledSystem<\n  C extends keyof JSX.IntrinsicElements | ComponentType<any>,\n  T extends object = DefaultTheme,\n  O extends object = {},\n  A extends keyof any = never,\n>(Component: C): StyledComponent<C, T, MergePropsWithSS<O>, A>\n\nfunction withStyledSystem(Component: any) {\n  return styled(Component).withConfig<{}>({\n    shouldForwardProp,\n  })<StyledSystemProps>(\n    compose(\n      space,\n      color,\n      typography,\n      layout,\n      flexbox,\n      grid,\n      background,\n      border,\n      position,\n      shadow,\n    ),\n  )\n}\n\nexport default withStyledSystem\n"],"names":["withStyledSystem","Component","styled","withConfig","shouldForwardProp","compose","space","color","typography","layout","flexbox","grid","background","border","position","shadow"],"mappings":";;;;AAAA;;;AAqDA,SAASA,gBAAT,CAA0BC,SAA1B,EAA0C;AACxC,EAAA,OAAOC,MAAM,CAACD,SAAD,CAAN,CAAkBE,UAAlB,CAAiC;AACtCC,IAAAA,iBAAAA;GADK,CAAA,CAGLC,OAAO,CACLC,KADK,EAELC,KAFK,EAGLC,UAHK,EAILC,MAJK,EAKLC,OALK,EAMLC,IANK,EAOLC,UAPK,EAQLC,MARK,EASLC,QATK,EAULC,MAVK,CAHF,CAAP,CAAA;AAgBD;;;;"}
+{"version":3,"file":"withStyledSystem.mjs","sources":["../../../packages/styled-system/withStyledSystem.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n/* eslint-disable @typescript-eslint/ban-types */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nimport styled, {\n  AnyStyledComponent,\n  StyledComponent,\n  StyledComponentInnerComponent,\n  StyledComponentInnerOtherProps,\n  StyledComponentInnerAttrs,\n  DefaultTheme,\n} from '../utils/styled-components-wrapper.js'\n\n// The `@styled-system/should-forward-prop` has issues with ESM modules:\nimport _shouldForwardProp from '@styled-system/should-forward-prop'\n// @ts-expect-error Property 'default' does not exist on type 'genericShouldForwardProp'\nconst shouldForwardProp = _shouldForwardProp.default || _shouldForwardProp\n\nimport {\n  compose,\n  space,\n  color,\n  typography,\n  layout,\n  flexbox,\n  grid,\n  background,\n  border,\n  position,\n  shadow,\n} from 'styled-system'\nimport { ComponentType } from 'react'\nimport { StyledSystemProps } from './types.js'\n\ntype MergePropsWithSS<T extends object> = Omit<T, keyof StyledSystemProps> &\n  StyledSystemProps\n\nfunction withStyledSystem<\n  C extends AnyStyledComponent,\n  T extends object = DefaultTheme,\n  O extends object = {},\n  A extends keyof any = never,\n>(\n  Component: C,\n): StyledComponent<\n  StyledComponentInnerComponent<C>,\n  T,\n  MergePropsWithSS<O & StyledComponentInnerOtherProps<C>>,\n  A | StyledComponentInnerAttrs<C>\n>\n\nfunction withStyledSystem<\n  C extends keyof JSX.IntrinsicElements | ComponentType<any>,\n  T extends object = DefaultTheme,\n  O extends object = {},\n  A extends keyof any = never,\n>(Component: C): StyledComponent<C, T, MergePropsWithSS<O>, A>\n\nfunction withStyledSystem(Component: any) {\n  return styled(Component).withConfig<{}>({\n    shouldForwardProp,\n  })<StyledSystemProps>(\n    compose(\n      space,\n      color,\n      typography,\n      layout,\n      flexbox,\n      grid,\n      background,\n      border,\n      position,\n      shadow,\n    ),\n  )\n}\n\nexport default withStyledSystem\n"],"names":["shouldForwardProp","_shouldForwardProp","default","withStyledSystem","Component","styled","withConfig","compose","space","color","typography","layout","flexbox","grid","background","border","position","shadow"],"mappings":";;;;AAAA;;;AAgBA,MAAMA,iBAAiB,GAAGC,kBAAkB,CAACC,OAAnB,IAA8BD,kBAAxD,CAAA;;AA0CA,SAASE,gBAAT,CAA0BC,SAA1B,EAA0C;AACxC,EAAA,OAAOC,MAAM,CAACD,SAAD,CAAN,CAAkBE,UAAlB,CAAiC;AACtCN,IAAAA,iBAAAA;GADK,CAAA,CAGLO,OAAO,CACLC,KADK,EAELC,KAFK,EAGLC,UAHK,EAILC,MAJK,EAKLC,OALK,EAMLC,IANK,EAOLC,UAPK,EAQLC,MARK,EASLC,QATK,EAULC,MAVK,CAHF,CAAP,CAAA;AAgBD;;;;"}

package/dist/esm/theme/cookie-theme-provider.mjs

@@ -34,7 +34,7 @@ const CookieThemeProvider = /*#__PURE__*/memo(_ref => {
   const isTopLevelProvider = Object.keys(parentTheme).length === 0; // we always start with default theme, or, if server wants to provide
   // specific default theme, with server-provided theme to avoid hydration errors
 
-  const [internalThemeName, setThemeName] = useState(getThemeNameFromUrl() || initialThemeName || DEFAULT_THEME_NAME); // since we're using this component to provide cookie-theme,
+  const [internalThemeName, setThemeName] = useState(initialThemeName || DEFAULT_THEME_NAME); // since we're using this component to provide cookie-theme,
   // we eventually want to respect theme provided in cookie, not general theme,
   // so we're picking `parentTheme.themeName` if we have one.
   // If user needs custom theme, not "cookie theme", he should use ThemeProvider instead.

package/dist/esm/theme/cookie-theme-provider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cookie-theme-provider.mjs","sources":["../../../packages/theme/cookie-theme-provider.tsx"],"sourcesContent":["import {\n  createContext,\n  FC,\n  memo,\n  PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport { ThemeProvider as StyledThemeProvider } from '../utils/styled-components-wrapper.js'\nimport {\n  DEFAULT_THEME_NAME,\n  prefersDarkThemeMediaQuery,\n  ThemeName,\n} from './constants.js'\nimport { themeMap } from './themes.js'\nimport { getThemeNameFromCookies } from './utils/cookies.js'\nimport { initColors } from './document-head-contents/index.js'\nimport {\n  getThemeNameFromUrl,\n  updateGlobalTheme,\n} from './document-head-contents/element-theme-script.js'\nimport { ThemeContext } from './types.js'\n\nconst defaultThemeContext = {} as ThemeContext\nexport const ThemeToggleContext =\n  createContext<ThemeContext>(defaultThemeContext)\n\n// we need to initialize this before react component code if we're using this provider or ThemeProvider\ninitColors()\n\n/**\n * This is really complicated logic here. Comments will be added on specific lines\n *\n * Cookie theme provider acts differently from common theme provider.\n * 1. it can be nested, BUT it should re-use value provided by itself for optimisation purposes\n * 2. if it is top-level, it is not altering itself, but instead altering theme behavior on HTMLElement level\n * 3. it does not support custom themes, preferring pre-defined themes instead\n * */\n\nexport const CookieThemeProvider: FC<\n  PropsWithChildren<{\n    // Use themeNameParent if you need get cookie in SSR\n    initialThemeName?: ThemeName\n    overrideThemeName?: ThemeName\n  }>\n> = memo(\n  ({\n    children,\n    initialThemeName,\n    // overrideThemeName is mainly used for storybook\n    overrideThemeName,\n  }) => {\n    const parentTheme = useContext(ThemeToggleContext)\n    // we do not want to do nested injections, and we're checking\n    // if context we inject in this component is already provided\n    const isTopLevelProvider = Object.keys(parentTheme).length === 0\n    // we always start with default theme, or, if server wants to provide\n    // specific default theme, with server-provided theme to avoid hydration errors\n    const [internalThemeName, setThemeName] = useState<ThemeName>(\n      getThemeNameFromUrl() || initialThemeName || DEFAULT_THEME_NAME,\n    )\n    // since we're using this component to provide cookie-theme,\n    // we eventually want to respect theme provided in cookie, not general theme,\n    // so we're picking `parentTheme.themeName` if we have one.\n    // If user needs custom theme, not \"cookie theme\", he should use ThemeProvider instead.\n    const themeName = parentTheme.themeName || internalThemeName\n\n    const theme = themeMap[themeName]\n\n    // This logic is really hydrating everything, since we started with server-rendered default prop.\n    // It also follows cookie value change.\n    useEffect(() => {\n      // This logic is useless if we're nested - it is already done in top-level provider\n      if (!isTopLevelProvider) {\n        return\n      }\n\n      const setTheme = () => {\n        const systemThemeName = prefersDarkThemeMediaQuery?.matches\n          ? ThemeName.dark\n          : ThemeName.light\n        const themeNameUrl = getThemeNameFromUrl()\n        const themeNameCookie = getThemeNameFromCookies()\n        const newThemeName =\n          // first, if we have some override (e.g. in Storybook), we respect it\n          overrideThemeName ||\n          // url query has higher priority than cookie\n          themeNameUrl ||\n          // then, if we have cookie theme, we use theme from cookie\n          themeNameCookie ||\n          // else, we follow theme we were provided in initialization from server,\n          // which means server explicitly wants specific theme by default, not \"follow-system\"\n          initialThemeName ||\n          // then, we use media query theme, if available (not all browsers may still support it)\n          systemThemeName ||\n          // and, finally, falling back to default\n          DEFAULT_THEME_NAME\n        setThemeName(newThemeName)\n        // and when theme is switched, we're setting global-level CSS variable data-attribute\n        // to modify CSS vars provided on a top-level\n        document.documentElement.dataset.lidoTheme = newThemeName\n      }\n\n      // Users may have auto-theme (switching on sunset or schedule or whatever) so we need to listen for this event\n      prefersDarkThemeMediaQuery?.addEventListener('change', setTheme)\n      setTheme()\n\n      // This code check that the theme cookie was changed on other tab or site (the same second-level domain)\n      const checkCookieThemeWasChanged = () => {\n        const themeNameCookie = getThemeNameFromCookies()\n\n        if (\n          themeNameCookie &&\n          (themeNameCookie === ThemeName.dark ||\n            themeNameCookie === ThemeName.light)\n        ) {\n          setThemeName(themeNameCookie)\n        }\n      }\n      window.addEventListener('focus', checkCookieThemeWasChanged)\n\n      return () => {\n        window.removeEventListener('focus', checkCookieThemeWasChanged)\n      }\n    }, [\n      initialThemeName,\n      isTopLevelProvider,\n      overrideThemeName,\n      parentTheme,\n      theme,\n    ])\n\n    const value = useMemo(\n      () => ({\n        themeName,\n        toggleTheme() {\n          setThemeName((themeName) => {\n            const newThemeName =\n              themeName === ThemeName.light ? ThemeName.dark : ThemeName.light\n            // note that we're writing cookie theme only on explicit calls,\n            // not on \"internal theme state\" change\n            updateGlobalTheme(newThemeName)\n            // we do not need to run setTheme here, as effect is triggered\n            return newThemeName\n          })\n        },\n      }),\n      [themeName],\n    )\n\n    if (isTopLevelProvider) {\n      // if this provider is top-level we rely on element-theme-script.tsx logic\n      // which defines data-lido-theme injection\n      return (\n        <ThemeToggleContext.Provider value={value}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </ThemeToggleContext.Provider>\n      )\n    } else if (overrideThemeName) {\n      return (\n        <div style={{ display: 'contents' }} data-lido-theme={themeName}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </div>\n      )\n    } else {\n      return <>{children}</>\n    }\n  },\n)\n\nCookieThemeProvider.displayName = 'CookieThemeProvider'\n"],"names":["defaultThemeContext","ThemeToggleContext","createContext","initColors","CookieThemeProvider","memo","children","initialThemeName","overrideThemeName","parentTheme","useContext","isTopLevelProvider","Object","keys","length","internalThemeName","setThemeName","useState","getThemeNameFromUrl","DEFAULT_THEME_NAME","themeName","theme","themeMap","useEffect","setTheme","systemThemeName","prefersDarkThemeMediaQuery","matches","ThemeName","dark","light","themeNameUrl","themeNameCookie","getThemeNameFromCookies","newThemeName","document","documentElement","dataset","lidoTheme","addEventListener","checkCookieThemeWasChanged","window","removeEventListener","value","useMemo","toggleTheme","updateGlobalTheme","_jsx","StyledThemeProvider","display","_Fragment","displayName"],"mappings":"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"}
+{"version":3,"file":"cookie-theme-provider.mjs","sources":["../../../packages/theme/cookie-theme-provider.tsx"],"sourcesContent":["import {\n  createContext,\n  FC,\n  memo,\n  PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport { ThemeProvider as StyledThemeProvider } from '../utils/styled-components-wrapper.js'\nimport {\n  DEFAULT_THEME_NAME,\n  prefersDarkThemeMediaQuery,\n  ThemeName,\n} from './constants.js'\nimport { themeMap } from './themes.js'\nimport { getThemeNameFromCookies } from './utils/cookies.js'\nimport { initColors } from './document-head-contents/index.js'\nimport {\n  getThemeNameFromUrl,\n  updateGlobalTheme,\n} from './document-head-contents/element-theme-script.js'\nimport { ThemeContext } from './types.js'\n\nconst defaultThemeContext = {} as ThemeContext\nexport const ThemeToggleContext =\n  createContext<ThemeContext>(defaultThemeContext)\n\n// we need to initialize this before react component code if we're using this provider or ThemeProvider\ninitColors()\n\n/**\n * This is really complicated logic here. Comments will be added on specific lines\n *\n * Cookie theme provider acts differently from common theme provider.\n * 1. it can be nested, BUT it should re-use value provided by itself for optimisation purposes\n * 2. if it is top-level, it is not altering itself, but instead altering theme behavior on HTMLElement level\n * 3. it does not support custom themes, preferring pre-defined themes instead\n * */\n\nexport const CookieThemeProvider: FC<\n  PropsWithChildren<{\n    // Use themeNameParent if you need get cookie in SSR\n    initialThemeName?: ThemeName\n    overrideThemeName?: ThemeName\n  }>\n> = memo(\n  ({\n    children,\n    initialThemeName,\n    // overrideThemeName is mainly used for storybook\n    overrideThemeName,\n  }) => {\n    const parentTheme = useContext(ThemeToggleContext)\n    // we do not want to do nested injections, and we're checking\n    // if context we inject in this component is already provided\n    const isTopLevelProvider = Object.keys(parentTheme).length === 0\n    // we always start with default theme, or, if server wants to provide\n    // specific default theme, with server-provided theme to avoid hydration errors\n    const [internalThemeName, setThemeName] = useState<ThemeName>(\n      initialThemeName || DEFAULT_THEME_NAME,\n    )\n    // since we're using this component to provide cookie-theme,\n    // we eventually want to respect theme provided in cookie, not general theme,\n    // so we're picking `parentTheme.themeName` if we have one.\n    // If user needs custom theme, not \"cookie theme\", he should use ThemeProvider instead.\n    const themeName = parentTheme.themeName || internalThemeName\n\n    const theme = themeMap[themeName]\n\n    // This logic is really hydrating everything, since we started with server-rendered default prop.\n    // It also follows cookie value change.\n    useEffect(() => {\n      // This logic is useless if we're nested - it is already done in top-level provider\n      if (!isTopLevelProvider) {\n        return\n      }\n\n      const setTheme = () => {\n        const systemThemeName = prefersDarkThemeMediaQuery?.matches\n          ? ThemeName.dark\n          : ThemeName.light\n        const themeNameUrl = getThemeNameFromUrl()\n        const themeNameCookie = getThemeNameFromCookies()\n        const newThemeName =\n          // first, if we have some override (e.g. in Storybook), we respect it\n          overrideThemeName ||\n          // url query has higher priority than cookie\n          themeNameUrl ||\n          // then, if we have cookie theme, we use theme from cookie\n          themeNameCookie ||\n          // else, we follow theme we were provided in initialization from server,\n          // which means server explicitly wants specific theme by default, not \"follow-system\"\n          initialThemeName ||\n          // then, we use media query theme, if available (not all browsers may still support it)\n          systemThemeName ||\n          // and, finally, falling back to default\n          DEFAULT_THEME_NAME\n        setThemeName(newThemeName)\n        // and when theme is switched, we're setting global-level CSS variable data-attribute\n        // to modify CSS vars provided on a top-level\n        document.documentElement.dataset.lidoTheme = newThemeName\n      }\n\n      // Users may have auto-theme (switching on sunset or schedule or whatever) so we need to listen for this event\n      prefersDarkThemeMediaQuery?.addEventListener('change', setTheme)\n      setTheme()\n\n      // This code check that the theme cookie was changed on other tab or site (the same second-level domain)\n      const checkCookieThemeWasChanged = () => {\n        const themeNameCookie = getThemeNameFromCookies()\n\n        if (\n          themeNameCookie &&\n          (themeNameCookie === ThemeName.dark ||\n            themeNameCookie === ThemeName.light)\n        ) {\n          setThemeName(themeNameCookie)\n        }\n      }\n      window.addEventListener('focus', checkCookieThemeWasChanged)\n\n      return () => {\n        window.removeEventListener('focus', checkCookieThemeWasChanged)\n      }\n    }, [\n      initialThemeName,\n      isTopLevelProvider,\n      overrideThemeName,\n      parentTheme,\n      theme,\n    ])\n\n    const value = useMemo(\n      () => ({\n        themeName,\n        toggleTheme() {\n          setThemeName((themeName) => {\n            const newThemeName =\n              themeName === ThemeName.light ? ThemeName.dark : ThemeName.light\n            // note that we're writing cookie theme only on explicit calls,\n            // not on \"internal theme state\" change\n            updateGlobalTheme(newThemeName)\n            // we do not need to run setTheme here, as effect is triggered\n            return newThemeName\n          })\n        },\n      }),\n      [themeName],\n    )\n\n    if (isTopLevelProvider) {\n      // if this provider is top-level we rely on element-theme-script.tsx logic\n      // which defines data-lido-theme injection\n      return (\n        <ThemeToggleContext.Provider value={value}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </ThemeToggleContext.Provider>\n      )\n    } else if (overrideThemeName) {\n      return (\n        <div style={{ display: 'contents' }} data-lido-theme={themeName}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </div>\n      )\n    } else {\n      return <>{children}</>\n    }\n  },\n)\n\nCookieThemeProvider.displayName = 'CookieThemeProvider'\n"],"names":["defaultThemeContext","ThemeToggleContext","createContext","initColors","CookieThemeProvider","memo","children","initialThemeName","overrideThemeName","parentTheme","useContext","isTopLevelProvider","Object","keys","length","internalThemeName","setThemeName","useState","DEFAULT_THEME_NAME","themeName","theme","themeMap","useEffect","setTheme","systemThemeName","prefersDarkThemeMediaQuery","matches","ThemeName","dark","light","themeNameUrl","getThemeNameFromUrl","themeNameCookie","getThemeNameFromCookies","newThemeName","document","documentElement","dataset","lidoTheme","addEventListener","checkCookieThemeWasChanged","window","removeEventListener","value","useMemo","toggleTheme","updateGlobalTheme","_jsx","StyledThemeProvider","display","_Fragment","displayName"],"mappings":"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"}

package/dist/esm/theme/document-head-contents/element-theme-script.mjs

@@ -1,5 +1,5 @@
 import { VOID_FN } from '../../utils/index.mjs';
-import { ThemeName, themeCookieKey } from '../constants.mjs';
+import { themeCookieKey, ThemeName } from '../constants.mjs';
 import { setThemeCookie } from '../utils/set-theme-cookie.mjs';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/types/styled-system/withStyledSystem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"withStyledSystem.d.ts","sourceRoot":"","sources":["../../../packages/styled-system/withStyledSystem.tsx"],"names":[],"mappings":"AAIA,OAAe,EACb,kBAAkB,EAClB,eAAe,EACf,6BAA6B,EAC7B,8BAA8B,EAC9B,yBAAyB,EACzB,YAAY,EACb,MAAM,uCAAuC,CAAA;AAe9C,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAE9C,aAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,iBAAiB,CAAC,GACxE,iBAAiB,CAAA;AAEnB,iBAAS,gBAAgB,CACvB,CAAC,SAAS,kBAAkB,EAC5B,CAAC,SAAS,MAAM,GAAG,YAAY,EAC/B,CAAC,SAAS,MAAM,GAAG,EAAE,EACrB,CAAC,SAAS,MAAM,GAAG,GAAG,KAAK,EAE3B,SAAS,EAAE,CAAC,GACX,eAAe,CAChB,6BAA6B,CAAC,CAAC,CAAC,EAChC,CAAC,EACD,gBAAgB,CAAC,CAAC,GAAG,8BAA8B,CAAC,CAAC,CAAC,CAAC,EACvD,CAAC,GAAG,yBAAyB,CAAC,CAAC,CAAC,CACjC,CAAA;AAED,iBAAS,gBAAgB,CACvB,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,aAAa,CAAC,GAAG,CAAC,EAC1D,CAAC,SAAS,MAAM,GAAG,YAAY,EAC/B,CAAC,SAAS,MAAM,GAAG,EAAE,EACrB,CAAC,SAAS,MAAM,GAAG,GAAG,KAAK,EAC3B,SAAS,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAqB9D,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"withStyledSystem.d.ts","sourceRoot":"","sources":["../../../packages/styled-system/withStyledSystem.tsx"],"names":[],"mappings":"AAIA,OAAe,EACb,kBAAkB,EAClB,eAAe,EACf,6BAA6B,EAC7B,8BAA8B,EAC9B,yBAAyB,EACzB,YAAY,EACb,MAAM,uCAAuC,CAAA;AAoB9C,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AACrC,OAAO,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAA;AAE9C,aAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI,IAAI,CAAC,CAAC,EAAE,MAAM,iBAAiB,CAAC,GACxE,iBAAiB,CAAA;AAEnB,iBAAS,gBAAgB,CACvB,CAAC,SAAS,kBAAkB,EAC5B,CAAC,SAAS,MAAM,GAAG,YAAY,EAC/B,CAAC,SAAS,MAAM,GAAG,EAAE,EACrB,CAAC,SAAS,MAAM,GAAG,GAAG,KAAK,EAE3B,SAAS,EAAE,CAAC,GACX,eAAe,CAChB,6BAA6B,CAAC,CAAC,CAAC,EAChC,CAAC,EACD,gBAAgB,CAAC,CAAC,GAAG,8BAA8B,CAAC,CAAC,CAAC,CAAC,EACvD,CAAC,GAAG,yBAAyB,CAAC,CAAC,CAAC,CACjC,CAAA;AAED,iBAAS,gBAAgB,CACvB,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,aAAa,CAAC,GAAG,CAAC,EAC1D,CAAC,SAAS,MAAM,GAAG,YAAY,EAC/B,CAAC,SAAS,MAAM,GAAG,EAAE,EACrB,CAAC,SAAS,MAAM,GAAG,GAAG,KAAK,EAC3B,SAAS,EAAE,CAAC,GAAG,eAAe,CAAC,CAAC,EAAE,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;AAqB9D,eAAe,gBAAgB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lidofinance/lido-ui",
-  "version": "3.18.0",
+  "version": "3.18.2",
   "homepage": "https://github.com/lidofinance/ui",
   "repository": {
     "type": "git",