@cloudscape-design/components-themeable 3.0.936 → 3.0.937

package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js

@@ -0,0 +1,56 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef } from 'react';
+import { getIsRtl, getLogicalBoundingClientRect, getScrollInlineStart, } from '@cloudscape-design/component-toolkit/internal';
+import Portal from '../portal';
+import styles from './styles.css.js';
+export default function PortalOverlay({ track, children }) {
+    const ref = useRef(null);
+    useEffect(() => {
+        if (track === null) {
+            return;
+        }
+        let cleanedUp = false;
+        let lastX;
+        let lastY;
+        let lastInlineSize;
+        let lastBlockSize;
+        const updateElement = () => {
+            if (ref.current) {
+                const isRtl = getIsRtl(ref.current);
+                const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(track);
+                // For simplicity, we just make all our calculations independent of
+                // the browser's scrolling edge. When it comes to applying the changes,
+                // translate is independent of writing direction, so we need to invert
+                // the X coordinate ourselves just before applying the values.
+                const newX = (insetInlineStart + getScrollInlineStart(document.documentElement)) * (isRtl ? -1 : 1);
+                const newY = insetBlockStart + document.documentElement.scrollTop;
+                if (lastX !== newX || lastY !== newY) {
+                    ref.current.style.translate = `${newX}px ${newY}px`;
+                    lastX = newX;
+                    lastY = newY;
+                }
+                if (lastInlineSize !== inlineSize || lastBlockSize !== blockSize) {
+                    ref.current.style.width = `${inlineSize}px`;
+                    ref.current.style.height = `${blockSize}px`;
+                    lastInlineSize = inlineSize;
+                    lastBlockSize = blockSize;
+                }
+            }
+            if (!cleanedUp) {
+                requestAnimationFrame(updateElement);
+            }
+        };
+        updateElement();
+        return () => {
+            cleanedUp = true;
+        };
+    }, [track]);
+    if (track === null) {
+        return null;
+    }
+    return (React.createElement(Portal, null,
+        React.createElement("span", { ref: ref, className: styles['portal-overlay'] },
+            React.createElement("span", { className: styles['portal-overlay-contents'] }, children))));
+}
+//# sourceMappingURL=portal-overlay.js.map

package/lib/internal/template/internal/components/drag-handle-wrapper/portal-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"portal-overlay.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EACL,QAAQ,EACR,4BAA4B,EAC5B,oBAAoB,GACrB,MAAM,+CAA+C,CAAC;AAEvD,OAAO,MAAM,MAAM,WAAW,CAAC;AAE/B,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAA4D;IACjH,MAAM,GAAG,GAAG,MAAM,CAAyB,IAAI,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,IAAI,EAAE;YAClB,OAAO;SACR;QAED,IAAI,SAAS,GAAG,KAAK,CAAC;QACtB,IAAI,KAAyB,CAAC;QAC9B,IAAI,KAAyB,CAAC;QAC9B,IAAI,cAAkC,CAAC;QACvC,IAAI,aAAiC,CAAC;QACtC,MAAM,aAAa,GAAG,GAAG,EAAE;YACzB,IAAI,GAAG,CAAC,OAAO,EAAE;gBACf,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;gBACpC,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,4BAA4B,CAAC,KAAK,CAAC,CAAC;gBACzG,mEAAmE;gBACnE,uEAAuE;gBACvE,sEAAsE;gBACtE,8DAA8D;gBAC9D,MAAM,IAAI,GAAG,CAAC,gBAAgB,GAAG,oBAAoB,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;gBACpG,MAAM,IAAI,GAAG,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC,SAAS,CAAC;gBAClE,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,KAAK,IAAI,EAAE;oBACpC,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,GAAG,IAAI,MAAM,IAAI,IAAI,CAAC;oBACpD,KAAK,GAAG,IAAI,CAAC;oBACb,KAAK,GAAG,IAAI,CAAC;iBACd;gBACD,IAAI,cAAc,KAAK,UAAU,IAAI,aAAa,KAAK,SAAS,EAAE;oBAChE,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,UAAU,IAAI,CAAC;oBAC5C,GAAG,CAAC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,SAAS,IAAI,CAAC;oBAC5C,cAAc,GAAG,UAAU,CAAC;oBAC5B,aAAa,GAAG,SAAS,CAAC;iBAC3B;aACF;YACD,IAAI,CAAC,SAAS,EAAE;gBACd,qBAAqB,CAAC,aAAa,CAAC,CAAC;aACtC;QACH,CAAC,CAAC;QACF,aAAa,EAAE,CAAC;QAEhB,OAAO,GAAG,EAAE;YACV,SAAS,GAAG,IAAI,CAAC;QACnB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,IAAI,KAAK,KAAK,IAAI,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,oBAAC,MAAM;QACL,8BAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;YACjD,8BAAM,SAAS,EAAE,MAAM,CAAC,yBAAyB,CAAC,IAAG,QAAQ,CAAQ,CAChE,CACA,CACV,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 } from 'react';\n\nimport {\n  getIsRtl,\n  getLogicalBoundingClientRect,\n  getScrollInlineStart,\n} from '@cloudscape-design/component-toolkit/internal';\n\nimport Portal from '../portal';\n\nimport styles from './styles.css.js';\n\nexport default function PortalOverlay({ track, children }: { track: HTMLElement | null; children: React.ReactNode }) {\n  const ref = useRef<HTMLSpanElement | null>(null);\n\n  useEffect(() => {\n    if (track === null) {\n      return;\n    }\n\n    let cleanedUp = false;\n    let lastX: number | undefined;\n    let lastY: number | undefined;\n    let lastInlineSize: number | undefined;\n    let lastBlockSize: number | undefined;\n    const updateElement = () => {\n      if (ref.current) {\n        const isRtl = getIsRtl(ref.current);\n        const { insetInlineStart, insetBlockStart, inlineSize, blockSize } = getLogicalBoundingClientRect(track);\n        // For simplicity, we just make all our calculations independent of\n        // the browser's scrolling edge. When it comes to applying the changes,\n        // translate is independent of writing direction, so we need to invert\n        // the X coordinate ourselves just before applying the values.\n        const newX = (insetInlineStart + getScrollInlineStart(document.documentElement)) * (isRtl ? -1 : 1);\n        const newY = insetBlockStart + document.documentElement.scrollTop;\n        if (lastX !== newX || lastY !== newY) {\n          ref.current.style.translate = `${newX}px ${newY}px`;\n          lastX = newX;\n          lastY = newY;\n        }\n        if (lastInlineSize !== inlineSize || lastBlockSize !== blockSize) {\n          ref.current.style.width = `${inlineSize}px`;\n          ref.current.style.height = `${blockSize}px`;\n          lastInlineSize = inlineSize;\n          lastBlockSize = blockSize;\n        }\n      }\n      if (!cleanedUp) {\n        requestAnimationFrame(updateElement);\n      }\n    };\n    updateElement();\n\n    return () => {\n      cleanedUp = true;\n    };\n  }, [track]);\n\n  if (track === null) {\n    return null;\n  }\n\n  return (\n    <Portal>\n      <span ref={ref} className={styles['portal-overlay']}>\n        <span className={styles['portal-overlay-contents']}>{children}</span>\n      </span>\n    </Portal>\n  );\n}\n"]}

package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js

@@ -0,0 +1,32 @@
+
+    import './styles.scoped.css';
+    export default {
+  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_jt7dv_170",
+  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_jt7dv_180",
+  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181",
+  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_jt7dv_182",
+  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183",
+  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_jt7dv_206",
+  "slide-up": "awsui_slide-up_155yk_jt7dv_1",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_jt7dv_1",
+  "slide-up-exit": "awsui_slide-up-exit_155yk_jt7dv_1",
+  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_jt7dv_1",
+  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_jt7dv_233",
+  "slide-down": "awsui_slide-down_155yk_jt7dv_1",
+  "slide-down-exit": "awsui_slide-down-exit_155yk_jt7dv_1",
+  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260",
+  "slide-left": "awsui_slide-left_155yk_jt7dv_1",
+  "direction-button-wrapper-rtl": "awsui_direction-button-wrapper-rtl_155yk_jt7dv_273",
+  "slide-right": "awsui_slide-right_155yk_jt7dv_1",
+  "slide-left-exit": "awsui_slide-left-exit_155yk_jt7dv_1",
+  "slide-right-exit": "awsui_slide-right-exit_155yk_jt7dv_1",
+  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313",
+  "drag-handle-wrapper": "awsui_drag-handle-wrapper_155yk_jt7dv_430",
+  "portal-overlay": "awsui_portal-overlay_155yk_jt7dv_435",
+  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_jt7dv_443",
+  "drag-handle": "awsui_drag-handle_155yk_jt7dv_430",
+  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_jt7dv_460",
+  "direction-button": "awsui_direction-button_155yk_jt7dv_170",
+  "direction-button-disabled": "awsui_direction-button-disabled_155yk_jt7dv_503"
+};
+  

package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css

@@ -0,0 +1,508 @@
+/*
+ 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
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@keyframes awsui_awsui-motion-fade-in_155yk_jt7dv_1 {
+  from {
+    opacity: 0.2;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes awsui_awsui-motion-fade-out-0_155yk_jt7dv_1 {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper_155yk_jt7dv_170:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper_155yk_jt7dv_170:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper_155yk_jt7dv_170:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+.awsui_direction-button-wrapper-motion-enter_155yk_jt7dv_180:not(#\9),
+.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9),
+.awsui_direction-button-wrapper-motion-exit_155yk_jt7dv_182:not(#\9),
+.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  pointer-events: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-motion-enter_155yk_jt7dv_180:not(#\9),
+  .awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9),
+  .awsui_direction-button-wrapper-motion-exit_155yk_jt7dv_182:not(#\9),
+  .awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-motion-enter_155yk_jt7dv_180:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-enter_155yk_jt7dv_180:not(#\9), .awsui-motion-disabled .awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9), .awsui-motion-disabled .awsui_direction-button-wrapper-motion-exit_155yk_jt7dv_182:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-exit_155yk_jt7dv_182:not(#\9), .awsui-motion-disabled .awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+.awsui_direction-button-wrapper-block-start_155yk_jt7dv_206.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+  animation: awsui_slide-up_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out), awsui_awsui-motion-fade-in_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-block-start_155yk_jt7dv_206.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-block-start_155yk_jt7dv_206.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-block-start_155yk_jt7dv_206.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_direction-button-wrapper-block-start_155yk_jt7dv_206.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: awsui_slide-up-exit_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out), awsui_awsui-motion-fade-out-0_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-block-start_155yk_jt7dv_206.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-block-start_155yk_jt7dv_206.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-block-start_155yk_jt7dv_206.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+.awsui_direction-button-wrapper-block-end_155yk_jt7dv_233.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+  animation: awsui_slide-down_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out), awsui_awsui-motion-fade-in_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-block-end_155yk_jt7dv_233.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-block-end_155yk_jt7dv_233.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-block-end_155yk_jt7dv_233.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_direction-button-wrapper-block-end_155yk_jt7dv_233.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: awsui_slide-down-exit_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out), awsui_awsui-motion-fade-out-0_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-block-end_155yk_jt7dv_233.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-block-end_155yk_jt7dv_233.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-block-end_155yk_jt7dv_233.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+.awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+  animation: awsui_slide-left_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out), awsui_awsui-motion-fade-in_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+  animation: awsui_slide-right_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out), awsui_awsui-motion-fade-in_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: awsui_slide-left-exit_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out), awsui_awsui-motion-fade-out-0_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: awsui_slide-right-exit_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out), awsui_awsui-motion-fade-out-0_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+.awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+  animation: awsui_slide-right_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out), awsui_awsui-motion-fade-in_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+  animation: awsui_slide-left_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out), awsui_awsui-motion-fade-in_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: awsui_slide-right-exit_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out), awsui_awsui-motion-fade-out-0_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: awsui_slide-left-exit_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out), awsui_awsui-motion-fade-out-0_155yk_jt7dv_1 var(--motion-duration-complex-wo6kj4, 270ms) var(--motion-easing-responsive-jm8d79, ease-out);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313.awsui_direction-button-wrapper-rtl_155yk_jt7dv_273.awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183:not(#\9) {
+  animation: none;
+  transition: none;
+}
+
+@keyframes awsui_slide-up_155yk_jt7dv_1 {
+  0% {
+    transform: translate(0, 20px);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+@keyframes awsui_slide-up-exit_155yk_jt7dv_1 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(0, 20px);
+  }
+}
+@keyframes awsui_slide-down_155yk_jt7dv_1 {
+  0% {
+    transform: translate(0, -20px);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+@keyframes awsui_slide-down-exit_155yk_jt7dv_1 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(0, -20px);
+  }
+}
+@keyframes awsui_slide-left_155yk_jt7dv_1 {
+  0% {
+    transform: translate(20px, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+@keyframes awsui_slide-left-exit_155yk_jt7dv_1 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(20px, 0);
+  }
+}
+@keyframes awsui_slide-right_155yk_jt7dv_1 {
+  0% {
+    transform: translate(-20px, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+@keyframes awsui_slide-right-exit_155yk_jt7dv_1 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(-20px, 0);
+  }
+}
+.awsui_drag-handle-wrapper_155yk_jt7dv_430:not(#\9) {
+  position: relative;
+  display: inline-block;
+}
+
+.awsui_portal-overlay_155yk_jt7dv_435:not(#\9) {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  pointer-events: none;
+  z-index: 7000;
+}
+
+.awsui_portal-overlay-contents_155yk_jt7dv_443:not(#\9) {
+  pointer-events: auto;
+}
+
+.awsui_drag-handle_155yk_jt7dv_430:not(#\9) {
+  position: relative;
+  display: flex;
+}
+
+.awsui_direction-button-wrapper_155yk_jt7dv_170:not(#\9) {
+  position: absolute;
+  block-size: var(--space-static-xl-ry540j, 24px);
+  inline-size: var(--space-static-xl-ry540j, 24px);
+  padding-block: var(--space-static-xxs-9qxzo2, 4px);
+  padding-inline: var(--space-static-xxs-9qxzo2, 4px);
+}
+
+.awsui_direction-button-wrapper-hidden_155yk_jt7dv_460:not(#\9) {
+  display: none;
+}
+
+.awsui_direction-button-wrapper-block-start_155yk_jt7dv_206:not(#\9) {
+  inset-block-start: calc(-1 * (var(--space-static-xl-ry540j, 24px) + 2 * var(--space-static-xxs-9qxzo2, 4px)));
+  inset-inline-start: calc(50% - (var(--space-static-xl-ry540j, 24px) + 2 * var(--space-static-xxs-9qxzo2, 4px)) / 2);
+}
+
+.awsui_direction-button-wrapper-block-end_155yk_jt7dv_233:not(#\9) {
+  inset-block-end: calc(-1 * (var(--space-static-xl-ry540j, 24px) + 2 * var(--space-static-xxs-9qxzo2, 4px)));
+  inset-inline-start: calc(50% - (var(--space-static-xl-ry540j, 24px) + 2 * var(--space-static-xxs-9qxzo2, 4px)) / 2);
+}
+
+.awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260:not(#\9) {
+  inset-inline-start: calc(-1 * (var(--space-static-xl-ry540j, 24px) + 2 * var(--space-static-xxs-9qxzo2, 4px)));
+  inset-block-start: calc(50% - (var(--space-static-xl-ry540j, 24px) + 2 * var(--space-static-xxs-9qxzo2, 4px)) / 2);
+}
+
+.awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313:not(#\9) {
+  inset-inline-end: calc(-1 * (var(--space-static-xl-ry540j, 24px) + 2 * var(--space-static-xxs-9qxzo2, 4px)));
+  inset-block-start: calc(50% - (var(--space-static-xl-ry540j, 24px) + 2 * var(--space-static-xxs-9qxzo2, 4px)) / 2);
+}
+
+.awsui_direction-button_155yk_jt7dv_170:not(#\9) {
+  position: absolute;
+  border-width: 0;
+  cursor: pointer;
+  display: inline-block;
+  box-sizing: border-box;
+  touch-action: manipulation;
+  inline-size: var(--space-static-xl-ry540j, 24px);
+  block-size: var(--space-static-xl-ry540j, 24px);
+  padding-block: var(--space-xxs-y2432o, 4px);
+  padding-inline: var(--space-xxs-y2432o, 4px);
+  border-start-start-radius: 50%;
+  border-start-end-radius: 50%;
+  border-end-start-radius: 50%;
+  border-end-end-radius: 50%;
+  background-color: var(--color-background-direction-button-default-5hblg2, #545b64);
+  color: var(--color-text-direction-button-default-6q1q04, #ffffff);
+  box-shadow: var(--shadow-dropdown-w4gfk2, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
+}
+.awsui_direction-button_155yk_jt7dv_170:not(#\9):not(.awsui_direction-button-disabled_155yk_jt7dv_503):hover {
+  background-color: var(--color-background-direction-button-hover-nuoi33, #414750);
+}
+.awsui_direction-button_155yk_jt7dv_170:not(#\9):not(.awsui_direction-button-disabled_155yk_jt7dv_503):active {
+  background-color: var(--color-background-direction-button-active-wssyfi, #2a2e33);
+}
+
+.awsui_direction-button-disabled_155yk_jt7dv_503:not(#\9) {
+  cursor: default;
+  background-color: var(--color-background-direction-button-disabled-m3uin1, #eaeded);
+  color: var(--color-text-direction-button-disabled-rx60rf, #aab7b8);
+}

package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js

@@ -0,0 +1,33 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_jt7dv_170",
+  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_jt7dv_180",
+  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_jt7dv_181",
+  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_jt7dv_182",
+  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_jt7dv_183",
+  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_jt7dv_206",
+  "slide-up": "awsui_slide-up_155yk_jt7dv_1",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_jt7dv_1",
+  "slide-up-exit": "awsui_slide-up-exit_155yk_jt7dv_1",
+  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_jt7dv_1",
+  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_jt7dv_233",
+  "slide-down": "awsui_slide-down_155yk_jt7dv_1",
+  "slide-down-exit": "awsui_slide-down-exit_155yk_jt7dv_1",
+  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_jt7dv_260",
+  "slide-left": "awsui_slide-left_155yk_jt7dv_1",
+  "direction-button-wrapper-rtl": "awsui_direction-button-wrapper-rtl_155yk_jt7dv_273",
+  "slide-right": "awsui_slide-right_155yk_jt7dv_1",
+  "slide-left-exit": "awsui_slide-left-exit_155yk_jt7dv_1",
+  "slide-right-exit": "awsui_slide-right-exit_155yk_jt7dv_1",
+  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_jt7dv_313",
+  "drag-handle-wrapper": "awsui_drag-handle-wrapper_155yk_jt7dv_430",
+  "portal-overlay": "awsui_portal-overlay_155yk_jt7dv_435",
+  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_jt7dv_443",
+  "drag-handle": "awsui_drag-handle_155yk_jt7dv_430",
+  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_jt7dv_460",
+  "direction-button": "awsui_direction-button_155yk_jt7dv_170",
+  "direction-button-disabled": "awsui_direction-button-disabled_155yk_jt7dv_503"
+};
+  

package/lib/internal/template/internal/environment.js

@@ -1,4 +1,4 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (9f361a13)";
+export var PACKAGE_VERSION = "3.0.0 (7ff86dc1)";
 export var THEME = "open-source-visual-refresh";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json

@@ -1,6 +1,6 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (9f361a13)",
+  "PACKAGE_VERSION": "3.0.0 (7ff86dc1)",
   "THEME": "default",
   "ALWAYS_VISUAL_REFRESH": false
 }