@loomhq/lens 10.26.0 → 10.29.1

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";
@@ -211,3 +211,4 @@ 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';
@@ -211,3 +211,4 @@ 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/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,7 @@
+import React from 'react';
+declare type SetUnitProps = {
+    children: React.ReactNode;
+    unit?: string;
+};
+declare const SetUnit: ({ unit, children, ...props }: SetUnitProps) => JSX.Element;
+export default SetUnit;

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

@@ -0,0 +1,25 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+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 = (_a) => {
+    var { unit, children } = _a, props = __rest(_a, ["unit", "children"]);
+    return (React.createElement(Wrapper, Object.assign({ unit: unit, "data-name": "SetUnit" }, props), 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.26.0",
+  "version": "10.29.1",
   "scripts": {
     "dev": "next",
     "build:next": "next build",