@loomhq/lens 10.21.0 → 10.23.1

package/dist/colors.js

@@ -136,7 +136,7 @@ const themeSharedColors = {
 // This object has a specific spread order for documentation purposes
 export const themeColors = {
     light: Object.assign(Object.assign({ body: hslaGreys.grey8, bodyDimmed: alpha(saturate(hslaGreys.grey8, 264), bodyDimmedAlpha), background: hslaGreys.white, backgroundHover: alpha(hslaGreys.grey7, 0.1), backgroundActive: alpha(hslaGreys.grey7, 0.3), backgroundSecondary: alpha(hslaGreys.grey7, 0.04), backgroundSecondary2: { h: 45, s: 34, l: 78, a: 0.2 }, overlay: hslaGreys.white, border: alpha(hslaGreys.grey6, borderAlpha) }, themeSharedColors), { disabledBackground: hslaGreys.grey2, formFieldBorder: hslaGreys.grey3, formFieldBackground: hslaGreys.white, buttonBorder: alpha(hslaGreys.grey6, buttonBorderAlpha), upgrade: { h: 206, s: 100, l: 93, a: 1 }, upgradeHover: darken({ h: 206, s: 100, l: 93, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 100, l: 93, a: 1 }, 17), tabBackground: alpha(hslaGreys.grey6, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 100, l: 93, a: 1 }, discoveryLightBackground: { h: 206, s: 100, l: 97, a: 1 }, discoveryTitle: hslaGreys.grey8, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 } }),
-    dark: Object.assign(Object.assign({ body: hslaGreys.grey1, bodyDimmed: alpha(saturate(hslaGreys.grey1, 472), bodyDimmedAlpha), background: hslaGreys.grey8, backgroundHover: alpha(hslaGreys.white, 0.1), backgroundActive: alpha(darken(hslaGreys.grey6, 100), 0.2), backgroundSecondary: alpha(hslaGreys.white, 0.04), backgroundSecondary2: { h: 45, s: 13, l: 44, a: 0.2 }, overlay: lighten(hslaGreys.grey8, 50), border: alpha(hslaGreys.grey4, borderAlpha) }, themeSharedColors), { disabledBackground: darken(hslaGreys.grey6, 50), formFieldBorder: hslaGreys.grey6, formFieldBackground: hslaGreys.grey8, buttonBorder: alpha(hslaGreys.white, buttonBorderAlpha), upgrade: { h: 206, s: 92, l: 81, a: 1 }, upgradeHover: darken({ h: 206, s: 92, l: 81, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 92, l: 81, a: 1 }, 17), tabBackground: alpha(hslaGreys.white, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 92, l: 81, a: 1 }, discoveryLightBackground: hslaGreys.grey8, discoveryTitle: hslaBaseColors.blue, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 } }),
+    dark: Object.assign(Object.assign({ body: hslaGreys.grey1, bodyDimmed: alpha(saturate(hslaGreys.grey1, 472), bodyDimmedAlpha), background: hslaGreys.grey8, backgroundHover: alpha(hslaGreys.white, 0.1), backgroundActive: alpha(hslaGreys.white, 0.2), backgroundSecondary: alpha(hslaGreys.white, 0.04), backgroundSecondary2: { h: 45, s: 13, l: 44, a: 0.2 }, overlay: lighten(hslaGreys.grey8, 50), border: alpha(hslaGreys.grey4, borderAlpha) }, themeSharedColors), { disabledBackground: darken(hslaGreys.grey6, 50), formFieldBorder: hslaGreys.grey6, formFieldBackground: hslaGreys.grey8, buttonBorder: alpha(hslaGreys.white, buttonBorderAlpha), upgrade: { h: 206, s: 92, l: 81, a: 1 }, upgradeHover: darken({ h: 206, s: 92, l: 81, a: 1 }, 9), upgradeActive: darken({ h: 206, s: 92, l: 81, a: 1 }, 17), tabBackground: alpha(hslaGreys.white, tabBackgroundAlpha), discoveryBackground: { h: 206, s: 92, l: 81, a: 1 }, discoveryLightBackground: hslaGreys.grey8, discoveryTitle: hslaBaseColors.blue, discoveryHighlight: { h: 206, s: 100, l: 77, a: 0.3 } }),
 };
 export const hslaColors = Object.assign(Object.assign({}, hslaBaseColors), hslaGreys);
 export const colorsNames = [

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/available-icons/index.d.ts

@@ -209,3 +209,4 @@ export { default as SvgSplit } from "./split.js";
 export { default as SvgRepeat } from "./repeat.js";
 export { default as PictureInPicture } from "./picture-in-picture.js";
 export { default as FolderPlus } from "./folder-plus.js";
+export { default as SvgPower } from "./power.js";

package/dist/components/icon/available-icons/index.js

@@ -209,3 +209,4 @@ export { default as SvgSplit } from './split.js';
 export { default as SvgRepeat } from './repeat.js';
 export { default as PictureInPicture } from './picture-in-picture.js';
 export { default as FolderPlus } from './folder-plus.js';
+export { default as SvgPower } from './power.js';

package/dist/components/icon/available-icons/power.d.ts

@@ -0,0 +1,2 @@
+export default SvgPower;
+declare function SvgPower(props: any): JSX.Element;

package/dist/components/icon/available-icons/power.js

@@ -0,0 +1,5 @@
+import React from 'react';
+const SvgPower = props => (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none" }, props),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M7.39868 6.49277C7.78927 6.88324 7.78937 7.5164 7.39891 7.90699C6.49008 8.81611 5.87123 9.97431 5.62059 11.2351C5.36996 12.4959 5.49881 13.8028 5.99084 14.9904C6.48287 16.178 7.31599 17.193 8.38487 17.9071C9.45374 18.6213 10.7104 19.0024 11.9959 19.0024C13.2813 19.0024 14.538 18.6213 15.6068 17.9071C16.6757 17.193 17.5088 16.178 18.0009 14.9904C18.4929 13.8028 18.6217 12.4959 18.3711 11.2351C18.1205 9.97431 17.5016 8.81611 16.5928 7.90699C16.2023 7.5164 16.2024 6.88324 16.593 6.49277C16.9836 6.10231 17.6168 6.10242 18.0072 6.49301C19.1957 7.68186 20.005 9.19642 20.3327 10.8452C20.6605 12.4939 20.492 14.2029 19.8486 15.7559C19.2051 17.3089 18.1157 18.6362 16.7179 19.5701C15.3202 20.504 13.6769 21.0024 11.9959 21.0024C10.3148 21.0024 8.67155 20.504 7.27379 19.5701C5.87604 18.6362 4.78657 17.3089 4.14314 15.7559C3.49972 14.2029 3.33123 12.4939 3.65898 10.8452C3.98672 9.19642 4.796 7.68186 5.98446 6.49301C6.37493 6.10242 7.00809 6.10231 7.39868 6.49277Z", fill: "currentColor" }),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2.5C12.5523 2.5 13 2.94772 13 3.5H12H11C11 2.94772 11.4477 2.5 12 2.5ZM12 3.5H11V11.5C11 12.0523 11.4477 12.5 12 12.5C12.5523 12.5 13 12.0523 13 11.5V3.5H12Z", fill: "currentColor" })));
+export default SvgPower;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-declare const IconButtonWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IconButtonWrapperProps, object>;
-declare const IconButton: ({ altText, icon, onClick, iconColor, isDisabled, size, ...props }: IconButtonProps & React.ComponentProps<typeof IconButtonWrapper>) => JSX.Element;
+export declare const IconButtonBox: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, IconButtonBoxProps, object>;
+declare const IconButton: ({ altText, icon, onClick, iconColor, isDisabled, size, ...props }: IconButtonProps & React.ComponentProps<typeof IconButtonBox>) => JSX.Element;
 declare type IconButtonProps = {
     altText: string;
     icon?: React.ReactNode;
@@ -9,7 +9,7 @@ declare type IconButtonProps = {
     isDisabled?: boolean;
     size?: 'small' | 'medium';
 };
-declare type IconButtonWrapperProps = {
+declare type IconButtonBoxProps = {
     size?: 'small' | 'medium';
 };
 export default IconButton;

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

@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { getColorValue, getFocusRing, getRadius, u } from '../../utilities';
+import Icon from '../icon/icon';
 import React from 'react';
 import styled from '@emotion/styled';
-import { u, getFocusRing, getRadius, getColorValue } from '../../utilities';
-import Icon from '../icon/icon';
 const sizeStyles = {
     small: {
         size: u(3),
@@ -23,7 +23,7 @@ const sizeStyles = {
         iconSize: 3,
     },
 };
-const IconButtonWrapper = styled.button `
+export const IconButtonBox = styled.button `
   background-color: transparent;
   border: none;
   appearance: none;
@@ -65,7 +65,7 @@ const IconButtonWrapper = styled.button `
     ${getRadius('medium')};
   }
 
-  &.focus-visible:before {
+  &:focus-visible:before {
     ${getFocusRing()};
   }
 
@@ -75,7 +75,7 @@ const IconButtonWrapper = styled.button `
 `;
 const IconButton = (_a) => {
     var { altText, icon, onClick, iconColor = 'body', isDisabled, size = 'medium' } = _a, props = __rest(_a, ["altText", "icon", "onClick", "iconColor", "isDisabled", "size"]);
-    return (React.createElement(IconButtonWrapper, Object.assign({ "aria-label": altText, onClick: onClick, disabled: isDisabled, size: size }, props),
+    return (React.createElement(IconButtonBox, Object.assign({ "aria-label": altText, onClick: onClick, disabled: isDisabled, size: size }, props),
         React.createElement(Icon, { icon: icon, size: sizeStyles[size].iconSize, color: isDisabled ? 'disabledContent' : iconColor })));
 };
 export default IconButton;

package/dist/components/index.d.ts

@@ -7,7 +7,6 @@ export { default as TextInput } from "./text-input/text-input";
 export { default as Distribute } from "./distribute/distribute";
 export { default as Container } from "./container/container";
 export { default as Layout } from "./layout/layout";
-export { default as IconButton } from "./icon-button/icon-button";
 export { default as Loader } from "./loader/loader";
 export { default as Checkbox } from "./checkbox/checkbox";
 export { default as TextButton } from "./text-button/text-button";
@@ -28,6 +27,7 @@ export { default as Arrange } from "./arrange/arrange";
 export { default as ColorPicker } from "./color-picker/color-picker";
 export * from "./icon/available-icons";
 export { default as BaseStyles, buildGlobalStylesheet } from "./base-styles/base-styles";
+export { default as IconButton, IconButtonBox } from "./icon-button/icon-button";
 export { default as Menu, MenuItem } from "./menu/menu";
 export { default as Modal, ModalCard } from "./modal/modal";
 export { default as Tooltip, TooltipBox } from "./tooltip/tooltip";

package/dist/components/index.js

@@ -9,6 +9,7 @@ export { default as Distribute } from './distribute/distribute';
 export { default as Container } from './container/container';
 export { default as Layout } from './layout/layout';
 export { default as IconButton } from './icon-button/icon-button';
+export { IconButtonBox } from './icon-button/icon-button';
 export { default as Loader } from './loader/loader';
 export { default as Checkbox } from './checkbox/checkbox';
 export { default as TextButton } from './text-button/text-button';

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.21.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",