@loomhq/lens 10.20.2 → 10.23.0

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/arrange/arrange.d.ts

@@ -1,5 +1,5 @@
+import { ResponsiveGridSections, ResponsiveType } from '../../types';
 import React from 'react';
-import { ResponsiveType, ResponsiveGridSections } from '../../types';
 declare const ArrangeWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ArrangeProps, object>;
 declare type ArrangeProps = {
     children?: React.ReactNode;
@@ -11,6 +11,8 @@ declare type ArrangeProps = {
     maxHeight?: ResponsiveType<string | number>;
     gap?: ResponsiveType<string | number>;
     alignItems?: ResponsiveType<'start' | 'end' | 'center' | 'stretch'>;
+    justifyItems?: ResponsiveType<'start' | 'end' | 'center' | 'stretch'>;
+    alignContent?: ResponsiveType<'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly'>;
     justifyContent?: ResponsiveType<'start' | 'end' | 'center' | 'stretch' | 'space-around' | 'space-between' | 'space-evenly'>;
     autoFlow?: ResponsiveType<'column' | 'row'>;
     columns?: ResponsiveGridSections;
@@ -18,5 +20,5 @@ declare type ArrangeProps = {
     className?: never;
     style?: never;
 };
-declare const Arrange: ({ children, width, height, minWidth, minHeight, maxWidth, maxHeight, gap, columns, rows, alignItems, justifyContent, autoFlow, className, style, ...props }: ArrangeProps & React.ComponentProps<typeof ArrangeWrapper>) => JSX.Element;
+declare const Arrange: ({ children, width, height, minWidth, minHeight, maxWidth, maxHeight, gap, columns, rows, alignItems, justifyContent, justifyItems, alignContent, autoFlow, className, style, ...props }: ArrangeProps & React.ComponentProps<typeof ArrangeWrapper>) => JSX.Element;
 export default Arrange;

package/dist/components/arrange/arrange.js

@@ -11,13 +11,17 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { getResponsiveOneOf, getSize } from '../../utilities';
 import React from 'react';
+import { customStylesWarning } from '../../console-messages';
 import { getResponsiveGridSections } from '../../utilities/responsive';
 import styled from '@emotion/styled';
-import { customStylesWarning } from '../../console-messages';
 const ArrangeWrapper = styled.div `
   display: grid;
   ${props => getResponsiveOneOf('align-items', props.alignItems)};
   ${props => getResponsiveOneOf('justify-content', props.justifyContent)};
+  ${props => props.justifyItems &&
+    getResponsiveOneOf('justify-items', props.justifyItems)};
+  ${props => props.alignContent &&
+    getResponsiveOneOf('align-content', props.alignContent)};
   ${props => !props.columns &&
     !props.rows &&
     !props.autoFlow &&
@@ -38,10 +42,10 @@ const ArrangeWrapper = styled.div `
     getResponsiveOneOf('grid-auto-flow', props.autoFlow)};
 `;
 const Arrange = (_a) => {
-    var { children, width, height, minWidth, minHeight, maxWidth, maxHeight, gap, columns, rows, alignItems = 'center', justifyContent = 'start', autoFlow, className, style } = _a, props = __rest(_a, ["children", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "gap", "columns", "rows", "alignItems", "justifyContent", "autoFlow", "className", "style"]);
+    var { children, width, height, minWidth, minHeight, maxWidth, maxHeight, gap, columns, rows, alignItems = 'center', justifyContent = 'start', justifyItems, alignContent, autoFlow, className, style } = _a, props = __rest(_a, ["children", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "gap", "columns", "rows", "alignItems", "justifyContent", "justifyItems", "alignContent", "autoFlow", "className", "style"]);
     if (className || style) {
         console.warn(customStylesWarning);
     }
-    return (React.createElement(ArrangeWrapper, Object.assign({ alignItems: alignItems, justifyContent: justifyContent, gap: gap, columns: columns, rows: rows, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, autoFlow: autoFlow }, props), children));
+    return (React.createElement(ArrangeWrapper, Object.assign({ alignItems: alignItems, justifyContent: justifyContent, justifyItems: justifyItems, alignContent: alignContent, gap: gap, columns: columns, rows: rows, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, autoFlow: autoFlow }, props), children));
 };
 export default Arrange;

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;
@@ -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/split/split.d.ts

@@ -3,7 +3,7 @@ import { ResponsiveType } from '../../types';
 declare const SplitWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SplitProps, object>;
 declare const SplitSectionWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, SplitSectionProps, object>;
 export declare const SplitSection: ({ children, grow, shrink, basis, width, height, minWidth, minHeight, maxWidth, maxHeight, className, style, ...props }: SplitSectionProps & React.ComponentProps<typeof SplitSectionWrapper>) => JSX.Element;
-declare const Split: ({ children, gap, alignItems, justifyContent, wrap, width, height, minWidth, minHeight, maxWidth, maxHeight, className, style, ...props }: SplitProps & React.ComponentProps<typeof SplitWrapper>) => JSX.Element;
+declare const Split: ({ children, gap, alignItems, justifyContent, alignContent, wrap, width, height, minWidth, minHeight, maxWidth, maxHeight, className, style, ...props }: SplitProps & React.ComponentProps<typeof SplitWrapper>) => JSX.Element;
 interface SharedProps {
     width?: ResponsiveType<number | string>;
     height?: ResponsiveType<number | string>;
@@ -16,6 +16,7 @@ interface SharedProps {
 interface SplitProps extends SharedProps {
     alignItems?: ResponsiveType<'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline'>;
     justifyContent?: ResponsiveType<'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'>;
+    alignContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline';
     wrap?: ResponsiveType<'nowrap' | 'wrap' | 'wrap-reverse'>;
     gap?: ResponsiveType<number | string>;
     direction?: ResponsiveType<'column' | 'row'>;

package/dist/components/split/split.js

@@ -25,9 +25,12 @@ const getSizeStyles = props => css `
 const SplitWrapper = styled.div `
   display: flex;
   ${props => getResponsiveOneOf('align-items', props.alignItems)};
-  ${props => getResponsiveOneOf('justify-content', props.justifyContent)};
+  ${props => props.justifyContent &&
+    getResponsiveOneOf('justify-content', props.justifyContent)};
+  ${props => props.alignContent &&
+    getResponsiveOneOf('align-content', props.alignContent)};
   ${props => getResponsiveOneOf('flex-wrap', props.wrap)};
-  ${props => getResponsiveOneOf('flex-direction', props.direction)};
+  ${props => props.direction && getResponsiveOneOf('flex-direction', props.direction)};
   ${props => props.gap && getSize('--gap', props.gap)};
   margin-right: calc(-1 * var(--gap));
   margin-bottom: calc(-1 * var(--gap));
@@ -49,7 +52,7 @@ export const SplitSection = (_a) => {
     return (React.createElement(SplitSectionWrapper, Object.assign({ grow: grow, shrink: shrink, basis: basis, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight }, props), children));
 };
 const Split = (_a) => {
-    var { children, gap = 'initial', alignItems = 'center', justifyContent, wrap = 'wrap', width, height, minWidth, minHeight, maxWidth, maxHeight, className, style } = _a, props = __rest(_a, ["children", "gap", "alignItems", "justifyContent", "wrap", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "className", "style"]);
+    var { children, gap = 'initial', alignItems = 'center', justifyContent, alignContent, wrap = 'wrap', width, height, minWidth, minHeight, maxWidth, maxHeight, className, style } = _a, props = __rest(_a, ["children", "gap", "alignItems", "justifyContent", "alignContent", "wrap", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "className", "style"]);
     React.Children.forEach(children, child => {
         if ((child && !React.isValidElement(child)) ||
             (React.isValidElement(child) && child.type !== SplitSection)) {
@@ -59,6 +62,6 @@ const Split = (_a) => {
     if (className || style) {
         console.warn(customStylesWarning);
     }
-    return (React.createElement(SplitWrapper, Object.assign({ gap: gap, alignItems: alignItems, justifyContent: justifyContent, wrap: wrap, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight }, props), children));
+    return (React.createElement(SplitWrapper, Object.assign({ gap: gap, alignItems: alignItems, justifyContent: justifyContent, alignContent: alignContent, wrap: wrap, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight }, props), children));
 };
 export default Split;

package/package.json

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