@helsenorge/designsystem-react 8.6.0-beta.1 → 9.0.0-beta.0

package/components/Tabs/TabPanel/TabPanel.d.ts

@@ -1,9 +1,8 @@
 import React from 'react';
-import { TabsColors, TabsType } from '../Tabs';
+import { TabsColors } from '../Tabs';
 interface TabPanelProps {
     children?: React.ReactNode;
     color?: TabsColors;
-    type?: TabsType;
     isFirst?: boolean;
     translateX?: number;
     style?: React.CSSProperties;

package/components/Tabs/TabPanel/styles.module.scss

@@ -7,32 +7,23 @@
 
 .tab-panel {
   $tab-panel: &;
-
-  padding: 2rem;
-
   $colors: 'blueberry', 'neutral', 'white';
 
+  padding: getSpacer(xl) getSpacer(l) getSpacer(2xl);
   width: 100%;
-  padding-left: 0;
-
-  @media (min-width: map.get($grid-breakpoints, md)) {
-    width: 100%;
-  }
+  border-bottom: 1px solid var(--color-action-border-onlight-focus);
 
-  &--normal {
-    padding: 0;
+  @each $color in $colors {
+    &#{$tab-panel}--#{$color} {
+      background-color: var(--color-base-background-#{$color});
+    }
   }
 
-  &--framed {
-    padding: 2rem;
-    border-bottom: 1px solid var(--color-action-border-onlight-focus);
-    border-radius: 0;
-
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      border-radius: 0 0 0.5rem 0.5rem;
-      border: 1px solid var(--color-action-border-onlight-focus);
-      border-top: 0;
-    }
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    border-radius: 0 0 0.5rem 0.5rem;
+    border: 1px solid var(--color-action-border-onlight-focus);
+    border-top: 0;
+    padding: getSpacer(2xl) getSpacer(l) getSpacer(3xl);
 
     &#{$tab-panel}--first {
       border-radius: 0;
@@ -41,12 +32,6 @@
         border-radius: 0 0 0.5rem 0.5rem;
       }
     }
-
-    @each $color in $colors {
-      &#{$tab-panel}--#{$color} {
-        background-color: var(--color-base-background-#{$color});
-      }
-    }
   }
 }
 

package/components/Tabs/TabPanel/styles.module.scss.d.ts

@@ -6,9 +6,7 @@ export type Styles = {
   'tab-panel--animate-right': string;
   'tab-panel--blueberry': string;
   'tab-panel--first': string;
-  'tab-panel--framed': string;
   'tab-panel--neutral': string;
-  'tab-panel--normal': string;
   'tab-panel--white': string;
 };
 

package/components/Tabs/Tabs.d.ts

@@ -3,7 +3,7 @@ import Tab from './Tab';
 import { PaletteNames } from '../../theme/palette';
 export type { TabProps } from './Tab';
 export type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;
-export type TabsType = 'normal' | 'framed';
+export type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';
 export type TabsTouchBehaviour = 'swipe' | 'none';
 export interface TabsProps {
     children?: React.ReactNode;
@@ -13,14 +13,14 @@ export interface TabsProps {
     className?: string;
     /** Sets the color of the tabs. Default: white */
     color?: TabsColors;
+    /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */
+    onColor?: TabsOnColor;
     /** Whether the tab list should be sticky */
     sticky?: boolean;
     /** Determines how Tabs respons to touch events. */
     touchBehaviour?: TabsTouchBehaviour;
     /** Sets the data-testid attribute. */
     testId?: string;
-    /** Sets the visual type of the tabs */
-    type?: TabsType;
 }
 declare const TabsRoot: React.FC<TabsProps>;
 type TabsComponent = typeof TabsRoot & {

package/components/Tabs/index.js

@@ -1,95 +1,80 @@
-import { jsxs as C, jsx as m } from "react/jsx-runtime";
-import v, { useState as i, useRef as E, useEffect as S } from "react";
-import M from "classnames";
-import { a as G, T as H } from "../../TabList.js";
-import { T as J } from "../../TabPanel.js";
-import { isMobileUA as K } from "../../utils/mobile.js";
-import c from "./styles.module.scss";
-const O = 75, Q = ({
-  activeTab: L,
-  children: l,
-  className: N,
-  color: f = "white",
+import { jsxs as y, jsx as d } from "react/jsx-runtime";
+import b, { useState as i, useRef as v, useEffect as A } from "react";
+import S from "classnames";
+import { a as H, T as J } from "../../TabList.js";
+import { T as K } from "../../TabPanel.js";
+import { isMobileUA as O } from "../../utils/mobile.js";
+import m from "./styles.module.scss";
+const Q = 75, V = ({
+  activeTab: E,
+  children: c,
+  className: M,
+  color: l = "white",
+  onColor: N = "onwhite",
   sticky: g = !0,
-  testId: y,
-  type: d = "normal",
-  touchBehaviour: X = "swipe"
+  testId: D,
+  touchBehaviour: L = "none"
 }) => {
-  const R = L !== void 0, [D, P] = i(0), [u, j] = i(0), [h, k] = i(0), [U, s] = i(0), [F, p] = i(null), x = K(), n = E(null), r = E(null), I = E(null), T = (t, a) => {
-    R || (P(t), t > a ? (s(0), q()) : t < a && (s(0), $()));
-  }, $ = () => {
-    x && p("right");
+  const X = E !== void 0, [P, U] = i(0), [u, j] = i(0), [h, k] = i(0), [F, s] = i(0), [I, f] = i(null), C = O(), n = v(null), r = v(null), $ = v(null);
+  let R = "onwhite";
+  l === "white" && (R = N);
+  const p = (e, o) => {
+    X || (U(e), e > o ? (s(0), z()) : e < o && (s(0), q()));
   }, q = () => {
-    x && p("left");
+    C && f("right");
   }, z = () => {
-    p(null);
-  }, e = R ? L : D;
-  return S(() => {
-    const t = (o) => {
-      j(o.touches[0].clientX);
-    }, a = (o) => {
-      k(o.touches[0].clientX);
-      const b = o.touches[0].clientX - u;
-      e === 0 && b > 0 || e === v.Children.count(l) - 1 && b < 0 ? s(0) : s(b);
-    }, A = () => {
-      Math.abs(h - u) >= O && (h > u ? T(Math.max(0, e - 1), e) : T(Math.min(v.Children.count(l) - 1, e + 1), e)), s(0);
+    C && f("left");
+  }, G = () => {
+    f(null);
+  }, t = X ? E : P;
+  return A(() => {
+    const e = (a) => {
+      j(a.touches[0].clientX);
+    }, o = (a) => {
+      k(a.touches[0].clientX);
+      const T = a.touches[0].clientX - u;
+      t === 0 && T > 0 || t === b.Children.count(c) - 1 && T < 0 ? s(0) : s(T);
+    }, x = () => {
+      Math.abs(h - u) >= Q && (h > u ? p(Math.max(0, t - 1), t) : p(Math.min(b.Children.count(c) - 1, t + 1), t)), s(0);
     };
-    return X === "swipe" && n.current && (n.current.addEventListener("touchstart", t), n.current.addEventListener("touchmove", a), n.current.addEventListener("touchend", A)), () => {
-      n.current && (n.current.removeEventListener("touchstart", t), n.current.removeEventListener("touchmove", a), n.current.removeEventListener("touchend", A));
+    return L === "swipe" && n.current && (n.current.addEventListener("touchstart", e), n.current.addEventListener("touchmove", o), n.current.addEventListener("touchend", x)), () => {
+      n.current && (n.current.removeEventListener("touchstart", e), n.current.removeEventListener("touchmove", o), n.current.removeEventListener("touchend", x));
     };
-  }, [X, u, h, e]), S(() => {
-    const t = () => {
-      z();
+  }, [L, u, h, t]), A(() => {
+    const e = () => {
+      G();
     };
-    return r.current && r.current.addEventListener("animationend", t), () => {
-      r.current && r.current.removeEventListener("animationend", t);
+    return r.current && r.current.addEventListener("animationend", e), () => {
+      r.current && r.current.removeEventListener("animationend", e);
     };
-  }, []), /* @__PURE__ */ C("div", { className: N, "data-testid": y, children: [
-    /* @__PURE__ */ C(
+  }, []), /* @__PURE__ */ y("div", { className: M, "data-testid": D, children: [
+    /* @__PURE__ */ y(
       "div",
       {
-        ref: I,
-        className: M(c["tab-list-wrapper"], {
-          [c["tab-list-wrapper--sticky"]]: g
+        ref: $,
+        className: S(m["tab-list-wrapper"], {
+          [m["tab-list-wrapper--sticky"]]: g
         }),
         children: [
-          /* @__PURE__ */ m(
-            H,
+          /* @__PURE__ */ d(
+            J,
             {
-              onTabListClick: (t) => T(t, e),
-              selectedTab: e,
-              color: f,
-              type: d,
-              children: l
+              onTabListClick: (e) => p(e, t),
+              selectedTab: t,
+              color: l,
+              onColor: R,
+              children: c
             }
           ),
-          /* @__PURE__ */ m(
-            "div",
-            {
-              className: M(c["panel-wrapper"], c[`panel-wrapper--${f}`], {
-                [c["panel-wrapper--framed"]]: d == "framed"
-              })
-            }
-          )
+          /* @__PURE__ */ d("div", { className: S(m["panel-wrapper"], m[`panel-wrapper--${l}`]) })
         ]
       }
     ),
-    /* @__PURE__ */ m("div", { ref: n, style: { marginTop: d == "framed" ? "-40px" : "" }, children: /* @__PURE__ */ m(
-      J,
-      {
-        ref: r,
-        color: f,
-        type: d,
-        isFirst: e == 0,
-        translateX: U,
-        animate: F,
-        children: v.Children.toArray(l)[e]
-      }
-    ) })
+    /* @__PURE__ */ d("div", { ref: n, style: { marginTop: "-50px" }, children: /* @__PURE__ */ d(K, { ref: r, color: l, isFirst: t == 0, translateX: F, animate: I, children: b.Children.toArray(c)[t] }) })
   ] });
-}, w = Q;
+}, w = V;
 w.displayName = "Tabs";
-w.Tab = G;
+w.Tab = H;
 w.Tab.displayName = "Tabs.Tab";
 export {
   w as default

package/components/Tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { PaletteNames } from '../../theme/palette';\nimport { isMobileUA } from '../../utils/mobile';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsType = 'normal' | 'framed';\nexport type TabsTouchBehaviour = 'swipe' | 'none';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Determines how Tabs respons to touch events. */\n  touchBehaviour?: TabsTouchBehaviour;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Sets the visual type of the tabs */\n  type?: TabsType;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  sticky = true,\n  testId,\n  type = 'normal',\n  touchBehaviour = 'swipe',\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [translateX, setTranslateX] = useState(0);\n  const [panelAnimation, setPanelAnimation] = useState<'left' | 'right' | null>(null);\n  const mobile = isMobileUA();\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  const onValueChange = (newValue: number, oldValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n      if (newValue > oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onLeftSwipe();\n      } else if (newValue < oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onRightSwipe();\n      }\n    }\n  };\n\n  const onRightSwipe = (): void => {\n    mobile && setPanelAnimation('right');\n  };\n\n  const onLeftSwipe = (): void => {\n    mobile && setPanelAnimation('left');\n  };\n\n  const resetAnimation = (): void => {\n    setPanelAnimation(null);\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  useEffect(() => {\n    const handleTouchStart = (event: TouchEvent): void => {\n      setTouchStartX(event.touches[0].clientX);\n    };\n\n    const handleTouchMove = (event: TouchEvent): void => {\n      setTouchEndX(event.touches[0].clientX);\n      const newTranslateX = event.touches[0].clientX - touchStartX;\n\n      if (activeTabIndex === 0 && newTranslateX > 0) {\n        setTranslateX(0);\n      } else if (activeTabIndex === React.Children.count(children) - 1 && newTranslateX < 0) {\n        setTranslateX(0);\n      } else {\n        setTranslateX(newTranslateX);\n      }\n    };\n\n    const handleTouchEnd = (): void => {\n      const swipeDistance = Math.abs(touchEndX - touchStartX);\n      if (swipeDistance >= swipeDistanceThreshold) {\n        if (touchEndX > touchStartX) {\n          // User swiped right\n          onValueChange(Math.max(0, activeTabIndex - 1), activeTabIndex);\n        } else {\n          // User swiped left\n          onValueChange(Math.min(React.Children.count(children) - 1, activeTabIndex + 1), activeTabIndex);\n        }\n      }\n      setTranslateX(0);\n    };\n\n    if (touchBehaviour === 'swipe' && tabsRef.current) {\n      tabsRef.current.addEventListener('touchstart', handleTouchStart);\n      tabsRef.current.addEventListener('touchmove', handleTouchMove);\n      tabsRef.current.addEventListener('touchend', handleTouchEnd);\n    }\n    return () => {\n      if (tabsRef.current) {\n        tabsRef.current.removeEventListener('touchstart', handleTouchStart);\n        tabsRef.current.removeEventListener('touchmove', handleTouchMove);\n        tabsRef.current.removeEventListener('touchend', handleTouchEnd);\n      }\n    };\n  }, [touchBehaviour, touchStartX, touchEndX, activeTabIndex]);\n\n  useEffect(() => {\n    const handleAnimationEnd = (): void => {\n      resetAnimation();\n    };\n\n    if (tabPanelRef.current) {\n      tabPanelRef.current.addEventListener('animationend', handleAnimationEnd);\n    }\n\n    return () => {\n      if (tabPanelRef.current) {\n        tabPanelRef.current.removeEventListener('animationend', handleAnimationEnd);\n      }\n    };\n  }, []);\n\n  return (\n    <div className={className} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index, activeTabIndex)}\n          selectedTab={activeTabIndex}\n          color={color}\n          type={type}\n        >\n          {children}\n        </TabList>\n        <div\n          className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`], {\n            [styles['panel-wrapper--framed']]: type == 'framed',\n          })}\n        ></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: type == 'framed' ? '-40px' : '' }}>\n        <TabPanel\n          ref={tabPanelRef}\n          color={color}\n          type={type}\n          isFirst={activeTabIndex == 0}\n          translateX={translateX}\n          animate={panelAnimation}\n        >\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["swipeDistanceThreshold","TabsRoot","activeTab","children","className","color","sticky","testId","type","touchBehaviour","isControlled","uncontrolledValue","setUncontrolledValue","useState","touchStartX","setTouchStartX","touchEndX","setTouchEndX","translateX","setTranslateX","panelAnimation","setPanelAnimation","mobile","isMobileUA","tabsRef","useRef","tabPanelRef","tabListRef","onValueChange","newValue","oldValue","onLeftSwipe","onRightSwipe","resetAnimation","activeTabIndex","useEffect","handleTouchStart","event","handleTouchMove","newTranslateX","React","handleTouchEnd","handleAnimationEnd","jsxs","classNames","styles","jsx","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport Tab from './Tab';\nimport TabList from './TabList';\nimport TabPanel from './TabPanel';\nimport { PaletteNames } from '../../theme/palette';\nimport { isMobileUA } from '../../utils/mobile';\n\nimport styles from './styles.module.scss';\n\nexport type { TabProps } from './Tab';\nexport type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;\nexport type TabsOnColor = 'onblueberry' | 'onneutral' | 'onwhite';\nexport type TabsTouchBehaviour = 'swipe' | 'none';\n\nexport interface TabsProps {\n  children?: React.ReactNode;\n  /** Controlled state for Tabs component */\n  activeTab?: number;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the color of the tabs. Default: white */\n  color?: TabsColors;\n  /** Sets the background color of the tabs. Can only be used when the color is set to white. Default: onwhite */\n  onColor?: TabsOnColor;\n  /** Whether the tab list should be sticky */\n  sticky?: boolean;\n  /** Determines how Tabs respons to touch events. */\n  touchBehaviour?: TabsTouchBehaviour;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst swipeDistanceThreshold = 75;\n\nconst TabsRoot: React.FC<TabsProps> = ({\n  activeTab,\n  children,\n  className,\n  color = 'white',\n  onColor = 'onwhite',\n  sticky = true,\n  testId,\n  touchBehaviour = 'none',\n}) => {\n  const isControlled = activeTab !== undefined;\n  const [uncontrolledValue, setUncontrolledValue] = useState(0);\n  const [touchStartX, setTouchStartX] = useState(0);\n  const [touchEndX, setTouchEndX] = useState(0);\n  const [translateX, setTranslateX] = useState(0);\n  const [panelAnimation, setPanelAnimation] = useState<'left' | 'right' | null>(null);\n  const mobile = isMobileUA();\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabPanelRef = useRef<HTMLDivElement>(null);\n  const tabListRef = useRef<HTMLDivElement>(null);\n\n  let onColorUsed: TabsOnColor = 'onwhite';\n  if (color === 'white') {\n    onColorUsed = onColor;\n  }\n\n  const onValueChange = (newValue: number, oldValue: number): void => {\n    if (!isControlled) {\n      setUncontrolledValue(newValue);\n      if (newValue > oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onLeftSwipe();\n      } else if (newValue < oldValue) {\n        // make sure that the translateX is reset so the animation does not go outside the screen\n        setTranslateX(0);\n        onRightSwipe();\n      }\n    }\n  };\n\n  const onRightSwipe = (): void => {\n    mobile && setPanelAnimation('right');\n  };\n\n  const onLeftSwipe = (): void => {\n    mobile && setPanelAnimation('left');\n  };\n\n  const resetAnimation = (): void => {\n    setPanelAnimation(null);\n  };\n\n  const activeTabIndex = isControlled ? activeTab : uncontrolledValue;\n\n  useEffect(() => {\n    const handleTouchStart = (event: TouchEvent): void => {\n      setTouchStartX(event.touches[0].clientX);\n    };\n\n    const handleTouchMove = (event: TouchEvent): void => {\n      setTouchEndX(event.touches[0].clientX);\n      const newTranslateX = event.touches[0].clientX - touchStartX;\n\n      if (activeTabIndex === 0 && newTranslateX > 0) {\n        setTranslateX(0);\n      } else if (activeTabIndex === React.Children.count(children) - 1 && newTranslateX < 0) {\n        setTranslateX(0);\n      } else {\n        setTranslateX(newTranslateX);\n      }\n    };\n\n    const handleTouchEnd = (): void => {\n      const swipeDistance = Math.abs(touchEndX - touchStartX);\n      if (swipeDistance >= swipeDistanceThreshold) {\n        if (touchEndX > touchStartX) {\n          // User swiped right\n          onValueChange(Math.max(0, activeTabIndex - 1), activeTabIndex);\n        } else {\n          // User swiped left\n          onValueChange(Math.min(React.Children.count(children) - 1, activeTabIndex + 1), activeTabIndex);\n        }\n      }\n      setTranslateX(0);\n    };\n\n    if (touchBehaviour === 'swipe' && tabsRef.current) {\n      tabsRef.current.addEventListener('touchstart', handleTouchStart);\n      tabsRef.current.addEventListener('touchmove', handleTouchMove);\n      tabsRef.current.addEventListener('touchend', handleTouchEnd);\n    }\n    return () => {\n      if (tabsRef.current) {\n        tabsRef.current.removeEventListener('touchstart', handleTouchStart);\n        tabsRef.current.removeEventListener('touchmove', handleTouchMove);\n        tabsRef.current.removeEventListener('touchend', handleTouchEnd);\n      }\n    };\n  }, [touchBehaviour, touchStartX, touchEndX, activeTabIndex]);\n\n  useEffect(() => {\n    const handleAnimationEnd = (): void => {\n      resetAnimation();\n    };\n\n    if (tabPanelRef.current) {\n      tabPanelRef.current.addEventListener('animationend', handleAnimationEnd);\n    }\n\n    return () => {\n      if (tabPanelRef.current) {\n        tabPanelRef.current.removeEventListener('animationend', handleAnimationEnd);\n      }\n    };\n  }, []);\n\n  return (\n    <div className={className} data-testid={testId}>\n      <div\n        ref={tabListRef}\n        className={classNames(styles['tab-list-wrapper'], {\n          [styles['tab-list-wrapper--sticky']]: sticky,\n        })}\n      >\n        <TabList\n          onTabListClick={(index: number) => onValueChange(index, activeTabIndex)}\n          selectedTab={activeTabIndex}\n          color={color}\n          onColor={onColorUsed}\n        >\n          {children}\n        </TabList>\n        <div className={classNames(styles['panel-wrapper'], styles[`panel-wrapper--${color}`])}></div>\n      </div>\n      <div ref={tabsRef} style={{ marginTop: '-50px' }}>\n        <TabPanel ref={tabPanelRef} color={color} isFirst={activeTabIndex == 0} translateX={translateX} animate={panelAnimation}>\n          {React.Children.toArray(children)[activeTabIndex]}\n        </TabPanel>\n      </div>\n    </div>\n  );\n};\n\ntype TabsComponent = typeof TabsRoot & {\n  Tab: typeof Tab;\n};\nconst Tabs = TabsRoot as TabsComponent;\nTabs.displayName = 'Tabs';\nTabs.Tab = Tab;\nTabs.Tab.displayName = 'Tabs.Tab';\n\nexport default Tabs;\n"],"names":["swipeDistanceThreshold","TabsRoot","activeTab","children","className","color","onColor","sticky","testId","touchBehaviour","isControlled","uncontrolledValue","setUncontrolledValue","useState","touchStartX","setTouchStartX","touchEndX","setTouchEndX","translateX","setTranslateX","panelAnimation","setPanelAnimation","mobile","isMobileUA","tabsRef","useRef","tabPanelRef","tabListRef","onColorUsed","onValueChange","newValue","oldValue","onLeftSwipe","onRightSwipe","resetAnimation","activeTabIndex","useEffect","handleTouchStart","event","handleTouchMove","newTranslateX","React","handleTouchEnd","handleAnimationEnd","jsxs","classNames","styles","jsx","TabList","index","TabPanel","Tabs","Tab"],"mappings":"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"}

package/components/Tabs/styles.module.scss

@@ -16,19 +16,15 @@
   $panel-wrapper: &;
   $colors: 'blueberry', 'neutral', 'white';
 
-  border-top: 1px solid var(--color-action-border-onlight-focus);
   position: relative;
   width: 100%;
+  border-radius: 0;
+  height: 50px;
 
-  &--framed {
-    border-radius: 0;
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    border-right: 1px solid var(--color-action-border-onlight-focus);
+    border-left: 1px solid var(--color-action-border-onlight-focus);
     height: 50px;
-
-    @media (min-width: map.get($grid-breakpoints, md)) {
-      border-radius: 0 0.5rem 0 0;
-      border-right: 1px solid var(--color-action-border-onlight-focus);
-      border-left: 1px solid var(--color-action-border-onlight-focus);
-    }
   }
 
   @each $color in $colors {

package/components/Tabs/styles.module.scss.d.ts

@@ -1,7 +1,6 @@
 export type Styles = {
   'panel-wrapper': string;
   'panel-wrapper--blueberry': string;
-  'panel-wrapper--framed': string;
   'panel-wrapper--neutral': string;
   'panel-wrapper--white': string;
   'tab-list-wrapper': string;

package/components/Textarea/Textarea.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { FormMode } from '../../constants';
-export interface TextareaProps extends Pick<React.InputHTMLAttributes<HTMLTextAreaElement>, 'aria-describedby' | 'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | 'onChange'> {
+import { FormOnColor } from '../../constants';
+import { ErrorWrapperClassNameProps } from '../ErrorWrapper';
+export interface TextareaProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLTextAreaElement>, 'aria-describedby' | 'autoFocus' | 'disabled' | 'name' | 'autoComplete' | 'placeholder' | 'readOnly' | 'required' | 'defaultValue' | 'onChange'> {
     /** max character limit in textarea  */
     maxCharacters?: number;
     /** The text is displayed in the end of the text-counter */
@@ -14,7 +15,7 @@ export interface TextareaProps extends Pick<React.InputHTMLAttributes<HTMLTextAr
     /** If true, the component will be transparent. */
     transparent?: boolean;
     /** Changes the visuals of the textarea */
-    mode?: keyof typeof FormMode;
+    onColor?: keyof typeof FormOnColor;
     /** Label of the input */
     label?: React.ReactNode;
     /** id of the textarea */