@orchestrator-ui/orchestrator-ui-components 0.2.4 → 0.2.5

package/src/hooks/useWithOrchestratorTheme.ts

@@ -0,0 +1,10 @@
+import { EuiThemeComputed } from '@elastic/eui';
+
+import { useOrchestratorTheme } from './useOrchestratorTheme';
+
+export function useWithOrchestratorTheme<T>(
+    getStylesFunction: (theme: EuiThemeComputed) => T,
+) {
+    const { theme } = useOrchestratorTheme();
+    return getStylesFunction(theme);
+}

package/src/icons/WfoArrowNarrowDown.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoArrowNarrowDown } from './WfoArrowNarrowDown';
+
+const Story: Meta<typeof WfoArrowNarrowDown> = {
+    component: WfoArrowNarrowDown,
+    title: 'Icons/WfoArrowNarrowDown',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/{WFOArrowNarrowDown.tsx → WfoArrowNarrowDown.tsx}

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { WFOIconProps } from './WFOIconProps';
 
-export const WFOArrowNarrowDown: FC<WFOIconProps> = ({
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoArrowNarrowDown: FC<WfoIconProps> = ({
     width = 16,
     height = 20,
     color = '#000000',
@@ -12,6 +13,7 @@ export const WFOArrowNarrowDown: FC<WFOIconProps> = ({
         viewBox="0 0 16 20"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
+        className="wfoArrowNarrowIcon"
     >
         <title>icon/arrow-narrow-down</title>
         <g

package/src/icons/WfoArrowNarrowUp.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoArrowNarrowUp } from './WfoArrowNarrowUp';
+
+const Story: Meta<typeof WfoArrowNarrowUp> = {
+    component: WfoArrowNarrowUp,
+    title: 'Icons/WfoArrowNarrowUp',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/{WFOArrowNarrowUp.tsx → WfoArrowNarrowUp.tsx}

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { WFOIconProps } from './WFOIconProps';
 
-export const WFOArrowNarrowUp: FC<WFOIconProps> = ({
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoArrowNarrowUp: FC<WfoIconProps> = ({
     width = 16,
     height = 20,
     color = '#000000',
@@ -12,6 +13,7 @@ export const WFOArrowNarrowUp: FC<WFOIconProps> = ({
         viewBox="0 0 16 20"
         version="1.1"
         xmlns="http://www.w3.org/2000/svg"
+        className="wfoArrowNarrowIcon"
     >
         <title>icon/arrow-narrow-up</title>
         <g

package/src/icons/WfoArrowsExpand.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoArrowsExpand } from './WfoArrowsExpand';
+
+const Story: Meta<typeof WfoArrowsExpand> = {
+    component: WfoArrowsExpand,
+    title: 'Icons/WfoArrowsExpand',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/WfoArrowsExpand.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoArrowsExpand: FC<WfoIconProps> = ({
+    width = 16,
+    height = 20,
+    color = '#000000',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <title>icon/arrows-expand</title>
+        <g
+            id="Symbols"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+        >
+            <g id="icon/arrows-expand" fill={color} fillRule="nonzero">
+                <path
+                    d="M8,3 C8.55228475,3 9,3.44771525 9,4 C9,4.55228475 8.55228475,5 8,5 L6.414,5 L9.70710678,8.29289322 C10.0976311,8.68341751 10.0976311,9.31658249 9.70710678,9.70710678 C9.31658249,10.0976311 8.68341751,10.0976311 8.29289322,9.70710678 L5,6.414 L5,8 C5,8.55228475 4.55228475,9 4,9 C3.44771525,9 3,8.55228475 3,8 L3.00278786,3.92476146 L3.02024007,3.79927424 L3.04973809,3.68785748 L3.08186687,3.60305436 L3.13590047,3.49621086 L3.21292769,3.38297765 L3.29291093,3.29285919 C3.32828727,3.25749917 3.36567442,3.22531295 3.40469339,3.19633458 L3.51222854,3.1267352 L3.60305314,3.08187107 L3.73400703,3.03584514 L3.8819045,3.00690716 L4,3 L8,3 Z M16,3 L20,3 L20.0752385,3.00278786 L20.2007258,3.02024007 L20.3121425,3.04973809 L20.4232215,3.09367336 L20.5207088,3.14599545 L20.6170223,3.21292769 L20.7071408,3.29291093 C20.7425008,3.32828727 20.774687,3.36567442 20.8036654,3.40469339 L20.8732648,3.51222854 L20.9181289,3.60305314 L20.9641549,3.73400703 L20.9930928,3.8819045 L21,4 L21,8 C21,8.55228475 20.5522847,9 20,9 C19.4477153,9 19,8.55228475 19,8 L19,6.414 L15.7071068,9.70710678 C15.3165825,10.0976311 14.6834175,10.0976311 14.2928932,9.70710678 C13.9023689,9.31658249 13.9023689,8.68341751 14.2928932,8.29289322 L17.585,5 L16,5 C15.4477153,5 15,4.55228475 15,4 C15,3.44771525 15.4477153,3 16,3 Z M9.70710678,14.2928932 C10.0976311,14.6834175 10.0976311,15.3165825 9.70710678,15.7071068 L6.414,19 L8,19 C8.55228475,19 9,19.4477153 9,20 C9,20.5522847 8.55228475,21 8,21 L3.92476146,20.9972121 L3.79927424,20.9797599 L3.68785748,20.9502619 L3.60305436,20.9181331 L3.49621086,20.8640995 L3.38297765,20.7870723 L3.29285919,20.7070891 C3.25749917,20.6717127 3.22531295,20.6343256 3.19633458,20.5953066 L3.12467117,20.4840621 L3.07122549,20.371336 L3.03584514,20.265993 L3.00683422,20.1174742 L3,20 L3,16 C3,15.4477153 3.44771525,15 4,15 C4.55228475,15 5,15.4477153 5,16 L5,17.585 L8.29289322,14.2928932 C8.68341751,13.9023689 9.31658249,13.9023689 9.70710678,14.2928932 Z M16,21 C15.4477153,21 15,20.5522847 15,20 C15,19.4477153 15.4477153,19 16,19 L17.585,19 L14.2928932,15.7071068 C13.9023689,15.3165825 13.9023689,14.6834175 14.2928932,14.2928932 C14.6834175,13.9023689 15.3165825,13.9023689 15.7071068,14.2928932 L19,17.585 L19,16 C19,15.4477153 19.4477153,15 20,15 C20.5522847,15 21,15.4477153 21,16 L20.9972121,20.0752385 L20.9797599,20.2007258 L20.9502619,20.3121425 L20.9063266,20.4232215 L20.8540045,20.5207088 L20.7902954,20.6128994 L20.7073018,20.7068684 C20.6717127,20.7425008 20.6343256,20.774687 20.5953066,20.8036654 L20.4840621,20.8753288 L20.371336,20.9287745 L20.2350988,20.9722083 L20.1539846,20.9882174 L20,21 L16,21 Z"
+                    id="Shape"
+                ></path>
+            </g>
+        </g>
+    </svg>
+);

package/src/icons/WfoCheckmarkCircleFill.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoCheckmarkCircleFill } from './WfoCheckmarkCircleFill';
+
+const Story: Meta<typeof WfoCheckmarkCircleFill> = {
+    component: WfoCheckmarkCircleFill,
+    title: 'Icons/WfoCheckmarkCircleFill',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/{WFOCheckmarkCircleFill.tsx → WfoCheckmarkCircleFill.tsx}

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { WFOIconProps } from './WFOIconProps';
 
-export const WFOCheckmarkCircleFill: FC<WFOIconProps> = ({
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoCheckmarkCircleFill: FC<WfoIconProps> = ({
     width = 24,
     height = 24,
     color = '#000000',

package/src/icons/WfoChevronDown.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoChevronDown } from './WfoChevronDown';
+
+const Story: Meta<typeof WfoChevronDown> = {
+    component: WfoChevronDown,
+    title: 'Icons/WfoChevronDown',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/{WFOChevronDown.tsx → WfoChevronDown.tsx}

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { WFOIconProps } from './WFOIconProps';
 
-export const WFOChevronDown: FC<WFOIconProps> = ({
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoChevronDown: FC<WfoIconProps> = ({
     width = 24,
     height = 24,
     color = '#000000',

package/src/icons/WfoChevronUp.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoChevronUp } from './WfoChevronUp';
+
+const Story: Meta<typeof WfoChevronUp> = {
+    component: WfoChevronUp,
+    title: 'Icons/WfoChevronUp',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/WfoChevronUp.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoChevronUp: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <title>icon/chevron-up</title>
+        <g
+            id="Symbols"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+        >
+            <g id="icon/chevron-up" fill={color}>
+                <path
+                    d="M16.7071,14.7071 C16.3166,15.0976 15.6834,15.0976 15.2929,14.7071 L12,11.41421 L8.70711,14.7071 C8.31658,15.0976 7.68342,15.0976 7.29289,14.7071 C6.90237,14.3166 6.90237,13.6834 7.29289,13.2929 L11.29289,9.29289 C11.68342,8.90237 12.3166,8.90237 12.7071,9.29289 L16.7071,13.2929 C17.0976,13.6834 17.0976,14.3166 16.7071,14.7071 Z"
+                    id="Path"
+                ></path>
+            </g>
+        </g>
+    </svg>
+);

package/src/icons/WfoClipboardCopy.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoClipboardCopy } from './WfoClipboardCopy';
+
+const Story: Meta<typeof WfoClipboardCopy> = {
+    component: WfoClipboardCopy,
+    title: 'Icons/WfoClipboardCopy',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/WfoClipboardCopy.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoClipboardCopy: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <title>icon/clipboard-copy</title>
+        <g
+            id="Symbols"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+        >
+            <g id="icon/clipboard-copy" fill={color} fillRule="nonzero">
+                <path
+                    d="M12,11 C11.4477,11 11,11.4477 11,12 C11,12.5523 11.4477,13 12,13 L12,11 Z M15,13 C15.5523,13 16,12.5523 16,12 C16,11.4477 15.5523,11 15,11 L15,13 Z M12,15 C11.4477,15 11,15.4477 11,16 C11,16.5523 11.4477,17 12,17 L12,15 Z M15,17 C15.5523,17 16,16.5523 16,16 C16,15.4477 15.5523,15 15,15 L15,17 Z M9,11 C8.44772,11 8,11.4477 8,12 C8,12.5523 8.44772,13 9,13 L9,11 Z M9.01,13 C9.56228,13 10.01,12.5523 10.01,12 C10.01,11.4477 9.56228,11 9.01,11 L9.01,13 Z M9,15 C8.44772,15 8,15.4477 8,16 C8,16.5523 8.44772,17 9,17 L9,15 Z M9.01,17 C9.56228,17 10.01,16.5523 10.01,16 C10.01,15.4477 9.56228,15 9.01,15 L9.01,17 Z M18,7 L18,19 L20,19 L20,7 L18,7 Z M17,20 L7,20 L7,22 L17,22 L17,20 Z M6,19 L6,7 L4,7 L4,19 L6,19 Z M7,6 L9,6 L9,4 L7,4 L7,6 Z M15,6 L17,6 L17,4 L15,4 L15,6 Z M7,20 C6.44772,20 6,19.5523 6,19 L4,19 C4,20.6569 5.34315,22 7,22 L7,20 Z M18,19 C18,19.5523 17.5523,20 17,20 L17,22 C18.6569,22 20,20.6569 20,19 L18,19 Z M20,7 C20,5.34315 18.6569,4 17,4 L17,6 C17.5523,6 18,6.44772 18,7 L20,7 Z M6,7 C6,6.44772 6.44772,6 7,6 L7,4 C5.34315,4 4,5.34315 4,7 L6,7 Z M12,13 L15,13 L15,11 L12,11 L12,13 Z M12,17 L15,17 L15,15 L12,15 L12,17 Z M11,4 L13,4 L13,2 L11,2 L11,4 Z M13,6 L11,6 L11,8 L13,8 L13,6 Z M11,6 C10.4477,6 10,5.55228 10,5 L8,5 C8,6.65685 9.34315,8 11,8 L11,6 Z M14,5 C14,5.55228 13.5523,6 13,6 L13,8 C14.6569,8 16,6.65685 16,5 L14,5 Z M13,4 C13.5523,4 14,4.44772 14,5 L16,5 C16,3.34315 14.6569,2 13,2 L13,4 Z M11,2 C9.34315,2 8,3.34315 8,5 L10,5 C10,4.44772 10.4477,4 11,4 L11,2 Z M9,13 L9.01,13 L9.01,11 L9,11 L9,13 Z M9,17 L9.01,17 L9.01,15 L9,15 L9,17 Z"
+                    id="Shape"
+                ></path>
+            </g>
+        </g>
+    </svg>
+);

package/src/icons/WfoCode.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoCode } from './WfoCode';
+
+const Story: Meta<typeof WfoCode> = {
+    component: WfoCode,
+    title: 'Icons/WfoCode',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/WfoCode.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoCode: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => {
+    return (
+        <svg
+            width={width}
+            height={height}
+            viewBox="0 0 24 24"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <title>icon/code</title>
+            <g
+                id="Symbols"
+                stroke="none"
+                strokeWidth="1"
+                fill="none"
+                fillRule="evenodd"
+            >
+                <g id="icon/code" fill={color}>
+                    <path
+                        d="M14.3162007,5.05158423 C14.8402007,5.22623423 15.1233007,5.79255423 14.9487007,6.31649423 L10.9486807,18.3165442 C10.7740407,18.8404442 10.2077207,19.1236442 9.68377075,18.9489442 C9.15983075,18.7743442 8.87667075,18.2079442 9.05132075,17.6840442 L13.0513007,5.68404423 C13.2260007,5.16010423 13.7923007,4.87694423 14.3162007,5.05158423 Z M7.70711075,8.29316423 C8.09763075,8.68368423 8.09763075,9.31685423 7.70711075,9.70737423 L5.41421075,12.0002442 L7.70711075,14.2931442 C8.09763075,14.6836442 8.09763075,15.3168442 7.70711075,15.7073442 C7.31658075,16.0979442 6.68342075,16.0979442 6.29289075,15.7073442 L3.29289075,12.7073442 C2.90236975,12.3168442 2.90236975,11.6836842 3.29289075,11.2931642 L6.29289075,8.29316423 C6.68342075,7.90264423 7.31658075,7.90264423 7.70711075,8.29316423 Z M16.2929007,8.29316423 C16.6834007,7.90264423 17.3166007,7.90264423 17.7071007,8.29316423 L20.7071007,11.2931642 C21.0976007,11.6836842 21.0976007,12.3168442 20.7071007,12.7073442 L17.7071007,15.7073442 C17.3166007,16.0979442 16.6834007,16.0979442 16.2929007,15.7073442 C15.9024007,15.3168442 15.9024007,14.6836442 16.2929007,14.2931442 L18.5858007,12.0002442 L16.2929007,9.70737423 C15.9024007,9.31685423 15.9024007,8.68368423 16.2929007,8.29316423 Z"
+                        id="Shape"
+                    ></path>
+                </g>
+            </g>
+        </svg>
+    );
+};

package/src/icons/WfoCogFill.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoCogFill } from './WfoCogFill';
+
+const Story: Meta<typeof WfoCogFill> = {
+    component: WfoCogFill,
+    title: 'Icons/WfoCogFill',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/WfoCogFill.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoCogFill: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => {
+    return (
+        <svg
+            width={width}
+            height={height}
+            viewBox={`0 0 ${width} ${height}`}
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <title>icon/cog-fill</title>
+            <g
+                id="Symbols"
+                stroke="none"
+                strokeWidth="1"
+                fill="none"
+                fillRule="evenodd"
+            >
+                <g id="icon/cog-fill" fill={color}>
+                    <path
+                        d="M9.4891975,1.1709375 C9.1101975,-0.3903125 6.8897975,-0.3903125 6.5107775,1.1709375 C6.2659375,2.1794875 5.1104475,2.6581075 4.2241575,2.1180875 C2.8521775,1.2821175 1.2821175,2.8521775 2.1180875,4.2241575 C2.6581075,5.1104475 2.1794875,6.2659275 1.1709375,6.5107775 C-0.3903125,6.8897975 -0.3903125,9.1101975 1.1709375,9.4891975 C2.1794875,9.7340975 2.6581075,10.8895975 2.1180875,11.7757975 C1.2821175,13.1477975 2.8521775,14.7178975 4.2241675,13.8818975 C5.1104475,13.3418975 6.2659375,13.8204975 6.5107775,14.8290975 C6.8897975,16.3902975 9.1101975,16.3902975 9.4891975,14.8290975 C9.7340975,13.8204975 10.8895975,13.3418975 11.7757975,13.8818975 C13.1477975,14.7178975 14.7178975,13.1477975 13.8818975,11.7757975 C13.3418975,10.8895975 13.8204975,9.7340975 14.8290975,9.4891975 C16.3902975,9.1101975 16.3902975,6.8897975 14.8290975,6.5107775 C13.8204975,6.2659275 13.3418975,5.1104475 13.8818975,4.2241575 C14.7178975,2.8521775 13.1477975,1.2821175 11.7757975,2.1180875 C10.8895975,2.6581075 9.7340975,2.1794875 9.4891975,1.1709375 Z M7.9999975,10.9999975 C9.6568975,10.9999975 10.9999975,9.6568975 10.9999975,7.9999975 C10.9999975,6.3431475 9.6568975,4.9999975 7.9999975,4.9999975 C6.3431475,4.9999975 4.9999975,6.3431475 4.9999975,7.9999975 C4.9999975,9.6568975 6.3431475,10.9999975 7.9999975,10.9999975 Z"
+                        id="Shape"
+                    ></path>
+                </g>
+            </g>
+        </svg>
+    );
+};

package/src/icons/WfoEyeFill.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoEyeFill } from './WfoEyeFill';
+
+const Story: Meta<typeof WfoEyeFill> = {
+    component: WfoEyeFill,
+    title: 'Icons/WfoEyeFill',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/WfoEyeFill.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoEyeFill: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => {
+    return (
+        <svg
+            width={width}
+            height={height}
+            viewBox="0 0 24 24"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <title>icon/eye-fill</title>
+            <g
+                id="Symbols"
+                stroke="none"
+                strokeWidth="1"
+                fill="none"
+                fillRule="evenodd"
+            >
+                <g id="icon/eye-fill" fill={color}>
+                    <path
+                        d="M11.542206,5 C16.019836,5 19.810136,7.94288 21.084436,11.99996 C19.810136,16.0571 16.019836,19 11.542186,19 C7.064556,19 3.274276,16.0571 2,12 C3.274256,7.94291 7.064556,5 11.542206,5 Z M11.542246,8 C9.333106,8 7.542246,9.79086 7.542246,12 C7.542246,14.2091 9.333106,16 11.542246,16 C13.751336,16 15.542246,14.2091 15.542246,12 C15.542246,9.79086 13.751336,8 11.542246,8 Z M11.542246,10 C12.646836,10 13.542236,10.89543 13.542236,12 C13.542236,13.1046 12.646836,14 11.542246,14 C10.437676,14 9.542246,13.1046 9.542246,12 C9.542246,10.89543 10.437676,10 11.542246,10 Z"
+                        id="Combined-Shape"
+                    ></path>
+                </g>
+            </g>
+        </svg>
+    );
+};

package/src/icons/{WFOIconProps.ts → WfoIconProps.ts}

@@ -1,4 +1,4 @@
-export type WFOIconProps = {
+export type WfoIconProps = {
     width?: number | string;
     height?: number | string;
     color?: string;

package/src/icons/WfoLogoutIcon.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoLogoutIcon } from './WfoLogoutIcon';
+
+const Story: Meta<typeof WfoLogoutIcon> = {
+    component: WfoLogoutIcon,
+    title: 'Icons/WfoLogoutIcon',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/{WFOLogoutIcon.tsx → WfoLogoutIcon.tsx}

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { WFOIconProps } from './WFOIconProps';
 
-export const WFOLogoutIcon: FC<WFOIconProps> = ({
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoLogoutIcon: FC<WfoIconProps> = ({
     width = 24,
     height = 24,
     color = '#000000',

package/src/icons/WfoMinusCircleFill.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoMinusCircleFill } from './WfoMinusCircleFill';
+
+const Story: Meta<typeof WfoMinusCircleFill> = {
+    component: WfoMinusCircleFill,
+    title: 'Icons/WfoMinusCircleFill',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/WfoMinusCircleFill.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoMinusCircleFill: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <title>icon/minus-circle-fill</title>
+        <g
+            id="Symbols"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+        >
+            <g id="icon/minus-circle-fill" fill={color}>
+                <path
+                    d="M12,20 C16.4183,20 20,16.4183 20,12 C20,7.58172 16.4183,4 12,4 C7.58172,4 4,7.58172 4,12 C4,16.4183 7.58172,20 12,20 Z M9,11 C8.44772,11 8,11.44772 8,12 C8,12.5523 8.44772,13 9,13 L15,13 C15.5523,13 16,12.5523 16,12 C16,11.44772 15.5523,11 15,11 L9,11 Z"
+                    id="Shape"
+                ></path>
+            </g>
+        </g>
+    </svg>
+);

package/src/icons/WfoMinusCircleOutline.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoMinusCircleOutline } from './WfoMinusCircleOutline';
+
+const Story: Meta<typeof WfoMinusCircleOutline> = {
+    component: WfoMinusCircleOutline,
+    title: 'Icons/WfoMinusCircleOutline',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/{WFOMinusCircleOutline.tsx → WfoMinusCircleOutline.tsx}

@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { WFOIconProps } from './WFOIconProps';
 
-export const WFOMinusCircleOutline: FC<WFOIconProps> = ({
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoMinusCircleOutline: FC<WfoIconProps> = ({
     width = 24,
     height = 24,
     color = '#000000',

package/src/icons/WfoPencilAlt.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoPencilAlt } from './WfoPencilAlt';
+
+const Story: Meta<typeof WfoPencilAlt> = {
+    component: WfoPencilAlt,
+    title: 'Icons/WfoPencilAlt',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/WfoPencilAlt.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoPencilAlt: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => (
+    <svg
+        width={width}
+        height={height}
+        viewBox="0 0 24 24"
+        version="1.1"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+        <title>icon/pencil-alt</title>
+        <g
+            id="Symbols"
+            stroke="none"
+            strokeWidth="1"
+            fill="none"
+            fillRule="evenodd"
+        >
+            <g id="icon/pencil-alt" fill={color} fillRule="nonzero">
+                <path
+                    d="M10,5.9999975 C10.55228,5.9999975 11,6.4477175 11,6.9999975 C11,7.5522775 10.55228,7.9999975 10,7.9999975 L6,7.9999975 L6,17.9999975 L16,17.9999975 L16,13.9999975 C16,13.4476975 16.4477,12.9999975 17,12.9999975 C17.5523,12.9999975 18,13.4476975 18,13.9999975 L18,17.9999975 C18,19.1045975 17.1046,19.9999975 16,19.9999975 L6,19.9999975 C4.89543,19.9999975 4,19.1045975 4,17.9999975 L4,7.9999975 C4,6.8954275 4.89543,5.9999975 6,5.9999975 L10,5.9999975 Z M16.5858,4.5857875 C17.3668,3.8047375 18.6332,3.8047375 19.4142,4.5857875 C20.1953,5.3668275 20.1953,6.6331575 19.4142,7.4142075 L11.82842,15 L9,15 L9,12.1715975 Z"
+                    id="Combined-Shape"
+                ></path>
+            </g>
+        </g>
+    </svg>
+);

package/src/icons/WfoPlayFill.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+
+import { WfoPlayFill } from './WfoPlayFill';
+
+const Story: Meta<typeof WfoPlayFill> = {
+    component: WfoPlayFill,
+    title: 'Icons/WfoPlayFill',
+};
+export default Story;
+
+export const Primary = {
+    args: {},
+};

package/src/icons/WfoPlayFill.tsx

@@ -0,0 +1,35 @@
+import React, { FC } from 'react';
+
+import { WfoIconProps } from './WfoIconProps';
+
+export const WfoPlayFill: FC<WfoIconProps> = ({
+    width = 24,
+    height = 24,
+    color = '#000000',
+}) => {
+    return (
+        <svg
+            width={width}
+            height={height}
+            viewBox="0 0 24 24"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <title>icon/play-fill</title>
+            <g
+                id="Symbols"
+                stroke="none"
+                strokeWidth="1"
+                fill="none"
+                fillRule="evenodd"
+            >
+                <g id="icon/play-id" fill={color}>
+                    <path
+                        d="M12,20 C16.4183,20 20,16.4183 20,12 C20,7.58172 16.4183,4 12,4 C7.58172,4 4,7.58172 4,12 C4,16.4183 7.58172,20 12,20 Z M11.5547,9.16795 C11.24784,8.96338 10.8533,8.94431 10.52814,9.11833 C10.20298,9.29235 10,9.63121 10,10.0000011 L10,14.0000011 C10,14.3688 10.20298,14.7077 10.52814,14.8817 C10.8533,15.0557 11.24784,15.0366 11.5547,14.8321 L14.5547,12.8321 C14.8329,12.6466 15,12.3344 15,12.0000011 C15,11.66565 14.8329,11.35342 14.5547,11.16795 L11.5547,9.16795 Z"
+                        id="Shape"
+                    ></path>
+                </g>
+            </g>
+        </svg>
+    );
+};