@veracity/vui 2.28.8-beta.0 → 2.28.8-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.28.8-beta.0",
+  "version": "2.28.8-beta.1",
   "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/link/link.tsx

@@ -17,25 +17,17 @@ export const LinkBase = styled.aBox.attrs((props: LinkProps) => ({
   display: inline-flex;
   line-height: normal;
   outline: none;
-  text-decoration: none;
-  transition-duration: instant;
   width: fit-content;
-  position: relative;
 
-  &:not(.vui-listItemLink) > span::after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: ${props => (props.isUnderlined ? '1px' : 0)};
-    background-color: currentColor;
-    opacity: ${props => (props.isUnderlined ? 1 : 0)};
+  &:not(.vui-listItemLink) > span {
+    text-decoration-line: ${props => (props.isUnderlined ? 'underline' : 'none')};
+    text-decoration-thickness: 1px;
+    text-underline-offset: 2px;
   }
 
-  & > span:hover::after {
-    height: ${props => (props.isUnderlined ? 2 : 1)}px;
-    opacity: 1;
+  & > span:hover {
+    text-decoration-line: underline;
+    text-decoration-thickness: ${props => (props.isUnderlined ? '2px' : '1px')};
   }
 `
 
@@ -58,8 +50,8 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
     weight,
     ...rest
   } = props
-  const styles = useStyleConfig('Link', props)
 
+  const styles = useStyleConfig('Link', props)
   const context = useMemo(() => filterUndefined({ size, variant }), [size, variant])
 
   const aliasedProps = filterUndefined({
@@ -80,7 +72,7 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
         {...rest}
       >
         {isString(iconLeft) ? <LinkIcon mr={1} name={iconLeft} /> : iconLeft}
-        <T position="relative">{children ?? (isReactText(text) ? <LinkText text={text} /> : text)}</T>
+        <T>{children ?? (isReactText(text) ? <LinkText text={text} /> : text)}</T>
         {isString(iconRight) ? <LinkIcon ml={1} name={iconRight} /> : iconRight}
       </LinkBase>
     </LinkProvider>
@@ -93,4 +85,5 @@ export const Link = vui<'a', LinkProps>((props, ref) => {
 Link.Icon = LinkIcon
 Link.Text = LinkText
 Link.displayName = 'Link'
+
 export default Link