@linzjs/lui 11.2.0 → 11.3.1
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/CHANGELOG.md +28 -0
- package/dist/components/LuiFormElements/{RadioInput → LuiRadioInput}/LuiRadioInput.d.ts +6 -5
- package/dist/components/LuiFormElements/{RadioInput → LuiRadioInput}/LuiRadioInput.stories.d.ts +1 -1
- package/dist/components/LuiFormElements/{RadioInput → LuiRadioInput}/LuiRadioInputWithFormik.stories.d.ts +1 -1
- package/dist/components/LuiFormElements/LuiTextInput/LuiTextInput.d.ts +4 -0
- package/dist/components/LuiFormElements/LuiTextInput/LuiTextInput.stories.d.ts +4 -0
- package/dist/index.d.ts +1 -1
- package/dist/lui.cjs.development.js +34 -31
- package/dist/lui.cjs.development.js.map +1 -1
- package/dist/lui.cjs.production.min.js +1 -1
- package/dist/lui.cjs.production.min.js.map +1 -1
- package/dist/lui.css +3 -2
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +34 -31
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/LuiFormSection/LuiFormSectionHeader.scss +2 -1
- package/dist/scss/Foundation/Variables/FormVars.scss +18 -3
- package/dist/scss/Foundation/Variables/_LuiColors.scss +2 -1
- package/dist/scss/base.scss +3 -2
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,31 @@
|
|
|
1
|
+
## [11.3.1](https://github.com/linz/lui/compare/v11.3.0...v11.3.1) (2021-12-21)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Bug Fixes
|
|
5
|
+
|
|
6
|
+
* Adds Styles for LuiRadioInput ([#500](https://github.com/linz/lui/issues/500)) ([038434e](https://github.com/linz/lui/commit/038434e19e449ae8946d6dc389bd5037b9be0f1f))
|
|
7
|
+
|
|
8
|
+
# [11.3.0](https://github.com/linz/lui/compare/v11.2.2...v11.3.0) (2021-12-20)
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
### Features
|
|
12
|
+
|
|
13
|
+
* **LuiTextInput:** Added mandatory star ([#502](https://github.com/linz/lui/issues/502)) ([e6f6bde](https://github.com/linz/lui/commit/e6f6bde0a5dbff3de1f32a7f32820910a21eaed9))
|
|
14
|
+
|
|
15
|
+
## [11.2.2](https://github.com/linz/lui/compare/v11.2.1...v11.2.2) (2021-12-20)
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
### Bug Fixes
|
|
19
|
+
|
|
20
|
+
* Fixed styling when breakpoint was hit ([#501](https://github.com/linz/lui/issues/501)) ([55c4731](https://github.com/linz/lui/commit/55c47311586fd01e3304125cc7e562cc6d11b8c3))
|
|
21
|
+
|
|
22
|
+
## [11.2.1](https://github.com/linz/lui/compare/v11.2.0...v11.2.1) (2021-12-19)
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
### Bug Fixes
|
|
26
|
+
|
|
27
|
+
* Aligning TextInput, TextArea and SelectInput component labels and placeholder text ([#497](https://github.com/linz/lui/issues/497)) ([c7715d5](https://github.com/linz/lui/commit/c7715d59463a5f1ff4dfbaf6225a53cb31af2246))
|
|
28
|
+
|
|
1
29
|
# [11.2.0](https://github.com/linz/lui/compare/v11.1.8...v11.2.0) (2021-12-19)
|
|
2
30
|
|
|
3
31
|
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
import { ChangeEventHandler, InputHTMLAttributes } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
onChange
|
|
2
|
+
import './LuiRadioInput.scss';
|
|
3
|
+
export interface LuiRadioProps {
|
|
4
|
+
onChange: ChangeEventHandler<HTMLInputElement>;
|
|
5
|
+
selectedValue: string;
|
|
5
6
|
options: string[];
|
|
7
|
+
legend?: JSX.Element | string;
|
|
6
8
|
error?: string;
|
|
7
|
-
selectedValue: string;
|
|
8
9
|
isOptionDisabled?: (index: number) => boolean;
|
|
9
10
|
inputProps?: InputHTMLAttributes<HTMLInputElement>;
|
|
10
11
|
renderLabelFor?: (value: string) => JSX.Element;
|
|
11
12
|
}
|
|
12
|
-
export declare const LuiRadioInput: (props:
|
|
13
|
+
export declare const LuiRadioInput: (props: LuiRadioProps) => JSX.Element;
|
package/dist/components/LuiFormElements/{RadioInput → LuiRadioInput}/LuiRadioInput.stories.d.ts
RENAMED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { BADGE } from '@geometricpanda/storybook-addon-badges';
|
|
3
3
|
declare const _default: {
|
|
4
4
|
title: string;
|
|
5
|
-
component: (props: import("./LuiRadioInput").
|
|
5
|
+
component: (props: import("./LuiRadioInput").LuiRadioProps) => JSX.Element;
|
|
6
6
|
parameters: {
|
|
7
7
|
badges: BADGE[];
|
|
8
8
|
};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
declare const _default: {
|
|
3
3
|
title: string;
|
|
4
|
-
component: (props: import("./LuiRadioInput").
|
|
4
|
+
component: (props: import("./LuiRadioInput").LuiRadioProps) => JSX.Element;
|
|
5
5
|
};
|
|
6
6
|
export default _default;
|
|
7
7
|
export declare const LuiRadioButtonInputWithFormikHooks: {
|
|
@@ -6,6 +6,10 @@ export interface LuiTextInputProps {
|
|
|
6
6
|
error?: string;
|
|
7
7
|
hideLabel?: boolean;
|
|
8
8
|
label: JSX.Element | string;
|
|
9
|
+
/**
|
|
10
|
+
* A red star will be shown next to the label, no validation will be performed based on this prop.
|
|
11
|
+
*/
|
|
12
|
+
mandatory?: boolean;
|
|
9
13
|
value: string;
|
|
10
14
|
}
|
|
11
15
|
export declare function useGenerateOrDefaultId(idFromProps?: string): string;
|
package/dist/index.d.ts
CHANGED
|
@@ -18,7 +18,7 @@ export { LuiFileInputBox } from './components/LuiFormElements/LuiFileInputBox/Lu
|
|
|
18
18
|
export { LuiSelectInput } from './components/LuiFormElements/LuiSelectInput/LuiSelectInput';
|
|
19
19
|
export { LuiTextAreaInput } from './components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput';
|
|
20
20
|
export { LuiTextInput } from './components/LuiFormElements/LuiTextInput/LuiTextInput';
|
|
21
|
-
export { LuiRadioInput } from './components/LuiFormElements/
|
|
21
|
+
export { LuiRadioInput } from './components/LuiFormElements/LuiRadioInput/LuiRadioInput';
|
|
22
22
|
export { LuiFormikCheckbox } from './components/LuiFormikForms/LuiFormikCheckbox/LuiFormikCheckbox';
|
|
23
23
|
export { LuiFormikTextInput } from './components/LuiFormikForms/LuiFormikTextInput/LuiFormikTextInput';
|
|
24
24
|
export { LuiFormikFormLabel } from './components/LuiFormikForms/LuiFormikFormLabel/LuiFormikFormLabel';
|
|
@@ -621,7 +621,7 @@ function LuiFormikForm(props) {
|
|
|
621
621
|
|
|
622
622
|
var e=[],t=[];function n(n,r){if(n&&"undefined"!=typeof document){var a,s=!0===r.prepend?"prepend":"append",d=!0===r.singleTag,i="string"==typeof r.container?document.querySelector(r.container):document.getElementsByTagName("head")[0];if(d){var u=e.indexOf(i);-1===u&&(u=e.push(i)-1,t[u]={}),a=t[u]&&t[u][s]?t[u][s]:t[u][s]=c();}else a=c();65279===n.charCodeAt(0)&&(n=n.substring(1)),a.styleSheet?a.styleSheet.cssText+=n:a.appendChild(document.createTextNode(n));}function c(){var e=document.createElement("style");if(e.setAttribute("type","text/css"),r.attributes)for(var t=Object.keys(r.attributes),n=0;n<t.length;n++)e.setAttribute(t[n],r.attributes[t[n]]);var a="prepend"===s?"afterbegin":"beforeend";return i.insertAdjacentElement(a,e),e}}
|
|
623
623
|
|
|
624
|
-
var css = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n:root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n.
|
|
624
|
+
var css = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n:root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n.LuiCheckboxInput_LuiCheckboxInput__6b87fd8c {\n margin-bottom: 24px;\n box-sizing: border-box;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputGroup__6b87fd8c {\n display: block;\n user-select: none;\n cursor: pointer;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputLabel__6b87fd8c {\n position: relative;\n display: flex;\n flex-direction: row;\n align-items: flex-start;\n padding: 2px;\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n margin-bottom: 0;\n}\n.LuiCheckboxInput_isDisabled__6b87fd8c .LuiCheckboxInput_LuiCheckboxInputLabel__6b87fd8c {\n cursor: not-allowed;\n color: #989189;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputInput__6b87fd8c {\n width: 0.1px;\n height: 0.1px;\n opacity: 0;\n overflow: hidden;\n position: absolute;\n z-index: -1;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputLabel__6b87fd8c::before {\n font-size: 18px;\n line-height: 10px;\n content: \" \";\n display: block;\n text-align: center;\n color: transparent;\n width: 23px;\n height: 23px;\n border: 2px solid #007198;\n margin-right: 0.5rem;\n border-radius: 5px;\n transition: all 0.2s ease-in-out;\n}\n.LuiCheckboxInput_hasError__6b87fd8c .LuiCheckboxInput_LuiCheckboxInputLabel__6b87fd8c::before {\n border-color: #eb5757;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputError__6b87fd8c {\n margin-top: 2px;\n text-align: left;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputErrorIcon__6b87fd8c {\n margin-left: 2rem;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputInput__6b87fd8c:checked + .LuiCheckboxInput_LuiCheckboxInputLabel__6b87fd8c::before,\n.LuiCheckboxInput_LuiCheckboxInput_IsChecked__6b87fd8c .LuiCheckboxInput_LuiCheckboxInputLabel__6b87fd8c::before {\n color: white;\n background: #007198 url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNCAxMSI+CiAgICA8cGF0aCBmaWxsPSIjRkZGIiBkPSJNLjI5NyA0LjkzNGExLjAxMyAxLjAxMyAwIDAgMSAxLjM0NC0uMDc4bC4wODguMDc4TDUuMjU0IDguNDYgMTIuMjE5LjM1M2ExLjAxMyAxLjAxMyAwIDAgMSAxLjMzNC0uMThsLjA5NC4wNzJjLjM5NC4zMzguNDY0LjkxNC4xOCAxLjMzNGwtLjA3Mi4wOTQtNy42NzYgOC45MzVhMS4wMTMgMS4wMTMgMCAwIDEtMS4zOTguMTM0bC0uMDg3LS4wNzhMLjI5NyA2LjM2N2ExLjAxMyAxLjAxMyAwIDAgMSAwLTEuNDMzWiIvPgo8L3N2Zz4=\") no-repeat 50% 50%;\n background-size: 15px;\n}\n\n.LuiCheckboxInput_LuiCheckboxInput_HasError__6b87fd8c .LuiCheckboxInput_LuiCheckboxInputLabel__6b87fd8c::before {\n border-color: #cc0000;\n}\n\n.LuiCheckboxInput_LuiCheckboxInput_HasError__6b87fd8c.LuiCheckboxInput_LuiCheckboxInput_IsChecked__6b87fd8c .LuiCheckboxInput_LuiCheckboxInputLabel__6b87fd8c::before {\n background-color: #cc0000;\n border-color: #cc0000;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputInput__6b87fd8c:disabled + .LuiCheckboxInput_LuiCheckboxInputLabel__6b87fd8c::before,\n.LuiCheckboxInput_LuiCheckboxInput_IsDisabled__6b87fd8c .LuiCheckboxInput_LuiCheckboxInputLabel__6b87fd8c::before {\n background-color: #989189;\n border-color: #989189;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputInput__6b87fd8c:checked:disabled + .LuiCheckboxInput_LuiCheckboxInputLabel__6b87fd8c::before,\n.LuiCheckboxInput_LuiCheckboxInput_IsChecked__6b87fd8c.LuiCheckboxInput_LuiCheckboxInput_IsDisabled__6b87fd8c .LuiCheckboxInput_LuiCheckboxInputLabel__6b87fd8c::before {\n color: white;\n background-color: #989189;\n border-color: #989189;\n}\n\n.LuiCheckboxInput_LuiCheckboxInput_Inline__6b87fd8c {\n display: inline-block;\n}\n.LuiCheckboxInput_LuiCheckboxInput_Inline__6b87fd8c:not(:last-child) {\n margin-bottom: 0;\n margin-right: 24px;\n}";
|
|
625
625
|
n(css,{});
|
|
626
626
|
|
|
627
627
|
// NOTE: This is a generated file, nothing you do here matters
|
|
@@ -950,7 +950,7 @@ var LuiIcon = function LuiIcon(_ref) {
|
|
|
950
950
|
}, spanProps), iconSVG);
|
|
951
951
|
};
|
|
952
952
|
|
|
953
|
-
var css$1 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n:root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n.
|
|
953
|
+
var css$1 = "/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n:root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n.LuiError_LuiError__b4d4eed5 {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n}\n.LuiError_LuiErrorErrorIcon__b4d4eed5 {\n vertical-align: middle;\n display: inline-block;\n}\n.LuiError_LuiErrorErrorText__b4d4eed5 {\n margin-left: 0.5rem;\n}";
|
|
954
954
|
n(css$1,{});
|
|
955
955
|
|
|
956
956
|
var LuiError = function LuiError(_ref) {
|
|
@@ -969,7 +969,7 @@ var LuiError = function LuiError(_ref) {
|
|
|
969
969
|
}, error));
|
|
970
970
|
};
|
|
971
971
|
|
|
972
|
-
var css$2 = ":root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.
|
|
972
|
+
var css$2 = ":root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiTextInput_LuiTextInput__7a248431 {\n margin-bottom: 24px;\n}\n.LuiTextInput_LuiTextInputLabel__7a248431 {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n}\n\n.LuiTextInput_LuiTextInputInputWrapper__7a248431 {\n position: relative;\n display: block;\n box-shadow: -1px 0 0 0 transparent;\n border-radius: 4px;\n transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n}\n.LuiTextInput_hasError__7a248431 .LuiTextInput_LuiTextInputInputWrapper__7a248431 {\n box-shadow: -8px 0px 0 0 #cc0000;\n border-radius: 4px;\n}\n\n.LuiTextInput_LuiTextInputPasswordReveal__7a248431 {\n position: absolute;\n background: transparent;\n min-height: 0;\n min-width: 0;\n margin: 0;\n padding: 12px;\n top: 50%;\n right: 0;\n transform: translateY(-50%);\n}\n.LuiTextInput_LuiTextInputPasswordReveal__7a248431:hover {\n background: transparent;\n}\n\n.LuiTextInput_LuiTextInputInput__7a248431 {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n margin-bottom: 0;\n border: 1px solid #b2b2b2;\n border-radius: 4px;\n height: 48px;\n color: #000000;\n caret-color: #000000;\n padding-top: 14px;\n padding-right: 32px;\n padding-bottom: 14px;\n padding-left: 16px;\n min-width: 300px;\n transition: all 0.15 ease-in-out;\n transition: border 0.2s ease;\n}\n.LuiTextInput_LuiTextInputInput__7a248431::placeholder {\n font-weight: normal;\n color: #6b6966;\n opacity: 1;\n}\n.LuiTextInput_isDisabled__7a248431 .LuiTextInput_LuiTextInputInput__7a248431::placeholder {\n color: #989189;\n}\n.LuiTextInput_LuiTextInputInput__7a248431:hover, .LuiTextInput_LuiTextInputInput__7a248431:active {\n border-color: #053d52;\n}\n.LuiTextInput_LuiTextInputInput__7a248431:focus {\n outline: none;\n border-color: #053d52;\n}\n.LuiTextInput_hasError__7a248431 .LuiTextInput_LuiTextInputInput__7a248431 {\n border-color: #cc0000 !important;\n}\n.LuiTextInput_isDisabled__7a248431 .LuiTextInput_LuiTextInputInput__7a248431 {\n border-color: #beb9b4;\n background-color: #eaeaea;\n cursor: not-allowed;\n}\n\n.LuiTextInput_LuiTextInputError__7a248431 {\n position: relative;\n display: flex;\n color: #cc0000;\n text-align: left;\n padding-left: 22px;\n font-size: 14px;\n line-height: 20px;\n margin-top: 2px;\n}\n\n.LuiTextInput_LuiTextInputErrorIcon__7a248431 {\n position: absolute;\n left: 0;\n top: 2px;\n}\n\n.LuiTextInput_LuiTextInputMandatory__7a248431 {\n display: inline-block;\n width: 10px;\n margin: 0 0 0 -10px;\n color: #cc0000;\n}\n\n.LuiTextInput_LuiFieldWrapper__7a248431 {\n position: relative;\n box-shadow: -1px 0 0 0 transparent;\n border-radius: 4px;\n transition: box-shadow 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s, border-color 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s;\n}\n.LuiTextInput_LuiFieldWrapper__7a248431 input {\n transition: border 0.2s ease;\n}\n.LuiTextInput_LuiFieldWrapper__7a248431.LuiTextInput_LuiFieldWrapper_Error__7a248431 {\n box-shadow: -12px 0px 0 0 #cc0000;\n border-radius: 4px;\n}\n.LuiTextInput_LuiFieldWrapper__7a248431.LuiTextInput_LuiFieldWrapper_Error__7a248431 input {\n border-color: #cc0000;\n}";
|
|
973
973
|
n(css$2,{});
|
|
974
974
|
|
|
975
975
|
function useGenerateOrDefaultId(idFromProps) {
|
|
@@ -987,7 +987,9 @@ var LuiTextInput = function LuiTextInput(props) {
|
|
|
987
987
|
}, React__default.createElement("label", {
|
|
988
988
|
className: 'LuiTextInput-label',
|
|
989
989
|
htmlFor: id
|
|
990
|
-
}, React__default.createElement("span", {
|
|
990
|
+
}, props.mandatory && React__default.createElement("span", {
|
|
991
|
+
className: "LuiTextInput-mandatory"
|
|
992
|
+
}, "*"), React__default.createElement("span", {
|
|
991
993
|
className: clsx(props.hideLabel ? 'LuiScreenReadersOnly' : '')
|
|
992
994
|
}, props.label), React__default.createElement("span", {
|
|
993
995
|
className: "LuiTextInput-inputWrapper"
|
|
@@ -1169,7 +1171,7 @@ var extensionsAsHumanReadableList = function extensionsAsHumanReadableList(exten
|
|
|
1169
1171
|
return uppercaseExtensions.slice(0, -1).join(', ') + " or " + uppercaseExtensions[extensions.length - 1];
|
|
1170
1172
|
};
|
|
1171
1173
|
|
|
1172
|
-
var css$3 = ":root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.
|
|
1174
|
+
var css$3 = ":root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiSelectInput_LuiSelect__c0e7e1aa {\n margin-bottom: 24px;\n}\n\n.LuiSelectInput_LuiSelectLabelText__c0e7e1aa {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n}\n\n.LuiSelectInput_LuiSelectSelect__c0e7e1aa {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n margin-bottom: 0;\n border: 1px solid #b2b2b2;\n border-radius: 4px;\n display: block;\n height: 48px;\n color: #000000;\n caret-color: #000000;\n padding-right: 32px;\n padding-left: 16px;\n width: 100%;\n transition: all 0.15 ease-in-out;\n appearance: none;\n}\n.LuiSelectInput_LuiSelectSelect__c0e7e1aa:hover, .LuiSelectInput_LuiSelectSelect__c0e7e1aa:active {\n border-color: #053d52;\n cursor: pointer;\n}\n.LuiSelectInput_LuiSelectSelect__c0e7e1aa:focus {\n outline: none;\n border-color: #053d52;\n}\n.LuiSelectInput_hasError__c0e7e1aa .LuiSelectInput_LuiSelectSelect__c0e7e1aa {\n border-color: #eb5757;\n}\n.LuiSelectInput_isDisabled__c0e7e1aa .LuiSelectInput_LuiSelectSelect__c0e7e1aa {\n border-color: #b2b2b2;\n background-color: #fff;\n color: #b2b2b2;\n opacity: 0.3;\n cursor: not-allowed;\n}\n.LuiSelectInput_hasPlaceholder__c0e7e1aa .LuiSelectInput_LuiSelectSelect__c0e7e1aa {\n color: #b2b2b2;\n}\n.LuiSelectInput_hasValue__c0e7e1aa .LuiSelectInput_LuiSelectSelect__c0e7e1aa {\n color: #2a292c;\n}\n\n.LuiSelectInput_LuiSelectWrapper__c0e7e1aa {\n position: relative;\n max-width: 300px;\n}\n\n.LuiSelectInput_LuiSelectChevronIcon__c0e7e1aa {\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translateY(-50%);\n pointer-events: none;\n}\n\n.LuiSelectInput_LuiSelectError__c0e7e1aa {\n position: relative;\n display: flex;\n color: #eb5757;\n text-align: left;\n padding-left: 22px;\n font-size: 14px;\n line-height: 20px;\n margin-top: 2px;\n}\n\n.LuiSelectInput_LuiSelectErrorIcon__c0e7e1aa {\n position: absolute;\n left: 0;\n top: 2px;\n}";
|
|
1173
1175
|
n(css$3,{});
|
|
1174
1176
|
|
|
1175
1177
|
var LuiSelectInput = function LuiSelectInput(props) {
|
|
@@ -1214,7 +1216,7 @@ var LuiSelectInput = function LuiSelectInput(props) {
|
|
|
1214
1216
|
}), props.error)));
|
|
1215
1217
|
};
|
|
1216
1218
|
|
|
1217
|
-
var css$4 = ":root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.
|
|
1219
|
+
var css$4 = ":root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiTextAreaInput_LuiTextAreaInput__02f8c8a8 {\n width: 100%;\n margin-bottom: 24px;\n position: relative;\n}\n.LuiTextAreaInput_LuiTextAreaInput__02f8c8a8 textarea {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: normal;\n border-radius: 4px;\n border: solid 1px #b2b2b2;\n background: #fff;\n padding-top: 14px;\n padding-right: 32px;\n padding-bottom: 14px;\n padding-left: 16px;\n box-sizing: border-box;\n width: 100%;\n resize: vertical;\n min-height: 100px;\n}\n.LuiTextAreaInput_LuiTextAreaInput__02f8c8a8 textarea {\n font-size: 14px;\n}\n@media screen and (min-width: 1px) {\n .LuiTextAreaInput_LuiTextAreaInput__02f8c8a8 textarea {\n font-size: calc(\n 14px + 2 *\n (\n (100vw - 1px) / 1279\n )\n );\n }\n}\n@media screen and (min-width: 1280px) {\n .LuiTextAreaInput_LuiTextAreaInput__02f8c8a8 textarea {\n font-size: 16px;\n }\n}\n.LuiTextAreaInput_LuiTextAreaInput__02f8c8a8 textarea::placeholder {\n font-weight: normal;\n color: #6b6966;\n opacity: 1;\n}\n.LuiTextAreaInput_isDisabled__02f8c8a8 .LuiTextAreaInput_LuiTextAreaInput__02f8c8a8 textarea::placeholder {\n color: #989189;\n}\n.LuiTextAreaInput_LuiTextAreaInput__02f8c8a8 textarea:focus {\n outline: none;\n border-color: #053d52;\n}\n.LuiTextAreaInput_LuiTextAreaInput__02f8c8a8 label,\n.LuiTextAreaInput_LuiTextAreaInput__02f8c8a8 textarea {\n display: block;\n}\n.LuiTextAreaInput_LuiTextAreaInput__02f8c8a8.LuiTextAreaInput_hasError__02f8c8a8 textarea,\n.LuiTextAreaInput_LuiTextAreaInput__02f8c8a8.LuiTextAreaInput_hasError__02f8c8a8 select {\n border-color: #eb5757;\n}\n.LuiTextAreaInput_LuiTextAreaInput__02f8c8a8.LuiTextAreaInput_isDisabled__02f8c8a8 textarea {\n border-color: #b2b2b2;\n background-color: #fff;\n cursor: not-allowed;\n opacity: 0.3;\n}\n.LuiTextAreaInput_LuiTextAreaInput__02f8c8a8.LuiTextAreaInput_isDisabled__02f8c8a8 label {\n opacity: 0.3;\n}\n\n.LuiTextAreaInput_LuiTextAreaInputLabel__02f8c8a8 {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n margin-bottom: 0.5rem;\n font-size: 0.875rem;\n line-height: 1.5rem;\n color: #2a292c;\n}\n\n.LuiTextAreaInput_LuiTextAreaInputError__02f8c8a8 {\n position: relative;\n display: flex;\n color: #eb5757;\n text-align: left;\n padding-left: 22px;\n font-size: 14px;\n line-height: 20px;\n margin-top: 2px;\n}\n\n.LuiTextAreaInput_LuiTextAreaInputErrorIcon__02f8c8a8 {\n position: absolute;\n left: 0;\n top: 2px;\n}";
|
|
1218
1220
|
n(css$4,{});
|
|
1219
1221
|
|
|
1220
1222
|
var LuiTextAreaInput = function LuiTextAreaInput(props) {
|
|
@@ -1243,49 +1245,50 @@ var LuiTextAreaInput = function LuiTextAreaInput(props) {
|
|
|
1243
1245
|
}), props.error));
|
|
1244
1246
|
};
|
|
1245
1247
|
|
|
1248
|
+
var css$5 = ":root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiRadioInput_LuiRadioInputFieldset__c10e594c {\n border: none;\n padding: 0;\n}\n\n.LuiRadioInput_LuiRadioInputInput__c10e594c {\n position: absolute !important;\n width: 1px !important;\n height: 1px !important;\n margin: 0 !important;\n padding: 0 !important;\n overflow: hidden !important;\n clip: rect(0 0 0 0) !important;\n -webkit-clip-path: inset(50%) !important;\n clip-path: inset(50%) !important;\n border: 0 !important;\n white-space: nowrap !important;\n}\n\n.LuiRadioInput_LuiRadioInputLegend__c10e594c {\n font-family: \"Open Sans\", system-ui, sans-serif;\n font-style: normal;\n font-weight: 600;\n}\n\n.LuiRadioInput_LuiRadioInputLabel__c10e594c {\n position: relative;\n display: flex;\n justify-content: flex-start;\n align-items: flex-start;\n cursor: pointer;\n padding: 0.5rem 0 0.5rem 2rem;\n}\n.LuiRadioInput_LuiRadioInputLabel__c10e594c:before {\n content: \"\";\n height: 1.5rem;\n min-width: 1.5rem;\n width: 1.5rem;\n border: 2px solid #007198;\n border-radius: 50%;\n background-color: transparent;\n position: absolute;\n left: 0;\n top: 8px;\n margin-right: 0.75rem;\n}\n.LuiRadioInput_LuiRadioInputLabel__c10e594c:after {\n content: \"\";\n position: absolute;\n left: 5px;\n top: 13px;\n background-color: #007198;\n height: 14px;\n min-width: 14px;\n width: 14px;\n border-radius: 50%;\n opacity: 0;\n transition: opacity 0.3s ease-in-out;\n}\n.LuiRadioInput_LuiRadioInputLabel_IsSelected__c10e594c:after {\n opacity: 1;\n}\n.LuiRadioInput_LuiRadioInputLabel_IsDisabled__c10e594c {\n color: #989189;\n}\n.LuiRadioInput_LuiRadioInputLabel_IsDisabled__c10e594c:before {\n background-color: #eaeaea;\n border-color: #989189;\n}\n\n.LuiRadioInput_LuiRadioInput_HasError__c10e594c .LuiRadioInput_LuiRadioInputLabel__c10e594c:before {\n border-color: #cc0000;\n}\n\n.LuiRadioInput_LuiRadioInputErrorMsg__c10e594c {\n display: flex;\n margin-top: 0.5rem;\n}\n.LuiRadioInput_LuiRadioInputErrorMsg__c10e594c .LuiRadioInput_LuiIcon_Error__c10e594c {\n margin-right: 0.5rem;\n}\n.LuiRadioInput_LuiRadioInputErrorMsg__c10e594c p {\n margin: 0;\n}";
|
|
1249
|
+
n(css$5,{});
|
|
1250
|
+
|
|
1246
1251
|
var LuiRadioInput = function LuiRadioInput(props) {
|
|
1247
1252
|
var _props$inputProps;
|
|
1248
1253
|
|
|
1249
1254
|
var id = useGenerateOrDefaultId((_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.id);
|
|
1250
|
-
return React__default.createElement("
|
|
1251
|
-
className: 'LuiRadioInput'
|
|
1255
|
+
return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
|
|
1256
|
+
className: clsx('LuiRadioInput', {
|
|
1257
|
+
'LuiRadioInput--hasError': props.error
|
|
1258
|
+
})
|
|
1259
|
+
}, React__default.createElement("fieldset", {
|
|
1260
|
+
className: 'LuiRadioInput-fieldset'
|
|
1252
1261
|
}, props.legend && React__default.createElement("legend", {
|
|
1253
1262
|
className: "LuiRadioInput-legend"
|
|
1254
1263
|
}, props.legend), props.options.map(function (option, index) {
|
|
1255
1264
|
var radioId = id + "-" + index;
|
|
1256
|
-
var
|
|
1265
|
+
var isSelected = props.selectedValue === option;
|
|
1257
1266
|
var isDisabled = props.isOptionDisabled && props.isOptionDisabled(index);
|
|
1258
|
-
return React__default.createElement("
|
|
1259
|
-
className: clsx('LuiRadioInput-option', {
|
|
1260
|
-
isDisabled: isDisabled
|
|
1261
|
-
}),
|
|
1262
|
-
key: radioId
|
|
1263
|
-
}, React__default.createElement("label", {
|
|
1267
|
+
return React__default.createElement("label", {
|
|
1264
1268
|
htmlFor: radioId,
|
|
1265
|
-
className:
|
|
1269
|
+
className: clsx('LuiRadioInput-label', {
|
|
1270
|
+
'LuiRadioInput-label--isDisabled': isDisabled,
|
|
1271
|
+
'LuiRadioInput-label--isSelected': isSelected
|
|
1272
|
+
}),
|
|
1266
1273
|
key: radioId
|
|
1267
1274
|
}, React__default.createElement("input", Object.assign({
|
|
1268
1275
|
disabled: isDisabled,
|
|
1269
|
-
className: "LuiRadioInput-
|
|
1276
|
+
className: "LuiRadioInput-input",
|
|
1270
1277
|
type: "radio",
|
|
1271
1278
|
id: radioId,
|
|
1272
1279
|
name: option,
|
|
1273
1280
|
value: option,
|
|
1274
|
-
checked:
|
|
1281
|
+
checked: isSelected,
|
|
1275
1282
|
onChange: props.onChange
|
|
1276
|
-
}, props.inputProps)),
|
|
1277
|
-
|
|
1278
|
-
|
|
1279
|
-
})
|
|
1280
|
-
}), props.renderLabelFor ? props.renderLabelFor(option) : option));
|
|
1281
|
-
}), props.error && React__default.createElement("div", {
|
|
1282
|
-
className: "LuiRadioInput-error"
|
|
1283
|
+
}, props.inputProps)), props.renderLabelFor ? props.renderLabelFor(option) : option);
|
|
1284
|
+
})), props.error && React__default.createElement("div", {
|
|
1285
|
+
className: "LuiRadioInput-errorMsg"
|
|
1283
1286
|
}, React__default.createElement(LuiIcon, {
|
|
1284
1287
|
alt: 'error',
|
|
1285
1288
|
name: "ic_error",
|
|
1286
|
-
size: "
|
|
1289
|
+
size: "md",
|
|
1287
1290
|
status: "error"
|
|
1288
|
-
}), React__default.createElement("
|
|
1291
|
+
}), React__default.createElement("p", null, props.error))));
|
|
1289
1292
|
};
|
|
1290
1293
|
|
|
1291
1294
|
function LuiFormikCheckbox(props) {
|
|
@@ -18113,9 +18116,9 @@ function isChromatic() {
|
|
|
18113
18116
|
return !!((_window = window) != null && _window.navigator.userAgent.match(/Chromatic/) || (_window2 = window) != null && _window2.location.href.match(/chromatic=true/));
|
|
18114
18117
|
}
|
|
18115
18118
|
|
|
18116
|
-
var css$
|
|
18119
|
+
var css$6 = ":root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}";
|
|
18117
18120
|
var modules_5b17bb95 = {"charcoal":"#2a292c","fuscous":"#6b6966","gray":"#989189","silver":"#beb9b4","lily":"#eaeaea","hint":"#f9f9f9","snow":"#ffffff","white":"#ffffff","teal":"#00425d","sea":"#007198","electric":"#0096cc","spray":"#73c8e1","polar":"#e2f3f7","sherpa":"#004b50","surfie":"#017a76","persian":"#00a599","downy":"#73cdc8","iceberg":"#dcf5f0","sacramento":"#004e32","salem":"#08814d","pigment":"#0aa245","granny":"#9bd79b","panache":"#e9fae7","brand-primary":"#004b50","brand-secondary":"#017a76","error":"#cc0000","error-bg":"#f5cccc","error-focus":"#5a0000","warning":"#ea6a2e","warning-bg":"#fbdfd2","warning-focus":"#b33a01","success":"#0aa245","success-bg":"#e9fae7","info":"#3a7cdf","info-bg":"#d8e5f9","visited":"#00425d","green-hover":"#08814d","green-active":"#004e32","green-btn":"#0aa245","txt-link":"#0096cc","primary-hover-btn":"#007198","selection":"#c7e9f3","heading-color":"#017a76","heading-color--secondary":"#2a292c","base-type-color":"#2a292c","base-icon-color":"#007198","disabled-color":"#989189","disabled-color-dark":"#6b6966","linz-color-primary":"#023d48","linz-color-primary-hover":"#01818a","linz-color-tertiary":"#e1e44a","linz-color-tertiary-hover":"#cdcf59","color-test-pink":"#f09","linz-linear-gradient-blue":"linear-gradient(70deg, #00425d 12%, #007198 100%)","linz-linear-gradient-teal":"linear-gradient(270deg, #00a599 1%, #73cdc8 100%)"};
|
|
18118
|
-
n(css$
|
|
18121
|
+
n(css$6,{});
|
|
18119
18122
|
|
|
18120
18123
|
/**
|
|
18121
18124
|
* A wrapper around React Select with Lui styling
|
|
@@ -18197,8 +18200,8 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
18197
18200
|
}));
|
|
18198
18201
|
}
|
|
18199
18202
|
|
|
18200
|
-
var css$
|
|
18201
|
-
n(css$
|
|
18203
|
+
var css$7 = ":root {\n --grey-80: #2a292c;\n --grey-60: #6b6966;\n --$gray: #989189;\n --grey-20: #beb9b4;\n --grey-10: #eaeaea;\n --grey-05: #f9f9f9;\n --teal: #00425d;\n --sea: #007198;\n --electric: #0096cc;\n --spray: #73c8e1;\n --polar: #e2f3f7;\n --sherpa: #004b50;\n --surfie: #017a76;\n --persian: #00a599;\n --downy: #73cdc8;\n --iceberg: #dcf5f0;\n --sacramento: #004e32;\n --salem: #08814d;\n --pigment: #0aa245;\n --granny: #9bd79b;\n --panache: #e9fae7;\n --brand-primary: #004b50;\n --brand-secondary: #017a76;\n --success: #0aa245;\n --success-bg: #e9fae7;\n --info: #3a7cdf;\n --info-bg: #d8e5f9;\n --warning: #ea6a2e;\n --warning-bg: #fbdfd2;\n --error: #cc0000;\n --error-focus: #5a0000;\n --error-bg: #f5cccc;\n --visited: #00425d;\n --green-hover: #08814d;\n --color-green-active: #004e32;\n --green-btn: #0aa245;\n --txt-link: #0096cc;\n --color-primary-hover-btn: #007198;\n --color-selection: #c7e9f3;\n --heading-color: #017a76;\n --heading-color--secondary: #2a292c;\n --base-type-color: #2a292c;\n --base-icon-color: #007198;\n --disabled-color: #989189;\n --disabled-color-dark: #6b6966;\n --linz-color-primary: #023d48;\n --linz-color-primary-hover: #01818a;\n --linz-color-tertiary: #e1e44a;\n --linz-color-tertiary-hover: #cdcf59;\n --color-test-pink: #f09;\n --linz-linear-gradient-blue: linear-gradient(70deg, #00425d 12%, #007198 100%);\n --linz-linear-gradient-teal: linear-gradient(270deg, #00a599 1%, #73cdc8 100%);\n}\n\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n/**\n @deprecated\n */\n.LuiShadow_LuiShadow__a0705fc2 {\n box-shadow: 0 0 1.5rem 1px rgba(0, 113, 152, 0.1);\n border-radius: 5px;\n padding: 1.5rem;\n margin-top: 0.75rem;\n background-color: #ffffff;\n}";
|
|
18204
|
+
n(css$7,{});
|
|
18202
18205
|
|
|
18203
18206
|
var LuiShadow = function LuiShadow(props) {
|
|
18204
18207
|
return React__default.createElement("div", {
|