npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1315 → 3.0.1317 - Mend

@cloudscape-design/components-themeable 3.0.1315 → 3.0.1317

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.

Files changed (83) hide show

package/lib/internal/template/link/styles.selectors.js CHANGED Viewed

@@ -2,26 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "link": "awsui_link_4c84z_1c1ni_145",
-  "variant-recovery": "awsui_variant-recovery_4c84z_1c1ni_213",
-  "variant-secondary": "awsui_variant-secondary_4c84z_1c1ni_246",
-  "variant-primary": "awsui_variant-primary_4c84z_1c1ni_281",
-  "variant-info": "awsui_variant-info_4c84z_1c1ni_314",
-  "variant-value-large": "awsui_variant-value-large_4c84z_1c1ni_349",
-  "variant-top-navigation": "awsui_variant-top-navigation_4c84z_1c1ni_381",
-  "button": "awsui_button_4c84z_1c1ni_416",
-  "color-inverted": "awsui_color-inverted_4c84z_1c1ni_451",
-  "font-size-body-s": "awsui_font-size-body-s_4c84z_1c1ni_472",
-  "font-size-body-m": "awsui_font-size-body-m_4c84z_1c1ni_480",
-  "font-size-heading-xs": "awsui_font-size-heading-xs_4c84z_1c1ni_487",
-  "font-size-heading-s": "awsui_font-size-heading-s_4c84z_1c1ni_495",
-  "font-size-heading-m": "awsui_font-size-heading-m_4c84z_1c1ni_503",
-  "font-size-heading-l": "awsui_font-size-heading-l_4c84z_1c1ni_511",
-  "font-size-heading-xl": "awsui_font-size-heading-xl_4c84z_1c1ni_519",
-  "font-size-display-l": "awsui_font-size-display-l_4c84z_1c1ni_527",
-  "font-size-inherit": "awsui_font-size-inherit_4c84z_1c1ni_535",
-  "in-inline-token": "awsui_in-inline-token_4c84z_1c1ni_543",
-  "icon-wrapper": "awsui_icon-wrapper_4c84z_1c1ni_547",
-  "icon": "awsui_icon_4c84z_1c1ni_547"
+  "link": "awsui_link_4c84z_1kln3_145",
+  "variant-recovery": "awsui_variant-recovery_4c84z_1kln3_213",
+  "variant-secondary": "awsui_variant-secondary_4c84z_1kln3_246",
+  "variant-primary": "awsui_variant-primary_4c84z_1kln3_281",
+  "variant-info": "awsui_variant-info_4c84z_1kln3_314",
+  "variant-value-large": "awsui_variant-value-large_4c84z_1kln3_349",
+  "variant-top-navigation": "awsui_variant-top-navigation_4c84z_1kln3_381",
+  "button": "awsui_button_4c84z_1kln3_416",
+  "color-inverted": "awsui_color-inverted_4c84z_1kln3_488",
+  "font-size-body-s": "awsui_font-size-body-s_4c84z_1kln3_516",
+  "font-size-body-m": "awsui_font-size-body-m_4c84z_1kln3_524",
+  "font-size-heading-xs": "awsui_font-size-heading-xs_4c84z_1kln3_531",
+  "font-size-heading-s": "awsui_font-size-heading-s_4c84z_1kln3_539",
+  "font-size-heading-m": "awsui_font-size-heading-m_4c84z_1kln3_547",
+  "font-size-heading-l": "awsui_font-size-heading-l_4c84z_1kln3_555",
+  "font-size-heading-xl": "awsui_font-size-heading-xl_4c84z_1kln3_563",
+  "font-size-display-l": "awsui_font-size-display-l_4c84z_1kln3_571",
+  "font-size-inherit": "awsui_font-size-inherit_4c84z_1kln3_579",
+  "in-inline-token": "awsui_in-inline-token_4c84z_1kln3_587",
+  "icon-wrapper": "awsui_icon-wrapper_4c84z_1kln3_591",
+  "icon": "awsui_icon_4c84z_1kln3_591"
 };

package/lib/internal/template/prompt-input/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;~~AAI1B~~,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,QAAA,MAAM,WAAW,~~wIA8ChB~~,CAAC;AAEF,eAAe,WAAW,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/prompt-input/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAGhD,OAAO,EAAE,gBAAgB,EAAE,CAAC;AAE5B,QAAA,MAAM,WAAW,wIAkDhB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/internal/template/prompt-input/index.js CHANGED Viewed

@@ -4,6 +4,7 @@
 import React from 'react';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
+import { supportsTokenMode } from './core/token-renderer';
 import InternalPromptInput from './internal';
 const PromptInput = React.forwardRef(({ autoComplete, autoFocus, disableBrowserAutocorrect, disableActionButton, spellcheck, readOnly, actionButtonIconName, minRows = 1, maxRows = 3, ...props }, ref) => {
     const baseComponentProps = useBaseComponent('PromptInput', {
@@ -19,7 +20,8 @@ const PromptInput = React.forwardRef(({ autoComplete, autoFocus, disableBrowserA
             maxRows,
         },
     });
-    return (React.createElement(InternalPromptInput, { readOnly: readOnly, autoComplete: autoComplete, autoFocus: autoFocus, disableBrowserAutocorrect: disableBrowserAutocorrect, disableActionButton: disableActionButton, spellcheck: spellcheck, actionButtonIconName: actionButtonIconName, minRows: minRows, maxRows: maxRows, ...props, ...baseComponentProps, ref: ref }));
+    const isTokenMode = props.tokens !== undefined && supportsTokenMode;
+    return (React.createElement(InternalPromptInput, { key: isTokenMode ? 'token-mode' : 'string-mode', readOnly: readOnly, autoComplete: autoComplete, autoFocus: autoFocus, disableBrowserAutocorrect: disableBrowserAutocorrect, disableActionButton: disableActionButton, spellcheck: spellcheck, actionButtonIconName: actionButtonIconName, minRows: minRows, maxRows: maxRows, ...props, ...baseComponentProps, ref: ref }));
 });
 applyDisplayName(PromptInput, 'PromptInput');
 export default PromptInput;

package/lib/internal/template/prompt-input/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/prompt-input/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;~~AAExE~~,OAAO,mBAAmB,MAAM,YAAY,CAAC;AAI7C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,YAAY,EACZ,SAAS,EACT,yBAAyB,EACzB,mBAAmB,EACnB,UAAU,EACV,QAAQ,EACR,oBAAoB,EACpB,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,GAAG,KAAK,EACS,EACnB,GAA6E,EAC7E,EAAE;IACF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,EAAE;QACzD,KAAK,EAAE;YACL,QAAQ;YACR,YAAY;YACZ,SAAS;YACT,yBAAyB;YACzB,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,OAAO;YACP,OAAO;SACR;KACF,CAAC,CAAC;~~IACH~~,OAAO,CACL,oBAAC,mBAAmB,IAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,yBAAyB,EAAE,yBAAyB,EACpD,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,oBAAoB,EAAE,oBAAoB,EAC1C,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,KACZ,KAAK,KACL,kBAAkB,EACtB,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAC7C,eAAe,WAAW,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 useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { PromptInputProps } from './interfaces';\nimport InternalPromptInput from './internal';\n\nexport { PromptInputProps };\n\nconst PromptInput = React.forwardRef(\n (\n {\n autoComplete,\n autoFocus,\n disableBrowserAutocorrect,\n disableActionButton,\n spellcheck,\n readOnly,\n actionButtonIconName,\n minRows = 1,\n maxRows = 3,\n ...props\n }: PromptInputProps,\n ref: React.Ref<PromptInputProps.Ref \| HTMLTextAreaElement \| HTMLInputElement>\n ) => {\n const baseComponentProps = useBaseComponent('PromptInput', {\n props: {\n readOnly,\n autoComplete,\n autoFocus,\n disableBrowserAutocorrect,\n disableActionButton,\n spellcheck,\n actionButtonIconName,\n minRows,\n maxRows,\n },\n });\n return (\n <InternalPromptInput\n readOnly={readOnly}\n autoComplete={autoComplete}\n autoFocus={autoFocus}\n disableBrowserAutocorrect={disableBrowserAutocorrect}\n disableActionButton={disableActionButton}\n spellcheck={spellcheck}\n actionButtonIconName={actionButtonIconName}\n minRows={minRows}\n maxRows={maxRows}\n {...props}\n {...baseComponentProps}\n ref={ref}\n />\n );\n }\n);\napplyDisplayName(PromptInput, 'PromptInput');\nexport default PromptInput;\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/prompt-input/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,mBAAmB,MAAM,YAAY,CAAC;AAI7C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,YAAY,EACZ,SAAS,EACT,yBAAyB,EACzB,mBAAmB,EACnB,UAAU,EACV,QAAQ,EACR,oBAAoB,EACpB,OAAO,GAAG,CAAC,EACX,OAAO,GAAG,CAAC,EACX,GAAG,KAAK,EACS,EACnB,GAA6E,EAC7E,EAAE;IACF,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,EAAE;QACzD,KAAK,EAAE;YACL,QAAQ;YACR,YAAY;YACZ,SAAS;YACT,yBAAyB;YACzB,mBAAmB;YACnB,UAAU;YACV,oBAAoB;YACpB,OAAO;YACP,OAAO;SACR;KACF,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,KAAK,SAAS,IAAI,iBAAiB,CAAC;IAEpE,OAAO,CACL,oBAAC,mBAAmB,IAClB,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,aAAa,EAC/C,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,yBAAyB,EAAE,yBAAyB,EACpD,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,oBAAoB,EAAE,oBAAoB,EAC1C,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,KACZ,KAAK,KACL,kBAAkB,EACtB,GAAG,EAAE,GAAG,GACR,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AACF,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAC7C,eAAe,WAAW,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 useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { supportsTokenMode } from './core/token-renderer';\nimport { PromptInputProps } from './interfaces';\nimport InternalPromptInput from './internal';\n\nexport { PromptInputProps };\n\nconst PromptInput = React.forwardRef(\n (\n {\n autoComplete,\n autoFocus,\n disableBrowserAutocorrect,\n disableActionButton,\n spellcheck,\n readOnly,\n actionButtonIconName,\n minRows = 1,\n maxRows = 3,\n ...props\n }: PromptInputProps,\n ref: React.Ref<PromptInputProps.Ref \| HTMLTextAreaElement \| HTMLInputElement>\n ) => {\n const baseComponentProps = useBaseComponent('PromptInput', {\n props: {\n readOnly,\n autoComplete,\n autoFocus,\n disableBrowserAutocorrect,\n disableActionButton,\n spellcheck,\n actionButtonIconName,\n minRows,\n maxRows,\n },\n });\n\n const isTokenMode = props.tokens !== undefined && supportsTokenMode;\n\n return (\n <InternalPromptInput\n key={isTokenMode ? 'token-mode' : 'string-mode'}\n readOnly={readOnly}\n autoComplete={autoComplete}\n autoFocus={autoFocus}\n disableBrowserAutocorrect={disableBrowserAutocorrect}\n disableActionButton={disableActionButton}\n spellcheck={spellcheck}\n actionButtonIconName={actionButtonIconName}\n minRows={minRows}\n maxRows={maxRows}\n {...props}\n {...baseComponentProps}\n ref={ref}\n />\n );\n }\n);\napplyDisplayName(PromptInput, 'PromptInput');\nexport default PromptInput;\n"]}

package/lib/internal/template/side-navigation/implementation.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { SideNavigationProps } from './interfaces';
 type SideNavigationInternalProps = SideNavigationProps & InternalBaseComponentProps;
-export declare function SideNavigationImplementation({ header, itemsControl, activeHref, items, onFollow, onChange, __internalRootRef, ...props }: SideNavigationInternalProps): JSX.Element;
+export declare function SideNavigationImplementation({ header, itemsControl, activeHref, items, onFollow, onChange, collapsed, __internalRootRef, ...props }: SideNavigationInternalProps): JSX.Element;
 export declare const createWidgetizedSideNavigation: (Loader?: typeof SideNavigationImplementation | undefined) => typeof SideNavigationImplementation;
 export {};
 //# sourceMappingURL=implementation.d.ts.map

package/lib/internal/template/side-navigation/implementation.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/implementation.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMnD,KAAK,2BAA2B,GAAG,mBAAmB,GAAG,0BAA0B,CAAC;AAEpF,wBAAgB,4BAA4B,CAAC,EAC3C,MAAM,EACN,YAAY,EACZ,UAAU,EACV,KAAU,EACV,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,2BAA2B,~~eAwD7B~~;AAED,eAAO,MAAM,8BAA8B,mGAA0D,CAAC"}
1	+ {"version":3,"file":"implementation.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/implementation.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMnD,KAAK,2BAA2B,GAAG,mBAAmB,GAAG,0BAA0B,CAAC;AAEpF,wBAAgB,4BAA4B,CAAC,EAC3C,MAAM,EACN,YAAY,EACZ,UAAU,EACV,KAAU,EACV,QAAQ,EACR,QAAQ,EACR,SAAiB,EACjB,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,2BAA2B,eA+D7B;AAED,eAAO,MAAM,8BAA8B,mGAA0D,CAAC"}

package/lib/internal/template/side-navigation/implementation.js CHANGED Viewed

@@ -10,7 +10,7 @@ import { createWidgetizedComponent } from '../internal/widgets';
 import { Header, NavigationItemsList } from './parts';
 import { checkDuplicateHrefs, generateExpandableItemsMapping } from './util';
 import styles from './styles.css.js';
-export function SideNavigationImplementation({ header, itemsControl, activeHref, items = [], onFollow, onChange, __internalRootRef, ...props }) {
+export function SideNavigationImplementation({ header, itemsControl, activeHref, items = [], onFollow, onChange, collapsed = false, __internalRootRef, ...props }) {
     const baseProps = getBaseProps(props);
     const isToolbar = useAppLayoutToolbarDesignEnabled();
     const parentMap = useMemo(() => generateExpandableItemsMapping(items), [items]);
@@ -27,10 +27,10 @@ export function SideNavigationImplementation({ header, itemsControl, activeHref,
         fireCancelableEvent(onFollow, item, sourceEvent);
     }, [onFollow]);
     return (React.createElement("div", { ...baseProps, className: clsx(styles.root, baseProps.className, isToolbar && styles['with-toolbar']), ref: __internalRootRef },
-        header && (React.createElement(Header, { definition: header, activeHref: activeHref, fireChange: onChangeHandler, fireFollow: onFollowHandler })),
-        itemsControl && React.createElement("div", { className: styles['items-control'] }, itemsControl),
+        header && (React.createElement(Header, { definition: header, activeHref: activeHref, fireChange: onChangeHandler, fireFollow: onFollowHandler, collapsed: collapsed })),
+        !collapsed && itemsControl && React.createElement("div", { className: styles['items-control'] }, itemsControl),
         items && (React.createElement("div", { className: styles['list-container'] },
-            React.createElement(NavigationItemsList, { variant: "root", items: items, fireFollow: onFollowHandler, fireChange: onChangeHandler, activeHref: activeHref })))));
+            React.createElement(NavigationItemsList, { variant: "root", items: items, fireFollow: onFollowHandler, fireChange: onChangeHandler, activeHref: activeHref, collapsed: collapsed })))));
 }
 export const createWidgetizedSideNavigation = createWidgetizedComponent(SideNavigationImplementation);
 //# sourceMappingURL=implementation.js.map

package/lib/internal/template/side-navigation/implementation.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/side-navigation/implementation.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,gCAAgC,EAAE,MAAM,mCAAmC,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,mBAAmB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAEjF,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,yBAAyB,EAAE,MAAM,qBAAqB,CAAC;AAEhE,OAAO,EAAE,MAAM,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,8BAA8B,EAAE,MAAM,QAAQ,CAAC;AAE7E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,4BAA4B,CAAC,EAC3C,MAAM,EACN,YAAY,EACZ,UAAU,EACV,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACoB;IAC5B,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,SAAS,GAAG,gCAAgC,EAAE,CAAC;IACrD,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,8BAA8B,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEhF,IAAI,aAAa,EAAE,CAAC;QAClB,kDAAkD;QAClD,sDAAsD;QACtD,SAAS,CAAC,GAAG,EAAE,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,MAAM,eAAe,GAAG,WAAW,CACjC,CAAC,IAA2E,EAAE,QAAiB,EAAE,EAAE;QACjG,wGAAwG;QACxG,sBAAsB,CAAC,QAAQ,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,SAAS,CAAC,GAAG,CAAC,IAAI,CAAE,EAAE,CAAC,CAAC;IAC1G,CAAC,EACD,CAAC,QAAQ,EAAE,SAAS,CAAC,CACtB,CAAC;IAEF,MAAM,eAAe,GAAG,WAAW,CACjC,CACE,IAI2C,EAC3C,WAAyC,EACzC,EAAE;QACF,mBAAmB,CAAC,QAAQ,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC;IACnD,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,gCACM,SAAS,EACb,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,SAAS,EAAE,SAAS,IAAI,MAAM,CAAC,cAAc,CAAC,CAAC,EACtF,GAAG,EAAE,iBAAiB;QAErB,MAAM,IAAI,CACT,oBAAC,MAAM,~~IAAC~~,UAAU,EAAE,MAAM,~~EAAE~~,UAAU,EAAE,UAAU,~~EAAE~~,UAAU,EAAE,eAAe,~~EAAE~~,UAAU,EAAE,eAAe,~~GAAI~~,~~CACjH~~;QACA,YAAY,IAAI,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,IAAG,YAAY,CAAO;~~QAC7E~~,KAAK,IAAI,CACR,6BAAK,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACtC,oBAAC,mBAAmB,IAClB,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,eAAe,EAC3B,UAAU,EAAE,UAAU,~~GACtB~~,CACE,CACP,CACG,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,8BAA8B,GAAG,yBAAyB,CAAC,4BAA4B,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useCallback, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { SideNavigationProps } from './interfaces';\nimport { Header, NavigationItemsList } from './parts';\nimport { checkDuplicateHrefs, generateExpandableItemsMapping } from './util';\n\nimport styles from './styles.css.js';\n\ntype SideNavigationInternalProps = SideNavigationProps & InternalBaseComponentProps;\n\nexport function SideNavigationImplementation({\n header,\n itemsControl,\n activeHref,\n items = [],\n onFollow,\n onChange,\n __internalRootRef,\n ...props\n}: SideNavigationInternalProps) {\n const baseProps = getBaseProps(props);\n const isToolbar = useAppLayoutToolbarDesignEnabled();\n const parentMap = useMemo(() => generateExpandableItemsMapping(items), [items]);\n\n if (isDevelopment) {\n // This code should be wiped in production anyway.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => checkDuplicateHrefs(items), [items]);\n }\n\n const onChangeHandler = useCallback(\n (item: SideNavigationProps.Section \| SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => {\n // generateExpandableItemsMapping walks through the entire tree, so we're certain about getting a value.\n fireNonCancelableEvent(onChange, { item, expanded: expanded, expandableParents: parentMap.get(item)! });\n },\n [onChange, parentMap]\n );\n\n const onFollowHandler = useCallback(\n (\n item:\n \| SideNavigationProps.Link\n \| SideNavigationProps.Header\n \| SideNavigationProps.LinkGroup\n \| SideNavigationProps.ExpandableLinkGroup,\n sourceEvent: React.SyntheticEvent \| Event\n ) => {\n fireCancelableEvent(onFollow, item, sourceEvent);\n },\n [onFollow]\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(styles.root, baseProps.className, isToolbar && styles['with-toolbar'])}\n ref={__internalRootRef}\n >\n {header && (\n <Header definition={header} activeHref={activeHref} fireChange={onChangeHandler} fireFollow={onFollowHandler} />\n )}\n {itemsControl && <div className={styles['items-control']}>{itemsControl}</div>}\n {items && (\n <div className={styles['list-container']}>\n <NavigationItemsList\n variant=\"root\"\n items={items}\n fireFollow={onFollowHandler}\n fireChange={onChangeHandler}\n activeHref={activeHref}\n />\n </div>\n )}\n </div>\n );\n}\n\nexport const createWidgetizedSideNavigation = createWidgetizedComponent(SideNavigationImplementation);\n"]}
1	+ {"version":3,"file":"implementation.js","sourceRoot":"","sources":["../../../src/side-navigation/implementation.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, { useCallback, useEffect, useMemo } from 'react';\nimport clsx from 'clsx';\n\nimport { useAppLayoutToolbarDesignEnabled } from '../app-layout/utils/feature-flags';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, fireNonCancelableEvent } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport { createWidgetizedComponent } from '../internal/widgets';\nimport { SideNavigationProps } from './interfaces';\nimport { Header, NavigationItemsList } from './parts';\nimport { checkDuplicateHrefs, generateExpandableItemsMapping } from './util';\n\nimport styles from './styles.css.js';\n\ntype SideNavigationInternalProps = SideNavigationProps & InternalBaseComponentProps;\n\nexport function SideNavigationImplementation({\n header,\n itemsControl,\n activeHref,\n items = [],\n onFollow,\n onChange,\n collapsed = false,\n __internalRootRef,\n ...props\n}: SideNavigationInternalProps) {\n const baseProps = getBaseProps(props);\n const isToolbar = useAppLayoutToolbarDesignEnabled();\n const parentMap = useMemo(() => generateExpandableItemsMapping(items), [items]);\n\n if (isDevelopment) {\n // This code should be wiped in production anyway.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useEffect(() => checkDuplicateHrefs(items), [items]);\n }\n\n const onChangeHandler = useCallback(\n (item: SideNavigationProps.Section \| SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => {\n // generateExpandableItemsMapping walks through the entire tree, so we're certain about getting a value.\n fireNonCancelableEvent(onChange, { item, expanded: expanded, expandableParents: parentMap.get(item)! });\n },\n [onChange, parentMap]\n );\n\n const onFollowHandler = useCallback(\n (\n item:\n \| SideNavigationProps.Link\n \| SideNavigationProps.Header\n \| SideNavigationProps.LinkGroup\n \| SideNavigationProps.ExpandableLinkGroup,\n sourceEvent: React.SyntheticEvent \| Event\n ) => {\n fireCancelableEvent(onFollow, item, sourceEvent);\n },\n [onFollow]\n );\n\n return (\n <div\n {...baseProps}\n className={clsx(styles.root, baseProps.className, isToolbar && styles['with-toolbar'])}\n ref={__internalRootRef}\n >\n {header && (\n <Header\n definition={header}\n activeHref={activeHref}\n fireChange={onChangeHandler}\n fireFollow={onFollowHandler}\n collapsed={collapsed}\n />\n )}\n {!collapsed && itemsControl && <div className={styles['items-control']}>{itemsControl}</div>}\n {items && (\n <div className={styles['list-container']}>\n <NavigationItemsList\n variant=\"root\"\n items={items}\n fireFollow={onFollowHandler}\n fireChange={onChangeHandler}\n activeHref={activeHref}\n collapsed={collapsed}\n />\n </div>\n )}\n </div>\n );\n}\n\nexport const createWidgetizedSideNavigation = createWidgetizedComponent(SideNavigationImplementation);\n"]}

package/lib/internal/template/side-navigation/index.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 import { SideNavigationProps } from './interfaces';
 export { SideNavigationProps };
-export default function SideNavigation({ items, ...props }: SideNavigationProps): JSX.Element;
+export default function SideNavigation({ items, collapsed, ...props }: SideNavigationProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/side-navigation/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,KAAU,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,~~eAkBnF~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAKnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,KAAU,EAAE,SAAiB,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,eAqBtG"}

package/lib/internal/template/side-navigation/index.js CHANGED Viewed

@@ -7,8 +7,10 @@ import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { InternalSideNavigation } from './internal';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
-export default function SideNavigation({ items = [], ...props }) {
-    const internalProps = useBaseComponent('SideNavigation');
+export default function SideNavigation({ items = [], collapsed = false, ...props }) {
+    const internalProps = useBaseComponent('SideNavigation', {
+        props: { collapsed },
+    });
     const componentAnalyticMetadata = {
         name: 'awsui.SideNavigation',
         label: `.${analyticsSelectors['header-link-text']}`,
@@ -16,7 +18,7 @@ export default function SideNavigation({ items = [], ...props }) {
             activeHref: props.activeHref || '',
         },
     };
-    return (React.createElement(InternalSideNavigation, { ...props, ...internalProps, items: items, ...getAnalyticsMetadataAttribute({ component: componentAnalyticMetadata }) }));
+    return (React.createElement(InternalSideNavigation, { ...props, ...internalProps, items: items, collapsed: collapsed, ...getAnalyticsMetadataAttribute({ component: componentAnalyticMetadata }) }));
 }
 applyDisplayName(SideNavigation, 'SideNavigation');
 //# sourceMappingURL=index.js.map

package/lib/internal/template/side-navigation/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/side-navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,GAAG,KAAK,EAAuB;~~IAClF~~,MAAM,aAAa,GAAG,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;~~IAEzD~~,MAAM,yBAAyB,GAAsD;QACnF,IAAI,EAAE,sBAAsB;QAC5B,KAAK,EAAE,IAAI,kBAAkB,CAAC,kBAAkB,CAAC,EAAE;QACnD,UAAU,EAAE;YACV,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,EAAE;SACnC;KACF,CAAC;IACF,OAAO,CACL,oBAAC,sBAAsB,OACjB,KAAK,KACL,aAAa,EACjB,KAAK,EAAE,KAAK,~~KACR~~,6BAA6B,CAAC,EAAE,SAAS,EAAE,yBAAyB,EAAE,CAAC,GAC3E,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,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 { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataSideNavigationComponent } from './analytics-metadata/interfaces';\nimport { SideNavigationProps } from './interfaces';\nimport { InternalSideNavigation } from './internal';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\nexport { SideNavigationProps };\n\nexport default function SideNavigation({ items = [], ...props }: SideNavigationProps) {\n const internalProps = useBaseComponent('SideNavigation');\n\n const componentAnalyticMetadata: GeneratedAnalyticsMetadataSideNavigationComponent = {\n name: 'awsui.SideNavigation',\n label: `.${analyticsSelectors['header-link-text']}`,\n properties: {\n activeHref: props.activeHref \|\| '',\n },\n };\n return (\n <InternalSideNavigation\n {...props}\n {...internalProps}\n items={items}\n {...getAnalyticsMetadataAttribute({ component: componentAnalyticMetadata })}\n />\n );\n}\n\napplyDisplayName(SideNavigation, 'SideNavigation');\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/side-navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAEpD,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AAIpE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,KAAK,GAAG,EAAE,EAAE,SAAS,GAAG,KAAK,EAAE,GAAG,KAAK,EAAuB;IACrG,MAAM,aAAa,GAAG,gBAAgB,CAAC,gBAAgB,EAAE;QACvD,KAAK,EAAE,EAAE,SAAS,EAAE;KACrB,CAAC,CAAC;IAEH,MAAM,yBAAyB,GAAsD;QACnF,IAAI,EAAE,sBAAsB;QAC5B,KAAK,EAAE,IAAI,kBAAkB,CAAC,kBAAkB,CAAC,EAAE;QACnD,UAAU,EAAE;YACV,UAAU,EAAE,KAAK,CAAC,UAAU,IAAI,EAAE;SACnC;KACF,CAAC;IACF,OAAO,CACL,oBAAC,sBAAsB,OACjB,KAAK,KACL,aAAa,EACjB,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,KAChB,6BAA6B,CAAC,EAAE,SAAS,EAAE,yBAAyB,EAAE,CAAC,GAC3E,CACH,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,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 { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataSideNavigationComponent } from './analytics-metadata/interfaces';\nimport { SideNavigationProps } from './interfaces';\nimport { InternalSideNavigation } from './internal';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\nexport { SideNavigationProps };\n\nexport default function SideNavigation({ items = [], collapsed = false, ...props }: SideNavigationProps) {\n const internalProps = useBaseComponent('SideNavigation', {\n props: { collapsed },\n });\n\n const componentAnalyticMetadata: GeneratedAnalyticsMetadataSideNavigationComponent = {\n name: 'awsui.SideNavigation',\n label: `.${analyticsSelectors['header-link-text']}`,\n properties: {\n activeHref: props.activeHref \|\| '',\n },\n };\n return (\n <InternalSideNavigation\n {...props}\n {...internalProps}\n items={items}\n collapsed={collapsed}\n {...getAnalyticsMetadataAttribute({ component: componentAnalyticMetadata })}\n />\n );\n}\n\napplyDisplayName(SideNavigation, 'SideNavigation');\n"]}

package/lib/internal/template/side-navigation/interfaces.d.ts CHANGED Viewed

@@ -45,6 +45,7 @@ export interface SideNavigationProps extends BaseComponentProps {
      * - `externalIconAriaLabel` (string) - Adds an aria-label to the external icon.
      * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,
      *     our UX guidelines allow only to add a Badge and/or a "New" label.
+     * - `icon` (ReactNode) - Optional content rendered before the link text. Accepts any React node (for example, an `<Icon />` component or a custom `<svg>`).
      *
      * #### Divider
      * Object that represents a horizontal divider between navigation content.
@@ -76,6 +77,7 @@ export interface SideNavigationProps extends BaseComponentProps {
      * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.
      *     Although there is no technical limitation to the nesting level,
      *     our UX recommendation is to use only one level.
+     * - `icon` (ReactNode) - Optional content rendered before the link group text. Accepts any React node.
      *
      * #### ExpandableLinkGroup
      *
@@ -88,6 +90,7 @@ export interface SideNavigationProps extends BaseComponentProps {
      * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.
      *     Although there is no technical limitation to the nesting level,
      *     our UX recommendation is to use only one level.
+     * - `icon` (ReactNode) - Optional content rendered before the expandable link group text. Accepts any React node.
      */
     items?: ReadonlyArray<SideNavigationProps.Item>;
     /**
@@ -115,11 +118,24 @@ export interface SideNavigationProps extends BaseComponentProps {
      * upon changing the `activeHref` property, this event isn't raised.
      */
     onChange?: NonCancelableEventHandler<SideNavigationProps.ChangeDetail>;
+    /**
+     * If true, the navigation is rendered in a compact, icon-only state:
+     * - Item text labels and the header title are hidden.
+     * - Section, `Section group`, `Link group`, and `Expandable link group`
+     *   children are not rendered.
+     * - `Items control` is not rendered.
+     * - Items without an `icon` are not rendered. Provide an icon for any
+     *   item that should remain visible while collapsed.
+     *
+     * @defaultValue false
+     */
+    collapsed?: boolean;
 }
 export declare namespace SideNavigationProps {
     interface Logo {
-        src: string;
+        src?: string;
         alt?: string;
+        svg?: React.ReactNode;
     }
     interface Header {
         text?: string;
@@ -136,6 +152,7 @@ export declare namespace SideNavigationProps {
         external?: boolean;
         externalIconAriaLabel?: string;
         info?: React.ReactNode;
+        icon?: React.ReactNode;
     }
     interface Section {
         type: 'section';
@@ -154,6 +171,7 @@ export declare namespace SideNavigationProps {
         href: string;
         info?: React.ReactNode;
         items: ReadonlyArray<Item>;
+        icon?: React.ReactNode;
     }
     interface ExpandableLinkGroup {
         type: 'expandable-link-group';
@@ -161,6 +179,7 @@ export declare namespace SideNavigationProps {
         href: string;
         items: ReadonlyArray<Item>;
         defaultExpanded?: boolean;
+        icon?: React.ReactNode;
     }
     type Item = Divider | Link | Section | LinkGroup | ExpandableLinkGroup | SectionGroup;
     interface ChangeDetail {

package/lib/internal/template/side-navigation/interfaces.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE7G,MAAM,WAAW,mBAAoB,SAAQ,kBAAkB;IAC7D;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAC,MAAM,CAAC;IAEpC;;QAEI;IACJ,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE/B;;;;;;;OAOG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgEG~~;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAEhD;;;;;;;;OAQG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;IAEpE;;;;;;;;;;;;;OAaG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,mBAAmB,CAAC,YAAY,CAAC,CAAC;~~CACxE~~;AAED,yBAAiB,mBAAmB,CAAC;IACnC,UAAiB,IAAI;QACnB,GAAG,EAAE,MAAM,CAAC;~~QACZ~~,GAAG,CAAC,EAAE,MAAM,CAAC;~~KACd~~;IACD,UAAiB,MAAM;QACrB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,IAAI,CAAC;KACb;IAED,UAAiB,OAAO;QACtB,IAAI,EAAE,SAAS,CAAC;KACjB;IAED,UAAiB,IAAI;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;QAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB;IAED,UAAiB,OAAO;QACtB,IAAI,EAAE,SAAS,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;KAC3B;IAED,UAAiB,YAAY;QAC3B,IAAI,EAAE,eAAe,CAAC;QACtB,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,aAAa,CAAC,OAAO,GAAG,IAAI,GAAG,SAAS,GAAG,mBAAmB,CAAC,CAAC;KACxE;IACD,UAAiB,SAAS;QACxB,IAAI,EAAE,YAAY,CAAC;QACnB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;~~KAC5B~~;IAED,UAAiB,mBAAmB;QAClC,IAAI,EAAE,uBAAuB,CAAC;QAC9B,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,aAAa,CAAC,IAAI,CAAC,CAAC;QAC3B,eAAe,CAAC,EAAE,OAAO,CAAC;~~KAC3B~~;IAED,KAAY,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,OAAO,GAAG,SAAS,GAAG,mBAAmB,GAAG,YAAY,CAAC;IAE7F,UAAiB,YAAY;QAC3B,IAAI,EAAE,OAAO,GAAG,mBAAmB,CAAC;QACpC,QAAQ,EAAE,OAAO,CAAC;QAClB,iBAAiB,EAAE,aAAa,CAAC,OAAO,GAAG,mBAAmB,CAAC,CAAC;KACjE;IAED,UAAiB,YAAa,SAAQ,oBAAoB;QACxD,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,uBAAuB,GAAG,gBAAgB,CAAC;QAC1E,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACxB;CACF"}
1	+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/interfaces.tsx"],"names":[],"mappings":"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"}

package/lib/internal/template/side-navigation/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/side-navigation/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';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\n\nexport interface SideNavigationProps extends BaseComponentProps {\n /*\n Controls the header that appears at the top of the navigation component.\n \n It contains the following:\n * - `text` (string) - Specifies the header text.\n * - `href` (string) - Specifies the `href` that the header links to.\n * - `logo` (object) - Specifies a logo image.\n /\n header?: SideNavigationProps.Header;\n\n /\n A slot located below the header and above the items.\n /\n itemsControl?: React.ReactNode;\n\n /\n * Specifies the `href` of the currently active link.\n * All items within the navigation with a matching `href` are highlighted.\n \n `Sections` and `Expandable Page Groups` that contain a highlighted item\n * are automatically expanded, unless their definitions have the `defaultExpanded`\n * property explicitly set to `false`.\n /\n activeHref?: string;\n\n /\n Specifies the items to be displayed in the navigation.\n * Allowed objects are: `Link`, `Divider`, `Section`, `LinkGroup` and `ExpandableLinkGroup`.\n \n You can inject extra properties (for example, an ID)\n * in order to identify the item when it's used in an event `detail`\n * (for more information, see the events section below).\n \n #### Link\n * Object that represents an anchor in the navigation.\n * Links are rendered as `<a>` tags.\n * - `type` - `'link'`.\n * - `text` (string) - Specifies the link text.\n * - `href` (string) - Specifies the `href` of the link.\n * - `external` (boolean) - Determines whether to display an external link icon next to the link.\n * If set to `true`, an external link icon appears next to the link.\n * The anchor also has the attributes `target=\"_blank\"` and `rel=\"noopener\"`.\n * Additionally, the `activeHref` property won't be modified when a user chooses the link.\n * - `externalIconAriaLabel` (string) - Adds an aria-label to the external icon.\n * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n * our UX guidelines allow only to add a Badge and/or a \"New\" label.\n \n #### Divider\n * Object that represents a horizontal divider between navigation content.\n * It contains `type`: `'divider'` only.\n \n #### Section\n * Object that represents a section within the navigation.\n * - `type`: `'section'`.\n * - `text` (string) - Specifies the text to display as a title of the section.\n * - `defaultExpanded` (boolean) - Determines whether the section should be expanded by default. Default value is `true`.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n \n #### Section Group\n * Aggregates a set of items that are conceptually related to each other, and can be displayed under a single heading to provide further organization.\n * You can nest sections, links, link groups and expandable link groups within a section group depending on your information architecture needs.\n * - `type`: `'section-group'`.\n * - `title` (string) - Specifies the text to display as a title of the section group.\n * - `items` (array) - Specifies the content of the section header group. You can use `Section`, `Link`, `LinkGroup`, `ExpandableLinkGroup`.\n \n #### LinkGroup\n * Object that represents a group of links.\n * - `type`: `'link-group'`.\n * - `text` (string) - Specifies the text of the group link.\n * - `href` (string) - Specifies the `href` of the group link.\n * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n * our UX guidelines allow only to add a Badge and/or a \"New\" label.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n \n #### ExpandableLinkGroup\n \n Object that represents an expandable group of links.\n * - `type`: `'expandable-link-group'`.\n * - `text` (string) - Specifies the text of the group link.\n * - `href` (string) - Specifies the `href` of the group link.\n * - `defaultExpanded` (boolean) - Specifies whether the group should be expanded by default.\n * If not explicitly set, the group is collapsed by default, unless one of the nested links is active.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n /\n items?: ReadonlyArray<SideNavigationProps.Item>;\n\n /\n Fired when an anchor is clicked without any modifier (that is, CTRL, ALT, SHIFT).\n * The event `detail` contains a definition of the clicked item.\n * Use this event to prevent default browser navigation (by calling `preventDefault` method)\n * and branch your own routing.\n \n If the event is prevented the `activeHref` property won't be automatically set\n * to the href of the clicked item so you'll have to do it yourself.\n /\n onFollow?: CancelableEventHandler<SideNavigationProps.FollowDetail>;\n\n /\n Fired when the expansion state of `Section` or `ExpandablePageGroup` items changes\n * as a result of a user interaction. The event `detail` contains an object with information about the changed item.\n \n - `item` (object) - Specifies the item that was changed.\n * - `expanded` (boolean) - Specifies whether the item is expanded or not.\n * - `expandableParents` (array) - A list of parent items that have a type of `Section`\n * or `ExpandablePageGroup`. Use this `expandableParents` array to set their expanded\n * state to `true` if you want your data model to keep track of the current state\n * of the navigation items.\n \n Note: If the expansion is a result of the activation of a nested link\n * upon changing the `activeHref` property, this event isn't raised.\n */\n onChange?: NonCancelableEventHandler<SideNavigationProps.ChangeDetail>;\n}\n\nexport namespace SideNavigationProps {\n export interface Logo {\n src: string;\n alt?: string;\n }\n export interface Header {\n text?: string;\n href: string;\n logo?: Logo;\n }\n\n export interface Divider {\n type: 'divider';\n }\n\n export interface Link {\n type: 'link';\n text: string;\n href: string;\n external?: boolean;\n externalIconAriaLabel?: string;\n info?: React.ReactNode;\n }\n\n export interface Section {\n type: 'section';\n text: string;\n items: ReadonlyArray<Item>;\n defaultExpanded?: boolean;\n }\n\n export interface SectionGroup {\n type: 'section-group';\n title: string;\n items: ReadonlyArray<Section \| Link \| LinkGroup \| ExpandableLinkGroup>;\n }\n export interface LinkGroup {\n type: 'link-group';\n text: string;\n href: string;\n info?: React.ReactNode;\n items: ReadonlyArray<Item>;\n }\n\n export interface ExpandableLinkGroup {\n type: 'expandable-link-group';\n text: string;\n href: string;\n items: ReadonlyArray<Item>;\n defaultExpanded?: boolean;\n }\n\n export type Item = Divider \| Link \| Section \| LinkGroup \| ExpandableLinkGroup \| SectionGroup;\n\n export interface ChangeDetail {\n item: Section \| ExpandableLinkGroup;\n expanded: boolean;\n expandableParents: ReadonlyArray<Section \| ExpandableLinkGroup>;\n }\n\n export interface FollowDetail extends BaseNavigationDetail {\n text?: string;\n href: string;\n type?: 'link' \| 'link-group' \| 'expandable-link-group' \| 'section-header';\n info?: React.ReactNode;\n }\n}\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/side-navigation/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';\n\nimport { BaseComponentProps } from '../internal/base-component';\nimport { BaseNavigationDetail, CancelableEventHandler, NonCancelableEventHandler } from '../internal/events';\n\nexport interface SideNavigationProps extends BaseComponentProps {\n /*\n Controls the header that appears at the top of the navigation component.\n \n It contains the following:\n * - `text` (string) - Specifies the header text.\n * - `href` (string) - Specifies the `href` that the header links to.\n * - `logo` (object) - Specifies a logo image.\n /\n header?: SideNavigationProps.Header;\n\n /\n A slot located below the header and above the items.\n /\n itemsControl?: React.ReactNode;\n\n /\n * Specifies the `href` of the currently active link.\n * All items within the navigation with a matching `href` are highlighted.\n \n `Sections` and `Expandable Page Groups` that contain a highlighted item\n * are automatically expanded, unless their definitions have the `defaultExpanded`\n * property explicitly set to `false`.\n /\n activeHref?: string;\n\n /\n Specifies the items to be displayed in the navigation.\n * Allowed objects are: `Link`, `Divider`, `Section`, `LinkGroup` and `ExpandableLinkGroup`.\n \n You can inject extra properties (for example, an ID)\n * in order to identify the item when it's used in an event `detail`\n * (for more information, see the events section below).\n \n #### Link\n * Object that represents an anchor in the navigation.\n * Links are rendered as `<a>` tags.\n * - `type` - `'link'`.\n * - `text` (string) - Specifies the link text.\n * - `href` (string) - Specifies the `href` of the link.\n * - `external` (boolean) - Determines whether to display an external link icon next to the link.\n * If set to `true`, an external link icon appears next to the link.\n * The anchor also has the attributes `target=\"_blank\"` and `rel=\"noopener\"`.\n * Additionally, the `activeHref` property won't be modified when a user chooses the link.\n * - `externalIconAriaLabel` (string) - Adds an aria-label to the external icon.\n * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n * our UX guidelines allow only to add a Badge and/or a \"New\" label.\n * - `icon` (ReactNode) - Optional content rendered before the link text. Accepts any React node (for example, an `<Icon />` component or a custom `<svg>`).\n \n #### Divider\n * Object that represents a horizontal divider between navigation content.\n * It contains `type`: `'divider'` only.\n \n #### Section\n * Object that represents a section within the navigation.\n * - `type`: `'section'`.\n * - `text` (string) - Specifies the text to display as a title of the section.\n * - `defaultExpanded` (boolean) - Determines whether the section should be expanded by default. Default value is `true`.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n \n #### Section Group\n * Aggregates a set of items that are conceptually related to each other, and can be displayed under a single heading to provide further organization.\n * You can nest sections, links, link groups and expandable link groups within a section group depending on your information architecture needs.\n * - `type`: `'section-group'`.\n * - `title` (string) - Specifies the text to display as a title of the section group.\n * - `items` (array) - Specifies the content of the section header group. You can use `Section`, `Link`, `LinkGroup`, `ExpandableLinkGroup`.\n \n #### LinkGroup\n * Object that represents a group of links.\n * - `type`: `'link-group'`.\n * - `text` (string) - Specifies the text of the group link.\n * - `href` (string) - Specifies the `href` of the group link.\n * - `info` (ReactNode) - Enables you to display content next to the link. Although it is technically possible to insert any content,\n * our UX guidelines allow only to add a Badge and/or a \"New\" label.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n * - `icon` (ReactNode) - Optional content rendered before the link group text. Accepts any React node.\n \n #### ExpandableLinkGroup\n \n Object that represents an expandable group of links.\n * - `type`: `'expandable-link-group'`.\n * - `text` (string) - Specifies the text of the group link.\n * - `href` (string) - Specifies the `href` of the group link.\n * - `defaultExpanded` (boolean) - Specifies whether the group should be expanded by default.\n * If not explicitly set, the group is collapsed by default, unless one of the nested links is active.\n * - `items` (array) - Specifies the content of the section. You can use any valid item from this list.\n * Although there is no technical limitation to the nesting level,\n * our UX recommendation is to use only one level.\n * - `icon` (ReactNode) - Optional content rendered before the expandable link group text. Accepts any React node.\n /\n items?: ReadonlyArray<SideNavigationProps.Item>;\n\n /\n Fired when an anchor is clicked without any modifier (that is, CTRL, ALT, SHIFT).\n * The event `detail` contains a definition of the clicked item.\n * Use this event to prevent default browser navigation (by calling `preventDefault` method)\n * and branch your own routing.\n \n If the event is prevented the `activeHref` property won't be automatically set\n * to the href of the clicked item so you'll have to do it yourself.\n /\n onFollow?: CancelableEventHandler<SideNavigationProps.FollowDetail>;\n\n /\n Fired when the expansion state of `Section` or `ExpandablePageGroup` items changes\n * as a result of a user interaction. The event `detail` contains an object with information about the changed item.\n \n - `item` (object) - Specifies the item that was changed.\n * - `expanded` (boolean) - Specifies whether the item is expanded or not.\n * - `expandableParents` (array) - A list of parent items that have a type of `Section`\n * or `ExpandablePageGroup`. Use this `expandableParents` array to set their expanded\n * state to `true` if you want your data model to keep track of the current state\n * of the navigation items.\n \n Note: If the expansion is a result of the activation of a nested link\n * upon changing the `activeHref` property, this event isn't raised.\n /\n onChange?: NonCancelableEventHandler<SideNavigationProps.ChangeDetail>;\n\n /\n If true, the navigation is rendered in a compact, icon-only state:\n * - Item text labels and the header title are hidden.\n * - Section, `Section group`, `Link group`, and `Expandable link group`\n * children are not rendered.\n * - `Items control` is not rendered.\n * - Items without an `icon` are not rendered. Provide an icon for any\n * item that should remain visible while collapsed.\n \n @defaultValue false\n */\n collapsed?: boolean;\n}\n\nexport namespace SideNavigationProps {\n export interface Logo {\n src?: string;\n alt?: string;\n svg?: React.ReactNode;\n }\n export interface Header {\n text?: string;\n href: string;\n logo?: Logo;\n }\n\n export interface Divider {\n type: 'divider';\n }\n\n export interface Link {\n type: 'link';\n text: string;\n href: string;\n external?: boolean;\n externalIconAriaLabel?: string;\n info?: React.ReactNode;\n icon?: React.ReactNode;\n }\n\n export interface Section {\n type: 'section';\n text: string;\n items: ReadonlyArray<Item>;\n defaultExpanded?: boolean;\n }\n\n export interface SectionGroup {\n type: 'section-group';\n title: string;\n items: ReadonlyArray<Section \| Link \| LinkGroup \| ExpandableLinkGroup>;\n }\n export interface LinkGroup {\n type: 'link-group';\n text: string;\n href: string;\n info?: React.ReactNode;\n items: ReadonlyArray<Item>;\n icon?: React.ReactNode;\n }\n\n export interface ExpandableLinkGroup {\n type: 'expandable-link-group';\n text: string;\n href: string;\n items: ReadonlyArray<Item>;\n defaultExpanded?: boolean;\n icon?: React.ReactNode;\n }\n\n export type Item = Divider \| Link \| Section \| LinkGroup \| ExpandableLinkGroup \| SectionGroup;\n\n export interface ChangeDetail {\n item: Section \| ExpandableLinkGroup;\n expanded: boolean;\n expandableParents: ReadonlyArray<Section \| ExpandableLinkGroup>;\n }\n\n export interface FollowDetail extends BaseNavigationDetail {\n text?: string;\n href: string;\n type?: 'link' \| 'link-group' \| 'expandable-link-group' \| 'section-header';\n info?: React.ReactNode;\n }\n}\n"]}

package/lib/internal/template/side-navigation/parts.d.ts CHANGED Viewed

@@ -5,15 +5,16 @@ interface BaseItemComponentProps {
     fireChange: (item: SideNavigationProps.Section | SideNavigationProps.ExpandableLinkGroup, expanded: boolean) => void;
     fireFollow: (item: SideNavigationProps.Link | SideNavigationProps.Header | SideNavigationProps.LinkGroup | SideNavigationProps.ExpandableLinkGroup, event: React.SyntheticEvent | Event) => void;
     position?: string;
+    collapsed?: boolean;
 }
 interface HeaderProps extends BaseItemComponentProps {
     definition: SideNavigationProps.Header;
 }
-export declare function Header({ definition, activeHref, fireFollow }: HeaderProps): JSX.Element;
+export declare function Header({ definition, activeHref, fireFollow, collapsed }: HeaderProps): JSX.Element;
 interface NavigationItemsListProps extends BaseItemComponentProps {
     items: ReadonlyArray<SideNavigationProps.Item>;
     variant: 'section' | 'section-group' | 'link-group' | 'expandable-link-group' | 'root';
 }
-export declare function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position, }: NavigationItemsListProps): JSX.Element;
+export declare function NavigationItemsList({ items, variant, activeHref, fireChange, fireFollow, position, collapsed, }: NavigationItemsListProps): JSX.Element;
 export {};
 //# sourceMappingURL=parts.d.ts.map

package/lib/internal/template/side-navigation/parts.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/parts.tsx"],"names":[],"mappings":"AAEA,OAAO,~~KAA+D~~,MAAM,OAAO,CAAC;~~AAcpF~~,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAOnD,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,OAAO,GAAG,mBAAmB,CAAC,mBAAmB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACrH,UAAU,EAAE,CACV,IAAI,EACA,mBAAmB,CAAC,IAAI,GACxB,mBAAmB,CAAC,MAAM,GAC1B,mBAAmB,CAAC,SAAS,GAC7B,mBAAmB,CAAC,mBAAmB,EAC3C,KAAK,EAAE,KAAK,CAAC,cAAc,GAAG,KAAK,KAChC,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;~~CACnB~~;AAED,UAAU,WAAY,SAAQ,sBAAsB;IAClD,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC;CACxC;AAED,wBAAgB,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,EAAE,WAAW,~~eA+CzE~~;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,uBAAuB,GAAG,MAAM,CAAC;CACxF;AAQD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAa,~~GACd~~,EAAE,wBAAwB,~~eA8I1B~~"}
1	+ {"version":3,"file":"parts.d.ts","sourceRoot":"","sources":["../../../src/side-navigation/parts.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAuE,MAAM,OAAO,CAAC;AAe5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAOnD,UAAU,sBAAsB;IAC9B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,CAAC,IAAI,EAAE,mBAAmB,CAAC,OAAO,GAAG,mBAAmB,CAAC,mBAAmB,EAAE,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACrH,UAAU,EAAE,CACV,IAAI,EACA,mBAAmB,CAAC,IAAI,GACxB,mBAAmB,CAAC,MAAM,GAC1B,mBAAmB,CAAC,SAAS,GAC7B,mBAAmB,CAAC,mBAAmB,EAC3C,KAAK,EAAE,KAAK,CAAC,cAAc,GAAG,KAAK,KAChC,IAAI,CAAC;IACV,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,UAAU,WAAY,SAAQ,sBAAsB;IAClD,UAAU,EAAE,mBAAmB,CAAC,MAAM,CAAC;CACxC;AAED,wBAAgB,MAAM,CAAC,EAAE,UAAU,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,WAAW,eA4DpF;AAED,UAAU,wBAAyB,SAAQ,sBAAsB;IAC/D,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,SAAS,GAAG,eAAe,GAAG,YAAY,GAAG,uBAAuB,GAAG,MAAM,CAAC;CACxF;AAQD,wBAAgB,mBAAmB,CAAC,EAClC,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,UAAU,EACV,QAAa,EACb,SAAS,GACV,EAAE,wBAAwB,eA0Q1B"}