@ndla/ui 56.0.172-alpha.0 → 56.0.174-alpha.0

package/src/Embed/ExternalEmbed.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
+import type { OembedMetaData } from "@ndla/types-embed";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { OembedMetaData } from "@ndla/types-embed";
-import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { ResourceBox } from "../ResourceBox/ResourceBox";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 
 interface Props {
   embed: OembedMetaData;

package/src/Embed/FootnoteEmbed.stories.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import type { Meta, StoryFn, StoryObj } from "@storybook/react";
 import type { FootnoteData, FootnoteEmbedData } from "@ndla/types-embed";
-import { FootnoteEmbed } from "./FootnoteEmbed";
+import type { Meta, StoryFn, StoryObj } from "@storybook/react";
 import { ArticleByline } from "../Article/ArticleByline";
+import { FootnoteEmbed } from "./FootnoteEmbed";
 
 /**
  * Kildehenvisninger benytter [APA-stilen](https://sokogskriv.no/kildebruk-og-referanser/referansestiler/apa-6th/) for utlistning nederst på siden.

package/src/Embed/FootnoteEmbed.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { useTranslation } from "react-i18next";
-import { styled } from "@ndla/styled-system/jsx";
 import type { FootnoteMetaData } from "@ndla/types-embed";
+import { styled } from "@ndla/styled-system/jsx";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   embed: FootnoteMetaData;

package/src/Embed/GlossEmbed.stories.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import type { Meta, StoryObj } from "@storybook/react";
 import type { ConceptData, ConceptEmbedData } from "@ndla/types-embed";
-import { GlossEmbed } from "./GlossEmbed";
+import type { Meta, StoryObj } from "@storybook/react";
 import { wordClass } from "../model/WordClass";
+import { GlossEmbed } from "./GlossEmbed";
 
 const glossBlockEmbedData: ConceptEmbedData = {
   contentId: "4942",

package/src/Embed/GlossEmbed.tsx

@@ -6,14 +6,14 @@
  *
  */
 
-import { useRef, type ReactNode } from "react";
+import type { ConceptMetaData } from "@ndla/types-embed";
 import { Portal } from "@ark-ui/react";
 import { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { ConceptMetaData } from "@ndla/types-embed";
+import { useRef, type ReactNode } from "react";
+import { Gloss } from "../Gloss/Gloss";
 import { ConceptInlineTriggerButton } from "./ConceptInlineTriggerButton";
 import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
-import { Gloss } from "../Gloss/Gloss";
 
 interface Props {
   embed: ConceptMetaData;

package/src/Embed/H5pEmbed.stories.tsx

@@ -6,11 +6,11 @@
  *
  */
 
+import type { H5pEmbedData, H5pData } from "@ndla/types-embed";
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
-import type { H5pEmbedData, H5pData } from "@ndla/types-embed";
-import { H5pEmbed } from "./H5pEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article/Article";
+import { H5pEmbed } from "./H5pEmbed";
 
 const embedData: H5pEmbedData = {
   resource: "h5p",

package/src/Embed/H5pEmbed.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { useTranslation } from "react-i18next";
+import type { H5pMetaData } from "@ndla/types-embed";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { H5pMetaData } from "@ndla/types-embed";
+import { useTranslation } from "react-i18next";
 import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 
 interface Props {

package/src/Embed/IframeEmbed.stories.tsx

@@ -6,11 +6,11 @@
  *
  */
 
+import type { IframeData, IframeEmbedData } from "@ndla/types-embed";
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
-import type { IframeData, IframeEmbedData } from "@ndla/types-embed";
-import { IframeEmbed } from "./IframeEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article/Article";
+import { IframeEmbed } from "./IframeEmbed";
 
 const embedData: IframeEmbedData = {
   width: "708px",

package/src/Embed/IframeEmbed.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { useEffect, useRef } from "react";
-import { useTranslation } from "react-i18next";
+import type { IframeMetaData } from "@ndla/types-embed";
 import { Figure } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { IframeMetaData } from "@ndla/types-embed";
-import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
+import { useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import { ResourceBox } from "../ResourceBox/ResourceBox";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 
 interface Props {
   embed: IframeMetaData;
@@ -83,7 +83,7 @@ export const IframeEmbed = ({ embed }: Props) => {
         src={url}
         width={strippedWidth}
         height={strippedHeight}
-        allow="fullscreen; encrypted-media"
+        allow="autoplay; encrypted-media; fullscreen"
         loading="lazy"
       />
     </StyledFigure>

package/src/Embed/ImageEmbed.stories.tsx

@@ -6,15 +6,15 @@
  *
  */
 
-import type { ReactNode } from "react";
+import type { ImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
+import type { ImageEmbedData } from "@ndla/types-embed";
 import type { Meta, StoryFn, StoryObj } from "@storybook/react";
+import type { ReactNode } from "react";
 import { PageContent, Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { ImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
-import type { ImageEmbedData } from "@ndla/types-embed";
-import { ImageEmbed } from "./ImageEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article/Article";
 import { Grid } from "../Grid/Grid";
+import { ImageEmbed } from "./ImageEmbed";
 
 const embedData: ImageEmbedData = {
   resource: "image",

package/src/Embed/ImageEmbed.tsx

@@ -6,17 +6,17 @@
  *
  */
 
-import parse from "html-react-parser";
-import { type ReactNode, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
+import type { ImageEmbedData, ImageMetaData } from "@ndla/types-embed";
 import { AddLine } from "@ndla/icons";
 import { Figure, type FigureSize, type FigureVariantProps, Image } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { ImageEmbedData, ImageMetaData } from "@ndla/types-embed";
-import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
+import parse from "html-react-parser";
+import { type ReactNode, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import type { RenderContext } from "./types";
 import { EmbedByline } from "../LicenseByline/EmbedByline";
 import { licenseAttributes } from "../utils/licenseAttributes";
+import { EmbedErrorPlaceholder } from "./EmbedErrorPlaceholder";
 
 interface Props {
   embed: ImageMetaData;

package/src/Embed/InlineTriggerButton.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { type ComponentPropsWithRef, type KeyboardEvent, forwardRef, useCallback, useRef } from "react";
 import { styled } from "@ndla/styled-system/jsx";
 import { composeRefs } from "@ndla/util";
+import { type ComponentPropsWithRef, type KeyboardEvent, forwardRef, useCallback, useRef } from "react";
 
 const StyledSpan = styled("span", { base: {} });
 

package/src/Embed/RelatedContentEmbed.stories.tsx

@@ -6,12 +6,12 @@
  *
  */
 
+import type { RelatedContentMetaData } from "@ndla/types-embed";
 import type { Meta, StoryObj } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
-import type { RelatedContentMetaData } from "@ndla/types-embed";
-import { RelatedContentEmbed } from "./RelatedContentEmbed";
 import { ArticleWrapper, ArticleContent } from "../Article/Article";
 import { RelatedArticleList } from "../RelatedArticleList/RelatedArticleList";
+import { RelatedContentEmbed } from "./RelatedContentEmbed";
 
 const filmResourceMeta: RelatedContentMetaData = {
   resource: "related-content",

package/src/Embed/RelatedContentEmbed.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import { useTranslation } from "react-i18next";
 import type { RelatedContentMetaData } from "@ndla/types-embed";
+import { useTranslation } from "react-i18next";
 import { RelatedArticle } from "../RelatedArticleList/RelatedArticleList";
 
 interface Props {

package/src/Embed/UnknownEmbed.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { useTranslation } from "react-i18next";
-import { Text } from "@ndla/primitives";
 import type { MetaData } from "@ndla/types-embed";
+import { Text } from "@ndla/primitives";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   embed: MetaData<any, any>;

package/src/Embed/UuDisclaimerEmbed.stories.tsx

@@ -6,15 +6,15 @@
  *
  */
 
+import type { UUDisclaimerData, UuDisclaimerEmbedData } from "@ndla/types-embed";
 import type { Meta, StoryObj } from "@storybook/react";
 import { ExpandableBox, ExpandableBoxSummary, FramedContent, PageContent } from "@ndla/primitives";
-import type { UUDisclaimerData, UuDisclaimerEmbedData } from "@ndla/types-embed";
+import { AnchorHeading } from "../AnchorHeading/AnchorHeading";
+import { ArticleWrapper, ArticleContent } from "../Article/Article";
+import { FactBox } from "../FactBox/FactBox";
 import { H5pEmbed } from "./H5pEmbed";
 import { IframeEmbed } from "./IframeEmbed";
 import { UuDisclaimerEmbed } from "./UuDisclaimerEmbed";
-import { ArticleWrapper, ArticleContent } from "../Article/Article";
-import { AnchorHeading } from "../AnchorHeading/AnchorHeading";
-import { FactBox } from "../FactBox/FactBox";
 
 const embedData: UuDisclaimerEmbedData = {
   resource: "uu-disclaimer",

package/src/Embed/UuDisclaimerEmbed.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { type ReactNode } from "react";
-import { useTranslation } from "react-i18next";
+import type { UuDisclaimerMetaData } from "@ndla/types-embed";
 import { Portal } from "@ark-ui/react";
 import { AccessibilityFill, ErrorWarningFill } from "@ndla/icons";
 import { IconButton, PopoverContent, PopoverRoot, PopoverTrigger } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { UuDisclaimerMetaData } from "@ndla/types-embed";
+import { type ReactNode } from "react";
+import { useTranslation } from "react-i18next";
 
 interface Props {
   embed: UuDisclaimerMetaData;

package/src/Embed/types.ts

@@ -6,9 +6,9 @@
  *
  */
 
-import type { ElementType } from "react";
 import type { ImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
 import type { EmbedMetaData } from "@ndla/types-embed";
+import type { ElementType } from "react";
 
 export type HeartButtonType = ElementType<{
   embed: Extract<EmbedMetaData, { status: "success" }>;

package/src/FactBox/FactBox.tsx

@@ -6,6 +6,9 @@
  *
  */
 
+import { ArrowDownShortLine } from "@ndla/icons";
+import { IconButton } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import React, {
   type ComponentProps,
   type ReactNode,
@@ -17,9 +20,6 @@ import React, {
   useState,
 } from "react";
 import { useTranslation } from "react-i18next";
-import { ArrowDownShortLine } from "@ndla/icons";
-import { IconButton } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
 
 interface Props extends ComponentProps<"aside"> {
   children?: ReactNode;

package/src/FileList/File.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { type ComponentPropsWithRef, forwardRef } from "react";
-import { useTranslation } from "react-i18next";
 import { DownloadLine } from "@ndla/icons";
 import { Text } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { linkOverlay } from "@ndla/styled-system/patterns";
+import { type ComponentPropsWithRef, forwardRef } from "react";
+import { useTranslation } from "react-i18next";
 import { FileListItem } from "./FileList";
 
 export interface FileProps extends ComponentPropsWithRef<"div"> {

package/src/FileList/FileList.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { type ComponentPropsWithoutRef } from "react";
 import { ark } from "@ark-ui/react";
 import { styled } from "@ndla/styled-system/jsx";
+import { type ComponentPropsWithoutRef } from "react";
 
 interface Props extends ComponentPropsWithoutRef<"ul"> {}
 

package/src/Gloss/Gloss.stories.tsx

@@ -7,9 +7,9 @@
  */
 
 import type { Meta, StoryObj, StoryFn } from "@storybook/react";
+import { wordClass } from "../model/WordClass";
 import { Gloss } from "./Gloss";
 import { GlossExample } from "./GlossExample";
-import { wordClass } from "../model/WordClass";
 
 const meta: Meta<typeof Gloss> = {
   title: "Components/Gloss",

package/src/Gloss/Gloss.tsx

@@ -6,9 +6,8 @@
  *
  */
 
-import parse from "html-react-parser";
-import { useMemo } from "react";
-import { useTranslation } from "react-i18next";
+import type { StyledVariantProps } from "@ndla/styled-system/types";
+import type { ConceptTitleDTO, GlossDataDTO, GlossExampleDTO } from "@ndla/types-backend/concept-api";
 import { AccordionItemTrigger } from "@ark-ui/react";
 import { ArrowDownShortLine } from "@ndla/icons";
 import {
@@ -20,10 +19,11 @@ import {
   Text,
 } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { StyledVariantProps } from "@ndla/styled-system/types";
-import type { ConceptTitleDTO, GlossDataDTO, GlossExampleDTO } from "@ndla/types-backend/concept-api";
-import { GlossExample } from "./GlossExample";
+import parse from "html-react-parser";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { SpeechControl } from "../AudioPlayer/SpeechControl";
+import { GlossExample } from "./GlossExample";
 
 // TODO: Figure out padding between bordered and simple variant.
 // The design says that the content above the accordion content should have enough padding to align with the accordion content.

package/src/Gloss/GlossExample.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { Fragment } from "react";
+import type { GlossExampleDTO } from "@ndla/types-backend/concept-api";
 import { Text } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
-import type { GlossExampleDTO } from "@ndla/types-backend/concept-api";
+import { Fragment } from "react";
 
 interface Props {
   examples: GlossExampleDTO[];

package/src/Grid/Grid.stories.tsx

@@ -9,9 +9,9 @@
 import type { Meta, StoryFn } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
 import { ArticleContent, ArticleWrapper } from "@ndla/ui";
-import { Grid, GridItem } from "./Grid";
 import { Plain } from "../KeyFigure/KeyFigure.stories";
 import { Default as PitchStory } from "../Pitch/Pitch.stories";
+import { Grid, GridItem } from "./Grid";
 
 export default {
   title: "Components/Grid",

package/src/Grid/Grid.tsx

@@ -6,9 +6,9 @@
  *
  */
 
-import { type ComponentProps, type ReactNode } from "react";
-import { styled } from "@ndla/styled-system/jsx";
 import type { StyledVariantProps } from "@ndla/styled-system/types";
+import { styled } from "@ndla/styled-system/jsx";
+import { type ComponentProps, type ReactNode } from "react";
 
 const GridContainer = styled("div", {
   base: {

package/src/KeyFigure/KeyFigure.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import parse from "html-react-parser";
 import { styled } from "@ndla/styled-system/jsx";
+import parse from "html-react-parser";
 
 const ContentWrapper = styled("div", {
   base: {

package/src/LicenseByline/EmbedByline.tsx

@@ -6,17 +6,17 @@
  *
  */
 
-import { type Dispatch, type ReactNode, type SetStateAction, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { AlertLine } from "@ndla/icons";
-import { getLicenseByAbbreviation } from "@ndla/licenses";
-import { Button, Text } from "@ndla/primitives";
-import { styled } from "@ndla/styled-system/jsx";
 import type { CopyrightDTO as ArticleCopyright } from "@ndla/types-backend/article-api";
 import type { CopyrightDTO as AudioCopyright } from "@ndla/types-backend/audio-api";
 import type { DraftCopyrightDTO as ConceptCopyright } from "@ndla/types-backend/concept-api";
 import type { CopyrightDTO as ImageCopyright } from "@ndla/types-backend/image-api";
 import type { BrightcoveCopyright } from "@ndla/types-embed";
+import { AlertLine } from "@ndla/icons";
+import { getLicenseByAbbreviation } from "@ndla/licenses";
+import { Button, Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import { type Dispatch, type ReactNode, type SetStateAction, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { LicenseLink } from "./LicenseLink";
 
 interface BaseProps {

package/src/LicenseByline/LicenseLink.tsx

@@ -6,10 +6,10 @@
  *
  */
 
-import { forwardRef } from "react";
 import type { LicenseLocaleType } from "@ndla/licenses";
 import { SafeLink, type SafeLinkProps } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
+import { forwardRef } from "react";
 
 interface Props extends Omit<SafeLinkProps, "to"> {
   license: LicenseLocaleType;

package/src/LinkBlock/LinkBlock.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import parse from "html-react-parser";
-import { useMemo } from "react";
+import type { LinkBlockEmbedData } from "@ndla/types-embed";
 import { ArrowRightLine, CalendarLine } from "@ndla/icons";
 import { Heading } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
-import type { LinkBlockEmbedData } from "@ndla/types-embed";
+import parse from "html-react-parser";
+import { useMemo } from "react";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
 const InfoWrapper = styled("div", {

package/src/LinkBlock/LinkBlockSection.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import { Children, type HTMLAttributes, type ReactNode } from "react";
 import { styled } from "@ndla/styled-system/jsx";
+import { Children, type HTMLAttributes, type ReactNode } from "react";
 
 interface Props extends HTMLAttributes<HTMLElement> {
   children: ReactNode;

package/src/Pitch/Pitch.stories.tsx

@@ -8,9 +8,9 @@
 
 import type { Meta } from "@storybook/react";
 import { PageContent } from "@ndla/primitives";
-import { Pitch, type Props } from "./Pitch";
 import { ArticleContent, ArticleWrapper } from "../Article/Article";
 import { Grid } from "../Grid/Grid";
+import { Pitch, type Props } from "./Pitch";
 
 const args: Props = {
   title: "Min pitch",

package/src/Pitch/Pitch.tsx

@@ -6,11 +6,11 @@
  *
  */
 
-import parse from "html-react-parser";
 import { CardHeading, CardImage, CardRoot, Text } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { linkOverlay } from "@ndla/styled-system/patterns";
+import parse from "html-react-parser";
 import { getPossiblyRelativeUrl } from "../utils/relativeUrl";
 
 export interface Props {

package/src/RelatedArticleList/RelatedArticleList.tsx

@@ -6,13 +6,13 @@
  *
  */
 
-import { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from "react";
-import { useTranslation } from "react-i18next";
 import { ExternalLinkLine } from "@ndla/icons";
 import { CardContent, CardHeading, CardRoot, Text, Heading, Button } from "@ndla/primitives";
 import { SafeLink } from "@ndla/safelink";
 import { styled } from "@ndla/styled-system/jsx";
 import { linkOverlay } from "@ndla/styled-system/patterns";
+import { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
 import type { HeadingLevel } from "../types";
 
 interface RelatedArticleProps {

package/src/TagSelector/TagSelector.stories.tsx

@@ -6,10 +6,8 @@
  *
  */
 
-import { useState } from "react";
-import { type ComboboxInputValueChangeDetails, createListCollection } from "@ark-ui/react";
-
 import type { Meta, StoryFn } from "@storybook/react";
+import { type ComboboxInputValueChangeDetails, createListCollection } from "@ark-ui/react";
 import { CloseLine, ArrowDownShortLine, CheckLine } from "@ndla/icons";
 import {
   ComboboxContent,
@@ -21,6 +19,8 @@ import {
   InputContainer,
 } from "@ndla/primitives";
 import { HStack } from "@ndla/styled-system/jsx";
+import { useState } from "react";
+import { useTagSelectorTranslations } from "../i18n/useComponentTranslations";
 import {
   TagSelectorClearTrigger,
   TagSelectorControl,
@@ -29,7 +29,6 @@ import {
   TagSelectorRoot,
   TagSelectorTrigger,
 } from "./TagSelector";
-import { useTagSelectorTranslations } from "../i18n/useComponentTranslations";
 
 export default {
   title: "Components/TagSelector",

package/src/TagSelector/TagSelector.tsx

@@ -6,7 +6,6 @@
  *
  */
 
-import { forwardRef, useEffect, useId, useRef } from "react";
 import { type CollectionItem, useTagsInputContext, useComboboxContext } from "@ark-ui/react";
 import { CloseLine } from "@ndla/icons";
 import {
@@ -32,6 +31,7 @@ import {
   TagsInputItemInput,
 } from "@ndla/primitives";
 import { contains } from "@ndla/util";
+import { forwardRef, useEffect, useId, useRef } from "react";
 
 export type TagSelectorRootProps<T extends CollectionItem> = ComboboxRootProps<T> & TagsInputRootProps;
 

package/src/ZendeskButton/ZendeskButton.tsx

@@ -6,8 +6,8 @@
  *
  */
 
-import { forwardRef, useState } from "react";
 import { Button, type ButtonProps } from "@ndla/primitives";
+import { forwardRef, useState } from "react";
 
 // TODO: Let's consider abandoning `disabled` on the button here. It should instead just open/close the widget based on its current state.
 

package/src/i18n/useComponentTranslations.ts

@@ -6,11 +6,11 @@
  *
  */
 
-import { useTranslation } from "react-i18next";
 import type { CollectionItem } from "@ark-ui/react";
 import type { ComboboxRootProps, PaginationRootProps, TagsInputRootProps, DatePickerRootProps } from "@ndla/primitives";
-import { type TagSelectorRootProps } from "../TagSelector/TagSelector";
 import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { type TagSelectorRootProps } from "../TagSelector/TagSelector";
 
 type DeepPartial<T> = {
   [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];