@cloudscape-design/components 3.0.0

package/area-chart/styles.selectors.js

@@ -0,0 +1,19 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "series": "awsui_series_y1yrh_1jtdf_93",
+  "root": "awsui_root_y1yrh_1jtdf_111",
+  "has-default-filter": "awsui_has-default-filter_y1yrh_1jtdf_124",
+  "chart-container": "awsui_chart-container_y1yrh_1jtdf_128",
+  "chart-container__vertical": "awsui_chart-container__vertical_y1yrh_1jtdf_134",
+  "chart-container__horizontal": "awsui_chart-container__horizontal_y1yrh_1jtdf_140",
+  "content": "awsui_content_y1yrh_1jtdf_144",
+  "content--reserve-filter": "awsui_content--reserve-filter_y1yrh_1jtdf_151",
+  "content--reserve-legend": "awsui_content--reserve-legend_y1yrh_1jtdf_155",
+  "series--highlighted": "awsui_series--highlighted_y1yrh_1jtdf_167",
+  "series--dimmed": "awsui_series--dimmed_y1yrh_1jtdf_171",
+  "series--threshold": "awsui_series--threshold_y1yrh_1jtdf_175",
+  "popover-divider": "awsui_popover-divider_y1yrh_1jtdf_180"
+};
+  

package/attribute-editor/additional-info.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface AdditionalInfoProps {
+    children: React.ReactNode;
+}
+export declare const AdditionalInfo: ({ children }: AdditionalInfoProps) => JSX.Element;
+export {};
+//# sourceMappingURL=additional-info.d.ts.map

package/attribute-editor/additional-info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"additional-info.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/additional-info.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,mBAAmB;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,iBAAkB,mBAAmB,gBAE/D,CAAC"}

package/attribute-editor/additional-info.js

@@ -0,0 +1,9 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import styles from './styles.css.js';
+export var AdditionalInfo = function (_a) {
+    var children = _a.children;
+    return (React.createElement("div", { className: styles['additional-info'] }, children));
+};
+//# sourceMappingURL=additional-info.js.map

package/attribute-editor/additional-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"additional-info.js","sourceRoot":"","sources":["../../../src/attribute-editor/additional-info.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAMrC,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,EAAiC;QAA/B,QAAQ,cAAA;IAA4B,OAAA,CACnE,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC,IAAG,QAAQ,CAAO,CAC5D;AAFoE,CAEpE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport styles from './styles.css.js';\n\ninterface AdditionalInfoProps {\n  children: React.ReactNode;\n}\n\nexport const AdditionalInfo = ({ children }: AdditionalInfoProps) => (\n  <div className={styles['additional-info']}>{children}</div>\n);\n"]}

package/attribute-editor/index.d.ts

@@ -0,0 +1,5 @@
+import { AttributeEditorForwardRefType, AttributeEditorProps } from './interfaces';
+declare const AttributeEditor: AttributeEditorForwardRefType;
+export { AttributeEditorProps };
+export default AttributeEditor;
+//# sourceMappingURL=index.d.ts.map

package/attribute-editor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,6BAA6B,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAKnF,QAAA,MAAM,eAAe,+BAgBa,CAAC;AAInC,OAAO,EAAE,oBAAoB,EAAE,CAAC;AAChC,eAAe,eAAe,CAAC"}

package/attribute-editor/index.js

@@ -0,0 +1,15 @@
+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 { applyDisplayName } from '../internal/utils/apply-display-name';
+import InternalAttributeEditor from './internal';
+import useBaseComponent from '../internal/hooks/use-base-component';
+var AttributeEditor = React.forwardRef(function (_a, ref) {
+    var _b = _a.items, items = _b === void 0 ? [] : _b, _c = _a.isItemRemovable, isItemRemovable = _c === void 0 ? function () { return true; } : _c, props = __rest(_a, ["items", "isItemRemovable"]);
+    var baseComponentProps = useBaseComponent('AttributeEditor');
+    return (React.createElement(InternalAttributeEditor, __assign({ items: items, isItemRemovable: isItemRemovable }, props, baseComponentProps, { ref: ref })));
+});
+applyDisplayName(AttributeEditor, 'AttributeEditor');
+export default AttributeEditor;
+//# sourceMappingURL=index.js.map

package/attribute-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/attribute-editor/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,uBAAuB,MAAM,YAAY,CAAC;AACjD,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAEpE,IAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CACtC,UACE,EAA+E,EAC/E,GAAwC;IADtC,IAAA,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EAAE,uBAA4B,EAA5B,eAAe,mBAAG,cAAM,OAAA,IAAI,EAAJ,CAAI,KAAA,EAAK,KAAK,cAApD,4BAAsD,CAAF;IAGpD,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,iBAAiB,CAAC,CAAC;IAC/D,OAAO,CACL,oBAAC,uBAAuB,aACtB,KAAK,EAAE,KAAK,EACZ,eAAe,EAAE,eAAe,IAC5B,KAAK,EACL,kBAAkB,IACtB,GAAG,EAAE,GAAG,IACR,CACH,CAAC;AACJ,CAAC,CAC+B,CAAC;AAEnC,gBAAgB,CAAC,eAAe,EAAE,iBAAiB,CAAC,CAAC;AAGrD,eAAe,eAAe,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { AttributeEditorForwardRefType, AttributeEditorProps } from './interfaces';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport InternalAttributeEditor from './internal';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nconst AttributeEditor = React.forwardRef(\n  <T,>(\n    { items = [], isItemRemovable = () => true, ...props }: AttributeEditorProps<T>,\n    ref: React.Ref<AttributeEditorProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('AttributeEditor');\n    return (\n      <InternalAttributeEditor\n        items={items}\n        isItemRemovable={isItemRemovable}\n        {...props}\n        {...baseComponentProps}\n        ref={ref}\n      />\n    );\n  }\n) as AttributeEditorForwardRefType;\n\napplyDisplayName(AttributeEditor, 'AttributeEditor');\n\nexport { AttributeEditorProps };\nexport default AttributeEditor;\n"]}

package/attribute-editor/interfaces.d.ts

@@ -0,0 +1,82 @@
+import React from 'react';
+import { BaseComponentProps } from '../internal/base-component';
+import { NonCancelableEventHandler } from '../internal/events';
+export interface AttributeEditorForwardRefType {
+    <T>(props: AttributeEditorProps<T> & {
+        ref?: React.Ref<AttributeEditorProps.Ref>;
+    }): JSX.Element;
+}
+export declare namespace AttributeEditorProps {
+    interface IsItemRemovableFunction<T> {
+        (item: T): boolean;
+    }
+    type FieldRenderable<T> = (item: T, itemIndex: number) => React.ReactNode;
+    interface FieldDefinition<T> {
+        label?: React.ReactNode;
+        info?: React.ReactNode;
+        control?: FieldRenderable<T> | React.ReactNode;
+        errorText?: FieldRenderable<T> | React.ReactNode;
+        constraintText?: FieldRenderable<T> | React.ReactNode;
+    }
+    interface RemoveButtonClickDetail {
+        itemIndex: number;
+    }
+    interface Ref {
+        focusRemoveButton(itemIndex: number): void;
+    }
+}
+export interface AttributeEditorProps<T> extends BaseComponentProps {
+    /**
+     * Displayed when there are no items to display.
+     */
+    empty?: React.ReactNode;
+    /**
+     * Displayed below the add button. Use it for additional information related to the attribute editor.
+     */
+    additionalInfo?: React.ReactNode;
+    /**
+     * Specifies the text that's displayed in the add button.
+     */
+    addButtonText: string;
+    /**
+     * Specifies the text that's displayed in the remove button.
+     */
+    removeButtonText: string;
+    /**
+     * Specifies the items that serve as the data source for all rows.
+     * The display of a row is handled by the `definition` property.
+     */
+    items?: ReadonlyArray<T>;
+    /**
+     * Function that determines whether an item is removable. When this function returns `false`, the remove
+     * button is not rendered and the user can't remove the item.
+     * By default, all items are removable.
+     */
+    isItemRemovable?: AttributeEditorProps.IsItemRemovableFunction<T>;
+    /**
+     * Determines whether the add button is disabled.
+     */
+    disableAddButton?: boolean;
+    /**
+     * Defines the editor configuration. Each object in the array represents one form field in the row.
+     * * `label` (ReactNode) - Text label for the form field.
+     * * `info` (ReactNode) - Info link for the form field.
+     * * `errorText` ((item, itemIndex) => ReactNode) - Error message text to display as a control validation message.
+     *    It renders the form field as invalid if the returned value is not `null` or `undefined`.
+     * * `constraintText` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.
+     * * `control` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.
+     *
+     * A maximum of four fields are supported.
+     */
+    definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;
+    /**
+     * Called when add button is clicked.
+     */
+    onAddButtonClick?: NonCancelableEventHandler;
+    /**
+     * Called when remove button is clicked.
+     * The event `detail` contains the index of the corresponding item.
+     */
+    onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/attribute-editor/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAY/D,MAAM,WAAW,6BAA6B;IAC5C,CAAC,CAAC,EAAE,KAAK,EAAE,oBAAoB,CAAC,CAAC,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAA;KAAE,GAAG,GAAG,CAAC,OAAO,CAAC;CAClG;AAED,yBAAiB,oBAAoB,CAAC;IACpC,UAAiB,uBAAuB,CAAC,CAAC;QACxC,CAAC,IAAI,EAAE,CAAC,GAAG,OAAO,CAAC;KACpB;IAED,KAAY,eAAe,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IACjF,UAAiB,eAAe,CAAC,CAAC;QAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,OAAO,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QAC/C,SAAS,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;QACjD,cAAc,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;KACvD;IAED,UAAiB,uBAAuB;QACtC,SAAS,EAAE,MAAM,CAAC;KACnB;IAED,UAAiB,GAAG;QAClB,iBAAiB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;KAC5C;CACF;AAED,MAAM,WAAW,oBAAoB,CAAC,CAAC,CAAE,SAAQ,kBAAkB;IACjE;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,gBAAgB,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;IAEzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,oBAAoB,CAAC,uBAAuB,CAAC,CAAC,CAAC,CAAC;IAElE;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAE3B;;;;;;;;;;OAUG;IACH,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IAEnE;;OAEG;IACH,gBAAgB,CAAC,EAAE,yBAAyB,CAAC;IAE7C;;;OAGG;IACH,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;CAC/F"}

package/attribute-editor/interfaces.js

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

package/attribute-editor/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/attribute-editor/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\n/*\n * HACK: Cast the component to a named parametrized interface.\n *\n * This lets us use React.forwardRef and still let the component have type\n * parameters, and the naming convention lets the documenter know that this is\n * a forwardRef-wrapped component.\n *\n * We don't need to expose this type to customers because it's just a simple\n * function type.\n */\nexport interface AttributeEditorForwardRefType {\n  <T>(props: AttributeEditorProps<T> & { ref?: React.Ref<AttributeEditorProps.Ref> }): JSX.Element;\n}\n\nexport namespace AttributeEditorProps {\n  export interface IsItemRemovableFunction<T> {\n    (item: T): boolean;\n  }\n\n  export type FieldRenderable<T> = (item: T, itemIndex: number) => React.ReactNode;\n  export interface FieldDefinition<T> {\n    label?: React.ReactNode;\n    info?: React.ReactNode;\n    control?: FieldRenderable<T> | React.ReactNode;\n    errorText?: FieldRenderable<T> | React.ReactNode;\n    constraintText?: FieldRenderable<T> | React.ReactNode;\n  }\n\n  export interface RemoveButtonClickDetail {\n    itemIndex: number;\n  }\n\n  export interface Ref {\n    focusRemoveButton(itemIndex: number): void;\n  }\n}\n\nexport interface AttributeEditorProps<T> extends BaseComponentProps {\n  /**\n   * Displayed when there are no items to display.\n   */\n  empty?: React.ReactNode;\n\n  /**\n   * Displayed below the add button. Use it for additional information related to the attribute editor.\n   */\n  additionalInfo?: React.ReactNode;\n\n  /**\n   * Specifies the text that's displayed in the add button.\n   */\n  addButtonText: string;\n\n  /**\n   * Specifies the text that's displayed in the remove button.\n   */\n  removeButtonText: string;\n\n  /**\n   * Specifies the items that serve as the data source for all rows.\n   * The display of a row is handled by the `definition` property.\n   */\n  items?: ReadonlyArray<T>;\n\n  /**\n   * Function that determines whether an item is removable. When this function returns `false`, the remove\n   * button is not rendered and the user can't remove the item.\n   * By default, all items are removable.\n   */\n  isItemRemovable?: AttributeEditorProps.IsItemRemovableFunction<T>;\n\n  /**\n   * Determines whether the add button is disabled.\n   */\n  disableAddButton?: boolean;\n\n  /**\n   * Defines the editor configuration. Each object in the array represents one form field in the row.\n   * * `label` (ReactNode) - Text label for the form field.\n   * * `info` (ReactNode) - Info link for the form field.\n   * * `errorText` ((item, itemIndex) => ReactNode) - Error message text to display as a control validation message.\n   *    It renders the form field as invalid if the returned value is not `null` or `undefined`.\n   * * `constraintText` ((item, itemIndex) => ReactNode) - Text to display as a constraint message below the field.\n   * * `control` ((item, itemIndex) => ReactNode) - A control to use as the input for the field.\n   *\n   * A maximum of four fields are supported.\n   */\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n\n  /**\n   * Called when add button is clicked.\n   */\n  onAddButtonClick?: NonCancelableEventHandler;\n\n  /**\n   * Called when remove button is clicked.\n   * The event `detail` contains the index of the corresponding item.\n   */\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n}\n"]}

package/attribute-editor/internal.d.ts

@@ -0,0 +1,4 @@
+import { AttributeEditorForwardRefType } from './interfaces';
+declare const InternalAttributeEditor: AttributeEditorForwardRefType;
+export default InternalAttributeEditor;
+//# sourceMappingURL=internal.d.ts.map

package/attribute-editor/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/internal.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,6BAA6B,EAAwB,MAAM,cAAc,CAAC;AAanF,QAAA,MAAM,uBAAuB,+BA8DK,CAAC;AAEnC,eAAe,uBAAuB,CAAC"}

package/attribute-editor/internal.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, { useImperativeHandle, useRef } from 'react';
+import clsx from 'clsx';
+import { getBaseProps } from '../internal/base-component';
+import { InternalButton } from '../button/internal';
+import { AdditionalInfo } from './additional-info';
+import { Row } from './row';
+import styles from './styles.css.js';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import InternalBox from '../box/internal';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+var InternalAttributeEditor = React.forwardRef(function (_a, ref) {
+    var additionalInfo = _a.additionalInfo, disableAddButton = _a.disableAddButton, definition = _a.definition, items = _a.items, _b = _a.isItemRemovable, isItemRemovable = _b === void 0 ? function () { return true; } : _b, empty = _a.empty, addButtonText = _a.addButtonText, removeButtonText = _a.removeButtonText, onAddButtonClick = _a.onAddButtonClick, onRemoveButtonClick = _a.onRemoveButtonClick, _c = _a.__internalRootRef, __internalRootRef = _c === void 0 ? null : _c, props = __rest(_a, ["additionalInfo", "disableAddButton", "definition", "items", "isItemRemovable", "empty", "addButtonText", "removeButtonText", "onAddButtonClick", "onRemoveButtonClick", "__internalRootRef"]);
+    var _d = useContainerBreakpoints(['default', 'xxs', 'xs']), breakpoint = _d[0], breakpointRef = _d[1];
+    var removeButtonRefs = useRef([]);
+    var baseProps = getBaseProps(props);
+    var isEmpty = items && items.length === 0;
+    useImperativeHandle(ref, function () { return ({
+        focusRemoveButton: function (rowIndex) {
+            var _a;
+            (_a = removeButtonRefs.current[rowIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }); });
+    var mergedRef = useMergeRefs(breakpointRef, __internalRootRef);
+    return (React.createElement("div", __assign({}, baseProps, { ref: mergedRef, className: clsx(baseProps.className, styles.root) }),
+        React.createElement(InternalBox, { margin: { bottom: 'l' } },
+            isEmpty && React.createElement("div", { className: styles.empty }, empty),
+            items.map(function (item, index) { return (React.createElement(Row, { key: index, index: index, breakpoint: breakpoint, item: item, definition: definition, removable: isItemRemovable(item), removeButtonText: removeButtonText, removeButtonRefs: removeButtonRefs.current, onRemoveButtonClick: onRemoveButtonClick })); })),
+        React.createElement(InternalButton, { className: styles['add-button'], disabled: disableAddButton, onClick: onAddButtonClick, formAction: "none" }, addButtonText),
+        additionalInfo && React.createElement(AdditionalInfo, null, additionalInfo)));
+});
+export default InternalAttributeEditor;
+//# sourceMappingURL=internal.js.map

package/attribute-editor/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/attribute-editor/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, { useImperativeHandle, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getBaseProps } from '../internal/base-component';\n\nimport { ButtonProps } from '../button/interfaces';\nimport { InternalButton } from '../button/internal';\n\nimport { AttributeEditorForwardRefType, AttributeEditorProps } from './interfaces';\nimport { AdditionalInfo } from './additional-info';\nimport { Row } from './row';\n\nimport styles from './styles.css.js';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { SomeRequired } from '../internal/types';\n\ntype InternalAttributeEditorProps<T> = SomeRequired<AttributeEditorProps<T>, 'items'> & InternalBaseComponentProps;\n\nconst InternalAttributeEditor = React.forwardRef(\n  <T,>(\n    {\n      additionalInfo,\n      disableAddButton,\n      definition,\n      items,\n      isItemRemovable = () => true,\n      empty,\n      addButtonText,\n      removeButtonText,\n      onAddButtonClick,\n      onRemoveButtonClick,\n      __internalRootRef = null,\n      ...props\n    }: InternalAttributeEditorProps<T>,\n    ref: React.Ref<AttributeEditorProps.Ref>\n  ) => {\n    const [breakpoint, breakpointRef] = useContainerBreakpoints(['default', 'xxs', 'xs']);\n    const removeButtonRefs = useRef<Array<ButtonProps.Ref | undefined>>([]);\n\n    const baseProps = getBaseProps(props);\n    const isEmpty = items && items.length === 0;\n\n    useImperativeHandle(ref, () => ({\n      focusRemoveButton(rowIndex: number) {\n        removeButtonRefs.current[rowIndex]?.focus();\n      },\n    }));\n\n    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n    return (\n      <div {...baseProps} ref={mergedRef} className={clsx(baseProps.className, styles.root)}>\n        <InternalBox margin={{ bottom: 'l' }}>\n          {isEmpty && <div className={styles.empty}>{empty}</div>}\n          {items.map((item, index) => (\n            <Row\n              key={index}\n              index={index}\n              breakpoint={breakpoint}\n              item={item}\n              definition={definition}\n              removable={isItemRemovable(item)}\n              removeButtonText={removeButtonText}\n              removeButtonRefs={removeButtonRefs.current}\n              onRemoveButtonClick={onRemoveButtonClick}\n            />\n          ))}\n        </InternalBox>\n        <InternalButton\n          className={styles['add-button']}\n          disabled={disableAddButton}\n          onClick={onAddButtonClick}\n          formAction=\"none\"\n        >\n          {addButtonText}\n        </InternalButton>\n        {additionalInfo && <AdditionalInfo>{additionalInfo}</AdditionalInfo>}\n      </div>\n    );\n  }\n) as AttributeEditorForwardRefType;\n\nexport default InternalAttributeEditor;\n"]}

package/attribute-editor/row.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ColumnLayoutBreakpoint } from '../column-layout/internal';
+import { AttributeEditorProps } from './interfaces';
+import { ButtonProps } from '../button/interfaces';
+import { NonCancelableEventHandler } from '../internal/events';
+export interface RowProps<T> {
+    breakpoint: ColumnLayoutBreakpoint | null;
+    item: T;
+    definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;
+    index: number;
+    removable: boolean;
+    removeButtonText: string;
+    removeButtonRefs: Array<ButtonProps.Ref | undefined>;
+    onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;
+}
+export declare const Row: React.MemoExoticComponent<(<T>({ breakpoint, item, definition, index, removable, removeButtonText, removeButtonRefs, onRemoveButtonClick, }: RowProps<T>) => JSX.Element)>;
+//# sourceMappingURL=row.d.ts.map

package/attribute-editor/row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.d.ts","sourceRoot":"","sources":["../../../src/attribute-editor/row.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAE3C,OAA6B,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AACzF,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAsBvF,MAAM,WAAW,QAAQ,CAAC,CAAC;IACzB,UAAU,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC1C,IAAI,EAAE,CAAC,CAAC;IACR,UAAU,EAAE,aAAa,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,CAAC;IACnE,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,OAAO,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,gBAAgB,EAAE,KAAK,CAAC,WAAW,CAAC,GAAG,GAAG,SAAS,CAAC,CAAC;IACrD,mBAAmB,CAAC,EAAE,yBAAyB,CAAC,oBAAoB,CAAC,uBAAuB,CAAC,CAAC;CAC/F;AAID,eAAO,MAAM,GAAG,4KA2Df,CAAC"}

package/attribute-editor/row.js

@@ -0,0 +1,50 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import InternalBox from '../box/internal';
+import styles from './styles.css.js';
+import React, { useCallback } from 'react';
+import InternalFormField from '../form-field/internal';
+import InternalColumnLayout from '../column-layout/internal';
+import { fireNonCancelableEvent } from '../internal/events';
+import InternalGrid from '../grid/internal';
+import { InternalButton } from '../button/internal';
+import clsx from 'clsx';
+var Divider = function () { return React.createElement(InternalBox, { className: styles.divider, padding: { top: 'l' } }); };
+var Attribute = function (_a) {
+    var control = _a.control, hideLabel = _a.hideLabel, props = __rest(_a, ["control", "hideLabel"]);
+    return (React.createElement(InternalFormField, __assign({ __hideLabel: hideLabel }, props, { className: styles.field, stretch: true }), control));
+};
+var GRID_DEFINITION = [{ colspan: { "default": 12, xs: 9 } }];
+var REMOVABLE_GRID_DEFINITION = [{ colspan: { "default": 12, xs: 9 } }, { colspan: { "default": 12, xs: 3 } }];
+export var Row = React.memo(function (_a) {
+    var breakpoint = _a.breakpoint, item = _a.item, definition = _a.definition, index = _a.index, removable = _a.removable, removeButtonText = _a.removeButtonText, removeButtonRefs = _a.removeButtonRefs, onRemoveButtonClick = _a.onRemoveButtonClick;
+    var isNarrowViewport = breakpoint === 'default' || breakpoint === 'xxs';
+    var isWideViewport = !isNarrowViewport;
+    var handleRemoveClick = useCallback(function () {
+        fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });
+    }, [onRemoveButtonClick, index]);
+    var render = function (item, itemIndex, slot) {
+        return typeof slot === 'function' ? slot(item, itemIndex) : slot;
+    };
+    return (React.createElement(InternalBox, { className: styles.row, margin: { bottom: 's' } },
+        React.createElement(InternalGrid, { __breakpoint: breakpoint, gridDefinition: removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION },
+            React.createElement(InternalColumnLayout, { className: styles['row-control'], columns: definition.length, __breakpoint: breakpoint }, definition.map(function (_a, defIndex) {
+                var info = _a.info, label = _a.label, constraintText = _a.constraintText, errorText = _a.errorText, control = _a.control;
+                return (React.createElement(Attribute, { key: defIndex, label: label, info: info, constraintText: constraintText && render(item, index, constraintText), errorText: errorText && render(item, index, errorText), control: control && render(item, index, control), hideLabel: isWideViewport && index > 0 }));
+            })),
+            removable && (React.createElement(ButtonContainer, { index: index, isNarrowViewport: isNarrowViewport },
+                React.createElement(InternalButton, { className: styles['remove-button'], formAction: "none", ref: function (ref) {
+                        removeButtonRefs[index] = ref !== null && ref !== void 0 ? ref : undefined;
+                    }, onClick: handleRemoveClick }, removeButtonText)))),
+        isNarrowViewport && React.createElement(Divider, null)));
+});
+var ButtonContainer = function (_a) {
+    var _b;
+    var index = _a.index, children = _a.children, isNarrowViewport = _a.isNarrowViewport;
+    return (React.createElement("div", { className: clsx((_b = {},
+            _b[styles['button-container']] = !isNarrowViewport && index === 0,
+            _b[styles['right-align']] = isNarrowViewport,
+            _b)) }, children));
+};
+//# sourceMappingURL=row.js.map

package/attribute-editor/row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"row.js","sourceRoot":"","sources":["../../../src/attribute-editor/row.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAC1C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAC3C,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,oBAAgD,MAAM,2BAA2B,CAAC;AAGzF,OAAO,EAAE,sBAAsB,EAA6B,MAAM,oBAAoB,CAAC;AACvF,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,IAAM,OAAO,GAAG,cAAM,OAAA,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAI,EAAjE,CAAiE,CAAC;AAWxF,IAAM,SAAS,GAAG,UAAC,EAAgD;IAA9C,IAAA,OAAO,aAAA,EAAE,SAAS,eAAA,EAAK,KAAK,cAA9B,wBAAgC,CAAF;IAAuB,OAAA,CACtE,oBAAC,iBAAiB,aAAC,WAAW,EAAE,SAAS,IAAM,KAAK,IAAE,SAAS,EAAE,MAAM,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,KACzF,OAAO,CACU,CACrB,CAAA;CAAA,CAAC;AAaF,IAAM,eAAe,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,SAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;AAC9D,IAAM,yBAAyB,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,SAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,SAAO,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;AAC7G,MAAM,CAAC,IAAM,GAAG,GAAG,KAAK,CAAC,IAAI,CAC3B,UAAK,EASS;QARZ,UAAU,gBAAA,EACV,IAAI,UAAA,EACJ,UAAU,gBAAA,EACV,KAAK,WAAA,EACL,SAAS,eAAA,EACT,gBAAgB,sBAAA,EAChB,gBAAgB,sBAAA,EAChB,mBAAmB,yBAAA;IAEnB,IAAM,gBAAgB,GAAG,UAAU,KAAK,SAAS,IAAI,UAAU,KAAK,KAAK,CAAC;IAC1E,IAAM,cAAc,GAAG,CAAC,gBAAgB,CAAC;IAEzC,IAAM,iBAAiB,GAAG,WAAW,CAAC;QACpC,sBAAsB,CAAC,mBAAmB,EAAE,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,mBAAmB,EAAE,KAAK,CAAC,CAAC,CAAC;IAEjC,IAAM,MAAM,GAAG,UAAC,IAAO,EAAE,SAAiB,EAAE,IAA+D;QACzG,OAAA,OAAO,IAAI,KAAK,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI;IAAzD,CAAyD,CAAC;IAE5D,OAAO,CACL,oBAAC,WAAW,IAAC,SAAS,EAAE,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE;QACzD,oBAAC,YAAY,IACX,YAAY,EAAE,UAAU,EACxB,cAAc,EAAE,SAAS,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,eAAe;YAEvE,oBAAC,oBAAoB,IAAC,SAAS,EAAE,MAAM,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,UAAU,CAAC,MAAM,EAAE,YAAY,EAAE,UAAU,IACzG,UAAU,CAAC,GAAG,CAAC,UAAC,EAAmD,EAAE,QAAQ;oBAA3D,IAAI,UAAA,EAAE,KAAK,WAAA,EAAE,cAAc,oBAAA,EAAE,SAAS,eAAA,EAAE,OAAO,aAAA;gBAAiB,OAAA,CACjF,oBAAC,SAAS,IACR,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,EACV,cAAc,EAAE,cAAc,IAAI,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,cAAc,CAAC,EACrE,SAAS,EAAE,SAAS,IAAI,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,SAAS,CAAC,EACtD,OAAO,EAAE,OAAO,IAAI,MAAM,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,CAAC,EAChD,SAAS,EAAE,cAAc,IAAI,KAAK,GAAG,CAAC,GACtC,CACH;YAVkF,CAUlF,CAAC,CACmB;YACtB,SAAS,IAAI,CACZ,oBAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,gBAAgB,EAAE,gBAAgB;gBAC/D,oBAAC,cAAc,IACb,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAClC,UAAU,EAAC,MAAM,EACjB,GAAG,EAAE,UAAA,GAAG;wBACN,gBAAgB,CAAC,KAAK,CAAC,GAAG,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,SAAS,CAAC;oBAC7C,CAAC,EACD,OAAO,EAAE,iBAAiB,IAEzB,gBAAgB,CACF,CACD,CACnB,CACY;QACd,gBAAgB,IAAI,oBAAC,OAAO,OAAG,CACpB,CACf,CAAC;AACJ,CAAC,CACF,CAAC;AAQF,IAAM,eAAe,GAAG,UAAC,EAAsD;;QAApD,KAAK,WAAA,EAAE,QAAQ,cAAA,EAAE,gBAAgB,sBAAA;IAAwB,OAAA,CAClF,6BACE,SAAS,EAAE,IAAI;YACb,GAAC,MAAM,CAAC,kBAAkB,CAAC,IAAG,CAAC,gBAAgB,IAAI,KAAK,KAAK,CAAC;YAC9D,GAAC,MAAM,CAAC,aAAa,CAAC,IAAG,gBAAgB;gBACzC,IAED,QAAQ,CACL,CACP;AATmF,CASnF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport InternalBox from '../box/internal';\nimport styles from './styles.css.js';\nimport React, { useCallback } from 'react';\nimport InternalFormField from '../form-field/internal';\nimport InternalColumnLayout, { ColumnLayoutBreakpoint } from '../column-layout/internal';\nimport { AttributeEditorProps } from './interfaces';\nimport { ButtonProps } from '../button/interfaces';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport InternalGrid from '../grid/internal';\nimport { InternalButton } from '../button/internal';\nimport clsx from 'clsx';\n\nconst Divider = () => <InternalBox className={styles.divider} padding={{ top: 'l' }} />;\n\ninterface AttributeProps {\n  info?: React.ReactNode;\n  label?: React.ReactNode;\n  errorText?: React.ReactNode;\n  control?: React.ReactNode;\n  constraintText?: React.ReactNode;\n  hideLabel?: boolean;\n}\n\nconst Attribute = ({ control, hideLabel, ...props }: AttributeProps) => (\n  <InternalFormField __hideLabel={hideLabel} {...props} className={styles.field} stretch={true}>\n    {control}\n  </InternalFormField>\n);\n\nexport interface RowProps<T> {\n  breakpoint: ColumnLayoutBreakpoint | null;\n  item: T;\n  definition: ReadonlyArray<AttributeEditorProps.FieldDefinition<T>>;\n  index: number;\n  removable: boolean;\n  removeButtonText: string;\n  removeButtonRefs: Array<ButtonProps.Ref | undefined>;\n  onRemoveButtonClick?: NonCancelableEventHandler<AttributeEditorProps.RemoveButtonClickDetail>;\n}\n\nconst GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }];\nconst REMOVABLE_GRID_DEFINITION = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\nexport const Row = React.memo(\n  <T,>({\n    breakpoint,\n    item,\n    definition,\n    index,\n    removable,\n    removeButtonText,\n    removeButtonRefs,\n    onRemoveButtonClick,\n  }: RowProps<T>) => {\n    const isNarrowViewport = breakpoint === 'default' || breakpoint === 'xxs';\n    const isWideViewport = !isNarrowViewport;\n\n    const handleRemoveClick = useCallback(() => {\n      fireNonCancelableEvent(onRemoveButtonClick, { itemIndex: index });\n    }, [onRemoveButtonClick, index]);\n\n    const render = (item: T, itemIndex: number, slot: AttributeEditorProps.FieldRenderable<T> | React.ReactNode) =>\n      typeof slot === 'function' ? slot(item, itemIndex) : slot;\n\n    return (\n      <InternalBox className={styles.row} margin={{ bottom: 's' }}>\n        <InternalGrid\n          __breakpoint={breakpoint}\n          gridDefinition={removable ? REMOVABLE_GRID_DEFINITION : GRID_DEFINITION}\n        >\n          <InternalColumnLayout className={styles['row-control']} columns={definition.length} __breakpoint={breakpoint}>\n            {definition.map(({ info, label, constraintText, errorText, control }, defIndex) => (\n              <Attribute\n                key={defIndex}\n                label={label}\n                info={info}\n                constraintText={constraintText && render(item, index, constraintText)}\n                errorText={errorText && render(item, index, errorText)}\n                control={control && render(item, index, control)}\n                hideLabel={isWideViewport && index > 0}\n              />\n            ))}\n          </InternalColumnLayout>\n          {removable && (\n            <ButtonContainer index={index} isNarrowViewport={isNarrowViewport}>\n              <InternalButton\n                className={styles['remove-button']}\n                formAction=\"none\"\n                ref={ref => {\n                  removeButtonRefs[index] = ref ?? undefined;\n                }}\n                onClick={handleRemoveClick}\n              >\n                {removeButtonText}\n              </InternalButton>\n            </ButtonContainer>\n          )}\n        </InternalGrid>\n        {isNarrowViewport && <Divider />}\n      </InternalBox>\n    );\n  }\n);\n\ninterface ButtonContainer {\n  index: number;\n  children: React.ReactNode;\n  isNarrowViewport: boolean;\n}\n\nconst ButtonContainer = ({ index, children, isNarrowViewport }: ButtonContainer) => (\n  <div\n    className={clsx({\n      [styles['button-container']]: !isNarrowViewport && index === 0,\n      [styles['right-align']]: isNarrowViewport,\n    })}\n  >\n    {children}\n  </div>\n);\n"]}

package/attribute-editor/styles.css.js

@@ -0,0 +1,17 @@
+
+    import './styles.scoped.css';
+    export default {
+  "empty": "awsui_empty_n4qlp_h3o62_93",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_h3o62_1",
+  "root": "awsui_root_n4qlp_h3o62_119",
+  "row": "awsui_row_n4qlp_h3o62_137",
+  "row-control": "awsui_row-control_n4qlp_h3o62_141",
+  "field": "awsui_field_n4qlp_h3o62_145",
+  "add-button": "awsui_add-button_n4qlp_h3o62_149",
+  "remove-button": "awsui_remove-button_n4qlp_h3o62_153",
+  "button-container": "awsui_button-container_n4qlp_h3o62_157",
+  "divider": "awsui_divider_n4qlp_h3o62_161",
+  "additional-info": "awsui_additional-info_n4qlp_h3o62_165",
+  "right-align": "awsui_right-align_n4qlp_h3o62_211"
+};
+  

package/attribute-editor/styles.scoped.css

@@ -0,0 +1,263 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_empty_n4qlp_h3o62_93:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_n4qlp_h3o62_1 180ms ease-out;
+  animation: awsui_awsui-motion-fade-in_n4qlp_h3o62_1 var(--motion-duration-transition-show-paced-ai4wlf, 180ms) var(--motion-easing-transition-show-paced-bg1hyg, ease-out);
+}
+@keyframes awsui_awsui-motion-fade-in_n4qlp_h3o62_1 {
+  from {
+    opacity: 0.2;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_empty_n4qlp_h3o62_93:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_empty_n4qlp_h3o62_93:not(#\9), .awsui-mode-entering .awsui_empty_n4qlp_h3o62_93:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_root_n4qlp_h3o62_119:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+      -ms-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #000716;
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  display: block;
+}
+
+.awsui_empty_n4qlp_h3o62_93:not(#\9) {
+  font-size: 14px;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: 22px;
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: #5f6b7a;
+  color: var(--color-text-empty-fjv325, #5f6b7a);
+}
+
+.awsui_row_n4qlp_h3o62_137:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_row-control_n4qlp_h3o62_141:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_field_n4qlp_h3o62_145:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_add-button_n4qlp_h3o62_149:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_remove-button_n4qlp_h3o62_153:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_button-container_n4qlp_h3o62_157:not(#\9) {
+  padding-top: calc(4px + 22px);
+  padding-top: calc(var(--space-xxs-ynfts5, 4px) + var(--font-body-m-line-height-i7xxvv, 22px));
+}
+
+.awsui_divider_n4qlp_h3o62_161:not(#\9) {
+  border-bottom: 2px solid #e9ebed;
+  border-bottom: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+}
+
+.awsui_additional-info_n4qlp_h3o62_165:not(#\9) {
+  color: #5f6b7a;
+  color: var(--color-text-form-secondary-ih9x7l, #5f6b7a);
+  font-size: 12px;
+  font-size: var(--font-body-s-size-ukw2p9, 12px);
+  line-height: 16px;
+  line-height: var(--font-body-s-line-height-kdsbrl, 16px);
+  letter-spacing: 0.005em;
+  letter-spacing: var(--font-body-s-letter-spacing-cy0oxj, 0.005em);
+  display: block;
+  word-wrap: break-word;
+  margin-top: 4px;
+  margin-top: var(--space-xxs-ynfts5, 4px);
+  /* stylelint-disable-next-line selector-max-type */
+}
+.awsui_additional-info_n4qlp_h3o62_165 > a:not(#\9) {
+  color: #0972d3;
+  color: var(--color-text-link-default-5f186r, #0972d3);
+  font-weight: "inherit";
+  font-weight: var(--font-link-primary-weight-91pybi, "inherit");
+  letter-spacing: "inherit";
+  letter-spacing: var(--font-link-primary-letter-spacing-vmsgcx, "inherit");
+  text-decoration: underline;
+  text-decoration: var(--font-link-primary-decoration-wfgjh2, underline);
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  text-decoration-color: #0972d3;
+  text-decoration-color: var(--color-text-link-primary-underline-ga7rq8, #0972d3);
+  transition-property: color, text-decoration;
+  transition-duration: 165ms;
+  transition-duration: var(--motion-duration-refresh-only-medium-5flen2, 165ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_additional-info_n4qlp_h3o62_165 > a:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_additional-info_n4qlp_h3o62_165 > a:not(#\9), .awsui-mode-entering .awsui_additional-info_n4qlp_h3o62_165 > a:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_additional-info_n4qlp_h3o62_165 > a:not(#\9):hover {
+  cursor: pointer;
+  color: #033160;
+  color: var(--color-text-link-hover-kololx, #033160);
+}
+.awsui_additional-info_n4qlp_h3o62_165 > a:not(#\9):focus {
+  outline: none;
+}
+.awsui_additional-info_n4qlp_h3o62_165 > a:not(#\9):active {
+  color: #033160;
+  color: var(--color-text-link-hover-kololx, #033160);
+}
+.awsui_additional-info_n4qlp_h3o62_165 > a:not(#\9):active, .awsui_additional-info_n4qlp_h3o62_165 > a:not(#\9):focus, .awsui_additional-info_n4qlp_h3o62_165 > a:not(#\9):hover {
+  text-decoration: underline;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  text-decoration-color: currentColor;
+}
+
+.awsui_right-align_n4qlp_h3o62_211:not(#\9) {
+  float: right;
+}

package/attribute-editor/styles.selectors.js

@@ -0,0 +1,18 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "empty": "awsui_empty_n4qlp_h3o62_93",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_n4qlp_h3o62_1",
+  "root": "awsui_root_n4qlp_h3o62_119",
+  "row": "awsui_row_n4qlp_h3o62_137",
+  "row-control": "awsui_row-control_n4qlp_h3o62_141",
+  "field": "awsui_field_n4qlp_h3o62_145",
+  "add-button": "awsui_add-button_n4qlp_h3o62_149",
+  "remove-button": "awsui_remove-button_n4qlp_h3o62_153",
+  "button-container": "awsui_button-container_n4qlp_h3o62_157",
+  "divider": "awsui_divider_n4qlp_h3o62_161",
+  "additional-info": "awsui_additional-info_n4qlp_h3o62_165",
+  "right-align": "awsui_right-align_n4qlp_h3o62_211"
+};
+