@bcgov/design-system-react-components 0.6.1-pr637 → 0.6.1-pr642
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/dist/cjs/index.cjs +39 -31
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/index.js +39 -32
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +7 -2
- package/package.json +1 -1
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$y = "/**\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$y);
|
|
36
36
|
|
|
37
37
|
/*
|
|
38
38
|
* Copyright 2024 Adobe. All rights reserved.
|
|
@@ -28063,11 +28063,11 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
|
|
|
28063
28063
|
}, renderProps.children));
|
|
28064
28064
|
}
|
|
28065
28065
|
|
|
28066
|
-
var css_248z$
|
|
28067
|
-
styleInject(css_248z$
|
|
28066
|
+
var css_248z$x = ".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";
|
|
28067
|
+
styleInject(css_248z$x);
|
|
28068
28068
|
|
|
28069
|
-
var css_248z$
|
|
28070
|
-
styleInject(css_248z$
|
|
28069
|
+
var css_248z$w = ".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";
|
|
28070
|
+
styleInject(css_248z$w);
|
|
28071
28071
|
|
|
28072
28072
|
function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
|
|
28073
28073
|
return (jsxRuntime.jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `bcds-react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
|
|
@@ -28087,8 +28087,8 @@ function Accordion({ label, children, ...props }) {
|
|
|
28087
28087
|
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
28088
|
}
|
|
28089
28089
|
|
|
28090
|
-
var css_248z$
|
|
28091
|
-
styleInject(css_248z$
|
|
28090
|
+
var css_248z$v = ".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";
|
|
28091
|
+
styleInject(css_248z$v);
|
|
28092
28092
|
|
|
28093
28093
|
function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
28094
28094
|
function getTitle() {
|
|
@@ -28112,8 +28112,8 @@ function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
|
28112
28112
|
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
28113
|
}
|
|
28114
28114
|
|
|
28115
|
-
var css_248z$
|
|
28116
|
-
styleInject(css_248z$
|
|
28115
|
+
var css_248z$u = ".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";
|
|
28116
|
+
styleInject(css_248z$u);
|
|
28117
28117
|
|
|
28118
28118
|
/* This component implements the Circle Check icon from Font Awesome: https://fontawesome.com/icons/circle-check */
|
|
28119
28119
|
function SvgCheckCircleIcon({ id = "check-icon" }) {
|
|
@@ -28161,15 +28161,15 @@ function AlertBanner({ variant = "info", isIconHidden = false, isCloseable = tru
|
|
|
28161
28161
|
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
28162
|
}
|
|
28163
28163
|
|
|
28164
|
-
var css_248z$
|
|
28165
|
-
styleInject(css_248z$
|
|
28164
|
+
var css_248z$t = ".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";
|
|
28165
|
+
styleInject(css_248z$t);
|
|
28166
28166
|
|
|
28167
28167
|
function ButtonGroup({ orientation = "horizontal", alignment = "start", ariaLabel, children, ...props }) {
|
|
28168
28168
|
return (jsxRuntime.jsx("div", { className: `bcds-ButtonGroup ${orientation} ${alignment}`, role: "group", "aria-label": ariaLabel, ...props, children: children }));
|
|
28169
28169
|
}
|
|
28170
28170
|
|
|
28171
|
-
var css_248z$
|
|
28172
|
-
styleInject(css_248z$
|
|
28171
|
+
var css_248z$s = ".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";
|
|
28172
|
+
styleInject(css_248z$s);
|
|
28173
28173
|
|
|
28174
28174
|
/* Sets correct left icon for selected variant */
|
|
28175
28175
|
function getIcon$1(variant) {
|
|
@@ -28192,11 +28192,11 @@ function AlertDialog({ children, variant = "info", role = "dialog", title, isClo
|
|
|
28192
28192
|
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
28193
|
}
|
|
28194
28194
|
|
|
28195
|
-
var css_248z$
|
|
28196
|
-
styleInject(css_248z$
|
|
28195
|
+
var css_248z$r = ".bcds-react-aria-Calendar {\n display: inline-flex;\n flex-direction: column;\n flex: 1 1 0;\n gap: var(--layout-margin-small);\n padding: var(--layout-padding-medium);\n box-sizing: border-box;\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--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--Header > h2.bcds-react-aria-Heading {\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\n/* Calendar item states */\n.bcds-react-aria-Calendar--Cell[data-outside-visible-range] {\n display: none;\n}\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 color: var(--typography-color-disabled);\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";
|
|
28196
|
+
styleInject(css_248z$r);
|
|
28197
28197
|
|
|
28198
|
-
var css_248z$
|
|
28199
|
-
styleInject(css_248z$
|
|
28198
|
+
var css_248z$q = "/* 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";
|
|
28199
|
+
styleInject(css_248z$q);
|
|
28200
28200
|
|
|
28201
28201
|
function Heading({ color = "primary", isUnstyled = false, ...props }) {
|
|
28202
28202
|
return (jsxRuntime.jsx($5cb03073d3f54797$export$a8a3e93435678ff9, { className: isUnstyled ? undefined : `bcds-react-aria-Heading ${color}`, ...props }));
|
|
@@ -28216,8 +28216,8 @@ function Calendar({ ...props }) {
|
|
|
28216
28216
|
return (jsxRuntime.jsxs($dfd62f934fc76fed$export$e1aef45b828286de, { className: "bcds-react-aria-Calendar", ...props, children: [jsxRuntime.jsxs("header", { className: "bcds-react-aria-Calendar--Header", children: [jsxRuntime.jsx(Button, { slot: "previous", size: "xsmall", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgChevronLeftIcon, {}) }), jsxRuntime.jsx(Heading, {}), jsxRuntime.jsx(Button, { slot: "next", size: "xsmall", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgChevronRightIcon, {}) })] }), jsxRuntime.jsx($dfd62f934fc76fed$export$5bd780d491cfc46c, { className: `bcds-react-aria-Calendar--Grid`, weekdayStyle: "short", children: (date) => (jsxRuntime.jsx($dfd62f934fc76fed$export$5d847498420df57b, { className: "bcds-react-aria-Calendar--Cell", date: date })) })] }));
|
|
28217
28217
|
}
|
|
28218
28218
|
|
|
28219
|
-
var css_248z$
|
|
28220
|
-
styleInject(css_248z$
|
|
28219
|
+
var css_248z$p = ".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";
|
|
28220
|
+
styleInject(css_248z$p);
|
|
28221
28221
|
|
|
28222
28222
|
function Callout({ variant = "lightGrey", title, description, buttons, role = "note", isLeftBorderDisabled = false, children, ...props }) {
|
|
28223
28223
|
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 +28232,37 @@ function SvgDashIcon$1({ id = "dash-icon" }) {
|
|
|
28232
28232
|
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
28233
|
}
|
|
28234
28234
|
|
|
28235
|
-
var css_248z$
|
|
28236
|
-
styleInject(css_248z$
|
|
28235
|
+
var css_248z$o = ".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";
|
|
28236
|
+
styleInject(css_248z$o);
|
|
28237
28237
|
|
|
28238
28238
|
function Checkbox({ value, children, ...props }) {
|
|
28239
28239
|
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
28240
|
}
|
|
28241
28241
|
|
|
28242
|
-
var css_248z$
|
|
28243
|
-
styleInject(css_248z$
|
|
28242
|
+
var css_248z$n = ".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";
|
|
28243
|
+
styleInject(css_248z$n);
|
|
28244
28244
|
|
|
28245
28245
|
function CheckboxGroup({ orientation = "vertical", label, description, errorMessage, flexWrap = "nowrap", children, ...props }) {
|
|
28246
28246
|
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
28247
|
}
|
|
28248
28248
|
|
|
28249
|
-
var css_248z$
|
|
28250
|
-
styleInject(css_248z$
|
|
28249
|
+
var css_248z$m = ".bcds-react-aria-DatePicker {\n display: flex;\n flex-direction: column;\n background-color: var(--surface-color-forms-default);\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.bcds-react-aria-DatePicker--Group {\n display: inline-flex;\n flex-direction: row;\n flex: 1 1 0;\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 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";
|
|
28250
|
+
styleInject(css_248z$m);
|
|
28251
28251
|
|
|
28252
|
-
var css_248z$
|
|
28253
|
-
styleInject(css_248z$
|
|
28252
|
+
var css_248z$l = ".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";
|
|
28253
|
+
styleInject(css_248z$l);
|
|
28254
28254
|
|
|
28255
28255
|
function Dialog({ isCloseable = true, role = "dialog", children, ...props }) {
|
|
28256
28256
|
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
28257
|
}
|
|
28258
28258
|
|
|
28259
|
+
var css_248z$k = ".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";
|
|
28260
|
+
styleInject(css_248z$k);
|
|
28261
|
+
|
|
28262
|
+
function Separator({ size = "medium", ...props }) {
|
|
28263
|
+
return (jsxRuntime.jsx($431f98aba6844401$export$1ff3c3f08ae963c0, { className: `bcds-react-aria-Separator ${size}`, ...props }));
|
|
28264
|
+
}
|
|
28265
|
+
|
|
28259
28266
|
/* The component implements the Calendar icon from Font Awesome: https://fontawesome.com/icons/calendar */
|
|
28260
28267
|
function SvgCalendarIcon({ ...props }) {
|
|
28261
28268
|
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,9 +28289,9 @@ function useFormatHelpText(props) {
|
|
|
28282
28289
|
}
|
|
28283
28290
|
function DatePicker({ size = "medium", label, description, errorMessage, showFormatHelpText = true, isRequired = false, isCalendarDisabled = false, isBrowserLocaleUsed = false, ...props }) {
|
|
28284
28291
|
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
|
-
|
|
28292
|
+
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
|
|
28293
|
+
? formatHelpText
|
|
28294
|
+
: "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
28295
|
return isBrowserLocaleUsed ? (datePicker) : (jsxRuntime.jsx($18f2051aff69b9bf$export$a54013f0d02a8f82, { locale: "en-CA", children: datePicker }));
|
|
28289
28296
|
}
|
|
28290
28297
|
|
|
@@ -28605,6 +28612,7 @@ exports.NumberField = NumberField;
|
|
|
28605
28612
|
exports.Radio = Radio;
|
|
28606
28613
|
exports.RadioGroup = RadioGroup;
|
|
28607
28614
|
exports.Select = Select;
|
|
28615
|
+
exports.Separator = Separator;
|
|
28608
28616
|
exports.SvgBcLogo = SvgBcLogo;
|
|
28609
28617
|
exports.SvgBcOutlineIcon = SvgBcOutlineIcon;
|
|
28610
28618
|
exports.SvgBetaIcon = SvgBetaIcon;
|