feat: wip import resource UI

packages/webapp/src/components/Dropzone/Dropzone.tsx

@@ -1,5 +1,6 @@
 // @ts-nocheck
 import React from 'react';
+import { Ref, useCallback } from 'react';
 import clsx from 'classnames';
 import {
   Accept,
@@ -226,6 +227,7 @@ export const Dropzone = (_props: DropzoneProps) => {
     });
 
   const isIdle = !isDragAccept && !isDragReject;
+  assignRef(openRef, open);
 
   return (
     <DropzoneProvider
@@ -264,3 +266,26 @@ Dropzone.displayName = '@mantine/dropzone/Dropzone';
 Dropzone.Accept = DropzoneAccept;
 Dropzone.Idle = DropzoneIdle;
 Dropzone.Reject = DropzoneReject;
+
+
+
+
+type PossibleRef<T> = Ref<T> | undefined;
+
+export function assignRef<T>(ref: PossibleRef<T>, value: T) {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (typeof ref === 'object' && ref !== null && 'current' in ref) {
+    (ref as React.MutableRefObject<T>).current = value;
+  }
+}
+
+export function mergeRefs<T>(...refs: PossibleRef<T>[]) {
+  return (node: T | null) => {
+    refs.forEach((ref) => assignRef(ref, node));
+  };
+}
+
+export function useMergedRef<T>(...refs: PossibleRef<T>[]) {
+  return useCallback(mergeRefs(...refs), refs);
+}

packages/webapp/src/components/Layout/Stack/Stack.tsx

@@ -30,7 +30,7 @@ export function Stack(props: StackProps) {
 const StackStyled = styled(Box)`
   display: flex;
   flex-direction: column;
-  align-items: align;
+  align-items: ${(props: StackProps) => props.align};
   justify-content: justify;
   gap: ${(props: StackProps) => props.spacing}px;
 `;

packages/webapp/src/components/Stepper/Stepper.tsx

@@ -81,8 +81,8 @@ export function Stepper({
     active > _children.length - 1 ? completedContent : stepContent;
 
   return (
-    <Box>
-      <StepsItems>{items}</StepsItems>
+    <Box className={classNames?.root}>
+      <StepsItems className={classNames?.items}>{items}</StepsItems>
       <StepsContent className={classNames?.content}>{content} </StepsContent>
     </Box>
   );