@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/esm/index.js
CHANGED
|
@@ -29,8 +29,8 @@ function styleInject(css, ref) {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
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";
|
|
33
|
-
styleInject(css_248z$
|
|
32
|
+
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";
|
|
33
|
+
styleInject(css_248z$D);
|
|
34
34
|
|
|
35
35
|
/*
|
|
36
36
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -19556,6 +19556,20 @@ function $542a13ca2fa5b484$var$PopoverInner({ state: state, isExiting: isExiting
|
|
|
19556
19556
|
}, overlay);
|
|
19557
19557
|
}
|
|
19558
19558
|
|
|
19559
|
+
/*
|
|
19560
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
19561
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
19562
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
19563
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
19564
|
+
*
|
|
19565
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
19566
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
19567
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
19568
|
+
* governing permissions and limitations under the License.
|
|
19569
|
+
*/
|
|
19570
|
+
|
|
19571
|
+
const $650bea62ab5f5f0f$export$744d98a3b8a94e1c = /*#__PURE__*/ (createContext)({});
|
|
19572
|
+
|
|
19559
19573
|
var $50608029e06fcc45$exports = {};
|
|
19560
19574
|
$50608029e06fcc45$exports = {
|
|
19561
19575
|
"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}`
|
|
@@ -19944,7 +19958,7 @@ function $f19b83c1486f45cc$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
|
19944
19958
|
}
|
|
19945
19959
|
|
|
19946
19960
|
/*
|
|
19947
|
-
* Copyright
|
|
19961
|
+
* Copyright 2024 Adobe. All rights reserved.
|
|
19948
19962
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
19949
19963
|
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
19950
19964
|
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
@@ -19953,67 +19967,7 @@ function $f19b83c1486f45cc$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
|
19953
19967
|
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
19954
19968
|
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
19955
19969
|
* governing permissions and limitations under the License.
|
|
19956
|
-
*/
|
|
19957
|
-
|
|
19958
|
-
function $e3403870bfb691da$export$79fefeb1c2091ac3(props) {
|
|
19959
|
-
let overlayTriggerState = ($f11fb0bcf1b2687a$export$61c6a8c84e605fb6)(props);
|
|
19960
|
-
let [focusStrategy, setFocusStrategy] = (useState)(null);
|
|
19961
|
-
let [expandedKeysStack, setExpandedKeysStack] = (useState)([]);
|
|
19962
|
-
let closeAll = ()=>{
|
|
19963
|
-
setExpandedKeysStack([]);
|
|
19964
|
-
overlayTriggerState.close();
|
|
19965
|
-
};
|
|
19966
|
-
let openSubmenu = (triggerKey, level)=>{
|
|
19967
|
-
setExpandedKeysStack((oldStack)=>{
|
|
19968
|
-
if (level > oldStack.length) return oldStack;
|
|
19969
|
-
return [
|
|
19970
|
-
...oldStack.slice(0, level),
|
|
19971
|
-
triggerKey
|
|
19972
|
-
];
|
|
19973
|
-
});
|
|
19974
|
-
};
|
|
19975
|
-
let closeSubmenu = (triggerKey, level)=>{
|
|
19976
|
-
setExpandedKeysStack((oldStack)=>{
|
|
19977
|
-
let key = oldStack[level];
|
|
19978
|
-
if (key === triggerKey) return oldStack.slice(0, level);
|
|
19979
|
-
else return oldStack;
|
|
19980
|
-
});
|
|
19981
|
-
};
|
|
19982
|
-
return {
|
|
19983
|
-
focusStrategy: focusStrategy,
|
|
19984
|
-
...overlayTriggerState,
|
|
19985
|
-
open (focusStrategy = null) {
|
|
19986
|
-
setFocusStrategy(focusStrategy);
|
|
19987
|
-
overlayTriggerState.open();
|
|
19988
|
-
},
|
|
19989
|
-
toggle (focusStrategy = null) {
|
|
19990
|
-
setFocusStrategy(focusStrategy);
|
|
19991
|
-
overlayTriggerState.toggle();
|
|
19992
|
-
},
|
|
19993
|
-
close () {
|
|
19994
|
-
closeAll();
|
|
19995
|
-
},
|
|
19996
|
-
expandedKeysStack: expandedKeysStack,
|
|
19997
|
-
openSubmenu: openSubmenu,
|
|
19998
|
-
closeSubmenu: closeSubmenu
|
|
19999
|
-
};
|
|
20000
|
-
}
|
|
20001
|
-
|
|
20002
|
-
const $49319ee1285aa241$export$795aec4671cbae19 = /*#__PURE__*/ (createContext)(null);
|
|
20003
|
-
class $49319ee1285aa241$var$SubmenuTriggerNode extends ($6f0c29017aeec335$export$d68d59712b04d9d1) {
|
|
20004
|
-
static{
|
|
20005
|
-
this.type = 'submenutrigger';
|
|
20006
|
-
}
|
|
20007
|
-
filter(collection, newCollection, filterFn) {
|
|
20008
|
-
let triggerNode = collection.getItem(this.firstChildKey);
|
|
20009
|
-
if (triggerNode && filterFn(triggerNode.textValue, this)) {
|
|
20010
|
-
let clone = this.clone();
|
|
20011
|
-
newCollection.addDescendants(clone, collection);
|
|
20012
|
-
return clone;
|
|
20013
|
-
}
|
|
20014
|
-
return null;
|
|
20015
|
-
}
|
|
20016
|
-
}
|
|
19970
|
+
*/ const $d5765cd7be93edd1$export$6f49b4016bfc8d56 = new WeakMap();
|
|
20017
19971
|
|
|
20018
19972
|
/*
|
|
20019
19973
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -20029,85 +19983,43 @@ class $49319ee1285aa241$var$SubmenuTriggerNode extends ($6f0c29017aeec335$export
|
|
|
20029
19983
|
|
|
20030
19984
|
|
|
20031
19985
|
|
|
20032
|
-
|
|
20033
|
-
|
|
20034
|
-
|
|
20035
|
-
let
|
|
20036
|
-
|
|
20037
|
-
|
|
20038
|
-
let
|
|
20039
|
-
|
|
20040
|
-
|
|
20041
|
-
|
|
20042
|
-
|
|
20043
|
-
|
|
20044
|
-
|
|
20045
|
-
|
|
20046
|
-
|
|
20047
|
-
|
|
20048
|
-
|
|
20049
|
-
|
|
20050
|
-
|
|
20051
|
-
ref.current.blur();
|
|
20052
|
-
($f192c2f16961cbe0$export$80f3e147d781571c)(ref.current);
|
|
20053
|
-
}
|
|
20054
|
-
isRefocusing.current = false;
|
|
20055
|
-
}
|
|
20056
|
-
}, 500);
|
|
20057
|
-
return ()=>{
|
|
20058
|
-
clearTimeout(timeout);
|
|
20059
|
-
};
|
|
20060
|
-
}
|
|
20061
|
-
}, [
|
|
20062
|
-
ref
|
|
20063
|
-
]);
|
|
20064
|
-
($d7a937236970dc7f$export$14c98a7594375490)();
|
|
20065
|
-
// Warn in dev mode if the dialog has no accessible title.
|
|
20066
|
-
// This catches a common mistake where useDialog and useOverlayTriggerState
|
|
20067
|
-
// are used in the same component, causing the title element to not be
|
|
20068
|
-
// in the DOM when useSlotId queries for it.
|
|
20069
|
-
// Check the DOM element directly since aria-labelledby may be added by
|
|
20070
|
-
// wrapper components (e.g. RAC Dialog uses trigger ID as a fallback).
|
|
20071
|
-
let hasWarned = (useRef)(false);
|
|
20072
|
-
(useEffect)(()=>{
|
|
20073
|
-
if (process.env.NODE_ENV !== 'production' && !hasWarned.current && ref.current) {
|
|
20074
|
-
let el = ref.current;
|
|
20075
|
-
let hasAriaLabel = el.hasAttribute('aria-label');
|
|
20076
|
-
let hasAriaLabelledby = el.hasAttribute('aria-labelledby');
|
|
20077
|
-
if (!hasAriaLabel && !hasAriaLabelledby) {
|
|
20078
|
-
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.");
|
|
20079
|
-
hasWarned.current = true;
|
|
20080
|
-
}
|
|
20081
|
-
}
|
|
19986
|
+
function $a2d69d6ee8486855$export$38eaa17faae8f579(props, state, ref) {
|
|
19987
|
+
let { shouldFocusWrap: shouldFocusWrap = true, onKeyDown: onKeyDown, onKeyUp: onKeyUp, ...otherProps } = props;
|
|
19988
|
+
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.');
|
|
19989
|
+
let domProps = ($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(props, {
|
|
19990
|
+
labelable: true
|
|
19991
|
+
});
|
|
19992
|
+
let { listProps: listProps } = ($64903b4b31b6bb2a$export$b95089534ab7c1fd)({
|
|
19993
|
+
...otherProps,
|
|
19994
|
+
ref: ref,
|
|
19995
|
+
selectionManager: state.selectionManager,
|
|
19996
|
+
collection: state.collection,
|
|
19997
|
+
disabledKeys: state.disabledKeys,
|
|
19998
|
+
shouldFocusWrap: shouldFocusWrap,
|
|
19999
|
+
linkBehavior: 'override'
|
|
20000
|
+
});
|
|
20001
|
+
($d5765cd7be93edd1$export$6f49b4016bfc8d56).set(state, {
|
|
20002
|
+
onClose: props.onClose,
|
|
20003
|
+
onAction: props.onAction,
|
|
20004
|
+
shouldUseVirtualFocus: props.shouldUseVirtualFocus
|
|
20082
20005
|
});
|
|
20083
|
-
// We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
|
|
20084
|
-
// on mount when inside an iframe, no matter which element we programmatically focus.
|
|
20085
|
-
// See https://bugs.webkit.org/show_bug.cgi?id=211934.
|
|
20086
|
-
// useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
|
|
20087
|
-
// even without aria-modal on the dialog itself.
|
|
20088
20006
|
return {
|
|
20089
|
-
|
|
20090
|
-
|
|
20091
|
-
|
|
20092
|
-
|
|
20093
|
-
role:
|
|
20094
|
-
|
|
20095
|
-
|
|
20096
|
-
|
|
20097
|
-
|
|
20098
|
-
// we don't want this to occur due to the above useEffect.
|
|
20099
|
-
onBlur: (e)=>{
|
|
20100
|
-
if (isRefocusing.current) e.stopPropagation();
|
|
20007
|
+
menuProps: ($bbaa08b3cd72f041$export$9d1611c77c2fe928)(domProps, {
|
|
20008
|
+
onKeyDown: onKeyDown,
|
|
20009
|
+
onKeyUp: onKeyUp
|
|
20010
|
+
}, {
|
|
20011
|
+
role: 'menu',
|
|
20012
|
+
...listProps,
|
|
20013
|
+
onKeyDown: (e)=>{
|
|
20014
|
+
// don't clear the menu selected keys if the user is presses escape since escape closes the menu
|
|
20015
|
+
if (e.key !== 'Escape' || props.shouldUseVirtualFocus) listProps.onKeyDown?.(e);
|
|
20101
20016
|
}
|
|
20102
|
-
}
|
|
20103
|
-
titleProps: {
|
|
20104
|
-
id: titleId
|
|
20105
|
-
}
|
|
20017
|
+
})
|
|
20106
20018
|
};
|
|
20107
20019
|
}
|
|
20108
20020
|
|
|
20109
20021
|
/*
|
|
20110
|
-
* Copyright
|
|
20022
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20111
20023
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20112
20024
|
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20113
20025
|
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
@@ -20130,98 +20042,1418 @@ function $13150e6629d46e45$export$d55e7ee900f34e93(props, ref) {
|
|
|
20130
20042
|
|
|
20131
20043
|
|
|
20132
20044
|
|
|
20133
|
-
|
|
20134
|
-
|
|
20135
|
-
|
|
20136
|
-
|
|
20137
|
-
|
|
20138
|
-
let
|
|
20139
|
-
let
|
|
20140
|
-
let
|
|
20141
|
-
|
|
20142
|
-
|
|
20143
|
-
|
|
20144
|
-
|
|
20145
|
-
|
|
20146
|
-
if (
|
|
20147
|
-
|
|
20148
|
-
|
|
20149
|
-
|
|
20150
|
-
|
|
20151
|
-
ref: buttonRef,
|
|
20152
|
-
onResize: onResize
|
|
20153
|
-
});
|
|
20154
|
-
// Label dialog by the trigger as a fallback if there is no title slot.
|
|
20155
|
-
// This is done in RAC instead of hooks because otherwise we cannot distinguish
|
|
20156
|
-
// between context and props. Normally aria-labelledby overrides the title
|
|
20157
|
-
// but when sent by context we want the title to win.
|
|
20158
|
-
triggerProps.id = ($390e54f620492c70$export$f680877a34711e37)();
|
|
20159
|
-
overlayProps['aria-labelledby'] = triggerProps.id;
|
|
20160
|
-
return /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
20161
|
-
values: [
|
|
20162
|
-
[
|
|
20163
|
-
$f2ff30fde7b014be$export$d2f961adcb0afbe,
|
|
20164
|
-
state
|
|
20165
|
-
],
|
|
20166
|
-
[
|
|
20167
|
-
($49319ee1285aa241$export$795aec4671cbae19),
|
|
20168
|
-
state
|
|
20169
|
-
],
|
|
20170
|
-
[
|
|
20171
|
-
$f2ff30fde7b014be$export$8b93a07348a7730c,
|
|
20172
|
-
overlayProps
|
|
20173
|
-
],
|
|
20174
|
-
[
|
|
20175
|
-
($542a13ca2fa5b484$export$9b9a0cd73afb7ca4),
|
|
20176
|
-
{
|
|
20177
|
-
trigger: 'DialogTrigger',
|
|
20178
|
-
triggerRef: buttonRef,
|
|
20179
|
-
'aria-labelledby': overlayProps['aria-labelledby'],
|
|
20180
|
-
style: {
|
|
20181
|
-
'--trigger-width': buttonWidth
|
|
20182
|
-
}
|
|
20183
|
-
}
|
|
20184
|
-
]
|
|
20185
|
-
]
|
|
20186
|
-
}, /*#__PURE__*/ ($8WNJc$react).createElement(($0d47b37c475c5231$export$3351871ee4b288b8), {
|
|
20187
|
-
...triggerProps,
|
|
20188
|
-
ref: buttonRef,
|
|
20189
|
-
isPressed: state.isOpen
|
|
20190
|
-
}, props.children));
|
|
20191
|
-
}
|
|
20192
|
-
const $f2ff30fde7b014be$export$3ddf2d174ce01153 = /*#__PURE__*/ (forwardRef)(function Dialog(props, ref) {
|
|
20193
|
-
let originalAriaLabelledby = props['aria-labelledby'];
|
|
20194
|
-
[props, ref] = ($7230ffa83bc0c2cf$export$29f1550f4b0d4415)(props, ref, $f2ff30fde7b014be$export$8b93a07348a7730c);
|
|
20195
|
-
let { dialogProps: dialogProps, titleProps: titleProps } = ($13150e6629d46e45$export$d55e7ee900f34e93)({
|
|
20196
|
-
...props,
|
|
20197
|
-
// Only pass aria-labelledby from props, not context.
|
|
20198
|
-
// Context is used as a fallback below.
|
|
20199
|
-
'aria-labelledby': originalAriaLabelledby
|
|
20200
|
-
}, ref);
|
|
20201
|
-
let state = (useContext)($f2ff30fde7b014be$export$d2f961adcb0afbe);
|
|
20202
|
-
if (!dialogProps['aria-label'] && !dialogProps['aria-labelledby']) {
|
|
20203
|
-
// If aria-labelledby exists on props, we know it came from context.
|
|
20204
|
-
// Use that as a fallback in case there is no title slot.
|
|
20205
|
-
if (props['aria-labelledby']) dialogProps['aria-labelledby'] = props['aria-labelledby'];
|
|
20206
|
-
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.');
|
|
20207
|
-
}
|
|
20208
|
-
let renderProps = ($7230ffa83bc0c2cf$export$4d86445c2cf5e3)({
|
|
20209
|
-
defaultClassName: 'react-aria-Dialog',
|
|
20210
|
-
className: props.className,
|
|
20211
|
-
style: props.style,
|
|
20212
|
-
children: props.children,
|
|
20213
|
-
values: {
|
|
20214
|
-
close: state?.close || (()=>{})
|
|
20045
|
+
function $1a9c2c840fd36413$export$9d32628fc2aea7da(props, state, ref) {
|
|
20046
|
+
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;
|
|
20047
|
+
let isTrigger = !!hasPopup;
|
|
20048
|
+
let isTriggerExpanded = isTrigger && props['aria-expanded'] === 'true';
|
|
20049
|
+
let isDisabled = props.isDisabled ?? selectionManager.isDisabled(key);
|
|
20050
|
+
let isSelected = props.isSelected ?? selectionManager.isSelected(key);
|
|
20051
|
+
let data = ($d5765cd7be93edd1$export$6f49b4016bfc8d56).get(state);
|
|
20052
|
+
let item = state.collection.getItem(key);
|
|
20053
|
+
let onClose = props.onClose || data.onClose;
|
|
20054
|
+
let router = ($caaf0dd3060ed57c$export$9a302a45f65d0572)();
|
|
20055
|
+
let performAction = ()=>{
|
|
20056
|
+
if (isTrigger) return;
|
|
20057
|
+
if (item?.props?.onAction) item.props.onAction();
|
|
20058
|
+
else if (props.onAction) props.onAction(key);
|
|
20059
|
+
if (data.onAction) {
|
|
20060
|
+
// Must reassign to variable otherwise `this` binding gets messed up. Something to do with WeakMap.
|
|
20061
|
+
let onAction = data.onAction;
|
|
20062
|
+
onAction(key);
|
|
20215
20063
|
}
|
|
20216
|
-
}
|
|
20217
|
-
let
|
|
20218
|
-
|
|
20219
|
-
|
|
20220
|
-
|
|
20221
|
-
|
|
20222
|
-
|
|
20223
|
-
|
|
20224
|
-
|
|
20064
|
+
};
|
|
20065
|
+
let role = 'menuitem';
|
|
20066
|
+
if (!isTrigger) {
|
|
20067
|
+
if (selectionManager.selectionMode === 'single') role = 'menuitemradio';
|
|
20068
|
+
else if (selectionManager.selectionMode === 'multiple') role = 'menuitemcheckbox';
|
|
20069
|
+
}
|
|
20070
|
+
let labelId = ($390e54f620492c70$export$b4cc09c592e8fdb8)();
|
|
20071
|
+
let descriptionId = ($390e54f620492c70$export$b4cc09c592e8fdb8)();
|
|
20072
|
+
let keyboardId = ($390e54f620492c70$export$b4cc09c592e8fdb8)();
|
|
20073
|
+
let ariaProps = {
|
|
20074
|
+
id: id,
|
|
20075
|
+
'aria-disabled': isDisabled || undefined,
|
|
20076
|
+
role: role,
|
|
20077
|
+
'aria-label': props['aria-label'],
|
|
20078
|
+
'aria-labelledby': labelId,
|
|
20079
|
+
'aria-describedby': [
|
|
20080
|
+
props['aria-describedby'],
|
|
20081
|
+
descriptionId,
|
|
20082
|
+
keyboardId
|
|
20083
|
+
].filter(Boolean).join(' ') || undefined,
|
|
20084
|
+
'aria-controls': props['aria-controls'],
|
|
20085
|
+
'aria-haspopup': hasPopup,
|
|
20086
|
+
'aria-expanded': props['aria-expanded']
|
|
20087
|
+
};
|
|
20088
|
+
if (selectionManager.selectionMode !== 'none' && !isTrigger) ariaProps['aria-checked'] = isSelected;
|
|
20089
|
+
if (isVirtualized) {
|
|
20090
|
+
let index = Number(item?.index);
|
|
20091
|
+
ariaProps['aria-posinset'] = Number.isNaN(index) ? undefined : index + 1;
|
|
20092
|
+
ariaProps['aria-setsize'] = ($2efe10d3f1f9e31e$export$77d5aafae4e095b2)(state.collection);
|
|
20093
|
+
}
|
|
20094
|
+
let isPressedRef = (useRef)(false);
|
|
20095
|
+
let onPressChange = (isPressed)=>{
|
|
20096
|
+
pressChangeProp?.(isPressed);
|
|
20097
|
+
isPressedRef.current = isPressed;
|
|
20098
|
+
};
|
|
20099
|
+
let interaction = (useRef)(null);
|
|
20100
|
+
let onPressUp = (e)=>{
|
|
20101
|
+
if (e.pointerType !== 'keyboard') interaction.current = {
|
|
20102
|
+
pointerType: e.pointerType
|
|
20103
|
+
};
|
|
20104
|
+
// If interacting with mouse, allow the user to mouse down on the trigger button,
|
|
20105
|
+
// drag, and release over an item (matching native behavior).
|
|
20106
|
+
if (e.pointerType === 'mouse') {
|
|
20107
|
+
if (!isPressedRef.current) e.target.click();
|
|
20108
|
+
}
|
|
20109
|
+
pressUpProp?.(e);
|
|
20110
|
+
};
|
|
20111
|
+
let onClick = (e)=>{
|
|
20112
|
+
onClickProp?.(e);
|
|
20113
|
+
performAction();
|
|
20114
|
+
($caaf0dd3060ed57c$export$13aea1a3cb5e3f1f)(e, router, item.props.href, item?.props.routerOptions);
|
|
20115
|
+
let shouldClose = interaction.current?.pointerType === 'keyboard' ? interaction.current?.key === 'Enter' || selectionManager.selectionMode === 'none' || selectionManager.isLink(key) : selectionManager.selectionMode !== 'multiple' || selectionManager.isLink(key);
|
|
20116
|
+
shouldClose = shouldCloseOnSelect ?? closeOnSelect ?? shouldClose;
|
|
20117
|
+
if (onClose && !isTrigger && shouldClose) onClose();
|
|
20118
|
+
interaction.current = null;
|
|
20119
|
+
};
|
|
20120
|
+
let { itemProps: itemProps, isFocused: isFocused } = ($f6ba6936bfd098a0$export$ecf600387e221c37)({
|
|
20121
|
+
id: id,
|
|
20122
|
+
selectionManager: selectionManager,
|
|
20123
|
+
key: key,
|
|
20124
|
+
ref: ref,
|
|
20125
|
+
shouldSelectOnPressUp: true,
|
|
20126
|
+
allowsDifferentPressOrigin: true,
|
|
20127
|
+
// Disable all handling of links in useSelectable item
|
|
20128
|
+
// because we handle it ourselves. The behavior of menus
|
|
20129
|
+
// is slightly different from other collections because
|
|
20130
|
+
// actions are performed on key down rather than key up.
|
|
20131
|
+
linkBehavior: 'none',
|
|
20132
|
+
shouldUseVirtualFocus: data.shouldUseVirtualFocus
|
|
20133
|
+
});
|
|
20134
|
+
let { pressProps: pressProps, isPressed: isPressed } = ($d27d541f9569d26d$export$45712eceda6fad21)({
|
|
20135
|
+
onPressStart: onPressStart,
|
|
20136
|
+
onPress: onPress,
|
|
20137
|
+
onPressUp: onPressUp,
|
|
20138
|
+
onPressChange: onPressChange,
|
|
20139
|
+
onPressEnd: onPressEnd,
|
|
20140
|
+
isDisabled: isDisabled
|
|
20141
|
+
});
|
|
20142
|
+
let { hoverProps: hoverProps } = ($e969f22b6713ca4a$export$ae780daf29e6d456)({
|
|
20143
|
+
isDisabled: isDisabled,
|
|
20144
|
+
onHoverStart (e) {
|
|
20145
|
+
// Hovering over an already expanded sub dialog trigger should keep focus in the dialog.
|
|
20146
|
+
if (!($8f5a2122b0992be3$export$b9b3dfddab17db27)() && !(isTriggerExpanded && hasPopup)) {
|
|
20147
|
+
selectionManager.setFocused(true);
|
|
20148
|
+
selectionManager.setFocusedKey(key);
|
|
20149
|
+
}
|
|
20150
|
+
hoverStartProp?.(e);
|
|
20151
|
+
},
|
|
20152
|
+
onHoverChange: onHoverChange,
|
|
20153
|
+
onHoverEnd: onHoverEnd
|
|
20154
|
+
});
|
|
20155
|
+
let { keyboardProps: keyboardProps } = ($8296dad1a4c5e0dc$export$8f71654801c2f7cd)({
|
|
20156
|
+
onKeyDown: (e)=>{
|
|
20157
|
+
// Ignore repeating events, which may have started on the menu trigger before moving
|
|
20158
|
+
// focus to the menu item. We want to wait for a second complete key press sequence.
|
|
20159
|
+
if (e.repeat) {
|
|
20160
|
+
e.continuePropagation();
|
|
20161
|
+
return;
|
|
20162
|
+
}
|
|
20163
|
+
switch(e.key){
|
|
20164
|
+
case ' ':
|
|
20165
|
+
interaction.current = {
|
|
20166
|
+
pointerType: 'keyboard',
|
|
20167
|
+
key: ' '
|
|
20168
|
+
};
|
|
20169
|
+
($23f2114a1b82827e$export$e58f029f0fbfdb29)(e).click();
|
|
20170
|
+
// click above sets modality to "virtual", need to set interaction modality back to 'keyboard' so focusSafely calls properly move focus
|
|
20171
|
+
// to the newly opened submenu's first item.
|
|
20172
|
+
($8f5a2122b0992be3$export$8397ddfc504fdb9a)('keyboard');
|
|
20173
|
+
break;
|
|
20174
|
+
case 'Enter':
|
|
20175
|
+
interaction.current = {
|
|
20176
|
+
pointerType: 'keyboard',
|
|
20177
|
+
key: 'Enter'
|
|
20178
|
+
};
|
|
20179
|
+
// Trigger click unless this is a link. Links trigger click natively.
|
|
20180
|
+
if (($23f2114a1b82827e$export$e58f029f0fbfdb29)(e).tagName !== 'A') ($23f2114a1b82827e$export$e58f029f0fbfdb29)(e).click();
|
|
20181
|
+
// click above sets modality to "virtual", need to set interaction modality back to 'keyboard' so focusSafely calls properly move focus
|
|
20182
|
+
// to the newly opened submenu's first item.
|
|
20183
|
+
($8f5a2122b0992be3$export$8397ddfc504fdb9a)('keyboard');
|
|
20184
|
+
break;
|
|
20185
|
+
default:
|
|
20186
|
+
if (!isTrigger) e.continuePropagation();
|
|
20187
|
+
onKeyDown?.(e);
|
|
20188
|
+
break;
|
|
20189
|
+
}
|
|
20190
|
+
},
|
|
20191
|
+
onKeyUp: onKeyUp
|
|
20192
|
+
});
|
|
20193
|
+
let { focusableProps: focusableProps } = ($d1116acdf220c2da$export$4c014de7c8940b4c)({
|
|
20194
|
+
onBlur: onBlur,
|
|
20195
|
+
onFocus: onFocus,
|
|
20196
|
+
onFocusChange: onFocusChange
|
|
20197
|
+
}, ref);
|
|
20198
|
+
let domProps = ($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(item?.props);
|
|
20199
|
+
delete domProps.id;
|
|
20200
|
+
let linkProps = ($caaf0dd3060ed57c$export$7e924b3091a3bd18)(item?.props);
|
|
20201
|
+
return {
|
|
20202
|
+
menuItemProps: {
|
|
20203
|
+
...ariaProps,
|
|
20204
|
+
...($bbaa08b3cd72f041$export$9d1611c77c2fe928)(domProps, linkProps, isTrigger ? {
|
|
20205
|
+
onFocus: itemProps.onFocus,
|
|
20206
|
+
'data-collection': itemProps['data-collection'],
|
|
20207
|
+
'data-key': itemProps['data-key']
|
|
20208
|
+
} : itemProps, pressProps, hoverProps, keyboardProps, focusableProps, // Prevent DOM focus from moving on mouse down when using virtual focus or this is a submenu/subdialog trigger.
|
|
20209
|
+
data.shouldUseVirtualFocus || isTrigger ? {
|
|
20210
|
+
onMouseDown: (e)=>e.preventDefault()
|
|
20211
|
+
} : undefined, isDisabled ? undefined : {
|
|
20212
|
+
onClick: onClick
|
|
20213
|
+
}),
|
|
20214
|
+
// 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.
|
|
20215
|
+
tabIndex: itemProps.tabIndex != null && isTriggerExpanded && !data.shouldUseVirtualFocus ? -1 : itemProps.tabIndex
|
|
20216
|
+
},
|
|
20217
|
+
labelProps: {
|
|
20218
|
+
id: labelId
|
|
20219
|
+
},
|
|
20220
|
+
descriptionProps: {
|
|
20221
|
+
id: descriptionId
|
|
20222
|
+
},
|
|
20223
|
+
keyboardShortcutProps: {
|
|
20224
|
+
id: keyboardId
|
|
20225
|
+
},
|
|
20226
|
+
isFocused: isFocused,
|
|
20227
|
+
isFocusVisible: isFocused && selectionManager.isFocused && ($8f5a2122b0992be3$export$b9b3dfddab17db27)() && !isTriggerExpanded,
|
|
20228
|
+
isSelected: isSelected,
|
|
20229
|
+
isPressed: isPressed,
|
|
20230
|
+
isDisabled: isDisabled
|
|
20231
|
+
};
|
|
20232
|
+
}
|
|
20233
|
+
|
|
20234
|
+
/*
|
|
20235
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20236
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20237
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20238
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20239
|
+
*
|
|
20240
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20241
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20242
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20243
|
+
* governing permissions and limitations under the License.
|
|
20244
|
+
*/
|
|
20245
|
+
function $7355d4e5c49461b6$export$73f7a44322579622(props) {
|
|
20246
|
+
let { heading: heading, 'aria-label': ariaLabel } = props;
|
|
20247
|
+
let headingId = ($390e54f620492c70$export$f680877a34711e37)();
|
|
20248
|
+
return {
|
|
20249
|
+
itemProps: {
|
|
20250
|
+
role: 'presentation'
|
|
20251
|
+
},
|
|
20252
|
+
headingProps: heading ? {
|
|
20253
|
+
// Techincally, menus cannot contain headings according to ARIA.
|
|
20254
|
+
// We hide the heading from assistive technology, using role="presentation",
|
|
20255
|
+
// and only use it as a label for the nested group.
|
|
20256
|
+
id: headingId,
|
|
20257
|
+
role: 'presentation'
|
|
20258
|
+
} : {},
|
|
20259
|
+
groupProps: {
|
|
20260
|
+
role: 'group',
|
|
20261
|
+
'aria-label': ariaLabel,
|
|
20262
|
+
'aria-labelledby': heading ? headingId : undefined
|
|
20263
|
+
}
|
|
20264
|
+
};
|
|
20265
|
+
}
|
|
20266
|
+
|
|
20267
|
+
const $eac5d44fa99b2e3b$var$ALLOWED_INVALID_MOVEMENTS = 2;
|
|
20268
|
+
const $eac5d44fa99b2e3b$var$THROTTLE_TIME = 50;
|
|
20269
|
+
const $eac5d44fa99b2e3b$var$TIMEOUT_TIME = 1000;
|
|
20270
|
+
const $eac5d44fa99b2e3b$var$ANGLE_PADDING = Math.PI / 12; // 15°
|
|
20271
|
+
function $eac5d44fa99b2e3b$export$85ec83e04c95f50a(options) {
|
|
20272
|
+
let { menuRef: menuRef, submenuRef: submenuRef, isOpen: isOpen, isDisabled: isDisabled } = options;
|
|
20273
|
+
let prevPointerPos = (useRef)(undefined);
|
|
20274
|
+
let submenuRect = (useRef)(undefined);
|
|
20275
|
+
let lastProcessedTime = (useRef)(0);
|
|
20276
|
+
let timeout = (useRef)(undefined);
|
|
20277
|
+
let autoCloseTimeout = (useRef)(undefined);
|
|
20278
|
+
let submenuSide = (useRef)(undefined);
|
|
20279
|
+
let movementsTowardsSubmenuCount = (useRef)(2);
|
|
20280
|
+
let [preventPointerEvents, setPreventPointerEvents] = (useState)(false);
|
|
20281
|
+
let updateSubmenuRect = ()=>{
|
|
20282
|
+
if (submenuRef.current) {
|
|
20283
|
+
submenuRect.current = submenuRef.current.getBoundingClientRect();
|
|
20284
|
+
submenuSide.current = undefined;
|
|
20285
|
+
}
|
|
20286
|
+
};
|
|
20287
|
+
($970072cf4b13fde3$export$683480f191c0e3ea)({
|
|
20288
|
+
ref: isOpen ? submenuRef : undefined,
|
|
20289
|
+
onResize: updateSubmenuRect
|
|
20290
|
+
});
|
|
20291
|
+
let reset = ()=>{
|
|
20292
|
+
setPreventPointerEvents(false);
|
|
20293
|
+
movementsTowardsSubmenuCount.current = $eac5d44fa99b2e3b$var$ALLOWED_INVALID_MOVEMENTS;
|
|
20294
|
+
prevPointerPos.current = undefined;
|
|
20295
|
+
};
|
|
20296
|
+
let modality = ($8f5a2122b0992be3$export$98e20ec92f614cfe)();
|
|
20297
|
+
// Prevent mouse down over safe triangle. Clicking while pointer-events: none is applied
|
|
20298
|
+
// will cause focus to move unexpectedly since it will go to an element behind the menu.
|
|
20299
|
+
let onPointerDown = ($fe16bffc7a557bf0$export$7f54fc3180508a52)((e)=>{
|
|
20300
|
+
if (preventPointerEvents) e.preventDefault();
|
|
20301
|
+
});
|
|
20302
|
+
(useEffect)(()=>{
|
|
20303
|
+
if (preventPointerEvents && menuRef.current) menuRef.current.style.pointerEvents = 'none';
|
|
20304
|
+
else menuRef.current.style.pointerEvents = '';
|
|
20305
|
+
}, [
|
|
20306
|
+
menuRef,
|
|
20307
|
+
preventPointerEvents
|
|
20308
|
+
]);
|
|
20309
|
+
($c4867b2f328c2698$export$e5c5a5f917a5871c)(()=>{
|
|
20310
|
+
let submenu = submenuRef.current;
|
|
20311
|
+
let menu = menuRef.current;
|
|
20312
|
+
if (isDisabled || !submenu || !isOpen || modality !== 'pointer' || !menu) {
|
|
20313
|
+
reset();
|
|
20314
|
+
return;
|
|
20315
|
+
}
|
|
20316
|
+
submenuRect.current = submenu.getBoundingClientRect();
|
|
20317
|
+
let onPointerMove = (e)=>{
|
|
20318
|
+
if (e.pointerType === 'touch' || e.pointerType === 'pen') return;
|
|
20319
|
+
let currentTime = Date.now();
|
|
20320
|
+
// Throttle
|
|
20321
|
+
if (currentTime - lastProcessedTime.current < $eac5d44fa99b2e3b$var$THROTTLE_TIME) return;
|
|
20322
|
+
clearTimeout(timeout.current);
|
|
20323
|
+
clearTimeout(autoCloseTimeout.current);
|
|
20324
|
+
let { clientX: mouseX, clientY: mouseY } = e;
|
|
20325
|
+
if (!prevPointerPos.current) {
|
|
20326
|
+
prevPointerPos.current = {
|
|
20327
|
+
x: mouseX,
|
|
20328
|
+
y: mouseY
|
|
20329
|
+
};
|
|
20330
|
+
return;
|
|
20331
|
+
}
|
|
20332
|
+
if (!submenuRect.current) return;
|
|
20333
|
+
if (!submenuSide.current) submenuSide.current = mouseX > submenuRect.current.right ? 'left' : 'right';
|
|
20334
|
+
// Pointer is outside of parent menu
|
|
20335
|
+
if (mouseX < menu.getBoundingClientRect().left || mouseX > menu.getBoundingClientRect().right || mouseY < menu.getBoundingClientRect().top || mouseY > menu.getBoundingClientRect().bottom) {
|
|
20336
|
+
reset();
|
|
20337
|
+
return;
|
|
20338
|
+
}
|
|
20339
|
+
/* Check if pointer is moving towards submenu.
|
|
20340
|
+
Uses the 2-argument arctangent (https://en.wikipedia.org/wiki/Atan2) to calculate:
|
|
20341
|
+
- angle between previous pointer and top of submenu
|
|
20342
|
+
- angle between previous pointer and bottom of submenu
|
|
20343
|
+
- angle between previous pointer and current pointer (delta)
|
|
20344
|
+
If the pointer delta angle value is between the top and bottom angle values, we know the pointer is moving towards the submenu.
|
|
20345
|
+
*/ let prevMouseX = prevPointerPos.current.x;
|
|
20346
|
+
let prevMouseY = prevPointerPos.current.y;
|
|
20347
|
+
let toSubmenuX = submenuSide.current === 'right' ? submenuRect.current.left - prevMouseX : prevMouseX - submenuRect.current.right;
|
|
20348
|
+
let angleTop = Math.atan2(prevMouseY - submenuRect.current.top, toSubmenuX) + $eac5d44fa99b2e3b$var$ANGLE_PADDING;
|
|
20349
|
+
let angleBottom = Math.atan2(prevMouseY - submenuRect.current.bottom, toSubmenuX) - $eac5d44fa99b2e3b$var$ANGLE_PADDING;
|
|
20350
|
+
let anglePointer = Math.atan2(prevMouseY - mouseY, submenuSide.current === 'left' ? -(mouseX - prevMouseX) : mouseX - prevMouseX);
|
|
20351
|
+
let isMovingTowardsSubmenu = anglePointer < angleTop && anglePointer > angleBottom;
|
|
20352
|
+
movementsTowardsSubmenuCount.current = isMovingTowardsSubmenu ? Math.min(movementsTowardsSubmenuCount.current + 1, $eac5d44fa99b2e3b$var$ALLOWED_INVALID_MOVEMENTS) : Math.max(movementsTowardsSubmenuCount.current - 1, 0);
|
|
20353
|
+
if (movementsTowardsSubmenuCount.current >= $eac5d44fa99b2e3b$var$ALLOWED_INVALID_MOVEMENTS) setPreventPointerEvents(true);
|
|
20354
|
+
else setPreventPointerEvents(false);
|
|
20355
|
+
lastProcessedTime.current = currentTime;
|
|
20356
|
+
prevPointerPos.current = {
|
|
20357
|
+
x: mouseX,
|
|
20358
|
+
y: mouseY
|
|
20359
|
+
};
|
|
20360
|
+
// If the pointer is moving towards the submenu, start a timeout to close if no other movements are made after 500ms.
|
|
20361
|
+
if (isMovingTowardsSubmenu) timeout.current = setTimeout(()=>{
|
|
20362
|
+
reset();
|
|
20363
|
+
autoCloseTimeout.current = setTimeout(()=>{
|
|
20364
|
+
// Fire a pointerover event to trigger the menu to close.
|
|
20365
|
+
// Wait until pointer-events:none is no longer applied
|
|
20366
|
+
let target = document.elementFromPoint(mouseX, mouseY);
|
|
20367
|
+
if (target && ($23f2114a1b82827e$export$4282f70798064fe0)(menu, target)) target.dispatchEvent(new PointerEvent('pointerover', {
|
|
20368
|
+
bubbles: true,
|
|
20369
|
+
cancelable: true
|
|
20370
|
+
}));
|
|
20371
|
+
}, 100);
|
|
20372
|
+
}, $eac5d44fa99b2e3b$var$TIMEOUT_TIME);
|
|
20373
|
+
};
|
|
20374
|
+
window.addEventListener('pointermove', onPointerMove);
|
|
20375
|
+
// Prevent pointer down over the safe triangle. See above comment.
|
|
20376
|
+
// Do not enable in tests, because JSDom doesn't do hit testing.
|
|
20377
|
+
if (process.env.NODE_ENV !== 'test') window.addEventListener('pointerdown', onPointerDown, true);
|
|
20378
|
+
return ()=>{
|
|
20379
|
+
window.removeEventListener('pointermove', onPointerMove);
|
|
20380
|
+
if (process.env.NODE_ENV !== 'test') window.removeEventListener('pointerdown', onPointerDown, true);
|
|
20381
|
+
clearTimeout(timeout.current);
|
|
20382
|
+
clearTimeout(autoCloseTimeout.current);
|
|
20383
|
+
movementsTowardsSubmenuCount.current = $eac5d44fa99b2e3b$var$ALLOWED_INVALID_MOVEMENTS;
|
|
20384
|
+
};
|
|
20385
|
+
}, [
|
|
20386
|
+
isDisabled,
|
|
20387
|
+
isOpen,
|
|
20388
|
+
menuRef,
|
|
20389
|
+
modality,
|
|
20390
|
+
setPreventPointerEvents,
|
|
20391
|
+
submenuRef
|
|
20392
|
+
]);
|
|
20393
|
+
}
|
|
20394
|
+
|
|
20395
|
+
/*
|
|
20396
|
+
* Copyright 2023 Adobe. All rights reserved.
|
|
20397
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20398
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20399
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20400
|
+
*
|
|
20401
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20402
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20403
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20404
|
+
* governing permissions and limitations under the License.
|
|
20405
|
+
*/
|
|
20406
|
+
|
|
20407
|
+
|
|
20408
|
+
|
|
20409
|
+
|
|
20410
|
+
|
|
20411
|
+
|
|
20412
|
+
|
|
20413
|
+
function $8794213c1141208f$export$7138b0d059a6e743(props, state, ref) {
|
|
20414
|
+
let { parentMenuRef: parentMenuRef, submenuRef: submenuRef, type: type = 'menu', isDisabled: isDisabled, delay: delay = 200, shouldUseVirtualFocus: shouldUseVirtualFocus } = props;
|
|
20415
|
+
let submenuTriggerId = ($390e54f620492c70$export$f680877a34711e37)();
|
|
20416
|
+
let overlayId = ($390e54f620492c70$export$f680877a34711e37)();
|
|
20417
|
+
let { direction: direction } = ($2eb8e6d23f3d0cb0$export$43bb16f9c6d9e3f7)();
|
|
20418
|
+
let openTimeout = (useRef)(undefined);
|
|
20419
|
+
let cancelOpenTimeout = (useCallback)(()=>{
|
|
20420
|
+
if (openTimeout.current) {
|
|
20421
|
+
clearTimeout(openTimeout.current);
|
|
20422
|
+
openTimeout.current = undefined;
|
|
20423
|
+
}
|
|
20424
|
+
}, [
|
|
20425
|
+
openTimeout
|
|
20426
|
+
]);
|
|
20427
|
+
let onSubmenuOpen = (useCallback)((focusStrategy)=>{
|
|
20428
|
+
cancelOpenTimeout();
|
|
20429
|
+
state.open(focusStrategy);
|
|
20430
|
+
}, [
|
|
20431
|
+
state,
|
|
20432
|
+
cancelOpenTimeout
|
|
20433
|
+
]);
|
|
20434
|
+
let onSubmenuClose = (useCallback)(()=>{
|
|
20435
|
+
cancelOpenTimeout();
|
|
20436
|
+
state.close();
|
|
20437
|
+
}, [
|
|
20438
|
+
state,
|
|
20439
|
+
cancelOpenTimeout
|
|
20440
|
+
]);
|
|
20441
|
+
($c4867b2f328c2698$export$e5c5a5f917a5871c)(()=>{
|
|
20442
|
+
return ()=>{
|
|
20443
|
+
cancelOpenTimeout();
|
|
20444
|
+
};
|
|
20445
|
+
}, [
|
|
20446
|
+
cancelOpenTimeout
|
|
20447
|
+
]);
|
|
20448
|
+
let submenuKeyDown = (e)=>{
|
|
20449
|
+
// If focus is not within the menu, assume virtual focus is being used.
|
|
20450
|
+
// This means some other input element is also within the popover, so we shouldn't close the menu.
|
|
20451
|
+
if (!($23f2114a1b82827e$export$b4f377a2b6254582)(e.currentTarget)) return;
|
|
20452
|
+
switch(e.key){
|
|
20453
|
+
case 'ArrowLeft':
|
|
20454
|
+
if (direction === 'ltr' && ($23f2114a1b82827e$export$4282f70798064fe0)(e.currentTarget, ($23f2114a1b82827e$export$e58f029f0fbfdb29)(e))) {
|
|
20455
|
+
e.preventDefault();
|
|
20456
|
+
e.stopPropagation();
|
|
20457
|
+
onSubmenuClose();
|
|
20458
|
+
if (!shouldUseVirtualFocus && ref.current) ($1969ac565cfec8d0$export$de79e2c695e052f3)(ref.current);
|
|
20459
|
+
}
|
|
20460
|
+
break;
|
|
20461
|
+
case 'ArrowRight':
|
|
20462
|
+
if (direction === 'rtl' && ($23f2114a1b82827e$export$4282f70798064fe0)(e.currentTarget, ($23f2114a1b82827e$export$e58f029f0fbfdb29)(e))) {
|
|
20463
|
+
e.preventDefault();
|
|
20464
|
+
e.stopPropagation();
|
|
20465
|
+
onSubmenuClose();
|
|
20466
|
+
if (!shouldUseVirtualFocus && ref.current) ($1969ac565cfec8d0$export$de79e2c695e052f3)(ref.current);
|
|
20467
|
+
}
|
|
20468
|
+
break;
|
|
20469
|
+
case 'Escape':
|
|
20470
|
+
// TODO: can remove this when we fix collection event leaks
|
|
20471
|
+
if (($23f2114a1b82827e$export$4282f70798064fe0)(submenuRef.current, ($23f2114a1b82827e$export$e58f029f0fbfdb29)(e))) {
|
|
20472
|
+
e.stopPropagation();
|
|
20473
|
+
onSubmenuClose();
|
|
20474
|
+
if (!shouldUseVirtualFocus && ref.current) ($1969ac565cfec8d0$export$de79e2c695e052f3)(ref.current);
|
|
20475
|
+
}
|
|
20476
|
+
break;
|
|
20477
|
+
}
|
|
20478
|
+
};
|
|
20479
|
+
let submenuProps = {
|
|
20480
|
+
id: overlayId,
|
|
20481
|
+
'aria-labelledby': submenuTriggerId,
|
|
20482
|
+
submenuLevel: state.submenuLevel,
|
|
20483
|
+
...type === 'menu' && {
|
|
20484
|
+
onClose: state.closeAll,
|
|
20485
|
+
autoFocus: state.focusStrategy ?? undefined,
|
|
20486
|
+
onKeyDown: submenuKeyDown
|
|
20487
|
+
}
|
|
20488
|
+
};
|
|
20489
|
+
let submenuTriggerKeyDown = (e)=>{
|
|
20490
|
+
switch(e.key){
|
|
20491
|
+
case 'ArrowRight':
|
|
20492
|
+
if (!isDisabled) {
|
|
20493
|
+
if (direction === 'ltr') {
|
|
20494
|
+
e.preventDefault();
|
|
20495
|
+
if (!state.isOpen) onSubmenuOpen('first');
|
|
20496
|
+
if (type === 'menu' && !!submenuRef?.current && ($23f2114a1b82827e$export$cd4e5573fbe2b576)() === ref?.current) ($1969ac565cfec8d0$export$de79e2c695e052f3)(submenuRef.current);
|
|
20497
|
+
} else if (state.isOpen) onSubmenuClose();
|
|
20498
|
+
else e.continuePropagation();
|
|
20499
|
+
}
|
|
20500
|
+
break;
|
|
20501
|
+
case 'ArrowLeft':
|
|
20502
|
+
if (!isDisabled) {
|
|
20503
|
+
if (direction === 'rtl') {
|
|
20504
|
+
e.preventDefault();
|
|
20505
|
+
if (!state.isOpen) onSubmenuOpen('first');
|
|
20506
|
+
if (type === 'menu' && !!submenuRef?.current && ($23f2114a1b82827e$export$cd4e5573fbe2b576)() === ref?.current) ($1969ac565cfec8d0$export$de79e2c695e052f3)(submenuRef.current);
|
|
20507
|
+
} else if (state.isOpen) onSubmenuClose();
|
|
20508
|
+
else e.continuePropagation();
|
|
20509
|
+
}
|
|
20510
|
+
break;
|
|
20511
|
+
default:
|
|
20512
|
+
e.continuePropagation();
|
|
20513
|
+
break;
|
|
20514
|
+
}
|
|
20515
|
+
};
|
|
20516
|
+
let onPressStart = (e)=>{
|
|
20517
|
+
if (!isDisabled && (e.pointerType === 'virtual' || e.pointerType === 'keyboard')) // If opened with a screen reader or keyboard, auto focus the first submenu item.
|
|
20518
|
+
onSubmenuOpen('first');
|
|
20519
|
+
};
|
|
20520
|
+
let onPress = (e)=>{
|
|
20521
|
+
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
|
|
20522
|
+
// press up happening on the newly opened tray items
|
|
20523
|
+
onSubmenuOpen();
|
|
20524
|
+
};
|
|
20525
|
+
let onHoverChange = (isHovered)=>{
|
|
20526
|
+
if (!isDisabled) {
|
|
20527
|
+
if (isHovered && !state.isOpen) {
|
|
20528
|
+
if (!openTimeout.current) openTimeout.current = setTimeout(()=>{
|
|
20529
|
+
onSubmenuOpen();
|
|
20530
|
+
}, delay);
|
|
20531
|
+
} else if (!isHovered) cancelOpenTimeout();
|
|
20532
|
+
}
|
|
20533
|
+
};
|
|
20534
|
+
($600b3cf69ae46262$export$90fc3a17d93f704c)(parentMenuRef, 'focusin', (e)=>{
|
|
20535
|
+
// If we detect focus moved to a different item in the same menu that the currently open submenu trigger is in
|
|
20536
|
+
// then close the submenu. This is for a case where the user hovers a root menu item when multiple submenus are open
|
|
20537
|
+
if (state.isOpen && ($23f2114a1b82827e$export$4282f70798064fe0)(parentMenuRef.current, ($23f2114a1b82827e$export$e58f029f0fbfdb29)(e)) && ($23f2114a1b82827e$export$e58f029f0fbfdb29)(e) !== ref.current) onSubmenuClose();
|
|
20538
|
+
});
|
|
20539
|
+
let shouldCloseOnInteractOutside = (target)=>{
|
|
20540
|
+
if (target !== ref.current) return true;
|
|
20541
|
+
return false;
|
|
20542
|
+
};
|
|
20543
|
+
($eac5d44fa99b2e3b$export$85ec83e04c95f50a)({
|
|
20544
|
+
menuRef: parentMenuRef,
|
|
20545
|
+
submenuRef: submenuRef,
|
|
20546
|
+
isOpen: state.isOpen,
|
|
20547
|
+
isDisabled: isDisabled
|
|
20548
|
+
});
|
|
20549
|
+
return {
|
|
20550
|
+
submenuTriggerProps: {
|
|
20551
|
+
id: submenuTriggerId,
|
|
20552
|
+
'aria-controls': state.isOpen ? overlayId : undefined,
|
|
20553
|
+
'aria-haspopup': !isDisabled ? type : undefined,
|
|
20554
|
+
'aria-expanded': state.isOpen ? 'true' : 'false',
|
|
20555
|
+
onPressStart: onPressStart,
|
|
20556
|
+
onPress: onPress,
|
|
20557
|
+
onHoverChange: onHoverChange,
|
|
20558
|
+
onKeyDown: submenuTriggerKeyDown,
|
|
20559
|
+
isOpen: state.isOpen
|
|
20560
|
+
},
|
|
20561
|
+
submenuProps: submenuProps,
|
|
20562
|
+
popoverProps: {
|
|
20563
|
+
isNonModal: true,
|
|
20564
|
+
shouldCloseOnInteractOutside: shouldCloseOnInteractOutside
|
|
20565
|
+
}
|
|
20566
|
+
};
|
|
20567
|
+
}
|
|
20568
|
+
|
|
20569
|
+
/*
|
|
20570
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20571
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20572
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20573
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20574
|
+
*
|
|
20575
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20576
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20577
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20578
|
+
* governing permissions and limitations under the License.
|
|
20579
|
+
*/
|
|
20580
|
+
|
|
20581
|
+
function $e3403870bfb691da$export$79fefeb1c2091ac3(props) {
|
|
20582
|
+
let overlayTriggerState = ($f11fb0bcf1b2687a$export$61c6a8c84e605fb6)(props);
|
|
20583
|
+
let [focusStrategy, setFocusStrategy] = (useState)(null);
|
|
20584
|
+
let [expandedKeysStack, setExpandedKeysStack] = (useState)([]);
|
|
20585
|
+
let closeAll = ()=>{
|
|
20586
|
+
setExpandedKeysStack([]);
|
|
20587
|
+
overlayTriggerState.close();
|
|
20588
|
+
};
|
|
20589
|
+
let openSubmenu = (triggerKey, level)=>{
|
|
20590
|
+
setExpandedKeysStack((oldStack)=>{
|
|
20591
|
+
if (level > oldStack.length) return oldStack;
|
|
20592
|
+
return [
|
|
20593
|
+
...oldStack.slice(0, level),
|
|
20594
|
+
triggerKey
|
|
20595
|
+
];
|
|
20596
|
+
});
|
|
20597
|
+
};
|
|
20598
|
+
let closeSubmenu = (triggerKey, level)=>{
|
|
20599
|
+
setExpandedKeysStack((oldStack)=>{
|
|
20600
|
+
let key = oldStack[level];
|
|
20601
|
+
if (key === triggerKey) return oldStack.slice(0, level);
|
|
20602
|
+
else return oldStack;
|
|
20603
|
+
});
|
|
20604
|
+
};
|
|
20605
|
+
return {
|
|
20606
|
+
focusStrategy: focusStrategy,
|
|
20607
|
+
...overlayTriggerState,
|
|
20608
|
+
open (focusStrategy = null) {
|
|
20609
|
+
setFocusStrategy(focusStrategy);
|
|
20610
|
+
overlayTriggerState.open();
|
|
20611
|
+
},
|
|
20612
|
+
toggle (focusStrategy = null) {
|
|
20613
|
+
setFocusStrategy(focusStrategy);
|
|
20614
|
+
overlayTriggerState.toggle();
|
|
20615
|
+
},
|
|
20616
|
+
close () {
|
|
20617
|
+
closeAll();
|
|
20618
|
+
},
|
|
20619
|
+
expandedKeysStack: expandedKeysStack,
|
|
20620
|
+
openSubmenu: openSubmenu,
|
|
20621
|
+
closeSubmenu: closeSubmenu
|
|
20622
|
+
};
|
|
20623
|
+
}
|
|
20624
|
+
|
|
20625
|
+
/*
|
|
20626
|
+
* Copyright 2023 Adobe. All rights reserved.
|
|
20627
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20628
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20629
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20630
|
+
*
|
|
20631
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20632
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20633
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20634
|
+
* governing permissions and limitations under the License.
|
|
20635
|
+
*/
|
|
20636
|
+
function $5b3242e27644e8f1$export$cfc51cf86138bf98(props, state) {
|
|
20637
|
+
let { triggerKey: triggerKey } = props;
|
|
20638
|
+
let { expandedKeysStack: expandedKeysStack, openSubmenu: openSubmenu, closeSubmenu: closeSubmenu, close: closeAll } = state;
|
|
20639
|
+
let [submenuLevel] = (useState)(expandedKeysStack?.length);
|
|
20640
|
+
let isOpen = (useMemo)(()=>expandedKeysStack[submenuLevel] === triggerKey, [
|
|
20641
|
+
expandedKeysStack,
|
|
20642
|
+
triggerKey,
|
|
20643
|
+
submenuLevel
|
|
20644
|
+
]);
|
|
20645
|
+
let [focusStrategy, setFocusStrategy] = (useState)(null);
|
|
20646
|
+
let open = (useCallback)((focusStrategy)=>{
|
|
20647
|
+
setFocusStrategy(focusStrategy ?? null);
|
|
20648
|
+
openSubmenu(triggerKey, submenuLevel);
|
|
20649
|
+
}, [
|
|
20650
|
+
openSubmenu,
|
|
20651
|
+
submenuLevel,
|
|
20652
|
+
triggerKey
|
|
20653
|
+
]);
|
|
20654
|
+
let close = (useCallback)(()=>{
|
|
20655
|
+
setFocusStrategy(null);
|
|
20656
|
+
closeSubmenu(triggerKey, submenuLevel);
|
|
20657
|
+
}, [
|
|
20658
|
+
closeSubmenu,
|
|
20659
|
+
submenuLevel,
|
|
20660
|
+
triggerKey
|
|
20661
|
+
]);
|
|
20662
|
+
let toggle = (useCallback)((focusStrategy)=>{
|
|
20663
|
+
setFocusStrategy(focusStrategy ?? null);
|
|
20664
|
+
if (isOpen) close();
|
|
20665
|
+
else open(focusStrategy);
|
|
20666
|
+
}, [
|
|
20667
|
+
close,
|
|
20668
|
+
open,
|
|
20669
|
+
isOpen
|
|
20670
|
+
]);
|
|
20671
|
+
return (useMemo)(()=>({
|
|
20672
|
+
focusStrategy: focusStrategy,
|
|
20673
|
+
isOpen: isOpen,
|
|
20674
|
+
open: open,
|
|
20675
|
+
close: close,
|
|
20676
|
+
closeAll: closeAll,
|
|
20677
|
+
submenuLevel: submenuLevel,
|
|
20678
|
+
// 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
|
|
20679
|
+
// https://github.com/adobe/react-spectrum/pull/4976#discussion_r1336472863
|
|
20680
|
+
setOpen: ()=>{},
|
|
20681
|
+
toggle: toggle
|
|
20682
|
+
}), [
|
|
20683
|
+
isOpen,
|
|
20684
|
+
open,
|
|
20685
|
+
close,
|
|
20686
|
+
closeAll,
|
|
20687
|
+
focusStrategy,
|
|
20688
|
+
toggle,
|
|
20689
|
+
submenuLevel
|
|
20690
|
+
]);
|
|
20691
|
+
}
|
|
20692
|
+
|
|
20693
|
+
/*
|
|
20694
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20695
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20696
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20697
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20698
|
+
*
|
|
20699
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20700
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20701
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20702
|
+
* governing permissions and limitations under the License.
|
|
20703
|
+
*/ class $df1fcc684d3b021a$export$863faf230ee2118a {
|
|
20704
|
+
constructor(nodes, { expandedKeys: expandedKeys } = {}){
|
|
20705
|
+
this.keyMap = new Map();
|
|
20706
|
+
this.firstKey = null;
|
|
20707
|
+
this.lastKey = null;
|
|
20708
|
+
this.iterable = nodes;
|
|
20709
|
+
expandedKeys = expandedKeys || new Set();
|
|
20710
|
+
let visit = (node)=>{
|
|
20711
|
+
this.keyMap.set(node.key, node);
|
|
20712
|
+
if (node.childNodes && (node.type === 'section' || expandedKeys.has(node.key))) for (let child of node.childNodes)visit(child);
|
|
20713
|
+
};
|
|
20714
|
+
for (let node of nodes)visit(node);
|
|
20715
|
+
let last = null;
|
|
20716
|
+
let index = 0;
|
|
20717
|
+
for (let [key, node] of this.keyMap){
|
|
20718
|
+
if (last) {
|
|
20719
|
+
last.nextKey = key;
|
|
20720
|
+
node.prevKey = last.key;
|
|
20721
|
+
} else {
|
|
20722
|
+
this.firstKey = key;
|
|
20723
|
+
node.prevKey = undefined;
|
|
20724
|
+
}
|
|
20725
|
+
if (node.type === 'item') node.index = index++;
|
|
20726
|
+
last = node;
|
|
20727
|
+
// Set nextKey as undefined since this might be the last node
|
|
20728
|
+
// If it isn't the last node, last.nextKey will properly set at start of new loop
|
|
20729
|
+
last.nextKey = undefined;
|
|
20730
|
+
}
|
|
20731
|
+
this.lastKey = last?.key ?? null;
|
|
20732
|
+
}
|
|
20733
|
+
*[Symbol.iterator]() {
|
|
20734
|
+
yield* this.iterable;
|
|
20735
|
+
}
|
|
20736
|
+
get size() {
|
|
20737
|
+
return this.keyMap.size;
|
|
20738
|
+
}
|
|
20739
|
+
getKeys() {
|
|
20740
|
+
return this.keyMap.keys();
|
|
20741
|
+
}
|
|
20742
|
+
getKeyBefore(key) {
|
|
20743
|
+
let node = this.keyMap.get(key);
|
|
20744
|
+
return node ? node.prevKey ?? null : null;
|
|
20745
|
+
}
|
|
20746
|
+
getKeyAfter(key) {
|
|
20747
|
+
let node = this.keyMap.get(key);
|
|
20748
|
+
return node ? node.nextKey ?? null : null;
|
|
20749
|
+
}
|
|
20750
|
+
getFirstKey() {
|
|
20751
|
+
return this.firstKey;
|
|
20752
|
+
}
|
|
20753
|
+
getLastKey() {
|
|
20754
|
+
return this.lastKey;
|
|
20755
|
+
}
|
|
20756
|
+
getItem(key) {
|
|
20757
|
+
return this.keyMap.get(key) ?? null;
|
|
20758
|
+
}
|
|
20759
|
+
at(idx) {
|
|
20760
|
+
const keys = [
|
|
20761
|
+
...this.getKeys()
|
|
20762
|
+
];
|
|
20763
|
+
return this.getItem(keys[idx]);
|
|
20764
|
+
}
|
|
20765
|
+
}
|
|
20766
|
+
|
|
20767
|
+
/*
|
|
20768
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
20769
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20770
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20771
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20772
|
+
*
|
|
20773
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20774
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20775
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20776
|
+
* governing permissions and limitations under the License.
|
|
20777
|
+
*/
|
|
20778
|
+
|
|
20779
|
+
|
|
20780
|
+
|
|
20781
|
+
|
|
20782
|
+
|
|
20783
|
+
function $6b915bde6cd300dd$export$728d6ba534403756(props) {
|
|
20784
|
+
let { onExpandedChange: onExpandedChange } = props;
|
|
20785
|
+
let [expandedKeys, setExpandedKeys] = ($3e6197669829fe11$export$40bfa8c7b0832715)(props.expandedKeys ? new Set(props.expandedKeys) : undefined, props.defaultExpandedKeys ? new Set(props.defaultExpandedKeys) : new Set(), onExpandedChange);
|
|
20786
|
+
let selectionState = ($60f19cefd567a3e4$export$253fe78d46329472)(props);
|
|
20787
|
+
let disabledKeys = (useMemo)(()=>props.disabledKeys ? new Set(props.disabledKeys) : new Set(), [
|
|
20788
|
+
props.disabledKeys
|
|
20789
|
+
]);
|
|
20790
|
+
let tree = ($d03379b88399b8c5$export$6cd28814d92fa9c9)(props, (useCallback)((nodes)=>new ($df1fcc684d3b021a$export$863faf230ee2118a)(nodes, {
|
|
20791
|
+
expandedKeys: expandedKeys
|
|
20792
|
+
}), [
|
|
20793
|
+
expandedKeys
|
|
20794
|
+
]), null);
|
|
20795
|
+
// Reset focused key if that item is deleted from the collection.
|
|
20796
|
+
(useEffect)(()=>{
|
|
20797
|
+
if (selectionState.focusedKey != null && !tree.getItem(selectionState.focusedKey)) selectionState.setFocusedKey(null);
|
|
20798
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
20799
|
+
}, [
|
|
20800
|
+
tree,
|
|
20801
|
+
selectionState.focusedKey
|
|
20802
|
+
]);
|
|
20803
|
+
let onToggle = (key)=>{
|
|
20804
|
+
setExpandedKeys($6b915bde6cd300dd$var$toggleKey(expandedKeys, key));
|
|
20805
|
+
};
|
|
20806
|
+
return {
|
|
20807
|
+
collection: tree,
|
|
20808
|
+
expandedKeys: expandedKeys,
|
|
20809
|
+
disabledKeys: disabledKeys,
|
|
20810
|
+
toggleKey: onToggle,
|
|
20811
|
+
setExpandedKeys: setExpandedKeys,
|
|
20812
|
+
selectionManager: new ($4a07ac835f260f78$export$6c8a5aaad13c9852)(tree, selectionState)
|
|
20813
|
+
};
|
|
20814
|
+
}
|
|
20815
|
+
function $6b915bde6cd300dd$var$toggleKey(set, key) {
|
|
20816
|
+
let res = new Set(set);
|
|
20817
|
+
if (res.has(key)) res.delete(key);
|
|
20818
|
+
else res.add(key);
|
|
20819
|
+
return res;
|
|
20820
|
+
}
|
|
20821
|
+
|
|
20822
|
+
/*
|
|
20823
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
20824
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
20825
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
20826
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
20827
|
+
*
|
|
20828
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
20829
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
20830
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
20831
|
+
* governing permissions and limitations under the License.
|
|
20832
|
+
*/
|
|
20833
|
+
|
|
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
|
+
const $49319ee1285aa241$export$c7e742effb1c51e2 = /*#__PURE__*/ (createContext)(null);
|
|
20860
|
+
const $49319ee1285aa241$export$24aad8519b95b41b = /*#__PURE__*/ (createContext)(null);
|
|
20861
|
+
const $49319ee1285aa241$export$795aec4671cbae19 = /*#__PURE__*/ (createContext)(null);
|
|
20862
|
+
const $49319ee1285aa241$var$SelectionManagerContext = /*#__PURE__*/ (createContext)(null);
|
|
20863
|
+
function $49319ee1285aa241$export$27d2ad3c5815583e(props) {
|
|
20864
|
+
let state = ($e3403870bfb691da$export$79fefeb1c2091ac3)(props);
|
|
20865
|
+
let ref = (useRef)(null);
|
|
20866
|
+
let { menuTriggerProps: menuTriggerProps, menuProps: menuProps } = ($f19b83c1486f45cc$export$dc9c12ed27dd1b49)({
|
|
20867
|
+
...props,
|
|
20868
|
+
type: 'menu'
|
|
20869
|
+
}, state, ref);
|
|
20870
|
+
// Allows menu width to match button
|
|
20871
|
+
let [buttonWidth, setButtonWidth] = (useState)(null);
|
|
20872
|
+
let onResize = (useCallback)(()=>{
|
|
20873
|
+
if (ref.current) setButtonWidth(ref.current.offsetWidth + 'px');
|
|
20874
|
+
}, [
|
|
20875
|
+
ref
|
|
20876
|
+
]);
|
|
20877
|
+
($970072cf4b13fde3$export$683480f191c0e3ea)({
|
|
20878
|
+
ref: ref,
|
|
20879
|
+
onResize: onResize
|
|
20880
|
+
});
|
|
20881
|
+
let scrollRef = (useRef)(null);
|
|
20882
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
20883
|
+
values: [
|
|
20884
|
+
[
|
|
20885
|
+
$49319ee1285aa241$export$c7e742effb1c51e2,
|
|
20886
|
+
{
|
|
20887
|
+
...menuProps,
|
|
20888
|
+
ref: scrollRef
|
|
20889
|
+
}
|
|
20890
|
+
],
|
|
20891
|
+
[
|
|
20892
|
+
($f2ff30fde7b014be$export$d2f961adcb0afbe),
|
|
20893
|
+
state
|
|
20894
|
+
],
|
|
20895
|
+
[
|
|
20896
|
+
$49319ee1285aa241$export$795aec4671cbae19,
|
|
20897
|
+
state
|
|
20898
|
+
],
|
|
20899
|
+
[
|
|
20900
|
+
($542a13ca2fa5b484$export$9b9a0cd73afb7ca4),
|
|
20901
|
+
{
|
|
20902
|
+
trigger: 'MenuTrigger',
|
|
20903
|
+
triggerRef: ref,
|
|
20904
|
+
scrollRef: scrollRef,
|
|
20905
|
+
placement: 'bottom start',
|
|
20906
|
+
style: {
|
|
20907
|
+
'--trigger-width': buttonWidth
|
|
20908
|
+
},
|
|
20909
|
+
'aria-labelledby': menuProps['aria-labelledby']
|
|
20910
|
+
}
|
|
20911
|
+
]
|
|
20912
|
+
]
|
|
20913
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(($0d47b37c475c5231$export$3351871ee4b288b8), {
|
|
20914
|
+
...menuTriggerProps,
|
|
20915
|
+
ref: ref,
|
|
20916
|
+
isPressed: state.isOpen
|
|
20917
|
+
}, props.children));
|
|
20918
|
+
}
|
|
20919
|
+
const $49319ee1285aa241$var$SubmenuTriggerContext = /*#__PURE__*/ (createContext)(null);
|
|
20920
|
+
class $49319ee1285aa241$var$SubmenuTriggerNode extends ($6f0c29017aeec335$export$d68d59712b04d9d1) {
|
|
20921
|
+
static{
|
|
20922
|
+
this.type = 'submenutrigger';
|
|
20923
|
+
}
|
|
20924
|
+
filter(collection, newCollection, filterFn) {
|
|
20925
|
+
let triggerNode = collection.getItem(this.firstChildKey);
|
|
20926
|
+
if (triggerNode && filterFn(triggerNode.textValue, this)) {
|
|
20927
|
+
let clone = this.clone();
|
|
20928
|
+
newCollection.addDescendants(clone, collection);
|
|
20929
|
+
return clone;
|
|
20930
|
+
}
|
|
20931
|
+
return null;
|
|
20932
|
+
}
|
|
20933
|
+
}
|
|
20934
|
+
const $49319ee1285aa241$export$ecabc99eeffab7ca = /*#__PURE__*/ ($42ceafc619f9c3ba$export$e953bb1cd0f19726)($49319ee1285aa241$var$SubmenuTriggerNode, (props, ref, item)=>{
|
|
20935
|
+
let { CollectionBranch: CollectionBranch } = (useContext)(($263ab7fc0f95ccdb$export$4feb769f8ddf26c5));
|
|
20936
|
+
let state = (useContext)($49319ee1285aa241$export$24aad8519b95b41b);
|
|
20937
|
+
let rootMenuTriggerState = (useContext)($49319ee1285aa241$export$795aec4671cbae19);
|
|
20938
|
+
let submenuTriggerState = ($5b3242e27644e8f1$export$cfc51cf86138bf98)({
|
|
20939
|
+
triggerKey: item.key
|
|
20940
|
+
}, rootMenuTriggerState);
|
|
20941
|
+
let submenuRef = (useRef)(null);
|
|
20942
|
+
let itemRef = ($03e8ab2d84d7657a$export$4338b53315abf666)(ref);
|
|
20943
|
+
let { parentMenuRef: parentMenuRef, shouldUseVirtualFocus: shouldUseVirtualFocus } = (useContext)($49319ee1285aa241$var$SubmenuTriggerContext);
|
|
20944
|
+
let { submenuTriggerProps: submenuTriggerProps, submenuProps: submenuProps, popoverProps: popoverProps } = ($8794213c1141208f$export$7138b0d059a6e743)({
|
|
20945
|
+
parentMenuRef: parentMenuRef,
|
|
20946
|
+
submenuRef: submenuRef,
|
|
20947
|
+
delay: props.delay,
|
|
20948
|
+
shouldUseVirtualFocus: shouldUseVirtualFocus
|
|
20949
|
+
}, submenuTriggerState, itemRef);
|
|
20950
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
20951
|
+
values: [
|
|
20952
|
+
[
|
|
20953
|
+
$49319ee1285aa241$var$MenuItemContext,
|
|
20954
|
+
{
|
|
20955
|
+
...submenuTriggerProps,
|
|
20956
|
+
onAction: undefined,
|
|
20957
|
+
ref: itemRef
|
|
20958
|
+
}
|
|
20959
|
+
],
|
|
20960
|
+
[
|
|
20961
|
+
$49319ee1285aa241$export$c7e742effb1c51e2,
|
|
20962
|
+
{
|
|
20963
|
+
ref: submenuRef,
|
|
20964
|
+
...submenuProps
|
|
20965
|
+
}
|
|
20966
|
+
],
|
|
20967
|
+
[
|
|
20968
|
+
($f2ff30fde7b014be$export$d2f961adcb0afbe),
|
|
20969
|
+
submenuTriggerState
|
|
20970
|
+
],
|
|
20971
|
+
[
|
|
20972
|
+
($542a13ca2fa5b484$export$9b9a0cd73afb7ca4),
|
|
20973
|
+
{
|
|
20974
|
+
trigger: 'SubmenuTrigger',
|
|
20975
|
+
triggerRef: itemRef,
|
|
20976
|
+
placement: 'end top',
|
|
20977
|
+
'aria-labelledby': submenuProps['aria-labelledby'],
|
|
20978
|
+
...popoverProps
|
|
20979
|
+
}
|
|
20980
|
+
]
|
|
20981
|
+
]
|
|
20982
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(CollectionBranch, {
|
|
20983
|
+
collection: state.collection,
|
|
20984
|
+
parent: item
|
|
20985
|
+
}), props.children[1]);
|
|
20986
|
+
}, (props)=>props.children[0]);
|
|
20987
|
+
const $49319ee1285aa241$export$d9b273488cd8ce6f = /*#__PURE__*/ (forwardRef)(function Menu(props, ref) {
|
|
20988
|
+
[props, ref] = ($7230ffa83bc0c2cf$export$29f1550f4b0d4415)(props, ref, $49319ee1285aa241$export$c7e742effb1c51e2);
|
|
20989
|
+
// Delay rendering the actual menu until we have the collection so that auto focus works properly.
|
|
20990
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($42ceafc619f9c3ba$export$bf788dd355e3a401), {
|
|
20991
|
+
content: /*#__PURE__*/ ($8WNJc$react).createElement(($42ceafc619f9c3ba$export$fb8073518f34e6ec), props)
|
|
20992
|
+
}, (collection)=>/*#__PURE__*/ ($8WNJc$react).createElement($49319ee1285aa241$var$MenuInner, {
|
|
20993
|
+
props: props,
|
|
20994
|
+
collection: collection,
|
|
20995
|
+
menuRef: ref
|
|
20996
|
+
}));
|
|
20997
|
+
});
|
|
20998
|
+
function $49319ee1285aa241$var$MenuInner({ props: props, collection: collection, menuRef: ref }) {
|
|
20999
|
+
[props, ref] = ($7230ffa83bc0c2cf$export$29f1550f4b0d4415)(props, ref, ($4b38b5b75ecc6208$export$b0d3ecf7112093a7));
|
|
21000
|
+
let { filter: filter, ...autocompleteMenuProps } = props;
|
|
21001
|
+
let filteredCollection = (useMemo)(()=>filter ? collection.filter(filter) : collection, [
|
|
21002
|
+
collection,
|
|
21003
|
+
filter
|
|
21004
|
+
]);
|
|
21005
|
+
let state = ($6b915bde6cd300dd$export$728d6ba534403756)({
|
|
21006
|
+
...props,
|
|
21007
|
+
collection: filteredCollection,
|
|
21008
|
+
children: undefined
|
|
21009
|
+
});
|
|
21010
|
+
let triggerState = (useContext)($49319ee1285aa241$export$795aec4671cbae19);
|
|
21011
|
+
let { isVirtualized: isVirtualized, CollectionRoot: CollectionRoot } = (useContext)(($263ab7fc0f95ccdb$export$4feb769f8ddf26c5));
|
|
21012
|
+
let { menuProps: menuProps } = ($a2d69d6ee8486855$export$38eaa17faae8f579)({
|
|
21013
|
+
...props,
|
|
21014
|
+
isVirtualized: isVirtualized,
|
|
21015
|
+
onClose: props.onClose || triggerState?.close
|
|
21016
|
+
}, state, ref);
|
|
21017
|
+
let renderProps = ($7230ffa83bc0c2cf$export$4d86445c2cf5e3)({
|
|
21018
|
+
...props,
|
|
21019
|
+
children: undefined,
|
|
21020
|
+
defaultClassName: 'react-aria-Menu',
|
|
21021
|
+
values: {
|
|
21022
|
+
isEmpty: state.collection.size === 0
|
|
21023
|
+
}
|
|
21024
|
+
});
|
|
21025
|
+
let emptyState = null;
|
|
21026
|
+
if (state.collection.size === 0 && props.renderEmptyState) emptyState = /*#__PURE__*/ ($8WNJc$react).createElement("div", {
|
|
21027
|
+
role: "menuitem",
|
|
21028
|
+
style: {
|
|
21029
|
+
display: 'contents'
|
|
21030
|
+
}
|
|
21031
|
+
}, props.renderEmptyState());
|
|
21032
|
+
let DOMProps = ($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(props, {
|
|
21033
|
+
global: true
|
|
21034
|
+
});
|
|
21035
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($535772f9d2c1f38d$export$20e40289641fbbb6), null, /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$df3a06d6289f983e).div, {
|
|
21036
|
+
...($bbaa08b3cd72f041$export$9d1611c77c2fe928)(DOMProps, renderProps, menuProps),
|
|
21037
|
+
ref: ref,
|
|
21038
|
+
slot: props.slot || undefined,
|
|
21039
|
+
"data-empty": state.collection.size === 0 || undefined,
|
|
21040
|
+
onScroll: props.onScroll
|
|
21041
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
21042
|
+
values: [
|
|
21043
|
+
[
|
|
21044
|
+
$49319ee1285aa241$export$24aad8519b95b41b,
|
|
21045
|
+
state
|
|
21046
|
+
],
|
|
21047
|
+
[
|
|
21048
|
+
($e28ab3efe3e87743$export$6615d83f6de245ce),
|
|
21049
|
+
{
|
|
21050
|
+
elementType: 'div'
|
|
21051
|
+
}
|
|
21052
|
+
],
|
|
21053
|
+
[
|
|
21054
|
+
($263ab7fc0f95ccdb$export$d40e14dec8b060a8),
|
|
21055
|
+
{
|
|
21056
|
+
name: 'MenuSection',
|
|
21057
|
+
render: $49319ee1285aa241$var$MenuSectionInner
|
|
21058
|
+
}
|
|
21059
|
+
],
|
|
21060
|
+
[
|
|
21061
|
+
$49319ee1285aa241$var$SubmenuTriggerContext,
|
|
21062
|
+
{
|
|
21063
|
+
parentMenuRef: ref,
|
|
21064
|
+
shouldUseVirtualFocus: autocompleteMenuProps?.shouldUseVirtualFocus
|
|
21065
|
+
}
|
|
21066
|
+
],
|
|
21067
|
+
[
|
|
21068
|
+
$49319ee1285aa241$var$MenuItemContext,
|
|
21069
|
+
{
|
|
21070
|
+
shouldCloseOnSelect: props.shouldCloseOnSelect
|
|
21071
|
+
}
|
|
21072
|
+
],
|
|
21073
|
+
[
|
|
21074
|
+
($4b38b5b75ecc6208$export$b0d3ecf7112093a7),
|
|
21075
|
+
null
|
|
21076
|
+
],
|
|
21077
|
+
[
|
|
21078
|
+
($4b38b5b75ecc6208$export$698f465ec27e93df),
|
|
21079
|
+
null
|
|
21080
|
+
],
|
|
21081
|
+
[
|
|
21082
|
+
$49319ee1285aa241$var$SelectionManagerContext,
|
|
21083
|
+
state.selectionManager
|
|
21084
|
+
],
|
|
21085
|
+
/* 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 */ [
|
|
21086
|
+
$49319ee1285aa241$export$795aec4671cbae19,
|
|
21087
|
+
triggerState ?? ($e3403870bfb691da$export$79fefeb1c2091ac3)({})
|
|
21088
|
+
]
|
|
21089
|
+
]
|
|
21090
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(($792f28e438b9ad5f$export$758399f318e6385a), null, /*#__PURE__*/ ($8WNJc$react).createElement(CollectionRoot, {
|
|
21091
|
+
collection: state.collection,
|
|
21092
|
+
persistedKeys: ($263ab7fc0f95ccdb$export$90e00781bc59d8f9)(state.selectionManager.focusedKey),
|
|
21093
|
+
scrollRef: ref
|
|
21094
|
+
}))), emptyState));
|
|
21095
|
+
}
|
|
21096
|
+
// A subclass of SelectionManager that forwards focus-related properties to the parent,
|
|
21097
|
+
// but has its own local selection state.
|
|
21098
|
+
class $49319ee1285aa241$var$GroupSelectionManager extends ($4a07ac835f260f78$export$6c8a5aaad13c9852) {
|
|
21099
|
+
constructor(parent, state){
|
|
21100
|
+
super(parent.collection, state);
|
|
21101
|
+
this.parent = parent;
|
|
21102
|
+
}
|
|
21103
|
+
get focusedKey() {
|
|
21104
|
+
return this.parent.focusedKey;
|
|
21105
|
+
}
|
|
21106
|
+
get isFocused() {
|
|
21107
|
+
return this.parent.isFocused;
|
|
21108
|
+
}
|
|
21109
|
+
setFocusedKey(key, childFocusStrategy) {
|
|
21110
|
+
return this.parent.setFocusedKey(key, childFocusStrategy);
|
|
21111
|
+
}
|
|
21112
|
+
setFocused(isFocused) {
|
|
21113
|
+
this.parent.setFocused(isFocused);
|
|
21114
|
+
}
|
|
21115
|
+
get childFocusStrategy() {
|
|
21116
|
+
return this.parent.childFocusStrategy;
|
|
21117
|
+
}
|
|
21118
|
+
}
|
|
21119
|
+
function $49319ee1285aa241$var$MenuSectionInner(props, ref, section, className = 'react-aria-MenuSection') {
|
|
21120
|
+
let state = (useContext)($49319ee1285aa241$export$24aad8519b95b41b);
|
|
21121
|
+
let { CollectionBranch: CollectionBranch } = (useContext)(($263ab7fc0f95ccdb$export$4feb769f8ddf26c5));
|
|
21122
|
+
let [headingRef, heading] = ($7230ffa83bc0c2cf$export$9d4c57ee4c6ffdd8)();
|
|
21123
|
+
let { headingProps: headingProps, groupProps: groupProps } = ($7355d4e5c49461b6$export$73f7a44322579622)({
|
|
21124
|
+
heading: heading,
|
|
21125
|
+
'aria-label': section.props['aria-label'] ?? undefined
|
|
21126
|
+
});
|
|
21127
|
+
let renderProps = ($7230ffa83bc0c2cf$export$4d86445c2cf5e3)({
|
|
21128
|
+
...props,
|
|
21129
|
+
id: undefined,
|
|
21130
|
+
children: undefined,
|
|
21131
|
+
defaultClassName: className,
|
|
21132
|
+
className: section.props?.className,
|
|
21133
|
+
style: section.props?.style,
|
|
21134
|
+
values: undefined
|
|
21135
|
+
});
|
|
21136
|
+
let parent = (useContext)($49319ee1285aa241$var$SelectionManagerContext);
|
|
21137
|
+
let selectionState = ($60f19cefd567a3e4$export$253fe78d46329472)(props);
|
|
21138
|
+
let manager = props.selectionMode != null ? new $49319ee1285aa241$var$GroupSelectionManager(parent, selectionState) : parent;
|
|
21139
|
+
let closeOnSelect = ($7230ffa83bc0c2cf$export$fabf2dc03a41866e)($49319ee1285aa241$var$MenuItemContext)?.shouldCloseOnSelect;
|
|
21140
|
+
let DOMProps = ($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(props, {
|
|
21141
|
+
global: true
|
|
21142
|
+
});
|
|
21143
|
+
delete DOMProps.id;
|
|
21144
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$df3a06d6289f983e).section, {
|
|
21145
|
+
...($bbaa08b3cd72f041$export$9d1611c77c2fe928)(DOMProps, renderProps, groupProps),
|
|
21146
|
+
ref: ref
|
|
21147
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
21148
|
+
values: [
|
|
21149
|
+
[
|
|
21150
|
+
($53e61d82d8b8611d$export$e0e4026c12a8bdbb),
|
|
21151
|
+
{
|
|
21152
|
+
...headingProps,
|
|
21153
|
+
ref: headingRef
|
|
21154
|
+
}
|
|
21155
|
+
],
|
|
21156
|
+
[
|
|
21157
|
+
$49319ee1285aa241$var$SelectionManagerContext,
|
|
21158
|
+
manager
|
|
21159
|
+
],
|
|
21160
|
+
[
|
|
21161
|
+
$49319ee1285aa241$var$MenuItemContext,
|
|
21162
|
+
{
|
|
21163
|
+
shouldCloseOnSelect: props.shouldCloseOnSelect ?? closeOnSelect
|
|
21164
|
+
}
|
|
21165
|
+
]
|
|
21166
|
+
]
|
|
21167
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(CollectionBranch, {
|
|
21168
|
+
collection: state.collection,
|
|
21169
|
+
parent: section
|
|
21170
|
+
})));
|
|
21171
|
+
}
|
|
21172
|
+
const $49319ee1285aa241$export$4b1545b4f2016d26 = /*#__PURE__*/ ($42ceafc619f9c3ba$export$e953bb1cd0f19726)(($6f0c29017aeec335$export$437f11dc9b403b78), $49319ee1285aa241$var$MenuSectionInner);
|
|
21173
|
+
const $49319ee1285aa241$var$MenuItemContext = /*#__PURE__*/ (createContext)(null);
|
|
21174
|
+
const $49319ee1285aa241$export$2ce376c2cc3355c8 = /*#__PURE__*/ ($42ceafc619f9c3ba$export$18af5c7a9e9b3664)(($6f0c29017aeec335$export$fd11f34e1d07f134), function MenuItem(props, forwardedRef, item) {
|
|
21175
|
+
[props, forwardedRef] = ($7230ffa83bc0c2cf$export$29f1550f4b0d4415)(props, forwardedRef, $49319ee1285aa241$var$MenuItemContext);
|
|
21176
|
+
let id = ($7230ffa83bc0c2cf$export$fabf2dc03a41866e)($49319ee1285aa241$var$MenuItemContext)?.id;
|
|
21177
|
+
let state = (useContext)($49319ee1285aa241$export$24aad8519b95b41b);
|
|
21178
|
+
let ref = ($03e8ab2d84d7657a$export$4338b53315abf666)(forwardedRef);
|
|
21179
|
+
let selectionManager = (useContext)($49319ee1285aa241$var$SelectionManagerContext);
|
|
21180
|
+
let { isVirtualized: isVirtualized } = (useContext)(($263ab7fc0f95ccdb$export$4feb769f8ddf26c5));
|
|
21181
|
+
let { menuItemProps: menuItemProps, labelProps: labelProps, descriptionProps: descriptionProps, keyboardShortcutProps: keyboardShortcutProps, ...states } = ($1a9c2c840fd36413$export$9d32628fc2aea7da)({
|
|
21182
|
+
...props,
|
|
21183
|
+
id: id,
|
|
21184
|
+
key: item.key,
|
|
21185
|
+
selectionManager: selectionManager,
|
|
21186
|
+
isVirtualized: isVirtualized
|
|
21187
|
+
}, state, ref);
|
|
21188
|
+
let { hoverProps: hoverProps, isHovered: isHovered } = ($e969f22b6713ca4a$export$ae780daf29e6d456)({
|
|
21189
|
+
isDisabled: states.isDisabled
|
|
21190
|
+
});
|
|
21191
|
+
let renderProps = ($7230ffa83bc0c2cf$export$4d86445c2cf5e3)({
|
|
21192
|
+
...props,
|
|
21193
|
+
id: undefined,
|
|
21194
|
+
children: item.rendered,
|
|
21195
|
+
defaultClassName: 'react-aria-MenuItem',
|
|
21196
|
+
values: {
|
|
21197
|
+
...states,
|
|
21198
|
+
isHovered: isHovered,
|
|
21199
|
+
isFocusVisible: states.isFocusVisible,
|
|
21200
|
+
selectionMode: selectionManager.selectionMode,
|
|
21201
|
+
selectionBehavior: selectionManager.selectionBehavior,
|
|
21202
|
+
hasSubmenu: !!props['aria-haspopup'],
|
|
21203
|
+
isOpen: props['aria-expanded'] === 'true'
|
|
21204
|
+
}
|
|
21205
|
+
});
|
|
21206
|
+
let ElementType = props.href ? ($7230ffa83bc0c2cf$export$df3a06d6289f983e).a : ($7230ffa83bc0c2cf$export$df3a06d6289f983e).div;
|
|
21207
|
+
let DOMProps = ($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(props, {
|
|
21208
|
+
global: true
|
|
21209
|
+
});
|
|
21210
|
+
delete DOMProps.id;
|
|
21211
|
+
delete DOMProps.onClick;
|
|
21212
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(ElementType, {
|
|
21213
|
+
...($bbaa08b3cd72f041$export$9d1611c77c2fe928)(DOMProps, renderProps, menuItemProps, hoverProps),
|
|
21214
|
+
ref: ref,
|
|
21215
|
+
"data-disabled": states.isDisabled || undefined,
|
|
21216
|
+
"data-hovered": isHovered || undefined,
|
|
21217
|
+
"data-focused": states.isFocused || undefined,
|
|
21218
|
+
"data-focus-visible": states.isFocusVisible || undefined,
|
|
21219
|
+
"data-pressed": states.isPressed || undefined,
|
|
21220
|
+
"data-selected": states.isSelected || undefined,
|
|
21221
|
+
"data-selection-mode": selectionManager.selectionMode === 'none' ? undefined : selectionManager.selectionMode,
|
|
21222
|
+
"data-has-submenu": !!props['aria-haspopup'] || undefined,
|
|
21223
|
+
"data-open": props['aria-expanded'] === 'true' || undefined
|
|
21224
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
21225
|
+
values: [
|
|
21226
|
+
[
|
|
21227
|
+
($efe09c6d1c304b50$export$9afb8bc826b033ea),
|
|
21228
|
+
{
|
|
21229
|
+
slots: {
|
|
21230
|
+
[($7230ffa83bc0c2cf$export$c62b8e45d58ddad9)]: labelProps,
|
|
21231
|
+
label: labelProps,
|
|
21232
|
+
description: descriptionProps
|
|
21233
|
+
}
|
|
21234
|
+
}
|
|
21235
|
+
],
|
|
21236
|
+
[
|
|
21237
|
+
($650bea62ab5f5f0f$export$744d98a3b8a94e1c),
|
|
21238
|
+
keyboardShortcutProps
|
|
21239
|
+
],
|
|
21240
|
+
[
|
|
21241
|
+
($91fe5e721c7f36c1$export$c9549807523555e0),
|
|
21242
|
+
{
|
|
21243
|
+
isSelected: states.isSelected
|
|
21244
|
+
}
|
|
21245
|
+
]
|
|
21246
|
+
]
|
|
21247
|
+
}, renderProps.children));
|
|
21248
|
+
});
|
|
21249
|
+
|
|
21250
|
+
/*
|
|
21251
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
21252
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
21253
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
21254
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
21255
|
+
*
|
|
21256
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
21257
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
21258
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
21259
|
+
* governing permissions and limitations under the License.
|
|
21260
|
+
*/
|
|
21261
|
+
|
|
21262
|
+
|
|
21263
|
+
|
|
21264
|
+
|
|
21265
|
+
|
|
21266
|
+
function $13150e6629d46e45$export$d55e7ee900f34e93(props, ref) {
|
|
21267
|
+
let { role: role = 'dialog' } = props;
|
|
21268
|
+
let titleId = ($390e54f620492c70$export$b4cc09c592e8fdb8)();
|
|
21269
|
+
titleId = props['aria-label'] ? undefined : titleId;
|
|
21270
|
+
let isRefocusing = (useRef)(false);
|
|
21271
|
+
// Focus the dialog itself on mount, unless a child element is already focused.
|
|
21272
|
+
(useEffect)(()=>{
|
|
21273
|
+
if (ref.current && !($23f2114a1b82827e$export$b4f377a2b6254582)(ref.current)) {
|
|
21274
|
+
($f192c2f16961cbe0$export$80f3e147d781571c)(ref.current);
|
|
21275
|
+
// Safari on iOS does not move the VoiceOver cursor to the dialog
|
|
21276
|
+
// or announce that it has opened until it has rendered. A workaround
|
|
21277
|
+
// is to wait for half a second, then blur and re-focus the dialog.
|
|
21278
|
+
let timeout = setTimeout(()=>{
|
|
21279
|
+
// Check that the dialog is still focused, or focused was lost to the body.
|
|
21280
|
+
if (($23f2114a1b82827e$export$cd4e5573fbe2b576)() === ref.current || ($23f2114a1b82827e$export$cd4e5573fbe2b576)() === document.body) {
|
|
21281
|
+
isRefocusing.current = true;
|
|
21282
|
+
if (ref.current) {
|
|
21283
|
+
ref.current.blur();
|
|
21284
|
+
($f192c2f16961cbe0$export$80f3e147d781571c)(ref.current);
|
|
21285
|
+
}
|
|
21286
|
+
isRefocusing.current = false;
|
|
21287
|
+
}
|
|
21288
|
+
}, 500);
|
|
21289
|
+
return ()=>{
|
|
21290
|
+
clearTimeout(timeout);
|
|
21291
|
+
};
|
|
21292
|
+
}
|
|
21293
|
+
}, [
|
|
21294
|
+
ref
|
|
21295
|
+
]);
|
|
21296
|
+
($d7a937236970dc7f$export$14c98a7594375490)();
|
|
21297
|
+
// Warn in dev mode if the dialog has no accessible title.
|
|
21298
|
+
// This catches a common mistake where useDialog and useOverlayTriggerState
|
|
21299
|
+
// are used in the same component, causing the title element to not be
|
|
21300
|
+
// in the DOM when useSlotId queries for it.
|
|
21301
|
+
// Check the DOM element directly since aria-labelledby may be added by
|
|
21302
|
+
// wrapper components (e.g. RAC Dialog uses trigger ID as a fallback).
|
|
21303
|
+
let hasWarned = (useRef)(false);
|
|
21304
|
+
(useEffect)(()=>{
|
|
21305
|
+
if (process.env.NODE_ENV !== 'production' && !hasWarned.current && ref.current) {
|
|
21306
|
+
let el = ref.current;
|
|
21307
|
+
let hasAriaLabel = el.hasAttribute('aria-label');
|
|
21308
|
+
let hasAriaLabelledby = el.hasAttribute('aria-labelledby');
|
|
21309
|
+
if (!hasAriaLabel && !hasAriaLabelledby) {
|
|
21310
|
+
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.");
|
|
21311
|
+
hasWarned.current = true;
|
|
21312
|
+
}
|
|
21313
|
+
}
|
|
21314
|
+
});
|
|
21315
|
+
// We do not use aria-modal due to a Safari bug which forces the first focusable element to be focused
|
|
21316
|
+
// on mount when inside an iframe, no matter which element we programmatically focus.
|
|
21317
|
+
// See https://bugs.webkit.org/show_bug.cgi?id=211934.
|
|
21318
|
+
// useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
|
|
21319
|
+
// even without aria-modal on the dialog itself.
|
|
21320
|
+
return {
|
|
21321
|
+
dialogProps: {
|
|
21322
|
+
...($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(props, {
|
|
21323
|
+
labelable: true
|
|
21324
|
+
}),
|
|
21325
|
+
role: role,
|
|
21326
|
+
tabIndex: -1,
|
|
21327
|
+
'aria-labelledby': props['aria-labelledby'] || titleId,
|
|
21328
|
+
// Prevent blur events from reaching useOverlay, which may cause
|
|
21329
|
+
// popovers to close. Since focus is contained within the dialog,
|
|
21330
|
+
// we don't want this to occur due to the above useEffect.
|
|
21331
|
+
onBlur: (e)=>{
|
|
21332
|
+
if (isRefocusing.current) e.stopPropagation();
|
|
21333
|
+
}
|
|
21334
|
+
},
|
|
21335
|
+
titleProps: {
|
|
21336
|
+
id: titleId
|
|
21337
|
+
}
|
|
21338
|
+
};
|
|
21339
|
+
}
|
|
21340
|
+
|
|
21341
|
+
/*
|
|
21342
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
21343
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
21344
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
21345
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
21346
|
+
*
|
|
21347
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
21348
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
21349
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
21350
|
+
* governing permissions and limitations under the License.
|
|
21351
|
+
*/
|
|
21352
|
+
|
|
21353
|
+
|
|
21354
|
+
|
|
21355
|
+
|
|
21356
|
+
|
|
21357
|
+
|
|
21358
|
+
|
|
21359
|
+
|
|
21360
|
+
|
|
21361
|
+
|
|
21362
|
+
|
|
21363
|
+
|
|
21364
|
+
|
|
21365
|
+
const $f2ff30fde7b014be$export$8b93a07348a7730c = /*#__PURE__*/ (createContext)(null);
|
|
21366
|
+
const $f2ff30fde7b014be$export$d2f961adcb0afbe = /*#__PURE__*/ (createContext)(null);
|
|
21367
|
+
function $f2ff30fde7b014be$export$2e1e1122cf0cba88(props) {
|
|
21368
|
+
// Use useMenuTriggerState instead of useOverlayTriggerState in case a menu is embedded in the dialog.
|
|
21369
|
+
// This is needed to handle submenus.
|
|
21370
|
+
let state = ($e3403870bfb691da$export$79fefeb1c2091ac3)(props);
|
|
21371
|
+
let buttonRef = (useRef)(null);
|
|
21372
|
+
let { triggerProps: triggerProps, overlayProps: overlayProps } = ($f282e36c29c025e8$export$f9d5c8beee7d008d)({
|
|
21373
|
+
type: 'dialog'
|
|
21374
|
+
}, state, buttonRef);
|
|
21375
|
+
// Allows popover width to match trigger element
|
|
21376
|
+
let [buttonWidth, setButtonWidth] = (useState)(null);
|
|
21377
|
+
let onResize = (useCallback)(()=>{
|
|
21378
|
+
if (buttonRef.current) setButtonWidth(buttonRef.current.offsetWidth + 'px');
|
|
21379
|
+
}, [
|
|
21380
|
+
buttonRef
|
|
21381
|
+
]);
|
|
21382
|
+
($970072cf4b13fde3$export$683480f191c0e3ea)({
|
|
21383
|
+
ref: buttonRef,
|
|
21384
|
+
onResize: onResize
|
|
21385
|
+
});
|
|
21386
|
+
// Label dialog by the trigger as a fallback if there is no title slot.
|
|
21387
|
+
// This is done in RAC instead of hooks because otherwise we cannot distinguish
|
|
21388
|
+
// between context and props. Normally aria-labelledby overrides the title
|
|
21389
|
+
// but when sent by context we want the title to win.
|
|
21390
|
+
triggerProps.id = ($390e54f620492c70$export$f680877a34711e37)();
|
|
21391
|
+
overlayProps['aria-labelledby'] = triggerProps.id;
|
|
21392
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
21393
|
+
values: [
|
|
21394
|
+
[
|
|
21395
|
+
$f2ff30fde7b014be$export$d2f961adcb0afbe,
|
|
21396
|
+
state
|
|
21397
|
+
],
|
|
21398
|
+
[
|
|
21399
|
+
($49319ee1285aa241$export$795aec4671cbae19),
|
|
21400
|
+
state
|
|
21401
|
+
],
|
|
21402
|
+
[
|
|
21403
|
+
$f2ff30fde7b014be$export$8b93a07348a7730c,
|
|
21404
|
+
overlayProps
|
|
21405
|
+
],
|
|
21406
|
+
[
|
|
21407
|
+
($542a13ca2fa5b484$export$9b9a0cd73afb7ca4),
|
|
21408
|
+
{
|
|
21409
|
+
trigger: 'DialogTrigger',
|
|
21410
|
+
triggerRef: buttonRef,
|
|
21411
|
+
'aria-labelledby': overlayProps['aria-labelledby'],
|
|
21412
|
+
style: {
|
|
21413
|
+
'--trigger-width': buttonWidth
|
|
21414
|
+
}
|
|
21415
|
+
}
|
|
21416
|
+
]
|
|
21417
|
+
]
|
|
21418
|
+
}, /*#__PURE__*/ ($8WNJc$react).createElement(($0d47b37c475c5231$export$3351871ee4b288b8), {
|
|
21419
|
+
...triggerProps,
|
|
21420
|
+
ref: buttonRef,
|
|
21421
|
+
isPressed: state.isOpen
|
|
21422
|
+
}, props.children));
|
|
21423
|
+
}
|
|
21424
|
+
const $f2ff30fde7b014be$export$3ddf2d174ce01153 = /*#__PURE__*/ (forwardRef)(function Dialog(props, ref) {
|
|
21425
|
+
let originalAriaLabelledby = props['aria-labelledby'];
|
|
21426
|
+
[props, ref] = ($7230ffa83bc0c2cf$export$29f1550f4b0d4415)(props, ref, $f2ff30fde7b014be$export$8b93a07348a7730c);
|
|
21427
|
+
let { dialogProps: dialogProps, titleProps: titleProps } = ($13150e6629d46e45$export$d55e7ee900f34e93)({
|
|
21428
|
+
...props,
|
|
21429
|
+
// Only pass aria-labelledby from props, not context.
|
|
21430
|
+
// Context is used as a fallback below.
|
|
21431
|
+
'aria-labelledby': originalAriaLabelledby
|
|
21432
|
+
}, ref);
|
|
21433
|
+
let state = (useContext)($f2ff30fde7b014be$export$d2f961adcb0afbe);
|
|
21434
|
+
if (!dialogProps['aria-label'] && !dialogProps['aria-labelledby']) {
|
|
21435
|
+
// If aria-labelledby exists on props, we know it came from context.
|
|
21436
|
+
// Use that as a fallback in case there is no title slot.
|
|
21437
|
+
if (props['aria-labelledby']) dialogProps['aria-labelledby'] = props['aria-labelledby'];
|
|
21438
|
+
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.');
|
|
21439
|
+
}
|
|
21440
|
+
let renderProps = ($7230ffa83bc0c2cf$export$4d86445c2cf5e3)({
|
|
21441
|
+
defaultClassName: 'react-aria-Dialog',
|
|
21442
|
+
className: props.className,
|
|
21443
|
+
style: props.style,
|
|
21444
|
+
children: props.children,
|
|
21445
|
+
values: {
|
|
21446
|
+
close: state?.close || (()=>{})
|
|
21447
|
+
}
|
|
21448
|
+
});
|
|
21449
|
+
let DOMProps = ($8e9d2fae0ecb9001$export$457c3d6518dd4c6f)(props, {
|
|
21450
|
+
global: true
|
|
21451
|
+
});
|
|
21452
|
+
return /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$df3a06d6289f983e).section, {
|
|
21453
|
+
...($bbaa08b3cd72f041$export$9d1611c77c2fe928)(DOMProps, renderProps, dialogProps),
|
|
21454
|
+
render: props.render,
|
|
21455
|
+
ref: ref,
|
|
21456
|
+
slot: props.slot || undefined
|
|
20225
21457
|
}, /*#__PURE__*/ ($8WNJc$react).createElement(($7230ffa83bc0c2cf$export$2881499e37b75b9a), {
|
|
20226
21458
|
values: [
|
|
20227
21459
|
[
|
|
@@ -28946,11 +30178,11 @@ function $05a50f7d78b03ad9$var$TooltipInner(props) {
|
|
|
28946
30178
|
}, renderProps.children));
|
|
28947
30179
|
}
|
|
28948
30180
|
|
|
28949
|
-
var css_248z$
|
|
28950
|
-
styleInject(css_248z$
|
|
30181
|
+
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";
|
|
30182
|
+
styleInject(css_248z$C);
|
|
28951
30183
|
|
|
28952
|
-
var css_248z$
|
|
28953
|
-
styleInject(css_248z$
|
|
30184
|
+
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";
|
|
30185
|
+
styleInject(css_248z$B);
|
|
28954
30186
|
|
|
28955
30187
|
function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
|
|
28956
30188
|
return (jsx($7705c033048f6da7$export$353f5b6fc5456de1, { className: `bcds-react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
|
|
@@ -28970,8 +30202,8 @@ function Accordion({ label, children, ...props }) {
|
|
|
28970
30202
|
return (jsx($a3e16eab0ea4036c$export$74a362b31437ec83, { className: `bcds-react-aria-Disclosure`, ...props, children: ({ isExpanded }) => (jsxs(Fragment$1, { children: [jsxs(Button, { className: "bcds-react-aria-Disclosure--Button", size: "small", variant: "link", slot: "trigger", children: [label, isExpanded ? jsx(SvgChevronUpIcon, {}) : jsx(SvgChevronDownIcon, {})] }), jsx($a3e16eab0ea4036c$export$feabaa331e1d464c, { className: "bcds-react-aria-Disclosure--Panel", children: jsx(Fragment$1, { children: children }) })] })) }));
|
|
28971
30203
|
}
|
|
28972
30204
|
|
|
28973
|
-
var css_248z$
|
|
28974
|
-
styleInject(css_248z$
|
|
30205
|
+
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";
|
|
30206
|
+
styleInject(css_248z$A);
|
|
28975
30207
|
|
|
28976
30208
|
function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
28977
30209
|
function getTitle() {
|
|
@@ -28995,8 +30227,8 @@ function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
|
28995
30227
|
return (jsxs(Fragment$1, { children: [title && (jsx("div", { className: "bcds-react-aria-DisclosureGroup--Title", children: getTitle() })), jsx($a3e16eab0ea4036c$export$944aceb4f8c89f10, { className: "bcds-react-aria-DisclosureGroup", ...props, children: children })] }));
|
|
28996
30228
|
}
|
|
28997
30229
|
|
|
28998
|
-
var css_248z$
|
|
28999
|
-
styleInject(css_248z$
|
|
30230
|
+
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";
|
|
30231
|
+
styleInject(css_248z$z);
|
|
29000
30232
|
|
|
29001
30233
|
/* This component implements the Circle Check icon from Font Awesome: https://fontawesome.com/icons/circle-check */
|
|
29002
30234
|
function SvgCheckCircleIcon({ id = "check-icon" }) {
|
|
@@ -29044,15 +30276,15 @@ function AlertBanner({ variant = "info", size = "medium", layout = "fixed", isIc
|
|
|
29044
30276
|
return (jsx("div", { className: `bcds-Alert-Banner ${variant} ${size} ${layout}`, ...props, children: jsxs("div", { className: "bcds-Alert-Banner--Container", children: [" ", !isIconHidden && (jsx("span", { className: "bcds-Alert-Banner--Icon", children: customIcon ? customIcon : getIcon$2(variant) })), jsx("div", { className: "bcds-Alert-Banner--Content", role: role, children: children }), isCloseable && (jsx("span", { className: "bcds-Alert-Banner--closeIcon", children: jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsx(SvgCloseIcon, {}) }) }))] }) }));
|
|
29045
30277
|
}
|
|
29046
30278
|
|
|
29047
|
-
var css_248z$
|
|
29048
|
-
styleInject(css_248z$
|
|
30279
|
+
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";
|
|
30280
|
+
styleInject(css_248z$y);
|
|
29049
30281
|
|
|
29050
30282
|
function ButtonGroup({ orientation = "horizontal", alignment = "start", ariaLabel, children, ...props }) {
|
|
29051
30283
|
return (jsx("div", { className: `bcds-ButtonGroup ${orientation} ${alignment}`, role: "group", "aria-label": ariaLabel, ...props, children: children }));
|
|
29052
30284
|
}
|
|
29053
30285
|
|
|
29054
|
-
var css_248z$
|
|
29055
|
-
styleInject(css_248z$
|
|
30286
|
+
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";
|
|
30287
|
+
styleInject(css_248z$x);
|
|
29056
30288
|
|
|
29057
30289
|
/* Sets correct left icon for selected variant */
|
|
29058
30290
|
function getIcon$1(variant) {
|
|
@@ -29075,11 +30307,11 @@ function AlertDialog({ children, variant = "info", role = "dialog", title, isClo
|
|
|
29075
30307
|
return (jsx($f2ff30fde7b014be$export$3ddf2d174ce01153, { className: `bcds-react-aria-AlertDialog ${variant}`, role: role, ...props, children: ({ close }) => (jsxs(Fragment$1, { children: [jsxs("div", { className: "bcds-react-aria-AlertDialog--Header", children: [!isIconHidden && (jsx("div", { className: "bcds-react-aria-AlertDialog--Icon", children: getIcon$1(variant) })), title && (jsx("div", { className: "bcds-react-aria-AlertDialog--Title", slot: "title", children: title })), isCloseable && (jsx("div", { className: "bcds-react-aria-AlertDialog--closeIcon", children: jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close", type: "button", onPress: close, children: jsx(SvgCloseIcon, {}) }) }))] }), children && (jsx("div", { className: "bcds-react-aria-AlertDialog--children", slot: "children", children: jsx(Fragment$1, { children: children }) })), buttons && (jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }));
|
|
29076
30308
|
}
|
|
29077
30309
|
|
|
29078
|
-
var css_248z$
|
|
29079
|
-
styleInject(css_248z$
|
|
30310
|
+
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";
|
|
30311
|
+
styleInject(css_248z$w);
|
|
29080
30312
|
|
|
29081
|
-
var css_248z$
|
|
29082
|
-
styleInject(css_248z$
|
|
30313
|
+
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";
|
|
30314
|
+
styleInject(css_248z$v);
|
|
29083
30315
|
|
|
29084
30316
|
function Heading({ color = "primary", isUnstyled = false, ...props }) {
|
|
29085
30317
|
return (jsx($2ec61d1d4f780267$export$a8a3e93435678ff9, { className: isUnstyled ? undefined : `bcds-react-aria-Heading ${color}`, ...props }));
|
|
@@ -29105,8 +30337,8 @@ function Calendar({ visibleDuration = { months: 1 }, ...props }) {
|
|
|
29105
30337
|
.toDate(state.timeZone)) }), jsx("div", { className: "bcds-react-aria-Calendar--HeaderButton", children: i === (visibleDuration.months ?? 1) - 1 && (jsx(Button, { slot: "next", size: "xsmall", variant: "tertiary", isIconButton: true, children: jsx(SvgChevronRightIcon, {}) })) })] }), jsx($6f9a1820b787aac7$export$5bd780d491cfc46c, { offset: { months: i }, className: `bcds-react-aria-Calendar--Grid`, weekdayStyle: "short", children: (date) => (jsx($6f9a1820b787aac7$export$5d847498420df57b, { className: "bcds-react-aria-Calendar--Cell", date: date })) })] }, i))) }));
|
|
29106
30338
|
}
|
|
29107
30339
|
|
|
29108
|
-
var css_248z$
|
|
29109
|
-
styleInject(css_248z$
|
|
30340
|
+
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";
|
|
30341
|
+
styleInject(css_248z$u);
|
|
29110
30342
|
|
|
29111
30343
|
function Callout({ variant = "lightGrey", title, description, buttons, role = "note", isLeftBorderDisabled = false, children, ...props }) {
|
|
29112
30344
|
return (jsx("div", { className: `bcds-Callout ${variant} ${isLeftBorderDisabled ? "noBorder" : ""}`, ...props, role: role, children: children ? (children) : (jsx(Fragment$1, { children: jsxs("div", { className: "bcds-Callout--Container", "aria-labelledby": "callout-title", role: role, children: [title && (jsx("span", { className: "bcds-Callout--Title", id: "callout-title", children: title })), description && (jsx("span", { className: "bcds-Callout--Description", children: description })), buttons && (jsx(ButtonGroup, { alignment: "start", orientation: "horizontal", children: buttons }))] }) })) }));
|
|
@@ -29121,32 +30353,32 @@ function SvgDashIcon$1({ id = "dash-icon" }) {
|
|
|
29121
30353
|
return (jsx("svg", { id: id, width: "8", height: "10", viewBox: "0 0 8 2", xmlns: "http://www.w3.org/2000/svg", children: 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" }) }));
|
|
29122
30354
|
}
|
|
29123
30355
|
|
|
29124
|
-
var css_248z$
|
|
29125
|
-
styleInject(css_248z$
|
|
30356
|
+
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";
|
|
30357
|
+
styleInject(css_248z$t);
|
|
29126
30358
|
|
|
29127
30359
|
function Checkbox({ value, children, ...props }) {
|
|
29128
30360
|
return (jsx($ed8ccb2e23e76301$export$48513f6b9f8ce62d, { className: "bcds-react-aria-Checkbox", value: value, ...props, children: ({ isRequired, isSelected, isIndeterminate }) => (jsxs(Fragment$1, { children: [jsxs("div", { className: "checkbox", children: [isSelected && !isIndeterminate && jsx(SvgCheckIcon, {}), isIndeterminate && jsx(SvgDashIcon$1, {})] }), jsxs("span", { className: "label", children: [jsx(Fragment$1, { children: children }), " ", isRequired && "(required)"] })] })) }));
|
|
29129
30361
|
}
|
|
29130
30362
|
|
|
29131
|
-
var css_248z$
|
|
29132
|
-
styleInject(css_248z$
|
|
30363
|
+
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";
|
|
30364
|
+
styleInject(css_248z$s);
|
|
29133
30365
|
|
|
29134
30366
|
function CheckboxGroup({ orientation = "vertical", label, description, errorMessage, flexWrap = "nowrap", children, ...props }) {
|
|
29135
30367
|
return (jsx($ed8ccb2e23e76301$export$4aa08d5625cb8ead, { className: `bcds-react-aria-CheckboxGroup`, ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment$1, { children: [label && (jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-CheckboxGroup--label", children: [label, " ", isRequired && "(required)"] })), jsx("div", { className: `bcds-react-aria-CheckboxGroup--options ${orientation} flex-wrap-${flexWrap}`, children: jsx(Fragment$1, { children: children }) }), description && (jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-CheckboxGroup--description", children: description })), isInvalid && (jsxs("div", { className: "bcds-react-aria-CheckboxGroup--error", children: [jsx(SvgExclamationIcon, {}), jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
29136
30368
|
}
|
|
29137
30369
|
|
|
29138
|
-
var css_248z$
|
|
29139
|
-
styleInject(css_248z$
|
|
30370
|
+
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";
|
|
30371
|
+
styleInject(css_248z$r);
|
|
29140
30372
|
|
|
29141
|
-
var css_248z$
|
|
29142
|
-
styleInject(css_248z$
|
|
30373
|
+
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";
|
|
30374
|
+
styleInject(css_248z$q);
|
|
29143
30375
|
|
|
29144
30376
|
function Dialog({ isCloseable = true, role = "dialog", children, ...props }) {
|
|
29145
30377
|
return (jsx($f2ff30fde7b014be$export$3ddf2d174ce01153, { className: "bcds-react-aria-Dialog", role: role, ...props, children: ({ close }) => (jsx(Fragment$1, { children: jsxs("div", { className: "bcds-react-aria-Dialog--Container", children: [isCloseable && (jsx("span", { className: "bcds-react-aria-Dialog--closeIcon", children: jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close", type: "button", onPress: close, children: jsx(SvgCloseIcon, {}) }) })), jsx(Fragment$1, { children: children })] }) })) }));
|
|
29146
30378
|
}
|
|
29147
30379
|
|
|
29148
|
-
var css_248z$
|
|
29149
|
-
styleInject(css_248z$
|
|
30380
|
+
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";
|
|
30381
|
+
styleInject(css_248z$p);
|
|
29150
30382
|
|
|
29151
30383
|
function Separator({ size = "medium", ...props }) {
|
|
29152
30384
|
return (jsx($e28ab3efe3e87743$export$1ff3c3f08ae963c0, { className: `bcds-react-aria-Separator ${size}`, ...props }));
|
|
@@ -29184,15 +30416,15 @@ function DatePicker({ size = "medium", label, description, errorMessage, showFor
|
|
|
29184
30416
|
return isBrowserLocaleUsed ? (datePicker) : (jsx($2eb8e6d23f3d0cb0$export$a54013f0d02a8f82, { locale: "en-CA", children: datePicker }));
|
|
29185
30417
|
}
|
|
29186
30418
|
|
|
29187
|
-
var css_248z$
|
|
29188
|
-
styleInject(css_248z$
|
|
30419
|
+
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";
|
|
30420
|
+
styleInject(css_248z$o);
|
|
29189
30421
|
|
|
29190
30422
|
function SvgBcLogo({ id = "bcgov-logo" }) {
|
|
29191
30423
|
return (jsxs("svg", { id: id, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 847.65 327.01", children: [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" }), jsxs("g", { children: [jsxs("g", { children: [jsx("rect", { x: "415.4", y: "252.98", width: "314.66", height: "3.82", className: "bcds-bc-logo--goldFill" }), 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" }), 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" }), 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" }), 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" }), 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" }), 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" }), 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" }), 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" }), 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" }), 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" }), 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" }), jsxs("g", { children: [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" }), 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" }), 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" }), 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" })] }), jsx("rect", { width: "847.65", height: "327.01", className: "bcds-bc-logo--noFill" })] }), jsxs("g", { children: [jsx("polygon", { points: "295.89 176.17 301.27 178.4 313.19 170.08 295.89 176.17", className: "bcds-bc-logo--goldFill" }), 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" })] }), 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" })] })] }));
|
|
29192
30424
|
}
|
|
29193
30425
|
|
|
29194
|
-
var css_248z$
|
|
29195
|
-
styleInject(css_248z$
|
|
30426
|
+
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";
|
|
30427
|
+
styleInject(css_248z$n);
|
|
29196
30428
|
|
|
29197
30429
|
/**
|
|
29198
30430
|
* A titled list of links for use in the Footer. Rendered inside a `<figure>`
|
|
@@ -29246,8 +30478,8 @@ function Form({ ...props }) {
|
|
|
29246
30478
|
return jsx($cdaed739b1139372$export$a7fed597f4b8afd8, { ...props });
|
|
29247
30479
|
}
|
|
29248
30480
|
|
|
29249
|
-
var css_248z$
|
|
29250
|
-
styleInject(css_248z$
|
|
30481
|
+
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";
|
|
30482
|
+
styleInject(css_248z$m);
|
|
29251
30483
|
|
|
29252
30484
|
function Header({ children, logoLinkElement, logoImage = jsx(SvgBcLogo, { id: "bcgov-logo-header" }), skipLinks, title = "", titleElement = "span", }) {
|
|
29253
30485
|
function getLogo() {
|
|
@@ -29285,8 +30517,8 @@ function Header({ children, logoLinkElement, logoImage = jsx(SvgBcLogo, { id: "b
|
|
|
29285
30517
|
}) })), title && (jsxs(Fragment$1, { children: [jsx("div", { className: "bcds-header--line" }), getTitle()] })), children] }) }));
|
|
29286
30518
|
}
|
|
29287
30519
|
|
|
29288
|
-
var css_248z$
|
|
29289
|
-
styleInject(css_248z$
|
|
30520
|
+
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";
|
|
30521
|
+
styleInject(css_248z$l);
|
|
29290
30522
|
|
|
29291
30523
|
function getIcon(variant) {
|
|
29292
30524
|
switch (variant) {
|
|
@@ -29306,8 +30538,8 @@ function InlineAlert({ variant = "info", title, description, isIconHidden = fals
|
|
|
29306
30538
|
return (jsxs("div", { className: `bcds-Inline-Alert ${variant} ${isCloseable ? "closeable" : null}`, ...props, children: [!isIconHidden && (jsx("span", { className: "bcds-Inline-Alert--icon", children: customIcon ? customIcon : getIcon(variant) })), jsx("div", { className: "bcds-Inline-Alert--container", role: role, "aria-labelledby": "alert-title", children: children ? (children) : (jsxs(Fragment$1, { children: [title && (jsx("span", { className: "title", id: "alert-title", children: title })), description && jsx("span", { className: "description", children: description }), buttons && (jsx(ButtonGroup, { alignment: "end", orientation: "horizontal", children: buttons }))] })) }), isCloseable && (jsx("span", { className: "bcds-Inline-Alert--closeIcon", children: jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsx(SvgCloseIcon, {}) }) }))] }));
|
|
29307
30539
|
}
|
|
29308
30540
|
|
|
29309
|
-
var css_248z$
|
|
29310
|
-
styleInject(css_248z$
|
|
30541
|
+
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";
|
|
30542
|
+
styleInject(css_248z$k);
|
|
29311
30543
|
|
|
29312
30544
|
function Link({ children, size = "medium", danger = false, isButton = false, buttonVariant = "primary", isUnstyled = false, iconLeft, iconRight, ariaLabel, ...props }) {
|
|
29313
30545
|
return (jsxs($984a1fc08f87e4f3$export$a6c7ac8248d6e38a, { className: !isUnstyled
|
|
@@ -29317,6 +30549,40 @@ function Link({ children, size = "medium", danger = false, isButton = false, but
|
|
|
29317
30549
|
: undefined, "aria-label": ariaLabel, ...props, children: [iconLeft && (jsx("span", { className: "bcds-react-aria-Link--Icon", children: iconLeft })), children, iconRight && (jsx("span", { className: "bcds-react-aria-Link--Icon", children: iconRight }))] }));
|
|
29318
30550
|
}
|
|
29319
30551
|
|
|
30552
|
+
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";
|
|
30553
|
+
styleInject(css_248z$j);
|
|
30554
|
+
|
|
30555
|
+
function MenuItem({ size = "medium", label, description, iconLeft, ...props }) {
|
|
30556
|
+
/* Ensure textValue is set */
|
|
30557
|
+
const textValue = props.textValue ||
|
|
30558
|
+
(typeof props.children === "string" ? props.children : undefined) ||
|
|
30559
|
+
label;
|
|
30560
|
+
return (jsx($49319ee1285aa241$export$2ce376c2cc3355c8, { ...props, textValue: textValue, className: `bcds-react-aria-MenuItem ${size}`, children: (renderProps) => {
|
|
30561
|
+
if (typeof props.children === "function") {
|
|
30562
|
+
return props.children(renderProps);
|
|
30563
|
+
}
|
|
30564
|
+
return (jsxs(Fragment$1, { children: [iconLeft && (jsx("span", { className: "bcds-react-aria-MenuItem--Icon", children: iconLeft })), props.children, (label || description) && (jsxs("div", { className: "bcds-react-aria-MenuItem--Content", children: [label && jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "label", children: label }), description && jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", children: description })] })), renderProps.hasSubmenu && jsx(SvgChevronRightIcon, {}), renderProps.isSelected && jsx(SvgCheckIcon, {})] }));
|
|
30565
|
+
} }));
|
|
30566
|
+
}
|
|
30567
|
+
|
|
30568
|
+
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";
|
|
30569
|
+
styleInject(css_248z$i);
|
|
30570
|
+
|
|
30571
|
+
function Menu({ itemSize = "medium", children, items, sections, placement, ...props }) {
|
|
30572
|
+
/* Manual composition via children */
|
|
30573
|
+
if (children) {
|
|
30574
|
+
return (jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Popover", placement: placement, children: jsx($49319ee1285aa241$export$d9b273488cd8ce6f, { className: `bcds-react-aria-Menu ${itemSize}`, items: items, ...props, children: children }) }));
|
|
30575
|
+
}
|
|
30576
|
+
/* Dynamic collection via items/sections props */
|
|
30577
|
+
const sectionsArray = sections?.length
|
|
30578
|
+
? sections
|
|
30579
|
+
: [{ id: "section", header: "", items: items ? [...items] : [] }];
|
|
30580
|
+
const lastSectionId = sectionsArray.length > 0
|
|
30581
|
+
? sectionsArray[sectionsArray.length - 1].id
|
|
30582
|
+
: undefined;
|
|
30583
|
+
return (jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Popover", placement: placement, children: jsx($49319ee1285aa241$export$d9b273488cd8ce6f, { className: `bcds-react-aria-Menu ${itemSize}`, ...props, items: sectionsArray, children: (section) => (jsxs($49319ee1285aa241$export$4b1545b4f2016d26, { id: section.id, children: [section.header && (jsx($53e61d82d8b8611d$export$8b251419efc915eb, { children: section.header })), jsx($42ceafc619f9c3ba$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsx(MenuItem, { ...item, size: itemSize, children: item.children })) }), section.id !== lastSectionId && jsx(Separator, { size: "small" })] }, section.id)) }) }));
|
|
30584
|
+
}
|
|
30585
|
+
|
|
29320
30586
|
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";
|
|
29321
30587
|
styleInject(css_248z$h);
|
|
29322
30588
|
|
|
@@ -29354,18 +30620,70 @@ function RadioGroup({ orientation = "vertical", label, description, children, er
|
|
|
29354
30620
|
return (jsx($fe21c36db05242bb$export$a98f0dcb43a68a25, { className: "bcds-react-aria-RadioGroup", ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment$1, { children: [label && (jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-RadioGroup--label", children: [label, " ", isRequired && "(required)"] })), jsx("div", { className: `bcds-react-aria-RadioGroup--options ${orientation} flex-wrap-${flexWrap}`, children: children }), description && (jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-RadioGroup--description", children: description })), isInvalid && (jsxs("div", { className: "bcds-react-aria-RadioGroup--error", children: [jsx(SvgExclamationIcon, {}), jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
29355
30621
|
}
|
|
29356
30622
|
|
|
29357
|
-
var css_248z$c = ".bcds-react-aria-
|
|
30623
|
+
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";
|
|
29358
30624
|
styleInject(css_248z$c);
|
|
29359
30625
|
|
|
29360
|
-
|
|
29361
|
-
|
|
29362
|
-
|
|
30626
|
+
function TagGroup({ children, label, description, errorMessage, ...props }) {
|
|
30627
|
+
return (jsxs($3df3ddf5bafbc7b1$export$67ea30858aaf75e3, { className: "bcds-react-aria-TagGroup", ...props, children: [label && (jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TagGroup--Label", children: label })), children, description && (jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-TagGroup--Text-description", children: description })), errorMessage && (jsxs($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "errorMessage", className: "bcds-react-aria-TagGroup--Text-error", children: [jsx(SvgExclamationIcon, {}), errorMessage] }))] }));
|
|
30628
|
+
}
|
|
30629
|
+
|
|
30630
|
+
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";
|
|
30631
|
+
styleInject(css_248z$b);
|
|
30632
|
+
|
|
30633
|
+
function Tag({ color = "blue", tagStyle = "rectangular", size = "small", icon, id, textValue, ...props }) {
|
|
30634
|
+
return (jsx($3df3ddf5bafbc7b1$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color} ${tagStyle} ${size}`, id: id, textValue: textValue, ...props, children: ({ allowsRemoving, isDisabled }) => (jsxs(Fragment$1, { children: [icon, jsx("span", { className: "bcds-react-aria-Tag--Label", children: textValue }), !isDisabled && allowsRemoving && (jsx($7705c033048f6da7$export$353f5b6fc5456de1, { "aria-label": `Remove ${textValue}`, slot: "remove", children: jsx("svg", { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { id: "Icons / Close", children: 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" }) }) }) }))] })) }));
|
|
30635
|
+
}
|
|
30636
|
+
|
|
30637
|
+
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";
|
|
30638
|
+
styleInject(css_248z$a);
|
|
30639
|
+
|
|
30640
|
+
function TagList({ items, orientation = "horizontal", renderEmptyState, ...props }) {
|
|
30641
|
+
return (jsx($3df3ddf5bafbc7b1$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => createElement(Tag, { ...item, key: item.id }) }));
|
|
30642
|
+
}
|
|
30643
|
+
|
|
30644
|
+
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";
|
|
30645
|
+
styleInject(css_248z$9);
|
|
30646
|
+
|
|
30647
|
+
/** Select displays a collapsible list of options and allows a user to select one or more of them. */
|
|
30648
|
+
function Select({ items, sections, label, description, placeholder, size = "medium", errorMessage, selectionMode, overflow = "wrap", ...props }) {
|
|
30649
|
+
const [tagOverlay, setTagOverlay] = useState(null);
|
|
30650
|
+
return (jsx($c8bb816105474884$export$ef9b1a59e592288f, { selectionMode: selectionMode, className: `bcds-react-aria-Select ${size} ${overflow}`, ...props, children: ({ isOpen, isRequired, isInvalid, isDisabled }) => (jsxs(Fragment$1, { children: [label && (jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-Select--Label", children: isRequired ? `${label} (required)` : label })), selectionMode === "multiple" ? (jsxs("div", { className: "bcds-react-aria-Select--InputContainer", children: [jsxs(Button, { className: `bcds-react-aria-Select--Button ${size === "medium" ? "medium" : "small"} ${isInvalid ? "invalid" : ""}`, children: [jsx($c8bb816105474884$export$e288731fd71264f0, { className: "bcds-react-aria-SelectValue", children: ({ selectedItems, state }) => {
|
|
30651
|
+
return (jsxs(Fragment$1, { children: [selectedItems.length === 0 && (jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: placeholder ? placeholder : "Select an item" })), selectedItems.length > 0 &&
|
|
30652
|
+
tagOverlay &&
|
|
30653
|
+
createPortal(jsx("div", { className: "bcds-react-aria-Select--TagOverlay", onPointerDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: jsx(TagGroup, { "aria-label": label
|
|
30654
|
+
? `${label} selections`
|
|
30655
|
+
: "Selected options",
|
|
30656
|
+
/* Handle deselection of items via Tag button */
|
|
30657
|
+
onRemove: (keys) => {
|
|
30658
|
+
const selectedKeys = state.selectionManager.selectedKeys;
|
|
30659
|
+
const updatedSelectedKeys = new Set(selectedKeys);
|
|
30660
|
+
for (const key of keys) {
|
|
30661
|
+
updatedSelectedKeys.delete(key);
|
|
30662
|
+
}
|
|
30663
|
+
state.selectionManager.setSelectedKeys(updatedSelectedKeys);
|
|
30664
|
+
}, children: jsx(TagList, { items: selectedItems
|
|
30665
|
+
.filter((item) => item !== null)
|
|
30666
|
+
/* Map ListBoxItem props to Tag props */
|
|
30667
|
+
.map((item) => ({
|
|
30668
|
+
id: item?.id ? item.id : item.label,
|
|
30669
|
+
textValue: item.label,
|
|
30670
|
+
size: size === "small" ? "xsmall" : "small",
|
|
30671
|
+
color: item.color,
|
|
30672
|
+
tagStyle: item.tagStyle,
|
|
30673
|
+
...(item.iconLeft && {
|
|
30674
|
+
icon: item.iconLeft,
|
|
30675
|
+
}),
|
|
30676
|
+
...(isDisabled && { isDisabled: true }),
|
|
30677
|
+
})), renderEmptyState: () => (jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: placeholder
|
|
30678
|
+
? placeholder
|
|
30679
|
+
: "Select an item" })) }) }) }), tagOverlay)] }));
|
|
30680
|
+
} }), isInvalid && jsx(SvgExclamationIcon, {}), isOpen ? jsx(SvgChevronUpIcon, {}) : jsx(SvgChevronDownIcon, {})] }), jsx("div", { className: "bcds-react-aria-Select--TagOverlayContainer", ref: setTagOverlay })] })) : (jsxs(Button, { className: `bcds-react-aria-Select--Button ${size === "medium" ? "medium" : "small"} ${isInvalid ? "invalid" : ""}`, children: [jsx($c8bb816105474884$export$e288731fd71264f0, { className: "bcds-react-aria-SelectValue", children: (value) => {
|
|
29363
30681
|
if (value.selectedText)
|
|
29364
|
-
return value.selectedText;
|
|
30682
|
+
return (jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: value.selectedText }));
|
|
29365
30683
|
if (placeholder)
|
|
29366
|
-
return placeholder;
|
|
29367
|
-
return "Select an item";
|
|
29368
|
-
} }), isInvalid && jsx(SvgExclamationIcon, {}), isOpen ? jsx(SvgChevronUpIcon, {}) : jsx(SvgChevronDownIcon, {})] }), description && (jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-Select--Description`, children: description })), jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-Select--Error", children: errorMessage }), jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Select--Popover", offset: 4, children: jsx($928221da08ecbc62$export$41f133550aa26f48, { className:
|
|
30684
|
+
return (jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: placeholder }));
|
|
30685
|
+
return (jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: "Select an item" }));
|
|
30686
|
+
} }), isInvalid && jsx(SvgExclamationIcon, {}), isOpen ? jsx(SvgChevronUpIcon, {}) : jsx(SvgChevronDownIcon, {})] })), description && (jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-Select--Description`, children: description })), jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-Select--Error", children: errorMessage }), jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Select--Popover", offset: 4, children: jsx($928221da08ecbc62$export$41f133550aa26f48, { className: `bcds-react-aria-Select--ListBox ${size}`,
|
|
29369
30687
|
// This ternary statement is used to mock the data for `sections`
|
|
29370
30688
|
// if a flat list of `items` was passed instead. This allows us to
|
|
29371
30689
|
// use one component to support both flat and sectioned lists of
|
|
@@ -29374,7 +30692,7 @@ function Select({ items, sections, label, description, placeholder, size = "medi
|
|
|
29374
30692
|
// support different markup within the same component.
|
|
29375
30693
|
items: sections
|
|
29376
30694
|
? sections
|
|
29377
|
-
: [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxs($928221da08ecbc62$export$dca12b0bb56e4fc, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsx($53e61d82d8b8611d$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsx($42ceafc619f9c3ba$export$fb8073518f34e6ec, { items: section.items, children: (item) => (
|
|
30695
|
+
: [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxs($928221da08ecbc62$export$dca12b0bb56e4fc, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsx($53e61d82d8b8611d$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsx($42ceafc619f9c3ba$export$fb8073518f34e6ec, { items: section.items, children: (item) => (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 }) => (jsxs(Fragment$1, { children: [item?.iconLeft && (jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconLeft })), jsxs("div", { className: "bcds-react-aria-Select--ListBoxItem-Text-container", children: [jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "label", className: "bcds-react-aria-Select--ListBoxItem-Text-label", children: item.label }), item.description && (jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-Select--ListBoxItem-Text-description", children: item.description }))] }), isSelected ? (jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: jsx(SvgCheckIcon, {}) })) : (item?.iconRight && (jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconRight })))] })) })) })] })) }) })] })) }));
|
|
29378
30696
|
}
|
|
29379
30697
|
|
|
29380
30698
|
function SvgBcOutlineIcon({ id = "bc-outline-icon" }) {
|
|
@@ -29391,6 +30709,10 @@ function SvgDashIcon({ id = "dash-icon" }) {
|
|
|
29391
30709
|
return (jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 640 640", xmlns: "http://www.w3.org/2000/svg", children: 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" }) }));
|
|
29392
30710
|
}
|
|
29393
30711
|
|
|
30712
|
+
function SvgPlaceholderIcon({ size = 20, ...props }) {
|
|
30713
|
+
return (jsxs("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("g", { id: "20px/Icon placeholder", clipPath: "url(#clip0_717_6325)", children: 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" }) }), jsx("defs", { children: jsx("clipPath", { id: "clip0_717_6325", children: jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
|
|
30714
|
+
}
|
|
30715
|
+
|
|
29394
30716
|
/* This component implements the Plus icon from Font Awesome: https://fontawesome.com/icons/plus */
|
|
29395
30717
|
function SvgPlusIcon({ id = "plus-icon" }) {
|
|
29396
30718
|
return (jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 640 640", xmlns: "http://www.w3.org/2000/svg", children: 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" }) }));
|
|
@@ -29408,27 +30730,6 @@ function SvgReactAriaIcon({ id = "react-aria-icon" }) {
|
|
|
29408
30730
|
return (jsx("svg", { id: id, width: "20", height: "20", viewBox: "200 206 800 790", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { children: 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" }) }) }));
|
|
29409
30731
|
}
|
|
29410
30732
|
|
|
29411
|
-
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";
|
|
29412
|
-
styleInject(css_248z$b);
|
|
29413
|
-
|
|
29414
|
-
function Tag({ color = "blue", tagStyle = "rectangular", size = "small", icon, id, textValue, }) {
|
|
29415
|
-
return (jsx($3df3ddf5bafbc7b1$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color} ${tagStyle} ${size}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxs(Fragment$1, { children: [icon, textValue, !isDisabled && allowsRemoving && (jsx($7705c033048f6da7$export$353f5b6fc5456de1, { "aria-label": `Remove ${textValue}`, slot: "remove", children: jsx("svg", { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { id: "Icons / Close", children: 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" }) }) }) }))] })) }));
|
|
29416
|
-
}
|
|
29417
|
-
|
|
29418
|
-
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";
|
|
29419
|
-
styleInject(css_248z$a);
|
|
29420
|
-
|
|
29421
|
-
function TagGroup({ children, label, description, errorMessage, ...props }) {
|
|
29422
|
-
return (jsxs($3df3ddf5bafbc7b1$export$67ea30858aaf75e3, { className: "bcds-react-aria-TagGroup", ...props, children: [label && (jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TagGroup--Label", children: label })), children, description && (jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-TagGroup--Text-description", children: description })), errorMessage && (jsxs($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "errorMessage", className: "bcds-react-aria-TagGroup--Text-error", children: [jsx(SvgExclamationIcon, {}), errorMessage] }))] }));
|
|
29423
|
-
}
|
|
29424
|
-
|
|
29425
|
-
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";
|
|
29426
|
-
styleInject(css_248z$9);
|
|
29427
|
-
|
|
29428
|
-
function TagList({ items, orientation = "horizontal", renderEmptyState, ...props }) {
|
|
29429
|
-
return (jsx($3df3ddf5bafbc7b1$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => createElement(Tag, { ...item, key: item.id }) }));
|
|
29430
|
-
}
|
|
29431
|
-
|
|
29432
30733
|
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";
|
|
29433
30734
|
styleInject(css_248z$8);
|
|
29434
30735
|
|
|
@@ -29499,5 +30800,5 @@ function NumberField({ size = "medium", label, description, errorMessage, ...pro
|
|
|
29499
30800
|
return (jsx($10076bcc592bc574$export$63c5fa0b2fdccd2e, { className: `bcds-react-aria-NumberField ${size}`, minValue: 0, ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment$1, { children: [label && (jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-NumberField--Label", children: [label, isRequired && (jsx("span", { className: "bcds-react-aria-NumberField--Label required", children: "(required)" }))] })), jsxs($3a442827418ebe87$export$eb2fcfdbd7ba97d4, { className: "bcds-react-aria-NumberField--Group", children: [jsx("div", { className: "bcds-react-aria-NumberField--Button", children: size == "small" ? (jsx(Button, { size: "small", slot: "decrement", variant: "tertiary", isIconButton: true, children: jsx(SvgDashIcon, {}) })) : (jsx(Button, { slot: "decrement", variant: "tertiary", isIconButton: true, children: jsx(SvgDashIcon, {}) })) }), jsxs("div", { className: "bcds-react-aria-NumberField--InputContainer", children: [jsx($41fb335299a4a39e$export$f5b8910cec6cf069, { className: "bcds-react-aria-NumberField--Input" }), isInvalid && jsx(SvgExclamationIcon, {})] }), jsx("div", { className: "bcds-react-aria-NumberField--Button", children: size == "small" ? (jsx(Button, { size: "small", slot: "increment", variant: "tertiary", isIconButton: true, children: jsx(SvgPlusIcon, {}) })) : (jsx(Button, { slot: "increment", variant: "tertiary", isIconButton: true, children: jsx(SvgPlusIcon, {}) })) })] }), description && (jsx(Text, { className: "bcds-react-aria-NumberField--Description", slot: "description", children: description })), isInvalid && (jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-NumberField--Error", children: errorMessage }))] })) }));
|
|
29500
30801
|
}
|
|
29501
30802
|
|
|
29502
|
-
export { Accordion, AccordionGroup, AlertBanner, AlertDialog, Button, ButtonGroup, Calendar, Callout, Checkbox, CheckboxGroup, DatePicker, Dialog, $f2ff30fde7b014be$export$2e1e1122cf0cba88 as DialogTrigger, Footer, FooterLinks, Form, Header, Heading, InlineAlert, Link, Modal, NumberField, ProgressBar, ProgressCircle, Radio, RadioGroup, Select, Separator, SvgBcLogo, SvgBcOutlineIcon, SvgBetaIcon, SvgCalendarIcon, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronLeftIcon, SvgChevronRightIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon$1 as SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgDashIcon as SvgMinusIcon, SvgPlusIcon, SvgReactAriaIcon, SvgTooltipArrowUp, SvgUpRightFromSquareIcon, Switch, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Tooltip, $05a50f7d78b03ad9$export$8c610744efcf8a1d as TooltipTrigger };
|
|
30803
|
+
export { Accordion, AccordionGroup, AlertBanner, AlertDialog, Button, ButtonGroup, Calendar, Callout, Checkbox, CheckboxGroup, DatePicker, Dialog, $f2ff30fde7b014be$export$2e1e1122cf0cba88 as DialogTrigger, Footer, FooterLinks, Form, Header, Heading, InlineAlert, Link, Menu, MenuItem, $49319ee1285aa241$export$4b1545b4f2016d26 as MenuSection, $53e61d82d8b8611d$export$8b251419efc915eb as MenuSectionHeader, $49319ee1285aa241$export$27d2ad3c5815583e as MenuTrigger, Modal, NumberField, ProgressBar, ProgressCircle, Radio, RadioGroup, Select, Separator, $49319ee1285aa241$export$ecabc99eeffab7ca as SubmenuTrigger, SvgBcLogo, SvgBcOutlineIcon, SvgBetaIcon, SvgCalendarIcon, SvgCheckCircleIcon, SvgCheckIcon, SvgChevronDownIcon, SvgChevronLeftIcon, SvgChevronRightIcon, SvgChevronUpIcon, SvgCloseIcon, SvgDashIcon$1 as SvgDashIcon, SvgExclamationCircleIcon, SvgExclamationIcon, SvgInfoIcon, SvgDashIcon as SvgMinusIcon, SvgPlaceholderIcon, SvgPlusIcon, SvgReactAriaIcon, SvgTooltipArrowUp, SvgUpRightFromSquareIcon, Switch, Tag, TagGroup, TagList, Text, TextArea, TextField, TimeField, ToggleButton, ToggleButtonGroup, Tooltip, $05a50f7d78b03ad9$export$8c610744efcf8a1d as TooltipTrigger };
|
|
29503
30804
|
//# sourceMappingURL=index.js.map
|