How to use the @pluralsight/ps-design-system-halo.gapSizes function in @pluralsight/ps-design-system-halo

return (
    <>
      {isOpen && (
        <div>
      )}
      <label style="">
        {allProps.label &amp;&amp; (
          <div>{allProps.label}</div>
        )}
        <div>
          
            <div>
              <button disabled="{allProps.disabled}">
                <span aria-hidden="">
                  {longestMenuItemState.label || allProps.placeholder}
                </span>
                <span>
                  {selectedLabel || allProps.placeholder}
                </span>
              </button>
              <div></div></div></div></label></div>

const TextArea = (props, context) => {
  const themeName = useTheme()
  const allProps = { ...props, themeName }

  return (
    <label>
      {allProps.label &amp;&amp; (
        <div>{allProps.label}</div>
      )}
      <div>
        
          <textarea style="{{" placeholder="{allProps.placeholder}" disabled="{allProps.disabled}">        &lt;/Halo&gt;
        {allProps.error &amp;&amp; (
          &lt;div {...styles.error(allProps)}&gt;
            &lt;WarningIcon /&gt;
          &lt;/div&gt;
        )}
      &lt;/div&gt;
      {allProps.subLabel &amp;&amp; (</textarea></div></label>

}

  const { className, style, ...rest } = props

  return (
    <label style="{style}">
      {props.label &amp;&amp; (
        <div>{props.label}</div>
      )}

      
        <div>
          

          

          </div></label>

subLabel,
    ...inputProps
  } = allProps

  const { fieldRef, inputRef } = useMultipleRefs(forwardedRef)

  return (
    <label>
      {label &amp;&amp; <div>{label}</div>}

      <div>
        
          <div>
            <input placeholder="{allProps.placeholder}" disabled="{allProps.disabled}">
            {fieldAfter}
          </div>
        

        {icon &amp;&amp; <div>{icon}</div>}

        {error &amp;&amp; (
          <div></div></div></label>