@linzjs/lui 11.3.0 → 11.6.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [11.6.0](https://github.com/linz/lui/compare/v11.5.0...v11.6.0) (2022-01-11)
+
+
+### Features
+
+* Consistent placeholder style ([#507](https://github.com/linz/lui/issues/507)) ([f60ff44](https://github.com/linz/lui/commit/f60ff4494af9e1e6c73ba3493ebadf4c7643d3c7))
+
+# [11.5.0](https://github.com/linz/lui/compare/v11.4.0...v11.5.0) (2022-01-10)
+
+
+### Features
+
+* **LuiSelectInput:** Remove width limitation ([#504](https://github.com/linz/lui/issues/504)) ([2531015](https://github.com/linz/lui/commit/253101530422711ae154b1adca32ebbfe1213b13))
+
+# [11.4.0](https://github.com/linz/lui/compare/v11.3.1...v11.4.0) (2022-01-09)
+
+
+### Features
+
+* Exposes styles for all non-formik form elements ([#503](https://github.com/linz/lui/issues/503)) ([5f7e508](https://github.com/linz/lui/commit/5f7e508d426adc02dbe768d3b3a19e778567ab83))
+
+## [11.3.1](https://github.com/linz/lui/compare/v11.3.0...v11.3.1) (2021-12-21)
+
+
+### Bug Fixes
+
+* Adds Styles for LuiRadioInput ([#500](https://github.com/linz/lui/issues/500)) ([038434e](https://github.com/linz/lui/commit/038434e19e449ae8946d6dc389bd5037b9be0f1f))
+
 # [11.3.0](https://github.com/linz/lui/compare/v11.2.2...v11.3.0) (2021-12-20)
 
 

package/dist/assets/icons/tick.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 11">
+    <path fill="#FFF" d="M.297 4.934a1.013 1.013 0 0 1 1.344-.078l.088.078L5.254 8.46 12.219.353a1.013 1.013 0 0 1 1.334-.18l.094.072c.394.338.464.914.18 1.334l-.072.094-7.676 8.935a1.013 1.013 0 0 1-1.398.134l-.087-.078L.297 6.367a1.013 1.013 0 0 1 0-1.433Z"/>
+</svg>

package/dist/components/LuiError/LuiError.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import './LuiError.scss';
+import '../../scss/Components/LuiError/LuiError.scss';
 interface ILuiError {
     error?: string | boolean;
     className: string;

package/dist/components/LuiFormElements/LuiCheckboxInput/LuiCheckboxInput.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './LuiCheckboxInput.scss';
 export interface LuiCheckboxProps {
     value: string;
     label: JSX.Element | string;

package/dist/components/LuiFormElements/{RadioInput → LuiRadioInput}/LuiRadioInput.d.ts

@@ -1,12 +1,12 @@
 import { ChangeEventHandler, InputHTMLAttributes } from 'react';
-export interface LuiRadioInputProps {
-    legend?: JSX.Element | string;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
+export interface LuiRadioProps {
+    onChange: ChangeEventHandler<HTMLInputElement>;
+    selectedValue: string;
     options: string[];
+    legend?: JSX.Element | string;
     error?: string;
-    selectedValue: string;
     isOptionDisabled?: (index: number) => boolean;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
     renderLabelFor?: (value: string) => JSX.Element;
 }
-export declare const LuiRadioInput: (props: LuiRadioInputProps) => JSX.Element;
+export declare const LuiRadioInput: (props: LuiRadioProps) => JSX.Element;

package/dist/components/LuiFormElements/{RadioInput → LuiRadioInput}/LuiRadioInput.stories.d.ts

@@ -2,7 +2,7 @@
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 declare const _default: {
     title: string;
-    component: (props: import("./LuiRadioInput").LuiRadioInputProps) => JSX.Element;
+    component: (props: import("./LuiRadioInput").LuiRadioProps) => JSX.Element;
     parameters: {
         badges: BADGE[];
     };

package/dist/components/LuiFormElements/{RadioInput → LuiRadioInput}/LuiRadioInputWithFormik.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 declare const _default: {
     title: string;
-    component: (props: import("./LuiRadioInput").LuiRadioInputProps) => JSX.Element;
+    component: (props: import("./LuiRadioInput").LuiRadioProps) => JSX.Element;
 };
 export default _default;
 export declare const LuiRadioButtonInputWithFormikHooks: {

package/dist/components/LuiFormElements/LuiSelectInput/LuiSelectInput.d.ts

@@ -1,5 +1,4 @@
 import { ChangeEventHandler, SelectHTMLAttributes } from 'react';
-import './LuiSelectInput.scss';
 export declare type SelectOptions = {
     label: string;
     value: string;

package/dist/components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput.d.ts

@@ -1,5 +1,4 @@
 import { ChangeEventHandler, InputHTMLAttributes } from 'react';
-import './LuiTextAreaInput.scss';
 export interface LuiTextAreaInputProps {
     label: JSX.Element | string;
     inputProps?: InputHTMLAttributes<HTMLTextAreaElement>;

package/dist/components/LuiFormElements/LuiTextInput/LuiTextInput.d.ts

@@ -1,5 +1,4 @@
 import { ChangeEventHandler, InputHTMLAttributes } from 'react';
-import './LuiTextInput.scss';
 export interface LuiTextInputProps {
     onChange?: ChangeEventHandler<HTMLInputElement>;
     inputProps?: InputHTMLAttributes<HTMLInputElement>;

package/dist/components/LuiIcon/LuiIcon.stories.d.ts

@@ -1,6 +1,5 @@
 /// <reference types="react" />
-import './LuiIconStory.scss';
-import './LuiIcon.scss';
+import './iconStory.scss';
 declare const _default: {
     title: string;
     component: ({ name, className, size, title, alt, status, spanProps, }: import("./LuiIcon").LuiIconProps) => JSX.Element | null;

package/dist/components/LuiLoadingSpinner/LuiLoadingSpinner.stories.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import '../../scss/base.scss';
-import './LuiLoadingSpinner.scss';
+import './loadingSpinnerStory.scss';
 declare const _default: {
     title: string;
 };

package/dist/components/LuiShadow/LuiShadow.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import './LuiShadow.scss';
 export declare const LuiShadow: (props: {
     children: React.ReactNode;
     className?: string;

package/dist/components/LuiShadow/LuiShadow.stories.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import './LuiShadow-demo.scss';
+import './dropshadowStory.scss';
 declare const _default: {
     title: string;
 };

package/dist/index.d.ts

@@ -18,7 +18,7 @@ export { LuiFileInputBox } from './components/LuiFormElements/LuiFileInputBox/Lu
 export { LuiSelectInput } from './components/LuiFormElements/LuiSelectInput/LuiSelectInput';
 export { LuiTextAreaInput } from './components/LuiFormElements/LuiTextAreaInput/LuiTextAreaInput';
 export { LuiTextInput } from './components/LuiFormElements/LuiTextInput/LuiTextInput';
-export { LuiRadioInput } from './components/LuiFormElements/RadioInput/LuiRadioInput';
+export { LuiRadioInput } from './components/LuiFormElements/LuiRadioInput/LuiRadioInput';
 export { LuiFormikCheckbox } from './components/LuiFormikForms/LuiFormikCheckbox/LuiFormikCheckbox';
 export { LuiFormikTextInput } from './components/LuiFormikForms/LuiFormikTextInput/LuiFormikTextInput';
 export { LuiFormikFormLabel } from './components/LuiFormikForms/LuiFormikFormLabel/LuiFormikFormLabel';

package/dist/lui.cjs.development.js

@@ -619,11 +619,6 @@ function LuiFormikForm(props) {
   }, React__default.createElement(formik.Form, null, props.children, " ")));
 }
 
-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}}
-
-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}";
-n(css,{});
-
 // NOTE: This is a generated file, nothing you do here matters
 
 var ic_account_circle = /*#__PURE__*/React__default.createElement("svg", {
@@ -950,8 +945,10 @@ var LuiIcon = function LuiIcon(_ref) {
   }, spanProps), iconSVG);
 };
 
-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}";
-n(css$1,{});
+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}}
+
+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}";
+n(css,{});
 
 var LuiError = function LuiError(_ref) {
   var error = _ref.error,
@@ -969,9 +966,6 @@ var LuiError = function LuiError(_ref) {
   }, error));
 };
 
-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}";
-n(css$2,{});
-
 function useGenerateOrDefaultId(idFromProps) {
   var _useState = React.useState(idFromProps ? idFromProps : uuid.v4()),
       id = _useState[0];
@@ -1171,9 +1165,6 @@ var extensionsAsHumanReadableList = function extensionsAsHumanReadableList(exten
   return uppercaseExtensions.slice(0, -1).join(', ') + " or " + uppercaseExtensions[extensions.length - 1];
 };
 
-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}";
-n(css$3,{});
-
 var LuiSelectInput = function LuiSelectInput(props) {
   var _props$selectProps;
 
@@ -1216,9 +1207,6 @@ var LuiSelectInput = function LuiSelectInput(props) {
   }), props.error)));
 };
 
-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}";
-n(css$4,{});
-
 var LuiTextAreaInput = function LuiTextAreaInput(props) {
   var _props$inputProps;
 
@@ -1249,45 +1237,43 @@ var LuiRadioInput = function LuiRadioInput(props) {
   var _props$inputProps;
 
   var id = useGenerateOrDefaultId((_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.id);
-  return React__default.createElement("fieldset", {
-    className: 'LuiRadioInput'
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+    className: clsx('LuiRadioInput', {
+      'LuiRadioInput--hasError': props.error
+    })
+  }, React__default.createElement("fieldset", {
+    className: 'LuiRadioInput-fieldset'
   }, props.legend && React__default.createElement("legend", {
     className: "LuiRadioInput-legend"
   }, props.legend), props.options.map(function (option, index) {
     var radioId = id + "-" + index;
-    var isChecked = props.selectedValue === option;
+    var isSelected = props.selectedValue === option;
     var isDisabled = props.isOptionDisabled && props.isOptionDisabled(index);
-    return React__default.createElement("div", {
-      className: clsx('LuiRadioInput-option', {
-        isDisabled: isDisabled
-      }),
-      key: radioId
-    }, React__default.createElement("label", {
+    return React__default.createElement("label", {
       htmlFor: radioId,
-      className: "LuiRadioInput-option-label",
+      className: clsx('LuiRadioInput-label', {
+        'LuiRadioInput-label--isDisabled': isDisabled,
+        'LuiRadioInput-label--isSelected': isSelected
+      }),
       key: radioId
     }, React__default.createElement("input", Object.assign({
       disabled: isDisabled,
-      className: "LuiRadioInput-option-button",
+      className: "LuiRadioInput-input",
       type: "radio",
       id: radioId,
       name: option,
       value: option,
-      checked: isChecked,
+      checked: isSelected,
       onChange: props.onChange
-    }, props.inputProps)), React__default.createElement("span", {
-      className: clsx('LuiRadioInput-option-check', {
-        isChecked: isChecked
-      })
-    }), props.renderLabelFor ? props.renderLabelFor(option) : option));
-  }), props.error && React__default.createElement("div", {
-    className: "LuiRadioInput-error"
+    }, props.inputProps)), props.renderLabelFor ? props.renderLabelFor(option) : option);
+  })), props.error && React__default.createElement("div", {
+    className: "LuiRadioInput-errorMsg"
   }, React__default.createElement(LuiIcon, {
     alt: 'error',
     name: "ic_error",
-    size: "sm",
+    size: "md",
     status: "error"
-  }), React__default.createElement("span", null, props.error)));
+  }), React__default.createElement("p", null, props.error))));
 };
 
 function LuiFormikCheckbox(props) {
@@ -18115,9 +18101,9 @@ function isChromatic() {
   return !!((_window = window) != null && _window.navigator.userAgent.match(/Chromatic/) || (_window2 = window) != null && _window2.location.href.match(/chromatic=true/));
 }
 
-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}";
+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}";
 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%)"};
-n(css$5,{});
+n(css$1,{});
 
 /**
  * A wrapper around React Select with Lui styling
@@ -18192,16 +18178,18 @@ function LuiComboSelectActual(givenProps, ref) {
       },
       placeholder: function placeholder(provided) {
         return _extends({}, provided, {
-          fontWeight: 400
+          /* please keep this in sync with FormVars.scss/mixin.formPlaceholder */
+          fontWeight: 'normal',
+          fontStyle: 'italic',
+          color: '#6b6966'
+          /* same as _LuiColors.scss $input-placeholder */
+
         });
       }
     }
   }));
 }
 
-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}";
-n(css$6,{});
-
 var LuiShadow = function LuiShadow(props) {
   return React__default.createElement("div", {
     className: clsx('LuiShadow', props.className)