@veracity/vui 2.29.0 → 2.29.2

package/src/header/headerContent.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box from '../box'
 import { useStyleConfig, vui } from '../core'
 import { cs } from '../utils'

package/src/header/headerCreateAccount.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box from '../box'
 import { useStyleConfig, vui } from '../core'
 import Link from '../link'

package/src/header/headerDivider.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import Divider, { DividerProps } from '../divider'
 import { cs } from '../utils'

package/src/header/headerLinkItem.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import List from '../list'
 import { cs, MouseEvent, useCallbackRef } from '../utils'
@@ -16,7 +14,7 @@ export const HeaderLinkItem = vui<'li', HeaderLinkItemProps>((props, ref) => {
     setIsMobileOpen(false)
     onClickProp?.(e)
   })
-
+  const linkPropsExtended = { ...linkProps, display: 'inline-flex', alignItems: 'center' }
   const linkActiveProps = isActive
     ? isMobile
       ? {
@@ -24,7 +22,7 @@ export const HeaderLinkItem = vui<'li', HeaderLinkItemProps>((props, ref) => {
           borderColor: 'seaBlue.main',
           borderLeftWidth: 3,
           hoverBg: 'skyBlue.90',
-          pl: '10px',
+          pl: '13px',
           activeBorderBottomWidth: 0,
           pt: '0px',
         }
@@ -49,15 +47,16 @@ export const HeaderLinkItem = vui<'li', HeaderLinkItemProps>((props, ref) => {
 
   return (
     <List.Item
-      className={cs('vui-headerLinkItem', className)}
+      className={cs('vui-headerLinkItem', className, `${isActive && 'is-active'}`)}
       iconLeft={icon}
       linkProps={{
         href: url,
         ringInset: true,
         transition: 'all 0.1s, border-width 0s, padding 0s',
         w: { xs: '100%', lg: 'max-content' },
+        px: { xs: '16px', lg: '10px', xl: '16px' },
         ...styles.link,
-        ...linkProps,
+        ...linkPropsExtended,
         ...linkMobileProps,
         ...linkActiveProps,
       }}

package/src/header/headerLogo.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import { Logo } from '../logo'
 import { LogoProps } from '../logo/logo.types'

package/src/header/headerMobileContent.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box, { BoxProps } from '../box'
 import { useStyleConfig, useUp, vui } from '../core'
 import { cs, mergeRefs } from '../utils'

package/src/header/headerMobileToggle.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ButtonProps, IconButton } from '../button'
 import { useStyleConfig, vui } from '../core'
 import Icon from '../icon'

package/src/header/headerNotifications.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Button from '../button'
 import { styled, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'

package/src/header/headerServices.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { RenderOnScreen, useStyleConfig } from '../core'
 import List from '../list'
 import Menu from '../menu'

package/src/header/headerServicesMessage.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import Link from '../link'
 import P, { PProps } from '../p'

package/src/header/headerSignIn.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Button from '../button'
 import { useStyleConfig, vui } from '../core'
 import { cs } from '../utils'

package/src/header/headerSupport.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useDown, useStyleConfig } from '../core'
 import Menu from '../menu'
 import { useHeaderContext } from './context'

package/src/header/helpers.ts

@@ -16,16 +16,19 @@ export function useHeaderLinks(env: Environment) {
   const [links] = useLinks()
 
   useEffect(() => {
-    loadHeaderlinks()
+    loadHeaderLinks()
 
-    async function loadHeaderlinks() {
+    async function loadHeaderLinks() {
       try {
         const response = await fetch(`${cdnUrls[env]}/common/data/links/header.json`)
         if (!response.ok) return
 
         const data = await response.json()
 
-        if (isObject(data)) setTemplates(data)
+        if (isObject(data)) {
+          // const mainLinks = data.mainLinks.filter((link: { id: string }) => link.id !== 'dataFabric')
+          setTemplates({ accountSections: data.accountSections, mainLinks: data.mainLinks })
+        }
       } catch {
         console.error('Failed to retrieve header data.')
       }

package/src/header/loggedInHeader.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box from '../box'
 import Button from '../button'
 import { RenderOnScreen, useDown, useStyleConfig, vui } from '../core'

package/src/header/loggedOutHeader.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box from '../box'
 import { RenderOnScreen, useDown, vui } from '../core'
 import { cs, isJsx } from '../utils'

package/src/heading/heading.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { omitThemingProps, styled, useStyleConfig, useUp, vui } from '../core'
 import { cs, filterUndefined } from '../utils'
 import { HeadingProps } from './heading.types'

package/src/heading/heading.types.ts

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { SystemProps, TypographyProps } from '../system'
 import { ThemingProps } from '../theme'
 

package/src/heading/headings.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { vui } from '../core'
 import Heading from './heading'
 import { HeadingProps } from './heading.types'

package/src/icons/baseIcons/conc/conDataEgest.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [64, 64, [], '', ['M30.3428 4C31.0642 4 31.7699 4.15611 32.4141 4.44922L32.6143 4.5459C33.077 4.78183 33.5048 5.09073 33.8789 5.46484L42.5352 14.1211L42.6914 14.2852C43.0467 14.6741 43.3358 15.1135 43.5508 15.5859L43.6543 15.8301C43.8806 16.4065 44 17.0259 44 17.6572V19C44 19.5523 43.5523 20 43 20C42.4478 19.9999 42 19.5522 42 19V17.6572C42 17.4345 41.9748 17.214 41.9268 17H34C32.3432 16.9999 31 15.6568 31 14V6.07227C30.7861 6.02428 30.5654 6 30.3428 6H7C5.3432 6.00006 4 7.34318 4 9V55C4 56.6568 5.3432 57.9999 7 58H39C40.6569 58 42 56.6569 42 55V54C42 53.4478 42.4478 53.0001 43 53C43.5523 53 44 53.4477 44 54V55C44 57.7614 41.7614 60 39 60H7C4.23863 59.9999 2 57.7614 2 55V9C2 6.23861 4.23863 4.00006 7 4H30.3428ZM45.75 22C53.5459 22 59.9267 28.0433 60.4639 35.7021H58.5547C58.4773 34.7488 58.2945 33.8251 58.0195 32.9434H52.6377C52.7553 33.8365 52.8341 34.7556 52.8682 35.7021H50.9648C50.9296 34.7324 50.8472 33.8134 50.7285 32.9434H43.376C42.9988 34.2213 41.8983 35.1892 40.5488 35.374C40.5274 35.8214 40.5166 36.2802 40.5166 36.75C40.5166 37.6218 40.5548 38.4546 40.625 39.25C41.2643 39.4657 41.7833 39.9442 42.0527 40.5566H43.167L44.1699 42.46H42.0625C41.9029 42.8334 41.6512 43.158 41.3359 43.4053C42.3919 47.3379 44.2654 49.5966 45.75 49.5967C46.2912 49.5967 46.8845 49.2965 47.4707 48.7246L48.7695 51.1904C47.7949 51.3931 46.7849 51.5 45.75 51.5C37.6019 51.4999 31 44.8982 31 36.75C31 28.6018 37.6019 22.0001 45.75 22ZM55.2656 51.5H51.7031L58.666 37.9951H62.2285L55.2656 51.5ZM52.5508 46.4062L50.8271 49.8057L44.541 38.0234H48.0098L52.5508 46.4062ZM34.2598 42.46C35.7764 45.5049 38.4644 47.8658 41.7354 48.9482C40.8103 47.6453 40.0431 45.9124 39.501 43.8877C38.6689 43.7627 37.9766 43.2097 37.6562 42.46H34.2598ZM33.4805 32.9434C33.1058 34.1448 32.9033 35.4237 32.9033 36.75C32.9033 38.0763 33.1058 39.3552 33.4805 40.5566H37.666C37.8829 40.0636 38.2616 39.6574 38.7344 39.4053C38.6555 38.5443 38.6133 37.6599 38.6133 36.75C38.6133 36.1911 38.6297 35.6417 38.6611 35.1016C37.7592 34.6929 37.0654 33.9059 36.7812 32.9434H33.4805ZM41.7354 24.5518C38.4644 25.6342 35.7764 27.9951 34.2598 31.04H36.7676C37.1502 29.6733 38.3565 28.6506 39.8174 28.541C40.3278 26.9706 40.9813 25.6155 41.7354 24.5518ZM45.75 23.9033C44.4187 23.9034 42.7743 25.7198 41.6875 28.9307C42.5093 29.3668 43.1329 30.1265 43.3887 31.04H50.3955C49.4022 26.5259 47.3499 23.9033 45.75 23.9033ZM49.7646 24.5518C50.9006 26.1516 51.7987 28.3995 52.334 31.04H57.2412C55.7246 27.9949 53.0358 25.6342 49.7646 24.5518ZM33 14C33 14.5522 33.4478 14.9999 34 15H40.5859L33 7.41406V14Z', 'M20.7286 33.2676C21.1081 32.9152 21.6888 32.9132 22.0694 33.248L22.1427 33.3193L28.6427 40.3193C28.9989 40.703 28.9989 41.297 28.6427 41.6807L22.1427 48.6807L22.0694 48.752C21.6888 49.0868 21.1081 49.0848 20.7286 48.7324C20.3243 48.3566 20.3012 47.7239 20.6769 47.3193L25.6163 42H12.0001C11.4478 42 11.0001 41.5523 11.0001 41C11.0001 40.4477 11.4478 40 12.0001 40H25.6163L20.6769 34.6807L20.6105 34.6016C20.3054 34.1974 20.3498 33.6198 20.7286 33.2676Z']],
+  name: 'conDataEgest'
+} as IconDefinition

package/src/icons/baseIcons/conc/conDataIngest.ts

@@ -0,0 +1,8 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [64, 64, [], '', ['M18 24H16V26H18V24ZM18.8574 32.8193C17.7399 32.3723 16.5009 32.3452 15.3682 32.7363L15.1426 32.8193L6.34863 36.3369L12.1865 49H21.8135L27.6504 36.3369L18.8574 32.8193ZM40.8193 33.2676C41.1987 32.9153 41.7785 32.9135 42.1592 33.248L42.2324 33.3193L48.7324 40.3193C49.0887 40.703 49.0887 41.297 48.7324 41.6807L42.2324 48.6807C41.8566 49.0851 41.2239 49.1081 40.8193 48.7324C40.4149 48.3566 40.3919 47.7239 40.7676 47.3193L45.707 42H32C31.4477 42 31 41.5523 31 41C31 40.4477 31.4477 40 32 40H45.707L40.7676 34.6807L40.7012 34.6016C40.396 34.1973 40.4403 33.6198 40.8193 33.2676ZM10.0127 32.7168L14.4004 30.9629L14.7158 30.8457C16.3014 30.2982 18.0352 30.3371 19.5996 30.9629L23.9863 32.7168L20.9541 28H13.0459L10.0127 32.7168ZM18 19V9C18 6.23858 20.2386 4 23 4H46.3428C47.6689 4 48.9412 4.52716 49.8789 5.46484L58.5352 14.1211L58.7061 14.3008C59.5367 15.218 60 16.4139 60 17.6572V55C60 57.7614 57.7614 60 55 60H23C20.2386 60 18 57.7614 18 55V54C18 53.4477 18.4477 53 19 53C19.5523 53 20 53.4477 20 54V55C20 56.6569 21.3431 58 23 58H55C56.6569 58 58 56.6569 58 55V17.6572C58 17.4342 57.9719 17.2142 57.9238 17H50C48.3431 17 47 15.6569 47 14V6.0752C46.7859 6.02711 46.5657 6 46.3428 6H23C21.3431 6 20 7.34315 20 9V19C20 19.5523 19.5523 20 19 20C18.4477 20 18 19.5523 18 19ZM21.5 26C21.8401 26 22.1568 26.173 22.3408 26.459L26.8408 33.459L26.8926 33.5479C26.9531 33.6669 26.9861 33.7938 26.9961 33.9209L29.3711 34.8711C29.6256 34.9729 29.8272 35.1751 29.9287 35.4297C30.0302 35.6844 30.023 35.9698 29.9082 36.2188L23.3623 50.4189C23.1989 50.7731 22.8442 51 22.4541 51H11.5459C11.1558 51 10.8011 50.7731 10.6377 50.4189L4.0918 36.2188C3.97704 35.9698 3.96981 35.6844 4.07129 35.4297C4.17279 35.1751 4.37445 34.9729 4.62891 34.8711L7.00293 33.9209C7.01543 33.7616 7.06673 33.6028 7.15918 33.459L11.6592 26.459L11.7334 26.3574C11.922 26.1324 12.2022 26 12.5 26H14V23C14 22.4477 14.4477 22 15 22H19C19.5523 22 20 22.4477 20 23V26H21.5ZM49 14C49 14.5523 49.4477 15 50 15H56.5859L49 7.41406V14Z']],
+  name: 'conDataIngest'
+} as IconDefinition

package/src/icons/baseIcons/cul/culShips.ts

@@ -0,0 +1,9 @@
+/* eslint-disable */
+
+import { IconDefinition } from '../../types'
+
+export default {
+  details: [32, 32, [], '', ['M23.5996 9C24.1519 9 24.5996 9.44771 24.5996 10V11.625H26.2246C26.7769 11.625 27.2246 12.0727 27.2246 12.625V18.0078L30.6904 19.3945C31.2395 19.6142 31.5996 20.1459 31.5996 20.7373C31.5996 21.1795 31.4353 21.6032 31.1426 21.9287L31.0098 22.0625L27.2246 25.4688V28.7998C27.2246 30.3462 25.9712 31.5996 24.4248 31.5996H16.1748C14.6284 31.5996 13.375 30.3462 13.375 28.7998V25.4688L9.58984 22.0625C9.21428 21.7245 9 21.2426 9 20.7373C9 20.1496 9.35315 19.6198 9.89551 19.3936L13.375 17.9434V12.625C13.375 12.0727 13.8227 11.625 14.375 11.625H16V10C16 9.44772 16.4477 9 17 9H23.5996ZM10.6221 20.8232C10.6319 20.8416 10.6443 20.8588 10.6602 20.873L14.6436 24.458L14.7188 24.5332C14.8827 24.7157 14.9746 24.9533 14.9746 25.2012V28.7998C14.9746 29.4625 15.5121 30 16.1748 30H24.4248C25.0875 30 25.625 29.4625 25.625 28.7998V25.2012C25.6251 24.9178 25.7454 24.6476 25.9561 24.458L29.9395 20.873L29.9648 20.8447C29.9681 20.8402 29.9698 20.8348 29.9727 20.8301L26.1182 19.2891L26.1094 19.2852L20.2949 16.793L10.6221 20.8232ZM14.9746 17.2764L19.9141 15.2188L20.0088 15.1846C20.2008 15.1264 20.4062 15.1275 20.5977 15.1875L20.6924 15.2227L25.625 17.3359V13.2246H14.9746V17.2764ZM17.5996 11.625H23V10.5996H17.5996V11.625Z', 'M14.5996 1C15.1519 1 15.5996 1.44772 15.5996 2V3.625H17.2246C17.7769 3.625 18.2246 4.07271 18.2246 4.625V8.2002H16.625V5.22461H5.97461V9.27637L10.9141 7.21875L11.0088 7.18457C11.2008 7.12641 11.4062 7.12752 11.5977 7.1875L11.6924 7.22266L15.2988 8.76758C15.2359 8.89854 15.2002 9.04516 15.2002 9.2002V10.4668L11.2949 8.79297L1.62207 12.8232C1.63192 12.8416 1.64435 12.8588 1.66016 12.873L5.64355 16.458L5.71875 16.5332C5.88271 16.7157 5.97456 16.9533 5.97461 17.2012V20.7998C5.97461 21.4625 6.51206 22 7.1748 22H8.05566L9.99512 23.5996H7.1748C5.62841 23.5996 4.375 22.3462 4.375 20.7998V17.4688L0.589844 14.0625C0.214279 13.7245 0 13.2426 0 12.7373C0 12.1496 0.353155 11.6198 0.895508 11.3936L4.375 9.94336V4.625C4.375 4.07272 4.82272 3.625 5.375 3.625H7V2C7 1.44772 7.44772 1 8 1H14.5996ZM8.59961 3.625H14V2.59961H8.59961V3.625Z']],
+  name: 'culShips',
+  pathProps: {"fillRule":"evenodd","clipRule":"evenodd"}
+} as IconDefinition

package/src/icons/baseIcons/fal/falUser.ts

@@ -3,6 +3,6 @@
 import { IconDefinition } from '../../types'
 
 export default {
-	details: [448, 512, [], '', 'M313.6 288c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-41.6c0-74.2-60.2-134.4-134.4-134.4zM416 464c0 8.8-7.2 16-16 16H48c-8.8 0-16-7.2-16-16v-41.6C32 365.9 77.9 320 134.4 320c19.6 0 39.1 16 89.6 16 50.4 0 70-16 89.6-16 56.5 0 102.4 45.9 102.4 102.4V464zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm0-224c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z'],
-	name: 'falUser'
+  details: [32, 32, [], '', ['M16.2 16.5C19.735 16.5 22.6 13.635 22.6 10.1C22.6 6.56501 19.735 3.70001 16.2 3.70001C12.665 3.70001 9.8 6.56501 9.8 10.1C9.8 13.635 12.665 16.5 16.2 16.5ZM16.2 5.30001C18.845 5.30001 21 7.45501 21 10.1C21 12.745 18.845 14.9 16.2 14.9C13.555 14.9 11.4 12.745 11.4 10.1C11.4 7.45501 13.555 5.30001 16.2 5.30001ZM20.68 18.1C19.245 18.1 18.555 18.9 16.2 18.9C13.845 18.9 13.16 18.1 11.72 18.1C8.01 18.1 5 21.11 5 24.82V26.9C5 28.225 6.075 29.3 7.4 29.3H25C26.325 29.3 27.4 28.225 27.4 26.9V24.82C27.4 21.11 24.39 18.1 20.68 18.1ZM25.8 26.9C25.8 27.34 25.44 27.7 25 27.7H7.4C6.96 27.7 6.6 27.34 6.6 26.9V24.82C6.6 21.995 8.895 19.7 11.72 19.7C12.7 19.7 13.675 20.5 16.2 20.5C18.72 20.5 19.7 19.7 20.68 19.7C23.505 19.7 25.8 21.995 25.8 24.82V26.9Z']],
+  name: 'falUser'
 } as IconDefinition

package/src/icons/baseIcons/icons.ts

@@ -11,7 +11,9 @@ export { default as conCreateDataset } from './conc/conCreateDataset'
 export { default as conDatabase } from './conc/conDatabase'
 export { default as conDatabasePlus } from './conc/conDatabasePlus'
 export { default as conDataConnectionPlus } from './conc/conDataConnectionPlus'
+export { default as conDataEgest } from './conc/conDataEgest'
 export { default as conDataFabric } from './conc/conDataFabric'
+export { default as conDataIngest } from './conc/conDataIngest'
 export { default as conDataSearchAlt } from './conc/conDataSearchAlt'
 export { default as conDataSearchPlus } from './conc/conDataSearchPlus'
 export { default as conDataset } from './conc/conDataset'
@@ -86,6 +88,7 @@ export { default as culPlusThin } from './cul/culPlusThin'
 export { default as culReupload } from './cul/culReupload'
 export { default as culScreenshot } from './cul/culScreenshot'
 export { default as culScreenshotAlt } from './cul/culScreenshotAlt'
+export { default as culShips } from './cul/culShips'
 export { default as culShoppingCartPlus } from './cul/culShoppingCartPlus'
 export { default as culShortcut } from './cul/culShortcut'
 export { default as culTarget } from './cul/culTarget'

package/src/icons/baseIcons/types.ts

@@ -12,7 +12,9 @@ export type BaseIcon =
   | 'conDatabase'
   | 'conDatabasePlus'
   | 'conDataConnectionPlus'
+  | 'conDataEgest'
   | 'conDataFabric'
+  | 'conDataIngest'
   | 'conDataSearchAlt'
   | 'conDataSearchPlus'
   | 'conDataset'
@@ -87,6 +89,7 @@ export type BaseIcon =
   | 'culReupload'
   | 'culScreenshot'
   | 'culScreenshotAlt'
+  | 'culShips'
   | 'culShoppingCartPlus'
   | 'culShortcut'
   | 'culTarget'

package/src/icons/types.ts

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Svg from '../svg'
 import { PropsOf } from '../utils'
 import { BaseIcon } from './baseIcons/types'

package/src/image/image.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'
 import { ImageProps } from './image.types'

package/src/input/autoCompletePopover.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { memo } from 'react'
 
 import { styled } from '../core'
 import { List } from '../list'
@@ -46,4 +46,4 @@ export const AutoCompletePopover = ({
   )
 }
 
-export default React.memo(AutoCompletePopover)
+export default memo(AutoCompletePopover)

package/src/input/input.types.ts

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { IconProp, IconProps } from '../icon'
 import { PProps } from '../p'
 import { SystemProps } from '../system'

package/src/input/inputIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import Icon, { IconProps } from '../icon'
 import { cs } from '../utils'

package/src/input/inputInput.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { styled, useStyleConfig, vui } from '../core'
 import { cs, filterUndefined } from '../utils'
 import { useInputContext } from './context'

package/src/label/label.types.ts

@@ -1,4 +1,4 @@
-import { SystemProps, TypographyProps } from '../system'
+import { SystemProps } from '../system'
 import { ThemingProps } from '../theme'
 
 export type LabelProps = SystemProps &

package/src/link/link.tsx

@@ -8,33 +8,46 @@ import { LinkProps } from './link.types'
 import LinkIcon from './linkIcon'
 import LinkText from './linkText'
 
+const linkSwipeAnimation = `
+  @keyframes linkSwipe {
+    from {
+      background-size: 0 1px;
+    }
+    to {
+      background-size: 100% 1px;
+    }
+  }
+`
+
 export const LinkBase = styled.aBox.attrs((props: LinkProps) => ({
   isUnderlined: props.isUnderlined || false,
 }))`
-  align-items: center;
-  border-radius: none;
+  ${linkSwipeAnimation}
+  display: inline;
   cursor: pointer;
-  display: inline-flex;
-  line-height: normal;
+  position: relative;
+  line-height: 1.5;
   outline: none;
   width: fit-content;
+  text-decoration: none;
 
-  &:not(.vui-listItemLink) > span {
-    text-decoration-line: ${props => (props.isUnderlined ? 'underline' : 'none')};
-    text-decoration-thickness: 1px;
-    text-underline-offset: 2px;
+  &:not(.vui-linkNoUnderline) span {
+    position: relative;
+    background: linear-gradient(to right, currentcolor, currentcolor);
+    background-size: ${({ isUnderlined }) => (isUnderlined ? '100% 1px' : '0 1px')};
+    background-position: 0 100%;
+    background-repeat: no-repeat;
+    text-decoration: none;
+    padding-bottom: 2px;
+    line-height: 1;
   }
 
-  &:not(.vui-listItemLink) > span:hover {
-    text-decoration-line: underline;
-    text-decoration-thickness: ${props => (props.isUnderlined ? '2px' : '1px')};
+  &:hover span {
+    animation: linkSwipe 0.3s ease forwards;
+    background-size: 100% 1px;
   }
 `
 
-/**
- * Displays a link item. Handles different underline scenarios and opening external links in new tab.
- * Exposes some props to the children via context.
- */
 export const Link = vui<'a', LinkProps>((props, ref) => {
   const {
     children,
@@ -63,7 +76,9 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
   return (
     <LinkProvider value={context}>
       <LinkBase
+        alignItems={iconLeft || iconRight ? 'center' : undefined}
         className={cs('vui-link', className)}
+        display={iconLeft || iconRight ? 'inline-flex' : 'inline'}
         focusRing={2}
         isUnderlined={isUnderlined}
         ref={ref}

package/src/link/linkIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import Icon, { IconProps } from '../icon'
 import { cs } from '../utils'

package/src/link/linkText.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import T, { TProps } from '../t'
 import { cs } from '../utils'

package/src/list/list.tsx

@@ -1,5 +1,4 @@
-import { is } from '@xstyled/util'
-import React, { useEffect, useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 
 import { styled, useStyleConfig, vui, VuiComponent } from '../core'
 import { cs, filterUndefined, isArray, isReactText } from '../utils'
@@ -26,7 +25,7 @@ export const List = vui<'ul', ListProps>((props, ref) => {
 
   const listRef = useRef<HTMLUListElement>(null)
 
-  const [_, setActive] = React.useState(-1)
+  const [_, setActive] = useState(-1)
 
   const onKeydown = (event: KeyboardEvent) => {
     if ([...prevKeys, ...nextKeys, ...clickKeys].includes(event.key)) {

package/src/list/listDivider.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import Divider, { DividerProps } from '../divider'
 import { cs } from '../utils'

package/src/list/listHeading.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import { T, TProps } from '../t'
 import { cs } from '../utils'

package/src/list/listIcon.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import Icon, { IconProps } from '../icon'
 import { cs } from '../utils'

package/src/list/listItem.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 
 import { styled, useStyleConfig, vui } from '../core'
 import Link, { LinkProps } from '../link'
@@ -12,7 +12,7 @@ import ListText from './listText'
 const ListItemLink = vui<'a', LinkProps>((props, ref) => (
   <Link
     borderRadius="none"
-    className="vui-listItemLink"
+    className="vui-listItemLink vui-linkNoUnderline"
     h="100%"
     px={2}
     ref={ref}
@@ -110,14 +110,14 @@ export const ListItem = vui<'li', ListItemProps>((props, ref) => {
       {...aliasedProps}
       {...rest}
     >
-      <ContentWrapper {...linkProps}>
+      <ContentWrapper {...linkProps} alignItems={'center'} display={'inline-flex'}>
         {itemLeft}
 
-        {isString(iconLeft) ? <ListIcon mr={1} name={iconLeft} /> : iconLeft}
+        {isString(iconLeft) ? <ListIcon mr={1} name={iconLeft} verticalAlign={'middle'} /> : iconLeft}
 
         {children ?? (isReactText(text) ? <ListText {...{ isTruncated, text }} /> : text)}
 
-        {isString(iconRight) ? <ListIcon ml="auto" name={iconRight} /> : iconRight}
+        {isString(iconRight) ? <ListIcon ml="auto" name={iconRight} verticalAlign={'middle'} /> : iconRight}
 
         {itemRight}
       </ContentWrapper>

package/src/list/listText.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import T, { TProps } from '../t'
 import { cs, ellipsisOverflow } from '../utils'

package/src/menu/menu.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import { Popover } from '../popover'
 import { filterUndefined } from '../utils'

package/src/menu/menuButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { ButtonProps, TextButton } from '../button'
 import { useStyleConfig, vui } from '../core'
 import { PopoverTrigger } from '../popover'

package/src/menu/menuItem.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import { ListItem, ListItemProps } from '../list'
 import { usePopoverContext } from '../popover'

package/src/menu/theme.ts

@@ -7,16 +7,30 @@ const defaultProps = {
 const parts = ['button', 'item', 'list']
 
 const sizes = {
-  md: {
+  sm: {
+    button: {
+      size: 'sm',
+    },
     list: {
       size: 'sm',
     },
   },
-  lg: {
+  md: {
+    button: {
+      size: 'md',
+    },
     list: {
       size: 'md',
     },
   },
+  lg: {
+    button: {
+      size: 'lg',
+    },
+    list: {
+      size: 'lg',
+    },
+  },
 }
 
 const variants = {}

package/src/modal/modal.tsx

@@ -1,4 +1,4 @@
-import React, { cloneElement, useRef } from 'react'
+import { cloneElement, useRef } from 'react'
 
 import Box from '../box'
 import { KeyboardKeys, vui, VuiComponent } from '../core'

package/src/modal/modalBackdrop.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { styled, useStyleConfig, vui } from '../core'
 import { colors } from '../theme'
 import { cs, HSLToRGBA, parseHSL } from '../utils'

package/src/modal/modalContent.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { styled, useStyleConfig, vui } from '../core'
 import { callAll, cs } from '../utils'
 import { useModalContext } from './context'

package/src/pagination/pagination.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box from '../box'
 import { useStyleConfig, vui, VuiComponent } from '../core'
 import { cs, isJsx, runIfFn } from '../utils'

package/src/pagination/paginationButton.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Button from '../button'
 import { useStyleConfig, vui } from '../core'
 import { cs } from '../utils'

package/src/pagination/paginationEllipsis.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box, { BoxProps } from '../box'
 import { useStyleConfig, vui } from '../core'
 import { cs } from '../utils'

package/src/pagination/paginationGoToPage.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box, { BoxProps } from '../box'
 import { useStyleConfig, vui } from '../core'
 import Input from '../input'

package/src/pagination/paginationNavigation.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react'
+import { Fragment } from 'react'
 
 import Box, { BoxProps } from '../box'
 import { useStyleConfig, vui } from '../core'

package/src/pagination/paginationPrevNext.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Button from '../button'
 import { useStyleConfig, vui } from '../core'
 import { cs } from '../utils'

package/src/pagination/paginationResults.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { useStyleConfig, vui } from '../core'
 import T, { TProps } from '../t'
 import { cs } from '../utils'

package/src/panel/panel.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Box from '../box'
 import { omitThemingProps, useStyleConfig, vui } from '../core'
 import { cs } from '../utils'