@heymantle/litho 0.0.3 → 0.0.5

package/dist/esm/tailwind.config.js

@@ -0,0 +1,7 @@
+/** @type {import('tailwindcss').Config} */ export default {
+    content: [
+        "./components/**/*.{js,jsx,ts,tsx}",
+        "./stories/**/*.{js,jsx,ts,tsx,mdx}",
+        "./.storybook/**/*.{js,jsx,ts,tsx}"
+    ]
+};

package/dist/esm/utilities/transformers.js

@@ -0,0 +1,47 @@
+export var transformStorySource = function(code) {
+    // Look for render function and extract its content
+    // This regex looks for render: () => and captures everything until the next comma or end of string
+    var renderMatch = code.match(/render:\s*\(\)\s*=>\s*([\s\S]*?)(?=,\s*parameters|,\s*args|$)/);
+    if (renderMatch) {
+        var jsxContent = renderMatch[1].trim();
+        // Handle different ways the JSX might end
+        // Remove trailing semicolon only if it's the very last character
+        if (jsxContent.endsWith(';')) {
+            jsxContent = jsxContent.slice(0, -1).trim();
+        }
+        // If the content is wrapped in parentheses, remove them
+        if (jsxContent.startsWith('(') && jsxContent.endsWith(')')) {
+            jsxContent = jsxContent.slice(1, -1).trim();
+        }
+        return jsxContent;
+    }
+    return code;
+};
+// Extract only specific components (e.g., only Box components)
+export var extractComponents = function(componentName) {
+    return function(code) {
+        var componentRegex = new RegExp("<".concat(componentName, "[^>]*>[\\s\\S]*?<\\/").concat(componentName, ">"), 'g');
+        var matches = code.match(componentRegex);
+        if (matches) {
+            return matches.join('\n\n');
+        }
+        return code;
+    };
+};
+// Extract render content and remove wrapper elements
+export var extractRenderContent = function(code) {
+    var renderMatch = code.match(/render:\s*\(\)\s*=>\s*([\s\S]*?)(?=,\s*parameters|,\s*args|$)/);
+    if (renderMatch) {
+        var jsxContent = renderMatch[1].trim();
+        // Remove trailing semicolon
+        if (jsxContent.endsWith(';')) {
+            jsxContent = jsxContent.slice(0, -1).trim();
+        }
+        // Remove wrapper parentheses
+        if (jsxContent.startsWith('(') && jsxContent.endsWith(')')) {
+            jsxContent = jsxContent.slice(1, -1).trim();
+        }
+        return jsxContent;
+    }
+    return code;
+};

package/dist/esm/vite.config.js

@@ -0,0 +1,20 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import tailwind from "@tailwindcss/postcss";
+export default defineConfig({
+    plugins: [
+        react()
+    ],
+    esbuild: {
+        loader: 'jsx',
+        include: /src\/.*\.[jt]sx?$/,
+        exclude: []
+    },
+    optimizeDeps: {
+        esbuildOptions: {
+            loader: {
+                '.js': 'jsx'
+            }
+        }
+    }
+});

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

@@ -0,0 +1,122 @@
+export default ActionList;
+export type SecondaryAction = {
+    /**
+     * - The icon to display for the secondary action.
+     */
+    icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    /**
+     * - The tooltip to display for the secondary action.
+     */
+    tooltip: string;
+    /**
+     * - The function to call when the secondary action is selected.
+     */
+    onAction: Function;
+};
+export type ActionListSection = {
+    /**
+     * - The title of the section.
+     */
+    title: string;
+    /**
+     * - The items to display in the section.
+     */
+    items: Array<ActionListItem>;
+};
+/**
+ * - An object representing an item in the action list.
+ */
+export type ActionListItem = {
+    /**
+     * - The text content of the action item.
+     */
+    content: string;
+    /**
+     * - Whether the action item is disabled.
+     */
+    disabled: boolean;
+    /**
+     * - Whether the action item is destructive.
+     */
+    destructive: boolean;
+    /**
+     * - The icon to display for the action item.
+     */
+    icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
+    /**
+     * - The function to call when the action item is selected.
+     */
+    onAction: Function;
+    /**
+     * - The prefix to display for the action item.
+     */
+    prefix: React.ReactNode;
+    /**
+     * - The image to display for the action item.
+     */
+    imageUrl: string;
+    /**
+     * - The URL to navigate to when the action item is selected.
+     */
+    url: string;
+    /**
+     * - The secondary action to display for the action item.
+     */
+    secondaryAction: SecondaryAction;
+};
+/**
+ * @typedef {Object} SecondaryAction
+ * @property {React.FunctionComponent<React.SVGProps<SVGSVGElement>>} icon - The icon to display for the secondary action.
+ * @property {string} tooltip - The tooltip to display for the secondary action.
+ * @property {function} onAction - The function to call when the secondary action is selected.
+ */
+/**
+ * @typedef {Object} ActionListSection
+ * @property {string} title - The title of the section.
+ * @property {Array<ActionListItem>} items - The items to display in the section.
+ */
+/**
+ * @typedef {Object} ActionListItem - An object representing an item in the action list.
+ * @property {string} content - The text content of the action item.
+ * @property {boolean} disabled - Whether the action item is disabled.
+ * @property {boolean} destructive - Whether the action item is destructive.
+ * @property {React.FunctionComponent<React.SVGProps<SVGSVGElement>>} icon - The icon to display for the action item.
+ * @property {function} onAction - The function to call when the action item is selected.
+ * @property {React.ReactNode} prefix - The prefix to display for the action item.
+ * @property {string} imageUrl - The image to display for the action item.
+ * @property {string} url - The URL to navigate to when the action item is selected.
+ * @property {SecondaryAction} secondaryAction - The secondary action to display for the action item.
+ */
+/**
+ * ActionList component renders a list of actionable items with optional sections.
+ * Supports keyboard navigation and action triggers on item selection.
+ *
+ * @component
+ * @param {Object} props - Component properties.
+ * @param {Array<{title: string, items: Array<ActionListItem>}>} [props.sections] - Sections containing items for the action list.
+ * @param {Array<ActionListItem>} [props.items] - List of items to render in the action list when no sections are provided.
+ * @param {string} [props.iconColor="subdued"] - Default color for icons in the action items.
+ * @param {function} [props.onActionAnyItem] - Callback function invoked whenever any action item is selected.
+ * @param {boolean} [props.fullWidth=false] - Whether to apply full width styling to the action list.
+ * @param {boolean} [props.padded=true] - Whether to apply padding to the action list.
+ * @param {string} [props.className] - Additional CSS classes to apply to the action list.
+ * @example
+ * const items = [{ content: 'Item 1', onAction: () => {} }];
+ * <ActionList items={items} />
+ *
+ * @returns {JSX.Element} The rendered ActionList component.
+ */
+declare function ActionList(props?: {
+    sections?: Array<{
+        title: string;
+        items: Array<ActionListItem>;
+    }>;
+    items?: Array<ActionListItem>;
+    iconColor?: string;
+    onActionAnyItem?: Function;
+    fullWidth?: boolean;
+    padded?: boolean;
+    className?: string;
+}): JSX.Element;
+import React from "react";
+//# sourceMappingURL=ActionList.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActionList.d.ts","sourceRoot":"","sources":["../../../components/ActionList.js"],"names":[],"mappings":";;;;;UAoDc,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;;;;aACtD,MAAM;;;;;;;;;;WAMN,MAAM;;;;WACN,KAAK,CAAC,cAAc,CAAC;;;;;;;;;aAKrB,MAAM;;;;cACN,OAAO;;;;iBACP,OAAO;;;;UACP,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;;;;;;;;YAEtD,KAAK,CAAC,SAAS;;;;cACf,MAAM;;;;SACN,MAAM;;;;qBACN,eAAe;;AAvB7B;;;;;GAKG;AAEH;;;;GAIG;AAEH;;;;;;;;;;;GAWG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AAEH,oCAdG;IAAqE,QAAQ,GAArE,KAAK,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAA;KAAC,CAAC;IACtB,KAAK,GAAnC,KAAK,CAAC,cAAc,CAAC;IACN,SAAS,GAAxB,MAAM;IACW,eAAe;IAChB,SAAS,GAAzB,OAAO;IACS,MAAM,GAAtB,OAAO;IACQ,SAAS,GAAxB,MAAM;CACd,GAIU,GAAG,CAAC,OAAO,CA0MvB;kBArSwC,OAAO"}

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

@@ -0,0 +1,21 @@
+export default AnnouncementBar;
+/**
+ * AnnouncementBar Component
+ *
+ * @param {Object} props - Component properties.
+ * @param {Function} [props.onClick] - Click handler function.
+ * @param {string} props.content - Text content to be displayed.
+ * @param {string} [props.icon] - Icon source name.
+ * @param {"bounce"} [props.animateIcon] - Animation type for the icon.
+ * @param {boolean} [props.fixed] - Whether to fix the announcement bar to the top of the page.
+ *
+ * @returns {JSX.Element} AnnouncementBar component.
+ */
+declare function AnnouncementBar(props?: {
+    onClick?: Function;
+    content: string;
+    icon?: string;
+    animateIcon?: "bounce";
+    fixed?: boolean;
+}): JSX.Element;
+//# sourceMappingURL=AnnouncementBar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnnouncementBar.d.ts","sourceRoot":"","sources":["../../../components/AnnouncementBar.js"],"names":[],"mappings":";AA0BA;;;;;;;;;;;GAWG;AACH,yCARG;IAAyB,OAAO;IACV,OAAO,EAArB,MAAM;IACS,IAAI,GAAnB,MAAM;IACW,WAAW,GAA5B,QAAQ;IACQ,KAAK,GAArB,OAAO;CAEf,GAAU,GAAG,CAAC,OAAO,CAsBvB"}

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

@@ -0,0 +1,61 @@
+/**
+ * @typedef {Object} DarkModeContextType
+ * @property {boolean} darkModeAvailable - Whether dark mode is available.
+ * @property {boolean} darkMode - Whether dark mode is enabled.
+ * @property {(darkMode: boolean) => void} toggleDarkMode - Toggle dark mode.
+ * @property {(darkModeAvailable: boolean) => void} setDarkModeAvailable - Set dark mode availability.
+ */
+export const DarkModeContext: React.Context<any>;
+export function useDarkMode(): DarkModeContextType;
+export const FrameContext: React.Context<{
+    embedded: boolean;
+    paneIsOpen: boolean;
+    setPaneIsOpen: () => void;
+    modalIsOpen: boolean;
+    setModalIsOpen: () => void;
+    showMobileNavigation: boolean;
+    contentIsInIframe: boolean;
+    contentIsFullPage: boolean;
+    setShowMobileNavigation: () => void;
+    setContentIsInIframe: () => void;
+    setContentIsFullPage: () => void;
+}>;
+export const FormContext: React.Context<any>;
+export default AppProvider;
+export type DarkModeContextType = {
+    /**
+     * - Whether dark mode is available.
+     */
+    darkModeAvailable: boolean;
+    /**
+     * - Whether dark mode is enabled.
+     */
+    darkMode: boolean;
+    /**
+     * - Toggle dark mode.
+     */
+    toggleDarkMode: (darkMode: boolean) => void;
+    /**
+     * - Set dark mode availability.
+     */
+    setDarkModeAvailable: (darkModeAvailable: boolean) => void;
+};
+import React from "react";
+/**
+ * Provider component for managing global application state.
+ * @param {Object} props
+ * @param {React.ReactNode} props.children - The child components.
+ * @param {boolean} props.embedded - Whether the app is embedded.
+ * @param {boolean} props.darkModeAvailable - Whether dark mode is enabled.
+ * @param {string} props.darkModeStorageKey - Local storage key for dark mode preference.
+ * @param {(darkMode: boolean) => void} props.onDarkModeChange - Callback when dark mode changes.
+ * @returns {JSX.Element}
+ */
+declare function AppProvider({ children, embedded, darkModeAvailable: _darkModeAvailable, darkModeStorageKey, onDarkModeChange, }: {
+    children: React.ReactNode;
+    embedded: boolean;
+    darkModeAvailable: boolean;
+    darkModeStorageKey: string;
+    onDarkModeChange: (darkMode: boolean) => void;
+}): JSX.Element;
+//# sourceMappingURL=AppProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AppProvider.d.ts","sourceRoot":"","sources":["../../../components/AppProvider.js"],"names":[],"mappings":"AAIA;;;;;;GAMG;AACH,iDAAmD;AAK5C,+BAFM,mBAAmB,CAe/B;AAED;;;;;;;;;;;;GAYG;AACH,6CAA+C;;;;;;uBAtCjC,OAAO;;;;cACP,OAAO;;;;oBACP,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI;;;;0BAC3B,CAAC,iBAAiB,EAAE,OAAO,KAAK,IAAI;;kBAPoB,OAAO;AAgF7E;;;;;;;;;GASG;AACH,mIAPG;IAA+B,QAAQ,EAA/B,KAAK,CAAC,SAAS;IACA,QAAQ,EAAvB,OAAO;IACQ,iBAAiB,EAAhC,OAAO;IACO,kBAAkB,EAAhC,MAAM;IAC6B,gBAAgB,EAAnD,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI;CACnC,GAAU,GAAG,CAAC,OAAO,CAsGvB"}

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

@@ -0,0 +1,135 @@
+export default Autocomplete;
+export type AutocompleteOption = {
+    /**
+     * - The label to display for the option.
+     */
+    label: string;
+    /**
+     * - The value to associate with the option.
+     */
+    value: string;
+    /**
+     * - An optional title to display for the option.
+     */
+    title?: string;
+    /**
+     * - Whether multiple options can be selected.
+     */
+    allowMultiple?: boolean;
+    /**
+     * - The value of the option that is currently selected.
+     */
+    selected?: string;
+    /**
+     * - The function to call when the option is selected.
+     */
+    onSelect?: Function;
+    /**
+     * - An optional array of sub-options to display for the option.
+     */
+    options?: Array<AutocompleteOption>;
+};
+export type AutocompleteEmptyState = {
+    /**
+     * - The content to display in the empty state.
+     */
+    content: string;
+    /**
+     * - An optional icon to display in the empty state.
+     */
+    icon: React.ReactNode;
+};
+/**
+ * @typedef {Object} AutocompleteOption
+ * @property {string} label - The label to display for the option.
+ * @property {string} value - The value to associate with the option.
+ * @property {string} [title] - An optional title to display for the option.
+ * @property {boolean} [allowMultiple] - Whether multiple options can be selected.
+ * @property {string} [selected] - The value of the option that is currently selected.
+ * @property {function} [onSelect] - The function to call when the option is selected.
+ * @property {Array<AutocompleteOption>} [options] - An optional array of sub-options to display for the option.
+ */
+/**
+ * @typedef {Object} AutocompleteEmptyState
+ * @property {string} content - The content to display in the empty state.
+ * @property {React.ReactNode} icon - An optional icon to display in the empty state.
+ */
+/**
+ * Autocomplete component that provides a flexible dropdown menu with search and selection capabilities.
+ *
+ * @component
+ * @param {Object} props - The props for the Autocomplete component.
+ * @param {Array<AutocompleteOption>} props.options - The options to display in the dropdown.
+ * @param {Array<string>} props.selected - The currently selected option values.
+ * @param {"below"|"above"} [props.preferredPosition="below"] - The preferred position of the dropdown relative to the activator.
+ * @param {"left"|"center"|"right"} [props.preferredAlignment="left"] - The preferred alignment of the dropdown.
+ * @param {boolean} [props.allowMultiple=false] - Whether multiple options can be selected.
+ * @param {boolean} [props.loading=false] - Whether to show a loading spinner in the dropdown.
+ * @param {AutocompleteEmptyState} [props.emptyState] - The content to display when there are no options.
+ * @param {function(Array<string>)} props.onSelect - Callback fired when the selection changes. Receives the new selected values.
+ * @param {React.ReactNode} props.textField - The activator for the dropdown, typically a `TextField` component.
+ * @param {string} [props.className] - Additional class names to apply to the component.
+ * @param {function} [props.onClose] - Callback fired when the dropdown closes.
+ * @param {number} [props.zIndexOverride] - Custom z-index for the dropdown.
+ *
+ * @example
+ * <Autocomplete
+ *   options={[{ label: "Option 1", value: "1" }, { label: "Option 2", value: "2" }]}
+ *   selected={["1"]}
+ *   allowMultiple
+ *   onSelect={(selected) => console.log(selected)}
+ *   textField={<Autocomplete.TextField placeholder="Search..." />}
+ * />
+ */
+declare function Autocomplete(props?: {
+    options: Array<AutocompleteOption>;
+    selected: Array<string>;
+    preferredPosition?: "below" | "above";
+    preferredAlignment?: "left" | "center" | "right";
+    allowMultiple?: boolean;
+    loading?: boolean;
+    emptyState?: AutocompleteEmptyState;
+    onSelect: (arg0: Array<string>) => any;
+    textField: React.ReactNode;
+    className?: string;
+    onClose?: Function;
+    zIndexOverride?: number;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace Autocomplete {
+    export let displayName: string;
+    export { AutocompleteTextField as TextField };
+}
+import React from "react";
+/**
+ * Autocomplete TextField component used as an activator for the Autocomplete dropdown.
+ *
+ * @component
+ * @param {Object} props - The props for the AutocompleteTextField component.
+ * @param {function} [props.onTextFieldFocus] - Callback fired when the TextField gains focus.
+ * @param {function} [props.onFocus] - Callback fired when the TextField gains focus (native TextField event).
+ * @param {string} [props.placeholder] - Placeholder text for the TextField.
+ * @param {string} [props.value] - The current value of the TextField.
+ * @param {string} [props.label] - The label for the TextField.
+ * @param {string} [props.labelHidden] - Whether to hide the label.
+ * @param {function} [props.onChange] - Callback fired when the TextField value changes.
+ *
+ * @example
+ * <Autocomplete.TextField
+ *   placeholder="Search..."
+ *   onTextFieldFocus={() => console.log("Focused")}
+ * />
+ */
+declare function AutocompleteTextField(props?: {
+    onTextFieldFocus?: Function;
+    onFocus?: Function;
+    placeholder?: string;
+    value?: string;
+    label?: string;
+    labelHidden?: string;
+    onChange?: Function;
+}): import("react/jsx-runtime").JSX.Element;
+declare namespace AutocompleteTextField {
+    let displayName_1: string;
+    export { displayName_1 as displayName };
+}
+//# sourceMappingURL=Autocomplete.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../../components/Autocomplete.js"],"names":[],"mappings":";;;;;WAkCc,MAAM;;;;WACN,MAAM;;;;YACN,MAAM;;;;oBACN,OAAO;;;;eACP,MAAM;;;;;;;;cAEN,KAAK,CAAC,kBAAkB,CAAC;;;;;;aAKzB,MAAM;;;;UACN,KAAK,CAAC,SAAS;;AAd7B;;;;;;;;;GASG;AAEH;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,sCAvBG;IAAyC,OAAO,EAAxC,KAAK,CAAC,kBAAkB,CAAC;IACJ,QAAQ,EAA7B,KAAK,CAAC,MAAM,CAAC;IACW,iBAAiB,GAAzC,OAAO,GAAC,OAAO;IACiB,kBAAkB,GAAlD,MAAM,GAAC,QAAQ,GAAC,OAAO;IACP,aAAa,GAA7B,OAAO;IACS,OAAO,GAAvB,OAAO;IACwB,UAAU,GAAzC,sBAAsB;IACS,QAAQ,EAAvC,CAAS,IAAa,EAAb,KAAK,CAAC,MAAM,CAAC,QAAC;IACA,SAAS,EAAhC,KAAK,CAAC,SAAS;IACA,SAAS,GAAxB,MAAM;IACW,OAAO;IACT,cAAc,GAA7B,MAAM;CAEd,2CAoJF;;;;;kBArN6D,OAAO;AAwNrE;;;;;;;;;;;;;;;;;;GAkBG;AAEH,+CAfG;IAAyB,gBAAgB;IAChB,OAAO;IACT,WAAW,GAA1B,MAAM;IACS,KAAK,GAApB,MAAM;IACS,KAAK,GAApB,MAAM;IACS,WAAW,GAA1B,MAAM;IACW,QAAQ;CAEjC,2CAqBF"}

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

@@ -0,0 +1,21 @@
+export default Badge;
+/**
+ * A Badge component that renders a small, colored label with a status or progress indicator. The badge can be configured with different statuses, progress states, and sizes.
+ *
+ * @component
+ * @param {object} props - Component properties.
+ * @param {React.ReactNode} props.children - Content to display within the badge.
+ * @param {"complete" | "incomplete" | "partiallyComplete" | null} [props.progress] - Progress state of the badge.
+ * @param {boolean} [props.capitalize] - Capitalize the first letter of the badge.
+ * @param {"default" | "info" | "success" | "warning" | "critical" | "attention" | "highlight"} [props.status="default"] - Status variant to style the badge.
+ * @param {string} [props.className] - Additional CSS classes to apply to the badge.
+ * @returns {JSX.Element} - Rendered Badge component with optional progress indicator.
+ */
+declare function Badge(props?: {
+    children: React.ReactNode;
+    progress?: "complete" | "incomplete" | "partiallyComplete" | null;
+    capitalize?: boolean;
+    status?: "default" | "info" | "success" | "warning" | "critical" | "attention" | "highlight";
+    className?: string;
+}): JSX.Element;
+//# sourceMappingURL=Badge.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../components/Badge.js"],"names":[],"mappings":";AAkFA;;;;;;;;;;;GAWG;AACH,+BAPG;IAA+B,QAAQ,EAA/B,KAAK,CAAC,SAAS;IACgD,QAAQ,GAAvE,UAAU,GAAG,YAAY,GAAG,mBAAmB,GAAG,IAAI;IACtC,UAAU,GAA1B,OAAO;IACqF,MAAM,GAAlG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,WAAW;IACpE,SAAS,GAAxB,MAAM;CACd,GAAU,GAAG,CAAC,OAAO,CA4BvB"}

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

@@ -0,0 +1,78 @@
+export default Banner;
+export type BannerStatus = "neutral" | "critical" | "highlight" | "success" | "warning" | "info" | "caution" | "attention";
+export type BannerAction = {
+    /**
+     * - The button label text
+     */
+    content: string;
+    /**
+     * - Whether the button should have primary styling
+     */
+    primary?: boolean;
+    /**
+     * - Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * - Whether to show a loading state
+     */
+    loading?: boolean;
+    /**
+     * - Click handler for the action
+     */
+    onAction?: Function;
+    /**
+     * - URL to navigate to when clicked (opens in new tab)
+     */
+    url?: string;
+};
+/**
+ * @typedef {'neutral' | 'critical' | 'highlight' | 'success' | 'warning' | 'info' | 'caution' | 'attention'} BannerStatus
+ */
+/**
+ * @typedef BannerAction
+ * @property {string} content - The button label text
+ * @property {boolean} [primary=false] - Whether the button should have primary styling
+ * @property {boolean} [disabled=false] - Whether the button is disabled
+ * @property {boolean} [loading=false] - Whether to show a loading state
+ * @property {Function} [onAction] - Click handler for the action
+ * @property {string} [url] - URL to navigate to when clicked (opens in new tab)
+ */
+/**
+ * A Banner component that displays a styled banner with customizable title, status, icon, actions, and dismiss functionality.
+ * The banner style and content change based on the provided props, allowing for various statuses and themes.
+ *
+ * @component
+ *
+ * @param {Object} props - The properties for configuring the Banner component.
+ * @param {string} [props.title] - The title text for the banner. If not provided, no title will be displayed.
+ * @param {BannerStatus} [props.status='neutral'] - The status of the banner, which determines its color and icon.
+ * @param {Function} [props.onDismiss] - Callback function to handle the banner's dismiss action.
+ * @param {React.ReactNode} [props.children] - Additional content to display within the banner.
+ * @param {BannerAction} [props.action] - Primary action configuration object
+ * @param {BannerAction} [props.secondaryAction] - Secondary action configuration object
+ * @param {FunctionComponent} [props.icon] - Custom icon to display on the banner. If not provided, a default icon is used based on the status.
+ * @param {boolean} [props.spinner] - Shows a spinner icon instead of a status icon when set to true.
+ *
+ * @returns {JSX.Element} The rendered Banner component.
+ *
+ * @example
+ * <Banner
+ *   title="Warning"
+ *   status="warning"
+ *   onDismiss={() => console.log('Dismissed')}
+ *   action={{ content: "Action", primary: true, onAction: () => console.log('Action clicked') }}
+ *   secondaryAction={{ content: "Learn more", link: true, monochrome: true, url: "https://example.com" }}
+ * />
+ */
+declare function Banner(props?: {
+    title?: string;
+    status?: BannerStatus;
+    onDismiss?: Function;
+    children?: React.ReactNode;
+    action?: BannerAction;
+    secondaryAction?: BannerAction;
+    icon?: FunctionComponent;
+    spinner?: boolean;
+}): JSX.Element;
+//# sourceMappingURL=Banner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../components/Banner.js"],"names":[],"mappings":";2BAwEa,SAAS,GAAG,UAAU,GAAG,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,WAAW;;;;;aAK9F,MAAM;;;;cACN,OAAO;;;;eACP,OAAO;;;;cACP,OAAO;;;;;;;;UAEP,MAAM;;AAXpB;;GAEG;AAEH;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,gCArBG;IAAuB,KAAK,GAApB,MAAM;IACe,MAAM,GAA3B,YAAY;IACK,SAAS;IACF,QAAQ,GAAhC,KAAK,CAAC,SAAS;IACM,MAAM,GAA3B,YAAY;IACS,eAAe,GAApC,YAAY;IACc,IAAI,GAA9B,iBAAiB;IACD,OAAO,GAAvB,OAAO;CAEf,GAAU,GAAG,CAAC,OAAO,CAoJvB"}

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

@@ -0,0 +1,70 @@
+export default Box;
+/**
+ * Renders a customizable Box component with various styling options.
+ *
+ * @component
+ * @param {Object} props - Properties to configure the Box component.
+ * @param {string} [props.as='div'] - The HTML element to render as. Defaults to `div`.
+ * @param {'default' | 'subdued'} [props.background] - Background color variant.
+ * @param {'default' | 'subdued'} [props.borderColor] - Border color variant.
+ * @param {'default' | 'sm' | 'lg' | 'full'} [props.borderRadius] - Border radius variant.
+ * @param {'none' | '0' | '1'} [props.borderBlockStartWidth] - Top border width variant.
+ * @param {'none' | '0' | '1'} [props.borderBlockEndWidth] - Bottom border width variant.
+ * @param {'none' | '0' | '1'} [props.borderInlineStartWidth] - Left border width variant.
+ * @param {'none' | '0' | '1'} [props.borderInlineEndWidth] - Right border width variant.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.padding] - Padding for all sides.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.paddingBlockStart] - Top padding.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.paddingBlockEnd] - Bottom padding.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.paddingInlineStart] - Left padding.
+ * @param {'none' | '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10'} [props.paddingInlineEnd] - Right padding.
+ * @param {'hidden' | 'scroll'} [props.overflow] - Overflow setting for all sides.
+ * @param {'hidden' | 'scroll'} [props.overflowX] - Overflow setting for x-axis.
+ * @param {'hidden' | 'scroll'} [props.overflowY] - Overflow setting for y-axis.
+ * @param {'relative' | 'absolute' | 'fixed' | 'sticky'} [props.position] - CSS positioning of the box.
+ * @param {React.ReactNode} [props.children] - Child elements to render inside the Box.
+ * @param {string} [props.id] - ID for the Box element.
+ * @param {number | string} [props.height] - CSS height of the Box.
+ * @param {number | string} [props.width] - CSS width of the Box.
+ * @param {number | string} [props.minHeight] - Minimum CSS height.
+ * @param {number | string} [props.maxHeight] - Maximum CSS height.
+ * @param {number | string} [props.minWidth] - Minimum CSS width.
+ * @param {number | string} [props.maxWidth] - Maximum CSS width.
+ * @param {number | string} [props.zIndex] - CSS z-index.
+ * @param {Object} [props.style] - Additional inline styles for the Box.
+ * @param {string} [props.className] - Additional CSS classes to apply to the Box.
+ * @param {Function} [props.onClick] - Click handler for the Box.
+ *
+ * @returns {JSX.Element} A rendered Box component with customized styling.
+*/
+declare function Box(props?: {
+    as?: string;
+    background?: "default" | "subdued";
+    borderColor?: "default" | "subdued";
+    borderRadius?: "default" | "sm" | "lg" | "full";
+    borderBlockStartWidth?: "none" | "0" | "1";
+    borderBlockEndWidth?: "none" | "0" | "1";
+    borderInlineStartWidth?: "none" | "0" | "1";
+    borderInlineEndWidth?: "none" | "0" | "1";
+    padding?: "none" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";
+    paddingBlockStart?: "none" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";
+    paddingBlockEnd?: "none" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";
+    paddingInlineStart?: "none" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";
+    paddingInlineEnd?: "none" | "0" | "1" | "2" | "3" | "4" | "5" | "6" | "7" | "8" | "9" | "10";
+    overflow?: "hidden" | "scroll";
+    overflowX?: "hidden" | "scroll";
+    overflowY?: "hidden" | "scroll";
+    position?: "relative" | "absolute" | "fixed" | "sticky";
+    children?: React.ReactNode;
+    id?: string;
+    height?: number | string;
+    width?: number | string;
+    minHeight?: number | string;
+    maxHeight?: number | string;
+    minWidth?: number | string;
+    maxWidth?: number | string;
+    zIndex?: number | string;
+    style?: any;
+    className?: string;
+    onClick?: Function;
+}): JSX.Element;
+//# sourceMappingURL=Box.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../components/Box.js"],"names":[],"mappings":";AAkIA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCE;AACF,6BAhCG;IAAuB,EAAE,GAAjB,MAAM;IACwB,UAAU,GAAxC,SAAS,GAAG,SAAS;IACS,WAAW,GAAzC,SAAS,GAAG,SAAS;IACoB,YAAY,GAArD,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM;IACL,qBAAqB,GAAhD,MAAM,GAAG,GAAG,GAAG,GAAG;IACS,mBAAmB,GAA9C,MAAM,GAAG,GAAG,GAAG,GAAG;IACS,sBAAsB,GAAjD,MAAM,GAAG,GAAG,GAAG,GAAG;IACS,oBAAoB,GAA/C,MAAM,GAAG,GAAG,GAAG,GAAG;IACgE,OAAO,GAAzF,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI;IACS,iBAAiB,GAAnG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI;IACS,eAAe,GAAjG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI;IACS,kBAAkB,GAApG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI;IACS,gBAAgB,GAAlG,MAAM,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI;IAC7C,QAAQ,GAApC,QAAQ,GAAG,QAAQ;IACS,SAAS,GAArC,QAAQ,GAAG,QAAQ;IACS,SAAS,GAArC,QAAQ,GAAG,QAAQ;IACkC,QAAQ,GAA7D,UAAU,GAAG,UAAU,GAAG,OAAO,GAAG,QAAQ;IACpB,QAAQ,GAAhC,KAAK,CAAC,SAAS;IACA,EAAE,GAAjB,MAAM;IACkB,MAAM,GAA9B,MAAM,GAAG,MAAM;IACS,KAAK,GAA7B,MAAM,GAAG,MAAM;IACS,SAAS,GAAjC,MAAM,GAAG,MAAM;IACS,SAAS,GAAjC,MAAM,GAAG,MAAM;IACS,QAAQ,GAAhC,MAAM,GAAG,MAAM;IACS,QAAQ,GAAhC,MAAM,GAAG,MAAM;IACS,MAAM,GAA9B,MAAM,GAAG,MAAM;IACA,KAAK;IACL,SAAS,GAAxB,MAAM;IACW,OAAO;CAEhC,GAAU,GAAG,CAAC,OAAO,CA6EvB"}