@stoplight/elements-core 9.0.12-beta-0.1 → 9.0.13

package/src/components/TryIt/Auth/Auth.tsx

@@ -1,169 +0,0 @@
-import { Button, Menu, MenuItems, Panel } from '@stoplight/mosaic';
-import { HttpSecurityScheme } from '@stoplight/types';
-import * as React from 'react';
-
-import { getReadableSecurityName, getReadableSecurityNames, shouldAddKey } from '../../../utils/oas/security';
-import { APIKeyAuth } from './APIKeyAuth';
-import { createUndefinedValuedSchemes, HttpSecuritySchemeWithValues } from './authentication-utils';
-import { BasicAuth } from './BasicAuth';
-import { BearerAuth } from './BearerAuth';
-import { DigestAuth } from './DigestAuth';
-import { OAuth2Auth } from './OAuth2Auth';
-
-interface TryItAuthProps {
-  operationSecuritySchemes: HttpSecurityScheme[][];
-  operationAuthValue: HttpSecuritySchemeWithValues[] | undefined;
-  setOperationAuthValue: React.Dispatch<HttpSecuritySchemeWithValues | undefined>;
-  setCurrentScheme: React.Dispatch<HttpSecuritySchemeWithValues[] | undefined>;
-}
-
-const checkViableCurrentAuth = (
-  current: HttpSecuritySchemeWithValues[] | undefined,
-  operationSecuritySchemes: HttpSecurityScheme[][],
-) => {
-  if (current === undefined) return false;
-
-  const flattened = operationSecuritySchemes.flat(1);
-  for (const element of current) {
-    if (!flattened.some(flat => flat.id === element.scheme.id)) return false;
-  }
-
-  return true;
-};
-
-const createMenuChild = (name: string, currentItemName: string | undefined, onPress: () => void) => {
-  return {
-    id: `security-scheme-${name}`,
-    title: name,
-    isChecked: name === currentItemName,
-    onPress,
-  };
-};
-
-export const TryItAuth: React.FC<TryItAuthProps> = ({
-  operationSecuritySchemes,
-  operationAuthValue,
-  setOperationAuthValue,
-  setCurrentScheme,
-}) => {
-  const filteredSecurityItems = operationSecuritySchemes.filter(
-    auth => auth.length === 0 || auth.every(scheme => securitySchemeKeys.includes(scheme.type)),
-  );
-
-  const menuName = operationAuthValue
-    ? getReadableSecurityNames(operationAuthValue.map(auth => auth.scheme))
-    : 'Security Scheme';
-
-  const currentName = operationAuthValue
-    ? getReadableSecurityNames(
-        operationAuthValue.map(auth => auth.scheme),
-        shouldAddKey(
-          operationAuthValue.map(auth => auth.scheme),
-          operationSecuritySchemes,
-        ),
-      )
-    : undefined;
-
-  const handleChange = (scheme: HttpSecurityScheme, authValue?: string) => {
-    setOperationAuthValue({ scheme, authValue });
-  };
-
-  React.useEffect(() => {
-    if (checkViableCurrentAuth(operationAuthValue, operationSecuritySchemes) === false) {
-      setCurrentScheme(createUndefinedValuedSchemes(operationSecuritySchemes[0]));
-    }
-  });
-
-  const menuItems = React.useMemo(() => {
-    const items: MenuItems = [
-      {
-        type: 'group',
-        title: 'Security Schemes',
-        children: filteredSecurityItems.map(auth =>
-          createMenuChild(
-            getReadableSecurityNames(auth, shouldAddKey(auth, operationSecuritySchemes)),
-            currentName,
-            () => setCurrentScheme(createUndefinedValuedSchemes(auth)),
-          ),
-        ),
-      },
-    ];
-
-    return items;
-  }, [currentName, filteredSecurityItems, operationSecuritySchemes, setCurrentScheme]);
-
-  if (filteredSecurityItems.length === 0) return null;
-
-  return (
-    <Panel defaultIsOpen data-test="try-it-auth">
-      <Panel.Titlebar
-        rightComponent={
-          filteredSecurityItems.length > 1 && (
-            <Menu
-              aria-label="security-schemes"
-              items={menuItems}
-              closeOnPress
-              renderTrigger={({ isOpen }) => (
-                <Button appearance="minimal" size="sm" iconRight={['fas', 'sort']} active={isOpen}>
-                  {menuName}
-                </Button>
-              )}
-            />
-          )
-        }
-      >
-        Auth
-      </Panel.Titlebar>
-      {operationAuthValue && operationAuthValue.length > 0 ? (
-        operationAuthValue.map(scheme => (
-          <SecuritySchemeComponent
-            key={scheme.scheme.key}
-            scheme={scheme.scheme}
-            onChange={(authValue?: string) => handleChange(scheme.scheme, authValue)}
-            value={scheme.authValue ?? ''}
-          />
-        ))
-      ) : (
-        <OptionalMessageContainer />
-      )}
-    </Panel>
-  );
-};
-
-const GenericMessageContainer: React.FC<{ scheme: HttpSecurityScheme }> = ({ scheme }) => {
-  return <Panel.Content data-test="auth-try-it-row">Coming Soon: {getReadableSecurityName(scheme)}</Panel.Content>;
-};
-
-const OptionalMessageContainer: React.FC = () => {
-  return <Panel.Content>No auth selected</Panel.Content>;
-};
-
-interface SecuritySchemeComponentProps {
-  scheme: HttpSecurityScheme;
-  onChange: (AuthObject: any) => void;
-  value: string;
-}
-
-const SecuritySchemeComponent: React.FC<SecuritySchemeComponentProps> = ({ scheme, ...rest }) => {
-  switch (scheme.type) {
-    case 'apiKey':
-      return <APIKeyAuth scheme={scheme} {...rest} />;
-    case 'oauth2':
-      return <OAuth2Auth scheme={scheme} {...rest} />;
-    case 'http':
-      switch (scheme.scheme) {
-        case 'basic':
-          return <BasicAuth {...rest} />;
-        case 'digest':
-          return <DigestAuth {...rest} />;
-        case 'bearer':
-          return <BearerAuth scheme={scheme} {...rest} />;
-        default:
-          return <GenericMessageContainer scheme={scheme} {...rest} />;
-      }
-    default:
-      return <GenericMessageContainer scheme={scheme} {...rest} />;
-  }
-};
-
-const securitySchemeKeys: Array<HttpSecurityScheme['type']> = ['apiKey', 'http', 'oauth2', 'openIdConnect'];

package/src/components/TryIt/Auth/AuthTokenInput.tsx

@@ -1,37 +0,0 @@
-import { Flex, Input, Text } from '@stoplight/mosaic';
-import { HttpSecurityScheme } from '@stoplight/types';
-import * as React from 'react';
-
-import { useUniqueId } from '../../../hooks/useUniqueId';
-
-interface AuthTokenInputProps {
-  onChange: (value: string) => void;
-  type: HttpSecurityScheme['type'];
-  name: string;
-  value: string;
-}
-
-export const AuthTokenInput: React.FC<AuthTokenInputProps> = ({ type, name, value, onChange }) => {
-  const inputId = useUniqueId(`id_auth_${name}_`);
-  return (
-    <>
-      <label aria-hidden="true" htmlFor={inputId}>
-        {name}
-      </label>
-      <Text mx={3}>:</Text>
-      <Flex flex={1}>
-        <Input
-          id={inputId}
-          aria-label={name}
-          appearance="minimal"
-          flex={1}
-          placeholder={type === 'oauth2' ? 'Bearer 123' : '123'}
-          value={value}
-          type="text"
-          required
-          onChange={e => onChange(e.currentTarget.value)}
-        />
-      </Flex>
-    </>
-  );
-};

package/src/components/TryIt/Auth/BasicAuth.tsx

@@ -1,62 +0,0 @@
-import { Flex, Input, Panel, Text } from '@stoplight/mosaic';
-import * as React from 'react';
-
-interface BasicAuthProps {
-  onChange: (value: string) => void;
-  value: string;
-}
-
-export const BasicAuth: React.FC<BasicAuthProps> = ({ onChange, value }) => {
-  const [username = '', password = ''] = decode(value).split(':');
-
-  const onCredentialsChange = (username: string, password: string) => {
-    onChange(encode(`${username}:${password}`));
-  };
-
-  return (
-    <Panel.Content className="ParameterGrid" data-test="auth-try-it-row">
-      <div>Username</div>
-      <Text mx={3}>:</Text>
-      <Flex flex={1}>
-        <Input
-          style={{ paddingLeft: 15 }}
-          aria-label="Username"
-          appearance="minimal"
-          flex={1}
-          placeholder="username"
-          value={username}
-          type="text"
-          required
-          onChange={e => onCredentialsChange(e.currentTarget.value, password)}
-        />
-      </Flex>
-      <div>Password</div>
-      <Text mx={3}>:</Text>
-      <Flex flex={1}>
-        <Input
-          style={{ paddingLeft: 15 }}
-          aria-label="Password"
-          appearance="minimal"
-          flex={1}
-          placeholder="password"
-          value={password}
-          type="password"
-          required
-          onChange={e => onCredentialsChange(username, e.currentTarget.value)}
-        />
-      </Flex>
-    </Panel.Content>
-  );
-};
-
-function encode(value: string) {
-  return btoa(value);
-}
-
-function decode(encoded: string) {
-  try {
-    return atob(encoded);
-  } catch {
-    return '';
-  }
-}

package/src/components/TryIt/Auth/BearerAuth.tsx

@@ -1,19 +0,0 @@
-import { Panel } from '@stoplight/mosaic';
-import { IBearerSecurityScheme } from '@stoplight/types';
-import * as React from 'react';
-
-import { AuthTokenInput } from './AuthTokenInput';
-
-interface BearerAuthProps {
-  scheme: IBearerSecurityScheme;
-  onChange: (value: string) => void;
-  value: string;
-}
-
-export const BearerAuth: React.FC<BearerAuthProps> = ({ value, onChange }) => {
-  return (
-    <Panel.Content className="ParameterGrid" data-test="auth-try-it-row">
-      <AuthTokenInput type="http" name="Token" value={value} onChange={onChange} />
-    </Panel.Content>
-  );
-};

package/src/components/TryIt/Auth/DigestAuth.tsx

@@ -1,35 +0,0 @@
-import { Panel, Text } from '@stoplight/mosaic';
-import * as React from 'react';
-
-interface DigestAuthProps {
-  onChange: (value: string) => void;
-  value: string;
-}
-
-const digestPlaceholder = `Digest username="User Name",
-            realm="testrealm@host.com",
-            nonce="dcd98b7102dd2f0e8b11d0f600bfb0c093",
-            uri="/dir/index.html",
-            qop=auth,
-            nc=00000001,
-            cnonce="0a4f113b",
-            response="6629fae49393a05397450978507c4ef1",
-            opaque="5ccc069c403ebaf9f0171e9517f40e41"
-`;
-
-export const DigestAuth: React.FC<DigestAuthProps> = ({ onChange, value }) => {
-  return (
-    <Panel.Content className="ParameterGrid" data-test="auth-try-it-row">
-      <div>Authorization</div>
-      <Text mx={3}>:</Text>
-      <textarea
-        className="sl-relative sl-z-10 sl-w-full sl-text-base sl-bg-canvas-100 sl-p-1 sl-pr-2.5 sl-pl-2.5 sl-rounded sl-border-transparent hover:sl-border-input focus:sl-border-primary sl-border"
-        aria-label="Authorization"
-        placeholder={digestPlaceholder}
-        value={value}
-        onChange={e => onChange(e.currentTarget.value)}
-        rows={9}
-      />
-    </Panel.Content>
-  );
-};

package/src/components/TryIt/Auth/OAuth2Auth.tsx

@@ -1,19 +0,0 @@
-import { Panel } from '@stoplight/mosaic';
-import { IOauth2SecurityScheme } from '@stoplight/types';
-import * as React from 'react';
-
-import { AuthTokenInput } from './AuthTokenInput';
-
-interface OAuth2AuthProps {
-  scheme: IOauth2SecurityScheme;
-  onChange: (value: string) => void;
-  value: string;
-}
-
-export const OAuth2Auth: React.FC<OAuth2AuthProps> = ({ value, onChange }) => {
-  return (
-    <Panel.Content className="ParameterGrid" data-test="auth-try-it-row">
-      <AuthTokenInput type="oauth2" name="Token" value={value} onChange={onChange} />
-    </Panel.Content>
-  );
-};

package/src/components/TryIt/Auth/authentication-utils.ts

@@ -1,113 +0,0 @@
-import {
-  Dictionary,
-  HttpSecurityScheme,
-  IApiKeySecurityScheme,
-  IBasicSecurityScheme,
-  IBearerSecurityScheme,
-  IHttpHeaderParam,
-  IHttpQueryParam,
-  IOauth2SecurityScheme,
-} from '@stoplight/types';
-import { atom, useAtom } from 'jotai';
-import { flatten, isObject, isPlainObject } from 'lodash';
-import React from 'react';
-
-import { persistAtom } from '../../../utils/jotai/persistAtom';
-import { caseInsensitivelyEquals } from '../../../utils/string';
-
-export type HttpSecuritySchemeWithValues = {
-  scheme: HttpSecurityScheme;
-  authValue: string | undefined;
-};
-
-export const isApiKeySecurityScheme = (maybeIApiKey: HttpSecurityScheme): maybeIApiKey is IApiKeySecurityScheme =>
-  isObject(maybeIApiKey) && maybeIApiKey.type === 'apiKey';
-
-export const isOAuth2SecurityScheme = (maybeIOAuth2: HttpSecurityScheme): maybeIOAuth2 is IOauth2SecurityScheme =>
-  isObject(maybeIOAuth2) && maybeIOAuth2.type === 'oauth2';
-
-export const isBasicSecurityScheme = (maybeIBasic: HttpSecurityScheme): maybeIBasic is IBasicSecurityScheme =>
-  isObject(maybeIBasic) && maybeIBasic.type === 'http' && maybeIBasic.scheme === 'basic';
-
-export const isBearerSecurityScheme = (maybeIBearer: HttpSecurityScheme): maybeIBearer is IBearerSecurityScheme =>
-  isObject(maybeIBearer) && maybeIBearer.type === 'http' && maybeIBearer.scheme === 'bearer';
-
-export const isDigestSecurityScheme = (maybeIBearer: HttpSecurityScheme): maybeIBearer is IBasicSecurityScheme =>
-  isObject(maybeIBearer) && maybeIBearer.type === 'http' && maybeIBearer.scheme === 'digest';
-
-export function filterOutAuthorizationParams(
-  queryParams: IHttpQueryParam[],
-  securitySchemes?: HttpSecurityScheme[][],
-): IHttpQueryParam[];
-export function filterOutAuthorizationParams(
-  queryParams: IHttpHeaderParam[],
-  securitySchemes?: HttpSecurityScheme[][],
-): IHttpHeaderParam[];
-export function filterOutAuthorizationParams(
-  queryParams: (IHttpQueryParam | IHttpHeaderParam)[],
-  securitySchemes: HttpSecurityScheme[][] = [],
-): (IHttpQueryParam | IHttpHeaderParam)[] {
-  const flattenedSecuritySchemes = flatten(securitySchemes);
-  const securitySchemeNames = getSecuritySchemeNames(flattenedSecuritySchemes);
-
-  return queryParams.filter(queryParam => !securitySchemeNames.some(caseInsensitivelyEquals(queryParam.name)));
-}
-
-const getSecuritySchemeNames = (securitySchemes: HttpSecurityScheme[]): string[] =>
-  securitySchemes.flatMap(scheme => {
-    if (isApiKeySecurityScheme(scheme)) {
-      return scheme.name;
-    }
-
-    if (isOAuth2SecurityScheme(scheme)) {
-      return 'Authorization';
-    }
-
-    return [];
-  });
-
-type SecuritySchemeValues = Dictionary<string>;
-
-const isSecuritySchemeValues = (
-  maybeSecuritySchemeValues: unknown,
-): maybeSecuritySchemeValues is SecuritySchemeValues => isPlainObject(maybeSecuritySchemeValues);
-
-const securitySchemeValuesAtom = persistAtom('TryIt_securitySchemeValues', atom<SecuritySchemeValues>({}));
-export const usePersistedSecuritySchemeWithValues = (): [
-  HttpSecuritySchemeWithValues[] | undefined,
-  React.Dispatch<HttpSecuritySchemeWithValues | undefined>,
-  React.Dispatch<HttpSecuritySchemeWithValues[] | undefined>,
-] => {
-  const [currentScheme, setCurrentScheme] = React.useState<HttpSecuritySchemeWithValues[] | undefined>();
-  const [securitySchemeValues, setSecuritySchemeValues] = useAtom(securitySchemeValuesAtom);
-
-  const setPersistedAuthenticationSettings = (securitySchemeWithValues: HttpSecuritySchemeWithValues | undefined) => {
-    if (securitySchemeWithValues) {
-      const key = securitySchemeWithValues.scheme.key;
-      const value = securitySchemeWithValues.authValue;
-
-      if (value !== undefined) {
-        setSecuritySchemeValues({
-          ...securitySchemeValues,
-          [key]: value,
-        });
-      }
-    }
-  };
-
-  const schemeWithPersistedValue = React.useMemo(() => {
-    if (!currentScheme) return undefined;
-    return currentScheme.map(scheme => {
-      return {
-        scheme: scheme.scheme,
-        authValue: isSecuritySchemeValues(securitySchemeValues) ? securitySchemeValues[scheme.scheme.key] : undefined,
-      };
-    });
-  }, [currentScheme, securitySchemeValues]);
-
-  return [schemeWithPersistedValue, setPersistedAuthenticationSettings, setCurrentScheme];
-};
-
-export const createUndefinedValuedSchemes = (schemes: HttpSecurityScheme[]): HttpSecuritySchemeWithValues[] => {
-  return schemes.map(scheme => ({ scheme, authValue: undefined }));
-};

package/src/components/TryIt/Body/BinaryBody.tsx

@@ -1,52 +0,0 @@
-import { SchemaTree } from '@stoplight/json-schema-tree';
-import { Choice, useChoices } from '@stoplight/json-schema-viewer';
-import { Panel } from '@stoplight/mosaic';
-import { IMediaTypeContent } from '@stoplight/types';
-import * as React from 'react';
-
-import { FileUploadParameterEditor } from '../Parameters/FileUploadParameterEditors';
-import { OneOfMenu } from './FormDataBody';
-import { BodyParameterValues } from './request-body-utils';
-
-export interface BinaryBodyProps {
-  specification?: IMediaTypeContent;
-  values: BodyParameterValues;
-  onChangeValues: (newValues: BodyParameterValues) => void;
-}
-
-export const BinaryBody: React.FC<BinaryBodyProps> = ({ specification, values, onChangeValues }) => {
-  const schema: any = React.useMemo(() => {
-    const schema = specification?.schema ?? {};
-    const tree = new SchemaTree(schema, { mergeAllOf: true, refResolver: null });
-    tree.populate();
-    return tree.root.children[0];
-  }, [specification]);
-
-  const { selectedChoice, choices, setSelectedChoice } = useChoices(schema);
-
-  const onSchemaChange = (choice: Choice) => {
-    // Erase existing values; the old and new schemas may have nothing in common.
-    onChangeValues({});
-    setSelectedChoice(choice);
-  };
-
-  return (
-    <Panel defaultIsOpen>
-      <Panel.Titlebar
-        rightComponent={<OneOfMenu choices={choices} choice={selectedChoice} onChange={onSchemaChange} />}
-      >
-        Body
-      </Panel.Titlebar>
-      <Panel.Content className="sl-overflow-y-auto ParameterGrid OperationParametersContent">
-        <FileUploadParameterEditor
-          key={'file'}
-          parameter={{ name: 'file' }}
-          value={values.file instanceof File ? values.file : undefined}
-          onChange={newValue => {
-            newValue ? onChangeValues({ file: newValue }) : onChangeValues({});
-          }}
-        />
-      </Panel.Content>
-    </Panel>
-  );
-};

package/src/components/TryIt/Body/FormDataBody.tsx

@@ -1,145 +0,0 @@
-import { isRegularNode, SchemaNode, SchemaTree } from '@stoplight/json-schema-tree';
-import { Choice, useChoices, visibleChildren } from '@stoplight/json-schema-viewer';
-import { Button, Menu, Panel } from '@stoplight/mosaic';
-import { IMediaTypeContent } from '@stoplight/types';
-import { omit } from 'lodash';
-import * as React from 'react';
-
-import { FileUploadParameterEditor } from '../Parameters/FileUploadParameterEditors';
-import { parameterSupportsFileUpload, toParameterSpec } from '../Parameters/parameter-utils';
-import { ParameterEditor } from '../Parameters/ParameterEditor';
-import { BodyParameterValues, ParameterOptional } from './request-body-utils';
-
-export interface FormDataBodyProps {
-  specification: IMediaTypeContent;
-  values: BodyParameterValues;
-  onChangeValues: (newValues: BodyParameterValues) => void;
-  onChangeParameterAllow: (newValue: ParameterOptional) => void;
-  isAllowedEmptyValues: ParameterOptional;
-}
-
-export const FormDataBody: React.FC<FormDataBodyProps> = ({
-  specification,
-  values,
-  onChangeValues,
-  onChangeParameterAllow,
-  isAllowedEmptyValues,
-}) => {
-  const schema: SchemaNode = React.useMemo(() => {
-    const schema = specification.schema ?? {};
-    const tree = new SchemaTree(schema, { mergeAllOf: true, refResolver: null });
-    tree.populate();
-    return tree.root.children[0];
-  }, [specification]);
-
-  const { selectedChoice, choices, setSelectedChoice } = useChoices(schema);
-
-  const formFieldRows = visibleChildren(selectedChoice.type);
-
-  const onSchemaChange = (choice: Choice) => {
-    // Erase existing values; the old and new schemas may have nothing in common.
-    onChangeValues({});
-    setSelectedChoice(choice);
-  };
-
-  return (
-    <Panel defaultIsOpen>
-      <Panel.Titlebar
-        rightComponent={<OneOfMenu choices={choices} choice={selectedChoice} onChange={onSchemaChange} />}
-      >
-        Body
-      </Panel.Titlebar>
-      <Panel.Content className="sl-overflow-y-auto ParameterGrid OperationParametersContent">
-        {formFieldRows
-          .filter(isRegularNode)
-          .map(toParameterSpec)
-          .map(parameter => {
-            const supportsFileUpload = parameterSupportsFileUpload(parameter);
-            const value = values[parameter.name ?? ''];
-
-            if (supportsFileUpload) {
-              return (
-                <FileUploadParameterEditor
-                  key={parameter.name}
-                  parameter={parameter}
-                  value={value instanceof File ? value : undefined}
-                  onChange={newValue =>
-                    newValue
-                      ? onChangeValues({ ...values, [parameter.name]: newValue })
-                      : onChangeValues(omit(values, parameter.name))
-                  }
-                />
-              );
-            }
-
-            return (
-              <ParameterEditor
-                key={parameter.name}
-                parameter={parameter}
-                value={typeof value === 'string' ? value : undefined}
-                onChange={value =>
-                  onChangeValues({
-                    ...values,
-                    [parameter.name]: typeof value === 'number' ? String(value) : (value as any),
-                  })
-                }
-                onChangeOptional={value => onChangeParameterAllow({ ...isAllowedEmptyValues, [parameter.name]: value })}
-                canChangeOptional={true}
-                isOptional={isAllowedEmptyValues[parameter.name] ?? false}
-              />
-            );
-          })}
-      </Panel.Content>
-    </Panel>
-  );
-};
-
-export interface OneOfMenuProps {
-  /** all of the available sub-schemas that can be picked */
-  choices: Choice[];
-
-  /** the currently selected sub-schema */
-  choice: Choice;
-
-  /** called when the selection changes */
-  onChange: (choice: Choice) => void;
-}
-
-/**
- * When the top level schema is `oneOf`, a drop-down menu that allows the user
- * to select among the sub-schemas; otherwise `null`.
- */
-export function OneOfMenu({ choices: subSchemas, choice, onChange }: OneOfMenuProps) {
-  const onSubSchemaSelect = React.useCallback(onChange, [onChange]);
-
-  const menuItems = React.useMemo(
-    () =>
-      subSchemas.map(subSchema => {
-        const label = subSchema.title;
-        return {
-          id: `request-subschema-${label}`,
-          title: label,
-          onPress: () => onSubSchemaSelect(subSchema),
-        };
-      }),
-    [subSchemas, onSubSchemaSelect],
-  );
-
-  if (!subSchemas || subSchemas.length < 2) {
-    return null;
-  }
-
-  const title = choice?.title ?? 'Variants';
-
-  return (
-    <Menu
-      aria-label={title}
-      items={menuItems}
-      renderTrigger={({ isOpen }) => (
-        <Button appearance="minimal" size="sm" iconRight={['fas', 'sort']} active={isOpen} data-testid="oneof-menu">
-          {title}
-        </Button>
-      )}
-    />
-  );
-}