@oslokommune/punkt-react 13.6.16 → 13.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oslokommune/punkt-react",
-  "version": "13.6.16",
+  "version": "13.8.0",
   "description": "React komponentbibliotek til Punkt, et designsystem laget av Oslo Origo",
   "homepage": "https://punkt.oslo.kommune.no",
   "author": "Team Designsystem, Oslo Origo",
@@ -33,12 +33,13 @@
     "lint:fix": "eslint --fix 'src/**/*.{jsx,ts,tsx}'",
     "format": "prettier --write src//**/*.{ts,tsx,css} --config ./.prettierrc",
     "preview": "vite preview --outDir dist-app",
-    "test": "react-scripts test --env=jsdom"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@lit-labs/ssr-dom-shim": "^1.2.1",
     "@lit/react": "^1.0.7",
-    "@oslokommune/punkt-elements": "^13.6.15",
+    "@oslokommune/punkt-elements": "^13.8.0",
     "prettier": "^3.3.3",
     "react-element-to-jsx-string": "^15.0.0",
     "react-hook-form": "^7.53.0",
@@ -51,7 +52,7 @@
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.14",
     "@types/jest-axe": "^3.5.9",
     "@types/node": "^20.12.10",
     "@types/react": "^18.3.5",
@@ -59,7 +60,7 @@
     "@types/react-syntax-highlighter": "^15.5.13",
     "@vitejs/plugin-react": "^4.3.1",
     "classnames": "^2.5.1",
-    "eslint": "^9.10.0",
+    "eslint": "^9.37.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-simple-import-sort": "^12.1.1",
@@ -67,11 +68,11 @@
     "jest-axe": "^9.0.0",
     "jest-environment-jsdom": "^29.7.0",
     "react-hooks": "^1.0.1",
-    "react-scripts": "^5.0.1",
     "sass": "^1.78.0",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.18",
-    "vite-plugin-dts": "^4.2.1"
+    "typescript": "^5.9.3",
+    "vite": "^6.3.6",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
     "@oslokommune/punkt-assets": "*",
@@ -97,11 +98,6 @@
     "ux",
     "ui"
   ],
-  "jest": {
-    "transformIgnorePatterns": [
-      "<rootDir>/node_modules/(?!@lit/react)"
-    ]
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/oslokommune/punkt.git"
@@ -110,5 +106,5 @@
     "url": "https://github.com/oslokommune/punkt/issues"
   },
   "license": "MIT",
-  "gitHead": "82d543a41c3ad5f580586874c4e0547c7fa8f10d"
+  "gitHead": "291eaf91a93ce286149605e36547068da3bf90e9"
 }

package/src/components/accordion/Accordion.test.tsx

@@ -3,7 +3,7 @@ import { axe, toHaveNoViolations } from 'jest-axe'
 import { PktAccordion } from './Accordion'
 import { PktAccordionItem } from './AccordionItem'
 import { render, screen, fireEvent } from '@testing-library/react'
-import React, { createRef } from 'react'
+import { createRef } from 'react'
 
 expect.extend(toHaveNoViolations)
 

package/src/components/accordion/Accordion.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { ReactNode, forwardRef, createContext, useContext } from 'react'
+import { ReactNode, forwardRef, createContext, useContext } from 'react'
 
 export type TPktAccordionSkin = 'borderless' | 'outlined' | 'beige' | 'blue'
 

package/src/components/accordion/AccordionItem.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { ReactNode, useState, useEffect, forwardRef } from 'react'
+import { ReactNode, useState, useEffect, forwardRef } from 'react'
+import type { MouseEvent, SyntheticEvent } from 'react'
 import { PktIcon } from '../icon/Icon'
 import { useAccordionContext } from './Accordion'
 
@@ -16,8 +17,8 @@ export interface IPktAccordionItem {
   children?: ReactNode
   name?: string
   className?: string
-  onClick?: (e: React.MouseEvent<HTMLDetailsElement>) => void
-  onToggle?: (e: React.SyntheticEvent<HTMLDetailsElement>) => void
+  onClick?: (e: MouseEvent<HTMLDetailsElement>) => void
+  onToggle?: (e: SyntheticEvent<HTMLDetailsElement>) => void
 }
 
 export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem>(
@@ -52,7 +53,7 @@ export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem
       }
     }, [defaultOpen, controlledIsOpen])
 
-    const handleToggle = (e: React.SyntheticEvent<HTMLDetailsElement>) => {
+    const handleToggle = (e: SyntheticEvent<HTMLDetailsElement>) => {
       const detailsElement = e.currentTarget
       const newOpenState = detailsElement.open
 
@@ -63,7 +64,7 @@ export const PktAccordionItem = forwardRef<HTMLDetailsElement, IPktAccordionItem
       onToggle?.(e)
     }
 
-    const handleClick = (e: React.MouseEvent<HTMLDetailsElement>) => {
+    const handleClick = (e: MouseEvent<HTMLDetailsElement>) => {
       // La native toggle skje først, så trigge onClick
       setTimeout(() => {
         onClick?.(e)

package/src/components/alert/Alert.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
+import { FC, ForwardedRef, forwardRef, ReactElement } from 'react'
+import * as React from 'react'
 import { createComponent, EventName } from '@lit/react'
 import { PktAlert as PktElAlert } from '@oslokommune/punkt-elements'
 import type { PktElType, PktElConstructor } from '@/interfaces/IPktElements'

package/src/components/breadcrumbs/Breadcrumbs.test.tsx

@@ -6,6 +6,18 @@ import { PktBreadcrumbs } from './Breadcrumbs'
 
 expect.extend(toHaveNoViolations)
 
+// Create a Router with future flags to suppress warnings
+const TestRouter = ({ children }: { children: React.ReactNode }) => (
+  <Router
+    future={{
+      v7_startTransition: true,
+      v7_relativeSplatPath: true,
+    }}
+  >
+    {children}
+  </Router>
+)
+
 describe('PktBreadcrumbs Component', () => {
   const breadcrumbs = [
     { text: 'Home', href: '/' },
@@ -15,9 +27,9 @@ describe('PktBreadcrumbs Component', () => {
 
   it('renders breadcrumbs correctly with react-router navigation', async () => {
     const { getAllByText } = render(
-      <Router>
+      <TestRouter>
         <PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="router" />
-      </Router>,
+      </TestRouter>,
     )
     await window.customElements.whenDefined('pkt-icon')
 
@@ -37,9 +49,9 @@ describe('PktBreadcrumbs Component', () => {
 
   it('renders back link correctly on mobile with router navigation', async () => {
     const { getAllByText } = render(
-      <Router>
+      <TestRouter>
         <PktBreadcrumbs breadcrumbs={breadcrumbs} navigationType="router" />
-      </Router>,
+      </TestRouter>,
     )
     await window.customElements.whenDefined('pkt-icon')
 

package/src/components/breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React, { ForwardedRef, forwardRef } from 'react'
+import { ForwardedRef, forwardRef } from 'react'
+import type { AnchorHTMLAttributes } from 'react'
 import { Link } from 'react-router-dom'
 
 import PktIcon from '../icon/Icon'
@@ -10,7 +11,7 @@ export interface IBreadcrumbs {
   href: string
 }
 
-export interface IPktBreadcrumbs extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface IPktBreadcrumbs extends AnchorHTMLAttributes<HTMLAnchorElement> {
   breadcrumbs: IBreadcrumbs[]
   navigationType?: 'router' | 'anchor'
 }

package/src/components/button/Button.tsx

@@ -1,5 +1,6 @@
 'use client'
-import React, { ForwardedRef, forwardRef } from 'react'
+import { ForwardedRef, forwardRef } from 'react'
+import type { ButtonHTMLAttributes } from 'react'
 
 import { PktIcon } from '../icon/Icon'
 declare global {
@@ -10,7 +11,7 @@ declare global {
 
 window.pktAnimationPath = window.pktAnimationPath || 'https://punkt-cdn.oslo.kommune.no/latest/animations/'
 
-export interface IPktButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface IPktButton extends ButtonHTMLAttributes<HTMLButtonElement> {
   iconName?: string
   secondIconName?: string
   mode?: 'light' | 'dark'

package/src/components/checkbox/Checkbox.tsx

@@ -1,6 +1,7 @@
-import React, { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode } from 'react'
+import { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode, ReactElement } from 'react'
+import type { InputHTMLAttributes } from 'react'
 
-export interface IPktCheckbox extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface IPktCheckbox extends InputHTMLAttributes<HTMLInputElement> {
   id: string
   hasTile?: boolean
   disabled?: boolean
@@ -44,7 +45,7 @@ export const PktCheckbox = forwardRef(
       ...props
     }: IPktCheckbox,
     ref: ForwardedRef<HTMLInputElement>,
-  ): React.ReactElement => {
+  ): ReactElement => {
     const classes = [className, 'pkt-input-check'].filter(Boolean).join(' ')
 
     const labelClasses = [

package/src/components/footer/Footer.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import React from 'react'
+import { FC, Fragment } from 'react'
+import type { HTMLAttributes } from 'react'
 
 import { PktIcon } from '../icon/Icon'
 import { PktConsent } from '../consent/Consent'
@@ -25,7 +26,7 @@ interface SocialLink {
   openInNewTab?: boolean
 }
 
-export interface IPktFooter extends React.HTMLAttributes<HTMLDivElement> {
+export interface IPktFooter extends HTMLAttributes<HTMLDivElement> {
   columnOne: Column
   columnTwo: Column
   socialLinks?: SocialLink[]
@@ -42,7 +43,7 @@ export interface IPktFooter extends React.HTMLAttributes<HTMLDivElement> {
   onToggleConsent?: (e: CustomEvent) => void
 }
 
-export const PktFooter: React.FC<IPktFooter> = ({
+export const PktFooter: FC<IPktFooter> = ({
   columnOne,
   columnTwo,
   socialLinks,
@@ -169,7 +170,7 @@ export const PktFooter: React.FC<IPktFooter> = ({
               {socialLinks
                 .filter((link) => link.iconName)
                 .map((link, index) => (
-                  <React.Fragment key={`sociallinks-${index}`}>
+                  <Fragment key={`sociallinks-${index}`}>
                     <a
                       href={link.href}
                       aria-label={`til ${link.iconName}`}
@@ -179,7 +180,7 @@ export const PktFooter: React.FC<IPktFooter> = ({
                     >
                       <PktIcon className="pkt-footer__social-icon" name={link.iconName} />
                     </a>
-                  </React.Fragment>
+                  </Fragment>
                 ))}
             </div>
           </div>

package/src/components/footerSimple/FooterSimple.tsx

@@ -1,11 +1,12 @@
 'use client'
 
-import React from 'react'
+import { FC } from 'react'
+import type { HTMLAttributes } from 'react'
 
 import { PktIcon } from '../icon/Icon'
 import { PktConsent } from '../consent/Consent'
 
-export interface IPktFooterSimple extends React.HTMLAttributes<HTMLDivElement> {
+export interface IPktFooterSimple extends HTMLAttributes<HTMLDivElement> {
   links?: Array<{
     href: string
     text: string
@@ -25,7 +26,7 @@ export interface IPktFooterSimple extends React.HTMLAttributes<HTMLDivElement> {
   onToggleConsent?: (e: CustomEvent) => void
 }
 
-export const PktFooterSimple: React.FC<IPktFooterSimple> = ({
+export const PktFooterSimple: FC<IPktFooterSimple> = ({
   links = [],
   openLinksInNewTab = false,
   personvernOgInfoLink = 'https://www.oslo.kommune.no/personvern-og-informasjonskapsler/',

package/src/components/icon/Icon.test.tsx

@@ -1,7 +1,6 @@
 import '@testing-library/jest-dom'
 
 import { render, screen, waitFor } from '../../utils/test-utils'
-import React from 'react'
 
 import { PktIcon } from './Icon'
 
@@ -11,26 +10,14 @@ declare global {
     pktIconPath: string
   }
 }
-window.pktFetch = (file = 'filnavn.svg') =>
-  Promise.resolve({
-    ok: true,
-    text: () => Promise.resolve(`<svg role="img" data-testid="icon" data-filename=${file}>Her er SVGen</svg>`),
-  })
-window.pktIconPath = 'sti'
 
 describe('PktIcon', () => {
-  const localStorageMock = (() => {
-    const store: { [key: string]: string } = {}
-    return {
-      getItem: function (key: string) {
-        return store[key] || null
-      },
-      setItem: function (key: string, value: string) {
-        store[key] = value.toString()
-      },
-    }
-  })()
-  Object.defineProperty(global, 'localStorage', { value: localStorageMock })
+  window.pktFetch = (file = 'filnavn.svg') =>
+    Promise.resolve({
+      ok: true,
+      text: () => Promise.resolve(`<svg role="img" data-testid="icon" data-filename=${file}>Her er SVGen</svg>`),
+    })
+  window.pktIconPath = 'sti'
 
   describe('with default fetcher', () => {
     test('fetches SVG with default fetcher', async () => {

package/src/components/index.ts

@@ -22,8 +22,6 @@ export { PktLinkCard } from './linkcard/LinkCard'
 export { PktLoader } from './loader/Loader'
 export { PktMessagebox } from './messagebox/Messagebox'
 export { PktModal } from './modal/Modal'
-export { PktPreview } from './preview/Preview'
-export { PktPreviewWithJson } from './preview/PreviewWithJson'
 export { PktProgressbar } from './progressbar/Progressbar'
 export { PktRadioButton } from './radio/RadioButton'
 export { PktSearchInput } from './searchinput/SearchInput'
@@ -37,6 +35,7 @@ export { PktTableHeader } from './table/TableHeader'
 export { PktTableHeaderCell } from './table/TableHeaderCell'
 export { PktTableRow } from './table/TableRow'
 export { PktTabs } from './tabs/Tabs'
+export { PktTabItem } from './tabs/TabItem'
 export { PktTag } from './tag/Tag'
 export { PktTextarea } from './textarea/Textarea'
 export { PktTextinput } from './textinput/Textinput'

package/src/components/input/Input.tsx

@@ -1,8 +1,9 @@
 'use client'
 
-import React, { ForwardedRef } from 'react'
+import { ForwardedRef, forwardRef } from 'react'
+import type { InputHTMLAttributes } from 'react'
 
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   /** The input's label */
   label?: string
   /** The input's id */
@@ -21,7 +22,7 @@ interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  * <Input label="First name" id="firstName" validationMessage="First name is required" />
  *
  */
-export const PktInput = React.forwardRef(
+export const PktInput = forwardRef(
   ({ label, id, children, ...props }: InputProps, ref: ForwardedRef<HTMLInputElement>): React.ReactElement => {
     return (
       <div className="pkt-form-group">

package/src/components/radio/RadioButton.tsx

@@ -1,6 +1,7 @@
-import React, { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode } from 'react'
+import { ChangeEventHandler, ForwardedRef, forwardRef, ReactNode } from 'react'
+import type { InputHTMLAttributes } from 'react'
 
-export interface IPktRadioButton extends React.InputHTMLAttributes<HTMLInputElement> {
+export interface IPktRadioButton extends InputHTMLAttributes<HTMLInputElement> {
   id: string
   name: string
   label: string

package/src/components/searchinput/SearchInput.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { ChangeEvent, forwardRef, HTMLProps, ReactNode } from 'react'
+import { ChangeEvent, forwardRef, HTMLProps, ReactNode, createElement } from 'react'
 
 import { PktButton } from '../button/Button'
 
@@ -33,7 +33,7 @@ interface ISearchForm extends ISearch {
 }
 
 interface ISearchInput extends ISearch {
-  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void
   disabled?: boolean
 }
 
@@ -145,7 +145,7 @@ export const PktSearchInput = forwardRef<HTMLInputElement, ISearchInput | ISearc
           <ul id={`${id}-suggestions`} className="pkt-searchinput__suggestions" aria-live="assertive">
             {suggestions.map((suggestion, index) => (
               <li key={`search-suggestion-${index}`}>
-                {React.createElement(
+                {createElement(
                   suggestion.href ? 'a' : suggestion.onClick ? 'button' : 'div',
                   {
                     href: suggestion.href,

package/src/components/stepper/Stepper.tsx

@@ -1,11 +1,11 @@
 'use client'
 
-import { ReactElement, Ref, forwardRef } from 'react'
+import { ReactElement, Ref, forwardRef, Children, isValidElement, cloneElement } from 'react'
+import type { HTMLAttributes } from 'react'
 import { IPktStep } from './Step'
 import classNames from 'classnames'
-import React from 'react'
 
-export interface IPktStepper extends React.HTMLAttributes<HTMLOListElement> {
+export interface IPktStepper extends HTMLAttributes<HTMLOListElement> {
   /**
    * The index of the current active step
    */
@@ -55,9 +55,9 @@ export const PktStepper = forwardRef(
       orientation === 'horizontal' ? 'pkt-stepper--horizontal' : 'pkt-stepper--vertical',
     )
 
-    const childrenWithProps = React.Children.map(children, (child, index) => {
-      if (React.isValidElement(child)) {
-        return React.cloneElement(child, {
+    const childrenWithProps = Children.map(children, (child, index) => {
+      if (isValidElement(child)) {
+        return cloneElement(child, {
           className: classNames(child.props.className, {
             'pkt-step--hideStep': hideNonActiveSteps && index !== activeStep,
             'pkt-step--hideContent': hideNonActiveStepsContent && index !== activeStep,

package/src/components/table/Table.tsx

@@ -2,10 +2,11 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
 export type TTableSkin = 'basic' | 'zebra-blue'
 
-interface ITableProps extends React.HTMLAttributes<HTMLTableElement> {
+interface ITableProps extends HTMLAttributes<HTMLTableElement> {
   compact?: boolean
   skin?: 'basic' | 'zebra-blue'
   responsiveView?: boolean

package/src/components/table/TableBody.tsx

@@ -2,8 +2,9 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
-interface ITableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+interface ITableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
   className?: string
   children: React.ReactNode
 }

package/src/components/table/TableData.tsx

@@ -2,8 +2,9 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
-interface TableDataProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface TableDataProps extends HTMLAttributes<HTMLTableCellElement> {
   className?: string
   children: React.ReactNode | React.ReactNode[]
 }

package/src/components/table/TableDataCell.tsx

@@ -2,8 +2,9 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
-interface ITableDataCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface ITableDataCellProps extends HTMLAttributes<HTMLTableCellElement> {
   className?: string
   children?: React.ReactNode
   dataLabel?: string

package/src/components/table/TableHeader.tsx

@@ -2,8 +2,9 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
-interface ITableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {
+interface ITableHeaderProps extends HTMLAttributes<HTMLTableSectionElement> {
   className?: string
   children: React.ReactNode
 }

package/src/components/table/TableHeaderCell.tsx

@@ -2,8 +2,9 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
-interface ITableHeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
+interface ITableHeaderCellProps extends HTMLAttributes<HTMLTableCellElement> {
   className?: string
   children: React.ReactNode
 }

package/src/components/table/TableRow.tsx

@@ -2,8 +2,9 @@
 
 import classNames from 'classnames'
 import * as React from 'react'
+import type { HTMLAttributes } from 'react'
 
-interface ITableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+interface ITableRowProps extends HTMLAttributes<HTMLTableRowElement> {
   className?: string
   children: React.ReactNode
 }

package/src/components/tabs/TabItem.tsx

@@ -0,0 +1,77 @@
+'use client'
+
+import { ReactNode, MouseEvent, forwardRef } from 'react'
+import { PktIcon } from '../icon/Icon'
+import { PktTag } from '../tag/Tag'
+import type { IPktTag } from '../tag/Tag'
+import { useTabsContext } from './Tabs'
+
+export type TSkin = IPktTag['skin']
+
+export interface IPktTabItem {
+  children: ReactNode
+  active?: boolean
+  href?: string
+  onClick?: (event: MouseEvent) => void
+  icon?: string
+  controls?: string
+  tag?: string
+  tagSkin?: TSkin
+  index?: number
+}
+
+export const PktTabItem = forwardRef<HTMLAnchorElement | HTMLButtonElement, IPktTabItem>(
+  ({ children, active, href, onClick, icon, controls, tag, tagSkin, index = 0 }, ref) => {
+    const { arrowNav, registerTabRef, handleKeyPress, selectTab } = useTabsContext()
+
+    const handleClick = (event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => {
+      selectTab(index)
+      onClick?.(event)
+    }
+
+    const commonProps = {
+      'aria-selected': arrowNav ? !!active : undefined,
+      'aria-controls': controls,
+      role: arrowNav ? 'tab' : undefined,
+      onKeyUp: (event: React.KeyboardEvent) => handleKeyPress(index, event),
+      onClick: handleClick,
+      tabIndex: active || !arrowNav ? undefined : -1,
+      ref: (el: HTMLAnchorElement | HTMLButtonElement | null) => {
+        registerTabRef(index, el)
+        if (typeof ref === 'function') {
+          ref(el)
+        } else if (ref) {
+          ref.current = el
+        }
+      },
+    }
+
+    const content = (
+      <>
+        {icon && <PktIcon name={icon} className="pkt-icon--small" />}
+        {children}
+        {tag && (
+          <PktTag skin={tagSkin} size="small">
+            {tag}
+          </PktTag>
+        )}
+      </>
+    )
+
+    if (href) {
+      return (
+        <a {...commonProps} href={href} className={`pkt-tabs__link ${active ? 'active' : ''}`}>
+          {content}
+        </a>
+      )
+    }
+
+    return (
+      <button {...commonProps} type="button" className={`pkt-tabs__button pkt-link-button ${active ? 'active' : ''}`}>
+        {content}
+      </button>
+    )
+  },
+)
+
+PktTabItem.displayName = 'PktTabItem'