@linzjs/lui 10.11.0 → 10.11.4

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## [10.11.4](https://github.com/linz/lui/compare/v10.11.3...v10.11.4) (2021-12-05)
+
+
+### Bug Fixes
+
+* CHangelog rolled back ([#479](https://github.com/linz/lui/issues/479)) ([e3af886](https://github.com/linz/lui/commit/e3af8867a80dcdc996d7e7b31be872b266a0a584))
+
+## [10.11.3](https://github.com/linz/lui/compare/v10.11.2...v10.11.3) (2021-11-29)
+
+
+### Bug Fixes
+
+* make story book a dev dependency so its not force on lui's dependants ([#475](https://github.com/linz/lui/issues/475)) ([4e1d67d](https://github.com/linz/lui/commit/4e1d67db4c8e1ca62eeee29a6dc7c5aae88367d5))
+
+## [10.11.2](https://github.com/linz/lui/compare/v10.11.1...v10.11.2) (2021-11-19)
+
+
+### Bug Fixes
+
+* Adds LuiIcon Import scss ([#472](https://github.com/linz/lui/issues/472)) ([5e69e4b](https://github.com/linz/lui/commit/5e69e4b2365dfb68366d9ded8c490fdc89ee5661))
+
+## [10.11.1](https://github.com/linz/lui/compare/v10.11.0...v10.11.1) (2021-11-17)
+
+
+### Bug Fixes
+
+* LuiComboSelect now styled appropriately everywhere ([#471](https://github.com/linz/lui/issues/471)) ([17a36db](https://github.com/linz/lui/commit/17a36db7eff91e579efbf513db16f3404ce76f09))
+
 # [10.11.0](https://github.com/linz/lui/compare/v10.10.0...v10.11.0) (2021-11-15)
 
 

package/README.md

@@ -1,6 +1,6 @@
 # Lui - Linz User Interface
 
->It's written in CSS and has a React wrapper!
+> It's written in CSS and has a React wrapper!
 >
 > ## You do not need to be using React to use Lui
 >
@@ -11,7 +11,8 @@
 [![npm version](https://badge.fury.io/js/%40linzjs%2Flui.svg)](https://badge.fury.io/js/%40linzjs%2Flui)
 
 ![https://en.wikipedia.org/wiki/Onychophora](lui-worm.png)
-> Lui *[Onychophora](https://en.wikipedia.org/wiki/Onychophora)*, the happy UI worm!
+
+> Lui _[Onychophora](https://en.wikipedia.org/wiki/Onychophora)_, the happy UI worm!
 
 Nomenclature: Lui is a backronym for Linz User Interface. Lui the library, is named after Lui the worm.
 
@@ -21,6 +22,7 @@ _It was foreseen in the stars that Lui was destined for greatness, a UI library
 - [🎨 Lui on Figma](https://www.figma.com/file/E7g3n5ziI7bR8MisISayia/LUI-components)
 - [🔁 Lui on Github](https://github.com/linz/Lui)
 - [🔎 Lui on Chromatic](https://www.chromatic.com/builds?appId=5eaf53c737a54a0022e6749c)
+- [📄 Lui on UX Confluence](https://confluence.linz.govt.nz/display/STEP/Lui+%28LINZ+User+Interface%29+Design+system)
 - [💬 Lui Community of Practice on LINZ Slack - #cop-lui](https://linz.slack.com/archives/CP807EN31)
 
 and...
@@ -29,11 +31,11 @@ and...
 
 ---
 
-*Lui* is a collection of generic UI components that adhere to the new LINZ digital style guide, lead by STEP and welcoming contributions from across LINZ.
+_Lui_ is a collection of generic UI components that adhere to the new LINZ digital style guide, lead by STEP and welcoming contributions from across LINZ.
 
 It aims to solve the problem of consistent UI across LINZ, while giving squads a bunch of base elements they can start using out of the box.
 
-We aim to make each component generic, extendable and assessable.
+We aim to make each component generic, extendable, accessible, and amazing.
 
 All styles are implemented in SASS and compiled to plain CSS. This means any team can use the CSS. A ReactJS wrapper over the CSS is part of this project.
 

package/dist/components/LuiForms/LuiComboSelect/LuiComboSelect.stories.d.ts

@@ -1,37 +1,5 @@
 import React from 'react';
-import './LuiComboSelect.stories.scss';
-declare const _default: {
-    title: string;
-    component: React.ForwardRefExoticComponent<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
-    argTypes: {
-        value: {
-            /** a list of simple values */
-            options: string[];
-            /** a map between the simple values for display in Storybook to OBJECTS for react-select */
-            mapping: {
-                [k: string]: {
-                    value: string;
-                    label: string;
-                    isDisabled?: undefined;
-                } | {
-                    value: string;
-                    label: string;
-                    isDisabled: boolean;
-                };
-            };
-            control: {
-                type: string;
-                /** a map from the simple value to the display string for storybook */
-                labels: {
-                    [k: string]: string;
-                };
-            };
-        };
-        onChange: {
-            action: string;
-        };
-    };
-};
+declare const _default: import("@storybook/react").Meta<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export default _default;
 export declare const blank: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;
 export declare const focus: import("@storybook/react").Story<Partial<import("react-select").Props<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>> & React.RefAttributes<import("react-select").SelectInstance<import("./LuiComboSelect").LuiComboSelectOption, boolean, import("react-select").GroupBase<any>>>>;

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

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import './LuiIcon.scss';
 export declare const ICONS: {
     ic_account_circle: JSX.Element;
     ic_add_circle_outline: JSX.Element;
@@ -68,6 +69,9 @@ export declare const ICON_STATUS: {
     none: string;
     error: string;
     warning: string;
+    success: string;
+    interactive: string;
+    disabled: string;
 };
 export declare const LuiIcon: ({ name, className, size, title, alt, status, spanProps, }: LuiIconProps) => JSX.Element | null;
 export {};

package/dist/components/LuiTabs/LuiTab/LuiTab.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './LuiTab.scss';
+interface LuiTabProps {
+    onClick: () => void;
+    active: boolean;
+    id: string;
+    ariaControls: string;
+    children: React.ReactNode;
+}
+export declare const LuiTab: React.FC<LuiTabProps>;
+export {};

package/dist/components/LuiTabs/LuiTabs.d.ts

@@ -4,27 +4,7 @@ interface ILuiTabsContext {
     setActivePanel: (activePanel: string) => void;
 }
 export declare const LuiTabsContext: React.Context<ILuiTabsContext>;
-export declare const LuiTabsPanelWrapper: React.FC<{
+export declare const LuiTabs: React.FC<{
     defaultPanel: string;
 }>;
-export declare const LuiTabGroup: React.FC<{
-    ariaLabel: string;
-    justify?: boolean;
-}>;
-interface LuiTabsPanelSwitch {
-    targetPanel: string;
-    setActivePanel?: (targetPanel: string) => {};
-}
-export declare const LuiTabsPanelSwitch: React.FC<LuiTabsPanelSwitch>;
-interface LuiTabProps {
-    onClick: () => void;
-    active: boolean;
-    id: string;
-    ariaControls: string;
-}
-export declare const LuiTab: React.FC<LuiTabProps>;
-interface LuiTabPanelProps {
-    panel: string;
-}
-export declare const LuiTabPanel: React.FC<LuiTabPanelProps>;
 export {};

package/dist/components/LuiTabs/LuiTabsGroup/LuiTabsGroup.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import './LuiTabsGroup.scss';
+export declare const LuiTabsGroup: React.FC<{
+    ariaLabel: string;
+    justify?: boolean;
+}>;

package/dist/components/LuiTabs/LuiTabsPanel/LuiTabsPanel.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import './LuiTabsPanel.scss';
+interface LuiTabsPanelProps {
+    panel: string;
+}
+export declare const LuiTabsPanel: React.FC<LuiTabsPanelProps>;
+export {};

package/dist/components/LuiTabs/LuiTabsPanelSwitch/LuiTabsPanelSwitch.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LuiTabsPanelSwitch {
+    targetPanel: string;
+    setActivePanel?: (targetPanel: string) => {};
+}
+export declare const LuiTabsPanelSwitch: React.FC<LuiTabsPanelSwitch>;
+export {};

package/dist/index.d.ts

@@ -7,7 +7,11 @@ export { LuiButtonGroup } from './components/LuiButton/LuiButton';
 export { LuiExpandableBanner } from './components/LuiExpandableBanner/LuiExpandableBanner';
 export { LuiMenu, LuiControlledMenu, LuiMenuItem, LuiMenuDivider, LuiMenuHeader, } from './components/LuiMenu/LuiMenu';
 export { LuiFilterMenu } from './components/LuiFilterMenu/LuiFilterMenu';
-export * from './components/LuiTabs/LuiTabs';
+export { LuiTabs, LuiTabsContext } from './components/LuiTabs/LuiTabs';
+export { LuiTab } from './components/LuiTabs/LuiTab/LuiTab';
+export { LuiTabsGroup } from './components/LuiTabs/LuiTabsGroup/LuiTabsGroup';
+export { LuiTabsPanel } from './components/LuiTabs/LuiTabsPanel/LuiTabsPanel';
+export { LuiTabsPanelSwitch } from './components/LuiTabs/LuiTabsPanelSwitch/LuiTabsPanelSwitch';
 export { LuiCommonInputProps, LuiFormikForm, } from './components/LuiFormikForms/LuiFormikForm';
 export { LuiFormikCheckbox } from './components/LuiFormikForms/LuiFormikCheckbox/LuiFormikCheckbox';
 export { LuiFormikTextInput } from './components/LuiFormikForms/LuiFormikTextInput/LuiFormikTextInput';

package/dist/lui.cjs.development.js

@@ -548,13 +548,13 @@ var LuiTabsContext = /*#__PURE__*/React__default.createContext({
   activePanel: null,
   setActivePanel: function setActivePanel() {}
 });
-var LuiTabsPanelWrapper = function LuiTabsPanelWrapper(props) {
+var LuiTabs = function LuiTabs(props) {
   var _useState = React.useState(props.defaultPanel),
       activePanel = _useState[0],
       setActivePanel = _useState[1];
 
   return React__default.createElement("div", {
-    className: 'lui-tabs'
+    className: "LuiTabs"
   }, React__default.createElement(LuiTabsContext.Provider, {
     value: {
       activePanel: activePanel,
@@ -562,30 +562,15 @@ var LuiTabsPanelWrapper = function LuiTabsPanelWrapper(props) {
     }
   }, props.children));
 };
-var LuiTabGroup = function LuiTabGroup(props) {
-  return React__default.createElement("div", {
-    className: 'lui-tabs-style-underline'
-  }, React__default.createElement("div", {
-    className: "lui-tab-group  " + (props.justify ? 'lui-tab-group-justified' : ''),
-    role: "tablist",
-    "aria-label": props.ariaLabel
-  }, props.children));
-};
-var LuiTabsPanelSwitch = function LuiTabsPanelSwitch(props) {
-  var context = React.useContext(LuiTabsContext);
-  var active = context.activePanel === props.targetPanel;
-  return React__default.createElement(LuiTab, {
-    id: props.targetPanel + "-tab",
-    ariaControls: props.targetPanel + "-tab-panel",
-    active: active,
-    onClick: function onClick() {
-      if (context.setActivePanel) context.setActivePanel(props.targetPanel);
-    }
-  }, 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('lui-tab', props.active && 'lui-tab-active'),
+    className: clsx('LuiTab', props.active && 'LuiTab--active'),
     id: props.id,
     role: "tab",
     "aria-selected": props.active,
@@ -593,17 +578,45 @@ var LuiTab = function LuiTab(props) {
     onClick: props.onClick
   }, props.children);
 };
-var LuiTabPanel = function LuiTabPanel(props) {
+
+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' : ''),
+    role: "tablist",
+    "aria-label": props.ariaLabel
+  }, 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 = React.useContext(LuiTabsContext);
   var active = context.activePanel === props.panel;
   return React__default.createElement("div", {
-    className: clsx('lui-tab-panel', active && 'lui-tab-panel-active'),
+    className: clsx('LuiTabsPanel', active && 'LuiTabsPanel--active'),
     id: props.panel + "-tab-panel",
     role: "tabpanel",
     "aria-labelledby": props.panel + "-tab"
   }, props.children);
 };
 
+var LuiTabsPanelSwitch = function LuiTabsPanelSwitch(props) {
+  var context = React.useContext(LuiTabsContext);
+  var active = context.activePanel === props.targetPanel;
+  return React__default.createElement(LuiTab, {
+    id: props.targetPanel + "-tab",
+    ariaControls: props.targetPanel + "-tab-panel",
+    active: active,
+    onClick: function onClick() {
+      if (context.setActivePanel) context.setActivePanel(props.targetPanel);
+    }
+  }, props.children);
+};
+
 var _excluded$1 = ["className"];
 function LuiFormikForm(props) {
   // this spreads all keys, except className
@@ -642,6 +655,19 @@ function LuiFormikCheckbox(props) {
   }));
 }
 
+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__*/formik.connect(function (props) {
   var error = formik.getIn(props.formik.errors, props.name);
   var touch = formik.getIn(props.formik.touched, props.name);
@@ -719,19 +745,6 @@ var LuiFormikTextInput = /*#__PURE__*/formik.connect(function (props) {
   }));
 });
 
-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 LuiFormikRadioButton = function LuiFormikRadioButton(props) {
   var _useField = formik.useField(props),
       field = _useField[0],
@@ -825,6 +838,9 @@ var LuiFormikSelect = /*#__PURE__*/formik.connect(function (props) {
   })));
 });
 
+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,{});
+
 // NOTE: This is a generated file, nothing you do here matters
 
 var ic_account_circle = /*#__PURE__*/React__default.createElement("svg", {
@@ -1121,7 +1137,10 @@ var ICON_SIZES = {
 var ICON_STATUS = {
   none: '',
   error: 'LuiIcon--error',
-  warning: 'LuiIcon--warning'
+  warning: 'LuiIcon--warning',
+  success: 'LuiIcon--success',
+  interactive: 'LuiIcon--interactive',
+  disabled: 'LuiIcon--disabled'
 };
 var LuiIcon = function LuiIcon(_ref) {
   var name = _ref.name,
@@ -4647,11 +4666,9 @@ function isChromatic() {
   return !!(window.navigator.userAgent.match(/Chromatic/) || window.location.href.match(/chromatic=true/));
 }
 
-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  --color-grey-80: #414042;\n  --color-grey-60: #55504b;\n  --color-grey-30: #989189;\n  --color-grey-20: #beb9b4;\n  --color-grey-10: #eaeaea;\n  --color-grey-05: #f9f9f9;\n  --color-blue-100: #00425d;\n  --color-blue-75: #007198;\n  --color-blue-50: #0096cc;\n  --color-blue-25: #73c8e1;\n  --color-blue-05: #e2f3f7;\n  --color-teal-100: #004b50;\n  --color-teal-75: #017a76;\n  --color-teal-50: #00a599;\n  --color-teal-25: #73cdc8;\n  --color-teal-05: #dcf5f0;\n  --color-green-100: #004e32;\n  --color-green-75: #08814d;\n  --color-green-50: #0aa245;\n  --color-green-25: #9bd79b;\n  --color-green-05: #e9fae7;\n  --brand-primary: #00425d;\n  --brand-secondary: #017a76;\n  --color-success: #0aa245;\n  --color-success-bg: #e9fae7;\n  --color-info: #3a7cdf;\n  --color-info-bg: #d8e5f9;\n  --color-warning: #ea6a2e;\n  --color-warning-bg: #fbdfd2;\n  --color-error: #cc0000;\n  --color-error-focus: #5a0000;\n  --color-error-bg: #f5cccc;\n  --color-visited: #4c2c92;\n  --color-green-hover: #205f12;\n  --color-green-active: #16430c;\n  --color-green-btn: #2e881a;\n  --color-txt-link: #1f69c3;\n  --color-primary-hover-btn: #004e6a;\n  --color-selection: #c7e9f3;\n  --heading-color: #017a76;\n  --heading-color--secondary: #414042;\n  --base-type-color: #414042;\n  --base-icon-color: #007198;\n  --disabled-color: #989189;\n  --disabled-color-dark: #55504b;\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 = {"color-grey-80":"#414042","color-grey-60":"#55504b","color-grey-30":"#989189","color-grey-20":"#beb9b4","color-grey-10":"#eaeaea","color-grey-05":"#f9f9f9","color-blue-100":"#00425d","color-blue-75":"#007198","color-blue-50":"#0096cc","color-blue-25":"#73c8e1","color-blue-05":"#e2f3f7","color-teal-100":"#004b50","color-teal-75":"#017a76","color-teal-50":"#00a599","color-teal-25":"#73cdc8","color-teal-05":"#dcf5f0","color-green-100":"#004e32","color-green-75":"#08814d","color-green-50":"#0aa245","color-green-25":"#9bd79b","color-green-05":"#e9fae7","brand-primary":"#00425d","brand-secondary":"#017a76","color-success":"#0aa245","color-success-bg":"#e9fae7","color-info":"#3a7cdf","color-info-bg":"#d8e5f9","color-warning":"#ea6a2e","color-warning-bg":"#fbdfd2","color-error":"#cc0000","color-error-focus":"#5a0000","color-error-bg":"#f5cccc","color-visited":"#4c2c92","color-green-hover":"#205f12","color-green-active":"#16430c","color-green-btn":"#2e881a","color-txt-link":"#1f69c3","color-primary-hover-btn":"#004e6a","color-selection":"#c7e9f3","heading-color":"#017a76","heading-color--secondary":"#414042","base-type-color":"#414042","base-icon-color":"#007198","disabled-color":"#989189","disabled-color-dark":"#55504b","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,{});
+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 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,{});
 
 /**
  * A wrapper around React Select with Lui styling
@@ -4687,16 +4704,16 @@ function LuiComboSelectActual(givenProps, ref) {
           primary75: modules_5b17bb95['color-blue-50'],
           primary50: modules_5b17bb95['color-blue-25'],
           primary25: modules_5b17bb95['color-blue-05'],
-          neutral90: modules_5b17bb95['color-grey-80'],
-          neutral80: modules_5b17bb95['color-grey-80'],
-          neutral70: modules_5b17bb95['color-grey-80'],
-          neutral60: modules_5b17bb95['color-grey-60'],
-          neutral50: modules_5b17bb95['color-grey-60'],
-          neutral40: modules_5b17bb95['color-grey-30'],
-          neutral30: modules_5b17bb95['color-grey-30'],
-          neutral20: modules_5b17bb95['color-grey-20'],
-          neutral10: modules_5b17bb95['color-grey-10'],
-          neutral5: modules_5b17bb95['color-grey-05'],
+          neutral90: modules_5b17bb95['grey-80'],
+          neutral80: modules_5b17bb95['grey-80'],
+          neutral70: modules_5b17bb95['grey-80'],
+          neutral60: modules_5b17bb95['grey-60'],
+          neutral50: modules_5b17bb95['grey-60'],
+          neutral40: modules_5b17bb95['$gray'],
+          neutral30: modules_5b17bb95['$gray'],
+          neutral20: modules_5b17bb95['grey-20'],
+          neutral10: modules_5b17bb95['grey-10'],
+          neutral5: modules_5b17bb95['grey-05'],
           danger: modules_5b17bb95['error'],
           dangerLight: modules_5b17bb95['error-bg']
         })
@@ -4711,29 +4728,22 @@ function LuiComboSelectActual(givenProps, ref) {
       input: function input(provided) {
         return _extends({}, provided, {
           height: '40px',
-          minHeight: '38px'
-        });
-      },
-      control: function control(provided) {
-        return _extends({}, provided, {
-          lineHeight: 2.8
+          minHeight: '40px',
+          fontWeight: 400,
+          input: {
+            height: '38px !important'
+          }
         });
       },
       singleValue: function singleValue(provided) {
         return _extends({}, provided, {
-          fontWeight: 400,
           color: '#414042',
-          position: 'fixed'
-        });
-      },
-      valueContainer: function valueContainer(provided) {
-        return _extends({}, provided, {
-          position: 'inherit'
+          fontWeight: 400
         });
       },
       placeholder: function placeholder(provided) {
         return _extends({}, provided, {
-          position: 'fixed'
+          fontWeight: 400
         });
       }
     }
@@ -7085,11 +7095,11 @@ exports.LuiModal = LuiModal;
 exports.LuiStaticMessage = LuiStaticMessage;
 exports.LuiStatusSpinner = LuiStatusSpinner;
 exports.LuiTab = LuiTab;
-exports.LuiTabGroup = LuiTabGroup;
-exports.LuiTabPanel = LuiTabPanel;
+exports.LuiTabs = LuiTabs;
 exports.LuiTabsContext = LuiTabsContext;
+exports.LuiTabsGroup = LuiTabsGroup;
+exports.LuiTabsPanel = LuiTabsPanel;
 exports.LuiTabsPanelSwitch = LuiTabsPanelSwitch;
-exports.LuiTabsPanelWrapper = LuiTabsPanelWrapper;
 exports.LuiToastMessage = LuiToastMessage;
 exports.LuiTooltip = LuiTooltip;
 exports.LuiUpdatesSplashModal = LuiUpdatesSplashModal;