@loomhq/lens 10.71.0 → 10.72.0

package/dist/components/button/button.js

@@ -126,7 +126,7 @@ const ButtonWrapper = styled.button `
   }
 
   &:focus-visible {
-    outline: none;
+    outline: 1px solid transparent;
     ${getFocusRing()};
   }
 

package/dist/components/color-picker/color-picker.js

@@ -58,7 +58,7 @@ const InputContainer = styled.div `
     }
 
     &:focus {
-      outline: none;
+      outline: 1px solid transparent;
       box-shadow: var(--lns-formFieldBorderShadowFocus);
     }
   }

package/dist/components/container/container.d.ts

@@ -1,12 +1,13 @@
 import React from 'react';
 import { ResponsiveType } from '../../types';
 declare const ContainerWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerWrapperProps, object>;
-declare const Container: ({ children, backgroundColor, contentColor, borderColor, radius, borderSide, borderWidth, shadow, padding, paddingX, paddingY, paddingLeft, paddingRight, paddingTop, paddingBottom, margin, marginX, marginY, marginLeft, marginRight, marginTop, marginBottom, width, height, minWidth, minHeight, maxWidth, maxHeight, htmlTag, position, overflow, zIndex, top, bottom, left, right, ...props }: ContainerProps & React.ComponentProps<typeof ContainerWrapper>) => JSX.Element;
+declare const Container: ({ children, backgroundColor, backgroundImage, contentColor, borderColor, radius, borderSide, borderWidth, shadow, padding, paddingX, paddingY, paddingLeft, paddingRight, paddingTop, paddingBottom, margin, marginX, marginY, marginLeft, marginRight, marginTop, marginBottom, width, height, minWidth, minHeight, maxWidth, maxHeight, htmlTag, position, overflow, zIndex, top, bottom, left, right, ...props }: ContainerProps & React.ComponentProps<typeof ContainerWrapper>) => JSX.Element;
 export declare const availableBorderSides: string[];
 export declare const availableRadii: string[];
 export declare const availableHtmlTags: string[];
 interface SharedProps {
     backgroundColor?: string;
+    backgroundImage?: string;
     contentColor?: string;
     borderColor?: string;
     radius?: 'medium' | 'large' | 'xlarge' | 'full';

package/dist/components/container/container.js

@@ -28,6 +28,7 @@ const ContainerWrapper = styled.div `
   ${props => props.overflow && `overflow: ${props.overflow}`};
   ${props => props.backgroundColor &&
     `background-color: ${getColorValue(props.backgroundColor)}`};
+  ${props => props.backgroundImage && `background-image: ${props.backgroundImage}`}
   ${props => props.contentColor && `color: ${getColorValue(props.contentColor)}`};
   ${props => getBorderSideAndColor(props.borderSide, props.borderColor, props.borderWidth)};
   ${props => getRadius(props.radius)};
@@ -55,8 +56,8 @@ const ContainerWrapper = styled.div `
   ${props => props.zIndex && `z-index: ${props.zIndex}`};
 `;
 const Container = (_a) => {
-    var { children, backgroundColor, contentColor, borderColor, radius, borderSide, borderWidth = '1px', shadow, padding, paddingX, paddingY, paddingLeft, paddingRight, paddingTop, paddingBottom, margin, marginX, marginY, marginLeft, marginRight, marginTop, marginBottom, width, height, minWidth, minHeight, maxWidth, maxHeight, htmlTag = 'div', position, overflow, zIndex, top, bottom, left, right } = _a, props = __rest(_a, ["children", "backgroundColor", "contentColor", "borderColor", "radius", "borderSide", "borderWidth", "shadow", "padding", "paddingX", "paddingY", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "margin", "marginX", "marginY", "marginLeft", "marginRight", "marginTop", "marginBottom", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "htmlTag", "position", "overflow", "zIndex", "top", "bottom", "left", "right"]);
-    return (React.createElement(ContainerWrapper, Object.assign({ backgroundColor: backgroundColor, contentColor: contentColor, borderColor: borderColor, radius: radius, borderSide: borderSide, shadow: shadow, padding: padding, paddingLeft: paddingX || paddingLeft, paddingRight: paddingX || paddingRight, paddingTop: paddingY || paddingTop, paddingBottom: paddingY || paddingBottom, margin: margin, marginLeft: marginX || marginLeft, marginRight: marginX || marginRight, marginTop: marginY || marginTop, marginBottom: marginY || marginBottom, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, as: htmlTag, position: position, top: top, bottom: bottom, left: left, right: right, overflow: overflow, zIndex: zIndex, borderWidth: borderWidth }, props), children));
+    var { children, backgroundColor, backgroundImage, contentColor, borderColor, radius, borderSide, borderWidth = '1px', shadow, padding, paddingX, paddingY, paddingLeft, paddingRight, paddingTop, paddingBottom, margin, marginX, marginY, marginLeft, marginRight, marginTop, marginBottom, width, height, minWidth, minHeight, maxWidth, maxHeight, htmlTag = 'div', position, overflow, zIndex, top, bottom, left, right } = _a, props = __rest(_a, ["children", "backgroundColor", "backgroundImage", "contentColor", "borderColor", "radius", "borderSide", "borderWidth", "shadow", "padding", "paddingX", "paddingY", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "margin", "marginX", "marginY", "marginLeft", "marginRight", "marginTop", "marginBottom", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "htmlTag", "position", "overflow", "zIndex", "top", "bottom", "left", "right"]);
+    return (React.createElement(ContainerWrapper, Object.assign({ backgroundColor: backgroundColor, backgroundImage: backgroundImage, contentColor: contentColor, borderColor: borderColor, radius: radius, borderSide: borderSide, shadow: shadow, padding: padding, paddingLeft: paddingX || paddingLeft, paddingRight: paddingX || paddingRight, paddingTop: paddingY || paddingTop, paddingBottom: paddingY || paddingBottom, margin: margin, marginLeft: marginX || marginLeft, marginRight: marginX || marginRight, marginTop: marginY || marginTop, marginBottom: marginY || marginBottom, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, as: htmlTag, position: position, top: top, bottom: bottom, left: left, right: right, overflow: overflow, zIndex: zIndex, borderWidth: borderWidth }, props), children));
 };
 export const availableBorderSides = ['all', 'left', 'right', 'top', 'bottom'];
 export const availableRadii = ['medium', 'large', 'xlarge', 'full'];

package/dist/components/icon-button/icon-button.js

@@ -32,7 +32,7 @@ export const IconButtonBox = styled.button `
   width: ${props => sizeStyles[props.size].size};
   height: ${props => sizeStyles[props.size].size};
   position: relative;
-  outline: none;
+  outline: 1px solid transparent;
   transition: 0.6s background-color;
   display: inline-flex;
   justify-content: center;

package/dist/components/link/link.js

@@ -43,24 +43,21 @@ const LinkWrapper = styled.a `
   ${props => !props.disabled && `color: ${variants[props.variant].color}`};
   ${props => (props.disabled ? statusStyles.disabled : statusStyles.enabled)};
   ${props => props.as === 'button' && buttonStyles.isButton};
-  &:focus {
-    outline: 0px solid transparent;
+  border-radius: 0.28em;
+  box-shadow: 0 0 0 1px transparent;
+  text-decoration: underline;
+  text-underline-offset: 0.35em;
+  transition: 0.3s box-shadow;
+  &:focus,
+  &:focus-visible {
+    outline: 1px solid transparent;
   }
   &:focus-visible {
-    outline: none;
     ${getFocusRing()};
   }
   &::-moz-focus-inner {
     border: 0;
   }
-  @supports not (text-underline-offset: 0.35em) {
-    box-shadow: 0 1px 0 currentColor;
-    padding: 0 0 1px 0;
-  }
-  @supports (text-underline-offset: 0.35em) {
-    text-underline-offset: 0.35em;
-    text-decoration: underline;
-  }
 `;
 const Link = (_a) => {
     var { children, href, variant = 'primary', htmlTag = 'a', isDisabled } = _a, props = __rest(_a, ["children", "href", "variant", "htmlTag", "isDisabled"]);

package/dist/components/select/select.js

@@ -50,7 +50,7 @@ const SelectHeaderWrapper = styled.button `
   }
 
   &:focus {
-    outline: none;
+    outline: 1px solid transparent;
     box-shadow: var(--lns-formFieldBorderShadowFocus);
   }
 

package/dist/components/tabs/tabs.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getColorValue, getFocusRing, getFontWeight, getSize, getSizeValue, u, } from '../../utilities';
+import { getColorValue, getFocusRing, getFontWeight, getRadius, getSize, getSizeValue, u, } from '../../utilities';
 import Container from '../container/container';
 import Icon from '../icon/icon';
 import React from 'react';
@@ -21,6 +21,8 @@ const Wrapper = styled.div `
   `};
 `;
 const TabsNav = styled.nav `
+  --activeIndicatorHeight: 3px;
+
   display: flex;
   overflow: auto;
   -ms-overflow-style: none;
@@ -49,27 +51,33 @@ const TabWrapper = styled.button `
   appearance: none;
   font: inherit;
   background: transparent;
-  cursor: pointer;
   border: none;
+  ${getRadius('medium')};
+  cursor: pointer;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   vertical-align: middle;
-  padding: 0 0 ${u(1)} 0;
+  padding: 0 0 calc(var(--lns-space-small) + var(--activeIndicatorHeight)) 0;
+  position: relative;
   color: inherit;
   text-decoration: none;
   flex-shrink: 0;
   ${getFontWeight('medium')};
   transition: 0.6s color;
-  border-bottom: ${u(0.375)} solid transparent;
   white-space: nowrap;
   color: ${props => getColorValue(props.isActive ? 'body' : 'bodyDimmed')};
   ${props => props.isActive &&
     `border-color: ${getColorValue('primary')};
   `};
 
-  &:focus {
-    outline: none;
+  &:focus,
+  &:focus-visible {
+    outline: 1px solid transparent;
+  }
+
+  &:focus-visible {
+    ${getFocusRing(undefined, 'inset')};
   }
 
   &:hover {
@@ -77,8 +85,14 @@ const TabWrapper = styled.button `
     transition: 0.3s color;
   }
 
-  &:focus-visible {
-    ${getFocusRing(undefined, 'inset')};
+  &::after {
+    bottom: 0;
+    ${getRadius('medium')};
+    content: '';
+    height: var(--activeIndicatorHeight);
+    position: absolute;
+    width: 100%;
+    ${props => props.isActive && `background-color: ${getColorValue('primary')}`};
   }
 `;
 export const Tab = (_a) => {

package/dist/components/text-button/text-button.js

@@ -48,8 +48,9 @@ const TextButtonWrapper = styled.button `
   ${props => props.offsetSide &&
     `margin-${props.offsetSide}: calc(-1 * ${sizeStyles[props.size].xSpace})`};
 
-  &:focus {
-    outline: none;
+  &:focus,
+  &:focus-visible {
+    outline: 1px solid transparent;
   }
 
   &:focus-visible {

package/dist/components/text-input/text-input.js

@@ -62,7 +62,7 @@ const InputField = styled.input `
   }
 
   &:focus {
-    outline: none;
+    outline: 1px solid transparent;
     box-shadow: var(--lns-formFieldBorderShadowFocus);
   }
 

package/dist/components/textarea/textarea.js

@@ -42,7 +42,7 @@ const TextareaWrapper = styled.textarea `
   }
 
   &:focus {
-    outline: none;
+    outline: 1px solid transparent;
     box-shadow: var(--lns-formFieldBorderShadowFocus);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.71.0",
+  "version": "10.72.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",