@cloudscape-design/components-themeable 3.0.1331 → 3.0.1332
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/internal/manifest.json +1 -1
- package/lib/internal/scss/internal/generated/custom-css-properties/index.scss +1 -1
- package/lib/internal/scss/steps/styles.scss +7 -3
- package/lib/internal/template/internal/base-component/styles.scoped.css +1 -1
- package/lib/internal/template/internal/environment.js +2 -2
- package/lib/internal/template/internal/environment.json +2 -2
- package/lib/internal/template/steps/index.d.ts +1 -1
- package/lib/internal/template/steps/index.d.ts.map +1 -1
- package/lib/internal/template/steps/index.js +5 -3
- package/lib/internal/template/steps/index.js.map +1 -1
- package/lib/internal/template/steps/interfaces.d.ts +7 -0
- package/lib/internal/template/steps/interfaces.d.ts.map +1 -1
- package/lib/internal/template/steps/interfaces.js.map +1 -1
- package/lib/internal/template/steps/internal.d.ts +2 -2
- package/lib/internal/template/steps/internal.d.ts.map +1 -1
- package/lib/internal/template/steps/internal.js +11 -8
- package/lib/internal/template/steps/internal.js.map +1 -1
- package/lib/internal/template/steps/styles.css.js +13 -12
- package/lib/internal/template/steps/styles.scoped.css +27 -22
- package/lib/internal/template/steps/styles.selectors.js +13 -12
- package/package.json +1 -1
|
@@ -6,6 +6,13 @@
|
|
|
6
6
|
@use '../internal/styles/tokens' as awsui;
|
|
7
7
|
@use '../internal/styles' as styles;
|
|
8
8
|
|
|
9
|
+
.connector {
|
|
10
|
+
background-color: awsui.$color-border-divider-default;
|
|
11
|
+
}
|
|
12
|
+
.connector.connector-hidden {
|
|
13
|
+
background-color: transparent;
|
|
14
|
+
}
|
|
15
|
+
|
|
9
16
|
.root {
|
|
10
17
|
@include styles.styles-reset;
|
|
11
18
|
@include styles.text-wrapping;
|
|
@@ -37,7 +44,6 @@
|
|
|
37
44
|
> .connector {
|
|
38
45
|
grid-row: 2;
|
|
39
46
|
grid-column: 1;
|
|
40
|
-
background-color: awsui.$color-border-divider-default;
|
|
41
47
|
margin-block: 0;
|
|
42
48
|
border-block: 0;
|
|
43
49
|
border-inline: 0;
|
|
@@ -82,7 +88,6 @@
|
|
|
82
88
|
> .connector {
|
|
83
89
|
display: block;
|
|
84
90
|
flex: 1;
|
|
85
|
-
background-color: awsui.$color-border-divider-default;
|
|
86
91
|
margin-block: 0;
|
|
87
92
|
border-block: 0;
|
|
88
93
|
border-inline: 0;
|
|
@@ -134,7 +139,6 @@
|
|
|
134
139
|
grid-row: auto;
|
|
135
140
|
grid-column: auto;
|
|
136
141
|
flex: 1 1 auto;
|
|
137
|
-
background-color: awsui.$color-border-divider-default;
|
|
138
142
|
border-block: 0;
|
|
139
143
|
border-inline: 0;
|
|
140
144
|
inline-size: awsui.$border-divider-list-width;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export var PACKAGE_SOURCE = "components";
|
|
2
|
-
export var PACKAGE_VERSION = "3.0.0 (
|
|
3
|
-
export var GIT_SHA = "
|
|
2
|
+
export var PACKAGE_VERSION = "3.0.0 (1834b88b)";
|
|
3
|
+
export var GIT_SHA = "1834b88b";
|
|
4
4
|
export var THEME = "open-source-visual-refresh";
|
|
5
5
|
export var SYSTEM = "core";
|
|
6
6
|
export var ALWAYS_VISUAL_REFRESH = true;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { StepsProps } from './interfaces';
|
|
2
2
|
export { StepsProps };
|
|
3
|
-
declare const Steps: ({ steps, ...props }: StepsProps) => JSX.Element;
|
|
3
|
+
declare const Steps: ({ steps, orientation, connectorLines, ...props }: StepsProps) => JSX.Element;
|
|
4
4
|
export default Steps;
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/steps/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,GAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/steps/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,GAAI,kDAA2E,UAAU,gBAiBnG,CAAC;AAGF,eAAe,KAAK,CAAC"}
|
|
@@ -7,11 +7,13 @@ import useBaseComponent from '../internal/hooks/use-base-component';
|
|
|
7
7
|
import { applyDisplayName } from '../internal/utils/apply-display-name';
|
|
8
8
|
import { getExternalProps } from '../internal/utils/external-props';
|
|
9
9
|
import InternalSteps from './internal';
|
|
10
|
-
const Steps = ({ steps, ...props }) => {
|
|
10
|
+
const Steps = ({ steps, orientation = 'vertical', connectorLines = 'visible', ...props }) => {
|
|
11
11
|
const baseProps = getBaseProps(props);
|
|
12
|
-
const baseComponentProps = useBaseComponent('Steps'
|
|
12
|
+
const baseComponentProps = useBaseComponent('Steps', {
|
|
13
|
+
props: { orientation, connectorLines },
|
|
14
|
+
});
|
|
13
15
|
const externalProps = getExternalProps(props);
|
|
14
|
-
return React.createElement(InternalSteps, { ...baseProps, ...baseComponentProps, ...externalProps, steps: steps });
|
|
16
|
+
return (React.createElement(InternalSteps, { ...baseProps, ...baseComponentProps, ...externalProps, steps: steps, orientation: orientation, connectorLines: connectorLines }));
|
|
15
17
|
};
|
|
16
18
|
applyDisplayName(Steps, 'Steps');
|
|
17
19
|
export default Steps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/steps/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/steps/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,aAAa,MAAM,YAAY,CAAC;AAIvC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,GAAG,UAAU,EAAE,cAAc,GAAG,SAAS,EAAE,GAAG,KAAK,EAAc,EAAE,EAAE;IACtG,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,OAAO,EAAE;QACnD,KAAK,EAAE,EAAE,WAAW,EAAE,cAAc,EAAE;KACvC,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;IAE9C,OAAO,CACL,oBAAC,aAAa,OACR,SAAS,KACT,kBAAkB,KAClB,aAAa,EACjB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,cAAc,GAC9B,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { StepsProps } from './interfaces';\nimport InternalSteps from './internal';\n\nexport { StepsProps };\n\nconst Steps = ({ steps, orientation = 'vertical', connectorLines = 'visible', ...props }: StepsProps) => {\n const baseProps = getBaseProps(props);\n const baseComponentProps = useBaseComponent('Steps', {\n props: { orientation, connectorLines },\n });\n const externalProps = getExternalProps(props);\n\n return (\n <InternalSteps\n {...baseProps}\n {...baseComponentProps}\n {...externalProps}\n steps={steps}\n orientation={orientation}\n connectorLines={connectorLines}\n />\n );\n};\n\napplyDisplayName(Steps, 'Steps');\nexport default Steps;\n"]}
|
|
@@ -16,6 +16,12 @@ export interface StepsProps extends BaseComponentProps {
|
|
|
16
16
|
* By default the orientation is vertical.
|
|
17
17
|
*/
|
|
18
18
|
orientation?: StepsProps.Orientation;
|
|
19
|
+
/**
|
|
20
|
+
* Determines whether the connector lines between steps are displayed. The following variants are available:
|
|
21
|
+
* * `visible` - Shows connector lines between consecutive steps.
|
|
22
|
+
* * `none` - Hides the connector lines between steps.
|
|
23
|
+
*/
|
|
24
|
+
connectorLines?: StepsProps.ConnectorLinesVariant;
|
|
19
25
|
/**
|
|
20
26
|
* Render a step. This overrides the default icon, header, and details provided by the component.
|
|
21
27
|
* The function is called for each step and should return an object with the following keys:
|
|
@@ -53,5 +59,6 @@ export declare namespace StepsProps {
|
|
|
53
59
|
details?: React.ReactNode;
|
|
54
60
|
}
|
|
55
61
|
type Orientation = 'vertical' | 'horizontal';
|
|
62
|
+
type ConnectorLinesVariant = 'visible' | 'none';
|
|
56
63
|
}
|
|
57
64
|
//# sourceMappingURL=interfaces.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;;;;;;;OAQG;IACH,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,KAAK;QACtC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC;IAE/C,UAAiB,IAAI;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B;IAED,KAAY,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,gCAAgC,CAAC;AACtE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;;;;;;;OAQG;IACH,KAAK,EAAE,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;IACtC;;;OAGG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC;;;;OAIG;IACH,cAAc,CAAC,EAAE,UAAU,CAAC,qBAAqB,CAAC;IAClD;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,IAAI,KAAK;QACtC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB,CAAC;IACF;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,MAAM,GAAG,oBAAoB,CAAC,IAAI,CAAC;IAE/C,UAAiB,IAAI;QACnB,MAAM,EAAE,MAAM,CAAC;QACf,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,MAAM,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B;IAED,KAAY,WAAW,GAAG,UAAU,GAAG,YAAY,CAAC;IAEpD,KAAY,qBAAqB,GAAG,SAAS,GAAG,MAAM,CAAC;CACxD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { StatusIndicatorProps } from '../status-indicator/interfaces';\nimport { BaseComponentProps } from '../types/base-component';\n\nexport interface StepsProps extends BaseComponentProps {\n /**\n * An array of individual steps\n *\n * Each step definition has the following properties:\n * * `status` (string) - Status of the step corresponding to a status indicator.\n * * `statusIconAriaLabel` - (string) - (Optional) Alternative text for the status icon.\n * * `header` (ReactNode) - Summary corresponding to the step.\n * * `details` (ReactNode) - (Optional) Additional information corresponding to the step.\n */\n steps: ReadonlyArray<StepsProps.Step>;\n /**\n * The visual orientation of the steps (vertical or horizontal).\n * By default the orientation is vertical.\n */\n orientation?: StepsProps.Orientation;\n /**\n * Render a step. This overrides the default icon, header, and details provided by the component.\n * The function is called for each step and should return an object with the following keys:\n * * `header` (React.ReactNode) - Summary corresponding to the step.\n * * `details` (React.ReactNode) - (Optional) Additional information corresponding to the step.\n * * `icon` (React.ReactNode) - (Optional) Replaces the standard step icon from the status indicator.\n */\n renderStep?: (step: StepsProps.Step) => {\n header: React.ReactNode;\n details?: React.ReactNode;\n icon?: React.ReactNode;\n };\n /**\n * Provides an `aria-label` to the progress steps container.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabel?: string;\n /**\n * Sets the `aria-labelledby` property on the progress steps container.\n * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabelledby?: string;\n /**\n * Sets the `aria-describedby` property on the progress steps container.\n */\n ariaDescribedby?: string;\n}\n\nexport namespace StepsProps {\n export type Status = StatusIndicatorProps.Type;\n\n export interface Step {\n status: Status;\n statusIconAriaLabel?: string;\n header: React.ReactNode;\n details?: React.ReactNode;\n }\n\n export type Orientation = 'vertical' | 'horizontal';\n}\n"]}
|
|
1
|
+
{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/steps/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { StatusIndicatorProps } from '../status-indicator/interfaces';\nimport { BaseComponentProps } from '../types/base-component';\n\nexport interface StepsProps extends BaseComponentProps {\n /**\n * An array of individual steps\n *\n * Each step definition has the following properties:\n * * `status` (string) - Status of the step corresponding to a status indicator.\n * * `statusIconAriaLabel` - (string) - (Optional) Alternative text for the status icon.\n * * `header` (ReactNode) - Summary corresponding to the step.\n * * `details` (ReactNode) - (Optional) Additional information corresponding to the step.\n */\n steps: ReadonlyArray<StepsProps.Step>;\n /**\n * The visual orientation of the steps (vertical or horizontal).\n * By default the orientation is vertical.\n */\n orientation?: StepsProps.Orientation;\n /**\n * Determines whether the connector lines between steps are displayed. The following variants are available:\n * * `visible` - Shows connector lines between consecutive steps.\n * * `none` - Hides the connector lines between steps.\n */\n connectorLines?: StepsProps.ConnectorLinesVariant;\n /**\n * Render a step. This overrides the default icon, header, and details provided by the component.\n * The function is called for each step and should return an object with the following keys:\n * * `header` (React.ReactNode) - Summary corresponding to the step.\n * * `details` (React.ReactNode) - (Optional) Additional information corresponding to the step.\n * * `icon` (React.ReactNode) - (Optional) Replaces the standard step icon from the status indicator.\n */\n renderStep?: (step: StepsProps.Step) => {\n header: React.ReactNode;\n details?: React.ReactNode;\n icon?: React.ReactNode;\n };\n /**\n * Provides an `aria-label` to the progress steps container.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabel?: string;\n /**\n * Sets the `aria-labelledby` property on the progress steps container.\n * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n */\n ariaLabelledby?: string;\n /**\n * Sets the `aria-describedby` property on the progress steps container.\n */\n ariaDescribedby?: string;\n}\n\nexport namespace StepsProps {\n export type Status = StatusIndicatorProps.Type;\n\n export interface Step {\n status: Status;\n statusIconAriaLabel?: string;\n header: React.ReactNode;\n details?: React.ReactNode;\n }\n\n export type Orientation = 'vertical' | 'horizontal';\n\n export type ConnectorLinesVariant = 'visible' | 'none';\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
|
|
2
2
|
import { SomeRequired } from '../internal/types';
|
|
3
3
|
import { StepsProps } from './interfaces';
|
|
4
|
-
type InternalStepsProps = SomeRequired<StepsProps, 'steps'> & InternalBaseComponentProps;
|
|
5
|
-
declare const InternalSteps: ({ steps, orientation, renderStep, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef, ...props }: InternalStepsProps) => JSX.Element;
|
|
4
|
+
type InternalStepsProps = SomeRequired<StepsProps, 'steps' | 'orientation' | 'connectorLines'> & InternalBaseComponentProps;
|
|
5
|
+
declare const InternalSteps: ({ steps, orientation, connectorLines, renderStep, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef, ...props }: InternalStepsProps) => JSX.Element;
|
|
6
6
|
export default InternalSteps;
|
|
7
7
|
//# sourceMappingURL=internal.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,OAAO,
|
|
1
|
+
{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI1C,KAAK,kBAAkB,GAAG,YAAY,CAAC,UAAU,EAAE,OAAO,GAAG,aAAa,GAAG,gBAAgB,CAAC,GAC5F,0BAA0B,CAAC;AAkG7B,QAAA,MAAM,aAAa,GAAI,6HAUpB,kBAAkB,gBAsCpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -16,15 +16,16 @@ const statusToColor = {
|
|
|
16
16
|
loading: 'text-status-inactive',
|
|
17
17
|
'not-started': 'text-status-inactive',
|
|
18
18
|
};
|
|
19
|
-
const CustomStep = ({ step, orientation, renderStep, }) => {
|
|
19
|
+
const CustomStep = ({ step, orientation, renderStep, hideConnectors, }) => {
|
|
20
20
|
const { status, statusIconAriaLabel } = step;
|
|
21
21
|
const { header, details, icon } = renderStep(step);
|
|
22
22
|
const iconNode = icon ? icon : React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel });
|
|
23
|
+
const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);
|
|
23
24
|
if (orientation === 'horizontal') {
|
|
24
25
|
return (React.createElement("li", { className: styles.container },
|
|
25
26
|
React.createElement("div", { className: styles.header },
|
|
26
27
|
iconNode,
|
|
27
|
-
React.createElement("hr", { className:
|
|
28
|
+
React.createElement("hr", { className: connectorClassName, role: "none" })),
|
|
28
29
|
React.createElement("div", { className: styles['horizontal-header'] }, header),
|
|
29
30
|
details && React.createElement("div", { className: styles.details }, details)));
|
|
30
31
|
}
|
|
@@ -35,24 +36,26 @@ const CustomStep = ({ step, orientation, renderStep, }) => {
|
|
|
35
36
|
return (React.createElement("li", { className: clsx(styles.container, styles['custom-vertical']) },
|
|
36
37
|
React.createElement("div", { className: styles.rail },
|
|
37
38
|
iconNode,
|
|
38
|
-
React.createElement("hr", { className:
|
|
39
|
+
React.createElement("hr", { className: connectorClassName, role: "none" })),
|
|
39
40
|
React.createElement("div", { className: styles.content },
|
|
40
41
|
React.createElement("div", { className: styles.header }, header),
|
|
41
42
|
details && React.createElement("div", { className: styles.details }, details))));
|
|
42
43
|
};
|
|
43
|
-
const InternalStep = ({ status, statusIconAriaLabel, header, details, orientation, }) => {
|
|
44
|
+
const InternalStep = ({ status, statusIconAriaLabel, header, details, orientation, hideConnectors, }) => {
|
|
45
|
+
const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);
|
|
44
46
|
return (React.createElement("li", { className: styles.container },
|
|
45
47
|
React.createElement("div", { className: styles.header }, orientation === 'vertical' ? (React.createElement(InternalStatusIndicator, { type: status, iconAriaLabel: statusIconAriaLabel }, header)) : (React.createElement(React.Fragment, null,
|
|
46
48
|
React.createElement(InternalBox, { color: statusToColor[status] },
|
|
47
49
|
React.createElement(InternalStatusIcon, { type: status, iconAriaLabel: statusIconAriaLabel })),
|
|
48
|
-
React.createElement("hr", { className:
|
|
49
|
-
orientation === 'vertical' ? (React.createElement("hr", { className:
|
|
50
|
+
React.createElement("hr", { className: connectorClassName, role: "none" })))),
|
|
51
|
+
orientation === 'vertical' ? (React.createElement("hr", { className: connectorClassName, role: "none" })) : (React.createElement("div", { className: styles['horizontal-header'] },
|
|
50
52
|
React.createElement(InternalBox, { color: statusToColor[status] }, header))),
|
|
51
53
|
details && React.createElement("div", { className: styles.details }, details)));
|
|
52
54
|
};
|
|
53
|
-
const InternalSteps = ({ steps, orientation
|
|
55
|
+
const InternalSteps = ({ steps, orientation, connectorLines, renderStep, ariaLabel, ariaLabelledby, ariaDescribedby, __internalRootRef, ...props }) => {
|
|
56
|
+
const hideConnectors = connectorLines === 'none';
|
|
54
57
|
return (React.createElement("div", { ...props, className: clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical), ref: __internalRootRef },
|
|
55
|
-
React.createElement("ol", { className: styles.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => renderStep ? (React.createElement(CustomStep, { key: index, orientation: orientation, step: step, renderStep: renderStep })) : (React.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details, orientation: orientation }))))));
|
|
58
|
+
React.createElement("ol", { className: styles.list, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby }, steps.map((step, index) => renderStep ? (React.createElement(CustomStep, { key: index, orientation: orientation, step: step, renderStep: renderStep, hideConnectors: hideConnectors })) : (React.createElement(InternalStep, { key: index, status: step.status, statusIconAriaLabel: step.statusIconAriaLabel, header: step.header, details: step.details, orientation: orientation, hideConnectors: hideConnectors }))))));
|
|
56
59
|
};
|
|
57
60
|
export default InternalSteps;
|
|
58
61
|
//# sourceMappingURL=internal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,WAAW,MAAM,iBAAiB,CAAC;AAG1C,OAAO,uBAAuB,EAAE,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC;AAG3F,OAAO,MAAM,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/steps/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';\n\nimport { BoxProps } from '../box/interfaces';\nimport InternalBox from '../box/internal';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\nimport InternalStatusIndicator, { InternalStatusIcon } from '../status-indicator/internal';\nimport { StepsProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ntype InternalStepsProps = SomeRequired<StepsProps, 'steps' | 'orientation' | 'connectorLines'> &\n InternalBaseComponentProps;\n\nconst statusToColor: Record<StepsProps.Status, BoxProps.Color> = {\n error: 'text-status-error',\n warning: 'text-status-warning',\n success: 'text-status-success',\n info: 'text-status-info',\n stopped: 'text-status-inactive',\n pending: 'text-status-inactive',\n 'in-progress': 'text-status-inactive',\n loading: 'text-status-inactive',\n 'not-started': 'text-status-inactive',\n};\n\nconst CustomStep = ({\n step,\n orientation,\n renderStep,\n hideConnectors,\n}: {\n step: StepsProps.Step;\n orientation: StepsProps.Orientation;\n renderStep: Required<StepsProps>['renderStep'];\n hideConnectors: boolean;\n}) => {\n const { status, statusIconAriaLabel } = step;\n const { header, details, icon } = renderStep(step);\n const iconNode = icon ? icon : <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />;\n const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n\n if (orientation === 'horizontal') {\n return (\n <li className={styles.container}>\n <div className={styles.header}>\n {iconNode}\n <hr className={connectorClassName} role=\"none\" />\n </div>\n <div className={styles['horizontal-header']}>{header}</div>\n {details && <div className={styles.details}>{details}</div>}\n </li>\n );\n }\n\n // Vertical orientation: render the icon and the connector together in a column-1 \"rail\" so the\n // connector starts directly beneath the icon and stretches the full height of the step. Unlike\n // placing the header in the same row as the icon, this keeps the vertical line continuous even\n // when the custom header wraps onto multiple lines.\n return (\n <li className={clsx(styles.container, styles['custom-vertical'])}>\n <div className={styles.rail}>\n {iconNode}\n <hr className={connectorClassName} role=\"none\" />\n </div>\n <div className={styles.content}>\n <div className={styles.header}>{header}</div>\n {details && <div className={styles.details}>{details}</div>}\n </div>\n </li>\n );\n};\n\nconst InternalStep = ({\n status,\n statusIconAriaLabel,\n header,\n details,\n orientation,\n hideConnectors,\n}: StepsProps.Step & { orientation: StepsProps.Orientation; hideConnectors: boolean }) => {\n const connectorClassName = clsx(styles.connector, hideConnectors && styles['connector-hidden']);\n return (\n <li className={styles.container}>\n <div className={styles.header}>\n {orientation === 'vertical' ? (\n <InternalStatusIndicator type={status} iconAriaLabel={statusIconAriaLabel}>\n {header}\n </InternalStatusIndicator>\n ) : (\n <>\n <InternalBox color={statusToColor[status]}>\n <InternalStatusIcon type={status} iconAriaLabel={statusIconAriaLabel} />\n </InternalBox>\n <hr className={connectorClassName} role=\"none\" />\n </>\n )}\n </div>\n {orientation === 'vertical' ? (\n <hr className={connectorClassName} role=\"none\" />\n ) : (\n <div className={styles['horizontal-header']}>\n <InternalBox color={statusToColor[status]}>{header}</InternalBox>\n </div>\n )}\n {details && <div className={styles.details}>{details}</div>}\n </li>\n );\n};\n\nconst InternalSteps = ({\n steps,\n orientation,\n connectorLines,\n renderStep,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n __internalRootRef,\n ...props\n}: InternalStepsProps) => {\n const hideConnectors = connectorLines === 'none';\n return (\n <div\n {...props}\n className={clsx(styles.root, props.className, orientation === 'horizontal' ? styles.horizontal : styles.vertical)}\n ref={__internalRootRef}\n >\n <ol\n className={styles.list}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n aria-describedby={ariaDescribedby}\n >\n {steps.map((step, index) =>\n renderStep ? (\n <CustomStep\n key={index}\n orientation={orientation}\n step={step}\n renderStep={renderStep}\n hideConnectors={hideConnectors}\n />\n ) : (\n <InternalStep\n key={index}\n status={step.status}\n statusIconAriaLabel={step.statusIconAriaLabel}\n header={step.header}\n details={step.details}\n orientation={orientation}\n hideConnectors={hideConnectors}\n />\n )\n )}\n </ol>\n </div>\n );\n};\n\nexport default InternalSteps;\n"]}
|
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
|
|
2
2
|
import './styles.scoped.css';
|
|
3
3
|
export default {
|
|
4
|
-
"
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"horizontal
|
|
13
|
-
"
|
|
14
|
-
"
|
|
15
|
-
"
|
|
4
|
+
"connector": "awsui_connector_gxp9y_m67w6_181",
|
|
5
|
+
"connector-hidden": "awsui_connector-hidden_gxp9y_m67w6_185",
|
|
6
|
+
"root": "awsui_root_gxp9y_m67w6_189",
|
|
7
|
+
"list": "awsui_list_gxp9y_m67w6_222",
|
|
8
|
+
"container": "awsui_container_gxp9y_m67w6_227",
|
|
9
|
+
"header": "awsui_header_gxp9y_m67w6_232",
|
|
10
|
+
"details": "awsui_details_gxp9y_m67w6_238",
|
|
11
|
+
"custom": "awsui_custom_gxp9y_m67w6_259",
|
|
12
|
+
"horizontal": "awsui_horizontal_gxp9y_m67w6_263",
|
|
13
|
+
"horizontal-header": "awsui_horizontal-header_gxp9y_m67w6_294",
|
|
14
|
+
"custom-vertical": "awsui_custom-vertical_gxp9y_m67w6_308",
|
|
15
|
+
"rail": "awsui_rail_gxp9y_m67w6_308",
|
|
16
|
+
"content": "awsui_content_gxp9y_m67w6_326"
|
|
16
17
|
};
|
|
17
18
|
|
|
@@ -178,7 +178,15 @@
|
|
|
178
178
|
*/
|
|
179
179
|
/* Style used for links in slots/components that are text heavy, to help links stand out among
|
|
180
180
|
surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
|
|
181
|
-
.
|
|
181
|
+
.awsui_connector_gxp9y_m67w6_181:not(#\9) {
|
|
182
|
+
background-color: var(--color-border-divider-default-ipvpev, #eaeded);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.awsui_connector_gxp9y_m67w6_181.awsui_connector-hidden_gxp9y_m67w6_185:not(#\9) {
|
|
186
|
+
background-color: transparent;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.awsui_root_gxp9y_m67w6_189:not(#\9) {
|
|
182
190
|
border-collapse: separate;
|
|
183
191
|
border-spacing: 0;
|
|
184
192
|
box-sizing: border-box;
|
|
@@ -211,32 +219,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
211
219
|
min-inline-size: 0;
|
|
212
220
|
word-break: break-word;
|
|
213
221
|
}
|
|
214
|
-
.
|
|
222
|
+
.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222:not(#\9) {
|
|
215
223
|
list-style: none;
|
|
216
224
|
padding-inline-start: 0;
|
|
217
225
|
margin-block: 0;
|
|
218
226
|
}
|
|
219
|
-
.
|
|
227
|
+
.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227:not(#\9) {
|
|
220
228
|
display: grid;
|
|
221
229
|
grid-template-columns: var(--space-static-l-ig026c, 20px) 1fr;
|
|
222
230
|
grid-template-rows: minmax(var(--space-static-l-ig026c, 20px), auto);
|
|
223
231
|
}
|
|
224
|
-
.
|
|
232
|
+
.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_header_gxp9y_m67w6_232:not(#\9) {
|
|
225
233
|
display: flex;
|
|
226
234
|
gap: var(--space-xxs-jnczic, 4px);
|
|
227
235
|
grid-row: 1;
|
|
228
236
|
grid-column: 1/span 2;
|
|
229
237
|
}
|
|
230
|
-
.
|
|
238
|
+
.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_details_gxp9y_m67w6_238:not(#\9) {
|
|
231
239
|
align-items: center;
|
|
232
240
|
grid-row: 2;
|
|
233
241
|
grid-column: 2;
|
|
234
242
|
margin-block-end: var(--space-static-xs-4gq40t, 8px);
|
|
235
243
|
}
|
|
236
|
-
.
|
|
244
|
+
.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_connector_gxp9y_m67w6_181:not(#\9) {
|
|
237
245
|
grid-row: 2;
|
|
238
246
|
grid-column: 1;
|
|
239
|
-
background-color: var(--color-border-divider-default-ipvpev, #eaeded);
|
|
240
247
|
margin-block: 0;
|
|
241
248
|
border-block: 0;
|
|
242
249
|
border-inline: 0;
|
|
@@ -246,35 +253,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
246
253
|
position: relative;
|
|
247
254
|
inset-inline-end: var(--space-static-xxxs-zckw10, 2px);
|
|
248
255
|
}
|
|
249
|
-
.
|
|
256
|
+
.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > :not(#\9):last-of-type > .awsui_connector_gxp9y_m67w6_181 {
|
|
250
257
|
display: none;
|
|
251
258
|
}
|
|
252
|
-
.
|
|
259
|
+
.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222.awsui_custom_gxp9y_m67w6_259 > .awsui_details_gxp9y_m67w6_238:not(#\9) {
|
|
253
260
|
margin-block-end: 0;
|
|
254
261
|
}
|
|
255
262
|
|
|
256
|
-
.
|
|
263
|
+
.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222:not(#\9) {
|
|
257
264
|
display: grid;
|
|
258
265
|
align-items: flex-start;
|
|
259
266
|
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
|
|
260
267
|
grid-auto-flow: column;
|
|
261
268
|
}
|
|
262
|
-
.
|
|
269
|
+
.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227:not(#\9) {
|
|
263
270
|
display: grid;
|
|
264
271
|
grid-template-columns: var(--space-static-l-ig026c, 20px) 1fr;
|
|
265
272
|
grid-template-rows: minmax(var(--space-static-l-ig026c, 20px), auto);
|
|
266
273
|
align-items: center;
|
|
267
274
|
}
|
|
268
|
-
.
|
|
275
|
+
.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_header_gxp9y_m67w6_232:not(#\9) {
|
|
269
276
|
display: flex;
|
|
270
277
|
grid-row: 1;
|
|
271
278
|
grid-column: 1/span 2;
|
|
272
279
|
align-items: center;
|
|
273
280
|
}
|
|
274
|
-
.
|
|
281
|
+
.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_header_gxp9y_m67w6_232 > .awsui_connector_gxp9y_m67w6_181:not(#\9) {
|
|
275
282
|
display: block;
|
|
276
283
|
flex: 1;
|
|
277
|
-
background-color: var(--color-border-divider-default-ipvpev, #eaeded);
|
|
278
284
|
margin-block: 0;
|
|
279
285
|
border-block: 0;
|
|
280
286
|
border-inline: 0;
|
|
@@ -285,31 +291,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
285
291
|
min-inline-size: var(--space-static-xs-4gq40t, 8px);
|
|
286
292
|
margin-inline-end: var(--space-static-xxs-0cgyf1, 4px);
|
|
287
293
|
}
|
|
288
|
-
.
|
|
294
|
+
.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_horizontal-header_gxp9y_m67w6_294:not(#\9) {
|
|
289
295
|
grid-row: 2;
|
|
290
296
|
grid-column: 1/span 3;
|
|
291
297
|
padding-inline-end: var(--space-xs-kw7k3v, 8px);
|
|
292
298
|
}
|
|
293
|
-
.
|
|
299
|
+
.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227 > .awsui_details_gxp9y_m67w6_238:not(#\9) {
|
|
294
300
|
grid-row: 3;
|
|
295
301
|
grid-column: 1/span 3;
|
|
296
302
|
padding-inline-end: var(--space-xs-kw7k3v, 8px);
|
|
297
303
|
}
|
|
298
|
-
.
|
|
304
|
+
.awsui_horizontal_gxp9y_m67w6_263 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227:not(#\9):last-child > .awsui_header_gxp9y_m67w6_232 > .awsui_connector_gxp9y_m67w6_181 {
|
|
299
305
|
display: none;
|
|
300
306
|
}
|
|
301
307
|
|
|
302
|
-
.
|
|
308
|
+
.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227.awsui_custom-vertical_gxp9y_m67w6_308 > .awsui_rail_gxp9y_m67w6_308:not(#\9) {
|
|
303
309
|
grid-column: 1;
|
|
304
310
|
display: flex;
|
|
305
311
|
flex-direction: column;
|
|
306
312
|
align-items: center;
|
|
307
313
|
}
|
|
308
|
-
.
|
|
314
|
+
.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227.awsui_custom-vertical_gxp9y_m67w6_308 > .awsui_rail_gxp9y_m67w6_308 > .awsui_connector_gxp9y_m67w6_181:not(#\9) {
|
|
309
315
|
grid-row: auto;
|
|
310
316
|
grid-column: auto;
|
|
311
317
|
flex: 1 1 auto;
|
|
312
|
-
background-color: var(--color-border-divider-default-ipvpev, #eaeded);
|
|
313
318
|
border-block: 0;
|
|
314
319
|
border-inline: 0;
|
|
315
320
|
inline-size: var(--border-divider-list-width-2qbfmz, 1px);
|
|
@@ -318,11 +323,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
|
|
|
318
323
|
inset-inline-end: 0;
|
|
319
324
|
margin-block: var(--space-static-xxs-0cgyf1, 4px) 0;
|
|
320
325
|
}
|
|
321
|
-
.
|
|
326
|
+
.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227.awsui_custom-vertical_gxp9y_m67w6_308 > .awsui_content_gxp9y_m67w6_326:not(#\9) {
|
|
322
327
|
grid-column: 2;
|
|
323
328
|
min-inline-size: 0;
|
|
324
329
|
}
|
|
325
330
|
|
|
326
|
-
.
|
|
331
|
+
.awsui_root_gxp9y_m67w6_189 > .awsui_list_gxp9y_m67w6_222 > .awsui_container_gxp9y_m67w6_227.awsui_custom-vertical_gxp9y_m67w6_308:not(#\9):last-of-type > .awsui_rail_gxp9y_m67w6_308 > .awsui_connector_gxp9y_m67w6_181 {
|
|
327
332
|
display: none;
|
|
328
333
|
}
|
|
@@ -2,17 +2,18 @@
|
|
|
2
2
|
// es-module interop with Babel and Typescript
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
module.exports.default = {
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
"
|
|
8
|
-
"
|
|
9
|
-
"
|
|
10
|
-
"
|
|
11
|
-
"
|
|
12
|
-
"
|
|
13
|
-
"horizontal
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
"
|
|
5
|
+
"connector": "awsui_connector_gxp9y_m67w6_181",
|
|
6
|
+
"connector-hidden": "awsui_connector-hidden_gxp9y_m67w6_185",
|
|
7
|
+
"root": "awsui_root_gxp9y_m67w6_189",
|
|
8
|
+
"list": "awsui_list_gxp9y_m67w6_222",
|
|
9
|
+
"container": "awsui_container_gxp9y_m67w6_227",
|
|
10
|
+
"header": "awsui_header_gxp9y_m67w6_232",
|
|
11
|
+
"details": "awsui_details_gxp9y_m67w6_238",
|
|
12
|
+
"custom": "awsui_custom_gxp9y_m67w6_259",
|
|
13
|
+
"horizontal": "awsui_horizontal_gxp9y_m67w6_263",
|
|
14
|
+
"horizontal-header": "awsui_horizontal-header_gxp9y_m67w6_294",
|
|
15
|
+
"custom-vertical": "awsui_custom-vertical_gxp9y_m67w6_308",
|
|
16
|
+
"rail": "awsui_rail_gxp9y_m67w6_308",
|
|
17
|
+
"content": "awsui_content_gxp9y_m67w6_326"
|
|
17
18
|
};
|
|
18
19
|
|