@protonradio/proton-ui 0.11.12 → 0.11.13-beta.1

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\";\n\nimport \"./Banner.css\";\n\n//TODO: move svgs to lib and use Icon component\nexport const BANNER_ICONS = {\n  success: (\n    <svg viewBox=\"0 0 20 20\" height=\"18\" width=\"18\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\n      ></path>\n    </svg>\n  ),\n  warning: (\n    <svg viewBox=\"0 0 56 56\" height=\"17\" width=\"17\">\n      <path d=\"M9.59 50.207h36.82c3.516 0 5.719-2.531 5.719-5.719a5.56 5.56 0 0 0-.75-2.812l-18.445-33c-1.055-1.899-2.977-2.883-4.922-2.883c-1.922 0-3.89.984-4.946 2.883L4.645 41.699c-.516.89-.774 1.828-.774 2.79c0 3.187 2.227 5.718 5.719 5.718m18.422-16.055c-1.242 0-1.922-.703-1.969-1.968l-.328-11.578c-.047-1.266.937-2.204 2.273-2.204c1.313 0 2.344.961 2.297 2.227l-.351 11.555c-.047 1.289-.727 1.968-1.922 1.968m0 8.649c-1.36 0-2.625-1.078-2.625-2.532s1.242-2.53 2.625-2.53s2.625 1.054 2.625 2.53c0 1.477-1.266 2.532-2.625 2.532\" />\n    </svg>\n  ),\n  danger: (\n    <svg viewBox=\"0 0 20 20\" height=\"18\" width=\"18\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\"\n      ></path>\n    </svg>\n  ),\n};\n\nexport const BANNER_VARIANTS = {\n  default: \"default\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"danger\",\n} as const;\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 to display within the banner.\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 to display within 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 = \"Banner\";\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 = \"Banner.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 = \"Banner.Content\";\n\nfunction getIconContent(icon: ReactNode, variant: BannerVariant) {\n  if (isValidElement(icon)) return icon;\n  if (icon) return BANNER_ICONS[variant];\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 = \"Banner.Icon\";\n\nconst BannerAction = ({ children, ...buttonProps }: ButtonProps) => {\n  return <Button {...buttonProps}>{children}</Button>;\n};\n\nBannerAction.displayName = \"Banner.Action\";\n\nconst BannerActions = ({ children }: { children: ReactNode }) => {\n  return <div className=\"proton-Banner__actions\">{children}</div>;\n};\n\nBannerActions.displayName = \"Banner.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_ICONS","jsx","BANNER_VARIANTS","BannerContext","createContext","Banner","variant","rounded","icon","compact","children","dataTestId","csx","jsxs","BannerTitle","useContext","BannerContent","getIconContent","isValidElement","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\";\r\n\r\nimport { ReactNode, createContext, isValidElement, useContext } from \"react\";\r\nimport { csx } from \"../../utils\";\r\nimport { Button, type ButtonProps } from \"../Button/Button\";\r\n\r\nimport \"./Banner.css\";\r\n\r\n//TODO: move svgs to lib and use Icon component\r\nexport const BANNER_ICONS = {\r\n  success: (\r\n    <svg viewBox=\"0 0 20 20\" height=\"18\" width=\"18\">\r\n      <path\r\n        fillRule=\"evenodd\"\r\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\r\n      ></path>\r\n    </svg>\r\n  ),\r\n  warning: (\r\n    <svg viewBox=\"0 0 56 56\" height=\"17\" width=\"17\">\r\n      <path d=\"M9.59 50.207h36.82c3.516 0 5.719-2.531 5.719-5.719a5.56 5.56 0 0 0-.75-2.812l-18.445-33c-1.055-1.899-2.977-2.883-4.922-2.883c-1.922 0-3.89.984-4.946 2.883L4.645 41.699c-.516.89-.774 1.828-.774 2.79c0 3.187 2.227 5.718 5.719 5.718m18.422-16.055c-1.242 0-1.922-.703-1.969-1.968l-.328-11.578c-.047-1.266.937-2.204 2.273-2.204c1.313 0 2.344.961 2.297 2.227l-.351 11.555c-.047 1.289-.727 1.968-1.922 1.968m0 8.649c-1.36 0-2.625-1.078-2.625-2.532s1.242-2.53 2.625-2.53s2.625 1.054 2.625 2.53c0 1.477-1.266 2.532-2.625 2.532\" />\r\n    </svg>\r\n  ),\r\n  danger: (\r\n    <svg viewBox=\"0 0 20 20\" height=\"18\" width=\"18\">\r\n      <path\r\n        fillRule=\"evenodd\"\r\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\"\r\n      ></path>\r\n    </svg>\r\n  ),\r\n};\r\n\r\nexport const BANNER_VARIANTS = {\r\n  default: \"default\",\r\n  success: \"success\",\r\n  warning: \"warning\",\r\n  danger: \"danger\",\r\n} as const;\r\nexport type BannerVariant = \"default\" | \"success\" | \"warning\" | \"danger\";\r\n\r\nconst BannerContext = createContext<BannerVariant | undefined>(undefined);\r\n\r\ninterface BannerIconProps {\r\n  /**\r\n   * Optional custom icon or children for the icon area.\r\n   */\r\n  children?: ReactNode;\r\n  /**\r\n   * The icon to display in the banner.\r\n   * Can be a boolean to conditionally show or hide, or a ReactNode to provide a custom icon.\r\n   */\r\n  icon?: boolean | ReactNode;\r\n  /**\r\n   * The data-testid to display within the banner.\r\n   */\r\n  \"data-testid\"?: string;\r\n}\r\n\r\ninterface BannerProps extends BannerIconProps {\r\n  /**\r\n   * Compact padding around the content of the banner.\r\n   * @default true\r\n   */\r\n  compact?: boolean;\r\n  /**\r\n   * The content to display within the banner.\r\n   */\r\n  children: ReactNode;\r\n  /**\r\n   * The data-testid to display within the banner.\r\n   */\r\n  \"data-testid\"?: string;\r\n  /**\r\n   * Round the corners of the banner.\r\n   * @default true\r\n   */\r\n  rounded?: boolean;\r\n  /**\r\n   * The banner's visual aesthetic.\r\n   * - type {@link BannerVariant}\r\n   */\r\n  variant?: BannerVariant;\r\n}\r\n\r\n/**\r\n * A banner used to display a success, warning, or error message.\r\n *\r\n * API:\r\n *  - {@link BannerProps}\r\n *  - extends {@link BannerIconProps}\r\n */\r\nconst Banner = ({\r\n  variant = \"default\",\r\n  rounded = true,\r\n  icon = false,\r\n  compact = true,\r\n  children,\r\n  \"data-testid\": dataTestId,\r\n}: BannerProps) => {\r\n  return (\r\n    <BannerContext.Provider value={variant}>\r\n      <div\r\n        role=\"status\"\r\n        aria-live=\"polite\"\r\n        className={csx(\r\n          \"proton-Banner\",\r\n          `proton-Banner--${variant}`,\r\n          rounded && \"proton-Banner--rounded\"\r\n        )}\r\n        data-testid={dataTestId}\r\n      >\r\n        <div\r\n          className={csx(\r\n            \"proton-Banner__wrapper\",\r\n            compact && \"proton-Banner__wrapper--compact\"\r\n          )}\r\n        >\r\n          <Banner.Icon icon={icon} />\r\n          <div className=\"proton-Banner__content-wrapper\">\r\n            <div className=\"proton-Banner__container\">{children}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </BannerContext.Provider>\r\n  );\r\n};\r\n\r\nBanner.displayName = \"Banner\";\r\n\r\nconst BannerTitle = ({\r\n  children,\r\n  \"data-testid\": dataTestId,\r\n}: {\r\n  children: ReactNode;\r\n  \"data-testid\"?: string;\r\n}) => {\r\n  const variant = useContext(BannerContext);\r\n  if (!variant) throw new Error(\"BannerTitle must be used within a Banner\");\r\n\r\n  return (\r\n    <h3\r\n      className={csx(\r\n        \"proton-Banner__title\",\r\n        `proton-Banner--${variant}__title`\r\n      )}\r\n      data-testid={dataTestId}\r\n    >\r\n      {children}\r\n    </h3>\r\n  );\r\n};\r\n\r\nBannerTitle.displayName = \"Banner.Title\";\r\n\r\nconst BannerContent = ({\r\n  children,\r\n  \"data-testid\": dataTestId,\r\n}: {\r\n  children: ReactNode;\r\n  \"data-testid\"?: string;\r\n}) => {\r\n  const variant = useContext(BannerContext);\r\n  if (!variant) throw new Error(\"BannerContent must be used within a Banner\");\r\n\r\n  return (\r\n    <p\r\n      className={csx(\r\n        \"proton-Banner__content\",\r\n        `proton-Banner--${variant}__content`\r\n      )}\r\n      data-testid={dataTestId}\r\n    >\r\n      {children}\r\n    </p>\r\n  );\r\n};\r\n\r\nBannerContent.displayName = \"Banner.Content\";\r\n\r\nfunction getIconContent(icon: ReactNode, variant: BannerVariant) {\r\n  if (isValidElement(icon)) return icon;\r\n  if (icon) return BANNER_ICONS[variant];\r\n  return null;\r\n}\r\n\r\nconst BannerIcon = ({ icon, \"data-testid\": dataTestId }: BannerIconProps) => {\r\n  const variant = useContext(BannerContext);\r\n  if (!variant) throw new Error(\"BannerIcon must be used within a Banner\");\r\n\r\n  const iconContent = getIconContent(icon, variant);\r\n  if (!iconContent) return null;\r\n\r\n  return (\r\n    <div\r\n      aria-hidden=\"true\"\r\n      data-testid={dataTestId}\r\n      className={csx(\"proton-Banner__icon\", `proton-Banner--${variant}__icon`)}\r\n    >\r\n      {iconContent}\r\n    </div>\r\n  );\r\n};\r\n\r\nBannerIcon.displayName = \"Banner.Icon\";\r\n\r\nconst BannerAction = ({ children, ...buttonProps }: ButtonProps) => {\r\n  return <Button {...buttonProps}>{children}</Button>;\r\n};\r\n\r\nBannerAction.displayName = \"Banner.Action\";\r\n\r\nconst BannerActions = ({ children }: { children: ReactNode }) => {\r\n  return <div className=\"proton-Banner__actions\">{children}</div>;\r\n};\r\n\r\nBannerActions.displayName = \"Banner.Actions\";\r\n\r\n/**\r\n * Renders an h3 styled banner.\r\n */\r\nBanner.Title = BannerTitle;\r\n\r\n/**\r\n * Renders a p styled banner.\r\n */\r\nBanner.Content = BannerContent;\r\n\r\n/**\r\n * Renders an icon inline with the banner title.\r\n *\r\n * API:\r\n *  - {@link BannerIconProps}\r\n */\r\nBanner.Icon = BannerIcon;\r\n\r\n/**\r\n * Renders a Proton Button.\r\n * - @prop buttonProps {@link ButtonProps}\r\n */\r\nBanner.Action = BannerAction;\r\n\r\n/**\r\n * Renders Proton Buttons in a responsive actions grid.\r\n */\r\nBanner.Actions = BannerActions;\r\n\r\nexport { Banner };\r\n"],"names":["BANNER_ICONS","jsx","BANNER_VARIANTS","BannerContext","createContext","Banner","variant","rounded","icon","compact","children","dataTestId","csx","jsxs","BannerTitle","useContext","BannerContent","getIconContent","isValidElement","BannerIcon","iconContent","BannerAction","buttonProps","Button","BannerActions"],"mappings":"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"}

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\";\n\nimport \"./Banner.css\";\n\n//TODO: move svgs to lib and use Icon component\nexport const BANNER_ICONS = {\n  success: (\n    <svg viewBox=\"0 0 20 20\" height=\"18\" width=\"18\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\n      ></path>\n    </svg>\n  ),\n  warning: (\n    <svg viewBox=\"0 0 56 56\" height=\"17\" width=\"17\">\n      <path d=\"M9.59 50.207h36.82c3.516 0 5.719-2.531 5.719-5.719a5.56 5.56 0 0 0-.75-2.812l-18.445-33c-1.055-1.899-2.977-2.883-4.922-2.883c-1.922 0-3.89.984-4.946 2.883L4.645 41.699c-.516.89-.774 1.828-.774 2.79c0 3.187 2.227 5.718 5.719 5.718m18.422-16.055c-1.242 0-1.922-.703-1.969-1.968l-.328-11.578c-.047-1.266.937-2.204 2.273-2.204c1.313 0 2.344.961 2.297 2.227l-.351 11.555c-.047 1.289-.727 1.968-1.922 1.968m0 8.649c-1.36 0-2.625-1.078-2.625-2.532s1.242-2.53 2.625-2.53s2.625 1.054 2.625 2.53c0 1.477-1.266 2.532-2.625 2.532\" />\n    </svg>\n  ),\n  danger: (\n    <svg viewBox=\"0 0 20 20\" height=\"18\" width=\"18\">\n      <path\n        fillRule=\"evenodd\"\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\"\n      ></path>\n    </svg>\n  ),\n};\n\nexport const BANNER_VARIANTS = {\n  default: \"default\",\n  success: \"success\",\n  warning: \"warning\",\n  danger: \"danger\",\n} as const;\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 to display within the banner.\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 to display within 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 = \"Banner\";\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 = \"Banner.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 = \"Banner.Content\";\n\nfunction getIconContent(icon: ReactNode, variant: BannerVariant) {\n  if (isValidElement(icon)) return icon;\n  if (icon) return BANNER_ICONS[variant];\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 = \"Banner.Icon\";\n\nconst BannerAction = ({ children, ...buttonProps }: ButtonProps) => {\n  return <Button {...buttonProps}>{children}</Button>;\n};\n\nBannerAction.displayName = \"Banner.Action\";\n\nconst BannerActions = ({ children }: { children: ReactNode }) => {\n  return <div className=\"proton-Banner__actions\">{children}</div>;\n};\n\nBannerActions.displayName = \"Banner.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_ICONS","jsx","BANNER_VARIANTS","BannerContext","createContext","Banner","variant","rounded","icon","compact","children","dataTestId","csx","jsxs","BannerTitle","useContext","BannerContent","getIconContent","isValidElement","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\";\r\n\r\nimport { ReactNode, createContext, isValidElement, useContext } from \"react\";\r\nimport { csx } from \"../../utils\";\r\nimport { Button, type ButtonProps } from \"../Button/Button\";\r\n\r\nimport \"./Banner.css\";\r\n\r\n//TODO: move svgs to lib and use Icon component\r\nexport const BANNER_ICONS = {\r\n  success: (\r\n    <svg viewBox=\"0 0 20 20\" height=\"18\" width=\"18\">\r\n      <path\r\n        fillRule=\"evenodd\"\r\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z\"\r\n      ></path>\r\n    </svg>\r\n  ),\r\n  warning: (\r\n    <svg viewBox=\"0 0 56 56\" height=\"17\" width=\"17\">\r\n      <path d=\"M9.59 50.207h36.82c3.516 0 5.719-2.531 5.719-5.719a5.56 5.56 0 0 0-.75-2.812l-18.445-33c-1.055-1.899-2.977-2.883-4.922-2.883c-1.922 0-3.89.984-4.946 2.883L4.645 41.699c-.516.89-.774 1.828-.774 2.79c0 3.187 2.227 5.718 5.719 5.718m18.422-16.055c-1.242 0-1.922-.703-1.969-1.968l-.328-11.578c-.047-1.266.937-2.204 2.273-2.204c1.313 0 2.344.961 2.297 2.227l-.351 11.555c-.047 1.289-.727 1.968-1.922 1.968m0 8.649c-1.36 0-2.625-1.078-2.625-2.532s1.242-2.53 2.625-2.53s2.625 1.054 2.625 2.53c0 1.477-1.266 2.532-2.625 2.532\" />\r\n    </svg>\r\n  ),\r\n  danger: (\r\n    <svg viewBox=\"0 0 20 20\" height=\"18\" width=\"18\">\r\n      <path\r\n        fillRule=\"evenodd\"\r\n        d=\"M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z\"\r\n      ></path>\r\n    </svg>\r\n  ),\r\n};\r\n\r\nexport const BANNER_VARIANTS = {\r\n  default: \"default\",\r\n  success: \"success\",\r\n  warning: \"warning\",\r\n  danger: \"danger\",\r\n} as const;\r\nexport type BannerVariant = \"default\" | \"success\" | \"warning\" | \"danger\";\r\n\r\nconst BannerContext = createContext<BannerVariant | undefined>(undefined);\r\n\r\ninterface BannerIconProps {\r\n  /**\r\n   * Optional custom icon or children for the icon area.\r\n   */\r\n  children?: ReactNode;\r\n  /**\r\n   * The icon to display in the banner.\r\n   * Can be a boolean to conditionally show or hide, or a ReactNode to provide a custom icon.\r\n   */\r\n  icon?: boolean | ReactNode;\r\n  /**\r\n   * The data-testid to display within the banner.\r\n   */\r\n  \"data-testid\"?: string;\r\n}\r\n\r\ninterface BannerProps extends BannerIconProps {\r\n  /**\r\n   * Compact padding around the content of the banner.\r\n   * @default true\r\n   */\r\n  compact?: boolean;\r\n  /**\r\n   * The content to display within the banner.\r\n   */\r\n  children: ReactNode;\r\n  /**\r\n   * The data-testid to display within the banner.\r\n   */\r\n  \"data-testid\"?: string;\r\n  /**\r\n   * Round the corners of the banner.\r\n   * @default true\r\n   */\r\n  rounded?: boolean;\r\n  /**\r\n   * The banner's visual aesthetic.\r\n   * - type {@link BannerVariant}\r\n   */\r\n  variant?: BannerVariant;\r\n}\r\n\r\n/**\r\n * A banner used to display a success, warning, or error message.\r\n *\r\n * API:\r\n *  - {@link BannerProps}\r\n *  - extends {@link BannerIconProps}\r\n */\r\nconst Banner = ({\r\n  variant = \"default\",\r\n  rounded = true,\r\n  icon = false,\r\n  compact = true,\r\n  children,\r\n  \"data-testid\": dataTestId,\r\n}: BannerProps) => {\r\n  return (\r\n    <BannerContext.Provider value={variant}>\r\n      <div\r\n        role=\"status\"\r\n        aria-live=\"polite\"\r\n        className={csx(\r\n          \"proton-Banner\",\r\n          `proton-Banner--${variant}`,\r\n          rounded && \"proton-Banner--rounded\"\r\n        )}\r\n        data-testid={dataTestId}\r\n      >\r\n        <div\r\n          className={csx(\r\n            \"proton-Banner__wrapper\",\r\n            compact && \"proton-Banner__wrapper--compact\"\r\n          )}\r\n        >\r\n          <Banner.Icon icon={icon} />\r\n          <div className=\"proton-Banner__content-wrapper\">\r\n            <div className=\"proton-Banner__container\">{children}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </BannerContext.Provider>\r\n  );\r\n};\r\n\r\nBanner.displayName = \"Banner\";\r\n\r\nconst BannerTitle = ({\r\n  children,\r\n  \"data-testid\": dataTestId,\r\n}: {\r\n  children: ReactNode;\r\n  \"data-testid\"?: string;\r\n}) => {\r\n  const variant = useContext(BannerContext);\r\n  if (!variant) throw new Error(\"BannerTitle must be used within a Banner\");\r\n\r\n  return (\r\n    <h3\r\n      className={csx(\r\n        \"proton-Banner__title\",\r\n        `proton-Banner--${variant}__title`\r\n      )}\r\n      data-testid={dataTestId}\r\n    >\r\n      {children}\r\n    </h3>\r\n  );\r\n};\r\n\r\nBannerTitle.displayName = \"Banner.Title\";\r\n\r\nconst BannerContent = ({\r\n  children,\r\n  \"data-testid\": dataTestId,\r\n}: {\r\n  children: ReactNode;\r\n  \"data-testid\"?: string;\r\n}) => {\r\n  const variant = useContext(BannerContext);\r\n  if (!variant) throw new Error(\"BannerContent must be used within a Banner\");\r\n\r\n  return (\r\n    <p\r\n      className={csx(\r\n        \"proton-Banner__content\",\r\n        `proton-Banner--${variant}__content`\r\n      )}\r\n      data-testid={dataTestId}\r\n    >\r\n      {children}\r\n    </p>\r\n  );\r\n};\r\n\r\nBannerContent.displayName = \"Banner.Content\";\r\n\r\nfunction getIconContent(icon: ReactNode, variant: BannerVariant) {\r\n  if (isValidElement(icon)) return icon;\r\n  if (icon) return BANNER_ICONS[variant];\r\n  return null;\r\n}\r\n\r\nconst BannerIcon = ({ icon, \"data-testid\": dataTestId }: BannerIconProps) => {\r\n  const variant = useContext(BannerContext);\r\n  if (!variant) throw new Error(\"BannerIcon must be used within a Banner\");\r\n\r\n  const iconContent = getIconContent(icon, variant);\r\n  if (!iconContent) return null;\r\n\r\n  return (\r\n    <div\r\n      aria-hidden=\"true\"\r\n      data-testid={dataTestId}\r\n      className={csx(\"proton-Banner__icon\", `proton-Banner--${variant}__icon`)}\r\n    >\r\n      {iconContent}\r\n    </div>\r\n  );\r\n};\r\n\r\nBannerIcon.displayName = \"Banner.Icon\";\r\n\r\nconst BannerAction = ({ children, ...buttonProps }: ButtonProps) => {\r\n  return <Button {...buttonProps}>{children}</Button>;\r\n};\r\n\r\nBannerAction.displayName = \"Banner.Action\";\r\n\r\nconst BannerActions = ({ children }: { children: ReactNode }) => {\r\n  return <div className=\"proton-Banner__actions\">{children}</div>;\r\n};\r\n\r\nBannerActions.displayName = \"Banner.Actions\";\r\n\r\n/**\r\n * Renders an h3 styled banner.\r\n */\r\nBanner.Title = BannerTitle;\r\n\r\n/**\r\n * Renders a p styled banner.\r\n */\r\nBanner.Content = BannerContent;\r\n\r\n/**\r\n * Renders an icon inline with the banner title.\r\n *\r\n * API:\r\n *  - {@link BannerIconProps}\r\n */\r\nBanner.Icon = BannerIcon;\r\n\r\n/**\r\n * Renders a Proton Button.\r\n * - @prop buttonProps {@link ButtonProps}\r\n */\r\nBanner.Action = BannerAction;\r\n\r\n/**\r\n * Renders Proton Buttons in a responsive actions grid.\r\n */\r\nBanner.Actions = BannerActions;\r\n\r\nexport { Banner };\r\n"],"names":["BANNER_ICONS","jsx","BANNER_VARIANTS","BannerContext","createContext","Banner","variant","rounded","icon","compact","children","dataTestId","csx","jsxs","BannerTitle","useContext","BannerContent","getIconContent","isValidElement","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 e=require("../../node_modules/react/jsx-runtime.cjs.js"),i=require("react"),f=require("../../utils/string.cjs.js"),g=require("../../utils/navigation.cjs.js");;/* empty css                */const b={primary:"primary",secondary:"secondary",success:"success",danger:"danger",translucent:"translucent"},v={small:"small",medium:"medium",large:"large",xlarge:"xlarge","2xlarge":"2xlarge"},j=i.forwardRef(({variant:R="primary",size:c="medium",fullWidth:l=!1,icon:d,to:n,target:u,onPress:o,type:y="button",isDisabled:r,"data-testid":E,children:x},t)=>{const s=n&&g.isUrlExternal(n),m=i.useRef(null);i.useLayoutEffect(()=>{typeof t=="function"?t(m.current):t&&(t.current=m.current)},[t]);const p={className:f.csx("proton-Button",`proton-Button--${R}`,l&&"proton-Button--fullWidth",r&&"proton-Button--disabled",c&&`proton-Button--${c}`),"data-testid":E,...n&&{"aria-disabled":r},...r&&{tabIndex:-1}},B=e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[d&&e.jsxRuntimeExports.jsx("div",{className:f.csx("proton-Button__icon-decorator",l&&"proton-Button__icon-decorator--fullWidth"),children:d}),x&&e.jsxRuntimeExports.jsx("div",{className:"proton-Button__text",children:x})]});return n?e.jsxRuntimeExports.jsx("a",{...p,href:n,target:u||(s?"_blank":void 0),rel:s||u==="_blank"?"noopener noreferrer":void 0,ref:t,onClick:a=>{if(r){a.preventDefault();return}!s&&!u&&g.handleInternalNavigation(a,n),o==null||o(a)},role:"button",children:B}):e.jsxRuntimeExports.jsx("button",{...p,type:y,disabled:r,ref:t,onClick:a=>{!r&&o&&o(a)},children:B})});j.displayName="ProtonUIButton";exports.Button=j;exports.ButtonSizes=v;exports.ButtonVariants=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../node_modules/react/jsx-runtime.cjs.js"),i=require("react"),f=require("../../utils/string.cjs.js"),g=require("../../utils/navigation.cjs.js");;/* empty css                */const v={primary:"primary",secondary:"secondary",success:"success",danger:"danger",translucent:"translucent"},_={small:"small",medium:"medium",large:"large",xlarge:"xlarge","2xlarge":"2xlarge"},j=i.forwardRef(({variant:y="primary",size:c="medium",fullWidth:l=!1,icon:d,to:n,target:u,onPress:o,type:R="button",isDisabled:r,"data-testid":E,children:x},t)=>{const s=n&&g.isUrlExternal(n),m=i.useRef(null);i.useLayoutEffect(()=>{typeof t=="function"?t(m.current):t&&(t.current=m.current)},[t]);const p={className:f.csx("proton-Button",`proton-Button--${y}`,l&&"proton-Button--fullWidth",r&&"proton-Button--disabled",c&&`proton-Button--${c}`),"data-testid":E,...n&&{"aria-disabled":r},...r&&{tabIndex:-1}},B=e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[d&&e.jsxRuntimeExports.jsx("div",{className:f.csx("proton-Button__icon-decorator",l&&"proton-Button__icon-decorator--fullWidth"),children:d}),x&&e.jsxRuntimeExports.jsx("div",{className:"proton-Button__text",children:x})]});return n?e.jsxRuntimeExports.jsx("a",{...p,href:n,target:u||(s?"_blank":void 0),rel:s||u==="_blank"?"noopener noreferrer":void 0,ref:t,onClick:a=>{if(r){a.preventDefault();return}!s&&!u&&g.handleInternalNavigation(a,n),o==null||o(a)},role:"button",children:B}):e.jsxRuntimeExports.jsx("button",{...p,type:R,disabled:r,ref:t,onClick:a=>{!r&&o&&o(a)},children:B})});j.displayName="ProtonUIButton";exports.Button=j;exports.ButtonSizes=_;exports.ButtonVariants=v;
 //# 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 {\n  forwardRef,\n  MouseEvent,\n  useLayoutEffect,\n  useRef,\n} 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?: React.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?: React.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    const buttonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n    useLayoutEffect(() => {\n      if (typeof ref === \"function\") {\n        ref(buttonRef.current);\n      } else if (ref) {\n        ref.current = buttonRef.current;\n      }\n    }, [ref]);\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 React.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 React.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","buttonRef","useRef","useLayoutEffect","commonProps","csx","content","jsxs","Fragment","jsx","e","handleInternalNavigation"],"mappings":"mRAuBO,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,EAAA,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,GAEFC,IACG,CACG,MAAAC,EAAaR,GAAMS,EAAA,cAAcT,CAAE,EACnCU,EAAYC,SAA8C,IAAI,EAEpEC,EAAAA,gBAAgB,IAAM,CAChB,OAAOL,GAAQ,WACjBA,EAAIG,EAAU,OAAO,EACZH,IACTA,EAAI,QAAUG,EAAU,QAC1B,EACC,CAACH,CAAG,CAAC,EAER,MAAMM,EAAc,CAClB,UAAWC,EAAA,IACT,gBACA,kBAAkBlB,CAAO,GACzBE,GAAa,2BACbM,GAAc,0BACdP,GAAQ,kBAAkBA,CAAI,EAChC,EACA,cAAeQ,EACf,GAAIL,GAAM,CAAE,gBAAiBI,CAAW,EACxC,GAAIA,GAAc,CAAE,SAAU,EAAG,CAAA,EAG7BW,EAEDC,EAAAA,kBAAAA,KAAAC,EAAA,kBAAA,SAAA,CAAA,SAAA,CACClB,GAAAmB,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWJ,EAAA,IACT,gCACAhB,GAAa,0CACf,EAEC,SAAAC,CAAA,CACH,EAEDO,GAAYY,EAAA,kBAAA,IAAC,MAAI,CAAA,UAAU,sBAAuB,SAAAZ,EAAS,CAC9D,CAAA,CAAA,EAGF,OAAIN,EAEAkB,EAAA,kBAAA,IAAC,IAAA,CACE,GAAGL,EACJ,KAAMb,EACN,OAAQC,IAAWO,EAAa,SAAW,QAC3C,IACEA,GAAcP,IAAW,SACrB,sBACA,OAEN,IAAAM,EACA,QAAUY,GAAM,CACd,GAAIf,EAAY,CACde,EAAE,eAAe,EACjB,MACF,CAEI,CAACX,GAAc,CAACP,GAClBmB,2BAAyBD,EAAGnB,CAAE,EAGhCE,GAAA,MAAAA,EAAUiB,EACZ,EACA,KAAK,SAEJ,SAAAJ,CAAA,CAAA,EAMLG,EAAA,kBAAA,IAAC,SAAA,CACE,GAAGL,EACJ,KAAAV,EACA,SAAUC,EACV,IAAAG,EACA,QAAUY,GAAM,CACV,CAACf,GAAcF,GACjBA,EAAQiB,CAAC,CAEb,EAEC,SAAAJ,CAAA,CAAA,CAGP,CACF,EAEArB,EAAO,YAAc"}
+{"version":3,"file":"Button.cjs.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n  forwardRef,\r\n  MouseEvent,\r\n  useLayoutEffect,\r\n  useRef,\r\n} from \"react\";\r\n\r\nimport { csx } from \"../../utils/string\";\r\nimport {\r\n  isUrlExternal,\r\n  handleInternalNavigation,\r\n} from \"../../utils/navigation\";\r\nimport \"./Button.css\";\r\n\r\nexport type ButtonVariant =\r\n  | \"primary\"\r\n  | \"secondary\"\r\n  | \"success\"\r\n  | \"danger\"\r\n  | \"translucent\";\r\n\r\nexport const ButtonVariants: Record<ButtonVariant, ButtonVariant> = {\r\n  primary: \"primary\",\r\n  secondary: \"secondary\",\r\n  success: \"success\",\r\n  danger: \"danger\",\r\n  translucent: \"translucent\",\r\n};\r\n\r\nexport type ButtonSize = \"small\" | \"medium\" | \"large\" | \"xlarge\" | \"2xlarge\";\r\n\r\nexport const ButtonSizes: Record<ButtonSize, ButtonSize> = {\r\n  small: \"small\",\r\n  medium: \"medium\",\r\n  large: \"large\",\r\n  xlarge: \"xlarge\",\r\n  \"2xlarge\": \"2xlarge\",\r\n};\r\n\r\nexport interface ButtonProps {\r\n  /** The button's visual aesthetic\r\n   * - type {@link ButtonVariant}\r\n   */\r\n  variant?: ButtonVariant;\r\n\r\n  /** The size of the button\r\n   * - type {@link ButtonSize}\r\n   * @default \"medium\"\r\n   */\r\n  size?: ButtonSize;\r\n\r\n  /** Should the button be full width?\r\n   * @default false\r\n   */\r\n  fullWidth?: boolean;\r\n\r\n  /** The prefix to display within the button */\r\n  icon?: React.ReactNode;\r\n\r\n  /** Should the button be non-interactive? */\r\n  isDisabled?: boolean;\r\n\r\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`). */\r\n  to?: string;\r\n\r\n  /** The target attribute for the link. Defaults to `_blank` if the URL is external. */\r\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\" | string;\r\n\r\n  /** Called when the button is pressed (on release, not keydown) */\r\n  onPress?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\r\n\r\n  /** The type of button */\r\n  type?: \"button\" | \"submit\" | \"reset\";\r\n\r\n  /** The test ID for the button */\r\n  \"data-testid\"?: string;\r\n\r\n  /** The content to display within the button */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * A customizable button component that can render as either a button or anchor element.\r\n *\r\n * API:\r\n *  - {@link ButtonProps}\r\n */\r\nexport const Button = forwardRef<\r\n  HTMLButtonElement | HTMLAnchorElement,\r\n  ButtonProps\r\n>(\r\n  (\r\n    {\r\n      variant = \"primary\",\r\n      size = \"medium\",\r\n      fullWidth = false,\r\n      icon,\r\n      to,\r\n      target,\r\n      onPress,\r\n      type = \"button\",\r\n      isDisabled,\r\n      \"data-testid\": testId,\r\n      children,\r\n    }: ButtonProps,\r\n    ref\r\n  ) => {\r\n    const isExternal = to && isUrlExternal(to);\r\n    const buttonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\r\n\r\n    useLayoutEffect(() => {\r\n      if (typeof ref === \"function\") {\r\n        ref(buttonRef.current);\r\n      } else if (ref) {\r\n        ref.current = buttonRef.current;\r\n      }\r\n    }, [ref]);\r\n\r\n    const commonProps = {\r\n      className: csx(\r\n        \"proton-Button\",\r\n        `proton-Button--${variant}`,\r\n        fullWidth && \"proton-Button--fullWidth\",\r\n        isDisabled && \"proton-Button--disabled\",\r\n        size && `proton-Button--${size}`\r\n      ),\r\n      \"data-testid\": testId,\r\n      ...(to && { \"aria-disabled\": isDisabled }),\r\n      ...(isDisabled && { tabIndex: -1 }),\r\n    };\r\n\r\n    const content = (\r\n      <>\r\n        {icon && (\r\n          <div\r\n            className={csx(\r\n              \"proton-Button__icon-decorator\",\r\n              fullWidth && \"proton-Button__icon-decorator--fullWidth\"\r\n            )}\r\n          >\r\n            {icon}\r\n          </div>\r\n        )}\r\n        {children && <div className=\"proton-Button__text\">{children}</div>}\r\n      </>\r\n    );\r\n\r\n    if (to) {\r\n      return (\r\n        <a\r\n          {...commonProps}\r\n          href={to}\r\n          target={target || (isExternal ? \"_blank\" : undefined)}\r\n          rel={\r\n            isExternal || target === \"_blank\"\r\n              ? \"noopener noreferrer\"\r\n              : undefined\r\n          }\r\n          ref={ref as React.RefObject<HTMLAnchorElement>}\r\n          onClick={(e) => {\r\n            if (isDisabled) {\r\n              e.preventDefault();\r\n              return;\r\n            }\r\n\r\n            if (!isExternal && !target) {\r\n              handleInternalNavigation(e, to);\r\n            }\r\n\r\n            onPress?.(e);\r\n          }}\r\n          role=\"button\"\r\n        >\r\n          {content}\r\n        </a>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <button\r\n        {...commonProps}\r\n        type={type}\r\n        disabled={isDisabled}\r\n        ref={ref as React.RefObject<HTMLButtonElement>}\r\n        onClick={(e) => {\r\n          if (!isDisabled && onPress) {\r\n            onPress(e);\r\n          }\r\n        }}\r\n      >\r\n        {content}\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nButton.displayName = \"ProtonUIButton\";\r\n"],"names":["ButtonVariants","ButtonSizes","Button","forwardRef","variant","size","fullWidth","icon","to","target","onPress","type","isDisabled","testId","children","ref","isExternal","isUrlExternal","buttonRef","useRef","useLayoutEffect","commonProps","csx","content","jsxs","Fragment","jsx","e","handleInternalNavigation"],"mappings":"mRAuBO,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,EAAA,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,GAEFC,IACG,CACG,MAAAC,EAAaR,GAAMS,EAAA,cAAcT,CAAE,EACnCU,EAAYC,SAA8C,IAAI,EAEpEC,EAAAA,gBAAgB,IAAM,CAChB,OAAOL,GAAQ,WACjBA,EAAIG,EAAU,OAAO,EACZH,IACTA,EAAI,QAAUG,EAAU,QAC1B,EACC,CAACH,CAAG,CAAC,EAER,MAAMM,EAAc,CAClB,UAAWC,EAAA,IACT,gBACA,kBAAkBlB,CAAO,GACzBE,GAAa,2BACbM,GAAc,0BACdP,GAAQ,kBAAkBA,CAAI,EAChC,EACA,cAAeQ,EACf,GAAIL,GAAM,CAAE,gBAAiBI,CAAW,EACxC,GAAIA,GAAc,CAAE,SAAU,EAAG,CAAA,EAG7BW,EAEDC,EAAAA,kBAAAA,KAAAC,EAAA,kBAAA,SAAA,CAAA,SAAA,CACClB,GAAAmB,EAAA,kBAAA,IAAC,MAAA,CACC,UAAWJ,EAAA,IACT,gCACAhB,GAAa,0CACf,EAEC,SAAAC,CAAA,CACH,EAEDO,GAAYY,EAAA,kBAAA,IAAC,MAAI,CAAA,UAAU,sBAAuB,SAAAZ,EAAS,CAC9D,CAAA,CAAA,EAGF,OAAIN,EAEAkB,EAAA,kBAAA,IAAC,IAAA,CACE,GAAGL,EACJ,KAAMb,EACN,OAAQC,IAAWO,EAAa,SAAW,QAC3C,IACEA,GAAcP,IAAW,SACrB,sBACA,OAEN,IAAAM,EACA,QAAUY,GAAM,CACd,GAAIf,EAAY,CACde,EAAE,eAAe,EACjB,MACF,CAEI,CAACX,GAAc,CAACP,GAClBmB,2BAAyBD,EAAGnB,CAAE,EAGhCE,GAAA,MAAAA,EAAUiB,EACZ,EACA,KAAK,SAEJ,SAAAJ,CAAA,CAAA,EAMLG,EAAA,kBAAA,IAAC,SAAA,CACE,GAAGL,EACJ,KAAAV,EACA,SAAUC,EACV,IAAAG,EACA,QAAUY,GAAM,CACV,CAACf,GAAcF,GACjBA,EAAQiB,CAAC,CAEb,EAEC,SAAAJ,CAAA,CAAA,CAGP,CACF,EAEArB,EAAO,YAAc"}

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

@@ -1 +1 @@
-{"version":3,"file":"Button.es.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  MouseEvent,\n  useLayoutEffect,\n  useRef,\n} 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?: React.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?: React.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    const buttonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\n\n    useLayoutEffect(() => {\n      if (typeof ref === \"function\") {\n        ref(buttonRef.current);\n      } else if (ref) {\n        ref.current = buttonRef.current;\n      }\n    }, [ref]);\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 React.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 React.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","buttonRef","useRef","useLayoutEffect","commonProps","csx","content","jsxs","Fragment","jsx","handleInternalNavigation"],"mappings":";;;;;AAuBO,MAAMA,IAAuD;AAAA,EAClE,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf,GAIaC,IAA8C;AAAA,EACzD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AACb,GAkDaC,IAASC;AAAA,EAIpB,CACE;AAAA,IACE,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,MAAAC;AAAA,IACA,IAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,eAAeC;AAAA,IACf,UAAAC;AAAA,KAEFC,MACG;AACG,UAAAC,IAAaR,KAAMS,EAAcT,CAAE,GACnCU,IAAYC,EAA8C,IAAI;AAEpE,IAAAC,EAAgB,MAAM;AAChB,MAAA,OAAOL,KAAQ,aACjBA,EAAIG,EAAU,OAAO,IACZH,MACTA,EAAI,UAAUG,EAAU;AAAA,IAC1B,GACC,CAACH,CAAG,CAAC;AAER,UAAMM,IAAc;AAAA,MAClB,WAAWC;AAAA,QACT;AAAA,QACA,kBAAkBlB,CAAO;AAAA,QACzBE,KAAa;AAAA,QACbM,KAAc;AAAA,QACdP,KAAQ,kBAAkBA,CAAI;AAAA,MAChC;AAAA,MACA,eAAeQ;AAAA,MACf,GAAIL,KAAM,EAAE,iBAAiBI,EAAW;AAAA,MACxC,GAAIA,KAAc,EAAE,UAAU,GAAG;AAAA,IAAA,GAG7BW,IAEDC,gBAAAA,EAAAA,KAAAC,EAAA,UAAA,EAAA,UAAA;AAAA,MACClB,KAAAmB,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWJ;AAAA,YACT;AAAA,YACAhB,KAAa;AAAA,UACf;AAAA,UAEC,UAAAC;AAAA,QAAA;AAAA,MACH;AAAA,MAEDO,KAAYY,gBAAAA,EAAA,IAAC,OAAI,EAAA,WAAU,uBAAuB,UAAAZ,GAAS;AAAA,IAC9D,EAAA,CAAA;AAGF,WAAIN,IAEAkB,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAMb;AAAA,QACN,QAAQC,MAAWO,IAAa,WAAW;AAAA,QAC3C,KACEA,KAAcP,MAAW,WACrB,wBACA;AAAA,QAEN,KAAAM;AAAA,QACA,SAAS,CAAC,MAAM;AACd,cAAIH,GAAY;AACd,cAAE,eAAe;AACjB;AAAA,UACF;AAEI,UAAA,CAACI,KAAc,CAACP,KAClBkB,EAAyB,GAAGnB,CAAE,GAGhCE,KAAA,QAAAA,EAAU;AAAA,QACZ;AAAA,QACA,MAAK;AAAA,QAEJ,UAAAa;AAAA,MAAA;AAAA,IAAA,IAMLG,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAAV;AAAA,QACA,UAAUC;AAAA,QACV,KAAAG;AAAA,QACA,SAAS,CAAC,MAAM;AACV,UAAA,CAACH,KAAcF,KACjBA,EAAQ,CAAC;AAAA,QAEb;AAAA,QAEC,UAAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEArB,EAAO,cAAc;"}
+{"version":3,"file":"Button.es.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport {\r\n  forwardRef,\r\n  MouseEvent,\r\n  useLayoutEffect,\r\n  useRef,\r\n} from \"react\";\r\n\r\nimport { csx } from \"../../utils/string\";\r\nimport {\r\n  isUrlExternal,\r\n  handleInternalNavigation,\r\n} from \"../../utils/navigation\";\r\nimport \"./Button.css\";\r\n\r\nexport type ButtonVariant =\r\n  | \"primary\"\r\n  | \"secondary\"\r\n  | \"success\"\r\n  | \"danger\"\r\n  | \"translucent\";\r\n\r\nexport const ButtonVariants: Record<ButtonVariant, ButtonVariant> = {\r\n  primary: \"primary\",\r\n  secondary: \"secondary\",\r\n  success: \"success\",\r\n  danger: \"danger\",\r\n  translucent: \"translucent\",\r\n};\r\n\r\nexport type ButtonSize = \"small\" | \"medium\" | \"large\" | \"xlarge\" | \"2xlarge\";\r\n\r\nexport const ButtonSizes: Record<ButtonSize, ButtonSize> = {\r\n  small: \"small\",\r\n  medium: \"medium\",\r\n  large: \"large\",\r\n  xlarge: \"xlarge\",\r\n  \"2xlarge\": \"2xlarge\",\r\n};\r\n\r\nexport interface ButtonProps {\r\n  /** The button's visual aesthetic\r\n   * - type {@link ButtonVariant}\r\n   */\r\n  variant?: ButtonVariant;\r\n\r\n  /** The size of the button\r\n   * - type {@link ButtonSize}\r\n   * @default \"medium\"\r\n   */\r\n  size?: ButtonSize;\r\n\r\n  /** Should the button be full width?\r\n   * @default false\r\n   */\r\n  fullWidth?: boolean;\r\n\r\n  /** The prefix to display within the button */\r\n  icon?: React.ReactNode;\r\n\r\n  /** Should the button be non-interactive? */\r\n  isDisabled?: boolean;\r\n\r\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`). */\r\n  to?: string;\r\n\r\n  /** The target attribute for the link. Defaults to `_blank` if the URL is external. */\r\n  target?: \"_blank\" | \"_self\" | \"_parent\" | \"_top\" | string;\r\n\r\n  /** Called when the button is pressed (on release, not keydown) */\r\n  onPress?: (e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\r\n\r\n  /** The type of button */\r\n  type?: \"button\" | \"submit\" | \"reset\";\r\n\r\n  /** The test ID for the button */\r\n  \"data-testid\"?: string;\r\n\r\n  /** The content to display within the button */\r\n  children?: React.ReactNode;\r\n}\r\n\r\n/**\r\n * A customizable button component that can render as either a button or anchor element.\r\n *\r\n * API:\r\n *  - {@link ButtonProps}\r\n */\r\nexport const Button = forwardRef<\r\n  HTMLButtonElement | HTMLAnchorElement,\r\n  ButtonProps\r\n>(\r\n  (\r\n    {\r\n      variant = \"primary\",\r\n      size = \"medium\",\r\n      fullWidth = false,\r\n      icon,\r\n      to,\r\n      target,\r\n      onPress,\r\n      type = \"button\",\r\n      isDisabled,\r\n      \"data-testid\": testId,\r\n      children,\r\n    }: ButtonProps,\r\n    ref\r\n  ) => {\r\n    const isExternal = to && isUrlExternal(to);\r\n    const buttonRef = useRef<HTMLButtonElement | HTMLAnchorElement>(null);\r\n\r\n    useLayoutEffect(() => {\r\n      if (typeof ref === \"function\") {\r\n        ref(buttonRef.current);\r\n      } else if (ref) {\r\n        ref.current = buttonRef.current;\r\n      }\r\n    }, [ref]);\r\n\r\n    const commonProps = {\r\n      className: csx(\r\n        \"proton-Button\",\r\n        `proton-Button--${variant}`,\r\n        fullWidth && \"proton-Button--fullWidth\",\r\n        isDisabled && \"proton-Button--disabled\",\r\n        size && `proton-Button--${size}`\r\n      ),\r\n      \"data-testid\": testId,\r\n      ...(to && { \"aria-disabled\": isDisabled }),\r\n      ...(isDisabled && { tabIndex: -1 }),\r\n    };\r\n\r\n    const content = (\r\n      <>\r\n        {icon && (\r\n          <div\r\n            className={csx(\r\n              \"proton-Button__icon-decorator\",\r\n              fullWidth && \"proton-Button__icon-decorator--fullWidth\"\r\n            )}\r\n          >\r\n            {icon}\r\n          </div>\r\n        )}\r\n        {children && <div className=\"proton-Button__text\">{children}</div>}\r\n      </>\r\n    );\r\n\r\n    if (to) {\r\n      return (\r\n        <a\r\n          {...commonProps}\r\n          href={to}\r\n          target={target || (isExternal ? \"_blank\" : undefined)}\r\n          rel={\r\n            isExternal || target === \"_blank\"\r\n              ? \"noopener noreferrer\"\r\n              : undefined\r\n          }\r\n          ref={ref as React.RefObject<HTMLAnchorElement>}\r\n          onClick={(e) => {\r\n            if (isDisabled) {\r\n              e.preventDefault();\r\n              return;\r\n            }\r\n\r\n            if (!isExternal && !target) {\r\n              handleInternalNavigation(e, to);\r\n            }\r\n\r\n            onPress?.(e);\r\n          }}\r\n          role=\"button\"\r\n        >\r\n          {content}\r\n        </a>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <button\r\n        {...commonProps}\r\n        type={type}\r\n        disabled={isDisabled}\r\n        ref={ref as React.RefObject<HTMLButtonElement>}\r\n        onClick={(e) => {\r\n          if (!isDisabled && onPress) {\r\n            onPress(e);\r\n          }\r\n        }}\r\n      >\r\n        {content}\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nButton.displayName = \"ProtonUIButton\";\r\n"],"names":["ButtonVariants","ButtonSizes","Button","forwardRef","variant","size","fullWidth","icon","to","target","onPress","type","isDisabled","testId","children","ref","isExternal","isUrlExternal","buttonRef","useRef","useLayoutEffect","commonProps","csx","content","jsxs","Fragment","jsx","handleInternalNavigation"],"mappings":";;;;;AAuBO,MAAMA,IAAuD;AAAA,EAClE,SAAS;AAAA,EACT,WAAW;AAAA,EACX,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,aAAa;AACf,GAIaC,IAA8C;AAAA,EACzD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW;AACb,GAkDaC,IAASC;AAAA,EAIpB,CACE;AAAA,IACE,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,WAAAC,IAAY;AAAA,IACZ,MAAAC;AAAA,IACA,IAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,eAAeC;AAAA,IACf,UAAAC;AAAA,KAEFC,MACG;AACG,UAAAC,IAAaR,KAAMS,EAAcT,CAAE,GACnCU,IAAYC,EAA8C,IAAI;AAEpE,IAAAC,EAAgB,MAAM;AAChB,MAAA,OAAOL,KAAQ,aACjBA,EAAIG,EAAU,OAAO,IACZH,MACTA,EAAI,UAAUG,EAAU;AAAA,IAC1B,GACC,CAACH,CAAG,CAAC;AAER,UAAMM,IAAc;AAAA,MAClB,WAAWC;AAAA,QACT;AAAA,QACA,kBAAkBlB,CAAO;AAAA,QACzBE,KAAa;AAAA,QACbM,KAAc;AAAA,QACdP,KAAQ,kBAAkBA,CAAI;AAAA,MAChC;AAAA,MACA,eAAeQ;AAAA,MACf,GAAIL,KAAM,EAAE,iBAAiBI,EAAW;AAAA,MACxC,GAAIA,KAAc,EAAE,UAAU,GAAG;AAAA,IAAA,GAG7BW,IAEDC,gBAAAA,EAAAA,KAAAC,EAAA,UAAA,EAAA,UAAA;AAAA,MACClB,KAAAmB,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWJ;AAAA,YACT;AAAA,YACAhB,KAAa;AAAA,UACf;AAAA,UAEC,UAAAC;AAAA,QAAA;AAAA,MACH;AAAA,MAEDO,KAAYY,gBAAAA,EAAA,IAAC,OAAI,EAAA,WAAU,uBAAuB,UAAAZ,GAAS;AAAA,IAC9D,EAAA,CAAA;AAGF,WAAIN,IAEAkB,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAMb;AAAA,QACN,QAAQC,MAAWO,IAAa,WAAW;AAAA,QAC3C,KACEA,KAAcP,MAAW,WACrB,wBACA;AAAA,QAEN,KAAAM;AAAA,QACA,SAAS,CAAC,MAAM;AACd,cAAIH,GAAY;AACd,cAAE,eAAe;AACjB;AAAA,UACF;AAEI,UAAA,CAACI,KAAc,CAACP,KAClBkB,EAAyB,GAAGnB,CAAE,GAGhCE,KAAA,QAAAA,EAAU;AAAA,QACZ;AAAA,QACA,MAAK;AAAA,QAEJ,UAAAa;AAAA,MAAA;AAAA,IAAA,IAMLG,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAGL;AAAA,QACJ,MAAAV;AAAA,QACA,UAAUC;AAAA,QACV,KAAAG;AAAA,QACA,SAAS,CAAC,MAAM;AACV,UAAA,CAACH,KAAcF,KACjBA,EAAQ,CAAC;AAAA,QAEb;AAAA,QAEC,UAAAa;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEArB,EAAO,cAAc;"}

package/dist/components/ButtonGroup/ButtonGroup.cjs.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../node_modules/react/jsx-runtime.cjs.js"),u=require("react"),c=require("../../node_modules/@react-aria/radio/dist/useRadio.cjs.js"),p=require("../../node_modules/@react-aria/radio/dist/useRadioGroup.cjs.js"),x=require("../../node_modules/@react-aria/visually-hidden/dist/VisuallyHidden.cjs.js"),R=require("../../node_modules/@react-stately/radio/dist/useRadioGroupState.cjs.js");;/* empty css                     */const G=require("../../utils/string.cjs.js");let a=u.createContext(null);function s(i){let t={...i,"data-testid":void 0},e=R.useRadioGroupState(t),{radioGroupProps:r}=p.useRadioGroup(t,e);return o.jsxRuntimeExports.jsx("div",{...r,className:"proton-ButtonGroup","data-value":e.selectedValue,"data-testid":i["data-testid"]||void 0,children:o.jsxRuntimeExports.jsx(a.Provider,{value:e,children:i.children})})}s.displayName="ProtonUIButtonGroup";s.Option=function(t){let e={...t,"data-testid":void 0},r=u.useContext(a),n=u.useRef(null),{inputProps:l,isSelected:d}=c.useRadio(e,r,n);return o.jsxRuntimeExports.jsxs("label",{className:G.csx("proton-ButtonGroup__option",d&&"proton-ButtonGroup__option--selected"),"data-selected":d||void 0,"data-testid":t["data-testid"]||void 0,children:[o.jsxRuntimeExports.jsx(x.VisuallyHidden,{children:o.jsxRuntimeExports.jsx("input",{...l,ref:n})}),t.children]})};exports.ButtonGroup=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../node_modules/react/jsx-runtime.cjs.js"),u=require("react"),c=require("../../node_modules/@react-aria/radio/dist/useRadio.cjs.js"),p=require("../../node_modules/@react-aria/radio/dist/useRadioGroup.cjs.js"),x=require("../../node_modules/@react-aria/visually-hidden/dist/VisuallyHidden.cjs.js"),G=require("../../node_modules/@react-stately/radio/dist/useRadioGroupState.cjs.js");;/* empty css                     */const R=require("../../utils/string.cjs.js");let a=u.createContext(null);function s(i){let t={...i,"data-testid":void 0},e=G.useRadioGroupState(t),{radioGroupProps:r}=p.useRadioGroup(t,e);return o.jsxRuntimeExports.jsx("div",{...r,className:"proton-ButtonGroup","data-value":e.selectedValue,"data-testid":i["data-testid"]||void 0,children:o.jsxRuntimeExports.jsx(a.Provider,{value:e,children:i.children})})}s.displayName="ProtonUIButtonGroup";s.Option=function(t){let e={...t,"data-testid":void 0},r=u.useContext(a),n=u.useRef(null),{inputProps:l,isSelected:d}=c.useRadio(e,r,n);return o.jsxRuntimeExports.jsxs("label",{className:R.csx("proton-ButtonGroup__option",d&&"proton-ButtonGroup__option--selected"),"data-selected":d||void 0,"data-testid":t["data-testid"]||void 0,children:[o.jsxRuntimeExports.jsx(x.VisuallyHidden,{children:o.jsxRuntimeExports.jsx("input",{...l,ref:n})}),t.children]})};exports.ButtonGroup=s;
 //# sourceMappingURL=ButtonGroup.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.cjs.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useRef } from \"react\";\nimport { useRadio, useRadioGroup } from \"@react-aria/radio\";\nimport { VisuallyHidden } from \"@react-aria/visually-hidden\";\nimport { useRadioGroupState } from \"@react-stately/radio\";\nimport { csx } from \"../../utils\";\n\nimport \"./ButtonGroup.css\";\n\nexport interface ButtonGroupProps {\n  /**\n   * The value of the currently selected option in the ButtonGroup. Providing\n   * this prop causes the component to become controlled.\n   */\n  value?: string;\n\n  /**\n   * The initially selected value of the ButtonGroup.\n   */\n  defaultValue?: string;\n\n  /**\n   * Called when the ButtonGroup's selected value changes.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * The ButtonGroup.Option elements to be rendered as the selectable values.\n   */\n  children?: React.ReactNode;\n}\n\nlet ButtonGroupContext = createContext(null);\n\n/**\n * A radio button group component that allows selection of a single option from multiple choices.\n *\n * API:\n *  - {@link ButtonGroupProps}\n */\nexport function ButtonGroup(props: ButtonGroupProps) {\n  let sanitizedProps = {\n    ...props,\n    \"data-testid\": undefined,\n  };\n\n  let state = useRadioGroupState(sanitizedProps);\n  let { radioGroupProps } = useRadioGroup(sanitizedProps, state);\n\n  return (\n    <div\n      {...radioGroupProps}\n      className=\"proton-ButtonGroup\"\n      data-value={state.selectedValue}\n      data-testid={props[\"data-testid\"] || undefined}\n    >\n      <ButtonGroupContext.Provider value={state}>\n        {props.children}\n      </ButtonGroupContext.Provider>\n    </div>\n  );\n}\n\nButtonGroup.displayName = \"ProtonUIButtonGroup\";\n\nexport interface ButtonGroupOptionProps {\n  /**\n   * The value of this option. When this option is selected, this value will\n   * become the ButtonGroup's new `selectedValue`.\n   */\n  value: string;\n\n  /**\n   * The text or component to be rendered as this option's content.\n   */\n  children: React.ReactNode;\n}\n\nButtonGroup.Option = function ButtonGroupOption(props: ButtonGroupOptionProps) {\n  let sanitizedProps = {\n    ...props,\n    \"data-testid\": undefined,\n  };\n\n  let state = useContext(ButtonGroupContext);\n  let ref = useRef(null);\n  let { inputProps, isSelected } = useRadio(sanitizedProps, state, ref);\n\n  return (\n    <label\n      className={csx(\n        \"proton-ButtonGroup__option\",\n        isSelected && \"proton-ButtonGroup__option--selected\"\n      )}\n      data-selected={isSelected || undefined}\n      data-testid={props[\"data-testid\"] || undefined}\n    >\n      <VisuallyHidden>\n        <input {...inputProps} ref={ref} />\n      </VisuallyHidden>\n      {props.children}\n    </label>\n  );\n};\n"],"names":["ButtonGroupContext","createContext","ButtonGroup","props","sanitizedProps","state","useRadioGroupState","radioGroupProps","useRadioGroup","jsx","useContext","ref","useRef","inputProps","isSelected","useRadio","jsxs","csx","VisuallyHidden"],"mappings":"ijBAiCA,IAAIA,EAAqBC,EAAAA,cAAc,IAAI,EAQpC,SAASC,EAAYC,EAAyB,CACnD,IAAIC,EAAiB,CACnB,GAAGD,EACH,cAAe,MAAA,EAGbE,EAAQC,qBAAmBF,CAAc,EACzC,CAAE,gBAAAG,CAAoB,EAAAC,EAAA,cAAcJ,EAAgBC,CAAK,EAG3D,OAAAI,EAAA,kBAAA,IAAC,MAAA,CACE,GAAGF,EACJ,UAAU,qBACV,aAAYF,EAAM,cAClB,cAAaF,EAAM,aAAa,GAAK,OAErC,iCAACH,EAAmB,SAAnB,CAA4B,MAAOK,EACjC,WAAM,SACT,CAAA,CAAA,CAGN,CAEAH,EAAY,YAAc,sBAe1BA,EAAY,OAAS,SAA2BC,EAA+B,CAC7E,IAAIC,EAAiB,CACnB,GAAGD,EACH,cAAe,MAAA,EAGbE,EAAQK,aAAWV,CAAkB,EACrCW,EAAMC,SAAO,IAAI,EACjB,CAAE,WAAAC,EAAY,WAAAC,GAAeC,EAAS,SAAAX,EAAgBC,EAAOM,CAAG,EAGlE,OAAAK,EAAA,kBAAA,KAAC,QAAA,CACC,UAAWC,EAAA,IACT,6BACAH,GAAc,sCAChB,EACA,gBAAeA,GAAc,OAC7B,cAAaX,EAAM,aAAa,GAAK,OAErC,SAAA,CAAAM,wBAACS,EAAAA,gBACC,SAACT,EAAA,kBAAA,IAAA,QAAA,CAAO,GAAGI,EAAY,IAAAF,CAAU,CAAA,EACnC,EACCR,EAAM,QAAA,CAAA,CAAA,CAGb"}
+{"version":3,"file":"ButtonGroup.cjs.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { createContext, useContext, useRef } from \"react\";\r\nimport { useRadio, useRadioGroup } from \"@react-aria/radio\";\r\nimport { VisuallyHidden } from \"@react-aria/visually-hidden\";\r\nimport { useRadioGroupState } from \"@react-stately/radio\";\r\nimport { csx } from \"../../utils\";\r\n\r\nimport \"./ButtonGroup.css\";\r\n\r\nexport interface ButtonGroupProps {\r\n  /**\r\n   * The value of the currently selected option in the ButtonGroup. Providing\r\n   * this prop causes the component to become controlled.\r\n   */\r\n  value?: string;\r\n\r\n  /**\r\n   * The initially selected value of the ButtonGroup.\r\n   */\r\n  defaultValue?: string;\r\n\r\n  /**\r\n   * Called when the ButtonGroup's selected value changes.\r\n   */\r\n  onChange?: (value: string) => void;\r\n\r\n  /**\r\n   * The ButtonGroup.Option elements to be rendered as the selectable values.\r\n   */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nlet ButtonGroupContext = createContext(null);\r\n\r\n/**\r\n * A radio button group component that allows selection of a single option from multiple choices.\r\n *\r\n * API:\r\n *  - {@link ButtonGroupProps}\r\n */\r\nexport function ButtonGroup(props: ButtonGroupProps) {\r\n  let sanitizedProps = {\r\n    ...props,\r\n    \"data-testid\": undefined,\r\n  };\r\n\r\n  let state = useRadioGroupState(sanitizedProps);\r\n  let { radioGroupProps } = useRadioGroup(sanitizedProps, state);\r\n\r\n  return (\r\n    <div\r\n      {...radioGroupProps}\r\n      className=\"proton-ButtonGroup\"\r\n      data-value={state.selectedValue}\r\n      data-testid={props[\"data-testid\"] || undefined}\r\n    >\r\n      <ButtonGroupContext.Provider value={state}>\r\n        {props.children}\r\n      </ButtonGroupContext.Provider>\r\n    </div>\r\n  );\r\n}\r\n\r\nButtonGroup.displayName = \"ProtonUIButtonGroup\";\r\n\r\nexport interface ButtonGroupOptionProps {\r\n  /**\r\n   * The value of this option. When this option is selected, this value will\r\n   * become the ButtonGroup's new `selectedValue`.\r\n   */\r\n  value: string;\r\n\r\n  /**\r\n   * The text or component to be rendered as this option's content.\r\n   */\r\n  children: React.ReactNode;\r\n}\r\n\r\nButtonGroup.Option = function ButtonGroupOption(props: ButtonGroupOptionProps) {\r\n  let sanitizedProps = {\r\n    ...props,\r\n    \"data-testid\": undefined,\r\n  };\r\n\r\n  let state = useContext(ButtonGroupContext);\r\n  let ref = useRef(null);\r\n  let { inputProps, isSelected } = useRadio(sanitizedProps, state, ref);\r\n\r\n  return (\r\n    <label\r\n      className={csx(\r\n        \"proton-ButtonGroup__option\",\r\n        isSelected && \"proton-ButtonGroup__option--selected\"\r\n      )}\r\n      data-selected={isSelected || undefined}\r\n      data-testid={props[\"data-testid\"] || undefined}\r\n    >\r\n      <VisuallyHidden>\r\n        <input {...inputProps} ref={ref} />\r\n      </VisuallyHidden>\r\n      {props.children}\r\n    </label>\r\n  );\r\n};\r\n"],"names":["ButtonGroupContext","createContext","ButtonGroup","props","sanitizedProps","state","useRadioGroupState","radioGroupProps","useRadioGroup","jsx","useContext","ref","useRef","inputProps","isSelected","useRadio","jsxs","csx","VisuallyHidden"],"mappings":"ijBAiCA,IAAIA,EAAqBC,EAAAA,cAAc,IAAI,EAQpC,SAASC,EAAYC,EAAyB,CACnD,IAAIC,EAAiB,CACnB,GAAGD,EACH,cAAe,MAAA,EAGbE,EAAQC,qBAAmBF,CAAc,EACzC,CAAE,gBAAAG,CAAoB,EAAAC,EAAA,cAAcJ,EAAgBC,CAAK,EAG3D,OAAAI,EAAA,kBAAA,IAAC,MAAA,CACE,GAAGF,EACJ,UAAU,qBACV,aAAYF,EAAM,cAClB,cAAaF,EAAM,aAAa,GAAK,OAErC,iCAACH,EAAmB,SAAnB,CAA4B,MAAOK,EACjC,WAAM,SACT,CAAA,CAAA,CAGN,CAEAH,EAAY,YAAc,sBAe1BA,EAAY,OAAS,SAA2BC,EAA+B,CAC7E,IAAIC,EAAiB,CACnB,GAAGD,EACH,cAAe,MAAA,EAGbE,EAAQK,aAAWV,CAAkB,EACrCW,EAAMC,SAAO,IAAI,EACjB,CAAE,WAAAC,EAAY,WAAAC,GAAeC,EAAS,SAAAX,EAAgBC,EAAOM,CAAG,EAGlE,OAAAK,EAAA,kBAAA,KAAC,QAAA,CACC,UAAWC,EAAA,IACT,6BACAH,GAAc,sCAChB,EACA,gBAAeA,GAAc,OAC7B,cAAaX,EAAM,aAAa,GAAK,OAErC,SAAA,CAAAM,wBAACS,EAAAA,gBACC,SAACT,EAAA,kBAAA,IAAA,QAAA,CAAO,GAAGI,EAAY,IAAAF,CAAU,CAAA,EACnC,EACCR,EAAM,QAAA,CAAA,CAAA,CAGb"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonGroup.es.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext, useRef } from \"react\";\nimport { useRadio, useRadioGroup } from \"@react-aria/radio\";\nimport { VisuallyHidden } from \"@react-aria/visually-hidden\";\nimport { useRadioGroupState } from \"@react-stately/radio\";\nimport { csx } from \"../../utils\";\n\nimport \"./ButtonGroup.css\";\n\nexport interface ButtonGroupProps {\n  /**\n   * The value of the currently selected option in the ButtonGroup. Providing\n   * this prop causes the component to become controlled.\n   */\n  value?: string;\n\n  /**\n   * The initially selected value of the ButtonGroup.\n   */\n  defaultValue?: string;\n\n  /**\n   * Called when the ButtonGroup's selected value changes.\n   */\n  onChange?: (value: string) => void;\n\n  /**\n   * The ButtonGroup.Option elements to be rendered as the selectable values.\n   */\n  children?: React.ReactNode;\n}\n\nlet ButtonGroupContext = createContext(null);\n\n/**\n * A radio button group component that allows selection of a single option from multiple choices.\n *\n * API:\n *  - {@link ButtonGroupProps}\n */\nexport function ButtonGroup(props: ButtonGroupProps) {\n  let sanitizedProps = {\n    ...props,\n    \"data-testid\": undefined,\n  };\n\n  let state = useRadioGroupState(sanitizedProps);\n  let { radioGroupProps } = useRadioGroup(sanitizedProps, state);\n\n  return (\n    <div\n      {...radioGroupProps}\n      className=\"proton-ButtonGroup\"\n      data-value={state.selectedValue}\n      data-testid={props[\"data-testid\"] || undefined}\n    >\n      <ButtonGroupContext.Provider value={state}>\n        {props.children}\n      </ButtonGroupContext.Provider>\n    </div>\n  );\n}\n\nButtonGroup.displayName = \"ProtonUIButtonGroup\";\n\nexport interface ButtonGroupOptionProps {\n  /**\n   * The value of this option. When this option is selected, this value will\n   * become the ButtonGroup's new `selectedValue`.\n   */\n  value: string;\n\n  /**\n   * The text or component to be rendered as this option's content.\n   */\n  children: React.ReactNode;\n}\n\nButtonGroup.Option = function ButtonGroupOption(props: ButtonGroupOptionProps) {\n  let sanitizedProps = {\n    ...props,\n    \"data-testid\": undefined,\n  };\n\n  let state = useContext(ButtonGroupContext);\n  let ref = useRef(null);\n  let { inputProps, isSelected } = useRadio(sanitizedProps, state, ref);\n\n  return (\n    <label\n      className={csx(\n        \"proton-ButtonGroup__option\",\n        isSelected && \"proton-ButtonGroup__option--selected\"\n      )}\n      data-selected={isSelected || undefined}\n      data-testid={props[\"data-testid\"] || undefined}\n    >\n      <VisuallyHidden>\n        <input {...inputProps} ref={ref} />\n      </VisuallyHidden>\n      {props.children}\n    </label>\n  );\n};\n"],"names":["ButtonGroupContext","createContext","ButtonGroup","props","sanitizedProps","state","useRadioGroupState","radioGroupProps","useRadioGroup","jsx","useContext","ref","useRef","inputProps","isSelected","useRadio","jsxs","csx","VisuallyHidden"],"mappings":";;;;;;;;AAiCA,IAAIA,IAAqBC,EAAc,IAAI;AAQpC,SAASC,EAAYC,GAAyB;AACnD,MAAIC,IAAiB;AAAA,IACnB,GAAGD;AAAA,IACH,eAAe;AAAA,EAAA,GAGbE,IAAQC,EAAmBF,CAAc,GACzC,EAAE,iBAAAG,EAAoB,IAAAC,EAAcJ,GAAgBC,CAAK;AAG3D,SAAAI,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAU;AAAA,MACV,cAAYF,EAAM;AAAA,MAClB,eAAaF,EAAM,aAAa,KAAK;AAAA,MAErC,gCAACH,EAAmB,UAAnB,EAA4B,OAAOK,GACjC,YAAM,UACT;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAH,EAAY,cAAc;AAe1BA,EAAY,SAAS,SAA2BC,GAA+B;AAC7E,MAAIC,IAAiB;AAAA,IACnB,GAAGD;AAAA,IACH,eAAe;AAAA,EAAA,GAGbE,IAAQK,EAAWV,CAAkB,GACrCW,IAAMC,EAAO,IAAI,GACjB,EAAE,YAAAC,GAAY,YAAAC,MAAeC,EAASX,GAAgBC,GAAOM,CAAG;AAGlE,SAAAK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH,KAAc;AAAA,MAChB;AAAA,MACA,iBAAeA,KAAc;AAAA,MAC7B,eAAaX,EAAM,aAAa,KAAK;AAAA,MAErC,UAAA;AAAA,QAAAM,gBAAAA,MAACS,KACC,UAACT,gBAAAA,EAAA,IAAA,SAAA,EAAO,GAAGI,GAAY,KAAAF,EAAU,CAAA,GACnC;AAAA,QACCR,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}
+{"version":3,"file":"ButtonGroup.es.js","sources":["../../../src/components/ButtonGroup/ButtonGroup.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { createContext, useContext, useRef } from \"react\";\r\nimport { useRadio, useRadioGroup } from \"@react-aria/radio\";\r\nimport { VisuallyHidden } from \"@react-aria/visually-hidden\";\r\nimport { useRadioGroupState } from \"@react-stately/radio\";\r\nimport { csx } from \"../../utils\";\r\n\r\nimport \"./ButtonGroup.css\";\r\n\r\nexport interface ButtonGroupProps {\r\n  /**\r\n   * The value of the currently selected option in the ButtonGroup. Providing\r\n   * this prop causes the component to become controlled.\r\n   */\r\n  value?: string;\r\n\r\n  /**\r\n   * The initially selected value of the ButtonGroup.\r\n   */\r\n  defaultValue?: string;\r\n\r\n  /**\r\n   * Called when the ButtonGroup's selected value changes.\r\n   */\r\n  onChange?: (value: string) => void;\r\n\r\n  /**\r\n   * The ButtonGroup.Option elements to be rendered as the selectable values.\r\n   */\r\n  children?: React.ReactNode;\r\n}\r\n\r\nlet ButtonGroupContext = createContext(null);\r\n\r\n/**\r\n * A radio button group component that allows selection of a single option from multiple choices.\r\n *\r\n * API:\r\n *  - {@link ButtonGroupProps}\r\n */\r\nexport function ButtonGroup(props: ButtonGroupProps) {\r\n  let sanitizedProps = {\r\n    ...props,\r\n    \"data-testid\": undefined,\r\n  };\r\n\r\n  let state = useRadioGroupState(sanitizedProps);\r\n  let { radioGroupProps } = useRadioGroup(sanitizedProps, state);\r\n\r\n  return (\r\n    <div\r\n      {...radioGroupProps}\r\n      className=\"proton-ButtonGroup\"\r\n      data-value={state.selectedValue}\r\n      data-testid={props[\"data-testid\"] || undefined}\r\n    >\r\n      <ButtonGroupContext.Provider value={state}>\r\n        {props.children}\r\n      </ButtonGroupContext.Provider>\r\n    </div>\r\n  );\r\n}\r\n\r\nButtonGroup.displayName = \"ProtonUIButtonGroup\";\r\n\r\nexport interface ButtonGroupOptionProps {\r\n  /**\r\n   * The value of this option. When this option is selected, this value will\r\n   * become the ButtonGroup's new `selectedValue`.\r\n   */\r\n  value: string;\r\n\r\n  /**\r\n   * The text or component to be rendered as this option's content.\r\n   */\r\n  children: React.ReactNode;\r\n}\r\n\r\nButtonGroup.Option = function ButtonGroupOption(props: ButtonGroupOptionProps) {\r\n  let sanitizedProps = {\r\n    ...props,\r\n    \"data-testid\": undefined,\r\n  };\r\n\r\n  let state = useContext(ButtonGroupContext);\r\n  let ref = useRef(null);\r\n  let { inputProps, isSelected } = useRadio(sanitizedProps, state, ref);\r\n\r\n  return (\r\n    <label\r\n      className={csx(\r\n        \"proton-ButtonGroup__option\",\r\n        isSelected && \"proton-ButtonGroup__option--selected\"\r\n      )}\r\n      data-selected={isSelected || undefined}\r\n      data-testid={props[\"data-testid\"] || undefined}\r\n    >\r\n      <VisuallyHidden>\r\n        <input {...inputProps} ref={ref} />\r\n      </VisuallyHidden>\r\n      {props.children}\r\n    </label>\r\n  );\r\n};\r\n"],"names":["ButtonGroupContext","createContext","ButtonGroup","props","sanitizedProps","state","useRadioGroupState","radioGroupProps","useRadioGroup","jsx","useContext","ref","useRef","inputProps","isSelected","useRadio","jsxs","csx","VisuallyHidden"],"mappings":";;;;;;;;AAiCA,IAAIA,IAAqBC,EAAc,IAAI;AAQpC,SAASC,EAAYC,GAAyB;AACnD,MAAIC,IAAiB;AAAA,IACnB,GAAGD;AAAA,IACH,eAAe;AAAA,EAAA,GAGbE,IAAQC,EAAmBF,CAAc,GACzC,EAAE,iBAAAG,EAAoB,IAAAC,EAAcJ,GAAgBC,CAAK;AAG3D,SAAAI,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGF;AAAA,MACJ,WAAU;AAAA,MACV,cAAYF,EAAM;AAAA,MAClB,eAAaF,EAAM,aAAa,KAAK;AAAA,MAErC,gCAACH,EAAmB,UAAnB,EAA4B,OAAOK,GACjC,YAAM,UACT;AAAA,IAAA;AAAA,EAAA;AAGN;AAEAH,EAAY,cAAc;AAe1BA,EAAY,SAAS,SAA2BC,GAA+B;AAC7E,MAAIC,IAAiB;AAAA,IACnB,GAAGD;AAAA,IACH,eAAe;AAAA,EAAA,GAGbE,IAAQK,EAAWV,CAAkB,GACrCW,IAAMC,EAAO,IAAI,GACjB,EAAE,YAAAC,GAAY,YAAAC,MAAeC,EAASX,GAAgBC,GAAOM,CAAG;AAGlE,SAAAK,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACAH,KAAc;AAAA,MAChB;AAAA,MACA,iBAAeA,KAAc;AAAA,MAC7B,eAAaX,EAAM,aAAa,KAAK;AAAA,MAErC,UAAA;AAAA,QAAAM,gBAAAA,MAACS,KACC,UAACT,gBAAAA,EAAA,IAAA,SAAA,EAAO,GAAGI,GAAY,KAAAF,EAAU,CAAA,GACnC;AAAA,QACCR,EAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGb;"}

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonWithSelect.cjs.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { Icon } from \"../Icon/Icon\";\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nimport \"./ButtonWithSelect.css\";\n\nconst FIXED_TRIGGER_WIDTH = 44;\n\ninterface ButtonWithSelectProps extends ButtonProps {\n  /**\n   * The default value of the select menu.\n   */\n  defaultValue?: string;\n  /**\n   * The keys of the disabled items.\n   */\n  disabledKeys?: string[];\n  /**\n   * The items to display in the select menu.\n   * - type {@link ActionMenuAction}\n   */\n  items: ActionMenuAction[];\n  /**\n   * The callback function to call when the selection changes.\n   */\n  onSelectionChange?: (key: string) => void;\n  /**\n   * The key of the selected item.\n   */\n  selectedKey?: string;\n}\n\n/**\n * A button with a select menu.\n *\n * API:\n *  - {@link ButtonWithSelectProps}\n *  - extends {@link ButtonProps}\n */\nexport function ButtonWithSelect({\n  items,\n  defaultValue,\n  children,\n  onSelectionChange,\n  disabledKeys,\n  selectedKey,\n  icon,\n  variant,\n  fullWidth,\n  onPress,\n  ...buttonProps\n}: ButtonWithSelectProps) {\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\n\n  return (\n    <div className=\"proton-ButtonWithSelect\">\n      <div\n        className=\"proton-ButtonWithSelect__button\"\n        style={\n          {\n            \"--proton-button-text-shift\": `${textShift}px`,\n            \"--flex\": fullWidth ? 1 : 0,\n          } as React.CSSProperties\n        }\n      >\n        <Button\n          {...buttonProps}\n          onPress={onPress}\n          icon={icon}\n          fullWidth={fullWidth}\n          variant={variant}\n          data-testid=\"ButtonWithSelect-Button\"\n        >\n          {children}\n        </Button>\n      </div>\n\n      <MenuTrigger\n        items={items}\n        disabled={buttonProps.isDisabled}\n        disabledKeys={disabledKeys}\n        onSelectionChange={onSelectionChange}\n        selectedKey={selectedKey}\n        renderTrigger={({ isOpen, setIsOpen }) => {\n          return (\n            <TriggerButton\n              {...buttonProps}\n              variant={variant}\n              onPress={() => setIsOpen(!isOpen)}\n            />\n          );\n        }}\n      />\n    </div>\n  );\n}\n\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\n\nconst TriggerButton = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>((props, ref) => {\n  return (\n    <div\n      className=\"proton-ButtonWithSelect__trigger\"\n      style={\n        {\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Button {...props} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\n          <Icon id=\"chevron-down\" size={16} />\n        </div>\n      </Button>\n    </div>\n  );\n});\n\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","isOpen","setIsOpen","TriggerButton","React","props","ref","Icon"],"mappings":"yTAQA,MAAMA,EAAsB,GAiCrB,SAASC,EAAiB,CAC/B,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAA0B,CAClB,MAAAC,EAAYH,EAAYV,EAAsB,EAAI,EAGtD,OAAAc,EAAA,kBAAA,KAAC,MAAI,CAAA,UAAU,0BACb,SAAA,CAAAC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,kCACV,MACE,CACE,6BAA8B,GAAGF,CAAS,KAC1C,SAAUH,EAAY,EAAI,CAC5B,EAGF,SAAAK,EAAA,kBAAA,IAACC,EAAA,OAAA,CACE,GAAGJ,EACJ,QAAAD,EACA,KAAAH,EACA,UAAAE,EACA,QAAAD,EACA,cAAY,0BAEX,SAAAL,CAAA,CACH,CAAA,CACF,EAEAW,EAAA,kBAAA,IAACE,EAAA,YAAA,CACC,MAAAf,EACA,SAAUU,EAAY,WACtB,aAAAN,EACA,kBAAAD,EACA,YAAAE,EACA,cAAe,CAAC,CAAE,OAAAW,EAAQ,UAAAC,KAEtBJ,EAAA,kBAAA,IAACK,EAAA,CACE,GAAGR,EACJ,QAAAH,EACA,QAAS,IAAMU,EAAU,CAACD,CAAM,CAAA,CAAA,CAGtC,CACF,CACF,CAAA,CAAA,CAEJ,CAEAjB,EAAiB,YAAc,2BAE/B,MAAMmB,EAAgBC,EAAM,WAG1B,CAACC,EAAOC,IAENR,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,mCACV,MACE,CACE,kBAAmB,GAAGf,CAAmB,IAC3C,EAGF,iCAACgB,SAAQ,CAAA,GAAGM,EAAO,cAAY,2BAA2B,IAAAC,EACxD,SAACR,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,2CACb,iCAACS,EAAAA,KAAK,CAAA,GAAG,eAAe,KAAM,GAAI,EACpC,CACF,CAAA,CAAA,CAAA,CAGL,EAEDJ,EAAc,YAAc"}
+{"version":3,"file":"ButtonWithSelect.cjs.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Button, type ButtonProps } from \"../Button/Button\";\r\nimport { Icon } from \"../Icon/Icon\";\r\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\r\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport \"./ButtonWithSelect.css\";\r\n\r\nconst FIXED_TRIGGER_WIDTH = 44;\r\n\r\ninterface ButtonWithSelectProps extends ButtonProps {\r\n  /**\r\n   * The default value of the select menu.\r\n   */\r\n  defaultValue?: string;\r\n  /**\r\n   * The keys of the disabled items.\r\n   */\r\n  disabledKeys?: string[];\r\n  /**\r\n   * The items to display in the select menu.\r\n   * - type {@link ActionMenuAction}\r\n   */\r\n  items: ActionMenuAction[];\r\n  /**\r\n   * The callback function to call when the selection changes.\r\n   */\r\n  onSelectionChange?: (key: string) => void;\r\n  /**\r\n   * The key of the selected item.\r\n   */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A button with a select menu.\r\n *\r\n * API:\r\n *  - {@link ButtonWithSelectProps}\r\n *  - extends {@link ButtonProps}\r\n */\r\nexport function ButtonWithSelect({\r\n  items,\r\n  defaultValue,\r\n  children,\r\n  onSelectionChange,\r\n  disabledKeys,\r\n  selectedKey,\r\n  icon,\r\n  variant,\r\n  fullWidth,\r\n  onPress,\r\n  ...buttonProps\r\n}: ButtonWithSelectProps) {\r\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\r\n\r\n  return (\r\n    <div className=\"proton-ButtonWithSelect\">\r\n      <div\r\n        className=\"proton-ButtonWithSelect__button\"\r\n        style={\r\n          {\r\n            \"--proton-button-text-shift\": `${textShift}px`,\r\n            \"--flex\": fullWidth ? 1 : 0,\r\n          } as React.CSSProperties\r\n        }\r\n      >\r\n        <Button\r\n          {...buttonProps}\r\n          onPress={onPress}\r\n          icon={icon}\r\n          fullWidth={fullWidth}\r\n          variant={variant}\r\n          data-testid=\"ButtonWithSelect-Button\"\r\n        >\r\n          {children}\r\n        </Button>\r\n      </div>\r\n\r\n      <MenuTrigger\r\n        items={items}\r\n        disabled={buttonProps.isDisabled}\r\n        disabledKeys={disabledKeys}\r\n        onSelectionChange={onSelectionChange}\r\n        selectedKey={selectedKey}\r\n        renderTrigger={({ isOpen, setIsOpen }) => {\r\n          return (\r\n            <TriggerButton\r\n              {...buttonProps}\r\n              variant={variant}\r\n              onPress={() => setIsOpen(!isOpen)}\r\n            />\r\n          );\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\r\n\r\nconst TriggerButton = React.forwardRef<\r\n  HTMLButtonElement | HTMLAnchorElement,\r\n  ButtonProps\r\n>((props, ref) => {\r\n  return (\r\n    <div\r\n      className=\"proton-ButtonWithSelect__trigger\"\r\n      style={\r\n        {\r\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\r\n        } as React.CSSProperties\r\n      }\r\n    >\r\n      <Button {...props} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\r\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\r\n          <Icon id=\"chevron-down\" size={16} />\r\n        </div>\r\n      </Button>\r\n    </div>\r\n  );\r\n});\r\n\r\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\r\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","isOpen","setIsOpen","TriggerButton","React","props","ref","Icon"],"mappings":"yTAQA,MAAMA,EAAsB,GAiCrB,SAASC,EAAiB,CAC/B,MAAAC,EACA,aAAAC,EACA,SAAAC,EACA,kBAAAC,EACA,aAAAC,EACA,YAAAC,EACA,KAAAC,EACA,QAAAC,EACA,UAAAC,EACA,QAAAC,EACA,GAAGC,CACL,EAA0B,CAClB,MAAAC,EAAYH,EAAYV,EAAsB,EAAI,EAGtD,OAAAc,EAAA,kBAAA,KAAC,MAAI,CAAA,UAAU,0BACb,SAAA,CAAAC,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,kCACV,MACE,CACE,6BAA8B,GAAGF,CAAS,KAC1C,SAAUH,EAAY,EAAI,CAC5B,EAGF,SAAAK,EAAA,kBAAA,IAACC,EAAA,OAAA,CACE,GAAGJ,EACJ,QAAAD,EACA,KAAAH,EACA,UAAAE,EACA,QAAAD,EACA,cAAY,0BAEX,SAAAL,CAAA,CACH,CAAA,CACF,EAEAW,EAAA,kBAAA,IAACE,EAAA,YAAA,CACC,MAAAf,EACA,SAAUU,EAAY,WACtB,aAAAN,EACA,kBAAAD,EACA,YAAAE,EACA,cAAe,CAAC,CAAE,OAAAW,EAAQ,UAAAC,KAEtBJ,EAAA,kBAAA,IAACK,EAAA,CACE,GAAGR,EACJ,QAAAH,EACA,QAAS,IAAMU,EAAU,CAACD,CAAM,CAAA,CAAA,CAGtC,CACF,CACF,CAAA,CAAA,CAEJ,CAEAjB,EAAiB,YAAc,2BAE/B,MAAMmB,EAAgBC,EAAM,WAG1B,CAACC,EAAOC,IAENR,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,mCACV,MACE,CACE,kBAAmB,GAAGf,CAAmB,IAC3C,EAGF,iCAACgB,SAAQ,CAAA,GAAGM,EAAO,cAAY,2BAA2B,IAAAC,EACxD,SAACR,EAAAA,kBAAAA,IAAA,MAAA,CAAI,UAAU,2CACb,iCAACS,EAAAA,KAAK,CAAA,GAAG,eAAe,KAAM,GAAI,EACpC,CACF,CAAA,CAAA,CAAA,CAGL,EAEDJ,EAAc,YAAc"}

package/dist/components/ButtonWithSelect/ButtonWithSelect.es.js

@@ -1,21 +1,21 @@
 import { j as t } from "../../node_modules/react/jsx-runtime.es.js";
 import j from "react";
 import { Button as s } from "../Button/Button.es.js";
-import { Icon as S } from "../Icon/Icon.es.js";
-import { MenuTrigger as f } from "../Menu/MenuTrigger.es.js";
+import { Icon as f } from "../Icon/Icon.es.js";
+import { MenuTrigger as S } from "../Menu/MenuTrigger.es.js";
 /* empty css                        */
 const c = 44;
 function W({
   items: e,
   defaultValue: i,
-  children: l,
+  children: d,
   onSelectionChange: a,
   disabledKeys: m,
   selectedKey: u,
-  icon: x,
+  icon: g,
   variant: n,
   fullWidth: r,
-  onPress: g,
+  onPress: x,
   ...o
 }) {
   const h = r ? c / 2 : 0;
@@ -32,18 +32,18 @@ function W({
           s,
           {
             ...o,
-            onPress: g,
-            icon: x,
+            onPress: x,
+            icon: g,
             fullWidth: r,
             variant: n,
             "data-testid": "ButtonWithSelect-Button",
-            children: l
+            children: d
           }
         )
       }
     ),
     /* @__PURE__ */ t.jsx(
-      f,
+      S,
       {
         items: e,
         disabled: o.isDisabled,
@@ -51,7 +51,7 @@ function W({
         onSelectionChange: a,
         selectedKey: u,
         renderTrigger: ({ isOpen: p, setIsOpen: B }) => /* @__PURE__ */ t.jsx(
-          d,
+          l,
           {
             ...o,
             variant: n,
@@ -63,17 +63,17 @@ function W({
   ] });
 }
 W.displayName = "ProtonUIButtonWithSelect";
-const d = j.forwardRef((e, i) => /* @__PURE__ */ t.jsx(
+const l = j.forwardRef((e, i) => /* @__PURE__ */ t.jsx(
   "div",
   {
     className: "proton-ButtonWithSelect__trigger",
     style: {
       "--trigger-width": `${c}px`
     },
-    children: /* @__PURE__ */ t.jsx(s, { ...e, "data-testid": "ButtonWithSelect-Trigger", ref: i, children: /* @__PURE__ */ t.jsx("div", { className: "proton-ButtonWithSelect__trigger-content", children: /* @__PURE__ */ t.jsx(S, { id: "chevron-down", size: 16 }) }) })
+    children: /* @__PURE__ */ t.jsx(s, { ...e, "data-testid": "ButtonWithSelect-Trigger", ref: i, children: /* @__PURE__ */ t.jsx("div", { className: "proton-ButtonWithSelect__trigger-content", children: /* @__PURE__ */ t.jsx(f, { id: "chevron-down", size: 16 }) }) })
   }
 ));
-d.displayName = "ProtonUIButtonWithSelectTrigger";
+l.displayName = "ProtonUIButtonWithSelectTrigger";
 export {
   W as ButtonWithSelect
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonWithSelect.es.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\nimport { Button, type ButtonProps } from \"../Button/Button\";\nimport { Icon } from \"../Icon/Icon\";\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\n\nimport \"./ButtonWithSelect.css\";\n\nconst FIXED_TRIGGER_WIDTH = 44;\n\ninterface ButtonWithSelectProps extends ButtonProps {\n  /**\n   * The default value of the select menu.\n   */\n  defaultValue?: string;\n  /**\n   * The keys of the disabled items.\n   */\n  disabledKeys?: string[];\n  /**\n   * The items to display in the select menu.\n   * - type {@link ActionMenuAction}\n   */\n  items: ActionMenuAction[];\n  /**\n   * The callback function to call when the selection changes.\n   */\n  onSelectionChange?: (key: string) => void;\n  /**\n   * The key of the selected item.\n   */\n  selectedKey?: string;\n}\n\n/**\n * A button with a select menu.\n *\n * API:\n *  - {@link ButtonWithSelectProps}\n *  - extends {@link ButtonProps}\n */\nexport function ButtonWithSelect({\n  items,\n  defaultValue,\n  children,\n  onSelectionChange,\n  disabledKeys,\n  selectedKey,\n  icon,\n  variant,\n  fullWidth,\n  onPress,\n  ...buttonProps\n}: ButtonWithSelectProps) {\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\n\n  return (\n    <div className=\"proton-ButtonWithSelect\">\n      <div\n        className=\"proton-ButtonWithSelect__button\"\n        style={\n          {\n            \"--proton-button-text-shift\": `${textShift}px`,\n            \"--flex\": fullWidth ? 1 : 0,\n          } as React.CSSProperties\n        }\n      >\n        <Button\n          {...buttonProps}\n          onPress={onPress}\n          icon={icon}\n          fullWidth={fullWidth}\n          variant={variant}\n          data-testid=\"ButtonWithSelect-Button\"\n        >\n          {children}\n        </Button>\n      </div>\n\n      <MenuTrigger\n        items={items}\n        disabled={buttonProps.isDisabled}\n        disabledKeys={disabledKeys}\n        onSelectionChange={onSelectionChange}\n        selectedKey={selectedKey}\n        renderTrigger={({ isOpen, setIsOpen }) => {\n          return (\n            <TriggerButton\n              {...buttonProps}\n              variant={variant}\n              onPress={() => setIsOpen(!isOpen)}\n            />\n          );\n        }}\n      />\n    </div>\n  );\n}\n\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\n\nconst TriggerButton = React.forwardRef<\n  HTMLButtonElement | HTMLAnchorElement,\n  ButtonProps\n>((props, ref) => {\n  return (\n    <div\n      className=\"proton-ButtonWithSelect__trigger\"\n      style={\n        {\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\n        } as React.CSSProperties\n      }\n    >\n      <Button {...props} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\n          <Icon id=\"chevron-down\" size={16} />\n        </div>\n      </Button>\n    </div>\n  );\n});\n\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","isOpen","setIsOpen","TriggerButton","React","props","ref","Icon"],"mappings":";;;;;;AAQA,MAAMA,IAAsB;AAiCrB,SAASC,EAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA0B;AAClB,QAAAC,IAAYH,IAAYV,IAAsB,IAAI;AAGtD,SAAAc,gBAAAA,EAAA,KAAC,OAAI,EAAA,WAAU,2BACb,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE;AAAA,UACE,8BAA8B,GAAGF,CAAS;AAAA,UAC1C,UAAUH,IAAY,IAAI;AAAA,QAC5B;AAAA,QAGF,UAAAK,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGJ;AAAA,YACJ,SAAAD;AAAA,YACA,MAAAH;AAAA,YACA,WAAAE;AAAA,YACA,SAAAD;AAAA,YACA,eAAY;AAAA,YAEX,UAAAL;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,IAEAW,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAAf;AAAA,QACA,UAAUU,EAAY;AAAA,QACtB,cAAAN;AAAA,QACA,mBAAAD;AAAA,QACA,aAAAE;AAAA,QACA,eAAe,CAAC,EAAE,QAAAW,GAAQ,WAAAC,QAEtBJ,gBAAAA,EAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAGR;AAAA,YACJ,SAAAH;AAAA,YACA,SAAS,MAAMU,EAAU,CAACD,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAGtC;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEAjB,EAAiB,cAAc;AAE/B,MAAMmB,IAAgBC,EAAM,WAG1B,CAACC,GAAOC,MAENR,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,OACE;AAAA,MACE,mBAAmB,GAAGf,CAAmB;AAAA,IAC3C;AAAA,IAGF,gCAACgB,GAAQ,EAAA,GAAGM,GAAO,eAAY,4BAA2B,KAAAC,GACxD,UAACR,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,4CACb,gCAACS,GAAK,EAAA,IAAG,gBAAe,MAAM,IAAI,GACpC,EACF,CAAA;AAAA,EAAA;AAAA,CAGL;AAEDJ,EAAc,cAAc;"}
+{"version":3,"file":"ButtonWithSelect.es.js","sources":["../../../src/components/ButtonWithSelect/ButtonWithSelect.tsx"],"sourcesContent":["import React from \"react\";\r\nimport { Button, type ButtonProps } from \"../Button/Button\";\r\nimport { Icon } from \"../Icon/Icon\";\r\nimport { MenuTrigger } from \"../Menu/MenuTrigger\";\r\nimport type { ActionMenuAction } from \"../ActionMenu/ActionMenu\";\r\n\r\nimport \"./ButtonWithSelect.css\";\r\n\r\nconst FIXED_TRIGGER_WIDTH = 44;\r\n\r\ninterface ButtonWithSelectProps extends ButtonProps {\r\n  /**\r\n   * The default value of the select menu.\r\n   */\r\n  defaultValue?: string;\r\n  /**\r\n   * The keys of the disabled items.\r\n   */\r\n  disabledKeys?: string[];\r\n  /**\r\n   * The items to display in the select menu.\r\n   * - type {@link ActionMenuAction}\r\n   */\r\n  items: ActionMenuAction[];\r\n  /**\r\n   * The callback function to call when the selection changes.\r\n   */\r\n  onSelectionChange?: (key: string) => void;\r\n  /**\r\n   * The key of the selected item.\r\n   */\r\n  selectedKey?: string;\r\n}\r\n\r\n/**\r\n * A button with a select menu.\r\n *\r\n * API:\r\n *  - {@link ButtonWithSelectProps}\r\n *  - extends {@link ButtonProps}\r\n */\r\nexport function ButtonWithSelect({\r\n  items,\r\n  defaultValue,\r\n  children,\r\n  onSelectionChange,\r\n  disabledKeys,\r\n  selectedKey,\r\n  icon,\r\n  variant,\r\n  fullWidth,\r\n  onPress,\r\n  ...buttonProps\r\n}: ButtonWithSelectProps) {\r\n  const textShift = fullWidth ? FIXED_TRIGGER_WIDTH / 2 : 0;\r\n\r\n  return (\r\n    <div className=\"proton-ButtonWithSelect\">\r\n      <div\r\n        className=\"proton-ButtonWithSelect__button\"\r\n        style={\r\n          {\r\n            \"--proton-button-text-shift\": `${textShift}px`,\r\n            \"--flex\": fullWidth ? 1 : 0,\r\n          } as React.CSSProperties\r\n        }\r\n      >\r\n        <Button\r\n          {...buttonProps}\r\n          onPress={onPress}\r\n          icon={icon}\r\n          fullWidth={fullWidth}\r\n          variant={variant}\r\n          data-testid=\"ButtonWithSelect-Button\"\r\n        >\r\n          {children}\r\n        </Button>\r\n      </div>\r\n\r\n      <MenuTrigger\r\n        items={items}\r\n        disabled={buttonProps.isDisabled}\r\n        disabledKeys={disabledKeys}\r\n        onSelectionChange={onSelectionChange}\r\n        selectedKey={selectedKey}\r\n        renderTrigger={({ isOpen, setIsOpen }) => {\r\n          return (\r\n            <TriggerButton\r\n              {...buttonProps}\r\n              variant={variant}\r\n              onPress={() => setIsOpen(!isOpen)}\r\n            />\r\n          );\r\n        }}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n\r\nButtonWithSelect.displayName = \"ProtonUIButtonWithSelect\";\r\n\r\nconst TriggerButton = React.forwardRef<\r\n  HTMLButtonElement | HTMLAnchorElement,\r\n  ButtonProps\r\n>((props, ref) => {\r\n  return (\r\n    <div\r\n      className=\"proton-ButtonWithSelect__trigger\"\r\n      style={\r\n        {\r\n          \"--trigger-width\": `${FIXED_TRIGGER_WIDTH}px`,\r\n        } as React.CSSProperties\r\n      }\r\n    >\r\n      <Button {...props} data-testid=\"ButtonWithSelect-Trigger\" ref={ref}>\r\n        <div className=\"proton-ButtonWithSelect__trigger-content\">\r\n          <Icon id=\"chevron-down\" size={16} />\r\n        </div>\r\n      </Button>\r\n    </div>\r\n  );\r\n});\r\n\r\nTriggerButton.displayName = \"ProtonUIButtonWithSelectTrigger\";\r\n"],"names":["FIXED_TRIGGER_WIDTH","ButtonWithSelect","items","defaultValue","children","onSelectionChange","disabledKeys","selectedKey","icon","variant","fullWidth","onPress","buttonProps","textShift","jsxs","jsx","Button","MenuTrigger","isOpen","setIsOpen","TriggerButton","React","props","ref","Icon"],"mappings":";;;;;;AAQA,MAAMA,IAAsB;AAiCrB,SAASC,EAAiB;AAAA,EAC/B,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GAA0B;AAClB,QAAAC,IAAYH,IAAYV,IAAsB,IAAI;AAGtD,SAAAc,gBAAAA,EAAA,KAAC,OAAI,EAAA,WAAU,2BACb,UAAA;AAAA,IAAAC,gBAAAA,EAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,OACE;AAAA,UACE,8BAA8B,GAAGF,CAAS;AAAA,UAC1C,UAAUH,IAAY,IAAI;AAAA,QAC5B;AAAA,QAGF,UAAAK,gBAAAA,EAAA;AAAA,UAACC;AAAA,UAAA;AAAA,YACE,GAAGJ;AAAA,YACJ,SAAAD;AAAA,YACA,MAAAH;AAAA,YACA,WAAAE;AAAA,YACA,SAAAD;AAAA,YACA,eAAY;AAAA,YAEX,UAAAL;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IACF;AAAA,IAEAW,gBAAAA,EAAA;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAAf;AAAA,QACA,UAAUU,EAAY;AAAA,QACtB,cAAAN;AAAA,QACA,mBAAAD;AAAA,QACA,aAAAE;AAAA,QACA,eAAe,CAAC,EAAE,QAAAW,GAAQ,WAAAC,QAEtBJ,gBAAAA,EAAA;AAAA,UAACK;AAAA,UAAA;AAAA,YACE,GAAGR;AAAA,YACJ,SAAAH;AAAA,YACA,SAAS,MAAMU,EAAU,CAACD,CAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAGtC;AAAA,IACF;AAAA,EACF,EAAA,CAAA;AAEJ;AAEAjB,EAAiB,cAAc;AAE/B,MAAMmB,IAAgBC,EAAM,WAG1B,CAACC,GAAOC,MAENR,gBAAAA,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,OACE;AAAA,MACE,mBAAmB,GAAGf,CAAmB;AAAA,IAC3C;AAAA,IAGF,gCAACgB,GAAQ,EAAA,GAAGM,GAAO,eAAY,4BAA2B,KAAAC,GACxD,UAACR,gBAAAA,EAAAA,IAAA,OAAA,EAAI,WAAU,4CACb,gCAACS,GAAK,EAAA,IAAG,gBAAe,MAAM,IAAI,GACpC,EACF,CAAA;AAAA,EAAA;AAAA,CAGL;AAEDJ,EAAc,cAAc;"}

package/dist/components/DataTable/DataTable.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"),D=require("react"),s=require("../Table/Table.cjs.js"),f=require("../Elevation/Elevation.cjs.js"),_=require("../Tombstone/Tombstone.cjs.js"),q=require("../Icon/Icon.cjs.js");;/* empty css                   */function N(r){const{columns:x,data:l=[],loading:j=!1,tombstoneComponent:u,error:a=!1,name:d,onRowClick:m,emptyMessage:T="Data Unavailable",errorMessage:C,loadingRows:y=5,"data-testid":c}=r,g="sortableColumns"in r?r.sortableColumns:[],b="sortedBy"in r?r.sortedBy:void 0,p="sortDirection"in r?r.sortDirection:void 0,h="onSort"in r?r.onSort:void 0,o=D.useMemo(()=>x.filter(e=>!e.hidden),[x]),S=e=>{if(!h)return;const n=b===e.id&&p==="ASC"?"DESC":"ASC";h(e.id,n)},v=e=>b!==e?"none":p==="ASC"?"ascending":"descending";if(a){const e=typeof a=="string"?a:C||"An error occurred";return t.jsxRuntimeExports.jsx(E,{columns:o,message:e,name:d,testId:c,isError:!0})}return j?t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":c,"aria-busy":"true","aria-label":`Loading ${d}...`,children:t.jsxRuntimeExports.jsxs(s.Table,{name:d,children:[t.jsxRuntimeExports.jsx(s.Table.Header,{children:o.map(e=>t.jsxRuntimeExports.jsx(s.Table.Column,{id:e.id,children:e.header},e.id))}),t.jsxRuntimeExports.jsx(s.Table.Body,{children:Array.from({length:y}).map((e,i)=>t.jsxRuntimeExports.jsx(s.Table.Row,{children:o.map(n=>t.jsxRuntimeExports.jsx(s.Table.Cell,{children:u||t.jsxRuntimeExports.jsx(_.Tombstone,{height:"1rem",width:i%3===0?"80%":i%3===1?"60%":"90%"})},n.id))},`loading-${i}`))})]})}):!l||l.length===0?t.jsxRuntimeExports.jsx(E,{columns:o,message:T,name:d,testId:c}):t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":c,children:t.jsxRuntimeExports.jsxs(s.Table,{name:d,children:[t.jsxRuntimeExports.jsx(s.Table.Header,{children:o.map(e=>{const i=g.includes(e.id),n=v(e.id);return t.jsxRuntimeExports.jsx(s.Table.Column,{id:e.id,...i&&{"aria-sort":n},children:t.jsxRuntimeExports.jsxs("span",{className:"proton-DataTable__header-content",children:[e.header,i&&t.jsxRuntimeExports.jsx("button",{className:"proton-DataTable__sort-button",onClick:()=>S(e),"aria-label":`Sort by ${e.header}: ${n}`,type:"button",children:t.jsxRuntimeExports.jsx(q.Icon,{id:"chevron-up",size:12,color:n==="ascending"?"var(--proton-color__primary)":"currentColor"})})]})},e.id)})}),t.jsxRuntimeExports.jsx(s.Table.Body,{children:l.map((e,i)=>{const n=((e==null?void 0:e.id)||(e==null?void 0:e.key))??i;return t.jsxRuntimeExports.jsx(s.Table.Row,{onClick:m?()=>m(e):void 0,children:o.map(R=>t.jsxRuntimeExports.jsx(s.Table.Cell,{children:R.cell(e)},R.id))},n)})})]})})}const E=({columns:r,message:x,name:l,testId:j,isError:u=!1})=>t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":j,children:t.jsxRuntimeExports.jsxs(s.Table,{name:l,children:[t.jsxRuntimeExports.jsx(s.Table.Header,{children:r==null?void 0:r.map(a=>t.jsxRuntimeExports.jsx(s.Table.Column,{id:a.id,children:a.header},a.id))}),t.jsxRuntimeExports.jsx(s.Table.Body,{children:t.jsxRuntimeExports.jsx(s.Table.Row,{children:t.jsxRuntimeExports.jsx(s.Table.Cell,{colSpan:(r==null?void 0:r.length)||1,children:t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable__message-cell",role:u?"alert":"status","aria-live":"polite",children:t.jsxRuntimeExports.jsx(f.Elevation,{children:t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable__empty-cell",children:x})})})})})})]})});exports.DataTable=N;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../node_modules/react/jsx-runtime.cjs.js"),D=require("react"),s=require("../Table/Table.cjs.js"),f=require("../Elevation/Elevation.cjs.js"),_=require("../Tombstone/Tombstone.cjs.js"),q=require("../Icon/Icon.cjs.js");;/* empty css                   */function B(r){const{columns:x,data:l=[],loading:j=!1,tombstoneComponent:u,error:a=!1,name:d,onRowClick:m,emptyMessage:T="Data Unavailable",errorMessage:C,loadingRows:g=5,"data-testid":c}=r,y="sortableColumns"in r?r.sortableColumns:[],b="sortedBy"in r?r.sortedBy:void 0,p="sortDirection"in r?r.sortDirection:void 0,h="onSort"in r?r.onSort:void 0,o=D.useMemo(()=>x.filter(e=>!e.hidden),[x]),S=e=>{if(!h)return;const n=b===e.id&&p==="ASC"?"DESC":"ASC";h(e.id,n)},v=e=>b!==e?"none":p==="ASC"?"ascending":"descending";if(a){const e=typeof a=="string"?a:C||"An error occurred";return t.jsxRuntimeExports.jsx(E,{columns:o,message:e,name:d,testId:c,isError:!0})}return j?t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":c,"aria-busy":"true","aria-label":`Loading ${d}...`,children:t.jsxRuntimeExports.jsxs(s.Table,{name:d,children:[t.jsxRuntimeExports.jsx(s.Table.Header,{children:o.map(e=>t.jsxRuntimeExports.jsx(s.Table.Column,{id:e.id,children:e.header},e.id))}),t.jsxRuntimeExports.jsx(s.Table.Body,{children:Array.from({length:g}).map((e,i)=>t.jsxRuntimeExports.jsx(s.Table.Row,{children:o.map(n=>t.jsxRuntimeExports.jsx(s.Table.Cell,{children:u||t.jsxRuntimeExports.jsx(_.Tombstone,{height:"1rem",width:i%3===0?"80%":i%3===1?"60%":"90%"})},n.id))},`loading-${i}`))})]})}):!l||l.length===0?t.jsxRuntimeExports.jsx(E,{columns:o,message:T,name:d,testId:c}):t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":c,children:t.jsxRuntimeExports.jsxs(s.Table,{name:d,children:[t.jsxRuntimeExports.jsx(s.Table.Header,{children:o.map(e=>{const i=y.includes(e.id),n=v(e.id);return t.jsxRuntimeExports.jsx(s.Table.Column,{id:e.id,...i&&{"aria-sort":n},children:t.jsxRuntimeExports.jsxs("span",{className:"proton-DataTable__header-content",children:[e.header,i&&t.jsxRuntimeExports.jsx("button",{className:"proton-DataTable__sort-button",onClick:()=>S(e),"aria-label":`Sort by ${e.header}: ${n}`,type:"button",children:t.jsxRuntimeExports.jsx(q.Icon,{id:"chevron-up",size:12,color:n==="ascending"?"var(--proton-color__primary)":"currentColor"})})]})},e.id)})}),t.jsxRuntimeExports.jsx(s.Table.Body,{children:l.map((e,i)=>{const n=((e==null?void 0:e.id)||(e==null?void 0:e.key))??i;return t.jsxRuntimeExports.jsx(s.Table.Row,{onClick:m?()=>m(e):void 0,children:o.map(R=>t.jsxRuntimeExports.jsx(s.Table.Cell,{children:R.cell(e)},R.id))},n)})})]})})}const E=({columns:r,message:x,name:l,testId:j,isError:u=!1})=>t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable","data-testid":j,children:t.jsxRuntimeExports.jsxs(s.Table,{name:l,children:[t.jsxRuntimeExports.jsx(s.Table.Header,{children:r==null?void 0:r.map(a=>t.jsxRuntimeExports.jsx(s.Table.Column,{id:a.id,children:a.header},a.id))}),t.jsxRuntimeExports.jsx(s.Table.Body,{children:t.jsxRuntimeExports.jsx(s.Table.Row,{children:t.jsxRuntimeExports.jsx(s.Table.Cell,{colSpan:(r==null?void 0:r.length)||1,children:t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable__message-cell",role:u?"alert":"status","aria-live":"polite",children:t.jsxRuntimeExports.jsx(f.Elevation,{children:t.jsxRuntimeExports.jsx("div",{className:"proton-DataTable__empty-cell",children:x})})})})})})]})});exports.DataTable=B;
 //# sourceMappingURL=DataTable.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"DataTable.cjs.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\n\nimport { AriaAttributes, ReactNode, useMemo } from \"react\";\nimport { Table } from \"../Table/Table\";\nimport { Elevation } from \"../Elevation/Elevation\";\nimport { Tombstone } from \"../Tombstone/Tombstone\";\nimport { Icon } from \"../Icon/Icon\";\nimport \"./DataTable.css\";\n\nexport type SortDirection = \"ASC\" | \"DESC\";\n\ntype SortingConfig<T> =\n  | {\n      /** When sorting is enabled, all these props must be provided together. */\n      sortableColumns: string[];\n      sortedBy: string;\n      sortDirection: SortDirection;\n      onSort: (columnId: string, direction: SortDirection) => void;\n    }\n  | {\n      /** When no sorting is needed, none of these props should be provided */\n      sortableColumns?: never;\n      sortedBy?: never;\n      sortDirection?: never;\n      onSort?: never;\n    };\n\nexport interface DataTableColumn<T> {\n  /** id for the column */\n  id: string;\n  /** Header text or component */\n  header: ReactNode;\n  /** Function to render cell content from row data */\n  cell: (row: T) => ReactNode;\n  /** Whether this column should be hidden */\n  hidden?: boolean;\n}\n\ninterface BaseDataTableProps<T = any> {\n  /** Array of column definitions\n   * - {@link DataTableColumn}\n   */\n  columns: DataTableColumn<T>[];\n  /** Array of data objects to display. Can be empty array for loading/empty states */\n  data?: T[] | null;\n  /** Loading state */\n  loading?: boolean;\n  /** Tombstone component to use when loading */\n  tombstoneComponent?: ReactNode;\n  /** Error state */\n  error?: boolean | string;\n  /** Table name/caption for accessibility. This provides essential context for screen readers. */\n  name: string;\n  /** Callback when a row is clicked */\n  onRowClick?: (row: T) => void;\n  /** Custom empty state message */\n  emptyMessage?: string;\n  /** Custom error message */\n  errorMessage?: string;\n  /** Number of skeleton rows to show in loading state */\n  loadingRows?: number;\n  /** Test ID for testing purposes */\n  \"data-testid\"?: string;\n}\n\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig<T>;\n\n/**\n * DataTable is a declarative wrapper around the base Table component that provides:\n *\n * API:\n *  - {@link DataTableProps}\n *  - {@link SortingConfig}\n */\nexport function DataTable<T = any>(props: DataTableProps<T>) {\n  const {\n    columns,\n    data = [],\n    loading = false,\n    tombstoneComponent,\n    error = false,\n    name,\n    onRowClick,\n    emptyMessage = \"Data Unavailable\",\n    errorMessage,\n    loadingRows = 5,\n    \"data-testid\": testId,\n  } = props;\n\n  const sortableColumns =\n    \"sortableColumns\" in props ? props.sortableColumns : [];\n  const sortedBy = \"sortedBy\" in props ? props.sortedBy : undefined;\n  const sortDirection =\n    \"sortDirection\" in props ? props.sortDirection : undefined;\n  const onSort = \"onSort\" in props ? props.onSort : undefined;\n\n  const visibleColumns = useMemo(\n    () => columns.filter((col) => !col.hidden),\n    [columns]\n  );\n\n  const handleSortClick = (column: DataTableColumn<T>) => {\n    if (!onSort) return;\n\n    const isCurrentlySorted = sortedBy === column.id;\n    const newDirection =\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\n\n    onSort(column.id, newDirection);\n  };\n\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\n    if (sortedBy !== columnId) return \"none\";\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\n  };\n\n  if (error) {\n    const message =\n      typeof error === \"string\" ? error : errorMessage || \"An error occurred\";\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={message}\n        name={name}\n        testId={testId}\n        isError\n      />\n    );\n  }\n\n  if (loading) {\n    return (\n      <div\n        className=\"proton-DataTable\"\n        data-testid={testId}\n        aria-busy=\"true\"\n        aria-label={`Loading ${name}...`}\n      >\n        <Table name={name}>\n          <Table.Header>\n            {visibleColumns.map((column) => (\n              <Table.Column key={column.id} id={column.id}>\n                {column.header}\n              </Table.Column>\n            ))}\n          </Table.Header>\n          <Table.Body>\n            {Array.from({ length: loadingRows }).map((_, index) => (\n              <Table.Row key={`loading-${index}`}>\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>\n                    {tombstoneComponent || (\n                      <Tombstone\n                        height=\"1rem\"\n                        width={\n                          // cascading tombstone widths\n                          index % 3 === 0\n                            ? \"80%\"\n                            : index % 3 === 1\n                              ? \"60%\"\n                              : \"90%\"\n                        }\n                      />\n                    )}\n                  </Table.Cell>\n                ))}\n              </Table.Row>\n            ))}\n          </Table.Body>\n        </Table>\n      </div>\n    );\n  }\n\n  if (!data || data.length === 0) {\n    return (\n      <EmptyState\n        columns={visibleColumns}\n        message={emptyMessage}\n        name={name}\n        testId={testId}\n      />\n    );\n  }\n\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {visibleColumns.map((column) => {\n            const isSortable = sortableColumns.includes(column.id);\n            const sortState = getSortState(column.id);\n\n            return (\n              <Table.Column\n                key={column.id}\n                id={column.id}\n                {...(isSortable && { \"aria-sort\": sortState })}\n              >\n                <span className=\"proton-DataTable__header-content\">\n                  {column.header}\n                  {isSortable && (\n                    <button\n                      className=\"proton-DataTable__sort-button\"\n                      onClick={() => handleSortClick(column)}\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\n                      type=\"button\"\n                    >\n                      <Icon\n                        id={\"chevron-up\"}\n                        size={12}\n                        color={\n                          sortState === \"ascending\"\n                            ? \"var(--proton-color__primary)\"\n                            : \"currentColor\"\n                        }\n                      />\n                    </button>\n                  )}\n                </span>\n              </Table.Column>\n            );\n          })}\n        </Table.Header>\n        <Table.Body>\n          {data.map((row, index) => {\n            // Generate a key from the row data or use index as fallback\n            const rowKey = ((row as any)?.id || (row as any)?.key) ?? index;\n\n            return (\n              <Table.Row\n                key={rowKey}\n                onClick={onRowClick ? () => onRowClick(row) : undefined}\n              >\n                {visibleColumns.map((column) => (\n                  <Table.Cell key={column.id}>{column.cell(row)}</Table.Cell>\n                ))}\n              </Table.Row>\n            );\n          })}\n        </Table.Body>\n      </Table>\n    </div>\n  );\n}\n\nconst EmptyState = ({\n  columns,\n  message,\n  name,\n  testId,\n  isError = false,\n}: Partial<DataTableProps> & {\n  testId?: string;\n  message: string;\n  isError?: boolean;\n}) => {\n  return (\n    <div className=\"proton-DataTable\" data-testid={testId}>\n      <Table name={name}>\n        <Table.Header>\n          {columns?.map((column) => (\n            <Table.Column key={column.id} id={column.id}>\n              {column.header}\n            </Table.Column>\n          ))}\n        </Table.Header>\n        <Table.Body>\n          <Table.Row>\n            <Table.Cell colSpan={columns?.length || 1}>\n              <div\n                className=\"proton-DataTable__message-cell\"\n                role={isError ? \"alert\" : \"status\"}\n                aria-live=\"polite\"\n              >\n                <Elevation>\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\n                </Elevation>\n              </div>\n            </Table.Cell>\n          </Table.Row>\n        </Table.Body>\n      </Table>\n    </div>\n  );\n};\n"],"names":["DataTable","props","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","useMemo","col","handleSortClick","column","newDirection","getSortState","columnId","message","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","Icon","row","rowKey","isError","Elevation"],"mappings":"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"}
+{"version":3,"file":"DataTable.cjs.js","sources":["../../../src/components/DataTable/DataTable.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { AriaAttributes, ReactNode, useMemo } from \"react\";\r\nimport { Table } from \"../Table/Table\";\r\nimport { Elevation } from \"../Elevation/Elevation\";\r\nimport { Tombstone } from \"../Tombstone/Tombstone\";\r\nimport { Icon } from \"../Icon/Icon\";\r\nimport \"./DataTable.css\";\r\n\r\nexport type SortDirection = \"ASC\" | \"DESC\";\r\n\r\ntype SortingConfig<T> =\r\n  | {\r\n      /** When sorting is enabled, all these props must be provided together. */\r\n      sortableColumns: string[];\r\n      sortedBy: string;\r\n      sortDirection: SortDirection;\r\n      onSort: (columnId: string, direction: SortDirection) => void;\r\n    }\r\n  | {\r\n      /** When no sorting is needed, none of these props should be provided */\r\n      sortableColumns?: never;\r\n      sortedBy?: never;\r\n      sortDirection?: never;\r\n      onSort?: never;\r\n    };\r\n\r\nexport interface DataTableColumn<T> {\r\n  /** id for the column */\r\n  id: string;\r\n  /** Header text or component */\r\n  header: ReactNode;\r\n  /** Function to render cell content from row data */\r\n  cell: (row: T) => ReactNode;\r\n  /** Whether this column should be hidden */\r\n  hidden?: boolean;\r\n}\r\n\r\ninterface BaseDataTableProps<T = any> {\r\n  /** Array of column definitions\r\n   * - {@link DataTableColumn}\r\n   */\r\n  columns: DataTableColumn<T>[];\r\n  /** Array of data objects to display. Can be empty array for loading/empty states */\r\n  data?: T[] | null;\r\n  /** Loading state */\r\n  loading?: boolean;\r\n  /** Tombstone component to use when loading */\r\n  tombstoneComponent?: ReactNode;\r\n  /** Error state */\r\n  error?: boolean | string;\r\n  /** Table name/caption for accessibility. This provides essential context for screen readers. */\r\n  name: string;\r\n  /** Callback when a row is clicked */\r\n  onRowClick?: (row: T) => void;\r\n  /** Custom empty state message */\r\n  emptyMessage?: string;\r\n  /** Custom error message */\r\n  errorMessage?: string;\r\n  /** Number of skeleton rows to show in loading state */\r\n  loadingRows?: number;\r\n  /** Test ID for testing purposes */\r\n  \"data-testid\"?: string;\r\n}\r\n\r\nexport type DataTableProps<T = any> = BaseDataTableProps<T> & SortingConfig<T>;\r\n\r\n/**\r\n * DataTable is a declarative wrapper around the base Table component that provides:\r\n *\r\n * API:\r\n *  - {@link DataTableProps}\r\n *  - {@link SortingConfig}\r\n */\r\nexport function DataTable<T = any>(props: DataTableProps<T>) {\r\n  const {\r\n    columns,\r\n    data = [],\r\n    loading = false,\r\n    tombstoneComponent,\r\n    error = false,\r\n    name,\r\n    onRowClick,\r\n    emptyMessage = \"Data Unavailable\",\r\n    errorMessage,\r\n    loadingRows = 5,\r\n    \"data-testid\": testId,\r\n  } = props;\r\n\r\n  const sortableColumns =\r\n    \"sortableColumns\" in props ? props.sortableColumns : [];\r\n  const sortedBy = \"sortedBy\" in props ? props.sortedBy : undefined;\r\n  const sortDirection =\r\n    \"sortDirection\" in props ? props.sortDirection : undefined;\r\n  const onSort = \"onSort\" in props ? props.onSort : undefined;\r\n\r\n  const visibleColumns = useMemo(\r\n    () => columns.filter((col) => !col.hidden),\r\n    [columns]\r\n  );\r\n\r\n  const handleSortClick = (column: DataTableColumn<T>) => {\r\n    if (!onSort) return;\r\n\r\n    const isCurrentlySorted = sortedBy === column.id;\r\n    const newDirection =\r\n      isCurrentlySorted && sortDirection === \"ASC\" ? \"DESC\" : \"ASC\";\r\n\r\n    onSort(column.id, newDirection);\r\n  };\r\n\r\n  const getSortState = (columnId: string): AriaAttributes[\"aria-sort\"] => {\r\n    if (sortedBy !== columnId) return \"none\";\r\n    return sortDirection === \"ASC\" ? \"ascending\" : \"descending\";\r\n  };\r\n\r\n  if (error) {\r\n    const message =\r\n      typeof error === \"string\" ? error : errorMessage || \"An error occurred\";\r\n    return (\r\n      <EmptyState\r\n        columns={visibleColumns}\r\n        message={message}\r\n        name={name}\r\n        testId={testId}\r\n        isError\r\n      />\r\n    );\r\n  }\r\n\r\n  if (loading) {\r\n    return (\r\n      <div\r\n        className=\"proton-DataTable\"\r\n        data-testid={testId}\r\n        aria-busy=\"true\"\r\n        aria-label={`Loading ${name}...`}\r\n      >\r\n        <Table name={name}>\r\n          <Table.Header>\r\n            {visibleColumns.map((column) => (\r\n              <Table.Column key={column.id} id={column.id}>\r\n                {column.header}\r\n              </Table.Column>\r\n            ))}\r\n          </Table.Header>\r\n          <Table.Body>\r\n            {Array.from({ length: loadingRows }).map((_, index) => (\r\n              <Table.Row key={`loading-${index}`}>\r\n                {visibleColumns.map((column) => (\r\n                  <Table.Cell key={column.id}>\r\n                    {tombstoneComponent || (\r\n                      <Tombstone\r\n                        height=\"1rem\"\r\n                        width={\r\n                          // cascading tombstone widths\r\n                          index % 3 === 0\r\n                            ? \"80%\"\r\n                            : index % 3 === 1\r\n                              ? \"60%\"\r\n                              : \"90%\"\r\n                        }\r\n                      />\r\n                    )}\r\n                  </Table.Cell>\r\n                ))}\r\n              </Table.Row>\r\n            ))}\r\n          </Table.Body>\r\n        </Table>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  if (!data || data.length === 0) {\r\n    return (\r\n      <EmptyState\r\n        columns={visibleColumns}\r\n        message={emptyMessage}\r\n        name={name}\r\n        testId={testId}\r\n      />\r\n    );\r\n  }\r\n\r\n  return (\r\n    <div className=\"proton-DataTable\" data-testid={testId}>\r\n      <Table name={name}>\r\n        <Table.Header>\r\n          {visibleColumns.map((column) => {\r\n            const isSortable = sortableColumns.includes(column.id);\r\n            const sortState = getSortState(column.id);\r\n\r\n            return (\r\n              <Table.Column\r\n                key={column.id}\r\n                id={column.id}\r\n                {...(isSortable && { \"aria-sort\": sortState })}\r\n              >\r\n                <span className=\"proton-DataTable__header-content\">\r\n                  {column.header}\r\n                  {isSortable && (\r\n                    <button\r\n                      className=\"proton-DataTable__sort-button\"\r\n                      onClick={() => handleSortClick(column)}\r\n                      aria-label={`Sort by ${column.header}: ${sortState}`}\r\n                      type=\"button\"\r\n                    >\r\n                      <Icon\r\n                        id={\"chevron-up\"}\r\n                        size={12}\r\n                        color={\r\n                          sortState === \"ascending\"\r\n                            ? \"var(--proton-color__primary)\"\r\n                            : \"currentColor\"\r\n                        }\r\n                      />\r\n                    </button>\r\n                  )}\r\n                </span>\r\n              </Table.Column>\r\n            );\r\n          })}\r\n        </Table.Header>\r\n        <Table.Body>\r\n          {data.map((row, index) => {\r\n            // Generate a key from the row data or use index as fallback\r\n            const rowKey = ((row as any)?.id || (row as any)?.key) ?? index;\r\n\r\n            return (\r\n              <Table.Row\r\n                key={rowKey}\r\n                onClick={onRowClick ? () => onRowClick(row) : undefined}\r\n              >\r\n                {visibleColumns.map((column) => (\r\n                  <Table.Cell key={column.id}>{column.cell(row)}</Table.Cell>\r\n                ))}\r\n              </Table.Row>\r\n            );\r\n          })}\r\n        </Table.Body>\r\n      </Table>\r\n    </div>\r\n  );\r\n}\r\n\r\nconst EmptyState = ({\r\n  columns,\r\n  message,\r\n  name,\r\n  testId,\r\n  isError = false,\r\n}: Partial<DataTableProps> & {\r\n  testId?: string;\r\n  message: string;\r\n  isError?: boolean;\r\n}) => {\r\n  return (\r\n    <div className=\"proton-DataTable\" data-testid={testId}>\r\n      <Table name={name}>\r\n        <Table.Header>\r\n          {columns?.map((column) => (\r\n            <Table.Column key={column.id} id={column.id}>\r\n              {column.header}\r\n            </Table.Column>\r\n          ))}\r\n        </Table.Header>\r\n        <Table.Body>\r\n          <Table.Row>\r\n            <Table.Cell colSpan={columns?.length || 1}>\r\n              <div\r\n                className=\"proton-DataTable__message-cell\"\r\n                role={isError ? \"alert\" : \"status\"}\r\n                aria-live=\"polite\"\r\n              >\r\n                <Elevation>\r\n                  <div className=\"proton-DataTable__empty-cell\">{message}</div>\r\n                </Elevation>\r\n              </div>\r\n            </Table.Cell>\r\n          </Table.Row>\r\n        </Table.Body>\r\n      </Table>\r\n    </div>\r\n  );\r\n};\r\n"],"names":["DataTable","props","columns","data","loading","tombstoneComponent","error","name","onRowClick","emptyMessage","errorMessage","loadingRows","testId","sortableColumns","sortedBy","sortDirection","onSort","visibleColumns","useMemo","col","handleSortClick","column","newDirection","getSortState","columnId","message","jsx","EmptyState","jsxs","Table","_","index","Tombstone","isSortable","sortState","Icon","row","rowKey","isError","Elevation"],"mappings":"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"}