@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/src/components/Buttons/ConnectMCPButton.tsx

@@ -19,7 +19,6 @@ import { useConnectMCPButton, useThemeHooks } from '@redocly/theme/core/hooks';
 import { DEFAULT_MCP_OPTIONS } from '@redocly/theme/core/constants';
 
 type MenuOption = {
-  key: MCPOption;
   icon: React.ComponentType;
   titleTranslationKey: string;
   titleDefault: string;
@@ -27,48 +26,50 @@ type MenuOption = {
   descriptionDefault: string;
 };
 
-const MENU_OPTIONS: MenuOption[] = [
-  {
-    key: 'cursor',
+const MENU_OPTIONS: Record<MCPOption, MenuOption> = {
+  cursor: {
     icon: CursorIcon,
     titleTranslationKey: 'page.actions.connectMcp.cursor',
     titleDefault: 'Connect to Cursor',
     descriptionTranslationKey: 'page.actions.connectMcp.cursorDescription',
     descriptionDefault: 'Install MCP server on Cursor',
   },
-  {
-    key: 'vscode',
+  vscode: {
     icon: VSCodeIcon,
     titleTranslationKey: 'page.actions.connectMcp.vscode',
     titleDefault: 'Connect to VS Code',
     descriptionTranslationKey: 'page.actions.connectMcp.vscodeDescription',
     descriptionDefault: 'Install MCP server on VS Code',
   },
-  {
-    key: 'claude-code',
+  claude: {
+    icon: ClaudeIcon,
+    titleTranslationKey: 'page.actions.connectMcp.claude',
+    titleDefault: 'Connect to Claude',
+    descriptionTranslationKey: 'page.actions.connectMcp.claudeDescription',
+    descriptionDefault: 'Add MCP server to your Claude account',
+  },
+  'claude-code': {
     icon: ClaudeIcon,
     titleTranslationKey: 'page.actions.connectMcp.claudeCode',
     titleDefault: 'Connect to Claude Code',
     descriptionTranslationKey: 'page.actions.connectMcp.claudeCodeDescription',
     descriptionDefault: 'Copy the Claude Code CLI command',
   },
-  {
-    key: 'codex',
+  codex: {
     icon: CodexIcon,
     titleTranslationKey: 'page.actions.connectMcp.codex',
     titleDefault: 'Connect to Codex CLI',
     descriptionTranslationKey: 'page.actions.connectMcp.codexDescription',
     descriptionDefault: 'Copy the Codex CLI command',
   },
-  {
-    key: 'copy',
+  copy: {
     icon: CopyIcon,
     titleTranslationKey: 'page.actions.connectMcp.copyConfig',
     titleDefault: 'Copy MCP Configuration',
     descriptionTranslationKey: 'page.actions.connectMcp.copyConfigDescription',
     descriptionDefault: 'Copy MCP JSON Configuration',
   },
-];
+};
 
 // Copy actions keep the dropdown open so the copied checkmark is visible.
 const COPY_OPTIONS: MCPOption[] = ['claude-code', 'codex', 'copy'];
@@ -89,7 +90,7 @@ export function ConnectMCPButton({
 
   const { copiedOption, visibleOptions, handleAction } = useConnectMCPButton({ options });
 
-  const menuOptions = MENU_OPTIONS.filter((option) => visibleOptions.includes(option.key));
+  const menuOptions = visibleOptions.map((key) => ({ key, ...MENU_OPTIONS[key] }));
   const primaryOption = menuOptions[0];
   const dropdownOptions = menuOptions.slice(1);
 
@@ -124,7 +125,7 @@ export function ConnectMCPButton({
       >
         {dropdownOptions.length > 0
           ? ({ close }: { close: () => void }) => (
-              <DropdownMenu>
+              <StyledDropdownMenu>
                 {dropdownOptions.map((option) => {
                   const Icon = option.icon;
                   const showCheckmark = copiedOption === option.key;
@@ -156,7 +157,7 @@ export function ConnectMCPButton({
                     </DropdownMenuItem>
                   );
                 })}
-              </DropdownMenu>
+              </StyledDropdownMenu>
             )
           : null}
       </SplitButton>
@@ -164,6 +165,10 @@ export function ConnectMCPButton({
   );
 }
 
+const StyledDropdownMenu = styled(DropdownMenu)`
+  --dropdown-menu-max-height: var(--connect-mcp-button-dropdown-max-height);
+`;
+
 const ConnectMCPButtonWrapper = styled.div`
   display: inline-block;
   position: relative;

package/src/components/Buttons/variables.ts

@@ -50,3 +50,7 @@ export const aiAssistantButton = css`
   // @tokens End
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */
+
+export const connectMcpButton = css`
+  --connect-mcp-button-dropdown-max-height: fit-content;
+`;

package/src/components/Catalog/Catalog.tsx

@@ -162,9 +162,11 @@ export function Catalog(props: CatalogProps): JSX.Element {
             <CatalogPageContentWrapper>
               <CatalogTitleWrapper>
                 <CatalogTitle data-translation-key={catalogConfig?.titleTranslationKey}>
-                  {catalogConfig?.titleTranslationKey
-                    ? translate(catalogConfig?.titleTranslationKey)
-                    : catalogConfig?.slug}{' '}
+                  <span>
+                    {catalogConfig?.titleTranslationKey
+                      ? translate(catalogConfig?.titleTranslationKey)
+                      : catalogConfig?.slug}
+                  </span>{' '}
                 </CatalogTitle>
                 <CounterTag borderless>{entitiesCounter}</CounterTag>
               </CatalogTitleWrapper>
@@ -256,7 +258,7 @@ const CatalogDescription = styled.p`
 const CatalogPageWrapper = styled.div`
   --sidebar-width: var(--catalog-sidebar-width);
 
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   display: flex;
   flex-direction: column;
   overflow: hidden;

package/src/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy.tsx

@@ -3,5 +3,7 @@ import type { CatalogEntityRelationsGraphProps } from '@redocly/theme/components
 import { dynamic } from '@redocly/theme/core/utils';
 
 export const CatalogEntityRelationsGraph = dynamic<CatalogEntityRelationsGraphProps>(() =>
-  import('./CatalogEntityRelationsGraph').then((mod) => mod.CatalogEntityRelationsGraph),
+  import('@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph').then(
+    (mod) => mod.CatalogEntityRelationsGraph,
+  ),
 );

package/src/components/Catalog/CatalogEntity/CatalogEntityHistory/CatalogEntityHistorySidebar.tsx

@@ -164,10 +164,10 @@ export function CatalogEntityHistorySidebar({
 
 const SidebarOverlay = styled.div`
   position: fixed;
-  top: calc(var(--navbar-height) + var(--banner-height));
+  top: var(--navbar-offset);
   left: 0;
   width: var(--sidebar-width);
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   padding: var(--catalog-history-sidebar-padding);
   background-color: var(--catalog-history-sidebar-bg-color);
   border-right: 1px solid var(--catalog-history-sidebar-border-color);

package/src/components/Catalog/CatalogEntity/CatalogEntitySchema.tsx

@@ -120,7 +120,7 @@ const SplitViewWrapper = styled.div`
 const SchemaSampleWrapper = styled.div`
   flex: 1;
   position: sticky;
-  top: calc(var(--navbar-height) + var(--banner-height) + var(--spacing-md));
+  top: calc(var(--navbar-offset) + var(--spacing-md));
   align-self: flex-start;
   padding-top: var(--spacing-sm);
 `;

package/src/components/Catalog/CatalogFilter/CatalogFilterCheckboxes.tsx

@@ -96,30 +96,28 @@ export function CatalogFilterCheckboxes({
         <FilterOptions>
           {filteredOptions.map(({ value, count }) => {
             const id = 'filter--' + filter.property + '--' + value;
+            const checked =
+              filter.selectedOptions instanceof Set
+                ? filter.selectedOptions.has(value) ||
+                  filter.selectedOptions.has(value?.toLowerCase())
+                : false;
             return (
-              <FilterCheckboxOption
-                key={id}
-                role="link"
-                onClick={() => {
-                  filter.toggleOption(value);
-                  telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
-                    {
-                      ...getBaseDataAttributes('catalogEntitiesFilterCheckboxId', 'checkbox'),
-                      category: filter.property,
-                      value: value,
-                    },
-                  ]);
-                }}
-              >
-                <CheckboxIcon
-                  checked={
-                    filter.selectedOptions instanceof Set
-                      ? filter.selectedOptions.has(value) ||
-                        filter.selectedOptions.has(value?.toLowerCase())
-                      : false
-                  }
-                />
+              <FilterCheckboxOption key={id}>
+                <CheckboxIcon checked={checked} />
                 <FilterOptionLabel data-translation-key={value}>
+                  <FilterCheckboxInput
+                    checked={checked}
+                    onChange={() => {
+                      filter.toggleOption(value);
+                      telemetry.sendCatalogEntitiesFilterCheckboxToggledMessage([
+                        {
+                          ...getBaseDataAttributes('catalogEntitiesFilterCheckboxId', 'checkbox'),
+                          category: filter.property,
+                          value: value,
+                        },
+                      ]);
+                    }}
+                  />
                   {highlightText(changeTextCasing(translate(value), filterValuesCasing) || '')}
                 </FilterOptionLabel>
                 {showCounter && <CounterTag borderless>{count}</CounterTag>}
@@ -168,6 +166,23 @@ const HighlightedText = styled.span`
 
 const FilterCheckboxOption = styled(FilterOption)`
   padding-left: var(--filter-option-checkbox-padding-left);
+
+  &:has(input:focus-visible) {
+    outline: 1px solid var(--button-border-color-focused);
+    outline-offset: -1px;
+  }
+`;
+
+const FilterCheckboxInput = styled.input.attrs({ type: 'checkbox' })`
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
 `;
 
 const FilterSearchWrapper = styled.div`

package/src/components/Catalog/CatalogFilter/CatalogFilterDateRange.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 import type { JSX } from 'react';
@@ -19,6 +19,7 @@ export function CatalogFilterDateRange({
   filter,
   className,
 }: CatalogFilterDateRangeProps): JSX.Element {
+  const [today] = useState(() => new Date());
   const { useTranslate } = useThemeHooks();
   const { translate } = useTranslate();
 
@@ -60,7 +61,7 @@ export function CatalogFilterDateRange({
                 monthPlaceholder="MM"
                 yearPlaceholder="YYYY"
                 value={from}
-                maxDate={new Date()}
+                maxDate={today}
                 onChange={(from) => {
                   if (Array.isArray(from)) return;
                   filter.selectOption({

package/src/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanel.tsx

@@ -23,7 +23,7 @@ export function CatalogMobileFiltersPanel({
 
 const CatalogMobileFiltersPanelWrapper = styled.div`
   width: 100%;
-  max-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  max-height: calc(100vh - var(--navbar-offset));
   overflow-y: auto;
   background: var(--sidebar-bg-color);
   display: flex;

package/src/components/Catalog/CatalogMobileFiltersPanel/CatalogMobileFiltersPanelOverlay.tsx

@@ -27,10 +27,10 @@ export function CatalogMobileFiltersPanelOverlay({
 const CatalogMobileFiltersPanelOverlayWrapper = styled.div`
   display: none;
   position: fixed;
-  top: calc(var(--navbar-height) + var(--banner-height));
+  top: var(--navbar-offset);
   left: 0;
   width: 100%;
-  height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  height: calc(100vh - var(--navbar-offset));
   z-index: 3;
   background: var(--bg-color);
   flex-direction: column;

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;
+`;