@cloudscape-design/components-themeable 3.0.1 → 3.0.4

package/lib/internal/template/code-editor/preferences-modal.js

@@ -0,0 +1,39 @@
+import { __spreadArray } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import InternalBox from '../box/internal';
+import { InternalButton } from '../button/internal';
+import InternalCheckbox from '../checkbox/internal';
+import InternalColumnLayout from '../column-layout/internal';
+import InternalFormField from '../form-field/internal';
+import InternalModal from '../modal/internal';
+import InternalSelect from '../select/internal';
+import InternalSpaceBetween from '../space-between/internal';
+import { FormFieldContext } from '../internal/context/form-field-context';
+import { LightThemes, DarkThemes } from './ace-themes';
+export default (function (props) {
+    var _a, _b, _c, _d;
+    var _e = useState((_b = (_a = props.preferences) === null || _a === void 0 ? void 0 : _a.wrapLines) !== null && _b !== void 0 ? _b : true), wrapLines = _e[0], setWrapLines = _e[1];
+    var _f = useState((_d = (_c = props.preferences) === null || _c === void 0 ? void 0 : _c.theme) !== null && _d !== void 0 ? _d : props.defaultTheme), theme = _f[0], setTheme = _f[1];
+    var _g = useState(function () { return __spreadArray(__spreadArray([], LightThemes, true), DarkThemes, true).filter(function (t) { return t.value === theme; })[0]; }), selectedThemeOption = _g[0], setSelectedThemeOption = _g[1];
+    var onThemeSelected = function (e) {
+        setTheme(e.detail.selectedOption.value);
+        setSelectedThemeOption(e.detail.selectedOption);
+    };
+    return (React.createElement(FormFieldContext.Provider, { value: {} },
+        React.createElement(InternalModal, { size: "medium", visible: true, onDismiss: props.onDismiss, header: props.i18nStrings.header, closeAriaLabel: props.i18nStrings.cancel, footer: React.createElement(InternalBox, { float: "right" },
+                React.createElement(InternalSpaceBetween, { direction: "horizontal", size: "xs" },
+                    React.createElement(InternalButton, { onClick: props.onDismiss }, props.i18nStrings.cancel),
+                    React.createElement(InternalButton, { onClick: function () { return props.onConfirm({ wrapLines: wrapLines, theme: theme }); }, variant: "primary" }, props.i18nStrings.confirm))) },
+            React.createElement(InternalColumnLayout, { columns: 2, variant: "text-grid" },
+                React.createElement("div", null,
+                    React.createElement(InternalCheckbox, { checked: wrapLines, onChange: function (e) { return setWrapLines(e.detail.checked); } }, props.i18nStrings.wrapLines)),
+                React.createElement("div", null,
+                    React.createElement(InternalFormField, { label: props.i18nStrings.theme },
+                        React.createElement(InternalSelect, { selectedOption: selectedThemeOption, onChange: onThemeSelected, options: [
+                                { label: props.i18nStrings.lightThemes, options: LightThemes },
+                                { label: props.i18nStrings.darkThemes, options: DarkThemes },
+                            ], filteringType: "auto" })))))));
+});
+//# sourceMappingURL=preferences-modal.js.map

package/lib/internal/template/code-editor/preferences-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"preferences-modal.js","sourceRoot":"","sources":["../../../src/code-editor/preferences-modal.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, { useState } from 'react';\n\nimport InternalBox from '../box/internal';\nimport { InternalButton } from '../button/internal';\nimport InternalCheckbox from '../checkbox/internal';\nimport InternalColumnLayout from '../column-layout/internal';\nimport InternalFormField from '../form-field/internal';\nimport InternalModal from '../modal/internal';\nimport { SelectProps } from '../select/interfaces';\nimport InternalSelect from '../select/internal';\nimport InternalSpaceBetween from '../space-between/internal';\nimport { FormFieldContext } from '../internal/context/form-field-context';\nimport { NonCancelableCustomEvent } from '../internal/events';\nimport { LightThemes, DarkThemes } from './ace-themes';\nimport { CodeEditorProps } from './interfaces';\n\ninterface PreferencesModali18nStrings {\n  header: string;\n  cancel: string;\n  confirm: string;\n  wrapLines: string;\n  theme: string;\n  lightThemes: string;\n  darkThemes: string;\n}\n\ninterface PreferencesModalProps {\n  preferences?: Partial<CodeEditorProps.Preferences>;\n\n  i18nStrings: PreferencesModali18nStrings;\n\n  defaultTheme: CodeEditorProps.Theme;\n\n  onConfirm: (preferences: CodeEditorProps.Preferences) => void;\n  onDismiss: () => void;\n}\n\nexport default (props: PreferencesModalProps) => {\n  const [wrapLines, setWrapLines] = useState<boolean>(props.preferences?.wrapLines ?? true);\n  const [theme, setTheme] = useState<CodeEditorProps.Theme>(props.preferences?.theme ?? props.defaultTheme);\n  const [selectedThemeOption, setSelectedThemeOption] = useState<SelectProps.Option>(\n    () => [...LightThemes, ...DarkThemes].filter(t => t.value === theme)[0]\n  );\n\n  const onThemeSelected = (e: NonCancelableCustomEvent<SelectProps.ChangeDetail>) => {\n    setTheme(e.detail.selectedOption.value as CodeEditorProps.Theme);\n    setSelectedThemeOption(e.detail.selectedOption);\n  };\n\n  return (\n    <FormFieldContext.Provider value={{}}>\n      <InternalModal\n        size=\"medium\"\n        visible={true}\n        onDismiss={props.onDismiss}\n        header={props.i18nStrings.header}\n        closeAriaLabel={props.i18nStrings.cancel}\n        footer={\n          <InternalBox float=\"right\">\n            <InternalSpaceBetween direction=\"horizontal\" size=\"xs\">\n              <InternalButton onClick={props.onDismiss}>{props.i18nStrings.cancel}</InternalButton>\n              <InternalButton onClick={() => props.onConfirm({ wrapLines, theme })} variant=\"primary\">\n                {props.i18nStrings.confirm}\n              </InternalButton>\n            </InternalSpaceBetween>\n          </InternalBox>\n        }\n      >\n        <InternalColumnLayout columns={2} variant=\"text-grid\">\n          <div>\n            <InternalCheckbox checked={wrapLines} onChange={e => setWrapLines(e.detail.checked)}>\n              {props.i18nStrings.wrapLines}\n            </InternalCheckbox>\n          </div>\n          <div>\n            <InternalFormField label={props.i18nStrings.theme}>\n              <InternalSelect\n                selectedOption={selectedThemeOption}\n                onChange={onThemeSelected}\n                options={[\n                  { label: props.i18nStrings.lightThemes, options: LightThemes },\n                  { label: props.i18nStrings.darkThemes, options: DarkThemes },\n                ]}\n                filteringType=\"auto\"\n              />\n            </InternalFormField>\n          </div>\n        </InternalColumnLayout>\n      </InternalModal>\n    </FormFieldContext.Provider>\n  );\n};\n"]}

package/lib/internal/template/container/styles.css.js

@@ -0,0 +1,20 @@
+
+    import './styles.scoped.css';
+    export default {
+  "root": "awsui_root_14iqq_wvh8f_97",
+  "variant-default": "awsui_variant-default_14iqq_wvh8f_109",
+  "variant-stacked": "awsui_variant-stacked_14iqq_wvh8f_109",
+  "header": "awsui_header_14iqq_wvh8f_132",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_wvh8f_136",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_wvh8f_140",
+  "header-stuck": "awsui_header-stuck_14iqq_wvh8f_146",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_wvh8f_151",
+  "with-paddings": "awsui_with-paddings_14iqq_wvh8f_157",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_wvh8f_160",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_wvh8f_184",
+  "dark-header": "awsui_dark-header_14iqq_wvh8f_192",
+  "content": "awsui_content_14iqq_wvh8f_196",
+  "footer": "awsui_footer_14iqq_wvh8f_203",
+  "with-divider": "awsui_with-divider_14iqq_wvh8f_206"
+};
+  

package/lib/internal/template/container/styles.scoped.css

@@ -0,0 +1,262 @@
+/*
+ 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_root_14iqq_wvh8f_97: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: #16191f;
+  color: var(--color-text-body-default-7m2b3r, #16191f);
+  font-weight: 400;
+  font-family: "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif;
+  font-family: var(--font-family-base-mylvzb, "Noto Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  display: block;
+  word-wrap: break-word;
+}
+.awsui_root_14iqq_wvh8f_97.awsui_variant-default_14iqq_wvh8f_109:not(#\9), .awsui_root_14iqq_wvh8f_97.awsui_variant-stacked_14iqq_wvh8f_109:not(#\9) {
+  box-shadow: 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
+  box-shadow: var(--shadow-container-0bkp96, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
+  border-top: 1px solid #eaeded;
+  border-top: var(--border-container-top-width-fs2udu, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
+  border-radius: 0px;
+  border-radius: var(--border-container-radius-gcr27z, 0px);
+  box-sizing: border-box;
+  background-color: #ffffff;
+  background-color: var(--color-background-container-content-o88wxm, #ffffff);
+}
+@media screen and (-ms-high-contrast: active) {
+  .awsui_root_14iqq_wvh8f_97.awsui_variant-default_14iqq_wvh8f_109:not(#\9), .awsui_root_14iqq_wvh8f_97.awsui_variant-stacked_14iqq_wvh8f_109:not(#\9) {
+    border: 1px solid #eaeded;
+    border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
+  }
+}
+.awsui_root_14iqq_wvh8f_97.awsui_variant-stacked_14iqq_wvh8f_109:not(#\9):not(:last-child) {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.awsui_root_14iqq_wvh8f_97.awsui_variant-stacked_14iqq_wvh8f_109 + .awsui_root_14iqq_wvh8f_97.awsui_variant-stacked_14iqq_wvh8f_109:not(#\9) {
+  border-top: 1px solid #eaeded;
+  border-top: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  box-shadow: 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
+  box-shadow: var(--shadow-container-stacked-j8j87i, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
+}
+
+.awsui_header_14iqq_wvh8f_132:not(#\9) {
+  background-color: #fafafa;
+  background-color: var(--color-background-container-header-g9rg0j, #fafafa);
+  border-radius: 0px;
+  border-radius: var(--border-container-radius-gcr27z, 0px);
+}
+.awsui_header-sticky-disabled_14iqq_wvh8f_136:not(#\9) {
+  position: relative;
+  z-index: 1;
+}
+.awsui_header-sticky-enabled_14iqq_wvh8f_140:not(#\9) {
+  top: 0;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  position: sticky;
+  z-index: 800;
+}
+.awsui_header-stuck_14iqq_wvh8f_146:not(#\9) {
+  box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5);
+  box-shadow: var(--shadow-sticky-embedded-5acv0s, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
+  border: 0;
+  border-radius: 0;
+}
+.awsui_header-dynamic-height_14iqq_wvh8f_151.awsui_header-stuck_14iqq_wvh8f_146:not(#\9) {
+  margin-bottom: calc(36px - 22px);
+  margin-bottom: calc(var(--font-heading-xl-line-height-qeciux, 36px) - var(--font-heading-l-line-height-oujdab, 22px));
+}
+.awsui_header_14iqq_wvh8f_132:not(#\9):not(:empty) {
+  border-bottom: 1px solid #eaeded;
+  border-bottom: var(--border-container-sticky-width-pybmba, 1px) solid var(--color-border-container-divider-z203b8, #eaeded);
+}
+.awsui_header_14iqq_wvh8f_132.awsui_with-paddings_14iqq_wvh8f_157:not(#\9) {
+  padding: 12px 20px;
+  padding: var(--space-container-header-vertical-0bd19u, 12px) var(--space-container-horizontal-tlw03i, 20px);
+}
+.awsui_header-variant-cards_14iqq_wvh8f_160:not(#\9) {
+  box-shadow: 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15);
+  box-shadow: var(--shadow-container-0bkp96, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
+  border-top: 1px solid #eaeded;
+  border-top: var(--border-container-top-width-fs2udu, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
+  border-radius: 0px;
+  border-radius: var(--border-container-radius-gcr27z, 0px);
+  box-sizing: border-box;
+}
+@media screen and (-ms-high-contrast: active) {
+  .awsui_header-variant-cards_14iqq_wvh8f_160:not(#\9) {
+    border: 1px solid #eaeded;
+    border: var(--border-field-width-y6x4sn, 1px) solid var(--color-border-container-top-1itxac, #eaeded);
+  }
+}
+.awsui_header-variant-cards_14iqq_wvh8f_160:not(#\9):not(:empty) {
+  border-bottom: 1px solid #d5dbdb;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+}
+@supports (--css-variable-support-check: #000) {
+  .awsui_header-variant-cards_14iqq_wvh8f_160:not(#\9):not(:empty) {
+    border-bottom: 0;
+  }
+}
+.awsui_header-variant-cards_14iqq_wvh8f_160.awsui_header-stuck_14iqq_wvh8f_146:not(#\9) {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.awsui_header-variant-full-page_14iqq_wvh8f_184.awsui_header-stuck_14iqq_wvh8f_146:not(#\9) {
+  box-shadow: 0px 1px 4px -2px rgba(0, 28, 36, 0.5);
+  box-shadow: var(--shadow-sticky-thyisb, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
+}
+
+/*
+The dynamic height dark header needs a background that will cover
+the default white background of the container component.
+*/
+.awsui_dark-header_14iqq_wvh8f_192:not(#\9) {
+  background-color: #f2f3f3;
+  background-color: var(--color-background-layout-main-q0tbxx, #f2f3f3);
+}
+
+.awsui_content_14iqq_wvh8f_196.awsui_with-paddings_14iqq_wvh8f_157:not(#\9) {
+  padding: 20px 20px;
+  padding: var(--space-scaled-l-t03y3z, 20px) var(--space-container-horizontal-tlw03i, 20px);
+}
+.awsui_header_14iqq_wvh8f_132 + .awsui_content_14iqq_wvh8f_196.awsui_with-paddings_14iqq_wvh8f_157:not(#\9) {
+  padding-top: 16px;
+  padding-top: var(--space-container-content-top-u412x3, 16px);
+}
+
+.awsui_footer_14iqq_wvh8f_203.awsui_with-paddings_14iqq_wvh8f_157:not(#\9) {
+  padding: 12px 20px;
+  padding: var(--space-scaled-s-cu1hzn, 12px) var(--space-container-horizontal-tlw03i, 20px);
+}
+.awsui_footer_14iqq_wvh8f_203.awsui_with-divider_14iqq_wvh8f_206:not(#\9) {
+  border-top: 1px solid #eaeded;
+  border-top: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-divider-default-k96bks, #eaeded);
+}

package/lib/internal/template/container/styles.selectors.js

@@ -0,0 +1,21 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "root": "awsui_root_14iqq_wvh8f_97",
+  "variant-default": "awsui_variant-default_14iqq_wvh8f_109",
+  "variant-stacked": "awsui_variant-stacked_14iqq_wvh8f_109",
+  "header": "awsui_header_14iqq_wvh8f_132",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_wvh8f_136",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_wvh8f_140",
+  "header-stuck": "awsui_header-stuck_14iqq_wvh8f_146",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_wvh8f_151",
+  "with-paddings": "awsui_with-paddings_14iqq_wvh8f_157",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_wvh8f_160",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_wvh8f_184",
+  "dark-header": "awsui_dark-header_14iqq_wvh8f_192",
+  "content": "awsui_content_14iqq_wvh8f_196",
+  "footer": "awsui_footer_14iqq_wvh8f_203",
+  "with-divider": "awsui_with-divider_14iqq_wvh8f_206"
+};
+  

package/lib/internal/template/container/use-sticky-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAA6E,MAAM,OAAO,CAAC;AAQ7G,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,eAAO,MAAM,mBAAmB,mDAA8D,CAAC;AAE/F,eAAO,MAAM,eAAe,YACjB,UAAU,cAAc,CAAC,aACvB,UAAU,cAAc,CAAC;;;;;;;;;;CAuFrC,CAAC;AAEF,wBAAgB,uBAAuB,YAGtC"}