@linzjs/lui 11.1.0 → 11.1.4

package/dist/lui.esm.js

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { Menu, MenuItem, MenuDivider, MenuHeader, ControlledMenu, useMenuState, FocusableItem } from '@szhsin/react-menu';
 import '@szhsin/react-menu/dist/index.css';
 import { Formik, Form, useFormikContext, Field, getIn, connect, ErrorMessage, useField } from 'formik';
+import { v4 } from 'uuid';
 import camelcase from 'camelcase';
 import Select from 'react-select';
 import Lottie from 'lottie-react';
@@ -556,11 +557,6 @@ var LuiTabs = function LuiTabs(props) {
   }, 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 = ":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.LuiTab_LuiTab__5d8d8010 {\n  background: transparent;\n  border-radius: 0;\n  color: #2a292c;\n  min-width: 10rem;\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: normal;\n}\n.LuiTab_LuiTab__5d8d8010:focus {\n  background-color: rgba(0, 165, 153, 0.2);\n}\n.LuiTab_LuiTabsGroup_Justified__5d8d8010 .LuiTab_LuiTab__5d8d8010 {\n  width: 100%;\n}\n\n.LuiTab_LuiTab_Active__5d8d8010,\n.LuiTab_LuiTab_Active__5d8d8010:focus {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: 600;\n  position: relative;\n  outline: none;\n  background: transparent;\n}\n.LuiTab_LuiTab_Active__5d8d8010:after,\n.LuiTab_LuiTab_Active__5d8d8010:focus:after {\n  content: \"\";\n  display: block;\n  height: 4px;\n  width: 100%;\n  padding: 0 32px;\n  left: 0;\n  right: 0;\n  bottom: -1px;\n  box-sizing: border-box;\n  background: linear-gradient(270deg, #73cdc8 1%, #00a599 100%);\n  border-top-left-radius: 3px;\n  border-top-right-radius: 3px;\n  position: absolute;\n}";
-n(css,{});
-
 var LuiTab = function LuiTab(props) {
   return React__default.createElement("button", {
     className: clsx('LuiTab', props.active && 'LuiTab--active'),
@@ -572,9 +568,6 @@ var LuiTab = function LuiTab(props) {
   }, props.children);
 };
 
-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}\n\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiTabsGroup_LuiTabsGroup__b045736d {\n  border-bottom: 1px solid #beb9b4;\n}\n\n.LuiTabsGroup_LuiTabsGroup_Justified__b045736d {\n  display: flex;\n  justify-content: space-between;\n}";
-n(css$1,{});
-
 var LuiTabsGroup = function LuiTabsGroup(props) {
   return React__default.createElement("div", {
     className: "LuiTabsGroup " + (props.justify ? 'LuiTabsGroup--justified' : ''),
@@ -583,9 +576,6 @@ var LuiTabsGroup = function LuiTabsGroup(props) {
   }, props.children);
 };
 
-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.LuiTabsPanel_LuiTabsPanel__8085964d {\n  display: none;\n}\n\n.LuiTabsPanel_LuiTabsPanel_Active__8085964d {\n  display: block;\n  overflow: auto;\n}";
-n(css$2,{});
-
 var LuiTabsPanel = function LuiTabsPanel(props) {
   var context = useContext(LuiTabsContext);
   var active = context.activePanel === props.panel;
@@ -622,217 +612,10 @@ function LuiFormikForm(props) {
   }, React__default.createElement(Form, null, props.children, " ")));
 }
 
-function LuiFormikCheckbox(props) {
-  var ctx = useFormikContext();
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Field, {
-    name: props.name
-  }, function (_ref) {
-    var field = _ref.field;
-    var showError = getIn(ctx == null ? void 0 : ctx.errors, props.name);
-    return React__default.createElement("div", {
-      className: clsx(showError && 'lui-input-error')
-    }, React__default.createElement("div", {
-      className: "lui-input-group-wrapper "
-    }, showError && React__default.createElement("i", {
-      className: "lui-form-status-icon material-icons-round"
-    }, "error"), React__default.createElement("div", {
-      className: clsx('lui-checkbox-container', props.className)
-    }, React__default.createElement("input", Object.assign({}, props.inputProps, {
-      type: "checkbox",
-      id: props.value,
-      disabled: !!props.disabled,
-      checked: field.value
-    }, field)), typeof props.label === 'string' ? React__default.createElement("label", {
-      htmlFor: props.value
-    }, props.label) : props.label)));
-  }));
-}
-
-var LuiFormikFormLabel = function LuiFormikFormLabel(props) {
-  return React__default.createElement("div", {
-    className: clsx('LuiFormLabel-wrapper', props.className && "" + props.className)
-  }, props.children, React__default.createElement("label", {
-    className: "LuiFormLabel",
-    htmlFor: props["for"]
-  }, props.required && React__default.createElement("span", {
-    className: "lui-required-input-icon"
-  }, "*"), props.label), props.tooltip && React__default.createElement("i", {
-    className: "material-icons-round"
-  }, "help"));
-};
-
-var LuiFormikTextInput = /*#__PURE__*/connect(function (props) {
-  var error = getIn(props.formik.errors, props.name);
-  var touch = getIn(props.formik.touched, props.name);
-  var showError = touch && error;
-
-  var _useFormikContext = useFormikContext(),
-      setFieldValue = _useFormikContext.setFieldValue;
-
-  var multiLineToggle = function multiLineToggle(field) {
-    return !props.multiLine ? React__default.createElement("input", Object.assign({
-      id: props.name,
-      "data-testid": props.name
-    }, field, {
-      type: "text"
-    }, props.inputProps, {
-      onChange: function onChange(event) {
-        var _props$validateOnChan;
-
-        setFieldValue(props.name, event.target.value, (_props$validateOnChan = props.validateOnChange) != null ? _props$validateOnChan : true);
-
-        if (props.onValueChange) {
-          props.onValueChange({
-            value: event.target.value,
-            formik: props.formik
-          });
-        }
-      }
-    })) : React__default.createElement("textarea", Object.assign({
-      id: props.name,
-      "data-testid": props.name
-    }, field, {
-      rows: 1
-    }, props.inputProps, {
-      onChange: function onChange(event) {
-        var _props$validateOnChan2;
-
-        setFieldValue(props.name, event.target.value, (_props$validateOnChan2 = props.validateOnChange) != null ? _props$validateOnChan2 : true);
-
-        if (props.onValueChange) {
-          props.onValueChange({
-            value: event.target.value,
-            formik: props.formik
-          });
-        }
-      }
-    }));
-  };
-
-  return React__default.createElement("div", {
-    className: clsx(props.className && "" + props.className)
-  }, props.label && React__default.createElement(LuiFormikFormLabel, {
-    required: props.required,
-    label: props.label,
-    "for": props.name,
-    tooltip: props.tooltip
-  }), props.helperInfo, React__default.createElement(Field, {
-    name: props.name,
-    validate: props.validate
-  }, function (_ref) {
-    var field = _ref.field;
-    return React__default.createElement("div", {
-      className: clsx(showError && 'lui-input-error')
-    }, React__default.createElement(ErrorMessage, {
-      name: props.name,
-      render: function render() {
-        return React__default.createElement("i", {
-          className: "lui-form-status-icon material-icons-round"
-        }, "error");
-      }
-    }), multiLineToggle(field), React__default.createElement(ErrorMessage, {
-      name: props.name,
-      className: 'lui-error-msg',
-      component: "p"
-    }));
-  }));
-});
-
-var LuiFormikRadioButton = function LuiFormikRadioButton(props) {
-  var _useField = useField(props),
-      field = _useField[0],
-      meta = _useField[1];
-
-  return React__default.createElement("div", {
-    className: props.className
-  }, meta.touched && meta.error && React__default.createElement("i", {
-    className: "lui-form-status-icon material-icons-round"
-  }, "error"), React__default.createElement("div", {
-    className: 'lui-radio-container'
-  }, React__default.createElement("input", Object.assign({
-    disabled: !!props.disabled
-  }, field, {
-    checked: props.value === field.value,
-    value: props.value,
-    id: props.value,
-    type: "radio"
-  }, props.inputProps)), React__default.createElement("label", {
-    htmlFor: props.value
-  }, props.label)));
-};
-
-var LuiFormikRadioGroup = function LuiFormikRadioGroup(props) {
-  var ctx = useFormikContext();
-  var error = getIn(ctx.errors, props.name);
-  var touch = getIn(ctx.touched, props.name);
-  var showError = touch && error;
-  var describedby = props.hint && camelcase(props == null ? void 0 : props.hint) + 'Id';
-  var errorDescribedBy = error && camelcase(error) + 'Id';
-  return React__default.createElement("div", {
-    className: clsx('lui-fieldsetBlock-form-group', showError && 'lui-input-error')
-  }, React__default.createElement("fieldset", {
-    "aria-describedby": clsx(props.hint && describedby + 'Id', showError && errorDescribedBy)
-  }, React__default.createElement("legend", null, props.required && React__default.createElement("span", {
-    className: "lui-required-input-icon"
-  }, "*"), props.legend), showError && React__default.createElement("p", {
-    id: errorDescribedBy
-  }, React__default.createElement("span", {
-    className: "LuiScreenReadersOnly"
-  }, " Error: "), error), props.hint && React__default.createElement("p", {
-    className: "lui-fieldset-support-txt small",
-    id: describedby
-  }, props.hint), React__default.createElement("div", {
-    className: "lui-input-group-wrapper"
-  }, props.children)));
-};
-
-var LuiFormikFormSubmitButton = /*#__PURE__*/connect(function (props) {
-  return React__default.createElement(LuiButton, {
-    type: "submit",
-    className: props.className,
-    level: "primary",
-    "data-testid": props['data-testid'],
-    disabled: !!props.disabled
-  }, props.children);
-});
-
-var LuiFormikSelect = /*#__PURE__*/connect(function (props) {
-  var error = getIn(props.formik.errors, props.name);
-  var touch = getIn(props.formik.touched, props.name);
-  var showError = touch && error;
-  return React__default.createElement("div", {
-    className: props.className
-  }, props.label && React__default.createElement(LuiFormikFormLabel, {
-    className: 'lui-margin-bottom-xxs',
-    "for": props.name,
-    label: props.label,
-    required: !!props.required,
-    tooltip: props.tooltip
-  }), props.helperInfo, React__default.createElement("div", {
-    className: clsx('lui-input-wrapper', showError && 'lui-input-error')
-  }, React__default.createElement(ErrorMessage, {
-    name: props.name,
-    render: function render() {
-      return React__default.createElement("i", {
-        className: "lui-form-status-icon material-icons-round"
-      }, "error");
-    }
-  }), React__default.createElement(Field, Object.assign({
-    disabled: props.disabled,
-    defaultValue: props.defaultValue,
-    name: props.name,
-    id: props.name,
-    validate: props.validate,
-    as: "select"
-  }, props.inputProps), props.children), React__default.createElement(ErrorMessage, {
-    name: props.name,
-    className: 'lui-error-msg',
-    component: "p"
-  })));
-});
+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$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.LuiIcon_LuiIcon__5008522b {\n  display: inline-block;\n  height: 100%;\n  width: 100%;\n}\n\n.LuiIcon_LuiIcon_Xl__5008522b {\n  max-height: 64px;\n  max-width: 64px;\n}\n.LuiIcon_LuiIcon_Xl__5008522b > svg {\n  height: 64px;\n  width: 64px;\n}\n\n.LuiIcon_LuiIcon_Lg__5008522b {\n  max-height: 48px;\n  max-width: 48px;\n}\n.LuiIcon_LuiIcon_Lg__5008522b > svg {\n  height: 48px;\n  width: 48px;\n}\n\n.LuiIcon_LuiIcon_Md__5008522b {\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n}\n.LuiIcon_LuiIcon_Md__5008522b > svg {\n  height: 24px;\n  width: 24px;\n}\n\n.LuiIcon_LuiIcon_Sm__5008522b {\n  max-height: 16px;\n  max-width: 16px;\n}\n.LuiIcon_LuiIcon_Sm__5008522b > svg {\n  height: 16px;\n  width: 16px;\n}\n\n.LuiIcon_LuiIcon_Xs__5008522b {\n  max-height: 12px;\n  max-width: 12px;\n}\n.LuiIcon_LuiIcon_Xs__5008522b > svg {\n  height: 12px;\n  width: 12px;\n}\n\n.LuiIcon_LuiIcon_Warning__5008522b {\n  fill: #ea6a2e;\n}\n\n.LuiIcon_LuiIcon_Error__5008522b {\n  fill: #cc0000;\n}\n\n.LuiIcon_LuiIcon_Success__5008522b {\n  fill: #0aa245;\n}\n\n.LuiIcon_LuiIcon_Interactive__5008522b {\n  fill: #007198;\n}\n\n.LuiIcon_LuiIcon_Disabled__5008522b {\n  fill: #989189;\n}";
-n(css$3,{});
+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__89cfba8f {\n  margin-bottom: 24px;\n  box-sizing: border-box;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputGroup__89cfba8f {\n  display: block;\n  user-select: none;\n  cursor: pointer;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputLabel__89cfba8f {\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  font-size: 14px;\n  line-height: 24px;\n  margin-bottom: 0;\n}\n.LuiCheckboxInput_isDisabled__89cfba8f .LuiCheckboxInput_LuiCheckboxInputLabel__89cfba8f {\n  cursor: not-allowed;\n  color: #989189;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputInput__89cfba8f {\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__89cfba8f::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__89cfba8f .LuiCheckboxInput_LuiCheckboxInputLabel__89cfba8f::before {\n  border-color: #eb5757;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputError__89cfba8f {\n  margin-top: 2px;\n  text-align: left;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputErrorIcon__89cfba8f {\n  margin-left: 2rem;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputInput__89cfba8f:checked + .LuiCheckboxInput_LuiCheckboxInputLabel__89cfba8f::before,\n.LuiCheckboxInput_LuiCheckboxInput_IsChecked__89cfba8f .LuiCheckboxInput_LuiCheckboxInputLabel__89cfba8f::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__89cfba8f .LuiCheckboxInput_LuiCheckboxInputLabel__89cfba8f::before {\n  border-color: #cc0000;\n}\n\n.LuiCheckboxInput_LuiCheckboxInput_HasError__89cfba8f.LuiCheckboxInput_LuiCheckboxInput_IsChecked__89cfba8f .LuiCheckboxInput_LuiCheckboxInputLabel__89cfba8f::before {\n  background-color: #cc0000;\n  border-color: #cc0000;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputInput__89cfba8f:disabled + .LuiCheckboxInput_LuiCheckboxInputLabel__89cfba8f::before,\n.LuiCheckboxInput_LuiCheckboxInput_IsDisabled__89cfba8f .LuiCheckboxInput_LuiCheckboxInputLabel__89cfba8f::before {\n  background-color: #989189;\n  border-color: #989189;\n}\n\n.LuiCheckboxInput_LuiCheckboxInputInput__89cfba8f:checked:disabled + .LuiCheckboxInput_LuiCheckboxInputLabel__89cfba8f::before,\n.LuiCheckboxInput_LuiCheckboxInput_IsChecked__89cfba8f.LuiCheckboxInput_LuiCheckboxInput_IsDisabled__89cfba8f .LuiCheckboxInput_LuiCheckboxInputLabel__89cfba8f::before {\n  color: white;\n  background-color: #989189;\n  border-color: #989189;\n}\n\n.LuiCheckboxInput_LuiCheckboxInput_Inline__89cfba8f {\n  display: inline-block;\n}\n.LuiCheckboxInput_LuiCheckboxInput_Inline__89cfba8f: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
 
@@ -1127,38 +910,585 @@ var ICON_SIZES = {
   xl: 'LuiIcon--xl',
   ns: 'LuiIcon--noSize'
 };
-var ICON_STATUS = {
-  none: '',
-  error: 'LuiIcon--error',
-  warning: 'LuiIcon--warning',
-  success: 'LuiIcon--success',
-  interactive: 'LuiIcon--interactive',
-  disabled: 'LuiIcon--disabled'
+var ICON_STATUS = {
+  none: '',
+  error: 'LuiIcon--error',
+  warning: 'LuiIcon--warning',
+  success: 'LuiIcon--success',
+  interactive: 'LuiIcon--interactive',
+  disabled: 'LuiIcon--disabled'
+};
+var LuiIcon = function LuiIcon(_ref) {
+  var name = _ref.name,
+      className = _ref.className,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'ns' : _ref$size,
+      title = _ref.title,
+      alt = _ref.alt,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? 'none' : _ref$status,
+      spanProps = _ref.spanProps;
+  var iconSVG = ICONS[name];
+
+  if (!iconSVG) {
+    console.warn("No icon found for: " + iconSVG);
+    return null;
+  }
+
+  return createElement("span", Object.assign({
+    className: clsx('LuiIcon', className, size && ICON_SIZES[size], status && ICON_STATUS[status]),
+    "data-icon": name,
+    title: title,
+    "aria-label": alt
+  }, 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__4692690f {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: 600;\n  font-size: 14px;\n  line-height: 24px;\n}\n.LuiError_LuiErrorErrorIcon__4692690f {\n  vertical-align: middle;\n  display: inline-block;\n}\n.LuiError_LuiErrorErrorText__4692690f {\n  margin-left: 0.5rem;\n}";
+n(css$1,{});
+
+var LuiError = function LuiError(_ref) {
+  var error = _ref.error,
+      className = _ref.className;
+  return React__default.createElement("div", {
+    className: "LuiError " + className + "-error"
+  }, React__default.createElement(LuiIcon, {
+    className: "LuiError-errorIcon " + className + "-errorIcon",
+    alt: 'Error',
+    name: "ic_error",
+    size: "md",
+    status: "error"
+  }), error && React__default.createElement("span", {
+    className: "LuiError-errorText " + className + "-errorText"
+  }, 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__e438043f {\n  margin-bottom: 24px;\n}\n.LuiTextInput_LuiTextInputLabel__e438043f {\n  display: block;\n  margin-bottom: 6px;\n  color: #000000;\n  text-align: left;\n}\n.LuiTextInput_isDisabled__e438043f .LuiTextInput_LuiTextInputLabel__e438043f {\n  color: #b2b2b2;\n}\n\n.LuiTextInput_LuiTextInputInputWrapper__e438043f {\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__e438043f .LuiTextInput_LuiTextInputInputWrapper__e438043f {\n  box-shadow: -8px 0px 0 0 #cc0000;\n  border-radius: 4px;\n}\n\n.LuiTextInput_LuiTextInputPasswordReveal__e438043f {\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__e438043f:hover {\n  background: transparent;\n}\n\n.LuiTextInput_LuiTextInputInput__e438043f {\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__e438043f:hover, .LuiTextInput_LuiTextInputInput__e438043f:active {\n  border-color: #053d52;\n}\n.LuiTextInput_LuiTextInputInput__e438043f:focus {\n  outline: none;\n  border-color: #053d52;\n}\n.LuiTextInput_LuiTextInputInput__e438043f::placeholder {\n  font-weight: normal;\n  color: #666666;\n  opacity: 1;\n}\n.LuiTextInput_isDisabled__e438043f .LuiTextInput_LuiTextInputInput__e438043f::placeholder {\n  color: #b2b2b2;\n}\n.LuiTextInput_hasError__e438043f .LuiTextInput_LuiTextInputInput__e438043f {\n  border-color: #cc0000 !important;\n}\n.LuiTextInput_isDisabled__e438043f .LuiTextInput_LuiTextInputInput__e438043f {\n  border-color: #b2b2b2;\n  background-color: #fff;\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n.LuiTextInput_LuiTextInputError__e438043f {\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__e438043f {\n  position: absolute;\n  left: 0;\n  top: 2px;\n}\n\n.LuiTextInput_LuiFieldWrapper__e438043f {\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__e438043f input {\n  transition: border 0.2s ease;\n}\n.LuiTextInput_LuiFieldWrapper__e438043f.LuiTextInput_LuiFieldWrapper_Error__e438043f {\n  box-shadow: -12px 0px 0 0 #cc0000;\n  border-radius: 4px;\n}\n.LuiTextInput_LuiFieldWrapper__e438043f.LuiTextInput_LuiFieldWrapper_Error__e438043f input {\n  border-color: #cc0000;\n}";
+n(css$2,{});
+
+function useGenerateOrDefaultId(idFromProps) {
+  var _useState = useState(idFromProps ? idFromProps : v4()),
+      id = _useState[0];
+
+  return id;
+}
+var LuiTextInput = function LuiTextInput(props) {
+  var _props$inputProps;
+
+  var id = useGenerateOrDefaultId((_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.id);
+  return React__default.createElement("div", {
+    className: clsx('LuiTextInput', props.error ? 'LuiTextInput-error' : '')
+  }, React__default.createElement("label", {
+    className: 'LuiTextInput-label',
+    htmlFor: id
+  }, React__default.createElement("span", {
+    className: clsx(props.hideLabel ? 'LuiScreenReadersOnly' : '')
+  }, props.label), React__default.createElement("span", {
+    className: "LuiTextInput-inputWrapper"
+  }, React__default.createElement("input", Object.assign({
+    type: 'text',
+    className: clsx('LuiTextInput-input'),
+    min: "0",
+    value: props.value,
+    onChange: props.onChange
+  }, props.inputProps, {
+    id: id
+  }))), props.error && React__default.createElement("span", {
+    className: "LuiTextInput-error"
+  }, React__default.createElement(LuiIcon, {
+    alt: "error",
+    name: "ic_error",
+    className: "LuiTextInput-error-icon",
+    size: "sm",
+    status: "error"
+  }), props.error)));
+};
+
+var LuiCheckboxInput = function LuiCheckboxInput(props) {
+  var _props$inputProps;
+
+  var id = useGenerateOrDefaultId((_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.id);
+  return React__default.createElement("div", {
+    className: clsx('LuiCheckboxInput', {
+      'LuiCheckboxInput--isChecked': props.isChecked,
+      'LuiCheckboxInput--hasError': !!props.error
+    })
+  }, React__default.createElement("label", {
+    htmlFor: id,
+    className: "LuiCheckboxInput-group"
+  }, React__default.createElement("input", Object.assign({
+    className: clsx('LuiCheckboxInput-input'),
+    id: id,
+    type: "checkbox",
+    value: props.value,
+    onChange: props.onChange,
+    checked: props.isChecked,
+    disabled: props.isDisabled
+  }, props.inputProps)), React__default.createElement("span", {
+    className: "LuiCheckboxInput-label"
+  }, props.label)), props.error && React__default.createElement(LuiError, {
+    className: "LuiCheckboxInput",
+    error: props.error
+  }));
+};
+
+var LuiFileInputBox = function LuiFileInputBox(props) {
+  var _useState = useState(),
+      file = _useState[0],
+      setFile = _useState[1];
+
+  var _useState2 = useState(false),
+      hasFileFormatError = _useState2[0],
+      setHasFileFormatError = _useState2[1];
+
+  var onChange = function onChange(e) {
+    // Logic to go here to check extensions and setHasFileFormatError
+    setHasFileFormatError(false);
+    var files = e.target.files; // File upload box is configured to only accept 1 file, we can't have more than one here
+
+    if (files && files.length === 1) {
+      var selectedFile = files[0];
+      var supportedFileTypes = props.acceptedExtensions.map(function (ext) {
+        return ext.toUpperCase();
+      });
+      var fileName = selectedFile.name;
+
+      if (!supportedFileTypes.includes(getFileNameExtension(fileName))) {
+        setHasFileFormatError(true);
+        setFile(undefined);
+      } else {
+        setFile(selectedFile);
+        props.onValidFileSelected(selectedFile);
+      }
+    }
+  };
+
+  var FileFormatErrorDetails = function FileFormatErrorDetails() {
+    return React__default.createElement("div", {
+      className: "LuiFileInputBox-upload-container"
+    }, React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: 'LuiFileInputBox-upload-icon-error'
+    }, React__default.createElement(LuiIcon, {
+      name: "ic_error_outline",
+      size: 'ns',
+      alt: "Error"
+    })), props.customFileErrorMessage ? React__default.createElement("p", null, props.customFileErrorMessage) : React__default.createElement("p", {
+      className: "LuiFileInputBox-upload-text"
+    }, "You must select a file with extension of", ' ', extensionsAsHumanReadableList(props.acceptedExtensions), ".")));
+  };
+
+  var hasError = hasFileFormatError || props.showMustSelectFileError === true;
+  return React__default.createElement("div", {
+    className: clsx('LuiFileInputBox-upload', hasError && 'LuiFileInputBox-upload-error'),
+    style: {
+      width: props.width || 320,
+      height: props.height || 320
+    }
+  }, React__default.createElement("input", {
+    role: "button",
+    "aria-label": "File Upload",
+    type: "file",
+    className: "LuiFileInputBox-upload-input",
+    accept: props.acceptedExtensions.map(function (extension) {
+      return "." + extension;
+    }).join(','),
+    onChange: onChange
+  }), React__default.createElement(React__default.Fragment, null, hasError ? React__default.createElement(FileFormatErrorDetails, null) : React__default.createElement(FileUploadInfo, {
+    fileName: file == null ? void 0 : file.name,
+    fileFormatText: props.fileFormatText,
+    fileDescription: props.fileDescription
+  })));
+}; // Only exported for chromatic
+
+var FileUploadInfo = function FileUploadInfo(props) {
+  var DragAndDropInstruction = function DragAndDropInstruction() {
+    return React__default.createElement("p", {
+      className: "LuiFileInputBox-upload-text"
+    }, "Drag and drop your ", props.fileDescription, " into the box", React__default.createElement("br", null), React__default.createElement("span", null, "(or upload file manually)"));
+  };
+
+  var WaitingForFileSelection = function WaitingForFileSelection() {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: 'LuiFileInputBox-upload-icon-upload'
+    }, React__default.createElement(LuiIcon, {
+      name: "ic_publish",
+      size: 'ns',
+      alt: "Upload"
+    })), React__default.createElement(DragAndDropInstruction, null), props.fileFormatText && React__default.createElement("p", {
+      className: "LuiFileInputBox-upload-text LuiFileInputBox-upload-text-no-padding"
+    }, props.fileFormatText));
+  };
+
+  var UploadSuccess = function UploadSuccess() {
+    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
+      className: 'LuiFileInputBox-upload-icon-success'
+    }, React__default.createElement(LuiIcon, {
+      name: "ic_check_circle_outline",
+      size: 'ns',
+      alt: "Success"
+    })), React__default.createElement("p", {
+      className: "LuiFileInputBox-upload-file-name"
+    }, props.fileName), React__default.createElement(DragAndDropInstruction, null));
+  };
+
+  return React__default.createElement("div", {
+    className: "LuiFileInputBox-upload-container"
+  }, props.fileName ? React__default.createElement(UploadSuccess, null) : React__default.createElement(WaitingForFileSelection, null));
+};
+/**
+ * Get the extension from a filename in upper-case.
+ *
+ * @param fileName File-name to get extension from.
+ * @return fileName extension in upper-case if found else empty string.
+ */
+
+var getFileNameExtension = function getFileNameExtension(fileName) {
+  var idx = fileName.lastIndexOf('.');
+  return idx === -1 ? '' : fileName.substr(idx + 1).toUpperCase();
+};
+/**
+ * Convert an array of extensions to a human readable string in upper-case.
+ * e.g. JPG, TIFF or BMP.
+ *
+ * @param extensions List of extensions to convert.
+ * @return Extensions in a human readable string in upper-case.
+ */
+
+var extensionsAsHumanReadableList = function extensionsAsHumanReadableList(extensions) {
+  var uppercaseExtensions = extensions.map(function (extension) {
+    return extension.toUpperCase();
+  });
+  if (!extensions.length) return '';
+  if (extensions.length === 1) return uppercaseExtensions[0];
+  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__42744a23 {\n  margin-bottom: 24px;\n}\n\n.LuiSelectInput_LuiSelectLabelText__42744a23 {\n  display: block;\n  margin-bottom: 6px;\n  color: #000000;\n  text-align: left;\n}\n.LuiSelectInput_isDisabled__42744a23 .LuiSelectInput_LuiSelectLabelText__42744a23 {\n  color: #b2b2b2;\n}\n\n.LuiSelectInput_LuiSelectSelect__42744a23 {\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__42744a23:hover, .LuiSelectInput_LuiSelectSelect__42744a23:active {\n  border-color: #053d52;\n  cursor: pointer;\n}\n.LuiSelectInput_LuiSelectSelect__42744a23:focus {\n  outline: none;\n  border-color: #053d52;\n}\n.LuiSelectInput_hasError__42744a23 .LuiSelectInput_LuiSelectSelect__42744a23 {\n  border-color: #eb5757;\n}\n.LuiSelectInput_isDisabled__42744a23 .LuiSelectInput_LuiSelectSelect__42744a23 {\n  border-color: #b2b2b2;\n  background-color: #fff;\n  color: #b2b2b2;\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n.LuiSelectInput_hasPlaceholder__42744a23 .LuiSelectInput_LuiSelectSelect__42744a23 {\n  color: #b2b2b2;\n}\n.LuiSelectInput_hasValue__42744a23 .LuiSelectInput_LuiSelectSelect__42744a23 {\n  color: #2a292c;\n}\n\n.LuiSelectInput_LuiSelectWrapper__42744a23 {\n  position: relative;\n  max-width: 300px;\n}\n\n.LuiSelectInput_LuiSelectChevronIcon__42744a23 {\n  position: absolute;\n  right: 16px;\n  top: 50%;\n  transform: translateY(-50%);\n  pointer-events: none;\n}\n\n.LuiSelectInput_LuiSelectError__42744a23 {\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__42744a23 {\n  position: absolute;\n  left: 0;\n  top: 2px;\n}";
+n(css$3,{});
+
+var LuiSelectInput = function LuiSelectInput(props) {
+  var _props$selectProps;
+
+  var id = useGenerateOrDefaultId((_props$selectProps = props.selectProps) == null ? void 0 : _props$selectProps.id);
+  return React__default.createElement("div", {
+    className: 'LuiSelect'
+  }, React__default.createElement("label", {
+    htmlFor: id,
+    className: "LuiSelect-label"
+  }, React__default.createElement("span", {
+    className: clsx('LuiSelect-label-text', props.hideLabel ? 'LuiScreenReadersOnly' : '')
+  }, props.label), React__default.createElement("div", {
+    className: "LuiSelect-wrapper"
+  }, React__default.createElement("select", Object.assign({
+    name: id,
+    onChange: props.onChange,
+    value: props.value,
+    className: "LuiSelect-select"
+  }, props.selectProps), props.placeholderText && React__default.createElement("option", {
+    value: "",
+    disabled: true
+  }, props.placeholderText), props.options.map(function (selection) {
+    return React__default.createElement("option", {
+      key: selection.value,
+      value: selection.value
+    }, selection.label);
+  })), React__default.createElement(LuiIcon, {
+    alt: 'Error',
+    name: "ic_arrow_drop_down",
+    className: "LuiSelect-chevron-icon",
+    size: "sm"
+  })), props.error && React__default.createElement("span", {
+    className: "LuiSelect-error"
+  }, React__default.createElement(LuiIcon, {
+    alt: 'Error',
+    name: "ic_error",
+    className: "LuiSelect-error-icon",
+    size: "sm",
+    status: "error"
+  }), 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__f628aa46 {\n  width: 100%;\n  margin-bottom: 24px;\n  position: relative;\n}\n.LuiTextAreaInput_LuiTextAreaInput__f628aa46 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__f628aa46 textarea {\n  font-size: 14px;\n}\n@media screen and (min-width: 1px) {\n  .LuiTextAreaInput_LuiTextAreaInput__f628aa46 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__f628aa46 textarea {\n    font-size: 16px;\n  }\n}\n.LuiTextAreaInput_LuiTextAreaInput__f628aa46 textarea:focus {\n  outline: none;\n  border-color: #053d52;\n}\n.LuiTextAreaInput_LuiTextAreaInput__f628aa46 label,\n.LuiTextAreaInput_LuiTextAreaInput__f628aa46 textarea {\n  display: block;\n}\n.LuiTextAreaInput_LuiTextAreaInput__f628aa46.LuiTextAreaInput_hasError__f628aa46 textarea,\n.LuiTextAreaInput_LuiTextAreaInput__f628aa46.LuiTextAreaInput_hasError__f628aa46 select {\n  border-color: #eb5757;\n}\n.LuiTextAreaInput_LuiTextAreaInput__f628aa46.LuiTextAreaInput_isDisabled__f628aa46 textarea {\n  border-color: #b2b2b2;\n  background-color: #fff;\n  cursor: not-allowed;\n  opacity: 0.3;\n}\n.LuiTextAreaInput_LuiTextAreaInput__f628aa46.LuiTextAreaInput_isDisabled__f628aa46 label {\n  opacity: 0.3;\n}\n\n.LuiTextAreaInput_LuiTextAreaInputLabel__f628aa46 {\n  font-family: \"Open Sans\", system-ui, sans-serif;\n  font-style: normal;\n  font-weight: 700;\n  display: block;\n  font-size: 14px;\n  line-height: 1.25;\n  margin-bottom: 6px;\n  color: #000;\n  text-align: left;\n}\n\n.LuiTextAreaInput_LuiTextAreaInputError__f628aa46 {\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__f628aa46 {\n  position: absolute;\n  left: 0;\n  top: 2px;\n}";
+n(css$4,{});
+
+var LuiTextAreaInput = function LuiTextAreaInput(props) {
+  var _props$inputProps;
+
+  var id = useGenerateOrDefaultId((_props$inputProps = props.inputProps) == null ? void 0 : _props$inputProps.id);
+  return React__default.createElement("div", {
+    className: clsx('LuiTextAreaInput')
+  }, React__default.createElement("label", {
+    htmlFor: id
+  }, React__default.createElement("span", {
+    className: "LuiTextAreaInput-label"
+  }, props.label), React__default.createElement("textarea", Object.assign({
+    id: id,
+    value: props.value,
+    onChange: props.onChange,
+    rows: 5
+  }, props.inputProps))), props.error && React__default.createElement("span", {
+    className: "LuiTextAreaInput-error"
+  }, React__default.createElement(LuiIcon, {
+    alt: "error",
+    name: "ic_error",
+    className: "LuiTextAreaInput-error-icon",
+    size: "sm",
+    status: "error"
+  }), props.error));
+};
+
+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'
+  }, 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 isDisabled = props.isOptionDisabled && props.isOptionDisabled(index);
+    return React__default.createElement("div", {
+      className: clsx('LuiRadioInput-option', {
+        isDisabled: isDisabled
+      }),
+      key: radioId
+    }, React__default.createElement("label", {
+      htmlFor: radioId,
+      className: "LuiRadioInput-option-label",
+      key: radioId
+    }, React__default.createElement("input", Object.assign({
+      disabled: isDisabled,
+      className: "LuiRadioInput-option-button",
+      type: "radio",
+      id: radioId,
+      name: option,
+      value: option,
+      checked: isChecked,
+      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"
+  }, React__default.createElement(LuiIcon, {
+    alt: 'error',
+    name: "ic_error",
+    size: "sm",
+    status: "error"
+  }), React__default.createElement("span", null, props.error)));
+};
+
+function LuiFormikCheckbox(props) {
+  var ctx = useFormikContext();
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(Field, {
+    name: props.name
+  }, function (_ref) {
+    var field = _ref.field;
+    var showError = getIn(ctx == null ? void 0 : ctx.errors, props.name);
+    return React__default.createElement("div", {
+      className: clsx(showError && 'lui-input-error')
+    }, React__default.createElement("div", {
+      className: "lui-input-group-wrapper "
+    }, showError && React__default.createElement("i", {
+      className: "lui-form-status-icon material-icons-round"
+    }, "error"), React__default.createElement("div", {
+      className: clsx('lui-checkbox-container', props.className)
+    }, React__default.createElement("input", Object.assign({}, props.inputProps, {
+      type: "checkbox",
+      id: props.value,
+      disabled: !!props.disabled,
+      checked: field.value
+    }, field)), typeof props.label === 'string' ? React__default.createElement("label", {
+      htmlFor: props.value
+    }, props.label) : props.label)));
+  }));
+}
+
+var LuiFormikFormLabel = function LuiFormikFormLabel(props) {
+  return React__default.createElement("div", {
+    className: clsx('LuiFormLabel-wrapper', props.className && "" + props.className)
+  }, props.children, React__default.createElement("label", {
+    className: "LuiFormLabel",
+    htmlFor: props["for"]
+  }, props.required && React__default.createElement("span", {
+    className: "lui-required-input-icon"
+  }, "*"), props.label), props.tooltip && React__default.createElement("i", {
+    className: "material-icons-round"
+  }, "help"));
+};
+
+var LuiFormikTextInput = /*#__PURE__*/connect(function (props) {
+  var error = getIn(props.formik.errors, props.name);
+  var touch = getIn(props.formik.touched, props.name);
+  var showError = touch && error;
+
+  var _useFormikContext = useFormikContext(),
+      setFieldValue = _useFormikContext.setFieldValue;
+
+  var multiLineToggle = function multiLineToggle(field) {
+    return !props.multiLine ? React__default.createElement("input", Object.assign({
+      id: props.name,
+      "data-testid": props.name
+    }, field, {
+      type: "text"
+    }, props.inputProps, {
+      onChange: function onChange(event) {
+        var _props$validateOnChan;
+
+        setFieldValue(props.name, event.target.value, (_props$validateOnChan = props.validateOnChange) != null ? _props$validateOnChan : true);
+
+        if (props.onValueChange) {
+          props.onValueChange({
+            value: event.target.value,
+            formik: props.formik
+          });
+        }
+      }
+    })) : React__default.createElement("textarea", Object.assign({
+      id: props.name,
+      "data-testid": props.name
+    }, field, {
+      rows: 1
+    }, props.inputProps, {
+      onChange: function onChange(event) {
+        var _props$validateOnChan2;
+
+        setFieldValue(props.name, event.target.value, (_props$validateOnChan2 = props.validateOnChange) != null ? _props$validateOnChan2 : true);
+
+        if (props.onValueChange) {
+          props.onValueChange({
+            value: event.target.value,
+            formik: props.formik
+          });
+        }
+      }
+    }));
+  };
+
+  return React__default.createElement("div", {
+    className: clsx(props.className && "" + props.className)
+  }, props.label && React__default.createElement(LuiFormikFormLabel, {
+    required: props.required,
+    label: props.label,
+    "for": props.name,
+    tooltip: props.tooltip
+  }), props.helperInfo, React__default.createElement(Field, {
+    name: props.name,
+    validate: props.validate
+  }, function (_ref) {
+    var field = _ref.field;
+    return React__default.createElement("div", {
+      className: clsx(showError && 'lui-input-error')
+    }, React__default.createElement(ErrorMessage, {
+      name: props.name,
+      render: function render() {
+        return React__default.createElement("i", {
+          className: "lui-form-status-icon material-icons-round"
+        }, "error");
+      }
+    }), multiLineToggle(field), React__default.createElement(ErrorMessage, {
+      name: props.name,
+      className: 'lui-error-msg',
+      component: "p"
+    }));
+  }));
+});
+
+var LuiFormikRadioButton = function LuiFormikRadioButton(props) {
+  var _useField = useField(props),
+      field = _useField[0],
+      meta = _useField[1];
+
+  return React__default.createElement("div", {
+    className: props.className
+  }, meta.touched && meta.error && React__default.createElement("i", {
+    className: "lui-form-status-icon material-icons-round"
+  }, "error"), React__default.createElement("div", {
+    className: 'lui-radio-container'
+  }, React__default.createElement("input", Object.assign({
+    disabled: !!props.disabled
+  }, field, {
+    checked: props.value === field.value,
+    value: props.value,
+    id: props.value,
+    type: "radio"
+  }, props.inputProps)), React__default.createElement("label", {
+    htmlFor: props.value
+  }, props.label)));
+};
+
+var LuiFormikRadioGroup = function LuiFormikRadioGroup(props) {
+  var ctx = useFormikContext();
+  var error = getIn(ctx.errors, props.name);
+  var touch = getIn(ctx.touched, props.name);
+  var showError = touch && error;
+  var describedby = props.hint && camelcase(props == null ? void 0 : props.hint) + 'Id';
+  var errorDescribedBy = error && camelcase(error) + 'Id';
+  return React__default.createElement("div", {
+    className: clsx('lui-fieldsetBlock-form-group', showError && 'lui-input-error')
+  }, React__default.createElement("fieldset", {
+    "aria-describedby": clsx(props.hint && describedby + 'Id', showError && errorDescribedBy)
+  }, React__default.createElement("legend", null, props.required && React__default.createElement("span", {
+    className: "lui-required-input-icon"
+  }, "*"), props.legend), showError && React__default.createElement("p", {
+    id: errorDescribedBy
+  }, React__default.createElement("span", {
+    className: "LuiScreenReadersOnly"
+  }, " Error: "), error), props.hint && React__default.createElement("p", {
+    className: "lui-fieldset-support-txt small",
+    id: describedby
+  }, props.hint), React__default.createElement("div", {
+    className: "lui-input-group-wrapper"
+  }, props.children)));
 };
-var LuiIcon = function LuiIcon(_ref) {
-  var name = _ref.name,
-      className = _ref.className,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 'ns' : _ref$size,
-      title = _ref.title,
-      alt = _ref.alt,
-      _ref$status = _ref.status,
-      status = _ref$status === void 0 ? 'none' : _ref$status,
-      spanProps = _ref.spanProps;
-  var iconSVG = ICONS[name];
 
-  if (!iconSVG) {
-    console.warn("No icon found for: " + iconSVG);
-    return null;
-  }
+var LuiFormikFormSubmitButton = /*#__PURE__*/connect(function (props) {
+  return React__default.createElement(LuiButton, {
+    type: "submit",
+    className: props.className,
+    level: "primary",
+    "data-testid": props['data-testid'],
+    disabled: !!props.disabled
+  }, props.children);
+});
 
-  return createElement("span", Object.assign({
-    className: clsx('LuiIcon', className, size && ICON_SIZES[size], status && ICON_STATUS[status]),
-    "data-icon": name,
-    title: title,
-    "aria-label": alt
-  }, spanProps), iconSVG);
-};
+var LuiFormikSelect = /*#__PURE__*/connect(function (props) {
+  var error = getIn(props.formik.errors, props.name);
+  var touch = getIn(props.formik.touched, props.name);
+  var showError = touch && error;
+  return React__default.createElement("div", {
+    className: props.className
+  }, props.label && React__default.createElement(LuiFormikFormLabel, {
+    className: 'lui-margin-bottom-xxs',
+    "for": props.name,
+    label: props.label,
+    required: !!props.required,
+    tooltip: props.tooltip
+  }), props.helperInfo, React__default.createElement("div", {
+    className: clsx('lui-input-wrapper', showError && 'lui-input-error')
+  }, React__default.createElement(ErrorMessage, {
+    name: props.name,
+    render: function render() {
+      return React__default.createElement("i", {
+        className: "lui-form-status-icon material-icons-round"
+      }, "error");
+    }
+  }), React__default.createElement(Field, Object.assign({
+    disabled: props.disabled,
+    defaultValue: props.defaultValue,
+    name: props.name,
+    id: props.name,
+    validate: props.validate,
+    as: "select"
+  }, props.inputProps), props.children), React__default.createElement(ErrorMessage, {
+    name: props.name,
+    className: 'lui-error-msg',
+    component: "p"
+  })));
+});
 
 var LuiBearingInput = function LuiBearingInput(props) {
   var maxDecimal = 1;
@@ -4659,9 +4989,9 @@ function isChromatic() {
   return !!(window.navigator.userAgent.match(/Chromatic/) || window.location.href.match(/chromatic=true/));
 }
 
-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}";
+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 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$4,{});
+n(css$5,{});
 
 /**
  * A wrapper around React Select with Lui styling
@@ -6865,137 +7195,6 @@ var LuiTooltip = function LuiTooltip(props) {
   }, children);
 };
 
-var LuiFileInputBox = function LuiFileInputBox(props) {
-  var _useState = useState(),
-      file = _useState[0],
-      setFile = _useState[1];
-
-  var _useState2 = useState(false),
-      hasFileFormatError = _useState2[0],
-      setHasFileFormatError = _useState2[1];
-
-  var onChange = function onChange(e) {
-    // Logic to go here to check extensions and setHasFileFormatError
-    setHasFileFormatError(false);
-    var files = e.target.files; // File upload box is configured to only accept 1 file, we can't have more than one here
-
-    if (files && files.length === 1) {
-      var selectedFile = files[0];
-      var supportedFileTypes = props.acceptedExtensions.map(function (ext) {
-        return ext.toUpperCase();
-      });
-      var fileName = selectedFile.name;
-
-      if (!supportedFileTypes.includes(getFileNameExtension(fileName))) {
-        setHasFileFormatError(true);
-        setFile(undefined);
-      } else {
-        setFile(selectedFile);
-        props.onValidFileSelected(selectedFile);
-      }
-    }
-  };
-
-  var FileFormatErrorDetails = function FileFormatErrorDetails() {
-    return React__default.createElement("div", {
-      className: "LuiFileInputBox-upload-container"
-    }, React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: 'LuiFileInputBox-upload-icon-error'
-    }, React__default.createElement(LuiIcon, {
-      name: "ic_error_outline",
-      size: 'ns',
-      alt: "Error"
-    })), props.customFileErrorMessage ? React__default.createElement("p", null, props.customFileErrorMessage) : React__default.createElement("p", {
-      className: "LuiFileInputBox-upload-text"
-    }, "You must select a file with extension of", ' ', extensionsAsHumanReadableList(props.acceptedExtensions), ".")));
-  };
-
-  var hasError = hasFileFormatError || props.showMustSelectFileError === true;
-  return React__default.createElement("div", {
-    className: clsx('LuiFileInputBox-upload', hasError && 'LuiFileInputBox-upload-error'),
-    style: {
-      width: props.width || 320,
-      height: props.height || 320
-    }
-  }, React__default.createElement("input", {
-    role: "button",
-    "aria-label": "File Upload",
-    type: "file",
-    className: "LuiFileInputBox-upload-input",
-    accept: props.acceptedExtensions.map(function (extension) {
-      return "." + extension;
-    }).join(','),
-    onChange: onChange
-  }), React__default.createElement(React__default.Fragment, null, hasError ? React__default.createElement(FileFormatErrorDetails, null) : React__default.createElement(FileUploadInfo, {
-    fileName: file == null ? void 0 : file.name,
-    fileFormatText: props.fileFormatText,
-    fileDescription: props.fileDescription
-  })));
-}; // Only exported for chromatic
-
-var FileUploadInfo = function FileUploadInfo(props) {
-  var DragAndDropInstruction = function DragAndDropInstruction() {
-    return React__default.createElement("p", {
-      className: "LuiFileInputBox-upload-text"
-    }, "Drag and drop your ", props.fileDescription, " into the box", React__default.createElement("br", null), React__default.createElement("span", null, "(or upload file manually)"));
-  };
-
-  var WaitingForFileSelection = function WaitingForFileSelection() {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: 'LuiFileInputBox-upload-icon-upload'
-    }, React__default.createElement(LuiIcon, {
-      name: "ic_publish",
-      size: 'ns',
-      alt: "Upload"
-    })), React__default.createElement(DragAndDropInstruction, null), props.fileFormatText && React__default.createElement("p", {
-      className: "LuiFileInputBox-upload-text LuiFileInputBox-upload-text-no-padding"
-    }, props.fileFormatText));
-  };
-
-  var UploadSuccess = function UploadSuccess() {
-    return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-      className: 'LuiFileInputBox-upload-icon-success'
-    }, React__default.createElement(LuiIcon, {
-      name: "ic_check_circle_outline",
-      size: 'ns',
-      alt: "Success"
-    })), React__default.createElement("p", {
-      className: "LuiFileInputBox-upload-file-name"
-    }, props.fileName), React__default.createElement(DragAndDropInstruction, null));
-  };
-
-  return React__default.createElement("div", {
-    className: "LuiFileInputBox-upload-container"
-  }, props.fileName ? React__default.createElement(UploadSuccess, null) : React__default.createElement(WaitingForFileSelection, null));
-};
-/**
- * Get the extension from a filename in upper-case.
- *
- * @param fileName File-name to get extension from.
- * @return fileName extension in upper-case if found else empty string.
- */
-
-var getFileNameExtension = function getFileNameExtension(fileName) {
-  var idx = fileName.lastIndexOf('.');
-  return idx === -1 ? '' : fileName.substr(idx + 1).toUpperCase();
-};
-/**
- * Convert an array of extensions to a human readable string in upper-case.
- * e.g. JPG, TIFF or BMP.
- *
- * @param extensions List of extensions to convert.
- * @return Extensions in a human readable string in upper-case.
- */
-
-var extensionsAsHumanReadableList = function extensionsAsHumanReadableList(extensions) {
-  var uppercaseExtensions = extensions.map(function (extension) {
-    return extension.toUpperCase();
-  });
-  if (!extensions.length) return '';
-  if (extensions.length === 1) return uppercaseExtensions[0];
-  return uppercaseExtensions.slice(0, -1).join(', ') + " or " + uppercaseExtensions[extensions.length - 1];
-};
-
 /**
  * This hook will callback with handleClickOutside() when "mousedown" dom event occurs off the refElement
  * usage:
@@ -7026,5 +7225,5 @@ function useClickedOutsideElement(refElement, handleClickOutside) {
   }, []);
 }
 
-export { FIRM_KEY, FIRM_NAME_KEY, GLOBAL_CLIENT_REFERENCE_KEY, LOLActiveFirmMessage, LOLAuthorisedLink, LOLCommonDrawerMenu, LOLCommonDrawerMenuAfterLinks, LOLDrawerMenu, LOLFirmSwitcherMenu, LOLGlobalClientRefContext, LOLGlobalClientRefContextProvider, LOLLogoutLink, LOLUserContext, LOLUserContextProvider, LOLUserLastLogin, LuiAlertModal, LuiAlertModalButtons, LuiBanner, LuiBannerContent, LuiBearingFormikInput, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuItem, LuiComboSelect, LuiControlledMenu, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuOption, LuiDrawerMenuOptions, LuiDrawerMenuSection, LuiDropdownMenu, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFooter, LuiFormikCheckbox, LuiFormikForm, LuiFormikFormLabel, LuiFormikFormSubmitButton, LuiFormikRadioButton, LuiFormikRadioGroup, LuiFormikSelect, LuiFormikTextInput, LuiHeader, LuiHeaderMenuItem, LuiIcon, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuDivider, LuiMenuHeader, LuiMenuItem, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiStaticMessage, LuiStatusSpinner, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, useClickedOutsideElement, useLOLGlobalClientRefContext, useLOLUserContext, useShowLUIMessage };
+export { FIRM_KEY, FIRM_NAME_KEY, GLOBAL_CLIENT_REFERENCE_KEY, LOLActiveFirmMessage, LOLAuthorisedLink, LOLCommonDrawerMenu, LOLCommonDrawerMenuAfterLinks, LOLDrawerMenu, LOLFirmSwitcherMenu, LOLGlobalClientRefContext, LOLGlobalClientRefContextProvider, LOLLogoutLink, LOLUserContext, LOLUserContextProvider, LOLUserLastLogin, LuiAlertModal, LuiAlertModalButtons, LuiBanner, LuiBannerContent, LuiBearingFormikInput, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuItem, LuiComboSelect, LuiControlledMenu, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuOption, LuiDrawerMenuOptions, LuiDrawerMenuSection, LuiDropdownMenu, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFooter, LuiFormikCheckbox, LuiFormikForm, LuiFormikFormLabel, LuiFormikFormSubmitButton, LuiFormikRadioButton, LuiFormikRadioGroup, LuiFormikSelect, LuiFormikTextInput, LuiHeader, LuiHeaderMenuItem, LuiIcon, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuDivider, LuiMenuHeader, LuiMenuItem, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiRadioInput, LuiSelectInput, LuiStaticMessage, LuiStatusSpinner, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, useClickedOutsideElement, useLOLGlobalClientRefContext, useLOLUserContext, useShowLUIMessage };
 //# sourceMappingURL=lui.esm.js.map