@bcgov/design-system-react-components 0.0.7 → 0.0.8
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 +322 -20
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/types/components/Select/Select.d.ts +3 -2
- package/dist/cjs/types/components/TextField/TextField.d.ts +12 -0
- package/dist/cjs/types/components/TextField/index.d.ts +2 -0
- package/dist/cjs/types/components/index.d.ts +1 -0
- package/dist/esm/index.js +322 -21
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/components/Select/Select.d.ts +3 -2
- package/dist/esm/types/components/TextField/TextField.d.ts +12 -0
- package/dist/esm/types/components/TextField/index.d.ts +2 -0
- package/dist/esm/types/components/index.d.ts +1 -0
- package/dist/index.d.ts +14 -3
- package/package.json +11 -11
package/dist/esm/index.js
CHANGED
|
@@ -29,8 +29,8 @@ function styleInject(css, ref) {
|
|
|
29
29
|
}
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
var css_248z$
|
|
33
|
-
styleInject(css_248z$
|
|
32
|
+
var css_248z$9 = "/**\n * Do not edit directly\n * Generated on Wed, 01 May 2024 18:02:21 GMT\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;\n --surface-shadow-small: 0 0.6000000238418579px 1.7999999523162842px 0 #0000001a, 0 3.200000047683716px 7.199999809265137px 0 #00000021; /* Primarily used as a hover effect for cards */\n --surface-shadow-medium: 0 1.2000000476837158px 3.5999999046325684px 0 #0000001a, 0 6.400000095367432px 14.399999618530273px 0 #00000021; /* Primarily used for dropdown menus and tooltips */\n --surface-shadow-large: 0 4.800000190734863px 14.399999618530273px 0 #0000002e, 0 25.600000381469727px 57.599998474121094px 0 #00000038; /* Primarily used for dialogs */\n --surface-color-primary-button-default: #013366;\n --surface-color-primary-button-hover: #1E5189;\n --surface-color-primary-button-disabled: #EDEBE9;\n --surface-color-primary-danger-button-default: #CE3E39;\n --surface-color-primary-danger-button-hover: #A2312D;\n --surface-color-primary-danger-button-disabled: #EDEBE9;\n --surface-color-secondary-button-default: #FFFFFF;\n --surface-color-secondary-button-hover: #EDEBE9;\n --surface-color-secondary-button-disabled: #EDEBE9;\n --surface-color-tertiary-button-default: rgba(255,255,255,0);\n --surface-color-tertiary-button-hover: #ECEAE8;\n --surface-color-tertiary-button-disabled: #EDEBE9;\n --surface-color-menus-default: #FFFFFF;\n --surface-color-menus-hover: #EDEBE9;\n --surface-color-forms-default: #FFFFFF;\n --surface-color-forms-disabled: #EDEBE9;\n --surface-color-background-white: #FFFFFF;\n --surface-color-background-light-gray: #FAF9F8;\n --surface-color-background-light-blue: #F1F8FE;\n --surface-color-background-dark-blue: #053662;\n --surface-color-border-default: #D8D8D8;\n --surface-color-border-medium: #898785;\n --surface-color-border-dark: #353433;\n --surface-color-border-active: #2E5DD7;\n --surface-color-overlay-default: rgba(0,0,0,0.45);\n --support-surface-color-info: #F7F9FC;\n --support-surface-color-danger: #F4E1E2;\n --support-surface-color-success: #F6FFF8;\n --support-surface-color-warning: #FEF1D8;\n --support-border-color-info: #053662;\n --support-border-color-danger: #CE3E39;\n --support-border-color-success: #42814A;\n --support-border-color-warning: #F8BB47;\n --icons-size-xsmall: 14px;\n --icons-size-small: 16px;\n --icons-size-medium: 20px;\n --icons-size-large: 24px;\n --icons-size-xlarge: 32px;\n --icons-color-primary: #2D2D2D;\n --icons-color-secondary: #474543;\n --icons-color-disabled: #9F9D9C;\n --icons-color-link: #255A90;\n --icons-color-info: #053662;\n --icons-color-danger: #CE3E39;\n --icons-color-success: #42814A;\n --icons-color-warning: #F8BB47;\n --icons-color-primary-invert: #FFFFFF;\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;\n --layout-padding-xsmall: 0.25rem;\n --layout-padding-small: 0.5rem;\n --layout-padding-medium: 1rem;\n --layout-padding-large: 1.5rem;\n --layout-padding-xlarge: 2rem;\n --layout-margin-none: 0rem;\n --layout-margin-hair: 0.125rem;\n --layout-margin-xsmall: 0.25rem;\n --layout-margin-small: 0.5rem;\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;\n --layout-border-radius-none: 0;\n --layout-border-radius-small: 2px;\n --layout-border-radius-medium: 4px;\n --layout-border-radius-large: 6px;\n --typography-font-families-bc-sans: 'BC Sans';\n --typography-line-heights-xxxdense: 1.125rem;\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;\n --typography-line-heights-sparse: 2.25rem;\n --typography-line-heights-xsparse: 3rem;\n --typography-line-heights-xxsparse: 3.375rem;\n --typography-line-heights-auto: AUTO;\n --typography-font-weights-regular: 400;\n --typography-font-weights-bold: 700;\n --typography-font-weights-italic: Italic;\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;\n --typography-paragraph-spacing-0: 0;\n --typography-regular-label: 400 0.75rem/1.125rem 'BC Sans';\n --typography-regular-small-body: 400 0.875rem/1.313rem 'BC Sans';\n --typography-regular-body: 400 1rem/1.688rem 'BC Sans';\n --typography-regular-large-body: 400 1.125rem/1.913rem 'BC Sans';\n --typography-regular-h6: 400 1.125rem/1.913rem 'BC Sans';\n --typography-regular-h5: 400 1.25rem/2.125rem 'BC Sans';\n --typography-regular-h4: 400 1.5rem/2.25rem 'BC Sans';\n --typography-regular-h3: 400 1.75rem/3rem 'BC Sans';\n --typography-regular-h2: 400 2rem/3.375rem 'BC Sans';\n --typography-regular-h1: 400 2.25rem/3rem 'BC Sans';\n --typography-regular-display: 400 3rem/AUTO 'BC Sans';\n --typography-bold-label: 700 0.75rem/1.125rem 'BC Sans';\n --typography-bold-small-body: 700 0.875rem/1.313rem 'BC Sans';\n --typography-bold-body: 700 1rem/1.688rem 'BC Sans';\n --typography-bold-large-body: 700 1.125rem/1.913rem 'BC Sans';\n --typography-bold-h6: 700 1.125rem/1.913rem 'BC Sans';\n --typography-bold-h5: 700 1.25rem/2.125rem 'BC Sans';\n --typography-bold-h4: 700 1.5rem/2.25rem 'BC Sans';\n --typography-bold-h3: 700 1.75rem/3rem 'BC Sans';\n --typography-bold-h2: 700 2rem/3rem 'BC Sans';\n --typography-bold-h1: 700 2.25rem/3.375rem 'BC Sans';\n --typography-bold-display: 700 3rem/AUTO 'BC Sans';\n --typography-italic-label: 400 italic 0.75rem/1.125rem 'BC Sans';\n --typography-italic-small-body: 400 italic 0.875rem/1.313rem 'BC Sans';\n --typography-italic-body: 400 italic 1rem/1.688rem 'BC Sans';\n --typography-italic-large-body: 400 italic 1.125rem/1.913rem 'BC Sans';\n --typography-italic-h6: 400 italic 1.125rem/1.913rem 'BC Sans';\n --typography-italic-h5: 400 italic 1.25rem/2.125rem 'BC Sans';\n --typography-italic-h4: 400 italic 1.5rem/2.25rem 'BC Sans';\n --typography-italic-h3: 400 italic 1.75rem/3.375rem 'BC Sans';\n --typography-italic-h2: 400 italic 2rem/3rem 'BC Sans';\n --typography-italic-h1: 400 italic 2.25rem/3.375rem 'BC Sans';\n --typography-italic-display: 400 italic 3rem/AUTO 'BC Sans';\n --typography-text-case-none: none;\n --typography-text-decoration-none: none;\n --typography-paragraph-indent-0: 0px;\n --typography-color-primary: #2D2D2D;\n --typography-color-secondary: #474543;\n --typography-color-placeholder: #9F9D9C;\n --typography-color-disabled: #9F9D9C;\n --typography-color-link: #255A90;\n --typography-color-danger: #CE3E39;\n --typography-color-primary-invert: #FFFFFF;\n --typography-color-secondary-invert: #ECEAE8;\n --theme-gold-10: #FEF8E8;\n --theme-gold-20: #FEF0D8;\n --theme-gold-30: #FDE9C4;\n --theme-gold-40: #FCE2B0;\n --theme-gold-50: #FBDA9D;\n --theme-gold-60: #FBD389;\n --theme-gold-70: #FACC75;\n --theme-gold-80: #F9C462;\n --theme-gold-90: #F8BA47;\n --theme-gold-100: #FCBA19;\n --theme-blue-10: #F1F8FE;\n --theme-blue-20: #D8EAFD;\n --theme-blue-30: #C1DDFC;\n --theme-blue-40: #A8D0FB;\n --theme-blue-50: #91C4FA;\n --theme-blue-60: #7AB8F9;\n --theme-blue-70: #5595D9;\n --theme-blue-80: #3470B1;\n --theme-blue-90: #1E5189;\n --theme-blue-100: #013366;\n --theme-gray-10: #FAF9F8;\n --theme-gray-20: #F3F2F1;\n --theme-gray-30: #ECEAE8;\n --theme-gray-40: #E0DEDC;\n --theme-gray-50: #D1CFCD;\n --theme-gray-60: #C6C5C3;\n --theme-gray-70: #9F9D9C;\n --theme-gray-80: #605E5C;\n --theme-gray-90: #3D3C3B;\n --theme-gray-100: #353433;\n --theme-gray-110: #252423;\n --theme-gray-white: #FFFFFF;\n --theme-primary-blue: #013366;\n --theme-primary-gold: #FCBA19;\n}\n";
|
|
33
|
+
styleInject(css_248z$9);
|
|
34
34
|
|
|
35
35
|
/*
|
|
36
36
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -7561,6 +7561,110 @@ function $168583247155ddda$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
|
7561
7561
|
};
|
|
7562
7562
|
}
|
|
7563
7563
|
|
|
7564
|
+
/*
|
|
7565
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
7566
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
7567
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
7568
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
7569
|
+
*
|
|
7570
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
7571
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
7572
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
7573
|
+
* governing permissions and limitations under the License.
|
|
7574
|
+
*/
|
|
7575
|
+
|
|
7576
|
+
|
|
7577
|
+
|
|
7578
|
+
|
|
7579
|
+
|
|
7580
|
+
|
|
7581
|
+
function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
|
|
7582
|
+
let { inputElementType: inputElementType = 'input', isDisabled: isDisabled = false, isRequired: isRequired = false, isReadOnly: isReadOnly = false, type: type = 'text', validationBehavior: validationBehavior = 'aria' } = props;
|
|
7583
|
+
let [value, setValue] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, props.defaultValue || '', props.onChange);
|
|
7584
|
+
let { focusableProps: focusableProps } = ($e6afbd83fe6ebbd2$export$4c014de7c8940b4c)(props, ref);
|
|
7585
|
+
let validationState = ($e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
|
|
7586
|
+
...props,
|
|
7587
|
+
value: value
|
|
7588
|
+
});
|
|
7589
|
+
let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
|
|
7590
|
+
let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = ($2baaea4c71418dea$export$294aa081a6c6f55d)({
|
|
7591
|
+
...props,
|
|
7592
|
+
isInvalid: isInvalid,
|
|
7593
|
+
errorMessage: props.errorMessage || validationErrors
|
|
7594
|
+
});
|
|
7595
|
+
let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props, {
|
|
7596
|
+
labelable: true
|
|
7597
|
+
});
|
|
7598
|
+
const inputOnlyProps = {
|
|
7599
|
+
type: type,
|
|
7600
|
+
pattern: props.pattern
|
|
7601
|
+
};
|
|
7602
|
+
($99facab73266f662$export$5add1d006293d136)(ref, value, setValue);
|
|
7603
|
+
($e93e671b31057976$export$b8473d3665f3a75a)(props, validationState, ref);
|
|
7604
|
+
(useEffect)(()=>{
|
|
7605
|
+
// This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
|
|
7606
|
+
// We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
|
|
7607
|
+
// which causes Chrome to skip validation. Only updating `value` is ok in our case since our
|
|
7608
|
+
// textareas are always controlled. React is planning on removing this synchronization in a
|
|
7609
|
+
// future major version.
|
|
7610
|
+
// https://github.com/facebook/react/issues/19474
|
|
7611
|
+
// https://github.com/facebook/react/issues/11896
|
|
7612
|
+
if (ref.current instanceof ($431fbd86ca7dc216$export$f21a1ffae260145a)(ref.current).HTMLTextAreaElement) {
|
|
7613
|
+
let input = ref.current;
|
|
7614
|
+
Object.defineProperty(input, 'defaultValue', {
|
|
7615
|
+
get: ()=>input.value,
|
|
7616
|
+
set: ()=>{},
|
|
7617
|
+
configurable: true
|
|
7618
|
+
});
|
|
7619
|
+
}
|
|
7620
|
+
}, [
|
|
7621
|
+
ref
|
|
7622
|
+
]);
|
|
7623
|
+
return {
|
|
7624
|
+
labelProps: labelProps,
|
|
7625
|
+
inputProps: ($3ef42575df84b30b$export$9d1611c77c2fe928)(domProps, inputElementType === 'input' && inputOnlyProps, {
|
|
7626
|
+
disabled: isDisabled,
|
|
7627
|
+
readOnly: isReadOnly,
|
|
7628
|
+
required: isRequired && validationBehavior === 'native',
|
|
7629
|
+
'aria-required': isRequired && validationBehavior === 'aria' || undefined,
|
|
7630
|
+
'aria-invalid': isInvalid || undefined,
|
|
7631
|
+
'aria-errormessage': props['aria-errormessage'],
|
|
7632
|
+
'aria-activedescendant': props['aria-activedescendant'],
|
|
7633
|
+
'aria-autocomplete': props['aria-autocomplete'],
|
|
7634
|
+
'aria-haspopup': props['aria-haspopup'],
|
|
7635
|
+
value: value,
|
|
7636
|
+
onChange: (e)=>setValue(e.target.value),
|
|
7637
|
+
autoComplete: props.autoComplete,
|
|
7638
|
+
autoCapitalize: props.autoCapitalize,
|
|
7639
|
+
maxLength: props.maxLength,
|
|
7640
|
+
minLength: props.minLength,
|
|
7641
|
+
name: props.name,
|
|
7642
|
+
placeholder: props.placeholder,
|
|
7643
|
+
inputMode: props.inputMode,
|
|
7644
|
+
// Clipboard events
|
|
7645
|
+
onCopy: props.onCopy,
|
|
7646
|
+
onCut: props.onCut,
|
|
7647
|
+
onPaste: props.onPaste,
|
|
7648
|
+
// Composition events
|
|
7649
|
+
onCompositionEnd: props.onCompositionEnd,
|
|
7650
|
+
onCompositionStart: props.onCompositionStart,
|
|
7651
|
+
onCompositionUpdate: props.onCompositionUpdate,
|
|
7652
|
+
// Selection events
|
|
7653
|
+
onSelect: props.onSelect,
|
|
7654
|
+
// Input events
|
|
7655
|
+
onBeforeInput: props.onBeforeInput,
|
|
7656
|
+
onInput: props.onInput,
|
|
7657
|
+
...focusableProps,
|
|
7658
|
+
...fieldProps
|
|
7659
|
+
}),
|
|
7660
|
+
descriptionProps: descriptionProps,
|
|
7661
|
+
errorMessageProps: errorMessageProps,
|
|
7662
|
+
isInvalid: isInvalid,
|
|
7663
|
+
validationErrors: validationErrors,
|
|
7664
|
+
validationDetails: validationDetails
|
|
7665
|
+
};
|
|
7666
|
+
}
|
|
7667
|
+
|
|
7564
7668
|
/*
|
|
7565
7669
|
* Copyright 2020 Adobe. All rights reserved.
|
|
7566
7670
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -11437,6 +11541,32 @@ function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
|
|
|
11437
11541
|
|
|
11438
11542
|
|
|
11439
11543
|
const $ee014567cb39d3f0$export$ff05c3ac10437e03 = /*#__PURE__*/ (createContext)(null);
|
|
11544
|
+
function $ee014567cb39d3f0$var$FieldError(props, ref) {
|
|
11545
|
+
let validation = (useContext)($ee014567cb39d3f0$export$ff05c3ac10437e03);
|
|
11546
|
+
if (!(validation === null || validation === void 0 ? void 0 : validation.isInvalid)) return null;
|
|
11547
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement($ee014567cb39d3f0$var$FieldErrorInner, {
|
|
11548
|
+
...props,
|
|
11549
|
+
ref: ref
|
|
11550
|
+
});
|
|
11551
|
+
}
|
|
11552
|
+
/**
|
|
11553
|
+
* A FieldError displays validation errors for a form field.
|
|
11554
|
+
*/ const $ee014567cb39d3f0$export$f551688fc98f2e09 = /*#__PURE__*/ (forwardRef)($ee014567cb39d3f0$var$FieldError);
|
|
11555
|
+
const $ee014567cb39d3f0$var$FieldErrorInner = /*#__PURE__*/ (forwardRef)((props, ref)=>{
|
|
11556
|
+
let validation = (useContext)($ee014567cb39d3f0$export$ff05c3ac10437e03);
|
|
11557
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
11558
|
+
...props,
|
|
11559
|
+
defaultClassName: 'react-aria-FieldError',
|
|
11560
|
+
defaultChildren: validation.validationErrors.length === 0 ? undefined : validation.validationErrors.join(' '),
|
|
11561
|
+
values: validation
|
|
11562
|
+
});
|
|
11563
|
+
if (renderProps.children == null) return null;
|
|
11564
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement(($514c0188e459b4c0$export$5f1af8db9871e1d6), {
|
|
11565
|
+
slot: "errorMessage",
|
|
11566
|
+
...renderProps,
|
|
11567
|
+
ref: ref
|
|
11568
|
+
});
|
|
11569
|
+
});
|
|
11440
11570
|
|
|
11441
11571
|
/*
|
|
11442
11572
|
* Copyright 2023 Adobe. All rights reserved.
|
|
@@ -11478,6 +11608,59 @@ function $01b77f81d0f07f68$var$Label(props, ref) {
|
|
|
11478
11608
|
}
|
|
11479
11609
|
const $01b77f81d0f07f68$export$b04be29aa201d4f5 = /*#__PURE__*/ ($64fa3d84918910a7$export$86427a43e3e48ebb)($01b77f81d0f07f68$var$Label);
|
|
11480
11610
|
|
|
11611
|
+
/*
|
|
11612
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
11613
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
11614
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
11615
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
11616
|
+
*
|
|
11617
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
11618
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
11619
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
11620
|
+
* governing permissions and limitations under the License.
|
|
11621
|
+
*/
|
|
11622
|
+
|
|
11623
|
+
|
|
11624
|
+
const $3985021b0ad6602f$export$37fb8590cf2c088c = /*#__PURE__*/ (createContext)({});
|
|
11625
|
+
let $3985021b0ad6602f$var$filterHoverProps = (props)=>{
|
|
11626
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
11627
|
+
let { onHoverStart: onHoverStart, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, ...otherProps } = props;
|
|
11628
|
+
return otherProps;
|
|
11629
|
+
};
|
|
11630
|
+
function $3985021b0ad6602f$var$Input(props, ref) {
|
|
11631
|
+
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $3985021b0ad6602f$export$37fb8590cf2c088c);
|
|
11632
|
+
let { hoverProps: hoverProps, isHovered: isHovered } = ($6179b936705e76d3$export$ae780daf29e6d456)(props);
|
|
11633
|
+
let { isFocused: isFocused, isFocusVisible: isFocusVisible, focusProps: focusProps } = ($f7dceffc5ad7768b$export$4e328f61c538687f)({
|
|
11634
|
+
isTextInput: true,
|
|
11635
|
+
autoFocus: props.autoFocus
|
|
11636
|
+
});
|
|
11637
|
+
let isInvalid = !!props['aria-invalid'] && props['aria-invalid'] !== 'false';
|
|
11638
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
11639
|
+
...props,
|
|
11640
|
+
values: {
|
|
11641
|
+
isHovered: isHovered,
|
|
11642
|
+
isFocused: isFocused,
|
|
11643
|
+
isFocusVisible: isFocusVisible,
|
|
11644
|
+
isDisabled: props.disabled || false,
|
|
11645
|
+
isInvalid: isInvalid
|
|
11646
|
+
},
|
|
11647
|
+
defaultClassName: 'react-aria-Input'
|
|
11648
|
+
});
|
|
11649
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement("input", {
|
|
11650
|
+
...($3ef42575df84b30b$export$9d1611c77c2fe928)($3985021b0ad6602f$var$filterHoverProps(props), focusProps, hoverProps),
|
|
11651
|
+
...renderProps,
|
|
11652
|
+
ref: ref,
|
|
11653
|
+
"data-focused": isFocused || undefined,
|
|
11654
|
+
"data-disabled": props.disabled || undefined,
|
|
11655
|
+
"data-hovered": isHovered || undefined,
|
|
11656
|
+
"data-focus-visible": isFocusVisible || undefined,
|
|
11657
|
+
"data-invalid": isInvalid || undefined
|
|
11658
|
+
});
|
|
11659
|
+
}
|
|
11660
|
+
/**
|
|
11661
|
+
* An input allows a user to input text.
|
|
11662
|
+
*/ const $3985021b0ad6602f$export$f5b8910cec6cf069 = /*#__PURE__*/ ($64fa3d84918910a7$export$86427a43e3e48ebb)($3985021b0ad6602f$var$Input);
|
|
11663
|
+
|
|
11481
11664
|
var $e038a7e7a6d81989$exports = {};
|
|
11482
11665
|
$e038a7e7a6d81989$exports = {
|
|
11483
11666
|
"colorSwatchPicker": `\u{62A}\u{63A}\u{64A}\u{64A}\u{631}\u{627}\u{62A} \u{627}\u{644}\u{623}\u{644}\u{648}\u{627}\u{646}`,
|
|
@@ -12917,6 +13100,113 @@ function $eaf9e70818b436db$var$TagItem({ item: item }) {
|
|
|
12917
13100
|
}, renderProps.children)));
|
|
12918
13101
|
}
|
|
12919
13102
|
|
|
13103
|
+
const $216918bed6669f72$export$2dc6166a7e65358c = /*#__PURE__*/ (createContext)({});
|
|
13104
|
+
|
|
13105
|
+
/*
|
|
13106
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
13107
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
13108
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
13109
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
13110
|
+
*
|
|
13111
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
13112
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
13113
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
13114
|
+
* governing permissions and limitations under the License.
|
|
13115
|
+
*/
|
|
13116
|
+
|
|
13117
|
+
|
|
13118
|
+
|
|
13119
|
+
|
|
13120
|
+
|
|
13121
|
+
|
|
13122
|
+
|
|
13123
|
+
|
|
13124
|
+
|
|
13125
|
+
const $bcdf0525bf22703d$export$2129e27b3ef0d483 = /*#__PURE__*/ (createContext)(null);
|
|
13126
|
+
function $bcdf0525bf22703d$var$TextField(props, ref) {
|
|
13127
|
+
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $bcdf0525bf22703d$export$2129e27b3ef0d483);
|
|
13128
|
+
let { validationBehavior: formValidationBehavior } = ($64fa3d84918910a7$export$fabf2dc03a41866e)(($d3e0e05bdfcf66bd$export$c24727297075ec6a)) || {};
|
|
13129
|
+
var _props_validationBehavior, _ref;
|
|
13130
|
+
let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : 'native';
|
|
13131
|
+
let inputRef = (useRef)(null);
|
|
13132
|
+
let [labelRef, label] = ($64fa3d84918910a7$export$9d4c57ee4c6ffdd8)();
|
|
13133
|
+
let [inputElementType, setInputElementType] = (useState)('input');
|
|
13134
|
+
let { labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = ($2d73ec29415bd339$export$712718f7aec83d5)({
|
|
13135
|
+
...($64fa3d84918910a7$export$ef03459518577ad4)(props),
|
|
13136
|
+
inputElementType: inputElementType,
|
|
13137
|
+
label: label,
|
|
13138
|
+
validationBehavior: validationBehavior
|
|
13139
|
+
}, inputRef);
|
|
13140
|
+
// Intercept setting the input ref so we can determine what kind of element we have.
|
|
13141
|
+
// useTextField uses this to determine what props to include.
|
|
13142
|
+
let inputOrTextAreaRef = (useCallback)((el)=>{
|
|
13143
|
+
inputRef.current = el;
|
|
13144
|
+
if (el) setInputElementType(el instanceof HTMLTextAreaElement ? 'textarea' : 'input');
|
|
13145
|
+
}, []);
|
|
13146
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
13147
|
+
...props,
|
|
13148
|
+
values: {
|
|
13149
|
+
isDisabled: props.isDisabled || false,
|
|
13150
|
+
isInvalid: validation.isInvalid,
|
|
13151
|
+
isReadOnly: props.isReadOnly || false,
|
|
13152
|
+
isRequired: props.isRequired || false
|
|
13153
|
+
},
|
|
13154
|
+
defaultClassName: 'react-aria-TextField'
|
|
13155
|
+
});
|
|
13156
|
+
let DOMProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props);
|
|
13157
|
+
delete DOMProps.id;
|
|
13158
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
13159
|
+
...DOMProps,
|
|
13160
|
+
...renderProps,
|
|
13161
|
+
ref: ref,
|
|
13162
|
+
slot: props.slot || undefined,
|
|
13163
|
+
"data-disabled": props.isDisabled || undefined,
|
|
13164
|
+
"data-invalid": validation.isInvalid || undefined,
|
|
13165
|
+
"data-readonly": props.isReadOnly || undefined,
|
|
13166
|
+
"data-required": props.isRequired || undefined
|
|
13167
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement(($64fa3d84918910a7$export$2881499e37b75b9a), {
|
|
13168
|
+
values: [
|
|
13169
|
+
[
|
|
13170
|
+
($01b77f81d0f07f68$export$75b6ee27786ba447),
|
|
13171
|
+
{
|
|
13172
|
+
...labelProps,
|
|
13173
|
+
ref: labelRef
|
|
13174
|
+
}
|
|
13175
|
+
],
|
|
13176
|
+
[
|
|
13177
|
+
($3985021b0ad6602f$export$37fb8590cf2c088c),
|
|
13178
|
+
{
|
|
13179
|
+
...inputProps,
|
|
13180
|
+
ref: inputOrTextAreaRef
|
|
13181
|
+
}
|
|
13182
|
+
],
|
|
13183
|
+
[
|
|
13184
|
+
($216918bed6669f72$export$2dc6166a7e65358c),
|
|
13185
|
+
{
|
|
13186
|
+
...inputProps,
|
|
13187
|
+
ref: inputOrTextAreaRef
|
|
13188
|
+
}
|
|
13189
|
+
],
|
|
13190
|
+
[
|
|
13191
|
+
($514c0188e459b4c0$export$9afb8bc826b033ea),
|
|
13192
|
+
{
|
|
13193
|
+
slots: {
|
|
13194
|
+
description: descriptionProps,
|
|
13195
|
+
errorMessage: errorMessageProps
|
|
13196
|
+
}
|
|
13197
|
+
}
|
|
13198
|
+
],
|
|
13199
|
+
[
|
|
13200
|
+
($ee014567cb39d3f0$export$ff05c3ac10437e03),
|
|
13201
|
+
validation
|
|
13202
|
+
]
|
|
13203
|
+
]
|
|
13204
|
+
}, renderProps.children));
|
|
13205
|
+
}
|
|
13206
|
+
/**
|
|
13207
|
+
* A text field allows a user to enter a plain text value with a keyboard.
|
|
13208
|
+
*/ const $bcdf0525bf22703d$export$2c73285ae9390cec = /*#__PURE__*/ (forwardRef)($bcdf0525bf22703d$var$TextField);
|
|
13209
|
+
|
|
12920
13210
|
/*
|
|
12921
13211
|
* Copyright 2022 Adobe. All rights reserved.
|
|
12922
13212
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -13033,8 +13323,8 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
|
|
|
13033
13323
|
}, renderProps.children));
|
|
13034
13324
|
}
|
|
13035
13325
|
|
|
13036
|
-
var css_248z$
|
|
13037
|
-
styleInject(css_248z$
|
|
13326
|
+
var css_248z$8 = ".bcds-react-aria-Button {\n border: none;\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: var(--layout-padding-small);\n font: var(--typography-regular-body);\n padding-left: 16px;\n padding-right: 16px;\n}\n.bcds-react-aria-Button[data-disabled] {\n cursor: not-allowed;\n}\n.bcds-react-aria-Button[data-focused] {\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n\n/* Icon button */\n.bcds-react-aria-Button.icon {\n align-items: center;\n justify-content: space-around;\n}\n\n/* Sizes */\n.bcds-react-aria-Button.small {\n min-height: 32px;\n}\n.bcds-react-aria-Button.small.icon {\n padding: unset;\n height: 32px;\n width: 32px;\n min-width: 32px;\n}\n.bcds-react-aria-Button.medium {\n min-height: 40px;\n}\n.bcds-react-aria-Button.medium.icon {\n padding: unset;\n height: 40px;\n width: 40px;\n min-width: 40px;\n}\n\n/* Variant - Primary */\n.bcds-react-aria-Button.primary {\n background: var(--surface-color-primary-button-default);\n color: var(--icons-color-primary-invert);\n}\n.bcds-react-aria-Button.primary.danger {\n background-color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.primary[data-disabled] {\n background-color: var(--surface-color-primary-danger-button-disabled);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.primary[data-hovered] {\n background-color: var(--surface-color-primary-button-hover);\n}\n.bcds-react-aria-Button.primary.danger[data-hovered] {\n background-color: var(--surface-color-primary-danger-button-hover);\n}\n\n/* Variant - Secondary */\n.bcds-react-aria-Button.secondary {\n background-color: var(--surface-color-secondary-button-default);\n border: 1px solid var(--surface-color-border-dark);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.secondary.danger {\n border-color: var(--support-border-color-danger);\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.secondary[data-disabled] {\n background-color: var(--surface-color-secondary-button-disabled);\n border-color: var(--surface-color-border-default);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.secondary[data-hovered] {\n background-color: var(--surface-color-secondary-button-hover);\n}\n.bcds-react-aria-Button.secondary.danger[data-hovered] {\n background-color: var(--support-surface-color-danger);\n}\n\n/* Variant - Tertiary */\n.bcds-react-aria-Button.tertiary {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-primary);\n}\n.bcds-react-aria-Button.tertiary.danger {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.tertiary[data-disabled] {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-disabled);\n}\n.bcds-react-aria-Button.tertiary[data-hovered] {\n background-color: var(--surface-color-tertiary-button-hover);\n}\n.bcds-react-aria-Button.tertiary.danger[data-hovered] {\n background-color: var(--support-surface-color-danger);\n}\n\n/* Variant - Link */\n.bcds-react-aria-Button.link {\n background-color: var(--surface-color-tertiary-button-default);\n color: var(--typography-color-link);\n text-decoration: underline;\n text-underline-offset: 0.3em;\n}\n.bcds-react-aria-Button.link.danger {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Button.link[data-disabled] {\n color: var(--typography-color-disabled);\n}\n";
|
|
13327
|
+
styleInject(css_248z$8);
|
|
13038
13328
|
|
|
13039
13329
|
function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
|
|
13040
13330
|
return (jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `bcds-react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
|
|
@@ -13045,8 +13335,8 @@ function SvgBcLogo({ id = "bcgov-logo" }) {
|
|
|
13045
13335
|
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", style: { fill: "#fff", strokeWidth: "0px" } }), jsxs("g", { children: [jsxs("g", { children: [jsx("rect", { x: "415.4", y: "252.98", width: "314.66", height: "3.82", style: { fill: "#e3a82b", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } }), 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", style: { fill: "#234075", strokeWidth: "0px" } })] }), jsx("rect", { width: "847.65", height: "327.01", style: { fill: "none", strokeWidth: "0px" } })] }), jsxs("g", { children: [jsx("polygon", { points: "295.89 176.17 301.27 178.4 313.19 170.08 295.89 176.17", style: { fill: "#e3a82b", strokeWidth: "0px" } }), 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", style: { fill: "#e3a82b", strokeWidth: "0px" } })] }), 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", style: { fill: "#234075", strokeWidth: "0px" } })] })] }));
|
|
13046
13336
|
}
|
|
13047
13337
|
|
|
13048
|
-
var css_248z$
|
|
13049
|
-
styleInject(css_248z$
|
|
13338
|
+
var css_248z$7 = ".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-background-white);\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-background-white);\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";
|
|
13339
|
+
styleInject(css_248z$7);
|
|
13050
13340
|
|
|
13051
13341
|
function Header({ children, logoLinkElement, logoImage = jsx(SvgBcLogo, { id: "bcgov-logo-header" }), skipLinks, title = "", titleElement = "span", }) {
|
|
13052
13342
|
function getLogo() {
|
|
@@ -13079,8 +13369,8 @@ function Header({ children, logoLinkElement, logoImage = jsx(SvgBcLogo, { id: "b
|
|
|
13079
13369
|
}) })), title && (jsxs(Fragment, { children: [jsx("div", { className: "bcds-header--line" }), getTitle()] })), children] }) }));
|
|
13080
13370
|
}
|
|
13081
13371
|
|
|
13082
|
-
var css_248z$
|
|
13083
|
-
styleInject(css_248z$
|
|
13372
|
+
var css_248z$6 = ".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";
|
|
13373
|
+
styleInject(css_248z$6);
|
|
13084
13374
|
|
|
13085
13375
|
/**
|
|
13086
13376
|
* A titled list of links for use in the Footer. Rendered inside a `<figure>`
|
|
@@ -13130,8 +13420,8 @@ function Footer({ children, acknowledgement, logo, contact, links, copyright, hi
|
|
|
13130
13420
|
return (jsxs("footer", { className: "bcds-footer", children: [!hideAcknowledgement && (jsx("div", { className: "bcds-footer--acknowledgement", children: jsx("div", { className: "bcds-footer--acknowledgement-text", children: acknowledgement ? acknowledgement : defaultAcknowledgement() }) })), jsx("div", { className: "bcds-footer--container", children: jsxs("div", { className: "bcds-footer--container-content", children: [!hideLogoAndLinks && (jsx("div", { className: `bcds-footer--logo-links ${children ? "vertical" : "horizontal"}`, children: children ? (children) : (jsxs(Fragment, { children: [jsxs("div", { className: "bcds-footer--logo", children: [logo ? logo : defaultLogo(), contact ? contact : defaultContact()] }), links ? links : defaultLinks()] })) })), !hideLogoAndLinks && !hideCopyright && jsx("hr", {}), !hideCopyright && (jsx("p", { className: "bcds-footer--copyright", children: copyright ? copyright : defaultCopyright }))] }) })] }));
|
|
13131
13421
|
}
|
|
13132
13422
|
|
|
13133
|
-
var css_248z$
|
|
13134
|
-
styleInject(css_248z$
|
|
13423
|
+
var css_248z$5 = ".bcds-react-aria-Select {\n display: flex;\n flex-direction: column;\n gap: var(--layout-margin-small);\n align-items: flex-start;\n /* Hacks for `stretch`: https://caniuse.com/mdn-css_properties_max-width_stretch */\n max-width: -moz-available;\n max-width: -webkit-fill-available;\n}\n\n/* Label above select input */\n.bcds-react-aria-Select--Label {\n color: var(--typography-color-secondary);\n font: var(--typography-regular-small-body);\n}\n.bcds-react-aria-Select[data-disabled] > .bcds-react-aria-Select--Label {\n color: var(--typography-color-disabled);\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/* Select input equivalent */\n.bcds-react-aria-Select--Button {\n background-color: var(--surface-color-forms-default);\n border: 1px solid var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n cursor: pointer;\n display: flex;\n justify-content: space-between;\n gap: var(--layout-margin-small);\n align-items: center;\n padding: 0 12px;\n max-width: 100%;\n}\n.bcds-react-aria-Select--Button.invalid {\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select[data-invalid] > .bcds-react-aria-Select--Button {\n border-color: var(--support-border-color-danger);\n}\n.bcds-react-aria-Select--Button[data-disabled] {\n background-color: var(--surface-color-forms-disabled);\n cursor: not-allowed;\n}\n.bcds-react-aria-Select--Button[data-hovered] {\n border-color: var(--surface-color-border-dark);\n}\n.bcds-react-aria-Select--Button[data-focused] {\n border-color: var(--surface-color-border-active);\n outline: solid var(--layout-border-width-medium)\n var(--surface-color-border-active);\n outline-offset: var(--layout-margin-hair);\n}\n.bcds-react-aria-Select--Button[data-pressed] {\n border-color: var(--surface-color-border-active);\n}\n.bcds-react-aria-Select--Button.medium {\n height: 40px;\n}\n.bcds-react-aria-Select--Button.small {\n height: 32px;\n}\n.bcds-react-aria-Select--Button > .bcds-react-aria-SelectValue {\n font: var(--typography-regular-body);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: 0;\n}\n.bcds-react-aria-Select--Button > svg {\n flex-shrink: 0;\n}\n\n/* Dropdown menu panel */\n.bcds-react-aria-Select--Popover {\n background-color: var(--surface-color-forms-default);\n border: 1px solid var(--surface-color-border-default);\n border-radius: var(--layout-border-radius-medium);\n box-shadow: var(--surface-shadow-medium);\n box-sizing: border-box;\n overflow-y: auto;\n padding: var(--layout-margin-hair) var(--layout-padding-xsmall);\n width: var(\n --trigger-width\n ); /* Variable provided by Select component https://react-spectrum.adobe.com/react-aria/Select.html#popover-1 */\n}\n.bcds-react-aria-Select--ListBox[data-focused] {\n outline: none;\n}\n.bcds-react-aria-Select--ListBox > .bcds-react-aria-Section:not(:first-child) {\n border-top: 1px solid var(--surface-color-border-default);\n margin-top: 1px;\n padding-top: 2px;\n}\n\n/* Header label within Section of multi-section Select */\n.bcds-react-aria-Select--Header {\n color: var(--typography-color-secondary);\n font: var(--typography-regular-small-body);\n padding: var(--layout-margin-hair) var(--layout-padding-small);\n}\n\n/* ListBox option item */\n.bcds-react-aria-Select--ListBoxItem {\n border-radius: var(--layout-margin-xsmall);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--layout-margin-small);\n padding: 6.5px var(--layout-padding-small);\n}\n.bcds-react-aria-Select--ListBoxItem[data-focused],\n.bcds-react-aria-Select--ListBoxItem[data-hovered] {\n background-color: var(--surface-color-secondary-button-hover);\n outline: none;\n}\n.bcds-react-aria-Select--ListBoxItem-icon {\n display: flex;\n align-items: center;\n justify-content: space-around;\n /* This `min-width` rule can cause horizontal overflow on very narrow Select\n instances, but if we leave it out, the icons will shrink instead. */\n min-width: 20px;\n}\n.bcds-react-aria-Select--ListBoxItem-Text-container {\n color: var(--typography-color-primary);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n}\n.bcds-react-aria-Select--ListBoxItem-Text-label {\n font: var(--typography-regular-body);\n}\n.bcds-react-aria-Select--ListBoxItem.destructive {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem.destructive\n .bcds-react-aria-Select--ListBoxItem-Text-label {\n color: var(--surface-color-primary-danger-button-default);\n}\n.bcds-react-aria-Select--ListBoxItem-Text-description {\n font: var(--typography-regular-small-body);\n color: var(--typography-color-secondary);\n}\n";
|
|
13424
|
+
styleInject(css_248z$5);
|
|
13135
13425
|
|
|
13136
13426
|
function ChevronDown() {
|
|
13137
13427
|
return (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M15.7882 9.15569L10.4858 14.236C10.3192 14.3748 10.1527 14.4303 10.0139 14.4303C9.84731 14.4303 9.68074 14.3748 9.54194 14.2637L4.21182 9.15569C3.9342 8.90584 3.9342 8.46167 4.18405 8.21182C4.4339 7.9342 4.87808 7.9342 5.12793 8.18405L10.0139 12.8479L14.872 8.18405C15.1219 7.9342 15.5661 7.9342 15.8159 8.21182C16.0658 8.46167 16.0658 8.90584 15.7882 9.15569Z", fill: "currentColor" }) }));
|
|
@@ -13139,15 +13429,17 @@ function ChevronDown() {
|
|
|
13139
13429
|
function ChevronUp() {
|
|
13140
13430
|
return (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M4.21231 13.3146L9.52695 8.2226C9.6939 8.08348 9.86086 8 10.0278 8C10.1948 8 10.3339 8.05565 10.473 8.16695L15.7876 13.259C16.066 13.5372 16.066 13.9546 15.8155 14.2051C15.5651 14.4833 15.1477 14.4833 14.8694 14.2329L10.0278 9.61387L5.13054 14.2885C4.88011 14.539 4.43491 14.539 4.18448 14.2607C3.93405 13.9825 3.93405 13.5651 4.21231 13.3146Z", fill: "currentColor" }) }));
|
|
13141
13431
|
}
|
|
13432
|
+
/* Icon displayed when input is in invalid state */
|
|
13433
|
+
const iconError$1 = (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { id: "20px/Error icon", children: jsx("path", { id: "Icon", d: "M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z", fill: "var(--icons-color-danger)" }) }) }));
|
|
13142
13434
|
/** Select displays a collapsible list of options and allows a user to select one of them. */
|
|
13143
|
-
function Select({ items, sections, label, placeholder, size = "medium", ...props }) {
|
|
13144
|
-
return (jsx($82d7e5349645de74$export$ef9b1a59e592288f, { ...props, children: ({ isOpen, isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (
|
|
13435
|
+
function Select({ items, sections, label, placeholder, size = "medium", errorMessage, ...props }) {
|
|
13436
|
+
return (jsx($82d7e5349645de74$export$ef9b1a59e592288f, { ...props, className: "bcds-react-aria-Select", children: ({ isOpen, isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-Select--Label", children: isRequired ? label : `${label} (optional)` })), jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `bcds-react-aria-Select--Button ${size === "medium" ? "medium" : "small"} ${isInvalid && "invalid"}`, children: [jsx($82d7e5349645de74$export$e288731fd71264f0, { className: "bcds-react-aria-SelectValue", children: (value) => {
|
|
13145
13437
|
if (value.selectedText)
|
|
13146
13438
|
return value.selectedText;
|
|
13147
13439
|
if (placeholder)
|
|
13148
13440
|
return placeholder;
|
|
13149
13441
|
return "Select an item";
|
|
13150
|
-
} }), isOpen ? jsx(ChevronUp, {}) : jsx(ChevronDown, {})] }), jsx($07b14b47974efb58$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Select--Popover", offset: 4, children: jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "bcds-react-aria-Select--ListBox",
|
|
13442
|
+
} }), isInvalid && iconError$1, isOpen ? jsx(ChevronUp, {}) : jsx(ChevronDown, {})] }), jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-Select--Error", children: errorMessage }), jsx($07b14b47974efb58$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Select--Popover", offset: 4, children: jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "bcds-react-aria-Select--ListBox",
|
|
13151
13443
|
// This ternary statement is used to mock the data for `sections`
|
|
13152
13444
|
// if a flat list of `items` was passed instead. This allows us to
|
|
13153
13445
|
// use one component to support both flat and sectioned lists of
|
|
@@ -13159,27 +13451,36 @@ function Select({ items, sections, label, placeholder, size = "medium", ...props
|
|
|
13159
13451
|
: [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxs($7135fc7d473fd974$export$6e2c8f0811a474ce, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsx($7135fc7d473fd974$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxs($eed445e0843c11d0$export$a11e76429ed99b4, { id: item?.id ? item.id : item.label, className: `bcds-react-aria-Select--ListBoxItem ${item?.isDestructive ? "destructive" : ""}`, textValue: item.label, children: [item?.iconLeft && (jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconLeft })), jsxs("div", { className: "bcds-react-aria-Select--ListBoxItem-Text-container", children: [jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", className: "bcds-react-aria-Select--ListBoxItem-Text-label", children: item.label }), item.description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-Select--ListBoxItem-Text-description", children: item.description }))] }), item?.iconRight && (jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconRight }))] })) })] })) }) })] })) }));
|
|
13160
13452
|
}
|
|
13161
13453
|
|
|
13162
|
-
var css_248z$
|
|
13163
|
-
styleInject(css_248z$
|
|
13454
|
+
var css_248z$4 = ".bcds-react-aria-Tag {\n color: var(--typography-color-primary);\n cursor: pointer;\n border-radius: var(--layout-margin-hair);\n border: 1px solid;\n display: flex;\n align-items: center;\n gap: 8px;\n font: var(--typography-regular-label);\n padding: 2px 8px;\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/* 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-focused] {\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";
|
|
13455
|
+
styleInject(css_248z$4);
|
|
13164
13456
|
|
|
13165
13457
|
function Tag({ color = "blue", icon, id, textValue }) {
|
|
13166
|
-
return (jsx($eaf9e70818b436db$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxs(
|
|
13458
|
+
return (jsx($eaf9e70818b436db$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxs(Fragment, { children: [icon, textValue, !isDisabled && allowsRemoving && (jsx($d2b4bc8c273e7be6$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" }) }) }) }))] })) }));
|
|
13167
13459
|
}
|
|
13168
13460
|
|
|
13169
|
-
var css_248z$
|
|
13170
|
-
styleInject(css_248z$
|
|
13461
|
+
var css_248z$3 = ".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 margin: var(--layout-margin-small) var(--layout-margin-none);\n}\n\n.bcds-react-aria-TagGroup--Text-error {\n color: var(--typography-color-danger);\n}\n";
|
|
13462
|
+
styleInject(css_248z$3);
|
|
13171
13463
|
|
|
13172
13464
|
function TagGroup({ children, label, description, errorMessage, ...props }) {
|
|
13173
13465
|
return (jsxs($eaf9e70818b436db$export$67ea30858aaf75e3, { className: "bcds-react-aria-TagGroup", ...props, children: [label && (jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TagGroup--Label", children: label })), children, description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-TagGroup--Text-description", children: description })), errorMessage && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "errorMessage", className: "bcds-react-aria-TagGroup--Text-error", children: errorMessage }))] }));
|
|
13174
13466
|
}
|
|
13175
13467
|
|
|
13176
|
-
var css_248z$
|
|
13177
|
-
styleInject(css_248z$
|
|
13468
|
+
var css_248z$2 = ".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";
|
|
13469
|
+
styleInject(css_248z$2);
|
|
13178
13470
|
|
|
13179
13471
|
function TagList({ items, orientation = "horizontal", renderEmptyState, ...props }) {
|
|
13180
13472
|
return (jsx($eaf9e70818b436db$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => createElement(Tag, { ...item, key: item.id }) }));
|
|
13181
13473
|
}
|
|
13182
13474
|
|
|
13475
|
+
var css_248z$1 = ".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-margin-hair) 0px;\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}\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 margin: var(--layout-margin-small) var(--layout-margin-none);\n padding: var(--layout-padding-small) 12px;\n}\n\n/* Sizes */\n.bcds-react-aria-TextField--container.small {\n /* using margin token is kludgy, consider adding component-specific token for input sizing */\n height: var(--layout-margin-xlarge);\n min-height: var(--layout-margin-xlarge);\n}\n\n.bcds-react-aria-TextField--container.medium {\n /* using margin token is kludgy, consider adding component-specific token for input sizing */\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:focus-within {\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 background: var(--surface-color-forms-disabled);\n cursor: not-allowed;\n}\n\n.bcds-react-aria-TextField--Input[data-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: 1px solid 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 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";
|
|
13476
|
+
styleInject(css_248z$1);
|
|
13477
|
+
|
|
13478
|
+
/* Icon displayed when input is in invalid state */
|
|
13479
|
+
const iconError = (jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsx("g", { id: "20px/Error icon", children: jsx("path", { id: "Icon", d: "M17.835 15.0312C18.335 15.9062 17.71 17 16.6787 17H3.33499C2.30374 17 1.67874 15.9062 2.14749 15.0312L8.83499 3.65625C9.11624 3.21875 9.55373 3 10.0225 3C10.46 3 10.8975 3.21875 11.1787 3.65625L17.835 15.0312ZM3.64749 15.5H16.3663L9.99123 4.65625L3.64749 15.5ZM10.0225 12.5625C10.5537 12.5625 10.9912 13 10.9912 13.5312C10.9912 14.0625 10.5537 14.5 10.0225 14.5C9.45998 14.5 9.02249 14.0625 9.02249 13.5312C9.02249 13 9.45998 12.5625 10.0225 12.5625ZM9.27249 7.75C9.27249 7.34375 9.58498 7 10.0225 7C10.4287 7 10.7725 7.34375 10.7725 7.75V10.75C10.7725 11.1875 10.4287 11.5 10.0225 11.5C9.58498 11.5 9.27249 11.1875 9.27249 10.75V7.75Z", fill: "var(--icons-color-danger)" }) }) }));
|
|
13480
|
+
function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }) {
|
|
13481
|
+
return (jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: "bcds-react-aria-TextField", ...props, children: ({ isRequired, isInvalid }) => (jsxs(Fragment, { children: [label && (jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextField--Label", children: [label, isRequired && (jsx("span", { className: "bcds-react-aria-TextField--Label required", children: "(required)" }))] })), jsxs("div", { className: `bcds-react-aria-TextField--container ${size === "small" ? "small" : "medium"}`, children: [iconLeft, jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: "bcds-react-aria-TextField--Input" }), isInvalid && iconError, iconRight] }), description && (jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-TextField--Description`, children: description })), jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-TextField--Error", children: errorMessage })] })) }));
|
|
13482
|
+
}
|
|
13483
|
+
|
|
13183
13484
|
var css_248z = ".bcds-react-aria-Tooltip {\n background-color: var(--theme-gray-110);\n border-radius: var(--layout-border-radius-medium);\n box-shadow: var(--surface-shadow-small);\n color: var(--typography-color-primary-invert);\n font: var(--typography-regular-small-body);\n padding: var(--layout-padding-xsmall) var(--layout-padding-small);\n transform: translate3d(0, 0, 0);\n}\n\n.bcds-react-aria-Tooltip > .bcds-react-aria-OverlayArrow {\n color: var(--theme-gray-110);\n}\n\n.bcds-react-aria-Tooltip[data-placement=\"top\"] > .bcds-react-aria-OverlayArrow,\n.bcds-react-aria-Tooltip[data-placement=\"bottom\"]\n > .bcds-react-aria-OverlayArrow {\n height: 9px;\n width: 19px;\n}\n\n.bcds-react-aria-Tooltip[data-placement=\"right\"]\n > .bcds-react-aria-OverlayArrow,\n.bcds-react-aria-Tooltip[data-placement=\"left\"]\n > .bcds-react-aria-OverlayArrow {\n height: 19px;\n width: 9px;\n}\n\n/* Top placement */\n.bcds-react-aria-Tooltip[data-placement=\"top\"] {\n margin-bottom: 10px; /* Offset is equal to the depth of the OverlayArrow */\n}\n.bcds-react-aria-Tooltip[data-placement=\"top\"] > .bcds-react-aria-OverlayArrow {\n margin-top: -7.5px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"top\"]\n > .bcds-react-aria-OverlayArrow\n > svg {\n transform: rotate(180deg);\n}\n\n/* Right placement */\n.bcds-react-aria-Tooltip[data-placement=\"right\"] {\n margin-left: 10px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"right\"]\n > .bcds-react-aria-OverlayArrow {\n margin-top: -2px;\n margin-right: 4.5px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"right\"]\n > .bcds-react-aria-OverlayArrow\n > svg {\n transform: rotate(-90deg);\n}\n\n/* Bottom placement */\n.bcds-react-aria-Tooltip[data-placement=\"bottom\"] {\n margin-top: 9px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"bottom\"]\n > .bcds-react-aria-OverlayArrow {\n margin-bottom: 6.5px;\n}\n\n/* Left placement */\n.bcds-react-aria-Tooltip[data-placement=\"left\"] {\n margin-right: 10px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"left\"]\n > .bcds-react-aria-OverlayArrow {\n margin-top: -2px;\n margin-left: -5.5px;\n}\n.bcds-react-aria-Tooltip[data-placement=\"left\"]\n > .bcds-react-aria-OverlayArrow\n > svg {\n transform: rotate(90deg);\n}\n";
|
|
13184
13485
|
styleInject(css_248z);
|
|
13185
13486
|
|
|
@@ -13191,5 +13492,5 @@ function Tooltip(props) {
|
|
|
13191
13492
|
return (jsxs($4e3b923658d69c60$export$28c660c63b792dea, { className: "bcds-react-aria-Tooltip", ...props, children: [jsx($44f671af83e7d9e0$export$746d02f47f4d381, { className: "bcds-react-aria-OverlayArrow", children: jsx(SvgTooltipArrowUp, {}) }), jsx(Fragment, { children: props.children })] }));
|
|
13192
13493
|
}
|
|
13193
13494
|
|
|
13194
|
-
export { Button, Footer, FooterLinks, Header, Select, SvgBcLogo, Tag, TagGroup, TagList, Tooltip, $4e3b923658d69c60$export$8c610744efcf8a1d as TooltipTrigger };
|
|
13495
|
+
export { Button, Footer, FooterLinks, Header, Select, SvgBcLogo, Tag, TagGroup, TagList, TextField, Tooltip, $4e3b923658d69c60$export$8c610744efcf8a1d as TooltipTrigger };
|
|
13195
13496
|
//# sourceMappingURL=index.js.map
|