@loomhq/lens 10.14.0 → 10.16.1

package/dist/components/button/button.js

@@ -99,6 +99,7 @@ const ButtonWrapper = styled.button `
   transition: 0.6s background-color, 0.6s border-color;
   align-items: center;
   justify-content: center;
+  vertical-align: middle;
   white-space: nowrap;
   border: 1px solid;
   ${getFontWeight('medium')};

package/dist/components/dropdown/dropdown.js

@@ -24,6 +24,7 @@ const menuPositions = {
 };
 const TriggerSection = styled.div `
   display: inline-block;
+  vertical-align: middle;
 `;
 const Dropdown = (_a) => {
     var { menuPosition = 'left', menuZIndex = 1100, options, trigger, isOpen: isOpenFromProps, menuMinWidth = 24, menuMaxWidth = 48, container, onOuterClick, triggerOffset = 0, onOpenChange } = _a, props = __rest(_a, ["menuPosition", "menuZIndex", "options", "trigger", "isOpen", "menuMinWidth", "menuMaxWidth", "container", "onOuterClick", "triggerOffset", "onOpenChange"]);

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

@@ -205,3 +205,4 @@ export { default as SvgCanvas } from "./canvas.js";
 export { default as SvgPin } from "./pin.js";
 export { default as SvgPinFill } from "./pin-fill.js";
 export { default as SvgMobileDevices } from "./mobile-devices.js";
+export { default as SvgSplit } from "./split.js";

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

@@ -205,3 +205,4 @@ export { default as SvgCanvas } from './canvas.js';
 export { default as SvgPin } from './pin.js';
 export { default as SvgPinFill } from './pin-fill.js';
 export { default as SvgMobileDevices } from './mobile-devices.js';
+export { default as SvgSplit } from './split.js';

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

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

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+function SvgSplit(props) {
+    return (React.createElement("svg", Object.assign({ viewBox: "0 0 24 24", fill: "none" }, props),
+        React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 3C12.5523 3 13 3.44772 13 4L13 5C13 5.55228 12.5523 6 12 6C11.4477 6 11 5.55228 11 5L11 4C11 3.44772 11.4477 3 12 3ZM5.77215 6.22781C5.62629 6.08194 5.42846 6 5.22218 6H3.66663C3.11434 6 2.66663 5.55228 2.66663 5C2.66663 4.44772 3.11434 4 3.66663 4H5.22218C5.95889 4 6.66543 4.29266 7.18637 4.81359C7.7073 5.33453 7.99996 6.04107 7.99996 6.77778V17.2222C7.99996 17.9589 7.7073 18.6655 7.18637 19.1864C6.66543 19.7073 5.95889 20 5.22218 20H3.66663C3.11434 20 2.66663 19.5523 2.66663 19C2.66663 18.4477 3.11434 18 3.66663 18H5.22218C5.42846 18 5.62629 17.9181 5.77215 17.7722C5.91802 17.6263 5.99996 17.4285 5.99996 17.2222V6.77778C5.99996 6.5715 5.91802 6.37367 5.77215 6.22781ZM18.2276 6.22781C18.3734 6.08194 18.5713 6 18.7775 6H20.3331C20.8854 6 21.3331 5.55228 21.3331 5C21.3331 4.44772 20.8854 4 20.3331 4H18.7775C18.0408 4 17.3343 4.29266 16.8133 4.81359C16.2924 5.33453 15.9998 6.04107 15.9998 6.77778V17.2222C15.9998 17.9589 16.2924 18.6655 16.8133 19.1864C17.3343 19.7073 18.0408 20 18.7775 20H20.3331C20.8854 20 21.3331 19.5523 21.3331 19C21.3331 18.4477 20.8854 18 20.3331 18H18.7775C18.5713 18 18.3734 17.9181 18.2276 17.7722C18.0817 17.6263 17.9998 17.4285 17.9998 17.2222V6.77778C17.9998 6.5715 18.0817 6.37367 18.2276 6.22781ZM13 9C13 8.44772 12.5523 8 12 8C11.4477 8 11 8.44772 11 9L11 10C11 10.5523 11.4477 11 12 11C12.5523 11 13 10.5523 13 10L13 9ZM12 13C12.5523 13 13 13.4477 13 14L13 15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15L11 14C11 13.4477 11.4477 13 12 13ZM13 19C13 18.4477 12.5523 18 12 18C11.4477 18 11 18.4477 11 19L11 20C11 20.5523 11.4477 21 12 21C12.5523 21 13 20.5523 13 20L13 19Z", fill: "currentColor" })));
+}
+export default SvgSplit;

package/dist/components/icon/icon.js

@@ -9,9 +9,9 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { getColorValue, getSize } from '../../utilities';
 import React from 'react';
 import styled from '@emotion/styled';
-import { getSize, getColorValue } from '../../utilities';
 import { unit } from '../../variables';
 const defaultIconSize = 3;
 const IconWrapper = styled.span `
@@ -36,7 +36,7 @@ const Icon = (_a) => {
         const svg = ref.current.querySelector('svg');
         const bBox = svg.getBBox();
         svg.setAttribute('viewBox', `${bBox.x} 0 ${bBox.width} ${defaultIconSizePx}`);
-    });
+    }, []);
     return (React.createElement(IconWrapper, Object.assign({ ref: ref, "aria-label": altText, color: color, size: size, hasWidthOffset: hasWidthOffset }, props), icon));
 };
 export default Icon;

package/dist/components/loader/loader.js

@@ -36,6 +36,7 @@ const dotScale = keyframes `
 `;
 const LoaderWrapper = styled.span `
   display: inline-block;
+  vertical-align: middle;
   height: ${props => getTotalSize(props)}px;
   width: ${props => getTotalSize(props)}px;
 `;

package/dist/components/logo/logo.js

@@ -29,7 +29,7 @@ const CombinedLogoSvg = (_a) => {
         React.createElement("path", { d: "M38.109 25.973V4.027h4.028v21.946h-4.028zM76.742 11.059h3.846v1.82c.818-1.455 2.727-2.244 4.362-2.244 2.03 0 3.665.88 4.422 2.485 1.18-1.82 2.756-2.485 4.725-2.485 2.756 0 5.39 1.667 5.39 5.668v9.67h-3.906v-8.851c0-1.607-.788-2.82-2.636-2.82-1.727 0-2.757 1.335-2.757 2.942v8.73h-3.996v-8.852c0-1.607-.818-2.82-2.636-2.82-1.757 0-2.787 1.305-2.787 2.942v8.73h-4.027V11.059zM51.24 26.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.288 7.889-7.824 7.889zm0-12.135a4.25 4.25 0 00-4.244 4.247 4.25 4.25 0 004.244 4.247 4.25 4.25 0 004.243-4.247 4.25 4.25 0 00-4.243-4.247zM67.667 26.405c-4.538 0-7.824-3.367-7.824-7.889 0-4.45 3.276-7.896 7.824-7.896 4.57 0 7.824 3.478 7.824 7.896 0 4.49-3.29 7.889-7.824 7.889zm0-12.186a4.3 4.3 0 00-4.293 4.296 4.3 4.3 0 004.293 4.296 4.3 4.3 0 004.293-4.296 4.3 4.3 0 00-4.293-4.296z", fill: wordmarkColor })));
 };
 const LogoWrapper = styled.span `
-  display: inline-block;
+  display: block;
   ${props => props.maxWidth && getSize('max-width', props.maxWidth)};
 
   & > svg.lns-logoSvg {

package/dist/components/pill/pill.js

@@ -19,6 +19,7 @@ const PillWrapper = styled.div `
   display: inline-grid;
   grid-auto-flow: column;
   align-items: center;
+  vertical-align: middle;
   padding: 0 ${u(1.5)};
   min-height: ${u(3.25)};
   color: ${props => getColorValue(props.color)};

package/dist/components/spacer/spacer.js

@@ -14,6 +14,7 @@ import styled from '@emotion/styled';
 import { getSize } from '../../utilities';
 const SpacerWrapper = styled.div `
   display: ${props => (props.isInline ? 'inline-block' : 'block')};
+  vertical-align: middle;
   ${props => getSize('padding', props.all)};
   ${props => getSize('padding-top', props.top)};
   ${props => getSize('padding-right', props.right)};

package/dist/components/tabs/tabs.d.ts

@@ -11,7 +11,7 @@ declare type TabProps = {
     isActive?: boolean;
     icon?: React.ReactNode;
     children?: React.ReactNode;
-    htmlTag?: 'a' | 'button';
+    htmlTag?: 'a' | 'button' | 'span';
 };
 declare type TabWrapperProps = {
     isActive?: boolean;

package/dist/components/tabs/tabs.js

@@ -54,6 +54,7 @@ const TabWrapper = styled.button `
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  vertical-align: middle;
   padding: 0 0 ${u(1)} 0;
   color: inherit;
   text-decoration: none;
@@ -61,6 +62,7 @@ const TabWrapper = styled.button `
   ${getFontWeight('medium')};
   transition: 0.6s color;
   border-bottom: ${u(0.375)} solid transparent;
+  white-space: nowrap;
   color: ${props => getColorValue(props.isActive ? 'body' : 'bodyDimmed')};
   ${props => props.isActive &&
     `border-color: ${getColorValue('primary')};

package/dist/components/text-button/text-button.js

@@ -31,6 +31,7 @@ const xSpace = 1;
 const TextButtonWrapper = styled.button `
   background-color: transparent;
   display: inline-flex;
+  vertical-align: middle;
   align-items: center;
   font: inherit;
   text-decoration: none;

package/dist/components/tooltip/tooltip.js

@@ -50,6 +50,7 @@ export const TooltipBox = (_a) => {
 };
 const TooltipChildren = styled.span `
   display: ${props => (props.isInline ? 'inline-block' : 'block')};
+  vertical-align: middle;
 `;
 function Tooltip(_a) {
     var { children, content, placement = 'topCenter', keepOpen, triggerOffset = 4, maxWidth = 26, isInline = true, container, zIndex = 1100 } = _a, rest = __rest(_a, ["children", "content", "placement", "keepOpen", "triggerOffset", "maxWidth", "isInline", "container", "zIndex"]);

package/package.json

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