@heymantle/litho 0.0.3 → 0.0.4

package/dist/types/components/DropZone.d.ts

@@ -0,0 +1,108 @@
+export default DropZone;
+/**
+ * DropZone component for handling file uploads with previews.
+ *
+ * @param {Object} props - Component props.
+ * @param {string} [props.id] - The ID for the DropZone input.
+ * @param {string} [props.label] - Label for the DropZone.
+ * @param {boolean} [props.labelHidden] - Whether the label is hidden.
+ * @param {Object} [props.labelAction] - Action for the label, including `onAction` and `content`.
+ * @param {string} [props.tooltip] - Tooltip for the label.
+ * @param {string} [props.labelVariant] - Variant for the label styling.
+ * @param {string} [props.type="file"] - The type of files accepted (e.g., "file", "image").
+ * @param {string|string[]} [props.accept] - Accepted file types.
+ * @param {boolean} [props.allowMultiple=false] - Whether multiple files can be uploaded.
+ * @param {boolean} [props.showDropZoneWhenDisabled=true] - Whether the DropZone is shown when disabled.
+ * @param {boolean} [props.disabled] - Whether the DropZone is disabled.
+ * @param {Function} [props.onDrop] - Callback for when files are dropped.
+ * @param {Function} [props.onDropAccepted] - Callback for accepted files.
+ * @param {Function} [props.onDropRejected] - Callback for rejected files.
+ * @param {string} [props.helpText] - Help text displayed below the DropZone.
+ * @param {string} [props.error] - Error message to display.
+ * @param {boolean} [props.uploading=false] - Whether a file upload is in progress.
+ * @param {Array} [props.uploadedFiles=[]] - Array of uploaded files.
+ * @param {string} [props.uploadLabel="Drag and drop files or click to upload"] - Label for upload prompt.
+ * @param {string} [props.uploadingLabel="Uploading..."] - Label shown during file uploads.
+ * @param {string} [props.dragLabel="Release to upload"] - Label for the drag area.
+ * @param {boolean} [props.showFilePreview=true] - Whether file previews are displayed.
+ * @param {boolean} [props.previewLoading] - Whether file previews are loading.
+ * @param {number} [props.previewRows=2] - Number of preview rows to display.
+ * @param {Function} [props.onRemove] - Callback for removing a file.
+ * @param {Function} [props.onFilePreviewClick] - Callback for clicking a file preview.
+ * @param {string} [props.filename] - Name of the file being uploaded.
+ * @returns {JSX.Element} DropZone component.
+ */
+declare function DropZone(props?: {
+    id?: string;
+    label?: string;
+    labelHidden?: boolean;
+    labelAction?: any;
+    tooltip?: string;
+    labelVariant?: string;
+    type?: string;
+    accept?: string | string[];
+    allowMultiple?: boolean;
+    showDropZoneWhenDisabled?: boolean;
+    disabled?: boolean;
+    onDrop?: Function;
+    onDropAccepted?: Function;
+    onDropRejected?: Function;
+    helpText?: string;
+    error?: string;
+    uploading?: boolean;
+    uploadedFiles?: any[];
+    uploadLabel?: string;
+    uploadingLabel?: string;
+    dragLabel?: string;
+    showFilePreview?: boolean;
+    previewLoading?: boolean;
+    previewRows?: number;
+    onRemove?: Function;
+    onFilePreviewClick?: Function;
+    filename?: string;
+}): JSX.Element;
+declare namespace DropZone {
+    export { FilePreview };
+    export { FileThumbnail };
+    export { formatFileSize };
+}
+/**
+ * FilePreview component for displaying file preview thumbnails.
+ *
+ * @param {Object} props - Component props.
+ * @param {Array} [props.files] - Array of file objects to preview.
+ * @param {boolean} [props.loading] - Whether the file previews are loading.
+ * @param {number} [props.previewRows=2] - Number of preview rows to display.
+ * @param {Function} [props.onRemove] - Callback for removing a file.
+ * @param {Function} [props.onClick] - Callback for clicking a file preview.
+ * @param {string} [props.filename] - Name of the file being uploaded.
+ * @returns {JSX.Element} FilePreview component.
+ */
+declare function FilePreview(props?: {
+    files?: any[];
+    loading?: boolean;
+    previewRows?: number;
+    onRemove?: Function;
+    onClick?: Function;
+    filename?: string;
+}): JSX.Element;
+/**
+ * FileThumbnail component for displaying a file thumbnail or spinner.
+ *
+ * @param {Object} props - Component props.
+ * @param {Object} [props.file] - File object to display.
+ * @param {boolean} [props.loading] - Whether the thumbnail is loading.
+ * @returns {JSX.Element} FileThumbnail component.
+ */
+declare function FileThumbnail(props?: {
+    file?: any;
+    loading?: boolean;
+}): JSX.Element;
+/**
+ * Formats a file size into a human-readable string.
+ *
+ * @param {number} fileSize - Size of the file in bytes.
+ * @returns {string} Formatted file size (e.g., "1.2 MB").
+ */
+declare function formatFileSize(fileSize: number): string;
+//# sourceMappingURL=DropZone.d.ts.map

package/dist/types/components/DropZone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropZone.d.ts","sourceRoot":"","sources":["../../../components/DropZone.js"],"names":[],"mappings":";AA+CA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,kCA7BG;IAAuB,EAAE,GAAjB,MAAM;IACS,KAAK,GAApB,MAAM;IACU,WAAW,GAA3B,OAAO;IACQ,WAAW;IACX,OAAO,GAAtB,MAAM;IACS,YAAY,GAA3B,MAAM;IACS,IAAI,GAAnB,MAAM;IACkB,MAAM,GAA9B,MAAM,GAAC,MAAM,EAAE;IACC,aAAa,GAA7B,OAAO;IACS,wBAAwB,GAAxC,OAAO;IACS,QAAQ,GAAxB,OAAO;IACU,MAAM;IACN,cAAc;IACd,cAAc;IAChB,QAAQ,GAAvB,MAAM;IACS,KAAK,GAApB,MAAM;IACU,SAAS,GAAzB,OAAO;IACO,aAAa;IACZ,WAAW,GAA1B,MAAM;IACS,cAAc,GAA7B,MAAM;IACS,SAAS,GAAxB,MAAM;IACU,eAAe,GAA/B,OAAO;IACS,cAAc,GAA9B,OAAO;IACQ,WAAW,GAA1B,MAAM;IACW,QAAQ;IACR,kBAAkB;IACpB,QAAQ,GAAvB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,CAyPvB;;;;;;AAyBD;;;;;;;;;;;GAWG;AACH,qCARG;IAAsB,KAAK;IACH,OAAO,GAAvB,OAAO;IACQ,WAAW,GAA1B,MAAM;IACW,QAAQ;IACR,OAAO;IACT,QAAQ,GAAvB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,CAsEvB;AAOD;;;;;;;GAOG;AACH,uCAJG;IAAuB,IAAI;IACH,OAAO,GAAvB,OAAO;CACf,GAAU,GAAG,CAAC,OAAO,CA6BvB;AAGD;;;;;GAKG;AACH,0CAHW,MAAM,GACJ,MAAM,CAgBlB"}

package/dist/types/components/EmptyState.d.ts

@@ -0,0 +1,52 @@
+export default EmptyState;
+/**
+ * EmptyState component for displaying a structured layout with a title, description,
+ * icon, and action buttons when no content is available.
+ *
+ * @param {Object} props - The properties to customize the EmptyState component.
+ * @param {string} [props.description] - Text description to display in the empty state.
+ * @param {React.ReactNode} [props.icon] - React node to render a custom icon.
+ * @param {string} [props.iconSource] - Image source URL to display an icon.
+ * @param {Object} [props.primaryAction] - Primary action button configuration.
+ * @param {string} props.primaryAction.content - Label for the primary button.
+ * @param {function} props.primaryAction.onAction - Callback function for the primary action button click.
+ * @param {boolean} [props.primaryAction.disabled=false] - Disable state for the primary action button.
+ * @param {boolean} [props.primaryAction.loading=false] - Loading state for the primary action button.
+ * @param {boolean} [props.primaryAction.external=false] - Whether the primary action button should open in a new tab.
+ * @param {Object} [props.secondaryAction] - Secondary action button configuration.
+ * @param {string} props.secondaryAction.content - Label for the secondary button.
+ * @param {function} props.secondaryAction.onAction - Callback function for the secondary action button click.
+ * @param {boolean} [props.secondaryAction.disabled=false] - Disable state for the secondary action button.
+ * @param {boolean} [props.secondaryAction.loading=false] - Loading state for the secondary action button.
+ * @param {boolean} [props.secondaryAction.external=false] - Whether the secondary action button should open in a new tab.
+ * @param {string} [props.title] - Title text to display in the empty state.
+ * @param {string} [props.titleVariant="headingXl"] - Typography variant for the title, default is "headingXl".
+ * @param {string} [props.descriptionVariant="bodyLg"] - Typography variant for the description, default is "bodyLg".
+ * @param {number} [props.progress] - Progress value to display in the empty state.
+ *
+ * @returns {JSX.Element} The rendered EmptyState component.
+ */
+declare function EmptyState(props?: {
+    description?: string;
+    icon?: React.ReactNode;
+    iconSource?: string;
+    primaryAction?: {
+        content: string;
+        onAction: Function;
+        disabled?: boolean;
+        loading?: boolean;
+        external?: boolean;
+    };
+    secondaryAction?: {
+        content: string;
+        onAction: Function;
+        disabled?: boolean;
+        loading?: boolean;
+        external?: boolean;
+    };
+    title?: string;
+    titleVariant?: string;
+    descriptionVariant?: string;
+    progress?: number;
+}): JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist/types/components/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../components/EmptyState.js"],"names":[],"mappings":";AAUA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,oCAvBG;IAAuB,WAAW,GAA1B,MAAM;IACkB,IAAI,GAA5B,KAAK,CAAC,SAAS;IACA,UAAU,GAAzB,MAAM;IACS,aAAa,GACpC;QAAoC,OAAO,EAAnC,MAAM;QACwB,QAAQ;QACR,QAAQ,GAAtC,OAAO;QACuB,OAAO,GAArC,OAAO;QACuB,QAAQ,GAAtC,OAAO;KACf;IAAuB,eAAe,GACtC;QAAsC,OAAO,EAArC,MAAM;QAC0B,QAAQ;QACR,QAAQ,GAAxC,OAAO;QACyB,OAAO,GAAvC,OAAO;QACyB,QAAQ,GAAxC,OAAO;KACf;IAAuB,KAAK,GAApB,MAAM;IACS,YAAY,GAA3B,MAAM;IACS,kBAAkB,GAAjC,MAAM;IACS,QAAQ,GAAvB,MAAM;CAEd,GAAU,GAAG,CAAC,OAAO,CAoEvB"}

package/dist/types/components/Filters.d.ts

@@ -0,0 +1,166 @@
+export default Filters;
+/**
+ * Filters Component - A React component that manages filters for a given dataset.
+ * Includes functionality for visible filters, more filters, and a query field.
+ *
+ * @component
+ * @param {Object} props - The component props.
+ * @param {Array<{
+ *   key: string,
+ *   label: string,
+ *   filter: React.ReactNode,
+ *   shortcut?: boolean,
+ *   promoted?: boolean,
+ *   onRemove?: () => void
+ * }>} props.filters - The available filters to display.
+ * @param {Array<{
+ *   key: string,
+ *   label: string,
+ *   onRemove?: () => void
+ * }>} props.appliedFilters - The currently applied filters.
+ * @param {Function} [props.onClearAll] - Callback for clearing all applied filters.
+ * @param {boolean} [props.showTextField=false] - Whether to show the query text field.
+ * @param {boolean} [props.textFieldSubdued=false] - Whether the text field should appear subdued.
+ * @param {boolean} [props.padded=false] - Whether to apply padding to the filters container.
+ * @param {string} [props.queryValue] - The current value of the query text field.
+ * @param {Function} [props.onQueryChange] - Callback for when the query text field value changes.
+ * @param {Function} [props.onQueryBlur] - Callback for when the query text field loses focus.
+ * @param {Function} [props.onQueryFocus] - Callback for when the query text field gains focus.
+ * @param {Function} [props.onQueryClear] - Callback for clearing the query text field.
+ * @param {string} [props.queryPlaceholder="Search"] - Placeholder text for the query text field.
+ * @param {boolean} [props.ignorePromotedFiltersWhenRemoving=true] - Whether to ignore promoted filters when clearing filters.
+ * @param {boolean} [props.disableQueryField=false] - Whether the query text field is disabled.
+ * @param {string} [props.className] - Additional class names for the component.
+ * @returns {JSX.Element|null} The Filters component or null if no filters are available.
+ */
+declare function Filters(props: {
+    filters: Array<{
+        key: string;
+        label: string;
+        filter: React.ReactNode;
+        shortcut?: boolean;
+        promoted?: boolean;
+        onRemove?: () => void;
+    }>;
+    appliedFilters: Array<{
+        key: string;
+        label: string;
+        onRemove?: () => void;
+    }>;
+    onClearAll?: Function;
+    showTextField?: boolean;
+    textFieldSubdued?: boolean;
+    padded?: boolean;
+    queryValue?: string;
+    onQueryChange?: Function;
+    onQueryBlur?: Function;
+    onQueryFocus?: Function;
+    onQueryClear?: Function;
+    queryPlaceholder?: string;
+    ignorePromotedFiltersWhenRemoving?: boolean;
+    disableQueryField?: boolean;
+    className?: string;
+}): JSX.Element | null;
+declare namespace Filters {
+    /**
+     * Filters.Pill - A subcomponent for rendering filter pills.
+     *
+     * @component
+     * @param {Object} props - The component props.
+     * @param {string} props.label - The label of the filter pill.
+     * @param {boolean} [props.applied=false] - Whether the pill represents an applied filter.
+     * @param {boolean} [props.disabled=false] - Whether the pill is disabled.
+     * @param {boolean} [props.destructive=false] - Whether the pill represents a destructive action (e.g., remove filters).
+     * @param {Function} [props.onClick] - Callback when the pill is clicked.
+     * @returns {JSX.Element} The filter pill component.
+     */
+    function Pill(props?: {
+        label: string;
+        applied?: boolean;
+        disabled?: boolean;
+        destructive?: boolean;
+        onClick?: Function;
+    }): JSX.Element;
+    namespace Pill {
+        let displayName: string;
+    }
+    /**
+     * Filters.Tabs - A subcomponent for managing tabs with scrollable functionality.
+     *
+     * @component
+     * @param {Object} props - The component props.
+     * @param {Array} props.tabs - The tabs to display.
+     * @param {Object} [props.insertBeforeTabs] - Tab to insert before the main tabs.
+     * @param {number} props.selected - The index of the selected tab.
+     * @param {Function} props.onSelect - Callback when a tab is selected.
+     * @returns {JSX.Element} The tabs component.
+     */
+    function Tabs(props?: {
+        tabs: any[];
+        insertBeforeTabs?: any;
+        selected: number;
+        onSelect: Function;
+    }): JSX.Element;
+    namespace Tabs {
+        let displayName_1: string;
+        export { displayName_1 as displayName };
+    }
+    /**
+     * Filters.Tab - A subcomponent for rendering individual tabs within the Filters.Tabs component.
+     *
+     * @component
+     * @param {Object} props - The component props.
+     * @param {React.ReactNode} [props.icon=HorizontalDotsMinor] - The icon displayed in the tab (default is a horizontal dots icon).
+     * @param {boolean} [props.selected=false] - Whether the tab is currently selected.
+     * @param {string|React.ReactNode} props.content - The content displayed in the tab (e.g., tab label).
+     * @param {Function} [props.onClick] - Callback when the tab is clicked.
+     * @param {Function} [props.onAction] - Callback for an optional tab action (e.g., a secondary click area).
+     * @param {React.ReactNode} [props.accessory] - Additional content displayed below the tab label (e.g., a badge or description).
+     * @param {boolean} [props.interactive=false] - Whether the tab action is interactive.
+     * @param {string} [props.tooltip="Edit"] - Tooltip text displayed when hovering over the tab action icon.
+     * @returns {JSX.Element} The tab component.
+     */
+    function Tab(props?: {
+        icon?: React.ReactNode;
+        selected?: boolean;
+        content: string | React.ReactNode;
+        onClick?: Function;
+        onAction?: Function;
+        accessory?: React.ReactNode;
+        interactive?: boolean;
+        tooltip?: string;
+    }): JSX.Element;
+    /**
+     * Filters.TextField - A subcomponent for the query text field.
+     *
+     * @component
+     * @param {Object} props - The component props.
+     * @param {string} [props.queryValue] - The current value of the text field.
+     * @param {Function} [props.onQueryChange] - Callback for when the text field value changes.
+     * @param {Function} [props.onQueryBlur] - Callback for when the text field loses focus.
+     * @param {Function} [props.onQueryFocus] - Callback for when the text field gains focus.
+     * @param {Function} [props.onQueryClear] - Callback for clearing the text field.
+     * @param {string} [props.queryPlaceholder="Search"] - Placeholder text for the text field.
+     * @param {boolean} [props.subdued=false] - Whether the text field appears subdued.
+     * @param {boolean} [props.disableQueryField=false] - Whether the text field is disabled.
+     * @param {boolean} [props.transparent=true] - Whether the text field has a transparent background.
+     * @returns {JSX.Element} The text field component.
+     */
+    function TextField(props?: {
+        queryValue?: string;
+        onQueryChange?: Function;
+        onQueryBlur?: Function;
+        onQueryFocus?: Function;
+        onQueryClear?: Function;
+        queryPlaceholder?: string;
+        subdued?: boolean;
+        disableQueryField?: boolean;
+        transparent?: boolean;
+    }): JSX.Element;
+    namespace TextField {
+        let displayName_2: string;
+        export { displayName_2 as displayName };
+    }
+}
+import React from "react";
+//# sourceMappingURL=Filters.d.ts.map

package/dist/types/components/Filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filters.d.ts","sourceRoot":"","sources":["../../../components/Filters.js"],"names":[],"mappings":";AAgDA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,gCA5BG;IAOU,OAAO,EAPT,KAAK,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;KACtB,CAAC;IAKQ,cAAc,EAJhB,KAAK,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;KACtB,CAAC;IACuB,UAAU;IACX,aAAa,GAA7B,OAAO;IACS,gBAAgB,GAAhC,OAAO;IACS,MAAM,GAAtB,OAAO;IACQ,UAAU,GAAzB,MAAM;IACW,aAAa;IACb,WAAW;IACX,YAAY;IACZ,YAAY;IACd,gBAAgB,GAA/B,MAAM;IACU,iCAAiC,GAAjD,OAAO;IACS,iBAAiB,GAAjC,OAAO;IACQ,SAAS,GAAxB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,GAAC,IAAI,CA+P5B;;IA0CD;;;;;;;;;;;OAWG;IACH,sBAPG;QAAsB,KAAK,EAAnB,MAAM;QACU,OAAO,GAAvB,OAAO;QACS,QAAQ,GAAxB,OAAO;QACS,WAAW,GAA3B,OAAO;QACU,OAAO;KAChC,GAAU,GAAG,CAAC,OAAO,CA4CvB;;;;IA2BD;;;;;;;;;;OAUG;IACH,sBANG;QAAqB,IAAI;QACF,gBAAgB;QACjB,QAAQ,EAAtB,MAAM;QACU,QAAQ;KAChC,GAAU,GAAG,CAAC,OAAO,CAoKvB;;;;;IAkDD;;;;;;;;;;;;;;OAcG;IACH,qBAVG;QAAgC,IAAI,GAA5B,KAAK,CAAC,SAAS;QACC,QAAQ,GAAxB,OAAO;QACuB,OAAO,EAArC,MAAM,GAAC,KAAK,CAAC,SAAS;QACL,OAAO;QACP,QAAQ;QACD,SAAS,GAAjC,KAAK,CAAC,SAAS;QACC,WAAW,GAA3B,OAAO;QACQ,OAAO,GAAtB,MAAM;KACd,GAAU,GAAG,CAAC,OAAO,CA+DvB;IAED;;;;;;;;;;;;;;;OAeG;IACH,2BAXG;QAAuB,UAAU,GAAzB,MAAM;QACW,aAAa;QACb,WAAW;QACX,YAAY;QACZ,YAAY;QACd,gBAAgB,GAA/B,MAAM;QACU,OAAO,GAAvB,OAAO;QACS,iBAAiB,GAAjC,OAAO;QACS,WAAW,GAA3B,OAAO;KACf,GAAU,GAAG,CAAC,OAAO,CA+BvB;;;;;;kBAlyB8D,OAAO"}

package/dist/types/components/FooterHelp.d.ts

@@ -0,0 +1,21 @@
+export default FooterHelp;
+/**
+ * Renders a `FooterHelp` component, which provides additional information
+ * or guidance to users, typically displayed at the bottom of a page. The component
+ * centers its content within a rounded, styled box that includes an icon and customizable text.
+ *
+ * @component
+ * @param {Object} [props] - The props for the FooterHelp component.
+ * @param {React.ReactNode} [props.children] - The content to display next to the information icon.
+ * This is typically a text string or any valid React node.
+ *
+ * @returns {JSX.Element} The rendered FooterHelp component.
+ *
+ * @example
+ * // Basic usage:
+ * <FooterHelp>Need more help? Contact support.</FooterHelp>
+ */
+declare function FooterHelp(props?: {
+    children?: React.ReactNode;
+}): JSX.Element;
+//# sourceMappingURL=FooterHelp.d.ts.map

package/dist/types/components/FooterHelp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FooterHelp.d.ts","sourceRoot":"","sources":["../../../components/FooterHelp.js"],"names":[],"mappings":";AAGA;;;;;;;;;;;;;;;GAeG;AAEH,oCAVG;IAAgC,QAAQ,GAAhC,KAAK,CAAC,SAAS;CAGvB,GAAU,GAAG,CAAC,OAAO,CAkBvB"}

package/dist/types/components/Form.d.ts

@@ -0,0 +1,39 @@
+export default Form;
+/**
+ * A reusable Form component that provides a structured HTML form with customizable attributes and submission handling.
+ *
+ * @component
+ * @param {Object} [props={}] - The properties passed to the component.
+ * @param {string} [props.acceptCharset] - The character encoding that the form accepts.
+ * @param {string} [props.action] - The URL where the form data should be submitted.
+ * @param {string} [props.autoComplete] - Whether the form should have autocomplete enabled. Can be "on" or "off".
+ * @param {React.ReactNode} [props.children] - The child elements to be rendered inside the form.
+ * @param {string} [props.encType] - The encoding type for the form submission (e.g., "multipart/form-data", "application/x-www-form-urlencoded").
+ * @param {string} [props.method="post"] - The HTTP method for the form submission. Can be "get", "post", etc.
+ * @param {string} [props.name] - The name attribute for the form element.
+ * @param {boolean} [props.noValidate] - Whether to disable HTML5 form validation.
+ * @param {boolean} [props.preventDefault=true] - Whether to prevent the default form submission behavior.
+ * @param {string} [props.target] - The target window or frame for the form submission (e.g., "_blank", "_self").
+ * @param {Function} [props.onSubmit] - The function to call when the form is submitted. Receives the form event as a parameter.
+ * @returns {JSX.Element} The rendered form component.
+ *
+ * @example
+ * <Form onSubmit={(event) => console.log('Form submitted')}>
+ *   <TextField label="Name" />
+ *   <Button submit>Submit</Button>
+ * </Form>
+ */
+declare function Form(props?: {
+    acceptCharset?: string;
+    action?: string;
+    autoComplete?: string;
+    children?: React.ReactNode;
+    encType?: string;
+    method?: string;
+    name?: string;
+    noValidate?: boolean;
+    preventDefault?: boolean;
+    target?: string;
+    onSubmit?: Function;
+}): JSX.Element;
+//# sourceMappingURL=Form.d.ts.map

package/dist/types/components/Form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.d.ts","sourceRoot":"","sources":["../../../components/Form.js"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,8BAnBG;IAAuB,aAAa,GAA5B,MAAM;IACS,MAAM,GAArB,MAAM;IACS,YAAY,GAA3B,MAAM;IACkB,QAAQ,GAAhC,KAAK,CAAC,SAAS;IACA,OAAO,GAAtB,MAAM;IACS,MAAM,GAArB,MAAM;IACS,IAAI,GAAnB,MAAM;IACU,UAAU,GAA1B,OAAO;IACS,cAAc,GAA9B,OAAO;IACQ,MAAM,GAArB,MAAM;IACW,QAAQ;CACjC,GAAU,GAAG,CAAC,OAAO,CA+CvB"}

package/dist/types/components/Frame.d.ts

@@ -0,0 +1,51 @@
+export function useFrame(): {
+    embedded: boolean;
+    paneIsOpen: boolean;
+    setPaneIsOpen: () => void;
+    modalIsOpen: boolean;
+    setModalIsOpen: () => void;
+    showMobileNavigation: boolean;
+    contentIsInIframe: boolean;
+    contentIsFullPage: boolean;
+    setShowMobileNavigation: () => void;
+    setContentIsInIframe: () => void;
+    setContentIsFullPage: () => void;
+};
+export default Frame;
+/**
+ * Frame component that provides a layout structure with top bar, navigation, logo, and content.
+ * @param {Object} props - Props for the Frame component.
+ * @param {React.ReactNode} props.navigation - Component to render as the navigation menu.
+ * @param {React.ReactNode} props.announcement - Component to render an announcement bar.
+ * @param {Object} props.logo - Logo configuration.
+ * @param {string} props.logo.url - URL for the logo link.
+ * @param {string} props.logo.source - Source for the logo image.
+ * @param {string} props.logo.accessibilityLabel - Accessibility label for the logo image.
+ * @param {number} props.logo.width - Width of the logo image.
+ * @param {boolean} props.showSearchTrigger - Whether to show the search trigger.
+ * @param {React.ReactNode} props.searchModal - Modal to render as the search modal.
+ * @param {function} props.onToggleSearchModal - Function to toggle the search modal.
+ * @param {string} [props.className] - Additional CSS classes for the Frame.
+ * @param {React.ReactNode} props.children - Content to render within the Frame.
+ * @param {boolean} [props.alwaysShowUserMenuInTopBar] - Whether to always show the user menu in the top bar.
+ * @param {React.ReactNode} [props.headerAccessory] - Accessory to render in the header.
+ * @returns {React.ReactElement} The rendered Frame component.
+ */
+declare function Frame({ navigation, announcement, logo, children, className, userMenu, moreActions, showSearchTrigger, alwaysShowUserMenuInTopBar, searchModal, onToggleSearchModal, headerAccessory, }: {
+    navigation: React.ReactNode;
+    announcement: React.ReactNode;
+    logo: {
+        url: string;
+        source: string;
+        accessibilityLabel: string;
+        width: number;
+    };
+    showSearchTrigger: boolean;
+    searchModal: React.ReactNode;
+    onToggleSearchModal: Function;
+    className?: string;
+    children: React.ReactNode;
+    alwaysShowUserMenuInTopBar?: boolean;
+    headerAccessory?: React.ReactNode;
+}): React.ReactElement;
+//# sourceMappingURL=Frame.d.ts.map

package/dist/types/components/Frame.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Frame.d.ts","sourceRoot":"","sources":["../../../components/Frame.js"],"names":[],"mappings":"AA8UO;;;;;;;;;;;;EAMN;;AAtOD;;;;;;;;;;;;;;;;;;GAkBG;AACH,0MAhBG;IAA+B,UAAU,EAAjC,KAAK,CAAC,SAAS;IACQ,YAAY,EAAnC,KAAK,CAAC,SAAS;IACD,IAAI,EAC1B;QAA2B,GAAG,EAAtB,MAAM;QACa,MAAM,EAAzB,MAAM;QACa,kBAAkB,EAArC,MAAM;QACa,KAAK,EAAxB,MAAM;KACd;IAAuB,iBAAiB,EAAhC,OAAO;IACgB,WAAW,EAAlC,KAAK,CAAC,SAAS;IACC,mBAAmB;IACpB,SAAS,GAAxB,MAAM;IACiB,QAAQ,EAA/B,KAAK,CAAC,SAAS;IACC,0BAA0B,GAA1C,OAAO;IACiB,eAAe,GAAvC,KAAK,CAAC,SAAS;CACvB,GAAU,KAAK,CAAC,YAAY,CA6M9B"}

package/dist/types/components/FrameSaveBar.d.ts

@@ -0,0 +1,8 @@
+export default FrameSaveBar;
+/**
+ * FrameSaveBar component sisplays a save bar at the top of the screen with contextual save and discard actions.
+ * @param {Object} props.logo - Logo configuration.
+ * @returns {JSX.Element} The rendered FrameSaveBar component
+ */
+declare function FrameSaveBar({ logo }: any): JSX.Element;
+//# sourceMappingURL=FrameSaveBar.d.ts.map

package/dist/types/components/FrameSaveBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FrameSaveBar.d.ts","sourceRoot":"","sources":["../../../components/FrameSaveBar.js"],"names":[],"mappings":";AAqDA;;;;GAIG;AACH,8CAFa,GAAG,CAAC,OAAO,CAkGvB"}

package/dist/types/components/Grid.d.ts

@@ -0,0 +1,39 @@
+export default Grid;
+/**
+ * Tailwind-based Grid component with customizable columns, gaps, alignment, and justification.
+ *
+ * @param {object} [props={}] - Props for the Grid component.
+ * @param {React.ReactNode} [props.children] - Content to render inside the Grid.
+ * @param {number|object} [props.columns] - Defines the number of columns in the grid. Can be a single number or an object with breakpoints as keys.
+ * @param {number|object} [props.gap] - Defines the gap between grid items. Can be a single number or an object with breakpoints as keys.
+ * @param {"stretch"|"start"|"end"|"center"} [props.justify="stretch"] - Horizontal alignment of the grid items.
+ * @param {"stretch"|"start"|"end"|"center"} [props.align="stretch"] - Vertical alignment of the grid items.
+ * @param {string} [props.className] - Additional class names to apply to the grid.
+ * @returns {JSX.Element} A div element representing the grid container.
+ */
+declare function Grid(props?: {
+    children?: React.ReactNode;
+    columns?: number | object;
+    gap?: number | object;
+    justify?: "stretch" | "start" | "end" | "center";
+    align?: "stretch" | "start" | "end" | "center";
+    className?: string;
+}): JSX.Element;
+declare namespace Grid {
+    export { Cell };
+}
+/**
+ * Cell component for the Grid, allowing column span customization.
+ *
+ * @param {object} [props={}] - Props for the Cell component.
+ * @param {number|object} [props.columnSpan] - Defines the column span for the cell. Can be a single number or an object with breakpoints as keys.
+ * @param {React.ReactNode} [props.children] - Content to render inside the cell.
+ * @param {string} [props.className] - Additional class names to apply to the cell.
+ * @returns {JSX.Element} A div element representing a grid cell.
+ */
+declare function Cell(props?: {
+    columnSpan?: number | object;
+    children?: React.ReactNode;
+    className?: string;
+}): JSX.Element;
+//# sourceMappingURL=Grid.d.ts.map

package/dist/types/components/Grid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../components/Grid.js"],"names":[],"mappings":";AAwBA;;;;;;;;;;;GAWG;AACH,8BARG;IAAgC,QAAQ,GAAhC,KAAK,CAAC,SAAS;IACO,OAAO,GAA7B,MAAM,GAAC,MAAM;IACS,GAAG,GAAzB,MAAM,GAAC,MAAM;IAC4B,OAAO,GAAhD,SAAS,GAAC,OAAO,GAAC,KAAK,GAAC,QAAQ;IACS,KAAK,GAA9C,SAAS,GAAC,OAAO,GAAC,KAAK,GAAC,QAAQ;IACjB,SAAS,GAAxB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,CAyCvB;;;;AAED;;;;;;;;GAQG;AACH,8BALG;IAA8B,UAAU,GAAhC,MAAM,GAAC,MAAM;IACW,QAAQ,GAAhC,KAAK,CAAC,SAAS;IACA,SAAS,GAAxB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,CAwBvB"}

package/dist/types/components/HorizontalStack.d.ts

@@ -0,0 +1,36 @@
+export default HorizontalStack;
+/**
+ * HorizontalStack Component
+ *
+ * A flexible horizontal stack component with customizable spacing, alignment, and wrapping.
+ *
+ * @param {Object} [props={}] - Component props.
+ * @param {string} [props.as='div'] - The HTML element to render. Defaults to `div`.
+ * @param {React.ReactNode} [props.children] - Child elements to render inside the stack.
+ * @param {string} [props.gap] - Spacing between children. Options: 'none', '0', 'px', '0.5', '1', '2', '3', '4', '6', '8', '10'.
+ * @param {string} [props.id] - Optional ID for the component.
+ * @param {string} [props.className] - Additional custom class names to apply to the component.
+ * @param {string} [props.align='start'] - Horizontal alignment of children. Options: 'start', 'center', 'end'.
+ * @param {string} [props.blockAlign='start'] - Vertical alignment of children. Options: 'start', 'center', 'end'.
+ * @param {boolean} [props.wrap=true] - Whether children should wrap to the next line if necessary. Defaults to `true`.
+ * @param {Object} [restProps] - Additional props passed to the root element.
+ *
+ * @returns {JSX.Element} The rendered HorizontalStack component.
+ *
+ * @example
+ * <HorizontalStack gap="2" align="center" blockAlign="start" wrap={false}>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </HorizontalStack>
+ */
+declare function HorizontalStack(props?: {
+    as?: string;
+    children?: React.ReactNode;
+    gap?: string;
+    id?: string;
+    className?: string;
+    align?: string;
+    blockAlign?: string;
+    wrap?: boolean;
+}): JSX.Element;
+//# sourceMappingURL=HorizontalStack.d.ts.map

package/dist/types/components/HorizontalStack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HorizontalStack.d.ts","sourceRoot":"","sources":["../../../components/HorizontalStack.js"],"names":[],"mappings":";AA0CA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,yCAnBG;IAAuB,EAAE,GAAjB,MAAM;IACkB,QAAQ,GAAhC,KAAK,CAAC,SAAS;IACA,GAAG,GAAlB,MAAM;IACS,EAAE,GAAjB,MAAM;IACS,SAAS,GAAxB,MAAM;IACS,KAAK,GAApB,MAAM;IACS,UAAU,GAAzB,MAAM;IACU,IAAI,GAApB,OAAO;CACf,GAEU,GAAG,CAAC,OAAO,CAwCvB"}

package/dist/types/components/Icon.d.ts

@@ -0,0 +1,43 @@
+export default Icon;
+/**
+ * A Component that renders an icon with customizable size, color, and display style, using Shopify Polaris icons.
+ * The icon adapts styling based on the provided props and supports a range of color schemes and sizes.
+ *
+ * @component
+ *
+ * @param {Object} props - The properties for configuring the Component.
+ * @param {Object} props.source - The source icon component from `@shopify/polaris-icons`. Should be a valid Polaris icon component.
+ * @param {('white'|'default'|'base'|'subdued'|'link'|'primary'|'alternate'|'successFgAlternate'|'success'|'fg-success'|'critical'|'fg-critical'|'criticalFgAlternate'|'warning'|'info'|'caution'|'attention'|'highlight'|'neutral'|'normal'|'disabled'|'active'|'btn-primary-icon'|'btn-secondary-icon'|'btn-plain-icon'|'btn-link-icon'|'btn-destructive-icon'|'btn-highlight-icon'|'inputFg'|'inputFgDisabled'|'success-icon'|'critical-icon'|'warning-icon'|'attention-icon'|'info-icon'|'highlight-icon'|'insight-icon'|'neutral-icon'|'success-alt-icon'|'critical-alt-icon'|'warning-alt-icon'|'attention-alt-icon'|'info-alt-icon'|'highlight-alt-icon'|'insight-alt-icon'|'neutral-alt-icon')} [props.color="default"] - The color variant for the icon.
+ * @param {('white'|'default'|'base'|'subdued'|'link'|'primary'|'alternate'|'success'|'critical'|'warning'|'info'|'caution'|'attention'|'highlight'|'neutral'|'normal'|'disabled'|'active'|'btn-primary-icon'|'btn-secondary-icon'|'btn-plain-icon'|'btn-link-icon'|'btn-destructive-icon'|'btn-highlight-icon'|'inputFg'|'inputFgDisabled'|'success-icon'|'critical-icon'|'warning-icon'|'attention-icon'|'info-icon'|'highlight-icon'|'insight-icon'|'neutral-icon'|'success-alt-icon'|'critical-alt-icon'|'warning-alt-icon'|'attention-alt-icon'|'info-alt-icon'|'highlight-alt-icon'|'insight-alt-icon'|'neutral-alt-icon')} [props.hoverColor] - The hover color variant for the icon.
+ * @param {('block'|'flex'|'inline'|'inline-block'|'inline-flex')} [props.display="block"] - Determines the display type for the icon container.
+ * @param {('xs'|'sm'|'default'|'lg'|'xl'|'2xl')} [props.size="default"] - Sets the icon size.
+ *   - 'xs': Extra small (12px)
+ *   - 'sm': Small (16px)
+ *   - 'default': Medium (20px)
+ *   - 'lg': Large (24px)
+ *   - 'xl': Extra large (28px)
+ *   - '2xl': Double extra large (32px)
+ * @param {boolean} [props.stroke=false] - Whether to use stroke styling instead of fill.
+ * @param {Function} [props.onClick] - Click handler for the icon.
+ * @param {string} [props.className] - Additional CSS classes to apply.
+ * @returns {JSX.Element} The rendered icon component with the specified styles.
+ *
+ * @example
+ * <Icon
+ *   source={PolarisIcons.TickMinor}
+ *   color="success"
+ *   display="inline"
+ *   size="lg"
+ * />
+ */
+declare function Icon(props?: {
+    source: any;
+    color?: ("white" | "default" | "base" | "subdued" | "link" | "primary" | "alternate" | "successFgAlternate" | "success" | "fg-success" | "critical" | "fg-critical" | "criticalFgAlternate" | "warning" | "info" | "caution" | "attention" | "highlight" | "neutral" | "normal" | "disabled" | "active" | "btn-primary-icon" | "btn-secondary-icon" | "btn-plain-icon" | "btn-link-icon" | "btn-destructive-icon" | "btn-highlight-icon" | "inputFg" | "inputFgDisabled" | "success-icon" | "critical-icon" | "warning-icon" | "attention-icon" | "info-icon" | "highlight-icon" | "insight-icon" | "neutral-icon" | "success-alt-icon" | "critical-alt-icon" | "warning-alt-icon" | "attention-alt-icon" | "info-alt-icon" | "highlight-alt-icon" | "insight-alt-icon" | "neutral-alt-icon");
+    hoverColor?: ("white" | "default" | "base" | "subdued" | "link" | "primary" | "alternate" | "success" | "critical" | "warning" | "info" | "caution" | "attention" | "highlight" | "neutral" | "normal" | "disabled" | "active" | "btn-primary-icon" | "btn-secondary-icon" | "btn-plain-icon" | "btn-link-icon" | "btn-destructive-icon" | "btn-highlight-icon" | "inputFg" | "inputFgDisabled" | "success-icon" | "critical-icon" | "warning-icon" | "attention-icon" | "info-icon" | "highlight-icon" | "insight-icon" | "neutral-icon" | "success-alt-icon" | "critical-alt-icon" | "warning-alt-icon" | "attention-alt-icon" | "info-alt-icon" | "highlight-alt-icon" | "insight-alt-icon" | "neutral-alt-icon");
+    display?: ("block" | "flex" | "inline" | "inline-block" | "inline-flex");
+    size?: ("xs" | "sm" | "default" | "lg" | "xl" | "2xl");
+    stroke?: boolean;
+    onClick?: Function;
+    className?: string;
+}): JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map

package/dist/types/components/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../components/Icon.js"],"names":[],"mappings":";AA2MA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,8BAzBG;IAAsB,MAAM;IACgpB,KAAK,GAAzqB,CAAC,OAAO,GAAC,SAAS,GAAC,MAAM,GAAC,SAAS,GAAC,MAAM,GAAC,SAAS,GAAC,WAAW,GAAC,oBAAoB,GAAC,SAAS,GAAC,YAAY,GAAC,UAAU,GAAC,aAAa,GAAC,qBAAqB,GAAC,SAAS,GAAC,MAAM,GAAC,SAAS,GAAC,WAAW,GAAC,WAAW,GAAC,SAAS,GAAC,QAAQ,GAAC,UAAU,GAAC,QAAQ,GAAC,kBAAkB,GAAC,oBAAoB,GAAC,gBAAgB,GAAC,eAAe,GAAC,sBAAsB,GAAC,oBAAoB,GAAC,SAAS,GAAC,iBAAiB,GAAC,cAAc,GAAC,eAAe,GAAC,cAAc,GAAC,gBAAgB,GAAC,WAAW,GAAC,gBAAgB,GAAC,cAAc,GAAC,cAAc,GAAC,kBAAkB,GAAC,mBAAmB,GAAC,kBAAkB,GAAC,oBAAoB,GAAC,eAAe,GAAC,oBAAoB,GAAC,kBAAkB,GAAC,kBAAkB,CAAC;IAC7D,UAAU,GAAxmB,CAAC,OAAO,GAAC,SAAS,GAAC,MAAM,GAAC,SAAS,GAAC,MAAM,GAAC,SAAS,GAAC,WAAW,GAAC,SAAS,GAAC,UAAU,GAAC,SAAS,GAAC,MAAM,GAAC,SAAS,GAAC,WAAW,GAAC,WAAW,GAAC,SAAS,GAAC,QAAQ,GAAC,UAAU,GAAC,QAAQ,GAAC,kBAAkB,GAAC,oBAAoB,GAAC,gBAAgB,GAAC,eAAe,GAAC,sBAAsB,GAAC,oBAAoB,GAAC,SAAS,GAAC,iBAAiB,GAAC,cAAc,GAAC,eAAe,GAAC,cAAc,GAAC,gBAAgB,GAAC,WAAW,GAAC,gBAAgB,GAAC,cAAc,GAAC,cAAc,GAAC,kBAAkB,GAAC,mBAAmB,GAAC,kBAAkB,GAAC,oBAAoB,GAAC,eAAe,GAAC,oBAAoB,GAAC,kBAAkB,GAAC,kBAAkB,CAAC;IACthB,OAAO,GAAtE,CAAC,OAAO,GAAC,MAAM,GAAC,QAAQ,GAAC,cAAc,GAAC,aAAa,CAAC;IACR,IAAI,GAAlD,CAAC,IAAI,GAAC,IAAI,GAAC,SAAS,GAAC,IAAI,GAAC,IAAI,GAAC,KAAK,CAAC;IAOrB,MAAM,GAAtB,OAAO;IACU,OAAO;IACT,SAAS,GAAxB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,CAqDvB"}