cakeinpanic-ui 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Switcher.mjs","sources":["../../../src/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/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":["../../../src/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":["../../../src/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/esm/table/Table.mjs

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import { TableStyle } from './styles.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Table = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/jsx(TableStyle, {
+    ref: ref,
+    ...props
+  });
+});
+Table.displayName = 'Table';
+
+export { Table };
+//# sourceMappingURL=Table.mjs.map

package/dist/esm/table/Table.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.mjs","sources":["../../../src/table/Table.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { TableProps } from './types.js'\nimport { TableStyle } from './styles.js'\n\nexport const Table = forwardRef(\n  (props: TableProps, ref?: ForwardedRef<HTMLTableElement>) => {\n    return <TableStyle ref={ref} {...props} />\n  },\n)\nTable.displayName = 'Table'\n"],"names":["Table","forwardRef","props","ref","_jsx","TableStyle","displayName"],"mappings":";;;;AAIO,MAAMA,KAAK,gBAAGC,UAAU,CAC7B,CAACC,KAAiB,EAAEC,GAAoC,KAAK;EAC3D,oBAAOC,GAAA,CAACC,UAAU,EAAA;AAACF,IAAAA,GAAG,EAAEA,GAAI;IAAA,GAAKD,KAAAA;AAAK,GAAG,CAAC,CAAA;AAC5C,CACF,EAAC;AACDF,KAAK,CAACM,WAAW,GAAG,OAAO;;;;"}

package/dist/esm/table/Tbody.mjs

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import { TbodyStyle } from './styles.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Tbody = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/jsx(TbodyStyle, {
+    ref: ref,
+    ...props
+  });
+});
+Tbody.displayName = 'Tbody';
+
+export { Tbody };
+//# sourceMappingURL=Tbody.mjs.map

package/dist/esm/table/Tbody.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tbody.mjs","sources":["../../../src/table/Tbody.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { TbodyProps } from './types.js'\nimport { TbodyStyle } from './styles.js'\n\nexport const Tbody = forwardRef(\n  (props: TbodyProps, ref?: ForwardedRef<HTMLTableSectionElement>) => {\n    return <TbodyStyle ref={ref} {...props} />\n  },\n)\nTbody.displayName = 'Tbody'\n"],"names":["Tbody","forwardRef","props","ref","_jsx","TbodyStyle","displayName"],"mappings":";;;;AAIO,MAAMA,KAAK,gBAAGC,UAAU,CAC7B,CAACC,KAAiB,EAAEC,GAA2C,KAAK;EAClE,oBAAOC,GAAA,CAACC,UAAU,EAAA;AAACF,IAAAA,GAAG,EAAEA,GAAI;IAAA,GAAKD,KAAAA;AAAK,GAAG,CAAC,CAAA;AAC5C,CACF,EAAC;AACDF,KAAK,CAACM,WAAW,GAAG,OAAO;;;;"}

package/dist/esm/table/Td.mjs

@@ -0,0 +1,30 @@
+import { forwardRef } from 'react';
+import { TdStyle, ThTdContentStyle } from './styles.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Td = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    align = 'left',
+    textColor = 'default',
+    variant,
+    children,
+    numeric = false,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsx(TdStyle, {
+    $align: align,
+    $textColor: textColor,
+    $variant: variant,
+    $interactive: !!rest.onClick,
+    $numeric: numeric,
+    ref: ref,
+    ...rest,
+    children: /*#__PURE__*/jsx(ThTdContentStyle, {
+      children: children
+    })
+  });
+});
+Td.displayName = 'Td';
+
+export { Td };
+//# sourceMappingURL=Td.mjs.map

package/dist/esm/table/Td.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Td.mjs","sources":["../../../src/table/Td.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { TdProps } from './types.js'\nimport { TdStyle, ThTdContentStyle } from './styles.js'\n\nexport const Td = forwardRef(\n  (\n    {\n      align = 'left',\n      textColor = 'default',\n      variant,\n      children,\n      numeric = false,\n      ...rest\n    }: TdProps,\n    ref?: ForwardedRef<HTMLTableDataCellElement>,\n  ) => {\n    return (\n      <TdStyle\n        $align={align}\n        $textColor={textColor}\n        $variant={variant}\n        $interactive={!!rest.onClick}\n        $numeric={numeric}\n        ref={ref}\n        {...rest}\n      >\n        <ThTdContentStyle>{children}</ThTdContentStyle>\n      </TdStyle>\n    )\n  },\n)\nTd.displayName = 'Td'\n"],"names":["Td","forwardRef","_ref","ref","align","textColor","variant","children","numeric","rest","_jsx","TdStyle","$align","$textColor","$variant","$interactive","onClick","$numeric","ThTdContentStyle","displayName"],"mappings":";;;;AAIO,MAAMA,EAAE,gBAAGC,UAAU,CAC1B,CAAAC,IAAA,EASEC,GAA4C,KACzC;EAAA,IATH;AACEC,IAAAA,KAAK,GAAG,MAAM;AACdC,IAAAA,SAAS,GAAG,SAAS;IACrBC,OAAO;IACPC,QAAQ;AACRC,IAAAA,OAAO,GAAG,KAAK;IACf,GAAGC,IAAAA;AACI,GAAC,GAAAP,IAAA,CAAA;EAGV,oBACEQ,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,MAAM,EAAER,KAAM;AACdS,IAAAA,UAAU,EAAER,SAAU;AACtBS,IAAAA,QAAQ,EAAER,OAAQ;AAClBS,IAAAA,YAAY,EAAE,CAAC,CAACN,IAAI,CAACO,OAAQ;AAC7BC,IAAAA,QAAQ,EAAET,OAAQ;AAClBL,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLM,IAAI;IAAAF,QAAA,eAERG,GAAA,CAACQ,gBAAgB,EAAA;AAAAX,MAAAA,QAAA,EAAEA,QAAAA;KAA2B,CAAA;AAAC,GACxC,CAAC,CAAA;AAEd,CACF,EAAC;AACDP,EAAE,CAACmB,WAAW,GAAG,IAAI;;;;"}

package/dist/esm/table/Tfoot.mjs

@@ -0,0 +1,14 @@
+import { forwardRef } from 'react';
+import { TfootStyle } from './styles.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Tfoot = /*#__PURE__*/forwardRef((props, ref) => {
+  return /*#__PURE__*/jsx(TfootStyle, {
+    ref: ref,
+    ...props
+  });
+});
+Tfoot.displayName = 'Tfoot';
+
+export { Tfoot };
+//# sourceMappingURL=Tfoot.mjs.map

package/dist/esm/table/Tfoot.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tfoot.mjs","sources":["../../../src/table/Tfoot.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { TfootProps } from './types.js'\nimport { TfootStyle } from './styles.js'\n\nexport const Tfoot = forwardRef(\n  (props: TfootProps, ref?: ForwardedRef<HTMLTableSectionElement>) => {\n    return <TfootStyle ref={ref} {...props} />\n  },\n)\nTfoot.displayName = 'Tfoot'\n"],"names":["Tfoot","forwardRef","props","ref","_jsx","TfootStyle","displayName"],"mappings":";;;;AAIO,MAAMA,KAAK,gBAAGC,UAAU,CAC7B,CAACC,KAAiB,EAAEC,GAA2C,KAAK;EAClE,oBAAOC,GAAA,CAACC,UAAU,EAAA;AAACF,IAAAA,GAAG,EAAEA,GAAI;IAAA,GAAKD,KAAAA;AAAK,GAAG,CAAC,CAAA;AAC5C,CACF,EAAC;AACDF,KAAK,CAACM,WAAW,GAAG,OAAO;;;;"}

package/dist/esm/table/Th.mjs

@@ -0,0 +1,27 @@
+import { forwardRef } from 'react';
+import { ThStyle, ThTdContentStyle, ArrowBottomStyle, ArrowTopStyle } from './styles.mjs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+const Th = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    align = 'left',
+    children,
+    sortDir,
+    variant,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsx(ThStyle, {
+    $interactive: !!rest.onClick,
+    $align: align,
+    $variant: variant,
+    ref: ref,
+    ...rest,
+    children: /*#__PURE__*/jsxs(ThTdContentStyle, {
+      children: [children, sortDir === 'ASC' && /*#__PURE__*/jsx(ArrowBottomStyle, {}), sortDir === 'DESC' && /*#__PURE__*/jsx(ArrowTopStyle, {})]
+    })
+  });
+});
+Th.displayName = 'Th';
+
+export { Th };
+//# sourceMappingURL=Th.mjs.map

package/dist/esm/table/Th.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Th.mjs","sources":["../../../src/table/Th.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { ThProps } from './types.js'\nimport {\n  ThStyle,\n  ThTdContentStyle,\n  ArrowBottomStyle,\n  ArrowTopStyle,\n} from './styles.js'\n\nexport const Th = forwardRef(\n  (\n    { align = 'left', children, sortDir, variant, ...rest }: ThProps,\n    ref?: ForwardedRef<HTMLTableHeaderCellElement>,\n  ) => {\n    return (\n      <ThStyle\n        $interactive={!!rest.onClick}\n        $align={align}\n        $variant={variant}\n        ref={ref}\n        {...rest}\n      >\n        <ThTdContentStyle>\n          {children}\n          {sortDir === 'ASC' && <ArrowBottomStyle />}\n          {sortDir === 'DESC' && <ArrowTopStyle />}\n        </ThTdContentStyle>\n      </ThStyle>\n    )\n  },\n)\nTh.displayName = 'Th'\n"],"names":["Th","forwardRef","_ref","ref","align","children","sortDir","variant","rest","_jsx","ThStyle","$interactive","onClick","$align","$variant","_jsxs","ThTdContentStyle","ArrowBottomStyle","ArrowTopStyle","displayName"],"mappings":";;;;AASO,MAAMA,EAAE,gBAAGC,UAAU,CAC1B,CAAAC,IAAA,EAEEC,GAA8C,KAC3C;EAAA,IAFH;AAAEC,IAAAA,KAAK,GAAG,MAAM;IAAEC,QAAQ;IAAEC,OAAO;IAAEC,OAAO;IAAE,GAAGC,IAAAA;AAAc,GAAC,GAAAN,IAAA,CAAA;EAGhE,oBACEO,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,YAAY,EAAE,CAAC,CAACH,IAAI,CAACI,OAAQ;AAC7BC,IAAAA,MAAM,EAAET,KAAM;AACdU,IAAAA,QAAQ,EAAEP,OAAQ;AAClBJ,IAAAA,GAAG,EAAEA,GAAI;AAAA,IAAA,GACLK,IAAI;IAAAH,QAAA,eAERU,IAAA,CAACC,gBAAgB,EAAA;MAAAX,QAAA,EAAA,CACdA,QAAQ,EACRC,OAAO,KAAK,KAAK,iBAAIG,GAAA,CAACQ,gBAAgB,IAAE,CAAC,EACzCX,OAAO,KAAK,MAAM,iBAAIG,GAAA,CAACS,aAAa,EAAA,EAAE,CAAC,CAAA;KACxB,CAAA;AAAC,GACZ,CAAC,CAAA;AAEd,CACF,EAAC;AACDlB,EAAE,CAACmB,WAAW,GAAG,IAAI;;;;"}

package/dist/esm/table/Thead.mjs

@@ -0,0 +1,19 @@
+import { forwardRef } from 'react';
+import { TheadStyle } from './styles.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Thead = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    sticky = false,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsx(TheadStyle, {
+    ref: ref,
+    $sticky: sticky,
+    ...rest
+  });
+});
+Thead.displayName = 'Thead';
+
+export { Thead };
+//# sourceMappingURL=Thead.mjs.map

package/dist/esm/table/Thead.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thead.mjs","sources":["../../../src/table/Thead.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { TheadProps } from './types.js'\nimport { TheadStyle } from './styles.js'\n\nexport const Thead = forwardRef(\n  (\n    { sticky = false, ...rest }: TheadProps,\n    ref?: ForwardedRef<HTMLTableSectionElement>,\n  ) => {\n    return <TheadStyle ref={ref} $sticky={sticky} {...rest} />\n  },\n)\nThead.displayName = 'Thead'\n"],"names":["Thead","forwardRef","_ref","ref","sticky","rest","_jsx","TheadStyle","$sticky","displayName"],"mappings":";;;;AAIO,MAAMA,KAAK,gBAAGC,UAAU,CAC7B,CAAAC,IAAA,EAEEC,GAA2C,KACxC;EAAA,IAFH;AAAEC,IAAAA,MAAM,GAAG,KAAK;IAAE,GAAGC,IAAAA;AAAiB,GAAC,GAAAH,IAAA,CAAA;EAGvC,oBAAOI,GAAA,CAACC,UAAU,EAAA;AAACJ,IAAAA,GAAG,EAAEA,GAAI;AAACK,IAAAA,OAAO,EAAEJ,MAAO;IAAA,GAAKC,IAAAA;AAAI,GAAG,CAAC,CAAA;AAC5D,CACF,EAAC;AACDL,KAAK,CAACS,WAAW,GAAG,OAAO;;;;"}

package/dist/esm/table/Tr.mjs

@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+import { TrStyle } from './styles.mjs';
+import { jsx } from 'react/jsx-runtime';
+
+const Tr = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    highlight,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsx(TrStyle, {
+    $highlight: highlight,
+    $interactive: !!rest.onClick,
+    ref: ref,
+    ...rest
+  });
+});
+Tr.displayName = 'Tr';
+
+export { Tr };
+//# sourceMappingURL=Tr.mjs.map

package/dist/esm/table/Tr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tr.mjs","sources":["../../../src/table/Tr.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { TrProps } from './types.js'\nimport { TrStyle } from './styles.js'\n\nexport const Tr = forwardRef(\n  (\n    { highlight, ...rest }: TrProps,\n    ref?: ForwardedRef<HTMLTableRowElement>,\n  ) => {\n    return (\n      <TrStyle\n        $highlight={highlight}\n        $interactive={!!rest.onClick}\n        ref={ref}\n        {...rest}\n      />\n    )\n  },\n)\nTr.displayName = 'Tr'\n"],"names":["Tr","forwardRef","_ref","ref","highlight","rest","_jsx","TrStyle","$highlight","$interactive","onClick","displayName"],"mappings":";;;;AAIO,MAAMA,EAAE,gBAAGC,UAAU,CAC1B,CAAAC,IAAA,EAEEC,GAAuC,KACpC;EAAA,IAFH;IAAEC,SAAS;IAAE,GAAGC,IAAAA;AAAc,GAAC,GAAAH,IAAA,CAAA;EAG/B,oBACEI,GAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,UAAU,EAAEJ,SAAU;AACtBK,IAAAA,YAAY,EAAE,CAAC,CAACJ,IAAI,CAACK,OAAQ;AAC7BP,IAAAA,GAAG,EAAEA,GAAI;IAAA,GACLE,IAAAA;AAAI,GACT,CAAC,CAAA;AAEN,CACF,EAAC;AACDL,EAAE,CAACW,WAAW,GAAG,IAAI;;;;"}

package/dist/esm/table/styles.mjs

@@ -0,0 +1,209 @@
+import styled from '../utils/styled-components-wrapper.mjs';
+import { ArrowTop, ArrowBottom } from '../icons/index.mjs';
+import { css } from 'styled-components';
+
+const getMainColorTd = props => ({
+  primary: `var(--lido-color-primary)`,
+  secondary: `var(--lido-color-textSecondary)`,
+  warning: `var(--lido-color-warning)`,
+  error: `var(--lido-color-error)`,
+  success: `var(--lido-color-success)`,
+  default: `var(--lido-color-text)`
+})[props.$textColor];
+const TdThAlign = {
+  left: css`
+    text-align: left;
+  `,
+  center: css`
+    text-align: center;
+  `,
+  right: css`
+    text-align: right;
+  `
+};
+const ThTdContentStyle = styled.div`
+  position: relative;
+  min-height: 16px;
+`;
+const TdThVariants = {
+  string: css`
+    ${ThTdContentStyle} {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  `,
+  icon: css`
+    line-height: 0;
+    width: 24px;
+    text-align: center;
+
+    ${ThTdContentStyle} {
+      width: 24px;
+
+      svg {
+        margin: -4px 0;
+      }
+    }
+  `
+};
+const ThTdInteractive = css`
+  cursor: pointer;
+
+  &:hover {
+    color: var(--lido-color-primary);
+  }
+`;
+const TableStyle = styled.table`
+  border-spacing: 0;
+`;
+const TbodyStyle = styled.tbody`
+  & > tr::before,
+  & > tr::after {
+    content: '';
+    display: table-cell;
+    width: 32px;
+  }
+`;
+const TheadStickyStyle = css`
+  background: var(--lido-color-foreground);
+  top: 0;
+  position: sticky;
+  z-index: 5;
+`;
+const TheadStyle = styled.thead`
+  border-top: 1px solid var(--lido-color-borderLight);
+  border-bottom: 1px solid var(--lido-color-borderLight);
+
+  ${_ref => {
+  let {
+    $sticky
+  } = _ref;
+  return $sticky && TheadStickyStyle;
+}}
+
+  & > tr::before,
+  & > tr::after {
+    content: '';
+    display: table-cell;
+    width: 32px;
+
+    border-top: 1px solid var(--lido-color-borderLight);
+    border-bottom: 1px solid var(--lido-color-borderLight);
+  }
+`;
+const TfootStyle = styled.tfoot``;
+const TrColors = {
+  negative: css`
+    background: rgba(var(--lido-rgb-error), 0.07);
+  `,
+  positive: css`
+    background: rgba(var(--lido-rgb-success), 0.07);
+  `,
+  warning: css`
+    background: rgba(var(--lido-rgb-warning), 0.07);
+  `
+};
+const TrInteractive = css`
+  cursor: pointer;
+`;
+const TrStyle = styled.tr`
+  font-weight: 400;
+  font-size: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.fontSizesMap.xxs;
+}}px;
+  line-height: 1.6em;
+  ${_ref3 => {
+  let {
+    $highlight
+  } = _ref3;
+  return $highlight && TrColors[$highlight];
+}}
+  ${_ref4 => {
+  let {
+    $interactive
+  } = _ref4;
+  return $interactive && TrInteractive;
+}}
+`;
+const TdNumericStyle = css`
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+`;
+const TdStyle = styled.td`
+  border-bottom: 1px solid var(--lido-color-borderLight);
+  padding: 18px;
+
+  color: ${getMainColorTd};
+
+  ${props => TdThAlign[props.$align]}
+  ${_ref5 => {
+  let {
+    $variant
+  } = _ref5;
+  return $variant && TdThVariants[$variant];
+}}
+  ${_ref6 => {
+  let {
+    $interactive
+  } = _ref6;
+  return $interactive && ThTdInteractive;
+}}
+  ${_ref7 => {
+  let {
+    $numeric
+  } = _ref7;
+  return $numeric && TdNumericStyle;
+}}
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+`;
+const ThStyle = styled.th`
+  border-top: 1px solid var(--lido-color-borderLight);
+  border-bottom: 1px solid var(--lido-color-borderLight);
+
+  padding: 7px 18px;
+
+  font-weight: 700;
+  color: var(--lido-color-text);
+
+  ${props => TdThAlign[props.$align]}
+  ${_ref8 => {
+  let {
+    $interactive
+  } = _ref8;
+  return $interactive && ThTdInteractive;
+}}
+  ${_ref9 => {
+  let {
+    $variant
+  } = _ref9;
+  return $variant && TdThVariants[$variant];
+}}
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+`;
+const ArrowTopStyle = styled(ArrowTop)`
+  margin: -7px 0 -7px 2px;
+`;
+const ArrowBottomStyle = styled(ArrowBottom)`
+  margin: -7px 0 -7px 2px;
+`;
+
+export { ArrowBottomStyle, ArrowTopStyle, TableStyle, TbodyStyle, TdStyle, TfootStyle, ThStyle, ThTdContentStyle, TheadStyle, TrStyle };
+//# sourceMappingURL=styles.mjs.map

package/dist/esm/table/styles.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.mjs","sources":["../../../src/table/styles.tsx"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\nimport { ArrowTop, ArrowBottom } from '../icons/index.js'\nimport {\n  TableAligns,\n  TableTextColors,\n  Theme,\n  ThTdVariants,\n  TrHighlights,\n} from './types.js'\n\ntype InjectedPropsTr = {\n  $highlight?: TrHighlights\n  $interactive: boolean\n}\n\ntype InjectedPropsThead = {\n  $sticky: boolean\n}\n\ntype InjectedPropsTh = {\n  $align: TableAligns\n  theme: Theme\n  $interactive: boolean\n  $variant?: ThTdVariants\n}\n\ntype InjectedPropsTd = {\n  $align: TableAligns\n  $textColor: TableTextColors\n  theme: Theme\n  $variant?: ThTdVariants\n  $interactive: boolean\n  $numeric: boolean\n}\n\nconst getMainColorTd = (props: InjectedPropsTd) =>\n  ({\n    primary: `var(--lido-color-primary)`,\n    secondary: `var(--lido-color-textSecondary)`,\n    warning: `var(--lido-color-warning)`,\n    error: `var(--lido-color-error)`,\n    success: `var(--lido-color-success)`,\n    default: `var(--lido-color-text)`,\n  })[props.$textColor]\n\nconst TdThAlign = {\n  left: css`\n    text-align: left;\n  `,\n  center: css`\n    text-align: center;\n  `,\n  right: css`\n    text-align: right;\n  `,\n}\n\nexport const ThTdContentStyle = styled.div`\n  position: relative;\n  min-height: 16px;\n`\n\nconst TdThVariants = {\n  string: css`\n    ${ThTdContentStyle} {\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n  `,\n  icon: css`\n    line-height: 0;\n    width: 24px;\n    text-align: center;\n\n    ${ThTdContentStyle} {\n      width: 24px;\n\n      svg {\n        margin: -4px 0;\n      }\n    }\n  `,\n}\n\nconst ThTdInteractive = css`\n  cursor: pointer;\n\n  &:hover {\n    color: var(--lido-color-primary);\n  }\n`\n\nexport const TableStyle = styled.table`\n  border-spacing: 0;\n`\n\nexport const TbodyStyle = styled.tbody`\n  & > tr::before,\n  & > tr::after {\n    content: '';\n    display: table-cell;\n    width: 32px;\n  }\n`\n\nconst TheadStickyStyle = css`\n  background: var(--lido-color-foreground);\n  top: 0;\n  position: sticky;\n  z-index: 5;\n`\n\nexport const TheadStyle = styled.thead<InjectedPropsThead>`\n  border-top: 1px solid var(--lido-color-borderLight);\n  border-bottom: 1px solid var(--lido-color-borderLight);\n\n  ${({ $sticky }) => $sticky && TheadStickyStyle}\n\n  & > tr::before,\n  & > tr::after {\n    content: '';\n    display: table-cell;\n    width: 32px;\n\n    border-top: 1px solid var(--lido-color-borderLight);\n    border-bottom: 1px solid var(--lido-color-borderLight);\n  }\n`\n\nexport const TfootStyle = styled.tfoot``\n\nconst TrColors = {\n  negative: css`\n    background: rgba(var(--lido-rgb-error), 0.07);\n  `,\n  positive: css`\n    background: rgba(var(--lido-rgb-success), 0.07);\n  `,\n  warning: css`\n    background: rgba(var(--lido-rgb-warning), 0.07);\n  `,\n}\n\nconst TrInteractive = css`\n  cursor: pointer;\n`\n\nexport const TrStyle = styled.tr<InjectedPropsTr>`\n  font-weight: 400;\n  font-size: ${({ theme }) => theme.fontSizesMap.xxs}px;\n  line-height: 1.6em;\n  ${({ $highlight }) => $highlight && TrColors[$highlight]}\n  ${({ $interactive }) => $interactive && TrInteractive}\n`\n\nconst TdNumericStyle = css`\n  font-variant-numeric: tabular-nums;\n  white-space: nowrap;\n`\n\nexport const TdStyle = styled.td<InjectedPropsTd>`\n  border-bottom: 1px solid var(--lido-color-borderLight);\n  padding: 18px;\n\n  color: ${getMainColorTd};\n\n  ${(props) => TdThAlign[props.$align]}\n  ${({ $variant }) => $variant && TdThVariants[$variant]}\n  ${({ $interactive }) => $interactive && ThTdInteractive}\n  ${({ $numeric }) => $numeric && TdNumericStyle}\n\n  &:first-child {\n    padding-left: 0;\n  }\n\n  &:last-child {\n    padding-right: 0;\n  }\n`\n\nexport const ThStyle = styled.th<InjectedPropsTh>`\n  border-top: 1px solid var(--lido-color-borderLight);\n  border-bottom: 1px solid var(--lido-color-borderLight);\n\n  padding: 7px 18px;\n\n  font-weight: 700;\n  color: var(--lido-color-text);\n\n  ${(props) => TdThAlign[props.$align]}\n  ${({ $interactive }) => $interactive && ThTdInteractive}\n  ${({ $variant }) => $variant && TdThVariants[$variant]}\n\n  &:first-child {\n    padding-left: 0;\n  }\n\n  &:last-child {\n    padding-right: 0;\n  }\n`\n\nexport const ArrowTopStyle = styled(ArrowTop)`\n  margin: -7px 0 -7px 2px;\n`\n\nexport const ArrowBottomStyle = styled(ArrowBottom)`\n  margin: -7px 0 -7px 2px;\n`\n"],"names":["getMainColorTd","props","primary","secondary","warning","error","success","default","$textColor","TdThAlign","left","css","center","right","ThTdContentStyle","styled","div","TdThVariants","string","icon","ThTdInteractive","TableStyle","table","TbodyStyle","tbody","TheadStickyStyle","TheadStyle","thead","_ref","$sticky","TfootStyle","tfoot","TrColors","negative","positive","TrInteractive","TrStyle","tr","_ref2","theme","fontSizesMap","xxs","_ref3","$highlight","_ref4","$interactive","TdNumericStyle","TdStyle","td","$align","_ref5","$variant","_ref6","_ref7","$numeric","ThStyle","th","_ref8","_ref9","ArrowTopStyle","ArrowTop","ArrowBottomStyle","ArrowBottom"],"mappings":"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"}

package/dist/esm/table/types.mjs

@@ -0,0 +1,34 @@
+let TableAlign = /*#__PURE__*/function (TableAlign) {
+  TableAlign[TableAlign["left"] = 0] = "left";
+  TableAlign[TableAlign["center"] = 1] = "center";
+  TableAlign[TableAlign["right"] = 2] = "right";
+  return TableAlign;
+}({});
+let TableTextColor = /*#__PURE__*/function (TableTextColor) {
+  TableTextColor[TableTextColor["primary"] = 0] = "primary";
+  TableTextColor[TableTextColor["secondary"] = 1] = "secondary";
+  TableTextColor[TableTextColor["warning"] = 2] = "warning";
+  TableTextColor[TableTextColor["error"] = 3] = "error";
+  TableTextColor[TableTextColor["success"] = 4] = "success";
+  TableTextColor[TableTextColor["default"] = 5] = "default";
+  return TableTextColor;
+}({});
+let TrHighlight = /*#__PURE__*/function (TrHighlight) {
+  TrHighlight[TrHighlight["positive"] = 0] = "positive";
+  TrHighlight[TrHighlight["negative"] = 1] = "negative";
+  TrHighlight[TrHighlight["warning"] = 2] = "warning";
+  return TrHighlight;
+}({});
+let ThSortDir = /*#__PURE__*/function (ThSortDir) {
+  ThSortDir[ThSortDir["ASC"] = 0] = "ASC";
+  ThSortDir[ThSortDir["DESC"] = 1] = "DESC";
+  return ThSortDir;
+}({});
+let ThTdVariant = /*#__PURE__*/function (ThTdVariant) {
+  ThTdVariant[ThTdVariant["string"] = 0] = "string";
+  ThTdVariant[ThTdVariant["icon"] = 1] = "icon";
+  return ThTdVariant;
+}({});
+
+export { TableAlign, TableTextColor, ThSortDir, ThTdVariant, TrHighlight };
+//# sourceMappingURL=types.mjs.map

package/dist/esm/table/types.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.mjs","sources":["../../../src/table/types.tsx"],"sourcesContent":["import { LidoComponentProps } from '../utils/index.js'\nexport type { Theme } from '../theme/index.js'\n\nexport enum TableAlign {\n  left,\n  center,\n  right,\n}\nexport type TableAligns = keyof typeof TableAlign\n\nexport enum TableTextColor {\n  primary,\n  secondary,\n  warning,\n  error,\n  success,\n  default,\n}\nexport type TableTextColors = keyof typeof TableTextColor\n\nexport enum TrHighlight {\n  positive,\n  negative,\n  warning,\n}\nexport type TrHighlights = keyof typeof TrHighlight\n\nexport enum ThSortDir {\n  ASC,\n  DESC,\n}\nexport type ThSortDirs = keyof typeof ThSortDir\n\nexport enum ThTdVariant {\n  string,\n  icon,\n}\nexport type ThTdVariants = keyof typeof ThTdVariant\n\nexport type TableProps = LidoComponentProps<'table'>\nexport type TheadProps = LidoComponentProps<\n  'thead',\n  {\n    sticky?: boolean\n  }\n>\nexport type TbodyProps = LidoComponentProps<'tbody'>\nexport type TfootProps = LidoComponentProps<'tfoot'>\nexport type TrProps = LidoComponentProps<\n  'tr',\n  {\n    highlight?: TrHighlights\n  }\n>\nexport type ThProps = LidoComponentProps<\n  'th',\n  {\n    align?: TableAligns\n    sortDir?: ThSortDirs\n    variant?: ThTdVariants\n  }\n>\nexport type TdProps = LidoComponentProps<\n  'td',\n  {\n    align?: TableAligns\n    textColor?: TableTextColors\n    variant?: ThTdVariants\n    numeric?: boolean\n  }\n>\n"],"names":["TableAlign","TableTextColor","TrHighlight","ThSortDir","ThTdVariant"],"mappings":"AAGYA,IAAAA,UAAU,0BAAVA,UAAU,EAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAA,CAAA;AAAVA,EAAAA,UAAU,CAAVA,UAAU,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA,CAAA;AAAA,EAAA,OAAVA,UAAU,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAOVC,IAAAA,cAAc,0BAAdA,cAAc,EAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,WAAA,CAAA,GAAA,CAAA,CAAA,GAAA,WAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAA,CAAA;AAAdA,EAAAA,cAAc,CAAdA,cAAc,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAA,CAAA;AAAA,EAAA,OAAdA,cAAc,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAUdC,IAAAA,WAAW,0BAAXA,WAAW,EAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,UAAA,CAAA,GAAA,CAAA,CAAA,GAAA,UAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,UAAA,CAAA,GAAA,CAAA,CAAA,GAAA,UAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,SAAA,CAAA,GAAA,CAAA,CAAA,GAAA,SAAA,CAAA;AAAA,EAAA,OAAXA,WAAW,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAOXC,IAAAA,SAAS,0BAATA,SAAS,EAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,KAAA,CAAA,GAAA,CAAA,CAAA,GAAA,KAAA,CAAA;AAATA,EAAAA,SAAS,CAATA,SAAS,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA,CAAA;AAAA,EAAA,OAATA,SAAS,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAMTC,IAAAA,WAAW,0BAAXA,WAAW,EAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,QAAA,CAAA,GAAA,CAAA,CAAA,GAAA,QAAA,CAAA;AAAXA,EAAAA,WAAW,CAAXA,WAAW,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA,CAAA;AAAA,EAAA,OAAXA,WAAW,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}

package/dist/esm/tabs/Tab.mjs

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