@loomhq/lens 10.98.1 → 10.99.0

package/dist/components/avatar/avatar.d.ts

@@ -7,6 +7,8 @@ declare type AvatarProps = {
     imageSrc?: string;
     size?: string | number;
     children?: React.ReactNode;
+    height?: number;
+    width?: number;
 };
 declare type AvatarWrapperProps = {
     size?: string | number;

package/dist/components/avatar/avatar.js

@@ -11,29 +11,30 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { getRadius, getSizeValue, u } from '../../utilities';
 import React from 'react';
-import { css } from '@emotion/core';
 import styled from '@emotion/styled';
 const getLetterSize = wrapperSize => `calc(${wrapperSize} / 1.75)`;
 const getAvatarSize = avatarSize => {
+    let width;
+    let height;
     if (avatarSize === 'medium') {
-        return css `
-      width: ${u(4)};
-      height: ${u(4)};
-      font-size: ${getLetterSize(u(4))};
-    `;
+        width = u(4);
+        height = u(4);
     }
-    if (avatarSize === 'large') {
-        return css `
-      width: ${u(7)};
-      height: ${u(7)};
-      font-size: ${getLetterSize(u(7))};
-    `;
+    else if (avatarSize === 'large') {
+        width = u(7);
+        height = u(7);
     }
-    return css `
-    width: ${getSizeValue(avatarSize)};
-    height: ${getSizeValue(avatarSize)};
-    font-size: ${getLetterSize(getSizeValue(avatarSize))};
-  `;
+    else {
+        const sizeValue = getSizeValue(avatarSize);
+        width = sizeValue;
+        height = sizeValue;
+    }
+    const fontSize = getLetterSize(width);
+    return {
+        width,
+        height,
+        fontSize,
+    };
 };
 const AvatarWrapper = styled.span `
   display: block;
@@ -46,7 +47,18 @@ const AvatarWrapper = styled.span `
   justify-content: center;
   line-height: 1;
   font-weight: var(--lns-fontWeight-bold);
-  ${props => getAvatarSize(props.size)};
+  width: ${props => {
+    const { width } = getAvatarSize(props.size);
+    return width;
+}};
+  height: ${props => {
+    const { height } = getAvatarSize(props.size);
+    return height;
+}};
+  font-size: ${props => {
+    const { fontSize } = getAvatarSize(props.size);
+    return fontSize;
+}};
   position: relative;
   z-index: 0;
 
@@ -64,7 +76,19 @@ const AvatarWrapper = styled.span `
   }
 `;
 const AvatarImage = styled.img `
-  width: 100%;
+  max-width: 100%;
+  width: ${props => {
+    const { width } = getAvatarSize(props.size);
+    return width;
+}};
+  height: ${props => {
+    const { height } = getAvatarSize(props.size);
+    return height;
+}};
+  font-size: ${props => {
+    const { fontSize } = getAvatarSize(props.size);
+    return fontSize;
+}};
 `;
 const Avatar = (_a) => {
     var { altText = '', size = 4, letter, imageSrc, children } = _a, props = __rest(_a, ["altText", "size", "letter", "imageSrc", "children"]);
@@ -73,7 +97,9 @@ const Avatar = (_a) => {
             return children;
         }
         if (imageSrc) {
-            return React.createElement(AvatarImage, { alt: altText, src: imageSrc });
+            const height = getAvatarSize(size).height;
+            const width = getAvatarSize(size).width;
+            return (React.createElement(AvatarImage, { size: size, alt: altText, src: imageSrc, height: height, width: width }));
         }
         if (letter) {
             if (altText) {

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

@@ -10,10 +10,48 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React, { useState } from 'react';
-import { CustomPicker } from 'react-color';
-import { Saturation, Hue, EditableInput, } from 'react-color/lib/components/common';
+import { HexColorPicker, HexColorInput } from 'react-colorful';
 import styled from '@emotion/styled';
 import { getRadius, u } from '../../utilities';
+const ColorfulWrapper = styled.div `
+  padding: var(--lns-space-medium);
+  & .react-colorful {
+    width: auto;
+    height: auto;
+  }
+  & .react-colorful__saturation {
+    height: ${u(14)};
+    border-bottom: none;
+    box-shadow: inset 0 0 0 1px var(--lns-color-border);
+    border-radius: var(--lns-radius-medium);
+    margin-bottom: var(--lns-space-small);
+  }
+
+  & .react-colorful__hue {
+    height: ${u(2)};
+    width: 100%;
+    box-shadow: inset 0 0 0 1px var(--lns-color-border);
+    border-radius: 3px;
+    margin-bottom: var(--lns-space-medium);
+  }
+
+  & .react-colorful__saturation-pointer {
+    width: ${u(1)};
+    height: ${u(1)};
+    cursor: pointer;
+    border: 2px solid white;
+    box-shadow: 0 0 0 3px var(--lns-color-border);
+    border-radius: var(--lns-radius-medium);
+  }
+  & .react-colorful__hue-pointer {
+    width: ${u(1)};
+    height: ${u(2.5)};
+    border-radius: 2px;
+    box-shadow: 0 0 0 2px var(--lns-color-border);
+    cursor: pointer;
+    border: 2px solid white;
+  }
+`;
 const ColorPickerContainer = styled.div `
   position: relative;
   width: ${u(31)};
@@ -21,29 +59,16 @@ const ColorPickerContainer = styled.div `
   border-radius: var(--lns-radius-medium);
   box-shadow: 0 0 0 1px var(--lns-color-border), var(--lns-shadow-medium);
 `;
-const SaturationContainer = styled.div `
-  position: relative;
-  height: ${u(14)};
-  border: 1px solid var(--lns-color-border);
-  box-shadow: inset 0 0 0 1px var(--lns-color-border);
-  border-radius: var(--lns-radius-medium);
-  margin-bottom: var(--lns-space-small);
-`;
-const HueContainer = styled.div `
-  position: relative;
-  width: 100%;
-  height: ${u(2)};
-  border: 1px solid var(--lns-color-border);
-  box-shadow: inset 0 0 0 1px var(--lns-color-border);
-  border-radius: 3px;
-  margin-bottom: var(--lns-space-medium);
-`;
 const InputContainer = styled.div `
   position: relative;
   width: 100%;
 
   input {
-    padding: ${u(1)};
+    padding: 0 0 0 ${u(4)};
+    height: ${u(4)};
+    width: 100%;
+    font: inherit;
+    font-size: var(--lns-fontSize-small);
     border: none;
     box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
       var(--lns-color-formFieldBorder);
@@ -79,25 +104,6 @@ const ButtonWrapper = styled.div `
   padding: 0 var(--lns-space-medium) var(--lns-space-medium)
     var(--lns-space-medium);
 `;
-const SaturationPointer = styled.div `
-  transform: translate(-50%);
-  cursor: pointer;
-  border: 2px solid white;
-  box-shadow: 0 0 0 3px var(--lns-color-border);
-  border-radius: var(--lns-radius-medium);
-  width: ${u(1)};
-  height: ${u(1)};
-`;
-const HuePointerInternal = styled.div `
-  transform: translate(-50%, -3px);
-  cursor: pointer;
-  border: 2px solid white;
-  box-shadow: 0 0 0 2px var(--lns-color-border);
-  border-radius: 2px;
-  width: ${u(1)};
-  height: ${u(2.5)};
-  background: ${props => props.hueColor};
-`;
 const SwatchesContainer = styled.div `
   display: grid;
   grid-template-columns: repeat(7, ${u(3)});
@@ -105,9 +111,6 @@ const SwatchesContainer = styled.div `
   border-bottom: 1px solid var(--lns-color-border);
   padding: var(--lns-space-medium);
 `;
-const ColorSelectorsWrapper = styled.div `
-  padding: var(--lns-space-medium);
-`;
 const Swatch = styled.div `
   cursor: pointer;
   width: ${u(3)};
@@ -123,47 +126,26 @@ const SwatchSelector = ({ swatches, currentColor, onSwatchClick }) => {
     const selectedSwatch = swatches.includes(currentColor) && currentColor;
     return (React.createElement(SwatchesContainer, null, swatches.map(swatch => (React.createElement(Swatch, { key: swatch, color: swatch, selected: selectedSwatch, onClick: () => onSwatchClick(swatch) })))));
 };
-const HuePointer = props => {
-    const hueHSL = `hsl(${props.hsl.h},100%,50%,1)`;
-    return React.createElement(HuePointerInternal, { hueColor: hueHSL });
-};
-const ColorSelectorInternal = props => {
-    const inputStyles = {
-        input: {
-            padding: `0 0 0 ${u(4)}`,
-            height: u(4),
-            width: '100%',
-            font: 'inherit',
-            color: 'inherit',
-            fontSize: 'var(--lns-fontSize-small)',
-        },
-    };
-    return (React.createElement(ColorSelectorsWrapper, null,
-        React.createElement(SaturationContainer, null,
-            React.createElement(Saturation, Object.assign({}, props, { pointer: SaturationPointer, radius: "var(--lns-radius-medium)" }))),
-        React.createElement(HueContainer, null,
-            React.createElement(Hue, Object.assign({}, props, { pointer: HuePointer, radius: "3px" }))),
+const ColorSelector = ({ color, setColor }) => {
+    return (React.createElement(ColorfulWrapper, null,
+        React.createElement(HexColorPicker, { color: color, onChange: setColor }),
         React.createElement(InputContainer, null,
-            React.createElement(EditableInput, Object.assign({}, props, { style: inputStyles, value: props.hex })),
-            React.createElement(ColorBox, { color: props.color }))));
+            React.createElement(HexColorInput, { prefixed: true, color: color, onChange: setColor }),
+            React.createElement(ColorBox, { color: color }))));
 };
-const ColorSelector = CustomPicker(ColorSelectorInternal);
 const ColorPicker = (_a) => {
     var { defaultColor = '#ffffff', confirmButton, swatches, onChange } = _a, props = __rest(_a, ["defaultColor", "confirmButton", "swatches", "onChange"]);
     const [tempColor, setTempColor] = useState(defaultColor ? defaultColor : '#FFFFFF');
-    const handleOnChange = ({ hex }) => {
+    const handleOnChange = hex => {
         setTempColor(hex);
         onChange(hex);
     };
     const onSwatchClick = swatch => {
-        const object = {
-            hex: swatch,
-        };
-        handleOnChange(object);
+        handleOnChange(swatch);
     };
     return (React.createElement(ColorPickerContainer, Object.assign({}, props),
         swatches && (React.createElement(SwatchSelector, { swatches: swatches, currentColor: tempColor, onSwatchClick: onSwatchClick })),
-        React.createElement(ColorSelector, { color: tempColor, onChange: handleOnChange }),
+        React.createElement(ColorSelector, { color: tempColor, setColor: handleOnChange }),
         confirmButton && React.createElement(ButtonWrapper, null, confirmButton)));
 };
 export default ColorPicker;

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

@@ -258,3 +258,4 @@ export { default as SvgFolderPlus } from "./folder-plus.js";
 export { default as SvgPower } from "./power.js";
 export { default as SvgReplay } from "./replay.js";
 export { default as SvgTranscript } from "./transcript";
+export { default as SvgVariables } from "./variables";

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

@@ -258,3 +258,4 @@ export { default as SvgFolderPlus } from './folder-plus.js';
 export { default as SvgPower } from './power.js';
 export { default as SvgReplay } from './replay.js';
 export { default as SvgTranscript } from './transcript';
+export { default as SvgVariables } from './variables';

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

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

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+function SvgVariables(props) {
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 25 24", fill: "none" }, props),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.78181 3.75H8.25176C6.17193 3.75 4.87858 4.80682 4.87858 7.03977V9.46023C4.87858 10.5933 4.1437 11.026 3.18006 11.0448C3.16669 11.0443 3.15324 11.044 3.13973 11.044C2.60281 11.044 2.16754 11.4685 2.16754 11.9922C2.16754 12.5158 2.60281 12.9403 3.13973 12.9403C3.15965 12.9403 3.17943 12.9397 3.19905 12.9386C4.15333 12.9627 4.87858 13.3971 4.87858 14.5227V16.9432C4.87858 19.1761 6.17193 20.25 8.25176 20.25H8.79356V20.2485C9.27681 20.2423 9.66661 19.8584 9.66661 19.3856C9.66661 18.909 9.27047 18.5227 8.78181 18.5227C8.74712 18.5227 8.7129 18.5246 8.67925 18.5284H8.28671C7.41283 18.5284 6.8186 18.1193 6.8186 16.9943V14.1477C6.8186 13.0568 6.17193 12.2727 5.07084 12C6.1894 11.7102 6.8186 10.9261 6.8186 9.85227V6.98864C6.8186 5.86364 7.41283 5.47159 8.28671 5.47159H8.69332C8.72242 5.47441 8.75194 5.47585 8.78181 5.47585C9.27047 5.47585 9.66661 5.08951 9.66661 4.61293C9.66661 4.14017 9.27681 3.75621 8.79356 3.75007V3.75H8.78181ZM16.5514 3.75H17.0815C19.1613 3.75 20.4546 4.80682 20.4546 7.03977V9.46023C20.4546 10.5933 21.1895 11.026 22.1532 11.0448C22.1665 11.0443 22.18 11.044 22.1935 11.044C22.7304 11.044 23.1657 11.4685 23.1657 11.9922C23.1657 12.5158 22.7304 12.9403 22.1935 12.9403C22.1736 12.9403 22.1538 12.9397 22.1342 12.9386C21.1799 12.9627 20.4546 13.3971 20.4546 14.5227V16.9432C20.4546 19.1761 19.1613 20.25 17.0815 20.25H16.5397V20.2485C16.0564 20.2423 15.6666 19.8584 15.6666 19.3856C15.6666 18.909 16.0628 18.5227 16.5514 18.5227C16.5861 18.5227 16.6203 18.5246 16.654 18.5284H17.0465C17.9204 18.5284 18.5146 18.1193 18.5146 16.9943V14.1477C18.5146 13.0568 19.1613 12.2727 20.2624 12C19.1438 11.7102 18.5146 10.9261 18.5146 9.85227V6.98864C18.5146 5.86364 17.9204 5.47159 17.0465 5.47159H16.6399C16.6108 5.47441 16.5813 5.47585 16.5514 5.47585C16.0628 5.47585 15.6666 5.08951 15.6666 4.61293C15.6666 4.14017 16.0564 3.75621 16.5397 3.75007V3.75H16.5514ZM15.2579 12.352C15.4853 12.3376 15.6666 12.2878 15.6666 12.0546C15.6666 11.8244 15.4853 11.7746 15.255 11.7602C14.1698 11.6997 13.0258 10.4968 12.9625 9.41163C12.951 9.18135 12.9041 9 12.668 9C12.432 9 12.3822 9.18135 12.3707 9.41163C12.3074 10.4968 11.1634 11.6997 10.0782 11.7602C9.84796 11.7746 9.66661 11.8215 9.66661 12.0546C9.66661 12.2878 9.84796 12.3376 10.0782 12.352C11.1634 12.4124 12.3074 13.5032 12.3707 14.5855C12.3822 14.8187 12.4349 15 12.668 15C12.9012 15 12.951 14.8187 12.9625 14.5884C13.0258 13.5032 14.1698 12.4124 15.2579 12.352Z", fill: "currentColor" })));
+}
+export default SvgVariables;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@loomhq/lens",
-  "version": "10.98.1",
+  "version": "10.99.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",
@@ -28,7 +28,7 @@
     "downshift": "^5.4.7",
     "focus-trap-react": "^10.0.0",
     "lodash": "^4.17.21",
-    "react-color": "^2.19.3",
+    "react-colorful": "^5.6.1",
     "react-laag": "^2.0.3",
     "resize-observer-polyfill": "^1.5.1",
     "transition-hook": "^1.5.1"