@dr.pogodin/react-utils 1.46.2 → 1.47.0-alpha.1

package/build/web/shared/components/Checkbox/theme.scss

@@ -0,0 +1,63 @@
+*,
+.context,
+.ad.hoc {
+  &.checkbox {
+    appearance: none;
+    background: white;
+    border: 1px solid gray;
+    border-radius: 0.3em;
+    cursor: pointer;
+    font: inherit;
+    height: 1.5em;
+    outline: none;
+    margin: 0;
+    width: 1.5em;
+
+    &:checked {
+      &::after {
+        background: black;
+        border-radius: 0.3em;
+        content: "";
+        display: block;
+        height: 1em;
+        margin: 0.2em;
+        width: 1em;
+      }
+    }
+
+    &:focus {
+      border-color: blue;
+      box-shadow: 0 0 3px 1px lightblue;
+    }
+
+    &.indeterminate {
+      &::after {
+        background: black;
+        border-radius: 0.2em;
+        content: "";
+        display: block;
+        height: 0.2em;
+        margin: 0.6em 0.2em;
+        width: 1em;
+      }
+    }
+  }
+
+  &.container {
+    align-items: center;
+    display: inline-flex;
+    margin: 0.1em;
+  }
+
+  &.label {
+    margin: 0 0.6em 0 1.5em;
+  }
+
+  &.disabled {
+    opacity: 0.33;
+
+    .checkbox {
+      cursor: not-allowed !important;
+    }
+  }
+}

package/build/web/shared/components/GenericLink/index.js

@@ -0,0 +1,107 @@
+import "./style.scss";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * The `<Link>` component, and almost identical `<NavLink>` component, are
+ * auxiliary wrappers around
+ * [React Router](https://github.com/ReactTraining/react-router)'s
+ * `<Link>` and `<NavLink>` components; they help to handle external and
+ * internal links in uniform manner.
+ *
+ * @param [props] Component properties.
+ * @param [props.className] CSS classes to apply to the link.
+ * @param [props.disabled] Disables the link.
+ * @param [props.enforceA] `true` enforces rendering of the link as
+ * a simple `<a>` element.
+ * @param [props.keepScrollPosition] If `true`, and the link is
+ * rendered as a React Router's component, it won't reset the viewport scrolling
+ * position to the origin when clicked.
+ * @param [props.onClick] Event handler to trigger upon click.
+ * @param [props.onMouseDown] Event handler to trigger on MouseDown
+ * event.
+ * @param [props.openNewTab] If `true` the link opens in a new tab.
+ * @param [props.replace] When `true`, the link will replace current
+ * entry in the history stack instead of adding a new one.
+ * @param [props.to] Link URL.
+ * @param [props.activeClassName] **`<NavLink>`** only: CSS class(es)
+ * to apply to rendered link when it is active.
+ * @param [props.activeStyle] **`<NavLink>`** only: CSS styles
+ * to apply to the rendered link when it is active.
+ * @param [props.exact] **`<NavLink>`** only: if `true`, the active
+ * class/style will only be applied if the location is matched exactly.
+ * @param [props.isActive] **`<NavLink>`** only: Add extra
+ * logic for determining whether the link is active. This should be used if you
+ * want to do more than verify that the link’s pathname matches the current URL
+ * pathname.
+ * @param [props.location] **`<NavLink>`** only: `isActive` compares
+ * current history location (usually the current browser URL). To compare to
+ * a different location, a custom `location` can be passed.
+ * @param [props.strict] **`<NavLink>`** only: . When `true`, trailing
+ * slash on a location’s pathname will be taken into consideration when
+ * determining if the location matches the current URL. See the `<Route strict>`
+ * documentation for more information.
+ */
+const GenericLink = ({
+  children,
+  className,
+  disabled,
+  enforceA,
+  keepScrollPosition,
+  onClick,
+  onMouseDown,
+  openNewTab,
+  replace,
+  routerLinkType,
+  to,
+  ...rest
+}) => {
+  /* Renders Link as <a> element if:
+   * - It is opted explicitely by `enforceA` prop;
+   * - It should be opened in a new tab;
+   * - It is an absolte URL (starts with http:// or https://);
+   * - It is anchor link (starts with #). */
+  if (disabled || enforceA || openNewTab || to.match(/^(#|(https?|mailto):)/)) {
+    return /*#__PURE__*/_jsx("a", {
+      className: className
+      // TODO: This requires a fix: disabled is not really an attribute of <a>
+      // tag, thus for disabled option we rather should render a plain text
+      // styled as a link.
+      // disabled={disabled}
+      ,
+      href: to,
+      onClick: disabled ? e => {
+        e.preventDefault();
+      } : onClick,
+      onMouseDown: disabled ? e => {
+        e.preventDefault();
+      } : onMouseDown,
+      rel: "noopener noreferrer",
+      styleName: "link",
+      target: openNewTab ? '_blank' : '',
+      children: children
+    });
+  }
+  const L = routerLinkType;
+  return /*#__PURE__*/_jsx(L, {
+    className: className,
+    discover: "none"
+    // disabled
+    ,
+    onClick: e => {
+      // Executes the user-provided event handler, if any.
+      if (onClick) onClick(e);
+
+      // By default, clicking the link scrolls the page to beginning.
+      if (!keepScrollPosition) window.scroll(0, 0);
+    },
+    onMouseDown: onMouseDown,
+    replace: replace,
+    to: to
+    // TODO: Refactor it later.
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    ,
+    ...rest,
+    children: children
+  });
+};
+export default GenericLink;
+//# sourceMappingURL=index.js.map

package/build/web/shared/components/GenericLink/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["jsx","_jsx","GenericLink","children","className","disabled","enforceA","keepScrollPosition","onClick","onMouseDown","openNewTab","replace","routerLinkType","to","rest","match","href","e","preventDefault","rel","styleName","target","L","discover","window","scroll"],"sources":["../../../../../src/shared/components/GenericLink/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport type {\n  Link,\n  LinkProps,\n  NavLink,\n  NavLinkProps,\n} from 'react-router';\n\nimport './style.scss';\n\ntype LinkT = typeof Link;\ntype NavLinkT = typeof NavLink;\n\ntype ToT = Parameters<typeof Link>[0]['to'];\n\nexport type PropsT = {\n  children?: ReactNode;\n  className?: string;\n  disabled?: boolean;\n  enforceA?: boolean;\n  keepScrollPosition?: boolean;\n  onClick?: React.MouseEventHandler<HTMLAnchorElement>;\n  onMouseDown?: React.MouseEventHandler<HTMLAnchorElement>;\n  openNewTab?: boolean;\n  replace?: boolean;\n  routerLinkType: LinkT | NavLinkT;\n  to: ToT;\n};\n\n/**\n * The `<Link>` component, and almost identical `<NavLink>` component, are\n * auxiliary wrappers around\n * [React Router](https://github.com/ReactTraining/react-router)'s\n * `<Link>` and `<NavLink>` components; they help to handle external and\n * internal links in uniform manner.\n *\n * @param [props] Component properties.\n * @param [props.className] CSS classes to apply to the link.\n * @param [props.disabled] Disables the link.\n * @param [props.enforceA] `true` enforces rendering of the link as\n * a simple `<a>` element.\n * @param [props.keepScrollPosition] If `true`, and the link is\n * rendered as a React Router's component, it won't reset the viewport scrolling\n * position to the origin when clicked.\n * @param [props.onClick] Event handler to trigger upon click.\n * @param [props.onMouseDown] Event handler to trigger on MouseDown\n * event.\n * @param [props.openNewTab] If `true` the link opens in a new tab.\n * @param [props.replace] When `true`, the link will replace current\n * entry in the history stack instead of adding a new one.\n * @param [props.to] Link URL.\n * @param [props.activeClassName] **`<NavLink>`** only: CSS class(es)\n * to apply to rendered link when it is active.\n * @param [props.activeStyle] **`<NavLink>`** only: CSS styles\n * to apply to the rendered link when it is active.\n * @param [props.exact] **`<NavLink>`** only: if `true`, the active\n * class/style will only be applied if the location is matched exactly.\n * @param [props.isActive] **`<NavLink>`** only: Add extra\n * logic for determining whether the link is active. This should be used if you\n * want to do more than verify that the link’s pathname matches the current URL\n * pathname.\n * @param [props.location] **`<NavLink>`** only: `isActive` compares\n * current history location (usually the current browser URL). To compare to\n * a different location, a custom `location` can be passed.\n * @param [props.strict] **`<NavLink>`** only: . When `true`, trailing\n * slash on a location’s pathname will be taken into consideration when\n * determining if the location matches the current URL. See the `<Route strict>`\n * documentation for more information.\n */\nconst GenericLink = ({\n  children,\n  className,\n  disabled,\n  enforceA,\n  keepScrollPosition,\n  onClick,\n  onMouseDown,\n  openNewTab,\n  replace,\n  routerLinkType,\n  to,\n  ...rest\n}: (LinkProps | NavLinkProps) & PropsT): ReactNode => {\n  /* Renders Link as <a> element if:\n   * - It is opted explicitely by `enforceA` prop;\n   * - It should be opened in a new tab;\n   * - It is an absolte URL (starts with http:// or https://);\n   * - It is anchor link (starts with #). */\n  if (disabled || enforceA || openNewTab\n    || (to as string).match(/^(#|(https?|mailto):)/)) {\n    return (\n      <a\n        className={className}\n        // TODO: This requires a fix: disabled is not really an attribute of <a>\n        // tag, thus for disabled option we rather should render a plain text\n        // styled as a link.\n        // disabled={disabled}\n        href={to as string}\n        onClick={disabled ? (e) => {\n          e.preventDefault();\n        } : onClick}\n        onMouseDown={disabled ? (e) => {\n          e.preventDefault();\n        } : onMouseDown}\n        rel=\"noopener noreferrer\"\n        styleName=\"link\"\n        target={openNewTab ? '_blank' : ''}\n      >\n        {children}\n      </a>\n    );\n  }\n\n  const L = routerLinkType;\n\n  return (\n    <L\n      className={className}\n      discover=\"none\"\n      // disabled\n      onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {\n        // Executes the user-provided event handler, if any.\n        if (onClick) onClick(e);\n\n        // By default, clicking the link scrolls the page to beginning.\n        if (!keepScrollPosition) window.scroll(0, 0);\n      }}\n      onMouseDown={onMouseDown}\n      replace={replace}\n      to={to}\n      // TODO: Refactor it later.\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...rest}\n    >\n      {children}\n    </L>\n  );\n};\n\nexport default GenericLink;\n"],"mappings":"AASA;AAAsB,SAAAA,GAAA,IAAAC,IAAA;AAqBtB;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;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAGA,CAAC;EACnBC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,kBAAkB;EAClBC,OAAO;EACPC,WAAW;EACXC,UAAU;EACVC,OAAO;EACPC,cAAc;EACdC,EAAE;EACF,GAAGC;AACgC,CAAC,KAAgB;EACpD;AACF;AACA;AACA;AACA;EACE,IAAIT,QAAQ,IAAIC,QAAQ,IAAII,UAAU,IAChCG,EAAE,CAAYE,KAAK,CAAC,uBAAuB,CAAC,EAAE;IAClD,oBACEd,IAAA;MACEG,SAAS,EAAEA;MACX;MACA;MACA;MACA;MAAA;MACAY,IAAI,EAAEH,EAAa;MACnBL,OAAO,EAAEH,QAAQ,GAAIY,CAAC,IAAK;QACzBA,CAAC,CAACC,cAAc,CAAC,CAAC;MACpB,CAAC,GAAGV,OAAQ;MACZC,WAAW,EAAEJ,QAAQ,GAAIY,CAAC,IAAK;QAC7BA,CAAC,CAACC,cAAc,CAAC,CAAC;MACpB,CAAC,GAAGT,WAAY;MAChBU,GAAG,EAAC,qBAAqB;MACzBC,SAAS,EAAC,MAAM;MAChBC,MAAM,EAAEX,UAAU,GAAG,QAAQ,GAAG,EAAG;MAAAP,QAAA,EAElCA;IAAQ,CACR,CAAC;EAER;EAEA,MAAMmB,CAAC,GAAGV,cAAc;EAExB,oBACEX,IAAA,CAACqB,CAAC;IACAlB,SAAS,EAAEA,SAAU;IACrBmB,QAAQ,EAAC;IACT;IAAA;IACAf,OAAO,EAAGS,CAAsC,IAAK;MACnD;MACA,IAAIT,OAAO,EAAEA,OAAO,CAACS,CAAC,CAAC;;MAEvB;MACA,IAAI,CAACV,kBAAkB,EAAEiB,MAAM,CAACC,MAAM,CAAC,CAAC,EAAE,CAAC,CAAC;IAC9C,CAAE;IACFhB,WAAW,EAAEA,WAAY;IACzBE,OAAO,EAAEA,OAAQ;IACjBE,EAAE,EAAEA;IACJ;IACA;IAAA;IAAA,GACIC,IAAI;IAAAX,QAAA,EAEPA;EAAQ,CACR,CAAC;AAER,CAAC;AAED,eAAeD,WAAW","ignoreList":[]}

package/build/web/shared/components/GenericLink/style.scss

@@ -0,0 +1,3 @@
+.link[disabled] {
+  cursor: not-allowed;
+}

package/build/web/shared/components/Input/index.js

@@ -0,0 +1,71 @@
+import { useRef, useState } from 'react';
+import themed from '@dr.pogodin/react-themes';
+import defaultTheme from "./theme.scss";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Themeable input field, based on the standard HTML `<input>` element.
+ * @param [props.label] Input label.
+ * @param [props.theme] _Ad hoc_ theme.
+ * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
+ * @param [props...] Any other properties are passed to the underlying
+ * `<input>` element.
+ */
+const Input = ({
+  children,
+  error,
+  label,
+  ref,
+  testId,
+  theme,
+  ...rest
+}) => {
+  // NOTE: As of now, it is only updated when "theme.focused" is defined,
+  // as otherwise its value is not used.
+  const [focused, setFocused] = useState(false);
+  const localRef = useRef(null);
+  let containerClassName = theme.container;
+
+  // NOTE: As of now, "focused" can be true only when "theme.focused"
+  // is provided.
+  if (focused /* && theme.focused */) containerClassName += ` ${theme.focused}`;
+  if (!rest.value && theme.empty) containerClassName += ` ${theme.empty}`;
+  if (error) containerClassName += ` ${theme.error}`;
+  return /*#__PURE__*/_jsxs("div", {
+    className: containerClassName,
+    onFocus: () => {
+      // TODO: It does not really work if a callback-style `ref` is passed in,
+      // we need a more complex logic to cover that case, but for now this serves
+      // the case we need it for.
+      if (typeof ref === 'object') ref?.current?.focus();else localRef.current?.focus();
+    },
+    children: [label === undefined ? null : /*#__PURE__*/_jsx("div", {
+      className: theme.label,
+      children: label
+    }), /*#__PURE__*/_jsx("input", {
+      className: theme.input,
+      "data-testid": process.env.NODE_ENV === 'production' ? undefined : testId,
+      ref: ref ?? localRef
+
+      // TODO: Avoid the spreading later.
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      ,
+      ...rest,
+      onBlur: theme.focused ? e => {
+        setFocused(false);
+        rest.onBlur?.(e);
+      } : rest.onBlur,
+      onFocus: theme.focused ? e => {
+        setFocused(true);
+        rest.onFocus?.(e);
+      } : rest.onFocus
+    }), error && error !== true ? /*#__PURE__*/_jsx("div", {
+      className: theme.errorMessage,
+      children: error
+    }) : null, children ? /*#__PURE__*/_jsx("div", {
+      className: theme.children,
+      children: children
+    }) : null]
+  });
+};
+export default themed(Input, 'Input', defaultTheme);
+//# sourceMappingURL=index.js.map

package/build/web/shared/components/Input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useRef","useState","themed","defaultTheme","jsx","_jsx","jsxs","_jsxs","Input","children","error","label","ref","testId","theme","rest","focused","setFocused","localRef","containerClassName","container","value","empty","className","onFocus","current","focus","undefined","input","process","env","NODE_ENV","onBlur","e","errorMessage"],"sources":["../../../../../src/shared/components/Input/index.tsx"],"sourcesContent":["import {\n  type FunctionComponent,\n  type ReactNode,\n  type Ref,\n  useRef,\n  useState,\n} from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport defaultTheme from './theme.scss';\n\ntype ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage'\n  | 'focused' | 'input' | 'label';\n\ntype PropsT = React.InputHTMLAttributes<HTMLInputElement> & {\n  children?: ReactNode;\n  error?: ReactNode;\n  label?: React.ReactNode;\n  ref?: Ref<HTMLInputElement>;\n  testId?: string;\n  theme: Theme<ThemeKeyT>;\n};\n\n/**\n * Themeable input field, based on the standard HTML `<input>` element.\n * @param [props.label] Input label.\n * @param [props.theme] _Ad hoc_ theme.\n * @param [props...] [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n * @param [props...] Any other properties are passed to the underlying\n * `<input>` element.\n */\nconst Input: FunctionComponent<PropsT> = ({\n  children,\n  error,\n  label,\n  ref,\n  testId,\n  theme,\n  ...rest\n}) => {\n  // NOTE: As of now, it is only updated when \"theme.focused\" is defined,\n  // as otherwise its value is not used.\n  const [focused, setFocused] = useState(false);\n\n  const localRef = useRef<HTMLInputElement>(null);\n\n  let containerClassName = theme.container;\n\n  // NOTE: As of now, \"focused\" can be true only when \"theme.focused\"\n  // is provided.\n  if (focused /* && theme.focused */) containerClassName += ` ${theme.focused}`;\n\n  if (!rest.value && theme.empty) containerClassName += ` ${theme.empty}`;\n\n  if (error) containerClassName += ` ${theme.error}`;\n\n  return (\n    <div\n      className={containerClassName}\n      onFocus={() => {\n        // TODO: It does not really work if a callback-style `ref` is passed in,\n        // we need a more complex logic to cover that case, but for now this serves\n        // the case we need it for.\n        if (typeof ref === 'object') ref?.current?.focus();\n        else localRef.current?.focus();\n      }}\n    >\n      {label === undefined ? null : <div className={theme.label}>{label}</div>}\n      <input\n        className={theme.input}\n        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n        ref={ref ?? localRef}\n\n        // TODO: Avoid the spreading later.\n        // eslint-disable-next-line react/jsx-props-no-spreading\n        {...rest}\n\n        onBlur={theme.focused ? (e) => {\n          setFocused(false);\n          rest.onBlur?.(e);\n        } : rest.onBlur}\n        onFocus={theme.focused ? (e) => {\n          setFocused(true);\n          rest.onFocus?.(e);\n        } : rest.onFocus}\n      />\n      {error && error !== true\n        ? <div className={theme.errorMessage}>{error}</div>\n        : null}\n      {children ? <div className={theme.children}>{children}</div> : null}\n    </div>\n  );\n};\n\nexport default themed(Input, 'Input', defaultTheme);\n"],"mappings":"AAAA,SAIEA,MAAM,EACNC,QAAQ,QACH,OAAO;AAEd,OAAOC,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,YAAY;AAAqB,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAcxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAgC,GAAGA,CAAC;EACxCC,QAAQ;EACRC,KAAK;EACLC,KAAK;EACLC,GAAG;EACHC,MAAM;EACNC,KAAK;EACL,GAAGC;AACL,CAAC,KAAK;EACJ;EACA;EACA,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGhB,QAAQ,CAAC,KAAK,CAAC;EAE7C,MAAMiB,QAAQ,GAAGlB,MAAM,CAAmB,IAAI,CAAC;EAE/C,IAAImB,kBAAkB,GAAGL,KAAK,CAACM,SAAS;;EAExC;EACA;EACA,IAAIJ,OAAO,CAAC,wBAAwBG,kBAAkB,IAAI,IAAIL,KAAK,CAACE,OAAO,EAAE;EAE7E,IAAI,CAACD,IAAI,CAACM,KAAK,IAAIP,KAAK,CAACQ,KAAK,EAAEH,kBAAkB,IAAI,IAAIL,KAAK,CAACQ,KAAK,EAAE;EAEvE,IAAIZ,KAAK,EAAES,kBAAkB,IAAI,IAAIL,KAAK,CAACJ,KAAK,EAAE;EAElD,oBACEH,KAAA;IACEgB,SAAS,EAAEJ,kBAAmB;IAC9BK,OAAO,EAAEA,CAAA,KAAM;MACb;MACA;MACA;MACA,IAAI,OAAOZ,GAAG,KAAK,QAAQ,EAAEA,GAAG,EAAEa,OAAO,EAAEC,KAAK,CAAC,CAAC,CAAC,KAC9CR,QAAQ,CAACO,OAAO,EAAEC,KAAK,CAAC,CAAC;IAChC,CAAE;IAAAjB,QAAA,GAEDE,KAAK,KAAKgB,SAAS,GAAG,IAAI,gBAAGtB,IAAA;MAAKkB,SAAS,EAAET,KAAK,CAACH,KAAM;MAAAF,QAAA,EAAEE;IAAK,CAAM,CAAC,eACxEN,IAAA;MACEkB,SAAS,EAAET,KAAK,CAACc,KAAM;MACvB,eAAaC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,GAAGJ,SAAS,GAAGd,MAAO;MACxED,GAAG,EAAEA,GAAG,IAAIM;;MAEZ;MACA;MAAA;MAAA,GACIH,IAAI;MAERiB,MAAM,EAAElB,KAAK,CAACE,OAAO,GAAIiB,CAAC,IAAK;QAC7BhB,UAAU,CAAC,KAAK,CAAC;QACjBF,IAAI,CAACiB,MAAM,GAAGC,CAAC,CAAC;MAClB,CAAC,GAAGlB,IAAI,CAACiB,MAAO;MAChBR,OAAO,EAAEV,KAAK,CAACE,OAAO,GAAIiB,CAAC,IAAK;QAC9BhB,UAAU,CAAC,IAAI,CAAC;QAChBF,IAAI,CAACS,OAAO,GAAGS,CAAC,CAAC;MACnB,CAAC,GAAGlB,IAAI,CAACS;IAAQ,CAClB,CAAC,EACDd,KAAK,IAAIA,KAAK,KAAK,IAAI,gBACpBL,IAAA;MAAKkB,SAAS,EAAET,KAAK,CAACoB,YAAa;MAAAzB,QAAA,EAAEC;IAAK,CAAM,CAAC,GACjD,IAAI,EACPD,QAAQ,gBAAGJ,IAAA;MAAKkB,SAAS,EAAET,KAAK,CAACL,QAAS;MAAAA,QAAA,EAAEA;IAAQ,CAAM,CAAC,GAAG,IAAI;EAAA,CAChE,CAAC;AAEV,CAAC;AAED,eAAeP,MAAM,CAACM,KAAK,EAAE,OAAO,EAAEL,YAAY,CAAC","ignoreList":[]}

package/build/web/shared/components/Input/theme.scss

@@ -0,0 +1,52 @@
+*,
+.context,
+.ad.hoc {
+  &.container {
+    align-items: center;
+    display: inline-flex;
+    flex-wrap: wrap;
+    margin: 0.1em;
+    position: relative;
+  }
+
+  &.children {
+    width: 100%;
+  }
+
+  &.input {
+    border: 1px solid gray;
+    border-radius: 0.3em;
+    cursor: text;
+    font: inherit;
+    flex: 1;
+    outline: none;
+    padding: 0.3em 0.3em calc(0.3em + 1px);
+
+    &:focus {
+      border-color: blue;
+      box-shadow: 0 0 3px 1px lightblue;
+    }
+  }
+
+  &.label {
+    margin: 0 0.6em 0 1.5em;
+    pointer-events: none;
+  }
+
+  &.error &.input {
+    border-color: red;
+
+    &:focus {
+      box-shadow: 0 0 3px 1px orangered;
+    }
+  }
+
+  &.errorMessage {
+    color: red;
+    font-size: 0.8em;
+    font-style: italic;
+    padding-right: 0.6em;
+    text-align: right;
+    width: 100%;
+  }
+}

package/build/web/shared/components/Link.js

@@ -0,0 +1,20 @@
+/**
+ * The Link wraps around React Router's Link component, to automatically replace
+ * it by the regular <a> element when:
+ * - The target reference points to another domain;
+ * - User opts to open the reference in a new tab;
+ * - User explicitely opts to use <a>.
+ */
+
+import { Link as RrLink } from 'react-router';
+import GenericLink from "./GenericLink";
+import { jsx as _jsx } from "react/jsx-runtime";
+const Link = props => /*#__PURE__*/_jsx(GenericLink
+// TODO: Avoid the spreading later.
+// eslint-disable-next-line react/jsx-props-no-spreading
+, {
+  ...props,
+  routerLinkType: RrLink
+});
+export default Link;
+//# sourceMappingURL=Link.js.map

package/build/web/shared/components/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","names":["Link","RrLink","GenericLink","jsx","_jsx","props","routerLinkType"],"sources":["../../../../src/shared/components/Link.tsx"],"sourcesContent":["/**\n * The Link wraps around React Router's Link component, to automatically replace\n * it by the regular <a> element when:\n * - The target reference points to another domain;\n * - User opts to open the reference in a new tab;\n * - User explicitely opts to use <a>.\n */\n\nimport { type LinkProps, Link as RrLink } from 'react-router';\n\nimport GenericLink, { type PropsT as GenericLinkPropsT } from './GenericLink';\n\ntype PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & LinkProps;\n\nconst Link: React.FunctionComponent<PropsT>\n  = (props) => (\n    <GenericLink\n      // TODO: Avoid the spreading later.\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n      routerLinkType={RrLink}\n    />\n  );\n\nexport default Link;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAAyBA,IAAI,IAAIC,MAAM,QAAQ,cAAc;AAE7D,OAAOC,WAAW;AAA4D,SAAAC,GAAA,IAAAC,IAAA;AAI9E,MAAMJ,IAAqC,GACtCK,KAAK,iBACND,IAAA,CAACF;AACC;AACA;AAAA;EAAA,GACIG,KAAK;EACTC,cAAc,EAAEL;AAAO,CACxB,CACF;AAEH,eAAeD,IAAI","ignoreList":[]}

package/build/web/shared/components/Modal/base-theme.scss

@@ -0,0 +1,38 @@
+@use "../../../styles/mixins" as *;
+
+*,
+.context,
+.ad.hoc {
+  &.overlay {
+    background: #eee;
+    height: 100%;
+    left: 0;
+    opacity: 0.8;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: $zIndexOfDefaultModalOverlay;
+
+    &:focus { outline: none; }
+  }
+
+  &.container {
+    background: #fff;
+    box-shadow: 0 0 14px 1px rgb(38 38 40 / 15%);
+    border-radius: 0.3em;
+    max-height: 95vh;
+    max-width: $screen-md;
+    overflow: hidden;
+    padding: 0.6em 1.2em;
+    width: 480px;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: $zIndexOfDefaultModalOverlay + 1;
+
+    @include xs-to-lg {
+      max-width: 95vw;
+    }
+  }
+}

package/build/web/shared/components/Modal/index.js

@@ -0,0 +1,128 @@
+import { useEffect, useMemo, useRef } from 'react';
+import ReactDom from 'react-dom';
+import themed from '@dr.pogodin/react-themes';
+import baseTheme from "./base-theme.scss";
+import S from "./styles.scss";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The `<Modal>` component implements a simple themeable modal window, wrapped
+ * into the default theme. `<BaseModal>` exposes the base non-themed component.
+ * **Children:** Component children are rendered as the modal content.
+ * @param {object} props Component properties. Beside props documented below,
+ *  [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties) are supported as well.
+ * @param {function} [props.onCancel] The callback to trigger when user
+ * clicks outside the modal, or presses Escape. It is expected to hide the
+ * modal.
+ * @param {ModalTheme} [props.theme] _Ad hoc_ theme.
+ */
+const BaseModal = ({
+  cancelOnScrolling,
+  children,
+  containerStyle,
+  dontDisableScrolling,
+  onCancel,
+  overlayStyle,
+  style,
+  testId,
+  testIdForOverlay,
+  theme
+}) => {
+  const containerRef = useRef(null);
+  const overlayRef = useRef(null);
+
+  // Sets up modal cancellation of scrolling, if opted-in.
+  useEffect(() => {
+    if (cancelOnScrolling && onCancel) {
+      window.addEventListener('scroll', onCancel);
+      window.addEventListener('wheel', onCancel);
+    }
+    return () => {
+      if (cancelOnScrolling && onCancel) {
+        window.removeEventListener('scroll', onCancel);
+        window.removeEventListener('wheel', onCancel);
+      }
+    };
+  }, [cancelOnScrolling, onCancel]);
+
+  // Disables window scrolling, if it is not opted-out.
+  useEffect(() => {
+    if (!dontDisableScrolling) {
+      document.body.classList.add(S.scrollingDisabledByModal);
+    }
+    return () => {
+      if (!dontDisableScrolling) {
+        document.body.classList.remove(S.scrollingDisabledByModal);
+      }
+    };
+  }, [dontDisableScrolling]);
+  const focusLast = useMemo(() => /*#__PURE__*/_jsx("div", {
+    onFocus: () => {
+      const elems = containerRef.current.querySelectorAll('*');
+      for (let i = elems.length - 1; i >= 0; --i) {
+        elems[i].focus();
+        if (document.activeElement === elems[i]) return;
+      }
+      overlayRef.current?.focus();
+    }
+    // TODO: Have a look at this later.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+    ,
+    tabIndex: 0
+  }), []);
+  return /*#__PURE__*/ReactDom.createPortal(/*#__PURE__*/_jsxs("div", {
+    children: [focusLast, /*#__PURE__*/_jsx("div", {
+      "aria-label": "Cancel",
+      className: theme.overlay,
+      "data-testid": process.env.NODE_ENV === 'production' ? undefined : testIdForOverlay,
+      onClick: e => {
+        if (onCancel) {
+          onCancel();
+          e.stopPropagation();
+        }
+      },
+      onKeyDown: e => {
+        if (e.key === 'Escape' && onCancel) {
+          onCancel();
+          e.stopPropagation();
+        }
+      },
+      ref: node => {
+        if (node && node !== overlayRef.current) {
+          overlayRef.current = node;
+          node.focus();
+        }
+      },
+      role: "button",
+      style: overlayStyle,
+      tabIndex: 0
+    }), /*#__PURE__*/_jsx("div", {
+      // eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+      "aria-modal": "true",
+      className: theme.container,
+      "data-testid": process.env.NODE_ENV === 'production' ? undefined : testId,
+      onClick: e => {
+        e.stopPropagation();
+      },
+      onWheel: event => {
+        event.stopPropagation();
+      },
+      ref: containerRef,
+      role: "dialog",
+      style: style ?? containerStyle,
+      children: children
+    }), /*#__PURE__*/_jsx("div", {
+      onFocus: () => {
+        overlayRef.current?.focus();
+      }
+      // TODO: Have a look at this later.
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: 0
+    }), focusLast]
+  }), document.body);
+};
+export default themed(BaseModal, 'Modal', baseTheme);
+
+/* Non-themed version of the Modal. */
+export { BaseModal };
+//# sourceMappingURL=index.js.map

package/build/web/shared/components/Modal/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["useEffect","useMemo","useRef","ReactDom","themed","baseTheme","S","jsx","_jsx","jsxs","_jsxs","BaseModal","cancelOnScrolling","children","containerStyle","dontDisableScrolling","onCancel","overlayStyle","style","testId","testIdForOverlay","theme","containerRef","overlayRef","window","addEventListener","removeEventListener","document","body","classList","add","scrollingDisabledByModal","remove","focusLast","onFocus","elems","current","querySelectorAll","i","length","focus","activeElement","tabIndex","createPortal","className","overlay","process","env","NODE_ENV","undefined","onClick","e","stopPropagation","onKeyDown","key","ref","node","role","container","onWheel","event"],"sources":["../../../../../src/shared/components/Modal/index.tsx"],"sourcesContent":["import {\n  type CSSProperties,\n  type FunctionComponent,\n  type ReactNode,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react';\n\nimport ReactDom from 'react-dom';\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\nimport S from './styles.scss';\n\ntype PropsT = {\n  cancelOnScrolling?: boolean;\n  children?: ReactNode;\n  dontDisableScrolling?: boolean;\n  onCancel?: () => void;\n  overlayStyle?: CSSProperties;\n  style?: CSSProperties;\n  testId?: string;\n  testIdForOverlay?: string;\n  theme: Theme<'container' | 'overlay'>;\n\n  /** @deprecated */\n  containerStyle?: CSSProperties;\n};\n\n/**\n * The `<Modal>` component implements a simple themeable modal window, wrapped\n * into the default theme. `<BaseModal>` exposes the base non-themed component.\n * **Children:** Component children are rendered as the modal content.\n * @param {object} props Component properties. Beside props documented below,\n *  [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties) are supported as well.\n * @param {function} [props.onCancel] The callback to trigger when user\n * clicks outside the modal, or presses Escape. It is expected to hide the\n * modal.\n * @param {ModalTheme} [props.theme] _Ad hoc_ theme.\n */\nconst BaseModal: FunctionComponent<PropsT> = ({\n  cancelOnScrolling,\n  children,\n  containerStyle,\n  dontDisableScrolling,\n  onCancel,\n  overlayStyle,\n  style,\n  testId,\n  testIdForOverlay,\n  theme,\n}) => {\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const overlayRef = useRef<HTMLDivElement | null>(null);\n\n  // Sets up modal cancellation of scrolling, if opted-in.\n  useEffect(() => {\n    if (cancelOnScrolling && onCancel) {\n      window.addEventListener('scroll', onCancel);\n      window.addEventListener('wheel', onCancel);\n    }\n    return () => {\n      if (cancelOnScrolling && onCancel) {\n        window.removeEventListener('scroll', onCancel);\n        window.removeEventListener('wheel', onCancel);\n      }\n    };\n  }, [cancelOnScrolling, onCancel]);\n\n  // Disables window scrolling, if it is not opted-out.\n  useEffect(() => {\n    if (!dontDisableScrolling) {\n      document.body.classList.add(S.scrollingDisabledByModal);\n    }\n    return () => {\n      if (!dontDisableScrolling) {\n        document.body.classList.remove(S.scrollingDisabledByModal);\n      }\n    };\n  }, [dontDisableScrolling]);\n\n  const focusLast = useMemo(() => (\n    <div\n      onFocus={() => {\n        const elems = containerRef.current!.querySelectorAll('*');\n        for (let i = elems.length - 1; i >= 0; --i) {\n          (elems[i] as HTMLElement).focus();\n          if (document.activeElement === elems[i]) return;\n        }\n        overlayRef.current?.focus();\n      }}\n      // TODO: Have a look at this later.\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n      tabIndex={0}\n    />\n  ), []);\n\n  return ReactDom.createPortal(\n    (\n      <div>\n        {focusLast}\n        <div\n          aria-label=\"Cancel\"\n          className={theme.overlay}\n          data-testid={\n            process.env.NODE_ENV === 'production'\n              ? undefined : testIdForOverlay\n          }\n          onClick={(e) => {\n            if (onCancel) {\n              onCancel();\n              e.stopPropagation();\n            }\n          }}\n          onKeyDown={(e) => {\n            if (e.key === 'Escape' && onCancel) {\n              onCancel();\n              e.stopPropagation();\n            }\n          }}\n          ref={(node) => {\n            if (node && node !== overlayRef.current) {\n              overlayRef.current = node;\n              node.focus();\n            }\n          }}\n          role=\"button\"\n          style={overlayStyle}\n          tabIndex={0}\n        />\n        {\n          // NOTE: These rules are disabled because our intention is to keep\n          // the element non-interactive (thus not on the keyboard focus chain),\n          // and it has `onClick` handler merely to stop propagation of click\n          // events to its parent container. This is needed because, for example\n          // when the modal is wrapped into an interactive element we don't want\n          // any clicks inside the modal to bubble-up to that parent element\n          // (because visually and logically the modal dialog does not belong\n          // to its parent container, where it technically belongs from\n          // the HTML mark-up perpective).\n        }\n        <div // eslint-disable-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions\n          aria-modal=\"true\"\n          className={theme.container}\n          data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}\n          onClick={(e) => {\n            e.stopPropagation();\n          }}\n          onWheel={(event) => {\n            event.stopPropagation();\n          }}\n          ref={containerRef}\n          role=\"dialog\"\n          style={style ?? containerStyle}\n        >\n          {children}\n        </div>\n        <div\n          onFocus={() => {\n            overlayRef.current?.focus();\n          }}\n          // TODO: Have a look at this later.\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n          tabIndex={0}\n        />\n        {focusLast}\n      </div>\n    ),\n    document.body,\n  );\n};\n\nexport default themed(BaseModal, 'Modal', baseTheme);\n\n/* Non-themed version of the Modal. */\nexport { BaseModal };\n"],"mappings":"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","ignoreList":[]}

package/build/web/shared/components/Modal/styles.scss

@@ -0,0 +1,3 @@
+.scrollingDisabledByModal {
+  overflow: hidden;
+}

package/build/web/shared/components/NavLink.js

@@ -0,0 +1,13 @@
+import { NavLink as RrNavLink } from 'react-router';
+import GenericLink from "./GenericLink";
+import { jsx as _jsx } from "react/jsx-runtime";
+const NavLink = props => /*#__PURE__*/_jsx(GenericLink
+// TODO: I guess, we better re-write it to avoid the props spreading,
+// but no need to spend time on it right now.
+// eslint-disable-next-line react/jsx-props-no-spreading
+, {
+  ...props,
+  routerLinkType: RrNavLink
+});
+export default NavLink;
+//# sourceMappingURL=NavLink.js.map

package/build/web/shared/components/NavLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavLink.js","names":["NavLink","RrNavLink","GenericLink","jsx","_jsx","props","routerLinkType"],"sources":["../../../../src/shared/components/NavLink.tsx"],"sourcesContent":["import { type NavLinkProps, NavLink as RrNavLink } from 'react-router';\n\nimport GenericLink, { type PropsT as GenericLinkPropsT } from './GenericLink';\n\ntype PropsT = Omit<GenericLinkPropsT, 'routerLinkType'> & NavLinkProps;\n\nconst NavLink: React.FunctionComponent<PropsT>\n  = (props) => (\n    <GenericLink\n      // TODO: I guess, we better re-write it to avoid the props spreading,\n      // but no need to spend time on it right now.\n      // eslint-disable-next-line react/jsx-props-no-spreading\n      {...props}\n      routerLinkType={RrNavLink}\n    />\n  );\n\nexport default NavLink;\n"],"mappings":"AAAA,SAA4BA,OAAO,IAAIC,SAAS,QAAQ,cAAc;AAEtE,OAAOC,WAAW;AAA4D,SAAAC,GAAA,IAAAC,IAAA;AAI9E,MAAMJ,OAAwC,GACzCK,KAAK,iBACND,IAAA,CAACF;AACC;AACA;AACA;AAAA;EAAA,GACIG,KAAK;EACTC,cAAc,EAAEL;AAAU,CAC3B,CACF;AAEH,eAAeD,OAAO","ignoreList":[]}

package/build/web/shared/components/PageLayout/base-theme.scss

@@ -0,0 +1,30 @@
+/**
+ * Base theme: symmetric 3-columns layout, with the center column occupying all
+ * screen up to mid screen size. For larger screen sizes the main column is
+ * limited by the mid screen size, and the free space is filled with side
+ * columns on left and right.
+ */
+
+@use "../../../styles/mixins" as *;
+
+*,
+.context,
+.ad.hoc {
+  &.container {
+    display: flex;
+    min-height: 100vh;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  &.mainPanel {
+    overflow: hidden;
+    padding: 1.2em;
+    width: $screen-md;
+  }
+
+  &.sidePanel {
+    flex: 1;
+    overflow: hidden;
+  }
+}

package/build/web/shared/components/PageLayout/index.js

@@ -0,0 +1,38 @@
+import themed from '@dr.pogodin/react-themes';
+import baseTheme from "./base-theme.scss";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Simple and themeable page layout. It keeps the main content centered in
+ * a column of limited width, which fills entire viewport on small screens
+ * (under `$screen-md = 1024px` size). At larger screens the column keeps
+ * `$screen-md` size, and it is centered at the page, surrounded by side
+ * panels, where additional content can be displayed.
+ *
+ * **Children:** Component children are rendered as the content of main panel.
+ * @param {object} [props] Component properties.
+ * @param {Node} [props.leftSidePanelContent] The content for left side panel.
+ * @param {Node} [props.rightSidePanelContent] The content for right side panel.
+ * @param {PageLayoutTheme} [props.theme] _Ad hoc_ theme.
+ * @param {...any} [props....]
+ * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
+ */
+const PageLayout = ({
+  children,
+  leftSidePanelContent,
+  rightSidePanelContent,
+  theme
+}) => /*#__PURE__*/_jsxs("div", {
+  className: theme.container,
+  children: [/*#__PURE__*/_jsx("div", {
+    className: [theme.sidePanel, theme.leftSidePanel].join(' '),
+    children: leftSidePanelContent
+  }), /*#__PURE__*/_jsx("div", {
+    className: theme.mainPanel,
+    children: children
+  }), /*#__PURE__*/_jsx("div", {
+    className: [theme.sidePanel, theme.rightSidePanel].join(' '),
+    children: rightSidePanelContent
+  })]
+});
+export default themed(PageLayout, 'PageLayout', baseTheme);
+//# sourceMappingURL=index.js.map

package/build/web/shared/components/PageLayout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["themed","baseTheme","jsx","_jsx","jsxs","_jsxs","PageLayout","children","leftSidePanelContent","rightSidePanelContent","theme","className","container","sidePanel","leftSidePanel","join","mainPanel","rightSidePanel"],"sources":["../../../../../src/shared/components/PageLayout/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport themed, { type Theme } from '@dr.pogodin/react-themes';\n\nimport baseTheme from './base-theme.scss';\n\ntype ThemeKeyT = 'container' | 'leftSidePanel' | 'mainPanel' | 'rightSidePanel'\n  | 'sidePanel';\n\ntype PropsT = {\n  children?: ReactNode;\n  leftSidePanelContent?: ReactNode;\n  rightSidePanelContent?: ReactNode;\n  theme: Theme<ThemeKeyT>;\n};\n\n/**\n * Simple and themeable page layout. It keeps the main content centered in\n * a column of limited width, which fills entire viewport on small screens\n * (under `$screen-md = 1024px` size). At larger screens the column keeps\n * `$screen-md` size, and it is centered at the page, surrounded by side\n * panels, where additional content can be displayed.\n *\n * **Children:** Component children are rendered as the content of main panel.\n * @param {object} [props] Component properties.\n * @param {Node} [props.leftSidePanelContent] The content for left side panel.\n * @param {Node} [props.rightSidePanelContent] The content for right side panel.\n * @param {PageLayoutTheme} [props.theme] _Ad hoc_ theme.\n * @param {...any} [props....]\n * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)\n */\nconst PageLayout: React.FunctionComponent<PropsT> = ({\n  children,\n  leftSidePanelContent,\n  rightSidePanelContent,\n  theme,\n}) => (\n  <div className={theme.container}>\n    <div className={[theme.sidePanel, theme.leftSidePanel].join(' ')}>\n      {leftSidePanelContent}\n    </div>\n    <div className={theme.mainPanel}>\n      {children}\n    </div>\n    <div className={[theme.sidePanel, theme.rightSidePanel].join(' ')}>\n      {rightSidePanelContent}\n    </div>\n  </div>\n);\n\nexport default themed(PageLayout, 'PageLayout', baseTheme);\n"],"mappings":"AAEA,OAAOA,MAAM,MAAsB,0BAA0B;AAE7D,OAAOC,SAAS;AAA0B,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAY1C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,UAA2C,GAAGA,CAAC;EACnDC,QAAQ;EACRC,oBAAoB;EACpBC,qBAAqB;EACrBC;AACF,CAAC,kBACCL,KAAA;EAAKM,SAAS,EAAED,KAAK,CAACE,SAAU;EAAAL,QAAA,gBAC9BJ,IAAA;IAAKQ,SAAS,EAAE,CAACD,KAAK,CAACG,SAAS,EAAEH,KAAK,CAACI,aAAa,CAAC,CAACC,IAAI,CAAC,GAAG,CAAE;IAAAR,QAAA,EAC9DC;EAAoB,CAClB,CAAC,eACNL,IAAA;IAAKQ,SAAS,EAAED,KAAK,CAACM,SAAU;IAAAT,QAAA,EAC7BA;EAAQ,CACN,CAAC,eACNJ,IAAA;IAAKQ,SAAS,EAAE,CAACD,KAAK,CAACG,SAAS,EAAEH,KAAK,CAACO,cAAc,CAAC,CAACF,IAAI,CAAC,GAAG,CAAE;IAAAR,QAAA,EAC/DE;EAAqB,CACnB,CAAC;AAAA,CACH,CACN;AAED,eAAeT,MAAM,CAACM,UAAU,EAAE,YAAY,EAAEL,SAAS,CAAC","ignoreList":[]}