cakeinpanic-ui 1.0.0

package/dist/cjs/table/Th.js

@@ -0,0 +1,31 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const styles = require('./styles.js');
+const jsxRuntime = require('react/jsx-runtime');
+
+const Th = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    align = 'left',
+    children,
+    sortDir,
+    variant,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(styles.ThStyle, {
+    $interactive: !!rest.onClick,
+    $align: align,
+    $variant: variant,
+    ref: ref,
+    ...rest,
+    children: /*#__PURE__*/jsxRuntime.jsxs(styles.ThTdContentStyle, {
+      children: [children, sortDir === 'ASC' && /*#__PURE__*/jsxRuntime.jsx(styles.ArrowBottomStyle, {}), sortDir === 'DESC' && /*#__PURE__*/jsxRuntime.jsx(styles.ArrowTopStyle, {})]
+    })
+  });
+});
+Th.displayName = 'Th';
+
+exports.Th = Th;
+//# sourceMappingURL=Th.js.map

package/dist/cjs/table/Th.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Th.js","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,gBAAU,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,cAAA,CAACC,cAAO,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,eAAA,CAACC,uBAAgB,EAAA;MAAAX,QAAA,EAAA,CACdA,QAAQ,EACRC,OAAO,KAAK,KAAK,iBAAIG,cAAA,CAACQ,uBAAgB,IAAE,CAAC,EACzCX,OAAO,KAAK,MAAM,iBAAIG,cAAA,CAACS,oBAAa,EAAA,EAAE,CAAC,CAAA;KACxB,CAAA;AAAC,GACZ,CAAC,CAAA;AAEd,CACF,EAAC;AACDlB,EAAE,CAACmB,WAAW,GAAG,IAAI;;;;"}

package/dist/cjs/table/Thead.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const styles = require('./styles.js');
+const jsxRuntime = require('react/jsx-runtime');
+
+const Thead = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    sticky = false,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(styles.TheadStyle, {
+    ref: ref,
+    $sticky: sticky,
+    ...rest
+  });
+});
+Thead.displayName = 'Thead';
+
+exports.Thead = Thead;
+//# sourceMappingURL=Thead.js.map

package/dist/cjs/table/Thead.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Thead.js","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,gBAAU,CAC7B,CAAAC,IAAA,EAEEC,GAA2C,KACxC;EAAA,IAFH;AAAEC,IAAAA,MAAM,GAAG,KAAK;IAAE,GAAGC,IAAAA;AAAiB,GAAC,GAAAH,IAAA,CAAA;EAGvC,oBAAOI,cAAA,CAACC,iBAAU,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/cjs/table/Tr.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const React = require('react');
+const styles = require('./styles.js');
+const jsxRuntime = require('react/jsx-runtime');
+
+const Tr = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    highlight,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/jsxRuntime.jsx(styles.TrStyle, {
+    $highlight: highlight,
+    $interactive: !!rest.onClick,
+    ref: ref,
+    ...rest
+  });
+});
+Tr.displayName = 'Tr';
+
+exports.Tr = Tr;
+//# sourceMappingURL=Tr.js.map

package/dist/cjs/table/Tr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tr.js","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,gBAAU,CAC1B,CAAAC,IAAA,EAEEC,GAAuC,KACpC;EAAA,IAFH;IAAEC,SAAS;IAAE,GAAGC,IAAAA;AAAc,GAAC,GAAAH,IAAA,CAAA;EAG/B,oBACEI,cAAA,CAACC,cAAO,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/cjs/table/styles.js

@@ -0,0 +1,222 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponentsWrapper = require('../utils/styled-components-wrapper.js');
+const index = require('../icons/index.js');
+const _styled = require('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: _styled.css`
+    text-align: left;
+  `,
+  center: _styled.css`
+    text-align: center;
+  `,
+  right: _styled.css`
+    text-align: right;
+  `
+};
+const ThTdContentStyle = styledComponentsWrapper.default.div`
+  position: relative;
+  min-height: 16px;
+`;
+const TdThVariants = {
+  string: _styled.css`
+    ${ThTdContentStyle} {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  `,
+  icon: _styled.css`
+    line-height: 0;
+    width: 24px;
+    text-align: center;
+
+    ${ThTdContentStyle} {
+      width: 24px;
+
+      svg {
+        margin: -4px 0;
+      }
+    }
+  `
+};
+const ThTdInteractive = _styled.css`
+  cursor: pointer;
+
+  &:hover {
+    color: var(--lido-color-primary);
+  }
+`;
+const TableStyle = styledComponentsWrapper.default.table`
+  border-spacing: 0;
+`;
+const TbodyStyle = styledComponentsWrapper.default.tbody`
+  & > tr::before,
+  & > tr::after {
+    content: '';
+    display: table-cell;
+    width: 32px;
+  }
+`;
+const TheadStickyStyle = _styled.css`
+  background: var(--lido-color-foreground);
+  top: 0;
+  position: sticky;
+  z-index: 5;
+`;
+const TheadStyle = styledComponentsWrapper.default.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 = styledComponentsWrapper.default.tfoot``;
+const TrColors = {
+  negative: _styled.css`
+    background: rgba(var(--lido-rgb-error), 0.07);
+  `,
+  positive: _styled.css`
+    background: rgba(var(--lido-rgb-success), 0.07);
+  `,
+  warning: _styled.css`
+    background: rgba(var(--lido-rgb-warning), 0.07);
+  `
+};
+const TrInteractive = _styled.css`
+  cursor: pointer;
+`;
+const TrStyle = styledComponentsWrapper.default.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 = _styled.css`
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+`;
+const TdStyle = styledComponentsWrapper.default.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 = styledComponentsWrapper.default.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 = styledComponentsWrapper.default(index.ArrowTop)`
+  margin: -7px 0 -7px 2px;
+`;
+const ArrowBottomStyle = styledComponentsWrapper.default(index.ArrowBottom)`
+  margin: -7px 0 -7px 2px;
+`;
+
+exports.ArrowBottomStyle = ArrowBottomStyle;
+exports.ArrowTopStyle = ArrowTopStyle;
+exports.TableStyle = TableStyle;
+exports.TbodyStyle = TbodyStyle;
+exports.TdStyle = TdStyle;
+exports.TfootStyle = TfootStyle;
+exports.ThStyle = ThStyle;
+exports.ThTdContentStyle = ThTdContentStyle;
+exports.TheadStyle = TheadStyle;
+exports.TrStyle = TrStyle;
+//# sourceMappingURL=styles.js.map

package/dist/cjs/table/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","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/cjs/table/types.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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;
+}({});
+
+exports.TableAlign = TableAlign;
+exports.TableTextColor = TableTextColor;
+exports.ThSortDir = ThSortDir;
+exports.ThTdVariant = ThTdVariant;
+exports.TrHighlight = TrHighlight;
+//# sourceMappingURL=types.js.map

package/dist/cjs/table/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","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/cjs/tabs/Tab.js

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

package/dist/cjs/tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sources":["../../../src/tabs/Tab.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef } from 'react'\nimport { TabProps } from './types.js'\nimport { TabButtonStyle, TabLabelStyle } from './TabsStyles.js'\n\nexport const Tab = forwardRef(\n  (\n    { active = false, children, ...rest }: TabProps,\n    ref?: ForwardedRef<HTMLButtonElement>,\n  ) => {\n    return (\n      <TabButtonStyle\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        <TabLabelStyle $active={active}>{children}</TabLabelStyle>\n      </TabButtonStyle>\n    )\n  },\n)\nTab.displayName = 'Tab'\n"],"names":["Tab","forwardRef","_ref","ref","active","children","rest","_jsx","TabButtonStyle","$active","role","tabIndex","type","TabLabelStyle","displayName"],"mappings":";;;;;;;;AAIO,MAAMA,GAAG,gBAAGC,gBAAU,CAC3B,CAAAC,IAAA,EAEEC,GAAqC,KAClC;EAAA,IAFH;AAAEC,IAAAA,MAAM,GAAG,KAAK;IAAEC,QAAQ;IAAE,GAAGC,IAAAA;AAAe,GAAC,GAAAJ,IAAA,CAAA;EAG/C,oBACEK,cAAA,CAACC,yBAAc,EAAA;AACbC,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,wBAAa,EAAA;AAACJ,MAAAA,OAAO,EAAEL,MAAO;AAAAC,MAAAA,QAAA,EAAEA,QAAAA;KAAwB,CAAA;AAAC,GAC5C,CAAC,CAAA;AAErB,CACF,EAAC;AACDL,GAAG,CAACc,WAAW,GAAG,KAAK;;;;"}

package/dist/cjs/tabs/Tabs.js

@@ -0,0 +1,101 @@
+'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 TabsStyles = require('./TabsStyles.js');
+
+const Tabs = /*#__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 activeTab = listNode.querySelector('[role="tab"][aria-selected="true"]');
+      if (!activeTab) {
+        listNode.style.setProperty('--tabs-indicator-left', '0px');
+        listNode.style.setProperty('--tabs-indicator-width', '0px');
+        return;
+      }
+      const listRect = listNode.getBoundingClientRect();
+      const tabRect = activeTab.getBoundingClientRect();
+      const left = tabRect.left - listRect.left + listNode.scrollLeft;
+      listNode.style.setProperty('--tabs-indicator-left', `${left}px`);
+      listNode.style.setProperty('--tabs-indicator-width', `${tabRect.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) {
+      // Ensure metrics are correct after fonts are loaded.
+      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(TabsStyles.TabsListStyle, {
+    role: "tablist",
+    ref: setRefs,
+    ...rest,
+    children: [children, /*#__PURE__*/jsxRuntime.jsx(TabsStyles.TabsIndicatorStyle, {
+      "aria-hidden": true
+    })]
+  });
+});
+Tabs.displayName = 'Tabs';
+
+exports.Tabs = Tabs;
+//# sourceMappingURL=Tabs.js.map

package/dist/cjs/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../src/tabs/Tabs.tsx"],"sourcesContent":["import { ForwardedRef, forwardRef, useCallback, useRef } from 'react'\nimport { useIsomorphicLayoutEffect } from '../hooks'\nimport { TabsProps } from './types.js'\nimport { TabsIndicatorStyle, TabsListStyle } from './TabsStyles.js'\n\nexport const Tabs = forwardRef(\n  ({ children, ...rest }: TabsProps, ref?: ForwardedRef<HTMLDivElement>) => {\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 activeTab = listNode.querySelector<HTMLElement>(\n          '[role=\"tab\"][aria-selected=\"true\"]',\n        )\n        if (!activeTab) {\n          listNode.style.setProperty('--tabs-indicator-left', '0px')\n          listNode.style.setProperty('--tabs-indicator-width', '0px')\n          return\n        }\n\n        const listRect = listNode.getBoundingClientRect()\n        const tabRect = activeTab.getBoundingClientRect()\n        const left = tabRect.left - listRect.left + listNode.scrollLeft\n\n        listNode.style.setProperty('--tabs-indicator-left', `${left}px`)\n        listNode.style.setProperty(\n          '--tabs-indicator-width',\n          `${tabRect.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        // Ensure metrics are correct after fonts are loaded.\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      <TabsListStyle role='tablist' ref={setRefs} {...rest}>\n        {children}\n        <TabsIndicatorStyle aria-hidden />\n      </TabsListStyle>\n    )\n  },\n)\nTabs.displayName = 'Tabs'\n"],"names":["Tabs","forwardRef","_ref","ref","children","rest","listRef","useRef","setRefs","useCallback","node","current","useIsomorphicLayoutEffect","window","undefined","listNode","rafId","updateIndicator","activeTab","querySelector","style","setProperty","listRect","getBoundingClientRect","tabRect","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","TabsListStyle","role","_jsx","TabsIndicatorStyle","displayName"],"mappings":"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"}

package/dist/cjs/tabs/TabsStyles.js

@@ -0,0 +1,107 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const styledComponentsWrapper = require('../utils/styled-components-wrapper.js');
+const _styled = require('styled-components');
+
+const TabsListStyle = styledComponentsWrapper.default.div`
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  position: relative;
+  border-bottom: 1px solid var(--lido-color-borderSubtle);
+`;
+const TabLabelStyle = styledComponentsWrapper.default.span`
+  font-size: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.fontSizesMap.sm;
+}}px;
+  line-height: 1.5em;
+  font-weight: 700;
+  color: var(--lido-color-text);
+  opacity: ${_ref2 => {
+  let {
+    $active
+  } = _ref2;
+  return $active ? 1 : 0.5;
+}};
+`;
+const TabButtonStyle = styledComponentsWrapper.default.button`
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  margin: 0;
+  background: transparent;
+  border: none;
+  box-sizing: border-box;
+  cursor: pointer;
+  color: var(--lido-color-text);
+  padding: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.spaceMap.sm;
+}}px 0;
+  font-size: inherit;
+  white-space: nowrap;
+
+  ${_ref4 => {
+  let {
+    $active
+  } = _ref4;
+  return $active && _styled.css`
+      anchor-name: --tabs-active;
+    `;
+}}
+
+  &:hover ${TabLabelStyle},
+  &:focus-visible ${TabLabelStyle} {
+    opacity: 1;
+  }
+
+  &:disabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+`;
+const TabsIndicatorStyle = styledComponentsWrapper.default.span`
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: var(--tabs-indicator-width, 0);
+  height: 2px;
+  background-color: var(--lido-color-text);
+  transition:
+    transform ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.duration.norm;
+}} ease,
+    width ${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme.duration.norm;
+}} ease;
+  pointer-events: none;
+  z-index: 1;
+  will-change: transform, width;
+  transform: translateX(var(--tabs-indicator-left, 0));
+
+  /* stylelint-disable property-no-unknown */
+  @supports (position-anchor: --tabs-active) {
+    position-anchor: --tabs-active;
+    transform: translateX(anchor(left));
+    width: anchor-size(width);
+  }
+`;
+
+exports.TabButtonStyle = TabButtonStyle;
+exports.TabLabelStyle = TabLabelStyle;
+exports.TabsIndicatorStyle = TabsIndicatorStyle;
+exports.TabsListStyle = TabsListStyle;
+//# sourceMappingURL=TabsStyles.js.map

package/dist/cjs/tabs/TabsStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsStyles.js","sources":["../../../src/tabs/TabsStyles.tsx"],"sourcesContent":["import styled, { css } from '../utils/styled-components-wrapper.js'\n\nexport const TabsListStyle = styled.div`\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  position: relative;\n  border-bottom: 1px solid var(--lido-color-borderSubtle);\n`\n\nexport const TabLabelStyle = styled.span<{ $active: boolean }>`\n  font-size: ${({ theme }) => theme.fontSizesMap.sm}px;\n  line-height: 1.5em;\n  font-weight: 700;\n  color: var(--lido-color-text);\n  opacity: ${({ $active }) => ($active ? 1 : 0.5)};\n`\n\nexport const TabButtonStyle = styled.button<{ $active: boolean }>`\n  display: flex;\n  align-items: flex-start;\n  justify-content: center;\n  margin: 0;\n  background: transparent;\n  border: none;\n  box-sizing: border-box;\n  cursor: pointer;\n  color: var(--lido-color-text);\n  padding: ${({ theme }) => theme.spaceMap.sm}px 0;\n  font-size: inherit;\n  white-space: nowrap;\n\n  ${({ $active }) =>\n    $active &&\n    css`\n      anchor-name: --tabs-active;\n    `}\n\n  &:hover ${TabLabelStyle},\n  &:focus-visible ${TabLabelStyle} {\n    opacity: 1;\n  }\n\n  &:disabled {\n    cursor: default;\n    opacity: 0.5;\n  }\n`\n\nexport const TabsIndicatorStyle = styled.span`\n  position: absolute;\n  bottom: 0;\n  left: 0;\n  width: var(--tabs-indicator-width, 0);\n  height: 2px;\n  background-color: var(--lido-color-text);\n  transition:\n    transform ${({ theme }) => theme.duration.norm} ease,\n    width ${({ theme }) => theme.duration.norm} ease;\n  pointer-events: none;\n  z-index: 1;\n  will-change: transform, width;\n  transform: translateX(var(--tabs-indicator-left, 0));\n\n  /* stylelint-disable property-no-unknown */\n  @supports (position-anchor: --tabs-active) {\n    position-anchor: --tabs-active;\n    transform: translateX(anchor(left));\n    width: anchor-size(width);\n  }\n`\n"],"names":["TabsListStyle","styled","div","TabLabelStyle","span","_ref","theme","fontSizesMap","sm","_ref2","$active","TabButtonStyle","button","_ref3","spaceMap","_ref4","css","TabsIndicatorStyle","_ref5","duration","norm","_ref6"],"mappings":";;;;;;;AAEaA,MAAAA,aAAa,GAAGC,+BAAM,CAACC,GAAG,CAAA;AACvC;AACA;AACA;AACA;AACA;AACA,EAAC;AAEYC,MAAAA,aAAa,GAAGF,+BAAM,CAACG,IAA0B,CAAA;AAC9D,aAAA,EAAeC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,KAAAA;AAAM,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKC,KAAK,CAACC,YAAY,CAACC,EAAE,CAAA;AAAA,CAAA,CAAA;AACnD;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,EAAC;AAEYC,MAAAA,cAAc,GAAGV,+BAAM,CAACW,MAA4B,CAAA;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,WAAA,EAAaC,KAAA,IAAA;EAAA,IAAC;AAAEP,IAAAA,KAAAA;AAAM,GAAC,GAAAO,KAAA,CAAA;AAAA,EAAA,OAAKP,KAAK,CAACQ,QAAQ,CAACN,EAAE,CAAA;AAAA,CAAA,CAAA;AAC7C;AACA;AACA;AACA,EAAA,EAAIO,KAAA,IAAA;EAAA,IAAC;AAAEL,IAAAA,OAAAA;AAAQ,GAAC,GAAAK,KAAA,CAAA;EAAA,OACZL,OAAO,IACPM,WAAG,CAAA;AACP;AACA,IAAK,CAAA,CAAA;AAAA,CAAA,CAAA;AACL;AACA,UAAA,EAAYb,aAAa,CAAA;AACzB,kBAAA,EAAoBA,aAAa,CAAA;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAEYc,MAAAA,kBAAkB,GAAGhB,+BAAM,CAACG,IAAI,CAAA;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAA,EAAgBc,KAAA,IAAA;EAAA,IAAC;AAAEZ,IAAAA,KAAAA;AAAM,GAAC,GAAAY,KAAA,CAAA;AAAA,EAAA,OAAKZ,KAAK,CAACa,QAAQ,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AAClD,UAAA,EAAYC,KAAA,IAAA;EAAA,IAAC;AAAEf,IAAAA,KAAAA;AAAM,GAAC,GAAAe,KAAA,CAAA;AAAA,EAAA,OAAKf,KAAK,CAACa,QAAQ,CAACC,IAAI,CAAA;AAAA,CAAA,CAAA;AAC9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;;;"}