@loomhq/lens 10.25.0 → 10.29.0

package/dist/components/container/container.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ResponsiveType } from '../../types';
 declare const ContainerWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerWrapperProps, object>;
-declare const Container: ({ children, backgroundColor, contentColor, borderColor, radius, borderSide, borderWidth, shadow, padding, paddingX, paddingY, paddingLeft, paddingRight, paddingTop, paddingBottom, width, height, minWidth, minHeight, maxWidth, maxHeight, htmlTag, position, overflow, zIndex, top, bottom, left, right, ...props }: ContainerProps & React.ComponentProps<typeof ContainerWrapper>) => JSX.Element;
+declare const Container: ({ children, backgroundColor, contentColor, borderColor, radius, borderSide, borderWidth, shadow, padding, paddingX, paddingY, paddingLeft, paddingRight, paddingTop, paddingBottom, margin, marginX, marginY, marginLeft, marginRight, marginTop, marginBottom, width, height, minWidth, minHeight, maxWidth, maxHeight, htmlTag, position, overflow, zIndex, top, bottom, left, right, ...props }: ContainerProps & React.ComponentProps<typeof ContainerWrapper>) => JSX.Element;
 export declare const availableBorderSides: string[];
 export declare const availableRadii: string[];
 export declare const availableHtmlTags: string[];
@@ -19,6 +19,13 @@ interface SharedProps {
     paddingRight?: ResponsiveType<string | number>;
     paddingTop?: ResponsiveType<string | number>;
     paddingBottom?: ResponsiveType<string | number>;
+    margin?: ResponsiveType<string | number>;
+    marginX?: ResponsiveType<string | number>;
+    marginY?: ResponsiveType<string | number>;
+    marginLeft?: ResponsiveType<string | number>;
+    marginRight?: ResponsiveType<string | number>;
+    marginTop?: ResponsiveType<string | number>;
+    marginBottom?: ResponsiveType<string | number>;
     width?: ResponsiveType<string | number>;
     height?: ResponsiveType<string | number>;
     minWidth?: ResponsiveType<string | number>;

package/dist/components/container/container.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { getRadius, getShadow, getSize, getColorValue, getSizeValue, } from '../../utilities';
+import { getColorValue, getRadius, getShadow, getSize, getSizeValue, } from '../../utilities';
 import React from 'react';
 import styled from '@emotion/styled';
 const getBorderSideAndColor = (side, color, width) => {
@@ -43,6 +43,11 @@ const ContainerWrapper = styled.div `
   ${props => getSize('padding-right', props.paddingRight)};
   ${props => getSize('padding-bottom', props.paddingBottom)};
   ${props => getSize('padding-left', props.paddingLeft)};
+  ${props => getSize('margin', props.margin)};
+  ${props => getSize('margin-top', props.marginTop)};
+  ${props => getSize('margin-right', props.marginRight)};
+  ${props => getSize('margin-bottom', props.marginBottom)};
+  ${props => getSize('margin-left', props.marginLeft)};
   ${props => getSize('top', props.top)};
   ${props => getSize('right', props.right)};
   ${props => getSize('bottom', props.bottom)};
@@ -50,8 +55,8 @@ const ContainerWrapper = styled.div `
   ${props => props.zIndex && `z-index: ${props.zIndex}`};
 `;
 const Container = (_a) => {
-    var { children, backgroundColor, contentColor, borderColor, radius, borderSide, borderWidth = '1px', shadow, padding, paddingX, paddingY, paddingLeft, paddingRight, paddingTop, paddingBottom, width, height, minWidth, minHeight, maxWidth, maxHeight, htmlTag = 'div', position, overflow, zIndex, top, bottom, left, right } = _a, props = __rest(_a, ["children", "backgroundColor", "contentColor", "borderColor", "radius", "borderSide", "borderWidth", "shadow", "padding", "paddingX", "paddingY", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "htmlTag", "position", "overflow", "zIndex", "top", "bottom", "left", "right"]);
-    return (React.createElement(ContainerWrapper, Object.assign({ backgroundColor: backgroundColor, contentColor: contentColor, borderColor: borderColor, radius: radius, borderSide: borderSide, shadow: shadow, padding: padding, paddingLeft: paddingX || paddingLeft, paddingRight: paddingX || paddingRight, paddingTop: paddingY || paddingTop, paddingBottom: paddingY || paddingBottom, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, as: htmlTag, position: position, top: top, bottom: bottom, left: left, right: right, overflow: overflow, zIndex: zIndex, borderWidth: borderWidth }, props), children));
+    var { children, backgroundColor, contentColor, borderColor, radius, borderSide, borderWidth = '1px', shadow, padding, paddingX, paddingY, paddingLeft, paddingRight, paddingTop, paddingBottom, margin, marginX, marginY, marginLeft, marginRight, marginTop, marginBottom, width, height, minWidth, minHeight, maxWidth, maxHeight, htmlTag = 'div', position, overflow, zIndex, top, bottom, left, right } = _a, props = __rest(_a, ["children", "backgroundColor", "contentColor", "borderColor", "radius", "borderSide", "borderWidth", "shadow", "padding", "paddingX", "paddingY", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "margin", "marginX", "marginY", "marginLeft", "marginRight", "marginTop", "marginBottom", "width", "height", "minWidth", "minHeight", "maxWidth", "maxHeight", "htmlTag", "position", "overflow", "zIndex", "top", "bottom", "left", "right"]);
+    return (React.createElement(ContainerWrapper, Object.assign({ backgroundColor: backgroundColor, contentColor: contentColor, borderColor: borderColor, radius: radius, borderSide: borderSide, shadow: shadow, padding: padding, paddingLeft: paddingX || paddingLeft, paddingRight: paddingX || paddingRight, paddingTop: paddingY || paddingTop, paddingBottom: paddingY || paddingBottom, margin: margin, marginLeft: marginX || marginLeft, marginRight: marginX || marginRight, marginTop: marginY || marginTop, marginBottom: marginY || marginBottom, width: width, height: height, minWidth: minWidth, minHeight: minHeight, maxWidth: maxWidth, maxHeight: maxHeight, as: htmlTag, position: position, top: top, bottom: bottom, left: left, right: right, overflow: overflow, zIndex: zIndex, borderWidth: borderWidth }, props), children));
 };
 export const availableBorderSides = ['all', 'left', 'right', 'top', 'bottom'];
 export const availableRadii = ['medium'];

package/dist/components/icon/available-icons/arrow-left-alt.d.ts

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

package/dist/components/icon/available-icons/arrow-left-alt.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+function SvgArrowRightAlt(props) {
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none" }, props),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M 20,12 A -1,1 0 0 0 19,11 H 5 a -1,1 0 1 0 0,2 h 14 a -1,1 0 0 0 1,-1 z", fill: "currentColor" }),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "m 9.707,7.293 a -1,1 0 0 0 -1.414,0 l -4,4 a -1,1 0 0 0 0,1.414 l 4,4 A -1,1 0 0 0 9.707,15.293 L 6.414,12 9.707,8.707 a -1,1 0 0 0 0,-1.414 z", fill: "currentColor" })));
+}
+export default SvgArrowRightAlt;

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

@@ -13,12 +13,12 @@ export { default as SvgArrowDropUp } from "./arrow-drop-up.js";
 export { default as SvgArrowForward } from "./arrow-forward.js";
 export { default as SvgArrowLeft } from "./arrow-left.js";
 export { default as SvgArrowRight } from "./arrow-right.js";
+export { default as SvgArrowLeftAlt } from "./arrow-left-alt.js";
 export { default as SvgArrowRightAlt } from "./arrow-right-alt.js";
 export { default as SvgReplay5 } from "./replay-5.js";
 export { default as SvgBack5 } from "./back5.js";
 export { default as SvgForward5 } from "./forward-5.js";
 export { default as SvgBarChart } from "./bar-chart.js";
-export { default as SvgBell } from "./bell.js";
 export { default as SvgBorderColor } from "./border-color.js";
 export { default as SvgBulb } from "./bulb.js";
 export { default as SvgCallToAction } from "./call-to-action.js";
@@ -210,3 +210,5 @@ 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";
+export { default as SvgBell } from "./bell.js";

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

@@ -13,12 +13,12 @@ export { default as SvgArrowDropUp } from './arrow-drop-up.js';
 export { default as SvgArrowForward } from './arrow-forward.js';
 export { default as SvgArrowLeft } from './arrow-left.js';
 export { default as SvgArrowRight } from './arrow-right.js';
+export { default as SvgArrowLeftAlt } from './arrow-left-alt.js';
 export { default as SvgArrowRightAlt } from './arrow-right-alt.js';
 export { default as SvgReplay5 } from './replay-5.js';
 export { default as SvgBack5 } from './back5.js';
 export { default as SvgForward5 } from './forward-5.js';
 export { default as SvgBarChart } from './bar-chart.js';
-export { default as SvgBell } from './bell.js';
 export { default as SvgBorderColor } from './border-color.js';
 export { default as SvgBulb } from './bulb.js';
 export { default as SvgCallToAction } from './call-to-action.js';
@@ -210,3 +210,5 @@ 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';
+export { default as SvgBell } from './bell.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/index.d.ts

@@ -1,4 +1,5 @@
 export { default as Avatar } from "./avatar/avatar";
+export { default as SetUnit } from "./set-unit/set-unit";
 export { default as Button } from "./button/button";
 export { default as Text } from "./text/text";
 export { default as Spacer } from "./spacer/spacer";

package/dist/components/index.js

@@ -1,5 +1,6 @@
 export { default as Avatar } from './avatar/avatar';
 export { default as BaseStyles, buildGlobalStylesheet, } from './base-styles/base-styles';
+export { default as SetUnit } from './set-unit/set-unit';
 export { default as Button } from './button/button';
 export { default as Text } from './text/text';
 export { default as Spacer } from './spacer/spacer';

package/dist/components/set-unit/set-unit.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const SetUnit: ({ children, unit, }: {
+    children: React.ReactNode;
+    unit: string;
+}) => JSX.Element;
+export default SetUnit;

package/dist/components/set-unit/set-unit.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { getSizingCssVarsDeclarations } from '../../css-variables';
+import { getTextSize } from '../../utilities';
+import styled from '@emotion/styled';
+const Wrapper = styled.div `
+  ${getSizingCssVarsDeclarations()};
+  ${props => props.unit && `--lns-unit: ${props.unit}`};
+  ${getTextSize('medium')};
+`;
+const SetUnit = ({ children, unit, }) => {
+    return (React.createElement(Wrapper, { unit: unit, "data-name": "SetUnit" }, children));
+};
+export default SetUnit;

package/dist/css-variables/index.d.ts

@@ -7,9 +7,11 @@ export declare const radiusVariables: VarsObject;
 export declare const shadowVariables: VarsObject;
 export declare const spaceVariables: VarsObject;
 export declare const formFieldVariables: VarsObject;
+export declare const getSizingVariablesCssVarsObject: () => VarsObject;
 export declare const getVariablesCssVarsObject: () => VarsObject;
 export declare const getColorsCssVarsObject: () => VarsObject;
 export declare const getThemeStylesString: (customRootElement?: string) => string;
 export declare const getThemeStyles: () => void;
+export declare const getSizingCssVarsDeclarations: () => string;
 export declare const getAllCssVarsString: (customRootElement: any) => string;
 export {};

package/dist/css-variables/index.js

@@ -72,10 +72,19 @@ export const formFieldVariables = getCssVarsFromObject(undefined, {
 });
 const colorVariables = getCssVarsFromObject('color', getColorsObject());
 const themeColorVariables = getCssVarsFromObject(undefined, getThemeColorsObject());
+const sizingVariables = [
+    unitVariables,
+    textSizeVariables,
+    radiusVariables,
+    shadowVariables,
+    spaceVariables,
+    formFieldVariables,
+];
+export const getSizingVariablesCssVarsObject = () => {
+    return Object.assign({}, ...sizingVariables);
+};
 export const getVariablesCssVarsObject = () => {
-    const result = {};
-    Object.assign(result, unitVariables, fontWeightVariables, textSizeVariables, radiusVariables, shadowVariables, spaceVariables, formFieldVariables);
-    return result;
+    return Object.assign({}, fontWeightVariables, ...sizingVariables);
 };
 export const getColorsCssVarsObject = () => {
     return Object.assign(Object.assign({}, colorVariables), themeColorVariables);
@@ -104,6 +113,10 @@ export const getThemeStyles = () => {
     style.innerHTML = getThemeStylesString();
     document.head.appendChild(style);
 };
+export const getSizingCssVarsDeclarations = () => {
+    const result = Object.entries(getSizingVariablesCssVarsObject()).map(cssVar => `${cssVar[0]}:${cssVar[1]};`);
+    return result.join('');
+};
 export const getAllCssVarsString = customRootElement => {
     const result = [];
     const rootElement = customRootElement || ':root';

package/dist/variables.js

@@ -1,3 +1,4 @@
+import { u } from './utilities';
 export const unit = 8;
 export const textSizes = {
     small: {
@@ -32,12 +33,12 @@ export const fontWeights = {
     black: 900,
 };
 export const radii = {
-    medium: '6px',
+    medium: u(0.75),
 };
 export const shadows = {
-    small: '0 4px 10px hsla(0, 0%, 0%, 0.05)',
-    medium: '0 4px 10px hsla(0, 0%, 0%, 0.1)',
-    large: '0 6px 24px hsla(0, 0%, 0%, 0.1)',
+    small: `0 ${u(0.5)} ${u(1.25)} hsla(0, 0%, 0%, 0.05)`,
+    medium: `0 ${u(0.5)} ${u(1.25)} hsla(0, 0%, 0%, 0.1)`,
+    large: `0 ${u(0.75)} ${u(3)} hsla(0, 0%, 0%, 0.1)`,
 };
 export const spaces = {
     xsmall: 0.5,

package/package.json

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