npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.935 → 3.0.937 - Mend

@cloudscape-design/components-themeable 3.0.935 → 3.0.937

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 (130) hide show

package/lib/internal/template/code-editor/pane.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pane.js","sourceRoot":"","sources":["../../../src/code-editor/pane.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAc,MAAM,QAAQ,CAAC;AAEvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,sBAAsB,GAAG,EAAE,CAAC;AAClC,MAAM,wBAAwB,GAAG,EAAE,CAAC;AACpC,MAAM,UAAU,GAAG,CAAC,GAAG,sBAAsB,GAAG,CAAC,GAAG,wBAAwB,CAAC;~~AAkB7E~~,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,EAAE,EACF,UAAU,EACV,OAAO,EACP,WAAW,EACX,WAAW,EACX,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,~~GACV~~,EAAE,EAAE;IACd,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO;SACR;QACD,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC;QACpC,MAAM,0BAA0B,GAAG,WAAW,CAAC,OAAO,CACpD,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CACjE,CAAC;QAEF,IAAI,0BAA0B,GAAG,CAAC,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,QAAQ,CAAC,0BAA0B,CAA4B,CAAC;YACnG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EAAE,CAAC;SACpB;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAE/B,MAAM,WAAW,GAAG,CAAC,UAA0B,EAAE,EAAE;QACjD,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,UAA0B,EAAE,KAA0B,EAAE,EAAE;QAC/E,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,EAAE;YACtE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,iBAAiB,CAAC,UAAU,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;QAClD,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,MAAM,EAAE;YACpC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO,EAAE,CAAC;SACX;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,CAAC;IAEjF,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAC,UAAU,qBAAkB,cAAc;QAC3G,oBAAC,YAAY,~~IAAC~~,MAAM,EAAE,UAAU,~~EAAE~~,SAAS,EAAE,UAAU,~~EAAE~~,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC;~~YACtG~~,oBAAC,SAAS,IAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI;gBAC7E,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;oBAC7C,+BAAO,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,IAAI,EAAC,cAAc;wBACvD;4BACE,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,2BAA2B,GAAI;4BACxD,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,CACxB;wBACX,+BAAO,GAAG,EAAE,OAAO,IAChB,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE;;4BAAC,OAAA,CAClC,4BACE,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,EAC3C,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,EAC/C,QAAQ,EAAE,CAAC;gCAEX,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,IACxE,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,mCAAI,EAAE,CAClF;gCACL,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,IAC3E,UAAU,CAAC,IAAI,CACb,CACF,CACN,CAAA;yBAAA,CAAC,CACI,CACF,CACJ;gBACN,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC;oBAC7C,oBAAC,cAAc,IACb,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,GAC/B,CACE,CACI,CACC,CACX,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Ace } from 'ace-builds';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../button/internal';\nimport FocusLock from '../internal/components/focus-lock';\nimport { KeyCode } from '../internal/keycode';\nimport { ResizableBox } from './resizable-box';\nimport { getStatusButtonId, PaneStatus } from './util';\n\nimport styles from './styles.css.js';\n\nconst ANNOTATION_ITEM_HEIGHT = 31;\nconst PANE_ANNOTATIONS_PADDING = 12;\nconst MIN_HEIGHT = 3 * ANNOTATION_ITEM_HEIGHT + 2 * PANE_ANNOTATIONS_PADDING;\n\ninterface PaneProps {\n id: string;\n paneStatus: PaneStatus;\n\n visible: boolean;\n annotations: Ace.Annotation[];\n highlighted?: Ace.Annotation;\n\n cursorPositionLabel?: (row: number, column: number) => string;\n closeButtonAriaLabel?: string;\n\n onClose: () => void;\n onAnnotationClick: (annotation: Ace.Annotation) => void;\n onAnnotationClear: () => void;\n}\n\nexport const Pane = ({\n id,\n paneStatus,\n visible,\n annotations,\n highlighted,\n onClose,\n onAnnotationClick,\n onAnnotationClear,\n cursorPositionLabel,\n closeButtonAriaLabel,\n}: PaneProps) => {\n const [paneHeight, setPaneHeight] = useState(MIN_HEIGHT);\n const listRef = useRef<HTMLTableSectionElement>(null);\n\n useEffect(() => {\n if (!highlighted) {\n return;\n }\n const { row, column } = highlighted;\n const highlightedAnnotationIndex = annotations.indexOf(\n annotations.filter(a => a.row === row && a.column === column)[0]\n );\n\n if (highlightedAnnotationIndex > -1) {\n const errorItem = listRef.current?.children[highlightedAnnotationIndex] as HTMLElement \| undefined;\n errorItem?.focus();\n }\n }, [highlighted, annotations]);\n\n const onItemClick = (annotation: Ace.Annotation) => {\n onAnnotationClick(annotation);\n };\n\n const onItemKeyDown = (annotation: Ace.Annotation, event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.enter \|\| event.keyCode === KeyCode.space) {\n event.preventDefault();\n onAnnotationClick(annotation);\n }\n };\n\n const onEscKeyDown = (event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.escape) {\n event.preventDefault();\n onClose();\n }\n };\n\n const ariaLabelledBy = getStatusButtonId({ paneId: id, paneStatus: paneStatus });\n\n if (!visible) {\n return null;\n }\n\n return (\n <div id={id} className={styles.pane} onKeyDown={onEscKeyDown} role=\"tabpanel\" aria-labelledby={ariaLabelledBy}>\n <ResizableBox height={paneHeight} minHeight={MIN_HEIGHT} onResize={newHeight => setPaneHeight(newHeight)}>\n <FocusLock className={styles['focus-lock']} autoFocus={true} restoreFocus={true}>\n <div className={styles.pane__list} tabIndex={-1}>\n <table className={styles.pane__table} role=\"presentation\">\n <colgroup>\n <col style={{ width: 1 } /* shrink to fit content */} />\n <col style={{ width: 'auto' }} />\n </colgroup>\n <tbody ref={listRef}>\n {annotations.map((annotation, i) => (\n <tr\n key={i}\n role=\"link\"\n className={styles.pane__item}\n onMouseOver={onAnnotationClear}\n onClick={onItemClick.bind(null, annotation)}\n onKeyDown={onItemKeyDown.bind(null, annotation)}\n tabIndex={0}\n >\n <td className={clsx(styles.pane__location, styles.pane__cell)} tabIndex={-1}>\n {cursorPositionLabel?.((annotation.row \|\| 0) + 1, (annotation.column \|\| 0) + 1) ?? ''}\n </td>\n <td className={clsx(styles.pane__description, styles.pane__cell)} tabIndex={-1}>\n {annotation.text}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n <div className={styles['pane__close-container']}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"close\"\n onClick={onClose}\n ariaLabel={closeButtonAriaLabel}\n />\n </div>\n </FocusLock>\n </ResizableBox>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"pane.js","sourceRoot":"","sources":["../../../src/code-editor/pane.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,SAAS,MAAM,mCAAmC,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,qBAAqB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,iBAAiB,EAAc,MAAM,QAAQ,CAAC;AAEvD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,sBAAsB,GAAG,EAAE,CAAC;AAClC,MAAM,wBAAwB,GAAG,EAAE,CAAC;AACpC,MAAM,UAAU,GAAG,CAAC,GAAG,sBAAsB,GAAG,CAAC,GAAG,wBAAwB,CAAC;AAoB7E,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EACnB,EAAE,EACF,UAAU,EACV,OAAO,EACP,WAAW,EACX,WAAW,EACX,OAAO,EACP,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,EACpB,eAAe,EACf,iBAAiB,GACP,EAAE,EAAE;IACd,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAEtD,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,CAAC,WAAW,EAAE;YAChB,OAAO;SACR;QACD,MAAM,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC;QACpC,MAAM,0BAA0B,GAAG,WAAW,CAAC,OAAO,CACpD,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,MAAM,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CACjE,CAAC;QAEF,IAAI,0BAA0B,GAAG,CAAC,CAAC,EAAE;YACnC,MAAM,SAAS,GAAG,MAAA,OAAO,CAAC,OAAO,0CAAE,QAAQ,CAAC,0BAA0B,CAA4B,CAAC;YACnG,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,KAAK,EAAE,CAAC;SACpB;IACH,CAAC,EAAE,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC,CAAC;IAE/B,MAAM,WAAW,GAAG,CAAC,UAA0B,EAAE,EAAE;QACjD,iBAAiB,CAAC,UAAU,CAAC,CAAC;IAChC,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,UAA0B,EAAE,KAA0B,EAAE,EAAE;QAC/E,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,KAAK,EAAE;YACtE,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,iBAAiB,CAAC,UAAU,CAAC,CAAC;SAC/B;IACH,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,KAA0B,EAAE,EAAE;QAClD,IAAI,KAAK,CAAC,OAAO,KAAK,OAAO,CAAC,MAAM,EAAE;YACpC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,OAAO,EAAE,CAAC;SACX;IACH,CAAC,CAAC;IAEF,MAAM,cAAc,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,CAAC,CAAC;IAEjF,IAAI,CAAC,OAAO,EAAE;QACZ,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,6BAAK,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,IAAI,EAAC,UAAU,qBAAkB,cAAc;QAC3G,oBAAC,YAAY,IACX,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,UAAU,EACrB,QAAQ,EAAE,SAAS,CAAC,EAAE,CAAC,aAAa,CAAC,SAAS,CAAC,EAC/C,eAAe,EAAE,eAAe,EAChC,iBAAiB,EAAE,iBAAiB;YAEpC,oBAAC,SAAS,IAAC,SAAS,EAAE,MAAM,CAAC,YAAY,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,IAAI;gBAC7E,6BAAK,SAAS,EAAE,MAAM,CAAC,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;oBAC7C,+BAAO,SAAS,EAAE,MAAM,CAAC,WAAW,EAAE,IAAI,EAAC,cAAc;wBACvD;4BACE,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,2BAA2B,GAAI;4BACxD,6BAAK,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,GAAI,CACxB;wBACX,+BAAO,GAAG,EAAE,OAAO,IAChB,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,EAAE;;4BAAC,OAAA,CAClC,4BACE,GAAG,EAAE,CAAC,EACN,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,MAAM,CAAC,UAAU,EAC5B,WAAW,EAAE,iBAAiB,EAC9B,OAAO,EAAE,WAAW,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,EAC3C,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,IAAI,EAAE,UAAU,CAAC,EAC/C,QAAQ,EAAE,CAAC;gCAEX,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,cAAc,EAAE,MAAM,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,IACxE,MAAA,mBAAmB,aAAnB,mBAAmB,uBAAnB,mBAAmB,CAAG,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,UAAU,CAAC,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,mCAAI,EAAE,CAClF;gCACL,4BAAI,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,EAAE,MAAM,CAAC,UAAU,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,IAC3E,UAAU,CAAC,IAAI,CACb,CACF,CACN,CAAA;yBAAA,CAAC,CACI,CACF,CACJ;gBACN,6BAAK,SAAS,EAAE,MAAM,CAAC,uBAAuB,CAAC;oBAC7C,oBAAC,cAAc,IACb,UAAU,EAAC,MAAM,EACjB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,GAC/B,CACE,CACI,CACC,CACX,CACP,CAAC;AACJ,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { Ace } from 'ace-builds';\nimport clsx from 'clsx';\n\nimport { InternalButton } from '../button/internal';\nimport FocusLock from '../internal/components/focus-lock';\nimport { KeyCode } from '../internal/keycode';\nimport { ResizableBox } from './resizable-box';\nimport { getStatusButtonId, PaneStatus } from './util';\n\nimport styles from './styles.css.js';\n\nconst ANNOTATION_ITEM_HEIGHT = 31;\nconst PANE_ANNOTATIONS_PADDING = 12;\nconst MIN_HEIGHT = 3 * ANNOTATION_ITEM_HEIGHT + 2 * PANE_ANNOTATIONS_PADDING;\n\ninterface PaneProps {\n id: string;\n paneStatus: PaneStatus;\n\n visible: boolean;\n annotations: Ace.Annotation[];\n highlighted?: Ace.Annotation;\n\n cursorPositionLabel?: (row: number, column: number) => string;\n closeButtonAriaLabel?: string;\n handleAriaLabel?: string;\n handleTooltipText?: string;\n\n onClose: () => void;\n onAnnotationClick: (annotation: Ace.Annotation) => void;\n onAnnotationClear: () => void;\n}\n\nexport const Pane = ({\n id,\n paneStatus,\n visible,\n annotations,\n highlighted,\n onClose,\n onAnnotationClick,\n onAnnotationClear,\n cursorPositionLabel,\n closeButtonAriaLabel,\n handleAriaLabel,\n handleTooltipText,\n}: PaneProps) => {\n const [paneHeight, setPaneHeight] = useState(MIN_HEIGHT);\n const listRef = useRef<HTMLTableSectionElement>(null);\n\n useEffect(() => {\n if (!highlighted) {\n return;\n }\n const { row, column } = highlighted;\n const highlightedAnnotationIndex = annotations.indexOf(\n annotations.filter(a => a.row === row && a.column === column)[0]\n );\n\n if (highlightedAnnotationIndex > -1) {\n const errorItem = listRef.current?.children[highlightedAnnotationIndex] as HTMLElement \| undefined;\n errorItem?.focus();\n }\n }, [highlighted, annotations]);\n\n const onItemClick = (annotation: Ace.Annotation) => {\n onAnnotationClick(annotation);\n };\n\n const onItemKeyDown = (annotation: Ace.Annotation, event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.enter \|\| event.keyCode === KeyCode.space) {\n event.preventDefault();\n onAnnotationClick(annotation);\n }\n };\n\n const onEscKeyDown = (event: React.KeyboardEvent) => {\n if (event.keyCode === KeyCode.escape) {\n event.preventDefault();\n onClose();\n }\n };\n\n const ariaLabelledBy = getStatusButtonId({ paneId: id, paneStatus: paneStatus });\n\n if (!visible) {\n return null;\n }\n\n return (\n <div id={id} className={styles.pane} onKeyDown={onEscKeyDown} role=\"tabpanel\" aria-labelledby={ariaLabelledBy}>\n <ResizableBox\n height={paneHeight}\n minHeight={MIN_HEIGHT}\n onResize={newHeight => setPaneHeight(newHeight)}\n handleAriaLabel={handleAriaLabel}\n handleTooltipText={handleTooltipText}\n >\n <FocusLock className={styles['focus-lock']} autoFocus={true} restoreFocus={true}>\n <div className={styles.pane__list} tabIndex={-1}>\n <table className={styles.pane__table} role=\"presentation\">\n <colgroup>\n <col style={{ width: 1 } /* shrink to fit content */} />\n <col style={{ width: 'auto' }} />\n </colgroup>\n <tbody ref={listRef}>\n {annotations.map((annotation, i) => (\n <tr\n key={i}\n role=\"link\"\n className={styles.pane__item}\n onMouseOver={onAnnotationClear}\n onClick={onItemClick.bind(null, annotation)}\n onKeyDown={onItemKeyDown.bind(null, annotation)}\n tabIndex={0}\n >\n <td className={clsx(styles.pane__location, styles.pane__cell)} tabIndex={-1}>\n {cursorPositionLabel?.((annotation.row \|\| 0) + 1, (annotation.column \|\| 0) + 1) ?? ''}\n </td>\n <td className={clsx(styles.pane__description, styles.pane__cell)} tabIndex={-1}>\n {annotation.text}\n </td>\n </tr>\n ))}\n </tbody>\n </table>\n </div>\n <div className={styles['pane__close-container']}>\n <InternalButton\n formAction=\"none\"\n variant=\"icon\"\n iconName=\"close\"\n onClick={onClose}\n ariaLabel={closeButtonAriaLabel}\n />\n </div>\n </FocusLock>\n </ResizableBox>\n </div>\n );\n};\n"]}

package/lib/internal/template/code-editor/resizable-box/index.d.ts CHANGED Viewed

@@ -4,6 +4,8 @@ export interface ResizeBoxProps {
     height: number;
     minHeight: number;
     onResize: (newHeight: number) => void;
+    handleAriaLabel?: string;
+    handleTooltipText?: string;
 }
-export declare function ResizableBox({ children, height, minHeight, onResize }: ResizeBoxProps): JSX.Element;
+export declare function ResizableBox({ children, height, minHeight, onResize, handleAriaLabel, handleTooltipText, }: ResizeBoxProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/code-editor/resizable-box/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/code-editor/resizable-box/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;~~AAM3D~~,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;~~CACvC~~;AAED,wBAAgB,YAAY,CAAC,~~EAAE~~,QAAQ,~~EAAE~~,MAAM,~~EAAE~~,SAAS,~~EAAE~~,QAAQ,~~EAAE~~,EAAE,cAAc,~~eA2CrF~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/code-editor/resizable-box/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAU3D,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IAEtC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,EACR,eAAe,EACf,iBAAiB,GAClB,EAAE,cAAc,eAoFhB"}

package/lib/internal/template/code-editor/resizable-box/index.js CHANGED Viewed

@@ -2,42 +2,74 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef, useState } from 'react';
 import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
+import InternalDragHandle from '../../internal/components/drag-handle';
 import styles from './styles.css.js';
-export function ResizableBox({ children, height, minHeight, onResize }) {
+const KEYBOARD_STEP_SIZE = 20;
+export function ResizableBox({ children, height, minHeight, onResize, handleAriaLabel, handleTooltipText, }) {
     const [dragOffset, setDragOffset] = useState(null);
     const onResizeStable = useStableCallback(onResize);
     const containerRef = useRef(null);
-    const onMouseDown = event => {
-        if (event.button !== 0 || !containerRef.current) {
+    const onPointerDown = event => {
+        if ((event.pointerType === 'mouse' && event.button !== 0) || !containerRef.current) {
             return;
         }
         const containerBottom = containerRef.current.getBoundingClientRect().bottom;
         setDragOffset(containerBottom - event.clientY);
     };
+    const onKeyDown = event => {
+        switch (event.key) {
+            case 'ArrowDown':
+            case 'ArrowRight':
+                onResizeStable(height + KEYBOARD_STEP_SIZE);
+                break;
+            case 'ArrowUp':
+            case 'ArrowLeft':
+                onResizeStable(Math.max(height - KEYBOARD_STEP_SIZE, minHeight));
+                break;
+        }
+    };
     useEffect(() => {
         if (dragOffset === null || !containerRef.current) {
             return;
         }
         const container = containerRef.current;
-        const onMouseMove = (event) => {
+        const onPointerMove = (event) => {
             const { top } = container.getBoundingClientRect();
             const cursor = event.clientY;
             onResizeStable(Math.max(cursor + dragOffset - top, minHeight));
         };
-        const onMouseUp = () => {
+        const onPointerUp = () => {
             setDragOffset(null);
         };
         const controller = new AbortController();
         document.body.classList.add(styles['resize-active']);
-        document.addEventListener('mousemove', onMouseMove, { signal: controller.signal });
-        document.addEventListener('mouseup', onMouseUp, { signal: controller.signal });
+        container.classList.add(styles['cursor-active']);
+        document.addEventListener('pointermove', onPointerMove, { signal: controller.signal });
+        document.addEventListener('pointerup', onPointerUp, { signal: controller.signal });
         return () => {
             controller.abort();
             document.body.classList.remove(styles['resize-active']);
+            container.classList.remove(styles['cursor-active']);
         };
     }, [dragOffset, minHeight, onResizeStable]);
     return (React.createElement("div", { ref: containerRef, className: styles['resizable-box'], style: { height } },
         children,
-        React.createElement("span", { className: styles['resizable-box-handle'], onMouseDown: onMouseDown })));
+        React.createElement("div", { className: styles['resizable-box-handle'] },
+            React.createElement(InternalDragHandle, { ariaLabel: handleAriaLabel, variant: "resize-area",
+                // Provide an arbitrary large value to valueMax since the editor can be
+                // resized to be infinitely large.
+                ariaValue: { valueMin: minHeight, valueMax: 1000000, valueNow: height }, tooltipText: handleTooltipText, onPointerDown: onPointerDown, onKeyDown: onKeyDown, directions: {
+                    'block-start': height > minHeight ? 'active' : 'disabled',
+                    'block-end': 'active',
+                }, onDirectionClick: direction => {
+                    switch (direction) {
+                        case 'block-end':
+                            onResizeStable(height + KEYBOARD_STEP_SIZE);
+                            break;
+                        case 'block-start':
+                            onResizeStable(Math.max(height - KEYBOARD_STEP_SIZE, minHeight));
+                            break;
+                    }
+                } }))));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/code-editor/resizable-box/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/code-editor/resizable-box/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,+CAA+C,CAAC;AAElF,OAAO,MAAM,MAAM,iBAAiB,CAAC;~~AASrC~~,MAAM,UAAU,YAAY,CAAC,~~EAAE~~,QAAQ,~~EAAE~~,MAAM,~~EAAE~~,SAAS,~~EAAE~~,QAAQ,~~EAAkB~~;~~IACpF~~,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAClE,MAAM,cAAc,GAAG,iBAAiB,CAAC,QAAQ,CAAC,CAAC;IACnD,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAElD,MAAM,~~WAAW~~,~~GAA4B~~,KAAK,CAAC,EAAE;~~QACnD~~,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;~~YAC/C~~,OAAO;SACR;QACD,MAAM,eAAe,GAAG,YAAY,CAAC,OAAO,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC;QAC5E,aAAa,CAAC,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC,CAAC;IACjD,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,KAAK,IAAI,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE;YAChD,OAAO;SACR;QACD,MAAM,SAAS,GAAG,YAAY,CAAC,OAAO,CAAC;QAEvC,MAAM,~~WAAW~~,GAAG,CAAC,~~KAAiB~~,EAAE,EAAE;~~YACxC~~,MAAM,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,qBAAqB,EAAE,CAAC;YAClD,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC;YAC7B,cAAc,CAAC,IAAI,CAAC,GAAG,CAAC,MAAM,GAAG,UAAU,GAAG,GAAG,EAAE,SAAS,CAAC,CAAC,CAAC;QACjE,CAAC,CAAC;QACF,MAAM,~~SAAS~~,GAAG,GAAG,EAAE;~~YACrB~~,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,CAAC;QACF,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACzC,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;QACrD,QAAQ,CAAC,gBAAgB,CAAC,~~WAAW~~,EAAE,~~WAAW~~,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;~~QACnF~~,QAAQ,CAAC,gBAAgB,CAAC,~~SAAS~~,EAAE,~~SAAS~~,EAAE,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;~~QAC/E~~,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;YACnB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,CAAC;~~QAC1D~~,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IAE5C,OAAO,CACL,6BAAK,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,EAAE,MAAM,EAAE;QAC1E,QAAQ;~~QACT~~,~~8BAAM~~,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,WAAW,EAAE,WAAW,~~GAAI~~,~~CACzE~~,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport styles from './styles.css.js';\n\nexport interface ResizeBoxProps {\n children: React.ReactNode;\n height: number;\n minHeight: number;\n onResize: (newHeight: number) => void;\n}\n\nexport function ResizableBox({ children, height, minHeight, onResize }: ResizeBoxProps) {\n const [dragOffset, setDragOffset] = useState<null \| number>(null);\n const onResizeStable = useStableCallback(onResize);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const ~~onMouseDown~~: React.~~MouseEventHandler~~ = event => {\n if (event.button !== 0 \|\| !containerRef.current) {\n return;\n }\n const containerBottom = containerRef.current.getBoundingClientRect().bottom;\n setDragOffset(containerBottom - event.clientY);\n };\n\n useEffect(() => {\n if (dragOffset === null \|\| !containerRef.current) {\n return;\n }\n const container = containerRef.current;\n\n const ~~onMouseMove~~ = (event: ~~MouseEvent~~) => {\n const { top } = container.getBoundingClientRect();\n const cursor = event.clientY;\n onResizeStable(Math.max(cursor + dragOffset - top, minHeight));\n };\n const ~~onMouseUp~~ = () => {\n setDragOffset(null);\n };\n const controller = new AbortController();\n document.body.classList.add(styles['resize-active']);\n document.addEventListener('~~mousemove~~', ~~onMouseMove~~, { signal: controller.signal });\n document.addEventListener('~~mouseup~~', ~~onMouseUp~~, { signal: controller.signal });\n return () => {\n controller.abort();\n document.body.classList.remove(styles['resize-active']);\n };\n }, [dragOffset, minHeight, onResizeStable]);\n\n return (\n <div ref={containerRef} className={styles['resizable-box']} style={{ height }}>\n {children}\n <~~span~~ className={styles['resizable-box-handle']} ~~onMouseDown~~={~~onMouseDown~~} />\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/code-editor/resizable-box/index.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, { useEffect, useRef, useState } from 'react';\n\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalDragHandle from '../../internal/components/drag-handle';\n\nimport styles from './styles.css.js';\n\nconst KEYBOARD_STEP_SIZE = 20;\n\nexport interface ResizeBoxProps {\n children: React.ReactNode;\n height: number;\n minHeight: number;\n onResize: (newHeight: number) => void;\n\n handleAriaLabel?: string;\n handleTooltipText?: string;\n}\n\nexport function ResizableBox({\n children,\n height,\n minHeight,\n onResize,\n handleAriaLabel,\n handleTooltipText,\n}: ResizeBoxProps) {\n const [dragOffset, setDragOffset] = useState<null \| number>(null);\n const onResizeStable = useStableCallback(onResize);\n const containerRef = useRef<HTMLDivElement>(null);\n\n const onPointerDown: React.PointerEventHandler = event => {\n if ((event.pointerType === 'mouse' && event.button !== 0) \|\| !containerRef.current) {\n return;\n }\n const containerBottom = containerRef.current.getBoundingClientRect().bottom;\n setDragOffset(containerBottom - event.clientY);\n };\n\n const onKeyDown: React.KeyboardEventHandler = event => {\n switch (event.key) {\n case 'ArrowDown':\n case 'ArrowRight':\n onResizeStable(height + KEYBOARD_STEP_SIZE);\n break;\n case 'ArrowUp':\n case 'ArrowLeft':\n onResizeStable(Math.max(height - KEYBOARD_STEP_SIZE, minHeight));\n break;\n }\n };\n\n useEffect(() => {\n if (dragOffset === null \|\| !containerRef.current) {\n return;\n }\n const container = containerRef.current;\n\n const onPointerMove = (event: PointerEvent) => {\n const { top } = container.getBoundingClientRect();\n const cursor = event.clientY;\n onResizeStable(Math.max(cursor + dragOffset - top, minHeight));\n };\n const onPointerUp = () => {\n setDragOffset(null);\n };\n const controller = new AbortController();\n document.body.classList.add(styles['resize-active']);\n container.classList.add(styles['cursor-active']);\n document.addEventListener('pointermove', onPointerMove, { signal: controller.signal });\n document.addEventListener('pointerup', onPointerUp, { signal: controller.signal });\n return () => {\n controller.abort();\n document.body.classList.remove(styles['resize-active']);\n container.classList.remove(styles['cursor-active']);\n };\n }, [dragOffset, minHeight, onResizeStable]);\n\n return (\n <div ref={containerRef} className={styles['resizable-box']} style={{ height }}>\n {children}\n\n <div className={styles['resizable-box-handle']}>\n <InternalDragHandle\n ariaLabel={handleAriaLabel}\n variant=\"resize-area\"\n // Provide an arbitrary large value to valueMax since the editor can be\n // resized to be infinitely large.\n ariaValue={{ valueMin: minHeight, valueMax: 1000000, valueNow: height }}\n tooltipText={handleTooltipText}\n onPointerDown={onPointerDown}\n onKeyDown={onKeyDown}\n directions={{\n 'block-start': height > minHeight ? 'active' : 'disabled',\n 'block-end': 'active',\n }}\n onDirectionClick={direction => {\n switch (direction) {\n case 'block-end':\n onResizeStable(height + KEYBOARD_STEP_SIZE);\n break;\n case 'block-start':\n onResizeStable(Math.max(height - KEYBOARD_STEP_SIZE, minHeight));\n break;\n }\n }}\n />\n </div>\n </div>\n );\n}\n"]}

package/lib/internal/template/code-editor/resizable-box/styles.css.js CHANGED Viewed

@@ -1,8 +1,9 @@
     import './styles.scoped.css';
     export default {
-  "resizable-box": "awsui_resizable-box_cufu9_e8bsh_149",
-  "resizable-box-handle": "awsui_resizable-box-handle_cufu9_e8bsh_154",
-  "resize-active": "awsui_resize-active_cufu9_e8bsh_197"
+  "resizable-box": "awsui_resizable-box_cufu9_j3e9z_149",
+  "cursor-active": "awsui_cursor-active_cufu9_j3e9z_153",
+  "resizable-box-handle": "awsui_resizable-box-handle_cufu9_j3e9z_167",
+  "resize-active": "awsui_resize-active_cufu9_j3e9z_176"
 };

package/lib/internal/template/code-editor/resizable-box/styles.scoped.css CHANGED Viewed

@@ -146,55 +146,34 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_resizable-box_cufu9_e8bsh_149:not(#\9) {
+.awsui_resizable-box_cufu9_j3e9z_149:not(#\9) {
   position: relative;
   inline-size: 100%;
 }
+.awsui_resizable-box_cufu9_j3e9z_149:not(#\9):not(.awsui_cursor-active_cufu9_j3e9z_153) {
+  transition: height var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_resizable-box_cufu9_j3e9z_149:not(#\9):not(.awsui_cursor-active_cufu9_j3e9z_153) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_resizable-box_cufu9_j3e9z_149:not(#\9):not(.awsui_cursor-active_cufu9_j3e9z_153), .awsui-mode-entering .awsui_resizable-box_cufu9_j3e9z_149:not(#\9):not(.awsui_cursor-active_cufu9_j3e9z_153) {
+  animation: none;
+  transition: none;
+}
-.awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9) {
+.awsui_resizable-box-handle_cufu9_j3e9z_167:not(#\9) {
   position: absolute;
   inset-inline-end: 0;
   inset-block-end: 0;
   z-index: 10;
   inline-size: var(--space-l-eenfqd, 20px);
   block-size: var(--space-l-eenfqd, 20px);
-  background-repeat: no-repeat;
-  background-origin: content-box;
-  box-sizing: border-box;
-  background-position: bottom right;
-  background-size: var(--space-l-eenfqd, 20px);
-  cursor: ns-resize;
-  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23687078' fill-opacity='0' stroke-width='1'%3E %3Cpath d='M 8 13 L 13 8 M 13 11 L 11 13 M 5 13 L 13 5'/%3E %3C/svg%3E");
-  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-}
-@supports (--css-variable-support-check: #000) {
-  @media not print {
-    .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9) {
-      /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
-    }
-    .awsui-polaris-dark-mode .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9), .awsui-dark-mode .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9) {
-      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23687078' fill-opacity='0' stroke-width='1'%3E %3Cpath d='M 8 13 L 13 8 M 13 11 L 11 13 M 5 13 L 13 5'/%3E %3C/svg%3E");
-    }
-  }
-}
-@supports (--css-variable-support-check: #000) {
-  .awsui-visual-refresh .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9) {
-    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23424650' fill-opacity='0' stroke-width='1'%3E %3Cpath d='M 8 13 L 13 8 M 13 11 L 11 13 M 5 13 L 13 5'/%3E %3C/svg%3E");
-  }
-  @media not print {
-    .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9) {
-      /* stylelint-disable selector-combinator-disallowed-list, selector-class-pattern */
-    }
-    .awsui-visual-refresh.awsui-polaris-dark-mode .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9), .awsui-visual-refresh.awsui-dark-mode .awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9) {
-      background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' stroke='%23dedee3' fill-opacity='0' stroke-width='1'%3E %3Cpath d='M 8 13 L 13 8 M 13 11 L 11 13 M 5 13 L 13 5'/%3E %3C/svg%3E");
-    }
-  }
-}
-.awsui_resizable-box-handle_cufu9_e8bsh_154:not(#\9):dir(rtl) {
-  transform: scaleX(-1);
 }
-.awsui_resize-active_cufu9_e8bsh_197:not(#\9) {
+.awsui_resize-active_cufu9_j3e9z_176:not(#\9) {
   -webkit-user-select: none;
           user-select: none;
 }

package/lib/internal/template/code-editor/resizable-box/styles.selectors.js CHANGED Viewed

@@ -2,8 +2,9 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "resizable-box": "awsui_resizable-box_cufu9_e8bsh_149",
-  "resizable-box-handle": "awsui_resizable-box-handle_cufu9_e8bsh_154",
-  "resize-active": "awsui_resize-active_cufu9_e8bsh_197"
+  "resizable-box": "awsui_resizable-box_cufu9_j3e9z_149",
+  "cursor-active": "awsui_cursor-active_cufu9_j3e9z_153",
+  "resizable-box-handle": "awsui_resizable-box-handle_cufu9_j3e9z_167",
+  "resize-active": "awsui_resize-active_cufu9_j3e9z_176"
 };