@bcgov/design-system-react-components 0.0.7 → 0.0.8-rc1
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/cjs/index.cjs
CHANGED
|
@@ -31,8 +31,8 @@ function styleInject(css, ref) {
|
|
|
31
31
|
}
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
-
var css_248z$
|
|
35
|
-
styleInject(css_248z$
|
|
34
|
+
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";
|
|
35
|
+
styleInject(css_248z$9);
|
|
36
36
|
|
|
37
37
|
/*
|
|
38
38
|
* Copyright 2020 Adobe. All rights reserved.
|
|
@@ -7563,6 +7563,110 @@ function $168583247155ddda$export$dc9c12ed27dd1b49(props, state, ref) {
|
|
|
7563
7563
|
};
|
|
7564
7564
|
}
|
|
7565
7565
|
|
|
7566
|
+
/*
|
|
7567
|
+
* Copyright 2020 Adobe. All rights reserved.
|
|
7568
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
7569
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
7570
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
7571
|
+
*
|
|
7572
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
7573
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
7574
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
7575
|
+
* governing permissions and limitations under the License.
|
|
7576
|
+
*/
|
|
7577
|
+
|
|
7578
|
+
|
|
7579
|
+
|
|
7580
|
+
|
|
7581
|
+
|
|
7582
|
+
|
|
7583
|
+
function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {
|
|
7584
|
+
let { inputElementType: inputElementType = 'input', isDisabled: isDisabled = false, isRequired: isRequired = false, isReadOnly: isReadOnly = false, type: type = 'text', validationBehavior: validationBehavior = 'aria' } = props;
|
|
7585
|
+
let [value, setValue] = ($458b0a5536c1a7cf$export$40bfa8c7b0832715)(props.value, props.defaultValue || '', props.onChange);
|
|
7586
|
+
let { focusableProps: focusableProps } = ($e6afbd83fe6ebbd2$export$4c014de7c8940b4c)(props, ref);
|
|
7587
|
+
let validationState = ($e5be200c675c3b3a$export$fc1a364ae1f3ff10)({
|
|
7588
|
+
...props,
|
|
7589
|
+
value: value
|
|
7590
|
+
});
|
|
7591
|
+
let { isInvalid: isInvalid, validationErrors: validationErrors, validationDetails: validationDetails } = validationState.displayValidation;
|
|
7592
|
+
let { labelProps: labelProps, fieldProps: fieldProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps } = ($2baaea4c71418dea$export$294aa081a6c6f55d)({
|
|
7593
|
+
...props,
|
|
7594
|
+
isInvalid: isInvalid,
|
|
7595
|
+
errorMessage: props.errorMessage || validationErrors
|
|
7596
|
+
});
|
|
7597
|
+
let domProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props, {
|
|
7598
|
+
labelable: true
|
|
7599
|
+
});
|
|
7600
|
+
const inputOnlyProps = {
|
|
7601
|
+
type: type,
|
|
7602
|
+
pattern: props.pattern
|
|
7603
|
+
};
|
|
7604
|
+
($99facab73266f662$export$5add1d006293d136)(ref, value, setValue);
|
|
7605
|
+
($e93e671b31057976$export$b8473d3665f3a75a)(props, validationState, ref);
|
|
7606
|
+
($dbSRa$react.useEffect)(()=>{
|
|
7607
|
+
// This works around a React/Chrome bug that prevents textarea elements from validating when controlled.
|
|
7608
|
+
// We prevent React from updating defaultValue (i.e. children) of textarea when `value` changes,
|
|
7609
|
+
// which causes Chrome to skip validation. Only updating `value` is ok in our case since our
|
|
7610
|
+
// textareas are always controlled. React is planning on removing this synchronization in a
|
|
7611
|
+
// future major version.
|
|
7612
|
+
// https://github.com/facebook/react/issues/19474
|
|
7613
|
+
// https://github.com/facebook/react/issues/11896
|
|
7614
|
+
if (ref.current instanceof ($431fbd86ca7dc216$export$f21a1ffae260145a)(ref.current).HTMLTextAreaElement) {
|
|
7615
|
+
let input = ref.current;
|
|
7616
|
+
Object.defineProperty(input, 'defaultValue', {
|
|
7617
|
+
get: ()=>input.value,
|
|
7618
|
+
set: ()=>{},
|
|
7619
|
+
configurable: true
|
|
7620
|
+
});
|
|
7621
|
+
}
|
|
7622
|
+
}, [
|
|
7623
|
+
ref
|
|
7624
|
+
]);
|
|
7625
|
+
return {
|
|
7626
|
+
labelProps: labelProps,
|
|
7627
|
+
inputProps: ($3ef42575df84b30b$export$9d1611c77c2fe928)(domProps, inputElementType === 'input' && inputOnlyProps, {
|
|
7628
|
+
disabled: isDisabled,
|
|
7629
|
+
readOnly: isReadOnly,
|
|
7630
|
+
required: isRequired && validationBehavior === 'native',
|
|
7631
|
+
'aria-required': isRequired && validationBehavior === 'aria' || undefined,
|
|
7632
|
+
'aria-invalid': isInvalid || undefined,
|
|
7633
|
+
'aria-errormessage': props['aria-errormessage'],
|
|
7634
|
+
'aria-activedescendant': props['aria-activedescendant'],
|
|
7635
|
+
'aria-autocomplete': props['aria-autocomplete'],
|
|
7636
|
+
'aria-haspopup': props['aria-haspopup'],
|
|
7637
|
+
value: value,
|
|
7638
|
+
onChange: (e)=>setValue(e.target.value),
|
|
7639
|
+
autoComplete: props.autoComplete,
|
|
7640
|
+
autoCapitalize: props.autoCapitalize,
|
|
7641
|
+
maxLength: props.maxLength,
|
|
7642
|
+
minLength: props.minLength,
|
|
7643
|
+
name: props.name,
|
|
7644
|
+
placeholder: props.placeholder,
|
|
7645
|
+
inputMode: props.inputMode,
|
|
7646
|
+
// Clipboard events
|
|
7647
|
+
onCopy: props.onCopy,
|
|
7648
|
+
onCut: props.onCut,
|
|
7649
|
+
onPaste: props.onPaste,
|
|
7650
|
+
// Composition events
|
|
7651
|
+
onCompositionEnd: props.onCompositionEnd,
|
|
7652
|
+
onCompositionStart: props.onCompositionStart,
|
|
7653
|
+
onCompositionUpdate: props.onCompositionUpdate,
|
|
7654
|
+
// Selection events
|
|
7655
|
+
onSelect: props.onSelect,
|
|
7656
|
+
// Input events
|
|
7657
|
+
onBeforeInput: props.onBeforeInput,
|
|
7658
|
+
onInput: props.onInput,
|
|
7659
|
+
...focusableProps,
|
|
7660
|
+
...fieldProps
|
|
7661
|
+
}),
|
|
7662
|
+
descriptionProps: descriptionProps,
|
|
7663
|
+
errorMessageProps: errorMessageProps,
|
|
7664
|
+
isInvalid: isInvalid,
|
|
7665
|
+
validationErrors: validationErrors,
|
|
7666
|
+
validationDetails: validationDetails
|
|
7667
|
+
};
|
|
7668
|
+
}
|
|
7669
|
+
|
|
7566
7670
|
/*
|
|
7567
7671
|
* Copyright 2020 Adobe. All rights reserved.
|
|
7568
7672
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -11439,6 +11543,32 @@ function $8796f90736e175cb$export$4d40659c25ecb50b(props = {}) {
|
|
|
11439
11543
|
|
|
11440
11544
|
|
|
11441
11545
|
const $ee014567cb39d3f0$export$ff05c3ac10437e03 = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
11546
|
+
function $ee014567cb39d3f0$var$FieldError(props, ref) {
|
|
11547
|
+
let validation = ($dbSRa$react.useContext)($ee014567cb39d3f0$export$ff05c3ac10437e03);
|
|
11548
|
+
if (!(validation === null || validation === void 0 ? void 0 : validation.isInvalid)) return null;
|
|
11549
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement($ee014567cb39d3f0$var$FieldErrorInner, {
|
|
11550
|
+
...props,
|
|
11551
|
+
ref: ref
|
|
11552
|
+
});
|
|
11553
|
+
}
|
|
11554
|
+
/**
|
|
11555
|
+
* A FieldError displays validation errors for a form field.
|
|
11556
|
+
*/ const $ee014567cb39d3f0$export$f551688fc98f2e09 = /*#__PURE__*/ ($dbSRa$react.forwardRef)($ee014567cb39d3f0$var$FieldError);
|
|
11557
|
+
const $ee014567cb39d3f0$var$FieldErrorInner = /*#__PURE__*/ ($dbSRa$react.forwardRef)((props, ref)=>{
|
|
11558
|
+
let validation = ($dbSRa$react.useContext)($ee014567cb39d3f0$export$ff05c3ac10437e03);
|
|
11559
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
11560
|
+
...props,
|
|
11561
|
+
defaultClassName: 'react-aria-FieldError',
|
|
11562
|
+
defaultChildren: validation.validationErrors.length === 0 ? undefined : validation.validationErrors.join(' '),
|
|
11563
|
+
values: validation
|
|
11564
|
+
});
|
|
11565
|
+
if (renderProps.children == null) return null;
|
|
11566
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement(($514c0188e459b4c0$export$5f1af8db9871e1d6), {
|
|
11567
|
+
slot: "errorMessage",
|
|
11568
|
+
...renderProps,
|
|
11569
|
+
ref: ref
|
|
11570
|
+
});
|
|
11571
|
+
});
|
|
11442
11572
|
|
|
11443
11573
|
/*
|
|
11444
11574
|
* Copyright 2023 Adobe. All rights reserved.
|
|
@@ -11480,6 +11610,59 @@ function $01b77f81d0f07f68$var$Label(props, ref) {
|
|
|
11480
11610
|
}
|
|
11481
11611
|
const $01b77f81d0f07f68$export$b04be29aa201d4f5 = /*#__PURE__*/ ($64fa3d84918910a7$export$86427a43e3e48ebb)($01b77f81d0f07f68$var$Label);
|
|
11482
11612
|
|
|
11613
|
+
/*
|
|
11614
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
11615
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
11616
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
11617
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
11618
|
+
*
|
|
11619
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
11620
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
11621
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
11622
|
+
* governing permissions and limitations under the License.
|
|
11623
|
+
*/
|
|
11624
|
+
|
|
11625
|
+
|
|
11626
|
+
const $3985021b0ad6602f$export$37fb8590cf2c088c = /*#__PURE__*/ ($dbSRa$react.createContext)({});
|
|
11627
|
+
let $3985021b0ad6602f$var$filterHoverProps = (props)=>{
|
|
11628
|
+
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
11629
|
+
let { onHoverStart: onHoverStart, onHoverChange: onHoverChange, onHoverEnd: onHoverEnd, ...otherProps } = props;
|
|
11630
|
+
return otherProps;
|
|
11631
|
+
};
|
|
11632
|
+
function $3985021b0ad6602f$var$Input(props, ref) {
|
|
11633
|
+
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $3985021b0ad6602f$export$37fb8590cf2c088c);
|
|
11634
|
+
let { hoverProps: hoverProps, isHovered: isHovered } = ($6179b936705e76d3$export$ae780daf29e6d456)(props);
|
|
11635
|
+
let { isFocused: isFocused, isFocusVisible: isFocusVisible, focusProps: focusProps } = ($f7dceffc5ad7768b$export$4e328f61c538687f)({
|
|
11636
|
+
isTextInput: true,
|
|
11637
|
+
autoFocus: props.autoFocus
|
|
11638
|
+
});
|
|
11639
|
+
let isInvalid = !!props['aria-invalid'] && props['aria-invalid'] !== 'false';
|
|
11640
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
11641
|
+
...props,
|
|
11642
|
+
values: {
|
|
11643
|
+
isHovered: isHovered,
|
|
11644
|
+
isFocused: isFocused,
|
|
11645
|
+
isFocusVisible: isFocusVisible,
|
|
11646
|
+
isDisabled: props.disabled || false,
|
|
11647
|
+
isInvalid: isInvalid
|
|
11648
|
+
},
|
|
11649
|
+
defaultClassName: 'react-aria-Input'
|
|
11650
|
+
});
|
|
11651
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement("input", {
|
|
11652
|
+
...($3ef42575df84b30b$export$9d1611c77c2fe928)($3985021b0ad6602f$var$filterHoverProps(props), focusProps, hoverProps),
|
|
11653
|
+
...renderProps,
|
|
11654
|
+
ref: ref,
|
|
11655
|
+
"data-focused": isFocused || undefined,
|
|
11656
|
+
"data-disabled": props.disabled || undefined,
|
|
11657
|
+
"data-hovered": isHovered || undefined,
|
|
11658
|
+
"data-focus-visible": isFocusVisible || undefined,
|
|
11659
|
+
"data-invalid": isInvalid || undefined
|
|
11660
|
+
});
|
|
11661
|
+
}
|
|
11662
|
+
/**
|
|
11663
|
+
* An input allows a user to input text.
|
|
11664
|
+
*/ const $3985021b0ad6602f$export$f5b8910cec6cf069 = /*#__PURE__*/ ($64fa3d84918910a7$export$86427a43e3e48ebb)($3985021b0ad6602f$var$Input);
|
|
11665
|
+
|
|
11483
11666
|
var $e038a7e7a6d81989$exports = {};
|
|
11484
11667
|
$e038a7e7a6d81989$exports = {
|
|
11485
11668
|
"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}`,
|
|
@@ -12919,6 +13102,113 @@ function $eaf9e70818b436db$var$TagItem({ item: item }) {
|
|
|
12919
13102
|
}, renderProps.children)));
|
|
12920
13103
|
}
|
|
12921
13104
|
|
|
13105
|
+
const $216918bed6669f72$export$2dc6166a7e65358c = /*#__PURE__*/ ($dbSRa$react.createContext)({});
|
|
13106
|
+
|
|
13107
|
+
/*
|
|
13108
|
+
* Copyright 2022 Adobe. All rights reserved.
|
|
13109
|
+
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
13110
|
+
* you may not use this file except in compliance with the License. You may obtain a copy
|
|
13111
|
+
* of the License at http://www.apache.org/licenses/LICENSE-2.0
|
|
13112
|
+
*
|
|
13113
|
+
* Unless required by applicable law or agreed to in writing, software distributed under
|
|
13114
|
+
* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
|
|
13115
|
+
* OF ANY KIND, either express or implied. See the License for the specific language
|
|
13116
|
+
* governing permissions and limitations under the License.
|
|
13117
|
+
*/
|
|
13118
|
+
|
|
13119
|
+
|
|
13120
|
+
|
|
13121
|
+
|
|
13122
|
+
|
|
13123
|
+
|
|
13124
|
+
|
|
13125
|
+
|
|
13126
|
+
|
|
13127
|
+
const $bcdf0525bf22703d$export$2129e27b3ef0d483 = /*#__PURE__*/ ($dbSRa$react.createContext)(null);
|
|
13128
|
+
function $bcdf0525bf22703d$var$TextField(props, ref) {
|
|
13129
|
+
[props, ref] = ($64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $bcdf0525bf22703d$export$2129e27b3ef0d483);
|
|
13130
|
+
let { validationBehavior: formValidationBehavior } = ($64fa3d84918910a7$export$fabf2dc03a41866e)(($d3e0e05bdfcf66bd$export$c24727297075ec6a)) || {};
|
|
13131
|
+
var _props_validationBehavior, _ref;
|
|
13132
|
+
let validationBehavior = (_ref = (_props_validationBehavior = props.validationBehavior) !== null && _props_validationBehavior !== void 0 ? _props_validationBehavior : formValidationBehavior) !== null && _ref !== void 0 ? _ref : 'native';
|
|
13133
|
+
let inputRef = ($dbSRa$react.useRef)(null);
|
|
13134
|
+
let [labelRef, label] = ($64fa3d84918910a7$export$9d4c57ee4c6ffdd8)();
|
|
13135
|
+
let [inputElementType, setInputElementType] = ($dbSRa$react.useState)('input');
|
|
13136
|
+
let { labelProps: labelProps, inputProps: inputProps, descriptionProps: descriptionProps, errorMessageProps: errorMessageProps, ...validation } = ($2d73ec29415bd339$export$712718f7aec83d5)({
|
|
13137
|
+
...($64fa3d84918910a7$export$ef03459518577ad4)(props),
|
|
13138
|
+
inputElementType: inputElementType,
|
|
13139
|
+
label: label,
|
|
13140
|
+
validationBehavior: validationBehavior
|
|
13141
|
+
}, inputRef);
|
|
13142
|
+
// Intercept setting the input ref so we can determine what kind of element we have.
|
|
13143
|
+
// useTextField uses this to determine what props to include.
|
|
13144
|
+
let inputOrTextAreaRef = ($dbSRa$react.useCallback)((el)=>{
|
|
13145
|
+
inputRef.current = el;
|
|
13146
|
+
if (el) setInputElementType(el instanceof HTMLTextAreaElement ? 'textarea' : 'input');
|
|
13147
|
+
}, []);
|
|
13148
|
+
let renderProps = ($64fa3d84918910a7$export$4d86445c2cf5e3)({
|
|
13149
|
+
...props,
|
|
13150
|
+
values: {
|
|
13151
|
+
isDisabled: props.isDisabled || false,
|
|
13152
|
+
isInvalid: validation.isInvalid,
|
|
13153
|
+
isReadOnly: props.isReadOnly || false,
|
|
13154
|
+
isRequired: props.isRequired || false
|
|
13155
|
+
},
|
|
13156
|
+
defaultClassName: 'react-aria-TextField'
|
|
13157
|
+
});
|
|
13158
|
+
let DOMProps = ($65484d02dcb7eb3e$export$457c3d6518dd4c6f)(props);
|
|
13159
|
+
delete DOMProps.id;
|
|
13160
|
+
return /*#__PURE__*/ ($dbSRa$react).createElement("div", {
|
|
13161
|
+
...DOMProps,
|
|
13162
|
+
...renderProps,
|
|
13163
|
+
ref: ref,
|
|
13164
|
+
slot: props.slot || undefined,
|
|
13165
|
+
"data-disabled": props.isDisabled || undefined,
|
|
13166
|
+
"data-invalid": validation.isInvalid || undefined,
|
|
13167
|
+
"data-readonly": props.isReadOnly || undefined,
|
|
13168
|
+
"data-required": props.isRequired || undefined
|
|
13169
|
+
}, /*#__PURE__*/ ($dbSRa$react).createElement(($64fa3d84918910a7$export$2881499e37b75b9a), {
|
|
13170
|
+
values: [
|
|
13171
|
+
[
|
|
13172
|
+
($01b77f81d0f07f68$export$75b6ee27786ba447),
|
|
13173
|
+
{
|
|
13174
|
+
...labelProps,
|
|
13175
|
+
ref: labelRef
|
|
13176
|
+
}
|
|
13177
|
+
],
|
|
13178
|
+
[
|
|
13179
|
+
($3985021b0ad6602f$export$37fb8590cf2c088c),
|
|
13180
|
+
{
|
|
13181
|
+
...inputProps,
|
|
13182
|
+
ref: inputOrTextAreaRef
|
|
13183
|
+
}
|
|
13184
|
+
],
|
|
13185
|
+
[
|
|
13186
|
+
($216918bed6669f72$export$2dc6166a7e65358c),
|
|
13187
|
+
{
|
|
13188
|
+
...inputProps,
|
|
13189
|
+
ref: inputOrTextAreaRef
|
|
13190
|
+
}
|
|
13191
|
+
],
|
|
13192
|
+
[
|
|
13193
|
+
($514c0188e459b4c0$export$9afb8bc826b033ea),
|
|
13194
|
+
{
|
|
13195
|
+
slots: {
|
|
13196
|
+
description: descriptionProps,
|
|
13197
|
+
errorMessage: errorMessageProps
|
|
13198
|
+
}
|
|
13199
|
+
}
|
|
13200
|
+
],
|
|
13201
|
+
[
|
|
13202
|
+
($ee014567cb39d3f0$export$ff05c3ac10437e03),
|
|
13203
|
+
validation
|
|
13204
|
+
]
|
|
13205
|
+
]
|
|
13206
|
+
}, renderProps.children));
|
|
13207
|
+
}
|
|
13208
|
+
/**
|
|
13209
|
+
* A text field allows a user to enter a plain text value with a keyboard.
|
|
13210
|
+
*/ const $bcdf0525bf22703d$export$2c73285ae9390cec = /*#__PURE__*/ ($dbSRa$react.forwardRef)($bcdf0525bf22703d$var$TextField);
|
|
13211
|
+
|
|
12922
13212
|
/*
|
|
12923
13213
|
* Copyright 2022 Adobe. All rights reserved.
|
|
12924
13214
|
* This file is licensed to you under the Apache License, Version 2.0 (the "License");
|
|
@@ -13035,8 +13325,8 @@ function $4e3b923658d69c60$var$TooltipInner(props) {
|
|
|
13035
13325
|
}, renderProps.children));
|
|
13036
13326
|
}
|
|
13037
13327
|
|
|
13038
|
-
var css_248z$
|
|
13039
|
-
styleInject(css_248z$
|
|
13328
|
+
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";
|
|
13329
|
+
styleInject(css_248z$8);
|
|
13040
13330
|
|
|
13041
13331
|
function Button({ size = "medium", variant = "primary", danger = false, isIconButton = false, ...props }) {
|
|
13042
13332
|
return (jsxRuntime.jsx($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `bcds-react-aria-Button ${size} ${variant} ${danger ? "danger" : ""} ${isIconButton ? "icon" : ""}`, ...props }));
|
|
@@ -13047,8 +13337,8 @@ function SvgBcLogo({ id = "bcgov-logo" }) {
|
|
|
13047
13337
|
return (jsxRuntime.jsxs("svg", { id: id, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 847.65 327.01", children: [jsxRuntime.jsx("path", { d: "M109.59,226.32c44.7,0,106.54,25.17,151.41,25.17,32.02,0,63.26-8.54,81.04-21.13,1.24-7.39,1.9-14.97,1.9-22.72,0-75.13-60.91-136.04-136.04-136.04s-136.04,60.91-136.04,136.04c0,7.65.64,15.15,1.86,22.46,4.9-.91,21.57-3.79,35.87-3.79Z", style: { fill: "#fff", strokeWidth: "0px" } }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("rect", { x: "415.4", y: "252.98", width: "314.66", height: "3.82", style: { fill: "#e3a82b", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M423.47,116.64c0-6.39-.45-8.08-4.76-8.43l-3-.21c-.49-.39-.35-2.12.1-2.16,5.17-.46,11.69-.69,20.6-.69,6.04,0,11.79.43,16.1,2.42,4.12,1.81,7.28,5.26,7.28,10.79,0,6.22-4.03,9.41-9.77,11.83,0,.86.77,1.12,1.82,1.29,5.17.86,12.84,5.18,12.84,14.42,0,10.01-8.24,16.75-25.49,16.75-2.78,0-7.47-.26-11.5-.26s-7.47.17-11.02.26c-.57-.26-.77-1.64-.19-2.16l1.73-.26c5.08-.78,5.27-1.73,5.27-10.79v-32.8ZM431.32,128.12c0,2.42.1,2.59,4.98,2.42,9.77-.35,15.04-2.94,15.04-11.05s-7-11.65-14.28-11.65c-2.11,0-3.55.17-4.41.52-.96.26-1.34.69-1.34,2.24v17.52ZM431.32,148.14c0,3.11.19,7.51,2.01,9.41,1.82,1.98,4.7,2.42,7.57,2.42,8.53,0,15.04-3.45,15.04-12.08,0-6.82-3.83-14.76-19.07-14.76-5.17,0-5.56.52-5.56,2.24v12.77Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M531.26,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.06-.07,10.15-.22c.49.22.65,1.55.16,1.84l-2.04.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.04.22c.49.29.33,1.62-.16,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.66-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M576.66,151.53c0,7.74.15,8.85,4.6,9.22l2.45.22c.46.29.31,1.62-.15,1.84-4.37-.15-6.98-.22-10.05-.22s-5.75.07-10.66.22c-.46-.22-.62-1.47,0-1.84l2.76-.22c4.37-.37,4.75-1.48,4.75-9.22v-32.96c0-2.28,0-2.36-2.3-2.36h-4.22c-3.3,0-7.51.15-9.43,1.84-1.84,1.62-2.61,3.24-3.45,5.09-.62.44-1.69.07-1.99-.52,1.22-3.32,2.38-8.04,2.91-10.98.23-.15,1.23-.22,1.46,0,.46,2.36,2.99,2.29,6.52,2.29h31.05c4.14,0,4.83-.15,5.98-2.06.38-.15,1.23-.07,1.38.22-.84,3.02-1.38,9-1.15,11.21-.31.59-1.61.59-1.99.15-.23-1.84-.77-4.57-1.92-5.38-1.76-1.25-4.68-1.84-8.89-1.84h-5.44c-2.3,0-2.22.07-2.22,2.51v32.81Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M609.53,125.14c0-7.82-.16-9.07-4.99-9.44l-2.05-.15c-.49-.29-.33-1.62.16-1.84,4.09.15,6.87.22,10.31.22s6.05-.07,10.15-.22c.49.22.66,1.55.17,1.84l-2.05.15c-4.83.37-4.99,1.62-4.99,9.44v26.25c0,7.82.16,8.85,4.99,9.36l2.05.22c.49.29.33,1.62-.17,1.84-4.09-.15-6.87-.22-10.15-.22-3.44,0-6.22.07-10.31.22-.49-.22-.65-1.4-.16-1.84l2.05-.22c4.83-.52,4.99-1.55,4.99-9.36v-26.25Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M646.2,163.57c-7.31,0-11.92-1.92-13.57-2.73-1.04-1.62-2.18-6.86-2.35-10.32.44-.52,1.74-.66,2.09-.22,1.31,3.76,4.87,10.98,14.96,10.98,7.31,0,10.87-4.05,10.87-8.48,0-3.24-.78-6.86-7.13-10.32l-8.26-4.57c-4.35-2.43-9.4-6.64-9.4-12.68,0-7,6.44-12.68,17.75-12.68,2.7,0,5.83.44,8.09.96,1.13.29,2.35.44,3.04.44.78,1.77,1.57,5.9,1.57,9-.35.44-1.74.66-2.18.22-1.13-3.54-3.48-8.33-11.83-8.33s-10.35,4.79-10.35,8.18c0,4.28,4.18,7.38,7.39,9.07l6.96,3.69c5.48,2.88,10.88,7.15,10.88,14.16,0,8.11-7.22,13.64-18.53,13.64Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M689.99,138.78c-3.81,0-3.96.15-3.96,2.36v10.4c0,7.74.4,8.77,4.84,9.22l2.3.22c.48.29.32,1.62-.16,1.84-4.28-.15-6.98-.22-10.08-.22-3.41,0-6.11.15-9.2.22-.47-.22-.63-1.4-.16-1.84l1.35-.22c4.45-.74,4.6-1.48,4.6-9.22v-26.54c0-7.74-.55-8.99-4.68-9.29l-2.06-.15c-.48-.29-.32-1.62.16-1.84,3.89.07,6.58.22,10,.22,3.1,0,5.79-.07,9.2-.22.48.22.63,1.55.16,1.84l-1.51.15c-4.6.44-4.76,1.55-4.76,9.29v8.48c0,2.28.16,2.36,3.96,2.36h22.69c3.81,0,3.97-.07,3.97-2.36v-8.48c0-7.74-.16-8.85-4.84-9.29l-1.51-.15c-.48-.29-.32-1.62.16-1.84,3.65.15,6.35.22,9.6.22s5.79-.07,9.36-.22c.48.22.63,1.55.16,1.84l-1.66.15c-4.6.44-4.76,1.55-4.76,9.29v26.54c0,7.74.16,8.7,4.76,9.22l1.9.22c.47.29.32,1.62-.16,1.84-3.81-.15-6.51-.22-9.6-.22-3.25,0-6.11.07-9.6.22-.48-.22-.63-1.4-.16-1.84l1.51-.22c4.84-.74,4.84-1.48,4.84-9.22v-10.4c0-2.21-.16-2.36-3.97-2.36h-22.69Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M378.06,179.01c6.52-5.07,14.83-7.57,24.12-7.57,4.82,0,11.61.98,15.81,2.14,1.07.27,1.7.45,2.5.36.09,2.05.54,7.65,1.25,13.09-.45.62-1.79.71-2.41.18-1.34-6.05-5.36-13-18.31-13-13.67,0-25.28,8.64-25.28,27.06s11.88,29.02,26.53,29.02c11.52,0,16.62-7.48,18.67-12.73.63-.44,1.97-.27,2.32.36-.62,4.63-2.95,10.5-4.29,12.2-1.07.18-2.14.53-3.13.89-1.97.71-8.4,2.05-14.11,2.05-8.04,0-15.72-1.6-22.24-5.96-7.15-4.9-12.69-12.99-12.69-24.48,0-9.88,4.47-18.34,11.26-23.59Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M426.92,207.81c0-14.75,11.61-26.03,27.56-26.03,17.88,0,26.86,12.31,26.86,25.29,0,14.89-11.92,25.73-26.86,25.73-17.19,0-27.56-11.72-27.56-25ZM473.6,209.35c0-12.17-5.65-25.29-20.44-25.29-8.05,0-18.5,5.24-18.5,21.38,0,10.91,5.57,25.07,20.82,25.07,9.29,0,18.12-6.64,18.12-21.16Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M568.68,201.47c0-4.57-.16-13.05-1.49-15.26-.55-.89-1.95-1.4-3.91-1.55l-1.95-.15c-.47-.52-.31-1.47.15-1.77,2.97.15,5.86.22,8.91.22,3.28,0,5.39-.08,8.21-.22.62.37.55,1.33.16,1.77l-1.88.15c-1.95.15-3.44.81-3.91,1.77-1.09,2.43-1.09,10.91-1.09,15.04v8.33c0,6.42-1.1,13.2-5.47,17.62-3.36,3.47-9.14,5.38-14.93,5.38-5.39,0-10.79-.96-14.62-4.05-4.14-3.24-6.1-8.63-6.1-17.4v-17.4c0-7.67-.16-8.92-4.69-9.29l-1.96-.15c-.47-.29-.31-1.55.15-1.77,3.91.15,6.57.22,9.69.22s5.78-.08,9.61-.22c.47.22.63,1.47.16,1.77l-1.88.15c-4.53.37-4.69,1.62-4.69,9.29v15.93c0,11.87,3.91,19.69,15.87,19.69,11.33,0,15.63-8.41,15.63-19.61v-8.48Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M659.52,192.26c0-5.51-.35-6.93-4.23-7.22l-2.77-.27c-.31-.28-.48-1.78.09-1.82,4.67-.35,10.54-.59,18.57-.59,5.44,0,10.62.37,14.51,2.08,3.71,1.57,6.56,4.54,6.56,9.31,0,5.36-3.63,8.12-8.81,10.2,0,.75.69.97,1.64,1.12,4.67.74,11.58,4.47,11.58,12.44,0,8.64-7.43,14.45-22.98,14.45-2.5,0-6.74-.22-10.37-.22s-6.74.15-9.93.22c-.52-.22-.69-1.41-.17-1.86l1.55-.22c4.58-.67,4.75-1.49,4.75-9.31v-28.3ZM666.6,202.16c0,2.09.09,2.24,4.49,2.09,8.81-.3,13.56-2.53,13.56-9.53s-6.3-10.05-12.87-10.05c-1.9,0-3.2.15-3.97.45-.87.22-1.21.59-1.21,1.94v15.12ZM666.6,219.44c0,2.68.17,6.48,1.81,8.12,1.64,1.71,4.23,2.08,6.82,2.08,7.69,0,13.56-2.98,13.56-10.43,0-5.88-3.45-12.73-17.19-12.73-4.67,0-5.01.44-5.01,1.94v11.02Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M518.75,160.97l-2.05-.18c-.41-.04-.78-.1-1.13-.15-2.99-.53-4.19-3.2-5.6-5.67l-7.08-12.32c-1.22-2.05-2.53-4.82-5.33-5.21,7.25-.87,13.81-5.06,13.81-12.24,0-8.3-8.21-12.01-16.52-12.01-4.98,0-9.52.13-14.59.13-2.79,0-6.12-.13-8.92-.13-1.55,0-1.57.32-1.57,1.18,0,1.28.54.92,2.19,1.02,5.9.33,5.68,1.43,5.68,6.49v32.31c0,4.62.4,6-4.46,6.44,0,0-.74.08-1.17.12l-2.06.21c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.12,3.03-.12,2.69-.08,5.38-.28,8.06-.28s5.29.21,7.95.29h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.07-.2c-.42-.05-1.15-.11-1.15-.11-4.9-.33-4.6-1.71-4.6-6.46v-12.17c0-.71-.09-2.61.44-3.16.44-.48,1.22-.4,1.92-.4,6.64,0,6.55.63,9.7,6.16l8.56,15.4c.7,1.19,1.22,2.69,2.97,2.69h7.44c.94.03,1.92.06,3.01.1.49-.22.65-1.4.16-1.84ZM488.92,136.74c-1.49,0-4.46.55-4.46-1.42v-14.14c0-5.53.18-6.32,6.82-6.32,7.78,0,12.58,3.95,12.58,11.22,0,3.16-1.14,6.08-4.02,8.06-3.32,2.29-6.9,2.61-10.92,2.61Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("path", { d: "M490.53,194.2c0-7.74-.16-8.92-5.27-9.29l-2.03-.15c-.49-.3-.32-1.62.16-1.84,4.54.15,7.3.22,10.54.22s5.92-.07,9.98-.22c.49.22.65,1.55.16,1.84l-1.95.15c-4.78.37-4.95,1.55-4.95,9.29v25.66c0,4.64.24,6.56,1.7,7.96.89.81,2.43,1.7,8.84,1.7,6.89,0,8.6-.3,9.9-.96,1.62-.89,3.73-3.54,5.35-7.3.49-.37,2.03-.07,2.03.44,0,.81-2.27,8.33-3.41,10.32-4.13-.15-11.84-.22-20.2-.22h-7.46c-3.41,0-6,.07-10.54.22-.49-.22-.65-1.4-.16-1.84l2.43-.22c4.7-.44,4.87-1.48,4.87-9.22v-26.54Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M707.79,194.34c0-7.81-.16-9.07-4.86-9.44l-1.99-.15c-.48-.3-.32-1.62.16-1.84,3.98.15,6.69.22,10.03.22s5.89-.07,9.87-.22c.48.22.64,1.55.16,1.84l-1.99.15c-4.7.37-4.86,1.62-4.86,9.44v26.25c0,7.82.16,8.85,4.86,9.36l1.99.22c.48.3.32,1.62-.16,1.84-3.98-.15-6.69-.22-9.87-.22-3.35,0-6.05.07-10.03.22-.48-.22-.64-1.4-.16-1.84l1.99-.22c4.7-.52,4.86-1.55,4.86-9.36v-26.25Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M644.16,229.94c-.41-.04-1.17-.1-1.17-.1-.84-.08-1.59-.2-2.19-.86-1.03-1.1-.95-4.23-.95-5.48v-32.31c0-1.41-.34-4.46.69-5.56.52-.58,1.59-.67,2.55-.73h0c.58-.05.6-.05,1.11-.07l2.05-.15c.49-.3.33-1.62-.16-1.84-1.09.04-2.09.02-3.03.05h0s-8.7,0-8.7,0c-.95,0-1.81,0-2.32,1.02l-17.73,36.92-15.66-35.67c-.52-1.25-.6-2.27-2.24-2.27h-9.05c-.94-.03-1.98-.02-3.08-.06-.49.22-.66,1.55-.16,1.84l2.05.15c.42.03,1.19.09,1.19.09,3.4.22,3.61.98,3.3,4.55l-2.67,34.65c-.23,3.48-.42,5.32-4.07,5.66,0,0-.77.1-1.19.14l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,3-.1,3-.1,1.85-.09,3.73-.25,5.61-.25,2.03,0,4.06.19,6.1.27h0c.94.03,1.94.07,3.03.1.49-.22.66-1.4.16-1.84l-2.04-.22c-.54-.04-1.14-.1-1.14-.1-5.26-.36-5.14-4.07-4.81-8.62l2.5-32.23h.6l16.95,39.66c.17.55.43,1.49,1.29,1.49.78,0,1.03-.86,1.29-1.41l19.1-40.68h.6v35.44c0,1.41.17,4.3-1.29,5.4-.76.57-3.25.91-3.25.91-.34.05-.7.1-1.11.15l-2.04.22c-.49.44-.33,1.62.16,1.84,1.08-.04,2.99-.1,2.99-.1,2.77-.08,5.59-.28,8.41-.28,2.03,0,6,.19,6,.19.95.03,2.02.13,3.12.17.49-.22.66-1.4.16-1.84l-2.05-.22Z", style: { fill: "#234075", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M777.13,230.14l-.28-.22c-.41-.04-.77-.09-1.11-.15-3.19-.71-4.43-4.55-5.61-7.29l-16.41-38.83c-.16-.47-.49-1.47-1.14-1.47-.89,0-1.14,1.08-1.38,1.7l-15.68,38.76c-.57,1.47-2.03,5.03-3.09,6.11-.81.83-1.86.99-2.99,1.1,0,0-.88.08-1.31.13l-1.93.2c-.49.44-.33,1.62.16,1.84,1.09-.04,3.03-.11,3.03-.11,2.14-.03,4.29-.3,6.44-.3,1.81,0,3.61.19,5.41.27,0,0,1.94.07,3.03.11.49-.22.65-1.4.16-1.84l-2.05-.22c-.41-.04-1.11-.11-1.11-.11-1.89-.21-4.24-.55-4.24-2.62,0-1.39.65-3.02,1.14-4.25l2.44-5.8c1.22-2.78.73-3.1,3.98-3.1h11.05c3.9,0,3.33,0,5.04,3.95l2.6,5.88c.41,1.01,1.14,2.71,1.14,3.79,0,1.94-2.12,2.07-4.11,2.24,0,0-.66.06-1.23.1l-1.97.14c-.49.44-.33,1.62.17,1.84,1.09-.04,3.03-.12,3.03-.12,2.31-.08,4.64-.26,6.87-.26,2.85,0,5.69.19,8.54.27h0c.93.03.14.06,1.22.1.49-.22.65-1.4.16-1.84ZM755.64,211.89h-9.57c-.33,0-3,.31-3-.47,0-.24.17-.7.25-.94l5.75-14.23c.17-.39.75-2.35,1.41-2.35.5,0,1.17,2.03,1.33,2.35l5.66,13.29c0,.16.58,1.41.58,1.72,0,.86-1.91.62-2.41.62Z", style: { fill: "#234075", strokeWidth: "0px" } })] }), jsxRuntime.jsx("rect", { width: "847.65", height: "327.01", style: { fill: "none", strokeWidth: "0px" } })] }), jsxRuntime.jsxs("g", { children: [jsxRuntime.jsx("polygon", { points: "295.89 176.17 301.27 178.4 313.19 170.08 295.89 176.17", style: { fill: "#e3a82b", strokeWidth: "0px" } }), jsxRuntime.jsx("path", { d: "M95.46,166.88l-14.14-4.97.71-1.73,15.92,5.31.07-.04,2.1-1.19.84-.53-17.36-7.39.73-1.82,38.75,15.67,1.28-.53-38.44-18.73.86-1.76,40.73,18.96.56-.29-39.49-22.4.81-1.68,57.03,31.03c.47-.86,1.44-2.44,1.95-3.28-21.68-20.39-42.61-35.69-42.61-35.69,0,0,21.52,14.41,48.07,27.81.88-1.09,1.6-1.97,2.53-3.01l-48.65-42.83,1.31-1.34,39.27,33.47-36.38-36.43,1.36-1.41,40.84,39.47-38.02-42.2,1.45-1.31,35.14,37.63-32.07-40.41,1.38-1.26,41.11,50.03c1.06-.92,1.95-1.61,3.06-2.46-12.44-26.91-26.02-48.8-26.02-48.8,0,0,14.46,21.28,33.96,43.56,1.19-.67,2.4-1.31,3.63-1.92l-.21-.13-28.81-57.5,1.71-.75,23.87,45.74-20.08-47.41,1.79-.8,23.08,51.9-19.45-53.37,1.84-.67,18.49,48.05-14.6-49.49,1.75-.65,19.22,61.38-.04.16.05-.02c1.28-.43,2.58-.81,3.89-1.16-1.46-29.48-5.82-54.7-5.82-54.7,0,0,5.4,25,15.08,52.87,1.35-.17,2.71-.31,4.07-.4l-.04-.06h.17l-.1-.14-5.17-64.11,1.87-.06,5,51.35-.86-51.48,1.96-.07,1.96,56.77,1.96-56.77,1.96.07-.86,51.48,5-51.35,1.87.06-5.17,64.11-.1.14h.03v.02s.07,0,.07,0c1.34.08,2.66.22,3.98.38,9.67-27.84,15.06-52.8,15.06-52.8,0,0-4.35,25.14-5.82,54.57,1.32.35,2.63.73,3.91,1.15l19.15-61.16,1.76.65-14.6,49.48,18.49-48.05,1.84.67-19.45,53.37,23.08-51.9,1.79.8-20.08,47.41,23.87-45.74,1.71.75-28.71,57.3.05.02c1.18.58,2.34,1.19,3.49,1.83,19.42-22.21,33.79-43.37,33.79-43.37,0,0-13.49,21.74-25.89,48.52,1.11.84,2.19,1.7,3.24,2.6l40.63-49.49,1.39,1.26-32.08,40.41,35.14-37.63,1.45,1.31-38.02,42.2,40.84-39.47,1.36,1.41-36.38,36.43,39.27-33.47,1.31,1.34-48.06,42.35.03.03c.84.94,1.65,1.9,2.44,2.88,26.39-13.34,47.71-27.62,47.71-27.62,0,0-20.72,15.16-42.29,35.4.59.99,1.55,2.67,2.09,3.69l56.22-30.61.81,1.69-44.88,25.45,46.68-21.72.86,1.76-43.48,21.19.83.29,44.24-17.89.74,1.82-41.12,17.49.77.32,27.4-9.13,4.13-2.88,1.37,1.05,9.02-3.01.71,1.73-7.8,2.75,11.27,8.6,3.61,2.01c-14.49-60.58-68.98-105.62-134-105.62s-121.42,46.63-134.73,108.82c.17-.08.34-.16.51-.24l1.65-.75,1.01-.47,19.01-10.66Z", style: { fill: "#e3a82b", strokeWidth: "0px" } })] }), jsxRuntime.jsx("path", { d: "M72.5,233.02s20.32-4.06,37.29-4.06c44.7,0,106.54,25.17,151.41,25.17,32.91,0,65.02-9.03,82.51-22.19,1.37-7.79,2.08-15.8,2.08-23.98,0-11.08-1.32-21.85-3.79-32.17l-18.7-10.43-21.95,15.39-14.76-5.75c-5,2.53-35.83,23.15-35.83,23.15l-11.84-8.57-12.7-2.51-16.93-12.33-19.42,13.33s-21.67,12.58-22.41,12.58-26.14-20.13-26.14-20.13l-11.7-12.33c-1.99,1.26-9.95,4.91-9.95,4.91l-.41.11-7.7-2.38-9.35-4.96-28.41,12.88c-.17.08-.34.16-.51.24-2,9.34-3.06,19.03-3.06,28.96,0,8.56.79,16.93,2.28,25.06Z", style: { fill: "#234075", strokeWidth: "0px" } })] })] }));
|
|
13048
13338
|
}
|
|
13049
13339
|
|
|
13050
|
-
var css_248z$
|
|
13051
|
-
styleInject(css_248z$
|
|
13340
|
+
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";
|
|
13341
|
+
styleInject(css_248z$7);
|
|
13052
13342
|
|
|
13053
13343
|
function Header({ children, logoLinkElement, logoImage = jsxRuntime.jsx(SvgBcLogo, { id: "bcgov-logo-header" }), skipLinks, title = "", titleElement = "span", }) {
|
|
13054
13344
|
function getLogo() {
|
|
@@ -13081,8 +13371,8 @@ function Header({ children, logoLinkElement, logoImage = jsxRuntime.jsx(SvgBcLog
|
|
|
13081
13371
|
}) })), title && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { className: "bcds-header--line" }), getTitle()] })), children] }) }));
|
|
13082
13372
|
}
|
|
13083
13373
|
|
|
13084
|
-
var css_248z$
|
|
13085
|
-
styleInject(css_248z$
|
|
13374
|
+
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";
|
|
13375
|
+
styleInject(css_248z$6);
|
|
13086
13376
|
|
|
13087
13377
|
/**
|
|
13088
13378
|
* A titled list of links for use in the Footer. Rendered inside a `<figure>`
|
|
@@ -13132,8 +13422,8 @@ function Footer({ children, acknowledgement, logo, contact, links, copyright, hi
|
|
|
13132
13422
|
return (jsxRuntime.jsxs("footer", { className: "bcds-footer", children: [!hideAcknowledgement && (jsxRuntime.jsx("div", { className: "bcds-footer--acknowledgement", children: jsxRuntime.jsx("div", { className: "bcds-footer--acknowledgement-text", children: acknowledgement ? acknowledgement : defaultAcknowledgement() }) })), jsxRuntime.jsx("div", { className: "bcds-footer--container", children: jsxRuntime.jsxs("div", { className: "bcds-footer--container-content", children: [!hideLogoAndLinks && (jsxRuntime.jsx("div", { className: `bcds-footer--logo-links ${children ? "vertical" : "horizontal"}`, children: children ? (children) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { className: "bcds-footer--logo", children: [logo ? logo : defaultLogo(), contact ? contact : defaultContact()] }), links ? links : defaultLinks()] })) })), !hideLogoAndLinks && !hideCopyright && jsxRuntime.jsx("hr", {}), !hideCopyright && (jsxRuntime.jsx("p", { className: "bcds-footer--copyright", children: copyright ? copyright : defaultCopyright }))] }) })] }));
|
|
13133
13423
|
}
|
|
13134
13424
|
|
|
13135
|
-
var css_248z$
|
|
13136
|
-
styleInject(css_248z$
|
|
13425
|
+
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";
|
|
13426
|
+
styleInject(css_248z$5);
|
|
13137
13427
|
|
|
13138
13428
|
function ChevronDown() {
|
|
13139
13429
|
return (jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M15.7882 9.15569L10.4858 14.236C10.3192 14.3748 10.1527 14.4303 10.0139 14.4303C9.84731 14.4303 9.68074 14.3748 9.54194 14.2637L4.21182 9.15569C3.9342 8.90584 3.9342 8.46167 4.18405 8.21182C4.4339 7.9342 4.87808 7.9342 5.12793 8.18405L10.0139 12.8479L14.872 8.18405C15.1219 7.9342 15.5661 7.9342 15.8159 8.21182C16.0658 8.46167 16.0658 8.90584 15.7882 9.15569Z", fill: "currentColor" }) }));
|
|
@@ -13141,15 +13431,17 @@ function ChevronDown() {
|
|
|
13141
13431
|
function ChevronUp() {
|
|
13142
13432
|
return (jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M4.21231 13.3146L9.52695 8.2226C9.6939 8.08348 9.86086 8 10.0278 8C10.1948 8 10.3339 8.05565 10.473 8.16695L15.7876 13.259C16.066 13.5372 16.066 13.9546 15.8155 14.2051C15.5651 14.4833 15.1477 14.4833 14.8694 14.2329L10.0278 9.61387L5.13054 14.2885C4.88011 14.539 4.43491 14.539 4.18448 14.2607C3.93405 13.9825 3.93405 13.5651 4.21231 13.3146Z", fill: "currentColor" }) }));
|
|
13143
13433
|
}
|
|
13434
|
+
/* Icon displayed when input is in invalid state */
|
|
13435
|
+
const iconError$1 = (jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { id: "20px/Error icon", children: jsxRuntime.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)" }) }) }));
|
|
13144
13436
|
/** Select displays a collapsible list of options and allows a user to select one of them. */
|
|
13145
|
-
function Select({ items, sections, label, placeholder, size = "medium", ...props }) {
|
|
13146
|
-
return (jsxRuntime.jsx($82d7e5349645de74$export$ef9b1a59e592288f, { ...props, children: ({ isOpen, isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.
|
|
13437
|
+
function Select({ items, sections, label, placeholder, size = "medium", errorMessage, ...props }) {
|
|
13438
|
+
return (jsxRuntime.jsx($82d7e5349645de74$export$ef9b1a59e592288f, { ...props, className: "bcds-react-aria-Select", children: ({ isOpen, isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-Select--Label", children: isRequired ? label : `${label} (optional)` })), jsxRuntime.jsxs($d2b4bc8c273e7be6$export$353f5b6fc5456de1, { className: `bcds-react-aria-Select--Button ${size === "medium" ? "medium" : "small"} ${isInvalid && "invalid"}`, children: [jsxRuntime.jsx($82d7e5349645de74$export$e288731fd71264f0, { className: "bcds-react-aria-SelectValue", children: (value) => {
|
|
13147
13439
|
if (value.selectedText)
|
|
13148
13440
|
return value.selectedText;
|
|
13149
13441
|
if (placeholder)
|
|
13150
13442
|
return placeholder;
|
|
13151
13443
|
return "Select an item";
|
|
13152
|
-
} }), isOpen ? jsxRuntime.jsx(ChevronUp, {}) : jsxRuntime.jsx(ChevronDown, {})] }), jsxRuntime.jsx($07b14b47974efb58$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Select--Popover", offset: 4, children: jsxRuntime.jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "bcds-react-aria-Select--ListBox",
|
|
13444
|
+
} }), isInvalid && iconError$1, isOpen ? jsxRuntime.jsx(ChevronUp, {}) : jsxRuntime.jsx(ChevronDown, {})] }), jsxRuntime.jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-Select--Error", children: errorMessage }), jsxRuntime.jsx($07b14b47974efb58$export$5b6b19405a83ff9d, { className: "bcds-react-aria-Select--Popover", offset: 4, children: jsxRuntime.jsx($eed445e0843c11d0$export$41f133550aa26f48, { className: "bcds-react-aria-Select--ListBox",
|
|
13153
13445
|
// This ternary statement is used to mock the data for `sections`
|
|
13154
13446
|
// if a flat list of `items` was passed instead. This allows us to
|
|
13155
13447
|
// use one component to support both flat and sectioned lists of
|
|
@@ -13161,27 +13453,36 @@ function Select({ items, sections, label, placeholder, size = "medium", ...props
|
|
|
13161
13453
|
: [{ id: "section", header: "", items: items ? items : [] }], children: (section) => (jsxRuntime.jsxs($7135fc7d473fd974$export$6e2c8f0811a474ce, { id: section.id, className: "bcds-react-aria-Section", children: [section?.header && (jsxRuntime.jsx($72a5793c14baf454$export$8b251419efc915eb, { className: "bcds-react-aria-Select--Header", children: section.header })), jsxRuntime.jsx($7135fc7d473fd974$export$fb8073518f34e6ec, { items: section.items, children: (item) => (jsxRuntime.jsxs($eed445e0843c11d0$export$a11e76429ed99b4, { id: item?.id ? item.id : item.label, className: `bcds-react-aria-Select--ListBoxItem ${item?.isDestructive ? "destructive" : ""}`, textValue: item.label, children: [item?.iconLeft && (jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconLeft })), jsxRuntime.jsxs("div", { className: "bcds-react-aria-Select--ListBoxItem-Text-container", children: [jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "label", className: "bcds-react-aria-Select--ListBoxItem-Text-label", children: item.label }), item.description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-Select--ListBoxItem-Text-description", children: item.description }))] }), item?.iconRight && (jsxRuntime.jsx("div", { className: "bcds-react-aria-Select--ListBoxItem-icon", children: item.iconRight }))] })) })] })) }) })] })) }));
|
|
13162
13454
|
}
|
|
13163
13455
|
|
|
13164
|
-
var css_248z$
|
|
13165
|
-
styleInject(css_248z$
|
|
13456
|
+
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";
|
|
13457
|
+
styleInject(css_248z$4);
|
|
13166
13458
|
|
|
13167
13459
|
function Tag({ color = "blue", icon, id, textValue }) {
|
|
13168
|
-
return (jsxRuntime.jsx($eaf9e70818b436db$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxRuntime.jsxs(
|
|
13460
|
+
return (jsxRuntime.jsx($eaf9e70818b436db$export$3288d34c523a1192, { className: `bcds-react-aria-Tag ${color}`, id: id, textValue: textValue, children: ({ allowsRemoving, isDisabled }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [icon, textValue, !isDisabled && allowsRemoving && (jsxRuntime.jsx($d2b4bc8c273e7be6$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" }) }) }) }))] })) }));
|
|
13169
13461
|
}
|
|
13170
13462
|
|
|
13171
|
-
var css_248z$
|
|
13172
|
-
styleInject(css_248z$
|
|
13463
|
+
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";
|
|
13464
|
+
styleInject(css_248z$3);
|
|
13173
13465
|
|
|
13174
13466
|
function TagGroup({ children, label, description, errorMessage, ...props }) {
|
|
13175
13467
|
return (jsxRuntime.jsxs($eaf9e70818b436db$export$67ea30858aaf75e3, { className: "bcds-react-aria-TagGroup", ...props, children: [label && (jsxRuntime.jsx($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TagGroup--Label", children: label })), children, description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: "bcds-react-aria-TagGroup--Text-description", children: description })), errorMessage && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "errorMessage", className: "bcds-react-aria-TagGroup--Text-error", children: errorMessage }))] }));
|
|
13176
13468
|
}
|
|
13177
13469
|
|
|
13178
|
-
var css_248z$
|
|
13179
|
-
styleInject(css_248z$
|
|
13470
|
+
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";
|
|
13471
|
+
styleInject(css_248z$2);
|
|
13180
13472
|
|
|
13181
13473
|
function TagList({ items, orientation = "horizontal", renderEmptyState, ...props }) {
|
|
13182
13474
|
return (jsxRuntime.jsx($eaf9e70818b436db$export$f9fef0f55402315b, { className: `bcds-react-aria-TagList ${orientation}`, ...props, renderEmptyState: renderEmptyState, items: items, children: (item) => $dbSRa$react.createElement(Tag, { ...item, key: item.id }) }));
|
|
13183
13475
|
}
|
|
13184
13476
|
|
|
13477
|
+
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";
|
|
13478
|
+
styleInject(css_248z$1);
|
|
13479
|
+
|
|
13480
|
+
/* Icon displayed when input is in invalid state */
|
|
13481
|
+
const iconError = (jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("g", { id: "20px/Error icon", children: jsxRuntime.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)" }) }) }));
|
|
13482
|
+
function TextField({ size, label, description, errorMessage, iconLeft, iconRight, ...props }) {
|
|
13483
|
+
return (jsxRuntime.jsx($bcdf0525bf22703d$export$2c73285ae9390cec, { className: "bcds-react-aria-TextField", ...props, children: ({ isRequired, isInvalid }) => (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [label && (jsxRuntime.jsxs($01b77f81d0f07f68$export$b04be29aa201d4f5, { className: "bcds-react-aria-TextField--Label", children: [label, isRequired && (jsxRuntime.jsx("span", { className: "bcds-react-aria-TextField--Label required", children: "(required)" }))] })), jsxRuntime.jsxs("div", { className: `bcds-react-aria-TextField--container ${size === "small" ? "small" : "medium"}`, children: [iconLeft, jsxRuntime.jsx($3985021b0ad6602f$export$f5b8910cec6cf069, { className: "bcds-react-aria-TextField--Input" }), isInvalid && iconError, iconRight] }), description && (jsxRuntime.jsx($514c0188e459b4c0$export$5f1af8db9871e1d6, { slot: "description", className: `bcds-react-aria-TextField--Description`, children: description })), jsxRuntime.jsx($ee014567cb39d3f0$export$f551688fc98f2e09, { className: "bcds-react-aria-TextField--Error", children: errorMessage })] })) }));
|
|
13484
|
+
}
|
|
13485
|
+
|
|
13185
13486
|
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";
|
|
13186
13487
|
styleInject(css_248z);
|
|
13187
13488
|
|
|
@@ -13202,6 +13503,7 @@ exports.SvgBcLogo = SvgBcLogo;
|
|
|
13202
13503
|
exports.Tag = Tag;
|
|
13203
13504
|
exports.TagGroup = TagGroup;
|
|
13204
13505
|
exports.TagList = TagList;
|
|
13506
|
+
exports.TextField = TextField;
|
|
13205
13507
|
exports.Tooltip = Tooltip;
|
|
13206
13508
|
exports.TooltipTrigger = $4e3b923658d69c60$export$8c610744efcf8a1d;
|
|
13207
13509
|
//# sourceMappingURL=index.cjs.map
|