tio-design-make-experiments 0.0.1

package/src/imports/Forms.tsx

@@ -0,0 +1,1088 @@
+import svgPaths from "./svg-liuy2nykz3";
+
+function SpacerTestio() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function SpacerTestio1() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-0 top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function FormLabel1() {
+  return (
+    <div className="col-[1] content-stretch flex items-start justify-self-start pt-[10px] relative row-[1] self-start shrink-0" data-name="form label">
+      <p className="font-['Source_Sans_Pro:SemiBold',sans-serif] leading-[14px] not-italic relative shrink-0 text-[#888] text-[12px] uppercase">Form label</p>
+    </div>
+  );
+}
+
+function InputField() {
+  return (
+    <div className="bg-[#181818] col-[2] h-[40px] justify-self-stretch relative rounded-[10px] row-[1] shrink-0" data-name="Input field">
+      <div aria-hidden="true" className="absolute border border-[#2e2e2e] border-solid inset-0 pointer-events-none rounded-[10px]" />
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex gap-[9px] items-center px-[20px] py-[5px] relative size-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-h-px min-w-px relative text-[16px] text-white whitespace-pre-wrap">Input field</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FormGrid() {
+  return (
+    <div className="gap-[20px] grid grid-cols-[__175px_minmax(0,_1fr)] grid-rows-[_40px] relative rounded-[15px] shrink-0 w-full" data-name="Form grid">
+      <FormLabel1 />
+      <InputField />
+    </div>
+  );
+}
+
+function SpacerTestio2() {
+  return (
+    <div className="relative shrink-0 size-[30px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_66.67%_66.67%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function FormLabel() {
+  return (
+    <div className="content-stretch flex flex-col items-start max-w-[730px] relative shrink-0 w-full" data-name="Form label">
+      <p className="font-['Source_Sans_Pro:Light',sans-serif] leading-[28px] min-w-full not-italic relative shrink-0 text-[25px] text-white w-[min-content] whitespace-pre-wrap">Form groups</p>
+      <SpacerTestio />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-w-full relative shrink-0 text-[16px] text-white w-[min-content] whitespace-pre-wrap">Horizonal form groups</p>
+      <SpacerTestio1 />
+      <FormGrid />
+      <SpacerTestio2 />
+    </div>
+  );
+}
+
+function SpacerTestio3() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function SpacerTestio4() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-0 top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function FormLabel3() {
+  return (
+    <div className="content-stretch flex items-start pt-[10px] relative shrink-0 w-[1936px]" data-name="form label">
+      <p className="font-['Source_Sans_Pro:SemiBold',sans-serif] leading-[14px] not-italic relative shrink-0 text-[#888] text-[12px] uppercase">Form label</p>
+    </div>
+  );
+}
+
+function SpacerTestio5() {
+  return (
+    <div className="relative shrink-0 size-[30px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_66.67%_66.67%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function FormLabel2() {
+  return (
+    <div className="content-stretch flex flex-col items-start max-w-[730px] relative shrink-0 w-full" data-name="Form label">
+      <p className="font-['Source_Sans_Pro:Light',sans-serif] leading-[28px] min-w-full not-italic relative shrink-0 text-[25px] text-white w-[min-content] whitespace-pre-wrap">Form label</p>
+      <SpacerTestio3 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-w-full relative shrink-0 text-[16px] text-white w-[min-content] whitespace-pre-wrap">Label for form groups and elements</p>
+      <SpacerTestio4 />
+      <FormLabel3 />
+      <SpacerTestio5 />
+    </div>
+  );
+}
+
+function SpacerTestio6() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function SpacerTestio7() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-0 top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function InputField1() {
+  return (
+    <div className="bg-[#181818] h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="Input field">
+      <div aria-hidden="true" className="absolute border border-[#2e2e2e] border-solid inset-0 pointer-events-none rounded-[10px]" />
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex gap-[9px] items-center px-[20px] py-[5px] relative size-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Italic',sans-serif] italic leading-[30px] min-h-px min-w-px relative text-[#595959] text-[16px] whitespace-pre-wrap">Placeholder</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTestio8() {
+  return (
+    <div className="relative shrink-0 size-[15px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_0_33.33%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function InputField2() {
+  return (
+    <div className="bg-[#181818] h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="Input field">
+      <div aria-hidden="true" className="absolute border border-[#2e2e2e] border-solid inset-0 pointer-events-none rounded-[10px]" />
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex gap-[9px] items-center px-[20px] py-[5px] relative size-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-h-px min-w-px relative text-[16px] text-white whitespace-pre-wrap">Filled input</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTestio9() {
+  return (
+    <div className="relative shrink-0 size-[15px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_0_33.33%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function InputField3() {
+  return (
+    <div className="bg-[#181818] h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="Input field">
+      <div aria-hidden="true" className="absolute border border-[#ff3131] border-solid inset-0 pointer-events-none rounded-[10px]" />
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex gap-[9px] items-center px-[20px] py-[5px] relative size-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-h-px min-w-px relative text-[#ff3131] text-[16px] whitespace-pre-wrap">Input with error</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTestio10() {
+  return (
+    <div className="relative shrink-0 size-[15px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_0_33.33%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function InputField4() {
+  return (
+    <div className="bg-[#262626] h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="Input field">
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex gap-[9px] items-center px-[20px] py-[5px] relative size-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-h-px min-w-px relative text-[16px] text-white whitespace-pre-wrap">Readonly field</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTestio11() {
+  return (
+    <div className="relative shrink-0 size-[30px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_66.67%_66.67%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function Inputs() {
+  return (
+    <div className="content-stretch flex flex-col items-start max-w-[730px] relative shrink-0 w-full" data-name="INPUTS">
+      <p className="font-['Source_Sans_Pro:Light',sans-serif] leading-[28px] min-w-full not-italic relative shrink-0 text-[25px] text-white w-[min-content] whitespace-pre-wrap">Input fields</p>
+      <SpacerTestio6 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-w-full relative shrink-0 text-[16px] text-white w-[min-content] whitespace-pre-wrap">Input field in different states</p>
+      <SpacerTestio7 />
+      <InputField1 />
+      <SpacerTestio8 />
+      <InputField2 />
+      <SpacerTestio9 />
+      <InputField3 />
+      <SpacerTestio10 />
+      <InputField4 />
+      <SpacerTestio11 />
+    </div>
+  );
+}
+
+function SpacerTestio12() {
+  return (
+    <div className="relative shrink-0 size-[50px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_80%_80%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function SpacerTestio13() {
+  return <div className="shrink-0 size-[10px]" data-name="spacer-testio" />;
+}
+
+function SpacerTestio14() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-0 top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function IconCaretDown() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[9px]" data-name="icon-caret-down">
+      <div className="absolute inset-[0_-0.23%_0_0]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 9.02104 20">
+          <g id="icon-caret-down">
+            <g id="Rectangle 1171" />
+            <path d={svgPaths.p2e3d1e00} fill="var(--fill-0, #78EAC1)" id="Union" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Btn() {
+  return (
+    <div className="content-stretch flex items-center justify-center relative rounded-br-[10px] rounded-tr-[10px] shrink-0 size-[40px] z-[1]" data-name="Btn">
+      <div aria-hidden="true" className="absolute border-[#181818] border-l border-solid inset-0 pointer-events-none rounded-br-[10px] rounded-tr-[10px]" />
+      <IconCaretDown />
+    </div>
+  );
+}
+
+function FormSelect() {
+  return (
+    <div className="bg-[#262626] h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="form-select">
+      <div aria-hidden="true" className="absolute border border-[#2e2e2e] border-solid inset-0 pointer-events-none rounded-[10px]" />
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex isolate items-center justify-between pl-[15px] relative size-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Italic',sans-serif] italic leading-[30px] min-h-px min-w-px relative text-[#888] text-[16px] whitespace-pre-wrap z-[3]">Please select</p>
+          <Btn />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTestio15() {
+  return (
+    <div className="relative shrink-0 size-[15px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_0_33.33%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function IconCaretDown1() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[9px]" data-name="icon-caret-down">
+      <div className="absolute inset-[0_-0.23%_0_0]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 9.02104 20">
+          <g id="icon-caret-down">
+            <g id="Rectangle 1171" />
+            <path d={svgPaths.p2e3d1e00} fill="var(--fill-0, white)" id="Union" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Btn1() {
+  return (
+    <div className="bg-[#7954ff] content-stretch flex items-center justify-center relative rounded-br-[10px] rounded-tr-[10px] shrink-0 size-[40px] z-[1]" data-name="Btn">
+      <div aria-hidden="true" className="absolute border-[#181818] border-l border-solid inset-0 pointer-events-none rounded-br-[10px] rounded-tr-[10px]" />
+      <IconCaretDown1 />
+    </div>
+  );
+}
+
+function FormSelect1() {
+  return (
+    <div className="bg-[#7954ff] h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="form-select">
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex isolate items-center justify-between pl-[15px] relative size-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Italic',sans-serif] italic leading-[30px] min-h-px min-w-px relative text-[16px] text-white whitespace-pre-wrap z-[3]">Hover</p>
+          <Btn1 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTestio16() {
+  return (
+    <div className="relative shrink-0 size-[15px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_0_33.33%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function IconCaretDown2() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[9px]" data-name="icon-caret-down">
+      <div className="absolute inset-[0_-0.23%_0_0]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 9.02104 20">
+          <g id="icon-caret-down">
+            <g id="Rectangle 1171" />
+            <path d={svgPaths.p2e3d1e00} fill="var(--fill-0, #78EAC1)" id="Union" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Btn2() {
+  return (
+    <div className="content-stretch flex items-center justify-center relative rounded-br-[10px] rounded-tr-[10px] shrink-0 size-[40px] z-[1]" data-name="Btn">
+      <div aria-hidden="true" className="absolute border-[#181818] border-l border-solid inset-0 pointer-events-none rounded-br-[10px] rounded-tr-[10px]" />
+      <IconCaretDown2 />
+    </div>
+  );
+}
+
+function FormSelect2() {
+  return (
+    <div className="bg-[#262626] h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="form-select">
+      <div aria-hidden="true" className="absolute border border-[#2e2e2e] border-solid inset-0 pointer-events-none rounded-[10px]" />
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex isolate items-center justify-between pl-[15px] relative size-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-h-px min-w-px relative text-[16px] text-white whitespace-pre-wrap z-[3]">Option selected</p>
+          <Btn2 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTestio17() {
+  return (
+    <div className="relative shrink-0 size-[15px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_0_33.33%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function IconCaretDown3() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[9px]" data-name="icon-caret-down">
+      <div className="absolute inset-[0_-0.23%_0_0]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 9.02104 20">
+          <g id="icon-caret-down">
+            <g id="Rectangle 1171" />
+            <path d={svgPaths.p2e3d1e00} fill="var(--fill-0, white)" id="Union" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Btn3() {
+  return (
+    <div className="bg-[#7954ff] content-stretch flex items-center justify-center relative rounded-br-[10px] rounded-tr-[10px] shrink-0 size-[40px] z-[1]" data-name="Btn">
+      <div aria-hidden="true" className="absolute border-[#181818] border-l border-solid inset-0 pointer-events-none rounded-br-[10px] rounded-tr-[10px]" />
+      <IconCaretDown3 />
+    </div>
+  );
+}
+
+function FormSelect3() {
+  return (
+    <div className="bg-[#7954ff] h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="form-select">
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex isolate items-center justify-between pl-[15px] relative size-full">
+          <p className="flex-[1_0_0] font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-h-px min-w-px relative text-[16px] text-white whitespace-pre-wrap z-[3]">Option selected hover</p>
+          <Btn3 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTestio18() {
+  return (
+    <div className="relative shrink-0 size-[30px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_66.67%_66.67%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function SpacerTestio19() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-0 top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function IconComputerWindowsLg() {
+  return (
+    <div className="h-[40px] relative shrink-0 w-[57px]" data-name="icon-computer-windows-lg">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 57 40">
+        <g clipPath="url(#clip0_27_11576)" id="icon-computer-windows-lg">
+          <g id="computer-windows-lg" />
+          <path d="M11 7H4V9H11V7Z" fill="var(--fill-0, white)" id="Vector" />
+          <path d="M30 38H25V40H30V38Z" fill="var(--fill-0, white)" id="Vector_2" />
+          <path d={svgPaths.p187e61c0} fill="var(--fill-0, white)" id="Vector_3" />
+          <path d={svgPaths.p3716d780} fill="var(--fill-0, white)" id="Vector_4" />
+          <path d={svgPaths.p3215c000} fill="var(--fill-0, white)" id="Vector_5" />
+        </g>
+        <defs>
+          <clipPath id="clip0_27_11576">
+            <rect fill="white" height="40" width="57" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper() {
+  return (
+    <div className="content-stretch flex flex-col items-start relative shrink-0" data-name="Icon wrapper">
+      <IconComputerWindowsLg />
+    </div>
+  );
+}
+
+function IconChrome() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-chrome">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g clipPath="url(#clip0_27_8377)" id="icon-chrome">
+          <path d={svgPaths.p347a1500} fill="var(--fill-0, white)" id="Union" />
+        </g>
+        <defs>
+          <clipPath id="clip0_27_8377">
+            <rect fill="white" height="20" width="20" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function IconEdgeChromium() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-edge-chromium">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g clipPath="url(#clip0_27_9976)" id="icon-edge-chromium">
+          <g id="edge-chromium" />
+          <path d={svgPaths.p3075cdf0} fill="var(--fill-0, white)" id="Union" />
+        </g>
+        <defs>
+          <clipPath id="clip0_27_9976">
+            <rect fill="white" height="20" width="20" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function IconEdge() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[19px]" data-name="icon-edge">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 19 20">
+        <g clipPath="url(#clip0_27_16378)" id="icon-edge">
+          <g id="edge" />
+          <path d={svgPaths.p5758100} fill="var(--fill-0, white)" id="Union" />
+        </g>
+        <defs>
+          <clipPath id="clip0_27_16378">
+            <rect fill="white" height="20" width="19" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function Browsers() {
+  return (
+    <div className="content-stretch flex gap-[5px] items-start relative shrink-0" data-name="Browsers">
+      <IconChrome />
+      <IconEdgeChromium />
+      <IconEdge />
+    </div>
+  );
+}
+
+function Info() {
+  return (
+    <div className="content-stretch flex flex-col gap-[2px] items-start relative shrink-0" data-name="INFO">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white">Computer | Windows 11</p>
+      <Browsers />
+    </div>
+  );
+}
+
+function Device() {
+  return (
+    <div className="content-stretch flex gap-[10px] items-start relative shrink-0 w-full" data-name="Device">
+      <IconWrapper />
+      <Info />
+    </div>
+  );
+}
+
+function Content() {
+  return (
+    <div className="content-stretch flex flex-col items-start py-[5px] relative shrink-0 w-[205px] z-[2]" data-name="CONTENT">
+      <Device />
+    </div>
+  );
+}
+
+function IconCaretDown4() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[9px]" data-name="icon-caret-down">
+      <div className="absolute inset-[0_-0.23%_0_0]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 9.02104 20">
+          <g id="icon-caret-down">
+            <g id="Rectangle 1171" />
+            <path d={svgPaths.p2e3d1e00} fill="var(--fill-0, #78EAC1)" id="Union" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Btn4() {
+  return (
+    <div className="content-stretch flex h-[70px] items-center justify-center relative rounded-br-[10px] rounded-tr-[10px] shrink-0 w-[40px] z-[1]" data-name="Btn">
+      <div aria-hidden="true" className="absolute border-[#181818] border-l border-solid inset-0 pointer-events-none rounded-br-[10px] rounded-tr-[10px]" />
+      <IconCaretDown4 />
+    </div>
+  );
+}
+
+function FormSelect4() {
+  return (
+    <div className="bg-[#262626] relative rounded-[10px] shrink-0 w-full" data-name="form-select">
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex isolate items-center justify-between pl-[15px] relative w-full">
+          <Content />
+          <Btn4 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTestio20() {
+  return (
+    <div className="relative shrink-0 size-[15px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_0_33.33%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function IconComputerWindowsLg1() {
+  return (
+    <div className="h-[40px] relative shrink-0 w-[57px]" data-name="icon-computer-windows-lg">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 57 40">
+        <g clipPath="url(#clip0_27_11576)" id="icon-computer-windows-lg">
+          <g id="computer-windows-lg" />
+          <path d="M11 7H4V9H11V7Z" fill="var(--fill-0, white)" id="Vector" />
+          <path d="M30 38H25V40H30V38Z" fill="var(--fill-0, white)" id="Vector_2" />
+          <path d={svgPaths.p187e61c0} fill="var(--fill-0, white)" id="Vector_3" />
+          <path d={svgPaths.p3716d780} fill="var(--fill-0, white)" id="Vector_4" />
+          <path d={svgPaths.p3215c000} fill="var(--fill-0, white)" id="Vector_5" />
+        </g>
+        <defs>
+          <clipPath id="clip0_27_11576">
+            <rect fill="white" height="40" width="57" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper1() {
+  return (
+    <div className="content-stretch flex flex-col items-start relative shrink-0" data-name="Icon wrapper">
+      <IconComputerWindowsLg1 />
+    </div>
+  );
+}
+
+function IconChrome1() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-chrome">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g clipPath="url(#clip0_27_8377)" id="icon-chrome">
+          <path d={svgPaths.p347a1500} fill="var(--fill-0, white)" id="Union" />
+        </g>
+        <defs>
+          <clipPath id="clip0_27_8377">
+            <rect fill="white" height="20" width="20" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function IconEdgeChromium1() {
+  return (
+    <div className="relative shrink-0 size-[20px]" data-name="icon-edge-chromium">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 20 20">
+        <g clipPath="url(#clip0_27_9976)" id="icon-edge-chromium">
+          <g id="edge-chromium" />
+          <path d={svgPaths.p3075cdf0} fill="var(--fill-0, white)" id="Union" />
+        </g>
+        <defs>
+          <clipPath id="clip0_27_9976">
+            <rect fill="white" height="20" width="20" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function IconEdge1() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[19px]" data-name="icon-edge">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 19 20">
+        <g clipPath="url(#clip0_27_16378)" id="icon-edge">
+          <g id="edge" />
+          <path d={svgPaths.p5758100} fill="var(--fill-0, white)" id="Union" />
+        </g>
+        <defs>
+          <clipPath id="clip0_27_16378">
+            <rect fill="white" height="20" width="19" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  );
+}
+
+function Browsers1() {
+  return (
+    <div className="content-stretch flex gap-[5px] items-start relative shrink-0" data-name="Browsers">
+      <IconChrome1 />
+      <IconEdgeChromium1 />
+      <IconEdge1 />
+    </div>
+  );
+}
+
+function Info1() {
+  return (
+    <div className="content-stretch flex flex-col gap-[2px] items-start relative shrink-0" data-name="INFO">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[16px] not-italic relative shrink-0 text-[14px] text-white">Computer | Windows 11</p>
+      <Browsers1 />
+    </div>
+  );
+}
+
+function Device1() {
+  return (
+    <div className="content-stretch flex gap-[10px] items-start relative shrink-0 w-full" data-name="Device">
+      <IconWrapper1 />
+      <Info1 />
+    </div>
+  );
+}
+
+function Content1() {
+  return (
+    <div className="content-stretch flex flex-col items-start py-[5px] relative shrink-0 w-[205px] z-[3]" data-name="CONTENT">
+      <Device1 />
+    </div>
+  );
+}
+
+function IconCaretDown5() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[9px]" data-name="icon-caret-down">
+      <div className="absolute inset-[0_-0.23%_0_0]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 9.02104 20">
+          <g id="icon-caret-down">
+            <g id="Rectangle 1171" />
+            <path d={svgPaths.p2e3d1e00} fill="var(--fill-0, white)" id="Union" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Btn5() {
+  return (
+    <div className="bg-[#7954ff] content-stretch flex h-[70px] items-center justify-center relative rounded-br-[10px] rounded-tr-[10px] shrink-0 w-[40px] z-[1]" data-name="Btn">
+      <div aria-hidden="true" className="absolute border-[#181818] border-l border-solid inset-0 pointer-events-none rounded-br-[10px] rounded-tr-[10px]" />
+      <IconCaretDown5 />
+    </div>
+  );
+}
+
+function FormSelect5() {
+  return (
+    <div className="bg-[#7954ff] relative rounded-[10px] shrink-0 w-full" data-name="form-select">
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex isolate items-center justify-between pl-[15px] relative w-full">
+          <Content1 />
+          <Btn5 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTestio21() {
+  return (
+    <div className="relative shrink-0 size-[30px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_66.67%_66.67%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function SpacerTestio22() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-full" data-name="spacer-testio">
+      <div className="absolute bottom-1/2 left-0 right-0 top-0" data-name="spacer" />
+    </div>
+  );
+}
+
+function Content2() {
+  return (
+    <div className="content-stretch flex h-[20px] items-center justify-center pl-[8px] pr-[2px] py-[2px] relative shrink-0" data-name="CONTENT">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#1d1d1d] text-[11px]">Tag removable</p>
+    </div>
+  );
+}
+
+function IconCrossThick() {
+  return (
+    <div className="h-[16px] relative shrink-0 w-[10px]" data-name="icon-cross-thick">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 16">
+        <g id="icon-cross-thick">
+          <path d={svgPaths.paa65200} fill="var(--fill-0, #236A84)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper2() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="icon wrapper">
+      <IconCrossThick />
+    </div>
+  );
+}
+
+function ButtonXs() {
+  return (
+    <div className="content-stretch flex gap-[10px] h-full items-center justify-center p-[5px] relative rounded-br-[5px] rounded-tr-[5px] shrink-0 w-[18px]" data-name="Button-xs">
+      <IconWrapper2 />
+    </div>
+  );
+}
+
+function Tag() {
+  return (
+    <div className="bg-white content-stretch flex h-[20px] items-center justify-center relative rounded-[5px] shrink-0" data-name="Tag">
+      <Content2 />
+      <ButtonXs />
+    </div>
+  );
+}
+
+function Content3() {
+  return (
+    <div className="content-stretch flex h-[20px] items-center justify-center pl-[8px] pr-[2px] py-[2px] relative shrink-0" data-name="CONTENT">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#1d1d1d] text-[11px]">Tag removable</p>
+    </div>
+  );
+}
+
+function IconCrossThick1() {
+  return (
+    <div className="h-[16px] relative shrink-0 w-[10px]" data-name="icon-cross-thick">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 16">
+        <g id="icon-cross-thick">
+          <path d={svgPaths.paa65200} fill="var(--fill-0, #236A84)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper3() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="icon wrapper">
+      <IconCrossThick1 />
+    </div>
+  );
+}
+
+function ButtonXs1() {
+  return (
+    <div className="content-stretch flex gap-[10px] h-full items-center justify-center p-[5px] relative rounded-br-[5px] rounded-tr-[5px] shrink-0 w-[18px]" data-name="Button-xs">
+      <IconWrapper3 />
+    </div>
+  );
+}
+
+function Tag1() {
+  return (
+    <div className="bg-white content-stretch flex h-[20px] items-center justify-center relative rounded-[5px] shrink-0" data-name="Tag">
+      <Content3 />
+      <ButtonXs1 />
+    </div>
+  );
+}
+
+function Items() {
+  return (
+    <div className="content-stretch flex gap-[5px] items-center relative shrink-0 z-[3]" data-name="ITEMS">
+      <Tag />
+      <Tag1 />
+    </div>
+  );
+}
+
+function IconCaretDown6() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[9px]" data-name="icon-caret-down">
+      <div className="absolute inset-[0_-0.23%_0_0]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 9.02104 20">
+          <g id="icon-caret-down">
+            <g id="Rectangle 1171" />
+            <path d={svgPaths.p2e3d1e00} fill="var(--fill-0, #78EAC1)" id="Union" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Btn6() {
+  return (
+    <div className="content-stretch flex items-center justify-center relative rounded-br-[10px] rounded-tr-[10px] shrink-0 size-[40px] z-[1]" data-name="Btn">
+      <div aria-hidden="true" className="absolute border-[#181818] border-l border-solid inset-0 pointer-events-none rounded-br-[10px] rounded-tr-[10px]" />
+      <IconCaretDown6 />
+    </div>
+  );
+}
+
+function FormSelect6() {
+  return (
+    <div className="bg-[#262626] h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="form-select">
+      <div aria-hidden="true" className="absolute border border-[#2e2e2e] border-solid inset-0 pointer-events-none rounded-[10px]" />
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex isolate items-center justify-between pl-[15px] relative size-full">
+          <Items />
+          <Btn6 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SpacerTestio23() {
+  return (
+    <div className="relative shrink-0 size-[15px]" data-name="spacer-testio">
+      <div className="absolute inset-[0_0_33.33%_0]" data-name="spacer" />
+    </div>
+  );
+}
+
+function Content4() {
+  return (
+    <div className="content-stretch flex h-[20px] items-center justify-center pl-[8px] pr-[2px] py-[2px] relative shrink-0" data-name="CONTENT">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#1d1d1d] text-[11px]">Tag removable</p>
+    </div>
+  );
+}
+
+function IconCrossThick2() {
+  return (
+    <div className="h-[16px] relative shrink-0 w-[10px]" data-name="icon-cross-thick">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 16">
+        <g id="icon-cross-thick">
+          <path d={svgPaths.paa65200} fill="var(--fill-0, #236A84)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper4() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="icon wrapper">
+      <IconCrossThick2 />
+    </div>
+  );
+}
+
+function ButtonXs2() {
+  return (
+    <div className="content-stretch flex gap-[10px] h-full items-center justify-center p-[5px] relative rounded-br-[5px] rounded-tr-[5px] shrink-0 w-[18px]" data-name="Button-xs">
+      <IconWrapper4 />
+    </div>
+  );
+}
+
+function Tag2() {
+  return (
+    <div className="bg-white content-stretch flex h-[20px] items-center justify-center relative rounded-[5px] shrink-0" data-name="Tag">
+      <Content4 />
+      <ButtonXs2 />
+    </div>
+  );
+}
+
+function Content5() {
+  return (
+    <div className="content-stretch flex h-[20px] items-center justify-center pl-[8px] pr-[2px] py-[2px] relative shrink-0" data-name="CONTENT">
+      <p className="font-['Source_Sans_Pro:Regular',sans-serif] leading-[13px] not-italic relative shrink-0 text-[#1d1d1d] text-[11px]">Tag removable</p>
+    </div>
+  );
+}
+
+function IconCrossThick3() {
+  return (
+    <div className="h-[16px] relative shrink-0 w-[10px]" data-name="icon-cross-thick">
+      <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 10 16">
+        <g id="icon-cross-thick">
+          <path d={svgPaths.paa65200} fill="var(--fill-0, #236A84)" id="Union" />
+        </g>
+      </svg>
+    </div>
+  );
+}
+
+function IconWrapper5() {
+  return (
+    <div className="content-stretch flex items-center relative shrink-0" data-name="icon wrapper">
+      <IconCrossThick3 />
+    </div>
+  );
+}
+
+function ButtonXs3() {
+  return (
+    <div className="content-stretch flex gap-[10px] h-full items-center justify-center p-[5px] relative rounded-br-[5px] rounded-tr-[5px] shrink-0 w-[18px]" data-name="Button-xs">
+      <IconWrapper5 />
+    </div>
+  );
+}
+
+function Tag3() {
+  return (
+    <div className="bg-white content-stretch flex h-[20px] items-center justify-center relative rounded-[5px] shrink-0" data-name="Tag">
+      <Content5 />
+      <ButtonXs3 />
+    </div>
+  );
+}
+
+function Items1() {
+  return (
+    <div className="content-stretch flex gap-[5px] items-center relative shrink-0 z-[3]" data-name="ITEMS">
+      <Tag2 />
+      <Tag3 />
+    </div>
+  );
+}
+
+function IconCaretDown7() {
+  return (
+    <div className="h-[20px] relative shrink-0 w-[9px]" data-name="icon-caret-down">
+      <div className="absolute inset-[0_-0.23%_0_0]">
+        <svg className="block size-full" fill="none" preserveAspectRatio="none" viewBox="0 0 9.02104 20">
+          <g id="icon-caret-down">
+            <g id="Rectangle 1171" />
+            <path d={svgPaths.p2e3d1e00} fill="var(--fill-0, white)" id="Union" />
+          </g>
+        </svg>
+      </div>
+    </div>
+  );
+}
+
+function Btn7() {
+  return (
+    <div className="bg-[#7954ff] content-stretch flex items-center justify-center relative rounded-br-[10px] rounded-tr-[10px] shrink-0 size-[40px] z-[1]" data-name="Btn">
+      <div aria-hidden="true" className="absolute border-[#181818] border-l border-solid inset-0 pointer-events-none rounded-br-[10px] rounded-tr-[10px]" />
+      <IconCaretDown7 />
+    </div>
+  );
+}
+
+function FormSelect7() {
+  return (
+    <div className="bg-[#7954ff] h-[40px] relative rounded-[10px] shrink-0 w-full" data-name="form-select">
+      <div className="flex flex-row items-center size-full">
+        <div className="content-stretch flex isolate items-center justify-between pl-[15px] relative size-full">
+          <Items1 />
+          <Btn7 />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FormLabel4() {
+  return (
+    <div className="content-stretch flex flex-col items-start max-w-[730px] relative shrink-0 w-full" data-name="Form label">
+      <p className="font-['Source_Sans_Pro:Light',sans-serif] leading-[28px] min-w-full not-italic relative shrink-0 text-[25px] text-white w-[min-content] whitespace-pre-wrap">Selects</p>
+      <SpacerTestio13 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-w-full relative shrink-0 text-[16px] text-white w-[min-content] whitespace-pre-wrap">Select elements in different states</p>
+      <SpacerTestio14 />
+      <FormSelect />
+      <SpacerTestio15 />
+      <FormSelect1 />
+      <SpacerTestio16 />
+      <FormSelect2 />
+      <SpacerTestio17 />
+      <FormSelect3 />
+      <SpacerTestio18 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-w-full relative shrink-0 text-[16px] text-white w-[min-content] whitespace-pre-wrap">Component for selecting devices</p>
+      <SpacerTestio19 />
+      <FormSelect4 />
+      <SpacerTestio20 />
+      <FormSelect5 />
+      <SpacerTestio21 />
+      <p className="font-['Source_Sans_3:Regular',sans-serif] font-normal leading-[22px] min-w-full relative shrink-0 text-[16px] text-white w-[min-content] whitespace-pre-wrap">Multi select</p>
+      <SpacerTestio22 />
+      <FormSelect6 />
+      <SpacerTestio23 />
+      <FormSelect7 />
+    </div>
+  );
+}
+
+export default function Forms() {
+  return (
+    <div className="bg-[#181818] content-stretch flex flex-col items-start p-[50px] relative size-full" data-name="Forms">
+      <FormLabel />
+      <FormLabel2 />
+      <Inputs />
+      <SpacerTestio12 />
+      <FormLabel4 />
+    </div>
+  );
+}