@loomhq/lens 10.28.0 → 10.29.0

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

@@ -19,7 +19,6 @@ 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";
@@ -212,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

@@ -19,7 +19,6 @@ 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';
@@ -212,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,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.28.0",
+  "version": "10.29.0",
   "scripts": {
     "dev": "next",
     "build:next": "next build",