// "use client"

// import { ElementType, forwardRef } from "react"
// // import { HTMLChakraProps, SystemStyleObject, chakra } from "../../styled-system"
// export type HTMLChakraProps<
//   T extends ElementType,
//   P extends Dict = {},
// > = AssignHtmlProps<
//   ComponentPropsWithoutRef<T>,
//   Assign<JsxStyleProps, P> & PolymorphicProps
// >

// export interface FlexOptions {
//   /**
//    * Shorthand for `alignItems` style prop
//    * @type SystemStyleObject["alignItems"]
//    */
//   align?: SystemStyleObject["alignItems"]

//   /**
//    * Shorthand for `justifyContent` style prop
//    * @type SystemStyleObject["justifyContent"]
//    */
//   justify?: SystemStyleObject["justifyContent"]

//   /**
//    * Shorthand for `flexWrap` style prop
//    * @type SystemStyleObject["flexWrap"]
//    */
//   wrap?: SystemStyleObject["flexWrap"]

//   /**
//    * Shorthand for `flexDirection` style prop
//    * @type SystemStyleObject["flexDirection"]
//    * @default "row"
//    */
//   direction?: SystemStyleObject["flexDirection"]

//   /**
//    * Shorthand for `flexBasis` style prop
//    * @type SystemStyleObject["flexBasis"]
//    */
//   basis?: SystemStyleObject["flexBasis"]

//   /**
//    * Shorthand for `flexGrow` style prop
//    * @type SystemStyleObject["flexGrow"]
//    */
//   grow?: SystemStyleObject["flexGrow"]

//   /**
//    * Shorthand for `flexShrink` style prop
//    * @type SystemStyleObject["flexShrink"]
//    */
//   shrink?: SystemStyleObject["flexShrink"]
// }

// export interface FlexProps extends HTMLChakraProps<"div", FlexOptions> { }

// /**
//  * React component used to create flexbox layouts.
//  *
//  * It renders a `div` with `display: flex` and
//  * comes with helpful style shorthand.
//  *
//  * @see Docs https://chakra-ui.com/flex
//  */
// export const Flex = forwardRef<HTMLDivElement, FlexProps>(
//   function Flex(props, ref) {
//     const { direction, align, justify, wrap, basis, grow, shrink, ...rest } =
//       props

//     return (
//       <chakra.div
//         ref={ref}
//         {...rest}
//         css={{
//           display: "flex",
//           flexDirection: direction,
//           alignItems: align,
//           justifyContent: justify,
//           flexWrap: wrap,
//           flexBasis: basis,
//           flexGrow: grow,
//           flexShrink: shrink,
//           // ...props.css,
//         }}
//       />
//     )
//   },
// )

// Flex.displayName = "Flex"