@superblocksteam/library 2.0.33 → 2.0.34-next.1

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

@@ -0,0 +1,45 @@
+import type { InputTypes, CurrencyCodeDisplayTypes } from "./constants.js";
+import type { propertiesDefinition } from "./props.js";
+import type { InternalProps } from "../../properties-panel/props-builder.js";
+import type { IconName, Intent } from "@blueprintjs/core";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { Padding, PerSideBorder, PerCornerBorderRadius } from "@superblocksteam/library-shared/types";
+export type InputWidgetProps = InternalProps<typeof propertiesDefinition>;
+export interface InputGroupStylingProps {
+    border?: PerSideBorder;
+    fallbackBorderColor: string;
+    borderRadius?: PerCornerBorderRadius;
+    fallbackBorderRadius: Dim<"px" | "%">;
+    borderColorOnHover: string;
+    defaultBorderWidth: Dim<"px">;
+    padding?: Padding;
+}
+export type InputComponentProps = Pick<InputWidgetProps, "inputType" | "numberFormatting" | "isDisabled" | "backgroundColor" | "border" | "labelWidth" | "label" | "stepper" | "stepSize" | "onSubmit" | "isTouched" | "onFocusOut" | "onFocus" | "isValid" | "minimumFractionDigits" | "maximumFractionDigits" | "preventFormattingWhileTyping" | "defaultValue" | "isInvalid" | "isLoading" | "icon" | "iconPosition" | "currency" | "currencyCodeDisplay" | "minLength" | "maxLength" | "errorMessagePlacement" | "showError" | "isFocused" | "required"> & {
+    placeholder: string;
+    value: string;
+    inputGroupStylingProps: InputGroupStylingProps;
+    disableDebounce?: boolean;
+    autoFocus?: boolean;
+    widgetType: string;
+    disableNewLineOnPressEnterKey?: boolean;
+    inputClassName?: string;
+    showStepper?: boolean;
+    inputStyleOverride?: React.CSSProperties;
+    iconTop?: number;
+    vertical?: boolean;
+    iconSize?: number;
+    errorMessages?: string[];
+    labelClassName: string;
+    labelStyleOverride?: React.CSSProperties;
+    intent?: Intent;
+    leftIcon?: IconName;
+    sourceId: string;
+    growVertically?: boolean;
+    numLines?: number;
+    labelRef?: React.RefObject<HTMLLabelElement>;
+    onValueChange: (value: string) => void;
+    onFocusChange: (focusState: boolean) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>) => void;
+};
+export type InputType = (typeof InputTypes)[keyof typeof InputTypes];
+export type CurrencyCodeDisplayType = (typeof CurrencyCodeDisplayTypes)[keyof typeof CurrencyCodeDisplayTypes];

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

@@ -0,0 +1,15 @@
+import type { InputGroupStylingProps, InputType, InputWidgetProps } from "./types.js";
+import type { TextStyleWithVariant } from "@superblocksteam/library-shared/types";
+export declare const useStyles: (props: InputWidgetProps, text: string) => any;
+export declare const useLabelClassName: ({ labelStyle, isLoading, isDisabled, }: InputWidgetProps) => string;
+export declare const isNumericInput: (inputType: InputType) => boolean;
+export declare const useInputClassNames: ({ isInvalid, isDisabled, isLoading, inputType, textStyle, withStyledBorders, }: Pick<InputWidgetProps, "isInvalid" | "isDisabled" | "isLoading" | "inputType" | "textStyle"> & {
+    withStyledBorders?: boolean;
+}) => string;
+export declare const sanitizeNumericInputValue: (value: number | string, isPercentInput: boolean) => string;
+export declare const useIconTop: ({ border, padding, iconHeight, inputHeight, }: Pick<InputWidgetProps, "border" | "padding" | "iconHeight" | "inputHeight">) => number;
+export declare const useInputIconSize: ({ textStyle, }: {
+    textStyle?: TextStyleWithVariant;
+}) => number;
+export declare const useInputGroupStylingProps: (props: InputWidgetProps) => InputGroupStylingProps;
+export declare const useConditionalProps: (props: InputWidgetProps) => Partial<InputWidgetProps>;

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

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

package/dist-types/lib/user-facing/components/key-value/components/key-styles.d.ts

@@ -0,0 +1,3 @@
+import type { KeyValueComponentProps } from "../types.js";
+export declare const PropertyKeyWrapperClass: string;
+export declare const useKeyClassNames: (keyProps?: KeyValueComponentProps["keyProps"]) => string;

package/dist-types/lib/user-facing/components/key-value/components/property-key.d.ts

@@ -0,0 +1,7 @@
+import type { KeyValueComponentProps, KeyValueProperty } from "../types.js";
+export declare const KeyValuePropertyKey: ({ property, style, keyProps, iconSize, }: {
+    property: KeyValueProperty;
+    style?: React.CSSProperties;
+    keyProps?: KeyValueComponentProps["keyProps"];
+    iconSize?: number;
+}) => import("react").JSX.Element;

package/dist-types/lib/user-facing/components/key-value/components/property-value.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { TypographyProps } from "../../../themes/typeography/use-typography-styling.js";
+import type { KeyValueComponentProps, KeyValueProperty } from "../types.js";
+import type { UserAccessibleTheme } from "@superblocksteam/library-shared/types";
+export declare const KeyValuePropertyValue: (props: {
+    property: KeyValueProperty;
+    data: Record<string, unknown>;
+    iconSize?: number;
+    valueStyles?: TypographyProps;
+    linkStyles?: TypographyProps;
+    theme: UserAccessibleTheme;
+} & Pick<KeyValueComponentProps, "valueProps" | "width" | "height">) => React.JSX.Element;

package/dist-types/lib/user-facing/components/key-value/components/value-styles.d.ts

@@ -0,0 +1,6 @@
+import type { KeyValueComponentProps } from "../types.js";
+export declare const ValueContentWrapperClass: string;
+export declare const ValueWrapperClass: string;
+export declare const ImageWrapperClass: string;
+export declare const TagCellWrapperClass: string;
+export declare const useValueClassNames: (valueProps: KeyValueComponentProps["valueProps"]) => string;

package/dist-types/lib/user-facing/components/key-value/constants.d.ts

@@ -0,0 +1,7 @@
+import { KeyValuePropertyType } from "./types.js";
+import type { PerSideBorder } from "@superblocksteam/shared";
+export declare const KEY_VALUE_WIDGET_PROPERTY_TYPES: {
+    label: string;
+    value: KeyValuePropertyType;
+}[];
+export declare const DEFAULT_BORDER_OBJECT: PerSideBorder;

package/dist-types/lib/user-facing/components/key-value/derived-properties.d.ts

@@ -0,0 +1 @@
+export declare function getData(props: any): Record<string, unknown>;

package/dist-types/lib/user-facing/components/key-value/editor.d.ts

@@ -0,0 +1,3 @@
+import type { propertiesDefinition } from "./props.js";
+import type { EditorTemplate } from "../../../internal-details/sb-wrapper.jsx";
+export declare const editorTemplate: EditorTemplate<typeof propertiesDefinition>;

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

@@ -0,0 +1,6 @@
+/**
+ * TODO:
+ * Add possibility to add arguments to component inputs
+ * Add default values based on current property values
+ */
+export {};

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

@@ -0,0 +1,2 @@
+import type { KeyValueComponentProps } from "./types.js";
+export declare const KeyValueComponent: (props: KeyValueComponentProps) => import("react").JSX.Element;

package/dist-types/lib/user-facing/components/key-value/properties-props.d.ts

@@ -0,0 +1,45 @@
+import { Prop, Section } from "../../properties-panel/props-builder.js";
+import { KeyValuePropertyType } from "./types.js";
+import type { IconPosition } from "../../icons/constants.js";
+import type { UnionVariant } from "../../properties-panel/props-builder.js";
+export declare const keyValuePropertiesDefinition: {
+    general: Section<((((Record<string, Prop<any, any, undefined>> & ({
+        id: Prop<string, true, undefined>;
+    } & (Omit<{
+        isDerived: Prop<boolean, true, undefined>;
+    }, "key" | "isDerived"> & ({
+        isDerived: Prop<true, true, undefined>;
+        key: Prop<string, true, undefined>;
+    } | {
+        isDerived: Prop<false, true, undefined>;
+        key: Prop<string, true, undefined>;
+    })))) & {
+        displayedKey: Prop<string, true, undefined>;
+    }) & Omit<{
+        isDerived: Prop<boolean, true, undefined>;
+    }, "isDerived" | "computedValue"> & {
+        isDerived: Prop<true, true, undefined>;
+        computedValue: Prop<string, true, undefined>;
+    }) & Omit<{
+        type: Prop<KeyValuePropertyType, true, undefined>;
+    }, "type"> & UnionVariant<{
+        type: Prop<KeyValuePropertyType, false>;
+    }>) & {
+        isVisible: Prop<boolean, true, undefined>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any, undefined>> & {
+        "keyProps.icon": Prop<string, true, undefined>;
+        "keyProps.iconPosition": Prop<IconPosition, true, undefined>;
+        "valueProps.icon": Prop<string, true, undefined>;
+        "valueProps.iconPosition": Prop<IconPosition, true, undefined>;
+    } & Omit<{
+        type: Prop<KeyValuePropertyType, false, undefined>;
+    }, "type"> & UnionVariant<{
+        type: Prop<KeyValuePropertyType, false>;
+    }>>;
+    eventHandlers: Section<Record<string, Prop<any, any, undefined>> & Omit<{
+        type: Prop<KeyValuePropertyType, false, undefined>;
+    }, "type"> & UnionVariant<{
+        type: Prop<KeyValuePropertyType, false>;
+    }>>;
+};

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

@@ -0,0 +1,38 @@
+import { Dim } from "@superblocksteam/library-shared";
+import { Prop } from "../../properties-panel/props-builder.js";
+import { Section } from "../../properties-panel/props-builder.js";
+import type { KeyValueProperty } from "./types.js";
+export declare const propertiesDefinition: {
+    general: Section<Record<string, Prop<any, any, undefined>> & {
+        sourceData: Prop<Record<string, unknown>, false, undefined>;
+        properties: Prop<Record<string, KeyValueProperty>, true>;
+        propertiesOrder: Prop<string[], true, undefined>;
+    }>;
+    appearance: Section<Record<string, Prop<any, any, undefined>> & {
+        "keyProps.position": Prop<"left" | "top", true, undefined>;
+        "keyProps.keyStyle": Prop<any, false, undefined>;
+        "keyProps.textWrap": Prop<boolean, true, undefined>;
+        "valueProps.valueStyle": Prop<any, false, undefined>;
+        "valueProps.textWrap": Prop<boolean, true, undefined>;
+        "styleProps.backgroundColor": Prop<string, false, undefined>;
+        "styleProps.border": Prop<any, false, undefined>;
+        "styleProps.borderRadius": Prop<any, false, undefined>;
+        "styleProps.divider": Prop<any, true, undefined>;
+        loading: Prop<boolean, true, undefined>;
+    }>;
+    layout: Section<Record<string, Prop<any, any, undefined>> & {
+        isVisible: Prop<boolean, true, undefined>;
+        keyProps: Prop<any, true, undefined>;
+        "keyProps.width": Prop<any, false, undefined>;
+        "valueProps.position": Prop<"left" | "right", true, undefined>;
+        maxHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        width: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+        height: Prop<Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+    }>;
+    derived: Section<Record<string, Prop<any, any, undefined>> & {
+        data: Prop<Record<string, unknown>, true, undefined>;
+    }>;
+};

package/dist-types/lib/user-facing/components/key-value/styles.d.ts

@@ -0,0 +1,22 @@
+import { Dim } from "@superblocksteam/library-shared";
+import type { KeyValueComponentProps } from "./types.js";
+import type { DimModes } from "@superblocksteam/library-shared";
+import type { UserAccessibleTheme } from "@superblocksteam/library-shared/types";
+import type { Typographies } from "@superblocksteam/library-shared/types";
+import type React from "react";
+export declare const DEFAULT_KEY_VALUE_WIDGET_KEY_STYLE_VARIANT: keyof Typographies;
+export declare const DEFAULT_KEY_VALUE_WIDGET_VALUE_STYLE_VARIANT: keyof Typographies;
+export declare const createCssVariables: ({ theme, styleProps, keyWidth, }: {
+    theme: UserAccessibleTheme;
+    styleProps: KeyValueComponentProps["styleProps"];
+    keyWidth?: Dim<DimModes>;
+}) => React.CSSProperties & {
+    [key: `--${string}`]: string;
+};
+export declare const CanvasSpacingClass: string;
+export declare const KeyValueComponentClass: string;
+export declare const KeyValueEntryClass: string;
+export declare const useLabelStyles: (keyProps: KeyValueComponentProps["keyProps"], theme: UserAccessibleTheme) => import("../../themes/typeography/use-typography-styling.js").TypographyProps;
+export declare const useInputStyles: (valueProps: KeyValueComponentProps["valueProps"], theme: UserAccessibleTheme) => import("../../themes/typeography/use-typography-styling.js").TypographyProps;
+export declare const useLinkStyles: (valueProps: KeyValueComponentProps["valueProps"], theme: UserAccessibleTheme) => import("../../themes/typeography/use-typography-styling.js").TypographyProps;
+export declare const useEntryClassNames: (keyProps: KeyValueComponentProps["keyProps"]) => string;

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

@@ -0,0 +1,106 @@
+import type { IconPosition } from "../../icons/constants.js";
+import type { ButtonVariant } from "../button/props.js";
+import type { TagDisplayConfig } from "../table/types.js";
+import type { ImageSize } from "../table/types.js";
+import type { Dim } from "@superblocksteam/library-shared";
+import type { DimModes } from "@superblocksteam/library-shared";
+import type { WidgetLabelPosition } from "@superblocksteam/library-shared/props";
+import type { TextStyleWithVariant, UserAccessibleTheme } from "@superblocksteam/library-shared/types";
+import type { ColoredDimensionStyle, Padding, PerCornerBorderRadius, PerSideBorder } from "@superblocksteam/library-shared/types";
+type BaseProperty = {
+    id: string;
+    key: string;
+    displayedKey?: string;
+    type: string;
+    displayedValue?: unknown;
+    isVisible: boolean;
+    keyProps?: {
+        icon?: string;
+        iconPosition?: IconPosition;
+    };
+    valueProps?: {
+        icon?: string;
+        iconPosition?: IconPosition;
+    };
+    typeSpecificProps?: {
+        buttonLabel?: string;
+        isDisabled?: boolean;
+        buttonStyle?: ButtonVariant;
+        buttonLabelColor?: string;
+        onClick?: () => Promise<void>;
+        buttonBorderColor?: string;
+        buttonBackgroundColor?: string;
+        currency?: string;
+        notation?: Intl.NumberFormatOptions["notation"] | "unformatted";
+        minimumFractionDigits?: number;
+        maximumFractionDigits?: number;
+        linkLabel?: string;
+        openInNewTab?: boolean;
+        openImageUrl?: boolean;
+        imageSize?: ImageSize;
+        imageBorderRadius?: Dim<DimModes>;
+        dateInputFormat?: string;
+        dateOutputFormat?: string;
+        manageTimezone?: boolean;
+        timezone?: string;
+        displayTimezone?: string;
+        textWrap?: boolean;
+        tagDisplayConfig?: Record<string, TagDisplayConfig>;
+        booleanStyleFalse?: string;
+    };
+};
+type DerivedProperty = BaseProperty & {
+    computedValue: unknown;
+    isDerived: true;
+};
+type PrimaryProperty = BaseProperty & {
+    isDerived: false;
+};
+export type KeyValueProperty = PrimaryProperty | DerivedProperty;
+interface StyleProps {
+    border?: PerSideBorder;
+    borderRadius?: PerCornerBorderRadius;
+    backgroundColor?: string;
+    padding?: Padding;
+    spacing: Dim<DimModes>;
+    divider?: ColoredDimensionStyle;
+}
+export declare enum KeyValuePropertyType {
+    TEXT = "text",
+    NUMBER = "number",
+    CURRENCY = "currency",
+    PERCENTAGE = "percentage",
+    IMAGE = "image",
+    VIDEO = "video",
+    DATE = "date",
+    BUTTON = "button",
+    LINK = "link",
+    BOOLEAN = "boolean",
+    TAGS = "tags",
+    EMAIL = "email"
+}
+export interface KeyValueComponentProps {
+    theme: UserAccessibleTheme;
+    widgetId: string;
+    properties: Record<string, KeyValueProperty>;
+    cachedProperties?: Record<string, KeyValueProperty>;
+    propertiesOrder: string[];
+    isVisible?: boolean;
+    styleProps: StyleProps;
+    keyProps?: {
+        textStyle?: TextStyleWithVariant;
+        position?: WidgetLabelPosition;
+        width?: Dim<DimModes>;
+        textWrap?: boolean;
+    };
+    valueProps?: {
+        textStyle?: TextStyleWithVariant;
+        position?: WidgetLabelPosition;
+        textWrap?: boolean;
+    };
+    width?: Dim<DimModes>;
+    height?: Dim<DimModes>;
+    isLoading?: boolean;
+    sourceData?: Record<string, unknown>;
+}
+export {};

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

@@ -0,0 +1,11 @@
+import type { KeyValueProperty } from "./types.js";
+import type { TagsColorAssignment } from "../table/types.js";
+export declare const getStringValue: (text: unknown) => undefined | string;
+export declare const toNumericValue: (text: string) => string | number;
+export declare const getValueByType: (property: KeyValueProperty, data: Record<string, unknown>) => string | boolean;
+export declare const toReadableKey: (key: string) => string;
+export declare const getProperties: (data: Record<string, unknown>, currentProperties?: Record<string, KeyValueProperty>, cachedProperties?: Record<string, KeyValueProperty>) => Record<string, KeyValueProperty>;
+export declare const getPropertiesOrder: (properties: Record<string, KeyValueProperty>, propertiesOrder: string[]) => string[];
+export declare const getDefaultProperty: (key: string) => KeyValueProperty;
+export declare const isDefaultProperty: (property: KeyValueProperty) => boolean;
+export declare const getTagsColorAssignment: (tagValues: string[]) => TagsColorAssignment;

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

@@ -0,0 +1,8 @@
+export type ModalSize = "EXTRA_SMALL" | "SMALL" | "MEDIUM" | "LARGE" | "FULLSCREEN";
+export declare const MODAL_COLUMNS = 96;
+export declare const MODAL_ROW_HEIGHT = 12;
+export declare const MODAL_PERIMETER_GAP = 16;
+export declare const MODAL_LEGACY_COLUMNS = 40;
+export declare const MODAL_BORDER_RADIUS = 4;
+export declare const MODAL_WIDTH_PRESETS: Record<ModalSize, number>;
+export declare const MODAL_ROWS_PRESETS: Record<ModalSize, number>;

package/dist-types/lib/user-facing/components/modal/editor-config.d.ts

@@ -0,0 +1,2 @@
+import type { EditorConfig } from "@superblocksteam/library-shared/types";
+export declare const editorConfig: EditorConfig;

package/dist-types/lib/user-facing/components/modal/editor-template.d.ts

@@ -0,0 +1,3 @@
+import type { propertiesDefinition } from "./props.js";
+import type { EditorTemplate } from "../../../internal-details/sb-wrapper.jsx";
+export declare const editorTemplate: EditorTemplate<typeof propertiesDefinition>;

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

@@ -0,0 +1,85 @@
+import { Dim } from "@superblocksteam/library-shared";
+import type { ContainerLayout } from "../../component-base/constants.js";
+export declare const Modal: import("../../../internal-details/sb-wrapper.jsx").ChainableComponent<{
+    contents: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        children: import("../../properties-panel/props-builder.js").Prop<any, false, undefined>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & ((Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<ContainerLayout, true, undefined>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "space-around" | "space-between" | "bottom" | "top", true, undefined>;
+        readonly horizontalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "left" | "right", true, undefined>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"vertical", true, undefined>;
+    }) | (Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<ContainerLayout, true, undefined>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "bottom" | "top", true, undefined>;
+        readonly horizontalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "space-around" | "space-between" | "left" | "right", true, undefined>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"horizontal", true, undefined>;
+    }) | (Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<ContainerLayout, true, undefined>;
+    }, "columns" | "layout" | "rowHeight"> & {
+        readonly columns: import("../../properties-panel/props-builder.js").Prop<number, true, undefined>;
+        readonly rowHeight: import("../../properties-panel/props-builder.js").Prop<Dim<"px">, true, undefined>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"freeform", true, undefined>;
+    }))>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        backgroundColor: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        border: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerSideBorder, false, undefined>;
+        borderRadius: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, false, undefined>;
+        hasBackdrop: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        widthPreset: import("../../properties-panel/props-builder.js").Prop<import("./constants.js").ModalSize, true, undefined>;
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    interaction: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        closeOnClickOutside: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onOpen: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onClose: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+    meta: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        isOpen: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+}, import("../../properties-panel/props-builder.js").ExternalProps<{
+    contents: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        children: import("../../properties-panel/props-builder.js").Prop<any, false, undefined>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & ((Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<ContainerLayout, true, undefined>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "space-around" | "space-between" | "bottom" | "top", true, undefined>;
+        readonly horizontalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "left" | "right", true, undefined>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"vertical", true, undefined>;
+    }) | (Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<ContainerLayout, true, undefined>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "bottom" | "top", true, undefined>;
+        readonly horizontalAlign: import("../../properties-panel/props-builder.js").Prop<"center" | "space-around" | "space-between" | "left" | "right", true, undefined>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"horizontal", true, undefined>;
+    }) | (Omit<{
+        layout: import("../../properties-panel/props-builder.js").Prop<ContainerLayout, true, undefined>;
+    }, "columns" | "layout" | "rowHeight"> & {
+        readonly columns: import("../../properties-panel/props-builder.js").Prop<number, true, undefined>;
+        readonly rowHeight: import("../../properties-panel/props-builder.js").Prop<Dim<"px">, true, undefined>;
+        readonly layout: import("../../properties-panel/props-builder.js").Prop<"freeform", true, undefined>;
+    }))>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        backgroundColor: import("../../properties-panel/props-builder.js").Prop<string, true, undefined>;
+        border: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerSideBorder, false, undefined>;
+        borderRadius: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared/types").PerCornerBorderRadius, false, undefined>;
+        hasBackdrop: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+        widthPreset: import("../../properties-panel/props-builder.js").Prop<import("./constants.js").ModalSize, true, undefined>;
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    interaction: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        closeOnClickOutside: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onOpen: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onClose: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+    meta: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        isOpen: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+}>>;

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

@@ -0,0 +1,37 @@
+import { Dim } from "@superblocksteam/library-shared";
+import React from "react";
+import type { ModalSize } from "./constants.js";
+import type { ContainerLayout, VerticalAlignment, HorizontalAlignment } from "../../component-base/constants.js";
+import type { ComputeStyleProps } from "../../themes/generatedStyles/generate-component-styles.js";
+import type { SbElement, SbInstance } from "@superblocksteam/library-shared/types";
+import type { ReactNode } from "react";
+type ModalComponentProps = {
+    name?: string;
+    isOpen: boolean;
+    onCancel: (e: any) => void;
+    children: ReactNode;
+    className?: string;
+    closeOnClickOutside: boolean;
+    hasBackdrop: boolean;
+    widthPreset?: ModalSize;
+    heightPreset?: ModalSize;
+    modalStyle?: React.CSSProperties;
+    styleProps: ComputeStyleProps;
+    width?: Dim<"px">;
+    height?: Dim<"px">;
+    sourceId: SbElement;
+    instanceId: SbInstance;
+    isEditing: boolean;
+    layout: ContainerLayout;
+    horizontalAlign?: HorizontalAlignment;
+    verticalAlign?: VerticalAlignment;
+    spacing: Dim<"px">;
+    columns?: number;
+    rows?: number;
+    rowHeight?: Dim<"px">;
+    dropTargetRef?: React.RefObject<HTMLElement | null>;
+};
+/** the modal is open/close by setting isOpen to true/false
+ **/
+declare const ModalComponent: (props: ModalComponentProps) => React.JSX.Element;
+export default ModalComponent;

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

@@ -0,0 +1,45 @@
+import { Prop, Section } from "../../properties-panel/props-builder.js";
+import type { ModalSize } from "./constants.js";
+import type { PerCornerBorderRadius, PerSideBorder } from "@superblocksteam/library-shared/types";
+export declare const propertiesDefinition: {
+    contents: Section<Record<string, Prop<any, any, undefined>> & {
+        children: Prop<any, false, undefined>;
+    }>;
+    layout: Section<Record<string, Prop<any, any, undefined>> & ((Omit<{
+        layout: Prop<import("../../component-base/constants.js").ContainerLayout, true, undefined>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: Prop<"center" | "space-around" | "space-between" | "bottom" | "top", true, undefined>;
+        readonly horizontalAlign: Prop<"center" | "left" | "right", true, undefined>;
+        readonly layout: Prop<"vertical", true, undefined>;
+    }) | (Omit<{
+        layout: Prop<import("../../component-base/constants.js").ContainerLayout, true, undefined>;
+    }, "layout" | "verticalAlign" | "horizontalAlign"> & {
+        readonly verticalAlign: Prop<"center" | "bottom" | "top", true, undefined>;
+        readonly horizontalAlign: Prop<"center" | "space-around" | "space-between" | "left" | "right", true, undefined>;
+        readonly layout: Prop<"horizontal", true, undefined>;
+    }) | (Omit<{
+        layout: Prop<import("../../component-base/constants.js").ContainerLayout, true, undefined>;
+    }, "columns" | "layout" | "rowHeight"> & {
+        readonly columns: Prop<number, true, undefined>;
+        readonly rowHeight: Prop<import("@superblocksteam/library-shared").Dim<"px">, true, undefined>;
+        readonly layout: Prop<"freeform", true, undefined>;
+    }))>;
+    appearance: Section<Record<string, Prop<any, any, undefined>> & {
+        backgroundColor: Prop<string, true, undefined>;
+        border: Prop<PerSideBorder, false, undefined>;
+        borderRadius: Prop<PerCornerBorderRadius, false, undefined>;
+        hasBackdrop: Prop<boolean, true, undefined>;
+        widthPreset: Prop<ModalSize, true, undefined>;
+        loading: Prop<boolean, true, undefined>;
+    }>;
+    interaction: Section<Record<string, Prop<any, any, undefined>> & {
+        closeOnClickOutside: Prop<boolean, true, undefined>;
+    }>;
+    events: Section<Record<string, Prop<any, any, undefined>> & {
+        onOpen: Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+        onClose: Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+    meta: Section<Record<string, Prop<any, any, undefined>> & {
+        isOpen: Prop<boolean, true, undefined>;
+    }>;
+};

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

@@ -0,0 +1,2 @@
+import type { EditorConfig } from "@superblocksteam/library-shared/types";
+export declare const editorConfig: EditorConfig;

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

@@ -0,0 +1,39 @@
+export declare const Page: import("../../../internal-details/sb-wrapper.jsx").ChainableComponent<{
+    contents: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        children: import("../../properties-panel/props-builder.js").Prop<any, false, undefined>;
+        columns: import("../../properties-panel/props-builder.js").Prop<string[], false, undefined>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onLoad: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+}, import("../../properties-panel/props-builder.js").ExternalProps<{
+    contents: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        children: import("../../properties-panel/props-builder.js").Prop<any, false, undefined>;
+        columns: import("../../properties-panel/props-builder.js").Prop<string[], false, undefined>;
+    }>;
+    layout: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        maxHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minHeight?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        maxWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        minWidth?: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined> | undefined;
+        width: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+        height: import("../../properties-panel/props-builder.js").Prop<import("@superblocksteam/library-shared").Dim<import("@superblocksteam/library-shared").DimModes>, false, undefined>;
+    }>;
+    appearance: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        loading: import("../../properties-panel/props-builder.js").Prop<boolean, true, undefined>;
+    }>;
+    events: import("../../properties-panel/props-builder.js").Section<Record<string, import("../../properties-panel/props-builder.js").Prop<any, any, undefined>> & {
+        onLoad: import("../../properties-panel/props-builder.js").Prop<import("../../event-flow.js").EventFlow, false, undefined>;
+    }>;
+}>>;