@bcgov/design-system-react-components 0.7.0-pr593 → 0.7.0-pr643
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 +72 -36
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/esm/index.js +72 -37
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +40 -26
- package/package.json +24 -24
package/dist/cjs/index.cjs
CHANGED
|
@@ -31,7 +31,7 @@ function styleInject(css, ref) {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
var css_248z$B = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --surface-opacity-0: 0;\n --surface-opacity-10: 0.1;\n --surface-opacity-20: 0.2;\n --surface-opacity-30: 0.3;\n --surface-opacity-40: 0.4;\n --surface-opacity-50: 0.5;\n --surface-opacity-60: 0.6;\n --surface-opacity-70: 0.7;\n --surface-opacity-80: 0.8;\n --surface-opacity-90: 0.9;\n --surface-opacity-100: 1;\n --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /* Default shadow for most content and UI elements */\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Reduced shadow for secondary UI elements */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Standard shadow for UI elements like cards and buttons */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Larger shadow for emphasis. Use sparingly */\n --surface-color-primary-button-default: #013366; /* Default fill colour for primary buttons */\n --surface-color-primary-button-hover: #1E5189; /* Fill colour used when user hovers over primary button */\n --surface-color-primary-button-disabled: #EDEBE9; /* Fill colour for inactive primary buttons */\n --surface-color-primary-danger-button-default: #CE3E39; /* Default fill colour for buttons in danger/warning state */\n --surface-color-primary-danger-button-hover: #A2312D; /* Fill colour used when user hovers over danger/warning button */\n --surface-color-primary-danger-button-disabled: #EDEBE9; /* Default fill colour for disabled danger/warning button */\n --surface-color-primary-default: #013366; /* Default theme colour for components and layout */\n --surface-color-primary-hover: #1E5189; /* Hover variant of surface.color.primary.default */\n --surface-color-primary-pressed: #01264C; /* Selected/pressed variant of surface.color.primary.default */\n --surface-color-primary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.primary default */\n --surface-color-secondary-button-default: #FFFFFF; /* Fill colour for secondary buttons */\n --surface-color-secondary-button-hover: #EDEBE9; /* Fill colour used when user hovers over secondary button */\n --surface-color-secondary-button-disabled: #EDEBE9; /* Fill colour for inactive secondary buttons */\n --surface-color-secondary-default: #FFFFFF; /* Light theme colour for components and layout */\n --surface-color-secondary-hover: #EDEBE9; /* Hover variant of surface.color.secondary.default */\n --surface-color-secondary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.secondary.default */\n --surface-color-secondary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.secondary default */\n --surface-color-tertiary-button-default: rgba(255,255,255,0); /* Default fill colour for tertiary buttons */\n --surface-color-tertiary-button-hover: #ECEAE8; /* Fill colour used when user hovers over tertiary button */\n --surface-color-tertiary-button-disabled: #EDEBE9; /* Fill colour for inactive tertiary buttons */\n --surface-color-tertiary-default: #FFFFFF00; /* Alternative light theme colour for components and layout */\n --surface-color-tertiary-hover: #ECEAE8; /* Hover variant of surface.color.tertiary.default */\n --surface-color-tertiary-pressed: #E0DEDC; /* Selected/pressed variant of surface.color.tertiary.default */\n --surface-color-tertiary-disabled: #EDEBE9; /* Disabled/inactive variant of surface.color.tertiary default */\n --surface-color-menus-default: #FFFFFF; /* Default fill colour for menu items */\n --surface-color-menus-hover: #EDEBE9; /* Fill colour used when user hovers over a menu item */\n --surface-color-forms-default: #FFFFFF; /* Default fill colour for form/input fields */\n --surface-color-forms-disabled: #EDEBE9; /* Fill colour for inactive/disabled form/input fields */\n --surface-color-background-white: #FFFFFF; /* White background */\n --surface-color-background-light-gray: #FAF9F8; /* Default background colour for layout */\n --surface-color-background-light-blue: #F1F8FE; /* Light blue background */\n --surface-color-background-dark-blue: #053662; /* Dark blue background */\n --surface-color-border-default: #D8D8D8; /* Lighter border colour for UI elements */\n --surface-color-border-medium: #898785; /* Default border colour for UI elements */\n --surface-color-border-dark: #353433; /* Used as a hover colour for form fields and inputs */\n --surface-color-border-active: #2E5DD7; /* Used as the active stroke colour for UI elements */\n --surface-color-overlay-default: rgba(0,0,0,0.45); /* Background overlay colour for images and modal dialogues */\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2; /* Background colour for error, failure or danger messages */\n --support-surface-color-success: #F6FFF8; /* Background colour for success messages */\n --support-surface-color-warning: #FEF1D8; /* Background colour for warning messages */\n --support-border-color-info: #053662; /* Border stroke for general/informational messages */\n --support-border-color-danger: #CE3E39; /* Border stroke for error, failure or danger messages */\n --support-border-color-success: #42814A; /* Border stroke for success messages */\n --support-border-color-warning: #F8BB47; /* Border stroke for warning messages */\n --icons-size-xsmall: 14px; /* Smallest icon size */\n --icons-size-small: 16px;\n --icons-size-medium: 20px; /* Default icon size */\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px; /* Largest icon size */\n --icons-color-primary: #2D2D2D; /* Default colour for icons */\n --icons-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous icons */\n --icons-color-disabled: #9F9D9C; /* Use only for inactive/disabled icons */\n --icons-color-link: #255A90; /* Use for hyperlinked icons */\n --icons-color-info: #053662; /* Emphasis colour for icons in general/informational state */\n --icons-color-danger: #CE3E39; /* Emphasis colour for icons in error, failure or danger state */\n --icons-color-success: #42814A; /* Emphasis colour for icons in success state */\n --icons-color-warning: #F8BB47; /* Emphasis colour for icons in warning state */\n --icons-color-primary-invert: #FFFFFF; /* Default colour for icons on dark backgrounds */\n --layout-border-width-none: 0;\n --layout-border-width-small: 1px;\n --layout-border-width-medium: 2px;\n --layout-border-width-large: 4px;\n --layout-padding-none: 0; /* No padding */\n --layout-padding-hair: 0.125rem; /* Smallest padding value for layout */\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem; /* Default padding value for layout */\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem; /* Largest padding value for layout */\n --layout-margin-none: 0rem; /* No margin */\n --layout-margin-hair: 0.125rem; /* Smallest margin value for layout */\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem; /* Default margin value for layout */\n --layout-margin-medium: 1rem;\n --layout-margin-large: 1.5rem;\n --layout-margin-xlarge: 2rem;\n --layout-margin-xxlarge: 2.5rem;\n --layout-margin-xxxlarge: 3rem;\n --layout-margin-huge: 3.5rem; /* Largest margin value for layout */\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --layout-border-radius-circular: 9999px; /* Used for components with a circular radius */\n --typography-font-families-bc-sans: 'BC Sans'; /* BC Sans font. Requires BC Sans package */\n --typography-line-heights-xxxdense: 1.125rem; /* Smallest line height */\n --typography-line-heights-xxdense: 1.313rem;\n --typography-line-heights-xdense: 1.688rem;\n --typography-line-heights-dense: 1.913rem;\n --typography-line-heights-regular: 2.125rem; /* Default line height */\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem; /* Largest line height */\n --typography-line-heights-auto: AUTO; /* System token, used to generate type styles */\n --typography-font-weights-regular: 400; /* System token, used to generate text styles */\n --typography-font-weights-bold: 700; /* System token, used to generate text styles */\n --typography-font-weights-italic-weight: 400; /* System token, used to generate text styles */\n --typography-font-weights-italic-style: italic; /* System token, used to generate text styles */\n --typography-font-size-label: 0.75rem;\n --typography-font-size-small-body: 0.875rem;\n --typography-font-size-body: 1rem;\n --typography-font-size-large-body: 1.125rem;\n --typography-font-size-h5: 1.25rem;\n --typography-font-size-h4: 1.5rem;\n --typography-font-size-h3: 1.75rem;\n --typography-font-size-h2: 2rem;\n --typography-font-size-h1: 2.25rem;\n --typography-font-size-display: 3rem;\n --typography-letter-spacing-0: 0em; /* System token, used to generate type styles */\n --typography-paragraph-spacing-0: 0; /* System token, used to generate type styles */\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /* Labels and captions */\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /* Smaller body text */\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /* Default body text */\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /* Larger body text */\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /* Alternate (unbolded) style for Heading 6 */\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /* Alternate (unbolded) style for Heading 5 */\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /* Alternate (unbolded) style for Heading 4 */\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 3 */\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /* Alternate (unbolded) style for Heading 2 */\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /* Alternate (unbolded) style for Heading 1 */\n --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /* Extra-large body text size. Do not use for headings */\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (bolded) */\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /* Default for small body text (bolded) */\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /* Default for body text (bolded) */\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (bolded) */\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H6 */\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H5 */\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H4 */\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H3 */\n --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H2 */\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /* Default style for Heading 6. Includes all sizing/spacing values for H1 */\n --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /* Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /* Labels and captions (italic) */\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /* Small body text (italic) */\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /* Default for body text (italic) */\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Larger text size for body text (italic) */\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /* Alternate (italic) style for Heading 6 */\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /* Alternate (italic) style for Heading 5 */\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /* Alternate (italic) style for Heading 4 */\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 3 */\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /* Alternate (italic) style for Heading 2 */\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /* Alternate (italic) style for Heading 1 */\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /* Extra-large font size (italic). Do not use for headings */\n --typography-text-case-none: none;\n --typography-text-decoration-none: none; /* System token, used to generate type styles */\n --typography-paragraph-indent-0: 0px; /* System token, used to generate type styles */\n --typography-color-primary: #2D2D2D; /* Default colour for all body text and headings */\n --typography-color-secondary: #474543; /* Alternative colour for secondary/miscellaneous text */\n --typography-color-placeholder: #9F9D9C; /* Use for placeholder text in forms */\n --typography-color-disabled: #9F9D9C; /* Use only for text in inactive user interface elements */\n --typography-color-link: #255A90; /* Use for hyperlinks in body text and headings */\n --typography-color-danger: #CE3E39; /* Use for error, failure or danger message text */\n --typography-color-primary-invert: #FFFFFF; /* Default colour for text on dark backgrounds */\n --typography-color-secondary-invert: #ECEAE8; /* Secondary colour for text on dark backgrounds */\n --theme-gold-10: #FEF8E8; /* Gold scale — lightest */\n --theme-gold-20: #FEF0D8; /* Gold scale */\n --theme-gold-30: #FDE9C4; /* Gold scale */\n --theme-gold-40: #FCE2B0; /* Gold scale */\n --theme-gold-50: #FBDA9D; /* Gold scale */\n --theme-gold-60: #FBD389; /* Gold scale */\n --theme-gold-70: #FACC75; /* Gold scale */\n --theme-gold-80: #F9C462; /* Gold scale */\n --theme-gold-90: #F8BA47; /* Gold scale */\n --theme-gold-100: #FCBA19; /* Gold scale — darkest */\n --theme-blue-10: #F1F8FE; /* Blue scale — lightest */\n --theme-blue-20: #D8EAFD; /* Blue scale */\n --theme-blue-30: #C1DDFC; /* Blue scale */\n --theme-blue-40: #A8D0FB; /* Blue scale */\n --theme-blue-50: #91C4FA; /* Blue scale */\n --theme-blue-60: #7AB8F9; /* Blue scale */\n --theme-blue-70: #5595D9; /* Blue scale */\n --theme-blue-80: #3470B1; /* Blue scale */\n --theme-blue-90: #1E5189; /* Blue scale */\n --theme-blue-100: #013366; /* Blue scale — darkest */\n --theme-gray-10: #FAF9F8; /* Greyscale — lightest */\n --theme-gray-20: #F3F2F1; /* Greyscale */\n --theme-gray-30: #ECEAE8; /* Greyscale */\n --theme-gray-40: #E0DEDC; /* Greyscale */\n --theme-gray-50: #D1CFCD; /* Greyscale */\n --theme-gray-60: #C6C5C3; /* Greyscale */\n --theme-gray-70: #9F9D9C; /* Greyscale */\n --theme-gray-80: #605E5C; /* Greyscale */\n --theme-gray-90: #3D3C3B; /* Greyscale */\n --theme-gray-100: #353433; /* Greyscale */\n --theme-gray-110: #252423; /* Greyscale — darkest */\n --theme-gray-white: #FFFFFF; /* White */\n --theme-primary-blue: #013366; /* Primary Blue (Blue 100) */\n --theme-primary-gold: #FCBA19; /* Primary Gold (Gold 100) */\n}\n";
|
|
34
|
+
var css_248z$B = "/**\n * Do not edit directly, this file was auto-generated.\n */\n\n:root {\n --surface-opacity-0: 0;\n --surface-opacity-10: 0.1;\n --surface-opacity-20: 0.2;\n --surface-opacity-30: 0.3;\n --surface-opacity-40: 0.4;\n --surface-opacity-50: 0.5;\n --surface-opacity-60: 0.6;\n --surface-opacity-70: 0.7;\n --surface-opacity-80: 0.8;\n --surface-opacity-90: 0.9;\n --surface-opacity-100: 1;\n --surface-shadow-none: 0 0.30000001192092896px 0.8999999761581421px 0 #0000001a, 0 1.600000023841858px 3.5999999046325684px 0 #00000021; /** Default shadow for most content and UI elements */\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /** Reduced shadow for secondary UI elements */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /** Standard shadow for UI elements like cards and buttons */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /** Larger shadow for emphasis. Use sparingly */\n --surface-color-primary-button-default: #013366; /** Default fill colour for primary buttons */\n --surface-color-primary-button-hover: #1E5189; /** Fill colour used when user hovers over primary button */\n --surface-color-primary-button-disabled: #EDEBE9; /** Fill colour for inactive primary buttons */\n --surface-color-primary-danger-button-default: #CE3E39; /** Default fill colour for buttons in danger/warning state */\n --surface-color-primary-danger-button-hover: #A2312D; /** Fill colour used when user hovers over danger/warning button */\n --surface-color-primary-danger-button-disabled: #EDEBE9; /** Default fill colour for disabled danger/warning button */\n --surface-color-primary-default: #013366; /** Default theme colour for components and layout */\n --surface-color-primary-hover: #1E5189; /** Hover variant of surface.color.primary.default */\n --surface-color-primary-pressed: #01264C; /** Selected/pressed variant of surface.color.primary.default */\n --surface-color-primary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.primary default */\n --surface-color-secondary-button-default: #FFFFFF; /** Fill colour for secondary buttons */\n --surface-color-secondary-button-hover: #EDEBE9; /** Fill colour used when user hovers over secondary button */\n --surface-color-secondary-button-disabled: #EDEBE9; /** Fill colour for inactive secondary buttons */\n --surface-color-secondary-default: #FFFFFF; /** Light theme colour for components and layout */\n --surface-color-secondary-hover: #EDEBE9; /** Hover variant of surface.color.secondary.default */\n --surface-color-secondary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.secondary.default */\n --surface-color-secondary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.secondary default */\n --surface-color-tertiary-button-default: rgba(255,255,255,0); /** Default fill colour for tertiary buttons */\n --surface-color-tertiary-button-hover: #ECEAE8; /** Fill colour used when user hovers over tertiary button */\n --surface-color-tertiary-button-disabled: #EDEBE9; /** Fill colour for inactive tertiary buttons */\n --surface-color-tertiary-default: #FFFFFF00; /** Alternative light theme colour for components and layout */\n --surface-color-tertiary-hover: #ECEAE8; /** Hover variant of surface.color.tertiary.default */\n --surface-color-tertiary-pressed: #E0DEDC; /** Selected/pressed variant of surface.color.tertiary.default */\n --surface-color-tertiary-disabled: #EDEBE9; /** Disabled/inactive variant of surface.color.tertiary default */\n --surface-color-menus-default: #FFFFFF; /** Default fill colour for menu items */\n --surface-color-menus-hover: #EDEBE9; /** Fill colour used when user hovers over a menu item */\n --surface-color-forms-default: #FFFFFF; /** Default fill colour for form/input fields */\n --surface-color-forms-disabled: #EDEBE9; /** Fill colour for inactive/disabled form/input fields */\n --surface-color-background-white: #FFFFFF; /** White background */\n --surface-color-background-light-gray: #FAF9F8; /** Default background colour for layout */\n --surface-color-background-light-blue: #F1F8FE; /** Light blue background */\n --surface-color-background-dark-blue: #053662; /** Dark blue background */\n --surface-color-border-default: #D8D8D8; /** Lighter border colour for UI elements */\n --surface-color-border-medium: #898785; /** Default border colour for UI elements */\n --surface-color-border-dark: #353433; /** Used as a hover colour for form fields and inputs */\n --surface-color-border-active: #2E5DD7; /** Used as the active stroke colour for UI elements */\n --surface-color-overlay-default: rgba(0,0,0,0.45); /** Background overlay colour for images and modal dialogues */\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2; /** Background colour for error, failure or danger messages */\n --support-surface-color-success: #F6FFF8; /** Background colour for success messages */\n --support-surface-color-warning: #FEF1D8; /** Background colour for warning messages */\n --support-border-color-info: #053662; /** Border stroke for general/informational messages */\n --support-border-color-danger: #CE3E39; /** Border stroke for error, failure or danger messages */\n --support-border-color-success: #42814A; /** Border stroke for success messages */\n --support-border-color-warning: #F8BB47; /** Border stroke for warning messages */\n --icons-size-xsmall: 14px; /** Smallest icon size */\n --icons-size-small: 16px;\n --icons-size-medium: 20px; /** Default icon size */\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px; /** Largest icon size */\n --icons-color-primary: #2D2D2D; /** Default colour for icons */\n --icons-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous icons */\n --icons-color-disabled: #9F9D9C; /** Use only for inactive/disabled icons */\n --icons-color-link: #255A90; /** Use for hyperlinked icons */\n --icons-color-info: #053662; /** Emphasis colour for icons in general/informational state */\n --icons-color-danger: #CE3E39; /** Emphasis colour for icons in error, failure or danger state */\n --icons-color-success: #42814A; /** Emphasis colour for icons in success state */\n --icons-color-warning: #F8BB47; /** Emphasis colour for icons in warning state */\n --icons-color-primary-invert: #FFFFFF; /** Default colour for icons on dark backgrounds */\n --layout-border-width-none: 0;\n --layout-border-width-small: 1px;\n --layout-border-width-medium: 2px;\n --layout-border-width-large: 4px;\n --layout-padding-none: 0; /** No padding */\n --layout-padding-hair: 0.125rem; /** Smallest padding value for layout */\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem; /** Default padding value for layout */\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem; /** Largest padding value for layout */\n --layout-margin-none: 0rem; /** No margin */\n --layout-margin-hair: 0.125rem; /** Smallest margin value for layout */\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem; /** Default margin value for layout */\n --layout-margin-medium: 1rem;\n --layout-margin-large: 1.5rem;\n --layout-margin-xlarge: 2rem;\n --layout-margin-xxlarge: 2.5rem;\n --layout-margin-xxxlarge: 3rem;\n --layout-margin-huge: 3.5rem; /** Largest margin value for layout */\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --layout-border-radius-circular: 9999px; /** Used for components with a circular radius */\n --typography-font-families-bc-sans: 'BC Sans'; /** BC Sans font. Requires BC Sans package */\n --typography-line-heights-xxxdense: 1.125rem; /** Smallest line height */\n --typography-line-heights-xxdense: 1.313rem;\n --typography-line-heights-xdense: 1.688rem;\n --typography-line-heights-dense: 1.913rem;\n --typography-line-heights-regular: 2.125rem; /** Default line height */\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem; /** Largest line height */\n --typography-line-heights-auto: AUTO; /** System token, used to generate type styles */\n --typography-font-weights-regular: 400; /** System token, used to generate text styles */\n --typography-font-weights-bold: 700; /** System token, used to generate text styles */\n --typography-font-weights-italic-weight: 400; /** System token, used to generate text styles */\n --typography-font-weights-italic-style: italic; /** System token, used to generate text styles */\n --typography-font-size-label: 0.75rem;\n --typography-font-size-small-body: 0.875rem;\n --typography-font-size-body: 1rem;\n --typography-font-size-large-body: 1.125rem;\n --typography-font-size-h5: 1.25rem;\n --typography-font-size-h4: 1.5rem;\n --typography-font-size-h3: 1.75rem;\n --typography-font-size-h2: 2rem;\n --typography-font-size-h1: 2.25rem;\n --typography-font-size-display: 3rem;\n --typography-letter-spacing-0: 0em; /** System token, used to generate type styles */\n --typography-paragraph-spacing-0: 0; /** System token, used to generate type styles */\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans'; /** Labels and captions */\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans'; /** Smaller body text */\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans'; /** Default body text */\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans'; /** Larger body text */\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans'; /** Alternate (unbolded) style for Heading 6 */\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans'; /** Alternate (unbolded) style for Heading 5 */\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans'; /** Alternate (unbolded) style for Heading 4 */\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 3 */\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans'; /** Alternate (unbolded) style for Heading 2 */\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans'; /** Alternate (unbolded) style for Heading 1 */\n --typography-regular-display: 400 3rem/AUTO 'BC Sans'; /** Extra-large body text size. Do not use for headings */\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (bolded) */\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans'; /** Default for small body text (bolded) */\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans'; /** Default for body text (bolded) */\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (bolded) */\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H6 */\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H5 */\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H4 */\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H3 */\n --typography-bold-h2: 700 2rem/3rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H2 */\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans'; /** Default style for Heading 6. Includes all sizing/spacing values for H1 */\n --typography-bold-display: 700 3rem/AUTO 'BC Sans'; /** Extra-large font size (bolded). Do not use for headings */\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans'; /** Labels and captions (italic) */\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans'; /** Small body text (italic) */\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans'; /** Default for body text (italic) */\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Larger text size for body text (italic) */\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans'; /** Alternate (italic) style for Heading 6 */\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans'; /** Alternate (italic) style for Heading 5 */\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans'; /** Alternate (italic) style for Heading 4 */\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 3 */\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans'; /** Alternate (italic) style for Heading 2 */\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans'; /** Alternate (italic) style for Heading 1 */\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans'; /** Extra-large font size (italic). Do not use for headings */\n --typography-text-case-none: none;\n --typography-text-decoration-none: none; /** System token, used to generate type styles */\n --typography-paragraph-indent-0: 0px; /** System token, used to generate type styles */\n --typography-color-primary: #2D2D2D; /** Default colour for all body text and headings */\n --typography-color-secondary: #474543; /** Alternative colour for secondary/miscellaneous text */\n --typography-color-placeholder: #9F9D9C; /** Use for placeholder text in forms */\n --typography-color-disabled: #9F9D9C; /** Use only for text in inactive user interface elements */\n --typography-color-link: #255A90; /** Use for hyperlinks in body text and headings */\n --typography-color-danger: #CE3E39; /** Use for error, failure or danger message text */\n --typography-color-primary-invert: #FFFFFF; /** Default colour for text on dark backgrounds */\n --typography-color-secondary-invert: #ECEAE8; /** Secondary colour for text on dark backgrounds */\n --theme-gold-10: #FEF8E8; /** Gold scale — lightest */\n --theme-gold-20: #FEF0D8; /** Gold scale */\n --theme-gold-30: #FDE9C4; /** Gold scale */\n --theme-gold-40: #FCE2B0; /** Gold scale */\n --theme-gold-50: #FBDA9D; /** Gold scale */\n --theme-gold-60: #FBD389; /** Gold scale */\n --theme-gold-70: #FACC75; /** Gold scale */\n --theme-gold-80: #F9C462; /** Gold scale */\n --theme-gold-90: #F8BA47; /** Gold scale */\n --theme-gold-100: #FCBA19; /** Gold scale — darkest */\n --theme-blue-10: #F1F8FE; /** Blue scale — lightest */\n --theme-blue-20: #D8EAFD; /** Blue scale */\n --theme-blue-30: #C1DDFC; /** Blue scale */\n --theme-blue-40: #A8D0FB; /** Blue scale */\n --theme-blue-50: #91C4FA; /** Blue scale */\n --theme-blue-60: #7AB8F9; /** Blue scale */\n --theme-blue-70: #5595D9; /** Blue scale */\n --theme-blue-80: #3470B1; /** Blue scale */\n --theme-blue-90: #1E5189; /** Blue scale */\n --theme-blue-100: #013366; /** Blue scale — darkest */\n --theme-gray-10: #FAF9F8; /** Greyscale — lightest */\n --theme-gray-20: #F3F2F1; /** Greyscale */\n --theme-gray-30: #ECEAE8; /** Greyscale */\n --theme-gray-40: #E0DEDC; /** Greyscale */\n --theme-gray-50: #D1CFCD; /** Greyscale */\n --theme-gray-60: #C6C5C3; /** Greyscale */\n --theme-gray-70: #9F9D9C; /** Greyscale */\n --theme-gray-80: #605E5C; /** Greyscale */\n --theme-gray-90: #3D3C3B; /** Greyscale */\n --theme-gray-100: #353433; /** Greyscale */\n --theme-gray-110: #252423; /** Greyscale — darkest */\n --theme-gray-white: #FFFFFF; /** White */\n --theme-primary-blue: #013366; /** Primary Blue (Blue 100) */\n --theme-primary-gold: #FCBA19; /** Primary Gold (Gold 100) */\n}\n";
|
|
35
35
|
styleInject(css_248z$B);
|
|
36
36
|
|
|
37
37
|
/*
|
|
@@ -28997,7 +28997,7 @@ function AccordionGroup({ title, titleElement, children, ...props }) {
|
|
|
28997
28997
|
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [title && (jsxRuntime.jsx("div", { className: "bcds-react-aria-DisclosureGroup--Title", children: getTitle() })), jsxRuntime.jsx($a3e16eab0ea4036c$export$944aceb4f8c89f10, { className: "bcds-react-aria-DisclosureGroup", ...props, children: children })] }));
|
|
28998
28998
|
}
|
|
28999
28999
|
|
|
29000
|
-
var css_248z$x = ".bcds-Alert-Banner {\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n
|
|
29000
|
+
var css_248z$x = ".bcds-Alert-Banner {\n box-sizing: border-box;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: space-around;\n width: 100%;\n}\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";
|
|
29001
29001
|
styleInject(css_248z$x);
|
|
29002
29002
|
|
|
29003
29003
|
/* This component implements the Circle Check icon from Font Awesome: https://fontawesome.com/icons/circle-check */
|
|
@@ -29042,8 +29042,8 @@ function getIcon$2(variant) {
|
|
|
29042
29042
|
return;
|
|
29043
29043
|
}
|
|
29044
29044
|
}
|
|
29045
|
-
function AlertBanner({ variant = "info", isIconHidden = false, isCloseable = true, role = "status", onClose, children, customIcon, ...props }) {
|
|
29046
|
-
return (jsxRuntime.jsx("div", { className: `bcds-Alert-Banner ${variant}`, ...props, children: jsxRuntime.jsxs("div", { className: "bcds-Alert-Banner--Container", children: [" ", !isIconHidden && (jsxRuntime.jsx("span", { className: "bcds-Alert-Banner--Icon", children: customIcon ? customIcon : getIcon$2(variant) })), jsxRuntime.jsx("div", { className: "bcds-Alert-Banner--Content", role: role, children: children }), isCloseable && (jsxRuntime.jsx("span", { className: "bcds-Alert-Banner--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }) }));
|
|
29045
|
+
function AlertBanner({ variant = "info", size = "medium", layout = "fixed", isIconHidden = false, isCloseable = true, role = "status", onClose, children, customIcon, ...props }) {
|
|
29046
|
+
return (jsxRuntime.jsx("div", { className: `bcds-Alert-Banner ${variant} ${size} ${layout}`, ...props, children: jsxRuntime.jsxs("div", { className: "bcds-Alert-Banner--Container", children: [" ", !isIconHidden && (jsxRuntime.jsx("span", { className: "bcds-Alert-Banner--Icon", children: customIcon ? customIcon : getIcon$2(variant) })), jsxRuntime.jsx("div", { className: "bcds-Alert-Banner--Content", role: role, children: children }), isCloseable && (jsxRuntime.jsx("span", { className: "bcds-Alert-Banner--closeIcon", children: jsxRuntime.jsx(Button, { variant: "tertiary", isIconButton: true, size: "small", "aria-label": "Close this alert", type: "button", onPress: onClose, children: jsxRuntime.jsx(SvgCloseIcon, {}) }) }))] }) }));
|
|
29047
29047
|
}
|
|
29048
29048
|
|
|
29049
29049
|
var css_248z$w = ".bcds-ButtonGroup {\n display: flex;\n gap: var(--layout-margin-small);\n flex-grow: 1;\n}\n\n.bcds-ButtonGroup.horizontal {\n flex-direction: row;\n}\n\n.bcds-ButtonGroup.vertical {\n flex-direction: column;\n}\n\n.bcds-ButtonGroup.start {\n justify-content: flex-start;\n}\n\n.bcds-ButtonGroup.center {\n justify-content: center;\n}\n\n.bcds-ButtonGroup.end {\n justify-content: flex-end;\n}\n";
|
|
@@ -29356,18 +29356,70 @@ function RadioGroup({ orientation = "vertical", label, description, children, er
|
|
|
29356
29356
|
return (jsxRuntime.jsx($fe21c36db05242bb$export$a98f0dcb43a68a25, { className: "bcds-react-aria-RadioGroup", ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-RadioGroup--label", children: [label, " ", isRequired && "(required)"] })), jsxRuntime.jsx("div", { className: `bcds-react-aria-RadioGroup--options ${orientation} flex-wrap-${flexWrap}`, children: children }), description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-RadioGroup--description", children: description })), isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-RadioGroup--error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
29357
29357
|
}
|
|
29358
29358
|
|
|
29359
|
-
var css_248z$c = ".bcds-react-aria-
|
|
29359
|
+
var css_248z$c = ".bcds-react-aria-TagGroup {\n color: var(--typography-color-primary);\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-TagGroup--Label,\n.bcds-react-aria-TagGroup--Text-description,\n.bcds-react-aria-TagGroup--Text-error {\n display: block;\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TagGroup--Text-error {\n display: flex;\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TagGroup--Text-error > svg {\n padding-right: var(--layout-padding-xsmall);\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
29360
29360
|
styleInject(css_248z$c);
|
|
29361
29361
|
|
|
29362
|
-
|
|
29363
|
-
|
|
29364
|
-
|
|
29362
|
+
function TagGroup({ children, label, description, errorMessage, ...props }) {
|
|
29363
|
+
return (jsxRuntime.jsxs($3df3ddf5bafbc7b1$export$67ea30858aaf75e3, { className: "bcds-react-aria-TagGroup", ...props, children: [label && (jsxRuntime.jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TagGroup--Label", children: label })), children, description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-TagGroup--Text-description", children: description })), errorMessage && (jsxRuntime.jsxs($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "errorMessage", className: "bcds-react-aria-TagGroup--Text-error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), errorMessage] }))] }));
|
|
29364
|
+
}
|
|
29365
|
+
|
|
29366
|
+
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";
|
|
29367
|
+
styleInject(css_248z$b);
|
|
29368
|
+
|
|
29369
|
+
function Tag({ color = "blue", tagStyle = "rectangular", size = "small", icon, id, textValue, ...props }) {
|
|
29370
|
+
return (jsxRuntime.jsx($3df3ddf5bafbc7b1$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color} ${tagStyle} ${size}`, id: id, textValue: textValue, ...props, children: ({ allowsRemoving, isDisabled }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, jsxRuntime.jsx("span", { className: "bcds-react-aria-Tag--Label", children: textValue }), !isDisabled && allowsRemoving && (jsxRuntime.jsx($7705c033048f6da7$export$353f5b6fc5456de1, { "aria-label": `Remove ${textValue}`, slot: "remove", children: jsxRuntime.jsx("svg", { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { id: "Icons / Close", children: jsxRuntime.jsx("path", { id: "Vector", d: "M12.6004 3.03239L11.4684 1.90039L7.00039 6.36839L2.53239 1.90039L1.40039 3.03239L5.86839 7.50039L1.40039 11.9684L2.53239 13.1004L7.00039 8.63239L11.4684 13.1004L12.6004 11.9684L8.13239 7.50039L12.6004 3.03239Z", fill: "currentColor" }) }) }) }))] })) }));
|
|
29371
|
+
}
|
|
29372
|
+
|
|
29373
|
+
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";
|
|
29374
|
+
styleInject(css_248z$a);
|
|
29375
|
+
|
|
29376
|
+
function TagList({ items, orientation = "horizontal", renderEmptyState, ...props }) {
|
|
29377
|
+
return (jsxRuntime.jsx($3df3ddf5bafbc7b1$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => $8WNJc$react.createElement(Tag, { ...item, key: item.id }) }));
|
|
29378
|
+
}
|
|
29379
|
+
|
|
29380
|
+
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";
|
|
29381
|
+
styleInject(css_248z$9);
|
|
29382
|
+
|
|
29383
|
+
/** Select displays a collapsible list of options and allows a user to select one or more of them. */
|
|
29384
|
+
function Select({ items, sections, label, description, placeholder, size = "medium", errorMessage, selectionMode, overflow = "wrap", ...props }) {
|
|
29385
|
+
const [tagOverlay, setTagOverlay] = $8WNJc$react.useState(null);
|
|
29386
|
+
return (jsxRuntime.jsx($c8bb816105474884$export$ef9b1a59e592288f, { selectionMode: selectionMode, className: `bcds-react-aria-Select ${size} ${overflow}`, ...props, children: ({ isOpen, isRequired, isInvalid, isDisabled }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-Select--Label", children: isRequired ? `${label} (required)` : label })), selectionMode === "multiple" ? (jsxRuntime.jsxs("div", { className: "bcds-react-aria-Select--InputContainer", children: [jsxRuntime.jsxs(Button, { className: `bcds-react-aria-Select--Button ${size === "medium" ? "medium" : "small"} ${isInvalid ? "invalid" : ""}`, children: [jsxRuntime.jsx($c8bb816105474884$export$e288731fd71264f0, { className: "bcds-react-aria-SelectValue", children: ({ selectedItems, state }) => {
|
|
29387
|
+
return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [selectedItems.length === 0 && (jsxRuntime.jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: placeholder ? placeholder : "Select an item" })), selectedItems.length > 0 &&
|
|
29388
|
+
tagOverlay &&
|
|
29389
|
+
$3wX5A$reactdom.createPortal(jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--TagOverlay", onPointerDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), children: jsxRuntime.jsx(TagGroup, { "aria-label": label
|
|
29390
|
+
? `${label} selections`
|
|
29391
|
+
: "Selected options",
|
|
29392
|
+
/* Handle deselection of items via Tag button */
|
|
29393
|
+
onRemove: (keys) => {
|
|
29394
|
+
const selectedKeys = state.selectionManager.selectedKeys;
|
|
29395
|
+
const updatedSelectedKeys = new Set(selectedKeys);
|
|
29396
|
+
for (const key of keys) {
|
|
29397
|
+
updatedSelectedKeys.delete(key);
|
|
29398
|
+
}
|
|
29399
|
+
state.selectionManager.setSelectedKeys(updatedSelectedKeys);
|
|
29400
|
+
}, children: jsxRuntime.jsx(TagList, { items: selectedItems
|
|
29401
|
+
.filter((item) => item !== null)
|
|
29402
|
+
/* Map ListBoxItem props to Tag props */
|
|
29403
|
+
.map((item) => ({
|
|
29404
|
+
id: item?.id ? item.id : item.label,
|
|
29405
|
+
textValue: item.label,
|
|
29406
|
+
size: size === "small" ? "xsmall" : "small",
|
|
29407
|
+
color: item.color,
|
|
29408
|
+
tagStyle: item.tagStyle,
|
|
29409
|
+
...(item.iconLeft && {
|
|
29410
|
+
icon: item.iconLeft,
|
|
29411
|
+
}),
|
|
29412
|
+
...(isDisabled && { isDisabled: true }),
|
|
29413
|
+
})), renderEmptyState: () => (jsxRuntime.jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: placeholder
|
|
29414
|
+
? placeholder
|
|
29415
|
+
: "Select an item" })) }) }) }), tagOverlay)] }));
|
|
29416
|
+
} }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {}), isOpen ? jsxRuntime.jsx(SvgChevronUpIcon, {}) : jsxRuntime.jsx(SvgChevronDownIcon, {})] }), jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--TagOverlayContainer", ref: setTagOverlay })] })) : (jsxRuntime.jsxs(Button, { className: `bcds-react-aria-Select--Button ${size === "medium" ? "medium" : "small"} ${isInvalid ? "invalid" : ""}`, children: [jsxRuntime.jsx($c8bb816105474884$export$e288731fd71264f0, { className: "bcds-react-aria-SelectValue", children: (value) => {
|
|
29365
29417
|
if (value.selectedText)
|
|
29366
|
-
return value.selectedText;
|
|
29418
|
+
return (jsxRuntime.jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: value.selectedText }));
|
|
29367
29419
|
if (placeholder)
|
|
29368
|
-
return placeholder;
|
|
29369
|
-
return "Select an item";
|
|
29370
|
-
} }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {}), isOpen ? jsxRuntime.jsx(SvgChevronUpIcon, {}) : jsxRuntime.jsx(SvgChevronDownIcon, {})] }), description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-Select--Description`, children: description })), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-Select--Error", children: errorMessage }), jsxRuntime.jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Select--Popover", offset: 4, children: jsxRuntime.jsx($928221da08ecbc62$export$41f133550aa26f48, { className:
|
|
29420
|
+
return (jsxRuntime.jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: placeholder }));
|
|
29421
|
+
return (jsxRuntime.jsx("span", { className: "bcds-react-aria-SelectValue--Text", children: "Select an item" }));
|
|
29422
|
+
} }), isInvalid && jsxRuntime.jsx(SvgExclamationIcon, {}), isOpen ? jsxRuntime.jsx(SvgChevronUpIcon, {}) : jsxRuntime.jsx(SvgChevronDownIcon, {})] })), description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-Select--Description`, children: description })), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { className: "bcds-react-aria-Select--Error", children: errorMessage }), jsxRuntime.jsx($542a13ca2fa5b484$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Select--Popover", offset: 4, children: jsxRuntime.jsx($928221da08ecbc62$export$41f133550aa26f48, { className: `bcds-react-aria-Select--ListBox ${size}`,
|
|
29371
29423
|
// This ternary statement is used to mock the data for `sections`
|
|
29372
29424
|
// if a flat list of `items` was passed instead. This allows us to
|
|
29373
29425
|
// use one component to support both flat and sectioned lists of
|
|
@@ -29376,7 +29428,7 @@ function Select({ items, sections, label, description, placeholder, size = "medi
|
|
|
29376
29428
|
// support different markup within the same component.
|
|
29377
29429
|
items: sections
|
|
29378
29430
|
? sections
|
|
29379
|
-
: [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxRuntime.jsxs($928221da08ecbc62$export$dca12b0bb56e4fc, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsxRuntime.jsx($53e61d82d8b8611d$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsxRuntime.jsx($42ceafc619f9c3ba$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxRuntime.
|
|
29431
|
+
: [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxRuntime.jsxs($928221da08ecbc62$export$dca12b0bb56e4fc, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsxRuntime.jsx($53e61d82d8b8611d$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsxRuntime.jsx($42ceafc619f9c3ba$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxRuntime.jsx($928221da08ecbc62$export$a11e76429ed99b4, { id: item?.id ? item.id : item.label, className: `bcds-react-aria-Select--ListBoxItem ${item?.isDestructive ? "destructive" : ""}`, textValue: item.label, children: ({ isSelected }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [item?.iconLeft && (jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconLeft })), jsxRuntime.jsxs("div", { className: "bcds-react-aria-Select--ListBoxItem-Text-container", children: [jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "label", className: "bcds-react-aria-Select--ListBoxItem-Text-label", children: item.label }), item.description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-Select--ListBoxItem-Text-description", children: item.description }))] }), isSelected ? (jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: jsxRuntime.jsx(SvgCheckIcon, {}) })) : (item?.iconRight && (jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconRight })))] })) })) })] })) }) })] })) }));
|
|
29380
29432
|
}
|
|
29381
29433
|
|
|
29382
29434
|
function SvgBcOutlineIcon({ id = "bc-outline-icon" }) {
|
|
@@ -29393,6 +29445,10 @@ function SvgDashIcon({ id = "dash-icon" }) {
|
|
|
29393
29445
|
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 640 640", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M96 320C96 302.3 110.3 288 128 288L512 288C529.7 288 544 302.3 544 320C544 337.7 529.7 352 512 352L128 352C110.3 352 96 337.7 96 320z", fill: "currentColor" }) }));
|
|
29394
29446
|
}
|
|
29395
29447
|
|
|
29448
|
+
function SvgPlaceholderIcon({ size = 20, ...props }) {
|
|
29449
|
+
return (jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsxRuntime.jsx("g", { id: "20px/Icon placeholder", clipPath: "url(#clip0_717_6325)", children: jsxRuntime.jsx("path", { id: "Icon", d: "M9.99996 18.3333C14.6023 18.3333 18.3333 14.6023 18.3333 9.99996C18.3333 5.39759 14.6023 1.66663 9.99996 1.66663C5.39759 1.66663 1.66663 5.39759 1.66663 9.99996C1.66663 14.6023 5.39759 18.3333 9.99996 18.3333Z", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }), jsxRuntime.jsx("defs", { children: jsxRuntime.jsx("clipPath", { id: "clip0_717_6325", children: jsxRuntime.jsx("rect", { width: "20", height: "20", fill: "white" }) }) })] }));
|
|
29450
|
+
}
|
|
29451
|
+
|
|
29396
29452
|
/* This component implements the Plus icon from Font Awesome: https://fontawesome.com/icons/plus */
|
|
29397
29453
|
function SvgPlusIcon({ id = "plus-icon" }) {
|
|
29398
29454
|
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "0 0 640 640", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M352 128C352 110.3 337.7 96 320 96C302.3 96 288 110.3 288 128L288 288L128 288C110.3 288 96 302.3 96 320C96 337.7 110.3 352 128 352L288 352L288 512C288 529.7 302.3 544 320 544C337.7 544 352 529.7 352 512L352 352L512 352C529.7 352 544 337.7 544 320C544 302.3 529.7 288 512 288L352 288L352 128z", fill: "currentColor" }) }));
|
|
@@ -29410,27 +29466,6 @@ function SvgReactAriaIcon({ id = "react-aria-icon" }) {
|
|
|
29410
29466
|
return (jsxRuntime.jsx("svg", { id: id, width: "20", height: "20", viewBox: "200 206 800 790", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { children: jsxRuntime.jsx("path", { d: "M720.67 205.995C867.583 205.995 986.679 325.091 986.68 472.003C986.68 590.753 908.865 691.325 801.446 725.521L979.312 948.055C994.438 966.98 980.963 995 956.736 995H795.612C778.743 995 762.715 987.629 751.734 974.823L697.365 911.421L493.126 653.39C457.134 607.918 489.518 540.979 547.511 540.977L720.67 540.971C758.758 540.971 789.635 510.091 789.635 472.003C789.634 433.915 758.758 403.038 720.67 403.038H429.939C404.955 403.038 388.623 391.886 373.994 373.623L277.349 252.966C262.194 234.045 275.664 205.996 299.905 205.995H720.67Z M396.605 720.706C407.798 705.406 430.443 704.843 442.381 719.568L503.816 797.018H502.786L535.569 838.934C548.074 854.358 549.943 877.191 538.047 893.09L476.638 972.545C465.692 986.707 448.803 995 430.903 995H242.276C218.18 995 204.665 967.248 219.523 948.278L337.992 797.018H337.923L396.605 720.706Z", fill: "#7F57FF" }) }) }));
|
|
29411
29467
|
}
|
|
29412
29468
|
|
|
29413
|
-
var css_248z$b = ".bcds-react-aria-Tag {\n color: var(--typography-color-primary);\n cursor: pointer;\n border: var(--layout-border-width-small) solid;\n display: flex;\n align-items: center;\n font: var(--typography-regular-label);\n width: fit-content;\n}\n.bcds-react-aria-Tag .react-aria-Button {\n background: none;\n border: none;\n color: var(--typography-color-primary);\n cursor: pointer;\n display: flex;\n margin: 0;\n padding: 0;\n}\n\n/* Tag colors */\n.bcds-react-aria-Tag.bc-blue {\n background-color: var(--theme-primary-blue);\n border-color: var(--theme-blue-90);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-blue .react-aria-Button {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.bc-gold {\n background-color: var(--theme-primary-gold);\n border-color: var(--theme-blue-90);\n}\n.bcds-react-aria-Tag.blue {\n background-color: var(--support-surface-color-info);\n border-color: var(--support-border-color-info);\n}\n.bcds-react-aria-Tag.dark {\n background: var(--theme-gray-110);\n border-color: var(--theme-blue-90);\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.dark .react-aria-Button {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Tag.gray,\n.bcds-react-aria-Tag.grey {\n background-color: var(--theme-gray-20);\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Tag.green {\n background-color: var(--support-surface-color-success);\n border-color: var(--support-border-color-success);\n}\n.bcds-react-aria-Tag.red {\n background-color: var(--support-surface-color-danger);\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Tag.yellow {\n background-color: var(--support-surface-color-warning);\n border-color: var(--support-border-color-warning);\n}\n\n/* Tag style */\n.bcds-react-aria-Tag.rectangular {\n border-radius: var(--layout-border-radius-small);\n}\n.bcds-react-aria-Tag.circular {\n border-radius: var(--layout-borderRadius-Circular, 9999px);\n}\n\n/* Tag size */\n.bcds-react-aria-Tag.medium {\n height: var(--layout-padding-xlarge);\n padding: var(--layout-padding-hair) var(--layout-padding-medium);\n gap: var(--layout-margin-medium);\n}\n.bcds-react-aria-Tag.small {\n height: var(--layout-padding-large);\n padding: var(--layout-padding-hair) var(--layout-padding-small);\n gap: var(--layout-margin-small);\n}\n\n/* Selected */\n.bcds-react-aria-Tag[data-selected] {\n border-radius: var(--layout-border-radius-small);\n border: var(--layout-border-width-medium) solid\n var(--surface-color-border-active);\n}\n\n/* Focused */\n.bcds-react-aria-Tag[data-focus-visible] {\n outline: var(--layout-border-width-medium) solid\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Disabled */\n.bcds-react-aria-Tag[data-disabled] {\n background-color: var(--surface-color-primary-button-disabled);\n border-color: var(--surface-color-border-default);\n color: var(--typography-color-disabled);\n cursor: not-allowed;\n}\n";
|
|
29414
|
-
styleInject(css_248z$b);
|
|
29415
|
-
|
|
29416
|
-
function Tag({ color = "blue", tagStyle = "rectangular", size = "small", icon, id, textValue, }) {
|
|
29417
|
-
return (jsxRuntime.jsx($3df3ddf5bafbc7b1$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color} ${tagStyle} ${size}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, textValue, !isDisabled && allowsRemoving && (jsxRuntime.jsx($7705c033048f6da7$export$353f5b6fc5456de1, { "aria-label": `Remove ${textValue}`, slot: "remove", children: jsxRuntime.jsx("svg", { width: "14", height: "15", viewBox: "0 0 14 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { id: "Icons / Close", children: jsxRuntime.jsx("path", { id: "Vector", d: "M12.6004 3.03239L11.4684 1.90039L7.00039 6.36839L2.53239 1.90039L1.40039 3.03239L5.86839 7.50039L1.40039 11.9684L2.53239 13.1004L7.00039 8.63239L11.4684 13.1004L12.6004 11.9684L8.13239 7.50039L12.6004 3.03239Z", fill: "currentColor" }) }) }) }))] })) }));
|
|
29418
|
-
}
|
|
29419
|
-
|
|
29420
|
-
var css_248z$a = ".bcds-react-aria-TagGroup {\n color: var(--typography-color-primary);\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-TagGroup--Label,\n.bcds-react-aria-TagGroup--Text-description,\n.bcds-react-aria-TagGroup--Text-error {\n display: block;\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TagGroup--Text-error {\n display: flex;\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TagGroup--Text-error > svg {\n padding-right: var(--layout-padding-xsmall);\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
29421
|
-
styleInject(css_248z$a);
|
|
29422
|
-
|
|
29423
|
-
function TagGroup({ children, label, description, errorMessage, ...props }) {
|
|
29424
|
-
return (jsxRuntime.jsxs($3df3ddf5bafbc7b1$export$67ea30858aaf75e3, { className: "bcds-react-aria-TagGroup", ...props, children: [label && (jsxRuntime.jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TagGroup--Label", children: label })), children, description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-TagGroup--Text-description", children: description })), errorMessage && (jsxRuntime.jsxs($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "errorMessage", className: "bcds-react-aria-TagGroup--Text-error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), errorMessage] }))] }));
|
|
29425
|
-
}
|
|
29426
|
-
|
|
29427
|
-
var css_248z$9 = ".bcds-react-aria-TagList {\n display: flex;\n flex-wrap: wrap;\n gap: var(--layout-padding-small);\n width: fit-content;\n}\n\n.bcds-react-aria-TagList.horizontal {\n flex-direction: row;\n}\n\n.bcds-react-aria-TagList.vertical {\n flex-direction: column;\n}\n";
|
|
29428
|
-
styleInject(css_248z$9);
|
|
29429
|
-
|
|
29430
|
-
function TagList({ items, orientation = "horizontal", renderEmptyState, ...props }) {
|
|
29431
|
-
return (jsxRuntime.jsx($3df3ddf5bafbc7b1$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => $8WNJc$react.createElement(Tag, { ...item, key: item.id }) }));
|
|
29432
|
-
}
|
|
29433
|
-
|
|
29434
29469
|
var css_248z$8 = "/* Medium size (default) */\n.bcds-react-aria-Text.medium {\n font: var(--typography-regular-body);\n}\n\n.bcds-react-aria-Text.medium b,\n.bcds-react-aria-Text.medium strong {\n font: var(--typography-bold-body);\n}\n\n.bcds-react-aria-Text.medium i,\n.bcds-react-aria-Text.medium em {\n font: var(--typography-italic-body);\n}\n\n/* Small size */\n.bcds-react-aria-Text.small {\n font: var(--typography-regular-small-body);\n}\n\n.bcds-react-aria-Text.small b,\n.bcds-react-aria-Text.small strong {\n font: var(--typography-bold-small-body);\n}\n\n.bcds-react-aria-Text.small i,\n.bcds-react-aria-Text.small em {\n font: var(--typography-italic-small-body);\n}\n\n/* Large size */\n.bcds-react-aria-Text.large {\n font: var(--typography-regular-large-body);\n}\n\n.bcds-react-aria-Text.large b,\n.bcds-react-aria-Text.large strong {\n font: var(--typography-bold-large-body);\n}\n\n.bcds-react-aria-Text.large i,\n.bcds-react-aria-Text.large em {\n font: var(--typography-italic-large-body);\n}\n\n/* Text color */\n.bcds-react-aria-Text.primary {\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Text.primaryInvert {\n color: var(--typography-color-primary-invert);\n}\n.bcds-react-aria-Text.secondary {\n color: var(--typography-color-secondary);\n}\n.bcds-react-aria-Text.secondaryInvert {\n color: var(--typography-color-secondary-invert);\n}\n.bcds-react-aria-Text.disabled {\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Text.danger {\n color: var(--typography-color-danger);\n}\n";
|
|
29435
29470
|
styleInject(css_248z$8);
|
|
29436
29471
|
|
|
@@ -29438,7 +29473,7 @@ function Text({ elementType = "span", size = "medium", color = "primary", isUnst
|
|
|
29438
29473
|
return (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { elementType: elementType, className: isUnstyled ? undefined : `bcds-react-aria-Text ${size} ${color}`, ...props, children: props.children }));
|
|
29439
29474
|
}
|
|
29440
29475
|
|
|
29441
|
-
var css_248z$7 = ".bcds-react-aria-TextArea {\n display: inline-flex;\n flex-direction: column;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n align-self: stretch;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextArea--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the description and character count slot below the input field */\n.bcds-react-aria-TextArea--Description {\n display: grid;\n gap: var(--layout-margin-medium);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n\n/* Description label */\n.bcds-react-aria-TextArea--Description > .text {\n justify-self: flex-start;\n grid-row: 1;\n}\n\n/* Character counter */\n.bcds-react-aria-TextArea--Description > .counter {\n justify-self: flex-end;\n grid-row: 1;\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextArea--Container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-forms-default);\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n padding: var(--layout-padding-small) 12px;\n}\n\n/* Text input field */\n.bcds-react-aria-TextArea--Input {\n font: var(--typography-regular-body);\n padding: var(--layout-padding-none);\n color: var(--typography-color-primary);\n border: none;\n flex-grow: 1;\n}\n\n.bcds-rect-aria-TextArea--Input::placeholder {\n color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TextArea--Container\n > .bcds-react-aria-TextArea--Input[data-focused] {\n outline: none;\n}\n\n.bcds-react-aria-TextArea--Container:has(\n
|
|
29476
|
+
var css_248z$7 = ".bcds-react-aria-TextArea {\n display: inline-flex;\n flex-direction: column;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n align-self: stretch;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextArea--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the description and character count slot below the input field */\n.bcds-react-aria-TextArea--Description {\n display: grid;\n gap: var(--layout-margin-medium);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n\n/* Description label */\n.bcds-react-aria-TextArea--Description > .text {\n justify-self: flex-start;\n grid-row: 1;\n}\n\n/* Character counter */\n.bcds-react-aria-TextArea--Description > .counter {\n justify-self: flex-end;\n grid-row: 1;\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextArea--Container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-forms-default);\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n padding: var(--layout-padding-small) 12px;\n}\n\n/* Text input field */\n.bcds-react-aria-TextArea--Input {\n font: var(--typography-regular-body);\n padding: var(--layout-padding-none);\n color: var(--typography-color-primary);\n border: none;\n flex-grow: 1;\n}\n\n.bcds-rect-aria-TextArea--Input::placeholder {\n color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n.bcds-react-aria-TextArea--Container\n > .bcds-react-aria-TextArea--Input[data-focused] {\n outline: none;\n}\n\n.bcds-react-aria-TextArea--Container:has(\n > .bcds-react-aria-TextArea--Input[data-focused]\n),\n.bcds-react-aria-TextArea--Container:has(\n > .bcds-react-aria-TextArea--Input[data-focused][data-hovered]\n) {\n border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextArea--Container:has(\n > .bcds-react-aria-TextArea--Input[data-focus-visible]\n) {\n border-radius: var(--layout-border-radius-large);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-active);\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TextArea--Container:has(\n > .bcds-react-aria-TextArea--Input[data-hovered]\n) {\n border-color: var(--surface-color-border-dark);\n}\n\n/* Disabled and invalid states */\n.bcds-react-aria-TextArea[data-disabled] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-disabled] .bcds-react-aria-TextArea--Input {\n background: var(--surface-color-forms-disabled);\n color: var(--typography-color-placeholder);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TextArea[data-invalid] > .bcds-react-aria-TextArea--Container {\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextArea[data-readonly] > .bcds-react-aria-TextArea--Container,\n.bcds-react-aria-TextArea[data-readonly] .bcds-react-aria-TextArea--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextArea--Error {\n display: flex;\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextArea--Error > svg {\n padding-right: var(--layout-padding-xsmall);\n color: var(--icons-color-danger);\n width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
29442
29477
|
styleInject(css_248z$7);
|
|
29443
29478
|
|
|
29444
29479
|
function TextArea({ label, description, errorMessage, maxLength, onChange, value, ...props }) {
|
|
@@ -29452,7 +29487,7 @@ function TextArea({ label, description, errorMessage, maxLength, onChange, value
|
|
|
29452
29487
|
return (jsxRuntime.jsx($b8dcdc58eeae0d40$export$2c73285ae9390cec, { className: `bcds-react-aria-TextArea`, ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx($43a3b93638fe5db9$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextArea--Label", children: isRequired ? `${label} (required)` : label })), jsxRuntime.jsx("div", { className: "bcds-react-aria-TextArea--Container", children: jsxRuntime.jsx($bd263d78e9bf3c56$export$f5c9f3c2c4054eec, { className: "bcds-react-aria-TextArea--Input", value: value, onChange: (e) => handleChange(e.target.value) }) }), description || maxLength ? (jsxRuntime.jsxs("div", { className: "bcds-react-aria-TextArea--Description", children: [description && (jsxRuntime.jsx($efe09c6d1c304b50$export$5f1af8db9871e1d6, { slot: "description", className: "text", children: description })), maxLength && (jsxRuntime.jsxs("div", { className: "counter", children: [charCount, "/", maxLength] }))] })) : null, isInvalid && (jsxRuntime.jsxs("div", { className: "bcds-react-aria-TextArea--Error", children: [jsxRuntime.jsx(SvgExclamationIcon, {}), jsxRuntime.jsx($1f3c3b1a70cec653$export$f551688fc98f2e09, { children: errorMessage })] }))] })) }));
|
|
29453
29488
|
}
|
|
29454
29489
|
|
|
29455
|
-
var css_248z$6 = ".bcds-react-aria-TextField {\n display: inline-flex;\n flex-direction: column;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n align-self: stretch;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TextField--Label .required {\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-forms-default);\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n height: var(--layout-margin-xlarge);\n min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n height: var(--layout-margin-xxlarge);\n min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n font: var(--typography-regular-body);\n padding: var(--layout-padding-none);\n color: var(--typography-color-primary);\n border: none;\n flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n > .bcds-react-aria-TextField--Input[data-focused] {\n outline: none;\n}\n\n.bcds-react-aria-TextField--container:has(\n
|
|
29490
|
+
var css_248z$6 = ".bcds-react-aria-TextField {\n display: inline-flex;\n flex-direction: column;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n align-self: stretch;\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Styles for the text label above the input field */\n.bcds-react-aria-TextField--Label {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-primary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n.bcds-react-aria-TextField--Label .required {\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-none) var(--layout-padding-xsmall);\n}\n\n/* Styles for the text description below the input field */\n.bcds-react-aria-TextField--Description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n padding: var(--layout-padding-xsmall) var(--layout-padding-none);\n}\n\n/* Styles for the input field container */\n.bcds-react-aria-TextField--container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n background: var(--surface-color-forms-default);\n box-sizing: border-box;\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n height: var(--layout-margin-xlarge);\n min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n height: var(--layout-margin-xxlarge);\n min-height: var(--layout-margin-xxlarge);\n}\n\n/* Text input field */\n.bcds-react-aria-TextField--Input {\n font: var(--typography-regular-body);\n padding: var(--layout-padding-none);\n color: var(--typography-color-primary);\n border: none;\n flex-grow: 1;\n}\n\n.bcds-react-aria-TextField--Input::placeholder {\n color: var(--typography-color-placeholder);\n}\n\n/* Hover and focus states */\n\n.bcds-react-aria-TextField--container\n > .bcds-react-aria-TextField--Input[data-focused] {\n outline: none;\n}\n\n.bcds-react-aria-TextField--container:has(\n > .bcds-react-aria-TextField--Input[data-focused]\n),\n.bcds-react-aria-TextField--container:has(\n > .bcds-react-aria-TextField--Input[data-focused][data-hovered]\n) {\n border-color: var(--surface-color-border-active);\n}\n\n.bcds-react-aria-TextField--container:has(\n > .bcds-react-aria-TextField--Input[data-focus-visible]\n) {\n border-radius: var(--layout-border-radius-large);\n border: var(--layout-border-width-small) solid\n var(--surface-color-border-active);\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n.bcds-react-aria-TextField--container:hover {\n border-color: var(--surface-color-border-dark);\n}\n\n/* Disabled and invalid states */\n\n.bcds-react-aria-TextField[data-disabled]\n > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-disabled] .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n color: var(--typography-color-placeholder);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField[data-invalid]\n > .bcds-react-aria-TextField--container {\n border-radius: var(--layout-border-radius-medium);\n border: var(--layout-border-width-small) solid\n var(--support-border-color-danger);\n background: var(--surface-color-forms-default);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n > .bcds-react-aria-TextField--container,\n.bcds-react-aria-TextField[data-readonly] .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n.bcds-react-aria-TextField[data-readonly]\n > .bcds-react-aria-TextField--container\n > .bcds-react-aria-TextField--Input {\n background: var(--surface-color-forms-disabled);\n}\n\n/* Styles for the error message slot */\n.bcds-react-aria-TextField--Error {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-danger);\n}\n\n.bcds-react-aria-TextField[data-invalid]\n > .bcds-react-aria-TextField--container\n > svg#exclamation-icon {\n color: var(--icons-color-danger);\n min-width: var(--icons-size-medium);\n height: var(--icons-size-medium);\n}\n";
|
|
29456
29491
|
styleInject(css_248z$6);
|
|
29457
29492
|
|
|
29458
29493
|
function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }) {
|
|
@@ -29545,6 +29580,7 @@ exports.SvgExclamationCircleIcon = SvgExclamationCircleIcon;
|
|
|
29545
29580
|
exports.SvgExclamationIcon = SvgExclamationIcon;
|
|
29546
29581
|
exports.SvgInfoIcon = SvgInfoIcon;
|
|
29547
29582
|
exports.SvgMinusIcon = SvgDashIcon;
|
|
29583
|
+
exports.SvgPlaceholderIcon = SvgPlaceholderIcon;
|
|
29548
29584
|
exports.SvgPlusIcon = SvgPlusIcon;
|
|
29549
29585
|
exports.SvgReactAriaIcon = SvgReactAriaIcon;
|
|
29550
29586
|
exports.SvgTooltipArrowUp = SvgTooltipArrowUp;
|