@cloudscape-design/components 3.0.870 → 3.0.872

package/internal/components/autosuggest-input/index.js

@@ -8,6 +8,7 @@ import { getBaseProps } from '../../base-component';
 import { useFormFieldContext } from '../../context/form-field-context';
 import { fireCancelableEvent, fireNonCancelableEvent } from '../../events';
 import { KeyCode } from '../../keycode';
+import { documentHasFocus } from '../../utils/dom';
 import { nodeBelongs } from '../../utils/node-belongs';
 import Dropdown from '../dropdown';
 import styles from './styles.css.js';
@@ -42,6 +43,11 @@ const AutosuggestInput = React.forwardRef((_a, ref) => {
         close: closeDropdown,
     }));
     const handleBlur = () => {
+        // When the document in not in focus it means the focus moved outside the page. In that case the dropdown shall stay open
+        // so that when the user comes back it does not re-open unexpectedly when the focus is restored by the browser.
+        if (!documentHasFocus()) {
+            return;
+        }
         if (!preventCloseOnBlurRef.current) {
             closeDropdown();
             fireNonCancelableEvent(onBlur, null);

package/internal/components/autosuggest-input/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/autosuggest-input/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\n\nimport React, { Ref, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { AutosuggestProps } from '../../../autosuggest/interfaces';\nimport {\n  BaseChangeDetail,\n  BaseInputProps,\n  InputAutoCorrect,\n  InputClearLabel,\n  InputKeyEvents,\n} from '../../../input/interfaces';\nimport InternalInput, { InternalInputProps } from '../../../input/internal';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../../context/form-field-context';\nimport { BaseKeyDetail, fireCancelableEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { KeyCode } from '../../keycode';\nimport { nodeBelongs } from '../../utils/node-belongs';\nimport Dropdown from '../dropdown';\nimport { ExpandToViewport } from '../dropdown/interfaces';\n\nimport styles from './styles.css.js';\n\ninterface AutosuggestInputProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    InputAutoCorrect,\n    InputKeyEvents,\n    InputClearLabel,\n    FormFieldValidationControlProps,\n    ExpandToViewport,\n    InternalBaseComponentProps {\n  ariaControls?: string;\n  ariaActivedescendant?: string;\n  dropdownExpanded?: boolean;\n  dropdownContentKey?: string;\n  dropdownContentFocusable?: boolean;\n  dropdownContent?: React.ReactNode;\n  dropdownFooter?: React.ReactNode;\n  dropdownWidth?: number;\n  loopFocus?: boolean;\n  onCloseDropdown?: NonCancelableEventHandler<null>;\n  onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n  onPressArrowDown?: () => void;\n  onPressArrowUp?: () => void;\n  onPressEnter?: () => boolean;\n}\n\ninterface AutosuggestInputFocusOptions {\n  preventDropdown?: boolean;\n}\n\nexport interface AutosuggestInputRef extends AutosuggestProps.Ref {\n  focus(options?: AutosuggestInputFocusOptions): void;\n  open(): void;\n  close(): void;\n}\n\nconst AutosuggestInput = React.forwardRef(\n  (\n    {\n      value,\n      onChange,\n      onBlur,\n      onFocus,\n      onKeyUp,\n      onKeyDown,\n      name,\n      placeholder,\n      disabled,\n      readOnly,\n      autoFocus,\n      ariaLabel,\n      ariaRequired,\n      disableBrowserAutocorrect = false,\n      expandToViewport,\n      ariaControls,\n      ariaActivedescendant,\n      clearAriaLabel,\n      dropdownExpanded = true,\n      dropdownContentKey,\n      dropdownContentFocusable = false,\n      dropdownContent = null,\n      dropdownFooter = null,\n      dropdownWidth,\n      loopFocus,\n      onCloseDropdown,\n      onDelayedInput,\n      onPressArrowDown,\n      onPressArrowUp,\n      onPressEnter,\n      __internalRootRef,\n      ...restProps\n    }: AutosuggestInputProps,\n    ref: Ref<AutosuggestInputRef>\n  ) => {\n    const baseProps = getBaseProps(restProps);\n    const formFieldContext = useFormFieldContext(restProps);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const dropdownContentRef = useRef<HTMLDivElement>(null);\n    const dropdownFooterRef = useRef<HTMLDivElement>(null);\n    const preventOpenOnFocusRef = useRef(false);\n    const preventCloseOnBlurRef = useRef(false);\n\n    const [open, setOpen] = useState(false);\n\n    const openDropdown = () => !readOnly && setOpen(true);\n\n    const closeDropdown = () => {\n      setOpen(false);\n      fireNonCancelableEvent(onCloseDropdown, null);\n    };\n\n    useImperativeHandle(ref, () => ({\n      focus(options?: AutosuggestInputFocusOptions) {\n        if (options?.preventDropdown) {\n          preventOpenOnFocusRef.current = true;\n        }\n        inputRef.current?.focus();\n      },\n      select() {\n        inputRef.current?.select();\n      },\n      open: openDropdown,\n      close: closeDropdown,\n    }));\n\n    const handleBlur = () => {\n      if (!preventCloseOnBlurRef.current) {\n        closeDropdown();\n        fireNonCancelableEvent(onBlur, null);\n      }\n    };\n\n    const handleFocus = () => {\n      if (!preventOpenOnFocusRef.current) {\n        openDropdown();\n        fireNonCancelableEvent(onFocus, null);\n      }\n      preventOpenOnFocusRef.current = false;\n    };\n\n    const fireKeydown = (event: CustomEvent<BaseKeyDetail>) => fireCancelableEvent(onKeyDown, event.detail, event);\n\n    const handleKeyDown = (event: CustomEvent<BaseKeyDetail>) => {\n      switch (event.detail.keyCode) {\n        case KeyCode.down: {\n          onPressArrowDown?.();\n          openDropdown();\n          event.preventDefault();\n          break;\n        }\n        case KeyCode.up: {\n          onPressArrowUp?.();\n          openDropdown();\n          event.preventDefault();\n          break;\n        }\n        case KeyCode.enter: {\n          if (open) {\n            if (!onPressEnter?.()) {\n              closeDropdown();\n            }\n            event.preventDefault();\n          }\n          fireKeydown(event);\n          break;\n        }\n        case KeyCode.escape: {\n          if (open) {\n            event.stopPropagation();\n            closeDropdown();\n          } else if (value) {\n            event.stopPropagation();\n            fireNonCancelableEvent(onChange, { value: '' });\n          }\n          event.preventDefault();\n          fireKeydown(event);\n          break;\n        }\n        default: {\n          fireKeydown(event);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      openDropdown();\n      fireNonCancelableEvent(onChange, { value });\n    };\n\n    const handleDelayedInput = (value: string) => {\n      fireNonCancelableEvent(onDelayedInput, { value });\n    };\n\n    const handleDropdownMouseDown: React.MouseEventHandler = event => {\n      // Prevent currently focused element from losing focus.\n      if (!dropdownContentFocusable) {\n        event.preventDefault();\n      }\n      // Prevent closing dropdown on click inside.\n      else {\n        preventCloseOnBlurRef.current = true;\n        requestAnimationFrame(() => {\n          preventCloseOnBlurRef.current = false;\n        });\n      }\n    };\n\n    const expanded = open && dropdownExpanded;\n    const nativeAttributes: InternalInputProps['__nativeAttributes'] = {\n      name,\n      placeholder,\n      autoFocus,\n      onClick: openDropdown,\n      role: 'combobox',\n      'aria-autocomplete': 'list',\n      'aria-expanded': expanded,\n      'aria-controls': open ? ariaControls : undefined,\n      // 'aria-owns' needed for safari+vo to announce activedescendant content\n      'aria-owns': open ? ariaControls : undefined,\n      'aria-label': ariaLabel,\n      'aria-activedescendant': ariaActivedescendant,\n    };\n\n    // Closes dropdown when outside click is detected.\n    // Similar to the internal dropdown implementation but includes the target as well.\n    useEffect(() => {\n      if (!open) {\n        return;\n      }\n\n      const clickListener = (event: MouseEvent) => {\n        if (\n          !nodeBelongs(inputRef.current, event.target) &&\n          !nodeBelongs(dropdownContentRef.current, event.target) &&\n          !nodeBelongs(dropdownFooterRef.current, event.target)\n        ) {\n          closeDropdown();\n        }\n      };\n\n      window.addEventListener('mousedown', clickListener);\n\n      return () => {\n        window.removeEventListener('mousedown', clickListener);\n      };\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n\n    return (\n      <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n        <Dropdown\n          minWidth={dropdownWidth}\n          stretchWidth={!dropdownWidth}\n          stretchBeyondTriggerWidth={true}\n          contentKey={dropdownContentKey}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          trigger={\n            <InternalInput\n              type=\"visualSearch\"\n              value={value}\n              onChange={event => handleChange(event.detail.value)}\n              __onDelayedInput={event => handleDelayedInput(event.detail.value)}\n              onKeyDown={handleKeyDown}\n              onKeyUp={onKeyUp}\n              disabled={disabled}\n              disableBrowserAutocorrect={disableBrowserAutocorrect}\n              readOnly={readOnly}\n              ariaRequired={ariaRequired}\n              clearAriaLabel={clearAriaLabel}\n              ref={inputRef}\n              autoComplete={false}\n              __nativeAttributes={nativeAttributes}\n              {...formFieldContext}\n            />\n          }\n          onMouseDown={handleDropdownMouseDown}\n          open={open && (!!dropdownContent || !!dropdownFooter)}\n          footer={\n            dropdownFooterRef && (\n              <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n                {dropdownFooter}\n              </div>\n            )\n          }\n          expandToViewport={expandToViewport}\n          loopFocus={loopFocus}\n        >\n          {open && dropdownContent ? (\n            <div ref={dropdownContentRef} className={styles['dropdown-content']}>\n              {dropdownContent}\n            </div>\n          ) : null}\n        </Dropdown>\n      </div>\n    );\n  }\n);\n\nexport default AutosuggestInput;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/autosuggest-input/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\n\nimport React, { Ref, useEffect, useImperativeHandle, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { AutosuggestProps } from '../../../autosuggest/interfaces';\nimport {\n  BaseChangeDetail,\n  BaseInputProps,\n  InputAutoCorrect,\n  InputClearLabel,\n  InputKeyEvents,\n} from '../../../input/interfaces';\nimport InternalInput, { InternalInputProps } from '../../../input/internal';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { FormFieldValidationControlProps, useFormFieldContext } from '../../context/form-field-context';\nimport { BaseKeyDetail, fireCancelableEvent, fireNonCancelableEvent, NonCancelableEventHandler } from '../../events';\nimport { InternalBaseComponentProps } from '../../hooks/use-base-component';\nimport { KeyCode } from '../../keycode';\nimport { documentHasFocus } from '../../utils/dom';\nimport { nodeBelongs } from '../../utils/node-belongs';\nimport Dropdown from '../dropdown';\nimport { ExpandToViewport } from '../dropdown/interfaces';\n\nimport styles from './styles.css.js';\n\ninterface AutosuggestInputProps\n  extends BaseComponentProps,\n    BaseInputProps,\n    InputAutoCorrect,\n    InputKeyEvents,\n    InputClearLabel,\n    FormFieldValidationControlProps,\n    ExpandToViewport,\n    InternalBaseComponentProps {\n  ariaControls?: string;\n  ariaActivedescendant?: string;\n  dropdownExpanded?: boolean;\n  dropdownContentKey?: string;\n  dropdownContentFocusable?: boolean;\n  dropdownContent?: React.ReactNode;\n  dropdownFooter?: React.ReactNode;\n  dropdownWidth?: number;\n  loopFocus?: boolean;\n  onCloseDropdown?: NonCancelableEventHandler<null>;\n  onDelayedInput?: NonCancelableEventHandler<BaseChangeDetail>;\n  onPressArrowDown?: () => void;\n  onPressArrowUp?: () => void;\n  onPressEnter?: () => boolean;\n}\n\ninterface AutosuggestInputFocusOptions {\n  preventDropdown?: boolean;\n}\n\nexport interface AutosuggestInputRef extends AutosuggestProps.Ref {\n  focus(options?: AutosuggestInputFocusOptions): void;\n  open(): void;\n  close(): void;\n}\n\nconst AutosuggestInput = React.forwardRef(\n  (\n    {\n      value,\n      onChange,\n      onBlur,\n      onFocus,\n      onKeyUp,\n      onKeyDown,\n      name,\n      placeholder,\n      disabled,\n      readOnly,\n      autoFocus,\n      ariaLabel,\n      ariaRequired,\n      disableBrowserAutocorrect = false,\n      expandToViewport,\n      ariaControls,\n      ariaActivedescendant,\n      clearAriaLabel,\n      dropdownExpanded = true,\n      dropdownContentKey,\n      dropdownContentFocusable = false,\n      dropdownContent = null,\n      dropdownFooter = null,\n      dropdownWidth,\n      loopFocus,\n      onCloseDropdown,\n      onDelayedInput,\n      onPressArrowDown,\n      onPressArrowUp,\n      onPressEnter,\n      __internalRootRef,\n      ...restProps\n    }: AutosuggestInputProps,\n    ref: Ref<AutosuggestInputRef>\n  ) => {\n    const baseProps = getBaseProps(restProps);\n    const formFieldContext = useFormFieldContext(restProps);\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const dropdownContentRef = useRef<HTMLDivElement>(null);\n    const dropdownFooterRef = useRef<HTMLDivElement>(null);\n    const preventOpenOnFocusRef = useRef(false);\n    const preventCloseOnBlurRef = useRef(false);\n\n    const [open, setOpen] = useState(false);\n\n    const openDropdown = () => !readOnly && setOpen(true);\n\n    const closeDropdown = () => {\n      setOpen(false);\n      fireNonCancelableEvent(onCloseDropdown, null);\n    };\n\n    useImperativeHandle(ref, () => ({\n      focus(options?: AutosuggestInputFocusOptions) {\n        if (options?.preventDropdown) {\n          preventOpenOnFocusRef.current = true;\n        }\n        inputRef.current?.focus();\n      },\n      select() {\n        inputRef.current?.select();\n      },\n      open: openDropdown,\n      close: closeDropdown,\n    }));\n\n    const handleBlur = () => {\n      // When the document in not in focus it means the focus moved outside the page. In that case the dropdown shall stay open\n      // so that when the user comes back it does not re-open unexpectedly when the focus is restored by the browser.\n      if (!documentHasFocus()) {\n        return;\n      }\n      if (!preventCloseOnBlurRef.current) {\n        closeDropdown();\n        fireNonCancelableEvent(onBlur, null);\n      }\n    };\n\n    const handleFocus = () => {\n      if (!preventOpenOnFocusRef.current) {\n        openDropdown();\n        fireNonCancelableEvent(onFocus, null);\n      }\n      preventOpenOnFocusRef.current = false;\n    };\n\n    const fireKeydown = (event: CustomEvent<BaseKeyDetail>) => fireCancelableEvent(onKeyDown, event.detail, event);\n\n    const handleKeyDown = (event: CustomEvent<BaseKeyDetail>) => {\n      switch (event.detail.keyCode) {\n        case KeyCode.down: {\n          onPressArrowDown?.();\n          openDropdown();\n          event.preventDefault();\n          break;\n        }\n        case KeyCode.up: {\n          onPressArrowUp?.();\n          openDropdown();\n          event.preventDefault();\n          break;\n        }\n        case KeyCode.enter: {\n          if (open) {\n            if (!onPressEnter?.()) {\n              closeDropdown();\n            }\n            event.preventDefault();\n          }\n          fireKeydown(event);\n          break;\n        }\n        case KeyCode.escape: {\n          if (open) {\n            event.stopPropagation();\n            closeDropdown();\n          } else if (value) {\n            event.stopPropagation();\n            fireNonCancelableEvent(onChange, { value: '' });\n          }\n          event.preventDefault();\n          fireKeydown(event);\n          break;\n        }\n        default: {\n          fireKeydown(event);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      openDropdown();\n      fireNonCancelableEvent(onChange, { value });\n    };\n\n    const handleDelayedInput = (value: string) => {\n      fireNonCancelableEvent(onDelayedInput, { value });\n    };\n\n    const handleDropdownMouseDown: React.MouseEventHandler = event => {\n      // Prevent currently focused element from losing focus.\n      if (!dropdownContentFocusable) {\n        event.preventDefault();\n      }\n      // Prevent closing dropdown on click inside.\n      else {\n        preventCloseOnBlurRef.current = true;\n        requestAnimationFrame(() => {\n          preventCloseOnBlurRef.current = false;\n        });\n      }\n    };\n\n    const expanded = open && dropdownExpanded;\n    const nativeAttributes: InternalInputProps['__nativeAttributes'] = {\n      name,\n      placeholder,\n      autoFocus,\n      onClick: openDropdown,\n      role: 'combobox',\n      'aria-autocomplete': 'list',\n      'aria-expanded': expanded,\n      'aria-controls': open ? ariaControls : undefined,\n      // 'aria-owns' needed for safari+vo to announce activedescendant content\n      'aria-owns': open ? ariaControls : undefined,\n      'aria-label': ariaLabel,\n      'aria-activedescendant': ariaActivedescendant,\n    };\n\n    // Closes dropdown when outside click is detected.\n    // Similar to the internal dropdown implementation but includes the target as well.\n    useEffect(() => {\n      if (!open) {\n        return;\n      }\n\n      const clickListener = (event: MouseEvent) => {\n        if (\n          !nodeBelongs(inputRef.current, event.target) &&\n          !nodeBelongs(dropdownContentRef.current, event.target) &&\n          !nodeBelongs(dropdownFooterRef.current, event.target)\n        ) {\n          closeDropdown();\n        }\n      };\n\n      window.addEventListener('mousedown', clickListener);\n\n      return () => {\n        window.removeEventListener('mousedown', clickListener);\n      };\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [open]);\n\n    return (\n      <div {...baseProps} className={clsx(baseProps.className, styles.root)} ref={__internalRootRef}>\n        <Dropdown\n          minWidth={dropdownWidth}\n          stretchWidth={!dropdownWidth}\n          stretchBeyondTriggerWidth={true}\n          contentKey={dropdownContentKey}\n          onFocus={handleFocus}\n          onBlur={handleBlur}\n          trigger={\n            <InternalInput\n              type=\"visualSearch\"\n              value={value}\n              onChange={event => handleChange(event.detail.value)}\n              __onDelayedInput={event => handleDelayedInput(event.detail.value)}\n              onKeyDown={handleKeyDown}\n              onKeyUp={onKeyUp}\n              disabled={disabled}\n              disableBrowserAutocorrect={disableBrowserAutocorrect}\n              readOnly={readOnly}\n              ariaRequired={ariaRequired}\n              clearAriaLabel={clearAriaLabel}\n              ref={inputRef}\n              autoComplete={false}\n              __nativeAttributes={nativeAttributes}\n              {...formFieldContext}\n            />\n          }\n          onMouseDown={handleDropdownMouseDown}\n          open={open && (!!dropdownContent || !!dropdownFooter)}\n          footer={\n            dropdownFooterRef && (\n              <div ref={dropdownFooterRef} className={styles['dropdown-footer']}>\n                {dropdownFooter}\n              </div>\n            )\n          }\n          expandToViewport={expandToViewport}\n          loopFocus={loopFocus}\n        >\n          {open && dropdownContent ? (\n            <div ref={dropdownContentRef} className={styles['dropdown-content']}>\n              {dropdownContent}\n            </div>\n          ) : null}\n        </Dropdown>\n      </div>\n    );\n  }\n);\n\nexport default AutosuggestInput;\n"]}

package/internal/components/drag-handle/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DragHandleProps } from './interfaces';
 export { DragHandleProps };
-declare const DragHandle: React.ForwardRefExoticComponent<DragHandleProps & React.RefAttributes<DragHandleProps.Ref>>;
-export default DragHandle;
+declare const InternalDragHandle: React.ForwardRefExoticComponent<DragHandleProps & React.RefAttributes<DragHandleProps.Ref>>;
+export default InternalDragHandle;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/drag-handle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAMlD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,UAAU,6FA+Df,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,kBAAkB,6FAiEvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

package/internal/components/drag-handle/index.js

@@ -1,12 +1,16 @@
+import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { forwardRef, useRef } from 'react';
 import clsx from 'clsx';
 import InternalIcon from '../../../icon/internal';
+import { getBaseProps } from '../../base-component';
 import useForwardFocus from '../../hooks/forward-focus';
 import { ResizeIcon } from './resize-icon';
 import styles from './styles.css.js';
-const DragHandle = forwardRef(({ variant = 'drag-indicator', size = 'normal', ariaLabel, ariaDescribedby, ariaValue, disabled, onPointerDown, onKeyDown, className, }, ref) => {
+const InternalDragHandle = forwardRef((_a, ref) => {
+    var { variant = 'drag-indicator', size = 'normal', ariaLabel, ariaDescribedby, ariaValue, disabled, onPointerDown, onKeyDown } = _a, rest = __rest(_a, ["variant", "size", "ariaLabel", "ariaDescribedby", "ariaValue", "disabled", "onPointerDown", "onKeyDown"]);
+    const baseProps = getBaseProps(rest);
     const dragHandleRefObject = useRef(null);
     useForwardFocus(ref, dragHandleRefObject);
     const iconProps = (() => {
@@ -28,8 +32,8 @@ const DragHandle = forwardRef(({ variant = 'drag-indicator', size = 'normal', ar
     // (See https://bugs.webkit.org/show_bug.cgi?id=22261)
     // Otherwise, we can't reliably catch keyboard events coming from the handle
     // when it is being dragged.
-    React.createElement("div", { ref: dragHandleRefObject, role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(className, styles.handle, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled']), "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onKeyDown: onKeyDown },
+    React.createElement("div", Object.assign({}, baseProps, { ref: dragHandleRefObject, role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(baseProps.className, styles.handle, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled']), "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onKeyDown: onKeyDown }),
         React.createElement(InternalIcon, Object.assign({}, iconProps))));
 });
-export default DragHandle;
+export default InternalDragHandle;
 //# sourceMappingURL=index.js.map

package/internal/components/drag-handle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,eAAe,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,UAAU,GAAG,UAAU,CAC3B,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,EACT,SAAS,GACO,EAClB,GAAmC,EACnC,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,eAAe,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC;IAE1C,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;QAC/E,QAAQ,OAAO,EAAE;YACf,KAAK,gBAAgB;gBACnB,uCAAY,MAAM,KAAE,IAAI,EAAE,gBAAgB,IAAG;YAC/C,KAAK,aAAa;gBAChB,uCAAY,MAAM,KAAE,IAAI,EAAE,aAAa,IAAG;YAC5C,KAAK,mBAAmB;gBACtB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,IAAG;YACjE,KAAK,iBAAiB;gBACpB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,IAAG;SAChE;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,mBAAmB,EACxB,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CACtC,gBACW,SAAS,sBACH,eAAe,mBAClB,QAAQ,mBACR,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS;QAEpB,oBAAC,YAAY,oBAAK,SAAS,EAAI,CAC3B,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,UAAU,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport useForwardFocus from '../../hooks/forward-focus';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\n\nexport { DragHandleProps };\n\nconst DragHandle = forwardRef(\n  (\n    {\n      variant = 'drag-indicator',\n      size = 'normal',\n      ariaLabel,\n      ariaDescribedby,\n      ariaValue,\n      disabled,\n      onPointerDown,\n      onKeyDown,\n      className,\n    }: DragHandleProps,\n    ref: React.Ref<DragHandleProps.Ref>\n  ) => {\n    const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n    useForwardFocus(ref, dragHandleRefObject);\n\n    const iconProps: IconProps = (() => {\n      const shared = { variant: disabled ? ('disabled' as const) : undefined, size };\n      switch (variant) {\n        case 'drag-indicator':\n          return { ...shared, name: 'drag-indicator' };\n        case 'resize-area':\n          return { ...shared, name: 'resize-area' };\n        case 'resize-horizontal':\n          return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n        case 'resize-vertical':\n          return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n      }\n    })();\n\n    return (\n      // We need to use a div with button role instead of a button\n      // so that Safari will focus on it when clicking it.\n      // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n      // Otherwise, we can't reliably catch keyboard events coming from the handle\n      // when it is being dragged.\n      <div\n        ref={dragHandleRefObject}\n        role={ariaValue ? 'slider' : 'button'}\n        tabIndex={0}\n        className={clsx(\n          className,\n          styles.handle,\n          styles[`handle-${variant}`],\n          styles[`handle-size-${size}`],\n          disabled && styles['handle-disabled']\n        )}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedby}\n        aria-disabled={disabled}\n        aria-valuemax={ariaValue?.valueMax}\n        aria-valuemin={ariaValue?.valueMin}\n        aria-valuenow={ariaValue?.valueNow}\n        onPointerDown={onPointerDown}\n        onKeyDown={onKeyDown}\n      >\n        <InternalIcon {...iconProps} />\n      </div>\n    );\n  }\n);\n\nexport default DragHandle;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,eAAe,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,kBAAkB,GAAG,UAAU,CACnC,CACE,EAUkB,EAClB,GAAmC,EACnC,EAAE;QAZF,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,OAEO,EADb,IAAI,cATT,0GAUC,CADQ;IAIT,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,eAAe,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC;IAE1C,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;QAC/E,QAAQ,OAAO,EAAE;YACf,KAAK,gBAAgB;gBACnB,uCAAY,MAAM,KAAE,IAAI,EAAE,gBAAgB,IAAG;YAC/C,KAAK,aAAa;gBAChB,uCAAY,MAAM,KAAE,IAAI,EAAE,aAAa,IAAG;YAC5C,KAAK,mBAAmB;gBACtB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,IAAG;YACjE,KAAK,iBAAiB;gBACpB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,IAAG;SAChE;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6CACM,SAAS,IACb,GAAG,EAAE,mBAAmB,EACxB,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CACtC,gBACW,SAAS,sBACH,eAAe,mBAClB,QAAQ,mBACR,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS;QAEpB,oBAAC,YAAY,oBAAK,SAAS,EAAI,CAC3B,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { getBaseProps } from '../../base-component';\nimport useForwardFocus from '../../hooks/forward-focus';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\n\nexport { DragHandleProps };\n\nconst InternalDragHandle = forwardRef(\n  (\n    {\n      variant = 'drag-indicator',\n      size = 'normal',\n      ariaLabel,\n      ariaDescribedby,\n      ariaValue,\n      disabled,\n      onPointerDown,\n      onKeyDown,\n      ...rest\n    }: DragHandleProps,\n    ref: React.Ref<DragHandleProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n    useForwardFocus(ref, dragHandleRefObject);\n\n    const iconProps: IconProps = (() => {\n      const shared = { variant: disabled ? ('disabled' as const) : undefined, size };\n      switch (variant) {\n        case 'drag-indicator':\n          return { ...shared, name: 'drag-indicator' };\n        case 'resize-area':\n          return { ...shared, name: 'resize-area' };\n        case 'resize-horizontal':\n          return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n        case 'resize-vertical':\n          return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n      }\n    })();\n\n    return (\n      // We need to use a div with button role instead of a button\n      // so that Safari will focus on it when clicking it.\n      // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n      // Otherwise, we can't reliably catch keyboard events coming from the handle\n      // when it is being dragged.\n      <div\n        {...baseProps}\n        ref={dragHandleRefObject}\n        role={ariaValue ? 'slider' : 'button'}\n        tabIndex={0}\n        className={clsx(\n          baseProps.className,\n          styles.handle,\n          styles[`handle-${variant}`],\n          styles[`handle-size-${size}`],\n          disabled && styles['handle-disabled']\n        )}\n        aria-label={ariaLabel}\n        aria-describedby={ariaDescribedby}\n        aria-disabled={disabled}\n        aria-valuemax={ariaValue?.valueMax}\n        aria-valuemin={ariaValue?.valueMin}\n        aria-valuenow={ariaValue?.valueNow}\n        onPointerDown={onPointerDown}\n        onKeyDown={onKeyDown}\n      >\n        <InternalIcon {...iconProps} />\n      </div>\n    );\n  }\n);\n\nexport default InternalDragHandle;\n"]}

package/internal/components/drag-handle/interfaces.d.ts

@@ -6,9 +6,9 @@ export interface DragHandleProps {
     ariaDescribedby?: string;
     ariaValue?: DragHandleProps.AriaValue;
     disabled?: boolean;
+    className?: string;
     onPointerDown?: React.PointerEventHandler;
     onKeyDown?: React.KeyboardEventHandler;
-    className?: string;
 }
 export declare namespace DragHandleProps {
     type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';

package/internal/components/drag-handle/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEjG,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;IAEtC,UAAiB,SAAS;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB;IAED,UAAiB,GAAG;QAClB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;KACrC;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;CACxC;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEjG,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;IAEtC,UAAiB,SAAS;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB;IAED,UAAiB,GAAG;QAClB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;KACrC;CACF"}

package/internal/components/drag-handle/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface DragHandleProps {\n  variant?: DragHandleProps.Variant;\n  size?: DragHandleProps.Size;\n  ariaLabel: string;\n  ariaDescribedby?: string;\n  ariaValue?: DragHandleProps.AriaValue;\n  disabled?: boolean;\n  onPointerDown?: React.PointerEventHandler;\n  onKeyDown?: React.KeyboardEventHandler;\n  className?: string;\n}\n\nexport namespace DragHandleProps {\n  export type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';\n\n  export type Size = 'small' | 'normal';\n\n  export interface AriaValue {\n    valueMin: number;\n    valueMax: number;\n    valueNow: number;\n  }\n\n  export interface Ref {\n    focus(options?: FocusOptions): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface DragHandleProps {\n  variant?: DragHandleProps.Variant;\n  size?: DragHandleProps.Size;\n  ariaLabel: string;\n  ariaDescribedby?: string;\n  ariaValue?: DragHandleProps.AriaValue;\n  disabled?: boolean;\n  className?: string;\n  onPointerDown?: React.PointerEventHandler;\n  onKeyDown?: React.KeyboardEventHandler;\n}\n\nexport namespace DragHandleProps {\n  export type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';\n\n  export type Size = 'small' | 'normal';\n\n  export interface AriaValue {\n    valueMin: number;\n    valueMax: number;\n    valueNow: number;\n  }\n\n  export interface Ref {\n    focus(options?: FocusOptions): void;\n  }\n}\n"]}

package/internal/components/panel-resize-handle/icon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export default function ResizeHandleIcon({ className }: {
+    className?: string;
+}): JSX.Element;
+//# sourceMappingURL=icon.d.ts.map

package/internal/components/panel-resize-handle/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/panel-resize-handle/icon.tsx"],"names":[],"mappings":";AAIA,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,SAAS,EAAE,EAAE;IAAE,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,eAe7E"}

package/internal/components/panel-resize-handle/icon.js

@@ -0,0 +1,9 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+export default function ResizeHandleIcon({ className }) {
+    return (React.createElement("svg", { focusable: false, className: className, xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", "aria-hidden": true },
+        React.createElement("line", { strokeWidth: "2", x1: "2", y1: "5", x2: "14", y2: "5" }),
+        React.createElement("line", { strokeWidth: "2", x1: "14", y1: "10", x2: "2", y2: "10" })));
+}
+//# sourceMappingURL=icon.js.map

package/internal/components/panel-resize-handle/icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../../../../src/internal/components/panel-resize-handle/icon.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,SAAS,EAA0B;IAC5E,OAAO,CACL,6BACE,SAAS,EAAE,KAAK,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,iBACN,IAAI;QAEjB,8BAAM,WAAW,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,GAAG;QACrD,8BAAM,WAAW,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,IAAI,GAAG,CACnD,CACP,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nexport default function ResizeHandleIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      focusable={false}\n      className={className}\n      xmlns=\"http://www.w3.org/2000/svg\"\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      aria-hidden={true}\n    >\n      <line strokeWidth=\"2\" x1=\"2\" y1=\"5\" x2=\"14\" y2=\"5\" />\n      <line strokeWidth=\"2\" x1=\"14\" y1=\"10\" x2=\"2\" y2=\"10\" />\n    </svg>\n  );\n}\n"]}

package/internal/components/panel-resize-handle/index.d.ts

@@ -1,14 +1,12 @@
 import React from 'react';
 interface ResizeHandleProps {
+    className?: string;
     ariaLabel: string | undefined;
     position: 'side' | 'bottom';
     ariaValuenow: number;
     onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;
-    className?: string;
 }
-declare const _default: React.ForwardRefExoticComponent<ResizeHandleProps & React.RefAttributes<{
-    focus: () => void;
-}>>;
+declare const _default: React.ForwardRefExoticComponent<ResizeHandleProps & React.RefAttributes<HTMLDivElement>>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/internal/components/panel-resize-handle/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/panel-resize-handle/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,UAAU,iBAAiB;IACzB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;;WAIyB,MAAM,IAAI;;AAFpC,wBAsBG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/panel-resize-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,iBAAiB;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,QAAQ,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC7D,aAAa,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACjE;;AAED,wBAoBG"}

package/internal/components/panel-resize-handle/index.js

@@ -1,14 +1,11 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import DragHandle from '../drag-handle';
+import clsx from 'clsx';
+import ResizeHandleIcon from './icon';
 import styles from './styles.css.js';
-export default React.forwardRef(function PanelResizeHandle({ ariaLabel, ariaValuenow, position, onKeyDown, onPointerDown, className }, ref) {
-    return (React.createElement("div", { className: styles[`handle-wrapper-${position}`] },
-        React.createElement(DragHandle, { variant: position === 'bottom' ? 'resize-vertical' : 'resize-horizontal', size: "small", ref: ref, ariaLabel: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : '', ariaValue: {
-                valueMin: 0,
-                valueMax: 100,
-                valueNow: ariaValuenow,
-            }, onPointerDown: onPointerDown, onKeyDown: onKeyDown, className: className })));
+export default React.forwardRef(function PanelResizeHandle({ className, ariaLabel, ariaValuenow, position, onKeyDown, onPointerDown }, ref) {
+    return (React.createElement("div", { ref: ref, className: clsx(className, styles.slider, styles[`slider-${position}`]), role: "slider", tabIndex: 0, "aria-label": ariaLabel, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": ariaValuenow, onKeyDown: onKeyDown, onPointerDown: onPointerDown },
+        React.createElement(ResizeHandleIcon, { className: clsx(styles['slider-icon'], styles[`slider-icon-${position}`]) })));
 });
 //# sourceMappingURL=index.js.map

package/internal/components/panel-resize-handle/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/panel-resize-handle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,UAAU,MAAM,gBAAgB,CAAC;AAExC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,eAAe,KAAK,CAAC,UAAU,CAAC,SAAS,iBAAiB,CACxD,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,SAAS,EAAqB,EAC7F,GAAqC;IAErC,OAAO,CACL,6BAAK,SAAS,EAAE,MAAM,CAAC,kBAAkB,QAAQ,EAAE,CAAC;QAClD,oBAAC,UAAU,IACT,OAAO,EAAE,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,mBAAmB,EACxE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,EAAE,EAC1B,SAAS,EAAE;gBACT,QAAQ,EAAE,CAAC;gBACX,QAAQ,EAAE,GAAG;gBACb,QAAQ,EAAE,YAAY;aACvB,EACD,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,GACpB,CACE,CACP,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport DragHandle from '../drag-handle';\n\nimport styles from './styles.css.js';\n\ninterface ResizeHandleProps {\n  ariaLabel: string | undefined;\n  position: 'side' | 'bottom';\n  ariaValuenow: number;\n  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n  onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;\n  className?: string;\n}\n\nexport default React.forwardRef(function PanelResizeHandle(\n  { ariaLabel, ariaValuenow, position, onKeyDown, onPointerDown, className }: ResizeHandleProps,\n  ref: React.Ref<{ focus: () => void }>\n) {\n  return (\n    <div className={styles[`handle-wrapper-${position}`]}>\n      <DragHandle\n        variant={position === 'bottom' ? 'resize-vertical' : 'resize-horizontal'}\n        size=\"small\"\n        ref={ref}\n        ariaLabel={ariaLabel ?? ''}\n        ariaValue={{\n          valueMin: 0,\n          valueMax: 100,\n          valueNow: ariaValuenow,\n        }}\n        onPointerDown={onPointerDown}\n        onKeyDown={onKeyDown}\n        className={className}\n      />\n    </div>\n  );\n});\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/panel-resize-handle/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,gBAAgB,MAAM,QAAQ,CAAC;AAEtC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,eAAe,KAAK,CAAC,UAAU,CAAoC,SAAS,iBAAiB,CAC3F,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,EAC1E,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,UAAU,QAAQ,EAAE,CAAC,CAAC,EACvE,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,gBACC,SAAS,mBACN,GAAG,mBACH,CAAC,mBACD,YAAY,EAC3B,SAAS,EAAE,SAAS,EACpB,aAAa,EAAE,aAAa;QAE5B,oBAAC,gBAAgB,IAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,eAAe,QAAQ,EAAE,CAAC,CAAC,GAAI,CAC3F,CACP,CAAC;AACJ,CAAC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport ResizeHandleIcon from './icon';\n\nimport styles from './styles.css.js';\n\ninterface ResizeHandleProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  position: 'side' | 'bottom';\n  ariaValuenow: number;\n  onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;\n  onPointerDown: (event: React.PointerEvent<HTMLElement>) => void;\n}\n\nexport default React.forwardRef<HTMLDivElement, ResizeHandleProps>(function PanelResizeHandle(\n  { className, ariaLabel, ariaValuenow, position, onKeyDown, onPointerDown },\n  ref\n) {\n  return (\n    <div\n      ref={ref}\n      className={clsx(className, styles.slider, styles[`slider-${position}`])}\n      role=\"slider\"\n      tabIndex={0}\n      aria-label={ariaLabel}\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={ariaValuenow}\n      onKeyDown={onKeyDown}\n      onPointerDown={onPointerDown}\n    >\n      <ResizeHandleIcon className={clsx(styles['slider-icon'], styles[`slider-icon-${position}`])} />\n    </div>\n  );\n});\n"]}

package/internal/components/panel-resize-handle/styles.css.js

@@ -1,7 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "handle-wrapper-side": "awsui_handle-wrapper-side_cqzlk_1qkms_5",
-  "handle-wrapper-bottom": "awsui_handle-wrapper-bottom_cqzlk_1qkms_9"
+  "slider": "awsui_slider_cqzlk_1vl2o_145",
+  "slider-side": "awsui_slider-side_cqzlk_1vl2o_180",
+  "slider-icon": "awsui_slider-icon_cqzlk_1vl2o_187",
+  "slider-icon-bottom": "awsui_slider-icon-bottom_cqzlk_1vl2o_193",
+  "slider-icon-side": "awsui_slider-icon-side_cqzlk_1vl2o_197"
 };
   

package/internal/components/panel-resize-handle/styles.scoped.css

@@ -2,10 +2,198 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_handle-wrapper-side_cqzlk_1qkms_5:not(#\9) {
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+.awsui_slider_cqzlk_1vl2o_145:not(#\9) {
+  padding-block: 0;
+  padding-inline: 0;
+  cursor: ns-resize;
+  margin-block-start: 2px;
+  margin-block-end: 0;
+  margin-inline: 0;
+  block-size: 16px;
+  touch-action: none;
+}
+.awsui_slider_cqzlk_1vl2o_145:not(#\9):focus {
+  outline: none;
+}
+body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1vl2o_145:not(#\9):focus {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1vl2o_145:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: calc(0px - 1px);
+}
+body[data-awsui-focus-visible=true] .awsui_slider_cqzlk_1vl2o_145:not(#\9):focus::before {
+  content: " ";
+  display: block;
+  position: absolute;
+  inset-inline-start: calc(-1 * 0px);
+  inset-block-start: calc(-1 * 0px);
+  inline-size: calc(100% + 0px + 0px);
+  block-size: calc(100% + 0px + 0px);
+  border-start-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-start-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-end-start-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  border-end-end-radius: var(--border-radius-control-default-focus-ring-u8zbsz, 4px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
+}
+
+.awsui_slider-side_cqzlk_1vl2o_180:not(#\9) {
+  cursor: ew-resize;
+  margin-block: 0;
   margin-inline-start: 2px;
+  margin-inline-end: 0;
 }
 
-.awsui_handle-wrapper-bottom_cqzlk_1qkms_9:not(#\9) {
-  margin-block-start: 2px;
+.awsui_slider-icon_cqzlk_1vl2o_187:not(#\9) {
+  stroke: var(--color-text-interactive-default-tkx8fe, #424650);
+}
+.awsui_slider-icon_cqzlk_1vl2o_187:not(#\9):hover {
+  stroke: var(--color-text-interactive-hover-f9gqs8, #0f141a);
+}
+.awsui_slider-icon-bottom_cqzlk_1vl2o_193:not(#\9) {
+  margin-block: auto;
+  margin-inline: auto;
+}
+.awsui_slider-icon-side_cqzlk_1vl2o_197:not(#\9) {
+  transform: rotate(90deg);
 }

package/internal/components/panel-resize-handle/styles.selectors.js

@@ -2,7 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle-wrapper-side": "awsui_handle-wrapper-side_cqzlk_1qkms_5",
-  "handle-wrapper-bottom": "awsui_handle-wrapper-bottom_cqzlk_1qkms_9"
+  "slider": "awsui_slider_cqzlk_1vl2o_145",
+  "slider-side": "awsui_slider-side_cqzlk_1vl2o_180",
+  "slider-icon": "awsui_slider-icon_cqzlk_1vl2o_187",
+  "slider-icon-bottom": "awsui_slider-icon-bottom_cqzlk_1vl2o_193",
+  "slider-icon-side": "awsui_slider-icon-side_cqzlk_1vl2o_197"
 };
   

package/internal/components/sortable-area/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { SortableAreaProps } from './interfaces';
+export { SortableAreaProps };
+export default function SortableArea<Item>({ items, itemDefinition, renderItem, onItemsChange, disableReorder, i18nStrings, }: SortableAreaProps<Item>): JSX.Element;
+export declare function getBorderRadiusVariant(itemDefinition: SortableAreaProps.ItemDefinition<any>): SortableAreaProps.BorderRadiusVariant;
+//# sourceMappingURL=index.d.ts.map

package/internal/components/sortable-area/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/index.tsx"],"names":[],"mappings":";AAYA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAMjD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAAI,EAAE,EACzC,KAAK,EACL,cAAc,EACd,UAAU,EACV,aAAa,EACb,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,CAAC,IAAI,CAAC,eA4EzB;AAyED,wBAAgB,sBAAsB,CACpC,cAAc,EAAE,iBAAiB,CAAC,cAAc,CAAC,GAAG,CAAC,GACpD,iBAAiB,CAAC,mBAAmB,CAEvC"}