@cloudscape-design/components 3.0.0

package/popover/styles.selectors.js

@@ -0,0 +1,54 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "arrow": "awsui_arrow_xjuzf_1f26x_185",
+  "arrow-outer": "awsui_arrow-outer_xjuzf_1f26x_189",
+  "arrow-inner": "awsui_arrow-inner_xjuzf_1f26x_189",
+  "arrow-position-right-top": "awsui_arrow-position-right-top_xjuzf_1f26x_220",
+  "arrow-position-right-bottom": "awsui_arrow-position-right-bottom_xjuzf_1f26x_220",
+  "arrow-position-left-top": "awsui_arrow-position-left-top_xjuzf_1f26x_223",
+  "arrow-position-left-bottom": "awsui_arrow-position-left-bottom_xjuzf_1f26x_223",
+  "arrow-position-top-center": "awsui_arrow-position-top-center_xjuzf_1f26x_226",
+  "arrow-position-top-right": "awsui_arrow-position-top-right_xjuzf_1f26x_226",
+  "arrow-position-top-left": "awsui_arrow-position-top-left_xjuzf_1f26x_226",
+  "arrow-position-top-responsive": "awsui_arrow-position-top-responsive_xjuzf_1f26x_226",
+  "arrow-position-bottom-center": "awsui_arrow-position-bottom-center_xjuzf_1f26x_229",
+  "arrow-position-bottom-right": "awsui_arrow-position-bottom-right_xjuzf_1f26x_229",
+  "arrow-position-bottom-left": "awsui_arrow-position-bottom-left_xjuzf_1f26x_229",
+  "arrow-position-bottom-responsive": "awsui_arrow-position-bottom-responsive_xjuzf_1f26x_229",
+  "body": "awsui_body_xjuzf_1f26x_325",
+  "body-overflow-visible": "awsui_body-overflow-visible_xjuzf_1f26x_344",
+  "variant-annotation": "awsui_variant-annotation_xjuzf_1f26x_348",
+  "body-size-small": "awsui_body-size-small_xjuzf_1f26x_353",
+  "fixed-width": "awsui_fixed-width_xjuzf_1f26x_356",
+  "body-size-medium": "awsui_body-size-medium_xjuzf_1f26x_360",
+  "body-size-large": "awsui_body-size-large_xjuzf_1f26x_367",
+  "has-dismiss": "awsui_has-dismiss_xjuzf_1f26x_374",
+  "dismiss": "awsui_dismiss_xjuzf_1f26x_379",
+  "dismiss-control": "awsui_dismiss-control_xjuzf_1f26x_386",
+  "header-row": "awsui_header-row_xjuzf_1f26x_390",
+  "header": "awsui_header_xjuzf_1f26x_390",
+  "content": "awsui_content_xjuzf_1f26x_412",
+  "content-overflow-visible": "awsui_content-overflow-visible_xjuzf_1f26x_419",
+  "container": "awsui_container_xjuzf_1f26x_431",
+  "container-arrow": "awsui_container-arrow_xjuzf_1f26x_439",
+  "container-arrow-position-right-top": "awsui_container-arrow-position-right-top_xjuzf_1f26x_443",
+  "container-arrow-position-right-bottom": "awsui_container-arrow-position-right-bottom_xjuzf_1f26x_443",
+  "container-arrow-position-left-top": "awsui_container-arrow-position-left-top_xjuzf_1f26x_455",
+  "container-arrow-position-left-bottom": "awsui_container-arrow-position-left-bottom_xjuzf_1f26x_455",
+  "container-arrow-position-top-center": "awsui_container-arrow-position-top-center_xjuzf_1f26x_467",
+  "container-arrow-position-top-right": "awsui_container-arrow-position-top-right_xjuzf_1f26x_467",
+  "container-arrow-position-top-left": "awsui_container-arrow-position-top-left_xjuzf_1f26x_467",
+  "container-arrow-position-top-responsive": "awsui_container-arrow-position-top-responsive_xjuzf_1f26x_467",
+  "container-arrow-position-bottom-center": "awsui_container-arrow-position-bottom-center_xjuzf_1f26x_483",
+  "container-arrow-position-bottom-right": "awsui_container-arrow-position-bottom-right_xjuzf_1f26x_487",
+  "container-arrow-position-bottom-left": "awsui_container-arrow-position-bottom-left_xjuzf_1f26x_491",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_xjuzf_1f26x_1",
+  "refresh": "awsui_refresh_xjuzf_1f26x_609",
+  "root": "awsui_root_xjuzf_1f26x_631",
+  "trigger": "awsui_trigger_xjuzf_1f26x_643",
+  "trigger-type-text": "awsui_trigger-type-text_xjuzf_1f26x_650",
+  "trigger-inner-text": "awsui_trigger-inner-text_xjuzf_1f26x_679"
+};
+  

package/popover/utils/positions.d.ts

@@ -0,0 +1,15 @@
+import { PopoverProps, InternalPosition, BoundingOffset, BoundingBox } from '../interfaces';
+export interface CalculatePosition {
+    internalPosition: InternalPosition;
+    boundingOffset: BoundingOffset;
+}
+export declare const PRIORITY_MAPPING: Record<PopoverProps.Position, InternalPosition[]>;
+/**
+ * Returns the area of the intersection of passed in rectangles or a null, if there is no intersection
+ */
+export declare function intersectRectangles(rectangles: BoundingOffset[]): number | null;
+/**
+ * A functions that returns the correct popover position based on screen dimensions.
+ */
+export declare function calculatePosition(preferred: PopoverProps.Position, trigger: BoundingOffset, arrow: BoundingBox, body: BoundingBox, container: BoundingOffset, viewport: BoundingOffset, renderWithPortal?: boolean): CalculatePosition;
+//# sourceMappingURL=positions.d.ts.map

package/popover/utils/positions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"positions.d.ts","sourceRoot":"","sources":["../../../../src/popover/utils/positions.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,cAAc,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5F,MAAM,WAAW,iBAAiB;IAChC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,cAAc,EAAE,cAAc,CAAC;CAChC;AAUD,eAAO,MAAM,gBAAgB,EAAE,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,gBAAgB,EAAE,CAiD9E,CAAC;AAiGF;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,UAAU,EAAE,cAAc,EAAE,GAAG,MAAM,GAAG,IAAI,CAsB/E;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,SAAS,EAAE,YAAY,CAAC,QAAQ,EAChC,OAAO,EAAE,cAAc,EACvB,KAAK,EAAE,WAAW,EAClB,IAAI,EAAE,WAAW,EACjB,SAAS,EAAE,cAAc,EACzB,QAAQ,EAAE,cAAc,EAExB,gBAAgB,CAAC,EAAE,OAAO,GACzB,iBAAiB,CAmCnB"}

package/popover/utils/positions.js

@@ -0,0 +1,219 @@
+var ARROW_OFFSET = 12;
+export var PRIORITY_MAPPING = {
+    top: [
+        'top-center',
+        'bottom-center',
+        'right-top',
+        'right-bottom',
+        'left-top',
+        'left-bottom',
+        'top-right',
+        'top-left',
+        'bottom-right',
+        'bottom-left',
+    ],
+    bottom: [
+        'bottom-center',
+        'top-center',
+        'right-top',
+        'right-bottom',
+        'left-top',
+        'left-bottom',
+        'bottom-right',
+        'bottom-left',
+        'top-right',
+        'top-left',
+    ],
+    left: [
+        'left-top',
+        'left-bottom',
+        'right-top',
+        'right-bottom',
+        'bottom-center',
+        'top-center',
+        'bottom-left',
+        'top-left',
+        'bottom-right',
+        'top-right',
+    ],
+    right: [
+        'right-top',
+        'right-bottom',
+        'left-top',
+        'left-bottom',
+        'bottom-center',
+        'top-center',
+        'bottom-right',
+        'top-right',
+        'bottom-left',
+        'top-left',
+    ]
+};
+var RECTANGLE_CALCULATIONS = {
+    'top-center': function (_a) {
+        var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
+        return {
+            top: trigger.top - body.height - arrow.height,
+            left: trigger.left + trigger.width / 2 - body.width / 2,
+            width: body.width,
+            height: body.height
+        };
+    },
+    'top-right': function (_a) {
+        var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
+        return {
+            top: trigger.top - body.height - arrow.height,
+            left: trigger.left,
+            width: body.width,
+            height: body.height
+        };
+    },
+    'top-left': function (_a) {
+        var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
+        return {
+            top: trigger.top - body.height - arrow.height,
+            left: trigger.left + trigger.width - body.width,
+            width: body.width,
+            height: body.height
+        };
+    },
+    'bottom-center': function (_a) {
+        var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
+        return {
+            top: trigger.top + trigger.height + arrow.height,
+            left: trigger.left + trigger.width / 2 - body.width / 2,
+            width: body.width,
+            height: body.height
+        };
+    },
+    'bottom-right': function (_a) {
+        var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
+        return {
+            top: trigger.top + trigger.height + arrow.height,
+            left: trigger.left,
+            width: body.width,
+            height: body.height
+        };
+    },
+    'bottom-left': function (_a) {
+        var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
+        return {
+            top: trigger.top + trigger.height + arrow.height,
+            left: trigger.left + trigger.width - body.width,
+            width: body.width,
+            height: body.height
+        };
+    },
+    'right-top': function (_a) {
+        var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
+        return {
+            top: trigger.top + trigger.height / 2 - ARROW_OFFSET - arrow.height,
+            left: trigger.left + trigger.width + arrow.height,
+            width: body.width,
+            height: body.height
+        };
+    },
+    'right-bottom': function (_a) {
+        var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
+        return {
+            top: trigger.top + trigger.height / 2 - body.height + ARROW_OFFSET + arrow.height,
+            left: trigger.left + trigger.width + arrow.height,
+            width: body.width,
+            height: body.height
+        };
+    },
+    'left-top': function (_a) {
+        var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
+        return {
+            top: trigger.top + trigger.height / 2 - ARROW_OFFSET - arrow.height,
+            left: trigger.left - body.width - arrow.height,
+            width: body.width,
+            height: body.height
+        };
+    },
+    'left-bottom': function (_a) {
+        var body = _a.body, trigger = _a.trigger, arrow = _a.arrow;
+        return {
+            top: trigger.top + trigger.height / 2 - body.height + ARROW_OFFSET + arrow.height,
+            left: trigger.left - body.width - arrow.height,
+            width: body.width,
+            height: body.height
+        };
+    }
+};
+/**
+ * Returns whether one rectangle fits in another.
+ */
+function canRectFit(inner, outer) {
+    return (inner.left >= outer.left &&
+        inner.top >= outer.top &&
+        inner.left + inner.width <= outer.left + outer.width &&
+        inner.top + inner.height <= outer.top + outer.height);
+}
+/**
+ * Returns the area of the intersection of passed in rectangles or a null, if there is no intersection
+ */
+export function intersectRectangles(rectangles) {
+    var boundingOffset = null;
+    for (var _i = 0, rectangles_1 = rectangles; _i < rectangles_1.length; _i++) {
+        var currentRect = rectangles_1[_i];
+        if (!boundingOffset) {
+            boundingOffset = currentRect;
+            continue;
+        }
+        var left = Math.max(boundingOffset.left, currentRect.left);
+        var top_1 = Math.max(boundingOffset.top, currentRect.top);
+        var right = Math.min(boundingOffset.left + boundingOffset.width, currentRect.left + currentRect.width);
+        var bottom = Math.min(boundingOffset.top + boundingOffset.height, currentRect.top + currentRect.height);
+        if (right < left || bottom < top_1) {
+            return null;
+        }
+        boundingOffset = {
+            left: left,
+            top: top_1,
+            width: right - left,
+            height: bottom - top_1
+        };
+    }
+    return boundingOffset && boundingOffset.height * boundingOffset.width;
+}
+/**
+ * A functions that returns the correct popover position based on screen dimensions.
+ */
+export function calculatePosition(preferred, trigger, arrow, body, container, viewport, 
+// the popover is only bound by the viewport if it is rendered in a portal
+renderWithPortal) {
+    var bestPositionOutsideViewport = null;
+    var largestArea = 0;
+    // Attempt to position the popover based on the priority list for this position,
+    // trying to fit it inside the container and inside the viewport.
+    for (var _i = 0, _a = PRIORITY_MAPPING[preferred]; _i < _a.length; _i++) {
+        var internalPosition = _a[_i];
+        var boundingOffset = RECTANGLE_CALCULATIONS[internalPosition]({ body: body, trigger: trigger, arrow: arrow });
+        var fitsInContainer = renderWithPortal || canRectFit(boundingOffset, container);
+        var fitsInViewport = canRectFit(boundingOffset, viewport);
+        if (fitsInContainer && fitsInViewport) {
+            return { internalPosition: internalPosition, boundingOffset: boundingOffset };
+        }
+        var boundingRectangles = [boundingOffset, viewport];
+        if (!renderWithPortal) {
+            boundingRectangles.push(container);
+        }
+        var availableArea = intersectRectangles(boundingRectangles);
+        if (availableArea && availableArea > largestArea) {
+            bestPositionOutsideViewport = { internalPosition: internalPosition, boundingOffset: boundingOffset };
+            largestArea = availableArea;
+        }
+    }
+    // Position it in the best position outside the viewport. The user will need to scroll to view
+    // the contents, but at least it's accessible once they do.
+    if (bestPositionOutsideViewport !== null) {
+        return bestPositionOutsideViewport;
+    }
+    // Resort to right-top
+    return {
+        internalPosition: 'right-top',
+        boundingOffset: RECTANGLE_CALCULATIONS['right-top']({ body: body, trigger: trigger, arrow: arrow })
+    };
+}
+//# sourceMappingURL=positions.js.map

package/popover/utils/positions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"positions.js","sourceRoot":"","sources":["../../../../src/popover/utils/positions.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { PopoverProps, InternalPosition, BoundingOffset, BoundingBox } from '../interfaces';\n\n// A structure describing how the popover should be positioned\nexport interface CalculatePosition {\n  internalPosition: InternalPosition;\n  boundingOffset: BoundingOffset;\n}\n\ninterface ElementGroup {\n  body: BoundingBox;\n  trigger: BoundingOffset;\n  arrow: BoundingBox;\n}\n\nconst ARROW_OFFSET = 12;\n\nexport const PRIORITY_MAPPING: Record<PopoverProps.Position, InternalPosition[]> = {\n  top: [\n    'top-center',\n    'bottom-center',\n    'right-top',\n    'right-bottom',\n    'left-top',\n    'left-bottom',\n    'top-right',\n    'top-left',\n    'bottom-right',\n    'bottom-left',\n  ],\n  bottom: [\n    'bottom-center',\n    'top-center',\n    'right-top',\n    'right-bottom',\n    'left-top',\n    'left-bottom',\n    'bottom-right',\n    'bottom-left',\n    'top-right',\n    'top-left',\n  ],\n  left: [\n    'left-top',\n    'left-bottom',\n    'right-top',\n    'right-bottom',\n    'bottom-center',\n    'top-center',\n    'bottom-left',\n    'top-left',\n    'bottom-right',\n    'top-right',\n  ],\n  right: [\n    'right-top',\n    'right-bottom',\n    'left-top',\n    'left-bottom',\n    'bottom-center',\n    'top-center',\n    'bottom-right',\n    'top-right',\n    'bottom-left',\n    'top-left',\n  ],\n};\n\nconst RECTANGLE_CALCULATIONS: Record<InternalPosition, (r: ElementGroup) => BoundingOffset> = {\n  'top-center': ({ body, trigger, arrow }) => {\n    return {\n      top: trigger.top - body.height - arrow.height,\n      left: trigger.left + trigger.width / 2 - body.width / 2,\n      width: body.width,\n      height: body.height,\n    };\n  },\n  'top-right': ({ body, trigger, arrow }) => {\n    return {\n      top: trigger.top - body.height - arrow.height,\n      left: trigger.left,\n      width: body.width,\n      height: body.height,\n    };\n  },\n  'top-left': ({ body, trigger, arrow }) => {\n    return {\n      top: trigger.top - body.height - arrow.height,\n      left: trigger.left + trigger.width - body.width,\n      width: body.width,\n      height: body.height,\n    };\n  },\n  'bottom-center': ({ body, trigger, arrow }) => {\n    return {\n      top: trigger.top + trigger.height + arrow.height,\n      left: trigger.left + trigger.width / 2 - body.width / 2,\n      width: body.width,\n      height: body.height,\n    };\n  },\n  'bottom-right': ({ body, trigger, arrow }) => {\n    return {\n      top: trigger.top + trigger.height + arrow.height,\n      left: trigger.left,\n      width: body.width,\n      height: body.height,\n    };\n  },\n  'bottom-left': ({ body, trigger, arrow }) => {\n    return {\n      top: trigger.top + trigger.height + arrow.height,\n      left: trigger.left + trigger.width - body.width,\n      width: body.width,\n      height: body.height,\n    };\n  },\n  'right-top': ({ body, trigger, arrow }) => {\n    return {\n      top: trigger.top + trigger.height / 2 - ARROW_OFFSET - arrow.height,\n      left: trigger.left + trigger.width + arrow.height,\n      width: body.width,\n      height: body.height,\n    };\n  },\n  'right-bottom': ({ body, trigger, arrow }) => {\n    return {\n      top: trigger.top + trigger.height / 2 - body.height + ARROW_OFFSET + arrow.height,\n      left: trigger.left + trigger.width + arrow.height,\n      width: body.width,\n      height: body.height,\n    };\n  },\n  'left-top': ({ body, trigger, arrow }) => {\n    return {\n      top: trigger.top + trigger.height / 2 - ARROW_OFFSET - arrow.height,\n      left: trigger.left - body.width - arrow.height,\n      width: body.width,\n      height: body.height,\n    };\n  },\n  'left-bottom': ({ body, trigger, arrow }) => {\n    return {\n      top: trigger.top + trigger.height / 2 - body.height + ARROW_OFFSET + arrow.height,\n      left: trigger.left - body.width - arrow.height,\n      width: body.width,\n      height: body.height,\n    };\n  },\n};\n\n/**\n * Returns whether one rectangle fits in another.\n */\nfunction canRectFit(inner: BoundingOffset, outer: BoundingOffset): boolean {\n  return (\n    inner.left >= outer.left &&\n    inner.top >= outer.top &&\n    inner.left + inner.width <= outer.left + outer.width &&\n    inner.top + inner.height <= outer.top + outer.height\n  );\n}\n\n/**\n * Returns the area of the intersection of passed in rectangles or a null, if there is no intersection\n */\nexport function intersectRectangles(rectangles: BoundingOffset[]): number | null {\n  let boundingOffset: BoundingOffset | null = null;\n  for (const currentRect of rectangles) {\n    if (!boundingOffset) {\n      boundingOffset = currentRect;\n      continue;\n    }\n    const left = Math.max(boundingOffset.left, currentRect.left);\n    const top = Math.max(boundingOffset.top, currentRect.top);\n    const right = Math.min(boundingOffset.left + boundingOffset.width, currentRect.left + currentRect.width);\n    const bottom = Math.min(boundingOffset.top + boundingOffset.height, currentRect.top + currentRect.height);\n    if (right < left || bottom < top) {\n      return null;\n    }\n    boundingOffset = {\n      left,\n      top,\n      width: right - left,\n      height: bottom - top,\n    };\n  }\n  return boundingOffset && boundingOffset.height * boundingOffset.width;\n}\n\n/**\n * A functions that returns the correct popover position based on screen dimensions.\n */\nexport function calculatePosition(\n  preferred: PopoverProps.Position,\n  trigger: BoundingOffset,\n  arrow: BoundingBox,\n  body: BoundingBox,\n  container: BoundingOffset,\n  viewport: BoundingOffset,\n  // the popover is only bound by the viewport if it is rendered in a portal\n  renderWithPortal?: boolean\n): CalculatePosition {\n  let bestPositionOutsideViewport: CalculatePosition | null = null;\n  let largestArea = 0;\n\n  // Attempt to position the popover based on the priority list for this position,\n  // trying to fit it inside the container and inside the viewport.\n  for (const internalPosition of PRIORITY_MAPPING[preferred]) {\n    const boundingOffset = RECTANGLE_CALCULATIONS[internalPosition]({ body, trigger, arrow });\n    const fitsInContainer = renderWithPortal || canRectFit(boundingOffset, container);\n    const fitsInViewport = canRectFit(boundingOffset, viewport);\n    if (fitsInContainer && fitsInViewport) {\n      return { internalPosition, boundingOffset };\n    }\n    const boundingRectangles = [boundingOffset, viewport];\n    if (!renderWithPortal) {\n      boundingRectangles.push(container);\n    }\n    const availableArea = intersectRectangles(boundingRectangles);\n    if (availableArea && availableArea > largestArea) {\n      bestPositionOutsideViewport = { internalPosition, boundingOffset };\n      largestArea = availableArea;\n    }\n  }\n\n  // Position it in the best position outside the viewport. The user will need to scroll to view\n  // the contents, but at least it's accessible once they do.\n  if (bestPositionOutsideViewport !== null) {\n    return bestPositionOutsideViewport;\n  }\n\n  // Resort to right-top\n  return {\n    internalPosition: 'right-top',\n    boundingOffset: RECTANGLE_CALCULATIONS['right-top']({ body, trigger, arrow }),\n  };\n}\n"]}

package/progress-bar/index.d.ts

@@ -0,0 +1,4 @@
+import { ProgressBarProps } from './interfaces';
+export { ProgressBarProps };
+export default function ProgressBar({ value, status, variant, resultButtonText, label, description, additionalInfo, resultText, onResultButtonClick, ...rest }: ProgressBarProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/progress-bar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAOhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,KAAS,EACT,MAAsB,EACtB,OAAsB,EACtB,gBAAgB,EAChB,KAAK,EACL,WAAW,EACX,cAAc,EACd,UAAU,EACV,mBAAmB,EACnB,GAAG,IAAI,EACR,EAAE,gBAAgB,eA8ClB"}

package/progress-bar/index.js

@@ -0,0 +1,35 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import { getBaseProps } from '../internal/base-component';
+import { warnOnce } from '../internal/logging';
+import { fireNonCancelableEvent } from '../internal/events';
+import { useUniqueId } from '../internal/hooks/use-unique-id';
+import { Progress, ResultState, SmallText } from './internal';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+export default function ProgressBar(_a) {
+    var _b = _a.value, value = _b === void 0 ? 0 : _b, _c = _a.status, status = _c === void 0 ? 'in-progress' : _c, _d = _a.variant, variant = _d === void 0 ? 'standalone' : _d, resultButtonText = _a.resultButtonText, label = _a.label, description = _a.description, additionalInfo = _a.additionalInfo, resultText = _a.resultText, onResultButtonClick = _a.onResultButtonClick, rest = __rest(_a, ["value", "status", "variant", "resultButtonText", "label", "description", "additionalInfo", "resultText", "onResultButtonClick"]);
+    var __internalRootRef = useBaseComponent('ProgressBar').__internalRootRef;
+    var baseProps = getBaseProps(rest);
+    var generatedName = useUniqueId('awsui-progress-bar-');
+    var labelId = "".concat(generatedName, "-label");
+    var isInFlash = variant === 'flash';
+    var isInProgressState = status === 'in-progress';
+    if (isInFlash && resultButtonText) {
+        warnOnce('ProgressBar', 'The `resultButtonText` is ignored if you set `variant="flash"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.');
+    }
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root, variant && styles[variant]), ref: __internalRootRef }),
+        React.createElement("div", { className: isInFlash ? styles['flash-container'] : undefined },
+            React.createElement("div", { className: clsx(styles['word-wrap'], styles["label-".concat(variant)]), id: labelId }, label),
+            description && React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined }, description),
+            React.createElement("div", { "aria-live": "polite", "aria-atomic": "true" }, isInProgressState ? (React.createElement(Progress, { value: value, labelId: labelId, isInFlash: isInFlash })) : (React.createElement(ResultState, { resultText: resultText, isInFlash: isInFlash, resultButtonText: resultButtonText, status: status, onClick: function () {
+                    fireNonCancelableEvent(onResultButtonClick);
+                } })))),
+        additionalInfo && React.createElement(SmallText, { color: isInFlash ? 'inherit' : undefined }, additionalInfo)));
+}
+applyDisplayName(ProgressBar, 'ProgressBar');
+//# sourceMappingURL=index.js.map

package/progress-bar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/progress-bar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { warnOnce } from '../internal/logging';\nimport { ProgressBarProps } from './interfaces';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { Progress, ResultState, SmallText } from './internal';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { ProgressBarProps };\n\nexport default function ProgressBar({\n  value = 0,\n  status = 'in-progress',\n  variant = 'standalone',\n  resultButtonText,\n  label,\n  description,\n  additionalInfo,\n  resultText,\n  onResultButtonClick,\n  ...rest\n}: ProgressBarProps) {\n  const { __internalRootRef } = useBaseComponent('ProgressBar');\n  const baseProps = getBaseProps(rest);\n  const generatedName = useUniqueId('awsui-progress-bar-');\n\n  const labelId = `${generatedName}-label`;\n  const isInFlash = variant === 'flash';\n  const isInProgressState = status === 'in-progress';\n\n  if (isInFlash && resultButtonText) {\n    warnOnce(\n      'ProgressBar',\n      'The `resultButtonText` is ignored if you set `variant=\"flash\"`, and the result button is not displayed. Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item in which the progress bar component is embedded.'\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, variant && styles[variant])}\n      ref={__internalRootRef}\n    >\n      <div className={isInFlash ? styles['flash-container'] : undefined}>\n        <div className={clsx(styles['word-wrap'], styles[`label-${variant}`])} id={labelId}>\n          {label}\n        </div>\n        {description && <SmallText color={isInFlash ? 'inherit' : undefined}>{description}</SmallText>}\n        <div aria-live=\"polite\" aria-atomic=\"true\">\n          {isInProgressState ? (\n            <Progress value={value} labelId={labelId} isInFlash={isInFlash} />\n          ) : (\n            <ResultState\n              resultText={resultText}\n              isInFlash={isInFlash}\n              resultButtonText={resultButtonText}\n              status={status}\n              onClick={() => {\n                fireNonCancelableEvent(onResultButtonClick);\n              }}\n            />\n          )}\n        </div>\n      </div>\n      {additionalInfo && <SmallText color={isInFlash ? 'inherit' : undefined}>{additionalInfo}</SmallText>}\n    </div>\n  );\n}\n\napplyDisplayName(ProgressBar, 'ProgressBar');\n"]}

package/progress-bar/interfaces.d.ts

@@ -0,0 +1,64 @@
+import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
+export interface ProgressBarProps extends BaseComponentProps {
+    /**
+     * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.
+     */
+    value?: number;
+    /**
+     * Specifies the status of the progress bar. You can set it to one of the following:
+     *
+     * - `"in-progress"` - Displays a progress bar.
+     * - `"success"` or `"error"` - Displays a result state and replaces the progress element with a status indicator,
+     * `resultText`, and a result button.
+     */
+    status?: ProgressBarProps.Status;
+    /**
+     * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:
+     *
+     * - `"flash"` - Use this variatn when using the progress bar within a flash component.
+     *              Note that the result button isn't displayed when using this variant.
+     *              Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.
+     * - `"key-value"` - Use this variant when using the progress bar within the key-value pairs pattern.
+     * - `"standalone"` Use in all other cases. This is the default value.
+     */
+    variant?: ProgressBarProps.Variant;
+    /**
+     * Specifies the text for the button that's displayed when the `status` is set to `error` or `success`.
+     * If `resultButtonText` is empty, the result button isn't displayed.
+     *
+     * Note: If you use the `flash` variant, the result button isn't displayed.
+     * Add a button using the `action` property of the flashbar item instead.
+     */
+    resultButtonText?: string;
+    /**
+     * Short description of the operation that appears at the top of the component.
+     *
+     * Make sure that you always provide a label for accessibility.
+     */
+    label?: React.ReactNode;
+    /**
+     * More detailed information about the operation that appears below the label.
+     */
+    description?: React.ReactNode;
+    /**
+     * Information that's displayed below the progress bar or status text.
+     */
+    additionalInfo?: React.ReactNode;
+    /**
+     * Content that's displayed when `status` is set to `error` or `success`.
+     */
+    resultText?: React.ReactNode;
+    /**
+     * Called when the user clicks the result state button.
+     *
+     * Note: If you are using the `flash` variant, the result button isn't displayed.
+     * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.
+     */
+    onResultButtonClick?: NonCancelableEventHandler;
+}
+export declare namespace ProgressBarProps {
+    type Status = 'in-progress' | 'success' | 'error';
+    type Variant = 'standalone' | 'flash' | 'key-value';
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/progress-bar/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAEjC;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAEnC;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE7B;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC;CACjD;AAED,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,MAAM,GAAG,aAAa,GAAG,SAAS,GAAG,OAAO,CAAC;IACzD,KAAY,OAAO,GAAG,YAAY,GAAG,OAAO,GAAG,WAAW,CAAC;CAC5D"}

package/progress-bar/interfaces.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=interfaces.js.map

package/progress-bar/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/progress-bar/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface ProgressBarProps extends BaseComponentProps {\n  /**\n   * Indicates the current progress as a percentage. The value must be between 0 and 100. Decimals are rounded.\n   */\n  value?: number;\n\n  /**\n   * Specifies the status of the progress bar. You can set it to one of the following:\n   *\n   * - `\"in-progress\"` - Displays a progress bar.\n   * - `\"success\"` or `\"error\"` - Displays a result state and replaces the progress element with a status indicator,\n   * `resultText`, and a result button.\n   */\n  status?: ProgressBarProps.Status;\n\n  /**\n   * Enables the correct styling of the progress bar in different contexts. You can set it to one of the following:\n   *\n   * - `\"flash\"` - Use this variatn when using the progress bar within a flash component.\n   *              Note that the result button isn't displayed when using this variant.\n   *              Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead of the result button provided by the progress bar.\n   * - `\"key-value\"` - Use this variant when using the progress bar within the key-value pairs pattern.\n   * - `\"standalone\"` Use in all other cases. This is the default value.\n   */\n  variant?: ProgressBarProps.Variant;\n\n  /**\n   * Specifies the text for the button that's displayed when the `status` is set to `error` or `success`.\n   * If `resultButtonText` is empty, the result button isn't displayed.\n   *\n   * Note: If you use the `flash` variant, the result button isn't displayed.\n   * Add a button using the `action` property of the flashbar item instead.\n   */\n  resultButtonText?: string;\n\n  /**\n   * Short description of the operation that appears at the top of the component.\n   *\n   * Make sure that you always provide a label for accessibility.\n   */\n  label?: React.ReactNode;\n\n  /**\n   * More detailed information about the operation that appears below the label.\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Information that's displayed below the progress bar or status text.\n   */\n  additionalInfo?: React.ReactNode;\n\n  /**\n   * Content that's displayed when `status` is set to `error` or `success`.\n   */\n  resultText?: React.ReactNode;\n\n  /**\n   * Called when the user clicks the result state button.\n   *\n   * Note: If you are using the `flash` variant, the result button isn't displayed.\n   * Use the `buttonText` property and the `onButtonClick` event listener of the flashbar item instead.\n   */\n  onResultButtonClick?: NonCancelableEventHandler;\n}\n\nexport namespace ProgressBarProps {\n  export type Status = 'in-progress' | 'success' | 'error';\n  export type Variant = 'standalone' | 'flash' | 'key-value';\n}\n"]}

package/progress-bar/internal.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { BoxProps } from '../box/interfaces';
+import { ProgressBarProps } from './interfaces';
+interface ProgressProps {
+    value: number;
+    isInFlash: boolean;
+    labelId: string;
+}
+export declare const Progress: ({ value, isInFlash, labelId }: ProgressProps) => JSX.Element;
+interface SmallTextProps {
+    color?: BoxProps.Color;
+    children: React.ReactNode;
+}
+export declare const SmallText: ({ color, children }: SmallTextProps) => JSX.Element;
+interface ResultStateProps {
+    isInFlash: boolean;
+    resultText: React.ReactNode;
+    resultButtonText?: string;
+    status: ProgressBarProps.Status;
+    onClick: () => void;
+}
+export declare const ResultState: ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => JSX.Element;
+export {};
+//# sourceMappingURL=internal.d.ts.map

package/progress-bar/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAM7C,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAShD,UAAU,aAAa;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,MAAM,CAAC;CACjB;AACD,eAAO,MAAM,QAAQ,kCAAmC,aAAa,gBA0BpE,CAAC;AAEF,UAAU,cAAc;IACtB,KAAK,CAAC,EAAE,QAAQ,CAAC,KAAK,CAAC;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,SAAS,wBAAyB,cAAc,gBAM5D,CAAC;AAYF,UAAU,gBAAgB;IACxB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,MAAM,EAAE,gBAAgB,CAAC,MAAM,CAAC;IAChC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,iEAAkE,gBAAgB,gBAqBzG,CAAC"}

package/progress-bar/internal.js

@@ -0,0 +1,44 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import InternalBox from '../box/internal';
+import { InternalButton } from '../button/internal';
+import InternalStatusIndicator from '../status-indicator/internal';
+import styles from './styles.css.js';
+var MAX_VALUE = 100;
+var clamp = function (value, lowerLimit, upperLimit) {
+    return Math.max(Math.min(value, upperLimit), lowerLimit);
+};
+export var Progress = function (_a) {
+    var value = _a.value, isInFlash = _a.isInFlash, labelId = _a.labelId;
+    var roundedValue = Math.round(value);
+    var progressValue = clamp(roundedValue, 0, MAX_VALUE);
+    return (React.createElement("div", { className: styles['progress-container'] },
+        React.createElement("progress", { className: clsx(styles.progress, progressValue >= MAX_VALUE && styles.complete, isInFlash && styles['progress-in-flash']), "aria-valuenow": progressValue, "aria-valuemin": 0, "aria-valuemax": MAX_VALUE, max: MAX_VALUE, value: progressValue, "aria-labelledby": labelId }),
+        React.createElement("span", { "aria-hidden": "true", className: styles['percentage-container'] },
+            React.createElement(InternalBox, { className: styles.percentage, variant: "small", color: isInFlash ? 'inherit' : undefined }, "".concat(progressValue, "%")))));
+};
+export var SmallText = function (_a) {
+    var color = _a.color, children = _a.children;
+    return (React.createElement(InternalBox, { className: styles['word-wrap'], variant: "small", display: "block", color: color }, children));
+};
+var ResultButton = function (_a) {
+    var onClick = _a.onClick, children = _a.children;
+    return (React.createElement("div", { className: styles['result-button'] },
+        React.createElement(InternalButton, { formAction: "none", onClick: onClick }, children)));
+};
+export var ResultState = function (_a) {
+    var isInFlash = _a.isInFlash, resultText = _a.resultText, resultButtonText = _a.resultButtonText, status = _a.status, onClick = _a.onClick;
+    var hasResultButton = !!resultButtonText;
+    if (isInFlash) {
+        return (React.createElement("div", { className: styles["result-container-".concat(status)] },
+            React.createElement("span", { className: styles['result-text'] }, resultText)));
+    }
+    return (React.createElement("div", { className: styles["result-container-".concat(status)] },
+        React.createElement("span", { className: clsx(hasResultButton && styles['with-result-button']) },
+            React.createElement(InternalStatusIndicator, { type: status === 'success' ? 'success' : 'error' },
+                React.createElement("span", { className: styles['result-text'] }, resultText))),
+        hasResultButton && React.createElement(ResultButton, { onClick: onClick }, resultButtonText)));
+};
+//# sourceMappingURL=internal.js.map

package/progress-bar/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/progress-bar/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\nimport InternalStatusIndicator from '../status-indicator/internal';\n\nimport { ProgressBarProps } from './interfaces';\nimport styles from './styles.css.js';\n\nconst MAX_VALUE = 100;\n\nconst clamp = (value: number, lowerLimit: number, upperLimit: number) => {\n  return Math.max(Math.min(value, upperLimit), lowerLimit);\n};\n\ninterface ProgressProps {\n  value: number;\n  isInFlash: boolean;\n  labelId: string;\n}\nexport const Progress = ({ value, isInFlash, labelId }: ProgressProps) => {\n  const roundedValue = Math.round(value);\n  const progressValue = clamp(roundedValue, 0, MAX_VALUE);\n\n  return (\n    <div className={styles['progress-container']}>\n      <progress\n        className={clsx(\n          styles.progress,\n          progressValue >= MAX_VALUE && styles.complete,\n          isInFlash && styles['progress-in-flash']\n        )}\n        aria-valuenow={progressValue}\n        aria-valuemin={0}\n        aria-valuemax={MAX_VALUE}\n        max={MAX_VALUE}\n        value={progressValue}\n        aria-labelledby={labelId}\n      />\n      <span aria-hidden=\"true\" className={styles['percentage-container']}>\n        <InternalBox className={styles.percentage} variant=\"small\" color={isInFlash ? 'inherit' : undefined}>\n          {`${progressValue}%`}\n        </InternalBox>\n      </span>\n    </div>\n  );\n};\n\ninterface SmallTextProps {\n  color?: BoxProps.Color;\n  children: React.ReactNode;\n}\n\nexport const SmallText = ({ color, children }: SmallTextProps) => {\n  return (\n    <InternalBox className={styles['word-wrap']} variant=\"small\" display=\"block\" color={color}>\n      {children}\n    </InternalBox>\n  );\n};\n\nconst ResultButton = ({ onClick, children }: ButtonProps) => {\n  return (\n    <div className={styles['result-button']}>\n      <InternalButton formAction=\"none\" onClick={onClick}>\n        {children}\n      </InternalButton>\n    </div>\n  );\n};\n\ninterface ResultStateProps {\n  isInFlash: boolean;\n  resultText: React.ReactNode;\n  resultButtonText?: string;\n  status: ProgressBarProps.Status;\n  onClick: () => void;\n}\n\nexport const ResultState = ({ isInFlash, resultText, resultButtonText, status, onClick }: ResultStateProps) => {\n  const hasResultButton = !!resultButtonText;\n\n  if (isInFlash) {\n    return (\n      <div className={styles[`result-container-${status}`]}>\n        <span className={styles['result-text']}>{resultText}</span>\n      </div>\n    );\n  }\n\n  return (\n    <div className={styles[`result-container-${status}`]}>\n      <span className={clsx(hasResultButton && styles['with-result-button'])}>\n        <InternalStatusIndicator type={status === 'success' ? 'success' : 'error'}>\n          <span className={styles['result-text']}>{resultText}</span>\n        </InternalStatusIndicator>\n      </span>\n      {hasResultButton && <ResultButton onClick={onClick}>{resultButtonText}</ResultButton>}\n    </div>\n  );\n};\n"]}

package/progress-bar/styles.css.js

@@ -0,0 +1,23 @@
+
+    import './styles.scoped.css';
+    export default {
+  "progress": "awsui_progress_11huc_kp8rg_185",
+  "result-state": "awsui_result-state_11huc_kp8rg_199",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_11huc_kp8rg_1",
+  "root": "awsui_root_11huc_kp8rg_221",
+  "with-result-button": "awsui_with-result-button_11huc_kp8rg_232",
+  "result-text": "awsui_result-text_11huc_kp8rg_236",
+  "result-container-error": "awsui_result-container-error_11huc_kp8rg_240",
+  "result-container-success": "awsui_result-container-success_11huc_kp8rg_240",
+  "result-button": "awsui_result-button_11huc_kp8rg_244",
+  "word-wrap": "awsui_word-wrap_11huc_kp8rg_249",
+  "label-flash": "awsui_label-flash_11huc_kp8rg_255",
+  "label-key-value": "awsui_label-key-value_11huc_kp8rg_259",
+  "flash": "awsui_flash_11huc_kp8rg_265",
+  "progress-container": "awsui_progress-container_11huc_kp8rg_269",
+  "percentage-container": "awsui_percentage-container_11huc_kp8rg_276",
+  "percentage": "awsui_percentage_11huc_kp8rg_276",
+  "complete": "awsui_complete_11huc_kp8rg_311",
+  "progress-in-flash": "awsui_progress-in-flash_11huc_kp8rg_326"
+};
+