@ms-cloudpack/overlay 0.19.18 → 0.19.20

package/lib/components/Button/Button.d.ts

@@ -12,10 +12,6 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
      * @default 'default'
      */
     variant?: 'default' | 'primary' | 'link' | 'iconOnly' | 'custom';
-    /** Include this icon (add more as needed) */
-    iconName?: 'close' | 'refresh';
-    /** Alt text for the icon. Defaults to an empty string (presentational). */
-    iconAlt?: string;
 }
 /**
  * Render a styled button.

package/lib/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;IACjE,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,2EAA2E;IAC3E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAKD;;;;;GAKG;AACH,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CA8BjD,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAI1D,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAAC;CAClE;AAKD;;;;;GAKG;AACH,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAiBjD,CAAC"}

package/lib/components/Button/Button.js

@@ -1,10 +1,7 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx } from "preact/jsx-runtime";
 import cx from 'classnames';
 import styles from './Button.module.css';
-// In fluentui-system-icons, this is "ArrowClockwiseFilled"
-import RefreshIcon from '../../images/refresh-20.inline.svg';
-import RefreshWhiteIcon from '../../images/refresh-white-20.inline.svg';
-import CloseIcon from '../../images/dismiss-16-filled.inline.svg';
+import inputStyles from './inputCommon.module.css';
 /** button variants that get the `.standard` class */
 const standardButtonVariants = ['default', 'primary', 'iconOnly'];
 /**
@@ -14,18 +11,8 @@ const standardButtonVariants = ['default', 'primary', 'iconOnly'];
  * or increase specificity (like `button.customClass`).
  */
 export const Button = (props) => {
-    const { variant = 'default', iconName, iconAlt, children, class: propsClassName, ...other } = props;
-    const className = cx(styles.root, standardButtonVariants.includes(variant) && styles.standard, styles[variant], (variant === 'primary' || variant === 'default') && styles.defaultPrimary, propsClassName);
-    const iconContent = iconName === 'close'
-        ? CloseIcon
-        : // The approach of importing SVG content as data-urls doesn't allow the icon color to
-            // follow the text color, so for now, we use two versions of the refresh icon depending on
-            // whether the button background is dark or light.
-            iconName === 'refresh'
-                ? variant === 'primary'
-                    ? RefreshWhiteIcon
-                    : RefreshIcon
-                : undefined;
-    return (_jsxs("button", { type: "button", ...other, class: className, children: [iconContent && _jsx("img", { src: iconContent, alt: iconAlt || '' }), !!iconName && variant !== 'iconOnly' && ' ', children] }));
+    const { variant = 'default', children, class: propsClassName, ...other } = props;
+    const className = cx(styles.root, inputStyles.root, standardButtonVariants.includes(variant) && [styles.standard, inputStyles.standard], styles[variant], (variant === 'primary' || variant === 'default') && styles.defaultPrimary, propsClassName);
+    return (_jsx("button", { type: "button", ...other, class: className, children: children }));
 };
 //# sourceMappingURL=Button.js.map

package/lib/components/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAG5B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,2DAA2D;AAC3D,OAAO,WAAW,MAAM,oCAAoC,CAAC;AAC7D,OAAO,gBAAgB,MAAM,0CAA0C,CAAC;AACxE,OAAO,SAAS,MAAM,2CAA2C,CAAC;AAoBlE,qDAAqD;AACrD,MAAM,sBAAsB,GAA6B,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AAE5F;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC9D,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEpG,MAAM,SAAS,GAAG,EAAE,CAClB,MAAM,CAAC,IAAI,EACX,sBAAsB,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,MAAM,CAAC,QAAQ,EAC3D,MAAM,CAAC,OAAO,CAAC,EACf,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS,CAAC,IAAI,MAAM,CAAC,cAAc,EACzE,cAAc,CACf,CAAC;IAEF,MAAM,WAAW,GACf,QAAQ,KAAK,OAAO;QAClB,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,qFAAqF;YACrF,0FAA0F;YAC1F,kDAAkD;YAClD,QAAQ,KAAK,SAAS;gBACtB,CAAC,CAAC,OAAO,KAAK,SAAS;oBACrB,CAAC,CAAC,gBAAgB;oBAClB,CAAC,CAAC,WAAW;gBACf,CAAC,CAAC,SAAS,CAAC;IAElB,OAAO,CACL,kBAAQ,IAAI,EAAC,QAAQ,KAAK,KAAK,EAAE,KAAK,EAAE,SAAS,aAC9C,WAAW,IAAI,cAAK,GAAG,EAAE,WAAW,EAAE,GAAG,EAAE,OAAO,IAAI,EAAE,GAAI,EAC5D,CAAC,CAAC,QAAQ,IAAI,OAAO,KAAK,UAAU,IAAI,GAAG,EAC3C,QAAQ,IACF,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import cx from 'classnames';\nimport type { FunctionComponent } from 'preact';\nimport type { ButtonHTMLAttributes } from 'preact/compat';\nimport styles from './Button.module.css';\n// In fluentui-system-icons, this is \"ArrowClockwiseFilled\"\nimport RefreshIcon from '../../images/refresh-20.inline.svg';\nimport RefreshWhiteIcon from '../../images/refresh-white-20.inline.svg';\nimport CloseIcon from '../../images/dismiss-16-filled.inline.svg';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Button style variant:\n   * - `default`: white background, black text, dark gray border\n   * - `primary`: blue background, white text\n   * - `link`: looks like a link (underline, no background or padding). Note that to set the font\n   *   size or weight, you need to set them on a parent element or use higher specificty than one class.\n   * - `iconOnly`: 32px width/height, light gray background on hover only\n   * - `custom`: only get rid of the browser default styles\n   * @default 'default'\n   */\n  variant?: 'default' | 'primary' | 'link' | 'iconOnly' | 'custom';\n  /** Include this icon (add more as needed) */\n  iconName?: 'close' | 'refresh';\n  /** Alt text for the icon. Defaults to an empty string (presentational). */\n  iconAlt?: string;\n}\n\n/** button variants that get the `.standard` class */\nconst standardButtonVariants: ButtonProps['variant'][] = ['default', 'primary', 'iconOnly'];\n\n/**\n * Render a styled button.\n *\n * To customize colors, you can either use the CSS variables (see `Button.module.css`)\n * or increase specificity (like `button.customClass`).\n */\nexport const Button: FunctionComponent<ButtonProps> = (props) => {\n  const { variant = 'default', iconName, iconAlt, children, class: propsClassName, ...other } = props;\n\n  const className = cx(\n    styles.root,\n    standardButtonVariants.includes(variant) && styles.standard,\n    styles[variant],\n    (variant === 'primary' || variant === 'default') && styles.defaultPrimary,\n    propsClassName,\n  );\n\n  const iconContent =\n    iconName === 'close'\n      ? CloseIcon\n      : // The approach of importing SVG content as data-urls doesn't allow the icon color to\n        // follow the text color, so for now, we use two versions of the refresh icon depending on\n        // whether the button background is dark or light.\n        iconName === 'refresh'\n        ? variant === 'primary'\n          ? RefreshWhiteIcon\n          : RefreshIcon\n        : undefined;\n\n  return (\n    <button type=\"button\" {...other} class={className}>\n      {iconContent && <img src={iconContent} alt={iconAlt || ''} />}\n      {!!iconName && variant !== 'iconOnly' && ' '}\n      {children}\n    </button>\n  );\n};\n"]}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAG5B,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAgBnD,qDAAqD;AACrD,MAAM,sBAAsB,GAA6B,CAAC,SAAS,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AAE5F;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC9D,MAAM,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,cAAc,EAAE,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAEjF,MAAM,SAAS,GAAG,EAAE,CAClB,MAAM,CAAC,IAAI,EACX,WAAW,CAAC,IAAI,EAChB,sBAAsB,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,QAAQ,CAAC,EACnF,MAAM,CAAC,OAAO,CAAC,EACf,CAAC,OAAO,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS,CAAC,IAAI,MAAM,CAAC,cAAc,EACzE,cAAc,CACf,CAAC;IAEF,OAAO,CACL,iBAAQ,IAAI,EAAC,QAAQ,KAAK,KAAK,EAAE,KAAK,EAAE,SAAS,YAC9C,QAAQ,GACF,CACV,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import cx from 'classnames';\nimport type { FunctionComponent } from 'preact';\nimport type { ButtonHTMLAttributes } from 'preact/compat';\nimport styles from './Button.module.css';\nimport inputStyles from './inputCommon.module.css';\n\nexport interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * Button style variant:\n   * - `default`: white background, black text, dark gray border\n   * - `primary`: blue background, white text\n   * - `link`: looks like a link (underline, no background or padding). Note that to set the font\n   *   size or weight, you need to set them on a parent element or use higher specificty than one class.\n   * - `iconOnly`: 32px width/height, light gray background on hover only\n   * - `custom`: only get rid of the browser default styles\n   * @default 'default'\n   */\n  variant?: 'default' | 'primary' | 'link' | 'iconOnly' | 'custom';\n}\n\n/** button variants that get the `.standard` class */\nconst standardButtonVariants: ButtonProps['variant'][] = ['default', 'primary', 'iconOnly'];\n\n/**\n * Render a styled button.\n *\n * To customize colors, you can either use the CSS variables (see `Button.module.css`)\n * or increase specificity (like `button.customClass`).\n */\nexport const Button: FunctionComponent<ButtonProps> = (props) => {\n  const { variant = 'default', children, class: propsClassName, ...other } = props;\n\n  const className = cx(\n    styles.root,\n    inputStyles.root,\n    standardButtonVariants.includes(variant) && [styles.standard, inputStyles.standard],\n    styles[variant],\n    (variant === 'primary' || variant === 'default') && styles.defaultPrimary,\n    propsClassName,\n  );\n\n  return (\n    <button type=\"button\" {...other} class={className}>\n      {children}\n    </button>\n  );\n};\n"]}

package/lib/components/Dialog/Dialog.d.ts

@@ -8,5 +8,11 @@ export interface DialogProps {
     commands?: ComponentChildren;
     children: ComponentChildren;
 }
+/**
+ * Dialog component which takes title and commands as props and content as children.
+ *
+ * If multiple children are provided, they'll be styled with a flex column layout with gaps.
+ * To prevent this behavior, wrap the children in a single div.
+ */
 export declare const Dialog: FunctionComponent<DialogProps>;
 //# sourceMappingURL=Dialog.d.ts.map

package/lib/components/Dialog/Dialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAkB,MAAM,QAAQ,CAAC;AAanF,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CA6CjD,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAkB,MAAM,QAAQ,CAAC;AAcnF,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,QAAQ,EAAE,iBAAiB,CAAC;CAC7B;AAED;;;;;GAKG;AACH,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAkDjD,CAAC"}

package/lib/components/Dialog/Dialog.js

@@ -6,8 +6,15 @@ import styles from './Dialog.module.css';
 import { useDraggable } from '../../hooks/useDraggable.js';
 import { Button } from '../Button/Button.js';
 import { elementIds } from '../../constants.js';
+import { Dismiss16 } from '../icons/Dismiss16.js';
 // Re-type children for preact
 const FocusOn = _FocusOn;
+/**
+ * Dialog component which takes title and commands as props and content as children.
+ *
+ * If multiple children are provided, they'll be styled with a flex column layout with gaps.
+ * To prevent this behavior, wrap the children in a single div.
+ */
 export const Dialog = (props) => {
     const { title, id, style, draggable, onClose, commands, children } = props;
     const dialogRootRef = useRef(null);
@@ -17,8 +24,10 @@ export const Dialog = (props) => {
         containerElementRef: dialogRootRef,
         dragElementRef: titleRef,
     });
-    return (_jsx(FocusOn, { className: styles.overlay, onClickOutside: onClose, onEscapeKey: onClose, onActivation: () => titleRef.current?.focus(), children: _jsxs("div", { id: id, ref: dialogRootRef, class: cx(styles.dialog, style === 'error' && styles.error), role: "dialog", "aria-modal": true, "aria-labelledby": elementIds.dialogTitle, children: [_jsxs("div", { class: styles.titleArea, children: [_jsx("h2", { ref: titleRef, id: elementIds.dialogTitle, class: cx(styles.title, draggable && styles.draggable), tabIndex: -1, children: title }), onClose && (
-                        // a close icon is common/universal enough that it doesn't need hover text
-                        _jsx(Button, { variant: "iconOnly", iconName: "close", onClick: onClose, "aria-label": "Close" }))] }), commands && _jsx("div", { class: styles.commands, children: commands }), children] }) }));
+    return (
+    // The overlay must be outside FocusOn so that clicking on it will close the dialog
+    _jsx("div", { className: styles.overlay, children: _jsx(FocusOn, { className: styles.focusOn, onClickOutside: onClose, onEscapeKey: onClose, onActivation: () => titleRef.current?.focus(), children: _jsxs("div", { id: id, ref: dialogRootRef, class: cx(styles.dialog, style === 'error' && styles.error), role: "dialog", "aria-modal": true, "aria-labelledby": elementIds.dialogTitle, children: [_jsxs("div", { class: styles.titleArea, children: [_jsx("h2", { ref: titleRef, id: elementIds.dialogTitle, class: cx(styles.title, draggable && styles.draggable), tabIndex: -1, children: title }), onClose && (
+                            // a close icon is common/universal enough that it doesn't need hover text
+                            _jsx(Button, { variant: "iconOnly", onClick: onClose, "aria-label": "Close", children: _jsx(Dismiss16, {}) }))] }), commands && _jsx("div", { class: styles.commands, children: commands }), _jsx("div", { class: styles.content, children: children })] }) }) }));
 };
 //# sourceMappingURL=Dialog.js.map

package/lib/components/Dialog/Dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,8BAA8B;AAC9B,MAAM,OAAO,GAAG,QAEf,CAAC;AAYF,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC9D,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3E,MAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE9C,YAAY,CAAC;QACX,OAAO,EAAE,CAAC,CAAC,SAAS;QACpB,mBAAmB,EAAE,aAAa;QAClC,cAAc,EAAE,QAAQ;KACzB,CAAC,CAAC;IAEH,OAAO,CACL,KAAC,OAAO,IACN,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,cAAc,EAAE,OAAO,EACvB,WAAW,EAAE,OAAO,EACpB,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,YAE7C,eACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,aAAa,EAClB,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,KAAK,OAAO,IAAI,MAAM,CAAC,KAAK,CAAC,EAC3D,IAAI,EAAC,QAAQ,yCAEI,UAAU,CAAC,WAAW,aAEvC,eAAK,KAAK,EAAE,MAAM,CAAC,SAAS,aAC1B,aACE,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,UAAU,CAAC,WAAW,EAC1B,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,EACtD,QAAQ,EAAE,CAAC,CAAC,YAEX,KAAK,GACH,EACJ,OAAO,IAAI;wBACV,0EAA0E;wBAC1E,KAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,QAAQ,EAAC,OAAO,EAAC,OAAO,EAAE,OAAO,gBAAa,OAAO,GAAG,CACpF,IACG,EACL,QAAQ,IAAI,cAAK,KAAK,EAAE,MAAM,CAAC,QAAQ,YAAG,QAAQ,GAAO,EACzD,QAAQ,IACL,GACE,CACX,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import cx from 'classnames';\nimport type { ComponentChildren, FunctionComponent, ComponentProps } from 'preact';\nimport { useRef } from 'preact/hooks';\nimport { FocusOn as _FocusOn } from 'react-focus-on';\nimport styles from './Dialog.module.css';\nimport { useDraggable } from '../../hooks/useDraggable.js';\nimport { Button } from '../Button/Button.js';\nimport { elementIds } from '../../constants.js';\n\n// Re-type children for preact\nconst FocusOn = _FocusOn as FunctionComponent<\n  Omit<ComponentProps<typeof _FocusOn>, 'children'> & { children: ComponentChildren }\n>;\n\nexport interface DialogProps {\n  title: string;\n  id: string;\n  style?: 'default' | 'error';\n  draggable?: boolean;\n  onClose?: () => void;\n  commands?: ComponentChildren;\n  children: ComponentChildren;\n}\n\nexport const Dialog: FunctionComponent<DialogProps> = (props) => {\n  const { title, id, style, draggable, onClose, commands, children } = props;\n  const dialogRootRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLDivElement>(null);\n\n  useDraggable({\n    enabled: !!draggable,\n    containerElementRef: dialogRootRef,\n    dragElementRef: titleRef,\n  });\n\n  return (\n    <FocusOn\n      className={styles.overlay}\n      onClickOutside={onClose}\n      onEscapeKey={onClose}\n      onActivation={() => titleRef.current?.focus()}\n    >\n      <div\n        id={id}\n        ref={dialogRootRef}\n        class={cx(styles.dialog, style === 'error' && styles.error)}\n        role=\"dialog\"\n        aria-modal\n        aria-labelledby={elementIds.dialogTitle}\n      >\n        <div class={styles.titleArea}>\n          <h2\n            ref={titleRef}\n            id={elementIds.dialogTitle}\n            class={cx(styles.title, draggable && styles.draggable)}\n            tabIndex={-1}\n          >\n            {title}\n          </h2>\n          {onClose && (\n            // a close icon is common/universal enough that it doesn't need hover text\n            <Button variant=\"iconOnly\" iconName=\"close\" onClick={onClose} aria-label=\"Close\" />\n          )}\n        </div>\n        {commands && <div class={styles.commands}>{commands}</div>}\n        {children}\n      </div>\n    </FocusOn>\n  );\n};\n"]}
+{"version":3,"file":"Dialog.js","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAE5B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,MAAM,MAAM,qBAAqB,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAC3D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,8BAA8B;AAC9B,MAAM,OAAO,GAAG,QAEf,CAAC;AAYF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,MAAM,GAAmC,CAAC,KAAK,EAAE,EAAE;IAC9D,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3E,MAAM,aAAa,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IACnD,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAE9C,YAAY,CAAC;QACX,OAAO,EAAE,CAAC,CAAC,SAAS;QACpB,mBAAmB,EAAE,aAAa;QAClC,cAAc,EAAE,QAAQ;KACzB,CAAC,CAAC;IAEH,OAAO;IACL,mFAAmF;IACnF,cAAK,SAAS,EAAE,MAAM,CAAC,OAAO,YAC5B,KAAC,OAAO,IACN,SAAS,EAAE,MAAM,CAAC,OAAO,EACzB,cAAc,EAAE,OAAO,EACvB,WAAW,EAAE,OAAO,EACpB,YAAY,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,EAAE,KAAK,EAAE,YAE7C,eACE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,aAAa,EAClB,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,KAAK,KAAK,OAAO,IAAI,MAAM,CAAC,KAAK,CAAC,EAC3D,IAAI,EAAC,QAAQ,yCAEI,UAAU,CAAC,WAAW,aAEvC,eAAK,KAAK,EAAE,MAAM,CAAC,SAAS,aAC1B,aACE,GAAG,EAAE,QAAQ,EACb,EAAE,EAAE,UAAU,CAAC,WAAW,EAC1B,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,IAAI,MAAM,CAAC,SAAS,CAAC,EACtD,QAAQ,EAAE,CAAC,CAAC,YAEX,KAAK,GACH,EACJ,OAAO,IAAI;4BACV,0EAA0E;4BAC1E,KAAC,MAAM,IAAC,OAAO,EAAC,UAAU,EAAC,OAAO,EAAE,OAAO,gBAAa,OAAO,YAC7D,KAAC,SAAS,KAAG,GACN,CACV,IACG,EACL,QAAQ,IAAI,cAAK,KAAK,EAAE,MAAM,CAAC,QAAQ,YAAG,QAAQ,GAAO,EAC1D,cAAK,KAAK,EAAE,MAAM,CAAC,OAAO,YAAG,QAAQ,GAAO,IACxC,GACE,GACN,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import cx from 'classnames';\nimport type { ComponentChildren, FunctionComponent, ComponentProps } from 'preact';\nimport { useRef } from 'preact/hooks';\nimport { FocusOn as _FocusOn } from 'react-focus-on';\nimport styles from './Dialog.module.css';\nimport { useDraggable } from '../../hooks/useDraggable.js';\nimport { Button } from '../Button/Button.js';\nimport { elementIds } from '../../constants.js';\nimport { Dismiss16 } from '../icons/Dismiss16.js';\n\n// Re-type children for preact\nconst FocusOn = _FocusOn as FunctionComponent<\n  Omit<ComponentProps<typeof _FocusOn>, 'children'> & { children: ComponentChildren }\n>;\n\nexport interface DialogProps {\n  title: string;\n  id: string;\n  style?: 'default' | 'error';\n  draggable?: boolean;\n  onClose?: () => void;\n  commands?: ComponentChildren;\n  children: ComponentChildren;\n}\n\n/**\n * Dialog component which takes title and commands as props and content as children.\n *\n * If multiple children are provided, they'll be styled with a flex column layout with gaps.\n * To prevent this behavior, wrap the children in a single div.\n */\nexport const Dialog: FunctionComponent<DialogProps> = (props) => {\n  const { title, id, style, draggable, onClose, commands, children } = props;\n  const dialogRootRef = useRef<HTMLDivElement>(null);\n  const titleRef = useRef<HTMLDivElement>(null);\n\n  useDraggable({\n    enabled: !!draggable,\n    containerElementRef: dialogRootRef,\n    dragElementRef: titleRef,\n  });\n\n  return (\n    // The overlay must be outside FocusOn so that clicking on it will close the dialog\n    <div className={styles.overlay}>\n      <FocusOn\n        className={styles.focusOn}\n        onClickOutside={onClose}\n        onEscapeKey={onClose}\n        onActivation={() => titleRef.current?.focus()}\n      >\n        <div\n          id={id}\n          ref={dialogRootRef}\n          class={cx(styles.dialog, style === 'error' && styles.error)}\n          role=\"dialog\"\n          aria-modal\n          aria-labelledby={elementIds.dialogTitle}\n        >\n          <div class={styles.titleArea}>\n            <h2\n              ref={titleRef}\n              id={elementIds.dialogTitle}\n              class={cx(styles.title, draggable && styles.draggable)}\n              tabIndex={-1}\n            >\n              {title}\n            </h2>\n            {onClose && (\n              // a close icon is common/universal enough that it doesn't need hover text\n              <Button variant=\"iconOnly\" onClick={onClose} aria-label=\"Close\">\n                <Dismiss16 />\n              </Button>\n            )}\n          </div>\n          {commands && <div class={styles.commands}>{commands}</div>}\n          <div class={styles.content}>{children}</div>\n        </div>\n      </FocusOn>\n    </div>\n  );\n};\n"]}

package/lib/components/ErrorDialog/ErrorDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorDialog/ErrorDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAKhD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAIjE,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,qBAAqB,EAAE,CAAC;CACtC;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA2B3D,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ErrorDialog.d.ts","sourceRoot":"","sources":["../../../src/components/ErrorDialog/ErrorDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAIhD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAKjE,MAAM,WAAW,gBAAgB;IAC/B,WAAW,EAAE,qBAAqB,EAAE,CAAC;CACtC;AAED,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAyB3D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/ErrorDialog/ErrorDialog.js

@@ -1,16 +1,16 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { createElement as _createElement } from "preact";
 import { Button } from '../Button/Button.js';
 import { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';
 import { PathError } from './PathError.js';
-import styles from '../StatusDialog/TaskList.module.css';
 import { Dialog } from '../Dialog/Dialog.js';
 import { elementIds } from '../../constants.js';
+import { Refresh20 } from '../icons/Refresh20.js';
 export const ErrorDialog = ({ unsupported }) => {
     const cloudpack = useCloudpack();
     const reload = () => void cloudpack.restartAllTasks.mutate();
     const editConfig = () => void cloudpack.openConfigEditor.mutate();
-    return (_jsx(Dialog, { title: "Cloudpack: Unsupported paths found in project", id: elementIds.errorDialogRoot, style: "error", commands: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", iconName: "refresh", onClick: reload, children: "Retry bundling" }), _jsx(Button, { onClick: editConfig, children: "Edit Cloudpack config" })] }), children: _jsx("div", { class: styles.root, children: unsupported.map((data, index) => (_createElement(PathError, { ...data, index: index, key: index }))) }) }));
+    return (_jsx(Dialog, { title: "Cloudpack: Unsupported paths found in project", id: elementIds.errorDialogRoot, style: "error", commands: _jsxs(_Fragment, { children: [_jsxs(Button, { variant: "primary", onClick: reload, children: [_jsx(Refresh20, {}), " Retry bundling"] }), _jsx(Button, { onClick: editConfig, children: "Edit Cloudpack config" })] }), children: unsupported.map((data, index) => (_createElement(PathError, { ...data, index: index, key: index }))) }));
 };
 export default ErrorDialog;
 //# sourceMappingURL=ErrorDialog.js.map

package/lib/components/ErrorDialog/ErrorDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorDialog.js","sourceRoot":"","sources":["../../../src/components/ErrorDialog/ErrorDialog.tsx"],"names":[],"mappings":";;AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,OAAO,MAAM,MAAM,qCAAqC,CAAC;AAEzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,CAAC,MAAM,WAAW,GAAwC,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;IAClF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;IAC7D,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAC,+CAA+C,EACrD,EAAE,EAAE,UAAU,CAAC,eAAe,EAC9B,KAAK,EAAC,OAAO,EACb,QAAQ,EACN,8BACE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,+BAEnD,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,UAAU,sCAAgC,IAC1D,YAGL,cAAK,KAAK,EAAE,MAAM,CAAC,IAAI,YACpB,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,eAAC,SAAS,OAAK,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,GAAI,CAClD,CAAC,GACE,GACC,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { Button } from '../Button/Button.js';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport { PathError } from './PathError.js';\nimport styles from '../StatusDialog/TaskList.module.css';\nimport type { UnsupportedErrorEvent } from './useErrorEvents.js';\nimport { Dialog } from '../Dialog/Dialog.js';\nimport { elementIds } from '../../constants.js';\n\nexport interface ErrorDialogProps {\n  unsupported: UnsupportedErrorEvent[];\n}\n\nexport const ErrorDialog: FunctionComponent<ErrorDialogProps> = ({ unsupported }) => {\n  const cloudpack = useCloudpack();\n\n  const reload = () => void cloudpack.restartAllTasks.mutate();\n  const editConfig = () => void cloudpack.openConfigEditor.mutate();\n\n  return (\n    <Dialog\n      title=\"Cloudpack: Unsupported paths found in project\"\n      id={elementIds.errorDialogRoot}\n      style=\"error\"\n      commands={\n        <>\n          <Button variant=\"primary\" iconName=\"refresh\" onClick={reload}>\n            Retry bundling\n          </Button>\n          <Button onClick={editConfig}>Edit Cloudpack config</Button>\n        </>\n      }\n    >\n      <div class={styles.root}>\n        {unsupported.map((data, index) => (\n          <PathError {...data} index={index} key={index} />\n        ))}\n      </div>\n    </Dialog>\n  );\n};\n\nexport default ErrorDialog;\n"]}
+{"version":3,"file":"ErrorDialog.js","sourceRoot":"","sources":["../../../src/components/ErrorDialog/ErrorDialog.tsx"],"names":[],"mappings":";;AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AACzE,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAMlD,MAAM,CAAC,MAAM,WAAW,GAAwC,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE;IAClF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IAEjC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;IAC7D,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC;IAElE,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAC,+CAA+C,EACrD,EAAE,EAAE,UAAU,CAAC,eAAe,EAC9B,KAAK,EAAC,OAAO,EACb,QAAQ,EACN,8BACE,MAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,aACvC,KAAC,SAAS,KAAG,uBACN,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,UAAU,sCAAgC,IAC1D,YAGJ,WAAW,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAChC,eAAC,SAAS,OAAK,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,GAAI,CAClD,CAAC,GACK,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { Button } from '../Button/Button.js';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport { PathError } from './PathError.js';\nimport type { UnsupportedErrorEvent } from './useErrorEvents.js';\nimport { Dialog } from '../Dialog/Dialog.js';\nimport { elementIds } from '../../constants.js';\nimport { Refresh20 } from '../icons/Refresh20.js';\n\nexport interface ErrorDialogProps {\n  unsupported: UnsupportedErrorEvent[];\n}\n\nexport const ErrorDialog: FunctionComponent<ErrorDialogProps> = ({ unsupported }) => {\n  const cloudpack = useCloudpack();\n\n  const reload = () => void cloudpack.restartAllTasks.mutate();\n  const editConfig = () => void cloudpack.openConfigEditor.mutate();\n\n  return (\n    <Dialog\n      title=\"Cloudpack: Unsupported paths found in project\"\n      id={elementIds.errorDialogRoot}\n      style=\"error\"\n      commands={\n        <>\n          <Button variant=\"primary\" onClick={reload}>\n            <Refresh20 /> Retry bundling\n          </Button>\n          <Button onClick={editConfig}>Edit Cloudpack config</Button>\n        </>\n      }\n    >\n      {unsupported.map((data, index) => (\n        <PathError {...data} index={index} key={index} />\n      ))}\n    </Dialog>\n  );\n};\n\nexport default ErrorDialog;\n"]}

package/lib/components/ResultsAccordion/ResultsAccordion.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResultsAccordion.d.ts","sourceRoot":"","sources":["../../../src/components/ResultsAccordion/ResultsAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAUnE,MAAM,WAAW,qBAAqB;IACpC,wGAAwG;IACxG,IAAI,EAAE,iBAAiB,CAAC;IACxB,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0EAA0E;IAC1E,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC;;;;;OAKG;IACH,UAAU,EAAE,MAAM,iBAAiB,CAAC;CACrC;AAED,MAAM,WAAW,4BAA4B;IAC3C,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAQD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAuCrE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,CAmBnF,CAAC"}
+{"version":3,"file":"ResultsAccordion.d.ts","sourceRoot":"","sources":["../../../src/components/ResultsAccordion/ResultsAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAUnE,MAAM,WAAW,qBAAqB;IACpC,wGAAwG;IACxG,IAAI,EAAE,iBAAiB,CAAC;IACxB,sDAAsD;IACtD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;IACxC,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0EAA0E;IAC1E,cAAc,CAAC,EAAE,iBAAiB,CAAC;IACnC;;;;;OAKG;IACH,UAAU,EAAE,MAAM,iBAAiB,CAAC;CACrC;AAED,MAAM,WAAW,4BAA4B;IAC3C,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,6FAA6F;IAC7F,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,sBAAsB;IACtB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAQD;;;GAGG;AACH,eAAO,MAAM,gBAAgB,EAAE,iBAAiB,CAAC,qBAAqB,CAmCrE,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAAE,iBAAiB,CAAC,4BAA4B,CAmBnF,CAAC"}

package/lib/components/ResultsAccordion/ResultsAccordion.js

@@ -2,15 +2,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-ru
 import { useState } from 'preact/hooks';
 import cx from 'classnames';
 import styles from './ResultsAccordion.module.css';
-import ErrorIcon from '../../images/error-24.inline.svg';
-import SuccessIcon from '../../images/success-24.inline.svg';
-import WarningIcon from '../../images/warning-24.inline.svg';
-import ChevronDownIcon from '../../images/chevrondown-20.inline.svg';
+import { ChevronDown20 } from '../icons/ChevronDown20.js';
+import { Error24 } from '../icons/Error24.js';
+import { Warning24 } from '../icons/Warning24.js';
+import { Success24 } from '../icons/Success24.js';
 import { Button } from '../Button/Button.js';
 const resultIcons = {
-    error: _jsx("img", { src: ErrorIcon, alt: "Error" }),
-    warning: _jsx("img", { src: WarningIcon, alt: "Warning" }),
-    success: _jsx("img", { src: SuccessIcon, alt: "Success" }),
+    error: _jsx(Error24, { title: "Error" }),
+    warning: _jsx(Warning24, { title: "Warning" }),
+    success: _jsx(Success24, { title: "Success" }),
 };
 /**
  * Collapsible section for displaying results of a bundle task or other item.
@@ -24,9 +24,7 @@ export const ResultsAccordion = (props) => {
     const contentId = `results-accordion-content-${index}`;
     // Trying to follow the accordion pattern: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
     // except the odd thing is we want to allow a separate click target for a refresh button at the end
-    return (_jsxs("div", { class: styles.root, children: [_jsxs("div", { class: cx(styles.header, styles[result], showContent && styles.expanded), children: [_jsx("h3", { class: styles.headerButtonWrapper, children: _jsxs(Button, { id: headerButtonId, class: styles.headerButton, variant: "custom", "aria-expanded": showContent, "aria-controls": contentId, onClick: () => setIsOpen(!showContent), children: [_jsx("img", { class: cx(styles.expandIcon, !showContent && styles.collapsed), src: ChevronDownIcon, 
-                                    // With the wrapping button, the chevron is presentation-only
-                                    alt: "" }), resultIcons[result], _jsx("div", { class: styles.title, children: name }), headerEndContent && _jsx("div", { class: styles.headerEnd, children: headerEndContent })] }) }), headerCommands && _jsx("div", { class: styles.headerCommands, children: headerCommands })] }), _jsx("div", { id: contentId, class: showContent ? styles.content : styles.contentHidden, children: showContent && getContent() })] }));
+    return (_jsxs("div", { class: styles.root, children: [_jsxs("div", { class: cx(styles.header, styles[result], showContent && styles.expanded), children: [_jsx("h3", { class: styles.headerButtonWrapper, children: _jsxs(Button, { id: headerButtonId, class: styles.headerButton, variant: "custom", "aria-expanded": showContent, "aria-controls": contentId, onClick: () => setIsOpen(!showContent), children: [_jsx(ChevronDown20, { class: cx(styles.expandIcon, !showContent && styles.collapsed) }), resultIcons[result], _jsx("div", { class: styles.title, children: name }), headerEndContent && _jsx("div", { class: styles.headerEnd, children: headerEndContent })] }) }), headerCommands && _jsx("div", { class: styles.headerCommands, children: headerCommands })] }), _jsx("div", { id: contentId, class: showContent ? styles.content : styles.contentHidden, children: showContent && getContent() })] }));
 };
 /**
  * Sub-section to return from `ResultsAccordionProps.getContent`.
@@ -38,6 +36,6 @@ export const ResultsAccordionContent = (props) => {
         return null;
     }
     // Use a fragment so the sub-parts use the parent's flex styling
-    return (_jsxs(_Fragment, { children: [title && _jsx("h4", { class: styles.title, children: title }), itemName && itemValue ? (_jsxs("div", { children: [_jsx("div", { class: styles.itemName, children: itemName }), _jsx("div", { class: styles.itemValue, children: itemValue })] })) : null, children] }));
+    return (_jsxs(_Fragment, { children: [title && _jsx("h4", { class: styles.title, children: title }), itemName && itemValue ? (_jsxs("div", { children: [_jsx("div", { class: styles.itemName, children: itemName }), _jsx("div", { children: itemValue })] })) : null, children] }));
 };
 //# sourceMappingURL=ResultsAccordion.js.map

package/lib/components/ResultsAccordion/ResultsAccordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResultsAccordion.js","sourceRoot":"","sources":["../../../src/components/ResultsAccordion/ResultsAccordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentChildren, FunctionComponent } from 'preact';\nimport { useState } from 'preact/hooks';\nimport cx from 'classnames';\nimport styles from './ResultsAccordion.module.css';\nimport ErrorIcon from '../../images/error-24.inline.svg';\nimport SuccessIcon from '../../images/success-24.inline.svg';\nimport WarningIcon from '../../images/warning-24.inline.svg';\nimport ChevronDownIcon from '../../images/chevrondown-20.inline.svg';\nimport { Button } from '../Button/Button.js';\n\nexport interface ResultsAccordionProps {\n  /** Name of the bundle task or other item (can have formatting, but should not have a header element) */\n  name: ComponentChildren;\n  /** Index used for generating accordion element IDs */\n  index: number;\n  result: 'success' | 'warning' | 'error';\n  /** Info that goes at the end of the header, inside the clickable area */\n  headerEndContent?: string;\n  /** Commands to go at the end of the header, outside the clickable area */\n  headerCommands?: ComponentChildren;\n  /**\n   * Get the content, only if the section is expanded.\n   * Use `CollapsibleResultsSubSection` for formatting (returning multiple sections if needed).\n   *\n   * This callback is to prevent rendering thousands of bundle result details unnecessarily.\n   */\n  getContent: () => ComponentChildren;\n}\n\nexport interface ResultsAccordionContentProps {\n  /** Will be at start of sub-section and styled slightly larger if provided */\n  title?: string;\n  /** Item name, such as \"Input path\". Ignored if `itemValue` is not provided. */\n  itemName?: string;\n  /** Value corresponding to `itemName`, such as the path to a package. Requires `itemName`. */\n  itemValue?: ComponentChildren;\n  /** Custom children */\n  children?: ComponentChildren;\n}\n\nconst resultIcons = {\n  error: <img src={ErrorIcon} alt=\"Error\" />,\n  warning: <img src={WarningIcon} alt=\"Warning\" />,\n  success: <img src={SuccessIcon} alt=\"Success\" />,\n};\n\n/**\n * Collapsible section for displaying results of a bundle task or other item.\n * This handles the header formatting and layout, expanding/collapsing, and displaying content.\n */\nexport const ResultsAccordion: FunctionComponent<ResultsAccordionProps> = (props) => {\n  const { name, result, headerEndContent, headerCommands, getContent, index } = props;\n  const [isOpen, setIsOpen] = useState<boolean | undefined>(undefined);\n  const showContent = isOpen === true || (isOpen === undefined && result === 'error');\n  const headerButtonId = `results-accordion-button-${index}`;\n  const contentId = `results-accordion-content-${index}`;\n\n  // Trying to follow the accordion pattern: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\n  // except the odd thing is we want to allow a separate click target for a refresh button at the end\n  return (\n    <div class={styles.root}>\n      <div class={cx(styles.header, styles[result], showContent && styles.expanded)}>\n        <h3 class={styles.headerButtonWrapper}>\n          <Button\n            id={headerButtonId}\n            class={styles.headerButton}\n            variant=\"custom\"\n            aria-expanded={showContent}\n            aria-controls={contentId}\n            onClick={() => setIsOpen(!showContent)}\n          >\n            <img\n              class={cx(styles.expandIcon, !showContent && styles.collapsed)}\n              src={ChevronDownIcon}\n              // With the wrapping button, the chevron is presentation-only\n              alt=\"\"\n            />\n            {resultIcons[result]}\n            <div class={styles.title}>{name}</div>\n            {headerEndContent && <div class={styles.headerEnd}>{headerEndContent}</div>}\n          </Button>\n        </h3>\n        {headerCommands && <div class={styles.headerCommands}>{headerCommands}</div>}\n      </div>\n      <div id={contentId} class={showContent ? styles.content : styles.contentHidden}>\n        {showContent && getContent()}\n      </div>\n    </div>\n  );\n};\n\n/**\n * Sub-section to return from `ResultsAccordionProps.getContent`.\n * If there are no children and no `itemValue`, the section will be ignored.\n */\nexport const ResultsAccordionContent: FunctionComponent<ResultsAccordionContentProps> = (props) => {\n  const { title, itemName, itemValue, children } = props;\n  if (!children && !(itemValue && itemName)) {\n    return null;\n  }\n\n  // Use a fragment so the sub-parts use the parent's flex styling\n  return (\n    <>\n      {title && <h4 class={styles.title}>{title}</h4>}\n      {itemName && itemValue ? (\n        <div>\n          <div class={styles.itemName}>{itemName}</div>\n          <div class={styles.itemValue}>{itemValue}</div>\n        </div>\n      ) : null}\n      {children}\n    </>\n  );\n};\n"]}
+{"version":3,"file":"ResultsAccordion.js","sourceRoot":"","sources":["../../../src/components/ResultsAccordion/ResultsAccordion.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { ComponentChildren, FunctionComponent } from 'preact';\nimport { useState } from 'preact/hooks';\nimport cx from 'classnames';\nimport styles from './ResultsAccordion.module.css';\nimport { ChevronDown20 } from '../icons/ChevronDown20.js';\nimport { Error24 } from '../icons/Error24.js';\nimport { Warning24 } from '../icons/Warning24.js';\nimport { Success24 } from '../icons/Success24.js';\nimport { Button } from '../Button/Button.js';\n\nexport interface ResultsAccordionProps {\n  /** Name of the bundle task or other item (can have formatting, but should not have a header element) */\n  name: ComponentChildren;\n  /** Index used for generating accordion element IDs */\n  index: number;\n  result: 'success' | 'warning' | 'error';\n  /** Info that goes at the end of the header, inside the clickable area */\n  headerEndContent?: string;\n  /** Commands to go at the end of the header, outside the clickable area */\n  headerCommands?: ComponentChildren;\n  /**\n   * Get the content, only if the section is expanded.\n   * Use `CollapsibleResultsSubSection` for formatting (returning multiple sections if needed).\n   *\n   * This callback is to prevent rendering thousands of bundle result details unnecessarily.\n   */\n  getContent: () => ComponentChildren;\n}\n\nexport interface ResultsAccordionContentProps {\n  /** Will be at start of sub-section and styled slightly larger if provided */\n  title?: string;\n  /** Item name, such as \"Input path\". Ignored if `itemValue` is not provided. */\n  itemName?: string;\n  /** Value corresponding to `itemName`, such as the path to a package. Requires `itemName`. */\n  itemValue?: ComponentChildren;\n  /** Custom children */\n  children?: ComponentChildren;\n}\n\nconst resultIcons = {\n  error: <Error24 title=\"Error\" />,\n  warning: <Warning24 title=\"Warning\" />,\n  success: <Success24 title=\"Success\" />,\n};\n\n/**\n * Collapsible section for displaying results of a bundle task or other item.\n * This handles the header formatting and layout, expanding/collapsing, and displaying content.\n */\nexport const ResultsAccordion: FunctionComponent<ResultsAccordionProps> = (props) => {\n  const { name, result, headerEndContent, headerCommands, getContent, index } = props;\n  const [isOpen, setIsOpen] = useState<boolean | undefined>(undefined);\n  const showContent = isOpen === true || (isOpen === undefined && result === 'error');\n  const headerButtonId = `results-accordion-button-${index}`;\n  const contentId = `results-accordion-content-${index}`;\n\n  // Trying to follow the accordion pattern: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/\n  // except the odd thing is we want to allow a separate click target for a refresh button at the end\n  return (\n    <div class={styles.root}>\n      <div class={cx(styles.header, styles[result], showContent && styles.expanded)}>\n        <h3 class={styles.headerButtonWrapper}>\n          <Button\n            id={headerButtonId}\n            class={styles.headerButton}\n            variant=\"custom\"\n            aria-expanded={showContent}\n            aria-controls={contentId}\n            onClick={() => setIsOpen(!showContent)}\n          >\n            {/* With the wrapping button, the chevron is presentation-only */}\n            <ChevronDown20 class={cx(styles.expandIcon, !showContent && styles.collapsed)} />\n            {resultIcons[result]}\n            <div class={styles.title}>{name}</div>\n            {headerEndContent && <div class={styles.headerEnd}>{headerEndContent}</div>}\n          </Button>\n        </h3>\n        {headerCommands && <div class={styles.headerCommands}>{headerCommands}</div>}\n      </div>\n      <div id={contentId} class={showContent ? styles.content : styles.contentHidden}>\n        {showContent && getContent()}\n      </div>\n    </div>\n  );\n};\n\n/**\n * Sub-section to return from `ResultsAccordionProps.getContent`.\n * If there are no children and no `itemValue`, the section will be ignored.\n */\nexport const ResultsAccordionContent: FunctionComponent<ResultsAccordionContentProps> = (props) => {\n  const { title, itemName, itemValue, children } = props;\n  if (!children && !(itemValue && itemName)) {\n    return null;\n  }\n\n  // Use a fragment so the sub-parts use the parent's flex styling\n  return (\n    <>\n      {title && <h4 class={styles.title}>{title}</h4>}\n      {itemName && itemValue ? (\n        <div>\n          <div class={styles.itemName}>{itemName}</div>\n          <div>{itemValue}</div>\n        </div>\n      ) : null}\n      {children}\n    </>\n  );\n};\n"]}

package/lib/components/StatusBadge/StatusBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAGjF,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAQD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAwE3D,CAAC"}
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAQhD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,wCAAwC,CAAC;AAGjF,MAAM,WAAW,gBAAgB;IAC/B,yCAAyC;IACzC,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAMD,eAAO,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CAyE3D,CAAC"}

package/lib/components/StatusBadge/StatusBadge.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
 import { useCallback, useRef, useState } from 'preact/hooks';
 import { useDraggable } from '../../hooks/useDraggable.js';
 import styles from './StatusBadge.module.css';
@@ -7,8 +7,6 @@ import { Button } from '../Button/Button.js';
 import { useTaskStats } from '../CloudpackProvider/useTaskStats.js';
 import { elementIds } from '../../constants.js';
 const badgeStatusKey = 'cloudpack.badgeStatus';
-const leftChevron = '\u00AB';
-const rightChevron = '\u00BB';
 const buttonHint = '(see details)';
 const buttonHelp = 'Show bundle result details';
 export const StatusBadge = ({ onOpenDialog, pageLoadTimeReport }) => {
@@ -40,7 +38,7 @@ export const StatusBadge = ({ onOpenDialog, pageLoadTimeReport }) => {
     const buttonText = 'Cloudpack: ' + buttonStatusText;
     const buttonAriaLabel = `${buttonText.replace(buttonHint, '')}. ${buttonHelp}`;
     const collapseButtonText = isBadgeCollapsed ? 'Expand Cloudpack badge' : 'Collapse';
-    const badge = (_jsxs("div", { id: elementIds.statusBadgeRoot, ref: badgeRootRef, class: cx(styles.badge, isBadgeCollapsed && styles.collapsed, statusClass), children: [_jsxs("div", { ref: gripRef, class: styles.gripArea, "aria-hidden": true, children: [_jsx("div", { class: styles.grip }), _jsx("div", { class: styles.grip })] }), _jsx(Button, { variant: "custom", class: styles.button, onClick: onOpenDialog, title: buttonHelp, "aria-label": buttonAriaLabel, children: _jsx("div", { class: styles.buttonText, children: buttonText }) }), _jsx("div", { children: statsText }), _jsx(Button, { variant: "custom", class: cx(styles.button, styles.chevron), onClick: toggleBadgeCollapsed, title: collapseButtonText, "aria-label": collapseButtonText, children: isBadgeCollapsed ? leftChevron : rightChevron })] }));
+    const badge = (_jsxs("div", { id: elementIds.statusBadgeRoot, ref: badgeRootRef, class: cx(styles.badge, statusClass), children: [!isBadgeCollapsed && (_jsxs(_Fragment, { children: [_jsxs("div", { ref: gripRef, class: styles.gripArea, "aria-hidden": true, children: [_jsx("div", { class: styles.grip }), _jsx("div", { class: styles.grip }), _jsx("div", { class: styles.grip })] }), _jsx(Button, { variant: "custom", class: styles.button, onClick: onOpenDialog, title: buttonHelp, "aria-label": buttonAriaLabel, children: _jsx("div", { class: styles.buttonText, children: buttonText }) }), _jsx("div", { children: statsText })] })), _jsx(Button, { variant: "iconOnly", class: cx(styles.chevron, isBadgeCollapsed && styles.collapsed), onClick: toggleBadgeCollapsed, title: collapseButtonText, "aria-label": collapseButtonText, children: "\u00BB" })] }));
     return (_jsx("div", { class: styles.fixedOverlay, children: _jsx("div", { class: styles.contentSurface, children: badge }) }));
 };
 /**

package/lib/components/StatusBadge/StatusBadge.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { useDraggable } from '../../hooks/useDraggable.js';\nimport styles from './StatusBadge.module.css';\nimport cx from 'classnames';\nimport { Button } from '../Button/Button.js';\nimport { useTaskStats } from '../CloudpackProvider/useTaskStats.js';\nimport { elementIds } from '../../constants.js';\nimport type { PageLoadTimeReport } from '../../hooks/usePageLoadTimeReporter.js';\nimport type { TaskStats } from '@ms-cloudpack/api-server/browser';\n\nexport interface StatusBadgeProps {\n  /** Callback when the dialog is opened */\n  onOpenDialog: () => void;\n  pageLoadTimeReport: PageLoadTimeReport;\n}\n\nconst badgeStatusKey = 'cloudpack.badgeStatus';\nconst leftChevron = '\\u00AB';\nconst rightChevron = '\\u00BB';\nconst buttonHint = '(see details)';\nconst buttonHelp = 'Show bundle result details';\n\nexport const StatusBadge: FunctionComponent<StatusBadgeProps> = ({ onOpenDialog, pageLoadTimeReport }) => {\n  const badgeRootRef = useRef<HTMLDivElement>(null);\n  const gripRef = useRef<HTMLDivElement>(null);\n  const stats = useTaskStats();\n  const [isBadgeCollapsed, setIsBadgeCollapsed] = useState<boolean>(!!localStorage.getItem(badgeStatusKey));\n\n  const shouldRender = stats.status !== 'unknown';\n\n  const toggleBadgeCollapsed = useCallback(() => {\n    setIsBadgeCollapsed((prev) => {\n      const newCollapsedState = !prev;\n      localStorage.setItem(badgeStatusKey, newCollapsedState ? 'collapsed' : '');\n      return newCollapsedState;\n    });\n  }, []);\n\n  useDraggable({\n    // If we're not yet able to render, don't enable dragging yet.\n    // Otherwise the event handlers won't be attached when the component renders.\n    enabled: shouldRender,\n    containerElementRef: badgeRootRef,\n    dragElementRef: gripRef,\n  });\n\n  if (!shouldRender) {\n    return null;\n  }\n\n  const { buttonStatusText, statusClass, statsText } = processStats(stats, pageLoadTimeReport);\n  // WARNING: If you change this text, also update the `name` used to find the button in\n  // apps/test-start-e2e/src/utilities/verifyOverlay.ts\n  const buttonText = 'Cloudpack: ' + buttonStatusText;\n  const buttonAriaLabel = `${buttonText.replace(buttonHint, '')}. ${buttonHelp}`;\n  const collapseButtonText = isBadgeCollapsed ? 'Expand Cloudpack badge' : 'Collapse';\n\n  const badge = (\n    <div\n      id={elementIds.statusBadgeRoot}\n      ref={badgeRootRef}\n      class={cx(styles.badge, isBadgeCollapsed && styles.collapsed, statusClass)}\n    >\n      <div ref={gripRef} class={styles.gripArea} aria-hidden>\n        <div class={styles.grip} />\n        <div class={styles.grip} />\n      </div>\n      <Button\n        variant=\"custom\"\n        class={styles.button}\n        onClick={onOpenDialog}\n        title={buttonHelp}\n        aria-label={buttonAriaLabel}\n      >\n        <div class={styles.buttonText}>{buttonText}</div>\n      </Button>\n      <div>{statsText}</div>\n      <Button\n        variant=\"custom\"\n        class={cx(styles.button, styles.chevron)}\n        onClick={toggleBadgeCollapsed}\n        title={collapseButtonText}\n        aria-label={collapseButtonText}\n      >\n        {isBadgeCollapsed ? leftChevron : rightChevron}\n      </Button>\n    </div>\n  );\n\n  return (\n    <div class={styles.fixedOverlay}>\n      <div class={styles.contentSurface}>{badge}</div>\n    </div>\n  );\n};\n\n/**\n * Based on the status, get the badge color, button text, and stats text.\n */\nfunction processStats(\n  stats: TaskStats,\n  pltReport: PageLoadTimeReport,\n): {\n  /** class (color) for the badge root */\n  statusClass: string | undefined;\n  /** short status text for the button to open the overlay */\n  buttonStatusText: string;\n  /** stats to display after the button, like \"50% completed, 2 errors, 3 warnings in 500ms\" */\n  statsText: string;\n} {\n  const { status, totalTasks, remainingTasks, totalErrors, totalWarnings } = stats;\n\n  let statusClass: string | undefined;\n  let buttonStatusText: string;\n  let statsText = '';\n\n  if (status === 'idle' && totalTasks) {\n    [statusClass, buttonStatusText] = totalErrors\n      ? [styles.error, `errors ${buttonHint}`]\n      : totalWarnings\n        ? [styles.warning, `warnings ${buttonHint}`]\n        : [styles.success, 'success'];\n  } else {\n    // no styling for this case\n    buttonStatusText = status === 'pending' ? 'bundling...' : 'idle';\n  }\n\n  if (totalTasks) {\n    // \"Number of tasks\" is likely not a meaningful metric for users (and doesn't strictly correspond to\n    // number of packages), so just show either estimated percentage or \"completed\" plus any issue counts.\n    const taskStats = [\n      remainingTasks === 0\n        ? 'completed'\n        : `${(((totalTasks - remainingTasks) / totalTasks) * 100).toFixed(1)}% completed`,\n      totalErrors && `${totalErrors} error${totalErrors > 1 ? 's' : ''}`,\n      totalWarnings && `${totalWarnings} warning${totalWarnings > 1 ? 's' : ''}`,\n    ]\n      .filter(Boolean)\n      .join(', ');\n\n    const pltStat = pltReport.status === 'success' ? ` in ${Math.round(pltReport.pageLoadTime) ?? '??'}ms` : '';\n\n    statsText = taskStats + pltStat;\n  }\n\n  return { statusClass, buttonStatusText, statsText };\n}\n"]}
+{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../../src/components/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { useCallback, useRef, useState } from 'preact/hooks';\nimport { useDraggable } from '../../hooks/useDraggable.js';\nimport styles from './StatusBadge.module.css';\nimport cx from 'classnames';\nimport { Button } from '../Button/Button.js';\nimport { useTaskStats } from '../CloudpackProvider/useTaskStats.js';\nimport { elementIds } from '../../constants.js';\nimport type { PageLoadTimeReport } from '../../hooks/usePageLoadTimeReporter.js';\nimport type { TaskStats } from '@ms-cloudpack/api-server/browser';\n\nexport interface StatusBadgeProps {\n  /** Callback when the dialog is opened */\n  onOpenDialog: () => void;\n  pageLoadTimeReport: PageLoadTimeReport;\n}\n\nconst badgeStatusKey = 'cloudpack.badgeStatus';\nconst buttonHint = '(see details)';\nconst buttonHelp = 'Show bundle result details';\n\nexport const StatusBadge: FunctionComponent<StatusBadgeProps> = ({ onOpenDialog, pageLoadTimeReport }) => {\n  const badgeRootRef = useRef<HTMLDivElement>(null);\n  const gripRef = useRef<HTMLDivElement>(null);\n  const stats = useTaskStats();\n  const [isBadgeCollapsed, setIsBadgeCollapsed] = useState<boolean>(!!localStorage.getItem(badgeStatusKey));\n\n  const shouldRender = stats.status !== 'unknown';\n\n  const toggleBadgeCollapsed = useCallback(() => {\n    setIsBadgeCollapsed((prev) => {\n      const newCollapsedState = !prev;\n      localStorage.setItem(badgeStatusKey, newCollapsedState ? 'collapsed' : '');\n      return newCollapsedState;\n    });\n  }, []);\n\n  useDraggable({\n    // If we're not yet able to render, don't enable dragging yet.\n    // Otherwise the event handlers won't be attached when the component renders.\n    enabled: shouldRender,\n    containerElementRef: badgeRootRef,\n    dragElementRef: gripRef,\n  });\n\n  if (!shouldRender) {\n    return null;\n  }\n\n  const { buttonStatusText, statusClass, statsText } = processStats(stats, pageLoadTimeReport);\n  // WARNING: If you change this text, also update the `name` used to find the button in\n  // apps/test-start-e2e/src/utilities/verifyOverlay.ts\n  const buttonText = 'Cloudpack: ' + buttonStatusText;\n  const buttonAriaLabel = `${buttonText.replace(buttonHint, '')}. ${buttonHelp}`;\n  const collapseButtonText = isBadgeCollapsed ? 'Expand Cloudpack badge' : 'Collapse';\n\n  const badge = (\n    <div id={elementIds.statusBadgeRoot} ref={badgeRootRef} class={cx(styles.badge, statusClass)}>\n      {!isBadgeCollapsed && (\n        <>\n          <div ref={gripRef} class={styles.gripArea} aria-hidden>\n            <div class={styles.grip} />\n            <div class={styles.grip} />\n            <div class={styles.grip} />\n          </div>\n          <Button\n            variant=\"custom\"\n            class={styles.button}\n            onClick={onOpenDialog}\n            title={buttonHelp}\n            aria-label={buttonAriaLabel}\n          >\n            <div class={styles.buttonText}>{buttonText}</div>\n          </Button>\n          <div>{statsText}</div>\n        </>\n      )}\n      <Button\n        variant=\"iconOnly\"\n        class={cx(styles.chevron, isBadgeCollapsed && styles.collapsed)}\n        onClick={toggleBadgeCollapsed}\n        title={collapseButtonText}\n        aria-label={collapseButtonText}\n      >\n        »\n      </Button>\n    </div>\n  );\n\n  return (\n    <div class={styles.fixedOverlay}>\n      <div class={styles.contentSurface}>{badge}</div>\n    </div>\n  );\n};\n\n/**\n * Based on the status, get the badge color, button text, and stats text.\n */\nfunction processStats(\n  stats: TaskStats,\n  pltReport: PageLoadTimeReport,\n): {\n  /** class (color) for the badge root */\n  statusClass: string | undefined;\n  /** short status text for the button to open the overlay */\n  buttonStatusText: string;\n  /** stats to display after the button, like \"50% completed, 2 errors, 3 warnings in 500ms\" */\n  statsText: string;\n} {\n  const { status, totalTasks, remainingTasks, totalErrors, totalWarnings } = stats;\n\n  let statusClass: string | undefined;\n  let buttonStatusText: string;\n  let statsText = '';\n\n  if (status === 'idle' && totalTasks) {\n    [statusClass, buttonStatusText] = totalErrors\n      ? [styles.error, `errors ${buttonHint}`]\n      : totalWarnings\n        ? [styles.warning, `warnings ${buttonHint}`]\n        : [styles.success, 'success'];\n  } else {\n    // no styling for this case\n    buttonStatusText = status === 'pending' ? 'bundling...' : 'idle';\n  }\n\n  if (totalTasks) {\n    // \"Number of tasks\" is likely not a meaningful metric for users (and doesn't strictly correspond to\n    // number of packages), so just show either estimated percentage or \"completed\" plus any issue counts.\n    const taskStats = [\n      remainingTasks === 0\n        ? 'completed'\n        : `${(((totalTasks - remainingTasks) / totalTasks) * 100).toFixed(1)}% completed`,\n      totalErrors && `${totalErrors} error${totalErrors > 1 ? 's' : ''}`,\n      totalWarnings && `${totalWarnings} warning${totalWarnings > 1 ? 's' : ''}`,\n    ]\n      .filter(Boolean)\n      .join(', ');\n\n    const pltStat = pltReport.status === 'success' ? ` in ${Math.round(pltReport.pageLoadTime) ?? '??'}ms` : '';\n\n    statsText = taskStats + pltStat;\n  }\n\n  return { statusClass, buttonStatusText, statsText };\n}\n"]}

package/lib/components/StatusDialog/StatusDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDialog.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/StatusDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAShD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA0C7D,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"StatusDialog.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/StatusDialog.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAYhD,MAAM,WAAW,iBAAiB;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,iBAAiB,CA0D7D,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/lib/components/StatusDialog/StatusDialog.js

@@ -1,11 +1,14 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "preact/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "preact/jsx-runtime";
+import cx from 'classnames';
 import { useCallback, useState } from 'preact/hooks';
 import { TaskList } from './TaskList.js';
 import { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';
 import { Button } from '../Button/Button.js';
 import { Dialog } from '../Dialog/Dialog.js';
-import { Searchbox } from './Searchbox.js';
 import { elementIds } from '../../constants.js';
+import styles from './StatusDialog.module.css';
+import inputStyles from '../Button/inputCommon.module.css';
+import { Refresh20 } from '../icons/Refresh20.js';
 export const StatusDialog = ({ onClose }) => {
     const cloudpack = useCloudpack();
     const [searchFilter, setSearchFilter] = useState('');
@@ -20,7 +23,10 @@ export const StatusDialog = ({ onClose }) => {
         void cloudpack.restartAllTasks.mutate();
     };
     const toggleIssuesOnly = () => void setIssuesOnly((value) => !value);
-    return (_jsx(Dialog, { title: "Cloudpack bundle results", id: elementIds.statusDialogRoot, draggable: true, onClose: onClose, commands: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "primary", iconName: "refresh", onClick: restartAllTasks, disabled: isRestarting, children: "Re-bundle all packages" }), _jsx(Button, { onClick: toggleIssuesOnly, children: issuesOnly ? 'Show all packages' : 'Show packages with issues' }), _jsx(Searchbox, { value: searchFilter, onInput: handleSearchChange, style: { marginLeft: 'auto' } })] }), children: _jsx(TaskList, { searchFilter: searchFilter, issuesOnly: issuesOnly }) }));
+    return (_jsx(Dialog, { title: "Cloudpack bundle results", id: elementIds.statusDialogRoot, draggable: true, 
+        // Prevent closing the dialog and disable all the controls while restarting, to hopefully
+        // avoid confusion (restarting currently involves clearing the whole cache and may take awhile).
+        onClose: isRestarting ? undefined : onClose, commands: _jsxs(_Fragment, { children: [_jsxs(Button, { variant: "primary", onClick: restartAllTasks, disabled: isRestarting, children: [_jsx(Refresh20, { class: cx(isRestarting && styles.spin) }), " Re-bundle all packages"] }), _jsx(Button, { onClick: toggleIssuesOnly, disabled: isRestarting, children: issuesOnly ? 'Show all packages' : 'Show packages with issues' }), _jsx("input", { type: "text", "aria-label": "Search", placeholder: "Search", value: searchFilter, onInput: handleSearchChange, class: cx(styles.searchbox, inputStyles.root, inputStyles.standard), disabled: isRestarting })] }), children: isRestarting ? ('Preparing to re-bundle (the page will refresh when ready)...') : (_jsx(TaskList, { searchFilter: searchFilter, issuesOnly: issuesOnly })) }));
 };
 export default StatusDialog;
 //# sourceMappingURL=StatusDialog.js.map

package/lib/components/StatusDialog/StatusDialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"StatusDialog.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/StatusDialog.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAuB,MAAM,gBAAgB,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMhD,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAChF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,kBAAkB,GAAG,WAAW,CAA4B,CAAC,KAAK,EAAE,EAAE;QAC1E,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,eAAe,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;IAC5D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,KAAK,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;IAC1C,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,KAAK,aAAa,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAErE,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAE,UAAU,CAAC,gBAAgB,EAC/B,SAAS,QACT,OAAO,EAAE,OAAO,EAChB,QAAQ,EACN,8BAKE,KAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,QAAQ,EAAC,SAAS,EAAC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,uCAEpF,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,YAAG,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,2BAA2B,GAAU,EAE5G,KAAC,SAAS,IAAC,KAAK,EAAE,YAAY,EAAE,OAAO,EAAE,kBAAkB,EAAE,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,GAAI,IAC7F,YAGL,KAAC,QAAQ,IAAC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,GAAI,GACzD,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { useCallback, useState } from 'preact/hooks';\nimport { TaskList } from './TaskList.js';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport { Button } from '../Button/Button.js';\nimport { Dialog } from '../Dialog/Dialog.js';\nimport { Searchbox, type SearchboxProps } from './Searchbox.js';\nimport { elementIds } from '../../constants.js';\n\nexport interface StatusDialogProps {\n  onClose: () => void;\n}\n\nexport const StatusDialog: FunctionComponent<StatusDialogProps> = ({ onClose }) => {\n  const cloudpack = useCloudpack();\n  const [searchFilter, setSearchFilter] = useState('');\n  const [issuesOnly, setIssuesOnly] = useState(false);\n  const [isRestarting, setIsRestarting] = useState(false);\n\n  const handleSearchChange = useCallback<SearchboxProps['onInput']>((event) => {\n    event.preventDefault();\n    setSearchFilter((event.target as HTMLInputElement).value);\n  }, []);\n\n  const restartAllTasks = () => {\n    setIsRestarting(true);\n    void cloudpack.restartAllTasks.mutate();\n  };\n\n  const toggleIssuesOnly = () => void setIssuesOnly((value) => !value);\n\n  return (\n    <Dialog\n      title=\"Cloudpack bundle results\"\n      id={elementIds.statusDialogRoot}\n      draggable\n      onClose={onClose}\n      commands={\n        <>\n          {/* Disable the button after it's clicked since the operation may take awhile, and the\n              page will refresh when finished.\n              TODO: ideally we'd have a spinner while restarting (this could probably be done by\n              animating the refresh icon) */}\n          <Button variant=\"primary\" iconName=\"refresh\" onClick={restartAllTasks} disabled={isRestarting}>\n            Re-bundle all packages\n          </Button>\n          <Button onClick={toggleIssuesOnly}>{issuesOnly ? 'Show all packages' : 'Show packages with issues'}</Button>\n          {/* Align the search box to the right */}\n          <Searchbox value={searchFilter} onInput={handleSearchChange} style={{ marginLeft: 'auto' }} />\n        </>\n      }\n    >\n      <TaskList searchFilter={searchFilter} issuesOnly={issuesOnly} />\n    </Dialog>\n  );\n};\n\nexport default StatusDialog;\n"]}
+{"version":3,"file":"StatusDialog.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/StatusDialog.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAG5B,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,2CAA2C,CAAC;AACzE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAChD,OAAO,MAAM,MAAM,2BAA2B,CAAC;AAC/C,OAAO,WAAW,MAAM,kCAAkC,CAAC;AAC3D,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAMlD,MAAM,CAAC,MAAM,YAAY,GAAyC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;IAChF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IACrD,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,kBAAkB,GAAG,WAAW,CAA8C,CAAC,KAAK,EAAE,EAAE;QAC5F,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,eAAe,CAAE,KAAK,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAC;IAC5D,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,eAAe,GAAG,GAAG,EAAE;QAC3B,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,KAAK,SAAS,CAAC,eAAe,CAAC,MAAM,EAAE,CAAC;IAC1C,CAAC,CAAC;IAEF,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,KAAK,aAAa,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC;IAErE,OAAO,CACL,KAAC,MAAM,IACL,KAAK,EAAC,0BAA0B,EAChC,EAAE,EAAE,UAAU,CAAC,gBAAgB,EAC/B,SAAS;QACT,yFAAyF;QACzF,gGAAgG;QAChG,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,EAC3C,QAAQ,EACN,8BAKE,MAAC,MAAM,IAAC,OAAO,EAAC,SAAS,EAAC,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,YAAY,aAExE,KAAC,SAAS,IAAC,KAAK,EAAE,EAAE,CAAC,YAAY,IAAI,MAAM,CAAC,IAAI,CAAC,GAAI,+BAC9C,EACT,KAAC,MAAM,IAAC,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,YAAY,YACtD,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,2BAA2B,GACxD,EACT,gBACE,IAAI,EAAC,MAAM,gBACA,QAAQ,EACnB,WAAW,EAAC,QAAQ,EACpB,KAAK,EAAE,YAAY,EACnB,OAAO,EAAE,kBAAkB,EAC3B,KAAK,EAAE,EAAE,CAAC,MAAM,CAAC,SAAS,EAAE,WAAW,CAAC,IAAI,EAAE,WAAW,CAAC,QAAQ,CAAC,EACnE,QAAQ,EAAE,YAAY,GACtB,IACD,YAGJ,YAAY,CAAC,CAAC,CAAC,CACd,8DAA8D,CAC/D,CAAC,CAAC,CAAC,CACF,KAAC,QAAQ,IAAC,YAAY,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,GAAI,CACjE,GACM,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import cx from 'classnames';\nimport type { FunctionComponent } from 'preact';\nimport type { InputHTMLAttributes } from 'preact/compat';\nimport { useCallback, useState } from 'preact/hooks';\nimport { TaskList } from './TaskList.js';\nimport { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';\nimport { Button } from '../Button/Button.js';\nimport { Dialog } from '../Dialog/Dialog.js';\nimport { elementIds } from '../../constants.js';\nimport styles from './StatusDialog.module.css';\nimport inputStyles from '../Button/inputCommon.module.css';\nimport { Refresh20 } from '../icons/Refresh20.js';\n\nexport interface StatusDialogProps {\n  onClose: () => void;\n}\n\nexport const StatusDialog: FunctionComponent<StatusDialogProps> = ({ onClose }) => {\n  const cloudpack = useCloudpack();\n  const [searchFilter, setSearchFilter] = useState('');\n  const [issuesOnly, setIssuesOnly] = useState(false);\n  const [isRestarting, setIsRestarting] = useState(false);\n\n  const handleSearchChange = useCallback<NonNullable<InputHTMLAttributes['onInput']>>((event) => {\n    event.preventDefault();\n    setSearchFilter((event.target as HTMLInputElement).value);\n  }, []);\n\n  const restartAllTasks = () => {\n    setIsRestarting(true);\n    void cloudpack.restartAllTasks.mutate();\n  };\n\n  const toggleIssuesOnly = () => void setIssuesOnly((value) => !value);\n\n  return (\n    <Dialog\n      title=\"Cloudpack bundle results\"\n      id={elementIds.statusDialogRoot}\n      draggable\n      // Prevent closing the dialog and disable all the controls while restarting, to hopefully\n      // avoid confusion (restarting currently involves clearing the whole cache and may take awhile).\n      onClose={isRestarting ? undefined : onClose}\n      commands={\n        <>\n          {/* Disable the button after it's clicked since the operation may take awhile, and the\n              page will refresh when finished.\n              TODO: ideally we'd have a spinner while restarting (this could probably be done by\n              animating the refresh icon) */}\n          <Button variant=\"primary\" onClick={restartAllTasks} disabled={isRestarting}>\n            {/* the refresh icon spins while restarting to show something is happening */}\n            <Refresh20 class={cx(isRestarting && styles.spin)} /> Re-bundle all packages\n          </Button>\n          <Button onClick={toggleIssuesOnly} disabled={isRestarting}>\n            {issuesOnly ? 'Show all packages' : 'Show packages with issues'}\n          </Button>\n          <input\n            type=\"text\"\n            aria-label=\"Search\"\n            placeholder=\"Search\"\n            value={searchFilter}\n            onInput={handleSearchChange}\n            class={cx(styles.searchbox, inputStyles.root, inputStyles.standard)}\n            disabled={isRestarting}\n          />\n        </>\n      }\n    >\n      {isRestarting ? (\n        'Preparing to re-bundle (the page will refresh when ready)...'\n      ) : (\n        <TaskList searchFilter={searchFilter} issuesOnly={issuesOnly} />\n      )}\n    </Dialog>\n  );\n};\n\nexport default StatusDialog;\n"]}

package/lib/components/StatusDialog/TaskList.d.ts

@@ -1,7 +1,10 @@
 import type { FunctionComponent } from 'preact';
 export interface TaskListProps {
-    searchFilter?: string;
-    issuesOnly?: boolean;
+    searchFilter: string;
+    issuesOnly: boolean;
 }
+/**
+ * List of task results to be displayed inside the StatusDialog.
+ */
 export declare const TaskList: FunctionComponent<TaskListProps>;
 //# sourceMappingURL=TaskList.d.ts.map

package/lib/components/StatusDialog/TaskList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAMhD,MAAM,WAAW,aAAa;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAmBrD,CAAC"}
+{"version":3,"file":"TaskList.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAKhD,MAAM,WAAW,aAAa;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,OAAO,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,iBAAiB,CAAC,aAAa,CAoBrD,CAAC"}

package/lib/components/StatusDialog/TaskList.js

@@ -1,18 +1,21 @@
-import { jsx as _jsx } from "preact/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "preact/jsx-runtime";
 import { TaskStatus } from './TaskStatus.js';
 import { useTaskList } from '../CloudpackProvider/useTaskList.js';
-import styles from './TaskList.module.css';
+/**
+ * List of task results to be displayed inside the StatusDialog.
+ */
 export const TaskList = ({ searchFilter, issuesOnly }) => {
     const taskList = useTaskList();
     let filteredTasks = [...taskList.tasks].sort(sortTasks);
     if (searchFilter) {
         searchFilter = searchFilter.toLowerCase();
-        filteredTasks = filteredTasks.filter(({ name }) => searchFilter && name?.toLowerCase().includes(searchFilter));
+        filteredTasks = filteredTasks.filter(({ name }) => name?.toLowerCase().includes(searchFilter));
     }
     if (issuesOnly) {
         filteredTasks = filteredTasks.filter(({ errors, warnings }) => errors?.length || warnings?.length);
     }
-    return (_jsx("div", { class: styles.root, children: filteredTasks.map((task, index) => (_jsx(TaskStatus, { index: index, task: task }, task.name))) }));
+    // These must be wrapped in a fragment for proper layout by the Dialog
+    return (_jsx(_Fragment, { children: filteredTasks.map((task, index) => (_jsx(TaskStatus, { index: index, task: task }, task.name))) }));
 };
 /**
  * Really the server should be sorting. Get stuff out of the browser.

package/lib/components/StatusDialog/TaskList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,MAAM,MAAM,uBAAuB,CAAC;AAQ3C,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,EAAE;IACzF,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,IAAI,aAAa,GAAG,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxD,IAAI,YAAY,EAAE,CAAC;QACjB,YAAY,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC;QAC1C,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,YAAY,IAAI,IAAI,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC;IACjH,CAAC;IACD,IAAI,UAAU,EAAE,CAAC;QACf,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,CAAC,CAAC;IACrG,CAAC;IAED,OAAO,CACL,cAAK,KAAK,EAAE,MAAM,CAAC,IAAI,YACpB,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,KAAC,UAAU,IAAiB,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,IAAnC,IAAI,CAAC,IAAI,CAA8B,CACzD,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,SAAS,SAAS,CAAC,CAAkB,EAAE,CAAkB;IACvD,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE/C,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;QACxB,OAAO,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC;IAED,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IAEtC,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;QACxB,OAAO,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC;IAED,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC;SAAM,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAChC,OAAO,CAAC,CAAC;IACX,CAAC;SAAM,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAChC,OAAO,CAAC,CAAC,CAAC;IACZ,CAAC;IAED,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClC,CAAC","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { TaskStatus } from './TaskStatus.js';\nimport { useTaskList } from '../CloudpackProvider/useTaskList.js';\nimport styles from './TaskList.module.css';\nimport type { TaskDescription } from '@ms-cloudpack/api-server/browser';\n\nexport interface TaskListProps {\n  searchFilter?: string;\n  issuesOnly?: boolean;\n}\n\nexport const TaskList: FunctionComponent<TaskListProps> = ({ searchFilter, issuesOnly }) => {\n  const taskList = useTaskList();\n\n  let filteredTasks = [...taskList.tasks].sort(sortTasks);\n  if (searchFilter) {\n    searchFilter = searchFilter.toLowerCase();\n    filteredTasks = filteredTasks.filter(({ name }) => searchFilter && name?.toLowerCase().includes(searchFilter));\n  }\n  if (issuesOnly) {\n    filteredTasks = filteredTasks.filter(({ errors, warnings }) => errors?.length || warnings?.length);\n  }\n\n  return (\n    <div class={styles.root}>\n      {filteredTasks.map((task, index) => (\n        <TaskStatus key={task.name} index={index} task={task} />\n      ))}\n    </div>\n  );\n};\n\n/**\n * Really the server should be sorting. Get stuff out of the browser.\n */\nfunction sortTasks(a: TaskDescription, b: TaskDescription): number {\n  const aStatus = a.status === 'pending' ? 1 : 0;\n  const bStatus = b.status === 'pending' ? 1 : 0;\n\n  if (aStatus !== bStatus) {\n    return aStatus > bStatus ? -1 : 1;\n  }\n\n  const aErrors = a.errors?.length || 0;\n  const bErrors = b.errors?.length || 0;\n\n  if (aErrors !== bErrors) {\n    return aErrors > bErrors ? -1 : 1;\n  }\n\n  if (a.name === undefined && b.name === undefined) {\n    return a.id < b.id ? -1 : 1;\n  } else if (a.name === undefined) {\n    return 1;\n  } else if (b.name === undefined) {\n    return -1;\n  }\n\n  return a.name < b.name ? -1 : 1;\n}\n"]}
+{"version":3,"file":"TaskList.js","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAQlE;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAqC,CAAC,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE,EAAE;IACzF,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,IAAI,aAAa,GAAG,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACxD,IAAI,YAAY,EAAE,CAAC;QACjB,YAAY,GAAG,YAAY,CAAC,WAAW,EAAE,CAAC;QAC1C,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC;IACjG,CAAC;IACD,IAAI,UAAU,EAAE,CAAC;QACf,aAAa,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,MAAM,EAAE,MAAM,IAAI,QAAQ,EAAE,MAAM,CAAC,CAAC;IACrG,CAAC;IAED,sEAAsE;IACtE,OAAO,CACL,4BACG,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAClC,KAAC,UAAU,IAAiB,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,IAAnC,IAAI,CAAC,IAAI,CAA8B,CACzD,CAAC,GACD,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF;;GAEG;AACH,SAAS,SAAS,CAAC,CAAkB,EAAE,CAAkB;IACvD,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/C,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE/C,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;QACxB,OAAO,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC;IAED,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IACtC,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,EAAE,MAAM,IAAI,CAAC,CAAC;IAEtC,IAAI,OAAO,KAAK,OAAO,EAAE,CAAC;QACxB,OAAO,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IACpC,CAAC;IAED,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAC9B,CAAC;SAAM,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAChC,OAAO,CAAC,CAAC;IACX,CAAC;SAAM,IAAI,CAAC,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;QAChC,OAAO,CAAC,CAAC,CAAC;IACZ,CAAC;IAED,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;AAClC,CAAC","sourcesContent":["import type { FunctionComponent } from 'preact';\nimport { TaskStatus } from './TaskStatus.js';\nimport { useTaskList } from '../CloudpackProvider/useTaskList.js';\nimport type { TaskDescription } from '@ms-cloudpack/api-server/browser';\n\nexport interface TaskListProps {\n  searchFilter: string;\n  issuesOnly: boolean;\n}\n\n/**\n * List of task results to be displayed inside the StatusDialog.\n */\nexport const TaskList: FunctionComponent<TaskListProps> = ({ searchFilter, issuesOnly }) => {\n  const taskList = useTaskList();\n\n  let filteredTasks = [...taskList.tasks].sort(sortTasks);\n  if (searchFilter) {\n    searchFilter = searchFilter.toLowerCase();\n    filteredTasks = filteredTasks.filter(({ name }) => name?.toLowerCase().includes(searchFilter));\n  }\n  if (issuesOnly) {\n    filteredTasks = filteredTasks.filter(({ errors, warnings }) => errors?.length || warnings?.length);\n  }\n\n  // These must be wrapped in a fragment for proper layout by the Dialog\n  return (\n    <>\n      {filteredTasks.map((task, index) => (\n        <TaskStatus key={task.name} index={index} task={task} />\n      ))}\n    </>\n  );\n};\n\n/**\n * Really the server should be sorting. Get stuff out of the browser.\n */\nfunction sortTasks(a: TaskDescription, b: TaskDescription): number {\n  const aStatus = a.status === 'pending' ? 1 : 0;\n  const bStatus = b.status === 'pending' ? 1 : 0;\n\n  if (aStatus !== bStatus) {\n    return aStatus > bStatus ? -1 : 1;\n  }\n\n  const aErrors = a.errors?.length || 0;\n  const bErrors = b.errors?.length || 0;\n\n  if (aErrors !== bErrors) {\n    return aErrors > bErrors ? -1 : 1;\n  }\n\n  if (a.name === undefined && b.name === undefined) {\n    return a.id < b.id ? -1 : 1;\n  } else if (a.name === undefined) {\n    return 1;\n  } else if (b.name === undefined) {\n    return -1;\n  }\n\n  return a.name < b.name ? -1 : 1;\n}\n"]}

package/lib/components/StatusDialog/TaskStatus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TaskStatus.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAIxE,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,yCAAyC,CAAC;AAEjD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,CAAC;IAC3E,IAAI,EAAE,eAAe,CAAC;CACvB;AAeD;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA0FzD,CAAC"}
+{"version":3,"file":"TaskStatus.d.ts","sourceRoot":"","sources":["../../../src/components/StatusDialog/TaskStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAChD,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAIxE,OAAO,EAGL,KAAK,qBAAqB,EAC3B,MAAM,yCAAyC,CAAC;AAGjD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,qBAAqB,EAAE,OAAO,CAAC;IAC3E,IAAI,EAAE,eAAe,CAAC;CACvB;AAeD;;GAEG;AACH,eAAO,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,CA2FzD,CAAC"}

package/lib/components/StatusDialog/TaskStatus.js

@@ -3,6 +3,7 @@ import { TaskResultItem } from './TaskResultItem.js';
 import { useCloudpack } from '../CloudpackProvider/CloudpackProvider.js';
 import { Button } from '../Button/Button.js';
 import { ResultsAccordion, ResultsAccordionContent, } from '../ResultsAccordion/ResultsAccordion.js';
+import { Refresh20 } from '../icons/Refresh20.js';
 function getCompletion(task) {
     if (task.status === 'pending') {
         return 'Running';
@@ -39,6 +40,6 @@ export const TaskStatus = (props) => {
     // This callback prevents rendering thousands of bundle result details unnecessarily.
     // It could be further optimized with useMemo etc if it's an actual performance issue.
     const getContent = () => (_jsxs(_Fragment, { children: [inputPath ? (_jsx(ResultsAccordionContent, { itemName: "Input path", itemValue: _jsxs(_Fragment, { children: [_jsx(Button, { variant: "link", onClick: () => openPath(inputPath), children: inputPath }), ' ', "(", _jsx(Button, { variant: "link", onClick: openPackageJson, children: "package.json" }), ")"] }) })) : ('No input path found for bundle task. This is a Cloudpack bug. Please report it.'), outputPath && (_jsx(ResultsAccordionContent, { itemName: "Output path", itemValue: _jsx(Button, { variant: "link", onClick: () => openPath(outputPath), children: outputPath }) })), errors.length > 0 && (_jsx(ResultsAccordionContent, { title: "Errors", children: errors.map((item, index) => (_jsx(TaskResultItem, { type: "error", item: item, inputPath: inputPath, index: index }, index))) })), warnings.length > 0 && (_jsx(ResultsAccordionContent, { title: "Warnings", children: warnings.map((item, index) => (_jsx(TaskResultItem, { type: "warning", item: item, inputPath: inputPath, index: index }, index))) }))] }));
-    return (_jsx(ResultsAccordion, { name: name || '<unknown>', index: props.index, result: errors.length ? 'error' : warnings.length ? 'warning' : 'success', headerEndContent: getCompletion(task), headerCommands: _jsx(Button, { variant: "iconOnly", iconName: "refresh", onClick: restartTask, title: "Re-bundle this package", "aria-label": "Re-bundle this package" }), getContent: getContent }));
+    return (_jsx(ResultsAccordion, { name: name || '<unknown>', index: props.index, result: errors.length ? 'error' : warnings.length ? 'warning' : 'success', headerEndContent: getCompletion(task), headerCommands: _jsx(Button, { variant: "iconOnly", onClick: restartTask, title: "Re-bundle this package", "aria-label": "Re-bundle this package", children: _jsx(Refresh20, {}) }), getContent: getContent }));
 };
 //# sourceMappingURL=TaskStatus.js.map