@pinhadev/pinha-quiz-builder-pkg 0.1.0

package/README.md

@@ -0,0 +1,106 @@
+# pinha-quiz-builder
+
+Quiz and QuizBuilder components for Next.js projects.
+
+## Install
+
+```bash
+npm install pinha-quiz-builder
+```
+
+## Usage
+
+### QuizBuilder
+
+Build a quiz and get JSON. Use `onChange` to capture the quiz data.
+
+```tsx
+import { QuizBuilder } from "pinha-quiz-builder";
+
+export default function BuilderPage() {
+  const handleChange = (data) => {
+    console.log(data);
+    // Save to file, API, or state
+  };
+  return <QuizBuilder onChange={handleChange} />;
+}
+```
+
+### Quiz
+
+Render a quiz from JSON produced by QuizBuilder.
+
+```tsx
+import { Quiz } from "pinha-quiz-builder";
+import quizData from "./my-quiz.json";
+
+export default function QuizPage() {
+  return (
+    <Quiz
+      data={quizData}
+      onSubmit={(answers) => console.log(answers)}
+    />
+  );
+}
+```
+
+## Quiz JSON shape
+
+```json
+{
+  "id": "uuid",
+  "config": {},
+  "quizes": [
+    {
+      "id": 1,
+      "title": "Question title",
+      "subtitle": "Optional subtitle",
+      "type": "basic-numeric"
+    },
+    {
+      "id": 2,
+      "title": "Slider question",
+      "subtitle": "subtitle",
+      "type": "basic-slider",
+      "sliderParams": {
+        "min": 0,
+        "max": 100,
+        "inputType": "int",
+        "prefix": "Rp.",
+        "suffix": "/unit"
+      }
+    }
+  ]
+}
+```
+
+Question types: `basic-numeric`, `basic-text`, `basic-options`, `basic-slider`.
+
+## Tailwind CSS
+
+The package uses **Tailwind utility classes** for styling. It does **not** bundle Tailwind or list it as a dependency.
+
+- **Your app** must have Tailwind installed and configured.
+- **Include the package in Tailwind’s `content`** so the classes used by the package are generated:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    "./app/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/pinha-quiz-builder/dist/**/*.{js,mjs}",
+  ],
+  theme: { extend: {} },
+  plugins: [],
+};
+```
+
+The package “inherits” your project’s Tailwind version; no separate Tailwind dependency is needed in the package.
+
+## Build
+
+```bash
+cd pinha-quiz-builder
+npm install
+npm run build
+```

package/dist/index.d.mts

@@ -0,0 +1,538 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type QuestionType = "numeric" | "text" | "options" | "slider" | "basicInfo";
+type DesignType = "default" | "card" | "compact";
+type ProgressBarColorPreset = "green" | "blue" | "orange" | "white" | "black" | "custom";
+type ButtonStyle = "primary" | "secondary" | "outline";
+interface SliderParams {
+    min: number;
+    max: number;
+    inputType: "int" | "float";
+    prefix?: string;
+    suffix?: string;
+}
+/** HTML input type for text questions (email, password, etc.). */
+type TextInputFormat = "text" | "email" | "password" | "tel" | "url" | "search";
+interface TextParams {
+    placeholder?: string;
+    defaultValue?: string;
+    required?: boolean;
+    /** Input type for the field (email, password, etc.). */
+    inputFormat?: TextInputFormat;
+}
+interface NumericParams {
+    placeholder?: string;
+    defaultValue?: number;
+    required?: boolean;
+}
+/** Single option: label and optional image URL (for card-style display). */
+interface OptionItem {
+    /** Stable id for React keys + reordering. */
+    id: string;
+    label: string;
+    imageUrl?: string;
+}
+type OptionsLayout = "list" | "grid" | "masonry";
+type OptionsImageFit = "contain" | "cover";
+interface OptionsParams {
+    options: OptionItem[];
+    /** How to render options in the quiz UI. */
+    layout?: OptionsLayout;
+    /** How option images should fit inside the image frame. */
+    imageFit?: OptionsImageFit;
+}
+interface QuizItemBase {
+    id: string;
+    title: string;
+    subtitle?: string;
+    designType?: DesignType;
+    /** When true, this question must be answered before continuing/submitting. */
+    required?: boolean;
+    /** @deprecated Prefer submitButtonConfig for full per-block button settings. */
+    buttonStyle?: ButtonStyle;
+    /** Per-block submit button overrides. Use override: true to enable; then other keys (position, size, etc.) apply. Merged with global when override is true. */
+    submitButtonConfig?: Record<string, unknown>;
+}
+interface QuizItemNumeric extends QuizItemBase {
+    type: "numeric";
+    numericParams?: NumericParams;
+}
+interface QuizItemText extends QuizItemBase {
+    type: "text";
+    textParams?: TextParams;
+}
+interface QuizItemOptions extends QuizItemBase {
+    type: "options";
+    optionsParams?: OptionsParams;
+}
+interface QuizItemSlider extends QuizItemBase {
+    type: "slider";
+    sliderParams: SliderParams;
+}
+/** Params for Basic Information Form (name, phone, optional OTP, privacy policy). */
+interface BasicInfoParams {
+    /** When true, show phone verification with "Send Verification Code" and OTP flow. */
+    withOtp?: boolean;
+    /** URL for privacy policy link. */
+    privacyPolicyUrl?: string;
+    /** Label for privacy agreement (e.g. "I agree to the Privacy Policy"). */
+    privacyPolicyLabel?: string;
+}
+interface QuizItemBasicInfo extends QuizItemBase {
+    type: "basicInfo";
+    basicInfoParams?: BasicInfoParams;
+}
+type QuizItem = QuizItemNumeric | QuizItemText | QuizItemOptions | QuizItemSlider | QuizItemBasicInfo;
+interface QuizData {
+    id: string;
+    config: Record<string, unknown>;
+    quizes: QuizItem[];
+}
+
+interface QuizProps {
+    data: QuizData;
+    /** When set, quiz shows only this step (builder preview). No prev/next. */
+    previewStep?: number;
+    onSubmit?: (answers: Record<string, string | number>) => void;
+    /** Called on "Continue" (non-final step) with current answers + next step index. */
+    onCheckpoint?: (answers: Record<string, string | number>, nextStepIndex: number) => void;
+    /** Called when the user navigates to a different question (Continue/Back). Passes the new step index. */
+    onPageChanged?: (stepIndex: number) => void;
+}
+declare function Quiz({ data, previewStep, onSubmit, onCheckpoint, onPageChanged }: QuizProps): react_jsx_runtime.JSX.Element;
+
+interface QuizBuilderProps {
+    initialData?: QuizData | null;
+    onChange?: (data: QuizData) => void;
+    onSubmit?: (answers: Record<string, string | number>) => void;
+}
+declare function QuizBuilder({ initialData, onChange, onSubmit }: QuizBuilderProps): react_jsx_runtime.JSX.Element;
+
+interface LazyImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "loading"> {
+    /** Image URL */
+    src: string;
+    /** Alt text (required for accessibility) */
+    alt: string;
+    /** Optional class for placeholder shown while loading */
+    placeholderClassName?: string;
+}
+/**
+ * Lazy-loading image component (native loading="lazy").
+ * Shows an optional placeholder until the image has loaded.
+ * Shared by v1 and v2.
+ */
+declare function LazyImage({ src, alt, className, placeholderClassName, onLoad, onError, ...rest }: LazyImageProps): react_jsx_runtime.JSX.Element | null;
+
+type GradientDirection = "to right" | "to bottom" | "to bottom right" | "to bottom left" | "135deg" | "180deg";
+type ColorPickerFieldProps = {
+    /** Current value (hex string). Result of selection is always a string. */
+    value: string;
+    onChange: (hex: string) => void;
+    /** Default hex when value is empty or when opening the custom picker. */
+    defaultColor: string;
+    /** Optional label above the field (e.g. "Background color", "Color"). */
+    label?: string;
+    /**
+     * Preset options: array of hex strings and "custom".
+     * Defaults to [PRESET_HEX.green, PRESET_HEX.blue, PRESET_HEX.orange, "custom"].
+     */
+    customColorSelectionOptions?: (string | "custom")[];
+    labelClass?: string;
+    inputClass?: string;
+    containerClass?: string;
+    /**
+     * When true, show Solid | Gradient toggle inside the Color section.
+     * When gradient is selected, show second color + direction.
+     */
+    allowGradient?: boolean;
+    gradientType?: "solid" | "gradient";
+    onGradientTypeChange?: (type: "solid" | "gradient") => void;
+    value2?: string;
+    defaultColor2?: string;
+    onValue2Change?: (hex: string) => void;
+    gradientDirection?: GradientDirection;
+    onGradientDirectionChange?: (direction: GradientDirection) => void;
+};
+/**
+ * Color picker with optional preset chips and optional gradient (Solid | Gradient).
+ */
+declare function ColorPickerField({ value, onChange, defaultColor, label, customColorSelectionOptions, labelClass, inputClass, containerClass, allowGradient, gradientType, onGradientTypeChange, value2, defaultColor2, onValue2Change, gradientDirection, onGradientDirectionChange, }: ColorPickerFieldProps): react_jsx_runtime.JSX.Element;
+
+/** "colors" = Green/Blue/Orange/Custom; "text" = White/Black/Custom */
+type PresetSetKind = "colors" | "text";
+interface PresetOrCustomColorFieldProps {
+    label: string;
+    defaultCustomColor: string;
+    presetSet?: PresetSetKind;
+    preset: ProgressBarColorPreset;
+    customHex: string;
+    onPresetChange: (preset: ProgressBarColorPreset) => void;
+    onCustomChange: (hex: string) => void;
+    fieldClass?: string;
+    labelClass?: string;
+    inputClass?: string;
+}
+/** Preset chips + custom color picker when Custom is selected. */
+declare function PresetOrCustomColorField({ label, defaultCustomColor, presetSet, preset, customHex, onPresetChange, onCustomChange, fieldClass, labelClass, inputClass, }: PresetOrCustomColorFieldProps): react_jsx_runtime.JSX.Element;
+
+interface BasicInfoValue {
+    firstName: string;
+    lastName: string;
+    phone: string;
+    otpCode: string;
+    privacyAccepted: boolean;
+}
+
+/**
+ * V2 types – no dependency on v1.
+ */
+/** Spacing in px. All optional; omit or use 0 for default. */
+interface Spacing {
+    marginTop?: number;
+    marginRight?: number;
+    marginBottom?: number;
+    marginLeft?: number;
+    paddingTop?: number;
+    paddingRight?: number;
+    paddingBottom?: number;
+    paddingLeft?: number;
+}
+type BorderPreset = "none" | "thin" | "medium" | "thick" | "dashed" | "dotted";
+type BoxShadowPreset = "none" | "sm" | "md" | "lg" | "xl" | "inner";
+type BorderRadiusPreset = "none" | "sm" | "md" | "lg" | "xl" | "full" | "custom";
+/** Background styling options. All optional. */
+interface BackgroundStyle {
+    /** Background color (hex or CSS color). */
+    backgroundColor?: string;
+    /** Border preset. */
+    borderPreset?: BorderPreset;
+    /** Custom border color (hex or CSS color). Only used if borderPreset is not "none". */
+    borderColor?: string;
+    /** Border radius preset. */
+    borderRadiusPreset?: BorderRadiusPreset;
+    /** Custom border radius (px). Only used if borderRadiusPreset is "custom". */
+    customBorderRadiusPx?: number;
+    /** Box shadow preset. */
+    boxShadowPreset?: BoxShadowPreset;
+}
+type SectionType = "container" | "input" | "button" | "text" | "image" | "divider" | "basic";
+interface SectionBase {
+    id: string;
+    type: SectionType;
+    /** Optional display name to identify the section in the builder. */
+    name?: string;
+    spacing?: Spacing;
+    /** Flex value for this section when it's a child of a flex container. */
+    flex?: number;
+    /** Background styling options. */
+    backgroundStyle?: BackgroundStyle;
+}
+/** Flex layout options for container sections. Default: flex, column, gap 16px. */
+interface ContainerLayout {
+    /** flex-direction */
+    flexDirection?: "row" | "column";
+    /** Gap between children (px). Tailwind gap-4 = 16. */
+    gap?: number;
+    /** align-items */
+    alignItems?: "flex-start" | "center" | "flex-end" | "stretch";
+    /** justify-content */
+    justifyContent?: "flex-start" | "center" | "flex-end" | "space-between" | "space-around" | "space-evenly";
+    /** flex-wrap */
+    flexWrap?: "nowrap" | "wrap";
+}
+interface ContainerSection extends SectionBase {
+    type: "container";
+    /** Child section ids (order preserved). */
+    children?: string[];
+    /** Flex layout. Omitted keys use default (flex, column, gap 16). */
+    layout?: ContainerLayout;
+    /**
+     * Container width preset or custom.
+     * - "quarter" = 25%
+     * - "half" = 50%
+     * - "threeQuarter" = 75%
+     * - "full" = 100%
+     * - "custom" uses customWidthPx
+     */
+    width?: "quarter" | "half" | "threeQuarter" | "full" | "auto" | "custom";
+    /** Used when width is "custom" (px). */
+    customWidthPx?: number;
+    /** Center horizontally with auto margins (supersedes marginLeft and marginRight from spacing). */
+    centerHorizontal?: boolean;
+}
+type InputFieldType = "text" | "number" | "phone" | "select" | "slider" | "checkbox";
+type InputValidationType = "none" | "email" | "url" | "number" | "phone" | "password" | "zipcode";
+interface SelectOption {
+    value: string;
+    label: string;
+    /** Optional image URL to display alongside the option. */
+    imageUrl?: string;
+    /** Optional SVG content or image URL for icon-card styling. */
+    iconValue?: string;
+    /** Whether the iconValue is an SVG string or a URL. */
+    iconType?: "svg" | "url";
+    /** Optional action to perform when this option is selected. */
+    onClick?: ButtonAction;
+}
+interface InputSection extends SectionBase {
+    type: "input";
+    /** Field type - determines which UI control is rendered. */
+    fieldType?: InputFieldType;
+    /** Unique field name for form data collection. */
+    fieldName?: string;
+    placeholder?: string;
+    label?: string;
+    /** For select: array of options. */
+    options?: SelectOption[];
+    /** For select: UI type (dropdown, multiple choice with optional images, or card layout). */
+    selectUIType?: "dropdown" | "multipleChoice" | "card";
+    /** For card UI type: visual style of the card. */
+    cardStyling?: "default" | "icon";
+    /** For icon-card styling: background color of the icon box. */
+    iconBackgroundColor?: string;
+    /** For card UI type: card size preset or custom. */
+    cardSize?: "small" | "medium" | "large" | "custom";
+    /** Used when cardSize is "custom" (px). */
+    customCardSizePx?: number;
+    /** For select with images: how the images fit within their box (card and multipleChoice UI types). */
+    imageObjectFit?: ImageObjectFit;
+    /** For slider: min value. */
+    sliderMin?: number;
+    /** For slider: max value. */
+    sliderMax?: number;
+    /** For slider: step value. */
+    sliderStep?: number;
+    /** For checkbox: the text displayed next to the checkbox. */
+    checkboxLabel?: string;
+    /** Whether this field is required. */
+    required?: boolean;
+    /** Validation type for the input. */
+    validationType?: InputValidationType;
+    /** Custom validation error message. */
+    validationMessage?: string;
+    /**
+     * Input width preset or custom.
+     * - "quarter" = 25%
+     * - "half" = 50%
+     * - "threeQuarter" = 75%
+     * - "full" = 100%
+     * - "custom" uses customWidthPx
+     */
+    width?: "quarter" | "half" | "threeQuarter" | "full" | "auto" | "custom";
+    /** Used when width is "custom" (px). */
+    customWidthPx?: number;
+    /** Horizontal position of the input within its section. */
+    position?: "left" | "center" | "right";
+    /** Alignment of the label text. */
+    labelAlignment?: "left" | "center" | "right";
+    /** Font size of the label (px). */
+    labelFontSize?: number;
+    /** Letter spacing of the label (em). */
+    labelLetterSpacing?: number;
+    /** Alignment of the input text. */
+    inputAlignment?: "left" | "center" | "right";
+}
+type ButtonActionType = "none" | "goToPage" | "toThankYouPage" | "toRedirectionPage" | "submit";
+interface ButtonAction {
+    type: ButtonActionType;
+    /** Target page index (0-based) when type is "goToPage". */
+    targetPageIndex?: number;
+}
+interface ButtonSection extends SectionBase {
+    type: "button";
+    label: string;
+    /** Button size preset (controls padding + font size). */
+    size?: "small" | "medium" | "large";
+    /**
+     * Button width preset or custom.
+     * - "quarter" = 25%
+     * - "half" = 50%
+     * - "threeQuarter" = 75%
+     * - "custom" uses customWidthPx
+     */
+    width?: "quarter" | "half" | "threeQuarter" | "custom";
+    /** Used when width is "custom" (px). */
+    customWidthPx?: number;
+    /** Border radius preset or custom. */
+    borderRadius?: "small" | "medium" | "custom";
+    /** Used when borderRadius is "custom" (px). */
+    customBorderRadiusPx?: number;
+    /** Horizontal position of the button within its section. */
+    position?: "left" | "center" | "right";
+    /** Text alignment inside the button. */
+    textPosition?: "left" | "center" | "right";
+    /** Button background color (hex or CSS color). */
+    buttonColor?: string;
+    /** Button text color (hex or CSS color). */
+    textColor?: string;
+    /** Action to perform when button is clicked. */
+    onClick?: ButtonAction;
+}
+type TextFontSize = "small" | "medium" | "large" | "custom";
+type TextAlignment = "left" | "center" | "right";
+type TextTag = "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+interface TextSection extends SectionBase {
+    type: "text";
+    content: string;
+    /** Which HTML tag to render this text as. Default: "p". */
+    tag?: TextTag;
+    /** Font size preset or custom. */
+    font?: TextFontSize;
+    /** Used when font is "custom" (px). */
+    customFontSizePx?: number;
+    /** Text color (hex or CSS color). */
+    color?: string;
+    /** Text alignment. */
+    alignment?: TextAlignment;
+    /** Whether to render italic. */
+    italic?: boolean;
+    /** Whether to render bold. */
+    bold?: boolean;
+    /** Whether to underline. */
+    underline?: boolean;
+}
+type ImageSize = "small" | "medium" | "large" | "custom";
+type ImagePosition = "left" | "center" | "right";
+type ImageObjectFit = "cover" | "contain";
+interface ImageSection extends SectionBase {
+    type: "image";
+    src: string;
+    alt: string;
+    /** Image display size preset or custom. */
+    size?: ImageSize;
+    /** Used when size is "custom" – max-width in px. */
+    customSizePx?: number;
+    /** Horizontal position of the image. */
+    position?: ImagePosition;
+    /** How the image fits within its box. */
+    objectFit?: ImageObjectFit;
+    /** Optional SVG content to render instead of src. */
+    svgContent?: string;
+}
+interface DividerSection extends SectionBase {
+    type: "divider";
+    /** Hex or CSS color for the line. */
+    color?: string;
+    /** Thickness of the line in px. */
+    thickness?: number;
+    /** Border style like solid, dashed, dotted. */
+    lineStyle?: "solid" | "dashed" | "dotted";
+    /** Width preset or custom. */
+    width?: "quarter" | "half" | "threeQuarter" | "full" | "custom";
+    /** Used when width is "custom" (px). */
+    customWidthPx?: number;
+    /** Horizontal position of the line. */
+    position?: "left" | "center" | "right";
+}
+type BasicComponentType = "progressBar";
+interface BasicComponentSection extends SectionBase {
+    type: "basic";
+    /** Component type to render. */
+    componentType?: BasicComponentType;
+    /** Progress bar height in px. */
+    progressBarHeight?: number;
+    /** Progress bar background color. */
+    progressBarBgColor?: string;
+    /** Progress bar fill color. */
+    progressBarFillColor?: string;
+    /** Border radius for progress bar (px). */
+    progressBarRadius?: number;
+    /** Whether to show percentage text. */
+    showPercentage?: boolean;
+}
+type Section = ContainerSection | InputSection | ButtonSection | TextSection | ImageSection | DividerSection | BasicComponentSection;
+/** Page-level layout: which sections render in header/footer. Main content is the page's sectionIds. */
+interface QuizV2Layout {
+    id: string;
+    /** Section ids to render in the header slot (order preserved). */
+    headerSectionIds?: string[];
+    /** Section ids to render in the footer slot (order preserved). */
+    footerSectionIds?: string[];
+}
+/** One page of the quiz: root section ids for this page (order preserved). */
+type QuizV2PageType = "regular" | "redirection" | "thankYou";
+interface QuizV2Page {
+    id: string;
+    /** Page type: regular (default), redirection (countdown), or thankYou (auto-submit). */
+    type?: QuizV2PageType;
+    /** Root section ids on this page – rendered inside main-content-generator (order preserved). */
+    sectionIds: string[];
+    /** Layout id for this page. If empty, use first layout. */
+    layoutId?: string | null;
+    /** For redirection page: URL to redirect to after countdown. */
+    redirectUrl?: string;
+    /** For redirection page: countdown duration in seconds (default: 5). */
+    redirectCountdownSeconds?: number;
+}
+interface QuizV2Data {
+    id: string;
+    /** Layout-level config applied to every page of this instance. */
+    config: Record<string, unknown>;
+    /** All sections (can be referenced by pages and layouts). */
+    sections: Section[];
+    /** Page-level layouts (header/main/footer). Each page can pick one or use first. */
+    layouts: QuizV2Layout[];
+    /** Quiz pages (page 1, page 2, …). */
+    pages: QuizV2Page[];
+}
+
+interface QuizV2Props {
+    /** Quiz ID to load from storage (takes priority over data) */
+    id?: string;
+    /** Quiz data (used if id is not provided) */
+    data?: QuizV2Data;
+    onSubmit?: (answers: unknown) => void;
+    /** Optional controlled current page index */
+    currentPageIndex?: number;
+    /** Optional callback when page changes */
+    onPageChange?: (index: number) => void;
+    /** Whether to enable default tracking (defaults to true) */
+    withDefaultTracking?: boolean;
+}
+/**
+ * Quiz V2 – renders by page inside layout-container (header-generator, main-content-generator, footer-generator).
+ * Layout-level config and page layout (header/footer sections) applied. Main content = current page sections.
+ *
+ * Accepts either an `id` to load from storage or `data` directly. If both are provided, `id` takes priority.
+ */
+declare function QuizV2({ id, data: propData, onSubmit, currentPageIndex, onPageChange, withDefaultTracking }: QuizV2Props): react_jsx_runtime.JSX.Element;
+
+interface QuizBuilderV2Props {
+    /** Initial data (e.g. from localStorage or getDefaultQuizV2Data()). */
+    initialData?: QuizV2Data | null;
+    /** Last saved data – used to compute dirty state and which sections changed. */
+    lastSavedData?: QuizV2Data | null;
+    onChange?: (data: QuizV2Data) => void;
+    /** Called when user clicks Save. Consumer should persist and pass new lastSavedData. */
+    onSave?: (data: QuizV2Data) => void;
+    onSubmit?: (answers: unknown) => void;
+}
+/**
+ * QuizBuilder V2 – global config, default sections on first load, save button, unsaved warning, visual for changed sections.
+ */
+declare function QuizBuilderV2({ initialData, lastSavedData, onChange, onSave, onSubmit, }: QuizBuilderV2Props): react_jsx_runtime.JSX.Element;
+
+/**
+ * Default spacing per section type (Tailwind-like in px). Used when creating sections and when
+ * resolving missing keys. Fallback when type is unknown.
+ */
+declare const DEFAULT_SPACING: Spacing;
+/** Default page layout: empty header and footer. */
+declare function getDefaultQuizV2Layout(): QuizV2Layout;
+/**
+ * Resolve layout for a page: page.layoutId ?? first layout. Returns layout or null.
+ */
+declare function resolveLayoutForPage(layouts: QuizV2Layout[] | undefined, page: QuizV2Page | null): QuizV2Layout | null;
+/**
+ * Creates default quiz data with one page and one of each basic section type.
+ * Used when user first loads the builder (nothing in storage).
+ */
+declare function getDefaultQuizV2Data(): QuizV2Data;
+
+/**
+ * Display label for a section: uses section.name when set, otherwise type-specific fallback.
+ */
+declare function getSectionLabel(s: Section): string;
+
+export { type BasicInfoParams, type BasicInfoValue, type ButtonStyle, ColorPickerField, type ColorPickerFieldProps, type ContainerLayout, DEFAULT_SPACING, type DesignType, type GradientDirection, type ImageObjectFit, type ImagePosition, type ImageSize, LazyImage, type LazyImageProps, type OptionItem, type OptionsParams, PresetOrCustomColorField, type PresetOrCustomColorFieldProps, type PresetSetKind, type ProgressBarColorPreset, type QuestionType, Quiz, QuizBuilder, type QuizBuilderProps, QuizBuilderV2, type QuizBuilderV2Props, type QuizData, type QuizItem, type QuizProps, QuizV2, type QuizV2Data, type QuizV2Layout, type QuizV2Page, type QuizV2Props, type Section, type SectionType, type SliderParams, type Spacing, type TextAlignment, type TextFontSize, getDefaultQuizV2Data, getDefaultQuizV2Layout, getSectionLabel, resolveLayoutForPage };