@veracity/vui 2.25.5-beta.1 → 2.25.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.25.5-beta.1",
+  "version": "2.25.5",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/input/helpText.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import Icon from '../icon'
 import P from '../p'
@@ -23,6 +21,7 @@ export const HelpText = vui<'div', HelpTextProps>((props, ref) => {
       className={cs('vui-inputHelpText', className)}
       color={color}
       display="flex"
+      fontSize={isError ? 'md' : 'sm'}
       pt={0.5}
       ref={ref}
       {...styles.helpText}

package/src/select/select.tsx

@@ -87,48 +87,50 @@ export function Select(props: SelectProps) {
 
   return (
     <SelectProvider value={context}>
-      {label && (
-        <SelectLabel
-          disabled={disabled}
-          id={id}
-          label={label}
-          labelMarkOptional={labelMarkOptional}
-          labelTooltipText={labelTooltipText}
-        />
-      )}
-      <Popover matchWidth={matchWidth} {...rest}>
-        <>
-          {selectButton ?? <SelectButton {...selectButtonProps} />}
-          <SelectContent overflow="hidden">
-            {showOptionsFilter && (
-              <Box mr={2}>
-                <Input
-                  iconLeft="falSearch"
-                  id={id} // should be select on the button instead?
-                  m={1}
-                  mt={0}
-                  onChange={onQueryChange}
-                  placeholder="Filter…"
-                  size={size}
-                  value={query}
-                />
-              </Box>
-            )}
-            <SelectGroup maxH={maxHeight} overflowY="auto" tabIndex={1000}>
-              {children ??
-                filteredOptions?.map?.(option => (
-                  <SelectOption closeOnScroll={closeOnScroll} key={option.value} title={option.text} {...option} />
-                ))}
-            </SelectGroup>
-          </SelectContent>
-        </>
-      </Popover>
-      {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}
-      {!!errorText && (
-        <HelpText isError size={helpTextSize[size]}>
-          {errorText}
-        </HelpText>
-      )}
+      <Box className="vui-selectContainer" column>
+        {label && (
+          <SelectLabel
+            disabled={disabled}
+            id={id}
+            label={label}
+            labelMarkOptional={labelMarkOptional}
+            labelTooltipText={labelTooltipText}
+          />
+        )}
+        <Popover matchWidth={matchWidth} {...rest}>
+          <>
+            {selectButton ?? <SelectButton {...selectButtonProps} />}
+            <SelectContent overflow="hidden">
+              {showOptionsFilter && (
+                <Box mr={2}>
+                  <Input
+                    iconLeft="falSearch"
+                    id={id} // should be select on the button instead?
+                    m={1}
+                    mt={0}
+                    onChange={onQueryChange}
+                    placeholder="Filter…"
+                    size={size}
+                    value={query}
+                  />
+                </Box>
+              )}
+              <SelectGroup maxH={maxHeight} overflowY="auto" tabIndex={1000}>
+                {children ??
+                  filteredOptions?.map?.(option => (
+                    <SelectOption closeOnScroll={closeOnScroll} key={option.value} title={option.text} {...option} />
+                  ))}
+              </SelectGroup>
+            </SelectContent>
+          </>
+        </Popover>
+        {!!helpText && <HelpText size={helpTextSize[size]}>{helpText}</HelpText>}
+        {!!errorText && (
+          <HelpText isError size={helpTextSize[size]}>
+            {errorText}
+          </HelpText>
+        )}
+      </Box>
     </SelectProvider>
   )
 }

package/src/textarea/textarea.tsx

@@ -1,10 +1,9 @@
 import { useEffect, useId, useState } from 'react'
 
-import { Label } from '..'
+import { Box, Label } from '..'
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import { helpTextSize, inputColors } from '../input/consts'
 import HelpText from '../input/helpText'
-import label from '../label'
 import T from '../t'
 import { ChangeEvent, cs, filterUndefined, isString } from '../utils'
 import { getInitialCount } from './helpers'
@@ -104,7 +103,7 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
   }, [value])
 
   return (
-    <>
+    <Box className="vui-textareaContainer" column>
       {isString(label) ? (
         <Label
           aria-disabled={disabled}
@@ -172,7 +171,7 @@ export const Textarea = vui<'div', TextareaProps>((props, ref) => {
           </HelpText>
         )}
       </TextareaBase>
-    </>
+    </Box>
   )
 })