@redocly/theme 0.30.5 → 0.30.7

package/lib/icons/CheckboxIcon/CheckboxIcon.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 export declare const CheckboxIcon: import("styled-components").StyledComponent<({ className, checked, onClick, }: {
     className?: string | undefined;
     checked?: boolean | undefined;
     onClick?: (() => void) | undefined;
-}) => JSX.Element, any, {}, never>;
+}) => React.JSX.Element, any, {}, never>;

package/lib/icons/CloseIcon/CloseIcon.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare const Icon: () => JSX.Element;
-export declare const CloseIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+import React from 'react';
+export declare const Icon: () => React.JSX.Element;
+export declare const CloseIcon: import("styled-components").StyledComponent<() => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/CollapseIcon/CollapseIcon.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 interface IconProps {
     className?: string;
     color?: string;
 }
-export declare const CollapseIcon: import("styled-components").StyledComponent<({ className }: IconProps) => JSX.Element, any, {}, never>;
+export declare const CollapseIcon: import("styled-components").StyledComponent<({ className }: IconProps) => React.JSX.Element, any, {}, never>;
 export {};

package/lib/icons/ColorModeIcon/ColorModeIcon.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import React from 'react';
 export interface ColorModeIconProps {
     mode?: 'dark' | 'light' | string;
     className?: string;
 }
-declare function Icon({ mode, className }: ColorModeIconProps): JSX.Element;
+declare function Icon({ mode, className }: ColorModeIconProps): React.JSX.Element;
 export declare const ColorModeIcon: import("styled-components").StyledComponent<typeof Icon, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/CopyIcon/CopyIcon.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 interface IconProps {
     className?: string;
 }
-export declare const CopyIcon: import("styled-components").StyledComponent<({ className }: IconProps) => JSX.Element, any, {}, never>;
+export declare const CopyIcon: import("styled-components").StyledComponent<({ className }: IconProps) => React.JSX.Element, any, {}, never>;
 export {};

package/lib/icons/CopyIcon/CopyIcon.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyIcon = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-const Icon = ({ className }) => (react_1.default.createElement("span", { "data-component-name": "icons/CopyIcon", className: className },
-    react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" },
-        react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.16667 2.66667C5.16667 2.57462 5.24129 2.5 5.33333 2.5H12C12.092 2.5 12.1667 2.57462 12.1667 2.66667V10.6667C12.1667 10.7587 12.092 10.8333 12 10.8333H10H5.33333C5.24129 10.8333 5.16667 10.7587 5.16667 10.6667V4.66667V2.66667ZM4.16667 4.16667V2.66667C4.16667 2.02233 4.689 1.5 5.33333 1.5H12C12.6443 1.5 13.1667 2.02233 13.1667 2.66667V10.6667C13.1667 11.311 12.6443 11.8333 12 11.8333H10.5V13.3333C10.5 13.6428 10.3771 13.9395 10.1583 14.1583C9.9395 14.3771 9.64275 14.5 9.33333 14.5H2.66667C2.35725 14.5 2.0605 14.3771 1.84171 14.1583C1.62292 13.9395 1.5 13.6428 1.5 13.3333V5.33333C1.5 5.02391 1.62292 4.72717 1.84171 4.50838C2.0605 4.28958 2.35725 4.16667 2.66667 4.16667H4.16667ZM9.5 11.8333V13.3333C9.5 13.3775 9.48244 13.4199 9.45118 13.4512C9.41993 13.4824 9.37754 13.5 9.33333 13.5H2.66667C2.62246 13.5 2.58007 13.4824 2.54882 13.4512C2.51756 13.4199 2.5 13.3775 2.5 13.3333V5.33333C2.5 5.28913 2.51756 5.24674 2.54882 5.21548C2.58007 5.18423 2.62246 5.16667 2.66667 5.16667H4.16667V10.6667C4.16667 11.311 4.689 11.8333 5.33333 11.8333H9.5Z", fill: "currentColor", fillOpacity: "1" }))));
+const Icon = ({ className }) => (react_1.default.createElement("svg", { "data-component-name": "icons/CopyIcon", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", className: className },
+    react_1.default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M5.16667 2.66667C5.16667 2.57462 5.24129 2.5 5.33333 2.5H12C12.092 2.5 12.1667 2.57462 12.1667 2.66667V10.6667C12.1667 10.7587 12.092 10.8333 12 10.8333H10H5.33333C5.24129 10.8333 5.16667 10.7587 5.16667 10.6667V4.66667V2.66667ZM4.16667 4.16667V2.66667C4.16667 2.02233 4.689 1.5 5.33333 1.5H12C12.6443 1.5 13.1667 2.02233 13.1667 2.66667V10.6667C13.1667 11.311 12.6443 11.8333 12 11.8333H10.5V13.3333C10.5 13.6428 10.3771 13.9395 10.1583 14.1583C9.9395 14.3771 9.64275 14.5 9.33333 14.5H2.66667C2.35725 14.5 2.0605 14.3771 1.84171 14.1583C1.62292 13.9395 1.5 13.6428 1.5 13.3333V5.33333C1.5 5.02391 1.62292 4.72717 1.84171 4.50838C2.0605 4.28958 2.35725 4.16667 2.66667 4.16667H4.16667ZM9.5 11.8333V13.3333C9.5 13.3775 9.48244 13.4199 9.45118 13.4512C9.41993 13.4824 9.37754 13.5 9.33333 13.5H2.66667C2.62246 13.5 2.58007 13.4824 2.54882 13.4512C2.51756 13.4199 2.5 13.3775 2.5 13.3333V5.33333C2.5 5.28913 2.51756 5.24674 2.54882 5.21548C2.58007 5.18423 2.62246 5.16667 2.66667 5.16667H4.16667V10.6667C4.16667 11.311 4.689 11.8333 5.33333 11.8333H9.5Z", fill: "currentColor", fillOpacity: "1" })));
 exports.CopyIcon = (0, styled_components_1.default)(Icon) `
-  width: 1em;
-  height: 1em;
+  width: 1.1em;
+  height: 1.1em;
   vertical-align: middle;
 `;
 //# sourceMappingURL=CopyIcon.js.map

package/lib/icons/DeselectIcon/DeselectIcon.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 interface IconProps {
     className?: string;
     color?: string;
 }
-export declare const DeselectIcon: import("styled-components").StyledComponent<({ className }: IconProps) => JSX.Element, any, {}, never>;
+export declare const DeselectIcon: import("styled-components").StyledComponent<({ className }: IconProps) => React.JSX.Element, any, {}, never>;
 export {};

package/lib/icons/DissatisfiedIcon/DissatisfiedIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const DissatisfiedIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+import React from 'react';
+export declare const DissatisfiedIcon: import("styled-components").StyledComponent<() => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/EditIcon/EditIcon.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 interface IconProps {
     className?: string;
 }
-export declare const EditIcon: import("styled-components").StyledComponent<({ className }: IconProps) => JSX.Element, any, {}, never>;
+export declare const EditIcon: import("styled-components").StyledComponent<({ className }: IconProps) => React.JSX.Element, any, {}, never>;
 export {};

package/lib/icons/ErrorIcon/ErrorIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const ErrorIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+import React from 'react';
+export declare const ErrorIcon: import("styled-components").StyledComponent<() => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/ExpandIcon/ExpandIcon.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 interface IconProps {
     className?: string;
 }
-export declare const ExpandIcon: import("styled-components").StyledComponent<({ className }: IconProps) => JSX.Element, any, {}, never>;
+export declare const ExpandIcon: import("styled-components").StyledComponent<({ className }: IconProps) => React.JSX.Element, any, {}, never>;
 export {};

package/lib/icons/FileIcon/FileIcon.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 interface IconProps {
     className?: string;
 }
-export declare const FileIcon: import("styled-components").StyledComponent<({ className }: IconProps) => JSX.Element, any, {}, never>;
+export declare const FileIcon: import("styled-components").StyledComponent<({ className }: IconProps) => React.JSX.Element, any, {}, never>;
 export {};

package/lib/icons/LanguageIcon/LanguageIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const LanguageIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+import React from 'react';
+export declare const LanguageIcon: import("styled-components").StyledComponent<() => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/LogoutIcon/LogoutIcon.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare const Icon: () => JSX.Element;
-export declare const LogoutIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+import React from 'react';
+export declare const Icon: () => React.JSX.Element;
+export declare const LogoutIcon: import("styled-components").StyledComponent<() => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/NeutralIcon/NeutralIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const NeutralIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+import React from 'react';
+export declare const NeutralIcon: import("styled-components").StyledComponent<() => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/PlusIcon/PlusIcon.d.ts

@@ -1,5 +1,5 @@
-/// <reference types="react" />
-export declare const Icon: () => JSX.Element;
-export declare const PlusIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+import React from 'react';
+export declare const Icon: () => React.JSX.Element;
+export declare const PlusIcon: import("styled-components").StyledComponent<() => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/PointingArrowIcon/PointingArrowIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const PointingArrowIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+import React from 'react';
+export declare const PointingArrowIcon: import("styled-components").StyledComponent<() => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/RadioCheckButtonIcon/RadioCheckButtonIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const RadioCheckButtonIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+import React from 'react';
+export declare const RadioCheckButtonIcon: import("styled-components").StyledComponent<() => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/ReportIcon/ReportIcon.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 interface IconProps {
     className?: string;
 }
-export declare const ReportIcon: import("styled-components").StyledComponent<({ className }: IconProps) => JSX.Element, any, {}, never>;
+export declare const ReportIcon: import("styled-components").StyledComponent<({ className }: IconProps) => React.JSX.Element, any, {}, never>;
 export {};

package/lib/icons/ReportIcon/ReportIcon.js

@@ -12,8 +12,8 @@ const Icon = ({ className }) => (react_1.default.createElement("svg", { xmlns: "
     react_1.default.createElement("path", { d: "M8.5 4.5H7.5V9H8.5V4.5Z", fill: "currentColor", fillOpacity: "1" }),
     react_1.default.createElement("path", { d: "M13 14H3C2.73488 13.9997 2.4807 13.8942 2.29323 13.7068C2.10576 13.5193 2.0003 13.2651 2 13V3C2.0003 2.73488 2.10576 2.4807 2.29323 2.29323C2.4807 2.10576 2.73488 2.0003 3 2H13C13.2651 2.0003 13.5193 2.10576 13.7068 2.29323C13.8942 2.4807 13.9997 2.73488 14 3V13C13.9997 13.2651 13.8942 13.5193 13.7068 13.7068C13.5193 13.8942 13.2651 13.9997 13 14ZM3 3V13H13.0006L13 3H3Z", fill: "currentColor", fillOpacity: "1" })));
 exports.ReportIcon = (0, styled_components_1.default)(Icon) `
-  width: 1.3em;
-  height: 1.3em;
+  width: 1.2em;
+  height: 1.2em;
   vertical-align: middle;
 `;
 //# sourceMappingURL=ReportIcon.js.map

package/lib/icons/RocketIcon/RocketIcon.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 interface IconProps {
     className?: string;
     color?: string;
 }
-export declare const RocketIcon: import("styled-components").StyledComponent<({ className }: IconProps) => JSX.Element, any, {}, never>;
+export declare const RocketIcon: import("styled-components").StyledComponent<({ className }: IconProps) => React.JSX.Element, any, {}, never>;
 export {};

package/lib/icons/SatisfiedIcon/SatisfiedIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const SatisfiedIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+import React from 'react';
+export declare const SatisfiedIcon: import("styled-components").StyledComponent<() => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/SelectIcon/SelectIcon.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 interface IconProps {
     className?: string;
 }
-export declare const SelectIcon: import("styled-components").StyledComponent<({ className }: IconProps) => JSX.Element, any, {}, never>;
+export declare const SelectIcon: import("styled-components").StyledComponent<({ className }: IconProps) => React.JSX.Element, any, {}, never>;
 export {};

package/lib/icons/SpinnerIcon/SpinnerIcon.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 export interface SpinnerIconProps {
     className?: string;
 }
-export declare const Icon: ({ className }: SpinnerIconProps) => JSX.Element;
-export declare const SpinnerIcon: import("styled-components").StyledComponent<({ className }: SpinnerIconProps) => JSX.Element, any, {
+export declare const Icon: ({ className }: SpinnerIconProps) => React.JSX.Element;
+export declare const SpinnerIcon: import("styled-components").StyledComponent<({ className }: SpinnerIconProps) => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/ThumbDownIcon/ThumbDownIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const ThumbDownIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+import React from 'react';
+export declare const ThumbDownIcon: import("styled-components").StyledComponent<() => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/icons/ThumbUpIcon/ThumbUpIcon.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-export declare const ThumbUpIcon: import("styled-components").StyledComponent<() => JSX.Element, any, {
+import React from 'react';
+export declare const ThumbUpIcon: import("styled-components").StyledComponent<() => React.JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/mocks/Sidebar/useDrilldown.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 export declare function useDrilldown(_props: any): {
-    Drilldown: ({ children }: any) => JSX.Element;
+    Drilldown: ({ children }: any) => React.JSX.Element;
     handleBack: () => void;
     handleExpand: () => void;
     isExpanded: boolean;

package/lib/mocks/Sidebar/useMenuGroup.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 export declare function useMenuGroup(_item: any): {
-    MenuGroup: ({ children }: any) => JSX.Element;
+    MenuGroup: ({ children }: any) => React.JSX.Element;
     handleGroupClick: () => void;
     isExpanded: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.30.5",
+  "version": "0.30.7",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -49,7 +49,7 @@ export function CodeBlockControls({
   controls,
 }: CodeBlockControlsProps): JSX.Element | null {
   const { codeSnippet } = useThemeConfig();
-  const controlsType = (codeSnippet?.controlsStyle as ControlItemType) || 'icon';
+  const controlsType = (codeSnippet?.elementFormat as ControlItemType) || 'icon';
   const { copy, expand, collapse, select, deselect, report } = controls
     ? controls
     : { copy: null, expand: null, collapse: null, select: null, deselect: null, report: null };
@@ -58,21 +58,16 @@ export function CodeBlockControls({
     <>
       <Title>{title}</Title>
       <ControlsWrapper>
-        {copy && !codeSnippet?.copy?.hide ? (
-          <CopyButton
-            data={copy.data}
-            data-source={copy.dataSource}
-            data-hash={copy.dataHash}
-            type={controlsType}
-            toasterPlacement={copy.toasterPlacement}
-            toasterDuration={copy.toasterDuration}
-            buttonText={copy.label}
-            tooltipText={copy.tooltipText}
-            onCopyClick={() => {
-              copy?.onClick;
-              telemetry.send('code_snippet_copied', {});
-            }}
-          />
+        {report && report?.props?.visible ? (
+          <CodeBlockControlButton
+            data-cy="report-button"
+            data-testid="report-button"
+            asIcon={controlsType === 'icon'}
+            title={report.props?.tooltip}
+            {...report.props}
+          >
+            {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
+          </CodeBlockControlButton>
         ) : null}
 
         {expand && !codeSnippet?.expand?.hide ? (
@@ -135,16 +130,21 @@ export function CodeBlockControls({
           </CodeBlockControlButton>
         ) : null}
 
-        {report && report?.props?.visible ? (
-          <CodeBlockControlButton
-            data-cy="report-button"
-            data-testid="report-button"
-            asIcon={controlsType === 'icon'}
-            title={report.props?.tooltip}
-            {...report.props}
-          >
-            {controlsType === 'icon' ? <ReportIcon /> : report.props?.buttonText || 'Report'}
-          </CodeBlockControlButton>
+        {copy && !codeSnippet?.copy?.hide ? (
+          <CopyButton
+            data={copy.data}
+            data-source={copy.dataSource}
+            data-hash={copy.dataHash}
+            type={controlsType}
+            toasterPlacement={copy.toasterPlacement}
+            toasterDuration={copy.toasterDuration}
+            buttonText={copy.label}
+            tooltipText={copy.tooltipText}
+            onCopyClick={() => {
+              copy?.onClick;
+              telemetry.send('code_snippet_copied', {});
+            }}
+          />
         ) : null}
       </ControlsWrapper>
     </>

package/src/components/Footer/FooterColumn.tsx

@@ -19,9 +19,19 @@ export function FooterColumn({ column, className }: FooterColumnProps): JSX.Elem
 
   const iconsOnly = items.every((item) => item.label === item.link && (item.icon || item.srcSet));
 
+  const label = translate(column.labelTranslationKey, column.label);
+  const labelOrLink =
+    column.type === 'link' ? (
+      <Link to={column.link} external={column.external} target={column.target}>
+        {label}
+      </Link>
+    ) : (
+      label
+    );
+
   return (
     <FooterColumnContainer data-component-name="Footer/FooterColumn" className={className}>
-      <FooterColumnTitle>{translate(column.labelTranslationKey, column.label)}</FooterColumnTitle>
+      <FooterColumnTitle>{labelOrLink}</FooterColumnTitle>
       <FooterColumnItems iconsOnly={iconsOnly}>
         {items?.map((columnItem, columnItemIndex) => {
           if (columnItem.type === 'error') {
@@ -68,6 +78,15 @@ const FooterColumnTitle = styled.p`
   ${({ theme }) => theme.mediaQueries.small} {
     margin-bottom: var(--footer-title-margin-bottom);
   }
+
+  a {
+    text-decoration: none;
+    color: var(--footer-title-text-color);
+
+    &:hover {
+      color: var(--footer-title-hover-color);
+    }
+  }
 `;
 
 const FooterSeparator = styled.div`

package/src/components/NavbarLogo/NavbarLogo.tsx

@@ -12,7 +12,7 @@ export type NavbarLogoProps = {
 };
 
 export function NavbarLogo({ logo, className }: NavbarLogoProps): JSX.Element | null {
-  if (!logo.image && !logo.srcSet) {
+  if (!logo?.image && !logo?.srcSet) {
     return null;
   }
   const img = (

package/src/components/Tabs/Tabs.tsx

@@ -5,7 +5,7 @@ import type { PropsWithChildren } from 'react';
 
 import { Tab } from '@theme/components/Tabs';
 
-type Child = { props: { label: string; key?: string } & TabsProps };
+type Child = { props: { label: string } & TabsProps };
 type TabsProps = PropsWithChildren<{ children: Child[]; className?: string }>;
 
 export function Tabs(props: TabsProps): JSX.Element {
@@ -17,11 +17,11 @@ export function Tabs(props: TabsProps): JSX.Element {
     <TabsContainer data-component-name="Markdown/Tabs/Tabs" className={props.className}>
       <TabList>
         {children.map((child, idx) => {
-          const { label, key } = child.props;
+          const { label } = child.props;
           return (
             <Tab
               activeTab={activeTab}
-              key={`${key || label}-${idx}`}
+              key={`${label}-${idx}`}
               label={label}
               onClick={onTabSelect}
             />

package/src/config.ts

@@ -72,6 +72,11 @@ const markdownConfigSchema = {
       items: { type: 'string' },
       default: ['image', 'links'],
     },
+    partialsFolders: {
+      type: 'array',
+      items: { type: 'string' },
+      default: ['_partials'],
+    },
     lastUpdatedBlock: {
       type: 'object',
       properties: {
@@ -564,7 +569,7 @@ export const themeConfigSchema = {
     codeSnippet: {
       type: 'object',
       properties: {
-        controlsStyle: { type: 'string', default: 'icon' },
+        elementFormat: { type: 'string', default: 'icon' },
         copy: {
           type: 'object',
           properties: {

package/src/icons/CopyIcon/CopyIcon.tsx

@@ -6,21 +6,27 @@ interface IconProps {
 }
 
 const Icon = ({ className }: IconProps) => (
-  <span data-component-name="icons/CopyIcon" className={className}>
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M5.16667 2.66667C5.16667 2.57462 5.24129 2.5 5.33333 2.5H12C12.092 2.5 12.1667 2.57462 12.1667 2.66667V10.6667C12.1667 10.7587 12.092 10.8333 12 10.8333H10H5.33333C5.24129 10.8333 5.16667 10.7587 5.16667 10.6667V4.66667V2.66667ZM4.16667 4.16667V2.66667C4.16667 2.02233 4.689 1.5 5.33333 1.5H12C12.6443 1.5 13.1667 2.02233 13.1667 2.66667V10.6667C13.1667 11.311 12.6443 11.8333 12 11.8333H10.5V13.3333C10.5 13.6428 10.3771 13.9395 10.1583 14.1583C9.9395 14.3771 9.64275 14.5 9.33333 14.5H2.66667C2.35725 14.5 2.0605 14.3771 1.84171 14.1583C1.62292 13.9395 1.5 13.6428 1.5 13.3333V5.33333C1.5 5.02391 1.62292 4.72717 1.84171 4.50838C2.0605 4.28958 2.35725 4.16667 2.66667 4.16667H4.16667ZM9.5 11.8333V13.3333C9.5 13.3775 9.48244 13.4199 9.45118 13.4512C9.41993 13.4824 9.37754 13.5 9.33333 13.5H2.66667C2.62246 13.5 2.58007 13.4824 2.54882 13.4512C2.51756 13.4199 2.5 13.3775 2.5 13.3333V5.33333C2.5 5.28913 2.51756 5.24674 2.54882 5.21548C2.58007 5.18423 2.62246 5.16667 2.66667 5.16667H4.16667V10.6667C4.16667 11.311 4.689 11.8333 5.33333 11.8333H9.5Z"
-        fill="currentColor"
-        fillOpacity="1"
-      />
-    </svg>
-  </span>
+  <svg
+    data-component-name="icons/CopyIcon"
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    className={className}
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M5.16667 2.66667C5.16667 2.57462 5.24129 2.5 5.33333 2.5H12C12.092 2.5 12.1667 2.57462 12.1667 2.66667V10.6667C12.1667 10.7587 12.092 10.8333 12 10.8333H10H5.33333C5.24129 10.8333 5.16667 10.7587 5.16667 10.6667V4.66667V2.66667ZM4.16667 4.16667V2.66667C4.16667 2.02233 4.689 1.5 5.33333 1.5H12C12.6443 1.5 13.1667 2.02233 13.1667 2.66667V10.6667C13.1667 11.311 12.6443 11.8333 12 11.8333H10.5V13.3333C10.5 13.6428 10.3771 13.9395 10.1583 14.1583C9.9395 14.3771 9.64275 14.5 9.33333 14.5H2.66667C2.35725 14.5 2.0605 14.3771 1.84171 14.1583C1.62292 13.9395 1.5 13.6428 1.5 13.3333V5.33333C1.5 5.02391 1.62292 4.72717 1.84171 4.50838C2.0605 4.28958 2.35725 4.16667 2.66667 4.16667H4.16667ZM9.5 11.8333V13.3333C9.5 13.3775 9.48244 13.4199 9.45118 13.4512C9.41993 13.4824 9.37754 13.5 9.33333 13.5H2.66667C2.62246 13.5 2.58007 13.4824 2.54882 13.4512C2.51756 13.4199 2.5 13.3775 2.5 13.3333V5.33333C2.5 5.28913 2.51756 5.24674 2.54882 5.21548C2.58007 5.18423 2.62246 5.16667 2.66667 5.16667H4.16667V10.6667C4.16667 11.311 4.689 11.8333 5.33333 11.8333H9.5Z"
+      fill="currentColor"
+      fillOpacity="1"
+    />
+  </svg>
 );
 
 export const CopyIcon = styled(Icon)`
-  width: 1em;
-  height: 1em;
+  width: 1.1em;
+  height: 1.1em;
   vertical-align: middle;
 `;

package/src/icons/ReportIcon/ReportIcon.tsx

@@ -30,7 +30,7 @@ const Icon = ({ className }: IconProps) => (
 );
 
 export const ReportIcon = styled(Icon)`
-  width: 1.3em;
-  height: 1.3em;
+  width: 1.2em;
+  height: 1.2em;
   vertical-align: middle;
 `;