@bcgov/design-system-react-components 0.4.0-pr508 → 0.4.0-pr509
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 +372 -23
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/types/components/Accordion/Accordion.d.ts +6 -0
- package/dist/cjs/types/components/Accordion/index.d.ts +2 -0
- package/dist/cjs/types/components/AccordionGroup/AccordionGroup.d.ts +7 -0
- package/dist/cjs/types/components/AccordionGroup/index.d.ts +2 -0
- package/dist/cjs/types/components/index.d.ts +2 -0
- package/dist/esm/index.js +371 -24
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Accordion/Accordion.d.ts +6 -0
- package/dist/esm/types/components/Accordion/index.d.ts +2 -0
- package/dist/esm/types/components/AccordionGroup/AccordionGroup.d.ts +7 -0
- package/dist/esm/types/components/AccordionGroup/index.d.ts +2 -0
- package/dist/esm/types/components/index.d.ts +2 -0
- package/dist/index.d.ts +13 -2
- package/package.json +11 -11
package/dist/cjs/index.cjs
CHANGED
|
@@ -31,11 +31,8 @@ function styleInject(css, ref) {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
var css_248z$m = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --surface-opacity-0: 0;\n --surface-opacity-10: 0.1;\n --surface-opacity-20: 0.2;\n --surface-opacity-30: 0.3;\n --surface-opacity-40: 0.4;\n --surface-opacity-50: 0.5;\n --surface-opacity-60: 0.6;\n --surface-opacity-70: 0.7;\n --surface-opacity-80: 0.8;\n --surface-opacity-90: 0.9;\n --surface-opacity-100: 1;\n --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /* Default shadow for most content and UI elements */\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Reduced shadow for secondary UI elements */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Standard shadow for UI elements like cards and buttons */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Larger shadow for emphasis. Use sparingly */\n --surface-color-primary-button-default: #013366; /* Default fill colour for primary buttons */\n --surface-color-primary-button-hover: #1E5189; /* Fill colour used when user hovers over primary button */\n --surface-color-primary-button-disabled: #EDEBE9; /* Fill colour for inactive primary buttons */\n --surface-color-primary-danger-button-default: #CE3E39; /* Default fill colour for buttons in danger/warning state */\n --surface-color-primary-danger-button-hover: #A2312D; /* Fill colour used when user hovers over danger/warning button */\n --surface-color-primary-danger-button-disabled: #EDEBE9; /* Default fill colour for disabled danger/warning button */\n --surface-color-primary-default: #013366; /* Default theme colour for components and layout */\n --surface-color-primary-hover: #1E5189; /* Hover variant of surface.color.primary.default */\n --surface-color-primary-pressed: #01264C; /* Selected/pressed variant of surface.color.primary.default */\n --surface-color-primary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.primary default */\n --surface-color-secondary-button-default: #FFFFFF; /* Fill colour for secondary buttons */\n --surface-color-secondary-button-hover: #EDEBE9; /* Fill colour used when user hovers over secondary button */\n --surface-color-secondary-button-disabled: #EDEBE9; /* Fill colour for inactive secondary buttons */\n --surface-color-secondary-default: #FFFFFF; /* Light theme colour for components and layout */\n --surface-color-secondary-hover: #EDEBE9; /* Hover variant of surface.color.secondary.default */\n --surface-color-secondary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.secondary.default */\n --surface-color-secondary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.secondary default */\n --surface-color-tertiary-button-default: rgba(255,255,255,0); /* Default fill colour for tertiary buttons */\n --surface-color-tertiary-button-hover: #ECEAE8; /* Fill colour used when user hovers over tertiary button */\n --surface-color-tertiary-button-disabled: #EDEBE9; /* Fill colour for inactive tertiary buttons */\n --surface-color-tertiary-default: #FFFFFF00; /* Alternative light theme colour for components and layout */\n --surface-color-tertiary-hover: #ECEAE8; /* Hover variant of surface.color.tertiary.default */\n --surface-color-tertiary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.tertiary.default */\n --surface-color-tertiary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.tertiary default */\n --surface-color-menus-default: #FFFFFF; /* Default fill colour for menu items */\n --surface-color-menus-hover: #EDEBE9; /* Fill colour used when user hovers over a menu item */\n --surface-color-forms-default: #FFFFFF; /* Default fill colour for form/input fields */\n --surface-color-forms-disabled: #EDEBE9; /* Fill colour for inactive/disabled form/input fields */\n --surface-color-background-white: #FFFFFF; /* White background */\n --surface-color-background-light-gray: #FAF9F8; /* Default background colour for layout */\n --surface-color-background-light-blue: #F1F8FE; /* Light blue background */\n --surface-color-background-dark-blue: #053662; /* Dark blue background */\n --surface-color-border-default: #D8D8D8; /* Lighter border colour for UI elements */\n --surface-color-border-medium: #898785; /* Default border colour for UI elements */\n --surface-color-border-dark: #353433; /* Used as a hover colour for form fields and inputs */\n --surface-color-border-active: #2E5DD7; /* Used as the active stroke colour for UI elements */\n --surface-color-overlay-default: rgba(0,0,0,0.45); /* Background overlay colour for images and modal dialogues */\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2; /* Background colour for error, failure or danger messages */\n --support-surface-color-success: #F6FFF8; /* Background colour for success messages */\n --support-surface-color-warning: #FEF1D8; /* Background colour for warning messages */\n --support-border-color-info: #053662; /* Border stroke for general/informational messages */\n --support-border-color-danger: #CE3E39; /* Border stroke for error, failure or danger messages */\n --support-border-color-success: #42814A; /* Border stroke for success messages */\n --support-border-color-warning: #F8BB47; /* Border stroke for warning messages */\n --icons-size-xsmall: 14px; /* Smallest icon size */\n --icons-size-small: 16px;\n --icons-size-medium: 20px; /* Default icon size */\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px; /* Largest icon size */\n --icons-color-primary: #2D2D2D; /* Default colour for icons */\n --icons-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous icons */\n --icons-color-disabled: #9F9D9C; /* Use only for inactive/disabled icons */\n --icons-color-link: #255A90; /* Use for hyperlinked icons */\n --icons-color-info: #053662; /* Emphasis colour for icons in general/informational state */\n --icons-color-danger: #CE3E39; /* Emphasis colour for icons in error, failure or danger state */\n --icons-color-success: #42814A; /* Emphasis colour for icons in success state */\n --icons-color-warning: #F8BB47; /* Emphasis colour for icons in warning state */\n --icons-color-primary-invert: #FFFFFF; /* Default colour for icons on dark backgrounds */\n --layout-border-width-none: 0;\n --layout-border-width-small: 1px;\n --layout-border-width-medium: 2px;\n --layout-border-width-large: 4px;\n --layout-padding-none: 0; /* No padding */\n --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem; /* Default padding value for layout */\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem; /* Largest padding value for layout */\n --layout-margin-none: 0rem; /* No margin */\n --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem; /* Default margin value for layout */\n --layout-margin-medium: 1rem;\n --layout-margin-large: 1.5rem;\n --layout-margin-xlarge: 2rem;\n --layout-margin-xxlarge: 2.5rem;\n --layout-margin-xxxlarge: 3rem;\n --layout-margin-huge: 3.5rem; /* Largest margin value for layout */\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --typography-font-families-bc-sans: 'BC Sans'; /* BC Sans font. Requires BC Sans package */\n --typography-line-heights-xxxdense: 1.125rem; /* Smallest line height */\n --typography-line-heights-xxdense: 1.313rem;\n --typography-line-heights-xdense: 1.688rem;\n --typography-line-heights-dense: 1.913rem;\n --typography-line-heights-regular: 2.125rem; /* Default line height */\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */\n --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */\n --typography-font-weights-regular: 400; /* System token, used to generate text styles */\n --typography-font-weights-bold: 700; /* System token, used to generate text styles */\n --typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */\n --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */\n --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */\n --typography-font-size-label: 0.75rem;\n --typography-font-size-small-body: 0.875rem;\n --typography-font-size-body: 1rem;\n --typography-font-size-large-body: 1.125rem;\n --typography-font-size-h5: 1.25rem;\n --typography-font-size-h4: 1.5rem;\n --typography-font-size-h3: 1.75rem;\n --typography-font-size-h2: 2rem;\n --typography-font-size-h1: 2.25rem;\n --typography-font-size-display: 3rem;\n --typography-letter-spacing-0: 0em; /* System token, used to generate type styles */\n --typography-paragraph-spacing-0: 0; /* System token, used to generate type styles */\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /* Labels and captions */\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /* Smaller body text */\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /* Default body text */\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /* Larger body text */\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /* Alternate (unbolded) style for Heading 6 */\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /* Alternate (unbolded) style for Heading 5 */\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /* Alternate (unbolded) style for Heading 4 */\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 3 */\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /* Alternate (unbolded) style for Heading 2 */\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 1 */\n --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /* Extra-large body text size. Do not use for headings */\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (bolded) */\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /* Default for small body text (bolded) */\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /* Default for body text (bolded) */\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (bolded) */\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H6 */\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H5 */\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H4 */\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H3 */\n --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H2 */\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H1 */\n --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /* Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (italic) */\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /* Small body text (italic) */\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /* Default for body text (italic) */\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (italic) */\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Alternate (italic) style for Heading 6 */\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /* Alternate (italic) style for Heading 5 */\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /* Alternate (italic) style for Heading 4 */\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 3 */\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /* Alternate (italic) style for Heading 2 */\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 1 */\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /* Extra-large font size (italic). Do not use for headings */\n --typography-text-case-none: none;\n --typography-text-decoration-none: none; /* System token, used to generate type styles */\n --typography-paragraph-indent-0: 0px; /* System token, used to generate type styles */\n --typography-color-primary: #2D2D2D; /* Default colour for all body text and headings */\n --typography-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous text */\n --typography-color-placeholder: #9F9D9C; /* Use for placeholder text in forms */\n --typography-color-disabled: #9F9D9C; /* Use only for text in inactive user interface elements */\n --typography-color-link: #255A90; /* Use for hyperlinks in body text and headings */\n --typography-color-danger: #CE3E39; /* Use for error, failure or danger message text */\n --typography-color-primary-invert: #FFFFFF; /* Default colour for text on dark backgrounds */\n --typography-color-secondary-invert: #ECEAE8; /* Secondary colour for text on dark backgrounds */\n --theme-gold-10: #FEF8E8; /* Gold scale — lightest */\n --theme-gold-20: #FEF0D8; /* Gold scale */\n --theme-gold-30: #FDE9C4; /* Gold scale */\n --theme-gold-40: #FCE2B0; /* Gold scale */\n --theme-gold-50: #FBDA9D; /* Gold scale */\n --theme-gold-60: #FBD389; /* Gold scale */\n --theme-gold-70: #FACC75; /* Gold scale */\n --theme-gold-80: #F9C462; /* Gold scale */\n --theme-gold-90: #F8BA47; /* Gold scale */\n --theme-gold-100: #FCBA19; /* Gold scale — darkest */\n --theme-blue-10: #F1F8FE; /* Blue scale — lightest */\n --theme-blue-20: #D8EAFD; /* Blue scale */\n --theme-blue-30: #C1DDFC; /* Blue scale */\n --theme-blue-40: #A8D0FB; /* Blue scale */\n --theme-blue-50: #91C4FA; /* Blue scale */\n --theme-blue-60: #7AB8F9; /* Blue scale */\n --theme-blue-70: #5595D9; /* Blue scale */\n --theme-blue-80: #3470B1; /* Blue scale */\n --theme-blue-90: #1E5189; /* Blue scale */\n --theme-blue-100: #013366; /* Blue scale — darkest */\n --theme-gray-10: #FAF9F8; /* Greyscale — lightest */\n --theme-gray-20: #F3F2F1; /* Greyscale */\n --theme-gray-30: #ECEAE8; /* Greyscale */\n --theme-gray-40: #E0DEDC; /* Greyscale */\n --theme-gray-50: #D1CFCD; /* Greyscale */\n --theme-gray-60: #C6C5C3; /* Greyscale */\n --theme-gray-70: #9F9D9C; /* Greyscale */\n --theme-gray-80: #605E5C; /* Greyscale */\n --theme-gray-90: #3D3C3B; /* Greyscale */\n --theme-gray-100: #353433; /* Greyscale */\n --theme-gray-110: #252423; /* Greyscale — darkest */\n --theme-gray-white: #FFFFFF; /* White */\n --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */\n --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */\n}\n";
|
|
35
|
-
styleInject(css_248z$
|
|
36
|
-
|
|
37
|
-
var css_248z$l = ".bcds-Alert-Banner {\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n\n.bcds-Alert-Banner--Container {\n flex-grow: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-padding-medium);\n max-width: 1100px;\n padding: var(--layout-padding-small) var(--layout-padding-none);\n}\n\n.bcds-Alert-Banner--Icon {\n align-self: first baseline;\n justify-self: flex-start;\n padding-top: var(--layout-padding-xsmall);\n color: var(--icons-color-primary-invert);\n}\n\n.bcds-Alert-Banner--Content {\n display: inline-flex;\n gap: var(--layout-margin-medium);\n align-items: first baseline;\n flex-grow: 1;\n flex-wrap: wrap;\n font: var(--typography-regular-body);\n color: var(--typography-color-primary-invert);\n}\n\n.bcds-Alert-Banner--closeIcon {\n align-self: first baseline;\n}\n\n.bcds-Alert-Banner--closeIcon > .bcds-react-aria-Button[data-hovered] svg {\n color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner--closeIcon svg {\n color: var(--icons-color-primary-invert);\n}\n\n/* Variants */\n\n/* Info theme */\n.bcds-Alert-Banner.info {\n background-color: var(--surface-color-background-dark-blue);\n}\n\n/* Success theme */\n.bcds-Alert-Banner.success {\n background-color: var(--support-border-color-success);\n}\n\n/* Warning theme */\n.bcds-Alert-Banner.warning {\n background-color: var(--support-border-color-warning);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Icon {\n color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Content {\n color: var(--typography-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--closeIcon svg {\n color: var(--icons-color-primary);\n}\n\n/* Danger theme */\n.bcds-Alert-Banner.danger {\n background-color: var(--support-border-color-danger);\n}\n\n/* Black theme */\n\n.bcds-Alert-Banner.black {\n background-color: var(--theme-gray-110);\n}\n";
|
|
38
|
-
styleInject(css_248z$l);
|
|
34
|
+
var css_248z$o = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --surface-opacity-0: 0;\n --surface-opacity-10: 0.1;\n --surface-opacity-20: 0.2;\n --surface-opacity-30: 0.3;\n --surface-opacity-40: 0.4;\n --surface-opacity-50: 0.5;\n --surface-opacity-60: 0.6;\n --surface-opacity-70: 0.7;\n --surface-opacity-80: 0.8;\n --surface-opacity-90: 0.9;\n --surface-opacity-100: 1;\n --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /* Default shadow for most content and UI elements */\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Reduced shadow for secondary UI elements */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Standard shadow for UI elements like cards and buttons */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Larger shadow for emphasis. Use sparingly */\n --surface-color-primary-button-default: #013366; /* Default fill colour for primary buttons */\n --surface-color-primary-button-hover: #1E5189; /* Fill colour used when user hovers over primary button */\n --surface-color-primary-button-disabled: #EDEBE9; /* Fill colour for inactive primary buttons */\n --surface-color-primary-danger-button-default: #CE3E39; /* Default fill colour for buttons in danger/warning state */\n --surface-color-primary-danger-button-hover: #A2312D; /* Fill colour used when user hovers over danger/warning button */\n --surface-color-primary-danger-button-disabled: #EDEBE9; /* Default fill colour for disabled danger/warning button */\n --surface-color-primary-default: #013366; /* Default theme colour for components and layout */\n --surface-color-primary-hover: #1E5189; /* Hover variant of surface.color.primary.default */\n --surface-color-primary-pressed: #01264C; /* Selected/pressed variant of surface.color.primary.default */\n --surface-color-primary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.primary default */\n --surface-color-secondary-button-default: #FFFFFF; /* Fill colour for secondary buttons */\n --surface-color-secondary-button-hover: #EDEBE9; /* Fill colour used when user hovers over secondary button */\n --surface-color-secondary-button-disabled: #EDEBE9; /* Fill colour for inactive secondary buttons */\n --surface-color-secondary-default: #FFFFFF; /* Light theme colour for components and layout */\n --surface-color-secondary-hover: #EDEBE9; /* Hover variant of surface.color.secondary.default */\n --surface-color-secondary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.secondary.default */\n --surface-color-secondary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.secondary default */\n --surface-color-tertiary-button-default: rgba(255,255,255,0); /* Default fill colour for tertiary buttons */\n --surface-color-tertiary-button-hover: #ECEAE8; /* Fill colour used when user hovers over tertiary button */\n --surface-color-tertiary-button-disabled: #EDEBE9; /* Fill colour for inactive tertiary buttons */\n --surface-color-tertiary-default: #FFFFFF00; /* Alternative light theme colour for components and layout */\n --surface-color-tertiary-hover: #ECEAE8; /* Hover variant of surface.color.tertiary.default */\n --surface-color-tertiary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.tertiary.default */\n --surface-color-tertiary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.tertiary default */\n --surface-color-menus-default: #FFFFFF; /* Default fill colour for menu items */\n --surface-color-menus-hover: #EDEBE9; /* Fill colour used when user hovers over a menu item */\n --surface-color-forms-default: #FFFFFF; /* Default fill colour for form/input fields */\n --surface-color-forms-disabled: #EDEBE9; /* Fill colour for inactive/disabled form/input fields */\n --surface-color-background-white: #FFFFFF; /* White background */\n --surface-color-background-light-gray: #FAF9F8; /* Default background colour for layout */\n --surface-color-background-light-blue: #F1F8FE; /* Light blue background */\n --surface-color-background-dark-blue: #053662; /* Dark blue background */\n --surface-color-border-default: #D8D8D8; /* Lighter border colour for UI elements */\n --surface-color-border-medium: #898785; /* Default border colour for UI elements */\n --surface-color-border-dark: #353433; /* Used as a hover colour for form fields and inputs */\n --surface-color-border-active: #2E5DD7; /* Used as the active stroke colour for UI elements */\n --surface-color-overlay-default: rgba(0,0,0,0.45); /* Background overlay colour for images and modal dialogues */\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2; /* Background colour for error, failure or danger messages */\n --support-surface-color-success: #F6FFF8; /* Background colour for success messages */\n --support-surface-color-warning: #FEF1D8; /* Background colour for warning messages */\n --support-border-color-info: #053662; /* Border stroke for general/informational messages */\n --support-border-color-danger: #CE3E39; /* Border stroke for error, failure or danger messages */\n --support-border-color-success: #42814A; /* Border stroke for success messages */\n --support-border-color-warning: #F8BB47; /* Border stroke for warning messages */\n --icons-size-xsmall: 14px; /* Smallest icon size */\n --icons-size-small: 16px;\n --icons-size-medium: 20px; /* Default icon size */\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px; /* Largest icon size */\n --icons-color-primary: #2D2D2D; /* Default colour for icons */\n --icons-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous icons */\n --icons-color-disabled: #9F9D9C; /* Use only for inactive/disabled icons */\n --icons-color-link: #255A90; /* Use for hyperlinked icons */\n --icons-color-info: #053662; /* Emphasis colour for icons in general/informational state */\n --icons-color-danger: #CE3E39; /* Emphasis colour for icons in error, failure or danger state */\n --icons-color-success: #42814A; /* Emphasis colour for icons in success state */\n --icons-color-warning: #F8BB47; /* Emphasis colour for icons in warning state */\n --icons-color-primary-invert: #FFFFFF; /* Default colour for icons on dark backgrounds */\n --layout-border-width-none: 0;\n --layout-border-width-small: 1px;\n --layout-border-width-medium: 2px;\n --layout-border-width-large: 4px;\n --layout-padding-none: 0; /* No padding */\n --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem; /* Default padding value for layout */\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem; /* Largest padding value for layout */\n --layout-margin-none: 0rem; /* No margin */\n --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem; /* Default margin value for layout */\n --layout-margin-medium: 1rem;\n --layout-margin-large: 1.5rem;\n --layout-margin-xlarge: 2rem;\n --layout-margin-xxlarge: 2.5rem;\n --layout-margin-xxxlarge: 3rem;\n --layout-margin-huge: 3.5rem; /* Largest margin value for layout */\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --typography-font-families-bc-sans: 'BC Sans'; /* BC Sans font. Requires BC Sans package */\n --typography-line-heights-xxxdense: 1.125rem; /* Smallest line height */\n --typography-line-heights-xxdense: 1.313rem;\n --typography-line-heights-xdense: 1.688rem;\n --typography-line-heights-dense: 1.913rem;\n --typography-line-heights-regular: 2.125rem; /* Default line height */\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */\n --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */\n --typography-font-weights-regular: 400; /* System token, used to generate text styles */\n --typography-font-weights-bold: 700; /* System token, used to generate text styles */\n --typography-font-weights-italic: Italic; /* DEPRECATED - will be removed in next major version. */\n --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */\n --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */\n --typography-font-size-label: 0.75rem;\n --typography-font-size-small-body: 0.875rem;\n --typography-font-size-body: 1rem;\n --typography-font-size-large-body: 1.125rem;\n --typography-font-size-h5: 1.25rem;\n --typography-font-size-h4: 1.5rem;\n --typography-font-size-h3: 1.75rem;\n --typography-font-size-h2: 2rem;\n --typography-font-size-h1: 2.25rem;\n --typography-font-size-display: 3rem;\n --typography-letter-spacing-0: 0em; /* System token, used to generate type styles */\n --typography-paragraph-spacing-0: 0; /* System token, used to generate type styles */\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /* Labels and captions */\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /* Smaller body text */\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /* Default body text */\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /* Larger body text */\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /* Alternate (unbolded) style for Heading 6 */\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /* Alternate (unbolded) style for Heading 5 */\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /* Alternate (unbolded) style for Heading 4 */\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 3 */\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /* Alternate (unbolded) style for Heading 2 */\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 1 */\n --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /* Extra-large body text size. Do not use for headings */\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (bolded) */\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /* Default for small body text (bolded) */\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /* Default for body text (bolded) */\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (bolded) */\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H6 */\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H5 */\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H4 */\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H3 */\n --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H2 */\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H1 */\n --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /* Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (italic) */\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /* Small body text (italic) */\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /* Default for body text (italic) */\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (italic) */\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Alternate (italic) style for Heading 6 */\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /* Alternate (italic) style for Heading 5 */\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /* Alternate (italic) style for Heading 4 */\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 3 */\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /* Alternate (italic) style for Heading 2 */\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 1 */\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /* Extra-large font size (italic). Do not use for headings */\n --typography-text-case-none: none;\n --typography-text-decoration-none: none; /* System token, used to generate type styles */\n --typography-paragraph-indent-0: 0px; /* System token, used to generate type styles */\n --typography-color-primary: #2D2D2D; /* Default colour for all body text and headings */\n --typography-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous text */\n --typography-color-placeholder: #9F9D9C; /* Use for placeholder text in forms */\n --typography-color-disabled: #9F9D9C; /* Use only for text in inactive user interface elements */\n --typography-color-link: #255A90; /* Use for hyperlinks in body text and headings */\n --typography-color-danger: #CE3E39; /* Use for error, failure or danger message text */\n --typography-color-primary-invert: #FFFFFF; /* Default colour for text on dark backgrounds */\n --typography-color-secondary-invert: #ECEAE8; /* Secondary colour for text on dark backgrounds */\n --theme-gold-10: #FEF8E8; /* Gold scale — lightest */\n --theme-gold-20: #FEF0D8; /* Gold scale */\n --theme-gold-30: #FDE9C4; /* Gold scale */\n --theme-gold-40: #FCE2B0; /* Gold scale */\n --theme-gold-50: #FBDA9D; /* Gold scale */\n --theme-gold-60: #FBD389; /* Gold scale */\n --theme-gold-70: #FACC75; /* Gold scale */\n --theme-gold-80: #F9C462; /* Gold scale */\n --theme-gold-90: #F8BA47; /* Gold scale */\n --theme-gold-100: #FCBA19; /* Gold scale — darkest */\n --theme-blue-10: #F1F8FE; /* Blue scale — lightest */\n --theme-blue-20: #D8EAFD; /* Blue scale */\n --theme-blue-30: #C1DDFC; /* Blue scale */\n --theme-blue-40: #A8D0FB; /* Blue scale */\n --theme-blue-50: #91C4FA; /* Blue scale */\n --theme-blue-60: #7AB8F9; /* Blue scale */\n --theme-blue-70: #5595D9; /* Blue scale */\n --theme-blue-80: #3470B1; /* Blue scale */\n --theme-blue-90: #1E5189; /* Blue scale */\n --theme-blue-100: #013366; /* Blue scale — darkest */\n --theme-gray-10: #FAF9F8; /* Greyscale — lightest */\n --theme-gray-20: #F3F2F1; /* Greyscale */\n --theme-gray-30: #ECEAE8; /* Greyscale */\n --theme-gray-40: #E0DEDC; /* Greyscale */\n --theme-gray-50: #D1CFCD; /* Greyscale */\n --theme-gray-60: #C6C5C3; /* Greyscale */\n --theme-gray-70: #9F9D9C; /* Greyscale */\n --theme-gray-80: #605E5C; /* Greyscale */\n --theme-gray-90: #3D3C3B; /* Greyscale */\n --theme-gray-100: #353433; /* Greyscale */\n --theme-gray-110: #252423; /* Greyscale — darkest */\n --theme-gray-white: #FFFFFF; /* White */\n --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */\n --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */\n}\n";
|
|
35
|
+
styleInject(css_248z$o);
|
|
39
36
|
|
|
40
37
|
/*
|
|
41
38
|
* Copyright 2024 Adobe. All rights reserved.
|
|
@@ -2398,11 +2395,6 @@ function $e1995378a142960e$var$CollectionRoot({ children: children }) {
|
|
|
2398
2395
|
*/
|
|
2399
2396
|
|
|
2400
2397
|
const $7135fc7d473fd974$export$d40e14dec8b060a8 = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
2401
|
-
const $7135fc7d473fd974$export$6e2c8f0811a474ce = /*#__PURE__*/ ($e1995378a142960e$export$e953bb1cd0f19726)('section', (props, ref, section)=>{
|
|
2402
|
-
let { name: name, render: render } = ($dbSRa$react.useContext)($7135fc7d473fd974$export$d40e14dec8b060a8);
|
|
2403
|
-
console.warn(`<Section> is deprecated. Please use <${name}> instead.`);
|
|
2404
|
-
return render(props, ref, section, 'react-aria-Section');
|
|
2405
|
-
});
|
|
2406
2398
|
const $7135fc7d473fd974$export$a164736487e3f0ae = {
|
|
2407
2399
|
CollectionRoot ({ collection: collection, renderDropIndicator: renderDropIndicator }) {
|
|
2408
2400
|
return $7135fc7d473fd974$var$useCollectionRender(collection, null, renderDropIndicator);
|
|
@@ -9797,6 +9789,85 @@ function $40df3f8667284809$export$d55e7ee900f34e93(props, ref) {
|
|
|
9797
9789
|
};
|
|
9798
9790
|
}
|
|
9799
9791
|
|
|
9792
|
+
/*
|
|
9793
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
9794
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the 'License');
|
|
9795
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
9796
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
9797
|
+
*
|
|
9798
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
9799
|
+
* the License is distributed on an 'AS IS' BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
9800
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
9801
|
+
* governing permissions and limitations under the License.
|
|
9802
|
+
*/
|
|
9803
|
+
|
|
9804
|
+
|
|
9805
|
+
|
|
9806
|
+
function $5e910fae8e128ead$export$6e3e27031a30522f(props, state, ref) {
|
|
9807
|
+
let { isDisabled: isDisabled } = props;
|
|
9808
|
+
let triggerId = ($bdb11010cef70236$export$f680877a34711e37)();
|
|
9809
|
+
let panelId = ($bdb11010cef70236$export$f680877a34711e37)();
|
|
9810
|
+
let isSSR = ($b5e257d569688ac6$export$535bd6ca7f90a273)();
|
|
9811
|
+
let supportsBeforeMatch = !isSSR && 'onbeforematch' in document.body;
|
|
9812
|
+
let raf = ($dbSRa$react.useRef)(null);
|
|
9813
|
+
let handleBeforeMatch = ($dbSRa$react.useCallback)(()=>{
|
|
9814
|
+
// Wait a frame to revert browser's removal of hidden attribute
|
|
9815
|
+
raf.current = requestAnimationFrame(()=>{
|
|
9816
|
+
if (ref.current) ref.current.setAttribute('hidden', 'until-found');
|
|
9817
|
+
});
|
|
9818
|
+
// Force sync state update
|
|
9819
|
+
($iETbY$reactdom.flushSync)(()=>{
|
|
9820
|
+
state.toggle();
|
|
9821
|
+
});
|
|
9822
|
+
}, [
|
|
9823
|
+
ref,
|
|
9824
|
+
state
|
|
9825
|
+
]);
|
|
9826
|
+
// @ts-ignore https://github.com/facebook/react/pull/24741
|
|
9827
|
+
($e9faafb641e167db$export$90fc3a17d93f704c)(ref, 'beforematch', supportsBeforeMatch ? handleBeforeMatch : null);
|
|
9828
|
+
($f0a04ccd8dbdd83b$export$e5c5a5f917a5871c)(()=>{
|
|
9829
|
+
// Cancel any pending RAF to prevent stale updates
|
|
9830
|
+
if (raf.current) cancelAnimationFrame(raf.current);
|
|
9831
|
+
// Until React supports hidden="until-found": https://github.com/facebook/react/pull/24741
|
|
9832
|
+
if (supportsBeforeMatch && ref.current && !isDisabled) {
|
|
9833
|
+
if (state.isExpanded) ref.current.removeAttribute('hidden');
|
|
9834
|
+
else ref.current.setAttribute('hidden', 'until-found');
|
|
9835
|
+
}
|
|
9836
|
+
}, [
|
|
9837
|
+
isDisabled,
|
|
9838
|
+
ref,
|
|
9839
|
+
state.isExpanded,
|
|
9840
|
+
supportsBeforeMatch
|
|
9841
|
+
]);
|
|
9842
|
+
($dbSRa$react.useEffect)(()=>{
|
|
9843
|
+
return ()=>{
|
|
9844
|
+
if (raf.current) cancelAnimationFrame(raf.current);
|
|
9845
|
+
};
|
|
9846
|
+
}, []);
|
|
9847
|
+
return {
|
|
9848
|
+
buttonProps: {
|
|
9849
|
+
id: triggerId,
|
|
9850
|
+
'aria-expanded': state.isExpanded,
|
|
9851
|
+
'aria-controls': panelId,
|
|
9852
|
+
onPress: (e)=>{
|
|
9853
|
+
if (!isDisabled && e.pointerType !== 'keyboard') state.toggle();
|
|
9854
|
+
},
|
|
9855
|
+
isDisabled: isDisabled,
|
|
9856
|
+
onPressStart (e) {
|
|
9857
|
+
if (e.pointerType === 'keyboard' && !isDisabled) state.toggle();
|
|
9858
|
+
}
|
|
9859
|
+
},
|
|
9860
|
+
panelProps: {
|
|
9861
|
+
id: panelId,
|
|
9862
|
+
// This can be overridden at the panel element level.
|
|
9863
|
+
role: 'group',
|
|
9864
|
+
'aria-labelledby': triggerId,
|
|
9865
|
+
'aria-hidden': !state.isExpanded,
|
|
9866
|
+
hidden: supportsBeforeMatch ? true : !state.isExpanded
|
|
9867
|
+
}
|
|
9868
|
+
};
|
|
9869
|
+
}
|
|
9870
|
+
|
|
9800
9871
|
/*
|
|
9801
9872
|
* Copyright 2020 Adobe. All rights reserved.
|
|
9802
9873
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -12761,6 +12832,89 @@ function $fc909762b330b746$export$61c6a8c84e605fb6(props) {
|
|
|
12761
12832
|
};
|
|
12762
12833
|
}
|
|
12763
12834
|
|
|
12835
|
+
/*
|
|
12836
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
12837
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
12838
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
12839
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
12840
|
+
*
|
|
12841
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12842
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
12843
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
12844
|
+
* governing permissions and limitations under the License.
|
|
12845
|
+
*/
|
|
12846
|
+
|
|
12847
|
+
function $bf996d45f4a36925$export$3fcbf6e4407997e0(props) {
|
|
12848
|
+
let [isExpanded, setExpanded] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.isExpanded, props.defaultExpanded || false, props.onExpandedChange);
|
|
12849
|
+
const expand = ($dbSRa$react.useCallback)(()=>{
|
|
12850
|
+
setExpanded(true);
|
|
12851
|
+
}, [
|
|
12852
|
+
setExpanded
|
|
12853
|
+
]);
|
|
12854
|
+
const collapse = ($dbSRa$react.useCallback)(()=>{
|
|
12855
|
+
setExpanded(false);
|
|
12856
|
+
}, [
|
|
12857
|
+
setExpanded
|
|
12858
|
+
]);
|
|
12859
|
+
const toggle = ($dbSRa$react.useCallback)(()=>{
|
|
12860
|
+
setExpanded(!isExpanded);
|
|
12861
|
+
}, [
|
|
12862
|
+
setExpanded,
|
|
12863
|
+
isExpanded
|
|
12864
|
+
]);
|
|
12865
|
+
return {
|
|
12866
|
+
isExpanded: isExpanded,
|
|
12867
|
+
setExpanded: setExpanded,
|
|
12868
|
+
expand: expand,
|
|
12869
|
+
collapse: collapse,
|
|
12870
|
+
toggle: toggle
|
|
12871
|
+
};
|
|
12872
|
+
}
|
|
12873
|
+
|
|
12874
|
+
/*
|
|
12875
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
12876
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
12877
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
12878
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
12879
|
+
*
|
|
12880
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
12881
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
12882
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
12883
|
+
* governing permissions and limitations under the License.
|
|
12884
|
+
*/
|
|
12885
|
+
|
|
12886
|
+
function $9385b3affbdec831$export$f36461af0ef4707d(props) {
|
|
12887
|
+
let { allowsMultipleExpanded: allowsMultipleExpanded = false, isDisabled: isDisabled = false } = props;
|
|
12888
|
+
let [expandedKeys, setExpandedKeys] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(($dbSRa$react.useMemo)(()=>props.expandedKeys ? new Set(props.expandedKeys) : undefined, [
|
|
12889
|
+
props.expandedKeys
|
|
12890
|
+
]), ($dbSRa$react.useMemo)(()=>props.defaultExpandedKeys ? new Set(props.defaultExpandedKeys) : new Set(), [
|
|
12891
|
+
props.defaultExpandedKeys
|
|
12892
|
+
]), props.onExpandedChange);
|
|
12893
|
+
($dbSRa$react.useEffect)(()=>{
|
|
12894
|
+
// Ensure only one item is expanded if allowsMultipleExpanded is false.
|
|
12895
|
+
if (!allowsMultipleExpanded && expandedKeys.size > 1) setExpandedKeys(new Set([
|
|
12896
|
+
expandedKeys.values().next().value
|
|
12897
|
+
]));
|
|
12898
|
+
});
|
|
12899
|
+
return {
|
|
12900
|
+
allowsMultipleExpanded: allowsMultipleExpanded,
|
|
12901
|
+
isDisabled: isDisabled,
|
|
12902
|
+
expandedKeys: expandedKeys,
|
|
12903
|
+
setExpandedKeys: setExpandedKeys,
|
|
12904
|
+
toggleKey (key) {
|
|
12905
|
+
let keys;
|
|
12906
|
+
if (allowsMultipleExpanded) {
|
|
12907
|
+
keys = new Set(expandedKeys);
|
|
12908
|
+
if (keys.has(key)) keys.delete(key);
|
|
12909
|
+
else keys.add(key);
|
|
12910
|
+
} else keys = new Set(expandedKeys.has(key) ? [] : [
|
|
12911
|
+
key
|
|
12912
|
+
]);
|
|
12913
|
+
setExpandedKeys(keys);
|
|
12914
|
+
}
|
|
12915
|
+
};
|
|
12916
|
+
}
|
|
12917
|
+
|
|
12764
12918
|
/*
|
|
12765
12919
|
* Copyright 2020 Adobe. All rights reserved.
|
|
12766
12920
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -14027,6 +14181,9 @@ function $eed445e0843c11d0$var$ListBoxSection(props, ref, section, className = '
|
|
|
14027
14181
|
renderDropIndicator: ($612b8eb6cb90e02d$export$971707d8a129a1f7)(dragAndDropHooks, dropState)
|
|
14028
14182
|
})));
|
|
14029
14183
|
}
|
|
14184
|
+
/**
|
|
14185
|
+
* A ListBoxSection represents a section within a ListBox.
|
|
14186
|
+
*/ const $eed445e0843c11d0$export$dca12b0bb56e4fc = /*#__PURE__*/ ($e1995378a142960e$export$e953bb1cd0f19726)('section', $eed445e0843c11d0$var$ListBoxSection);
|
|
14030
14187
|
const $eed445e0843c11d0$export$a11e76429ed99b4 = /*#__PURE__*/ ($e1995378a142960e$export$18af5c7a9e9b3664)('item', function ListBoxItem(props, forwardedRef, item) {
|
|
14031
14188
|
let ref = ($df56164dff5785e2$export$4338b53315abf666)(forwardedRef);
|
|
14032
14189
|
let state = ($dbSRa$react.useContext)($eed445e0843c11d0$export$7c5906fe4f1f2af2);
|
|
@@ -14430,6 +14587,161 @@ function $de32f1b87079253c$var$Dialog(props, ref) {
|
|
|
14430
14587
|
* A dialog is an overlay shown above other content in an application.
|
|
14431
14588
|
*/ const $de32f1b87079253c$export$3ddf2d174ce01153 = /*#__PURE__*/ ($dbSRa$react.forwardRef)($de32f1b87079253c$var$Dialog);
|
|
14432
14589
|
|
|
14590
|
+
/*
|
|
14591
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
14592
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
14593
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
14594
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
14595
|
+
*
|
|
14596
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
14597
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
14598
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
14599
|
+
* governing permissions and limitations under the License.
|
|
14600
|
+
*/
|
|
14601
|
+
|
|
14602
|
+
|
|
14603
|
+
|
|
14604
|
+
|
|
14605
|
+
|
|
14606
|
+
|
|
14607
|
+
const $28f4fd908f0de97f$export$1d40e3e0cc4d5de = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
14608
|
+
function $28f4fd908f0de97f$var$DisclosureGroup(props, ref) {
|
|
14609
|
+
let state = ($9385b3affbdec831$export$f36461af0ef4707d)(props);
|
|
14610
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
14611
|
+
...props,
|
|
14612
|
+
defaultClassName: 'react-aria-DisclosureGroup',
|
|
14613
|
+
values: {
|
|
14614
|
+
isDisabled: state.isDisabled,
|
|
14615
|
+
state: state
|
|
14616
|
+
}
|
|
14617
|
+
});
|
|
14618
|
+
let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props);
|
|
14619
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
14620
|
+
...domProps,
|
|
14621
|
+
...renderProps,
|
|
14622
|
+
ref: ref,
|
|
14623
|
+
"data-disabled": props.isDisabled || undefined
|
|
14624
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement($28f4fd908f0de97f$export$1d40e3e0cc4d5de.Provider, {
|
|
14625
|
+
value: state
|
|
14626
|
+
}, renderProps.children));
|
|
14627
|
+
}
|
|
14628
|
+
/**
|
|
14629
|
+
* A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion.
|
|
14630
|
+
* It supports both single and multiple expanded items.
|
|
14631
|
+
*/ const $28f4fd908f0de97f$export$944aceb4f8c89f10 = /*#__PURE__*/ ($dbSRa$react.forwardRef)($28f4fd908f0de97f$var$DisclosureGroup);
|
|
14632
|
+
const $28f4fd908f0de97f$export$d665dd135a51b28a = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
14633
|
+
const $28f4fd908f0de97f$export$dab3ea4a6ef094da = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
14634
|
+
const $28f4fd908f0de97f$var$InternalDisclosureContext = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
14635
|
+
function $28f4fd908f0de97f$var$Disclosure(props, ref) {
|
|
14636
|
+
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $28f4fd908f0de97f$export$d665dd135a51b28a);
|
|
14637
|
+
let groupState = ($dbSRa$react.useContext)($28f4fd908f0de97f$export$1d40e3e0cc4d5de);
|
|
14638
|
+
let { id: id, ...otherProps } = props;
|
|
14639
|
+
// Generate an id if one wasn't provided.
|
|
14640
|
+
// (can't pass id into useId since it can also be a number)
|
|
14641
|
+
let defaultId = ($bdb11010cef70236$export$f680877a34711e37)();
|
|
14642
|
+
id || (id = defaultId);
|
|
14643
|
+
let isExpanded = groupState ? groupState.expandedKeys.has(id) : props.isExpanded;
|
|
14644
|
+
let state = ($bf996d45f4a36925$export$3fcbf6e4407997e0)({
|
|
14645
|
+
...props,
|
|
14646
|
+
isExpanded: isExpanded,
|
|
14647
|
+
onExpandedChange (isExpanded) {
|
|
14648
|
+
var _props_onExpandedChange;
|
|
14649
|
+
if (groupState) groupState.toggleKey(id);
|
|
14650
|
+
(_props_onExpandedChange = props.onExpandedChange) === null || _props_onExpandedChange === void 0 ? void 0 : _props_onExpandedChange.call(props, isExpanded);
|
|
14651
|
+
}
|
|
14652
|
+
});
|
|
14653
|
+
let panelRef = ($dbSRa$react).useRef(null);
|
|
14654
|
+
let isDisabled = props.isDisabled || (groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled) || false;
|
|
14655
|
+
let { buttonProps: buttonProps, panelProps: panelProps } = ($5e910fae8e128ead$export$6e3e27031a30522f)({
|
|
14656
|
+
...props,
|
|
14657
|
+
isExpanded: isExpanded,
|
|
14658
|
+
isDisabled: isDisabled
|
|
14659
|
+
}, state, panelRef);
|
|
14660
|
+
let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = ($f7dceffc5ad7768b$export$4e328f61c538687f)({
|
|
14661
|
+
within: true
|
|
14662
|
+
});
|
|
14663
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
14664
|
+
...props,
|
|
14665
|
+
id: undefined,
|
|
14666
|
+
defaultClassName: 'react-aria-Disclosure',
|
|
14667
|
+
values: {
|
|
14668
|
+
isExpanded: state.isExpanded,
|
|
14669
|
+
isDisabled: isDisabled,
|
|
14670
|
+
isFocusVisibleWithin: isFocusVisibleWithin,
|
|
14671
|
+
state: state
|
|
14672
|
+
}
|
|
14673
|
+
});
|
|
14674
|
+
let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(otherProps);
|
|
14675
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement(($64fa3d84918910a7$export$2881499e37b75b9a), {
|
|
14676
|
+
values: [
|
|
14677
|
+
[
|
|
14678
|
+
($d2b4bc8c273e7be6$export$24d547caef80ccd1),
|
|
14679
|
+
{
|
|
14680
|
+
slots: {
|
|
14681
|
+
[($64fa3d84918910a7$export$c62b8e45d58ddad9)]: {},
|
|
14682
|
+
trigger: buttonProps
|
|
14683
|
+
}
|
|
14684
|
+
}
|
|
14685
|
+
],
|
|
14686
|
+
[
|
|
14687
|
+
$28f4fd908f0de97f$var$InternalDisclosureContext,
|
|
14688
|
+
{
|
|
14689
|
+
panelProps: panelProps,
|
|
14690
|
+
panelRef: panelRef
|
|
14691
|
+
}
|
|
14692
|
+
],
|
|
14693
|
+
[
|
|
14694
|
+
$28f4fd908f0de97f$export$dab3ea4a6ef094da,
|
|
14695
|
+
state
|
|
14696
|
+
]
|
|
14697
|
+
]
|
|
14698
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
14699
|
+
ref: ref,
|
|
14700
|
+
"data-expanded": state.isExpanded || undefined,
|
|
14701
|
+
"data-disabled": isDisabled || undefined,
|
|
14702
|
+
"data-focus-visible-within": isFocusVisibleWithin || undefined,
|
|
14703
|
+
...domProps,
|
|
14704
|
+
...focusWithinProps,
|
|
14705
|
+
...renderProps
|
|
14706
|
+
}, renderProps.children));
|
|
14707
|
+
}
|
|
14708
|
+
function $28f4fd908f0de97f$var$DisclosurePanel(props, ref) {
|
|
14709
|
+
let { role: role = 'group' } = props;
|
|
14710
|
+
let { panelProps: panelProps, panelRef: panelRef } = ($dbSRa$react.useContext)($28f4fd908f0de97f$var$InternalDisclosureContext);
|
|
14711
|
+
let { isFocusVisible: isFocusVisibleWithin, focusProps: focusWithinProps } = ($f7dceffc5ad7768b$export$4e328f61c538687f)({
|
|
14712
|
+
within: true
|
|
14713
|
+
});
|
|
14714
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
14715
|
+
...props,
|
|
14716
|
+
defaultClassName: 'react-aria-DisclosurePanel',
|
|
14717
|
+
values: {
|
|
14718
|
+
isFocusVisibleWithin: isFocusVisibleWithin
|
|
14719
|
+
}
|
|
14720
|
+
});
|
|
14721
|
+
let DOMProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props);
|
|
14722
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
14723
|
+
...DOMProps,
|
|
14724
|
+
ref: ($5dc95899b306f630$export$c9058316764c140e)(ref, panelRef),
|
|
14725
|
+
...($3ef42575df84b30b$export$9d1611c77c2fe928)(panelProps, focusWithinProps),
|
|
14726
|
+
...renderProps,
|
|
14727
|
+
role: role,
|
|
14728
|
+
"data-focus-visible-within": isFocusVisibleWithin || undefined
|
|
14729
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement(($64fa3d84918910a7$export$2881499e37b75b9a), {
|
|
14730
|
+
values: [
|
|
14731
|
+
[
|
|
14732
|
+
($d2b4bc8c273e7be6$export$24d547caef80ccd1),
|
|
14733
|
+
null
|
|
14734
|
+
]
|
|
14735
|
+
]
|
|
14736
|
+
}, props.children));
|
|
14737
|
+
}
|
|
14738
|
+
/**
|
|
14739
|
+
* A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
|
|
14740
|
+
*/ const $28f4fd908f0de97f$export$74a362b31437ec83 = /*#__PURE__*/ ($dbSRa$react.forwardRef)($28f4fd908f0de97f$var$Disclosure);
|
|
14741
|
+
/**
|
|
14742
|
+
* A DisclosurePanel provides the content for a disclosure.
|
|
14743
|
+
*/ const $28f4fd908f0de97f$export$feabaa331e1d464c = /*#__PURE__*/ ($dbSRa$react.forwardRef)($28f4fd908f0de97f$var$DisclosurePanel);
|
|
14744
|
+
|
|
14433
14745
|
/*
|
|
14434
14746
|
* Copyright 2022 Adobe. All rights reserved.
|
|
14435
14747
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -15509,13 +15821,58 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
|
|
|
15509
15821
|
}, renderProps.children));
|
|
15510
15822
|
}
|
|
15511
15823
|
|
|
15512
|
-
var css_248z$
|
|
15513
|
-
styleInject(css_248z$
|
|
15824
|
+
var css_248z$n = ".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";
|
|
15825
|
+
styleInject(css_248z$n);
|
|
15826
|
+
|
|
15827
|
+
var css_248z$m = ".bcds-react-aria-Button {\n border: none;\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: var(--layout-padding-small);\n font: var(--typography-regular-body);\n padding-left: 16px;\n padding-right: 16px;\n}\n.bcds-react-aria-Button[data-disabled] {\n cursor: not-allowed;\n}\n.bcds-react-aria-Button[data-focused] {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Icon button */\n.bcds-react-aria-Button.icon {\n align-items: center;\n justify-content: space-around;\n}\n\n/* Sizes */\n.bcds-react-aria-Button.small {\n min-height: 32px;\n}\n.bcds-react-aria-Button.small.icon {\n padding: unset;\n height: 32px;\n width: 32px;\n min-width: 32px;\n}\n.bcds-react-aria-Button.medium {\n min-height: 40px;\n}\n.bcds-react-aria-Button.medium.icon {\n padding: unset;\n height: 40px;\n width: 40px;\n min-width: 40px;\n}\n\n/* Variant - Primary */\n.bcds-react-aria-Button.primary {\n background: var(--surface-color-primary-button-default);\n color: var(--icons-color-primary-invert);\n}\n.bcds-react-aria-Button.primary.danger {\n background-color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.primary[data-disabled] {\n background-color: var(--surface-color-primary-danger-button-disabled);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.primary[data-hovered] {\n background-color: var(--surface-color-primary-button-hover);\n}\n.bcds-react-aria-Button.primary.danger[data-hovered] {\n background-color: var(--surface-color-primary-danger-button-hover);\n}\n\n/* Variant - Secondary */\n.bcds-react-aria-Button.secondary {\n background-color: var(--surface-color-secondary-button-default);\n border: 1px solid var(--surface-color-border-dark);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.secondary.danger {\n border-color: var(--support-border-color-danger);\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.secondary[data-disabled] {\n background-color: var(--surface-color-secondary-button-disabled);\n border-color: var(--surface-color-border-default);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.secondary[data-hovered] {\n background-color: var(--surface-color-secondary-button-hover);\n}\n.bcds-react-aria-Button.secondary.danger[data-hovered] {\n background-color: var(--support-surface-color-danger);\n}\n\n/* Variant - Tertiary */\n.bcds-react-aria-Button.tertiary {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.tertiary.danger {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.tertiary[data-disabled] {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.tertiary[data-hovered] {\n background-color: var(--surface-color-tertiary-button-hover);\n}\n.bcds-react-aria-Button.tertiary.danger[data-hovered] {\n background-color: var(--support-surface-color-danger);\n}\n\n/* Variant - Link */\n.bcds-react-aria-Button.link {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-link);\n text-decoration: underline;\n text-underline-offset: 0.3em;\n}\n.bcds-react-aria-Button.link.danger {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.link[data-disabled] {\n color: var(--typography-color-disabled);\n}\n";
|
|
15828
|
+
styleInject(css_248z$m);
|
|
15514
15829
|
|
|
15515
15830
|
function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
|
|
15516
15831
|
return (jsxRuntime.jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `bcds-react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
|
|
15517
15832
|
}
|
|
15518
15833
|
|
|
15834
|
+
/* The component implements the Chevron Up icon from Font Awesome: https://fontawesome.com/icons/chevron-up */
|
|
15835
|
+
function SvgChevronUpIcon({ id = "chevron-up-icon" }) {
|
|
15836
|
+
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M4.21231 13.3146L9.52695 8.2226C9.6939 8.08348 9.86086 8 10.0278 8C10.1948 8 10.3339 8.05565 10.473 8.16695L15.7876 13.259C16.066 13.5372 16.066 13.9546 15.8155 14.2051C15.5651 14.4833 15.1477 14.4833 14.8694 14.2329L10.0278 9.61387L5.13054 14.2885C4.88011 14.539 4.43491 14.539 4.18448 14.2607C3.93405 13.9825 3.93405 13.5651 4.21231 13.3146Z", fill: "currentColor" }) }));
|
|
15837
|
+
}
|
|
15838
|
+
|
|
15839
|
+
/* The component implements the Chevron Down icon from Font Awesome: https://fontawesome.com/icons/chevron-down */
|
|
15840
|
+
function SvgChevronDownIcon({ id = "chevron-down-icon" }) {
|
|
15841
|
+
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M15.7882 9.15569L10.4858 14.236C10.3192 14.3748 10.1527 14.4303 10.0139 14.4303C9.84731 14.4303 9.68074 14.3748 9.54194 14.2637L4.21182 9.15569C3.9342 8.90584 3.9342 8.46167 4.18405 8.21182C4.4339 7.9342 4.87808 7.9342 5.12793 8.18405L10.0139 12.8479L14.872 8.18405C15.1219 7.9342 15.5661 7.9342 15.8159 8.21182C16.0658 8.46167 16.0658 8.90584 15.7882 9.15569Z", fill: "currentColor" }) }));
|
|
15842
|
+
}
|
|
15843
|
+
|
|
15844
|
+
function Accordion({ label, children, ...props }) {
|
|
15845
|
+
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 }) })] })) }));
|
|
15846
|
+
}
|
|
15847
|
+
|
|
15848
|
+
var css_248z$l = ".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";
|
|
15849
|
+
styleInject(css_248z$l);
|
|
15850
|
+
|
|
15851
|
+
function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
15852
|
+
function getTitle() {
|
|
15853
|
+
switch (titleElement) {
|
|
15854
|
+
case "h1":
|
|
15855
|
+
return jsxRuntime.jsx("h1", { children: title });
|
|
15856
|
+
case "h2":
|
|
15857
|
+
return jsxRuntime.jsx("h2", { children: title });
|
|
15858
|
+
case "h3":
|
|
15859
|
+
return jsxRuntime.jsx("h3", { children: title });
|
|
15860
|
+
case "h4":
|
|
15861
|
+
return jsxRuntime.jsx("h4", { children: title });
|
|
15862
|
+
case "h5":
|
|
15863
|
+
return jsxRuntime.jsx("h5", { children: title });
|
|
15864
|
+
case "h6":
|
|
15865
|
+
return jsxRuntime.jsx("h6", { children: title });
|
|
15866
|
+
default:
|
|
15867
|
+
return jsxRuntime.jsx("span", { children: title });
|
|
15868
|
+
}
|
|
15869
|
+
}
|
|
15870
|
+
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 })] }));
|
|
15871
|
+
}
|
|
15872
|
+
|
|
15873
|
+
var css_248z$k = ".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";
|
|
15874
|
+
styleInject(css_248z$k);
|
|
15875
|
+
|
|
15519
15876
|
/* The component implements the Circle Check icon from Font Awesome: https://fontawesome.com/icons/circle-check */
|
|
15520
15877
|
function SvgCheckCircleIcon({ id = "check-icon" }) {
|
|
15521
15878
|
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M12.4688 7.46875C12.75 7.1875 13.2188 7.1875 13.5 7.5C13.8125 7.78125 13.8125 8.25 13.5 8.53125L9.5 12.5312C9.375 12.6875 9.1875 12.75 9 12.75C8.78125 12.75 8.59375 12.6875 8.4375 12.5312L6.4375 10.5312C6.125 10.25 6.125 9.78125 6.4375 9.46875C6.71875 9.1875 7.1875 9.1875 7.5 9.46875L9 10.9688L12.4688 7.46875ZM10 2C14.4062 2 18 5.59375 18 10C18 14.4375 14.4062 18 10 18C5.5625 18 2 14.4375 2 10C2 5.59375 5.5625 2 10 2ZM10 16.5C13.5625 16.5 16.5 13.5938 16.5 10C16.5 6.4375 13.5625 3.5 10 3.5C6.40625 3.5 3.5 6.4375 3.5 10C3.5 13.5938 6.40625 16.5 10 16.5Z", fill: "currentColor" }) }) }));
|
|
@@ -15766,16 +16123,6 @@ function RadioGroup({ orientation = "vertical", label, description, children, er
|
|
|
15766
16123
|
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 })] }))] })) }));
|
|
15767
16124
|
}
|
|
15768
16125
|
|
|
15769
|
-
/* The component implements the Chevron Up icon from Font Awesome: https://fontawesome.com/icons/chevron-up */
|
|
15770
|
-
function SvgChevronUpIcon({ id = "chevron-up-icon" }) {
|
|
15771
|
-
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M4.21231 13.3146L9.52695 8.2226C9.6939 8.08348 9.86086 8 10.0278 8C10.1948 8 10.3339 8.05565 10.473 8.16695L15.7876 13.259C16.066 13.5372 16.066 13.9546 15.8155 14.2051C15.5651 14.4833 15.1477 14.4833 14.8694 14.2329L10.0278 9.61387L5.13054 14.2885C4.88011 14.539 4.43491 14.539 4.18448 14.2607C3.93405 13.9825 3.93405 13.5651 4.21231 13.3146Z", fill: "currentColor" }) }));
|
|
15772
|
-
}
|
|
15773
|
-
|
|
15774
|
-
/* The component implements the Chevron Down icon from Font Awesome: https://fontawesome.com/icons/chevron-down */
|
|
15775
|
-
function SvgChevronDownIcon({ id = "chevron-down-icon" }) {
|
|
15776
|
-
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M15.7882 9.15569L10.4858 14.236C10.3192 14.3748 10.1527 14.4303 10.0139 14.4303C9.84731 14.4303 9.68074 14.3748 9.54194 14.2637L4.21182 9.15569C3.9342 8.90584 3.9342 8.46167 4.18405 8.21182C4.4339 7.9342 4.87808 7.9342 5.12793 8.18405L10.0139 12.8479L14.872 8.18405C15.1219 7.9342 15.5661 7.9342 15.8159 8.21182C16.0658 8.46167 16.0658 8.90584 15.7882 9.15569Z", fill: "currentColor" }) }));
|
|
15777
|
-
}
|
|
15778
|
-
|
|
15779
16126
|
var css_248z$7 = ".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";
|
|
15780
16127
|
styleInject(css_248z$7);
|
|
15781
16128
|
|
|
@@ -15796,7 +16143,7 @@ function Select({ items, sections, label, description, placeholder, size = "medi
|
|
|
15796
16143
|
// support different markup within the same component.
|
|
15797
16144
|
items: sections
|
|
15798
16145
|
? sections
|
|
15799
|
-
: [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxRuntime.jsxs($
|
|
16146
|
+
: [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxRuntime.jsxs($eed445e0843c11d0$export$dca12b0bb56e4fc, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsxRuntime.jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsxRuntime.jsx($e1995378a142960e$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxRuntime.jsxs($eed445e0843c11d0$export$a11e76429ed99b4, { id: item?.id ? item.id : item.label, className: `bcds-react-aria-Select--ListBoxItem ${item?.isDestructive ? "destructive" : ""}`, textValue: item.label, children: [item?.iconLeft && (jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconLeft })), jsxRuntime.jsxs("div", { className: "bcds-react-aria-Select--ListBoxItem-Text-container", children: [jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", className: "bcds-react-aria-Select--ListBoxItem-Text-label", children: item.label }), item.description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-Select--ListBoxItem-Text-description", children: item.description }))] }), item?.iconRight && (jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconRight }))] })) })] })) }) })] })) }));
|
|
15800
16147
|
}
|
|
15801
16148
|
|
|
15802
16149
|
function SvgBcOutlineIcon({ id = "bc-outline-icon" }) {
|
|
@@ -15868,6 +16215,8 @@ function Tooltip(props) {
|
|
|
15868
16215
|
return (jsxRuntime.jsxs($4e3b923658d69c60$export$28c660c63b792dea, { className: "bcds-react-aria-Tooltip", ...props, children: [jsxRuntime.jsx($44f671af83e7d9e0$export$746d02f47f4d381, { className: "bcds-react-aria-OverlayArrow", children: jsxRuntime.jsx(SvgTooltipArrowUp, {}) }), jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children })] }));
|
|
15869
16216
|
}
|
|
15870
16217
|
|
|
16218
|
+
exports.Accordion = Accordion;
|
|
16219
|
+
exports.AccordionGroup = AccordionGroup;
|
|
15871
16220
|
exports.AlertBanner = AlertBanner;
|
|
15872
16221
|
exports.AlertDialog = AlertDialog;
|
|
15873
16222
|
exports.Button = Button;
|