@axinom/mosaic-ui 0.26.0-rc.9 → 0.26.1

package/src/components/Icons/Icons.spec.tsx

@@ -11,35 +11,44 @@ describe('Icons', () => {
   });
 
   it.each`
-    key                      | result
-    ${IconName.Archive}      | ${1}
-    ${IconName.Block}        | ${1}
-    ${IconName.Bulk}         | ${1}
-    ${IconName.Calendar}     | ${1}
-    ${IconName.Checkmark}    | ${1}
-    ${IconName.ChevronDown}  | ${1}
-    ${IconName.ChevronLeft}  | ${1}
-    ${IconName.ChevronRight} | ${1}
-    ${IconName.ChevronUp}    | ${1}
-    ${IconName.Delete}       | ${1}
-    ${IconName.Details}      | ${1}
-    ${IconName.Drag}         | ${6}
-    ${IconName.Ellipsis}     | ${1}
-    ${IconName.External}     | ${1}
-    ${IconName.Error}        | ${1}
-    ${IconName.File}         | ${1}
-    ${IconName.Info}         | ${1}
-    ${IconName.Minus}        | ${1}
-    ${IconName.Plus}         | ${1}
-    ${IconName.Retry}        | ${1}
-    ${IconName.Replace}      | ${1}
-    ${IconName.Minus}        | ${1}
-    ${IconName.Success}      | ${1}
-    ${IconName.Undo}         | ${1}
-    ${IconName.Unpublish}    | ${1}
-    ${IconName.Upload}       | ${1}
-    ${IconName.Warning}      | ${1}
-    ${IconName.X}            | ${1}
+    key                         | result
+    ${IconName.Archive}         | ${1}
+    ${IconName.Block}           | ${1}
+    ${IconName.Bulk}            | ${1}
+    ${IconName.Calendar}        | ${1}
+    ${IconName.Checkmark}       | ${1}
+    ${IconName.ChevronDown}     | ${1}
+    ${IconName.ChevronLeft}     | ${1}
+    ${IconName.ChevronRight}    | ${1}
+    ${IconName.ChevronUp}       | ${1}
+    ${IconName.Copy}            | ${1}
+    ${IconName.Delete}          | ${1}
+    ${IconName.Details}         | ${1}
+    ${IconName.Drag}            | ${6}
+    ${IconName.Ellipsis}        | ${1}
+    ${IconName.Error}           | ${1}
+    ${IconName.External}        | ${1}
+    ${IconName.File}            | ${1}
+    ${IconName.Info}            | ${1}
+    ${IconName.MidlineEllipsis} | ${1}
+    ${IconName.Minus}           | ${1}
+    ${IconName.NavigateRight}   | ${1}
+    ${IconName.Pause}           | ${1}
+    ${IconName.Play}            | ${1}
+    ${IconName.Plus}            | ${1}
+    ${IconName.Publish}         | ${1}
+    ${IconName.RemoveFilter}    | ${1}
+    ${IconName.Replace}         | ${1}
+    ${IconName.Retry}           | ${1}
+    ${IconName.Snapshot}        | ${1}
+    ${IconName.Stop}            | ${1}
+    ${IconName.Success}         | ${1}
+    ${IconName.Unarchive}       | ${1}
+    ${IconName.Undo}            | ${1}
+    ${IconName.Unpublish}       | ${1}
+    ${IconName.Upload}          | ${1}
+    ${IconName.Warning}         | ${1}
+    ${IconName.X}               | ${1}
   `('renders an icon for each key in IconName', ({ key, result }) => {
     const wrapper = mount(<Icons icon={key} />);
 

package/src/components/Icons/Icons.stories.tsx

@@ -29,17 +29,13 @@ export const All: Story = () => {
         <p>Bulk</p>
       </div>
       <div>
-        <Icons icon={IconName.Unpublish} />
-        <p>Unpublish</p>
+        <Icons icon={IconName.Calendar} />
+        <p>Calendar</p>
       </div>
       <div>
         <Icons icon={IconName.Checkmark} />
         <p>Checkmark</p>
       </div>
-      <div>
-        <Icons icon={IconName.Calendar} />
-        <p>Calendar</p>
-      </div>
       <div>
         <Icons icon={IconName.ChevronDown} />
         <p>ChevronDown</p>
@@ -76,14 +72,14 @@ export const All: Story = () => {
         <Icons icon={IconName.Ellipsis} />
         <p>Ellipsis</p>
       </div>
-      <div>
-        <Icons icon={IconName.External} />
-        <p>External</p>
-      </div>
       <div>
         <Icons icon={IconName.Error} />
         <p>Error</p>
       </div>
+      <div>
+        <Icons icon={IconName.External} />
+        <p>External</p>
+      </div>
       <div>
         <Icons icon={IconName.File} />
         <p>File</p>
@@ -104,6 +100,14 @@ export const All: Story = () => {
         <Icons icon={IconName.NavigateRight} />
         <p>NavigateRight</p>
       </div>
+      <div>
+        <Icons icon={IconName.Pause} />
+        <p>Pause</p>
+      </div>
+      <div>
+        <Icons icon={IconName.Play} />
+        <p>Play</p>
+      </div>
       <div>
         <Icons icon={IconName.Plus} />
         <p>Plus</p>
@@ -112,6 +116,10 @@ export const All: Story = () => {
         <Icons icon={IconName.Publish} />
         <p>Publish</p>
       </div>
+      <div>
+        <Icons icon={IconName.RemoveFilter} />
+        <p>RemoveFilter</p>
+      </div>
       <div>
         <Icons icon={IconName.Replace} />
         <p>Replace</p>
@@ -124,14 +132,26 @@ export const All: Story = () => {
         <Icons icon={IconName.Snapshot} />
         <p>Snapshot</p>
       </div>
+      <div>
+        <Icons icon={IconName.Stop} />
+        <p>Stop</p>
+      </div>
       <div>
         <Icons icon={IconName.Success} />
         <p>Success</p>
       </div>
+      <div>
+        <Icons icon={IconName.Unarchive} />
+        <p>Unarchive</p>
+      </div>
       <div>
         <Icons icon={IconName.Undo} />
         <p>Undo</p>
       </div>
+      <div>
+        <Icons icon={IconName.Unpublish} />
+        <p>Unpublish</p>
+      </div>
       <div>
         <Icons icon={IconName.Upload} />
         <p>Upload</p>
@@ -144,10 +164,6 @@ export const All: Story = () => {
         <Icons icon={IconName.X} />
         <p>X</p>
       </div>
-      <div>
-        <Icons icon={IconName.RemoveFilter} />
-        <p>RemoveFilter</p>
-      </div>
     </div>
   );
 };

package/src/components/Icons/Icons.tsx

@@ -27,24 +27,7 @@ const ArchiveIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
-const UnarchiveIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
-    <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      stroke="#FFFFFF"
-      strokeWidth="2"
-      d="M27.6,16.2H39V39H1.1V16.1h11.6 M30.6,11.1L20.3,2L10,11.1 M20.3,2v31.2"
-    />
-  </svg>
-);
-
-const Block: React.FC<{ className?: string }> = ({ className }) => (
+const BlockIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -76,22 +59,6 @@ const BulkIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
-const BulkUnpublishIcon: React.FC<{ className?: string }> = ({ className }) => (
-  <svg
-    className={clsx(classes.icons, className)}
-    version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 40 40"
-  >
-    <path
-      vectorEffect="non-scaling-stroke"
-      fill="none"
-      strokeWidth="2"
-      d="M26.1,7.6l-6.2-5.5l-6.2,5.5 M19.9,2v14.8 M9.1,16.2L30.9,38 M30.9,16.2L9.1,38"
-    />
-  </svg>
-);
-
 const CalendarIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
@@ -126,7 +93,7 @@ const CheckmarkIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
-const ChevronRightIcon: React.FC<{ className?: string }> = ({ className }) => (
+const ChevronDownIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -137,6 +104,7 @@ const ChevronRightIcon: React.FC<{ className?: string }> = ({ className }) => (
       vectorEffect="non-scaling-stroke"
       fill="none"
       strokeWidth="2"
+      transform="rotate(90, 20, 20)"
       d="M9.2,39.1L30.8,20L9.2,0.9"
     />
   </svg>
@@ -159,7 +127,7 @@ const ChevronLeftIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
-const ChevronDownIcon: React.FC<{ className?: string }> = ({ className }) => (
+const ChevronRightIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -170,7 +138,6 @@ const ChevronDownIcon: React.FC<{ className?: string }> = ({ className }) => (
       vectorEffect="non-scaling-stroke"
       fill="none"
       strokeWidth="2"
-      transform="rotate(90, 20, 20)"
       d="M9.2,39.1L30.8,20L9.2,0.9"
     />
   </svg>
@@ -278,7 +245,7 @@ const EllipsisIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
-const Error: React.FC<{ className?: string }> = ({ className }) => (
+const ErrorIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -294,7 +261,7 @@ const Error: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
-const WarningIcon: React.FC<{ className?: string }> = ({ className }) => (
+const ExternalIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -305,13 +272,13 @@ const WarningIcon: React.FC<{ className?: string }> = ({ className }) => (
       vectorEffect="non-scaling-stroke"
       fill="none"
       strokeWidth="2"
-      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M20,10.1v13.7l0,0V10.1z M20,29.9v-2.6l0,0
-      V29.9z"
-    ></path>
+      d="M39.8,14.8 M25.1,0.2 M38.9,15.7V1.3H24.8 M38.9,1.3
+	L16.4,23.8 M20.8,8.5H1.2v30.4h29.7V19.4"
+    />
   </svg>
 );
 
-const External: React.FC<{ className?: string }> = ({ className }) => (
+const FileIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -322,13 +289,13 @@ const External: React.FC<{ className?: string }> = ({ className }) => (
       vectorEffect="non-scaling-stroke"
       fill="none"
       strokeWidth="2"
-      d="M39.8,14.8 M25.1,0.2 M38.9,15.7V1.3H24.8 M38.9,1.3
-	L16.4,23.8 M20.8,8.5H1.2v30.4h29.7V19.4"
+      d="M1,34.7l4.4-18.8H39l-4.3,18.8L1,34.7L1,5.3h12.1
+      l3.5,3.8h18.1v6.9"
     />
   </svg>
 );
 
-const File: React.FC<{ className?: string }> = ({ className }) => (
+const InfoIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -339,13 +306,15 @@ const File: React.FC<{ className?: string }> = ({ className }) => (
       vectorEffect="non-scaling-stroke"
       fill="none"
       strokeWidth="2"
-      d="M1,34.7l4.4-18.8H39l-4.3,18.8L1,34.7L1,5.3h12.1
-      l3.5,3.8h18.1v6.9"
+      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M20,29.9
+      V16.2l0,0V29.9z M20,10.1v2.6l0,0V10.1z"
     />
   </svg>
 );
 
-const InfoIcon: React.FC<{ className?: string }> = ({ className }) => (
+const MidlineEllipsisIcon: React.FC<{ className?: string }> = ({
+  className,
+}) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -355,14 +324,15 @@ const InfoIcon: React.FC<{ className?: string }> = ({ className }) => (
     <path
       vectorEffect="non-scaling-stroke"
       fill="none"
+      stroke="#1478AF"
       strokeWidth="2"
-      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M20,29.9
-      V16.2l0,0V29.9z M20,10.1v2.6l0,0V10.1z"
+      d="M8,20c0,1.1-0.9,2-2,2S4,21.1,4,20s0.9-2,2-2S8,18.9,8,20z M20,18
+      c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S21.1,18,20,18z M34,18c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S35.1,18,34,18z"
     />
   </svg>
 );
 
-const PlusIcon: React.FC<{ className?: string }> = ({ className }) => (
+const MinusIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -373,12 +343,12 @@ const PlusIcon: React.FC<{ className?: string }> = ({ className }) => (
       vectorEffect="non-scaling-stroke"
       fill="none"
       strokeWidth="2"
-      d="M0,20h40 M20,40V0"
+      d="M0,20h40"
     />
   </svg>
 );
 
-const MinusIcon: React.FC<{ className?: string }> = ({ className }) => (
+const NavigateRightIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -388,8 +358,47 @@ const MinusIcon: React.FC<{ className?: string }> = ({ className }) => (
     <path
       vectorEffect="non-scaling-stroke"
       fill="none"
+      stroke="#FFFFFF"
       strokeWidth="2"
-      d="M0,20h40"
+      d="M22.8,1.1l15.4,15.4L24.1,30.6 M38.2,16.5H4.4v23.1"
+    />
+  </svg>
+);
+
+const PauseIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path fill="#1478AF" d="M4.5,2h10.3v36H4.5V2z M25.2,2h10.3v36H25.2V2z" />
+  </svg>
+);
+
+const PlayIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path fill="#1478AF" d="M33,20L7,35.4V4.6L33,20z" />
+  </svg>
+);
+
+const PlusIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      strokeWidth="2"
+      d="M0,20h40 M20,40V0"
     />
   </svg>
 );
@@ -410,7 +419,7 @@ const PublishIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
-const RetryIcon: React.FC<{ className?: string }> = ({ className }) => (
+const RemoveFilterIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -420,9 +429,10 @@ const RetryIcon: React.FC<{ className?: string }> = ({ className }) => (
     <path
       vectorEffect="non-scaling-stroke"
       fill="none"
+      stroke="#1478AF"
       strokeWidth="2"
-      d="M9.5,27.3c-4.1-5.8-2.6-13.8,3.1-17.8c4.5-3.2,10.6-3.1,15,0.2 M11.9,18.8l-2.4,8.5L1,24.8 M27,21.4l4.2-7.8
-	l7.8,4.2 M31.2,13.6c3.6,6.1,1.5,13.9-4.6,17.5c-4.1,2.4-9.2,2.3-13.2-0.2"
+      d="M13.7,16.9L3,4.6h28.6l-11.3,12v13.6l-6.5,5.1V16.9z M32.9,22.9l6.1,6.1L32.9,22.9z M32.9,22.9
+	l-6.1-6.1L32.9,22.9l-6.1,6.1L32.9,22.9z M32.9,22.9l6.1-6.1L32.9,22.9z"
     />
   </svg>
 );
@@ -445,7 +455,7 @@ const ReplaceIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
-const RevertIcon: React.FC<{ className?: string }> = ({ className }) => (
+const RetryIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -456,7 +466,8 @@ const RevertIcon: React.FC<{ className?: string }> = ({ className }) => (
       vectorEffect="non-scaling-stroke"
       fill="none"
       strokeWidth="2"
-      d="M2,11.8h36v25.8H3.2 M11.4,2.4L2,11.8l9.4,9.4"
+      d="M9.5,27.3c-4.1-5.8-2.6-13.8,3.1-17.8c4.5-3.2,10.6-3.1,15,0.2 M11.9,18.8l-2.4,8.5L1,24.8 M27,21.4l4.2-7.8
+	l7.8,4.2 M31.2,13.6c3.6,6.1,1.5,13.9-4.6,17.5c-4.1,2.4-9.2,2.3-13.2-0.2"
     />
   </svg>
 );
@@ -479,7 +490,18 @@ const SnapshotIcon: React.FC<{ className?: string }> = ({ className }) => (
   </svg>
 );
 
-const UploadIcon: React.FC<{ className?: string }> = ({ className }) => (
+const StopIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path fill="#1478AF" d="M5,5h30v30H5V5z" />
+  </svg>
+);
+
+const SuccessIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -490,12 +512,13 @@ const UploadIcon: React.FC<{ className?: string }> = ({ className }) => (
       vectorEffect="non-scaling-stroke"
       fill="none"
       strokeWidth="2"
-      d="M2,1.4h36 M20.1,39.4V8.7 M29.8,17.3l-9.7-8.6l-9.7,8.6"
+      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M29,13.5
+      L17.8,26.3L11,19.1"
     />
   </svg>
 );
 
-const XIcon: React.FC<{ className?: string }> = ({ className }) => (
+const UnarchiveIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -505,13 +528,14 @@ const XIcon: React.FC<{ className?: string }> = ({ className }) => (
     <path
       vectorEffect="non-scaling-stroke"
       fill="none"
+      stroke="#FFFFFF"
       strokeWidth="2"
-      d="M2.4,2.4l35.3,35.3 M37.6,2.4L2.4,37.6"
+      d="M27.6,16.2H39V39H1.1V16.1h11.6 M30.6,11.1L20.3,2L10,11.1 M20.3,2v31.2"
     />
   </svg>
 );
 
-const RemoveFilterIcon: React.FC<{ className?: string }> = ({ className }) => (
+const UndoIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -521,15 +545,13 @@ const RemoveFilterIcon: React.FC<{ className?: string }> = ({ className }) => (
     <path
       vectorEffect="non-scaling-stroke"
       fill="none"
-      stroke="#1478AF"
       strokeWidth="2"
-      d="M13.7,16.9L3,4.6h28.6l-11.3,12v13.6l-6.5,5.1V16.9z M32.9,22.9l6.1,6.1L32.9,22.9z M32.9,22.9
-	l-6.1-6.1L32.9,22.9l-6.1,6.1L32.9,22.9z M32.9,22.9l6.1-6.1L32.9,22.9z"
+      d="M2,11.8h36v25.8H3.2 M11.4,2.4L2,11.8l9.4,9.4"
     />
   </svg>
 );
 
-const SuccessIcon: React.FC<{ className?: string }> = ({ className }) => (
+const UnpublishIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -540,13 +562,12 @@ const SuccessIcon: React.FC<{ className?: string }> = ({ className }) => (
       vectorEffect="non-scaling-stroke"
       fill="none"
       strokeWidth="2"
-      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M29,13.5
-      L17.8,26.3L11,19.1"
+      d="M26.1,7.6l-6.2-5.5l-6.2,5.5 M19.9,2v14.8 M9.1,16.2L30.9,38 M30.9,16.2L9.1,38"
     />
   </svg>
 );
 
-const NavigateRight: React.FC<{ className?: string }> = ({ className }) => (
+const UploadIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -556,14 +577,13 @@ const NavigateRight: React.FC<{ className?: string }> = ({ className }) => (
     <path
       vectorEffect="non-scaling-stroke"
       fill="none"
-      stroke="#FFFFFF"
       strokeWidth="2"
-      d="M22.8,1.1l15.4,15.4L24.1,30.6 M38.2,16.5H4.4v23.1"
+      d="M2,1.4h36 M20.1,39.4V8.7 M29.8,17.3l-9.7-8.6l-9.7,8.6"
     />
   </svg>
 );
 
-const MidlineEllipsis: React.FC<{ className?: string }> = ({ className }) => (
+const WarningIcon: React.FC<{ className?: string }> = ({ className }) => (
   <svg
     className={clsx(classes.icons, className)}
     version="1.1"
@@ -573,13 +593,29 @@ const MidlineEllipsis: React.FC<{ className?: string }> = ({ className }) => (
     <path
       vectorEffect="non-scaling-stroke"
       fill="none"
-      stroke="#1478AF"
       strokeWidth="2"
-      d="M8,20c0,1.1-0.9,2-2,2S4,21.1,4,20s0.9-2,2-2S8,18.9,8,20z M20,18
-      c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S21.1,18,20,18z M34,18c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S35.1,18,34,18z"
+      d="M20,2c9.9,0,18,8.1,18,18s-8.1,18-18,18S2,29.9,2,20S10.1,2,20,2z M20,10.1v13.7l0,0V10.1z M20,29.9v-2.6l0,0
+      V29.9z"
+    ></path>
+  </svg>
+);
+
+const XIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg
+    className={clsx(classes.icons, className)}
+    version="1.1"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 40 40"
+  >
+    <path
+      vectorEffect="non-scaling-stroke"
+      fill="none"
+      strokeWidth="2"
+      d="M2.4,2.4l35.3,35.3 M37.6,2.4L2.4,37.6"
     />
   </svg>
 );
+
 /**
  * Default SVG icons. A 'className' prop can also be passed in.
  * @example
@@ -588,12 +624,10 @@ const MidlineEllipsis: React.FC<{ className?: string }> = ({ className }) => (
 export const Icons: React.FC<IconsProps> = ({ icon, className }) => {
   const icons: { [key in IconName]: JSX.Element } = {
     [IconName.Archive]: <ArchiveIcon className={className} />,
-    [IconName.Unarchive]: <UnarchiveIcon className={className} />,
-    [IconName.Block]: <Block className={className} />,
+    [IconName.Block]: <BlockIcon className={className} />,
     [IconName.Bulk]: <BulkIcon className={className} />,
-    [IconName.Unpublish]: <BulkUnpublishIcon className={className} />,
-    [IconName.Checkmark]: <CheckmarkIcon className={className} />,
     [IconName.Calendar]: <CalendarIcon className={className} />,
+    [IconName.Checkmark]: <CheckmarkIcon className={className} />,
     [IconName.ChevronDown]: <ChevronDownIcon className={className} />,
     [IconName.ChevronLeft]: <ChevronLeftIcon className={className} />,
     [IconName.ChevronRight]: <ChevronRightIcon className={className} />,
@@ -603,24 +637,29 @@ export const Icons: React.FC<IconsProps> = ({ icon, className }) => {
     [IconName.Details]: <DetailsIcon className={className} />,
     [IconName.Drag]: <DragIcon className={className} />,
     [IconName.Ellipsis]: <EllipsisIcon className={className} />,
-    [IconName.External]: <External className={className} />,
-    [IconName.Error]: <Error className={className} />,
-    [IconName.File]: <File className={className} />,
+    [IconName.Error]: <ErrorIcon className={className} />,
+    [IconName.External]: <ExternalIcon className={className} />,
+    [IconName.File]: <FileIcon className={className} />,
     [IconName.Info]: <InfoIcon className={className} />,
-    [IconName.MidlineEllipsis]: <MidlineEllipsis className={className} />,
+    [IconName.MidlineEllipsis]: <MidlineEllipsisIcon className={className} />,
     [IconName.Minus]: <MinusIcon className={className} />,
-    [IconName.NavigateRight]: <NavigateRight className={className} />,
+    [IconName.NavigateRight]: <NavigateRightIcon className={className} />,
+    [IconName.Pause]: <PauseIcon className={className} />,
+    [IconName.Play]: <PlayIcon className={className} />,
     [IconName.Plus]: <PlusIcon className={className} />,
     [IconName.Publish]: <PublishIcon className={className} />,
-    [IconName.Retry]: <RetryIcon className={className} />,
+    [IconName.RemoveFilter]: <RemoveFilterIcon className={className} />,
     [IconName.Replace]: <ReplaceIcon className={className} />,
+    [IconName.Retry]: <RetryIcon className={className} />,
     [IconName.Snapshot]: <SnapshotIcon className={className} />,
+    [IconName.Stop]: <StopIcon className={className} />,
     [IconName.Success]: <SuccessIcon className={className} />,
-    [IconName.Undo]: <RevertIcon className={className} />,
+    [IconName.Unarchive]: <UnarchiveIcon className={className} />,
+    [IconName.Undo]: <UndoIcon className={className} />,
+    [IconName.Unpublish]: <UnpublishIcon className={className} />,
     [IconName.Upload]: <UploadIcon className={className} />,
     [IconName.Warning]: <WarningIcon className={className} />,
     [IconName.X]: <XIcon className={className} />,
-    [IconName.RemoveFilter]: <RemoveFilterIcon className={className} />,
   };
 
   const actionIcon: JSX.Element =

package/src/index.ts

@@ -2,4 +2,6 @@
 export * from './components';
 export * from './helpers';
 export * from './hooks';
+export * from './initialize';
+export * from './types';
 export * from './validators';

package/src/initialize.ts

@@ -0,0 +1,25 @@
+import { ShowNotification } from './types/ui-config';
+
+export let showNotification: ShowNotification | (() => void) =
+  polyfill('showNotification');
+
+/**
+ * Passes the PiralApi methods to the UI library.
+ * @param app {UiConfig} object containing PiralApi methods for use in UI library.
+ */
+export function initializeUi(app: UiConfig): void {
+  ({ showNotification } = app);
+}
+
+export interface UiConfig {
+  showNotification: ShowNotification;
+}
+
+function polyfill(methodName: string): () => void {
+  return () => {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `Could not find ${methodName} method. Is the UI initialized in the pilet? To initialize UI library call 'initializeUi(app)' in your pilet.`,
+    );
+  };
+}