@linzjs/lui 11.2.2 → 11.5.0
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/assets/icons/tick.svg +3 -0
- package/dist/components/LuiError/LuiError.d.ts +1 -1
- package/dist/components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.d.ts +0 -1
- package/dist/components/LuiFormElements/{RadioInput → LuiRadioInput}/LuiRadioInput.d.ts +5 -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/LuiSelectInput/LuiSelectInput.d.ts +0 -1
- package/dist/components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.d.ts +0 -1
- package/dist/components/LuiFormElements/LuiTextInput/LuiTextInput.d.ts +4 -1
- package/dist/components/LuiFormElements/LuiTextInput/LuiTextInput.stories.d.ts +4 -0
- package/dist/components/LuiIcon/LuiIcon.stories.d.ts +1 -2
- package/dist/components/LuiLoadingSpinner/LuiLoadingSpinner.stories.d.ts +1 -1
- package/dist/components/LuiShadow/LuiShadow.d.ts +0 -1
- package/dist/components/LuiShadow/LuiShadow.stories.d.ts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/lui.cjs.development.js +28 -43
- 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 +517 -0
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +28 -43
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/Components/LuiError/LuiError.scss +14 -0
- package/dist/scss/Components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.scss +151 -0
- package/dist/scss/Components/LuiFormElements/LuiRadioInput/LuiRadioInput.scss +86 -0
- package/dist/scss/Components/LuiFormElements/LuiSelectInput/LuiSelectInput.scss +89 -0
- package/dist/scss/Components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.scss +83 -0
- package/dist/scss/Components/LuiFormElements/LuiTextInput/LuiTextInput.scss +131 -0
- package/dist/scss/Components/LuiShadow/LuiShadow.scss +16 -0
- package/dist/scss/base.scss +10 -2
- package/package.json +1 -1
package/dist/lui.esm.js
CHANGED
|
@@ -612,11 +612,6 @@ function LuiFormikForm(props) {
|
|
|
612
612
|
}, React__default.createElement(Form, null, props.children, " ")));
|
|
613
613
|
}
|
|
614
614
|
|
|
615
|
-
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}}
|
|
616
|
-
|
|
617
|
-
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}";
|
|
618
|
-
n(css,{});
|
|
619
|
-
|
|
620
615
|
// NOTE: This is a generated file, nothing you do here matters
|
|
621
616
|
|
|
622
617
|
var ic_account_circle = /*#__PURE__*/React__default.createElement("svg", {
|
|
@@ -943,8 +938,10 @@ var LuiIcon = function LuiIcon(_ref) {
|
|
|
943
938
|
}, spanProps), iconSVG);
|
|
944
939
|
};
|
|
945
940
|
|
|
946
|
-
var
|
|
947
|
-
|
|
941
|
+
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}}
|
|
942
|
+
|
|
943
|
+
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.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}";
|
|
944
|
+
n(css,{});
|
|
948
945
|
|
|
949
946
|
var LuiError = function LuiError(_ref) {
|
|
950
947
|
var error = _ref.error,
|
|
@@ -962,9 +959,6 @@ var LuiError = function LuiError(_ref) {
|
|
|
962
959
|
}, error));
|
|
963
960
|
};
|
|
964
961
|
|
|
965
|
-
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__947a60fa {\n margin-bottom: 24px;\n}\n.LuiTextInput_LuiTextInputLabel__947a60fa {\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__947a60fa {\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__947a60fa .LuiTextInput_LuiTextInputInputWrapper__947a60fa {\n box-shadow: -8px 0px 0 0 #cc0000;\n border-radius: 4px;\n}\n\n.LuiTextInput_LuiTextInputPasswordReveal__947a60fa {\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__947a60fa:hover {\n background: transparent;\n}\n\n.LuiTextInput_LuiTextInputInput__947a60fa {\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__947a60fa::placeholder {\n font-weight: normal;\n color: #6b6966;\n opacity: 1;\n}\n.LuiTextInput_isDisabled__947a60fa .LuiTextInput_LuiTextInputInput__947a60fa::placeholder {\n color: #989189;\n}\n.LuiTextInput_LuiTextInputInput__947a60fa:hover, .LuiTextInput_LuiTextInputInput__947a60fa:active {\n border-color: #053d52;\n}\n.LuiTextInput_LuiTextInputInput__947a60fa:focus {\n outline: none;\n border-color: #053d52;\n}\n.LuiTextInput_hasError__947a60fa .LuiTextInput_LuiTextInputInput__947a60fa {\n border-color: #cc0000 !important;\n}\n.LuiTextInput_isDisabled__947a60fa .LuiTextInput_LuiTextInputInput__947a60fa {\n border-color: #beb9b4;\n background-color: #eaeaea;\n cursor: not-allowed;\n}\n\n.LuiTextInput_LuiTextInputError__947a60fa {\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__947a60fa {\n position: absolute;\n left: 0;\n top: 2px;\n}\n\n.LuiTextInput_LuiFieldWrapper__947a60fa {\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__947a60fa input {\n transition: border 0.2s ease;\n}\n.LuiTextInput_LuiFieldWrapper__947a60fa.LuiTextInput_LuiFieldWrapper_Error__947a60fa {\n box-shadow: -12px 0px 0 0 #cc0000;\n border-radius: 4px;\n}\n.LuiTextInput_LuiFieldWrapper__947a60fa.LuiTextInput_LuiFieldWrapper_Error__947a60fa input {\n border-color: #cc0000;\n}";
|
|
966
|
-
n(css$2,{});
|
|
967
|
-
|
|
968
962
|
function useGenerateOrDefaultId(idFromProps) {
|
|
969
963
|
var _useState = useState(idFromProps ? idFromProps : v4()),
|
|
970
964
|
id = _useState[0];
|
|
@@ -980,7 +974,9 @@ var LuiTextInput = function LuiTextInput(props) {
|
|
|
980
974
|
}, React__default.createElement("label", {
|
|
981
975
|
className: 'LuiTextInput-label',
|
|
982
976
|
htmlFor: id
|
|
983
|
-
}, React__default.createElement("span", {
|
|
977
|
+
}, props.mandatory && React__default.createElement("span", {
|
|
978
|
+
className: "LuiTextInput-mandatory"
|
|
979
|
+
}, "*"), React__default.createElement("span", {
|
|
984
980
|
className: clsx(props.hideLabel ? 'LuiScreenReadersOnly' : '')
|
|
985
981
|
}, props.label), React__default.createElement("span", {
|
|
986
982
|
className: "LuiTextInput-inputWrapper"
|
|
@@ -1162,9 +1158,6 @@ var extensionsAsHumanReadableList = function extensionsAsHumanReadableList(exten
|
|
|
1162
1158
|
return uppercaseExtensions.slice(0, -1).join(', ') + " or " + uppercaseExtensions[extensions.length - 1];
|
|
1163
1159
|
};
|
|
1164
1160
|
|
|
1165
|
-
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}";
|
|
1166
|
-
n(css$3,{});
|
|
1167
|
-
|
|
1168
1161
|
var LuiSelectInput = function LuiSelectInput(props) {
|
|
1169
1162
|
var _props$selectProps;
|
|
1170
1163
|
|
|
@@ -1207,9 +1200,6 @@ var LuiSelectInput = function LuiSelectInput(props) {
|
|
|
1207
1200
|
}), props.error)));
|
|
1208
1201
|
};
|
|
1209
1202
|
|
|
1210
|
-
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}";
|
|
1211
|
-
n(css$4,{});
|
|
1212
|
-
|
|
1213
1203
|
var LuiTextAreaInput = function LuiTextAreaInput(props) {
|
|
1214
1204
|
var _props$inputProps;
|
|
1215
1205
|
|
|
@@ -1240,45 +1230,43 @@ var LuiRadioInput = function LuiRadioInput(props) {
|
|
|
1240
1230
|
var _props$inputProps;
|
|
1241
1231
|
|
|
1242
1232
|
var id = useGenerateOrDefaultId((_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.id);
|
|
1243
|
-
return React__default.createElement("
|
|
1244
|
-
className: 'LuiRadioInput'
|
|
1233
|
+
return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
|
|
1234
|
+
className: clsx('LuiRadioInput', {
|
|
1235
|
+
'LuiRadioInput--hasError': props.error
|
|
1236
|
+
})
|
|
1237
|
+
}, React__default.createElement("fieldset", {
|
|
1238
|
+
className: 'LuiRadioInput-fieldset'
|
|
1245
1239
|
}, props.legend && React__default.createElement("legend", {
|
|
1246
1240
|
className: "LuiRadioInput-legend"
|
|
1247
1241
|
}, props.legend), props.options.map(function (option, index) {
|
|
1248
1242
|
var radioId = id + "-" + index;
|
|
1249
|
-
var
|
|
1243
|
+
var isSelected = props.selectedValue === option;
|
|
1250
1244
|
var isDisabled = props.isOptionDisabled && props.isOptionDisabled(index);
|
|
1251
|
-
return React__default.createElement("
|
|
1252
|
-
className: clsx('LuiRadioInput-option', {
|
|
1253
|
-
isDisabled: isDisabled
|
|
1254
|
-
}),
|
|
1255
|
-
key: radioId
|
|
1256
|
-
}, React__default.createElement("label", {
|
|
1245
|
+
return React__default.createElement("label", {
|
|
1257
1246
|
htmlFor: radioId,
|
|
1258
|
-
className:
|
|
1247
|
+
className: clsx('LuiRadioInput-label', {
|
|
1248
|
+
'LuiRadioInput-label--isDisabled': isDisabled,
|
|
1249
|
+
'LuiRadioInput-label--isSelected': isSelected
|
|
1250
|
+
}),
|
|
1259
1251
|
key: radioId
|
|
1260
1252
|
}, React__default.createElement("input", Object.assign({
|
|
1261
1253
|
disabled: isDisabled,
|
|
1262
|
-
className: "LuiRadioInput-
|
|
1254
|
+
className: "LuiRadioInput-input",
|
|
1263
1255
|
type: "radio",
|
|
1264
1256
|
id: radioId,
|
|
1265
1257
|
name: option,
|
|
1266
1258
|
value: option,
|
|
1267
|
-
checked:
|
|
1259
|
+
checked: isSelected,
|
|
1268
1260
|
onChange: props.onChange
|
|
1269
|
-
}, props.inputProps)),
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
})
|
|
1273
|
-
}), props.renderLabelFor ? props.renderLabelFor(option) : option));
|
|
1274
|
-
}), props.error && React__default.createElement("div", {
|
|
1275
|
-
className: "LuiRadioInput-error"
|
|
1261
|
+
}, props.inputProps)), props.renderLabelFor ? props.renderLabelFor(option) : option);
|
|
1262
|
+
})), props.error && React__default.createElement("div", {
|
|
1263
|
+
className: "LuiRadioInput-errorMsg"
|
|
1276
1264
|
}, React__default.createElement(LuiIcon, {
|
|
1277
1265
|
alt: 'error',
|
|
1278
1266
|
name: "ic_error",
|
|
1279
|
-
size: "
|
|
1267
|
+
size: "md",
|
|
1280
1268
|
status: "error"
|
|
1281
|
-
}), React__default.createElement("
|
|
1269
|
+
}), React__default.createElement("p", null, props.error))));
|
|
1282
1270
|
};
|
|
1283
1271
|
|
|
1284
1272
|
function LuiFormikCheckbox(props) {
|
|
@@ -18106,9 +18094,9 @@ function isChromatic() {
|
|
|
18106
18094
|
return !!((_window = window) != null && _window.navigator.userAgent.match(/Chromatic/) || (_window2 = window) != null && _window2.location.href.match(/chromatic=true/));
|
|
18107
18095
|
}
|
|
18108
18096
|
|
|
18109
|
-
var css$
|
|
18097
|
+
var css$1 = ":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}";
|
|
18110
18098
|
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%)"};
|
|
18111
|
-
n(css$
|
|
18099
|
+
n(css$1,{});
|
|
18112
18100
|
|
|
18113
18101
|
/**
|
|
18114
18102
|
* A wrapper around React Select with Lui styling
|
|
@@ -18190,9 +18178,6 @@ function LuiComboSelectActual(givenProps, ref) {
|
|
|
18190
18178
|
}));
|
|
18191
18179
|
}
|
|
18192
18180
|
|
|
18193
|
-
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}\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}";
|
|
18194
|
-
n(css$6,{});
|
|
18195
|
-
|
|
18196
18181
|
var LuiShadow = function LuiShadow(props) {
|
|
18197
18182
|
return React__default.createElement("div", {
|
|
18198
18183
|
className: clsx('LuiShadow', props.className)
|