cakeinpanic-ui 1.0.0

package/dist/esm/popup-menu/PopupMenuItemStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupMenuItemStyles.mjs","sources":["../../../src/popup-menu/PopupMenuItemStyles.ts"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { PopupMenuVariants } from './types.js'\n\nexport const PopupMenuItemStyle = styled.button<{ $active: boolean }>`\n  text-align: left;\n  display: flex;\n  width: 100%;\n  align-items: stretch;\n  box-sizing: border-box;\n  font-family: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  background: transparent;\n  border-radius: 0;\n  color: var(--lido-color-text);\n  border: none;\n  box-shadow: none;\n  outline: none;\n  cursor: pointer;\n  padding: 0 15px;\n  margin: 0;\n  position: relative;\n\n  &:disabled {\n    cursor: default;\n    color: var(--lido-color-textSecondary);\n  }\n\n  &:before {\n    content: '';\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    pointer-events: none;\n    border-radius: inherit;\n    opacity: ${({ $active }) => ($active ? 0.04 : 0)};\n    background: var(--lido-color-popupMenuItemBgActiveHover);\n    transition: opacity ${({ theme }) => theme.duration.fast} ease;\n  }\n\n  &:focus:not(:disabled):before {\n    opacity: 0.04;\n  }\n`\n\nconst variants = {\n  small: css`\n    padding: 12px 0;\n    font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n    line-height: 1.35em;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    font-weight: 800;\n  `,\n  default: css`\n    padding: 18px 0;\n    font-size: ${({ theme }) => theme.fontSizesMap.xs}px;\n    line-height: 1.4em;\n    font-weight: 400;\n  `,\n}\n\nexport const PopupMenuItemContentStyle = styled.span<{\n  $variant: PopupMenuVariants\n}>`\n  position: relative;\n  padding: 18px 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n\n  ${({ $variant }) => variants[$variant]}\n`\n\nconst decoratorCSS = css`\n  flex-grow: 0;\n  flex-shrink: 0;\n  cursor: default;\n  display: flex;\n  align-items: center;\n`\n\nexport const PopupMenuItemLeftDecoratorStyle = styled.span`\n  ${decoratorCSS};\n  padding-right: 16px;\n`\n\nexport const PopupMenuItemRightDecoratorStyle = styled.span`\n  ${decoratorCSS};\n  padding-left: 16px;\n`\n"],"names":["PopupMenuItemStyle","styled","button","_ref","$active","_ref2","theme","duration","fast","variants","small","css","_ref3","fontSizesMap","xxs","default","_ref4","xs","PopupMenuItemContentStyle","span","_ref5","$variant","decoratorCSS","PopupMenuItemLeftDecoratorStyle","PopupMenuItemRightDecoratorStyle"],"mappings":";;;AAGaA,MAAAA,kBAAkB,GAAGC,MAAM,CAACC,MAA4B,CAAA;AACrE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAA,EAAeC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAMC,OAAO,GAAG,IAAI,GAAG,CAAC,CAAA;AAAA,CAAC,CAAA;AACpD;AACA,wBAAA,EAA0BC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,QAAQ,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AAC5D;AACA;AACA;AACA;AACA;AACA,EAAC;AAED,MAAMC,QAAQ,GAAG;AACfC,EAAAA,KAAK,EAAEC,GAAG,CAAA;AACZ;AACA,eAAA,EAAiBC,KAAA,IAAA;IAAA,IAAC;AAAEN,MAAAA,KAAAA;AAAM,KAAC,GAAAM,KAAA,CAAA;AAAA,IAAA,OAAKN,KAAK,CAACO,YAAY,CAACC,GAAG,CAAA;AAAA,GAAA,CAAA;AACtD;AACA;AACA;AACA;AACA,EAAG,CAAA;AACDC,EAAAA,OAAO,EAAEJ,GAAG,CAAA;AACd;AACA,eAAA,EAAiBK,KAAA,IAAA;IAAA,IAAC;AAAEV,MAAAA,KAAAA;AAAM,KAAC,GAAAU,KAAA,CAAA;AAAA,IAAA,OAAKV,KAAK,CAACO,YAAY,CAACI,EAAE,CAAA;AAAA,GAAA,CAAA;AACrD;AACA;AACA,EAAA,CAAA;AACA,CAAC,CAAA;AAEYC,MAAAA,yBAAyB,GAAGjB,MAAM,CAACkB,IAE9C,CAAA;AACF;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAD,KAAA,CAAA;EAAA,OAAKX,QAAQ,CAACY,QAAQ,CAAC,CAAA;AAAA,CAAA,CAAA;AACxC,EAAC;AAED,MAAMC,YAAY,GAAGX,GAAG,CAAA;AACxB;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;AAEYY,MAAAA,+BAA+B,GAAGtB,MAAM,CAACkB,IAAI,CAAA;AAC1D,EAAA,EAAIG,YAAY,CAAA;AAChB;AACA,EAAC;AAEYE,MAAAA,gCAAgC,GAAGvB,MAAM,CAACkB,IAAI,CAAA;AAC3D,EAAA,EAAIG,YAAY,CAAA;AAChB;AACA;;;;"}

package/dist/esm/popup-menu/PopupMenuProvider.mjs

@@ -0,0 +1,22 @@
+import { useContext, createContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+const Context = /*#__PURE__*/createContext({});
+const usePopupMenuContext = () => {
+  return useContext(Context);
+};
+const PopupMenuProvider = _ref => {
+  let {
+    variant,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsx(Context.Provider, {
+    value: {
+      variant
+    },
+    ...rest
+  });
+};
+
+export { PopupMenuProvider, usePopupMenuContext };
+//# sourceMappingURL=PopupMenuProvider.mjs.map

package/dist/esm/popup-menu/PopupMenuProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupMenuProvider.mjs","sources":["../../../src/popup-menu/PopupMenuProvider.tsx"],"sourcesContent":["import { PropsWithChildren, createContext, useContext, FC } from 'react'\nimport { PopupMenuVariants } from './types.js'\n\nexport interface PopupMenuContext {\n  variant?: PopupMenuVariants\n}\n\nconst Context = createContext({} as PopupMenuContext)\n\nexport const usePopupMenuContext = (): PopupMenuContext => {\n  return useContext(Context)\n}\n\nexport const PopupMenuProvider: FC<PropsWithChildren<PopupMenuContext>> = ({\n  variant,\n  ...rest\n}) => {\n  return <Context.Provider value={{ variant }} {...rest} />\n}\n"],"names":["Context","createContext","usePopupMenuContext","useContext","PopupMenuProvider","_ref","variant","rest","_jsx","Provider","value"],"mappings":";;;AAOA,MAAMA,OAAO,gBAAGC,aAAa,CAAC,EAAsB,CAAC,CAAA;AAExCC,MAAAA,mBAAmB,GAAGA,MAAwB;EACzD,OAAOC,UAAU,CAACH,OAAO,CAAC,CAAA;AAC5B,EAAC;AAEYI,MAAAA,iBAA0D,GAAGC,IAAA,IAGpE;EAAA,IAHqE;IACzEC,OAAO;IACP,GAAGC,IAAAA;AACL,GAAC,GAAAF,IAAA,CAAA;AACC,EAAA,oBAAOG,GAAA,CAACR,OAAO,CAACS,QAAQ,EAAA;AAACC,IAAAA,KAAK,EAAE;AAAEJ,MAAAA,OAAAA;KAAU;IAAA,GAAKC,IAAAA;AAAI,GAAG,CAAC,CAAA;AAC3D;;;;"}

package/dist/esm/popup-menu/PopupMenuStyles.mjs

@@ -0,0 +1,58 @@
+import styled from '../utils/styled-components-wrapper.mjs';
+import { Popover } from '../popover/Popover.mjs';
+import { PopupMenuItemStyle } from './PopupMenuItemStyles.mjs';
+
+const PopupMenuStyle = styled(Popover)`
+  outline: none;
+  box-sizing: border-box;
+  border: 1px solid transparent;
+  border-radius: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.borderRadiusesMap.lg;
+}}px;
+  overflow: auto;
+  overflow-x: hidden;
+  box-shadow: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.boxShadows.xs;
+}}
+    var(--lido-color-shadowLight);
+  padding: 0;
+
+  ${PopupMenuItemStyle}:first-child {
+    border-top-left-radius: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.borderRadiusesMap.lg - 1;
+}}px;
+    border-top-right-radius: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.borderRadiusesMap.lg - 1;
+}}px;
+  }
+
+  ${PopupMenuItemStyle}:last-child {
+    border-bottom-left-radius: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.borderRadiusesMap.lg - 1;
+}}px;
+    border-bottom-right-radius: ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.borderRadiusesMap.lg - 1;
+}}px;
+  }
+`;
+
+export { PopupMenuStyle };
+//# sourceMappingURL=PopupMenuStyles.mjs.map

package/dist/esm/popup-menu/PopupMenuStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupMenuStyles.mjs","sources":["../../../src/popup-menu/PopupMenuStyles.ts"],"sourcesContent":["import styled from '../utils/styled-components-wrapper.js'\nimport { Popover } from '../popover/index.js'\nimport { PopupMenuItemStyle } from './PopupMenuItemStyles.js'\n\nexport const PopupMenuStyle = styled(Popover)`\n  outline: none;\n  box-sizing: border-box;\n  border: 1px solid transparent;\n  border-radius: ${({ theme }) => theme.borderRadiusesMap.lg}px;\n  overflow: auto;\n  overflow-x: hidden;\n  box-shadow: ${({ theme }) => theme.boxShadows.xs}\n    var(--lido-color-shadowLight);\n  padding: 0;\n\n  ${PopupMenuItemStyle}:first-child {\n    border-top-left-radius: ${({ theme }) => theme.borderRadiusesMap.lg - 1}px;\n    border-top-right-radius: ${({ theme }) => theme.borderRadiusesMap.lg - 1}px;\n  }\n\n  ${PopupMenuItemStyle}:last-child {\n    border-bottom-left-radius: ${({ theme }) =>\n      theme.borderRadiusesMap.lg - 1}px;\n    border-bottom-right-radius: ${({ theme }) =>\n      theme.borderRadiusesMap.lg - 1}px;\n  }\n`\n"],"names":["PopupMenuStyle","styled","Popover","_ref","theme","borderRadiusesMap","lg","_ref2","boxShadows","xs","PopupMenuItemStyle","_ref3","_ref4","_ref5","_ref6"],"mappings":";;;;MAIaA,cAAc,GAAGC,MAAM,CAACC,OAAO,CAAC,CAAA;AAC7C;AACA;AACA;AACA,iBAAA,EAAmBC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,iBAAiB,CAACC,EAAE,CAAA;AAAA,CAAA,CAAA;AAC5D;AACA;AACA,cAAA,EAAgBC,KAAA,IAAA;EAAA,IAAC;AAAEH,IAAAA,KAAAA;AAAM,GAAC,GAAAG,KAAA,CAAA;AAAA,EAAA,OAAKH,KAAK,CAACI,UAAU,CAACC,EAAE,CAAA;AAAA,CAAA,CAAA;AAClD;AACA;AACA;AACA,EAAA,EAAIC,kBAAkB,CAAA;AACtB,4BAAA,EAA8BC,KAAA,IAAA;EAAA,IAAC;AAAEP,IAAAA,KAAAA;AAAM,GAAC,GAAAO,KAAA,CAAA;AAAA,EAAA,OAAKP,KAAK,CAACC,iBAAiB,CAACC,EAAE,GAAG,CAAC,CAAA;AAAA,CAAA,CAAA;AAC3E,6BAAA,EAA+BM,KAAA,IAAA;EAAA,IAAC;AAAER,IAAAA,KAAAA;AAAM,GAAC,GAAAQ,KAAA,CAAA;AAAA,EAAA,OAAKR,KAAK,CAACC,iBAAiB,CAACC,EAAE,GAAG,CAAC,CAAA;AAAA,CAAA,CAAA;AAC5E;AACA;AACA,EAAA,EAAII,kBAAkB,CAAA;AACtB,+BAAA,EAAiCG,KAAA,IAAA;EAAA,IAAC;AAAET,IAAAA,KAAAA;AAAM,GAAC,GAAAS,KAAA,CAAA;AAAA,EAAA,OACrCT,KAAK,CAACC,iBAAiB,CAACC,EAAE,GAAG,CAAC,CAAA;AAAA,CAAA,CAAA;AACpC,gCAAA,EAAkCQ,KAAA,IAAA;EAAA,IAAC;AAAEV,IAAAA,KAAAA;AAAM,GAAC,GAAAU,KAAA,CAAA;AAAA,EAAA,OACtCV,KAAK,CAACC,iBAAiB,CAACC,EAAE,GAAG,CAAC,CAAA;AAAA,CAAA,CAAA;AACpC;AACA;;;;"}

package/dist/esm/popup-menu/constants.mjs

@@ -0,0 +1,4 @@
+const FOCUSABLE_ELEMENTS = ['a[href]', 'button:not([disabled]):not([aria-hidden])', '[tabindex]:not([tabindex^="-"])'];
+
+export { FOCUSABLE_ELEMENTS };
+//# sourceMappingURL=constants.mjs.map

package/dist/esm/popup-menu/constants.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.mjs","sources":["../../../src/popup-menu/constants.ts"],"sourcesContent":["export const FOCUSABLE_ELEMENTS = [\n  'a[href]',\n  'button:not([disabled]):not([aria-hidden])',\n  '[tabindex]:not([tabindex^=\"-\"])',\n]\n"],"names":["FOCUSABLE_ELEMENTS"],"mappings":"AAAO,MAAMA,kBAAkB,GAAG,CAChC,SAAS,EACT,2CAA2C,EAC3C,iCAAiC;;;;"}

package/dist/esm/popup-menu/types.mjs

@@ -0,0 +1,8 @@
+let PopupMenuVariant = /*#__PURE__*/function (PopupMenuVariant) {
+  PopupMenuVariant[PopupMenuVariant["small"] = 0] = "small";
+  PopupMenuVariant[PopupMenuVariant["default"] = 1] = "default";
+  return PopupMenuVariant;
+}({});
+
+export { PopupMenuVariant };
+//# sourceMappingURL=types.mjs.map

package/dist/esm/popup-menu/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","sources":["../../../src/popup-menu/types.ts"],"sourcesContent":["import { ReactNode } from 'react'\nimport { LidoComponentProps } from '../utils/index.js'\nimport { PopoverProps } from '../popover/index.js'\nexport type { Theme } from '../theme/index.js'\n\nexport enum PopupMenuVariant {\n  small,\n  default,\n}\nexport type PopupMenuVariants = keyof typeof PopupMenuVariant\n\nexport type PopupMenuProps = {\n  variant?: PopupMenuVariants\n} & PopoverProps\n\nexport type PopupMenuItemProps = LidoComponentProps<\n  'button',\n  {\n    leftDecorator?: ReactNode\n    rightDecorator?: ReactNode\n    active?: boolean\n  }\n>\n"],"names":["PopupMenuVariant"],"mappings":"AAKYA,IAAAA,gBAAgB,0BAAhBA,gBAAgB,EAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA,CAAA;AAAhBA,EAAAA,gBAAgB,CAAhBA,gBAAgB,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAA,CAAA;AAAA,EAAA,OAAhBA,gBAAgB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/esm/popup-menu/usePopupFocus.mjs

@@ -0,0 +1,78 @@
+import { useRef, useCallback } from 'react';
+import '../utils/styled-components-wrapper.mjs';
+import { useInterceptFocus } from '../hooks/useInterceptFocus.mjs';
+import 'use-callback-ref';
+import '../theme/cookie-theme-provider.mjs';
+import '../theme/theme-provider.mjs';
+import '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 { FOCUSABLE_ELEMENTS } from './constants.mjs';
+
+const usePopupFocus = _ref => {
+  let {
+    onMouseMove,
+    onKeyDown
+  } = _ref;
+  const ref = useRef(null);
+  const getFocusableNodes = useCallback(() => {
+    const nodes = ref.current?.querySelectorAll(FOCUSABLE_ELEMENTS.join(',')) ?? [];
+    return Array.from(nodes).filter(node => node && node instanceof HTMLElement && node.offsetParent !== null);
+  }, []);
+  const handleFocusTo = useCallback(function (event) {
+    let offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+    const focusableNodes = getFocusableNodes();
+    if (focusableNodes.length === 0) return;
+    const currentElement = document.activeElement;
+    const focusedItemIndex = currentElement instanceof HTMLElement ? focusableNodes.indexOf(currentElement) : -1;
+    const activeItemIndex = focusableNodes.findIndex(node => node.getAttribute('aria-selected') === 'true');
+    const currentIndex = focusedItemIndex === -1 ? activeItemIndex : focusedItemIndex;
+    let nextIndex = currentIndex + offset;
+    if (nextIndex < 0) nextIndex = focusableNodes.length - 1;
+    if (nextIndex >= focusableNodes.length) nextIndex = 0;
+    focusableNodes[nextIndex].focus();
+    event.preventDefault();
+  }, [getFocusableNodes]);
+  const handleMouseMove = useCallback(event => {
+    onMouseMove?.(event);
+    const {
+      target
+    } = event;
+    if (!(target instanceof HTMLElement)) return;
+    const focusableNodes = getFocusableNodes();
+    const overed = target.closest(FOCUSABLE_ELEMENTS.join(','));
+    if (!(overed instanceof HTMLElement)) return;
+    const isNotFocusable = !focusableNodes.includes(overed);
+    const isActive = overed === document.activeElement;
+    if (isActive || isNotFocusable) return;
+    overed.focus();
+  }, [getFocusableNodes, onMouseMove]);
+  const handleKeyDown = useCallback(event => {
+    onKeyDown?.(event);
+    const code = event.code ?? event.key;
+    if (code === 'Tab') event.preventDefault();
+    if (code === 'ArrowDown') handleFocusTo(event, +1);
+    if (code === 'ArrowUp') handleFocusTo(event, -1);
+  }, [handleFocusTo, onKeyDown]);
+  const [interceptFocus, restoreFocus] = useInterceptFocus();
+  const handleEnter = useCallback(() => {
+    if (ref.current) interceptFocus(ref.current);
+  }, [interceptFocus]);
+  const handleExit = useCallback(() => {
+    restoreFocus();
+  }, [restoreFocus]);
+  return {
+    ref,
+    handleMouseMove,
+    handleKeyDown,
+    handleEnter,
+    handleExit
+  };
+};
+
+export { usePopupFocus };
+//# sourceMappingURL=usePopupFocus.mjs.map

package/dist/esm/popup-menu/usePopupFocus.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePopupFocus.mjs","sources":["../../../src/popup-menu/usePopupFocus.ts"],"sourcesContent":["import {\n  KeyboardEvent,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  RefObject,\n  useCallback,\n  useRef,\n} from 'react'\nimport { useInterceptFocus } from '../hooks/index.js'\nimport { FOCUSABLE_ELEMENTS } from './constants.js'\nimport { PopupMenuProps } from './types.js'\n\nexport const usePopupFocus = <T extends HTMLDivElement>({\n  onMouseMove,\n  onKeyDown,\n}: Pick<PopupMenuProps, 'onMouseMove' | 'onKeyDown'>): {\n  ref: RefObject<T>\n  handleMouseMove: MouseEventHandler<T>\n  handleKeyDown: KeyboardEventHandler<T>\n  handleEnter: () => void\n  handleExit: () => void\n} => {\n  const ref = useRef<T>(null)\n\n  const getFocusableNodes = useCallback(() => {\n    const nodes =\n      ref.current?.querySelectorAll(FOCUSABLE_ELEMENTS.join(',')) ?? []\n\n    return Array.from(nodes).filter(\n      (node): node is HTMLElement =>\n        node && node instanceof HTMLElement && node.offsetParent !== null,\n    )\n  }, [])\n\n  const handleFocusTo = useCallback(\n    (event: KeyboardEvent<T>, offset = 1) => {\n      const focusableNodes = getFocusableNodes()\n\n      if (focusableNodes.length === 0) return\n\n      const currentElement = document.activeElement\n      const focusedItemIndex =\n        currentElement instanceof HTMLElement\n          ? focusableNodes.indexOf(currentElement)\n          : -1\n\n      const activeItemIndex = focusableNodes.findIndex(\n        (node) => node.getAttribute('aria-selected') === 'true',\n      )\n\n      const currentIndex =\n        focusedItemIndex === -1 ? activeItemIndex : focusedItemIndex\n\n      let nextIndex = currentIndex + offset\n      if (nextIndex < 0) nextIndex = focusableNodes.length - 1\n      if (nextIndex >= focusableNodes.length) nextIndex = 0\n\n      focusableNodes[nextIndex].focus()\n      event.preventDefault()\n    },\n    [getFocusableNodes],\n  )\n\n  const handleMouseMove: MouseEventHandler<T> = useCallback(\n    (event) => {\n      onMouseMove?.(event)\n\n      const { target } = event\n      if (!(target instanceof HTMLElement)) return\n\n      const focusableNodes = getFocusableNodes()\n      const overed = target.closest(FOCUSABLE_ELEMENTS.join(','))\n\n      if (!(overed instanceof HTMLElement)) return\n\n      const isNotFocusable = !focusableNodes.includes(overed)\n      const isActive = overed === document.activeElement\n\n      if (isActive || isNotFocusable) return\n\n      overed.focus()\n    },\n    [getFocusableNodes, onMouseMove],\n  )\n\n  const handleKeyDown: KeyboardEventHandler<T> = useCallback(\n    (event) => {\n      onKeyDown?.(event)\n      const code = event.code ?? event.key\n\n      if (code === 'Tab') event.preventDefault()\n      if (code === 'ArrowDown') handleFocusTo(event, +1)\n      if (code === 'ArrowUp') handleFocusTo(event, -1)\n    },\n    [handleFocusTo, onKeyDown],\n  )\n\n  const [interceptFocus, restoreFocus] = useInterceptFocus()\n\n  const handleEnter = useCallback(() => {\n    if (ref.current) interceptFocus(ref.current)\n  }, [interceptFocus])\n\n  const handleExit = useCallback(() => {\n    restoreFocus()\n  }, [restoreFocus])\n\n  return {\n    ref,\n    handleMouseMove,\n    handleKeyDown,\n    handleEnter,\n    handleExit,\n  }\n}\n"],"names":["usePopupFocus","_ref","onMouseMove","onKeyDown","ref","useRef","getFocusableNodes","useCallback","nodes","current","querySelectorAll","FOCUSABLE_ELEMENTS","join","Array","from","filter","node","HTMLElement","offsetParent","handleFocusTo","event","offset","arguments","length","undefined","focusableNodes","currentElement","document","activeElement","focusedItemIndex","indexOf","activeItemIndex","findIndex","getAttribute","currentIndex","nextIndex","focus","preventDefault","handleMouseMove","target","overed","closest","isNotFocusable","includes","isActive","handleKeyDown","code","key","interceptFocus","restoreFocus","useInterceptFocus","handleEnter","handleExit"],"mappings":"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"}

package/dist/esm/section/Section.mjs

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import { SectionStyle, SectionHeaderStyle, SectionTitleStyle, SectionHeaderDecoratorStyle } from './SectionStyles.mjs';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+const Section = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    title,
+    headerDecorator,
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsxs(SectionStyle, {
+    ...rest,
+    ref: ref,
+    children: [title && /*#__PURE__*/jsxs(SectionHeaderStyle, {
+      children: [/*#__PURE__*/jsx(SectionTitleStyle, {
+        children: title
+      }), headerDecorator && /*#__PURE__*/jsx(SectionHeaderDecoratorStyle, {
+        children: headerDecorator
+      })]
+    }), children]
+  });
+});
+Section.displayName = 'Section';
+
+export { Section };
+//# sourceMappingURL=Section.mjs.map

package/dist/esm/section/Section.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.mjs","sources":["../../../src/section/Section.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { SectionProps } from './types.js'\nimport {\n  SectionStyle,\n  SectionHeaderStyle,\n  SectionTitleStyle,\n  SectionHeaderDecoratorStyle,\n} from './SectionStyles.js'\n\nexport const Section = forwardRef(\n  (\n    { title, headerDecorator, children, ...rest }: SectionProps,\n    ref?: ForwardedRef<HTMLDivElement>,\n  ) => {\n    return (\n      <SectionStyle {...rest} ref={ref}>\n        {title && (\n          <SectionHeaderStyle>\n            <SectionTitleStyle>{title}</SectionTitleStyle>\n            {headerDecorator && (\n              <SectionHeaderDecoratorStyle>\n                {headerDecorator}\n              </SectionHeaderDecoratorStyle>\n            )}\n          </SectionHeaderStyle>\n        )}\n        {children}\n      </SectionStyle>\n    )\n  },\n)\nSection.displayName = 'Section'\n"],"names":["Section","forwardRef","_ref","ref","title","headerDecorator","children","rest","_jsxs","SectionStyle","SectionHeaderStyle","_jsx","SectionTitleStyle","SectionHeaderDecoratorStyle","displayName"],"mappings":";;;;AASO,MAAMA,OAAO,gBAAGC,UAAU,CAC/B,CAAAC,IAAA,EAEEC,GAAkC,KAC/B;EAAA,IAFH;IAAEC,KAAK;IAAEC,eAAe;IAAEC,QAAQ;IAAE,GAAGC,IAAAA;AAAmB,GAAC,GAAAL,IAAA,CAAA;EAG3D,oBACEM,IAAA,CAACC,YAAY,EAAA;AAAA,IAAA,GAAKF,IAAI;AAAEJ,IAAAA,GAAG,EAAEA,GAAI;AAAAG,IAAAA,QAAA,EAC9BF,CAAAA,KAAK,iBACJI,IAAA,CAACE,kBAAkB,EAAA;MAAAJ,QAAA,EAAA,cACjBK,GAAA,CAACC,iBAAiB,EAAA;AAAAN,QAAAA,QAAA,EAAEF,KAAAA;AAAK,OAAoB,CAAC,EAC7CC,eAAe,iBACdM,GAAA,CAACE,2BAA2B,EAAA;AAAAP,QAAAA,QAAA,EACzBD,eAAAA;AAAe,OACW,CAC9B,CAAA;KACiB,CACrB,EACAC,QAAQ,CAAA;AAAA,GACG,CAAC,CAAA;AAEnB,CACF,EAAC;AACDN,OAAO,CAACc,WAAW,GAAG,SAAS;;;;"}

package/dist/esm/section/SectionStyles.mjs

@@ -0,0 +1,49 @@
+import styled from '../utils/styled-components-wrapper.mjs';
+
+const SectionStyle = styled.section`
+  margin: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.spaceMap.xxl;
+}}px 0;
+`;
+const SectionHeaderStyle = styled.div`
+  display: flex;
+  align-items: flex-end;
+  margin-bottom: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.fontSizesMap.xxs;
+}}px;
+`;
+const SectionTitleStyle = styled.h2`
+  margin-right: auto;
+  font-weight: 800;
+  font-size: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.fontSizesMap.md;
+}}px;
+  line-height: 1.3em;
+`;
+const SectionHeaderDecoratorStyle = styled.div`
+  margin-left: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.spaceMap.lg;
+}}px;
+  font-size: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.fontSizesMap.xxs;
+}}px;
+  line-height: 1.5em;
+`;
+
+export { SectionHeaderDecoratorStyle, SectionHeaderStyle, SectionStyle, SectionTitleStyle };
+//# sourceMappingURL=SectionStyles.mjs.map

package/dist/esm/section/SectionStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SectionStyles.mjs","sources":["../../../src/section/SectionStyles.tsx"],"sourcesContent":["import styled from '../utils/styled-components-wrapper.js'\n\nexport const SectionStyle = styled.section`\n  margin: ${({ theme }) => theme.spaceMap.xxl}px 0;\n`\n\nexport const SectionHeaderStyle = styled.div`\n  display: flex;\n  align-items: flex-end;\n  margin-bottom: ${({ theme }) => theme.fontSizesMap.xxs}px;\n`\n\nexport const SectionTitleStyle = styled.h2`\n  margin-right: auto;\n  font-weight: 800;\n  font-size: ${({ theme }) => theme.fontSizesMap.md}px;\n  line-height: 1.3em;\n`\n\nexport const SectionHeaderDecoratorStyle = styled.div`\n  margin-left: ${({ theme }) => theme.spaceMap.lg}px;\n  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n  line-height: 1.5em;\n`\n"],"names":["SectionStyle","styled","section","_ref","theme","spaceMap","xxl","SectionHeaderStyle","div","_ref2","fontSizesMap","xxs","SectionTitleStyle","h2","_ref3","md","SectionHeaderDecoratorStyle","_ref4","lg","_ref5"],"mappings":";;AAEaA,MAAAA,YAAY,GAAGC,MAAM,CAACC,OAAO,CAAA;AAC1C,UAAA,EAAYC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,QAAQ,CAACC,GAAG,CAAA;AAAA,CAAA,CAAA;AAC7C,EAAC;AAEYC,MAAAA,kBAAkB,GAAGN,MAAM,CAACO,GAAG,CAAA;AAC5C;AACA;AACA,iBAAA,EAAmBC,KAAA,IAAA;EAAA,IAAC;AAAEL,IAAAA,KAAAA;AAAM,GAAC,GAAAK,KAAA,CAAA;AAAA,EAAA,OAAKL,KAAK,CAACM,YAAY,CAACC,GAAG,CAAA;AAAA,CAAA,CAAA;AACxD,EAAC;AAEYC,MAAAA,iBAAiB,GAAGX,MAAM,CAACY,EAAE,CAAA;AAC1C;AACA;AACA,aAAA,EAAeC,KAAA,IAAA;EAAA,IAAC;AAAEV,IAAAA,KAAAA;AAAM,GAAC,GAAAU,KAAA,CAAA;AAAA,EAAA,OAAKV,KAAK,CAACM,YAAY,CAACK,EAAE,CAAA;AAAA,CAAA,CAAA;AACnD;AACA,EAAC;AAEYC,MAAAA,2BAA2B,GAAGf,MAAM,CAACO,GAAG,CAAA;AACrD,eAAA,EAAiBS,KAAA,IAAA;EAAA,IAAC;AAAEb,IAAAA,KAAAA;AAAM,GAAC,GAAAa,KAAA,CAAA;AAAA,EAAA,OAAKb,KAAK,CAACC,QAAQ,CAACa,EAAE,CAAA;AAAA,CAAA,CAAA;AACjD,aAAA,EAAeC,KAAA,IAAA;EAAA,IAAC;AAAEf,IAAAA,KAAAA;AAAM,GAAC,GAAAe,KAAA,CAAA;AAAA,EAAA,OAAKf,KAAK,CAACM,YAAY,CAACC,GAAG,CAAA;AAAA,CAAA,CAAA;AACpD;AACA;;;;"}

package/dist/esm/select/Option.mjs

@@ -0,0 +1,26 @@
+import { forwardRef, useCallback } from 'react';
+import '../popup-menu/PopupMenu.mjs';
+import { PopupMenuItem } from '../popup-menu/PopupMenuItem.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Option = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    value,
+    onClick,
+    onChange,
+    ...rest
+  } = _ref;
+  const handleClick = useCallback(event => {
+    onChange?.(value);
+    onClick?.(event);
+  }, [value, onChange, onClick]);
+  return /*#__PURE__*/jsx(PopupMenuItem, {
+    onClick: handleClick,
+    ref: ref,
+    ...rest
+  });
+});
+Option.displayName = 'Option';
+
+export { Option };
+//# sourceMappingURL=Option.mjs.map

package/dist/esm/select/Option.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Option.mjs","sources":["../../../src/select/Option.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, MouseEvent, useCallback } from 'react'\nimport { PopupMenuItem } from '../popup-menu/index.js'\nimport { OptionProps } from './types.js'\n\nexport const Option = forwardRef(\n  (\n    { value, onClick, onChange, ...rest }: OptionProps,\n    ref?: ForwardedRef<HTMLButtonElement>,\n  ) => {\n    const handleClick = useCallback(\n      (event: MouseEvent<HTMLButtonElement>) => {\n        onChange?.(value)\n        onClick?.(event)\n      },\n      [value, onChange, onClick],\n    )\n\n    return <PopupMenuItem onClick={handleClick} ref={ref} {...rest} />\n  },\n)\nOption.displayName = 'Option'\n"],"names":["Option","forwardRef","_ref","ref","value","onClick","onChange","rest","handleClick","useCallback","event","_jsx","PopupMenuItem","displayName"],"mappings":";;;;;AAIO,MAAMA,MAAM,gBAAGC,UAAU,CAC9B,CAAAC,IAAA,EAEEC,GAAqC,KAClC;EAAA,IAFH;IAAEC,KAAK;IAAEC,OAAO;IAAEC,QAAQ;IAAE,GAAGC,IAAAA;AAAkB,GAAC,GAAAL,IAAA,CAAA;AAGlD,EAAA,MAAMM,WAAW,GAAGC,WAAW,CAC5BC,KAAoC,IAAK;IACxCJ,QAAQ,GAAGF,KAAK,CAAC,CAAA;IACjBC,OAAO,GAAGK,KAAK,CAAC,CAAA;GACjB,EACD,CAACN,KAAK,EAAEE,QAAQ,EAAED,OAAO,CAC3B,CAAC,CAAA;EAED,oBAAOM,GAAA,CAACC,aAAa,EAAA;AAACP,IAAAA,OAAO,EAAEG,WAAY;AAACL,IAAAA,GAAG,EAAEA,GAAI;IAAA,GAAKI,IAAAA;AAAI,GAAG,CAAC,CAAA;AACpE,CACF,EAAC;AACDP,MAAM,CAACa,WAAW,GAAG,QAAQ;;;;"}

package/dist/esm/select/Select.mjs

@@ -0,0 +1,86 @@
+import { forwardRef, useRef } from 'react';
+import { SelectWrapperStyle } from './SelectStyles.mjs';
+import { SelectArrow } from './SelectArrow.mjs';
+import '../utils/styled-components-wrapper.mjs';
+import { useMergeRefs } from '../hooks/useMergeRefs.mjs';
+import '../theme/cookie-theme-provider.mjs';
+import '../theme/theme-provider.mjs';
+import { jsxs, Fragment, 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 { PopupMenu } from '../popup-menu/PopupMenu.mjs';
+import '../popup-menu/PopupMenuItem.mjs';
+import { useSelect } from './useSelect.mjs';
+import { useSelectWidth } from './useSelectWidth.mjs';
+
+const Select = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    wrapperRef: externalWrapperRef,
+    anchorRef: externalAnchorRef,
+    arrow = 'default',
+    variant,
+    value,
+    defaultValue,
+    disabled,
+    children,
+    onClick,
+    onKeyDown,
+    onChange,
+    ...rest
+  } = _ref;
+  const localAnchorRef = useRef(null);
+  const wrapperRef = useMergeRefs([localAnchorRef, externalWrapperRef]);
+  const anchorRef = externalAnchorRef || localAnchorRef;
+  const {
+    opened,
+    options,
+    title,
+    handleClick,
+    handleClose,
+    handleKeyDown
+  } = useSelect({
+    value,
+    defaultValue,
+    disabled,
+    onClick,
+    onChange,
+    onKeyDown,
+    children
+  });
+  const width = useSelectWidth(opened, anchorRef);
+  return /*#__PURE__*/jsxs(Fragment, {
+    children: [/*#__PURE__*/jsx(SelectWrapperStyle, {
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      active: opened,
+      value: title,
+      rightDecorator: /*#__PURE__*/jsx(SelectArrow, {
+        arrow: arrow,
+        disabled: disabled,
+        opened: opened
+      }),
+      wrapperRef: wrapperRef,
+      variant: variant,
+      ...rest,
+      ref: ref,
+      readOnly: true
+    }), /*#__PURE__*/jsx(PopupMenu, {
+      open: opened,
+      variant: variant,
+      anchorRef: anchorRef,
+      style: {
+        minWidth: width
+      },
+      onClose: handleClose,
+      children: options
+    })]
+  });
+});
+Select.displayName = 'Select';
+
+export { Select };
+//# sourceMappingURL=Select.mjs.map

package/dist/esm/select/Select.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.mjs","sources":["../../../src/select/Select.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useRef } from 'react'\nimport { SelectWrapperStyle } from './SelectStyles.js'\nimport { SelectArrow } from './SelectArrow.js'\nimport { useMergeRefs } from '../hooks/index.js'\nimport { PopupMenu } from '../popup-menu/index.js'\nimport { SelectProps } from './types.js'\nimport { useSelect } from './useSelect.js'\nimport { useSelectWidth } from './useSelectWidth.js'\n\nexport const Select = forwardRef(\n  (\n    {\n      wrapperRef: externalWrapperRef,\n      anchorRef: externalAnchorRef,\n      arrow = 'default',\n      variant,\n      value,\n      defaultValue,\n      disabled,\n      children,\n      onClick,\n      onKeyDown,\n      onChange,\n      ...rest\n    }: SelectProps,\n    ref?: ForwardedRef<HTMLInputElement>,\n  ) => {\n    const localAnchorRef = useRef<HTMLLabelElement>(null)\n    const wrapperRef = useMergeRefs([localAnchorRef, externalWrapperRef])\n    const anchorRef = externalAnchorRef || localAnchorRef\n\n    const { opened, options, title, handleClick, handleClose, handleKeyDown } =\n      useSelect({\n        value,\n        defaultValue,\n        disabled,\n        onClick,\n        onChange,\n        onKeyDown,\n        children,\n      })\n    const width = useSelectWidth(opened, anchorRef)\n\n    return (\n      <>\n        <SelectWrapperStyle\n          onClick={handleClick}\n          onKeyDown={handleKeyDown}\n          active={opened}\n          value={title}\n          rightDecorator={\n            <SelectArrow arrow={arrow} disabled={disabled} opened={opened} />\n          }\n          wrapperRef={wrapperRef}\n          variant={variant}\n          {...rest}\n          ref={ref}\n          readOnly\n        />\n        <PopupMenu\n          open={opened}\n          variant={variant}\n          anchorRef={anchorRef}\n          style={{ minWidth: width }}\n          onClose={handleClose}\n        >\n          {options}\n        </PopupMenu>\n      </>\n    )\n  },\n)\nSelect.displayName = 'Select'\n"],"names":["Select","forwardRef","_ref","ref","wrapperRef","externalWrapperRef","anchorRef","externalAnchorRef","arrow","variant","value","defaultValue","disabled","children","onClick","onKeyDown","onChange","rest","localAnchorRef","useRef","useMergeRefs","opened","options","title","handleClick","handleClose","handleKeyDown","useSelect","width","useSelectWidth","_jsxs","_Fragment","_jsx","SelectWrapperStyle","active","rightDecorator","SelectArrow","readOnly","PopupMenu","open","style","minWidth","onClose","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;AASO,MAAMA,MAAM,gBAAGC,UAAU,CAC9B,CAAAC,IAAA,EAeEC,GAAoC,KACjC;EAAA,IAfH;AACEC,IAAAA,UAAU,EAAEC,kBAAkB;AAC9BC,IAAAA,SAAS,EAAEC,iBAAiB;AAC5BC,IAAAA,KAAK,GAAG,SAAS;IACjBC,OAAO;IACPC,KAAK;IACLC,YAAY;IACZC,QAAQ;IACRC,QAAQ;IACRC,OAAO;IACPC,SAAS;IACTC,QAAQ;IACR,GAAGC,IAAAA;AACQ,GAAC,GAAAf,IAAA,CAAA;AAGd,EAAA,MAAMgB,cAAc,GAAGC,MAAM,CAAmB,IAAI,CAAC,CAAA;EACrD,MAAMf,UAAU,GAAGgB,YAAY,CAAC,CAACF,cAAc,EAAEb,kBAAkB,CAAC,CAAC,CAAA;AACrE,EAAA,MAAMC,SAAS,GAAGC,iBAAiB,IAAIW,cAAc,CAAA;EAErD,MAAM;IAAEG,MAAM;IAAEC,OAAO;IAAEC,KAAK;IAAEC,WAAW;IAAEC,WAAW;AAAEC,IAAAA,aAAAA;GAAe,GACvEC,SAAS,CAAC;IACRjB,KAAK;IACLC,YAAY;IACZC,QAAQ;IACRE,OAAO;IACPE,QAAQ;IACRD,SAAS;AACTF,IAAAA,QAAAA;AACF,GAAC,CAAC,CAAA;AACJ,EAAA,MAAMe,KAAK,GAAGC,cAAc,CAACR,MAAM,EAAEf,SAAS,CAAC,CAAA;EAE/C,oBACEwB,IAAA,CAAAC,QAAA,EAAA;IAAAlB,QAAA,EAAA,cACEmB,GAAA,CAACC,kBAAkB,EAAA;AACjBnB,MAAAA,OAAO,EAAEU,WAAY;AACrBT,MAAAA,SAAS,EAAEW,aAAc;AACzBQ,MAAAA,MAAM,EAAEb,MAAO;AACfX,MAAAA,KAAK,EAAEa,KAAM;MACbY,cAAc,eACZH,GAAA,CAACI,WAAW,EAAA;AAAC5B,QAAAA,KAAK,EAAEA,KAAM;AAACI,QAAAA,QAAQ,EAAEA,QAAS;AAACS,QAAAA,MAAM,EAAEA,MAAAA;AAAO,OAAE,CACjE;AACDjB,MAAAA,UAAU,EAAEA,UAAW;AACvBK,MAAAA,OAAO,EAAEA,OAAQ;AAAA,MAAA,GACbQ,IAAI;AACRd,MAAAA,GAAG,EAAEA,GAAI;MACTkC,QAAQ,EAAA,IAAA;AAAA,KACT,CAAC,eACFL,GAAA,CAACM,SAAS,EAAA;AACRC,MAAAA,IAAI,EAAElB,MAAO;AACbZ,MAAAA,OAAO,EAAEA,OAAQ;AACjBH,MAAAA,SAAS,EAAEA,SAAU;AACrBkC,MAAAA,KAAK,EAAE;AAAEC,QAAAA,QAAQ,EAAEb,KAAAA;OAAQ;AAC3Bc,MAAAA,OAAO,EAAEjB,WAAY;AAAAZ,MAAAA,QAAA,EAEpBS,OAAAA;AAAO,KACC,CAAC,CAAA;AAAA,GACZ,CAAC,CAAA;AAEP,CACF,EAAC;AACDtB,MAAM,CAAC2C,WAAW,GAAG,QAAQ;;;;"}

package/dist/esm/select/SelectArrow.mjs

@@ -0,0 +1,24 @@
+import { SelectArrowBigStyle, SelectArrowSmallStyle } from './SelectArrowStyles.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const SelectArrow = _ref => {
+  let {
+    arrow,
+    disabled = false,
+    opened
+  } = _ref;
+  const commonProps = {
+    $opened: opened,
+    $disabled: disabled
+  };
+  if (arrow === 'default') return /*#__PURE__*/jsx(SelectArrowBigStyle, {
+    ...commonProps
+  });
+  if (arrow === 'small') return /*#__PURE__*/jsx(SelectArrowSmallStyle, {
+    ...commonProps
+  });
+  return null;
+};
+
+export { SelectArrow };
+//# sourceMappingURL=SelectArrow.mjs.map

package/dist/esm/select/SelectArrow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectArrow.mjs","sources":["../../../src/select/SelectArrow.tsx"],"sourcesContent":["import { FC } from 'react'\nimport {\n  SelectArrowBigStyle,\n  SelectArrowSmallStyle,\n} from './SelectArrowStyles.js'\nimport { SelectArrows } from './types.js'\n\ntype SelectArrowProps = {\n  arrow: SelectArrows\n  disabled?: boolean\n  opened: boolean\n  children?: never\n}\n\nexport const SelectArrow: FC<SelectArrowProps> = ({\n  arrow,\n  disabled = false,\n  opened,\n}) => {\n  const commonProps = {\n    $opened: opened,\n    $disabled: disabled,\n  }\n\n  if (arrow === 'default') return <SelectArrowBigStyle {...commonProps} />\n  if (arrow === 'small') return <SelectArrowSmallStyle {...commonProps} />\n\n  return null\n}\n"],"names":["SelectArrow","_ref","arrow","disabled","opened","commonProps","$opened","$disabled","_jsx","SelectArrowBigStyle","SelectArrowSmallStyle"],"mappings":";;;AAcaA,MAAAA,WAAiC,GAAGC,IAAA,IAI3C;EAAA,IAJ4C;IAChDC,KAAK;AACLC,IAAAA,QAAQ,GAAG,KAAK;AAChBC,IAAAA,MAAAA;AACF,GAAC,GAAAH,IAAA,CAAA;AACC,EAAA,MAAMI,WAAW,GAAG;AAClBC,IAAAA,OAAO,EAAEF,MAAM;AACfG,IAAAA,SAAS,EAAEJ,QAAAA;GACZ,CAAA;AAED,EAAA,IAAID,KAAK,KAAK,SAAS,EAAE,oBAAOM,GAAA,CAACC,mBAAmB,EAAA;IAAA,GAAKJ,WAAAA;AAAW,GAAG,CAAC,CAAA;AACxE,EAAA,IAAIH,KAAK,KAAK,OAAO,EAAE,oBAAOM,GAAA,CAACE,qBAAqB,EAAA;IAAA,GAAKL,WAAAA;AAAW,GAAG,CAAC,CAAA;AAExE,EAAA,OAAO,IAAI,CAAA;AACb;;;;"}

package/dist/esm/select/SelectArrowStyles.mjs

@@ -0,0 +1,40 @@
+import styled from '../utils/styled-components-wrapper.mjs';
+import { ArrowBottom } from '../icons/index.mjs';
+import { css } from 'styled-components';
+
+const commonCSS = css`
+  transform: rotate(${_ref => {
+  let {
+    $opened
+  } = _ref;
+  return $opened ? 180 : 0;
+}}deg);
+  transition: transform ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.duration.norm;
+}} ease;
+  opacity: ${_ref3 => {
+  let {
+    $disabled
+  } = _ref3;
+  return $disabled ? 0.5 : 1;
+}};
+`;
+const SelectArrowBigStyle = styled(ArrowBottom)`
+  ${commonCSS};
+  fill: var(--lido-color-textSecondary);
+`;
+const SelectArrowSmallStyle = styled.div`
+  ${commonCSS};
+  color: var(--lido-color-text);
+
+  border: 3px solid currentColor;
+  border-bottom-width: 0px;
+  border-left-color: transparent;
+  border-right-color: transparent;
+`;
+
+export { SelectArrowBigStyle, SelectArrowSmallStyle };
+//# sourceMappingURL=SelectArrowStyles.mjs.map

package/dist/esm/select/SelectArrowStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectArrowStyles.mjs","sources":["../../../src/select/SelectArrowStyles.ts"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { ArrowBottom } from '../icons/index.js'\n\ntype InjectedProps = {\n  $opened: boolean\n  $disabled: boolean\n}\n\nconst commonCSS = css<InjectedProps>`\n  transform: rotate(${({ $opened }) => ($opened ? 180 : 0)}deg);\n  transition: transform ${({ theme }) => theme.duration.norm} ease;\n  opacity: ${({ $disabled }) => ($disabled ? 0.5 : 1)};\n`\n\nexport const SelectArrowBigStyle = styled(ArrowBottom)<InjectedProps>`\n  ${commonCSS};\n  fill: var(--lido-color-textSecondary);\n`\n\nexport const SelectArrowSmallStyle = styled.div<InjectedProps>`\n  ${commonCSS};\n  color: var(--lido-color-text);\n\n  border: 3px solid currentColor;\n  border-bottom-width: 0px;\n  border-left-color: transparent;\n  border-right-color: transparent;\n`\n"],"names":["commonCSS","css","_ref","$opened","_ref2","theme","duration","norm","_ref3","$disabled","SelectArrowBigStyle","styled","ArrowBottom","SelectArrowSmallStyle","div"],"mappings":";;;;AAQA,MAAMA,SAAS,GAAGC,GAAkB,CAAA;AACpC,oBAAA,EAAsBC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAMC,OAAO,GAAG,GAAG,GAAG,CAAC,CAAA;AAAA,CAAC,CAAA;AAC1D,wBAAA,EAA0BC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,QAAQ,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AAC5D,WAAA,EAAaC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,SAAAA;AAAU,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAMC,SAAS,GAAG,GAAG,GAAG,CAAC,CAAA;AAAA,CAAC,CAAA;AACrD,CAAC,CAAA;MAEYC,mBAAmB,GAAGC,MAAM,CAACC,WAAW,CAAgB,CAAA;AACrE,EAAA,EAAIZ,SAAS,CAAA;AACb;AACA,EAAC;AAEYa,MAAAA,qBAAqB,GAAGF,MAAM,CAACG,GAAkB,CAAA;AAC9D,EAAA,EAAId,SAAS,CAAA;AACb;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/dist/esm/select/SelectIcon.mjs

@@ -0,0 +1,23 @@
+import { forwardRef } from 'react';
+import { SelectIconStyle, SelectIconDecoratorStyle } from './SelectIconStyles.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const SelectIcon = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    icon,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsx(SelectIconStyle, {
+    ...rest,
+    fullwidth: false,
+    arrow: "small",
+    leftDecorator: /*#__PURE__*/jsx(SelectIconDecoratorStyle, {
+      children: icon
+    }),
+    ref: ref
+  });
+});
+SelectIcon.displayName = 'SelectIcon';
+
+export { SelectIcon };
+//# sourceMappingURL=SelectIcon.mjs.map

package/dist/esm/select/SelectIcon.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectIcon.mjs","sources":["../../../src/select/SelectIcon.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { SelectIconProps } from './types.js'\nimport {\n  SelectIconDecoratorStyle,\n  SelectIconStyle,\n} from './SelectIconStyles.js'\n\nexport const SelectIcon = forwardRef(\n  (\n    { icon, ...rest }: SelectIconProps,\n    ref?: ForwardedRef<HTMLInputElement>,\n  ) => {\n    return (\n      <SelectIconStyle\n        {...rest}\n        fullwidth={false}\n        arrow='small'\n        leftDecorator={\n          <SelectIconDecoratorStyle>{icon}</SelectIconDecoratorStyle>\n        }\n        ref={ref}\n      />\n    )\n  },\n)\nSelectIcon.displayName = 'SelectIcon'\n"],"names":["SelectIcon","forwardRef","_ref","ref","icon","rest","_jsx","SelectIconStyle","fullwidth","arrow","leftDecorator","SelectIconDecoratorStyle","children","displayName"],"mappings":";;;;AAOO,MAAMA,UAAU,gBAAGC,UAAU,CAClC,CAAAC,IAAA,EAEEC,GAAoC,KACjC;EAAA,IAFH;IAAEC,IAAI;IAAE,GAAGC,IAAAA;AAAsB,GAAC,GAAAH,IAAA,CAAA;EAGlC,oBACEI,GAAA,CAACC,eAAe,EAAA;AAAA,IAAA,GACVF,IAAI;AACRG,IAAAA,SAAS,EAAE,KAAM;AACjBC,IAAAA,KAAK,EAAC,OAAO;IACbC,aAAa,eACXJ,GAAA,CAACK,wBAAwB,EAAA;AAAAC,MAAAA,QAAA,EAAER,IAAAA;AAAI,KAA2B,CAC3D;AACDD,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GACV,CAAC,CAAA;AAEN,CACF,EAAC;AACDH,UAAU,CAACa,WAAW,GAAG,YAAY;;;;"}

package/dist/esm/select/SelectIconStyles.mjs

@@ -0,0 +1,18 @@
+import styled from '../utils/styled-components-wrapper.mjs';
+import { Select } from './Select.mjs';
+
+const SelectIconStyle = styled(Select)`
+  input {
+    width: 0;
+  }
+`;
+const SelectIconDecoratorStyle = styled.span`
+  margin-right: -24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  place-self: center;
+`;
+
+export { SelectIconDecoratorStyle, SelectIconStyle };
+//# sourceMappingURL=SelectIconStyles.mjs.map

package/dist/esm/select/SelectIconStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectIconStyles.mjs","sources":["../../../src/select/SelectIconStyles.tsx"],"sourcesContent":["import styled from '../utils/styled-components-wrapper.js'\nimport { Select } from './Select.js'\n\nexport const SelectIconStyle = styled(Select)`\n  input {\n    width: 0;\n  }\n`\n\nexport const SelectIconDecoratorStyle = styled.span`\n  margin-right: -24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  place-self: center;\n`\n"],"names":["SelectIconStyle","styled","Select","SelectIconDecoratorStyle","span"],"mappings":";;;MAGaA,eAAe,GAAGC,MAAM,CAACC,MAAM,CAAC,CAAA;AAC7C;AACA;AACA;AACA,EAAC;AAEYC,MAAAA,wBAAwB,GAAGF,MAAM,CAACG,IAAI,CAAA;AACnD;AACA;AACA;AACA;AACA;AACA;;;;"}

package/dist/esm/select/SelectStyles.mjs

@@ -0,0 +1,53 @@
+import styled from '../utils/styled-components-wrapper.mjs';
+import { Input } from '../input/Input.mjs';
+import '../input/InputGroup.mjs';
+import '../input/SliderInputStyles.mjs';
+import 'react/jsx-runtime';
+import '../input/Textarea.mjs';
+import { css } from 'styled-components';
+
+const smallCSS = css`
+  input {
+    font-size: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.fontSizesMap.xxs;
+}}px;
+    line-height: 1.7em;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-weight: 800;
+  }
+`;
+const SelectWrapperStyle = styled(Input)`
+  &,
+  input {
+    user-select: none;
+    cursor: ${_ref2 => {
+  let {
+    disabled
+  } = _ref2;
+  return disabled ? 'default' : 'pointer';
+}};
+
+    &::selection {
+      background: transparent;
+    }
+  }
+
+  input {
+    appearance: none;
+    overflow: hidden;
+  }
+
+  ${_ref3 => {
+  let {
+    variant
+  } = _ref3;
+  return variant === 'small' ? smallCSS : '';
+}}
+`;
+
+export { SelectWrapperStyle };
+//# sourceMappingURL=SelectStyles.mjs.map

package/dist/esm/select/SelectStyles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectStyles.mjs","sources":["../../../src/select/SelectStyles.ts"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { Input } from '../input/index.js'\nimport { SelectProps } from './types.js'\n\nconst smallCSS = css`\n  input {\n    font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n    line-height: 1.7em;\n    letter-spacing: 0.04em;\n    text-transform: uppercase;\n    font-weight: 800;\n  }\n`\n\nexport const SelectWrapperStyle = styled(Input)<SelectProps>`\n  &,\n  input {\n    user-select: none;\n    cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};\n\n    &::selection {\n      background: transparent;\n    }\n  }\n\n  input {\n    appearance: none;\n    overflow: hidden;\n  }\n\n  ${({ variant }) => (variant === 'small' ? smallCSS : '')}\n`\n"],"names":["smallCSS","css","_ref","theme","fontSizesMap","xxs","SelectWrapperStyle","styled","Input","_ref2","disabled","_ref3","variant"],"mappings":";;;;;;;;AAIA,MAAMA,QAAQ,GAAGC,GAAG,CAAA;AACpB;AACA,eAAA,EAAiBC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,YAAY,CAACC,GAAG,CAAA;AAAA,CAAA,CAAA;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC,CAAA;MAEYC,kBAAkB,GAAGC,MAAM,CAACC,KAAK,CAAc,CAAA;AAC5D;AACA;AACA;AACA,YAAA,EAAcC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAMC,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;AAAA,CAAC,CAAA;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,OAAAA;AAAQ,GAAC,GAAAD,KAAA,CAAA;AAAA,EAAA,OAAMC,OAAO,KAAK,OAAO,GAAGZ,QAAQ,GAAG,EAAE,CAAA;AAAA,CAAC,CAAA;AAC1D;;;;"}