@bcgov/design-system-react-components 0.7.0-pr689 → 0.7.0-pr697
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 +1603 -295
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/index.js +1597 -296
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +119 -83
- package/package.json +3 -3
package/dist/cjs/index.cjs
CHANGED
|
@@ -31,8 +31,8 @@ function styleInject(css, ref) {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
var css_248z$B = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --surface-opacity-0: 0;\n --surface-opacity-10: 0.1;\n --surface-opacity-20: 0.2;\n --surface-opacity-30: 0.3;\n --surface-opacity-40: 0.4;\n --surface-opacity-50: 0.5;\n --surface-opacity-60: 0.6;\n --surface-opacity-70: 0.7;\n --surface-opacity-80: 0.8;\n --surface-opacity-90: 0.9;\n --surface-opacity-100: 1;\n --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /** Default shadow for most content and UI elements */\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /** Reduced shadow for secondary UI elements */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /** Standard shadow for UI elements like cards and buttons */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /** Larger shadow for emphasis. Use sparingly */\n --surface-color-primary-button-default: #013366; /** Default fill colour for primary buttons */\n --surface-color-primary-button-hover: #1E5189; /** Fill colour used when user hovers over primary button */\n --surface-color-primary-button-disabled: #EDEBE9; /** Fill colour for inactive primary buttons */\n --surface-color-primary-danger-button-default: #CE3E39; /** Default fill colour for buttons in danger/warning state */\n --surface-color-primary-danger-button-hover: #A2312D; /** Fill colour used when user hovers over danger/warning button */\n --surface-color-primary-danger-button-disabled: #EDEBE9; /** Default fill colour for disabled danger/warning button */\n --surface-color-primary-default: #013366; /** Default theme colour for components and layout */\n --surface-color-primary-hover: #1E5189; /** Hover variant of surface.color.primary.default */\n --surface-color-primary-pressed: #01264C; /** Selected/pressed variant of surface.color.primary.default */\n --surface-color-primary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.primary default */\n --surface-color-secondary-button-default: #FFFFFF; /** Fill colour for secondary buttons */\n --surface-color-secondary-button-hover: #EDEBE9; /** Fill colour used when user hovers over secondary button */\n --surface-color-secondary-button-disabled: #EDEBE9; /** Fill colour for inactive secondary buttons */\n --surface-color-secondary-default: #FFFFFF; /** Light theme colour for components and layout */\n --surface-color-secondary-hover: #EDEBE9; /** Hover variant of surface.color.secondary.default */\n --surface-color-secondary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.secondary.default */\n --surface-color-secondary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.secondary default */\n --surface-color-tertiary-button-default: rgba(255,255,255,0); /** Default fill colour for tertiary buttons */\n --surface-color-tertiary-button-hover: #ECEAE8; /** Fill colour used when user hovers over tertiary button */\n --surface-color-tertiary-button-disabled: #EDEBE9; /** Fill colour for inactive tertiary buttons */\n --surface-color-tertiary-default: #FFFFFF00; /** Alternative light theme colour for components and layout */\n --surface-color-tertiary-hover: #ECEAE8; /** Hover variant of surface.color.tertiary.default */\n --surface-color-tertiary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.tertiary.default */\n --surface-color-tertiary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.tertiary default */\n --surface-color-menus-default: #FFFFFF; /** Default fill colour for menu items */\n --surface-color-menus-hover: #EDEBE9; /** Fill colour used when user hovers over a menu item */\n --surface-color-forms-default: #FFFFFF; /** Default fill colour for form/input fields */\n --surface-color-forms-disabled: #EDEBE9; /** Fill colour for inactive/disabled form/input fields */\n --surface-color-background-white: #FFFFFF; /** White background */\n --surface-color-background-light-gray: #FAF9F8; /** Default background colour for layout */\n --surface-color-background-light-blue: #F1F8FE; /** Light blue background */\n --surface-color-background-dark-blue: #053662; /** Dark blue background */\n --surface-color-border-default: #D8D8D8; /** Lighter border colour for UI elements */\n --surface-color-border-medium: #898785; /** Default border colour for UI elements */\n --surface-color-border-dark: #353433; /** Used as a hover colour for form fields and inputs */\n --surface-color-border-active: #2E5DD7; /** Used as the active stroke colour for UI elements */\n --surface-color-overlay-default: rgba(0,0,0,0.45); /** Background overlay colour for images and modal dialogues */\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2; /** Background colour for error, failure or danger messages */\n --support-surface-color-success: #F6FFF8; /** Background colour for success messages */\n --support-surface-color-warning: #FEF1D8; /** Background colour for warning messages */\n --support-border-color-info: #053662; /** Border stroke for general/informational messages */\n --support-border-color-danger: #CE3E39; /** Border stroke for error, failure or danger messages */\n --support-border-color-success: #42814A; /** Border stroke for success messages */\n --support-border-color-warning: #F8BB47; /** Border stroke for warning messages */\n --icons-size-xsmall: 14px; /** Smallest icon size */\n --icons-size-small: 16px;\n --icons-size-medium: 20px; /** Default icon size */\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px; /** Largest icon size */\n --icons-color-primary: #2D2D2D; /** Default colour for icons */\n --icons-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous icons */\n --icons-color-disabled: #9F9D9C; /** Use only for inactive/disabled icons */\n --icons-color-link: #255A90; /** Use for hyperlinked icons */\n --icons-color-info: #053662; /** Emphasis colour for icons in general/informational state */\n --icons-color-danger: #CE3E39; /** Emphasis colour for icons in error, failure or danger state */\n --icons-color-success: #42814A; /** Emphasis colour for icons in success state */\n --icons-color-warning: #F8BB47; /** Emphasis colour for icons in warning state */\n --icons-color-primary-invert: #FFFFFF; /** Default colour for icons on dark backgrounds */\n --layout-border-width-none: 0;\n --layout-border-width-small: 1px;\n --layout-border-width-medium: 2px;\n --layout-border-width-large: 4px;\n --layout-padding-none: 0; /** No padding */\n --layout-padding-hair: 0.125rem; /** Smallest padding value for layout */\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem; /** Default padding value for layout */\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem; /** Largest padding value for layout */\n --layout-margin-none: 0rem; /** No margin */\n --layout-margin-hair: 0.125rem; /** Smallest margin value for layout */\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem; /** Default margin value for layout */\n --layout-margin-medium: 1rem;\n --layout-margin-large: 1.5rem;\n --layout-margin-xlarge: 2rem;\n --layout-margin-xxlarge: 2.5rem;\n --layout-margin-xxxlarge: 3rem;\n --layout-margin-huge: 3.5rem; /** Largest margin value for layout */\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --layout-border-radius-circular: 9999px; /** Used for components with a circular radius */\n --typography-font-families-bc-sans: 'BC Sans'; /** BC Sans font. Requires BC Sans package */\n --typography-line-heights-xxxdense: 1.125rem; /** Smallest line height */\n --typography-line-heights-xxdense: 1.313rem;\n --typography-line-heights-xdense: 1.688rem;\n --typography-line-heights-dense: 1.913rem;\n --typography-line-heights-regular: 2.125rem; /** Default line height */\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem; /** Largest line height */\n --typography-line-heights-auto: AUTO; /** System token, used to generate type styles */\n --typography-font-weights-regular: 400; /** System token, used to generate text styles */\n --typography-font-weights-bold: 700; /** System token, used to generate text styles */\n --typography-font-weights-italic-weight: 400; /** System token, used to generate text styles */\n --typography-font-weights-italic-style: italic; /** System token, used to generate text styles */\n --typography-font-size-label: 0.75rem;\n --typography-font-size-small-body: 0.875rem;\n --typography-font-size-body: 1rem;\n --typography-font-size-large-body: 1.125rem;\n --typography-font-size-h5: 1.25rem;\n --typography-font-size-h4: 1.5rem;\n --typography-font-size-h3: 1.75rem;\n --typography-font-size-h2: 2rem;\n --typography-font-size-h1: 2.25rem;\n --typography-font-size-display: 3rem;\n --typography-letter-spacing-0: 0em; /** System token, used to generate type styles */\n --typography-paragraph-spacing-0: 0; /** System token, used to generate type styles */\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /** Labels and captions */\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /** Smaller body text */\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /** Default body text */\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /** Larger body text */\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /** Alternate (unbolded) style for Heading 6 */\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /** Alternate (unbolded) style for Heading 5 */\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /** Alternate (unbolded) style for Heading 4 */\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 3 */\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /** Alternate (unbolded) style for Heading 2 */\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 1 */\n --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /** Extra-large body text size. Do not use for headings */\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (bolded) */\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /** Default for small body text (bolded) */\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /** Default for body text (bolded) */\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (bolded) */\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H6 */\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H5 */\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H4 */\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H3 */\n --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H2 */\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H1 */\n --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /** Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (italic) */\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /** Small body text (italic) */\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /** Default for body text (italic) */\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (italic) */\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Alternate (italic) style for Heading 6 */\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /** Alternate (italic) style for Heading 5 */\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /** Alternate (italic) style for Heading 4 */\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 3 */\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /** Alternate (italic) style for Heading 2 */\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 1 */\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /** Extra-large font size (italic). Do not use for headings */\n --typography-text-case-none: none;\n --typography-text-decoration-none: none; /** System token, used to generate type styles */\n --typography-paragraph-indent-0: 0px; /** System token, used to generate type styles */\n --typography-color-primary: #2D2D2D; /** Default colour for all body text and headings */\n --typography-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous text */\n --typography-color-placeholder: #9F9D9C; /** Use for placeholder text in forms */\n --typography-color-disabled: #9F9D9C; /** Use only for text in inactive user interface elements */\n --typography-color-link: #255A90; /** Use for hyperlinks in body text and headings */\n --typography-color-danger: #CE3E39; /** Use for error, failure or danger message text */\n --typography-color-primary-invert: #FFFFFF; /** Default colour for text on dark backgrounds */\n --typography-color-secondary-invert: #ECEAE8; /** Secondary colour for text on dark backgrounds */\n --theme-gold-10: #FEF8E8; /** Gold scale — lightest */\n --theme-gold-20: #FEF0D8; /** Gold scale */\n --theme-gold-30: #FDE9C4; /** Gold scale */\n --theme-gold-40: #FCE2B0; /** Gold scale */\n --theme-gold-50: #FBDA9D; /** Gold scale */\n --theme-gold-60: #FBD389; /** Gold scale */\n --theme-gold-70: #FACC75; /** Gold scale */\n --theme-gold-80: #F9C462; /** Gold scale */\n --theme-gold-90: #F8BA47; /** Gold scale */\n --theme-gold-100: #FCBA19; /** Gold scale — darkest */\n --theme-blue-10: #F1F8FE; /** Blue scale — lightest */\n --theme-blue-20: #D8EAFD; /** Blue scale */\n --theme-blue-30: #C1DDFC; /** Blue scale */\n --theme-blue-40: #A8D0FB; /** Blue scale */\n --theme-blue-50: #91C4FA; /** Blue scale */\n --theme-blue-60: #7AB8F9; /** Blue scale */\n --theme-blue-70: #5595D9; /** Blue scale */\n --theme-blue-80: #3470B1; /** Blue scale */\n --theme-blue-90: #1E5189; /** Blue scale */\n --theme-blue-100: #013366; /** Blue scale — darkest */\n --theme-gray-10: #FAF9F8; /** Greyscale — lightest */\n --theme-gray-20: #F3F2F1; /** Greyscale */\n --theme-gray-30: #ECEAE8; /** Greyscale */\n --theme-gray-40: #E0DEDC; /** Greyscale */\n --theme-gray-50: #D1CFCD; /** Greyscale */\n --theme-gray-60: #C6C5C3; /** Greyscale */\n --theme-gray-70: #9F9D9C; /** Greyscale */\n --theme-gray-80: #605E5C; /** Greyscale */\n --theme-gray-90: #3D3C3B; /** Greyscale */\n --theme-gray-100: #353433; /** Greyscale */\n --theme-gray-110: #252423; /** Greyscale — darkest */\n --theme-gray-white: #FFFFFF; /** White */\n --theme-primary-blue: #013366; /** Primary Blue (Blue 100) */\n --theme-primary-gold: #FCBA19; /** Primary Gold (Gold 100) */\n}\n";
|
|
35
|
-
styleInject(css_248z$
|
|
34
|
+
var css_248z$D = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --surface-opacity-0: 0;\n --surface-opacity-10: 0.1;\n --surface-opacity-20: 0.2;\n --surface-opacity-30: 0.3;\n --surface-opacity-40: 0.4;\n --surface-opacity-50: 0.5;\n --surface-opacity-60: 0.6;\n --surface-opacity-70: 0.7;\n --surface-opacity-80: 0.8;\n --surface-opacity-90: 0.9;\n --surface-opacity-100: 1;\n --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /** Default shadow for most content and UI elements */\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /** Reduced shadow for secondary UI elements */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /** Standard shadow for UI elements like cards and buttons */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /** Larger shadow for emphasis. Use sparingly */\n --surface-color-primary-button-default: #013366; /** Default fill colour for primary buttons */\n --surface-color-primary-button-hover: #1E5189; /** Fill colour used when user hovers over primary button */\n --surface-color-primary-button-disabled: #EDEBE9; /** Fill colour for inactive primary buttons */\n --surface-color-primary-danger-button-default: #CE3E39; /** Default fill colour for buttons in danger/warning state */\n --surface-color-primary-danger-button-hover: #A2312D; /** Fill colour used when user hovers over danger/warning button */\n --surface-color-primary-danger-button-disabled: #EDEBE9; /** Default fill colour for disabled danger/warning button */\n --surface-color-primary-default: #013366; /** Default theme colour for components and layout */\n --surface-color-primary-hover: #1E5189; /** Hover variant of surface.color.primary.default */\n --surface-color-primary-pressed: #01264C; /** Selected/pressed variant of surface.color.primary.default */\n --surface-color-primary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.primary default */\n --surface-color-secondary-button-default: #FFFFFF; /** Fill colour for secondary buttons */\n --surface-color-secondary-button-hover: #EDEBE9; /** Fill colour used when user hovers over secondary button */\n --surface-color-secondary-button-disabled: #EDEBE9; /** Fill colour for inactive secondary buttons */\n --surface-color-secondary-default: #FFFFFF; /** Light theme colour for components and layout */\n --surface-color-secondary-hover: #EDEBE9; /** Hover variant of surface.color.secondary.default */\n --surface-color-secondary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.secondary.default */\n --surface-color-secondary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.secondary default */\n --surface-color-tertiary-button-default: rgba(255,255,255,0); /** Default fill colour for tertiary buttons */\n --surface-color-tertiary-button-hover: #ECEAE8; /** Fill colour used when user hovers over tertiary button */\n --surface-color-tertiary-button-disabled: #EDEBE9; /** Fill colour for inactive tertiary buttons */\n --surface-color-tertiary-default: #FFFFFF00; /** Alternative light theme colour for components and layout */\n --surface-color-tertiary-hover: #ECEAE8; /** Hover variant of surface.color.tertiary.default */\n --surface-color-tertiary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.tertiary.default */\n --surface-color-tertiary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.tertiary default */\n --surface-color-menus-default: #FFFFFF; /** Default fill colour for menu items */\n --surface-color-menus-hover: #EDEBE9; /** Fill colour used when user hovers over a menu item */\n --surface-color-forms-default: #FFFFFF; /** Default fill colour for form/input fields */\n --surface-color-forms-disabled: #EDEBE9; /** Fill colour for inactive/disabled form/input fields */\n --surface-color-background-white: #FFFFFF; /** White background */\n --surface-color-background-light-gray: #FAF9F8; /** Default background colour for layout */\n --surface-color-background-light-blue: #F1F8FE; /** Light blue background */\n --surface-color-background-dark-blue: #053662; /** Dark blue background */\n --surface-color-border-default: #D8D8D8; /** Lighter border colour for UI elements */\n --surface-color-border-medium: #898785; /** Default border colour for UI elements */\n --surface-color-border-dark: #353433; /** Used as a hover colour for form fields and inputs */\n --surface-color-border-active: #2E5DD7; /** Used as the active stroke colour for UI elements */\n --surface-color-overlay-default: rgba(0,0,0,0.45); /** Background overlay colour for images and modal dialogues */\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2; /** Background colour for error, failure or danger messages */\n --support-surface-color-success: #F6FFF8; /** Background colour for success messages */\n --support-surface-color-warning: #FEF1D8; /** Background colour for warning messages */\n --support-border-color-info: #053662; /** Border stroke for general/informational messages */\n --support-border-color-danger: #CE3E39; /** Border stroke for error, failure or danger messages */\n --support-border-color-success: #42814A; /** Border stroke for success messages */\n --support-border-color-warning: #F8BB47; /** Border stroke for warning messages */\n --icons-size-xsmall: 14px; /** Smallest icon size */\n --icons-size-small: 16px;\n --icons-size-medium: 20px; /** Default icon size */\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px; /** Largest icon size */\n --icons-color-primary: #2D2D2D; /** Default colour for icons */\n --icons-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous icons */\n --icons-color-disabled: #9F9D9C; /** Use only for inactive/disabled icons */\n --icons-color-link: #255A90; /** Use for hyperlinked icons */\n --icons-color-info: #053662; /** Emphasis colour for icons in general/informational state */\n --icons-color-danger: #CE3E39; /** Emphasis colour for icons in error, failure or danger state */\n --icons-color-success: #42814A; /** Emphasis colour for icons in success state */\n --icons-color-warning: #F8BB47; /** Emphasis colour for icons in warning state */\n --icons-color-primary-invert: #FFFFFF; /** Default colour for icons on dark backgrounds */\n --layout-border-width-none: 0;\n --layout-border-width-small: 1px;\n --layout-border-width-medium: 2px;\n --layout-border-width-large: 4px;\n --layout-padding-none: 0; /** No padding */\n --layout-padding-hair: 0.125rem; /** Smallest padding value for layout */\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem; /** Default padding value for layout */\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem; /** Largest padding value for layout */\n --layout-margin-none: 0rem; /** No margin */\n --layout-margin-hair: 0.125rem; /** Smallest margin value for layout */\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem; /** Default margin value for layout */\n --layout-margin-medium: 1rem;\n --layout-margin-large: 1.5rem;\n --layout-margin-xlarge: 2rem;\n --layout-margin-xxlarge: 2.5rem;\n --layout-margin-xxxlarge: 3rem;\n --layout-margin-huge: 3.5rem; /** Largest margin value for layout */\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --layout-border-radius-circular: 9999px; /** Used for components with a circular radius */\n --typography-font-families-bc-sans: 'BC Sans'; /** BC Sans font. Requires BC Sans package */\n --typography-line-heights-xxxdense: 1.125rem; /** Smallest line height */\n --typography-line-heights-xxdense: 1.313rem;\n --typography-line-heights-xdense: 1.688rem;\n --typography-line-heights-dense: 1.913rem;\n --typography-line-heights-regular: 2.125rem; /** Default line height */\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem; /** Largest line height */\n --typography-line-heights-auto: AUTO; /** System token, used to generate type styles */\n --typography-font-weights-regular: 400; /** System token, used to generate text styles */\n --typography-font-weights-bold: 700; /** System token, used to generate text styles */\n --typography-font-weights-italic-weight: 400; /** System token, used to generate text styles */\n --typography-font-weights-italic-style: italic; /** System token, used to generate text styles */\n --typography-font-size-label: 0.75rem;\n --typography-font-size-small-body: 0.875rem;\n --typography-font-size-body: 1rem;\n --typography-font-size-large-body: 1.125rem;\n --typography-font-size-h5: 1.25rem;\n --typography-font-size-h4: 1.5rem;\n --typography-font-size-h3: 1.75rem;\n --typography-font-size-h2: 2rem;\n --typography-font-size-h1: 2.25rem;\n --typography-font-size-display: 3rem;\n --typography-letter-spacing-0: 0em; /** System token, used to generate type styles */\n --typography-paragraph-spacing-0: 0; /** System token, used to generate type styles */\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /** Labels and captions */\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /** Smaller body text */\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /** Default body text */\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /** Larger body text */\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /** Alternate (unbolded) style for Heading 6 */\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /** Alternate (unbolded) style for Heading 5 */\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /** Alternate (unbolded) style for Heading 4 */\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 3 */\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /** Alternate (unbolded) style for Heading 2 */\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 1 */\n --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /** Extra-large body text size. Do not use for headings */\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (bolded) */\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /** Default for small body text (bolded) */\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /** Default for body text (bolded) */\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (bolded) */\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H6 */\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H5 */\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H4 */\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H3 */\n --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H2 */\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H1 */\n --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /** Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (italic) */\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /** Small body text (italic) */\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /** Default for body text (italic) */\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (italic) */\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Alternate (italic) style for Heading 6 */\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /** Alternate (italic) style for Heading 5 */\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /** Alternate (italic) style for Heading 4 */\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 3 */\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /** Alternate (italic) style for Heading 2 */\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 1 */\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /** Extra-large font size (italic). Do not use for headings */\n --typography-text-case-none: none;\n --typography-text-decoration-none: none; /** System token, used to generate type styles */\n --typography-paragraph-indent-0: 0px; /** System token, used to generate type styles */\n --typography-color-primary: #2D2D2D; /** Default colour for all body text and headings */\n --typography-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous text */\n --typography-color-placeholder: #9F9D9C; /** Use for placeholder text in forms */\n --typography-color-disabled: #9F9D9C; /** Use only for text in inactive user interface elements */\n --typography-color-link: #255A90; /** Use for hyperlinks in body text and headings */\n --typography-color-danger: #CE3E39; /** Use for error, failure or danger message text */\n --typography-color-primary-invert: #FFFFFF; /** Default colour for text on dark backgrounds */\n --typography-color-secondary-invert: #ECEAE8; /** Secondary colour for text on dark backgrounds */\n --theme-gold-10: #FEF8E8; /** Gold scale — lightest */\n --theme-gold-20: #FEF0D8; /** Gold scale */\n --theme-gold-30: #FDE9C4; /** Gold scale */\n --theme-gold-40: #FCE2B0; /** Gold scale */\n --theme-gold-50: #FBDA9D; /** Gold scale */\n --theme-gold-60: #FBD389; /** Gold scale */\n --theme-gold-70: #FACC75; /** Gold scale */\n --theme-gold-80: #F9C462; /** Gold scale */\n --theme-gold-90: #F8BA47; /** Gold scale */\n --theme-gold-100: #FCBA19; /** Gold scale — darkest */\n --theme-blue-10: #F1F8FE; /** Blue scale — lightest */\n --theme-blue-20: #D8EAFD; /** Blue scale */\n --theme-blue-30: #C1DDFC; /** Blue scale */\n --theme-blue-40: #A8D0FB; /** Blue scale */\n --theme-blue-50: #91C4FA; /** Blue scale */\n --theme-blue-60: #7AB8F9; /** Blue scale */\n --theme-blue-70: #5595D9; /** Blue scale */\n --theme-blue-80: #3470B1; /** Blue scale */\n --theme-blue-90: #1E5189; /** Blue scale */\n --theme-blue-100: #013366; /** Blue scale — darkest */\n --theme-gray-10: #FAF9F8; /** Greyscale — lightest */\n --theme-gray-20: #F3F2F1; /** Greyscale */\n --theme-gray-30: #ECEAE8; /** Greyscale */\n --theme-gray-40: #E0DEDC; /** Greyscale */\n --theme-gray-50: #D1CFCD; /** Greyscale */\n --theme-gray-60: #C6C5C3; /** Greyscale */\n --theme-gray-70: #9F9D9C; /** Greyscale */\n --theme-gray-80: #605E5C; /** Greyscale */\n --theme-gray-90: #3D3C3B; /** Greyscale */\n --theme-gray-100: #353433; /** Greyscale */\n --theme-gray-110: #252423; /** Greyscale — darkest */\n --theme-gray-white: #FFFFFF; /** White */\n --theme-primary-blue: #013366; /** Primary Blue (Blue 100) */\n --theme-primary-gold: #FCBA19; /** Primary Gold (Gold 100) */\n}\n";
|
|
35
|
+
styleInject(css_248z$D);
|
|
36
36
|
|
|
37
37
|
/*
|
|
38
38
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -19558,6 +19558,20 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
19558
19558
|
}, overlay);
|
|
19559
19559
|
}
|
|
19560
19560
|
|
|
19561
|
+
/*
|
|
19562
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
19563
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
19564
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
19565
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
19566
|
+
*
|
|
19567
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
19568
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
19569
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
19570
|
+
* governing permissions and limitations under the License.
|
|
19571
|
+
*/
|
|
19572
|
+
|
|
19573
|
+
const $650bea62ab5f5f0f$export$744d98a3b8a94e1c = /*#__PURE__*/ ($8WNJc$react.createContext)({});
|
|
19574
|
+
|
|
19561
19575
|
var $50608029e06fcc45$exports = {};
|
|
19562
19576
|
$50608029e06fcc45$exports = {
|
|
19563
19577
|
"longPressMessage": `\u{627}\u{636}\u{63A}\u{637} \u{645}\u{637}\u{648}\u{644}\u{627}\u{64B} \u{623}\u{648} \u{627}\u{636}\u{63A}\u{637} \u{639}\u{644}\u{649} Alt + \u{627}\u{644}\u{633}\u{647}\u{645} \u{644}\u{623}\u{633}\u{641}\u{644} \u{644}\u{641}\u{62A}\u{62D} \u{627}\u{644}\u{642}\u{627}\u{626}\u{645}\u{629}`
|
|
@@ -19946,7 +19960,7 @@ function $f19b83c1486f45cc$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
|
19946
19960
|
}
|
|
19947
19961
|
|
|
19948
19962
|
/*
|
|
19949
|
-
* Copyright
|
|
19963
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
19950
19964
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
19951
19965
|
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
19952
19966
|
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
@@ -19955,67 +19969,7 @@ function $f19b83c1486f45cc$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
|
19955
19969
|
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
19956
19970
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
19957
19971
|
* governing permissions and limitations under the License.
|
|
19958
|
-
*/
|
|
19959
|
-
|
|
19960
|
-
function $e3403870bfb691da$export$79fefeb1c2091ac3(props) {
|
|
19961
|
-
let overlayTriggerState = ($f11fb0bcf1b2687a$export$61c6a8c84e605fb6)(props);
|
|
19962
|
-
let [focusStrategy, setFocusStrategy] = ($8WNJc$react.useState)(null);
|
|
19963
|
-
let [expandedKeysStack, setExpandedKeysStack] = ($8WNJc$react.useState)([]);
|
|
19964
|
-
let closeAll = ()=>{
|
|
19965
|
-
setExpandedKeysStack([]);
|
|
19966
|
-
overlayTriggerState.close();
|
|
19967
|
-
};
|
|
19968
|
-
let openSubmenu = (triggerKey, level)=>{
|
|
19969
|
-
setExpandedKeysStack((oldStack)=>{
|
|
19970
|
-
if (level > oldStack.length) return oldStack;
|
|
19971
|
-
return [
|
|
19972
|
-
...oldStack.slice(0, level),
|
|
19973
|
-
triggerKey
|
|
19974
|
-
];
|
|
19975
|
-
});
|
|
19976
|
-
};
|
|
19977
|
-
let closeSubmenu = (triggerKey, level)=>{
|
|
19978
|
-
setExpandedKeysStack((oldStack)=>{
|
|
19979
|
-
let key = oldStack[level];
|
|
19980
|
-
if (key === triggerKey) return oldStack.slice(0, level);
|
|
19981
|
-
else return oldStack;
|
|
19982
|
-
});
|
|
19983
|
-
};
|
|
19984
|
-
return {
|
|
19985
|
-
focusStrategy: focusStrategy,
|
|
19986
|
-
...overlayTriggerState,
|
|
19987
|
-
open (focusStrategy = null) {
|
|
19988
|
-
setFocusStrategy(focusStrategy);
|
|
19989
|
-
overlayTriggerState.open();
|
|
19990
|
-
},
|
|
19991
|
-
toggle (focusStrategy = null) {
|
|
19992
|
-
setFocusStrategy(focusStrategy);
|
|
19993
|
-
overlayTriggerState.toggle();
|
|
19994
|
-
},
|
|
19995
|
-
close () {
|
|
19996
|
-
closeAll();
|
|
19997
|
-
},
|
|
19998
|
-
expandedKeysStack: expandedKeysStack,
|
|
19999
|
-
openSubmenu: openSubmenu,
|
|
20000
|
-
closeSubmenu: closeSubmenu
|
|
20001
|
-
};
|
|
20002
|
-
}
|
|
20003
|
-
|
|
20004
|
-
const $49319ee1285aa241$export$795aec4671cbae19 = /*#__PURE__*/ ($8WNJc$react.createContext)(null);
|
|
20005
|
-
class $49319ee1285aa241$var$SubmenuTriggerNode extends ($6f0c29017aeec335$export$d68d59712b04d9d1) {
|
|
20006
|
-
static{
|
|
20007
|
-
this.type = 'submenutrigger';
|
|
20008
|
-
}
|
|
20009
|
-
filter(collection, newCollection, filterFn) {
|
|
20010
|
-
let triggerNode = collection.getItem(this.firstChildKey);
|
|
20011
|
-
if (triggerNode && filterFn(triggerNode.textValue, this)) {
|
|
20012
|
-
let clone = this.clone();
|
|
20013
|
-
newCollection.addDescendants(clone, collection);
|
|
20014
|
-
return clone;
|
|
20015
|
-
}
|
|
20016
|
-
return null;
|
|
20017
|
-
}
|
|
20018
|
-
}
|
|
19972
|
+
*/ const $d5765cd7be93edd1$export$6f49b4016bfc8d56 = new WeakMap();
|
|
20019
19973
|
|
|
20020
19974
|
/*
|
|
20021
19975
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -20031,85 +19985,43 @@ class $49319ee1285aa241$var$SubmenuTriggerNode extends ($6f0c29017aeec335$export
|
|
|
20031
19985
|
|
|
20032
19986
|
|
|
20033
19987
|
|
|
20034
|
-
|
|
20035
|
-
|
|
20036
|
-
|
|
20037
|
-
let
|
|
20038
|
-
|
|
20039
|
-
|
|
20040
|
-
let
|
|
20041
|
-
|
|
20042
|
-
|
|
20043
|
-
|
|
20044
|
-
|
|
20045
|
-
|
|
20046
|
-
|
|
20047
|
-
|
|
20048
|
-
|
|
20049
|
-
|
|
20050
|
-
|
|
20051
|
-
|
|
20052
|
-
|
|
20053
|
-
ref.current.blur();
|
|
20054
|
-
($f192c2f16961cbe0$export$80f3e147d781571c)(ref.current);
|
|
20055
|
-
}
|
|
20056
|
-
isRefocusing.current = false;
|
|
20057
|
-
}
|
|
20058
|
-
}, 500);
|
|
20059
|
-
return ()=>{
|
|
20060
|
-
clearTimeout(timeout);
|
|
20061
|
-
};
|
|
20062
|
-
}
|
|
20063
|
-
}, [
|
|
20064
|
-
ref
|
|
20065
|
-
]);
|
|
20066
|
-
($d7a937236970dc7f$export$14c98a7594375490)();
|
|
20067
|
-
// Warn in dev mode if the dialog has no accessible title.
|
|
20068
|
-
// This catches a common mistake where useDialog and useOverlayTriggerState
|
|
20069
|
-
// are used in the same component, causing the title element to not be
|
|
20070
|
-
// in the DOM when useSlotId queries for it.
|
|
20071
|
-
// Check the DOM element directly since aria-labelledby may be added by
|
|
20072
|
-
// wrapper components (e.g. RAC Dialog uses trigger ID as a fallback).
|
|
20073
|
-
let hasWarned = ($8WNJc$react.useRef)(false);
|
|
20074
|
-
($8WNJc$react.useEffect)(()=>{
|
|
20075
|
-
if (process.env.NODE_ENV !== 'production' && !hasWarned.current && ref.current) {
|
|
20076
|
-
let el = ref.current;
|
|
20077
|
-
let hasAriaLabel = el.hasAttribute('aria-label');
|
|
20078
|
-
let hasAriaLabelledby = el.hasAttribute('aria-labelledby');
|
|
20079
|
-
if (!hasAriaLabel && !hasAriaLabelledby) {
|
|
20080
|
-
console.warn("A dialog must have a title for accessibility. Either provide an aria-label or aria-labelledby prop, or render a heading element inside the dialog.");
|
|
20081
|
-
hasWarned.current = true;
|
|
20082
|
-
}
|
|
20083
|
-
}
|
|
19988
|
+
function $a2d69d6ee8486855$export$38eaa17faae8f579(props, state, ref) {
|
|
19989
|
+
let { shouldFocusWrap: shouldFocusWrap = true, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...otherProps } = props;
|
|
19990
|
+
if (!props['aria-label'] && !props['aria-labelledby'] && process.env.NODE_ENV !== 'production') console.warn('An aria-label or aria-labelledby prop is required for accessibility.');
|
|
19991
|
+
let domProps = ($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(props, {
|
|
19992
|
+
labelable: true
|
|
19993
|
+
});
|
|
19994
|
+
let { listProps: listProps } = ($64903b4b31b6bb2a$export$b95089534ab7c1fd)({
|
|
19995
|
+
...otherProps,
|
|
19996
|
+
ref: ref,
|
|
19997
|
+
selectionManager: state.selectionManager,
|
|
19998
|
+
collection: state.collection,
|
|
19999
|
+
disabledKeys: state.disabledKeys,
|
|
20000
|
+
shouldFocusWrap: shouldFocusWrap,
|
|
20001
|
+
linkBehavior: 'override'
|
|
20002
|
+
});
|
|
20003
|
+
($d5765cd7be93edd1$export$6f49b4016bfc8d56).set(state, {
|
|
20004
|
+
onClose: props.onClose,
|
|
20005
|
+
onAction: props.onAction,
|
|
20006
|
+
shouldUseVirtualFocus: props.shouldUseVirtualFocus
|
|
20084
20007
|
});
|
|
20085
|
-
// We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
|
|
20086
|
-
// on mount when inside an iframe, no matter which element we programmatically focus.
|
|
20087
|
-
// See https://bugs.webkit.org/show_bug.cgi?id=211934.
|
|
20088
|
-
// useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
|
|
20089
|
-
// even without aria-modal on the dialog itself.
|
|
20090
20008
|
return {
|
|
20091
|
-
|
|
20092
|
-
|
|
20093
|
-
|
|
20094
|
-
|
|
20095
|
-
role:
|
|
20096
|
-
|
|
20097
|
-
|
|
20098
|
-
|
|
20099
|
-
|
|
20100
|
-
// we don't want this to occur due to the above useEffect.
|
|
20101
|
-
onBlur: (e)=>{
|
|
20102
|
-
if (isRefocusing.current) e.stopPropagation();
|
|
20009
|
+
menuProps: ($bbaa08b3cd72f041$export$9d1611c77c2fe928)(domProps, {
|
|
20010
|
+
onKeyDown: onKeyDown,
|
|
20011
|
+
onKeyUp: onKeyUp
|
|
20012
|
+
}, {
|
|
20013
|
+
role: 'menu',
|
|
20014
|
+
...listProps,
|
|
20015
|
+
onKeyDown: (e)=>{
|
|
20016
|
+
// don't clear the menu selected keys if the user is presses escape since escape closes the menu
|
|
20017
|
+
if (e.key !== 'Escape' || props.shouldUseVirtualFocus) listProps.onKeyDown?.(e);
|
|
20103
20018
|
}
|
|
20104
|
-
}
|
|
20105
|
-
titleProps: {
|
|
20106
|
-
id: titleId
|
|
20107
|
-
}
|
|
20019
|
+
})
|
|
20108
20020
|
};
|
|
20109
20021
|
}
|
|
20110
20022
|
|
|
20111
20023
|
/*
|
|
20112
|
-
* Copyright
|
|
20024
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20113
20025
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20114
20026
|
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20115
20027
|
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
@@ -20132,98 +20044,1418 @@ function $13150e6629d46e45$export$d55e7ee900f34e93(props, ref) {
|
|
|
20132
20044
|
|
|
20133
20045
|
|
|
20134
20046
|
|
|
20135
|
-
|
|
20136
|
-
|
|
20137
|
-
|
|
20138
|
-
|
|
20139
|
-
|
|
20140
|
-
let
|
|
20141
|
-
let
|
|
20142
|
-
let
|
|
20143
|
-
|
|
20144
|
-
|
|
20145
|
-
|
|
20146
|
-
|
|
20147
|
-
|
|
20148
|
-
if (
|
|
20149
|
-
|
|
20150
|
-
|
|
20151
|
-
|
|
20152
|
-
|
|
20153
|
-
ref: buttonRef,
|
|
20154
|
-
onResize: onResize
|
|
20155
|
-
});
|
|
20156
|
-
// Label dialog by the trigger as a fallback if there is no title slot.
|
|
20157
|
-
// This is done in RAC instead of hooks because otherwise we cannot distinguish
|
|
20158
|
-
// between context and props. Normally aria-labelledby overrides the title
|
|
20159
|
-
// but when sent by context we want the title to win.
|
|
20160
|
-
triggerProps.id = ($390e54f620492c70$export$f680877a34711e37)();
|
|
20161
|
-
overlayProps['aria-labelledby'] = triggerProps.id;
|
|
20162
|
-
return /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
20163
|
-
values: [
|
|
20164
|
-
[
|
|
20165
|
-
$f2ff30fde7b014be$export$d2f961adcb0afbe,
|
|
20166
|
-
state
|
|
20167
|
-
],
|
|
20168
|
-
[
|
|
20169
|
-
($49319ee1285aa241$export$795aec4671cbae19),
|
|
20170
|
-
state
|
|
20171
|
-
],
|
|
20172
|
-
[
|
|
20173
|
-
$f2ff30fde7b014be$export$8b93a07348a7730c,
|
|
20174
|
-
overlayProps
|
|
20175
|
-
],
|
|
20176
|
-
[
|
|
20177
|
-
($542a13ca2fa5b484$export$9b9a0cd73afb7ca4),
|
|
20178
|
-
{
|
|
20179
|
-
trigger: 'DialogTrigger',
|
|
20180
|
-
triggerRef: buttonRef,
|
|
20181
|
-
'aria-labelledby': overlayProps['aria-labelledby'],
|
|
20182
|
-
style: {
|
|
20183
|
-
'--trigger-width': buttonWidth
|
|
20184
|
-
}
|
|
20185
|
-
}
|
|
20186
|
-
]
|
|
20187
|
-
]
|
|
20188
|
-
}, /*#__PURE__*/ ($8WNJc$react).createElement(($0d47b37c475c5231$export$3351871ee4b288b8), {
|
|
20189
|
-
...triggerProps,
|
|
20190
|
-
ref: buttonRef,
|
|
20191
|
-
isPressed: state.isOpen
|
|
20192
|
-
}, props.children));
|
|
20193
|
-
}
|
|
20194
|
-
const $f2ff30fde7b014be$export$3ddf2d174ce01153 = /*#__PURE__*/ ($8WNJc$react.forwardRef)(function Dialog(props, ref) {
|
|
20195
|
-
let originalAriaLabelledby = props['aria-labelledby'];
|
|
20196
|
-
[props, ref] = ($7230ffa83bc0c2cf$export$29f1550f4b0d4415)(props, ref, $f2ff30fde7b014be$export$8b93a07348a7730c);
|
|
20197
|
-
let { dialogProps: dialogProps, titleProps: titleProps } = ($13150e6629d46e45$export$d55e7ee900f34e93)({
|
|
20198
|
-
...props,
|
|
20199
|
-
// Only pass aria-labelledby from props, not context.
|
|
20200
|
-
// Context is used as a fallback below.
|
|
20201
|
-
'aria-labelledby': originalAriaLabelledby
|
|
20202
|
-
}, ref);
|
|
20203
|
-
let state = ($8WNJc$react.useContext)($f2ff30fde7b014be$export$d2f961adcb0afbe);
|
|
20204
|
-
if (!dialogProps['aria-label'] && !dialogProps['aria-labelledby']) {
|
|
20205
|
-
// If aria-labelledby exists on props, we know it came from context.
|
|
20206
|
-
// Use that as a fallback in case there is no title slot.
|
|
20207
|
-
if (props['aria-labelledby']) dialogProps['aria-labelledby'] = props['aria-labelledby'];
|
|
20208
|
-
else if (process.env.NODE_ENV !== 'production') console.warn('If a Dialog does not contain a <Heading slot="title">, it must have an aria-label or aria-labelledby attribute for accessibility.');
|
|
20209
|
-
}
|
|
20210
|
-
let renderProps = ($7230ffa83bc0c2cf$export$4d86445c2cf5e3)({
|
|
20211
|
-
defaultClassName: 'react-aria-Dialog',
|
|
20212
|
-
className: props.className,
|
|
20213
|
-
style: props.style,
|
|
20214
|
-
children: props.children,
|
|
20215
|
-
values: {
|
|
20216
|
-
close: state?.close || (()=>{})
|
|
20047
|
+
function $1a9c2c840fd36413$export$9d32628fc2aea7da(props, state, ref) {
|
|
20048
|
+
let { id: id, key: key, closeOnSelect: closeOnSelect, shouldCloseOnSelect: shouldCloseOnSelect, isVirtualized: isVirtualized, 'aria-haspopup': hasPopup, onPressStart: onPressStart, onPressUp: pressUpProp, onPress: onPress, onPressChange: pressChangeProp, onPressEnd: onPressEnd, onClick: onClickProp, onHoverStart: hoverStartProp, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onFocus: onFocus, onFocusChange: onFocusChange, onBlur: onBlur, selectionManager: selectionManager = state.selectionManager } = props;
|
|
20049
|
+
let isTrigger = !!hasPopup;
|
|
20050
|
+
let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
|
|
20051
|
+
let isDisabled = props.isDisabled ?? selectionManager.isDisabled(key);
|
|
20052
|
+
let isSelected = props.isSelected ?? selectionManager.isSelected(key);
|
|
20053
|
+
let data = ($d5765cd7be93edd1$export$6f49b4016bfc8d56).get(state);
|
|
20054
|
+
let item = state.collection.getItem(key);
|
|
20055
|
+
let onClose = props.onClose || data.onClose;
|
|
20056
|
+
let router = ($caaf0dd3060ed57c$export$9a302a45f65d0572)();
|
|
20057
|
+
let performAction = ()=>{
|
|
20058
|
+
if (isTrigger) return;
|
|
20059
|
+
if (item?.props?.onAction) item.props.onAction();
|
|
20060
|
+
else if (props.onAction) props.onAction(key);
|
|
20061
|
+
if (data.onAction) {
|
|
20062
|
+
// Must reassign to variable otherwise `this` binding gets messed up. Something to do with WeakMap.
|
|
20063
|
+
let onAction = data.onAction;
|
|
20064
|
+
onAction(key);
|
|
20217
20065
|
}
|
|
20218
|
-
}
|
|
20219
|
-
let
|
|
20220
|
-
|
|
20221
|
-
|
|
20222
|
-
|
|
20223
|
-
|
|
20224
|
-
|
|
20225
|
-
|
|
20226
|
-
|
|
20066
|
+
};
|
|
20067
|
+
let role = 'menuitem';
|
|
20068
|
+
if (!isTrigger) {
|
|
20069
|
+
if (selectionManager.selectionMode === 'single') role = 'menuitemradio';
|
|
20070
|
+
else if (selectionManager.selectionMode === 'multiple') role = 'menuitemcheckbox';
|
|
20071
|
+
}
|
|
20072
|
+
let labelId = ($390e54f620492c70$export$b4cc09c592e8fdb8)();
|
|
20073
|
+
let descriptionId = ($390e54f620492c70$export$b4cc09c592e8fdb8)();
|
|
20074
|
+
let keyboardId = ($390e54f620492c70$export$b4cc09c592e8fdb8)();
|
|
20075
|
+
let ariaProps = {
|
|
20076
|
+
id: id,
|
|
20077
|
+
'aria-disabled': isDisabled || undefined,
|
|
20078
|
+
role: role,
|
|
20079
|
+
'aria-label': props['aria-label'],
|
|
20080
|
+
'aria-labelledby': labelId,
|
|
20081
|
+
'aria-describedby': [
|
|
20082
|
+
props['aria-describedby'],
|
|
20083
|
+
descriptionId,
|
|
20084
|
+
keyboardId
|
|
20085
|
+
].filter(Boolean).join(' ') || undefined,
|
|
20086
|
+
'aria-controls': props['aria-controls'],
|
|
20087
|
+
'aria-haspopup': hasPopup,
|
|
20088
|
+
'aria-expanded': props['aria-expanded']
|
|
20089
|
+
};
|
|
20090
|
+
if (selectionManager.selectionMode !== 'none' && !isTrigger) ariaProps['aria-checked'] = isSelected;
|
|
20091
|
+
if (isVirtualized) {
|
|
20092
|
+
let index = Number(item?.index);
|
|
20093
|
+
ariaProps['aria-posinset'] = Number.isNaN(index) ? undefined : index + 1;
|
|
20094
|
+
ariaProps['aria-setsize'] = ($2efe10d3f1f9e31e$export$77d5aafae4e095b2)(state.collection);
|
|
20095
|
+
}
|
|
20096
|
+
let isPressedRef = ($8WNJc$react.useRef)(false);
|
|
20097
|
+
let onPressChange = (isPressed)=>{
|
|
20098
|
+
pressChangeProp?.(isPressed);
|
|
20099
|
+
isPressedRef.current = isPressed;
|
|
20100
|
+
};
|
|
20101
|
+
let interaction = ($8WNJc$react.useRef)(null);
|
|
20102
|
+
let onPressUp = (e)=>{
|
|
20103
|
+
if (e.pointerType !== 'keyboard') interaction.current = {
|
|
20104
|
+
pointerType: e.pointerType
|
|
20105
|
+
};
|
|
20106
|
+
// If interacting with mouse, allow the user to mouse down on the trigger button,
|
|
20107
|
+
// drag, and release over an item (matching native behavior).
|
|
20108
|
+
if (e.pointerType === 'mouse') {
|
|
20109
|
+
if (!isPressedRef.current) e.target.click();
|
|
20110
|
+
}
|
|
20111
|
+
pressUpProp?.(e);
|
|
20112
|
+
};
|
|
20113
|
+
let onClick = (e)=>{
|
|
20114
|
+
onClickProp?.(e);
|
|
20115
|
+
performAction();
|
|
20116
|
+
($caaf0dd3060ed57c$export$13aea1a3cb5e3f1f)(e, router, item.props.href, item?.props.routerOptions);
|
|
20117
|
+
let shouldClose = interaction.current?.pointerType === 'keyboard' ? interaction.current?.key === 'Enter' || selectionManager.selectionMode === 'none' || selectionManager.isLink(key) : selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key);
|
|
20118
|
+
shouldClose = shouldCloseOnSelect ?? closeOnSelect ?? shouldClose;
|
|
20119
|
+
if (onClose && !isTrigger && shouldClose) onClose();
|
|
20120
|
+
interaction.current = null;
|
|
20121
|
+
};
|
|
20122
|
+
let { itemProps: itemProps, isFocused: isFocused } = ($f6ba6936bfd098a0$export$ecf600387e221c37)({
|
|
20123
|
+
id: id,
|
|
20124
|
+
selectionManager: selectionManager,
|
|
20125
|
+
key: key,
|
|
20126
|
+
ref: ref,
|
|
20127
|
+
shouldSelectOnPressUp: true,
|
|
20128
|
+
allowsDifferentPressOrigin: true,
|
|
20129
|
+
// Disable all handling of links in useSelectable item
|
|
20130
|
+
// because we handle it ourselves. The behavior of menus
|
|
20131
|
+
// is slightly different from other collections because
|
|
20132
|
+
// actions are performed on key down rather than key up.
|
|
20133
|
+
linkBehavior: 'none',
|
|
20134
|
+
shouldUseVirtualFocus: data.shouldUseVirtualFocus
|
|
20135
|
+
});
|
|
20136
|
+
let { pressProps: pressProps, isPressed: isPressed } = ($d27d541f9569d26d$export$45712eceda6fad21)({
|
|
20137
|
+
onPressStart: onPressStart,
|
|
20138
|
+
onPress: onPress,
|
|
20139
|
+
onPressUp: onPressUp,
|
|
20140
|
+
onPressChange: onPressChange,
|
|
20141
|
+
onPressEnd: onPressEnd,
|
|
20142
|
+
isDisabled: isDisabled
|
|
20143
|
+
});
|
|
20144
|
+
let { hoverProps: hoverProps } = ($e969f22b6713ca4a$export$ae780daf29e6d456)({
|
|
20145
|
+
isDisabled: isDisabled,
|
|
20146
|
+
onHoverStart (e) {
|
|
20147
|
+
// Hovering over an already expanded sub dialog trigger should keep focus in the dialog.
|
|
20148
|
+
if (!($8f5a2122b0992be3$export$b9b3dfddab17db27)() && !(isTriggerExpanded && hasPopup)) {
|
|
20149
|
+
selectionManager.setFocused(true);
|
|
20150
|
+
selectionManager.setFocusedKey(key);
|
|
20151
|
+
}
|
|
20152
|
+
hoverStartProp?.(e);
|
|
20153
|
+
},
|
|
20154
|
+
onHoverChange: onHoverChange,
|
|
20155
|
+
onHoverEnd: onHoverEnd
|
|
20156
|
+
});
|
|
20157
|
+
let { keyboardProps: keyboardProps } = ($8296dad1a4c5e0dc$export$8f71654801c2f7cd)({
|
|
20158
|
+
onKeyDown: (e)=>{
|
|
20159
|
+
// Ignore repeating events, which may have started on the menu trigger before moving
|
|
20160
|
+
// focus to the menu item. We want to wait for a second complete key press sequence.
|
|
20161
|
+
if (e.repeat) {
|
|
20162
|
+
e.continuePropagation();
|
|
20163
|
+
return;
|
|
20164
|
+
}
|
|
20165
|
+
switch(e.key){
|
|
20166
|
+
case ' ':
|
|
20167
|
+
interaction.current = {
|
|
20168
|
+
pointerType: 'keyboard',
|
|
20169
|
+
key: ' '
|
|
20170
|
+
};
|
|
20171
|
+
($23f2114a1b82827e$export$e58f029f0fbfdb29)(e).click();
|
|
20172
|
+
// click above sets modality to "virtual", need to set interaction modality back to 'keyboard' so focusSafely calls properly move focus
|
|
20173
|
+
// to the newly opened submenu's first item.
|
|
20174
|
+
($8f5a2122b0992be3$export$8397ddfc504fdb9a)('keyboard');
|
|
20175
|
+
break;
|
|
20176
|
+
case 'Enter':
|
|
20177
|
+
interaction.current = {
|
|
20178
|
+
pointerType: 'keyboard',
|
|
20179
|
+
key: 'Enter'
|
|
20180
|
+
};
|
|
20181
|
+
// Trigger click unless this is a link. Links trigger click natively.
|
|
20182
|
+
if (($23f2114a1b82827e$export$e58f029f0fbfdb29)(e).tagName !== 'A') ($23f2114a1b82827e$export$e58f029f0fbfdb29)(e).click();
|
|
20183
|
+
// click above sets modality to "virtual", need to set interaction modality back to 'keyboard' so focusSafely calls properly move focus
|
|
20184
|
+
// to the newly opened submenu's first item.
|
|
20185
|
+
($8f5a2122b0992be3$export$8397ddfc504fdb9a)('keyboard');
|
|
20186
|
+
break;
|
|
20187
|
+
default:
|
|
20188
|
+
if (!isTrigger) e.continuePropagation();
|
|
20189
|
+
onKeyDown?.(e);
|
|
20190
|
+
break;
|
|
20191
|
+
}
|
|
20192
|
+
},
|
|
20193
|
+
onKeyUp: onKeyUp
|
|
20194
|
+
});
|
|
20195
|
+
let { focusableProps: focusableProps } = ($d1116acdf220c2da$export$4c014de7c8940b4c)({
|
|
20196
|
+
onBlur: onBlur,
|
|
20197
|
+
onFocus: onFocus,
|
|
20198
|
+
onFocusChange: onFocusChange
|
|
20199
|
+
}, ref);
|
|
20200
|
+
let domProps = ($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(item?.props);
|
|
20201
|
+
delete domProps.id;
|
|
20202
|
+
let linkProps = ($caaf0dd3060ed57c$export$7e924b3091a3bd18)(item?.props);
|
|
20203
|
+
return {
|
|
20204
|
+
menuItemProps: {
|
|
20205
|
+
...ariaProps,
|
|
20206
|
+
...($bbaa08b3cd72f041$export$9d1611c77c2fe928)(domProps, linkProps, isTrigger ? {
|
|
20207
|
+
onFocus: itemProps.onFocus,
|
|
20208
|
+
'data-collection': itemProps['data-collection'],
|
|
20209
|
+
'data-key': itemProps['data-key']
|
|
20210
|
+
} : itemProps, pressProps, hoverProps, keyboardProps, focusableProps, // Prevent DOM focus from moving on mouse down when using virtual focus or this is a submenu/subdialog trigger.
|
|
20211
|
+
data.shouldUseVirtualFocus || isTrigger ? {
|
|
20212
|
+
onMouseDown: (e)=>e.preventDefault()
|
|
20213
|
+
} : undefined, isDisabled ? undefined : {
|
|
20214
|
+
onClick: onClick
|
|
20215
|
+
}),
|
|
20216
|
+
// If a submenu is expanded, set the tabIndex to -1 so that shift tabbing goes out of the menu instead of the parent menu item.
|
|
20217
|
+
tabIndex: itemProps.tabIndex != null && isTriggerExpanded && !data.shouldUseVirtualFocus ? -1 : itemProps.tabIndex
|
|
20218
|
+
},
|
|
20219
|
+
labelProps: {
|
|
20220
|
+
id: labelId
|
|
20221
|
+
},
|
|
20222
|
+
descriptionProps: {
|
|
20223
|
+
id: descriptionId
|
|
20224
|
+
},
|
|
20225
|
+
keyboardShortcutProps: {
|
|
20226
|
+
id: keyboardId
|
|
20227
|
+
},
|
|
20228
|
+
isFocused: isFocused,
|
|
20229
|
+
isFocusVisible: isFocused && selectionManager.isFocused && ($8f5a2122b0992be3$export$b9b3dfddab17db27)() && !isTriggerExpanded,
|
|
20230
|
+
isSelected: isSelected,
|
|
20231
|
+
isPressed: isPressed,
|
|
20232
|
+
isDisabled: isDisabled
|
|
20233
|
+
};
|
|
20234
|
+
}
|
|
20235
|
+
|
|
20236
|
+
/*
|
|
20237
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20238
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20239
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20240
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20241
|
+
*
|
|
20242
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20243
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20244
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20245
|
+
* governing permissions and limitations under the License.
|
|
20246
|
+
*/
|
|
20247
|
+
function $7355d4e5c49461b6$export$73f7a44322579622(props) {
|
|
20248
|
+
let { heading: heading, 'aria-label': ariaLabel } = props;
|
|
20249
|
+
let headingId = ($390e54f620492c70$export$f680877a34711e37)();
|
|
20250
|
+
return {
|
|
20251
|
+
itemProps: {
|
|
20252
|
+
role: 'presentation'
|
|
20253
|
+
},
|
|
20254
|
+
headingProps: heading ? {
|
|
20255
|
+
// Techincally, menus cannot contain headings according to ARIA.
|
|
20256
|
+
// We hide the heading from assistive technology, using role="presentation",
|
|
20257
|
+
// and only use it as a label for the nested group.
|
|
20258
|
+
id: headingId,
|
|
20259
|
+
role: 'presentation'
|
|
20260
|
+
} : {},
|
|
20261
|
+
groupProps: {
|
|
20262
|
+
role: 'group',
|
|
20263
|
+
'aria-label': ariaLabel,
|
|
20264
|
+
'aria-labelledby': heading ? headingId : undefined
|
|
20265
|
+
}
|
|
20266
|
+
};
|
|
20267
|
+
}
|
|
20268
|
+
|
|
20269
|
+
const $eac5d44fa99b2e3b$var$ALLOWED_INVALID_MOVEMENTS = 2;
|
|
20270
|
+
const $eac5d44fa99b2e3b$var$THROTTLE_TIME = 50;
|
|
20271
|
+
const $eac5d44fa99b2e3b$var$TIMEOUT_TIME = 1000;
|
|
20272
|
+
const $eac5d44fa99b2e3b$var$ANGLE_PADDING = Math.PI / 12; // 15°
|
|
20273
|
+
function $eac5d44fa99b2e3b$export$85ec83e04c95f50a(options) {
|
|
20274
|
+
let { menuRef: menuRef, submenuRef: submenuRef, isOpen: isOpen, isDisabled: isDisabled } = options;
|
|
20275
|
+
let prevPointerPos = ($8WNJc$react.useRef)(undefined);
|
|
20276
|
+
let submenuRect = ($8WNJc$react.useRef)(undefined);
|
|
20277
|
+
let lastProcessedTime = ($8WNJc$react.useRef)(0);
|
|
20278
|
+
let timeout = ($8WNJc$react.useRef)(undefined);
|
|
20279
|
+
let autoCloseTimeout = ($8WNJc$react.useRef)(undefined);
|
|
20280
|
+
let submenuSide = ($8WNJc$react.useRef)(undefined);
|
|
20281
|
+
let movementsTowardsSubmenuCount = ($8WNJc$react.useRef)(2);
|
|
20282
|
+
let [preventPointerEvents, setPreventPointerEvents] = ($8WNJc$react.useState)(false);
|
|
20283
|
+
let updateSubmenuRect = ()=>{
|
|
20284
|
+
if (submenuRef.current) {
|
|
20285
|
+
submenuRect.current = submenuRef.current.getBoundingClientRect();
|
|
20286
|
+
submenuSide.current = undefined;
|
|
20287
|
+
}
|
|
20288
|
+
};
|
|
20289
|
+
($970072cf4b13fde3$export$683480f191c0e3ea)({
|
|
20290
|
+
ref: isOpen ? submenuRef : undefined,
|
|
20291
|
+
onResize: updateSubmenuRect
|
|
20292
|
+
});
|
|
20293
|
+
let reset = ()=>{
|
|
20294
|
+
setPreventPointerEvents(false);
|
|
20295
|
+
movementsTowardsSubmenuCount.current = $eac5d44fa99b2e3b$var$ALLOWED_INVALID_MOVEMENTS;
|
|
20296
|
+
prevPointerPos.current = undefined;
|
|
20297
|
+
};
|
|
20298
|
+
let modality = ($8f5a2122b0992be3$export$98e20ec92f614cfe)();
|
|
20299
|
+
// Prevent mouse down over safe triangle. Clicking while pointer-events: none is applied
|
|
20300
|
+
// will cause focus to move unexpectedly since it will go to an element behind the menu.
|
|
20301
|
+
let onPointerDown = ($fe16bffc7a557bf0$export$7f54fc3180508a52)((e)=>{
|
|
20302
|
+
if (preventPointerEvents) e.preventDefault();
|
|
20303
|
+
});
|
|
20304
|
+
($8WNJc$react.useEffect)(()=>{
|
|
20305
|
+
if (preventPointerEvents && menuRef.current) menuRef.current.style.pointerEvents = 'none';
|
|
20306
|
+
else menuRef.current.style.pointerEvents = '';
|
|
20307
|
+
}, [
|
|
20308
|
+
menuRef,
|
|
20309
|
+
preventPointerEvents
|
|
20310
|
+
]);
|
|
20311
|
+
($c4867b2f328c2698$export$e5c5a5f917a5871c)(()=>{
|
|
20312
|
+
let submenu = submenuRef.current;
|
|
20313
|
+
let menu = menuRef.current;
|
|
20314
|
+
if (isDisabled || !submenu || !isOpen || modality !== 'pointer' || !menu) {
|
|
20315
|
+
reset();
|
|
20316
|
+
return;
|
|
20317
|
+
}
|
|
20318
|
+
submenuRect.current = submenu.getBoundingClientRect();
|
|
20319
|
+
let onPointerMove = (e)=>{
|
|
20320
|
+
if (e.pointerType === 'touch' || e.pointerType === 'pen') return;
|
|
20321
|
+
let currentTime = Date.now();
|
|
20322
|
+
// Throttle
|
|
20323
|
+
if (currentTime - lastProcessedTime.current < $eac5d44fa99b2e3b$var$THROTTLE_TIME) return;
|
|
20324
|
+
clearTimeout(timeout.current);
|
|
20325
|
+
clearTimeout(autoCloseTimeout.current);
|
|
20326
|
+
let { clientX: mouseX, clientY: mouseY } = e;
|
|
20327
|
+
if (!prevPointerPos.current) {
|
|
20328
|
+
prevPointerPos.current = {
|
|
20329
|
+
x: mouseX,
|
|
20330
|
+
y: mouseY
|
|
20331
|
+
};
|
|
20332
|
+
return;
|
|
20333
|
+
}
|
|
20334
|
+
if (!submenuRect.current) return;
|
|
20335
|
+
if (!submenuSide.current) submenuSide.current = mouseX > submenuRect.current.right ? 'left' : 'right';
|
|
20336
|
+
// Pointer is outside of parent menu
|
|
20337
|
+
if (mouseX < menu.getBoundingClientRect().left || mouseX > menu.getBoundingClientRect().right || mouseY < menu.getBoundingClientRect().top || mouseY > menu.getBoundingClientRect().bottom) {
|
|
20338
|
+
reset();
|
|
20339
|
+
return;
|
|
20340
|
+
}
|
|
20341
|
+
/* Check if pointer is moving towards submenu.
|
|
20342
|
+
Uses the 2-argument arctangent (https://en.wikipedia.org/wiki/Atan2) to calculate:
|
|
20343
|
+
- angle between previous pointer and top of submenu
|
|
20344
|
+
- angle between previous pointer and bottom of submenu
|
|
20345
|
+
- angle between previous pointer and current pointer (delta)
|
|
20346
|
+
If the pointer delta angle value is between the top and bottom angle values, we know the pointer is moving towards the submenu.
|
|
20347
|
+
*/ let prevMouseX = prevPointerPos.current.x;
|
|
20348
|
+
let prevMouseY = prevPointerPos.current.y;
|
|
20349
|
+
let toSubmenuX = submenuSide.current === 'right' ? submenuRect.current.left - prevMouseX : prevMouseX - submenuRect.current.right;
|
|
20350
|
+
let angleTop = Math.atan2(prevMouseY - submenuRect.current.top, toSubmenuX) + $eac5d44fa99b2e3b$var$ANGLE_PADDING;
|
|
20351
|
+
let angleBottom = Math.atan2(prevMouseY - submenuRect.current.bottom, toSubmenuX) - $eac5d44fa99b2e3b$var$ANGLE_PADDING;
|
|
20352
|
+
let anglePointer = Math.atan2(prevMouseY - mouseY, submenuSide.current === 'left' ? -(mouseX - prevMouseX) : mouseX - prevMouseX);
|
|
20353
|
+
let isMovingTowardsSubmenu = anglePointer < angleTop && anglePointer > angleBottom;
|
|
20354
|
+
movementsTowardsSubmenuCount.current = isMovingTowardsSubmenu ? Math.min(movementsTowardsSubmenuCount.current + 1, $eac5d44fa99b2e3b$var$ALLOWED_INVALID_MOVEMENTS) : Math.max(movementsTowardsSubmenuCount.current - 1, 0);
|
|
20355
|
+
if (movementsTowardsSubmenuCount.current >= $eac5d44fa99b2e3b$var$ALLOWED_INVALID_MOVEMENTS) setPreventPointerEvents(true);
|
|
20356
|
+
else setPreventPointerEvents(false);
|
|
20357
|
+
lastProcessedTime.current = currentTime;
|
|
20358
|
+
prevPointerPos.current = {
|
|
20359
|
+
x: mouseX,
|
|
20360
|
+
y: mouseY
|
|
20361
|
+
};
|
|
20362
|
+
// If the pointer is moving towards the submenu, start a timeout to close if no other movements are made after 500ms.
|
|
20363
|
+
if (isMovingTowardsSubmenu) timeout.current = setTimeout(()=>{
|
|
20364
|
+
reset();
|
|
20365
|
+
autoCloseTimeout.current = setTimeout(()=>{
|
|
20366
|
+
// Fire a pointerover event to trigger the menu to close.
|
|
20367
|
+
// Wait until pointer-events:none is no longer applied
|
|
20368
|
+
let target = document.elementFromPoint(mouseX, mouseY);
|
|
20369
|
+
if (target && ($23f2114a1b82827e$export$4282f70798064fe0)(menu, target)) target.dispatchEvent(new PointerEvent('pointerover', {
|
|
20370
|
+
bubbles: true,
|
|
20371
|
+
cancelable: true
|
|
20372
|
+
}));
|
|
20373
|
+
}, 100);
|
|
20374
|
+
}, $eac5d44fa99b2e3b$var$TIMEOUT_TIME);
|
|
20375
|
+
};
|
|
20376
|
+
window.addEventListener('pointermove', onPointerMove);
|
|
20377
|
+
// Prevent pointer down over the safe triangle. See above comment.
|
|
20378
|
+
// Do not enable in tests, because JSDom doesn't do hit testing.
|
|
20379
|
+
if (process.env.NODE_ENV !== 'test') window.addEventListener('pointerdown', onPointerDown, true);
|
|
20380
|
+
return ()=>{
|
|
20381
|
+
window.removeEventListener('pointermove', onPointerMove);
|
|
20382
|
+
if (process.env.NODE_ENV !== 'test') window.removeEventListener('pointerdown', onPointerDown, true);
|
|
20383
|
+
clearTimeout(timeout.current);
|
|
20384
|
+
clearTimeout(autoCloseTimeout.current);
|
|
20385
|
+
movementsTowardsSubmenuCount.current = $eac5d44fa99b2e3b$var$ALLOWED_INVALID_MOVEMENTS;
|
|
20386
|
+
};
|
|
20387
|
+
}, [
|
|
20388
|
+
isDisabled,
|
|
20389
|
+
isOpen,
|
|
20390
|
+
menuRef,
|
|
20391
|
+
modality,
|
|
20392
|
+
setPreventPointerEvents,
|
|
20393
|
+
submenuRef
|
|
20394
|
+
]);
|
|
20395
|
+
}
|
|
20396
|
+
|
|
20397
|
+
/*
|
|
20398
|
+
* Copyright 2023 Adobe. All rights reserved.
|
|
20399
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20400
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20401
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20402
|
+
*
|
|
20403
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20404
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20405
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20406
|
+
* governing permissions and limitations under the License.
|
|
20407
|
+
*/
|
|
20408
|
+
|
|
20409
|
+
|
|
20410
|
+
|
|
20411
|
+
|
|
20412
|
+
|
|
20413
|
+
|
|
20414
|
+
|
|
20415
|
+
function $8794213c1141208f$export$7138b0d059a6e743(props, state, ref) {
|
|
20416
|
+
let { parentMenuRef: parentMenuRef, submenuRef: submenuRef, type: type = 'menu', isDisabled: isDisabled, delay: delay = 200, shouldUseVirtualFocus: shouldUseVirtualFocus } = props;
|
|
20417
|
+
let submenuTriggerId = ($390e54f620492c70$export$f680877a34711e37)();
|
|
20418
|
+
let overlayId = ($390e54f620492c70$export$f680877a34711e37)();
|
|
20419
|
+
let { direction: direction } = ($2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7)();
|
|
20420
|
+
let openTimeout = ($8WNJc$react.useRef)(undefined);
|
|
20421
|
+
let cancelOpenTimeout = ($8WNJc$react.useCallback)(()=>{
|
|
20422
|
+
if (openTimeout.current) {
|
|
20423
|
+
clearTimeout(openTimeout.current);
|
|
20424
|
+
openTimeout.current = undefined;
|
|
20425
|
+
}
|
|
20426
|
+
}, [
|
|
20427
|
+
openTimeout
|
|
20428
|
+
]);
|
|
20429
|
+
let onSubmenuOpen = ($8WNJc$react.useCallback)((focusStrategy)=>{
|
|
20430
|
+
cancelOpenTimeout();
|
|
20431
|
+
state.open(focusStrategy);
|
|
20432
|
+
}, [
|
|
20433
|
+
state,
|
|
20434
|
+
cancelOpenTimeout
|
|
20435
|
+
]);
|
|
20436
|
+
let onSubmenuClose = ($8WNJc$react.useCallback)(()=>{
|
|
20437
|
+
cancelOpenTimeout();
|
|
20438
|
+
state.close();
|
|
20439
|
+
}, [
|
|
20440
|
+
state,
|
|
20441
|
+
cancelOpenTimeout
|
|
20442
|
+
]);
|
|
20443
|
+
($c4867b2f328c2698$export$e5c5a5f917a5871c)(()=>{
|
|
20444
|
+
return ()=>{
|
|
20445
|
+
cancelOpenTimeout();
|
|
20446
|
+
};
|
|
20447
|
+
}, [
|
|
20448
|
+
cancelOpenTimeout
|
|
20449
|
+
]);
|
|
20450
|
+
let submenuKeyDown = (e)=>{
|
|
20451
|
+
// If focus is not within the menu, assume virtual focus is being used.
|
|
20452
|
+
// This means some other input element is also within the popover, so we shouldn't close the menu.
|
|
20453
|
+
if (!($23f2114a1b82827e$export$b4f377a2b6254582)(e.currentTarget)) return;
|
|
20454
|
+
switch(e.key){
|
|
20455
|
+
case 'ArrowLeft':
|
|
20456
|
+
if (direction === 'ltr' && ($23f2114a1b82827e$export$4282f70798064fe0)(e.currentTarget, ($23f2114a1b82827e$export$e58f029f0fbfdb29)(e))) {
|
|
20457
|
+
e.preventDefault();
|
|
20458
|
+
e.stopPropagation();
|
|
20459
|
+
onSubmenuClose();
|
|
20460
|
+
if (!shouldUseVirtualFocus && ref.current) ($1969ac565cfec8d0$export$de79e2c695e052f3)(ref.current);
|
|
20461
|
+
}
|
|
20462
|
+
break;
|
|
20463
|
+
case 'ArrowRight':
|
|
20464
|
+
if (direction === 'rtl' && ($23f2114a1b82827e$export$4282f70798064fe0)(e.currentTarget, ($23f2114a1b82827e$export$e58f029f0fbfdb29)(e))) {
|
|
20465
|
+
e.preventDefault();
|
|
20466
|
+
e.stopPropagation();
|
|
20467
|
+
onSubmenuClose();
|
|
20468
|
+
if (!shouldUseVirtualFocus && ref.current) ($1969ac565cfec8d0$export$de79e2c695e052f3)(ref.current);
|
|
20469
|
+
}
|
|
20470
|
+
break;
|
|
20471
|
+
case 'Escape':
|
|
20472
|
+
// TODO: can remove this when we fix collection event leaks
|
|
20473
|
+
if (($23f2114a1b82827e$export$4282f70798064fe0)(submenuRef.current, ($23f2114a1b82827e$export$e58f029f0fbfdb29)(e))) {
|
|
20474
|
+
e.stopPropagation();
|
|
20475
|
+
onSubmenuClose();
|
|
20476
|
+
if (!shouldUseVirtualFocus && ref.current) ($1969ac565cfec8d0$export$de79e2c695e052f3)(ref.current);
|
|
20477
|
+
}
|
|
20478
|
+
break;
|
|
20479
|
+
}
|
|
20480
|
+
};
|
|
20481
|
+
let submenuProps = {
|
|
20482
|
+
id: overlayId,
|
|
20483
|
+
'aria-labelledby': submenuTriggerId,
|
|
20484
|
+
submenuLevel: state.submenuLevel,
|
|
20485
|
+
...type === 'menu' && {
|
|
20486
|
+
onClose: state.closeAll,
|
|
20487
|
+
autoFocus: state.focusStrategy ?? undefined,
|
|
20488
|
+
onKeyDown: submenuKeyDown
|
|
20489
|
+
}
|
|
20490
|
+
};
|
|
20491
|
+
let submenuTriggerKeyDown = (e)=>{
|
|
20492
|
+
switch(e.key){
|
|
20493
|
+
case 'ArrowRight':
|
|
20494
|
+
if (!isDisabled) {
|
|
20495
|
+
if (direction === 'ltr') {
|
|
20496
|
+
e.preventDefault();
|
|
20497
|
+
if (!state.isOpen) onSubmenuOpen('first');
|
|
20498
|
+
if (type === 'menu' && !!submenuRef?.current && ($23f2114a1b82827e$export$cd4e5573fbe2b576)() === ref?.current) ($1969ac565cfec8d0$export$de79e2c695e052f3)(submenuRef.current);
|
|
20499
|
+
} else if (state.isOpen) onSubmenuClose();
|
|
20500
|
+
else e.continuePropagation();
|
|
20501
|
+
}
|
|
20502
|
+
break;
|
|
20503
|
+
case 'ArrowLeft':
|
|
20504
|
+
if (!isDisabled) {
|
|
20505
|
+
if (direction === 'rtl') {
|
|
20506
|
+
e.preventDefault();
|
|
20507
|
+
if (!state.isOpen) onSubmenuOpen('first');
|
|
20508
|
+
if (type === 'menu' && !!submenuRef?.current && ($23f2114a1b82827e$export$cd4e5573fbe2b576)() === ref?.current) ($1969ac565cfec8d0$export$de79e2c695e052f3)(submenuRef.current);
|
|
20509
|
+
} else if (state.isOpen) onSubmenuClose();
|
|
20510
|
+
else e.continuePropagation();
|
|
20511
|
+
}
|
|
20512
|
+
break;
|
|
20513
|
+
default:
|
|
20514
|
+
e.continuePropagation();
|
|
20515
|
+
break;
|
|
20516
|
+
}
|
|
20517
|
+
};
|
|
20518
|
+
let onPressStart = (e)=>{
|
|
20519
|
+
if (!isDisabled && (e.pointerType === 'virtual' || e.pointerType === 'keyboard')) // If opened with a screen reader or keyboard, auto focus the first submenu item.
|
|
20520
|
+
onSubmenuOpen('first');
|
|
20521
|
+
};
|
|
20522
|
+
let onPress = (e)=>{
|
|
20523
|
+
if (!isDisabled && (e.pointerType === 'touch' || e.pointerType === 'mouse')) // For touch or on a desktop device with a small screen open on press up to possible problems with
|
|
20524
|
+
// press up happening on the newly opened tray items
|
|
20525
|
+
onSubmenuOpen();
|
|
20526
|
+
};
|
|
20527
|
+
let onHoverChange = (isHovered)=>{
|
|
20528
|
+
if (!isDisabled) {
|
|
20529
|
+
if (isHovered && !state.isOpen) {
|
|
20530
|
+
if (!openTimeout.current) openTimeout.current = setTimeout(()=>{
|
|
20531
|
+
onSubmenuOpen();
|
|
20532
|
+
}, delay);
|
|
20533
|
+
} else if (!isHovered) cancelOpenTimeout();
|
|
20534
|
+
}
|
|
20535
|
+
};
|
|
20536
|
+
($600b3cf69ae46262$export$90fc3a17d93f704c)(parentMenuRef, 'focusin', (e)=>{
|
|
20537
|
+
// If we detect focus moved to a different item in the same menu that the currently open submenu trigger is in
|
|
20538
|
+
// then close the submenu. This is for a case where the user hovers a root menu item when multiple submenus are open
|
|
20539
|
+
if (state.isOpen && ($23f2114a1b82827e$export$4282f70798064fe0)(parentMenuRef.current, ($23f2114a1b82827e$export$e58f029f0fbfdb29)(e)) && ($23f2114a1b82827e$export$e58f029f0fbfdb29)(e) !== ref.current) onSubmenuClose();
|
|
20540
|
+
});
|
|
20541
|
+
let shouldCloseOnInteractOutside = (target)=>{
|
|
20542
|
+
if (target !== ref.current) return true;
|
|
20543
|
+
return false;
|
|
20544
|
+
};
|
|
20545
|
+
($eac5d44fa99b2e3b$export$85ec83e04c95f50a)({
|
|
20546
|
+
menuRef: parentMenuRef,
|
|
20547
|
+
submenuRef: submenuRef,
|
|
20548
|
+
isOpen: state.isOpen,
|
|
20549
|
+
isDisabled: isDisabled
|
|
20550
|
+
});
|
|
20551
|
+
return {
|
|
20552
|
+
submenuTriggerProps: {
|
|
20553
|
+
id: submenuTriggerId,
|
|
20554
|
+
'aria-controls': state.isOpen ? overlayId : undefined,
|
|
20555
|
+
'aria-haspopup': !isDisabled ? type : undefined,
|
|
20556
|
+
'aria-expanded': state.isOpen ? 'true' : 'false',
|
|
20557
|
+
onPressStart: onPressStart,
|
|
20558
|
+
onPress: onPress,
|
|
20559
|
+
onHoverChange: onHoverChange,
|
|
20560
|
+
onKeyDown: submenuTriggerKeyDown,
|
|
20561
|
+
isOpen: state.isOpen
|
|
20562
|
+
},
|
|
20563
|
+
submenuProps: submenuProps,
|
|
20564
|
+
popoverProps: {
|
|
20565
|
+
isNonModal: true,
|
|
20566
|
+
shouldCloseOnInteractOutside: shouldCloseOnInteractOutside
|
|
20567
|
+
}
|
|
20568
|
+
};
|
|
20569
|
+
}
|
|
20570
|
+
|
|
20571
|
+
/*
|
|
20572
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20573
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20574
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20575
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20576
|
+
*
|
|
20577
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20578
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20579
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20580
|
+
* governing permissions and limitations under the License.
|
|
20581
|
+
*/
|
|
20582
|
+
|
|
20583
|
+
function $e3403870bfb691da$export$79fefeb1c2091ac3(props) {
|
|
20584
|
+
let overlayTriggerState = ($f11fb0bcf1b2687a$export$61c6a8c84e605fb6)(props);
|
|
20585
|
+
let [focusStrategy, setFocusStrategy] = ($8WNJc$react.useState)(null);
|
|
20586
|
+
let [expandedKeysStack, setExpandedKeysStack] = ($8WNJc$react.useState)([]);
|
|
20587
|
+
let closeAll = ()=>{
|
|
20588
|
+
setExpandedKeysStack([]);
|
|
20589
|
+
overlayTriggerState.close();
|
|
20590
|
+
};
|
|
20591
|
+
let openSubmenu = (triggerKey, level)=>{
|
|
20592
|
+
setExpandedKeysStack((oldStack)=>{
|
|
20593
|
+
if (level > oldStack.length) return oldStack;
|
|
20594
|
+
return [
|
|
20595
|
+
...oldStack.slice(0, level),
|
|
20596
|
+
triggerKey
|
|
20597
|
+
];
|
|
20598
|
+
});
|
|
20599
|
+
};
|
|
20600
|
+
let closeSubmenu = (triggerKey, level)=>{
|
|
20601
|
+
setExpandedKeysStack((oldStack)=>{
|
|
20602
|
+
let key = oldStack[level];
|
|
20603
|
+
if (key === triggerKey) return oldStack.slice(0, level);
|
|
20604
|
+
else return oldStack;
|
|
20605
|
+
});
|
|
20606
|
+
};
|
|
20607
|
+
return {
|
|
20608
|
+
focusStrategy: focusStrategy,
|
|
20609
|
+
...overlayTriggerState,
|
|
20610
|
+
open (focusStrategy = null) {
|
|
20611
|
+
setFocusStrategy(focusStrategy);
|
|
20612
|
+
overlayTriggerState.open();
|
|
20613
|
+
},
|
|
20614
|
+
toggle (focusStrategy = null) {
|
|
20615
|
+
setFocusStrategy(focusStrategy);
|
|
20616
|
+
overlayTriggerState.toggle();
|
|
20617
|
+
},
|
|
20618
|
+
close () {
|
|
20619
|
+
closeAll();
|
|
20620
|
+
},
|
|
20621
|
+
expandedKeysStack: expandedKeysStack,
|
|
20622
|
+
openSubmenu: openSubmenu,
|
|
20623
|
+
closeSubmenu: closeSubmenu
|
|
20624
|
+
};
|
|
20625
|
+
}
|
|
20626
|
+
|
|
20627
|
+
/*
|
|
20628
|
+
* Copyright 2023 Adobe. All rights reserved.
|
|
20629
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20630
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20631
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20632
|
+
*
|
|
20633
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20634
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20635
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20636
|
+
* governing permissions and limitations under the License.
|
|
20637
|
+
*/
|
|
20638
|
+
function $5b3242e27644e8f1$export$cfc51cf86138bf98(props, state) {
|
|
20639
|
+
let { triggerKey: triggerKey } = props;
|
|
20640
|
+
let { expandedKeysStack: expandedKeysStack, openSubmenu: openSubmenu, closeSubmenu: closeSubmenu, close: closeAll } = state;
|
|
20641
|
+
let [submenuLevel] = ($8WNJc$react.useState)(expandedKeysStack?.length);
|
|
20642
|
+
let isOpen = ($8WNJc$react.useMemo)(()=>expandedKeysStack[submenuLevel] === triggerKey, [
|
|
20643
|
+
expandedKeysStack,
|
|
20644
|
+
triggerKey,
|
|
20645
|
+
submenuLevel
|
|
20646
|
+
]);
|
|
20647
|
+
let [focusStrategy, setFocusStrategy] = ($8WNJc$react.useState)(null);
|
|
20648
|
+
let open = ($8WNJc$react.useCallback)((focusStrategy)=>{
|
|
20649
|
+
setFocusStrategy(focusStrategy ?? null);
|
|
20650
|
+
openSubmenu(triggerKey, submenuLevel);
|
|
20651
|
+
}, [
|
|
20652
|
+
openSubmenu,
|
|
20653
|
+
submenuLevel,
|
|
20654
|
+
triggerKey
|
|
20655
|
+
]);
|
|
20656
|
+
let close = ($8WNJc$react.useCallback)(()=>{
|
|
20657
|
+
setFocusStrategy(null);
|
|
20658
|
+
closeSubmenu(triggerKey, submenuLevel);
|
|
20659
|
+
}, [
|
|
20660
|
+
closeSubmenu,
|
|
20661
|
+
submenuLevel,
|
|
20662
|
+
triggerKey
|
|
20663
|
+
]);
|
|
20664
|
+
let toggle = ($8WNJc$react.useCallback)((focusStrategy)=>{
|
|
20665
|
+
setFocusStrategy(focusStrategy ?? null);
|
|
20666
|
+
if (isOpen) close();
|
|
20667
|
+
else open(focusStrategy);
|
|
20668
|
+
}, [
|
|
20669
|
+
close,
|
|
20670
|
+
open,
|
|
20671
|
+
isOpen
|
|
20672
|
+
]);
|
|
20673
|
+
return ($8WNJc$react.useMemo)(()=>({
|
|
20674
|
+
focusStrategy: focusStrategy,
|
|
20675
|
+
isOpen: isOpen,
|
|
20676
|
+
open: open,
|
|
20677
|
+
close: close,
|
|
20678
|
+
closeAll: closeAll,
|
|
20679
|
+
submenuLevel: submenuLevel,
|
|
20680
|
+
// TODO: Placeholders that aren't used but give us parity with OverlayTriggerState so we can use this in Popover. Refactor if we update Popover via
|
|
20681
|
+
// https://github.com/adobe/react-spectrum/pull/4976#discussion_r1336472863
|
|
20682
|
+
setOpen: ()=>{},
|
|
20683
|
+
toggle: toggle
|
|
20684
|
+
}), [
|
|
20685
|
+
isOpen,
|
|
20686
|
+
open,
|
|
20687
|
+
close,
|
|
20688
|
+
closeAll,
|
|
20689
|
+
focusStrategy,
|
|
20690
|
+
toggle,
|
|
20691
|
+
submenuLevel
|
|
20692
|
+
]);
|
|
20693
|
+
}
|
|
20694
|
+
|
|
20695
|
+
/*
|
|
20696
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20697
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20698
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20699
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20700
|
+
*
|
|
20701
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20702
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20703
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20704
|
+
* governing permissions and limitations under the License.
|
|
20705
|
+
*/ class $df1fcc684d3b021a$export$863faf230ee2118a {
|
|
20706
|
+
constructor(nodes, { expandedKeys: expandedKeys } = {}){
|
|
20707
|
+
this.keyMap = new Map();
|
|
20708
|
+
this.firstKey = null;
|
|
20709
|
+
this.lastKey = null;
|
|
20710
|
+
this.iterable = nodes;
|
|
20711
|
+
expandedKeys = expandedKeys || new Set();
|
|
20712
|
+
let visit = (node)=>{
|
|
20713
|
+
this.keyMap.set(node.key, node);
|
|
20714
|
+
if (node.childNodes && (node.type === 'section' || expandedKeys.has(node.key))) for (let child of node.childNodes)visit(child);
|
|
20715
|
+
};
|
|
20716
|
+
for (let node of nodes)visit(node);
|
|
20717
|
+
let last = null;
|
|
20718
|
+
let index = 0;
|
|
20719
|
+
for (let [key, node] of this.keyMap){
|
|
20720
|
+
if (last) {
|
|
20721
|
+
last.nextKey = key;
|
|
20722
|
+
node.prevKey = last.key;
|
|
20723
|
+
} else {
|
|
20724
|
+
this.firstKey = key;
|
|
20725
|
+
node.prevKey = undefined;
|
|
20726
|
+
}
|
|
20727
|
+
if (node.type === 'item') node.index = index++;
|
|
20728
|
+
last = node;
|
|
20729
|
+
// Set nextKey as undefined since this might be the last node
|
|
20730
|
+
// If it isn't the last node, last.nextKey will properly set at start of new loop
|
|
20731
|
+
last.nextKey = undefined;
|
|
20732
|
+
}
|
|
20733
|
+
this.lastKey = last?.key ?? null;
|
|
20734
|
+
}
|
|
20735
|
+
*[Symbol.iterator]() {
|
|
20736
|
+
yield* this.iterable;
|
|
20737
|
+
}
|
|
20738
|
+
get size() {
|
|
20739
|
+
return this.keyMap.size;
|
|
20740
|
+
}
|
|
20741
|
+
getKeys() {
|
|
20742
|
+
return this.keyMap.keys();
|
|
20743
|
+
}
|
|
20744
|
+
getKeyBefore(key) {
|
|
20745
|
+
let node = this.keyMap.get(key);
|
|
20746
|
+
return node ? node.prevKey ?? null : null;
|
|
20747
|
+
}
|
|
20748
|
+
getKeyAfter(key) {
|
|
20749
|
+
let node = this.keyMap.get(key);
|
|
20750
|
+
return node ? node.nextKey ?? null : null;
|
|
20751
|
+
}
|
|
20752
|
+
getFirstKey() {
|
|
20753
|
+
return this.firstKey;
|
|
20754
|
+
}
|
|
20755
|
+
getLastKey() {
|
|
20756
|
+
return this.lastKey;
|
|
20757
|
+
}
|
|
20758
|
+
getItem(key) {
|
|
20759
|
+
return this.keyMap.get(key) ?? null;
|
|
20760
|
+
}
|
|
20761
|
+
at(idx) {
|
|
20762
|
+
const keys = [
|
|
20763
|
+
...this.getKeys()
|
|
20764
|
+
];
|
|
20765
|
+
return this.getItem(keys[idx]);
|
|
20766
|
+
}
|
|
20767
|
+
}
|
|
20768
|
+
|
|
20769
|
+
/*
|
|
20770
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20771
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20772
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20773
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20774
|
+
*
|
|
20775
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20776
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20777
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20778
|
+
* governing permissions and limitations under the License.
|
|
20779
|
+
*/
|
|
20780
|
+
|
|
20781
|
+
|
|
20782
|
+
|
|
20783
|
+
|
|
20784
|
+
|
|
20785
|
+
function $6b915bde6cd300dd$export$728d6ba534403756(props) {
|
|
20786
|
+
let { onExpandedChange: onExpandedChange } = props;
|
|
20787
|
+
let [expandedKeys, setExpandedKeys] = ($3e6197669829fe11$export$40bfa8c7b0832715)(props.expandedKeys ? new Set(props.expandedKeys) : undefined, props.defaultExpandedKeys ? new Set(props.defaultExpandedKeys) : new Set(), onExpandedChange);
|
|
20788
|
+
let selectionState = ($60f19cefd567a3e4$export$253fe78d46329472)(props);
|
|
20789
|
+
let disabledKeys = ($8WNJc$react.useMemo)(()=>props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [
|
|
20790
|
+
props.disabledKeys
|
|
20791
|
+
]);
|
|
20792
|
+
let tree = ($d03379b88399b8c5$export$6cd28814d92fa9c9)(props, ($8WNJc$react.useCallback)((nodes)=>new ($df1fcc684d3b021a$export$863faf230ee2118a)(nodes, {
|
|
20793
|
+
expandedKeys: expandedKeys
|
|
20794
|
+
}), [
|
|
20795
|
+
expandedKeys
|
|
20796
|
+
]), null);
|
|
20797
|
+
// Reset focused key if that item is deleted from the collection.
|
|
20798
|
+
($8WNJc$react.useEffect)(()=>{
|
|
20799
|
+
if (selectionState.focusedKey != null && !tree.getItem(selectionState.focusedKey)) selectionState.setFocusedKey(null);
|
|
20800
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
20801
|
+
}, [
|
|
20802
|
+
tree,
|
|
20803
|
+
selectionState.focusedKey
|
|
20804
|
+
]);
|
|
20805
|
+
let onToggle = (key)=>{
|
|
20806
|
+
setExpandedKeys($6b915bde6cd300dd$var$toggleKey(expandedKeys, key));
|
|
20807
|
+
};
|
|
20808
|
+
return {
|
|
20809
|
+
collection: tree,
|
|
20810
|
+
expandedKeys: expandedKeys,
|
|
20811
|
+
disabledKeys: disabledKeys,
|
|
20812
|
+
toggleKey: onToggle,
|
|
20813
|
+
setExpandedKeys: setExpandedKeys,
|
|
20814
|
+
selectionManager: new ($4a07ac835f260f78$export$6c8a5aaad13c9852)(tree, selectionState)
|
|
20815
|
+
};
|
|
20816
|
+
}
|
|
20817
|
+
function $6b915bde6cd300dd$var$toggleKey(set, key) {
|
|
20818
|
+
let res = new Set(set);
|
|
20819
|
+
if (res.has(key)) res.delete(key);
|
|
20820
|
+
else res.add(key);
|
|
20821
|
+
return res;
|
|
20822
|
+
}
|
|
20823
|
+
|
|
20824
|
+
/*
|
|
20825
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
20826
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20827
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20828
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20829
|
+
*
|
|
20830
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20831
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20832
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20833
|
+
* governing permissions and limitations under the License.
|
|
20834
|
+
*/
|
|
20835
|
+
|
|
20836
|
+
|
|
20837
|
+
|
|
20838
|
+
|
|
20839
|
+
|
|
20840
|
+
|
|
20841
|
+
|
|
20842
|
+
|
|
20843
|
+
|
|
20844
|
+
|
|
20845
|
+
|
|
20846
|
+
|
|
20847
|
+
|
|
20848
|
+
|
|
20849
|
+
|
|
20850
|
+
|
|
20851
|
+
|
|
20852
|
+
|
|
20853
|
+
|
|
20854
|
+
|
|
20855
|
+
|
|
20856
|
+
|
|
20857
|
+
|
|
20858
|
+
|
|
20859
|
+
|
|
20860
|
+
|
|
20861
|
+
const $49319ee1285aa241$export$c7e742effb1c51e2 = /*#__PURE__*/ ($8WNJc$react.createContext)(null);
|
|
20862
|
+
const $49319ee1285aa241$export$24aad8519b95b41b = /*#__PURE__*/ ($8WNJc$react.createContext)(null);
|
|
20863
|
+
const $49319ee1285aa241$export$795aec4671cbae19 = /*#__PURE__*/ ($8WNJc$react.createContext)(null);
|
|
20864
|
+
const $49319ee1285aa241$var$SelectionManagerContext = /*#__PURE__*/ ($8WNJc$react.createContext)(null);
|
|
20865
|
+
function $49319ee1285aa241$export$27d2ad3c5815583e(props) {
|
|
20866
|
+
let state = ($e3403870bfb691da$export$79fefeb1c2091ac3)(props);
|
|
20867
|
+
let ref = ($8WNJc$react.useRef)(null);
|
|
20868
|
+
let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = ($f19b83c1486f45cc$export$dc9c12ed27dd1b49)({
|
|
20869
|
+
...props,
|
|
20870
|
+
type: 'menu'
|
|
20871
|
+
}, state, ref);
|
|
20872
|
+
// Allows menu width to match button
|
|
20873
|
+
let [buttonWidth, setButtonWidth] = ($8WNJc$react.useState)(null);
|
|
20874
|
+
let onResize = ($8WNJc$react.useCallback)(()=>{
|
|
20875
|
+
if (ref.current) setButtonWidth(ref.current.offsetWidth + 'px');
|
|
20876
|
+
}, [
|
|
20877
|
+
ref
|
|
20878
|
+
]);
|
|
20879
|
+
($970072cf4b13fde3$export$683480f191c0e3ea)({
|
|
20880
|
+
ref: ref,
|
|
20881
|
+
onResize: onResize
|
|
20882
|
+
});
|
|
20883
|
+
let scrollRef = ($8WNJc$react.useRef)(null);
|
|
20884
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
20885
|
+
values: [
|
|
20886
|
+
[
|
|
20887
|
+
$49319ee1285aa241$export$c7e742effb1c51e2,
|
|
20888
|
+
{
|
|
20889
|
+
...menuProps,
|
|
20890
|
+
ref: scrollRef
|
|
20891
|
+
}
|
|
20892
|
+
],
|
|
20893
|
+
[
|
|
20894
|
+
($f2ff30fde7b014be$export$d2f961adcb0afbe),
|
|
20895
|
+
state
|
|
20896
|
+
],
|
|
20897
|
+
[
|
|
20898
|
+
$49319ee1285aa241$export$795aec4671cbae19,
|
|
20899
|
+
state
|
|
20900
|
+
],
|
|
20901
|
+
[
|
|
20902
|
+
($542a13ca2fa5b484$export$9b9a0cd73afb7ca4),
|
|
20903
|
+
{
|
|
20904
|
+
trigger: 'MenuTrigger',
|
|
20905
|
+
triggerRef: ref,
|
|
20906
|
+
scrollRef: scrollRef,
|
|
20907
|
+
placement: 'bottom start',
|
|
20908
|
+
style: {
|
|
20909
|
+
'--trigger-width': buttonWidth
|
|
20910
|
+
},
|
|
20911
|
+
'aria-labelledby': menuProps['aria-labelledby']
|
|
20912
|
+
}
|
|
20913
|
+
]
|
|
20914
|
+
]
|
|
20915
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(($0d47b37c475c5231$export$3351871ee4b288b8), {
|
|
20916
|
+
...menuTriggerProps,
|
|
20917
|
+
ref: ref,
|
|
20918
|
+
isPressed: state.isOpen
|
|
20919
|
+
}, props.children));
|
|
20920
|
+
}
|
|
20921
|
+
const $49319ee1285aa241$var$SubmenuTriggerContext = /*#__PURE__*/ ($8WNJc$react.createContext)(null);
|
|
20922
|
+
class $49319ee1285aa241$var$SubmenuTriggerNode extends ($6f0c29017aeec335$export$d68d59712b04d9d1) {
|
|
20923
|
+
static{
|
|
20924
|
+
this.type = 'submenutrigger';
|
|
20925
|
+
}
|
|
20926
|
+
filter(collection, newCollection, filterFn) {
|
|
20927
|
+
let triggerNode = collection.getItem(this.firstChildKey);
|
|
20928
|
+
if (triggerNode && filterFn(triggerNode.textValue, this)) {
|
|
20929
|
+
let clone = this.clone();
|
|
20930
|
+
newCollection.addDescendants(clone, collection);
|
|
20931
|
+
return clone;
|
|
20932
|
+
}
|
|
20933
|
+
return null;
|
|
20934
|
+
}
|
|
20935
|
+
}
|
|
20936
|
+
const $49319ee1285aa241$export$ecabc99eeffab7ca = /*#__PURE__*/ ($42ceafc619f9c3ba$export$e953bb1cd0f19726)($49319ee1285aa241$var$SubmenuTriggerNode, (props, ref, item)=>{
|
|
20937
|
+
let { CollectionBranch: CollectionBranch } = ($8WNJc$react.useContext)(($263ab7fc0f95ccdb$export$4feb769f8ddf26c5));
|
|
20938
|
+
let state = ($8WNJc$react.useContext)($49319ee1285aa241$export$24aad8519b95b41b);
|
|
20939
|
+
let rootMenuTriggerState = ($8WNJc$react.useContext)($49319ee1285aa241$export$795aec4671cbae19);
|
|
20940
|
+
let submenuTriggerState = ($5b3242e27644e8f1$export$cfc51cf86138bf98)({
|
|
20941
|
+
triggerKey: item.key
|
|
20942
|
+
}, rootMenuTriggerState);
|
|
20943
|
+
let submenuRef = ($8WNJc$react.useRef)(null);
|
|
20944
|
+
let itemRef = ($03e8ab2d84d7657a$export$4338b53315abf666)(ref);
|
|
20945
|
+
let { parentMenuRef: parentMenuRef, shouldUseVirtualFocus: shouldUseVirtualFocus } = ($8WNJc$react.useContext)($49319ee1285aa241$var$SubmenuTriggerContext);
|
|
20946
|
+
let { submenuTriggerProps: submenuTriggerProps, submenuProps: submenuProps, popoverProps: popoverProps } = ($8794213c1141208f$export$7138b0d059a6e743)({
|
|
20947
|
+
parentMenuRef: parentMenuRef,
|
|
20948
|
+
submenuRef: submenuRef,
|
|
20949
|
+
delay: props.delay,
|
|
20950
|
+
shouldUseVirtualFocus: shouldUseVirtualFocus
|
|
20951
|
+
}, submenuTriggerState, itemRef);
|
|
20952
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
20953
|
+
values: [
|
|
20954
|
+
[
|
|
20955
|
+
$49319ee1285aa241$var$MenuItemContext,
|
|
20956
|
+
{
|
|
20957
|
+
...submenuTriggerProps,
|
|
20958
|
+
onAction: undefined,
|
|
20959
|
+
ref: itemRef
|
|
20960
|
+
}
|
|
20961
|
+
],
|
|
20962
|
+
[
|
|
20963
|
+
$49319ee1285aa241$export$c7e742effb1c51e2,
|
|
20964
|
+
{
|
|
20965
|
+
ref: submenuRef,
|
|
20966
|
+
...submenuProps
|
|
20967
|
+
}
|
|
20968
|
+
],
|
|
20969
|
+
[
|
|
20970
|
+
($f2ff30fde7b014be$export$d2f961adcb0afbe),
|
|
20971
|
+
submenuTriggerState
|
|
20972
|
+
],
|
|
20973
|
+
[
|
|
20974
|
+
($542a13ca2fa5b484$export$9b9a0cd73afb7ca4),
|
|
20975
|
+
{
|
|
20976
|
+
trigger: 'SubmenuTrigger',
|
|
20977
|
+
triggerRef: itemRef,
|
|
20978
|
+
placement: 'end top',
|
|
20979
|
+
'aria-labelledby': submenuProps['aria-labelledby'],
|
|
20980
|
+
...popoverProps
|
|
20981
|
+
}
|
|
20982
|
+
]
|
|
20983
|
+
]
|
|
20984
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(CollectionBranch, {
|
|
20985
|
+
collection: state.collection,
|
|
20986
|
+
parent: item
|
|
20987
|
+
}), props.children[1]);
|
|
20988
|
+
}, (props)=>props.children[0]);
|
|
20989
|
+
const $49319ee1285aa241$export$d9b273488cd8ce6f = /*#__PURE__*/ ($8WNJc$react.forwardRef)(function Menu(props, ref) {
|
|
20990
|
+
[props, ref] = ($7230ffa83bc0c2cf$export$29f1550f4b0d4415)(props, ref, $49319ee1285aa241$export$c7e742effb1c51e2);
|
|
20991
|
+
// Delay rendering the actual menu until we have the collection so that auto focus works properly.
|
|
20992
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($42ceafc619f9c3ba$export$bf788dd355e3a401), {
|
|
20993
|
+
content: /*#__PURE__*/ ($8WNJc$react).createElement(($42ceafc619f9c3ba$export$fb8073518f34e6ec), props)
|
|
20994
|
+
}, (collection)=>/*#__PURE__*/ ($8WNJc$react).createElement($49319ee1285aa241$var$MenuInner, {
|
|
20995
|
+
props: props,
|
|
20996
|
+
collection: collection,
|
|
20997
|
+
menuRef: ref
|
|
20998
|
+
}));
|
|
20999
|
+
});
|
|
21000
|
+
function $49319ee1285aa241$var$MenuInner({ props: props, collection: collection, menuRef: ref }) {
|
|
21001
|
+
[props, ref] = ($7230ffa83bc0c2cf$export$29f1550f4b0d4415)(props, ref, ($4b38b5b75ecc6208$export$b0d3ecf7112093a7));
|
|
21002
|
+
let { filter: filter, ...autocompleteMenuProps } = props;
|
|
21003
|
+
let filteredCollection = ($8WNJc$react.useMemo)(()=>filter ? collection.filter(filter) : collection, [
|
|
21004
|
+
collection,
|
|
21005
|
+
filter
|
|
21006
|
+
]);
|
|
21007
|
+
let state = ($6b915bde6cd300dd$export$728d6ba534403756)({
|
|
21008
|
+
...props,
|
|
21009
|
+
collection: filteredCollection,
|
|
21010
|
+
children: undefined
|
|
21011
|
+
});
|
|
21012
|
+
let triggerState = ($8WNJc$react.useContext)($49319ee1285aa241$export$795aec4671cbae19);
|
|
21013
|
+
let { isVirtualized: isVirtualized, CollectionRoot: CollectionRoot } = ($8WNJc$react.useContext)(($263ab7fc0f95ccdb$export$4feb769f8ddf26c5));
|
|
21014
|
+
let { menuProps: menuProps } = ($a2d69d6ee8486855$export$38eaa17faae8f579)({
|
|
21015
|
+
...props,
|
|
21016
|
+
isVirtualized: isVirtualized,
|
|
21017
|
+
onClose: props.onClose || triggerState?.close
|
|
21018
|
+
}, state, ref);
|
|
21019
|
+
let renderProps = ($7230ffa83bc0c2cf$export$4d86445c2cf5e3)({
|
|
21020
|
+
...props,
|
|
21021
|
+
children: undefined,
|
|
21022
|
+
defaultClassName: 'react-aria-Menu',
|
|
21023
|
+
values: {
|
|
21024
|
+
isEmpty: state.collection.size === 0
|
|
21025
|
+
}
|
|
21026
|
+
});
|
|
21027
|
+
let emptyState = null;
|
|
21028
|
+
if (state.collection.size === 0 && props.renderEmptyState) emptyState = /*#__PURE__*/ ($8WNJc$react).createElement("div", {
|
|
21029
|
+
role: "menuitem",
|
|
21030
|
+
style: {
|
|
21031
|
+
display: 'contents'
|
|
21032
|
+
}
|
|
21033
|
+
}, props.renderEmptyState());
|
|
21034
|
+
let DOMProps = ($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(props, {
|
|
21035
|
+
global: true
|
|
21036
|
+
});
|
|
21037
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($535772f9d2c1f38d$export$20e40289641fbbb6), null, /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$df3a06d6289f983e).div, {
|
|
21038
|
+
...($bbaa08b3cd72f041$export$9d1611c77c2fe928)(DOMProps, renderProps, menuProps),
|
|
21039
|
+
ref: ref,
|
|
21040
|
+
slot: props.slot || undefined,
|
|
21041
|
+
"data-empty": state.collection.size === 0 || undefined,
|
|
21042
|
+
onScroll: props.onScroll
|
|
21043
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
21044
|
+
values: [
|
|
21045
|
+
[
|
|
21046
|
+
$49319ee1285aa241$export$24aad8519b95b41b,
|
|
21047
|
+
state
|
|
21048
|
+
],
|
|
21049
|
+
[
|
|
21050
|
+
($e28ab3efe3e87743$export$6615d83f6de245ce),
|
|
21051
|
+
{
|
|
21052
|
+
elementType: 'div'
|
|
21053
|
+
}
|
|
21054
|
+
],
|
|
21055
|
+
[
|
|
21056
|
+
($263ab7fc0f95ccdb$export$d40e14dec8b060a8),
|
|
21057
|
+
{
|
|
21058
|
+
name: 'MenuSection',
|
|
21059
|
+
render: $49319ee1285aa241$var$MenuSectionInner
|
|
21060
|
+
}
|
|
21061
|
+
],
|
|
21062
|
+
[
|
|
21063
|
+
$49319ee1285aa241$var$SubmenuTriggerContext,
|
|
21064
|
+
{
|
|
21065
|
+
parentMenuRef: ref,
|
|
21066
|
+
shouldUseVirtualFocus: autocompleteMenuProps?.shouldUseVirtualFocus
|
|
21067
|
+
}
|
|
21068
|
+
],
|
|
21069
|
+
[
|
|
21070
|
+
$49319ee1285aa241$var$MenuItemContext,
|
|
21071
|
+
{
|
|
21072
|
+
shouldCloseOnSelect: props.shouldCloseOnSelect
|
|
21073
|
+
}
|
|
21074
|
+
],
|
|
21075
|
+
[
|
|
21076
|
+
($4b38b5b75ecc6208$export$b0d3ecf7112093a7),
|
|
21077
|
+
null
|
|
21078
|
+
],
|
|
21079
|
+
[
|
|
21080
|
+
($4b38b5b75ecc6208$export$698f465ec27e93df),
|
|
21081
|
+
null
|
|
21082
|
+
],
|
|
21083
|
+
[
|
|
21084
|
+
$49319ee1285aa241$var$SelectionManagerContext,
|
|
21085
|
+
state.selectionManager
|
|
21086
|
+
],
|
|
21087
|
+
/* Ensure root MenuTriggerState is defined, in case Menu is rendered outside a MenuTrigger. */ /* We assume the context can never change between defined and undefined. */ /* eslint-disable-next-line react-hooks/rules-of-hooks */ [
|
|
21088
|
+
$49319ee1285aa241$export$795aec4671cbae19,
|
|
21089
|
+
triggerState ?? ($e3403870bfb691da$export$79fefeb1c2091ac3)({})
|
|
21090
|
+
]
|
|
21091
|
+
]
|
|
21092
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(($792f28e438b9ad5f$export$758399f318e6385a), null, /*#__PURE__*/ ($8WNJc$react).createElement(CollectionRoot, {
|
|
21093
|
+
collection: state.collection,
|
|
21094
|
+
persistedKeys: ($263ab7fc0f95ccdb$export$90e00781bc59d8f9)(state.selectionManager.focusedKey),
|
|
21095
|
+
scrollRef: ref
|
|
21096
|
+
}))), emptyState));
|
|
21097
|
+
}
|
|
21098
|
+
// A subclass of SelectionManager that forwards focus-related properties to the parent,
|
|
21099
|
+
// but has its own local selection state.
|
|
21100
|
+
class $49319ee1285aa241$var$GroupSelectionManager extends ($4a07ac835f260f78$export$6c8a5aaad13c9852) {
|
|
21101
|
+
constructor(parent, state){
|
|
21102
|
+
super(parent.collection, state);
|
|
21103
|
+
this.parent = parent;
|
|
21104
|
+
}
|
|
21105
|
+
get focusedKey() {
|
|
21106
|
+
return this.parent.focusedKey;
|
|
21107
|
+
}
|
|
21108
|
+
get isFocused() {
|
|
21109
|
+
return this.parent.isFocused;
|
|
21110
|
+
}
|
|
21111
|
+
setFocusedKey(key, childFocusStrategy) {
|
|
21112
|
+
return this.parent.setFocusedKey(key, childFocusStrategy);
|
|
21113
|
+
}
|
|
21114
|
+
setFocused(isFocused) {
|
|
21115
|
+
this.parent.setFocused(isFocused);
|
|
21116
|
+
}
|
|
21117
|
+
get childFocusStrategy() {
|
|
21118
|
+
return this.parent.childFocusStrategy;
|
|
21119
|
+
}
|
|
21120
|
+
}
|
|
21121
|
+
function $49319ee1285aa241$var$MenuSectionInner(props, ref, section, className = 'react-aria-MenuSection') {
|
|
21122
|
+
let state = ($8WNJc$react.useContext)($49319ee1285aa241$export$24aad8519b95b41b);
|
|
21123
|
+
let { CollectionBranch: CollectionBranch } = ($8WNJc$react.useContext)(($263ab7fc0f95ccdb$export$4feb769f8ddf26c5));
|
|
21124
|
+
let [headingRef, heading] = ($7230ffa83bc0c2cf$export$9d4c57ee4c6ffdd8)();
|
|
21125
|
+
let { headingProps: headingProps, groupProps: groupProps } = ($7355d4e5c49461b6$export$73f7a44322579622)({
|
|
21126
|
+
heading: heading,
|
|
21127
|
+
'aria-label': section.props['aria-label'] ?? undefined
|
|
21128
|
+
});
|
|
21129
|
+
let renderProps = ($7230ffa83bc0c2cf$export$4d86445c2cf5e3)({
|
|
21130
|
+
...props,
|
|
21131
|
+
id: undefined,
|
|
21132
|
+
children: undefined,
|
|
21133
|
+
defaultClassName: className,
|
|
21134
|
+
className: section.props?.className,
|
|
21135
|
+
style: section.props?.style,
|
|
21136
|
+
values: undefined
|
|
21137
|
+
});
|
|
21138
|
+
let parent = ($8WNJc$react.useContext)($49319ee1285aa241$var$SelectionManagerContext);
|
|
21139
|
+
let selectionState = ($60f19cefd567a3e4$export$253fe78d46329472)(props);
|
|
21140
|
+
let manager = props.selectionMode != null ? new $49319ee1285aa241$var$GroupSelectionManager(parent, selectionState) : parent;
|
|
21141
|
+
let closeOnSelect = ($7230ffa83bc0c2cf$export$fabf2dc03a41866e)($49319ee1285aa241$var$MenuItemContext)?.shouldCloseOnSelect;
|
|
21142
|
+
let DOMProps = ($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(props, {
|
|
21143
|
+
global: true
|
|
21144
|
+
});
|
|
21145
|
+
delete DOMProps.id;
|
|
21146
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$df3a06d6289f983e).section, {
|
|
21147
|
+
...($bbaa08b3cd72f041$export$9d1611c77c2fe928)(DOMProps, renderProps, groupProps),
|
|
21148
|
+
ref: ref
|
|
21149
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
21150
|
+
values: [
|
|
21151
|
+
[
|
|
21152
|
+
($53e61d82d8b8611d$export$e0e4026c12a8bdbb),
|
|
21153
|
+
{
|
|
21154
|
+
...headingProps,
|
|
21155
|
+
ref: headingRef
|
|
21156
|
+
}
|
|
21157
|
+
],
|
|
21158
|
+
[
|
|
21159
|
+
$49319ee1285aa241$var$SelectionManagerContext,
|
|
21160
|
+
manager
|
|
21161
|
+
],
|
|
21162
|
+
[
|
|
21163
|
+
$49319ee1285aa241$var$MenuItemContext,
|
|
21164
|
+
{
|
|
21165
|
+
shouldCloseOnSelect: props.shouldCloseOnSelect ?? closeOnSelect
|
|
21166
|
+
}
|
|
21167
|
+
]
|
|
21168
|
+
]
|
|
21169
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(CollectionBranch, {
|
|
21170
|
+
collection: state.collection,
|
|
21171
|
+
parent: section
|
|
21172
|
+
})));
|
|
21173
|
+
}
|
|
21174
|
+
const $49319ee1285aa241$export$4b1545b4f2016d26 = /*#__PURE__*/ ($42ceafc619f9c3ba$export$e953bb1cd0f19726)(($6f0c29017aeec335$export$437f11dc9b403b78), $49319ee1285aa241$var$MenuSectionInner);
|
|
21175
|
+
const $49319ee1285aa241$var$MenuItemContext = /*#__PURE__*/ ($8WNJc$react.createContext)(null);
|
|
21176
|
+
const $49319ee1285aa241$export$2ce376c2cc3355c8 = /*#__PURE__*/ ($42ceafc619f9c3ba$export$18af5c7a9e9b3664)(($6f0c29017aeec335$export$fd11f34e1d07f134), function MenuItem(props, forwardedRef, item) {
|
|
21177
|
+
[props, forwardedRef] = ($7230ffa83bc0c2cf$export$29f1550f4b0d4415)(props, forwardedRef, $49319ee1285aa241$var$MenuItemContext);
|
|
21178
|
+
let id = ($7230ffa83bc0c2cf$export$fabf2dc03a41866e)($49319ee1285aa241$var$MenuItemContext)?.id;
|
|
21179
|
+
let state = ($8WNJc$react.useContext)($49319ee1285aa241$export$24aad8519b95b41b);
|
|
21180
|
+
let ref = ($03e8ab2d84d7657a$export$4338b53315abf666)(forwardedRef);
|
|
21181
|
+
let selectionManager = ($8WNJc$react.useContext)($49319ee1285aa241$var$SelectionManagerContext);
|
|
21182
|
+
let { isVirtualized: isVirtualized } = ($8WNJc$react.useContext)(($263ab7fc0f95ccdb$export$4feb769f8ddf26c5));
|
|
21183
|
+
let { menuItemProps: menuItemProps, labelProps: labelProps, descriptionProps: descriptionProps, keyboardShortcutProps: keyboardShortcutProps, ...states } = ($1a9c2c840fd36413$export$9d32628fc2aea7da)({
|
|
21184
|
+
...props,
|
|
21185
|
+
id: id,
|
|
21186
|
+
key: item.key,
|
|
21187
|
+
selectionManager: selectionManager,
|
|
21188
|
+
isVirtualized: isVirtualized
|
|
21189
|
+
}, state, ref);
|
|
21190
|
+
let { hoverProps: hoverProps, isHovered: isHovered } = ($e969f22b6713ca4a$export$ae780daf29e6d456)({
|
|
21191
|
+
isDisabled: states.isDisabled
|
|
21192
|
+
});
|
|
21193
|
+
let renderProps = ($7230ffa83bc0c2cf$export$4d86445c2cf5e3)({
|
|
21194
|
+
...props,
|
|
21195
|
+
id: undefined,
|
|
21196
|
+
children: item.rendered,
|
|
21197
|
+
defaultClassName: 'react-aria-MenuItem',
|
|
21198
|
+
values: {
|
|
21199
|
+
...states,
|
|
21200
|
+
isHovered: isHovered,
|
|
21201
|
+
isFocusVisible: states.isFocusVisible,
|
|
21202
|
+
selectionMode: selectionManager.selectionMode,
|
|
21203
|
+
selectionBehavior: selectionManager.selectionBehavior,
|
|
21204
|
+
hasSubmenu: !!props['aria-haspopup'],
|
|
21205
|
+
isOpen: props['aria-expanded'] === 'true'
|
|
21206
|
+
}
|
|
21207
|
+
});
|
|
21208
|
+
let ElementType = props.href ? ($7230ffa83bc0c2cf$export$df3a06d6289f983e).a : ($7230ffa83bc0c2cf$export$df3a06d6289f983e).div;
|
|
21209
|
+
let DOMProps = ($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(props, {
|
|
21210
|
+
global: true
|
|
21211
|
+
});
|
|
21212
|
+
delete DOMProps.id;
|
|
21213
|
+
delete DOMProps.onClick;
|
|
21214
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(ElementType, {
|
|
21215
|
+
...($bbaa08b3cd72f041$export$9d1611c77c2fe928)(DOMProps, renderProps, menuItemProps, hoverProps),
|
|
21216
|
+
ref: ref,
|
|
21217
|
+
"data-disabled": states.isDisabled || undefined,
|
|
21218
|
+
"data-hovered": isHovered || undefined,
|
|
21219
|
+
"data-focused": states.isFocused || undefined,
|
|
21220
|
+
"data-focus-visible": states.isFocusVisible || undefined,
|
|
21221
|
+
"data-pressed": states.isPressed || undefined,
|
|
21222
|
+
"data-selected": states.isSelected || undefined,
|
|
21223
|
+
"data-selection-mode": selectionManager.selectionMode === 'none' ? undefined : selectionManager.selectionMode,
|
|
21224
|
+
"data-has-submenu": !!props['aria-haspopup'] || undefined,
|
|
21225
|
+
"data-open": props['aria-expanded'] === 'true' || undefined
|
|
21226
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
21227
|
+
values: [
|
|
21228
|
+
[
|
|
21229
|
+
($efe09c6d1c304b50$export$9afb8bc826b033ea),
|
|
21230
|
+
{
|
|
21231
|
+
slots: {
|
|
21232
|
+
[($7230ffa83bc0c2cf$export$c62b8e45d58ddad9)]: labelProps,
|
|
21233
|
+
label: labelProps,
|
|
21234
|
+
description: descriptionProps
|
|
21235
|
+
}
|
|
21236
|
+
}
|
|
21237
|
+
],
|
|
21238
|
+
[
|
|
21239
|
+
($650bea62ab5f5f0f$export$744d98a3b8a94e1c),
|
|
21240
|
+
keyboardShortcutProps
|
|
21241
|
+
],
|
|
21242
|
+
[
|
|
21243
|
+
($91fe5e721c7f36c1$export$c9549807523555e0),
|
|
21244
|
+
{
|
|
21245
|
+
isSelected: states.isSelected
|
|
21246
|
+
}
|
|
21247
|
+
]
|
|
21248
|
+
]
|
|
21249
|
+
}, renderProps.children));
|
|
21250
|
+
});
|
|
21251
|
+
|
|
21252
|
+
/*
|
|
21253
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
21254
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
21255
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
21256
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
21257
|
+
*
|
|
21258
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
21259
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
21260
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
21261
|
+
* governing permissions and limitations under the License.
|
|
21262
|
+
*/
|
|
21263
|
+
|
|
21264
|
+
|
|
21265
|
+
|
|
21266
|
+
|
|
21267
|
+
|
|
21268
|
+
function $13150e6629d46e45$export$d55e7ee900f34e93(props, ref) {
|
|
21269
|
+
let { role: role = 'dialog' } = props;
|
|
21270
|
+
let titleId = ($390e54f620492c70$export$b4cc09c592e8fdb8)();
|
|
21271
|
+
titleId = props['aria-label'] ? undefined : titleId;
|
|
21272
|
+
let isRefocusing = ($8WNJc$react.useRef)(false);
|
|
21273
|
+
// Focus the dialog itself on mount, unless a child element is already focused.
|
|
21274
|
+
($8WNJc$react.useEffect)(()=>{
|
|
21275
|
+
if (ref.current && !($23f2114a1b82827e$export$b4f377a2b6254582)(ref.current)) {
|
|
21276
|
+
($f192c2f16961cbe0$export$80f3e147d781571c)(ref.current);
|
|
21277
|
+
// Safari on iOS does not move the VoiceOver cursor to the dialog
|
|
21278
|
+
// or announce that it has opened until it has rendered. A workaround
|
|
21279
|
+
// is to wait for half a second, then blur and re-focus the dialog.
|
|
21280
|
+
let timeout = setTimeout(()=>{
|
|
21281
|
+
// Check that the dialog is still focused, or focused was lost to the body.
|
|
21282
|
+
if (($23f2114a1b82827e$export$cd4e5573fbe2b576)() === ref.current || ($23f2114a1b82827e$export$cd4e5573fbe2b576)() === document.body) {
|
|
21283
|
+
isRefocusing.current = true;
|
|
21284
|
+
if (ref.current) {
|
|
21285
|
+
ref.current.blur();
|
|
21286
|
+
($f192c2f16961cbe0$export$80f3e147d781571c)(ref.current);
|
|
21287
|
+
}
|
|
21288
|
+
isRefocusing.current = false;
|
|
21289
|
+
}
|
|
21290
|
+
}, 500);
|
|
21291
|
+
return ()=>{
|
|
21292
|
+
clearTimeout(timeout);
|
|
21293
|
+
};
|
|
21294
|
+
}
|
|
21295
|
+
}, [
|
|
21296
|
+
ref
|
|
21297
|
+
]);
|
|
21298
|
+
($d7a937236970dc7f$export$14c98a7594375490)();
|
|
21299
|
+
// Warn in dev mode if the dialog has no accessible title.
|
|
21300
|
+
// This catches a common mistake where useDialog and useOverlayTriggerState
|
|
21301
|
+
// are used in the same component, causing the title element to not be
|
|
21302
|
+
// in the DOM when useSlotId queries for it.
|
|
21303
|
+
// Check the DOM element directly since aria-labelledby may be added by
|
|
21304
|
+
// wrapper components (e.g. RAC Dialog uses trigger ID as a fallback).
|
|
21305
|
+
let hasWarned = ($8WNJc$react.useRef)(false);
|
|
21306
|
+
($8WNJc$react.useEffect)(()=>{
|
|
21307
|
+
if (process.env.NODE_ENV !== 'production' && !hasWarned.current && ref.current) {
|
|
21308
|
+
let el = ref.current;
|
|
21309
|
+
let hasAriaLabel = el.hasAttribute('aria-label');
|
|
21310
|
+
let hasAriaLabelledby = el.hasAttribute('aria-labelledby');
|
|
21311
|
+
if (!hasAriaLabel && !hasAriaLabelledby) {
|
|
21312
|
+
console.warn("A dialog must have a title for accessibility. Either provide an aria-label or aria-labelledby prop, or render a heading element inside the dialog.");
|
|
21313
|
+
hasWarned.current = true;
|
|
21314
|
+
}
|
|
21315
|
+
}
|
|
21316
|
+
});
|
|
21317
|
+
// We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
|
|
21318
|
+
// on mount when inside an iframe, no matter which element we programmatically focus.
|
|
21319
|
+
// See https://bugs.webkit.org/show_bug.cgi?id=211934.
|
|
21320
|
+
// useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
|
|
21321
|
+
// even without aria-modal on the dialog itself.
|
|
21322
|
+
return {
|
|
21323
|
+
dialogProps: {
|
|
21324
|
+
...($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(props, {
|
|
21325
|
+
labelable: true
|
|
21326
|
+
}),
|
|
21327
|
+
role: role,
|
|
21328
|
+
tabIndex: -1,
|
|
21329
|
+
'aria-labelledby': props['aria-labelledby'] || titleId,
|
|
21330
|
+
// Prevent blur events from reaching useOverlay, which may cause
|
|
21331
|
+
// popovers to close. Since focus is contained within the dialog,
|
|
21332
|
+
// we don't want this to occur due to the above useEffect.
|
|
21333
|
+
onBlur: (e)=>{
|
|
21334
|
+
if (isRefocusing.current) e.stopPropagation();
|
|
21335
|
+
}
|
|
21336
|
+
},
|
|
21337
|
+
titleProps: {
|
|
21338
|
+
id: titleId
|
|
21339
|
+
}
|
|
21340
|
+
};
|
|
21341
|
+
}
|
|
21342
|
+
|
|
21343
|
+
/*
|
|
21344
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
21345
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
21346
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
21347
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
21348
|
+
*
|
|
21349
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
21350
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
21351
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
21352
|
+
* governing permissions and limitations under the License.
|
|
21353
|
+
*/
|
|
21354
|
+
|
|
21355
|
+
|
|
21356
|
+
|
|
21357
|
+
|
|
21358
|
+
|
|
21359
|
+
|
|
21360
|
+
|
|
21361
|
+
|
|
21362
|
+
|
|
21363
|
+
|
|
21364
|
+
|
|
21365
|
+
|
|
21366
|
+
|
|
21367
|
+
const $f2ff30fde7b014be$export$8b93a07348a7730c = /*#__PURE__*/ ($8WNJc$react.createContext)(null);
|
|
21368
|
+
const $f2ff30fde7b014be$export$d2f961adcb0afbe = /*#__PURE__*/ ($8WNJc$react.createContext)(null);
|
|
21369
|
+
function $f2ff30fde7b014be$export$2e1e1122cf0cba88(props) {
|
|
21370
|
+
// Use useMenuTriggerState instead of useOverlayTriggerState in case a menu is embedded in the dialog.
|
|
21371
|
+
// This is needed to handle submenus.
|
|
21372
|
+
let state = ($e3403870bfb691da$export$79fefeb1c2091ac3)(props);
|
|
21373
|
+
let buttonRef = ($8WNJc$react.useRef)(null);
|
|
21374
|
+
let { triggerProps: triggerProps, overlayProps: overlayProps } = ($f282e36c29c025e8$export$f9d5c8beee7d008d)({
|
|
21375
|
+
type: 'dialog'
|
|
21376
|
+
}, state, buttonRef);
|
|
21377
|
+
// Allows popover width to match trigger element
|
|
21378
|
+
let [buttonWidth, setButtonWidth] = ($8WNJc$react.useState)(null);
|
|
21379
|
+
let onResize = ($8WNJc$react.useCallback)(()=>{
|
|
21380
|
+
if (buttonRef.current) setButtonWidth(buttonRef.current.offsetWidth + 'px');
|
|
21381
|
+
}, [
|
|
21382
|
+
buttonRef
|
|
21383
|
+
]);
|
|
21384
|
+
($970072cf4b13fde3$export$683480f191c0e3ea)({
|
|
21385
|
+
ref: buttonRef,
|
|
21386
|
+
onResize: onResize
|
|
21387
|
+
});
|
|
21388
|
+
// Label dialog by the trigger as a fallback if there is no title slot.
|
|
21389
|
+
// This is done in RAC instead of hooks because otherwise we cannot distinguish
|
|
21390
|
+
// between context and props. Normally aria-labelledby overrides the title
|
|
21391
|
+
// but when sent by context we want the title to win.
|
|
21392
|
+
triggerProps.id = ($390e54f620492c70$export$f680877a34711e37)();
|
|
21393
|
+
overlayProps['aria-labelledby'] = triggerProps.id;
|
|
21394
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
21395
|
+
values: [
|
|
21396
|
+
[
|
|
21397
|
+
$f2ff30fde7b014be$export$d2f961adcb0afbe,
|
|
21398
|
+
state
|
|
21399
|
+
],
|
|
21400
|
+
[
|
|
21401
|
+
($49319ee1285aa241$export$795aec4671cbae19),
|
|
21402
|
+
state
|
|
21403
|
+
],
|
|
21404
|
+
[
|
|
21405
|
+
$f2ff30fde7b014be$export$8b93a07348a7730c,
|
|
21406
|
+
overlayProps
|
|
21407
|
+
],
|
|
21408
|
+
[
|
|
21409
|
+
($542a13ca2fa5b484$export$9b9a0cd73afb7ca4),
|
|
21410
|
+
{
|
|
21411
|
+
trigger: 'DialogTrigger',
|
|
21412
|
+
triggerRef: buttonRef,
|
|
21413
|
+
'aria-labelledby': overlayProps['aria-labelledby'],
|
|
21414
|
+
style: {
|
|
21415
|
+
'--trigger-width': buttonWidth
|
|
21416
|
+
}
|
|
21417
|
+
}
|
|
21418
|
+
]
|
|
21419
|
+
]
|
|
21420
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(($0d47b37c475c5231$export$3351871ee4b288b8), {
|
|
21421
|
+
...triggerProps,
|
|
21422
|
+
ref: buttonRef,
|
|
21423
|
+
isPressed: state.isOpen
|
|
21424
|
+
}, props.children));
|
|
21425
|
+
}
|
|
21426
|
+
const $f2ff30fde7b014be$export$3ddf2d174ce01153 = /*#__PURE__*/ ($8WNJc$react.forwardRef)(function Dialog(props, ref) {
|
|
21427
|
+
let originalAriaLabelledby = props['aria-labelledby'];
|
|
21428
|
+
[props, ref] = ($7230ffa83bc0c2cf$export$29f1550f4b0d4415)(props, ref, $f2ff30fde7b014be$export$8b93a07348a7730c);
|
|
21429
|
+
let { dialogProps: dialogProps, titleProps: titleProps } = ($13150e6629d46e45$export$d55e7ee900f34e93)({
|
|
21430
|
+
...props,
|
|
21431
|
+
// Only pass aria-labelledby from props, not context.
|
|
21432
|
+
// Context is used as a fallback below.
|
|
21433
|
+
'aria-labelledby': originalAriaLabelledby
|
|
21434
|
+
}, ref);
|
|
21435
|
+
let state = ($8WNJc$react.useContext)($f2ff30fde7b014be$export$d2f961adcb0afbe);
|
|
21436
|
+
if (!dialogProps['aria-label'] && !dialogProps['aria-labelledby']) {
|
|
21437
|
+
// If aria-labelledby exists on props, we know it came from context.
|
|
21438
|
+
// Use that as a fallback in case there is no title slot.
|
|
21439
|
+
if (props['aria-labelledby']) dialogProps['aria-labelledby'] = props['aria-labelledby'];
|
|
21440
|
+
else if (process.env.NODE_ENV !== 'production') console.warn('If a Dialog does not contain a <Heading slot="title">, it must have an aria-label or aria-labelledby attribute for accessibility.');
|
|
21441
|
+
}
|
|
21442
|
+
let renderProps = ($7230ffa83bc0c2cf$export$4d86445c2cf5e3)({
|
|
21443
|
+
defaultClassName: 'react-aria-Dialog',
|
|
21444
|
+
className: props.className,
|
|
21445
|
+
style: props.style,
|
|
21446
|
+
children: props.children,
|
|
21447
|
+
values: {
|
|
21448
|
+
close: state?.close || (()=>{})
|
|
21449
|
+
}
|
|
21450
|
+
});
|
|
21451
|
+
let DOMProps = ($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(props, {
|
|
21452
|
+
global: true
|
|
21453
|
+
});
|
|
21454
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$df3a06d6289f983e).section, {
|
|
21455
|
+
...($bbaa08b3cd72f041$export$9d1611c77c2fe928)(DOMProps, renderProps, dialogProps),
|
|
21456
|
+
render: props.render,
|
|
21457
|
+
ref: ref,
|
|
21458
|
+
slot: props.slot || undefined
|
|
20227
21459
|
}, /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
20228
21460
|
values: [
|
|
20229
21461
|
[
|
|
@@ -28948,11 +30180,11 @@ function $05a50f7d78b03ad9$var$TooltipInner(props) {
|
|
|
28948
30180
|
}, renderProps.children));
|
|
28949
30181
|
}
|
|
28950
30182
|
|
|
28951
|
-
var css_248z$
|
|
28952
|
-
styleInject(css_248z$
|
|
30183
|
+
var css_248z$C = ".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";
|
|
30184
|
+
styleInject(css_248z$C);
|
|
28953
30185
|
|
|
28954
|
-
var css_248z$
|
|
28955
|
-
styleInject(css_248z$
|
|
30186
|
+
var css_248z$B = ".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";
|
|
30187
|
+
styleInject(css_248z$B);
|
|
28956
30188
|
|
|
28957
30189
|
function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
|
|
28958
30190
|
return (jsxRuntime.jsx($7705c033048f6da7$export$353f5b6fc5456de1, { className: `bcds-react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
|
|
@@ -28972,8 +30204,8 @@ function Accordion({ label, children, ...props }) {
|
|
|
28972
30204
|
return (jsxRuntime.jsx($a3e16eab0ea4036c$export$74a362b31437ec83, { className: `bcds-react-aria-Disclosure`, ...props, children: ({ isExpanded }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(Button, { className: "bcds-react-aria-Disclosure--Button", size: "small", variant: "link", slot: "trigger", children: [label, isExpanded ? jsxRuntime.jsx(SvgChevronUpIcon, {}) : jsxRuntime.jsx(SvgChevronDownIcon, {})] }), jsxRuntime.jsx($a3e16eab0ea4036c$export$feabaa331e1d464c, { className: "bcds-react-aria-Disclosure--Panel", children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) })] })) }));
|
|
28973
30205
|
}
|
|
28974
30206
|
|
|
28975
|
-
var css_248z$
|
|
28976
|
-
styleInject(css_248z$
|
|
30207
|
+
var css_248z$A = ".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";
|
|
30208
|
+
styleInject(css_248z$A);
|
|
28977
30209
|
|
|
28978
30210
|
function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
28979
30211
|
function getTitle() {
|
|
@@ -28997,8 +30229,8 @@ function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
|
28997
30229
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && (jsxRuntime.jsx("div", { className: "bcds-react-aria-DisclosureGroup--Title", children: getTitle() })), jsxRuntime.jsx($a3e16eab0ea4036c$export$944aceb4f8c89f10, { className: "bcds-react-aria-DisclosureGroup", ...props, children: children })] }));
|
|
28998
30230
|
}
|
|
28999
30231
|
|
|
29000
|
-
var css_248z$
|
|
29001
|
-
styleInject(css_248z$
|
|
30232
|
+
var css_248z$z = ".bcds-Alert-Banner {\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n}\n\n.bcds-Alert-Banner--Container {\n flex-grow: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-padding-medium);\n}\n\n.bcds-Alert-Banner--Icon {\n align-self: first baseline;\n justify-self: flex-start;\n padding-top: var(--layout-padding-xsmall);\n color: var(--icons-color-primary-invert);\n}\n\n.bcds-Alert-Banner--Content {\n display: inline-flex;\n gap: var(--layout-margin-medium);\n align-items: first baseline;\n flex-grow: 1;\n flex-wrap: wrap;\n color: var(--typography-color-primary-invert);\n}\n\n/* Layout */\n.bcds-Alert-Banner.fixed {\n padding: var(--layout-padding-none) var(--layout-padding-medium);\n}\n.bcds-Alert-Banner.fixed > .bcds-Alert-Banner--Container {\n max-width: 1100px;\n}\n.bcds-Alert-Banner.fluid {\n padding: var(--layout-padding-none) var(--layout-padding-large);\n}\n\n/* Sizing */\n.bcds-Alert-Banner.small > .bcds-Alert-Banner--Container {\n padding: var(--layout-padding-hair) var(--layout-padding-none);\n}\n.bcds-Alert-Banner.small .bcds-Alert-Banner--Content {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-Alert-Banner.medium > .bcds-Alert-Banner--Container {\n padding: var(--layout-padding-small) var(--layout-padding-none);\n}\n.bcds-Alert-Banner.medium .bcds-Alert-Banner--Content {\n font: var(--typography-regular-body);\n}\n\n/* Close icon */\n.bcds-Alert-Banner--closeIcon {\n align-self: first baseline;\n}\n\n.bcds-Alert-Banner--closeIcon > .bcds-react-aria-Button[data-hovered] svg {\n color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner--closeIcon svg {\n color: var(--icons-color-primary-invert);\n}\n\n/* Variants */\n\n/* Info theme */\n.bcds-Alert-Banner.info {\n background-color: var(--surface-color-background-dark-blue);\n}\n\n/* Success theme */\n.bcds-Alert-Banner.success {\n background-color: var(--support-border-color-success);\n}\n\n/* Warning theme */\n.bcds-Alert-Banner.warning {\n background-color: var(--support-border-color-warning);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Icon {\n color: var(--icons-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--Content {\n color: var(--typography-color-primary);\n}\n\n.bcds-Alert-Banner.warning .bcds-Alert-Banner--closeIcon svg {\n color: var(--icons-color-primary);\n}\n\n/* Danger theme */\n.bcds-Alert-Banner.danger {\n background-color: var(--support-border-color-danger);\n}\n\n/* Black theme */\n\n.bcds-Alert-Banner.black {\n background-color: var(--theme-gray-110);\n}\n";
|
|
30233
|
+
styleInject(css_248z$z);
|
|
29002
30234
|
|
|
29003
30235
|
/* This component implements the Circle Check icon from Font Awesome: https://fontawesome.com/icons/circle-check */
|
|
29004
30236
|
function SvgCheckCircleIcon({ id = "check-icon" }) {
|
|
@@ -29046,15 +30278,15 @@ function AlertBanner({ variant = "info", size = "medium", layout = "fixed", isIc
|
|
|
29046
30278
|
return (jsxRuntime.jsx("div", { className: `bcds-Alert-Banner ${variant} ${size} ${layout}`, ...props, children: jsxRuntime.jsxs("div", { className: "bcds-Alert-Banner--Container", children: [" ", !isIconHidden && (jsxRuntime.jsx("span", { className: "bcds-Alert-Banner--Icon", children: customIcon ? customIcon : getIcon$2(variant) })), jsxRuntime.jsx("div", { className: "bcds-Alert-Banner--Content", role: role, children: children }), isCloseable && (jsxRuntime.jsx("span", { className: "bcds-Alert-Banner--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }) }));
|
|
29047
30279
|
}
|
|
29048
30280
|
|
|
29049
|
-
var css_248z$
|
|
29050
|
-
styleInject(css_248z$
|
|
30281
|
+
var css_248z$y = ".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";
|
|
30282
|
+
styleInject(css_248z$y);
|
|
29051
30283
|
|
|
29052
30284
|
function ButtonGroup({ orientation = "horizontal", alignment = "start", ariaLabel, children, ...props }) {
|
|
29053
30285
|
return (jsxRuntime.jsx("div", { className: `bcds-ButtonGroup ${orientation} ${alignment}`, role: "group", "aria-label": ariaLabel, ...props, children: children }));
|
|
29054
30286
|
}
|
|
29055
30287
|
|
|
29056
|
-
var css_248z$
|
|
29057
|
-
styleInject(css_248z$
|
|
30288
|
+
var css_248z$x = ".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";
|
|
30289
|
+
styleInject(css_248z$x);
|
|
29058
30290
|
|
|
29059
30291
|
/* Sets correct left icon for selected variant */
|
|
29060
30292
|
function getIcon$1(variant) {
|
|
@@ -29077,11 +30309,11 @@ function AlertDialog({ children, variant = "info", role = "dialog", title, isClo
|
|
|
29077
30309
|
return (jsxRuntime.jsx($f2ff30fde7b014be$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 }))] })) }));
|
|
29078
30310
|
}
|
|
29079
30311
|
|
|
29080
|
-
var css_248z$
|
|
29081
|
-
styleInject(css_248z$
|
|
30312
|
+
var css_248z$w = ".bcds-react-aria-Calendar {\n display: inline-flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--layout-margin-large);\n padding: var(--layout-padding-medium);\n box-sizing: border-box;\n justify-content: center;\n background-color: var(--surface-color-forms-default);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Calendar--GridContainer {\n display: inline-flex;\n flex: 0 1 0;\n flex-direction: column;\n gap: var(--layout-margin-small);\n box-sizing: border-box;\n}\n.bcds-react-aria-Calendar--Header {\n display: inline-flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n.bcds-react-aria-Calendar--HeaderButton {\n width: var(--icons-size-large);\n height: var(--icons-size-large);\n display: flex;\n align-items: center;\n flex-shrink: 0;\n}\n.bcds-react-aria-Calendar--Header > h2.bcds-react-aria-Heading {\n flex: 1;\n text-align: center;\n font: var(--typography-bold-small-body);\n margin: var(--layout-margin-none);\n}\n.bcds-react-aria-Calendar--Header > button > svg {\n min-width: var(--icons-size-small);\n height: var(--icons-size-small);\n}\n.bcds-react-aria-Calendar--Grid {\n text-align: center;\n border-spacing: var(--layout-margin-xsmall);\n}\n.bcds-react-aria-Calendar--Cell {\n cursor: pointer;\n box-sizing: border-box;\n width: var(--icons-size-xlarge);\n height: var(--icons-size-xlarge);\n padding: var(--layout-padding-xsmall);\n border: solid var(--layout-border-width-small) transparent;\n}\n/* Hide days outside current month or visible range */\n.bcds-react-aria-Calendar--Cell[data-outside-visible-range],\n.bcds-react-aria-Calendar--Cell[data-outside-month] {\n visibility: hidden;\n}\n\n/* Calendar item states */\n.bcds-react-aria-Calendar--Cell[data-hovered] {\n background-color: var(--surface-color-secondary-button-hover);\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected] {\n background-color: var(--surface-color-primary-button-default);\n color: var(--typography-color-primary-invert);\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected][data-focused],\n.bcds-react-aria-Calendar--Cell[data-selected][data-focus-visible] {\n background-color: var(--surface-color-primary-button-default);\n color: var(--typography-color-primary-invert);\n outline: solid var(--layout-border-width-small)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Calendar--Cell[data-selected][data-hovered] {\n background-color: var(--surface-color-primary-button-hover);\n}\n.bcds-react-aria-Calendar--Cell[data-focused] {\n outline: none;\n}\n.bcds-react-aria-Calendar--Cell[data-focus-visible] {\n background-color: var(--surface-color-secondary-button-hover);\n border: solid var(--layout-border-width-small)\n var(--surface-color-border-active);\n border-radius: var(--layout-border-radius-small);\n outline: none;\n}\n.bcds-react-aria-Calendar--Cell[data-today] {\n font: var(--typography-bold-small-body);\n}\n.bcds-react-aria-Calendar--Cell[data-disabled],\n.bcds-react-aria-Calendar--Cell[data-unavailable][data-disabled] {\n color: var(--typography-color-disabled);\n text-decoration: none;\n cursor: not-allowed;\n}\n.bcds-react-aria-Calendar--Cell[data-unavailable] {\n color: var(--typography-color-danger);\n text-decoration: line-through;\n cursor: not-allowed;\n}\n";
|
|
30313
|
+
styleInject(css_248z$w);
|
|
29082
30314
|
|
|
29083
|
-
var css_248z$
|
|
29084
|
-
styleInject(css_248z$
|
|
30315
|
+
var css_248z$v = "/* 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";
|
|
30316
|
+
styleInject(css_248z$v);
|
|
29085
30317
|
|
|
29086
30318
|
function Heading({ color = "primary", isUnstyled = false, ...props }) {
|
|
29087
30319
|
return (jsxRuntime.jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, { className: isUnstyled ? undefined : `bcds-react-aria-Heading ${color}`, ...props }));
|
|
@@ -29107,8 +30339,8 @@ function Calendar({ visibleDuration = { months: 1 }, ...props }) {
|
|
|
29107
30339
|
.toDate(state.timeZone)) }), jsxRuntime.jsx("div", { className: "bcds-react-aria-Calendar--HeaderButton", children: i === (visibleDuration.months ?? 1) - 1 && (jsxRuntime.jsx(Button, { slot: "next", size: "xsmall", variant: "tertiary", isIconButton: true, children: jsxRuntime.jsx(SvgChevronRightIcon, {}) })) })] }), jsxRuntime.jsx($6f9a1820b787aac7$export$5bd780d491cfc46c, { offset: { months: i }, className: `bcds-react-aria-Calendar--Grid`, weekdayStyle: "short", children: (date) => (jsxRuntime.jsx($6f9a1820b787aac7$export$5d847498420df57b, { className: "bcds-react-aria-Calendar--Cell", date: date })) })] }, i))) }));
|
|
29108
30340
|
}
|
|
29109
30341
|
|
|
29110
|
-
var css_248z$
|
|
29111
|
-
styleInject(css_248z$
|
|
30342
|
+
var css_248z$u = ".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";
|
|
30343
|
+
styleInject(css_248z$u);
|
|
29112
30344
|
|
|
29113
30345
|
function Callout({ variant = "lightGrey", title, description, buttons, role = "note", isLeftBorderDisabled = false, children, ...props }) {
|
|
29114
30346
|
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 }))] }) })) }));
|
|
@@ -29123,32 +30355,32 @@ function SvgDashIcon$1({ id = "dash-icon" }) {
|
|
|
29123
30355
|
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" }) }));
|
|
29124
30356
|
}
|
|
29125
30357
|
|
|
29126
|
-
var css_248z$
|
|
29127
|
-
styleInject(css_248z$
|
|
30358
|
+
var css_248z$t = ".bcds-react-aria-Checkbox {\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n}\n\n/* Checkbox */\n.bcds-react-aria-Checkbox > .checkbox {\n align-self: first baseline;\n display: flex;\n margin-top: var(--layout-margin-hair);\n justify-content: space-around;\n width: var(--icons-size-small);\n height: var(--icons-size-small);\n min-width: var(--icons-size-small);\n background-color: var(--surface-color-secondary-default);\n border-color: var(--surface-color-border-medium);\n border-style: solid;\n border-width: var(--layout-border-width-small);\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Checkbox > .checkbox > svg {\n align-self: center;\n}\n\n/* Label */\n.bcds-react-aria-Checkbox > .label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n\n/* Focus */\n.bcds-react-aria-Checkbox[data-focus-visible] > .checkbox {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Hover */\n.bcds-react-aria-Checkbox[data-hovered] > .checkbox {\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Checkbox[data-selected][data-hovered] > .checkbox {\n background-color: var(--surface-color-primary-hover);\n border-color: var(--surface-color-primary-hover);\n}\n\n/* Pressed */\n.bcds-react-aria-Checkbox[data-pressed] > .checkbox {\n background-color: var(--surface-color-primary-default);\n}\n\n/* Selected */\n.bcds-react-aria-Checkbox[data-selected] > .checkbox {\n background-color: var(--surface-color-primary-default);\n border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-selected] > .checkbox > svg {\n color: var(--icons-color-primary-invert);\n}\n\n/* Disabled */\n.bcds-react-aria-Checkbox[data-disabled] {\n cursor: not-allowed;\n}\n.bcds-react-aria-Checkbox[data-disabled] > .checkbox {\n border-color: var(--surface-color-border-medium);\n background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-disabled] > .label {\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox {\n border-color: var(--surface-color-primary-disabled);\n background-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-selected][data-disabled] > .checkbox > svg {\n color: var(--icons-color-disabled);\n}\n\n/* Indeterminate */\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox {\n background-color: var(--surface-color-primary-default);\n border-color: var(--surface-color-primary-default);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox {\n background-color: var(--surface-color-primary-disabled);\n border-color: var(--surface-color-primary-disabled);\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-invalid] > .checkbox {\n background-color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Checkbox[data-indeterminate] > .checkbox > svg {\n color: var(--icons-color-primary-invert);\n align-self: center;\n vertical-align: middle;\n}\n.bcds-react-aria-Checkbox[data-indeterminate][data-disabled] > .checkbox > svg {\n color: var(--icons-color-disabled);\n}\n\n/* Read-only */\n.bcds-react-aria-Checkbox[data-readonly] {\n cursor: not-allowed;\n}\n\n/* Invalid */\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox {\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Checkbox[data-invalid] > .checkbox > svg {\n color: var(--icons-color-primary-invert);\n}\n.bcds-react-aria-Checkbox[data-selected][data-invalid] > .checkbox {\n background-color: var(--surface-color-primary-danger-button-default);\n}\n";
|
|
30359
|
+
styleInject(css_248z$t);
|
|
29128
30360
|
|
|
29129
30361
|
function Checkbox({ value, children, ...props }) {
|
|
29130
30362
|
return (jsxRuntime.jsx($ed8ccb2e23e76301$export$48513f6b9f8ce62d, { className: "bcds-react-aria-Checkbox", value: value, ...props, children: ({ isRequired, isSelected, isIndeterminate }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "checkbox", children: [isSelected && !isIndeterminate && jsxRuntime.jsx(SvgCheckIcon, {}), isIndeterminate && jsxRuntime.jsx(SvgDashIcon$1, {})] }), jsxRuntime.jsxs("span", { className: "label", children: [jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }), " ", isRequired && "(required)"] })] })) }));
|
|
29131
30363
|
}
|
|
29132
30364
|
|
|
29133
|
-
var css_248z$
|
|
29134
|
-
styleInject(css_248z$
|
|
30365
|
+
var css_248z$s = ".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";
|
|
30366
|
+
styleInject(css_248z$s);
|
|
29135
30367
|
|
|
29136
30368
|
function CheckboxGroup({ orientation = "vertical", label, description, errorMessage, flexWrap = "nowrap", children, ...props }) {
|
|
29137
30369
|
return (jsxRuntime.jsx($ed8ccb2e23e76301$export$4aa08d5625cb8ead, { className: `bcds-react-aria-CheckboxGroup`, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-CheckboxGroup--label", children: [label, " ", isRequired && "(required)"] })), jsxRuntime.jsx("div", { className: `bcds-react-aria-CheckboxGroup--options ${orientation} flex-wrap-${flexWrap}`, children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: children }) }), description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-CheckboxGroup--description", children: description })), isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-CheckboxGroup--error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
29138
30370
|
}
|
|
29139
30371
|
|
|
29140
|
-
var css_248z$
|
|
29141
|
-
styleInject(css_248z$
|
|
30372
|
+
var css_248z$r = ".bcds-react-aria-DatePicker {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n background-color: var(--surface-color-forms-default);\n align-self: flex-start;\n width: 100%;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n.bcds-react-aria-DatePicker--Group {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n gap: var(--layout-margin-small);\n}\n.bcds-react-aria-DatePicker--Input {\n display: inline;\n box-sizing: border-box;\n width: 100%;\n min-width: 0;\n align-items: center;\n white-space: nowrap;\n border: none;\n}\n\n/* Sizing */\n.bcds-react-aria-DatePicker.small > .bcds-react-aria-DatePicker--Group {\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n height: 32px;\n}\n.bcds-react-aria-DatePicker.small .bcds-react-aria-DatePicker--Input {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-DatePicker.medium > .bcds-react-aria-DatePicker--Group {\n padding: var(--layout-padding-xsmall) 0.75rem;\n height: 40px;\n}\n.bcds-react-aria-DatePicker.medium .bcds-react-aria-DatePicker--Input {\n font: var(--typography-regular-body);\n}\n\n/* Label */\n.bcds-react-aria-DatePicker--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Required indicator */\n.bcds-react-aria-DatePicker--Label.required {\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n/* Description */\n.bcds-react-aria-DatePicker--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n/* Error message */\n.bcds-react-aria-DatePicker--Error {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid] > .bcds-react-aria-DatePicker--Group {\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-DatePicker[data-invalid]\n > .bcds-react-aria-DatePicker--Group\n > svg {\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n/* Format helper text */\n.bcds-react-aria-DatePicker--FormatHelpText {\n unicode-bidi: embed;\n direction: ltr;\n}\n\n/* Hover and focus */\n.bcds-react-aria-DatePicker--Group[data-hovered] {\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n > .bcds-react-aria-DatePicker--Group {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n > .bcds-react-aria-DatePicker--Group:has(\n .bcds-react-aria-Button[data-focus-visible]\n ) {\n outline: none; /* Hide focus ring when button is focused */\n}\n.bcds-react-aria-DatePicker[data-focus-visible]\n .bcds-react-aria-DatePicker--Segment {\n outline: none;\n}\n.bcds-react-aria-DatePicker--Segment[data-focused] {\n outline: none;\n border-radius: var(--layout-border-radius-small);\n background-color: var(--surface-color-primary-default);\n color: var(--typography-color-primary-invert);\n padding: var(--layout-padding-hair);\n margin: var(--layout-margin-none) var(--layout-margin-hair);\n}\n.bcds-react-aria-DatePicker > .bcds-react-aria-Button[data-focused] {\n outline: none;\n}\n\n/* Disabled and read-only */\n.bcds-react-aria-DatePicker[data-readonly]\n > .bcds-react-aria-DatePicker--Group {\n cursor: not-allowed;\n}\n.bcds-react-aria-DatePicker--Segment[data-readonly][data-focused] {\n background-color: var(--surface-color-forms-disabled);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-DatePicker[data-disabled]\n > .bcds-react-aria-DatePicker--Group {\n background-color: var(--surface-color-forms-disabled);\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
30373
|
+
styleInject(css_248z$r);
|
|
29142
30374
|
|
|
29143
|
-
var css_248z$
|
|
29144
|
-
styleInject(css_248z$
|
|
30375
|
+
var css_248z$q = ".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";
|
|
30376
|
+
styleInject(css_248z$q);
|
|
29145
30377
|
|
|
29146
30378
|
function Dialog({ isCloseable = true, role = "dialog", children, ...props }) {
|
|
29147
30379
|
return (jsxRuntime.jsx($f2ff30fde7b014be$export$3ddf2d174ce01153, { className: "bcds-react-aria-Dialog", role: role, ...props, children: ({ close }) => (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("div", { className: "bcds-react-aria-Dialog--Container", children: [isCloseable && (jsxRuntime.jsx("span", { className: "bcds-react-aria-Dialog--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close", type: "button", onPress: close, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) })), jsxRuntime.jsx(jsxRuntime.Fragment, { children: children })] }) })) }));
|
|
29148
30380
|
}
|
|
29149
30381
|
|
|
29150
|
-
var css_248z$
|
|
29151
|
-
styleInject(css_248z$
|
|
30382
|
+
var css_248z$p = ".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";
|
|
30383
|
+
styleInject(css_248z$p);
|
|
29152
30384
|
|
|
29153
30385
|
function Separator({ size = "medium", ...props }) {
|
|
29154
30386
|
return (jsxRuntime.jsx($e28ab3efe3e87743$export$1ff3c3f08ae963c0, { className: `bcds-react-aria-Separator ${size}`, ...props }));
|
|
@@ -29186,15 +30418,15 @@ function DatePicker({ size = "medium", label, description, errorMessage, showFor
|
|
|
29186
30418
|
return isBrowserLocaleUsed ? (datePicker) : (jsxRuntime.jsx($2eb8e6d23f3d0cb0$export$a54013f0d02a8f82, { locale: "en-CA", children: datePicker }));
|
|
29187
30419
|
}
|
|
29188
30420
|
|
|
29189
|
-
var css_248z$
|
|
29190
|
-
styleInject(css_248z$
|
|
30421
|
+
var css_248z$o = ".bcds-bc-logo--whiteFill {\n fill: #ffffff;\n stroke-width: 0px;\n}\n\n.bcds-bc-logo--blueFill {\n fill: #234075;\n stroke-width: 0px;\n}\n\n.bcds-bc-logo--goldFill {\n fill: #e3a82b;\n stroke-width: 0px;\n}\n\n.bcds-bc-logo--noFill {\n fill: none;\n stroke-width: 0px;\n}\n";
|
|
30422
|
+
styleInject(css_248z$o);
|
|
29191
30423
|
|
|
29192
30424
|
function SvgBcLogo({ id = "bcgov-logo" }) {
|
|
29193
30425
|
return (jsxRuntime.jsxs("svg", { id: id, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 847.65 327.01", children: [jsxRuntime.jsx("path", { d: "M109.59,226.32c44.7,0,106.54,25.17,151.41,25.17,32.02,0,63.26-8.54,81.04-21.13,1.24-7.39,1.9-14.97,1.9-22.72,0-75.13-60.91-136.04-136.04-136.04s-136.04,60.91-136.04,136.04c0,7.65.64,15.15,1.86,22.46,4.9-.91,21.57-3.79,35.87-3.79Z", className: "bcds-bc-logo--whiteFill" }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "415.4", y: "252.98", width: "314.66", height: "3.82", className: "bcds-bc-logo--goldFill" }), jsxRuntime.jsx("path", { d: "M423.47,116.64c0-6.39-.45-8.08-4.76-8.43l-3-.21c-.49-.39-.35-2.12.1-2.16,5.17-.46,11.69-.69,20.6-.69,6.04,0,11.79.43,16.1,2.42,4.12,1.81,7.28,5.26,7.28,10.79,0,6.22-4.03,9.41-9.77,11.83,0,.86.77,1.12,1.82,1.29,5.17.86,12.84,5.18,12.84,14.42,0,10.01-8.24,16.75-25.49,16.75-2.78,0-7.47-.26-11.5-.26s-7.47.17-11.02.26c-.57-.26-.77-1.64-.19-2.16l1.73-.26c5.08-.78,5.27-1.73,5.27-10.79v-32.8ZM431.32,128.12c0,2.42.1,2.59,4.98,2.42,9.77-.35,15.04-2.94,15.04-11.05s-7-11.65-14.28-11.65c-2.11,0-3.55.17-4.41.52-.96.26-1.34.69-1.34,2.24v17.52ZM431.32,148.14c0,3.11.19,7.51,2.01,9.41,1.82,1.98,4.7,2.42,7.57,2.42,8.53,0,15.04-3.45,15.04-12.08,0-6.82-3.83-14.76-19.07-14.76-5.17,0-5.56.52-5.56,2.24v12.77Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M531.26,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.06-.07,10.15-.22c.49.22.65,1.55.16,1.84l-2.04.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.04.22c.49.29.33,1.62-.16,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.66-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M576.66,151.53c0,7.74.15,8.85,4.6,9.22l2.45.22c.46.29.31,1.62-.15,1.84-4.37-.15-6.98-.22-10.05-.22s-5.75.07-10.66.22c-.46-.22-.62-1.47,0-1.84l2.76-.22c4.37-.37,4.75-1.48,4.75-9.22v-32.96c0-2.28,0-2.36-2.3-2.36h-4.22c-3.3,0-7.51.15-9.43,1.84-1.84,1.62-2.61,3.24-3.45,5.09-.62.44-1.69.07-1.99-.52,1.22-3.32,2.38-8.04,2.91-10.98.23-.15,1.23-.22,1.46,0,.46,2.36,2.99,2.29,6.52,2.29h31.05c4.14,0,4.83-.15,5.98-2.06.38-.15,1.23-.07,1.38.22-.84,3.02-1.38,9-1.15,11.21-.31.59-1.61.59-1.99.15-.23-1.84-.77-4.57-1.92-5.38-1.76-1.25-4.68-1.84-8.89-1.84h-5.44c-2.3,0-2.22.07-2.22,2.51v32.81Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M609.53,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.05-.07,10.15-.22c.49.22.66,1.55.17,1.84l-2.05.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.05.22c.49.29.33,1.62-.17,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.65-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M646.2,163.57c-7.31,0-11.92-1.92-13.57-2.73-1.04-1.62-2.18-6.86-2.35-10.32.44-.52,1.74-.66,2.09-.22,1.31,3.76,4.87,10.98,14.96,10.98,7.31,0,10.87-4.05,10.87-8.48,0-3.24-.78-6.86-7.13-10.32l-8.26-4.57c-4.35-2.43-9.4-6.64-9.4-12.68,0-7,6.44-12.68,17.75-12.68,2.7,0,5.83.44,8.09.96,1.13.29,2.35.44,3.04.44.78,1.77,1.57,5.9,1.57,9-.35.44-1.74.66-2.18.22-1.13-3.54-3.48-8.33-11.83-8.33s-10.35,4.79-10.35,8.18c0,4.28,4.18,7.38,7.39,9.07l6.96,3.69c5.48,2.88,10.88,7.15,10.88,14.16,0,8.11-7.22,13.64-18.53,13.64Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M689.99,138.78c-3.81,0-3.96.15-3.96,2.36v10.4c0,7.74.4,8.77,4.84,9.22l2.3.22c.48.29.32,1.62-.16,1.84-4.28-.15-6.98-.22-10.08-.22-3.41,0-6.11.15-9.2.22-.47-.22-.63-1.4-.16-1.84l1.35-.22c4.45-.74,4.6-1.48,4.6-9.22v-26.54c0-7.74-.55-8.99-4.68-9.29l-2.06-.15c-.48-.29-.32-1.62.16-1.84,3.89.07,6.58.22,10,.22,3.1,0,5.79-.07,9.2-.22.48.22.63,1.55.16,1.84l-1.51.15c-4.6.44-4.76,1.55-4.76,9.29v8.48c0,2.28.16,2.36,3.96,2.36h22.69c3.81,0,3.97-.07,3.97-2.36v-8.48c0-7.74-.16-8.85-4.84-9.29l-1.51-.15c-.48-.29-.32-1.62.16-1.84,3.65.15,6.35.22,9.6.22s5.79-.07,9.36-.22c.48.22.63,1.55.16,1.84l-1.66.15c-4.6.44-4.76,1.55-4.76,9.29v26.54c0,7.74.16,8.7,4.76,9.22l1.9.22c.47.29.32,1.62-.16,1.84-3.81-.15-6.51-.22-9.6-.22-3.25,0-6.11.07-9.6.22-.48-.22-.63-1.4-.16-1.84l1.51-.22c4.84-.74,4.84-1.48,4.84-9.22v-10.4c0-2.21-.16-2.36-3.97-2.36h-22.69Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M378.06,179.01c6.52-5.07,14.83-7.57,24.12-7.57,4.82,0,11.61.98,15.81,2.14,1.07.27,1.7.45,2.5.36.09,2.05.54,7.65,1.25,13.09-.45.62-1.79.71-2.41.18-1.34-6.05-5.36-13-18.31-13-13.67,0-25.28,8.64-25.28,27.06s11.88,29.02,26.53,29.02c11.52,0,16.62-7.48,18.67-12.73.63-.44,1.97-.27,2.32.36-.62,4.63-2.95,10.5-4.29,12.2-1.07.18-2.14.53-3.13.89-1.97.71-8.4,2.05-14.11,2.05-8.04,0-15.72-1.6-22.24-5.96-7.15-4.9-12.69-12.99-12.69-24.48,0-9.88,4.47-18.34,11.26-23.59Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M426.92,207.81c0-14.75,11.61-26.03,27.56-26.03,17.88,0,26.86,12.31,26.86,25.29,0,14.89-11.92,25.73-26.86,25.73-17.19,0-27.56-11.72-27.56-25ZM473.6,209.35c0-12.17-5.65-25.29-20.44-25.29-8.05,0-18.5,5.24-18.5,21.38,0,10.91,5.57,25.07,20.82,25.07,9.29,0,18.12-6.64,18.12-21.16Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M568.68,201.47c0-4.57-.16-13.05-1.49-15.26-.55-.89-1.95-1.4-3.91-1.55l-1.95-.15c-.47-.52-.31-1.47.15-1.77,2.97.15,5.86.22,8.91.22,3.28,0,5.39-.08,8.21-.22.62.37.55,1.33.16,1.77l-1.88.15c-1.95.15-3.44.81-3.91,1.77-1.09,2.43-1.09,10.91-1.09,15.04v8.33c0,6.42-1.1,13.2-5.47,17.62-3.36,3.47-9.14,5.38-14.93,5.38-5.39,0-10.79-.96-14.62-4.05-4.14-3.24-6.1-8.63-6.1-17.4v-17.4c0-7.67-.16-8.92-4.69-9.29l-1.96-.15c-.47-.29-.31-1.55.15-1.77,3.91.15,6.57.22,9.69.22s5.78-.08,9.61-.22c.47.22.63,1.47.16,1.77l-1.88.15c-4.53.37-4.69,1.62-4.69,9.29v15.93c0,11.87,3.91,19.69,15.87,19.69,11.33,0,15.63-8.41,15.63-19.61v-8.48Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M659.52,192.26c0-5.51-.35-6.93-4.23-7.22l-2.77-.27c-.31-.28-.48-1.78.09-1.82,4.67-.35,10.54-.59,18.57-.59,5.44,0,10.62.37,14.51,2.08,3.71,1.57,6.56,4.54,6.56,9.31,0,5.36-3.63,8.12-8.81,10.2,0,.75.69.97,1.64,1.12,4.67.74,11.58,4.47,11.58,12.44,0,8.64-7.43,14.45-22.98,14.45-2.5,0-6.74-.22-10.37-.22s-6.74.15-9.93.22c-.52-.22-.69-1.41-.17-1.86l1.55-.22c4.58-.67,4.75-1.49,4.75-9.31v-28.3ZM666.6,202.16c0,2.09.09,2.24,4.49,2.09,8.81-.3,13.56-2.53,13.56-9.53s-6.3-10.05-12.87-10.05c-1.9,0-3.2.15-3.97.45-.87.22-1.21.59-1.21,1.94v15.12ZM666.6,219.44c0,2.68.17,6.48,1.81,8.12,1.64,1.71,4.23,2.08,6.82,2.08,7.69,0,13.56-2.98,13.56-10.43,0-5.88-3.45-12.73-17.19-12.73-4.67,0-5.01.44-5.01,1.94v11.02Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M518.75,160.97l-2.05-.18c-.41-.04-.78-.1-1.13-.15-2.99-.53-4.19-3.2-5.6-5.67l-7.08-12.32c-1.22-2.05-2.53-4.82-5.33-5.21,7.25-.87,13.81-5.06,13.81-12.24,0-8.3-8.21-12.01-16.52-12.01-4.98,0-9.52.13-14.59.13-2.79,0-6.12-.13-8.92-.13-1.55,0-1.57.32-1.57,1.18,0,1.28.54.92,2.19,1.02,5.9.33,5.68,1.43,5.68,6.49v32.31c0,4.62.4,6-4.46,6.44,0,0-.74.08-1.17.12l-2.06.21c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.12,3.03-.12,2.69-.08,5.38-.28,8.06-.28s5.29.21,7.95.29h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.07-.2c-.42-.05-1.15-.11-1.15-.11-4.9-.33-4.6-1.71-4.6-6.46v-12.17c0-.71-.09-2.61.44-3.16.44-.48,1.22-.4,1.92-.4,6.64,0,6.55.63,9.7,6.16l8.56,15.4c.7,1.19,1.22,2.69,2.97,2.69h7.44c.94.03,1.92.06,3.01.1.49-.22.65-1.4.16-1.84ZM488.92,136.74c-1.49,0-4.46.55-4.46-1.42v-14.14c0-5.53.18-6.32,6.82-6.32,7.78,0,12.58,3.95,12.58,11.22,0,3.16-1.14,6.08-4.02,8.06-3.32,2.29-6.9,2.61-10.92,2.61Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M490.53,194.2c0-7.74-.16-8.92-5.27-9.29l-2.03-.15c-.49-.3-.32-1.62.16-1.84,4.54.15,7.3.22,10.54.22s5.92-.07,9.98-.22c.49.22.65,1.55.16,1.84l-1.95.15c-4.78.37-4.95,1.55-4.95,9.29v25.66c0,4.64.24,6.56,1.7,7.96.89.81,2.43,1.7,8.84,1.7,6.89,0,8.6-.3,9.9-.96,1.62-.89,3.73-3.54,5.35-7.3.49-.37,2.03-.07,2.03.44,0,.81-2.27,8.33-3.41,10.32-4.13-.15-11.84-.22-20.2-.22h-7.46c-3.41,0-6,.07-10.54.22-.49-.22-.65-1.4-.16-1.84l2.43-.22c4.7-.44,4.87-1.48,4.87-9.22v-26.54Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M707.79,194.34c0-7.81-.16-9.07-4.86-9.44l-1.99-.15c-.48-.3-.32-1.62.16-1.84,3.98.15,6.69.22,10.03.22s5.89-.07,9.87-.22c.48.22.64,1.55.16,1.84l-1.99.15c-4.7.37-4.86,1.62-4.86,9.44v26.25c0,7.82.16,8.85,4.86,9.36l1.99.22c.48.3.32,1.62-.16,1.84-3.98-.15-6.69-.22-9.87-.22-3.35,0-6.05.07-10.03.22-.48-.22-.64-1.4-.16-1.84l1.99-.22c4.7-.52,4.86-1.55,4.86-9.36v-26.25Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M644.16,229.94c-.41-.04-1.17-.1-1.17-.1-.84-.08-1.59-.2-2.19-.86-1.03-1.1-.95-4.23-.95-5.48v-32.31c0-1.41-.34-4.46.69-5.56.52-.58,1.59-.67,2.55-.73h0c.58-.05.6-.05,1.11-.07l2.05-.15c.49-.3.33-1.62-.16-1.84-1.09.04-2.09.02-3.03.05h0s-8.7,0-8.7,0c-.95,0-1.81,0-2.32,1.02l-17.73,36.92-15.66-35.67c-.52-1.25-.6-2.27-2.24-2.27h-9.05c-.94-.03-1.98-.02-3.08-.06-.49.22-.66,1.55-.16,1.84l2.05.15c.42.03,1.19.09,1.19.09,3.4.22,3.61.98,3.3,4.55l-2.67,34.65c-.23,3.48-.42,5.32-4.07,5.66,0,0-.77.1-1.19.14l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,3-.1,3-.1,1.85-.09,3.73-.25,5.61-.25,2.03,0,4.06.19,6.1.27h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.04-.22c-.54-.04-1.14-.1-1.14-.1-5.26-.36-5.14-4.07-4.81-8.62l2.5-32.23h.6l16.95,39.66c.17.55.43,1.49,1.29,1.49.78,0,1.03-.86,1.29-1.41l19.1-40.68h.6v35.44c0,1.41.17,4.3-1.29,5.4-.76.57-3.25.91-3.25.91-.34.05-.7.1-1.11.15l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,2.99-.1,2.99-.1,2.77-.08,5.59-.28,8.41-.28,2.03,0,6,.19,6,.19.95.03,2.02.13,3.12.17.49-.22.66-1.4.16-1.84l-2.05-.22Z", className: "bcds-bc-logo--blueFill" }), jsxRuntime.jsx("path", { d: "M777.13,230.14l-.28-.22c-.41-.04-.77-.09-1.11-.15-3.19-.71-4.43-4.55-5.61-7.29l-16.41-38.83c-.16-.47-.49-1.47-1.14-1.47-.89,0-1.14,1.08-1.38,1.7l-15.68,38.76c-.57,1.47-2.03,5.03-3.09,6.11-.81.83-1.86.99-2.99,1.1,0,0-.88.08-1.31.13l-1.93.2c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.11,3.03-.11,2.14-.03,4.29-.3,6.44-.3,1.81,0,3.61.19,5.41.27,0,0,1.94.07,3.03.11.49-.22.65-1.4.16-1.84l-2.05-.22c-.41-.04-1.11-.11-1.11-.11-1.89-.21-4.24-.55-4.24-2.62,0-1.39.65-3.02,1.14-4.25l2.44-5.8c1.22-2.78.73-3.1,3.98-3.1h11.05c3.9,0,3.33,0,5.04,3.95l2.6,5.88c.41,1.01,1.14,2.71,1.14,3.79,0,1.94-2.12,2.07-4.11,2.24,0,0-.66.06-1.23.1l-1.97.14c-.49.44-.33,1.62.17,1.84,1.09-.04,3.03-.12,3.03-.12,2.31-.08,4.64-.26,6.87-.26,2.85,0,5.69.19,8.54.27h0c.93.03.14.06,1.22.1.49-.22.65-1.4.16-1.84ZM755.64,211.89h-9.57c-.33,0-3,.31-3-.47,0-.24.17-.7.25-.94l5.75-14.23c.17-.39.75-2.35,1.41-2.35.5,0,1.17,2.03,1.33,2.35l5.66,13.29c0,.16.58,1.41.58,1.72,0,.86-1.91.62-2.41.62Z", className: "bcds-bc-logo--blueFill" })] }), jsxRuntime.jsx("rect", { width: "847.65", height: "327.01", className: "bcds-bc-logo--noFill" })] }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("polygon", { points: "295.89 176.17 301.27 178.4 313.19 170.08 295.89 176.17", className: "bcds-bc-logo--goldFill" }), jsxRuntime.jsx("path", { d: "M95.46,166.88l-14.14-4.97.71-1.73,15.92,5.31.07-.04,2.1-1.19.84-.53-17.36-7.39.73-1.82,38.75,15.67,1.28-.53-38.44-18.73.86-1.76,40.73,18.96.56-.29-39.49-22.4.81-1.68,57.03,31.03c.47-.86,1.44-2.44,1.95-3.28-21.68-20.39-42.61-35.69-42.61-35.69,0,0,21.52,14.41,48.07,27.81.88-1.09,1.6-1.97,2.53-3.01l-48.65-42.83,1.31-1.34,39.27,33.47-36.38-36.43,1.36-1.41,40.84,39.47-38.02-42.2,1.45-1.31,35.14,37.63-32.07-40.41,1.38-1.26,41.11,50.03c1.06-.92,1.95-1.61,3.06-2.46-12.44-26.91-26.02-48.8-26.02-48.8,0,0,14.46,21.28,33.96,43.56,1.19-.67,2.4-1.31,3.63-1.92l-.21-.13-28.81-57.5,1.71-.75,23.87,45.74-20.08-47.41,1.79-.8,23.08,51.9-19.45-53.37,1.84-.67,18.49,48.05-14.6-49.49,1.75-.65,19.22,61.38-.04.16.05-.02c1.28-.43,2.58-.81,3.89-1.16-1.46-29.48-5.82-54.7-5.82-54.7,0,0,5.4,25,15.08,52.87,1.35-.17,2.71-.31,4.07-.4l-.04-.06h.17l-.1-.14-5.17-64.11,1.87-.06,5,51.35-.86-51.48,1.96-.07,1.96,56.77,1.96-56.77,1.96.07-.86,51.48,5-51.35,1.87.06-5.17,64.11-.1.14h.03v.02s.07,0,.07,0c1.34.08,2.66.22,3.98.38,9.67-27.84,15.06-52.8,15.06-52.8,0,0-4.35,25.14-5.82,54.57,1.32.35,2.63.73,3.91,1.15l19.15-61.16,1.76.65-14.6,49.48,18.49-48.05,1.84.67-19.45,53.37,23.08-51.9,1.79.8-20.08,47.41,23.87-45.74,1.71.75-28.71,57.3.05.02c1.18.58,2.34,1.19,3.49,1.83,19.42-22.21,33.79-43.37,33.79-43.37,0,0-13.49,21.74-25.89,48.52,1.11.84,2.19,1.7,3.24,2.6l40.63-49.49,1.39,1.26-32.08,40.41,35.14-37.63,1.45,1.31-38.02,42.2,40.84-39.47,1.36,1.41-36.38,36.43,39.27-33.47,1.31,1.34-48.06,42.35.03.03c.84.94,1.65,1.9,2.44,2.88,26.39-13.34,47.71-27.62,47.71-27.62,0,0-20.72,15.16-42.29,35.4.59.99,1.55,2.67,2.09,3.69l56.22-30.61.81,1.69-44.88,25.45,46.68-21.72.86,1.76-43.48,21.19.83.29,44.24-17.89.74,1.82-41.12,17.49.77.32,27.4-9.13,4.13-2.88,1.37,1.05,9.02-3.01.71,1.73-7.8,2.75,11.27,8.6,3.61,2.01c-14.49-60.58-68.98-105.62-134-105.62s-121.42,46.63-134.73,108.82c.17-.08.34-.16.51-.24l1.65-.75,1.01-.47,19.01-10.66Z", className: "bcds-bc-logo--goldFill" })] }), jsxRuntime.jsx("path", { d: "M72.5,233.02s20.32-4.06,37.29-4.06c44.7,0,106.54,25.17,151.41,25.17,32.91,0,65.02-9.03,82.51-22.19,1.37-7.79,2.08-15.8,2.08-23.98,0-11.08-1.32-21.85-3.79-32.17l-18.7-10.43-21.95,15.39-14.76-5.75c-5,2.53-35.83,23.15-35.83,23.15l-11.84-8.57-12.7-2.51-16.93-12.33-19.42,13.33s-21.67,12.58-22.41,12.58-26.14-20.13-26.14-20.13l-11.7-12.33c-1.99,1.26-9.95,4.91-9.95,4.91l-.41.11-7.7-2.38-9.35-4.96-28.41,12.88c-.17.08-.34.16-.51.24-2,9.34-3.06,19.03-3.06,28.96,0,8.56.79,16.93,2.28,25.06Z", className: "bcds-bc-logo--blueFill" })] })] }));
|
|
29194
30426
|
}
|
|
29195
30427
|
|
|
29196
|
-
var css_248z$
|
|
29197
|
-
styleInject(css_248z$
|
|
30428
|
+
var css_248z$n = ".bcds-footer {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n width: 100%;\n}\n\n.bcds-footer > .bcds-footer--acknowledgement {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n border-top: var(--layout-border-width-large) solid var(--theme-gold-60);\n border-bottom: var(--layout-border-width-large) solid var(--theme-gold-60);\n background-color: var(--theme-gray-110);\n padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n > .bcds-footer--acknowledgement\n > .bcds-footer--acknowledgement-text {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: stretch;\n color: var(--typography-color-primary-invert);\n font: var(--typography-regular-small-body);\n max-width: 1100px;\n width: 100%;\n}\n\n.bcds-footer\n > .bcds-footer--acknowledgement\n > .bcds-footer--acknowledgement-text\n > p {\n margin: var(--layout-margin-none);\n}\n\n.bcds-footer > .bcds-footer--container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-around;\n background-color: var(--surface-color-background-light-gray);\n padding: var(--layout-padding-xlarge);\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n display: flex;\n flex-direction: column;\n align-items: stretch;\n gap: var(--layout-padding-xlarge);\n max-width: 1100px;\n width: 100%;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links {\n display: flex;\n flex-direction: row;\n flex-wrap: nowrap;\n align-items: flex-start;\n column-gap: var(--layout-padding-xlarge);\n row-gap: var(--layout-padding-medium);\n justify-content: space-between;\n width: 100%;\n}\n\n/* `horizontal` class is the default, when no `children` prop is passed */\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.horizontal {\n flex-direction: row;\n}\n\n/* `vertical` class is used when a `children` prop is passed */\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.vertical {\n flex-direction: column;\n align-items: stretch;\n row-gap: var(--layout-padding-xlarge);\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo {\n display: flex;\n flex-direction: column;\n gap: var(--layout-padding-large);\n min-width: 324px;\n width: 576px;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo\n > #bcgov-logo-footer {\n width: 146px;\n min-width: 146px;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo\n > p {\n font: var(--typography-regular-small-body);\n margin: var(--layout-margin-none);\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo\n > p\n > a {\n color: var(--typography-color-secondary);\n font: var(--typography-regular-small-body);\n text-decoration: underline;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo\n > p\n > a:hover {\n text-decoration: none;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links {\n margin: var(--layout-margin-none);\n}\n\n/*\n When Footer hasn't been passed `children`, expand the links container to take\n up 320px, as the default links are narrower.\n*/\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.horizontal\n > .bcds-footer--links {\n min-width: 320px;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > .bcds-footer--links-title {\n display: block;\n font: var(--typography-bold-small-body);\n margin-bottom: var(--layout-padding-medium);\n text-transform: uppercase;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > ul {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n grid-template-rows: auto;\n grid-column-gap: var(--layout-padding-xlarge);\n grid-row-gap: var(--layout-padding-small);\n list-style: none;\n margin: var(--layout-margin-none);\n padding: var(--layout-padding-none);\n}\n\n/*\n When a Footer has been passed `children`, the logo-links container fills the\n full width of the container, so there's room for 4 columns of links.\n*/\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.vertical\n > .bcds-footer--links\n > ul {\n grid-template-columns: repeat(4, 1fr);\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > ul\n > li {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > ul\n > li\n > a {\n color: var(--typography-color-primary);\n text-decoration: none;\n}\n\n.bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--links\n > ul\n > li\n > a:hover {\n text-decoration: underline;\n}\n\n.bcds-footer > .bcds-footer--container > .bcds-footer--container-content > hr {\n background-color: var(--surface-color-border-dark);\n border: var(--layout-border-width-none);\n height: var(--layout-border-width-small);\n margin: var(--layout-margin-none);\n width: 100%;\n}\n\np.bcds-footer--copyright {\n color: var(--typography-color-secondary);\n font: var(--typography-regular-body);\n margin: var(--layout-margin-none);\n}\n\n/* Tablet */\n@media (max-width: 991px) {\n /* Links drop beneath logo in the default configuration */\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links {\n flex-wrap: wrap;\n }\n\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo {\n max-width: 324px;\n }\n\n /*\n When the `children` prop is used with multiple FooterLinks components,\n only two columns of links appear on screen at once.\n */\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.vertical\n > .bcds-footer--links\n > ul {\n grid-template-columns: repeat(2, 1fr);\n }\n}\n\n/* Extra small screens */\n@media (max-width: 575px) {\n .bcds-footer > .bcds-footer--acknowledgement {\n padding: var(--layout-padding-xlarge) var(--layout-padding-medium);\n }\n\n .bcds-footer > .bcds-footer--container {\n padding: var(--layout-padding-medium);\n }\n\n .bcds-footer > .bcds-footer--container > .bcds-footer--container-content {\n gap: var(--layout-padding-medium);\n }\n\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links\n > .bcds-footer--logo {\n gap: var(--layout-padding-medium);\n }\n\n /*\n When the `children` prop is used with multiple FooterLinks components,\n only one column of links appear on screen at once.\n */\n .bcds-footer\n > .bcds-footer--container\n > .bcds-footer--container-content\n > .bcds-footer--logo-links.vertical\n > .bcds-footer--links\n > ul {\n grid-template-columns: repeat(1, 1fr);\n }\n}\n";
|
|
30429
|
+
styleInject(css_248z$n);
|
|
29198
30430
|
|
|
29199
30431
|
/**
|
|
29200
30432
|
* A titled list of links for use in the Footer. Rendered inside a `<figure>`
|
|
@@ -29248,8 +30480,8 @@ function Form({ ...props }) {
|
|
|
29248
30480
|
return jsxRuntime.jsx($cdaed739b1139372$export$a7fed597f4b8afd8, { ...props });
|
|
29249
30481
|
}
|
|
29250
30482
|
|
|
29251
|
-
var css_248z$
|
|
29252
|
-
styleInject(css_248z$
|
|
30483
|
+
var css_248z$m = ".bcds-header {\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-around;\n background-color: var(--surface-color-forms-default);\n border-bottom-color: var(--surface-color-border-default);\n border-bottom-style: solid;\n border-bottom-width: var(--layout-border-width-small);\n min-height: 65px;\n padding: var(--layout-padding-none) var(--layout-padding-medium);\n width: 100%;\n}\n\n.bcds-header > .bcds-header--container {\n flex-grow: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-padding-medium);\n max-width: 1100px;\n}\n\n.bcds-header > .bcds-header--container > .bcds-header--title {\n flex-grow: 1;\n font: var(--typography-bold-h4);\n color: var(--typography-color-primary);\n}\n\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks {\n list-style: none;\n margin: 0;\n padding: 0;\n position: absolute;\n}\n\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a,\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li button {\n background-color: var(--surface-color-forms-default);\n box-sizing: border-box;\n color: var(--typography-color-link);\n font: var(--typography-regular-body);\n margin-top: -17.5px; /* Center the link visually in a single line-height header */\n padding: var(--layout-padding-xsmall) var(--layout-padding-medium);\n position: absolute;\n margin-left: -100000px;\n}\n\n.bcds-header > .bcds-header--container > ul.bcds-header--skiplinks li a:focus,\n.bcds-header\n > .bcds-header--container\n > ul.bcds-header--skiplinks\n li\n button:focus {\n margin-left: 0; /* Line up left edge with left edge of logo image */\n text-wrap: nowrap;\n}\n\n.bcds-header > .bcds-header--container > .bcds-header--line {\n background-color: var(--surface-color-border-default);\n width: 1px;\n height: 32px;\n}\n\n.bcds-header > .bcds-header--container svg#bcgov-logo-header {\n min-width: 129px;\n width: 129px;\n}\n";
|
|
30484
|
+
styleInject(css_248z$m);
|
|
29253
30485
|
|
|
29254
30486
|
function Header({ children, logoLinkElement, logoImage = jsxRuntime.jsx(SvgBcLogo, { id: "bcgov-logo-header" }), skipLinks, title = "", titleElement = "span", }) {
|
|
29255
30487
|
function getLogo() {
|
|
@@ -29287,8 +30519,8 @@ function Header({ children, logoLinkElement, logoImage = jsxRuntime.jsx(SvgBcLog
|
|
|
29287
30519
|
}) })), title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "bcds-header--line" }), getTitle()] })), children] }) }));
|
|
29288
30520
|
}
|
|
29289
30521
|
|
|
29290
|
-
var css_248z$
|
|
29291
|
-
styleInject(css_248z$
|
|
30522
|
+
var css_248z$l = ".bcds-Inline-Alert {\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n gap: var(--layout-margin-small);\n padding: var(--layout-padding-medium) var(--layout-padding-large);\n}\n\n/* Alert content */\n.bcds-Inline-Alert--container {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n\n.bcds-Inline-Alert--container > .title {\n font: var(--typography-bold-body);\n color: var(--typography-color-primary);\n}\n\n.bcds-Inline-Alert--container > .description {\n font: var(--typography-regular-body);\n color: var(--typography-color-primary);\n}\n\n/* Left icon */\n.bcds-Inline-Alert--icon {\n display: inline-flex;\n align-self: flex-start;\n padding-top: var(--layout-padding-xsmall);\n}\n\n.bcds-Inline-Alert--icon > svg {\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n\n/* Closeable */\n.bcds-Inline-Alert.closeable {\n /*\n Because the close icon button is removed from the document flow, we\n manually adjust the padding to push the `--container` element off the right\n edge of the InlineAlert.\n */\n padding: var(--layout-padding-medium) 52px var(--layout-padding-medium)\n var(--layout-padding-large);\n}\n\n.bcds-Inline-Alert--closeIcon {\n align-self: first baseline;\n color: var(--icons-color-primary);\n position: relative;\n}\n\n.bcds-Inline-Alert--closeIcon > button {\n position: absolute;\n /*\n Centers the button vertically.\n Button height (32px) minus line-height of text (27px) divided by 2.\n */\n top: -2.5px;\n}\n\n.bcds-Inline-Alert--closeIcon > svg {\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n\n/* Info variant */\n.bcds-Inline-Alert.info {\n background-color: var(--support-surface-color-info);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-info);\n border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Inline-Alert.info > .bcds-Inline-Alert--icon {\n color: var(--icons-color-info);\n}\n\n/* Success variant */\n.bcds-Inline-Alert.success {\n background-color: var(--support-surface-color-success);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-success);\n border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Inline-Alert.success > .bcds-Inline-Alert--icon {\n color: var(--icons-color-success);\n}\n\n/* Warning variant */\n.bcds-Inline-Alert.warning {\n background-color: var(--support-surface-color-warning);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-warning);\n border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Inline-Alert.warning > .bcds-Inline-Alert--icon {\n color: var(--icons-color-warning);\n}\n\n/* Danger variant */\n.bcds-Inline-Alert.danger {\n background-color: var(--support-surface-color-danger);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n border-radius: var(--layout-border-radius-medium);\n}\n\n.bcds-Inline-Alert.danger > .bcds-Inline-Alert--icon {\n color: var(--icons-color-danger);\n}\n\n/* Button group */\n.bcds-Inline-Alert--container > .bcds-ButtonGroup {\n padding-top: var(--layout-padding-small);\n}\n";
|
|
30523
|
+
styleInject(css_248z$l);
|
|
29292
30524
|
|
|
29293
30525
|
function getIcon(variant) {
|
|
29294
30526
|
switch (variant) {
|
|
@@ -29308,8 +30540,8 @@ function InlineAlert({ variant = "info", title, description, isIconHidden = fals
|
|
|
29308
30540
|
return (jsxRuntime.jsxs("div", { className: `bcds-Inline-Alert ${variant} ${isCloseable ? "closeable" : null}`, ...props, children: [!isIconHidden && (jsxRuntime.jsx("span", { className: "bcds-Inline-Alert--icon", children: customIcon ? customIcon : getIcon(variant) })), jsxRuntime.jsx("div", { className: "bcds-Inline-Alert--container", role: role, "aria-labelledby": "alert-title", children: children ? (children) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && (jsxRuntime.jsx("span", { className: "title", id: "alert-title", children: title })), description && jsxRuntime.jsx("span", { className: "description", children: description }), buttons && (jsxRuntime.jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }), isCloseable && (jsxRuntime.jsx("span", { className: "bcds-Inline-Alert--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }));
|
|
29309
30541
|
}
|
|
29310
30542
|
|
|
29311
|
-
var css_248z$
|
|
29312
|
-
styleInject(css_248z$
|
|
30543
|
+
var css_248z$k = ".bcds-react-aria-Link {\n color: var(--typography-color-link);\n text-decoration: underline;\n text-underline-offset: var(--layout-padding-hair);\n cursor: pointer;\n}\n\n/* Icon slots */\n.bcds-react-aria-Link--Icon {\n display: inline-flex;\n flex-direction: row;\n vertical-align: text-bottom;\n margin: var(--layout-margin-none) var(--layout-margin-xsmall);\n}\n\n/* Sizing */\n.bcds-react-aria-Link.small {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-Link.medium {\n font: var(--typography-regular-body);\n}\n\n.bcds-react-aria-Link.large {\n font: var(--typography-regular-large-body);\n}\n\n/* Placeholder large button style */\n.bcds-react-aria-Button.large {\n min-height: 40px;\n}\n\n/* Hover */\n.bcds-react-aria-Link[data-hovered] {\n color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-Link[data-hovered].danger {\n color: var(--surface-color-primary-danger-button-hover);\n}\n\n/* Selected */\n.bcds-react-aria-Link[data-current] {\n color: var(--surface-color-border-active);\n}\n\n/* Focus */\n.bcds-react-aria-Link[data-focus-visible] {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n border-radius: var(--layout-border-radius-small);\n}\n\n/* Disabled */\n.bcds-react-aria-Link[data-disabled],\n.bcds-react-aria-Link[data-disabled].danger {\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n\n/* Danger */\n.bcds-react-aria-Link.danger {\n color: var(--typography-color-danger);\n}\n";
|
|
30544
|
+
styleInject(css_248z$k);
|
|
29313
30545
|
|
|
29314
30546
|
function Link({ children, size = "medium", danger = false, isButton = false, buttonVariant = "primary", isUnstyled = false, iconLeft, iconRight, ariaLabel, ...props }) {
|
|
29315
30547
|
return (jsxRuntime.jsxs($984a1fc08f87e4f3$export$a6c7ac8248d6e38a, { className: !isUnstyled
|
|
@@ -29319,6 +30551,40 @@ function Link({ children, size = "medium", danger = false, isButton = false, but
|
|
|
29319
30551
|
: undefined, "aria-label": ariaLabel, ...props, children: [iconLeft && (jsxRuntime.jsx("span", { className: "bcds-react-aria-Link--Icon", children: iconLeft })), children, iconRight && (jsxRuntime.jsx("span", { className: "bcds-react-aria-Link--Icon", children: iconRight }))] }));
|
|
29320
30552
|
}
|
|
29321
30553
|
|
|
30554
|
+
var css_248z$j = ".bcds-react-aria-MenuItem {\n display: flex;\n gap: var(--layout-margin-xsmall);\n padding: var(--layout-padding-small);\n cursor: pointer;\n color: var(--typography-color-secondary);\n}\n.bcds-react-aria-MenuItem--Icon {\n display: flex;\n align-self: flex-start;\n padding-top: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-MenuItem--Content {\n display: flex;\n flex-direction: column;\n gap: var(--layout-padding-hair);\n}\n\n/* Sizing */\n.bcds-react-aria-MenuItem.small {\n font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-MenuItem.small\n > .bcds-react-aria-MenuItem--Content\n > *[slot=\"description\"] {\n font: var(--typography-regular-label);\n}\n.bcds-react-aria-MenuItem.medium {\n font: var(--typography-regular-body);\n}\n.bcds-react-aria-MenuItem.medium\n > .bcds-react-aria-MenuItem--Content\n > *[slot=\"description\"] {\n font: var(--typography-regular-small-body);\n}\n\n/* Link styling */\na.bcds-react-aria-MenuItem {\n text-decoration: none;\n}\na.bcds-react-aria-MenuItem\n > .bcds-react-aria-MenuItem--Content\n > *[slot=\"label\"] {\n color: var(--typography-color-link);\n text-decoration: underline var(--typography-color-link);\n text-underline-offset: var(--layout-margin-hair);\n}\na.bcds-react-aria-MenuItem\n > .bcds-react-aria-MenuItem--Content\n > *[slot=\"description\"] {\n color: var(--typography-color-secondary);\n text-decoration: none;\n}\na.bcds-react-aria-MenuItem[data-disabled]\n > .bcds-react-aria-MenuItem--Content\n > *[slot=\"label\"] {\n color: var(--typography-color-disabled);\n text-decoration: none;\n}\na.bcds-react-aria-MenuItem[data-disabled]\n > .bcds-react-aria-MenuItem--Content\n > *[slot=\"description\"] {\n color: var(--typography-color-disabled);\n}\n\n/* Icon displayed when an item has a submenu */\n.bcds-react-aria-MenuItem > svg {\n width: var(--icons-size-xsmall);\n height: var(--icons-size-xsmall);\n padding: var(--layout-padding-hair);\n align-self: center;\n}\n\n/* States */\n.bcds-react-aria-MenuItem[data-focused],\n.bcds-react-aria-MenuItem[data-hovered],\n.bcds-react-aria-MenuItem[data-hovered][data-focused] {\n border-radius: var(--layout-border-radius-small);\n background-color: var(--surface-color-menus-hover);\n outline: none;\n}\n\n.bcds-react-aria-MenuItem[data-disabled] {\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
30555
|
+
styleInject(css_248z$j);
|
|
30556
|
+
|
|
30557
|
+
function MenuItem({ size = "medium", label, description, iconLeft, ...props }) {
|
|
30558
|
+
/* Ensure textValue is set */
|
|
30559
|
+
const textValue = props.textValue ||
|
|
30560
|
+
(typeof props.children === "string" ? props.children : undefined) ||
|
|
30561
|
+
label;
|
|
30562
|
+
return (jsxRuntime.jsx($49319ee1285aa241$export$2ce376c2cc3355c8, { ...props, textValue: textValue, className: `bcds-react-aria-MenuItem ${size}`, children: (renderProps) => {
|
|
30563
|
+
if (typeof props.children === "function") {
|
|
30564
|
+
return props.children(renderProps);
|
|
30565
|
+
}
|
|
30566
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [iconLeft && (jsxRuntime.jsx("span", { className: "bcds-react-aria-MenuItem--Icon", children: iconLeft })), props.children, (label || description) && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-MenuItem--Content", children: [label && jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "label", children: label }), description && jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", children: description })] })), renderProps.hasSubmenu && jsxRuntime.jsx(SvgChevronRightIcon, {}), renderProps.isSelected && jsxRuntime.jsx(SvgCheckIcon, {})] }));
|
|
30567
|
+
} }));
|
|
30568
|
+
}
|
|
30569
|
+
|
|
30570
|
+
var css_248z$i = ".bcds-react-aria-Menu {\n box-sizing: border-box;\n overflow-y: auto;\n max-height: inherit;\n padding: var(--layout-padding-xsmall);\n}\n\n/* Sizing */\n.bcds-react-aria-Menu.small {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-Menu.medium {\n font: var(--typography-regular-body);\n}\n\n/* Sections */\n.bcds-react-aria-Menu .react-aria-Header {\n padding: var(--layout-padding-small);\n font: var(--typography-bold-small-body);\n}\n.bcds-react-aria-Menu .react-aria-MenuSection {\n display: flex;\n flex-direction: column;\n gap: var(--layout-margin-small);\n}\n\n/* States */\n.bcds-react-aria-Menu[data-focused] {\n outline: none;\n}\n\n/* Popover */\n.bcds-react-aria-Popover {\n background-color: var(--surface-color-forms-default);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n box-shadow: var(--surface-shadow-medium);\n box-sizing: border-box;\n overflow: hidden;\n min-width: var(\n --trigger-width\n ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */\n}\n";
|
|
30571
|
+
styleInject(css_248z$i);
|
|
30572
|
+
|
|
30573
|
+
function Menu({ itemSize = "medium", children, items, sections, placement, ...props }) {
|
|
30574
|
+
/* Manual composition via children */
|
|
30575
|
+
if (children) {
|
|
30576
|
+
return (jsxRuntime.jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Popover", placement: placement, children: jsxRuntime.jsx($49319ee1285aa241$export$d9b273488cd8ce6f, { className: `bcds-react-aria-Menu ${itemSize}`, items: items, ...props, children: children }) }));
|
|
30577
|
+
}
|
|
30578
|
+
/* Dynamic collection via items/sections props */
|
|
30579
|
+
const sectionsArray = sections?.length
|
|
30580
|
+
? sections
|
|
30581
|
+
: [{ id: "section", header: "", items: items ? [...items] : [] }];
|
|
30582
|
+
const lastSectionId = sectionsArray.length > 0
|
|
30583
|
+
? sectionsArray[sectionsArray.length - 1].id
|
|
30584
|
+
: undefined;
|
|
30585
|
+
return (jsxRuntime.jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Popover", placement: placement, children: jsxRuntime.jsx($49319ee1285aa241$export$d9b273488cd8ce6f, { className: `bcds-react-aria-Menu ${itemSize}`, ...props, items: sectionsArray, children: (section) => (jsxRuntime.jsxs($49319ee1285aa241$export$4b1545b4f2016d26, { id: section.id, children: [section.header && (jsxRuntime.jsx($53e61d82d8b8611d$export$8b251419efc915eb, { children: section.header })), jsxRuntime.jsx($42ceafc619f9c3ba$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxRuntime.jsx(MenuItem, { ...item, size: itemSize, children: item.children })) }), section.id !== lastSectionId && jsxRuntime.jsx(Separator, { size: "small" })] }, section.id)) }) }));
|
|
30586
|
+
}
|
|
30587
|
+
|
|
29322
30588
|
var css_248z$h = "/* Styles for overlay element */\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal) {\n position: fixed;\n inset: 0;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-overlay-default);\n height: 100vh;\n width: 100vw;\n z-index: 1000;\n}\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-entering] {\n animation: modal-fade 200ms;\n}\n.react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-exiting] {\n animation: modal-fade 150ms reverse ease-in;\n}\n@media (prefers-reduced-motion) {\n /* Don't animate modal fade in/out if prefers-reduced-motion is on */\n .react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-entering] {\n animation: unset;\n }\n .react-aria-ModalOverlay:has(.bcds-react-aria-Modal)[data-exiting] {\n animation: unset;\n }\n}\n\n@keyframes modal-fade {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n/* Styles for content container */\n.bcds-react-aria-Modal {\n box-sizing: border-box;\n max-width: 100vw;\n width: 600px;\n max-height: 100vh;\n min-height: var(--layout-margin-xxxlarge);\n height: auto;\n margin: var(--layout-margin-large);\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n background: var(--surface-color-forms-default);\n box-shadow: var(--surface-shadow-large);\n}\n";
|
|
29323
30589
|
styleInject(css_248z$h);
|
|
29324
30590
|
|
|
@@ -29356,18 +30622,70 @@ function RadioGroup({ orientation = "vertical", label, description, children, er
|
|
|
29356
30622
|
return (jsxRuntime.jsx($fe21c36db05242bb$export$a98f0dcb43a68a25, { className: "bcds-react-aria-RadioGroup", ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$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($efe09c6d1c304b50$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($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
29357
30623
|
}
|
|
29358
30624
|
|
|
29359
|
-
var css_248z$c = ".bcds-react-aria-
|
|
30625
|
+
var css_248z$c = ".bcds-react-aria-TagGroup {\n color: var(--typography-color-primary);\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-TagGroup--Label,\n.bcds-react-aria-TagGroup--Text-description,\n.bcds-react-aria-TagGroup--Text-error {\n display: block;\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TagGroup--Text-error {\n display: flex;\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TagGroup--Text-error > svg {\n padding-right: var(--layout-padding-xsmall);\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
29360
30626
|
styleInject(css_248z$c);
|
|
29361
30627
|
|
|
29362
|
-
|
|
29363
|
-
|
|
29364
|
-
|
|
30628
|
+
function TagGroup({ children, label, description, errorMessage, ...props }) {
|
|
30629
|
+
return (jsxRuntime.jsxs($3df3ddf5bafbc7b1$export$67ea30858aaf75e3, { className: "bcds-react-aria-TagGroup", ...props, children: [label && (jsxRuntime.jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TagGroup--Label", children: label })), children, description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-TagGroup--Text-description", children: description })), errorMessage && (jsxRuntime.jsxs($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "errorMessage", className: "bcds-react-aria-TagGroup--Text-error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), errorMessage] }))] }));
|
|
30630
|
+
}
|
|
30631
|
+
|
|
30632
|
+
var css_248z$b = ".bcds-react-aria-Tag {\n color: var(--typography-color-primary);\n cursor: pointer;\n border: var(--layout-border-width-small) solid;\n display: flex;\n flex: 0 1 auto;\n align-items: center;\n text-align: left;\n font: var(--typography-regular-label);\n width: fit-content;\n max-width: 100%;\n min-width: 0;\n}\n.bcds-react-aria-Tag--Label {\n min-width: 0;\n overflow-wrap: break-word;\n white-space: normal;\n}\n.bcds-react-aria-Tag .react-aria-Button {\n background: none;\n border: none;\n color: var(--typography-color-primary);\n cursor: pointer;\n display: flex;\n flex: 0 0 auto;\n margin: 0;\n padding: 0;\n}\n\n/* Focus handling for close button */\n.bcds-react-aria-Tag .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 border-radius: var(--layout-border-radius-small);\n}\n\n/* Tag colors */\n.bcds-react-aria-Tag.bc-blue {\n background-color: var(--theme-primary-blue);\n border-color: var(--theme-blue-90);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-blue .react-aria-Button {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-gold {\n background-color: var(--theme-primary-gold);\n border-color: var(--theme-blue-90);\n}\n.bcds-react-aria-Tag.blue {\n background-color: var(--support-surface-color-info);\n border-color: var(--support-border-color-info);\n}\n.bcds-react-aria-Tag.dark {\n background: var(--theme-gray-110);\n border-color: var(--theme-blue-90);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.dark .react-aria-Button {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.gray,\n.bcds-react-aria-Tag.grey {\n background-color: var(--theme-gray-20);\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Tag.green {\n background-color: var(--support-surface-color-success);\n border-color: var(--support-border-color-success);\n}\n.bcds-react-aria-Tag.red {\n background-color: var(--support-surface-color-danger);\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Tag.yellow {\n background-color: var(--support-surface-color-warning);\n border-color: var(--support-border-color-warning);\n}\n\n/* Tag style */\n.bcds-react-aria-Tag.rectangular {\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Tag.circular {\n border-radius: var(--layout-borderRadius-Circular, 9999px);\n}\n\n/* Tag size */\n.bcds-react-aria-Tag.xsmall {\n min-height: var(--layout-padding-medium);\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n gap: var(--layout-margin-xsmall);\n}\n.bcds-react-aria-Tag.small {\n min-height: var(--layout-padding-large);\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n gap: var(--layout-margin-small);\n}\n.bcds-react-aria-Tag.medium {\n min-height: var(--layout-padding-xlarge);\n padding: var(--layout-padding-hair) var(--layout-padding-medium);\n gap: var(--layout-margin-medium);\n}\n/* Selected */\n.bcds-react-aria-Tag[data-selected] {\n border-radius: var(--layout-border-radius-small);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-active);\n}\n\n/* Focused */\n.bcds-react-aria-Tag[data-focus-visible] {\n outline: var(--layout-border-width-medium) solid\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Tag[data-disabled] {\n background-color: var(--surface-color-primary-button-disabled);\n border-color: var(--surface-color-border-default);\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
30633
|
+
styleInject(css_248z$b);
|
|
30634
|
+
|
|
30635
|
+
function Tag({ color = "blue", tagStyle = "rectangular", size = "small", icon, id, textValue, ...props }) {
|
|
30636
|
+
return (jsxRuntime.jsx($3df3ddf5bafbc7b1$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color} ${tagStyle} ${size}`, id: id, textValue: textValue, ...props, children: ({ allowsRemoving, isDisabled }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { className: "bcds-react-aria-Tag--Label", children: textValue }), !isDisabled && allowsRemoving && (jsxRuntime.jsx($7705c033048f6da7$export$353f5b6fc5456de1, { "aria-label": `Remove ${textValue}`, slot: "remove", children: jsxRuntime.jsx("svg", { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { id: "Icons / Close", children: jsxRuntime.jsx("path", { id: "Vector", d: "M12.6004 3.03239L11.4684 1.90039L7.00039 6.36839L2.53239 1.90039L1.40039 3.03239L5.86839 7.50039L1.40039 11.9684L2.53239 13.1004L7.00039 8.63239L11.4684 13.1004L12.6004 11.9684L8.13239 7.50039L12.6004 3.03239Z", fill: "currentColor" }) }) }) }))] })) }));
|
|
30637
|
+
}
|
|
30638
|
+
|
|
30639
|
+
var css_248z$a = ".bcds-react-aria-TagList {\n display: flex;\n flex-wrap: wrap;\n gap: var(--layout-padding-small);\n width: fit-content;\n}\n\n.bcds-react-aria-TagList.horizontal {\n flex-direction: row;\n}\n\n.bcds-react-aria-TagList.vertical {\n flex-direction: column;\n}\n";
|
|
30640
|
+
styleInject(css_248z$a);
|
|
30641
|
+
|
|
30642
|
+
function TagList({ items, orientation = "horizontal", renderEmptyState, ...props }) {
|
|
30643
|
+
return (jsxRuntime.jsx($3df3ddf5bafbc7b1$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => $8WNJc$react.createElement(Tag, { ...item, key: item.id }) }));
|
|
30644
|
+
}
|
|
30645
|
+
|
|
30646
|
+
var css_248z$9 = ".bcds-react-aria-Select {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n align-items: stretch;\n min-width: 0;\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/* Scroll mode: single-select text truncation */\n.bcds-react-aria-Select.scroll .bcds-react-aria-SelectValue {\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n}\n\n/* Scroll mode: horizontally scrollable tag overlay.\n overflow-x: auto forces overflow-y to also clip (per CSS spec), which\n would clip tag focus rings. padding-block creates room for the outline\n inside the scroll container's padding box, and matching negative\n margin-block cancels it out so the overlay's outer box stays the same\n size, preserving alignment with wrap mode. */\n.bcds-react-aria-Select.scroll .bcds-react-aria-Select--TagOverlay {\n overflow-x: auto;\n pointer-events: auto;\n scrollbar-width: thin;\n padding-block: calc(\n var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px\n );\n margin-block: calc(\n -1 * (var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px)\n );\n padding-inline: calc(\n var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px\n );\n margin-inline: calc(\n -1 * (var(--layout-border-width-medium) + var(--layout-margin-hair) + 1px)\n );\n}\n\n/* Scroll mode: prevent tag list from wrapping */\n.bcds-react-aria-Select.scroll .bcds-react-aria-TagList {\n flex-wrap: nowrap;\n width: max-content;\n}\n\n/* Scroll mode: prevent tags from shrinking or wrapping */\n.bcds-react-aria-Select.scroll .bcds-react-aria-Tag {\n flex-shrink: 0;\n}\n.bcds-react-aria-Select.scroll .bcds-react-aria-Tag--Label {\n white-space: nowrap;\n}\n\n/* Sizing */\n.bcds-react-aria-Select.small .bcds-react-aria-Select--Button {\n min-height: 32px;\n}\n.bcds-react-aria-Select--ListBox.small .bcds-react-aria-Select--ListBoxItem {\n padding: var(--layout-padding-xsmall);\n}\n.bcds-react-aria-Select.small .bcds-react-aria-SelectValue--Text,\n.bcds-react-aria-Select--ListBox.small\n .bcds-react-aria-Select--ListBoxItem-Text-label {\n font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Select.medium .bcds-react-aria-Select--Button {\n min-height: 40px;\n}\n.bcds-react-aria-Select--ListBox.medium .bcds-react-aria-Select--ListBoxItem {\n padding: var(--layout-padding-small);\n}\n.bcds-react-aria-Select.medium .bcds-react-aria-SelectValue--Text,\n.bcds-react-aria-Select--ListBox.medium\n .bcds-react-aria-Select--ListBoxItem-Text-label {\n font: var(--typography-regular-body);\n}\n\n/* Select input equivalent */\n.bcds-react-aria-Select--Button {\n background-color: var(--surface-color-forms-default);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n box-sizing: border-box;\n display: flex;\n gap: var(--layout-margin-small);\n align-items: center;\n padding: var(--layout-padding-small);\n width: 100%;\n min-width: 0;\n max-width: 100%;\n}\n.bcds-react-aria-Select--Button[data-hovered] {\n border-color: var(--surface-color-border-dark);\n cursor: pointer;\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-focus-visible] {\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 > .bcds-react-aria-SelectValue {\n flex: 1 1 auto;\n overflow: visible;\n white-space: normal;\n text-align: left;\n min-width: 0;\n}\n.bcds-react-aria-Select--Button > svg {\n flex: 0 0 auto;\n}\n\n/* Overlay for tags in multi-select mode */\n.bcds-react-aria-Select--InputContainer {\n display: grid;\n width: 100%;\n min-width: 0;\n}\n.bcds-react-aria-Select--InputContainer > .bcds-react-aria-Select--Button {\n grid-area: 1 / 1;\n align-self: stretch;\n}\n.bcds-react-aria-Select--TagOverlayContainer {\n grid-area: 1 / 1;\n min-width: 0;\n display: flex;\n align-items: center;\n padding: calc(var(--layout-padding-small) - 0.5px);\n padding-right: 2.5rem;\n pointer-events: none;\n}\n.bcds-react-aria-Select--TagOverlay {\n width: 100%;\n min-width: 0;\n pointer-events: none;\n}\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag,\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag [slot=\"remove\"],\n.bcds-react-aria-Select--TagOverlay .bcds-react-aria-Tag button {\n pointer-events: auto;\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/* Dropdown menu panel */\n.bcds-react-aria-Select--Popover {\n background-color: var(--surface-color-forms-default);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n box-shadow: var(--surface-shadow-medium);\n box-sizing: border-box;\n overflow-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: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n margin-top: 1px;\n padding-top: var(--layout-padding-hair);\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}\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: 1 1 auto;\n min-width: 0;\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";
|
|
30647
|
+
styleInject(css_248z$9);
|
|
30648
|
+
|
|
30649
|
+
/** Select displays a collapsible list of options and allows a user to select one or more of them. */
|
|
30650
|
+
function Select({ items, sections, label, description, placeholder, size = "medium", errorMessage, selectionMode, overflow = "wrap", ...props }) {
|
|
30651
|
+
const [tagOverlay, setTagOverlay] = $8WNJc$react.useState(null);
|
|
30652
|
+
return (jsxRuntime.jsx($c8bb816105474884$export$ef9b1a59e592288f, { selectionMode: selectionMode, className: `bcds-react-aria-Select ${size} ${overflow}`, ...props, children: ({ isOpen, isRequired, isInvalid, isDisabled }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-Select--Label", children: isRequired ? `${label} (required)` : label })), selectionMode === "multiple" ? (jsxRuntime.jsxs("div", { className: "bcds-react-aria-Select--InputContainer", children: [jsxRuntime.jsxs(Button, { className: `bcds-react-aria-Select--Button ${size === "medium" ? "medium" : "small"} ${isInvalid ? "invalid" : ""}`, children: [jsxRuntime.jsx($c8bb816105474884$export$e288731fd71264f0, { className: "bcds-react-aria-SelectValue", children: ({ selectedItems, state }) => {
|
|
30653
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [selectedItems.length === 0 && (jsxRuntime.jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: placeholder ? placeholder : "Select an item" })), selectedItems.length > 0 &&
|
|
30654
|
+
tagOverlay &&
|
|
30655
|
+
$3wX5A$reactdom.createPortal(jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--TagOverlay", onPointerDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: jsxRuntime.jsx(TagGroup, { "aria-label": label
|
|
30656
|
+
? `${label} selections`
|
|
30657
|
+
: "Selected options",
|
|
30658
|
+
/* Handle deselection of items via Tag button */
|
|
30659
|
+
onRemove: (keys) => {
|
|
30660
|
+
const selectedKeys = state.selectionManager.selectedKeys;
|
|
30661
|
+
const updatedSelectedKeys = new Set(selectedKeys);
|
|
30662
|
+
for (const key of keys) {
|
|
30663
|
+
updatedSelectedKeys.delete(key);
|
|
30664
|
+
}
|
|
30665
|
+
state.selectionManager.setSelectedKeys(updatedSelectedKeys);
|
|
30666
|
+
}, children: jsxRuntime.jsx(TagList, { items: selectedItems
|
|
30667
|
+
.filter((item) => item !== null)
|
|
30668
|
+
/* Map ListBoxItem props to Tag props */
|
|
30669
|
+
.map((item) => ({
|
|
30670
|
+
id: item?.id ? item.id : item.label,
|
|
30671
|
+
textValue: item.label,
|
|
30672
|
+
size: size === "small" ? "xsmall" : "small",
|
|
30673
|
+
color: item.color,
|
|
30674
|
+
tagStyle: item.tagStyle,
|
|
30675
|
+
...(item.iconLeft && {
|
|
30676
|
+
icon: item.iconLeft,
|
|
30677
|
+
}),
|
|
30678
|
+
...(isDisabled && { isDisabled: true }),
|
|
30679
|
+
})), renderEmptyState: () => (jsxRuntime.jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: placeholder
|
|
30680
|
+
? placeholder
|
|
30681
|
+
: "Select an item" })) }) }) }), tagOverlay)] }));
|
|
30682
|
+
} }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {}), isOpen ? jsxRuntime.jsx(SvgChevronUpIcon, {}) : jsxRuntime.jsx(SvgChevronDownIcon, {})] }), jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--TagOverlayContainer", ref: setTagOverlay })] })) : (jsxRuntime.jsxs(Button, { className: `bcds-react-aria-Select--Button ${size === "medium" ? "medium" : "small"} ${isInvalid ? "invalid" : ""}`, children: [jsxRuntime.jsx($c8bb816105474884$export$e288731fd71264f0, { className: "bcds-react-aria-SelectValue", children: (value) => {
|
|
29365
30683
|
if (value.selectedText)
|
|
29366
|
-
return value.selectedText;
|
|
30684
|
+
return (jsxRuntime.jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: value.selectedText }));
|
|
29367
30685
|
if (placeholder)
|
|
29368
|
-
return placeholder;
|
|
29369
|
-
return "Select an item";
|
|
29370
|
-
} }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {}), isOpen ? jsxRuntime.jsx(SvgChevronUpIcon, {}) : jsxRuntime.jsx(SvgChevronDownIcon, {})] }), description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-Select--Description`, children: description })), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-Select--Error", children: errorMessage }), jsxRuntime.jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Select--Popover", offset: 4, children: jsxRuntime.jsx($928221da08ecbc62$export$41f133550aa26f48, { className:
|
|
30686
|
+
return (jsxRuntime.jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: placeholder }));
|
|
30687
|
+
return (jsxRuntime.jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: "Select an item" }));
|
|
30688
|
+
} }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {}), isOpen ? jsxRuntime.jsx(SvgChevronUpIcon, {}) : jsxRuntime.jsx(SvgChevronDownIcon, {})] })), description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-Select--Description`, children: description })), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-Select--Error", children: errorMessage }), jsxRuntime.jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Select--Popover", offset: 4, children: jsxRuntime.jsx($928221da08ecbc62$export$41f133550aa26f48, { className: `bcds-react-aria-Select--ListBox ${size}`,
|
|
29371
30689
|
// This ternary statement is used to mock the data for `sections`
|
|
29372
30690
|
// if a flat list of `items` was passed instead. This allows us to
|
|
29373
30691
|
// use one component to support both flat and sectioned lists of
|
|
@@ -29376,7 +30694,7 @@ function Select({ items, sections, label, description, placeholder, size = "medi
|
|
|
29376
30694
|
// support different markup within the same component.
|
|
29377
30695
|
items: sections
|
|
29378
30696
|
? sections
|
|
29379
|
-
: [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxRuntime.jsxs($928221da08ecbc62$export$dca12b0bb56e4fc, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsxRuntime.jsx($53e61d82d8b8611d$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsxRuntime.jsx($42ceafc619f9c3ba$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxRuntime.
|
|
30697
|
+
: [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxRuntime.jsxs($928221da08ecbc62$export$dca12b0bb56e4fc, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsxRuntime.jsx($53e61d82d8b8611d$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsxRuntime.jsx($42ceafc619f9c3ba$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxRuntime.jsx($928221da08ecbc62$export$a11e76429ed99b4, { id: item?.id ? item.id : item.label, className: `bcds-react-aria-Select--ListBoxItem ${item?.isDestructive ? "destructive" : ""}`, textValue: item.label, children: ({ isSelected }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { 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($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "label", className: "bcds-react-aria-Select--ListBoxItem-Text-label", children: item.label }), item.description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-Select--ListBoxItem-Text-description", children: item.description }))] }), isSelected ? (jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: jsxRuntime.jsx(SvgCheckIcon, {}) })) : (item?.iconRight && (jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconRight })))] })) })) })] })) }) })] })) }));
|
|
29380
30698
|
}
|
|
29381
30699
|
|
|
29382
30700
|
function SvgBcOutlineIcon({ id = "bc-outline-icon" }) {
|
|
@@ -29393,6 +30711,10 @@ function SvgDashIcon({ id = "dash-icon" }) {
|
|
|
29393
30711
|
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 640 640", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320z", fill: "currentColor" }) }));
|
|
29394
30712
|
}
|
|
29395
30713
|
|
|
30714
|
+
function SvgPlaceholderIcon({ size = 20, ...props }) {
|
|
30715
|
+
return (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsxRuntime.jsx("g", { id: "20px/Icon placeholder", clipPath: "url(#clip0_717_6325)", children: jsxRuntime.jsx("path", { id: "Icon", d: "M9.99996 18.3333C14.6023 18.3333 18.3333 14.6023 18.3333 9.99996C18.3333 5.39759 14.6023 1.66663 9.99996 1.66663C5.39759 1.66663 1.66663 5.39759 1.66663 9.99996C1.66663 14.6023 5.39759 18.3333 9.99996 18.3333Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_717_6325", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
|
|
30716
|
+
}
|
|
30717
|
+
|
|
29396
30718
|
/* This component implements the Plus icon from Font Awesome: https://fontawesome.com/icons/plus */
|
|
29397
30719
|
function SvgPlusIcon({ id = "plus-icon" }) {
|
|
29398
30720
|
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 640 640", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z", fill: "currentColor" }) }));
|
|
@@ -29410,27 +30732,6 @@ function SvgReactAriaIcon({ id = "react-aria-icon" }) {
|
|
|
29410
30732
|
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "200 206 800 790", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M720.67 205.995C867.583 205.995 986.679 325.091 986.68 472.003C986.68 590.753 908.865 691.325 801.446 725.521L979.312 948.055C994.438 966.98 980.963 995 956.736 995H795.612C778.743 995 762.715 987.629 751.734 974.823L697.365 911.421L493.126 653.39C457.134 607.918 489.518 540.979 547.511 540.977L720.67 540.971C758.758 540.971 789.635 510.091 789.635 472.003C789.634 433.915 758.758 403.038 720.67 403.038H429.939C404.955 403.038 388.623 391.886 373.994 373.623L277.349 252.966C262.194 234.045 275.664 205.996 299.905 205.995H720.67Z M396.605 720.706C407.798 705.406 430.443 704.843 442.381 719.568L503.816 797.018H502.786L535.569 838.934C548.074 854.358 549.943 877.191 538.047 893.09L476.638 972.545C465.692 986.707 448.803 995 430.903 995H242.276C218.18 995 204.665 967.248 219.523 948.278L337.992 797.018H337.923L396.605 720.706Z", fill: "#7F57FF" }) }) }));
|
|
29411
30733
|
}
|
|
29412
30734
|
|
|
29413
|
-
var css_248z$b = ".bcds-react-aria-Tag {\n color: var(--typography-color-primary);\n cursor: pointer;\n border: var(--layout-border-width-small) solid;\n display: flex;\n align-items: center;\n font: var(--typography-regular-label);\n width: fit-content;\n}\n.bcds-react-aria-Tag .react-aria-Button {\n background: none;\n border: none;\n color: var(--typography-color-primary);\n cursor: pointer;\n display: flex;\n margin: 0;\n padding: 0;\n}\n\n/* Tag colors */\n.bcds-react-aria-Tag.bc-blue {\n background-color: var(--theme-primary-blue);\n border-color: var(--theme-blue-90);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-blue .react-aria-Button {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-gold {\n background-color: var(--theme-primary-gold);\n border-color: var(--theme-blue-90);\n}\n.bcds-react-aria-Tag.blue {\n background-color: var(--support-surface-color-info);\n border-color: var(--support-border-color-info);\n}\n.bcds-react-aria-Tag.dark {\n background: var(--theme-gray-110);\n border-color: var(--theme-blue-90);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.dark .react-aria-Button {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.gray,\n.bcds-react-aria-Tag.grey {\n background-color: var(--theme-gray-20);\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Tag.green {\n background-color: var(--support-surface-color-success);\n border-color: var(--support-border-color-success);\n}\n.bcds-react-aria-Tag.red {\n background-color: var(--support-surface-color-danger);\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Tag.yellow {\n background-color: var(--support-surface-color-warning);\n border-color: var(--support-border-color-warning);\n}\n\n/* Tag style */\n.bcds-react-aria-Tag.rectangular {\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Tag.circular {\n border-radius: var(--layout-borderRadius-Circular, 9999px);\n}\n\n/* Tag size */\n.bcds-react-aria-Tag.medium {\n height: var(--layout-padding-xlarge);\n padding: var(--layout-padding-hair) var(--layout-padding-medium);\n gap: var(--layout-margin-medium);\n}\n.bcds-react-aria-Tag.small {\n height: var(--layout-padding-large);\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n gap: var(--layout-margin-small);\n}\n\n/* Selected */\n.bcds-react-aria-Tag[data-selected] {\n border-radius: var(--layout-border-radius-small);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-active);\n}\n\n/* Focused */\n.bcds-react-aria-Tag[data-focus-visible] {\n outline: var(--layout-border-width-medium) solid\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Tag[data-disabled] {\n background-color: var(--surface-color-primary-button-disabled);\n border-color: var(--surface-color-border-default);\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
29414
|
-
styleInject(css_248z$b);
|
|
29415
|
-
|
|
29416
|
-
function Tag({ color = "blue", tagStyle = "rectangular", size = "small", icon, id, textValue, }) {
|
|
29417
|
-
return (jsxRuntime.jsx($3df3ddf5bafbc7b1$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color} ${tagStyle} ${size}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, textValue, !isDisabled && allowsRemoving && (jsxRuntime.jsx($7705c033048f6da7$export$353f5b6fc5456de1, { "aria-label": `Remove ${textValue}`, slot: "remove", children: jsxRuntime.jsx("svg", { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { id: "Icons / Close", children: jsxRuntime.jsx("path", { id: "Vector", d: "M12.6004 3.03239L11.4684 1.90039L7.00039 6.36839L2.53239 1.90039L1.40039 3.03239L5.86839 7.50039L1.40039 11.9684L2.53239 13.1004L7.00039 8.63239L11.4684 13.1004L12.6004 11.9684L8.13239 7.50039L12.6004 3.03239Z", fill: "currentColor" }) }) }) }))] })) }));
|
|
29418
|
-
}
|
|
29419
|
-
|
|
29420
|
-
var css_248z$a = ".bcds-react-aria-TagGroup {\n color: var(--typography-color-primary);\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-TagGroup--Label,\n.bcds-react-aria-TagGroup--Text-description,\n.bcds-react-aria-TagGroup--Text-error {\n display: block;\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TagGroup--Text-error {\n display: flex;\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TagGroup--Text-error > svg {\n padding-right: var(--layout-padding-xsmall);\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
29421
|
-
styleInject(css_248z$a);
|
|
29422
|
-
|
|
29423
|
-
function TagGroup({ children, label, description, errorMessage, ...props }) {
|
|
29424
|
-
return (jsxRuntime.jsxs($3df3ddf5bafbc7b1$export$67ea30858aaf75e3, { className: "bcds-react-aria-TagGroup", ...props, children: [label && (jsxRuntime.jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TagGroup--Label", children: label })), children, description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-TagGroup--Text-description", children: description })), errorMessage && (jsxRuntime.jsxs($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "errorMessage", className: "bcds-react-aria-TagGroup--Text-error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), errorMessage] }))] }));
|
|
29425
|
-
}
|
|
29426
|
-
|
|
29427
|
-
var css_248z$9 = ".bcds-react-aria-TagList {\n display: flex;\n flex-wrap: wrap;\n gap: var(--layout-padding-small);\n width: fit-content;\n}\n\n.bcds-react-aria-TagList.horizontal {\n flex-direction: row;\n}\n\n.bcds-react-aria-TagList.vertical {\n flex-direction: column;\n}\n";
|
|
29428
|
-
styleInject(css_248z$9);
|
|
29429
|
-
|
|
29430
|
-
function TagList({ items, orientation = "horizontal", renderEmptyState, ...props }) {
|
|
29431
|
-
return (jsxRuntime.jsx($3df3ddf5bafbc7b1$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => $8WNJc$react.createElement(Tag, { ...item, key: item.id }) }));
|
|
29432
|
-
}
|
|
29433
|
-
|
|
29434
30735
|
var css_248z$8 = "/* Medium size (default) */\n.bcds-react-aria-Text.medium {\n font: var(--typography-regular-body);\n}\n\n.bcds-react-aria-Text.medium b,\n.bcds-react-aria-Text.medium strong {\n font: var(--typography-bold-body);\n}\n\n.bcds-react-aria-Text.medium i,\n.bcds-react-aria-Text.medium em {\n font: var(--typography-italic-body);\n}\n\n/* Small size */\n.bcds-react-aria-Text.small {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-Text.small b,\n.bcds-react-aria-Text.small strong {\n font: var(--typography-bold-small-body);\n}\n\n.bcds-react-aria-Text.small i,\n.bcds-react-aria-Text.small em {\n font: var(--typography-italic-small-body);\n}\n\n/* Large size */\n.bcds-react-aria-Text.large {\n font: var(--typography-regular-large-body);\n}\n\n.bcds-react-aria-Text.large b,\n.bcds-react-aria-Text.large strong {\n font: var(--typography-bold-large-body);\n}\n\n.bcds-react-aria-Text.large i,\n.bcds-react-aria-Text.large em {\n font: var(--typography-italic-large-body);\n}\n\n/* Text color */\n.bcds-react-aria-Text.primary {\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Text.primaryInvert {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Text.secondary {\n color: var(--typography-color-secondary);\n}\n.bcds-react-aria-Text.secondaryInvert {\n color: var(--typography-color-secondary-invert);\n}\n.bcds-react-aria-Text.disabled {\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Text.danger {\n color: var(--typography-color-danger);\n}\n";
|
|
29435
30736
|
styleInject(css_248z$8);
|
|
29436
30737
|
|
|
@@ -29521,6 +30822,11 @@ exports.Header = Header;
|
|
|
29521
30822
|
exports.Heading = Heading;
|
|
29522
30823
|
exports.InlineAlert = InlineAlert;
|
|
29523
30824
|
exports.Link = Link;
|
|
30825
|
+
exports.Menu = Menu;
|
|
30826
|
+
exports.MenuItem = MenuItem;
|
|
30827
|
+
exports.MenuSection = $49319ee1285aa241$export$4b1545b4f2016d26;
|
|
30828
|
+
exports.MenuSectionHeader = $53e61d82d8b8611d$export$8b251419efc915eb;
|
|
30829
|
+
exports.MenuTrigger = $49319ee1285aa241$export$27d2ad3c5815583e;
|
|
29524
30830
|
exports.Modal = Modal;
|
|
29525
30831
|
exports.NumberField = NumberField;
|
|
29526
30832
|
exports.ProgressBar = ProgressBar;
|
|
@@ -29529,6 +30835,7 @@ exports.Radio = Radio;
|
|
|
29529
30835
|
exports.RadioGroup = RadioGroup;
|
|
29530
30836
|
exports.Select = Select;
|
|
29531
30837
|
exports.Separator = Separator;
|
|
30838
|
+
exports.SubmenuTrigger = $49319ee1285aa241$export$ecabc99eeffab7ca;
|
|
29532
30839
|
exports.SvgBcLogo = SvgBcLogo;
|
|
29533
30840
|
exports.SvgBcOutlineIcon = SvgBcOutlineIcon;
|
|
29534
30841
|
exports.SvgBetaIcon = SvgBetaIcon;
|
|
@@ -29545,6 +30852,7 @@ exports.SvgExclamationCircleIcon = SvgExclamationCircleIcon;
|
|
|
29545
30852
|
exports.SvgExclamationIcon = SvgExclamationIcon;
|
|
29546
30853
|
exports.SvgInfoIcon = SvgInfoIcon;
|
|
29547
30854
|
exports.SvgMinusIcon = SvgDashIcon;
|
|
30855
|
+
exports.SvgPlaceholderIcon = SvgPlaceholderIcon;
|
|
29548
30856
|
exports.SvgPlusIcon = SvgPlusIcon;
|
|
29549
30857
|
exports.SvgReactAriaIcon = SvgReactAriaIcon;
|
|
29550
30858
|
exports.SvgTooltipArrowUp = SvgTooltipArrowUp;
|