npm - @protonradio/proton-ui - Versions diffs - 0.11.11 → 0.11.13 - Mend

@protonradio/proton-ui 0.11.11 → 0.11.13

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (106) hide show

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

	@@ -1 +1 @@
1	- {"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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"}
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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"}

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

	@@ -1 +1 @@
1	- {"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"}
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"}

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

	@@ -1 +1 @@
1	- {"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;"}
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;"}

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

	@@ -1 +1 @@
1	- {"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"}
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"}

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

	@@ -1 +1 @@
1	- {"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;"}
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;"}

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

	@@ -1 +1 @@
1	- {"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"}
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"}

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

	@@ -1 +1 @@
1	- {"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;"}
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;"}

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

	@@ -1 +1 @@
1	- {"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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"}
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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"}

package/dist/components/DataTable/DataTable.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DataTable.es.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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"}
1	+ {"version":3,"file":"DataTable.es.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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"}

package/dist/components/Dialog/Dialog.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.cjs.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useRef } from \"react\";\r\nimport { type AriaDialogProps, useDialog } from \"@react-aria/dialog\";\r\n\r\nimport \"./Dialog.css\";\r\n\r\ninterface DialogProps extends AriaDialogProps {\r\n title?: React.ReactNode;\r\n children: React.ReactNode;\r\n}\r\n\r\n/*\r\n Intended use in overlay containers such as modals or popovers.\r\n \r\n API:\r\n * - {@link DialogProps}\r\n * - extends {@link AriaDialogProps}\r\n */\r\nexport function Dialog({ title, children, ...props }: DialogProps) {\r\n let ref = useRef(null);\r\n let { dialogProps, titleProps } = useDialog(props, ref);\r\n\r\n return (\r\n <div {...dialogProps} ref={ref} className=\"proton-Dialog\">\r\n {title && (\r\n <h3 {...titleProps} className=\"proton-Dialog__header\">\r\n {title}\r\n </h3>\r\n )}\r\n {children}\r\n </div>\r\n );\r\n}\r\n"],"names":["Dialog","title","children","props","ref","useRef","dialogProps","titleProps","useDialog"],"mappings":"0QAmBO,SAASA,EAAO,CAAE,MAAAC,EAAO,SAAAC,EAAU,GAAGC,GAAsB,CAC7D,IAAAC,EAAMC,SAAO,IAAI,EACjB,CAAE,YAAAC,EAAa,WAAAC,CAAA,EAAeC,EAAAA,UAAUL,EAAOC,CAAG,EAEtD,gCACG,MAAK,CAAA,GAAGE,EAAa,IAAAF,EAAU,UAAU,gBACvC,SAAA,CAAAH,2BACE,KAAI,CAAA,GAAGM,EAAY,UAAU,wBAC3B,SACHN,EAAA,EAEDC,CACH,CAAA,CAAA,CAEJ"}
1	+ {"version":3,"file":"Dialog.cjs.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { type AriaDialogProps, useDialog } from \"@react-aria/dialog\";\n\nimport \"./Dialog.css\";\n\ninterface DialogProps extends AriaDialogProps {\n title?: React.ReactNode;\n children: React.ReactNode;\n}\n\n/*\n Intended use in overlay containers such as modals or popovers.\n \n API:\n * - {@link DialogProps}\n * - extends {@link AriaDialogProps}\n */\nexport function Dialog({ title, children, ...props }: DialogProps) {\n let ref = useRef(null);\n let { dialogProps, titleProps } = useDialog(props, ref);\n\n return (\n <div {...dialogProps} ref={ref} className=\"proton-Dialog\">\n {title && (\n <h3 {...titleProps} className=\"proton-Dialog__header\">\n {title}\n </h3>\n )}\n {children}\n </div>\n );\n}\n"],"names":["Dialog","title","children","props","ref","useRef","dialogProps","titleProps","useDialog"],"mappings":"0QAmBO,SAASA,EAAO,CAAE,MAAAC,EAAO,SAAAC,EAAU,GAAGC,GAAsB,CAC7D,IAAAC,EAAMC,SAAO,IAAI,EACjB,CAAE,YAAAC,EAAa,WAAAC,CAAA,EAAeC,EAAAA,UAAUL,EAAOC,CAAG,EAEtD,gCACG,MAAK,CAAA,GAAGE,EAAa,IAAAF,EAAU,UAAU,gBACvC,SAAA,CAAAH,2BACE,KAAI,CAAA,GAAGM,EAAY,UAAU,wBAC3B,SACHN,EAAA,EAEDC,CACH,CAAA,CAAA,CAEJ"}

package/dist/components/Dialog/Dialog.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.es.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useRef } from \"react\";\r\nimport { type AriaDialogProps, useDialog } from \"@react-aria/dialog\";\r\n\r\nimport \"./Dialog.css\";\r\n\r\ninterface DialogProps extends AriaDialogProps {\r\n title?: React.ReactNode;\r\n children: React.ReactNode;\r\n}\r\n\r\n/*\r\n Intended use in overlay containers such as modals or popovers.\r\n \r\n API:\r\n * - {@link DialogProps}\r\n * - extends {@link AriaDialogProps}\r\n */\r\nexport function Dialog({ title, children, ...props }: DialogProps) {\r\n let ref = useRef(null);\r\n let { dialogProps, titleProps } = useDialog(props, ref);\r\n\r\n return (\r\n <div {...dialogProps} ref={ref} className=\"proton-Dialog\">\r\n {title && (\r\n <h3 {...titleProps} className=\"proton-Dialog__header\">\r\n {title}\r\n </h3>\r\n )}\r\n {children}\r\n </div>\r\n );\r\n}\r\n"],"names":["Dialog","title","children","props","ref","useRef","dialogProps","titleProps","useDialog"],"mappings":";;;;AAmBO,SAASA,EAAO,EAAE,OAAAC,GAAO,UAAAC,GAAU,GAAGC,KAAsB;AAC7D,MAAAC,IAAMC,EAAO,IAAI,GACjB,EAAE,aAAAC,GAAa,YAAAC,EAAA,IAAeC,EAAUL,GAAOC,CAAG;AAEtD,gCACG,OAAK,EAAA,GAAGE,GAAa,KAAAF,GAAU,WAAU,iBACvC,UAAA;AAAA,IAAAH,2BACE,MAAI,EAAA,GAAGM,GAAY,WAAU,yBAC3B,UACHN,GAAA;AAAA,IAEDC;AAAA,EACH,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"Dialog.es.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRef } from \"react\";\nimport { type AriaDialogProps, useDialog } from \"@react-aria/dialog\";\n\nimport \"./Dialog.css\";\n\ninterface DialogProps extends AriaDialogProps {\n title?: React.ReactNode;\n children: React.ReactNode;\n}\n\n/*\n Intended use in overlay containers such as modals or popovers.\n \n API:\n * - {@link DialogProps}\n * - extends {@link AriaDialogProps}\n */\nexport function Dialog({ title, children, ...props }: DialogProps) {\n let ref = useRef(null);\n let { dialogProps, titleProps } = useDialog(props, ref);\n\n return (\n <div {...dialogProps} ref={ref} className=\"proton-Dialog\">\n {title && (\n <h3 {...titleProps} className=\"proton-Dialog__header\">\n {title}\n </h3>\n )}\n {children}\n </div>\n );\n}\n"],"names":["Dialog","title","children","props","ref","useRef","dialogProps","titleProps","useDialog"],"mappings":";;;;AAmBO,SAASA,EAAO,EAAE,OAAAC,GAAO,UAAAC,GAAU,GAAGC,KAAsB;AAC7D,MAAAC,IAAMC,EAAO,IAAI,GACjB,EAAE,aAAAC,GAAa,YAAAC,EAAA,IAAeC,EAAUL,GAAOC,CAAG;AAEtD,gCACG,OAAK,EAAA,GAAGE,GAAa,KAAAF,GAAU,WAAU,iBACvC,UAAA;AAAA,IAAAH,2BACE,MAAI,EAAA,GAAGM,GAAY,WAAU,yBAC3B,UACHN,GAAA;AAAA,IAEDC;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/components/Elevation/Elevation.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Elevation.cjs.js","sources":["../../../src/components/Elevation/Elevation.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode } from \"react\";\r\nimport { transparentize, mix } from \"color2k\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport \"./Elevation.css\";\r\n\r\nexport interface ElevationProps {\r\n /*\r\n The content to be displayed within the elevation.\r\n /\r\n children?: ReactNode;\r\n /\r\n The data-testid attribute for testing purposes.\r\n /\r\n \"data-testid\"?: string;\r\n /\r\n Whether the elevation should have a background gradient.\r\n * @important only works in custom dark mode\r\n * @default false\r\n /\r\n hasPrimaryGradient?: boolean;\r\n}\r\n\r\n/\r\n Elevation component creates a visual elevation effect using the theme-aware background color.\r\n \r\n This component is designed to be used as a visual layer that sits on top of other content\r\n * to create a sense of depth or hierarchy in the UI. It uses the `--proton-control__background-color-light`\r\n * CSS variable which is theme-aware and will adapt to light, dark themes.\r\n \r\n API:\r\n * - {@link ElevationProps}\r\n */\r\nexport const Elevation = ({\r\n children,\r\n hasPrimaryGradient = false,\r\n \"data-testid\": dataTestId,\r\n}: ElevationProps) => {\r\n const { hasPalette, palette, style } = useTheme();\r\n\r\n const defaultBg = style[\"--proton-control__background-color-light\"];\r\n let primaryDark = defaultBg;\r\n let secondaryDark = transparentize(defaultBg, 0.01);\r\n\r\n if (hasPalette) {\r\n primaryDark = transparentize(defaultBg, 0.1);\r\n secondaryDark = transparentize(defaultBg, 0.12);\r\n if (hasPrimaryGradient) {\r\n const basePrimary = transparentize(palette.PRIMARY.MEDIUM_LIGHT, 0.88);\r\n const baseSecondary = transparentize(palette.PRIMARY.LIGHT, 0.84);\r\n primaryDark = mix(primaryDark, basePrimary, 0.15);\r\n secondaryDark = mix(secondaryDark, baseSecondary, 0.15);\r\n }\r\n }\r\n\r\n return (\r\n <div\r\n className=\"proton-Elevation\"\r\n data-testid={dataTestId}\r\n role=\"presentation\"\r\n aria-label=\"Elevated content area\"\r\n style={{\r\n background: `linear-gradient(to top left, ${primaryDark}, ${secondaryDark})`,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n );\r\n};\r\n"],"names":["Elevation","children","hasPrimaryGradient","dataTestId","hasPalette","palette","style","useTheme","defaultBg","primaryDark","secondaryDark","transparentize","basePrimary","baseSecondary","mix","jsx"],"mappings":"kSAkCO,MAAMA,EAAY,CAAC,CACxB,SAAAC,EACA,mBAAAC,EAAqB,GACrB,cAAeC,CACjB,IAAsB,CACpB,KAAM,CAAE,WAAAC,EAAY,QAAAC,EAAS,MAAAC,GAAUC,EAAS,SAAA,EAE1CC,EAAYF,EAAM,0CAA0C,EAClE,IAAIG,EAAcD,EACdE,EAAgBC,EAAAA,eAAeH,EAAW,GAAI,EAElD,GAAIJ,IACYK,EAAAE,EAAA,eAAeH,EAAW,EAAG,EAC3BE,EAAAC,EAAA,eAAeH,EAAW,GAAI,EAC1CN,GAAoB,CACtB,MAAMU,EAAcD,EAAAA,eAAeN,EAAQ,QAAQ,aAAc,GAAI,EAC/DQ,EAAgBF,EAAAA,eAAeN,EAAQ,QAAQ,MAAO,GAAI,EAClDI,EAAAK,EAAAA,IAAIL,EAAaG,EAAa,GAAI,EAChCF,EAAAI,EAAAA,IAAIJ,EAAeG,EAAe,GAAI,CACxD,CAIA,OAAAE,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,mBACV,cAAaZ,EACb,KAAK,eACL,aAAW,wBACX,MAAO,CACL,WAAY,gCAAgCM,CAAW,KAAKC,CAAa,GAC3E,EAEC,SAAAT,CAAA,CAAA,CAGP"}
1	+ {"version":3,"file":"Elevation.cjs.js","sources":["../../../src/components/Elevation/Elevation.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { transparentize, mix } from \"color2k\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Elevation.css\";\n\nexport interface ElevationProps {\n /*\n The content to be displayed within the elevation.\n /\n children?: ReactNode;\n /\n The data-testid attribute for testing purposes.\n /\n \"data-testid\"?: string;\n /\n Whether the elevation should have a background gradient.\n * @important only works in custom dark mode\n * @default false\n /\n hasPrimaryGradient?: boolean;\n}\n\n/\n Elevation component creates a visual elevation effect using the theme-aware background color.\n \n This component is designed to be used as a visual layer that sits on top of other content\n * to create a sense of depth or hierarchy in the UI. It uses the `--proton-control__background-color-light`\n * CSS variable which is theme-aware and will adapt to light, dark themes.\n \n API:\n * - {@link ElevationProps}\n */\nexport const Elevation = ({\n children,\n hasPrimaryGradient = false,\n \"data-testid\": dataTestId,\n}: ElevationProps) => {\n const { hasPalette, palette, style } = useTheme();\n\n const defaultBg = style[\"--proton-control__background-color-light\"];\n let primaryDark = defaultBg;\n let secondaryDark = transparentize(defaultBg, 0.01);\n\n if (hasPalette) {\n primaryDark = transparentize(defaultBg, 0.1);\n secondaryDark = transparentize(defaultBg, 0.12);\n if (hasPrimaryGradient) {\n const basePrimary = transparentize(palette.PRIMARY.MEDIUM_LIGHT, 0.88);\n const baseSecondary = transparentize(palette.PRIMARY.LIGHT, 0.84);\n primaryDark = mix(primaryDark, basePrimary, 0.15);\n secondaryDark = mix(secondaryDark, baseSecondary, 0.15);\n }\n }\n\n return (\n <div\n className=\"proton-Elevation\"\n data-testid={dataTestId}\n role=\"presentation\"\n aria-label=\"Elevated content area\"\n style={{\n background: `linear-gradient(to top left, ${primaryDark}, ${secondaryDark})`,\n }}\n >\n {children}\n </div>\n );\n};\n"],"names":["Elevation","children","hasPrimaryGradient","dataTestId","hasPalette","palette","style","useTheme","defaultBg","primaryDark","secondaryDark","transparentize","basePrimary","baseSecondary","mix","jsx"],"mappings":"kSAkCO,MAAMA,EAAY,CAAC,CACxB,SAAAC,EACA,mBAAAC,EAAqB,GACrB,cAAeC,CACjB,IAAsB,CACpB,KAAM,CAAE,WAAAC,EAAY,QAAAC,EAAS,MAAAC,GAAUC,EAAS,SAAA,EAE1CC,EAAYF,EAAM,0CAA0C,EAClE,IAAIG,EAAcD,EACdE,EAAgBC,EAAAA,eAAeH,EAAW,GAAI,EAElD,GAAIJ,IACYK,EAAAE,EAAA,eAAeH,EAAW,EAAG,EAC3BE,EAAAC,EAAA,eAAeH,EAAW,GAAI,EAC1CN,GAAoB,CACtB,MAAMU,EAAcD,EAAAA,eAAeN,EAAQ,QAAQ,aAAc,GAAI,EAC/DQ,EAAgBF,EAAAA,eAAeN,EAAQ,QAAQ,MAAO,GAAI,EAClDI,EAAAK,EAAAA,IAAIL,EAAaG,EAAa,GAAI,EAChCF,EAAAI,EAAAA,IAAIJ,EAAeG,EAAe,GAAI,CACxD,CAIA,OAAAE,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,mBACV,cAAaZ,EACb,KAAK,eACL,aAAW,wBACX,MAAO,CACL,WAAY,gCAAgCM,CAAW,KAAKC,CAAa,GAC3E,EAEC,SAAAT,CAAA,CAAA,CAGP"}

package/dist/components/Elevation/Elevation.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Elevation.es.js","sources":["../../../src/components/Elevation/Elevation.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { ReactNode } from \"react\";\r\nimport { transparentize, mix } from \"color2k\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport \"./Elevation.css\";\r\n\r\nexport interface ElevationProps {\r\n /*\r\n The content to be displayed within the elevation.\r\n /\r\n children?: ReactNode;\r\n /\r\n The data-testid attribute for testing purposes.\r\n /\r\n \"data-testid\"?: string;\r\n /\r\n Whether the elevation should have a background gradient.\r\n * @important only works in custom dark mode\r\n * @default false\r\n /\r\n hasPrimaryGradient?: boolean;\r\n}\r\n\r\n/\r\n Elevation component creates a visual elevation effect using the theme-aware background color.\r\n \r\n This component is designed to be used as a visual layer that sits on top of other content\r\n * to create a sense of depth or hierarchy in the UI. It uses the `--proton-control__background-color-light`\r\n * CSS variable which is theme-aware and will adapt to light, dark themes.\r\n \r\n API:\r\n * - {@link ElevationProps}\r\n */\r\nexport const Elevation = ({\r\n children,\r\n hasPrimaryGradient = false,\r\n \"data-testid\": dataTestId,\r\n}: ElevationProps) => {\r\n const { hasPalette, palette, style } = useTheme();\r\n\r\n const defaultBg = style[\"--proton-control__background-color-light\"];\r\n let primaryDark = defaultBg;\r\n let secondaryDark = transparentize(defaultBg, 0.01);\r\n\r\n if (hasPalette) {\r\n primaryDark = transparentize(defaultBg, 0.1);\r\n secondaryDark = transparentize(defaultBg, 0.12);\r\n if (hasPrimaryGradient) {\r\n const basePrimary = transparentize(palette.PRIMARY.MEDIUM_LIGHT, 0.88);\r\n const baseSecondary = transparentize(palette.PRIMARY.LIGHT, 0.84);\r\n primaryDark = mix(primaryDark, basePrimary, 0.15);\r\n secondaryDark = mix(secondaryDark, baseSecondary, 0.15);\r\n }\r\n }\r\n\r\n return (\r\n <div\r\n className=\"proton-Elevation\"\r\n data-testid={dataTestId}\r\n role=\"presentation\"\r\n aria-label=\"Elevated content area\"\r\n style={{\r\n background: `linear-gradient(to top left, ${primaryDark}, ${secondaryDark})`,\r\n }}\r\n >\r\n {children}\r\n </div>\r\n );\r\n};\r\n"],"names":["Elevation","children","hasPrimaryGradient","dataTestId","hasPalette","palette","style","useTheme","defaultBg","primaryDark","secondaryDark","transparentize","basePrimary","baseSecondary","mix","jsx"],"mappings":";;;;AAkCO,MAAMA,IAAY,CAAC;AAAA,EACxB,UAAAC;AAAA,EACA,oBAAAC,IAAqB;AAAA,EACrB,eAAeC;AACjB,MAAsB;AACpB,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,OAAAC,MAAUC,EAAS,GAE1CC,IAAYF,EAAM,0CAA0C;AAClE,MAAIG,IAAcD,GACdE,IAAgBC,EAAeH,GAAW,IAAI;AAElD,MAAIJ,MACYK,IAAAE,EAAeH,GAAW,GAAG,GAC3BE,IAAAC,EAAeH,GAAW,IAAI,GAC1CN,IAAoB;AACtB,UAAMU,IAAcD,EAAeN,EAAQ,QAAQ,cAAc,IAAI,GAC/DQ,IAAgBF,EAAeN,EAAQ,QAAQ,OAAO,IAAI;AAClD,IAAAI,IAAAK,EAAIL,GAAaG,GAAa,IAAI,GAChCF,IAAAI,EAAIJ,GAAeG,GAAe,IAAI;AAAA,EACxD;AAIA,SAAAE,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAaZ;AAAA,MACb,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,QACL,YAAY,gCAAgCM,CAAW,KAAKC,CAAa;AAAA,MAC3E;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGP;"}
1	+ {"version":3,"file":"Elevation.es.js","sources":["../../../src/components/Elevation/Elevation.tsx"],"sourcesContent":["\"use client\";\n\nimport { ReactNode } from \"react\";\nimport { transparentize, mix } from \"color2k\";\nimport { useTheme } from \"../ThemeProvider\";\nimport \"./Elevation.css\";\n\nexport interface ElevationProps {\n /*\n The content to be displayed within the elevation.\n /\n children?: ReactNode;\n /\n The data-testid attribute for testing purposes.\n /\n \"data-testid\"?: string;\n /\n Whether the elevation should have a background gradient.\n * @important only works in custom dark mode\n * @default false\n /\n hasPrimaryGradient?: boolean;\n}\n\n/\n Elevation component creates a visual elevation effect using the theme-aware background color.\n \n This component is designed to be used as a visual layer that sits on top of other content\n * to create a sense of depth or hierarchy in the UI. It uses the `--proton-control__background-color-light`\n * CSS variable which is theme-aware and will adapt to light, dark themes.\n \n API:\n * - {@link ElevationProps}\n */\nexport const Elevation = ({\n children,\n hasPrimaryGradient = false,\n \"data-testid\": dataTestId,\n}: ElevationProps) => {\n const { hasPalette, palette, style } = useTheme();\n\n const defaultBg = style[\"--proton-control__background-color-light\"];\n let primaryDark = defaultBg;\n let secondaryDark = transparentize(defaultBg, 0.01);\n\n if (hasPalette) {\n primaryDark = transparentize(defaultBg, 0.1);\n secondaryDark = transparentize(defaultBg, 0.12);\n if (hasPrimaryGradient) {\n const basePrimary = transparentize(palette.PRIMARY.MEDIUM_LIGHT, 0.88);\n const baseSecondary = transparentize(palette.PRIMARY.LIGHT, 0.84);\n primaryDark = mix(primaryDark, basePrimary, 0.15);\n secondaryDark = mix(secondaryDark, baseSecondary, 0.15);\n }\n }\n\n return (\n <div\n className=\"proton-Elevation\"\n data-testid={dataTestId}\n role=\"presentation\"\n aria-label=\"Elevated content area\"\n style={{\n background: `linear-gradient(to top left, ${primaryDark}, ${secondaryDark})`,\n }}\n >\n {children}\n </div>\n );\n};\n"],"names":["Elevation","children","hasPrimaryGradient","dataTestId","hasPalette","palette","style","useTheme","defaultBg","primaryDark","secondaryDark","transparentize","basePrimary","baseSecondary","mix","jsx"],"mappings":";;;;AAkCO,MAAMA,IAAY,CAAC;AAAA,EACxB,UAAAC;AAAA,EACA,oBAAAC,IAAqB;AAAA,EACrB,eAAeC;AACjB,MAAsB;AACpB,QAAM,EAAE,YAAAC,GAAY,SAAAC,GAAS,OAAAC,MAAUC,EAAS,GAE1CC,IAAYF,EAAM,0CAA0C;AAClE,MAAIG,IAAcD,GACdE,IAAgBC,EAAeH,GAAW,IAAI;AAElD,MAAIJ,MACYK,IAAAE,EAAeH,GAAW,GAAG,GAC3BE,IAAAC,EAAeH,GAAW,IAAI,GAC1CN,IAAoB;AACtB,UAAMU,IAAcD,EAAeN,EAAQ,QAAQ,cAAc,IAAI,GAC/DQ,IAAgBF,EAAeN,EAAQ,QAAQ,OAAO,IAAI;AAClD,IAAAI,IAAAK,EAAIL,GAAaG,GAAa,IAAI,GAChCF,IAAAI,EAAIJ,GAAeG,GAAe,IAAI;AAAA,EACxD;AAIA,SAAAE,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,eAAaZ;AAAA,MACb,MAAK;AAAA,MACL,cAAW;AAAA,MACX,OAAO;AAAA,QACL,YAAY,gCAAgCM,CAAW,KAAKC,CAAa;AAAA,MAC3E;AAAA,MAEC,UAAAT;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/Icon/Icon.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.cjs.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { SVGProps } from \"react\";\r\nimport iconURL from \"../../../assets/svg/icons.svg\";\r\n\r\ntype IconID =\r\n \| \"external-link\"\r\n \| \"caret-down\"\r\n \| \"caret-right\"\r\n \| \"chevron-right\"\r\n \| \"chevron-left\"\r\n \| \"chevron-up\"\r\n \| \"chevron-down\";\r\n\r\n/\r\n \r\n * 🚧 UNDER CONSTRUCTION 🚧\r\n \r\n /\r\n\r\nexport interface IconProps {\r\n /*\r\n The spritesheet ID defined in the Icons spritesheet.\r\n /\r\n id: IconID;\r\n\r\n /\r\n The desired width/height of the icon. Accepts any valid CSS unit.\r\n /\r\n size?: number \| string;\r\n\r\n /\r\n The stroke color of the icon.\r\n /\r\n color?: string;\r\n}\r\n\r\n/\r\n An icon component that displays SVG icons from a sprite sheet or inline.\r\n \r\n API:\r\n * - {@link IconProps}\r\n /\r\nexport function Icon(props: IconProps) {\r\n let iconStyle = {\r\n height: props.size \|\| undefined,\r\n width: props.size \|\| undefined,\r\n color: props.color \|\| undefined,\r\n };\r\n\r\n if (props.id === \"chevron-right\") {\r\n return <Chevron direction=\"right\" {...iconStyle} />;\r\n }\r\n\r\n if (props.id === \"chevron-left\") {\r\n return <Chevron direction=\"left\" {...iconStyle} />;\r\n }\r\n\r\n if (props.id === \"chevron-up\") {\r\n return <Chevron direction=\"up\" {...iconStyle} />;\r\n }\r\n\r\n if (props.id === \"chevron-down\") {\r\n return <Chevron direction=\"down\" {...iconStyle} />;\r\n }\r\n\r\n return (\r\n <svg style={iconStyle} {...props}>\r\n <use href={`${iconURL}#${props.id}`} />\r\n </svg>\r\n );\r\n}\r\n\r\nfunction Chevron({\r\n direction,\r\n ...props\r\n}: {\r\n direction: \"right\" \| \"left\" \| \"up\" \| \"down\";\r\n} & SVGProps<SVGSVGElement>) {\r\n const rotateMap = {\r\n right: 0,\r\n down: 90,\r\n left: 180,\r\n up: 270,\r\n };\r\n\r\n return (\r\n <svg\r\n viewBox=\"0 0 16 16\"\r\n style={{\r\n transform: `rotate(${rotateMap[direction]}deg)`,\r\n }}\r\n {...props}\r\n >\r\n {/ NOTE: this is the path for the \"right\" direction */}\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04\"\r\n />\r\n </svg>\r\n );\r\n}\r\n"],"names":["Icon","props","iconStyle","jsx","Chevron","iconURL","direction","rotateMap"],"mappings":"8LAyCO,SAASA,EAAKC,EAAkB,CACrC,IAAIC,EAAY,CACd,OAAQD,EAAM,MAAQ,OACtB,MAAOA,EAAM,MAAQ,OACrB,MAAOA,EAAM,OAAS,MAAA,EAGpB,OAAAA,EAAM,KAAO,gBACPE,EAAAA,kBAAAA,IAAAC,EAAA,CAAQ,UAAU,QAAS,GAAGF,CAAW,CAAA,EAG/CD,EAAM,KAAO,eACPE,EAAAA,kBAAAA,IAAAC,EAAA,CAAQ,UAAU,OAAQ,GAAGF,CAAW,CAAA,EAG9CD,EAAM,KAAO,aACPE,EAAAA,kBAAAA,IAAAC,EAAA,CAAQ,UAAU,KAAM,GAAGF,CAAW,CAAA,EAG5CD,EAAM,KAAO,eACPE,EAAAA,kBAAAA,IAAAC,EAAA,CAAQ,UAAU,OAAQ,GAAGF,CAAW,CAAA,EAI/CC,EAAA,kBAAA,IAAA,MAAA,CAAI,MAAOD,EAAY,GAAGD,EACzB,SAAAE,wBAAC,MAAI,CAAA,KAAM,GAAGE,EAAAA,OAAO,IAAIJ,EAAM,EAAE,GAAI,CACvC,CAAA,CAEJ,CAEA,SAASG,EAAQ,CACf,UAAAE,EACA,GAAGL,CACL,EAE6B,CAC3B,MAAMM,EAAY,CAChB,MAAO,EACP,KAAM,GACN,KAAM,IACN,GAAI,GAAA,EAIJ,OAAAJ,EAAA,kBAAA,IAAC,MAAA,CACC,QAAQ,YACR,MAAO,CACL,UAAW,UAAUI,EAAUD,CAAS,CAAC,MAC3C,EACC,GAAGL,EAGJ,SAAAE,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,kIAAA,CACJ,CAAA,CAAA,CAGN"}
1	+ {"version":3,"file":"Icon.cjs.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { SVGProps } from \"react\";\nimport iconURL from \"../../../assets/svg/icons.svg\";\n\ntype IconID =\n \| \"external-link\"\n \| \"caret-down\"\n \| \"caret-right\"\n \| \"chevron-right\"\n \| \"chevron-left\"\n \| \"chevron-up\"\n \| \"chevron-down\";\n\n/\n \n * 🚧 UNDER CONSTRUCTION 🚧\n \n /\n\nexport interface IconProps {\n /*\n The spritesheet ID defined in the Icons spritesheet.\n /\n id: IconID;\n\n /\n The desired width/height of the icon. Accepts any valid CSS unit.\n /\n size?: number \| string;\n\n /\n The stroke color of the icon.\n /\n color?: string;\n}\n\n/\n An icon component that displays SVG icons from a sprite sheet or inline.\n \n API:\n * - {@link IconProps}\n /\nexport function Icon(props: IconProps) {\n let iconStyle = {\n height: props.size \|\| undefined,\n width: props.size \|\| undefined,\n color: props.color \|\| undefined,\n };\n\n if (props.id === \"chevron-right\") {\n return <Chevron direction=\"right\" {...iconStyle} />;\n }\n\n if (props.id === \"chevron-left\") {\n return <Chevron direction=\"left\" {...iconStyle} />;\n }\n\n if (props.id === \"chevron-up\") {\n return <Chevron direction=\"up\" {...iconStyle} />;\n }\n\n if (props.id === \"chevron-down\") {\n return <Chevron direction=\"down\" {...iconStyle} />;\n }\n\n return (\n <svg style={iconStyle} {...props}>\n <use href={`${iconURL}#${props.id}`} />\n </svg>\n );\n}\n\nfunction Chevron({\n direction,\n ...props\n}: {\n direction: \"right\" \| \"left\" \| \"up\" \| \"down\";\n} & SVGProps<SVGSVGElement>) {\n const rotateMap = {\n right: 0,\n down: 90,\n left: 180,\n up: 270,\n };\n\n return (\n <svg\n viewBox=\"0 0 16 16\"\n style={{\n transform: `rotate(${rotateMap[direction]}deg)`,\n }}\n {...props}\n >\n {/ NOTE: this is the path for the \"right\" direction */}\n <path\n fill=\"currentColor\"\n d=\"M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04\"\n />\n </svg>\n );\n}\n"],"names":["Icon","props","iconStyle","jsx","Chevron","iconURL","direction","rotateMap"],"mappings":"8LAyCO,SAASA,EAAKC,EAAkB,CACrC,IAAIC,EAAY,CACd,OAAQD,EAAM,MAAQ,OACtB,MAAOA,EAAM,MAAQ,OACrB,MAAOA,EAAM,OAAS,MAAA,EAGpB,OAAAA,EAAM,KAAO,gBACPE,EAAAA,kBAAAA,IAAAC,EAAA,CAAQ,UAAU,QAAS,GAAGF,CAAW,CAAA,EAG/CD,EAAM,KAAO,eACPE,EAAAA,kBAAAA,IAAAC,EAAA,CAAQ,UAAU,OAAQ,GAAGF,CAAW,CAAA,EAG9CD,EAAM,KAAO,aACPE,EAAAA,kBAAAA,IAAAC,EAAA,CAAQ,UAAU,KAAM,GAAGF,CAAW,CAAA,EAG5CD,EAAM,KAAO,eACPE,EAAAA,kBAAAA,IAAAC,EAAA,CAAQ,UAAU,OAAQ,GAAGF,CAAW,CAAA,EAI/CC,EAAA,kBAAA,IAAA,MAAA,CAAI,MAAOD,EAAY,GAAGD,EACzB,SAAAE,wBAAC,MAAI,CAAA,KAAM,GAAGE,EAAAA,OAAO,IAAIJ,EAAM,EAAE,GAAI,CACvC,CAAA,CAEJ,CAEA,SAASG,EAAQ,CACf,UAAAE,EACA,GAAGL,CACL,EAE6B,CAC3B,MAAMM,EAAY,CAChB,MAAO,EACP,KAAM,GACN,KAAM,IACN,GAAI,GAAA,EAIJ,OAAAJ,EAAA,kBAAA,IAAC,MAAA,CACC,QAAQ,YACR,MAAO,CACL,UAAW,UAAUI,EAAUD,CAAS,CAAC,MAC3C,EACC,GAAGL,EAGJ,SAAAE,EAAA,kBAAA,IAAC,OAAA,CACC,KAAK,eACL,EAAE,kIAAA,CACJ,CAAA,CAAA,CAGN"}

package/dist/components/Icon/Icon.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Icon.es.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { SVGProps } from \"react\";\r\nimport iconURL from \"../../../assets/svg/icons.svg\";\r\n\r\ntype IconID =\r\n \| \"external-link\"\r\n \| \"caret-down\"\r\n \| \"caret-right\"\r\n \| \"chevron-right\"\r\n \| \"chevron-left\"\r\n \| \"chevron-up\"\r\n \| \"chevron-down\";\r\n\r\n/\r\n \r\n * 🚧 UNDER CONSTRUCTION 🚧\r\n \r\n /\r\n\r\nexport interface IconProps {\r\n /*\r\n The spritesheet ID defined in the Icons spritesheet.\r\n /\r\n id: IconID;\r\n\r\n /\r\n The desired width/height of the icon. Accepts any valid CSS unit.\r\n /\r\n size?: number \| string;\r\n\r\n /\r\n The stroke color of the icon.\r\n /\r\n color?: string;\r\n}\r\n\r\n/\r\n An icon component that displays SVG icons from a sprite sheet or inline.\r\n \r\n API:\r\n * - {@link IconProps}\r\n /\r\nexport function Icon(props: IconProps) {\r\n let iconStyle = {\r\n height: props.size \|\| undefined,\r\n width: props.size \|\| undefined,\r\n color: props.color \|\| undefined,\r\n };\r\n\r\n if (props.id === \"chevron-right\") {\r\n return <Chevron direction=\"right\" {...iconStyle} />;\r\n }\r\n\r\n if (props.id === \"chevron-left\") {\r\n return <Chevron direction=\"left\" {...iconStyle} />;\r\n }\r\n\r\n if (props.id === \"chevron-up\") {\r\n return <Chevron direction=\"up\" {...iconStyle} />;\r\n }\r\n\r\n if (props.id === \"chevron-down\") {\r\n return <Chevron direction=\"down\" {...iconStyle} />;\r\n }\r\n\r\n return (\r\n <svg style={iconStyle} {...props}>\r\n <use href={`${iconURL}#${props.id}`} />\r\n </svg>\r\n );\r\n}\r\n\r\nfunction Chevron({\r\n direction,\r\n ...props\r\n}: {\r\n direction: \"right\" \| \"left\" \| \"up\" \| \"down\";\r\n} & SVGProps<SVGSVGElement>) {\r\n const rotateMap = {\r\n right: 0,\r\n down: 90,\r\n left: 180,\r\n up: 270,\r\n };\r\n\r\n return (\r\n <svg\r\n viewBox=\"0 0 16 16\"\r\n style={{\r\n transform: `rotate(${rotateMap[direction]}deg)`,\r\n }}\r\n {...props}\r\n >\r\n {/ NOTE: this is the path for the \"right\" direction */}\r\n <path\r\n fill=\"currentColor\"\r\n d=\"M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04\"\r\n />\r\n </svg>\r\n );\r\n}\r\n"],"names":["Icon","props","iconStyle","jsx","Chevron","iconURL","direction","rotateMap"],"mappings":";;AAyCO,SAASA,EAAKC,GAAkB;AACrC,MAAIC,IAAY;AAAA,IACd,QAAQD,EAAM,QAAQ;AAAA,IACtB,OAAOA,EAAM,QAAQ;AAAA,IACrB,OAAOA,EAAM,SAAS;AAAA,EAAA;AAGpB,SAAAA,EAAM,OAAO,kBACPE,gBAAAA,EAAAA,IAAAC,GAAA,EAAQ,WAAU,SAAS,GAAGF,EAAW,CAAA,IAG/CD,EAAM,OAAO,iBACPE,gBAAAA,EAAAA,IAAAC,GAAA,EAAQ,WAAU,QAAQ,GAAGF,EAAW,CAAA,IAG9CD,EAAM,OAAO,eACPE,gBAAAA,EAAAA,IAAAC,GAAA,EAAQ,WAAU,MAAM,GAAGF,EAAW,CAAA,IAG5CD,EAAM,OAAO,iBACPE,gBAAAA,EAAAA,IAAAC,GAAA,EAAQ,WAAU,QAAQ,GAAGF,EAAW,CAAA,IAI/CC,gBAAAA,EAAA,IAAA,OAAA,EAAI,OAAOD,GAAY,GAAGD,GACzB,UAAAE,gBAAAA,MAAC,OAAI,EAAA,MAAM,GAAGE,CAAO,IAAIJ,EAAM,EAAE,IAAI,EACvC,CAAA;AAEJ;AAEA,SAASG,EAAQ;AAAA,EACf,WAAAE;AAAA,EACA,GAAGL;AACL,GAE6B;AAC3B,QAAMM,IAAY;AAAA,IAChB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAIJ,SAAAJ,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAO;AAAA,QACL,WAAW,UAAUI,EAAUD,CAAS,CAAC;AAAA,MAC3C;AAAA,MACC,GAAGL;AAAA,MAGJ,UAAAE,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}
1	+ {"version":3,"file":"Icon.es.js","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import { SVGProps } from \"react\";\nimport iconURL from \"../../../assets/svg/icons.svg\";\n\ntype IconID =\n \| \"external-link\"\n \| \"caret-down\"\n \| \"caret-right\"\n \| \"chevron-right\"\n \| \"chevron-left\"\n \| \"chevron-up\"\n \| \"chevron-down\";\n\n/\n \n * 🚧 UNDER CONSTRUCTION 🚧\n \n /\n\nexport interface IconProps {\n /*\n The spritesheet ID defined in the Icons spritesheet.\n /\n id: IconID;\n\n /\n The desired width/height of the icon. Accepts any valid CSS unit.\n /\n size?: number \| string;\n\n /\n The stroke color of the icon.\n /\n color?: string;\n}\n\n/\n An icon component that displays SVG icons from a sprite sheet or inline.\n \n API:\n * - {@link IconProps}\n /\nexport function Icon(props: IconProps) {\n let iconStyle = {\n height: props.size \|\| undefined,\n width: props.size \|\| undefined,\n color: props.color \|\| undefined,\n };\n\n if (props.id === \"chevron-right\") {\n return <Chevron direction=\"right\" {...iconStyle} />;\n }\n\n if (props.id === \"chevron-left\") {\n return <Chevron direction=\"left\" {...iconStyle} />;\n }\n\n if (props.id === \"chevron-up\") {\n return <Chevron direction=\"up\" {...iconStyle} />;\n }\n\n if (props.id === \"chevron-down\") {\n return <Chevron direction=\"down\" {...iconStyle} />;\n }\n\n return (\n <svg style={iconStyle} {...props}>\n <use href={`${iconURL}#${props.id}`} />\n </svg>\n );\n}\n\nfunction Chevron({\n direction,\n ...props\n}: {\n direction: \"right\" \| \"left\" \| \"up\" \| \"down\";\n} & SVGProps<SVGSVGElement>) {\n const rotateMap = {\n right: 0,\n down: 90,\n left: 180,\n up: 270,\n };\n\n return (\n <svg\n viewBox=\"0 0 16 16\"\n style={{\n transform: `rotate(${rotateMap[direction]}deg)`,\n }}\n {...props}\n >\n {/ NOTE: this is the path for the \"right\" direction */}\n <path\n fill=\"currentColor\"\n d=\"M5.74 3.2a.75.75 0 0 0-.04 1.06L9.227 8L5.7 11.74a.75.75 0 1 0 1.1 1.02l4-4.25a.75.75 0 0 0 0-1.02l-4-4.25a.75.75 0 0 0-1.06-.04\"\n />\n </svg>\n );\n}\n"],"names":["Icon","props","iconStyle","jsx","Chevron","iconURL","direction","rotateMap"],"mappings":";;AAyCO,SAASA,EAAKC,GAAkB;AACrC,MAAIC,IAAY;AAAA,IACd,QAAQD,EAAM,QAAQ;AAAA,IACtB,OAAOA,EAAM,QAAQ;AAAA,IACrB,OAAOA,EAAM,SAAS;AAAA,EAAA;AAGpB,SAAAA,EAAM,OAAO,kBACPE,gBAAAA,EAAAA,IAAAC,GAAA,EAAQ,WAAU,SAAS,GAAGF,EAAW,CAAA,IAG/CD,EAAM,OAAO,iBACPE,gBAAAA,EAAAA,IAAAC,GAAA,EAAQ,WAAU,QAAQ,GAAGF,EAAW,CAAA,IAG9CD,EAAM,OAAO,eACPE,gBAAAA,EAAAA,IAAAC,GAAA,EAAQ,WAAU,MAAM,GAAGF,EAAW,CAAA,IAG5CD,EAAM,OAAO,iBACPE,gBAAAA,EAAAA,IAAAC,GAAA,EAAQ,WAAU,QAAQ,GAAGF,EAAW,CAAA,IAI/CC,gBAAAA,EAAA,IAAA,OAAA,EAAI,OAAOD,GAAY,GAAGD,GACzB,UAAAE,gBAAAA,MAAC,OAAI,EAAA,MAAM,GAAGE,CAAO,IAAIJ,EAAM,EAAE,IAAI,EACvC,CAAA;AAEJ;AAEA,SAASG,EAAQ;AAAA,EACf,WAAAE;AAAA,EACA,GAAGL;AACL,GAE6B;AAC3B,QAAMM,IAAY;AAAA,IAChB,OAAO;AAAA,IACP,MAAM;AAAA,IACN,MAAM;AAAA,IACN,IAAI;AAAA,EAAA;AAIJ,SAAAJ,gBAAAA,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,SAAQ;AAAA,MACR,OAAO;AAAA,QACL,WAAW,UAAUI,EAAUD,CAAS,CAAC;AAAA,MAC3C;AAAA,MACC,GAAGL;AAAA,MAGJ,UAAAE,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,GAAE;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/ImageBackground/ImageBackground.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ImageBackground.cjs.js","sources":["../../../src/components/ImageBackground/ImageBackground.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport \"../ScreenOverlay/ScreenOverlay.css\";\r\nimport { useTheme } from \"../ThemeProvider\";\r\nimport { parseToRgba } from \"color2k\";\r\n\r\ninterface ImageBackgroundProps {\r\n /*\r\n Manually display a background image. Useful for server-side rendering.\r\n * @important When using this prop, you must style your own image component appropriately.\r\n * The component will be placed directly in the background without additional styling.\r\n /\r\n image?: React.ReactNode;\r\n /\r\n The URL of the image to display in the background.\r\n * @important Client-side only. Cannot be used in Server Components.\r\n * When using this prop, the image will be automatically styled with the background effect.\r\n /\r\n imageUrl?: string;\r\n /\r\n Callback function to handle the image load event.\r\n * @important Client-side only. Cannot be used in Server Components.\r\n /\r\n onLoad?: (image: HTMLImageElement) => void;\r\n}\r\n\r\n/\r\n Calculates a background color with appropriate opacity based on the brightness of the base color.\r\n * For dark colors (sum of RGB values < 65), returns a white overlay with variable opacity.\r\n * For brighter colors, returns an empty string (no overlay needed).\r\n /\r\nconst getBgWhiteOverlayColor = (color: [number, number, number, number]) => {\r\n const [r, g, b] = color;\r\n const brightness = r + g + b;\r\n\r\n // Only apply white overlay for dark backgrounds\r\n if (brightness < 65) {\r\n // Calculate opacity inversely proportional to brightness\r\n // Brighter colors get less opacity, with a minimum of 0.1\r\n const brightnessPercentage = brightness / 100;\r\n const opacity = Math.max(0.14, 0.36 - brightnessPercentage);\r\n\r\n return `rgba(255, 255, 255, ${opacity})`;\r\n }\r\n\r\n return \"\";\r\n};\r\n\r\n/\r\n ImageOverlay component for displaying an image with a blur effect.\r\n \r\n API:\r\n * - {@link ImageBackgroundProps}\r\n */\r\nexport function ImageBackground({\r\n image,\r\n imageUrl = \"\",\r\n onLoad,\r\n}: ImageBackgroundProps) {\r\n const { palette } = useTheme();\r\n const baseColor = parseToRgba(palette.BASE_COLOR);\r\n const backgroundColor = getBgWhiteOverlayColor(baseColor);\r\n\r\n return (\r\n <div\r\n id=\"image-background\"\r\n aria-label=\"Background overlay\"\r\n role=\"dialog\"\r\n aria-modal=\"true\"\r\n className=\"proton-ScreenOverlay__background\"\r\n >\r\n {image ? (\r\n <div aria-hidden=\"true\">{image}</div>\r\n ) : (\r\n <img\r\n alt=\"\" // Decorative image\r\n src={imageUrl}\r\n className=\"proton-ScreenOverlay__image\"\r\n onLoad={(event) => onLoad?.(event.currentTarget)}\r\n aria-hidden=\"true\"\r\n />\r\n )}\r\n <div\r\n className=\"proton-ScreenOverlay__blur\"\r\n aria-hidden=\"true\"\r\n style={{\r\n background: backgroundColor,\r\n }}\r\n />\r\n </div>\r\n );\r\n}\r\n"],"names":["getBgWhiteOverlayColor","color","r","g","b","brightness","brightnessPercentage","ImageBackground","image","imageUrl","onLoad","palette","useTheme","baseColor","parseToRgba","backgroundColor","jsxs","jsx","event"],"mappings":"2TA+BMA,EAA0BC,GAA4C,CAC1E,KAAM,CAACC,EAAGC,EAAGC,CAAC,EAAIH,EACZI,EAAaH,EAAIC,EAAIC,EAG3B,GAAIC,EAAa,GAAI,CAGnB,MAAMC,EAAuBD,EAAa,IAG1C,MAAO,uBAFS,KAAK,IAAI,IAAM,IAAOC,CAAoB,CAErB,GACvC,CAEO,MAAA,EACT,EAQO,SAASC,EAAgB,CAC9B,MAAAC,EACA,SAAAC,EAAW,GACX,OAAAC,CACF,EAAyB,CACjB,KAAA,CAAE,QAAAC,GAAYC,EAAAA,WACdC,EAAYC,EAAAA,YAAYH,EAAQ,UAAU,EAC1CI,EAAkBf,EAAuBa,CAAS,EAGtD,OAAAG,EAAA,kBAAA,KAAC,MAAA,CACC,GAAG,mBACH,aAAW,qBACX,KAAK,SACL,aAAW,OACX,UAAU,mCAET,SAAA,CAAAR,EACES,EAAAA,kBAAAA,IAAA,MAAA,CAAI,cAAY,OAAQ,UAAM,CAAA,EAE/BA,EAAA,kBAAA,IAAC,MAAA,CACC,IAAI,GACJ,IAAKR,EACL,UAAU,8BACV,OAASS,GAAUR,GAAA,YAAAA,EAASQ,EAAM,eAClC,cAAY,MAAA,CACd,EAEFD,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,6BACV,cAAY,OACZ,MAAO,CACL,WAAYF,CACd,CAAA,CACF,CAAA,CAAA,CAAA,CAGN"}
1	+ {"version":3,"file":"ImageBackground.cjs.js","sources":["../../../src/components/ImageBackground/ImageBackground.tsx"],"sourcesContent":["\"use client\";\n\nimport \"../ScreenOverlay/ScreenOverlay.css\";\nimport { useTheme } from \"../ThemeProvider\";\nimport { parseToRgba } from \"color2k\";\n\ninterface ImageBackgroundProps {\n /*\n Manually display a background image. Useful for server-side rendering.\n * @important When using this prop, you must style your own image component appropriately.\n * The component will be placed directly in the background without additional styling.\n /\n image?: React.ReactNode;\n /\n The URL of the image to display in the background.\n * @important Client-side only. Cannot be used in Server Components.\n * When using this prop, the image will be automatically styled with the background effect.\n /\n imageUrl?: string;\n /\n Callback function to handle the image load event.\n * @important Client-side only. Cannot be used in Server Components.\n /\n onLoad?: (image: HTMLImageElement) => void;\n}\n\n/\n Calculates a background color with appropriate opacity based on the brightness of the base color.\n * For dark colors (sum of RGB values < 65), returns a white overlay with variable opacity.\n * For brighter colors, returns an empty string (no overlay needed).\n /\nconst getBgWhiteOverlayColor = (color: [number, number, number, number]) => {\n const [r, g, b] = color;\n const brightness = r + g + b;\n\n // Only apply white overlay for dark backgrounds\n if (brightness < 65) {\n // Calculate opacity inversely proportional to brightness\n // Brighter colors get less opacity, with a minimum of 0.1\n const brightnessPercentage = brightness / 100;\n const opacity = Math.max(0.14, 0.36 - brightnessPercentage);\n\n return `rgba(255, 255, 255, ${opacity})`;\n }\n\n return \"\";\n};\n\n/\n ImageOverlay component for displaying an image with a blur effect.\n \n API:\n * - {@link ImageBackgroundProps}\n */\nexport function ImageBackground({\n image,\n imageUrl = \"\",\n onLoad,\n}: ImageBackgroundProps) {\n const { palette } = useTheme();\n const baseColor = parseToRgba(palette.BASE_COLOR);\n const backgroundColor = getBgWhiteOverlayColor(baseColor);\n\n return (\n <div\n id=\"image-background\"\n aria-label=\"Background overlay\"\n role=\"dialog\"\n aria-modal=\"true\"\n className=\"proton-ScreenOverlay__background\"\n >\n {image ? (\n <div aria-hidden=\"true\">{image}</div>\n ) : (\n <img\n alt=\"\" // Decorative image\n src={imageUrl}\n className=\"proton-ScreenOverlay__image\"\n onLoad={(event) => onLoad?.(event.currentTarget)}\n aria-hidden=\"true\"\n />\n )}\n <div\n className=\"proton-ScreenOverlay__blur\"\n aria-hidden=\"true\"\n style={{\n background: backgroundColor,\n }}\n />\n </div>\n );\n}\n"],"names":["getBgWhiteOverlayColor","color","r","g","b","brightness","brightnessPercentage","ImageBackground","image","imageUrl","onLoad","palette","useTheme","baseColor","parseToRgba","backgroundColor","jsxs","jsx","event"],"mappings":"2TA+BMA,EAA0BC,GAA4C,CAC1E,KAAM,CAACC,EAAGC,EAAGC,CAAC,EAAIH,EACZI,EAAaH,EAAIC,EAAIC,EAG3B,GAAIC,EAAa,GAAI,CAGnB,MAAMC,EAAuBD,EAAa,IAG1C,MAAO,uBAFS,KAAK,IAAI,IAAM,IAAOC,CAAoB,CAErB,GACvC,CAEO,MAAA,EACT,EAQO,SAASC,EAAgB,CAC9B,MAAAC,EACA,SAAAC,EAAW,GACX,OAAAC,CACF,EAAyB,CACjB,KAAA,CAAE,QAAAC,GAAYC,EAAAA,WACdC,EAAYC,EAAAA,YAAYH,EAAQ,UAAU,EAC1CI,EAAkBf,EAAuBa,CAAS,EAGtD,OAAAG,EAAA,kBAAA,KAAC,MAAA,CACC,GAAG,mBACH,aAAW,qBACX,KAAK,SACL,aAAW,OACX,UAAU,mCAET,SAAA,CAAAR,EACES,EAAAA,kBAAAA,IAAA,MAAA,CAAI,cAAY,OAAQ,UAAM,CAAA,EAE/BA,EAAA,kBAAA,IAAC,MAAA,CACC,IAAI,GACJ,IAAKR,EACL,UAAU,8BACV,OAASS,GAAUR,GAAA,YAAAA,EAASQ,EAAM,eAClC,cAAY,MAAA,CACd,EAEFD,EAAA,kBAAA,IAAC,MAAA,CACC,UAAU,6BACV,cAAY,OACZ,MAAO,CACL,WAAYF,CACd,CAAA,CACF,CAAA,CAAA,CAAA,CAGN"}