@bcgov/design-system-react-components 0.7.0-pr750 → 0.8.0-pr756
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.
- package/README.md +37 -34
- package/dist/cjs/index.cjs +67 -46
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/index.js +67 -47
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +8 -2
- package/package.json +2 -2
package/dist/cjs/index.cjs
CHANGED
|
@@ -31,8 +31,8 @@ function styleInject(css, ref) {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
var css_248z$D = "/**\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 --layout-border-radius-circular: 9999px; /** Used for components with a circular radius */\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-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";
|
|
35
|
-
styleInject(css_248z$
|
|
34
|
+
var css_248z$E = "/**\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: rgba(255, 255, 255, 0); /** 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 --layout-border-radius-circular: 9999px; /** Used for components with a circular radius */\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: normal; /** 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-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 '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 'BC Sans'; /** Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: italic 400 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (italic) */\n --typography-italic-small-body: italic 400 0.875rem/1.313rem 'BC Sans'; /** Small body text (italic) */\n --typography-italic-body: italic 400 1rem/1.688rem 'BC Sans'; /** Default for body text (italic) */\n --typography-italic-large-body: italic 400 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (italic) */\n --typography-italic-h6: italic 400 1.125rem/1.913rem 'BC Sans'; /** Alternate (italic) style for Heading 6 */\n --typography-italic-h5: italic 400 1.25rem/2.125rem 'BC Sans'; /** Alternate (italic) style for Heading 5 */\n --typography-italic-h4: italic 400 1.5rem/2.25rem 'BC Sans'; /** Alternate (italic) style for Heading 4 */\n --typography-italic-h3: italic 400 1.75rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 3 */\n --typography-italic-h2: italic 400 2rem/3rem 'BC Sans'; /** Alternate (italic) style for Heading 2 */\n --typography-italic-h1: italic 400 2.25rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 1 */\n --typography-italic-display: italic 400 3rem '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";
|
|
35
|
+
styleInject(css_248z$E);
|
|
36
36
|
|
|
37
37
|
/*
|
|
38
38
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -30218,11 +30218,11 @@ function $05a50f7d78b03ad9$var$TooltipInner(props) {
|
|
|
30218
30218
|
}, renderProps.children));
|
|
30219
30219
|
}
|
|
30220
30220
|
|
|
30221
|
-
var css_248z$
|
|
30222
|
-
styleInject(css_248z$
|
|
30221
|
+
var css_248z$D = ".bcds-react-aria-Disclosure {\n display: flex;\n flex-direction: column;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n overflow: hidden;\n}\n\n.bcds-react-aria-Disclosure--Button {\n display: inline-flex;\n flex-direction: row;\n padding: var(--layout-padding-small) var(--layout-padding-medium);\n gap: var(--layout-margin-small);\n justify-content: space-between;\n align-items: center;\n background-color: var(--surface-color-background-light-gray);\n border: none;\n cursor: pointer;\n font: var(--typography-bold-body);\n color: var(--typography-color-primary);\n}\n\n/* Hover */\n.bcds-react-aria-Disclosure--Button[data-hovered] {\n background-color: var(--surface-color-menus-hover);\n}\n\n/* Accordion content */\n.bcds-react-aria-Disclosure[data-expanded]\n > .bcds-react-aria-Disclosure--Panel {\n display: flex;\n align-items: flex-start;\n padding: var(--layout-padding-medium);\n gap: var(--layout-margin-small);\n background-color: var(--surface-color-forms-default);\n font: var(--typography-regular-body);\n}\n\n/* Focus state */\n.bcds-react-aria-Disclosure[data-focus-visible-within] {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Override default focus behaviour for button */\n.bcds-react-aria-Disclosure[data-focus-visible-within]\n > .bcds-react-aria-Disclosure--Button {\n outline: none;\n}\n\n.bcds-react-aria-Disclosure--Button[data-focused] {\n outline: none;\n}\n\n/* Disabled state */\n.bcds-react-aria-Disclosure[data-disabled]\n > .bcds-react-aria-Disclosure--Button {\n background-color: var(--surface-color-forms-disabled);\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
30222
|
+
styleInject(css_248z$D);
|
|
30223
30223
|
|
|
30224
|
-
var css_248z$
|
|
30225
|
-
styleInject(css_248z$
|
|
30224
|
+
var css_248z$C = ".bcds-react-aria-Button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--layout-padding-small);\n min-height: 24px;\n min-width: 24px;\n border: none;\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n font: var(--typography-regular-body);\n}\n.bcds-react-aria-Button[data-disabled] {\n cursor: not-allowed;\n}\n.bcds-react-aria-Button[data-focus-visible] {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Sizes */\n.bcds-react-aria-Button.xsmall {\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n font: var(--typography-regular-label);\n}\n.bcds-react-aria-Button.xsmall.icon {\n padding: unset;\n height: 24px;\n width: 24px;\n}\n.bcds-react-aria-Button.small {\n min-height: 32px;\n padding: var(--layout-padding-none) 0.75rem\n /* to be replaced with new token later */;\n font: var(--typography-regular-small-body);\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 padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n.bcds-react-aria-Button.medium.icon {\n padding: unset;\n height: 40px;\n width: 40px;\n min-width: 40px;\n}\n.bcds-react-aria-Button.large, /* this doesn't work on its own */\n.bcds-react-aria-Button.large.primary, \n.bcds-react-aria-Button.large.secondary, \n.bcds-react-aria-Button.large.tertiary, \n.bcds-react-aria-Button.large.link {\n min-height: 48px;\n padding: var(--layout-padding-none) var(--layout-padding-large);\n}\n.bcds-react-aria-Button.large.icon {\n padding: unset;\n height: 48px;\n width: 48px;\n min-width: 48px;\n}\n\n/* Variant - Primary */\n.bcds-react-aria-Button.primary {\n background: var(--surface-color-primary-button-default);\n color: var(--typography-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.bcds-react-aria-Button.primary.danger[data-pressed],\n.bcds-react-aria-Button.primary.danger[data-hovered][data-pressed] {\n background-color: var(--support-surface-color-danger);\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.primary[data-pressed],\n.bcds-react-aria-Button.primary[data-hovered][data-pressed] {\n background-color: var(--surface-color-primary-pressed);\n}\n\n/* Variant - Secondary */\n.bcds-react-aria-Button.secondary {\n background-color: var(--surface-color-secondary-button-default);\n border: var(--layout-border-width-small) solid\n 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.bcds-react-aria-Button.secondary.danger[data-pressed],\n.bcds-react-aria-Button.secondary.danger[data-hovered][data-pressed] {\n background-color: var(--surface-color-primary-danger-button-default);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Button.secondary[data-pressed],\n.bcds-react-aria-Button.secondary[data-hovered][data-pressed] {\n background-color: var(--surface-color-secondary-pressed);\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.bcds-react-aria-Button.tertiary[data-pressed],\n.bcds-react-aria-Button.tertiary[data-hovered][data-pressed] {\n background-color: var(--surface-color-tertiary-pressed);\n}\n.bcds-react-aria-Button.tertiary.danger[data-pressed],\n.bcds-react-aria-Button.tertiary.danger[data-hovered][data-pressed] {\n background-color: var(--surface-color-tertiary-pressed);\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";
|
|
30225
|
+
styleInject(css_248z$C);
|
|
30226
30226
|
|
|
30227
30227
|
function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
|
|
30228
30228
|
return (jsxRuntime.jsx($7705c033048f6da7$export$353f5b6fc5456de1, { className: `bcds-react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
|
|
@@ -30242,8 +30242,8 @@ function Accordion({ label, children, ...props }) {
|
|
|
30242
30242
|
return (jsxRuntime.jsx($a3e16eab0ea4036c$export$74a362b31437ec83, { className: `bcds-react-aria-Disclosure`, ...props, children: ({ isExpanded }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Button, { className: "bcds-react-aria-Disclosure--Button", size: "small", variant: "link", slot: "trigger", children: [label, isExpanded ? jsxRuntime.jsx(SvgChevronUpIcon, {}) : jsxRuntime.jsx(SvgChevronDownIcon, {})] }), jsxRuntime.jsx($a3e16eab0ea4036c$export$feabaa331e1d464c, { className: "bcds-react-aria-Disclosure--Panel", children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) })] })) }));
|
|
30243
30243
|
}
|
|
30244
30244
|
|
|
30245
|
-
var css_248z$
|
|
30246
|
-
styleInject(css_248z$
|
|
30245
|
+
var css_248z$B = ".bcds-react-aria-DisclosureGroup {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--layout-border-width-small);\n background-color: var(--surface-color-border-default);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n overflow: hidden;\n}\n\n/* Override individual accordion item borders */\n.bcds-react-aria-DisclosureGroup > .bcds-react-aria-Disclosure {\n border: none;\n border-radius: var(--layout-border-radius-none);\n}\n\n/* Focus state */\n.bcds-react-aria-DisclosureGroup\n > .bcds-react-aria-Disclosure[data-focus-visible-within] {\n border-radius: var(--layout-border-radius-hair);\n outline-offset: calc(var(--layout-margin-hair) * -1);\n}\n\n/* Title styles */\n.bcds-react-aria-DisclosureGroup--Title {\n color: var(--typography-color-primary);\n margin: var(--layout-margin-medium) var(--layout-margin-none);\n}\n\n.bcds-react-aria-DisclosureGroup--Title > h1 {\n font: var(--typography-bold-h1);\n margin-block-start: 0;\n margin-block-end: 0;\n}\n\n.bcds-react-aria-DisclosureGroup--Title > h2 {\n font: var(--typography-bold-h2);\n margin-block-start: 0;\n margin-block-end: 0;\n}\n\n.bcds-react-aria-DisclosureGroup--Title > h3 {\n font: var(--typography-bold-h3);\n margin-block-start: 0;\n margin-block-end: 0;\n}\n\n.bcds-react-aria-DisclosureGroup--Title > h4 {\n font: var(--typography-bold-h4);\n margin-block-start: 0;\n margin-block-end: 0;\n}\n\n.bcds-react-aria-DisclosureGroup--Title > h5 {\n font: var(--typography-bold-h5);\n margin-block-start: 0;\n margin-block-end: 0;\n}\n\n.bcds-react-aria-DisclosureGroup--Title > h6 {\n font: var(--typography-bold-h6);\n margin-block-start: 0;\n margin-block-end: 0;\n}\n\n.bcds-react-aria-DisclosureGroup--Title > span {\n font: var(--typography-bold-large-body);\n}\n";
|
|
30246
|
+
styleInject(css_248z$B);
|
|
30247
30247
|
|
|
30248
30248
|
function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
30249
30249
|
function getTitle() {
|
|
@@ -30267,8 +30267,8 @@ function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
|
30267
30267
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && (jsxRuntime.jsx("div", { className: "bcds-react-aria-DisclosureGroup--Title", children: getTitle() })), jsxRuntime.jsx($a3e16eab0ea4036c$export$944aceb4f8c89f10, { className: "bcds-react-aria-DisclosureGroup", ...props, children: children })] }));
|
|
30268
30268
|
}
|
|
30269
30269
|
|
|
30270
|
-
var css_248z$
|
|
30271
|
-
styleInject(css_248z$
|
|
30270
|
+
var css_248z$A = ".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}\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}\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 color: var(--typography-color-primary-invert);\n}\n\n/* Layout */\n.bcds-Alert-Banner.fixed {\n padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n.bcds-Alert-Banner.fixed > .bcds-Alert-Banner--Container {\n max-width: 1100px;\n}\n.bcds-Alert-Banner.fluid {\n padding: var(--layout-padding-none) var(--layout-padding-large);\n}\n\n/* Sizing */\n.bcds-Alert-Banner.small > .bcds-Alert-Banner--Container {\n padding: var(--layout-padding-hair) var(--layout-padding-none);\n}\n.bcds-Alert-Banner.small .bcds-Alert-Banner--Content {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-Alert-Banner.medium > .bcds-Alert-Banner--Container {\n padding: var(--layout-padding-small) var(--layout-padding-none);\n}\n.bcds-Alert-Banner.medium .bcds-Alert-Banner--Content {\n font: var(--typography-regular-body);\n}\n\n/* Close icon */\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";
|
|
30271
|
+
styleInject(css_248z$A);
|
|
30272
30272
|
|
|
30273
30273
|
/* This component implements the Circle Check icon from Font Awesome: https://fontawesome.com/icons/circle-check */
|
|
30274
30274
|
function SvgCheckCircleIcon({ id = "check-icon" }) {
|
|
@@ -30316,15 +30316,15 @@ function AlertBanner({ variant = "info", size = "medium", layout = "fixed", isIc
|
|
|
30316
30316
|
return (jsxRuntime.jsx("div", { className: `bcds-Alert-Banner ${variant} ${size} ${layout}`, ...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, {}) }) }))] }) }));
|
|
30317
30317
|
}
|
|
30318
30318
|
|
|
30319
|
-
var css_248z$
|
|
30320
|
-
styleInject(css_248z$
|
|
30319
|
+
var css_248z$z = ".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";
|
|
30320
|
+
styleInject(css_248z$z);
|
|
30321
30321
|
|
|
30322
30322
|
function ButtonGroup({ orientation = "horizontal", alignment = "start", ariaLabel, children, ...props }) {
|
|
30323
30323
|
return (jsxRuntime.jsx("div", { className: `bcds-ButtonGroup ${orientation} ${alignment}`, role: "group", "aria-label": ariaLabel, ...props, children: children }));
|
|
30324
30324
|
}
|
|
30325
30325
|
|
|
30326
|
-
var css_248z$
|
|
30327
|
-
styleInject(css_248z$
|
|
30326
|
+
var css_248z$y = ".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";
|
|
30327
|
+
styleInject(css_248z$y);
|
|
30328
30328
|
|
|
30329
30329
|
/* Sets correct left icon for selected variant */
|
|
30330
30330
|
function getIcon$1(variant) {
|
|
@@ -31464,11 +31464,11 @@ class $40cf8faa4dad0740$var$DisplayNamesPolyfill {
|
|
|
31464
31464
|
}
|
|
31465
31465
|
}
|
|
31466
31466
|
|
|
31467
|
-
var css_248z$
|
|
31468
|
-
styleInject(css_248z$
|
|
31467
|
+
var css_248z$x = ".bcds-react-aria-Calendar {\n display: inline-flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--layout-margin-large);\n padding: var(--layout-padding-medium);\n box-sizing: border-box;\n justify-content: center;\n background-color: var(--surface-color-forms-default);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Calendar--GridContainer {\n display: inline-flex;\n flex: 0 1 0;\n flex-direction: column;\n gap: var(--layout-margin-small);\n box-sizing: border-box;\n}\n.bcds-react-aria-Calendar--Header {\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n.bcds-react-aria-Calendar--HeaderButton {\n width: var(--icons-size-large);\n height: var(--icons-size-large);\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n.bcds-react-aria-Calendar--Header > h2.bcds-react-aria-Heading {\n flex: 1;\n text-align: center;\n font: var(--typography-bold-small-body);\n margin: var(--layout-margin-none);\n}\n.bcds-react-aria-Calendar--Header > button > svg {\n min-width: var(--icons-size-small);\n height: var(--icons-size-small);\n}\n.bcds-react-aria-Calendar--Grid {\n text-align: center;\n border-spacing: var(--layout-margin-xsmall);\n}\n.bcds-react-aria-Calendar--Cell {\n cursor: pointer;\n box-sizing: border-box;\n width: var(--icons-size-xlarge);\n height: var(--icons-size-xlarge);\n padding: var(--layout-padding-xsmall);\n border: solid var(--layout-border-width-small) transparent;\n}\n/* Hide days outside current month or visible range */\n.bcds-react-aria-Calendar--Cell[data-outside-visible-range],\n.bcds-react-aria-Calendar--Cell[data-outside-month] {\n visibility: hidden;\n}\n\n/* Calendar item states */\n.bcds-react-aria-Calendar--Cell[data-hovered] {\n background-color: var(--surface-color-secondary-button-hover);\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected] {\n background-color: var(--surface-color-primary-button-default);\n color: var(--typography-color-primary-invert);\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected][data-focused],\n.bcds-react-aria-Calendar--Cell[data-selected][data-focus-visible] {\n background-color: var(--surface-color-primary-button-default);\n color: var(--typography-color-primary-invert);\n outline: solid var(--layout-border-width-small)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected][data-hovered] {\n background-color: var(--surface-color-primary-button-hover);\n}\n.bcds-react-aria-Calendar--Cell[data-focused] {\n outline: none;\n}\n.bcds-react-aria-Calendar--Cell[data-focus-visible] {\n background-color: var(--surface-color-secondary-button-hover);\n border: solid var(--layout-border-width-small)\n var(--surface-color-border-active);\n border-radius: var(--layout-border-radius-small);\n outline: none;\n}\n.bcds-react-aria-Calendar--Cell[data-today] {\n font: var(--typography-bold-small-body);\n}\n.bcds-react-aria-Calendar--Cell[data-disabled],\n.bcds-react-aria-Calendar--Cell[data-unavailable][data-disabled] {\n color: var(--typography-color-disabled);\n text-decoration: none;\n cursor: not-allowed;\n}\n.bcds-react-aria-Calendar--Cell[data-unavailable] {\n color: var(--typography-color-danger);\n text-decoration: line-through;\n cursor: not-allowed;\n}\n";
|
|
31468
|
+
styleInject(css_248z$x);
|
|
31469
31469
|
|
|
31470
|
-
var css_248z$
|
|
31471
|
-
styleInject(css_248z$
|
|
31470
|
+
var css_248z$w = "/* Headings */\nh1.bcds-react-aria-Heading {\n font: var(--typography-bold-h1);\n}\n\nh2.bcds-react-aria-Heading {\n font: var(--typography-bold-h2);\n}\n\nh3.bcds-react-aria-Heading {\n font: var(--typography-bold-h3);\n}\n\nh4.bcds-react-aria-Heading {\n font: var(--typography-bold-h4);\n}\n\nh5.bcds-react-aria-Heading {\n font: var(--typography-bold-h5);\n}\n\nh6.bcds-react-aria-Heading {\n font: var(--typography-bold-h6);\n}\n\n/* Text colour */\n.bcds-react-aria-Heading.primary {\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Heading.primaryInvert {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Heading.secondary {\n color: var(--typography-color-secondary);\n}\n.bcds-react-aria-Heading.secondaryInvert {\n color: var(--typography-color-secondary-invert);\n}\n.bcds-react-aria-Heading.disabled {\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Heading.danger {\n color: var(--typography-color-danger);\n}\n";
|
|
31471
|
+
styleInject(css_248z$w);
|
|
31472
31472
|
|
|
31473
31473
|
function Heading({ color = "primary", isUnstyled = false, ...props }) {
|
|
31474
31474
|
return (jsxRuntime.jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, { className: isUnstyled ? undefined : `bcds-react-aria-Heading ${color}`, ...props }));
|
|
@@ -31494,8 +31494,8 @@ function Calendar({ visibleDuration = { months: 1 }, ...props }) {
|
|
|
31494
31494
|
.toDate(state.timeZone)) }), jsxRuntime.jsx("div", { className: "bcds-react-aria-Calendar--HeaderButton", children: i === (visibleDuration.months ?? 1) - 1 && (jsxRuntime.jsx(Button, { slot: "next", size: "xsmall", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgChevronRightIcon, {}) })) })] }), jsxRuntime.jsx($6f9a1820b787aac7$export$5bd780d491cfc46c, { offset: { months: i }, className: `bcds-react-aria-Calendar--Grid`, weekdayStyle: "short", children: (date) => (jsxRuntime.jsx($6f9a1820b787aac7$export$5d847498420df57b, { className: "bcds-react-aria-Calendar--Cell", date: date })) })] }, i))) }));
|
|
31495
31495
|
}
|
|
31496
31496
|
|
|
31497
|
-
var css_248z$
|
|
31498
|
-
styleInject(css_248z$
|
|
31497
|
+
var css_248z$v = ".bcds-Callout {\n display: flex;\n width: 100%;\n box-sizing: border-box;\n padding: var(--layout-padding-medium) var(--layout-padding-large);\n border-radius: var(--layout-border-radius-medium)\n var(--layout-border-radius-none) var(--layout-border-radius-none)\n var(--layout-border-radius-medium);\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}\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}\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}\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}\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}\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}\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";
|
|
31498
|
+
styleInject(css_248z$v);
|
|
31499
31499
|
|
|
31500
31500
|
function Callout({ variant = "lightGrey", title, description, buttons, role = "note", isLeftBorderDisabled = false, children, ...props }) {
|
|
31501
31501
|
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 }))] }) })) }));
|
|
@@ -31510,15 +31510,15 @@ function SvgDashIcon$1({ id = "dash-icon" }) {
|
|
|
31510
31510
|
return (jsxRuntime.jsx("svg", { id: id, width: "8", height: "10", viewBox: "0 0 8 2", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M6.99005 1.96004H1.01005C0.479855 1.96004 0.0500488 1.53023 0.0500488 1.00004C0.0500488 0.469846 0.479855 0.0400391 1.01005 0.0400391H6.99005C7.52024 0.0400391 7.95005 0.469846 7.95005 1.00004C7.95005 1.53023 7.52024 1.96004 6.99005 1.96004H6.99005Z", fill: "currentColor" }) }));
|
|
31511
31511
|
}
|
|
31512
31512
|
|
|
31513
|
-
var css_248z$
|
|
31514
|
-
styleInject(css_248z$
|
|
31513
|
+
var css_248z$u = ".bcds-react-aria-Checkbox {\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n}\n\n/* Checkbox */\n.bcds-react-aria-Checkbox > .checkbox {\n align-self: first baseline;\n display: flex;\n margin-top: var(--layout-margin-hair);\n justify-content: space-around;\n width: var(--icons-size-small);\n height: var(--icons-size-small);\n min-width: var(--icons-size-small);\n background-color: var(--surface-color-secondary-default);\n border-color: var(--surface-color-border-medium);\n border-style: solid;\n border-width: var(--layout-border-width-small);\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Checkbox > .checkbox > svg {\n align-self: center;\n}\n\n/* Label */\n.bcds-react-aria-Checkbox > .label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n\n/* Focus */\n.bcds-react-aria-Checkbox[data-focus-visible] > .checkbox {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Hover */\n.bcds-react-aria-Checkbox[data-hovered] > .checkbox {\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Checkbox[data-selected][data-hovered] > .checkbox {\n background-color: var(--surface-color-primary-hover);\n border-color: var(--surface-color-primary-hover);\n}\n\n/* Pressed */\n.bcds-react-aria-Checkbox[data-pressed] > .checkbox {\n background-color: var(--surface-color-primary-default);\n}\n\n/* Selected */\n.bcds-react-aria-Checkbox[data-selected] > .checkbox {\n background-color: var(--surface-color-primary-default);\n border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-selected] > .checkbox > svg {\n color: var(--icons-color-primary-invert);\n}\n\n/* Disabled */\n.bcds-react-aria-Checkbox[data-disabled] {\n cursor: not-allowed;\n}\n.bcds-react-aria-Checkbox[data-disabled] > .checkbox {\n border-color: var(--surface-color-border-medium);\n background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-disabled] > .label {\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox {\n border-color: var(--surface-color-primary-disabled);\n background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox > svg {\n color: var(--icons-color-disabled);\n}\n\n/* Indeterminate */\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox {\n background-color: var(--surface-color-primary-default);\n border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox {\n background-color: var(--surface-color-primary-disabled);\n border-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-invalid] > .checkbox {\n background-color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox > svg {\n color: var(--icons-color-primary-invert);\n align-self: center;\n vertical-align: middle;\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox > svg {\n color: var(--icons-color-disabled);\n}\n\n/* Read-only */\n.bcds-react-aria-Checkbox[data-readonly] {\n cursor: not-allowed;\n}\n\n/* Invalid */\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox {\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox > svg {\n color: var(--icons-color-primary-invert);\n}\n.bcds-react-aria-Checkbox[data-selected][data-invalid] > .checkbox {\n background-color: var(--surface-color-primary-danger-button-default);\n}\n";
|
|
31514
|
+
styleInject(css_248z$u);
|
|
31515
31515
|
|
|
31516
31516
|
function Checkbox({ value, children, ...props }) {
|
|
31517
31517
|
return (jsxRuntime.jsx($ed8ccb2e23e76301$export$48513f6b9f8ce62d, { className: "bcds-react-aria-Checkbox", value: value, ...props, children: ({ isRequired, isSelected, isIndeterminate }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "checkbox", children: [isSelected && !isIndeterminate && jsxRuntime.jsx(SvgCheckIcon, {}), isIndeterminate && jsxRuntime.jsx(SvgDashIcon$1, {})] }), jsxRuntime.jsxs("span", { className: "label", children: [jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), " ", isRequired && "(required)"] })] })) }));
|
|
31518
31518
|
}
|
|
31519
31519
|
|
|
31520
|
-
var css_248z$
|
|
31521
|
-
styleInject(css_248z$
|
|
31520
|
+
var css_248z$t = ".bcds-react-aria-CheckboxGroup {\n display: flex;\n flex-direction: column;\n gap: var(--layout-margin-small);\n}\n\n/* Orientation */\n.bcds-react-aria-CheckboxGroup--options {\n display: flex;\n}\n\n.bcds-react-aria-CheckboxGroup--options.vertical {\n flex-direction: column;\n gap: var(--layout-margin-small);\n}\n\n.bcds-react-aria-CheckboxGroup--options.horizontal {\n flex-direction: row;\n gap: var(--layout-margin-medium);\n}\n.bcds-react-aria-CheckboxGroup--options.horizontal.flex-wrap-nowrap {\n flex-wrap: nowrap;\n}\n.bcds-react-aria-CheckboxGroup--options.horizontal.flex-wrap-wrap {\n flex-wrap: wrap;\n}\n.bcds-react-aria-CheckboxGroup--options.horizontal.flex-wrap-wrap-reverse {\n flex-wrap: wrap-reverse;\n}\n\n/* Parts */\n.bcds-react-aria-CheckboxGroup--label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-CheckboxGroup--description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n\n.bcds-react-aria-CheckboxGroup--error {\n display: inline-flex;\n flex-direction: row;\n gap: var(--layout-margin-xsmall);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n";
|
|
31521
|
+
styleInject(css_248z$t);
|
|
31522
31522
|
|
|
31523
31523
|
function CheckboxGroup({ orientation = "vertical", label, description, errorMessage, flexWrap = "nowrap", children, ...props }) {
|
|
31524
31524
|
return (jsxRuntime.jsx($ed8ccb2e23e76301$export$4aa08d5625cb8ead, { className: `bcds-react-aria-CheckboxGroup`, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-CheckboxGroup--label", children: [label, " ", isRequired && "(required)"] })), jsxRuntime.jsx("div", { className: `bcds-react-aria-CheckboxGroup--options ${orientation} flex-wrap-${flexWrap}`, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) }), description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-CheckboxGroup--description", children: description })), isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-CheckboxGroup--error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
@@ -31816,18 +31816,18 @@ function $60f33508b4cd9d3b$var$isEqual(a, b) {
|
|
|
31816
31816
|
return true;
|
|
31817
31817
|
}
|
|
31818
31818
|
|
|
31819
|
-
var css_248z$
|
|
31820
|
-
styleInject(css_248z$
|
|
31819
|
+
var css_248z$s = ".bcds-react-aria-DatePicker {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n background-color: var(--surface-color-forms-default);\n align-self: flex-start;\n width: 100%;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n.bcds-react-aria-DatePicker--Group {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n gap: var(--layout-margin-small);\n}\n.bcds-react-aria-DatePicker--Input {\n display: inline;\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n align-items: center;\n white-space: nowrap;\n border: none;\n}\n\n/* Sizing */\n.bcds-react-aria-DatePicker.small > .bcds-react-aria-DatePicker--Group {\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n height: 32px;\n}\n.bcds-react-aria-DatePicker.small .bcds-react-aria-DatePicker--Input {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-DatePicker.medium > .bcds-react-aria-DatePicker--Group {\n padding: var(--layout-padding-xsmall) 0.75rem;\n height: 40px;\n}\n.bcds-react-aria-DatePicker.medium .bcds-react-aria-DatePicker--Input {\n font: var(--typography-regular-body);\n}\n\n/* Label */\n.bcds-react-aria-DatePicker--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Required indicator */\n.bcds-react-aria-DatePicker--Label.required {\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n/* Description */\n.bcds-react-aria-DatePicker--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Error message */\n.bcds-react-aria-DatePicker--Error {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid] > .bcds-react-aria-DatePicker--Group {\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid]\n > .bcds-react-aria-DatePicker--Group\n > svg {\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n/* Format helper text */\n.bcds-react-aria-DatePicker--FormatHelpText {\n unicode-bidi: embed;\n direction: ltr;\n}\n\n/* Hover and focus */\n.bcds-react-aria-DatePicker--Group[data-hovered] {\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n > .bcds-react-aria-DatePicker--Group {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n > .bcds-react-aria-DatePicker--Group:has(\n .bcds-react-aria-Button[data-focus-visible]\n ) {\n outline: none; /* Hide focus ring when button is focused */\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n .bcds-react-aria-DatePicker--Segment {\n outline: none;\n}\n.bcds-react-aria-DatePicker--Segment[data-focused] {\n outline: none;\n border-radius: var(--layout-border-radius-small);\n background-color: var(--surface-color-primary-default);\n color: var(--typography-color-primary-invert);\n padding: var(--layout-padding-hair);\n margin: var(--layout-margin-none) var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker > .bcds-react-aria-Button[data-focused] {\n outline: none;\n}\n\n/* Disabled and read-only */\n.bcds-react-aria-DatePicker[data-readonly]\n > .bcds-react-aria-DatePicker--Group {\n cursor: not-allowed;\n}\n.bcds-react-aria-DatePicker--Segment[data-readonly][data-focused] {\n background-color: var(--surface-color-forms-disabled);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-DatePicker[data-disabled]\n > .bcds-react-aria-DatePicker--Group {\n background-color: var(--surface-color-forms-disabled);\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
31820
|
+
styleInject(css_248z$s);
|
|
31821
31821
|
|
|
31822
|
-
var css_248z$
|
|
31823
|
-
styleInject(css_248z$
|
|
31822
|
+
var css_248z$r = ".bcds-react-aria-Dialog {\n display: flex;\n flex-direction: column;\n min-height: var(--layout-margin-xxxlarge);\n}\n\n.bcds-react-aria-Dialog--Container {\n position: relative;\n}\n\n/* Close icon */\n.bcds-react-aria-Dialog--closeIcon {\n color: var(--icons-color-primary);\n position: absolute;\n top: 0;\n right: 0;\n padding: var(--layout-padding-small);\n}\n.bcds-react-aria-Dialog--closeIcon > svg {\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
31823
|
+
styleInject(css_248z$r);
|
|
31824
31824
|
|
|
31825
31825
|
function Dialog({ isCloseable = true, role = "dialog", children, ...props }) {
|
|
31826
31826
|
return (jsxRuntime.jsx($f2ff30fde7b014be$export$3ddf2d174ce01153, { className: "bcds-react-aria-Dialog", role: role, ...props, children: ({ close }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "bcds-react-aria-Dialog--Container", children: [isCloseable && (jsxRuntime.jsx("span", { className: "bcds-react-aria-Dialog--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close", type: "button", onPress: close, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) })), jsxRuntime.jsx(jsxRuntime.Fragment, { children: children })] }) })) }));
|
|
31827
31827
|
}
|
|
31828
31828
|
|
|
31829
|
-
var css_248z$
|
|
31830
|
-
styleInject(css_248z$
|
|
31829
|
+
var css_248z$q = ".bcds-react-aria-Separator {\n border: none;\n border-radius: var(--layout-border-radius-circular);\n background-color: var(--surface-color-border-default);\n}\n\n/* Orientation */\n.bcds-react-aria-Separator:not([aria-orientation=\"vertical\"]) {\n margin: var(--layout-margin-small) var(--layout-margin-none);\n align-self: stretch;\n width: auto;\n}\n\n.bcds-react-aria-Separator[aria-orientation=\"vertical\"] {\n margin: var(--layout-margin-none) var(--layout-margin-small);\n align-self: stretch;\n height: auto;\n}\n\n/* Sizing */\n.bcds-react-aria-Separator.small:not([aria-orientation=\"vertical\"]) {\n height: var(--layout-border-width-small);\n}\n.bcds-react-aria-Separator.small[aria-orientation=\"vertical\"] {\n width: var(--layout-border-width-small);\n}\n.bcds-react-aria-Separator.medium:not([aria-orientation=\"vertical\"]) {\n height: var(--layout-border-width-medium);\n}\n.bcds-react-aria-Separator.medium[aria-orientation=\"vertical\"] {\n width: var(--layout-border-width-medium);\n}\n.bcds-react-aria-Separator.large:not([aria-orientation=\"vertical\"]) {\n height: var(--layout-border-width-large);\n}\n.bcds-react-aria-Separator.large[aria-orientation=\"vertical\"] {\n width: var(--layout-border-width-large);\n}\n";
|
|
31830
|
+
styleInject(css_248z$q);
|
|
31831
31831
|
|
|
31832
31832
|
function Separator({ size = "medium", ...props }) {
|
|
31833
31833
|
return (jsxRuntime.jsx($e28ab3efe3e87743$export$1ff3c3f08ae963c0, { className: `bcds-react-aria-Separator ${size}`, ...props }));
|
|
@@ -31865,15 +31865,15 @@ function DatePicker({ size = "medium", label, description, errorMessage, showFor
|
|
|
31865
31865
|
return isBrowserLocaleUsed ? (datePicker) : (jsxRuntime.jsx($2eb8e6d23f3d0cb0$export$a54013f0d02a8f82, { locale: "en-CA", children: datePicker }));
|
|
31866
31866
|
}
|
|
31867
31867
|
|
|
31868
|
-
var css_248z$
|
|
31869
|
-
styleInject(css_248z$
|
|
31868
|
+
var css_248z$p = ".bcds-bc-logo--whiteFill {\n fill: #ffffff;\n stroke-width: 0px;\n}\n\n.bcds-bc-logo--blueFill {\n fill: #234075;\n stroke-width: 0px;\n}\n\n.bcds-bc-logo--goldFill {\n fill: #e3a82b;\n stroke-width: 0px;\n}\n\n.bcds-bc-logo--noFill {\n fill: none;\n stroke-width: 0px;\n}\n";
|
|
31869
|
+
styleInject(css_248z$p);
|
|
31870
31870
|
|
|
31871
31871
|
function SvgBcLogo({ id = "bcgov-logo" }) {
|
|
31872
31872
|
return (jsxRuntime.jsxs("svg", { id: id, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 847.65 327.01", children: [jsxRuntime.jsx("path", { d: "M109.59,226.32c44.7,0,106.54,25.17,151.41,25.17,32.02,0,63.26-8.54,81.04-21.13,1.24-7.39,1.9-14.97,1.9-22.72,0-75.13-60.91-136.04-136.04-136.04s-136.04,60.91-136.04,136.04c0,7.65.64,15.15,1.86,22.46,4.9-.91,21.57-3.79,35.87-3.79Z", className: "bcds-bc-logo--whiteFill" }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "415.4", y: "252.98", width: "314.66", height: "3.82", className: "bcds-bc-logo--goldFill" }), jsxRuntime.jsx("path", { d: "M423.47,116.64c0-6.39-.45-8.08-4.76-8.43l-3-.21c-.49-.39-.35-2.12.1-2.16,5.17-.46,11.69-.69,20.6-.69,6.04,0,11.79.43,16.1,2.42,4.12,1.81,7.28,5.26,7.28,10.79,0,6.22-4.03,9.41-9.77,11.83,0,.86.77,1.12,1.82,1.29,5.17.86,12.84,5.18,12.84,14.42,0,10.01-8.24,16.75-25.49,16.75-2.78,0-7.47-.26-11.5-.26s-7.47.17-11.02.26c-.57-.26-.77-1.64-.19-2.16l1.73-.26c5.08-.78,5.27-1.73,5.27-10.79v-32.8ZM431.32,128.12c0,2.42.1,2.59,4.98,2.42,9.77-.35,15.04-2.94,15.04-11.05s-7-11.65-14.28-11.65c-2.11,0-3.55.17-4.41.52-.96.26-1.34.69-1.34,2.24v17.52ZM431.32,148.14c0,3.11.19,7.51,2.01,9.41,1.82,1.98,4.7,2.42,7.57,2.42,8.53,0,15.04-3.45,15.04-12.08,0-6.82-3.83-14.76-19.07-14.76-5.17,0-5.56.52-5.56,2.24v12.77Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M531.26,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.06-.07,10.15-.22c.49.22.65,1.55.16,1.84l-2.04.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.04.22c.49.29.33,1.62-.16,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.66-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M576.66,151.53c0,7.74.15,8.85,4.6,9.22l2.45.22c.46.29.31,1.62-.15,1.84-4.37-.15-6.98-.22-10.05-.22s-5.75.07-10.66.22c-.46-.22-.62-1.47,0-1.84l2.76-.22c4.37-.37,4.75-1.48,4.75-9.22v-32.96c0-2.28,0-2.36-2.3-2.36h-4.22c-3.3,0-7.51.15-9.43,1.84-1.84,1.62-2.61,3.24-3.45,5.09-.62.44-1.69.07-1.99-.52,1.22-3.32,2.38-8.04,2.91-10.98.23-.15,1.23-.22,1.46,0,.46,2.36,2.99,2.29,6.52,2.29h31.05c4.14,0,4.83-.15,5.98-2.06.38-.15,1.23-.07,1.38.22-.84,3.02-1.38,9-1.15,11.21-.31.59-1.61.59-1.99.15-.23-1.84-.77-4.57-1.92-5.38-1.76-1.25-4.68-1.84-8.89-1.84h-5.44c-2.3,0-2.22.07-2.22,2.51v32.81Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M609.53,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.05-.07,10.15-.22c.49.22.66,1.55.17,1.84l-2.05.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.05.22c.49.29.33,1.62-.17,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.65-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M646.2,163.57c-7.31,0-11.92-1.92-13.57-2.73-1.04-1.62-2.18-6.86-2.35-10.32.44-.52,1.74-.66,2.09-.22,1.31,3.76,4.87,10.98,14.96,10.98,7.31,0,10.87-4.05,10.87-8.48,0-3.24-.78-6.86-7.13-10.32l-8.26-4.57c-4.35-2.43-9.4-6.64-9.4-12.68,0-7,6.44-12.68,17.75-12.68,2.7,0,5.83.44,8.09.96,1.13.29,2.35.44,3.04.44.78,1.77,1.57,5.9,1.57,9-.35.44-1.74.66-2.18.22-1.13-3.54-3.48-8.33-11.83-8.33s-10.35,4.79-10.35,8.18c0,4.28,4.18,7.38,7.39,9.07l6.96,3.69c5.48,2.88,10.88,7.15,10.88,14.16,0,8.11-7.22,13.64-18.53,13.64Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M689.99,138.78c-3.81,0-3.96.15-3.96,2.36v10.4c0,7.74.4,8.77,4.84,9.22l2.3.22c.48.29.32,1.62-.16,1.84-4.28-.15-6.98-.22-10.08-.22-3.41,0-6.11.15-9.2.22-.47-.22-.63-1.4-.16-1.84l1.35-.22c4.45-.74,4.6-1.48,4.6-9.22v-26.54c0-7.74-.55-8.99-4.68-9.29l-2.06-.15c-.48-.29-.32-1.62.16-1.84,3.89.07,6.58.22,10,.22,3.1,0,5.79-.07,9.2-.22.48.22.63,1.55.16,1.84l-1.51.15c-4.6.44-4.76,1.55-4.76,9.29v8.48c0,2.28.16,2.36,3.96,2.36h22.69c3.81,0,3.97-.07,3.97-2.36v-8.48c0-7.74-.16-8.85-4.84-9.29l-1.51-.15c-.48-.29-.32-1.62.16-1.84,3.65.15,6.35.22,9.6.22s5.79-.07,9.36-.22c.48.22.63,1.55.16,1.84l-1.66.15c-4.6.44-4.76,1.55-4.76,9.29v26.54c0,7.74.16,8.7,4.76,9.22l1.9.22c.47.29.32,1.62-.16,1.84-3.81-.15-6.51-.22-9.6-.22-3.25,0-6.11.07-9.6.22-.48-.22-.63-1.4-.16-1.84l1.51-.22c4.84-.74,4.84-1.48,4.84-9.22v-10.4c0-2.21-.16-2.36-3.97-2.36h-22.69Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M378.06,179.01c6.52-5.07,14.83-7.57,24.12-7.57,4.82,0,11.61.98,15.81,2.14,1.07.27,1.7.45,2.5.36.09,2.05.54,7.65,1.25,13.09-.45.62-1.79.71-2.41.18-1.34-6.05-5.36-13-18.31-13-13.67,0-25.28,8.64-25.28,27.06s11.88,29.02,26.53,29.02c11.52,0,16.62-7.48,18.67-12.73.63-.44,1.97-.27,2.32.36-.62,4.63-2.95,10.5-4.29,12.2-1.07.18-2.14.53-3.13.89-1.97.71-8.4,2.05-14.11,2.05-8.04,0-15.72-1.6-22.24-5.96-7.15-4.9-12.69-12.99-12.69-24.48,0-9.88,4.47-18.34,11.26-23.59Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M426.92,207.81c0-14.75,11.61-26.03,27.56-26.03,17.88,0,26.86,12.31,26.86,25.29,0,14.89-11.92,25.73-26.86,25.73-17.19,0-27.56-11.72-27.56-25ZM473.6,209.35c0-12.17-5.65-25.29-20.44-25.29-8.05,0-18.5,5.24-18.5,21.38,0,10.91,5.57,25.07,20.82,25.07,9.29,0,18.12-6.64,18.12-21.16Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M568.68,201.47c0-4.57-.16-13.05-1.49-15.26-.55-.89-1.95-1.4-3.91-1.55l-1.95-.15c-.47-.52-.31-1.47.15-1.77,2.97.15,5.86.22,8.91.22,3.28,0,5.39-.08,8.21-.22.62.37.55,1.33.16,1.77l-1.88.15c-1.95.15-3.44.81-3.91,1.77-1.09,2.43-1.09,10.91-1.09,15.04v8.33c0,6.42-1.1,13.2-5.47,17.62-3.36,3.47-9.14,5.38-14.93,5.38-5.39,0-10.79-.96-14.62-4.05-4.14-3.24-6.1-8.63-6.1-17.4v-17.4c0-7.67-.16-8.92-4.69-9.29l-1.96-.15c-.47-.29-.31-1.55.15-1.77,3.91.15,6.57.22,9.69.22s5.78-.08,9.61-.22c.47.22.63,1.47.16,1.77l-1.88.15c-4.53.37-4.69,1.62-4.69,9.29v15.93c0,11.87,3.91,19.69,15.87,19.69,11.33,0,15.63-8.41,15.63-19.61v-8.48Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M659.52,192.26c0-5.51-.35-6.93-4.23-7.22l-2.77-.27c-.31-.28-.48-1.78.09-1.82,4.67-.35,10.54-.59,18.57-.59,5.44,0,10.62.37,14.51,2.08,3.71,1.57,6.56,4.54,6.56,9.31,0,5.36-3.63,8.12-8.81,10.2,0,.75.69.97,1.64,1.12,4.67.74,11.58,4.47,11.58,12.44,0,8.64-7.43,14.45-22.98,14.45-2.5,0-6.74-.22-10.37-.22s-6.74.15-9.93.22c-.52-.22-.69-1.41-.17-1.86l1.55-.22c4.58-.67,4.75-1.49,4.75-9.31v-28.3ZM666.6,202.16c0,2.09.09,2.24,4.49,2.09,8.81-.3,13.56-2.53,13.56-9.53s-6.3-10.05-12.87-10.05c-1.9,0-3.2.15-3.97.45-.87.22-1.21.59-1.21,1.94v15.12ZM666.6,219.44c0,2.68.17,6.48,1.81,8.12,1.64,1.71,4.23,2.08,6.82,2.08,7.69,0,13.56-2.98,13.56-10.43,0-5.88-3.45-12.73-17.19-12.73-4.67,0-5.01.44-5.01,1.94v11.02Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M518.75,160.97l-2.05-.18c-.41-.04-.78-.1-1.13-.15-2.99-.53-4.19-3.2-5.6-5.67l-7.08-12.32c-1.22-2.05-2.53-4.82-5.33-5.21,7.25-.87,13.81-5.06,13.81-12.24,0-8.3-8.21-12.01-16.52-12.01-4.98,0-9.52.13-14.59.13-2.79,0-6.12-.13-8.92-.13-1.55,0-1.57.32-1.57,1.18,0,1.28.54.92,2.19,1.02,5.9.33,5.68,1.43,5.68,6.49v32.31c0,4.62.4,6-4.46,6.44,0,0-.74.08-1.17.12l-2.06.21c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.12,3.03-.12,2.69-.08,5.38-.28,8.06-.28s5.29.21,7.95.29h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.07-.2c-.42-.05-1.15-.11-1.15-.11-4.9-.33-4.6-1.71-4.6-6.46v-12.17c0-.71-.09-2.61.44-3.16.44-.48,1.22-.4,1.92-.4,6.64,0,6.55.63,9.7,6.16l8.56,15.4c.7,1.19,1.22,2.69,2.97,2.69h7.44c.94.03,1.92.06,3.01.1.49-.22.65-1.4.16-1.84ZM488.92,136.74c-1.49,0-4.46.55-4.46-1.42v-14.14c0-5.53.18-6.32,6.82-6.32,7.78,0,12.58,3.95,12.58,11.22,0,3.16-1.14,6.08-4.02,8.06-3.32,2.29-6.9,2.61-10.92,2.61Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M490.53,194.2c0-7.74-.16-8.92-5.27-9.29l-2.03-.15c-.49-.3-.32-1.62.16-1.84,4.54.15,7.3.22,10.54.22s5.92-.07,9.98-.22c.49.22.65,1.55.16,1.84l-1.95.15c-4.78.37-4.95,1.55-4.95,9.29v25.66c0,4.64.24,6.56,1.7,7.96.89.81,2.43,1.7,8.84,1.7,6.89,0,8.6-.3,9.9-.96,1.62-.89,3.73-3.54,5.35-7.3.49-.37,2.03-.07,2.03.44,0,.81-2.27,8.33-3.41,10.32-4.13-.15-11.84-.22-20.2-.22h-7.46c-3.41,0-6,.07-10.54.22-.49-.22-.65-1.4-.16-1.84l2.43-.22c4.7-.44,4.87-1.48,4.87-9.22v-26.54Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M707.79,194.34c0-7.81-.16-9.07-4.86-9.44l-1.99-.15c-.48-.3-.32-1.62.16-1.84,3.98.15,6.69.22,10.03.22s5.89-.07,9.87-.22c.48.22.64,1.55.16,1.84l-1.99.15c-4.7.37-4.86,1.62-4.86,9.44v26.25c0,7.82.16,8.85,4.86,9.36l1.99.22c.48.3.32,1.62-.16,1.84-3.98-.15-6.69-.22-9.87-.22-3.35,0-6.05.07-10.03.22-.48-.22-.64-1.4-.16-1.84l1.99-.22c4.7-.52,4.86-1.55,4.86-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M644.16,229.94c-.41-.04-1.17-.1-1.17-.1-.84-.08-1.59-.2-2.19-.86-1.03-1.1-.95-4.23-.95-5.48v-32.31c0-1.41-.34-4.46.69-5.56.52-.58,1.59-.67,2.55-.73h0c.58-.05.6-.05,1.11-.07l2.05-.15c.49-.3.33-1.62-.16-1.84-1.09.04-2.09.02-3.03.05h0s-8.7,0-8.7,0c-.95,0-1.81,0-2.32,1.02l-17.73,36.92-15.66-35.67c-.52-1.25-.6-2.27-2.24-2.27h-9.05c-.94-.03-1.98-.02-3.08-.06-.49.22-.66,1.55-.16,1.84l2.05.15c.42.03,1.19.09,1.19.09,3.4.22,3.61.98,3.3,4.55l-2.67,34.65c-.23,3.48-.42,5.32-4.07,5.66,0,0-.77.1-1.19.14l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,3-.1,3-.1,1.85-.09,3.73-.25,5.61-.25,2.03,0,4.06.19,6.1.27h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.04-.22c-.54-.04-1.14-.1-1.14-.1-5.26-.36-5.14-4.07-4.81-8.62l2.5-32.23h.6l16.95,39.66c.17.55.43,1.49,1.29,1.49.78,0,1.03-.86,1.29-1.41l19.1-40.68h.6v35.44c0,1.41.17,4.3-1.29,5.4-.76.57-3.25.91-3.25.91-.34.05-.7.1-1.11.15l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,2.99-.1,2.99-.1,2.77-.08,5.59-.28,8.41-.28,2.03,0,6,.19,6,.19.95.03,2.02.13,3.12.17.49-.22.66-1.4.16-1.84l-2.05-.22Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M777.13,230.14l-.28-.22c-.41-.04-.77-.09-1.11-.15-3.19-.71-4.43-4.55-5.61-7.29l-16.41-38.83c-.16-.47-.49-1.47-1.14-1.47-.89,0-1.14,1.08-1.38,1.7l-15.68,38.76c-.57,1.47-2.03,5.03-3.09,6.11-.81.83-1.86.99-2.99,1.1,0,0-.88.08-1.31.13l-1.93.2c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.11,3.03-.11,2.14-.03,4.29-.3,6.44-.3,1.81,0,3.61.19,5.41.27,0,0,1.94.07,3.03.11.49-.22.65-1.4.16-1.84l-2.05-.22c-.41-.04-1.11-.11-1.11-.11-1.89-.21-4.24-.55-4.24-2.62,0-1.39.65-3.02,1.14-4.25l2.44-5.8c1.22-2.78.73-3.1,3.98-3.1h11.05c3.9,0,3.33,0,5.04,3.95l2.6,5.88c.41,1.01,1.14,2.71,1.14,3.79,0,1.94-2.12,2.07-4.11,2.24,0,0-.66.06-1.23.1l-1.97.14c-.49.44-.33,1.62.17,1.84,1.09-.04,3.03-.12,3.03-.12,2.31-.08,4.64-.26,6.87-.26,2.85,0,5.69.19,8.54.27h0c.93.03.14.06,1.22.1.49-.22.65-1.4.16-1.84ZM755.64,211.89h-9.57c-.33,0-3,.31-3-.47,0-.24.17-.7.25-.94l5.75-14.23c.17-.39.75-2.35,1.41-2.35.5,0,1.17,2.03,1.33,2.35l5.66,13.29c0,.16.58,1.41.58,1.72,0,.86-1.91.62-2.41.62Z", className: "bcds-bc-logo--blueFill" })] }), jsxRuntime.jsx("rect", { width: "847.65", height: "327.01", className: "bcds-bc-logo--noFill" })] }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("polygon", { points: "295.89 176.17 301.27 178.4 313.19 170.08 295.89 176.17", className: "bcds-bc-logo--goldFill" }), jsxRuntime.jsx("path", { d: "M95.46,166.88l-14.14-4.97.71-1.73,15.92,5.31.07-.04,2.1-1.19.84-.53-17.36-7.39.73-1.82,38.75,15.67,1.28-.53-38.44-18.73.86-1.76,40.73,18.96.56-.29-39.49-22.4.81-1.68,57.03,31.03c.47-.86,1.44-2.44,1.95-3.28-21.68-20.39-42.61-35.69-42.61-35.69,0,0,21.52,14.41,48.07,27.81.88-1.09,1.6-1.97,2.53-3.01l-48.65-42.83,1.31-1.34,39.27,33.47-36.38-36.43,1.36-1.41,40.84,39.47-38.02-42.2,1.45-1.31,35.14,37.63-32.07-40.41,1.38-1.26,41.11,50.03c1.06-.92,1.95-1.61,3.06-2.46-12.44-26.91-26.02-48.8-26.02-48.8,0,0,14.46,21.28,33.96,43.56,1.19-.67,2.4-1.31,3.63-1.92l-.21-.13-28.81-57.5,1.71-.75,23.87,45.74-20.08-47.41,1.79-.8,23.08,51.9-19.45-53.37,1.84-.67,18.49,48.05-14.6-49.49,1.75-.65,19.22,61.38-.04.16.05-.02c1.28-.43,2.58-.81,3.89-1.16-1.46-29.48-5.82-54.7-5.82-54.7,0,0,5.4,25,15.08,52.87,1.35-.17,2.71-.31,4.07-.4l-.04-.06h.17l-.1-.14-5.17-64.11,1.87-.06,5,51.35-.86-51.48,1.96-.07,1.96,56.77,1.96-56.77,1.96.07-.86,51.48,5-51.35,1.87.06-5.17,64.11-.1.14h.03v.02s.07,0,.07,0c1.34.08,2.66.22,3.98.38,9.67-27.84,15.06-52.8,15.06-52.8,0,0-4.35,25.14-5.82,54.57,1.32.35,2.63.73,3.91,1.15l19.15-61.16,1.76.65-14.6,49.48,18.49-48.05,1.84.67-19.45,53.37,23.08-51.9,1.79.8-20.08,47.41,23.87-45.74,1.71.75-28.71,57.3.05.02c1.18.58,2.34,1.19,3.49,1.83,19.42-22.21,33.79-43.37,33.79-43.37,0,0-13.49,21.74-25.89,48.52,1.11.84,2.19,1.7,3.24,2.6l40.63-49.49,1.39,1.26-32.08,40.41,35.14-37.63,1.45,1.31-38.02,42.2,40.84-39.47,1.36,1.41-36.38,36.43,39.27-33.47,1.31,1.34-48.06,42.35.03.03c.84.94,1.65,1.9,2.44,2.88,26.39-13.34,47.71-27.62,47.71-27.62,0,0-20.72,15.16-42.29,35.4.59.99,1.55,2.67,2.09,3.69l56.22-30.61.81,1.69-44.88,25.45,46.68-21.72.86,1.76-43.48,21.19.83.29,44.24-17.89.74,1.82-41.12,17.49.77.32,27.4-9.13,4.13-2.88,1.37,1.05,9.02-3.01.71,1.73-7.8,2.75,11.27,8.6,3.61,2.01c-14.49-60.58-68.98-105.62-134-105.62s-121.42,46.63-134.73,108.82c.17-.08.34-.16.51-.24l1.65-.75,1.01-.47,19.01-10.66Z", className: "bcds-bc-logo--goldFill" })] }), jsxRuntime.jsx("path", { d: "M72.5,233.02s20.32-4.06,37.29-4.06c44.7,0,106.54,25.17,151.41,25.17,32.91,0,65.02-9.03,82.51-22.19,1.37-7.79,2.08-15.8,2.08-23.98,0-11.08-1.32-21.85-3.79-32.17l-18.7-10.43-21.95,15.39-14.76-5.75c-5,2.53-35.83,23.15-35.83,23.15l-11.84-8.57-12.7-2.51-16.93-12.33-19.42,13.33s-21.67,12.58-22.41,12.58-26.14-20.13-26.14-20.13l-11.7-12.33c-1.99,1.26-9.95,4.91-9.95,4.91l-.41.11-7.7-2.38-9.35-4.96-28.41,12.88c-.17.08-.34.16-.51.24-2,9.34-3.06,19.03-3.06,28.96,0,8.56.79,16.93,2.28,25.06Z", className: "bcds-bc-logo--blueFill" })] })] }));
|
|
31873
31873
|
}
|
|
31874
31874
|
|
|
31875
|
-
var css_248z$
|
|
31876
|
-
styleInject(css_248z$
|
|
31875
|
+
var css_248z$o = ".bcds-footer {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n width: 100%;\n}\n\n.bcds-footer > .bcds-footer--acknowledgement {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n border-top: var(--layout-border-width-large) solid var(--theme-gold-60);\n border-bottom: var(--layout-border-width-large) solid var(--theme-gold-60);\n background-color: var(--theme-gray-110);\n padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n > .bcds-footer--acknowledgement\n > .bcds-footer--acknowledgement-text {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: stretch;\n color: var(--typography-color-primary-invert);\n font: var(--typography-regular-small-body);\n max-width: 1100px;\n width: 100%;\n}\n\n.bcds-footer\n > .bcds-footer--acknowledgement\n > .bcds-footer--acknowledgement-text\n > p {\n margin: var(--layout-margin-none);\n}\n\n.bcds-footer > .bcds-footer--container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n background-color: var(--surface-color-background-light-gray);\n padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--layout-padding-xlarge);\n max-width: 1100px;\n width: 100%;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n column-gap: var(--layout-padding-xlarge);\n row-gap: var(--layout-padding-medium);\n justify-content: space-between;\n width: 100%;\n}\n\n/* `horizontal` class is the default, when no `children` prop is passed */\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.horizontal {\n flex-direction: row;\n}\n\n/* `vertical` class is used when a `children` prop is passed */\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.vertical {\n flex-direction: column;\n align-items: stretch;\n row-gap: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo {\n display: flex;\n flex-direction: column;\n gap: var(--layout-padding-large);\n min-width: 324px;\n width: 576px;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo\n > #bcgov-logo-footer {\n width: 146px;\n min-width: 146px;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo\n > p {\n font: var(--typography-regular-small-body);\n margin: var(--layout-margin-none);\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo\n > p\n > a {\n color: var(--typography-color-secondary);\n font: var(--typography-regular-small-body);\n text-decoration: underline;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo\n > p\n > a:hover {\n text-decoration: none;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links {\n margin: var(--layout-margin-none);\n}\n\n/*\n When Footer hasn't been passed `children`, expand the links container to take\n up 320px, as the default links are narrower.\n*/\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.horizontal\n > .bcds-footer--links {\n min-width: 320px;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > .bcds-footer--links-title {\n display: block;\n font: var(--typography-bold-small-body);\n margin-bottom: var(--layout-padding-medium);\n text-transform: uppercase;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > ul {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: auto;\n grid-column-gap: var(--layout-padding-xlarge);\n grid-row-gap: var(--layout-padding-small);\n list-style: none;\n margin: var(--layout-margin-none);\n padding: var(--layout-padding-none);\n}\n\n/*\n When a Footer has been passed `children`, the logo-links container fills the\n full width of the container, so there's room for 4 columns of links.\n*/\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.vertical\n > .bcds-footer--links\n > ul {\n grid-template-columns: repeat(4, 1fr);\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > ul\n > li {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > ul\n > li\n > a {\n color: var(--typography-color-primary);\n text-decoration: none;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > ul\n > li\n > a:hover {\n text-decoration: underline;\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > hr {\n background-color: var(--surface-color-border-dark);\n border: var(--layout-border-width-none);\n height: var(--layout-border-width-small);\n margin: var(--layout-margin-none);\n width: 100%;\n}\n\np.bcds-footer--copyright {\n color: var(--typography-color-secondary);\n font: var(--typography-regular-body);\n margin: var(--layout-margin-none);\n}\n\n/* Tablet */\n@media (max-width: 991px) {\n /* Links drop beneath logo in the default configuration */\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links {\n flex-wrap: wrap;\n }\n\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo {\n max-width: 324px;\n }\n\n /*\n When the `children` prop is used with multiple FooterLinks components,\n only two columns of links appear on screen at once.\n */\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.vertical\n > .bcds-footer--links\n > ul {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n/* Extra small screens */\n@media (max-width: 575px) {\n .bcds-footer > .bcds-footer--acknowledgement {\n padding: var(--layout-padding-xlarge) var(--layout-padding-medium);\n }\n\n .bcds-footer > .bcds-footer--container {\n padding: var(--layout-padding-medium);\n }\n\n .bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n gap: var(--layout-padding-medium);\n }\n\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo {\n gap: var(--layout-padding-medium);\n }\n\n /*\n When the `children` prop is used with multiple FooterLinks components,\n only one column of links appear on screen at once.\n */\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.vertical\n > .bcds-footer--links\n > ul {\n grid-template-columns: repeat(1, 1fr);\n }\n}\n";
|
|
31876
|
+
styleInject(css_248z$o);
|
|
31877
31877
|
|
|
31878
31878
|
/**
|
|
31879
31879
|
* A titled list of links for use in the Footer. Rendered inside a `<figure>`
|
|
@@ -31927,8 +31927,8 @@ function Form({ ...props }) {
|
|
|
31927
31927
|
return jsxRuntime.jsx($cdaed739b1139372$export$a7fed597f4b8afd8, { ...props });
|
|
31928
31928
|
}
|
|
31929
31929
|
|
|
31930
|
-
var css_248z$
|
|
31931
|
-
styleInject(css_248z$
|
|
31930
|
+
var css_248z$n = ".bcds-header {\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-around;\n background-color: var(--surface-color-forms-default);\n border-bottom-color: var(--surface-color-border-default);\n border-bottom-style: solid;\n border-bottom-width: var(--layout-border-width-small);\n min-height: 65px;\n padding: var(--layout-padding-none) var(--layout-padding-medium);\n width: 100%;\n}\n\n.bcds-header > .bcds-header--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}\n\n.bcds-header > .bcds-header--container > .bcds-header--title {\n flex-grow: 1;\n font: var(--typography-bold-h4);\n color: var(--typography-color-primary);\n}\n\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n}\n\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a,\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li button {\n background-color: var(--surface-color-forms-default);\n box-sizing: border-box;\n color: var(--typography-color-link);\n font: var(--typography-regular-body);\n margin-top: -17.5px; /* Center the link visually in a single line-height header */\n padding: var(--layout-padding-xsmall) var(--layout-padding-medium);\n position: absolute;\n margin-left: -100000px;\n}\n\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a:focus,\n.bcds-header\n > .bcds-header--container\n > ul.bcds-header--skiplinks\n li\n button:focus {\n margin-left: 0; /* Line up left edge with left edge of logo image */\n text-wrap: nowrap;\n}\n\n.bcds-header > .bcds-header--container > .bcds-header--line {\n background-color: var(--surface-color-border-default);\n width: 1px;\n height: 32px;\n}\n\n.bcds-header > .bcds-header--container svg#bcgov-logo-header {\n min-width: 129px;\n width: 129px;\n}\n";
|
|
31931
|
+
styleInject(css_248z$n);
|
|
31932
31932
|
|
|
31933
31933
|
function Header({ children, logoLinkElement, logoImage = jsxRuntime.jsx(SvgBcLogo, { id: "bcgov-logo-header" }), skipLinks, title = "", titleElement = "span", }) {
|
|
31934
31934
|
function getLogo() {
|
|
@@ -31966,8 +31966,8 @@ function Header({ children, logoLinkElement, logoImage = jsxRuntime.jsx(SvgBcLog
|
|
|
31966
31966
|
}) })), title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "bcds-header--line" }), getTitle()] })), children] }) }));
|
|
31967
31967
|
}
|
|
31968
31968
|
|
|
31969
|
-
var css_248z$
|
|
31970
|
-
styleInject(css_248z$
|
|
31969
|
+
var css_248z$m = ".bcds-Inline-Alert {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--layout-margin-small);\n padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n\n/* Alert content */\n.bcds-Inline-Alert--container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.bcds-Inline-Alert--container > .title {\n font: var(--typography-bold-body);\n color: var(--typography-color-primary);\n}\n\n.bcds-Inline-Alert--container > .description {\n font: var(--typography-regular-body);\n color: var(--typography-color-primary);\n}\n\n/* Left icon */\n.bcds-Inline-Alert--icon {\n display: inline-flex;\n align-self: flex-start;\n padding-top: var(--layout-padding-xsmall);\n}\n\n.bcds-Inline-Alert--icon > svg {\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n\n/* Closeable */\n.bcds-Inline-Alert.closeable {\n /*\n Because the close icon button is removed from the document flow, we\n manually adjust the padding to push the `--container` element off the right\n edge of the InlineAlert.\n */\n padding: var(--layout-padding-medium) 52px var(--layout-padding-medium)\n var(--layout-padding-large);\n}\n\n.bcds-Inline-Alert--closeIcon {\n align-self: first baseline;\n color: var(--icons-color-primary);\n position: relative;\n}\n\n.bcds-Inline-Alert--closeIcon > button {\n position: absolute;\n /*\n Centers the button vertically.\n Button height (32px) minus line-height of text (27px) divided by 2.\n */\n top: -2.5px;\n}\n\n.bcds-Inline-Alert--closeIcon > svg {\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n\n/* Info variant */\n.bcds-Inline-Alert.info {\n background-color: var(--support-surface-color-info);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-info);\n border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Inline-Alert.info > .bcds-Inline-Alert--icon {\n color: var(--icons-color-info);\n}\n\n/* Success variant */\n.bcds-Inline-Alert.success {\n background-color: var(--support-surface-color-success);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-success);\n border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Inline-Alert.success > .bcds-Inline-Alert--icon {\n color: var(--icons-color-success);\n}\n\n/* Warning variant */\n.bcds-Inline-Alert.warning {\n background-color: var(--support-surface-color-warning);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-warning);\n border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Inline-Alert.warning > .bcds-Inline-Alert--icon {\n color: var(--icons-color-warning);\n}\n\n/* Danger variant */\n.bcds-Inline-Alert.danger {\n background-color: var(--support-surface-color-danger);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Inline-Alert.danger > .bcds-Inline-Alert--icon {\n color: var(--icons-color-danger);\n}\n\n/* Button group */\n.bcds-Inline-Alert--container > .bcds-ButtonGroup {\n padding-top: var(--layout-padding-small);\n}\n";
|
|
31970
|
+
styleInject(css_248z$m);
|
|
31971
31971
|
|
|
31972
31972
|
function getIcon(variant) {
|
|
31973
31973
|
switch (variant) {
|
|
@@ -31987,8 +31987,8 @@ function InlineAlert({ variant = "info", title, description, isIconHidden = fals
|
|
|
31987
31987
|
return (jsxRuntime.jsxs("div", { className: `bcds-Inline-Alert ${variant} ${isCloseable ? "closeable" : null}`, ...props, children: [!isIconHidden && (jsxRuntime.jsx("span", { className: "bcds-Inline-Alert--icon", children: customIcon ? customIcon : getIcon(variant) })), jsxRuntime.jsx("div", { className: "bcds-Inline-Alert--container", role: role, "aria-labelledby": "alert-title", children: children ? (children) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && (jsxRuntime.jsx("span", { className: "title", id: "alert-title", children: title })), description && jsxRuntime.jsx("span", { className: "description", children: description }), buttons && (jsxRuntime.jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }), isCloseable && (jsxRuntime.jsx("span", { className: "bcds-Inline-Alert--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }));
|
|
31988
31988
|
}
|
|
31989
31989
|
|
|
31990
|
-
var css_248z$
|
|
31991
|
-
styleInject(css_248z$
|
|
31990
|
+
var css_248z$l = ".bcds-react-aria-Link {\n color: var(--typography-color-link);\n text-decoration: underline;\n text-underline-offset: var(--layout-padding-hair);\n cursor: pointer;\n}\n\n/* Icon slots */\n.bcds-react-aria-Link--Icon {\n display: inline-flex;\n flex-direction: row;\n vertical-align: text-bottom;\n margin: var(--layout-margin-none) var(--layout-margin-xsmall);\n}\n\n/* Sizing */\n.bcds-react-aria-Link.small {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-Link.medium {\n font: var(--typography-regular-body);\n}\n\n.bcds-react-aria-Link.large {\n font: var(--typography-regular-large-body);\n}\n\n/* Placeholder large button style */\n.bcds-react-aria-Button.large {\n min-height: 40px;\n}\n\n/* Hover */\n.bcds-react-aria-Link[data-hovered] {\n color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-Link[data-hovered].danger {\n color: var(--surface-color-primary-danger-button-hover);\n}\n\n/* Selected */\n.bcds-react-aria-Link[data-current] {\n color: var(--surface-color-border-active);\n}\n\n/* Focus */\n.bcds-react-aria-Link[data-focus-visible] {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n border-radius: var(--layout-border-radius-small);\n}\n\n/* Disabled */\n.bcds-react-aria-Link[data-disabled],\n.bcds-react-aria-Link[data-disabled].danger {\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n\n/* Danger */\n.bcds-react-aria-Link.danger {\n color: var(--typography-color-danger);\n}\n";
|
|
31991
|
+
styleInject(css_248z$l);
|
|
31992
31992
|
|
|
31993
31993
|
function Link({ children, size = "medium", danger = false, isButton = false, buttonVariant = "primary", isUnstyled = false, iconLeft, iconRight, ariaLabel, ...props }) {
|
|
31994
31994
|
return (jsxRuntime.jsxs($984a1fc08f87e4f3$export$a6c7ac8248d6e38a, { className: !isUnstyled
|
|
@@ -31998,8 +31998,8 @@ function Link({ children, size = "medium", danger = false, isButton = false, but
|
|
|
31998
31998
|
: undefined, "aria-label": ariaLabel, ...props, children: [iconLeft && (jsxRuntime.jsx("span", { className: "bcds-react-aria-Link--Icon", children: iconLeft })), children, iconRight && (jsxRuntime.jsx("span", { className: "bcds-react-aria-Link--Icon", children: iconRight }))] }));
|
|
31999
31999
|
}
|
|
32000
32000
|
|
|
32001
|
-
var css_248z$
|
|
32002
|
-
styleInject(css_248z$
|
|
32001
|
+
var css_248z$k = ".bcds-react-aria-MenuItem {\n display: flex;\n gap: var(--layout-margin-xsmall);\n padding: var(--layout-padding-small);\n cursor: pointer;\n color: var(--typography-color-secondary);\n}\n.bcds-react-aria-MenuItem--Icon {\n display: flex;\n align-self: flex-start;\n padding-top: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-MenuItem--Content {\n display: flex;\n flex-direction: column;\n gap: var(--layout-padding-hair);\n}\n\n/* Sizing */\n.bcds-react-aria-MenuItem.small {\n font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-MenuItem.small\n > .bcds-react-aria-MenuItem--Content\n > *[slot=\"description\"] {\n font: var(--typography-regular-label);\n}\n.bcds-react-aria-MenuItem.medium {\n font: var(--typography-regular-body);\n}\n.bcds-react-aria-MenuItem.medium\n > .bcds-react-aria-MenuItem--Content\n > *[slot=\"description\"] {\n font: var(--typography-regular-small-body);\n}\n\n/* Link styling */\na.bcds-react-aria-MenuItem {\n text-decoration: none;\n}\na.bcds-react-aria-MenuItem\n > .bcds-react-aria-MenuItem--Content\n > *[slot=\"label\"] {\n color: var(--typography-color-link);\n text-decoration: underline var(--typography-color-link);\n text-underline-offset: var(--layout-margin-hair);\n}\na.bcds-react-aria-MenuItem\n > .bcds-react-aria-MenuItem--Content\n > *[slot=\"description\"] {\n color: var(--typography-color-secondary);\n text-decoration: none;\n}\na.bcds-react-aria-MenuItem[data-disabled]\n > .bcds-react-aria-MenuItem--Content\n > *[slot=\"label\"] {\n color: var(--typography-color-disabled);\n text-decoration: none;\n}\na.bcds-react-aria-MenuItem[data-disabled]\n > .bcds-react-aria-MenuItem--Content\n > *[slot=\"description\"] {\n color: var(--typography-color-disabled);\n}\n\n/* Icon displayed when an item has a submenu */\n.bcds-react-aria-MenuItem > svg {\n width: var(--icons-size-xsmall);\n height: var(--icons-size-xsmall);\n padding: var(--layout-padding-hair);\n align-self: center;\n}\n\n/* States */\n.bcds-react-aria-MenuItem[data-focused],\n.bcds-react-aria-MenuItem[data-hovered],\n.bcds-react-aria-MenuItem[data-hovered][data-focused] {\n border-radius: var(--layout-border-radius-small);\n background-color: var(--surface-color-menus-hover);\n outline: none;\n}\n\n.bcds-react-aria-MenuItem[data-disabled] {\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
32002
|
+
styleInject(css_248z$k);
|
|
32003
32003
|
|
|
32004
32004
|
function MenuItem({ size = "medium", label, description, iconLeft, ...props }) {
|
|
32005
32005
|
/* Ensure textValue is set */
|
|
@@ -32014,8 +32014,8 @@ function MenuItem({ size = "medium", label, description, iconLeft, ...props }) {
|
|
|
32014
32014
|
} }));
|
|
32015
32015
|
}
|
|
32016
32016
|
|
|
32017
|
-
var css_248z$
|
|
32018
|
-
styleInject(css_248z$
|
|
32017
|
+
var css_248z$j = ".bcds-react-aria-Menu {\n box-sizing: border-box;\n overflow-y: auto;\n max-height: inherit;\n padding: var(--layout-padding-xsmall);\n}\n\n/* Sizing */\n.bcds-react-aria-Menu.small {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-Menu.medium {\n font: var(--typography-regular-body);\n}\n\n/* Sections */\n.bcds-react-aria-Menu .react-aria-Header {\n padding: var(--layout-padding-small);\n font: var(--typography-bold-small-body);\n}\n.bcds-react-aria-Menu .react-aria-MenuSection {\n display: flex;\n flex-direction: column;\n gap: var(--layout-margin-small);\n}\n\n/* States */\n.bcds-react-aria-Menu[data-focused] {\n outline: none;\n}\n\n/* Popover */\n.bcds-react-aria-Popover {\n background-color: var(--surface-color-forms-default);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n box-shadow: var(--surface-shadow-medium);\n box-sizing: border-box;\n overflow: hidden;\n min-width: var(\n --trigger-width\n ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */\n}\n";
|
|
32018
|
+
styleInject(css_248z$j);
|
|
32019
32019
|
|
|
32020
32020
|
function Menu({ itemSize = "medium", children, items, sections, placement, ...props }) {
|
|
32021
32021
|
/* Manual composition via children */
|
|
@@ -32032,13 +32032,33 @@ function Menu({ itemSize = "medium", children, items, sections, placement, ...pr
|
|
|
32032
32032
|
return (jsxRuntime.jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Popover", placement: placement, children: jsxRuntime.jsx($49319ee1285aa241$export$d9b273488cd8ce6f, { className: `bcds-react-aria-Menu ${itemSize}`, ...props, items: sectionsArray, children: (section) => (jsxRuntime.jsxs($49319ee1285aa241$export$4b1545b4f2016d26, { id: section.id, children: [section.header && (jsxRuntime.jsx($53e61d82d8b8611d$export$8b251419efc915eb, { children: section.header })), jsxRuntime.jsx($42ceafc619f9c3ba$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxRuntime.jsx(MenuItem, { ...item, size: itemSize, children: item.children })) }), section.id !== lastSectionId && jsxRuntime.jsx(Separator, { size: "small" })] }, section.id)) }) }));
|
|
32033
32033
|
}
|
|
32034
32034
|
|
|
32035
|
-
var css_248z$
|
|
32036
|
-
styleInject(css_248z$
|
|
32035
|
+
var css_248z$i = "/* Styles for overlay element */\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal) {\n position: fixed;\n inset: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-overlay-default);\n height: 100vh;\n width: 100vw;\n z-index: 1000;\n}\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-entering] {\n animation: modal-fade 200ms;\n}\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-exiting] {\n animation: modal-fade 150ms reverse ease-in;\n}\n@media (prefers-reduced-motion) {\n /* Don't animate modal fade in/out if prefers-reduced-motion is on */\n .react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-entering] {\n animation: unset;\n }\n .react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-exiting] {\n animation: unset;\n }\n}\n\n@keyframes modal-fade {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n/* Styles for content container */\n.bcds-react-aria-Modal {\n box-sizing: border-box;\n max-width: 100vw;\n width: 600px;\n max-height: 100vh;\n min-height: var(--layout-margin-xxxlarge);\n height: auto;\n margin: var(--layout-margin-large);\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n background: var(--surface-color-forms-default);\n box-shadow: var(--surface-shadow-large);\n}\n";
|
|
32036
|
+
styleInject(css_248z$i);
|
|
32037
32037
|
|
|
32038
32038
|
function Modal({ children, ...props }) {
|
|
32039
32039
|
return (jsxRuntime.jsx($8b8d26808cb8cb53$export$2b77a92f1a5ad772, { className: "bcds-react-aria-Modal", ...props, children: children }));
|
|
32040
32040
|
}
|
|
32041
32041
|
|
|
32042
|
+
var css_248z$h = ".bcds-Subheader {\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n padding: var(--layout-padding-none) var(--layout-padding-medium);\n background-color: var(--surface-color-background-white);\n border-bottom: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n}\n\n.bcds-Subheader--Container {\n box-sizing: border-box;\n display: flex;\n flex-grow: 1;\n max-width: 1100px;\n}\n\nul.bcds-Subheader--List {\n box-sizing: border-box;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--layout-margin-small);\n list-style: none;\n padding: unset;\n margin: unset;\n}\n\nli.bcds-Subheader--Item {\n display: flex;\n align-items: center;\n}\n\n.bcds-Subheader--Separator {\n display: flex;\n align-self: stretch;\n margin: var(--layout-margin-hair) var(--layout-margin-none);\n}\n\n.bcds-Subheader--Separator\n > .bcds-react-aria-Separator[aria-orientation=\"vertical\"] {\n height: 100%;\n}\n\n/* Sizing */\n.bcds-Subheader--Container.small > .bcds-Subheader--List {\n padding: var(--layout-padding-hair) var(--layout-padding-none);\n min-height: 32px;\n}\n.bcds-Subheader--Container.small\n > .bcds-Subheader--List\n > .bcds-Subheader--Item {\n padding: var(--layout-padding-none);\n}\n.bcds-Subheader--Container.medium > .bcds-Subheader--List {\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n min-height: 40px;\n}\n.bcds-Subheader--Container.medium\n > .bcds-Subheader--List\n > .bcds-Subheader--Item {\n padding: var(--layout-padding-none) var(--layout-padding-small);\n}\n";
|
|
32043
|
+
styleInject(css_248z$h);
|
|
32044
|
+
|
|
32045
|
+
function Subheader({ size = "medium", ariaLabel, children, ...props }) {
|
|
32046
|
+
/* Add separator between each child item */
|
|
32047
|
+
const childrenArray = $8WNJc$react.Children.toArray(children);
|
|
32048
|
+
const childrenToRender = childrenArray.flatMap((child, index) => {
|
|
32049
|
+
const baseKey = $8WNJc$react.isValidElement(child) && child.key != null ? child.key : index;
|
|
32050
|
+
return [
|
|
32051
|
+
jsxRuntime.jsx("li", { className: "bcds-Subheader--Item", children: child }, `item-${String(baseKey)}`),
|
|
32052
|
+
...(index < childrenArray.length - 1
|
|
32053
|
+
? [
|
|
32054
|
+
jsxRuntime.jsx("li", { className: "bcds-Subheader--Separator", role: "presentation", "aria-hidden": "true", children: jsxRuntime.jsx(Separator, { orientation: "vertical", size: "small" }) }, `sep-${String(baseKey)}`),
|
|
32055
|
+
]
|
|
32056
|
+
: []),
|
|
32057
|
+
];
|
|
32058
|
+
});
|
|
32059
|
+
return (jsxRuntime.jsx("div", { className: "bcds-Subheader", children: jsxRuntime.jsx("nav", { className: `bcds-Subheader--Container ${size}`, "aria-label": ariaLabel, ...props, children: jsxRuntime.jsx("ul", { className: "bcds-Subheader--List", children: childrenToRender }) }) }));
|
|
32060
|
+
}
|
|
32061
|
+
|
|
32042
32062
|
var css_248z$g = ".bcds-react-aria-ProgressBar {\n display: flex;\n flex-direction: column;\n gap: var(--layout-padding-xsmall);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n}\n\n/* Label */\n.bcds-react-aria-ProgressBar--Label {\n display: flex;\n flex-direction: row;\n gap: var(--layout-margin-medium);\n justify-content: space-between;\n}\n\n.bcds-react-aria-ProgressBar--Value {\n color: var(--typography-color-secondary);\n}\n\n/* Structure */\n.bcds-react-aria-ProgressBar--Track {\n position: relative;\n overflow: hidden;\n background-color: var(--surface-color-border-default);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-circular);\n}\n.bcds-react-aria-ProgressBar--Fill {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n background: var(--surface-color-primary-default);\n border-radius: var(--layout-border-radius-circular);\n width: 100%;\n transform-origin: left;\n transform: scaleX(var(--percentage));\n transition: transform 200ms linear;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n}\n\n/* Sizing */\n.bcds-react-aria-ProgressBar--Track.small {\n height: var(--layout-padding-hair);\n}\n.bcds-react-aria-ProgressBar--Track.medium {\n height: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-ProgressBar--Track.large {\n height: var(--layout-padding-small);\n}\n\n/* Indeterminate animation */\n.bcds-react-aria-ProgressBar:not([aria-valuenow])\n .bcds-react-aria-ProgressBar--Fill {\n background-color: var(--surface-color-primary-default);\n transform: scaleX(1);\n animation: indeterminate-bar 1.5s linear infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: indeterminate-bar-pulse 2s ease-in-out infinite;\n }\n}\n@keyframes indeterminate-bar {\n 0% {\n transform: translateX(-100%) scaleX(0.4);\n }\n 50% {\n transform: translateX(0%) scaleX(0.4);\n }\n 100% {\n transform: translateX(100%) scaleX(0.4);\n }\n}\n@keyframes indeterminate-bar-pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n}\n";
|
|
32043
32063
|
styleInject(css_248z$g);
|
|
32044
32064
|
|
|
@@ -32282,6 +32302,7 @@ exports.Radio = Radio;
|
|
|
32282
32302
|
exports.RadioGroup = RadioGroup;
|
|
32283
32303
|
exports.Select = Select;
|
|
32284
32304
|
exports.Separator = Separator;
|
|
32305
|
+
exports.Subheader = Subheader;
|
|
32285
32306
|
exports.SubmenuTrigger = $49319ee1285aa241$export$ecabc99eeffab7ca;
|
|
32286
32307
|
exports.SvgBcLogo = SvgBcLogo;
|
|
32287
32308
|
exports.SvgBcOutlineIcon = SvgBcOutlineIcon;
|