@loomhq/lens 10.23.0 → 10.23.1

package/dist/components/base-styles/base-styles.js

@@ -1,8 +1,8 @@
 import { Global, css } from '@emotion/core';
+import { getAllCssVarsString, getThemeStylesString } from '../../css-variables';
 import { getColorValue, getTextSize } from '../../utilities';
 import React from 'react';
 import { cssUtilities } from '../../css-utilities';
-import { getAllCssVarsString, getThemeStylesString } from '../../css-variables';
 const buildGlobalStylesheet = (rootElement = ':root', bodyElement = 'body') => {
     return `
     ${rootElement} {

package/dist/components/button/button.d.ts

@@ -1,4 +1,3 @@
-import 'focus-visible/dist/focus-visible';
 import React from 'react';
 declare const ButtonWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ButtonWrapperProps, object>;
 declare const Button: ({ size, children, variant, hasFullWidth, icon, iconPosition, logoSrc, hasLoader, isDisabled, htmlTag, ...props }: ButtonProps & React.ComponentProps<typeof ButtonWrapper>) => JSX.Element;

package/dist/components/button/button.js

@@ -9,13 +9,12 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { css } from '@emotion/core';
-import styled from '@emotion/styled';
-import 'focus-visible/dist/focus-visible';
-import React from 'react';
+import { getColorValue, getFocusRing, getFontWeight, getRadius, getSize, getTextSize, u, } from '../../utilities';
 import Icon from '../icon/icon';
 import Loader from '../loader/loader';
-import { getFocusRing, getFontWeight, getRadius, getTextSize, u, getColorValue, getSize, } from '../../utilities';
+import React from 'react';
+import { css } from '@emotion/core';
+import styled from '@emotion/styled';
 const sizesStyles = {
     small: {
         height: u(4),
@@ -126,11 +125,8 @@ const ButtonWrapper = styled.button `
     background-color: ${props => variantStyles[props.variant].active};
   }
 
-  &:focus {
+  &:focus-visible {
     outline: none;
-  }
-
-  &.focus-visible {
     ${getFocusRing()};
   }
 

package/dist/components/checkbox/checkbox.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getFocusRing, u, getColorValue } from '../../utilities';
 import React, { forwardRef, useEffect, useRef } from 'react';
+import { getColorValue, getFocusRing, u } from '../../utilities';
 import styled from '@emotion/styled';
 const SvgCheckboxCheck = props => (React.createElement("svg", Object.assign({ width: 12, height: 9, viewBox: "0 0 12 9", fill: "none" }, props),
     React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.707.293a1 1 0 010 1.414l-7 7a1 1 0 01-1.414 0l-3-3a1 1 0 011.414-1.414L4 6.586 10.293.293a1 1 0 011.414 0z", fill: "currentColor" })));
@@ -50,7 +50,7 @@ const CheckboxInput = styled.input `
     }
   }
 
-  &.focus-visible ~ .CheckboxBox {
+  &:focus-visible ~ .CheckboxBox {
     ${getFocusRing()};
   }
 

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

@@ -65,7 +65,7 @@ export const IconButtonBox = styled.button `
     ${getRadius('medium')};
   }
 
-  &.focus-visible:before {
+  &:focus-visible:before {
     ${getFocusRing()};
   }
 

package/dist/components/pill/pill.d.ts

@@ -1,4 +1,3 @@
-import 'focus-visible/dist/focus-visible';
 import React from 'react';
 declare const PillWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PillWrapperProps, object>;
 declare const Pill: ({ color, backgroundColor, children, icon, iconPosition, ...props }: PillProps & React.ComponentProps<typeof PillWrapper>) => JSX.Element;

package/dist/components/pill/pill.js

@@ -9,12 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import 'focus-visible/dist/focus-visible';
-import { getFontWeight, getRadius, getSize, getTextSize, u, getColorValue, } from '../../utilities';
+import { getColorValue, getFontWeight, getRadius, getSize, getTextSize, u, } from '../../utilities';
+import Container from '../container/container';
 import Icon from '../icon/icon';
 import React from 'react';
 import styled from '@emotion/styled';
-import Container from '../container/container';
 const PillWrapper = styled.div `
   display: inline-grid;
   grid-auto-flow: column;

package/dist/components/radio/radio.js

@@ -9,8 +9,8 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getFocusRing, u, getColorValue } from '../../utilities';
 import React, { forwardRef } from 'react';
+import { getColorValue, getFocusRing, u } from '../../utilities';
 import styled from '@emotion/styled';
 const RadioLabel = styled.label `
   display: block;
@@ -55,7 +55,7 @@ const RadioInput = styled.input `
     }
   }
 
-  &.focus-visible ~ .RadioBox {
+  &:focus-visible ~ .RadioBox {
     ${getFocusRing()};
   }
 `;

package/dist/components/switch/switch.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getFocusRing, u, getColorValue } from '../../utilities';
+import { getColorValue, getFocusRing, u } from '../../utilities';
 import React from 'react';
 import styled from '@emotion/styled';
 const switchHeight = 2;
@@ -47,7 +47,7 @@ const SwitchInput = styled.input `
   position: absolute;
   opacity: 0;
 
-  &.focus-visible ~ .SwitchBox {
+  &:focus-visible ~ .SwitchBox {
     ${getFocusRing()};
   }
 

package/dist/components/tabs/tabs.js

@@ -9,11 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getFocusRing, getFontWeight, getSize, getSizeValue, u, getColorValue, } from '../../utilities';
+import { getColorValue, getFocusRing, getFontWeight, getSize, getSizeValue, u, } from '../../utilities';
+import Container from '../container/container';
 import Icon from '../icon/icon';
 import React from 'react';
 import styled from '@emotion/styled';
-import Container from '../container/container';
 const negativeScrollOffset = scrollOffset => `calc(-1 * ${getSizeValue(scrollOffset)})`;
 const Wrapper = styled.div `
   ${props => props.scrollOffset &&
@@ -77,7 +77,7 @@ const TabWrapper = styled.button `
     transition: 0.3s color;
   }
 
-  &.focus-visible {
+  &:focus-visible {
     ${getFocusRing(undefined, 'inset')};
   }
 `;

package/dist/components/text-button/text-button.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import 'focus-visible/dist/focus-visible';
 declare const TextButtonWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, TextButtonWrapperProps, object>;
 declare const TextButton: ({ onClick, size, children, icon, iconPosition, isDisabled, htmlTag, offsetSide, ...props }: TextButtonProps & React.ComponentProps<typeof TextButtonWrapper>) => JSX.Element;
 declare type TextButtonProps = {

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

@@ -9,12 +9,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { getColorValue, getFocusRing, getFontWeight, getRadius, getTextSize, u, } from '../../utilities';
+import Container from '../container/container';
+import Icon from '../icon/icon';
 import React from 'react';
 import styled from '@emotion/styled';
-import { u, getTextSize, getRadius, getFontWeight, getFocusRing, getColorValue, } from '../../utilities';
-import Icon from '../icon/icon';
-import Container from '../container/container';
-import 'focus-visible/dist/focus-visible';
 const sizeStyles = {
     small: {
         textSize: 'small',
@@ -51,7 +50,7 @@ const TextButtonWrapper = styled.button `
     outline: none;
   }
 
-  &.focus-visible {
+  &:focus-visible {
     ${getFocusRing()};
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.23.0",
+  "version": "10.23.1",
   "scripts": {
     "dev": "next",
     "build:next": "next build",
@@ -23,7 +23,6 @@
   },
   "dependencies": {
     "downshift": "^5.0.0",
-    "focus-visible": "^5.0.2",
     "lodash": "^4.17.21",
     "react-color": "^2.19.3",
     "react-laag": "^2.0.3",
@@ -33,9 +32,9 @@
   "peerDependencies": {
     "@emotion/core": "^10.1.1",
     "@emotion/styled": "^10.0.27",
+    "@types/react": "^17.0.3",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0",
-    "@types/react": "^17.0.3"
+    "react-dom": "^16.12.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.8.4",