@superblocksteam/library 1.99.99-next.2

package/dist-types/lib/user-facing/components/dropdown/dropdown-component.d.ts

@@ -0,0 +1,106 @@
+import React from "react";
+import { FixedSizeList } from "react-window";
+import type { DropdownProps } from "./props.js";
+import type { DropdownOption } from "./types.js";
+import type { ItemRendererProps, ItemListRendererProps } from "@blueprintjs/select";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { ErrorMessagePlacement } from "@superblocksteam/library-shared/props";
+import type { Padding } from "@superblocksteam/library-shared/types";
+import type { ReactNode } from "react";
+export declare const INPUT_ADDITIONAL_MIN_HEIGHT = 17.7;
+export declare const LABEL_EXTRA_HEIGHT_MARGIN = 4;
+interface DropDownComponentState {
+    activeItemIndex: number | undefined;
+    isFocused: boolean;
+    query?: string;
+    isPopoverOpen: boolean;
+}
+declare class DropDownComponent extends React.PureComponent<DropDownComponentProps, DropDownComponentState> {
+    listRef: React.RefObject<FixedSizeList<any>>;
+    containerRef: React.RefObject<HTMLDivElement>;
+    state: {
+        activeItemIndex: number;
+        isFocused: boolean;
+        query: string;
+        isPopoverOpen: boolean;
+    };
+    componentDidMount: () => void;
+    componentDidUpdate: (prevProps: DropDownComponentProps) => void;
+    getFilteredItems(): any;
+    handleActiveItemChange: (activeItem: DropdownOption | null) => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    handlePopoverOpening: () => void;
+    handlePopoverClose: () => void;
+    handlePopoverClosing: () => void;
+    handleQueryChanged: (newQuery: string, event: any) => void;
+    getIconClassNames: (hasSelection?: boolean) => string;
+    render(): React.JSX.Element;
+    itemListPredicate: (query: string, items: DropdownOption[]) => DropdownOption[];
+    onItemSelect: (item: DropdownOption) => void;
+    onItemRemoved: (_tag: ReactNode, index: number) => void;
+    onClear: () => void;
+    renderTag: (option: DropdownOption) => React.JSX.Element;
+    isOptionSelected: (selectedOption: DropdownOption) => boolean;
+    renderSingleSelectItem: (option: DropdownOption, itemProps: ItemRendererProps) => React.JSX.Element | null;
+    renderMultiSelectItem: (option: DropdownOption, itemProps: ItemRendererProps) => React.JSX.Element | null;
+    handleSelectAll: (clearAll?: boolean) => void;
+    shouldShowSelectAll: () => boolean | undefined;
+    renderMultiSelectAll: () => React.JSX.Element | null;
+    renderDropdown: ({ filteredItems, itemsParentRef, renderItem, query, }: ItemListRendererProps<DropdownOption>) => React.JSX.Element;
+}
+type ComponentBaseProps = Omit<DropdownProps, "onOptionChange" | "onClear" | "onSearchTextChange">;
+export interface BaseDropDownComponentProps extends ComponentBaseProps {
+    vertical?: boolean;
+    disabled?: boolean;
+    query?: string;
+    placeholder?: string;
+    label?: string;
+    labelClassName?: string;
+    labelStyleOverride?: React.CSSProperties;
+    labelWidth?: Dim;
+    inputClassName?: string;
+    inputStyleOverride?: React.CSSProperties;
+    inputLineHeightPx?: number;
+    inputPadding?: Padding;
+    parentId?: string;
+    options: DropdownOption[];
+    isLoading: boolean;
+    isRequired?: boolean;
+    isInvalid?: boolean;
+    validationError?: string;
+    width?: number;
+    clientSideFiltering: boolean;
+    rowAboveOptions?: React.ReactNode;
+    noResultsText?: string;
+    canvasMode?: boolean;
+    fuzzySearch?: boolean;
+    forceOpen?: boolean;
+    portalClassname?: string;
+    icon?: string;
+    overflowTags?: boolean;
+    errorMessagePlacement: ErrorMessagePlacement;
+    isTouched?: boolean;
+    iconSize?: number;
+    allowClearing?: boolean;
+    showError?: boolean;
+    inputHeightPx?: number;
+    onDropdownClosed?: () => void;
+    onFocusChange?: (focusState: boolean) => void;
+    onSearchTextChange?: (searchText: string) => void;
+}
+export interface SingleDropDownComponentProps extends BaseDropDownComponentProps {
+    selectionType: "SINGLE_SELECT";
+    selectedIndex: number;
+    onOptionSelected: (optionSelected: DropdownOption | null) => void;
+}
+export interface MultiselectDropDownComponentProps extends BaseDropDownComponentProps {
+    selectionType: "MULTI_SELECT";
+    selectedIndexArr: number[];
+    allowSelectAll?: boolean;
+    onOptionSelected: (optionSelected: DropdownOption | null) => void;
+    onOptionRemoved: (removedIndex: number) => void;
+    onSelectAll?: (options: DropdownOption[]) => void;
+}
+export type DropDownComponentProps = SingleDropDownComponentProps | MultiselectDropDownComponentProps;
+export default DropDownComponent;

package/dist-types/lib/user-facing/components/dropdown/index.d.ts

@@ -0,0 +1,73 @@
+import React from "react";
+import type { OptionValue } from "./types.js";
+export declare const SbDropdown: React.FC<import("../../properties-panel/props-builder.js").ExternalProps<{
+    general: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        label: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        options: import("../../properties-panel/props-builder.js").Prop<import("./types.js").UnknownOption[], false>;
+        defaultOptionValue: import("../../properties-panel/props-builder.js").Prop<string, false>;
+        transformation: import("../../properties-panel/props-builder.js").Prop<{
+            value: string;
+            label: string;
+            icon?: string;
+        }, false>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        labelPosition: import("../../properties-panel/props-builder.js").Prop<"left" | "top", true>;
+        labelStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
+        icon: import("../../properties-panel/props-builder.js").Prop<string, false>;
+        placeholder: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        textStyle: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").TextStyleWithVariant, true>;
+        loadingAnimation: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        padding: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").Spacing, true>;
+    } & {
+        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    } & {
+        margin: import("../../properties-panel/props-builder.js").Prop<unknown, true>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        collapseWhenInvisible: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+    }>;
+    interaction: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        customValidationRule: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        customErrorMessage: import("../../properties-panel/props-builder.js").Prop<string, true>;
+        isMultiple: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        allowSelectAll: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        allowClearing: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        clientSideFiltering: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        isRequired: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        isDisabled: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        errorMessagePlacement: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        onOptionChange: import("../../properties-panel/props-builder.js").Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+        onSearchTextChange: import("../../properties-panel/props-builder.js").Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+        onClear: import("../../properties-panel/props-builder.js").Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+    meta: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        metaSelectedOptionValue: import("../../properties-panel/props-builder.js").Prop<any, true>;
+        metaSelectedOptionValueArr: import("../../properties-panel/props-builder.js").Prop<any, true>;
+        isTouched: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        searchText: import("../../properties-panel/props-builder.js").Prop<any, false>;
+    }>;
+    derived: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        value: import("../../properties-panel/props-builder.js").Prop<any, true>;
+        defaultTransformation: import("../../properties-panel/props-builder.js").Prop<import("./types.js").DropdownOptionsTransformation, true>;
+        transformedOptions: import("../../properties-panel/props-builder.js").Prop<import("./types.js").TransformedDropdownOption[], true>;
+        validationErrors: import("../../properties-panel/props-builder.js").Prop<any, true>;
+        selectedOptionValue: import("../../properties-panel/props-builder.js").Prop<OptionValue, true>;
+        selectedOptionValues: import("../../properties-panel/props-builder.js").Prop<OptionValue[], true>;
+        selectedOption: import("../../properties-panel/props-builder.js").Prop<import("./types.js").ExternalDropdownOption, true>;
+        selectedOptionArr: import("../../properties-panel/props-builder.js").Prop<import("./types.js").ExternalDropdownOption[], true>;
+        selectedIndex: import("../../properties-panel/props-builder.js").Prop<number, true>;
+        selectedIndexArr: import("../../properties-panel/props-builder.js").Prop<number[], true>;
+        isValid: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        showError: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+    }>;
+}>>;

package/dist-types/lib/user-facing/components/dropdown/multi-dropdown.d.ts

@@ -0,0 +1,18 @@
+import { MultiSelect } from "@blueprintjs/select";
+import React from "react";
+import type { DropdownOption } from "./types.js";
+import type { Padding } from "@superblocksteam/library-shared/types";
+interface StyledMultiDropdownProps {
+    labelHeight: number;
+    width?: number;
+    isValid?: boolean;
+    canvasMode?: boolean;
+    hasIcon?: boolean;
+    inputPadding?: Padding;
+    overflowTags?: boolean;
+    query?: string;
+}
+export declare const MORE_TAGS_VALUE = "__SB_EXTRA_TAGS__";
+declare const BlueprintMultiDropDown: new (props: import("@blueprintjs/select").MultiSelectProps<DropdownOption>) => MultiSelect<DropdownOption>;
+export declare function MultiDropDown({ selectedItems, ...props }: React.ComponentProps<typeof BlueprintMultiDropDown> & StyledMultiDropdownProps): React.JSX.Element | null;
+export {};

package/dist-types/lib/user-facing/components/dropdown/normalize-values.d.ts

@@ -0,0 +1,2 @@
+import type { OptionValue, DropdownOptionsTransformation } from "./types.js";
+export declare const normalizeFunction: (val: OptionValue, transformationValue: DropdownOptionsTransformation["value"] | undefined) => OptionValue;

package/dist-types/lib/user-facing/components/dropdown/props.d.ts

@@ -0,0 +1,76 @@
+import { Section, Prop } from "../../properties-panel/props-builder.js";
+import type { DropdownOptionsTransformation, ExternalDropdownOption, OptionValue, TransformedDropdownOption, UnknownOption } from "./types.js";
+import type { InternalProps } from "../../properties-panel/props-builder.js";
+import type { TextStyleWithVariant } from "@superblocksteam/library-shared/types";
+export declare const propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any>> & {
+        label: Prop<string, true>;
+        options: Prop<UnknownOption[], false>;
+        defaultOptionValue: Prop<string, false>;
+        transformation: Prop<{
+            value: string;
+            label: string;
+            icon?: string;
+        }, false>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any>> & {
+        labelPosition: Prop<"left" | "top", true>;
+        labelStyle: Prop<TextStyleWithVariant, true>;
+        icon: Prop<string, false>;
+        placeholder: Prop<string, true>;
+        textStyle: Prop<TextStyleWithVariant, true>;
+        loadingAnimation: Prop<boolean, false>;
+    }>;
+    layout: Section<Record<string, Prop<any, any>> & {
+        padding: Prop<import("@superblocksteam/library-shared/types").Spacing, true>;
+    } & {
+        maxHeight?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minHeight?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        maxWidth?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minWidth?: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        width: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+        height: Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    } & {
+        margin: Prop<unknown, true>;
+    } & {
+        isVisible: Prop<boolean, true>;
+        collapseWhenInvisible: Prop<boolean, false>;
+    }>;
+    interaction: Section<Record<string, Prop<any, any>> & {
+        customValidationRule: Prop<string, true>;
+        customErrorMessage: Prop<string, true>;
+        isMultiple: Prop<boolean, true>;
+        allowSelectAll: Prop<boolean, true>;
+        allowClearing: Prop<boolean, true>;
+        clientSideFiltering: Prop<boolean, true>;
+        isRequired: Prop<boolean, true>;
+        isDisabled: Prop<boolean, true>;
+        errorMessagePlacement: Prop<import("@superblocksteam/library-shared/props").ErrorMessagePlacement, true>;
+    }>;
+    events: Section<Record<string, Prop<any, any>> & {
+        onOptionChange: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+        onSearchTextChange: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+        onClear: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+    meta: Section<Record<string, Prop<any, any>> & {
+        metaSelectedOptionValue: Prop<any, true>;
+        metaSelectedOptionValueArr: Prop<any, true>;
+        isTouched: Prop<boolean, true>;
+        searchText: Prop<any, false>;
+    }>;
+    derived: Section<Record<string, Prop<any, any>> & {
+        value: Prop<any, true>;
+        defaultTransformation: Prop<DropdownOptionsTransformation, true>;
+        transformedOptions: Prop<TransformedDropdownOption[], true>;
+        validationErrors: Prop<any, true>;
+        selectedOptionValue: Prop<OptionValue, true>;
+        selectedOptionValues: Prop<OptionValue[], true>;
+        selectedOption: Prop<ExternalDropdownOption, true>;
+        selectedOptionArr: Prop<ExternalDropdownOption[], true>;
+        selectedIndex: Prop<number, true>;
+        selectedIndexArr: Prop<number[], true>;
+        isValid: Prop<boolean, true>;
+        showError: Prop<boolean, true>;
+    }>;
+};
+export type DropdownProps = InternalProps<typeof propertiesDefinition>;

package/dist-types/lib/user-facing/components/dropdown/types.d.ts

@@ -0,0 +1,89 @@
+import type { MultiStepDef } from "../../../sb-trigger.js";
+import type { Intent } from "@blueprintjs/core";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { TextStyleWithVariant } from "@superblocksteam/library-shared/types";
+import type { ApplicationScope, Padding, PerSideBorder } from "@superblocksteam/shared";
+export type ExternalDropdownOption = {
+    label: string;
+    value: string;
+};
+export type UnknownOption = string | Record<string, unknown> | ExternalDropdownOption;
+export type TransformedDropdownOption = ExternalDropdownOption & {
+    normalizedValue: string;
+};
+export interface DropdownOption {
+    label: string;
+    value: string;
+    normalizedValue?: string;
+    icon?: string;
+    subText?: string;
+    id?: string;
+    onSelect?: (option: DropdownOption) => void;
+    children?: DropdownOption[];
+    intent?: Intent;
+    disabled?: boolean;
+    isValid?: boolean;
+    scope?: ApplicationScope;
+    hiddenLabels?: string[];
+}
+export interface DropdownOptionsTransformation {
+    label: string;
+    value: string;
+    icon?: string;
+}
+export type OptionValue = string | number | object;
+interface DropdownComponentOption extends Omit<DropdownOption, "normalizedValue"> {
+    normalizedValue: string;
+}
+export interface DropdownComponentProps extends BaseProps {
+    transformedOptions?: DropdownComponentOption[];
+    placeholderText?: string;
+    selectedIndex?: number;
+    selectedIndexArr?: number[];
+    selectedOption: DropdownComponentOption;
+    selectedOptionValue: OptionValue;
+    selectedOptionValues: OptionValue[];
+    isValid?: boolean;
+    validationErrors?: Record<string, string>;
+    metaSelectedOptionValue: OptionValue;
+    metaSelectedOptionValueArr: OptionValue[];
+    customErrorMessage?: string;
+    customValidationRule?: string;
+    isTouched?: boolean;
+    showError?: boolean;
+}
+export interface DropdownComponentState {
+    selectedIndexArr?: number[];
+}
+export interface BaseProps {
+    defaultOptionValue?: string | string[];
+    isMultiple?: boolean;
+    isRequired?: boolean;
+    clientSideFiltering?: boolean;
+    isVertical?: boolean;
+    label?: string;
+    onOptionChange?: MultiStepDef;
+    onClear?: MultiStepDef;
+    onSearchTextChange?: MultiStepDef;
+    options: string;
+    placeholderText?: string;
+    allowClearing?: boolean;
+    allowSelectAll?: boolean;
+    transformation?: DropdownOptionsTransformation;
+    icon?: string;
+    labelProps?: {
+        textStyle: TextStyleWithVariant;
+        width?: Dim;
+    };
+    inputProps?: {
+        textStyle: TextStyleWithVariant;
+        padding?: Padding;
+    };
+    isDisabled?: boolean;
+    isVisible?: boolean;
+    backgroundColor?: string;
+    borderColor?: string;
+    border?: PerSideBorder;
+    dataTest?: string;
+}
+export {};

package/dist-types/lib/user-facing/components/dropdown/utils.d.ts

@@ -0,0 +1,8 @@
+import type { Padding } from "@superblocksteam/library-shared/types";
+export declare function getTagElementSpace(element: HTMLElement): number;
+export declare const createCssVariablesForPadding: import("memoize-one").MemoizedFn<(hasIcon: boolean, inputPadding?: Padding, iconSize?: number) => {
+    [key: `--${string}`]: string;
+}>;
+export declare const getClearableIconRight: import("memoize-one").MemoizedFn<(allowClearing: boolean, inputPadding?: Padding, iconSize?: number) => number | undefined>;
+export declare const getInputPaddingFactorForVerticalCenter: (inputPadding?: Padding) => number;
+export declare const getCaretCorrectionForVerticalCenter: (vertical?: boolean, inlineError?: boolean) => 1 | -1 | 0;

package/dist-types/lib/user-facing/components/grid/calculations/calculate-constraints.d.ts

@@ -0,0 +1,26 @@
+export type InputItem = {
+    name: string;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+};
+export type OutputItem = {
+    name: string;
+    constraintTop: string[];
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+};
+declare const calculateConstraints: (items: InputItem[]) => OutputItem[];
+/**
+ * takes an array of `Widget` objects and creates a map where each
+ * `Widget` is mapped to a set of `Widget` objects that are directly above it, removing any indirect
+ * relationships.
+ * @param {InputItem[]} widgets - An array of Widget objects.
+ * @returns The function `createAboveMap` returns an object that maps widget IDs to an array of widgets
+ * that are directly above them.
+ */
+export declare function createAboveMap(widgets_: InputItem[]): Map<string, InputItem[]>;
+export default calculateConstraints;

package/dist-types/lib/user-facing/components/grid/calculations/calculate-row-positions.d.ts

@@ -0,0 +1,2 @@
+import type { GridChild } from "..";
+export declare const calculateRowPositions: (orderedNames: string[], childrenArray: GridChild[], rowHeight: number, pxHeights: Record<string, number>) => Record<string, number>;

package/dist-types/lib/user-facing/components/grid/calculations/order-constraints.d.ts

@@ -0,0 +1,2 @@
+import type { GridChild } from "..";
+export declare const orderConstraints: (children: GridChild[]) => string[];

package/dist-types/lib/user-facing/components/grid/index.d.ts

@@ -0,0 +1,36 @@
+import { Dim } from "@superblocksteam/library-shared";
+import React from "react";
+import { Prop, Section } from "../../properties-panel/props-builder.js";
+import type { InternalProps } from "../../properties-panel/props-builder.js";
+export type GridChild = React.ReactElement<{
+    name: string;
+    marginTop?: Dim<"rows">;
+    marginLeft?: Dim<"columns">;
+    width?: Dim<"columns">;
+    height?: Dim<"rows" | "fit">;
+    constraintTop?: string | [string];
+}>;
+declare const _propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any>> & {
+        spacing: Prop<Dim<"px">, true>;
+        columns: Prop<number, false>;
+        rows: Prop<number, false>;
+        rowSize: Prop<number, false>;
+    }>;
+    layout: Section<Record<string, Prop<any, any>> & {
+        maxHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        maxWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        width: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+        height: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    } & {
+        margin: Prop<unknown, true>;
+    } & {
+        isVisible: Prop<boolean, true>;
+        collapseWhenInvisible: Prop<boolean, false>;
+    }>;
+};
+export type GridProps = InternalProps<typeof _propertiesDefinition>;
+export declare const InternalGrid: ({ children, ...props }: GridProps) => React.JSX.Element;
+export {};

package/dist-types/lib/user-facing/components/grid/use-height-observer.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export declare const useHeightObserver: () => {
+    ref: React.RefObject<HTMLDivElement>;
+    height: number;
+};

package/dist-types/lib/user-facing/components/grid/utils.d.ts

@@ -0,0 +1 @@
+export declare const getChildName: (child: any) => string;

package/dist-types/lib/user-facing/components/icon/index.d.ts

@@ -0,0 +1,22 @@
+export declare const SbIcon: import("react").FC<import("../../properties-panel/props-builder.js").ExternalProps<{
+    general: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        icon: import("../../properties-panel/props-builder.js").Prop<string, true>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        size: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, true>;
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, true>;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, true>;
+    } & {
+        margin: import("../../properties-panel/props-builder.js").Prop<unknown, true>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        collapseWhenInvisible: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        color: import("../../properties-panel/props-builder.js").Prop<string, false>;
+        animateLoading: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        onClick: import("../../properties-panel/props-builder.js").Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+}>>;

package/dist-types/lib/user-facing/components/icon/props.d.ts

@@ -0,0 +1,24 @@
+import { Dim } from "@superblocksteam/library-shared";
+import { Section, Prop } from "../../properties-panel/props-builder.js";
+export declare const propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any>> & {
+        icon: Prop<string, true>;
+    }>;
+    layout: Section<Record<string, Prop<any, any>> & {
+        size: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, true>;
+        width: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, true>;
+        height: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, true>;
+    } & {
+        margin: Prop<unknown, true>;
+    } & {
+        isVisible: Prop<boolean, true>;
+        collapseWhenInvisible: Prop<boolean, false>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any>> & {
+        color: Prop<string, false>;
+        animateLoading: Prop<boolean, true>;
+    }>;
+    events: Section<Record<string, Prop<any, any>> & {
+        onClick: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+};

package/dist-types/lib/user-facing/components/image/image-component.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import type { ImageAlign } from "./props.js";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { DimModes } from "@superblocksteam/library-shared";
+import type { PerCornerBorderRadius, PerSideBorder } from "@superblocksteam/library-shared/types";
+declare class ImageComponent extends React.Component<ImageComponentProps, {
+    imageError: boolean;
+    imageHeight?: number;
+}> {
+    private imageRef;
+    private resizeObserver;
+    constructor(props: ImageComponentProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: ImageComponentProps): void;
+    componentWillUnmount(): void;
+    observeContainer(): void;
+    disconnectObserver(): void;
+    handleResize: ResizeObserverCallback;
+    render(): React.JSX.Element;
+    onImageError: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onImageLoad: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+}
+interface ImageComponentProps {
+    imageUrl: string;
+    defaultImageUrl: string;
+    isLoading: boolean;
+    align?: ImageAlign;
+    borderRadius: PerCornerBorderRadius;
+    fillContainer: boolean;
+    height?: Dim<DimModes>;
+    width?: Dim<DimModes>;
+    roundHeightToGrid: boolean;
+    border?: PerSideBorder;
+    backgroundColor: string;
+    name?: string;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+}
+export default ImageComponent;

package/dist-types/lib/user-facing/components/image/index.d.ts

@@ -0,0 +1,29 @@
+export declare const SbImage: import("react").FC<import("../../properties-panel/props-builder.js").ExternalProps<{
+    general: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        src: import("../../properties-panel/props-builder.js").Prop<string, false>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        backgroundColor: import("../../properties-panel/props-builder.js").Prop<string, false>;
+        border: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true>;
+        borderRadius: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true>;
+        fillContainer: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        align: import("../../properties-panel/props-builder.js").Prop<import("./props.js").ImageAlign, true>;
+        animateLoading: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false> | undefined;
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false>;
+    } & {
+        margin: import("../../properties-panel/props-builder.js").Prop<unknown, true>;
+    } & {
+        isVisible: import("../../properties-panel/props-builder.js").Prop<boolean, true>;
+        collapseWhenInvisible: import("../../properties-panel/props-builder.js").Prop<boolean, false>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any>> & {
+        onClick: import("../../properties-panel/props-builder.js").Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+}>>;

package/dist-types/lib/user-facing/components/image/props.d.ts

@@ -0,0 +1,39 @@
+import { Dim } from "@superblocksteam/library-shared";
+import { Section } from "../../properties-panel/props-builder.js";
+import { Prop } from "../../properties-panel/props-builder.js";
+import type { DimModes } from "@superblocksteam/library-shared";
+export type ImageAlign = "left" | "center" | "right";
+export declare const borderDef: () => import("../../properties-panel/props-builder.js").CompositeProp<{
+    color: Prop<string, false>;
+    width: Prop<Dim<DimModes>, false>;
+    style: Prop<string, false>;
+}>;
+export declare const propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any>> & {
+        src: Prop<string, false>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any>> & {
+        backgroundColor: Prop<string, false>;
+        border: Prop<import("@superblocksteam/library-shared/types").PerSideBorder, true>;
+        borderRadius: Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, true>;
+        fillContainer: Prop<boolean, true>;
+        align: Prop<ImageAlign, true>;
+        animateLoading: Prop<boolean, false>;
+    }>;
+    layout: Section<Record<string, Prop<any, any>> & {
+        maxHeight?: Prop<Dim<DimModes>, false> | undefined;
+        minHeight?: Prop<Dim<DimModes>, false> | undefined;
+        maxWidth?: Prop<Dim<DimModes>, false> | undefined;
+        minWidth?: Prop<Dim<DimModes>, false> | undefined;
+        width: Prop<Dim<DimModes>, false>;
+        height: Prop<Dim<DimModes>, false>;
+    } & {
+        margin: Prop<unknown, true>;
+    } & {
+        isVisible: Prop<boolean, true>;
+        collapseWhenInvisible: Prop<boolean, false>;
+    }>;
+    events: Section<Record<string, Prop<any, any>> & {
+        onClick: Prop<import("../../sb-event-flow.js").SbEventFlow, false>;
+    }>;
+};