@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/data-summary/DataSummary.module.css

@@ -1,51 +0,0 @@
-.container {
-  padding: var(--spacing-lg);
-  display: inline-flex;
-  flex-direction: column;
-  gap: var(--spacing-sm);
-}
-
-.default {
-  background-color: var(--opac-bg-default);
-}
-
-.primary {
-  background-color: var(--color-primary);
-  color: var(--color-text-on-primary);
-}
-
-.label {
-  font-weight: 500;
-  padding-right: var(--spacing-sm);
-  color: var(--color-text-secondary);
-}
-
-.label,
-.value {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-}
-
-.container table td:first-child {
-  width: 1px;
-  white-space: nowrap;
-  padding-right: 10px;
-}
-.container table td {
-  vertical-align: top;
-  padding: 5px 0px;
-}
-
-.container table ul {
-  margin: 0;
-  padding: 0;
-}
-
-.container ul li {
-  list-style-position: inside;
-}
-.container svg {
-  height: 14px;
-  width: auto;
-}

package/dist/components/filter-field/FilterField.cjs

@@ -1,174 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var lucideReact = require('lucide-react');
-var Popover = require('../popover/Popover');
-var Input = require('../input/Input');
-var Menu = require('../menu/Menu');
-var MultiSelect = require('../multi-select/MultiSelect');
-var Select = require('../select/Select');
-var styles = require('./FilterField.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const LABELS = {
-  is: "is",
-  isNot: "not",
-  contains: "contains",
-  notContains: "not contain",
-  startsWith: "starts with",
-  endsWith: "ends with",
-  gt: ">",
-  lt: "<",
-  gte: "\u2265",
-  lte: "\u2264",
-  in: "",
-  notIn: "not in",
-  isEmpty: "empty",
-  isNotEmpty: "not empty"
-};
-const DEFAULT_TEXT_OPERATORS = [
-  "is",
-  "isNot",
-  "contains",
-  "notContains",
-  "startsWith",
-  "endsWith",
-  "isEmpty",
-  "isNotEmpty"
-];
-const NUMBER_OPERATORS = [
-  "is",
-  "isNot",
-  "gt",
-  "lt",
-  "gte",
-  "lte",
-  "isEmpty",
-  "isNotEmpty"
-];
-function OperatorDropdown({
-  value,
-  onChange,
-  operators,
-  size = "sm",
-  disabled
-}) {
-  const popRef = react.useRef(null);
-  const [activeIndex, setActiveIndex] = react.useState(() => Math.max(0, operators.indexOf(value)));
-  const handleSelect = (op) => {
-    var _a;
-    onChange(op);
-    setActiveIndex(operators.indexOf(op));
-    (_a = popRef.current) == null ? void 0 : _a.close();
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Popover.Popover,
-    {
-      ref: popRef,
-      minWidth: "220px",
-      trigger: (toggle, icon) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: toggle,
-          disabled,
-          "aria-label": "Change operator",
-          className: `${styles__default.default.operatorTrigger} ${styles__default.default[size]}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.operatorText, children: LABELS[value] }),
-            icon
-          ]
-        }
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: operators.map((op) => {
-        const selected = op === value;
-        return /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: selected, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: () => handleSelect(op), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: selected ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: 16 }) : null }),
-          LABELS[op]
-        ] }) }, op);
-      }) })
-    }
-  );
-}
-function FilterField({
-  field,
-  control,
-  operator,
-  onChange,
-  operators,
-  options = [],
-  single = true,
-  value = control === "select" ? single ? null : [] : "",
-  size = "sm",
-  label,
-  placeholder = "Type value\u2026",
-  disabled,
-  ...inputProps
-}) {
-  const ops = react.useMemo(() => operators != null ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
-  const [op, setOp] = react.useState(operator);
-  const [val, setVal] = react.useState(value);
-  react.useEffect(() => {
-    onChange({ field, operator: op, value: val });
-  }, [field, op, val, onChange]);
-  const emitValue = react.useCallback((next) => setVal(next), []);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ` ${styles__default.default.filterField} ${styles__default.default[size]}`, children: [
-    label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.label} ${styles__default.default[size]}`, children: label }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      OperatorDropdown,
-      {
-        value: op,
-        onChange: setOp,
-        operators: ops,
-        size,
-        disabled
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${control === "input" ? "" : styles__default.default.valueWrapper}`, children: control === "input" ? /* @__PURE__ */ jsxRuntime.jsx(
-      Input.Input,
-      {
-        ...inputProps,
-        value: val != null ? val : "",
-        onChange: (e) => emitValue(e.currentTarget.value),
-        inputSize: size,
-        placeholder,
-        minWidth: "120px",
-        disabled,
-        onClear: () => emitValue("")
-      }
-    ) : single ? /* @__PURE__ */ jsxRuntime.jsx(
-      Select.Select,
-      {
-        options,
-        selectedValue: val != null ? val : null,
-        onChange: (v) => emitValue(v),
-        placeholder,
-        size,
-        variant: "inline",
-        onClear: () => emitValue("")
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      MultiSelect.MultiSelect,
-      {
-        options,
-        size,
-        variant: "inline",
-        selectedValues: Array.isArray(val) ? val : [],
-        onChange: (v) => {
-          const current = new Set(Array.isArray(val) ? val : []);
-          current.has(v) ? current.delete(v) : current.add(v);
-          emitValue(Array.from(current));
-        },
-        onClear: () => emitValue([]),
-        children: placeholder
-      }
-    ) })
-  ] });
-}
-
-exports.FilterField = FilterField;
-exports.NUMBER_OPERATORS = NUMBER_OPERATORS;

package/dist/components/headline/Headline.cjs

@@ -1,47 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./Headline.module.css');
-var severity = require('../../constants/severity');
-var Icon = require('../icon/Icon');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function Headline({
-  size = 2,
-  marker,
-  disableMargin,
-  children,
-  severity: severity$1,
-  weight = 600,
-  subHeadline,
-  addition,
-  icon
-}) {
-  const Tag = `h${size}`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    " ",
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.headlineContainer, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        Tag,
-        {
-          style: {
-            "--font-weight": weight,
-            "--marker-color": severity$1 ? severity.SeverityBgColor[severity$1] : void 0
-          },
-          className: ` ${styles__default.default.headline} ${disableMargin ? styles__default.default.noMargin : void 0} ${marker ? `${styles__default.default.marker} ` : void 0}`,
-          children: [
-            icon || severity$1 && !marker ? /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { customIcon: icon, severity: severity$1 }) : null,
-            children
-          ]
-        }
-      ),
-      addition
-    ] }),
-    subHeadline && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.subHeadline, children: subHeadline })
-  ] });
-}
-
-exports.Headline = Headline;

package/dist/components/icon/Icon.cjs

@@ -1,27 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var styles = require('./Icon.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const SeverityIcon = {
-  neutral: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
-  success: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleCheck, {}),
-  error: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleX, {}),
-  info: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Info, {}),
-  warning: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleAlert, {}),
-  brand: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Building2, {})
-};
-function Icon({ severity, label, customIcon }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.icon} ${severity ? styles__default.default[severity] : ""} dbc-icon`, children: customIcon ? customIcon : severity ? SeverityIcon[severity] : null }),
-    label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
-  ] });
-}
-
-exports.Icon = Icon;
-exports.SeverityIcon = SeverityIcon;

package/dist/components/input/Input.cjs

@@ -1,48 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('../input/Input.module.css');
-var ClearButton = require('../clear-button/ClearButton');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function mergeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === "function") ref(node);
-      else ref.current = node;
-    }
-  };
-}
-const Input = react.forwardRef(function Input2({ label, icon, minWidth, inputSize, variant = "outlined", autoFocus, onClear, ...rest }, ref) {
-  const inputRef = react.useRef(null);
-  react.useEffect(() => {
-    var _a;
-    if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
-  }, [autoFocus]);
-  console.log(rest);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
-    label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: label, children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.inputWrapper, children: [
-      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.icon, children: icon }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "input",
-        {
-          id: label,
-          ...rest,
-          ref: mergeRefs(inputRef, ref),
-          style: { minWidth: minWidth || "200px" },
-          className: `${styles__default.default.input} ${icon ? styles__default.default.inputWithIcon : ""} ${inputSize ? styles__default.default[inputSize] : ""} ${styles__default.default[variant]}`
-        }
-      ),
-      onClear && rest.value && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear, absolute: true })
-    ] })
-  ] });
-});
-Input.displayName = "Input";
-
-exports.Input = Input;

package/dist/components/input/Input.d.ts

@@ -1,13 +0,0 @@
-import * as React from 'react';
-import type { Size } from '../../types/sizes.types';
-export type InputVariant = 'outlined' | 'filled' | 'standalone';
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    label?: string;
-    icon?: React.ReactNode;
-    autoFocus?: boolean;
-    minWidth?: string;
-    inputSize?: Size;
-    variant?: InputVariant;
-    onClear?: () => void;
-}
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input/Input.js

@@ -1,42 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useEffect } from 'react';
-import styles from '../input/Input.module.css';
-import { ClearButton } from '../clear-button/ClearButton';
-
-function mergeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === "function") ref(node);
-      else ref.current = node;
-    }
-  };
-}
-const Input = forwardRef(function Input2({ label, icon, minWidth, inputSize, variant = "outlined", autoFocus, onClear, ...rest }, ref) {
-  const inputRef = useRef(null);
-  useEffect(() => {
-    var _a;
-    if (autoFocus) (_a = inputRef.current) == null ? void 0 : _a.focus();
-  }, [autoFocus]);
-  console.log(rest);
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: label, children: label }),
-    /* @__PURE__ */ jsxs("div", { className: styles.inputWrapper, children: [
-      icon && /* @__PURE__ */ jsx("span", { className: styles.icon, children: icon }),
-      /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: label,
-          ...rest,
-          ref: mergeRefs(inputRef, ref),
-          style: { minWidth: minWidth || "200px" },
-          className: `${styles.input} ${icon ? styles.inputWithIcon : ""} ${inputSize ? styles[inputSize] : ""} ${styles[variant]}`
-        }
-      ),
-      onClear && rest.value && /* @__PURE__ */ jsx(ClearButton, { onClick: onClear, absolute: true })
-    ] })
-  ] });
-});
-Input.displayName = "Input";
-
-export { Input };

package/dist/components/input/Input.module.css

@@ -1,112 +0,0 @@
-/* Wrapper */
-.inputWrapper {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  color: var(--color-text);
-}
-
-/* Input */
-.inputWrapper input {
-  color: inherit;
-  font-family: var(--font-family);
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-normal);
-  box-sizing: border-box;
-
-  background-color: var(--color-surface);
-  border: var(--border-width-thin) solid var(--color-border);
-  border-radius: var(--border-radius-default);
-
-  /* density-aware paddings/heights */
-  padding-inline: var(--control-padding-x);
-  padding-block: calc(var(--control-padding-y) + var(--density));
-  min-block-size: calc(var(--component-size-md) + var(--density));
-
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    border-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard);
-}
-
-/* Placeholder */
-.inputWrapper input::placeholder {
-  color: var(--color-text-muted);
-}
-
-/* Hover & focus */
-.inputWrapper input:hover {
-  border-color: var(--color-border-strong);
-}
-.inputWrapper input:focus-visible {
-  outline: none;
-  border-color: var(--color-border-selected);
-  box-shadow: var(--focus-ring);
-}
-
-/* Filled (borderless) variant for embedded contexts */
-.inputWrapper input.filled {
-  background-color: var(--color-surface);
-  border: 0;
-}
-
-/* Standalone / elevated variant */
-.inputWrapper input.standalone {
-  border-radius: var(--border-radius-rounded);
-  background-color: var(--color-surface);
-  box-shadow: var(--shadow-xs), var(--shadow-md);
-}
-.inputWrapper input.standalone:focus-visible {
-  outline: none;
-  border-color: var(--color-border-selected);
-  box-shadow: var(--focus-ring);
-}
-
-/* Sizes */
-.inputWrapper input.sm {
-  min-block-size: calc(var(--component-size-sm) + var(--density));
-  font-size: var(--font-size-sm);
-}
-.inputWrapper input.md {
-  min-block-size: calc(var(--component-size-md) + var(--density));
-  font-size: var(--font-size-sm);
-}
-.inputWrapper input.lg {
-  min-block-size: calc(var(--component-size-lg) + var(--density));
-  font-size: var(--font-size-lg);
-}
-
-/* With leading icon */
-.inputWrapper input.inputWithIcon {
-  padding-inline-start: calc(var(--icon-size) + var(--spacing-lg));
-}
-
-/* Icon */
-.icon {
-  position: absolute;
-  inset-inline-start: var(--spacing-md);
-  top: 50%;
-  transform: translateY(-50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
-  pointer-events: none;
-  color: var(--color-secondary);
-}
-.icon svg {
-  color: inherit;
-  inline-size: var(--icon-size);
-  block-size: var(--icon-size);
-}
-
-/* Outlined (transparent) variant */
-.outlined {
-  background-color: transparent;
-}
-
-/* Date/time picker indicator (WebKit) */
-.inputWrapper input[type='datetime-local']::-webkit-calendar-picker-indicator {
-  filter: invert(0.7);
-}

package/dist/components/menu/Menu.cjs

@@ -1,96 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var styles = require('./Menu.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-const MenuBase = React__namespace.forwardRef(
-  ({ children, className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
-    "ul",
-    {
-      ref,
-      role: "menu",
-      className: [styles__default.default.container, className].filter(Boolean).join(" "),
-      ...props,
-      children
-    }
-  )
-);
-MenuBase.displayName = "Menu";
-const isInteractiveEl = (el) => React__namespace.isValidElement(el) && (typeof el.type === "string" ? el.type === "a" || el.type === "button" : true);
-const MenuItem = React__namespace.forwardRef(
-  ({ children, active, disabled, className, ...liProps }, ref) => {
-    if (isInteractiveEl(children)) {
-      const child = children;
-      const childClass = [styles__default.default.item, active ? styles__default.default.active : ""].filter(Boolean).join(" ");
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        "li",
-        {
-          ref,
-          role: "none",
-          className: [styles__default.default.row, className].filter(Boolean).join(" "),
-          ...liProps,
-          children: React__namespace.cloneElement(child, {
-            role: "menuitem",
-            tabIndex: -1,
-            "aria-selected": active || void 0,
-            "aria-disabled": disabled || void 0,
-            className: [child.props.className, styles__default.default.interactive, childClass].filter(Boolean).join(" ")
-          })
-        }
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "li",
-      {
-        ref,
-        role: "none",
-        className: [styles__default.default.row, className].filter(Boolean).join(" "),
-        ...liProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "button",
-          {
-            role: "menuitem",
-            tabIndex: -1,
-            "aria-selected": active || void 0,
-            "aria-disabled": disabled || void 0,
-            className: [styles__default.default.interactive, styles__default.default.item, active ? styles__default.default.active : ""].filter(Boolean).join(" "),
-            type: "button",
-            disabled,
-            children
-          }
-        )
-      }
-    );
-  }
-);
-MenuItem.displayName = "Menu.Item";
-const Menu = Object.assign(
-  MenuBase,
-  { Item: MenuItem }
-);
-
-exports.Menu = Menu;

package/dist/components/multi-select/MultiSelect.cjs

@@ -1,48 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var lucideReact = require('lucide-react');
-var Button = require('../button/Button');
-var Menu = require('../menu/Menu');
-var Popover = require('../popover/Popover');
-var Chip = require('../chip/Chip');
-var ClearButton = require('../clear-button/ClearButton');
-
-function MultiSelect({
-  options,
-  selectedValues = [],
-  onChange,
-  children,
-  variant = "outlined",
-  size = "md",
-  onClear
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Popover.Popover,
-    {
-      trigger: (onClick, icon) => /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { variant, onClick, size, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          children || "V\xE6lg",
-          " ",
-          selectedValues.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Chip.Chip, { size: "sm", severity: "info", children: `${selectedValues.length}` }) : null
-        ] }),
-        onClear && selectedValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear }),
-        icon
-      ] }),
-      children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: selectedValues == null ? void 0 : selectedValues.includes(option.value), children: /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: () => {
-            onChange(option.value);
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { style: { pointerEvents: "none", display: "flex", alignItems: "center" }, children: (selectedValues == null ? void 0 : selectedValues.includes(option.value)) ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, {}) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Square, {}) }),
-            option.label
-          ]
-        }
-      ) }, option.value)) })
-    }
-  );
-}
-
-exports.MultiSelect = MultiSelect;

package/dist/components/multi-select/MultiSelect.d.ts

@@ -1,18 +0,0 @@
-import { ButtonVariant } from '../button/Button';
-interface MultiselectOption {
-    label: string;
-    value: string;
-    icon?: React.ReactNode;
-}
-interface MultiSelectProps {
-    options: MultiselectOption[];
-    selectedValues: string[];
-    onChange: (selectedValue: string) => void;
-    placeholder?: string;
-    children?: React.ReactNode;
-    variant?: ButtonVariant;
-    size?: 'sm' | 'md' | 'lg';
-    onClear?: () => void;
-}
-export declare function MultiSelect({ options, selectedValues, onChange, children, variant, size, onClear, }: MultiSelectProps): React.ReactNode;
-export {};