@lidofinance/lido-ui 3.41.0 → 3.42.1

package/dist/cjs/accordion/useExpanded.js

@@ -2,34 +2,27 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const React = require('react');
-const _useCollapse = require('react-collapsed');
+const reactCollapsed = require('react-collapsed');
 
-//@ts-expect-error Property default doesn't exist on type
-const useCollapse = _useCollapse.default || _useCollapse;
 const useExpanded = _ref => {
   let {
     defaultExpanded = false,
     onExpand,
     onCollapse
   } = _ref;
-  const [isExpanded, setExpanded] = React.useState(defaultExpanded);
-  React.useEffect(() => {
-    setExpanded(defaultExpanded);
-  }, [defaultExpanded]);
-  const handleToggle = React.useCallback(() => setExpanded(previous => !previous), []);
   const {
     getToggleProps,
-    getCollapseProps
-  } = useCollapse({
-    isExpanded,
-    onExpandEnd: onExpand,
-    onCollapseEnd: onCollapse
+    getCollapseProps,
+    isExpanded
+  } = reactCollapsed.useCollapse({
+    defaultExpanded,
+    onTransitionStateChange: state => {
+      if (state === 'expandEnd') onExpand?.();
+      if (state === 'collapseEnd') onCollapse?.();
+    }
   });
   return {
-    toggleProps: getToggleProps({
-      onClick: handleToggle
-    }),
+    toggleProps: getToggleProps(),
     collapseProps: getCollapseProps(),
     isExpanded
   };

package/dist/cjs/accordion/useExpanded.js.map

@@ -1 +1 @@
-{"version":3,"file":"useExpanded.js","sources":["../../../packages/accordion/useExpanded.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { AccordionProps } from './types.js'\nimport _useCollapse from 'react-collapsed'\nimport {\n  GetCollapsePropsOutput,\n  GetTogglePropsOutput,\n} from 'react-collapsed/dist/types.js'\n\n//@ts-expect-error Property default doesn't exist on type\nconst useCollapse: typeof _useCollapse = _useCollapse.default || _useCollapse\n\ntype UseExpanded = (\n  props: Pick<AccordionProps, 'defaultExpanded' | 'onExpand' | 'onCollapse'>,\n) => {\n  toggleProps: GetTogglePropsOutput\n  collapseProps: GetCollapsePropsOutput\n  isExpanded: boolean\n}\n\nexport const useExpanded: UseExpanded = ({\n  defaultExpanded = false,\n  onExpand,\n  onCollapse,\n}) => {\n  const [isExpanded, setExpanded] = useState(defaultExpanded)\n\n  useEffect(() => {\n    setExpanded(defaultExpanded)\n  }, [defaultExpanded])\n\n  const handleToggle = useCallback(\n    () => setExpanded((previous) => !previous),\n    [],\n  )\n\n  const { getToggleProps, getCollapseProps } = useCollapse({\n    isExpanded,\n    onExpandEnd: onExpand,\n    onCollapseEnd: onCollapse,\n  })\n\n  return {\n    toggleProps: getToggleProps({ onClick: handleToggle }),\n    collapseProps: getCollapseProps(),\n    isExpanded,\n  }\n}\n"],"names":["useCollapse","_useCollapse","default","useExpanded","_ref","defaultExpanded","onExpand","onCollapse","isExpanded","setExpanded","useState","useEffect","handleToggle","useCallback","previous","getToggleProps","getCollapseProps","onExpandEnd","onCollapseEnd","toggleProps","onClick","collapseProps"],"mappings":";;;;;;;AAQA;AACA,MAAMA,WAAgC,GAAGC,YAAY,CAACC,OAAO,IAAID,YAAY,CAAA;AAUhEE,MAAAA,WAAwB,GAAGC,IAAA,IAIlC;EAAA,IAJmC;AACvCC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;AACRC,IAAAA,UAAAA;AACF,GAAC,GAAAH,IAAA,CAAA;EACC,MAAM,CAACI,UAAU,EAAEC,WAAW,CAAC,GAAGC,cAAQ,CAACL,eAAe,CAAC,CAAA;AAE3DM,EAAAA,eAAS,CAAC,MAAM;IACdF,WAAW,CAACJ,eAAe,CAAC,CAAA;AAC9B,GAAC,EAAE,CAACA,eAAe,CAAC,CAAC,CAAA;AAErB,EAAA,MAAMO,YAAY,GAAGC,iBAAW,CAC9B,MAAMJ,WAAW,CAAEK,QAAQ,IAAK,CAACA,QAAQ,CAAC,EAC1C,EACF,CAAC,CAAA;EAED,MAAM;IAAEC,cAAc;AAAEC,IAAAA,gBAAAA;GAAkB,GAAGhB,WAAW,CAAC;IACvDQ,UAAU;AACVS,IAAAA,WAAW,EAAEX,QAAQ;AACrBY,IAAAA,aAAa,EAAEX,UAAAA;AACjB,GAAC,CAAC,CAAA;EAEF,OAAO;IACLY,WAAW,EAAEJ,cAAc,CAAC;AAAEK,MAAAA,OAAO,EAAER,YAAAA;AAAa,KAAC,CAAC;IACtDS,aAAa,EAAEL,gBAAgB,EAAE;AACjCR,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"useExpanded.js","sources":["../../../packages/accordion/useExpanded.ts"],"sourcesContent":["import { useCollapse } from 'react-collapsed'\nimport { AccordionProps } from './types.js'\n\nexport const useExpanded = ({\n  defaultExpanded = false,\n  onExpand,\n  onCollapse,\n}: Pick<AccordionProps, 'defaultExpanded' | 'onExpand' | 'onCollapse'>) => {\n  const { getToggleProps, getCollapseProps, isExpanded } = useCollapse({\n    defaultExpanded,\n    onTransitionStateChange: (state) => {\n      if (state === 'expandEnd') onExpand?.()\n      if (state === 'collapseEnd') onCollapse?.()\n    },\n  })\n\n  return {\n    toggleProps: getToggleProps(),\n    collapseProps: getCollapseProps(),\n    isExpanded,\n  }\n}\n"],"names":["useExpanded","_ref","defaultExpanded","onExpand","onCollapse","getToggleProps","getCollapseProps","isExpanded","useCollapse","onTransitionStateChange","state","toggleProps","collapseProps"],"mappings":";;;;;;AAGaA,MAAAA,WAAW,GAAGC,IAAA,IAIgD;EAAA,IAJ/C;AAC1BC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;AACRC,IAAAA,UAAAA;AACmE,GAAC,GAAAH,IAAA,CAAA;EACpE,MAAM;IAAEI,cAAc;IAAEC,gBAAgB;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,0BAAW,CAAC;IACnEN,eAAe;IACfO,uBAAuB,EAAGC,KAAK,IAAK;AAClC,MAAA,IAAIA,KAAK,KAAK,WAAW,EAAEP,QAAQ,IAAI,CAAA;AACvC,MAAA,IAAIO,KAAK,KAAK,aAAa,EAAEN,UAAU,IAAI,CAAA;AAC7C,KAAA;AACF,GAAC,CAAC,CAAA;EAEF,OAAO;IACLO,WAAW,EAAEN,cAAc,EAAE;IAC7BO,aAAa,EAAEN,gBAAgB,EAAE;AACjCC,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}

package/dist/cjs/accordion-transparent/useExpanded.js

@@ -2,34 +2,27 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const React = require('react');
-const _useCollapse = require('react-collapsed');
+const reactCollapsed = require('react-collapsed');
 
-//@ts-expect-error Property default doesn't exist on type
-const useCollapse = _useCollapse.default || _useCollapse;
 const useExpanded = _ref => {
   let {
     defaultExpanded = false,
     onExpand,
     onCollapse
   } = _ref;
-  const [isExpanded, setExpanded] = React.useState(defaultExpanded);
-  React.useEffect(() => {
-    setExpanded(defaultExpanded);
-  }, [defaultExpanded]);
-  const handleToggle = React.useCallback(() => setExpanded(previous => !previous), []);
   const {
     getToggleProps,
-    getCollapseProps
-  } = useCollapse({
-    isExpanded,
-    onExpandEnd: onExpand,
-    onCollapseEnd: onCollapse
+    getCollapseProps,
+    isExpanded
+  } = reactCollapsed.useCollapse({
+    defaultExpanded,
+    onTransitionStateChange: state => {
+      if (state === 'expandEnd') onExpand?.();
+      if (state === 'collapseEnd') onCollapse?.();
+    }
   });
   return {
-    toggleProps: getToggleProps({
-      onClick: handleToggle
-    }),
+    toggleProps: getToggleProps(),
     collapseProps: getCollapseProps(),
     isExpanded
   };

package/dist/cjs/accordion-transparent/useExpanded.js.map

@@ -1 +1 @@
-{"version":3,"file":"useExpanded.js","sources":["../../../packages/accordion-transparent/useExpanded.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { AccordionTransparentProps } from './types.js'\nimport _useCollapse from 'react-collapsed'\nimport {\n  GetCollapsePropsOutput,\n  GetTogglePropsOutput,\n} from 'react-collapsed/dist/types.js'\n\n//@ts-expect-error Property default doesn't exist on type\nconst useCollapse: typeof _useCollapse = _useCollapse.default || _useCollapse\n\ntype UseExpanded = (\n  props: Pick<\n    AccordionTransparentProps,\n    'defaultExpanded' | 'onExpand' | 'onCollapse'\n  >,\n) => {\n  toggleProps: GetTogglePropsOutput\n  collapseProps: GetCollapsePropsOutput\n  isExpanded: boolean\n}\n\nexport const useExpanded: UseExpanded = ({\n  defaultExpanded = false,\n  onExpand,\n  onCollapse,\n}) => {\n  const [isExpanded, setExpanded] = useState(defaultExpanded)\n\n  useEffect(() => {\n    setExpanded(defaultExpanded)\n  }, [defaultExpanded])\n\n  const handleToggle = useCallback(\n    () => setExpanded((previous) => !previous),\n    [],\n  )\n\n  const { getToggleProps, getCollapseProps } = useCollapse({\n    isExpanded,\n    onExpandEnd: onExpand,\n    onCollapseEnd: onCollapse,\n  })\n\n  return {\n    toggleProps: getToggleProps({ onClick: handleToggle }),\n    collapseProps: getCollapseProps(),\n    isExpanded,\n  }\n}\n"],"names":["useCollapse","_useCollapse","default","useExpanded","_ref","defaultExpanded","onExpand","onCollapse","isExpanded","setExpanded","useState","useEffect","handleToggle","useCallback","previous","getToggleProps","getCollapseProps","onExpandEnd","onCollapseEnd","toggleProps","onClick","collapseProps"],"mappings":";;;;;;;AAQA;AACA,MAAMA,WAAgC,GAAGC,YAAY,CAACC,OAAO,IAAID,YAAY,CAAA;AAahEE,MAAAA,WAAwB,GAAGC,IAAA,IAIlC;EAAA,IAJmC;AACvCC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;AACRC,IAAAA,UAAAA;AACF,GAAC,GAAAH,IAAA,CAAA;EACC,MAAM,CAACI,UAAU,EAAEC,WAAW,CAAC,GAAGC,cAAQ,CAACL,eAAe,CAAC,CAAA;AAE3DM,EAAAA,eAAS,CAAC,MAAM;IACdF,WAAW,CAACJ,eAAe,CAAC,CAAA;AAC9B,GAAC,EAAE,CAACA,eAAe,CAAC,CAAC,CAAA;AAErB,EAAA,MAAMO,YAAY,GAAGC,iBAAW,CAC9B,MAAMJ,WAAW,CAAEK,QAAQ,IAAK,CAACA,QAAQ,CAAC,EAC1C,EACF,CAAC,CAAA;EAED,MAAM;IAAEC,cAAc;AAAEC,IAAAA,gBAAAA;GAAkB,GAAGhB,WAAW,CAAC;IACvDQ,UAAU;AACVS,IAAAA,WAAW,EAAEX,QAAQ;AACrBY,IAAAA,aAAa,EAAEX,UAAAA;AACjB,GAAC,CAAC,CAAA;EAEF,OAAO;IACLY,WAAW,EAAEJ,cAAc,CAAC;AAAEK,MAAAA,OAAO,EAAER,YAAAA;AAAa,KAAC,CAAC;IACtDS,aAAa,EAAEL,gBAAgB,EAAE;AACjCR,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"useExpanded.js","sources":["../../../packages/accordion-transparent/useExpanded.ts"],"sourcesContent":["import { useCollapse } from 'react-collapsed'\nimport { AccordionTransparentProps } from './types.js'\n\nexport const useExpanded = ({\n  defaultExpanded = false,\n  onExpand,\n  onCollapse,\n}: Pick<\n  AccordionTransparentProps,\n  'defaultExpanded' | 'onExpand' | 'onCollapse'\n>) => {\n  const { getToggleProps, getCollapseProps, isExpanded } = useCollapse({\n    defaultExpanded,\n    onTransitionStateChange: (state) => {\n      if (state === 'expandEnd') onExpand?.()\n      if (state === 'collapseEnd') onCollapse?.()\n    },\n  })\n\n  return {\n    toggleProps: getToggleProps(),\n    collapseProps: getCollapseProps(),\n    isExpanded,\n  }\n}\n"],"names":["useExpanded","_ref","defaultExpanded","onExpand","onCollapse","getToggleProps","getCollapseProps","isExpanded","useCollapse","onTransitionStateChange","state","toggleProps","collapseProps"],"mappings":";;;;;;AAGaA,MAAAA,WAAW,GAAGC,IAAA,IAOrB;EAAA,IAPsB;AAC1BC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;AACRC,IAAAA,UAAAA;AAIF,GAAC,GAAAH,IAAA,CAAA;EACC,MAAM;IAAEI,cAAc;IAAEC,gBAAgB;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,0BAAW,CAAC;IACnEN,eAAe;IACfO,uBAAuB,EAAGC,KAAK,IAAK;AAClC,MAAA,IAAIA,KAAK,KAAK,WAAW,EAAEP,QAAQ,IAAI,CAAA;AACvC,MAAA,IAAIO,KAAK,KAAK,aAAa,EAAEN,UAAU,IAAI,CAAA;AAC7C,KAAA;AACF,GAAC,CAAC,CAAA;EAEF,OAAO;IACLO,WAAW,EAAEN,cAAc,EAAE;IAC7BO,aAAa,EAAEN,gBAAgB,EAAE;AACjCC,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}

package/dist/cjs/index.js

@@ -74,6 +74,8 @@ const HStack = require('./stack/HStack.js');
 const VStack = require('./stack/VStack.js');
 const types$e = require('./stack/types.js');
 const withStyledSystem = require('./styled-system/withStyledSystem.js');
+const Switcher = require('./switcher/Switcher.js');
+const SwitcherItem = require('./switcher/SwitcherItem.js');
 const Table = require('./table/Table.js');
 const Thead = require('./table/Thead.js');
 const Tbody = require('./table/Tbody.js');
@@ -300,6 +302,8 @@ exports.StackJustify = types$e.StackJustify;
 exports.StackSpacing = types$e.StackSpacing;
 exports.StackWrap = types$e.StackWrap;
 exports.withStyledSystem = withStyledSystem;
+exports.Switcher = Switcher.Switcher;
+exports.SwitcherItem = SwitcherItem.SwitcherItem;
 exports.Table = Table.Table;
 exports.Thead = Thead.Thead;
 exports.Tbody = Tbody.Tbody;

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/switcher/Switcher.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+require('../utils/styled-components-wrapper.js');
+require('use-callback-ref');
+const useIsomorphicLayoutEffect = require('../hooks/useIsomorphicLayoutEffect.js');
+require('../theme/cookie-theme-provider.js');
+require('../theme/theme-provider.js');
+const jsxRuntime = require('react/jsx-runtime');
+require('../theme/document-head-contents/element-theme-colors.js');
+require('../utils/modalRoot.js');
+require('../utils/cookies-client-side.js');
+require('../theme/constants.js');
+require('../theme/utils/set-theme-cookie.js');
+require('../theme/themes.js');
+const SwitcherStyles = require('./SwitcherStyles.js');
+
+const Switcher = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  const listRef = React.useRef(null);
+  const setRefs = React.useCallback(node => {
+    listRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+      return;
+    }
+    if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+  useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+    const listNode = listRef.current;
+    if (!listNode) return undefined;
+    let rafId = 0;
+    const updateIndicator = () => {
+      const activeItem = listNode.querySelector('[role="tab"][aria-selected="true"]');
+      if (!activeItem) {
+        listNode.style.setProperty('--switcher-indicator-left', '0px');
+        listNode.style.setProperty('--switcher-indicator-width', '0px');
+        return;
+      }
+      const listRect = listNode.getBoundingClientRect();
+      const itemRect = activeItem.getBoundingClientRect();
+      const left = itemRect.left - listRect.left + listNode.scrollLeft;
+      listNode.style.setProperty('--switcher-indicator-left', `${left}px`);
+      listNode.style.setProperty('--switcher-indicator-width', `${itemRect.width}px`);
+    };
+    const scheduleUpdate = () => {
+      if (rafId) {
+        window.cancelAnimationFrame(rafId);
+      }
+      rafId = window.requestAnimationFrame(updateIndicator);
+    };
+    updateIndicator();
+    scheduleUpdate();
+    listNode.addEventListener('scroll', scheduleUpdate, {
+      passive: true
+    });
+    window.addEventListener('resize', scheduleUpdate);
+    const mutationObserver = typeof MutationObserver === 'undefined' ? null : new MutationObserver(scheduleUpdate);
+    mutationObserver?.observe(listNode, {
+      attributes: true,
+      subtree: true,
+      attributeFilter: ['aria-selected']
+    });
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleUpdate);
+    resizeObserver?.observe(listNode);
+    listNode.querySelectorAll('[role="tab"]').forEach(tab => resizeObserver?.observe(tab));
+    if (typeof document !== 'undefined' && 'fonts' in document) {
+      void document.fonts.ready.then(scheduleUpdate);
+    }
+    return () => {
+      if (rafId) {
+        window.cancelAnimationFrame(rafId);
+      }
+      listNode.removeEventListener('scroll', scheduleUpdate);
+      window.removeEventListener('resize', scheduleUpdate);
+      mutationObserver?.disconnect();
+      resizeObserver?.disconnect();
+    };
+  }, [children]);
+  return /*#__PURE__*/jsxRuntime.jsxs(SwitcherStyles.SwitcherListStyle, {
+    role: "tablist",
+    ref: setRefs,
+    ...rest,
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(SwitcherStyles.SwitcherIndicatorStyle, {
+      "aria-hidden": true
+    })]
+  });
+});
+Switcher.displayName = 'Switcher';
+
+exports.Switcher = Switcher;
+//# sourceMappingURL=Switcher.js.map

package/dist/cjs/switcher/Switcher.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switcher.js","sources":["../../../packages/switcher/Switcher.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useCallback, useRef } from 'react'\nimport { useIsomorphicLayoutEffect } from '../hooks'\nimport { SwitcherProps } from './types.js'\nimport { SwitcherIndicatorStyle, SwitcherListStyle } from './SwitcherStyles.js'\n\n/**\n * Segmented control container for SwitcherItem options.\n */\nexport const Switcher = forwardRef(\n  (\n    { children, ...rest }: SwitcherProps,\n    ref?: ForwardedRef<HTMLDivElement>,\n  ) => {\n    const listRef = useRef<HTMLDivElement | null>(null)\n    const setRefs = useCallback(\n      (node: HTMLDivElement | null) => {\n        listRef.current = node\n        if (typeof ref === 'function') {\n          ref(node)\n          return\n        }\n        if (ref) {\n          ;(ref as { current: HTMLDivElement | null }).current = node\n        }\n      },\n      [ref],\n    )\n\n    useIsomorphicLayoutEffect(() => {\n      if (typeof window === 'undefined') return undefined\n      const listNode = listRef.current\n      if (!listNode) return undefined\n      let rafId = 0\n\n      const updateIndicator = () => {\n        const activeItem = listNode.querySelector<HTMLElement>(\n          '[role=\"tab\"][aria-selected=\"true\"]',\n        )\n        if (!activeItem) {\n          listNode.style.setProperty('--switcher-indicator-left', '0px')\n          listNode.style.setProperty('--switcher-indicator-width', '0px')\n          return\n        }\n\n        const listRect = listNode.getBoundingClientRect()\n        const itemRect = activeItem.getBoundingClientRect()\n        const left = itemRect.left - listRect.left + listNode.scrollLeft\n\n        listNode.style.setProperty('--switcher-indicator-left', `${left}px`)\n        listNode.style.setProperty(\n          '--switcher-indicator-width',\n          `${itemRect.width}px`,\n        )\n      }\n\n      const scheduleUpdate = () => {\n        if (rafId) {\n          window.cancelAnimationFrame(rafId)\n        }\n        rafId = window.requestAnimationFrame(updateIndicator)\n      }\n\n      updateIndicator()\n      scheduleUpdate()\n      listNode.addEventListener('scroll', scheduleUpdate, { passive: true })\n      window.addEventListener('resize', scheduleUpdate)\n\n      const mutationObserver =\n        typeof MutationObserver === 'undefined'\n          ? null\n          : new MutationObserver(scheduleUpdate)\n\n      mutationObserver?.observe(listNode, {\n        attributes: true,\n        subtree: true,\n        attributeFilter: ['aria-selected'],\n      })\n\n      const resizeObserver =\n        typeof ResizeObserver === 'undefined'\n          ? null\n          : new ResizeObserver(scheduleUpdate)\n\n      resizeObserver?.observe(listNode)\n      listNode\n        .querySelectorAll<HTMLElement>('[role=\"tab\"]')\n        .forEach((tab) => resizeObserver?.observe(tab))\n\n      if (typeof document !== 'undefined' && 'fonts' in document) {\n        void (document as Document & { fonts: FontFaceSet }).fonts.ready.then(\n          scheduleUpdate,\n        )\n      }\n\n      return () => {\n        if (rafId) {\n          window.cancelAnimationFrame(rafId)\n        }\n        listNode.removeEventListener('scroll', scheduleUpdate)\n        window.removeEventListener('resize', scheduleUpdate)\n        mutationObserver?.disconnect()\n        resizeObserver?.disconnect()\n      }\n    }, [children])\n\n    return (\n      <SwitcherListStyle role='tablist' ref={setRefs} {...rest}>\n        {children}\n        <SwitcherIndicatorStyle aria-hidden />\n      </SwitcherListStyle>\n    )\n  },\n)\nSwitcher.displayName = 'Switcher'\n"],"names":["Switcher","forwardRef","_ref","ref","children","rest","listRef","useRef","setRefs","useCallback","node","current","useIsomorphicLayoutEffect","window","undefined","listNode","rafId","updateIndicator","activeItem","querySelector","style","setProperty","listRect","getBoundingClientRect","itemRect","left","scrollLeft","width","scheduleUpdate","cancelAnimationFrame","requestAnimationFrame","addEventListener","passive","mutationObserver","MutationObserver","observe","attributes","subtree","attributeFilter","resizeObserver","ResizeObserver","querySelectorAll","forEach","tab","document","fonts","ready","then","removeEventListener","disconnect","_jsxs","SwitcherListStyle","role","_jsx","SwitcherIndicatorStyle","displayName"],"mappings":"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"}

package/dist/cjs/switcher/SwitcherItem.js

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const SwitcherStyles = require('./SwitcherStyles.js');
+const jsxRuntime = require('react/jsx-runtime');
+
+const SwitcherItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    active = false,
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(SwitcherStyles.SwitcherItemStyle, {
+    $active: active,
+    "aria-selected": active,
+    role: "tab",
+    tabIndex: active ? 0 : -1,
+    type: "button",
+    ref: ref,
+    ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsx(SwitcherStyles.SwitcherLabelStyle, {
+      $active: active,
+      children: children
+    })
+  });
+});
+SwitcherItem.displayName = 'SwitcherItem';
+
+exports.SwitcherItem = SwitcherItem;
+//# sourceMappingURL=SwitcherItem.js.map

package/dist/cjs/switcher/SwitcherItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitcherItem.js","sources":["../../../packages/switcher/SwitcherItem.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { SwitcherItemProps } from './types.js'\nimport { SwitcherItemStyle, SwitcherLabelStyle } from './SwitcherStyles.js'\n\n/**\n * Switcher option button.\n */\nexport const SwitcherItem = forwardRef(\n  (\n    { active = false, children, ...rest }: SwitcherItemProps,\n    ref?: ForwardedRef<HTMLButtonElement>,\n  ) => {\n    return (\n      <SwitcherItemStyle\n        $active={active}\n        aria-selected={active}\n        role='tab'\n        tabIndex={active ? 0 : -1}\n        type='button'\n        ref={ref}\n        {...rest}\n      >\n        <SwitcherLabelStyle $active={active}>{children}</SwitcherLabelStyle>\n      </SwitcherItemStyle>\n    )\n  },\n)\nSwitcherItem.displayName = 'SwitcherItem'\n"],"names":["SwitcherItem","forwardRef","_ref","ref","active","children","rest","_jsx","SwitcherItemStyle","$active","role","tabIndex","type","SwitcherLabelStyle","displayName"],"mappings":";;;;;;;;AAOO,MAAMA,YAAY,gBAAGC,gBAAU,CACpC,CAAAC,IAAA,EAEEC,GAAqC,KAClC;EAAA,IAFH;AAAEC,IAAAA,MAAM,GAAG,KAAK;IAAEC,QAAQ;IAAE,GAAGC,IAAAA;AAAwB,GAAC,GAAAJ,IAAA,CAAA;EAGxD,oBACEK,cAAA,CAACC,gCAAiB,EAAA;AAChBC,IAAAA,OAAO,EAAEL,MAAO;AAChB,IAAA,eAAA,EAAeA,MAAO;AACtBM,IAAAA,IAAI,EAAC,KAAK;AACVC,IAAAA,QAAQ,EAAEP,MAAM,GAAG,CAAC,GAAG,CAAC,CAAE;AAC1BQ,IAAAA,IAAI,EAAC,QAAQ;AACbT,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLG,IAAI;IAAAD,QAAA,eAERE,cAAA,CAACM,iCAAkB,EAAA;AAACJ,MAAAA,OAAO,EAAEL,MAAO;AAAAC,MAAAA,QAAA,EAAEA,QAAAA;KAA6B,CAAA;AAAC,GACnD,CAAC,CAAA;AAExB,CACF,EAAC;AACDL,YAAY,CAACc,WAAW,GAAG,cAAc;;;;"}

package/dist/cjs/switcher/SwitcherStyles.js

@@ -0,0 +1,108 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponentsWrapper = require('../utils/styled-components-wrapper.js');
+
+const CONTAINER_PADDING = 2;
+const ITEM_PADDING_Y = 2;
+const ITEM_PADDING_X = 12;
+const PILL_RADIUS = 110;
+const SwitcherListStyle = styledComponentsWrapper.default.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  padding: ${CONTAINER_PADDING}px;
+  background: var(--lido-color-backgroundDarken);
+  border-radius: ${PILL_RADIUS}px;
+  box-sizing: border-box;
+  position: relative;
+
+  --switcher-indicator-left: 0px;
+  --switcher-indicator-width: 0px;
+`;
+const SwitcherIndicatorStyle = styledComponentsWrapper.default.span`
+  position: absolute;
+  top: ${CONTAINER_PADDING}px;
+  bottom: ${CONTAINER_PADDING}px;
+  left: 0;
+  width: var(--switcher-indicator-width, 0);
+  background: var(--lido-color-foreground);
+  border-radius: ${PILL_RADIUS}px;
+  transition:
+    transform ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.duration.norm;
+}} ease,
+    width ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.duration.norm;
+}} ease;
+  pointer-events: none;
+  z-index: 0;
+  will-change: transform, width;
+  transform: translateX(var(--switcher-indicator-left, 0));
+`;
+const SwitcherLabelStyle = styledComponentsWrapper.default.span`
+  font-size: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.fontSizesMap.xxs;
+}}px;
+  line-height: 20px;
+  font-weight: 700;
+  color: var(--lido-color-text);
+  opacity: ${_ref4 => {
+  let {
+    $active
+  } = _ref4;
+  return $active ? 1 : 0.5;
+}};
+  transition: opacity ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.duration.fast;
+}} ease;
+  white-space: nowrap;
+`;
+const SwitcherItemStyle = styledComponentsWrapper.default.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  border: none;
+  background: transparent;
+  padding: ${ITEM_PADDING_Y}px ${ITEM_PADDING_X}px;
+  border-radius: ${PILL_RADIUS}px;
+  box-sizing: border-box;
+  cursor: pointer;
+  color: var(--lido-color-text);
+  font-family: inherit;
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  z-index: 1;
+
+  &:hover ${SwitcherLabelStyle}, &:focus-visible ${SwitcherLabelStyle} {
+    opacity: 1;
+  }
+
+  &:disabled {
+    cursor: default;
+  }
+
+  &:disabled ${SwitcherLabelStyle} {
+    opacity: 0.5;
+  }
+`;
+
+exports.SwitcherIndicatorStyle = SwitcherIndicatorStyle;
+exports.SwitcherItemStyle = SwitcherItemStyle;
+exports.SwitcherLabelStyle = SwitcherLabelStyle;
+exports.SwitcherListStyle = SwitcherListStyle;
+//# sourceMappingURL=SwitcherStyles.js.map

package/dist/cjs/switcher/SwitcherStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitcherStyles.js","sources":["../../../packages/switcher/SwitcherStyles.tsx"],"sourcesContent":["import styled from '../utils/styled-components-wrapper.js'\n\ntype InjectedProps = {\n  $active: boolean\n}\n\nconst CONTAINER_PADDING = 2\nconst ITEM_PADDING_Y = 2\nconst ITEM_PADDING_X = 12\nconst PILL_RADIUS = 110\n\nexport const SwitcherListStyle = styled.div`\n  display: inline-flex;\n  align-items: center;\n  gap: 0;\n  padding: ${CONTAINER_PADDING}px;\n  background: var(--lido-color-backgroundDarken);\n  border-radius: ${PILL_RADIUS}px;\n  box-sizing: border-box;\n  position: relative;\n\n  --switcher-indicator-left: 0px;\n  --switcher-indicator-width: 0px;\n`\n\nexport const SwitcherIndicatorStyle = styled.span`\n  position: absolute;\n  top: ${CONTAINER_PADDING}px;\n  bottom: ${CONTAINER_PADDING}px;\n  left: 0;\n  width: var(--switcher-indicator-width, 0);\n  background: var(--lido-color-foreground);\n  border-radius: ${PILL_RADIUS}px;\n  transition:\n    transform ${({ theme }) => theme.duration.norm} ease,\n    width ${({ theme }) => theme.duration.norm} ease;\n  pointer-events: none;\n  z-index: 0;\n  will-change: transform, width;\n  transform: translateX(var(--switcher-indicator-left, 0));\n`\n\nexport const SwitcherLabelStyle = styled.span<InjectedProps>`\n  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n  line-height: 20px;\n  font-weight: 700;\n  color: var(--lido-color-text);\n  opacity: ${({ $active }) => ($active ? 1 : 0.5)};\n  transition: opacity ${({ theme }) => theme.duration.fast} ease;\n  white-space: nowrap;\n`\n\nexport const SwitcherItemStyle = styled.button<InjectedProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  border: none;\n  background: transparent;\n  padding: ${ITEM_PADDING_Y}px ${ITEM_PADDING_X}px;\n  border-radius: ${PILL_RADIUS}px;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--lido-color-text);\n  font-family: inherit;\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  z-index: 1;\n\n  &:hover ${SwitcherLabelStyle}, &:focus-visible ${SwitcherLabelStyle} {\n    opacity: 1;\n  }\n\n  &:disabled {\n    cursor: default;\n  }\n\n  &:disabled ${SwitcherLabelStyle} {\n    opacity: 0.5;\n  }\n`\n"],"names":["CONTAINER_PADDING","ITEM_PADDING_Y","ITEM_PADDING_X","PILL_RADIUS","SwitcherListStyle","styled","div","SwitcherIndicatorStyle","span","_ref","theme","duration","norm","_ref2","SwitcherLabelStyle","_ref3","fontSizesMap","xxs","_ref4","$active","_ref5","fast","SwitcherItemStyle","button"],"mappings":";;;;;;AAMA,MAAMA,iBAAiB,GAAG,CAAC,CAAA;AAC3B,MAAMC,cAAc,GAAG,CAAC,CAAA;AACxB,MAAMC,cAAc,GAAG,EAAE,CAAA;AACzB,MAAMC,WAAW,GAAG,GAAG,CAAA;AAEVC,MAAAA,iBAAiB,GAAGC,+BAAM,CAACC,GAAG,CAAA;AAC3C;AACA;AACA;AACA,WAAA,EAAaN,iBAAiB,CAAA;AAC9B;AACA,iBAAA,EAAmBG,WAAW,CAAA;AAC9B;AACA;AACA;AACA;AACA;AACA,EAAC;AAEYI,MAAAA,sBAAsB,GAAGF,+BAAM,CAACG,IAAI,CAAA;AACjD;AACA,OAAA,EAASR,iBAAiB,CAAA;AAC1B,UAAA,EAAYA,iBAAiB,CAAA;AAC7B;AACA;AACA;AACA,iBAAA,EAAmBG,WAAW,CAAA;AAC9B;AACA,cAAA,EAAgBM,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,QAAQ,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AAClD,UAAA,EAAYC,KAAA,IAAA;EAAA,IAAC;AAAEH,IAAAA,KAAAA;AAAM,GAAC,GAAAG,KAAA,CAAA;AAAA,EAAA,OAAKH,KAAK,CAACC,QAAQ,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AAC9C;AACA;AACA;AACA;AACA,EAAC;AAEYE,MAAAA,kBAAkB,GAAGT,+BAAM,CAACG,IAAmB,CAAA;AAC5D,aAAA,EAAeO,KAAA,IAAA;EAAA,IAAC;AAAEL,IAAAA,KAAAA;AAAM,GAAC,GAAAK,KAAA,CAAA;AAAA,EAAA,OAAKL,KAAK,CAACM,YAAY,CAACC,GAAG,CAAA;AAAA,CAAA,CAAA;AACpD;AACA;AACA;AACA,WAAA,EAAaC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAMC,OAAO,GAAG,CAAC,GAAG,GAAG,CAAA;AAAA,CAAC,CAAA;AACjD,sBAAA,EAAwBC,KAAA,IAAA;EAAA,IAAC;AAAEV,IAAAA,KAAAA;AAAM,GAAC,GAAAU,KAAA,CAAA;AAAA,EAAA,OAAKV,KAAK,CAACC,QAAQ,CAACU,IAAI,CAAA;AAAA,CAAA,CAAA;AAC1D;AACA,EAAC;AAEYC,MAAAA,iBAAiB,GAAGjB,+BAAM,CAACkB,MAAqB,CAAA;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,WAAatB,EAAAA,cAAc,MAAMC,cAAc,CAAA;AAC/C,iBAAA,EAAmBC,WAAW,CAAA;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAYW,EAAAA,kBAAkB,qBAAqBA,kBAAkB,CAAA;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAA,EAAeA,kBAAkB,CAAA;AACjC;AACA;AACA;;;;;;;"}

package/dist/esm/accordion/useExpanded.mjs

@@ -1,31 +1,24 @@
-import { useState, useEffect, useCallback } from 'react';
-import _useCollapse from 'react-collapsed';
+import { useCollapse } from 'react-collapsed';
 
-//@ts-expect-error Property default doesn't exist on type
-const useCollapse = _useCollapse.default || _useCollapse;
 const useExpanded = _ref => {
   let {
     defaultExpanded = false,
     onExpand,
     onCollapse
   } = _ref;
-  const [isExpanded, setExpanded] = useState(defaultExpanded);
-  useEffect(() => {
-    setExpanded(defaultExpanded);
-  }, [defaultExpanded]);
-  const handleToggle = useCallback(() => setExpanded(previous => !previous), []);
   const {
     getToggleProps,
-    getCollapseProps
+    getCollapseProps,
+    isExpanded
   } = useCollapse({
-    isExpanded,
-    onExpandEnd: onExpand,
-    onCollapseEnd: onCollapse
+    defaultExpanded,
+    onTransitionStateChange: state => {
+      if (state === 'expandEnd') onExpand?.();
+      if (state === 'collapseEnd') onCollapse?.();
+    }
   });
   return {
-    toggleProps: getToggleProps({
-      onClick: handleToggle
-    }),
+    toggleProps: getToggleProps(),
     collapseProps: getCollapseProps(),
     isExpanded
   };

package/dist/esm/accordion/useExpanded.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useExpanded.mjs","sources":["../../../packages/accordion/useExpanded.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { AccordionProps } from './types.js'\nimport _useCollapse from 'react-collapsed'\nimport {\n  GetCollapsePropsOutput,\n  GetTogglePropsOutput,\n} from 'react-collapsed/dist/types.js'\n\n//@ts-expect-error Property default doesn't exist on type\nconst useCollapse: typeof _useCollapse = _useCollapse.default || _useCollapse\n\ntype UseExpanded = (\n  props: Pick<AccordionProps, 'defaultExpanded' | 'onExpand' | 'onCollapse'>,\n) => {\n  toggleProps: GetTogglePropsOutput\n  collapseProps: GetCollapsePropsOutput\n  isExpanded: boolean\n}\n\nexport const useExpanded: UseExpanded = ({\n  defaultExpanded = false,\n  onExpand,\n  onCollapse,\n}) => {\n  const [isExpanded, setExpanded] = useState(defaultExpanded)\n\n  useEffect(() => {\n    setExpanded(defaultExpanded)\n  }, [defaultExpanded])\n\n  const handleToggle = useCallback(\n    () => setExpanded((previous) => !previous),\n    [],\n  )\n\n  const { getToggleProps, getCollapseProps } = useCollapse({\n    isExpanded,\n    onExpandEnd: onExpand,\n    onCollapseEnd: onCollapse,\n  })\n\n  return {\n    toggleProps: getToggleProps({ onClick: handleToggle }),\n    collapseProps: getCollapseProps(),\n    isExpanded,\n  }\n}\n"],"names":["useCollapse","_useCollapse","default","useExpanded","_ref","defaultExpanded","onExpand","onCollapse","isExpanded","setExpanded","useState","useEffect","handleToggle","useCallback","previous","getToggleProps","getCollapseProps","onExpandEnd","onCollapseEnd","toggleProps","onClick","collapseProps"],"mappings":";;;AAQA;AACA,MAAMA,WAAgC,GAAGC,YAAY,CAACC,OAAO,IAAID,YAAY,CAAA;AAUhEE,MAAAA,WAAwB,GAAGC,IAAA,IAIlC;EAAA,IAJmC;AACvCC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;AACRC,IAAAA,UAAAA;AACF,GAAC,GAAAH,IAAA,CAAA;EACC,MAAM,CAACI,UAAU,EAAEC,WAAW,CAAC,GAAGC,QAAQ,CAACL,eAAe,CAAC,CAAA;AAE3DM,EAAAA,SAAS,CAAC,MAAM;IACdF,WAAW,CAACJ,eAAe,CAAC,CAAA;AAC9B,GAAC,EAAE,CAACA,eAAe,CAAC,CAAC,CAAA;AAErB,EAAA,MAAMO,YAAY,GAAGC,WAAW,CAC9B,MAAMJ,WAAW,CAAEK,QAAQ,IAAK,CAACA,QAAQ,CAAC,EAC1C,EACF,CAAC,CAAA;EAED,MAAM;IAAEC,cAAc;AAAEC,IAAAA,gBAAAA;GAAkB,GAAGhB,WAAW,CAAC;IACvDQ,UAAU;AACVS,IAAAA,WAAW,EAAEX,QAAQ;AACrBY,IAAAA,aAAa,EAAEX,UAAAA;AACjB,GAAC,CAAC,CAAA;EAEF,OAAO;IACLY,WAAW,EAAEJ,cAAc,CAAC;AAAEK,MAAAA,OAAO,EAAER,YAAAA;AAAa,KAAC,CAAC;IACtDS,aAAa,EAAEL,gBAAgB,EAAE;AACjCR,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"useExpanded.mjs","sources":["../../../packages/accordion/useExpanded.ts"],"sourcesContent":["import { useCollapse } from 'react-collapsed'\nimport { AccordionProps } from './types.js'\n\nexport const useExpanded = ({\n  defaultExpanded = false,\n  onExpand,\n  onCollapse,\n}: Pick<AccordionProps, 'defaultExpanded' | 'onExpand' | 'onCollapse'>) => {\n  const { getToggleProps, getCollapseProps, isExpanded } = useCollapse({\n    defaultExpanded,\n    onTransitionStateChange: (state) => {\n      if (state === 'expandEnd') onExpand?.()\n      if (state === 'collapseEnd') onCollapse?.()\n    },\n  })\n\n  return {\n    toggleProps: getToggleProps(),\n    collapseProps: getCollapseProps(),\n    isExpanded,\n  }\n}\n"],"names":["useExpanded","_ref","defaultExpanded","onExpand","onCollapse","getToggleProps","getCollapseProps","isExpanded","useCollapse","onTransitionStateChange","state","toggleProps","collapseProps"],"mappings":";;AAGaA,MAAAA,WAAW,GAAGC,IAAA,IAIgD;EAAA,IAJ/C;AAC1BC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;AACRC,IAAAA,UAAAA;AACmE,GAAC,GAAAH,IAAA,CAAA;EACpE,MAAM;IAAEI,cAAc;IAAEC,gBAAgB;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,WAAW,CAAC;IACnEN,eAAe;IACfO,uBAAuB,EAAGC,KAAK,IAAK;AAClC,MAAA,IAAIA,KAAK,KAAK,WAAW,EAAEP,QAAQ,IAAI,CAAA;AACvC,MAAA,IAAIO,KAAK,KAAK,aAAa,EAAEN,UAAU,IAAI,CAAA;AAC7C,KAAA;AACF,GAAC,CAAC,CAAA;EAEF,OAAO;IACLO,WAAW,EAAEN,cAAc,EAAE;IAC7BO,aAAa,EAAEN,gBAAgB,EAAE;AACjCC,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}

package/dist/esm/accordion-transparent/useExpanded.mjs

@@ -1,31 +1,24 @@
-import { useState, useEffect, useCallback } from 'react';
-import _useCollapse from 'react-collapsed';
+import { useCollapse } from 'react-collapsed';
 
-//@ts-expect-error Property default doesn't exist on type
-const useCollapse = _useCollapse.default || _useCollapse;
 const useExpanded = _ref => {
   let {
     defaultExpanded = false,
     onExpand,
     onCollapse
   } = _ref;
-  const [isExpanded, setExpanded] = useState(defaultExpanded);
-  useEffect(() => {
-    setExpanded(defaultExpanded);
-  }, [defaultExpanded]);
-  const handleToggle = useCallback(() => setExpanded(previous => !previous), []);
   const {
     getToggleProps,
-    getCollapseProps
+    getCollapseProps,
+    isExpanded
   } = useCollapse({
-    isExpanded,
-    onExpandEnd: onExpand,
-    onCollapseEnd: onCollapse
+    defaultExpanded,
+    onTransitionStateChange: state => {
+      if (state === 'expandEnd') onExpand?.();
+      if (state === 'collapseEnd') onCollapse?.();
+    }
   });
   return {
-    toggleProps: getToggleProps({
-      onClick: handleToggle
-    }),
+    toggleProps: getToggleProps(),
     collapseProps: getCollapseProps(),
     isExpanded
   };

package/dist/esm/accordion-transparent/useExpanded.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useExpanded.mjs","sources":["../../../packages/accordion-transparent/useExpanded.ts"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react'\nimport { AccordionTransparentProps } from './types.js'\nimport _useCollapse from 'react-collapsed'\nimport {\n  GetCollapsePropsOutput,\n  GetTogglePropsOutput,\n} from 'react-collapsed/dist/types.js'\n\n//@ts-expect-error Property default doesn't exist on type\nconst useCollapse: typeof _useCollapse = _useCollapse.default || _useCollapse\n\ntype UseExpanded = (\n  props: Pick<\n    AccordionTransparentProps,\n    'defaultExpanded' | 'onExpand' | 'onCollapse'\n  >,\n) => {\n  toggleProps: GetTogglePropsOutput\n  collapseProps: GetCollapsePropsOutput\n  isExpanded: boolean\n}\n\nexport const useExpanded: UseExpanded = ({\n  defaultExpanded = false,\n  onExpand,\n  onCollapse,\n}) => {\n  const [isExpanded, setExpanded] = useState(defaultExpanded)\n\n  useEffect(() => {\n    setExpanded(defaultExpanded)\n  }, [defaultExpanded])\n\n  const handleToggle = useCallback(\n    () => setExpanded((previous) => !previous),\n    [],\n  )\n\n  const { getToggleProps, getCollapseProps } = useCollapse({\n    isExpanded,\n    onExpandEnd: onExpand,\n    onCollapseEnd: onCollapse,\n  })\n\n  return {\n    toggleProps: getToggleProps({ onClick: handleToggle }),\n    collapseProps: getCollapseProps(),\n    isExpanded,\n  }\n}\n"],"names":["useCollapse","_useCollapse","default","useExpanded","_ref","defaultExpanded","onExpand","onCollapse","isExpanded","setExpanded","useState","useEffect","handleToggle","useCallback","previous","getToggleProps","getCollapseProps","onExpandEnd","onCollapseEnd","toggleProps","onClick","collapseProps"],"mappings":";;;AAQA;AACA,MAAMA,WAAgC,GAAGC,YAAY,CAACC,OAAO,IAAID,YAAY,CAAA;AAahEE,MAAAA,WAAwB,GAAGC,IAAA,IAIlC;EAAA,IAJmC;AACvCC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;AACRC,IAAAA,UAAAA;AACF,GAAC,GAAAH,IAAA,CAAA;EACC,MAAM,CAACI,UAAU,EAAEC,WAAW,CAAC,GAAGC,QAAQ,CAACL,eAAe,CAAC,CAAA;AAE3DM,EAAAA,SAAS,CAAC,MAAM;IACdF,WAAW,CAACJ,eAAe,CAAC,CAAA;AAC9B,GAAC,EAAE,CAACA,eAAe,CAAC,CAAC,CAAA;AAErB,EAAA,MAAMO,YAAY,GAAGC,WAAW,CAC9B,MAAMJ,WAAW,CAAEK,QAAQ,IAAK,CAACA,QAAQ,CAAC,EAC1C,EACF,CAAC,CAAA;EAED,MAAM;IAAEC,cAAc;AAAEC,IAAAA,gBAAAA;GAAkB,GAAGhB,WAAW,CAAC;IACvDQ,UAAU;AACVS,IAAAA,WAAW,EAAEX,QAAQ;AACrBY,IAAAA,aAAa,EAAEX,UAAAA;AACjB,GAAC,CAAC,CAAA;EAEF,OAAO;IACLY,WAAW,EAAEJ,cAAc,CAAC;AAAEK,MAAAA,OAAO,EAAER,YAAAA;AAAa,KAAC,CAAC;IACtDS,aAAa,EAAEL,gBAAgB,EAAE;AACjCR,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}
+{"version":3,"file":"useExpanded.mjs","sources":["../../../packages/accordion-transparent/useExpanded.ts"],"sourcesContent":["import { useCollapse } from 'react-collapsed'\nimport { AccordionTransparentProps } from './types.js'\n\nexport const useExpanded = ({\n  defaultExpanded = false,\n  onExpand,\n  onCollapse,\n}: Pick<\n  AccordionTransparentProps,\n  'defaultExpanded' | 'onExpand' | 'onCollapse'\n>) => {\n  const { getToggleProps, getCollapseProps, isExpanded } = useCollapse({\n    defaultExpanded,\n    onTransitionStateChange: (state) => {\n      if (state === 'expandEnd') onExpand?.()\n      if (state === 'collapseEnd') onCollapse?.()\n    },\n  })\n\n  return {\n    toggleProps: getToggleProps(),\n    collapseProps: getCollapseProps(),\n    isExpanded,\n  }\n}\n"],"names":["useExpanded","_ref","defaultExpanded","onExpand","onCollapse","getToggleProps","getCollapseProps","isExpanded","useCollapse","onTransitionStateChange","state","toggleProps","collapseProps"],"mappings":";;AAGaA,MAAAA,WAAW,GAAGC,IAAA,IAOrB;EAAA,IAPsB;AAC1BC,IAAAA,eAAe,GAAG,KAAK;IACvBC,QAAQ;AACRC,IAAAA,UAAAA;AAIF,GAAC,GAAAH,IAAA,CAAA;EACC,MAAM;IAAEI,cAAc;IAAEC,gBAAgB;AAAEC,IAAAA,UAAAA;GAAY,GAAGC,WAAW,CAAC;IACnEN,eAAe;IACfO,uBAAuB,EAAGC,KAAK,IAAK;AAClC,MAAA,IAAIA,KAAK,KAAK,WAAW,EAAEP,QAAQ,IAAI,CAAA;AACvC,MAAA,IAAIO,KAAK,KAAK,aAAa,EAAEN,UAAU,IAAI,CAAA;AAC7C,KAAA;AACF,GAAC,CAAC,CAAA;EAEF,OAAO;IACLO,WAAW,EAAEN,cAAc,EAAE;IAC7BO,aAAa,EAAEN,gBAAgB,EAAE;AACjCC,IAAAA,UAAAA;GACD,CAAA;AACH;;;;"}

package/dist/esm/index.mjs

@@ -70,6 +70,8 @@ export { HStack } from './stack/HStack.mjs';
 export { VStack } from './stack/VStack.mjs';
 export { StackAlign, StackDirection, StackJustify, StackSpacing, StackWrap } from './stack/types.mjs';
 export { default as withStyledSystem } from './styled-system/withStyledSystem.mjs';
+export { Switcher } from './switcher/Switcher.mjs';
+export { SwitcherItem } from './switcher/SwitcherItem.mjs';
 export { Table } from './table/Table.mjs';
 export { Thead } from './table/Thead.mjs';
 export { Tbody } from './table/Tbody.mjs';

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/switcher/Switcher.mjs

@@ -0,0 +1,96 @@
+import { forwardRef, useRef, useCallback } from 'react';
+import '../utils/styled-components-wrapper.mjs';
+import 'use-callback-ref';
+import { useIsomorphicLayoutEffect } from '../hooks/useIsomorphicLayoutEffect.mjs';
+import '../theme/cookie-theme-provider.mjs';
+import '../theme/theme-provider.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '../theme/document-head-contents/element-theme-colors.mjs';
+import '../utils/modalRoot.mjs';
+import '../utils/cookies-client-side.mjs';
+import '../theme/constants.mjs';
+import '../theme/utils/set-theme-cookie.mjs';
+import '../theme/themes.mjs';
+import { SwitcherListStyle, SwitcherIndicatorStyle } from './SwitcherStyles.mjs';
+
+const Switcher = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  const listRef = useRef(null);
+  const setRefs = useCallback(node => {
+    listRef.current = node;
+    if (typeof ref === 'function') {
+      ref(node);
+      return;
+    }
+    if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+  useIsomorphicLayoutEffect(() => {
+    if (typeof window === 'undefined') return undefined;
+    const listNode = listRef.current;
+    if (!listNode) return undefined;
+    let rafId = 0;
+    const updateIndicator = () => {
+      const activeItem = listNode.querySelector('[role="tab"][aria-selected="true"]');
+      if (!activeItem) {
+        listNode.style.setProperty('--switcher-indicator-left', '0px');
+        listNode.style.setProperty('--switcher-indicator-width', '0px');
+        return;
+      }
+      const listRect = listNode.getBoundingClientRect();
+      const itemRect = activeItem.getBoundingClientRect();
+      const left = itemRect.left - listRect.left + listNode.scrollLeft;
+      listNode.style.setProperty('--switcher-indicator-left', `${left}px`);
+      listNode.style.setProperty('--switcher-indicator-width', `${itemRect.width}px`);
+    };
+    const scheduleUpdate = () => {
+      if (rafId) {
+        window.cancelAnimationFrame(rafId);
+      }
+      rafId = window.requestAnimationFrame(updateIndicator);
+    };
+    updateIndicator();
+    scheduleUpdate();
+    listNode.addEventListener('scroll', scheduleUpdate, {
+      passive: true
+    });
+    window.addEventListener('resize', scheduleUpdate);
+    const mutationObserver = typeof MutationObserver === 'undefined' ? null : new MutationObserver(scheduleUpdate);
+    mutationObserver?.observe(listNode, {
+      attributes: true,
+      subtree: true,
+      attributeFilter: ['aria-selected']
+    });
+    const resizeObserver = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(scheduleUpdate);
+    resizeObserver?.observe(listNode);
+    listNode.querySelectorAll('[role="tab"]').forEach(tab => resizeObserver?.observe(tab));
+    if (typeof document !== 'undefined' && 'fonts' in document) {
+      void document.fonts.ready.then(scheduleUpdate);
+    }
+    return () => {
+      if (rafId) {
+        window.cancelAnimationFrame(rafId);
+      }
+      listNode.removeEventListener('scroll', scheduleUpdate);
+      window.removeEventListener('resize', scheduleUpdate);
+      mutationObserver?.disconnect();
+      resizeObserver?.disconnect();
+    };
+  }, [children]);
+  return /*#__PURE__*/jsxs(SwitcherListStyle, {
+    role: "tablist",
+    ref: setRefs,
+    ...rest,
+    children: [children, /*#__PURE__*/jsx(SwitcherIndicatorStyle, {
+      "aria-hidden": true
+    })]
+  });
+});
+Switcher.displayName = 'Switcher';
+
+export { Switcher };
+//# sourceMappingURL=Switcher.mjs.map

package/dist/esm/switcher/Switcher.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switcher.mjs","sources":["../../../packages/switcher/Switcher.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useCallback, useRef } from 'react'\nimport { useIsomorphicLayoutEffect } from '../hooks'\nimport { SwitcherProps } from './types.js'\nimport { SwitcherIndicatorStyle, SwitcherListStyle } from './SwitcherStyles.js'\n\n/**\n * Segmented control container for SwitcherItem options.\n */\nexport const Switcher = forwardRef(\n  (\n    { children, ...rest }: SwitcherProps,\n    ref?: ForwardedRef<HTMLDivElement>,\n  ) => {\n    const listRef = useRef<HTMLDivElement | null>(null)\n    const setRefs = useCallback(\n      (node: HTMLDivElement | null) => {\n        listRef.current = node\n        if (typeof ref === 'function') {\n          ref(node)\n          return\n        }\n        if (ref) {\n          ;(ref as { current: HTMLDivElement | null }).current = node\n        }\n      },\n      [ref],\n    )\n\n    useIsomorphicLayoutEffect(() => {\n      if (typeof window === 'undefined') return undefined\n      const listNode = listRef.current\n      if (!listNode) return undefined\n      let rafId = 0\n\n      const updateIndicator = () => {\n        const activeItem = listNode.querySelector<HTMLElement>(\n          '[role=\"tab\"][aria-selected=\"true\"]',\n        )\n        if (!activeItem) {\n          listNode.style.setProperty('--switcher-indicator-left', '0px')\n          listNode.style.setProperty('--switcher-indicator-width', '0px')\n          return\n        }\n\n        const listRect = listNode.getBoundingClientRect()\n        const itemRect = activeItem.getBoundingClientRect()\n        const left = itemRect.left - listRect.left + listNode.scrollLeft\n\n        listNode.style.setProperty('--switcher-indicator-left', `${left}px`)\n        listNode.style.setProperty(\n          '--switcher-indicator-width',\n          `${itemRect.width}px`,\n        )\n      }\n\n      const scheduleUpdate = () => {\n        if (rafId) {\n          window.cancelAnimationFrame(rafId)\n        }\n        rafId = window.requestAnimationFrame(updateIndicator)\n      }\n\n      updateIndicator()\n      scheduleUpdate()\n      listNode.addEventListener('scroll', scheduleUpdate, { passive: true })\n      window.addEventListener('resize', scheduleUpdate)\n\n      const mutationObserver =\n        typeof MutationObserver === 'undefined'\n          ? null\n          : new MutationObserver(scheduleUpdate)\n\n      mutationObserver?.observe(listNode, {\n        attributes: true,\n        subtree: true,\n        attributeFilter: ['aria-selected'],\n      })\n\n      const resizeObserver =\n        typeof ResizeObserver === 'undefined'\n          ? null\n          : new ResizeObserver(scheduleUpdate)\n\n      resizeObserver?.observe(listNode)\n      listNode\n        .querySelectorAll<HTMLElement>('[role=\"tab\"]')\n        .forEach((tab) => resizeObserver?.observe(tab))\n\n      if (typeof document !== 'undefined' && 'fonts' in document) {\n        void (document as Document & { fonts: FontFaceSet }).fonts.ready.then(\n          scheduleUpdate,\n        )\n      }\n\n      return () => {\n        if (rafId) {\n          window.cancelAnimationFrame(rafId)\n        }\n        listNode.removeEventListener('scroll', scheduleUpdate)\n        window.removeEventListener('resize', scheduleUpdate)\n        mutationObserver?.disconnect()\n        resizeObserver?.disconnect()\n      }\n    }, [children])\n\n    return (\n      <SwitcherListStyle role='tablist' ref={setRefs} {...rest}>\n        {children}\n        <SwitcherIndicatorStyle aria-hidden />\n      </SwitcherListStyle>\n    )\n  },\n)\nSwitcher.displayName = 'Switcher'\n"],"names":["Switcher","forwardRef","_ref","ref","children","rest","listRef","useRef","setRefs","useCallback","node","current","useIsomorphicLayoutEffect","window","undefined","listNode","rafId","updateIndicator","activeItem","querySelector","style","setProperty","listRect","getBoundingClientRect","itemRect","left","scrollLeft","width","scheduleUpdate","cancelAnimationFrame","requestAnimationFrame","addEventListener","passive","mutationObserver","MutationObserver","observe","attributes","subtree","attributeFilter","resizeObserver","ResizeObserver","querySelectorAll","forEach","tab","document","fonts","ready","then","removeEventListener","disconnect","_jsxs","SwitcherListStyle","role","_jsx","SwitcherIndicatorStyle","displayName"],"mappings":";;;;;;;;;;;;;;;AAQO,MAAMA,QAAQ,gBAAGC,UAAU,CAChC,CAAAC,IAAA,EAEEC,GAAkC,KAC/B;EAAA,IAFH;IAAEC,QAAQ;IAAE,GAAGC,IAAAA;AAAoB,GAAC,GAAAH,IAAA,CAAA;AAGpC,EAAA,MAAMI,OAAO,GAAGC,MAAM,CAAwB,IAAI,CAAC,CAAA;AACnD,EAAA,MAAMC,OAAO,GAAGC,WAAW,CACxBC,IAA2B,IAAK;IAC/BJ,OAAO,CAACK,OAAO,GAAGD,IAAI,CAAA;AACtB,IAAA,IAAI,OAAOP,GAAG,KAAK,UAAU,EAAE;MAC7BA,GAAG,CAACO,IAAI,CAAC,CAAA;AACT,MAAA,OAAA;AACF,KAAA;AACA,IAAA,IAAIP,GAAG,EAAE;MACLA,GAAG,CAAwCQ,OAAO,GAAGD,IAAI,CAAA;AAC7D,KAAA;AACF,GAAC,EACD,CAACP,GAAG,CACN,CAAC,CAAA;AAEDS,EAAAA,yBAAyB,CAAC,MAAM;AAC9B,IAAA,IAAI,OAAOC,MAAM,KAAK,WAAW,EAAE,OAAOC,SAAS,CAAA;AACnD,IAAA,MAAMC,QAAQ,GAAGT,OAAO,CAACK,OAAO,CAAA;AAChC,IAAA,IAAI,CAACI,QAAQ,EAAE,OAAOD,SAAS,CAAA;IAC/B,IAAIE,KAAK,GAAG,CAAC,CAAA;IAEb,MAAMC,eAAe,GAAGA,MAAM;AAC5B,MAAA,MAAMC,UAAU,GAAGH,QAAQ,CAACI,aAAa,CACvC,oCACF,CAAC,CAAA;MACD,IAAI,CAACD,UAAU,EAAE;QACfH,QAAQ,CAACK,KAAK,CAACC,WAAW,CAAC,2BAA2B,EAAE,KAAK,CAAC,CAAA;QAC9DN,QAAQ,CAACK,KAAK,CAACC,WAAW,CAAC,4BAA4B,EAAE,KAAK,CAAC,CAAA;AAC/D,QAAA,OAAA;AACF,OAAA;AAEA,MAAA,MAAMC,QAAQ,GAAGP,QAAQ,CAACQ,qBAAqB,EAAE,CAAA;AACjD,MAAA,MAAMC,QAAQ,GAAGN,UAAU,CAACK,qBAAqB,EAAE,CAAA;AACnD,MAAA,MAAME,IAAI,GAAGD,QAAQ,CAACC,IAAI,GAAGH,QAAQ,CAACG,IAAI,GAAGV,QAAQ,CAACW,UAAU,CAAA;MAEhEX,QAAQ,CAACK,KAAK,CAACC,WAAW,CAAC,2BAA2B,EAAE,CAAA,EAAGI,IAAI,CAAA,EAAA,CAAI,CAAC,CAAA;AACpEV,MAAAA,QAAQ,CAACK,KAAK,CAACC,WAAW,CACxB,4BAA4B,EAC5B,CAAA,EAAGG,QAAQ,CAACG,KAAK,CAAA,EAAA,CACnB,CAAC,CAAA;KACF,CAAA;IAED,MAAMC,cAAc,GAAGA,MAAM;AAC3B,MAAA,IAAIZ,KAAK,EAAE;AACTH,QAAAA,MAAM,CAACgB,oBAAoB,CAACb,KAAK,CAAC,CAAA;AACpC,OAAA;AACAA,MAAAA,KAAK,GAAGH,MAAM,CAACiB,qBAAqB,CAACb,eAAe,CAAC,CAAA;KACtD,CAAA;AAEDA,IAAAA,eAAe,EAAE,CAAA;AACjBW,IAAAA,cAAc,EAAE,CAAA;AAChBb,IAAAA,QAAQ,CAACgB,gBAAgB,CAAC,QAAQ,EAAEH,cAAc,EAAE;AAAEI,MAAAA,OAAO,EAAE,IAAA;AAAK,KAAC,CAAC,CAAA;AACtEnB,IAAAA,MAAM,CAACkB,gBAAgB,CAAC,QAAQ,EAAEH,cAAc,CAAC,CAAA;AAEjD,IAAA,MAAMK,gBAAgB,GACpB,OAAOC,gBAAgB,KAAK,WAAW,GACnC,IAAI,GACJ,IAAIA,gBAAgB,CAACN,cAAc,CAAC,CAAA;AAE1CK,IAAAA,gBAAgB,EAAEE,OAAO,CAACpB,QAAQ,EAAE;AAClCqB,MAAAA,UAAU,EAAE,IAAI;AAChBC,MAAAA,OAAO,EAAE,IAAI;MACbC,eAAe,EAAE,CAAC,eAAe,CAAA;AACnC,KAAC,CAAC,CAAA;AAEF,IAAA,MAAMC,cAAc,GAClB,OAAOC,cAAc,KAAK,WAAW,GACjC,IAAI,GACJ,IAAIA,cAAc,CAACZ,cAAc,CAAC,CAAA;AAExCW,IAAAA,cAAc,EAAEJ,OAAO,CAACpB,QAAQ,CAAC,CAAA;AACjCA,IAAAA,QAAQ,CACL0B,gBAAgB,CAAc,cAAc,CAAC,CAC7CC,OAAO,CAAEC,GAAG,IAAKJ,cAAc,EAAEJ,OAAO,CAACQ,GAAG,CAAC,CAAC,CAAA;IAEjD,IAAI,OAAOC,QAAQ,KAAK,WAAW,IAAI,OAAO,IAAIA,QAAQ,EAAE;MAC1D,KAAMA,QAAQ,CAAuCC,KAAK,CAACC,KAAK,CAACC,IAAI,CACnEnB,cACF,CAAC,CAAA;AACH,KAAA;AAEA,IAAA,OAAO,MAAM;AACX,MAAA,IAAIZ,KAAK,EAAE;AACTH,QAAAA,MAAM,CAACgB,oBAAoB,CAACb,KAAK,CAAC,CAAA;AACpC,OAAA;AACAD,MAAAA,QAAQ,CAACiC,mBAAmB,CAAC,QAAQ,EAAEpB,cAAc,CAAC,CAAA;AACtDf,MAAAA,MAAM,CAACmC,mBAAmB,CAAC,QAAQ,EAAEpB,cAAc,CAAC,CAAA;MACpDK,gBAAgB,EAAEgB,UAAU,EAAE,CAAA;MAC9BV,cAAc,EAAEU,UAAU,EAAE,CAAA;KAC7B,CAAA;AACH,GAAC,EAAE,CAAC7C,QAAQ,CAAC,CAAC,CAAA;EAEd,oBACE8C,IAAA,CAACC,iBAAiB,EAAA;AAACC,IAAAA,IAAI,EAAC,SAAS;AAACjD,IAAAA,GAAG,EAAEK,OAAQ;AAAA,IAAA,GAAKH,IAAI;AAAAD,IAAAA,QAAA,EACrDA,CAAAA,QAAQ,eACTiD,GAAA,CAACC,sBAAsB,EAAA;AAAC,MAAA,aAAA,EAAA,IAAA;AAAW,KAAE,CAAC,CAAA;AAAA,GACrB,CAAC,CAAA;AAExB,CACF,EAAC;AACDtD,QAAQ,CAACuD,WAAW,GAAG,UAAU;;;;"}

package/dist/esm/switcher/SwitcherItem.mjs

@@ -0,0 +1,28 @@
+import { forwardRef } from 'react';
+import { SwitcherItemStyle, SwitcherLabelStyle } from './SwitcherStyles.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const SwitcherItem = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    active = false,
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsx(SwitcherItemStyle, {
+    $active: active,
+    "aria-selected": active,
+    role: "tab",
+    tabIndex: active ? 0 : -1,
+    type: "button",
+    ref: ref,
+    ...rest,
+    children: /*#__PURE__*/jsx(SwitcherLabelStyle, {
+      $active: active,
+      children: children
+    })
+  });
+});
+SwitcherItem.displayName = 'SwitcherItem';
+
+export { SwitcherItem };
+//# sourceMappingURL=SwitcherItem.mjs.map

package/dist/esm/switcher/SwitcherItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitcherItem.mjs","sources":["../../../packages/switcher/SwitcherItem.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { SwitcherItemProps } from './types.js'\nimport { SwitcherItemStyle, SwitcherLabelStyle } from './SwitcherStyles.js'\n\n/**\n * Switcher option button.\n */\nexport const SwitcherItem = forwardRef(\n  (\n    { active = false, children, ...rest }: SwitcherItemProps,\n    ref?: ForwardedRef<HTMLButtonElement>,\n  ) => {\n    return (\n      <SwitcherItemStyle\n        $active={active}\n        aria-selected={active}\n        role='tab'\n        tabIndex={active ? 0 : -1}\n        type='button'\n        ref={ref}\n        {...rest}\n      >\n        <SwitcherLabelStyle $active={active}>{children}</SwitcherLabelStyle>\n      </SwitcherItemStyle>\n    )\n  },\n)\nSwitcherItem.displayName = 'SwitcherItem'\n"],"names":["SwitcherItem","forwardRef","_ref","ref","active","children","rest","_jsx","SwitcherItemStyle","$active","role","tabIndex","type","SwitcherLabelStyle","displayName"],"mappings":";;;;AAOO,MAAMA,YAAY,gBAAGC,UAAU,CACpC,CAAAC,IAAA,EAEEC,GAAqC,KAClC;EAAA,IAFH;AAAEC,IAAAA,MAAM,GAAG,KAAK;IAAEC,QAAQ;IAAE,GAAGC,IAAAA;AAAwB,GAAC,GAAAJ,IAAA,CAAA;EAGxD,oBACEK,GAAA,CAACC,iBAAiB,EAAA;AAChBC,IAAAA,OAAO,EAAEL,MAAO;AAChB,IAAA,eAAA,EAAeA,MAAO;AACtBM,IAAAA,IAAI,EAAC,KAAK;AACVC,IAAAA,QAAQ,EAAEP,MAAM,GAAG,CAAC,GAAG,CAAC,CAAE;AAC1BQ,IAAAA,IAAI,EAAC,QAAQ;AACbT,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLG,IAAI;IAAAD,QAAA,eAERE,GAAA,CAACM,kBAAkB,EAAA;AAACJ,MAAAA,OAAO,EAAEL,MAAO;AAAAC,MAAAA,QAAA,EAAEA,QAAAA;KAA6B,CAAA;AAAC,GACnD,CAAC,CAAA;AAExB,CACF,EAAC;AACDL,YAAY,CAACc,WAAW,GAAG,cAAc;;;;"}

package/dist/esm/switcher/SwitcherStyles.mjs

@@ -0,0 +1,101 @@
+import styled from '../utils/styled-components-wrapper.mjs';
+
+const CONTAINER_PADDING = 2;
+const ITEM_PADDING_Y = 2;
+const ITEM_PADDING_X = 12;
+const PILL_RADIUS = 110;
+const SwitcherListStyle = styled.div`
+  display: inline-flex;
+  align-items: center;
+  gap: 0;
+  padding: ${CONTAINER_PADDING}px;
+  background: var(--lido-color-backgroundDarken);
+  border-radius: ${PILL_RADIUS}px;
+  box-sizing: border-box;
+  position: relative;
+
+  --switcher-indicator-left: 0px;
+  --switcher-indicator-width: 0px;
+`;
+const SwitcherIndicatorStyle = styled.span`
+  position: absolute;
+  top: ${CONTAINER_PADDING}px;
+  bottom: ${CONTAINER_PADDING}px;
+  left: 0;
+  width: var(--switcher-indicator-width, 0);
+  background: var(--lido-color-foreground);
+  border-radius: ${PILL_RADIUS}px;
+  transition:
+    transform ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.duration.norm;
+}} ease,
+    width ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.duration.norm;
+}} ease;
+  pointer-events: none;
+  z-index: 0;
+  will-change: transform, width;
+  transform: translateX(var(--switcher-indicator-left, 0));
+`;
+const SwitcherLabelStyle = styled.span`
+  font-size: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.fontSizesMap.xxs;
+}}px;
+  line-height: 20px;
+  font-weight: 700;
+  color: var(--lido-color-text);
+  opacity: ${_ref4 => {
+  let {
+    $active
+  } = _ref4;
+  return $active ? 1 : 0.5;
+}};
+  transition: opacity ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.duration.fast;
+}} ease;
+  white-space: nowrap;
+`;
+const SwitcherItemStyle = styled.button`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  border: none;
+  background: transparent;
+  padding: ${ITEM_PADDING_Y}px ${ITEM_PADDING_X}px;
+  border-radius: ${PILL_RADIUS}px;
+  box-sizing: border-box;
+  cursor: pointer;
+  color: var(--lido-color-text);
+  font-family: inherit;
+  -webkit-tap-highlight-color: transparent;
+  position: relative;
+  z-index: 1;
+
+  &:hover ${SwitcherLabelStyle}, &:focus-visible ${SwitcherLabelStyle} {
+    opacity: 1;
+  }
+
+  &:disabled {
+    cursor: default;
+  }
+
+  &:disabled ${SwitcherLabelStyle} {
+    opacity: 0.5;
+  }
+`;
+
+export { SwitcherIndicatorStyle, SwitcherItemStyle, SwitcherLabelStyle, SwitcherListStyle };
+//# sourceMappingURL=SwitcherStyles.mjs.map

package/dist/esm/switcher/SwitcherStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitcherStyles.mjs","sources":["../../../packages/switcher/SwitcherStyles.tsx"],"sourcesContent":["import styled from '../utils/styled-components-wrapper.js'\n\ntype InjectedProps = {\n  $active: boolean\n}\n\nconst CONTAINER_PADDING = 2\nconst ITEM_PADDING_Y = 2\nconst ITEM_PADDING_X = 12\nconst PILL_RADIUS = 110\n\nexport const SwitcherListStyle = styled.div`\n  display: inline-flex;\n  align-items: center;\n  gap: 0;\n  padding: ${CONTAINER_PADDING}px;\n  background: var(--lido-color-backgroundDarken);\n  border-radius: ${PILL_RADIUS}px;\n  box-sizing: border-box;\n  position: relative;\n\n  --switcher-indicator-left: 0px;\n  --switcher-indicator-width: 0px;\n`\n\nexport const SwitcherIndicatorStyle = styled.span`\n  position: absolute;\n  top: ${CONTAINER_PADDING}px;\n  bottom: ${CONTAINER_PADDING}px;\n  left: 0;\n  width: var(--switcher-indicator-width, 0);\n  background: var(--lido-color-foreground);\n  border-radius: ${PILL_RADIUS}px;\n  transition:\n    transform ${({ theme }) => theme.duration.norm} ease,\n    width ${({ theme }) => theme.duration.norm} ease;\n  pointer-events: none;\n  z-index: 0;\n  will-change: transform, width;\n  transform: translateX(var(--switcher-indicator-left, 0));\n`\n\nexport const SwitcherLabelStyle = styled.span<InjectedProps>`\n  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n  line-height: 20px;\n  font-weight: 700;\n  color: var(--lido-color-text);\n  opacity: ${({ $active }) => ($active ? 1 : 0.5)};\n  transition: opacity ${({ theme }) => theme.duration.fast} ease;\n  white-space: nowrap;\n`\n\nexport const SwitcherItemStyle = styled.button<InjectedProps>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  border: none;\n  background: transparent;\n  padding: ${ITEM_PADDING_Y}px ${ITEM_PADDING_X}px;\n  border-radius: ${PILL_RADIUS}px;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--lido-color-text);\n  font-family: inherit;\n  -webkit-tap-highlight-color: transparent;\n  position: relative;\n  z-index: 1;\n\n  &:hover ${SwitcherLabelStyle}, &:focus-visible ${SwitcherLabelStyle} {\n    opacity: 1;\n  }\n\n  &:disabled {\n    cursor: default;\n  }\n\n  &:disabled ${SwitcherLabelStyle} {\n    opacity: 0.5;\n  }\n`\n"],"names":["CONTAINER_PADDING","ITEM_PADDING_Y","ITEM_PADDING_X","PILL_RADIUS","SwitcherListStyle","styled","div","SwitcherIndicatorStyle","span","_ref","theme","duration","norm","_ref2","SwitcherLabelStyle","_ref3","fontSizesMap","xxs","_ref4","$active","_ref5","fast","SwitcherItemStyle","button"],"mappings":";;AAMA,MAAMA,iBAAiB,GAAG,CAAC,CAAA;AAC3B,MAAMC,cAAc,GAAG,CAAC,CAAA;AACxB,MAAMC,cAAc,GAAG,EAAE,CAAA;AACzB,MAAMC,WAAW,GAAG,GAAG,CAAA;AAEVC,MAAAA,iBAAiB,GAAGC,MAAM,CAACC,GAAG,CAAA;AAC3C;AACA;AACA;AACA,WAAA,EAAaN,iBAAiB,CAAA;AAC9B;AACA,iBAAA,EAAmBG,WAAW,CAAA;AAC9B;AACA;AACA;AACA;AACA;AACA,EAAC;AAEYI,MAAAA,sBAAsB,GAAGF,MAAM,CAACG,IAAI,CAAA;AACjD;AACA,OAAA,EAASR,iBAAiB,CAAA;AAC1B,UAAA,EAAYA,iBAAiB,CAAA;AAC7B;AACA;AACA;AACA,iBAAA,EAAmBG,WAAW,CAAA;AAC9B;AACA,cAAA,EAAgBM,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,QAAQ,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AAClD,UAAA,EAAYC,KAAA,IAAA;EAAA,IAAC;AAAEH,IAAAA,KAAAA;AAAM,GAAC,GAAAG,KAAA,CAAA;AAAA,EAAA,OAAKH,KAAK,CAACC,QAAQ,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AAC9C;AACA;AACA;AACA;AACA,EAAC;AAEYE,MAAAA,kBAAkB,GAAGT,MAAM,CAACG,IAAmB,CAAA;AAC5D,aAAA,EAAeO,KAAA,IAAA;EAAA,IAAC;AAAEL,IAAAA,KAAAA;AAAM,GAAC,GAAAK,KAAA,CAAA;AAAA,EAAA,OAAKL,KAAK,CAACM,YAAY,CAACC,GAAG,CAAA;AAAA,CAAA,CAAA;AACpD;AACA;AACA;AACA,WAAA,EAAaC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAMC,OAAO,GAAG,CAAC,GAAG,GAAG,CAAA;AAAA,CAAC,CAAA;AACjD,sBAAA,EAAwBC,KAAA,IAAA;EAAA,IAAC;AAAEV,IAAAA,KAAAA;AAAM,GAAC,GAAAU,KAAA,CAAA;AAAA,EAAA,OAAKV,KAAK,CAACC,QAAQ,CAACU,IAAI,CAAA;AAAA,CAAA,CAAA;AAC1D;AACA,EAAC;AAEYC,MAAAA,iBAAiB,GAAGjB,MAAM,CAACkB,MAAqB,CAAA;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,WAAatB,EAAAA,cAAc,MAAMC,cAAc,CAAA;AAC/C,iBAAA,EAAmBC,WAAW,CAAA;AAC9B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAYW,EAAAA,kBAAkB,qBAAqBA,kBAAkB,CAAA;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAA,EAAeA,kBAAkB,CAAA;AACjC;AACA;AACA;;;;"}

package/dist/types/accordion/useExpanded.d.ts

@@ -1,10 +1,27 @@
+/// <reference types="react" />
 import { AccordionProps } from './types.js';
-import { GetCollapsePropsOutput, GetTogglePropsOutput } from 'react-collapsed/dist/types.js';
-declare type UseExpanded = (props: Pick<AccordionProps, 'defaultExpanded' | 'onExpand' | 'onCollapse'>) => {
-    toggleProps: GetTogglePropsOutput;
-    collapseProps: GetCollapsePropsOutput;
+export declare const useExpanded: ({ defaultExpanded, onExpand, onCollapse, }: Pick<AccordionProps, 'defaultExpanded' | 'onExpand' | 'onCollapse'>) => {
+    toggleProps: {
+        ref: ((instance: any) => void) | import("react").MutableRefObject<any>;
+    } & {
+        onClick: import("react").MouseEventHandler<Element>;
+        id: string;
+        'aria-controls': string;
+        'aria-expanded'?: boolean | undefined;
+        type?: "button" | undefined;
+        disabled?: boolean | undefined;
+        'aria-disabled'?: boolean | undefined;
+        role?: "button" | undefined;
+        tabIndex?: number | undefined;
+    };
+    collapseProps: {
+        ref: ((instance: any) => void) | import("react").MutableRefObject<any>;
+    } & {
+        id: string;
+        'aria-hidden': boolean;
+        role: string;
+        style: import("react").CSSProperties;
+    };
     isExpanded: boolean;
 };
-export declare const useExpanded: UseExpanded;
-export {};
 //# sourceMappingURL=useExpanded.d.ts.map

package/dist/types/accordion/useExpanded.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExpanded.d.ts","sourceRoot":"","sources":["../../../packages/accordion/useExpanded.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,OAAO,EACL,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,+BAA+B,CAAA;AAKtC,aAAK,WAAW,GAAG,CACjB,KAAK,EAAE,IAAI,CAAC,cAAc,EAAE,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAAC,KACvE;IACH,WAAW,EAAE,oBAAoB,CAAA;IACjC,aAAa,EAAE,sBAAsB,CAAA;IACrC,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,WA2BzB,CAAA"}
+{"version":3,"file":"useExpanded.d.ts","sourceRoot":"","sources":["../../../packages/accordion/useExpanded.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAA;AAE3C,eAAO,MAAM,WAAW,+CAIrB,KAAK,cAAc,EAAE,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;CAcrE,CAAA"}

package/dist/types/accordion-transparent/useExpanded.d.ts

@@ -1,10 +1,27 @@
+/// <reference types="react" />
 import { AccordionTransparentProps } from './types.js';
-import { GetCollapsePropsOutput, GetTogglePropsOutput } from 'react-collapsed/dist/types.js';
-declare type UseExpanded = (props: Pick<AccordionTransparentProps, 'defaultExpanded' | 'onExpand' | 'onCollapse'>) => {
-    toggleProps: GetTogglePropsOutput;
-    collapseProps: GetCollapsePropsOutput;
+export declare const useExpanded: ({ defaultExpanded, onExpand, onCollapse, }: Pick<AccordionTransparentProps, 'defaultExpanded' | 'onExpand' | 'onCollapse'>) => {
+    toggleProps: {
+        ref: ((instance: any) => void) | import("react").MutableRefObject<any>;
+    } & {
+        onClick: import("react").MouseEventHandler<Element>;
+        id: string;
+        'aria-controls': string;
+        'aria-expanded'?: boolean | undefined;
+        type?: "button" | undefined;
+        disabled?: boolean | undefined;
+        'aria-disabled'?: boolean | undefined;
+        role?: "button" | undefined;
+        tabIndex?: number | undefined;
+    };
+    collapseProps: {
+        ref: ((instance: any) => void) | import("react").MutableRefObject<any>;
+    } & {
+        id: string;
+        'aria-hidden': boolean;
+        role: string;
+        style: import("react").CSSProperties;
+    };
     isExpanded: boolean;
 };
-export declare const useExpanded: UseExpanded;
-export {};
 //# sourceMappingURL=useExpanded.d.ts.map

package/dist/types/accordion-transparent/useExpanded.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useExpanded.d.ts","sourceRoot":"","sources":["../../../packages/accordion-transparent/useExpanded.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAA;AAEtD,OAAO,EACL,sBAAsB,EACtB,oBAAoB,EACrB,MAAM,+BAA+B,CAAA;AAKtC,aAAK,WAAW,GAAG,CACjB,KAAK,EAAE,IAAI,CACT,yBAAyB,EACzB,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAC9C,KACE;IACH,WAAW,EAAE,oBAAoB,CAAA;IACjC,aAAa,EAAE,sBAAsB,CAAA;IACrC,UAAU,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,WA2BzB,CAAA"}
+{"version":3,"file":"useExpanded.d.ts","sourceRoot":"","sources":["../../../packages/accordion-transparent/useExpanded.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAA;AAEtD,eAAO,MAAM,WAAW,+CAIrB,KACD,yBAAyB,EACzB,iBAAiB,GAAG,UAAU,GAAG,YAAY,CAC9C;;;;;;;;;;;;;;;;;;;;;;;CAcA,CAAA"}

package/dist/types/index.d.ts

@@ -27,6 +27,7 @@ export * from './select/index.js';
 export * from './service-page/index.js';
 export * from './stack/index.js';
 export * from './styled-system/index.js';
+export * from './switcher/index.js';
 export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './text/index.js';

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,kBAAkB,CAAA;AAChC,cAAc,0BAA0B,CAAA;AACxC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kBAAkB,CAAA;AAChC,cAAc,kCAAkC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../packages/index.ts"],"names":[],"mappings":"AACA,cAAc,sBAAsB,CAAA;AACpC,cAAc,oBAAoB,CAAA;AAClC,cAAc,yBAAyB,CAAA;AACvC,cAAc,kBAAkB,CAAA;AAChC,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,qBAAqB,CAAA;AACnC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,sBAAsB,CAAA;AACpC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,oBAAoB,CAAA;AAClC,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,sBAAsB,CAAA;AACpC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,oBAAoB,CAAA;AAClC,cAAc,sBAAsB,CAAA;AACpC,cAAc,kBAAkB,CAAA;AAChC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,oBAAoB,CAAA;AAClC,cAAc,mBAAmB,CAAA;AACjC,cAAc,yBAAyB,CAAA;AACvC,cAAc,kBAAkB,CAAA;AAChC,cAAc,0BAA0B,CAAA;AACxC,cAAc,qBAAqB,CAAA;AACnC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iBAAiB,CAAA;AAC/B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,kBAAkB,CAAA;AAChC,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA;AAClC,cAAc,uBAAuB,CAAA;AACrC,cAAc,kBAAkB,CAAA;AAChC,cAAc,iCAAiC,CAAA;AAC/C,cAAc,0BAA0B,CAAA;AACxC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,uBAAuB,CAAA;AACrC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,kBAAkB,CAAA;AAChC,cAAc,kCAAkC,CAAA"}

package/dist/types/switcher/Switcher.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+/**
+ * Segmented control container for SwitcherItem options.
+ */
+export declare const Switcher: import("react").ForwardRefExoticComponent<{
+    children?: import("react").ReactNode;
+} & Omit<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & {
+    as?: keyof JSX.IntrinsicElements | undefined;
+    forwardedAs?: keyof JSX.IntrinsicElements | undefined;
+}, "ref" | "children"> & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Switcher.d.ts.map

package/dist/types/switcher/Switcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switcher.d.ts","sourceRoot":"","sources":["../../../packages/switcher/Switcher.tsx"],"names":[],"mappings":";AAKA;;GAEG;AACH,eAAO,MAAM,QAAQ;;;;;uEAwGpB,CAAA"}

package/dist/types/switcher/SwitcherItem.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * Switcher option button.
+ */
+export declare const SwitcherItem: import("react").ForwardRefExoticComponent<{
+    active?: boolean | undefined;
+    children?: import("react").ReactNode;
+} & Omit<import("react").ClassAttributes<HTMLButtonElement> & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+    as?: keyof JSX.IntrinsicElements | undefined;
+    forwardedAs?: keyof JSX.IntrinsicElements | undefined;
+}, "ref" | "children" | "active"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=SwitcherItem.d.ts.map

package/dist/types/switcher/SwitcherItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitcherItem.d.ts","sourceRoot":"","sources":["../../../packages/switcher/SwitcherItem.tsx"],"names":[],"mappings":";AAIA;;GAEG;AACH,eAAO,MAAM,YAAY;;;;;;qFAmBxB,CAAA"}

package/dist/types/switcher/SwitcherStyles.d.ts

@@ -0,0 +1,9 @@
+declare type InjectedProps = {
+    $active: boolean;
+};
+export declare const SwitcherListStyle: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const SwitcherIndicatorStyle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const SwitcherLabelStyle: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, InjectedProps, never>;
+export declare const SwitcherItemStyle: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, InjectedProps, never>;
+export {};
+//# sourceMappingURL=SwitcherStyles.d.ts.map

package/dist/types/switcher/SwitcherStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SwitcherStyles.d.ts","sourceRoot":"","sources":["../../../packages/switcher/SwitcherStyles.tsx"],"names":[],"mappings":"AAEA,aAAK,aAAa,GAAG;IACnB,OAAO,EAAE,OAAO,CAAA;CACjB,CAAA;AAOD,eAAO,MAAM,iBAAiB,yGAY7B,CAAA;AAED,eAAO,MAAM,sBAAsB,0GAelC,CAAA;AAED,eAAO,MAAM,kBAAkB,qHAQ9B,CAAA;AAED,eAAO,MAAM,iBAAiB,uHA4B7B,CAAA"}

package/dist/types/switcher/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Switcher.js';
+export * from './SwitcherItem.js';
+export * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/switcher/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../packages/switcher/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA;AAC7B,cAAc,mBAAmB,CAAA;AACjC,cAAc,YAAY,CAAA"}

package/dist/types/switcher/types.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+import { LidoComponentProps } from '../utils';
+export type { Theme } from '../theme/index.js';
+export declare type SwitcherProps = LidoComponentProps<'div', {
+    children?: ReactNode;
+}>;
+export declare type SwitcherItemProps = LidoComponentProps<'button', {
+    active?: boolean;
+    children?: ReactNode;
+}>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types/switcher/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../packages/switcher/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAC7C,YAAY,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAE9C,oBAAY,aAAa,GAAG,kBAAkB,CAC5C,KAAK,EACL;IACE,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CACF,CAAA;AAED,oBAAY,iBAAiB,GAAG,kBAAkB,CAChD,QAAQ,EACR;IACE,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAA;CACrB,CACF,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lidofinance/lido-ui",
-  "version": "3.41.0",
+  "version": "3.42.1",
   "homepage": "https://github.com/lidofinance/ui",
   "repository": {
     "type": "git",
@@ -50,7 +50,7 @@
   },
   "dependencies": {
     "@styled-system/should-forward-prop": "5.1.5",
-    "react-collapsed": "3.0.2",
+    "react-collapsed": "4.2.0",
     "react-jazzicon": "^1.0.4",
     "react-toastify": "7.0.4",
     "react-transition-group": "4",