@loomhq/lens 10.20.1 → 10.22.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/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/icon.js

@@ -29,13 +29,13 @@ const Icon = (_a) => {
     var { altText, icon, color = 'body', size = defaultIconSize, hasWidthOffset } = _a, props = __rest(_a, ["altText", "icon", "color", "size", "hasWidthOffset"]);
     const ref = React.useRef(null);
     const defaultIconSizePx = defaultIconSize * unit;
-    React.useLayoutEffect(() => {
+    React.useEffect(() => {
         if (!hasWidthOffset) {
             return;
         }
         const svg = ref.current.querySelector('svg');
         const bBox = svg.getBBox();
-        svg.setAttribute('viewBox', `${bBox.x} 0 ${bBox.width} ${defaultIconSizePx}`);
+        svg.setAttribute('viewBox', `${bBox.x} 0 ${bBox.width || defaultIconSizePx} ${defaultIconSizePx}`);
     }, []);
     return (React.createElement(IconWrapper, Object.assign({ ref: ref, "aria-label": altText, color: color, size: size, hasWidthOffset: hasWidthOffset }, props), icon));
 };

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.1",
+  "version": "10.22.1",
   "scripts": {
     "dev": "next",
     "build:next": "next build",