@lidofinance/lido-ui 3.0.0-next.4 → 3.0.0-next.7

package/dist/cjs/cookie-theme-toggler/src/cookie-theme-toggler.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "ThemeToggler", {
     enumerable: true,
     get: ()=>ThemeToggler
 });
-const _icons = require("../../icons/src/index");
 const _styles = require("./styles");
-const _hooks = require("./hooks");
+const _icons = require("../../icons/src/index");
+const _theme = require("../../theme/src/index");
 const ThemeToggler = ()=>{
-    const { toggleTheme , themeName  } = (0, _hooks.useThemeToggle)();
+    const { toggleTheme  } = (0, _theme.useThemeToggle)();
     return /*#__PURE__*/ React.createElement(_styles.CookieThemeTogglerStyle, {
         color: "secondary",
         onClick: toggleTheme
-    }, themeName === 'dark' ? /*#__PURE__*/ React.createElement(_icons.Light, null) : /*#__PURE__*/ React.createElement(_icons.Dark, null));
+    }, /*#__PURE__*/ React.createElement(_styles.DarkWrapper, null, /*#__PURE__*/ React.createElement(_icons.Dark, null)), /*#__PURE__*/ React.createElement(_styles.LightWrapper, null, /*#__PURE__*/ React.createElement(_icons.Light, null)));
 };
 
 //# sourceMappingURL=cookie-theme-toggler.js.map

package/dist/cjs/cookie-theme-toggler/src/cookie-theme-toggler.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/cookie-theme-toggler.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { Dark, Light } from '@lidofinance/icons'\nimport { CookieThemeTogglerStyle } from './styles'\nimport { useThemeToggle } from './hooks'\n\nexport const ThemeToggler: FC = () => {\n  const { toggleTheme, themeName } = useThemeToggle()\n\n  return (\n    <CookieThemeTogglerStyle color='secondary' onClick={toggleTheme}>\n      {themeName === 'dark' ? <Light /> : <Dark />}\n    </CookieThemeTogglerStyle>\n  )\n}\n"],"names":["ThemeToggler","toggleTheme","themeName","useThemeToggle","CookieThemeTogglerStyle","color","onClick","Light","Dark"],"mappings":"AAAA;;;;+BAKaA,cAAY;;aAAZA,YAAY;;uBAJG,uBAAoB;wBACR,UAAU;uBACnB,SAAS;AAEjC,MAAMA,YAAY,GAAO,IAAM;IACpC,MAAM,EAAEC,WAAW,CAAA,EAAEC,SAAS,CAAA,EAAE,GAAGC,IAAAA,MAAc,eAAA,GAAE;IAEnD,qBACE,oBAACC,OAAuB,wBAAA;QAACC,KAAK,EAAC,WAAW;QAACC,OAAO,EAAEL,WAAW;OAC5DC,SAAS,KAAK,MAAM,iBAAG,oBAACK,MAAK,MAAA,OAAG,iBAAG,oBAACC,MAAI,KAAA,OAAG,CACpB,CAC3B;AACH,CAAC"}
+{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/cookie-theme-toggler.tsx"],"sourcesContent":["import { FC } from 'react'\nimport { CookieThemeTogglerStyle, DarkWrapper, LightWrapper } from './styles'\nimport { Dark, Light } from '@lidofinance/icons'\nimport { useThemeToggle } from '@lidofinance/theme'\n\nexport const ThemeToggler: FC = () => {\n  const { toggleTheme } = useThemeToggle()\n\n  return (\n    <CookieThemeTogglerStyle color='secondary' onClick={toggleTheme}>\n      <DarkWrapper>\n        <Dark />\n      </DarkWrapper>\n      <LightWrapper>\n        <Light />\n      </LightWrapper>\n    </CookieThemeTogglerStyle>\n  )\n}\n"],"names":["ThemeToggler","toggleTheme","useThemeToggle","CookieThemeTogglerStyle","color","onClick","DarkWrapper","Dark","LightWrapper","Light"],"mappings":"AAAA;;;;+BAKaA,cAAY;;aAAZA,YAAY;;wBAJ0C,UAAU;uBACjD,uBAAoB;uBACjB,uBAAoB;AAE5C,MAAMA,YAAY,GAAO,IAAM;IACpC,MAAM,EAAEC,WAAW,CAAA,EAAE,GAAGC,IAAAA,MAAc,eAAA,GAAE;IAExC,qBACE,oBAACC,OAAuB,wBAAA;QAACC,KAAK,EAAC,WAAW;QAACC,OAAO,EAAEJ,WAAW;qBAC7D,oBAACK,OAAW,YAAA,sBACV,oBAACC,MAAI,KAAA,OAAG,CACI,gBACd,oBAACC,OAAY,aAAA,sBACX,oBAACC,MAAK,MAAA,OAAG,CACI,CACS,CAC3B;AACH,CAAC"}

package/dist/cjs/cookie-theme-toggler/src/index.js

@@ -3,8 +3,6 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./cookie-theme-provider"), exports);
 _exportStar(require("./cookie-theme-toggler"), exports);
-_exportStar(require("./hooks"), exports);
 
 //# sourceMappingURL=index.js.map

package/dist/cjs/cookie-theme-toggler/src/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/index.ts"],"sourcesContent":["export * from './cookie-theme-provider'\nexport * from './cookie-theme-toggler'\nexport * from './hooks'\n"],"names":[],"mappings":"AAAA;;;;;oBAAc,yBAAyB;oBACzB,wBAAwB;oBACxB,SAAS"}
+{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/index.ts"],"sourcesContent":["export * from './cookie-theme-toggler'\n"],"names":[],"mappings":"AAAA;;;;;oBAAc,wBAAwB"}

package/dist/cjs/cookie-theme-toggler/src/styles.js

@@ -2,9 +2,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "CookieThemeTogglerStyle", {
-    enumerable: true,
-    get: ()=>CookieThemeTogglerStyle
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    CookieThemeTogglerStyle: ()=>CookieThemeTogglerStyle,
+    IconWrapper: ()=>IconWrapper,
+    LightWrapper: ()=>LightWrapper,
+    DarkWrapper: ()=>DarkWrapper
 });
 const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
 const _styledComponents = /*#__PURE__*/ _interopRequireDefault(require("styled-components"));
@@ -22,6 +30,20 @@ const CookieThemeTogglerStyle = (0, _styledComponents.default)(_button.Button).a
   padding-right: 10px;
   line-height: 0;
   font-size: 0;
+
+  width: 44px;
+  height: 44px;
+`;
+const IconWrapper = _styledComponents.default.span`
+  position: absolute;
+  top: -12px;
+  left: -12px;
+`;
+const LightWrapper = (0, _styledComponents.default)(IconWrapper)`
+  visibility: var(--lido-color-lightModeVisibility);
+`;
+const DarkWrapper = (0, _styledComponents.default)(IconWrapper)`
+  visibility: var(--lido-color-darkModeVisibility);
 `;
 
 //# sourceMappingURL=styles.js.map

package/dist/cjs/cookie-theme-toggler/src/styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/styles.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport { Button } from '@lidofinance/button'\n\nexport const CookieThemeTogglerStyle = styled(Button).attrs({\n  variant: 'text',\n  size: 'xs',\n})`\n  min-width: 0;\n  margin-left: ${({ theme }) => theme.spaceMap.sm}px;\n  padding-left: 10px;\n  padding-right: 10px;\n  line-height: 0;\n  font-size: 0;\n`\n"],"names":["CookieThemeTogglerStyle","styled","Button","attrs","variant","size","theme","spaceMap","sm"],"mappings":"AAAA;;;;+BAGaA,yBAAuB;;aAAvBA,uBAAuB;;;uEAHjB,mBAAmB;wBACf,wBAAqB;AAErC,MAAMA,uBAAuB,GAAGC,IAAAA,iBAAM,QAAA,EAACC,OAAM,OAAA,CAAC,CAACC,KAAK,CAAC;IAC1DC,OAAO,EAAE,MAAM;IACfC,IAAI,EAAE,IAAI;CACX,CAAC,CAAC;;eAEY,EAAE,SAAeC;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACC,QAAQ,CAACC,EAAE;AAAD,CAAC,CAAC;;;;;AAKlD,CAAC"}
+{"version":3,"sources":["../../../../packages/cookie-theme-toggler/src/styles.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport { Button } from '@lidofinance/button'\n\nexport const CookieThemeTogglerStyle = styled(Button).attrs({\n  variant: 'text',\n  size: 'xs',\n})`\n  min-width: 0;\n  margin-left: ${({ theme }) => theme.spaceMap.sm}px;\n  padding-left: 10px;\n  padding-right: 10px;\n  line-height: 0;\n  font-size: 0;\n\n  width: 44px;\n  height: 44px;\n`\n\nexport const IconWrapper = styled.span`\n  position: absolute;\n  top: -12px;\n  left: -12px;\n`\n\nexport const LightWrapper = styled(IconWrapper)`\n  visibility: var(--lido-color-lightModeVisibility);\n`\n\nexport const DarkWrapper = styled(IconWrapper)`\n  visibility: var(--lido-color-darkModeVisibility);\n`\n"],"names":["CookieThemeTogglerStyle","IconWrapper","LightWrapper","DarkWrapper","styled","Button","attrs","variant","size","theme","spaceMap","sm","span"],"mappings":"AAAA;;;;;;;;;;;IAGaA,uBAAuB,MAAvBA,uBAAuB;IAevBC,WAAW,MAAXA,WAAW;IAMXC,YAAY,MAAZA,YAAY;IAIZC,WAAW,MAAXA,WAAW;;;uEA5BL,mBAAmB;wBACf,wBAAqB;AAErC,MAAMH,uBAAuB,GAAGI,IAAAA,iBAAM,QAAA,EAACC,OAAM,OAAA,CAAC,CAACC,KAAK,CAAC;IAC1DC,OAAO,EAAE,MAAM;IACfC,IAAI,EAAE,IAAI;CACX,CAAC,CAAC;;eAEY,EAAE,SAAeC;QAAd,EAAEA,KAAK,CAAA,EAAE;WAAKA,KAAK,CAACC,QAAQ,CAACC,EAAE;AAAD,CAAC,CAAC;;;;;;;;AAQlD,CAAC;AAEM,MAAMV,WAAW,GAAGG,iBAAM,QAAA,CAACQ,IAAI,CAAC;;;;AAIvC,CAAC;AAEM,MAAMV,YAAY,GAAGE,IAAAA,iBAAM,QAAA,EAACH,WAAW,CAAC,CAAC;;AAEhD,CAAC;AAEM,MAAME,WAAW,GAAGC,IAAAA,iBAAM,QAAA,EAACH,WAAW,CAAC,CAAC;;AAE/C,CAAC"}

package/dist/cjs/hooks/src/useSystemTheme.js

@@ -14,7 +14,7 @@ const useSystemTheme = ()=>{
         const mql = window.matchMedia('(prefers-color-scheme: dark)');
         const setThemeFromQuery = (param)=>{
             let { matches  } = param;
-            setSystemTheme(matches ? _theme.THEME.dark : _theme.THEME.light);
+            setSystemTheme(matches ? _theme.ThemeName.dark : _theme.ThemeName.light);
         };
         mql.addEventListener('change', setThemeFromQuery);
         setThemeFromQuery(mql);

package/dist/cjs/hooks/src/useSystemTheme.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/hooks/src/useSystemTheme.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { THEME } from '@lidofinance/theme'\n\nexport const useSystemTheme = (): THEME | undefined => {\n  const [systemTheme, setSystemTheme] = useState<THEME>()\n\n  useEffect(() => {\n    const mql = window.matchMedia('(prefers-color-scheme: dark)')\n\n    const setThemeFromQuery = ({ matches }: { matches: boolean }) => {\n      setSystemTheme(matches ? THEME.dark : THEME.light)\n    }\n\n    mql.addEventListener('change', setThemeFromQuery)\n    setThemeFromQuery(mql)\n\n    return () => {\n      mql.removeEventListener('change', setThemeFromQuery)\n    }\n  }, [])\n\n  return systemTheme\n}\n"],"names":["useSystemTheme","systemTheme","setSystemTheme","useState","useEffect","mql","window","matchMedia","setThemeFromQuery","matches","THEME","dark","light","addEventListener","removeEventListener"],"mappings":"AAAA;;;;+BAIaA,gBAAc;;aAAdA,cAAc;;uBAJS,OAAO;uBAErB,uBAAoB;AAEnC,MAAMA,cAAc,GAAG,IAAyB;IACrD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,IAAAA,MAAQ,SAAA,GAAS;IAEvDC,IAAAA,MAAS,UAAA,EAAC,IAAM;QACd,MAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC;QAE7D,MAAMC,iBAAiB,GAAG,SAAuC;gBAAtC,EAAEC,OAAO,CAAA,EAAwB;YAC1DP,cAAc,CAACO,OAAO,GAAGC,MAAK,MAAA,CAACC,IAAI,GAAGD,MAAK,MAAA,CAACE,KAAK,CAAC;QACpD,CAAC;QAEDP,GAAG,CAACQ,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;QACjDA,iBAAiB,CAACH,GAAG,CAAC;QAEtB,OAAO,IAAM;YACXA,GAAG,CAACS,mBAAmB,CAAC,QAAQ,EAAEN,iBAAiB,CAAC;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,OAAOP,WAAW,CAAA;AACpB,CAAC"}
+{"version":3,"sources":["../../../../packages/hooks/src/useSystemTheme.ts"],"sourcesContent":["import { useEffect, useState } from 'react'\n\nimport { ThemeName } from '@lidofinance/theme'\n\nexport const useSystemTheme = (): ThemeName | undefined => {\n  const [systemTheme, setSystemTheme] = useState<ThemeName>()\n\n  useEffect(() => {\n    const mql = window.matchMedia('(prefers-color-scheme: dark)')\n\n    const setThemeFromQuery = ({ matches }: { matches: boolean }) => {\n      setSystemTheme(matches ? ThemeName.dark : ThemeName.light)\n    }\n\n    mql.addEventListener('change', setThemeFromQuery)\n    setThemeFromQuery(mql)\n\n    return () => {\n      mql.removeEventListener('change', setThemeFromQuery)\n    }\n  }, [])\n\n  return systemTheme\n}\n"],"names":["useSystemTheme","systemTheme","setSystemTheme","useState","useEffect","mql","window","matchMedia","setThemeFromQuery","matches","ThemeName","dark","light","addEventListener","removeEventListener"],"mappings":"AAAA;;;;+BAIaA,gBAAc;;aAAdA,cAAc;;uBAJS,OAAO;uBAEjB,uBAAoB;AAEvC,MAAMA,cAAc,GAAG,IAA6B;IACzD,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGC,IAAAA,MAAQ,SAAA,GAAa;IAE3DC,IAAAA,MAAS,UAAA,EAAC,IAAM;QACd,MAAMC,GAAG,GAAGC,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC;QAE7D,MAAMC,iBAAiB,GAAG,SAAuC;gBAAtC,EAAEC,OAAO,CAAA,EAAwB;YAC1DP,cAAc,CAACO,OAAO,GAAGC,MAAS,UAAA,CAACC,IAAI,GAAGD,MAAS,UAAA,CAACE,KAAK,CAAC;QAC5D,CAAC;QAEDP,GAAG,CAACQ,gBAAgB,CAAC,QAAQ,EAAEL,iBAAiB,CAAC;QACjDA,iBAAiB,CAACH,GAAG,CAAC;QAEtB,OAAO,IAAM;YACXA,GAAG,CAACS,mBAAmB,CAAC,QAAQ,EAAEN,iBAAiB,CAAC;QACtD,CAAC,CAAA;IACH,CAAC,EAAE,EAAE,CAAC;IAEN,OAAOP,WAAW,CAAA;AACpB,CAAC"}

package/dist/cjs/loaders/src/InlineLoaderStyles.js

@@ -21,8 +21,8 @@ const translation = (0, _styledComponents.keyframes)`
 `;
 const InlineLoaderStyle = _styledComponents.default.span`
   --loader-color: ${(param)=>{
-    let { theme , $color  } = param;
-    return $color ? theme.colors[$color] : 'currentColor';
+    let { $color  } = param;
+    return $color ? `var(--lido-color-${$color})` : 'currentColor';
 }};
 
   width: 100%;

package/dist/cjs/loaders/src/InlineLoaderStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/loaders/src/InlineLoaderStyles.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\nimport { InlineLoaderColors } from './types'\n\nexport const translation = keyframes`\n  100% {\n    background-position: 0 0;\n  }\n`\n\nexport const InlineLoaderStyle = styled.span<{ $color?: InlineLoaderColors }>`\n  --loader-color: ${({ theme, $color }) =>\n    $color ? theme.colors[$color] : 'currentColor'};\n\n  width: 100%;\n  display: inline-block;\n  vertical-align: top;\n  border-radius: 1000px;\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  opacity: 0.05;\n  animation: ${translation} 2s infinite;\n  background-size: 300% 100%;\n  background-position: 100% 0;\n  background-image: linear-gradient(\n    90deg,\n    var(--loader-color) 0,\n    var(--loader-color) 33.33%,\n    transparent 44.44%,\n    transparent 55.55%,\n    var(--loader-color) 66.66%,\n    var(--loader-color) 100%\n  );\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background: var(--loader-color);\n    opacity: 0.2;\n  }\n`\n"],"names":["translation","InlineLoaderStyle","keyframes","styled","span","$color","theme","colors"],"mappings":"AAAA;;;;;;;;;;;IAGaA,WAAW,MAAXA,WAAW;IAMXC,iBAAiB,MAAjBA,iBAAiB;;;wEATI,mBAAmB;AAG9C,MAAMD,WAAW,GAAGE,IAAAA,iBAAS,UAAA,CAAA,CAAC;;;;AAIrC,CAAC;AAEM,MAAMD,iBAAiB,GAAGE,iBAAM,QAAA,CAACC,IAAI,AAAiC,CAAC;kBAC5D,EAAE,SAChBC;QADiB,EAAEC,KAAK,CAAA,EAAED,MAAM,CAAA,EAAE;WAClCA,MAAM,GAAGC,KAAK,CAACC,MAAM,CAACF,MAAM,CAAC,GAAG,cAAc;AAAD,CAAC,CAAC;;;;;;;;;;aAUtC,EAAEL,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;AAuB3B,CAAC"}
+{"version":3,"sources":["../../../../packages/loaders/src/InlineLoaderStyles.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\nimport { InlineLoaderColors } from './types'\n\nexport const translation = keyframes`\n  100% {\n    background-position: 0 0;\n  }\n`\n\nexport const InlineLoaderStyle = styled.span<{ $color?: InlineLoaderColors }>`\n  --loader-color: ${({ $color }) =>\n    $color ? `var(--lido-color-${$color})` : 'currentColor'};\n\n  width: 100%;\n  display: inline-block;\n  vertical-align: top;\n  border-radius: 1000px;\n  position: relative;\n  overflow: hidden;\n  user-select: none;\n  opacity: 0.05;\n  animation: ${translation} 2s infinite;\n  background-size: 300% 100%;\n  background-position: 100% 0;\n  background-image: linear-gradient(\n    90deg,\n    var(--loader-color) 0,\n    var(--loader-color) 33.33%,\n    transparent 44.44%,\n    transparent 55.55%,\n    var(--loader-color) 66.66%,\n    var(--loader-color) 100%\n  );\n\n  &:after {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background: var(--loader-color);\n    opacity: 0.2;\n  }\n`\n"],"names":["translation","InlineLoaderStyle","keyframes","styled","span","$color"],"mappings":"AAAA;;;;;;;;;;;IAGaA,WAAW,MAAXA,WAAW;IAMXC,iBAAiB,MAAjBA,iBAAiB;;;wEATI,mBAAmB;AAG9C,MAAMD,WAAW,GAAGE,IAAAA,iBAAS,UAAA,CAAA,CAAC;;;;AAIrC,CAAC;AAEM,MAAMD,iBAAiB,GAAGE,iBAAM,QAAA,CAACC,IAAI,AAAiC,CAAC;kBAC5D,EAAE,SAChBC;QADiB,EAAEA,MAAM,CAAA,EAAE;WAC3BA,MAAM,GAAG,CAAC,iBAAiB,EAAEA,MAAM,CAAC,CAAC,CAAC,GAAG,cAAc;AAAD,CAAC,CAAC;;;;;;;;;;aAU/C,EAAEL,WAAW,CAAC;;;;;;;;;;;;;;;;;;;;;;;AAuB3B,CAAC"}

package/dist/cjs/loaders/src/LoaderStyles.js

@@ -28,8 +28,8 @@ const LoaderStyle = _styledComponents.default.div`
   width: ${(props)=>props.$size}px;
   height: ${(props)=>props.$size}px;
   color: ${(param)=>{
-    let { theme , $color  } = param;
-    return theme.colors[$color];
+    let { $color  } = param;
+    return `var(--lido-color-${$color})`;
 }};
 `;
 const LoaderCircleBgStyle = _styledComponents.default.circle`

package/dist/cjs/loaders/src/LoaderStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/loaders/src/LoaderStyles.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\nimport { LoaderColors } from './types'\n\nexport const rotation = keyframes`\n  100% {\n    transform: rotate(360deg);\n  }\n`\n\nexport const LoaderStyle = styled.div<{\n  $size: number\n  $color: LoaderColors\n}>`\n  margin: 0;\n  padding: 0;\n  line-height: 0;\n  width: ${(props) => props.$size}px;\n  height: ${(props) => props.$size}px;\n  color: ${({ theme, $color }) => theme.colors[$color]};\n`\n\nexport const LoaderCircleBgStyle = styled.circle<{ $thickness: number }>`\n  fill: none;\n  stroke: currentColor;\n  stroke-width: ${(props) => props.$thickness};\n  opacity: 0.2;\n`\n\nexport const LoaderCircleFgStyle = styled.circle<{\n  $thickness: number\n  r: number\n}>`\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: ${(props) => props.$thickness};\n  stroke-dasharray: ${(props) => {\n    const circumference = 2 * props.r * Math.PI\n    const filledPart = 0.25\n\n    return `${circumference * filledPart} ${circumference * (1 - filledPart)}`\n  }};\n  transform: rotate(0deg);\n  transform-origin: 50% 50%;\n  animation: ${rotation} 1.4s linear infinite;\n`\n"],"names":["rotation","LoaderStyle","LoaderCircleBgStyle","LoaderCircleFgStyle","keyframes","styled","div","props","$size","theme","$color","colors","circle","$thickness","circumference","r","Math","PI","filledPart"],"mappings":"AAAA;;;;;;;;;;;IAGaA,QAAQ,MAARA,QAAQ;IAMRC,WAAW,MAAXA,WAAW;IAYXC,mBAAmB,MAAnBA,mBAAmB;IAOnBC,mBAAmB,MAAnBA,mBAAmB;;;wEA5BE,mBAAmB;AAG9C,MAAMH,QAAQ,GAAGI,IAAAA,iBAAS,UAAA,CAAA,CAAC;;;;AAIlC,CAAC;AAEM,MAAMH,WAAW,GAAGI,iBAAM,QAAA,CAACC,GAAG,AAGnC,CAAC;;;;SAIM,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,KAAK,CAAC;UACxB,EAAE,CAACD,KAAK,GAAKA,KAAK,CAACC,KAAK,CAAC;SAC1B,EAAE,SAAuBC;QAAtB,EAAEA,KAAK,CAAA,EAAEC,MAAM,CAAA,EAAE;WAAKD,KAAK,CAACE,MAAM,CAACD,MAAM,CAAC;AAAD,CAAC,CAAC;AACvD,CAAC;AAEM,MAAMR,mBAAmB,GAAGG,iBAAM,QAAA,CAACO,MAAM,AAAwB,CAAC;;;gBAGzD,EAAE,CAACL,KAAK,GAAKA,KAAK,CAACM,UAAU,CAAC;;AAE9C,CAAC;AAEM,MAAMV,mBAAmB,GAAGE,iBAAM,QAAA,CAACO,MAAM,AAG9C,CAAC;;;;gBAIa,EAAE,CAACL,KAAK,GAAKA,KAAK,CAACM,UAAU,CAAC;oBAC1B,EAAE,CAACN,KAAK,GAAK;IAC7B,MAAMO,aAAa,GAAG,CAAC,GAAGP,KAAK,CAACQ,CAAC,GAAGC,IAAI,CAACC,EAAE;IAC3C,MAAMC,UAAU,GAAG,IAAI;IAEvB,OAAO,CAAC,EAAEJ,aAAa,GAAGI,UAAU,CAAC,CAAC,EAAEJ,aAAa,GAAG,CAAC,CAAC,GAAGI,UAAU,CAAC,CAAC,CAAC,CAAA;AAC5E,CAAC,CAAC;;;aAGS,EAAElB,QAAQ,CAAC;AACxB,CAAC"}
+{"version":3,"sources":["../../../../packages/loaders/src/LoaderStyles.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components'\nimport { LoaderColors } from './types'\n\nexport const rotation = keyframes`\n  100% {\n    transform: rotate(360deg);\n  }\n`\n\nexport const LoaderStyle = styled.div<{\n  $size: number\n  $color: LoaderColors\n}>`\n  margin: 0;\n  padding: 0;\n  line-height: 0;\n  width: ${(props) => props.$size}px;\n  height: ${(props) => props.$size}px;\n  color: ${({ $color }) => `var(--lido-color-${$color})`};\n`\n\nexport const LoaderCircleBgStyle = styled.circle<{ $thickness: number }>`\n  fill: none;\n  stroke: currentColor;\n  stroke-width: ${(props) => props.$thickness};\n  opacity: 0.2;\n`\n\nexport const LoaderCircleFgStyle = styled.circle<{\n  $thickness: number\n  r: number\n}>`\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: ${(props) => props.$thickness};\n  stroke-dasharray: ${(props) => {\n    const circumference = 2 * props.r * Math.PI\n    const filledPart = 0.25\n\n    return `${circumference * filledPart} ${circumference * (1 - filledPart)}`\n  }};\n  transform: rotate(0deg);\n  transform-origin: 50% 50%;\n  animation: ${rotation} 1.4s linear infinite;\n`\n"],"names":["rotation","LoaderStyle","LoaderCircleBgStyle","LoaderCircleFgStyle","keyframes","styled","div","props","$size","$color","circle","$thickness","circumference","r","Math","PI","filledPart"],"mappings":"AAAA;;;;;;;;;;;IAGaA,QAAQ,MAARA,QAAQ;IAMRC,WAAW,MAAXA,WAAW;IAYXC,mBAAmB,MAAnBA,mBAAmB;IAOnBC,mBAAmB,MAAnBA,mBAAmB;;;wEA5BE,mBAAmB;AAG9C,MAAMH,QAAQ,GAAGI,IAAAA,iBAAS,UAAA,CAAA,CAAC;;;;AAIlC,CAAC;AAEM,MAAMH,WAAW,GAAGI,iBAAM,QAAA,CAACC,GAAG,AAGnC,CAAC;;;;SAIM,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,KAAK,CAAC;UACxB,EAAE,CAACD,KAAK,GAAKA,KAAK,CAACC,KAAK,CAAC;SAC1B,EAAE,SAAgB;QAAf,EAAEC,MAAM,CAAA,EAAE;WAAK,CAAC,iBAAiB,EAAEA,MAAM,CAAC,CAAC,CAAC;AAAD,CAAC,CAAC;AACzD,CAAC;AAEM,MAAMP,mBAAmB,GAAGG,iBAAM,QAAA,CAACK,MAAM,AAAwB,CAAC;;;gBAGzD,EAAE,CAACH,KAAK,GAAKA,KAAK,CAACI,UAAU,CAAC;;AAE9C,CAAC;AAEM,MAAMR,mBAAmB,GAAGE,iBAAM,QAAA,CAACK,MAAM,AAG9C,CAAC;;;;gBAIa,EAAE,CAACH,KAAK,GAAKA,KAAK,CAACI,UAAU,CAAC;oBAC1B,EAAE,CAACJ,KAAK,GAAK;IAC7B,MAAMK,aAAa,GAAG,CAAC,GAAGL,KAAK,CAACM,CAAC,GAAGC,IAAI,CAACC,EAAE;IAC3C,MAAMC,UAAU,GAAG,IAAI;IAEvB,OAAO,CAAC,EAAEJ,aAAa,GAAGI,UAAU,CAAC,CAAC,EAAEJ,aAAa,GAAG,CAAC,CAAC,GAAGI,UAAU,CAAC,CAAC,CAAC,CAAA;AAC5E,CAAC,CAAC;;;aAGS,EAAEhB,QAAQ,CAAC;AACxB,CAAC"}

package/dist/cjs/theme/src/base/colors.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "default", {
     get: ()=>_default
 });
 const colors = {
+    darkThemeOpacity: '0',
+    lightThemeOpacity: '1',
     primary: '#00a3ff',
     primaryHover: '#009bf2',
     primaryContrast: '#fff',

package/dist/cjs/theme/src/base/colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../packages/theme/src/base/colors.ts"],"sourcesContent":["const colors = {\n  primary: '#00a3ff',\n  primaryHover: '#009bf2',\n  primaryContrast: '#fff',\n  primaryVisited: '#4bbeff',\n\n  accent: '#27272e',\n  accentContrast: '#fff',\n  accentContrastSecondary: 'rgba(255, 255, 255, 0.6)',\n  accentDarken: 'rgba(0, 0, 0, .2)',\n  accentControlBg: 'rgba(0, 0, 0, .1)',\n  accentBorder: 'rgba(255, 255, 255, 0.2)',\n  accentBorderHover: 'rgba(255, 255, 255, 0.3)',\n\n  error: '#e14d4d',\n  errorHover: '#d44c4d',\n  errorContrast: '#fff',\n\n  warning: '#EC8600',\n  warningHover: '#f0a431',\n  warningContrast: '#fff',\n\n  success: '#53BA95',\n  successHover: '#5dae5e',\n  successContrast: '#fff',\n} as const\n\nexport default { colors }\n"],"names":["colors","primary","primaryHover","primaryContrast","primaryVisited","accent","accentContrast","accentContrastSecondary","accentDarken","accentControlBg","accentBorder","accentBorderHover","error","errorHover","errorContrast","warning","warningHover","warningContrast","success","successHover","successContrast"],"mappings":"AAAA;;;;+BA2BA,SAAyB;;aAAzB,QAAyB;;AA3BzB,MAAMA,MAAM,GAAG;IACbC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,SAAS;IAEzBC,MAAM,EAAE,SAAS;IACjBC,cAAc,EAAE,MAAM;IACtBC,uBAAuB,EAAE,0BAA0B;IACnDC,YAAY,EAAE,mBAAmB;IACjCC,eAAe,EAAE,mBAAmB;IACpCC,YAAY,EAAE,0BAA0B;IACxCC,iBAAiB,EAAE,0BAA0B;IAE7CC,KAAK,EAAE,SAAS;IAChBC,UAAU,EAAE,SAAS;IACrBC,aAAa,EAAE,MAAM;IAErBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IAEvBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;CACxB,AAAS;MAEV,QAAyB,GAAV;IAAEpB,MAAM;CAAE"}
+{"version":3,"sources":["../../../../../packages/theme/src/base/colors.ts"],"sourcesContent":["const colors = {\n  darkThemeOpacity: '0',\n  lightThemeOpacity: '1',\n  primary: '#00a3ff',\n  primaryHover: '#009bf2',\n  primaryContrast: '#fff',\n  primaryVisited: '#4bbeff',\n\n  accent: '#27272e',\n  accentContrast: '#fff',\n  accentContrastSecondary: 'rgba(255, 255, 255, 0.6)',\n  accentDarken: 'rgba(0, 0, 0, .2)',\n  accentControlBg: 'rgba(0, 0, 0, .1)',\n  accentBorder: 'rgba(255, 255, 255, 0.2)',\n  accentBorderHover: 'rgba(255, 255, 255, 0.3)',\n\n  error: '#e14d4d',\n  errorHover: '#d44c4d',\n  errorContrast: '#fff',\n\n  warning: '#EC8600',\n  warningHover: '#f0a431',\n  warningContrast: '#fff',\n\n  success: '#53BA95',\n  successHover: '#5dae5e',\n  successContrast: '#fff',\n} as const\n\nexport default { colors }\n"],"names":["colors","darkThemeOpacity","lightThemeOpacity","primary","primaryHover","primaryContrast","primaryVisited","accent","accentContrast","accentContrastSecondary","accentDarken","accentControlBg","accentBorder","accentBorderHover","error","errorHover","errorContrast","warning","warningHover","warningContrast","success","successHover","successContrast"],"mappings":"AAAA;;;;+BA6BA,SAAyB;;aAAzB,QAAyB;;AA7BzB,MAAMA,MAAM,GAAG;IACbC,gBAAgB,EAAE,GAAG;IACrBC,iBAAiB,EAAE,GAAG;IACtBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IACvBC,cAAc,EAAE,SAAS;IAEzBC,MAAM,EAAE,SAAS;IACjBC,cAAc,EAAE,MAAM;IACtBC,uBAAuB,EAAE,0BAA0B;IACnDC,YAAY,EAAE,mBAAmB;IACjCC,eAAe,EAAE,mBAAmB;IACpCC,YAAY,EAAE,0BAA0B;IACxCC,iBAAiB,EAAE,0BAA0B;IAE7CC,KAAK,EAAE,SAAS;IAChBC,UAAU,EAAE,SAAS;IACrBC,aAAa,EAAE,MAAM;IAErBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;IAEvBC,OAAO,EAAE,SAAS;IAClBC,YAAY,EAAE,SAAS;IACvBC,eAAe,EAAE,MAAM;CACxB,AAAS;MAEV,QAAyB,GAAV;IAAEtB,MAAM;CAAE"}

package/dist/cjs/theme/src/constants.js

@@ -9,18 +9,23 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    THEME: ()=>THEME,
-    LIGHT: ()=>LIGHT,
-    DARK: ()=>DARK,
-    DEFAULT_THEME_NAME: ()=>DEFAULT_THEME_NAME
+    ThemeName: ()=>ThemeName,
+    DEFAULT_THEME_NAME: ()=>DEFAULT_THEME_NAME,
+    themeCookieKey: ()=>themeCookieKey,
+    globalStyleDataAttribute: ()=>globalStyleDataAttribute,
+    themeCookieExpire: ()=>themeCookieExpire,
+    prefersDarkThemeMediaQuery: ()=>prefersDarkThemeMediaQuery
 });
-const LIGHT = 'light';
-const DARK = 'dark';
-var THEME;
-(function(THEME) {
-    THEME["light"] = "light";
-    THEME["dark"] = "dark";
-})(THEME || (THEME = {}));
-const DEFAULT_THEME_NAME = THEME.light;
+var ref;
+var ThemeName;
+(function(ThemeName) {
+    ThemeName["light"] = "light";
+    ThemeName["dark"] = "dark";
+})(ThemeName || (ThemeName = {}));
+const DEFAULT_THEME_NAME = ThemeName.light;
+const themeCookieKey = 'lido-theme-manual';
+const globalStyleDataAttribute = 'data-lido-ui-global-style';
+const themeCookieExpire = 365;
+const prefersDarkThemeMediaQuery = window === null || window === void 0 ? void 0 : (ref = window.matchMedia) === null || ref === void 0 ? void 0 : ref.call(window, '(prefers-color-scheme: dark)');
 
 //# sourceMappingURL=constants.js.map

package/dist/cjs/theme/src/constants.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../packages/theme/src/constants.ts"],"sourcesContent":["export const LIGHT = 'light'\nexport const DARK = 'dark'\n\nexport enum THEME {\n  light = 'light',\n  dark = 'dark',\n}\n\nexport const DEFAULT_THEME_NAME = THEME.light\n"],"names":["LIGHT","DARK","DEFAULT_THEME_NAME","THEME","light","dark"],"mappings":"AAAA;;;;;;;;;;;;IAAaA,KAAK,MAALA,KAAK;IACLC,IAAI,MAAJA,IAAI;IAOJC,kBAAkB,MAAlBA,kBAAkB;;AARxB,MAAMF,KAAK,GAAG,OAAO;AACrB,MAAMC,IAAI,GAAG,MAAM;IAEnB,KAGN;UAHWE,KAAK;IAALA,KAAK,CACfC,OAAK,IAALA,OAAK;IADKD,KAAK,CAEfE,MAAI,IAAJA,MAAI;GAFMF,KAAK,KAALA,KAAK;AAKV,MAAMD,kBAAkB,GAAGC,KAAK,CAACC,KAAK"}
+{"version":3,"sources":["../../../../packages/theme/src/constants.ts"],"sourcesContent":["export enum ThemeName {\n  light = 'light',\n  dark = 'dark',\n}\n\nexport const DEFAULT_THEME_NAME = ThemeName.light\n\nexport const themeCookieKey = 'lido-theme-manual'\nexport const globalStyleDataAttribute = 'data-lido-ui-global-style'\n\nexport const themeCookieExpire = 365\n\nexport const prefersDarkThemeMediaQuery = window?.matchMedia?.(\n  '(prefers-color-scheme: dark)'\n)\n"],"names":["DEFAULT_THEME_NAME","themeCookieKey","globalStyleDataAttribute","themeCookieExpire","prefersDarkThemeMediaQuery","window","ThemeName","light","dark","matchMedia"],"mappings":"AAAA;;;;;;;;;;;;IAKaA,kBAAkB,MAAlBA,kBAAkB;IAElBC,cAAc,MAAdA,cAAc;IACdC,wBAAwB,MAAxBA,wBAAwB;IAExBC,iBAAiB,MAAjBA,iBAAiB;IAEjBC,0BAA0B,MAA1BA,0BAA0B;;IAAGC,GAAkB;IAZrD,SAGN;UAHWC,SAAS;IAATA,SAAS,CACnBC,OAAK,IAALA,OAAK;IADKD,SAAS,CAEnBE,MAAI,IAAJA,MAAI;GAFMF,SAAS,KAATA,SAAS;AAKd,MAAMN,kBAAkB,GAAGM,SAAS,CAACC,KAAK;AAE1C,MAAMN,cAAc,GAAG,mBAAmB;AAC1C,MAAMC,wBAAwB,GAAG,2BAA2B;AAE5D,MAAMC,iBAAiB,GAAG,GAAG;AAE7B,MAAMC,0BAA0B,GAAGC,MAAM,aAANA,MAAM,WAAY,GAAlBA,KAAAA,CAAkB,GAAlBA,CAAAA,GAAkB,GAAlBA,MAAM,CAAEI,UAAU,cAAlBJ,GAAkB,WAE3D,GAFyCA,KAAAA,CAEzC,GAFyCA,GAAkB,CAAlBA,IAEzC,CAFyCA,MAAM,EAC9C,8BAA8B,CAC/B"}

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

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ThemeToggleContext: ()=>ThemeToggleContext,
+    CookieThemeProvider: ()=>CookieThemeProvider
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _constants = require("./constants");
+const _themes = require("./themes");
+const _cookies = require("./utils/cookies");
+const _documentHeadContents = require("./document-head-contents/index");
+const _elementThemeScript = require("./document-head-contents/element-theme-script");
+const _styledComponents = require("styled-components");
+const defaultThemeContext = {};
+const ThemeToggleContext = /*#__PURE__*/ (0, _react.createContext)(defaultThemeContext);
+// we need to initialize this before react component code if we're using this provider or ThemeProvider
+(0, _documentHeadContents.initColors)();
+const CookieThemeProvider = /*#__PURE__*/ _react.default.memo((param)=>{
+    let { children , initialThemeName , // overrideThemeName is mainly used for storybook
+    overrideThemeName ,  } = param;
+    const parentTheme = (0, _react.useContext)(ThemeToggleContext);
+    // we do not want to do nested injections, and we're checking
+    // if context we inject in this component is already provided
+    const isTopLevelProvider = parentTheme === defaultThemeContext;
+    // 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] = (0, _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.
+    const themeName = parentTheme.themeName || internalThemeName;
+    const theme = _themes.themeMap[themeName];
+    // This logic is really hydrating everything, since we started with server-rendered default prop.
+    // It also follows cookie value change.
+    (0, _react.useEffect)(()=>{
+        // This logic is useless if we're nested - it is already done in top-level provider
+        if (!isTopLevelProvider) {
+            return;
+        }
+        const setTheme = ()=>{
+            const systemThemeName = (_constants.prefersDarkThemeMediaQuery === null || _constants.prefersDarkThemeMediaQuery === void 0 ? void 0 : _constants.prefersDarkThemeMediaQuery.matches) ? _constants.ThemeName.dark : _constants.ThemeName.light;
+            const themeNameCookie = (0, _cookies.getThemeNameFromCookies)();
+            const newThemeName = // first, if we have some override (e.g. in Storybook), we respect it
+            overrideThemeName || // then, if we have cookie theme, we use theme from cookie
+            themeNameCookie || // else, we follow theme we were provided in initialization from server,
+            // which means server explicitly wants specific theme by default, not "follow-system"
+            initialThemeName || // then, we use media query theme, if available (not all browsers may still support it)
+            systemThemeName || // and, finally, falling back to default
+            _constants.DEFAULT_THEME_NAME;
+            setThemeName(newThemeName);
+            // and when theme is switched, we're setting global-level CSS variable data-attribute
+            // to modify CSS vars provided on a top-level
+            document.documentElement.dataset.lidoTheme = newThemeName;
+        };
+        // Users may have auto-theme (switching on sunset or schedule or whatever) so we need to listen for this event
+        _constants.prefersDarkThemeMediaQuery === null || _constants.prefersDarkThemeMediaQuery === void 0 ? void 0 : _constants.prefersDarkThemeMediaQuery.addEventListener('change', setTheme);
+        setTheme();
+    }, [
+        initialThemeName,
+        isTopLevelProvider,
+        overrideThemeName,
+        parentTheme,
+        theme, 
+    ]);
+    const value = (0, _react.useMemo)(()=>({
+            themeName,
+            toggleTheme () {
+                setThemeName((themeName)=>{
+                    const newThemeName = themeName === _constants.ThemeName.light ? _constants.ThemeName.dark : _constants.ThemeName.light;
+                    // note that we're writing cookie theme only on explicit calls,
+                    // not on "internal theme state" change
+                    (0, _elementThemeScript.updateGlobalTheme)(newThemeName);
+                    return newThemeName;
+                });
+            }
+        }), [
+        themeName
+    ]);
+    if (isTopLevelProvider) {
+        // if this provider is top-level we rely on element-theme-script.tsx logic
+        // which defines data-lido-theme injection
+        return /*#__PURE__*/ _react.default.createElement(ThemeToggleContext.Provider, {
+            value: value
+        }, /*#__PURE__*/ _react.default.createElement(_styledComponents.ThemeProvider, {
+            theme: theme
+        }, children));
+    } else {
+        return /*#__PURE__*/ _react.default.createElement("div", {
+            style: {
+                display: 'contents'
+            },
+            "data-lido-theme": themeName
+        }, /*#__PURE__*/ _react.default.createElement(_styledComponents.ThemeProvider, {
+            theme: theme
+        }, children));
+    }
+});
+CookieThemeProvider.displayName = 'CookieThemeProvider';
+
+//# sourceMappingURL=cookie-theme-provider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/theme/src/cookie-theme-provider.tsx"],"sourcesContent":["import React, {\n  createContext,\n  FC,\n  PropsWithChildren,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n} from 'react'\nimport {\n  DEFAULT_THEME_NAME,\n  prefersDarkThemeMediaQuery,\n  ThemeName,\n} from './constants'\nimport { themeMap } from './themes'\nimport { getThemeNameFromCookies } from './utils/cookies'\nimport { initColors } from './document-head-contents'\nimport { updateGlobalTheme } from './document-head-contents/element-theme-script'\nimport { ThemeProvider as StyledThemeProvider } from 'styled-components'\nimport { ThemeContext } from './types'\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> = React.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 = parentTheme === defaultThemeContext\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 themeNameCookie = getThemeNameFromCookies()\n        const newThemeName =\n          // first, if we have some override (e.g. in Storybook), we respect it\n          overrideThemeName ||\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      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            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 {\n      return (\n        <div style={{ display: 'contents' }} data-lido-theme={themeName}>\n          <StyledThemeProvider theme={theme}>{children}</StyledThemeProvider>\n        </div>\n      )\n    }\n  }\n)\n\nCookieThemeProvider.displayName = 'CookieThemeProvider'\n"],"names":["ThemeToggleContext","CookieThemeProvider","defaultThemeContext","createContext","initColors","React","memo","children","initialThemeName","overrideThemeName","parentTheme","useContext","isTopLevelProvider","internalThemeName","setThemeName","useState","DEFAULT_THEME_NAME","themeName","theme","themeMap","useEffect","setTheme","systemThemeName","prefersDarkThemeMediaQuery","matches","ThemeName","dark","light","themeNameCookie","getThemeNameFromCookies","newThemeName","document","documentElement","dataset","lidoTheme","addEventListener","value","useMemo","toggleTheme","updateGlobalTheme","Provider","StyledThemeProvider","div","style","display","data-lido-theme","displayName"],"mappings":"AAAA;;;;;;;;;;;IAsBaA,kBAAkB,MAAlBA,kBAAkB;IAelBC,mBAAmB,MAAnBA,mBAAmB;;;6DA7BzB,OAAO;2BAKP,aAAa;wBACK,UAAU;yBACK,iBAAiB;sCAC9B,gCAA0B;oCACnB,+CAA+C;kCAC5B,mBAAmB;AAGxE,MAAMC,mBAAmB,GAAG,EAAE,AAAgB;AACvC,MAAMF,kBAAkB,iBAC7BG,IAAAA,MAAa,cAAA,EAAeD,mBAAmB,CAAC;AAElD,uGAAuG;AACvGE,IAAAA,qBAAU,WAAA,GAAE;AAWL,MAAMH,mBAAmB,iBAM5BI,MAAK,QAAA,CAACC,IAAI,CACZ,SAKM;QALL,EACCC,QAAQ,CAAA,EACRC,gBAAgB,CAAA,EAChB,iDAAiD;IACjDC,iBAAiB,CAAA,IAClB;IACC,MAAMC,WAAW,GAAGC,IAAAA,MAAU,WAAA,EAACX,kBAAkB,CAAC;IAClD,6DAA6D;IAC7D,6DAA6D;IAC7D,MAAMY,kBAAkB,GAAGF,WAAW,KAAKR,mBAAmB;IAC9D,qEAAqE;IACrE,+EAA+E;IAC/E,MAAM,CAACW,iBAAiB,EAAEC,YAAY,CAAC,GAAGC,IAAAA,MAAQ,SAAA,EAChDP,gBAAgB,IAAIQ,UAAkB,mBAAA,CACvC;IACD,4DAA4D;IAC5D,6EAA6E;IAC7E,2DAA2D;IAC3D,uFAAuF;IACvF,MAAMC,SAAS,GAAGP,WAAW,CAACO,SAAS,IAAIJ,iBAAiB;IAE5D,MAAMK,KAAK,GAAGC,OAAQ,SAAA,CAACF,SAAS,CAAC;IAEjC,iGAAiG;IACjG,uCAAuC;IACvCG,IAAAA,MAAS,UAAA,EAAC,IAAM;QACd,mFAAmF;QACnF,IAAI,CAACR,kBAAkB,EAAE;YACvB,OAAM;QACR,CAAC;QAED,MAAMS,QAAQ,GAAG,IAAM;YACrB,MAAMC,eAAe,GAAGC,CAAAA,UAA0B,2BAAA,aAA1BA,UAA0B,2BAAA,WAAS,GAAnCA,KAAAA,CAAmC,GAAnCA,UAA0B,2BAAA,CAAEC,OAAO,CAAA,GACvDC,UAAS,UAAA,CAACC,IAAI,GACdD,UAAS,UAAA,CAACE,KAAK;YACnB,MAAMC,eAAe,GAAGC,IAAAA,QAAuB,wBAAA,GAAE;YACjD,MAAMC,YAAY,GAChB,qEAAqE;YACrErB,iBAAiB,IACjB,0DAA0D;YAC1DmB,eAAe,IACf,wEAAwE;YACxE,qFAAqF;YACrFpB,gBAAgB,IAChB,uFAAuF;YACvFc,eAAe,IACf,wCAAwC;YACxCN,UAAkB,mBAAA;YACpBF,YAAY,CAACgB,YAAY,CAAC;YAC1B,qFAAqF;YACrF,6CAA6C;YAC7CC,QAAQ,CAACC,eAAe,CAACC,OAAO,CAACC,SAAS,GAAGJ,YAAY;QAC3D,CAAC;QAED,8GAA8G;QAC9GP,UAA0B,2BAAA,aAA1BA,UAA0B,2BAAA,WAAkB,GAA5CA,KAAAA,CAA4C,GAA5CA,UAA0B,2BAAA,CAAEY,gBAAgB,CAAC,QAAQ,EAAEd,QAAQ,CAAC,CAAA;QAChEA,QAAQ,EAAE;IACZ,CAAC,EAAE;QACDb,gBAAgB;QAChBI,kBAAkB;QAClBH,iBAAiB;QACjBC,WAAW;QACXQ,KAAK;KACN,CAAC;IAEF,MAAMkB,KAAK,GAAGC,IAAAA,MAAO,QAAA,EACnB,IAAM,CAAC;YACLpB,SAAS;YACTqB,WAAW,IAAG;gBACZxB,YAAY,CAAC,CAACG,SAAS,GAAK;oBAC1B,MAAMa,YAAY,GAChBb,SAAS,KAAKQ,UAAS,UAAA,CAACE,KAAK,GAAGF,UAAS,UAAA,CAACC,IAAI,GAAGD,UAAS,UAAA,CAACE,KAAK;oBAClE,+DAA+D;oBAC/D,uCAAuC;oBACvCY,IAAAA,mBAAiB,kBAAA,EAACT,YAAY,CAAC;oBAC/B,OAAOA,YAAY,CAAA;gBACrB,CAAC,CAAC;YACJ,CAAC;SACF,CAAC,EACF;QAACb,SAAS;KAAC,CACZ;IAED,IAAIL,kBAAkB,EAAE;QACtB,0EAA0E;QAC1E,0CAA0C;QAC1C,qBACE,6BAACZ,kBAAkB,CAACwC,QAAQ;YAACJ,KAAK,EAAEA,KAAK;yBACvC,6BAACK,iBAAmB,cAAA;YAACvB,KAAK,EAAEA,KAAK;WAAGX,QAAQ,CAAuB,CACvC,CAC/B;IACH,OAAO;QACL,qBACE,6BAACmC,KAAG;YAACC,KAAK,EAAE;gBAAEC,OAAO,EAAE,UAAU;aAAE;YAAEC,iBAAe,EAAE5B,SAAS;yBAC7D,6BAACwB,iBAAmB,cAAA;YAACvB,KAAK,EAAEA,KAAK;WAAGX,QAAQ,CAAuB,CAC/D,CACP;IACH,CAAC;AACH,CAAC,CACF;AAEDN,mBAAmB,CAAC6C,WAAW,GAAG,qBAAqB"}

package/dist/cjs/theme/src/document-head-contents/element-theme-colors.js

@@ -17,40 +17,53 @@ const _extends = require("@swc/helpers/lib/_extends.js").default;
 const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
 const _themes = require("../themes");
-const _globals = require("../globals");
-const _generateCssColorVariables = require("./utils/generate-css-color-variables");
-const darkThemeColors = (0, _generateCssColorVariables.generateCssColorVariables)(_themes.themeDark.colors);
+const _generateCssColorVariables = require("../utils/generate-css-color-variables");
+const _constants = require("../constants");
+const _utils = require("../../../utils/src/index");
+/**
+ * What is happening here:
+ * We want to have React dehydrated HTML to be loaded after theme is initialized.
+ * That means that we need to have some code executed BEFORE main react components code,
+ * before even injected script itself, so we need to provide some CSS and JS in document head
+ * to read the theme from cookie and make global CSS follow preferred palette.
+ * This file is providing CSS themes that defines custom CSS variables with palette to
+ * make HTML document styled even before any code is loaded
+ * */ const darkThemeColors = (0, _generateCssColorVariables.generateCssColorVariables)(_themes.themeDark.colors);
 const lightThemeColors = (0, _generateCssColorVariables.generateCssColorVariables)(_themes.themeLight.colors);
-let initGlobalColors = _globals.VOID_FN;
+let initGlobalColors = _utils.VOID_FN;
 const themeCSSValueString = `
-html, [data-theme='${_globals.ThemeName.light}'] { 
-    color-theme: light;
-    ${lightThemeColors}
+html, [data-lido-theme='${_constants.ThemeName.light}'] {
+color-theme: light;
+${lightThemeColors}
 }
 @media (prefers-color-scheme: dark) {
-    html:not([data-theme='${_globals.ThemeName.light}']) { 
-        color-theme: dark;
-        ${darkThemeColors} 
-    }
+html:not([data-lido-theme='${_constants.ThemeName.light}']) { 
+color-theme: dark;
+${darkThemeColors} 
+}
 }
-[data-theme='${_globals.ThemeName.dark}'] {
-    color-theme: dark;
-    ${darkThemeColors}
+[data-lido-theme='${_constants.ThemeName.dark}'] {
+color-theme: dark;
+${darkThemeColors}
 }`;
 if (typeof window !== 'undefined') {
-    if (!document.querySelector(`style[${_globals.globalStyleDataAttribute}]`)) {
+    if (!document.querySelector(`style[${_constants.globalStyleDataAttribute}]`)) {
         initGlobalColors = ()=>{
             const style = document.createElement('style');
-            style.setAttribute(_globals.globalStyleDataAttribute, '');
-            style.innerText = themeCSSValueString;
+            style.setAttribute(_constants.globalStyleDataAttribute, '');
+            style.innerHTML = themeCSSValueString;
             document.head.appendChild(style);
             // eslint-disable-next-line @typescript-eslint/no-empty-function
-            initGlobalColors = _globals.VOID_FN;
+            initGlobalColors = _utils.VOID_FN;
         };
     }
 }
 const StyleThemeColors = ()=>/*#__PURE__*/ _react.default.createElement("style", _extends({}, {
-        [_globals.globalStyleDataAttribute]: true
-    }), "`$", themeCSSValueString, "`");
+        [_constants.globalStyleDataAttribute]: true
+    }, {
+        dangerouslySetInnerHTML: {
+            __html: themeCSSValueString
+        }
+    }));
 
 //# sourceMappingURL=element-theme-colors.js.map

package/dist/cjs/theme/src/document-head-contents/element-theme-colors.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../packages/theme/src/document-head-contents/element-theme-colors.tsx"],"sourcesContent":["import React from 'react'\nimport { themeDark, themeLight } from '../themes'\nimport { globalStyleDataAttribute, ThemeName, VOID_FN } from '../globals'\nimport { generateCssColorVariables } from './utils/generate-css-color-variables'\n\nconst darkThemeColors = generateCssColorVariables(themeDark.colors)\nconst lightThemeColors = generateCssColorVariables(themeLight.colors)\n\nexport let initGlobalColors = VOID_FN\nexport const themeCSSValueString = `\nhtml, [data-theme='${ThemeName.light}'] { \n    color-theme: light;\n    ${lightThemeColors}\n}\n@media (prefers-color-scheme: dark) {\n    html:not([data-theme='${ThemeName.light}']) { \n        color-theme: dark;\n        ${darkThemeColors} \n    }\n}\n[data-theme='${ThemeName.dark}'] {\n    color-theme: dark;\n    ${darkThemeColors}\n}`\n\nif (typeof window !== 'undefined') {\n  if (!document.querySelector(`style[${globalStyleDataAttribute}]`)) {\n    initGlobalColors = () => {\n      const style = document.createElement('style')\n      style.setAttribute(globalStyleDataAttribute, '')\n      style.innerText = themeCSSValueString\n\n      document.head.appendChild(style)\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      initGlobalColors = VOID_FN\n    }\n  }\n}\n\nexport const StyleThemeColors = () => (\n  <style {...{ [globalStyleDataAttribute]: true }}>\n    `${themeCSSValueString}`\n  </style>\n)\n"],"names":["initGlobalColors","themeCSSValueString","StyleThemeColors","darkThemeColors","generateCssColorVariables","themeDark","colors","lightThemeColors","themeLight","VOID_FN","ThemeName","light","dark","window","document","querySelector","globalStyleDataAttribute","style","createElement","setAttribute","innerText","head","appendChild"],"mappings":"AAAA;;;;;;;;;;;IAQWA,gBAAgB,MAAhBA,gBAAgB;IACdC,mBAAmB,MAAnBA,mBAAmB;IA8BnBC,gBAAgB,MAAhBA,gBAAgB;;;;4DAvCX,OAAO;wBACa,WAAW;yBACY,YAAY;2CAC/B,sCAAsC;AAEhF,MAAMC,eAAe,GAAGC,IAAAA,0BAAyB,0BAAA,EAACC,OAAS,UAAA,CAACC,MAAM,CAAC;AACnE,MAAMC,gBAAgB,GAAGH,IAAAA,0BAAyB,0BAAA,EAACI,OAAU,WAAA,CAACF,MAAM,CAAC;AAE9D,IAAIN,gBAAgB,GAAGS,QAAO,QAAA;AAC9B,MAAMR,mBAAmB,GAAG,CAAC;mBACjB,EAAES,QAAS,UAAA,CAACC,KAAK,CAAC;;IAEjC,EAAEJ,gBAAgB,CAAC;;;0BAGG,EAAEG,QAAS,UAAA,CAACC,KAAK,CAAC;;QAEpC,EAAER,eAAe,CAAC;;;aAGb,EAAEO,QAAS,UAAA,CAACE,IAAI,CAAC;;IAE1B,EAAET,eAAe,CAAC;CACrB,CAAC;AAEF,IAAI,OAAOU,MAAM,KAAK,WAAW,EAAE;IACjC,IAAI,CAACC,QAAQ,CAACC,aAAa,CAAC,CAAC,MAAM,EAAEC,QAAwB,yBAAA,CAAC,CAAC,CAAC,CAAC,EAAE;QACjEhB,gBAAgB,GAAG,IAAM;YACvB,MAAMiB,KAAK,GAAGH,QAAQ,CAACI,aAAa,CAAC,OAAO,CAAC;YAC7CD,KAAK,CAACE,YAAY,CAACH,QAAwB,yBAAA,EAAE,EAAE,CAAC;YAChDC,KAAK,CAACG,SAAS,GAAGnB,mBAAmB;YAErCa,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACL,KAAK,CAAC;YAChC,gEAAgE;YAChEjB,gBAAgB,GAAGS,QAAO,QAAA;QAC5B,CAAC;IACH,CAAC;AACH,CAAC;AAEM,MAAMP,gBAAgB,GAAG,kBAC9B,6BAACe,OAAK,eAAK;QAAE,CAACD,QAAwB,yBAAA,CAAC,EAAE,IAAI;KAAE,GAAE,IAC7C,EAACf,mBAAmB,EAAC,GACzB,CAAQ,AACT"}
+{"version":3,"sources":["../../../../../packages/theme/src/document-head-contents/element-theme-colors.tsx"],"sourcesContent":["import React from 'react'\nimport { themeDark, themeLight } from '../themes'\nimport { generateCssColorVariables } from '../utils/generate-css-color-variables'\nimport { globalStyleDataAttribute, ThemeName } from '../constants'\nimport { VOID_FN } from '@lidofinance/utils'\n\n/**\n * What is happening here:\n * We want to have React dehydrated HTML to be loaded after theme is initialized.\n * That means that we need to have some code executed BEFORE main react components code,\n * before even injected script itself, so we need to provide some CSS and JS in document head\n * to read the theme from cookie and make global CSS follow preferred palette.\n * This file is providing CSS themes that defines custom CSS variables with palette to\n * make HTML document styled even before any code is loaded\n * */\n\nconst darkThemeColors = generateCssColorVariables(themeDark.colors)\nconst lightThemeColors = generateCssColorVariables(themeLight.colors)\n\nexport let initGlobalColors = VOID_FN\nexport const themeCSSValueString = `\nhtml, [data-lido-theme='${ThemeName.light}'] {\ncolor-theme: light;\n${lightThemeColors}\n}\n@media (prefers-color-scheme: dark) {\nhtml:not([data-lido-theme='${ThemeName.light}']) { \ncolor-theme: dark;\n${darkThemeColors} \n}\n}\n[data-lido-theme='${ThemeName.dark}'] {\ncolor-theme: dark;\n${darkThemeColors}\n}`\n\nif (typeof window !== 'undefined') {\n  if (!document.querySelector(`style[${globalStyleDataAttribute}]`)) {\n    initGlobalColors = () => {\n      const style = document.createElement('style')\n      style.setAttribute(globalStyleDataAttribute, '')\n      style.innerHTML = themeCSSValueString\n\n      document.head.appendChild(style)\n      // eslint-disable-next-line @typescript-eslint/no-empty-function\n      initGlobalColors = VOID_FN\n    }\n  }\n}\n\nexport const StyleThemeColors = () => (\n  <style\n    {...{ [globalStyleDataAttribute]: true }}\n    dangerouslySetInnerHTML={{ __html: themeCSSValueString }}\n  />\n)\n"],"names":["initGlobalColors","themeCSSValueString","StyleThemeColors","darkThemeColors","generateCssColorVariables","themeDark","colors","lightThemeColors","themeLight","VOID_FN","ThemeName","light","dark","window","document","querySelector","globalStyleDataAttribute","style","createElement","setAttribute","innerHTML","head","appendChild","dangerouslySetInnerHTML","__html"],"mappings":"AAAA;;;;;;;;;;;IAmBWA,gBAAgB,MAAhBA,gBAAgB;IACdC,mBAAmB,MAAnBA,mBAAmB;IA8BnBC,gBAAgB,MAAhBA,gBAAgB;;;;4DAlDX,OAAO;wBACa,WAAW;2CACP,uCAAuC;2BAC7B,cAAc;uBAC1C,0BAAoB;AAE5C;;;;;;;;GAQG,GAEH,MAAMC,eAAe,GAAGC,IAAAA,0BAAyB,0BAAA,EAACC,OAAS,UAAA,CAACC,MAAM,CAAC;AACnE,MAAMC,gBAAgB,GAAGH,IAAAA,0BAAyB,0BAAA,EAACI,OAAU,WAAA,CAACF,MAAM,CAAC;AAE9D,IAAIN,gBAAgB,GAAGS,MAAO,QAAA;AAC9B,MAAMR,mBAAmB,GAAG,CAAC;wBACZ,EAAES,UAAS,UAAA,CAACC,KAAK,CAAC;;AAE1C,EAAEJ,gBAAgB,CAAC;;;2BAGQ,EAAEG,UAAS,UAAA,CAACC,KAAK,CAAC;;AAE7C,EAAER,eAAe,CAAC;;;kBAGA,EAAEO,UAAS,UAAA,CAACE,IAAI,CAAC;;AAEnC,EAAET,eAAe,CAAC;CACjB,CAAC;AAEF,IAAI,OAAOU,MAAM,KAAK,WAAW,EAAE;IACjC,IAAI,CAACC,QAAQ,CAACC,aAAa,CAAC,CAAC,MAAM,EAAEC,UAAwB,yBAAA,CAAC,CAAC,CAAC,CAAC,EAAE;QACjEhB,gBAAgB,GAAG,IAAM;YACvB,MAAMiB,KAAK,GAAGH,QAAQ,CAACI,aAAa,CAAC,OAAO,CAAC;YAC7CD,KAAK,CAACE,YAAY,CAACH,UAAwB,yBAAA,EAAE,EAAE,CAAC;YAChDC,KAAK,CAACG,SAAS,GAAGnB,mBAAmB;YAErCa,QAAQ,CAACO,IAAI,CAACC,WAAW,CAACL,KAAK,CAAC;YAChC,gEAAgE;YAChEjB,gBAAgB,GAAGS,MAAO,QAAA;QAC5B,CAAC;IACH,CAAC;AACH,CAAC;AAEM,MAAMP,gBAAgB,GAAG,kBAC9B,6BAACe,OAAK,eACA;QAAE,CAACD,UAAwB,yBAAA,CAAC,EAAE,IAAI;KAAE;QACxCO,uBAAuB,EAAE;YAAEC,MAAM,EAAEvB,mBAAmB;SAAE;OACxD,AACH"}

package/dist/cjs/theme/src/document-head-contents/element-theme-script.js

@@ -9,18 +9,25 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    themeScriptValue: ()=>themeScriptValue,
     updateGlobalTheme: ()=>updateGlobalTheme,
     initGlobalCookieTheme: ()=>initGlobalCookieTheme,
     ScriptThemeValue: ()=>ScriptThemeValue
 });
 const _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
 const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
-const _globals = require("../globals");
-const _constants = require("../../../cookie-theme-toggler/src/constants");
 const _utils = require("../../../utils/src/index");
+const _constants = require("../constants");
 /**
+ * What is happening here:
+ * We want to have React dehydrated HTML to be loaded after theme is initialized.
+ * That means that we need to have some code executed BEFORE main react components code,
+ * before even injected script itself, so we need to provide some CSS and JS in document head
+ * to read the theme from cookie and make global CSS follow preferred palette.
+ * This file is providing JS code that reads/writes cookie value, including <script> element to inject
+ * */ /**
  *  this FN should be hermetic and has zero external items - it is inlined via .toString()
+ *  __PURE__ annotation may throw an error on some external usage cases
+ *  (with chances, but it is better than nothing)
  * */ /*#__PURE__*/ const themeScriptValueString = function(key) {
     if (!window.matchMedia) {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -28,28 +35,34 @@ const _utils = require("../../../utils/src/index");
     }
     const match = window.matchMedia('(prefers-color-scheme: dark)');
     const setTheme = ()=>{
-        const themeCookie = document.cookie.split(';').find((cookie)=>cookie.trim().startsWith(key + '='));
+        var ref;
+        const cookieMatcher = new RegExp(`(^| )${key}=([^;]+)`);
+        var ref1;
+        const themeCookie = (ref1 = (ref = document.cookie.match(cookieMatcher)) === null || ref === void 0 ? void 0 : ref[2]) !== null && ref1 !== void 0 ? ref1 : null;
         if (themeCookie) {
-            document.documentElement.dataset.theme = themeCookie.split('=')[1];
+            document.documentElement.dataset.lidoTheme = themeCookie.split('=')[1];
         } else {
-            delete document.documentElement.dataset.theme;
+            delete document.documentElement.dataset.lidoTheme;
         }
     };
     setTheme();
     match.addEventListener('change', setTheme);
     return setTheme;
 };
-const themeScriptValue = typeof window !== 'undefined' ? themeScriptValueString : ()=>_globals.VOID_FN;
-let updateGlobalTheme = _globals.VOID_FN;
-let initGlobalCookieTheme = typeof window === 'undefined' ? _globals.VOID_FN : ()=>{
-    const setTheme = themeScriptValueString(_globals.STORAGE_THEME_MANUAL_KEY);
-    initGlobalCookieTheme = _globals.VOID_FN;
+let updateGlobalTheme = _utils.VOID_FN;
+let initGlobalCookieTheme = typeof window === 'undefined' ? _utils.VOID_FN : ()=>{
+    const setTheme = themeScriptValueString(_constants.themeCookieKey);
+    initGlobalCookieTheme = _utils.VOID_FN;
     const topLevelDomain = (0, _utils.getTopLevelDomain)();
     updateGlobalTheme = (theme)=>{
-        document.cookie = `${_constants.COOKIE_THEME_MANUAL_KEY}=${theme};expires=${_constants.COOKIES_THEME_EXPIRES_DAYS};path=/;domain=${topLevelDomain};samesite=None;secure;`;
+        document.cookie = `${_constants.themeCookieKey}=${theme};expires=${_constants.themeCookieExpire};path=/;domain=${topLevelDomain};samesite=None;secure;`;
         setTheme();
     };
 };
-const ScriptThemeValue = ()=>/*#__PURE__*/ _react.default.createElement("script", null, "`($", themeScriptValueString.toString(), ")($", _globals.STORAGE_THEME_MANUAL_KEY, ")`");
+const ScriptThemeValue = ()=>/*#__PURE__*/ _react.default.createElement("script", {
+        dangerouslySetInnerHTML: {
+            __html: `(${themeScriptValueString.toString()})("${_constants.themeCookieKey}")`
+        }
+    });
 
 //# sourceMappingURL=element-theme-script.js.map

package/dist/cjs/theme/src/document-head-contents/element-theme-script.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../packages/theme/src/document-head-contents/element-theme-script.tsx"],"sourcesContent":["import React from 'react'\nimport { STORAGE_THEME_MANUAL_KEY, ThemeName, VOID_FN } from '../globals'\nimport {\n  COOKIE_THEME_MANUAL_KEY,\n  COOKIES_THEME_EXPIRES_DAYS,\n} from '../../../cookie-theme-toggler/src/constants'\nimport { getTopLevelDomain } from '@lidofinance/utils'\n\n/**\n *  this FN should be hermetic and has zero external items - it is inlined via .toString()\n * */\n/*#__PURE__*/\nconst themeScriptValueString = function (key: string) {\n  if (!window.matchMedia) {\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    return () => {}\n  }\n  const match = window.matchMedia('(prefers-color-scheme: dark)')\n  const setTheme = () => {\n    const themeCookie = document.cookie\n      .split(';')\n      .find((cookie) => cookie.trim().startsWith(key + '='))\n    if (themeCookie) {\n      document.documentElement.dataset.theme = themeCookie.split('=')[1]\n    } else {\n      delete document.documentElement.dataset.theme\n    }\n  }\n  setTheme()\n  match.addEventListener('change', setTheme)\n  return setTheme\n}\n\nexport const themeScriptValue =\n  typeof window !== 'undefined' ? themeScriptValueString : () => VOID_FN\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nexport let updateGlobalTheme: (theme: string) => void = VOID_FN\n\nexport let initGlobalCookieTheme =\n  typeof window === 'undefined'\n    ? VOID_FN\n    : () => {\n        const setTheme = themeScriptValueString(STORAGE_THEME_MANUAL_KEY)\n        initGlobalCookieTheme = VOID_FN\n        const topLevelDomain = getTopLevelDomain()\n        updateGlobalTheme = (theme: ThemeName) => {\n          document.cookie = `${COOKIE_THEME_MANUAL_KEY}=${theme};expires=${COOKIES_THEME_EXPIRES_DAYS};path=/;domain=${topLevelDomain};samesite=None;secure;`\n          setTheme()\n        }\n      }\n\nexport const ScriptThemeValue = () => (\n  <script>\n    `(${themeScriptValueString.toString()})(${STORAGE_THEME_MANUAL_KEY})`\n  </script>\n)\n"],"names":["themeScriptValue","updateGlobalTheme","initGlobalCookieTheme","ScriptThemeValue","themeScriptValueString","key","window","matchMedia","match","setTheme","themeCookie","document","cookie","split","find","trim","startsWith","documentElement","dataset","theme","addEventListener","VOID_FN","STORAGE_THEME_MANUAL_KEY","topLevelDomain","getTopLevelDomain","COOKIE_THEME_MANUAL_KEY","COOKIES_THEME_EXPIRES_DAYS","script","toString"],"mappings":"AAAA;;;;;;;;;;;IAiCaA,gBAAgB,MAAhBA,gBAAgB;IAGlBC,iBAAiB,MAAjBA,iBAAiB;IAEjBC,qBAAqB,MAArBA,qBAAqB;IAanBC,gBAAgB,MAAhBA,gBAAgB;;;4DAnDX,OAAO;yBACoC,YAAY;2BAIlE,6CAA6C;uBAClB,0BAAoB;AAEtD;;GAEG,GACH,WAAW,GACX,MAAMC,sBAAsB,GAAG,SAAUC,GAAW,EAAE;IACpD,IAAI,CAACC,MAAM,CAACC,UAAU,EAAE;QACtB,gEAAgE;QAChE,OAAO,IAAM,CAAC,CAAC,CAAA;IACjB,CAAC;IACD,MAAMC,KAAK,GAAGF,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC;IAC/D,MAAME,QAAQ,GAAG,IAAM;QACrB,MAAMC,WAAW,GAAGC,QAAQ,CAACC,MAAM,CAChCC,KAAK,CAAC,GAAG,CAAC,CACVC,IAAI,CAAC,CAACF,MAAM,GAAKA,MAAM,CAACG,IAAI,EAAE,CAACC,UAAU,CAACX,GAAG,GAAG,GAAG,CAAC,CAAC;QACxD,IAAIK,WAAW,EAAE;YACfC,QAAQ,CAACM,eAAe,CAACC,OAAO,CAACC,KAAK,GAAGT,WAAW,CAACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACpE,OAAO;YACL,OAAOF,QAAQ,CAACM,eAAe,CAACC,OAAO,CAACC,KAAK;QAC/C,CAAC;IACH,CAAC;IACDV,QAAQ,EAAE;IACVD,KAAK,CAACY,gBAAgB,CAAC,QAAQ,EAAEX,QAAQ,CAAC;IAC1C,OAAOA,QAAQ,CAAA;AACjB,CAAC;AAEM,MAAMT,gBAAgB,GAC3B,OAAOM,MAAM,KAAK,WAAW,GAAGF,sBAAsB,GAAG,IAAMiB,QAAO,QAAA;AAEjE,IAAIpB,iBAAiB,GAA4BoB,QAAO,QAAA;AAExD,IAAInB,qBAAqB,GAC9B,OAAOI,MAAM,KAAK,WAAW,GACzBe,QAAO,QAAA,GACP,IAAM;IACJ,MAAMZ,QAAQ,GAAGL,sBAAsB,CAACkB,QAAwB,yBAAA,CAAC;IACjEpB,qBAAqB,GAAGmB,QAAO,QAAA;IAC/B,MAAME,cAAc,GAAGC,IAAAA,MAAiB,kBAAA,GAAE;IAC1CvB,iBAAiB,GAAG,CAACkB,KAAgB,GAAK;QACxCR,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAEa,UAAuB,wBAAA,CAAC,CAAC,EAAEN,KAAK,CAAC,SAAS,EAAEO,UAA0B,2BAAA,CAAC,eAAe,EAAEH,cAAc,CAAC,sBAAsB,CAAC;QACnJd,QAAQ,EAAE;IACZ,CAAC;AACH,CAAC;AAEA,MAAMN,gBAAgB,GAAG,kBAC9B,6BAACwB,QAAM,QAAC,KACH,EAACvB,sBAAsB,CAACwB,QAAQ,EAAE,EAAC,KAAG,EAACN,QAAwB,yBAAA,EAAC,IACrE,CAAS,AACV"}
+{"version":3,"sources":["../../../../../packages/theme/src/document-head-contents/element-theme-script.tsx"],"sourcesContent":["import React from 'react'\nimport { getTopLevelDomain, VOID_FN } from '@lidofinance/utils'\nimport { themeCookieExpire, themeCookieKey, ThemeName } from '../constants'\n\n/**\n * What is happening here:\n * We want to have React dehydrated HTML to be loaded after theme is initialized.\n * That means that we need to have some code executed BEFORE main react components code,\n * before even injected script itself, so we need to provide some CSS and JS in document head\n * to read the theme from cookie and make global CSS follow preferred palette.\n * This file is providing JS code that reads/writes cookie value, including <script> element to inject\n * */\n\n/**\n *  this FN should be hermetic and has zero external items - it is inlined via .toString()\n *  __PURE__ annotation may throw an error on some external usage cases\n *  (with chances, but it is better than nothing)\n * */\n/*#__PURE__*/\nconst themeScriptValueString = function (key: string) {\n  if (!window.matchMedia) {\n    // eslint-disable-next-line @typescript-eslint/no-empty-function\n    return () => {}\n  }\n  const match = window.matchMedia('(prefers-color-scheme: dark)')\n  const setTheme = () => {\n    const cookieMatcher = new RegExp(`(^| )${key}=([^;]+)`)\n    const themeCookie =\n      (document.cookie.match(cookieMatcher)?.[2] as ThemeName) ?? null\n    if (themeCookie) {\n      document.documentElement.dataset.lidoTheme = themeCookie.split('=')[1]\n    } else {\n      delete document.documentElement.dataset.lidoTheme\n    }\n  }\n  setTheme()\n  match.addEventListener('change', setTheme)\n  return setTheme\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nexport let updateGlobalTheme: (theme: string) => void = VOID_FN\n\nexport let initGlobalCookieTheme =\n  typeof window === 'undefined'\n    ? VOID_FN\n    : () => {\n        const setTheme = themeScriptValueString(themeCookieKey)\n        initGlobalCookieTheme = VOID_FN\n        const topLevelDomain = getTopLevelDomain()\n        updateGlobalTheme = (theme: ThemeName) => {\n          document.cookie = `${themeCookieKey}=${theme};expires=${themeCookieExpire};path=/;domain=${topLevelDomain};samesite=None;secure;`\n          setTheme()\n        }\n      }\n\nexport const ScriptThemeValue = () => (\n  <script\n    dangerouslySetInnerHTML={{\n      __html: `(${themeScriptValueString.toString()})(\"${themeCookieKey}\")`,\n    }}\n  />\n)\n"],"names":["updateGlobalTheme","initGlobalCookieTheme","ScriptThemeValue","themeScriptValueString","key","window","matchMedia","match","setTheme","document","cookieMatcher","RegExp","themeCookie","cookie","documentElement","dataset","lidoTheme","split","addEventListener","VOID_FN","themeCookieKey","topLevelDomain","getTopLevelDomain","theme","themeCookieExpire","script","dangerouslySetInnerHTML","__html","toString"],"mappings":"AAAA;;;;;;;;;;;IAyCWA,iBAAiB,MAAjBA,iBAAiB;IAEjBC,qBAAqB,MAArBA,qBAAqB;IAanBC,gBAAgB,MAAhBA,gBAAgB;;;4DAxDX,OAAO;uBACkB,0BAAoB;2BACF,cAAc;AAE3E;;;;;;;GAOG,GAEH;;;;GAIG,GACH,WAAW,GACX,MAAMC,sBAAsB,GAAG,SAAUC,GAAW,EAAE;IACpD,IAAI,CAACC,MAAM,CAACC,UAAU,EAAE;QACtB,gEAAgE;QAChE,OAAO,IAAM,CAAC,CAAC,CAAA;IACjB,CAAC;IACD,MAAMC,KAAK,GAAGF,MAAM,CAACC,UAAU,CAAC,8BAA8B,CAAC;IAC/D,MAAME,QAAQ,GAAG,IAAM;YAGlBC,GAAoC;QAFvC,MAAMC,aAAa,GAAG,IAAIC,MAAM,CAAC,CAAC,KAAK,EAAEP,GAAG,CAAC,QAAQ,CAAC,CAAC;YAErD,IAAwD;QAD1D,MAAMQ,WAAW,GACf,CAAA,IAAwD,GAAvDH,CAAAA,GAAoC,GAApCA,QAAQ,CAACI,MAAM,CAACN,KAAK,CAACG,aAAa,CAAC,cAApCD,GAAoC,WAAK,GAAzCA,KAAAA,CAAyC,GAAzCA,GAAoC,AAAE,CAAC,CAAC,CAAC,cAA1C,IAAwD,cAAxD,IAAwD,GAAI,IAAI;QAClE,IAAIG,WAAW,EAAE;YACfH,QAAQ,CAACK,eAAe,CAACC,OAAO,CAACC,SAAS,GAAGJ,WAAW,CAACK,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACxE,OAAO;YACL,OAAOR,QAAQ,CAACK,eAAe,CAACC,OAAO,CAACC,SAAS;QACnD,CAAC;IACH,CAAC;IACDR,QAAQ,EAAE;IACVD,KAAK,CAACW,gBAAgB,CAAC,QAAQ,EAAEV,QAAQ,CAAC;IAC1C,OAAOA,QAAQ,CAAA;AACjB,CAAC;AAGM,IAAIR,iBAAiB,GAA4BmB,MAAO,QAAA;AAExD,IAAIlB,qBAAqB,GAC9B,OAAOI,MAAM,KAAK,WAAW,GACzBc,MAAO,QAAA,GACP,IAAM;IACJ,MAAMX,QAAQ,GAAGL,sBAAsB,CAACiB,UAAc,eAAA,CAAC;IACvDnB,qBAAqB,GAAGkB,MAAO,QAAA;IAC/B,MAAME,cAAc,GAAGC,IAAAA,MAAiB,kBAAA,GAAE;IAC1CtB,iBAAiB,GAAG,CAACuB,KAAgB,GAAK;QACxCd,QAAQ,CAACI,MAAM,GAAG,CAAC,EAAEO,UAAc,eAAA,CAAC,CAAC,EAAEG,KAAK,CAAC,SAAS,EAAEC,UAAiB,kBAAA,CAAC,eAAe,EAAEH,cAAc,CAAC,sBAAsB,CAAC;QACjIb,QAAQ,EAAE;IACZ,CAAC;AACH,CAAC;AAEA,MAAMN,gBAAgB,GAAG,kBAC9B,6BAACuB,QAAM;QACLC,uBAAuB,EAAE;YACvBC,MAAM,EAAE,CAAC,CAAC,EAAExB,sBAAsB,CAACyB,QAAQ,EAAE,CAAC,GAAG,EAAER,UAAc,eAAA,CAAC,EAAE,CAAC;SACtE;MACD,AACH"}

package/dist/cjs/theme/src/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../packages/theme/src/hooks.ts"],"sourcesContent":["import { useContext } from 'react'\nimport { ThemeToggleContext } from './cookie-theme-provider'\nimport { ThemeContext } from './types'\n\nexport const useThemeToggle = (): ThemeContext => {\n  return useContext(ThemeToggleContext)\n}\n"],"names":["useThemeToggle","useContext","ThemeToggleContext"],"mappings":"AAAA;;;;+BAIaA,gBAAc;;aAAdA,cAAc;;uBAJA,OAAO;qCACC,yBAAyB;AAGrD,MAAMA,cAAc,GAAG,IAAoB;IAChD,OAAOC,IAAAA,MAAU,WAAA,EAACC,oBAAkB,mBAAA,CAAC,CAAA;AACvC,CAAC"}

package/dist/cjs/theme/src/index.js

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
-_exportStar(require("./provider"), exports);
+_exportStar(require("./cookie-theme-provider"), exports);
+_exportStar(require("./theme-provider"), exports);
 _exportStar(require("./document-head-contents/index"), exports);
 _exportStar(require("./constants"), exports);
 _exportStar(require("./themes"), exports);
+_exportStar(require("./hooks"), exports);
 _exportStar(require("./types"), exports);
 
 //# sourceMappingURL=index.js.map