@protonradio/proton-ui 0.12.14 → 0.13.1

package/dist/components/ActionMenu/ActionMenu.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.es.js","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useEffect, useRef, useState } from \"react\";\n\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { handleInternalNavigation, isUrlExternal } from \"../../utils\";\n\nimport { Button } from \"../Button/Button\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\nimport { DropdownMenu } from \"radix-ui\";\nimport { ChevronLeft } from \"../Icon/IconComponents/ChevronLeft\";\nimport { ChevronRight } from \"../Icon/IconComponents/ChevronRight\";\n\nimport \"./ActionMenu.css\";\n\nexport interface ActionMenuAction {\n  key: string;\n  label?: ReactNode;\n  description?: ReactNode;\n  to?: string;\n  onAction?: (key: string) => void;\n  children?: ActionMenuAction[];\n}\n\nexport type ActionMenuSelectionMode = \"single\" | \"multiple\" | \"none\";\n\n/** Keys passed to `onSelectionChange` (Set of item keys, or `\"all\"`). */\nexport type ActionMenuSelection = \"all\" | Set<string>;\n\nexport interface ActionMenuProps {\n  /** The actions of the menu\n   * - type {@link ActionMenuAction}[]\n   */\n  actions?: ActionMenuAction[];\n\n  /** The text of the cancel button */\n  cancelButtonText?: string;\n\n  /** The children of the menu */\n  children?: ReactNode | ((props: { close: () => void }) => ReactNode);\n\n  /** The test id of the menu */\n  \"data-testid\"?: string;\n\n  /** The keys of the disabled items\n   * @default []\n   */\n  disabledKeys?: string[];\n\n  /** Whether the menu is open\n   * @default false\n   */\n  isOpen: boolean;\n\n  /** The callback function to close the menu */\n  onClose?: () => void;\n\n  /** The callback function to change the selection\n   * - type {@link ActionMenuSelection}\n   */\n  onSelectionChange?: (keys: ActionMenuSelection) => void;\n\n  /** The selection mode of the menu\n   * @default \"single\"\n   */\n  selectionMode?: ActionMenuSelectionMode;\n\n  /** The keys of the selected items */\n  selectedKeys?: string[];\n\n  /** Whether to show the cancel button */\n  showCancel?: boolean;\n\n  /** The title of the menu */\n  title?: string;\n}\n\ntype ActionStack = {\n  title: ReactNode | null;\n  actions: ActionMenuAction[];\n  key: string | null;\n  previousKey: string | null;\n};\n\n/**\n * A controlled ActionMenu to display a menu of actions.\n * Renders a list of actions as a focusable menu, or non-focusable children.\n *\n * API:\n *  - {@link ActionMenuProps}\n */\nexport const ActionMenu = ({\n  isOpen,\n  actions = [],\n  children,\n  showCancel = true,\n  cancelButtonText = \"Cancel\",\n  selectionMode = \"single\",\n  selectedKeys,\n  disabledKeys = [],\n  onSelectionChange,\n  onClose,\n  title,\n  \"data-testid\": testId,\n}: ActionMenuProps) => {\n  const [contentHeight, setContentHeight] = useState<number>(0);\n  const [stackHistory, setStackHistory] = useState<ActionStack[]>([]);\n  const [currentActionStack, setCurrentActionStack] = useState<ActionStack>({\n    title,\n    actions,\n    key: null,\n    previousKey: null,\n  });\n  const contentRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({ onClose, overlayRef });\n\n  const currentActions = currentActionStack.actions || [];\n  const hasActions = currentActions && currentActions.length > 0;\n  const hasContent = children || hasActions || showCancel;\n  const isInSubmenu = stackHistory.length > 0;\n\n  function handleSubmenuOpen(key: string) {\n    const action = currentActions.find((action) => action.key === key);\n    if (!action) {\n      console.error(`Action with key ${key} not found`);\n      return;\n    }\n\n    setStackHistory((prevStackHistory) => [\n      ...prevStackHistory,\n      currentActionStack,\n    ]);\n    setCurrentActionStack((prevStack) => ({\n      title: action.label,\n      actions: action.children || [],\n      key: action.key,\n      previousKey: prevStack.key,\n    }));\n  }\n\n  function handleBack() {\n    if (stackHistory.length > 0) {\n      const previousStack = stackHistory[stackHistory.length - 1];\n      setCurrentActionStack(previousStack);\n      setStackHistory(stackHistory.slice(0, -1));\n    }\n  }\n\n  // Re-measure the open menu's content height when stack history changes\n  useEffect(() => {\n    if (!isOpen) return;\n\n    requestAnimationFrame(() => {\n      if (contentRef.current) {\n        setContentHeight(contentRef.current.scrollHeight + 12);\n      }\n    });\n  }, [isOpen, stackHistory, hasContent]);\n\n  // Reset content height when menu closes or is closing\n  useEffect(() => {\n    if (!isOpen || isClosing) {\n      setContentHeight(0);\n    }\n  }, [isOpen, isClosing]);\n\n  if (!isOpen && !isClosing) return null;\n\n  return (\n    <ScreenOverlay fadeIn ref={overlayRef}>\n      <DropdownMenu.Root\n        modal\n        open={isOpen}\n        onOpenChange={(open) => {\n          if (!open) handleClose();\n        }}\n      >\n        <DropdownMenu.Trigger asChild>\n          {/* No visible trigger, menu is controlled by isOpen */}\n          <div>{\"\"}</div>\n        </DropdownMenu.Trigger>\n\n        <div\n          data-disable-document-scroll={isOpen}\n          className=\"proton-ActionMenu__background-wrapper\"\n          style={{ opacity: isClosing ? 0 : 1 }}\n        >\n          <div\n            data-testid={testId || \"ActionMenu-wrapper\"}\n            className=\"proton-ActionMenu__wrapper\"\n          >\n            <div\n              className=\"proton-ActionMenu__card\"\n              data-testid=\"ActionMenu-content\"\n              style={{ height: `${contentHeight}px` }}\n            >\n              <div ref={menuRef} className=\"proton-ActionMenu__menu\">\n                <DropdownMenu.Content loop sideOffset={8} ref={contentRef}>\n                  {hasContent && (\n                    <>\n                      {children && (\n                        <div className=\"proton-ActionMenu__content\">\n                          {typeof children === \"function\"\n                            ? children({ close: handleClose })\n                            : children}\n                        </div>\n                      )}\n\n                      {hasActions && (\n                        <ActionMenuList\n                          actions={currentActions}\n                          selectionMode={selectionMode}\n                          selectedKeys={selectedKeys}\n                          onSelectionChange={onSelectionChange}\n                          disabledKeys={disabledKeys}\n                          handleSubmenuOpen={handleSubmenuOpen}\n                          title={currentActionStack.title}\n                          isInSubmenu={isInSubmenu}\n                          handleBack={handleBack}\n                          previousMenuTitle={\n                            stackHistory[stackHistory.length - 1]?.title\n                          }\n                        />\n                      )}\n\n                      {showCancel && (\n                        <>\n                          <DropdownMenu.Separator />\n                          <DropdownMenu.Item className=\"proton-ActionMenu__cancel-button\">\n                            <Button\n                              data-testid=\"ActionMenuItem-cancel\"\n                              onPress={handleClose}\n                              fullWidth\n                              variant=\"secondary\"\n                            >\n                              {cancelButtonText}\n                            </Button>\n                          </DropdownMenu.Item>\n                        </>\n                      )}\n                    </>\n                  )}\n                </DropdownMenu.Content>\n              </div>\n            </div>\n          </div>\n        </div>\n      </DropdownMenu.Root>\n    </ScreenOverlay>\n  );\n};\n\ninterface ActionMenuListProps {\n  actions: ActionMenuAction[];\n  selectionMode: ActionMenuSelectionMode;\n  selectedKeys?: string[];\n  onSelectionChange?: (keys: ActionMenuSelection) => void;\n  disabledKeys?: string[];\n  handleSubmenuOpen: (key: string) => void;\n  title?: ReactNode;\n  isInSubmenu?: boolean;\n  handleBack?: () => void;\n  previousMenuTitle?: ReactNode;\n}\n\nconst ActionMenuList = ({\n  actions,\n  selectionMode,\n  selectedKeys = [],\n  onSelectionChange,\n  disabledKeys = [],\n  handleSubmenuOpen,\n  title,\n  isInSubmenu = false,\n  handleBack,\n  previousMenuTitle,\n}: ActionMenuListProps) => {\n  const ActionMenuItemMap = () => (\n    <>\n      {isInSubmenu && handleBack && (\n        <div className=\"proton-ActionMenu__back-button-container\">\n          <DropdownMenu.Item\n            className=\"proton-ActionMenu__back-button\"\n            onSelect={(event) => {\n              event.preventDefault();\n              handleBack();\n            }}\n            aria-label={`Go back to ${previousMenuTitle || \"previous menu\"}`}\n          >\n            <ChevronLeft size={16} />\n          </DropdownMenu.Item>\n          <div\n            className=\"proton-ActionMenu__title\"\n            role=\"banner\"\n            aria-label={isInSubmenu ? `Submenu: ${title}` : `Menu: ${title}`}\n          >\n            <span>{title}</span>\n          </div>\n          <DropdownMenu.Separator />\n        </div>\n      )}\n\n      {actions.map((action, i) => {\n        const itemProps = actions[i];\n        return (\n          <ActionMenuItem\n            key={action.key}\n            item={action}\n            isSubmenu={Boolean(itemProps.children?.length)}\n            selectionMode={selectionMode}\n            onSelectionChange={onSelectionChange}\n            selectedKeys={selectedKeys}\n            disabledKeys={disabledKeys}\n            handleSubmenuOpen={handleSubmenuOpen}\n          />\n        );\n      })}\n    </>\n  );\n\n  return (\n    <div\n      aria-disabled={selectionMode === \"none\"}\n      className=\"proton-ActionMenu__list\"\n      role=\"menu\"\n      aria-label={\n        title ? `${isInSubmenu ? \"Submenu\" : \"Menu\"}: ${title}` : \"Action menu\"\n      }\n      aria-orientation=\"vertical\"\n    >\n      {selectionMode === \"single\" ? (\n        <DropdownMenu.RadioGroup\n          value={selectedKeys?.[0] || \"\"}\n          onValueChange={(value) => {\n            // Check if this is a submenu item - if so, don't trigger selection change\n            const action = actions.find((action) => action.key === value);\n            if (action?.children?.length) {\n              return;\n            }\n\n            if (onSelectionChange) {\n              onSelectionChange(new Set([value]));\n            }\n          }}\n        >\n          <ActionMenuItemMap />\n        </DropdownMenu.RadioGroup>\n      ) : (\n        <DropdownMenu.Group>\n          <ActionMenuItemMap />\n        </DropdownMenu.Group>\n      )}\n    </div>\n  );\n};\n\ninterface ActionMenuItemProps {\n  to?: string;\n  item: ActionMenuAction;\n  isSubmenu?: boolean;\n  selectionMode: ActionMenuSelectionMode;\n  onSelectionChange?: (keys: ActionMenuSelection) => void;\n  selectedKeys?: string[];\n  disabledKeys?: string[];\n  handleSubmenuOpen: (key: string) => void;\n}\n\nconst ActionMenuItem = ({\n  item,\n  isSubmenu,\n  selectionMode,\n  onSelectionChange,\n  selectedKeys = [],\n  disabledKeys = [],\n  handleSubmenuOpen,\n}: ActionMenuItemProps) => {\n  const ref = useRef(null);\n  const isExternal = item.to && isUrlExternal(item.to);\n  const isDisabled = disabledKeys.includes(item.key);\n  const isSelected = selectedKeys.includes(item.key);\n\n  const radixItemProps = {\n    className: \"proton-ActionMenu__item\",\n    \"aria-label\": item.label\n      ? `${item.label}${item.description ? `, ${item.description}` : \"\"}`\n      : `ActionMenu-Item-${item.key}`,\n    role: \"menuitem\",\n    disabled: isDisabled,\n    ref,\n  };\n\n  const onSelect = (event: Event) => {\n    if (item?.children?.length) {\n      event.preventDefault();\n      handleSubmenuOpen(item.key);\n      return;\n    }\n    if (item.onAction) {\n      item.onAction(item.key);\n    }\n  };\n\n  const content = (\n    <>\n      <div className=\"proton-ActionMenu__item-content\">\n        <div className=\"proton-ActionMenu__item-label\">{item.label}</div>\n        {item.description && (\n          <div className=\"proton-ActionMenu__description\">\n            {item.description}\n          </div>\n        )}\n      </div>\n      {isSubmenu && <ChevronRight size={16} />}\n    </>\n  );\n\n  if (item.to) {\n    return (\n      <DropdownMenu.Item {...radixItemProps} key={item.key} asChild>\n        <a\n          aria-label={`ActionMenu-Item-${item.key}`}\n          aria-disabled={isDisabled}\n          aria-checked={isSelected}\n          aria-expanded={isSubmenu ? false : undefined}\n          href={item.to}\n          target={isExternal ? \"_blank\" : undefined}\n          rel={isExternal ? \"noopener noreferrer\" : undefined}\n          onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {\n            if (isExternal || !item.to) {\n              return;\n            }\n            handleInternalNavigation(e, item.to);\n          }}\n        >\n          {content}\n        </a>\n      </DropdownMenu.Item>\n    );\n  }\n\n  if (selectionMode === \"multiple\") {\n    return (\n      <DropdownMenu.CheckboxItem\n        {...radixItemProps}\n        key={item.key}\n        checked={isSelected}\n        onSelect={onSelect}\n        onCheckedChange={(checked: boolean) => {\n          if (!onSelectionChange) return;\n\n          const currentKeys = new Set(selectedKeys);\n          if (checked) {\n            currentKeys.add(item.key);\n          } else {\n            currentKeys.delete(item.key);\n          }\n          onSelectionChange(currentKeys);\n        }}\n      >\n        {content}\n      </DropdownMenu.CheckboxItem>\n    );\n  }\n\n  return (\n    <DropdownMenu.RadioItem\n      {...radixItemProps}\n      value={item.key}\n      key={item.key}\n      aria-checked={isSelected}\n      aria-expanded={isSubmenu ? false : undefined}\n      onSelect={onSelect}\n    >\n      {content}\n    </DropdownMenu.RadioItem>\n  );\n};\n"],"names":["ActionMenu","isOpen","actions","children","showCancel","cancelButtonText","selectionMode","selectedKeys","disabledKeys","onSelectionChange","onClose","title","testId","contentHeight","setContentHeight","useState","stackHistory","setStackHistory","currentActionStack","setCurrentActionStack","contentRef","useRef","menuRef","overlayRef","isClosing","handleClose","useIsClosing","currentActions","hasActions","hasContent","isInSubmenu","handleSubmenuOpen","key","action","prevStackHistory","prevStack","handleBack","previousStack","useEffect","jsx","ScreenOverlay","jsxs","DropdownMenu","open","Fragment","ActionMenuList","_a","Button","previousMenuTitle","ActionMenuItemMap","event","ChevronLeft","i","itemProps","ActionMenuItem","value","item","isSubmenu","ref","isExternal","isUrlExternal","isDisabled","isSelected","radixItemProps","onSelect","content","ChevronRight","createElement","e","handleInternalNavigation","checked","currentKeys"],"mappings":"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"}
+{"version":3,"file":"ActionMenu.es.js","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ReactNode, useEffect, useRef, useState } from \"react\";\n\nimport { useIsClosing } from \"../../hooks/useIsClosing\";\nimport { handleInternalNavigation, isUrlExternal } from \"../../utils\";\n\nimport { Button } from \"../Button/Button\";\nimport { ScreenOverlay } from \"../ScreenOverlay/ScreenOverlay\";\nimport { DropdownMenu } from \"radix-ui\";\nimport { ChevronLeft } from \"../Icon/IconComponents/ChevronLeft\";\nimport { ChevronRight } from \"../Icon/IconComponents/ChevronRight\";\n\nimport \"./ActionMenu.css\";\n\nexport interface ActionMenuAction {\n  key: string;\n  label?: ReactNode;\n  description?: ReactNode;\n  to?: string;\n  onAction?: (key: string) => void;\n  children?: ActionMenuAction[];\n}\n\nexport type ActionMenuSelectionMode = \"single\" | \"multiple\" | \"none\";\n\n/** Keys passed to `onSelectionChange` (Set of item keys, or `\"all\"`). */\nexport type ActionMenuSelection = \"all\" | Set<string>;\n\nexport interface ActionMenuProps {\n  /** The actions of the menu\n   * - type {@link ActionMenuAction}[]\n   */\n  actions?: ActionMenuAction[];\n\n  /** The text of the cancel button */\n  cancelButtonText?: string;\n\n  /** The children of the menu */\n  children?: ReactNode | ((props: { close: () => void }) => ReactNode);\n\n  /** The test id of the menu */\n  \"data-testid\"?: string;\n\n  /** The keys of the disabled items\n   * @default []\n   */\n  disabledKeys?: string[];\n\n  /** Whether the menu is open\n   * @default false\n   */\n  isOpen: boolean;\n\n  /** The callback function to close the menu */\n  onClose?: () => void;\n\n  /** The callback function to change the selection\n   * - type {@link ActionMenuSelection}\n   */\n  onSelectionChange?: (keys: ActionMenuSelection) => void;\n\n  /** The selection mode of the menu\n   * @default \"single\"\n   */\n  selectionMode?: ActionMenuSelectionMode;\n\n  /** The keys of the selected items */\n  selectedKeys?: string[];\n\n  /** Whether to show the cancel button */\n  showCancel?: boolean;\n\n  /** The title of the menu */\n  title?: string;\n}\n\ntype ActionStack = {\n  title: ReactNode | null;\n  actions: ActionMenuAction[];\n  key: string | null;\n  previousKey: string | null;\n};\n\n/**\n * A controlled ActionMenu to display a menu of actions.\n * Renders a list of actions as a focusable menu, or non-focusable children.\n *\n * API:\n *  - {@link ActionMenuProps}\n */\nexport const ActionMenu = ({\n  isOpen,\n  actions = [],\n  children,\n  showCancel = true,\n  cancelButtonText = \"Cancel\",\n  selectionMode = \"single\",\n  selectedKeys,\n  disabledKeys = [],\n  onSelectionChange,\n  onClose,\n  title,\n  \"data-testid\": testId,\n}: ActionMenuProps) => {\n  const [contentHeight, setContentHeight] = useState<number>(0);\n  const [stackHistory, setStackHistory] = useState<ActionStack[]>([]);\n  const [currentActionStack, setCurrentActionStack] = useState<ActionStack>({\n    title,\n    actions,\n    key: null,\n    previousKey: null,\n  });\n  const contentRef = useRef<HTMLDivElement>(null);\n  const menuRef = useRef<HTMLDivElement>(null);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const { isClosing, handleClose } = useIsClosing({ onClose, overlayRef });\n\n  const currentActions = currentActionStack.actions || [];\n  const hasActions = currentActions && currentActions.length > 0;\n  const hasContent = children || hasActions || showCancel;\n  const isInSubmenu = stackHistory.length > 0;\n\n  function handleSubmenuOpen(key: string) {\n    const action = currentActions.find((action) => action.key === key);\n    if (!action) {\n      console.error(`Action with key ${key} not found`);\n      return;\n    }\n\n    setStackHistory((prevStackHistory) => [\n      ...prevStackHistory,\n      currentActionStack,\n    ]);\n    setCurrentActionStack((prevStack) => ({\n      title: action.label,\n      actions: action.children || [],\n      key: action.key,\n      previousKey: prevStack.key,\n    }));\n  }\n\n  function handleBack() {\n    if (stackHistory.length > 0) {\n      const previousStack = stackHistory[stackHistory.length - 1];\n      setCurrentActionStack(previousStack);\n      setStackHistory(stackHistory.slice(0, -1));\n    }\n  }\n\n  // Re-measure the open menu's content height when stack history changes\n  useEffect(() => {\n    if (!isOpen) return;\n\n    requestAnimationFrame(() => {\n      if (contentRef.current) {\n        setContentHeight(contentRef.current.scrollHeight + 12);\n      }\n    });\n  }, [isOpen, stackHistory, hasContent]);\n\n  // Reset content height when menu closes or is closing\n  useEffect(() => {\n    if (!isOpen || isClosing) {\n      setContentHeight(0);\n    }\n  }, [isOpen, isClosing]);\n\n  if (!isOpen && !isClosing) return null;\n\n  return (\n    <ScreenOverlay fadeIn ref={overlayRef}>\n      <DropdownMenu.Root\n        modal\n        open={isOpen}\n        onOpenChange={(open) => {\n          if (!open) handleClose();\n        }}\n      >\n        <DropdownMenu.Trigger asChild>\n          {/* No visible trigger, menu is controlled by isOpen */}\n          <div>{\"\"}</div>\n        </DropdownMenu.Trigger>\n\n        <div\n          data-disable-document-scroll={isOpen}\n          className=\"proton-ActionMenu__background-wrapper\"\n          style={{ opacity: isClosing ? 0 : 1 }}\n        >\n          <div\n            data-testid={testId || \"ActionMenu-wrapper\"}\n            className=\"proton-ActionMenu__wrapper\"\n          >\n            <div\n              className=\"proton-ActionMenu__card\"\n              data-testid=\"ActionMenu-content\"\n              style={{ height: `${contentHeight}px` }}\n            >\n              <div ref={menuRef} className=\"proton-ActionMenu__menu\">\n                <DropdownMenu.Content loop sideOffset={8} ref={contentRef}>\n                  {hasContent && (\n                    <>\n                      {children && (\n                        <div className=\"proton-ActionMenu__content\">\n                          {typeof children === \"function\"\n                            ? children({ close: handleClose })\n                            : children}\n                        </div>\n                      )}\n\n                      {hasActions && (\n                        <ActionMenuList\n                          actions={currentActions}\n                          selectionMode={selectionMode}\n                          selectedKeys={selectedKeys}\n                          onSelectionChange={onSelectionChange}\n                          disabledKeys={disabledKeys}\n                          handleSubmenuOpen={handleSubmenuOpen}\n                          title={currentActionStack.title}\n                          isInSubmenu={isInSubmenu}\n                          handleBack={handleBack}\n                          previousMenuTitle={\n                            stackHistory[stackHistory.length - 1]?.title\n                          }\n                        />\n                      )}\n\n                      {showCancel && (\n                        <>\n                          <DropdownMenu.Separator />\n                          <DropdownMenu.Item className=\"proton-ActionMenu__cancel-button\">\n                            <Button\n                              data-testid=\"ActionMenuItem-cancel\"\n                              onPress={handleClose}\n                              fullWidth\n                              variant=\"secondary\"\n                            >\n                              {cancelButtonText}\n                            </Button>\n                          </DropdownMenu.Item>\n                        </>\n                      )}\n                    </>\n                  )}\n                </DropdownMenu.Content>\n              </div>\n            </div>\n          </div>\n        </div>\n      </DropdownMenu.Root>\n    </ScreenOverlay>\n  );\n};\n\ninterface ActionMenuListProps {\n  actions: ActionMenuAction[];\n  selectionMode: ActionMenuSelectionMode;\n  selectedKeys?: string[];\n  onSelectionChange?: (keys: ActionMenuSelection) => void;\n  disabledKeys?: string[];\n  handleSubmenuOpen: (key: string) => void;\n  title?: ReactNode;\n  isInSubmenu?: boolean;\n  handleBack?: () => void;\n  previousMenuTitle?: ReactNode;\n}\n\nconst ActionMenuList = ({\n  actions,\n  selectionMode,\n  selectedKeys = [],\n  onSelectionChange,\n  disabledKeys = [],\n  handleSubmenuOpen,\n  title,\n  isInSubmenu = false,\n  handleBack,\n  previousMenuTitle,\n}: ActionMenuListProps) => {\n  const ActionMenuItemMap = () => (\n    <>\n      {isInSubmenu && handleBack && (\n        <div className=\"proton-ActionMenu__back-button-container\">\n          <DropdownMenu.Item\n            className=\"proton-ActionMenu__back-button\"\n            onSelect={(event) => {\n              event.preventDefault();\n              handleBack();\n            }}\n            aria-label={`Go back to ${previousMenuTitle || \"previous menu\"}`}\n          >\n            <ChevronLeft size={16} />\n          </DropdownMenu.Item>\n          <div\n            className=\"proton-ActionMenu__title\"\n            role=\"banner\"\n            aria-label={isInSubmenu ? `Submenu: ${title}` : `Menu: ${title}`}\n          >\n            <span>{title}</span>\n          </div>\n          <DropdownMenu.Separator />\n        </div>\n      )}\n\n      {actions.map((action, i) => {\n        const itemProps = actions[i];\n        return (\n          <ActionMenuItem\n            key={action.key}\n            item={action}\n            isSubmenu={Boolean(itemProps.children?.length)}\n            selectionMode={selectionMode}\n            onSelectionChange={onSelectionChange}\n            selectedKeys={selectedKeys}\n            disabledKeys={disabledKeys}\n            handleSubmenuOpen={handleSubmenuOpen}\n          />\n        );\n      })}\n    </>\n  );\n\n  return (\n    <div\n      aria-disabled={selectionMode === \"none\"}\n      className=\"proton-ActionMenu__list\"\n      role=\"menu\"\n      aria-label={\n        title ? `${isInSubmenu ? \"Submenu\" : \"Menu\"}: ${title}` : \"Action menu\"\n      }\n      aria-orientation=\"vertical\"\n    >\n      {selectionMode === \"single\" ? (\n        <DropdownMenu.RadioGroup\n          value={selectedKeys?.[0] || \"\"}\n          onValueChange={(value) => {\n            // Check if this is a submenu item - if so, don't trigger selection change\n            const action = actions.find((action) => action.key === value);\n            if (action?.children?.length) {\n              return;\n            }\n\n            if (onSelectionChange) {\n              onSelectionChange(new Set([value]));\n            }\n          }}\n        >\n          <ActionMenuItemMap />\n        </DropdownMenu.RadioGroup>\n      ) : (\n        <DropdownMenu.Group>\n          <ActionMenuItemMap />\n        </DropdownMenu.Group>\n      )}\n    </div>\n  );\n};\n\ninterface ActionMenuItemProps {\n  to?: string;\n  item: ActionMenuAction;\n  isSubmenu?: boolean;\n  selectionMode: ActionMenuSelectionMode;\n  onSelectionChange?: (keys: ActionMenuSelection) => void;\n  selectedKeys?: string[];\n  disabledKeys?: string[];\n  handleSubmenuOpen: (key: string) => void;\n}\n\nconst ActionMenuItem = ({\n  item,\n  isSubmenu,\n  selectionMode,\n  onSelectionChange,\n  selectedKeys = [],\n  disabledKeys = [],\n  handleSubmenuOpen,\n}: ActionMenuItemProps) => {\n  const ref = useRef(null);\n  const isExternal = item.to && isUrlExternal(item.to);\n  const isDisabled = disabledKeys.includes(item.key);\n  const isSelected = selectedKeys.includes(item.key);\n\n  const radixItemProps = {\n    className: \"proton-ActionMenu__item\",\n    \"aria-label\": item.label\n      ? `${item.label}${item.description ? `, ${item.description}` : \"\"}`\n      : `ActionMenu-Item-${item.key}`,\n    role: \"menuitem\",\n    disabled: isDisabled,\n    ref,\n  };\n\n  const onSelect = (event: Event) => {\n    if (item?.children?.length) {\n      event.preventDefault();\n      handleSubmenuOpen(item.key);\n      return;\n    }\n    if (item.onAction) {\n      item.onAction(item.key);\n    }\n  };\n\n  const content = (\n    <>\n      <div className=\"proton-ActionMenu__item-content\">\n        <div className=\"proton-ActionMenu__item-label\">{item.label}</div>\n        {item.description && (\n          <div className=\"proton-ActionMenu__description\">\n            {item.description}\n          </div>\n        )}\n      </div>\n      {isSubmenu && <ChevronRight size={16} />}\n    </>\n  );\n\n  if (item.to) {\n    return (\n      <DropdownMenu.Item {...radixItemProps} key={item.key} asChild>\n        <a\n          aria-label={`ActionMenu-Item-${item.key}`}\n          aria-disabled={isDisabled}\n          aria-checked={isSelected}\n          aria-expanded={isSubmenu ? false : undefined}\n          href={item.to}\n          target={isExternal ? \"_blank\" : undefined}\n          rel={isExternal ? \"noopener noreferrer\" : undefined}\n          onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {\n            if (isExternal || !item.to) {\n              return;\n            }\n            handleInternalNavigation(e, item.to);\n          }}\n        >\n          {content}\n        </a>\n      </DropdownMenu.Item>\n    );\n  }\n\n  if (selectionMode === \"multiple\") {\n    return (\n      <DropdownMenu.CheckboxItem\n        {...radixItemProps}\n        key={item.key}\n        checked={isSelected}\n        onSelect={onSelect}\n        onCheckedChange={(checked: boolean) => {\n          if (!onSelectionChange) return;\n\n          const currentKeys = new Set(selectedKeys);\n          if (checked) {\n            currentKeys.add(item.key);\n          } else {\n            currentKeys.delete(item.key);\n          }\n          onSelectionChange(currentKeys);\n        }}\n      >\n        {content}\n      </DropdownMenu.CheckboxItem>\n    );\n  }\n\n  return (\n    <DropdownMenu.RadioItem\n      {...radixItemProps}\n      value={item.key}\n      key={item.key}\n      aria-checked={isSelected}\n      aria-expanded={isSubmenu ? false : undefined}\n      onSelect={onSelect}\n    >\n      {content}\n    </DropdownMenu.RadioItem>\n  );\n};\n"],"names":["ActionMenu","isOpen","actions","children","showCancel","cancelButtonText","selectionMode","selectedKeys","disabledKeys","onSelectionChange","onClose","title","testId","contentHeight","setContentHeight","useState","stackHistory","setStackHistory","currentActionStack","setCurrentActionStack","contentRef","useRef","menuRef","overlayRef","isClosing","handleClose","useIsClosing","currentActions","hasActions","hasContent","isInSubmenu","handleSubmenuOpen","key","action","prevStackHistory","prevStack","handleBack","previousStack","useEffect","jsx","ScreenOverlay","jsxs","DropdownMenu","open","Fragment","ActionMenuList","_a","Button","previousMenuTitle","ActionMenuItemMap","event","ChevronLeft","i","itemProps","ActionMenuItem","value","item","isSubmenu","ref","isExternal","isUrlExternal","isDisabled","isSelected","radixItemProps","onSelect","content","ChevronRight","createElement","e","handleInternalNavigation","checked","currentKeys"],"mappings":"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"}

package/dist/components/Badge/Badge.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js");;/* empty css               */const s=require("../../utils/string.cjs.js"),n={primary:"primary",secondary:"secondary",transparent:"transparent",success:"success",warning:"warning",danger:"danger"},i=({variant:e,children:r,"data-testid":a})=>t.jsxRuntimeExports.jsx("div",{role:"status","aria-live":"polite","data-testid":a,className:s.csx("proton-Badge",e&&`proton-Badge--${e}`),children:r});exports.Badge=i;exports.BadgeVariants=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime");;/* empty css               */const s=require("../../utils/string.cjs.js"),n={primary:"primary",secondary:"secondary",transparent:"transparent",success:"success",warning:"warning",danger:"danger"},i=({variant:e,children:r,"data-testid":a})=>t.jsx("div",{role:"status","aria-live":"polite","data-testid":a,className:s.csx("proton-Badge",e&&`proton-Badge--${e}`),children:r});exports.Badge=i;exports.BadgeVariants=n;
 //# sourceMappingURL=Badge.cjs.js.map

package/dist/components/Badge/Badge.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.cjs.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../utils\";\n\nimport \"./Badge.css\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"transparent\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\";\n\nexport const BadgeVariants: Record<BadgeVariant, BadgeVariant> = {\n  primary: \"primary\",\n  secondary: \"secondary\",\n  transparent: \"transparent\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"danger\",\n};\n\nexport interface BadgeProps  {\n  /**\n   * The content to display within the badge.\n   */\n  children: ReactNode;\n  /**\n   * The badge's visual aesthetic.\n   * - type {@link BadgeVariant}\n   */\n  variant?: BadgeVariant;\n  /**\n   * The test id for the badge.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A badge component for displaying status, categories, or counts with various visual styles.\n *\n * API:\n *  - {@link BadgeProps}\n */\nexport const Badge = ({\n  variant,\n  children,\n  \"data-testid\": dataTestId,\n}: BadgeProps) => {\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      data-testid={dataTestId}\n      className={csx(\"proton-Badge\", variant && `proton-Badge--${variant}`)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["BadgeVariants","Badge","variant","children","dataTestId","jsx","csx"],"mappings":"0NAeaA,EAAoD,CAC/D,QAAS,UACT,UAAW,YACX,YAAa,cACb,QAAS,UACT,QAAS,UACT,OAAQ,QACV,EAwBaC,EAAQ,CAAC,CACpB,QAAAC,EACA,SAAAC,EACA,cAAeC,CACjB,IAEIC,EAAAA,kBAAAA,IAAC,MAAA,CACC,KAAK,SACL,YAAU,SACV,cAAaD,EACb,UAAWE,EAAAA,IAAI,eAAgBJ,GAAW,iBAAiBA,CAAO,EAAE,EAEnE,SAAAC,CAAA,CAAA"}
+{"version":3,"file":"Badge.cjs.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../utils\";\n\nimport \"./Badge.css\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"transparent\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\";\n\nexport const BadgeVariants: Record<BadgeVariant, BadgeVariant> = {\n  primary: \"primary\",\n  secondary: \"secondary\",\n  transparent: \"transparent\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"danger\",\n};\n\nexport interface BadgeProps  {\n  /**\n   * The content to display within the badge.\n   */\n  children: ReactNode;\n  /**\n   * The badge's visual aesthetic.\n   * - type {@link BadgeVariant}\n   */\n  variant?: BadgeVariant;\n  /**\n   * The test id for the badge.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A badge component for displaying status, categories, or counts with various visual styles.\n *\n * API:\n *  - {@link BadgeProps}\n */\nexport const Badge = ({\n  variant,\n  children,\n  \"data-testid\": dataTestId,\n}: BadgeProps) => {\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      data-testid={dataTestId}\n      className={csx(\"proton-Badge\", variant && `proton-Badge--${variant}`)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["BadgeVariants","Badge","variant","children","dataTestId","jsx","csx"],"mappings":"gMAeaA,EAAoD,CAC/D,QAAS,UACT,UAAW,YACX,YAAa,cACb,QAAS,UACT,QAAS,UACT,OAAQ,QACV,EAwBaC,EAAQ,CAAC,CACpB,QAAAC,EACA,SAAAC,EACA,cAAeC,CACjB,IAEIC,EAAAA,IAAC,MAAA,CACC,KAAK,SACL,YAAU,SACV,cAAaD,EACb,UAAWE,EAAAA,IAAI,eAAgBJ,GAAW,iBAAiBA,CAAO,EAAE,EAEnE,SAAAC,CAAA,CAAA"}

package/dist/components/Badge/Badge.es.js

@@ -1,7 +1,7 @@
-import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
+import { jsx as s } from "react/jsx-runtime";
 /* empty css             */
 import { csx as e } from "../../utils/string.es.js";
-const d = {
+const i = {
   primary: "primary",
   secondary: "secondary",
   transparent: "transparent",
@@ -11,19 +11,19 @@ const d = {
 }, p = ({
   variant: r,
   children: a,
-  "data-testid": s
-}) => /* @__PURE__ */ t.jsx(
+  "data-testid": t
+}) => /* @__PURE__ */ s(
   "div",
   {
     role: "status",
     "aria-live": "polite",
-    "data-testid": s,
+    "data-testid": t,
     className: e("proton-Badge", r && `proton-Badge--${r}`),
     children: a
   }
 );
 export {
   p as Badge,
-  d as BadgeVariants
+  i as BadgeVariants
 };
 //# sourceMappingURL=Badge.es.js.map

package/dist/components/Badge/Badge.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.es.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../utils\";\n\nimport \"./Badge.css\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"transparent\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\";\n\nexport const BadgeVariants: Record<BadgeVariant, BadgeVariant> = {\n  primary: \"primary\",\n  secondary: \"secondary\",\n  transparent: \"transparent\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"danger\",\n};\n\nexport interface BadgeProps  {\n  /**\n   * The content to display within the badge.\n   */\n  children: ReactNode;\n  /**\n   * The badge's visual aesthetic.\n   * - type {@link BadgeVariant}\n   */\n  variant?: BadgeVariant;\n  /**\n   * The test id for the badge.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A badge component for displaying status, categories, or counts with various visual styles.\n *\n * API:\n *  - {@link BadgeProps}\n */\nexport const Badge = ({\n  variant,\n  children,\n  \"data-testid\": dataTestId,\n}: BadgeProps) => {\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      data-testid={dataTestId}\n      className={csx(\"proton-Badge\", variant && `proton-Badge--${variant}`)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["BadgeVariants","Badge","variant","children","dataTestId","jsx","csx"],"mappings":";;;AAeO,MAAMA,IAAoD;AAAA,EAC/D,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV,GAwBaC,IAAQ,CAAC;AAAA,EACpB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC;AACjB,MAEIC,gBAAAA,EAAAA;AAAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,aAAU;AAAA,IACV,eAAaD;AAAA,IACb,WAAWE,EAAI,gBAAgBJ,KAAW,iBAAiBA,CAAO,EAAE;AAAA,IAEnE,UAAAC;AAAA,EAAA;AAAA;"}
+{"version":3,"file":"Badge.es.js","sources":["../../../src/components/Badge/Badge.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { csx } from \"../../utils\";\n\nimport \"./Badge.css\";\n\nexport type BadgeVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"transparent\"\n  | \"success\"\n  | \"warning\"\n  | \"danger\";\n\nexport const BadgeVariants: Record<BadgeVariant, BadgeVariant> = {\n  primary: \"primary\",\n  secondary: \"secondary\",\n  transparent: \"transparent\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"danger\",\n};\n\nexport interface BadgeProps  {\n  /**\n   * The content to display within the badge.\n   */\n  children: ReactNode;\n  /**\n   * The badge's visual aesthetic.\n   * - type {@link BadgeVariant}\n   */\n  variant?: BadgeVariant;\n  /**\n   * The test id for the badge.\n   */\n  \"data-testid\"?: string;\n}\n\n/**\n * A badge component for displaying status, categories, or counts with various visual styles.\n *\n * API:\n *  - {@link BadgeProps}\n */\nexport const Badge = ({\n  variant,\n  children,\n  \"data-testid\": dataTestId,\n}: BadgeProps) => {\n  return (\n    <div\n      role=\"status\"\n      aria-live=\"polite\"\n      data-testid={dataTestId}\n      className={csx(\"proton-Badge\", variant && `proton-Badge--${variant}`)}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["BadgeVariants","Badge","variant","children","dataTestId","jsx","csx"],"mappings":";;;AAeO,MAAMA,IAAoD;AAAA,EAC/D,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AACV,GAwBaC,IAAQ,CAAC;AAAA,EACpB,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,eAAeC;AACjB,MAEI,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,aAAU;AAAA,IACV,eAAaD;AAAA,IACb,WAAWE,EAAI,gBAAgBJ,KAAW,iBAAiBA,CAAO,EAAE;AAAA,IAEnE,UAAAC;AAAA,EAAA;AAAA;"}

package/dist/components/Banner/Banner.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../node_modules/react/jsx-runtime.cjs.js"),a=require("react"),_=require("../Button/Button.cjs.js");;/* empty css                */const s=require("../../utils/string.cjs.js"),N=require("../Icon/IconComponents/DangerCircle.cjs.js"),j=require("../Icon/IconComponents/WarningTriangle.cjs.js"),g=require("../Icon/IconComponents/SuccessCircle.cjs.js"),E={success:"var(--proton-color__success-light)",warning:"var(--proton-color__warning-light)",danger:"var(--proton-color__danger-light)"},C={success:g.SuccessCircle,warning:j.WarningTriangle,danger:N.DangerCircle},R={default:"default",success:"success",warning:"warning",danger:"danger"},c=a.createContext(void 0),o=({variant:n="default",rounded:t=!0,icon:e=!1,compact:i=!0,children:B,"data-testid":m})=>r.jsxRuntimeExports.jsx(c.Provider,{value:n,children:r.jsxRuntimeExports.jsx("div",{role:"status","aria-live":"polite",className:s.csx("proton-Banner",`proton-Banner--${n}`,t&&"proton-Banner--rounded"),"data-testid":m,children:r.jsxRuntimeExports.jsxs("div",{className:s.csx("proton-Banner__wrapper",i&&"proton-Banner__wrapper--compact"),children:[r.jsxRuntimeExports.jsx(o.Icon,{icon:e}),r.jsxRuntimeExports.jsx("div",{className:"proton-Banner__content-wrapper",children:r.jsxRuntimeExports.jsx("div",{className:"proton-Banner__container",children:B})})]})})});o.displayName="ProtonUIBanner";const u=({children:n,"data-testid":t})=>{const e=a.useContext(c);if(!e)throw new Error("BannerTitle must be used within a Banner");return r.jsxRuntimeExports.jsx("h3",{className:s.csx("proton-Banner__title",`proton-Banner--${e}__title`),"data-testid":t,children:n})};u.displayName="ProtonUIBanner.Title";const l=({children:n,"data-testid":t})=>{const e=a.useContext(c);if(!e)throw new Error("BannerContent must be used within a Banner");return r.jsxRuntimeExports.jsx("p",{className:s.csx("proton-Banner__content",`proton-Banner--${e}__content`),"data-testid":t,children:n})};l.displayName="ProtonUIBanner.Content";function w(n,t){if(a.isValidElement(n))return n;if(n&&t!=="default"){const e=C[t];if(e)return r.jsxRuntimeExports.jsx(e,{size:18,color:E[t]})}return null}const d=({icon:n,"data-testid":t})=>{const e=a.useContext(c);if(!e)throw new Error("BannerIcon must be used within a Banner");const i=w(n,e);return i?r.jsxRuntimeExports.jsx("div",{"aria-hidden":"true","data-testid":t,className:s.csx("proton-Banner__icon",`proton-Banner--${e}__icon`),children:i}):null};d.displayName="ProtonUIBanner.Icon";const x=({children:n,...t})=>r.jsxRuntimeExports.jsx(_.Button,{...t,children:n});x.displayName="ProtonUIBanner.Action";const p=({children:n})=>r.jsxRuntimeExports.jsx("div",{className:"proton-Banner__actions",children:n});p.displayName="ProtonUIBanner.Actions";o.Title=u;o.Content=l;o.Icon=d;o.Action=x;o.Actions=p;exports.BANNER_VARIANTS=R;exports.Banner=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),g=require("../Button/Button.cjs.js");;/* empty css                */const a=require("../../utils/string.cjs.js"),x=require("../Icon/IconComponents/DangerCircle.cjs.js"),m=require("../Icon/IconComponents/WarningTriangle.cjs.js"),C=require("../Icon/IconComponents/SuccessCircle.cjs.js"),w={success:"var(--proton-color__success-light)",warning:"var(--proton-color__warning-light)",danger:"var(--proton-color__danger-light)"},I={success:C.SuccessCircle,warning:m.WarningTriangle,danger:x.DangerCircle},h={default:"default",success:"success",warning:"warning",danger:"danger"},c=s.createContext(void 0),o=({variant:n="default",rounded:t=!0,icon:e=!1,compact:i=!0,children:_,"data-testid":N})=>r.jsx(c.Provider,{value:n,children:r.jsx("div",{role:"status","aria-live":"polite",className:a.csx("proton-Banner",`proton-Banner--${n}`,t&&"proton-Banner--rounded"),"data-testid":N,children:r.jsxs("div",{className:a.csx("proton-Banner__wrapper",i&&"proton-Banner__wrapper--compact"),children:[r.jsx(o.Icon,{icon:e}),r.jsx("div",{className:"proton-Banner__content-wrapper",children:r.jsx("div",{className:"proton-Banner__container",children:_})})]})})});o.displayName="ProtonUIBanner";const l=({children:n,"data-testid":t})=>{const e=s.useContext(c);if(!e)throw new Error("BannerTitle must be used within a Banner");return r.jsx("h3",{className:a.csx("proton-Banner__title",`proton-Banner--${e}__title`),"data-testid":t,children:n})};l.displayName="ProtonUIBanner.Title";const d=({children:n,"data-testid":t})=>{const e=s.useContext(c);if(!e)throw new Error("BannerContent must be used within a Banner");return r.jsx("p",{className:a.csx("proton-Banner__content",`proton-Banner--${e}__content`),"data-testid":t,children:n})};d.displayName="ProtonUIBanner.Content";function f(n,t){if(s.isValidElement(n))return n;if(n&&t!=="default"){const e=I[t];if(e)return r.jsx(e,{size:18,color:w[t]})}return null}const u=({icon:n,"data-testid":t})=>{const e=s.useContext(c);if(!e)throw new Error("BannerIcon must be used within a Banner");const i=f(n,e);return i?r.jsx("div",{"aria-hidden":"true","data-testid":t,className:a.csx("proton-Banner__icon",`proton-Banner--${e}__icon`),children:i}):null};u.displayName="ProtonUIBanner.Icon";const B=({children:n,...t})=>r.jsx(g.Button,{...t,children:n});B.displayName="ProtonUIBanner.Action";const p=({children:n})=>r.jsx("div",{className:"proton-Banner__actions",children:n});p.displayName="ProtonUIBanner.Actions";o.Title=l;o.Content=d;o.Icon=u;o.Action=B;o.Actions=p;exports.BANNER_VARIANTS=h;exports.Banner=o;
 //# sourceMappingURL=Banner.cjs.js.map

package/dist/components/Banner/Banner.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.cjs.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, createContext, isValidElement, useContext } from \"react\";\nimport { csx } from \"../../utils\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { DangerCircle, SuccessCircle, WarningTriangle } from \"../Icon\";\n\nimport \"./Banner.css\";\n\nconst BANNER_ICON_COLORS = {\n  success: \"var(--proton-color__success-light)\",\n  warning: \"var(--proton-color__warning-light)\",\n  danger: \"var(--proton-color__danger-light)\",\n} as const;\n\nconst BANNER_ICON_COMPONENTS = {\n  success: SuccessCircle,\n  warning: WarningTriangle,\n  danger: DangerCircle,\n} as const;\n\nexport const BANNER_VARIANTS = {\n  default: \"default\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"danger\",\n} as const;\n\nexport type BannerVariant = \"default\" | \"success\" | \"warning\" | \"danger\";\n\nconst BannerContext = createContext<BannerVariant | undefined>(undefined);\n\ninterface BannerIconProps {\n  /**\n   * Optional custom icon or children for the icon area.\n   */\n  children?: ReactNode;\n  /**\n   * The icon to display in the banner.\n   * Can be a boolean to conditionally show or hide, or a ReactNode to provide a custom icon.\n   */\n  icon?: boolean | ReactNode;\n  /**\n   * The data-testid for the banner icon.\n   */\n  \"data-testid\"?: string;\n}\n\ninterface BannerProps extends BannerIconProps {\n  /**\n   * Compact padding around the content of the banner.\n   * @default true\n   */\n  compact?: boolean;\n  /**\n   * The content to display within the banner.\n   */\n  children: ReactNode;\n  /**\n   * The data-testid for the banner.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Round the corners of the banner.\n   * @default true\n   */\n  rounded?: boolean;\n  /**\n   * The banner's visual aesthetic.\n   * - type {@link BannerVariant}\n   */\n  variant?: BannerVariant;\n}\n\n/**\n * A banner used to display a success, warning, or error message.\n *\n * API:\n *  - {@link BannerProps}\n *  - extends {@link BannerIconProps}\n */\nconst Banner = ({\n  variant = \"default\",\n  rounded = true,\n  icon = false,\n  compact = true,\n  children,\n  \"data-testid\": dataTestId,\n}: BannerProps) => {\n  return (\n    <BannerContext.Provider value={variant}>\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        className={csx(\n          \"proton-Banner\",\n          `proton-Banner--${variant}`,\n          rounded && \"proton-Banner--rounded\",\n        )}\n        data-testid={dataTestId}\n      >\n        <div\n          className={csx(\n            \"proton-Banner__wrapper\",\n            compact && \"proton-Banner__wrapper--compact\",\n          )}\n        >\n          <Banner.Icon icon={icon} />\n          <div className=\"proton-Banner__content-wrapper\">\n            <div className=\"proton-Banner__container\">{children}</div>\n          </div>\n        </div>\n      </div>\n    </BannerContext.Provider>\n  );\n};\n\nBanner.displayName = \"ProtonUIBanner\";\n\nconst BannerTitle = ({\n  children,\n  \"data-testid\": dataTestId,\n}: {\n  children: ReactNode;\n  \"data-testid\"?: string;\n}) => {\n  const variant = useContext(BannerContext);\n  if (!variant) throw new Error(\"BannerTitle must be used within a Banner\");\n\n  return (\n    <h3\n      className={csx(\n        \"proton-Banner__title\",\n        `proton-Banner--${variant}__title`,\n      )}\n      data-testid={dataTestId}\n    >\n      {children}\n    </h3>\n  );\n};\n\nBannerTitle.displayName = \"ProtonUIBanner.Title\";\n\nconst BannerContent = ({\n  children,\n  \"data-testid\": dataTestId,\n}: {\n  children: ReactNode;\n  \"data-testid\"?: string;\n}) => {\n  const variant = useContext(BannerContext);\n  if (!variant) throw new Error(\"BannerContent must be used within a Banner\");\n\n  return (\n    <p\n      className={csx(\n        \"proton-Banner__content\",\n        `proton-Banner--${variant}__content`,\n      )}\n      data-testid={dataTestId}\n    >\n      {children}\n    </p>\n  );\n};\n\nBannerContent.displayName = \"ProtonUIBanner.Content\";\n\nfunction getIconContent(icon: ReactNode, variant: BannerVariant) {\n  if (isValidElement(icon)) return icon;\n\n  if (icon && variant !== \"default\") {\n    const IconComponent = BANNER_ICON_COMPONENTS[variant];\n\n    if (IconComponent) {\n      return <IconComponent size={18} color={BANNER_ICON_COLORS[variant]} />;\n    }\n  }\n\n  return null;\n}\n\nconst BannerIcon = ({ icon, \"data-testid\": dataTestId }: BannerIconProps) => {\n  const variant = useContext(BannerContext);\n  if (!variant) throw new Error(\"BannerIcon must be used within a Banner\");\n\n  const iconContent = getIconContent(icon, variant);\n  if (!iconContent) return null;\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-testid={dataTestId}\n      className={csx(\"proton-Banner__icon\", `proton-Banner--${variant}__icon`)}\n    >\n      {iconContent}\n    </div>\n  );\n};\n\nBannerIcon.displayName = \"ProtonUIBanner.Icon\";\n\nconst BannerAction = ({ children, ...buttonProps }: ButtonProps) => {\n  return <Button {...buttonProps}>{children}</Button>;\n};\n\nBannerAction.displayName = \"ProtonUIBanner.Action\";\n\nconst BannerActions = ({ children }: { children: ReactNode }) => {\n  return <div className=\"proton-Banner__actions\">{children}</div>;\n};\n\nBannerActions.displayName = \"ProtonUIBanner.Actions\";\n\n/**\n * Renders an h3 styled banner.\n */\nBanner.Title = BannerTitle;\n\n/**\n * Renders a p styled banner.\n */\nBanner.Content = BannerContent;\n\n/**\n * Renders an icon inline with the banner title.\n *\n * API:\n *  - {@link BannerIconProps}\n */\nBanner.Icon = BannerIcon;\n\n/**\n * Renders a Proton Button.\n * - @prop buttonProps {@link ButtonProps}\n */\nBanner.Action = BannerAction;\n\n/**\n * Renders Proton Buttons in a responsive actions grid.\n */\nBanner.Actions = BannerActions;\n\nexport { Banner };\n"],"names":["BANNER_ICON_COLORS","BANNER_ICON_COMPONENTS","SuccessCircle","WarningTriangle","DangerCircle","BANNER_VARIANTS","BannerContext","createContext","Banner","variant","rounded","icon","compact","children","dataTestId","jsx","csx","jsxs","BannerTitle","useContext","BannerContent","getIconContent","isValidElement","IconComponent","BannerIcon","iconContent","BannerAction","buttonProps","Button","BannerActions"],"mappings":"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"}
+{"version":3,"file":"Banner.cjs.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, createContext, isValidElement, useContext } from \"react\";\nimport { csx } from \"../../utils\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { DangerCircle, SuccessCircle, WarningTriangle } from \"../Icon\";\n\nimport \"./Banner.css\";\n\nconst BANNER_ICON_COLORS = {\n  success: \"var(--proton-color__success-light)\",\n  warning: \"var(--proton-color__warning-light)\",\n  danger: \"var(--proton-color__danger-light)\",\n} as const;\n\nconst BANNER_ICON_COMPONENTS = {\n  success: SuccessCircle,\n  warning: WarningTriangle,\n  danger: DangerCircle,\n} as const;\n\nexport const BANNER_VARIANTS = {\n  default: \"default\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"danger\",\n} as const;\n\nexport type BannerVariant = \"default\" | \"success\" | \"warning\" | \"danger\";\n\nconst BannerContext = createContext<BannerVariant | undefined>(undefined);\n\ninterface BannerIconProps {\n  /**\n   * Optional custom icon or children for the icon area.\n   */\n  children?: ReactNode;\n  /**\n   * The icon to display in the banner.\n   * Can be a boolean to conditionally show or hide, or a ReactNode to provide a custom icon.\n   */\n  icon?: boolean | ReactNode;\n  /**\n   * The data-testid for the banner icon.\n   */\n  \"data-testid\"?: string;\n}\n\ninterface BannerProps extends BannerIconProps {\n  /**\n   * Compact padding around the content of the banner.\n   * @default true\n   */\n  compact?: boolean;\n  /**\n   * The content to display within the banner.\n   */\n  children: ReactNode;\n  /**\n   * The data-testid for the banner.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Round the corners of the banner.\n   * @default true\n   */\n  rounded?: boolean;\n  /**\n   * The banner's visual aesthetic.\n   * - type {@link BannerVariant}\n   */\n  variant?: BannerVariant;\n}\n\n/**\n * A banner used to display a success, warning, or error message.\n *\n * API:\n *  - {@link BannerProps}\n *  - extends {@link BannerIconProps}\n */\nconst Banner = ({\n  variant = \"default\",\n  rounded = true,\n  icon = false,\n  compact = true,\n  children,\n  \"data-testid\": dataTestId,\n}: BannerProps) => {\n  return (\n    <BannerContext.Provider value={variant}>\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        className={csx(\n          \"proton-Banner\",\n          `proton-Banner--${variant}`,\n          rounded && \"proton-Banner--rounded\",\n        )}\n        data-testid={dataTestId}\n      >\n        <div\n          className={csx(\n            \"proton-Banner__wrapper\",\n            compact && \"proton-Banner__wrapper--compact\",\n          )}\n        >\n          <Banner.Icon icon={icon} />\n          <div className=\"proton-Banner__content-wrapper\">\n            <div className=\"proton-Banner__container\">{children}</div>\n          </div>\n        </div>\n      </div>\n    </BannerContext.Provider>\n  );\n};\n\nBanner.displayName = \"ProtonUIBanner\";\n\nconst BannerTitle = ({\n  children,\n  \"data-testid\": dataTestId,\n}: {\n  children: ReactNode;\n  \"data-testid\"?: string;\n}) => {\n  const variant = useContext(BannerContext);\n  if (!variant) throw new Error(\"BannerTitle must be used within a Banner\");\n\n  return (\n    <h3\n      className={csx(\n        \"proton-Banner__title\",\n        `proton-Banner--${variant}__title`,\n      )}\n      data-testid={dataTestId}\n    >\n      {children}\n    </h3>\n  );\n};\n\nBannerTitle.displayName = \"ProtonUIBanner.Title\";\n\nconst BannerContent = ({\n  children,\n  \"data-testid\": dataTestId,\n}: {\n  children: ReactNode;\n  \"data-testid\"?: string;\n}) => {\n  const variant = useContext(BannerContext);\n  if (!variant) throw new Error(\"BannerContent must be used within a Banner\");\n\n  return (\n    <p\n      className={csx(\n        \"proton-Banner__content\",\n        `proton-Banner--${variant}__content`,\n      )}\n      data-testid={dataTestId}\n    >\n      {children}\n    </p>\n  );\n};\n\nBannerContent.displayName = \"ProtonUIBanner.Content\";\n\nfunction getIconContent(icon: ReactNode, variant: BannerVariant) {\n  if (isValidElement(icon)) return icon;\n\n  if (icon && variant !== \"default\") {\n    const IconComponent = BANNER_ICON_COMPONENTS[variant];\n\n    if (IconComponent) {\n      return <IconComponent size={18} color={BANNER_ICON_COLORS[variant]} />;\n    }\n  }\n\n  return null;\n}\n\nconst BannerIcon = ({ icon, \"data-testid\": dataTestId }: BannerIconProps) => {\n  const variant = useContext(BannerContext);\n  if (!variant) throw new Error(\"BannerIcon must be used within a Banner\");\n\n  const iconContent = getIconContent(icon, variant);\n  if (!iconContent) return null;\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-testid={dataTestId}\n      className={csx(\"proton-Banner__icon\", `proton-Banner--${variant}__icon`)}\n    >\n      {iconContent}\n    </div>\n  );\n};\n\nBannerIcon.displayName = \"ProtonUIBanner.Icon\";\n\nconst BannerAction = ({ children, ...buttonProps }: ButtonProps) => {\n  return <Button {...buttonProps}>{children}</Button>;\n};\n\nBannerAction.displayName = \"ProtonUIBanner.Action\";\n\nconst BannerActions = ({ children }: { children: ReactNode }) => {\n  return <div className=\"proton-Banner__actions\">{children}</div>;\n};\n\nBannerActions.displayName = \"ProtonUIBanner.Actions\";\n\n/**\n * Renders an h3 styled banner.\n */\nBanner.Title = BannerTitle;\n\n/**\n * Renders a p styled banner.\n */\nBanner.Content = BannerContent;\n\n/**\n * Renders an icon inline with the banner title.\n *\n * API:\n *  - {@link BannerIconProps}\n */\nBanner.Icon = BannerIcon;\n\n/**\n * Renders a Proton Button.\n * - @prop buttonProps {@link ButtonProps}\n */\nBanner.Action = BannerAction;\n\n/**\n * Renders Proton Buttons in a responsive actions grid.\n */\nBanner.Actions = BannerActions;\n\nexport { Banner };\n"],"names":["BANNER_ICON_COLORS","BANNER_ICON_COMPONENTS","SuccessCircle","WarningTriangle","DangerCircle","BANNER_VARIANTS","BannerContext","createContext","Banner","variant","rounded","icon","compact","children","dataTestId","jsx","csx","jsxs","BannerTitle","useContext","BannerContent","getIconContent","isValidElement","IconComponent","BannerIcon","iconContent","BannerAction","buttonProps","Button","BannerActions"],"mappings":"qaASMA,EAAqB,CACzB,QAAS,qCACT,QAAS,qCACT,OAAQ,mCACV,EAEMC,EAAyB,CAC7B,QAASC,EAAAA,cACT,QAASC,EAAAA,gBACT,OAAQC,EAAAA,YACV,EAEaC,EAAkB,CAC7B,QAAS,UACT,QAAS,UACT,QAAS,UACT,OAAQ,QACV,EAIMC,EAAgBC,EAAAA,cAAyC,MAAS,EAmDlEC,EAAS,CAAC,CACd,QAAAC,EAAU,UACV,QAAAC,EAAU,GACV,KAAAC,EAAO,GACP,QAAAC,EAAU,GACV,SAAAC,EACA,cAAeC,CACjB,IAEIC,EAAAA,IAACT,EAAc,SAAd,CAAuB,MAAOG,EAC7B,SAAAM,EAAAA,IAAC,MAAA,CACC,KAAK,SACL,YAAU,SACV,UAAWC,EAAAA,IACT,gBACA,kBAAkBP,CAAO,GACzBC,GAAW,wBAAA,EAEb,cAAaI,EAEb,SAAAG,EAAAA,KAAC,MAAA,CACC,UAAWD,EAAAA,IACT,yBACAJ,GAAW,iCAAA,EAGb,SAAA,CAAAG,EAAAA,IAACP,EAAO,KAAP,CAAY,KAAAG,CAAA,CAAY,EACzBI,EAAAA,IAAC,OAAI,UAAU,iCACb,eAAC,MAAA,CAAI,UAAU,2BAA4B,SAAAF,CAAA,CAAS,CAAA,CACtD,CAAA,CAAA,CAAA,CACF,CAAA,EAEJ,EAIJL,EAAO,YAAc,iBAErB,MAAMU,EAAc,CAAC,CACnB,SAAAL,EACA,cAAeC,CACjB,IAGM,CACJ,MAAML,EAAUU,EAAAA,WAAWb,CAAa,EACxC,GAAI,CAACG,EAAS,MAAM,IAAI,MAAM,0CAA0C,EAExE,OACEM,EAAAA,IAAC,KAAA,CACC,UAAWC,EAAAA,IACT,uBACA,kBAAkBP,CAAO,SAAA,EAE3B,cAAaK,EAEZ,SAAAD,CAAA,CAAA,CAGP,EAEAK,EAAY,YAAc,uBAE1B,MAAME,EAAgB,CAAC,CACrB,SAAAP,EACA,cAAeC,CACjB,IAGM,CACJ,MAAML,EAAUU,EAAAA,WAAWb,CAAa,EACxC,GAAI,CAACG,EAAS,MAAM,IAAI,MAAM,4CAA4C,EAE1E,OACEM,EAAAA,IAAC,IAAA,CACC,UAAWC,EAAAA,IACT,yBACA,kBAAkBP,CAAO,WAAA,EAE3B,cAAaK,EAEZ,SAAAD,CAAA,CAAA,CAGP,EAEAO,EAAc,YAAc,yBAE5B,SAASC,EAAeV,EAAiBF,EAAwB,CAC/D,GAAIa,EAAAA,eAAeX,CAAI,EAAG,OAAOA,EAEjC,GAAIA,GAAQF,IAAY,UAAW,CACjC,MAAMc,EAAgBtB,EAAuBQ,CAAO,EAEpD,GAAIc,EACF,aAAQA,EAAA,CAAc,KAAM,GAAI,MAAOvB,EAAmBS,CAAO,EAAG,CAExE,CAEA,OAAO,IACT,CAEA,MAAMe,EAAa,CAAC,CAAE,KAAAb,EAAM,cAAeG,KAAkC,CAC3E,MAAML,EAAUU,EAAAA,WAAWb,CAAa,EACxC,GAAI,CAACG,EAAS,MAAM,IAAI,MAAM,yCAAyC,EAEvE,MAAMgB,EAAcJ,EAAeV,EAAMF,CAAO,EAChD,OAAKgB,EAGHV,EAAAA,IAAC,MAAA,CACC,cAAY,OACZ,cAAaD,EACb,UAAWE,EAAAA,IAAI,sBAAuB,kBAAkBP,CAAO,QAAQ,EAEtE,SAAAgB,CAAA,CAAA,EARoB,IAW3B,EAEAD,EAAW,YAAc,sBAEzB,MAAME,EAAe,CAAC,CAAE,SAAAb,EAAU,GAAGc,KAC5BZ,EAAAA,IAACa,EAAAA,OAAA,CAAQ,GAAGD,EAAc,SAAAd,CAAA,CAAS,EAG5Ca,EAAa,YAAc,wBAE3B,MAAMG,EAAgB,CAAC,CAAE,SAAAhB,KAChBE,EAAAA,IAAC,MAAA,CAAI,UAAU,yBAA0B,SAAAF,CAAA,CAAS,EAG3DgB,EAAc,YAAc,yBAK5BrB,EAAO,MAAQU,EAKfV,EAAO,QAAUY,EAQjBZ,EAAO,KAAOgB,EAMdhB,EAAO,OAASkB,EAKhBlB,EAAO,QAAUqB"}

package/dist/components/Banner/Banner.es.js

@@ -1,32 +1,32 @@
-import { j as e } from "../../node_modules/react/jsx-runtime.es.js";
-import { createContext as N, useContext as c, isValidElement as f } from "react";
-import { Button as x } from "../Button/Button.es.js";
+import { jsx as e, jsxs as N } from "react/jsx-runtime";
+import { createContext as f, useContext as c, isValidElement as g } from "react";
+import { Button as w } from "../Button/Button.es.js";
 /* empty css              */
 import { csx as a } from "../../utils/string.es.js";
-import { DangerCircle as g } from "../Icon/IconComponents/DangerCircle.es.js";
-import { WarningTriangle as w } from "../Icon/IconComponents/WarningTriangle.es.js";
-import { SuccessCircle as h } from "../Icon/IconComponents/SuccessCircle.es.js";
-const C = {
+import { DangerCircle as h } from "../Icon/IconComponents/DangerCircle.es.js";
+import { WarningTriangle as C } from "../Icon/IconComponents/WarningTriangle.es.js";
+import { SuccessCircle as I } from "../Icon/IconComponents/SuccessCircle.es.js";
+const v = {
   success: "var(--proton-color__success-light)",
   warning: "var(--proton-color__warning-light)",
   danger: "var(--proton-color__danger-light)"
-}, I = {
-  success: h,
-  warning: w,
-  danger: g
-}, U = {
+}, A = {
+  success: I,
+  warning: C,
+  danger: h
+}, $ = {
   default: "default",
   success: "success",
   warning: "warning",
   danger: "danger"
-}, i = N(void 0), o = ({
+}, s = f(void 0), o = ({
   variant: n = "default",
   rounded: r = !0,
   icon: t = !1,
-  compact: s = !0,
+  compact: i = !0,
   children: m,
   "data-testid": _
-}) => /* @__PURE__ */ e.jsx(i.Provider, { value: n, children: /* @__PURE__ */ e.jsx(
+}) => /* @__PURE__ */ e(s.Provider, { value: n, children: /* @__PURE__ */ e(
   "div",
   {
     role: "status",
@@ -37,16 +37,16 @@ const C = {
       r && "proton-Banner--rounded"
     ),
     "data-testid": _,
-    children: /* @__PURE__ */ e.jsxs(
+    children: /* @__PURE__ */ N(
       "div",
       {
         className: a(
           "proton-Banner__wrapper",
-          s && "proton-Banner__wrapper--compact"
+          i && "proton-Banner__wrapper--compact"
         ),
         children: [
-          /* @__PURE__ */ e.jsx(o.Icon, { icon: t }),
-          /* @__PURE__ */ e.jsx("div", { className: "proton-Banner__content-wrapper", children: /* @__PURE__ */ e.jsx("div", { className: "proton-Banner__container", children: m }) })
+          /* @__PURE__ */ e(o.Icon, { icon: t }),
+          /* @__PURE__ */ e("div", { className: "proton-Banner__content-wrapper", children: /* @__PURE__ */ e("div", { className: "proton-Banner__container", children: m }) })
         ]
       }
     )
@@ -57,9 +57,9 @@ const d = ({
   children: n,
   "data-testid": r
 }) => {
-  const t = c(i);
+  const t = c(s);
   if (!t) throw new Error("BannerTitle must be used within a Banner");
-  return /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ e(
     "h3",
     {
       className: a(
@@ -76,9 +76,9 @@ const l = ({
   children: n,
   "data-testid": r
 }) => {
-  const t = c(i);
+  const t = c(s);
   if (!t) throw new Error("BannerContent must be used within a Banner");
-  return /* @__PURE__ */ e.jsx(
+  return /* @__PURE__ */ e(
     "p",
     {
       className: a(
@@ -91,33 +91,33 @@ const l = ({
   );
 };
 l.displayName = "ProtonUIBanner.Content";
-function j(n, r) {
-  if (f(n)) return n;
+function E(n, r) {
+  if (g(n)) return n;
   if (n && r !== "default") {
-    const t = I[r];
+    const t = A[r];
     if (t)
-      return /* @__PURE__ */ e.jsx(t, { size: 18, color: C[r] });
+      return /* @__PURE__ */ e(t, { size: 18, color: v[r] });
   }
   return null;
 }
 const p = ({ icon: n, "data-testid": r }) => {
-  const t = c(i);
+  const t = c(s);
   if (!t) throw new Error("BannerIcon must be used within a Banner");
-  const s = j(n, t);
-  return s ? /* @__PURE__ */ e.jsx(
+  const i = E(n, t);
+  return i ? /* @__PURE__ */ e(
     "div",
     {
       "aria-hidden": "true",
       "data-testid": r,
       className: a("proton-Banner__icon", `proton-Banner--${t}__icon`),
-      children: s
+      children: i
     }
   ) : null;
 };
 p.displayName = "ProtonUIBanner.Icon";
-const u = ({ children: n, ...r }) => /* @__PURE__ */ e.jsx(x, { ...r, children: n });
+const u = ({ children: n, ...r }) => /* @__PURE__ */ e(w, { ...r, children: n });
 u.displayName = "ProtonUIBanner.Action";
-const B = ({ children: n }) => /* @__PURE__ */ e.jsx("div", { className: "proton-Banner__actions", children: n });
+const B = ({ children: n }) => /* @__PURE__ */ e("div", { className: "proton-Banner__actions", children: n });
 B.displayName = "ProtonUIBanner.Actions";
 o.Title = d;
 o.Content = l;
@@ -125,7 +125,7 @@ o.Icon = p;
 o.Action = u;
 o.Actions = B;
 export {
-  U as BANNER_VARIANTS,
+  $ as BANNER_VARIANTS,
   o as Banner
 };
 //# sourceMappingURL=Banner.es.js.map

package/dist/components/Banner/Banner.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.es.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, createContext, isValidElement, useContext } from \"react\";\nimport { csx } from \"../../utils\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { DangerCircle, SuccessCircle, WarningTriangle } from \"../Icon\";\n\nimport \"./Banner.css\";\n\nconst BANNER_ICON_COLORS = {\n  success: \"var(--proton-color__success-light)\",\n  warning: \"var(--proton-color__warning-light)\",\n  danger: \"var(--proton-color__danger-light)\",\n} as const;\n\nconst BANNER_ICON_COMPONENTS = {\n  success: SuccessCircle,\n  warning: WarningTriangle,\n  danger: DangerCircle,\n} as const;\n\nexport const BANNER_VARIANTS = {\n  default: \"default\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"danger\",\n} as const;\n\nexport type BannerVariant = \"default\" | \"success\" | \"warning\" | \"danger\";\n\nconst BannerContext = createContext<BannerVariant | undefined>(undefined);\n\ninterface BannerIconProps {\n  /**\n   * Optional custom icon or children for the icon area.\n   */\n  children?: ReactNode;\n  /**\n   * The icon to display in the banner.\n   * Can be a boolean to conditionally show or hide, or a ReactNode to provide a custom icon.\n   */\n  icon?: boolean | ReactNode;\n  /**\n   * The data-testid for the banner icon.\n   */\n  \"data-testid\"?: string;\n}\n\ninterface BannerProps extends BannerIconProps {\n  /**\n   * Compact padding around the content of the banner.\n   * @default true\n   */\n  compact?: boolean;\n  /**\n   * The content to display within the banner.\n   */\n  children: ReactNode;\n  /**\n   * The data-testid for the banner.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Round the corners of the banner.\n   * @default true\n   */\n  rounded?: boolean;\n  /**\n   * The banner's visual aesthetic.\n   * - type {@link BannerVariant}\n   */\n  variant?: BannerVariant;\n}\n\n/**\n * A banner used to display a success, warning, or error message.\n *\n * API:\n *  - {@link BannerProps}\n *  - extends {@link BannerIconProps}\n */\nconst Banner = ({\n  variant = \"default\",\n  rounded = true,\n  icon = false,\n  compact = true,\n  children,\n  \"data-testid\": dataTestId,\n}: BannerProps) => {\n  return (\n    <BannerContext.Provider value={variant}>\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        className={csx(\n          \"proton-Banner\",\n          `proton-Banner--${variant}`,\n          rounded && \"proton-Banner--rounded\",\n        )}\n        data-testid={dataTestId}\n      >\n        <div\n          className={csx(\n            \"proton-Banner__wrapper\",\n            compact && \"proton-Banner__wrapper--compact\",\n          )}\n        >\n          <Banner.Icon icon={icon} />\n          <div className=\"proton-Banner__content-wrapper\">\n            <div className=\"proton-Banner__container\">{children}</div>\n          </div>\n        </div>\n      </div>\n    </BannerContext.Provider>\n  );\n};\n\nBanner.displayName = \"ProtonUIBanner\";\n\nconst BannerTitle = ({\n  children,\n  \"data-testid\": dataTestId,\n}: {\n  children: ReactNode;\n  \"data-testid\"?: string;\n}) => {\n  const variant = useContext(BannerContext);\n  if (!variant) throw new Error(\"BannerTitle must be used within a Banner\");\n\n  return (\n    <h3\n      className={csx(\n        \"proton-Banner__title\",\n        `proton-Banner--${variant}__title`,\n      )}\n      data-testid={dataTestId}\n    >\n      {children}\n    </h3>\n  );\n};\n\nBannerTitle.displayName = \"ProtonUIBanner.Title\";\n\nconst BannerContent = ({\n  children,\n  \"data-testid\": dataTestId,\n}: {\n  children: ReactNode;\n  \"data-testid\"?: string;\n}) => {\n  const variant = useContext(BannerContext);\n  if (!variant) throw new Error(\"BannerContent must be used within a Banner\");\n\n  return (\n    <p\n      className={csx(\n        \"proton-Banner__content\",\n        `proton-Banner--${variant}__content`,\n      )}\n      data-testid={dataTestId}\n    >\n      {children}\n    </p>\n  );\n};\n\nBannerContent.displayName = \"ProtonUIBanner.Content\";\n\nfunction getIconContent(icon: ReactNode, variant: BannerVariant) {\n  if (isValidElement(icon)) return icon;\n\n  if (icon && variant !== \"default\") {\n    const IconComponent = BANNER_ICON_COMPONENTS[variant];\n\n    if (IconComponent) {\n      return <IconComponent size={18} color={BANNER_ICON_COLORS[variant]} />;\n    }\n  }\n\n  return null;\n}\n\nconst BannerIcon = ({ icon, \"data-testid\": dataTestId }: BannerIconProps) => {\n  const variant = useContext(BannerContext);\n  if (!variant) throw new Error(\"BannerIcon must be used within a Banner\");\n\n  const iconContent = getIconContent(icon, variant);\n  if (!iconContent) return null;\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-testid={dataTestId}\n      className={csx(\"proton-Banner__icon\", `proton-Banner--${variant}__icon`)}\n    >\n      {iconContent}\n    </div>\n  );\n};\n\nBannerIcon.displayName = \"ProtonUIBanner.Icon\";\n\nconst BannerAction = ({ children, ...buttonProps }: ButtonProps) => {\n  return <Button {...buttonProps}>{children}</Button>;\n};\n\nBannerAction.displayName = \"ProtonUIBanner.Action\";\n\nconst BannerActions = ({ children }: { children: ReactNode }) => {\n  return <div className=\"proton-Banner__actions\">{children}</div>;\n};\n\nBannerActions.displayName = \"ProtonUIBanner.Actions\";\n\n/**\n * Renders an h3 styled banner.\n */\nBanner.Title = BannerTitle;\n\n/**\n * Renders a p styled banner.\n */\nBanner.Content = BannerContent;\n\n/**\n * Renders an icon inline with the banner title.\n *\n * API:\n *  - {@link BannerIconProps}\n */\nBanner.Icon = BannerIcon;\n\n/**\n * Renders a Proton Button.\n * - @prop buttonProps {@link ButtonProps}\n */\nBanner.Action = BannerAction;\n\n/**\n * Renders Proton Buttons in a responsive actions grid.\n */\nBanner.Actions = BannerActions;\n\nexport { Banner };\n"],"names":["BANNER_ICON_COLORS","BANNER_ICON_COMPONENTS","SuccessCircle","WarningTriangle","DangerCircle","BANNER_VARIANTS","BannerContext","createContext","Banner","variant","rounded","icon","compact","children","dataTestId","jsx","csx","jsxs","BannerTitle","useContext","BannerContent","getIconContent","isValidElement","IconComponent","BannerIcon","iconContent","BannerAction","buttonProps","Button","BannerActions"],"mappings":"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"}
+{"version":3,"file":"Banner.es.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode, createContext, isValidElement, useContext } from \"react\";\nimport { csx } from \"../../utils\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { DangerCircle, SuccessCircle, WarningTriangle } from \"../Icon\";\n\nimport \"./Banner.css\";\n\nconst BANNER_ICON_COLORS = {\n  success: \"var(--proton-color__success-light)\",\n  warning: \"var(--proton-color__warning-light)\",\n  danger: \"var(--proton-color__danger-light)\",\n} as const;\n\nconst BANNER_ICON_COMPONENTS = {\n  success: SuccessCircle,\n  warning: WarningTriangle,\n  danger: DangerCircle,\n} as const;\n\nexport const BANNER_VARIANTS = {\n  default: \"default\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"danger\",\n} as const;\n\nexport type BannerVariant = \"default\" | \"success\" | \"warning\" | \"danger\";\n\nconst BannerContext = createContext<BannerVariant | undefined>(undefined);\n\ninterface BannerIconProps {\n  /**\n   * Optional custom icon or children for the icon area.\n   */\n  children?: ReactNode;\n  /**\n   * The icon to display in the banner.\n   * Can be a boolean to conditionally show or hide, or a ReactNode to provide a custom icon.\n   */\n  icon?: boolean | ReactNode;\n  /**\n   * The data-testid for the banner icon.\n   */\n  \"data-testid\"?: string;\n}\n\ninterface BannerProps extends BannerIconProps {\n  /**\n   * Compact padding around the content of the banner.\n   * @default true\n   */\n  compact?: boolean;\n  /**\n   * The content to display within the banner.\n   */\n  children: ReactNode;\n  /**\n   * The data-testid for the banner.\n   */\n  \"data-testid\"?: string;\n  /**\n   * Round the corners of the banner.\n   * @default true\n   */\n  rounded?: boolean;\n  /**\n   * The banner's visual aesthetic.\n   * - type {@link BannerVariant}\n   */\n  variant?: BannerVariant;\n}\n\n/**\n * A banner used to display a success, warning, or error message.\n *\n * API:\n *  - {@link BannerProps}\n *  - extends {@link BannerIconProps}\n */\nconst Banner = ({\n  variant = \"default\",\n  rounded = true,\n  icon = false,\n  compact = true,\n  children,\n  \"data-testid\": dataTestId,\n}: BannerProps) => {\n  return (\n    <BannerContext.Provider value={variant}>\n      <div\n        role=\"status\"\n        aria-live=\"polite\"\n        className={csx(\n          \"proton-Banner\",\n          `proton-Banner--${variant}`,\n          rounded && \"proton-Banner--rounded\",\n        )}\n        data-testid={dataTestId}\n      >\n        <div\n          className={csx(\n            \"proton-Banner__wrapper\",\n            compact && \"proton-Banner__wrapper--compact\",\n          )}\n        >\n          <Banner.Icon icon={icon} />\n          <div className=\"proton-Banner__content-wrapper\">\n            <div className=\"proton-Banner__container\">{children}</div>\n          </div>\n        </div>\n      </div>\n    </BannerContext.Provider>\n  );\n};\n\nBanner.displayName = \"ProtonUIBanner\";\n\nconst BannerTitle = ({\n  children,\n  \"data-testid\": dataTestId,\n}: {\n  children: ReactNode;\n  \"data-testid\"?: string;\n}) => {\n  const variant = useContext(BannerContext);\n  if (!variant) throw new Error(\"BannerTitle must be used within a Banner\");\n\n  return (\n    <h3\n      className={csx(\n        \"proton-Banner__title\",\n        `proton-Banner--${variant}__title`,\n      )}\n      data-testid={dataTestId}\n    >\n      {children}\n    </h3>\n  );\n};\n\nBannerTitle.displayName = \"ProtonUIBanner.Title\";\n\nconst BannerContent = ({\n  children,\n  \"data-testid\": dataTestId,\n}: {\n  children: ReactNode;\n  \"data-testid\"?: string;\n}) => {\n  const variant = useContext(BannerContext);\n  if (!variant) throw new Error(\"BannerContent must be used within a Banner\");\n\n  return (\n    <p\n      className={csx(\n        \"proton-Banner__content\",\n        `proton-Banner--${variant}__content`,\n      )}\n      data-testid={dataTestId}\n    >\n      {children}\n    </p>\n  );\n};\n\nBannerContent.displayName = \"ProtonUIBanner.Content\";\n\nfunction getIconContent(icon: ReactNode, variant: BannerVariant) {\n  if (isValidElement(icon)) return icon;\n\n  if (icon && variant !== \"default\") {\n    const IconComponent = BANNER_ICON_COMPONENTS[variant];\n\n    if (IconComponent) {\n      return <IconComponent size={18} color={BANNER_ICON_COLORS[variant]} />;\n    }\n  }\n\n  return null;\n}\n\nconst BannerIcon = ({ icon, \"data-testid\": dataTestId }: BannerIconProps) => {\n  const variant = useContext(BannerContext);\n  if (!variant) throw new Error(\"BannerIcon must be used within a Banner\");\n\n  const iconContent = getIconContent(icon, variant);\n  if (!iconContent) return null;\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-testid={dataTestId}\n      className={csx(\"proton-Banner__icon\", `proton-Banner--${variant}__icon`)}\n    >\n      {iconContent}\n    </div>\n  );\n};\n\nBannerIcon.displayName = \"ProtonUIBanner.Icon\";\n\nconst BannerAction = ({ children, ...buttonProps }: ButtonProps) => {\n  return <Button {...buttonProps}>{children}</Button>;\n};\n\nBannerAction.displayName = \"ProtonUIBanner.Action\";\n\nconst BannerActions = ({ children }: { children: ReactNode }) => {\n  return <div className=\"proton-Banner__actions\">{children}</div>;\n};\n\nBannerActions.displayName = \"ProtonUIBanner.Actions\";\n\n/**\n * Renders an h3 styled banner.\n */\nBanner.Title = BannerTitle;\n\n/**\n * Renders a p styled banner.\n */\nBanner.Content = BannerContent;\n\n/**\n * Renders an icon inline with the banner title.\n *\n * API:\n *  - {@link BannerIconProps}\n */\nBanner.Icon = BannerIcon;\n\n/**\n * Renders a Proton Button.\n * - @prop buttonProps {@link ButtonProps}\n */\nBanner.Action = BannerAction;\n\n/**\n * Renders Proton Buttons in a responsive actions grid.\n */\nBanner.Actions = BannerActions;\n\nexport { Banner };\n"],"names":["BANNER_ICON_COLORS","BANNER_ICON_COMPONENTS","SuccessCircle","WarningTriangle","DangerCircle","BANNER_VARIANTS","BannerContext","createContext","Banner","variant","rounded","icon","compact","children","dataTestId","jsx","csx","jsxs","BannerTitle","useContext","BannerContent","getIconContent","isValidElement","IconComponent","BannerIcon","iconContent","BannerAction","buttonProps","Button","BannerActions"],"mappings":"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"}

package/dist/components/Button/Button.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../node_modules/react/jsx-runtime.cjs.js"),y=require("react"),p=require("../../utils/string.cjs.js"),B=require("../../utils/navigation.cjs.js");;/* empty css                */const E={primary:"primary",secondary:"secondary",success:"success",danger:"danger",translucent:"translucent"},R={small:"small",medium:"medium",large:"large",xlarge:"xlarge","2xlarge":"2xlarge"},g=y.forwardRef(({variant:j="primary",size:i="medium",fullWidth:s=!1,icon:c,to:t,target:a,onPress:e,type:f="button",isDisabled:n,"data-testid":v,children:l},d)=>{const u=t&&B.isUrlExternal(t),x={className:p.csx("proton-Button",`proton-Button--${j}`,s&&"proton-Button--fullWidth",n&&"proton-Button--disabled",i&&`proton-Button--${i}`),"data-testid":v,...t&&{"aria-disabled":n},...n&&{tabIndex:-1}},m=r.jsxRuntimeExports.jsxs(r.jsxRuntimeExports.Fragment,{children:[c&&r.jsxRuntimeExports.jsx("div",{className:p.csx("proton-Button__icon-decorator",s&&"proton-Button__icon-decorator--fullWidth"),children:c}),l&&r.jsxRuntimeExports.jsx("div",{className:"proton-Button__text",children:l})]});return t?r.jsxRuntimeExports.jsx("a",{...x,href:t,target:a||(u?"_blank":void 0),rel:u||a==="_blank"?"noopener noreferrer":void 0,ref:d,onClick:o=>{if(n){o.preventDefault();return}!u&&!a&&B.handleInternalNavigation(o,t),e==null||e(o)},role:"button",children:m}):r.jsxRuntimeExports.jsx("button",{...x,type:f,disabled:n,ref:d,onClick:o=>{!n&&e&&e(o)},children:m})});g.displayName="ProtonUIButton";exports.Button=g;exports.ButtonSizes=R;exports.ButtonVariants=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),_=require("react"),x=require("../../utils/string.cjs.js"),B=require("../../utils/navigation.cjs.js");;/* empty css                */const j={primary:"primary",secondary:"secondary",success:"success",danger:"danger",translucent:"translucent"},b={small:"small",medium:"medium",large:"large",xlarge:"xlarge","2xlarge":"2xlarge"},g=_.forwardRef(({variant:f="primary",size:i="medium",fullWidth:c=!1,icon:l,to:t,target:a,onPress:o,type:v="button",isDisabled:n,"data-testid":y,children:s},d)=>{const u=t&&B.isUrlExternal(t),m={className:x.csx("proton-Button",`proton-Button--${f}`,c&&"proton-Button--fullWidth",n&&"proton-Button--disabled",i&&`proton-Button--${i}`),"data-testid":y,...t&&{"aria-disabled":n},...n&&{tabIndex:-1}},p=r.jsxs(r.Fragment,{children:[l&&r.jsx("div",{className:x.csx("proton-Button__icon-decorator",c&&"proton-Button__icon-decorator--fullWidth"),children:l}),s&&r.jsx("div",{className:"proton-Button__text",children:s})]});return t?r.jsx("a",{...m,href:t,target:a||(u?"_blank":void 0),rel:u||a==="_blank"?"noopener noreferrer":void 0,ref:d,onClick:e=>{if(n){e.preventDefault();return}!u&&!a&&B.handleInternalNavigation(e,t),o==null||o(e)},role:"button",children:p}):r.jsx("button",{...m,type:v,disabled:n,ref:d,onClick:e=>{!n&&o&&o(e)},children:p})});g.displayName="ProtonUIButton";exports.Button=g;exports.ButtonSizes=b;exports.ButtonVariants=j;
 //# sourceMappingURL=Button.cjs.js.map

package/dist/components/Button/Button.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.cjs.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type MouseEvent, type ReactNode, type RefObject } from \"react\";\n\nimport { csx } from \"../../utils/string\";\nimport {\n  isUrlExternal,\n  handleInternalNavigation,\n} from \"../../utils/navigation\";\nimport \"./Button.css\";\n\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"translucent\";\n\nexport const ButtonVariants: Record<ButtonVariant, ButtonVariant> = {\n  primary: \"primary\",\n  secondary: \"secondary\",\n  success: \"success\",\n  danger: \"danger\",\n  translucent: \"translucent\",\n};\n\nexport type ButtonSize = \"small\" | \"medium\" | \"large\" | \"xlarge\" | \"2xlarge\";\n\nexport const ButtonSizes: Record<ButtonSize, ButtonSize> = {\n  small: \"small\",\n  medium: \"medium\",\n  large: \"large\",\n  xlarge: \"xlarge\",\n  \"2xlarge\": \"2xlarge\",\n};\n\nexport interface ButtonProps {\n  /** The button's visual aesthetic\n   * - type {@link ButtonVariant}\n   */\n  variant?: ButtonVariant;\n\n  /** The size of the button\n   * - type {@link ButtonSize}\n   * @default \"medium\"\n   */\n  size?: ButtonSize;\n\n  /** Should the button be full width?\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /** The prefix to display within the button */\n  icon?: ReactNode;\n\n  /** Should the button be non-interactive? */\n  isDisabled?: boolean;\n\n  /** The URL that the button should link to. Turns the element into an `a` tag. If the URL is external, you should pass the entire URL to the `to` prop (e.g. `https://example.com`). */\n  to?: string;\n\n  /** The target attribute for the link. Defaults to `_blank` if the URL is external. */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\" | string;\n\n  /** Called when the button is pressed (on release, not keydown) */\n  onPress?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n\n  /** The type of button */\n  type?: \"button\" | \"submit\" | \"reset\";\n\n  /** The test ID for the button */\n  \"data-testid\"?: string;\n\n  /** The content to display within the button */\n  children?: ReactNode;\n}\n\n/**\n * A customizable button component that can render as either a button or anchor element.\n *\n * API:\n *  - {@link ButtonProps}\n */\nexport const Button = forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>(\n  (\n    {\n      variant = \"primary\",\n      size = \"medium\",\n      fullWidth = false,\n      icon,\n      to,\n      target,\n      onPress,\n      type = \"button\",\n      isDisabled,\n      \"data-testid\": testId,\n      children,\n    }: ButtonProps,\n    ref\n  ) => {\n    const isExternal = to && isUrlExternal(to);\n\n    const commonProps = {\n      className: csx(\n        \"proton-Button\",\n        `proton-Button--${variant}`,\n        fullWidth && \"proton-Button--fullWidth\",\n        isDisabled && \"proton-Button--disabled\",\n        size && `proton-Button--${size}`\n      ),\n      \"data-testid\": testId,\n      ...(to && { \"aria-disabled\": isDisabled }),\n      ...(isDisabled && { tabIndex: -1 }),\n    };\n\n    const content = (\n      <>\n        {icon && (\n          <div\n            className={csx(\n              \"proton-Button__icon-decorator\",\n              fullWidth && \"proton-Button__icon-decorator--fullWidth\"\n            )}\n          >\n            {icon}\n          </div>\n        )}\n        {children && <div className=\"proton-Button__text\">{children}</div>}\n      </>\n    );\n\n    if (to) {\n      return (\n        <a\n          {...commonProps}\n          href={to}\n          target={target || (isExternal ? \"_blank\" : undefined)}\n          rel={\n            isExternal || target === \"_blank\"\n              ? \"noopener noreferrer\"\n              : undefined\n          }\n          ref={ref as RefObject<HTMLAnchorElement>}\n          onClick={(e) => {\n            if (isDisabled) {\n              e.preventDefault();\n              return;\n            }\n\n            if (!isExternal && !target) {\n              handleInternalNavigation(e, to);\n            }\n\n            onPress?.(e);\n          }}\n          role=\"button\"\n        >\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...commonProps}\n        type={type}\n        disabled={isDisabled}\n        ref={ref as RefObject<HTMLButtonElement>}\n        onClick={(e) => {\n          if (!isDisabled && onPress) {\n            onPress(e);\n          }\n        }}\n      >\n        {content}\n      </button>\n    );\n  }\n);\n\nButton.displayName = \"ProtonUIButton\";\n"],"names":["ButtonVariants","ButtonSizes","Button","forwardRef","variant","size","fullWidth","icon","to","target","onPress","type","isDisabled","testId","children","ref","isExternal","isUrlExternal","commonProps","csx","content","jsxs","Fragment","jsx","e","handleInternalNavigation"],"mappings":"mRAkBO,MAAMA,EAAuD,CAClE,QAAS,UACT,UAAW,YACX,QAAS,UACT,OAAQ,SACR,YAAa,aACf,EAIaC,EAA8C,CACzD,MAAO,QACP,OAAQ,SACR,MAAO,QACP,OAAQ,SACR,UAAW,SACb,EAkDaC,EAASC,EAAAA,WAIpB,CACE,CACE,QAAAC,EAAU,UACV,KAAAC,EAAO,SACP,UAAAC,EAAY,GACZ,KAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,KAAAC,EAAO,SACP,WAAAC,EACA,cAAeC,EACf,SAAAC,CAAA,EAEFC,IACG,CACH,MAAMC,EAAaR,GAAMS,EAAAA,cAAcT,CAAE,EAEnCU,EAAc,CAClB,UAAWC,EAAAA,IACT,gBACA,kBAAkBf,CAAO,GACzBE,GAAa,2BACbM,GAAc,0BACdP,GAAQ,kBAAkBA,CAAI,EAAA,EAEhC,cAAeQ,EACf,GAAIL,GAAM,CAAE,gBAAiBI,CAAA,EAC7B,GAAIA,GAAc,CAAE,SAAU,EAAA,CAAG,EAG7BQ,EACJC,EAAAA,kBAAAA,KAAAC,EAAAA,kBAAAA,SAAA,CACG,SAAA,CAAAf,GACCgB,EAAAA,kBAAAA,IAAC,MAAA,CACC,UAAWJ,EAAAA,IACT,gCACAb,GAAa,0CAAA,EAGd,SAAAC,CAAA,CAAA,EAGJO,GAAYS,EAAAA,kBAAAA,IAAC,MAAA,CAAI,UAAU,sBAAuB,SAAAT,CAAA,CAAS,CAAA,EAC9D,EAGF,OAAIN,EAEAe,EAAAA,kBAAAA,IAAC,IAAA,CACE,GAAGL,EACJ,KAAMV,EACN,OAAQC,IAAWO,EAAa,SAAW,QAC3C,IACEA,GAAcP,IAAW,SACrB,sBACA,OAEN,IAAAM,EACA,QAAUS,GAAM,CACd,GAAIZ,EAAY,CACdY,EAAE,eAAA,EACF,MACF,CAEI,CAACR,GAAc,CAACP,GAClBgB,EAAAA,yBAAyBD,EAAGhB,CAAE,EAGhCE,GAAA,MAAAA,EAAUc,EACZ,EACA,KAAK,SAEJ,SAAAJ,CAAA,CAAA,EAMLG,EAAAA,kBAAAA,IAAC,SAAA,CACE,GAAGL,EACJ,KAAAP,EACA,SAAUC,EACV,IAAAG,EACA,QAAUS,GAAM,CACV,CAACZ,GAAcF,GACjBA,EAAQc,CAAC,CAEb,EAEC,SAAAJ,CAAA,CAAA,CAGP,CACF,EAEAlB,EAAO,YAAc"}
+{"version":3,"file":"Button.cjs.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type MouseEvent, type ReactNode, type RefObject } from \"react\";\n\nimport { csx } from \"../../utils/string\";\nimport {\n  isUrlExternal,\n  handleInternalNavigation,\n} from \"../../utils/navigation\";\nimport \"./Button.css\";\n\nexport type ButtonVariant =\n  | \"primary\"\n  | \"secondary\"\n  | \"success\"\n  | \"danger\"\n  | \"translucent\";\n\nexport const ButtonVariants: Record<ButtonVariant, ButtonVariant> = {\n  primary: \"primary\",\n  secondary: \"secondary\",\n  success: \"success\",\n  danger: \"danger\",\n  translucent: \"translucent\",\n};\n\nexport type ButtonSize = \"small\" | \"medium\" | \"large\" | \"xlarge\" | \"2xlarge\";\n\nexport const ButtonSizes: Record<ButtonSize, ButtonSize> = {\n  small: \"small\",\n  medium: \"medium\",\n  large: \"large\",\n  xlarge: \"xlarge\",\n  \"2xlarge\": \"2xlarge\",\n};\n\nexport interface ButtonProps {\n  /** The button's visual aesthetic\n   * - type {@link ButtonVariant}\n   */\n  variant?: ButtonVariant;\n\n  /** The size of the button\n   * - type {@link ButtonSize}\n   * @default \"medium\"\n   */\n  size?: ButtonSize;\n\n  /** Should the button be full width?\n   * @default false\n   */\n  fullWidth?: boolean;\n\n  /** The prefix to display within the button */\n  icon?: ReactNode;\n\n  /** Should the button be non-interactive? */\n  isDisabled?: boolean;\n\n  /** The URL that the button should link to. Turns the element into an `a` tag. If the URL is external, you should pass the entire URL to the `to` prop (e.g. `https://example.com`). */\n  to?: string;\n\n  /** The target attribute for the link. Defaults to `_blank` if the URL is external. */\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\" | string;\n\n  /** Called when the button is pressed (on release, not keydown) */\n  onPress?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n\n  /** The type of button */\n  type?: \"button\" | \"submit\" | \"reset\";\n\n  /** The test ID for the button */\n  \"data-testid\"?: string;\n\n  /** The content to display within the button */\n  children?: ReactNode;\n}\n\n/**\n * A customizable button component that can render as either a button or anchor element.\n *\n * API:\n *  - {@link ButtonProps}\n */\nexport const Button = forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>(\n  (\n    {\n      variant = \"primary\",\n      size = \"medium\",\n      fullWidth = false,\n      icon,\n      to,\n      target,\n      onPress,\n      type = \"button\",\n      isDisabled,\n      \"data-testid\": testId,\n      children,\n    }: ButtonProps,\n    ref\n  ) => {\n    const isExternal = to && isUrlExternal(to);\n\n    const commonProps = {\n      className: csx(\n        \"proton-Button\",\n        `proton-Button--${variant}`,\n        fullWidth && \"proton-Button--fullWidth\",\n        isDisabled && \"proton-Button--disabled\",\n        size && `proton-Button--${size}`\n      ),\n      \"data-testid\": testId,\n      ...(to && { \"aria-disabled\": isDisabled }),\n      ...(isDisabled && { tabIndex: -1 }),\n    };\n\n    const content = (\n      <>\n        {icon && (\n          <div\n            className={csx(\n              \"proton-Button__icon-decorator\",\n              fullWidth && \"proton-Button__icon-decorator--fullWidth\"\n            )}\n          >\n            {icon}\n          </div>\n        )}\n        {children && <div className=\"proton-Button__text\">{children}</div>}\n      </>\n    );\n\n    if (to) {\n      return (\n        <a\n          {...commonProps}\n          href={to}\n          target={target || (isExternal ? \"_blank\" : undefined)}\n          rel={\n            isExternal || target === \"_blank\"\n              ? \"noopener noreferrer\"\n              : undefined\n          }\n          ref={ref as RefObject<HTMLAnchorElement>}\n          onClick={(e) => {\n            if (isDisabled) {\n              e.preventDefault();\n              return;\n            }\n\n            if (!isExternal && !target) {\n              handleInternalNavigation(e, to);\n            }\n\n            onPress?.(e);\n          }}\n          role=\"button\"\n        >\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        {...commonProps}\n        type={type}\n        disabled={isDisabled}\n        ref={ref as RefObject<HTMLButtonElement>}\n        onClick={(e) => {\n          if (!isDisabled && onPress) {\n            onPress(e);\n          }\n        }}\n      >\n        {content}\n      </button>\n    );\n  }\n);\n\nButton.displayName = \"ProtonUIButton\";\n"],"names":["ButtonVariants","ButtonSizes","Button","forwardRef","variant","size","fullWidth","icon","to","target","onPress","type","isDisabled","testId","children","ref","isExternal","isUrlExternal","commonProps","csx","content","jsxs","Fragment","jsx","handleInternalNavigation"],"mappings":"yPAkBO,MAAMA,EAAuD,CAClE,QAAS,UACT,UAAW,YACX,QAAS,UACT,OAAQ,SACR,YAAa,aACf,EAIaC,EAA8C,CACzD,MAAO,QACP,OAAQ,SACR,MAAO,QACP,OAAQ,SACR,UAAW,SACb,EAkDaC,EAASC,EAAAA,WAIpB,CACE,CACE,QAAAC,EAAU,UACV,KAAAC,EAAO,SACP,UAAAC,EAAY,GACZ,KAAAC,EACA,GAAAC,EACA,OAAAC,EACA,QAAAC,EACA,KAAAC,EAAO,SACP,WAAAC,EACA,cAAeC,EACf,SAAAC,CAAA,EAEFC,IACG,CACH,MAAMC,EAAaR,GAAMS,EAAAA,cAAcT,CAAE,EAEnCU,EAAc,CAClB,UAAWC,EAAAA,IACT,gBACA,kBAAkBf,CAAO,GACzBE,GAAa,2BACbM,GAAc,0BACdP,GAAQ,kBAAkBA,CAAI,EAAA,EAEhC,cAAeQ,EACf,GAAIL,GAAM,CAAE,gBAAiBI,CAAA,EAC7B,GAAIA,GAAc,CAAE,SAAU,EAAA,CAAG,EAG7BQ,EACJC,EAAAA,KAAAC,EAAAA,SAAA,CACG,SAAA,CAAAf,GACCgB,EAAAA,IAAC,MAAA,CACC,UAAWJ,EAAAA,IACT,gCACAb,GAAa,0CAAA,EAGd,SAAAC,CAAA,CAAA,EAGJO,GAAYS,EAAAA,IAAC,MAAA,CAAI,UAAU,sBAAuB,SAAAT,CAAA,CAAS,CAAA,EAC9D,EAGF,OAAIN,EAEAe,EAAAA,IAAC,IAAA,CACE,GAAGL,EACJ,KAAMV,EACN,OAAQC,IAAWO,EAAa,SAAW,QAC3C,IACEA,GAAcP,IAAW,SACrB,sBACA,OAEN,IAAAM,EACA,QAAU,GAAM,CACd,GAAIH,EAAY,CACd,EAAE,eAAA,EACF,MACF,CAEI,CAACI,GAAc,CAACP,GAClBe,EAAAA,yBAAyB,EAAGhB,CAAE,EAGhCE,GAAA,MAAAA,EAAU,EACZ,EACA,KAAK,SAEJ,SAAAU,CAAA,CAAA,EAMLG,EAAAA,IAAC,SAAA,CACE,GAAGL,EACJ,KAAAP,EACA,SAAUC,EACV,IAAAG,EACA,QAAU,GAAM,CACV,CAACH,GAAcF,GACjBA,EAAQ,CAAC,CAEb,EAEC,SAAAU,CAAA,CAAA,CAGP,CACF,EAEAlB,EAAO,YAAc"}