@norges-domstoler/dds-components 9.2.0-beta.0 → 9.2.0

package/dist/components/Pagination/Pagination.tokens.js

@@ -1,23 +1,24 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
-var Spacing = ddsBaseTokens.spacing,
-    Colors = ddsBaseTokens.colors;
-var listBase = {
-  color: Colors.DdsColorNeutralsGray7
+var spacing = ddsBaseTokens.spacing,
+    colors = ddsBaseTokens.colors;
+var list = {
+  gap: spacing.SizesDdsSpacingLocalX075
+};
+var truncationIcon = {
+  color: colors.DdsColorNeutralsGray7
+};
+var outerContainer = {
+  gap: spacing.SizesDdsSpacingLocalX075
+};
+var indicatorsContainer = {
+  gap: spacing.SizesDdsSpacingLocalX075
 };
 var paginationTokens = {
-  container: {
-    spaceBetweenItems: Spacing.SizesDdsSpacingLocalX075
-  },
-  indicatorsContainer: {
-    spacing: Spacing.SizesDdsSpacingLocalX075
-  },
-  list: {
-    base: listBase
-  },
-  paginationItem: {
-    spacing: Spacing.SizesDdsSpacingLocalX075
-  }
+  outerContainer: outerContainer,
+  indicatorsContainer: indicatorsContainer,
+  truncationIcon: truncationIcon,
+  list: list
 };
 
 export { paginationTokens };

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

@@ -8,7 +8,6 @@ export declare const popoverTokens: {
         padding: string;
     };
     closeButton: {
-        position: string;
         top: string;
         right: string;
     };

package/dist/components/Popover/Popover.tokens.js

@@ -5,7 +5,6 @@ var wrapper = {
   padding: "".concat(spacing.SizesDdsSpacingLocalX075, " ").concat(spacing.SizesDdsSpacingLocalX1, " ").concat(spacing.SizesDdsSpacingLocalX15, " ").concat(spacing.SizesDdsSpacingLocalX1)
 };
 var closeButton = {
-  position: 'absolute',
   top: spacing.SizesDdsSpacingLocalX025,
   right: spacing.SizesDdsSpacingLocalX025
 };

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

@@ -1,4 +1,9 @@
 import { IconSize } from '../Icon';
+import { StaticTypographyType } from '../Typography';
+export declare const typographyTypes: {
+    number: StaticTypographyType;
+    label: StaticTypographyType;
+};
 export declare const progressTrackerTokens: {
     itemsWrapper: {
         gap: string;
@@ -15,7 +20,6 @@ export declare const progressTrackerTokens: {
         size: string;
         borderWidth: string;
         iconSize: IconSize;
-        fontSize: string;
         active: {
             borderColor: string;
             color: string;
@@ -48,17 +52,16 @@ export declare const progressTrackerTokens: {
         };
     };
     itemText: {
-        fontFamily: string;
-        fontSize: string;
+        textDecoration: string;
         active: {
             color: string;
-            textDecoration: string;
+            textDecorationColor: string;
         };
         inactive: {
             color: string;
-            textDecoration: string;
+            textDecorationColor: string;
             hover: {
-                textDecoration: string;
+                textDecorationColor: string;
             };
         };
         disabled: {

package/dist/components/ProgressTracker/ProgressTracker.tokens.js

@@ -1,8 +1,12 @@
 import { ddsBaseTokens } from '@norges-domstoler/dds-design-tokens';
 
 var colors = ddsBaseTokens.colors,
-    spacing = ddsBaseTokens.spacing,
-    font = ddsBaseTokens.font;
+    spacing = ddsBaseTokens.spacing;
+    ddsBaseTokens.font;
+var typographyTypes = {
+  number: 'bodySans01',
+  label: 'bodySans03'
+};
 var itemsWrapper = {
   gap: spacing.SizesDdsSpacingLocalX0125
 };
@@ -18,7 +22,6 @@ var itemNumber = {
   size: '28px',
   borderWidth: '2px',
   iconSize: 'small',
-  fontSize: font.DdsFontBodySans01FontSize,
   active: {
     borderColor: colors.DdsColorInteractiveBase,
     color: colors.DdsColorNeutralsWhite,
@@ -51,17 +54,16 @@ var itemNumber = {
   }
 };
 var itemText = {
-  fontFamily: font.DdsFontSupportingStyleLabel01FontFamily,
-  fontSize: font.DdsFontSupportingStyleLabel01FontSize,
+  textDecoration: 'underline',
   active: {
     color: colors.DdsColorNeutralsGray9,
-    textDecoration: 'underline'
+    textDecorationColor: colors.DdsColorNeutralsGray9
   },
   inactive: {
     color: colors.DdsColorNeutralsGray7,
-    textDecoration: 'none',
+    textDecorationColor: 'transparent',
     hover: {
-      textDecoration: 'underline'
+      textDecorationColor: colors.DdsColorNeutralsGray7
     }
   },
   disabled: {
@@ -77,4 +79,4 @@ var progressTrackerTokens = {
   itemText: itemText
 };
 
-export { progressTrackerTokens };
+export { progressTrackerTokens, typographyTypes };

package/dist/components/ProgressTracker/ProgressTrackerItem.js

@@ -10,9 +10,10 @@ import 'tslib';
 import '../../icons/utils/StyledSvg.js';
 import { CheckIcon } from '../../icons/tsx/check.js';
 import { Icon } from '../Icon/Icon.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { useProgressTrackerContext } from './ProgressTracker.context.js';
-import { progressTrackerTokens } from './ProgressTracker.tokens.js';
+import { progressTrackerTokens, typographyTypes } from './ProgressTracker.tokens.js';
 
 var toItemState = function toItemState(active, completed, disabled) {
   if (disabled) {
@@ -36,7 +37,7 @@ var ItemWrapper = styled.li.withConfig({
 var ItemNumber = styled.div.withConfig({
   displayName: "ProgressTrackerItem__ItemNumber",
   componentId: "sc-1j9qaj9-1"
-})(["border-radius:50%;border:", " solid;width:", ";height:", ";display:flex;align-items:center;justify-content:center;z-index:2;font-size:", ";font-weight:600;", ""], itemNumber.borderWidth, itemNumber.size, itemNumber.size, itemNumber.fontSize, function (_ref) {
+})(["transition:background-color 0.2s,border-color 0.2s,color 0.2s;border-radius:50%;border:", " solid;width:", ";height:", ";display:flex;align-items:center;justify-content:center;z-index:2;", " font-weight:600;", ""], itemNumber.borderWidth, itemNumber.size, itemNumber.size, getFontStyling(typographyTypes.number), function (_ref) {
   var state = _ref.state;
 
   switch (state) {
@@ -59,17 +60,17 @@ var ItemNumber = styled.div.withConfig({
 var ItemText = styled.div.withConfig({
   displayName: "ProgressTrackerItem__ItemText",
   componentId: "sc-1j9qaj9-2"
-})(["font-family:", ";font-size:", ";text-align:start;", ""], itemText.fontFamily, itemText.fontSize, function (_ref2) {
+})(["", " text-align:start;text-decoration:", ";transition:text-decoration-color 0.2s;", ";"], getFontStyling(typographyTypes.label), itemText.textDecoration, function (_ref2) {
   var state = _ref2.state;
 
   switch (state) {
     case 'activeCompleted':
     case 'activeIncomplete':
-      return css(["color:", ";text-decoration ", ";"], itemText.active.color, itemText.active.textDecoration);
+      return css(["color:", ";text-decoration-color:", ";"], itemText.active.color, itemText.active.textDecorationColor);
 
     case 'inactiveCompleted':
     case 'inactiveIncomplete':
-      return css(["color:", ";text-decoration ", ";"], itemText.inactive.color, itemText.inactive.textDecoration);
+      return css(["color:", ";text-decoration-color:", ";"], itemText.inactive.color, itemText.inactive.textDecorationColor);
 
     case 'disabled':
       return css(["color:", ";text-decoration:", ";"], itemText.disabled.color, itemText.disabled.textDecoration);
@@ -91,7 +92,7 @@ var ItemContentWrapper = styled.div.withConfig({
       }
     }, ItemText, function () {
       if (state !== 'disabled') {
-        return css(["text-decoration ", ";"], itemText.inactive.hover.textDecoration);
+        return css(["text-decoration-color:", ";"], itemText.inactive.hover.textDecorationColor);
       }
     });
   }

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

@@ -1,22 +1,22 @@
 import { RadioButtonProps } from '.';
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required">, "id" | "className"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "aria-describedby" | "onChange" | "checked" | "readOnly" | "required">, "id" | "className"> & {
         label?: string | undefined;
         disabled?: boolean | undefined;
         error?: boolean | undefined;
     } & {
-        'aria-describedby'?: string | undefined;
-        onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
         name?: string | undefined;
         value?: string | number | readonly string[] | undefined;
+        'aria-describedby'?: string | undefined;
+        onChange?: import("react").ChangeEventHandler<HTMLInputElement> | undefined;
         checked?: boolean | undefined;
         readOnly?: boolean | undefined;
         required?: boolean | undefined;
     } & {
         children?: import("react").ReactNode;
     } & {
-        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "aria-describedby" | "onChange" | "name" | "value" | "checked" | "readOnly" | "required"> | undefined;
+        htmlProps?: Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "name" | "value" | "aria-describedby" | "onChange" | "checked" | "readOnly" | "required"> | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {

package/dist/components/RadioButton/RadioButtonGroup.d.ts

@@ -1,6 +1,5 @@
 import { ChangeEvent, HTMLAttributes, ReactElement, Ref } from 'react';
-import { BaseComponentPropsWithChildren } from '../../types';
-declare type Direction = 'column' | 'row';
+import { BaseComponentPropsWithChildren, Direction } from '../../types';
 export declare type RadioButtonGroupProps<T extends string | number> = BaseComponentPropsWithChildren<HTMLDivElement, {
     /** Gir alle barna `name` prop.*/
     name?: string;
@@ -51,8 +50,7 @@ export declare const RadioButtonGroup: <T extends string | number = string>(prop
 } & {
     children?: import("react").ReactNode;
 } & {
-    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, "onChange"> | undefined; /**Funksjonen for onChange-event for barna. */
+    htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, "onChange"> | undefined;
 } & {
     ref?: Ref<HTMLDivElement> | undefined;
 }) => ReactElement;
-export {};

package/dist/components/RadioButton/RadioButtonGroup.js

@@ -2,7 +2,6 @@ import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBab
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useId } from 'react';
-import styled, { css } from 'styled-components';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
@@ -11,25 +10,14 @@ import '../../helpers/Input/Input.tokens.js';
 import { renderInputMessage } from '../../helpers/Input/Input.utils.js';
 import '../../helpers/Paper/Paper.js';
 import { RequiredMarker } from '../../helpers/RequiredMarker/RequiredMarker.js';
-import { radioButtonGroupTokens } from './RadioButtonGroup.tokens.js';
 import { RadioButtonGroupContext } from './RadioButtonGroupContext.js';
 import { Typography } from '../Typography/Typography/Typography.js';
 import { getBaseHTMLProps } from '../../types/BaseComponentProps.js';
 import '../Typography/Link/Link.js';
 import { combineHandlers } from '../../utils/combineHandlers.js';
 import '../../utils/color.js';
-
-var Container = styled.div.withConfig({
-  displayName: "RadioButtonGroup__Container",
-  componentId: "sc-1xsll60-0"
-})(["display:flex;flex-direction:column;", ""], radioButtonGroupTokens.container.base);
-var GroupContainer = styled.div.withConfig({
-  displayName: "RadioButtonGroup__GroupContainer",
-  componentId: "sc-1xsll60-1"
-})(["display:flex;", ""], function (_ref) {
-  var direction = _ref.direction;
-  return css(["flex-direction:", ";", ""], direction, radioButtonGroupTokens.groupContainer.direction[direction].base);
-});
+import { OuterGroupContainer, GroupContainer } from '../../helpers/SelectionControl/SelectionControl.styles.js';
+import '../../helpers/SelectionControl/SelectionControl.tokens.js';
 
 var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
   var name = props.name,
@@ -79,7 +67,7 @@ var RadioButtonGroupInner = function RadioButtonGroupInner(props, ref) {
     value: groupValue,
     onChange: handleChange
   };
-  return jsxs(Container, Object.assign({}, getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
+  return jsxs(OuterGroupContainer, Object.assign({}, getBaseHTMLProps(id, className, Object.assign(Object.assign({}, htmlProps), {
     'aria-required': ariaRequired
   }), rest), {
     ref: ref

package/dist/components/RadioButton/RadioButtonGroup.stories.d.ts

@@ -10,7 +10,7 @@ declare const _default: {
         tip?: string | undefined;
         disabled?: boolean | undefined;
         readOnly?: boolean | undefined;
-        direction?: ("row" | "column") | undefined;
+        direction?: import("../../types").Direction | undefined;
         value?: T | undefined;
         groupId?: string | undefined;
     } & {

package/dist/components/Search/Search.js

@@ -3,7 +3,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId } from 'react';
 import styled, { css } from 'styled-components';
 import { Button } from '../Button/Button.js';
-import { searchTokens } from './Search.tokens.js';
+import { searchTokens, typographyTypes } from './Search.tokens.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
@@ -20,6 +20,7 @@ import { SearchIcon } from '../../icons/tsx/search.js';
 import '../Typography/Typography/Typography.js';
 import { Label } from '../Typography/Label/Label.js';
 import '../Typography/Link/Link.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
 
 var input = searchTokens.input,
     outerContainer = searchTokens.outerContainer,
@@ -44,7 +45,7 @@ var Input = styled(Input$1).withConfig({
   componentId: "sc-1ax3s9s-0"
 })(["&[type='search']::-webkit-search-decoration,&[type='search']::-webkit-search-cancel-button,&[type='search']::-webkit-search-results-button,&[type='search']::-webkit-search-results-decoration{-webkit-appearance:none;}padding-right:", ";", ""], input.base.paddingRight, function (_ref) {
   var componentSize = _ref.componentSize;
-  return css(["padding-top:", ";padding-bottom:", ";padding-left:", ";", ""], input.sizes[componentSize].paddingTop, input.sizes[componentSize].paddingBottom, input.sizes[componentSize].paddingLeft, input.sizes[componentSize].font);
+  return css(["padding-top:", ";padding-bottom:", ";padding-left:", ";", ""], input.sizes[componentSize].paddingTop, input.sizes[componentSize].paddingBottom, input.sizes[componentSize].paddingLeft, getFontStyling(typographyTypes[componentSize]));
 });
 var StyledIcon = styled(Icon).withConfig({
   displayName: "Search__StyledIcon",

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

@@ -1,3 +1,8 @@
+import { StaticTypographyType } from '../Typography';
+import { SearchSize } from './Search';
+export declare const typographyTypes: {
+    [k in SearchSize]: StaticTypographyType;
+};
 export declare const searchTokens: {
     input: {
         base: {
@@ -6,40 +11,16 @@ export declare const searchTokens: {
         };
         sizes: {
             small: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 paddingTop: string;
                 paddingBottom: string;
                 paddingLeft: string;
             };
             medium: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 paddingTop: string;
                 paddingBottom: string;
                 paddingLeft: string;
             };
             large: {
-                font: {
-                    lineHeight: any;
-                    fontSize: string;
-                    letterSpacing: any;
-                    fontFamily: any;
-                    fontWeight: any;
-                    fontStyle: any;
-                };
                 paddingTop: string;
                 paddingBottom: string;
                 paddingLeft: string;

package/dist/components/Search/Search.tokens.js

@@ -1,9 +1,13 @@
 import { ddsBaseTokens, ddsReferenceTokens } from '@norges-domstoler/dds-design-tokens';
 
 var spacing = ddsBaseTokens.spacing,
-    fontPackages = ddsBaseTokens.fontPackages,
     iconSizes = ddsBaseTokens.iconSizes;
 var textDefault = ddsReferenceTokens.textDefault;
+var typographyTypes = {
+  small: 'bodySans01',
+  medium: 'bodySans02',
+  large: 'bodySans04'
+};
 var paddingLeftSmall = "".concat(spacing.SizesDdsSpacingLocalX075NumberPx + iconSizes.DdsIconsizeSmallNumberPx + spacing.SizesDdsSpacingLocalX05NumberPx, "px");
 var paddingLeftMedium = "".concat(spacing.SizesDdsSpacingLocalX075NumberPx + iconSizes.DdsIconsizeMediumNumberPx + spacing.SizesDdsSpacingLocalX05NumberPx, "px");
 var paddingLeftLarge = "".concat(spacing.SizesDdsSpacingLocalX075NumberPx + iconSizes.DdsIconsizeMediumNumberPx + spacing.SizesDdsSpacingLocalX05NumberPx, "px");
@@ -14,19 +18,16 @@ var input = {
   },
   sizes: {
     small: {
-      font: fontPackages.body_sans_01.base,
       paddingTop: spacing.SizesDdsSpacingLocalX05,
       paddingBottom: spacing.SizesDdsSpacingLocalX05,
       paddingLeft: paddingLeftSmall
     },
     medium: {
-      font: fontPackages.body_sans_02.base,
       paddingTop: spacing.SizesDdsSpacingLocalX075,
       paddingBottom: spacing.SizesDdsSpacingLocalX075,
       paddingLeft: paddingLeftMedium
     },
     large: {
-      font: fontPackages.body_sans_04.base,
       paddingTop: spacing.SizesDdsSpacingLocalX1,
       paddingBottom: spacing.SizesDdsSpacingLocalX1,
       paddingLeft: paddingLeftLarge
@@ -61,4 +62,4 @@ var searchTokens = {
   outerContainer: outerContainer
 };
 
-export { searchTokens };
+export { searchTokens, typographyTypes };

package/dist/components/Select/Select.js

@@ -36,11 +36,11 @@ var createSelectOptions = function createSelectOptions() {
   });
 };
 
-var DDSOption = function DDSOption(props) {
+var DDSOption = function DDSOption(props, componentSize) {
   return jsxs(Option, Object.assign({}, props, {
     children: [props.isSelected && jsx(Icon, {
       icon: CheckIcon,
-      iconSize: "medium"
+      iconSize: getFormInputIconSize(componentSize)
     }), props.children]
   }));
 };
@@ -191,11 +191,12 @@ var SelectInner = function SelectInner(props, ref) {
     components: {
       Option: customOptionElement ? function (props) {
         return CustomOption(props, customOptionElement);
-      } : DDSOption,
+      } : function (props) {
+        return DDSOption(props, componentSize);
+      },
       NoOptionsMessage: DDSNoOptionsMessage,
       Input: function Input(props) {
         return DDSInput(Object.assign(Object.assign({}, props), {
-          required: required,
           'aria-required': ariaRequired
         }), hasErrorMessage, spaceSeparatedIdListGenerator([singleValueId, tip ? tipId : undefined, errorMessage ? errorMessageId : undefined]));
       },

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

@@ -7,8 +7,9 @@ import { selection } from '../../helpers/styling/selection.js';
 import '../ScrollableContainer/Scrollbar.js';
 import '../ScrollableContainer/ScrollableContainer.js';
 import { scrollbarStyling } from '../ScrollableContainer/scrollbarStyling.js';
-import { selectTokens } from './Select.tokens.js';
+import { selectTokens, typographyTypes } from './Select.tokens.js';
 import { Icon } from '../Icon/Icon.js';
+import { getFontStyling } from '../Typography/Typography.utils.js';
 
 var _control = selectTokens.control,
     _menu = selectTokens.menu,
@@ -35,7 +36,7 @@ var Container = styled.div.withConfig({
 }, selection, function (_ref2) {
   var componentSize = _ref2.componentSize,
       isMulti = _ref2.isMulti;
-  return css([".", "__control{padding:", ";", ";}.", "__option{", "}.", "__placeholder{", "}"], prefix, isMulti && componentSize === 'tiny' ? _control.sizes.small.padding : isMulti && componentSize !== 'tiny' ? _control.isMulti.sizes[componentSize].padding : _control.sizes[componentSize].padding, _control.sizes[componentSize].font, prefix, _option.sizes[componentSize].font, prefix, _placeholder.sizes[componentSize].font);
+  return css([".", "__control{padding:", ";", "}.", "__option{", "}.", "__placeholder{", "}.", "__menu-notice--no-options{", "}"], prefix, isMulti && componentSize === 'tiny' ? _control.sizes.small.padding : isMulti && componentSize !== 'tiny' ? _control.isMulti.sizes[componentSize].padding : _control.sizes[componentSize].padding, getFontStyling(typographyTypes.control[componentSize], true), prefix, getFontStyling(typographyTypes.option[componentSize], true), prefix, getFontStyling(typographyTypes.placeholder[componentSize]), prefix, getFontStyling(typographyTypes.noOptionsMessage[componentSize]));
 }, function (_ref3) {
   var errorMessage = _ref3.errorMessage;
   return errorMessage && css([".", "__control{", "}.", "__control:hover{", "}.", "__control:focus-within{", "}"], prefix, dangerInputfield, prefix, hoverDangerInputfield, prefix, focusInputfield);
@@ -121,10 +122,11 @@ var getCustomStyles = function getCustomStyles() {
       };
     },
     multiValueLabel: function multiValueLabel(provided) {
-      return Object.assign(Object.assign(Object.assign({}, provided), {
-        padding: _multiValueLabel.padding,
+      return Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
+        padding: _multiValueLabel.padding
+      }), getFontStyling(typographyTypes.multiValueLabel)), {
         color: _multiValueLabel.color
-      }), _multiValueLabel.font);
+      });
     },
     multiValueRemove: function multiValueRemove(provided, state) {
       return state.selectProps.isDisabled ? {
@@ -166,9 +168,8 @@ var getCustomStyles = function getCustomStyles() {
       };
     },
     groupHeading: function groupHeading() {
-      return Object.assign(Object.assign({
-        color: _groupHeading.color
-      }, _groupHeading.font), {
+      return Object.assign(Object.assign({}, getFontStyling(typographyTypes.groupHeading)), {
+        color: _groupHeading.color,
         padding: _groupHeading.padding
       });
     },
@@ -181,15 +182,13 @@ var getCustomStyles = function getCustomStyles() {
       }, scrollbarStyling.webkit), scrollbarStyling.firefox);
     },
     option: function option(provided, state) {
-      return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
+      return Object.assign(Object.assign(Object.assign(Object.assign({}, provided), {
         cursor: 'pointer',
         display: 'flex',
         alignItems: 'center',
         gap: _option.base.gap,
         padding: _option.base.padding,
-        color: _option.base.color,
-        backgroundColor: _option.base.backgroundColor
-      }), _option.base.font), {
+        backgroundColor: _option.base.backgroundColor,
         '@media (prefers-reduced-motion: no-preference)': {
           transition: 'color 0.2s, background-color 0.2s'
         },
@@ -205,10 +204,10 @@ var getCustomStyles = function getCustomStyles() {
       });
     },
     noOptionsMessage: function noOptionsMessage() {
-      return Object.assign({
+      return {
         padding: _noOptionsMessage.padding,
         color: _noOptionsMessage.color
-      }, _noOptionsMessage.font);
+      };
     },
     clearIndicator: function clearIndicator() {
       return {