@opentrons/components 0.3.23-alpha.0 → 0.3.24-alpha.0

package/README.md

@@ -8,7 +8,7 @@
 
 ## Version
 
-`0.3.23-alpha.0`
+`0.3.24-alpha.0`
 
 ## License
 

package/lib/atoms/StyledText/StyledText.d.ts

@@ -1,163 +1,20 @@
-import { Text } from '../../primitives';
-import type { FlattenSimpleInterpolation } from 'styled-components';
 import type { ComponentProps, ReactNode } from 'react';
-declare const helixProductStyleMap: {
-    readonly displayBold: {
-        readonly as: "h1";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly headingLargeRegular: {
-        readonly as: "h2";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly headingLargeBold: {
-        readonly as: "h2";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly headingMediumBold: {
-        readonly as: "h3";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly headingMediumSemiBold: {
-        readonly as: "h3";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly headingSmallRegular: {
-        readonly as: "h4";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly headingSmallBold: {
-        readonly as: "h4";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly headingSmallSemiBold: {
-        readonly as: "h4";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly bodyLargeSemiBold: {
-        readonly as: "p";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly bodyLargeRegular: {
-        readonly as: "p";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly bodyDefaultSemiBold: {
-        readonly as: "p";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly bodyDefaultRegular: {
-        readonly as: "p";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly bodyDefaultRegLink: {
-        readonly as: "p";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly captionSemiBold: {
-        readonly as: "label";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly captionBold: {
-        readonly as: "label";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly captionRegular: {
-        readonly as: "label";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly codeRegular: {
-        readonly as: "p";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly codeBold: {
-        readonly as: "p";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly hidden: {
-        readonly as: "none";
-        readonly style: FlattenSimpleInterpolation;
-    };
-};
-declare const ODDStyleMap: {
-    readonly level1Header: {
-        readonly as: "h1";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly level2HeaderRegular: {
-        readonly as: "h2";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly level2HeaderSemiBold: {
-        readonly as: "h2";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly level2HeaderBold: {
-        readonly as: "h2";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly level3HeaderRegular: {
-        readonly as: "h3";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly level3HeaderSemiBold: {
-        readonly as: "h3";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly level3HeaderBold: {
-        readonly as: "h3";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly level4HeaderRegular: {
-        readonly as: "h4";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly level4HeaderSemiBold: {
-        readonly as: "h4";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly level4HeaderBold: {
-        readonly as: "h4";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly bodyTextRegular: {
-        readonly as: "p";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly bodyTextSemiBold: {
-        readonly as: "p";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly bodyTextBold: {
-        readonly as: "p";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly smallBodyTextRegular: {
-        readonly as: "label";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly smallBodyTextSemiBold: {
-        readonly as: "label";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly smallBodyTextBold: {
-        readonly as: "label";
-        readonly style: FlattenSimpleInterpolation;
-    };
-    readonly hidden: {
-        readonly as: "none";
-        readonly style: FlattenSimpleInterpolation;
-    };
-};
-export interface Props extends ComponentProps<typeof Text> {
+import type { StyleProps } from '../../primitives/types';
+import type { DesktopStyles, ODDStyles } from './styledTextStyles';
+export type { DesktopStyles, ODDStyles } from './styledTextStyles';
+export { DESKTOP_STYLES as HELIX_STYLES, ODD_STYLES } from './styledTextStyles';
+export interface Props extends ComponentProps<'p'>, StyleProps {
+    as?: keyof JSX.IntrinsicElements;
+    /** @deprecated Prefer `as`. For LegacyStyledText migration. */
+    forwardedAs?: keyof JSX.IntrinsicElements;
     oddStyle?: ODDStyles;
-    desktopStyle?: HelixStyles;
+    desktopStyle?: DesktopStyles;
     children?: ReactNode;
     htmlFor?: string;
 }
-export declare const ODD_STYLES: string[];
-export declare const HELIX_STYLES: string[];
-export type HelixStyles = keyof typeof helixProductStyleMap;
-export type ODDStyles = keyof typeof ODDStyleMap;
-export declare const StyledText: (props: Props) => JSX.Element;
-export {};
+/**
+ * StyledText — prefer `desktopStyle` / `oddStyle` for Helix / ODD typography.
+ * Without those, falls back to LegacyStyledText logic: `as` / `forwardedAs` +
+ * `fontWeight` → legacy CSS-module classes.
+ */
+export declare function StyledText({ oddStyle, desktopStyle, as, forwardedAs, fontWeight, className, children, style, ...props }: Props): JSX.Element;

package/lib/atoms/StyledText/__fixtures__/legacyTextStyleFixtures.d.ts

@@ -0,0 +1,10 @@
+import type { LegacyFontWeight, LegacyTextTag } from '../legacyTextStyles';
+/**
+ * Old LegacyStyledText API cases copied from LegacyStyledText.
+ */
+export declare const OLD_API_TRANSLATIONS: Array<{
+    as: LegacyTextTag;
+    fontWeight?: LegacyFontWeight;
+    className: string;
+    label: string;
+}>;

package/lib/atoms/StyledText/__fixtures__/styledTextStyleFixtures.d.ts

@@ -0,0 +1,13 @@
+import type { DesktopStyles, ODDStyles } from '../styledTextStyles';
+export declare const DESKTOP_STYLE_TRANSLATIONS: Array<{
+    desktopStyle: DesktopStyles;
+    font: string | null;
+}>;
+export declare const ODD_STYLE_TRANSLATIONS: Array<{
+    oddStyle: ODDStyles;
+    tokens: {
+        fontSize: string;
+        lineHeight: string;
+        fontWeight?: number;
+    } | null;
+}>;

package/lib/atoms/StyledText/__tests__/StyledText.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/lib/atoms/StyledText/__tests__/legacyTextStyles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/atoms/StyledText/__tests__/styledTextStyles.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/atoms/StyledText/legacyTextStyles.d.ts

@@ -0,0 +1,9 @@
+import { TYPOGRAPHY } from '../../ui-style-constants';
+export type LegacyTextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h6' | 'p' | 'label';
+export type LegacyFontWeight = typeof TYPOGRAPHY.fontWeightRegular | typeof TYPOGRAPHY.fontWeightSemiBold | typeof TYPOGRAPHY.fontWeightBold;
+/** Resolve the CSS module class for as/forwardedAs + fontWeight. */
+export declare function resolveLegacyTextStyle({ as, forwardedAs, fontWeight, }: {
+    as?: LegacyTextTag;
+    forwardedAs?: LegacyTextTag;
+    fontWeight?: LegacyFontWeight;
+}): string;

package/lib/atoms/StyledText/styledTextStyles.d.ts

@@ -0,0 +1,237 @@
+import type { CSSProperties } from 'react';
+/**
+ * Desktop styles — Helix font string + semantic tag.
+ */
+declare const desktopStyleMap: {
+    readonly displayBold: {
+        readonly as: "h1";
+        readonly font: "700 2.4375rem/3rem Public Sans";
+    };
+    readonly headingLargeRegular: {
+        readonly as: "h2";
+        readonly font: "400 1.625rem/2rem Public Sans";
+    };
+    readonly headingLargeBold: {
+        readonly as: "h2";
+        readonly font: "700 1.625rem/2rem Public Sans";
+    };
+    readonly headingMediumBold: {
+        readonly as: "h3";
+        readonly font: "700 1.4375rem/1.75rem Public Sans";
+    };
+    readonly headingMediumSemiBold: {
+        readonly as: "h3";
+        readonly font: "600 1.4375rem/1.75rem Public Sans";
+    };
+    readonly headingSmallRegular: {
+        readonly as: "h4";
+        readonly font: "400 1.125rem/1.5rem Public Sans";
+    };
+    readonly headingSmallBold: {
+        readonly as: "h4";
+        readonly font: "700 1.125rem/1.5rem Public Sans";
+    };
+    readonly headingSmallSemiBold: {
+        readonly as: "h4";
+        readonly font: "700 1.125rem/1.5rem Public Sans";
+    };
+    readonly bodyLargeSemiBold: {
+        readonly as: "p";
+        readonly font: "600 1rem/1.5rem Public Sans";
+    };
+    readonly bodyLargeRegular: {
+        readonly as: "p";
+        readonly font: "400 1rem/1.5rem Public Sans";
+    };
+    readonly bodyDefaultSemiBold: {
+        readonly as: "p";
+        readonly font: "600 0.8125rem/1.25rem Public Sans";
+    };
+    readonly bodyDefaultRegular: {
+        readonly as: "p";
+        readonly font: "400 0.8125rem/1.25rem Public Sans";
+    };
+    readonly bodyDefaultRegLink: {
+        readonly as: "p";
+        readonly font: "400 0.8125rem/1.25rem Public Sans";
+    };
+    readonly captionSemiBold: {
+        readonly as: "label";
+        readonly font: "600 0.8125rem/1rem Public Sans";
+    };
+    readonly captionBold: {
+        readonly as: "label";
+        readonly font: "700 0.8125rem/1rem Public Sans";
+    };
+    readonly captionRegular: {
+        readonly as: "label";
+        readonly font: "400 0.8125rem/1rem Public Sans";
+    };
+    readonly codeRegular: {
+        readonly as: "p";
+        readonly font: "400 0.8125rem/1.25rem Reddit Mono Variable";
+    };
+    readonly codeBold: {
+        readonly as: "p";
+        readonly font: "700 0.8125rem/1.25rem Reddit Mono Variable";
+    };
+    readonly hidden: {
+        readonly as: "p";
+        readonly font: null;
+    };
+};
+/**
+ * ODD styles — typography tokens + semantic tag.
+ */
+declare const ODDStyleMap: {
+    readonly level1Header: {
+        readonly as: "h1";
+        readonly tokens: {
+            readonly fontSize: "5rem";
+            readonly fontWeight: 700;
+            readonly lineHeight: "6rem";
+        };
+    };
+    readonly level2HeaderRegular: {
+        readonly as: "h2";
+        readonly tokens: {
+            readonly fontSize: "2.375rem";
+            readonly fontWeight: 400;
+            readonly lineHeight: "3rem";
+        };
+    };
+    readonly level2HeaderSemiBold: {
+        readonly as: "h2";
+        readonly tokens: {
+            readonly fontSize: "2.375rem";
+            readonly fontWeight: 600;
+            readonly lineHeight: "3rem";
+        };
+    };
+    readonly level2HeaderBold: {
+        readonly as: "h2";
+        readonly tokens: {
+            readonly fontSize: "2.375rem";
+            readonly fontWeight: 700;
+            readonly lineHeight: "3rem";
+        };
+    };
+    readonly level3HeaderRegular: {
+        readonly as: "h3";
+        readonly tokens: {
+            readonly fontSize: "2rem";
+            readonly fontWeight: 400;
+            readonly lineHeight: "2.625rem";
+        };
+    };
+    readonly level3HeaderSemiBold: {
+        readonly as: "h3";
+        readonly tokens: {
+            readonly fontSize: "2rem";
+            readonly fontWeight: 600;
+            readonly lineHeight: "2.625rem";
+        };
+    };
+    readonly level3HeaderBold: {
+        readonly as: "h3";
+        readonly tokens: {
+            readonly fontSize: "2rem";
+            readonly fontWeight: 700;
+            readonly lineHeight: "2.625rem";
+        };
+    };
+    readonly level4HeaderRegular: {
+        readonly as: "h4";
+        readonly tokens: {
+            readonly fontSize: "1.75rem";
+            readonly fontWeight: 400;
+            readonly lineHeight: "2.25rem";
+        };
+    };
+    readonly level4HeaderSemiBold: {
+        readonly as: "h4";
+        readonly tokens: {
+            readonly fontSize: "1.75rem";
+            readonly fontWeight: 600;
+            readonly lineHeight: "2.25rem";
+        };
+    };
+    readonly level4HeaderBold: {
+        readonly as: "h4";
+        readonly tokens: {
+            readonly fontSize: "1.75rem";
+            readonly fontWeight: 700;
+            readonly lineHeight: "2.25rem";
+        };
+    };
+    readonly bodyTextRegular: {
+        readonly as: "p";
+        readonly tokens: {
+            readonly fontSize: "1.375rem";
+            readonly fontWeight: 400;
+            readonly lineHeight: "1.75rem";
+        };
+    };
+    readonly bodyTextSemiBold: {
+        readonly as: "p";
+        readonly tokens: {
+            readonly fontSize: "1.375rem";
+            readonly fontWeight: 600;
+            readonly lineHeight: "1.75rem";
+        };
+    };
+    readonly bodyTextBold: {
+        readonly as: "p";
+        readonly tokens: {
+            readonly fontSize: "1.375rem";
+            readonly fontWeight: 700;
+            readonly lineHeight: "1.75rem";
+        };
+    };
+    readonly smallBodyTextRegular: {
+        readonly as: "label";
+        readonly tokens: {
+            readonly fontSize: "1.25rem";
+            readonly fontWeight: 400;
+            readonly lineHeight: "1.5rem";
+        };
+    };
+    readonly smallBodyTextSemiBold: {
+        readonly as: "label";
+        readonly tokens: {
+            readonly fontSize: "1.25rem";
+            readonly lineHeight: "1.5rem";
+        };
+    };
+    readonly smallBodyTextBold: {
+        readonly as: "label";
+        readonly tokens: {
+            readonly fontSize: "1.25rem";
+            readonly fontWeight: 700;
+            readonly lineHeight: "1.5rem";
+        };
+    };
+    readonly hidden: {
+        readonly as: "p";
+        readonly tokens: null;
+    };
+};
+export type DesktopStyles = keyof typeof desktopStyleMap;
+export type ODDStyles = keyof typeof ODDStyleMap;
+export declare const DESKTOP_STYLES: DesktopStyles[];
+export declare const ODD_STYLES: ODDStyles[];
+/**
+ * Resolve the semantic tag from style maps.
+ */
+export declare function resolveStyledTextTag({ desktopStyle, oddStyle, }: {
+    desktopStyle?: DesktopStyles;
+    oddStyle?: ODDStyles;
+}): keyof JSX.IntrinsicElements;
+export declare function resolveStyledTextStyles({ desktopStyle, oddStyle, }: {
+    desktopStyle?: DesktopStyles;
+    oddStyle?: ODDStyles;
+}): {
+    className: string;
+    style?: CSSProperties;
+};
+export {};

package/lib/helix-design-system/product/typography.d.ts

@@ -47,16 +47,16 @@ export declare const lineHeightBodyLargeRegular = "1.5rem";
 export declare const fontFamilyBodyLargeRegular = "Public Sans";
 export declare const fontWeightBodyLargeRegular = "400";
 export declare const fontStyleBodyLargeRegular = "400 1rem/1.5rem Public Sans";
-export declare const fontSizeBodyDefaultSemiBold = "0.875rem";
+export declare const fontSizeBodyDefaultSemiBold = "0.8125rem";
 export declare const lineHeightBodyDefaultSemiBold = "1.25rem";
 export declare const fontFamilyBodyDefaultSemiBold = "Public Sans";
 export declare const fontWeightBodyDefaultSemiBold = "600";
-export declare const fontStyleBodyDefaultSemiBold = "600 0.875rem/1.25rem Public Sans";
-export declare const fontSizeBodyDefaultRegular = "0.875rem";
+export declare const fontStyleBodyDefaultSemiBold = "600 0.8125rem/1.25rem Public Sans";
+export declare const fontSizeBodyDefaultRegular = "0.8125rem";
 export declare const lineHeightBodyDefaultRegular = "1.25rem";
 export declare const fontFamilyBodyDefaultRegular = "Public Sans";
 export declare const fontWeightBodyDefaultRegular = "400";
-export declare const fontStyleBodyDefaultRegular = "400 0.875rem/1.25rem Public Sans";
+export declare const fontStyleBodyDefaultRegular = "400 0.8125rem/1.25rem Public Sans";
 export declare const fontSizeCaptionBold = "0.8125rem";
 export declare const lineHeightCaptionBold = "1rem";
 export declare const fontFamilyCaptionBold = "Public Sans";

package/lib/icons/icon-data.d.ts

@@ -583,6 +583,10 @@ export declare const ICON_DATA_BY_NAME: {
         readonly path: "M14.5 30.8002H17.5V17.9502H14.5V30.8002ZM16 14.6502C16.4817 14.6502 16.8854 14.4873 17.2113 14.1614C17.5371 13.8356 17.7 13.4319 17.7 12.9502C17.7 12.4685 17.5371 12.0648 17.2113 11.7389C16.8854 11.4131 16.4817 11.2502 16 11.2502C15.5183 11.2502 15.1146 11.4131 14.7887 11.7389C14.4629 12.0648 14.3 12.4685 14.3 12.9502C14.3 13.4319 14.4629 13.8356 14.7887 14.1614C15.1146 14.4873 15.5183 14.6502 16 14.6502ZM16 40.9502C11.3333 39.7835 7.5 37.0752 4.5 32.8252C1.5 28.5752 0 23.9169 0 18.8502V6.9502L16 0.950195L32 6.9502V18.8502C32 23.9169 30.5 28.5752 27.5 32.8252C24.5 37.0752 20.6667 39.7835 16 40.9502ZM16 37.8502C19.8333 36.5835 22.9583 34.1919 25.375 30.6752C27.7917 27.1585 29 23.2169 29 18.8502V9.0502L16 4.1502L3 9.0502V18.8502C3 23.2169 4.20833 27.1585 6.625 30.6752C9.04167 34.1919 12.1667 36.5835 16 37.8502Z";
         readonly viewBox: "0 0 32 41";
     };
+    readonly python: {
+        readonly path: "M4 20C3.45 20 2.97917 19.8042 2.5875 19.4125C2.19583 19.0208 2 18.55 2 18V6C2 5.45 2.19583 4.97917 2.5875 4.5875C2.97917 4.19583 3.45 4 4 4H20C20.55 4 21.0208 4.19583 21.4125 4.5875C21.8042 4.97917 22 5.45 22 6V18C22 18.55 21.8042 19.0208 21.4125 19.4125C21.0208 19.8042 20.55 20 20 20H4ZM4 18H20V6H4V18Z M6.75046 15.2V9H9.42532C9.81503 9 10.1605 9.08857 10.4616 9.26571C10.7687 9.44286 11.0107 9.68495 11.1879 9.992C11.3709 10.299 11.4625 10.6445 11.4625 11.0283C11.4625 11.4298 11.3709 11.79 11.1879 12.1089C11.0107 12.4218 10.7687 12.6698 10.4616 12.8529C10.1605 13.0359 9.81503 13.1274 9.42532 13.1274H8.25618V15.2H6.75046ZM8.2296 11.8077H9.21275C9.34265 11.8077 9.46075 11.7752 9.56703 11.7103C9.67332 11.6453 9.75894 11.5568 9.82389 11.4446C9.88884 11.3324 9.92132 11.2025 9.92132 11.0549C9.92132 10.9013 9.88884 10.7714 9.82389 10.6651C9.75894 10.5589 9.67332 10.4762 9.56703 10.4171C9.46075 10.3581 9.34265 10.3286 9.21275 10.3286H8.2296V11.8077ZM14.218 15.2V12.5429L11.7734 9H13.4829L14.9904 11.1306L16.3437 9H18L15.7326 12.4388V15.2H14.218Z";
+        readonly viewBox: "0 0 24 24";
+    };
     readonly help: {
         readonly path: "M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM10 12.6923C10.6212 12.6923 11.125 13.209 11.125 13.8461C11.125 14.4833 10.6212 15 10 15C9.37879 15 8.875 14.4833 8.875 13.8461C8.875 13.209 9.37879 12.6923 10 12.6923ZM7.87898 5.89468C7.34803 6.43507 7.0365 7.15355 7.00316 7.91734L7.00357 7.91741L7.00016 7.99833C6.99832 8.04296 7.0125 8.08204 7.04263 8.11458C7.07248 8.14713 7.10998 8.16393 7.15381 8.16483L8.76193 8.19294C8.84503 8.19433 8.91449 8.12971 8.92063 8.04532L8.92608 7.97112C8.94522 7.70905 9.056 7.46447 9.23848 7.27867C9.44128 7.07227 9.71348 6.95761 10.0003 6.95761C10.2872 6.95761 10.5591 7.07219 10.7621 7.27867C10.9649 7.48515 11.0775 7.76227 11.0775 8.05433C11.0775 8.2529 11.0277 8.4473 10.9274 8.61797C10.827 8.78891 10.6826 8.93028 10.5102 9.02419C10.0639 9.2676 9.69055 9.6194 9.43022 10.0623C9.17009 10.5043 9.03901 11.0044 9.03901 11.5197V11.7636C9.03901 11.8515 9.10935 11.9231 9.19545 11.9231H10.8049C10.891 11.9231 10.9614 11.8515 10.9614 11.7636V11.5197C10.9614 11.3609 10.9952 11.2021 11.076 11.0649C11.1566 10.9274 11.275 10.8209 11.4129 10.7456C11.8917 10.4845 12.2939 10.095 12.5729 9.62072C12.8522 9.1462 13 8.6077 13 8.05433C13 7.24162 12.6856 6.469 12.1213 5.89468C11.5569 5.32017 10.7983 5 10.0001 5C9.20191 5 8.44327 5.32015 7.87898 5.89468Z";
         readonly viewBox: "0 0 20 20";
@@ -731,6 +735,10 @@ export declare const ICON_DATA_BY_NAME: {
         readonly path: "M14.7072 4.64652L14.0001 5.35363L12.8537 4.20722V11.0851C13.3601 11.326 13.7101 11.8424 13.7101 12.4404C13.7101 13.0385 13.3601 13.5548 12.8537 13.7957V20.2931L14.0002 19.1466L14.7073 19.8537L12.3537 22.2073L10.0002 19.8537L10.7073 19.1466L11.8537 20.293V13.8978C11.1973 13.7379 10.7101 13.1461 10.7101 12.4404C10.7101 11.7348 11.1973 11.143 11.8537 10.983V4.20714L10.7072 5.35363L10.0001 4.64652L12.3537 2.29297L14.7072 4.64652ZM5.40956 9.00038L7.23413 9.81951L6.82456 10.7318L5 9.91266L5.40956 9.00038ZM10.4271 11.253L8.60255 10.4339L8.19298 11.3461L10.0175 12.1653L10.4271 11.253ZM14.5324 13.096L16.3569 13.9152L15.9474 14.8274L14.1228 14.0083L14.5324 13.096ZM17.7254 14.5295L19.5499 15.3486L19.1404 16.2609L17.3158 15.4418L17.7254 14.5295ZM17.3159 9.81951L19.1405 9.00038L19.55 9.91266L17.7255 10.7318L17.3159 9.81951ZM15.9475 10.4339L14.1229 11.253L14.5325 12.1653L16.3571 11.3461L15.9475 10.4339ZM8.1931 13.9152L10.0177 13.096L10.4272 14.0083L8.60266 14.8274L8.1931 13.9152ZM5.00012 15.3486L6.82468 14.5295L7.23424 15.4418L5.40968 16.2609L5.00012 15.3486Z";
         readonly viewBox: "0 0 24 24";
     };
+    readonly visualize: {
+        readonly path: "M7.00001 20.3333C6.54168 20.3333 6.14932 20.1701 5.82293 19.8438C5.49654 19.5174 5.33334 19.125 5.33334 18.6667V5.33334C5.33334 4.87501 5.49654 4.48264 5.82293 4.15626C6.14932 3.82987 6.54168 3.66667 7.00001 3.66667H13.6667L18.6667 8.66667V18.6667C18.6667 19.125 18.5035 19.5174 18.1771 19.8438C17.8507 20.1701 17.4583 20.3333 17 20.3333H7.00001ZM12.8333 9.5V5.33334H7.00001V18.6667H17V9.5H12.8333Z M14.3715 12.8995C14.6266 13.0635 14.6266 13.4365 14.3715 13.6005L10.5587 16.0516C10.2814 16.2298 9.91668 16.0307 9.91668 15.7011V10.7989C9.91668 10.4693 10.2814 10.2702 10.5587 10.4484L14.3715 12.8995Z";
+        readonly viewBox: "0 0 24 24";
+    };
     readonly water: {
         readonly path: "M12,20A6,6 0 0,1 6,14C6,10 12,3.25 12,3.25C12,3.25 18,10 18,14A6,6 0 0,1 12,20Z";
         readonly viewBox: "0 0 24 24";