@heymantle/litho 0.0.1

package/dist/cjs/components/Button.js

@@ -0,0 +1,1018 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "default", {
+    enumerable: true,
+    get: function() {
+        return _default;
+    }
+});
+var _jsxruntime = require("react/jsx-runtime");
+var _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+var _tailwindvariants = require("tailwind-variants");
+var _ButtonGroup = require("./ButtonGroup");
+var _index = require("../index");
+var _polarisicons = require("@shopify/polaris-icons");
+var _AppProvider = require("./AppProvider");
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+function _object_without_properties(source, excluded) {
+    if (source == null) return {};
+    var target = _object_without_properties_loose(source, excluded);
+    var key, i;
+    if (Object.getOwnPropertySymbols) {
+        var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+        for(i = 0; i < sourceSymbolKeys.length; i++){
+            key = sourceSymbolKeys[i];
+            if (excluded.indexOf(key) >= 0) continue;
+            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+            target[key] = source[key];
+        }
+    }
+    return target;
+}
+function _object_without_properties_loose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for(i = 0; i < sourceKeys.length; i++){
+        key = sourceKeys[i];
+        if (excluded.indexOf(key) >= 0) continue;
+        target[key] = source[key];
+    }
+    return target;
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+var styles = (0, _tailwindvariants.tv)({
+    base: "Litho-Button relative flex items-center justify-center rounded-md border border-transparent overflow-hidden",
+    variants: {
+        disabled: {
+            true: "cursor-default",
+            false: ""
+        },
+        loading: {
+            true: "cursor-default",
+            false: ""
+        },
+        fullWidth: {
+            true: "w-full",
+            false: ""
+        },
+        align: {
+            left: "justify-start",
+            center: "justify-center",
+            right: "justify-end"
+        },
+        disclosureLeft: {
+            true: "border-r-0",
+            false: ""
+        },
+        disclosureRight: {
+            true: "border-l-0",
+            false: ""
+        },
+        plain: {
+            true: "",
+            false: ""
+        },
+        link: {
+            true: "",
+            false: ""
+        },
+        rounded: {
+            true: "rounded-full",
+            false: ""
+        },
+        size: {
+            stepper: "min-h-3.5 rounded-sm",
+            small: "min-h-7 min-w-7",
+            medium: "min-h-8",
+            large: "min-h-8"
+        },
+        shadow: {
+            true: "shadow-btn",
+            false: ""
+        },
+        darkMode: {
+            true: "",
+            false: ""
+        },
+        bordered: {
+            true: "border-tint-2",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            bordered: true,
+            plain: true,
+            class: "border-tint-2 dark:border-tint-alt-4"
+        },
+        {
+            disabled: true,
+            plain: false,
+            link: false,
+            highlight: false,
+            class: "border-btn-secondary-border"
+        },
+        {
+            loading: true,
+            plain: false,
+            link: false,
+            highlight: false,
+            class: "border-btn-secondary-border"
+        },
+        {
+            loading: false,
+            disabled: false,
+            class: "cursor-pointer"
+        },
+        {
+            primary: true,
+            plain: false,
+            link: false,
+            disclosureLeft: true,
+            class: "rounded-r-none"
+        },
+        {
+            primary: false,
+            plain: false,
+            link: false,
+            disclosureLeft: true,
+            class: "rounded-r-none"
+        },
+        {
+            primary: true,
+            plain: false,
+            link: false,
+            disclosureRight: true,
+            class: "rounded-l-none"
+        },
+        {
+            disclosureRight: true,
+            destructive: true,
+            class: "rounded-l-none border-l border-l-tint-8!"
+        },
+        {
+            darkMode: false,
+            disclosureRight: true,
+            primary: false,
+            plain: false,
+            link: false,
+            destructive: false,
+            highlight: false,
+            class: "rounded-l-none border-l border-l-tint-4!"
+        },
+        {
+            darkMode: false,
+            disclosureRight: true,
+            highlight: true,
+            class: "rounded-l-none border-l border-l-tint-4!"
+        },
+        {
+            darkMode: false,
+            disclosureRight: true,
+            primary: true,
+            class: "rounded-l-none border-l border-l-tint-alt-10!"
+        },
+        {
+            darkMode: true,
+            disclosureRight: true,
+            primary: false,
+            plain: false,
+            link: false,
+            destructive: false,
+            highlight: false,
+            class: "rounded-l-none border-l border-l-tint-alt-4!"
+        },
+        {
+            darkMode: true,
+            disclosureRight: true,
+            highlight: true,
+            class: "rounded-l-none border-l border-l-tint-alt-3!"
+        },
+        {
+            darkMode: true,
+            disclosureRight: true,
+            primary: true,
+            class: "rounded-l-none border-l border-l-tint-6!"
+        },
+        // Primary buttons
+        {
+            primary: true,
+            disabled: false,
+            loading: false,
+            class: "bg-btn-primary hover:bg-btn-primary-low active:bg-btn-primary-lower text-btn-primary-fg hover:text-btn-primary-fg-alt border-btn-primary-border hover:border-btn-primary-border-low active:border-btn-primary-border-low\n        dark:outline-hidden dark:border-transparent dark:shadow-btn-dark dark:border-t-tint-alt-6 dark:hover:border-t-tint-alt-7 dark:active:border-t-tint-alt-8"
+        },
+        {
+            primary: true,
+            disabled: true,
+            class: "bg-btn-primary-disabled text-btn-primary-disabled-fg"
+        },
+        {
+            primary: true,
+            loading: true,
+            class: "bg-btn-primary-disabled text-btn-primary-disabled-fg"
+        },
+        // Secondary buttons
+        {
+            disabled: false,
+            loading: false,
+            primary: false,
+            plain: false,
+            link: false,
+            destructive: false,
+            highlight: false,
+            pressed: false,
+            class: "bg-btn-secondary hover:bg-btn-secondary-low active:bg-btn-secondary-lower text-btn-secondary-fg hover:text-btn-secondary-fg-alt border-btn-secondary-border hover:border-btn-secondary-border-low active:border-btn-secondary-border-low\n        dark:outline-hidden dark:border-transparent dark:shadow-btn-dark dark:border-t-tint-alt-3 dark:hover:border-t-tint-alt-2 dark:active:border-t-tint-alt-2"
+        },
+        {
+            disabled: false,
+            loading: false,
+            primary: false,
+            plain: false,
+            link: false,
+            destructive: false,
+            highlight: false,
+            pressed: true,
+            class: "bg-btn-secondary hover:bg-btn-secondary-low active:bg-btn-secondary-lower text-btn-secondary-fg hover:text-btn-secondary-fg-alt border-btn-secondary-border hover:border-btn-secondary-border-low active:border-btn-secondary-border-low\n        dark:outline-hidden dark:border-tint-10 dark:shadow-btn-pressed-dark dark:hover:border-tint-10 dark:active:border-tint-10"
+        },
+        {
+            disabled: true,
+            primary: false,
+            plain: false,
+            link: false,
+            destructive: false,
+            highlight: false,
+            class: "bg-btn-secondary-disabled text-btn-secondary-disabled-fg"
+        },
+        {
+            loading: true,
+            primary: false,
+            plain: false,
+            link: false,
+            destructive: false,
+            highlight: false,
+            class: "bg-btn-secondary-disabled text-btn-secondary-disabled-fg"
+        },
+        // Plain buttons
+        {
+            plain: true,
+            disabled: false,
+            loading: false,
+            bordered: false,
+            class: "bg-btn-plain hover:bg-btn-plain-low active:bg-btn-plain-lower text-btn-plain-fg hover:text-btn-plain-fg-alt border-btn-plain-border hover:border-btn-plain-border-low active:border-btn-plain-border-low"
+        },
+        {
+            plain: true,
+            disabled: false,
+            loading: false,
+            bordered: true,
+            class: "bg-btn-plain hover:bg-btn-plain-low active:bg-btn-plain-lower text-btn-plain-fg hover:text-btn-plain-fg-alt border-tint-4 hover:border-tint-5 active:border-tint-6"
+        },
+        {
+            plain: true,
+            disabled: true,
+            class: "bg-btn-plain-disabled text-btn-plain-disabled-fg"
+        },
+        {
+            plain: true,
+            loading: true,
+            class: "bg-btn-plain-disabled text-btn-plain-disabled-fg"
+        },
+        // Link buttons
+        {
+            link: true,
+            disabled: false,
+            loading: false,
+            class: "bg-btn-link hover:bg-btn-link-low active:bg-btn-link-lower text-btn-link-fg hover:text-btn-link-fg-alt border-btn-link-border hover:border-btn-link-border-low active:border-btn-link-border-low"
+        },
+        {
+            link: true,
+            disabled: true,
+            class: "bg-btn-link-disabled text-btn-link-disabled-fg"
+        },
+        {
+            link: true,
+            loading: true,
+            class: "bg-btn-link-disabled text-btn-link-disabled-fg"
+        },
+        // Destructive buttons
+        {
+            destructive: true,
+            disabled: false,
+            loading: false,
+            class: "bg-btn-destructive hover:bg-btn-destructive-low active:bg-btn-destructive-lower text-btn-destructive-fg hover:text-btn-destructive-fg-alt border-btn-destructive-border hover:border-btn-destructive-border-low active:border-btn-destructive-border-low"
+        },
+        {
+            destructive: true,
+            disabled: true,
+            class: "bg-btn-destructive-disabled text-btn-destructive-disabled-fg"
+        },
+        {
+            destructive: true,
+            loading: true,
+            class: "bg-btn-destructive-disabled text-btn-destructive-disabled-fg"
+        },
+        // Highlight buttons
+        {
+            highlight: true,
+            disabled: false,
+            loading: false,
+            class: "bg-btn-highlight hover:bg-btn-highlight-low active:bg-btn-highlight-lower text-btn-highlight-fg hover:text-btn-highlight-fg-alt border-btn-highlight-border hover:border-btn-highlight-border-low active:border-btn-highlight-border-low"
+        },
+        {
+            highlight: true,
+            disabled: true,
+            class: "bg-btn-highlight-disabled text-btn-highlight-disabled-fg"
+        },
+        {
+            highlight: true,
+            loading: true,
+            class: "bg-btn-highlight-disabled text-btn-highlight-disabled-fg"
+        }
+    ],
+    defaultVariants: {
+        disclosureLeft: false,
+        disclosureRight: false,
+        insideButtonGroup: false,
+        shadow: false,
+        darkMode: false,
+        bordered: false
+    }
+});
+var contentStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-Button__Content relative flex items-center justify-center gap-1",
+    variants: {
+        hasIcon: {
+            true: "",
+            false: ""
+        },
+        hasChildren: {
+            true: "",
+            false: ""
+        },
+        disclosure: {
+            true: "",
+            false: ""
+        },
+        size: {
+            small: "py-0.5",
+            large: "py-3",
+            medium: "py-1"
+        }
+    },
+    compoundVariants: [
+        {
+            size: "small",
+            iconOnly: true,
+            class: "!px-0.5"
+        },
+        {
+            size: "small",
+            hasIcon: false,
+            iconOnly: false,
+            class: "px-2"
+        },
+        {
+            size: "small",
+            hasIcon: true,
+            iconOnly: false,
+            class: "pl-1.5 pr-2"
+        },
+        {
+            size: "medium",
+            iconOnly: true,
+            class: "!px-1.25"
+        },
+        {
+            size: "large",
+            iconOnly: true,
+            class: "!px-3"
+        },
+        {
+            hasIcon: true,
+            hasChildren: true,
+            disclosure: false,
+            size: "large",
+            class: "pl-3 pr-4"
+        },
+        {
+            hasIcon: true,
+            hasChildren: true,
+            disclosure: true,
+            class: "pl-2 pr-1"
+        },
+        {
+            hasIcon: true,
+            hasChildren: true,
+            disclosure: false,
+            size: "medium",
+            class: "pl-2 pr-3"
+        },
+        {
+            hasIcon: false,
+            hasChildren: true,
+            disclosure: false,
+            class: "px-3"
+        },
+        {
+            hasIcon: false,
+            hasChildren: true,
+            disclosure: true,
+            class: "pl-2.5 pr-1"
+        }
+    ],
+    defaultVariants: {
+        disclosure: false,
+        hasIcon: false,
+        iconOnly: false,
+        hasChildren: true,
+        size: "medium"
+    }
+});
+var iconStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-Button__Icon"
+});
+var textStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-Button__Text whitespace-nowrap leading-5 font-medium",
+    variants: {
+        loading: {
+            true: "invisible"
+        },
+        disabled: {
+            true: "",
+            false: ""
+        },
+        primary: {
+            true: "dark:font-semibold",
+            false: ""
+        },
+        link: {
+            true: "",
+            false: ""
+        },
+        destructive: {
+            true: "",
+            false: ""
+        },
+        plain: {
+            true: "",
+            false: ""
+        },
+        highlight: {
+            true: "",
+            false: ""
+        }
+    },
+    compoundVariants: [
+        {
+            primary: true,
+            loading: false,
+            disabled: false,
+            class: "text-btn-primary-fg"
+        },
+        {
+            primary: true,
+            loading: true,
+            class: "text-btn-primary-disabled-fg"
+        },
+        {
+            primary: true,
+            disabled: true,
+            class: "text-btn-primary-disabled-fg"
+        },
+        {
+            loading: false,
+            disabled: false,
+            destructive: false,
+            primary: false,
+            plain: false,
+            link: false,
+            class: "text-btn-secondary-fg"
+        },
+        {
+            loading: false,
+            disabled: true,
+            destructive: false,
+            primary: false,
+            plain: false,
+            link: false,
+            class: "text-btn-secondary-disabled-fg"
+        },
+        {
+            loading: true,
+            disabled: false,
+            destructive: false,
+            primary: false,
+            plain: false,
+            link: false,
+            class: "text-btn-secondary-disabled-fg"
+        },
+        {
+            plain: true,
+            loading: false,
+            disabled: false,
+            class: "text-btn-plain-fg"
+        },
+        {
+            plain: true,
+            loading: true,
+            class: "text-btn-plain-disabled-fg"
+        },
+        {
+            plain: true,
+            disabled: true,
+            class: "text-btn-plain-disabled-fg"
+        },
+        {
+            link: true,
+            loading: false,
+            disabled: false,
+            class: "text-btn-link-fg"
+        },
+        {
+            link: true,
+            loading: true,
+            class: "text-btn-link-disabled-fg"
+        },
+        {
+            link: true,
+            disabled: true,
+            class: "text-btn-link-disabled-fg"
+        },
+        {
+            destructive: true,
+            loading: false,
+            disabled: false,
+            class: "text-btn-destructive-fg"
+        },
+        {
+            destructive: true,
+            loading: true,
+            class: "text-btn-destructive-disabled-fg"
+        },
+        {
+            destructive: true,
+            disabled: true,
+            class: "text-btn-destructive-disabled-fg"
+        },
+        {
+            highlight: true,
+            loading: false,
+            disabled: false,
+            class: "text-btn-highlight-fg"
+        },
+        {
+            highlight: true,
+            loading: true,
+            class: "text-btn-highlight-disabled-fg"
+        },
+        {
+            highlight: true,
+            disabled: true,
+            class: "text-btn-highlight-disabled-fg"
+        }
+    ],
+    defaultVariants: {
+        primary: false,
+        plain: false,
+        link: false,
+        destructive: false,
+        highlight: false,
+        loading: false,
+        disabled: false,
+        rounded: false
+    }
+});
+var connectedDisclosureStyles = (0, _tailwindvariants.tv)({
+    base: "Litho-Button__ConnectedDisclosure flex flex-wrap-nowrap"
+});
+/**
+ * A Button component that renders a customizable button or link with various styles and states.
+ * The button can be configured with different variants, sizes, and can include icons, loading states,
+ * and connected disclosure actions.
+ *
+ * @component
+ *
+ * @param {Object} props - The properties for configuring the Button component.
+ * @param {string} [props.id] - Unique identifier for the button.
+ * @param {React.ReactNode} [props.children] - The content to display within the button.
+ * @param {string} [props.url] - URL to navigate to when clicked. If provided, renders as an anchor tag.
+ * @param {boolean} [props.disabled=false] - Whether the button is disabled.
+ * @param {boolean} [props.external] - Whether the URL should open in a new tab.
+ * @param {string} [props.target] - Target attribute for the anchor tag when URL is provided.
+ * @param {boolean} [props.submit] - Whether the button should act as a form submit button.
+ * @param {boolean} [props.loading=false] - Whether to show a loading spinner.
+ * @param {boolean} [props.pressed=false] - Whether the button appears pressed.
+ * @param {string} [props.accessibilityLabel] - Accessible label for screen readers.
+ * @param {string} [props.role] - ARIA role for the button.
+ * @param {string} [props.ariaControls] - ID of the element controlled by the button.
+ * @param {boolean} [props.ariaExpanded] - Whether the controlled element is expanded.
+ * @param {string} [props.ariaDescribedBy] - ID of the element that describes the button.
+ * @param {boolean} [props.ariaChecked] - Whether the button is checked (for toggle buttons).
+ * @param {React.Component} [props.icon] - Icon component to display within the button.
+ * @param {string} [props.iconColor='default'] - Color of the icon.
+ * @param {boolean} [props.primary=false] - Whether to show the primary button style.
+ * @param {boolean} [props.highlight=false] - Whether to show the highlight button style.
+ * @param {boolean} [props.link=false] - Whether to show a link style.
+ * @param {boolean} [props.destructive=false] - Whether to show destructive styling.
+ * @param {boolean} [props.disclosure=false] - Whether to show a disclosure arrow.
+ * @param {boolean} [props.disclosureRight=false] - Whether to show the disclosure on the right.
+ * @param {boolean} [props.plain=false] - Whether to show plain styling without background.
+ * @param {string} [props.size='medium'] - Size of the button ('small', 'medium', 'large', 'stepper').
+ * @param {boolean} [props.fullWidth] - Whether the button should take full width.
+ * @param {string} [props.align='center'] - Alignment of the button content ('left', 'center', 'right').
+ * @param {string} [props.tooltip] - Tooltip to show when hovering over the button.
+ * @param {Object} [props.connectedDisclosure] - Configuration for connected disclosure menu.
+ * @param {Array} [props.connectedDisclosure.actions] - Actions to show in the disclosure menu.
+ * @param {string} [props.className] - Additional CSS classes for the button.
+ * @param {string} [props.contentClassName] - Additional CSS classes for the button content.
+ * @param {boolean} [props.rounded] - Whether to show fully rounded corners.
+ * @param {Function} [props.onClick] - Callback when the button is clicked.
+ * @param {Function} [props.onMouseDown] - Callback when the mouse is pressed on the button.
+ *
+ * @returns {JSX.Element} The rendered Button component.
+ *
+ * @example
+ * // Basic button
+ * <Button onClick={() => console.log('Clicked')}>
+ *   Click me
+ * </Button>
+ *
+ * @example
+ * // Primary button with icon and loading state
+ * <Button
+ *   primary
+ *   loading={isLoading}
+ *   icon={SaveMinor}
+ *   onClick={handleSave}
+ * >
+ *   Save changes
+ * </Button>
+ *
+ * @example
+ * // Button with connected disclosure
+ * <Button
+ *   connectedDisclosure={{
+ *     actions: [
+ *       { content: 'Option 1', onAction: () => {} },
+ *       { content: 'Option 2', onAction: () => {} }
+ *     ]
+ *   }}
+ * >
+ *   More actions
+ * </Button>
+ */ function Button() {
+    var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
+    var darkMode = (0, _react.useContext)(_AppProvider.DarkModeContext).darkMode;
+    var _useState = _sliced_to_array((0, _react.useState)(false), 2), showConnectedDisclosurePopover = _useState[0], setShowConnectedDisclosurePopover = _useState[1];
+    var id = props.id, children = props.children, url = props.url, _props_disabled = props.disabled, disabled = _props_disabled === void 0 ? false : _props_disabled, external = props.external, target = props.target, submit = props.submit, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, _props_pressed = props.pressed, pressed = _props_pressed === void 0 ? false : _props_pressed, accessibilityLabel = props.accessibilityLabel, role = props.role, ariaControls = props.ariaControls, ariaExpanded = props.ariaExpanded, ariaDescribedBy = props.ariaDescribedBy, ariaChecked = props.ariaChecked, icon = props.icon, _iconColor = props.iconColor, _props_bordered = props.bordered, bordered = _props_bordered === void 0 ? false : _props_bordered, _props_primary = props.primary, primary = _props_primary === void 0 ? false : _props_primary, _props_highlight = props.highlight, highlight = _props_highlight === void 0 ? false : _props_highlight, _props_link = props.link, link = _props_link === void 0 ? false : _props_link, _props_destructive = props.destructive, destructive = _props_destructive === void 0 ? false : _props_destructive, _props_disclosure = props.disclosure, disclosure = _props_disclosure === void 0 ? false : _props_disclosure, _props_disclosureRight = props.disclosureRight, disclosureRight = _props_disclosureRight === void 0 ? false : _props_disclosureRight, _props_plain = props.plain, plain = _props_plain === void 0 ? false : _props_plain, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, fullWidth = props.fullWidth, _props_align = props.align, align = _props_align === void 0 ? "center" : _props_align, connectedDisclosure = props.connectedDisclosure, className = props.className, contentClassName = props.contentClassName, rounded = props.rounded, onClick = props.onClick, onMouseDown = props.onMouseDown, tooltip = props.tooltip, _props_tooltipAlignment = props.tooltipAlignment, tooltipAlignment = _props_tooltipAlignment === void 0 ? "right" : _props_tooltipAlignment, _props_tooltipPosition = props.tooltipPosition, tooltipPosition = _props_tooltipPosition === void 0 ? "above" : _props_tooltipPosition, shadow = props.shadow, restProps = _object_without_properties(props, [
+        "id",
+        "children",
+        "url",
+        "disabled",
+        "external",
+        "target",
+        "submit",
+        "loading",
+        "pressed",
+        "accessibilityLabel",
+        "role",
+        "ariaControls",
+        "ariaExpanded",
+        "ariaDescribedBy",
+        "ariaChecked",
+        "icon",
+        "iconColor",
+        "bordered",
+        "primary",
+        "highlight",
+        "link",
+        "destructive",
+        "disclosure",
+        "disclosureRight",
+        "plain",
+        "size",
+        "fullWidth",
+        "align",
+        "connectedDisclosure",
+        "className",
+        "contentClassName",
+        "rounded",
+        "onClick",
+        "onMouseDown",
+        "tooltip",
+        "tooltipAlignment",
+        "tooltipPosition",
+        "shadow"
+    ]);
+    var hasIcon = !!icon;
+    var hasChildren = !!children;
+    var insideButtonGroup = (0, _react.useContext)(_ButtonGroup.ButtonGroupContext);
+    var base = disabled || loading ? "-disabled-icon" : "-icon";
+    var iconColorMap = {
+        primary: "btn-primary".concat(base),
+        secondary: "btn-secondary".concat(base),
+        plain: "btn-plain".concat(base),
+        link: "btn-link".concat(base),
+        destructive: "btn-destructive".concat(base),
+        highlight: "btn-highlight".concat(base),
+        default: "btn-secondary".concat(base)
+    };
+    var iconColor = iconColorMap[primary ? "primary" : plain ? "plain" : link ? "link" : destructive ? "destructive" : highlight ? "highlight" : "default"];
+    var iconOnly = hasIcon && !hasChildren;
+    var connectedDisclosureActions = (connectedDisclosure === null || connectedDisclosure === void 0 ? void 0 : connectedDisclosure.actions) || [];
+    var showConnectedDisclosure = connectedDisclosure && connectedDisclosureActions.length > 0;
+    var classes = styles({
+        primary: primary,
+        plain: plain,
+        link: link,
+        destructive: destructive,
+        highlight: highlight,
+        insideButtonGroup: insideButtonGroup,
+        loading: loading,
+        disabled: disabled,
+        fullWidth: fullWidth,
+        pressed: pressed,
+        disclosureLeft: showConnectedDisclosure,
+        disclosureRight: disclosureRight,
+        rounded: rounded,
+        size: size,
+        shadow: shadow,
+        darkMode: darkMode,
+        bordered: bordered,
+        align: align
+    });
+    var contentClasses = contentStyles({
+        disclosure: disclosure,
+        hasIcon: hasIcon,
+        hasChildren: hasChildren,
+        size: size,
+        iconOnly: iconOnly
+    });
+    var iconClasses = iconStyles();
+    var textClasses = textStyles({
+        primary: primary,
+        plain: plain,
+        link: link,
+        destructive: destructive,
+        highlight: highlight,
+        pressed: pressed,
+        loading: loading,
+        disabled: disabled
+    });
+    var connectedDisclosureClasses = connectedDisclosureStyles({
+        primary: primary,
+        plain: plain,
+        link: link,
+        destructive: destructive,
+        highlight: highlight,
+        loading: loading,
+        disabled: disabled
+    });
+    var Element = url ? "a" : "button";
+    var ConnectedDisclosureWrapper = function(param) {
+        var condition = param.condition, wrapper = param.wrapper, children = param.children;
+        return condition ? wrapper(children) : children;
+    };
+    var memoizedIcon = (0, _react.useMemo)(function() {
+        return icon;
+    }, [
+        icon
+    ]);
+    var content = /*#__PURE__*/ (0, _jsxruntime.jsxs)(Element, _object_spread_props(_object_spread({
+        id: id,
+        href: url,
+        target: target ? target : external ? "_blank" : undefined,
+        className: "".concat(classes).concat(className ? " ".concat(className) : ""),
+        type: submit ? "submit" : undefined,
+        onClick: disabled || loading ? undefined : onClick,
+        onMouseDown: onMouseDown
+    }, restProps), {
+        children: [
+            pressed && /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: "Litho-Button__Pressed absolute inset-0 bg-tint-10 pointer-events-none"
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
+                className: "".concat(contentClasses).concat(contentClassName ? " ".concat(contentClassName) : ""),
+                children: [
+                    loading && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: "Litho-Button__Loading absolute inset-0 flex items-center justify-center",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Spinner, {
+                            size: "small",
+                            color: "subdued"
+                        })
+                    }),
+                    memoizedIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: iconClasses,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                            source: memoizedIcon,
+                            color: disabled ? "disabled" : _iconColor || iconColor
+                        })
+                    }),
+                    hasChildren && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: textClasses,
+                        children: children
+                    }),
+                    disclosure && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                        className: "Litho-Button__DisclosureIcon relative -left-0.5",
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Icon, {
+                            source: _polarisicons.CaretDownMinor,
+                            color: disabled ? "disabled" : _iconColor || iconColor
+                        })
+                    })
+                ]
+            })
+        ]
+    }));
+    var contentWithDisclosure = /*#__PURE__*/ (0, _jsxruntime.jsxs)(ConnectedDisclosureWrapper, {
+        condition: showConnectedDisclosure,
+        wrapper: function(children) {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                className: connectedDisclosureClasses,
+                children: children
+            });
+        },
+        children: [
+            content,
+            showConnectedDisclosure && /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Popover, {
+                active: showConnectedDisclosurePopover,
+                onClose: function() {
+                    return setShowConnectedDisclosurePopover(false);
+                },
+                preferredAlignment: "right",
+                preferredPosition: "below",
+                activator: /*#__PURE__*/ (0, _jsxruntime.jsx)(Button, {
+                    primary: primary,
+                    plain: plain,
+                    link: link,
+                    destructive: destructive,
+                    highlight: highlight,
+                    icon: _polarisicons.CaretDownMinor,
+                    disclosureRight: true,
+                    iconColor: _iconColor,
+                    className: primary ? "border-l border-l-tint-alt-6!" : undefined,
+                    onClick: function() {
+                        return setShowConnectedDisclosurePopover(!showConnectedDisclosurePopover);
+                    }
+                }),
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.ActionList, {
+                    items: connectedDisclosureActions,
+                    onActionAnyItem: function() {
+                        return setShowConnectedDisclosurePopover(false);
+                    }
+                })
+            })
+        ]
+    });
+    if (!!tooltip) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_index.Tooltip, {
+            content: tooltip,
+            alignment: tooltipAlignment,
+            preferredPosition: tooltipPosition,
+            children: showConnectedDisclosure ? contentWithDisclosure : content
+        });
+    }
+    return showConnectedDisclosure ? contentWithDisclosure : content;
+}
+var _default = Button;