@cloudscape-design/components-themeable 3.0.1317 → 3.0.1319

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/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 { ButtonProps } from '../button/interfaces';\nimport { ErrorContext } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport namespace FlashbarProps {\n  export interface MessageDefinition {\n    header?: React.ReactNode;\n    content?: React.ReactNode;\n    dismissible?: boolean;\n    dismissLabel?: string;\n    statusIconAriaLabel?: string;\n    loading?: boolean;\n    type?: FlashbarProps.Type;\n    ariaRole?: FlashbarProps.AriaRole;\n    action?: React.ReactNode;\n    id?: string;\n    buttonText?: ButtonProps['children'];\n    onButtonClick?: ButtonProps['onClick'];\n    onDismiss?: ButtonProps['onClick'];\n    analyticsMetadata?: FlashbarProps.ItemAnalyticsMetadata;\n    persistenceConfig?: FlashbarProps.PersistenceConfig;\n  }\n\n  export interface ItemAnalyticsMetadata {\n    suppressFlowMetricEvents?: boolean;\n    errorContext?: ErrorContext;\n  }\n  export interface PersistenceConfig {\n    uniqueKey: string;\n    crossServicePersistence?: boolean;\n  }\n\n  export interface I18nStrings {\n    ariaLabel?: string;\n    errorIconAriaLabel?: string;\n    infoIconAriaLabel?: string;\n    inProgressIconAriaLabel?: string;\n    notificationBarAriaLabel?: string;\n    notificationBarText?: string;\n    successIconAriaLabel?: string;\n    warningIconAriaLabel?: string;\n  }\n\n  export interface Style {\n    item?: {\n      root?: {\n        background?: {\n          error?: string;\n          info?: string;\n          inProgress?: string;\n          success?: string;\n          warning?: string;\n        };\n        borderColor?: {\n          error?: string;\n          info?: string;\n          inProgress?: string;\n          success?: string;\n          warning?: string;\n        };\n        borderRadius?: string;\n        borderWidth?: string;\n        color?: {\n          error?: string;\n          info?: string;\n          inProgress?: string;\n          success?: string;\n          warning?: string;\n        };\n        focusRing?: {\n          borderColor?: {\n            error?: string;\n            info?: string;\n            inProgress?: string;\n            success?: string;\n            warning?: string;\n          };\n          borderRadius?: string;\n          borderWidth?: string;\n        };\n      };\n      dismissButton?: {\n        color?: {\n          active?: {\n            error?: string;\n            info?: string;\n            inProgress?: string;\n            success?: string;\n            warning?: string;\n          };\n          default?: {\n            error?: string;\n            info?: string;\n            inProgress?: string;\n            success?: string;\n            warning?: string;\n          };\n          hover?: {\n            error?: string;\n            info?: string;\n            inProgress?: string;\n            success?: string;\n            warning?: string;\n          };\n        };\n        focusRing?: {\n          borderColor?: {\n            error?: string;\n            info?: string;\n            inProgress?: string;\n            success?: string;\n            warning?: string;\n          };\n          borderRadius?: string;\n          borderWidth?: string;\n        };\n      };\n    };\n    notificationBar?: {\n      root?: {\n        background?: {\n          active?: string;\n          default?: string;\n          hover?: string;\n        };\n        borderColor?: {\n          active?: string;\n          default?: string;\n          hover?: string;\n        };\n        borderRadius?: string;\n        borderWidth?: string;\n        color?: {\n          active?: string;\n          default?: string;\n          hover?: string;\n        };\n      };\n      expandButton?: {\n        focusRing?: {\n          borderColor?: string;\n          borderRadius?: string;\n          borderWidth?: string;\n        };\n      };\n    };\n  }\n\n  export type Type = 'success' | 'warning' | 'info' | 'error' | 'in-progress';\n  export type AriaRole = 'alert' | 'status';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n  /**\n   * Specifies flash messages that appear in the same order that they are listed.\n   * The value is an array of flash message definition objects.\n   *\n   * A flash message object contains the following properties:\n   * * `header` (ReactNode) - Specifies the heading text.\n   * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n   * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info, in-progress`. The default is `info`.\n   * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n   * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n   * When a user clicks on this button the `onDismiss` handler is called.\n   * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n   * * `statusIconAriaLabel` (string) - Specifies an `aria-label` for to the status icon for improved accessibility.\n   * If not provided, `i18nStrings.{type}IconAriaLabel` will be used as a fallback.\n   * * `ariaRole` (string) - For flash messages added after page load, specifies how this message is communicated to assistive\n   * technology. Use \"status\" for status updates or informational content. Use \"alert\" for important messages that need the\n   * user's attention.\n   * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,\n   * our UX guidelines only allow you to add a button.\n   * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.\n   * When a user clicks on this button the `onButtonClick` handler is called.\n   * If the `action` property is set, this property is ignored. **Deprecated**, replaced by `action`.\n   * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button\n   *   using the `action` property. **Deprecated**, replaced by `action`.\n   * * `onDismiss` (event => void) - (Optional) Called when a user clicks on the dismiss button.\n   * * `id` (string) - Specifies a unique flash message identifier. This property is used in two ways:\n   *   1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.\n   *   2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.\n   * * `persistenceConfig` (FlashbarProps.PersistenceConfig) - Config to persist dismiss state for dismissable Flashbar item, used only in AWS Consoles.\n   *   * `uniqueKey` (string) - This key to store the persistence state, it must be unique across your console.\n   *   * `crossServicePersistence` (boolean) - If true, the persistence state will be shared across AWS services.\n   * * `analyticsMetadata` (FlashbarProps.ItemAnalyticsMetadata) - (Optional) Specifies additional analytics-related metadata.\n   *   * `suppressFlowMetricEvents` - Prevent this item from generating events related to flow metrics.\n   * @analytics\n   */\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n\n  /**\n   * Specifies whether flash messages should be stacked.\n   */\n  stackItems?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component. The object should contain:\n   *\n   * * `ariaLabel` - Specifies the ARIA label for the list of notifications.\n   *\n   * If `stackItems` is set to `true`, it should also contain:\n   *\n   * * `notificationBarAriaLabel` - (optional) Specifies the ARIA label for the notification bar\n   * * `notificationBarText` - (optional) Specifies the text shown in the notification bar\n   * * `errorIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `error`.\n   * * `warningIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `warning`.\n   * * `infoIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `info`.\n   * * `successIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `success`.\n   * * `inProgressIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `in-progress` or with `loading` set to `true`.\n   * @i18n\n   */\n  i18nStrings?: FlashbarProps.I18nStrings;\n\n  /**\n   * An object containing CSS properties to customize the flashbar's visual appearance.\n   * Refer to the [style](/components/flashbar/?tabId=style) tab for more details.\n   * @awsuiSystem core\n   */\n  style?: FlashbarProps.Style;\n}\n\nexport type InternalFlashbarProps = FlashbarProps & InternalBaseComponentProps;\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/flashbar/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 { ButtonProps } from '../button/interfaces';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { ErrorContext } from '../types/analytics';\nimport { BaseComponentProps } from '../types/base-component';\n\nexport namespace FlashbarProps {\n  export interface MessageDefinition {\n    header?: React.ReactNode;\n    content?: React.ReactNode;\n    dismissible?: boolean;\n    dismissLabel?: string;\n    statusIconAriaLabel?: string;\n    loading?: boolean;\n    type?: FlashbarProps.Type;\n    ariaRole?: FlashbarProps.AriaRole;\n    action?: React.ReactNode;\n    id?: string;\n    buttonText?: ButtonProps['children'];\n    onButtonClick?: ButtonProps['onClick'];\n    onDismiss?: ButtonProps['onClick'];\n    analyticsMetadata?: FlashbarProps.ItemAnalyticsMetadata;\n    persistenceConfig?: FlashbarProps.PersistenceConfig;\n  }\n\n  export interface ItemAnalyticsMetadata {\n    suppressFlowMetricEvents?: boolean;\n    errorContext?: ErrorContext;\n  }\n  export interface PersistenceConfig {\n    uniqueKey: string;\n    crossServicePersistence?: boolean;\n  }\n\n  export interface I18nStrings {\n    ariaLabel?: string;\n    errorIconAriaLabel?: string;\n    infoIconAriaLabel?: string;\n    inProgressIconAriaLabel?: string;\n    notificationBarAriaLabel?: string;\n    notificationBarText?: string;\n    successIconAriaLabel?: string;\n    warningIconAriaLabel?: string;\n  }\n\n  export interface Style {\n    item?: {\n      root?: {\n        background?: {\n          error?: string;\n          info?: string;\n          inProgress?: string;\n          success?: string;\n          warning?: string;\n        };\n        borderColor?: {\n          error?: string;\n          info?: string;\n          inProgress?: string;\n          success?: string;\n          warning?: string;\n        };\n        borderRadius?: string;\n        borderWidth?: string;\n        color?: {\n          error?: string;\n          info?: string;\n          inProgress?: string;\n          success?: string;\n          warning?: string;\n        };\n        focusRing?: {\n          borderColor?: {\n            error?: string;\n            info?: string;\n            inProgress?: string;\n            success?: string;\n            warning?: string;\n          };\n          borderRadius?: string;\n          borderWidth?: string;\n        };\n      };\n      dismissButton?: {\n        color?: {\n          active?: {\n            error?: string;\n            info?: string;\n            inProgress?: string;\n            success?: string;\n            warning?: string;\n          };\n          default?: {\n            error?: string;\n            info?: string;\n            inProgress?: string;\n            success?: string;\n            warning?: string;\n          };\n          hover?: {\n            error?: string;\n            info?: string;\n            inProgress?: string;\n            success?: string;\n            warning?: string;\n          };\n        };\n        focusRing?: {\n          borderColor?: {\n            error?: string;\n            info?: string;\n            inProgress?: string;\n            success?: string;\n            warning?: string;\n          };\n          borderRadius?: string;\n          borderWidth?: string;\n        };\n      };\n    };\n    notificationBar?: {\n      root?: {\n        background?: {\n          active?: string;\n          default?: string;\n          hover?: string;\n        };\n        borderColor?: {\n          active?: string;\n          default?: string;\n          hover?: string;\n        };\n        borderRadius?: string;\n        borderWidth?: string;\n        color?: {\n          active?: string;\n          default?: string;\n          hover?: string;\n        };\n      };\n      expandButton?: {\n        focusRing?: {\n          borderColor?: string;\n          borderRadius?: string;\n          borderWidth?: string;\n        };\n      };\n    };\n  }\n\n  export type Type = 'success' | 'warning' | 'info' | 'error' | 'in-progress';\n  export type AriaRole = 'alert' | 'status';\n}\n\nexport interface FlashbarProps extends BaseComponentProps {\n  /**\n   * Specifies flash messages that appear in the same order that they are listed.\n   * The value is an array of flash message definition objects.\n   *\n   * A flash message object contains the following properties:\n   * * `header` (ReactNode) - Specifies the heading text.\n   * * `content` (ReactNode) - Specifies the primary text displayed in the flash element.\n   * * `type` (string) - Indicates the type of the message to be displayed. Allowed values are as follows: `success, error, warning, info, in-progress`. The default is `info`.\n   * * `loading` (boolean) - Replaces the status icon with a spinner and forces the type to `info`.\n   * * `dismissible` (boolean) - Determines whether the component includes a close button icon. By default, the close button is not included.\n   * When a user clicks on this button the `onDismiss` handler is called.\n   * * `dismissLabel` (string) - Specifies an `aria-label` for to the dismiss icon button for improved accessibility.\n   * * `statusIconAriaLabel` (string) - Specifies an `aria-label` for to the status icon for improved accessibility.\n   * If not provided, `i18nStrings.{type}IconAriaLabel` will be used as a fallback.\n   * * `ariaRole` (string) - For flash messages added after page load, specifies how this message is communicated to assistive\n   * technology. Use \"status\" for status updates or informational content. Use \"alert\" for important messages that need the\n   * user's attention.\n   * * `action` (ReactNode) - Specifies an action for the flash message. Although it is technically possible to insert any content,\n   * our UX guidelines only allow you to add a button.\n   * * `buttonText` (string) - Specifies that an action button should be displayed, with the specified text.\n   * When a user clicks on this button the `onButtonClick` handler is called.\n   * If the `action` property is set, this property is ignored. **Deprecated**, replaced by `action`.\n   * * `onButtonClick` (event => void) - Called when a user clicks on the action button. This is not called if you create a custom button\n   *   using the `action` property. **Deprecated**, replaced by `action`.\n   * * `onDismiss` (event => void) - (Optional) Called when a user clicks on the dismiss button.\n   * * `id` (string) - Specifies a unique flash message identifier. This property is used in two ways:\n   *   1. As a [keys](https://reactjs.org/docs/lists-and-keys.html#keys) source for React rendering.\n   *   2. To identify which flash message will be removed from the DOM when it is dismissed, to animate it out.\n   * * `persistenceConfig` (FlashbarProps.PersistenceConfig) - Config to persist dismiss state for dismissable Flashbar item, used only in AWS Consoles.\n   *   * `uniqueKey` (string) - This key to store the persistence state, it must be unique across your console.\n   *   * `crossServicePersistence` (boolean) - If true, the persistence state will be shared across AWS services.\n   * * `analyticsMetadata` (FlashbarProps.ItemAnalyticsMetadata) - (Optional) Specifies additional analytics-related metadata.\n   *   * `suppressFlowMetricEvents` - Prevent this item from generating events related to flow metrics.\n   * @analytics\n   */\n  items: ReadonlyArray<FlashbarProps.MessageDefinition>;\n\n  /**\n   * Specifies whether flash messages should be stacked.\n   */\n  stackItems?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component. The object should contain:\n   *\n   * * `ariaLabel` - Specifies the ARIA label for the list of notifications.\n   *\n   * If `stackItems` is set to `true`, it should also contain:\n   *\n   * * `notificationBarAriaLabel` - (optional) Specifies the ARIA label for the notification bar\n   * * `notificationBarText` - (optional) Specifies the text shown in the notification bar\n   * * `errorIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `error`.\n   * * `warningIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `warning`.\n   * * `infoIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `info`.\n   * * `successIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `success`.\n   * * `inProgressIconAriaLabel` - (optional) Specifies the ARIA label for the icon displayed next to the number of items of type `in-progress` or with `loading` set to `true`.\n   * @i18n\n   */\n  i18nStrings?: FlashbarProps.I18nStrings;\n\n  /**\n   * An object containing CSS properties to customize the flashbar's visual appearance.\n   * Refer to the [style](/components/flashbar/?tabId=style) tab for more details.\n   * @awsuiSystem core\n   */\n  style?: FlashbarProps.Style;\n}\n\nexport type InternalFlashbarProps = FlashbarProps & InternalBaseComponentProps;\n"]}

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ErrorContext, FlowType } from '../internal/analytics/interfaces';
-import { BaseComponentProps } from '../internal/base-component';
+import { ErrorContext, FlowType } from '../types/analytics';
+import { BaseComponentProps } from '../types/base-component';
 export declare namespace FormProps {
     interface AnalyticsMetadata {
         instanceIdentifier?: string;

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,kCAAkC,CAAC;AAC1E,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,yBAAiB,SAAS,CAAC;IACzB,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;CACF;AAED,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IAEnC;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC;CACjD"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,yBAAiB,SAAS,CAAC;IACzB,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,QAAQ,CAAC,EAAE,QAAQ,CAAC;QACpB,YAAY,CAAC,EAAE,MAAM,CAAC;QACtB,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;CACF;AAED,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,GAAG,UAAU,CAAC;IAEnC;;;;;;;OAOG;IACH,iBAAiB,CAAC,EAAE,SAAS,CAAC,iBAAiB,CAAC;CACjD"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form/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, FlowType } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport namespace FormProps {\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    flowType?: FlowType;\n    resourceType?: string;\n    errorContext?: ErrorContext;\n  }\n}\n\nexport interface FormProps extends BaseComponentProps {\n  /**\n   * Specifies the main form content.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Specifies the form title and optional description. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Specifies a form-level validation message.\n   */\n  errorText?: React.ReactNode;\n\n  /**\n   * Provides a text alternative for the error icon in the error alert.\n   * @i18n\n   */\n  errorIconAriaLabel?: string;\n\n  /**\n   * Specifies actions for the form. You should wrap action buttons in a [space between component](/components/space-between) with `direction=\"horizontal\"` and `size=\"xs\"`.\n   */\n  actions?: React.ReactNode;\n\n  /**\n   * Specifies left-aligned secondary actions for the form. Use a button dropdown if multiple actions are required.\n   */\n  secondaryActions?: React.ReactNode;\n\n  /**\n   * Specify a form variant with one of the following:\n   * * `full-page` - Use this variant when the form contains the entire content of the page.\n   * * `embedded` - Use this variant when the form doesn't occupy the full page.\n   * @deprecated You can safely remove this property as there is no longer any visual difference between `full-page` and `embedded` variants.\n   */\n  variant?: 'full-page' | 'embedded';\n\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `flowType` - Identifies the type of flow represented by the component.\n   * * `resourceType` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.\n   * * `errorContext` - Identifies the error category and sub-category.\n   * @analytics\n   */\n  analyticsMetadata?: FormProps.AnalyticsMetadata;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form/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, FlowType } from '../types/analytics';\nimport { BaseComponentProps } from '../types/base-component';\n\nexport namespace FormProps {\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    flowType?: FlowType;\n    resourceType?: string;\n    errorContext?: ErrorContext;\n  }\n}\n\nexport interface FormProps extends BaseComponentProps {\n  /**\n   * Specifies the main form content.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Specifies the form title and optional description. Use the [header component](/components/header/).\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Specifies a form-level validation message.\n   */\n  errorText?: React.ReactNode;\n\n  /**\n   * Provides a text alternative for the error icon in the error alert.\n   * @i18n\n   */\n  errorIconAriaLabel?: string;\n\n  /**\n   * Specifies actions for the form. You should wrap action buttons in a [space between component](/components/space-between) with `direction=\"horizontal\"` and `size=\"xs\"`.\n   */\n  actions?: React.ReactNode;\n\n  /**\n   * Specifies left-aligned secondary actions for the form. Use a button dropdown if multiple actions are required.\n   */\n  secondaryActions?: React.ReactNode;\n\n  /**\n   * Specify a form variant with one of the following:\n   * * `full-page` - Use this variant when the form contains the entire content of the page.\n   * * `embedded` - Use this variant when the form doesn't occupy the full page.\n   * @deprecated You can safely remove this property as there is no longer any visual difference between `full-page` and `embedded` variants.\n   */\n  variant?: 'full-page' | 'embedded';\n\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `flowType` - Identifies the type of flow represented by the component.\n   * * `resourceType` - Identifies the type of resource represented by the flow. **Note:** This API is currently experimental.\n   * * `errorContext` - Identifies the error category and sub-category.\n   * @analytics\n   */\n  analyticsMetadata?: FormProps.AnalyticsMetadata;\n}\n"]}

package/lib/internal/template/form-field/interfaces.d.ts

@@ -1,7 +1,7 @@
 import React, { CSSProperties } from 'react';
-import { AnalyticsMetadata, ErrorContext } from '../internal/analytics/interfaces';
-import { BaseComponentProps } from '../internal/base-component';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { AnalyticsMetadata, ErrorContext } from '../types/analytics';
+import { BaseComponentProps } from '../types/base-component';
 export interface FormFieldProps extends BaseComponentProps {
     /**
      * The ID of the primary form control. You can use this to set the

package/lib/internal/template/form-field/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;AACnF,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAElF,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IAEzC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC;CACtD;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAE5B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC/B;CACF;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,EAAE,0BAA0B;IACxF;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;IACxC,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE7C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAClF,OAAO,EAAE,iBAAiB,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;;;;OAOG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC;IAEzC;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEjC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAE5B;;;OAGG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC;CACtD;AAED,yBAAiB,cAAc,CAAC;IAC9B,UAAiB,iBAAiB;QAChC,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,YAAY,CAAC,EAAE,YAAY,CAAC;KAC7B;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAE5B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC/B;CACF;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,EAAE,0BAA0B;IACxF;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,mBAAmB,CAAC,EAAE,iBAAiB,CAAC;IACxC,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB"}

package/lib/internal/template/form-field/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { CSSProperties } from 'react';\n\nimport { AnalyticsMetadata, ErrorContext } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface FormFieldProps extends BaseComponentProps {\n  /**\n   * The ID of the primary form control. You can use this to set the\n   * `for` attribute of a label for accessibility.\n   *\n   * If you don't set this property, the control group automatically sets\n   * the label to the ID of an inner form control (for example, an [input](/components/input) component).\n   * This only works well if you're using a single control in the form field.\n   */\n  controlId?: string;\n\n  /**\n   * Determines whether the primary control should expand to 12 columns.\n   *\n   * By default (or when this property is set to `false`), the primary control\n   * occupies 9 columns. The secondary control uses the remaining 3 columns.\n   * On smaller viewports, both components occupy 12 columns and stack on top of each other.\n   *\n   * If this property is set to `true`, the primary control uses the full\n   * 12 columns. The secondary control (if present) also uses 12 columns, and the two\n   * controls stack on top of each other.\n   */\n  stretch?: boolean;\n\n  /**\n   * The main label for the form field.\n   */\n  label?: React.ReactNode;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: FormFieldProps.I18nStrings;\n\n  /**\n   * Use to display an 'Info' link next to the label.\n   */\n  info?: React.ReactNode;\n\n  /**\n   * The primary form control (for example, input, textarea, etc.).\n   * @displayname control\n   */\n  children?: React.ReactNode;\n\n  /**\n   * A secondary control. You can use this for custom actions and content.\n   */\n  secondaryControl?: React.ReactNode;\n\n  /**\n   * Detailed information about the form field that's displayed below the label.\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Constraint text that's displayed below the control. Use this to provide\n   * additional information about valid formats, etc.\n   */\n  constraintText?: React.ReactNode;\n\n  /**\n   * Character count constraint displayed adjacent to the constraintText. Use\n   * this to provide an updated character count on each keypress that is debounced\n   * for screen reader users.\n   */\n  characterCountText?: string;\n\n  /**\n   * Text that displays as a validation error message. If this is set to a\n   * non-empty string, it will render the form field as invalid.\n   */\n  errorText?: React.ReactNode;\n\n  /**\n   * Text that displays as a validation warning message. If this is set to a\n   * non-empty string, it will render the form field in a warning state.\n   */\n  warningText?: React.ReactNode;\n\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `errorContext` - Identifies the error category and sub-category.\n   * @analytics\n   */\n  analyticsMetadata?: FormFieldProps.AnalyticsMetadata;\n}\n\nexport namespace FormFieldProps {\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    errorContext?: ErrorContext;\n  }\n\n  export interface I18nStrings {\n    /**\n     * Provides a text alternative for the error icon in the error message.\n     */\n    errorIconAriaLabel?: string;\n\n    /**\n     * Provides a text alternative for the warning icon in the warning message.\n     */\n    warningIconAriaLabel?: string;\n  }\n}\n\nexport interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps {\n  /**\n   * Visually hide the label.\n   */\n  __hideLabel?: boolean;\n\n  /**\n   * Disable the gutter applied by default.\n   */\n  __disableGutters?: boolean;\n  __analyticsMetadata?: AnalyticsMetadata;\n  __style?: CSSProperties;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/form-field/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { CSSProperties } from 'react';\n\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { AnalyticsMetadata, ErrorContext } from '../types/analytics';\nimport { BaseComponentProps } from '../types/base-component';\n\nexport interface FormFieldProps extends BaseComponentProps {\n  /**\n   * The ID of the primary form control. You can use this to set the\n   * `for` attribute of a label for accessibility.\n   *\n   * If you don't set this property, the control group automatically sets\n   * the label to the ID of an inner form control (for example, an [input](/components/input) component).\n   * This only works well if you're using a single control in the form field.\n   */\n  controlId?: string;\n\n  /**\n   * Determines whether the primary control should expand to 12 columns.\n   *\n   * By default (or when this property is set to `false`), the primary control\n   * occupies 9 columns. The secondary control uses the remaining 3 columns.\n   * On smaller viewports, both components occupy 12 columns and stack on top of each other.\n   *\n   * If this property is set to `true`, the primary control uses the full\n   * 12 columns. The secondary control (if present) also uses 12 columns, and the two\n   * controls stack on top of each other.\n   */\n  stretch?: boolean;\n\n  /**\n   * The main label for the form field.\n   */\n  label?: React.ReactNode;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   * @i18n\n   */\n  i18nStrings?: FormFieldProps.I18nStrings;\n\n  /**\n   * Use to display an 'Info' link next to the label.\n   */\n  info?: React.ReactNode;\n\n  /**\n   * The primary form control (for example, input, textarea, etc.).\n   * @displayname control\n   */\n  children?: React.ReactNode;\n\n  /**\n   * A secondary control. You can use this for custom actions and content.\n   */\n  secondaryControl?: React.ReactNode;\n\n  /**\n   * Detailed information about the form field that's displayed below the label.\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Constraint text that's displayed below the control. Use this to provide\n   * additional information about valid formats, etc.\n   */\n  constraintText?: React.ReactNode;\n\n  /**\n   * Character count constraint displayed adjacent to the constraintText. Use\n   * this to provide an updated character count on each keypress that is debounced\n   * for screen reader users.\n   */\n  characterCountText?: string;\n\n  /**\n   * Text that displays as a validation error message. If this is set to a\n   * non-empty string, it will render the form field as invalid.\n   */\n  errorText?: React.ReactNode;\n\n  /**\n   * Text that displays as a validation warning message. If this is set to a\n   * non-empty string, it will render the form field in a warning state.\n   */\n  warningText?: React.ReactNode;\n\n  /**\n   * Specifies additional analytics-related metadata.\n   * * `instanceIdentifier` - A unique string that identifies this component instance in your application.\n   * * `errorContext` - Identifies the error category and sub-category.\n   * @analytics\n   */\n  analyticsMetadata?: FormFieldProps.AnalyticsMetadata;\n}\n\nexport namespace FormFieldProps {\n  export interface AnalyticsMetadata {\n    instanceIdentifier?: string;\n    errorContext?: ErrorContext;\n  }\n\n  export interface I18nStrings {\n    /**\n     * Provides a text alternative for the error icon in the error message.\n     */\n    errorIconAriaLabel?: string;\n\n    /**\n     * Provides a text alternative for the warning icon in the warning message.\n     */\n    warningIconAriaLabel?: string;\n  }\n}\n\nexport interface InternalFormFieldProps extends FormFieldProps, InternalBaseComponentProps {\n  /**\n   * Visually hide the label.\n   */\n  __hideLabel?: boolean;\n\n  /**\n   * Disable the gutter applied by default.\n   */\n  __disableGutters?: boolean;\n  __analyticsMetadata?: AnalyticsMetadata;\n  __style?: CSSProperties;\n}\n"]}

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BaseComponentProps } from '../internal/base-component';
-import { Breakpoint as _Breakpoint } from '../internal/breakpoints';
+import { BaseComponentProps } from '../types/base-component';
+import { Breakpoint as _Breakpoint } from '../types/breakpoint';
 export interface GridProps extends BaseComponentProps {
     /**
      * An array of element definitions that specifies how the columns must be

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/grid/interfaces.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;;;;;OAgBG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAE5D;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,SAAS,CAAC;IACzB,KAAY,UAAU,GAAG,WAAW,CAAC;IAErC,KAAY,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAErE,UAAiB,iBAAiB;QAChC;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,iBAAiB,CAAC;QAE/C;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,iBAAiB,CAAC;QAE9C;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,iBAAiB,CAAC;QAE5C;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,iBAAiB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/grid/interfaces.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAEhE,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;;;;;OAgBG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAE5D;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;;;;OAMG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,yBAAiB,SAAS,CAAC;IACzB,KAAY,UAAU,GAAG,WAAW,CAAC;IAErC,KAAY,iBAAiB,GAAG,OAAO,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAErE,UAAiB,iBAAiB;QAChC;;WAEG;QACH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,iBAAiB,CAAC;QAE/C;;WAEG;QACH,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,iBAAiB,CAAC;QAE9C;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,iBAAiB,CAAC;QAE5C;;WAEG;QACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC,iBAAiB,CAAC;KAC7C;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/grid/interfaces.tsx"],"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';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface GridProps extends BaseComponentProps {\n  /**\n   * An array of element definitions that specifies how the columns must be\n   * arranged. Each element definition can have the following properties:\n   *\n   * - `colspan` (number | GridProps.BreakpointMapping) - The number (1-12) of grid elements for this column to span.\n   * - `offset` (number | GridProps.BreakpointMapping) - The number (0-11) of grid elements by which to offset the column.\n   * - `pull` (number | GridProps.BreakpointMapping) - The number (0-12) of grid elements by which to pull the column to the left.\n   * - `push` (number | GridProps.BreakpointMapping) - The number (0-12) of grid elements by which to push the column to the right.\n   *\n   * The value for the each property can be a number (which applies for all\n   * breakpoints) or an object where the key is one of the supported breakpoints\n   * (`xxs`, `xs`, `s`, `m`, `l`, `xl`) or `default`. The value of this key is a number of columns,\n   * applied for that breakpoint and those above it. You must provide a `default` value for `colspan`.\n   *\n   * We recommend that you don't use the `pull` and `push` properties of the element definition\n   * for accessibility reasons.\n   */\n  gridDefinition?: ReadonlyArray<GridProps.ElementDefinition>;\n\n  /**\n   * Determines whether horizontal and vertical gutters are hidden.\n   */\n  disableGutters?: boolean;\n\n  /**\n   * The elements to align in the grid.\n   *\n   * You can provide any elements here. The number of elements\n   * should match the number of objects defined in the `gridDefinition`\n   * property.\n   */\n  children?: React.ReactNode;\n}\n\nexport namespace GridProps {\n  export type Breakpoint = _Breakpoint;\n\n  export type BreakpointMapping = Partial<Record<_Breakpoint, number>>;\n\n  export interface ElementDefinition {\n    /**\n     * The number of grid elements for the column to span.\n     */\n    colspan?: number | GridProps.BreakpointMapping;\n\n    /**\n     * The number of grid elements to offset the column by.\n     */\n    offset?: number | GridProps.BreakpointMapping;\n\n    /**\n     * The number of grid elements to pull the column to the left by.\n     */\n    pull?: number | GridProps.BreakpointMapping;\n\n    /**\n     * The number of grid elements to push the column to the right by.\n     */\n    push?: number | GridProps.BreakpointMapping;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/grid/interfaces.tsx"],"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 '../types/base-component';\nimport { Breakpoint as _Breakpoint } from '../types/breakpoint';\n\nexport interface GridProps extends BaseComponentProps {\n  /**\n   * An array of element definitions that specifies how the columns must be\n   * arranged. Each element definition can have the following properties:\n   *\n   * - `colspan` (number | GridProps.BreakpointMapping) - The number (1-12) of grid elements for this column to span.\n   * - `offset` (number | GridProps.BreakpointMapping) - The number (0-11) of grid elements by which to offset the column.\n   * - `pull` (number | GridProps.BreakpointMapping) - The number (0-12) of grid elements by which to pull the column to the left.\n   * - `push` (number | GridProps.BreakpointMapping) - The number (0-12) of grid elements by which to push the column to the right.\n   *\n   * The value for the each property can be a number (which applies for all\n   * breakpoints) or an object where the key is one of the supported breakpoints\n   * (`xxs`, `xs`, `s`, `m`, `l`, `xl`) or `default`. The value of this key is a number of columns,\n   * applied for that breakpoint and those above it. You must provide a `default` value for `colspan`.\n   *\n   * We recommend that you don't use the `pull` and `push` properties of the element definition\n   * for accessibility reasons.\n   */\n  gridDefinition?: ReadonlyArray<GridProps.ElementDefinition>;\n\n  /**\n   * Determines whether horizontal and vertical gutters are hidden.\n   */\n  disableGutters?: boolean;\n\n  /**\n   * The elements to align in the grid.\n   *\n   * You can provide any elements here. The number of elements\n   * should match the number of objects defined in the `gridDefinition`\n   * property.\n   */\n  children?: React.ReactNode;\n}\n\nexport namespace GridProps {\n  export type Breakpoint = _Breakpoint;\n\n  export type BreakpointMapping = Partial<Record<_Breakpoint, number>>;\n\n  export interface ElementDefinition {\n    /**\n     * The number of grid elements for the column to span.\n     */\n    colspan?: number | GridProps.BreakpointMapping;\n\n    /**\n     * The number of grid elements to offset the column by.\n     */\n    offset?: number | GridProps.BreakpointMapping;\n\n    /**\n     * The number of grid elements to pull the column to the left by.\n     */\n    pull?: number | GridProps.BreakpointMapping;\n\n    /**\n     * The number of grid elements to push the column to the right by.\n     */\n    push?: number | GridProps.BreakpointMapping;\n  }\n}\n"]}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ClassValue } from 'clsx';
-import { Breakpoint } from '../internal/breakpoints';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { Breakpoint } from '../types/breakpoint';
 import { GridProps } from './interfaces';
 interface InternalGridProps extends GridProps, InternalBaseComponentProps {
     __breakpoint?: Breakpoint | null;

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

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/grid/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAa,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAKxC,OAAO,EAAE,UAAU,EAA0B,MAAM,yBAAyB,CAAC;AAE7E,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,UAAU,iBAAkB,SAAQ,SAAS,EAAE,0BAA0B;IACvE,YAAY,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAEjC;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI,KAAK,UAAU,CAAC;IACtE;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,YAAY,0FA0EjB,CAAC;AAgBF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/grid/internal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAa,EAAE,UAAU,EAAE,MAAM,MAAM,CAAC;AAOxC,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAGlF,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzC,UAAU,iBAAkB,SAAQ,SAAS,EAAE,0BAA0B;IACvE,YAAY,CAAC,EAAE,UAAU,GAAG,IAAI,CAAC;IAEjC;;OAEG;IACH,qBAAqB,CAAC,EAAE,CAAC,UAAU,EAAE,UAAU,GAAG,IAAI,KAAK,UAAU,CAAC;IACtE;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,YAAY,0FA0EjB,CAAC;AAgBF,eAAe,YAAY,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/grid/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 from 'react';\nimport clsx, { ClassValue } from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { Breakpoint, matchBreakpointMapping } from '../internal/breakpoints';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport { flattenChildren } from '../internal/utils/flatten-children';\nimport { GridProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalGridProps extends GridProps, InternalBaseComponentProps {\n  __breakpoint?: Breakpoint | null;\n\n  /**\n   * The handler that fires when the grid breakpoint changes.\n   */\n  __responsiveClassName?: (breakpoint: Breakpoint | null) => ClassValue;\n  /**\n   * Overrides the default wrapper HTML tag.\n   */\n  __tagOverride?: string;\n}\n\nconst InternalGrid = React.forwardRef(\n  (\n    {\n      __breakpoint,\n      gridDefinition = [],\n      disableGutters = false,\n      children,\n      __tagOverride,\n      __responsiveClassName,\n      __internalRootRef,\n      ...restProps\n    }: InternalGridProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    let [defaultBreakpoint, defaultRef]: [Breakpoint | null, React.Ref<HTMLDivElement>] =\n      useContainerBreakpoints(undefined);\n    if (__breakpoint !== undefined) {\n      defaultBreakpoint = __breakpoint;\n      defaultRef = ref;\n    }\n\n    const baseProps = getBaseProps(restProps);\n    /*\n   Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n   */\n    const flattenedChildren = flattenChildren(children, 'Grid');\n    const Tag = (__tagOverride ?? 'div') as 'div';\n\n    if (isDevelopment) {\n      const columnCount = gridDefinition.length;\n      const childCount = flattenedChildren.length;\n      if (columnCount !== childCount) {\n        warnOnce(\n          'Grid',\n          `The number of children (${childCount}) does not match the number of columns defined (${columnCount}).`\n        );\n      }\n    }\n\n    const mergedRef = useMergeRefs(defaultRef, __internalRootRef);\n\n    return (\n      <Tag\n        {...baseProps}\n        className={clsx(\n          styles.grid,\n          baseProps.className,\n          { [styles['no-gutters']]: disableGutters },\n          __responsiveClassName ? __responsiveClassName(defaultBreakpoint) : null\n        )}\n        ref={mergedRef}\n      >\n        {flattenedChildren.map((child, i) => {\n          // If this react child is a primitive value, the key will be undefined\n          const key = child && typeof child === 'object' ? (child as Record<'key', unknown>).key : undefined;\n\n          return (\n            <div\n              key={key ? String(key) : undefined}\n              className={clsx(\n                styles['grid-column'],\n                getColumnClassNames('colspan', gridDefinition[i]?.colspan, defaultBreakpoint),\n                getColumnClassNames('offset', gridDefinition[i]?.offset, defaultBreakpoint),\n                getColumnClassNames('pull', gridDefinition[i]?.pull, defaultBreakpoint),\n                getColumnClassNames('push', gridDefinition[i]?.push, defaultBreakpoint)\n              )}\n            >\n              <div className={styles['restore-pointer-events']}>{child}</div>\n            </div>\n          );\n        })}\n      </Tag>\n    );\n  }\n);\n\nfunction getColumnClassNames(\n  prop: string,\n  mapping: undefined | number | GridProps.BreakpointMapping,\n  breakpoint: Breakpoint | null\n): string | null {\n  if (typeof mapping === 'number') {\n    return styles[`${prop}-${mapping}`];\n  }\n  if (breakpoint === null || mapping === undefined) {\n    return null;\n  }\n  return styles[`${prop}-${matchBreakpointMapping(mapping, breakpoint)}`];\n}\n\nexport default InternalGrid;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/grid/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAoB,MAAM,MAAM,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAEvF,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AAE9E,OAAO,EAAE,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAIrE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAerC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EACE,YAAY,EACZ,cAAc,GAAG,EAAE,EACnB,cAAc,GAAG,KAAK,EACtB,QAAQ,EACR,aAAa,EACb,qBAAqB,EACrB,iBAAiB,EACjB,GAAG,SAAS,EACM,EACpB,GAA8B,EAC9B,EAAE;IACF,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC,GACjC,uBAAuB,CAAC,SAAS,CAAC,CAAC;IACrC,IAAI,YAAY,KAAK,SAAS,EAAE,CAAC;QAC/B,iBAAiB,GAAG,YAAY,CAAC;QACjC,UAAU,GAAG,GAAG,CAAC;IACnB,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C;;KAEC;IACD,MAAM,iBAAiB,GAAG,eAAe,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAC5D,MAAM,GAAG,GAAG,CAAC,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,KAAK,CAAU,CAAC;IAE9C,IAAI,aAAa,EAAE,CAAC;QAClB,MAAM,WAAW,GAAG,cAAc,CAAC,MAAM,CAAC;QAC1C,MAAM,UAAU,GAAG,iBAAiB,CAAC,MAAM,CAAC;QAC5C,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;YAC/B,QAAQ,CACN,MAAM,EACN,2BAA2B,UAAU,mDAAmD,WAAW,IAAI,CACxG,CAAC;QACJ,CAAC;IACH,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,iBAAiB,CAAC,CAAC;IAE9D,OAAO,CACL,oBAAC,GAAG,OACE,SAAS,EACb,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,IAAI,EACX,SAAS,CAAC,SAAS,EACnB,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,cAAc,EAAE,EAC1C,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,IAAI,CACxE,EACD,GAAG,EAAE,SAAS,IAEb,iBAAiB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,CAAC,EAAE,EAAE;;QAClC,sEAAsE;QACtE,MAAM,GAAG,GAAG,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAE,KAAgC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC;QAEnG,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,SAAS,EAClC,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa,CAAC,EACrB,mBAAmB,CAAC,SAAS,EAAE,MAAA,cAAc,CAAC,CAAC,CAAC,0CAAE,OAAO,EAAE,iBAAiB,CAAC,EAC7E,mBAAmB,CAAC,QAAQ,EAAE,MAAA,cAAc,CAAC,CAAC,CAAC,0CAAE,MAAM,EAAE,iBAAiB,CAAC,EAC3E,mBAAmB,CAAC,MAAM,EAAE,MAAA,cAAc,CAAC,CAAC,CAAC,0CAAE,IAAI,EAAE,iBAAiB,CAAC,EACvE,mBAAmB,CAAC,MAAM,EAAE,MAAA,cAAc,CAAC,CAAC,CAAC,0CAAE,IAAI,EAAE,iBAAiB,CAAC,CACxE;YAED,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,IAAG,KAAK,CAAO,CAC3D,CACP,CAAC;IACJ,CAAC,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,mBAAmB,CAC1B,IAAY,EACZ,OAAyD,EACzD,UAA6B;IAE7B,IAAI,OAAO,OAAO,KAAK,QAAQ,EAAE,CAAC;QAChC,OAAO,MAAM,CAAC,GAAG,IAAI,IAAI,OAAO,EAAE,CAAC,CAAC;IACtC,CAAC;IACD,IAAI,UAAU,KAAK,IAAI,IAAI,OAAO,KAAK,SAAS,EAAE,CAAC;QACjD,OAAO,IAAI,CAAC;IACd,CAAC;IACD,OAAO,MAAM,CAAC,GAAG,IAAI,IAAI,sBAAsB,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,CAAC,CAAC;AAC1E,CAAC;AAED,eAAe,YAAY,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx, { ClassValue } from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { matchBreakpointMapping } from '../internal/breakpoints';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { isDevelopment } from '../internal/is-development';\nimport { flattenChildren } from '../internal/utils/flatten-children';\nimport { Breakpoint } from '../types/breakpoint';\nimport { GridProps } from './interfaces';\n\nimport styles from './styles.css.js';\n\ninterface InternalGridProps extends GridProps, InternalBaseComponentProps {\n  __breakpoint?: Breakpoint | null;\n\n  /**\n   * The handler that fires when the grid breakpoint changes.\n   */\n  __responsiveClassName?: (breakpoint: Breakpoint | null) => ClassValue;\n  /**\n   * Overrides the default wrapper HTML tag.\n   */\n  __tagOverride?: string;\n}\n\nconst InternalGrid = React.forwardRef(\n  (\n    {\n      __breakpoint,\n      gridDefinition = [],\n      disableGutters = false,\n      children,\n      __tagOverride,\n      __responsiveClassName,\n      __internalRootRef,\n      ...restProps\n    }: InternalGridProps,\n    ref: React.Ref<HTMLDivElement>\n  ) => {\n    let [defaultBreakpoint, defaultRef]: [Breakpoint | null, React.Ref<HTMLDivElement>] =\n      useContainerBreakpoints(undefined);\n    if (__breakpoint !== undefined) {\n      defaultBreakpoint = __breakpoint;\n      defaultRef = ref;\n    }\n\n    const baseProps = getBaseProps(restProps);\n    /*\n   Flattening the children allows us to \"see through\" React Fragments and nested arrays.\n   */\n    const flattenedChildren = flattenChildren(children, 'Grid');\n    const Tag = (__tagOverride ?? 'div') as 'div';\n\n    if (isDevelopment) {\n      const columnCount = gridDefinition.length;\n      const childCount = flattenedChildren.length;\n      if (columnCount !== childCount) {\n        warnOnce(\n          'Grid',\n          `The number of children (${childCount}) does not match the number of columns defined (${columnCount}).`\n        );\n      }\n    }\n\n    const mergedRef = useMergeRefs(defaultRef, __internalRootRef);\n\n    return (\n      <Tag\n        {...baseProps}\n        className={clsx(\n          styles.grid,\n          baseProps.className,\n          { [styles['no-gutters']]: disableGutters },\n          __responsiveClassName ? __responsiveClassName(defaultBreakpoint) : null\n        )}\n        ref={mergedRef}\n      >\n        {flattenedChildren.map((child, i) => {\n          // If this react child is a primitive value, the key will be undefined\n          const key = child && typeof child === 'object' ? (child as Record<'key', unknown>).key : undefined;\n\n          return (\n            <div\n              key={key ? String(key) : undefined}\n              className={clsx(\n                styles['grid-column'],\n                getColumnClassNames('colspan', gridDefinition[i]?.colspan, defaultBreakpoint),\n                getColumnClassNames('offset', gridDefinition[i]?.offset, defaultBreakpoint),\n                getColumnClassNames('pull', gridDefinition[i]?.pull, defaultBreakpoint),\n                getColumnClassNames('push', gridDefinition[i]?.push, defaultBreakpoint)\n              )}\n            >\n              <div className={styles['restore-pointer-events']}>{child}</div>\n            </div>\n          );\n        })}\n      </Tag>\n    );\n  }\n);\n\nfunction getColumnClassNames(\n  prop: string,\n  mapping: undefined | number | GridProps.BreakpointMapping,\n  breakpoint: Breakpoint | null\n): string | null {\n  if (typeof mapping === 'number') {\n    return styles[`${prop}-${mapping}`];\n  }\n  if (breakpoint === null || mapping === undefined) {\n    return null;\n  }\n  return styles[`${prop}-${matchBreakpointMapping(mapping, breakpoint)}`];\n}\n\nexport default InternalGrid;\n"]}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseComponentProps } from '../internal/base-component';
+import { BaseComponentProps } from '../types/base-component';
 export interface HeaderProps extends BaseComponentProps {
     /**
      * The heading text. Plain text is recommended. The component renders the

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/header/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC;IAC9B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC;IAC5C;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,yBAAiB,WAAW,CAAC;IAC3B,KAAY,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,iBAAiB,CAAC;IAC7D,KAAY,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3D"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/header/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,WAAY,SAAQ,kBAAkB;IACrD;;;;OAIG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC;IAC9B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC;IAC5C;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,yBAAiB,WAAW,CAAC;IAC3B,KAAY,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,iBAAiB,CAAC;IAC7D,KAAY,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;CAC3D"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/header/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 HeaderProps extends BaseComponentProps {\n  /**\n   * The heading text. Plain text is recommended. The component renders the\n   * HTML heading tag based on the specified `variant` or `headingTagOverride`.\n   * @displayname title\n   */\n  children?: React.ReactNode;\n  /**\n   * Specifies the variant of the header:\n   * * `h1` - Use this for page level headers.\n   * * `h2` - Use this for container level headers.\n   * * `h3` - Use this for section level headers.\n   * * `awsui-h1-sticky` - Use this for sticky headers in cards and tables.\n   * @visualrefresh `awsui-h1-sticky` variant\n   */\n  variant?: HeaderProps.Variant;\n  /**\n   * Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)\n   * provided by the variant. Using this property does not change the visual appearance of the component.\n   */\n  headingTagOverride?: HeaderProps.HeadingTag;\n  /**\n   * Supplementary text below the heading.\n   */\n  description?: React.ReactNode;\n  /**\n   * Actions for the container.\n   */\n  actions?: React.ReactNode;\n  /**\n   * Specifies secondary content that's displayed to the right of the heading title. This is commonly used\n   * to display resource counters in table and cards components.\n   */\n  counter?: React.ReactNode;\n  /**\n   * Area next to the heading to display an Info link.\n   */\n  info?: React.ReactNode;\n}\n\nexport namespace HeaderProps {\n  export type Variant = 'h1' | 'h2' | 'h3' | 'awsui-h1-sticky';\n  export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/header/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 '../types/base-component';\n\nexport interface HeaderProps extends BaseComponentProps {\n  /**\n   * The heading text. Plain text is recommended. The component renders the\n   * HTML heading tag based on the specified `variant` or `headingTagOverride`.\n   * @displayname title\n   */\n  children?: React.ReactNode;\n  /**\n   * Specifies the variant of the header:\n   * * `h1` - Use this for page level headers.\n   * * `h2` - Use this for container level headers.\n   * * `h3` - Use this for section level headers.\n   * * `awsui-h1-sticky` - Use this for sticky headers in cards and tables.\n   * @visualrefresh `awsui-h1-sticky` variant\n   */\n  variant?: HeaderProps.Variant;\n  /**\n   * Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)\n   * provided by the variant. Using this property does not change the visual appearance of the component.\n   */\n  headingTagOverride?: HeaderProps.HeadingTag;\n  /**\n   * Supplementary text below the heading.\n   */\n  description?: React.ReactNode;\n  /**\n   * Actions for the container.\n   */\n  actions?: React.ReactNode;\n  /**\n   * Specifies secondary content that's displayed to the right of the heading title. This is commonly used\n   * to display resource counters in table and cards components.\n   */\n  counter?: React.ReactNode;\n  /**\n   * Area next to the heading to display an Info link.\n   */\n  info?: React.ReactNode;\n}\n\nexport namespace HeaderProps {\n  export type Variant = 'h1' | 'h2' | 'h3' | 'awsui-h1-sticky';\n  export type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';\n}\n"]}

package/lib/internal/template/help-panel/interfaces.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { BaseComponentProps } from '../internal/base-component';
+import { BaseComponentProps } from '../types/base-component';
 export interface HelpPanelProps extends BaseComponentProps {
     /**
      * Header of the help panel.

package/lib/internal/template/help-panel/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/help-panel/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,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/help-panel/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB"}

package/lib/internal/template/help-panel/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/help-panel/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 HelpPanelProps extends BaseComponentProps {\n  /**\n   * Header of the help panel.\n   *\n   * It should contain the only `h2` used in the help panel.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Main content of the help panel.\n   *\n   * Use `p, a, h3, h4, h5, span, div, ul, ol, li, code, pre, dl, dt, dd, hr, br, i, em, b, strong` tags to format the content.\n   * Use `code` for inline code or `pre` for code blocks.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Footer of the help panel.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Renders the panel in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text that's displayed when the panel is in a loading state.\n   * @i18n\n   */\n  loadingText?: string;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/help-panel/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 '../types/base-component';\n\nexport interface HelpPanelProps extends BaseComponentProps {\n  /**\n   * Header of the help panel.\n   *\n   * It should contain the only `h2` used in the help panel.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Main content of the help panel.\n   *\n   * Use `p, a, h3, h4, h5, span, div, ul, ol, li, code, pre, dl, dt, dd, hr, br, i, em, b, strong` tags to format the content.\n   * Use `code` for inline code or `pre` for code blocks.\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Footer of the help panel.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Renders the panel in a loading state. We recommend that you also set a `loadingText`.\n   */\n  loading?: boolean;\n\n  /**\n   * Specifies the text that's displayed when the panel is in a loading state.\n   * @i18n\n   */\n  loadingText?: string;\n}\n"]}

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

@@ -1,4 +1,4 @@
-import { BaseComponentProps } from '../internal/base-component';
+import { BaseComponentProps } from '../types/base-component';
 export interface HotspotProps extends BaseComponentProps {
     /**
      * ID of this hotspot. Use this ID in your tutorial data to refer to this

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/hotspot/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAExB;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEhD;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/hotspot/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAE7D,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD;;;;OAIG;IACH,SAAS,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAExB;;;;OAIG;IACH,SAAS,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAEhD;;;;;;;;;;;;OAYG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/hotspot/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\n\nexport interface HotspotProps extends BaseComponentProps {\n  /**\n   * ID of this hotspot. Use this ID in your tutorial data to refer to this\n   * hotspot's location in your application. The ID must be unique\n   * throughout your whole application.\n   */\n  hotspotId: string;\n\n  /**\n   * On which side of the content the hotspot icon should be displayed.\n   */\n  side?: 'left' | 'right';\n\n  /**\n   * The direction that the annotation popover should open in.\n   * Change this property if in the default direction the annotation popover\n   * overlaps too much with other content on the page.\n   */\n  direction?: 'top' | 'right' | 'bottom' | 'left';\n\n  /**\n   * Content that should be wrapped by the hotspot icon. Optional.\n   *\n   * If you supply this property, the hotspot will wrap it in an element with\n   * `flex: 1`, in order to give the children the maximum available space. The\n   * hotspot icon will be placed floating next to the children. Use\n   * this if you are wrapping e.g. an input field that should use the full\n   * available width, or a button.\n   *\n   * If you do not supply this property, the hotspot icon will behave as an inline\n   * element. Use this if you want to place the hotspot icon on a label, e.g. a\n   * checkbox's label.\n   */\n  children?: React.ReactNode;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/hotspot/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../types/base-component';\n\nexport interface HotspotProps extends BaseComponentProps {\n  /**\n   * ID of this hotspot. Use this ID in your tutorial data to refer to this\n   * hotspot's location in your application. The ID must be unique\n   * throughout your whole application.\n   */\n  hotspotId: string;\n\n  /**\n   * On which side of the content the hotspot icon should be displayed.\n   */\n  side?: 'left' | 'right';\n\n  /**\n   * The direction that the annotation popover should open in.\n   * Change this property if in the default direction the annotation popover\n   * overlaps too much with other content on the page.\n   */\n  direction?: 'top' | 'right' | 'bottom' | 'left';\n\n  /**\n   * Content that should be wrapped by the hotspot icon. Optional.\n   *\n   * If you supply this property, the hotspot will wrap it in an element with\n   * `flex: 1`, in order to give the children the maximum available space. The\n   * hotspot icon will be placed floating next to the children. Use\n   * this if you are wrapping e.g. an input field that should use the full\n   * available width, or a button.\n   *\n   * If you do not supply this property, the hotspot icon will behave as an inline\n   * element. Use this if you want to place the hotspot icon on a label, e.g. a\n   * checkbox's label.\n   */\n  children?: React.ReactNode;\n}\n"]}

package/lib/internal/template/icon/generated/icons.d.ts

@@ -32,6 +32,7 @@ declare const icons: {
     "closed-caption": JSX.Element;
     "command-prompt": JSX.Element;
     contact: JSX.Element;
+    "convert-code": JSX.Element;
     copy: JSX.Element;
     "delete-marker": JSX.Element;
     dot: JSX.Element;
@@ -94,6 +95,7 @@ declare const icons: {
     settings: JSX.Element;
     share: JSX.Element;
     shrink: JSX.Element;
+    "side-bar": JSX.Element;
     "slash-divider": JSX.Element;
     slash: JSX.Element;
     "star-filled": JSX.Element;

package/lib/internal/template/icon/generated/icons.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/icon/generated/icons.tsx"],"names":[],"mappings":"AACE,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IV,CAAC;AACF,eAAe,KAAK,CAAC"}
+{"version":3,"file":"icons.d.ts","sourceRoot":"","sources":["../../../../src/icon/generated/icons.tsx"],"names":[],"mappings":"AACE,QAAA,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8IV,CAAC;AACF,eAAe,KAAK,CAAC"}

package/lib/internal/template/icon/generated/icons.js

@@ -80,6 +80,10 @@ const icons = {
         React.createElement("path", { d: "M4.71 11.3 8 8 4.71 4.71", className: "stroke-linejoin-round" })),
     "contact": React.createElement("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", focusable: "false", "aria-hidden": "true" },
         React.createElement("path", { d: "M14 12c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h4v3l4-3h4Z", className: "stroke-linejoin-round" })),
+    "convert-code": React.createElement("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", focusable: "false", "aria-hidden": "true" },
+        React.createElement("path", { d: "M10 15h6M15 8V2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h6" }),
+        React.createElement("path", { d: "M5 7.5 8.5 11 5 14.5" }),
+        React.createElement("path", { d: "M3 3h2v2H3zM6 3h2v2H6zM9 3h2v2H9z", className: "filled no-stroke" })),
     "copy": React.createElement("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", focusable: "false", "aria-hidden": "true" },
         React.createElement("path", { d: "M15 5H5v10h10V5Z", className: "stroke-linejoin-round" }),
         React.createElement("path", { d: "M13 1H1v11", className: "stroke-linejoin-round" })),
@@ -257,6 +261,9 @@ const icons = {
         React.createElement("path", { d: "M3.5 11a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM12.5 6a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM12.5 15a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM10.326 4.7 5.678 7.293M10.223 11.483l-4.448-1.96" })),
     "shrink": React.createElement("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", focusable: "false", "aria-hidden": "true" },
         React.createElement("path", { d: "M10 1v5h5M10.71 5.29 15 1M1 10h5v5M5.3 10.7 1 15", className: "stroke-linejoin-round" })),
+    "side-bar": React.createElement("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", focusable: "false", "aria-hidden": "true" },
+        React.createElement("path", { d: "M6 3v10" }),
+        React.createElement("rect", { x: "1", y: "3", width: "14", height: "10", rx: "1" })),
     "slash-divider": React.createElement("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", focusable: "false", "aria-hidden": "true" },
         React.createElement("path", { d: "M10 2 6 14", className: "stroke-linejoin-round" })),
     "slash": React.createElement("svg", { viewBox: "0 0 16 16", xmlns: "http://www.w3.org/2000/svg", focusable: "false", "aria-hidden": "true" },