@cloudscape-design/components-themeable 3.0.251 → 3.0.253

package/lib/internal/template/internal/generated/theming/index.js

@@ -879,6 +879,10 @@ export var preset = {
         "light": "{colorGrey200}",
         "dark": "{colorGrey650}"
       },
+      "colorBackgroundLayoutPanelTriggerActive": {
+        "light": "{colorBlue900}",
+        "dark": "{colorBlue400}"
+      },
       "colorBackgroundLayoutToggleActive": {
         "light": "{colorGrey650}",
         "dark": "{colorGrey650}"
@@ -1195,6 +1199,10 @@ export var preset = {
         "light": "{colorGreyTransparentHeavy}",
         "dark": "{colorGreyTransparentHeavy}"
       },
+      "colorShadowLayoutPanelTrigger": {
+        "light": "{colorGrey300}",
+        "dark": "{colorGrey650}"
+      },
       "colorShadowMedium": {
         "light": "{colorGreyTransparent}",
         "dark": "{colorGreyTransparent}"
@@ -1527,6 +1535,14 @@ export var preset = {
         "light": "{colorBlue600}",
         "dark": "{colorBlue500}"
       },
+      "colorTextLayoutPanelTriggerHover": {
+        "light": "{colorBlue600}",
+        "dark": "{colorBlue500}"
+      },
+      "colorTextLayoutPanelTriggerActive": {
+        "light": "{colorWhite}",
+        "dark": "{colorGrey800}"
+      },
       "colorTextSmall": {
         "light": "{colorGrey550}",
         "dark": "{colorGrey450}"
@@ -1563,6 +1579,14 @@ export var preset = {
         "light": "{colorBlue200}",
         "dark": "{colorBlue600}"
       },
+      "colorDragPlaceholderActive": {
+        "light": "{colorGrey200}",
+        "dark": "{colorGrey550}"
+      },
+      "colorDragPlaceholderHover": {
+        "light": "{colorBlue200}",
+        "dark": "{colorBlue600}"
+      },
       "fontBodyMLineHeight": "22px",
       "fontBodyMSize": "14px",
       "fontBodySLetterSpacing": "0.005em",
@@ -2791,6 +2815,10 @@ export var preset = {
             "light": "{colorGrey650}",
             "dark": "{colorGrey650}"
           },
+          "colorBackgroundLayoutPanelTriggerActive": {
+            "light": "{colorBlue400}",
+            "dark": "{colorBlue400}"
+          },
           "colorBackgroundLayoutToggleActive": {
             "light": "{colorGrey650}",
             "dark": "{colorGrey650}"
@@ -3107,6 +3135,10 @@ export var preset = {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
           },
+          "colorShadowLayoutPanelTrigger": {
+            "light": "{colorGrey650}",
+            "dark": "{colorGrey650}"
+          },
           "colorShadowMedium": {
             "light": "{colorGreyTransparent}",
             "dark": "{colorGreyTransparent}"
@@ -3439,6 +3471,14 @@ export var preset = {
             "light": "{colorBlue500}",
             "dark": "{colorBlue500}"
           },
+          "colorTextLayoutPanelTriggerHover": {
+            "light": "{colorBlue500}",
+            "dark": "{colorBlue500}"
+          },
+          "colorTextLayoutPanelTriggerActive": {
+            "light": "{colorGrey800}",
+            "dark": "{colorGrey800}"
+          },
           "colorTextSmall": {
             "light": "{colorGrey450}",
             "dark": "{colorGrey450}"
@@ -3474,6 +3514,14 @@ export var preset = {
           "colorBoardPlaceholderHover": {
             "light": "{colorBlue600}",
             "dark": "{colorBlue600}"
+          },
+          "colorDragPlaceholderActive": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey550}"
+          },
+          "colorDragPlaceholderHover": {
+            "light": "{colorBlue600}",
+            "dark": "{colorBlue600}"
           }
         }
       },
@@ -3721,6 +3769,10 @@ export var preset = {
             "light": "{colorGrey650}",
             "dark": "{colorGrey650}"
           },
+          "colorBackgroundLayoutPanelTriggerActive": {
+            "light": "{colorBlue400}",
+            "dark": "{colorBlue400}"
+          },
           "colorBackgroundLayoutToggleActive": {
             "light": "{colorGrey650}",
             "dark": "{colorGrey650}"
@@ -4037,6 +4089,10 @@ export var preset = {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
           },
+          "colorShadowLayoutPanelTrigger": {
+            "light": "{colorGrey650}",
+            "dark": "{colorGrey650}"
+          },
           "colorShadowMedium": {
             "light": "{colorGreyTransparent}",
             "dark": "{colorGreyTransparent}"
@@ -4369,6 +4425,14 @@ export var preset = {
             "light": "{colorBlue500}",
             "dark": "{colorBlue500}"
           },
+          "colorTextLayoutPanelTriggerHover": {
+            "light": "{colorBlue500}",
+            "dark": "{colorBlue500}"
+          },
+          "colorTextLayoutPanelTriggerActive": {
+            "light": "{colorGrey800}",
+            "dark": "{colorGrey800}"
+          },
           "colorTextSmall": {
             "light": "{colorGrey450}",
             "dark": "{colorGrey450}"
@@ -4404,6 +4468,14 @@ export var preset = {
           "colorBoardPlaceholderHover": {
             "light": "{colorBlue600}",
             "dark": "{colorBlue600}"
+          },
+          "colorDragPlaceholderActive": {
+            "light": "{colorGrey550}",
+            "dark": "{colorGrey550}"
+          },
+          "colorDragPlaceholderHover": {
+            "light": "{colorBlue600}",
+            "dark": "{colorBlue600}"
           }
         }
       },
@@ -4591,6 +4663,10 @@ export var preset = {
             "light": "{colorGrey200}",
             "dark": "{colorGrey650}"
           },
+          "colorBackgroundLayoutPanelTriggerActive": {
+            "light": "{colorBlue900}",
+            "dark": "{colorBlue400}"
+          },
           "colorBackgroundLayoutToggleActive": {
             "light": "{colorGrey650}",
             "dark": "{colorGrey650}"
@@ -4907,6 +4983,10 @@ export var preset = {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
           },
+          "colorShadowLayoutPanelTrigger": {
+            "light": "{colorGrey300}",
+            "dark": "{colorGrey650}"
+          },
           "colorShadowMedium": {
             "light": "{colorGreyTransparent}",
             "dark": "{colorGreyTransparent}"
@@ -5239,6 +5319,14 @@ export var preset = {
             "light": "{colorBlue600}",
             "dark": "{colorBlue500}"
           },
+          "colorTextLayoutPanelTriggerHover": {
+            "light": "{colorBlue600}",
+            "dark": "{colorBlue500}"
+          },
+          "colorTextLayoutPanelTriggerActive": {
+            "light": "{colorWhite}",
+            "dark": "{colorGrey800}"
+          },
           "colorTextSmall": {
             "light": "{colorGrey550}",
             "dark": "{colorGrey450}"
@@ -5274,6 +5362,14 @@ export var preset = {
           "colorBoardPlaceholderHover": {
             "light": "{colorBlue200}",
             "dark": "{colorBlue600}"
+          },
+          "colorDragPlaceholderActive": {
+            "light": "{colorGrey200}",
+            "dark": "{colorGrey550}"
+          },
+          "colorDragPlaceholderHover": {
+            "light": "{colorBlue200}",
+            "dark": "{colorBlue600}"
           }
         }
       },
@@ -5461,6 +5557,10 @@ export var preset = {
             "light": "{colorGrey200}",
             "dark": "{colorGrey650}"
           },
+          "colorBackgroundLayoutPanelTriggerActive": {
+            "light": "{colorBlue900}",
+            "dark": "{colorBlue400}"
+          },
           "colorBackgroundLayoutToggleActive": {
             "light": "{colorGrey650}",
             "dark": "{colorGrey650}"
@@ -5777,6 +5877,10 @@ export var preset = {
             "light": "{colorGreyTransparentHeavy}",
             "dark": "{colorGreyTransparentHeavy}"
           },
+          "colorShadowLayoutPanelTrigger": {
+            "light": "{colorGrey300}",
+            "dark": "{colorGrey650}"
+          },
           "colorShadowMedium": {
             "light": "{colorGreyTransparent}",
             "dark": "{colorGreyTransparent}"
@@ -6109,6 +6213,14 @@ export var preset = {
             "light": "{colorBlue600}",
             "dark": "{colorBlue500}"
           },
+          "colorTextLayoutPanelTriggerHover": {
+            "light": "{colorBlue600}",
+            "dark": "{colorBlue500}"
+          },
+          "colorTextLayoutPanelTriggerActive": {
+            "light": "{colorWhite}",
+            "dark": "{colorGrey800}"
+          },
           "colorTextSmall": {
             "light": "{colorGrey550}",
             "dark": "{colorGrey450}"
@@ -6144,6 +6256,14 @@ export var preset = {
           "colorBoardPlaceholderHover": {
             "light": "{colorBlue200}",
             "dark": "{colorBlue600}"
+          },
+          "colorDragPlaceholderActive": {
+            "light": "{colorGrey200}",
+            "dark": "{colorGrey550}"
+          },
+          "colorDragPlaceholderHover": {
+            "light": "{colorBlue200}",
+            "dark": "{colorBlue600}"
           }
         }
       }
@@ -6348,6 +6468,7 @@ export var preset = {
       "colorBackgroundLayoutMobilePanel": "color",
       "colorBackgroundLayoutPanelContent": "color",
       "colorBackgroundLayoutPanelHover": "color",
+      "colorBackgroundLayoutPanelTriggerActive": "color",
       "colorBackgroundLayoutToggleActive": "color",
       "colorBackgroundLayoutToggleDefault": "color",
       "colorBackgroundLayoutToggleHover": "color",
@@ -6427,6 +6548,7 @@ export var preset = {
       "colorForegroundControlDefault": "color",
       "colorForegroundControlDisabled": "color",
       "colorShadowDefault": "color",
+      "colorShadowLayoutPanelTrigger": "color",
       "colorShadowMedium": "color",
       "colorShadowSide": "color",
       "colorStrokeCodeEditorResizeHandler": "color",
@@ -6510,6 +6632,8 @@ export var preset = {
       "colorTextSegmentActive": "color",
       "colorTextSegmentDefault": "color",
       "colorTextSegmentHover": "color",
+      "colorTextLayoutPanelTriggerHover": "color",
+      "colorTextLayoutPanelTriggerActive": "color",
       "colorTextSmall": "color",
       "colorTextStatusError": "color",
       "colorTextStatusInactive": "color",
@@ -6519,6 +6643,8 @@ export var preset = {
       "colorTextTopNavigationTitle": "color",
       "colorBoardPlaceholderActive": "color",
       "colorBoardPlaceholderHover": "color",
+      "colorDragPlaceholderActive": "color",
+      "colorDragPlaceholderHover": "color",
       "motionDurationExtraFast": "motion",
       "motionDurationExtraSlow": "motion",
       "motionDurationFast": "motion",
@@ -7070,6 +7196,8 @@ export var preset = {
     "colorTextStatusWarning",
     "colorBoardPlaceholderActive",
     "colorBoardPlaceholderHover",
+    "colorDragPlaceholderActive",
+    "colorDragPlaceholderHover",
     "fontFamilyBase",
     "fontFamilyMonospace",
     "borderRadiusAlert",
@@ -7365,6 +7493,7 @@ export var preset = {
     "colorBackgroundLayoutMobilePanel": "color-background-layout-mobile-panel",
     "colorBackgroundLayoutPanelContent": "color-background-layout-panel-content",
     "colorBackgroundLayoutPanelHover": "color-background-layout-panel-hover",
+    "colorBackgroundLayoutPanelTriggerActive": "color-background-layout-panel-trigger-active",
     "colorBackgroundLayoutToggleActive": "color-background-layout-toggle-active",
     "colorBackgroundLayoutToggleDefault": "color-background-layout-toggle-default",
     "colorBackgroundLayoutToggleHover": "color-background-layout-toggle-hover",
@@ -7444,6 +7573,7 @@ export var preset = {
     "colorForegroundControlDefault": "color-foreground-control-default",
     "colorForegroundControlDisabled": "color-foreground-control-disabled",
     "colorShadowDefault": "color-shadow-default",
+    "colorShadowLayoutPanelTrigger": "color-shadow-layout-panel-trigger",
     "colorShadowMedium": "color-shadow-medium",
     "colorShadowSide": "color-shadow-side",
     "colorStrokeCodeEditorResizeHandler": "color-stroke-code-editor-resize-handler",
@@ -7527,6 +7657,8 @@ export var preset = {
     "colorTextSegmentActive": "color-text-segment-active",
     "colorTextSegmentDefault": "color-text-segment-default",
     "colorTextSegmentHover": "color-text-segment-hover",
+    "colorTextLayoutPanelTriggerHover": "color-text-layout-panel-trigger-hover",
+    "colorTextLayoutPanelTriggerActive": "color-text-layout-panel-trigger-active",
     "colorTextSmall": "color-text-small",
     "colorTextStatusError": "color-text-status-error",
     "colorTextStatusInactive": "color-text-status-inactive",
@@ -7536,6 +7668,8 @@ export var preset = {
     "colorTextTopNavigationTitle": "color-text-top-navigation-title",
     "colorBoardPlaceholderActive": "color-board-placeholder-active",
     "colorBoardPlaceholderHover": "color-board-placeholder-hover",
+    "colorDragPlaceholderActive": "color-drag-placeholder-active",
+    "colorDragPlaceholderHover": "color-drag-placeholder-hover",
     "fontBodyMLineHeight": "font-body-m-line-height",
     "fontBodyMSize": "font-body-m-size",
     "fontBodySLetterSpacing": "font-body-s-letter-spacing",
@@ -8019,6 +8153,7 @@ export var preset = {
     "colorBackgroundLayoutMobilePanel": "--color-background-layout-mobile-panel-9vweqk",
     "colorBackgroundLayoutPanelContent": "--color-background-layout-panel-content-808qum",
     "colorBackgroundLayoutPanelHover": "--color-background-layout-panel-hover-0bg3gq",
+    "colorBackgroundLayoutPanelTriggerActive": "--color-background-layout-panel-trigger-active-uf4o0r",
     "colorBackgroundLayoutToggleActive": "--color-background-layout-toggle-active-d15dki",
     "colorBackgroundLayoutToggleDefault": "--color-background-layout-toggle-default-f9hnkv",
     "colorBackgroundLayoutToggleHover": "--color-background-layout-toggle-hover-gi0e0b",
@@ -8098,6 +8233,7 @@ export var preset = {
     "colorForegroundControlDefault": "--color-foreground-control-default-7ajdem",
     "colorForegroundControlDisabled": "--color-foreground-control-disabled-v6a97u",
     "colorShadowDefault": "--color-shadow-default-3se70f",
+    "colorShadowLayoutPanelTrigger": "--color-shadow-layout-panel-trigger-t4yazw",
     "colorShadowMedium": "--color-shadow-medium-02bwpe",
     "colorShadowSide": "--color-shadow-side-07co14",
     "colorStrokeCodeEditorResizeHandler": "--color-stroke-code-editor-resize-handler-lop07p",
@@ -8181,6 +8317,8 @@ export var preset = {
     "colorTextSegmentActive": "--color-text-segment-active-gc2jjl",
     "colorTextSegmentDefault": "--color-text-segment-default-bf7rka",
     "colorTextSegmentHover": "--color-text-segment-hover-5pccvg",
+    "colorTextLayoutPanelTriggerHover": "--color-text-layout-panel-trigger-hover-yw2kb4",
+    "colorTextLayoutPanelTriggerActive": "--color-text-layout-panel-trigger-active-mt4zu0",
     "colorTextSmall": "--color-text-small-le1y42",
     "colorTextStatusError": "--color-text-status-error-5sesl6",
     "colorTextStatusInactive": "--color-text-status-inactive-5ei55p",
@@ -8190,6 +8328,8 @@ export var preset = {
     "colorTextTopNavigationTitle": "--color-text-top-navigation-title-oypxe3",
     "colorBoardPlaceholderActive": "--color-board-placeholder-active-vaxzdf",
     "colorBoardPlaceholderHover": "--color-board-placeholder-hover-v1s7kq",
+    "colorDragPlaceholderActive": "--color-drag-placeholder-active-fkpj7i",
+    "colorDragPlaceholderHover": "--color-drag-placeholder-hover-3ohnz1",
     "fontBodyMLineHeight": "--font-body-m-line-height-i7xxvv",
     "fontBodyMSize": "--font-body-m-size-sregvd",
     "fontBodySLetterSpacing": "--font-body-s-letter-spacing-cy0oxj",

package/lib/internal/template/internal/hooks/focus-visible/index.d.ts

@@ -1,6 +1,3 @@
-export default function useFocusVisible(): {
-    'data-awsui-focus-visible': true;
-} | {
-    'data-awsui-focus-visible'?: undefined;
-};
+export declare function isModifierKey(event: KeyboardEvent): boolean;
+export default function useFocusVisible(): void;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/internal/hooks/focus-visible/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AA2BA,MAAM,CAAC,OAAO,UAAU,eAAe;;;;EAGtC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AAKA,wBAAgB,aAAa,CAAC,KAAK,EAAE,aAAa,WAIjD;AAgCD,MAAM,CAAC,OAAO,UAAU,eAAe,SAatC"}

package/lib/internal/template/internal/hooks/focus-visible/index.js

@@ -1,29 +1,49 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+import { useEffect } from 'react';
 import { KeyCode } from '../../keycode';
-import { createSingletonState } from '../use-singleton-handler';
-const useFocusSingleton = createSingletonState({
-    initialState: false,
-    factory: setIsKeyboard => {
-        const handleMousedown = () => setIsKeyboard(false);
-        const handleKeydown = (event) => {
-            // we do not want to highlight focused element
-            // when special keys are pressed
-            const isSpecialKey = [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;
-            if (!isSpecialKey) {
-                setIsKeyboard(true);
-            }
-        };
-        document.addEventListener('mousedown', handleMousedown);
-        document.addEventListener('keydown', handleKeydown);
+export function isModifierKey(event) {
+    // we do not want to highlight focused element
+    // when special keys are pressed
+    return [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;
+}
+function setIsKeyboard(active) {
+    if (active) {
+        document.body.setAttribute('data-awsui-focus-visible', 'true');
+    }
+    else {
+        document.body.removeAttribute('data-awsui-focus-visible');
+    }
+}
+function handleMousedown() {
+    return setIsKeyboard(false);
+}
+function handleKeydown(event) {
+    if (!isModifierKey(event)) {
+        setIsKeyboard(true);
+    }
+}
+let componentsCount = 0;
+function addListeners() {
+    document.addEventListener('mousedown', handleMousedown);
+    document.addEventListener('keydown', handleKeydown);
+}
+function removeListeners() {
+    document.removeEventListener('mousedown', handleMousedown);
+    document.removeEventListener('keydown', handleKeydown);
+}
+export default function useFocusVisible() {
+    useEffect(() => {
+        if (componentsCount === 0) {
+            addListeners();
+        }
+        componentsCount++;
         return () => {
-            document.removeEventListener('mousedown', handleMousedown);
-            document.removeEventListener('keydown', handleKeydown);
+            componentsCount--;
+            if (componentsCount === 0) {
+                removeListeners();
+            }
         };
-    },
-});
-export default function useFocusVisible() {
-    const visible = useFocusSingleton();
-    return visible ? { 'data-awsui-focus-visible': visible } : {};
+    }, []);
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/hooks/focus-visible/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,MAAM,iBAAiB,GAAG,oBAAoB,CAAU;IACtD,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,aAAa,CAAC,EAAE;QACvB,MAAM,eAAe,GAAG,GAAG,EAAE,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACnD,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,8CAA8C;YAC9C,gCAAgC;YAChC,MAAM,YAAY,GAAG,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;YAE7G,IAAI,CAAC,YAAY,EAAE;gBACjB,aAAa,CAAC,IAAI,CAAC,CAAC;aACrB;QACH,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;QACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACpD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;YAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QACzD,CAAC,CAAC;IACJ,CAAC;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,eAAe;IACrC,MAAM,OAAO,GAAG,iBAAiB,EAAE,CAAC;IACpC,OAAO,OAAO,CAAC,CAAC,CAAC,EAAE,0BAA0B,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;AAChE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { KeyCode } from '../../keycode';\nimport { createSingletonState } from '../use-singleton-handler';\n\nconst useFocusSingleton = createSingletonState<boolean>({\n  initialState: false,\n  factory: setIsKeyboard => {\n    const handleMousedown = () => setIsKeyboard(false);\n    const handleKeydown = (event: KeyboardEvent) => {\n      // we do not want to highlight focused element\n      // when special keys are pressed\n      const isSpecialKey = [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;\n\n      if (!isSpecialKey) {\n        setIsKeyboard(true);\n      }\n    };\n    document.addEventListener('mousedown', handleMousedown);\n    document.addEventListener('keydown', handleKeydown);\n    return () => {\n      document.removeEventListener('mousedown', handleMousedown);\n      document.removeEventListener('keydown', handleKeydown);\n    };\n  },\n});\n\nexport default function useFocusVisible() {\n  const visible = useFocusSingleton();\n  return visible ? { 'data-awsui-focus-visible': visible } : {};\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/focus-visible/index.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAExC,MAAM,UAAU,aAAa,CAAC,KAAoB;IAChD,8CAA8C;IAC9C,gCAAgC;IAChC,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,OAAO,CAAC,GAAG,EAAE,OAAO,CAAC,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;AACjG,CAAC;AAED,SAAS,aAAa,CAAC,MAAe;IACpC,IAAI,MAAM,EAAE;QACV,QAAQ,CAAC,IAAI,CAAC,YAAY,CAAC,0BAA0B,EAAE,MAAM,CAAC,CAAC;KAChE;SAAM;QACL,QAAQ,CAAC,IAAI,CAAC,eAAe,CAAC,0BAA0B,CAAC,CAAC;KAC3D;AACH,CAAC;AAED,SAAS,eAAe;IACtB,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC;AAED,SAAS,aAAa,CAAC,KAAoB;IACzC,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,EAAE;QACzB,aAAa,CAAC,IAAI,CAAC,CAAC;KACrB;AACH,CAAC;AAED,IAAI,eAAe,GAAG,CAAC,CAAC;AAExB,SAAS,YAAY;IACnB,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IACxD,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AACtD,CAAC;AAED,SAAS,eAAe;IACtB,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAC3D,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;AACzD,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,eAAe;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,KAAK,CAAC,EAAE;YACzB,YAAY,EAAE,CAAC;SAChB;QACD,eAAe,EAAE,CAAC;QAClB,OAAO,GAAG,EAAE;YACV,eAAe,EAAE,CAAC;YAClB,IAAI,eAAe,KAAK,CAAC,EAAE;gBACzB,eAAe,EAAE,CAAC;aACnB;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;AACT,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { useEffect } from 'react';\nimport { KeyCode } from '../../keycode';\n\nexport function isModifierKey(event: KeyboardEvent) {\n  // we do not want to highlight focused element\n  // when special keys are pressed\n  return [KeyCode.shift, KeyCode.alt, KeyCode.control, KeyCode.meta].indexOf(event.keyCode) > -1;\n}\n\nfunction setIsKeyboard(active: boolean) {\n  if (active) {\n    document.body.setAttribute('data-awsui-focus-visible', 'true');\n  } else {\n    document.body.removeAttribute('data-awsui-focus-visible');\n  }\n}\n\nfunction handleMousedown() {\n  return setIsKeyboard(false);\n}\n\nfunction handleKeydown(event: KeyboardEvent) {\n  if (!isModifierKey(event)) {\n    setIsKeyboard(true);\n  }\n}\n\nlet componentsCount = 0;\n\nfunction addListeners() {\n  document.addEventListener('mousedown', handleMousedown);\n  document.addEventListener('keydown', handleKeydown);\n}\n\nfunction removeListeners() {\n  document.removeEventListener('mousedown', handleMousedown);\n  document.removeEventListener('keydown', handleKeydown);\n}\n\nexport default function useFocusVisible() {\n  useEffect(() => {\n    if (componentsCount === 0) {\n      addListeners();\n    }\n    componentsCount++;\n    return () => {\n      componentsCount--;\n      if (componentsCount === 0) {\n        removeListeners();\n      }\n    };\n  }, []);\n}\n"]}

package/lib/internal/template/internal/hooks/use-base-component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAKzC,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;CAClD;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,GAAG,GAAG,EAAE,aAAa,EAAE,MAAM;;EAItE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAMzC,MAAM,WAAW,0BAA0B;IACzC,iBAAiB,CAAC,EAAE,gBAAgB,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;CAClD;AAED;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,CAAC,GAAG,GAAG,EAAE,aAAa,EAAE,MAAM;;EAKtE"}

package/lib/internal/template/internal/hooks/use-base-component/index.js

@@ -1,6 +1,7 @@
 import { useComponentMetadata } from '@cloudscape-design/component-toolkit/internal';
 import { useTelemetry } from '../use-telemetry';
 import { PACKAGE_VERSION } from '../../environment';
+import useFocusVisible from '../focus-visible';
 /**
  * This hook is used for components which are exported to customers. The returned __internalRootRef needs to be
  * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this
@@ -8,6 +9,7 @@ import { PACKAGE_VERSION } from '../../environment';
  */
 export default function useBaseComponent(componentName) {
     useTelemetry(componentName);
+    useFocusVisible();
     const elementRef = useComponentMetadata(componentName, PACKAGE_VERSION);
     return { __internalRootRef: elementRef };
 }

package/lib/internal/template/internal/hooks/use-base-component/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAMpD;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAU,aAAqB;IACrE,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5B,MAAM,UAAU,GAAG,oBAAoB,CAAI,aAAa,EAAE,eAAe,CAAC,CAAC;IAC3E,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC;AAC3C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject } from 'react';\nimport { useComponentMetadata } from '@cloudscape-design/component-toolkit/internal';\nimport { useTelemetry } from '../use-telemetry';\nimport { PACKAGE_VERSION } from '../../environment';\n\nexport interface InternalBaseComponentProps {\n  __internalRootRef?: MutableRefObject<any> | null;\n}\n\n/**\n * This hook is used for components which are exported to customers. The returned __internalRootRef needs to be\n * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this\n * root DOM node and emits the telemetry for this component.\n */\nexport default function useBaseComponent<T = any>(componentName: string) {\n  useTelemetry(componentName);\n  const elementRef = useComponentMetadata<T>(componentName, PACKAGE_VERSION);\n  return { __internalRootRef: elementRef };\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["internal/hooks/use-base-component/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,oBAAoB,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,eAAe,MAAM,kBAAkB,CAAC;AAM/C;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAU,aAAqB;IACrE,YAAY,CAAC,aAAa,CAAC,CAAC;IAC5B,eAAe,EAAE,CAAC;IAClB,MAAM,UAAU,GAAG,oBAAoB,CAAI,aAAa,EAAE,eAAe,CAAC,CAAC;IAC3E,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,CAAC;AAC3C,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { MutableRefObject } from 'react';\nimport { useComponentMetadata } from '@cloudscape-design/component-toolkit/internal';\nimport { useTelemetry } from '../use-telemetry';\nimport { PACKAGE_VERSION } from '../../environment';\nimport useFocusVisible from '../focus-visible';\n\nexport interface InternalBaseComponentProps {\n  __internalRootRef?: MutableRefObject<any> | null;\n}\n\n/**\n * This hook is used for components which are exported to customers. The returned __internalRootRef needs to be\n * attached to the (internal) component's root DOM node. The hook takes care of attaching the metadata to this\n * root DOM node and emits the telemetry for this component.\n */\nexport default function useBaseComponent<T = any>(componentName: string) {\n  useTelemetry(componentName);\n  useFocusVisible();\n  const elementRef = useComponentMetadata<T>(componentName, PACKAGE_VERSION);\n  return { __internalRootRef: elementRef };\n}\n"]}

package/lib/internal/template/link/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAStC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAUlF,QAAA,MAAM,YAAY;cAHJ,SAAS,CAAC,SAAS,CAAC,GAAG,gBAAgB,GAAG,MAAM,GAAG,UAAU;uCA+G1E,CAAC;AAqBF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAQtC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAUlF,QAAA,MAAM,YAAY;cAHJ,SAAS,CAAC,SAAS,CAAC,GAAG,gBAAgB,GAAG,MAAM,GAAG,UAAU;uCA6G1E,CAAC;AAqBF,eAAe,YAAY,CAAC"}

package/lib/internal/template/link/internal.js

@@ -5,7 +5,6 @@ import React, { useRef } from 'react';
 import clsx from 'clsx';
 import InternalIcon from '../icon/internal';
 import styles from './styles.css.js';
-import useFocusVisible from '../internal/hooks/focus-visible';
 import { getBaseProps } from '../internal/base-component';
 import { fireCancelableEvent, isPlainLeftClick } from '../internal/events';
 import useForwardFocus from '../internal/hooks/forward-focus';
@@ -19,7 +18,6 @@ const InternalLink = React.forwardRef((_a, ref) => {
     const isButton = !href;
     const specialStyles = ['top-navigation', 'link', 'recovery'];
     const hasSpecialStyle = specialStyles.indexOf(variant) > -1;
-    const focusVisible = useFocusVisible();
     const baseProps = getBaseProps(props);
     const anchorTarget = target !== null && target !== void 0 ? target : (external ? '_blank' : undefined);
     const anchorRel = rel !== null && rel !== void 0 ? rel : (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);
@@ -45,7 +43,7 @@ const InternalLink = React.forwardRef((_a, ref) => {
     useForwardFocus(ref, linkRef);
     // Visual refresh should only add styles to buttons that don't already have unique styles (e.g. primary/secondary variants)
     const applyButtonStyles = isButton && isVisualRefresh && !hasSpecialStyle;
-    const sharedProps = Object.assign(Object.assign(Object.assign({}, focusVisible), baseProps), { 
+    const sharedProps = Object.assign(Object.assign({}, baseProps), { 
         // https://github.com/microsoft/TypeScript/issues/36659
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         ref: useMergeRefs(linkRef, __internalRootRef), className: clsx(styles.link, baseProps.className, applyButtonStyles ? styles.button : null, styles[getVariantStyle(variant)], styles[getFontSizeStyle(variant, fontSize)], styles[getColorStyle(variant, color)]), 'aria-label': ariaLabel });

package/lib/internal/template/link/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport styles from './styles.css.js';\nimport useFocusVisible from '../internal/hooks/focus-visible';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { KeyCode } from '../internal/keycode';\nimport { LinkProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\n\ntype InternalLinkProps = InternalBaseComponentProps &\n  Omit<LinkProps, 'variant'> & {\n    variant?: LinkProps['variant'] | 'top-navigation' | 'link' | 'recovery';\n  };\n\nconst InternalLink = React.forwardRef(\n  (\n    {\n      variant = 'secondary',\n      fontSize = 'body-m',\n      color = 'normal',\n      external = false,\n      target,\n      href,\n      rel,\n      ariaLabel,\n      externalIconAriaLabel,\n      onFollow,\n      children,\n      __internalRootRef = null,\n      ...props\n    }: InternalLinkProps,\n    ref: React.Ref<LinkProps.Ref>\n  ) => {\n    checkSafeUrl('Link', href);\n    const isButton = !href;\n    const specialStyles = ['top-navigation', 'link', 'recovery'];\n    const hasSpecialStyle = specialStyles.indexOf(variant) > -1;\n\n    const focusVisible = useFocusVisible();\n    const baseProps = getBaseProps(props);\n    const anchorTarget = target ?? (external ? '_blank' : undefined);\n    const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n\n    const fireFollowEvent = (event: React.SyntheticEvent) => {\n      fireCancelableEvent(onFollow, { href, external, target: anchorTarget }, event);\n    };\n\n    const handleLinkClick = (event: React.MouseEvent) => {\n      if (isPlainLeftClick(event)) {\n        fireFollowEvent(event);\n      }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent) => {\n      fireFollowEvent(event);\n    };\n\n    const handleButtonKeyDown = (event: React.KeyboardEvent) => {\n      if (event.keyCode === KeyCode.space || event.keyCode === KeyCode.enter) {\n        event.preventDefault();\n        fireFollowEvent(event);\n      }\n    };\n\n    const linkRef = useRef<HTMLElement>(null);\n    const isVisualRefresh = useVisualRefresh();\n    useForwardFocus(ref, linkRef);\n\n    // Visual refresh should only add styles to buttons that don't already have unique styles (e.g. primary/secondary variants)\n    const applyButtonStyles = isButton && isVisualRefresh && !hasSpecialStyle;\n\n    const sharedProps = {\n      ...focusVisible,\n      ...baseProps,\n      // https://github.com/microsoft/TypeScript/issues/36659\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref: useMergeRefs(linkRef as any, __internalRootRef),\n      className: clsx(\n        styles.link,\n        baseProps.className,\n        applyButtonStyles ? styles.button : null,\n        styles[getVariantStyle(variant)],\n        styles[getFontSizeStyle(variant, fontSize)],\n        styles[getColorStyle(variant, color)]\n      ),\n      'aria-label': ariaLabel,\n    };\n\n    const content = (\n      <>\n        {children}\n        {external && (\n          <span className={styles['icon-wrapper']}>\n            &nbsp;\n            <span\n              className={styles.icon}\n              aria-label={externalIconAriaLabel}\n              role={externalIconAriaLabel ? 'img' : undefined}\n            >\n              <InternalIcon name=\"external\" size=\"inherit\" />\n            </span>\n          </span>\n        )}\n      </>\n    );\n\n    if (isButton) {\n      return (\n        <a {...sharedProps} role=\"button\" tabIndex={0} onKeyDown={handleButtonKeyDown} onClick={handleButtonClick}>\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      // we dynamically set proper rel in the code above\n      // eslint-disable-next-line react/jsx-no-target-blank\n      <a {...sharedProps} target={anchorTarget} rel={anchorRel} href={href} onClick={handleLinkClick}>\n        {content}\n      </a>\n    );\n  }\n);\n\nfunction getVariantStyle(variant: Exclude<InternalLinkProps['variant'], undefined>) {\n  return `variant-${variant.replace(/^awsui-/, '')}`;\n}\n\nfunction getFontSizeStyle(variant: InternalLinkProps['variant'], fontSize: InternalLinkProps['fontSize']) {\n  switch (variant) {\n    case 'info':\n      return 'font-size-body-s';\n    case 'awsui-value-large':\n      return 'font-size-display-l';\n    default:\n      return `font-size-${fontSize}`;\n  }\n}\n\nfunction getColorStyle(variant: InternalLinkProps['variant'], color: InternalLinkProps['color']) {\n  return `color-${variant === 'info' ? 'normal' : color}`;\n}\n\nexport default InternalLink;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["link/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\nimport InternalIcon from '../icon/internal';\nimport styles from './styles.css.js';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireCancelableEvent, isPlainLeftClick } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { KeyCode } from '../internal/keycode';\nimport { LinkProps } from './interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\n\ntype InternalLinkProps = InternalBaseComponentProps &\n  Omit<LinkProps, 'variant'> & {\n    variant?: LinkProps['variant'] | 'top-navigation' | 'link' | 'recovery';\n  };\n\nconst InternalLink = React.forwardRef(\n  (\n    {\n      variant = 'secondary',\n      fontSize = 'body-m',\n      color = 'normal',\n      external = false,\n      target,\n      href,\n      rel,\n      ariaLabel,\n      externalIconAriaLabel,\n      onFollow,\n      children,\n      __internalRootRef = null,\n      ...props\n    }: InternalLinkProps,\n    ref: React.Ref<LinkProps.Ref>\n  ) => {\n    checkSafeUrl('Link', href);\n    const isButton = !href;\n    const specialStyles = ['top-navigation', 'link', 'recovery'];\n    const hasSpecialStyle = specialStyles.indexOf(variant) > -1;\n\n    const baseProps = getBaseProps(props);\n    const anchorTarget = target ?? (external ? '_blank' : undefined);\n    const anchorRel = rel ?? (anchorTarget === '_blank' ? 'noopener noreferrer' : undefined);\n\n    const fireFollowEvent = (event: React.SyntheticEvent) => {\n      fireCancelableEvent(onFollow, { href, external, target: anchorTarget }, event);\n    };\n\n    const handleLinkClick = (event: React.MouseEvent) => {\n      if (isPlainLeftClick(event)) {\n        fireFollowEvent(event);\n      }\n    };\n\n    const handleButtonClick = (event: React.MouseEvent) => {\n      fireFollowEvent(event);\n    };\n\n    const handleButtonKeyDown = (event: React.KeyboardEvent) => {\n      if (event.keyCode === KeyCode.space || event.keyCode === KeyCode.enter) {\n        event.preventDefault();\n        fireFollowEvent(event);\n      }\n    };\n\n    const linkRef = useRef<HTMLElement>(null);\n    const isVisualRefresh = useVisualRefresh();\n    useForwardFocus(ref, linkRef);\n\n    // Visual refresh should only add styles to buttons that don't already have unique styles (e.g. primary/secondary variants)\n    const applyButtonStyles = isButton && isVisualRefresh && !hasSpecialStyle;\n\n    const sharedProps = {\n      ...baseProps,\n      // https://github.com/microsoft/TypeScript/issues/36659\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref: useMergeRefs(linkRef as any, __internalRootRef),\n      className: clsx(\n        styles.link,\n        baseProps.className,\n        applyButtonStyles ? styles.button : null,\n        styles[getVariantStyle(variant)],\n        styles[getFontSizeStyle(variant, fontSize)],\n        styles[getColorStyle(variant, color)]\n      ),\n      'aria-label': ariaLabel,\n    };\n\n    const content = (\n      <>\n        {children}\n        {external && (\n          <span className={styles['icon-wrapper']}>\n            &nbsp;\n            <span\n              className={styles.icon}\n              aria-label={externalIconAriaLabel}\n              role={externalIconAriaLabel ? 'img' : undefined}\n            >\n              <InternalIcon name=\"external\" size=\"inherit\" />\n            </span>\n          </span>\n        )}\n      </>\n    );\n\n    if (isButton) {\n      return (\n        <a {...sharedProps} role=\"button\" tabIndex={0} onKeyDown={handleButtonKeyDown} onClick={handleButtonClick}>\n          {content}\n        </a>\n      );\n    }\n\n    return (\n      // we dynamically set proper rel in the code above\n      // eslint-disable-next-line react/jsx-no-target-blank\n      <a {...sharedProps} target={anchorTarget} rel={anchorRel} href={href} onClick={handleLinkClick}>\n        {content}\n      </a>\n    );\n  }\n);\n\nfunction getVariantStyle(variant: Exclude<InternalLinkProps['variant'], undefined>) {\n  return `variant-${variant.replace(/^awsui-/, '')}`;\n}\n\nfunction getFontSizeStyle(variant: InternalLinkProps['variant'], fontSize: InternalLinkProps['fontSize']) {\n  switch (variant) {\n    case 'info':\n      return 'font-size-body-s';\n    case 'awsui-value-large':\n      return 'font-size-display-l';\n    default:\n      return `font-size-${fontSize}`;\n  }\n}\n\nfunction getColorStyle(variant: InternalLinkProps['variant'], color: InternalLinkProps['color']) {\n  return `color-${variant === 'info' ? 'normal' : color}`;\n}\n\nexport default InternalLink;\n"]}

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

@@ -1,25 +1,25 @@
 
     import './styles.scoped.css';
     export default {
-  "link": "awsui_link_4c84z_1vkq1_93",
-  "variant-secondary": "awsui_variant-secondary_4c84z_1vkq1_140",
-  "variant-primary": "awsui_variant-primary_4c84z_1vkq1_177",
-  "variant-info": "awsui_variant-info_4c84z_1vkq1_212",
-  "variant-value-large": "awsui_variant-value-large_4c84z_1vkq1_249",
-  "variant-top-navigation": "awsui_variant-top-navigation_4c84z_1vkq1_283",
-  "variant-recovery": "awsui_variant-recovery_4c84z_1vkq1_318",
-  "button": "awsui_button_4c84z_1vkq1_353",
-  "color-inverted": "awsui_color-inverted_4c84z_1vkq1_390",
-  "font-size-body-s": "awsui_font-size-body-s_4c84z_1vkq1_409",
-  "font-size-body-m": "awsui_font-size-body-m_4c84z_1vkq1_414",
-  "font-size-heading-xs": "awsui_font-size-heading-xs_4c84z_1vkq1_418",
-  "font-size-heading-s": "awsui_font-size-heading-s_4c84z_1vkq1_422",
-  "font-size-heading-m": "awsui_font-size-heading-m_4c84z_1vkq1_427",
-  "font-size-heading-l": "awsui_font-size-heading-l_4c84z_1vkq1_432",
-  "font-size-heading-xl": "awsui_font-size-heading-xl_4c84z_1vkq1_437",
-  "font-size-display-l": "awsui_font-size-display-l_4c84z_1vkq1_442",
-  "font-size-inherit": "awsui_font-size-inherit_4c84z_1vkq1_447",
-  "icon-wrapper": "awsui_icon-wrapper_4c84z_1vkq1_453",
-  "icon": "awsui_icon_4c84z_1vkq1_453"
+  "link": "awsui_link_4c84z_fqszx_93",
+  "variant-secondary": "awsui_variant-secondary_4c84z_fqszx_140",
+  "variant-primary": "awsui_variant-primary_4c84z_fqszx_177",
+  "variant-info": "awsui_variant-info_4c84z_fqszx_212",
+  "variant-value-large": "awsui_variant-value-large_4c84z_fqszx_249",
+  "variant-top-navigation": "awsui_variant-top-navigation_4c84z_fqszx_283",
+  "variant-recovery": "awsui_variant-recovery_4c84z_fqszx_318",
+  "button": "awsui_button_4c84z_fqszx_353",
+  "color-inverted": "awsui_color-inverted_4c84z_fqszx_390",
+  "font-size-body-s": "awsui_font-size-body-s_4c84z_fqszx_409",
+  "font-size-body-m": "awsui_font-size-body-m_4c84z_fqszx_414",
+  "font-size-heading-xs": "awsui_font-size-heading-xs_4c84z_fqszx_418",
+  "font-size-heading-s": "awsui_font-size-heading-s_4c84z_fqszx_422",
+  "font-size-heading-m": "awsui_font-size-heading-m_4c84z_fqszx_427",
+  "font-size-heading-l": "awsui_font-size-heading-l_4c84z_fqszx_432",
+  "font-size-heading-xl": "awsui_font-size-heading-xl_4c84z_fqszx_437",
+  "font-size-display-l": "awsui_font-size-display-l_4c84z_fqszx_442",
+  "font-size-inherit": "awsui_font-size-inherit_4c84z_fqszx_447",
+  "icon-wrapper": "awsui_icon-wrapper_4c84z_fqszx_453",
+  "icon": "awsui_icon_4c84z_fqszx_453"
 };