@norges-domstoler/dds-components 13.8.0 → 13.8.2

package/dist/cjs/components/AppShell/AppShell.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren, ReactElement } from 'react';
 import { User } from './Navigation/TopBar';
 import { OverflowMenuProps } from '../OverflowMenu';
+import { Environment } from '@norges-domstoler/development-utils';
 export type AppShellProps = PropsWithChildren<{
     /**
      * Versjon på appen på formatet 0.0.0
@@ -15,6 +16,11 @@ export type AppShellProps = PropsWithChildren<{
      * Menyvalg som skal vises i OverflowMenu knyttet til "bruker"-knappen.
      */
     userMenuItems?: OverflowMenuProps['items'];
+    /**
+     * `environment` brukes for å  vise en banner øverst i appen som viser hvilket miljø du er i.
+     * Når environment er undefined eller `"PROD"` så vises ikke banneret.
+     */
+    environment?: Environment;
 }>;
 export type AppShellNavigationProps = {
     /**
@@ -26,4 +32,7 @@ export type AppShellNavigationProps = {
      */
     external?: ReactElement[];
 };
-export declare const AppShell: ({ children, version, navigation: { internal, external }, user, userMenuItems, }: AppShellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppShell: {
+    ({ children, version, navigation: { internal, external }, user, userMenuItems, environment, }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/cjs/components/AppShell/AppShell.stories.d.ts

@@ -2,11 +2,14 @@ import { ComponentProps } from 'react';
 import { AppShell } from '.';
 declare const _default: {
     title: string;
-    component: (({ children, version, navigation: { internal, external }, user, userMenuItems, }: import("./AppShell").AppShellProps) => import("react/jsx-runtime").JSX.Element) & {
+    component: {
+        ({ children, version, navigation: { internal, external }, user, userMenuItems, environment, }: import("./AppShell").AppShellProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    } & {
         NavItem: {
-            <T extends import("@norges-domstoler/dds-core").As = "a">({ as: _as, active, icon, external, children, ...rest }: import("react").PropsWithoutRef<ComponentProps<T>> & {
+            <T extends import("@norges-domstoler/dds-core").As = "a">({ as: _as, active, icon, external, children, onClick: propOnClick, ...rest }: import("react").PropsWithoutRef<ComponentProps<T>> & {
                 as?: T | undefined;
-            } & ({
+            } & (({
                 icon: import("@norges-domstoler/dds-icons").SvgIcon;
                 active?: boolean | undefined;
                 external?: false | undefined;
@@ -14,6 +17,8 @@ declare const _default: {
                 external: true;
                 active?: false | undefined;
                 icon?: undefined;
+            }) & {
+                onClick?: import("react").MouseEventHandler | undefined;
             })): import("react/jsx-runtime").JSX.Element;
             displayName: string;
         };

package/dist/cjs/components/AppShell/AppShellContext.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode, type SetStateAction, type Dispatch } from 'react';
+type AppShellContextValues = {
+    isOpen: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+};
+export declare const AppShellContextProvider: ({ children, }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useAppShellContext: () => AppShellContextValues;
+export {};

package/dist/cjs/components/AppShell/Navigation/Navigation.d.ts

@@ -8,5 +8,6 @@ export type NavigationProps = {
     external: ReactElement[];
     user: User;
     userMenuItems?: OverflowMenuProps['items'];
+    environmentBannerActive: boolean;
 };
-export declare const Navigation: ({ version, user, userMenuItems, internal, external, }: NavigationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Navigation: ({ version, user, userMenuItems, internal, external, environmentBannerActive, }: NavigationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/AppShell/Navigation/NavigationItem.d.ts

@@ -1,6 +1,7 @@
 import { type PropsOf, type As } from '@norges-domstoler/dds-core';
 import { SvgIcon } from '@norges-domstoler/dds-icons';
-type BaseNavigationItemProps = {
+import { type MouseEventHandler } from 'react';
+type BaseNavigationItemProps = ({
     icon: SvgIcon;
     active?: boolean;
     external?: undefined | false;
@@ -8,10 +9,12 @@ type BaseNavigationItemProps = {
     external: true;
     active?: undefined | false;
     icon?: undefined;
+}) & {
+    onClick?: MouseEventHandler;
 };
 type NavigationItemProps<T extends As = 'a'> = PropsOf<T> & BaseNavigationItemProps;
 export declare const NavigationItem: {
-    <T extends As = "a">({ as: _as, active, icon, external, children, ...rest }: NavigationItemProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends As = "a">({ as: _as, active, icon, external, children, onClick: propOnClick, ...rest }: NavigationItemProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/cjs/components/AppShell/Navigation/TopBar.d.ts

@@ -5,6 +5,7 @@ type TopBarProps = {
     userMenuItems?: OverflowMenuProps['items'];
     isNavigationOpen: boolean;
     onNavigationOpenChange: (isOpen: boolean) => void;
+    environmentBannerActive: boolean;
 };
 export type User = {
     /**Brukerens fulle navn (for- og etternavn). */
@@ -18,5 +19,5 @@ export type Embete = {
     /**Hvilken instans embetet er. */
     type: EmbeteType;
 };
-export declare const TopBar: ({ user, userMenuItems, isNavigationOpen, onNavigationOpenChange, }: TopBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TopBar: ({ user, userMenuItems, isNavigationOpen, onNavigationOpenChange, environmentBannerActive, }: TopBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/components/Select/Select.styles.d.ts

@@ -14,5 +14,5 @@ type StyledContainerProps = {
 export declare const Container: import("styled-components").StyledComponent<"div", any, StyledContainerProps, never>;
 export declare const InnerSingleValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
-export declare const getCustomStyles: <TOption>() => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
+export declare const getCustomStyles: <TOption>(size: InputSize) => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
 export {};

package/dist/cjs/components/Select/Select.tokens.d.ts

@@ -10,7 +10,9 @@ export declare const typographyTypes: {
         [k in InputSize]: StaticTypographyType;
     };
     groupHeading: StaticTypographyType;
-    multiValueLabel: StaticTypographyType;
+    multiValueLabel: {
+        [k in InputSize]: StaticTypographyType;
+    };
 };
 export declare const selectTokens: {
     control: {

package/dist/cjs/index.js

@@ -10,6 +10,7 @@ var styled = require('styled-components');
 var ddsDesignTokens = require('@norges-domstoler/dds-design-tokens');
 var React = require('react');
 var tslib = require('tslib');
+var developmentUtils = require('@norges-domstoler/development-utils');
 var ReactSelect = require('react-select');
 var reactDom = require('react-dom');
 var fileSelector = require('file-selector');
@@ -87,6 +88,46 @@ var appShellTokens = {
   floatingActionButtons: floatingActionButtons$1
 };
 
+var border$b = ddsDesignTokens.ddsBaseTokens.border,
+  spacing$A = ddsDesignTokens.ddsBaseTokens.spacing;
+var divider$2 = {
+  borderTop: "".concat(border$b.BordersDdsBorderStyleLightStrokeWeight, " solid"),
+  marginTop: spacing$A.SizesDdsSpacingLocalX1,
+  marginBottom: spacing$A.SizesDdsSpacingLocalX1,
+  color: {
+    primary: {
+      borderColor: border$b.BordersDdsBorderStyleDarkStroke
+    },
+    primaryLighter: {
+      borderColor: border$b.BordersDdsBorderStyleLightStroke
+    }
+  }
+};
+var dividerTokens = Object.assign({}, divider$2);
+
+var StyledDivider$2 = styled__default.default.hr.withConfig({
+  displayName: "Divider__StyledDivider",
+  componentId: "sc-ggdopz-0"
+})(["border:0;background-color:transparent;border-top:", ";margin-top:", ";margin-bottom:", ";", ""], dividerTokens.borderTop, dividerTokens.marginTop, dividerTokens.marginBottom, function (_ref) {
+  var color = _ref.color;
+  return color && styled.css(["border-color:", ";"], dividerTokens.color[color].borderColor);
+});
+var Divider = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _props$color = props.color,
+    color = _props$color === void 0 ? 'primary' : _props$color,
+    id = props.id,
+    className = props.className,
+    htmlProps = props.htmlProps,
+    rest = tslib.__rest(props, ["color", "id", "className", "htmlProps"]);
+  var lineProps = Object.assign(Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest)), {
+    color: color
+  });
+  return jsxRuntime.jsx(StyledDivider$2, Object.assign({
+    ref: ref
+  }, lineProps));
+});
+Divider.displayName = 'Divider';
+
 function _iterableToArrayLimit(arr, i) {
   var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
   if (null != _i) {
@@ -478,45 +519,27 @@ function _toPropertyKey(arg) {
   return typeof key === "symbol" ? key : String(key);
 }
 
-var border$b = ddsDesignTokens.ddsBaseTokens.border,
-  spacing$A = ddsDesignTokens.ddsBaseTokens.spacing;
-var divider$2 = {
-  borderTop: "".concat(border$b.BordersDdsBorderStyleLightStrokeWeight, " solid"),
-  marginTop: spacing$A.SizesDdsSpacingLocalX1,
-  marginBottom: spacing$A.SizesDdsSpacingLocalX1,
-  color: {
-    primary: {
-      borderColor: border$b.BordersDdsBorderStyleDarkStroke
-    },
-    primaryLighter: {
-      borderColor: border$b.BordersDdsBorderStyleLightStroke
-    }
-  }
-};
-var dividerTokens = Object.assign({}, divider$2);
-
-var StyledDivider$2 = styled__default.default.hr.withConfig({
-  displayName: "Divider__StyledDivider",
-  componentId: "sc-ggdopz-0"
-})(["border:0;background-color:transparent;border-top:", ";margin-top:", ";margin-bottom:", ";", ""], dividerTokens.borderTop, dividerTokens.marginTop, dividerTokens.marginBottom, function (_ref) {
-  var color = _ref.color;
-  return color && styled.css(["border-color:", ";"], dividerTokens.color[color].borderColor);
+var AppShellContext = /*#__PURE__*/React.createContext({
+  isOpen: false,
+  setOpen: function setOpen() {}
 });
-var Divider = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _props$color = props.color,
-    color = _props$color === void 0 ? 'primary' : _props$color,
-    id = props.id,
-    className = props.className,
-    htmlProps = props.htmlProps,
-    rest = tslib.__rest(props, ["color", "id", "className", "htmlProps"]);
-  var lineProps = Object.assign(Object.assign({}, ddsCore.getBaseHTMLProps(id, className, htmlProps, rest)), {
-    color: color
+var AppShellContextProvider = function AppShellContextProvider(_ref) {
+  var children = _ref.children;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setOpen = _useState2[1];
+  return jsxRuntime.jsx(AppShellContext.Provider, {
+    value: {
+      isOpen: isOpen,
+      setOpen: setOpen
+    },
+    children: children
   });
-  return jsxRuntime.jsx(StyledDivider$2, Object.assign({
-    ref: ref
-  }, lineProps));
-});
-Divider.displayName = 'Divider';
+};
+var useAppShellContext = function useAppShellContext() {
+  return React.useContext(AppShellContext);
+};
 
 var navTokens$3 = appShellTokens.navigation;
 var navItemTokens = navTokens$3.navigationItems.item;
@@ -550,12 +573,20 @@ var NavigationItem$1 = function NavigationItem(_a) {
     icon = _a.icon,
     external = _a.external,
     children = _a.children,
-    rest = tslib.__rest(_a, ["as", "active", "icon", "external", "children"]);
+    propOnClick = _a.onClick,
+    rest = tslib.__rest(_a, ["as", "active", "icon", "external", "children", "onClick"]);
+  var _useAppShellContext = useAppShellContext(),
+    setOpen = _useAppShellContext.setOpen;
   var Comp = _as !== null && _as !== void 0 ? _as : 'a';
+  var onClick = function onClick(e) {
+    propOnClick === null || propOnClick === void 0 ? void 0 : propOnClick(e);
+    setOpen(false);
+  };
   if (external) {
     return jsxRuntime.jsxs(ExternalNavItem, Object.assign({
       as: Comp
     }, rest, {
+      onClick: onClick,
       children: [children, jsxRuntime.jsx(ddsIcons.Icon, {
         icon: ddsIcons.OpenExternalIcon,
         iconSize: "inherit"
@@ -565,7 +596,8 @@ var NavigationItem$1 = function NavigationItem(_a) {
   return jsxRuntime.jsxs(InternalNavItem, Object.assign({
     as: Comp
   }, rest, {
-    className: active ? 'active' : '',
+    onClick: onClick,
+    className: [active ? 'active' : '', rest.className].join(' '),
     children: [jsxRuntime.jsx(IconContainer, {
       children: icon && jsxRuntime.jsx(ddsIcons.Icon, {
         icon: icon
@@ -1820,18 +1852,23 @@ var IconButtonText = styled__default.default.span.withConfig({
 var Bar$1 = styled__default.default.div.withConfig({
   displayName: "TopBar__Bar",
   componentId: "sc-1mmx14i-4"
-})(["display:flex;align-items:center;justify-content:space-between;gap:", ";width:100vw;height:", ";color:", ";background-color:", ";box-sizing:border-box;z-index:101;position:fixed;top:0;left:0;right:0;@media (min-width:", "){justify-content:flex-end;background-color:transparent;margin-left:", ";width:calc(100vw - ", ");", "{display:none;}", "{padding-right:calc(2 * ", ");gap:", ";}", "{background-color:", ";color:", ";box-shadow:8px 16px 32px 0px rgba(0,0,0,0.1);border-radius:", ";", "{display:unset;}}}"], navTokens$1.topBar.gap, navTokens$1.topBar.height, navTokens$1.color, navTokens$1.backgroundColor, navTokens$1.mobile.breakpoint, navTokens$1.width, navTokens$1.width, LogoBurgerGroup, ActionButtonGroup, navTokens$1.topBar.gap, floatingActionButtons.gap, IconButton, floatingActionButtons.backgroundColor, floatingActionButtons.textColor, floatingActionButtons.borderRadius, IconButtonText);
-var TopBar = function TopBar(_ref) {
-  var user = _ref.user,
-    userMenuItems = _ref.userMenuItems,
-    isNavigationOpen = _ref.isNavigationOpen,
-    onNavigationOpenChange = _ref.onNavigationOpenChange;
+})(["display:flex;align-items:center;justify-content:space-between;gap:", ";width:100vw;height:", ";color:", ";background-color:", ";box-sizing:border-box;z-index:101;position:fixed;top:", ";left:0;right:0;@media (min-width:", "){justify-content:flex-end;background-color:transparent;margin-left:", ";width:calc(100vw - ", ");pointer-events:none;& > *{pointer-events:initial;}", "{display:none;}", "{padding-right:calc(2 * ", ");gap:", ";}", "{background-color:", ";color:", ";box-shadow:8px 16px 32px 0px rgba(0,0,0,0.1);border-radius:", ";", "{display:unset;}}}"], navTokens$1.topBar.gap, navTokens$1.topBar.height, navTokens$1.color, navTokens$1.backgroundColor, function (_ref) {
+  var environmentBannerActive = _ref.environmentBannerActive;
+  return environmentBannerActive ? developmentUtils.ENVIRONMENT_BANNER_HEIGHT : '0';
+}, navTokens$1.mobile.breakpoint, navTokens$1.width, navTokens$1.width, LogoBurgerGroup, ActionButtonGroup, navTokens$1.topBar.gap, floatingActionButtons.gap, IconButton, floatingActionButtons.backgroundColor, floatingActionButtons.textColor, floatingActionButtons.borderRadius, IconButtonText);
+var TopBar = function TopBar(_ref2) {
+  var user = _ref2.user,
+    userMenuItems = _ref2.userMenuItems,
+    isNavigationOpen = _ref2.isNavigationOpen,
+    onNavigationOpenChange = _ref2.onNavigationOpenChange,
+    environmentBannerActive = _ref2.environmentBannerActive;
   var Icon = function Icon(props) {
     return jsxRuntime.jsx(EmbeteIcon, Object.assign({}, props, {
       type: user.embete.type
     }));
   };
   return jsxRuntime.jsxs(Bar$1, {
+    environmentBannerActive: environmentBannerActive,
     children: [jsxRuntime.jsxs(LogoBurgerGroup, {
       children: [jsxRuntime.jsx(IconButton, {
         icon: isNavigationOpen ? ddsIcons.CloseIcon : ddsIcons.MenuIcon,
@@ -1861,13 +1898,22 @@ var navTokens = appShellTokens.navigation;
 var Sidebar = styled__default.default.div.withConfig({
   displayName: "Navigation__Sidebar",
   componentId: "sc-twhp5c-0"
-})(["display:flex;flex-direction:column;height:calc(100vh - ", ");width:100vw;padding:", ";color:", ";background-color:", ";box-sizing:border-box;position:fixed;top:", ";left:0;right:0;bottom:0;z-index:100;transition:transform 0.2s ease-in-out,opacity 0.2s ease-in-out;transform:translateX(", ");opacity:", ";@media (min-width:", "){height:100vh;top:0;width:", ";position:sticky;transform:translateX(0);opacity:1;}"], navTokens.topBar.height, navTokens.padding, navTokens.color, navTokens.backgroundColor, navTokens.topBar.height, function (_ref) {
-  var isOpen = _ref.isOpen;
-  return isOpen ? '0' : '-100%';
+})(["display:flex;flex-direction:column;height:calc(100vh - ", ");width:100vw;padding:", ";color:", ";background-color:", ";box-sizing:border-box;position:fixed;top:", ";left:0;right:0;bottom:0;z-index:100;transition:transform 0.2s ease-in-out,opacity 0.2s ease-in-out;transform:translateX(", ");opacity:", ";@media (min-width:", "){height:", ";top:", ";width:", ";position:fixed;transform:translateX(0);opacity:1;}"], navTokens.topBar.height, navTokens.padding, navTokens.color, navTokens.backgroundColor, function (_ref) {
+  var environmentBannerActive = _ref.environmentBannerActive;
+  return environmentBannerActive ? "calc(".concat(developmentUtils.ENVIRONMENT_BANNER_HEIGHT, " + ").concat(navTokens.topBar.height, ")") : navTokens.topBar.height;
 }, function (_ref2) {
   var isOpen = _ref2.isOpen;
+  return isOpen ? '0' : '-100%';
+}, function (_ref3) {
+  var isOpen = _ref3.isOpen;
   return isOpen ? '1' : '0';
-}, navTokens.mobile.breakpoint, navTokens.width);
+}, navTokens.mobile.breakpoint, function (_ref4) {
+  var environmentBannerActive = _ref4.environmentBannerActive;
+  return environmentBannerActive ? "calc(100vh - ".concat(developmentUtils.ENVIRONMENT_BANNER_HEIGHT, ")") : '100vh';
+}, function (_ref5) {
+  var environmentBannerActive = _ref5.environmentBannerActive;
+  return environmentBannerActive ? developmentUtils.ENVIRONMENT_BANNER_HEIGHT : 0;
+}, navTokens.width);
 var LogoAndVersionContainer = styled__default.default.div.withConfig({
   displayName: "Navigation__LogoAndVersionContainer",
   componentId: "sc-twhp5c-1"
@@ -1888,16 +1934,16 @@ var StyledDivider = styled__default.default(Divider).withConfig({
   displayName: "Navigation__StyledDivider",
   componentId: "sc-twhp5c-5"
 })(["border-color:", ";"], navTokens.dividerColor);
-var Navigation$1 = function Navigation(_ref3) {
-  var version = _ref3.version,
-    user = _ref3.user,
-    userMenuItems = _ref3.userMenuItems,
-    internal = _ref3.internal,
-    external = _ref3.external;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setOpen = _useState2[1];
+var Navigation$1 = function Navigation(_ref6) {
+  var version = _ref6.version,
+    user = _ref6.user,
+    userMenuItems = _ref6.userMenuItems,
+    internal = _ref6.internal,
+    external = _ref6.external,
+    environmentBannerActive = _ref6.environmentBannerActive;
+  var _useAppShellContext = useAppShellContext(),
+    isOpen = _useAppShellContext.isOpen,
+    setOpen = _useAppShellContext.setOpen;
   React.useEffect(function () {
     var listener = function listener(event) {
       if (event.key === 'o') {
@@ -1918,9 +1964,11 @@ var Navigation$1 = function Navigation(_ref3) {
       isNavigationOpen: isOpen,
       onNavigationOpenChange: function onNavigationOpenChange(newOpen) {
         return setOpen(newOpen);
-      }
+      },
+      environmentBannerActive: environmentBannerActive
     }), jsxRuntime.jsxs(Sidebar, {
       isOpen: isOpen,
+      environmentBannerActive: environmentBannerActive,
       children: [jsxRuntime.jsxs(LogoAndVersionContainer, {
         children: [jsxRuntime.jsx(NavigationLogo, {
           children: "Lovisa"
@@ -1955,30 +2003,46 @@ var AppShellContainer = styled__default.default.div.withConfig({
 var MainContent = styled__default.default.main.withConfig({
   displayName: "AppShell__MainContent",
   componentId: "sc-1c8yu5p-1"
-})(["min-height:calc(100vh - ", ");margin-top:", ";@media (min-width:", "){min-height:unset;margin-top:0;min-width:calc(100vw - ", ");max-width:calc(100vw - ", ");}"], appShellTokens.navigation.topBar.height, appShellTokens.navigation.topBar.height, appShellTokens.navigation.mobile.breakpoint, appShellTokens.navigation.width, appShellTokens.navigation.width);
-var AppShell$1 = function AppShell(_ref) {
-  var children = _ref.children,
-    _ref$version = _ref.version,
-    version = _ref$version === void 0 ? '' : _ref$version,
-    _ref$navigation = _ref.navigation,
-    _ref$navigation$inter = _ref$navigation.internal,
-    internal = _ref$navigation$inter === void 0 ? [] : _ref$navigation$inter,
-    _ref$navigation$exter = _ref$navigation.external,
-    external = _ref$navigation$exter === void 0 ? [] : _ref$navigation$exter,
-    user = _ref.user,
-    userMenuItems = _ref.userMenuItems;
-  return jsxRuntime.jsxs(AppShellContainer, {
-    children: [jsxRuntime.jsx(Navigation$1, {
-      user: user,
-      userMenuItems: userMenuItems,
-      version: version,
-      internal: internal,
-      external: external
-    }), jsxRuntime.jsx(MainContent, {
-      children: children
-    })]
+})(["min-height:calc(100vh - ", ");margin-top:", ";@media (min-width:", "){min-height:unset;margin-top:", ";margin-left:", ";min-width:calc(100vw - ", ");max-width:calc(100vw - ", ");}"], appShellTokens.navigation.topBar.height, function (_ref) {
+  var environmentBannerActive = _ref.environmentBannerActive;
+  return environmentBannerActive ? "calc(".concat(developmentUtils.ENVIRONMENT_BANNER_HEIGHT, " + ").concat(appShellTokens.navigation.topBar.height, ")") : appShellTokens.navigation.topBar.height;
+}, appShellTokens.navigation.mobile.breakpoint, function (_ref2) {
+  var environmentBannerActive = _ref2.environmentBannerActive;
+  return environmentBannerActive ? developmentUtils.ENVIRONMENT_BANNER_HEIGHT : 0;
+}, appShellTokens.navigation.width, appShellTokens.navigation.width, appShellTokens.navigation.width);
+var AppShell$1 = function AppShell(_ref3) {
+  var children = _ref3.children,
+    _ref3$version = _ref3.version,
+    version = _ref3$version === void 0 ? '' : _ref3$version,
+    _ref3$navigation = _ref3.navigation,
+    _ref3$navigation$inte = _ref3$navigation.internal,
+    internal = _ref3$navigation$inte === void 0 ? [] : _ref3$navigation$inte,
+    _ref3$navigation$exte = _ref3$navigation.external,
+    external = _ref3$navigation$exte === void 0 ? [] : _ref3$navigation$exte,
+    user = _ref3.user,
+    userMenuItems = _ref3.userMenuItems,
+    _ref3$environment = _ref3.environment,
+    environment = _ref3$environment === void 0 ? 'PROD' : _ref3$environment;
+  var environmentBannerActive = environment !== 'PROD';
+  return jsxRuntime.jsx(AppShellContextProvider, {
+    children: jsxRuntime.jsxs(AppShellContainer, {
+      children: [jsxRuntime.jsx(developmentUtils.EnvironmentBanner, {
+        environment: environment
+      }), jsxRuntime.jsx(Navigation$1, {
+        user: user,
+        userMenuItems: userMenuItems,
+        version: version,
+        internal: internal,
+        external: external,
+        environmentBannerActive: environmentBannerActive
+      }), jsxRuntime.jsx(MainContent, {
+        environmentBannerActive: environmentBannerActive,
+        children: children
+      })]
+    })
   });
 };
+AppShell$1.displayName = 'AppShell';
 
 var AppShell = AppShell$1;
 AppShell.NavItem = NavigationItem$1;
@@ -2743,13 +2807,18 @@ var placeholderTypographyTypes = {
   small: 'supportingStylePlaceholderText02',
   tiny: 'supportingStylePlaceholderText03'
 };
+var multiValueLabelTypographyTypes = {
+  medium: 'bodySans01',
+  small: 'bodySans01',
+  tiny: 'supportingStyleTiny01'
+};
 var typographyTypes$5 = {
   control: ddsForm.inputTypographyTypes,
   option: ddsForm.inputTypographyTypes,
   placeholder: placeholderTypographyTypes,
   noOptionsMessage: placeholderTypographyTypes,
   groupHeading: 'supportingStyleHelperText01',
-  multiValueLabel: 'bodySans01'
+  multiValueLabel: multiValueLabelTypographyTypes
 };
 var control = {
   borderRadius: borderRadius$5.RadiiDdsBorderRadius1Radius,
@@ -2939,7 +3008,7 @@ var StyledIcon$2 = styled__default.default(ddsIcons.Icon).withConfig({
   displayName: "Selectstyles__StyledIcon",
   componentId: "sc-19jkd5s-2"
 })(["margin-right:", ";"], icon$6.marginRight);
-var getCustomStyles = function getCustomStyles() {
+var getCustomStyles = function getCustomStyles(size) {
   return {
     control: function control() {
       return {
@@ -3008,7 +3077,7 @@ var getCustomStyles = function getCustomStyles() {
     multiValueLabel: function multiValueLabel(provided) {
       return Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
         padding: _multiValueLabel.padding
-      }), ddsTypography.getFontStyling(typographyTypes$5.multiValueLabel)), {
+      }), ddsTypography.getFontStyling(typographyTypes$5.multiValueLabel[size])), {
         color: _multiValueLabel.color
       });
     },
@@ -3258,7 +3327,7 @@ var SelectInner = function SelectInner(props, ref) {
     inputId: uniqueId,
     name: uniqueId,
     classNamePrefix: prefix,
-    styles: getCustomStyles(),
+    styles: getCustomStyles(componentSize),
     filterOption: function filterOption(option, inputValue) {
       var label = option.label;
       return ddsCore.searchFilter(label, inputValue) || inputValue === '';

package/dist/components/AppShell/AppShell.d.ts

@@ -1,6 +1,7 @@
 import { PropsWithChildren, ReactElement } from 'react';
 import { User } from './Navigation/TopBar';
 import { OverflowMenuProps } from '../OverflowMenu';
+import { Environment } from '@norges-domstoler/development-utils';
 export type AppShellProps = PropsWithChildren<{
     /**
      * Versjon på appen på formatet 0.0.0
@@ -15,6 +16,11 @@ export type AppShellProps = PropsWithChildren<{
      * Menyvalg som skal vises i OverflowMenu knyttet til "bruker"-knappen.
      */
     userMenuItems?: OverflowMenuProps['items'];
+    /**
+     * `environment` brukes for å  vise en banner øverst i appen som viser hvilket miljø du er i.
+     * Når environment er undefined eller `"PROD"` så vises ikke banneret.
+     */
+    environment?: Environment;
 }>;
 export type AppShellNavigationProps = {
     /**
@@ -26,4 +32,7 @@ export type AppShellNavigationProps = {
      */
     external?: ReactElement[];
 };
-export declare const AppShell: ({ children, version, navigation: { internal, external }, user, userMenuItems, }: AppShellProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppShell: {
+    ({ children, version, navigation: { internal, external }, user, userMenuItems, environment, }: AppShellProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/dist/components/AppShell/AppShell.js

@@ -1,7 +1,9 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import styled from 'styled-components';
 import { appShellTokens } from './AppShell.tokens.js';
 import { Navigation } from './Navigation/Navigation.js';
+import { ENVIRONMENT_BANNER_HEIGHT, EnvironmentBanner } from '@norges-domstoler/development-utils';
+import { AppShellContextProvider } from './AppShellContext.js';
 
 var AppShellContainer = styled.div.withConfig({
   displayName: "AppShell__AppShellContainer",
@@ -10,29 +12,45 @@ var AppShellContainer = styled.div.withConfig({
 var MainContent = styled.main.withConfig({
   displayName: "AppShell__MainContent",
   componentId: "sc-1c8yu5p-1"
-})(["min-height:calc(100vh - ", ");margin-top:", ";@media (min-width:", "){min-height:unset;margin-top:0;min-width:calc(100vw - ", ");max-width:calc(100vw - ", ");}"], appShellTokens.navigation.topBar.height, appShellTokens.navigation.topBar.height, appShellTokens.navigation.mobile.breakpoint, appShellTokens.navigation.width, appShellTokens.navigation.width);
-var AppShell = function AppShell(_ref) {
-  var children = _ref.children,
-    _ref$version = _ref.version,
-    version = _ref$version === void 0 ? '' : _ref$version,
-    _ref$navigation = _ref.navigation,
-    _ref$navigation$inter = _ref$navigation.internal,
-    internal = _ref$navigation$inter === void 0 ? [] : _ref$navigation$inter,
-    _ref$navigation$exter = _ref$navigation.external,
-    external = _ref$navigation$exter === void 0 ? [] : _ref$navigation$exter,
-    user = _ref.user,
-    userMenuItems = _ref.userMenuItems;
-  return jsxs(AppShellContainer, {
-    children: [jsx(Navigation, {
-      user: user,
-      userMenuItems: userMenuItems,
-      version: version,
-      internal: internal,
-      external: external
-    }), jsx(MainContent, {
-      children: children
-    })]
+})(["min-height:calc(100vh - ", ");margin-top:", ";@media (min-width:", "){min-height:unset;margin-top:", ";margin-left:", ";min-width:calc(100vw - ", ");max-width:calc(100vw - ", ");}"], appShellTokens.navigation.topBar.height, function (_ref) {
+  var environmentBannerActive = _ref.environmentBannerActive;
+  return environmentBannerActive ? "calc(".concat(ENVIRONMENT_BANNER_HEIGHT, " + ").concat(appShellTokens.navigation.topBar.height, ")") : appShellTokens.navigation.topBar.height;
+}, appShellTokens.navigation.mobile.breakpoint, function (_ref2) {
+  var environmentBannerActive = _ref2.environmentBannerActive;
+  return environmentBannerActive ? ENVIRONMENT_BANNER_HEIGHT : 0;
+}, appShellTokens.navigation.width, appShellTokens.navigation.width, appShellTokens.navigation.width);
+var AppShell = function AppShell(_ref3) {
+  var children = _ref3.children,
+    _ref3$version = _ref3.version,
+    version = _ref3$version === void 0 ? '' : _ref3$version,
+    _ref3$navigation = _ref3.navigation,
+    _ref3$navigation$inte = _ref3$navigation.internal,
+    internal = _ref3$navigation$inte === void 0 ? [] : _ref3$navigation$inte,
+    _ref3$navigation$exte = _ref3$navigation.external,
+    external = _ref3$navigation$exte === void 0 ? [] : _ref3$navigation$exte,
+    user = _ref3.user,
+    userMenuItems = _ref3.userMenuItems,
+    _ref3$environment = _ref3.environment,
+    environment = _ref3$environment === void 0 ? 'PROD' : _ref3$environment;
+  var environmentBannerActive = environment !== 'PROD';
+  return jsx(AppShellContextProvider, {
+    children: jsxs(AppShellContainer, {
+      children: [jsx(EnvironmentBanner, {
+        environment: environment
+      }), jsx(Navigation, {
+        user: user,
+        userMenuItems: userMenuItems,
+        version: version,
+        internal: internal,
+        external: external,
+        environmentBannerActive: environmentBannerActive
+      }), jsx(MainContent, {
+        environmentBannerActive: environmentBannerActive,
+        children: children
+      })]
+    })
   });
 };
+AppShell.displayName = 'AppShell';
 
 export { AppShell };

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

@@ -2,11 +2,14 @@ import { ComponentProps } from 'react';
 import { AppShell } from '.';
 declare const _default: {
     title: string;
-    component: (({ children, version, navigation: { internal, external }, user, userMenuItems, }: import("./AppShell").AppShellProps) => import("react/jsx-runtime").JSX.Element) & {
+    component: {
+        ({ children, version, navigation: { internal, external }, user, userMenuItems, environment, }: import("./AppShell").AppShellProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    } & {
         NavItem: {
-            <T extends import("@norges-domstoler/dds-core").As = "a">({ as: _as, active, icon, external, children, ...rest }: import("react").PropsWithoutRef<ComponentProps<T>> & {
+            <T extends import("@norges-domstoler/dds-core").As = "a">({ as: _as, active, icon, external, children, onClick: propOnClick, ...rest }: import("react").PropsWithoutRef<ComponentProps<T>> & {
                 as?: T | undefined;
-            } & ({
+            } & (({
                 icon: import("@norges-domstoler/dds-icons").SvgIcon;
                 active?: boolean | undefined;
                 external?: false | undefined;
@@ -14,6 +17,8 @@ declare const _default: {
                 external: true;
                 active?: false | undefined;
                 icon?: undefined;
+            }) & {
+                onClick?: import("react").MouseEventHandler | undefined;
             })): import("react/jsx-runtime").JSX.Element;
             displayName: string;
         };

package/dist/components/AppShell/AppShellContext.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode, type SetStateAction, type Dispatch } from 'react';
+type AppShellContextValues = {
+    isOpen: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+};
+export declare const AppShellContextProvider: ({ children, }: {
+    children: ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useAppShellContext: () => AppShellContextValues;
+export {};

package/dist/components/AppShell/AppShellContext.js

@@ -0,0 +1,27 @@
+import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useContext, createContext } from 'react';
+
+var AppShellContext = /*#__PURE__*/createContext({
+  isOpen: false,
+  setOpen: function setOpen() {}
+});
+var AppShellContextProvider = function AppShellContextProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setOpen = _useState2[1];
+  return jsx(AppShellContext.Provider, {
+    value: {
+      isOpen: isOpen,
+      setOpen: setOpen
+    },
+    children: children
+  });
+};
+var useAppShellContext = function useAppShellContext() {
+  return useContext(AppShellContext);
+};
+
+export { AppShellContextProvider, useAppShellContext };

package/dist/components/AppShell/Navigation/Navigation.d.ts

@@ -8,5 +8,6 @@ export type NavigationProps = {
     external: ReactElement[];
     user: User;
     userMenuItems?: OverflowMenuProps['items'];
+    environmentBannerActive: boolean;
 };
-export declare const Navigation: ({ version, user, userMenuItems, internal, external, }: NavigationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Navigation: ({ version, user, userMenuItems, internal, external, environmentBannerActive, }: NavigationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/AppShell/Navigation/Navigation.js

@@ -1,24 +1,34 @@
-import { slicedToArray as _slicedToArray } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, Children } from 'react';
+import { useEffect, Children } from 'react';
 import styled from 'styled-components';
 import { appShellTokens } from '../AppShell.tokens.js';
 import { Divider } from '../../Divider/Divider.js';
 import { NavigationItem } from './NavigationItem.js';
 import { TopBar } from './TopBar.js';
 import { NavigationLogo } from './NavigationLogo.js';
+import { ENVIRONMENT_BANNER_HEIGHT } from '@norges-domstoler/development-utils';
+import { useAppShellContext } from '../AppShellContext.js';
 
 var navTokens = appShellTokens.navigation;
 var Sidebar = styled.div.withConfig({
   displayName: "Navigation__Sidebar",
   componentId: "sc-twhp5c-0"
-})(["display:flex;flex-direction:column;height:calc(100vh - ", ");width:100vw;padding:", ";color:", ";background-color:", ";box-sizing:border-box;position:fixed;top:", ";left:0;right:0;bottom:0;z-index:100;transition:transform 0.2s ease-in-out,opacity 0.2s ease-in-out;transform:translateX(", ");opacity:", ";@media (min-width:", "){height:100vh;top:0;width:", ";position:sticky;transform:translateX(0);opacity:1;}"], navTokens.topBar.height, navTokens.padding, navTokens.color, navTokens.backgroundColor, navTokens.topBar.height, function (_ref) {
-  var isOpen = _ref.isOpen;
-  return isOpen ? '0' : '-100%';
+})(["display:flex;flex-direction:column;height:calc(100vh - ", ");width:100vw;padding:", ";color:", ";background-color:", ";box-sizing:border-box;position:fixed;top:", ";left:0;right:0;bottom:0;z-index:100;transition:transform 0.2s ease-in-out,opacity 0.2s ease-in-out;transform:translateX(", ");opacity:", ";@media (min-width:", "){height:", ";top:", ";width:", ";position:fixed;transform:translateX(0);opacity:1;}"], navTokens.topBar.height, navTokens.padding, navTokens.color, navTokens.backgroundColor, function (_ref) {
+  var environmentBannerActive = _ref.environmentBannerActive;
+  return environmentBannerActive ? "calc(".concat(ENVIRONMENT_BANNER_HEIGHT, " + ").concat(navTokens.topBar.height, ")") : navTokens.topBar.height;
 }, function (_ref2) {
   var isOpen = _ref2.isOpen;
+  return isOpen ? '0' : '-100%';
+}, function (_ref3) {
+  var isOpen = _ref3.isOpen;
   return isOpen ? '1' : '0';
-}, navTokens.mobile.breakpoint, navTokens.width);
+}, navTokens.mobile.breakpoint, function (_ref4) {
+  var environmentBannerActive = _ref4.environmentBannerActive;
+  return environmentBannerActive ? "calc(100vh - ".concat(ENVIRONMENT_BANNER_HEIGHT, ")") : '100vh';
+}, function (_ref5) {
+  var environmentBannerActive = _ref5.environmentBannerActive;
+  return environmentBannerActive ? ENVIRONMENT_BANNER_HEIGHT : 0;
+}, navTokens.width);
 var LogoAndVersionContainer = styled.div.withConfig({
   displayName: "Navigation__LogoAndVersionContainer",
   componentId: "sc-twhp5c-1"
@@ -39,16 +49,16 @@ var StyledDivider = styled(Divider).withConfig({
   displayName: "Navigation__StyledDivider",
   componentId: "sc-twhp5c-5"
 })(["border-color:", ";"], navTokens.dividerColor);
-var Navigation = function Navigation(_ref3) {
-  var version = _ref3.version,
-    user = _ref3.user,
-    userMenuItems = _ref3.userMenuItems,
-    internal = _ref3.internal,
-    external = _ref3.external;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isOpen = _useState2[0],
-    setOpen = _useState2[1];
+var Navigation = function Navigation(_ref6) {
+  var version = _ref6.version,
+    user = _ref6.user,
+    userMenuItems = _ref6.userMenuItems,
+    internal = _ref6.internal,
+    external = _ref6.external,
+    environmentBannerActive = _ref6.environmentBannerActive;
+  var _useAppShellContext = useAppShellContext(),
+    isOpen = _useAppShellContext.isOpen,
+    setOpen = _useAppShellContext.setOpen;
   useEffect(function () {
     var listener = function listener(event) {
       if (event.key === 'o') {
@@ -69,9 +79,11 @@ var Navigation = function Navigation(_ref3) {
       isNavigationOpen: isOpen,
       onNavigationOpenChange: function onNavigationOpenChange(newOpen) {
         return setOpen(newOpen);
-      }
+      },
+      environmentBannerActive: environmentBannerActive
     }), jsxs(Sidebar, {
       isOpen: isOpen,
+      environmentBannerActive: environmentBannerActive,
       children: [jsxs(LogoAndVersionContainer, {
         children: [jsx(NavigationLogo, {
           children: "Lovisa"

package/dist/components/AppShell/Navigation/NavigationItem.d.ts

@@ -1,6 +1,7 @@
 import { type PropsOf, type As } from '@norges-domstoler/dds-core';
 import { SvgIcon } from '@norges-domstoler/dds-icons';
-type BaseNavigationItemProps = {
+import { type MouseEventHandler } from 'react';
+type BaseNavigationItemProps = ({
     icon: SvgIcon;
     active?: boolean;
     external?: undefined | false;
@@ -8,10 +9,12 @@ type BaseNavigationItemProps = {
     external: true;
     active?: undefined | false;
     icon?: undefined;
+}) & {
+    onClick?: MouseEventHandler;
 };
 type NavigationItemProps<T extends As = 'a'> = PropsOf<T> & BaseNavigationItemProps;
 export declare const NavigationItem: {
-    <T extends As = "a">({ as: _as, active, icon, external, children, ...rest }: NavigationItemProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends As = "a">({ as: _as, active, icon, external, children, onClick: propOnClick, ...rest }: NavigationItemProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/dist/components/AppShell/Navigation/NavigationItem.js

@@ -3,6 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
 import { Icon, OpenExternalIcon, ChevronRightIcon } from '@norges-domstoler/dds-icons';
 import { appShellTokens } from '../AppShell.tokens.js';
+import { useAppShellContext } from '../AppShellContext.js';
 
 var navTokens = appShellTokens.navigation;
 var navItemTokens = navTokens.navigationItems.item;
@@ -36,12 +37,20 @@ var NavigationItem = function NavigationItem(_a) {
     icon = _a.icon,
     external = _a.external,
     children = _a.children,
-    rest = __rest(_a, ["as", "active", "icon", "external", "children"]);
+    propOnClick = _a.onClick,
+    rest = __rest(_a, ["as", "active", "icon", "external", "children", "onClick"]);
+  var _useAppShellContext = useAppShellContext(),
+    setOpen = _useAppShellContext.setOpen;
   var Comp = _as !== null && _as !== void 0 ? _as : 'a';
+  var onClick = function onClick(e) {
+    propOnClick === null || propOnClick === void 0 ? void 0 : propOnClick(e);
+    setOpen(false);
+  };
   if (external) {
     return jsxs(ExternalNavItem, Object.assign({
       as: Comp
     }, rest, {
+      onClick: onClick,
       children: [children, jsx(Icon, {
         icon: OpenExternalIcon,
         iconSize: "inherit"
@@ -51,7 +60,8 @@ var NavigationItem = function NavigationItem(_a) {
   return jsxs(InternalNavItem, Object.assign({
     as: Comp
   }, rest, {
-    className: active ? 'active' : '',
+    onClick: onClick,
+    className: [active ? 'active' : '', rest.className].join(' '),
     children: [jsx(IconContainer, {
       children: icon && jsx(Icon, {
         icon: icon

package/dist/components/AppShell/Navigation/TopBar.d.ts

@@ -5,6 +5,7 @@ type TopBarProps = {
     userMenuItems?: OverflowMenuProps['items'];
     isNavigationOpen: boolean;
     onNavigationOpenChange: (isOpen: boolean) => void;
+    environmentBannerActive: boolean;
 };
 export type User = {
     /**Brukerens fulle navn (for- og etternavn). */
@@ -18,5 +19,5 @@ export type Embete = {
     /**Hvilken instans embetet er. */
     type: EmbeteType;
 };
-export declare const TopBar: ({ user, userMenuItems, isNavigationOpen, onNavigationOpenChange, }: TopBarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TopBar: ({ user, userMenuItems, isNavigationOpen, onNavigationOpenChange, environmentBannerActive, }: TopBarProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/AppShell/Navigation/TopBar.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import styled from 'styled-components';
 import { CloseIcon, MenuIcon } from '@norges-domstoler/dds-icons';
+import { ENVIRONMENT_BANNER_HEIGHT } from '@norges-domstoler/development-utils';
 import { EmbeteIcon } from './EmbeteIcon.js';
 import { appShellTokens } from '../AppShell.tokens.js';
 import { NavigationLogo } from './NavigationLogo.js';
@@ -32,18 +33,23 @@ var IconButtonText = styled.span.withConfig({
 var Bar = styled.div.withConfig({
   displayName: "TopBar__Bar",
   componentId: "sc-1mmx14i-4"
-})(["display:flex;align-items:center;justify-content:space-between;gap:", ";width:100vw;height:", ";color:", ";background-color:", ";box-sizing:border-box;z-index:101;position:fixed;top:0;left:0;right:0;@media (min-width:", "){justify-content:flex-end;background-color:transparent;margin-left:", ";width:calc(100vw - ", ");", "{display:none;}", "{padding-right:calc(2 * ", ");gap:", ";}", "{background-color:", ";color:", ";box-shadow:8px 16px 32px 0px rgba(0,0,0,0.1);border-radius:", ";", "{display:unset;}}}"], navTokens.topBar.gap, navTokens.topBar.height, navTokens.color, navTokens.backgroundColor, navTokens.mobile.breakpoint, navTokens.width, navTokens.width, LogoBurgerGroup, ActionButtonGroup, navTokens.topBar.gap, floatingActionButtons.gap, IconButton, floatingActionButtons.backgroundColor, floatingActionButtons.textColor, floatingActionButtons.borderRadius, IconButtonText);
-var TopBar = function TopBar(_ref) {
-  var user = _ref.user,
-    userMenuItems = _ref.userMenuItems,
-    isNavigationOpen = _ref.isNavigationOpen,
-    onNavigationOpenChange = _ref.onNavigationOpenChange;
+})(["display:flex;align-items:center;justify-content:space-between;gap:", ";width:100vw;height:", ";color:", ";background-color:", ";box-sizing:border-box;z-index:101;position:fixed;top:", ";left:0;right:0;@media (min-width:", "){justify-content:flex-end;background-color:transparent;margin-left:", ";width:calc(100vw - ", ");pointer-events:none;& > *{pointer-events:initial;}", "{display:none;}", "{padding-right:calc(2 * ", ");gap:", ";}", "{background-color:", ";color:", ";box-shadow:8px 16px 32px 0px rgba(0,0,0,0.1);border-radius:", ";", "{display:unset;}}}"], navTokens.topBar.gap, navTokens.topBar.height, navTokens.color, navTokens.backgroundColor, function (_ref) {
+  var environmentBannerActive = _ref.environmentBannerActive;
+  return environmentBannerActive ? ENVIRONMENT_BANNER_HEIGHT : '0';
+}, navTokens.mobile.breakpoint, navTokens.width, navTokens.width, LogoBurgerGroup, ActionButtonGroup, navTokens.topBar.gap, floatingActionButtons.gap, IconButton, floatingActionButtons.backgroundColor, floatingActionButtons.textColor, floatingActionButtons.borderRadius, IconButtonText);
+var TopBar = function TopBar(_ref2) {
+  var user = _ref2.user,
+    userMenuItems = _ref2.userMenuItems,
+    isNavigationOpen = _ref2.isNavigationOpen,
+    onNavigationOpenChange = _ref2.onNavigationOpenChange,
+    environmentBannerActive = _ref2.environmentBannerActive;
   var Icon = function Icon(props) {
     return jsx(EmbeteIcon, Object.assign({}, props, {
       type: user.embete.type
     }));
   };
   return jsxs(Bar, {
+    environmentBannerActive: environmentBannerActive,
     children: [jsxs(LogoBurgerGroup, {
       children: [jsx(IconButton, {
         icon: isNavigationOpen ? CloseIcon : MenuIcon,

package/dist/components/Select/Select.js

@@ -153,7 +153,7 @@ var SelectInner = function SelectInner(props, ref) {
     inputId: uniqueId,
     name: uniqueId,
     classNamePrefix: prefix,
-    styles: getCustomStyles(),
+    styles: getCustomStyles(componentSize),
     filterOption: function filterOption(option, inputValue) {
       var label = option.label;
       return searchFilter(label, inputValue) || inputValue === '';

package/dist/components/Select/Select.styles.d.ts

@@ -14,5 +14,5 @@ type StyledContainerProps = {
 export declare const Container: import("styled-components").StyledComponent<"div", any, StyledContainerProps, never>;
 export declare const InnerSingleValue: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const StyledIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
-export declare const getCustomStyles: <TOption>() => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
+export declare const getCustomStyles: <TOption>(size: InputSize) => Partial<StylesConfig<TOption, boolean, GroupBase<TOption>>>;
 export {};

package/dist/components/Select/Select.styles.js

@@ -52,7 +52,7 @@ var StyledIcon = styled(Icon).withConfig({
   displayName: "Selectstyles__StyledIcon",
   componentId: "sc-19jkd5s-2"
 })(["margin-right:", ";"], icon.marginRight);
-var getCustomStyles = function getCustomStyles() {
+var getCustomStyles = function getCustomStyles(size) {
   return {
     control: function control() {
       return {
@@ -121,7 +121,7 @@ var getCustomStyles = function getCustomStyles() {
     multiValueLabel: function multiValueLabel(provided) {
       return Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
         padding: _multiValueLabel.padding
-      }), getFontStyling(typographyTypes.multiValueLabel)), {
+      }), getFontStyling(typographyTypes.multiValueLabel[size])), {
         color: _multiValueLabel.color
       });
     },

package/dist/components/Select/Select.tokens.d.ts

@@ -10,7 +10,9 @@ export declare const typographyTypes: {
         [k in InputSize]: StaticTypographyType;
     };
     groupHeading: StaticTypographyType;
-    multiValueLabel: StaticTypographyType;
+    multiValueLabel: {
+        [k in InputSize]: StaticTypographyType;
+    };
 };
 export declare const selectTokens: {
     control: {

package/dist/components/Select/Select.tokens.js

@@ -11,13 +11,18 @@ var placeholderTypographyTypes = {
   small: 'supportingStylePlaceholderText02',
   tiny: 'supportingStylePlaceholderText03'
 };
+var multiValueLabelTypographyTypes = {
+  medium: 'bodySans01',
+  small: 'bodySans01',
+  tiny: 'supportingStyleTiny01'
+};
 var typographyTypes = {
   control: inputTypographyTypes,
   option: inputTypographyTypes,
   placeholder: placeholderTypographyTypes,
   noOptionsMessage: placeholderTypographyTypes,
   groupHeading: 'supportingStyleHelperText01',
-  multiValueLabel: 'bodySans01'
+  multiValueLabel: multiValueLabelTypographyTypes
 };
 var control = {
   borderRadius: borderRadius.RadiiDdsBorderRadius1Radius,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "13.8.0",
+  "version": "13.8.2",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",
@@ -93,6 +93,7 @@
     "@norges-domstoler/dds-form": "*",
     "@norges-domstoler/dds-icons": "*",
     "@norges-domstoler/dds-typography": "*",
+    "@norges-domstoler/development-utils": "*",
     "attr-accept": "^2.2.2",
     "file-selector": "^0.6.0",
     "focus-visible": "^5.2.0",