import React from 'react';
import { Select as SelectPrimitive, SelectProps as SelectPropsPrimitive } from '@modulz/primitives';

export type SelectProps = SelectPropsPrimitive

type ExtractRefType<TypesThatMayContainReactRef> = TypesThatMayContainReactRef extends {ref?: React.Ref<infer T>} ? T : unknown;
type PrimitiveRefType = ExtractRefType<SelectPropsPrimitive>  

export const Select = React.forwardRef<PrimitiveRefType, SelectProps>((props, ref) => {
  return (
    <SelectPrimitive {...props} ref={ref}  isNative={false} styleConfig={{"base":{"button":{"normal":{"paddingRight":"12px","borderBottomLeftRadius":"4px","fontFamily":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"","fontSize":"14px","borderTopRightRadius":"4px","height":"32px","color":"hsl(0, 0%, 0%)","borderBottomRightRadius":"4px","backgroundColor":"hsl(240, 10%, 90%)","borderTopLeftRadius":"4px","paddingLeft":"12px"}},"buttonIcon":{"normal":{"color":"hsl(0, 0%, 0%)","marginLeft":"8px"}},"menu":{"normal":{"paddingTop":"4px","borderTopRightRadius":"4px","boxShadow":"0 2px 4px 0 rgba(0, 0, 0, 0.15)","borderBottomRightRadius":"4px","backgroundColor":"hsl(0, 0%, 100%)","borderTopLeftRadius":"4px","paddingLeft":"0","paddingBottom":"4px","paddingRight":"0","borderBottomLeftRadius":"4px"}},"item":{"normal":{"paddingLeft":"24px","paddingRight":"32px","fontFamily":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"","fontSize":"14px","color":"hsl(0, 0%, 0%)","height":"24px"},"grouped":{"paddingLeft":"32px"}},"itemIcon":{"normal":{"marginLeft":"4px"}},"label":{"normal":{"paddingRight":"32px","fontFamily":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\"","fontSize":"14px","height":"24px","color":"hsl(240, 3%, 60%)","paddingLeft":"24px"}},"separator":{"normal":{"marginTop":"4px","marginRight":"0","height":"1px","backgroundColor":"hsl(240, 10%, 90%)","marginBottom":"4px","marginLeft":"0"}},"scrollIndicator":{"normal":{"color":"hsl(0, 0%, 0%)","height":"24px","backgroundColor":"hsl(0, 0%, 100%)"}}},"variants":{}}}/>
  );
});

export {Option ,OptionGroup} from '@modulz/primitives';
