@norges-domstoler/dds-components 0.0.21 → 0.0.25

package/README.md

@@ -1,63 +1,75 @@
-# @norges-domstoler/dds-components
-
-[![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-components)](https://www.npmjs.com/package/@norges-domstoler/dds-components)
-
-React UI komponenter til bruk i Domstolenes tjenester.
-
-Sjekk ut [Domstolenes designsystem Elsa](https://design.domstol.no/) og [Storybook](https://domstolene.github.io/designsystem) for mer dokumentasjon og demoer.
-
-## Installasjon
-
-```sh
-npm install @norges-domstoler/dds-components
-```
-
-## Bruk
-
-```js
-import * as React from 'react';
-import { render } from 'react-dom';
-import { Button, TextInput } from '@norges-domstoler/dds-components';
-
-const App = () => (
-  <>
-    <TextInput label="Input" />
-    <Button label="Primary" />
-    <Button purpose="secondary" appearance="ghost" label="Secondary" />
-  </>
-);
-
-render(<App />, document.getElementById('root'));
-```
-
-## Komponenter
-
-Sjekk [komponentstatus](https://design.domstol.no/987b33f71/p/438035-komponenter/b/160db9) for oppdatert status.
-
-Tilgjengelige komponenter:
-
-- Breadcrumbs
-- Button
-- Card (inkludert CardAccordion)
-- Checkbox
-- Datepicker
-- DescriptionList
-- Divider
-- GlobalMessage
-- IconWrapper
-- InternaHeader
-- List
-- LocalMessage
-- Pagination
-- RadioButton
-- Search
-- Select
-- SkipToContent
-- Spinner
-- Table
-- TextInput
-- Typography
-
-## For bidragsytere
-
-Sjekk ut [guiden for bidragsytere](https://design.domstol.no/987b33f71/p/34c962-bidra/b/3611d5).
+# @norges-domstoler/dds-components
+
+[![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-components)](https://www.npmjs.com/package/@norges-domstoler/dds-components)
+
+React UI komponenter til bruk i Domstolenes tjenester.
+
+Sjekk ut [Domstolenes designsystem Elsa](https://design.domstol.no/) og [Storybook](https://domstolene.github.io/designsystem) for mer dokumentasjon og demoer.
+
+## Installasjon
+
+```sh
+npm install @norges-domstoler/dds-components
+```
+
+## Bruk
+
+```js
+import * as React from 'react';
+import { render } from 'react-dom';
+import { Button, TextInput } from '@norges-domstoler/dds-components';
+
+const App = () => (
+  <>
+    <TextInput label="Input" />
+    <Button label="Primary" />
+    <Button purpose="secondary" appearance="ghost" label="Secondary" />
+  </>
+);
+
+render(<App />, document.getElementById('root'));
+```
+
+## Komponenter
+
+Sjekk [komponentstatus](https://design.domstol.no/987b33f71/p/438035-komponenter/b/160db9) for oppdatert status.
+
+Tilgjengelige komponenter:
+
+- Breadcrumbs
+- Button
+- Card (inkludert CardAccordion)
+- Checkbox
+- Datepicker
+- DescriptionList
+- Divider
+- GlobalMessage
+- IconWrapper
+- InternaHeader
+- List
+- LocalMessage
+- Pagination
+- Popover
+- RadioButton
+- Search
+- Select
+- SkipToContent
+- Spinner
+- Table
+- TextInput
+- Typography
+
+## Release av ny versjon
+
+Det brukes en egen workflow for release av ny versjon av `@norges-domstoler/dds-components` som kjører på publisering av ny github release. Her brukes `npm publish` for å publisere en ny versjon av pakken til npm sitt pakkeregister, hvor det nye versjonsnummeret leses fra `package.json`. For å lage en ny release gjøres følgende:
+
+1. Versjonsnummeret i `package.json` må oppdateres manuelt med en egen commit i forkant av publisering av ny github release.
+
+2. Lag en ny release på github med _release tag = versjonsnummer_ for best mulig oversikt, og legg ved en passende beskrivelse av hva som er nytt i denne versjonen. Publiser så releasen når alt er klart.
+   Man kan også lage en Draft-release i forkant, og publisere denne releasen når alt som skal være med er merget inn i master.
+
+For versjonering brukes [_semantisk versjonering_](https://semver.org/) for å holde ting organisert og for å enkelt kommunisere utviklingsløpet til pakken.
+
+## For bidragsytere
+
+Sjekk ut [guiden for bidragsytere](https://design.domstol.no/987b33f71/p/34c962-bidra/b/3611d5).

package/dist/components/Card/Card.d.ts

@@ -1,6 +1,6 @@
 import { AnchorHTMLAttributes, HTMLAttributes } from 'react';
 export declare type CardColor = 'filledDark' | 'filledLight' | 'strokeDark' | 'strokeLight';
-export declare type CardType = 'info' | 'navigation';
+export declare type CardType = 'info' | 'navigation' | 'expandable';
 export declare type CardProps = {
     color?: CardColor;
     cardType?: CardType;

package/dist/components/InternalHeader/InternalHeader.types.d.ts

@@ -4,7 +4,7 @@ import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'reac
 export declare type NavigationLinkProps = {
     href: string;
     title: string;
-} & HTMLAttributes<HTMLAnchorElement>;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
 export declare type ContextMenuElementProps = {
     title: string;
     href?: string;

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

@@ -0,0 +1,33 @@
+import { HTMLAttributes, ReactNode, RefObject } from 'react';
+import { Placement } from '../../hooks';
+import * as CSS from 'csstype';
+export declare type PopoverSizeProps = {
+    width?: CSS.WidthProperty<string>;
+    height?: CSS.HeightProperty<string>;
+    minWidth?: CSS.MinWidthProperty<string>;
+    minHeight?: CSS.MinHeightProperty<string>;
+    maxWidth?: CSS.MaxWidthProperty<string>;
+    maxHeight?: CSS.MaxHeightProperty<string>;
+};
+export declare type PopoverProps = {
+    title?: string | ReactNode;
+    onCloseButtonClick?: () => void;
+    onCloseButtonBlur?: () => void;
+    isOpen?: boolean;
+    withCloseButton?: boolean;
+    anchorElement?: RefObject<HTMLElement>;
+    placement?: Placement;
+    offset?: number;
+    sizeProps?: PopoverSizeProps;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const Popover: import("react").ForwardRefExoticComponent<{
+    title?: string | ReactNode;
+    onCloseButtonClick?: (() => void) | undefined;
+    onCloseButtonBlur?: (() => void) | undefined;
+    isOpen?: boolean | undefined;
+    withCloseButton?: boolean | undefined;
+    anchorElement?: RefObject<HTMLElement> | undefined;
+    placement?: Placement | undefined;
+    offset?: number | undefined;
+    sizeProps?: PopoverSizeProps | undefined;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,15 @@
+import { CSSObject } from 'styled-components';
+export declare const popoverTokens: {
+    wrapper: {
+        base: CSSObject;
+    };
+    button: {
+        base: CSSObject;
+    };
+    title: {
+        base: CSSObject;
+    };
+    content: {
+        spaceTopNoTitle: string;
+    };
+};

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

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+export declare type PopoverGroupProps = {
+    onCloseButtonClick?: () => void;
+    onTriggerClick?: () => void;
+    isOpen?: boolean;
+    popoverId?: string;
+    children: ReactNode;
+};
+export declare const PopoverGroup: ({ isOpen, onCloseButtonClick, onTriggerClick, children, popoverId }: PopoverGroupProps) => JSX.Element;

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

@@ -0,0 +1,2 @@
+export * from './Popover';
+export * from './PopoverGroup';

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

@@ -1,13 +1,13 @@
 import * as CSS from 'csstype';
 import React from 'react';
-import { default as ReactSelect, Props as ReactSelectProps } from 'react-select';
+import { GroupBase, Props as ReactSelectProps, SelectInstance } from 'react-select';
 export declare function searchFilter(text: string, search: string): boolean;
 export declare type SelectOption = {
     label: string;
     value: string | number;
     data?: unknown;
 };
-export declare type SelectProps = {
+export declare type SelectProps<IsMulti extends boolean> = {
     label?: string;
     required?: boolean;
     readOnly?: boolean;
@@ -16,5 +16,7 @@ export declare type SelectProps = {
     width?: CSS.WidthProperty<string>;
     className?: string;
     style?: React.CSSProperties;
-} & ReactSelectProps<SelectOption>;
-export declare const Select: React.ForwardRefExoticComponent<Pick<SelectProps, keyof ReactSelectProps<SelectOption, false, import("react-select").GroupTypeBase<SelectOption>>> & React.RefAttributes<ReactSelect<SelectOption, false, import("react-select").GroupTypeBase<SelectOption>, import("react-select/src/Select").default<SelectOption, false, import("react-select").GroupTypeBase<SelectOption>>>>>;
+} & ReactSelectProps<SelectOption, IsMulti, GroupBase<SelectOption>>;
+declare type ForwardRefType<IsMulti extends boolean> = React.ForwardedRef<SelectInstance<SelectOption, IsMulti, GroupBase<SelectOption>>>;
+export declare const Select: <IsMulti extends boolean = false>({ id, label, errorMessage, tip, required, readOnly, options, isMulti, value, defaultValue, width, closeMenuOnSelect, className, style, isDisabled, isClearable, placeholder, ...rest }: SelectProps<IsMulti>, ref: ForwardRefType<IsMulti>) => JSX.Element;
+export {};

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

@@ -1,5 +1,6 @@
-import { Styles } from 'react-select';
+import { GroupBase, StylesConfig } from 'react-select';
 import { IconWrapper } from '../../helpers/IconWrapper';
+import { SelectOption } from './Select';
 export declare const prefix = "dds-select";
 export declare const Label: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("../Typography").TypographyProps & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
 declare type StyledContainerProps = {
@@ -14,5 +15,5 @@ export declare const Wrapper: import("styled-components").StyledComponent<"div",
     width?: string | number | undefined;
 }, never>;
 export declare const SelectedIconWrapper: import("styled-components").StyledComponent<typeof IconWrapper, any, {}, never>;
-export declare const CustomStyles: Partial<Styles<any, false, any>>;
+export declare const CustomStyles: Partial<StylesConfig<SelectOption, boolean, GroupBase<SelectOption>>>;
 export {};

package/dist/components/Spinner/Spinner.d.ts

@@ -1,7 +1,8 @@
+import { HTMLAttributes } from 'react';
 import * as CSS from 'csstype';
 import { TextColor } from '../Typography';
 export declare type SpinnerProps = {
     color?: TextColor | string;
     size?: CSS.WidthProperty<string>;
-};
-export declare function Spinner({ size, color }: SpinnerProps): JSX.Element;
+} & HTMLAttributes<SVGElement>;
+export declare function Spinner({ size, color, ...rest }: SpinnerProps): JSX.Element;

package/dist/components/Table/SortCell.d.ts

@@ -1,6 +1,6 @@
 import { MouseEvent } from 'react';
 import { TableCellProps } from './Cell';
-export declare type SortOrder = 'ascending' | 'descending' | 'none';
+export declare type SortOrder = 'ascending' | 'descending';
 export declare type SortCellProps = {
     isSorted?: boolean;
     sortOrder?: SortOrder;
@@ -10,4 +10,4 @@ export declare const SortCell: import("react").ForwardRefExoticComponent<{
     isSorted?: boolean | undefined;
     sortOrder?: SortOrder | undefined;
     onClick: (event: MouseEvent<HTMLButtonElement>) => void;
-} & Omit<TableCellProps, "type"> & import("react").RefAttributes<HTMLTableHeaderCellElement>>;
+} & Omit<TableCellProps, "type"> & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/components/Table/tableData.d.ts

@@ -2,7 +2,7 @@ import { SortOrder } from './SortCell';
 export declare type HeaderCellToSort = {
     name: string;
     dataName: string;
-    sortOrder?: SortOrder;
+    sortOrder?: SortOrder | 'none';
     isSorted?: boolean;
 };
 export declare const headerCells: HeaderCellToSort[];

package/dist/helpers/Chevron/AnimatedChevronUpDown.d.ts

@@ -0,0 +1,2 @@
+import { SvgChevronProps } from './AnimatedChevronUpDown.styles';
+export declare const AnimatedChevronUpDown: ({ isUp }: SvgChevronProps) => JSX.Element;

package/dist/helpers/Chevron/AnimatedChevronUpDown.styles.d.ts

@@ -0,0 +1,7 @@
+export declare type SvgChevronProps = {
+    isUp?: boolean;
+};
+export declare const SvgChevron: import("styled-components").StyledComponent<"svg", any, SvgChevronProps, never>;
+export declare const SvgChevronlGroup: import("styled-components").StyledComponent<"g", any, SvgChevronProps, never>;
+export declare const SvgChevronlLeft: import("styled-components").StyledComponent<"path", any, SvgChevronProps, never>;
+export declare const SvgChevronlRight: import("styled-components").StyledComponent<"path", any, SvgChevronProps, never>;

package/dist/helpers/Chevron/index.d.ts

@@ -0,0 +1 @@
+export * from './AnimatedChevronUpDown';

package/dist/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './useCombinedRefs';
+export * from './useOnClickOutside';
+export * from './useOnKeyDown';
+export * from './useReactPopper';

package/dist/hooks/useCombinedRefs.d.ts

@@ -0,0 +1,2 @@
+import type { RefCallback } from 'react';
+export declare function useCombinedRef<T>(...refs: React.Ref<T>[]): RefCallback<T>;

package/dist/hooks/useOnClickOutside.d.ts

@@ -0,0 +1 @@
+export declare function useOnClickOutside(element: HTMLElement | null | (HTMLElement | null)[], handler: (event: MouseEvent | TouchEvent) => void): void;

package/dist/hooks/useOnKeyDown.d.ts

@@ -0,0 +1 @@
+export declare const useOnKeyDown: (key: string | string[], handler: (event: KeyboardEvent) => void) => void;

package/dist/hooks/useReactPopper.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+export declare type Placement = 'auto' | 'auto-start' | 'auto-end' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
+export declare const useReactPopper: (referenceElement: HTMLElement, popperElement: HTMLElement, arrowRef?: string | HTMLElement | undefined, placement?: Placement, offset?: number) => {
+    styles: {
+        [key: string]: CSSProperties;
+    };
+    attributes: {
+        [key: string]: {
+            [key: string]: string;
+        } | undefined;
+    };
+};

package/dist/index.css

@@ -1,60 +1,60 @@
-@font-face {
-  font-family: IBM Plex Sans;
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('IBM Plex Sans'), local('IBMPlexSans'),
-    url('../assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'),
-    url('../assets/fonts/IBMPlexSans-Regular.woff') format('woff');
-}
-
-@font-face {
-  font-family: IBM Plex Sans;
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-    url('../assets/fonts/IBMPlexSans-Italic.woff2') format('woff2'),
-    url('../assets/fonts/IBMPlexSans-Italic.woff') format('woff');
-}
-
-@font-face {
-  font-family: IBM Plex Sans;
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-    url('../assets/fonts/IBMPlexSans-Light.woff2') format('woff2'),
-    url('../assets/fonts/IBMPlexSans-Light.woff') format('woff');
-}
-
-@font-face {
-  font-family: IBM Plex Sans;
-  font-style: italic;
-  font-weight: 300;
-  font-display: swap;
-  src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-    url('../assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2'),
-    url('../assets/fonts/IBMPlexSans-LightItalic.woff') format('woff');
-}
-
-@font-face {
-  font-family: IBM Plex Sans;
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-    url('../assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'),
-    url('../assets/fonts/IBMPlexSans-SemiBold.woff') format('woff');
-}
-
-@font-face {
-  font-family: IBM Plex Sans;
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  src: local('IBM Plex Sans SemiBold Italic'),
-    local('IBMPlexSans-SemiBoldItalic'),
-    url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
-    url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
-}
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('IBM Plex Sans'), local('IBMPlexSans'),
+    url('../assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexSans-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
+    url('../assets/fonts/IBMPlexSans-Italic.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexSans-Italic.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
+    url('../assets/fonts/IBMPlexSans-Light.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexSans-Light.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
+    url('../assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexSans-LightItalic.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
+    url('../assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexSans-SemiBold.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: local('IBM Plex Sans SemiBold Italic'),
+    local('IBMPlexSans-SemiBoldItalic'),
+    url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
+}

package/dist/index.d.ts

@@ -21,3 +21,4 @@ export * from './components/Card';
 export * from './components/InternalHeader';
 export * from './components/Datepicker';
 export * from './components/SkipToContent';
+export * from './components/Popover';

package/dist/index.es.css

@@ -1,60 +1,60 @@
-@font-face {
-  font-family: IBM Plex Sans;
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: local('IBM Plex Sans'), local('IBMPlexSans'),
-    url('../assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'),
-    url('../assets/fonts/IBMPlexSans-Regular.woff') format('woff');
-}
-
-@font-face {
-  font-family: IBM Plex Sans;
-  font-style: italic;
-  font-weight: 400;
-  font-display: swap;
-  src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
-    url('../assets/fonts/IBMPlexSans-Italic.woff2') format('woff2'),
-    url('../assets/fonts/IBMPlexSans-Italic.woff') format('woff');
-}
-
-@font-face {
-  font-family: IBM Plex Sans;
-  font-style: normal;
-  font-weight: 300;
-  font-display: swap;
-  src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
-    url('../assets/fonts/IBMPlexSans-Light.woff2') format('woff2'),
-    url('../assets/fonts/IBMPlexSans-Light.woff') format('woff');
-}
-
-@font-face {
-  font-family: IBM Plex Sans;
-  font-style: italic;
-  font-weight: 300;
-  font-display: swap;
-  src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
-    url('../assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2'),
-    url('../assets/fonts/IBMPlexSans-LightItalic.woff') format('woff');
-}
-
-@font-face {
-  font-family: IBM Plex Sans;
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-    url('../assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'),
-    url('../assets/fonts/IBMPlexSans-SemiBold.woff') format('woff');
-}
-
-@font-face {
-  font-family: IBM Plex Sans;
-  font-style: italic;
-  font-weight: 600;
-  font-display: swap;
-  src: local('IBM Plex Sans SemiBold Italic'),
-    local('IBMPlexSans-SemiBoldItalic'),
-    url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
-    url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
-}
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('IBM Plex Sans'), local('IBMPlexSans'),
+    url('../assets/fonts/IBMPlexSans-Regular.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexSans-Regular.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
+    url('../assets/fonts/IBMPlexSans-Italic.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexSans-Italic.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('IBM Plex Sans Light'), local('IBMPlexSans-Light'),
+    url('../assets/fonts/IBMPlexSans-Light.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexSans-Light.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: local('IBM Plex Sans Light Italic'), local('IBMPlexSans-LightItalic'),
+    url('../assets/fonts/IBMPlexSans-LightItalic.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexSans-LightItalic.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
+    url('../assets/fonts/IBMPlexSans-SemiBold.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexSans-SemiBold.woff') format('woff');
+}
+
+@font-face {
+  font-family: IBM Plex Sans;
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: local('IBM Plex Sans SemiBold Italic'),
+    local('IBMPlexSans-SemiBoldItalic'),
+    url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff2') format('woff2'),
+    url('../assets/fonts/IBMPlexSans-SemiBoldItalic.woff') format('woff');
+}