@bcgov/design-system-react-components 0.3.0 → 0.3.1-pr494
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 +3 -0
- package/dist/cjs/index.cjs +539 -54
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/types/components/AlertDialog/AlertDialog.d.ts +11 -0
- package/dist/cjs/types/components/AlertDialog/AlertDialog.test.d.ts +1 -0
- package/dist/cjs/types/components/AlertDialog/index.d.ts +2 -0
- package/dist/cjs/types/components/Dialog/Dialog.d.ts +11 -0
- package/dist/cjs/types/components/Dialog/Dialog.test.d.ts +1 -0
- package/dist/cjs/types/components/Dialog/index.d.ts +2 -0
- package/dist/cjs/types/components/Modal/Modal.d.ts +3 -0
- package/dist/cjs/types/components/Modal/Modal.test.d.ts +1 -0
- package/dist/cjs/types/components/Modal/index.d.ts +2 -0
- package/dist/cjs/types/components/index.d.ts +5 -2
- package/dist/esm/index.js +536 -55
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/AlertDialog/AlertDialog.d.ts +11 -0
- package/dist/esm/types/components/AlertDialog/AlertDialog.test.d.ts +1 -0
- package/dist/esm/types/components/AlertDialog/index.d.ts +2 -0
- package/dist/esm/types/components/Dialog/Dialog.d.ts +11 -0
- package/dist/esm/types/components/Dialog/Dialog.test.d.ts +1 -0
- package/dist/esm/types/components/Dialog/index.d.ts +2 -0
- package/dist/esm/types/components/Modal/Modal.d.ts +3 -0
- package/dist/esm/types/components/Modal/Modal.test.d.ts +1 -0
- package/dist/esm/types/components/Modal/index.d.ts +2 -0
- package/dist/esm/types/components/index.d.ts +5 -2
- package/dist/index.d.ts +53 -37
- package/package.json +17 -17
package/dist/cjs/index.cjs
CHANGED
|
@@ -31,8 +31,8 @@ function styleInject(css, ref) {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
var css_248z$h = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --surface-opacity-0: 0;\n --surface-opacity-10: 0.1;\n --surface-opacity-20: 0.2;\n --surface-opacity-30: 0.3;\n --surface-opacity-40: 0.4;\n --surface-opacity-50: 0.5;\n --surface-opacity-60: 0.6;\n --surface-opacity-70: 0.7;\n --surface-opacity-80: 0.8;\n --surface-opacity-90: 0.9;\n --surface-opacity-100: 1;\n --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /* Default shadow for most content and UI elements */\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Reduced shadow for secondary UI elements */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Standard shadow for UI elements like cards and buttons */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Larger shadow for emphasis. Use sparingly */\n --surface-color-primary-button-default: #013366; /* Default fill colour for primary buttons */\n --surface-color-primary-button-hover: #1E5189; /* Fill colour used when user hovers over primary button */\n --surface-color-primary-button-disabled: #EDEBE9; /* Fill colour for inactive primary buttons */\n --surface-color-primary-danger-button-default: #CE3E39; /* Default fill colour for buttons in danger/warning state */\n --surface-color-primary-danger-button-hover: #A2312D; /* Fill colour used when user hovers over danger/warning button */\n --surface-color-primary-danger-button-disabled: #EDEBE9; /* Default fill colour for disabled danger/warning button */\n --surface-color-primary-default: #013366; /* Default theme colour for components and layout */\n --surface-color-primary-hover: #1E5189; /* Hover variant of surface.color.primary.default */\n --surface-color-primary-pressed: #01264C; /* Selected/pressed variant of surface.color.primary.default */\n --surface-color-primary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.primary default */\n --surface-color-secondary-button-default: #FFFFFF; /* Fill colour for secondary buttons */\n --surface-color-secondary-button-hover: #EDEBE9; /* Fill colour used when user hovers over secondary button */\n --surface-color-secondary-button-disabled: #EDEBE9; /* Fill colour for inactive secondary buttons */\n --surface-color-secondary-default: #FFFFFF; /* Light theme colour for components and layout */\n --surface-color-secondary-hover: #EDEBE9; /* Hover variant of surface.color.secondary.default */\n --surface-color-secondary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.secondary.default */\n --surface-color-secondary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.secondary default */\n --surface-color-tertiary-button-default: rgba(255,255,255,0); /* Default fill colour for tertiary buttons */\n --surface-color-tertiary-button-hover: #ECEAE8; /* Fill colour used when user hovers over tertiary button */\n --surface-color-tertiary-button-disabled: #EDEBE9; /* Fill colour for inactive tertiary buttons */\n --surface-color-tertiary-default: #FFFFFF00; /* Alternative light theme colour for components and layout */\n --surface-color-tertiary-hover: #ECEAE8; /* Hover variant of surface.color.tertiary.default */\n --surface-color-tertiary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.tertiary.default */\n --surface-color-tertiary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.tertiary default */\n --surface-color-menus-default: #FFFFFF; /* Default fill colour for menu items */\n --surface-color-menus-hover: #EDEBE9; /* Fill colour used when user hovers over a menu item */\n --surface-color-forms-default: #FFFFFF; /* Default fill colour for form/input fields */\n --surface-color-forms-disabled: #EDEBE9; /* Fill colour for inactive/disabled form/input fields */\n --surface-color-background-white: #FFFFFF; /* White background */\n --surface-color-background-light-gray: #FAF9F8; /* Default background colour for layout */\n --surface-color-background-light-blue: #F1F8FE; /* Light blue background */\n --surface-color-background-dark-blue: #053662; /* Dark blue background */\n --surface-color-border-default: #D8D8D8; /* Lighter border colour for UI elements */\n --surface-color-border-medium: #898785; /* Default border colour for UI elements */\n --surface-color-border-dark: #353433; /* Used as a hover colour for form fields and inputs */\n --surface-color-border-active: #2E5DD7; /* Used as the active stroke colour for UI elements */\n --surface-color-overlay-default: rgba(0,0,0,0.45); /* Background overlay colour for images and modal dialogues */\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2; /* Background colour for error, failure or danger messages */\n --support-surface-color-success: #F6FFF8; /* Background colour for success messages */\n --support-surface-color-warning: #FEF1D8; /* Background colour for warning messages */\n --support-border-color-info: #053662; /* Border stroke for general/informational messages */\n --support-border-color-danger: #CE3E39; /* Border stroke for error, failure or danger messages */\n --support-border-color-success: #42814A; /* Border stroke for success messages */\n --support-border-color-warning: #F8BB47; /* Border stroke for warning messages */\n --icons-size-xsmall: 14px; /* Smallest icon size */\n --icons-size-small: 16px;\n --icons-size-medium: 20px; /* Default icon size */\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px; /* Largest icon size */\n --icons-color-primary: #2D2D2D; /* Default colour for icons */\n --icons-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous icons */\n --icons-color-disabled: #9F9D9C; /* Use only for inactive/disabled icons */\n --icons-color-link: #255A90; /* Use for hyperlinked icons */\n --icons-color-info: #053662; /* Emphasis colour for icons in general/informational state */\n --icons-color-danger: #CE3E39; /* Emphasis colour for icons in error, failure or danger state */\n --icons-color-success: #42814A; /* Emphasis colour for icons in success state */\n --icons-color-warning: #F8BB47; /* Emphasis colour for icons in warning state */\n --icons-color-primary-invert: #FFFFFF; /* Default colour for icons on dark backgrounds */\n --layout-border-width-none: 0;\n --layout-border-width-small: 1px;\n --layout-border-width-medium: 2px;\n --layout-border-width-large: 4px;\n --layout-padding-none: 0; /* No padding */\n --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem; /* Default padding value for layout */\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem; /* Largest padding value for layout */\n --layout-margin-none: 0rem; /* No margin */\n --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem; /* Default margin value for layout */\n --layout-margin-medium: 1rem;\n --layout-margin-large: 1.5rem;\n --layout-margin-xlarge: 2rem;\n --layout-margin-xxlarge: 2.5rem;\n --layout-margin-xxxlarge: 3rem;\n --layout-margin-huge: 3.5rem; /* Largest margin value for layout */\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --typography-font-families-bc-sans: 'BC Sans'; /* BC Sans font. Requires BC Sans package */\n --typography-line-heights-xxxdense: 1.125rem; /* Smallest line height */\n --typography-line-heights-xxdense: 1.313rem;\n --typography-line-heights-xdense: 1.688rem;\n --typography-line-heights-dense: 1.913rem;\n --typography-line-heights-regular: 2.125rem; /* Default line height */\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */\n --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */\n --typography-font-weights-regular: 400; /* System token, used to generate text styles */\n --typography-font-weights-bold: 700; /* System token, used to generate text styles */\n --typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */\n --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */\n --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */\n --typography-font-size-label: 0.75rem;\n --typography-font-size-small-body: 0.875rem;\n --typography-font-size-body: 1rem;\n --typography-font-size-large-body: 1.125rem;\n --typography-font-size-h5: 1.25rem;\n --typography-font-size-h4: 1.5rem;\n --typography-font-size-h3: 1.75rem;\n --typography-font-size-h2: 2rem;\n --typography-font-size-h1: 2.25rem;\n --typography-font-size-display: 3rem;\n --typography-letter-spacing-0: 0em; /* System token, used to generate type styles */\n --typography-paragraph-spacing-0: 0; /* System token, used to generate type styles */\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /* Labels and captions */\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /* Smaller body text */\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /* Default body text */\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /* Larger body text */\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /* Alternate (unbolded) style for Heading 6 */\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /* Alternate (unbolded) style for Heading 5 */\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /* Alternate (unbolded) style for Heading 4 */\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 3 */\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /* Alternate (unbolded) style for Heading 2 */\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 1 */\n --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /* Extra-large body text size. Do not use for headings */\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (bolded) */\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /* Default for small body text (bolded) */\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /* Default for body text (bolded) */\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (bolded) */\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H6 */\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H5 */\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H4 */\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H3 */\n --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H2 */\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H1 */\n --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /* Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (italic) */\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /* Small body text (italic) */\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /* Default for body text (italic) */\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (italic) */\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Alternate (italic) style for Heading 6 */\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /* Alternate (italic) style for Heading 5 */\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /* Alternate (italic) style for Heading 4 */\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 3 */\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /* Alternate (italic) style for Heading 2 */\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 1 */\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /* Extra-large font size (italic). Do not use for headings */\n --typography-text-case-none: none;\n --typography-text-decoration-none: none; /* System token, used to generate type styles */\n --typography-paragraph-indent-0: 0px; /* System token, used to generate type styles */\n --typography-color-primary: #2D2D2D; /* Default colour for all body text and headings */\n --typography-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous text */\n --typography-color-placeholder: #9F9D9C; /* Use for placeholder text in forms */\n --typography-color-disabled: #9F9D9C; /* Use only for text in inactive user interface elements */\n --typography-color-link: #255A90; /* Use for hyperlinks in body text and headings */\n --typography-color-danger: #CE3E39; /* Use for error, failure or danger message text */\n --typography-color-primary-invert: #FFFFFF; /* Default colour for text on dark backgrounds */\n --typography-color-secondary-invert: #ECEAE8; /* Secondary colour for text on dark backgrounds */\n --theme-gold-10: #FEF8E8; /* Gold scale — lightest */\n --theme-gold-20: #FEF0D8; /* Gold scale */\n --theme-gold-30: #FDE9C4; /* Gold scale */\n --theme-gold-40: #FCE2B0; /* Gold scale */\n --theme-gold-50: #FBDA9D; /* Gold scale */\n --theme-gold-60: #FBD389; /* Gold scale */\n --theme-gold-70: #FACC75; /* Gold scale */\n --theme-gold-80: #F9C462; /* Gold scale */\n --theme-gold-90: #F8BA47; /* Gold scale */\n --theme-gold-100: #FCBA19; /* Gold scale — darkest */\n --theme-blue-10: #F1F8FE; /* Blue scale — lightest */\n --theme-blue-20: #D8EAFD; /* Blue scale */\n --theme-blue-30: #C1DDFC; /* Blue scale */\n --theme-blue-40: #A8D0FB; /* Blue scale */\n --theme-blue-50: #91C4FA; /* Blue scale */\n --theme-blue-60: #7AB8F9; /* Blue scale */\n --theme-blue-70: #5595D9; /* Blue scale */\n --theme-blue-80: #3470B1; /* Blue scale */\n --theme-blue-90: #1E5189; /* Blue scale */\n --theme-blue-100: #013366; /* Blue scale — darkest */\n --theme-gray-10: #FAF9F8; /* Greyscale — lightest */\n --theme-gray-20: #F3F2F1; /* Greyscale */\n --theme-gray-30: #ECEAE8; /* Greyscale */\n --theme-gray-40: #E0DEDC; /* Greyscale */\n --theme-gray-50: #D1CFCD; /* Greyscale */\n --theme-gray-60: #C6C5C3; /* Greyscale */\n --theme-gray-70: #9F9D9C; /* Greyscale */\n --theme-gray-80: #605E5C; /* Greyscale */\n --theme-gray-90: #3D3C3B; /* Greyscale */\n --theme-gray-100: #353433; /* Greyscale */\n --theme-gray-110: #252423; /* Greyscale — darkest */\n --theme-gray-white: #FFFFFF; /* White */\n --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */\n --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */\n}\n";
|
|
35
|
-
styleInject(css_248z$
|
|
34
|
+
var css_248z$k = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --surface-opacity-0: 0;\n --surface-opacity-10: 0.1;\n --surface-opacity-20: 0.2;\n --surface-opacity-30: 0.3;\n --surface-opacity-40: 0.4;\n --surface-opacity-50: 0.5;\n --surface-opacity-60: 0.6;\n --surface-opacity-70: 0.7;\n --surface-opacity-80: 0.8;\n --surface-opacity-90: 0.9;\n --surface-opacity-100: 1;\n --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /* Default shadow for most content and UI elements */\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Reduced shadow for secondary UI elements */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Standard shadow for UI elements like cards and buttons */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Larger shadow for emphasis. Use sparingly */\n --surface-color-primary-button-default: #013366; /* Default fill colour for primary buttons */\n --surface-color-primary-button-hover: #1E5189; /* Fill colour used when user hovers over primary button */\n --surface-color-primary-button-disabled: #EDEBE9; /* Fill colour for inactive primary buttons */\n --surface-color-primary-danger-button-default: #CE3E39; /* Default fill colour for buttons in danger/warning state */\n --surface-color-primary-danger-button-hover: #A2312D; /* Fill colour used when user hovers over danger/warning button */\n --surface-color-primary-danger-button-disabled: #EDEBE9; /* Default fill colour for disabled danger/warning button */\n --surface-color-primary-default: #013366; /* Default theme colour for components and layout */\n --surface-color-primary-hover: #1E5189; /* Hover variant of surface.color.primary.default */\n --surface-color-primary-pressed: #01264C; /* Selected/pressed variant of surface.color.primary.default */\n --surface-color-primary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.primary default */\n --surface-color-secondary-button-default: #FFFFFF; /* Fill colour for secondary buttons */\n --surface-color-secondary-button-hover: #EDEBE9; /* Fill colour used when user hovers over secondary button */\n --surface-color-secondary-button-disabled: #EDEBE9; /* Fill colour for inactive secondary buttons */\n --surface-color-secondary-default: #FFFFFF; /* Light theme colour for components and layout */\n --surface-color-secondary-hover: #EDEBE9; /* Hover variant of surface.color.secondary.default */\n --surface-color-secondary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.secondary.default */\n --surface-color-secondary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.secondary default */\n --surface-color-tertiary-button-default: rgba(255,255,255,0); /* Default fill colour for tertiary buttons */\n --surface-color-tertiary-button-hover: #ECEAE8; /* Fill colour used when user hovers over tertiary button */\n --surface-color-tertiary-button-disabled: #EDEBE9; /* Fill colour for inactive tertiary buttons */\n --surface-color-tertiary-default: #FFFFFF00; /* Alternative light theme colour for components and layout */\n --surface-color-tertiary-hover: #ECEAE8; /* Hover variant of surface.color.tertiary.default */\n --surface-color-tertiary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.tertiary.default */\n --surface-color-tertiary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.tertiary default */\n --surface-color-menus-default: #FFFFFF; /* Default fill colour for menu items */\n --surface-color-menus-hover: #EDEBE9; /* Fill colour used when user hovers over a menu item */\n --surface-color-forms-default: #FFFFFF; /* Default fill colour for form/input fields */\n --surface-color-forms-disabled: #EDEBE9; /* Fill colour for inactive/disabled form/input fields */\n --surface-color-background-white: #FFFFFF; /* White background */\n --surface-color-background-light-gray: #FAF9F8; /* Default background colour for layout */\n --surface-color-background-light-blue: #F1F8FE; /* Light blue background */\n --surface-color-background-dark-blue: #053662; /* Dark blue background */\n --surface-color-border-default: #D8D8D8; /* Lighter border colour for UI elements */\n --surface-color-border-medium: #898785; /* Default border colour for UI elements */\n --surface-color-border-dark: #353433; /* Used as a hover colour for form fields and inputs */\n --surface-color-border-active: #2E5DD7; /* Used as the active stroke colour for UI elements */\n --surface-color-overlay-default: rgba(0,0,0,0.45); /* Background overlay colour for images and modal dialogues */\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2; /* Background colour for error, failure or danger messages */\n --support-surface-color-success: #F6FFF8; /* Background colour for success messages */\n --support-surface-color-warning: #FEF1D8; /* Background colour for warning messages */\n --support-border-color-info: #053662; /* Border stroke for general/informational messages */\n --support-border-color-danger: #CE3E39; /* Border stroke for error, failure or danger messages */\n --support-border-color-success: #42814A; /* Border stroke for success messages */\n --support-border-color-warning: #F8BB47; /* Border stroke for warning messages */\n --icons-size-xsmall: 14px; /* Smallest icon size */\n --icons-size-small: 16px;\n --icons-size-medium: 20px; /* Default icon size */\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px; /* Largest icon size */\n --icons-color-primary: #2D2D2D; /* Default colour for icons */\n --icons-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous icons */\n --icons-color-disabled: #9F9D9C; /* Use only for inactive/disabled icons */\n --icons-color-link: #255A90; /* Use for hyperlinked icons */\n --icons-color-info: #053662; /* Emphasis colour for icons in general/informational state */\n --icons-color-danger: #CE3E39; /* Emphasis colour for icons in error, failure or danger state */\n --icons-color-success: #42814A; /* Emphasis colour for icons in success state */\n --icons-color-warning: #F8BB47; /* Emphasis colour for icons in warning state */\n --icons-color-primary-invert: #FFFFFF; /* Default colour for icons on dark backgrounds */\n --layout-border-width-none: 0;\n --layout-border-width-small: 1px;\n --layout-border-width-medium: 2px;\n --layout-border-width-large: 4px;\n --layout-padding-none: 0; /* No padding */\n --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem; /* Default padding value for layout */\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem; /* Largest padding value for layout */\n --layout-margin-none: 0rem; /* No margin */\n --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem; /* Default margin value for layout */\n --layout-margin-medium: 1rem;\n --layout-margin-large: 1.5rem;\n --layout-margin-xlarge: 2rem;\n --layout-margin-xxlarge: 2.5rem;\n --layout-margin-xxxlarge: 3rem;\n --layout-margin-huge: 3.5rem; /* Largest margin value for layout */\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --typography-font-families-bc-sans: 'BC Sans'; /* BC Sans font. Requires BC Sans package */\n --typography-line-heights-xxxdense: 1.125rem; /* Smallest line height */\n --typography-line-heights-xxdense: 1.313rem;\n --typography-line-heights-xdense: 1.688rem;\n --typography-line-heights-dense: 1.913rem;\n --typography-line-heights-regular: 2.125rem; /* Default line height */\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */\n --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */\n --typography-font-weights-regular: 400; /* System token, used to generate text styles */\n --typography-font-weights-bold: 700; /* System token, used to generate text styles */\n --typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */\n --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */\n --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */\n --typography-font-size-label: 0.75rem;\n --typography-font-size-small-body: 0.875rem;\n --typography-font-size-body: 1rem;\n --typography-font-size-large-body: 1.125rem;\n --typography-font-size-h5: 1.25rem;\n --typography-font-size-h4: 1.5rem;\n --typography-font-size-h3: 1.75rem;\n --typography-font-size-h2: 2rem;\n --typography-font-size-h1: 2.25rem;\n --typography-font-size-display: 3rem;\n --typography-letter-spacing-0: 0em; /* System token, used to generate type styles */\n --typography-paragraph-spacing-0: 0; /* System token, used to generate type styles */\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /* Labels and captions */\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /* Smaller body text */\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /* Default body text */\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /* Larger body text */\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /* Alternate (unbolded) style for Heading 6 */\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /* Alternate (unbolded) style for Heading 5 */\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /* Alternate (unbolded) style for Heading 4 */\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 3 */\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /* Alternate (unbolded) style for Heading 2 */\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 1 */\n --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /* Extra-large body text size. Do not use for headings */\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (bolded) */\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /* Default for small body text (bolded) */\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /* Default for body text (bolded) */\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (bolded) */\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H6 */\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H5 */\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H4 */\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H3 */\n --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H2 */\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H1 */\n --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /* Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (italic) */\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /* Small body text (italic) */\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /* Default for body text (italic) */\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (italic) */\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Alternate (italic) style for Heading 6 */\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /* Alternate (italic) style for Heading 5 */\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /* Alternate (italic) style for Heading 4 */\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 3 */\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /* Alternate (italic) style for Heading 2 */\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 1 */\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /* Extra-large font size (italic). Do not use for headings */\n --typography-text-case-none: none;\n --typography-text-decoration-none: none; /* System token, used to generate type styles */\n --typography-paragraph-indent-0: 0px; /* System token, used to generate type styles */\n --typography-color-primary: #2D2D2D; /* Default colour for all body text and headings */\n --typography-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous text */\n --typography-color-placeholder: #9F9D9C; /* Use for placeholder text in forms */\n --typography-color-disabled: #9F9D9C; /* Use only for text in inactive user interface elements */\n --typography-color-link: #255A90; /* Use for hyperlinks in body text and headings */\n --typography-color-danger: #CE3E39; /* Use for error, failure or danger message text */\n --typography-color-primary-invert: #FFFFFF; /* Default colour for text on dark backgrounds */\n --typography-color-secondary-invert: #ECEAE8; /* Secondary colour for text on dark backgrounds */\n --theme-gold-10: #FEF8E8; /* Gold scale — lightest */\n --theme-gold-20: #FEF0D8; /* Gold scale */\n --theme-gold-30: #FDE9C4; /* Gold scale */\n --theme-gold-40: #FCE2B0; /* Gold scale */\n --theme-gold-50: #FBDA9D; /* Gold scale */\n --theme-gold-60: #FBD389; /* Gold scale */\n --theme-gold-70: #FACC75; /* Gold scale */\n --theme-gold-80: #F9C462; /* Gold scale */\n --theme-gold-90: #F8BA47; /* Gold scale */\n --theme-gold-100: #FCBA19; /* Gold scale — darkest */\n --theme-blue-10: #F1F8FE; /* Blue scale — lightest */\n --theme-blue-20: #D8EAFD; /* Blue scale */\n --theme-blue-30: #C1DDFC; /* Blue scale */\n --theme-blue-40: #A8D0FB; /* Blue scale */\n --theme-blue-50: #91C4FA; /* Blue scale */\n --theme-blue-60: #7AB8F9; /* Blue scale */\n --theme-blue-70: #5595D9; /* Blue scale */\n --theme-blue-80: #3470B1; /* Blue scale */\n --theme-blue-90: #1E5189; /* Blue scale */\n --theme-blue-100: #013366; /* Blue scale — darkest */\n --theme-gray-10: #FAF9F8; /* Greyscale — lightest */\n --theme-gray-20: #F3F2F1; /* Greyscale */\n --theme-gray-30: #ECEAE8; /* Greyscale */\n --theme-gray-40: #E0DEDC; /* Greyscale */\n --theme-gray-50: #D1CFCD; /* Greyscale */\n --theme-gray-60: #C6C5C3; /* Greyscale */\n --theme-gray-70: #9F9D9C; /* Greyscale */\n --theme-gray-80: #605E5C; /* Greyscale */\n --theme-gray-90: #3D3C3B; /* Greyscale */\n --theme-gray-100: #353433; /* Greyscale */\n --theme-gray-110: #252423; /* Greyscale — darkest */\n --theme-gray-white: #FFFFFF; /* White */\n --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */\n --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */\n}\n";
|
|
35
|
+
styleInject(css_248z$k);
|
|
36
36
|
|
|
37
37
|
/*
|
|
38
38
|
* Copyright 2024 Adobe. All rights reserved.
|
|
@@ -50,7 +50,7 @@ const $4e85f108e88277b8$export$b085522c77523c51 = ($dbSRa$react.createContext)(n
|
|
|
50
50
|
($dbSRa$react.createContext)(null);
|
|
51
51
|
($dbSRa$react.createContext)(null);
|
|
52
52
|
($dbSRa$react.createContext)(null);
|
|
53
|
-
($dbSRa$react.createContext)({});
|
|
53
|
+
const $4e85f108e88277b8$export$d688439359537581 = ($dbSRa$react.createContext)({});
|
|
54
54
|
|
|
55
55
|
/*
|
|
56
56
|
* Copyright 2024 Adobe. All rights reserved.
|
|
@@ -1545,6 +1545,51 @@ function $a40c673dc9f6d9c7$export$94ed1c92c7beeb22(node, checkForOverflow) {
|
|
|
1545
1545
|
return scrollParents;
|
|
1546
1546
|
}
|
|
1547
1547
|
|
|
1548
|
+
/*
|
|
1549
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
1550
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
1551
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
1552
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
1553
|
+
*
|
|
1554
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
1555
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
1556
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
1557
|
+
* governing permissions and limitations under the License.
|
|
1558
|
+
*/
|
|
1559
|
+
|
|
1560
|
+
// @ts-ignore
|
|
1561
|
+
let $5df64b3807dc15ee$var$visualViewport = typeof document !== 'undefined' && window.visualViewport;
|
|
1562
|
+
function $5df64b3807dc15ee$export$d699905dd57c73ca() {
|
|
1563
|
+
let isSSR = ($b5e257d569688ac6$export$535bd6ca7f90a273)();
|
|
1564
|
+
let [size, setSize] = ($dbSRa$react.useState)(()=>isSSR ? {
|
|
1565
|
+
width: 0,
|
|
1566
|
+
height: 0
|
|
1567
|
+
} : $5df64b3807dc15ee$var$getViewportSize());
|
|
1568
|
+
($dbSRa$react.useEffect)(()=>{
|
|
1569
|
+
// Use visualViewport api to track available height even on iOS virtual keyboard opening
|
|
1570
|
+
let onResize = ()=>{
|
|
1571
|
+
setSize((size)=>{
|
|
1572
|
+
let newSize = $5df64b3807dc15ee$var$getViewportSize();
|
|
1573
|
+
if (newSize.width === size.width && newSize.height === size.height) return size;
|
|
1574
|
+
return newSize;
|
|
1575
|
+
});
|
|
1576
|
+
};
|
|
1577
|
+
if (!$5df64b3807dc15ee$var$visualViewport) window.addEventListener('resize', onResize);
|
|
1578
|
+
else $5df64b3807dc15ee$var$visualViewport.addEventListener('resize', onResize);
|
|
1579
|
+
return ()=>{
|
|
1580
|
+
if (!$5df64b3807dc15ee$var$visualViewport) window.removeEventListener('resize', onResize);
|
|
1581
|
+
else $5df64b3807dc15ee$var$visualViewport.removeEventListener('resize', onResize);
|
|
1582
|
+
};
|
|
1583
|
+
}, []);
|
|
1584
|
+
return size;
|
|
1585
|
+
}
|
|
1586
|
+
function $5df64b3807dc15ee$var$getViewportSize() {
|
|
1587
|
+
return {
|
|
1588
|
+
width: $5df64b3807dc15ee$var$visualViewport && ($5df64b3807dc15ee$var$visualViewport === null || $5df64b3807dc15ee$var$visualViewport === void 0 ? void 0 : $5df64b3807dc15ee$var$visualViewport.width) || window.innerWidth,
|
|
1589
|
+
height: $5df64b3807dc15ee$var$visualViewport && ($5df64b3807dc15ee$var$visualViewport === null || $5df64b3807dc15ee$var$visualViewport === void 0 ? void 0 : $5df64b3807dc15ee$var$visualViewport.height) || window.innerHeight
|
|
1590
|
+
};
|
|
1591
|
+
}
|
|
1592
|
+
|
|
1548
1593
|
/*
|
|
1549
1594
|
* Copyright 2020 Adobe. All rights reserved.
|
|
1550
1595
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -3322,6 +3367,42 @@ function $f6c31cce2adf654f$var$isValidInputKey(target, key) {
|
|
|
3322
3367
|
return target.type === 'checkbox' || target.type === 'radio' ? key === ' ' : $f6c31cce2adf654f$var$nonTextInputTypes.has(target.type);
|
|
3323
3368
|
}
|
|
3324
3369
|
|
|
3370
|
+
/*
|
|
3371
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
3372
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
3373
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
3374
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
3375
|
+
*
|
|
3376
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
3377
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
3378
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
3379
|
+
* governing permissions and limitations under the License.
|
|
3380
|
+
*/
|
|
3381
|
+
|
|
3382
|
+
|
|
3383
|
+
const $f1ab8c75478c6f73$export$3351871ee4b288b8 = /*#__PURE__*/ ($dbSRa$react).forwardRef(({ children: children, ...props }, ref)=>{
|
|
3384
|
+
let isRegistered = ($dbSRa$react.useRef)(false);
|
|
3385
|
+
let prevContext = ($dbSRa$react.useContext)(($ae1eeba8b9eafd08$export$5165eccb35aaadb5));
|
|
3386
|
+
ref = ($df56164dff5785e2$export$4338b53315abf666)(ref || (prevContext === null || prevContext === void 0 ? void 0 : prevContext.ref));
|
|
3387
|
+
let context = ($3ef42575df84b30b$export$9d1611c77c2fe928)(prevContext || {}, {
|
|
3388
|
+
...props,
|
|
3389
|
+
ref: ref,
|
|
3390
|
+
register () {
|
|
3391
|
+
isRegistered.current = true;
|
|
3392
|
+
if (prevContext) prevContext.register();
|
|
3393
|
+
}
|
|
3394
|
+
});
|
|
3395
|
+
($e7801be82b4b2a53$export$4debdb1a3f0fa79e)(prevContext, ref);
|
|
3396
|
+
($dbSRa$react.useEffect)(()=>{
|
|
3397
|
+
if (!isRegistered.current) {
|
|
3398
|
+
console.warn("A PressResponder was rendered without a pressable child. Either call the usePress hook, or wrap your DOM node with <Pressable> component.");
|
|
3399
|
+
isRegistered.current = true; // only warn once in strict mode.
|
|
3400
|
+
}
|
|
3401
|
+
}, []);
|
|
3402
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement(($ae1eeba8b9eafd08$export$5165eccb35aaadb5).Provider, {
|
|
3403
|
+
value: context
|
|
3404
|
+
}, children);
|
|
3405
|
+
});
|
|
3325
3406
|
function $f1ab8c75478c6f73$export$cf75428e0b9ed1ea({ children: children }) {
|
|
3326
3407
|
let context = ($dbSRa$react.useMemo)(()=>({
|
|
3327
3408
|
register: ()=>{}
|
|
@@ -7658,6 +7739,55 @@ function $337b884510726a0d$export$c6fdb837b070b4ff(props) {
|
|
|
7658
7739
|
}, /*#__PURE__*/ ($dbSRa$react).createElement(($f1ab8c75478c6f73$export$cf75428e0b9ed1ea), null, contents));
|
|
7659
7740
|
return /*#__PURE__*/ ($iETbY$reactdom).createPortal(contents, portalContainer);
|
|
7660
7741
|
}
|
|
7742
|
+
function $337b884510726a0d$export$14c98a7594375490() {
|
|
7743
|
+
let ctx = ($dbSRa$react.useContext)($337b884510726a0d$export$a2200b96afd16271);
|
|
7744
|
+
let setContain = ctx === null || ctx === void 0 ? void 0 : ctx.setContain;
|
|
7745
|
+
($f0a04ccd8dbdd83b$export$e5c5a5f917a5871c)(()=>{
|
|
7746
|
+
setContain === null || setContain === void 0 ? void 0 : setContain(true);
|
|
7747
|
+
}, [
|
|
7748
|
+
setContain
|
|
7749
|
+
]);
|
|
7750
|
+
}
|
|
7751
|
+
|
|
7752
|
+
/*
|
|
7753
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
7754
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
7755
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
7756
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
7757
|
+
*
|
|
7758
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
7759
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
7760
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
7761
|
+
* governing permissions and limitations under the License.
|
|
7762
|
+
*/
|
|
7763
|
+
|
|
7764
|
+
|
|
7765
|
+
|
|
7766
|
+
|
|
7767
|
+
|
|
7768
|
+
function $8ac8429251c45e4b$export$dbc0f175b25fb0fb(props, state, ref) {
|
|
7769
|
+
let { overlayProps: overlayProps, underlayProps: underlayProps } = ($a11501f3d1d39e6c$export$ea8f71083e90600f)({
|
|
7770
|
+
...props,
|
|
7771
|
+
isOpen: state.isOpen,
|
|
7772
|
+
onClose: state.close
|
|
7773
|
+
}, ref);
|
|
7774
|
+
($49c51c25361d4cd2$export$ee0f7cc6afcd1c18)({
|
|
7775
|
+
isDisabled: !state.isOpen
|
|
7776
|
+
});
|
|
7777
|
+
($337b884510726a0d$export$14c98a7594375490)();
|
|
7778
|
+
($dbSRa$react.useEffect)(()=>{
|
|
7779
|
+
if (state.isOpen) return ($5e3802645cc19319$export$1c3ebcada18427bf)([
|
|
7780
|
+
ref.current
|
|
7781
|
+
]);
|
|
7782
|
+
}, [
|
|
7783
|
+
state.isOpen,
|
|
7784
|
+
ref
|
|
7785
|
+
]);
|
|
7786
|
+
return {
|
|
7787
|
+
modalProps: ($3ef42575df84b30b$export$9d1611c77c2fe928)(overlayProps),
|
|
7788
|
+
underlayProps: underlayProps
|
|
7789
|
+
};
|
|
7790
|
+
}
|
|
7661
7791
|
|
|
7662
7792
|
/*
|
|
7663
7793
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -9465,6 +9595,76 @@ function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
|
|
|
9465
9595
|
};
|
|
9466
9596
|
}
|
|
9467
9597
|
|
|
9598
|
+
/*
|
|
9599
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
9600
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
9601
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
9602
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
9603
|
+
*
|
|
9604
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
9605
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9606
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
9607
|
+
* governing permissions and limitations under the License.
|
|
9608
|
+
*/
|
|
9609
|
+
|
|
9610
|
+
|
|
9611
|
+
|
|
9612
|
+
function $40df3f8667284809$export$d55e7ee900f34e93(props, ref) {
|
|
9613
|
+
let { role: role = 'dialog' } = props;
|
|
9614
|
+
let titleId = ($bdb11010cef70236$export$b4cc09c592e8fdb8)();
|
|
9615
|
+
titleId = props['aria-label'] ? undefined : titleId;
|
|
9616
|
+
let isRefocusing = ($dbSRa$react.useRef)(false);
|
|
9617
|
+
// Focus the dialog itself on mount, unless a child element is already focused.
|
|
9618
|
+
($dbSRa$react.useEffect)(()=>{
|
|
9619
|
+
if (ref.current && !ref.current.contains(document.activeElement)) {
|
|
9620
|
+
($6a99195332edec8b$export$80f3e147d781571c)(ref.current);
|
|
9621
|
+
// Safari on iOS does not move the VoiceOver cursor to the dialog
|
|
9622
|
+
// or announce that it has opened until it has rendered. A workaround
|
|
9623
|
+
// is to wait for half a second, then blur and re-focus the dialog.
|
|
9624
|
+
let timeout = setTimeout(()=>{
|
|
9625
|
+
if (document.activeElement === ref.current) {
|
|
9626
|
+
isRefocusing.current = true;
|
|
9627
|
+
if (ref.current) {
|
|
9628
|
+
ref.current.blur();
|
|
9629
|
+
($6a99195332edec8b$export$80f3e147d781571c)(ref.current);
|
|
9630
|
+
}
|
|
9631
|
+
isRefocusing.current = false;
|
|
9632
|
+
}
|
|
9633
|
+
}, 500);
|
|
9634
|
+
return ()=>{
|
|
9635
|
+
clearTimeout(timeout);
|
|
9636
|
+
};
|
|
9637
|
+
}
|
|
9638
|
+
}, [
|
|
9639
|
+
ref
|
|
9640
|
+
]);
|
|
9641
|
+
($337b884510726a0d$export$14c98a7594375490)();
|
|
9642
|
+
// We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
|
|
9643
|
+
// on mount when inside an iframe, no matter which element we programmatically focus.
|
|
9644
|
+
// See https://bugs.webkit.org/show_bug.cgi?id=211934.
|
|
9645
|
+
// useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
|
|
9646
|
+
// even without aria-modal on the dialog itself.
|
|
9647
|
+
return {
|
|
9648
|
+
dialogProps: {
|
|
9649
|
+
...($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props, {
|
|
9650
|
+
labelable: true
|
|
9651
|
+
}),
|
|
9652
|
+
role: role,
|
|
9653
|
+
tabIndex: -1,
|
|
9654
|
+
'aria-labelledby': props['aria-labelledby'] || titleId,
|
|
9655
|
+
// Prevent blur events from reaching useOverlay, which may cause
|
|
9656
|
+
// popovers to close. Since focus is contained within the dialog,
|
|
9657
|
+
// we don't want this to occur due to the above useEffect.
|
|
9658
|
+
onBlur: (e)=>{
|
|
9659
|
+
if (isRefocusing.current) e.stopPropagation();
|
|
9660
|
+
}
|
|
9661
|
+
},
|
|
9662
|
+
titleProps: {
|
|
9663
|
+
id: titleId
|
|
9664
|
+
}
|
|
9665
|
+
};
|
|
9666
|
+
}
|
|
9667
|
+
|
|
9468
9668
|
/*
|
|
9469
9669
|
* Copyright 2020 Adobe. All rights reserved.
|
|
9470
9670
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -13807,7 +14007,250 @@ function $07b14b47974efb58$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
13807
14007
|
})));
|
|
13808
14008
|
}
|
|
13809
14009
|
|
|
14010
|
+
/*
|
|
14011
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
14012
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
14013
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
14014
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
14015
|
+
*
|
|
14016
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
14017
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
14018
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
14019
|
+
* governing permissions and limitations under the License.
|
|
14020
|
+
*/
|
|
14021
|
+
|
|
14022
|
+
|
|
14023
|
+
|
|
14024
|
+
|
|
14025
|
+
|
|
14026
|
+
|
|
14027
|
+
|
|
14028
|
+
const $de32f1b87079253c$export$8b93a07348a7730c = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
13810
14029
|
const $de32f1b87079253c$export$d2f961adcb0afbe = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
14030
|
+
function $de32f1b87079253c$export$2e1e1122cf0cba88(props) {
|
|
14031
|
+
let state = ($fc909762b330b746$export$61c6a8c84e605fb6)(props);
|
|
14032
|
+
let buttonRef = ($dbSRa$react.useRef)(null);
|
|
14033
|
+
let { triggerProps: triggerProps, overlayProps: overlayProps } = ($628037886ba31236$export$f9d5c8beee7d008d)({
|
|
14034
|
+
type: 'dialog'
|
|
14035
|
+
}, state, buttonRef);
|
|
14036
|
+
// Label dialog by the trigger as a fallback if there is no title slot.
|
|
14037
|
+
// This is done in RAC instead of hooks because otherwise we cannot distinguish
|
|
14038
|
+
// between context and props. Normally aria-labelledby overrides the title
|
|
14039
|
+
// but when sent by context we want the title to win.
|
|
14040
|
+
triggerProps.id = ($bdb11010cef70236$export$f680877a34711e37)();
|
|
14041
|
+
overlayProps['aria-labelledby'] = triggerProps.id;
|
|
14042
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement(($64fa3d84918910a7$export$2881499e37b75b9a), {
|
|
14043
|
+
values: [
|
|
14044
|
+
[
|
|
14045
|
+
$de32f1b87079253c$export$d2f961adcb0afbe,
|
|
14046
|
+
state
|
|
14047
|
+
],
|
|
14048
|
+
[
|
|
14049
|
+
$de32f1b87079253c$export$8b93a07348a7730c,
|
|
14050
|
+
overlayProps
|
|
14051
|
+
],
|
|
14052
|
+
[
|
|
14053
|
+
($07b14b47974efb58$export$9b9a0cd73afb7ca4),
|
|
14054
|
+
{
|
|
14055
|
+
trigger: 'DialogTrigger',
|
|
14056
|
+
triggerRef: buttonRef
|
|
14057
|
+
}
|
|
14058
|
+
]
|
|
14059
|
+
]
|
|
14060
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement(($f1ab8c75478c6f73$export$3351871ee4b288b8), {
|
|
14061
|
+
...triggerProps,
|
|
14062
|
+
ref: buttonRef,
|
|
14063
|
+
isPressed: state.isOpen
|
|
14064
|
+
}, props.children));
|
|
14065
|
+
}
|
|
14066
|
+
function $de32f1b87079253c$var$Dialog(props, ref) {
|
|
14067
|
+
let originalAriaLabelledby = props['aria-labelledby'];
|
|
14068
|
+
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $de32f1b87079253c$export$8b93a07348a7730c);
|
|
14069
|
+
let { dialogProps: dialogProps, titleProps: titleProps } = ($40df3f8667284809$export$d55e7ee900f34e93)({
|
|
14070
|
+
...props,
|
|
14071
|
+
// Only pass aria-labelledby from props, not context.
|
|
14072
|
+
// Context is used as a fallback below.
|
|
14073
|
+
'aria-labelledby': originalAriaLabelledby
|
|
14074
|
+
}, ref);
|
|
14075
|
+
let state = ($dbSRa$react.useContext)($de32f1b87079253c$export$d2f961adcb0afbe);
|
|
14076
|
+
let children = props.children;
|
|
14077
|
+
if (typeof children === 'function') children = children({
|
|
14078
|
+
close: (state === null || state === void 0 ? void 0 : state.close) || (()=>{})
|
|
14079
|
+
});
|
|
14080
|
+
if (!dialogProps['aria-label'] && !dialogProps['aria-labelledby']) {
|
|
14081
|
+
// If aria-labelledby exists on props, we know it came from context.
|
|
14082
|
+
// Use that as a fallback in case there is no title slot.
|
|
14083
|
+
if (props['aria-labelledby']) dialogProps['aria-labelledby'] = props['aria-labelledby'];
|
|
14084
|
+
else console.warn('If a Dialog does not contain a <Heading slot="title">, it must have an aria-label or aria-labelledby attribute for accessibility.');
|
|
14085
|
+
}
|
|
14086
|
+
var _props_className;
|
|
14087
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement("section", {
|
|
14088
|
+
...($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props),
|
|
14089
|
+
...dialogProps,
|
|
14090
|
+
ref: ref,
|
|
14091
|
+
slot: props.slot || undefined,
|
|
14092
|
+
style: props.style,
|
|
14093
|
+
className: (_props_className = props.className) !== null && _props_className !== void 0 ? _props_className : 'react-aria-Dialog'
|
|
14094
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement(($64fa3d84918910a7$export$2881499e37b75b9a), {
|
|
14095
|
+
values: [
|
|
14096
|
+
[
|
|
14097
|
+
($4e85f108e88277b8$export$d688439359537581),
|
|
14098
|
+
{
|
|
14099
|
+
slots: {
|
|
14100
|
+
[($64fa3d84918910a7$export$c62b8e45d58ddad9)]: {},
|
|
14101
|
+
title: {
|
|
14102
|
+
...titleProps,
|
|
14103
|
+
level: 2
|
|
14104
|
+
}
|
|
14105
|
+
}
|
|
14106
|
+
}
|
|
14107
|
+
]
|
|
14108
|
+
]
|
|
14109
|
+
}, children));
|
|
14110
|
+
}
|
|
14111
|
+
/**
|
|
14112
|
+
* A dialog is an overlay shown above other content in an application.
|
|
14113
|
+
*/ const $de32f1b87079253c$export$3ddf2d174ce01153 = /*#__PURE__*/ ($dbSRa$react.forwardRef)($de32f1b87079253c$var$Dialog);
|
|
14114
|
+
|
|
14115
|
+
/*
|
|
14116
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
14117
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
14118
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
14119
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
14120
|
+
*
|
|
14121
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
14122
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
14123
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
14124
|
+
* governing permissions and limitations under the License.
|
|
14125
|
+
*/
|
|
14126
|
+
|
|
14127
|
+
|
|
14128
|
+
|
|
14129
|
+
|
|
14130
|
+
|
|
14131
|
+
const $f3f84453ead64de5$export$ab57792b9b6974a6 = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
14132
|
+
const $f3f84453ead64de5$var$InternalModalContext = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
14133
|
+
function $f3f84453ead64de5$var$Modal(props, ref) {
|
|
14134
|
+
let ctx = ($dbSRa$react.useContext)($f3f84453ead64de5$var$InternalModalContext);
|
|
14135
|
+
if (ctx) return /*#__PURE__*/ ($dbSRa$react).createElement($f3f84453ead64de5$var$ModalContent, {
|
|
14136
|
+
...props,
|
|
14137
|
+
modalRef: ref
|
|
14138
|
+
}, props.children);
|
|
14139
|
+
let { isDismissable: isDismissable, isKeyboardDismissDisabled: isKeyboardDismissDisabled, isOpen: isOpen, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: children, isEntering: isEntering, isExiting: isExiting, UNSTABLE_portalContainer: UNSTABLE_portalContainer, shouldCloseOnInteractOutside: shouldCloseOnInteractOutside, ...otherProps } = props;
|
|
14140
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement($f3f84453ead64de5$export$8948f78d83984c69, {
|
|
14141
|
+
isDismissable: isDismissable,
|
|
14142
|
+
isKeyboardDismissDisabled: isKeyboardDismissDisabled,
|
|
14143
|
+
isOpen: isOpen,
|
|
14144
|
+
defaultOpen: defaultOpen,
|
|
14145
|
+
onOpenChange: onOpenChange,
|
|
14146
|
+
isEntering: isEntering,
|
|
14147
|
+
isExiting: isExiting,
|
|
14148
|
+
UNSTABLE_portalContainer: UNSTABLE_portalContainer,
|
|
14149
|
+
shouldCloseOnInteractOutside: shouldCloseOnInteractOutside
|
|
14150
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement($f3f84453ead64de5$var$ModalContent, {
|
|
14151
|
+
...otherProps,
|
|
14152
|
+
modalRef: ref
|
|
14153
|
+
}, children));
|
|
14154
|
+
}
|
|
14155
|
+
/**
|
|
14156
|
+
* A modal is an overlay element which blocks interaction with elements outside it.
|
|
14157
|
+
*/ const $f3f84453ead64de5$export$2b77a92f1a5ad772 = /*#__PURE__*/ ($dbSRa$react.forwardRef)($f3f84453ead64de5$var$Modal);
|
|
14158
|
+
function $f3f84453ead64de5$var$ModalOverlayWithForwardRef(props, ref) {
|
|
14159
|
+
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $f3f84453ead64de5$export$ab57792b9b6974a6);
|
|
14160
|
+
let contextState = ($dbSRa$react.useContext)(($de32f1b87079253c$export$d2f961adcb0afbe));
|
|
14161
|
+
let localState = ($fc909762b330b746$export$61c6a8c84e605fb6)(props);
|
|
14162
|
+
let state = props.isOpen != null || props.defaultOpen != null || !contextState ? localState : contextState;
|
|
14163
|
+
let objectRef = ($df56164dff5785e2$export$4338b53315abf666)(ref);
|
|
14164
|
+
let modalRef = ($dbSRa$react.useRef)(null);
|
|
14165
|
+
let isOverlayExiting = ($64fa3d84918910a7$export$45fda7c47f93fd48)(objectRef, state.isOpen);
|
|
14166
|
+
let isModalExiting = ($64fa3d84918910a7$export$45fda7c47f93fd48)(modalRef, state.isOpen);
|
|
14167
|
+
let isExiting = isOverlayExiting || isModalExiting || props.isExiting || false;
|
|
14168
|
+
let isSSR = ($b5e257d569688ac6$export$535bd6ca7f90a273)();
|
|
14169
|
+
if (!state.isOpen && !isExiting || isSSR) return null;
|
|
14170
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement($f3f84453ead64de5$var$ModalOverlayInner, {
|
|
14171
|
+
...props,
|
|
14172
|
+
state: state,
|
|
14173
|
+
isExiting: isExiting,
|
|
14174
|
+
overlayRef: objectRef,
|
|
14175
|
+
modalRef: modalRef
|
|
14176
|
+
});
|
|
14177
|
+
}
|
|
14178
|
+
const $f3f84453ead64de5$export$8948f78d83984c69 = /*#__PURE__*/ ($dbSRa$react.forwardRef)($f3f84453ead64de5$var$ModalOverlayWithForwardRef);
|
|
14179
|
+
function $f3f84453ead64de5$var$ModalOverlayInner({ UNSTABLE_portalContainer: UNSTABLE_portalContainer, ...props }) {
|
|
14180
|
+
let modalRef = props.modalRef;
|
|
14181
|
+
let { state: state } = props;
|
|
14182
|
+
let { modalProps: modalProps, underlayProps: underlayProps } = ($8ac8429251c45e4b$export$dbc0f175b25fb0fb)(props, state, modalRef);
|
|
14183
|
+
let entering = ($64fa3d84918910a7$export$6d3443f2c48bfc20)(props.overlayRef) || props.isEntering || false;
|
|
14184
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
14185
|
+
...props,
|
|
14186
|
+
defaultClassName: 'react-aria-ModalOverlay',
|
|
14187
|
+
values: {
|
|
14188
|
+
isEntering: entering,
|
|
14189
|
+
isExiting: props.isExiting,
|
|
14190
|
+
state: state
|
|
14191
|
+
}
|
|
14192
|
+
});
|
|
14193
|
+
let viewport = ($5df64b3807dc15ee$export$d699905dd57c73ca)();
|
|
14194
|
+
let style = {
|
|
14195
|
+
...renderProps.style,
|
|
14196
|
+
'--visual-viewport-height': viewport.height + 'px'
|
|
14197
|
+
};
|
|
14198
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement(($337b884510726a0d$export$c6fdb837b070b4ff), {
|
|
14199
|
+
isExiting: props.isExiting,
|
|
14200
|
+
portalContainer: UNSTABLE_portalContainer
|
|
14201
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
14202
|
+
...($3ef42575df84b30b$export$9d1611c77c2fe928)(($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props), underlayProps),
|
|
14203
|
+
...renderProps,
|
|
14204
|
+
style: style,
|
|
14205
|
+
ref: props.overlayRef,
|
|
14206
|
+
"data-entering": entering || undefined,
|
|
14207
|
+
"data-exiting": props.isExiting || undefined
|
|
14208
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement(($64fa3d84918910a7$export$2881499e37b75b9a), {
|
|
14209
|
+
values: [
|
|
14210
|
+
[
|
|
14211
|
+
$f3f84453ead64de5$var$InternalModalContext,
|
|
14212
|
+
{
|
|
14213
|
+
modalProps: modalProps,
|
|
14214
|
+
modalRef: modalRef,
|
|
14215
|
+
isExiting: props.isExiting,
|
|
14216
|
+
isDismissable: props.isDismissable
|
|
14217
|
+
}
|
|
14218
|
+
],
|
|
14219
|
+
[
|
|
14220
|
+
($de32f1b87079253c$export$d2f961adcb0afbe),
|
|
14221
|
+
state
|
|
14222
|
+
]
|
|
14223
|
+
]
|
|
14224
|
+
}, renderProps.children)));
|
|
14225
|
+
}
|
|
14226
|
+
function $f3f84453ead64de5$var$ModalContent(props) {
|
|
14227
|
+
let { modalProps: modalProps, modalRef: modalRef, isExiting: isExiting, isDismissable: isDismissable } = ($dbSRa$react.useContext)($f3f84453ead64de5$var$InternalModalContext);
|
|
14228
|
+
let state = ($dbSRa$react.useContext)(($de32f1b87079253c$export$d2f961adcb0afbe));
|
|
14229
|
+
let mergedRefs = ($dbSRa$react.useMemo)(()=>($5dc95899b306f630$export$c9058316764c140e)(props.modalRef, modalRef), [
|
|
14230
|
+
props.modalRef,
|
|
14231
|
+
modalRef
|
|
14232
|
+
]);
|
|
14233
|
+
let ref = ($df56164dff5785e2$export$4338b53315abf666)(mergedRefs);
|
|
14234
|
+
let entering = ($64fa3d84918910a7$export$6d3443f2c48bfc20)(ref);
|
|
14235
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
14236
|
+
...props,
|
|
14237
|
+
defaultClassName: 'react-aria-Modal',
|
|
14238
|
+
values: {
|
|
14239
|
+
isEntering: entering,
|
|
14240
|
+
isExiting: isExiting,
|
|
14241
|
+
state: state
|
|
14242
|
+
}
|
|
14243
|
+
});
|
|
14244
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
14245
|
+
...($3ef42575df84b30b$export$9d1611c77c2fe928)(($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props), modalProps),
|
|
14246
|
+
...renderProps,
|
|
14247
|
+
ref: ref,
|
|
14248
|
+
"data-entering": entering || undefined,
|
|
14249
|
+
"data-exiting": isExiting || undefined
|
|
14250
|
+
}, isDismissable && /*#__PURE__*/ ($dbSRa$react).createElement(($86ea4cb521eb2e37$export$2317d149ed6f78c4), {
|
|
14251
|
+
onDismiss: state.close
|
|
14252
|
+
}), renderProps.children);
|
|
14253
|
+
}
|
|
13811
14254
|
|
|
13812
14255
|
/*
|
|
13813
14256
|
* Copyright 2022 Adobe. All rights reserved.
|
|
@@ -14747,15 +15190,15 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
|
|
|
14747
15190
|
}, renderProps.children));
|
|
14748
15191
|
}
|
|
14749
15192
|
|
|
14750
|
-
var css_248z$
|
|
14751
|
-
styleInject(css_248z$
|
|
15193
|
+
var css_248z$j = ".bcds-react-aria-Button {\n border: none;\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: var(--layout-padding-small);\n font: var(--typography-regular-body);\n padding-left: 16px;\n padding-right: 16px;\n}\n.bcds-react-aria-Button[data-disabled] {\n cursor: not-allowed;\n}\n.bcds-react-aria-Button[data-focused] {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Icon button */\n.bcds-react-aria-Button.icon {\n align-items: center;\n justify-content: space-around;\n}\n\n/* Sizes */\n.bcds-react-aria-Button.small {\n min-height: 32px;\n}\n.bcds-react-aria-Button.small.icon {\n padding: unset;\n height: 32px;\n width: 32px;\n min-width: 32px;\n}\n.bcds-react-aria-Button.medium {\n min-height: 40px;\n}\n.bcds-react-aria-Button.medium.icon {\n padding: unset;\n height: 40px;\n width: 40px;\n min-width: 40px;\n}\n\n/* Variant - Primary */\n.bcds-react-aria-Button.primary {\n background: var(--surface-color-primary-button-default);\n color: var(--icons-color-primary-invert);\n}\n.bcds-react-aria-Button.primary.danger {\n background-color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.primary[data-disabled] {\n background-color: var(--surface-color-primary-danger-button-disabled);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.primary[data-hovered] {\n background-color: var(--surface-color-primary-button-hover);\n}\n.bcds-react-aria-Button.primary.danger[data-hovered] {\n background-color: var(--surface-color-primary-danger-button-hover);\n}\n\n/* Variant - Secondary */\n.bcds-react-aria-Button.secondary {\n background-color: var(--surface-color-secondary-button-default);\n border: 1px solid var(--surface-color-border-dark);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.secondary.danger {\n border-color: var(--support-border-color-danger);\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.secondary[data-disabled] {\n background-color: var(--surface-color-secondary-button-disabled);\n border-color: var(--surface-color-border-default);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.secondary[data-hovered] {\n background-color: var(--surface-color-secondary-button-hover);\n}\n.bcds-react-aria-Button.secondary.danger[data-hovered] {\n background-color: var(--support-surface-color-danger);\n}\n\n/* Variant - Tertiary */\n.bcds-react-aria-Button.tertiary {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.tertiary.danger {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.tertiary[data-disabled] {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.tertiary[data-hovered] {\n background-color: var(--surface-color-tertiary-button-hover);\n}\n.bcds-react-aria-Button.tertiary.danger[data-hovered] {\n background-color: var(--support-surface-color-danger);\n}\n\n/* Variant - Link */\n.bcds-react-aria-Button.link {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-link);\n text-decoration: underline;\n text-underline-offset: 0.3em;\n}\n.bcds-react-aria-Button.link.danger {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.link[data-disabled] {\n color: var(--typography-color-disabled);\n}\n";
|
|
15194
|
+
styleInject(css_248z$j);
|
|
14752
15195
|
|
|
14753
15196
|
function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
|
|
14754
15197
|
return (jsxRuntime.jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `bcds-react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
|
|
14755
15198
|
}
|
|
14756
15199
|
|
|
14757
|
-
var css_248z$
|
|
14758
|
-
styleInject(css_248z$
|
|
15200
|
+
var css_248z$i = ".bcds-ButtonGroup {\n display: flex;\n gap: var(--layout-margin-small);\n flex-grow: 1;\n}\n\n.bcds-ButtonGroup.horizontal {\n flex-direction: row;\n}\n\n.bcds-ButtonGroup.vertical {\n flex-direction: column;\n}\n\n.bcds-ButtonGroup.start {\n justify-content: flex-start;\n}\n\n.bcds-ButtonGroup.center {\n justify-content: center;\n}\n\n.bcds-ButtonGroup.end {\n justify-content: flex-end;\n}\n";
|
|
15201
|
+
styleInject(css_248z$i);
|
|
14759
15202
|
|
|
14760
15203
|
function ButtonGroup({ orientation = "horizontal", alignment = "start", ariaLabel, children, ...props }) {
|
|
14761
15204
|
return (jsxRuntime.jsx("div", { className: `bcds-ButtonGroup ${orientation} ${alignment}`, role: "group", "aria-label": ariaLabel, ...props, children: children }));
|
|
@@ -14782,25 +15225,28 @@ function SvgInfoIcon({ id = "information-icon" }) {
|
|
|
14782
15225
|
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M9.99999 2C14.4062 2 18 5.59375 18 10C18 14.4375 14.4062 18 9.99999 18C5.56249 18 1.99998 14.4375 1.99998 10C1.99998 5.59375 5.56249 2 9.99999 2ZM9.99999 16.5C13.5625 16.5 16.5 13.5938 16.5 10C16.5 6.4375 13.5625 3.5 9.99999 3.5C6.40624 3.5 3.49999 6.4375 3.49999 10C3.49999 13.5938 6.40624 16.5 9.99999 16.5ZM11.25 12.5C11.6562 12.5 12 12.8438 12 13.25C12 13.6875 11.6562 14 11.25 14H8.74999C8.31249 14 7.99999 13.6875 7.99999 13.25C7.99999 12.8438 8.31249 12.5 8.74999 12.5H9.24999V10.5H8.99999C8.56249 10.5 8.24999 10.1875 8.24999 9.75C8.24999 9.34375 8.56249 9 8.99999 9H9.99999C10.4062 9 10.75 9.34375 10.75 9.75V12.5H11.25ZM9.99999 8C9.43749 8 8.99999 7.5625 8.99999 7C8.99999 6.46875 9.43749 6 9.99999 6C10.5312 6 11 6.46875 11 7C11 7.5625 10.5312 8 9.99999 8Z", fill: "currentColor" }) }) }));
|
|
14783
15226
|
}
|
|
14784
15227
|
|
|
14785
|
-
var css_248z$
|
|
14786
|
-
styleInject(css_248z$
|
|
15228
|
+
var css_248z$h = ".bcds-react-aria-AlertDialog {\n display: flex;\n flex-direction: column;\n}\n\n/* Variant icons */\n.bcds-react-aria-AlertDialog.info .bcds-react-aria-AlertDialog--Icon {\n color: var(--icons-color-primary);\n}\n.bcds-react-aria-AlertDialog.confirmation .bcds-react-aria-AlertDialog--Icon {\n color: var(--icons-color-success);\n}\n.bcds-react-aria-AlertDialog.warning .bcds-react-aria-AlertDialog--Icon {\n color: var(--icons-color-warning);\n}\n.bcds-react-aria-AlertDialog.error .bcds-react-aria-AlertDialog--Icon {\n color: var(--icons-color-danger);\n}\n.bcds-react-aria-AlertDialog.destructive .bcds-react-aria-AlertDialog--Icon {\n color: var(--icons-color-danger);\n}\n\n.bcds-react-aria-AlertDialog--Header {\n display: inline-flex;\n flex-direction: row;\n gap: var(--layout-padding-small);\n justify-content: space-between;\n padding: var(--layout-padding-medium) var(--layout-padding-large);\n border-bottom: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog--Title {\n flex-grow: 1;\n font: var(--typography-bold-h5);\n color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--Icon {\n justify-self: flex-start;\n align-self: center;\n padding-top: var(--layout-padding-xsmall);\n}\n\n.bcds-react-aria-AlertDialog--closeIcon {\n justify-self: flex-end;\n color: var(--icons-color-primary);\n}\n\n.bcds-react-aria-AlertDialog--children {\n font: var(--typography-regular-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-medium) var(--layout-padding-large);\n border-bottom: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n}\n\n.bcds-react-aria-AlertDialog > .bcds-ButtonGroup {\n padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n";
|
|
15229
|
+
styleInject(css_248z$h);
|
|
14787
15230
|
|
|
14788
|
-
|
|
15231
|
+
/* Sets correct left icon for selected variant */
|
|
15232
|
+
function getIcon$1(variant) {
|
|
14789
15233
|
switch (variant) {
|
|
14790
15234
|
case "info":
|
|
14791
15235
|
return jsxRuntime.jsx(SvgInfoIcon, {});
|
|
14792
|
-
case "
|
|
15236
|
+
case "confirmation":
|
|
14793
15237
|
return jsxRuntime.jsx(SvgCheckCircleIcon, {});
|
|
14794
15238
|
case "warning":
|
|
14795
15239
|
return jsxRuntime.jsx(SvgExclamationIcon, {});
|
|
14796
|
-
case "
|
|
15240
|
+
case "error":
|
|
15241
|
+
return jsxRuntime.jsx(SvgExclamationCircleIcon, {});
|
|
15242
|
+
case "destructive":
|
|
14797
15243
|
return jsxRuntime.jsx(SvgExclamationCircleIcon, {});
|
|
14798
15244
|
default:
|
|
14799
15245
|
return;
|
|
14800
15246
|
}
|
|
14801
15247
|
}
|
|
14802
|
-
function
|
|
14803
|
-
return (jsxRuntime.
|
|
15248
|
+
function AlertDialog({ children, variant = "info", role = "dialog", title, isCloseable = true, isIconHidden = false, buttons, ...props }) {
|
|
15249
|
+
return (jsxRuntime.jsx($de32f1b87079253c$export$3ddf2d174ce01153, { className: `bcds-react-aria-AlertDialog ${variant}`, role: role, ...props, children: ({ close }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "bcds-react-aria-AlertDialog--Header", children: [!isIconHidden && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--Icon", children: getIcon$1(variant) })), title && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--Title", slot: "title", children: title })), isCloseable && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close", type: "button", onPress: close, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }), children && (jsxRuntime.jsx("div", { className: "bcds-react-aria-AlertDialog--children", slot: "children", children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) })), buttons && (jsxRuntime.jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }));
|
|
14804
15250
|
}
|
|
14805
15251
|
|
|
14806
15252
|
function SvgCheckIcon({ id = "check-icon" }) {
|
|
@@ -14811,61 +15257,34 @@ function SvgDashIcon({ id = "dash-icon" }) {
|
|
|
14811
15257
|
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" }) }));
|
|
14812
15258
|
}
|
|
14813
15259
|
|
|
14814
|
-
var css_248z$
|
|
14815
|
-
styleInject(css_248z$
|
|
15260
|
+
var css_248z$g = ".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-focused] > .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";
|
|
15261
|
+
styleInject(css_248z$g);
|
|
14816
15262
|
|
|
14817
15263
|
function Checkbox({ value, children, ...props }) {
|
|
14818
15264
|
return (jsxRuntime.jsx($bc237834342dbd75$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, {})] }), jsxRuntime.jsxs("span", { className: "label", children: [jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), " ", isRequired && "(required)"] })] })) }));
|
|
14819
15265
|
}
|
|
14820
15266
|
|
|
14821
|
-
var css_248z$
|
|
14822
|
-
styleInject(css_248z$
|
|
15267
|
+
var css_248z$f = ".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";
|
|
15268
|
+
styleInject(css_248z$f);
|
|
14823
15269
|
|
|
14824
15270
|
function CheckboxGroup({ orientation = "vertical", label, description, errorMessage, flexWrap = "nowrap", children, ...props }) {
|
|
14825
15271
|
return (jsxRuntime.jsx($bc237834342dbd75$export$4aa08d5625cb8ead, { className: `bcds-react-aria-CheckboxGroup`, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($01b77f81d0f07f68$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($514c0188e459b4c0$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($ee014567cb39d3f0$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
14826
15272
|
}
|
|
14827
15273
|
|
|
15274
|
+
var css_248z$e = ".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";
|
|
15275
|
+
styleInject(css_248z$e);
|
|
15276
|
+
|
|
15277
|
+
function Dialog({ isCloseable = true, role = "dialog", children, ...props }) {
|
|
15278
|
+
return (jsxRuntime.jsx($de32f1b87079253c$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 })] }) })) }));
|
|
15279
|
+
}
|
|
15280
|
+
|
|
14828
15281
|
// This logo is available as a plain SVG at src/assets/BCID_H_rgb_pos.svg
|
|
14829
15282
|
function SvgBcLogo({ id = "bcgov-logo" }) {
|
|
14830
15283
|
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", style: { fill: "#fff", strokeWidth: "0px" } }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "415.4", y: "252.98", width: "314.66", height: "3.82", style: { fill: "#e3a82b", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } })] }), jsxRuntime.jsx("rect", { width: "847.65", height: "327.01", style: { fill: "none", strokeWidth: "0px" } })] }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("polygon", { points: "295.89 176.17 301.27 178.4 313.19 170.08 295.89 176.17", style: { fill: "#e3a82b", strokeWidth: "0px" } }), 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", style: { fill: "#e3a82b", strokeWidth: "0px" } })] }), 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", style: { fill: "#234075", strokeWidth: "0px" } })] })] }));
|
|
14831
15284
|
}
|
|
14832
15285
|
|
|
14833
|
-
var css_248z$
|
|
14834
|
-
styleInject(css_248z$
|
|
14835
|
-
|
|
14836
|
-
function Header({ children, logoLinkElement, logoImage = jsxRuntime.jsx(SvgBcLogo, { id: "bcgov-logo-header" }), skipLinks, title = "", titleElement = "span", }) {
|
|
14837
|
-
function getLogo() {
|
|
14838
|
-
if (!logoLinkElement)
|
|
14839
|
-
return (jsxRuntime.jsx("a", { href: "/", title: "Government of British Columbia", children: logoImage }));
|
|
14840
|
-
return $dbSRa$react.cloneElement(logoLinkElement, { children: logoImage });
|
|
14841
|
-
}
|
|
14842
|
-
function getTitle() {
|
|
14843
|
-
switch (titleElement) {
|
|
14844
|
-
case "h1":
|
|
14845
|
-
return jsxRuntime.jsx("h1", { className: "bcds-header--title", children: title });
|
|
14846
|
-
case "h2":
|
|
14847
|
-
return jsxRuntime.jsx("h2", { className: "bcds-header--title", children: title });
|
|
14848
|
-
case "h3":
|
|
14849
|
-
return jsxRuntime.jsx("h3", { className: "bcds-header--title", children: title });
|
|
14850
|
-
case "h4":
|
|
14851
|
-
return jsxRuntime.jsx("h4", { className: "bcds-header--title", children: title });
|
|
14852
|
-
case "h5":
|
|
14853
|
-
return jsxRuntime.jsx("h5", { className: "bcds-header--title", children: title });
|
|
14854
|
-
case "h6":
|
|
14855
|
-
return jsxRuntime.jsx("h6", { className: "bcds-header--title", children: title });
|
|
14856
|
-
case "p":
|
|
14857
|
-
return jsxRuntime.jsx("p", { className: "bcds-header--title", children: title });
|
|
14858
|
-
default:
|
|
14859
|
-
return jsxRuntime.jsx("span", { className: "bcds-header--title", children: title });
|
|
14860
|
-
}
|
|
14861
|
-
}
|
|
14862
|
-
return (jsxRuntime.jsx("header", { className: "bcds-header", children: jsxRuntime.jsxs("div", { className: "bcds-header--container", children: [getLogo(), skipLinks && (jsxRuntime.jsx("ul", { className: "bcds-header--skiplinks", children: skipLinks.map((link, index) => {
|
|
14863
|
-
return jsxRuntime.jsx("li", { children: link }, `skiplink-${index}`);
|
|
14864
|
-
}) })), title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "bcds-header--line" }), getTitle()] })), children] }) }));
|
|
14865
|
-
}
|
|
14866
|
-
|
|
14867
|
-
var css_248z$a = ".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";
|
|
14868
|
-
styleInject(css_248z$a);
|
|
15286
|
+
var css_248z$d = ".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";
|
|
15287
|
+
styleInject(css_248z$d);
|
|
14869
15288
|
|
|
14870
15289
|
/**
|
|
14871
15290
|
* A titled list of links for use in the Footer. Rendered inside a `<figure>`
|
|
@@ -14919,6 +15338,68 @@ function Form({ ...props }) {
|
|
|
14919
15338
|
return jsxRuntime.jsx($d3e0e05bdfcf66bd$export$a7fed597f4b8afd8, { ...props });
|
|
14920
15339
|
}
|
|
14921
15340
|
|
|
15341
|
+
var css_248z$c = ".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";
|
|
15342
|
+
styleInject(css_248z$c);
|
|
15343
|
+
|
|
15344
|
+
function Header({ children, logoLinkElement, logoImage = jsxRuntime.jsx(SvgBcLogo, { id: "bcgov-logo-header" }), skipLinks, title = "", titleElement = "span", }) {
|
|
15345
|
+
function getLogo() {
|
|
15346
|
+
if (!logoLinkElement)
|
|
15347
|
+
return (jsxRuntime.jsx("a", { href: "/", title: "Government of British Columbia", children: logoImage }));
|
|
15348
|
+
return $dbSRa$react.cloneElement(logoLinkElement, { children: logoImage });
|
|
15349
|
+
}
|
|
15350
|
+
function getTitle() {
|
|
15351
|
+
switch (titleElement) {
|
|
15352
|
+
case "h1":
|
|
15353
|
+
return jsxRuntime.jsx("h1", { className: "bcds-header--title", children: title });
|
|
15354
|
+
case "h2":
|
|
15355
|
+
return jsxRuntime.jsx("h2", { className: "bcds-header--title", children: title });
|
|
15356
|
+
case "h3":
|
|
15357
|
+
return jsxRuntime.jsx("h3", { className: "bcds-header--title", children: title });
|
|
15358
|
+
case "h4":
|
|
15359
|
+
return jsxRuntime.jsx("h4", { className: "bcds-header--title", children: title });
|
|
15360
|
+
case "h5":
|
|
15361
|
+
return jsxRuntime.jsx("h5", { className: "bcds-header--title", children: title });
|
|
15362
|
+
case "h6":
|
|
15363
|
+
return jsxRuntime.jsx("h6", { className: "bcds-header--title", children: title });
|
|
15364
|
+
case "p":
|
|
15365
|
+
return jsxRuntime.jsx("p", { className: "bcds-header--title", children: title });
|
|
15366
|
+
default:
|
|
15367
|
+
return jsxRuntime.jsx("span", { className: "bcds-header--title", children: title });
|
|
15368
|
+
}
|
|
15369
|
+
}
|
|
15370
|
+
return (jsxRuntime.jsx("header", { className: "bcds-header", children: jsxRuntime.jsxs("div", { className: "bcds-header--container", children: [getLogo(), skipLinks && (jsxRuntime.jsx("ul", { className: "bcds-header--skiplinks", children: skipLinks.map((link, index) => {
|
|
15371
|
+
return jsxRuntime.jsx("li", { children: link }, `skiplink-${index}`);
|
|
15372
|
+
}) })), title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "bcds-header--line" }), getTitle()] })), children] }) }));
|
|
15373
|
+
}
|
|
15374
|
+
|
|
15375
|
+
var css_248z$b = ".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(--suport-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";
|
|
15376
|
+
styleInject(css_248z$b);
|
|
15377
|
+
|
|
15378
|
+
function getIcon(variant) {
|
|
15379
|
+
switch (variant) {
|
|
15380
|
+
case "info":
|
|
15381
|
+
return jsxRuntime.jsx(SvgInfoIcon, {});
|
|
15382
|
+
case "success":
|
|
15383
|
+
return jsxRuntime.jsx(SvgCheckCircleIcon, {});
|
|
15384
|
+
case "warning":
|
|
15385
|
+
return jsxRuntime.jsx(SvgExclamationIcon, {});
|
|
15386
|
+
case "danger":
|
|
15387
|
+
return jsxRuntime.jsx(SvgExclamationCircleIcon, {});
|
|
15388
|
+
default:
|
|
15389
|
+
return;
|
|
15390
|
+
}
|
|
15391
|
+
}
|
|
15392
|
+
function InlineAlert({ variant = "info", title, description, isIconHidden = false, isCloseable = false, role = "note", buttons, children, onClose, ...props }) {
|
|
15393
|
+
return (jsxRuntime.jsxs("div", { className: `bcds-Inline-Alert ${variant} ${isCloseable ? "closeable" : null}`, ...props, children: [!isIconHidden && (jsxRuntime.jsx("span", { className: "bcds-Inline-Alert--icon", children: 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, {}) }) }))] }));
|
|
15394
|
+
}
|
|
15395
|
+
|
|
15396
|
+
var css_248z$a = "/* 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";
|
|
15397
|
+
styleInject(css_248z$a);
|
|
15398
|
+
|
|
15399
|
+
function Modal({ children, ...props }) {
|
|
15400
|
+
return (jsxRuntime.jsx($f3f84453ead64de5$export$2b77a92f1a5ad772, { className: "bcds-react-aria-Modal", ...props, children: children }));
|
|
15401
|
+
}
|
|
15402
|
+
|
|
14922
15403
|
var css_248z$9 = ".bcds-react-aria-Radio {\n cursor: pointer;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n forced-color-adjust: none;\n}\n\n/* Selector */\n.bcds-react-aria-Radio:before {\n align-self: first baseline;\n margin-top: var(--layout-margin-xsmall);\n content: \"\";\n display: block;\n width: var(--icons-size-xsmall);\n height: var(--icons-size-xsmall);\n box-sizing: border-box;\n background-color: var(--surface-color-secondary-default);\n border-radius: var(--icons-size-small);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-medium);\n transition: all 200ms;\n}\n@media (prefers-reduced-motion) {\n .bcds-react-aria-Radio:before {\n /* No animation on radio button circle if user has reduced motion set */\n transition: none;\n }\n}\n\n/* Hover */\n.bcds-react-aria-Radio[data-hovered]:before {\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-dark);\n}\n\n/* Pressed */\n.bcds-react-aria-Radio[data-pressed]:before {\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-dark);\n}\n\n/* Selected */\n.bcds-react-aria-Radio[data-selected]:before {\n border: 5px solid var(--surface-color-primary-default);\n}\n\n/* Focused */\n.bcds-react-aria-Radio[data-focus-visible]:before {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Invalid */\n.bcds-react-aria-Radio[data-invalid]:before {\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n}\n.bcds-react-aria-Radio[data-selected][data-invalid] {\n color: var(--typography-color-danger);\n}\n.bcds-react-aria-Radio[data-selected][data-invalid]:before {\n border: 5px solid var(--support-border-color-danger);\n}\n\n/* Disabled */\n.bcds-react-aria-Radio[data-disabled] {\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n.bcds-react-aria-radio[data-selected][data-disabled]:before {\n border: 5px solid var(--surface-color-border-default);\n}\n\n/* Read only */\n.bcds-react-aria-Radio[data-readonly] {\n cursor: not-allowed;\n}\n";
|
|
14923
15404
|
styleInject(css_248z$9);
|
|
14924
15405
|
|
|
@@ -15024,15 +15505,19 @@ function Tooltip(props) {
|
|
|
15024
15505
|
return (jsxRuntime.jsxs($4e3b923658d69c60$export$28c660c63b792dea, { className: "bcds-react-aria-Tooltip", ...props, children: [jsxRuntime.jsx($44f671af83e7d9e0$export$746d02f47f4d381, { className: "bcds-react-aria-OverlayArrow", children: jsxRuntime.jsx(SvgTooltipArrowUp, {}) }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children })] }));
|
|
15025
15506
|
}
|
|
15026
15507
|
|
|
15508
|
+
exports.AlertDialog = AlertDialog;
|
|
15027
15509
|
exports.Button = Button;
|
|
15028
15510
|
exports.ButtonGroup = ButtonGroup;
|
|
15029
15511
|
exports.Checkbox = Checkbox;
|
|
15030
15512
|
exports.CheckboxGroup = CheckboxGroup;
|
|
15513
|
+
exports.Dialog = Dialog;
|
|
15514
|
+
exports.DialogTrigger = $de32f1b87079253c$export$2e1e1122cf0cba88;
|
|
15031
15515
|
exports.Footer = Footer;
|
|
15032
15516
|
exports.FooterLinks = FooterLinks;
|
|
15033
15517
|
exports.Form = Form;
|
|
15034
15518
|
exports.Header = Header;
|
|
15035
15519
|
exports.InlineAlert = InlineAlert;
|
|
15520
|
+
exports.Modal = Modal;
|
|
15036
15521
|
exports.Radio = Radio;
|
|
15037
15522
|
exports.RadioGroup = RadioGroup;
|
|
15038
15523
|
exports.Select = Select;
|