@norges-domstoler/dds-components 0.0.19 → 0.0.23

package/README.md

@@ -1,61 +1,74 @@
-# @norges-domstoler/dds-components
-
-[![Version](https://img.shields.io/npm/v/@norges-domstoler/dds-components)](https://www.npmjs.com/package/@norges-domstoler/dds-components)
-
-_biblioteket er under arbeid_
-
-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
-- Checkbox
-- DescriptionList
-- Divider
-- GlobalMessage
-- IconWrapper
-- List
-- LocalMessage
-- Pagination
-- RadioButton
-- Search
-- Select
-- 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
+- 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/InternalHeader/InternalHeader.d.ts

@@ -0,0 +1,2 @@
+import { InternalHeaderProps } from './InternalHeader.types';
+export declare const InternalHeader: ({ applicationName, smallScreen, navigationElements, contextMenuElements, currentPageHref, userProps, onCurrentPageChange, ...rest }: InternalHeaderProps) => JSX.Element;

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

@@ -0,0 +1,28 @@
+import { InternalHeaderProps } from './InternalHeader.types';
+import { IconWrapper } from '../../helpers/IconWrapper';
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BannerLeftWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ApplicationNameWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LovisaWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Navigation: import("styled-components").StyledComponent<"nav", any, {}, never>;
+declare type NavListProps = Pick<InternalHeaderProps, 'smallScreen'>;
+export declare const NavigationList: import("styled-components").StyledComponent<"ul", any, NavListProps, never>;
+export declare const NavigationListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+declare type StyledNavigationListProps = {
+    isCurrent?: boolean;
+};
+export declare const NavigationLink: import("styled-components").StyledComponent<"a", any, StyledNavigationListProps, never>;
+declare type ContextMenuWrapperProps = {
+    closed?: boolean;
+};
+export declare const ContextMenuWrapper: import("styled-components").StyledComponent<"div", any, ContextMenuWrapperProps, never>;
+export declare const ContextMenuList: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const ContextMenuListItem: import("styled-components").StyledComponent<"li", any, {}, never>;
+export declare const ContextMenuElement: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const ContextMenuLink: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const StyledDivider: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
+    color?: import("../Divider").DividerColor | undefined;
+} & import("react").HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>, any, {}, never>;
+export declare const StyledIconWrapper: import("styled-components").StyledComponent<typeof IconWrapper, any, {}, never>;
+export {};

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

@@ -0,0 +1,58 @@
+import { CSSObject } from 'styled-components';
+export declare const internalHeaderTokens: {
+    wrapper: {
+        base: CSSObject;
+    };
+    applicationNameWrapper: {
+        base: CSSObject;
+    };
+    lovisaWrapper: {
+        base: CSSObject;
+    };
+    banner: {
+        base: CSSObject;
+    };
+    bannerLeft: {
+        base: CSSObject;
+    };
+    navigation: {
+        base: CSSObject;
+    };
+    navigationLink: {
+        base: CSSObject;
+        hover: {
+            base: CSSObject;
+        };
+        active: {
+            base: CSSObject;
+        };
+        focus: {
+            base: CSSObject;
+        };
+        current: {
+            base: CSSObject;
+        };
+    };
+    contextMenu: {
+        base: CSSObject;
+        spaceFromButtonTop: string;
+    };
+    contextMenuLink: {
+        base: CSSObject;
+        hover: {
+            base: CSSObject;
+        };
+        active: {
+            base: CSSObject;
+        };
+        focus: {
+            base: CSSObject;
+        };
+    };
+    contextMenuDivider: {
+        base: CSSObject;
+    };
+    icon: {
+        base: CSSObject;
+    };
+};

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

@@ -0,0 +1,26 @@
+import { OverridableComponent } from '@material-ui/core/OverridableComponent';
+import { SvgIconTypeMap } from '@material-ui/core/SvgIcon';
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes } from 'react';
+export declare type NavigationLinkProps = {
+    href: string;
+    title: string;
+} & AnchorHTMLAttributes<HTMLAnchorElement>;
+export declare type ContextMenuElementProps = {
+    title: string;
+    href?: string;
+    Icon?: OverridableComponent<SvgIconTypeMap<Record<string, unknown>, 'svg'>>;
+    onClick?: () => void;
+} & (AnchorHTMLAttributes<HTMLAnchorElement> | ButtonHTMLAttributes<HTMLButtonElement>);
+export declare type InternaHeaderUserProps = {
+    name: string;
+    href?: string;
+};
+export declare type InternalHeaderProps = {
+    applicationName?: string;
+    smallScreen?: boolean;
+    userProps?: InternaHeaderUserProps;
+    navigationElements?: NavigationLinkProps[];
+    contextMenuElements?: ContextMenuElementProps[];
+    currentPageHref?: string;
+    onCurrentPageChange?: () => void;
+} & HTMLAttributes<HTMLDivElement>;

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

@@ -0,0 +1,2 @@
+export * from './InternalHeader';
+export * from './InternalHeader.types';

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/SkipToContent/SkipToContent.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from 'react';
+import * as CSS from 'csstype';
+export declare type SkipToContentProps = {
+    text?: string;
+    href: string;
+    top?: CSS.TopProperty<string | number>;
+} & HTMLAttributes<HTMLAnchorElement>;
+export declare const SkipToContent: import("react").ForwardRefExoticComponent<{
+    text?: string | undefined;
+    href: string;
+    top?: CSS.TopProperty<string | number> | undefined;
+} & HTMLAttributes<HTMLAnchorElement> & import("react").RefAttributes<HTMLAnchorElement>>;

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

@@ -0,0 +1,13 @@
+import { CSSObject } from 'styled-components';
+export declare const skipToContentTokens: {
+    link: {
+        base: CSSObject;
+        focusOutline: {
+            color: string;
+            width: string;
+        };
+    };
+    wrapper: {
+        base: CSSObject;
+    };
+};

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

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

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

@@ -1,10 +1,13 @@
+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;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
 } & Omit<TableCellProps, 'type'>;
 export declare const SortCell: import("react").ForwardRefExoticComponent<{
     isSorted?: boolean | undefined;
     sortOrder?: SortOrder | undefined;
-} & Omit<TableCellProps, "type"> & import("react").RefAttributes<HTMLTableHeaderCellElement>>;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+} & 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/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

@@ -18,4 +18,6 @@ export * from './components/List';
 export * from './components/DescriptionList';
 export * from './components/Spinner';
 export * from './components/Card';
+export * from './components/InternalHeader';
 export * from './components/Datepicker';
+export * from './components/SkipToContent';

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');
+}