@cloudscape-design/components-themeable 3.0.1051 → 3.0.1052

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "bb84fa6e90d3805835878eaba54d20db257b4c0c"
+  "commit": "311693cbe5ea9d8c6983c1beec432d6bee51bfc2"
 }

package/lib/internal/scss/alert/styles.scss

@@ -7,6 +7,8 @@
 @use '../internal/styles/tokens' as awsui;
 @use '../internal/styles' as styles;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
+@use '../internal/styles/foundation' as foundation;
 
 @use './motion';
 
@@ -34,6 +36,10 @@
   padding-block: awsui.$space-alert-vertical;
   padding-inline: awsui.$space-alert-horizontal;
   background-color: awsui.$color-background-container-content;
+
+  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
+    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
 }
 
 .alert-wrapper {
@@ -77,14 +83,18 @@
     outline: none;
   }
   @include focus-visible.when-visible {
-    @include styles.focus-highlight(awsui.$space-button-focus-outline-gutter);
+    @include styles.focus-highlight(
+      $gutter: awsui.$space-button-focus-outline-gutter,
+      $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-default-focus-ring),
+      $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
+    );
   }
 }
 
 .text {
   min-inline-size: 0;
   // To account for vertical misalignment due to button borders
-  padding-block: awsui.$border-width-alert;
+  padding-block: awsui.$border-width-button;
   padding-inline: 0;
   margin-block: awsui.$space-scaled-xxs;
   margin-inline: awsui.$space-xxs;

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "bb84fa6e";
+    $awsui-commit-hash: "311693cb";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-kcc2gu;
 $minContentWidth: --awsui-min-content-width-kcc2gu;

package/lib/internal/template/alert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alert/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAYzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFAkGV,CAAC;AAGF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/alert/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAYzC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK1C,OAAO,EAAE,UAAU,EAAE,CAAC;AAEtB,QAAA,MAAM,KAAK,mFAmGV,CAAC;AAGF,eAAe,KAAK,CAAC"}

package/lib/internal/template/alert/index.js

@@ -14,7 +14,7 @@ import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalAlert from './internal';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 const Alert = React.forwardRef((_a, ref) => {
-    var { type = 'info', visible = true } = _a, props = __rest(_a, ["type", "visible"]);
+    var { type = 'info', visible = true, style } = _a, props = __rest(_a, ["type", "visible", "style"]);
     const analyticsMetadata = getAnalyticsMetadataProps(props);
     const baseComponentProps = useBaseComponent('Alert', {
         props: { type, visible, dismissible: props.dismissible },
@@ -86,7 +86,7 @@ const Alert = React.forwardRef((_a, ref) => {
             type,
         },
     };
-    return (React.createElement(InternalAlert, Object.assign({ type: type, visible: visible }, props, baseComponentProps, { ref: ref, messageSlotId: messageSlotId }, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }))));
+    return (React.createElement(InternalAlert, Object.assign({ type: type, visible: visible }, props, baseComponentProps, { ref: ref, messageSlotId: messageSlotId, style: style }, getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata }))));
 });
 applyDisplayName(Alert, 'Alert');
 export default Alert;

package/lib/internal/template/alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/alert/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,YAAY,CAAC;;AACb,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAC5E,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAE,SAAS,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AACpG,OAAO,EAAE,qBAAqB,EAAE,mBAAmB,EAAE,MAAM,iCAAiC,CAAC;AAC7F,OAAO,EAAkC,yBAAyB,EAAE,MAAM,4BAA4B,CAAC;AACvG,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,aAAa,MAAM,YAAY,CAAC;AAEvC,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AAIpE,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAC5B,CAAC,EAAuD,EAAE,GAA8B,EAAE,EAAE;QAA3F,EAAE,IAAI,GAAG,MAAM,EAAE,OAAO,GAAG,IAAI,OAAwB,EAAnB,KAAK,cAAzC,mBAA2C,CAAF;IACxC,MAAM,iBAAiB,GAAG,yBAAyB,CAAC,KAAuC,CAAC,CAAC;IAC7F,MAAM,kBAAkB,GAAG,gBAAgB,CACzC,OAAO,EACP;QACE,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,KAAK,CAAC,WAAW,EAAE;KACzD,EACD,iBAAiB,CAClB,CAAC;IAEF,MAAM,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,EAAE,GAC7G,SAAS,EAAE,CAAC;IACd,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,cAAc,EAAE,YAAY,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,GAC1G,aAAa,EAAE,CAAC;IAClB,MAAM,EAAE,eAAe,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE5G,MAAM,aAAa,GAAG,WAAW,CAAC,QAAQ,CAAC,CAAC;IAE5C,SAAS,CAAC,GAAG,EAAE;;QACb,IAAI,mBAAmB,IAAI,OAAO,IAAI,IAAI,KAAK,OAAO,IAAI,WAAW,CAAC,OAAO,KAAK,UAAU,EAAE;YAC5F,MAAM,QAAQ,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;YACvD,MAAM,WAAW,GAAG,mBAAmB,CAAC,mBAAmB,CAAC,CAAC;YAE7D,UAAU,CAAC,OAAO,EAAE,CAAC;YAErB,uFAAuF;YACvF,MAAM,cAAc,GAAG,CAAC,MAAA,MAAA,MAAA,kBAAkB,CAAC,iBAAiB,CAAC,OAAO,0CAAE,qBAAqB,EAAE,0CAAE,KAAK,mCAAI,CAAC,CAAC,GAAG,CAAC,CAAC;YAE/G,IAAI,cAAc,EAAE;gBAClB,IAAI,eAAe,EAAE;oBACnB,aAAa,CAAC,kBAAkB,CAAC;wBAC/B,mBAAmB;wBACnB,gBAAgB;wBAChB,cAAc;wBACd,eAAe;wBACf,WAAW;wBACX,mBAAmB;wBACnB,UAAU;wBACV,QAAQ;wBACR,gBAAgB;wBAChB,kBAAkB,EAAE,qBAAqB,EAAE;wBAC3C,iBAAiB;wBACjB,YAAY,EAAE,iBAAiB,CAAC,YAAY,IAAI,mBAAmB;qBACpE,CAAC,CAAC;iBACJ;qBAAM,IAAI,gBAAgB,EAAE;oBAC3B,aAAa,CAAC,eAAe,CAAC;wBAC5B,mBAAmB;wBACnB,UAAU;wBACV,gBAAgB;wBAChB,QAAQ;wBACR,cAAc;wBACd,eAAe,EAAE,MAAA,kBAAkB,CAAC,iBAAiB,CAAC,OAAO,0CAAE,aAAa;wBAC5E,aAAa,EAAE,YAAY,CAAC,OAAO;wBACnC,gBAAgB;wBAChB,kBAAkB,EAAE,qBAAqB,EAAE;wBAC3C,YAAY,EAAE,iBAAiB,CAAC,YAAY,IAAI,gBAAgB;wBAChE,oBAAoB,EAAE,MAAA,oBAAoB,CAAC,OAAO,0CAAE,GAAG,CAAC,UAAU,CAAC;wBACnE,iBAAiB,EAAE,GAAG,GAAG,aAAa;qBACvC,CAAC,CAAC;iBACJ;qBAAM;oBACL,aAAa,CAAC,WAAW,CAAC;wBACxB,gBAAgB;wBAChB,mBAAmB;wBACnB,YAAY,EAAE,iBAAiB,CAAC,YAAY,IAAI,kBAAkB;qBACnE,CAAC,CAAC;iBACJ;aACF;YAED,OAAO,GAAG,EAAE;gBACV,uDAAuD;gBACvD,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,CAAC,CAAC;SACH;QAED,uDAAuD;IACzD,CAAC,EAAE,CAAC,mBAAmB,EAAE,OAAO,EAAE,iBAAiB,EAAE,UAAU,CAAC,CAAC,CAAC;IAElE,MAAM,0BAA0B,GAA6C;QAC3E,IAAI,EAAE,aAAa;QACnB,KAAK,EAAE,IAAI,kBAAkB,CAAC,MAAM,EAAE;QACtC,UAAU,EAAE;YACV,IAAI;SACL;KACF,CAAC;IAEF,OAAO,CACL,oBAAC,aAAa,kBACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,IACZ,KAAK,EACL,kBAAkB,IACtB,GAAG,EAAE,GAAG,EACR,aAAa,EAAE,aAAa,IACxB,6BAA6B,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,CAAC,EAC5E,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;AACjC,eAAe,KAAK,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n'use client';\nimport React, { useEffect } from 'react';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getSubStepAllSelector, getTextFromSelector } from '../internal/analytics/selectors';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataAlertComponent } from './analytics-metadata/interfaces';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\nexport { AlertProps };\n\nconst Alert = React.forwardRef(\n  ({ type = 'info', visible = true, ...props }: AlertProps, ref: React.Ref<AlertProps.Ref>) => {\n    const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n    const baseComponentProps = useBaseComponent<HTMLDivElement>(\n      'Alert',\n      {\n        props: { type, visible, dismissible: props.dismissible },\n      },\n      analyticsMetadata\n    );\n\n    const { funnelIdentifier, funnelInteractionId, funnelErrorContext, submissionAttempt, funnelState, errorCount } =\n      useFunnel();\n    const { stepNumber, stepNameSelector, stepIdentifier, subStepCount, stepErrorContext, subStepConfiguration } =\n      useFunnelStep();\n    const { subStepSelector, subStepNameSelector, subStepIdentifier, subStepErrorContext } = useFunnelSubStep();\n\n    const messageSlotId = useUniqueId('alert-');\n\n    useEffect(() => {\n      if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {\n        const stepName = getTextFromSelector(stepNameSelector);\n        const subStepName = getTextFromSelector(subStepNameSelector);\n\n        errorCount.current++;\n\n        // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n        const errorIsVisible = (baseComponentProps.__internalRootRef.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n        if (errorIsVisible) {\n          if (subStepSelector) {\n            FunnelMetrics.funnelSubStepError({\n              funnelInteractionId,\n              funnelIdentifier,\n              stepIdentifier,\n              subStepSelector,\n              subStepName,\n              subStepNameSelector,\n              stepNumber,\n              stepName,\n              stepNameSelector,\n              subStepAllSelector: getSubStepAllSelector(),\n              subStepIdentifier,\n              errorContext: analyticsMetadata.errorContext || subStepErrorContext,\n            });\n          } else if (stepNameSelector) {\n            FunnelMetrics.funnelStepError({\n              funnelInteractionId,\n              stepNumber,\n              stepNameSelector,\n              stepName,\n              stepIdentifier,\n              currentDocument: baseComponentProps.__internalRootRef.current?.ownerDocument,\n              totalSubSteps: subStepCount.current,\n              funnelIdentifier,\n              subStepAllSelector: getSubStepAllSelector(),\n              errorContext: analyticsMetadata.errorContext || stepErrorContext,\n              subStepConfiguration: subStepConfiguration.current?.get(stepNumber),\n              stepErrorSelector: '#' + messageSlotId,\n            });\n          } else {\n            FunnelMetrics.funnelError({\n              funnelIdentifier,\n              funnelInteractionId,\n              errorContext: analyticsMetadata.errorContext || funnelErrorContext,\n            });\n          }\n        }\n\n        return () => {\n          // eslint-disable-next-line react-hooks/exhaustive-deps\n          errorCount.current--;\n        };\n      }\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [funnelInteractionId, visible, submissionAttempt, errorCount]);\n\n    const componentAnalyticsMetadata: GeneratedAnalyticsMetadataAlertComponent = {\n      name: 'awsui.Alert',\n      label: `.${analyticsSelectors.header}`,\n      properties: {\n        type,\n      },\n    };\n\n    return (\n      <InternalAlert\n        type={type}\n        visible={visible}\n        {...props}\n        {...baseComponentProps}\n        ref={ref}\n        messageSlotId={messageSlotId}\n        {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n      />\n    );\n  }\n);\n\napplyDisplayName(Alert, 'Alert');\nexport default Alert;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/alert/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'use client';\nimport React, { useEffect } from 'react';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getSubStepAllSelector, getTextFromSelector } from '../internal/analytics/selectors';\nimport { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataAlertComponent } from './analytics-metadata/interfaces';\nimport { AlertProps } from './interfaces';\nimport InternalAlert from './internal';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\nexport { AlertProps };\n\nconst Alert = React.forwardRef(\n  ({ type = 'info', visible = true, style, ...props }: AlertProps, ref: React.Ref<AlertProps.Ref>) => {\n    const analyticsMetadata = getAnalyticsMetadataProps(props as BasePropsWithAnalyticsMetadata);\n    const baseComponentProps = useBaseComponent<HTMLDivElement>(\n      'Alert',\n      {\n        props: { type, visible, dismissible: props.dismissible },\n      },\n      analyticsMetadata\n    );\n\n    const { funnelIdentifier, funnelInteractionId, funnelErrorContext, submissionAttempt, funnelState, errorCount } =\n      useFunnel();\n    const { stepNumber, stepNameSelector, stepIdentifier, subStepCount, stepErrorContext, subStepConfiguration } =\n      useFunnelStep();\n    const { subStepSelector, subStepNameSelector, subStepIdentifier, subStepErrorContext } = useFunnelSubStep();\n\n    const messageSlotId = useUniqueId('alert-');\n\n    useEffect(() => {\n      if (funnelInteractionId && visible && type === 'error' && funnelState.current !== 'complete') {\n        const stepName = getTextFromSelector(stepNameSelector);\n        const subStepName = getTextFromSelector(subStepNameSelector);\n\n        errorCount.current++;\n\n        // We don't want to report an error if it is hidden, e.g. inside an Expandable Section.\n        const errorIsVisible = (baseComponentProps.__internalRootRef.current?.getBoundingClientRect()?.width ?? 0) > 0;\n\n        if (errorIsVisible) {\n          if (subStepSelector) {\n            FunnelMetrics.funnelSubStepError({\n              funnelInteractionId,\n              funnelIdentifier,\n              stepIdentifier,\n              subStepSelector,\n              subStepName,\n              subStepNameSelector,\n              stepNumber,\n              stepName,\n              stepNameSelector,\n              subStepAllSelector: getSubStepAllSelector(),\n              subStepIdentifier,\n              errorContext: analyticsMetadata.errorContext || subStepErrorContext,\n            });\n          } else if (stepNameSelector) {\n            FunnelMetrics.funnelStepError({\n              funnelInteractionId,\n              stepNumber,\n              stepNameSelector,\n              stepName,\n              stepIdentifier,\n              currentDocument: baseComponentProps.__internalRootRef.current?.ownerDocument,\n              totalSubSteps: subStepCount.current,\n              funnelIdentifier,\n              subStepAllSelector: getSubStepAllSelector(),\n              errorContext: analyticsMetadata.errorContext || stepErrorContext,\n              subStepConfiguration: subStepConfiguration.current?.get(stepNumber),\n              stepErrorSelector: '#' + messageSlotId,\n            });\n          } else {\n            FunnelMetrics.funnelError({\n              funnelIdentifier,\n              funnelInteractionId,\n              errorContext: analyticsMetadata.errorContext || funnelErrorContext,\n            });\n          }\n        }\n\n        return () => {\n          // eslint-disable-next-line react-hooks/exhaustive-deps\n          errorCount.current--;\n        };\n      }\n\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [funnelInteractionId, visible, submissionAttempt, errorCount]);\n\n    const componentAnalyticsMetadata: GeneratedAnalyticsMetadataAlertComponent = {\n      name: 'awsui.Alert',\n      label: `.${analyticsSelectors.header}`,\n      properties: {\n        type,\n      },\n    };\n\n    return (\n      <InternalAlert\n        type={type}\n        visible={visible}\n        {...props}\n        {...baseComponentProps}\n        ref={ref}\n        messageSlotId={messageSlotId}\n        style={style}\n        {...getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })}\n      />\n    );\n  }\n);\n\napplyDisplayName(Alert, 'Alert');\nexport default Alert;\n"]}

package/lib/internal/template/alert/interfaces.d.ts

@@ -20,6 +20,32 @@ export declare namespace AlertProps {
     interface AnalyticsMetadata {
         errorContext?: ErrorContext;
     }
+    interface Style {
+        root?: {
+            background?: string;
+            borderColor?: string;
+            borderRadius?: string;
+            borderWidth?: string;
+            color?: string;
+            focusRing?: {
+                borderColor?: string;
+                borderRadius?: string;
+                borderWidth?: string;
+            };
+        };
+        dismissButton?: {
+            color?: {
+                active?: string;
+                default?: string;
+                hover?: string;
+            };
+            focusRing?: {
+                borderColor?: string;
+                borderRadius?: string;
+                borderWidth?: string;
+            };
+        };
+    }
 }
 export interface AlertProps extends BaseComponentProps {
     /**
@@ -92,5 +118,25 @@ export interface AlertProps extends BaseComponentProps {
      * @analytics
      */
     analyticsMetadata?: AlertProps.AnalyticsMetadata;
+    /**
+     * Specifies an object of selectors and properties that are used to apply custom styles.
+     *
+     * - `root.background` - (string) (Optional) Background for alert.
+     * - `root.borderColor` - (string) (Optional) Border color for alert.
+     * - `root.borderRadius` (string) - (Optional) Alert border radius.
+     * - `root.borderWidth` (string) - (Optional) Alert border width.
+     * - `root.color`  - (string) (Optional) Text color for alert.
+     * - `root.focusRing.borderColor` - (string) (Optional) Alert focus ring border color.
+     * - `root.focusRing.borderRadius` (string) - (Optional) Alert button focus ring border radius.
+     * - `root.focusRing.borderWidth` (string) - (Optional) Alert button focus ring border width.
+     * - `dismissButton.color.active` - (string) (Optional) Color for dismiss button active state.
+     * - `dismissButton.color.default` - (string) (Optional) Color for dismiss button default state.
+     * - `dismissButton.color.hover` - (string) (Optional) Color for dismiss button hover state.
+     * - `dismissButton.focusRing.borderColor` - (string) (Optional) Dismiss button focus ring border color.
+     * - `dismissButton.focusRing.borderRadius` (string) - (Optional) Dismiss button focus ring border radius.
+     * - `dismissButton.focusRing.borderWidth` (string) - (Optional) Dismiss button focus ring border width.
+     * @awsuiSystem core
+     */
+    style?: AlertProps.Style;
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/alert/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAE5D,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IAED,UAAiB,WAAW;QAK1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAK9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAK5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAK9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAK3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B;IAED,UAAiB,iBAAiB;QAChC,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;CACF;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IAEvB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAC1C;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC;CAClD"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,yBAAiB,UAAU,CAAC;IAC1B,KAAY,IAAI,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;IAE5D,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;IAED,UAAiB,WAAW;QAK1B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAK9B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAK5B,oBAAoB,CAAC,EAAE,MAAM,CAAC;QAK9B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAK3B,gBAAgB,CAAC,EAAE,MAAM,CAAC;KAC3B;IAED,UAAiB,iBAAiB;QAChC,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;IAED,UAAiB,KAAK;QACpB,IAAI,CAAC,EAAE;YACL,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,KAAK,CAAC,EAAE,MAAM,CAAC;YACf,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;QACF,aAAa,CAAC,EAAE;YACd,KAAK,CAAC,EAAE;gBACN,MAAM,CAAC,EAAE,MAAM,CAAC;gBAChB,OAAO,CAAC,EAAE,MAAM,CAAC;gBACjB,KAAK,CAAC,EAAE,MAAM,CAAC;aAChB,CAAC;YACF,SAAS,CAAC,EAAE;gBACV,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;KACH;CACF;AAED,MAAM,WAAW,UAAW,SAAQ,kBAAkB;IACpD;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC,IAAI,CAAC;IAEvB;;;;;OAKG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,SAAS,CAAC,EAAE,yBAAyB,CAAC;IACtC;;;OAGG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC;IAC1C;;;;OAIG;IACH,WAAW,CAAC,EAAE,UAAU,CAAC,WAAW,CAAC;IACrC;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC;IACjD;;;;;;;;;;;;;;;;;;OAkBG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC;CAC1B"}

package/lib/internal/template/alert/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ErrorContext } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n  export type Type = 'success' | 'error' | 'warning' | 'info';\n\n  export interface Ref {\n    /**\n     * Sets focus on the alert content.\n     */\n    focus(): void;\n  }\n\n  export interface I18nStrings {\n    /*\n     * Specifies the ARIA label for the alert icon for type `success`.\n     * @property {string} [successIconAriaLabel] - optional\n     */\n    successIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the alert icon for type `error`.\n     * @property {string} [errorIconAriaLabel] - optional\n     */\n    errorIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the alert icon for type `warning`.\n     * @property {string} [warningIconAriaLabel] - optional\n     */\n    warningIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the alert icon for type `info`.\n     * @property {string} [infoIconAriaLabel] - optional\n     */\n    infoIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the dismiss button.\n     * @property {string} [dismissAriaLabel] - optional\n     */\n    dismissAriaLabel?: string;\n  }\n\n  export interface AnalyticsMetadata {\n    errorContext?: ErrorContext;\n  }\n}\n\nexport interface AlertProps extends BaseComponentProps {\n  /**\n   * Specifies the type of message you want to display.\n   */\n  type?: AlertProps.Type;\n\n  /**\n   * Provides a text alternative for the icon.\n   *\n   * @deprecated Use the label properties inside `i18nStrings` instead.\n   * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n   */\n  statusIconAriaLabel?: string;\n\n  /**\n   * Determines whether the alert is displayed.\n   * @deprecated Use conditional rendering in your code instead of this prop.\n   */\n  visible?: boolean;\n  /**\n   * Adds a close button to the alert when set to `true`.\n   * An `onDismiss` event is fired when a user clicks the button.\n   */\n  dismissible?: boolean;\n  /**\n   * Adds an aria-label to the dismiss button.\n   * @i18n\n   *\n   * @deprecated Use `i18nStrings.dismissAriaLabel` instead.\n   * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n   */\n  dismissAriaLabel?: string;\n  /**\n   * Primary text displayed in the element.\n   */\n  children?: React.ReactNode;\n  /**\n   * Heading text.\n   */\n  header?: React.ReactNode;\n  /**\n   * Displays an action button next to the message area when set.\n   * An `onButtonClick` event is fired when the user clicks it.\n   * @deprecated Replaced by `action`.\n   */\n  buttonText?: React.ReactNode;\n  /**\n   * Specifies an action for the alert message.\n   * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n   */\n  action?: React.ReactNode;\n  /**\n   * Fired when the user clicks the close icon that is displayed\n   * when the `dismissible` property is set to `true`.\n   */\n  onDismiss?: NonCancelableEventHandler;\n  /**\n   * Fired when the user clicks the action button.\n   * **Deprecated** Replaced by `action`.\n   */\n  onButtonClick?: NonCancelableEventHandler;\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @property {AlertProps.I18nStrings} [i18nStrings] - optional\n   * @i18n\n   */\n  i18nStrings?: AlertProps.I18nStrings;\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `errorContext` - Identifies the error category and sub-category.\n   * @analytics\n   */\n  analyticsMetadata?: AlertProps.AnalyticsMetadata;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ErrorContext } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n  export type Type = 'success' | 'error' | 'warning' | 'info';\n\n  export interface Ref {\n    /**\n     * Sets focus on the alert content.\n     */\n    focus(): void;\n  }\n\n  export interface I18nStrings {\n    /*\n     * Specifies the ARIA label for the alert icon for type `success`.\n     * @property {string} [successIconAriaLabel] - optional\n     */\n    successIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the alert icon for type `error`.\n     * @property {string} [errorIconAriaLabel] - optional\n     */\n    errorIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the alert icon for type `warning`.\n     * @property {string} [warningIconAriaLabel] - optional\n     */\n    warningIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the alert icon for type `info`.\n     * @property {string} [infoIconAriaLabel] - optional\n     */\n    infoIconAriaLabel?: string;\n    /*\n     * Specifies the ARIA label for the dismiss button.\n     * @property {string} [dismissAriaLabel] - optional\n     */\n    dismissAriaLabel?: string;\n  }\n\n  export interface AnalyticsMetadata {\n    errorContext?: ErrorContext;\n  }\n\n  export interface Style {\n    root?: {\n      background?: string;\n      borderColor?: string;\n      borderRadius?: string;\n      borderWidth?: string;\n      color?: string;\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n    dismissButton?: {\n      color?: {\n        active?: string;\n        default?: string;\n        hover?: string;\n      };\n      focusRing?: {\n        borderColor?: string;\n        borderRadius?: string;\n        borderWidth?: string;\n      };\n    };\n  }\n}\n\nexport interface AlertProps extends BaseComponentProps {\n  /**\n   * Specifies the type of message you want to display.\n   */\n  type?: AlertProps.Type;\n\n  /**\n   * Provides a text alternative for the icon.\n   *\n   * @deprecated Use the label properties inside `i18nStrings` instead.\n   * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n   */\n  statusIconAriaLabel?: string;\n\n  /**\n   * Determines whether the alert is displayed.\n   * @deprecated Use conditional rendering in your code instead of this prop.\n   */\n  visible?: boolean;\n  /**\n   * Adds a close button to the alert when set to `true`.\n   * An `onDismiss` event is fired when a user clicks the button.\n   */\n  dismissible?: boolean;\n  /**\n   * Adds an aria-label to the dismiss button.\n   * @i18n\n   *\n   * @deprecated Use `i18nStrings.dismissAriaLabel` instead.\n   * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n   */\n  dismissAriaLabel?: string;\n  /**\n   * Primary text displayed in the element.\n   */\n  children?: React.ReactNode;\n  /**\n   * Heading text.\n   */\n  header?: React.ReactNode;\n  /**\n   * Displays an action button next to the message area when set.\n   * An `onButtonClick` event is fired when the user clicks it.\n   * @deprecated Replaced by `action`.\n   */\n  buttonText?: React.ReactNode;\n  /**\n   * Specifies an action for the alert message.\n   * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n   */\n  action?: React.ReactNode;\n  /**\n   * Fired when the user clicks the close icon that is displayed\n   * when the `dismissible` property is set to `true`.\n   */\n  onDismiss?: NonCancelableEventHandler;\n  /**\n   * Fired when the user clicks the action button.\n   * **Deprecated** Replaced by `action`.\n   */\n  onButtonClick?: NonCancelableEventHandler;\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @property {AlertProps.I18nStrings} [i18nStrings] - optional\n   * @i18n\n   */\n  i18nStrings?: AlertProps.I18nStrings;\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `errorContext` - Identifies the error category and sub-category.\n   * @analytics\n   */\n  analyticsMetadata?: AlertProps.AnalyticsMetadata;\n  /**\n   * Specifies an object of selectors and properties that are used to apply custom styles.\n   *\n   * - `root.background` - (string) (Optional) Background for alert.\n   * - `root.borderColor` - (string) (Optional) Border color for alert.\n   * - `root.borderRadius` (string) - (Optional) Alert border radius.\n   * - `root.borderWidth` (string) - (Optional) Alert border width.\n   * - `root.color`  - (string) (Optional) Text color for alert.\n   * - `root.focusRing.borderColor` - (string) (Optional) Alert focus ring border color.\n   * - `root.focusRing.borderRadius` (string) - (Optional) Alert button focus ring border radius.\n   * - `root.focusRing.borderWidth` (string) - (Optional) Alert button focus ring border width.\n   * - `dismissButton.color.active` - (string) (Optional) Color for dismiss button active state.\n   * - `dismissButton.color.default` - (string) (Optional) Color for dismiss button default state.\n   * - `dismissButton.color.hover` - (string) (Optional) Color for dismiss button hover state.\n   * - `dismissButton.focusRing.borderColor` - (string) (Optional) Dismiss button focus ring border color.\n   * - `dismissButton.focusRing.borderRadius` (string) - (Optional) Dismiss button focus ring border radius.\n   * - `dismissButton.focusRing.borderWidth` (string) - (Optional) Dismiss button focus ring border width.\n   * @awsuiSystem core\n   */\n  style?: AlertProps.Style;\n}\n"]}

package/lib/internal/template/alert/internal.d.ts

@@ -5,6 +5,7 @@ declare const InternalAlert: React.ForwardRefExoticComponent<AlertProps & {
     type: AlertProps.Type;
 } & InternalBaseComponentProps<HTMLDivElement> & {
     messageSlotId?: string | undefined;
+    style?: AlertProps['style'];
 } & React.RefAttributes<AlertProps.Ref>>;
 export default InternalAlert;
 //# sourceMappingURL=internal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/alert/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAgBtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAoB1C,QAAA,MAAM,aAAa;;;;wCAmKlB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/alert/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAgBtC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAQlF,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAsB1C,QAAA,MAAM,aAAa;;;;YANP,UAAU,CAAC,OAAO,CAAC;wCA4K9B,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/lib/internal/template/alert/internal.js

@@ -19,6 +19,7 @@ import { awsuiPluginsInternal } from '../internal/plugins/api';
 import { createUseDiscoveredAction, createUseDiscoveredContent } from '../internal/plugins/helpers';
 import useContainerWidth from '../internal/utils/use-container-width';
 import { ActionsWrapper } from './actions-wrapper';
+import { getAlertStyles, getDismissButtonStyles } from './style';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 const typeToIcon = {
@@ -31,7 +32,7 @@ const useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.alert
 const useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent);
 const InternalAlert = React.forwardRef((_a, ref) => {
     var _b, _c;
-    var { type, i18nStrings, visible = true, dismissible, children, header, buttonText, action, onDismiss, onButtonClick, __internalRootRef = null, statusIconAriaLabel: deprecatedStatusIconAriaLabel, dismissAriaLabel: deprecatedDismissAriaLabel, messageSlotId } = _a, rest = __rest(_a, ["type", "i18nStrings", "visible", "dismissible", "children", "header", "buttonText", "action", "onDismiss", "onButtonClick", "__internalRootRef", "statusIconAriaLabel", "dismissAriaLabel", "messageSlotId"]);
+    var { type, i18nStrings, visible = true, dismissible, children, header, buttonText, action, onDismiss, onButtonClick, __internalRootRef = null, statusIconAriaLabel: deprecatedStatusIconAriaLabel, dismissAriaLabel: deprecatedDismissAriaLabel, messageSlotId, style } = _a, rest = __rest(_a, ["type", "i18nStrings", "visible", "dismissible", "children", "header", "buttonText", "action", "onDismiss", "onButtonClick", "__internalRootRef", "statusIconAriaLabel", "dismissAriaLabel", "messageSlotId", "style"]);
     const baseProps = getBaseProps(rest);
     const i18n = useInternalI18n('alert');
     const focusRef = useRef(null);
@@ -57,7 +58,7 @@ const InternalAlert = React.forwardRef((_a, ref) => {
     return (React.createElement("div", Object.assign({}, baseProps, analyticsAttributes, { "aria-hidden": !visible, className: clsx(styles.root, { [styles.hidden]: !visible, [styles['initial-hidden']]: initialHidden }, baseProps.className), ref: containerRef }),
         React.createElement(LinkDefaultVariantContext.Provider, { value: { defaultVariant: 'primary' } },
             React.createElement(VisualContext, { contextName: "alert" },
-                React.createElement("div", { className: clsx(styles.alert, styles[`type-${type}`], styles[`icon-size-${size}`], hasAction && styles['with-action'], dismissible && styles['with-dismiss']) },
+                React.createElement("div", { className: clsx(styles.alert, styles[`type-${type}`], styles[`icon-size-${size}`], hasAction && styles['with-action'], dismissible && styles['with-dismiss']), style: getAlertStyles(style) },
                     React.createElement("div", { className: styles['alert-wrapper'] },
                         React.createElement("div", { className: styles['alert-focus-wrapper'], tabIndex: -1, ref: focusRef, role: "group" },
                             React.createElement("div", { className: clsx(styles.icon, styles.text) },
@@ -74,7 +75,7 @@ const InternalAlert = React.forwardRef((_a, ref) => {
                     dismissible && (React.createElement("div", Object.assign({ className: styles.dismiss }, getAnalyticsMetadataAttribute({
                         action: 'dismiss',
                     })),
-                        React.createElement(InternalButton, { className: styles['dismiss-button'], variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissAriaLabel, onClick: () => fireNonCancelableEvent(onDismiss) }))))))));
+                        React.createElement(InternalButton, { className: styles['dismiss-button'], variant: "icon", iconName: "close", formAction: "none", ariaLabel: dismissAriaLabel, onClick: () => fireNonCancelableEvent(onDismiss), style: getDismissButtonStyles(style) }))))))));
 });
 export default InternalAlert;
 //# sourceMappingURL=internal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/alert/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';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport VisualContext from '../internal/components/visual-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { awsuiPluginsInternal } from '../internal/plugins/api';\nimport { createUseDiscoveredAction, createUseDiscoveredContent } from '../internal/plugins/helpers';\nimport { SomeRequired } from '../internal/types';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { ActionsWrapper } from './actions-wrapper';\nimport { GeneratedAnalyticsMetadataAlertDismiss } from './analytics-metadata/interfaces';\nimport { AlertProps } from './interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst typeToIcon: Record<AlertProps.Type, IconProps['name']> = {\n  error: 'status-negative',\n  warning: 'status-warning',\n  success: 'status-positive',\n  info: 'status-info',\n};\n\ntype InternalAlertProps = SomeRequired<AlertProps, 'type'> &\n  InternalBaseComponentProps<HTMLDivElement> & {\n    messageSlotId?: string;\n  };\n\nconst useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.alert.onActionRegistered);\nconst useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent);\n\nconst InternalAlert = React.forwardRef(\n  (\n    {\n      type,\n      i18nStrings,\n      visible = true,\n      dismissible,\n      children,\n      header,\n      buttonText,\n      action,\n      onDismiss,\n      onButtonClick,\n      __internalRootRef = null,\n      statusIconAriaLabel: deprecatedStatusIconAriaLabel,\n      dismissAriaLabel: deprecatedDismissAriaLabel,\n      messageSlotId,\n      ...rest\n    }: InternalAlertProps,\n    ref: React.Ref<AlertProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const i18n = useInternalI18n('alert');\n\n    const focusRef = useRef<HTMLDivElement>(null);\n    useForwardFocus(ref, focusRef);\n\n    const { discoveredActions, headerRef: headerRefAction, contentRef: contentRefAction } = useDiscoveredAction(type);\n    const {\n      initialHidden,\n      headerReplacementType,\n      contentReplacementType,\n      headerRef: headerRefContent,\n      contentRef: contentRefContent,\n      replacementHeaderRef,\n      replacementContentRef,\n    } = useDiscoveredContent({ type, header, children });\n\n    const [containerWidth, containerMeasureRef] = useContainerWidth();\n    const containerRef = useMergeRefs(containerMeasureRef, __internalRootRef);\n    const headerRef = useMergeRefs(headerRefAction, headerRefContent);\n    const contentRef = useMergeRefs(contentRefAction, contentRefContent);\n\n    const isRefresh = useVisualRefresh();\n    const size = isRefresh\n      ? 'normal'\n      : headerReplacementType !== 'remove' && header && contentReplacementType !== 'remove' && children\n        ? 'big'\n        : 'normal';\n\n    const hasAction = Boolean(action || buttonText || discoveredActions.length);\n\n    const analyticsAttributes = {\n      [DATA_ATTR_ANALYTICS_ALERT]: type,\n    };\n\n    const statusIconAriaLabel = i18n(\n      `i18nStrings.${type}IconAriaLabel`,\n      i18nStrings?.[`${type}IconAriaLabel`] ?? deprecatedStatusIconAriaLabel\n    );\n\n    const dismissAriaLabel = i18n(\n      'i18nStrings.dismissAriaLabel',\n      i18nStrings?.dismissAriaLabel ?? i18n('dismissAriaLabel', deprecatedDismissAriaLabel)\n    );\n\n    return (\n      <div\n        {...baseProps}\n        {...analyticsAttributes}\n        aria-hidden={!visible}\n        className={clsx(\n          styles.root,\n          { [styles.hidden]: !visible, [styles['initial-hidden']]: initialHidden },\n          baseProps.className\n        )}\n        ref={containerRef}\n      >\n        <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n          <VisualContext contextName=\"alert\">\n            <div\n              className={clsx(\n                styles.alert,\n                styles[`type-${type}`],\n                styles[`icon-size-${size}`],\n                hasAction && styles['with-action'],\n                dismissible && styles['with-dismiss']\n              )}\n            >\n              <div className={styles['alert-wrapper']}>\n                <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef} role=\"group\">\n                  <div className={clsx(styles.icon, styles.text)}>\n                    <InternalIcon name={typeToIcon[type]} size={size} ariaLabel={statusIconAriaLabel} />\n                  </div>\n                  <div className={clsx(styles.message, styles.text)} id={messageSlotId}>\n                    <div\n                      className={clsx(\n                        header && styles.header,\n                        headerReplacementType !== 'original' ? styles.hidden : analyticsSelectors.header\n                      )}\n                      ref={headerRef}\n                    >\n                      {header}\n                    </div>\n                    <div\n                      className={clsx(\n                        styles['header-replacement'],\n                        headerReplacementType !== 'replaced' ? styles.hidden : analyticsSelectors.header\n                      )}\n                      ref={replacementHeaderRef}\n                    ></div>\n                    <div\n                      className={clsx(styles.content, contentReplacementType !== 'original' && styles.hidden)}\n                      ref={contentRef}\n                    >\n                      {children}\n                    </div>\n                    <div\n                      className={clsx(\n                        styles['content-replacement'],\n                        contentReplacementType !== 'replaced' && styles.hidden\n                      )}\n                      ref={replacementContentRef}\n                    ></div>\n                  </div>\n                </div>\n                <ActionsWrapper\n                  className={styles.action}\n                  testUtilClasses={{\n                    actionSlot: styles['action-slot'],\n                    actionButton: styles['action-button'],\n                  }}\n                  action={action}\n                  discoveredActions={discoveredActions}\n                  buttonText={buttonText}\n                  onButtonClick={() => fireNonCancelableEvent(onButtonClick)}\n                  containerWidth={containerWidth}\n                  wrappedClass={styles['action-wrapped']}\n                />\n              </div>\n              {dismissible && (\n                <div\n                  className={styles.dismiss}\n                  {...getAnalyticsMetadataAttribute({\n                    action: 'dismiss',\n                  } as Partial<GeneratedAnalyticsMetadataAlertDismiss>)}\n                >\n                  <InternalButton\n                    className={styles['dismiss-button']}\n                    variant=\"icon\"\n                    iconName=\"close\"\n                    formAction=\"none\"\n                    ariaLabel={dismissAriaLabel}\n                    onClick={() => fireNonCancelableEvent(onDismiss)}\n                  />\n                </div>\n              )}\n            </div>\n          </VisualContext>\n        </LinkDefaultVariantContext.Provider>\n      </div>\n    );\n  }\n);\n\nexport default InternalAlert;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/alert/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';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { InternalButton } from '../button/internal';\nimport { useInternalI18n } from '../i18n/context';\nimport { IconProps } from '../icon/interfaces';\nimport InternalIcon from '../icon/internal';\nimport { DATA_ATTR_ANALYTICS_ALERT } from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport VisualContext from '../internal/components/visual-context';\nimport { LinkDefaultVariantContext } from '../internal/context/link-default-variant-context';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useForwardFocus from '../internal/hooks/forward-focus';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { awsuiPluginsInternal } from '../internal/plugins/api';\nimport { createUseDiscoveredAction, createUseDiscoveredContent } from '../internal/plugins/helpers';\nimport { SomeRequired } from '../internal/types';\nimport useContainerWidth from '../internal/utils/use-container-width';\nimport { ActionsWrapper } from './actions-wrapper';\nimport { GeneratedAnalyticsMetadataAlertDismiss } from './analytics-metadata/interfaces';\nimport { AlertProps } from './interfaces';\nimport { getAlertStyles, getDismissButtonStyles } from './style';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nconst typeToIcon: Record<AlertProps.Type, IconProps['name']> = {\n  error: 'status-negative',\n  warning: 'status-warning',\n  success: 'status-positive',\n  info: 'status-info',\n};\n\ntype InternalAlertProps = SomeRequired<AlertProps, 'type'> &\n  InternalBaseComponentProps<HTMLDivElement> & {\n    messageSlotId?: string;\n    style?: AlertProps['style'];\n  };\n\nconst useDiscoveredAction = createUseDiscoveredAction(awsuiPluginsInternal.alert.onActionRegistered);\nconst useDiscoveredContent = createUseDiscoveredContent('alert', awsuiPluginsInternal.alertContent);\n\nconst InternalAlert = React.forwardRef(\n  (\n    {\n      type,\n      i18nStrings,\n      visible = true,\n      dismissible,\n      children,\n      header,\n      buttonText,\n      action,\n      onDismiss,\n      onButtonClick,\n      __internalRootRef = null,\n      statusIconAriaLabel: deprecatedStatusIconAriaLabel,\n      dismissAriaLabel: deprecatedDismissAriaLabel,\n      messageSlotId,\n      style,\n      ...rest\n    }: InternalAlertProps,\n    ref: React.Ref<AlertProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const i18n = useInternalI18n('alert');\n\n    const focusRef = useRef<HTMLDivElement>(null);\n    useForwardFocus(ref, focusRef);\n\n    const { discoveredActions, headerRef: headerRefAction, contentRef: contentRefAction } = useDiscoveredAction(type);\n    const {\n      initialHidden,\n      headerReplacementType,\n      contentReplacementType,\n      headerRef: headerRefContent,\n      contentRef: contentRefContent,\n      replacementHeaderRef,\n      replacementContentRef,\n    } = useDiscoveredContent({ type, header, children });\n\n    const [containerWidth, containerMeasureRef] = useContainerWidth();\n    const containerRef = useMergeRefs(containerMeasureRef, __internalRootRef);\n    const headerRef = useMergeRefs(headerRefAction, headerRefContent);\n    const contentRef = useMergeRefs(contentRefAction, contentRefContent);\n\n    const isRefresh = useVisualRefresh();\n    const size = isRefresh\n      ? 'normal'\n      : headerReplacementType !== 'remove' && header && contentReplacementType !== 'remove' && children\n        ? 'big'\n        : 'normal';\n\n    const hasAction = Boolean(action || buttonText || discoveredActions.length);\n\n    const analyticsAttributes = {\n      [DATA_ATTR_ANALYTICS_ALERT]: type,\n    };\n\n    const statusIconAriaLabel = i18n(\n      `i18nStrings.${type}IconAriaLabel`,\n      i18nStrings?.[`${type}IconAriaLabel`] ?? deprecatedStatusIconAriaLabel\n    );\n\n    const dismissAriaLabel = i18n(\n      'i18nStrings.dismissAriaLabel',\n      i18nStrings?.dismissAriaLabel ?? i18n('dismissAriaLabel', deprecatedDismissAriaLabel)\n    );\n\n    return (\n      <div\n        {...baseProps}\n        {...analyticsAttributes}\n        aria-hidden={!visible}\n        className={clsx(\n          styles.root,\n          { [styles.hidden]: !visible, [styles['initial-hidden']]: initialHidden },\n          baseProps.className\n        )}\n        ref={containerRef}\n      >\n        <LinkDefaultVariantContext.Provider value={{ defaultVariant: 'primary' }}>\n          <VisualContext contextName=\"alert\">\n            <div\n              className={clsx(\n                styles.alert,\n                styles[`type-${type}`],\n                styles[`icon-size-${size}`],\n                hasAction && styles['with-action'],\n                dismissible && styles['with-dismiss']\n              )}\n              style={getAlertStyles(style)}\n            >\n              <div className={styles['alert-wrapper']}>\n                <div className={styles['alert-focus-wrapper']} tabIndex={-1} ref={focusRef} role=\"group\">\n                  <div className={clsx(styles.icon, styles.text)}>\n                    <InternalIcon name={typeToIcon[type]} size={size} ariaLabel={statusIconAriaLabel} />\n                  </div>\n                  <div className={clsx(styles.message, styles.text)} id={messageSlotId}>\n                    <div\n                      className={clsx(\n                        header && styles.header,\n                        headerReplacementType !== 'original' ? styles.hidden : analyticsSelectors.header\n                      )}\n                      ref={headerRef}\n                    >\n                      {header}\n                    </div>\n                    <div\n                      className={clsx(\n                        styles['header-replacement'],\n                        headerReplacementType !== 'replaced' ? styles.hidden : analyticsSelectors.header\n                      )}\n                      ref={replacementHeaderRef}\n                    ></div>\n                    <div\n                      className={clsx(styles.content, contentReplacementType !== 'original' && styles.hidden)}\n                      ref={contentRef}\n                    >\n                      {children}\n                    </div>\n                    <div\n                      className={clsx(\n                        styles['content-replacement'],\n                        contentReplacementType !== 'replaced' && styles.hidden\n                      )}\n                      ref={replacementContentRef}\n                    ></div>\n                  </div>\n                </div>\n                <ActionsWrapper\n                  className={styles.action}\n                  testUtilClasses={{\n                    actionSlot: styles['action-slot'],\n                    actionButton: styles['action-button'],\n                  }}\n                  action={action}\n                  discoveredActions={discoveredActions}\n                  buttonText={buttonText}\n                  onButtonClick={() => fireNonCancelableEvent(onButtonClick)}\n                  containerWidth={containerWidth}\n                  wrappedClass={styles['action-wrapped']}\n                />\n              </div>\n              {dismissible && (\n                <div\n                  className={styles.dismiss}\n                  {...getAnalyticsMetadataAttribute({\n                    action: 'dismiss',\n                  } as Partial<GeneratedAnalyticsMetadataAlertDismiss>)}\n                >\n                  <InternalButton\n                    className={styles['dismiss-button']}\n                    variant=\"icon\"\n                    iconName=\"close\"\n                    formAction=\"none\"\n                    ariaLabel={dismissAriaLabel}\n                    onClick={() => fireNonCancelableEvent(onDismiss)}\n                    style={getDismissButtonStyles(style)}\n                  />\n                </div>\n              )}\n            </div>\n          </VisualContext>\n        </LinkDefaultVariantContext.Provider>\n      </div>\n    );\n  }\n);\n\nexport default InternalAlert;\n"]}

package/lib/internal/template/alert/style.d.ts

@@ -0,0 +1,23 @@
+import { AlertProps } from './interfaces';
+export declare function getAlertStyles(style: AlertProps['style']): {
+    background: string | undefined;
+    borderColor: string | undefined;
+    borderRadius: string | undefined;
+    borderWidth: string | undefined;
+    color: string | undefined;
+} | undefined;
+export declare function getDismissButtonStyles(style: AlertProps['style']): {
+    root: {
+        color: {
+            active: string | undefined;
+            default: string | undefined;
+            hover: string | undefined;
+        };
+        focusRing: {
+            borderColor: string | undefined;
+            borderRadius: string | undefined;
+            borderWidth: string | undefined;
+        };
+    };
+} | undefined;
+//# sourceMappingURL=style.d.ts.map

package/lib/internal/template/alert/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/alert/style.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,wBAAgB,cAAc,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC;;;;;;cAiBxD;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,UAAU,CAAC,OAAO,CAAC;;;;;;;;;;;;;cAmBhE"}

package/lib/internal/template/alert/style.js

@@ -0,0 +1,36 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import customCssProps from '../internal/generated/custom-css-properties';
+export function getAlertStyles(style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.root)) {
+        return undefined;
+    }
+    return Object.assign({ background: (_a = style.root) === null || _a === void 0 ? void 0 : _a.background, borderColor: (_b = style.root) === null || _b === void 0 ? void 0 : _b.borderColor, borderRadius: (_c = style.root) === null || _c === void 0 ? void 0 : _c.borderRadius, borderWidth: (_d = style.root) === null || _d === void 0 ? void 0 : _d.borderWidth, color: (_e = style.root) === null || _e === void 0 ? void 0 : _e.color }, (((_f = style.root) === null || _f === void 0 ? void 0 : _f.focusRing) && {
+        [customCssProps.styleFocusRingBorderColor]: (_g = style.root.focusRing) === null || _g === void 0 ? void 0 : _g.borderColor,
+        [customCssProps.styleFocusRingBorderRadius]: (_h = style.root.focusRing) === null || _h === void 0 ? void 0 : _h.borderRadius,
+        [customCssProps.styleFocusRingBorderWidth]: (_j = style.root.focusRing) === null || _j === void 0 ? void 0 : _j.borderWidth,
+    }));
+}
+export function getDismissButtonStyles(style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.dismissButton)) {
+        return undefined;
+    }
+    return {
+        root: {
+            color: {
+                active: (_b = (_a = style.dismissButton) === null || _a === void 0 ? void 0 : _a.color) === null || _b === void 0 ? void 0 : _b.active,
+                default: (_d = (_c = style.dismissButton) === null || _c === void 0 ? void 0 : _c.color) === null || _d === void 0 ? void 0 : _d.default,
+                hover: (_f = (_e = style.dismissButton) === null || _e === void 0 ? void 0 : _e.color) === null || _f === void 0 ? void 0 : _f.hover,
+            },
+            focusRing: {
+                borderColor: (_h = (_g = style.dismissButton) === null || _g === void 0 ? void 0 : _g.focusRing) === null || _h === void 0 ? void 0 : _h.borderColor,
+                borderRadius: (_k = (_j = style.dismissButton) === null || _j === void 0 ? void 0 : _j.focusRing) === null || _k === void 0 ? void 0 : _k.borderRadius,
+                borderWidth: (_m = (_l = style.dismissButton) === null || _l === void 0 ? void 0 : _l.focusRing) === null || _m === void 0 ? void 0 : _m.borderWidth,
+            },
+        },
+    };
+}
+//# sourceMappingURL=style.js.map

package/lib/internal/template/alert/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/alert/style.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAGzE,MAAM,UAAU,cAAc,CAAC,KAA0B;;IACvD,IAAI,MAAM,KAAK,MAAM,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,IAAI,CAAA,EAAE;QACrC,OAAO,SAAS,CAAC;KAClB;IAED,uBACE,UAAU,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,UAAU,EAClC,WAAW,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,WAAW,EACpC,YAAY,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,YAAY,EACtC,WAAW,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,WAAW,EACpC,KAAK,EAAE,MAAA,KAAK,CAAC,IAAI,0CAAE,KAAK,IACrB,CAAC,CAAA,MAAA,KAAK,CAAC,IAAI,0CAAE,SAAS,KAAI;QAC3B,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,MAAA,KAAK,CAAC,IAAI,CAAC,SAAS,0CAAE,WAAW;QAC7E,CAAC,cAAc,CAAC,0BAA0B,CAAC,EAAE,MAAA,KAAK,CAAC,IAAI,CAAC,SAAS,0CAAE,YAAY;QAC/E,CAAC,cAAc,CAAC,yBAAyB,CAAC,EAAE,MAAA,KAAK,CAAC,IAAI,CAAC,SAAS,0CAAE,WAAW;KAC9E,CAAC,EACF;AACJ,CAAC;AAED,MAAM,UAAU,sBAAsB,CAAC,KAA0B;;IAC/D,IAAI,MAAM,KAAK,MAAM,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,CAAA,EAAE;QAC9C,OAAO,SAAS,CAAC;KAClB;IAED,OAAO;QACL,IAAI,EAAE;YACJ,KAAK,EAAE;gBACL,MAAM,EAAE,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,KAAK,0CAAE,MAAM;gBAC1C,OAAO,EAAE,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,KAAK,0CAAE,OAAO;gBAC5C,KAAK,EAAE,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,KAAK,0CAAE,KAAK;aACzC;YACD,SAAS,EAAE;gBACT,WAAW,EAAE,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,SAAS,0CAAE,WAAW;gBACxD,YAAY,EAAE,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,SAAS,0CAAE,YAAY;gBAC1D,WAAW,EAAE,MAAA,MAAA,KAAK,CAAC,aAAa,0CAAE,SAAS,0CAAE,WAAW;aACzD;SACF;KACF,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { AlertProps } from './interfaces';\n\nexport function getAlertStyles(style: AlertProps['style']) {\n  if (SYSTEM !== 'core' || !style?.root) {\n    return undefined;\n  }\n\n  return {\n    background: style.root?.background,\n    borderColor: style.root?.borderColor,\n    borderRadius: style.root?.borderRadius,\n    borderWidth: style.root?.borderWidth,\n    color: style.root?.color,\n    ...(style.root?.focusRing && {\n      [customCssProps.styleFocusRingBorderColor]: style.root.focusRing?.borderColor,\n      [customCssProps.styleFocusRingBorderRadius]: style.root.focusRing?.borderRadius,\n      [customCssProps.styleFocusRingBorderWidth]: style.root.focusRing?.borderWidth,\n    }),\n  };\n}\n\nexport function getDismissButtonStyles(style: AlertProps['style']) {\n  if (SYSTEM !== 'core' || !style?.dismissButton) {\n    return undefined;\n  }\n\n  return {\n    root: {\n      color: {\n        active: style.dismissButton?.color?.active,\n        default: style.dismissButton?.color?.default,\n        hover: style.dismissButton?.color?.hover,\n      },\n      focusRing: {\n        borderColor: style.dismissButton?.focusRing?.borderColor,\n        borderRadius: style.dismissButton?.focusRing?.borderRadius,\n        borderWidth: style.dismissButton?.focusRing?.borderWidth,\n      },\n    },\n  };\n}\n"]}

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

@@ -1,32 +1,32 @@
 
     import './styles.scoped.css';
     export default {
-  "alert": "awsui_alert_mx3cw_gw44y_193",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_gw44y_1",
-  "root": "awsui_root_mx3cw_gw44y_215",
-  "hidden": "awsui_hidden_mx3cw_gw44y_250",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_gw44y_298",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_gw44y_310",
-  "header": "awsui_header_mx3cw_gw44y_315",
-  "header-replacement": "awsui_header-replacement_mx3cw_gw44y_316",
-  "action": "awsui_action_mx3cw_gw44y_320",
-  "action-slot": "awsui_action-slot_mx3cw_gw44y_324",
-  "action-button": "awsui_action-button_mx3cw_gw44y_325",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_gw44y_329",
-  "text": "awsui_text_mx3cw_gw44y_360",
-  "icon": "awsui_icon_mx3cw_gw44y_367",
-  "message": "awsui_message_mx3cw_gw44y_370",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_gw44y_374",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_gw44y_378",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_gw44y_382",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_gw44y_386",
-  "content": "awsui_content_mx3cw_gw44y_390",
-  "content-replacement": "awsui_content-replacement_mx3cw_gw44y_391",
-  "dismiss": "awsui_dismiss_mx3cw_gw44y_395",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_gw44y_400",
-  "type-error": "awsui_type-error_mx3cw_gw44y_404",
-  "type-warning": "awsui_type-warning_mx3cw_gw44y_412",
-  "type-success": "awsui_type-success_mx3cw_gw44y_420",
-  "type-info": "awsui_type-info_mx3cw_gw44y_428"
+  "alert": "awsui_alert_mx3cw_bzq5z_193",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_bzq5z_1",
+  "root": "awsui_root_mx3cw_bzq5z_215",
+  "hidden": "awsui_hidden_mx3cw_bzq5z_250",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_bzq5z_299",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_bzq5z_311",
+  "header": "awsui_header_mx3cw_bzq5z_316",
+  "header-replacement": "awsui_header-replacement_mx3cw_bzq5z_317",
+  "action": "awsui_action_mx3cw_bzq5z_321",
+  "action-slot": "awsui_action-slot_mx3cw_bzq5z_325",
+  "action-button": "awsui_action-button_mx3cw_bzq5z_326",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_bzq5z_330",
+  "text": "awsui_text_mx3cw_bzq5z_361",
+  "icon": "awsui_icon_mx3cw_bzq5z_368",
+  "message": "awsui_message_mx3cw_bzq5z_371",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_bzq5z_375",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_bzq5z_379",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_bzq5z_383",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_bzq5z_387",
+  "content": "awsui_content_mx3cw_bzq5z_391",
+  "content-replacement": "awsui_content-replacement_mx3cw_bzq5z_392",
+  "dismiss": "awsui_dismiss_mx3cw_bzq5z_396",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_bzq5z_401",
+  "type-error": "awsui_type-error_mx3cw_bzq5z_405",
+  "type-warning": "awsui_type-warning_mx3cw_bzq5z_413",
+  "type-success": "awsui_type-success_mx3cw_bzq5z_421",
+  "type-info": "awsui_type-info_mx3cw_bzq5z_429"
 };
   

package/lib/internal/template/alert/styles.scoped.css

@@ -190,10 +190,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_alert_mx3cw_gw44y_193:not(#\9) {
-  animation: awsui_awsui-motion-fade-in_mx3cw_gw44y_1 var(--motion-duration-show-paced-agho9h, 180ms) var(--motion-easing-show-paced-vcekro, ease-out);
+.awsui_alert_mx3cw_bzq5z_193:not(#\9) {
+  animation: awsui_awsui-motion-fade-in_mx3cw_bzq5z_1 var(--motion-duration-show-paced-agho9h, 180ms) var(--motion-easing-show-paced-vcekro, ease-out);
 }
-@keyframes awsui_awsui-motion-fade-in_mx3cw_gw44y_1 {
+@keyframes awsui_awsui-motion-fade-in_mx3cw_bzq5z_1 {
   from {
     opacity: 0.2;
   }
@@ -202,17 +202,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_alert_mx3cw_gw44y_193:not(#\9) {
+  .awsui_alert_mx3cw_bzq5z_193:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_alert_mx3cw_gw44y_193:not(#\9), .awsui-mode-entering .awsui_alert_mx3cw_gw44y_193:not(#\9) {
+.awsui-motion-disabled .awsui_alert_mx3cw_bzq5z_193:not(#\9), .awsui-mode-entering .awsui_alert_mx3cw_bzq5z_193:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_mx3cw_gw44y_215:not(#\9) {
+.awsui_root_mx3cw_bzq5z_215:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -247,11 +247,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow: hidden;
   display: block;
 }
-.awsui_root_mx3cw_gw44y_215.awsui_hidden_mx3cw_gw44y_250:not(#\9) {
+.awsui_root_mx3cw_bzq5z_215.awsui_hidden_mx3cw_bzq5z_250:not(#\9) {
   display: none;
 }
 
-.awsui_alert_mx3cw_gw44y_193:not(#\9) {
+.awsui_alert_mx3cw_bzq5z_193:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -293,9 +293,10 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-block: var(--space-alert-vertical-7hsinh, 12px);
   padding-inline: var(--space-alert-horizontal-vvafy5, 20px);
   background-color: var(--color-background-container-content-aemn43, #ffffff);
+  --awsui-style-focus-ring-box-shadow-kcc2gu: 0 0 0 var(--awsui-style-focus-ring-border-width-kcc2gu, 2px) var(--awsui-style-focus-ring-border-color-kcc2gu, var(--color-border-item-focused-r5f6xl, #0073bb));
 }
 
-.awsui_alert-wrapper_mx3cw_gw44y_298:not(#\9) {
+.awsui_alert-wrapper_mx3cw_bzq5z_299:not(#\9) {
   flex: 1;
   display: flex;
   flex-direction: row;
@@ -303,46 +304,46 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   column-gap: var(--space-alert-action-left-ii45xs, 20px);
 }
 
-.awsui_hidden_mx3cw_gw44y_250:not(#\9) {
+.awsui_hidden_mx3cw_bzq5z_250:not(#\9) {
   display: none;
 }
 
-.awsui_initial-hidden_mx3cw_gw44y_310:not(#\9) {
+.awsui_initial-hidden_mx3cw_bzq5z_311:not(#\9) {
   overflow: hidden;
   block-size: 0;
 }
 
-.awsui_header_mx3cw_gw44y_315:not(#\9),
-.awsui_header-replacement_mx3cw_gw44y_316:not(#\9) {
+.awsui_header_mx3cw_bzq5z_316:not(#\9),
+.awsui_header-replacement_mx3cw_bzq5z_317:not(#\9) {
   font-weight: 700;
 }
 
-.awsui_action_mx3cw_gw44y_320:not(#\9) {
+.awsui_action_mx3cw_bzq5z_321:not(#\9) {
   white-space: nowrap;
 }
 
-.awsui_action-slot_mx3cw_gw44y_324:not(#\9),
-.awsui_action-button_mx3cw_gw44y_325:not(#\9) {
+.awsui_action-slot_mx3cw_bzq5z_325:not(#\9),
+.awsui_action-button_mx3cw_bzq5z_326:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_alert-focus-wrapper_mx3cw_gw44y_329:not(#\9) {
+.awsui_alert-focus-wrapper_mx3cw_bzq5z_330:not(#\9) {
   flex: 1;
   min-inline-size: 70%;
   display: grid;
   grid-template-columns: min-content auto;
 }
-.awsui_alert-focus-wrapper_mx3cw_gw44y_329:not(#\9):focus {
+.awsui_alert-focus-wrapper_mx3cw_bzq5z_330:not(#\9):focus {
   outline: none;
 }
-body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_gw44y_329:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_bzq5z_330:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_gw44y_329:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_bzq5z_330:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-button-focus-outline-gutter-vsdlzg, 3px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_gw44y_329:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_bzq5z_330:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -350,85 +351,85 @@ body[data-awsui-focus-visible=true] .awsui_alert-focus-wrapper_mx3cw_gw44y_329:n
   inset-block-start: calc(-1 * var(--space-button-focus-outline-gutter-vsdlzg, 3px));
   inline-size: calc(100% + var(--space-button-focus-outline-gutter-vsdlzg, 3px) + var(--space-button-focus-outline-gutter-vsdlzg, 3px));
   block-size: calc(100% + var(--space-button-focus-outline-gutter-vsdlzg, 3px) + var(--space-button-focus-outline-gutter-vsdlzg, 3px));
-  border-start-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-start-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-end-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
+  border-start-start-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-start-end-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-end-start-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  border-end-end-radius: var(--awsui-style-focus-ring-border-radius-kcc2gu, var(--border-radius-control-default-focus-ring-9xsko1, 2px));
+  box-shadow: var(--awsui-style-focus-ring-box-shadow-kcc2gu);
 }
 
-.awsui_text_mx3cw_gw44y_360:not(#\9) {
+.awsui_text_mx3cw_bzq5z_361:not(#\9) {
   min-inline-size: 0;
-  padding-block: var(--border-width-alert-5zfcv3, 1px);
+  padding-block: var(--border-width-button-40y1n5, 1px);
   padding-inline: 0;
   margin-block: var(--space-scaled-xxs-jatbiv, 4px);
   margin-inline: var(--space-xxs-jnczic, 4px);
 }
-.awsui_text_mx3cw_gw44y_360.awsui_icon_mx3cw_gw44y_367:not(#\9) {
+.awsui_text_mx3cw_bzq5z_361.awsui_icon_mx3cw_bzq5z_368:not(#\9) {
   margin-inline-start: 0;
 }
-.awsui_text_mx3cw_gw44y_360.awsui_message_mx3cw_gw44y_370:not(#\9) {
+.awsui_text_mx3cw_bzq5z_361.awsui_message_mx3cw_bzq5z_371:not(#\9) {
   margin-inline-end: var(--space-alert-message-right-ipx6aa, 0px);
 }
 
-.awsui_action-wrapped_mx3cw_gw44y_374:not(#\9) {
+.awsui_action-wrapped_mx3cw_bzq5z_375:not(#\9) {
   margin-block-end: var(--space-xxs-jnczic, 4px);
 }
 
-.awsui_icon-size-medium_mx3cw_gw44y_378 > .awsui_alert-wrapper_mx3cw_gw44y_298 > .awsui_action-wrapped_mx3cw_gw44y_374:not(#\9) {
+.awsui_icon-size-medium_mx3cw_bzq5z_379 > .awsui_alert-wrapper_mx3cw_bzq5z_299 > .awsui_action-wrapped_mx3cw_bzq5z_375:not(#\9) {
   margin-inline-start: calc(var(--size-icon-medium-3ovt3t, 16px) + var(--space-xs-kw7k3v, 8px));
 }
 
-.awsui_icon-size-big_mx3cw_gw44y_382 > .awsui_alert-wrapper_mx3cw_gw44y_298 > .awsui_action-wrapped_mx3cw_gw44y_374:not(#\9) {
+.awsui_icon-size-big_mx3cw_bzq5z_383 > .awsui_alert-wrapper_mx3cw_bzq5z_299 > .awsui_action-wrapped_mx3cw_bzq5z_375:not(#\9) {
   margin-inline-start: calc(var(--size-icon-big-hnqj8f, 32px) + var(--space-xs-kw7k3v, 8px));
 }
 
-.awsui_icon-size-normal_mx3cw_gw44y_386 > .awsui_alert-wrapper_mx3cw_gw44y_298 > .awsui_action-wrapped_mx3cw_gw44y_374:not(#\9) {
+.awsui_icon-size-normal_mx3cw_bzq5z_387 > .awsui_alert-wrapper_mx3cw_bzq5z_299 > .awsui_action-wrapped_mx3cw_bzq5z_375:not(#\9) {
   margin-inline-start: calc(var(--size-icon-normal-2f5zkr, 16px) + var(--space-xs-kw7k3v, 8px));
 }
 
-.awsui_content_mx3cw_gw44y_390:not(#\9),
-.awsui_content-replacement_mx3cw_gw44y_391:not(#\9) {
+.awsui_content_mx3cw_bzq5z_391:not(#\9),
+.awsui_content-replacement_mx3cw_bzq5z_392:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_dismiss_mx3cw_gw44y_395:not(#\9) {
+.awsui_dismiss_mx3cw_bzq5z_396:not(#\9) {
   margin-inline-end: calc(-1 * var(--space-xxs-jnczic, 4px));
   margin-inline-start: var(--space-s-4a5hs8, 12px);
 }
 
-.awsui_dismiss-button_mx3cw_gw44y_400:not(#\9) {
+.awsui_dismiss-button_mx3cw_bzq5z_401:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_type-error_mx3cw_gw44y_404:not(#\9) {
+.awsui_type-error_mx3cw_bzq5z_405:not(#\9) {
   border-color: var(--color-border-status-error-jybbdz, #d13212);
   background-color: var(--color-background-status-error-5i5ikf, #fdf3f1);
 }
-.awsui_type-error_mx3cw_gw44y_404 > .awsui_alert-wrapper_mx3cw_gw44y_298 > .awsui_alert-focus-wrapper_mx3cw_gw44y_329 > .awsui_icon_mx3cw_gw44y_367:not(#\9) {
+.awsui_type-error_mx3cw_bzq5z_405 > .awsui_alert-wrapper_mx3cw_bzq5z_299 > .awsui_alert-focus-wrapper_mx3cw_bzq5z_330 > .awsui_icon_mx3cw_bzq5z_368:not(#\9) {
   color: var(--color-text-status-error-aknuvu, #d13212);
 }
 
-.awsui_type-warning_mx3cw_gw44y_412:not(#\9) {
+.awsui_type-warning_mx3cw_bzq5z_413:not(#\9) {
   border-color: var(--color-border-status-warning-qmz1c4, #906806);
   background-color: var(--color-background-status-warning-mvw8w7, #fffef0);
 }
-.awsui_type-warning_mx3cw_gw44y_412 > .awsui_alert-wrapper_mx3cw_gw44y_298 > .awsui_alert-focus-wrapper_mx3cw_gw44y_329 > .awsui_icon_mx3cw_gw44y_367:not(#\9) {
+.awsui_type-warning_mx3cw_bzq5z_413 > .awsui_alert-wrapper_mx3cw_bzq5z_299 > .awsui_alert-focus-wrapper_mx3cw_bzq5z_330 > .awsui_icon_mx3cw_bzq5z_368:not(#\9) {
   color: var(--color-text-status-warning-9b45qh, #906806);
 }
 
-.awsui_type-success_mx3cw_gw44y_420:not(#\9) {
+.awsui_type-success_mx3cw_bzq5z_421:not(#\9) {
   border-color: var(--color-border-status-success-e61wev, #1d8102);
   background-color: var(--color-background-status-success-tkxjye, #f2f8f0);
 }
-.awsui_type-success_mx3cw_gw44y_420 > .awsui_alert-wrapper_mx3cw_gw44y_298 > .awsui_alert-focus-wrapper_mx3cw_gw44y_329 > .awsui_icon_mx3cw_gw44y_367:not(#\9) {
+.awsui_type-success_mx3cw_bzq5z_421 > .awsui_alert-wrapper_mx3cw_bzq5z_299 > .awsui_alert-focus-wrapper_mx3cw_bzq5z_330 > .awsui_icon_mx3cw_bzq5z_368:not(#\9) {
   color: var(--color-text-status-success-yodf3z, #1d8102);
 }
 
-.awsui_type-info_mx3cw_gw44y_428:not(#\9) {
+.awsui_type-info_mx3cw_bzq5z_429:not(#\9) {
   border-color: var(--color-border-status-info-kp0iif, #0073bb);
   background-color: var(--color-background-status-info-nzp1n3, #f1faff);
 }
-.awsui_type-info_mx3cw_gw44y_428 > .awsui_alert-wrapper_mx3cw_gw44y_298 > .awsui_alert-focus-wrapper_mx3cw_gw44y_329 > .awsui_icon_mx3cw_gw44y_367:not(#\9) {
+.awsui_type-info_mx3cw_bzq5z_429 > .awsui_alert-wrapper_mx3cw_bzq5z_299 > .awsui_alert-focus-wrapper_mx3cw_bzq5z_330 > .awsui_icon_mx3cw_bzq5z_368:not(#\9) {
   color: var(--color-text-status-info-xt2ka7, #0073bb);
 }

package/lib/internal/template/alert/styles.selectors.js

@@ -2,32 +2,32 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "alert": "awsui_alert_mx3cw_gw44y_193",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_gw44y_1",
-  "root": "awsui_root_mx3cw_gw44y_215",
-  "hidden": "awsui_hidden_mx3cw_gw44y_250",
-  "alert-wrapper": "awsui_alert-wrapper_mx3cw_gw44y_298",
-  "initial-hidden": "awsui_initial-hidden_mx3cw_gw44y_310",
-  "header": "awsui_header_mx3cw_gw44y_315",
-  "header-replacement": "awsui_header-replacement_mx3cw_gw44y_316",
-  "action": "awsui_action_mx3cw_gw44y_320",
-  "action-slot": "awsui_action-slot_mx3cw_gw44y_324",
-  "action-button": "awsui_action-button_mx3cw_gw44y_325",
-  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_gw44y_329",
-  "text": "awsui_text_mx3cw_gw44y_360",
-  "icon": "awsui_icon_mx3cw_gw44y_367",
-  "message": "awsui_message_mx3cw_gw44y_370",
-  "action-wrapped": "awsui_action-wrapped_mx3cw_gw44y_374",
-  "icon-size-medium": "awsui_icon-size-medium_mx3cw_gw44y_378",
-  "icon-size-big": "awsui_icon-size-big_mx3cw_gw44y_382",
-  "icon-size-normal": "awsui_icon-size-normal_mx3cw_gw44y_386",
-  "content": "awsui_content_mx3cw_gw44y_390",
-  "content-replacement": "awsui_content-replacement_mx3cw_gw44y_391",
-  "dismiss": "awsui_dismiss_mx3cw_gw44y_395",
-  "dismiss-button": "awsui_dismiss-button_mx3cw_gw44y_400",
-  "type-error": "awsui_type-error_mx3cw_gw44y_404",
-  "type-warning": "awsui_type-warning_mx3cw_gw44y_412",
-  "type-success": "awsui_type-success_mx3cw_gw44y_420",
-  "type-info": "awsui_type-info_mx3cw_gw44y_428"
+  "alert": "awsui_alert_mx3cw_bzq5z_193",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_mx3cw_bzq5z_1",
+  "root": "awsui_root_mx3cw_bzq5z_215",
+  "hidden": "awsui_hidden_mx3cw_bzq5z_250",
+  "alert-wrapper": "awsui_alert-wrapper_mx3cw_bzq5z_299",
+  "initial-hidden": "awsui_initial-hidden_mx3cw_bzq5z_311",
+  "header": "awsui_header_mx3cw_bzq5z_316",
+  "header-replacement": "awsui_header-replacement_mx3cw_bzq5z_317",
+  "action": "awsui_action_mx3cw_bzq5z_321",
+  "action-slot": "awsui_action-slot_mx3cw_bzq5z_325",
+  "action-button": "awsui_action-button_mx3cw_bzq5z_326",
+  "alert-focus-wrapper": "awsui_alert-focus-wrapper_mx3cw_bzq5z_330",
+  "text": "awsui_text_mx3cw_bzq5z_361",
+  "icon": "awsui_icon_mx3cw_bzq5z_368",
+  "message": "awsui_message_mx3cw_bzq5z_371",
+  "action-wrapped": "awsui_action-wrapped_mx3cw_bzq5z_375",
+  "icon-size-medium": "awsui_icon-size-medium_mx3cw_bzq5z_379",
+  "icon-size-big": "awsui_icon-size-big_mx3cw_bzq5z_383",
+  "icon-size-normal": "awsui_icon-size-normal_mx3cw_bzq5z_387",
+  "content": "awsui_content_mx3cw_bzq5z_391",
+  "content-replacement": "awsui_content-replacement_mx3cw_bzq5z_392",
+  "dismiss": "awsui_dismiss_mx3cw_bzq5z_396",
+  "dismiss-button": "awsui_dismiss-button_mx3cw_bzq5z_401",
+  "type-error": "awsui_type-error_mx3cw_bzq5z_405",
+  "type-warning": "awsui_type-warning_mx3cw_bzq5z_413",
+  "type-success": "awsui_type-success_mx3cw_bzq5z_421",
+  "type-info": "awsui_type-info_mx3cw_bzq5z_429"
 };
   

package/lib/internal/template/container/interfaces.d.ts

@@ -68,6 +68,25 @@ export interface ContainerProps extends BaseComponentProps {
      * @visualrefresh `stacked` variant
      */
     variant?: 'default' | 'stacked';
+    /**
+     * Specifies an object of selectors and properties that are used to apply custom styles.
+     *
+     * - `root.background` (string) - (Optional) Background of the container.
+     * - `root.borderColor` (string) - (Optional) Border color of the container.
+     * - `root.borderRadius` (string) - (Optional) Border radius of the container.
+     * - `root.borderWidth` (string) - (Optional) Border width of the container.
+     * - `root.boxShadow` (string) - (Optional) Box shadow of the container.
+     * - `content.paddingBlock` (string) - (Optional) Block dimension padding of the content slot.
+     * - `content.paddingInline` (string) - (Optional) Inline dimension padding of the content slot.
+     * - `header.paddingBlock` (string) - (Optional) Block dimension padding of the header slot.
+     * - `header.paddingInline` (string) - (Optional) Inline dimension padding of the header slot.
+     * - `footer.root.paddingBlock` (string) - (Optional) Block dimension padding of the footer slot.
+     * - `footer.root.paddingInline` (string) - (Optional) Inline dimension padding of the footer slot.
+     * - `footer.divider.borderColor` (string) - (Optional) Border color of the footer divider.
+     * - `footer.divider.borderWidth` (string) - (Optional) Border width of the footer divider.
+     * @awsuiSystem core
+     */
+    style?: ContainerProps.Style;
 }
 export declare namespace ContainerProps {
     interface AnalyticsMetadata {
@@ -99,5 +118,32 @@ export declare namespace ContainerProps {
          */
         height?: string | number;
     }
+    interface Style {
+        root?: {
+            background?: string;
+            borderColor?: string;
+            borderRadius?: string;
+            borderWidth?: string;
+            boxShadow?: string;
+        };
+        content?: {
+            paddingBlock?: string;
+            paddingInline?: string;
+        };
+        header?: {
+            paddingBlock?: string;
+            paddingInline?: string;
+        };
+        footer?: {
+            root: {
+                paddingBlock?: string;
+                paddingInline?: string;
+            };
+            divider: {
+                borderColor?: string;
+                borderWidth?: string;
+            };
+        };
+    }
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/container/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/container/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC;IAErD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;;;;;;;;;;;;;OAkBG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;IACD,UAAiB,KAAK;QACpB;;WAEG;QACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QAEzB;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;QAE1B;;;;;;WAMG;QACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAExB;;;;;;WAMG;QACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAC1B;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/container/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;OAIG;IACH,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC;IAErD;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;;;;;;;;;;;;;OAkBG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;IAE7B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAEhC;;;;;;;;;;;;;;;;;OAiBG;IACH,KAAK,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC;CAC9B;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;KAC7B;IACD,UAAiB,KAAK;QACpB;;WAEG;QACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;QAEzB;;WAEG;QACH,QAAQ,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;QAE1B;;;;;;WAMG;QACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;QAExB;;;;;;WAMG;QACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;KAC1B;IAED,UAAiB,KAAK;QACpB,IAAI,CAAC,EAAE;YACL,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB,SAAS,CAAC,EAAE,MAAM,CAAC;SACpB,CAAC;QACF,OAAO,CAAC,EAAE;YACR,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,MAAM,CAAC,EAAE;YACP,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB,aAAa,CAAC,EAAE,MAAM,CAAC;SACxB,CAAC;QACF,MAAM,CAAC,EAAE;YACP,IAAI,EAAE;gBACJ,YAAY,CAAC,EAAE,MAAM,CAAC;gBACtB,aAAa,CAAC,EAAE,MAAM,CAAC;aACxB,CAAC;YACF,OAAO,EAAE;gBACP,WAAW,CAAC,EAAE,MAAM,CAAC;gBACrB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,CAAC;SACH,CAAC;KACH;CACF"}

package/lib/internal/template/container/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/container/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface ContainerProps extends BaseComponentProps {\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * @analytics\n   */\n  analyticsMetadata?: ContainerProps.AnalyticsMetadata;\n\n  /**\n   * Heading element of the container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Determines whether the container header has padding. If `true`, removes the default padding from the header.\n   */\n  disableHeaderPaddings?: boolean;\n\n  /**\n   *\n   * Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'.\n   * You can define different positions and sizes for the media element within the container.\n   *\n   * * `content` - Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.\n   *\n   * * `position` - Defines the media slot's position within the container. Defaults to `top`.\n   *\n   * * `width` - Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.\n   * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.\n   * Note: This value is considered only when `position` is set to `side`.\n   * If no width is provided, the media slot will take a maximum of 66% of the container's width.\n   *\n   * * `height` - Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.\n   * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.   * Note: This value is only considered if `position` is set to `top`.\n   * If no height is provided, the media slot will be displayed at its full height.\n   *\n   */\n  media?: ContainerProps.Media;\n\n  /**\n   * Main content of the container.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Determines whether the container content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Enabling this property will make the container to fit into available height. If content is too short, the container\n   * will stretch, if too long, the container will shrink and show vertical scrollbar.\n   *\n   * Use this property to align heights of multiple containers displayed in a single row. It is recommended to stretch\n   * all containers to the height of the longest one, to avoid extra vertical scroll areas.\n   */\n  fitHeight?: boolean;\n\n  /**\n   * Footer of the container.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Determines whether the container footer has padding. If `true`, removes the default padding from the footer.\n   * @awsuiSystem core\n   */\n  disableFooterPaddings?: boolean;\n\n  /**\n   * Specify a container variant with one of the following:\n   * * `default` - Use this variant in standalone context.\n   * * `stacked` - Use this variant adjacent to other stacked containers (such as a container,\n   *               table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: 'default' | 'stacked';\n}\n\nexport namespace ContainerProps {\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n  }\n  export interface Media {\n    /**\n     * Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.\n     */\n    content: React.ReactNode;\n\n    /**\n     * Defines the media slot's position within the container. Defaults to `top`.\n     */\n    position?: 'top' | 'side';\n\n    /**\n     * Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.\n     * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.\n     *\n     * Note: This value is considered only when `position` is set to `side`.\n     * If no width is provided, the media slot will take a maximum of 66% of the container's width.\n     */\n    width?: string | number;\n\n    /**\n     * Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.\n     * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.\n     *\n     * Note: This value is only considered if `position` is set to `top`.\n     * If no height is provided, the media slot will be displayed at its full height.\n     */\n    height?: string | number;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/container/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface ContainerProps extends BaseComponentProps {\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * @analytics\n   */\n  analyticsMetadata?: ContainerProps.AnalyticsMetadata;\n\n  /**\n   * Heading element of the container. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Determines whether the container header has padding. If `true`, removes the default padding from the header.\n   */\n  disableHeaderPaddings?: boolean;\n\n  /**\n   *\n   * Use this slot to render a media element. Supported element types are 'img', 'video', and 'picture'.\n   * You can define different positions and sizes for the media element within the container.\n   *\n   * * `content` - Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.\n   *\n   * * `position` - Defines the media slot's position within the container. Defaults to `top`.\n   *\n   * * `width` - Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.\n   * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.\n   * Note: This value is considered only when `position` is set to `side`.\n   * If no width is provided, the media slot will take a maximum of 66% of the container's width.\n   *\n   * * `height` - Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.\n   * When this value is set, media elements larger than the defined width may be cropped, with 'object-fit: cover' centering it.   * Note: This value is only considered if `position` is set to `top`.\n   * If no height is provided, the media slot will be displayed at its full height.\n   *\n   */\n  media?: ContainerProps.Media;\n\n  /**\n   * Main content of the container.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Determines whether the container content has padding. If `true`, removes the default padding from the content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * Enabling this property will make the container to fit into available height. If content is too short, the container\n   * will stretch, if too long, the container will shrink and show vertical scrollbar.\n   *\n   * Use this property to align heights of multiple containers displayed in a single row. It is recommended to stretch\n   * all containers to the height of the longest one, to avoid extra vertical scroll areas.\n   */\n  fitHeight?: boolean;\n\n  /**\n   * Footer of the container.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Determines whether the container footer has padding. If `true`, removes the default padding from the footer.\n   * @awsuiSystem core\n   */\n  disableFooterPaddings?: boolean;\n\n  /**\n   * Specify a container variant with one of the following:\n   * * `default` - Use this variant in standalone context.\n   * * `stacked` - Use this variant adjacent to other stacked containers (such as a container,\n   *               table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: 'default' | 'stacked';\n\n  /**\n   * Specifies an object of selectors and properties that are used to apply custom styles.\n   *\n   * - `root.background` (string) - (Optional) Background of the container.\n   * - `root.borderColor` (string) - (Optional) Border color of the container.\n   * - `root.borderRadius` (string) - (Optional) Border radius of the container.\n   * - `root.borderWidth` (string) - (Optional) Border width of the container.\n   * - `root.boxShadow` (string) - (Optional) Box shadow of the container.\n   * - `content.paddingBlock` (string) - (Optional) Block dimension padding of the content slot.\n   * - `content.paddingInline` (string) - (Optional) Inline dimension padding of the content slot.\n   * - `header.paddingBlock` (string) - (Optional) Block dimension padding of the header slot.\n   * - `header.paddingInline` (string) - (Optional) Inline dimension padding of the header slot.\n   * - `footer.root.paddingBlock` (string) - (Optional) Block dimension padding of the footer slot.\n   * - `footer.root.paddingInline` (string) - (Optional) Inline dimension padding of the footer slot.\n   * - `footer.divider.borderColor` (string) - (Optional) Border color of the footer divider.\n   * - `footer.divider.borderWidth` (string) - (Optional) Border width of the footer divider.\n   * @awsuiSystem core\n   */\n  style?: ContainerProps.Style;\n}\n\nexport namespace ContainerProps {\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n  }\n  export interface Media {\n    /**\n     * Use this slot to render your media element. We support `img`, `video`, `picture`, and `iframe` elements.\n     */\n    content: React.ReactNode;\n\n    /**\n     * Defines the media slot's position within the container. Defaults to `top`.\n     */\n    position?: 'top' | 'side';\n\n    /**\n     * Defines the width of the media slot when positioned on the side. Corresponds to the `width` CSS-property.\n     * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.\n     *\n     * Note: This value is considered only when `position` is set to `side`.\n     * If no width is provided, the media slot will take a maximum of 66% of the container's width.\n     */\n    width?: string | number;\n\n    /**\n     * Defines the height of the media slot when position on the top. Corresponds to the `height` CSS-property.\n     * When this value is set, the media element may be cropped, with `object-fit: cover` centering it.\n     *\n     * Note: This value is only considered if `position` is set to `top`.\n     * If no height is provided, the media slot will be displayed at its full height.\n     */\n    height?: string | number;\n  }\n\n  export interface Style {\n    root?: {\n      background?: string;\n      borderColor?: string;\n      borderRadius?: string;\n      borderWidth?: string;\n      boxShadow?: string;\n    };\n    content?: {\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n    header?: {\n      paddingBlock?: string;\n      paddingInline?: string;\n    };\n    footer?: {\n      root: {\n        paddingBlock?: string;\n        paddingInline?: string;\n      };\n      divider: {\n        borderColor?: string;\n        borderWidth?: string;\n      };\n    };\n  }\n}\n"]}

package/lib/internal/template/container/internal.d.ts

@@ -23,5 +23,5 @@ export interface InternalContainerProps extends Omit<ContainerProps, 'variant'>,
     __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];
 }
 export declare function InternalContainerAsSubstep(props: InternalContainerProps): JSX.Element;
-export default function InternalContainer({ header, footer, children, variant, disableHeaderPaddings, disableContentPaddings, disableFooterPaddings, fitHeight, media, __stickyOffset, __mobileStickyOffset, __stickyHeader, __internalRootRef, __disableFooterDivider, __hiddenContent, __headerRef, __fullPage, __disableStickyMobile, __funnelSubStepProps, __subStepRef, ...restProps }: InternalContainerProps): JSX.Element;
+export default function InternalContainer({ header, footer, children, variant, disableHeaderPaddings, disableContentPaddings, disableFooterPaddings, fitHeight, media, style, __stickyOffset, __mobileStickyOffset, __stickyHeader, __internalRootRef, __disableFooterDivider, __hiddenContent, __headerRef, __fullPage, __disableStickyMobile, __funnelSubStepProps, __subStepRef, ...restProps }: InternalContainerProps): JSX.Element;
 //# sourceMappingURL=internal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAO9C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;CAClE;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,sBAAsB,eAWvE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,qBAA6B,EAC7B,SAAS,EACT,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,eAAuB,EACvB,WAAW,EACX,UAAkB,EAClB,qBAA4B,EAC5B,oBAAoB,EACpB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,sBAAsB,eAgHxB"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/container/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,gBAAgB,EAAE,MAAM,wCAAwC,CAAC;AAI1E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAQ9C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,0BAA0B;IACzG,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IAC9C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;IAEzE,oBAAoB,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC;IACjF,YAAY,CAAC,EAAE,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC,YAAY,CAAC,CAAC;CAClE;AAED,wBAAgB,0BAA0B,CAAC,KAAK,EAAE,sBAAsB,eAWvE;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,MAAM,EACN,MAAM,EACN,QAAQ,EACR,OAAmB,EACnB,qBAA6B,EAC7B,sBAA8B,EAC9B,qBAA6B,EAC7B,SAAS,EACT,KAAK,EACL,KAAK,EACL,cAAc,EACd,oBAAoB,EACpB,cAAsB,EACtB,iBAAwB,EACxB,sBAA8B,EAC9B,eAAuB,EACvB,WAAW,EACX,UAAkB,EAClB,qBAA4B,EAC5B,oBAAoB,EACpB,YAAY,EACZ,GAAG,SAAS,EACb,EAAE,sBAAsB,eA2HxB"}

package/lib/internal/template/container/internal.js

@@ -11,6 +11,7 @@ import { ContainerHeaderContextProvider } from '../internal/context/container-he
 import { useModalContext } from '../internal/context/modal-context';
 import { useMobile } from '../internal/hooks/use-mobile';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from './style';
 import { StickyHeaderContext, useStickyHeader } from './use-sticky-header';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
@@ -22,7 +23,7 @@ export function InternalContainerAsSubstep(props) {
 }
 export default function InternalContainer(_a) {
     var _b;
-    var { header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, disableFooterPaddings = false, fitHeight, media, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef = null, __disableFooterDivider = false, __hiddenContent = false, __headerRef, __fullPage = false, __disableStickyMobile = true, __funnelSubStepProps, __subStepRef } = _a, restProps = __rest(_a, ["header", "footer", "children", "variant", "disableHeaderPaddings", "disableContentPaddings", "disableFooterPaddings", "fitHeight", "media", "__stickyOffset", "__mobileStickyOffset", "__stickyHeader", "__internalRootRef", "__disableFooterDivider", "__hiddenContent", "__headerRef", "__fullPage", "__disableStickyMobile", "__funnelSubStepProps", "__subStepRef"]);
+    var { header, footer, children, variant = 'default', disableHeaderPaddings = false, disableContentPaddings = false, disableFooterPaddings = false, fitHeight, media, style, __stickyOffset, __mobileStickyOffset, __stickyHeader = false, __internalRootRef = null, __disableFooterDivider = false, __hiddenContent = false, __headerRef, __fullPage = false, __disableStickyMobile = true, __funnelSubStepProps, __subStepRef } = _a, restProps = __rest(_a, ["header", "footer", "children", "variant", "disableHeaderPaddings", "disableContentPaddings", "disableFooterPaddings", "fitHeight", "media", "style", "__stickyOffset", "__mobileStickyOffset", "__stickyHeader", "__internalRootRef", "__disableFooterDivider", "__hiddenContent", "__headerRef", "__fullPage", "__disableStickyMobile", "__funnelSubStepProps", "__subStepRef"]);
     const isMobile = useMobile();
     const isRefresh = useVisualRefresh();
     const baseProps = getBaseProps(restProps);
@@ -38,12 +39,13 @@ export default function InternalContainer(_a) {
     const shouldHaveStickyStyles = isSticky && !isMobile;
     const hasMedia = !!(media === null || media === void 0 ? void 0 : media.content);
     const mediaPosition = (_b = media === null || media === void 0 ? void 0 : media.position) !== null && _b !== void 0 ? _b : 'top';
-    return (React.createElement("div", Object.assign({}, baseProps, __funnelSubStepProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']), shouldHaveStickyStyles && [styles['sticky-enabled']], shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']], isRefresh && styles.refresh), ref: mergedRef }, getAnalyticsLabelAttribute(`.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`)),
-        hasMedia && (React.createElement("div", { className: clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media), style: mediaPosition === 'top' ? { height: (media === null || media === void 0 ? void 0 : media.height) || '' } : { width: (media === null || media === void 0 ? void 0 : media.width) || '' } }, media.content)),
+    return (React.createElement("div", Object.assign({}, baseProps, __funnelSubStepProps, { className: clsx(baseProps.className, styles.root, styles[`variant-${variant}`], fitHeight && styles['fit-height'], hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']), shouldHaveStickyStyles && [styles['sticky-enabled']], shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']], isRefresh && styles.refresh), ref: mergedRef }, getAnalyticsLabelAttribute(`.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`), { style: getRootStyles(style) }),
+        hasMedia && (React.createElement("div", { className: clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media), style: mediaPosition === 'top'
+                ? Object.assign(Object.assign({}, getMediaStyles(mediaPosition, style)), { height: (media === null || media === void 0 ? void 0 : media.height) || '' }) : Object.assign(Object.assign({}, getMediaStyles(mediaPosition, style)), { width: (media === null || media === void 0 ? void 0 : media.width) || '' }) }, media.content)),
         React.createElement("div", { id: contentId, ref: __subStepRef, className: clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height']) },
             header && (React.createElement(ContainerHeaderContextProvider, null,
                 React.createElement(StickyHeaderContext.Provider, { value: { isStuck, isStuckAtBottom } },
-                    React.createElement("div", Object.assign({ className: clsx(isRefresh && styles.refresh, styles.header, analyticsSelectors.header, styles[`header-variant-${variant}`], {
+                    React.createElement("div", { className: clsx(isRefresh && styles.refresh, styles.header, analyticsSelectors.header, styles[`header-variant-${variant}`], {
                             [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,
                             [styles['header-sticky-enabled']]: isSticky,
                             [styles['header-dynamic-height']]: hasDynamicHeight,
@@ -52,17 +54,17 @@ export default function InternalContainer(_a) {
                             [styles['with-hidden-content']]: !children || __hiddenContent,
                             [styles['header-with-media']]: hasMedia,
                             [styles['header-full-page']]: __fullPage && isRefresh,
-                        }) }, stickyStyles, { ref: headerMergedRef }),
+                        }), ref: headerMergedRef, style: Object.assign(Object.assign({}, stickyStyles.style), getHeaderStyles(style)) },
                         isStuck && !isMobile && isRefresh && __fullPage && React.createElement("div", { className: styles['header-cover'] }),
                         header)))),
             React.createElement("div", { className: clsx(styles.content, fitHeight && styles['content-fit-height']) },
                 React.createElement("div", { className: clsx(styles['content-inner'], testStyles['content-inner'], {
                         [styles['with-paddings']]: !disableContentPaddings,
                         [styles['with-header']]: !!header,
-                    }) }, children)),
+                    }), style: getContentStyles(style) }, children)),
             footer && (React.createElement("div", { className: clsx(styles.footer, {
                     [styles['with-divider']]: !__disableFooterDivider,
                     [styles['with-paddings']]: !disableFooterPaddings,
-                }) }, footer)))));
+                }), style: getFooterStyles(style) }, footer)))));
 }
 //# sourceMappingURL=internal.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/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';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { ContainerProps } from './interfaces';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  disableFooterPaddings?: boolean;\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __fullPage?: boolean;\n  __disableStickyMobile?: boolean;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n  __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n  __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n  const modalContext = useModalContext();\n\n  return (\n    <InternalContainer\n      {...props}\n      __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n      __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n    />\n  );\n}\n\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  disableFooterPaddings = false,\n  fitHeight,\n  media,\n  __stickyOffset,\n  __mobileStickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __hiddenContent = false,\n  __headerRef,\n  __fullPage = false,\n  __disableStickyMobile = true,\n  __funnelSubStepProps,\n  __subStepRef,\n  ...restProps\n}: InternalContainerProps) {\n  const isMobile = useMobile();\n  const isRefresh = useVisualRefresh();\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, isStuckAtBottom, stickyStyles } = useStickyHeader(\n    rootRef,\n    headerRef,\n    __stickyHeader,\n    __stickyOffset,\n    __mobileStickyOffset,\n    __disableStickyMobile,\n    __fullPage && isRefresh && !isMobile\n  );\n  const contentId = useUniqueId();\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n  // The container is only sticky on mobile if it is the header for the table.\n  // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n  const shouldHaveStickyStyles = isSticky && !isMobile;\n\n  const hasMedia = !!media?.content;\n  const mediaPosition = media?.position ?? 'top';\n  return (\n    <div\n      {...baseProps}\n      {...__funnelSubStepProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n        shouldHaveStickyStyles && [styles['sticky-enabled']],\n        shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']],\n        isRefresh && styles.refresh\n      )}\n      ref={mergedRef}\n      {...getAnalyticsLabelAttribute(\n        `.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`\n      )}\n    >\n      {hasMedia && (\n        <div\n          className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n          style={mediaPosition === 'top' ? { height: media?.height || '' } : { width: media?.width || '' }}\n        >\n          {media.content}\n        </div>\n      )}\n      <div\n        id={contentId}\n        ref={__subStepRef}\n        className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n      >\n        {header && (\n          <ContainerHeaderContextProvider>\n            <StickyHeaderContext.Provider value={{ isStuck, isStuckAtBottom }}>\n              <div\n                className={clsx(\n                  isRefresh && styles.refresh,\n                  styles.header,\n                  analyticsSelectors.header,\n                  styles[`header-variant-${variant}`],\n                  {\n                    [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n                    [styles['header-sticky-enabled']]: isSticky,\n                    [styles['header-dynamic-height']]: hasDynamicHeight,\n                    [styles['header-stuck']]: isStuck,\n                    [styles['with-paddings']]: !disableHeaderPaddings,\n                    [styles['with-hidden-content']]: !children || __hiddenContent,\n                    [styles['header-with-media']]: hasMedia,\n                    [styles['header-full-page']]: __fullPage && isRefresh,\n                  }\n                )}\n                {...stickyStyles}\n                ref={headerMergedRef}\n              >\n                {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n                {header}\n              </div>\n            </StickyHeaderContext.Provider>\n          </ContainerHeaderContextProvider>\n        )}\n        <div className={clsx(styles.content, fitHeight && styles['content-fit-height'])}>\n          <div\n            className={clsx(styles['content-inner'], testStyles['content-inner'], {\n              [styles['with-paddings']]: !disableContentPaddings,\n              [styles['with-header']]: !!header,\n            })}\n          >\n            {children}\n          </div>\n        </div>\n        {footer && (\n          <div\n            className={clsx(styles.footer, {\n              [styles['with-divider']]: !__disableFooterDivider,\n              [styles['with-paddings']]: !disableFooterPaddings,\n            })}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/container/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';\n\nimport { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsLabelAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';\nimport { getBaseProps } from '../internal/base-component';\nimport { ContainerHeaderContextProvider } from '../internal/context/container-header';\nimport { useModalContext } from '../internal/context/modal-context';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { ContainerProps } from './interfaces';\nimport { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from './style';\nimport { StickyHeaderContext, useStickyHeader } from './use-sticky-header';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\nimport testStyles from './test-classes/styles.css.js';\n\nexport interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {\n  disableFooterPaddings?: boolean;\n  __stickyHeader?: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  __disableFooterDivider?: boolean;\n  __hiddenContent?: boolean;\n  __headerRef?: React.RefObject<HTMLDivElement>;\n  __fullPage?: boolean;\n  __disableStickyMobile?: boolean;\n  /**\n   * Additional internal variant:\n   * * `embedded` - Use this variant within a parent container (such as a modal,\n   *                expandable section, container or split panel).\n   * * `full-page` – Only for internal use in table, cards and other components\n   */\n  variant?: ContainerProps['variant'] | 'embedded' | 'full-page' | 'cards';\n\n  __funnelSubStepProps?: ReturnType<typeof useFunnelSubStep>['funnelSubStepProps'];\n  __subStepRef?: ReturnType<typeof useFunnelSubStep>['subStepRef'];\n}\n\nexport function InternalContainerAsSubstep(props: InternalContainerProps) {\n  const { subStepRef, funnelSubStepProps } = useFunnelSubStep();\n  const modalContext = useModalContext();\n\n  return (\n    <InternalContainer\n      {...props}\n      __subStepRef={modalContext?.isInModal ? { current: null } : subStepRef}\n      __funnelSubStepProps={modalContext?.isInModal ? {} : funnelSubStepProps}\n    />\n  );\n}\n\nexport default function InternalContainer({\n  header,\n  footer,\n  children,\n  variant = 'default',\n  disableHeaderPaddings = false,\n  disableContentPaddings = false,\n  disableFooterPaddings = false,\n  fitHeight,\n  media,\n  style,\n  __stickyOffset,\n  __mobileStickyOffset,\n  __stickyHeader = false,\n  __internalRootRef = null,\n  __disableFooterDivider = false,\n  __hiddenContent = false,\n  __headerRef,\n  __fullPage = false,\n  __disableStickyMobile = true,\n  __funnelSubStepProps,\n  __subStepRef,\n  ...restProps\n}: InternalContainerProps) {\n  const isMobile = useMobile();\n  const isRefresh = useVisualRefresh();\n  const baseProps = getBaseProps(restProps);\n  const rootRef = useRef<HTMLDivElement>(null);\n  const headerRef = useRef<HTMLDivElement>(null);\n  const { isSticky, isStuck, isStuckAtBottom, stickyStyles } = useStickyHeader(\n    rootRef,\n    headerRef,\n    __stickyHeader,\n    __stickyOffset,\n    __mobileStickyOffset,\n    __disableStickyMobile,\n    __fullPage && isRefresh && !isMobile\n  );\n  const contentId = useUniqueId();\n\n  const hasDynamicHeight = isRefresh && variant === 'full-page';\n\n  const mergedRef = useMergeRefs(rootRef, __internalRootRef);\n  const headerMergedRef = useMergeRefs(headerRef, __headerRef);\n\n  // The container is only sticky on mobile if it is the header for the table.\n  // In this case we don't want the container to have sticky styles, as only the table header row will show as stuck on scroll.\n  const shouldHaveStickyStyles = isSticky && !isMobile;\n\n  const hasMedia = !!media?.content;\n  const mediaPosition = media?.position ?? 'top';\n\n  return (\n    <div\n      {...baseProps}\n      {...__funnelSubStepProps}\n      className={clsx(\n        baseProps.className,\n        styles.root,\n        styles[`variant-${variant}`],\n        fitHeight && styles['fit-height'],\n        hasMedia && (mediaPosition === 'side' ? styles['with-side-media'] : styles['with-top-media']),\n        shouldHaveStickyStyles && [styles['sticky-enabled']],\n        shouldHaveStickyStyles && isStuck && isStuckAtBottom && [styles['with-stuck-sticky-header-at-bottom']],\n        isRefresh && styles.refresh\n      )}\n      ref={mergedRef}\n      {...getAnalyticsLabelAttribute(\n        `.${analyticsSelectors.header} h1, .${analyticsSelectors.header} h2, .${analyticsSelectors.header} h3`\n      )}\n      style={getRootStyles(style)}\n    >\n      {hasMedia && (\n        <div\n          className={clsx(styles[`media-${mediaPosition === 'side' ? 'side' : 'top'}`], styles.media)}\n          style={\n            mediaPosition === 'top'\n              ? { ...getMediaStyles(mediaPosition, style), height: media?.height || '' }\n              : { ...getMediaStyles(mediaPosition, style), width: media?.width || '' }\n          }\n        >\n          {media.content}\n        </div>\n      )}\n      <div\n        id={contentId}\n        ref={__subStepRef}\n        className={clsx(styles['content-wrapper'], fitHeight && styles['content-wrapper-fit-height'])}\n      >\n        {header && (\n          <ContainerHeaderContextProvider>\n            <StickyHeaderContext.Provider value={{ isStuck, isStuckAtBottom }}>\n              <div\n                className={clsx(\n                  isRefresh && styles.refresh,\n                  styles.header,\n                  analyticsSelectors.header,\n                  styles[`header-variant-${variant}`],\n                  {\n                    [styles['header-sticky-disabled']]: __stickyHeader && !isSticky,\n                    [styles['header-sticky-enabled']]: isSticky,\n                    [styles['header-dynamic-height']]: hasDynamicHeight,\n                    [styles['header-stuck']]: isStuck,\n                    [styles['with-paddings']]: !disableHeaderPaddings,\n                    [styles['with-hidden-content']]: !children || __hiddenContent,\n                    [styles['header-with-media']]: hasMedia,\n                    [styles['header-full-page']]: __fullPage && isRefresh,\n                  }\n                )}\n                ref={headerMergedRef}\n                style={{\n                  ...stickyStyles.style,\n                  ...getHeaderStyles(style),\n                }}\n              >\n                {isStuck && !isMobile && isRefresh && __fullPage && <div className={styles['header-cover']}></div>}\n                {header}\n              </div>\n            </StickyHeaderContext.Provider>\n          </ContainerHeaderContextProvider>\n        )}\n        <div className={clsx(styles.content, fitHeight && styles['content-fit-height'])}>\n          <div\n            className={clsx(styles['content-inner'], testStyles['content-inner'], {\n              [styles['with-paddings']]: !disableContentPaddings,\n              [styles['with-header']]: !!header,\n            })}\n            style={getContentStyles(style)}\n          >\n            {children}\n          </div>\n        </div>\n        {footer && (\n          <div\n            className={clsx(styles.footer, {\n              [styles['with-divider']]: !__disableFooterDivider,\n              [styles['with-paddings']]: !disableFooterPaddings,\n            })}\n            style={getFooterStyles(style)}\n          >\n            {footer}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

package/lib/internal/template/container/style.d.ts

@@ -0,0 +1,7 @@
+import { ContainerProps } from './interfaces';
+export declare function getRootStyles(style: ContainerProps.Style | undefined): {};
+export declare function getContentStyles(style: ContainerProps.Style | undefined): {};
+export declare function getHeaderStyles(style: ContainerProps.Style | undefined): {};
+export declare function getFooterStyles(style: ContainerProps.Style | undefined): {};
+export declare function getMediaStyles(mediaPosition: string, style: ContainerProps.Style | undefined): {};
+//# sourceMappingURL=style.d.ts.map

package/lib/internal/template/container/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/container/style.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAE9C,wBAAgB,aAAa,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,SAAS,MAcpE;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,SAAS,MAWvE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,SAAS,MAatE;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,SAAS,MAatE;AAED,wBAAgB,cAAc,CAAC,aAAa,EAAE,MAAM,EAAE,KAAK,EAAE,cAAc,CAAC,KAAK,GAAG,SAAS,MAY5F"}

package/lib/internal/template/container/style.js

@@ -0,0 +1,58 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+export function getRootStyles(style) {
+    var _a, _b, _c, _d, _e;
+    let properties = {};
+    if (SYSTEM === 'core' && (style === null || style === void 0 ? void 0 : style.root)) {
+        properties = {
+            background: (_a = style.root) === null || _a === void 0 ? void 0 : _a.background,
+            borderColor: (_b = style.root) === null || _b === void 0 ? void 0 : _b.borderColor,
+            borderRadius: (_c = style.root) === null || _c === void 0 ? void 0 : _c.borderRadius,
+            borderWidth: (_d = style.root) === null || _d === void 0 ? void 0 : _d.borderWidth,
+            boxShadow: (_e = style.root) === null || _e === void 0 ? void 0 : _e.boxShadow,
+        };
+    }
+    return properties;
+}
+export function getContentStyles(style) {
+    var _a, _b;
+    let properties = {};
+    if (SYSTEM === 'core' && (style === null || style === void 0 ? void 0 : style.content)) {
+        properties = {
+            paddingBlock: (_a = style.content) === null || _a === void 0 ? void 0 : _a.paddingBlock,
+            paddingInline: (_b = style.content) === null || _b === void 0 ? void 0 : _b.paddingInline,
+        };
+    }
+    return properties;
+}
+export function getHeaderStyles(style) {
+    var _a, _b, _c, _d, _e, _f;
+    let properties = {};
+    if (SYSTEM === 'core' && (style === null || style === void 0 ? void 0 : style.header)) {
+        properties = Object.assign(Object.assign(Object.assign({}, (((_a = style === null || style === void 0 ? void 0 : style.root) === null || _a === void 0 ? void 0 : _a.background) && { background: (_b = style === null || style === void 0 ? void 0 : style.root) === null || _b === void 0 ? void 0 : _b.background })), (((_c = style === null || style === void 0 ? void 0 : style.root) === null || _c === void 0 ? void 0 : _c.borderRadius) && { background: (_d = style === null || style === void 0 ? void 0 : style.root) === null || _d === void 0 ? void 0 : _d.borderRadius })), { paddingBlock: (_e = style.header) === null || _e === void 0 ? void 0 : _e.paddingBlock, paddingInline: (_f = style.header) === null || _f === void 0 ? void 0 : _f.paddingInline });
+    }
+    return properties;
+}
+export function getFooterStyles(style) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    let properties = {};
+    if (SYSTEM === 'core' && (style === null || style === void 0 ? void 0 : style.footer)) {
+        properties = {
+            borderColor: (_b = (_a = style.footer) === null || _a === void 0 ? void 0 : _a.divider) === null || _b === void 0 ? void 0 : _b.borderColor,
+            borderWidth: (_d = (_c = style.footer) === null || _c === void 0 ? void 0 : _c.divider) === null || _d === void 0 ? void 0 : _d.borderWidth,
+            paddingBlock: (_f = (_e = style.footer) === null || _e === void 0 ? void 0 : _e.root) === null || _f === void 0 ? void 0 : _f.paddingBlock,
+            paddingInline: (_h = (_g = style.footer) === null || _g === void 0 ? void 0 : _g.root) === null || _h === void 0 ? void 0 : _h.paddingInline,
+        };
+    }
+    return properties;
+}
+export function getMediaStyles(mediaPosition, style) {
+    var _a, _b;
+    let properties = {};
+    if (SYSTEM === 'core' && ((_a = style === null || style === void 0 ? void 0 : style.root) === null || _a === void 0 ? void 0 : _a.borderRadius)) {
+        properties = Object.assign(Object.assign({ borderRadius: (_b = style === null || style === void 0 ? void 0 : style.root) === null || _b === void 0 ? void 0 : _b.borderRadius }, (mediaPosition === 'top' && { borderEndStartRadius: '0px', borderEndEndRadius: '0px' })), (mediaPosition === 'side' && { borderStartEndRadius: '0px', borderEndEndRadius: '0px' }));
+    }
+    return properties;
+}
+//# sourceMappingURL=style.js.map

package/lib/internal/template/container/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/container/style.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 { SYSTEM } from '../internal/environment';\nimport { ContainerProps } from './interfaces';\n\nexport function getRootStyles(style: ContainerProps.Style | undefined) {\n  let properties = {};\n\n  if (SYSTEM === 'core' && style?.root) {\n    properties = {\n      background: style.root?.background,\n      borderColor: style.root?.borderColor,\n      borderRadius: style.root?.borderRadius,\n      borderWidth: style.root?.borderWidth,\n      boxShadow: style.root?.boxShadow,\n    };\n  }\n\n  return properties;\n}\n\nexport function getContentStyles(style: ContainerProps.Style | undefined) {\n  let properties = {};\n\n  if (SYSTEM === 'core' && style?.content) {\n    properties = {\n      paddingBlock: style.content?.paddingBlock,\n      paddingInline: style.content?.paddingInline,\n    };\n  }\n\n  return properties;\n}\n\nexport function getHeaderStyles(style: ContainerProps.Style | undefined) {\n  let properties = {};\n\n  if (SYSTEM === 'core' && style?.header) {\n    properties = {\n      ...(style?.root?.background && { background: style?.root?.background }),\n      ...(style?.root?.borderRadius && { background: style?.root?.borderRadius }),\n      paddingBlock: style.header?.paddingBlock,\n      paddingInline: style.header?.paddingInline,\n    };\n  }\n\n  return properties;\n}\n\nexport function getFooterStyles(style: ContainerProps.Style | undefined) {\n  let properties = {};\n\n  if (SYSTEM === 'core' && style?.footer) {\n    properties = {\n      borderColor: style.footer?.divider?.borderColor,\n      borderWidth: style.footer?.divider?.borderWidth,\n      paddingBlock: style.footer?.root?.paddingBlock,\n      paddingInline: style.footer?.root?.paddingInline,\n    };\n  }\n\n  return properties;\n}\n\nexport function getMediaStyles(mediaPosition: string, style: ContainerProps.Style | undefined) {\n  let properties = {};\n\n  if (SYSTEM === 'core' && style?.root?.borderRadius) {\n    properties = {\n      borderRadius: style?.root?.borderRadius,\n      ...(mediaPosition === 'top' && { borderEndStartRadius: '0px', borderEndEndRadius: '0px' }),\n      ...(mediaPosition === 'side' && { borderStartEndRadius: '0px', borderEndEndRadius: '0px' }),\n    };\n  }\n\n  return properties;\n}\n"]}

package/lib/internal/template/internal/base-component/styles.scoped.css

@@ -3892,5 +3892,5 @@
   }
 }
 :root {
-  --awsui-version-info-bb84fa6e: true;
+  --awsui-version-info-311693cb: true;
 }

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

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (bb84fa6e)";
-export var GIT_SHA = "bb84fa6e";
+export var PACKAGE_VERSION = "3.0.0 (311693cb)";
+export var GIT_SHA = "311693cb";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "console";
 export var ALWAYS_VISUAL_REFRESH = true;

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

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (bb84fa6e)",
-  "GIT_SHA": "bb84fa6e",
+  "PACKAGE_VERSION": "3.0.0 (311693cb)",
+  "GIT_SHA": "311693cb",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloudscape-design/components-themeable",
-  "version": "3.0.1051",
+  "version": "3.0.1052",
   "files": [
     "lib"
   ],