@exromany/lido-app-ui 0.0.1-pre.2 → 0.0.1-pre.3

package/README.md

@@ -28,7 +28,7 @@ function Widget() {
 }
 ```
 
-Theme providers (`ThemeProvider`, `CookieThemeProvider`, `ThemeToggler`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define.
+Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define.
 
 ## Router links
 

package/dist/README.md

@@ -28,7 +28,7 @@ function Widget() {
 }
 ```
 
-Theme providers (`ThemeProvider`, `CookieThemeProvider`, `ThemeToggler`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define.
+Theme providers (`ThemeProvider`, `CookieThemeProvider`) are re-exported from `@lidofinance/lido-shared-ui`. The color tokens follow the `data-lido-theme` attribute they set, so switching to the dark theme restyles these components. `ThemeSwitcher` is the app-ui-styled theme toggle, since the shared `ThemeToggler` relies on `--lido-ui-*` tokens that app-ui doesn't define.
 
 ## Router links
 

package/dist/cjs/address/Address.cjs

@@ -37,6 +37,7 @@ const Address = /*#__PURE__*/react.forwardRef((_ref, ref) => {
       className: cn(Address_module.identicon, identicon >= 28 && Address_module.identiconLarge)
     }) : null, tooltip ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
       content: address,
+      tabIndex: 0,
       children: hex
     }) : hex, copy ? /*#__PURE__*/jsxRuntime.jsx(Copy.Copy, {
       text: address

package/dist/cjs/address/Address.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Address.cjs","sources":["../../../src/address/Address.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef } from 'react'\n\nimport cn from 'classnames'\n\nimport { Copy } from '../copy'\nimport { Hex } from '../hex'\nimport { Identicon } from '../identicon'\nimport { Tooltip } from '../tooltip'\nimport styles from './Address.module.css'\n\nexport type AddressProps = ComponentPropsWithoutRef<'span'> & {\n  address: string\n  symbols?: number\n  identicon?: number\n  tooltip?: boolean\n  copy?: boolean\n}\n\nexport const Address = forwardRef<HTMLSpanElement, AddressProps>(\n  (\n    {\n      address,\n      symbols,\n      identicon,\n      tooltip = false,\n      copy = false,\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const hex = (\n      <Hex value={address} symbols={symbols} title={tooltip ? '' : undefined} />\n    )\n\n    return (\n      <span ref={ref} className={cn(styles.root, className)} {...rest}>\n        {identicon != null ? (\n          <Identicon\n            address={address}\n            size={identicon}\n            className={cn(\n              styles.identicon,\n              identicon >= 28 && styles.identiconLarge,\n            )}\n          />\n        ) : null}\n        {tooltip ? <Tooltip content={address}>{hex}</Tooltip> : hex}\n        {copy ? <Copy text={address} /> : null}\n        {children}\n      </span>\n    )\n  },\n)\n\nAddress.displayName = 'Address'\n"],"names":["Address","forwardRef","_ref","ref","address","symbols","identicon","tooltip","copy","className","children","rest","hex","_jsx","Hex","value","title","undefined","_jsxs","cn","styles","root","Identicon","size","identiconLarge","Tooltip","content","Copy","text","displayName"],"mappings":";;;;;;;;;;;;;AAkBO,MAAMA,OAAO,gBAAGC,gBAAU,CAC/B,CAAAC,IAAA,EAWEC,GAAG,KACA;EAAA,IAXH;IACEC,OAAO;IACPC,OAAO;IACPC,SAAS;AACTC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,IAAI,GAAG,KAAK;IACZC,SAAS;IACTC,QAAQ;IACR,GAAGC,IAAAA;AACL,GAAC,GAAAT,IAAA,CAAA;AAGD,EAAA,MAAMU,GAAG,gBACPC,cAAA,CAACC,OAAG,EAAA;AAACC,IAAAA,KAAK,EAAEX,OAAQ;AAACC,IAAAA,OAAO,EAAEA,OAAQ;AAACW,IAAAA,KAAK,EAAET,OAAO,GAAG,EAAE,GAAGU,SAAAA;AAAU,GAAE,CAC1E,CAAA;AAED,EAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;AAAMf,IAAAA,GAAG,EAAEA,GAAI;IAACM,SAAS,EAAEU,EAAE,CAACC,cAAM,CAACC,IAAI,EAAEZ,SAAS,CAAE;AAAA,IAAA,GAAKE,IAAI;AAAAD,IAAAA,QAAA,GAC5DJ,SAAS,IAAI,IAAI,gBAChBO,cAAA,CAACS,mBAAS,EAAA;AACRlB,MAAAA,OAAO,EAAEA,OAAQ;AACjBmB,MAAAA,IAAI,EAAEjB,SAAU;AAChBG,MAAAA,SAAS,EAAEU,EAAE,CACXC,cAAM,CAACd,SAAS,EAChBA,SAAS,IAAI,EAAE,IAAIc,cAAM,CAACI,cAC5B,CAAA;KACD,CAAC,GACA,IAAI,EACPjB,OAAO,gBAAGM,cAAA,CAACY,eAAO,EAAA;AAACC,MAAAA,OAAO,EAAEtB,OAAQ;AAAAM,MAAAA,QAAA,EAAEE,GAAAA;KAAa,CAAC,GAAGA,GAAG,EAC1DJ,IAAI,gBAAGK,cAAA,CAACc,SAAI,EAAA;AAACC,MAAAA,IAAI,EAAExB,OAAAA;AAAQ,KAAE,CAAC,GAAG,IAAI,EACrCM,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAEX,CACF,EAAC;AAEDV,OAAO,CAAC6B,WAAW,GAAG,SAAS;;;;"}
+{"version":3,"file":"Address.cjs","sources":["../../../src/address/Address.tsx"],"sourcesContent":["import { forwardRef, type ComponentPropsWithoutRef } from 'react'\n\nimport cn from 'classnames'\n\nimport { Copy } from '../copy'\nimport { Hex } from '../hex'\nimport { Identicon } from '../identicon'\nimport { Tooltip } from '../tooltip'\nimport styles from './Address.module.css'\n\nexport type AddressProps = ComponentPropsWithoutRef<'span'> & {\n  address: string\n  symbols?: number\n  identicon?: number\n  tooltip?: boolean\n  copy?: boolean\n}\n\nexport const Address = forwardRef<HTMLSpanElement, AddressProps>(\n  (\n    {\n      address,\n      symbols,\n      identicon,\n      tooltip = false,\n      copy = false,\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) => {\n    const hex = (\n      <Hex value={address} symbols={symbols} title={tooltip ? '' : undefined} />\n    )\n\n    return (\n      <span ref={ref} className={cn(styles.root, className)} {...rest}>\n        {identicon != null ? (\n          <Identicon\n            address={address}\n            size={identicon}\n            className={cn(\n              styles.identicon,\n              identicon >= 28 && styles.identiconLarge,\n            )}\n          />\n        ) : null}\n        {tooltip ? (\n          <Tooltip content={address} tabIndex={0}>\n            {hex}\n          </Tooltip>\n        ) : (\n          hex\n        )}\n        {copy ? <Copy text={address} /> : null}\n        {children}\n      </span>\n    )\n  },\n)\n\nAddress.displayName = 'Address'\n"],"names":["Address","forwardRef","_ref","ref","address","symbols","identicon","tooltip","copy","className","children","rest","hex","_jsx","Hex","value","title","undefined","_jsxs","cn","styles","root","Identicon","size","identiconLarge","Tooltip","content","tabIndex","Copy","text","displayName"],"mappings":";;;;;;;;;;;;;AAkBO,MAAMA,OAAO,gBAAGC,gBAAU,CAC/B,CAAAC,IAAA,EAWEC,GAAG,KACA;EAAA,IAXH;IACEC,OAAO;IACPC,OAAO;IACPC,SAAS;AACTC,IAAAA,OAAO,GAAG,KAAK;AACfC,IAAAA,IAAI,GAAG,KAAK;IACZC,SAAS;IACTC,QAAQ;IACR,GAAGC,IAAAA;AACL,GAAC,GAAAT,IAAA,CAAA;AAGD,EAAA,MAAMU,GAAG,gBACPC,cAAA,CAACC,OAAG,EAAA;AAACC,IAAAA,KAAK,EAAEX,OAAQ;AAACC,IAAAA,OAAO,EAAEA,OAAQ;AAACW,IAAAA,KAAK,EAAET,OAAO,GAAG,EAAE,GAAGU,SAAAA;AAAU,GAAE,CAC1E,CAAA;AAED,EAAA,oBACEC,eAAA,CAAA,MAAA,EAAA;AAAMf,IAAAA,GAAG,EAAEA,GAAI;IAACM,SAAS,EAAEU,EAAE,CAACC,cAAM,CAACC,IAAI,EAAEZ,SAAS,CAAE;AAAA,IAAA,GAAKE,IAAI;AAAAD,IAAAA,QAAA,GAC5DJ,SAAS,IAAI,IAAI,gBAChBO,cAAA,CAACS,mBAAS,EAAA;AACRlB,MAAAA,OAAO,EAAEA,OAAQ;AACjBmB,MAAAA,IAAI,EAAEjB,SAAU;AAChBG,MAAAA,SAAS,EAAEU,EAAE,CACXC,cAAM,CAACd,SAAS,EAChBA,SAAS,IAAI,EAAE,IAAIc,cAAM,CAACI,cAC5B,CAAA;KACD,CAAC,GACA,IAAI,EACPjB,OAAO,gBACNM,cAAA,CAACY,eAAO,EAAA;AAACC,MAAAA,OAAO,EAAEtB,OAAQ;AAACuB,MAAAA,QAAQ,EAAE,CAAE;AAAAjB,MAAAA,QAAA,EACpCE,GAAAA;KACM,CAAC,GAEVA,GACD,EACAJ,IAAI,gBAAGK,cAAA,CAACe,SAAI,EAAA;AAACC,MAAAA,IAAI,EAAEzB,OAAAA;AAAQ,KAAE,CAAC,GAAG,IAAI,EACrCM,QAAQ,CAAA;AAAA,GACL,CAAC,CAAA;AAEX,CACF,EAAC;AAEDV,OAAO,CAAC8B,WAAW,GAAG,SAAS;;;;"}

package/dist/cjs/breadcrumbs/Breadcrumbs.cjs

@@ -34,7 +34,13 @@ const Breadcrumbs = _ref => {
   react.useEffect(() => {
     const list = listRef.current;
     if (!list || typeof ResizeObserver === 'undefined') return;
-    const observer = new ResizeObserver(() => syncFade(list));
+    let hidden = list.clientWidth === 0;
+    const observer = new ResizeObserver(() => {
+      const wasHidden = hidden;
+      hidden = list.clientWidth === 0;
+      if (wasHidden && !hidden) list.scrollLeft = list.scrollWidth;
+      syncFade(list);
+    });
     observer.observe(list);
     return () => observer.disconnect();
   }, []);

package/dist/cjs/breadcrumbs/Breadcrumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react'\nimport type { HTMLAttributes, PointerEvent, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconChevronRight } from '../icons'\nimport { ActionElement, type ActionElementProps } from '../utils'\nimport styles from './Breadcrumbs.module.css'\n\nexport type BreadcrumbItem = ActionElementProps & {\n  label: ReactNode\n  children?: never\n}\n\nexport type BreadcrumbsProps = HTMLAttributes<HTMLElement> & {\n  items: BreadcrumbItem[]\n}\n\nconst syncFade = (list: HTMLElement) => {\n  list.toggleAttribute('data-fade-start', list.scrollLeft > 0)\n  list.toggleAttribute(\n    'data-fade-end',\n    list.scrollLeft < list.scrollWidth - list.clientWidth - 1,\n  )\n}\n\nconst syncTitle = (e: PointerEvent<HTMLElement>) => {\n  const el = (e.target as Element).closest('[data-label]')\n  if (!el) return\n  if (el.scrollWidth > el.clientWidth)\n    el.setAttribute('title', el.textContent ?? '')\n  else el.removeAttribute('title')\n}\n\nexport const Breadcrumbs = ({\n  items,\n  className,\n  ...rest\n}: BreadcrumbsProps) => {\n  const listRef = useRef<HTMLOListElement>(null)\n\n  useLayoutEffect(() => {\n    const list = listRef.current\n    if (!list) return\n    list.scrollLeft = list.scrollWidth\n    syncFade(list)\n  }, [items])\n\n  useEffect(() => {\n    const list = listRef.current\n    if (!list || typeof ResizeObserver === 'undefined') return\n    const observer = new ResizeObserver(() => syncFade(list))\n    observer.observe(list)\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <nav\n      aria-label='Breadcrumb'\n      className={cn(styles.nav, className)}\n      {...rest}\n    >\n      <ol\n        ref={listRef}\n        className={styles.list}\n        onScroll={(e) => syncFade(e.currentTarget)}\n        onPointerOver={syncTitle}\n      >\n        {items.map(({ label, ...itemProps }, index) => {\n          const labelAttrs =\n            itemProps.title === undefined ? { 'data-label': '' } : {}\n          if (index === items.length - 1) {\n            return (\n              <li key={index} className={styles.item}>\n                <span\n                  aria-current='page'\n                  className={cn(styles.label, styles.current)}\n                  {...labelAttrs}\n                >\n                  {label}\n                </span>\n              </li>\n            )\n          }\n          const interactive =\n            itemProps.href !== undefined || itemProps.onClick !== undefined\n          return (\n            <li key={index} className={styles.item}>\n              {interactive ? (\n                <ActionElement\n                  {...itemProps}\n                  {...labelAttrs}\n                  className={cn(styles.label, styles.link, itemProps.className)}\n                >\n                  {label}\n                </ActionElement>\n              ) : (\n                <span className={styles.label} {...labelAttrs}>\n                  {label}\n                </span>\n              )}\n              <IconChevronRight\n                className={styles.separator}\n                aria-hidden='true'\n              />\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n"],"names":["syncFade","list","toggleAttribute","scrollLeft","scrollWidth","clientWidth","syncTitle","e","el","target","closest","setAttribute","textContent","removeAttribute","Breadcrumbs","_ref","items","className","rest","listRef","useRef","useLayoutEffect","current","useEffect","ResizeObserver","observer","observe","disconnect","_jsx","cn","styles","nav","children","ref","onScroll","currentTarget","onPointerOver","map","_ref2","index","label","itemProps","labelAttrs","title","undefined","length","item","interactive","href","onClick","_jsxs","ActionElement","link","IconChevronRight","separator"],"mappings":"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"}
+{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../src/breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef } from 'react'\nimport type { HTMLAttributes, PointerEvent, ReactNode } from 'react'\n\nimport cn from 'classnames'\n\nimport { IconChevronRight } from '../icons'\nimport { ActionElement, type ActionElementProps } from '../utils'\nimport styles from './Breadcrumbs.module.css'\n\nexport type BreadcrumbItem = ActionElementProps & {\n  label: ReactNode\n  children?: never\n}\n\nexport type BreadcrumbsProps = HTMLAttributes<HTMLElement> & {\n  items: BreadcrumbItem[]\n}\n\nconst syncFade = (list: HTMLElement) => {\n  list.toggleAttribute('data-fade-start', list.scrollLeft > 0)\n  list.toggleAttribute(\n    'data-fade-end',\n    list.scrollLeft < list.scrollWidth - list.clientWidth - 1,\n  )\n}\n\nconst syncTitle = (e: PointerEvent<HTMLElement>) => {\n  const el = (e.target as Element).closest('[data-label]')\n  if (!el) return\n  if (el.scrollWidth > el.clientWidth)\n    el.setAttribute('title', el.textContent ?? '')\n  else el.removeAttribute('title')\n}\n\nexport const Breadcrumbs = ({\n  items,\n  className,\n  ...rest\n}: BreadcrumbsProps) => {\n  const listRef = useRef<HTMLOListElement>(null)\n\n  useLayoutEffect(() => {\n    const list = listRef.current\n    if (!list) return\n    list.scrollLeft = list.scrollWidth\n    syncFade(list)\n  }, [items])\n\n  useEffect(() => {\n    const list = listRef.current\n    if (!list || typeof ResizeObserver === 'undefined') return\n    let hidden = list.clientWidth === 0\n    const observer = new ResizeObserver(() => {\n      const wasHidden = hidden\n      hidden = list.clientWidth === 0\n      if (wasHidden && !hidden) list.scrollLeft = list.scrollWidth\n      syncFade(list)\n    })\n    observer.observe(list)\n    return () => observer.disconnect()\n  }, [])\n\n  return (\n    <nav\n      aria-label='Breadcrumb'\n      className={cn(styles.nav, className)}\n      {...rest}\n    >\n      <ol\n        ref={listRef}\n        className={styles.list}\n        onScroll={(e) => syncFade(e.currentTarget)}\n        onPointerOver={syncTitle}\n      >\n        {items.map(({ label, ...itemProps }, index) => {\n          const labelAttrs =\n            itemProps.title === undefined ? { 'data-label': '' } : {}\n          if (index === items.length - 1) {\n            return (\n              <li key={index} className={styles.item}>\n                <span\n                  aria-current='page'\n                  className={cn(styles.label, styles.current)}\n                  {...labelAttrs}\n                >\n                  {label}\n                </span>\n              </li>\n            )\n          }\n          const interactive =\n            itemProps.href !== undefined || itemProps.onClick !== undefined\n          return (\n            <li key={index} className={styles.item}>\n              {interactive ? (\n                <ActionElement\n                  {...itemProps}\n                  {...labelAttrs}\n                  className={cn(styles.label, styles.link, itemProps.className)}\n                >\n                  {label}\n                </ActionElement>\n              ) : (\n                <span className={styles.label} {...labelAttrs}>\n                  {label}\n                </span>\n              )}\n              <IconChevronRight\n                className={styles.separator}\n                aria-hidden='true'\n              />\n            </li>\n          )\n        })}\n      </ol>\n    </nav>\n  )\n}\n"],"names":["syncFade","list","toggleAttribute","scrollLeft","scrollWidth","clientWidth","syncTitle","e","el","target","closest","setAttribute","textContent","removeAttribute","Breadcrumbs","_ref","items","className","rest","listRef","useRef","useLayoutEffect","current","useEffect","ResizeObserver","hidden","observer","wasHidden","observe","disconnect","_jsx","cn","styles","nav","children","ref","onScroll","currentTarget","onPointerOver","map","_ref2","index","label","itemProps","labelAttrs","title","undefined","length","item","interactive","href","onClick","_jsxs","ActionElement","link","IconChevronRight","separator"],"mappings":"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"}

package/dist/cjs/data-list/DataList.module.css.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-const styles = {"card":"DataList-module_card__k21RE","divided":"DataList-module_divided__y48ZD","row":"DataList-module_row__d5UUl","mainRow":"DataList-module_mainRow__eAAA3","labelGroup":"DataList-module_labelGroup__-vCWZ","leadingIcon":"DataList-module_leadingIcon__6L9A9","label":"DataList-module_label__xl6By","info":"DataList-module_info__TF2HU","infoIcon":"DataList-module_infoIcon__czTXh","infoFaint":"DataList-module_infoFaint__lq3WZ","value":"DataList-module_value__oGp7D","valueOld":"DataList-module_valueOld__FuEV2","valueArrow":"DataList-module_valueArrow__7RRSA","descriptionRow":"DataList-module_descriptionRow__oZCWf","description":"DataList-module_description__biMHO","descriptionIcon":"DataList-module_descriptionIcon__pS1MU"};
+const styles = {"card":"DataList-module_card__k21RE","divided":"DataList-module_divided__y48ZD","row":"DataList-module_row__d5UUl","mainRow":"DataList-module_mainRow__eAAA3","labelGroup":"DataList-module_labelGroup__-vCWZ","leadingIcon":"DataList-module_leadingIcon__6L9A9","label":"DataList-module_label__xl6By","infoFaint":"DataList-module_infoFaint__lq3WZ","value":"DataList-module_value__oGp7D","valueOld":"DataList-module_valueOld__FuEV2","valueArrow":"DataList-module_valueArrow__7RRSA","descriptionRow":"DataList-module_descriptionRow__oZCWf","description":"DataList-module_description__biMHO"};
 
 module.exports = styles;
 //# sourceMappingURL=DataList.module.css.cjs.map

package/dist/cjs/data-list/DataListRow.cjs

@@ -5,8 +5,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const cn = require('classnames');
 const DataList_module = require('./DataList.module.css.cjs');
 const jsxRuntime = require('react/jsx-runtime');
-const Tooltip = require('../tooltip/Tooltip.cjs');
-const IconInfo = require('../icons/components/base/IconInfo.cjs');
+const InfoTooltip = require('../info-tooltip/InfoTooltip.cjs');
 
 const isChangeValue = value => typeof value === 'object' && value !== null && 'from' in value && 'to' in value;
 const DataListRow = _ref => {
@@ -38,12 +37,9 @@ const DataListRow = _ref => {
           className: DataList_module.label,
           "data-testid": dataTestId?.label,
           children: label
-        }), info ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
+        }), info ? /*#__PURE__*/jsxRuntime.jsx(InfoTooltip.InfoTooltip, {
           content: info,
-          className: cn(DataList_module.info, infoFaint && DataList_module.infoFaint),
-          children: /*#__PURE__*/jsxRuntime.jsx(IconInfo.IconInfo, {
-            className: DataList_module.infoIcon
-          })
+          className: cn(infoFaint && DataList_module.infoFaint)
         }) : null]
       }), isChangeValue(value) ? /*#__PURE__*/jsxRuntime.jsxs("span", {
         className: DataList_module.value,
@@ -69,12 +65,9 @@ const DataListRow = _ref => {
         className: DataList_module.description,
         "data-testid": dataTestId?.description,
         children: description
-      }), descriptionInfo ? /*#__PURE__*/jsxRuntime.jsx(Tooltip.Tooltip, {
+      }), descriptionInfo ? /*#__PURE__*/jsxRuntime.jsx(InfoTooltip.InfoTooltip, {
         content: descriptionInfo,
-        className: DataList_module.info,
-        children: /*#__PURE__*/jsxRuntime.jsx(IconInfo.IconInfo, {
-          className: DataList_module.descriptionIcon
-        })
+        tone: "tertiary"
       }) : null]
     }) : null]
   });

package/dist/cjs/data-list/DataListRow.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataListRow.cjs","sources":["../../../src/data-list/DataListRow.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport { IconInfo } from '../icons'\nimport cn from 'classnames'\nimport { Tooltip } from '../tooltip'\n\nimport styles from './DataList.module.css'\n\nexport type DetailRowValue = ReactNode | { from: ReactNode; to: ReactNode }\n\nexport type DataListRowDataTestId = {\n  root?: string\n  label?: string\n  value?: string\n  icon?: string\n  description?: string\n}\n\nexport type DetailRowProps = ComponentPropsWithoutRef<'div'> & {\n  label: ReactNode\n  value: DetailRowValue\n  icon?: ReactNode\n  info?: ReactNode\n  infoFaint?: boolean\n  description?: ReactNode\n  descriptionInfo?: ReactNode\n  dataTestId?: DataListRowDataTestId\n}\n\nconst isChangeValue = (\n  value: DetailRowValue,\n): value is { from: ReactNode; to: ReactNode } =>\n  typeof value === 'object' &&\n  value !== null &&\n  'from' in value &&\n  'to' in value\n\nexport const DataListRow = ({\n  label,\n  value,\n  icon,\n  info,\n  infoFaint = false,\n  description,\n  descriptionInfo,\n  className,\n  dataTestId,\n  ...rest\n}: DetailRowProps) => (\n  <div\n    className={cn(styles.row, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <span className={styles.mainRow}>\n      <span className={styles.labelGroup}>\n        {icon ? (\n          <span className={styles.leadingIcon} data-testid={dataTestId?.icon}>\n            {icon}\n          </span>\n        ) : null}\n        <span className={styles.label} data-testid={dataTestId?.label}>\n          {label}\n        </span>\n        {info ? (\n          <Tooltip\n            content={info}\n            className={cn(styles.info, infoFaint && styles.infoFaint)}\n          >\n            <IconInfo className={styles.infoIcon} />\n          </Tooltip>\n        ) : null}\n      </span>\n      {isChangeValue(value) ? (\n        <span className={styles.value} data-testid={dataTestId?.value}>\n          <span className={styles.valueOld}>{value.from}</span>\n          <span className={styles.valueArrow} aria-hidden='true'>\n            →\n          </span>\n          <span>{value.to}</span>\n        </span>\n      ) : (\n        <span className={styles.value} data-testid={dataTestId?.value}>\n          {value}\n        </span>\n      )}\n    </span>\n    {description ? (\n      <span className={styles.descriptionRow}>\n        <span\n          className={styles.description}\n          data-testid={dataTestId?.description}\n        >\n          {description}\n        </span>\n        {descriptionInfo ? (\n          <Tooltip content={descriptionInfo} className={styles.info}>\n            <IconInfo className={styles.descriptionIcon} />\n          </Tooltip>\n        ) : null}\n      </span>\n    ) : null}\n  </div>\n)\n"],"names":["isChangeValue","value","DataListRow","_ref","label","icon","info","infoFaint","description","descriptionInfo","className","dataTestId","rest","_jsxs","cn","styles","row","root","children","mainRow","labelGroup","_jsx","leadingIcon","Tooltip","content","IconInfo","infoIcon","valueOld","from","valueArrow","to","descriptionRow","descriptionIcon"],"mappings":";;;;;;;;;;AA6BA,MAAMA,aAAa,GACjBC,KAAqB,IAErB,OAAOA,KAAK,KAAK,QAAQ,IACzBA,KAAK,KAAK,IAAI,IACd,MAAM,IAAIA,KAAK,IACf,IAAI,IAAIA,KAAK,CAAA;AAER,MAAMC,WAAW,GAAGC,IAAA,IAAA;EAAA,IAAC;IAC1BC,KAAK;IACLH,KAAK;IACLI,IAAI;IACJC,IAAI;AACJC,IAAAA,SAAS,GAAG,KAAK;IACjBC,WAAW;IACXC,eAAe;IACfC,SAAS;IACTC,UAAU;IACV,GAAGC,IAAAA;AACW,GAAC,GAAAT,IAAA,CAAA;AAAA,EAAA,oBACfU,eAAA,CAAA,KAAA,EAAA;IACEH,SAAS,EAAEI,EAAE,CAACC,eAAM,CAACC,GAAG,EAAEN,SAAS,CAAE;IACrC,aAAaC,EAAAA,UAAU,EAAEM,IAAK;AAAA,IAAA,GAC1BL,IAAI;AAAAM,IAAAA,QAAA,gBAERL,eAAA,CAAA,MAAA,EAAA;MAAMH,SAAS,EAAEK,eAAM,CAACI,OAAQ;AAAAD,MAAAA,QAAA,gBAC9BL,eAAA,CAAA,MAAA,EAAA;QAAMH,SAAS,EAAEK,eAAM,CAACK,UAAW;QAAAF,QAAA,EAAA,CAChCb,IAAI,gBACHgB,cAAA,CAAA,MAAA,EAAA;UAAMX,SAAS,EAAEK,eAAM,CAACO,WAAY;UAAC,aAAaX,EAAAA,UAAU,EAAEN,IAAK;AAAAa,UAAAA,QAAA,EAChEb,IAAAA;AAAI,SACD,CAAC,GACL,IAAI,eACRgB,cAAA,CAAA,MAAA,EAAA;UAAMX,SAAS,EAAEK,eAAM,CAACX,KAAM;UAAC,aAAaO,EAAAA,UAAU,EAAEP,KAAM;AAAAc,UAAAA,QAAA,EAC3Dd,KAAAA;AAAK,SACF,CAAC,EACNE,IAAI,gBACHe,cAAA,CAACE,eAAO,EAAA;AACNC,UAAAA,OAAO,EAAElB,IAAK;AACdI,UAAAA,SAAS,EAAEI,EAAE,CAACC,eAAM,CAACT,IAAI,EAAEC,SAAS,IAAIQ,eAAM,CAACR,SAAS,CAAE;UAAAW,QAAA,eAE1DG,cAAA,CAACI,iBAAQ,EAAA;YAACf,SAAS,EAAEK,eAAM,CAACW,QAAAA;WAAW,CAAA;SAChC,CAAC,GACR,IAAI,CAAA;AAAA,OACJ,CAAC,EACN1B,aAAa,CAACC,KAAK,CAAC,gBACnBY,eAAA,CAAA,MAAA,EAAA;QAAMH,SAAS,EAAEK,eAAM,CAACd,KAAM;QAAC,aAAaU,EAAAA,UAAU,EAAEV,KAAM;AAAAiB,QAAAA,QAAA,gBAC5DG,cAAA,CAAA,MAAA,EAAA;UAAMX,SAAS,EAAEK,eAAM,CAACY,QAAS;UAAAT,QAAA,EAAEjB,KAAK,CAAC2B,IAAAA;SAAW,CAAC,eACrDP,cAAA,CAAA,MAAA,EAAA;UAAMX,SAAS,EAAEK,eAAM,CAACc,UAAW;AAAC,UAAA,aAAA,EAAY,MAAM;AAAAX,UAAAA,QAAA,EAAC,QAAA;SAEjD,CAAC,eACPG,cAAA,CAAA,MAAA,EAAA;UAAAH,QAAA,EAAOjB,KAAK,CAAC6B,EAAAA;AAAE,SAAO,CAAC,CAAA;OACnB,CAAC,gBAEPT,cAAA,CAAA,MAAA,EAAA;QAAMX,SAAS,EAAEK,eAAM,CAACd,KAAM;QAAC,aAAaU,EAAAA,UAAU,EAAEV,KAAM;AAAAiB,QAAAA,QAAA,EAC3DjB,KAAAA;AAAK,OACF,CACP,CAAA;AAAA,KACG,CAAC,EACNO,WAAW,gBACVK,eAAA,CAAA,MAAA,EAAA;MAAMH,SAAS,EAAEK,eAAM,CAACgB,cAAe;AAAAb,MAAAA,QAAA,gBACrCG,cAAA,CAAA,MAAA,EAAA;QACEX,SAAS,EAAEK,eAAM,CAACP,WAAY;QAC9B,aAAaG,EAAAA,UAAU,EAAEH,WAAY;AAAAU,QAAAA,QAAA,EAEpCV,WAAAA;AAAW,OACR,CAAC,EACNC,eAAe,gBACdY,cAAA,CAACE,eAAO,EAAA;AAACC,QAAAA,OAAO,EAAEf,eAAgB;QAACC,SAAS,EAAEK,eAAM,CAACT,IAAK;QAAAY,QAAA,eACxDG,cAAA,CAACI,iBAAQ,EAAA;UAACf,SAAS,EAAEK,eAAM,CAACiB,eAAAA;SAAkB,CAAA;OACvC,CAAC,GACR,IAAI,CAAA;KACJ,CAAC,GACL,IAAI,CAAA;AAAA,GACL,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"DataListRow.cjs","sources":["../../../src/data-list/DataListRow.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef, ReactNode } from 'react'\n\nimport cn from 'classnames'\nimport { InfoTooltip } from '../info-tooltip'\n\nimport styles from './DataList.module.css'\n\nexport type DetailRowValue = ReactNode | { from: ReactNode; to: ReactNode }\n\nexport type DataListRowDataTestId = {\n  root?: string\n  label?: string\n  value?: string\n  icon?: string\n  description?: string\n}\n\nexport type DetailRowProps = ComponentPropsWithoutRef<'div'> & {\n  label: ReactNode\n  value: DetailRowValue\n  icon?: ReactNode\n  info?: ReactNode\n  infoFaint?: boolean\n  description?: ReactNode\n  descriptionInfo?: ReactNode\n  dataTestId?: DataListRowDataTestId\n}\n\nconst isChangeValue = (\n  value: DetailRowValue,\n): value is { from: ReactNode; to: ReactNode } =>\n  typeof value === 'object' &&\n  value !== null &&\n  'from' in value &&\n  'to' in value\n\nexport const DataListRow = ({\n  label,\n  value,\n  icon,\n  info,\n  infoFaint = false,\n  description,\n  descriptionInfo,\n  className,\n  dataTestId,\n  ...rest\n}: DetailRowProps) => (\n  <div\n    className={cn(styles.row, className)}\n    data-testid={dataTestId?.root}\n    {...rest}\n  >\n    <span className={styles.mainRow}>\n      <span className={styles.labelGroup}>\n        {icon ? (\n          <span className={styles.leadingIcon} data-testid={dataTestId?.icon}>\n            {icon}\n          </span>\n        ) : null}\n        <span className={styles.label} data-testid={dataTestId?.label}>\n          {label}\n        </span>\n        {info ? (\n          <InfoTooltip\n            content={info}\n            className={cn(infoFaint && styles.infoFaint)}\n          />\n        ) : null}\n      </span>\n      {isChangeValue(value) ? (\n        <span className={styles.value} data-testid={dataTestId?.value}>\n          <span className={styles.valueOld}>{value.from}</span>\n          <span className={styles.valueArrow} aria-hidden='true'>\n            →\n          </span>\n          <span>{value.to}</span>\n        </span>\n      ) : (\n        <span className={styles.value} data-testid={dataTestId?.value}>\n          {value}\n        </span>\n      )}\n    </span>\n    {description ? (\n      <span className={styles.descriptionRow}>\n        <span\n          className={styles.description}\n          data-testid={dataTestId?.description}\n        >\n          {description}\n        </span>\n        {descriptionInfo ? (\n          <InfoTooltip content={descriptionInfo} tone='tertiary' />\n        ) : null}\n      </span>\n    ) : null}\n  </div>\n)\n"],"names":["isChangeValue","value","DataListRow","_ref","label","icon","info","infoFaint","description","descriptionInfo","className","dataTestId","rest","_jsxs","cn","styles","row","root","children","mainRow","labelGroup","_jsx","leadingIcon","InfoTooltip","content","valueOld","from","valueArrow","to","descriptionRow","tone"],"mappings":"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"}

package/dist/cjs/index.cjs

@@ -178,6 +178,7 @@ const Hidden = require('./hidden/Hidden.cjs');
 const IconButton = require('./icon-button/IconButton.cjs');
 const CloseButton = require('./icon-button/CloseButton.cjs');
 const Identicon = require('./identicon/Identicon.cjs');
+const InfoTooltip = require('./info-tooltip/InfoTooltip.cjs');
 const Input = require('./input/Input.cjs');
 const LinkProvider = require('./link-provider/LinkProvider.cjs');
 const Logo = require('./logo/Logo.cjs');
@@ -188,7 +189,6 @@ const Notification = require('./notification/Notification.cjs');
 const Layout = require('./page-layout/Layout.cjs');
 const Main = require('./page-layout/Main.cjs');
 const PageContent = require('./page-layout/PageContent.cjs');
-const MobilePageTitle = require('./page-layout/MobilePageTitle.cjs');
 const Pagination = require('./pagination/Pagination.cjs');
 const Popover = require('./popover/Popover.cjs');
 const RadioButton = require('./radio-button/RadioButton.cjs');
@@ -206,7 +206,6 @@ const SidebarLayout = require('./sidebar/SidebarLayout.cjs');
 const SidebarToggle = require('./sidebar/SidebarToggle.cjs');
 const useSidebarDrawer = require('./sidebar/useSidebarDrawer.cjs');
 const SidebarContext = require('./sidebar/SidebarContext.cjs');
-const SidebarHeaderStart = require('./sidebar/SidebarHeaderStart.cjs');
 const Skeleton = require('./skeleton/Skeleton.cjs');
 const SkipLink = require('./skip-link/SkipLink.cjs');
 const Slider = require('./slider/Slider.cjs');
@@ -225,7 +224,8 @@ const Tooltip = require('./tooltip/Tooltip.cjs');
 const TxStatus = require('./tx-status/TxStatus.cjs');
 const Typography = require('./typography/Typography.cjs');
 
-
+/** Unstyled in app-ui (relies on `--lido-ui-*` tokens); prefer `ThemeSwitcher`. */
+const ThemeToggler = lidoSharedUi.ThemeToggler;
 
 exports.TokenIcon = TokenIcon.TokenIcon;
 exports.isTokenIcon = TokenIcon.isTokenIcon;
@@ -403,6 +403,7 @@ exports.Hidden = Hidden.Hidden;
 exports.IconButton = IconButton.IconButton;
 exports.CloseButton = CloseButton.CloseButton;
 exports.Identicon = Identicon.Identicon;
+exports.InfoTooltip = InfoTooltip.InfoTooltip;
 exports.Input = Input.Input;
 exports.LinkProvider = LinkProvider.LinkProvider;
 exports.Logo = Logo.Logo;
@@ -413,7 +414,6 @@ exports.Notification = Notification.Notification;
 exports.Layout = Layout.Layout;
 exports.Main = Main.Main;
 exports.PageContent = PageContent.PageContent;
-exports.MobilePageTitle = MobilePageTitle.MobilePageTitle;
 exports.Pagination = Pagination.Pagination;
 exports.Popover = Popover.Popover;
 exports.RadioButton = RadioButton.RadioButton;
@@ -431,7 +431,6 @@ exports.SidebarLayout = SidebarLayout.SidebarLayout;
 exports.SidebarToggle = SidebarToggle.SidebarToggle;
 exports.useSidebarDrawer = useSidebarDrawer.useSidebarDrawer;
 exports.useSidebar = SidebarContext.useSidebar;
-exports.SidebarHeaderStart = SidebarHeaderStart.SidebarHeaderStart;
 exports.Skeleton = Skeleton.Skeleton;
 exports.SkipLink = SkipLink.SkipLink;
 exports.Slider = Slider.Slider;
@@ -456,6 +455,7 @@ exports.H1 = Typography.H1;
 exports.H2 = Typography.H2;
 exports.H3 = Typography.H3;
 exports.Typography = Typography.Typography;
+exports.ThemeToggler = ThemeToggler;
 Object.keys(lidoSharedUi).forEach(k => {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../../src/index.ts"],"sourcesContent":["import { ThemeToggler as SharedThemeToggler } from '@lidofinance/lido-shared-ui'\n\nexport * from './icons'\n\nexport * from './accordion'\nexport * from './address'\nexport * from './address-button'\nexport * from './badge'\nexport * from './banner'\nexport * from './breadcrumbs'\nexport * from './button'\nexport * from './card'\nexport * from './checkbox'\nexport * from './copy'\nexport * from './counter'\nexport * from './data-list'\nexport * from './disclaimer'\nexport * from './divider'\nexport * from './error-page'\nexport * from './footer'\nexport * from './grid'\nexport * from './header'\nexport * from './hex'\nexport * from './hidden'\nexport * from './icon-button'\nexport * from './identicon'\nexport * from './info-tooltip'\nexport * from './input'\nexport * from './link-provider'\nexport * from './logo'\nexport * from './message-box'\nexport * from './modal'\nexport * from './nav-link'\nexport * from './notification'\nexport * from './page-layout'\nexport * from './pagination'\nexport * from './popover'\nexport * from './radio-button'\nexport * from './rich-input'\nexport * from './section-title'\nexport * from './segmented-control'\nexport * from './sidebar'\nexport * from './skeleton'\nexport * from './skip-link'\nexport * from './slider'\nexport * from './small-card'\nexport * from './stack'\nexport * from './stat-item'\nexport * from './switch'\nexport * from './tabs'\nexport * from './tag'\nexport * from './text-link'\nexport * from './theme-switcher'\nexport * from './token-amount'\nexport * from './token-selector'\nexport * from './tooltip'\nexport * from './tx-status'\nexport * from './typography'\nexport type { Breakpoint, Responsive, Space } from './utils'\n\n// Everything lido-shared-ui exposes is re-exported, so app products get the\n// same non-production banner and theming primitives as the landing. Their\n// styles come in through src/styles/global.css.\nexport * from '@lidofinance/lido-shared-ui'\n\n/** Unstyled in app-ui (relies on `--lido-ui-*` tokens); prefer `ThemeSwitcher`. */\nexport const ThemeToggler = SharedThemeToggler\n"],"names":["ThemeToggler","SharedThemeToggler"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiEA;AACO,MAAMA,YAAY,GAAGC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}