@redocly/theme 0.70.0-next.2 → 0.70.0-next.3

package/lib/icons/ExpandCollapseIcon/ExpandCollapseIcon.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+declare const Icon: (props: IconProps) => React.JSX.Element;
+export declare const ExpandCollapseIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<{
+    color?: string;
+    size?: string;
+    className?: string;
+    'data-component-name'?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name" | "size" | keyof React.SVGProps<SVGSVGElement>> & {
+    color?: string;
+    size?: string;
+    className?: string;
+    'data-component-name'?: string;
+} & React.SVGProps<SVGSVGElement>, "$collapse"> & {
+    $collapse?: boolean;
+}, "data-component-name"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<{
+    color?: string;
+    size?: string;
+    className?: string;
+    'data-component-name'?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name" | "size" | keyof React.SVGProps<SVGSVGElement>> & {
+    color?: string;
+    size?: string;
+    className?: string;
+    'data-component-name'?: string;
+} & React.SVGProps<SVGSVGElement>, "$collapse"> & {
+    $collapse?: boolean;
+}, "data-component-name">>> & string & Omit<typeof Icon, keyof React.Component<any, {}, any>>;
+export {};

package/lib/icons/ExpandCollapseIcon/ExpandCollapseIcon.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandCollapseIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { className: "corner-top", d: "M12.2432 8.70703H11.2461L11.2422 4.75781L7.29297 4.75391V3.75781H12.2432V8.70703Z" }),
+    react_1.default.createElement("path", { className: "corner-bottom", d: "M4.75781 11.2422L8.70703 11.2461V12.2432H3.75781V7.29297H4.75391L4.75781 11.2422Z" })));
+exports.ExpandCollapseIcon = (0, styled_components_1.default)(Icon).attrs({
+    'data-component-name': 'icons/ExpandCollapseIcon/ExpandCollapseIcon',
+}) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+    transform-box: view-box;
+    transition: transform 0.3s ease-in-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .corner-top {
+    transform-origin: 10.756px 5.244px;
+  }
+
+  .corner-bottom {
+    transform-origin: 5.244px 10.756px;
+  }
+
+  ${({ $collapse }) => $collapse &&
+    (0, styled_components_1.css) `
+      .corner-top {
+        transform: rotate(180deg);
+      }
+
+      .corner-bottom {
+        transform: rotate(-180deg);
+      }
+    `}
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ExpandCollapseIcon.js.map

package/lib/index.d.ts

@@ -226,6 +226,7 @@ export * from './icons/LinkIcon/LinkIcon';
 export * from './icons/LaunchIcon/LaunchIcon';
 export * from './icons/MinimizeIcon/MinimizeIcon';
 export * from './icons/MaximizeIcon/MaximizeIcon';
+export * from './icons/ExpandCollapseIcon/ExpandCollapseIcon';
 export * from './icons/MarkdownFullIcon/MarkdownFullIcon';
 export * from './icons/DocumentBlankIcon/DocumentBlankIcon';
 export * from './icons/WarningSquareIcon/WarningSquareIcon';

package/lib/index.js

@@ -289,6 +289,7 @@ __exportStar(require("./icons/LinkIcon/LinkIcon"), exports);
 __exportStar(require("./icons/LaunchIcon/LaunchIcon"), exports);
 __exportStar(require("./icons/MinimizeIcon/MinimizeIcon"), exports);
 __exportStar(require("./icons/MaximizeIcon/MaximizeIcon"), exports);
+__exportStar(require("./icons/ExpandCollapseIcon/ExpandCollapseIcon"), exports);
 __exportStar(require("./icons/MarkdownFullIcon/MarkdownFullIcon"), exports);
 __exportStar(require("./icons/DocumentBlankIcon/DocumentBlankIcon"), exports);
 __exportStar(require("./icons/WarningSquareIcon/WarningSquareIcon"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.70.0-next.2",
+  "version": "0.70.0-next.3",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@babel/core": "7.29.7",
     "@markdoc/markdoc": "0.5.2",
-    "@redocly/realm-asyncapi-sdk": "0.16.0-next.0",
+    "@redocly/realm-asyncapi-sdk": "0.16.0-next.1",
     "@shikijs/types": "3.21.0",
     "@testing-library/react": "16.3.0",
     "@testing-library/user-event": "14.6.1",
@@ -71,7 +71,7 @@
     "webpack": "5.105.2"
   },
   "dependencies": {
-    "@redocly/config": "0.57.0",
+    "@redocly/config": "0.58.0",
     "@tanstack/react-query": "5.62.3",
     "@tanstack/react-virtual": "3.13.0",
     "@xyflow/react": "12.8.3",

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -10,8 +10,7 @@ import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 import type { ReportButtonProps } from '@redocly/theme/core/hooks';
 import { useThemeHooks, useThemeConfig } from '@redocly/theme/core/hooks';
 import { DeselectIcon } from '@redocly/theme/icons/DeselectIcon/DeselectIcon';
-import { MaximizeIcon } from '@redocly/theme/icons/MaximizeIcon/MaximizeIcon';
-import { MinimizeIcon } from '@redocly/theme/icons/MinimizeIcon/MinimizeIcon';
+import { ExpandCollapseIcon } from '@redocly/theme/icons/ExpandCollapseIcon/ExpandCollapseIcon';
 import { SelectIcon } from '@redocly/theme/icons/SelectIcon/SelectIcon';
 import { WarningSquareIcon } from '@redocly/theme/icons/WarningSquareIcon/WarningSquareIcon';
 import { Button } from '@redocly/theme/components/Button/Button';
@@ -116,16 +115,14 @@ export function CodeBlockControls({
               variant="text"
               size="small"
               data-testid="expand-all"
-              icon={controlsType === 'icon' ? <MaximizeIcon /> : undefined}
+              icon={controlsType === 'icon' ? <ExpandCollapseIcon /> : undefined}
               aria-label="Expand all"
               onClick={expand?.onClick}
             >
               {controlsType !== 'icon' && (expand?.label || 'Expand all')}
             </ControlButton>
           </Tooltip>
-        ) : null}
-
-        {collapse && !codeSnippet?.collapse?.hide ? (
+        ) : collapse && !codeSnippet?.collapse?.hide ? (
           <Tooltip
             tip={
               collapse.props?.tooltip ||
@@ -138,7 +135,7 @@ export function CodeBlockControls({
               variant="text"
               size="small"
               data-testid="collapse-all"
-              icon={controlsType === 'icon' ? <MinimizeIcon /> : undefined}
+              icon={controlsType === 'icon' ? <ExpandCollapseIcon $collapse /> : undefined}
               onClick={collapse?.onClick}
               aria-label="Collapse all"
             >

package/src/components/Consent/Consent.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import type { JSX } from 'react';
+
+import { ConsentBanner } from '@redocly/theme/components/Consent/ConsentBanner';
+import { ConsentDialog } from '@redocly/theme/components/Consent/ConsentDialog';
+import { useConsentTelemetry } from '@redocly/theme/core/hooks';
+
+export function Consent(): JSX.Element {
+  useConsentTelemetry();
+
+  return (
+    <>
+      <ConsentBanner />
+      <ConsentDialog />
+    </>
+  );
+}

package/src/components/Consent/ConsentBanner.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { useThemeHooks } from '@redocly/theme/core/hooks';
+
+export function ConsentBanner(): JSX.Element | null {
+  const { useConsent, useTranslate } = useThemeHooks();
+  const consent = useConsent();
+  const { translate } = useTranslate();
+
+  if (!consent.enabled || consent.mode !== 'opt-in' || consent.decided || consent.isDialogOpen) {
+    return null;
+  }
+
+  const title = translate('consent.title', 'We value your privacy');
+
+  return (
+    <BannerWrapper data-component-name="Consent/ConsentBanner" role="region" aria-label={title}>
+      <Title>{title}</Title>
+      <Message>
+        {translate(
+          'consent.message',
+          'By selecting "Accept all cookies", you agree to the use of cookies to improve site navigation, understand how our site is used, and support our marketing efforts. Select "Customize" to choose which types of cookies you allow.',
+        )}{' '}
+        {consent.config?.privacyPolicyUrl ? (
+          <Link to={consent.config.privacyPolicyUrl} external>
+            {translate('consent.privacyPolicy', 'Privacy policy')}
+          </Link>
+        ) : null}
+      </Message>
+      <Actions>
+        <MainActions>
+          <Button variant="outlined" onClick={consent.reject}>
+            {translate('consent.rejectAll', 'Reject all')}
+          </Button>
+          <Button variant="primary" onClick={consent.accept}>
+            {translate('consent.acceptAllCookies', 'Accept all cookies')}
+          </Button>
+        </MainActions>
+        <Button variant="text" onClick={consent.openDialog}>
+          {translate('consent.customize', 'Customize')}
+        </Button>
+      </Actions>
+    </BannerWrapper>
+  );
+}
+
+const slideUp = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(16px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+const BannerWrapper = styled.div`
+  position: fixed;
+  left: var(--consent-banner-offset);
+  bottom: var(--consent-banner-offset);
+  z-index: var(--consent-banner-z-index);
+  display: flex;
+  flex-direction: column;
+  gap: var(--consent-banner-gap);
+  width: var(--consent-banner-width);
+  max-width: calc(100vw - 2 * var(--consent-banner-offset));
+  padding: var(--consent-banner-padding);
+  border: 1px solid var(--consent-banner-border-color);
+  border-radius: var(--consent-banner-border-radius);
+  background: var(--consent-banner-bg-color);
+  color: var(--consent-banner-text-color);
+  box-shadow: var(--consent-banner-box-shadow);
+  font-family: var(--font-family-base);
+
+  @media (prefers-reduced-motion: no-preference) {
+    animation: ${slideUp} 240ms ease-out;
+  }
+`;
+
+const Title = styled.h2`
+  margin: 0;
+  font-size: var(--consent-banner-title-font-size);
+  font-weight: var(--font-weight-bold);
+`;
+
+const Message = styled.p`
+  margin: 0;
+  color: var(--text-color-secondary);
+  font-size: var(--consent-banner-font-size);
+`;
+
+const Actions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--consent-banner-gap);
+  align-items: center;
+  justify-content: space-between;
+`;
+
+const MainActions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--consent-banner-gap);
+`;

package/src/components/Consent/ConsentDialog.tsx

@@ -0,0 +1,210 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+import type { UseConsentResult } from '@redocly/theme/core/types';
+import type { ConsentDraft } from '@redocly/theme/core/hooks';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { Link } from '@redocly/theme/components/Link/Link';
+import { Portal } from '@redocly/theme/components/Portal/Portal';
+import { Switch } from '@redocly/theme/components/Switch/Switch';
+import { useConsentDialog, useThemeHooks } from '@redocly/theme/core/hooks';
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+
+const noop = () => {};
+
+export function ConsentDialog(): JSX.Element | null {
+  const { useConsent } = useThemeHooks();
+  const consent = useConsent();
+
+  if (!consent.enabled || !consent.isDialogOpen) {
+    return null;
+  }
+
+  return <ConsentDialogContent consent={consent} />;
+}
+
+function ConsentDialogContent({ consent }: { consent: UseConsentResult }): JSX.Element {
+  const { useTranslate } = useThemeHooks();
+  const { translate } = useTranslate();
+  const { draft, setCategory, dialogRef, close, save, categories } = useConsentDialog(consent);
+
+  return (
+    <Portal>
+      <Overlay
+        className="scroll-lock"
+        data-component-name="Consent/ConsentDialog"
+        onMouseDown={(event) => {
+          if (event.target === event.currentTarget) close();
+        }}
+      >
+        <Dialog
+          ref={dialogRef}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="redocly-consent-dialog-title"
+          tabIndex={-1}
+        >
+          <TitleRow>
+            <Title id="redocly-consent-dialog-title">
+              {translate('consent.dialog.title', 'Cookie preferences')}
+            </Title>
+            <Button
+              variant="ghost"
+              size="small"
+              icon={<CloseIcon />}
+              aria-label={translate('consent.dialog.close', 'Close')}
+              onClick={close}
+            />
+          </TitleRow>
+          <Description>
+            {translate(
+              'consent.dialog.description',
+              'Choose which cookies this site may use. You can change your choice at any time.',
+            )}{' '}
+            {consent.config?.privacyPolicyUrl ? (
+              <Link to={consent.config.privacyPolicyUrl} external>
+                {translate('consent.privacyPolicy', 'Privacy policy')}
+              </Link>
+            ) : null}
+          </Description>
+          {categories.map((category) => {
+            const gpcLocked = category.id === 'marketing' && consent.gpc;
+            return (
+              <Row key={category.id}>
+                <RowText>
+                  <RowTitle>
+                    {translate(category.titleTranslationKey, category.titleDefault)}
+                  </RowTitle>
+                  <RowDescription>
+                    {translate(category.descriptionTranslationKey, category.descriptionDefault)}
+                  </RowDescription>
+                  {gpcLocked ? (
+                    <GpcNotice>
+                      {translate(
+                        'consent.gpcNotice',
+                        'Your browser asked us not to share your data, so this stays off.',
+                      )}
+                    </GpcNotice>
+                  ) : null}
+                </RowText>
+                {category.locked ? (
+                  <SwitchGroup role="group" aria-label={translate('consent.alwaysOn', 'Always on')}>
+                    <Switch value={true} disabled onChange={noop} />
+                  </SwitchGroup>
+                ) : gpcLocked ? (
+                  <SwitchGroup
+                    role="group"
+                    aria-label={translate('consent.alwaysOff', 'Always off')}
+                  >
+                    <Switch value={false} disabled onChange={noop} />
+                  </SwitchGroup>
+                ) : (
+                  <Switch
+                    value={draft[category.id as keyof ConsentDraft]}
+                    onChange={(value) => setCategory(category.id as keyof ConsentDraft, value)}
+                  />
+                )}
+              </Row>
+            );
+          })}
+          <Actions>
+            <Button variant="outlined" onClick={consent.reject}>
+              {translate('consent.rejectAll', 'Reject all')}
+            </Button>
+            <Spacer />
+            <Button variant="outlined" onClick={consent.accept}>
+              {translate('consent.acceptAll', 'Accept all')}
+            </Button>
+            <Button variant="primary" onClick={save}>
+              {translate('consent.savePreferences', 'Save preferences')}
+            </Button>
+          </Actions>
+        </Dialog>
+      </Overlay>
+    </Portal>
+  );
+}
+
+const Overlay = styled.div`
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-index-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-color-modal-overlay);
+  font-family: var(--font-family-base);
+`;
+
+const Dialog = styled.div`
+  width: var(--consent-dialog-width);
+  max-width: var(--consent-dialog-max-width);
+  padding: var(--consent-dialog-padding);
+  border-radius: var(--consent-dialog-border-radius);
+  background: var(--consent-dialog-bg-color);
+  box-shadow: var(--consent-dialog-box-shadow);
+`;
+
+const TitleRow = styled.div`
+  display: flex;
+  gap: var(--spacing-xs);
+  align-items: flex-start;
+  justify-content: space-between;
+`;
+
+const Title = styled.h2`
+  margin: 0 0 var(--spacing-xs);
+  font-size: var(--font-size-lg);
+`;
+
+const Description = styled.p`
+  margin: 0 0 var(--spacing-base);
+  color: var(--consent-dialog-description-color);
+  font-size: var(--font-size-sm);
+`;
+
+const Row = styled.div`
+  display: flex;
+  gap: var(--spacing-base);
+  align-items: flex-start;
+  padding: var(--spacing-sm) 0;
+  border-top: 1px solid var(--consent-dialog-row-border-color);
+`;
+
+const RowText = styled.div`
+  flex: 1;
+`;
+
+const RowTitle = styled.div`
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-bold);
+`;
+
+const RowDescription = styled.div`
+  color: var(--consent-dialog-description-color);
+  font-size: var(--font-size-sm);
+`;
+
+const GpcNotice = styled.div`
+  color: var(--consent-dialog-description-color);
+  font-size: var(--font-size-sm);
+`;
+
+const SwitchGroup = styled.div`
+  flex: none;
+`;
+
+const Actions = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-xs);
+  margin-top: var(--spacing-base);
+  padding-top: var(--spacing-base);
+  border-top: 1px solid var(--consent-dialog-row-border-color);
+`;
+
+const Spacer = styled.span`
+  flex: 1;
+`;

package/src/components/Consent/ConsentSettingsLink.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import type { JSX } from 'react';
+
+import { Button } from '@redocly/theme/components/Button/Button';
+import { useThemeConfig, useThemeHooks } from '@redocly/theme/core/hooks';
+import { resolveSettingsLinkPlacement } from '@redocly/theme/core/utils';
+
+export function ConsentSettingsLink(): JSX.Element | null {
+  const { useConsent, useTranslate } = useThemeHooks();
+  const { consent: consentConfig, footer } = useThemeConfig() || {};
+  const consent = useConsent();
+  const { translate } = useTranslate();
+
+  if (!consent.enabled || resolveSettingsLinkPlacement(consentConfig, footer) !== 'footer') {
+    return null;
+  }
+
+  return (
+    <SettingsLinkButton
+      variant="link"
+      size="small"
+      data-component-name="Consent/ConsentSettingsLink"
+      onClick={consent.openDialog}
+    >
+      {translate('consent.settingsLink', 'Cookie preferences')}
+    </SettingsLinkButton>
+  );
+}
+
+const SettingsLinkButton = styled(Button)`
+  margin: var(--footer-link-padding-vertical) 0 var(--footer-link-padding-vertical) var(--spacing-sm);
+  padding: 0;
+  color: var(--footer-link-text-color);
+  font: inherit;
+  line-height: inherit;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--footer-link-color-hover);
+    background: none;
+  }
+`;

package/src/components/Consent/variables.ts

@@ -0,0 +1,28 @@
+import { css } from 'styled-components';
+
+export const consent = css`
+  /**
+  * @tokens Consent
+  */
+  --consent-banner-width: 380px;
+  --consent-banner-offset: var(--spacing-base); // @presenter Spacing
+  --consent-banner-bg-color: var(--bg-color); // @presenter Color
+  --consent-banner-text-color: var(--text-color-primary); // @presenter Color
+  --consent-banner-border-color: var(--border-color-primary); // @presenter Color
+  --consent-banner-border-radius: var(--border-radius-lg);
+  --consent-banner-box-shadow: var(--bg-raised-shadow);
+  --consent-banner-padding: var(--spacing-base); // @presenter Spacing
+  --consent-banner-gap: var(--spacing-sm); // @presenter Spacing
+  --consent-banner-title-font-size: var(--font-size-base);
+  --consent-banner-font-size: var(--font-size-sm);
+  --consent-banner-z-index: var(--z-index-overlay);
+
+  --consent-dialog-width: 560px;
+  --consent-dialog-max-width: calc(100vw - 2 * var(--spacing-base));
+  --consent-dialog-padding: var(--spacing-lg); // @presenter Spacing
+  --consent-dialog-border-radius: var(--border-radius-lg);
+  --consent-dialog-bg-color: var(--modal-bg-color); // @presenter Color
+  --consent-dialog-box-shadow: var(--modal-box-shadow);
+  --consent-dialog-row-border-color: var(--border-color-primary); // @presenter Color
+  --consent-dialog-description-color: var(--text-color-secondary); // @presenter Color
+`;

package/src/components/Footer/Footer.tsx

@@ -9,6 +9,7 @@ import { breakpoints, isEmptyArray } from '@redocly/theme/core/utils';
 import { useThemeConfig } from '@redocly/theme/core/hooks';
 import { FooterCopyright } from '@redocly/theme/components/Footer/FooterCopyright';
 import { FooterColumn } from '@redocly/theme/components/Footer/FooterColumn';
+import { ConsentSettingsLink } from '@redocly/theme/components/Consent/ConsentSettingsLink';
 
 export type FooterProps = {
   className?: string;
@@ -43,6 +44,7 @@ export function Footer({ className }: FooterProps): JSX.Element | null {
       )}
       <FooterCopyrightWrapper>
         {copyrightText && <FooterCopyright copyrightText={copyrightText} />}
+        <ConsentSettingsLink />
       </FooterCopyrightWrapper>
     </FooterWrapper>
   );