@loomhq/lens 10.92.0 → 10.93.1

package/dist/components/logo/logo.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 declare const LogoWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LogoWrapperProps, object>;
-declare const Logo: ({ variant, maxWidth, symbolColor, wordmarkColor, brand, ...props }: LogoProps & React.ComponentProps<typeof LogoWrapper>) => JSX.Element;
+declare const Logo: ({ variant, maxWidth, symbolColor, wordmarkColor, brand, customId, ...props }: LogoProps & React.ComponentProps<typeof LogoWrapper>) => JSX.Element;
 export declare const availableVariants: string[];
 declare type LogoProps = {
     variant?: 'combined' | 'symbol' | 'wordmark';
@@ -8,6 +8,7 @@ declare type LogoProps = {
     maxWidth?: number | string;
     symbolColor?: string;
     wordmarkColor?: string;
+    customId?: string;
 };
 declare type LogoWrapperProps = {
     variant?: 'combined' | 'symbol' | 'wordmark';

package/dist/components/logo/logo.js

@@ -12,29 +12,31 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import { getSize, getColorValue } from '../../utilities';
 import styled from '@emotion/styled';
-const LoomAiGradientDef = (React.createElement("defs", null,
-    React.createElement("radialGradient", { id: "gradient1", cx: "50%", cy: "50%", r: "100%", fx: "0%", fy: "0%" },
-        React.createElement("stop", { offset: "30%", stopColor: "#97ACFD" }),
-        React.createElement("stop", { offset: "33%", stopColor: "#B3B2F4" }),
-        React.createElement("stop", { offset: "43%", stopColor: "#DEB0E0" }),
-        React.createElement("stop", { offset: "50%", stopColor: "#DFC6E5" }),
-        React.createElement("stop", { offset: "72%", stopColor: "#6663F6" })),
-    React.createElement("radialGradient", { id: "gradient2", r: "100%", fx: "40%", fy: "72%" },
-        React.createElement("stop", { offset: "20%", stopColor: "#615CF500" }),
-        React.createElement("stop", { offset: "32%", stopColor: "#615CF550" }),
-        React.createElement("stop", { offset: "48%", stopColor: "#6663F6" })),
-    React.createElement("radialGradient", { id: "gradient3", r: "100%", fx: "0%", fy: "100%" },
-        React.createElement("stop", { offset: "25%", stopColor: "#6663F6" }),
-        React.createElement("stop", { offset: "38%", stopColor: "#6E68F450" }),
-        React.createElement("stop", { offset: "45%", stopColor: "#6E68F400" }))));
+const LoomAiGradientDef = (customId) => {
+    return (React.createElement("defs", null,
+        React.createElement("radialGradient", { id: `ai-logo-${customId}-gradient-1`, cx: "50%", cy: "50%", r: "100%", fx: "0%", fy: "0%" },
+            React.createElement("stop", { offset: "30%", stopColor: "#97ACFD" }),
+            React.createElement("stop", { offset: "33%", stopColor: "#B3B2F4" }),
+            React.createElement("stop", { offset: "43%", stopColor: "#DEB0E0" }),
+            React.createElement("stop", { offset: "50%", stopColor: "#DFC6E5" }),
+            React.createElement("stop", { offset: "72%", stopColor: "#6663F6" })),
+        React.createElement("radialGradient", { id: `ai-logo-${customId}-gradient-2`, r: "100%", fx: "40%", fy: "72%" },
+            React.createElement("stop", { offset: "20%", stopColor: "#615CF500" }),
+            React.createElement("stop", { offset: "32%", stopColor: "#615CF550" }),
+            React.createElement("stop", { offset: "48%", stopColor: "#6663F6" })),
+        React.createElement("radialGradient", { id: `ai-logo-${customId}-gradient-3`, r: "100%", fx: "0%", fy: "100%" },
+            React.createElement("stop", { offset: "25%", stopColor: "#6663F6" }),
+            React.createElement("stop", { offset: "38%", stopColor: "#6E68F450" }),
+            React.createElement("stop", { offset: "45%", stopColor: "#6E68F400" }))));
+};
 const symbolLogoPath = 'M30 15.4433C30 16.6091 29.0933 16.8581 27.9562 16.9301C22.5158 17.2323 16.7962 22.686 16.4795 28.112C16.422 29.2634 16.173 30.1702 15.0072 30.1702C13.8414 30.1702 13.578 29.2634 13.5205 28.0976C13.2038 22.686 7.48416 17.2323 2.05814 16.9301C0.906735 16.8581 0 16.6091 0 15.4433C0 14.2775 0.906735 14.043 2.05814 13.971C7.48416 13.6687 13.2038 7.65433 13.5205 2.22831C13.578 1.0769 13.827 0.170166 15.0072 0.170166C16.1874 0.170166 16.422 1.0769 16.4795 2.22831C16.7962 7.65433 22.5158 13.6687 27.9419 13.971C29.0933 14.043 30 14.2919 30 15.4433Z';
 const SymbolLogoSvg = (_a) => {
-    var { brand, symbolColor } = _a, props = __rest(_a, ["brand", "symbolColor"]);
+    var { brand, symbolColor, customId } = _a, props = __rest(_a, ["brand", "symbolColor", "customId"]);
     switch (brand) {
         case 'ai':
             return (React.createElement("svg", Object.assign({ viewBox: "0 0 30 31", fill: "none" }, props), !symbolColor ? (React.createElement(React.Fragment, null,
-                LoomAiGradientDef,
-                [...Array(3)].map((_, i) => (React.createElement("path", { key: i, d: symbolLogoPath, fill: `url(#gradient${i + 1})` }))))) : (React.createElement("path", { d: symbolLogoPath, fill: getColorValue(symbolColor) }))));
+                LoomAiGradientDef(customId),
+                [...Array(3)].map((_, i) => (React.createElement("path", { key: i, d: symbolLogoPath, fill: `url(#ai-logo-${customId}-gradient-${i + 1}` }))))) : (React.createElement("path", { d: symbolLogoPath, fill: getColorValue(symbolColor) }))));
         default:
             return (React.createElement("svg", Object.assign({ viewBox: "0 0 31 30", fill: "none" }, props),
                 React.createElement("path", { d: "M30.01 13.43h-9.142l7.917-4.57-1.57-2.72-7.918 4.57 4.57-7.915-2.72-1.57-4.571 7.913V0h-3.142v9.139L8.863 1.225l-2.721 1.57 4.57 7.913L2.796 6.14 1.225 8.86l7.917 4.57H0v3.141h9.141l-7.916 4.57 1.57 2.72 7.918-4.57-4.571 7.915 2.72 1.57 4.572-7.914V30h3.142v-9.334l4.655 8.06 2.551-1.472-4.656-8.062 8.087 4.668 1.571-2.72-7.916-4.57h9.141v-3.14h.001zm-15.005 5.84a4.271 4.271 0 11-.001-8.542 4.271 4.271 0 01.001 8.542z", fill: symbolColor
@@ -60,13 +62,13 @@ const WordmarkLogoSvg = (_a) => {
 };
 const combinedLogoPath = 'M100 7.76427C100 8.35691 99.539 8.48348 98.961 8.52007C96.1953 8.67371 93.2877 11.4461 93.1267 14.2045C93.0975 14.7898 92.9709 15.2508 92.3783 15.2508C91.7856 15.2508 91.6517 14.7898 91.6225 14.1972C91.4615 11.4461 88.5539 8.67371 85.7955 8.52007C85.2102 8.48348 84.7492 8.35691 84.7492 7.76427C84.7492 7.17162 85.2102 7.05237 85.7955 7.01578C88.5539 6.86213 91.4615 3.80464 91.6225 1.04628C91.6517 0.460948 91.7783 0 92.3783 0C92.9782 0 93.0975 0.460948 93.1267 1.04628C93.2877 3.80464 96.1953 6.86213 98.9537 7.01578C99.539 7.05237 100 7.17894 100 7.76427Z';
 const CombinedLogoSvg = (_a) => {
-    var { brand, wordmarkColor, symbolColor } = _a, props = __rest(_a, ["brand", "wordmarkColor", "symbolColor"]);
+    var { brand, wordmarkColor, symbolColor, customId } = _a, props = __rest(_a, ["brand", "wordmarkColor", "symbolColor", "customId"]);
     switch (brand) {
         case 'ai':
             return (React.createElement("svg", Object.assign({ viewBox: "0 0 100 30", fill: "none" }, props),
                 !symbolColor ? (React.createElement(React.Fragment, null,
-                    LoomAiGradientDef,
-                    [...Array(3)].map((_, i) => (React.createElement("path", { key: i, d: combinedLogoPath, fill: `url(#gradient${i + 1})` }))))) : (React.createElement("path", { d: combinedLogoPath, fill: getColorValue(symbolColor) })),
+                    LoomAiGradientDef(customId),
+                    [...Array(3)].map((_, i) => (React.createElement("path", { key: i, d: combinedLogoPath, fill: `url(#ai-logo-${customId}-gradient-${i + 1}` }))))) : (React.createElement("path", { d: combinedLogoPath, fill: getColorValue(symbolColor) })),
                 React.createElement("g", { fill: wordmarkColor },
                     React.createElement("path", { d: "M4.1997 29.5909H0.570312V9.83386H4.1997V29.5909Z" }),
                     React.createElement("path", { d: "M12.3563 26.6983C14.1301 26.6983 15.7674 25.4157 15.7674 22.8778C15.7674 20.34 14.1301 19.0574 12.3563 19.0574C10.5826 19.0574 8.94526 20.34 8.94526 22.8778C8.94526 25.3884 10.5826 26.6983 12.3563 26.6983ZM12.3563 15.7555C16.3678 15.7555 19.3968 18.73 19.3968 22.8778C19.3968 26.9984 16.3678 30.0002 12.3563 30.0002C8.34491 30.0002 5.31587 26.9984 5.31587 22.8778C5.31587 18.73 8.34491 15.7555 12.3563 15.7555Z" }),
@@ -94,10 +96,10 @@ const LogoWrapper = styled.span `
   }
 `;
 const Logo = (_a) => {
-    var { variant = 'combined', maxWidth, symbolColor, wordmarkColor = 'body', brand = 'loom' } = _a, props = __rest(_a, ["variant", "maxWidth", "symbolColor", "wordmarkColor", "brand"]);
+    var { variant = 'combined', maxWidth, symbolColor, wordmarkColor = 'body', brand = 'loom', customId = '' } = _a, props = __rest(_a, ["variant", "maxWidth", "symbolColor", "wordmarkColor", "brand", "customId"]);
     return (React.createElement(LogoWrapper, Object.assign({ "aria-label": brand, variant: variant, maxWidth: maxWidth }, props),
-        variant === 'combined' && (React.createElement(CombinedLogoSvg, { brand: brand, symbolColor: symbolColor, wordmarkColor: getColorValue(wordmarkColor), className: "lns-logoSvg" })),
-        variant === 'symbol' && (React.createElement(SymbolLogoSvg, { brand: brand, symbolColor: symbolColor, className: "lns-logoSvg" })),
+        variant === 'combined' && (React.createElement(CombinedLogoSvg, { brand: brand, symbolColor: symbolColor, wordmarkColor: getColorValue(wordmarkColor), customId: customId, className: "lns-logoSvg" })),
+        variant === 'symbol' && (React.createElement(SymbolLogoSvg, { brand: brand, symbolColor: symbolColor, customId: customId, className: "lns-logoSvg" })),
         variant === 'wordmark' && (React.createElement(WordmarkLogoSvg, { brand: brand, wordmarkColor: getColorValue(wordmarkColor), className: "lns-logoSvg" }))));
 };
 export const availableVariants = ['combined', 'symbol', 'wordmark'];

package/dist/components/text/text.d.ts

@@ -9,7 +9,7 @@ declare type VariantsProps = {
 export declare const variants: VariantsProps;
 export declare const lineHeightToPx: (size: any) => number;
 declare const TextWrapper: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, TextWrapperProps, object>;
-declare const Text: ({ children, size, color, isInline, isDimmed, fontWeight, hasEllipsis, ellipsisLines, variant, htmlTag, alignment, sizeMinMax, ...props }: TextProps & React.ComponentProps<typeof TextWrapper>) => JSX.Element;
+declare const Text: ({ children, size, color, isInline, isDimmed, fontWeight, hasEllipsis, ellipsisLines, noWrap, variant, htmlTag, alignment, sizeMinMax, ...props }: TextProps & React.ComponentProps<typeof TextWrapper>) => JSX.Element;
 export declare const availableSizes: string[];
 export declare const deprecatedSizes: string[];
 export declare const availableFontWeights: string[];
@@ -24,6 +24,7 @@ interface TextProps {
     isInline?: boolean;
     isDimmed?: boolean;
     hasEllipsis?: boolean;
+    noWrap?: boolean;
     ellipsisLines?: number;
     htmlTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'p' | 'span' | 'div';
     children?: React.ReactNode;

package/dist/components/text/text.js

@@ -59,7 +59,9 @@ const TextWrapper = styled.span `
     -webkit-box-orient: vertical;
     -webkit-line-clamp: ${props.ellipsisLines};
   `};
-
+  ${props => !props.hasEllipsis &&
+    props.noWrap &&
+    'white-space: nowrap; overflow: hidden;'};
   ${props => props.sizeMinMax &&
     `
     min-height: 0vw;
@@ -77,11 +79,11 @@ const TextWrapper = styled.span `
   `}
 `;
 const Text = (_a) => {
-    var { children, size = 'body-md', color, isInline, isDimmed, fontWeight = 'book', hasEllipsis, ellipsisLines, variant, htmlTag = 'span', alignment, sizeMinMax } = _a, props = __rest(_a, ["children", "size", "color", "isInline", "isDimmed", "fontWeight", "hasEllipsis", "ellipsisLines", "variant", "htmlTag", "alignment", "sizeMinMax"]);
+    var { children, size = 'body-md', color, isInline, isDimmed, fontWeight = 'book', hasEllipsis, ellipsisLines, noWrap, variant, htmlTag = 'span', alignment, sizeMinMax } = _a, props = __rest(_a, ["children", "size", "color", "isInline", "isDimmed", "fontWeight", "hasEllipsis", "ellipsisLines", "noWrap", "variant", "htmlTag", "alignment", "sizeMinMax"]);
     if (isDimmed) {
         console.warn(textIsDimmedDeprecated);
     }
-    return (React.createElement(TextWrapper, Object.assign({ size: variant ? variants[variant].size : size, color: color, isInline: isInline, isDimmed: isDimmed, fontWeight: variant ? variants[variant].fontWeight : fontWeight, hasEllipsis: hasEllipsis, ellipsisLines: ellipsisLines, variant: variant, as: htmlTag, alignment: alignment, sizeMinMax: sizeMinMax }, props), children));
+    return (React.createElement(TextWrapper, Object.assign({ size: variant ? variants[variant].size : size, color: color, isInline: isInline, isDimmed: isDimmed, fontWeight: variant ? variants[variant].fontWeight : fontWeight, hasEllipsis: hasEllipsis, ellipsisLines: ellipsisLines, noWrap: noWrap, variant: variant, as: htmlTag, alignment: alignment, sizeMinMax: sizeMinMax }, props), children));
 };
 export const availableSizes = [
     'body-sm',

package/package.json

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