@loomhq/lens 10.23.1 → 10.26.0

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

@@ -210,3 +210,4 @@ 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";
+export { default as SvgReplay } from "./replay.js";

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

@@ -210,3 +210,4 @@ 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';
+export { default as SvgReplay } from './replay.js';

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

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

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

@@ -0,0 +1,4 @@
+import React from 'react';
+const SvgReplay = props => (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none" }, props),
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M6.78306 0.566915C7.31653 0.709856 7.63311 1.25819 7.49017 1.79166L6.7049 4.72234C8.49852 3.41365 10.6667 2.85091 12.7825 3.03412C13.6117 3.10538 14.4088 3.28907 15.1584 3.56987C16.328 4.00704 17.4249 4.69588 18.3654 5.63641C19.2011 6.47209 19.8381 7.43123 20.2764 8.45511C20.7432 9.54315 21.0017 10.7418 21.0017 12.0007C21.0017 13.3939 20.6851 14.7132 20.12 15.8906C19.818 16.5208 19.4384 17.1231 18.9812 17.6833C18.5894 18.1639 18.1489 18.6034 17.6673 18.994C17.1314 19.4292 16.5572 19.7936 15.9571 20.0872C14.7632 20.6723 13.4208 21.0007 12.0017 21.0007C10.6825 21.0007 9.42964 20.7169 8.30077 20.207C7.44004 19.8191 6.62781 19.2888 5.89965 18.6163C4.11775 16.9719 3.00171 14.6166 3.00171 12.0007C3.00171 11.4484 3.44942 11.0007 4.00171 11.0007C4.55399 11.0007 5.00171 11.4484 5.00171 12.0007C5.00171 13.9336 5.78509 15.6835 7.05166 16.9502C7.1301 17.0287 7.21 17.1048 7.29116 17.1787C7.81679 17.6572 8.41556 18.0567 9.06872 18.3585C11.0182 19.2575 13.296 19.2122 15.2124 18.2226C15.5894 18.0277 15.9463 17.7995 16.2795 17.542C16.5127 17.3614 16.7372 17.1642 16.9512 16.9501C17.1573 16.744 17.3479 16.5282 17.523 16.3042C17.8046 15.9434 18.0516 15.5543 18.2591 15.1418C19.1888 13.2906 19.2453 11.113 18.4285 9.22207C17.6657 7.46001 16.1994 6.07343 14.3837 5.41645C13.8441 5.2216 13.2853 5.09519 12.7208 5.03721C12.4844 5.01308 12.2445 5.00072 12.0017 5.00072C11.9934 5.00072 11.985 5.00062 11.9767 5.00042C10.378 5.00603 8.78084 5.55593 7.48702 6.65011L10.8091 7.54027C11.3426 7.68321 11.6592 8.23155 11.5162 8.76501C11.3733 9.29848 10.825 9.61506 10.2915 9.47212L4.79178 7.99848C4.25832 7.85554 3.94174 7.3072 4.08468 6.77373L5.55832 1.27402C5.70126 0.740555 6.2496 0.423973 6.78306 0.566915ZM6.27535 6.32544L6.28616 6.28507L6.34527 6.34418L6.27535 6.32544Z", fill: "currentColor" })));
+export default SvgReplay;

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

@@ -1,15 +1,17 @@
 import React from 'react';
 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 const IconButton: ({ altText, icon, onClick, iconColor, isActive, isDisabled, size, ...props }: IconButtonProps & React.ComponentProps<typeof IconButtonBox>) => JSX.Element;
 declare type IconButtonProps = {
     altText: string;
     icon?: React.ReactNode;
     onClick?: React.ReactEventHandler;
     iconColor?: string;
+    isActive?: boolean;
     isDisabled?: boolean;
     size?: 'small' | 'medium';
 };
 declare type IconButtonBoxProps = {
     size?: 'small' | 'medium';
+    isActive?: boolean;
 };
 export default IconButton;

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

@@ -24,7 +24,7 @@ const sizeStyles = {
     },
 };
 export const IconButtonBox = styled.button `
-  background-color: transparent;
+  background-color: ${props => props.isActive ? getColorValue('backgroundActive') : 'transparent'};
   border: none;
   appearance: none;
   cursor: pointer;
@@ -42,7 +42,7 @@ export const IconButtonBox = styled.button `
 
   &:hover {
     transition: 0.3s background-color;
-    background-color: ${getColorValue('backgroundHover')};
+    background-color: ${props => getColorValue(props.isActive ? 'backgroundActive' : 'backgroundHover')};
   }
 
   &:active {
@@ -74,8 +74,8 @@ export const IconButtonBox = 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(IconButtonBox, Object.assign({ "aria-label": altText, onClick: onClick, disabled: isDisabled, size: size }, props),
+    var { altText, icon, onClick, iconColor = 'body', isActive, isDisabled, size = 'medium' } = _a, props = __rest(_a, ["altText", "icon", "onClick", "iconColor", "isActive", "isDisabled", "size"]);
+    return (React.createElement(IconButtonBox, Object.assign({ "aria-label": altText, onClick: onClick, isActive: isActive, disabled: isDisabled, size: size }, props),
         React.createElement(Icon, { icon: icon, size: sizeStyles[size].iconSize, color: isDisabled ? 'disabledContent' : iconColor })));
 };
 export default IconButton;

package/dist/components/split/split.js

@@ -37,8 +37,8 @@ const SplitWrapper = styled.div `
   ${props => getSizeStyles(props)};
 `;
 const SplitSectionWrapper = styled.div `
-  ${props => props.grow && getResponsiveNumber('flex-grow', props.grow)};
-  ${props => props.shrink && getResponsiveNumber('flex-shrink', props.shrink)};
+  ${props => getResponsiveNumber('flex-grow', props.grow)};
+  ${props => getResponsiveNumber('flex-shrink', props.shrink)};
   ${props => props.basis && getSize('flex-basis', props.basis)};
   margin-right: var(--gap);
   margin-bottom: var(--gap);

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

@@ -9,10 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import Icon from '../icon/icon';
 import React, { forwardRef } from 'react';
+import { getColorValue, getTextSize, u } from '../../utilities';
+import Icon from '../icon/icon';
 import styled from '@emotion/styled';
-import { u, getColorValue, getTextSize } from '../../utilities';
 const sizesStyles = {
     small: {
         height: u(4),
@@ -51,6 +51,12 @@ const InputField = styled.input `
 
   ${props => getTextSize(sizesStyles[props.inputSize].textSize)};
 
+  &::-webkit-search-decoration,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+
   &:hover {
     box-shadow: inset 0 0 0 var(--lns-formFieldBorderWidthFocus)
       var(--lns-color-blurple);
@@ -97,12 +103,16 @@ const TextInput = forwardRef((_a, ref) => {
         inputField)) : (inputField);
 });
 export const availableTypes = [
+    'datetime-local',
     'email',
+    'month',
     'number',
     'password',
     'search',
     'tel',
     'text',
+    'time',
     'url',
+    'week',
 ];
 export default TextInput;

package/dist/utilities/responsive.js

@@ -1,6 +1,6 @@
-import useMedia from '../hooks/use-media';
 import { breakpoints } from '../variables';
 import { getSizeValue } from './size';
+import useMedia from '../hooks/use-media';
 export const getMediaCss = (widthType, breakpoint, declaration) => `@media(${widthType}: ${breakpoint}){${declaration}}`;
 export const arrayToBreakpoints = values => {
     const smallestBreakpoint = Object.values(breakpoints)[0];
@@ -56,7 +56,7 @@ export const getResponsiveBoolean = (property, valueArray, booleanValue) => {
     return `${property}: ${valueArray[0]};`;
 };
 export const getResponsiveNumber = (property, number) => {
-    if (number) {
+    if (number || number === 0) {
         if (Array.isArray(number)) {
             const rulesetsArray = number.map(numberItem => {
                 return `${property}: ${numberItem}`;

package/package.json

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