npm - @bcgov/design-system-react-components - Versions diffs - 0.3.1 → 0.4.0-pr505 - Mend

@bcgov/design-system-react-components 0.3.1 → 0.4.0-pr505

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/cjs/index.cjs CHANGED Viewed

@@ -31,8 +31,11 @@ function styleInject(css, ref) {
   }
 }
-var css_248z$k = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n  --surface-opacity-0: 0;\n  --surface-opacity-10: 0.1;\n  --surface-opacity-20: 0.2;\n  --surface-opacity-30: 0.3;\n  --surface-opacity-40: 0.4;\n  --surface-opacity-50: 0.5;\n  --surface-opacity-60: 0.6;\n  --surface-opacity-70: 0.7;\n  --surface-opacity-80: 0.8;\n  --surface-opacity-90: 0.9;\n  --surface-opacity-100: 1;\n  --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /* Default shadow for most content and UI elements */\n  --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Reduced shadow for secondary UI elements */\n  --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Standard shadow for UI elements like cards and buttons */\n  --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Larger shadow for emphasis. Use sparingly */\n  --surface-color-primary-button-default: #013366; /* Default fill colour for primary buttons */\n  --surface-color-primary-button-hover: #1E5189; /* Fill colour used when user hovers over primary button */\n  --surface-color-primary-button-disabled: #EDEBE9; /* Fill colour for inactive primary buttons */\n  --surface-color-primary-danger-button-default: #CE3E39; /* Default fill colour for buttons in danger/warning state */\n  --surface-color-primary-danger-button-hover: #A2312D; /* Fill colour used when user hovers over danger/warning button */\n  --surface-color-primary-danger-button-disabled: #EDEBE9; /* Default fill colour for disabled danger/warning button */\n  --surface-color-primary-default: #013366; /* Default theme colour for components and layout */\n  --surface-color-primary-hover: #1E5189; /* Hover variant of surface.color.primary.default */\n  --surface-color-primary-pressed: #01264C; /* Selected/pressed variant of surface.color.primary.default */\n  --surface-color-primary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.primary default */\n  --surface-color-secondary-button-default: #FFFFFF; /* Fill colour for secondary buttons */\n  --surface-color-secondary-button-hover: #EDEBE9; /* Fill colour used when user hovers over secondary button */\n  --surface-color-secondary-button-disabled: #EDEBE9; /* Fill colour for inactive secondary buttons */\n  --surface-color-secondary-default: #FFFFFF; /* Light theme colour for components and layout */\n  --surface-color-secondary-hover: #EDEBE9; /* Hover variant of surface.color.secondary.default */\n  --surface-color-secondary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.secondary.default */\n  --surface-color-secondary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.secondary default */\n  --surface-color-tertiary-button-default: rgba(255,255,255,0); /* Default fill colour for tertiary buttons */\n  --surface-color-tertiary-button-hover: #ECEAE8; /* Fill colour used when user hovers over tertiary button */\n  --surface-color-tertiary-button-disabled: #EDEBE9; /* Fill colour for inactive tertiary buttons */\n  --surface-color-tertiary-default: #FFFFFF00; /* Alternative light theme colour for components and layout */\n  --surface-color-tertiary-hover: #ECEAE8; /* Hover variant of surface.color.tertiary.default */\n  --surface-color-tertiary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.tertiary.default */\n  --surface-color-tertiary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.tertiary default */\n  --surface-color-menus-default: #FFFFFF; /* Default fill colour for menu items */\n  --surface-color-menus-hover: #EDEBE9; /* Fill colour used when user hovers over a menu item */\n  --surface-color-forms-default: #FFFFFF; /* Default fill colour for form/input fields */\n  --surface-color-forms-disabled: #EDEBE9; /* Fill colour for inactive/disabled form/input fields */\n  --surface-color-background-white: #FFFFFF; /* White background */\n  --surface-color-background-light-gray: #FAF9F8; /* Default background colour for layout */\n  --surface-color-background-light-blue: #F1F8FE; /* Light blue background */\n  --surface-color-background-dark-blue: #053662; /* Dark blue background */\n  --surface-color-border-default: #D8D8D8; /* Lighter border colour for UI elements */\n  --surface-color-border-medium: #898785; /* Default border colour for UI elements */\n  --surface-color-border-dark: #353433; /* Used as a hover colour for form fields and inputs */\n  --surface-color-border-active: #2E5DD7; /* Used as the active stroke colour for UI elements */\n  --surface-color-overlay-default: rgba(0,0,0,0.45); /* Background overlay colour for images and modal dialogues */\n  --support-surface-color-info: #F7F9FC;\n  --support-surface-color-danger: #F4E1E2; /* Background colour for error, failure or danger messages */\n  --support-surface-color-success: #F6FFF8; /* Background colour for success messages */\n  --support-surface-color-warning: #FEF1D8; /* Background colour for warning messages */\n  --support-border-color-info: #053662; /* Border stroke for general/informational messages */\n  --support-border-color-danger: #CE3E39; /* Border stroke for error, failure or danger messages */\n  --support-border-color-success: #42814A; /* Border stroke for success messages */\n  --support-border-color-warning: #F8BB47; /* Border stroke for warning messages */\n  --icons-size-xsmall: 14px; /* Smallest icon size */\n  --icons-size-small: 16px;\n  --icons-size-medium: 20px; /* Default icon size */\n  --icons-size-large: 24px;\n  --icons-size-xlarge: 32px; /* Largest icon size */\n  --icons-color-primary: #2D2D2D; /* Default colour for icons */\n  --icons-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous icons */\n  --icons-color-disabled: #9F9D9C; /* Use only for inactive/disabled icons */\n  --icons-color-link: #255A90; /* Use for hyperlinked icons */\n  --icons-color-info: #053662; /* Emphasis colour for icons in general/informational state */\n  --icons-color-danger: #CE3E39; /* Emphasis colour for icons in error, failure or danger state */\n  --icons-color-success: #42814A; /* Emphasis colour for icons in success state */\n  --icons-color-warning: #F8BB47; /* Emphasis colour for icons in warning state */\n  --icons-color-primary-invert: #FFFFFF; /* Default colour for icons on dark backgrounds */\n  --layout-border-width-none: 0;\n  --layout-border-width-small: 1px;\n  --layout-border-width-medium: 2px;\n  --layout-border-width-large: 4px;\n  --layout-padding-none: 0; /* No padding */\n  --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */\n  --layout-padding-xsmall: 0.25rem;\n  --layout-padding-small: 0.5rem;\n  --layout-padding-medium: 1rem; /* Default padding value for layout */\n  --layout-padding-large: 1.5rem;\n  --layout-padding-xlarge: 2rem; /* Largest padding value for layout */\n  --layout-margin-none: 0rem; /* No margin */\n  --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */\n  --layout-margin-xsmall: 0.25rem;\n  --layout-margin-small: 0.5rem; /* Default margin value for layout */\n  --layout-margin-medium: 1rem;\n  --layout-margin-large: 1.5rem;\n  --layout-margin-xlarge: 2rem;\n  --layout-margin-xxlarge: 2.5rem;\n  --layout-margin-xxxlarge: 3rem;\n  --layout-margin-huge: 3.5rem; /* Largest margin value for layout */\n  --layout-border-radius-none: 0;\n  --layout-border-radius-small: 2px;\n  --layout-border-radius-medium: 4px;\n  --layout-border-radius-large: 6px;\n  --typography-font-families-bc-sans: 'BC Sans'; /* BC Sans font. Requires BC Sans package */\n  --typography-line-heights-xxxdense: 1.125rem; /* Smallest line height */\n  --typography-line-heights-xxdense: 1.313rem;\n  --typography-line-heights-xdense: 1.688rem;\n  --typography-line-heights-dense: 1.913rem;\n  --typography-line-heights-regular: 2.125rem; /* Default line height */\n  --typography-line-heights-sparse: 2.25rem;\n  --typography-line-heights-xsparse: 3rem;\n  --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */\n  --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */\n  --typography-font-weights-regular: 400; /* System token, used to generate text styles */\n  --typography-font-weights-bold: 700; /* System token, used to generate text styles */\n  --typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */\n  --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */\n  --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */\n  --typography-font-size-label: 0.75rem;\n  --typography-font-size-small-body: 0.875rem;\n  --typography-font-size-body: 1rem;\n  --typography-font-size-large-body: 1.125rem;\n  --typography-font-size-h5: 1.25rem;\n  --typography-font-size-h4: 1.5rem;\n  --typography-font-size-h3: 1.75rem;\n  --typography-font-size-h2: 2rem;\n  --typography-font-size-h1: 2.25rem;\n  --typography-font-size-display: 3rem;\n  --typography-letter-spacing-0: 0em; /* System token, used to generate type styles */\n  --typography-paragraph-spacing-0: 0; /* System token, used to generate type styles */\n  --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /* Labels and captions */\n  --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /* Smaller body text */\n  --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /* Default body text */\n  --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /* Larger body text */\n  --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /* Alternate (unbolded) style for Heading 6 */\n  --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /* Alternate (unbolded) style for Heading 5 */\n  --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /* Alternate (unbolded) style for Heading 4 */\n  --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 3 */\n  --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /* Alternate (unbolded) style for Heading 2 */\n  --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 1 */\n  --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /* Extra-large body text size. Do not use for headings */\n  --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (bolded) */\n  --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /* Default for small body text (bolded) */\n  --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /* Default for body text (bolded) */\n  --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (bolded) */\n  --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H6 */\n  --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H5 */\n  --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H4 */\n  --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H3 */\n  --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H2 */\n  --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H1 */\n  --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /* Extra-large font size (bolded). Do not use for headings */\n  --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (italic) */\n  --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /* Small body text (italic) */\n  --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /* Default for body text (italic) */\n  --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (italic) */\n  --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Alternate (italic) style for Heading 6 */\n  --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /* Alternate (italic) style for Heading 5 */\n  --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /* Alternate (italic) style for Heading 4 */\n  --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 3 */\n  --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /* Alternate (italic) style for Heading 2 */\n  --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 1 */\n  --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /* Extra-large font size (italic). Do not use for headings */\n  --typography-text-case-none: none;\n  --typography-text-decoration-none: none; /* System token, used to generate type styles */\n  --typography-paragraph-indent-0: 0px; /* System token, used to generate type styles */\n  --typography-color-primary: #2D2D2D; /* Default colour for all body text and headings */\n  --typography-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous text */\n  --typography-color-placeholder: #9F9D9C; /* Use for placeholder text in forms */\n  --typography-color-disabled: #9F9D9C; /* Use only for text in inactive user interface elements */\n  --typography-color-link: #255A90; /* Use for hyperlinks in body text and headings */\n  --typography-color-danger: #CE3E39; /* Use for error, failure or danger message text */\n  --typography-color-primary-invert: #FFFFFF; /* Default colour for text on dark backgrounds */\n  --typography-color-secondary-invert: #ECEAE8; /* Secondary colour for text on dark backgrounds */\n  --theme-gold-10: #FEF8E8; /* Gold scale — lightest */\n  --theme-gold-20: #FEF0D8; /* Gold scale */\n  --theme-gold-30: #FDE9C4; /* Gold scale */\n  --theme-gold-40: #FCE2B0; /* Gold scale */\n  --theme-gold-50: #FBDA9D; /* Gold scale */\n  --theme-gold-60: #FBD389; /* Gold scale */\n  --theme-gold-70: #FACC75; /* Gold scale */\n  --theme-gold-80: #F9C462; /* Gold scale */\n  --theme-gold-90: #F8BA47; /* Gold scale */\n  --theme-gold-100: #FCBA19; /* Gold scale — darkest */\n  --theme-blue-10: #F1F8FE; /* Blue scale — lightest */\n  --theme-blue-20: #D8EAFD; /* Blue scale */\n  --theme-blue-30: #C1DDFC; /* Blue scale */\n  --theme-blue-40: #A8D0FB; /* Blue scale */\n  --theme-blue-50: #91C4FA; /* Blue scale */\n  --theme-blue-60: #7AB8F9; /* Blue scale */\n  --theme-blue-70: #5595D9; /* Blue scale */\n  --theme-blue-80: #3470B1; /* Blue scale */\n  --theme-blue-90: #1E5189; /* Blue scale */\n  --theme-blue-100: #013366; /* Blue scale — darkest */\n  --theme-gray-10: #FAF9F8; /* Greyscale — lightest */\n  --theme-gray-20: #F3F2F1; /* Greyscale */\n  --theme-gray-30: #ECEAE8; /* Greyscale */\n  --theme-gray-40: #E0DEDC; /* Greyscale */\n  --theme-gray-50: #D1CFCD; /* Greyscale */\n  --theme-gray-60: #C6C5C3; /* Greyscale */\n  --theme-gray-70: #9F9D9C; /* Greyscale */\n  --theme-gray-80: #605E5C; /* Greyscale */\n  --theme-gray-90: #3D3C3B; /* Greyscale */\n  --theme-gray-100: #353433; /* Greyscale */\n  --theme-gray-110: #252423; /* Greyscale — darkest */\n  --theme-gray-white: #FFFFFF; /* White */\n  --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */\n  --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */\n}\n";
-styleInject(css_248z$k);
+var css_248z$m = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n  --surface-opacity-0: 0;\n  --surface-opacity-10: 0.1;\n  --surface-opacity-20: 0.2;\n  --surface-opacity-30: 0.3;\n  --surface-opacity-40: 0.4;\n  --surface-opacity-50: 0.5;\n  --surface-opacity-60: 0.6;\n  --surface-opacity-70: 0.7;\n  --surface-opacity-80: 0.8;\n  --surface-opacity-90: 0.9;\n  --surface-opacity-100: 1;\n  --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /* Default shadow for most content and UI elements */\n  --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Reduced shadow for secondary UI elements */\n  --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Standard shadow for UI elements like cards and buttons */\n  --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Larger shadow for emphasis. Use sparingly */\n  --surface-color-primary-button-default: #013366; /* Default fill colour for primary buttons */\n  --surface-color-primary-button-hover: #1E5189; /* Fill colour used when user hovers over primary button */\n  --surface-color-primary-button-disabled: #EDEBE9; /* Fill colour for inactive primary buttons */\n  --surface-color-primary-danger-button-default: #CE3E39; /* Default fill colour for buttons in danger/warning state */\n  --surface-color-primary-danger-button-hover: #A2312D; /* Fill colour used when user hovers over danger/warning button */\n  --surface-color-primary-danger-button-disabled: #EDEBE9; /* Default fill colour for disabled danger/warning button */\n  --surface-color-primary-default: #013366; /* Default theme colour for components and layout */\n  --surface-color-primary-hover: #1E5189; /* Hover variant of surface.color.primary.default */\n  --surface-color-primary-pressed: #01264C; /* Selected/pressed variant of surface.color.primary.default */\n  --surface-color-primary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.primary default */\n  --surface-color-secondary-button-default: #FFFFFF; /* Fill colour for secondary buttons */\n  --surface-color-secondary-button-hover: #EDEBE9; /* Fill colour used when user hovers over secondary button */\n  --surface-color-secondary-button-disabled: #EDEBE9; /* Fill colour for inactive secondary buttons */\n  --surface-color-secondary-default: #FFFFFF; /* Light theme colour for components and layout */\n  --surface-color-secondary-hover: #EDEBE9; /* Hover variant of surface.color.secondary.default */\n  --surface-color-secondary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.secondary.default */\n  --surface-color-secondary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.secondary default */\n  --surface-color-tertiary-button-default: rgba(255,255,255,0); /* Default fill colour for tertiary buttons */\n  --surface-color-tertiary-button-hover: #ECEAE8; /* Fill colour used when user hovers over tertiary button */\n  --surface-color-tertiary-button-disabled: #EDEBE9; /* Fill colour for inactive tertiary buttons */\n  --surface-color-tertiary-default: #FFFFFF00; /* Alternative light theme colour for components and layout */\n  --surface-color-tertiary-hover: #ECEAE8; /* Hover variant of surface.color.tertiary.default */\n  --surface-color-tertiary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.tertiary.default */\n  --surface-color-tertiary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.tertiary default */\n  --surface-color-menus-default: #FFFFFF; /* Default fill colour for menu items */\n  --surface-color-menus-hover: #EDEBE9; /* Fill colour used when user hovers over a menu item */\n  --surface-color-forms-default: #FFFFFF; /* Default fill colour for form/input fields */\n  --surface-color-forms-disabled: #EDEBE9; /* Fill colour for inactive/disabled form/input fields */\n  --surface-color-background-white: #FFFFFF; /* White background */\n  --surface-color-background-light-gray: #FAF9F8; /* Default background colour for layout */\n  --surface-color-background-light-blue: #F1F8FE; /* Light blue background */\n  --surface-color-background-dark-blue: #053662; /* Dark blue background */\n  --surface-color-border-default: #D8D8D8; /* Lighter border colour for UI elements */\n  --surface-color-border-medium: #898785; /* Default border colour for UI elements */\n  --surface-color-border-dark: #353433; /* Used as a hover colour for form fields and inputs */\n  --surface-color-border-active: #2E5DD7; /* Used as the active stroke colour for UI elements */\n  --surface-color-overlay-default: rgba(0,0,0,0.45); /* Background overlay colour for images and modal dialogues */\n  --support-surface-color-info: #F7F9FC;\n  --support-surface-color-danger: #F4E1E2; /* Background colour for error, failure or danger messages */\n  --support-surface-color-success: #F6FFF8; /* Background colour for success messages */\n  --support-surface-color-warning: #FEF1D8; /* Background colour for warning messages */\n  --support-border-color-info: #053662; /* Border stroke for general/informational messages */\n  --support-border-color-danger: #CE3E39; /* Border stroke for error, failure or danger messages */\n  --support-border-color-success: #42814A; /* Border stroke for success messages */\n  --support-border-color-warning: #F8BB47; /* Border stroke for warning messages */\n  --icons-size-xsmall: 14px; /* Smallest icon size */\n  --icons-size-small: 16px;\n  --icons-size-medium: 20px; /* Default icon size */\n  --icons-size-large: 24px;\n  --icons-size-xlarge: 32px; /* Largest icon size */\n  --icons-color-primary: #2D2D2D; /* Default colour for icons */\n  --icons-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous icons */\n  --icons-color-disabled: #9F9D9C; /* Use only for inactive/disabled icons */\n  --icons-color-link: #255A90; /* Use for hyperlinked icons */\n  --icons-color-info: #053662; /* Emphasis colour for icons in general/informational state */\n  --icons-color-danger: #CE3E39; /* Emphasis colour for icons in error, failure or danger state */\n  --icons-color-success: #42814A; /* Emphasis colour for icons in success state */\n  --icons-color-warning: #F8BB47; /* Emphasis colour for icons in warning state */\n  --icons-color-primary-invert: #FFFFFF; /* Default colour for icons on dark backgrounds */\n  --layout-border-width-none: 0;\n  --layout-border-width-small: 1px;\n  --layout-border-width-medium: 2px;\n  --layout-border-width-large: 4px;\n  --layout-padding-none: 0; /* No padding */\n  --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */\n  --layout-padding-xsmall: 0.25rem;\n  --layout-padding-small: 0.5rem;\n  --layout-padding-medium: 1rem; /* Default padding value for layout */\n  --layout-padding-large: 1.5rem;\n  --layout-padding-xlarge: 2rem; /* Largest padding value for layout */\n  --layout-margin-none: 0rem; /* No margin */\n  --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */\n  --layout-margin-xsmall: 0.25rem;\n  --layout-margin-small: 0.5rem; /* Default margin value for layout */\n  --layout-margin-medium: 1rem;\n  --layout-margin-large: 1.5rem;\n  --layout-margin-xlarge: 2rem;\n  --layout-margin-xxlarge: 2.5rem;\n  --layout-margin-xxxlarge: 3rem;\n  --layout-margin-huge: 3.5rem; /* Largest margin value for layout */\n  --layout-border-radius-none: 0;\n  --layout-border-radius-small: 2px;\n  --layout-border-radius-medium: 4px;\n  --layout-border-radius-large: 6px;\n  --typography-font-families-bc-sans: 'BC Sans'; /* BC Sans font. Requires BC Sans package */\n  --typography-line-heights-xxxdense: 1.125rem; /* Smallest line height */\n  --typography-line-heights-xxdense: 1.313rem;\n  --typography-line-heights-xdense: 1.688rem;\n  --typography-line-heights-dense: 1.913rem;\n  --typography-line-heights-regular: 2.125rem; /* Default line height */\n  --typography-line-heights-sparse: 2.25rem;\n  --typography-line-heights-xsparse: 3rem;\n  --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */\n  --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */\n  --typography-font-weights-regular: 400; /* System token, used to generate text styles */\n  --typography-font-weights-bold: 700; /* System token, used to generate text styles */\n  --typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */\n  --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */\n  --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */\n  --typography-font-size-label: 0.75rem;\n  --typography-font-size-small-body: 0.875rem;\n  --typography-font-size-body: 1rem;\n  --typography-font-size-large-body: 1.125rem;\n  --typography-font-size-h5: 1.25rem;\n  --typography-font-size-h4: 1.5rem;\n  --typography-font-size-h3: 1.75rem;\n  --typography-font-size-h2: 2rem;\n  --typography-font-size-h1: 2.25rem;\n  --typography-font-size-display: 3rem;\n  --typography-letter-spacing-0: 0em; /* System token, used to generate type styles */\n  --typography-paragraph-spacing-0: 0; /* System token, used to generate type styles */\n  --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /* Labels and captions */\n  --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /* Smaller body text */\n  --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /* Default body text */\n  --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /* Larger body text */\n  --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /* Alternate (unbolded) style for Heading 6 */\n  --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /* Alternate (unbolded) style for Heading 5 */\n  --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /* Alternate (unbolded) style for Heading 4 */\n  --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 3 */\n  --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /* Alternate (unbolded) style for Heading 2 */\n  --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 1 */\n  --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /* Extra-large body text size. Do not use for headings */\n  --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (bolded) */\n  --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /* Default for small body text (bolded) */\n  --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /* Default for body text (bolded) */\n  --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (bolded) */\n  --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H6 */\n  --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H5 */\n  --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H4 */\n  --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H3 */\n  --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H2 */\n  --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H1 */\n  --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /* Extra-large font size (bolded). Do not use for headings */\n  --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (italic) */\n  --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /* Small body text (italic) */\n  --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /* Default for body text (italic) */\n  --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (italic) */\n  --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Alternate (italic) style for Heading 6 */\n  --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /* Alternate (italic) style for Heading 5 */\n  --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /* Alternate (italic) style for Heading 4 */\n  --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 3 */\n  --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /* Alternate (italic) style for Heading 2 */\n  --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 1 */\n  --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /* Extra-large font size (italic). Do not use for headings */\n  --typography-text-case-none: none;\n  --typography-text-decoration-none: none; /* System token, used to generate type styles */\n  --typography-paragraph-indent-0: 0px; /* System token, used to generate type styles */\n  --typography-color-primary: #2D2D2D; /* Default colour for all body text and headings */\n  --typography-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous text */\n  --typography-color-placeholder: #9F9D9C; /* Use for placeholder text in forms */\n  --typography-color-disabled: #9F9D9C; /* Use only for text in inactive user interface elements */\n  --typography-color-link: #255A90; /* Use for hyperlinks in body text and headings */\n  --typography-color-danger: #CE3E39; /* Use for error, failure or danger message text */\n  --typography-color-primary-invert: #FFFFFF; /* Default colour for text on dark backgrounds */\n  --typography-color-secondary-invert: #ECEAE8; /* Secondary colour for text on dark backgrounds */\n  --theme-gold-10: #FEF8E8; /* Gold scale — lightest */\n  --theme-gold-20: #FEF0D8; /* Gold scale */\n  --theme-gold-30: #FDE9C4; /* Gold scale */\n  --theme-gold-40: #FCE2B0; /* Gold scale */\n  --theme-gold-50: #FBDA9D; /* Gold scale */\n  --theme-gold-60: #FBD389; /* Gold scale */\n  --theme-gold-70: #FACC75; /* Gold scale */\n  --theme-gold-80: #F9C462; /* Gold scale */\n  --theme-gold-90: #F8BA47; /* Gold scale */\n  --theme-gold-100: #FCBA19; /* Gold scale — darkest */\n  --theme-blue-10: #F1F8FE; /* Blue scale — lightest */\n  --theme-blue-20: #D8EAFD; /* Blue scale */\n  --theme-blue-30: #C1DDFC; /* Blue scale */\n  --theme-blue-40: #A8D0FB; /* Blue scale */\n  --theme-blue-50: #91C4FA; /* Blue scale */\n  --theme-blue-60: #7AB8F9; /* Blue scale */\n  --theme-blue-70: #5595D9; /* Blue scale */\n  --theme-blue-80: #3470B1; /* Blue scale */\n  --theme-blue-90: #1E5189; /* Blue scale */\n  --theme-blue-100: #013366; /* Blue scale — darkest */\n  --theme-gray-10: #FAF9F8; /* Greyscale — lightest */\n  --theme-gray-20: #F3F2F1; /* Greyscale */\n  --theme-gray-30: #ECEAE8; /* Greyscale */\n  --theme-gray-40: #E0DEDC; /* Greyscale */\n  --theme-gray-50: #D1CFCD; /* Greyscale */\n  --theme-gray-60: #C6C5C3; /* Greyscale */\n  --theme-gray-70: #9F9D9C; /* Greyscale */\n  --theme-gray-80: #605E5C; /* Greyscale */\n  --theme-gray-90: #3D3C3B; /* Greyscale */\n  --theme-gray-100: #353433; /* Greyscale */\n  --theme-gray-110: #252423; /* Greyscale — darkest */\n  --theme-gray-white: #FFFFFF; /* White */\n  --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */\n  --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */\n}\n";
+styleInject(css_248z$m);
+var css_248z$l = ".bcds-Alert-Banner {\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-around;\n  width: 100%;\n  padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n\n.bcds-Alert-Banner--Container {\n  flex-grow: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: var(--layout-padding-medium);\n  max-width: 1100px;\n  padding: var(--layout-padding-small) var(--layout-padding-none);\n}\n\n.bcds-Alert-Banner--Icon {\n  align-self: first baseline;\n  justify-self: flex-start;\n  padding-top: var(--layout-padding-xsmall);\n  color: var(--icons-color-primary-invert);\n}\n\n.bcds-Alert-Banner--Content {\n  display: inline-flex;\n  gap: var(--layout-margin-medium);\n  align-items: first baseline;\n  flex-grow: 1;\n  flex-wrap: wrap;\n  font: var(--typography-regular-body);\n  color: var(--typography-color-primary-invert);\n}\n\n.bcds-Alert-Banner--closeIcon {\n  align-self: first baseline;\n}\n\n.bcds-Alert-Banner--closeIcon > .bcds-react-aria-Button[data-hovered] svg {\n  color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner--closeIcon svg {\n  color: var(--icons-color-primary-invert);\n}\n\n/* Variants */\n\n/* Info theme */\n.bcds-Alert-Banner.info {\n  background-color: var(--surface-color-background-dark-blue);\n}\n\n/* Success theme */\n.bcds-Alert-Banner.success {\n  background-color: var(--support-border-color-success);\n}\n\n/* Warning theme */\n.bcds-Alert-Banner.warning {\n  background-color: var(--support-border-color-warning);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Icon {\n  color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Content {\n  color: var(--typography-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--closeIcon svg {\n  color: var(--icons-color-primary);\n}\n\n/* Danger theme */\n.bcds-Alert-Banner.danger {\n  background-color: var(--support-border-color-danger);\n}\n\n/* Black theme */\n\n.bcds-Alert-Banner.black {\n  background-color: var(--theme-gray-110);\n}\n";
+styleInject(css_248z$l);
 /*
  * Copyright 2024 Adobe. All rights reserved.
@@ -15190,43 +15193,68 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
     }, renderProps.children));
 }
-var css_248z$j = ".bcds-react-aria-Button {\n  border: none;\n  border-radius: var(--layout-border-radius-medium);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--layout-padding-small);\n  font: var(--typography-regular-body);\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.bcds-react-aria-Button[data-disabled] {\n  cursor: not-allowed;\n}\n.bcds-react-aria-Button[data-focused] {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Icon button */\n.bcds-react-aria-Button.icon {\n  align-items: center;\n  justify-content: space-around;\n}\n\n/* Sizes */\n.bcds-react-aria-Button.small {\n  min-height: 32px;\n}\n.bcds-react-aria-Button.small.icon {\n  padding: unset;\n  height: 32px;\n  width: 32px;\n  min-width: 32px;\n}\n.bcds-react-aria-Button.medium {\n  min-height: 40px;\n}\n.bcds-react-aria-Button.medium.icon {\n  padding: unset;\n  height: 40px;\n  width: 40px;\n  min-width: 40px;\n}\n\n/* Variant - Primary */\n.bcds-react-aria-Button.primary {\n  background: var(--surface-color-primary-button-default);\n  color: var(--icons-color-primary-invert);\n}\n.bcds-react-aria-Button.primary.danger {\n  background-color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.primary[data-disabled] {\n  background-color: var(--surface-color-primary-danger-button-disabled);\n  color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.primary[data-hovered] {\n  background-color: var(--surface-color-primary-button-hover);\n}\n.bcds-react-aria-Button.primary.danger[data-hovered] {\n  background-color: var(--surface-color-primary-danger-button-hover);\n}\n\n/* Variant - Secondary */\n.bcds-react-aria-Button.secondary {\n  background-color: var(--surface-color-secondary-button-default);\n  border: 1px solid var(--surface-color-border-dark);\n  color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.secondary.danger {\n  border-color: var(--support-border-color-danger);\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.secondary[data-disabled] {\n  background-color: var(--surface-color-secondary-button-disabled);\n  border-color: var(--surface-color-border-default);\n  color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.secondary[data-hovered] {\n  background-color: var(--surface-color-secondary-button-hover);\n}\n.bcds-react-aria-Button.secondary.danger[data-hovered] {\n  background-color: var(--support-surface-color-danger);\n}\n\n/* Variant - Tertiary */\n.bcds-react-aria-Button.tertiary {\n  background-color: var(--surface-color-tertiary-button-default);\n  color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.tertiary.danger {\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.tertiary[data-disabled] {\n  background-color: var(--surface-color-tertiary-button-default);\n  color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.tertiary[data-hovered] {\n  background-color: var(--surface-color-tertiary-button-hover);\n}\n.bcds-react-aria-Button.tertiary.danger[data-hovered] {\n  background-color: var(--support-surface-color-danger);\n}\n\n/* Variant - Link */\n.bcds-react-aria-Button.link {\n  background-color: var(--surface-color-tertiary-button-default);\n  color: var(--typography-color-link);\n  text-decoration: underline;\n  text-underline-offset: 0.3em;\n}\n.bcds-react-aria-Button.link.danger {\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.link[data-disabled] {\n  color: var(--typography-color-disabled);\n}\n";
-styleInject(css_248z$j);
+var css_248z$k = ".bcds-react-aria-Button {\n  border: none;\n  border-radius: var(--layout-border-radius-medium);\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  gap: var(--layout-padding-small);\n  font: var(--typography-regular-body);\n  padding-left: 16px;\n  padding-right: 16px;\n}\n.bcds-react-aria-Button[data-disabled] {\n  cursor: not-allowed;\n}\n.bcds-react-aria-Button[data-focused] {\n  outline: solid var(--layout-border-width-medium)\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Icon button */\n.bcds-react-aria-Button.icon {\n  align-items: center;\n  justify-content: space-around;\n}\n\n/* Sizes */\n.bcds-react-aria-Button.small {\n  min-height: 32px;\n}\n.bcds-react-aria-Button.small.icon {\n  padding: unset;\n  height: 32px;\n  width: 32px;\n  min-width: 32px;\n}\n.bcds-react-aria-Button.medium {\n  min-height: 40px;\n}\n.bcds-react-aria-Button.medium.icon {\n  padding: unset;\n  height: 40px;\n  width: 40px;\n  min-width: 40px;\n}\n\n/* Variant - Primary */\n.bcds-react-aria-Button.primary {\n  background: var(--surface-color-primary-button-default);\n  color: var(--icons-color-primary-invert);\n}\n.bcds-react-aria-Button.primary.danger {\n  background-color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.primary[data-disabled] {\n  background-color: var(--surface-color-primary-danger-button-disabled);\n  color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.primary[data-hovered] {\n  background-color: var(--surface-color-primary-button-hover);\n}\n.bcds-react-aria-Button.primary.danger[data-hovered] {\n  background-color: var(--surface-color-primary-danger-button-hover);\n}\n\n/* Variant - Secondary */\n.bcds-react-aria-Button.secondary {\n  background-color: var(--surface-color-secondary-button-default);\n  border: 1px solid var(--surface-color-border-dark);\n  color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.secondary.danger {\n  border-color: var(--support-border-color-danger);\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.secondary[data-disabled] {\n  background-color: var(--surface-color-secondary-button-disabled);\n  border-color: var(--surface-color-border-default);\n  color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.secondary[data-hovered] {\n  background-color: var(--surface-color-secondary-button-hover);\n}\n.bcds-react-aria-Button.secondary.danger[data-hovered] {\n  background-color: var(--support-surface-color-danger);\n}\n\n/* Variant - Tertiary */\n.bcds-react-aria-Button.tertiary {\n  background-color: var(--surface-color-tertiary-button-default);\n  color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.tertiary.danger {\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.tertiary[data-disabled] {\n  background-color: var(--surface-color-tertiary-button-default);\n  color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.tertiary[data-hovered] {\n  background-color: var(--surface-color-tertiary-button-hover);\n}\n.bcds-react-aria-Button.tertiary.danger[data-hovered] {\n  background-color: var(--support-surface-color-danger);\n}\n\n/* Variant - Link */\n.bcds-react-aria-Button.link {\n  background-color: var(--surface-color-tertiary-button-default);\n  color: var(--typography-color-link);\n  text-decoration: underline;\n  text-underline-offset: 0.3em;\n}\n.bcds-react-aria-Button.link.danger {\n  color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.link[data-disabled] {\n  color: var(--typography-color-disabled);\n}\n";
+styleInject(css_248z$k);
 function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
     return (jsxRuntime.jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `bcds-react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
 }
-var css_248z$i = ".bcds-ButtonGroup {\n  display: flex;\n  gap: var(--layout-margin-small);\n  flex-grow: 1;\n}\n\n.bcds-ButtonGroup.horizontal {\n  flex-direction: row;\n}\n\n.bcds-ButtonGroup.vertical {\n  flex-direction: column;\n}\n\n.bcds-ButtonGroup.start {\n  justify-content: flex-start;\n}\n\n.bcds-ButtonGroup.center {\n  justify-content: center;\n}\n\n.bcds-ButtonGroup.end {\n  justify-content: flex-end;\n}\n";
-styleInject(css_248z$i);
-function ButtonGroup({ orientation = "horizontal", alignment = "start", ariaLabel, children, ...props }) {
-    return (jsxRuntime.jsx("div", { className: `bcds-ButtonGroup ${orientation} ${alignment}`, role: "group", "aria-label": ariaLabel, ...props, children: children }));
-}
+/* The component implements the Circle Check icon from Font Awesome: https://fontawesome.com/icons/circle-check */
 function SvgCheckCircleIcon({ id = "check-icon" }) {
     return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M12.4688 7.46875C12.75 7.1875 13.2188 7.1875 13.5 7.5C13.8125 7.78125 13.8125 8.25 13.5 8.53125L9.5 12.5312C9.375 12.6875 9.1875 12.75 9 12.75C8.78125 12.75 8.59375 12.6875 8.4375 12.5312L6.4375 10.5312C6.125 10.25 6.125 9.78125 6.4375 9.46875C6.71875 9.1875 7.1875 9.1875 7.5 9.46875L9 10.9688L12.4688 7.46875ZM10 2C14.4062 2 18 5.59375 18 10C18 14.4375 14.4062 18 10 18C5.5625 18 2 14.4375 2 10C2 5.59375 5.5625 2 10 2ZM10 16.5C13.5625 16.5 16.5 13.5938 16.5 10C16.5 6.4375 13.5625 3.5 10 3.5C6.40625 3.5 3.5 6.4375 3.5 10C3.5 13.5938 6.40625 16.5 10 16.5Z", fill: "currentColor" }) }) }));
 }
+/* The component implements the X Mark icon from Font Awesome: https://fontawesome.com/icons/xmark */
 function SvgCloseIcon({ id = "close-icon" }) {
     return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M16 5.21286L14.7871 4L10 8.78714L5.21286 4L4 5.21286L8.78714 10L4 14.7871L5.21286 16L10 11.2129L14.7871 16L16 14.7871L11.2129 10L16 5.21286Z", fill: "currentColor" }) }) }));
 }
+/* The component implements the Circle Exclamation icon from Font Awesome: https://fontawesome.com/icons/circle-exclamation */
 function SvgExclamationCircleIcon({ id = "exclamation-icon-circle", }) {
     return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M9.99999 2C14.4062 2 18 5.59375 18 10C18 14.4375 14.4062 18 9.99999 18C5.56249 18 1.99998 14.4375 1.99998 10C1.99998 5.59375 5.56249 2 9.99999 2ZM9.99999 16.5C13.5625 16.5 16.5 13.5938 16.5 10C16.5 6.4375 13.5625 3.5 9.99999 3.5C6.40624 3.5 3.49999 6.4375 3.49999 10C3.49999 13.5938 6.40624 16.5 9.99999 16.5ZM9.99999 11.5C9.56249 11.5 9.24999 11.1875 9.24999 10.75V6.75C9.24999 6.34375 9.56249 6 9.99999 6C10.4062 6 10.75 6.34375 10.75 6.75V10.75C10.75 11.1875 10.4062 11.5 9.99999 11.5ZM9.99999 12.5625C10.5312 12.5625 10.9687 13 10.9687 13.5312C10.9687 14.0625 10.5312 14.5 9.99999 14.5C9.43749 14.5 8.99999 14.0625 8.99999 13.5312C8.99999 13 9.43749 12.5625 9.99999 12.5625Z", fill: "currentColor" }) }) }));
 }
-// This icon is available as a plain SVG at src/assets/icon-exclamation.svg
+/* The component implements the Triangle Exclamation icon from Font Awesome: https://fontawesome.com/icons/triangle-exclamation */
 function SvgExclamationIcon({ id = "exclamation-icon" }) {
     return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z", fill: "currentColor" }) }) }));
 }
+/* The component implements the Circle Info icon from Font Awesome: https://fontawesome.com/icons/circle-info */
 function SvgInfoIcon({ id = "information-icon" }) {
     return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M9.99999 2C14.4062 2 18 5.59375 18 10C18 14.4375 14.4062 18 9.99999 18C5.56249 18 1.99998 14.4375 1.99998 10C1.99998 5.59375 5.56249 2 9.99999 2ZM9.99999 16.5C13.5625 16.5 16.5 13.5938 16.5 10C16.5 6.4375 13.5625 3.5 9.99999 3.5C6.40624 3.5 3.49999 6.4375 3.49999 10C3.49999 13.5938 6.40624 16.5 9.99999 16.5ZM11.25 12.5C11.6562 12.5 12 12.8438 12 13.25C12 13.6875 11.6562 14 11.25 14H8.74999C8.31249 14 7.99999 13.6875 7.99999 13.25C7.99999 12.8438 8.31249 12.5 8.74999 12.5H9.24999V10.5H8.99999C8.56249 10.5 8.24999 10.1875 8.24999 9.75C8.24999 9.34375 8.56249 9 8.99999 9H9.99999C10.4062 9 10.75 9.34375 10.75 9.75V12.5H11.25ZM9.99999 8C9.43749 8 8.99999 7.5625 8.99999 7C8.99999 6.46875 9.43749 6 9.99999 6C10.5312 6 11 6.46875 11 7C11 7.5625 10.5312 8 9.99999 8Z", fill: "currentColor" }) }) }));
 }
-var css_248z$h = ".bcds-react-aria-AlertDialog {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Variant icons */\n.bcds-react-aria-AlertDialog.info .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-primary);\n}\n.bcds-react-aria-AlertDialog.confirmation .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-success);\n}\n.bcds-react-aria-AlertDialog.warning .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-warning);\n}\n.bcds-react-aria-AlertDialog.error .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-AlertDialog.destructive .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n\n.bcds-react-aria-AlertDialog--Header {\n  display: inline-flex;\n  flex-direction: row;\n  gap: var(--layout-padding-small);\n  justify-content: space-between;\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog--Title {\n  flex-grow: 1;\n  font: var(--typography-bold-h5);\n  color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--Icon {\n  justify-self: flex-start;\n  align-self: center;\n  padding-top: var(--layout-padding-xsmall);\n}\n\n.bcds-react-aria-AlertDialog--closeIcon {\n  justify-self: flex-end;\n  color: var(--icons-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--children {\n  font: var(--typography-regular-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog > .bcds-ButtonGroup {\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n";
-styleInject(css_248z$h);
+/* Sets correct icon for theme */
+function getIcon$2(variant) {
+    switch (variant) {
+        case "info":
+            return jsxRuntime.jsx(SvgInfoIcon, {});
+        case "black":
+            return jsxRuntime.jsx(SvgInfoIcon, {});
+        case "success":
+            return jsxRuntime.jsx(SvgCheckCircleIcon, {});
+        case "warning":
+            return jsxRuntime.jsx(SvgExclamationIcon, {});
+        case "danger":
+            return jsxRuntime.jsx(SvgExclamationCircleIcon, {});
+        default:
+            return;
+    }
+}
+function AlertBanner({ variant = "info", isIconHidden = false, isCloseable = true, role = "status", onClose, children, customIcon, ...props }) {
+    return (jsxRuntime.jsx("div", { className: `bcds-Alert-Banner ${variant}`, ...props, children: jsxRuntime.jsxs("div", { className: "bcds-Alert-Banner--Container", children: [" ", !isIconHidden && (jsxRuntime.jsx("span", { className: "bcds-Alert-Banner--Icon", children: customIcon ? customIcon : getIcon$2(variant) })), jsxRuntime.jsx("div", { className: "bcds-Alert-Banner--Content", role: role, children: children }), isCloseable && (jsxRuntime.jsx("span", { className: "bcds-Alert-Banner--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }) }));
+}
+var css_248z$j = ".bcds-ButtonGroup {\n  display: flex;\n  gap: var(--layout-margin-small);\n  flex-grow: 1;\n}\n\n.bcds-ButtonGroup.horizontal {\n  flex-direction: row;\n}\n\n.bcds-ButtonGroup.vertical {\n  flex-direction: column;\n}\n\n.bcds-ButtonGroup.start {\n  justify-content: flex-start;\n}\n\n.bcds-ButtonGroup.center {\n  justify-content: center;\n}\n\n.bcds-ButtonGroup.end {\n  justify-content: flex-end;\n}\n";
+styleInject(css_248z$j);
+function ButtonGroup({ orientation = "horizontal", alignment = "start", ariaLabel, children, ...props }) {
+    return (jsxRuntime.jsx("div", { className: `bcds-ButtonGroup ${orientation} ${alignment}`, role: "group", "aria-label": ariaLabel, ...props, children: children }));
+}
+var css_248z$i = ".bcds-react-aria-AlertDialog {\n  display: flex;\n  flex-direction: column;\n}\n\n/* Variant icons */\n.bcds-react-aria-AlertDialog.info .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-primary);\n}\n.bcds-react-aria-AlertDialog.confirmation .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-success);\n}\n.bcds-react-aria-AlertDialog.warning .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-warning);\n}\n.bcds-react-aria-AlertDialog.error .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n.bcds-react-aria-AlertDialog.destructive .bcds-react-aria-AlertDialog--Icon {\n  color: var(--icons-color-danger);\n}\n\n.bcds-react-aria-AlertDialog--Header {\n  display: inline-flex;\n  flex-direction: row;\n  gap: var(--layout-padding-small);\n  justify-content: space-between;\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog--Title {\n  flex-grow: 1;\n  font: var(--typography-bold-h5);\n  color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--Icon {\n  justify-self: flex-start;\n  align-self: center;\n  padding-top: var(--layout-padding-xsmall);\n}\n\n.bcds-react-aria-AlertDialog--closeIcon {\n  justify-self: flex-end;\n  color: var(--icons-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--children {\n  font: var(--typography-regular-body);\n  color: var(--typography-color-primary);\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n  border-bottom: var(--layout-border-width-small) solid\n    var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog > .bcds-ButtonGroup {\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n";
+styleInject(css_248z$i);
 /* Sets correct left icon for selected variant */
 function getIcon$1(variant) {
@@ -15249,6 +15277,14 @@ function AlertDialog({ children, variant = "info", role = "dialog", title, isClo
     return (jsxRuntime.jsx($de32f1b87079253c$export$3ddf2d174ce01153, { className: `bcds-react-aria-AlertDialog ${variant}`, role: role, ...props, children: ({ close }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "bcds-react-aria-AlertDialog--Header", children: [!isIconHidden && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--Icon", children: getIcon$1(variant) })), title && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--Title", slot: "title", children: title })), isCloseable && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close", type: "button", onPress: close, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }), children && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--children", slot: "children", children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) })), buttons && (jsxRuntime.jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }));
 }
+var css_248z$h = ".bcds-Callout {\n  display: flex;\n  width: 100%;\n  padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n\n.bcds-Callout--Container {\n  display: flex;\n  flex-direction: column;\n  flex-grow: 1;\n  gap: var(--layout-margin-small);\n}\n\n.bcds-Callout--Container > .bcds-Callout--Title {\n  font: var(--typography-bold-large-body);\n  color: var(--typography-color-primary);\n}\n\n.bcds-Callout--Container > .bcds-Callout--Description {\n  font: var(--typography-regular-body);\n  color: var(--typography-color-secondary);\n}\n\n/* Theme - light grey (default) */\n.bcds-Callout.lightGrey {\n  background-color: var(--surface-color-background-light-gray);\n  border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\n  border-radius: var(--layout-border-radius-medium);\n}\n\n/* Theme - light blue */\n.bcds-Callout.lightBlue {\n  background-color: var(--theme-blue-10);\n  border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\n  border-radius: var(--layout-border-radius-medium);\n}\n\n/* Theme - light gold */\n.bcds-Callout.lightGold {\n  background-color: var(--theme-gold-10);\n  border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\n  border-radius: var(--layout-border-radius-medium);\n}\n\n/* Theme - blue  */\n.bcds-Callout.Blue {\n  background-color: var(--surface-color-background-dark-blue);\n  border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\n  border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Callout.Blue .bcds-Callout--Title {\n  color: var(--typography-color-primary-invert);\n}\n\n.bcds-Callout.Blue .bcds-Callout--Description {\n  color: var(--typography-color-secondary-invert);\n}\n\n/* Theme - grey */\n.bcds-Callout.Grey {\n  background-color: var(--theme-gray-80);\n  border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\n  border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Callout.Grey .bcds-Callout--Title {\n  color: var(--typography-color-primary-invert);\n}\n\n.bcds-Callout.Grey .bcds-Callout--Description {\n  color: var(--typography-color-secondary-invert);\n}\n\n/* Theme - black */\n.bcds-Callout.Black {\n  background-color: var(--theme-gray-100);\n  border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\n  border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Callout.Black .bcds-Callout--Title {\n  color: var(--typography-color-primary-invert);\n}\n\n.bcds-Callout.Black .bcds-Callout--Description {\n  color: var(--typography-color-secondary-invert);\n}\n\n/* Border disabled */\n.bcds-Callout.lightGrey.noBorder,\n.bcds-Callout.lightGold.noBorder,\n.bcds-Callout.lightBlue.noBorder,\n.bcds-Callout.Blue.noBorder,\n.bcds-Callout.Grey.noBorder,\n.bcds-Callout.Black.noBorder {\n  border-left: none;\n  border-radius: var(--layout-border-radius-none);\n}\n";
+styleInject(css_248z$h);
+function Callout({ variant = "lightGrey", title, description, buttons, role = "note", isLeftBorderDisabled = false, children, ...props }) {
+    return (jsxRuntime.jsx("div", { className: `bcds-Callout ${variant} ${isLeftBorderDisabled ? "noBorder" : ""}`, ...props, role: role, children: children ? (children) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "bcds-Callout--Container", "aria-labelledby": "callout-title", role: role, children: [title && (jsxRuntime.jsx("span", { className: "bcds-Callout--Title", id: "callout-title", children: title })), description && (jsxRuntime.jsx("span", { className: "bcds-Callout--Description", children: description })), buttons && (jsxRuntime.jsx(ButtonGroup, { alignment: "start", orientation: "horizontal", children: buttons }))] }) })) }));
+}
+/* The component implements the Check icon from Font Awesome: https://fontawesome.com/icons/check */
 function SvgCheckIcon({ id = "check-icon" }) {
     return (jsxRuntime.jsx("svg", { id: id, width: "10", height: "10", viewBox: "0 0 10 10", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M9.09447 1.16176C8.67766 0.834916 8.07489 0.907409 7.74747 1.32376L3.63547 6.55676L2.21847 4.85676C1.87495 4.46651 1.2832 4.42064 0.883639 4.75329C0.484082 5.08594 0.421942 5.6762 0.743468 6.08476L2.92047 8.69776C2.94047 8.72176 2.96947 8.72976 2.99047 8.75176C3.0133 8.78196 3.03802 8.81068 3.06447 8.83776C3.10707 8.86542 3.15189 8.8895 3.19847 8.90976C3.23068 8.92977 3.26407 8.9478 3.29847 8.96376C3.41159 9.01295 3.53316 9.03977 3.65647 9.04276H3.65747C3.78585 9.04006 3.91238 9.01149 4.02947 8.95876C4.06502 8.9413 4.09942 8.92159 4.13247 8.89976C4.18141 8.87729 4.22826 8.85052 4.27247 8.81976C4.29837 8.79134 4.32242 8.76128 4.34447 8.72976C4.36447 8.70976 4.39347 8.69976 4.41247 8.67576L9.25747 2.50976C9.58477 2.09253 9.51178 1.48896 9.09447 1.16176V1.16176Z", fill: "currentColor" }) }) }));
 }
@@ -15414,10 +15450,12 @@ function RadioGroup({ orientation = "vertical", label, description, children, er
     return (jsxRuntime.jsx($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { className: "bcds-react-aria-RadioGroup", ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-RadioGroup--label", children: [label, " ", isRequired && "(required)"] })), jsxRuntime.jsx("div", { className: `bcds-react-aria-RadioGroup--options ${orientation} flex-wrap-${flexWrap}`, children: children }), description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-RadioGroup--description", children: description })), isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-RadioGroup--error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
 }
+/* The component implements the Chevron Up icon from Font Awesome: https://fontawesome.com/icons/chevron-up */
 function SvgChevronUpIcon({ id = "chevron-up-icon" }) {
     return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M4.21231 13.3146L9.52695 8.2226C9.6939 8.08348 9.86086 8 10.0278 8C10.1948 8 10.3339 8.05565 10.473 8.16695L15.7876 13.259C16.066 13.5372 16.066 13.9546 15.8155 14.2051C15.5651 14.4833 15.1477 14.4833 14.8694 14.2329L10.0278 9.61387L5.13054 14.2885C4.88011 14.539 4.43491 14.539 4.18448 14.2607C3.93405 13.9825 3.93405 13.5651 4.21231 13.3146Z", fill: "currentColor" }) }));
 }
+/* The component implements the Chevron Down icon from Font Awesome: https://fontawesome.com/icons/chevron-down */
 function SvgChevronDownIcon({ id = "chevron-down-icon" }) {
     return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M15.7882 9.15569L10.4858 14.236C10.3192 14.3748 10.1527 14.4303 10.0139 14.4303C9.84731 14.4303 9.68074 14.3748 9.54194 14.2637L4.21182 9.15569C3.9342 8.90584 3.9342 8.46167 4.18405 8.21182C4.4339 7.9342 4.87808 7.9342 5.12793 8.18405L10.0139 12.8479L14.872 8.18405C15.1219 7.9342 15.5661 7.9342 15.8159 8.21182C16.0658 8.46167 16.0658 8.90584 15.7882 9.15569Z", fill: "currentColor" }) }));
 }
@@ -15445,15 +15483,24 @@ function Select({ items, sections, label, description, placeholder, size = "medi
                             : [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxRuntime.jsxs($7135fc7d473fd974$export$6e2c8f0811a474ce, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsxRuntime.jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsxRuntime.jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxRuntime.jsxs($eed445e0843c11d0$export$a11e76429ed99b4, { id: item?.id ? item.id : item.label, className: `bcds-react-aria-Select--ListBoxItem ${item?.isDestructive ? "destructive" : ""}`, textValue: item.label, children: [item?.iconLeft && (jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconLeft })), jsxRuntime.jsxs("div", { className: "bcds-react-aria-Select--ListBoxItem-Text-container", children: [jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", className: "bcds-react-aria-Select--ListBoxItem-Text-label", children: item.label }), item.description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-Select--ListBoxItem-Text-description", children: item.description }))] }), item?.iconRight && (jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconRight }))] })) })] })) }) })] })) }));
 }
+function SvgBcOutlineIcon({ id = "bc-outline-icon" }) {
+    return (jsxRuntime.jsx("svg", { id: id, xmlns: "http://www.w3.org/2000/svg", width: "18", height: "18", viewBox: "0 0 18 18", fill: "currentColor", children: jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M8.55494 17.9955C8.48489 17.9953 8.4157 17.9801 8.35199 17.951C8.28827 17.9219 8.23149 17.8795 8.18543 17.8268L7.40648 16.9832L6.22541 16.0636L5.199 15.4961C5.11007 15.4438 5.03665 15.3688 4.98625 15.2788C4.93585 15.1887 4.91028 15.0869 4.91217 14.9838V13.6103C4.90822 13.4748 4.9534 13.3423 5.03939 13.2374C5.12538 13.1325 5.24638 13.0622 5.3801 13.0395L5.90315 12.9832C5.85315 12.9105 5.81957 12.8278 5.80473 12.7408L5.47065 10.7162L4.85199 9.65994C4.77992 9.54214 4.75071 9.40308 4.76932 9.26624L5.06009 7.19318L4.03761 6.7708C3.97024 6.74182 3.90941 6.69953 3.85878 6.64647C3.80814 6.59342 3.76873 6.53069 3.74291 6.46204L2.8481 4.13645L2.06072 4.06615C1.97763 4.05479 1.89849 4.02362 1.82998 3.97527C1.76146 3.92691 1.70557 3.86279 1.66703 3.78831L0.0922668 0.863752C0.0326295 0.767506 0.000706201 0.65667 1.15824e-05 0.543447C-0.000683036 0.430224 0.0298779 0.319005 0.0883299 0.222035C0.14711 0.132622 0.233402 0.0647766 0.33416 0.0287553C0.434919 -0.00726609 0.544665 -0.00950484 0.646809 0.0223775C0.717673 0.042062 7.83223 2.31085 11.7298 1.5634C11.7994 1.5514 11.8709 1.55502 11.9389 1.57398C12.007 1.59295 12.0701 1.62679 12.1235 1.67307C12.2388 1.77389 12.3119 1.91446 12.3282 2.06676L13.0245 9.77692L13.6994 10.2111C13.7984 10.2792 13.8741 10.3762 13.9159 10.4889L14.1836 11.2324L15.3647 11.7251C15.4523 11.7653 15.5285 11.8268 15.5862 11.904C15.6439 11.9812 15.6812 12.0717 15.6948 12.1672L15.8326 13.0749L16.5131 13.5249C16.5697 13.5613 16.6179 13.6092 16.6549 13.6655L17.8922 15.4179C17.9503 15.5022 17.9865 15.5996 17.9975 15.7013C18.0085 15.803 17.9939 15.9059 17.9552 16.0006C17.9216 16.0925 17.8628 16.1731 17.7857 16.2333C17.7085 16.2934 17.616 16.3307 17.5187 16.3409L10.2529 16.9123C10.2067 17.0062 10.136 17.0859 10.0482 17.1429L8.81084 17.9252C8.73397 17.9725 8.64519 17.9969 8.55494 17.9955ZM5.97851 14.6356L6.76589 15.0619C6.79052 15.0739 6.81311 15.0896 6.83282 15.1086L8.07014 16.0827L8.13706 16.139L8.65224 16.7098L9.43962 16.2211L9.11342 15.5642L8.32604 14.8893L7.08872 14.0367L5.96389 14.1581L5.97851 14.6356ZM7.22539 12.8595C7.32381 12.8587 7.42002 12.8888 7.50041 12.9456L8.91601 13.9197L8.96719 13.959L9.85187 14.7414C9.91189 14.7939 9.95904 14.8595 9.98966 14.9331L10.3834 15.7588L16.4957 15.2768L15.9136 14.4551L15.1262 13.923C15.0604 13.8776 15.0044 13.8193 14.9618 13.7517C14.9191 13.684 14.8907 13.6084 14.8782 13.5294L14.7522 12.6857L13.6156 12.2161C13.5437 12.1851 13.4791 12.1395 13.4256 12.0823C13.3722 12.0251 13.3312 11.9575 13.3051 11.8837L13.0183 11.1014L12.2826 10.6166C12.2115 10.567 12.1521 10.5025 12.1085 10.4274C12.065 10.3524 12.0384 10.2688 12.0307 10.1824L11.3631 2.78271C8.21693 3.17641 3.76484 2.09432 1.6136 1.48916L2.40098 2.94413L3.24461 3.01837C3.34242 3.03086 3.43481 3.07037 3.5114 3.13246C3.588 3.19455 3.64577 3.27677 3.67823 3.36988L4.61015 5.78826L5.83341 6.27307C5.94925 6.32592 6.04441 6.41555 6.10411 6.52802C6.1638 6.6405 6.1847 6.76953 6.16355 6.8951L5.83341 9.20719L6.42844 10.192C6.46921 10.2576 6.49601 10.3309 6.50718 10.4074L6.86094 12.5513C6.8826 12.6703 6.8675 12.7932 6.81764 12.9034L7.18321 12.8601L7.22539 12.8595Z", fill: "currentColor" }), jsxRuntime.jsx("path", { d: "M4.04436 12.2499C3.95082 12.2486 3.8594 12.2218 3.78006 12.1722C3.70073 12.1226 3.63652 12.0522 3.59443 11.9687L2.23676 9.43722C2.19774 9.36465 2.17379 9.28495 2.16634 9.20289C2.1589 9.12084 2.16812 9.03813 2.19345 8.95973C2.21557 8.8832 2.2541 8.81242 2.30636 8.7523C2.35861 8.69218 2.42334 8.64416 2.49603 8.61159L3.4004 8.2179C3.46575 8.19146 3.53591 8.17896 3.60637 8.1812C3.67684 8.18345 3.74606 8.20039 3.80959 8.23094C3.87313 8.26149 3.92959 8.30498 3.97534 8.35862C4.02109 8.41225 4.05514 8.47486 4.0753 8.54241C4.12772 8.68078 4.12656 8.83374 4.07204 8.97129C4.01752 9.10884 3.91357 9.22106 3.78059 9.28593L3.44314 9.43047L4.48923 11.3866C4.56015 11.5165 4.58089 11.6679 4.54751 11.8122C4.51412 11.9564 4.42894 12.0833 4.30814 12.1689C4.23031 12.2217 4.13841 12.2499 4.04436 12.2499Z", fill: "currentColor" })] }) }));
+}
+/* The component implements the Flask icon from Font Awesome: https://fontawesome.com/icons/flask */
+function SvgBetaIcon({ id = "beta-icon" }) {
+    return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 448 512", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M288 0L160 0 128 0C110.3 0 96 14.3 96 32s14.3 32 32 32l0 132.8c0 11.8-3.3 23.5-9.5 33.5L10.3 406.2C3.6 417.2 0 429.7 0 442.6C0 480.9 31.1 512 69.4 512l309.2 0c38.3 0 69.4-31.1 69.4-69.4c0-12.8-3.6-25.4-10.3-36.4L329.5 230.4c-6.2-10.1-9.5-21.7-9.5-33.5L320 64c17.7 0 32-14.3 32-32s-14.3-32-32-32L288 0zM192 196.8L192 64l64 0 0 132.8c0 23.7 6.6 46.9 19 67.1L309.5 320l-171 0L173 263.9c12.4-20.2 19-43.4 19-67.1z", fill: "currentColor" }) }) }));
+}
 function SvgTooltipArrowUp({ id = "tooltip-arrow" }) {
     return (jsxRuntime.jsx("svg", { id: id, width: "19", height: "9", viewBox: "0 0 19 9", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M8.4188 1.41421C9.19985 0.633163 10.4662 0.633165 11.2472 1.41421L18.833 9L0.833008 9L8.4188 1.41421Z", fill: "currentColor" }) }) }));
 }
-var css_248z$6 = ".bcds-react-aria-Tag {\n  color: var(--typography-color-primary);\n  cursor: pointer;\n  border-radius: var(--layout-margin-hair);\n  border: var(--layout-border-width-small) solid;\n  display: flex;\n  align-items: center;\n  gap: var(--layout-margin-small);\n  font: var(--typography-regular-label);\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n  width: fit-content;\n}\n.bcds-react-aria-Tag .react-aria-Button {\n  background: none;\n  border: none;\n  color: var(--typography-color-primary);\n  cursor: pointer;\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n/* Tag colors */\n.bcds-react-aria-Tag.bc-blue {\n  background-color: var(--theme-primary-blue);\n  border-color: var(--theme-blue-90);\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-blue .react-aria-Button {\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-gold {\n  background-color: var(--theme-primary-gold);\n  border-color: var(--theme-blue-90);\n}\n.bcds-react-aria-Tag.blue {\n  background-color: var(--support-surface-color-info);\n  border-color: var(--support-border-color-info);\n}\n.bcds-react-aria-Tag.dark {\n  background: var(--theme-gray-110);\n  border-color: var(--theme-blue-90);\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.dark .react-aria-Button {\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.gray,\n.bcds-react-aria-Tag.grey {\n  background-color: var(--theme-gray-20);\n  border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Tag.green {\n  background-color: var(--support-surface-color-success);\n  border-color: var(--support-border-color-success);\n}\n.bcds-react-aria-Tag.red {\n  background-color: var(--support-surface-color-danger);\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Tag.yellow {\n  background-color: var(--support-surface-color-warning);\n  border-color: var(--support-border-color-warning);\n}\n\n/* Selected */\n.bcds-react-aria-Tag[data-selected] {\n  border-radius: var(--layout-border-radius-small);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-active);\n}\n\n/* Focused */\n.bcds-react-aria-Tag[data-focused] {\n  outline: var(--layout-border-width-medium) solid\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Tag[data-disabled] {\n  background-color: var(--surface-color-primary-button-disabled);\n  border-color: var(--surface-color-border-default);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n";
+var css_248z$6 = ".bcds-react-aria-Tag {\n  color: var(--typography-color-primary);\n  cursor: pointer;\n  border: var(--layout-border-width-small) solid;\n  display: flex;\n  align-items: center;\n  font: var(--typography-regular-label);\n  width: fit-content;\n}\n.bcds-react-aria-Tag .react-aria-Button {\n  background: none;\n  border: none;\n  color: var(--typography-color-primary);\n  cursor: pointer;\n  display: flex;\n  margin: 0;\n  padding: 0;\n}\n\n/* Tag colors */\n.bcds-react-aria-Tag.bc-blue {\n  background-color: var(--theme-primary-blue);\n  border-color: var(--theme-blue-90);\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-blue .react-aria-Button {\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-gold {\n  background-color: var(--theme-primary-gold);\n  border-color: var(--theme-blue-90);\n}\n.bcds-react-aria-Tag.blue {\n  background-color: var(--support-surface-color-info);\n  border-color: var(--support-border-color-info);\n}\n.bcds-react-aria-Tag.dark {\n  background: var(--theme-gray-110);\n  border-color: var(--theme-blue-90);\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.dark .react-aria-Button {\n  color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.gray,\n.bcds-react-aria-Tag.grey {\n  background-color: var(--theme-gray-20);\n  border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Tag.green {\n  background-color: var(--support-surface-color-success);\n  border-color: var(--support-border-color-success);\n}\n.bcds-react-aria-Tag.red {\n  background-color: var(--support-surface-color-danger);\n  border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Tag.yellow {\n  background-color: var(--support-surface-color-warning);\n  border-color: var(--support-border-color-warning);\n}\n\n/* Tag style */\n.bcds-react-aria-Tag.rectangular {\n  border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Tag.circular {\n  border-radius: var(--layout-borderRadius-Circular, 9999px);\n}\n\n/* Tag size */\n.bcds-react-aria-Tag.medium {\n  height: var(--layout-padding-xlarge);\n  padding: var(--layout-padding-hair) var(--layout-padding-medium);\n  gap: var(--layout-margin-medium);\n}\n.bcds-react-aria-Tag.small {\n  height: var(--layout-padding-large);\n  padding: var(--layout-padding-hair) var(--layout-padding-small);\n  gap: var(--layout-margin-small);\n}\n\n/* Selected */\n.bcds-react-aria-Tag[data-selected] {\n  border-radius: var(--layout-border-radius-small);\n  border: var(--layout-border-width-medium) solid\n    var(--surface-color-border-active);\n}\n\n/* Focused */\n.bcds-react-aria-Tag[data-focused] {\n  outline: var(--layout-border-width-medium) solid\n    var(--surface-color-border-active);\n  outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Tag[data-disabled] {\n  background-color: var(--surface-color-primary-button-disabled);\n  border-color: var(--surface-color-border-default);\n  color: var(--typography-color-disabled);\n  cursor: not-allowed;\n}\n";
 styleInject(css_248z$6);
-function Tag({ color = "blue", icon, id, textValue }) {
-    return (jsxRuntime.jsx($eaf9e70818b436db$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, textValue, !isDisabled && allowsRemoving && (jsxRuntime.jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { "aria-label": `Remove ${textValue}`, slot: "remove", children: jsxRuntime.jsx("svg", { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { id: "Icons / Close", children: jsxRuntime.jsx("path", { id: "Vector", d: "M12.6004 3.03239L11.4684 1.90039L7.00039 6.36839L2.53239 1.90039L1.40039 3.03239L5.86839 7.50039L1.40039 11.9684L2.53239 13.1004L7.00039 8.63239L11.4684 13.1004L12.6004 11.9684L8.13239 7.50039L12.6004 3.03239Z", fill: "currentColor" }) }) }) }))] })) }));
+function Tag({ color = "blue", tagStyle = "rectangular", size = "small", icon, id, textValue, }) {
+    return (jsxRuntime.jsx($eaf9e70818b436db$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color} ${tagStyle} ${size}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, textValue, !isDisabled && allowsRemoving && (jsxRuntime.jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { "aria-label": `Remove ${textValue}`, slot: "remove", children: jsxRuntime.jsx("svg", { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { id: "Icons / Close", children: jsxRuntime.jsx("path", { id: "Vector", d: "M12.6004 3.03239L11.4684 1.90039L7.00039 6.36839L2.53239 1.90039L1.40039 3.03239L5.86839 7.50039L1.40039 11.9684L2.53239 13.1004L7.00039 8.63239L11.4684 13.1004L12.6004 11.9684L8.13239 7.50039L12.6004 3.03239Z", fill: "currentColor" }) }) }) }))] })) }));
 }
 var css_248z$5 = ".bcds-react-aria-TagGroup {\n  color: var(--typography-color-primary);\n  font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-TagGroup--Label,\n.bcds-react-aria-TagGroup--Text-description,\n.bcds-react-aria-TagGroup--Text-error {\n  display: block;\n  padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TagGroup--Text-error {\n  display: flex;\n  color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TagGroup--Text-error > svg {\n  padding-right: var(--layout-padding-xsmall);\n  color: var(--icons-color-danger);\n  min-width: var(--icons-size-medium);\n  height: var(--icons-size-medium);\n}\n";
@@ -15505,9 +15552,11 @@ function Tooltip(props) {
     return (jsxRuntime.jsxs($4e3b923658d69c60$export$28c660c63b792dea, { className: "bcds-react-aria-Tooltip", ...props, children: [jsxRuntime.jsx($44f671af83e7d9e0$export$746d02f47f4d381, { className: "bcds-react-aria-OverlayArrow", children: jsxRuntime.jsx(SvgTooltipArrowUp, {}) }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children })] }));
 }
+exports.AlertBanner = AlertBanner;
 exports.AlertDialog = AlertDialog;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
+exports.Callout = Callout;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.Dialog = Dialog;
@@ -15522,6 +15571,8 @@ exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.Select = Select;
 exports.SvgBcLogo = SvgBcLogo;
+exports.SvgBcOutlineIcon = SvgBcOutlineIcon;
+exports.SvgBetaIcon = SvgBetaIcon;
 exports.SvgCheckCircleIcon = SvgCheckCircleIcon;
 exports.SvgCheckIcon = SvgCheckIcon;
 exports.SvgChevronDownIcon = SvgChevronDownIcon;