feat(viewport): Enhance Orientation Menu with Reformat Option and UI Improvements (#5184)

Co-authored-by: Joe Boccanfuso <joe.boccanfuso@radicalimaging.com>
Co-authored-by: Alireza <ar.sedghi@gmail.com>

diff.txt

@@ -0,0 +1,118 @@
+diff --git a/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx b/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
+index 6c1e4f8f6..56dac15b5 100644
+--- a/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
++++ b/extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx
+@@ -156,65 +156,65 @@ function ViewportOrientationMenu({
+       >
+         <Button
+           variant="ghost"
+-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
++          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+           onClick={() => handleOrientationChange('axial')}
+         >
+-          <span className="mr-0 flex w-4 items-center justify-center">
++          <div className="mr-1 flex w-6 items-center justify-start">
+             {currentOrientation === 'axial' ? (
+-              <Icons.Checked className="text-primary h-5 w-5" />
++              <Icons.Checked className="text-primary h-6 w-6" />
+             ) : null}
+-          </span>
+-          <span className="flex-1 text-left">Axial</span>
++          </div>
++          <div className="flex-1 text-left">Axial</div>
+         </Button>
+         <Button
+           variant="ghost"
+-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
++          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+           onClick={() => handleOrientationChange('sagittal')}
+         >
+-          <span className="mr-0 flex w-4 items-center justify-center">
++          <div className="mr-1 flex w-6 items-center justify-start">
+             {currentOrientation === 'sagittal' ? (
+-              <Icons.Checked className="text-primary h-5 w-5" />
++              <Icons.Checked className="text-primary h-6 w-6" />
+             ) : null}
+-          </span>
+-          <span className="flex-1 text-left">Sagittal</span>
++          </div>
++          <div className="flex-1 text-left">Sagittal</div>
+         </Button>
+         <Button
+           variant="ghost"
+-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
++          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+           onClick={() => handleOrientationChange('coronal')}
+         >
+-          <span className="mr-0 flex w-4 items-center justify-center">
++          <div className="mr-1 flex w-6 items-center justify-start">
+             {currentOrientation === 'coronal' ? (
+-              <Icons.Checked className="text-primary h-5 w-5" />
++              <Icons.Checked className="text-primary h-6 w-6" />
+             ) : null}
+-          </span>
+-          <span className="flex-1 text-left">Coronal</span>
++          </div>
++          <div className="flex-1 text-left">Coronal</div>
+         </Button>
+         <Button
+           variant="ghost"
+-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
++          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+           onClick={() => handleOrientationChange('acquisition')}
+         >
+-          <span className="mr-0 flex w-4 items-center justify-center">
++          <div className="mr-1 flex w-6 items-center justify-start">
+             {currentOrientation === 'acquisition' ? (
+-              <Icons.Checked className="text-primary h-5 w-5" />
++              <Icons.Checked className="text-primary h-6 w-6" />
+             ) : null}
+-          </span>
+-          <span className="flex-1 text-left">Acquisition</span>
++          </div>
++          <div className="flex-1 text-left">Acquisition</div>
+         </Button>
+         {/* Divider */}
+-        <div className="my-2 border-t border-white/20" />
++        <div className="mx-1 my-2 border-t border-white/20" />
+         <Button
+           variant="ghost"
+-          className="flex h-[28px] flex-shrink-0 items-center justify-start self-stretch"
++          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+           onClick={() => handleOrientationChange('reformat')}
+         >
+-          <span className="mr-0 flex w-4 items-center justify-center">
++          <div className="mr-1 flex w-6 items-center justify-start">
+             {currentOrientation === 'reformat' ? (
+-              <Icons.Checked className="text-primary h-5 w-5" />
++              <Icons.Checked className="text-primary h-6 w-6" />
+             ) : null}
+-          </span>
+-          <span className="flex-1 text-left">Reformat</span>
++          </div>
++          <div className="flex-1 text-left">Reformat</div>
+         </Button>
+       </PopoverContent>
+     </Popover>
+diff --git a/platform/ui-next/src/components/Icons/Sources/Checked.tsx b/platform/ui-next/src/components/Icons/Sources/Checked.tsx
+index 83c8fc57e..c88b75e0d 100644
+--- a/platform/ui-next/src/components/Icons/Sources/Checked.tsx
++++ b/platform/ui-next/src/components/Icons/Sources/Checked.tsx
+@@ -4,14 +4,14 @@ import type { IconProps } from '../types';
+ export const Checked = (props: IconProps) => (
+   <svg
+     {...props}
+-    width="24"
++    width="20"
+     height="24"
+-    viewBox="0 0 24 24"
++    viewBox="0 0 20 24"
+     fill="none"
+     xmlns="http://www.w3.org/2000/svg"
+   >
+     <path
+-      d="M16 9L11.3333 15L8 12.4737"
++      d="M14 9L9.3333 15L6 12.4737"
+       stroke="currentColor"
+       strokeWidth="1.5"
+       strokeLinecap="round"

extensions/cornerstone/src/components/ViewportOrientationMenu/ViewportOrientationMenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { cn, Icons, ToolButton, useIconPresentation } from '@ohif/ui-next';
+import { cn, Icons, useIconPresentation } from '@ohif/ui-next';
 import { useSystem } from '@ohif/core';
 import { Enums } from '@cornerstonejs/core';
 import { Popover, PopoverTrigger, PopoverContent, Button, useViewportGrid } from '@ohif/ui-next';
@@ -22,13 +22,20 @@ function ViewportOrientationMenu({
   onClose?: () => void;
   disabled?: boolean;
 }>) {
+  const { servicesManager, commandsManager } = useSystem();
+  const { cornerstoneViewportService, toolbarService } = servicesManager.services;
+  const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportId);
+  const viewportOrientation = viewportInfo.getOrientation();
+
   const [gridState] = useViewportGrid();
   const viewportIdToUse = viewportId || gridState.activeViewportId;
   const { IconContainer, className: iconClassName, containerProps } = useIconPresentation();
-  const { servicesManager, commandsManager } = useSystem();
-  const { cornerstoneViewportService, toolbarService } = servicesManager.services;
+  const [currentOrientation, setCurrentOrientation] = React.useState<string>(
+    typeof viewportOrientation === 'string' ? viewportOrientation : 'axial'
+  );
 
   const handleOrientationChange = (orientation: string) => {
+    setCurrentOrientation(orientation);
     const viewportInfo = cornerstoneViewportService.getViewportInfo(viewportIdToUse);
     const currentViewportType = viewportInfo?.getViewportType();
 
@@ -56,6 +63,9 @@ function ViewportOrientationMenu({
       case 'coronal':
         orientationEnum = Enums.OrientationAxis.CORONAL;
         break;
+      case 'reformat':
+        orientationEnum = Enums.OrientationAxis.REFORMAT;
+        break;
       default:
         orientationEnum = Enums.OrientationAxis.ACQUISITION;
     }
@@ -106,7 +116,7 @@ function ViewportOrientationMenu({
   // Get proper alignment and side based on the location using toolbar service
   const { align, side } = toolbarService.getAlignAndSide(Number(location));
 
-  const Icon = <Icons.OrientationSwitch className={iconClassName} />;
+  const Icon = React.createElement(getIcon(currentOrientation), { className: iconClassName });
   return (
     <Popover
       open={isOpen}
@@ -139,43 +149,93 @@ function ViewportOrientationMenu({
         </div>
       </PopoverTrigger>
       <PopoverContent
-        className="w-[100px] p-1"
+        className="h-[170px] w-[130px] flex-shrink-0 flex-col items-start rounded p-1"
         align={align}
         side={side}
+        style={{ left: 0 }}
       >
-        <div className="flex flex-col">
-          <Button
-            variant="ghost"
-            className="justify-start"
-            onClick={() => handleOrientationChange('axial')}
-          >
-            Axial
-          </Button>
-          <Button
-            variant="ghost"
-            className="justify-start"
-            onClick={() => handleOrientationChange('sagittal')}
-          >
-            Sagittal
-          </Button>
-          <Button
-            variant="ghost"
-            className="justify-start"
-            onClick={() => handleOrientationChange('coronal')}
-          >
-            Coronal
-          </Button>
-          <Button
-            variant="ghost"
-            className="justify-start"
-            onClick={() => handleOrientationChange('acquisition')}
-          >
-            Acquisition
-          </Button>
-        </div>
+        <Button
+          variant="ghost"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+          onClick={() => handleOrientationChange('axial')}
+        >
+          <div className="mr-1 flex w-6 items-center justify-start">
+            {currentOrientation === 'axial' ? (
+              <Icons.Checked className="text-primary h-6 w-6" />
+            ) : null}
+          </div>
+          <div className="flex-1 text-left">Axial</div>
+        </Button>
+        <Button
+          variant="ghost"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+          onClick={() => handleOrientationChange('sagittal')}
+        >
+          <div className="mr-1 flex w-6 items-center justify-start">
+            {currentOrientation === 'sagittal' ? (
+              <Icons.Checked className="text-primary h-6 w-6" />
+            ) : null}
+          </div>
+          <div className="flex-1 text-left">Sagittal</div>
+        </Button>
+        <Button
+          variant="ghost"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+          onClick={() => handleOrientationChange('coronal')}
+        >
+          <div className="mr-1 flex w-6 items-center justify-start">
+            {currentOrientation === 'coronal' ? (
+              <Icons.Checked className="text-primary h-6 w-6" />
+            ) : null}
+          </div>
+          <div className="flex-1 text-left">Coronal</div>
+        </Button>
+        <Button
+          variant="ghost"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+          onClick={() => handleOrientationChange('acquisition')}
+        >
+          <div className="mr-1 flex w-6 items-center justify-start">
+            {currentOrientation === 'acquisition' ? (
+              <Icons.Checked className="text-primary h-6 w-6" />
+            ) : null}
+          </div>
+          <div className="flex-1 text-left">Acquisition</div>
+        </Button>
+        {/* Divider */}
+        <div className="mx-1 my-2 border-t border-white/20" />
+        <Button
+          variant="ghost"
+          className="flex h-7 w-full flex-shrink-0 items-center justify-start self-stretch px-1 py-0"
+          onClick={() => handleOrientationChange('reformat')}
+        >
+          <div className="mr-1 flex w-6 items-center justify-start">
+            {currentOrientation === 'reformat' ? (
+              <Icons.Checked className="text-primary h-6 w-6" />
+            ) : null}
+          </div>
+          <div className="flex-1 text-left">Reformat</div>
+        </Button>
       </PopoverContent>
     </Popover>
   );
 }
 
+const getIcon = (orientationName: string) => {
+  switch (orientationName.toLowerCase()) {
+    case 'axial':
+      return Icons.OrientationSwitchA;
+    case 'sagittal':
+      return Icons.OrientationSwitchS;
+    case 'coronal':
+      return Icons.OrientationSwitchC;
+    case 'reformat':
+      return Icons.OrientationSwitchR;
+    case 'acquisition':
+      return Icons.OrientationSwitch;
+    default:
+      return Icons.OrientationSwitch;
+  }
+};
+
 export default ViewportOrientationMenu;

modes/basic-test-mode/src/toolbarButtons.ts

@@ -129,8 +129,7 @@ const toolbarButtons: Button[] = [
     props: {
       icon: 'OrientationSwitch',
       label: 'Orientation',
-      tooltip:
-        'Change viewport orientation between axial, sagittal, coronal and acquisition planes',
+      tooltip: 'Change viewport orientation between axial, sagittal, coronal and reformat planes',
       evaluate: {
         name: 'evaluate.orientationMenu',
       },

modes/longitudinal/src/toolbarButtons.ts

@@ -98,8 +98,7 @@ const toolbarButtons: Button[] = [
     props: {
       icon: 'OrientationSwitch',
       label: 'Orientation',
-      tooltip:
-        'Change viewport orientation between axial, sagittal, coronal and acquisition planes',
+      tooltip: 'Change viewport orientation between axial, sagittal, coronal and reformat planes',
       evaluate: {
         name: 'evaluate.orientationMenu',
         // hideWhenDisabled: true,

modes/preclinical-4d/src/toolbarButtons.tsx

@@ -412,8 +412,7 @@ const toolbarButtons = [
     props: {
       icon: 'OrientationSwitch',
       label: 'Orientation',
-      tooltip:
-        'Change viewport orientation between axial, sagittal, coronal and acquisition planes',
+      tooltip: 'Change viewport orientation between axial, sagittal, coronal and reformat planes',
       evaluate: {
         name: 'evaluate.orientationMenu',
         // hideWhenDisabled: true,

modes/segmentation/src/toolbarButtons.ts

@@ -80,8 +80,7 @@ const toolbarButtons: Button[] = [
     props: {
       icon: 'OrientationSwitch',
       label: 'Orientation',
-      tooltip:
-        'Change viewport orientation between axial, sagittal, coronal and acquisition planes',
+      tooltip: 'Change viewport orientation between axial, sagittal, coronal and reformat planes',
       evaluate: {
         name: 'evaluate.orientationMenu',
         // hideWhenDisabled: true,

modes/tmtv/src/toolbarButtons.ts

@@ -375,8 +375,7 @@ const toolbarButtons = [
     props: {
       icon: 'OrientationSwitch',
       label: 'Orientation',
-      tooltip:
-        'Change viewport orientation between axial, sagittal, coronal and acquisition planes',
+      tooltip: 'Change viewport orientation between axial, sagittal, coronal and reformat planes',
       evaluate: {
         name: 'evaluate.orientationMenu',
         // hideWhenDisabled: true,

modes/usAnnotation/src/toolbarButtons.ts

@@ -98,8 +98,7 @@ const toolbarButtons: Button[] = [
     props: {
       icon: 'OrientationSwitch',
       label: 'Orientation',
-      tooltip:
-        'Change viewport orientation between axial, sagittal, coronal and acquisition planes',
+      tooltip: 'Change viewport orientation between axial, sagittal, coronal and reformat planes',
       evaluate: {
         name: 'evaluate.orientationMenu',
         // hideWhenDisabled: true,

platform/ui-next/src/components/Icons/Icons.tsx

@@ -75,7 +75,12 @@ import IconTransferring from './Sources/IconTransferring';
 import Alert from './Sources/Alert';
 import AlertOutline from './Sources/AlertOutline';
 import Clipboard from './Sources/Clipboard';
+import Checked from './Sources/Checked';
 import OrientationSwitch from './Sources/OrientationSwitch';
+import OrientationSwitchA from './Sources/OrientationSwitchA';
+import OrientationSwitchS from './Sources/OrientationSwitchS';
+import OrientationSwitchC from './Sources/OrientationSwitchC';
+import OrientationSwitchR from './Sources/OrientationSwitchR';
 import LayerBackground from './Sources/LayerBackground';
 import LayerForeground from './Sources/LayerForeground';
 import LayerSegmentation from './Sources/LayerSegmentation';
@@ -405,6 +410,11 @@ export const Icons = {
   LayerForeground,
   LayerSegmentation,
   OrientationSwitch,
+  OrientationSwitchA,
+  OrientationSwitchS,
+  OrientationSwitchC,
+  OrientationSwitchR,
+  Checked,
   Clipboard,
   ActionNewDialog,
   GroupLayers,

platform/ui-next/src/components/Icons/Sources/Checked.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const Checked = (props: IconProps) => (
+  <svg
+    {...props}
+    width="20"
+    height="24"
+    viewBox="0 0 20 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M14 9L9.3333 15L6 12.4737"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export default Checked;

platform/ui-next/src/components/Icons/Sources/OrientationSwitchA.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const OrientationSwitchA = (props: IconProps) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.57766 17.4182L9.4655 19.8288L6.80457 21.4557"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M19.5918 15C19.8503 15.1669 20.067 15.3909 20.2253 15.6547C20.3836 15.9186 20.4793 16.2152 20.5049 16.5218C20.5049 18.3123 16.991 19.7938 12.5153 19.946"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.46782 19.828C5.73931 19.4354 3 18.1038 3 16.5218C3.02464 16.2179 3.11841 15.9236 3.27416 15.6614C3.4299 15.3992 3.6435 15.1761 3.89865 15.0091"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.60608 15.1079C8.10461 15.1079 7.78088 14.8159 7.78088 14.3525C7.78088 14.2256 7.81262 14.0479 7.88879 13.8511L10.5485 6.62109C10.7706 6.01172 11.1388 5.73242 11.7355 5.73242C12.3385 5.73242 12.7067 5.99902 12.9352 6.61475L15.6012 13.8511C15.6774 14.0605 15.7091 14.2065 15.7091 14.3525C15.7091 14.7969 15.3663 15.1079 14.8903 15.1079C14.4459 15.1079 14.1984 14.9048 14.0524 14.416L13.4493 12.6641H10.028L9.42493 14.4033C9.27258 14.8984 9.03137 15.1079 8.60608 15.1079ZM10.4152 11.3691H13.0494L11.7482 7.45898H11.7037L10.4152 11.3691Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default OrientationSwitchA;

platform/ui-next/src/components/Icons/Sources/OrientationSwitchC.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const OrientationSwitchC = (props: IconProps) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.57766 17.4182L9.4655 19.8288L6.80457 21.4557"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M19.5918 15C19.8503 15.1669 20.067 15.3909 20.2253 15.6547C20.3836 15.9186 20.4793 16.2152 20.5049 16.5218C20.5049 18.3123 16.991 19.7938 12.5153 19.946"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.46782 19.828C5.73931 19.4354 3 18.1038 3 16.5218C3.02464 16.2179 3.11841 15.9236 3.27416 15.6614C3.4299 15.3992 3.6435 15.1761 3.89865 15.0091"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M12.1735 15.1523C9.52649 15.1523 7.89514 13.356 7.89514 10.417C7.89514 7.49707 9.55188 5.68799 12.1417 5.68799C13.8365 5.68799 15.1759 6.48145 15.7789 7.8208C15.8805 8.03027 15.9313 8.24609 15.9313 8.43652C15.9313 8.87451 15.6456 9.15381 15.2076 9.15381C14.8331 9.15381 14.5856 8.97607 14.4078 8.57617C13.9825 7.59229 13.151 7.07812 12.1544 7.07812C10.5802 7.07812 9.57092 8.37305 9.57092 10.417C9.57092 12.4736 10.5739 13.7622 12.1608 13.7622C13.2081 13.7622 14.0143 13.3052 14.4332 12.3403C14.5983 11.9658 14.8077 11.8135 15.1632 11.8135C15.6139 11.8135 15.9249 12.1118 15.9249 12.5435C15.9249 12.7529 15.8741 12.9434 15.7726 13.1592C15.1886 14.4033 13.8873 15.1523 12.1735 15.1523Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default OrientationSwitchC;

platform/ui-next/src/components/Icons/Sources/OrientationSwitchR.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const OrientationSwitchR = (props: IconProps) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.57766 17.4182L9.4655 19.8288L6.80457 21.4557"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M19.5918 15C19.8503 15.1669 20.067 15.3909 20.2253 15.6547C20.3836 15.9186 20.4793 16.2152 20.5049 16.5218C20.5049 18.3123 16.991 19.7938 12.5153 19.946"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.46782 19.828C5.73931 19.4354 3 18.1038 3 16.5218C3.02464 16.2179 3.11841 15.9236 3.27416 15.6614C3.4299 15.3992 3.6435 15.1761 3.89865 15.0091"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.02502 15.127C8.51721 15.127 8.20618 14.8096 8.20618 14.2764V6.69092C8.20618 6.15771 8.51721 5.84033 9.02502 5.84033H11.8434C13.8239 5.84033 15.0109 6.93848 15.0109 8.69043C15.0109 9.88379 14.4015 10.8613 13.3414 11.2739L14.7887 13.813C14.9283 14.0479 14.9664 14.1875 14.9664 14.3779C14.9664 14.8096 14.611 15.127 14.1412 15.127C13.754 15.127 13.5636 14.9873 13.3097 14.5366L11.6783 11.5532H9.84387V14.2764C9.84387 14.8096 9.53284 15.127 9.02502 15.127ZM9.84387 10.2964H11.691C12.7321 10.2964 13.3351 9.71875 13.3351 8.72852C13.3351 7.76367 12.694 7.16699 11.6593 7.16699H9.84387V10.2964Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default OrientationSwitchR;

platform/ui-next/src/components/Icons/Sources/OrientationSwitchS.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { IconProps } from '../types';
+
+export const OrientationSwitchS = (props: IconProps) => (
+  <svg
+    {...props}
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M7.57766 17.4182L9.4655 19.8288L6.80457 21.4557"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M19.5918 15C19.8503 15.1669 20.067 15.3909 20.2253 15.6547C20.3836 15.9186 20.4793 16.2152 20.5049 16.5218C20.5049 18.3123 16.991 19.7938 12.5153 19.946"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M9.46782 19.828C5.73931 19.4354 3 18.1038 3 16.5218C3.02464 16.2179 3.11841 15.9236 3.27416 15.6614C3.4299 15.3992 3.6435 15.1761 3.89865 15.0091"
+      stroke="currentColor"
+      strokeWidth="1.25"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M11.4308 15.1523C9.60266 15.1523 8.38391 14.3906 8.02844 13.3496C7.97131 13.1973 7.93958 13.0322 7.93958 12.8799C7.93958 12.4229 8.23157 12.1309 8.66321 12.1309C9.02502 12.1309 9.25354 12.2769 9.43127 12.645C9.71692 13.4385 10.504 13.7939 11.4816 13.7939C12.5861 13.7939 13.3605 13.248 13.3605 12.4863C13.3605 11.8262 12.9034 11.4199 11.7101 11.1724L10.7262 10.9692C8.89172 10.5947 8.03479 9.73145 8.03479 8.39209C8.03479 6.77979 9.45032 5.68799 11.4371 5.68799C13.0558 5.68799 14.3126 6.41162 14.6871 7.62402C14.7252 7.72559 14.7443 7.84619 14.7443 7.99854C14.7443 8.39844 14.4586 8.67139 14.0333 8.67139C13.6525 8.67139 13.4176 8.50635 13.2462 8.15088C12.9352 7.37646 12.2814 7.04639 11.4244 7.04639C10.4088 7.04639 9.68518 7.52881 9.68518 8.29688C9.68518 8.91895 10.1422 9.31885 11.2848 9.56006L12.2687 9.76318C14.1984 10.1631 15.0109 10.9375 15.0109 12.2959C15.0109 14.0479 13.6334 15.1523 11.4308 15.1523Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default OrientationSwitchS;