@cloudscape-design/components 3.0.0

package/flashbar/flash.d.ts

@@ -0,0 +1,9 @@
+import { FlashbarProps } from './interfaces';
+import React from 'react';
+interface Flash extends FlashbarProps.MessageDefinition {
+    className: string;
+    transitionState?: string;
+}
+export declare const Flash: React.ForwardRefExoticComponent<Flash & React.RefAttributes<HTMLDivElement>>;
+export {};
+//# sourceMappingURL=flash.d.ts.map

package/flashbar/flash.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"flash.d.ts","sourceRoot":"","sources":["../../../src/flashbar/flash.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,KAAK,MAAM,OAAO,CAAC;AA6C1B,UAAU,KAAM,SAAQ,aAAa,CAAC,iBAAiB;IACrD,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,KAAK,8EAyEjB,CAAC"}

package/flashbar/flash.js

@@ -0,0 +1,54 @@
+import React from 'react';
+import InternalSpinner from '../spinner/internal';
+import InternalIcon from '../icon/internal';
+import clsx from 'clsx';
+import styles from './styles.css.js';
+import { InternalButton } from '../button/internal';
+import { warnOnce } from '../internal/logging';
+import { isDevelopment } from '../internal/is-development';
+var ICON_TYPES = {
+    success: 'status-positive',
+    warning: 'status-warning',
+    info: 'status-info',
+    error: 'status-negative'
+};
+function actionButton(buttonText, onButtonClick) {
+    return (React.createElement(InternalButton, { onClick: onButtonClick, className: styles['action-button'], formAction: "none" }, buttonText));
+}
+function dismissButton(dismissLabel, onDismiss) {
+    return (React.createElement("div", { className: styles['dismiss-button-wrapper'] },
+        React.createElement(InternalButton, { onClick: onDismiss, className: styles['dismiss-button'], variant: "flashbar-icon", iconName: "close", formAction: "none", ariaLabel: dismissLabel })));
+}
+export var Flash = React.forwardRef(function (_a, ref) {
+    var _b;
+    var header = _a.header, content = _a.content, dismissible = _a.dismissible, dismissLabel = _a.dismissLabel, loading = _a.loading, action = _a.action, buttonText = _a.buttonText, onButtonClick = _a.onButtonClick, onDismiss = _a.onDismiss, className = _a.className, transitionState = _a.transitionState, _c = _a.type, type = _c === void 0 ? 'info' : _c;
+    if (isDevelopment) {
+        if (buttonText && !onButtonClick) {
+            warnOnce('Flashbar', "You provided a `buttonText` prop without an `onButtonClick` handler. This will render a non-interactive action button.");
+        }
+        if (dismissible && !onDismiss) {
+            warnOnce('Flashbar', "You have set the `dismissible` prop without an `onDismiss` handler. This will render a non-interactive dismiss button.");
+        }
+    }
+    var button = action || (buttonText && actionButton(buttonText, onButtonClick));
+    var iconType = ICON_TYPES[type];
+    var icon = loading ? React.createElement(InternalSpinner, null) : React.createElement(InternalIcon, { name: iconType });
+    var effectiveType = loading ? 'info' : type;
+    return (React.createElement("div", { ref: ref, className: clsx(styles.flash, styles["flash-type-".concat(effectiveType)], className, transitionState
+            ? (_b = {},
+                _b[styles.enter] = transitionState === 'enter',
+                _b[styles.entering] = transitionState === 'entering',
+                _b[styles.entered] = transitionState === 'entered',
+                _b[styles.exit] = transitionState === 'exit',
+                _b[styles.exiting] = transitionState === 'exiting',
+                _b[styles.exited] = transitionState === 'exited',
+                _b) : '') },
+        React.createElement("div", { className: clsx(styles['flash-icon'], styles['flash-text']) }, icon),
+        React.createElement("div", { className: styles['flash-body'] },
+            React.createElement("div", { className: clsx(styles['flash-message'], styles['flash-text']) },
+                React.createElement("div", { className: styles['flash-header'] }, header),
+                React.createElement("div", { className: styles['flash-content'] }, content)),
+            button && React.createElement("div", { className: styles['action-button-wrapper'] }, button)),
+        dismissible && dismissButton(dismissLabel, onDismiss)));
+});
+//# sourceMappingURL=flash.js.map

package/flashbar/flash.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flash.js","sourceRoot":"","sources":["../../../src/flashbar/flash.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 { FlashbarProps } from './interfaces';\nimport React from 'react';\nimport InternalSpinner from '../spinner/internal';\nimport InternalIcon from '../icon/internal';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { warnOnce } from '../internal/logging';\nimport { isDevelopment } from '../internal/is-development';\n\nconst ICON_TYPES = {\n  success: 'status-positive',\n  warning: 'status-warning',\n  info: 'status-info',\n  error: 'status-negative',\n} as const;\n\nfunction actionButton(\n  buttonText: FlashbarProps.MessageDefinition['buttonText'],\n  onButtonClick: FlashbarProps.MessageDefinition['onButtonClick']\n) {\n  return (\n    <InternalButton onClick={onButtonClick} className={styles['action-button']} formAction=\"none\">\n      {buttonText}\n    </InternalButton>\n  );\n}\n\nfunction dismissButton(\n  dismissLabel: FlashbarProps.MessageDefinition['dismissLabel'],\n  onDismiss: FlashbarProps.MessageDefinition['onDismiss']\n) {\n  return (\n    <div className={styles['dismiss-button-wrapper']}>\n      <InternalButton\n        onClick={onDismiss}\n        className={styles['dismiss-button']}\n        variant=\"flashbar-icon\"\n        iconName=\"close\"\n        formAction=\"none\"\n        ariaLabel={dismissLabel}\n      />\n    </div>\n  );\n}\n\ninterface Flash extends FlashbarProps.MessageDefinition {\n  className: string;\n  transitionState?: string;\n}\n\nexport const Flash = React.forwardRef(\n  (\n    {\n      header,\n      content,\n      dismissible,\n      dismissLabel,\n      loading,\n      action,\n      buttonText,\n      onButtonClick,\n      onDismiss,\n      className,\n      transitionState,\n      type = 'info',\n    }: Flash,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    if (isDevelopment) {\n      if (buttonText && !onButtonClick) {\n        warnOnce(\n          'Flashbar',\n          `You provided a \\`buttonText\\` prop without an \\`onButtonClick\\` handler. This will render a non-interactive action button.`\n        );\n      }\n\n      if (dismissible && !onDismiss) {\n        warnOnce(\n          'Flashbar',\n          `You have set the \\`dismissible\\` prop without an \\`onDismiss\\` handler. This will render a non-interactive dismiss button.`\n        );\n      }\n    }\n\n    const button = action || (buttonText && actionButton(buttonText, onButtonClick));\n\n    const iconType = ICON_TYPES[type];\n\n    const icon = loading ? <InternalSpinner /> : <InternalIcon name={iconType} />;\n\n    const effectiveType = loading ? 'info' : type;\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(\n          styles.flash,\n          styles[`flash-type-${effectiveType}`],\n          className,\n          transitionState\n            ? {\n                [styles.enter]: transitionState === 'enter',\n                [styles.entering]: transitionState === 'entering',\n                [styles.entered]: transitionState === 'entered',\n                [styles.exit]: transitionState === 'exit',\n                [styles.exiting]: transitionState === 'exiting',\n                [styles.exited]: transitionState === 'exited',\n              }\n            : ''\n        )}\n      >\n        <div className={clsx(styles['flash-icon'], styles['flash-text'])}>{icon}</div>\n        <div className={styles['flash-body']}>\n          <div className={clsx(styles['flash-message'], styles['flash-text'])}>\n            <div className={styles['flash-header']}>{header}</div>\n            <div className={styles['flash-content']}>{content}</div>\n          </div>\n          {button && <div className={styles['action-button-wrapper']}>{button}</div>}\n        </div>\n        {dismissible && dismissButton(dismissLabel, onDismiss)}\n      </div>\n    );\n  }\n);\n"]}

package/flashbar/index.d.ts

@@ -0,0 +1,4 @@
+import { FlashbarProps } from './interfaces';
+export { FlashbarProps };
+export default function Flashbar({ items, ...restProps }: FlashbarProps): JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/flashbar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/flashbar/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAK7C,OAAO,EAAE,aAAa,EAAE,CAAC;AAEzB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAG,SAAS,EAAE,EAAE,aAAa,eAgEtE"}

package/flashbar/index.js

@@ -0,0 +1,53 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import clsx from 'clsx';
+import React from 'react';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+import { getBaseProps } from '../internal/base-component';
+import styles from './styles.css.js';
+import { Flash } from './flash';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import VisualContext from '../internal/components/visual-context';
+import useBaseComponent from '../internal/hooks/use-base-component';
+import { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { TransitionGroup } from 'react-transition-group';
+import { Transition } from '../internal/components/transition';
+import { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';
+export default function Flashbar(_a) {
+    var items = _a.items, restProps = __rest(_a, ["items"]);
+    var __internalRootRef = useBaseComponent('Flashbar').__internalRootRef;
+    var _b = useContainerBreakpoints(['xs']), breakpoint = _b[0], ref = _b[1];
+    var isRefresh = useVisualRefresh(__internalRootRef);
+    var baseProps = getBaseProps(restProps);
+    var mergedRef = useMergeRefs(ref, __internalRootRef);
+    // All the flash items should have ids so we can identify which DOM element is being removed from the DOM to animate it.
+    var motionDisabled = useReducedMotion(ref) || !isRefresh || (items && !items.every(function (item) { return 'id' in item; }));
+    // Motion will be disabled if any of the provided flash messages does not contain an `id`
+    var renderFlashItem = function (item, index) {
+        var _a;
+        return (React.createElement(Flash, __assign({ key: (_a = item.id) !== null && _a !== void 0 ? _a : index, 
+            // eslint-disable-next-line react/forbid-component-props
+            className: clsx(isRefresh ? styles['flash-refresh'] : '') }, item)));
+    };
+    var renderFlashItemsWithTransitions = function (items) {
+        return (React.createElement(React.Fragment, null,
+            React.createElement(TransitionGroup, { component: null }, items &&
+                items.map(function (item, index) {
+                    var _a;
+                    return (React.createElement(Transition, { transitionChangeDelay: { entering: TIMEOUT_FOR_ENTERING_ANIMATION }, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, "in": true }, function (state, transitionRootElement) {
+                        var _a;
+                        return (React.createElement(Flash, __assign({ ref: transitionRootElement, key: (_a = item.id) !== null && _a !== void 0 ? _a : index, transitionState: state, 
+                            // eslint-disable-next-line react/forbid-component-props
+                            className: clsx(isRefresh ? styles['flash-refresh'] : '') }, item)));
+                    }));
+                }))));
+    };
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.flashbar, styles["breakpoint-".concat(breakpoint)]), ref: mergedRef }),
+        React.createElement(VisualContext, { contextName: "flashbar" }, items && (React.createElement(React.Fragment, null, motionDisabled
+            ? items.map(function (item, index) { return renderFlashItem(item, index); })
+            : renderFlashItemsWithTransitions(items))))));
+}
+applyDisplayName(Flashbar, 'Flashbar');
+//# sourceMappingURL=index.js.map

package/flashbar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/flashbar/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 clsx from 'clsx';\nimport React from 'react';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { getBaseProps } from '../internal/base-component';\nimport styles from './styles.css.js';\nimport { Flash } from './flash';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport VisualContext from '../internal/components/visual-context';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useReducedMotion, useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { FlashbarProps } from './interfaces';\nimport { TransitionGroup } from 'react-transition-group';\nimport { Transition } from '../internal/components/transition';\nimport { TIMEOUT_FOR_ENTERING_ANIMATION } from './constant';\n\nexport { FlashbarProps };\n\nexport default function Flashbar({ items, ...restProps }: FlashbarProps) {\n  const { __internalRootRef } = useBaseComponent('Flashbar');\n  const [breakpoint, ref] = useContainerBreakpoints(['xs']);\n  const isRefresh = useVisualRefresh(__internalRootRef);\n  const baseProps = getBaseProps(restProps);\n\n  const mergedRef = useMergeRefs(ref, __internalRootRef);\n\n  // All the flash items should have ids so we can identify which DOM element is being removed from the DOM to animate it.\n  const motionDisabled = useReducedMotion(ref as any) || !isRefresh || (items && !items.every(item => 'id' in item));\n  // Motion will be disabled if any of the provided flash messages does not contain an `id`\n\n  const renderFlashItem = (item: FlashbarProps.MessageDefinition, index: number) => (\n    <Flash\n      key={item.id ?? index}\n      // eslint-disable-next-line react/forbid-component-props\n      className={clsx(isRefresh ? styles['flash-refresh'] : '')}\n      {...item}\n    />\n  );\n  const renderFlashItemsWithTransitions = (items: readonly FlashbarProps.MessageDefinition[]) => {\n    return (\n      <>\n        <TransitionGroup component={null}>\n          {items &&\n            items.map((item, index) => (\n              <Transition\n                transitionChangeDelay={{ entering: TIMEOUT_FOR_ENTERING_ANIMATION }}\n                key={item.id ?? index}\n                in={true}\n              >\n                {(state: string, transitionRootElement: React.Ref<HTMLDivElement> | undefined) => (\n                  <Flash\n                    ref={transitionRootElement}\n                    key={item.id ?? index}\n                    transitionState={state}\n                    // eslint-disable-next-line react/forbid-component-props\n                    className={clsx(isRefresh ? styles['flash-refresh'] : '')}\n                    {...item}\n                  />\n                )}\n              </Transition>\n            ))}\n        </TransitionGroup>\n      </>\n    );\n  };\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.flashbar, styles[`breakpoint-${breakpoint}`])}\n      ref={mergedRef}\n    >\n      <VisualContext contextName=\"flashbar\">\n        {items && (\n          <>\n            {motionDisabled\n              ? items.map((item, index) => renderFlashItem(item, index))\n              : renderFlashItemsWithTransitions(items)}\n          </>\n        )}\n      </VisualContext>\n    </div>\n  );\n}\n\napplyDisplayName(Flashbar, 'Flashbar');\n"]}

package/flashbar/interfaces.d.ts

@@ -0,0 +1,47 @@
+import { BaseComponentProps } from '../internal/base-component';
+import React from 'react';
+import { ButtonProps } from '../button/interfaces';
+export declare namespace FlashbarProps {
+    interface MessageDefinition {
+        header?: React.ReactNode;
+        content?: React.ReactNode;
+        dismissible?: boolean;
+        dismissLabel?: string;
+        loading?: boolean;
+        type?: FlashbarProps.Type;
+        action?: React.ReactNode;
+        id?: string;
+        buttonText?: ButtonProps['children'];
+        onButtonClick?: ButtonProps['onClick'];
+        onDismiss?: ButtonProps['onClick'];
+    }
+    type Type = 'success' | 'warning' | 'info' | 'error';
+}
+export interface FlashbarProps extends BaseComponentProps {
+    /**
+     * Specifies flash messages that appear in the same order that they are listed.
+     * The value is an array of flash message definition objects.
+     *
+     * A flash message object contains the following properties:
+     * * `header` (ReactNode) - Specifies the heading text.
+     * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.
+     * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info`. The default is `info`.
+     * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.
+     * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.
+     * When a user clicks on this button the `onDismiss` handler is called.
+     * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.
+     * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,
+     * our UX guidelines only allow you to add a button.
+     * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.
+     * When a user clicks on this button the `onButtonClick` handler is called. If the `action` property is set, this property is ignored.
+     * **Deprecated**, replaced by `action`.
+     * *`id` (string) - Specifies a unique flash message identifier. This property  is used in two ways:
+     * 1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.
+     * 2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.
+     * @visualrefresh `id` property
+     * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button
+     *   using the `action` property. **Deprecated**, replaced by `action`.
+     */
+    items: ReadonlyArray<FlashbarProps.MessageDefinition>;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/flashbar/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/flashbar/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,iBAAiB;QAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,IAAI,CAAC,EAAE,aAAa,CAAC,IAAI,CAAC;QAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACzB,EAAE,CAAC,EAAE,MAAM,CAAC;QACZ,UAAU,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;QACrC,aAAa,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;QACvC,SAAS,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;KACpC;IAED,KAAY,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;CAC7D;AAED,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACvD"}

package/flashbar/interfaces.js

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

package/flashbar/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/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 React from 'react';\nimport { ButtonProps } from '../button/interfaces';\n\nexport namespace FlashbarProps {\n  export interface MessageDefinition {\n    header?: React.ReactNode;\n    content?: React.ReactNode;\n    dismissible?: boolean;\n    dismissLabel?: string;\n    loading?: boolean;\n    type?: FlashbarProps.Type;\n    action?: React.ReactNode;\n    id?: string;\n    buttonText?: ButtonProps['children'];\n    onButtonClick?: ButtonProps['onClick'];\n    onDismiss?: ButtonProps['onClick'];\n  }\n\n  export type Type = 'success' | 'warning' | 'info' | 'error';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n  /**\n   * Specifies flash messages that appear in the same order that they are listed.\n   * The value is an array of flash message definition objects.\n   *\n   * A flash message object contains the following properties:\n   * * `header` (ReactNode) - Specifies the heading text.\n   * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n   * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info`. The default is `info`.\n   * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n   * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n   * When a user clicks on this button the `onDismiss` handler is called.\n   * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n   * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,\n   * our UX guidelines only allow you to add a button.\n   * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.\n   * When a user clicks on this button the `onButtonClick` handler is called. If the `action` property is set, this property is ignored.\n   * **Deprecated**, replaced by `action`.\n   * *`id` (string) - Specifies a unique flash message identifier. This property  is used in two ways:\n   * 1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.\n   * 2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.\n   * @visualrefresh `id` property\n   * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button\n   *   using the `action` property. **Deprecated**, replaced by `action`.\n   */\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n}\n"]}

package/flashbar/styles.css.js

@@ -0,0 +1,27 @@
+
+    import './styles.scoped.css';
+    export default {
+  "flash-refresh": "awsui_flash-refresh_1q84n_ffmkt_93",
+  "enter": "awsui_enter_1q84n_ffmkt_93",
+  "flash-body": "awsui_flash-body_1q84n_ffmkt_108",
+  "flash-message": "awsui_flash-message_1q84n_ffmkt_108",
+  "flash-header": "awsui_flash-header_1q84n_ffmkt_108",
+  "flash-content": "awsui_flash-content_1q84n_ffmkt_109",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_ffmkt_110",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_ffmkt_111",
+  "flash-icon": "awsui_flash-icon_1q84n_ffmkt_134",
+  "entering": "awsui_entering_1q84n_ffmkt_147",
+  "entered": "awsui_entered_1q84n_ffmkt_168",
+  "exiting": "awsui_exiting_1q84n_ffmkt_273",
+  "flashbar": "awsui_flashbar_1q84n_ffmkt_295",
+  "flash": "awsui_flash_1q84n_ffmkt_93",
+  "flash-text": "awsui_flash-text_1q84n_ffmkt_359",
+  "dismiss-button": "awsui_dismiss-button_1q84n_ffmkt_111",
+  "breakpoint-default": "awsui_breakpoint-default_1q84n_ffmkt_401",
+  "action-button": "awsui_action-button_1q84n_ffmkt_110",
+  "flash-type-success": "awsui_flash-type-success_1q84n_ffmkt_414",
+  "flash-type-error": "awsui_flash-type-error_1q84n_ffmkt_418",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_ffmkt_422",
+  "flash-type-info": "awsui_flash-type-info_1q84n_ffmkt_426"
+};
+