feat: update input and output fields design

packages/design-system/src/new-ui/Icons/Download02.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const Download02 = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M19 19H1M16 9L10 15M10 15L4 9M10 15V1"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+});
+Download02.displayName = "Download02";

packages/design-system/src/new-ui/Icons/FastBackward.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const FastBackward = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M21.9997 16.437C21.9997 17.567 21.9997 18.1321 21.7714 18.4091C21.5731 18.6497 21.2739 18.7841 20.9623 18.7724C20.6036 18.759 20.1813 18.3836 19.3367 17.6329L14.345 13.1958C13.8797 12.7822 13.6471 12.5754 13.5614 12.3312C13.4861 12.1168 13.4861 11.8831 13.5614 11.6687C13.6471 11.4245 13.8797 11.2177 14.345 10.8041L19.3367 6.36706C20.1813 5.61631 20.6036 5.24093 20.9623 5.22751C21.2739 5.21584 21.5731 5.35021 21.7714 5.59086C21.9997 5.86787 21.9997 6.43288 21.9997 7.56291V16.437Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M10.9997 16.437C10.9997 17.567 10.9997 18.1321 10.7714 18.4091C10.5731 18.6497 10.2739 18.7841 9.96228 18.7724C9.60359 18.759 9.1813 18.3836 8.3367 17.6329L3.34502 13.1958C2.87973 12.7822 2.64709 12.5754 2.56135 12.3312C2.48606 12.1168 2.48606 11.8831 2.56135 11.6687C2.64709 11.4245 2.87973 11.2177 3.34502 10.8041L8.3367 6.36706C9.1813 5.61631 9.60359 5.24093 9.96228 5.22751C10.2739 5.21584 10.5731 5.35021 10.7714 5.59086C10.9997 5.86787 10.9997 6.43288 10.9997 7.56291V16.437Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+});
+FastBackward.displayName = "FastBackward";

packages/design-system/src/new-ui/Icons/FastForward.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const FastForward = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M13 16.437C13 17.5671 13 18.1321 13.2283 18.4091C13.4266 18.6497 13.7258 18.7841 14.0374 18.7725C14.3961 18.759 14.8184 18.3837 15.663 17.6329L20.6547 13.1959C21.12 12.7823 21.3526 12.5755 21.4383 12.3313C21.5136 12.1168 21.5136 11.8832 21.4383 11.6687C21.3526 11.4245 21.12 11.2177 20.6547 10.8041L15.663 6.36709C14.8184 5.61634 14.3961 5.24096 14.0374 5.22754C13.7258 5.21588 13.4266 5.35024 13.2283 5.59089C13 5.8679 13 6.43291 13 7.56295V16.437Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M2 16.437C2 17.5671 2 18.1321 2.22827 18.4091C2.42657 18.6497 2.72579 18.7841 3.0374 18.7725C3.39609 18.759 3.81839 18.3837 4.66298 17.6329L9.65466 13.1959C10.12 12.7823 10.3526 12.5755 10.4383 12.3313C10.5136 12.1168 10.5136 11.8832 10.4383 11.6687C10.3526 11.4245 10.12 11.2177 9.65466 10.8041L4.66298 6.36709C3.81839 5.61634 3.39609 5.24096 3.0374 5.22754C2.72579 5.21588 2.42657 5.35024 2.22827 5.59089C2 5.8679 2 6.43291 2 7.56295V16.437Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+});
+FastForward.displayName = "FastForward";

packages/design-system/src/new-ui/Icons/VolumeMax.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const VolumeMax = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M19.7479 4.99999C21.1652 6.97023 22 9.38762 22 12C22 14.6124 21.1652 17.0298 19.7479 19M15.7453 7.99999C16.5362 9.13382 17 10.5127 17 12C17 13.4872 16.5362 14.8662 15.7453 16M9.63432 5.36567L6.46863 8.53136C6.29568 8.70431 6.2092 8.79079 6.10828 8.85263C6.01881 8.90746 5.92127 8.94786 5.81923 8.97236C5.70414 8.99999 5.58185 8.99999 5.33726 8.99999H3.6C3.03995 8.99999 2.75992 8.99999 2.54601 9.10898C2.35785 9.20485 2.20487 9.35784 2.10899 9.546C2 9.75991 2 10.0399 2 10.6V13.4C2 13.96 2 14.2401 2.10899 14.454C2.20487 14.6421 2.35785 14.7951 2.54601 14.891C2.75992 15 3.03995 15 3.6 15H5.33726C5.58185 15 5.70414 15 5.81923 15.0276C5.92127 15.0521 6.01881 15.0925 6.10828 15.1473C6.2092 15.2092 6.29568 15.2957 6.46863 15.4686L9.63431 18.6343C10.0627 19.0627 10.2769 19.2769 10.4608 19.2913C10.6203 19.3039 10.7763 19.2393 10.8802 19.1176C11 18.9773 11 18.6744 11 18.0686V5.93136C11 5.32554 11 5.02264 10.8802 4.88237C10.7763 4.76067 10.6203 4.69608 10.4608 4.70864C10.2769 4.72311 10.0627 4.9373 9.63432 5.36567Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+});
+VolumeMax.displayName = "VolumeMax";

packages/design-system/src/new-ui/Icons/VolumeX.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import * as React from "react";
+import { IconBase, IconBaseProps } from "./IconBase";
+
+export const VolumeX = React.forwardRef<
+  SVGSVGElement,
+  Omit<IconBaseProps, "viewBox" | "children">
+>((props, ref) => {
+  const { className, ...passThrough } = props;
+  return (
+    <IconBase
+      {...passThrough}
+      ref={ref}
+      viewBox="0 0 24 24"
+      className={className}
+    >
+      <path
+        d="M22 8.99999L16 15M16 8.99999L22 15M9.63432 5.36567L6.46863 8.53136C6.29568 8.70431 6.2092 8.79079 6.10828 8.85263C6.01881 8.90746 5.92127 8.94786 5.81923 8.97236C5.70414 8.99999 5.58185 8.99999 5.33726 8.99999H3.6C3.03995 8.99999 2.75992 8.99999 2.54601 9.10898C2.35785 9.20485 2.20487 9.35784 2.10899 9.546C2 9.75991 2 10.0399 2 10.6V13.4C2 13.96 2 14.2401 2.10899 14.454C2.20487 14.6421 2.35785 14.7951 2.54601 14.891C2.75992 15 3.03995 15 3.6 15H5.33726C5.58185 15 5.70414 15 5.81923 15.0276C5.92127 15.0521 6.01881 15.0925 6.10828 15.1473C6.2092 15.2092 6.29568 15.2957 6.46863 15.4686L9.63431 18.6343C10.0627 19.0627 10.2769 19.2769 10.4608 19.2913C10.6203 19.3039 10.7763 19.2393 10.8802 19.1176C11 18.9773 11 18.6744 11 18.0686V5.93136C11 5.32554 11 5.02264 10.8802 4.88237C10.7763 4.76067 10.6203 4.69608 10.4608 4.70864C10.2769 4.72311 10.0627 4.9373 9.63432 5.36567Z"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </IconBase>
+  );
+});
+VolumeX.displayName = "VolumeX";

packages/design-system/src/new-ui/Icons/index.ts

@@ -35,6 +35,7 @@ import { Chip02 } from "./Chip02";
 import { Cube01 } from "./Cube01";
 import { CubeOutline } from "./CubeOutline";
 import { Database01 } from "./Database01";
+import { Download02 } from "./Download02";
 import { DotsHorizontal } from "./DotsHorizontal";
 import { DotsVertical } from "./DotsVertical";
 import { DownloadCloud01 } from "./DownloadCloud01";
@@ -43,6 +44,8 @@ import { Edit05 } from "./Edit05";
 import { File02 } from "./File02";
 import { File04 } from "./File04";
 import { File05 } from "./File05";
+import { FastBackward } from "./FastBackward";
+import { FastForward } from "./FastForward";
 import { FileMinus01 } from "./FileMinus01";
 import { FilePlus01 } from "./FilePlus01";
 import { FilePlus02 } from "./FilePlus02";
@@ -102,6 +105,8 @@ import { User01 } from "./User01";
 import { User02 } from "./User02";
 import { UserPlus01 } from "./UserPlus01";
 import { Video } from "./Video";
+import { VolumeMax } from "./VolumeMax";
+import { VolumeX } from "./VolumeX";
 import { VideoRecorder } from "./VideoRecorder";
 import { Visa } from "./Visa";
 import { VisualQuestionAnswering } from "./VisualQuestionAnswering";
@@ -145,6 +150,7 @@ export const Icons = {
   Cube01,
   CubeOutline,
   Database01,
+  Download02,
   DotsHorizontal,
   DotsVertical,
   DownloadCloud01,
@@ -157,6 +163,8 @@ export const Icons = {
   FilePlus01,
   FilePlus02,
   FilterLines,
+  FastBackward,
+  FastForward,
   Gear01,
   Globe01,
   HelpCircle,
@@ -212,6 +220,8 @@ export const Icons = {
   User02,
   UserPlus01,
   Video,
+  VolumeMax,
+  VolumeX,
   VideoRecorder,
   Visa,
   VisualQuestionAnswering,

packages/toolkit/src/lib/use-instill-form/components/component-output/AudioField.tsx

@@ -2,6 +2,8 @@
 
 import { Nullable } from "../../../type";
 import { ComponentOutputFieldBaseProps } from "../../types";
+import AudioPlayer from "./AudioPlayer";
+import { DownloadButton } from "./DownloadButton";
 import { FieldRoot } from "./FieldRoot";
 
 export type AudioFieldProps = {
@@ -14,8 +16,17 @@ export const AudioField = (props: AudioFieldProps) => {
   return (
     <FieldRoot title={title} fieldKey={`${title}-field`}>
       {audio && !hideField ? (
-        <div className="flex w-full">
-          <audio className="w-full" controls={true} src={audio} />
+        <div className="rounded border">
+          <div className="flex w-full flex-row rounded-t-[4px] border-b border-semantic-bg-line bg-[#F0F0F0] px-2 py-0.5">
+            <div className="ml-auto flex flex-row gap-x-1">
+              <DownloadButton className="my-auto" text={audio ?? ""} />
+            </div>
+          </div>
+          <div className="flex h-[150px] items-center">
+            <div className="w-full">
+              <AudioPlayer currentSong={audio} />
+            </div>
+          </div>
         </div>
       ) : null}
     </FieldRoot>