@bcgov/design-system-react-components 0.6.1-pr637 → 0.6.1-pr644
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 +5 -1
- package/dist/cjs/index.cjs +358 -63
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/index.js +355 -64
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +26 -3
- package/package.json +11 -8
package/dist/cjs/index.cjs
CHANGED
|
@@ -31,8 +31,8 @@ function styleInject(css, ref) {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
var css_248z$x = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --surface-opacity-0: 0;\n --surface-opacity-10: 0.1;\n --surface-opacity-20: 0.2;\n --surface-opacity-30: 0.3;\n --surface-opacity-40: 0.4;\n --surface-opacity-50: 0.5;\n --surface-opacity-60: 0.6;\n --surface-opacity-70: 0.7;\n --surface-opacity-80: 0.8;\n --surface-opacity-90: 0.9;\n --surface-opacity-100: 1;\n --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /* Default shadow for most content and UI elements */\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Reduced shadow for secondary UI elements */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Standard shadow for UI elements like cards and buttons */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Larger shadow for emphasis. Use sparingly */\n --surface-color-primary-button-default: #013366; /* Default fill colour for primary buttons */\n --surface-color-primary-button-hover: #1E5189; /* Fill colour used when user hovers over primary button */\n --surface-color-primary-button-disabled: #EDEBE9; /* Fill colour for inactive primary buttons */\n --surface-color-primary-danger-button-default: #CE3E39; /* Default fill colour for buttons in danger/warning state */\n --surface-color-primary-danger-button-hover: #A2312D; /* Fill colour used when user hovers over danger/warning button */\n --surface-color-primary-danger-button-disabled: #EDEBE9; /* Default fill colour for disabled danger/warning button */\n --surface-color-primary-default: #013366; /* Default theme colour for components and layout */\n --surface-color-primary-hover: #1E5189; /* Hover variant of surface.color.primary.default */\n --surface-color-primary-pressed: #01264C; /* Selected/pressed variant of surface.color.primary.default */\n --surface-color-primary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.primary default */\n --surface-color-secondary-button-default: #FFFFFF; /* Fill colour for secondary buttons */\n --surface-color-secondary-button-hover: #EDEBE9; /* Fill colour used when user hovers over secondary button */\n --surface-color-secondary-button-disabled: #EDEBE9; /* Fill colour for inactive secondary buttons */\n --surface-color-secondary-default: #FFFFFF; /* Light theme colour for components and layout */\n --surface-color-secondary-hover: #EDEBE9; /* Hover variant of surface.color.secondary.default */\n --surface-color-secondary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.secondary.default */\n --surface-color-secondary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.secondary default */\n --surface-color-tertiary-button-default: rgba(255,255,255,0); /* Default fill colour for tertiary buttons */\n --surface-color-tertiary-button-hover: #ECEAE8; /* Fill colour used when user hovers over tertiary button */\n --surface-color-tertiary-button-disabled: #EDEBE9; /* Fill colour for inactive tertiary buttons */\n --surface-color-tertiary-default: #FFFFFF00; /* Alternative light theme colour for components and layout */\n --surface-color-tertiary-hover: #ECEAE8; /* Hover variant of surface.color.tertiary.default */\n --surface-color-tertiary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.tertiary.default */\n --surface-color-tertiary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.tertiary default */\n --surface-color-menus-default: #FFFFFF; /* Default fill colour for menu items */\n --surface-color-menus-hover: #EDEBE9; /* Fill colour used when user hovers over a menu item */\n --surface-color-forms-default: #FFFFFF; /* Default fill colour for form/input fields */\n --surface-color-forms-disabled: #EDEBE9; /* Fill colour for inactive/disabled form/input fields */\n --surface-color-background-white: #FFFFFF; /* White background */\n --surface-color-background-light-gray: #FAF9F8; /* Default background colour for layout */\n --surface-color-background-light-blue: #F1F8FE; /* Light blue background */\n --surface-color-background-dark-blue: #053662; /* Dark blue background */\n --surface-color-border-default: #D8D8D8; /* Lighter border colour for UI elements */\n --surface-color-border-medium: #898785; /* Default border colour for UI elements */\n --surface-color-border-dark: #353433; /* Used as a hover colour for form fields and inputs */\n --surface-color-border-active: #2E5DD7; /* Used as the active stroke colour for UI elements */\n --surface-color-overlay-default: rgba(0,0,0,0.45); /* Background overlay colour for images and modal dialogues */\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2; /* Background colour for error, failure or danger messages */\n --support-surface-color-success: #F6FFF8; /* Background colour for success messages */\n --support-surface-color-warning: #FEF1D8; /* Background colour for warning messages */\n --support-border-color-info: #053662; /* Border stroke for general/informational messages */\n --support-border-color-danger: #CE3E39; /* Border stroke for error, failure or danger messages */\n --support-border-color-success: #42814A; /* Border stroke for success messages */\n --support-border-color-warning: #F8BB47; /* Border stroke for warning messages */\n --icons-size-xsmall: 14px; /* Smallest icon size */\n --icons-size-small: 16px;\n --icons-size-medium: 20px; /* Default icon size */\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px; /* Largest icon size */\n --icons-color-primary: #2D2D2D; /* Default colour for icons */\n --icons-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous icons */\n --icons-color-disabled: #9F9D9C; /* Use only for inactive/disabled icons */\n --icons-color-link: #255A90; /* Use for hyperlinked icons */\n --icons-color-info: #053662; /* Emphasis colour for icons in general/informational state */\n --icons-color-danger: #CE3E39; /* Emphasis colour for icons in error, failure or danger state */\n --icons-color-success: #42814A; /* Emphasis colour for icons in success state */\n --icons-color-warning: #F8BB47; /* Emphasis colour for icons in warning state */\n --icons-color-primary-invert: #FFFFFF; /* Default colour for icons on dark backgrounds */\n --layout-border-width-none: 0;\n --layout-border-width-small: 1px;\n --layout-border-width-medium: 2px;\n --layout-border-width-large: 4px;\n --layout-padding-none: 0; /* No padding */\n --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem; /* Default padding value for layout */\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem; /* Largest padding value for layout */\n --layout-margin-none: 0rem; /* No margin */\n --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem; /* Default margin value for layout */\n --layout-margin-medium: 1rem;\n --layout-margin-large: 1.5rem;\n --layout-margin-xlarge: 2rem;\n --layout-margin-xxlarge: 2.5rem;\n --layout-margin-xxxlarge: 3rem;\n --layout-margin-huge: 3.5rem; /* Largest margin value for layout */\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --layout-border-radius-circular: 9999px; /* Used for components with a circular radius */\n --typography-font-families-bc-sans: 'BC Sans'; /* BC Sans font. Requires BC Sans package */\n --typography-line-heights-xxxdense: 1.125rem; /* Smallest line height */\n --typography-line-heights-xxdense: 1.313rem;\n --typography-line-heights-xdense: 1.688rem;\n --typography-line-heights-dense: 1.913rem;\n --typography-line-heights-regular: 2.125rem; /* Default line height */\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */\n --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */\n --typography-font-weights-regular: 400; /* System token, used to generate text styles */\n --typography-font-weights-bold: 700; /* System token, used to generate text styles */\n --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */\n --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */\n --typography-font-size-label: 0.75rem;\n --typography-font-size-small-body: 0.875rem;\n --typography-font-size-body: 1rem;\n --typography-font-size-large-body: 1.125rem;\n --typography-font-size-h5: 1.25rem;\n --typography-font-size-h4: 1.5rem;\n --typography-font-size-h3: 1.75rem;\n --typography-font-size-h2: 2rem;\n --typography-font-size-h1: 2.25rem;\n --typography-font-size-display: 3rem;\n --typography-letter-spacing-0: 0em; /* System token, used to generate type styles */\n --typography-paragraph-spacing-0: 0; /* System token, used to generate type styles */\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /* Labels and captions */\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /* Smaller body text */\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /* Default body text */\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /* Larger body text */\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /* Alternate (unbolded) style for Heading 6 */\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /* Alternate (unbolded) style for Heading 5 */\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /* Alternate (unbolded) style for Heading 4 */\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 3 */\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /* Alternate (unbolded) style for Heading 2 */\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 1 */\n --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /* Extra-large body text size. Do not use for headings */\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (bolded) */\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /* Default for small body text (bolded) */\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /* Default for body text (bolded) */\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (bolded) */\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H6 */\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H5 */\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H4 */\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H3 */\n --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H2 */\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H1 */\n --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /* Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (italic) */\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /* Small body text (italic) */\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /* Default for body text (italic) */\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (italic) */\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Alternate (italic) style for Heading 6 */\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /* Alternate (italic) style for Heading 5 */\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /* Alternate (italic) style for Heading 4 */\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 3 */\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /* Alternate (italic) style for Heading 2 */\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 1 */\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /* Extra-large font size (italic). Do not use for headings */\n --typography-text-case-none: none;\n --typography-text-decoration-none: none; /* System token, used to generate type styles */\n --typography-paragraph-indent-0: 0px; /* System token, used to generate type styles */\n --typography-color-primary: #2D2D2D; /* Default colour for all body text and headings */\n --typography-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous text */\n --typography-color-placeholder: #9F9D9C; /* Use for placeholder text in forms */\n --typography-color-disabled: #9F9D9C; /* Use only for text in inactive user interface elements */\n --typography-color-link: #255A90; /* Use for hyperlinks in body text and headings */\n --typography-color-danger: #CE3E39; /* Use for error, failure or danger message text */\n --typography-color-primary-invert: #FFFFFF; /* Default colour for text on dark backgrounds */\n --typography-color-secondary-invert: #ECEAE8; /* Secondary colour for text on dark backgrounds */\n --theme-gold-10: #FEF8E8; /* Gold scale — lightest */\n --theme-gold-20: #FEF0D8; /* Gold scale */\n --theme-gold-30: #FDE9C4; /* Gold scale */\n --theme-gold-40: #FCE2B0; /* Gold scale */\n --theme-gold-50: #FBDA9D; /* Gold scale */\n --theme-gold-60: #FBD389; /* Gold scale */\n --theme-gold-70: #FACC75; /* Gold scale */\n --theme-gold-80: #F9C462; /* Gold scale */\n --theme-gold-90: #F8BA47; /* Gold scale */\n --theme-gold-100: #FCBA19; /* Gold scale — darkest */\n --theme-blue-10: #F1F8FE; /* Blue scale — lightest */\n --theme-blue-20: #D8EAFD; /* Blue scale */\n --theme-blue-30: #C1DDFC; /* Blue scale */\n --theme-blue-40: #A8D0FB; /* Blue scale */\n --theme-blue-50: #91C4FA; /* Blue scale */\n --theme-blue-60: #7AB8F9; /* Blue scale */\n --theme-blue-70: #5595D9; /* Blue scale */\n --theme-blue-80: #3470B1; /* Blue scale */\n --theme-blue-90: #1E5189; /* Blue scale */\n --theme-blue-100: #013366; /* Blue scale — darkest */\n --theme-gray-10: #FAF9F8; /* Greyscale — lightest */\n --theme-gray-20: #F3F2F1; /* Greyscale */\n --theme-gray-30: #ECEAE8; /* Greyscale */\n --theme-gray-40: #E0DEDC; /* Greyscale */\n --theme-gray-50: #D1CFCD; /* Greyscale */\n --theme-gray-60: #C6C5C3; /* Greyscale */\n --theme-gray-70: #9F9D9C; /* Greyscale */\n --theme-gray-80: #605E5C; /* Greyscale */\n --theme-gray-90: #3D3C3B; /* Greyscale */\n --theme-gray-100: #353433; /* Greyscale */\n --theme-gray-110: #252423; /* Greyscale — darkest */\n --theme-gray-white: #FFFFFF; /* White */\n --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */\n --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */\n}\n";
|
|
35
|
-
styleInject(css_248z$
|
|
34
|
+
var css_248z$B = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --surface-opacity-0: 0;\n --surface-opacity-10: 0.1;\n --surface-opacity-20: 0.2;\n --surface-opacity-30: 0.3;\n --surface-opacity-40: 0.4;\n --surface-opacity-50: 0.5;\n --surface-opacity-60: 0.6;\n --surface-opacity-70: 0.7;\n --surface-opacity-80: 0.8;\n --surface-opacity-90: 0.9;\n --surface-opacity-100: 1;\n --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /* Default shadow for most content and UI elements */\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Reduced shadow for secondary UI elements */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Standard shadow for UI elements like cards and buttons */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Larger shadow for emphasis. Use sparingly */\n --surface-color-primary-button-default: #013366; /* Default fill colour for primary buttons */\n --surface-color-primary-button-hover: #1E5189; /* Fill colour used when user hovers over primary button */\n --surface-color-primary-button-disabled: #EDEBE9; /* Fill colour for inactive primary buttons */\n --surface-color-primary-danger-button-default: #CE3E39; /* Default fill colour for buttons in danger/warning state */\n --surface-color-primary-danger-button-hover: #A2312D; /* Fill colour used when user hovers over danger/warning button */\n --surface-color-primary-danger-button-disabled: #EDEBE9; /* Default fill colour for disabled danger/warning button */\n --surface-color-primary-default: #013366; /* Default theme colour for components and layout */\n --surface-color-primary-hover: #1E5189; /* Hover variant of surface.color.primary.default */\n --surface-color-primary-pressed: #01264C; /* Selected/pressed variant of surface.color.primary.default */\n --surface-color-primary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.primary default */\n --surface-color-secondary-button-default: #FFFFFF; /* Fill colour for secondary buttons */\n --surface-color-secondary-button-hover: #EDEBE9; /* Fill colour used when user hovers over secondary button */\n --surface-color-secondary-button-disabled: #EDEBE9; /* Fill colour for inactive secondary buttons */\n --surface-color-secondary-default: #FFFFFF; /* Light theme colour for components and layout */\n --surface-color-secondary-hover: #EDEBE9; /* Hover variant of surface.color.secondary.default */\n --surface-color-secondary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.secondary.default */\n --surface-color-secondary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.secondary default */\n --surface-color-tertiary-button-default: rgba(255,255,255,0); /* Default fill colour for tertiary buttons */\n --surface-color-tertiary-button-hover: #ECEAE8; /* Fill colour used when user hovers over tertiary button */\n --surface-color-tertiary-button-disabled: #EDEBE9; /* Fill colour for inactive tertiary buttons */\n --surface-color-tertiary-default: #FFFFFF00; /* Alternative light theme colour for components and layout */\n --surface-color-tertiary-hover: #ECEAE8; /* Hover variant of surface.color.tertiary.default */\n --surface-color-tertiary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.tertiary.default */\n --surface-color-tertiary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.tertiary default */\n --surface-color-menus-default: #FFFFFF; /* Default fill colour for menu items */\n --surface-color-menus-hover: #EDEBE9; /* Fill colour used when user hovers over a menu item */\n --surface-color-forms-default: #FFFFFF; /* Default fill colour for form/input fields */\n --surface-color-forms-disabled: #EDEBE9; /* Fill colour for inactive/disabled form/input fields */\n --surface-color-background-white: #FFFFFF; /* White background */\n --surface-color-background-light-gray: #FAF9F8; /* Default background colour for layout */\n --surface-color-background-light-blue: #F1F8FE; /* Light blue background */\n --surface-color-background-dark-blue: #053662; /* Dark blue background */\n --surface-color-border-default: #D8D8D8; /* Lighter border colour for UI elements */\n --surface-color-border-medium: #898785; /* Default border colour for UI elements */\n --surface-color-border-dark: #353433; /* Used as a hover colour for form fields and inputs */\n --surface-color-border-active: #2E5DD7; /* Used as the active stroke colour for UI elements */\n --surface-color-overlay-default: rgba(0,0,0,0.45); /* Background overlay colour for images and modal dialogues */\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2; /* Background colour for error, failure or danger messages */\n --support-surface-color-success: #F6FFF8; /* Background colour for success messages */\n --support-surface-color-warning: #FEF1D8; /* Background colour for warning messages */\n --support-border-color-info: #053662; /* Border stroke for general/informational messages */\n --support-border-color-danger: #CE3E39; /* Border stroke for error, failure or danger messages */\n --support-border-color-success: #42814A; /* Border stroke for success messages */\n --support-border-color-warning: #F8BB47; /* Border stroke for warning messages */\n --icons-size-xsmall: 14px; /* Smallest icon size */\n --icons-size-small: 16px;\n --icons-size-medium: 20px; /* Default icon size */\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px; /* Largest icon size */\n --icons-color-primary: #2D2D2D; /* Default colour for icons */\n --icons-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous icons */\n --icons-color-disabled: #9F9D9C; /* Use only for inactive/disabled icons */\n --icons-color-link: #255A90; /* Use for hyperlinked icons */\n --icons-color-info: #053662; /* Emphasis colour for icons in general/informational state */\n --icons-color-danger: #CE3E39; /* Emphasis colour for icons in error, failure or danger state */\n --icons-color-success: #42814A; /* Emphasis colour for icons in success state */\n --icons-color-warning: #F8BB47; /* Emphasis colour for icons in warning state */\n --icons-color-primary-invert: #FFFFFF; /* Default colour for icons on dark backgrounds */\n --layout-border-width-none: 0;\n --layout-border-width-small: 1px;\n --layout-border-width-medium: 2px;\n --layout-border-width-large: 4px;\n --layout-padding-none: 0; /* No padding */\n --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem; /* Default padding value for layout */\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem; /* Largest padding value for layout */\n --layout-margin-none: 0rem; /* No margin */\n --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem; /* Default margin value for layout */\n --layout-margin-medium: 1rem;\n --layout-margin-large: 1.5rem;\n --layout-margin-xlarge: 2rem;\n --layout-margin-xxlarge: 2.5rem;\n --layout-margin-xxxlarge: 3rem;\n --layout-margin-huge: 3.5rem; /* Largest margin value for layout */\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --layout-border-radius-circular: 9999px; /* Used for components with a circular radius */\n --typography-font-families-bc-sans: 'BC Sans'; /* BC Sans font. Requires BC Sans package */\n --typography-line-heights-xxxdense: 1.125rem; /* Smallest line height */\n --typography-line-heights-xxdense: 1.313rem;\n --typography-line-heights-xdense: 1.688rem;\n --typography-line-heights-dense: 1.913rem;\n --typography-line-heights-regular: 2.125rem; /* Default line height */\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */\n --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */\n --typography-font-weights-regular: 400; /* System token, used to generate text styles */\n --typography-font-weights-bold: 700; /* System token, used to generate text styles */\n --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */\n --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */\n --typography-font-size-label: 0.75rem;\n --typography-font-size-small-body: 0.875rem;\n --typography-font-size-body: 1rem;\n --typography-font-size-large-body: 1.125rem;\n --typography-font-size-h5: 1.25rem;\n --typography-font-size-h4: 1.5rem;\n --typography-font-size-h3: 1.75rem;\n --typography-font-size-h2: 2rem;\n --typography-font-size-h1: 2.25rem;\n --typography-font-size-display: 3rem;\n --typography-letter-spacing-0: 0em; /* System token, used to generate type styles */\n --typography-paragraph-spacing-0: 0; /* System token, used to generate type styles */\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /* Labels and captions */\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /* Smaller body text */\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /* Default body text */\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /* Larger body text */\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /* Alternate (unbolded) style for Heading 6 */\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /* Alternate (unbolded) style for Heading 5 */\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /* Alternate (unbolded) style for Heading 4 */\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 3 */\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /* Alternate (unbolded) style for Heading 2 */\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 1 */\n --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /* Extra-large body text size. Do not use for headings */\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (bolded) */\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /* Default for small body text (bolded) */\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /* Default for body text (bolded) */\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (bolded) */\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H6 */\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H5 */\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H4 */\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H3 */\n --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H2 */\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H1 */\n --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /* Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (italic) */\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /* Small body text (italic) */\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /* Default for body text (italic) */\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (italic) */\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Alternate (italic) style for Heading 6 */\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /* Alternate (italic) style for Heading 5 */\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /* Alternate (italic) style for Heading 4 */\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 3 */\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /* Alternate (italic) style for Heading 2 */\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 1 */\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /* Extra-large font size (italic). Do not use for headings */\n --typography-text-case-none: none;\n --typography-text-decoration-none: none; /* System token, used to generate type styles */\n --typography-paragraph-indent-0: 0px; /* System token, used to generate type styles */\n --typography-color-primary: #2D2D2D; /* Default colour for all body text and headings */\n --typography-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous text */\n --typography-color-placeholder: #9F9D9C; /* Use for placeholder text in forms */\n --typography-color-disabled: #9F9D9C; /* Use only for text in inactive user interface elements */\n --typography-color-link: #255A90; /* Use for hyperlinks in body text and headings */\n --typography-color-danger: #CE3E39; /* Use for error, failure or danger message text */\n --typography-color-primary-invert: #FFFFFF; /* Default colour for text on dark backgrounds */\n --typography-color-secondary-invert: #ECEAE8; /* Secondary colour for text on dark backgrounds */\n --theme-gold-10: #FEF8E8; /* Gold scale — lightest */\n --theme-gold-20: #FEF0D8; /* Gold scale */\n --theme-gold-30: #FDE9C4; /* Gold scale */\n --theme-gold-40: #FCE2B0; /* Gold scale */\n --theme-gold-50: #FBDA9D; /* Gold scale */\n --theme-gold-60: #FBD389; /* Gold scale */\n --theme-gold-70: #FACC75; /* Gold scale */\n --theme-gold-80: #F9C462; /* Gold scale */\n --theme-gold-90: #F8BA47; /* Gold scale */\n --theme-gold-100: #FCBA19; /* Gold scale — darkest */\n --theme-blue-10: #F1F8FE; /* Blue scale — lightest */\n --theme-blue-20: #D8EAFD; /* Blue scale */\n --theme-blue-30: #C1DDFC; /* Blue scale */\n --theme-blue-40: #A8D0FB; /* Blue scale */\n --theme-blue-50: #91C4FA; /* Blue scale */\n --theme-blue-60: #7AB8F9; /* Blue scale */\n --theme-blue-70: #5595D9; /* Blue scale */\n --theme-blue-80: #3470B1; /* Blue scale */\n --theme-blue-90: #1E5189; /* Blue scale */\n --theme-blue-100: #013366; /* Blue scale — darkest */\n --theme-gray-10: #FAF9F8; /* Greyscale — lightest */\n --theme-gray-20: #F3F2F1; /* Greyscale */\n --theme-gray-30: #ECEAE8; /* Greyscale */\n --theme-gray-40: #E0DEDC; /* Greyscale */\n --theme-gray-50: #D1CFCD; /* Greyscale */\n --theme-gray-60: #C6C5C3; /* Greyscale */\n --theme-gray-70: #9F9D9C; /* Greyscale */\n --theme-gray-80: #605E5C; /* Greyscale */\n --theme-gray-90: #3D3C3B; /* Greyscale */\n --theme-gray-100: #353433; /* Greyscale */\n --theme-gray-110: #252423; /* Greyscale — darkest */\n --theme-gray-white: #FFFFFF; /* White */\n --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */\n --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */\n}\n";
|
|
35
|
+
styleInject(css_248z$B);
|
|
36
36
|
|
|
37
37
|
/*
|
|
38
38
|
* Copyright 2024 Adobe. All rights reserved.
|
|
@@ -3693,6 +3693,9 @@ function $11d87f3f76e88657$export$b21e0b124e224484(date, time) {
|
|
|
3693
3693
|
if (time) ({ hour: hour, minute: minute, second: second, millisecond: millisecond } = time);
|
|
3694
3694
|
return new ($35ea8db9cb2ccb90$export$ca871e8dbb80966f)(date.calendar, date.era, date.year, date.month, date.day, hour, minute, second, millisecond);
|
|
3695
3695
|
}
|
|
3696
|
+
function $11d87f3f76e88657$export$d33f79e3ffc3dc83(dateTime) {
|
|
3697
|
+
return new ($35ea8db9cb2ccb90$export$680ea196effce5f)(dateTime.hour, dateTime.minute, dateTime.second, dateTime.millisecond);
|
|
3698
|
+
}
|
|
3696
3699
|
function $11d87f3f76e88657$export$b4a036af3fc0b032(date, calendar) {
|
|
3697
3700
|
if (($14e0f24ef4ac5c92$export$dbc69fd56b53d5e)(date.calendar, calendar)) return date;
|
|
3698
3701
|
let calendarDate = calendar.fromJulianDay(date.calendar.toJulianDay(date));
|
|
@@ -17873,6 +17876,12 @@ function $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref) {
|
|
|
17873
17876
|
validationDetails: validationDetails
|
|
17874
17877
|
};
|
|
17875
17878
|
}
|
|
17879
|
+
function $16f0b7bb276bc17e$export$4c842f6a241dc825(props, state, ref) {
|
|
17880
|
+
var _state_timeValue;
|
|
17881
|
+
let res = $16f0b7bb276bc17e$export$5591b0b878c1a989(props, state, ref);
|
|
17882
|
+
res.inputProps.value = ((_state_timeValue = state.timeValue) === null || _state_timeValue === void 0 ? void 0 : _state_timeValue.toString()) || '';
|
|
17883
|
+
return res;
|
|
17884
|
+
}
|
|
17876
17885
|
|
|
17877
17886
|
function $parcel$interopDefault$6(a) {
|
|
17878
17887
|
return a && a.__esModule ? a.default : a;
|
|
@@ -19677,6 +19686,52 @@ function $4e8b0456ef72939f$var$last(walker) {
|
|
|
19677
19686
|
return next;
|
|
19678
19687
|
}
|
|
19679
19688
|
|
|
19689
|
+
/*
|
|
19690
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
19691
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
19692
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
19693
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
19694
|
+
*
|
|
19695
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
19696
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
19697
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
19698
|
+
* governing permissions and limitations under the License.
|
|
19699
|
+
*/
|
|
19700
|
+
|
|
19701
|
+
|
|
19702
|
+
function $204d9ebcedfb8806$export$ed5abd763a836edc(props) {
|
|
19703
|
+
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, valueLabel: valueLabel, isIndeterminate: isIndeterminate, formatOptions: formatOptions = {
|
|
19704
|
+
style: 'percent'
|
|
19705
|
+
} } = props;
|
|
19706
|
+
let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props, {
|
|
19707
|
+
labelable: true
|
|
19708
|
+
});
|
|
19709
|
+
let { labelProps: labelProps, fieldProps: fieldProps } = ($d191a55c9702f145$export$8467354a121f1b9f)({
|
|
19710
|
+
...props,
|
|
19711
|
+
// Progress bar is not an HTML input element so it
|
|
19712
|
+
// shouldn't be labeled by a <label> element.
|
|
19713
|
+
labelElementType: 'span'
|
|
19714
|
+
});
|
|
19715
|
+
value = ($9446cca9a3875146$export$7d15b64cf5a3a4c4)(value, minValue, maxValue);
|
|
19716
|
+
let percentage = (value - minValue) / (maxValue - minValue);
|
|
19717
|
+
let formatter = ($a916eb452884faea$export$b7a616150fdb9f44)(formatOptions);
|
|
19718
|
+
if (!isIndeterminate && !valueLabel) {
|
|
19719
|
+
let valueToFormat = formatOptions.style === 'percent' ? percentage : value;
|
|
19720
|
+
valueLabel = formatter.format(valueToFormat);
|
|
19721
|
+
}
|
|
19722
|
+
return {
|
|
19723
|
+
progressBarProps: ($3ef42575df84b30b$export$9d1611c77c2fe928)(domProps, {
|
|
19724
|
+
...fieldProps,
|
|
19725
|
+
'aria-valuenow': isIndeterminate ? undefined : value,
|
|
19726
|
+
'aria-valuemin': minValue,
|
|
19727
|
+
'aria-valuemax': maxValue,
|
|
19728
|
+
'aria-valuetext': isIndeterminate ? undefined : valueLabel,
|
|
19729
|
+
role: 'progressbar'
|
|
19730
|
+
}),
|
|
19731
|
+
labelProps: labelProps
|
|
19732
|
+
};
|
|
19733
|
+
}
|
|
19734
|
+
|
|
19680
19735
|
/*
|
|
19681
19736
|
* Copyright 2020 Adobe. All rights reserved.
|
|
19682
19737
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -20927,6 +20982,41 @@ const $01b77f81d0f07f68$export$b04be29aa201d4f5 = /*#__PURE__*/ ($f39a9eba43920a
|
|
|
20927
20982
|
|
|
20928
20983
|
|
|
20929
20984
|
const $0393f8ab869a0f1a$export$e9f3bf65a26ce129 = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
20985
|
+
const $0393f8ab869a0f1a$export$c17561cb55d4db30 = /*#__PURE__*/ ($dbSRa$react.forwardRef)(function ProgressBar(props, ref) {
|
|
20986
|
+
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $0393f8ab869a0f1a$export$e9f3bf65a26ce129);
|
|
20987
|
+
let { value: value = 0, minValue: minValue = 0, maxValue: maxValue = 100, isIndeterminate: isIndeterminate = false } = props;
|
|
20988
|
+
value = ($9446cca9a3875146$export$7d15b64cf5a3a4c4)(value, minValue, maxValue);
|
|
20989
|
+
let [labelRef, label] = ($64fa3d84918910a7$export$9d4c57ee4c6ffdd8)(!props['aria-label'] && !props['aria-labelledby']);
|
|
20990
|
+
let { progressBarProps: progressBarProps, labelProps: labelProps } = ($204d9ebcedfb8806$export$ed5abd763a836edc)({
|
|
20991
|
+
...props,
|
|
20992
|
+
label: label
|
|
20993
|
+
});
|
|
20994
|
+
// Calculate the width of the progress bar as a percentage
|
|
20995
|
+
let percentage = isIndeterminate ? undefined : (value - minValue) / (maxValue - minValue) * 100;
|
|
20996
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
20997
|
+
...props,
|
|
20998
|
+
defaultClassName: 'react-aria-ProgressBar',
|
|
20999
|
+
values: {
|
|
21000
|
+
percentage: percentage,
|
|
21001
|
+
valueText: progressBarProps['aria-valuetext'],
|
|
21002
|
+
isIndeterminate: isIndeterminate
|
|
21003
|
+
}
|
|
21004
|
+
});
|
|
21005
|
+
let DOMProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props, {
|
|
21006
|
+
global: true
|
|
21007
|
+
});
|
|
21008
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
21009
|
+
...($3ef42575df84b30b$export$9d1611c77c2fe928)(DOMProps, renderProps, progressBarProps),
|
|
21010
|
+
ref: ref,
|
|
21011
|
+
slot: props.slot || undefined
|
|
21012
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement(($01b77f81d0f07f68$export$75b6ee27786ba447).Provider, {
|
|
21013
|
+
value: {
|
|
21014
|
+
...labelProps,
|
|
21015
|
+
ref: labelRef,
|
|
21016
|
+
elementType: 'span'
|
|
21017
|
+
}
|
|
21018
|
+
}, renderProps.children));
|
|
21019
|
+
});
|
|
20930
21020
|
|
|
20931
21021
|
/*
|
|
20932
21022
|
* Copyright 2022 Adobe. All rights reserved.
|
|
@@ -23669,6 +23759,82 @@ function $3c0fc76039f1c516$var$setSegment(value, part, segmentValue, options) {
|
|
|
23669
23759
|
throw new Error('Unknown segment: ' + part);
|
|
23670
23760
|
}
|
|
23671
23761
|
|
|
23762
|
+
/*
|
|
23763
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
23764
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the 'License');
|
|
23765
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
23766
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
23767
|
+
*
|
|
23768
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
23769
|
+
* the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
23770
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
23771
|
+
* governing permissions and limitations under the License.
|
|
23772
|
+
*/
|
|
23773
|
+
|
|
23774
|
+
|
|
23775
|
+
|
|
23776
|
+
function $eff5d8ee529ac4bb$export$fd53cef0cc796101(props) {
|
|
23777
|
+
let { placeholderValue: placeholderValue = new ($35ea8db9cb2ccb90$export$680ea196effce5f)(), minValue: minValue, maxValue: maxValue, defaultValue: defaultValue, granularity: granularity, validate: validate } = props;
|
|
23778
|
+
let [value, setValue] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, defaultValue !== null && defaultValue !== void 0 ? defaultValue : null, props.onChange);
|
|
23779
|
+
let v = value || placeholderValue;
|
|
23780
|
+
let day = v && 'day' in v ? v : undefined;
|
|
23781
|
+
let defaultValueTimeZone = defaultValue && 'timeZone' in defaultValue ? defaultValue.timeZone : undefined;
|
|
23782
|
+
let placeholderDate = ($dbSRa$react.useMemo)(()=>{
|
|
23783
|
+
let valueTimeZone = v && 'timeZone' in v ? v.timeZone : undefined;
|
|
23784
|
+
return (valueTimeZone || defaultValueTimeZone) && placeholderValue ? ($11d87f3f76e88657$export$84c95a83c799e074)($eff5d8ee529ac4bb$var$convertValue(placeholderValue), valueTimeZone || defaultValueTimeZone) : $eff5d8ee529ac4bb$var$convertValue(placeholderValue);
|
|
23785
|
+
}, [
|
|
23786
|
+
placeholderValue,
|
|
23787
|
+
v,
|
|
23788
|
+
defaultValueTimeZone
|
|
23789
|
+
]);
|
|
23790
|
+
let minDate = ($dbSRa$react.useMemo)(()=>$eff5d8ee529ac4bb$var$convertValue(minValue, day), [
|
|
23791
|
+
minValue,
|
|
23792
|
+
day
|
|
23793
|
+
]);
|
|
23794
|
+
let maxDate = ($dbSRa$react.useMemo)(()=>$eff5d8ee529ac4bb$var$convertValue(maxValue, day), [
|
|
23795
|
+
maxValue,
|
|
23796
|
+
day
|
|
23797
|
+
]);
|
|
23798
|
+
let timeValue = ($dbSRa$react.useMemo)(()=>value && 'day' in value ? ($11d87f3f76e88657$export$d33f79e3ffc3dc83)(value) : value, [
|
|
23799
|
+
value
|
|
23800
|
+
]);
|
|
23801
|
+
let dateTime = ($dbSRa$react.useMemo)(()=>value == null ? null : $eff5d8ee529ac4bb$var$convertValue(value), [
|
|
23802
|
+
value
|
|
23803
|
+
]);
|
|
23804
|
+
let defaultDateTime = ($dbSRa$react.useMemo)(()=>defaultValue == null ? null : $eff5d8ee529ac4bb$var$convertValue(defaultValue), [
|
|
23805
|
+
defaultValue
|
|
23806
|
+
]);
|
|
23807
|
+
let onChange = (newValue)=>{
|
|
23808
|
+
setValue(day || defaultValueTimeZone ? newValue : newValue && ($11d87f3f76e88657$export$d33f79e3ffc3dc83)(newValue));
|
|
23809
|
+
};
|
|
23810
|
+
let state = ($3c0fc76039f1c516$export$60e84778edff6d26)({
|
|
23811
|
+
...props,
|
|
23812
|
+
value: dateTime,
|
|
23813
|
+
defaultValue: defaultDateTime,
|
|
23814
|
+
minValue: minDate,
|
|
23815
|
+
maxValue: maxDate,
|
|
23816
|
+
onChange: onChange,
|
|
23817
|
+
granularity: granularity || 'minute',
|
|
23818
|
+
maxGranularity: 'hour',
|
|
23819
|
+
placeholderValue: placeholderDate !== null && placeholderDate !== void 0 ? placeholderDate : undefined,
|
|
23820
|
+
// Calendar should not matter for time fields.
|
|
23821
|
+
createCalendar: ()=>new ($3b62074eb05584b2$export$80ee6245ec4f29ec)(),
|
|
23822
|
+
validate: ($dbSRa$react.useCallback)(()=>validate === null || validate === void 0 ? void 0 : validate(value), [
|
|
23823
|
+
validate,
|
|
23824
|
+
value
|
|
23825
|
+
])
|
|
23826
|
+
});
|
|
23827
|
+
return {
|
|
23828
|
+
...state,
|
|
23829
|
+
timeValue: timeValue
|
|
23830
|
+
};
|
|
23831
|
+
}
|
|
23832
|
+
function $eff5d8ee529ac4bb$var$convertValue(value, date = ($14e0f24ef4ac5c92$export$d0bdf45af03a6ea3)(($14e0f24ef4ac5c92$export$aa8b41735afcabd2)())) {
|
|
23833
|
+
if (!value) return null;
|
|
23834
|
+
if ('day' in value) return value;
|
|
23835
|
+
return ($11d87f3f76e88657$export$b21e0b124e224484)(date, value);
|
|
23836
|
+
}
|
|
23837
|
+
|
|
23672
23838
|
/*
|
|
23673
23839
|
* Copyright 2024 Adobe. All rights reserved.
|
|
23674
23840
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -26191,8 +26357,97 @@ function $c699643d2073b351$export$eefa3e19139f00f3(props) {
|
|
|
26191
26357
|
|
|
26192
26358
|
|
|
26193
26359
|
const $40825cdb76e74f70$export$7b3e670c86da5fe8 = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
26360
|
+
const $40825cdb76e74f70$export$8e17ddc448e87c1e = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
26194
26361
|
const $40825cdb76e74f70$export$3b08bebcf796eea0 = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
26195
26362
|
const $40825cdb76e74f70$export$5d8dc44abd10a920 = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
26363
|
+
const $40825cdb76e74f70$export$5eaee2322dd727eb = /*#__PURE__*/ ($dbSRa$react.forwardRef)(function TimeField(props, ref) {
|
|
26364
|
+
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $40825cdb76e74f70$export$8e17ddc448e87c1e);
|
|
26365
|
+
let { validationBehavior: formValidationBehavior } = ($64fa3d84918910a7$export$fabf2dc03a41866e)(($d3e0e05bdfcf66bd$export$c24727297075ec6a)) || {};
|
|
26366
|
+
var _props_validationBehavior, _ref;
|
|
26367
|
+
let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : 'native';
|
|
26368
|
+
let { locale: locale } = ($18f2051aff69b9bf$export$43bb16f9c6d9e3f7)();
|
|
26369
|
+
let state = ($eff5d8ee529ac4bb$export$fd53cef0cc796101)({
|
|
26370
|
+
...props,
|
|
26371
|
+
locale: locale,
|
|
26372
|
+
validationBehavior: validationBehavior
|
|
26373
|
+
});
|
|
26374
|
+
let fieldRef = ($dbSRa$react.useRef)(null);
|
|
26375
|
+
let [labelRef, label] = ($64fa3d84918910a7$export$9d4c57ee4c6ffdd8)(!props['aria-label'] && !props['aria-labelledby']);
|
|
26376
|
+
let inputRef = ($dbSRa$react.useRef)(null);
|
|
26377
|
+
let { labelProps: labelProps, fieldProps: fieldProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = ($16f0b7bb276bc17e$export$4c842f6a241dc825)({
|
|
26378
|
+
...($64fa3d84918910a7$export$ef03459518577ad4)(props),
|
|
26379
|
+
label: label,
|
|
26380
|
+
inputRef: inputRef,
|
|
26381
|
+
validationBehavior: validationBehavior
|
|
26382
|
+
}, state, fieldRef);
|
|
26383
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
26384
|
+
...props,
|
|
26385
|
+
values: {
|
|
26386
|
+
state: state,
|
|
26387
|
+
isInvalid: state.isInvalid,
|
|
26388
|
+
isDisabled: state.isDisabled,
|
|
26389
|
+
isReadOnly: state.isReadOnly
|
|
26390
|
+
},
|
|
26391
|
+
defaultClassName: 'react-aria-TimeField'
|
|
26392
|
+
});
|
|
26393
|
+
let DOMProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props, {
|
|
26394
|
+
global: true
|
|
26395
|
+
});
|
|
26396
|
+
delete DOMProps.id;
|
|
26397
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement(($64fa3d84918910a7$export$2881499e37b75b9a), {
|
|
26398
|
+
values: [
|
|
26399
|
+
[
|
|
26400
|
+
$40825cdb76e74f70$export$5d8dc44abd10a920,
|
|
26401
|
+
state
|
|
26402
|
+
],
|
|
26403
|
+
[
|
|
26404
|
+
($a049562f99e7db0e$export$f9c6924e160136d1),
|
|
26405
|
+
{
|
|
26406
|
+
...fieldProps,
|
|
26407
|
+
ref: fieldRef,
|
|
26408
|
+
isInvalid: state.isInvalid,
|
|
26409
|
+
isDisabled: state.isDisabled
|
|
26410
|
+
}
|
|
26411
|
+
],
|
|
26412
|
+
[
|
|
26413
|
+
($3985021b0ad6602f$export$37fb8590cf2c088c),
|
|
26414
|
+
{
|
|
26415
|
+
...inputProps,
|
|
26416
|
+
ref: inputRef
|
|
26417
|
+
}
|
|
26418
|
+
],
|
|
26419
|
+
[
|
|
26420
|
+
($01b77f81d0f07f68$export$75b6ee27786ba447),
|
|
26421
|
+
{
|
|
26422
|
+
...labelProps,
|
|
26423
|
+
ref: labelRef,
|
|
26424
|
+
elementType: 'span'
|
|
26425
|
+
}
|
|
26426
|
+
],
|
|
26427
|
+
[
|
|
26428
|
+
($514c0188e459b4c0$export$9afb8bc826b033ea),
|
|
26429
|
+
{
|
|
26430
|
+
slots: {
|
|
26431
|
+
description: descriptionProps,
|
|
26432
|
+
errorMessage: errorMessageProps
|
|
26433
|
+
}
|
|
26434
|
+
}
|
|
26435
|
+
],
|
|
26436
|
+
[
|
|
26437
|
+
($ee014567cb39d3f0$export$ff05c3ac10437e03),
|
|
26438
|
+
validation
|
|
26439
|
+
]
|
|
26440
|
+
]
|
|
26441
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
26442
|
+
...DOMProps,
|
|
26443
|
+
...renderProps,
|
|
26444
|
+
ref: ref,
|
|
26445
|
+
slot: props.slot || undefined,
|
|
26446
|
+
"data-invalid": state.isInvalid || undefined,
|
|
26447
|
+
"data-disabled": state.isDisabled || undefined,
|
|
26448
|
+
"data-readonly": state.isReadOnly || undefined
|
|
26449
|
+
}));
|
|
26450
|
+
});
|
|
26196
26451
|
const $40825cdb76e74f70$export$7edc06cf1783b30f = /*#__PURE__*/ ($dbSRa$react.forwardRef)(function DateInput(props, ref) {
|
|
26197
26452
|
// If state is provided by DateField/TimeField, just render.
|
|
26198
26453
|
// Otherwise (e.g. in DatePicker), we need to call hooks and create state ourselves.
|
|
@@ -28063,11 +28318,11 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
|
|
|
28063
28318
|
}, renderProps.children));
|
|
28064
28319
|
}
|
|
28065
28320
|
|
|
28066
|
-
var css_248z$
|
|
28067
|
-
styleInject(css_248z$
|
|
28321
|
+
var css_248z$A = ".bcds-react-aria-Disclosure {\n display: flex;\n flex-direction: column;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n overflow: hidden;\n}\n\n.bcds-react-aria-Disclosure--Button {\n display: inline-flex;\n flex-direction: row;\n padding: var(--layout-padding-small) var(--layout-padding-medium);\n gap: var(--layout-margin-small);\n justify-content: space-between;\n align-items: center;\n background-color: var(--surface-color-background-light-gray);\n border: none;\n cursor: pointer;\n font: var(--typography-bold-body);\n color: var(--typography-color-primary);\n}\n\n/* Hover */\n.bcds-react-aria-Disclosure--Button[data-hovered] {\n background-color: var(--surface-color-menus-hover);\n}\n\n/* Accordion content */\n.bcds-react-aria-Disclosure[data-expanded]\n > .bcds-react-aria-Disclosure--Panel {\n display: flex;\n align-items: flex-start;\n padding: var(--layout-padding-medium);\n gap: var(--layout-margin-small);\n background-color: var(--surface-color-forms-default);\n font: var(--typography-regular-body);\n}\n\n/* Focus state */\n.bcds-react-aria-Disclosure[data-focus-visible-within] {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Override default focus behaviour for button */\n.bcds-react-aria-Disclosure[data-focus-visible-within]\n > .bcds-react-aria-Disclosure--Button {\n outline: none;\n}\n\n.bcds-react-aria-Disclosure--Button[data-focused] {\n outline: none;\n}\n\n/* Disabled state */\n.bcds-react-aria-Disclosure[data-disabled]\n > .bcds-react-aria-Disclosure--Button {\n background-color: var(--surface-color-forms-disabled);\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
28322
|
+
styleInject(css_248z$A);
|
|
28068
28323
|
|
|
28069
|
-
var css_248z$
|
|
28070
|
-
styleInject(css_248z$
|
|
28324
|
+
var css_248z$z = ".bcds-react-aria-Button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--layout-padding-small);\n min-height: 24px;\n min-width: 24px;\n border: none;\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n font: var(--typography-regular-body);\n}\n.bcds-react-aria-Button[data-disabled] {\n cursor: not-allowed;\n}\n.bcds-react-aria-Button[data-focus-visible] {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Sizes */\n.bcds-react-aria-Button.xsmall {\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n font: var(--typography-regular-label);\n}\n.bcds-react-aria-Button.xsmall.icon {\n padding: unset;\n height: 24px;\n width: 24px;\n}\n.bcds-react-aria-Button.small {\n min-height: 32px;\n padding: var(--layout-padding-none) 0.75rem\n /* to be replaced with new token later */;\n font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Button.small.icon {\n padding: unset;\n height: 32px;\n width: 32px;\n min-width: 32px;\n}\n.bcds-react-aria-Button.medium {\n min-height: 40px;\n padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n.bcds-react-aria-Button.medium.icon {\n padding: unset;\n height: 40px;\n width: 40px;\n min-width: 40px;\n}\n.bcds-react-aria-Button.large, /* this doesn't work on its own */\n.bcds-react-aria-Button.large.primary, \n.bcds-react-aria-Button.large.secondary, \n.bcds-react-aria-Button.large.tertiary, \n.bcds-react-aria-Button.large.link {\n min-height: 48px;\n padding: var(--layout-padding-none) var(--layout-padding-large);\n}\n.bcds-react-aria-Button.large.icon {\n padding: unset;\n height: 48px;\n width: 48px;\n min-width: 48px;\n}\n\n/* Variant - Primary */\n.bcds-react-aria-Button.primary {\n background: var(--surface-color-primary-button-default);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Button.primary.danger {\n background-color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.primary[data-disabled] {\n background-color: var(--surface-color-primary-danger-button-disabled);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.primary[data-hovered] {\n background-color: var(--surface-color-primary-button-hover);\n}\n.bcds-react-aria-Button.primary.danger[data-hovered] {\n background-color: var(--surface-color-primary-danger-button-hover);\n}\n.bcds-react-aria-Button.primary.danger[data-pressed],\n.bcds-react-aria-Button.primary.danger[data-hovered][data-pressed] {\n background-color: var(--support-surface-color-danger);\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.primary[data-pressed],\n.bcds-react-aria-Button.primary[data-hovered][data-pressed] {\n background-color: var(--surface-color-primary-pressed);\n}\n\n/* Variant - Secondary */\n.bcds-react-aria-Button.secondary {\n background-color: var(--surface-color-secondary-button-default);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-dark);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.secondary.danger {\n border-color: var(--support-border-color-danger);\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.secondary[data-disabled] {\n background-color: var(--surface-color-secondary-button-disabled);\n border-color: var(--surface-color-border-default);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.secondary[data-hovered] {\n background-color: var(--surface-color-secondary-button-hover);\n}\n.bcds-react-aria-Button.secondary.danger[data-hovered] {\n background-color: var(--support-surface-color-danger);\n}\n.bcds-react-aria-Button.secondary.danger[data-pressed],\n.bcds-react-aria-Button.secondary.danger[data-hovered][data-pressed] {\n background-color: var(--surface-color-primary-danger-button-default);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Button.secondary[data-pressed],\n.bcds-react-aria-Button.secondary[data-hovered][data-pressed] {\n background-color: var(--surface-color-secondary-pressed);\n}\n\n/* Variant - Tertiary */\n.bcds-react-aria-Button.tertiary {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.tertiary.danger {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.tertiary[data-disabled] {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.tertiary[data-hovered] {\n background-color: var(--surface-color-tertiary-button-hover);\n}\n.bcds-react-aria-Button.tertiary.danger[data-hovered] {\n background-color: var(--support-surface-color-danger);\n}\n.bcds-react-aria-Button.tertiary[data-pressed],\n.bcds-react-aria-Button.tertiary[data-hovered][data-pressed] {\n background-color: var(--surface-color-tertiary-pressed);\n}\n.bcds-react-aria-Button.tertiary.danger[data-pressed],\n.bcds-react-aria-Button.tertiary.danger[data-hovered][data-pressed] {\n background-color: var(--surface-color-tertiary-pressed);\n}\n\n/* Variant - Link */\n.bcds-react-aria-Button.link {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-link);\n text-decoration: underline;\n text-underline-offset: 0.3em;\n}\n.bcds-react-aria-Button.link.danger {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.link[data-disabled] {\n color: var(--typography-color-disabled);\n}\n";
|
|
28325
|
+
styleInject(css_248z$z);
|
|
28071
28326
|
|
|
28072
28327
|
function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
|
|
28073
28328
|
return (jsxRuntime.jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `bcds-react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
|
|
@@ -28087,8 +28342,8 @@ function Accordion({ label, children, ...props }) {
|
|
|
28087
28342
|
return (jsxRuntime.jsx($28f4fd908f0de97f$export$74a362b31437ec83, { className: `bcds-react-aria-Disclosure`, ...props, children: ({ isExpanded }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Button, { className: "bcds-react-aria-Disclosure--Button", size: "small", variant: "link", slot: "trigger", children: [label, isExpanded ? jsxRuntime.jsx(SvgChevronUpIcon, {}) : jsxRuntime.jsx(SvgChevronDownIcon, {})] }), jsxRuntime.jsx($28f4fd908f0de97f$export$feabaa331e1d464c, { className: "bcds-react-aria-Disclosure--Panel", children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) })] })) }));
|
|
28088
28343
|
}
|
|
28089
28344
|
|
|
28090
|
-
var css_248z$
|
|
28091
|
-
styleInject(css_248z$
|
|
28345
|
+
var css_248z$y = ".bcds-react-aria-DisclosureGroup {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n gap: var(--layout-border-width-small);\n background-color: var(--surface-color-border-default);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n overflow: hidden;\n}\n\n/* Override individual accordion item borders */\n.bcds-react-aria-DisclosureGroup > .bcds-react-aria-Disclosure {\n border: none;\n border-radius: var(--layout-border-radius-none);\n}\n\n/* Focus state */\n.bcds-react-aria-DisclosureGroup\n > .bcds-react-aria-Disclosure[data-focus-visible-within] {\n border-radius: var(--layout-border-radius-hair);\n outline-offset: calc(var(--layout-margin-hair) * -1);\n}\n\n/* Title styles */\n.bcds-react-aria-DisclosureGroup--Title {\n color: var(--typography-color-primary);\n margin: var(--layout-margin-medium) var(--layout-margin-none);\n}\n\n.bcds-react-aria-DisclosureGroup--Title > h1 {\n font: var(--typography-bold-h1);\n margin-block-start: 0;\n margin-block-end: 0;\n}\n\n.bcds-react-aria-DisclosureGroup--Title > h2 {\n font: var(--typography-bold-h2);\n margin-block-start: 0;\n margin-block-end: 0;\n}\n\n.bcds-react-aria-DisclosureGroup--Title > h3 {\n font: var(--typography-bold-h3);\n margin-block-start: 0;\n margin-block-end: 0;\n}\n\n.bcds-react-aria-DisclosureGroup--Title > h4 {\n font: var(--typography-bold-h4);\n margin-block-start: 0;\n margin-block-end: 0;\n}\n\n.bcds-react-aria-DisclosureGroup--Title > h5 {\n font: var(--typography-bold-h5);\n margin-block-start: 0;\n margin-block-end: 0;\n}\n\n.bcds-react-aria-DisclosureGroup--Title > h6 {\n font: var(--typography-bold-h6);\n margin-block-start: 0;\n margin-block-end: 0;\n}\n\n.bcds-react-aria-DisclosureGroup--Title > span {\n font: var(--typography-bold-large-body);\n}\n";
|
|
28346
|
+
styleInject(css_248z$y);
|
|
28092
28347
|
|
|
28093
28348
|
function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
28094
28349
|
function getTitle() {
|
|
@@ -28112,8 +28367,8 @@ function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
|
28112
28367
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && (jsxRuntime.jsx("div", { className: "bcds-react-aria-DisclosureGroup--Title", children: getTitle() })), jsxRuntime.jsx($28f4fd908f0de97f$export$944aceb4f8c89f10, { className: "bcds-react-aria-DisclosureGroup", ...props, children: children })] }));
|
|
28113
28368
|
}
|
|
28114
28369
|
|
|
28115
|
-
var css_248z$
|
|
28116
|
-
styleInject(css_248z$
|
|
28370
|
+
var css_248z$x = ".bcds-Alert-Banner {\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n\n.bcds-Alert-Banner--Container {\n flex-grow: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-padding-medium);\n max-width: 1100px;\n padding: var(--layout-padding-small) var(--layout-padding-none);\n}\n\n.bcds-Alert-Banner--Icon {\n align-self: first baseline;\n justify-self: flex-start;\n padding-top: var(--layout-padding-xsmall);\n color: var(--icons-color-primary-invert);\n}\n\n.bcds-Alert-Banner--Content {\n display: inline-flex;\n gap: var(--layout-margin-medium);\n align-items: first baseline;\n flex-grow: 1;\n flex-wrap: wrap;\n font: var(--typography-regular-body);\n color: var(--typography-color-primary-invert);\n}\n\n.bcds-Alert-Banner--closeIcon {\n align-self: first baseline;\n}\n\n.bcds-Alert-Banner--closeIcon > .bcds-react-aria-Button[data-hovered] svg {\n color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner--closeIcon svg {\n color: var(--icons-color-primary-invert);\n}\n\n/* Variants */\n\n/* Info theme */\n.bcds-Alert-Banner.info {\n background-color: var(--surface-color-background-dark-blue);\n}\n\n/* Success theme */\n.bcds-Alert-Banner.success {\n background-color: var(--support-border-color-success);\n}\n\n/* Warning theme */\n.bcds-Alert-Banner.warning {\n background-color: var(--support-border-color-warning);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Icon {\n color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Content {\n color: var(--typography-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--closeIcon svg {\n color: var(--icons-color-primary);\n}\n\n/* Danger theme */\n.bcds-Alert-Banner.danger {\n background-color: var(--support-border-color-danger);\n}\n\n/* Black theme */\n\n.bcds-Alert-Banner.black {\n background-color: var(--theme-gray-110);\n}\n";
|
|
28371
|
+
styleInject(css_248z$x);
|
|
28117
28372
|
|
|
28118
28373
|
/* This component implements the Circle Check icon from Font Awesome: https://fontawesome.com/icons/circle-check */
|
|
28119
28374
|
function SvgCheckCircleIcon({ id = "check-icon" }) {
|
|
@@ -28161,15 +28416,15 @@ function AlertBanner({ variant = "info", isIconHidden = false, isCloseable = tru
|
|
|
28161
28416
|
return (jsxRuntime.jsx("div", { className: `bcds-Alert-Banner ${variant}`, ...props, children: jsxRuntime.jsxs("div", { className: "bcds-Alert-Banner--Container", children: [" ", !isIconHidden && (jsxRuntime.jsx("span", { className: "bcds-Alert-Banner--Icon", children: customIcon ? customIcon : getIcon$2(variant) })), jsxRuntime.jsx("div", { className: "bcds-Alert-Banner--Content", role: role, children: children }), isCloseable && (jsxRuntime.jsx("span", { className: "bcds-Alert-Banner--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }) }));
|
|
28162
28417
|
}
|
|
28163
28418
|
|
|
28164
|
-
var css_248z$
|
|
28165
|
-
styleInject(css_248z$
|
|
28419
|
+
var css_248z$w = ".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";
|
|
28420
|
+
styleInject(css_248z$w);
|
|
28166
28421
|
|
|
28167
28422
|
function ButtonGroup({ orientation = "horizontal", alignment = "start", ariaLabel, children, ...props }) {
|
|
28168
28423
|
return (jsxRuntime.jsx("div", { className: `bcds-ButtonGroup ${orientation} ${alignment}`, role: "group", "aria-label": ariaLabel, ...props, children: children }));
|
|
28169
28424
|
}
|
|
28170
28425
|
|
|
28171
|
-
var css_248z$
|
|
28172
|
-
styleInject(css_248z$
|
|
28426
|
+
var css_248z$v = ".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";
|
|
28427
|
+
styleInject(css_248z$v);
|
|
28173
28428
|
|
|
28174
28429
|
/* Sets correct left icon for selected variant */
|
|
28175
28430
|
function getIcon$1(variant) {
|
|
@@ -28192,11 +28447,11 @@ function AlertDialog({ children, variant = "info", role = "dialog", title, isClo
|
|
|
28192
28447
|
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 }))] })) }));
|
|
28193
28448
|
}
|
|
28194
28449
|
|
|
28195
|
-
var css_248z$
|
|
28196
|
-
styleInject(css_248z$
|
|
28450
|
+
var css_248z$u = ".bcds-react-aria-Calendar {\n display: inline-flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--layout-margin-large);\n padding: var(--layout-padding-medium);\n box-sizing: border-box;\n justify-content: center;\n background-color: var(--surface-color-forms-default);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Calendar--GridContainer {\n display: inline-flex;\n flex: 0 1 0;\n flex-direction: column;\n gap: var(--layout-margin-small);\n box-sizing: border-box;\n}\n.bcds-react-aria-Calendar--Header {\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n.bcds-react-aria-Calendar--HeaderButton {\n width: var(--icons-size-large);\n height: var(--icons-size-large);\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n.bcds-react-aria-Calendar--Header > h2.bcds-react-aria-Heading {\n flex: 1;\n text-align: center;\n font: var(--typography-bold-small-body);\n margin: var(--layout-margin-none);\n}\n.bcds-react-aria-Calendar--Header > button > svg {\n min-width: var(--icons-size-small);\n height: var(--icons-size-small);\n}\n.bcds-react-aria-Calendar--Grid {\n text-align: center;\n border-spacing: var(--layout-margin-xsmall);\n}\n.bcds-react-aria-Calendar--Cell {\n cursor: pointer;\n box-sizing: border-box;\n width: var(--icons-size-xlarge);\n height: var(--icons-size-xlarge);\n padding: var(--layout-padding-xsmall);\n border: solid var(--layout-border-width-small) transparent;\n}\n/* Hide days outside current month or visible range */\n.bcds-react-aria-Calendar--Cell[data-outside-visible-range],\n.bcds-react-aria-Calendar--Cell[data-outside-month] {\n visibility: hidden;\n}\n\n/* Calendar item states */\n.bcds-react-aria-Calendar--Cell[data-hovered] {\n background-color: var(--surface-color-secondary-button-hover);\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected] {\n background-color: var(--surface-color-primary-button-default);\n color: var(--typography-color-primary-invert);\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected][data-focused],\n.bcds-react-aria-Calendar--Cell[data-selected][data-focus-visible] {\n background-color: var(--surface-color-primary-button-default);\n color: var(--typography-color-primary-invert);\n outline: solid var(--layout-border-width-small)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected][data-hovered] {\n background-color: var(--surface-color-primary-button-hover);\n}\n.bcds-react-aria-Calendar--Cell[data-focused] {\n outline: none;\n}\n.bcds-react-aria-Calendar--Cell[data-focus-visible] {\n background-color: var(--surface-color-secondary-button-hover);\n border: solid var(--layout-border-width-small)\n var(--surface-color-border-active);\n border-radius: var(--layout-border-radius-small);\n outline: none;\n}\n.bcds-react-aria-Calendar--Cell[data-today] {\n font: var(--typography-bold-small-body);\n}\n.bcds-react-aria-Calendar--Cell[data-disabled],\n.bcds-react-aria-Calendar--Cell[data-unavailable][data-disabled] {\n color: var(--typography-color-disabled);\n text-decoration: none;\n cursor: not-allowed;\n}\n.bcds-react-aria-Calendar--Cell[data-unavailable] {\n color: var(--typography-color-danger);\n text-decoration: line-through;\n cursor: not-allowed;\n}\n";
|
|
28451
|
+
styleInject(css_248z$u);
|
|
28197
28452
|
|
|
28198
|
-
var css_248z$
|
|
28199
|
-
styleInject(css_248z$
|
|
28453
|
+
var css_248z$t = "/* Headings */\nh1.bcds-react-aria-Heading {\n font: var(--typography-bold-h1);\n}\n\nh2.bcds-react-aria-Heading {\n font: var(--typography-bold-h2);\n}\n\nh3.bcds-react-aria-Heading {\n font: var(--typography-bold-h3);\n}\n\nh4.bcds-react-aria-Heading {\n font: var(--typography-bold-h4);\n}\n\nh5.bcds-react-aria-Heading {\n font: var(--typography-bold-h5);\n}\n\nh6.bcds-react-aria-Heading {\n font: var(--typography-bold-h6);\n}\n\n/* Text colour */\n.bcds-react-aria-Heading.primary {\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Heading.primaryInvert {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Heading.secondary {\n color: var(--typography-color-secondary);\n}\n.bcds-react-aria-Heading.secondaryInvert {\n color: var(--typography-color-secondary-invert);\n}\n.bcds-react-aria-Heading.disabled {\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Heading.danger {\n color: var(--typography-color-danger);\n}\n";
|
|
28454
|
+
styleInject(css_248z$t);
|
|
28200
28455
|
|
|
28201
28456
|
function Heading({ color = "primary", isUnstyled = false, ...props }) {
|
|
28202
28457
|
return (jsxRuntime.jsx($5cb03073d3f54797$export$a8a3e93435678ff9, { className: isUnstyled ? undefined : `bcds-react-aria-Heading ${color}`, ...props }));
|
|
@@ -28212,12 +28467,18 @@ function SvgChevronRightIcon({ id = "chevron-right-icon" }) {
|
|
|
28212
28467
|
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 640 640", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z", fill: "currentColor" }) }));
|
|
28213
28468
|
}
|
|
28214
28469
|
|
|
28215
|
-
function Calendar({ ...props }) {
|
|
28216
|
-
|
|
28470
|
+
function Calendar({ visibleDuration = { months: 1 }, ...props }) {
|
|
28471
|
+
const monthFormatter = $896ba0a80a8f4d36$export$85fd5fdf27bacc79({
|
|
28472
|
+
month: "long",
|
|
28473
|
+
year: "numeric",
|
|
28474
|
+
});
|
|
28475
|
+
return (jsxRuntime.jsx($dfd62f934fc76fed$export$e1aef45b828286de, { className: "bcds-react-aria-Calendar", visibleDuration: visibleDuration, ...props, children: ({ state }) => [...Array(visibleDuration.months).keys()].map((i) => (jsxRuntime.jsxs("div", { className: "bcds-react-aria-Calendar--GridContainer", children: [jsxRuntime.jsxs("div", { className: "bcds-react-aria-Calendar--Header", children: [jsxRuntime.jsx("div", { className: "bcds-react-aria-Calendar--HeaderButton", children: i === 0 && (jsxRuntime.jsx(Button, { slot: "previous", size: "xsmall", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgChevronLeftIcon, {}) })) }), jsxRuntime.jsx(Heading, { children: monthFormatter.format(state.visibleRange.start
|
|
28476
|
+
.add({ months: i })
|
|
28477
|
+
.toDate(state.timeZone)) }), jsxRuntime.jsx("div", { className: "bcds-react-aria-Calendar--HeaderButton", children: i === (visibleDuration.months ?? 1) - 1 && (jsxRuntime.jsx(Button, { slot: "next", size: "xsmall", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgChevronRightIcon, {}) })) })] }), jsxRuntime.jsx($dfd62f934fc76fed$export$5bd780d491cfc46c, { offset: { months: i }, className: `bcds-react-aria-Calendar--Grid`, weekdayStyle: "short", children: (date) => (jsxRuntime.jsx($dfd62f934fc76fed$export$5d847498420df57b, { className: "bcds-react-aria-Calendar--Cell", date: date })) })] }, i))) }));
|
|
28217
28478
|
}
|
|
28218
28479
|
|
|
28219
|
-
var css_248z$
|
|
28220
|
-
styleInject(css_248z$
|
|
28480
|
+
var css_248z$s = ".bcds-Callout {\n display: flex;\n width: 100%;\n box-sizing: border-box;\n padding: var(--layout-padding-medium) var(--layout-padding-large);\n border-radius: var(--layout-border-radius-medium)\n var(--layout-border-radius-none) var(--layout-border-radius-none)\n var(--layout-border-radius-medium);\n}\n\n.bcds-Callout--Container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n gap: var(--layout-margin-small);\n}\n\n.bcds-Callout--Container > .bcds-Callout--Title {\n font: var(--typography-bold-large-body);\n color: var(--typography-color-primary);\n}\n\n.bcds-Callout--Container > .bcds-Callout--Description {\n font: var(--typography-regular-body);\n color: var(--typography-color-secondary);\n}\n\n/* Theme - light grey (default) */\n.bcds-Callout.lightGrey {\n background-color: var(--surface-color-background-light-gray);\n border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\n}\n\n/* Theme - light blue */\n.bcds-Callout.lightBlue {\n background-color: var(--theme-blue-10);\n border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\n}\n\n/* Theme - light gold */\n.bcds-Callout.lightGold {\n background-color: var(--theme-gold-10);\n border-left: var(--layout-border-width-large) solid var(--theme-primary-blue);\n}\n\n/* Theme - blue */\n.bcds-Callout.Blue {\n background-color: var(--surface-color-background-dark-blue);\n border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\n}\n\n.bcds-Callout.Blue .bcds-Callout--Title {\n color: var(--typography-color-primary-invert);\n}\n\n.bcds-Callout.Blue .bcds-Callout--Description {\n color: var(--typography-color-secondary-invert);\n}\n\n/* Theme - grey */\n.bcds-Callout.Grey {\n background-color: var(--theme-gray-80);\n border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\n}\n\n.bcds-Callout.Grey .bcds-Callout--Title {\n color: var(--typography-color-primary-invert);\n}\n\n.bcds-Callout.Grey .bcds-Callout--Description {\n color: var(--typography-color-secondary-invert);\n}\n\n/* Theme - black */\n.bcds-Callout.Black {\n background-color: var(--theme-gray-100);\n border-left: var(--layout-border-width-large) solid var(--theme-primary-gold);\n}\n\n.bcds-Callout.Black .bcds-Callout--Title {\n color: var(--typography-color-primary-invert);\n}\n\n.bcds-Callout.Black .bcds-Callout--Description {\n color: var(--typography-color-secondary-invert);\n}\n\n/* Border disabled */\n.bcds-Callout.lightGrey.noBorder,\n.bcds-Callout.lightGold.noBorder,\n.bcds-Callout.lightBlue.noBorder,\n.bcds-Callout.Blue.noBorder,\n.bcds-Callout.Grey.noBorder,\n.bcds-Callout.Black.noBorder {\n border-left: none;\n border-radius: var(--layout-border-radius-none);\n}\n";
|
|
28481
|
+
styleInject(css_248z$s);
|
|
28221
28482
|
|
|
28222
28483
|
function Callout({ variant = "lightGrey", title, description, buttons, role = "note", isLeftBorderDisabled = false, children, ...props }) {
|
|
28223
28484
|
return (jsxRuntime.jsx("div", { className: `bcds-Callout ${variant} ${isLeftBorderDisabled ? "noBorder" : ""}`, ...props, role: role, children: children ? (children) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "bcds-Callout--Container", "aria-labelledby": "callout-title", role: role, children: [title && (jsxRuntime.jsx("span", { className: "bcds-Callout--Title", id: "callout-title", children: title })), description && (jsxRuntime.jsx("span", { className: "bcds-Callout--Description", children: description })), buttons && (jsxRuntime.jsx(ButtonGroup, { alignment: "start", orientation: "horizontal", children: buttons }))] }) })) }));
|
|
@@ -28232,30 +28493,37 @@ function SvgDashIcon$1({ id = "dash-icon" }) {
|
|
|
28232
28493
|
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" }) }));
|
|
28233
28494
|
}
|
|
28234
28495
|
|
|
28235
|
-
var css_248z$
|
|
28236
|
-
styleInject(css_248z$
|
|
28496
|
+
var css_248z$r = ".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";
|
|
28497
|
+
styleInject(css_248z$r);
|
|
28237
28498
|
|
|
28238
28499
|
function Checkbox({ value, children, ...props }) {
|
|
28239
28500
|
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$1, {})] }), jsxRuntime.jsxs("span", { className: "label", children: [jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), " ", isRequired && "(required)"] })] })) }));
|
|
28240
28501
|
}
|
|
28241
28502
|
|
|
28242
|
-
var css_248z$
|
|
28243
|
-
styleInject(css_248z$
|
|
28503
|
+
var css_248z$q = ".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";
|
|
28504
|
+
styleInject(css_248z$q);
|
|
28244
28505
|
|
|
28245
28506
|
function CheckboxGroup({ orientation = "vertical", label, description, errorMessage, flexWrap = "nowrap", children, ...props }) {
|
|
28246
28507
|
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 })] }))] })) }));
|
|
28247
28508
|
}
|
|
28248
28509
|
|
|
28249
|
-
var css_248z$
|
|
28250
|
-
styleInject(css_248z$
|
|
28510
|
+
var css_248z$p = ".bcds-react-aria-DatePicker {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n background-color: var(--surface-color-forms-default);\n align-self: flex-start;\n width: 100%;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n.bcds-react-aria-DatePicker--Group {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n gap: var(--layout-margin-small);\n}\n.bcds-react-aria-DatePicker--Input {\n display: inline;\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n align-items: center;\n white-space: nowrap;\n border: none;\n}\n\n/* Sizing */\n.bcds-react-aria-DatePicker.small > .bcds-react-aria-DatePicker--Group {\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n height: 32px;\n}\n.bcds-react-aria-DatePicker.small .bcds-react-aria-DatePicker--Input {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-DatePicker.medium > .bcds-react-aria-DatePicker--Group {\n padding: var(--layout-padding-xsmall) 0.75rem;\n height: 40px;\n}\n.bcds-react-aria-DatePicker.medium .bcds-react-aria-DatePicker--Input {\n font: var(--typography-regular-body);\n}\n\n/* Label */\n.bcds-react-aria-DatePicker--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Required indicator */\n.bcds-react-aria-DatePicker--Label.required {\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n/* Description */\n.bcds-react-aria-DatePicker--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Error message */\n.bcds-react-aria-DatePicker--Error {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid] > .bcds-react-aria-DatePicker--Group {\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid]\n > .bcds-react-aria-DatePicker--Group\n > svg {\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n/* Format helper text */\n.bcds-react-aria-DatePicker--FormatHelpText {\n unicode-bidi: embed;\n direction: ltr;\n}\n\n/* Hover and focus */\n.bcds-react-aria-DatePicker--Group[data-hovered] {\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n > .bcds-react-aria-DatePicker--Group {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n > .bcds-react-aria-DatePicker--Group:has(\n .bcds-react-aria-Button[data-focus-visible]\n ) {\n outline: none; /* Hide focus ring when button is focused */\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n .bcds-react-aria-DatePicker--Segment {\n outline: none;\n}\n.bcds-react-aria-DatePicker--Segment[data-focused] {\n outline: none;\n border-radius: var(--layout-border-radius-small);\n background-color: var(--surface-color-primary-default);\n color: var(--typography-color-primary-invert);\n padding: var(--layout-padding-hair);\n margin: var(--layout-margin-none) var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker > .bcds-react-aria-Button[data-focused] {\n outline: none;\n}\n\n/* Disabled and read-only */\n.bcds-react-aria-DatePicker[data-readonly]\n > .bcds-react-aria-DatePicker--Group {\n cursor: not-allowed;\n}\n.bcds-react-aria-DatePicker--Segment[data-readonly][data-focused] {\n background-color: var(--surface-color-forms-disabled);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-DatePicker[data-disabled]\n > .bcds-react-aria-DatePicker--Group {\n background-color: var(--surface-color-forms-disabled);\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
28511
|
+
styleInject(css_248z$p);
|
|
28251
28512
|
|
|
28252
|
-
var css_248z$
|
|
28253
|
-
styleInject(css_248z$
|
|
28513
|
+
var css_248z$o = ".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";
|
|
28514
|
+
styleInject(css_248z$o);
|
|
28254
28515
|
|
|
28255
28516
|
function Dialog({ isCloseable = true, role = "dialog", children, ...props }) {
|
|
28256
28517
|
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 })] }) })) }));
|
|
28257
28518
|
}
|
|
28258
28519
|
|
|
28520
|
+
var css_248z$n = ".bcds-react-aria-Separator {\n border: none;\n border-radius: var(--layout-border-radius-circular);\n background-color: var(--surface-color-border-default);\n}\n\n/* Orientation */\n.bcds-react-aria-Separator:not([aria-orientation=\"vertical\"]) {\n margin: var(--layout-margin-small) var(--layout-margin-none);\n align-self: stretch;\n width: auto;\n}\n\n.bcds-react-aria-Separator[aria-orientation=\"vertical\"] {\n margin: var(--layout-margin-none) var(--layout-margin-small);\n align-self: stretch;\n height: auto;\n}\n\n/* Sizing */\n.bcds-react-aria-Separator.small:not([aria-orientation=\"vertical\"]) {\n height: var(--layout-border-width-small);\n}\n.bcds-react-aria-Separator.small[aria-orientation=\"vertical\"] {\n width: var(--layout-border-width-small);\n}\n.bcds-react-aria-Separator.medium:not([aria-orientation=\"vertical\"]) {\n height: var(--layout-border-width-medium);\n}\n.bcds-react-aria-Separator.medium[aria-orientation=\"vertical\"] {\n width: var(--layout-border-width-medium);\n}\n.bcds-react-aria-Separator.large:not([aria-orientation=\"vertical\"]) {\n height: var(--layout-border-width-large);\n}\n.bcds-react-aria-Separator.large[aria-orientation=\"vertical\"] {\n width: var(--layout-border-width-large);\n}\n";
|
|
28521
|
+
styleInject(css_248z$n);
|
|
28522
|
+
|
|
28523
|
+
function Separator({ size = "medium", ...props }) {
|
|
28524
|
+
return (jsxRuntime.jsx($431f98aba6844401$export$1ff3c3f08ae963c0, { className: `bcds-react-aria-Separator ${size}`, ...props }));
|
|
28525
|
+
}
|
|
28526
|
+
|
|
28259
28527
|
/* The component implements the Calendar icon from Font Awesome: https://fontawesome.com/icons/calendar */
|
|
28260
28528
|
function SvgCalendarIcon({ ...props }) {
|
|
28261
28529
|
return (jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 640 640", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsxRuntime.jsx("path", { d: "M216 64C229.3 64 240 74.7 240 88L240 128L400 128L400 88C400 74.7 410.7 64 424 64C437.3 64 448 74.7 448 88L448 128L480 128C515.3 128 544 156.7 544 192L544 480C544 515.3 515.3 544 480 544L160 544C124.7 544 96 515.3 96 480L96 192C96 156.7 124.7 128 160 128L192 128L192 88C192 74.7 202.7 64 216 64zM216 176L160 176C151.2 176 144 183.2 144 192L144 240L496 240L496 192C496 183.2 488.8 176 480 176L216 176zM144 288L144 480C144 488.8 151.2 496 160 496L480 496C488.8 496 496 488.8 496 480L496 288L144 288z", fill: "currentColor" }) }));
|
|
@@ -28282,21 +28550,21 @@ function useFormatHelpText(props) {
|
|
|
28282
28550
|
}
|
|
28283
28551
|
function DatePicker({ size = "medium", label, description, errorMessage, showFormatHelpText = true, isRequired = false, isCalendarDisabled = false, isBrowserLocaleUsed = false, ...props }) {
|
|
28284
28552
|
const formatHelpText = useFormatHelpText({ showFormatHelpText });
|
|
28285
|
-
const datePicker = (jsxRuntime.jsx($06d5b8ec9ee5d538$export$5109c6dd95d8fb00, { className: `bcds-react-aria-DatePicker ${size}`, ...props, children: ({ isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-DatePicker--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-DatePicker--Label required", children: "(required)" }))] })), jsxRuntime.jsxs($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: "bcds-react-aria-DatePicker--Group", children: [jsxRuntime.jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: "bcds-react-aria-DatePicker--Input", children: (segment) => (jsxRuntime.jsx($40825cdb76e74f70$export$336ab7fa954c4b5f, { className: "bcds-react-aria-DatePicker--Segment", segment: segment })) }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {}), !isCalendarDisabled && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { size: "xsmall", variant: "secondary", isIconButton: true, children: jsxRuntime.jsx(SvgCalendarIcon, {}) }), jsxRuntime.jsx($07b14b47974efb58$export$5b6b19405a83ff9d, { children: jsxRuntime.jsx(Dialog, { isCloseable: false, children: jsxRuntime.jsx(Calendar, {}) }) })] }))] }), (description || showFormatHelpText) && (jsxRuntime.jsxs($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-DatePicker--Description`, children: [showFormatHelpText && (jsxRuntime.
|
|
28286
|
-
|
|
28287
|
-
|
|
28553
|
+
const datePicker = (jsxRuntime.jsx($06d5b8ec9ee5d538$export$5109c6dd95d8fb00, { className: `bcds-react-aria-DatePicker ${size}`, ...props, children: ({ isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-DatePicker--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-DatePicker--Label required", children: "(required)" }))] })), jsxRuntime.jsxs($a049562f99e7db0e$export$eb2fcfdbd7ba97d4, { className: "bcds-react-aria-DatePicker--Group", children: [jsxRuntime.jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: "bcds-react-aria-DatePicker--Input", children: (segment) => (jsxRuntime.jsx($40825cdb76e74f70$export$336ab7fa954c4b5f, { className: "bcds-react-aria-DatePicker--Segment", segment: segment })) }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {}), !isCalendarDisabled && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Button, { size: "xsmall", variant: "secondary", isIconButton: true, children: jsxRuntime.jsx(SvgCalendarIcon, {}) }), jsxRuntime.jsx($07b14b47974efb58$export$5b6b19405a83ff9d, { children: jsxRuntime.jsx(Dialog, { isCloseable: false, children: jsxRuntime.jsx(Calendar, {}) }) })] }))] }), (description || showFormatHelpText) && (jsxRuntime.jsxs($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-DatePicker--Description`, children: [showFormatHelpText && (jsxRuntime.jsx(jsxRuntime.Fragment, { children: isBrowserLocaleUsed
|
|
28554
|
+
? formatHelpText
|
|
28555
|
+
: "Format: year - month - day" })), showFormatHelpText && description && jsxRuntime.jsx(Separator, { size: "small" }), description && jsxRuntime.jsx("div", { children: description })] })), jsxRuntime.jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-DatePicker--Error", children: errorMessage })] })) }));
|
|
28288
28556
|
return isBrowserLocaleUsed ? (datePicker) : (jsxRuntime.jsx($18f2051aff69b9bf$export$a54013f0d02a8f82, { locale: "en-CA", children: datePicker }));
|
|
28289
28557
|
}
|
|
28290
28558
|
|
|
28291
|
-
var css_248z$
|
|
28292
|
-
styleInject(css_248z$
|
|
28559
|
+
var css_248z$m = ".bcds-bc-logo--whiteFill {\n fill: #ffffff;\n stroke-width: 0px;\n}\n\n.bcds-bc-logo--blueFill {\n fill: #234075;\n stroke-width: 0px;\n}\n\n.bcds-bc-logo--goldFill {\n fill: #e3a82b;\n stroke-width: 0px;\n}\n\n.bcds-bc-logo--noFill {\n fill: none;\n stroke-width: 0px;\n}\n";
|
|
28560
|
+
styleInject(css_248z$m);
|
|
28293
28561
|
|
|
28294
28562
|
function SvgBcLogo({ id = "bcgov-logo" }) {
|
|
28295
28563
|
return (jsxRuntime.jsxs("svg", { id: id, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 847.65 327.01", children: [jsxRuntime.jsx("path", { d: "M109.59,226.32c44.7,0,106.54,25.17,151.41,25.17,32.02,0,63.26-8.54,81.04-21.13,1.24-7.39,1.9-14.97,1.9-22.72,0-75.13-60.91-136.04-136.04-136.04s-136.04,60.91-136.04,136.04c0,7.65.64,15.15,1.86,22.46,4.9-.91,21.57-3.79,35.87-3.79Z", className: "bcds-bc-logo--whiteFill" }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "415.4", y: "252.98", width: "314.66", height: "3.82", className: "bcds-bc-logo--goldFill" }), jsxRuntime.jsx("path", { d: "M423.47,116.64c0-6.39-.45-8.08-4.76-8.43l-3-.21c-.49-.39-.35-2.12.1-2.16,5.17-.46,11.69-.69,20.6-.69,6.04,0,11.79.43,16.1,2.42,4.12,1.81,7.28,5.26,7.28,10.79,0,6.22-4.03,9.41-9.77,11.83,0,.86.77,1.12,1.82,1.29,5.17.86,12.84,5.18,12.84,14.42,0,10.01-8.24,16.75-25.49,16.75-2.78,0-7.47-.26-11.5-.26s-7.47.17-11.02.26c-.57-.26-.77-1.64-.19-2.16l1.73-.26c5.08-.78,5.27-1.73,5.27-10.79v-32.8ZM431.32,128.12c0,2.42.1,2.59,4.98,2.42,9.77-.35,15.04-2.94,15.04-11.05s-7-11.65-14.28-11.65c-2.11,0-3.55.17-4.41.52-.96.26-1.34.69-1.34,2.24v17.52ZM431.32,148.14c0,3.11.19,7.51,2.01,9.41,1.82,1.98,4.7,2.42,7.57,2.42,8.53,0,15.04-3.45,15.04-12.08,0-6.82-3.83-14.76-19.07-14.76-5.17,0-5.56.52-5.56,2.24v12.77Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M531.26,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.06-.07,10.15-.22c.49.22.65,1.55.16,1.84l-2.04.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.04.22c.49.29.33,1.62-.16,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.66-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M576.66,151.53c0,7.74.15,8.85,4.6,9.22l2.45.22c.46.29.31,1.62-.15,1.84-4.37-.15-6.98-.22-10.05-.22s-5.75.07-10.66.22c-.46-.22-.62-1.47,0-1.84l2.76-.22c4.37-.37,4.75-1.48,4.75-9.22v-32.96c0-2.28,0-2.36-2.3-2.36h-4.22c-3.3,0-7.51.15-9.43,1.84-1.84,1.62-2.61,3.24-3.45,5.09-.62.44-1.69.07-1.99-.52,1.22-3.32,2.38-8.04,2.91-10.98.23-.15,1.23-.22,1.46,0,.46,2.36,2.99,2.29,6.52,2.29h31.05c4.14,0,4.83-.15,5.98-2.06.38-.15,1.23-.07,1.38.22-.84,3.02-1.38,9-1.15,11.21-.31.59-1.61.59-1.99.15-.23-1.84-.77-4.57-1.92-5.38-1.76-1.25-4.68-1.84-8.89-1.84h-5.44c-2.3,0-2.22.07-2.22,2.51v32.81Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M609.53,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.05-.07,10.15-.22c.49.22.66,1.55.17,1.84l-2.05.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.05.22c.49.29.33,1.62-.17,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.65-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M646.2,163.57c-7.31,0-11.92-1.92-13.57-2.73-1.04-1.62-2.18-6.86-2.35-10.32.44-.52,1.74-.66,2.09-.22,1.31,3.76,4.87,10.98,14.96,10.98,7.31,0,10.87-4.05,10.87-8.48,0-3.24-.78-6.86-7.13-10.32l-8.26-4.57c-4.35-2.43-9.4-6.64-9.4-12.68,0-7,6.44-12.68,17.75-12.68,2.7,0,5.83.44,8.09.96,1.13.29,2.35.44,3.04.44.78,1.77,1.57,5.9,1.57,9-.35.44-1.74.66-2.18.22-1.13-3.54-3.48-8.33-11.83-8.33s-10.35,4.79-10.35,8.18c0,4.28,4.18,7.38,7.39,9.07l6.96,3.69c5.48,2.88,10.88,7.15,10.88,14.16,0,8.11-7.22,13.64-18.53,13.64Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M689.99,138.78c-3.81,0-3.96.15-3.96,2.36v10.4c0,7.74.4,8.77,4.84,9.22l2.3.22c.48.29.32,1.62-.16,1.84-4.28-.15-6.98-.22-10.08-.22-3.41,0-6.11.15-9.2.22-.47-.22-.63-1.4-.16-1.84l1.35-.22c4.45-.74,4.6-1.48,4.6-9.22v-26.54c0-7.74-.55-8.99-4.68-9.29l-2.06-.15c-.48-.29-.32-1.62.16-1.84,3.89.07,6.58.22,10,.22,3.1,0,5.79-.07,9.2-.22.48.22.63,1.55.16,1.84l-1.51.15c-4.6.44-4.76,1.55-4.76,9.29v8.48c0,2.28.16,2.36,3.96,2.36h22.69c3.81,0,3.97-.07,3.97-2.36v-8.48c0-7.74-.16-8.85-4.84-9.29l-1.51-.15c-.48-.29-.32-1.62.16-1.84,3.65.15,6.35.22,9.6.22s5.79-.07,9.36-.22c.48.22.63,1.55.16,1.84l-1.66.15c-4.6.44-4.76,1.55-4.76,9.29v26.54c0,7.74.16,8.7,4.76,9.22l1.9.22c.47.29.32,1.62-.16,1.84-3.81-.15-6.51-.22-9.6-.22-3.25,0-6.11.07-9.6.22-.48-.22-.63-1.4-.16-1.84l1.51-.22c4.84-.74,4.84-1.48,4.84-9.22v-10.4c0-2.21-.16-2.36-3.97-2.36h-22.69Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M378.06,179.01c6.52-5.07,14.83-7.57,24.12-7.57,4.82,0,11.61.98,15.81,2.14,1.07.27,1.7.45,2.5.36.09,2.05.54,7.65,1.25,13.09-.45.62-1.79.71-2.41.18-1.34-6.05-5.36-13-18.31-13-13.67,0-25.28,8.64-25.28,27.06s11.88,29.02,26.53,29.02c11.52,0,16.62-7.48,18.67-12.73.63-.44,1.97-.27,2.32.36-.62,4.63-2.95,10.5-4.29,12.2-1.07.18-2.14.53-3.13.89-1.97.71-8.4,2.05-14.11,2.05-8.04,0-15.72-1.6-22.24-5.96-7.15-4.9-12.69-12.99-12.69-24.48,0-9.88,4.47-18.34,11.26-23.59Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M426.92,207.81c0-14.75,11.61-26.03,27.56-26.03,17.88,0,26.86,12.31,26.86,25.29,0,14.89-11.92,25.73-26.86,25.73-17.19,0-27.56-11.72-27.56-25ZM473.6,209.35c0-12.17-5.65-25.29-20.44-25.29-8.05,0-18.5,5.24-18.5,21.38,0,10.91,5.57,25.07,20.82,25.07,9.29,0,18.12-6.64,18.12-21.16Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M568.68,201.47c0-4.57-.16-13.05-1.49-15.26-.55-.89-1.95-1.4-3.91-1.55l-1.95-.15c-.47-.52-.31-1.47.15-1.77,2.97.15,5.86.22,8.91.22,3.28,0,5.39-.08,8.21-.22.62.37.55,1.33.16,1.77l-1.88.15c-1.95.15-3.44.81-3.91,1.77-1.09,2.43-1.09,10.91-1.09,15.04v8.33c0,6.42-1.1,13.2-5.47,17.62-3.36,3.47-9.14,5.38-14.93,5.38-5.39,0-10.79-.96-14.62-4.05-4.14-3.24-6.1-8.63-6.1-17.4v-17.4c0-7.67-.16-8.92-4.69-9.29l-1.96-.15c-.47-.29-.31-1.55.15-1.77,3.91.15,6.57.22,9.69.22s5.78-.08,9.61-.22c.47.22.63,1.47.16,1.77l-1.88.15c-4.53.37-4.69,1.62-4.69,9.29v15.93c0,11.87,3.91,19.69,15.87,19.69,11.33,0,15.63-8.41,15.63-19.61v-8.48Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M659.52,192.26c0-5.51-.35-6.93-4.23-7.22l-2.77-.27c-.31-.28-.48-1.78.09-1.82,4.67-.35,10.54-.59,18.57-.59,5.44,0,10.62.37,14.51,2.08,3.71,1.57,6.56,4.54,6.56,9.31,0,5.36-3.63,8.12-8.81,10.2,0,.75.69.97,1.64,1.12,4.67.74,11.58,4.47,11.58,12.44,0,8.64-7.43,14.45-22.98,14.45-2.5,0-6.74-.22-10.37-.22s-6.74.15-9.93.22c-.52-.22-.69-1.41-.17-1.86l1.55-.22c4.58-.67,4.75-1.49,4.75-9.31v-28.3ZM666.6,202.16c0,2.09.09,2.24,4.49,2.09,8.81-.3,13.56-2.53,13.56-9.53s-6.3-10.05-12.87-10.05c-1.9,0-3.2.15-3.97.45-.87.22-1.21.59-1.21,1.94v15.12ZM666.6,219.44c0,2.68.17,6.48,1.81,8.12,1.64,1.71,4.23,2.08,6.82,2.08,7.69,0,13.56-2.98,13.56-10.43,0-5.88-3.45-12.73-17.19-12.73-4.67,0-5.01.44-5.01,1.94v11.02Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M518.75,160.97l-2.05-.18c-.41-.04-.78-.1-1.13-.15-2.99-.53-4.19-3.2-5.6-5.67l-7.08-12.32c-1.22-2.05-2.53-4.82-5.33-5.21,7.25-.87,13.81-5.06,13.81-12.24,0-8.3-8.21-12.01-16.52-12.01-4.98,0-9.52.13-14.59.13-2.79,0-6.12-.13-8.92-.13-1.55,0-1.57.32-1.57,1.18,0,1.28.54.92,2.19,1.02,5.9.33,5.68,1.43,5.68,6.49v32.31c0,4.62.4,6-4.46,6.44,0,0-.74.08-1.17.12l-2.06.21c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.12,3.03-.12,2.69-.08,5.38-.28,8.06-.28s5.29.21,7.95.29h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.07-.2c-.42-.05-1.15-.11-1.15-.11-4.9-.33-4.6-1.71-4.6-6.46v-12.17c0-.71-.09-2.61.44-3.16.44-.48,1.22-.4,1.92-.4,6.64,0,6.55.63,9.7,6.16l8.56,15.4c.7,1.19,1.22,2.69,2.97,2.69h7.44c.94.03,1.92.06,3.01.1.49-.22.65-1.4.16-1.84ZM488.92,136.74c-1.49,0-4.46.55-4.46-1.42v-14.14c0-5.53.18-6.32,6.82-6.32,7.78,0,12.58,3.95,12.58,11.22,0,3.16-1.14,6.08-4.02,8.06-3.32,2.29-6.9,2.61-10.92,2.61Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M490.53,194.2c0-7.74-.16-8.92-5.27-9.29l-2.03-.15c-.49-.3-.32-1.62.16-1.84,4.54.15,7.3.22,10.54.22s5.92-.07,9.98-.22c.49.22.65,1.55.16,1.84l-1.95.15c-4.78.37-4.95,1.55-4.95,9.29v25.66c0,4.64.24,6.56,1.7,7.96.89.81,2.43,1.7,8.84,1.7,6.89,0,8.6-.3,9.9-.96,1.62-.89,3.73-3.54,5.35-7.3.49-.37,2.03-.07,2.03.44,0,.81-2.27,8.33-3.41,10.32-4.13-.15-11.84-.22-20.2-.22h-7.46c-3.41,0-6,.07-10.54.22-.49-.22-.65-1.4-.16-1.84l2.43-.22c4.7-.44,4.87-1.48,4.87-9.22v-26.54Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M707.79,194.34c0-7.81-.16-9.07-4.86-9.44l-1.99-.15c-.48-.3-.32-1.62.16-1.84,3.98.15,6.69.22,10.03.22s5.89-.07,9.87-.22c.48.22.64,1.55.16,1.84l-1.99.15c-4.7.37-4.86,1.62-4.86,9.44v26.25c0,7.82.16,8.85,4.86,9.36l1.99.22c.48.3.32,1.62-.16,1.84-3.98-.15-6.69-.22-9.87-.22-3.35,0-6.05.07-10.03.22-.48-.22-.64-1.4-.16-1.84l1.99-.22c4.7-.52,4.86-1.55,4.86-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M644.16,229.94c-.41-.04-1.17-.1-1.17-.1-.84-.08-1.59-.2-2.19-.86-1.03-1.1-.95-4.23-.95-5.48v-32.31c0-1.41-.34-4.46.69-5.56.52-.58,1.59-.67,2.55-.73h0c.58-.05.6-.05,1.11-.07l2.05-.15c.49-.3.33-1.62-.16-1.84-1.09.04-2.09.02-3.03.05h0s-8.7,0-8.7,0c-.95,0-1.81,0-2.32,1.02l-17.73,36.92-15.66-35.67c-.52-1.25-.6-2.27-2.24-2.27h-9.05c-.94-.03-1.98-.02-3.08-.06-.49.22-.66,1.55-.16,1.84l2.05.15c.42.03,1.19.09,1.19.09,3.4.22,3.61.98,3.3,4.55l-2.67,34.65c-.23,3.48-.42,5.32-4.07,5.66,0,0-.77.1-1.19.14l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,3-.1,3-.1,1.85-.09,3.73-.25,5.61-.25,2.03,0,4.06.19,6.1.27h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.04-.22c-.54-.04-1.14-.1-1.14-.1-5.26-.36-5.14-4.07-4.81-8.62l2.5-32.23h.6l16.95,39.66c.17.55.43,1.49,1.29,1.49.78,0,1.03-.86,1.29-1.41l19.1-40.68h.6v35.44c0,1.41.17,4.3-1.29,5.4-.76.57-3.25.91-3.25.91-.34.05-.7.1-1.11.15l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,2.99-.1,2.99-.1,2.77-.08,5.59-.28,8.41-.28,2.03,0,6,.19,6,.19.95.03,2.02.13,3.12.17.49-.22.66-1.4.16-1.84l-2.05-.22Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M777.13,230.14l-.28-.22c-.41-.04-.77-.09-1.11-.15-3.19-.71-4.43-4.55-5.61-7.29l-16.41-38.83c-.16-.47-.49-1.47-1.14-1.47-.89,0-1.14,1.08-1.38,1.7l-15.68,38.76c-.57,1.47-2.03,5.03-3.09,6.11-.81.83-1.86.99-2.99,1.1,0,0-.88.08-1.31.13l-1.93.2c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.11,3.03-.11,2.14-.03,4.29-.3,6.44-.3,1.81,0,3.61.19,5.41.27,0,0,1.94.07,3.03.11.49-.22.65-1.4.16-1.84l-2.05-.22c-.41-.04-1.11-.11-1.11-.11-1.89-.21-4.24-.55-4.24-2.62,0-1.39.65-3.02,1.14-4.25l2.44-5.8c1.22-2.78.73-3.1,3.98-3.1h11.05c3.9,0,3.33,0,5.04,3.95l2.6,5.88c.41,1.01,1.14,2.71,1.14,3.79,0,1.94-2.12,2.07-4.11,2.24,0,0-.66.06-1.23.1l-1.97.14c-.49.44-.33,1.62.17,1.84,1.09-.04,3.03-.12,3.03-.12,2.31-.08,4.64-.26,6.87-.26,2.85,0,5.69.19,8.54.27h0c.93.03.14.06,1.22.1.49-.22.65-1.4.16-1.84ZM755.64,211.89h-9.57c-.33,0-3,.31-3-.47,0-.24.17-.7.25-.94l5.75-14.23c.17-.39.75-2.35,1.41-2.35.5,0,1.17,2.03,1.33,2.35l5.66,13.29c0,.16.58,1.41.58,1.72,0,.86-1.91.62-2.41.62Z", className: "bcds-bc-logo--blueFill" })] }), jsxRuntime.jsx("rect", { width: "847.65", height: "327.01", className: "bcds-bc-logo--noFill" })] }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("polygon", { points: "295.89 176.17 301.27 178.4 313.19 170.08 295.89 176.17", className: "bcds-bc-logo--goldFill" }), jsxRuntime.jsx("path", { d: "M95.46,166.88l-14.14-4.97.71-1.73,15.92,5.31.07-.04,2.1-1.19.84-.53-17.36-7.39.73-1.82,38.75,15.67,1.28-.53-38.44-18.73.86-1.76,40.73,18.96.56-.29-39.49-22.4.81-1.68,57.03,31.03c.47-.86,1.44-2.44,1.95-3.28-21.68-20.39-42.61-35.69-42.61-35.69,0,0,21.52,14.41,48.07,27.81.88-1.09,1.6-1.97,2.53-3.01l-48.65-42.83,1.31-1.34,39.27,33.47-36.38-36.43,1.36-1.41,40.84,39.47-38.02-42.2,1.45-1.31,35.14,37.63-32.07-40.41,1.38-1.26,41.11,50.03c1.06-.92,1.95-1.61,3.06-2.46-12.44-26.91-26.02-48.8-26.02-48.8,0,0,14.46,21.28,33.96,43.56,1.19-.67,2.4-1.31,3.63-1.92l-.21-.13-28.81-57.5,1.71-.75,23.87,45.74-20.08-47.41,1.79-.8,23.08,51.9-19.45-53.37,1.84-.67,18.49,48.05-14.6-49.49,1.75-.65,19.22,61.38-.04.16.05-.02c1.28-.43,2.58-.81,3.89-1.16-1.46-29.48-5.82-54.7-5.82-54.7,0,0,5.4,25,15.08,52.87,1.35-.17,2.71-.31,4.07-.4l-.04-.06h.17l-.1-.14-5.17-64.11,1.87-.06,5,51.35-.86-51.48,1.96-.07,1.96,56.77,1.96-56.77,1.96.07-.86,51.48,5-51.35,1.87.06-5.17,64.11-.1.14h.03v.02s.07,0,.07,0c1.34.08,2.66.22,3.98.38,9.67-27.84,15.06-52.8,15.06-52.8,0,0-4.35,25.14-5.82,54.57,1.32.35,2.63.73,3.91,1.15l19.15-61.16,1.76.65-14.6,49.48,18.49-48.05,1.84.67-19.45,53.37,23.08-51.9,1.79.8-20.08,47.41,23.87-45.74,1.71.75-28.71,57.3.05.02c1.18.58,2.34,1.19,3.49,1.83,19.42-22.21,33.79-43.37,33.79-43.37,0,0-13.49,21.74-25.89,48.52,1.11.84,2.19,1.7,3.24,2.6l40.63-49.49,1.39,1.26-32.08,40.41,35.14-37.63,1.45,1.31-38.02,42.2,40.84-39.47,1.36,1.41-36.38,36.43,39.27-33.47,1.31,1.34-48.06,42.35.03.03c.84.94,1.65,1.9,2.44,2.88,26.39-13.34,47.71-27.62,47.71-27.62,0,0-20.72,15.16-42.29,35.4.59.99,1.55,2.67,2.09,3.69l56.22-30.61.81,1.69-44.88,25.45,46.68-21.72.86,1.76-43.48,21.19.83.29,44.24-17.89.74,1.82-41.12,17.49.77.32,27.4-9.13,4.13-2.88,1.37,1.05,9.02-3.01.71,1.73-7.8,2.75,11.27,8.6,3.61,2.01c-14.49-60.58-68.98-105.62-134-105.62s-121.42,46.63-134.73,108.82c.17-.08.34-.16.51-.24l1.65-.75,1.01-.47,19.01-10.66Z", className: "bcds-bc-logo--goldFill" })] }), jsxRuntime.jsx("path", { d: "M72.5,233.02s20.32-4.06,37.29-4.06c44.7,0,106.54,25.17,151.41,25.17,32.91,0,65.02-9.03,82.51-22.19,1.37-7.79,2.08-15.8,2.08-23.98,0-11.08-1.32-21.85-3.79-32.17l-18.7-10.43-21.95,15.39-14.76-5.75c-5,2.53-35.83,23.15-35.83,23.15l-11.84-8.57-12.7-2.51-16.93-12.33-19.42,13.33s-21.67,12.58-22.41,12.58-26.14-20.13-26.14-20.13l-11.7-12.33c-1.99,1.26-9.95,4.91-9.95,4.91l-.41.11-7.7-2.38-9.35-4.96-28.41,12.88c-.17.08-.34.16-.51.24-2,9.34-3.06,19.03-3.06,28.96,0,8.56.79,16.93,2.28,25.06Z", className: "bcds-bc-logo--blueFill" })] })] }));
|
|
28296
28564
|
}
|
|
28297
28565
|
|
|
28298
|
-
var css_248z$
|
|
28299
|
-
styleInject(css_248z$
|
|
28566
|
+
var css_248z$l = ".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";
|
|
28567
|
+
styleInject(css_248z$l);
|
|
28300
28568
|
|
|
28301
28569
|
/**
|
|
28302
28570
|
* A titled list of links for use in the Footer. Rendered inside a `<figure>`
|
|
@@ -28350,8 +28618,8 @@ function Form({ ...props }) {
|
|
|
28350
28618
|
return jsxRuntime.jsx($d3e0e05bdfcf66bd$export$a7fed597f4b8afd8, { ...props });
|
|
28351
28619
|
}
|
|
28352
28620
|
|
|
28353
|
-
var css_248z$
|
|
28354
|
-
styleInject(css_248z$
|
|
28621
|
+
var css_248z$k = ".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";
|
|
28622
|
+
styleInject(css_248z$k);
|
|
28355
28623
|
|
|
28356
28624
|
function Header({ children, logoLinkElement, logoImage = jsxRuntime.jsx(SvgBcLogo, { id: "bcgov-logo-header" }), skipLinks, title = "", titleElement = "span", }) {
|
|
28357
28625
|
function getLogo() {
|
|
@@ -28389,8 +28657,8 @@ function Header({ children, logoLinkElement, logoImage = jsxRuntime.jsx(SvgBcLog
|
|
|
28389
28657
|
}) })), title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "bcds-header--line" }), getTitle()] })), children] }) }));
|
|
28390
28658
|
}
|
|
28391
28659
|
|
|
28392
|
-
var css_248z$
|
|
28393
|
-
styleInject(css_248z$
|
|
28660
|
+
var css_248z$j = ".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";
|
|
28661
|
+
styleInject(css_248z$j);
|
|
28394
28662
|
|
|
28395
28663
|
function getIcon(variant) {
|
|
28396
28664
|
switch (variant) {
|
|
@@ -28410,8 +28678,8 @@ function InlineAlert({ variant = "info", title, description, isIconHidden = fals
|
|
|
28410
28678
|
return (jsxRuntime.jsxs("div", { className: `bcds-Inline-Alert ${variant} ${isCloseable ? "closeable" : null}`, ...props, children: [!isIconHidden && (jsxRuntime.jsx("span", { className: "bcds-Inline-Alert--icon", children: customIcon ? customIcon : getIcon(variant) })), jsxRuntime.jsx("div", { className: "bcds-Inline-Alert--container", role: role, "aria-labelledby": "alert-title", children: children ? (children) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && (jsxRuntime.jsx("span", { className: "title", id: "alert-title", children: title })), description && jsxRuntime.jsx("span", { className: "description", children: description }), buttons && (jsxRuntime.jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }), isCloseable && (jsxRuntime.jsx("span", { className: "bcds-Inline-Alert--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }));
|
|
28411
28679
|
}
|
|
28412
28680
|
|
|
28413
|
-
var css_248z$
|
|
28414
|
-
styleInject(css_248z$
|
|
28681
|
+
var css_248z$i = ".bcds-react-aria-Link {\n color: var(--typography-color-link);\n text-decoration: underline;\n text-underline-offset: var(--layout-padding-hair);\n cursor: pointer;\n}\n\n/* Icon slots */\n.bcds-react-aria-Link--Icon {\n display: inline-flex;\n flex-direction: row;\n vertical-align: text-bottom;\n margin: var(--layout-margin-none) var(--layout-margin-xsmall);\n}\n\n/* Sizing */\n.bcds-react-aria-Link.small {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-Link.medium {\n font: var(--typography-regular-body);\n}\n\n.bcds-react-aria-Link.large {\n font: var(--typography-regular-large-body);\n}\n\n/* Placeholder large button style */\n.bcds-react-aria-Button.large {\n min-height: 40px;\n}\n\n/* Hover */\n.bcds-react-aria-Link[data-hovered] {\n color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-Link[data-hovered].danger {\n color: var(--surface-color-primary-danger-button-hover);\n}\n\n/* Selected */\n.bcds-react-aria-Link[data-current] {\n color: var(--surface-color-border-active);\n}\n\n/* Focus */\n.bcds-react-aria-Link[data-focus-visible] {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n border-radius: var(--layout-border-radius-small);\n}\n\n/* Disabled */\n.bcds-react-aria-Link[data-disabled],\n.bcds-react-aria-Link[data-disabled].danger {\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n\n/* Danger */\n.bcds-react-aria-Link.danger {\n color: var(--typography-color-danger);\n}\n";
|
|
28682
|
+
styleInject(css_248z$i);
|
|
28415
28683
|
|
|
28416
28684
|
function Link({ children, size = "medium", danger = false, isButton = false, buttonVariant = "primary", isUnstyled = false, iconLeft, iconRight, ariaLabel, ...props }) {
|
|
28417
28685
|
return (jsxRuntime.jsxs($4f118338184dc1d9$export$a6c7ac8248d6e38a, { className: !isUnstyled
|
|
@@ -28421,29 +28689,45 @@ function Link({ children, size = "medium", danger = false, isButton = false, but
|
|
|
28421
28689
|
: undefined, "aria-label": ariaLabel, ...props, children: [iconLeft && (jsxRuntime.jsx("span", { className: "bcds-react-aria-Link--Icon", children: iconLeft })), children, iconRight && (jsxRuntime.jsx("span", { className: "bcds-react-aria-Link--Icon", children: iconRight }))] }));
|
|
28422
28690
|
}
|
|
28423
28691
|
|
|
28424
|
-
var css_248z$
|
|
28425
|
-
styleInject(css_248z$
|
|
28692
|
+
var css_248z$h = "/* 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";
|
|
28693
|
+
styleInject(css_248z$h);
|
|
28426
28694
|
|
|
28427
28695
|
function Modal({ children, ...props }) {
|
|
28428
28696
|
return (jsxRuntime.jsx($f3f84453ead64de5$export$2b77a92f1a5ad772, { className: "bcds-react-aria-Modal", ...props, children: children }));
|
|
28429
28697
|
}
|
|
28430
28698
|
|
|
28431
|
-
var css_248z$
|
|
28432
|
-
styleInject(css_248z$
|
|
28699
|
+
var css_248z$g = ".bcds-react-aria-ProgressBar {\n display: flex;\n flex-direction: column;\n gap: var(--layout-padding-xsmall);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n}\n\n/* Label */\n.bcds-react-aria-ProgressBar--Label {\n display: flex;\n flex-direction: row;\n gap: var(--layout-margin-medium);\n justify-content: space-between;\n}\n\n.bcds-react-aria-ProgressBar--Value {\n color: var(--typography-color-secondary);\n}\n\n/* Structure */\n.bcds-react-aria-ProgressBar--Track {\n position: relative;\n overflow: hidden;\n background-color: var(--surface-color-border-default);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-circular);\n}\n.bcds-react-aria-ProgressBar--Fill {\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n background: var(--surface-color-primary-default);\n border-radius: var(--layout-border-radius-circular);\n width: 100%;\n transform-origin: left;\n transform: scaleX(var(--percentage));\n transition: transform 200ms linear;\n\n @media (prefers-reduced-motion: reduce) {\n animation: none;\n }\n}\n\n/* Sizing */\n.bcds-react-aria-ProgressBar--Track.small {\n height: var(--layout-padding-hair);\n}\n.bcds-react-aria-ProgressBar--Track.medium {\n height: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-ProgressBar--Track.large {\n height: var(--layout-padding-small);\n}\n\n/* Indeterminate animation */\n.bcds-react-aria-ProgressBar:not([aria-valuenow])\n .bcds-react-aria-ProgressBar--Fill {\n background-color: var(--surface-color-primary-default);\n transform: scaleX(1);\n animation: indeterminate-bar 1.5s linear infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: indeterminate-bar-pulse 2s ease-in-out infinite;\n }\n}\n@keyframes indeterminate-bar {\n 0% {\n transform: translateX(-100%) scaleX(0.4);\n }\n 50% {\n transform: translateX(0%) scaleX(0.4);\n }\n 100% {\n transform: translateX(100%) scaleX(0.4);\n }\n}\n@keyframes indeterminate-bar-pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n}\n";
|
|
28700
|
+
styleInject(css_248z$g);
|
|
28701
|
+
|
|
28702
|
+
function ProgressBar({ size = "medium", valueLabel, ...props }) {
|
|
28703
|
+
return (jsxRuntime.jsx($0393f8ab869a0f1a$export$c17561cb55d4db30, { className: `bcds-react-aria-ProgressBar`, ...props, children: ({ percentage, valueText, isIndeterminate }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [valueLabel && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-ProgressBar--Label", children: [jsxRuntime.jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { children: valueLabel }), !isIndeterminate && (jsxRuntime.jsx("span", { className: "bcds-react-aria-ProgressBar--Value", children: valueText }))] })), jsxRuntime.jsx("div", { className: `bcds-react-aria-ProgressBar--Track ${size}`, children: jsxRuntime.jsx("div", { className: "bcds-react-aria-ProgressBar--Fill", style: {
|
|
28704
|
+
"--percentage": percentage + "%",
|
|
28705
|
+
} }) })] })) }));
|
|
28706
|
+
}
|
|
28707
|
+
|
|
28708
|
+
var css_248z$f = ".bcds-react-aria-ProgressCircle {\n display: flex;\n flex-direction: column;\n gap: var(--layout-padding-xsmall);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n}\n\n/* Label */\n.bcds-react-aria-ProgressCircle--Label {\n display: flex;\n flex-direction: column;\n gap: var(--layout-margin-hair);\n align-items: center;\n justify-content: center;\n}\n.bcds-react-aria-ProgressCircle--Value {\n color: var(--typography-color-secondary);\n}\n\n/* Structure */\nsvg.bcds-react-aria-ProgressCircle--Container {\n display: flex;\n align-self: center;\n fill: none;\n width: 100%;\n height: 100%;\n}\n.bcds-react-aria-ProgressCircle--Track {\n cx: 50%;\n cy: 50%;\n stroke: var(--theme-gray-30);\n}\n.bcds-react-aria-ProgressCircle--Fill {\n cx: 50%;\n cy: 50%;\n stroke: var(--theme-primary-blue);\n stroke-dasharray: 100 200;\n stroke-linecap: round;\n rotate: -90deg;\n transform-origin: center center;\n transition: 200ms linear;\n}\n\n/* Sizing */\nsvg.bcds-react-aria-ProgressCircle--Container.small {\n width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n stroke-width: var(--layout-border-width-medium);\n\n circle.bcds-react-aria-ProgressCircle--Track,\n circle.bcds-react-aria-ProgressCircle--Fill {\n r: calc(50% - var(--layout-border-width-medium) / 2);\n }\n}\nsvg.bcds-react-aria-ProgressCircle--Container.medium {\n width: var(--icons-size-large);\n height: var(--icons-size-large);\n stroke-width: var(--layout-border-width-medium);\n\n circle.bcds-react-aria-ProgressCircle--Track,\n circle.bcds-react-aria-ProgressCircle--Fill {\n r: calc(50% - var(--layout-border-width-medium) / 2);\n }\n}\nsvg.bcds-react-aria-ProgressCircle--Container.large {\n width: var(--icons-size-xlarge);\n height: var(--icons-size-xlarge);\n stroke-width: var(--layout-border-width-large);\n\n circle.bcds-react-aria-ProgressCircle--Track,\n circle.bcds-react-aria-ProgressCircle--Fill {\n r: calc(50% - var(--layout-border-width-large) / 2);\n }\n}\n\n/* Indeterminate animation */\n.bcds-react-aria-ProgressCircle:not([aria-valuenow])\n .bcds-react-aria-ProgressCircle--Fill {\n animation: indeterminate 1.5s linear infinite;\n\n @media (prefers-reduced-motion: reduce) {\n animation: indeterminate-circle-pulse 2s ease-in-out infinite;\n stroke-dashoffset: 0;\n }\n}\n\n@keyframes indeterminate {\n from {\n rotate: -90deg;\n }\n to {\n rotate: 270deg;\n }\n}\n@keyframes indeterminate-circle-pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.4;\n }\n}\n";
|
|
28709
|
+
styleInject(css_248z$f);
|
|
28710
|
+
|
|
28711
|
+
function ProgressCircle({ size = "medium", valueLabel, ...props }) {
|
|
28712
|
+
return (jsxRuntime.jsx($0393f8ab869a0f1a$export$c17561cb55d4db30, { className: "bcds-react-aria-ProgressCircle", ...props, children: ({ percentage, valueText, isIndeterminate }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("svg", { className: `bcds-react-aria-ProgressCircle--Container ${size}`, children: [jsxRuntime.jsx("circle", { className: "bcds-react-aria-ProgressCircle--Track" }), jsxRuntime.jsx("circle", { className: "bcds-react-aria-ProgressCircle--Fill", pathLength: "100", strokeDashoffset: 100 - (isIndeterminate || percentage == null ? 25 : percentage) })] }), valueLabel && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-ProgressCircle--Label", children: [jsxRuntime.jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { children: valueLabel }), !isIndeterminate && (jsxRuntime.jsx("span", { className: "bcds-react-aria-ProgressCircle--Value", children: valueText }))] }))] })) }));
|
|
28713
|
+
}
|
|
28714
|
+
|
|
28715
|
+
var css_248z$e = ".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";
|
|
28716
|
+
styleInject(css_248z$e);
|
|
28433
28717
|
|
|
28434
28718
|
function Radio({ value, children, ...props }) {
|
|
28435
28719
|
return (jsxRuntime.jsx($b6c3ddc6086f204d$export$d7b12c4107be0d61, { className: "bcds-react-aria-Radio", value: value, ...props, children: children }));
|
|
28436
28720
|
}
|
|
28437
28721
|
|
|
28438
|
-
var css_248z$
|
|
28439
|
-
styleInject(css_248z$
|
|
28722
|
+
var css_248z$d = ".bcds-react-aria-RadioGroup {\n display: flex;\n flex-direction: column;\n gap: var(--layout-margin-small);\n}\n\n/* Orientation */\n.bcds-react-aria-RadioGroup--options {\n display: inline-flex;\n}\n\n.bcds-react-aria-RadioGroup--options.vertical {\n flex-direction: column;\n gap: var(--layout-margin-small);\n}\n\n.bcds-react-aria-RadioGroup--options.horizontal {\n flex-direction: row;\n gap: var(--layout-margin-medium);\n}\n.bcds-react-aria-RadioGroup--options.horizontal.flex-wrap-nowrap {\n flex-wrap: nowrap;\n}\n.bcds-react-aria-RadioGroup--options.horizontal.flex-wrap-wrap {\n flex-wrap: wrap;\n}\n.bcds-react-aria-RadioGroup--options.horizontal.flex-wrap-nowrap {\n flex-wrap: wrap-reverse;\n}\n\n/* Parts */\n.bcds-react-aria-RadioGroup--label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n}\n\n.bcds-react-aria-RadioGroup--description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n\n.bcds-react-aria-RadioGroup--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";
|
|
28723
|
+
styleInject(css_248z$d);
|
|
28440
28724
|
|
|
28441
28725
|
function RadioGroup({ orientation = "vertical", label, description, children, errorMessage, flexWrap = "nowrap", ...props }) {
|
|
28442
28726
|
return (jsxRuntime.jsx($b6c3ddc6086f204d$export$a98f0dcb43a68a25, { className: "bcds-react-aria-RadioGroup", ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-RadioGroup--label", children: [label, " ", isRequired && "(required)"] })), jsxRuntime.jsx("div", { className: `bcds-react-aria-RadioGroup--options ${orientation} flex-wrap-${flexWrap}`, children: children }), description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-RadioGroup--description", children: description })), isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-RadioGroup--error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
28443
28727
|
}
|
|
28444
28728
|
|
|
28445
|
-
var css_248z$
|
|
28446
|
-
styleInject(css_248z$
|
|
28729
|
+
var css_248z$c = ".bcds-react-aria-Select {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Label above select input */\n.bcds-react-aria-Select--Label {\n color: var(--typography-color-secondary);\n font: var(--typography-regular-small-body);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n.bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {\n color: var(--typography-color-disabled);\n}\n\n/* Text description below select input */\n.bcds-react-aria-Select--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Error message */\n.bcds-react-aria-Select--Error {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n\n/* Error icon */\n.bcds-react-aria-Select[data-invalid]\n > .bcds-react-aria-Select--Button\n > svg:not(:last-child) {\n color: var(--icons-color-danger);\n}\n\n/* Select input equivalent */\n.bcds-react-aria-Select--Button {\n background-color: var(--surface-color-forms-default);\n border: 1px solid var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n gap: var(--layout-margin-small);\n align-items: center;\n padding: 0 12px;\n max-width: 100%;\n}\n.bcds-react-aria-Select--Button.invalid {\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select[data-invalid] > .bcds-react-aria-Select--Button {\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select--Button[data-disabled] {\n background-color: var(--surface-color-forms-disabled);\n cursor: not-allowed;\n}\n.bcds-react-aria-Select--Button[data-hovered] {\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Select--Button[data-focused] {\n border-color: var(--surface-color-border-active);\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-Select--Button[data-pressed] {\n border-color: var(--surface-color-border-active);\n}\n.bcds-react-aria-Select--Button.medium {\n height: 40px;\n}\n.bcds-react-aria-Select--Button.small {\n height: 32px;\n}\n.bcds-react-aria-Select--Button > .bcds-react-aria-SelectValue {\n font: var(--typography-regular-body);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: 0;\n}\n.bcds-react-aria-Select--Button > svg {\n flex-shrink: 0;\n}\n\n/* Dropdown menu panel */\n.bcds-react-aria-Select--Popover {\n background-color: var(--surface-color-forms-default);\n border: 1px solid var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n box-shadow: var(--surface-shadow-medium);\n box-sizing: border-box;\n overflow-y: auto;\n padding: var(--layout-padding-hair) var(--layout-padding-xsmall);\n width: var(\n --trigger-width\n ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */\n}\n.bcds-react-aria-Select--ListBox[data-focused] {\n outline: none;\n}\n.bcds-react-aria-Select--ListBox > .bcds-react-aria-Section:not(:first-child) {\n border-top: 1px solid var(--surface-color-border-default);\n margin-top: 1px;\n padding-top: 2px;\n}\n\n/* Header label within Section of multi-section Select */\n.bcds-react-aria-Select--Header {\n color: var(--typography-color-secondary);\n font: var(--typography-regular-small-body);\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n}\n\n/* ListBox option item */\n.bcds-react-aria-Select--ListBoxItem {\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n padding: var(--layout-padding-small);\n}\n.bcds-react-aria-Select--ListBoxItem[data-focused],\n.bcds-react-aria-Select--ListBoxItem[data-hovered] {\n background-color: var(--surface-color-secondary-button-hover);\n outline: none;\n}\n.bcds-react-aria-Select--ListBoxItem-icon {\n display: flex;\n align-items: center;\n justify-content: space-around;\n /* This `min-width` rule can cause horizontal overflow on very narrow Select\n instances, but if we leave it out, the icons will shrink instead. */\n min-width: 20px;\n}\n.bcds-react-aria-Select--ListBoxItem-Text-container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n.bcds-react-aria-Select--ListBoxItem-Text-label {\n font: var(--typography-regular-body);\n}\n.bcds-react-aria-Select--ListBoxItem.destructive {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem.destructive\n .bcds-react-aria-Select--ListBoxItem-Text-label {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem-Text-description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n";
|
|
28730
|
+
styleInject(css_248z$c);
|
|
28447
28731
|
|
|
28448
28732
|
/** Select displays a collapsible list of options and allows a user to select one of them. */
|
|
28449
28733
|
function Select({ items, sections, label, description, placeholder, size = "medium", errorMessage, ...props }) {
|
|
@@ -28496,36 +28780,36 @@ function SvgReactAriaIcon({ id = "react-aria-icon" }) {
|
|
|
28496
28780
|
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "200 206 800 790", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M720.67 205.995C867.583 205.995 986.679 325.091 986.68 472.003C986.68 590.753 908.865 691.325 801.446 725.521L979.312 948.055C994.438 966.98 980.963 995 956.736 995H795.612C778.743 995 762.715 987.629 751.734 974.823L697.365 911.421L493.126 653.39C457.134 607.918 489.518 540.979 547.511 540.977L720.67 540.971C758.758 540.971 789.635 510.091 789.635 472.003C789.634 433.915 758.758 403.038 720.67 403.038H429.939C404.955 403.038 388.623 391.886 373.994 373.623L277.349 252.966C262.194 234.045 275.664 205.996 299.905 205.995H720.67Z M396.605 720.706C407.798 705.406 430.443 704.843 442.381 719.568L503.816 797.018H502.786L535.569 838.934C548.074 854.358 549.943 877.191 538.047 893.09L476.638 972.545C465.692 986.707 448.803 995 430.903 995H242.276C218.18 995 204.665 967.248 219.523 948.278L337.992 797.018H337.923L396.605 720.706Z", fill: "#7F57FF" }) }) }));
|
|
28497
28781
|
}
|
|
28498
28782
|
|
|
28499
|
-
var css_248z$
|
|
28500
|
-
styleInject(css_248z$
|
|
28783
|
+
var css_248z$b = ".bcds-react-aria-Tag {\n color: var(--typography-color-primary);\n cursor: pointer;\n border: var(--layout-border-width-small) solid;\n display: flex;\n align-items: center;\n font: var(--typography-regular-label);\n width: fit-content;\n}\n.bcds-react-aria-Tag .react-aria-Button {\n background: none;\n border: none;\n color: var(--typography-color-primary);\n cursor: pointer;\n display: flex;\n margin: 0;\n padding: 0;\n}\n\n/* Tag colors */\n.bcds-react-aria-Tag.bc-blue {\n background-color: var(--theme-primary-blue);\n border-color: var(--theme-blue-90);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-blue .react-aria-Button {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-gold {\n background-color: var(--theme-primary-gold);\n border-color: var(--theme-blue-90);\n}\n.bcds-react-aria-Tag.blue {\n background-color: var(--support-surface-color-info);\n border-color: var(--support-border-color-info);\n}\n.bcds-react-aria-Tag.dark {\n background: var(--theme-gray-110);\n border-color: var(--theme-blue-90);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.dark .react-aria-Button {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.gray,\n.bcds-react-aria-Tag.grey {\n background-color: var(--theme-gray-20);\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Tag.green {\n background-color: var(--support-surface-color-success);\n border-color: var(--support-border-color-success);\n}\n.bcds-react-aria-Tag.red {\n background-color: var(--support-surface-color-danger);\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Tag.yellow {\n background-color: var(--support-surface-color-warning);\n border-color: var(--support-border-color-warning);\n}\n\n/* Tag style */\n.bcds-react-aria-Tag.rectangular {\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Tag.circular {\n border-radius: var(--layout-borderRadius-Circular, 9999px);\n}\n\n/* Tag size */\n.bcds-react-aria-Tag.medium {\n height: var(--layout-padding-xlarge);\n padding: var(--layout-padding-hair) var(--layout-padding-medium);\n gap: var(--layout-margin-medium);\n}\n.bcds-react-aria-Tag.small {\n height: var(--layout-padding-large);\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n gap: var(--layout-margin-small);\n}\n\n/* Selected */\n.bcds-react-aria-Tag[data-selected] {\n border-radius: var(--layout-border-radius-small);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-active);\n}\n\n/* Focused */\n.bcds-react-aria-Tag[data-focused] {\n outline: var(--layout-border-width-medium) solid\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Tag[data-disabled] {\n background-color: var(--surface-color-primary-button-disabled);\n border-color: var(--surface-color-border-default);\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
28784
|
+
styleInject(css_248z$b);
|
|
28501
28785
|
|
|
28502
28786
|
function Tag({ color = "blue", tagStyle = "rectangular", size = "small", icon, id, textValue, }) {
|
|
28503
28787
|
return (jsxRuntime.jsx($eaf9e70818b436db$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color} ${tagStyle} ${size}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, textValue, !isDisabled && allowsRemoving && (jsxRuntime.jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { "aria-label": `Remove ${textValue}`, slot: "remove", children: jsxRuntime.jsx("svg", { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { id: "Icons / Close", children: jsxRuntime.jsx("path", { id: "Vector", d: "M12.6004 3.03239L11.4684 1.90039L7.00039 6.36839L2.53239 1.90039L1.40039 3.03239L5.86839 7.50039L1.40039 11.9684L2.53239 13.1004L7.00039 8.63239L11.4684 13.1004L12.6004 11.9684L8.13239 7.50039L12.6004 3.03239Z", fill: "currentColor" }) }) }) }))] })) }));
|
|
28504
28788
|
}
|
|
28505
28789
|
|
|
28506
|
-
var css_248z$
|
|
28507
|
-
styleInject(css_248z$
|
|
28790
|
+
var css_248z$a = ".bcds-react-aria-TagGroup {\n color: var(--typography-color-primary);\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-TagGroup--Label,\n.bcds-react-aria-TagGroup--Text-description,\n.bcds-react-aria-TagGroup--Text-error {\n display: block;\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TagGroup--Text-error {\n display: flex;\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TagGroup--Text-error > svg {\n padding-right: var(--layout-padding-xsmall);\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
28791
|
+
styleInject(css_248z$a);
|
|
28508
28792
|
|
|
28509
28793
|
function TagGroup({ children, label, description, errorMessage, ...props }) {
|
|
28510
28794
|
return (jsxRuntime.jsxs($eaf9e70818b436db$export$67ea30858aaf75e3, { className: "bcds-react-aria-TagGroup", ...props, children: [label && (jsxRuntime.jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TagGroup--Label", children: label })), children, description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-TagGroup--Text-description", children: description })), errorMessage && (jsxRuntime.jsxs($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "errorMessage", className: "bcds-react-aria-TagGroup--Text-error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), errorMessage] }))] }));
|
|
28511
28795
|
}
|
|
28512
28796
|
|
|
28513
|
-
var css_248z$
|
|
28514
|
-
styleInject(css_248z$
|
|
28797
|
+
var css_248z$9 = ".bcds-react-aria-TagList {\n display: flex;\n flex-wrap: wrap;\n gap: var(--layout-padding-small);\n width: fit-content;\n}\n\n.bcds-react-aria-TagList.horizontal {\n flex-direction: row;\n}\n\n.bcds-react-aria-TagList.vertical {\n flex-direction: column;\n}\n";
|
|
28798
|
+
styleInject(css_248z$9);
|
|
28515
28799
|
|
|
28516
28800
|
function TagList({ items, orientation = "horizontal", renderEmptyState, ...props }) {
|
|
28517
28801
|
return (jsxRuntime.jsx($eaf9e70818b436db$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => $dbSRa$react.createElement(Tag, { ...item, key: item.id }) }));
|
|
28518
28802
|
}
|
|
28519
28803
|
|
|
28520
|
-
var css_248z$
|
|
28521
|
-
styleInject(css_248z$
|
|
28804
|
+
var css_248z$8 = "/* Medium size (default) */\n.bcds-react-aria-Text.medium {\n font: var(--typography-regular-body);\n}\n\n.bcds-react-aria-Text.medium b,\n.bcds-react-aria-Text.medium strong {\n font: var(--typography-bold-body);\n}\n\n.bcds-react-aria-Text.medium i,\n.bcds-react-aria-Text.medium em {\n font: var(--typography-italic-body);\n}\n\n/* Small size */\n.bcds-react-aria-Text.small {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-Text.small b,\n.bcds-react-aria-Text.small strong {\n font: var(--typography-bold-small-body);\n}\n\n.bcds-react-aria-Text.small i,\n.bcds-react-aria-Text.small em {\n font: var(--typography-italic-small-body);\n}\n\n/* Large size */\n.bcds-react-aria-Text.large {\n font: var(--typography-regular-large-body);\n}\n\n.bcds-react-aria-Text.large b,\n.bcds-react-aria-Text.large strong {\n font: var(--typography-bold-large-body);\n}\n\n.bcds-react-aria-Text.large i,\n.bcds-react-aria-Text.large em {\n font: var(--typography-italic-large-body);\n}\n\n/* Text color */\n.bcds-react-aria-Text.primary {\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Text.primaryInvert {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Text.secondary {\n color: var(--typography-color-secondary);\n}\n.bcds-react-aria-Text.secondaryInvert {\n color: var(--typography-color-secondary-invert);\n}\n.bcds-react-aria-Text.disabled {\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Text.danger {\n color: var(--typography-color-danger);\n}\n";
|
|
28805
|
+
styleInject(css_248z$8);
|
|
28522
28806
|
|
|
28523
28807
|
function Text({ elementType = "span", size = "medium", color = "primary", isUnstyled = false, ...props }) {
|
|
28524
28808
|
return (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { elementType: elementType, className: isUnstyled ? undefined : `bcds-react-aria-Text ${size} ${color}`, ...props, children: props.children }));
|
|
28525
28809
|
}
|
|
28526
28810
|
|
|
28527
|
-
var css_248z$
|
|
28528
|
-
styleInject(css_248z$
|
|
28811
|
+
var css_248z$7 = ".bcds-react-aria-TextArea {\n display: inline-flex;\n flex-direction: column;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n align-self: stretch;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextArea--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the description and character count slot below the input field */\n.bcds-react-aria-TextArea--Description {\n display: grid;\n gap: var(--layout-margin-medium);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n\n/* Description label */\n.bcds-react-aria-TextArea--Description > .text {\n justify-self: flex-start;\n grid-row: 1;\n}\n\n/* Character counter */\n.bcds-react-aria-TextArea--Description > .counter {\n justify-self: flex-end;\n grid-row: 1;\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextArea--Container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-forms-default);\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n padding: var(--layout-padding-small) 12px;\n}\n\n/* Text input field */\n.bcds-react-aria-TextArea--Input {\n font: var(--typography-regular-body);\n padding: var(--layout-padding-none);\n color: var(--typography-color-primary);\n border: none;\n flex-grow: 1;\n}\n\n.bcds-rect-aria-TextArea--Input::placeholder {\n color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TextArea--Container\n > .bcds-react-aria-TextArea--Input[data-focused] {\n outline: none;\n}\n\n.bcds-react-aria-TextArea--Container:focus-within {\n border-radius: var(--layout-border-radius-large);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-active);\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TextArea--Container:hover {\n border-color: var(--surface-color-border-dark);\n}\n\n/* Disabled and invalid states */\n.bcds-react-aria-TextArea[data-disabled] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-disabled] .bcds-react-aria-TextArea--Input {\n background: var(--surface-color-forms-disabled);\n color: var(--typography-color-placeholder);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--Container {\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextArea[data-readonly] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-readonly] .bcds-react-aria-TextArea--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextArea--Error {\n display: flex;\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextArea--Error > svg {\n padding-right: var(--layout-padding-xsmall);\n color: var(--icons-color-danger);\n width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
28812
|
+
styleInject(css_248z$7);
|
|
28529
28813
|
|
|
28530
28814
|
function TextArea({ label, description, errorMessage, maxLength, onChange, value, ...props }) {
|
|
28531
28815
|
// handler for character counter, displayed when a maxLength is set
|
|
@@ -28538,13 +28822,20 @@ function TextArea({ label, description, errorMessage, maxLength, onChange, value
|
|
|
28538
28822
|
return (jsxRuntime.jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: `bcds-react-aria-TextArea`, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextArea--Label", children: isRequired ? `${label} (required)` : label })), jsxRuntime.jsx("div", { className: "bcds-react-aria-TextArea--Container", children: jsxRuntime.jsx($216918bed6669f72$export$f5c9f3c2c4054eec, { className: "bcds-react-aria-TextArea--Input", value: value, onChange: (e) => handleChange(e.target.value) }) }), description || maxLength ? (jsxRuntime.jsxs("div", { className: "bcds-react-aria-TextArea--Description", children: [description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "text", children: description })), maxLength && (jsxRuntime.jsxs("div", { className: "counter", children: [charCount, "/", maxLength] }))] })) : null, isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-TextArea--Error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
28539
28823
|
}
|
|
28540
28824
|
|
|
28541
|
-
var css_248z$
|
|
28542
|
-
styleInject(css_248z$
|
|
28825
|
+
var css_248z$6 = ".bcds-react-aria-TextField {\n display: inline-flex;\n flex-direction: column;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n align-self: stretch;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TextField--Label .required {\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-forms-default);\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n height: var(--layout-margin-xlarge);\n min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n height: var(--layout-margin-xxlarge);\n min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n font: var(--typography-regular-body);\n padding: var(--layout-padding-none);\n color: var(--typography-color-primary);\n border: none;\n flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n > .bcds-react-aria-TextField--Input[data-focused] {\n outline: none;\n}\n\n.bcds-react-aria-TextField--container:focus-within {\n border-radius: var(--layout-border-radius-large);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-active);\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TextField--container:hover {\n border-color: var(--surface-color-border-dark);\n}\n\n/* Disabled and invalid states */\n\n.bcds-react-aria-TextField[data-disabled]\n > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-disabled] .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n color: var(--typography-color-placeholder);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField[data-invalid]\n > .bcds-react-aria-TextField--container {\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-readonly] .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n > .bcds-react-aria-TextField--container\n > .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextField--Error {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n > .bcds-react-aria-TextField--container\n > svg#exclamation-icon {\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
28826
|
+
styleInject(css_248z$6);
|
|
28543
28827
|
|
|
28544
28828
|
function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }) {
|
|
28545
28829
|
return (jsxRuntime.jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: "bcds-react-aria-TextField", ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextField--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-TextField--Label required", children: "(required)" }))] })), jsxRuntime.jsxs("div", { className: `bcds-react-aria-TextField--container ${size === "small" ? "small" : "medium"}`, children: [iconLeft, jsxRuntime.jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: "bcds-react-aria-TextField--Input" }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {}), iconRight] }), description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-TextField--Description`, children: description })), jsxRuntime.jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-TextField--Error", children: errorMessage })] })) }));
|
|
28546
28830
|
}
|
|
28547
28831
|
|
|
28832
|
+
var css_248z$5 = ".bcds-react-aria-TimeField {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n align-self: flex-start;\n width: 100%;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Input field */\n.bcds-react-aria-TimeField--InputContainer {\n display: inline-flex;\n flex-direction: row;\n min-width: 0;\n align-items: center;\n box-sizing: border-box;\n gap: var(--layout-margin-small);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n background: var(--surface-color-forms-default);\n}\n.bcds-react-aria-TimeField--Input {\n display: inline-flex;\n align-items: center;\n box-sizing: border-box;\n gap: var(--layout-margin-hair);\n width: 100%;\n white-space: nowrap;\n border: none;\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-TimeField--Segment {\n padding: var(--layout-padding-none) var(--layout-padding-hair);\n}\n.bcds-react-aria-TimeField--Segment[data-type=\"literal\"] {\n padding: var(--layout-padding-none);\n}\n.bcds-react-aria-TimeField--Segment[data-type=\"timeZoneName\"] {\n color: var(--typography-color-secondary);\n}\n.bcds-react-aria-TimeField--Input[data-placeholder] {\n color: var(--typography-color-placeholder);\n}\n\n/* Label */\n.bcds-react-aria-TimeField--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Required indicator */\n.bcds-react-aria-TimeField--Label.required {\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Description */\n.bcds-react-aria-TimeField--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Error message */\n.bcds-react-aria-TimeField--Error {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n\n/* Sizing */\n.bcds-react-aria-TimeField.small .bcds-react-aria-TimeField--InputContainer {\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n height: 32px;\n}\n.bcds-react-aria-TimeField.small .bcds-react-aria-TimeField--Segment {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-TimeField.medium .bcds-react-aria-TimeField--InputContainer {\n padding: var(--layout-padding-small) 0.75rem;\n height: 40px;\n}\n.bcds-react-aria-TimeField.medium .bcds-react-aria-TimeField--Segment {\n font: var(--typography-regular-body);\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TimeField--InputContainer:has(\n .bcds-react-aria-TimeField--Input[data-hovered]\n) {\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-TimeField--InputContainer:has(\n .bcds-react-aria-TimeField--Segment[data-focus-visible]\n) {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TimeField--Segment[data-focused] {\n outline: none;\n border-radius: var(--layout-border-radius-small);\n background-color: var(--surface-color-primary-default);\n color: var(--typography-color-primary-invert);\n padding: var(--layout-padding-hair);\n}\n.bcds-react-aria-TimeField--Segment[data-focused][data-type=\"timeZoneName\"] {\n background-color: var(--surface-color-forms-disabled);\n color: var(--typography-color-secondary);\n}\n\n/* Disabled and read-only states */\n.bcds-react-aria-TimeField[data-disabled]\n > .bcds-react-aria-TimeField--InputContainer,\n.bcds-react-aria-TimeField[data-disabled] .bcds-react-aria-TimeField--Input,\n.bcds-react-aria-TimeField[data-disabled]\n .bcds-react-aria-TimeField--Segment[data-type=\"timeZoneName\"] {\n background: var(--surface-color-forms-disabled);\n color: var(--typography-color-placeholder);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TimeField[data-readonly]\n > .bcds-react-aria-TimeField--InputContainer,\n.bcds-react-aria-TimeField[data-readonly] .bcds-react-aria-TimeField--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n/* Invalid state */\n.bcds-react-aria-TimeField[data-invalid]\n > .bcds-react-aria-TimeField--InputContainer {\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n background: var(--surface-color-forms-default);\n}\n.bcds-react-aria-TimeField[data-invalid]\n > .bcds-react-aria-TimeField--InputContainer\n > .bcds-react-aria-TimeField--ErrorIcon\n > svg {\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
28833
|
+
styleInject(css_248z$5);
|
|
28834
|
+
|
|
28835
|
+
function TimeField({ size = "medium", label, description, errorMessage, isRequired, ...props }) {
|
|
28836
|
+
return (jsxRuntime.jsx($40825cdb76e74f70$export$5eaee2322dd727eb, { className: `bcds-react-aria-TimeField ${size}`, ...props, children: ({ isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TimeField--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-TimeField--Label required", children: "(required)" }))] })), jsxRuntime.jsxs("div", { className: "bcds-react-aria-TimeField--InputContainer", children: [jsxRuntime.jsx($40825cdb76e74f70$export$7edc06cf1783b30f, { className: "bcds-react-aria-TimeField--Input", children: (segment) => (jsxRuntime.jsx($40825cdb76e74f70$export$336ab7fa954c4b5f, { className: "bcds-react-aria-TimeField--Segment", segment: segment })) }), isInvalid && (jsxRuntime.jsx("span", { className: "bcds-react-aria-TimeField--ErrorIcon", children: jsxRuntime.jsx(SvgExclamationIcon, {}) }))] }), description && (jsxRuntime.jsx(Text, { slot: "description", className: "bcds-react-aria-TimeField--Description", children: description })), jsxRuntime.jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-TimeField--Error", children: errorMessage })] })) }));
|
|
28837
|
+
}
|
|
28838
|
+
|
|
28548
28839
|
var css_248z$4 = ".bcds-react-aria-ToggleButton {\n display: inline-flex;\n flex: 0 1 auto;\n flex-direction: row;\n flex-wrap: wrap;\n white-space: normal;\n box-sizing: border-box;\n gap: var(--layout-margin-xsmall);\n align-items: center;\n justify-content: center;\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n color: var(--typography-color-secondary);\n background-color: var(--surface-color-secondary-button-disabled);\n border: var(--layout-border-width-small) solid transparent;\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n}\n\n/* Size */\n.bcds-react-aria-ToggleButtonGroup.small > .bcds-react-aria-ToggleButton,\n.bcds-react-aria-ToggleButton.small {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-ToggleButtonGroup.medium > .bcds-react-aria-ToggleButton,\n.bcds-react-aria-ToggleButton.medium {\n font: var(--typography-regular-body);\n}\n\n/* Icon button */\n.bcds-react-aria-ToggleButton.icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: 0 0 auto;\n}\n\n.bcds-react-aria-ToggleButton.icon > * {\n line-height: 0;\n}\n\n.bcds-react-aria-ToggleButton.small.icon {\n padding: unset;\n height: var(--icons-size-large);\n width: var(--icons-size-large);\n min-width: var(--icons-size-large);\n}\n\n.bcds-react-aria-ToggleButton.medium.icon {\n padding: unset;\n height: var(--icons-size-xlarge);\n width: var(--icons-size-xlarge);\n min-width: var(--icons-size-xlarge);\n}\n\n/* Active */\n.bcds-react-aria-ToggleButton[data-selected] {\n background-color: var(--surface-color-secondary-button-default);\n color: var(--typography-color-primary);\n border: var(--layout-border-width-small) solid\n var(--surface-color-secondary-button-default);\n box-shadow: var(--surface-shadow-small);\n /* Animate transition on select or deselect */\n transition: 200ms ease;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n}\n\n/* Hover */\n.bcds-react-aria-ToggleButton[data-hovered] {\n background-color: var(--surface-color-secondary-pressed);\n color: var(--typography-color-primary);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-medium);\n border-radius: var(--layout-border-radius-medium);\n}\n/* Focused */\n.bcds-react-aria-ToggleButton[data-focus-visible] {\n background-color: var(--theme-blue-10);\n outline: var(--layout-border-width-medium) solid\n var(--surface-color-border-active);\n}\n\n/* Pressed */\n.bcds-react-aria-ToggleButton[data-hovered][data-pressed] {\n background-color: var(--theme-gray-20);\n border: var(--layout-border-width-small) solid var(--theme-gray-20);\n}\n\n/* Disabled */\n.bcds-react-aria-ToggleButton[data-disabled] {\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n /* Animate transition on disable or enable */\n transition: 200ms ease;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n}\n";
|
|
28549
28840
|
styleInject(css_248z$4);
|
|
28550
28841
|
|
|
@@ -28602,9 +28893,12 @@ exports.InlineAlert = InlineAlert;
|
|
|
28602
28893
|
exports.Link = Link;
|
|
28603
28894
|
exports.Modal = Modal;
|
|
28604
28895
|
exports.NumberField = NumberField;
|
|
28896
|
+
exports.ProgressBar = ProgressBar;
|
|
28897
|
+
exports.ProgressCircle = ProgressCircle;
|
|
28605
28898
|
exports.Radio = Radio;
|
|
28606
28899
|
exports.RadioGroup = RadioGroup;
|
|
28607
28900
|
exports.Select = Select;
|
|
28901
|
+
exports.Separator = Separator;
|
|
28608
28902
|
exports.SvgBcLogo = SvgBcLogo;
|
|
28609
28903
|
exports.SvgBcOutlineIcon = SvgBcOutlineIcon;
|
|
28610
28904
|
exports.SvgBetaIcon = SvgBetaIcon;
|
|
@@ -28632,6 +28926,7 @@ exports.TagList = TagList;
|
|
|
28632
28926
|
exports.Text = Text;
|
|
28633
28927
|
exports.TextArea = TextArea;
|
|
28634
28928
|
exports.TextField = TextField;
|
|
28929
|
+
exports.TimeField = TimeField;
|
|
28635
28930
|
exports.ToggleButton = ToggleButton;
|
|
28636
28931
|
exports.ToggleButtonGroup = ToggleButtonGroup;
|
|
28637
28932
|
exports.Tooltip = Tooltip;
|