npm - @redocly/theme - Versions diffs - 0.66.0-next.2 → 0.66.0-next.3 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (848) hide show

package/src/icons/StarIcon/StarIcon.tsx CHANGED Viewed

@@ -11,9 +11,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const StarIcon = styled(Icon).attrs(() => ({
+export const StarIcon = styled(Icon).attrs({
   'data-component-name': 'icons/StarIcon/StarIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/StopIcon/StopIcon.tsx CHANGED Viewed

@@ -11,9 +11,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const StopIcon = styled(Icon).attrs(() => ({
+export const StopIcon = styled(Icon).attrs({
   'data-component-name': 'icons/StopIcon/StopIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/SubtractIcon/SubtractIcon.tsx CHANGED Viewed

@@ -18,9 +18,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const SubtractIcon = styled(Icon).attrs(() => ({
+export const SubtractIcon = styled(Icon).attrs({
   'data-component-name': 'icons/SubtractIcon/SubtractIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/SunIcon/SunIcon.tsx CHANGED Viewed

@@ -19,9 +19,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const SunIcon = styled(Icon).attrs(() => ({
+export const SunIcon = styled(Icon).attrs({
   'data-component-name': 'icons/MoonIcon/MoonIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/TableBuiltIcon/TableBuiltIcon.tsx CHANGED Viewed

@@ -11,9 +11,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const TableBuiltIcon = styled(Icon).attrs(() => ({
+export const TableBuiltIcon = styled(Icon).attrs({
   'data-component-name': 'icons/TableBuiltIcon/TableBuiltIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/TableIcon/TableIcon.tsx CHANGED Viewed

@@ -14,9 +14,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const TableIcon = styled(Icon).attrs(() => ({
+export const TableIcon = styled(Icon).attrs({
   'data-component-name': 'icons/TableIcon/TableIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/TagsIcon/TagsIcon.tsx CHANGED Viewed

@@ -29,9 +29,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const TagsIcon = styled(Icon).attrs(() => ({
+export const TagsIcon = styled(Icon).attrs({
   'data-component-name': 'icons/TagsIcon/TagsIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/TaskViewIcon/TaskViewIcon.tsx CHANGED Viewed

@@ -22,9 +22,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const TaskViewIcon = styled(Icon).attrs(() => ({
+export const TaskViewIcon = styled(Icon).attrs({
   'data-component-name': 'icons/TaskViewIcon/TaskViewIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/ThumbDownFilledIcon/ThumbDownFilledIcon.tsx CHANGED Viewed

@@ -29,9 +29,9 @@ const Icon = (props: IconProps) => {
   );
 };
-export const ThumbDownFilledIcon = styled(Icon).attrs(() => ({
+export const ThumbDownFilledIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ThumbDownFilledIcon/ThumbDownFilledIcon',
-}))<IconProps>`
+})`
   height: ${({ size }) => size || '14px'};
   width: ${({ size }) => size || '14px'};
   color: ${({ color }) => color && getCssColorVariable(color)};

package/src/icons/ThumbDownIcon/ThumbDownIcon.tsx CHANGED Viewed

@@ -1,8 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
-const Icon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+import type { IconProps } from '@redocly/theme/icons/types';
+const Icon = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    {...props}
+  >
     <path
       d="M12.8422 6.66036C12.8984 6.47286 12.9266 6.27911 12.9266 6.08224C12.9266 5.64005 12.7812 5.21505 12.5188 4.86818C12.575 4.68068 12.6031 4.48693 12.6031 4.29005C12.6031 3.84786 12.4578 3.42286 12.1953 3.07599C12.2516 2.88849 12.2797 2.69474 12.2797 2.49786C12.2797 1.69161 11.8 0.965052 11.0562 0.647865C10.9255 0.591503 10.7845 0.562777 10.6422 0.56349H1.25C0.973437 0.56349 0.75 0.786927 0.75 1.06349V6.75099C0.75 7.02755 0.973437 7.25099 1.25 7.25099H3.27031L4.61094 12.1072C4.82656 12.8901 5.54531 13.4369 6.35781 13.4369C6.82188 13.4369 7.25469 13.2526 7.575 12.9151C7.89531 12.5791 8.05937 12.1385 8.03594 11.6744L7.94219 9.75411H11.6906C11.8797 9.75411 12.0641 9.70411 12.2266 9.6088C12.8578 9.24161 13.25 8.57599 13.25 7.87443C13.25 7.43224 13.1047 7.00724 12.8422 6.66036ZM1.875 6.12443V1.68693H3.14062V6.12443H1.875ZM11.675 8.63068H6.7625L6.9125 11.7307C6.92188 11.9166 6.83906 12.0916 6.68437 12.2072C6.58906 12.2776 6.47188 12.3135 6.35469 12.3119C6.20497 12.3105 6.05977 12.2605 5.94087 12.1695C5.82198 12.0785 5.73581 11.9514 5.69531 11.8072L4.14062 6.17443V1.68693H10.6313C10.7874 1.75692 10.9201 1.87054 11.0132 2.01413C11.1063 2.15772 11.156 2.32515 11.1562 2.4963C11.1562 2.64786 11.1203 2.79161 11.0484 2.92286L10.8313 3.31974L11.1734 3.61661C11.2698 3.70003 11.347 3.80322 11.3998 3.91917C11.4527 4.03511 11.4799 4.16107 11.4797 4.28849C11.4797 4.44005 11.4437 4.5838 11.3719 4.71505L11.1547 5.11193L11.4969 5.4088C11.5932 5.49222 11.6704 5.59541 11.7232 5.71135C11.7761 5.82729 11.8033 5.95326 11.8031 6.08068C11.8031 6.23224 11.7672 6.37599 11.6953 6.50724L11.4766 6.90568L11.8188 7.20255C11.9151 7.28597 11.9923 7.38916 12.0451 7.5051C12.098 7.62104 12.1252 7.74701 12.125 7.87443C12.125 8.17286 11.9531 8.46036 11.675 8.63068Z"
       fill="currentColor"
@@ -10,6 +19,6 @@ const Icon = () => (
   </svg>
 );
-export const ThumbDownIcon = styled(Icon).attrs(() => ({
+export const ThumbDownIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ThumbDownIcon/ThumbDownIcon',
-}))``;
+})``;

package/src/icons/ThumbUpFilledIcon/ThumbUpFilledIcon.tsx CHANGED Viewed

@@ -26,9 +26,9 @@ const Icon = (props: IconProps) => {
   );
 };
-export const ThumbUpFilledIcon = styled(Icon).attrs(() => ({
+export const ThumbUpFilledIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ThumbUpFilledIcon/ThumbUpFilledIcon',
-}))<IconProps>`
+})`
   height: ${({ size }) => size || '14px'};
   width: ${({ size }) => size || '14px'};
   color: ${({ color }) => color && getCssColorVariable(color)};

package/src/icons/ThumbUpIcon/ThumbUpIcon.tsx CHANGED Viewed

@@ -1,8 +1,17 @@
 import React from 'react';
 import styled from 'styled-components';
-const Icon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+import type { IconProps } from '@redocly/theme/icons/types';
+const Icon = (props: IconProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 14 14"
+    fill="none"
+    {...props}
+  >
     <path
       d="M12.8422 7.33966C13.1047 6.99279 13.25 6.56779 13.25 6.1256C13.25 5.42404 12.8578 4.75997 12.2266 4.38966C12.0641 4.29434 11.879 4.24417 11.6906 4.24435H7.94375L8.0375 2.32404C8.05938 1.85997 7.89531 1.41935 7.57656 1.08341C7.42013 0.917829 7.23141 0.786087 7.02206 0.696324C6.8127 0.606562 6.58716 0.560687 6.35938 0.561535C5.54688 0.561535 4.82812 1.10841 4.6125 1.89122L3.27031 6.7506H1.25C0.973437 6.7506 0.75 6.97404 0.75 7.2506V12.9381C0.75 13.2147 0.973437 13.4381 1.25 13.4381H10.6453C10.7891 13.4381 10.9297 13.41 11.0594 13.3537C11.8031 13.0365 12.2828 12.31 12.2828 11.5037C12.2828 11.3068 12.2547 11.1131 12.1984 10.9256C12.4609 10.5787 12.6062 10.1537 12.6062 9.71154C12.6062 9.51466 12.5781 9.32091 12.5219 9.13341C12.7844 8.78654 12.9297 8.36154 12.9297 7.91935C12.9266 7.72247 12.8984 7.52716 12.8422 7.33966ZM1.875 12.3131V7.8756H3.14062V12.3131H1.875ZM11.8188 6.79747L11.4766 7.09435L11.6938 7.49122C11.7653 7.62196 11.8024 7.76875 11.8016 7.91779C11.8016 8.1756 11.6891 8.42091 11.4953 8.58966L11.1531 8.88654L11.3703 9.28341C11.4419 9.41414 11.479 9.56094 11.4781 9.70997C11.4781 9.96779 11.3656 10.2131 11.1719 10.3818L10.8297 10.6787L11.0469 11.0756C11.1184 11.2063 11.1555 11.3531 11.1547 11.5022C11.1547 11.8522 10.9484 12.1678 10.6297 12.3115H4.14062V7.8256L5.69531 2.19279C5.7354 2.04841 5.82146 1.92104 5.94044 1.82997C6.05943 1.7389 6.20485 1.68909 6.35469 1.6881C6.47344 1.6881 6.59062 1.72247 6.68437 1.79279C6.83906 1.90841 6.92188 2.08341 6.9125 2.26935L6.7625 5.36935H11.675C11.9531 5.53966 12.125 5.82716 12.125 6.1256C12.125 6.38341 12.0125 6.62716 11.8188 6.79747Z"
       fill="currentColor"
@@ -10,6 +19,6 @@ const Icon = () => (
   </svg>
 );
-export const ThumbUpIcon = styled(Icon).attrs(() => ({
+export const ThumbUpIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ThumbUpIcon/ThumbUpIcon',
-}))``;
+})``;

package/src/icons/TimeIcon/TimeIcon.tsx CHANGED Viewed

@@ -12,9 +12,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const TimeIcon = styled(Icon).attrs(() => ({
+export const TimeIcon = styled(Icon).attrs({
   'data-component-name': 'icons/TimeIcon/TimeIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/TrashCanIcon/TrashCanIcon.tsx CHANGED Viewed

@@ -14,9 +14,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const TrashCanIcon = styled(Icon).attrs(() => ({
+export const TrashCanIcon = styled(Icon).attrs({
   'data-component-name': 'icons/TrashCanIcon/TrashCanIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/UserIcon/UserIcon.tsx CHANGED Viewed

@@ -18,9 +18,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const UserIcon = styled(Icon).attrs(() => ({
+export const UserIcon = styled(Icon).attrs({
   'data-component-name': 'icons/UserIcon/UserIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/VSCodeIcon/VSCodeIcon.tsx CHANGED Viewed

@@ -21,9 +21,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const VSCodeIcon = styled(Icon).attrs(() => ({
+export const VSCodeIcon = styled(Icon).attrs({
   'data-component-name': 'icons/VSCodeIcon/VSCodeIcon',
-}))<IconProps>`
+})`
   height: ${({ size }) => size || '16px'};
   width: ${({ size }) => size || '16px'};
 `;

package/src/icons/ValueVariableIcon/ValueVariableIcon.tsx CHANGED Viewed

@@ -12,9 +12,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const ValueVariableIcon = styled(Icon).attrs(() => ({
+export const ValueVariableIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ValueVariableIcon/ValueVariableIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/VerticalViewIcon/VerticalViewIcon.tsx CHANGED Viewed

@@ -12,9 +12,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const VerticalViewIcon = styled(Icon).attrs(() => ({
+export const VerticalViewIcon = styled(Icon).attrs({
   'data-component-name': 'icons/VerticalViewIcon/VerticalViewIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/ViewIcon/ViewIcon.tsx CHANGED Viewed

@@ -12,9 +12,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const ViewIcon = styled(Icon).attrs(() => ({
+export const ViewIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ViewIcon/ViewIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/ViewOffIcon/ViewOffIcon.tsx CHANGED Viewed

@@ -13,9 +13,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const ViewOffIcon = styled(Icon).attrs(() => ({
+export const ViewOffIcon = styled(Icon).attrs({
   'data-component-name': 'icons/ViewOffIcon/ViewOffIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/WarningAltFilled/WarningAltFilled.tsx CHANGED Viewed

@@ -12,9 +12,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const WarningAltFilled = styled(Icon).attrs(() => ({
+export const WarningAltFilled = styled(Icon).attrs({
   'data-component-name': 'icons/WarningAltFilled/WarningAltFilled',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/WarningAltFilledIcon/WarningAltFilledIcon.tsx CHANGED Viewed

@@ -12,9 +12,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const WarningAltFilledIcon = styled(Icon).attrs(() => ({
+export const WarningAltFilledIcon = styled(Icon).attrs({
   'data-component-name': 'icons/WarningAltFilledIcon/WarningAltFilledIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/WarningAltIcon/WarningAltIcon.tsx CHANGED Viewed

@@ -13,9 +13,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const WarningAltIcon = styled(Icon).attrs(() => ({
+export const WarningAltIcon = styled(Icon).attrs({
   'data-component-name': 'icons/WarningAltIcon/WarningAltIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/WarningCycleIcon/WarningCycleIcon.tsx CHANGED Viewed

@@ -20,9 +20,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const WarningCycleIcon = styled(Icon).attrs(() => ({
+export const WarningCycleIcon = styled(Icon).attrs({
   'data-component-name': 'icons/WarningCycleIcon/WarningCycleIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/WarningFilledIcon/WarningFilledIcon.tsx CHANGED Viewed

@@ -11,9 +11,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const WarningFilledIcon = styled(Icon).attrs(() => ({
+export const WarningFilledIcon = styled(Icon).attrs({
   'data-component-name': 'icons/WarningFilledIcon/WarningFilledIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/WarningSquareIcon/WarningSquareIcon.tsx CHANGED Viewed

@@ -13,9 +13,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const WarningSquareIcon = styled(Icon).attrs(() => ({
+export const WarningSquareIcon = styled(Icon).attrs({
   'data-component-name': 'icons/WarningSquareIcon/WarningSquareIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/WorkflowAutomationIcon/WorkflowAutomationIcon.tsx CHANGED Viewed

@@ -22,9 +22,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const WorkflowAutomationIcon = styled(Icon).attrs(() => ({
+export const WorkflowAutomationIcon = styled(Icon).attrs({
   'data-component-name': 'icons/WorkflowAutomationIcon/WorkflowAutomationIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon.tsx CHANGED Viewed

@@ -20,9 +20,9 @@ const Icon = (props: IconProps) => (
   </svg>
 );
-export const WorkflowHierarchyIcon = styled(Icon).attrs(() => ({
+export const WorkflowHierarchyIcon = styled(Icon).attrs({
   'data-component-name': 'icons/WorkflowHierarchyIcon/WorkflowHierarchyIcon',
-}))<IconProps>`
+})`
   path {
     fill: ${({ color }) => getCssColorVariable(color)};
   }

package/src/icons/types.ts CHANGED Viewed

@@ -4,6 +4,7 @@ export type IconProps = {
   color?: string;
   size?: string;
   className?: string;
+  'data-component-name'?: string;
 } & React.SVGProps<SVGSVGElement>;
 export type CDNIconProps = IconProps & {