@linzjs/lui 10.11.2 → 11.0.0

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+# [11.0.0](https://github.com/linz/lui/compare/v10.11.5...v11.0.0) (2021-12-06)
+
+
+### Bug Fixes
+
+* add conventionalcommits preset to dev dependencies ([b56a50f](https://github.com/linz/lui/commit/b56a50fc3d68b55354b552a29dcc7e7fbd7d396c))
+
+## [10.11.5](https://github.com/linz/lui/compare/v10.11.4...v10.11.5) (2021-12-06)
+
+
+### Bug Fixes
+
+* testing whitespace addition ([#481](https://github.com/linz/lui/issues/481)) ([5fb5d8d](https://github.com/linz/lui/commit/5fb5d8db22cac7367ffb14191ed3f705f6457213))
+
+## [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)
 
 

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.
 
@@ -30,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.
+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 amazingly great.
 
 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/LuiIcon/LuiIcon.d.ts

@@ -69,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
@@ -825,10 +838,8 @@ var LuiFormikSelect = /*#__PURE__*/formik.connect(function (props) {
   })));
 });
 
-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}\n\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n/**\n  @deprecated\n */\n.LuiIcon_LuiIcon__869dcbb9 {\n  display: inline-block;\n  height: 100%;\n  width: 100%;\n}\n\n.LuiIcon_LuiIcon_Xl__869dcbb9 {\n  max-height: 64px;\n  max-width: 64px;\n}\n.LuiIcon_LuiIcon_Xl__869dcbb9 > svg {\n  height: 64px;\n  width: 64px;\n}\n\n.LuiIcon_LuiIcon_Lg__869dcbb9 {\n  max-height: 48px;\n  max-width: 48px;\n}\n.LuiIcon_LuiIcon_Lg__869dcbb9 > svg {\n  height: 48px;\n  width: 48px;\n}\n\n.LuiIcon_LuiIcon_Md__869dcbb9 {\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n}\n.LuiIcon_LuiIcon_Md__869dcbb9 > svg {\n  height: 24px;\n  width: 24px;\n}\n\n.LuiIcon_LuiIcon_Sm__869dcbb9 {\n  max-height: 16px;\n  max-width: 16px;\n}\n.LuiIcon_LuiIcon_Sm__869dcbb9 > svg {\n  height: 16px;\n  width: 16px;\n}\n\n.LuiIcon_LuiIcon_Xs__869dcbb9 {\n  max-height: 12px;\n  max-width: 12px;\n}\n.LuiIcon_LuiIcon_Xs__869dcbb9 > svg {\n  height: 12px;\n  width: 12px;\n}\n\n.LuiIcon_LuiIcon_Warning__869dcbb9 {\n  fill: #ea6a2e;\n}\n\n.LuiIcon_LuiIcon_Error__869dcbb9 {\n  fill: #cc0000;\n}";
-n(css,{});
+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
 
@@ -1126,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,
@@ -4652,9 +4666,9 @@ function isChromatic() {
   return !!(window.navigator.userAgent.match(/Chromatic/) || window.location.href.match(/chromatic=true/));
 }
 
-var css$1 = ":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$1,{});
+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
@@ -4690,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']
         })
@@ -7081,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;