@cloudscape-design/components 3.0.0

package/form-field/styles.scoped.css

@@ -0,0 +1,295 @@
+/*
+ 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
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_error-icon-shake-wrapper_14mhv_yshzd_97:not(#\9) {
+  animation: awsui_awsui-motion-shake-horizontally_14mhv_yshzd_1 165ms;
+  animation: awsui_awsui-motion-shake-horizontally_14mhv_yshzd_1 var(--motion-duration-refresh-only-medium-5flen2, 165ms);
+}
+@keyframes awsui_awsui-motion-shake-horizontally_14mhv_yshzd_1 {
+  0% {
+    transform: translateX(-5px);
+    animation-timing-function: linear;
+  }
+  50% {
+    transform: translateX(5px);
+    animation-timing-function: cubic-bezier(0, 0, 0, 1);
+    animation-timing-function: var(--motion-easing-refresh-only-a-sy0g8m, cubic-bezier(0, 0, 0, 1));
+  }
+  100% {
+    transform: translateX(0px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_error-icon-shake-wrapper_14mhv_yshzd_97:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_error-icon-shake-wrapper_14mhv_yshzd_97:not(#\9), .awsui-mode-entering .awsui_error-icon-shake-wrapper_14mhv_yshzd_97:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+.awsui_error-icon-scale-wrapper_14mhv_yshzd_124:not(#\9) {
+  animation: awsui_awsui-motion-scale-popup_14mhv_yshzd_1 165ms cubic-bezier(0, 0, 0, 1);
+  animation: awsui_awsui-motion-scale-popup_14mhv_yshzd_1 var(--motion-duration-refresh-only-medium-5flen2, 165ms) var(--motion-easing-refresh-only-a-sy0g8m, cubic-bezier(0, 0, 0, 1));
+}
+@keyframes awsui_awsui-motion-scale-popup_14mhv_yshzd_1 {
+  0% {
+    transform: scale(0.95);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_error-icon-scale-wrapper_14mhv_yshzd_124:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_error-icon-scale-wrapper_14mhv_yshzd_124:not(#\9), .awsui-mode-entering .awsui_error-icon-scale-wrapper_14mhv_yshzd_124:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+.awsui_error_14mhv_yshzd_97:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_14mhv_yshzd_1 165ms cubic-bezier(0, 0, 0, 1);
+  animation: awsui_awsui-motion-fade-in-0_14mhv_yshzd_1 var(--motion-duration-refresh-only-medium-5flen2, 165ms) var(--motion-easing-refresh-only-a-sy0g8m, cubic-bezier(0, 0, 0, 1));
+}
+@keyframes awsui_awsui-motion-fade-in-0_14mhv_yshzd_1 {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_error_14mhv_yshzd_97:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_error_14mhv_yshzd_97:not(#\9), .awsui-mode-entering .awsui_error_14mhv_yshzd_97:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+.awsui_root_14mhv_yshzd_168: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);
+  box-sizing: border-box;
+}
+
+.awsui_label_14mhv_yshzd_180:not(#\9) {
+  box-sizing: border-box;
+  color: #000716;
+  color: var(--color-text-form-label-k3j0b4, #000716);
+  display: inline;
+  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);
+  font-weight: 700;
+  font-weight: var(--font-display-label-weight-m18hjh, 700);
+  margin-right: 8px;
+  margin-right: var(--space-xs-rsr2qu, 8px);
+}
+.awsui_label_14mhv_yshzd_180:not(#\9):only-child {
+  margin: 0;
+}
+
+.awsui_info_14mhv_yshzd_193:not(#\9) {
+  padding-left: 8px;
+  padding-left: var(--space-xs-rsr2qu, 8px);
+  border-left: 2px solid #e9ebed;
+  border-left: var(--border-divider-section-width-4wm2it, 2px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+}
+
+.awsui_description_14mhv_yshzd_198:not(#\9),
+.awsui_constraint_14mhv_yshzd_199: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);
+}
+
+.awsui_hints_14mhv_yshzd_206:not(#\9),
+.awsui_constraint-has-error_14mhv_yshzd_207:not(#\9) {
+  padding-top: 4px;
+  padding-top: var(--space-xxs-ynfts5, 4px);
+}
+
+.awsui_secondary-control_14mhv_yshzd_211:not(#\9) {
+  /* used in test-utils */
+}
+
+.awsui_controls_14mhv_yshzd_215:not(#\9):not(.awsui_label-hidden_14mhv_yshzd_215) {
+  padding-top: 4px;
+  padding-top: var(--space-xxs-ynfts5, 4px);
+}
+
+.awsui_control_14mhv_yshzd_215:not(#\9) {
+  min-width: 0;
+  -ms-word-break: break-all;
+  word-break: break-word;
+}
+
+.awsui_error_14mhv_yshzd_97:not(#\9) {
+  color: #d91515;
+  color: var(--color-text-status-error-5sesl6, #d91515);
+  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: flex;
+  align-items: flex-start;
+}
+
+.awsui_error__message_14mhv_yshzd_234:not(#\9) {
+  margin-left: 4px;
+  margin-left: var(--space-xxs-ynfts5, 4px);
+}
+
+.awsui_visually-hidden_14mhv_yshzd_238:not(#\9) {
+  position: absolute !important;
+  top: -9999px !important;
+  left: -9999px !important;
+}

package/form-field/styles.selectors.js

@@ -0,0 +1,25 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "error-icon-shake-wrapper": "awsui_error-icon-shake-wrapper_14mhv_yshzd_97",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_14mhv_yshzd_1",
+  "error-icon-scale-wrapper": "awsui_error-icon-scale-wrapper_14mhv_yshzd_124",
+  "awsui-motion-scale-popup": "awsui_awsui-motion-scale-popup_14mhv_yshzd_1",
+  "error": "awsui_error_14mhv_yshzd_97",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_14mhv_yshzd_1",
+  "root": "awsui_root_14mhv_yshzd_168",
+  "label": "awsui_label_14mhv_yshzd_180",
+  "info": "awsui_info_14mhv_yshzd_193",
+  "description": "awsui_description_14mhv_yshzd_198",
+  "constraint": "awsui_constraint_14mhv_yshzd_199",
+  "hints": "awsui_hints_14mhv_yshzd_206",
+  "constraint-has-error": "awsui_constraint-has-error_14mhv_yshzd_207",
+  "secondary-control": "awsui_secondary-control_14mhv_yshzd_211",
+  "controls": "awsui_controls_14mhv_yshzd_215",
+  "label-hidden": "awsui_label-hidden_14mhv_yshzd_215",
+  "control": "awsui_control_14mhv_yshzd_215",
+  "error__message": "awsui_error__message_14mhv_yshzd_234",
+  "visually-hidden": "awsui_visually-hidden_14mhv_yshzd_238"
+};
+  

package/form-field/util.d.ts

@@ -0,0 +1,14 @@
+import { GridProps } from '../grid/interfaces';
+interface FormFieldIds {
+    label?: string;
+    description?: string;
+    constraint?: string;
+    error?: string;
+}
+export declare function getSlotIds(formFieldId: string, label?: React.ReactNode, description?: React.ReactNode, constraintText?: React.ReactNode, errorText?: React.ReactNode): FormFieldIds;
+export declare function getAriaDescribedBy({ error, description, constraint }: FormFieldIds): string | undefined;
+export declare function getGridDefinition(stretch: boolean, secondaryControlPresent: boolean, isRefresh: boolean): {
+    colspan: GridProps.BreakpointMapping | number;
+}[];
+export {};
+//# sourceMappingURL=util.d.ts.map

package/form-field/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAE/C,UAAU,YAAY;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAUD,wBAAgB,UAAU,CACxB,WAAW,EAAE,MAAM,EACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,EACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,EAC7B,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,EAChC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,gBAU5B;AAED,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,YAAY,sBAIlF;AAED,wBAAgB,iBAAiB,CAAC,OAAO,EAAE,OAAO,EAAE,uBAAuB,EAAE,OAAO,EAAE,SAAS,EAAE,OAAO;aACxE,UAAU,iBAAiB,GAAG,MAAM;IAenE"}

package/form-field/util.js

@@ -0,0 +1,38 @@
+function makeSlotId(prop, formFieldId, propName) {
+    if (!prop) {
+        return undefined;
+    }
+    return "".concat(formFieldId, "-").concat(propName);
+}
+export function getSlotIds(formFieldId, label, description, constraintText, errorText) {
+    var ids = {
+        label: makeSlotId(label, formFieldId, 'label'),
+        description: makeSlotId(description, formFieldId, 'description'),
+        constraint: makeSlotId(constraintText, formFieldId, 'constraint'),
+        error: makeSlotId(errorText, formFieldId, 'error')
+    };
+    return ids;
+}
+export function getAriaDescribedBy(_a) {
+    var error = _a.error, description = _a.description, constraint = _a.constraint;
+    var describedByAttributes = [error, description, constraint].filter(function (e) { return !!e; });
+    var describedBy = describedByAttributes.length ? describedByAttributes.join(' ') : undefined;
+    return describedBy;
+}
+export function getGridDefinition(stretch, secondaryControlPresent, isRefresh) {
+    var columns;
+    if (stretch) {
+        columns = [{ colspan: 12 }, { colspan: 12 }];
+    }
+    else if (isRefresh) {
+        columns = [{ colspan: { "default": 12, xs: 8 } }, { colspan: { "default": 12, xs: 4 } }];
+    }
+    else {
+        columns = [{ colspan: { "default": 12, xs: 9 } }, { colspan: { "default": 12, xs: 3 } }];
+    }
+    if (!secondaryControlPresent) {
+        return [columns[0]];
+    }
+    return columns;
+}
+//# sourceMappingURL=util.js.map

package/form-field/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../../../src/form-field/util.ts"],"names":[],"mappings":"AAWA,SAAS,UAAU,CAAC,IAAqB,EAAE,WAAmB,EAAE,QAAgB;IAC9E,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,SAAS,CAAC;KAClB;IAED,OAAO,UAAG,WAAW,cAAI,QAAQ,CAAE,CAAC;AACtC,CAAC;AAED,MAAM,UAAU,UAAU,CACxB,WAAmB,EACnB,KAAuB,EACvB,WAA6B,EAC7B,cAAgC,EAChC,SAA2B;IAE3B,IAAM,GAAG,GAAiB;QACxB,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,WAAW,EAAE,OAAO,CAAC;QAC9C,WAAW,EAAE,UAAU,CAAC,WAAW,EAAE,WAAW,EAAE,aAAa,CAAC;QAChE,UAAU,EAAE,UAAU,CAAC,cAAc,EAAE,WAAW,EAAE,YAAY,CAAC;QACjE,KAAK,EAAE,UAAU,CAAC,SAAS,EAAE,WAAW,EAAE,OAAO,CAAC;KACnD,CAAC;IAEF,OAAO,GAAG,CAAC;AACb,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,EAAgD;QAA9C,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,UAAU,gBAAA;IACjE,IAAM,qBAAqB,GAAG,CAAC,KAAK,EAAE,WAAW,EAAE,UAAU,CAAC,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,CAAC,EAAH,CAAG,CAAC,CAAC;IAChF,IAAM,WAAW,GAAG,qBAAqB,CAAC,MAAM,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;IAC/F,OAAO,WAAW,CAAC;AACrB,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,OAAgB,EAAE,uBAAgC,EAAE,SAAkB;IACtG,IAAI,OAAiE,CAAC;IAEtE,IAAI,OAAO,EAAE;QACX,OAAO,GAAG,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;KAC9C;SAAM,IAAI,SAAS,EAAE;QACpB,OAAO,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;KACtF;SAAM;QACL,OAAO,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;KACtF;IAED,IAAI,CAAC,uBAAuB,EAAE;QAC5B,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;KACrB;IAED,OAAO,OAAO,CAAC;AACjB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { GridProps } from '../grid/interfaces';\n\ninterface FormFieldIds {\n  label?: string;\n  description?: string;\n  constraint?: string;\n  error?: string;\n}\n\nfunction makeSlotId(prop: React.ReactNode, formFieldId: string, propName: string): string | undefined {\n  if (!prop) {\n    return undefined;\n  }\n\n  return `${formFieldId}-${propName}`;\n}\n\nexport function getSlotIds(\n  formFieldId: string,\n  label?: React.ReactNode,\n  description?: React.ReactNode,\n  constraintText?: React.ReactNode,\n  errorText?: React.ReactNode\n) {\n  const ids: FormFieldIds = {\n    label: makeSlotId(label, formFieldId, 'label'),\n    description: makeSlotId(description, formFieldId, 'description'),\n    constraint: makeSlotId(constraintText, formFieldId, 'constraint'),\n    error: makeSlotId(errorText, formFieldId, 'error'),\n  };\n\n  return ids;\n}\n\nexport function getAriaDescribedBy({ error, description, constraint }: FormFieldIds) {\n  const describedByAttributes = [error, description, constraint].filter(e => !!e);\n  const describedBy = describedByAttributes.length ? describedByAttributes.join(' ') : undefined;\n  return describedBy;\n}\n\nexport function getGridDefinition(stretch: boolean, secondaryControlPresent: boolean, isRefresh: boolean) {\n  let columns: Array<{ colspan: GridProps.BreakpointMapping | number }>;\n\n  if (stretch) {\n    columns = [{ colspan: 12 }, { colspan: 12 }];\n  } else if (isRefresh) {\n    columns = [{ colspan: { default: 12, xs: 8 } }, { colspan: { default: 12, xs: 4 } }];\n  } else {\n    columns = [{ colspan: { default: 12, xs: 9 } }, { colspan: { default: 12, xs: 3 } }];\n  }\n\n  if (!secondaryControlPresent) {\n    return [columns[0]];\n  }\n\n  return columns;\n}\n"]}

package/grid/index.d.ts

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

package/grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/grid/index.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAE,cAAmB,EAAE,cAAsB,EAAE,QAAQ,EAAE,GAAG,SAAS,EAAE,EAAE,SAAS,eAiB9G"}

package/grid/index.js

@@ -0,0 +1,18 @@
+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 { getBaseProps } from '../internal/base-component';
+import InternalGrid from './internal';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import { applyDisplayName } from '../internal/utils/apply-display-name';
+import useBaseComponent from '../internal/hooks/use-base-component';
+export default function Grid(_a) {
+    var _b = _a.gridDefinition, gridDefinition = _b === void 0 ? [] : _b, _c = _a.disableGutters, disableGutters = _c === void 0 ? false : _c, children = _a.children, restProps = __rest(_a, ["gridDefinition", "disableGutters", "children"]);
+    var baseComponentProps = useBaseComponent('Grid');
+    var baseProps = getBaseProps(restProps);
+    var _d = useContainerBreakpoints(undefined), breakpoint = _d[0], ref = _d[1];
+    return (React.createElement(InternalGrid, __assign({}, baseProps, baseComponentProps, { ref: ref, __breakpoint: breakpoint, gridDefinition: gridDefinition, disableGutters: disableGutters }), children));
+}
+applyDisplayName(Grid, 'Grid');
+//# sourceMappingURL=index.js.map

package/grid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/grid/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,YAAY,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAC9E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAkF;IAAhF,IAAA,sBAAmB,EAAnB,cAAc,mBAAG,EAAE,KAAA,EAAE,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EAAE,QAAQ,cAAA,EAAK,SAAS,cAArE,gDAAuE,CAAF;IAChG,IAAM,kBAAkB,GAAG,gBAAgB,CAAC,MAAM,CAAC,CAAC;IACpD,IAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IACpC,IAAA,KAAoB,uBAAuB,CAAC,SAAS,CAAC,EAArD,UAAU,QAAA,EAAE,GAAG,QAAsC,CAAC;IAE7D,OAAO,CACL,oBAAC,YAAY,eACP,SAAS,EACT,kBAAkB,IACtB,GAAG,EAAE,GAAG,EACR,YAAY,EAAE,UAAU,EACxB,cAAc,EAAE,cAAc,EAC9B,cAAc,EAAE,cAAc,KAE7B,QAAQ,CACI,CAChB,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport InternalGrid from './internal';\nimport { GridProps } from './interfaces';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\n\nexport { GridProps };\n\nexport default function Grid({ gridDefinition = [], disableGutters = false, children, ...restProps }: GridProps) {\n  const baseComponentProps = useBaseComponent('Grid');\n  const baseProps = getBaseProps(restProps);\n  const [breakpoint, ref] = useContainerBreakpoints(undefined);\n\n  return (\n    <InternalGrid\n      {...baseProps}\n      {...baseComponentProps}\n      ref={ref}\n      __breakpoint={breakpoint}\n      gridDefinition={gridDefinition}\n      disableGutters={disableGutters}\n    >\n      {children}\n    </InternalGrid>\n  );\n}\n\napplyDisplayName(Grid, 'Grid');\n"]}

package/grid/interfaces.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Breakpoint as _Breakpoint } from '../internal/breakpoints';
+import { BaseComponentProps } from '../internal/base-component';
+export interface GridProps extends BaseComponentProps {
+    /**
+     * An array of element definitions that specifies how the columns must be
+     * arranged. Each element definition can have the following properties:
+     *
+     * - `colspan` (number | GridProps.BreakpointMapping) - The number (1-12) of grid elements for this column to span.
+     * - `offset` (number | GridProps.BreakpointMapping) - The number (0-11) of grid elements by which to offset the column.
+     * - `pull` (number | GridProps.BreakpointMapping) - The number (0-12) of grid elements by which to pull the column to the left.
+     * - `push` (number | GridProps.BreakpointMapping) - The number (0-12) of grid elements by which to push the column to the right.
+     *
+     * The value for the each property can be a number (which applies for all
+     * breakpoints) or an object where the key is one of the supported breakpoints
+     * (`xxs`, `xs`, `s`, `m`, `l`, `xl`) or `default`. The value of this key is a number of columns,
+     * applied for that breakpoint and those above it. You must provide a `default` value for `colspan`.
+     *
+     * We recommend that you don't use the `pull` and `push` properties of the element definition
+     * for accessibility reasons.
+     */
+    gridDefinition?: ReadonlyArray<GridProps.ElementDefinition>;
+    /**
+     * Determines whether horizontal and vertical gutters are hidden.
+     */
+    disableGutters?: boolean;
+    /**
+     * The elements to align in the grid.
+     *
+     * You can provide any elements here. The number of elements
+     * should match the number of objects defined in the `gridDefinition`
+     * property.
+     */
+    children?: React.ReactNode;
+}
+export declare namespace GridProps {
+    type Breakpoint = _Breakpoint;
+    type BreakpointMapping = Partial<Record<_Breakpoint, number>>;
+    interface ElementDefinition {
+        /**
+         * The number of grid elements for the column to span.
+         */
+        colspan?: number | GridProps.BreakpointMapping;
+        /**
+         * The number of grid elements to offset the column by.
+         */
+        offset?: number | GridProps.BreakpointMapping;
+        /**
+         * The number of grid elements to pull the column to the left by.
+         */
+        pull?: number | GridProps.BreakpointMapping;
+        /**
+         * The number of grid elements to push the column to the right by.
+         */
+        push?: number | GridProps.BreakpointMapping;
+    }
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/grid/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/grid/interfaces.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;;;;;OAgBG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAE5D;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,SAAS,CAAC;IACzB,KAAY,UAAU,GAAG,WAAW,CAAC;IAErC,KAAY,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAErE,UAAiB,iBAAiB;QAChC;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,iBAAiB,CAAC;QAE/C;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,iBAAiB,CAAC;QAE9C;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,iBAAiB,CAAC;QAE5C;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,iBAAiB,CAAC;KAC7C;CACF"}

package/grid/interfaces.js

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

package/grid/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/grid/interfaces.tsx"],"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 { Breakpoint as _Breakpoint } from '../internal/breakpoints';\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface GridProps extends BaseComponentProps {\n  /**\n   * An array of element definitions that specifies how the columns must be\n   * arranged. Each element definition can have the following properties:\n   *\n   * - `colspan` (number | GridProps.BreakpointMapping) - The number (1-12) of grid elements for this column to span.\n   * - `offset` (number | GridProps.BreakpointMapping) - The number (0-11) of grid elements by which to offset the column.\n   * - `pull` (number | GridProps.BreakpointMapping) - The number (0-12) of grid elements by which to pull the column to the left.\n   * - `push` (number | GridProps.BreakpointMapping) - The number (0-12) of grid elements by which to push the column to the right.\n   *\n   * The value for the each property can be a number (which applies for all\n   * breakpoints) or an object where the key is one of the supported breakpoints\n   * (`xxs`, `xs`, `s`, `m`, `l`, `xl`) or `default`. The value of this key is a number of columns,\n   * applied for that breakpoint and those above it. You must provide a `default` value for `colspan`.\n   *\n   * We recommend that you don't use the `pull` and `push` properties of the element definition\n   * for accessibility reasons.\n   */\n  gridDefinition?: ReadonlyArray<GridProps.ElementDefinition>;\n\n  /**\n   * Determines whether horizontal and vertical gutters are hidden.\n   */\n  disableGutters?: boolean;\n\n  /**\n   * The elements to align in the grid.\n   *\n   * You can provide any elements here. The number of elements\n   * should match the number of objects defined in the `gridDefinition`\n   * property.\n   */\n  children?: React.ReactNode;\n}\n\nexport namespace GridProps {\n  export type Breakpoint = _Breakpoint;\n\n  export type BreakpointMapping = Partial<Record<_Breakpoint, number>>;\n\n  export interface ElementDefinition {\n    /**\n     * The number of grid elements for the column to span.\n     */\n    colspan?: number | GridProps.BreakpointMapping;\n\n    /**\n     * The number of grid elements to offset the column by.\n     */\n    offset?: number | GridProps.BreakpointMapping;\n\n    /**\n     * The number of grid elements to pull the column to the left by.\n     */\n    pull?: number | GridProps.BreakpointMapping;\n\n    /**\n     * The number of grid elements to push the column to the right by.\n     */\n    push?: number | GridProps.BreakpointMapping;\n  }\n}\n"]}

package/grid/internal.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ClassValue } from 'clsx';
+import { Breakpoint } from '../internal/breakpoints';
+import { GridProps } from './interfaces';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+export interface InternalGridProps extends GridProps, InternalBaseComponentProps {
+    __breakpoint?: Breakpoint | null;
+    /**
+     * The handler that fires when the grid breakpoint changes.
+     */
+    __responsiveClassName?: (breakpoint: Breakpoint | null) => ClassValue;
+}
+declare const InternalGrid: React.ForwardRefExoticComponent<InternalGridProps & React.RefAttributes<any>>;
+export default InternalGrid;
+//# sourceMappingURL=internal.d.ts.map

package/grid/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/grid/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAa,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAGxC,OAAO,EAAE,UAAU,EAA0B,MAAM,yBAAyB,CAAC;AAI7E,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAEzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,MAAM,WAAW,iBAAkB,SAAQ,SAAS,EAAE,0BAA0B;IAC9E,YAAY,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAEjC;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI,KAAK,UAAU,CAAC;CACvE;AAED,QAAA,MAAM,YAAY,+EAwEjB,CAAC;AAgBF,eAAe,YAAY,CAAC"}

package/grid/internal.js

@@ -0,0 +1,54 @@
+import { __assign, __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import flattenChildren from 'react-keyed-flatten-children';
+import { getBaseProps } from '../internal/base-component';
+import { matchBreakpointMapping } from '../internal/breakpoints';
+import { isDevelopment } from '../internal/is-development';
+import * as logging from '../internal/logging';
+import styles from './styles.css.js';
+import { useContainerBreakpoints } from '../internal/hooks/container-queries';
+import { useMergeRefs } from '../internal/hooks/use-merge-refs';
+var InternalGrid = React.forwardRef(function (_a, ref) {
+    var _b;
+    var __breakpoint = _a.__breakpoint, _c = _a.gridDefinition, gridDefinition = _c === void 0 ? [] : _c, _d = _a.disableGutters, disableGutters = _d === void 0 ? false : _d, children = _a.children, __responsiveClassName = _a.__responsiveClassName, _e = _a.__internalRootRef, __internalRootRef = _e === void 0 ? null : _e, restProps = __rest(_a, ["__breakpoint", "gridDefinition", "disableGutters", "children", "__responsiveClassName", "__internalRootRef"]);
+    var _f = useContainerBreakpoints(undefined), defaultBreakpoint = _f[0], defaultRef = _f[1];
+    if (__breakpoint !== undefined) {
+        defaultBreakpoint = __breakpoint;
+        defaultRef = ref;
+    }
+    var baseProps = getBaseProps(restProps);
+    /*
+   Flattening the children allows us to "see through" React Fragments and nested arrays.
+   */
+    var flattenedChildren = flattenChildren(children);
+    if (isDevelopment) {
+        var columnCount = gridDefinition.length;
+        var childCount = flattenedChildren.length;
+        if (columnCount !== childCount) {
+            logging.warnOnce('Grid', "The number of children (".concat(childCount, ") does not match the number of columns defined (").concat(columnCount, ")."));
+        }
+    }
+    var mergedRef = useMergeRefs(defaultRef, __internalRootRef);
+    return (React.createElement("div", __assign({}, baseProps, { className: clsx(styles.grid, baseProps.className, (_b = {}, _b[styles['no-gutters']] = disableGutters, _b), __responsiveClassName ? __responsiveClassName(defaultBreakpoint) : null), ref: mergedRef }), flattenedChildren.map(function (child, i) {
+        var _a, _b, _c, _d;
+        // If this react child is a primitive value, the key will be undefined
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        var key = child.key;
+        return (React.createElement("div", { key: key, className: clsx(styles['grid-column'], getColumnClassNames('colspan', (_a = gridDefinition[i]) === null || _a === void 0 ? void 0 : _a.colspan, defaultBreakpoint), getColumnClassNames('offset', (_b = gridDefinition[i]) === null || _b === void 0 ? void 0 : _b.offset, defaultBreakpoint), getColumnClassNames('pull', (_c = gridDefinition[i]) === null || _c === void 0 ? void 0 : _c.pull, defaultBreakpoint), getColumnClassNames('push', (_d = gridDefinition[i]) === null || _d === void 0 ? void 0 : _d.push, defaultBreakpoint)) },
+            React.createElement("div", { className: styles['restore-pointer-events'] }, child)));
+    })));
+});
+function getColumnClassNames(prop, mapping, breakpoint) {
+    if (typeof mapping === 'number') {
+        return styles["".concat(prop, "-").concat(mapping)];
+    }
+    if (breakpoint === null || mapping === undefined) {
+        return null;
+    }
+    return styles["".concat(prop, "-").concat(matchBreakpointMapping(mapping, breakpoint))];
+}
+export default InternalGrid;
+//# sourceMappingURL=internal.js.map

package/grid/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/grid/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, { ClassValue } from 'clsx';\nimport flattenChildren from 'react-keyed-flatten-children';\nimport { getBaseProps } from '../internal/base-component';\nimport { Breakpoint, matchBreakpointMapping } from '../internal/breakpoints';\nimport { isDevelopment } from '../internal/is-development';\nimport * as logging from '../internal/logging';\nimport styles from './styles.css.js';\nimport { GridProps } from './interfaces';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\n\nexport interface InternalGridProps extends GridProps, InternalBaseComponentProps {\n  __breakpoint?: Breakpoint | null;\n\n  /**\n   * The handler that fires when the grid breakpoint changes.\n   */\n  __responsiveClassName?: (breakpoint: Breakpoint | null) => ClassValue;\n}\n\nconst InternalGrid = React.forwardRef(\n  (\n    {\n      __breakpoint,\n      gridDefinition = [],\n      disableGutters = false,\n      children,\n      __responsiveClassName,\n      __internalRootRef = null,\n      ...restProps\n    }: InternalGridProps,\n    ref: React.Ref<any>\n  ) => {\n    let [defaultBreakpoint, defaultRef]: [Breakpoint | null, React.Ref<any>] = useContainerBreakpoints(undefined);\n    if (__breakpoint !== undefined) {\n      defaultBreakpoint = __breakpoint;\n      defaultRef = ref;\n    }\n\n    const baseProps = getBaseProps(restProps);\n    /*\n   Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n   */\n    const flattenedChildren = flattenChildren(children);\n\n    if (isDevelopment) {\n      const columnCount = gridDefinition.length;\n      const childCount = flattenedChildren.length;\n      if (columnCount !== childCount) {\n        logging.warnOnce(\n          'Grid',\n          `The number of children (${childCount}) does not match the number of columns defined (${columnCount}).`\n        );\n      }\n    }\n\n    const mergedRef = useMergeRefs(defaultRef, __internalRootRef);\n\n    return (\n      <div\n        {...baseProps}\n        className={clsx(\n          styles.grid,\n          baseProps.className,\n          { [styles['no-gutters']]: disableGutters },\n          __responsiveClassName ? __responsiveClassName(defaultBreakpoint) : null\n        )}\n        ref={mergedRef}\n      >\n        {flattenedChildren.map((child, i) => {\n          // If this react child is a primitive value, the key will be undefined\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          const key = (child as any).key;\n\n          return (\n            <div\n              key={key}\n              className={clsx(\n                styles['grid-column'],\n                getColumnClassNames('colspan', gridDefinition[i]?.colspan, defaultBreakpoint),\n                getColumnClassNames('offset', gridDefinition[i]?.offset, defaultBreakpoint),\n                getColumnClassNames('pull', gridDefinition[i]?.pull, defaultBreakpoint),\n                getColumnClassNames('push', gridDefinition[i]?.push, defaultBreakpoint)\n              )}\n            >\n              <div className={styles['restore-pointer-events']}>{child}</div>\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nfunction getColumnClassNames(\n  prop: string,\n  mapping: undefined | number | GridProps.BreakpointMapping,\n  breakpoint: Breakpoint | null\n): string | null {\n  if (typeof mapping === 'number') {\n    return styles[`${prop}-${mapping}`];\n  }\n  if (breakpoint === null || mapping === undefined) {\n    return null;\n  }\n  return styles[`${prop}-${matchBreakpointMapping(mapping, breakpoint)}`];\n}\n\nexport default InternalGrid;\n"]}

package/grid/styles.css.js

@@ -0,0 +1,58 @@
+
+    import './styles.scoped.css';
+    export default {
+  "grid": "awsui_grid_14yj0_1ecf3_93",
+  "no-gutters": "awsui_no-gutters_14yj0_1ecf3_107",
+  "grid-column": "awsui_grid-column_14yj0_1ecf3_111",
+  "colspan-1": "awsui_colspan-1_14yj0_1ecf3_120",
+  "push-1": "awsui_push-1_14yj0_1ecf3_124",
+  "pull-1": "awsui_pull-1_14yj0_1ecf3_127",
+  "colspan-2": "awsui_colspan-2_14yj0_1ecf3_130",
+  "push-2": "awsui_push-2_14yj0_1ecf3_134",
+  "pull-2": "awsui_pull-2_14yj0_1ecf3_137",
+  "colspan-3": "awsui_colspan-3_14yj0_1ecf3_140",
+  "push-3": "awsui_push-3_14yj0_1ecf3_144",
+  "pull-3": "awsui_pull-3_14yj0_1ecf3_147",
+  "colspan-4": "awsui_colspan-4_14yj0_1ecf3_150",
+  "push-4": "awsui_push-4_14yj0_1ecf3_154",
+  "pull-4": "awsui_pull-4_14yj0_1ecf3_157",
+  "colspan-5": "awsui_colspan-5_14yj0_1ecf3_160",
+  "push-5": "awsui_push-5_14yj0_1ecf3_164",
+  "pull-5": "awsui_pull-5_14yj0_1ecf3_167",
+  "colspan-6": "awsui_colspan-6_14yj0_1ecf3_170",
+  "push-6": "awsui_push-6_14yj0_1ecf3_174",
+  "pull-6": "awsui_pull-6_14yj0_1ecf3_177",
+  "colspan-7": "awsui_colspan-7_14yj0_1ecf3_180",
+  "push-7": "awsui_push-7_14yj0_1ecf3_184",
+  "pull-7": "awsui_pull-7_14yj0_1ecf3_187",
+  "colspan-8": "awsui_colspan-8_14yj0_1ecf3_190",
+  "push-8": "awsui_push-8_14yj0_1ecf3_194",
+  "pull-8": "awsui_pull-8_14yj0_1ecf3_197",
+  "colspan-9": "awsui_colspan-9_14yj0_1ecf3_200",
+  "push-9": "awsui_push-9_14yj0_1ecf3_204",
+  "pull-9": "awsui_pull-9_14yj0_1ecf3_207",
+  "colspan-10": "awsui_colspan-10_14yj0_1ecf3_210",
+  "push-10": "awsui_push-10_14yj0_1ecf3_214",
+  "pull-10": "awsui_pull-10_14yj0_1ecf3_217",
+  "colspan-11": "awsui_colspan-11_14yj0_1ecf3_220",
+  "push-11": "awsui_push-11_14yj0_1ecf3_224",
+  "pull-11": "awsui_pull-11_14yj0_1ecf3_227",
+  "colspan-12": "awsui_colspan-12_14yj0_1ecf3_230",
+  "push-12": "awsui_push-12_14yj0_1ecf3_234",
+  "pull-12": "awsui_pull-12_14yj0_1ecf3_237",
+  "push-0": "awsui_push-0_14yj0_1ecf3_240",
+  "pull-0": "awsui_pull-0_14yj0_1ecf3_243",
+  "offset-1": "awsui_offset-1_14yj0_1ecf3_246",
+  "offset-2": "awsui_offset-2_14yj0_1ecf3_249",
+  "offset-3": "awsui_offset-3_14yj0_1ecf3_252",
+  "offset-4": "awsui_offset-4_14yj0_1ecf3_255",
+  "offset-5": "awsui_offset-5_14yj0_1ecf3_258",
+  "offset-6": "awsui_offset-6_14yj0_1ecf3_261",
+  "offset-7": "awsui_offset-7_14yj0_1ecf3_264",
+  "offset-8": "awsui_offset-8_14yj0_1ecf3_267",
+  "offset-9": "awsui_offset-9_14yj0_1ecf3_270",
+  "offset-10": "awsui_offset-10_14yj0_1ecf3_273",
+  "offset-11": "awsui_offset-11_14yj0_1ecf3_276",
+  "restore-pointer-events": "awsui_restore-pointer-events_14yj0_1ecf3_280"
+};
+