@heymantle/litho 0.0.14 → 0.0.16

package/dist/esm/components/Button.js

@@ -135,7 +135,107 @@ import Spinner from "./Spinner.js";
 import Tooltip from "./Tooltip.js";
 import { CaretDownMinor } from "@shopify/polaris-icons";
 import { useDarkMode } from "./AppProvider.js";
-var styles = tv({
+/**
+ * @component Button
+ *
+ * @description A versatile action trigger that renders as a button or link with support for variants, icons, loading states, and size options.
+ *
+ * @usage
+ * - DO: Use for triggering actions like save, delete, or submit.
+ * - DON'T: Use for navigation-only links (use Link component).
+ *
+ * @accessibility
+ * - Renders as `<button>` or `<a>` with proper roles; always provide `accessibilityLabel` for icon-only buttons.
+ *
+ * @alternative
+ * - If you need navigation-only text, use `Link`.
+ * - If you need a group of related actions, use `ButtonGroup`.
+ *
+ * @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 {boolean} [props.hasIcon] - Override icon-presence detection for padding. Use when the button contains an icon not passed via the `icon` prop.
+ * @param {React.Component} [props.icon] - Icon component to display within the button.
+ * @param {"default" | "primary" | "secondary" | "plain" | "link" | "destructive" | "highlight"} [props.iconColor='default'] - Color of the icon.
+ * @param {"default" | "sm" | "lg" | "xl"} [props.iconSize='default'] - Size of the icon.
+ * @param {"left" | "right"} [props.iconPosition='left'] - Position of the icon ('left' or 'right').
+ * @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 {boolean} [props.naked=false] - Whether to show the naked styling.
+ * @param {boolean} [props.outline=false] - Whether to show the outline variant. Styled like plain with a 1px outline border.
+ * @param {"mini" | "small" | "medium" | "large" | "stepper"} [props.size='medium'] - Size of the button ('mini', 'small', 'medium', 'large', 'stepper').
+ * @param {boolean} [props.fullWidth] - Whether the button should take full width.
+ * @param {"left" | "center"} [props.fullWidthAlignment='left'] - Alignment of the label text when fullWidth and disclosure are both active ('left', 'center').
+ * @param {"left" | "center" | "right"} [props.align='center'] - Alignment of the button content ('left', 'center', 'right').
+ * @param {string} [props.tooltip] - Tooltip to show when hovering over the button.
+ * @param {"left" | "center" | "right"} [props.tooltipAlignment='right'] - Alignment of the tooltip ('left', 'center', 'right').
+ * @param {"above" | "below" | "left" | "right"} [props.tooltipPosition='above'] - Position of the tooltip ('above', 'below', 'left', 'right').
+ * @param {"inline-block" | "block" | "inline"} [props.tooltipDisplay='inline-block'] - Display type of the tooltip ('inline-block', 'block', 'inline').
+ * @param {Object} [props.connectedDisclosure] - Configuration for connected disclosure menu.
+ * @param {Array<import("./ActionList").ActionListItem>} [props.connectedDisclosure.actions] - Actions to show in the disclosure menu.
+ * @param {Array<{title?: string, items: Array<import("./ActionList").ActionListItem>}>} [props.connectedDisclosure.sections] - Sections with optional titles to show in the disclosure menu. Use instead of actions for grouped items.
+ * @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
+ * ```js
+ * // Basic button
+ * <Button onClick={() => console.log('Clicked')}>
+ *   Click me
+ * </Button>
+ * ```
+ *
+ * @example
+ * ```js
+ * // Primary button with icon and loading state
+ * <Button
+ *   primary
+ *   loading={isLoading}
+ *   icon={SaveMinor}
+ *   onClick={handleSave}
+ * >
+ *   Save changes
+ * </Button>
+ * ```
+ *
+ * @example
+ * ```js
+ * // Button with connected disclosure
+ * <Button
+ *   connectedDisclosure={{
+ *     actions: [
+ *       { content: 'Option 1', onAction: () => {} },
+ *       { content: 'Option 2', onAction: () => {} }
+ *     ]
+ *   }}
+ * >
+ *   More actions
+ * </Button>
+ * ```
+ */ var styles = tv({
     base: "Litho-Button relative flex items-center justify-center rounded-md border border-transparent overflow-hidden",
     variants: {
         disabled: {
@@ -197,6 +297,10 @@ var styles = tv({
         naked: {
             true: "border-none bg-transparent p-0 hover:bg-transparent w-auto justify-start",
             false: ""
+        },
+        outline: {
+            true: "",
+            false: ""
         }
     },
     compoundVariants: [
@@ -205,10 +309,16 @@ var styles = tv({
             plain: true,
             class: "border-tint-2 dark:border-tint-alt-4"
         },
+        {
+            bordered: true,
+            outline: true,
+            class: "border-tint-2 dark:border-tint-alt-4"
+        },
         {
             disabled: true,
             plain: false,
             link: false,
+            outline: false,
             highlight: false,
             class: "border-btn-secondary-border"
         },
@@ -216,6 +326,7 @@ var styles = tv({
             loading: true,
             plain: false,
             link: false,
+            outline: false,
             highlight: false,
             class: "border-btn-secondary-border"
         },
@@ -256,6 +367,7 @@ var styles = tv({
             primary: false,
             plain: false,
             link: false,
+            outline: false,
             destructive: false,
             highlight: false,
             class: "rounded-l-none border-l border-l-tint-4!"
@@ -278,6 +390,7 @@ var styles = tv({
             primary: false,
             plain: false,
             link: false,
+            outline: false,
             destructive: false,
             highlight: false,
             class: "rounded-l-none border-l border-l-tint-alt-4!"
@@ -318,6 +431,7 @@ var styles = tv({
             primary: false,
             plain: false,
             link: false,
+            outline: false,
             destructive: false,
             highlight: false,
             pressed: false,
@@ -330,6 +444,7 @@ var styles = tv({
             primary: false,
             plain: false,
             link: false,
+            outline: false,
             destructive: false,
             highlight: false,
             pressed: true,
@@ -341,6 +456,7 @@ var styles = tv({
             primary: false,
             plain: false,
             link: false,
+            outline: false,
             destructive: false,
             highlight: false,
             class: "bg-btn-secondary-disabled text-btn-secondary-disabled-fg"
@@ -350,6 +466,7 @@ var styles = tv({
             primary: false,
             plain: false,
             link: false,
+            outline: false,
             destructive: false,
             highlight: false,
             class: "bg-btn-secondary-disabled text-btn-secondary-disabled-fg"
@@ -379,6 +496,31 @@ var styles = tv({
             loading: true,
             class: "bg-btn-plain-disabled text-btn-plain-disabled-fg"
         },
+        // Outline buttons
+        {
+            outline: true,
+            disabled: false,
+            loading: false,
+            bordered: false,
+            class: "border-edge-light bg-btn-plain hover:bg-btn-plain-low active:bg-btn-plain-lower text-btn-plain-fg hover:text-btn-plain-fg-alt"
+        },
+        {
+            outline: true,
+            disabled: false,
+            loading: false,
+            bordered: true,
+            class: "border-edge-light bg-btn-plain hover:bg-btn-plain-low active:bg-btn-plain-lower text-btn-plain-fg hover:text-btn-plain-fg-alt"
+        },
+        {
+            outline: true,
+            disabled: true,
+            class: "border-edge-light bg-btn-plain-disabled text-btn-plain-disabled-fg"
+        },
+        {
+            outline: true,
+            loading: true,
+            class: "border-edge-light bg-btn-plain-disabled text-btn-plain-disabled-fg"
+        },
         // Link buttons
         {
             link: true,
@@ -458,7 +600,8 @@ var styles = tv({
         shadow: false,
         darkMode: false,
         bordered: false,
-        insight: false
+        insight: false,
+        outline: false
     }
 });
 var contentStyles = tv({
@@ -477,7 +620,7 @@ var contentStyles = tv({
             false: ""
         },
         size: {
-            mini: "p-0",
+            mini: "py-0 text-sm",
             small: "py-0.5",
             large: "py-3",
             medium: "py-1"
@@ -485,13 +628,57 @@ var contentStyles = tv({
         naked: {
             true: "px-2",
             false: ""
+        },
+        iconPosition: {
+            left: "",
+            right: ""
+        },
+        fullWidth: {
+            true: "",
+            false: ""
+        },
+        fullWidthAlignment: {
+            left: "",
+            center: ""
         }
     },
     compoundVariants: [
+        {
+            fullWidth: true,
+            disclosure: true,
+            fullWidthAlignment: "left",
+            class: "w-full justify-start"
+        },
+        {
+            fullWidth: true,
+            disclosure: true,
+            fullWidthAlignment: "center",
+            class: "w-full justify-center"
+        },
         {
             size: "mini",
             iconOnly: true,
-            class: "!px-0"
+            class: "!px-0.5"
+        },
+        {
+            size: "mini",
+            hasIcon: false,
+            iconOnly: false,
+            class: "px-1.5"
+        },
+        {
+            size: "mini",
+            hasIcon: true,
+            iconOnly: false,
+            iconPosition: "left",
+            class: "pl-0.5 pr-1.5"
+        },
+        {
+            size: "mini",
+            hasIcon: true,
+            iconOnly: false,
+            iconPosition: "right",
+            class: "pl-1.5 pr-0.5"
         },
         {
             size: "small",
@@ -508,8 +695,16 @@ var contentStyles = tv({
             size: "small",
             hasIcon: true,
             iconOnly: false,
+            iconPosition: "left",
             class: "pl-1.5 pr-2"
         },
+        {
+            size: "small",
+            hasIcon: true,
+            iconOnly: false,
+            iconPosition: "right",
+            class: "pl-2 pr-1.5"
+        },
         {
             size: "medium",
             iconOnly: true,
@@ -525,8 +720,17 @@ var contentStyles = tv({
             hasChildren: true,
             disclosure: false,
             size: "large",
+            iconPosition: "left",
             class: "pl-3 pr-4"
         },
+        {
+            hasIcon: true,
+            hasChildren: true,
+            disclosure: false,
+            size: "large",
+            iconPosition: "right",
+            class: "pl-4 pr-3"
+        },
         {
             hasIcon: true,
             hasChildren: true,
@@ -538,13 +742,28 @@ var contentStyles = tv({
             hasChildren: true,
             disclosure: false,
             size: "medium",
+            iconPosition: "left",
             class: "pl-2 pr-3"
         },
+        {
+            hasIcon: true,
+            hasChildren: true,
+            disclosure: false,
+            size: "medium",
+            iconPosition: "right",
+            class: "pl-3 pr-2"
+        },
         {
             hasIcon: false,
             hasChildren: true,
             disclosure: false,
             naked: false,
+            size: [
+                "small",
+                "medium",
+                "large",
+                "stepper"
+            ],
             class: "px-3"
         },
         {
@@ -559,15 +778,27 @@ var contentStyles = tv({
         hasIcon: false,
         iconOnly: false,
         hasChildren: true,
-        size: "medium"
+        size: "medium",
+        iconPosition: "left"
     }
 });
 var iconStyles = tv({
-    base: "Litho-Button__Icon"
+    base: "Litho-Button__Icon",
+    variants: {
+        loading: {
+            true: "invisible"
+        }
+    }
 });
 var textStyles = tv({
-    base: "Litho-Button__Text whitespace-nowrap leading-5 font-medium",
+    base: "Litho-Button__Text whitespace-nowrap leading-5",
     variants: {
+        size: {
+            mini: "font-normal",
+            small: "font-medium",
+            medium: "font-medium",
+            large: "font-medium"
+        },
         loading: {
             true: "invisible"
         },
@@ -591,6 +822,10 @@ var textStyles = tv({
             true: "",
             false: ""
         },
+        outline: {
+            true: "",
+            false: ""
+        },
         highlight: {
             true: "",
             false: ""
@@ -602,9 +837,33 @@ var textStyles = tv({
         naked: {
             true: "",
             false: ""
+        },
+        fullWidth: {
+            true: "",
+            false: ""
+        },
+        disclosure: {
+            true: "",
+            false: ""
+        },
+        fullWidthAlignment: {
+            left: "",
+            center: ""
         }
     },
     compoundVariants: [
+        {
+            fullWidth: true,
+            disclosure: true,
+            fullWidthAlignment: "left",
+            class: "flex-grow text-left"
+        },
+        {
+            fullWidth: true,
+            disclosure: true,
+            fullWidthAlignment: "center",
+            class: "flex-grow text-center"
+        },
         {
             primary: true,
             loading: false,
@@ -628,6 +887,7 @@ var textStyles = tv({
             primary: false,
             plain: false,
             link: false,
+            outline: false,
             naked: false,
             insight: false,
             class: "text-btn-secondary-fg"
@@ -639,6 +899,7 @@ var textStyles = tv({
             primary: false,
             plain: false,
             link: false,
+            outline: false,
             class: "text-btn-secondary-disabled-fg"
         },
         {
@@ -648,6 +909,7 @@ var textStyles = tv({
             primary: false,
             plain: false,
             link: false,
+            outline: false,
             class: "text-btn-secondary-disabled-fg"
         },
         {
@@ -666,6 +928,22 @@ var textStyles = tv({
             disabled: true,
             class: "text-btn-plain-disabled-fg"
         },
+        {
+            outline: true,
+            loading: false,
+            disabled: false,
+            class: "text-btn-plain-fg"
+        },
+        {
+            outline: true,
+            loading: true,
+            class: "text-btn-plain-disabled-fg"
+        },
+        {
+            outline: true,
+            disabled: true,
+            class: "text-btn-plain-disabled-fg"
+        },
         {
             link: true,
             loading: false,
@@ -723,108 +1001,24 @@ var textStyles = tv({
     defaultVariants: {
         primary: false,
         plain: false,
+        outline: false,
         link: false,
         destructive: false,
         highlight: false,
         loading: false,
         disabled: false,
-        rounded: false
+        rounded: false,
+        size: "medium"
     }
 });
 var connectedDisclosureStyles = 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 {"default" | "primary" | "secondary" | "plain" | "link" | "destructive" | "highlight"} [props.iconColor='default'] - Color of the icon.
- * @param {"default" | "sm" | "lg" | "xl"} [props.iconSize='default'] - Size 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 {boolean} [props.naked=false] - Whether to show the naked styling.
- * @param {"mini" | "small" | "medium" | "large" | "stepper"} [props.size='medium'] - Size of the button ('mini', 'small', 'medium', 'large', 'stepper').
- * @param {boolean} [props.fullWidth] - Whether the button should take full width.
- * @param {"left" | "center" | "right"} [props.align='center'] - Alignment of the button content ('left', 'center', 'right').
- * @param {string} [props.tooltip] - Tooltip to show when hovering over the button.
- * @param {"left" | "center" | "right"} [props.tooltipAlignment='right'] - Alignment of the tooltip ('left', 'center', 'right').
- * @param {"above" | "below" | "left" | "right"} [props.tooltipPosition='above'] - Position of the tooltip ('above', 'below', 'left', 'right').
- * @param {"inline-block" | "block" | "inline"} [props.tooltipDisplay='inline-block'] - Display type of the tooltip ('inline-block', 'block', 'inline').
- * @param {Object} [props.connectedDisclosure] - Configuration for connected disclosure menu.
- * @param {Array<import("./ActionList").ActionListItem>} [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
- * ```js
- * // Basic button
- * <Button onClick={() => console.log('Clicked')}>
- *   Click me
- * </Button>
- * ```
- *
- * @example
- * ```js
- * // Primary button with icon and loading state
- * <Button
- *   primary
- *   loading={isLoading}
- *   icon={SaveMinor}
- *   onClick={handleSave}
- * >
- *   Save changes
- * </Button>
- * ```
- *
- * @example
- * ```js
- * // Button with connected disclosure
- * <Button
- *   connectedDisclosure={{
- *     actions: [
- *       { content: 'Option 1', onAction: () => {} },
- *       { content: 'Option 2', onAction: () => {} }
- *     ]
- *   }}
- * >
- *   More actions
- * </Button>
- * ```
- */ function Button() {
+function Button() {
     var props = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : {};
     var darkMode = useDarkMode().darkMode;
     var _useState = _sliced_to_array(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_iconSize = props.iconSize, iconSize = _props_iconSize === void 0 ? "default" : _props_iconSize, _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_insight = props.insight, insight = _props_insight === void 0 ? false : _props_insight, _props_plain = props.plain, plain = _props_plain === void 0 ? false : _props_plain, _props_naked = props.naked, naked = _props_naked === void 0 ? false : _props_naked, _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, _props_tooltipDisplay = props.tooltipDisplay, tooltipDisplay = _props_tooltipDisplay === void 0 ? "inline-block" : _props_tooltipDisplay, shadow = props.shadow, restProps = _object_without_properties(props, [
+    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, hasIconProp = props.hasIcon, icon = props.icon, _iconColor = props.iconColor, _props_iconSize = props.iconSize, iconSize = _props_iconSize === void 0 ? "default" : _props_iconSize, _props_iconPosition = props.iconPosition, iconPosition = _props_iconPosition === void 0 ? "left" : _props_iconPosition, _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_insight = props.insight, insight = _props_insight === void 0 ? false : _props_insight, _props_plain = props.plain, plain = _props_plain === void 0 ? false : _props_plain, _props_naked = props.naked, naked = _props_naked === void 0 ? false : _props_naked, _props_outline = props.outline, outline = _props_outline === void 0 ? false : _props_outline, _props_size = props.size, size = _props_size === void 0 ? "medium" : _props_size, fullWidth = props.fullWidth, _props_fullWidthAlignment = props.fullWidthAlignment, fullWidthAlignment = _props_fullWidthAlignment === void 0 ? "left" : _props_fullWidthAlignment, _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, _props_tooltipDisplay = props.tooltipDisplay, tooltipDisplay = _props_tooltipDisplay === void 0 ? "inline-block" : _props_tooltipDisplay, shadow = props.shadow, restProps = _object_without_properties(props, [
         "id",
         "children",
         "url",
@@ -840,9 +1034,11 @@ var connectedDisclosureStyles = tv({
         "ariaExpanded",
         "ariaDescribedBy",
         "ariaChecked",
+        "hasIcon",
         "icon",
         "iconColor",
         "iconSize",
+        "iconPosition",
         "bordered",
         "primary",
         "highlight",
@@ -853,8 +1049,10 @@ var connectedDisclosureStyles = tv({
         "insight",
         "plain",
         "naked",
+        "outline",
         "size",
         "fullWidth",
+        "fullWidthAlignment",
         "align",
         "connectedDisclosure",
         "className",
@@ -868,7 +1066,7 @@ var connectedDisclosureStyles = tv({
         "tooltipDisplay",
         "shadow"
     ]);
-    var hasIcon = !!icon;
+    var hasIcon = hasIconProp !== null && hasIconProp !== void 0 ? hasIconProp : !!icon;
     var hasChildren = !!children;
     var insideButtonGroup = useContext(ButtonGroupContext);
     var base = disabled || loading ? "-disabled-icon" : "-icon";
@@ -882,10 +1080,11 @@ var connectedDisclosureStyles = tv({
         insight: "btn-insight".concat(base),
         default: "btn-secondary".concat(base)
     };
-    var iconColor = iconColorMap[primary ? "primary" : plain ? "plain" : link ? "link" : destructive ? "destructive" : highlight ? "highlight" : insight ? "insight" : "default"];
+    var iconColor = iconColorMap[primary ? "primary" : plain ? "plain" : outline ? "plain" : link ? "link" : destructive ? "destructive" : highlight ? "highlight" : insight ? "insight" : "default"];
     var iconOnly = hasIcon && !hasChildren;
     var connectedDisclosureActions = (connectedDisclosure === null || connectedDisclosure === void 0 ? void 0 : connectedDisclosure.actions) || [];
-    var showConnectedDisclosure = connectedDisclosure && connectedDisclosureActions.length > 0;
+    var connectedDisclosureSections = (connectedDisclosure === null || connectedDisclosure === void 0 ? void 0 : connectedDisclosure.sections) || null;
+    var showConnectedDisclosure = connectedDisclosure && (connectedDisclosureActions.length > 0 || (connectedDisclosureSections === null || connectedDisclosureSections === void 0 ? void 0 : connectedDisclosureSections.length) > 0);
     var classes = styles({
         primary: primary,
         plain: plain,
@@ -906,7 +1105,8 @@ var connectedDisclosureStyles = tv({
         darkMode: darkMode,
         bordered: bordered,
         align: align,
-        naked: naked
+        naked: naked,
+        outline: outline
     });
     var contentClasses = contentStyles({
         disclosure: disclosure,
@@ -914,12 +1114,18 @@ var connectedDisclosureStyles = tv({
         hasChildren: hasChildren,
         size: size,
         iconOnly: iconOnly,
-        naked: naked
+        naked: naked,
+        iconPosition: iconPosition,
+        fullWidth: fullWidth,
+        fullWidthAlignment: fullWidthAlignment
+    });
+    var iconClasses = iconStyles({
+        loading: loading
     });
-    var iconClasses = iconStyles();
     var textClasses = textStyles({
         primary: primary,
         plain: plain,
+        outline: outline,
         link: link,
         destructive: destructive,
         highlight: highlight,
@@ -927,7 +1133,11 @@ var connectedDisclosureStyles = tv({
         pressed: pressed,
         loading: loading,
         disabled: disabled,
-        naked: naked
+        naked: naked,
+        fullWidth: fullWidth,
+        disclosure: disclosure,
+        fullWidthAlignment: fullWidthAlignment,
+        size: size
     });
     var connectedDisclosureClasses = connectedDisclosureStyles({
         primary: primary,
@@ -972,7 +1182,7 @@ var connectedDisclosureStyles = tv({
                             color: "subdued"
                         })
                     }),
-                    memoizedIcon && /*#__PURE__*/ _jsx("span", {
+                    iconPosition === "left" && memoizedIcon && /*#__PURE__*/ _jsx("span", {
                         className: iconClasses,
                         children: /*#__PURE__*/ _jsx(Icon, {
                             source: memoizedIcon,
@@ -984,8 +1194,16 @@ var connectedDisclosureStyles = tv({
                         className: textClasses,
                         children: children
                     }),
+                    iconPosition === "right" && memoizedIcon && /*#__PURE__*/ _jsx("span", {
+                        className: iconClasses,
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            source: memoizedIcon,
+                            color: disabled ? "disabled" : _iconColor || iconColor,
+                            size: iconSize
+                        })
+                    }),
                     disclosure && /*#__PURE__*/ _jsx("span", {
-                        className: "Litho-Button__DisclosureIcon relative -left-0.5",
+                        className: "Litho-Button__DisclosureIcon relative -left-0.5".concat(loading ? " invisible" : ""),
                         children: /*#__PURE__*/ _jsx(Icon, {
                             source: CaretDownMinor,
                             color: disabled ? "disabled" : _iconColor || iconColor,
@@ -1013,6 +1231,7 @@ var connectedDisclosureStyles = tv({
                 },
                 preferredAlignment: "right",
                 preferredPosition: "below",
+                activatorDisplayType: "flex",
                 activator: /*#__PURE__*/ _jsx(Button, {
                     primary: primary,
                     plain: plain,
@@ -1020,20 +1239,30 @@ var connectedDisclosureStyles = tv({
                     destructive: destructive,
                     highlight: highlight,
                     insight: insight,
+                    size: size,
                     icon: CaretDownMinor,
                     disclosureRight: true,
                     iconColor: _iconColor,
+                    disabled: disabled || (connectedDisclosure === null || connectedDisclosure === void 0 ? void 0 : connectedDisclosure.disabled),
                     className: primary ? "border-l border-l-tint-alt-6!" : undefined,
+                    onMouseDown: function(e) {
+                        return e.preventDefault();
+                    },
                     onClick: function() {
-                        return setShowConnectedDisclosurePopover(!showConnectedDisclosurePopover);
+                        return setShowConnectedDisclosurePopover(function(prev) {
+                            return !prev;
+                        });
                     }
                 }),
-                children: /*#__PURE__*/ _jsx(ActionList, {
-                    items: connectedDisclosureActions,
+                children: /*#__PURE__*/ _jsx(ActionList, _object_spread_props(_object_spread({}, connectedDisclosureSections ? {
+                    sections: connectedDisclosureSections
+                } : {
+                    items: connectedDisclosureActions
+                }), {
                     onActionAnyItem: function() {
                         return setShowConnectedDisclosurePopover(false);
                     }
-                })
+                }))
             })
         ]
     });