@loomhq/lens 10.43.9 → 10.46.0

package/dist/components/button/button.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getColorValue, getFocusRing, getFontWeight, getSize, getTextSize, u, } from '../../utilities';
+import { getColorValue, getFocusRing, getFontWeight, getRadius, getSize, getTextSize, u, } from '../../utilities';
 import Icon from '../icon/icon';
 import Loader from '../loader/loader';
 import React from 'react';
@@ -102,7 +102,7 @@ const ButtonWrapper = styled.button `
   white-space: nowrap;
   border: 1px solid;
   ${getFontWeight('medium')};
-  border-radius: var(--lns-radius-thread-full);
+  ${getRadius('thdMediumToFull')};
   ${props => props.hasFullWidth ? 'display: flex; width: 100%' : 'display: inline-flex'};
   height: ${props => sizesStyles[props.size].height};
   min-width: ${props => sizesStyles[props.size].height};

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

@@ -13,7 +13,7 @@ import React, { useState } from 'react';
 import { CustomPicker } from 'react-color';
 import { Saturation, Hue, EditableInput, } from 'react-color/lib/components/common';
 import styled from '@emotion/styled';
-import { u } from '../../utilities';
+import { getRadius, u } from '../../utilities';
 const ColorPickerContainer = styled.div `
   position: relative;
   width: ${u(31)};
@@ -70,7 +70,7 @@ const ColorBox = styled.div `
   left: var(--lns-space-xsmall);
   top: var(--lns-space-xsmall);
   border: 1px solid rgba(0, 0, 0, 0.1);
-  border-radius: var(--lns-radius-thread-full);
+  ${getRadius('thdMediumToFull')};
   background-color: ${props => props.color};
 `;
 const ButtonWrapper = styled.div `

package/dist/components/icon/available-icons/eye-off.d.ts

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

package/dist/components/icon/available-icons/eye-off.js

@@ -0,0 +1,8 @@
+import * as React from 'react';
+function SvgEyeOff(props) {
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none" }, props),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M8.03143 6.61314C8.36661 7.05208 8.28249 7.67964 7.84355 8.01482C6.35752 9.14956 5.10854 10.5622 4.16503 12.1725C4.24759 12.3126 4.35007 12.4804 4.472 12.6692C4.85229 13.258 5.41523 14.0406 6.14535 14.8194C7.62224 16.3948 9.66508 17.8336 12.1785 17.8367C13.7531 17.8092 15.2778 17.2795 16.5304 16.3247C16.9697 15.9899 17.5971 16.0746 17.9319 16.5138C18.2668 16.9531 18.1821 17.5805 17.7429 17.9153C16.1486 19.1306 14.2073 19.8038 12.203 19.8366L12.1866 19.8367C8.87047 19.8367 6.3328 17.9436 4.68628 16.1873C3.8539 15.2994 3.21892 14.4154 2.79192 13.7542C2.5778 13.4227 2.41434 13.1446 2.30303 12.9468C2.24734 12.8477 2.20458 12.7686 2.17496 12.7126C2.16015 12.6846 2.14861 12.6624 2.14037 12.6464L2.13049 12.627L2.1274 12.6209L2.12632 12.6188C2.12632 12.6188 2.12556 12.6173 3.01998 12.17L2.12556 12.6173C1.98024 12.3266 1.98519 11.9835 2.13883 11.6972C3.24282 9.63982 4.77404 7.84231 6.62975 6.42526C7.06869 6.09008 7.69624 6.1742 8.03143 6.61314ZM11.1516 9.72165C11.5281 10.1257 11.5058 10.7585 11.1017 11.135C10.9543 11.2723 10.8361 11.4379 10.7541 11.6219C10.6722 11.8059 10.6281 12.0045 10.6245 12.2059C10.621 12.4073 10.658 12.6074 10.7335 12.7942C10.8089 12.981 10.9212 13.1506 11.0636 13.2931C11.2061 13.4355 11.3757 13.5478 11.5625 13.6232C11.7493 13.6987 11.9493 13.7357 12.1508 13.7322C12.3522 13.7286 12.5508 13.6845 12.7348 13.6025C12.9188 13.5206 13.0844 13.4024 13.2217 13.255C13.5982 12.8509 14.231 12.8286 14.635 13.2051C15.0391 13.5816 15.0614 14.2144 14.6849 14.6184C14.3645 14.9623 13.9781 15.2381 13.5488 15.4294C13.1194 15.6207 12.656 15.7236 12.186 15.7319C11.7161 15.7401 11.2493 15.6537 10.8135 15.4777C10.3777 15.3016 9.98177 15.0396 9.64941 14.7073C9.31706 14.3749 9.05505 13.979 8.87902 13.5432C8.70299 13.1074 8.61654 12.6406 8.62483 12.1707C8.63312 11.7007 8.73599 11.2372 8.92728 10.8079C9.11858 10.3786 9.39439 9.99219 9.73826 9.67176C10.1423 9.29526 10.7751 9.31759 11.1516 9.72165Z", fill: "currentColor" }),
+        React.createElement("path", { d: "M12.1679 6.50002C11.6563 6.49882 11.1463 6.5571 10.6481 6.6737C10.1104 6.79958 9.5724 6.46568 9.44653 5.92793C9.32065 5.39018 9.65454 4.85221 10.1923 4.72634C10.841 4.57449 11.5052 4.49855 12.1714 4.50002C15.487 4.50047 18.0243 6.39334 19.6706 8.14941C20.503 9.03728 21.1379 9.92133 21.5649 10.5825C21.7791 10.914 21.9425 11.1921 22.0538 11.39C22.1095 11.489 22.1523 11.5681 22.1819 11.6241L22.2313 11.7195C22.3764 12.0096 22.3717 12.352 22.2188 12.6381C21.6801 13.6458 21.0377 14.5946 20.302 15.4689C19.9464 15.8914 19.3156 15.9458 18.893 15.5902C18.4704 15.2346 18.4161 14.6038 18.7717 14.1812C19.3022 13.5507 19.7774 12.8762 20.1924 12.1652C20.1097 12.0249 20.0071 11.8568 19.8849 11.6675C19.5046 11.0787 18.9416 10.2961 18.2115 9.51729C16.733 7.94025 14.6874 6.50002 12.1702 6.50002L12.1679 6.50002Z", fill: "currentColor" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M2.29289 2.29289C2.68342 1.90237 3.31658 1.90237 3.70711 2.29289L22.0404 20.6262C22.431 21.0167 22.431 21.6499 22.0404 22.0404C21.6499 22.431 21.0167 22.431 20.6262 22.0404L2.29289 3.70711C1.90237 3.31658 1.90237 2.68342 2.29289 2.29289Z", fill: "currentColor" })));
+}
+export default SvgEyeOff;

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

@@ -61,6 +61,7 @@ export { default as SvgExpand } from "./expand.js";
 export { default as SvgExtension } from "./extension.js";
 export { default as SvgExternalLink } from "./external-link.js";
 export { default as SvgEye } from "./eye.js";
+export { default as SvgEyeOff } from "./eye-off.js";
 export { default as SvgFiberManualRecord } from "./fiber-manual-record.js";
 export { default as SvgFirstPage } from "./first-page.js";
 export { default as SvgFolder } from "./folder.js";

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

@@ -61,6 +61,7 @@ export { default as SvgExpand } from './expand.js';
 export { default as SvgExtension } from './extension.js';
 export { default as SvgExternalLink } from './external-link.js';
 export { default as SvgEye } from './eye.js';
+export { default as SvgEyeOff } from './eye-off.js';
 export { default as SvgFiberManualRecord } from './fiber-manual-record.js';
 export { default as SvgFirstPage } from './first-page.js';
 export { default as SvgFolder } from './folder.js';

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getColorValue, getFocusRing, u } from '../../utilities';
+import { getColorValue, getFocusRing, getRadius, u } from '../../utilities';
 import Icon from '../icon/icon';
 import React from 'react';
 import styled from '@emotion/styled';
@@ -38,7 +38,7 @@ export const IconButtonBox = styled.button `
   justify-content: center;
   align-items: center;
   vertical-align: middle;
-  border-radius: var(--lns-radius-thread-full);
+  ${getRadius('thdMediumToFull')};
   font: inherit;
 
   &:hover {
@@ -63,7 +63,7 @@ export const IconButtonBox = styled.button `
     display: block;
     position: absolute;
     top: 0;
-    border-radius: var(--lns-radius-thread-full);
+    ${getRadius('thdMediumToFull')};
   }
 
   &:focus-visible:before {

package/dist/components/menu/menu.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getColorValue, getShadow, getSize, u } from '../../utilities';
+import { getColorValue, getRadius, getShadow, getSize, u, } from '../../utilities';
 import Icon from '../icon/icon';
 import React from 'react';
 import { SvgCheck } from '../icon/available-icons';
@@ -27,7 +27,7 @@ const MenuWrapper = styled.ul `
   overflow: auto;
   border: 1px solid ${getColorValue('border')};
   ${getShadow('medium')};
-  border-radius: var(--lns-radius-thread-large);
+  ${getRadius('thdMediumToLarge')};
 `;
 const MenuItemWrapper = styled.li `
   display: grid;

package/dist/components/modal/modal.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getColorValue, getRadius, getShadow, getSize } from '../../utilities';
+import { getColorValue, getRadius, getShadow, getSize, u, } from '../../utilities';
 import Backdrop from '../backdrop/backdrop';
 import Container from '../container/container';
 import IconButton from '../icon-button/icon-button';
@@ -30,7 +30,7 @@ const ModalCardWrapper = styled.div `
   top: 15vh;
   background-color: ${getColorValue('overlay')};
   ${getShadow('large')};
-  ${getRadius('medium')};
+  ${getRadius('thdMediumToXlarge')};
   ${props => getSize('max-width', props.maxWidth)};
   margin: 0 auto;
   position: relative;
@@ -38,8 +38,8 @@ const ModalCardWrapper = styled.div `
 `;
 const CloseIconSection = styled.div `
   position: absolute;
-  top: 0;
-  right: 0;
+  top: ${u(1.5)};
+  right: ${u(1.5)};
   z-index: 1;
 `;
 const RightButtonsSection = styled.div `

package/dist/components/pill/pill.js

@@ -23,7 +23,7 @@ const PillWrapper = styled.div `
   min-height: ${u(3.25)};
   color: ${props => getColorValue(props.color)};
   background-color: ${props => getColorValue(props.backgroundColor)};
-  ${getRadius('medium')};
+  ${getRadius('thdMediumToFull')};
   ${getTextSize('small')};
   ${getFontWeight('medium')};
   ${getSize('gap', 'xsmall')};

package/dist/components/switch/switch.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
-declare const SwitchInput: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, Pick<React.ClassAttributes<HTMLInputElement> & React.InputHTMLAttributes<HTMLInputElement>, keyof React.InputHTMLAttributes<HTMLInputElement>>, object>;
-declare const Switch: ({ isActive, isDisabled, onChange, ...props }: SwitchProps & React.ComponentProps<typeof SwitchInput>) => JSX.Element;
+declare const SwitchInput: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, SwitchInputProps, object>;
+declare const Switch: ({ isActive, isDisabled, onChange, size, ...props }: SwitchProps & Omit<React.ComponentProps<typeof SwitchInput>, 'size'>) => JSX.Element;
 declare type SwitchProps = {
     isActive?: boolean;
     isDisabled?: boolean;
     onChange?: React.ReactEventHandler;
+    size?: 'medium' | 'large';
+};
+declare type SwitchInputProps = {
+    switchSize?: 'medium' | 'large';
 };
 export default Switch;

package/dist/components/switch/switch.js

@@ -9,14 +9,21 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getColorValue, getFocusRing, u } from '../../utilities';
+import { getColorValue, getFocusRing } from '../../utilities';
 import React from 'react';
 import styled from '@emotion/styled';
-const switchHeight = 2;
-const switchWidth = 4;
-const knobOffset = 0.25;
-const knobSize = switchHeight - knobOffset * 2;
-const knobTravel = switchWidth - switchHeight;
+const sizes = {
+    medium: {
+        switchHeight: 16,
+        switchWidth: 32,
+        knobOffset: 2,
+    },
+    large: {
+        switchHeight: 28,
+        switchWidth: 56,
+        knobOffset: 4,
+    },
+};
 const colorStyles = {
     knob: {
         active: {
@@ -39,6 +46,13 @@ const colorStyles = {
         },
     },
 };
+const getKnobTravel = props => {
+    return (sizes[props.switchSize].switchWidth - sizes[props.switchSize].switchHeight);
+};
+const getKnobSize = props => {
+    return (sizes[props.switchSize].switchHeight -
+        sizes[props.switchSize].knobOffset * 2);
+};
 const SwitchLabel = styled.label `
   display: block;
   position: relative;
@@ -68,7 +82,7 @@ const SwitchInput = styled.input `
       background-color: ${colorStyles.track.active.disabled};
     }
     & + .SwitchBox:after {
-      transform: translateX(${u(knobTravel)});
+      transform: translateX(${props => getKnobTravel(props)}px);
     }
   }
 
@@ -77,21 +91,21 @@ const SwitchInput = styled.input `
   }
 `;
 const SwitchBox = styled.div `
-  width: ${u(switchWidth)};
-  height: ${u(switchHeight)};
+  width: ${props => sizes[props.switchSize].switchWidth}px;
+  height: ${props => sizes[props.switchSize].switchHeight}px;
   position: relative;
-  border-radius: ${u(switchHeight)};
+  border-radius: var(--lns-radius-full);
   transition: 0.2s;
   cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
 
   &:after {
     content: '';
     position: absolute;
-    top: ${u(knobOffset)};
-    left: ${u(knobOffset)};
-    width: ${u(knobSize)};
-    height: ${u(knobSize)};
-    border-radius: ${u(switchHeight)};
+    top: ${props => sizes[props.switchSize].knobOffset}px;
+    left: ${props => sizes[props.switchSize].knobOffset}px;
+    width: ${props => getKnobSize(props)}px;
+    height: ${props => getKnobSize(props)}px;
+    border-radius: var(--lns-radius-full);
     transition: 0.15s;
     background-color: ${props => props.isDisabled
     ? colorStyles.knob.active.disabled
@@ -99,9 +113,9 @@ const SwitchBox = styled.div `
   }
 `;
 const Switch = (_a) => {
-    var { isActive, isDisabled, onChange } = _a, props = __rest(_a, ["isActive", "isDisabled", "onChange"]);
+    var { isActive, isDisabled, onChange, size = 'medium' } = _a, props = __rest(_a, ["isActive", "isDisabled", "onChange", "size"]);
     return (React.createElement(SwitchLabel, null,
-        React.createElement(SwitchInput, Object.assign({}, props, { checked: isActive, disabled: isDisabled, onChange: onChange, type: "checkbox" })),
-        React.createElement(SwitchBox, { className: "SwitchBox", isDisabled: isDisabled, isActive: isActive })));
+        React.createElement(SwitchInput, Object.assign({}, props, { checked: isActive, disabled: isDisabled, onChange: onChange, type: "checkbox", switchSize: size })),
+        React.createElement(SwitchBox, { className: "SwitchBox", isDisabled: isDisabled, isActive: isActive, switchSize: size })));
 };
 export default Switch;

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

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getColorValue, getFocusRing, getFontWeight, getTextSize, u, } from '../../utilities';
+import { getColorValue, getFocusRing, getFontWeight, getRadius, getTextSize, u, } from '../../utilities';
 import Container from '../container/container';
 import Icon from '../icon/icon';
 import React from 'react';
@@ -41,7 +41,7 @@ const TextButtonWrapper = styled.button `
   transition: 0.6s background-color;
   color: ${getColorValue('body')};
   ${getFontWeight('medium')};
-  border-radius: var(--lns-radius-thread-full);
+  ${getRadius('thdMediumToFull')};
   ${props => getTextSize(sizeStyles[props.size].textSize)};
   padding: 0 ${u(xSpace)};
   ${props => props.offsetSide && `margin-${props.offsetSide}: ${u(-xSpace)}`};

package/dist/components/textarea/textarea.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import React from 'react';
-import { getColorValue, getTextSize, u } from '../../utilities';
+import { getColorValue, getRadius, getTextSize, u } from '../../utilities';
 import styled from '@emotion/styled';
 const sizesStyles = {
     small: {
@@ -30,7 +30,7 @@ const TextareaWrapper = styled.textarea `
   background-color: ${getColorValue('formFieldBackground')};
   transition: 0.3s box-shadow;
   padding: ${props => sizesStyles[props.size].padding};
-  border-radius: var(--lns-radius-thread-large);
+  ${getRadius('thdMediumToLarge')};
   box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidth)
     var(--lns-color-formFieldBorder);
   ${props => getTextSize(sizesStyles[props.size].textSize)};

package/dist/components/toast/toast.js

@@ -40,7 +40,7 @@ const ToastWrapper = styled.div `
   background-color: ${getColorValue('background')};
   color: ${getColorValue('body')};
   ${getShadow('large')};
-  ${getRadius('medium')};
+  ${getRadius('thdMediumToLarge')};
   width: calc(100% - var(--lns-space-medium));
   min-width: ${u(35)};
   max-width: ${u(50)};

package/dist/components/tooltip/tooltip.js

@@ -35,7 +35,7 @@ const tooltipYPadding = (tooltipMinHeight - textHeight) / 2;
 const TooltipBoxWrapper = styled.div `
   background-color: ${getColorValue('grey8')};
   color: ${getColorValue('grey1')};
-  ${getRadius('medium')};
+  ${getRadius('thdMediumToLarge')};
   ${getFontWeight('medium')};
   ${getTextSize('small')};
   ${getShadow('medium')};

package/package.json

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