import { createComponent } from '@graphprotocol/gds-css'

export const SearchMeta = createComponent('Search', {
  cssProps: {
    /** @default 'medium' */
    size: {
      type: 'values',
      values: ['small', 'medium'],
      defaultValue: 'medium',
    },
    /** @default 'full' */
    layout: {
      type: 'values',
      values: ['compact', 'full'],
      defaultValue: 'full',
    },
  },
  vars: {
    'input-width': {
      '@variant @prop-size-small/search': '--spacing(32)',
      '@variant @prop-size-medium/search': '--spacing(40)',
    },
  },
})
