@linzjs/lui 10.11.3 → 10.11.4

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [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)
 
 

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.
 
-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/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__d29af64c {\n  display: inline-block;\n  height: 100%;\n  width: 100%;\n}\n\n.LuiIcon_LuiIcon_Xl__d29af64c {\n  max-height: 64px;\n  max-width: 64px;\n}\n.LuiIcon_LuiIcon_Xl__d29af64c > svg {\n  height: 64px;\n  width: 64px;\n}\n\n.LuiIcon_LuiIcon_Lg__d29af64c {\n  max-height: 48px;\n  max-width: 48px;\n}\n.LuiIcon_LuiIcon_Lg__d29af64c > svg {\n  height: 48px;\n  width: 48px;\n}\n\n.LuiIcon_LuiIcon_Md__d29af64c {\n  height: 24px;\n  max-height: 24px;\n  max-width: 24px;\n  width: 24px;\n}\n.LuiIcon_LuiIcon_Md__d29af64c > svg {\n  height: 24px;\n  width: 24px;\n}\n\n.LuiIcon_LuiIcon_Sm__d29af64c {\n  max-height: 16px;\n  max-width: 16px;\n}\n.LuiIcon_LuiIcon_Sm__d29af64c > svg {\n  height: 16px;\n  width: 16px;\n}\n\n.LuiIcon_LuiIcon_Xs__d29af64c {\n  max-height: 12px;\n  max-width: 12px;\n}\n.LuiIcon_LuiIcon_Xs__d29af64c > svg {\n  height: 12px;\n  width: 12px;\n}\n\n.LuiIcon_LuiIcon_Warning__d29af64c {\n  fill: #ea6a2e;\n}\n\n.LuiIcon_LuiIcon_Error__d29af64c {\n  fill: #cc0000;\n}\n\n.LuiIcon_LuiIcon_Success__d29af64c {\n  fill: #0aa245;\n}\n\n.LuiIcon_LuiIcon_Interactive__d29af64c {\n  fill: #007198;\n}\n\n.LuiIcon_LuiIcon_Disabled__d29af64c {\n  fill: #989189;\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
 
@@ -4655,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
@@ -4693,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']
         })
@@ -7084,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;