@helsenorge/designsystem-react 7.12.0 → 7.13.0

package/components/Table/TableHeadCell/TableHeadCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeadCell.js","sources":["../../../../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n  sortable,\n  onClick,\n  className,\n  children,\n  sortDir,\n  mode = ModeType.normal,\n  scope = 'col',\n  ...rest\n}) => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection","TableHeadCell","sortable","onClick","className","children","sortDir","mode","ModeType","scope","rest","tableHeadCellDefaultClass","classNames","tableStyles","React","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","getSortDirection","TableHeadCell$1"],"mappings":";;;;;;;;AAUY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA;AAoBL,MAAMC,IAAiC,CAAC;AAAA,EAC7C,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,MAAM;AACJ,QAAMC,IAA4BC,EAAWC,EAAY,kBAAkB,GAAGT,GAAW;AAAA,IACvF,CAACS,EAAY,2BAA2B,CAAC,GAAGN,MAASC,EAAS;AAAA,EAAA,CAC/D;AAEG,MAAA,CAACN,KAAY,CAACG;AACT,WAAAS,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,EAA2B,CAAA;AAGnD,MAAI,CAACT;AACH,2CACG,MAAG,EAAA,OAAAO,GAAc,WAAWE,GAA4B,GAAGD,KACzDL,CACH;AAIJ,QAAMU,IAAkBH,EAAWD,GAA2BE,EAAY,4BAA4B,GAAGT,CAAS,GAE5GY,IAAiB,MACrBV,qCACG,OAAI,EAAA,WAAWO,EAAY,oCAAoC,EAAA,mCAC7DI,GAAK,EAAA,SAASX,KAAW,QAAoBY,IAAYC,GAAS,MAAMC,EAAS,SAAS,CAC7F,GAGEC,IAAmB,MAAyC;AAChE,YAAQf,GAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,IACX;AAAA,EAAA;AAGF,SACGQ,gBAAAA,EAAA,cAAA,MAAA,EAAG,OAAAL,GAAc,WAAWM,GAAiB,aAAWM,EAAiB,GAAI,GAAGX,EAAA,GAC9EI,gBAAAA,EAAA,cAAA,UAAA,EAAO,MAAK,UAAS,SAAAX,GAAkB,WAAWU,EAAY,oBAAoB,GAAG,gBAAcP,IAAU,CAAC,CAACA,IAAU,OACvH,GAAAU,EACA,GAAAX,CACH,CACF;AAEJ,GAEAiB,IAAerB;"}
+{"version":3,"file":"TableHeadCell.js","sources":["../../../../src/components/Table/TableHeadCell/TableHeadCell.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport Icon, { IconSize } from '../../Icon';\nimport ArrowDown from '../../Icons/ArrowDown';\nimport ArrowUp from '../../Icons/ArrowUp';\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\n\nexport enum SortDirection {\n  asc = 'asc',\n  desc = 'desc',\n}\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'th'>, 'style'> {\n  /** Sets if column for head cell should be sortable*/\n  sortable?: boolean;\n  /** Sort direction  */\n  sortDir?: SortDirection;\n  /** Function that is called when clicked */\n  onClick?: () => void;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the content of the td element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableHeadCell: React.FC<Props> = ({\n  sortable,\n  onClick,\n  className,\n  children,\n  sortDir,\n  mode = ModeType.normal,\n  scope = 'col',\n  ...rest\n}) => {\n  const tableHeadCellDefaultClass = classNames(tableStyles['table__head-cell'], className, {\n    [tableStyles['table__head-cell--compact']]: mode === ModeType.compact,\n  });\n\n  if (!sortable && !children) {\n    return <td className={tableHeadCellDefaultClass}></td>;\n  }\n\n  if (!sortable) {\n    return (\n      <th scope={scope} className={tableHeadCellDefaultClass} {...rest}>\n        {children}\n      </th>\n    );\n  }\n\n  const sortableClasses = classNames(tableHeadCellDefaultClass, tableStyles['table__head-cell--sortable'], className);\n\n  const renderSortIcon = (): React.JSX.Element | undefined =>\n    sortDir && (\n      <div className={tableStyles['table__head-cell-sort-icon-wrapper']}>\n        <Icon svgIcon={sortDir == SortDirection.asc ? ArrowDown : ArrowUp} size={IconSize.XXSmall} />\n      </div>\n    );\n\n  const getSortDirection = (): React.AriaAttributes['aria-sort'] => {\n    switch (sortDir) {\n      case SortDirection.asc:\n        return 'ascending';\n      case SortDirection.desc:\n        return 'descending';\n    }\n  };\n\n  return (\n    <th scope={scope} className={sortableClasses} aria-sort={getSortDirection()} {...rest}>\n      <button type=\"button\" onClick={onClick} className={tableStyles['table__sort-button']} aria-pressed={sortDir ? !!sortDir : undefined}>\n        {renderSortIcon()}\n        {children}\n      </button>\n    </th>\n  );\n};\n\nexport default TableHeadCell;\n"],"names":["SortDirection","TableHeadCell","sortable","onClick","className","children","sortDir","mode","ModeType","scope","rest","tableHeadCellDefaultClass","classNames","tableStyles","React","sortableClasses","renderSortIcon","Icon","ArrowDown","ArrowUp","IconSize","getSortDirection"],"mappings":";;;;;;;;AAUY,IAAAA,sBAAAA,OACVA,EAAA,MAAM,OACNA,EAAA,OAAO,QAFGA,IAAAA,KAAA,CAAA,CAAA;AAoBL,MAAMC,IAAiC,CAAC;AAAA,EAC7C,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,MAAM;AACJ,QAAMC,IAA4BC,EAAWC,EAAY,kBAAkB,GAAGT,GAAW;AAAA,IACvF,CAACS,EAAY,2BAA2B,CAAC,GAAGN,MAASC,EAAS;AAAA,EAAA,CAC/D;AAEG,MAAA,CAACN,KAAY,CAACG;AACT,WAAAS,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,EAA2B,CAAA;AAGnD,MAAI,CAACT;AACH,2CACG,MAAG,EAAA,OAAAO,GAAc,WAAWE,GAA4B,GAAGD,KACzDL,CACH;AAIJ,QAAMU,IAAkBH,EAAWD,GAA2BE,EAAY,4BAA4B,GAAGT,CAAS,GAE5GY,IAAiB,MACrBV,qCACG,OAAI,EAAA,WAAWO,EAAY,oCAAoC,EAAA,mCAC7DI,GAAK,EAAA,SAASX,KAAW,QAAoBY,IAAYC,GAAS,MAAMC,EAAS,SAAS,CAC7F,GAGEC,IAAmB,MAAyC;AAChE,YAAQf,GAAS;AAAA,MACf,KAAK;AACI,eAAA;AAAA,MACT,KAAK;AACI,eAAA;AAAA,IACX;AAAA,EAAA;AAGF,SACGQ,gBAAAA,EAAA,cAAA,MAAA,EAAG,OAAAL,GAAc,WAAWM,GAAiB,aAAWM,EAAiB,GAAI,GAAGX,EAAA,GAC9EI,gBAAAA,EAAA,cAAA,UAAA,EAAO,MAAK,UAAS,SAAAX,GAAkB,WAAWU,EAAY,oBAAoB,GAAG,gBAAcP,IAAU,CAAC,CAACA,IAAU,OACvH,GAAAU,EACA,GAAAX,CACH,CACF;AAEJ;"}

package/components/Table/TableHeadCell/index.js

@@ -1,8 +1,8 @@
-import l from "./TableHeadCell.js";
-import { SortDirection as a, TableHeadCell as t } from "./TableHeadCell.js";
+import { TableHeadCell as o } from "./TableHeadCell.js";
+import { SortDirection as a } from "./TableHeadCell.js";
 export {
   a as SortDirection,
-  t as TableHeadCell,
-  l as default
+  o as TableHeadCell,
+  o as default
 };
 //# sourceMappingURL=index.js.map

package/components/Table/TableRow/TableRow.js

@@ -1,9 +1,9 @@
 import e from "react";
-import w from "classnames";
-import r from "../../Table/styles.module.scss";
-import { ModeType as E } from "../Table.js";
-import d from "../TableExpanderCell/TableExpanderCellMobile.js";
-const R = ({
+import E from "classnames";
+import o from "../../Table/styles.module.scss";
+import { ModeType as d } from "../Table.js";
+import w from "../TableExpanderCell/TableExpanderCellMobile.js";
+const x = ({
   rowKey: m,
   hideDetailsText: s,
   showDetailsText: n,
@@ -11,19 +11,19 @@ const R = ({
   expanded: p,
   onClick: a,
   className: b,
-  children: c,
-  mode: l = E.normal,
-  ...f
+  children: f,
+  mode: l = d.normal,
+  ...i
 }) => {
-  const i = w(
-    r["table-row"],
+  const c = E(
+    o["table-row"],
     {
-      [r["table__row--expandable"]]: t
+      [o["table__row--expandable"]]: t
     },
     b
   );
-  return /* @__PURE__ */ e.createElement("tr", { className: i, onClick: a, key: m, ...f }, e.Children.map(c, (o) => e.isValidElement(o) && e.cloneElement(o, { mode: l })), t && /* @__PURE__ */ e.createElement(
-    d,
+  return /* @__PURE__ */ e.createElement("tr", { className: c, onClick: a, key: m, ...i }, e.Children.map(f, (r) => e.isValidElement(r) && e.cloneElement(r, { mode: l })), t && /* @__PURE__ */ e.createElement(
+    w,
     {
       expanded: p,
       onClick: a,
@@ -32,9 +32,9 @@ const R = ({
       mode: l
     }
   ));
-}, C = R;
+};
 export {
-  R as TableRow,
-  C as default
+  x as TableRow,
+  x as default
 };
 //# sourceMappingURL=TableRow.js.map

package/components/Table/TableRow/TableRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableRow.js","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowKey","hideDetailsText","showDetailsText","expandable","expanded","onClick","className","children","mode","ModeType","rest","tableRowClass","classNames","tableStyles","React","child","TableExpanderCellMobile","TableRow$1"],"mappings":";;;;;AA6BO,MAAMA,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAAA,EAChB,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAgBC;AAAA,IACpBC,EAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAACA,EAAY,wBAAwB,CAAC,GAAGV;AAAA,IAC3C;AAAA,IACAG;AAAA,EAAA;AAIA,SAAAQ,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,GAAe,SAAAN,GAAkB,KAAKL,GAAS,GAAGU,EAAA,GAC9DI,EAAM,SAAS,IAAIP,GAAU,OAASO,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAP,EAAM,CAAA,CAAC,GAC7HL,KACCW,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAAZ;AAAA,MACA,SAAAC;AAAA,MACA,iBAAAJ;AAAA,MACA,iBAAAC;AAAA,MACA,MAAAM;AAAA,IAAA;AAAA,EAAA,CAGN;AAEJ,GAEAS,IAAelB;"}
+{"version":3,"file":"TableRow.js","sources":["../../../../src/components/Table/TableRow/TableRow.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport tableStyles from '../styles.module.scss';\nimport { ModeType } from '../Table';\nimport TableExpanderCellMobile from '../TableExpanderCell/TableExpanderCellMobile';\n\nexport interface Props extends Omit<React.ComponentPropsWithoutRef<'tr'>, 'style'> {\n  /** Sets if expanded row can be expanded */\n  expandable?: boolean;\n  /** Sets if expanded row is expanded */\n  expanded?: boolean;\n  /** When hide/show button for expanded row is clicked. */\n  onClick?: () => void;\n  /** Text for expanded row hide button. */\n  hideDetailsText?: string;\n  /** Text for expanded row show button. */\n  showDetailsText?: string;\n  /** Key attribute for row */\n  rowKey?: string;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** Sets the cells of the table row element.  */\n  children?: React.ReactNode;\n  /** For display with less space. Discouraged to use together with interactive elements. */\n  mode?: ModeType;\n}\n\nexport const TableRow: React.FC<Props> = ({\n  rowKey,\n  hideDetailsText,\n  showDetailsText,\n  expandable,\n  expanded,\n  onClick,\n  className,\n  children,\n  mode = ModeType.normal,\n  ...rest\n}) => {\n  const tableRowClass = classNames(\n    tableStyles['table-row'],\n    {\n      [tableStyles['table__row--expandable']]: expandable,\n    },\n    className\n  );\n\n  return (\n    <tr className={tableRowClass} onClick={onClick} key={rowKey} {...rest}>\n      {React.Children.map(children, child => React.isValidElement<{ mode?: ModeType }>(child) && React.cloneElement(child, { mode }))}\n      {expandable && (\n        <TableExpanderCellMobile\n          expanded={expanded}\n          onClick={onClick}\n          hideDetailsText={hideDetailsText}\n          showDetailsText={showDetailsText}\n          mode={mode}\n        />\n      )}\n    </tr>\n  );\n};\n\nexport default TableRow;\n"],"names":["TableRow","rowKey","hideDetailsText","showDetailsText","expandable","expanded","onClick","className","children","mode","ModeType","rest","tableRowClass","classNames","tableStyles","React","child","TableExpanderCellMobile"],"mappings":";;;;;AA6BO,MAAMA,IAA4B,CAAC;AAAA,EACxC,QAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAAC,IAAOC,EAAS;AAAA,EAChB,GAAGC;AACL,MAAM;AACJ,QAAMC,IAAgBC;AAAA,IACpBC,EAAY,WAAW;AAAA,IACvB;AAAA,MACE,CAACA,EAAY,wBAAwB,CAAC,GAAGV;AAAA,IAC3C;AAAA,IACAG;AAAA,EAAA;AAIA,SAAAQ,gBAAAA,EAAA,cAAC,MAAG,EAAA,WAAWH,GAAe,SAAAN,GAAkB,KAAKL,GAAS,GAAGU,EAAA,GAC9DI,EAAM,SAAS,IAAIP,GAAU,OAASO,EAAM,eAAoCC,CAAK,KAAKD,EAAM,aAAaC,GAAO,EAAE,MAAAP,EAAM,CAAA,CAAC,GAC7HL,KACCW,gBAAAA,EAAA;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAAZ;AAAA,MACA,SAAAC;AAAA,MACA,iBAAAJ;AAAA,MACA,iBAAAC;AAAA,MACA,MAAAM;AAAA,IAAA;AAAA,EAAA,CAGN;AAEJ;"}

package/components/Table/TableRow/index.js

@@ -1,7 +1,6 @@
-import e from "./TableRow.js";
-import { TableRow as t } from "./TableRow.js";
+import { TableRow as a } from "./TableRow.js";
 export {
-  t as TableRow,
-  e as default
+  a as TableRow,
+  a as default
 };
 //# sourceMappingURL=index.js.map

package/components/Table/TableRow/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/components/Table/styles.module.scss

@@ -134,7 +134,7 @@ table .table-body .table-row {
   width: 100%;
   border-collapse: collapse;
 
-  @each $breakpoint in map-keys($grid-breakpoints) {
+  @each $breakpoint in map.keys($grid-breakpoints) {
     &--centeredoverflow-#{$breakpoint} {
       @include media-breakpoint-down($breakpoint) {
         @include centeredoverflow;
@@ -215,13 +215,13 @@ table .table-body .table-row {
   }
 
   &--compact {
-    padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs) getSpacer(3xs);
+    padding: getSpacer(2xs) getSpacer(3xs) getSpacer(4xs);
     line-height: 18px;
     font-size: 14px;
     height: unset;
 
     @media (min-width: map.get($grid-breakpoints, sm)) {
-      padding: getSpacer(s) getSpacer(3xs) getSpacer(3xs) getSpacer(3xs);
+      padding: getSpacer(s) getSpacer(3xs) getSpacer(3xs);
       line-height: 20px;
       font-size: $font-size-xs;
       height: unset;

package/components/Table/utils.d.ts

@@ -8,7 +8,7 @@ import { Breakpoint } from '../../hooks/useBreakpoint';
  * @param tableWidth Bredde på tabell i px
  * @returns Konfigurasjon for responsiv oppførsel uten fallbackVariant
  */
-export declare const getCurrentConfig: (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint, tableWidth: number, windowWidth: number) => Omit<BreakpointConfig, 'fallbackVariant'> | undefined;
+export declare const getCurrentConfig: (config: BreakpointConfig | BreakpointConfig[], breakpoint: Breakpoint, tableWidth: number, windowWidth: number) => Omit<BreakpointConfig, "fallbackVariant"> | undefined;
 /**
  * Finn klassenavn for responsiv oppførsel
  * @param config Konfigurasjon for responsiv oppførsel

package/components/Tabs/Tab.js

@@ -1,6 +1,6 @@
 import e from "react";
-const a = (t) => /* @__PURE__ */ e.createElement(e.Fragment, null, t.children ?? null), n = a;
+const r = (t) => /* @__PURE__ */ e.createElement(e.Fragment, null, t.children ?? null);
 export {
-  n as default
+  r as default
 };
 //# sourceMappingURL=Tab.js.map

package/components/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n"],"names":["Tab","props","React","Tab$1"],"mappings":";AAkBA,MAAMA,IAA0B,CAASC,MAChCC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAGD,EAAM,YAAY,IAAK,GAGnCE,IAAeH;"}
+{"version":3,"file":"Tab.js","sources":["../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import React from 'react';\n\nimport { SvgIcon } from '../Icon';\nimport { IconName } from '../Icons/IconNames';\n\nexport interface TabProps {\n  /** Sets the tab panel content */\n  children?: React.ReactNode;\n  /** Optional icon on the tab */\n  icon?: SvgIcon | IconName;\n  /** Called when tab is selected */\n  onTabClick?: (index: number) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Title on the tab */\n  title?: string;\n}\n\nconst Tab: React.FC<TabProps> = props => {\n  return <>{props.children ?? null}</>;\n};\n\nexport default Tab;\n"],"names":["Tab","props","React"],"mappings":";AAkBA,MAAMA,IAA0B,CAASC,MAChCC,gBAAAA,EAAA,cAAAA,EAAA,UAAA,MAAGD,EAAM,YAAY,IAAK;"}

package/components/Tabs/TabList/TabList.js

@@ -1,51 +1,56 @@
-import t, { useRef as p } from "react";
-import u from "classnames";
-import { useRovingFocus as N } from "../../../hooks/useRovingFocus.js";
-import { palette as s } from "../../../theme/palette.js";
-import { isComponent as $ } from "../../../utils/component.js";
-import { uuid as L } from "../../../utils/uuid.js";
-import { Icon as S } from "../../Icon/Icon.js";
-import { IconSize as _ } from "../../../constants.js";
-import g from "../../LazyIcon/LazyIcon.js";
-import v from "../Tab.js";
-import e from "../../Tabs/TabList/styles.module.scss";
-const X = (d) => {
-  const { selectedTab: C, onTabListClick: i, children: n, color: k = "white", type: y = "normal" } = d, c = p(null), l = p(t.Children.map(n, () => t.createRef()));
-  N(i, l, c, !0);
-  const R = u(e["tab-list"], e[`tab-list--${y}`]), E = L();
-  return /* @__PURE__ */ t.createElement("ul", { className: R, ref: c, role: "tablist", "aria-orientation": "horizontal" }, t.Children.map(n, (m, o) => {
-    if ($(m, v)) {
-      const r = o === C, { title: b, onTabClick: f, icon: a, testId: T } = m.props, h = () => {
-        f && f(o), i(o);
-      }, z = u(e["tab-list__tab"], e[`tab-list__tab--${k}`], {
-        [e["tab-list__tab--selected"]]: r,
-        [e["tab-list__tab--first"]]: o == 0
-      }), I = l.current && l.current[o];
-      return /* @__PURE__ */ t.createElement("li", { role: "presentation" }, /* @__PURE__ */ t.createElement(
+import t, { useRef as k } from "react";
+import C from "classnames";
+import { useIsVisible as L } from "../../../hooks/useIsVisible.js";
+import { useRovingFocus as V } from "../../../hooks/useRovingFocus.js";
+import { palette as a } from "../../../theme/palette.js";
+import { isComponent as w } from "../../../utils/component.js";
+import { uuid as X } from "../../../utils/uuid.js";
+import { Icon as B } from "../../Icon/Icon.js";
+import { IconSize as y } from "../../../constants.js";
+import { LazyIcon as F } from "../../LazyIcon/LazyIcon.js";
+import j from "../Tab.js";
+import o from "../../Tabs/TabList/styles.module.scss";
+const W = (h) => {
+  const { selectedTab: I, onTabListClick: m, children: b, color: T = "white", type: E = "normal" } = h, i = k(null), r = k(t.Children.map(b, () => t.createRef()));
+  V(m, r, i, !0);
+  const R = C(o["tab-list"], o[`tab-list--${E}`]), f = X(), $ = L(i);
+  return /* @__PURE__ */ t.createElement("ul", { className: R, ref: i, role: "tablist", "aria-orientation": "horizontal" }, t.Children.map(b, (u, e) => {
+    if (w(u, j)) {
+      const s = e === I, { title: n, onTabClick: p, icon: l, testId: z } = u.props, N = () => {
+        p && p(e), m(e), _(e);
+      }, S = C(o["tab-list__tab"], o[`tab-list__tab--${T}`], {
+        [o["tab-list__tab--selected"]]: s,
+        [o["tab-list__tab--first"]]: e == 0
+      }), g = r.current && r.current[e], _ = (v) => {
+        var d;
+        const c = r.current && r.current[v];
+        (d = c == null ? void 0 : c.current) == null || d.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+      };
+      return s && $ && _(e), /* @__PURE__ */ t.createElement("li", { role: "presentation", key: `${n}-${f}` }, /* @__PURE__ */ t.createElement(
         "button",
         {
           role: "tab",
-          "aria-selected": r,
-          onClick: h,
-          className: z,
-          key: `${b}-${E}`,
-          "data-testid": T,
-          ref: I
+          "aria-selected": s,
+          onClick: N,
+          className: S,
+          key: `${n}-${f}`,
+          "data-testid": z,
+          ref: g
         },
-        /* @__PURE__ */ t.createElement("span", { className: e["tab-list__tab__title-and-icon"] }, a && (typeof a == "string" ? /* @__PURE__ */ t.createElement(
-          g,
+        /* @__PURE__ */ t.createElement("span", { className: o["tab-list__tab__title-and-icon"] }, l && (typeof l == "string" ? /* @__PURE__ */ t.createElement(
+          F,
           {
-            iconName: a,
-            size: _.XSmall,
-            color: r ? s.black : s.blueberry500
+            iconName: l,
+            size: y.XSmall,
+            color: s ? a.black : a.blueberry500
           }
-        ) : /* @__PURE__ */ t.createElement(S, { svgIcon: a, size: _.XSmall, color: r ? s.black : s.blueberry500 })), b)
+        ) : /* @__PURE__ */ t.createElement(B, { svgIcon: l, size: y.XSmall, color: s ? a.black : a.blueberry500 })), n)
       ));
     }
     return null;
   }));
-}, M = X;
+};
 export {
-  M as default
+  W as default
 };
 //# sourceMappingURL=TabList.js.map

package/components/Tabs/TabList/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { palette } from '../../../theme/palette';\nimport { isComponent } from '../../../utils/component';\nimport uuid from '../../../utils/uuid';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport Tab from '../Tab';\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color?: TabsColors;\n  type?: TabsType;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color = 'white', type = 'normal' } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()));\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${type}`]);\n\n  const id = uuid();\n\n  return (\n    <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n      {React.Children.map(children, (child, index) => {\n        if (isComponent(child, Tab)) {\n          const isSelected = index === selectedTab;\n          const { title, onTabClick, icon, testId } = child.props;\n          const handleClick = (): void => {\n            onTabClick && onTabClick(index);\n            onTabListClick(index);\n          };\n          const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${color}`], {\n            [styles['tab-list__tab--selected']]: isSelected,\n            [styles['tab-list__tab--first']]: index == 0,\n          });\n\n          const currentRef = tabRefs.current && tabRefs.current[index];\n\n          return (\n            <li role=\"presentation\">\n              <button\n                role=\"tab\"\n                aria-selected={isSelected}\n                onClick={handleClick}\n                className={tabButtonClasses}\n                key={`${title}-${id}`}\n                data-testid={testId}\n                ref={currentRef as React.RefObject<HTMLButtonElement>}\n              >\n                <span className={styles['tab-list__tab__title-and-icon']}>\n                  {icon &&\n                    (typeof icon === 'string' ? (\n                      <LazyIcon\n                        iconName={icon as IconName}\n                        size={IconSize.XSmall}\n                        color={isSelected ? palette[`black`] : palette['blueberry500']}\n                      />\n                    ) : (\n                      <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n                    ))}\n                  {title}\n                </span>\n              </button>\n            </li>\n          );\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport default TabList;\n"],"names":["TabList","props","selectedTab","onTabListClick","children","color","type","listRef","useRef","tabRefs","React","useRovingFocus","tablistClasses","classNames","styles","id","uuid","child","index","isComponent","Tab","isSelected","title","onTabClick","icon","testId","handleClick","tabButtonClasses","currentRef","LazyIcon","IconSize","palette","Icon","TabList$1"],"mappings":";;;;;;;;;;;AAuBA,MAAMA,IAAkC,CAASC,MAAA;AACzC,QAAA,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,SAAa,IAAAL,GAE9EM,IAAUC,EAAyB,IAAI,GAEvCC,IAAUD,EAAOE,EAAM,SAAS,IAAIN,GAAU,MAAMM,EAAM,UAA8B,CAAA,CAAC;AAChF,EAAAC,EAAAR,GAAgBM,GAASF,GAAS,EAAI;AAE/C,QAAAK,IAAiBC,EAAWC,EAAO,UAAU,GAAGA,EAAO,aAAaR,CAAI,EAAE,CAAC,GAE3ES,IAAKC;AAEX,yCACG,MAAG,EAAA,WAAWJ,GAAgB,KAAKL,GAAS,MAAK,WAAU,oBAAiB,aAAA,GAC1EG,EAAM,SAAS,IAAIN,GAAU,CAACa,GAAOC,MAAU;AAC1C,QAAAC,EAAYF,GAAOG,CAAG,GAAG;AAC3B,YAAMC,IAAaH,MAAUhB,GACvB,EAAE,OAAAoB,GAAO,YAAAC,GAAY,MAAAC,GAAM,QAAAC,MAAWR,EAAM,OAC5CS,IAAc,MAAY;AAC9B,QAAAH,KAAcA,EAAWL,CAAK,GAC9Bf,EAAee,CAAK;AAAA,MAAA,GAEhBS,IAAmBd,EAAWC,EAAO,eAAe,GAAGA,EAAO,kBAAkBT,CAAK,EAAE,GAAG;AAAA,QAC9F,CAACS,EAAO,yBAAyB,CAAC,GAAGO;AAAA,QACrC,CAACP,EAAO,sBAAsB,CAAC,GAAGI,KAAS;AAAA,MAAA,CAC5C,GAEKU,IAAanB,EAAQ,WAAWA,EAAQ,QAAQS,CAAK;AAGzD,aAAAR,gBAAAA,EAAA,cAAC,MAAG,EAAA,MAAK,eACP,GAAAA,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,iBAAeW;AAAA,UACf,SAASK;AAAA,UACT,WAAWC;AAAA,UACX,KAAK,GAAGL,CAAK,IAAIP,CAAE;AAAA,UACnB,eAAaU;AAAA,UACb,KAAKG;AAAA,QAAA;AAAA,QAELlB,gBAAAA,EAAA,cAAC,UAAK,WAAWI,EAAO,+BAA+B,EACpD,GAAAU,MACE,OAAOA,KAAS,WACfd,gBAAAA,EAAA;AAAA,UAACmB;AAAA,UAAA;AAAA,YACC,UAAUL;AAAA,YACV,MAAMM,EAAS;AAAA,YACf,OAAOT,IAAaU,EAAQ,QAAWA,EAAQ;AAAA,UAAc;AAAA,QAAA,IAG9DrB,gBAAAA,EAAA,cAAAsB,GAAA,EAAK,SAASR,GAAM,MAAMM,EAAS,QAAQ,OAAOT,IAAaU,EAAQ,QAAWA,EAAQ,aAAc,CAAG,IAE/GT,CACH;AAAA,MAAA,CAEJ;AAAA,IAEJ;AACO,WAAA;AAAA,EACR,CAAA,CACH;AAEJ,GAEAW,IAAejC;"}
+{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/TabList/TabList.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { useIsVisible } from '../../../hooks/useIsVisible';\nimport { useRovingFocus } from '../../../hooks/useRovingFocus';\nimport { palette } from '../../../theme/palette';\nimport { isComponent } from '../../../utils/component';\nimport uuid from '../../../utils/uuid';\nimport Icon, { IconSize } from '../../Icon';\nimport { IconName } from '../../Icons/IconNames';\nimport LazyIcon from '../../LazyIcon';\nimport Tab from '../Tab';\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\ninterface TabListProps {\n  children: React.ReactNode;\n  onTabListClick: (index: number) => void;\n  selectedTab: number;\n  color?: TabsColors;\n  type?: TabsType;\n}\n\nconst TabList: React.FC<TabListProps> = props => {\n  const { selectedTab, onTabListClick, children, color = 'white', type = 'normal' } = props;\n\n  const listRef = useRef<HTMLUListElement>(null);\n\n  const tabRefs = useRef(React.Children.map(children, () => React.createRef<HTMLButtonElement>()));\n  useRovingFocus(onTabListClick, tabRefs, listRef, true);\n\n  const tablistClasses = classNames(styles['tab-list'], styles[`tab-list--${type}`]);\n\n  const id = uuid();\n  const isVisible = useIsVisible(listRef);\n\n  return (\n    <ul className={tablistClasses} ref={listRef} role=\"tablist\" aria-orientation=\"horizontal\">\n      {React.Children.map(children, (child, index) => {\n        if (isComponent(child, Tab)) {\n          const isSelected = index === selectedTab;\n          const { title, onTabClick, icon, testId } = child.props;\n          const handleClick = (): void => {\n            onTabClick && onTabClick(index);\n            onTabListClick(index);\n            scrollToTab(index);\n          };\n          const tabButtonClasses = classNames(styles['tab-list__tab'], styles[`tab-list__tab--${color}`], {\n            [styles['tab-list__tab--selected']]: isSelected,\n            [styles['tab-list__tab--first']]: index == 0,\n          });\n\n          const currentRef = tabRefs.current && tabRefs.current[index];\n\n          const scrollToTab = (index: number): void => {\n            const currentRef = tabRefs.current && tabRefs.current[index];\n            currentRef?.current?.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });\n          };\n\n          if (isSelected && isVisible) scrollToTab(index);\n\n          return (\n            <li role=\"presentation\" key={`${title}-${id}`}>\n              <button\n                role=\"tab\"\n                aria-selected={isSelected}\n                onClick={handleClick}\n                className={tabButtonClasses}\n                key={`${title}-${id}`}\n                data-testid={testId}\n                ref={currentRef as React.RefObject<HTMLButtonElement>}\n              >\n                <span className={styles['tab-list__tab__title-and-icon']}>\n                  {icon &&\n                    (typeof icon === 'string' ? (\n                      <LazyIcon\n                        iconName={icon as IconName}\n                        size={IconSize.XSmall}\n                        color={isSelected ? palette[`black`] : palette['blueberry500']}\n                      />\n                    ) : (\n                      <Icon svgIcon={icon} size={IconSize.XSmall} color={isSelected ? palette[`black`] : palette['blueberry500']} />\n                    ))}\n                  {title}\n                </span>\n              </button>\n            </li>\n          );\n        }\n        return null;\n      })}\n    </ul>\n  );\n};\n\nexport default TabList;\n"],"names":["TabList","props","selectedTab","onTabListClick","children","color","type","listRef","useRef","tabRefs","React","useRovingFocus","tablistClasses","classNames","styles","id","uuid","isVisible","useIsVisible","child","index","isComponent","Tab","isSelected","title","onTabClick","icon","testId","handleClick","scrollToTab","tabButtonClasses","currentRef","LazyIcon","IconSize","palette","Icon"],"mappings":";;;;;;;;;;;;AAwBA,MAAMA,IAAkC,CAASC,MAAA;AACzC,QAAA,EAAE,aAAAC,GAAa,gBAAAC,GAAgB,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,SAAa,IAAAL,GAE9EM,IAAUC,EAAyB,IAAI,GAEvCC,IAAUD,EAAOE,EAAM,SAAS,IAAIN,GAAU,MAAMM,EAAM,UAA8B,CAAA,CAAC;AAChF,EAAAC,EAAAR,GAAgBM,GAASF,GAAS,EAAI;AAE/C,QAAAK,IAAiBC,EAAWC,EAAO,UAAU,GAAGA,EAAO,aAAaR,CAAI,EAAE,CAAC,GAE3ES,IAAKC,KACLC,IAAYC,EAAaX,CAAO;AAEtC,yCACG,MAAG,EAAA,WAAWK,GAAgB,KAAKL,GAAS,MAAK,WAAU,oBAAiB,aAAA,GAC1EG,EAAM,SAAS,IAAIN,GAAU,CAACe,GAAOC,MAAU;AAC1C,QAAAC,EAAYF,GAAOG,CAAG,GAAG;AAC3B,YAAMC,IAAaH,MAAUlB,GACvB,EAAE,OAAAsB,GAAO,YAAAC,GAAY,MAAAC,GAAM,QAAAC,MAAWR,EAAM,OAC5CS,IAAc,MAAY;AAC9B,QAAAH,KAAcA,EAAWL,CAAK,GAC9BjB,EAAeiB,CAAK,GACpBS,EAAYT,CAAK;AAAA,MAAA,GAEbU,IAAmBjB,EAAWC,EAAO,eAAe,GAAGA,EAAO,kBAAkBT,CAAK,EAAE,GAAG;AAAA,QAC9F,CAACS,EAAO,yBAAyB,CAAC,GAAGS;AAAA,QACrC,CAACT,EAAO,sBAAsB,CAAC,GAAGM,KAAS;AAAA,MAAA,CAC5C,GAEKW,IAAatB,EAAQ,WAAWA,EAAQ,QAAQW,CAAK,GAErDS,IAAc,CAACT,MAAwB;;AAC3C,cAAMW,IAAatB,EAAQ,WAAWA,EAAQ,QAAQW,CAAK;AAC3DW,SAAAA,IAAAA,KAAAA,gBAAAA,EAAY,YAAZA,QAAAA,EAAqB,eAAe,EAAE,UAAU,UAAU,QAAQ,UAAU,OAAO,UAAA;AAAA,MAAW;AAG5F,aAAAR,KAAcN,KAAWY,EAAYT,CAAK,GAG5CV,gBAAAA,EAAA,cAAC,QAAG,MAAK,gBAAe,KAAK,GAAGc,CAAK,IAAIT,CAAE,GACzC,GAAAL,gBAAAA,EAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,iBAAea;AAAA,UACf,SAASK;AAAA,UACT,WAAWE;AAAA,UACX,KAAK,GAAGN,CAAK,IAAIT,CAAE;AAAA,UACnB,eAAaY;AAAA,UACb,KAAKI;AAAA,QAAA;AAAA,QAELrB,gBAAAA,EAAA,cAAC,UAAK,WAAWI,EAAO,+BAA+B,EACpD,GAAAY,MACE,OAAOA,KAAS,WACfhB,gBAAAA,EAAA;AAAA,UAACsB;AAAA,UAAA;AAAA,YACC,UAAUN;AAAA,YACV,MAAMO,EAAS;AAAA,YACf,OAAOV,IAAaW,EAAQ,QAAWA,EAAQ;AAAA,UAAc;AAAA,QAAA,IAG9DxB,gBAAAA,EAAA,cAAAyB,GAAA,EAAK,SAAST,GAAM,MAAMO,EAAS,QAAQ,OAAOV,IAAaW,EAAQ,QAAWA,EAAQ,aAAc,CAAG,IAE/GV,CACH;AAAA,MAAA,CAEJ;AAAA,IAEJ;AACO,WAAA;AAAA,EACR,CAAA,CACH;AAEJ;"}

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

@@ -1,4 +1,6 @@
+@use 'sass:map';
 @import '../../../scss/supernova/styles/colors';
+@import '../../../scss/breakpoints';
 
 .tab-list {
   $tab-list: &;
@@ -9,12 +11,12 @@
   gap: 0.25rem;
   list-style-type: none;
   white-space: nowrap;
-  overflow-x: initial;
-  overflow-y: initial;
+  overflow: hidden;
   height: 3rem;
   z-index: 0;
   margin: 0;
   margin-bottom: -1px;
+  background-color: var(--color-base-background-white);
 
   &__tab {
     display: flex;
@@ -56,11 +58,19 @@
   }
 
   &--normal {
-    padding-left: 1rem;
+    padding-left: 0.5rem;
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding-left: 1rem;
+    }
   }
 
   &--framed {
-    padding-left: 0;
+    padding-left: 0.5rem;
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      padding-left: 0;
+    }
 
     #{$tab-list}__tab {
       background-color: var(--color-base-background-white);

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

@@ -1,9 +1,13 @@
 import React from 'react';
 import { TabsColors, TabsType } from '../Tabs';
 interface TabPanelProps {
+    children?: React.ReactNode;
     color?: TabsColors;
     type?: TabsType;
     isFirst?: boolean;
+    translateX?: number;
+    style?: React.CSSProperties;
+    animate: 'left' | 'right' | null;
 }
-declare const TabPanel: React.FC<TabPanelProps>;
+declare const TabPanel: React.ForwardRefExoticComponent<TabPanelProps & React.RefAttributes<HTMLDivElement>>;
 export default TabPanel;

package/components/Tabs/TabPanel/TabPanel.js

@@ -1,13 +1,17 @@
-import r from "react";
-import o from "classnames";
+import s, { forwardRef as y } from "react";
+import l from "classnames";
 import a from "../../Tabs/TabPanel/styles.module.scss";
-const m = ({ children: e, color: t = "white", type: l = "normal", isFirst: s = !1 }) => {
-  const n = o(a["tab-panel"], a[`tab-panel--${t}`], a[`tab-panel--${l}`], {
-    [a["tab-panel--first"]]: s
-  });
-  return /* @__PURE__ */ r.createElement("div", { className: n }, e);
-}, f = m;
+const h = y((n, r) => {
+  const { children: o, animate: t, color: m = "white", type: i = "normal", isFirst: c = !1, translateX: e, style: f } = n, p = l(a["tab-panel"], a[`tab-panel--${m}`], a[`tab-panel--${i}`], {
+    [a["tab-panel--first"]]: c
+  }), b = l({
+    [a["tab-panel--animate-left"]]: t === "left",
+    [a["tab-panel--animate-right"]]: t === "right"
+  }), d = e != 0 ? { transform: `translateX(${e}px)` } : {};
+  return /* @__PURE__ */ s.createElement("div", { ref: r, className: p, style: f }, /* @__PURE__ */ s.createElement("div", { className: b, style: d }, o));
+});
+h.displayName = "TabPanel";
 export {
-  f as default
+  h as default
 };
 //# sourceMappingURL=TabPanel.js.map

package/components/Tabs/TabPanel/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React from 'react';\n\nimport classNames from 'classnames';\n\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  color?: TabsColors;\n  type?: TabsType;\n  isFirst?: boolean;\n}\n\nconst TabPanel: React.FC<TabPanelProps> = ({ children, color = 'white', type = 'normal', isFirst = false }) => {\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], styles[`tab-panel--${type}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n  return <div className={tabPanelClasses}>{children}</div>;\n};\n\nexport default TabPanel;\n"],"names":["TabPanel","children","color","type","isFirst","tabPanelClasses","classNames","styles","React","TabPanel$1"],"mappings":";;;AAcA,MAAMA,IAAoC,CAAC,EAAE,UAAAC,GAAU,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,SAAAC,IAAU,SAAY;AAC7G,QAAMC,IAAkBC,EAAWC,EAAO,WAAW,GAAGA,EAAO,cAAcL,CAAK,EAAE,GAAGK,EAAO,cAAcJ,CAAI,EAAE,GAAG;AAAA,IACnH,CAACI,EAAO,kBAAkB,CAAC,GAAGH;AAAA,EAAA,CAC/B;AACD,SAAQI,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWH,EAAA,GAAkBJ,CAAS;AACpD,GAEAQ,IAAeT;"}
+{"version":3,"file":"TabPanel.js","sources":["../../../../src/components/Tabs/TabPanel/TabPanel.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { TabsColors, TabsType } from '../Tabs';\n\nimport styles from './styles.module.scss';\n\ninterface TabPanelProps {\n  children?: React.ReactNode;\n  color?: TabsColors;\n  type?: TabsType;\n  isFirst?: boolean;\n  translateX?: number;\n  style?: React.CSSProperties;\n  animate: 'left' | 'right' | null;\n}\n\nconst TabPanel = forwardRef<HTMLDivElement, TabPanelProps>((props, ref) => {\n  const { children, animate, color = 'white', type = 'normal', isFirst = false, translateX, style } = props;\n  const tabPanelClasses = classNames(styles['tab-panel'], styles[`tab-panel--${color}`], styles[`tab-panel--${type}`], {\n    [styles['tab-panel--first']]: isFirst,\n  });\n  const contentClasses = classNames({\n    [styles['tab-panel--animate-left']]: animate === 'left',\n    [styles['tab-panel--animate-right']]: animate === 'right',\n  });\n  const transformStyle: React.CSSProperties = translateX != 0 ? { transform: `translateX(${translateX}px)` } : {};\n\n  return (\n    <div ref={ref} className={tabPanelClasses} style={style}>\n      <div className={contentClasses} style={transformStyle}>\n        {children}\n      </div>\n    </div>\n  );\n});\n\nTabPanel.displayName = 'TabPanel';\nexport default TabPanel;\n"],"names":["TabPanel","forwardRef","props","ref","children","animate","color","type","isFirst","translateX","style","tabPanelClasses","classNames","styles","contentClasses","transformStyle","React"],"mappings":";;;AAkBA,MAAMA,IAAWC,EAA0C,CAACC,GAAOC,MAAQ;AACnE,QAAA,EAAE,UAAAC,GAAU,SAAAC,GAAS,OAAAC,IAAQ,SAAS,MAAAC,IAAO,UAAU,SAAAC,IAAU,IAAO,YAAAC,GAAY,OAAAC,EAAA,IAAUR,GAC9FS,IAAkBC,EAAWC,EAAO,WAAW,GAAGA,EAAO,cAAcP,CAAK,EAAE,GAAGO,EAAO,cAAcN,CAAI,EAAE,GAAG;AAAA,IACnH,CAACM,EAAO,kBAAkB,CAAC,GAAGL;AAAA,EAAA,CAC/B,GACKM,IAAiBF,EAAW;AAAA,IAChC,CAACC,EAAO,yBAAyB,CAAC,GAAGR,MAAY;AAAA,IACjD,CAACQ,EAAO,0BAA0B,CAAC,GAAGR,MAAY;AAAA,EAAA,CACnD,GACKU,IAAsCN,KAAc,IAAI,EAAE,WAAW,cAAcA,CAAU,MAAM,IAAI;AAE7G,SACGO,gBAAAA,EAAA,cAAA,OAAA,EAAI,KAAAb,GAAU,WAAWQ,GAAiB,OAAAD,KACxCM,gBAAAA,EAAA,cAAA,OAAA,EAAI,WAAWF,GAAgB,OAAOC,EAAA,GACpCX,CACH,CACF;AAEJ,CAAC;AAEDJ,EAAS,cAAc;"}

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

@@ -8,24 +8,38 @@
 .tab-panel {
   $tab-panel: &;
 
-  border-top: 1px solid var(--color-action-border-onlight-focus);
   padding: 2rem;
-  position: relative;
-  z-index: 1;
 
   $colors: 'blueberry', 'neutral', 'white';
 
+  width: 100%;
+  padding-left: 0;
+
+  @media (min-width: map.get($grid-breakpoints, md)) {
+    width: 100%;
+  }
+
   &--normal {
     padding: 0;
   }
 
   &--framed {
     padding: 2rem;
-    border: 1px solid var(--color-action-border-onlight-focus);
-    border-radius: 0.5rem;
+    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;
+    }
 
     &#{$tab-panel}--first {
-      border-radius: 0 0.5rem 0.5rem;
+      border-radius: 0;
+
+      @media (min-width: map.get($grid-breakpoints, md)) {
+        border-radius: 0 0 0.5rem 0.5rem;
+      }
     }
 
     @each $color in $colors {
@@ -35,3 +49,31 @@
     }
   }
 }
+
+.tab-panel--animate-left {
+  animation: slide-left 0.5s forwards;
+}
+
+.tab-panel--animate-right {
+  animation: slide-right 0.5s forwards;
+}
+
+@keyframes slide-right {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes slide-left {
+  0% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(0%);
+  }
+}

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

@@ -1,5 +1,9 @@
 export type Styles = {
+  'slide-left': string;
+  'slide-right': string;
   'tab-panel': string;
+  'tab-panel--animate-left': string;
+  'tab-panel--animate-right': string;
   'tab-panel--blueberry': string;
   'tab-panel--first': string;
   'tab-panel--framed': string;

package/components/Tabs/Tabs.d.ts

@@ -5,14 +5,18 @@ export type { TabProps } from './Tab';
 export type TabsColors = Extract<PaletteNames, 'blueberry' | 'neutral' | 'white'>;
 export type TabsType = 'normal' | 'framed';
 export interface TabsProps {
-    /** Sets the data-testid attribute. */
-    testId?: string;
+    /** Controlled state for Tabs component */
+    activeTab?: number;
+    /** Adds custom classes to the element. */
+    className?: string;
     /** Sets the color of the tabs. Default: white */
     color?: TabsColors;
+    /** Whether the tab list should be sticky */
+    sticky?: boolean;
+    /** Sets the data-testid attribute. */
+    testId?: string;
     /** Sets the visual type of the tabs */
     type?: TabsType;
-    /** Controlled state for Tabs component */
-    activeTab?: number;
 }
 declare const TabsRoot: React.FC<TabsProps>;
 type TabsComponent = typeof TabsRoot & {