@react-md/core 1.0.0-next.4 → 1.0.0-next.6

package/dist/table/_table.scss

@@ -212,232 +212,234 @@ $row-selected-styles: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    @if not $disable-container {
-      .rmd-table-container {
-        max-width: 100%;
-        overflow: auto;
+    @include utils.optional-layer(table, $disable-layer) {
+      @if not $disable-container {
+        .rmd-table-container {
+          max-width: 100%;
+          overflow: auto;
+        }
       }
-    }
 
-    .rmd-table {
-      @include use-var(background-color);
+      .rmd-table {
+        @include use-var(background-color);
 
-      // NOTE: Switched from `border-collapse: collapse` to `border-spacing: 0`
-      // since enabling sticky headers removed the borders for some reason in
-      // firefox. all I really wanted was the spacing to be removed from each
-      // cell, so border-spacing seems better.
-      border-spacing: 0;
-      max-width: 100%;
+        // NOTE: Switched from `border-collapse: collapse` to `border-spacing: 0`
+        // since enabling sticky headers removed the borders for some reason in
+        // firefox. all I really wanted was the spacing to be removed from each
+        // cell, so border-spacing seems better.
+        border-spacing: 0;
+        max-width: 100%;
 
-      @if not $disable-full-width {
-        &--full-width {
-          width: 100%;
+        @if not $disable-full-width {
+          &--full-width {
+            width: 100%;
+          }
         }
       }
-    }
 
-    .rmd-thead {
-      @include use-var(background-color, header-background-color);
-      @if $cell-height != $cell-header-height {
-        @include set-var(cell-height, $cell-header-height);
-      }
+      .rmd-thead {
+        @include use-var(background-color, header-background-color);
+        @if $cell-height != $cell-header-height {
+          @include set-var(cell-height, $cell-header-height);
+        }
 
-      @if not $disable-dense and $cell-dense-height {
-        &--dense {
-          @include set-var(cell-height, $cell-header-dense-height);
+        @if not $disable-dense and $cell-dense-height {
+          &--dense {
+            @include set-var(cell-height, $cell-header-dense-height);
+          }
         }
-      }
 
-      @if not $disable-sticky-header {
-        &--sticky {
-          @include use-var(background-color, sticky-background-color);
-          @include use-var(top, sticky-header);
-          @include utils.map-to-styles($sticky-header-inactive-styles);
+        @if not $disable-sticky-header {
+          &--sticky {
+            @include use-var(background-color, sticky-background-color);
+            @include use-var(top, sticky-header);
+            @include utils.map-to-styles($sticky-header-inactive-styles);
 
-          position: sticky;
-          z-index: $sticky-header-z-index;
-        }
+            position: sticky;
+            z-index: $sticky-header-z-index;
+          }
 
-        &--sticky-active {
-          @include utils.map-to-styles($sticky-header-active-styles);
+          &--sticky-active {
+            @include utils.map-to-styles($sticky-header-active-styles);
+          }
         }
       }
-    }
 
-    .rmd-tfoot {
-      @if not $disable-sticky-footer {
-        &--sticky {
-          @include use-var(background-color, sticky-background-color);
-          @include use-var(bottom, sticky-footer);
-          @include utils.map-to-styles($sticky-footer-inactive-styles);
+      .rmd-tfoot {
+        @if not $disable-sticky-footer {
+          &--sticky {
+            @include use-var(background-color, sticky-background-color);
+            @include use-var(bottom, sticky-footer);
+            @include utils.map-to-styles($sticky-footer-inactive-styles);
 
-          position: sticky;
-          z-index: $sticky-footer-z-index;
-        }
+            position: sticky;
+            z-index: $sticky-footer-z-index;
+          }
 
-        &--sticky-active {
-          @include utils.map-to-styles($sticky-footer-active-styles);
+          &--sticky-active {
+            @include utils.map-to-styles($sticky-footer-active-styles);
+          }
         }
       }
-    }
 
-    .rmd-tr {
-      @if not $disable-clickable {
-        &--clickable:hover {
-          cursor: pointer;
+      .rmd-tr {
+        @if not $disable-clickable {
+          &--clickable:hover {
+            cursor: pointer;
+          }
         }
-      }
 
-      @if not $disable-selected {
-        &--selected {
-          @include utils.map-to-styles($row-selected-styles);
+        @if not $disable-selected {
+          &--selected {
+            @include utils.map-to-styles($row-selected-styles);
+          }
         }
-      }
 
-      @if not $disable-bordered {
-        &--bordered {
-          border-bottom: get-var(border-size) solid get-var(border-color);
+        @if not $disable-bordered {
+          &--bordered {
+            border-bottom: get-var(border-size) solid get-var(border-color);
 
-          @if not $disable-bordered-except-last {
-            &:last-child {
-              border-bottom-width: 0;
+            @if not $disable-bordered-except-last {
+              &:last-child {
+                border-bottom-width: 0;
+              }
             }
           }
         }
-      }
 
-      @if not $disable-hoverable {
-        &--hoverable {
-          @include utils.mouse-only {
-            transition: background transition.$linear-duration
-              transition.$linear-timing-function;
+        @if not $disable-hoverable {
+          &--hoverable {
+            @include utils.mouse-only {
+              transition: background transition.$linear-duration
+                transition.$linear-timing-function;
 
-            &:hover {
-              @include utils.map-to-styles($row-hover-styles);
+              &:hover {
+                @include utils.map-to-styles($row-hover-styles);
+              }
             }
           }
         }
       }
-    }
 
-    .rmd-table-cell {
-      @include utils.map-to-styles($cell-typography);
-      @include use-var(color, cell-color);
-      @include use-var(height, cell-height);
+      .rmd-table-cell {
+        @include utils.map-to-styles($cell-typography);
+        @include use-var(color, cell-color);
+        @include use-var(height, cell-height);
 
-      border: inherit;
-      padding: 0 get-var(cell-horizontal-padding);
+        border: inherit;
+        padding: 0 get-var(cell-horizontal-padding);
 
-      &--header {
-        @include utils.map-to-styles($cell-header-typography);
-        @if $cell-color != $cell-header-color {
-          @include set-var(cell-color, $cell-header-color);
+        &--header {
+          @include utils.map-to-styles($cell-header-typography);
+          @if $cell-color != $cell-header-color {
+            @include set-var(cell-color, $cell-header-color);
+          }
         }
-      }
 
-      @if not $disable-cell-align-top {
-        &--top {
-          vertical-align: top;
+        @if not $disable-cell-align-top {
+          &--top {
+            vertical-align: top;
+          }
         }
-      }
 
-      @if not $disable-cell-align-bottom {
-        &--bottom {
-          vertical-align: bottom;
+        @if not $disable-cell-align-bottom {
+          &--bottom {
+            vertical-align: bottom;
+          }
         }
-      }
 
-      @if not $disable-sticky-cell {
-        &--sticky {
-          position: sticky;
-          will-change: transform;
-        }
+        @if not $disable-sticky-cell {
+          &--sticky {
+            position: sticky;
+            will-change: transform;
+          }
 
-        &--sticky-cell {
-          @include utils.auto-rtl(left, get-var(sticky-cell));
-          @include theme.theme-use-var(background-color);
+          &--sticky-cell {
+            @include utils.auto-rtl(left, get-var(sticky-cell));
+            @include theme.theme-use-var(background-color);
 
-          transition: background-color transition.$linear-duration;
-          z-index: $sticky-cell-z-index;
+            transition: background-color transition.$linear-duration;
+            z-index: $sticky-cell-z-index;
 
-          &::after {
-            @include utils.pseudo-element;
+            &::after {
+              @include utils.pseudo-element;
 
-            background-color: transparent;
-            transition: background
-              transition.$linear-duration
-              transition.$linear-timing-function;
+              background-color: transparent;
+              transition: background
+                transition.$linear-duration
+                transition.$linear-timing-function;
 
-            .rmd-tr--hoverable:hover & {
-              @include utils.map-to-styles($row-hover-styles);
-            }
+              .rmd-tr--hoverable:hover & {
+                @include utils.map-to-styles($row-hover-styles);
+              }
 
-            .rmd-tr--selected & {
-              @include utils.map-to-styles($row-selected-styles);
+              .rmd-tr--selected & {
+                @include utils.map-to-styles($row-selected-styles);
+              }
             }
           }
-        }
 
-        @if not $disable-sticky-header {
-          &--sticky-header {
-            @include use-var(top, sticky-header);
+          @if not $disable-sticky-header {
+            &--sticky-header {
+              @include use-var(top, sticky-header);
 
-            z-index: $sticky-header-z-index;
+              z-index: $sticky-header-z-index;
+            }
           }
-        }
 
-        @if not $disable-input-toggle and not $disable-sticky-header {
-          &--sticky-header-cell {
-            z-index: $sticky-header-cell-z-index;
+          @if not $disable-input-toggle and not $disable-sticky-header {
+            &--sticky-header-cell {
+              z-index: $sticky-header-cell-z-index;
+            }
           }
         }
-      }
 
-      @if not $disable-input-toggle {
-        &--input-toggle {
-          @include set-var(
-            cell-horizontal-padding,
-            $cell-input-toggle-horizontal-padding
-          );
+        @if not $disable-input-toggle {
+          &--input-toggle {
+            @include set-var(
+              cell-horizontal-padding,
+              $cell-input-toggle-horizontal-padding
+            );
+          }
         }
-      }
 
-      @if not $disable-cell-grow {
-        &--grow {
-          width: 100%;
+        @if not $disable-cell-grow {
+          &--grow {
+            width: 100%;
+          }
         }
-      }
 
-      @if not $disable-cell-no-wrap {
-        &--no-wrap {
-          @include typography.text-overflow;
+        @if not $disable-cell-no-wrap {
+          &--no-wrap {
+            @include typography.text-overflow;
+          }
         }
-      }
 
-      @if not $disable-cell-vertical-padding {
-        &--v-padding {
-          @include use-var(padding-bottom, cell-vertical-padding);
-          @include use-var(padding-top, cell-vertical-padding);
+        @if not $disable-cell-vertical-padding {
+          &--v-padding {
+            @include use-var(padding-bottom, cell-vertical-padding);
+            @include use-var(padding-top, cell-vertical-padding);
+          }
         }
-      }
 
-      @if not $disable-cell-sort {
-        &--no-padding {
-          padding: 0;
-        }
+        @if not $disable-cell-sort {
+          &--no-padding {
+            padding: 0;
+          }
 
-        &__content {
-          @include use-var(padding-left, cell-horizontal-padding);
-          @include use-var(padding-right, cell-horizontal-padding);
+          &__content {
+            @include use-var(padding-left, cell-horizontal-padding);
+            @include use-var(padding-right, cell-horizontal-padding);
 
-          align-items: center;
-          color: inherit;
-          font: inherit;
-          gap: $cell-content-gap;
-          height: 100%;
-          width: 100%;
+            align-items: center;
+            color: inherit;
+            font: inherit;
+            gap: $cell-content-gap;
+            height: 100%;
+            width: 100%;
+          }
         }
       }
     }

package/dist/table/tableCellStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableCellStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport {\n  type TableCellHorizontalAlignment,\n  type TableCellVerticalAlignment,\n} from \"./TableConfigurationProvider.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableCellClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the cell is rendered as a `<th>` so that the correct\n   * sticky styles can be applied.\n   */\n  header: boolean;\n\n  /**\n   * Set this to true if the cell is rendered in a `<thead>` so that the correct\n   * sticky styles can be applied.\n   */\n  isInTableHeader: boolean;\n\n  /** @defaultValue `false` */\n  grow?: boolean;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /** @defaultValue `false` */\n  inputToggle?: boolean;\n\n  hAlign?: TableCellHorizontalAlignment;\n  vAlign?: TableCellVerticalAlignment;\n\n  /** @defaultValue `true` */\n  lineWrap?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tableCell(options: TableCellClassNameOptions): string {\n  const {\n    grow,\n    sticky,\n    header,\n    inputToggle,\n    hAlign,\n    vAlign,\n    lineWrap = true,\n    padding = \"horizontal\",\n    isInTableHeader,\n    className,\n  } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  const p = \"rmd-table-cell--\";\n  return cnb(\n    \"rmd-table-cell\",\n    grow && `${p}grow`,\n    header && `${p}header`,\n    sticky && `${p}sticky`,\n    inputToggle && `${p}input-toggle`,\n    sticky && (!isInTableHeader || inputToggle) && `${p}sticky-cell`,\n    sticky && isInTableHeader && `${p}sticky-header`,\n    sticky && isInTableHeader && inputToggle && `${p}header-cell`,\n    vAlign && vAlign !== \"middle\" && `${p}${vAlign}`,\n    !lineWrap && `${p}no-wrap`,\n    padding === \"vertical\" && `${p}v-padding`,\n    padding === \"none\" && `${p}no-padding`,\n    cssUtils({\n      textAlign: hAlign,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","tableCell","options","grow","sticky","header","inputToggle","hAlign","vAlign","lineWrap","padding","isInTableHeader","className","p","textAlign"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AA2C1C;;CAEC,GACD,OAAO,SAASC,UAAUC,OAAkC;IAC1D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,MAAM,EACNC,WAAW,EACXC,MAAM,EACNC,MAAM,EACNC,WAAW,IAAI,EACfC,UAAU,YAAY,EACtBC,eAAe,EACfC,SAAS,EACV,GAAGV;IAEJ,8EAA8E;IAC9E,qDAAqD;IACrD,MAAMW,IAAI;IACV,OAAOd,IACL,kBACAI,QAAQ,CAAC,EAAEU,EAAE,IAAI,CAAC,EAClBR,UAAU,CAAC,EAAEQ,EAAE,MAAM,CAAC,EACtBT,UAAU,CAAC,EAAES,EAAE,MAAM,CAAC,EACtBP,eAAe,CAAC,EAAEO,EAAE,YAAY,CAAC,EACjCT,UAAW,CAAA,CAACO,mBAAmBL,WAAU,KAAM,CAAC,EAAEO,EAAE,WAAW,CAAC,EAChET,UAAUO,mBAAmB,CAAC,EAAEE,EAAE,aAAa,CAAC,EAChDT,UAAUO,mBAAmBL,eAAe,CAAC,EAAEO,EAAE,WAAW,CAAC,EAC7DL,UAAUA,WAAW,YAAY,CAAC,EAAEK,EAAE,EAAEL,OAAO,CAAC,EAChD,CAACC,YAAY,CAAC,EAAEI,EAAE,OAAO,CAAC,EAC1BH,YAAY,cAAc,CAAC,EAAEG,EAAE,SAAS,CAAC,EACzCH,YAAY,UAAU,CAAC,EAAEG,EAAE,UAAU,CAAC,EACtCb,SAAS;QACPc,WAAWP;IACb,IACAK;AAEJ"}

package/dist/table/tableContainerStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TableContainerClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tableContainer(\n  options: TableContainerClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\"rmd-table-container\", className);\n}\n"],"names":["cnb","tableContainer","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAShC;;CAEC,GACD,OAAO,SAASC,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOF,IAAI,uBAAuBG;AACpC"}

package/dist/table/tableFooterStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableFooterStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tfoot\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TableFooterClassNameOptions {\n  className?: string;\n  sticky?: boolean;\n  stickyActive?: boolean;\n  stickyActiveClassName?: string;\n}\n\nexport function tableFooter(options: TableFooterClassNameOptions = {}): string {\n  const { className, sticky, stickyActive, stickyActiveClassName } = options;\n\n  return cnb(\n    styles({\n      sticky,\n      \"sticky-active\": stickyActive,\n    }),\n    stickyActive && stickyActiveClassName,\n    className\n  );\n}\n"],"names":["cnb","bem","styles","tableFooter","options","className","sticky","stickyActive","stickyActiveClassName"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB,OAAO,SAASE,YAAYC,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAEC,YAAY,EAAEC,qBAAqB,EAAE,GAAGJ;IAEnE,OAAOJ,IACLE,OAAO;QACLI;QACA,iBAAiBC;IACnB,IACAA,gBAAgBC,uBAChBH;AAEJ"}

package/dist/table/tableHeaderStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableHeaderStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-thead\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableHeaderClassNameOptions {\n  className?: string;\n  dense?: boolean;\n  sticky?: boolean;\n  stickyActive?: boolean;\n  stickyActiveClassName?: string;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport function tableHeader(options: TableHeaderClassNameOptions = {}): string {\n  const { dense, sticky, stickyActive, stickyActiveClassName, className } =\n    options;\n\n  return cnb(\n    styles({\n      dense,\n      sticky,\n      \"sticky-active\": stickyActive,\n    }),\n    stickyActive && stickyActiveClassName,\n    className\n  );\n}\n"],"names":["cnb","bem","styles","tableHeader","options","dense","sticky","stickyActive","stickyActiveClassName","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB,2BAA2B,GAC3B,OAAO,SAASE,YAAYC,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,YAAY,EAAEC,qBAAqB,EAAEC,SAAS,EAAE,GACrEL;IAEF,OAAOJ,IACLE,OAAO;QACLG;QACAC;QACA,iBAAiBC;IACnB,IACAA,gBAAgBC,uBAChBC;AAEJ"}

package/dist/table/tableRowStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableRowStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tr\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableRowClassNameOptions {\n  className?: string;\n  disableHover?: boolean;\n  disableBorders?: boolean;\n  selected?: boolean;\n  clickable?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport function tableRow(options: TableRowClassNameOptions = {}): string {\n  const { disableHover, disableBorders, selected, clickable, className } =\n    options;\n  return cnb(\n    styles({\n      bordered: !disableBorders,\n      hoverable: !disableHover,\n      clickable,\n      selected,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","tableRow","options","disableHover","disableBorders","selected","clickable","className","bordered","hoverable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB,2BAA2B,GAC3B,OAAO,SAASE,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAE,GACpEL;IACF,OAAOJ,IACLE,OAAO;QACLQ,UAAU,CAACJ;QACXK,WAAW,CAACN;QACZG;QACAD;IACF,IACAE;AAEJ"}

package/dist/table/tableStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-table\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  fullWidth?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function table(options: TableClassNameOptions = {}): string {\n  const { dense = false, fullWidth = false, className } = options;\n\n  return cnb(styles({ dense, \"full-width\": fullWidth }), className);\n}\n"],"names":["cnb","bem","styles","table","options","dense","fullWidth","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,QAAQ,KAAK,EAAEC,YAAY,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAExD,OAAOJ,IAAIE,OAAO;QAAEG;QAAO,cAAcC;IAAU,IAAIC;AACzD"}

package/dist/table/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/types.ts"],"sourcesContent":["import type { IntersectionObserverHookOptions } from \"../useIntersectionObserver.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport type TableStickySectionOptions = Pick<\n  IntersectionObserverHookOptions<HTMLTableSectionElement>,\n  \"disabled\" | \"getThreshold\" | \"getRootMargin\"\n>;\n\n/**\n * This **should be wrapped in `useCallback`** to increase performance.\n *\n * The default behavior is to enable the \"active\" state for sticky headers is:\n *\n * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`\n *   after the `<thead>` and enable the active state once 1px overlaps with\n *   the container.\n * - otherwise, assume the `TableHeader` is fixed within the viewport and\n *   parse the `top` CSS style as `px`. enable the active state once 1px\n *   overlaps with this value AND the `TableHeader` exists within the\n *   viewport.\n *   - Note: This really only works with `px` and `rem` units.\n *\n * @see {@link TableStickySectionProps.stickyOptions} for an example usage with custom threshold and\n * margin.\n * @remarks \\@since 6.0.0\n */\nexport type IsStickyTableSectionActive = (\n  entry: IntersectionObserverEntry,\n  isInTableContainer: boolean\n) => boolean;\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableStickySectionProps {\n  /**\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n\n  /**\n   * This can be used when the {@link sticky} prop is set to `true` for\n   * additional behavior around the \"active\" state for sticky headers.\n   *\n   * @example\n   * Disabling Sticky Active State\n   * ```ts\n   * stickyOptions={{\n   *   disabled: true,\n   * }}\n   * ```\n   *\n   * @example\n   * Custom Options\n   * ```ts\n   * stickyOptions={{\n   *   getThreshold: useCallback(() => {\n   *     // you can access the DOM safely from here\n   *     return [0, 0.25, 0.5, 1];\n   *   }, []),\n   *   getRootMargin: useCallback(() => {\n   *     // you can access the DOM safely from here\n   *     return \"-1px 0px 150px 0px\";\n   *   }, []),\n   * }}\n   * isStickyActive={useCallback((entry) => {\n   *   // whatever custom logic you want. you can access the DOM safely from here\n   *   return entry.isIntersecting;\n   * }, [])}\n   * ```\n   *\n   * @remarks \\@since 6.0.0\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API}\n   */\n  stickyOptions?: TableStickySectionOptions;\n\n  /**\n   * An optional className to use when the sticky section is covering other rows\n   * (`active`). When this is defined, the default\n   * `rmd-thead--sticky-active`/`rmd-tfoot--sticky-active` will no longer be\n   * applied.\n   */\n  stickyActiveClassName?: string;\n\n  /**\n   * @see {@link IsStickyTableSectionActive} for a description.\n   * @see {@link stickyOptions} for an example usage with custom threshold and\n   * margin.\n   * @remarks \\@since 6.0.0\n   */\n  isStickyActive?: IsStickyTableSectionActive;\n\n  /**\n   * Set this to `true` when the {@link sticky} prop is `true` to disable the\n   * behavior of adding an additional className when the sticky mode is active.\n   *\n   * The `TableHeader` would gain the `.rmd-thead--sticky-active` class while\n   * the `TableFooter` would gain the `.rmd-tfoot--sticky-active` class.\n   *\n   * @defaultValue `false`\n   */\n  disableStickyStyles?: boolean;\n}\n"],"names":[],"mappings":"AA+BA,2BAA2B,GAC3B,WAoEC"}

package/dist/tabs/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/Tab.tsx"],"sourcesContent":["\"use client\";\nimport {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { tab } from \"./tabStyles.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface BaseTabProps {\n  /**\n   * Set this to `true` if the tab is currently active.\n   *\n   * This is normally provided by the {@link useTabs} hook.\n   */\n  active: boolean;\n\n  /**\n   * Set this to `true` if the {@link TabListProps.disableTransition} prop has\n   * also been set to `true` to disable an active indicator below the tab when\n   * {@link active} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  activeIndicator?: boolean;\n\n  /**\n   * Set this to `true` when rendering the tabs vertically and\n   * {@link activeIndicator} has been enabled.\n   *\n   * @defaultValue !false\n   */\n  verticalActiveIndicator?: boolean;\n\n  /**\n   * An optional icon to render with the with the {@link children}. The default\n   * behavior will render this icon before the children.\n   *\n   * @see {@link iconAfter}\n   * @see {@link stacked}\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this to `true` to render the {@link icon} after the {@link children}.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Set this to `true` to render the {@link icon} and {@link children} stacked\n   * instead of horizontally.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabButtonProps\n  extends BaseTabProps,\n    ButtonHTMLAttributes<HTMLButtonElement> {\n  as?: \"button\";\n}\n\nexport interface TabLinkProps\n  extends BaseTabProps,\n    AnchorHTMLAttributes<HTMLAnchorElement> {\n  as: CustomLinkComponent;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport type TabProps = TabButtonProps | TabLinkProps;\n\n/**\n * **Client Component**\n *\n * This component should usually be used with the `TabsList` component and\n * `useTabs` hook.\n *\n * @see {@link useTabs}\n *\n * @remarks \\@since 6.0.0\n */\nexport function Tab(props: TabProps): ReactElement {\n  const {\n    id: propId,\n    as: Component = \"button\",\n    active,\n    activeIndicator,\n    verticalActiveIndicator,\n    icon,\n    iconAfter,\n    stacked,\n    className,\n    children: propChildren,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    ...remaining\n  } = props as TabButtonProps;\n  const { disabled } = props as TabButtonProps;\n\n  const id = useEnsuredId(propId, \"tab\");\n  const { activeDescendantId } = useKeyboardMovementContext();\n  const { ripples, handlers } = useElementInteraction({\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n  });\n\n  const isLink = Component !== \"button\";\n  const children = useHigherContrastChildren(propChildren);\n  let buttonOnlyProps: Record<string, unknown> | undefined;\n  if (!isLink) {\n    buttonOnlyProps = { type: \"button\" };\n  }\n\n  return (\n    <Component\n      {...remaining}\n      {...buttonOnlyProps}\n      {...handlers}\n      aria-selected={active}\n      id={id}\n      role=\"tab\"\n      tabIndex={id === activeDescendantId ? 0 : -1}\n      className={tab({\n        className,\n        active,\n        isLink,\n        stacked: !!icon && stacked,\n        disabled,\n        reversed: !!icon && iconAfter,\n        activeIndicator,\n        verticalActiveIndicator,\n      })}\n    >\n      {icon}\n      {children}\n      {ripples}\n    </Component>\n  );\n}\n"],"names":["useElementInteraction","useHigherContrastChildren","useKeyboardMovementContext","useEnsuredId","tab","Tab","props","id","propId","as","Component","active","activeIndicator","verticalActiveIndicator","icon","iconAfter","stacked","className","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","remaining","disabled","activeDescendantId","ripples","handlers","isLink","buttonOnlyProps","type","aria-selected","role","tabIndex","reversed"],"mappings":"AAAA;;AAOA,SAASA,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SAASC,0BAA0B,QAAQ,6CAA6C;AACxF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,iBAAiB;AAgFrC;;;;;;;;;CASC,GACD,OAAO,SAASC,IAAIC,KAAe;IACjC,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAIC,YAAY,QAAQ,EACxBC,MAAM,EACNC,eAAe,EACfC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,UAAUC,YAAY,EACtBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACX,GAAGC,WACJ,GAAGzB;IACJ,MAAM,EAAE0B,QAAQ,EAAE,GAAG1B;IAErB,MAAMC,KAAKJ,aAAaK,QAAQ;IAChC,MAAM,EAAEyB,kBAAkB,EAAE,GAAG/B;IAC/B,MAAM,EAAEgC,OAAO,EAAEC,QAAQ,EAAE,GAAGnC,sBAAsB;QAClDoB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;IACF;IAEA,MAAMI,SAAS1B,cAAc;IAC7B,MAAMQ,WAAWjB,0BAA0BkB;IAC3C,IAAIkB;IACJ,IAAI,CAACD,QAAQ;QACXC,kBAAkB;YAAEC,MAAM;QAAS;IACrC;IAEA,qBACE,MAAC5B;QACE,GAAGqB,SAAS;QACZ,GAAGM,eAAe;QAClB,GAAGF,QAAQ;QACZI,iBAAe5B;QACfJ,IAAIA;QACJiC,MAAK;QACLC,UAAUlC,OAAO0B,qBAAqB,IAAI,CAAC;QAC3ChB,WAAWb,IAAI;YACba;YACAN;YACAyB;YACApB,SAAS,CAAC,CAACF,QAAQE;YACnBgB;YACAU,UAAU,CAAC,CAAC5B,QAAQC;YACpBH;YACAC;QACF;;YAECC;YACAI;YACAgB;;;AAGP"}

package/dist/tabs/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/TabList.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  TabListScrollButton,\n  type BaseTabListScrollButtonProps,\n} from \"./TabListScrollButton.js\";\nimport { tabList, type TabsAlignment } from \"./tabListStyles.js\";\nimport { useTabList } from \"./useTabList.js\";\nimport { type GetTabListScrollToOptions } from \"./utils.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabListProps extends HTMLAttributes<HTMLDivElement> {\n  activeIndex: number;\n  setActiveIndex(nextActiveIndex: number): void;\n\n  /**\n   * @defaultValue `\"left\"`\n   */\n  align?: TabsAlignment;\n\n  /**\n   * @defaultValue `false`\n   */\n  padded?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  vertical?: boolean;\n\n  /**\n   * @defaultValue `false`\n   */\n  inline?: boolean;\n\n  /**\n   * Set this to `true` to show a scrollbar when the number of tabs cause\n   * overflow.\n   *\n   * @see {@link scrollButtons}\n   * @defaultValue `false`\n   */\n  scrollbar?: boolean;\n\n  /**\n   * Set this to `true` to disable the active tab indicator from animating\n   * when a new tab is selected.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * This should be equal to the `$tabs-transition-duration` variable.\n   *\n   * @defaultValue `150`\n   */\n  transitionDuration?: number;\n\n  /**\n   * @defaultValue `\"manual\"`\n   */\n  activationMode?: \"manual\" | \"automatic\";\n\n  /**\n   * Set this to `true` to render buttons that can scroll forwards or backwards\n   * within the tab list if there is overflow **on desktop**. If you want to\n   * display the scroll buttons on mobile as well, set this to `\"allow-phone\"` .\n   *\n   * @defaultValue `false`\n   */\n  scrollButtons?: boolean | \"allow-phone\";\n\n  /**\n   * A convenience prop for the {@link BaseTabListScrollButtonProps.getScrollToOptions}\n   * on {@link forwardScrollButtonProps} and {@link backwardScrollButtonProps}.\n   */\n  getScrollToOptions?: GetTabListScrollToOptions;\n\n  /**\n   * Any additional props that should be passed to the scroll forward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll right\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  forwardScrollButtonProps?: BaseTabListScrollButtonProps;\n\n  /**\n   * Any additional props that should be passed to the scroll backward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll left\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  backwardScrollButtonProps?: BaseTabListScrollButtonProps;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link useTabs} for example usage.\n *\n * @remarks \\@since 6.0.0\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList(props, ref) {\n    const {\n      style,\n      onClick,\n      onFocus,\n      onKeyDown,\n      className,\n      children,\n      activeIndex,\n      setActiveIndex,\n      activationMode = \"manual\",\n      align = \"left\",\n      padded = false,\n      inline = false,\n      vertical = false,\n      scrollbar = false,\n      scrollButtons = false,\n      disableTransition = false,\n      transitionDuration = 150,\n      getScrollToOptions,\n      forwardScrollButtonProps,\n      backwardScrollButtonProps,\n      ...remaining\n    } = props;\n\n    const { isPhone } = useAppSize();\n    const showScrollButtons =\n      !!scrollButtons && (scrollButtons === \"allow-phone\" || !isPhone);\n\n    const { elementProps, movementContext, backwardProps, forwardProps } =\n      useTabList({\n        ref,\n        style,\n        onClick,\n        onFocus,\n        onKeyDown,\n        vertical,\n        activeIndex,\n        setActiveIndex,\n        activationMode,\n        scrollButtons: showScrollButtons,\n        disableTransition,\n      });\n\n    const prevActiveIndex = useRef(activeIndex);\n    const [animate, setAnimate] = useState(false);\n    useEffect(() => {\n      const isSameIndex = activeIndex === prevActiveIndex.current;\n      prevActiveIndex.current = activeIndex;\n      if (disableTransition || isSameIndex) {\n        return;\n      }\n\n      setAnimate(true);\n      const timeout = window.setTimeout(() => {\n        setAnimate(false);\n      }, transitionDuration);\n\n      return () => {\n        window.clearTimeout(timeout);\n      };\n    }, [activeIndex, disableTransition, transitionDuration]);\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div\n          {...remaining}\n          {...elementProps}\n          role=\"tablist\"\n          className={tabList({\n            align,\n            padded,\n            inline,\n            animate: !disableTransition && animate,\n            vertical,\n            scrollbar,\n            indicator: !disableTransition,\n            className,\n          })}\n        >\n          {showScrollButtons && (\n            <TabListScrollButton\n              getScrollToOptions={getScrollToOptions}\n              {...backwardScrollButtonProps}\n              {...backwardProps}\n            />\n          )}\n          {children}\n          {showScrollButtons && (\n            <TabListScrollButton\n              getScrollToOptions={getScrollToOptions}\n              {...forwardScrollButtonProps}\n              {...forwardProps}\n            />\n          )}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useEffect","useRef","useState","useAppSize","KeyboardMovementProvider","TabListScrollButton","tabList","useTabList","TabList","props","ref","style","onClick","onFocus","onKeyDown","className","children","activeIndex","setActiveIndex","activationMode","align","padded","inline","vertical","scrollbar","scrollButtons","disableTransition","transitionDuration","getScrollToOptions","forwardScrollButtonProps","backwardScrollButtonProps","remaining","isPhone","showScrollButtons","elementProps","movementContext","backwardProps","forwardProps","prevActiveIndex","animate","setAnimate","isSameIndex","current","timeout","window","setTimeout","clearTimeout","value","div","role","indicator"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,QAEH,QAAQ;AACf,SAASC,UAAU,QAAQ,sCAAsC;AACjE,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SACEC,mBAAmB,QAEd,2BAA2B;AAClC,SAASC,OAAO,QAA4B,qBAAqB;AACjE,SAASC,UAAU,QAAQ,kBAAkB;AAkH7C;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAUT,WACrB,SAASS,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,iBAAiB,QAAQ,EACzBC,QAAQ,MAAM,EACdC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,gBAAgB,KAAK,EACrBC,oBAAoB,KAAK,EACzBC,qBAAqB,GAAG,EACxBC,kBAAkB,EAClBC,wBAAwB,EACxBC,yBAAyB,EACzB,GAAGC,WACJ,GAAGtB;IAEJ,MAAM,EAAEuB,OAAO,EAAE,GAAG7B;IACpB,MAAM8B,oBACJ,CAAC,CAACR,iBAAkBA,CAAAA,kBAAkB,iBAAiB,CAACO,OAAM;IAEhE,MAAM,EAAEE,YAAY,EAAEC,eAAe,EAAEC,aAAa,EAAEC,YAAY,EAAE,GAClE9B,WAAW;QACTG;QACAC;QACAC;QACAC;QACAC;QACAS;QACAN;QACAC;QACAC;QACAM,eAAeQ;QACfP;IACF;IAEF,MAAMY,kBAAkBrC,OAAOgB;IAC/B,MAAM,CAACsB,SAASC,WAAW,GAAGtC,SAAS;IACvCF,UAAU;QACR,MAAMyC,cAAcxB,gBAAgBqB,gBAAgBI,OAAO;QAC3DJ,gBAAgBI,OAAO,GAAGzB;QAC1B,IAAIS,qBAAqBe,aAAa;YACpC;QACF;QAEAD,WAAW;QACX,MAAMG,UAAUC,OAAOC,UAAU,CAAC;YAChCL,WAAW;QACb,GAAGb;QAEH,OAAO;YACLiB,OAAOE,YAAY,CAACH;QACtB;IACF,GAAG;QAAC1B;QAAaS;QAAmBC;KAAmB;IAEvD,qBACE,KAACvB;QAAyB2C,OAAOZ;kBAC/B,cAAA,MAACa;YACE,GAAGjB,SAAS;YACZ,GAAGG,YAAY;YAChBe,MAAK;YACLlC,WAAWT,QAAQ;gBACjBc;gBACAC;gBACAC;gBACAiB,SAAS,CAACb,qBAAqBa;gBAC/BhB;gBACAC;gBACA0B,WAAW,CAACxB;gBACZX;YACF;;gBAECkB,mCACC,KAAC5B;oBACCuB,oBAAoBA;oBACnB,GAAGE,yBAAyB;oBAC5B,GAAGM,aAAa;;gBAGpBpB;gBACAiB,mCACC,KAAC5B;oBACCuB,oBAAoBA;oBACnB,GAAGC,wBAAwB;oBAC3B,GAAGQ,YAAY;;;;;AAM5B,GACA"}

package/dist/tabs/TabListScrollButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/buttonStyles.js\";\nimport { getIcon } from \"../icon/iconConfig.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { applyRef } from \"../utils/applyRef.js\";\nimport {\n  tabListScrollButton,\n  tabListScrollButtonContainer,\n} from \"./tabListScrollButtonStyles.js\";\nimport {\n  getTabListScrollToOptions,\n  type GetTabListScrollToOptions,\n} from \"./utils.js\";\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface BaseTabListScrollButtonProps\n  extends HTMLAttributes<HTMLDivElement>,\n    ButtonClassNameThemeOptions {\n  buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue {@link getTabListScrollToOptions} */\n  getScrollToOptions?: GetTabListScrollToOptions;\n}\n\n/**\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {\n  type: \"back\" | \"forward\";\n  /** @defaultValue `false` */\n  vertical?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @remarks \\@since 6.0.0\n */\nexport const TabListScrollButton = forwardRef<\n  HTMLDivElement,\n  TabListScrollButtonProps\n>(function TabListScrollButton(props, ref) {\n  const {\n    \"aria-label\": ariaLabel,\n    className,\n    buttonProps,\n    type,\n    theme,\n    themeType,\n    buttonType = \"icon\",\n    disabled: propDisabled,\n    children: propChildren,\n    getScrollToOptions = getTabListScrollToOptions,\n    vertical = false,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const forward = type === \"forward\";\n  const iconButton = buttonType === \"icon\";\n  const icon = getIcon(type);\n  const children = propChildren || icon;\n\n  const root = useRef<HTMLElement | null>(null);\n  const isRTL = useDir().dir === \"rtl\";\n  const [disabled, setDisabled] = useState(!forward);\n  const nodeRef = useIntersectionObserver({\n    root,\n    onUpdate: useCallback(([entry]) => {\n      setDisabled(entry.intersectionRatio === 1);\n    }, []),\n  });\n\n  return (\n    <>\n      {!forward && <span ref={nodeRef} />}\n      <div\n        {...remaining}\n        ref={(instance) => {\n          applyRef(instance, ref);\n          root.current = instance?.parentElement || null;\n        }}\n        className={tabListScrollButtonContainer({ forward, className })}\n      >\n        <Button\n          aria-label={ariaLabel || (iconButton ? type : undefined)}\n          theme={theme}\n          themeType={themeType}\n          buttonType={buttonType}\n          disabled={propDisabled || disabled}\n          {...buttonProps}\n          className={tabListScrollButton(buttonProps)}\n          onClick={(event) => {\n            buttonProps?.onClick?.(event);\n            const container = root.current;\n            if (!container) {\n              return;\n            }\n\n            container.scrollTo(\n              getScrollToOptions({\n                isRTL,\n                animate: !disableTransition,\n                vertical,\n                container,\n                increment: forward,\n              })\n            );\n          }}\n        >\n          {children}\n        </Button>\n      </div>\n      {forward && <span ref={nodeRef} />}\n    </>\n  );\n});\n"],"names":["forwardRef","useCallback","useRef","useState","Button","getIcon","useDir","useIntersectionObserver","applyRef","tabListScrollButton","tabListScrollButtonContainer","getTabListScrollToOptions","TabListScrollButton","props","ref","ariaLabel","className","buttonProps","type","theme","themeType","buttonType","disabled","propDisabled","children","propChildren","getScrollToOptions","vertical","disableTransition","remaining","forward","iconButton","icon","root","isRTL","dir","setDisabled","nodeRef","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,QAEH,QAAQ;AACf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AACxC,SACEC,yBAAyB,QAEpB,aAAa;AA4BpB;;;;;CAKC,GACD,OAAO,MAAMC,oCAAsBZ,WAGjC,SAASY,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJ,cAAcC,SAAS,EACvBC,SAAS,EACTC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,aAAa,MAAM,EACnBC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,qBAAqBf,yBAAyB,EAC9CgB,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGhB;IAEJ,MAAMiB,UAAUZ,SAAS;IACzB,MAAMa,aAAaV,eAAe;IAClC,MAAMW,OAAO3B,QAAQa;IACrB,MAAMM,WAAWC,gBAAgBO;IAEjC,MAAMC,OAAO/B,OAA2B;IACxC,MAAMgC,QAAQ5B,SAAS6B,GAAG,KAAK;IAC/B,MAAM,CAACb,UAAUc,YAAY,GAAGjC,SAAS,CAAC2B;IAC1C,MAAMO,UAAU9B,wBAAwB;QACtC0B;QACAK,UAAUrC,YAAY,CAAC,CAACsC,MAAM;YAC5BH,YAAYG,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACV,yBAAW,KAACW;gBAAK3B,KAAKuB;;0BACxB,KAACK;gBACE,GAAGb,SAAS;gBACbf,KAAK,CAAC6B;oBACJnC,SAASmC,UAAU7B;oBACnBmB,KAAKW,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA7B,WAAWN,6BAA6B;oBAAEoB;oBAASd;gBAAU;0BAE7D,cAAA,KAACZ;oBACC0C,cAAY/B,aAAcgB,CAAAA,aAAab,OAAO6B,SAAQ;oBACtD5B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWP,oBAAoBQ;oBAC/B+B,SAAS,CAACC;wBACRhC,aAAa+B,UAAUC;wBACvB,MAAMC,YAAYjB,KAAKW,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChBzB,mBAAmB;4BACjBQ;4BACAkB,SAAS,CAACxB;4BACVD;4BACAuB;4BACAG,WAAWvB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACW;gBAAK3B,KAAKuB;;;;AAG7B,GAAG"}

package/dist/tabs/_tabs.scss

@@ -255,17 +255,19 @@ $variables: (
   }
 }
 
-@mixin styles {
+@mixin styles($disable-layer: false) {
   @if not $disable-everything {
-    @include tablist-styles;
-    @include tab-styles;
+    @include utils.optional-layer(tabs, $disable-layer) {
+      @include tablist-styles;
+      @include tab-styles;
 
-    @if not $disable-indicator {
-      @include indicator-styles;
-    }
+      @if not $disable-indicator {
+        @include indicator-styles;
+      }
 
-    @if not $disable-tablist-scroll-button {
-      @include tablist-button-styles;
+      @if not $disable-tablist-scroll-button {
+        @include tablist-button-styles;
+      }
     }
   }
 }

package/dist/tabs/tabIndicatorStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/tabIndicatorStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tab-indicator\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabIndicatorClassNameOptions {\n  className?: string;\n  animate?: boolean;\n  tablist?: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tabIndicator(\n  options: TabIndicatorClassNameOptions = {}\n): string {\n  const { className, vertical, tablist, animate } = options;\n\n  return cnb(\n    styles({\n      animate,\n      h: !vertical,\n      v: vertical,\n      \"tablist-h\": tablist && !vertical,\n      \"tablist-v\": tablist && vertical,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","tabIndicator","options","className","vertical","tablist","animate","h","v"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASE,aACdC,UAAwC,CAAC,CAAC;IAE1C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,OAAO,EAAE,GAAGJ;IAElD,OAAOJ,IACLE,OAAO;QACLM;QACAC,GAAG,CAACH;QACJI,GAAGJ;QACH,aAAaC,WAAW,CAACD;QACzB,aAAaC,WAAWD;IAC1B,IACAD;AAEJ"}

package/dist/tabs/tabListScrollButtonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/tabListScrollButtonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tablist-button\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabListScrollButtonContainerClassNameOptions {\n  className?: string;\n  forward: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tabListScrollButtonContainer(\n  options: TabListScrollButtonContainerClassNameOptions\n): string {\n  const { forward, className } = options;\n\n  return cnb(\n    styles({\n      left: !forward,\n      right: forward,\n    }),\n    className\n  );\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabListScrollButtonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tabListScrollButton(\n  options: TabListScrollButtonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"button\"), className);\n}\n"],"names":["cnb","bem","styles","tabListScrollButtonContainer","options","forward","className","left","right","tabListScrollButton"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAUnB;;CAEC,GACD,OAAO,SAASE,6BACdC,OAAqD;IAErD,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGF;IAE/B,OAAOJ,IACLE,OAAO;QACLK,MAAM,CAACF;QACPG,OAAOH;IACT,IACAC;AAEJ;AASA;;CAEC,GACD,OAAO,SAASG,oBACdL,UAA+C,CAAC,CAAC;IAEjD,MAAM,EAAEE,SAAS,EAAE,GAAGF;IAEtB,OAAOJ,IAAIE,OAAO,WAAWI;AAC/B"}

package/dist/tabs/tabListStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/tabListStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\nimport { tabIndicator } from \"./tabIndicatorStyles.js\";\n\nconst styles = bem(\"rmd-tablist\");\n\n/**\n * The supported types of alignments for the tabs.\n */\nexport type TabsAlignment = \"left\" | \"center\" | \"right\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabListClassNameOptions {\n  className?: string;\n  align?: TabsAlignment;\n  animate?: boolean;\n  inline?: boolean;\n  padded?: boolean;\n  vertical?: boolean;\n  scrollbar?: boolean;\n  indicator?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tabList(options: TabListClassNameOptions = {}): string {\n  const {\n    className,\n    align = \"left\",\n    padded,\n    inline,\n    vertical,\n    scrollbar,\n    animate = false,\n    indicator = false,\n  } = options;\n\n  return cnb(\n    styles({\n      [align]: true,\n      padded,\n      vertical,\n      \"full-width\": !inline,\n      \"no-scrollbar\": !scrollbar,\n    }),\n    indicator && tabIndicator({ tablist: true, animate, vertical }),\n    className\n  );\n}\n"],"names":["cnb","bem","tabIndicator","styles","tabList","options","className","align","padded","inline","vertical","scrollbar","animate","indicator","tablist"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;AAEvD,MAAMC,SAASF,IAAI;AAqBnB;;CAEC,GACD,OAAO,SAASG,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EACJC,SAAS,EACTC,QAAQ,MAAM,EACdC,MAAM,EACNC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,UAAU,KAAK,EACfC,YAAY,KAAK,EAClB,GAAGR;IAEJ,OAAOL,IACLG,OAAO;QACL,CAACI,MAAM,EAAE;QACTC;QACAE;QACA,cAAc,CAACD;QACf,gBAAgB,CAACE;IACnB,IACAE,aAAaX,aAAa;QAAEY,SAAS;QAAMF;QAASF;IAAS,IAC7DJ;AAEJ"}

package/dist/tabs/tabStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/tabStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { tabIndicator } from \"./tabIndicatorStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tab-color\"?: string;\n    \"--rmd-tab-active-color\"?: string;\n    \"--rmd-tab-inactive-color\"?: string;\n    \"--rmd-tab-disabled-color\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-tab\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabClassNameOptions {\n  className?: string;\n  active?: boolean;\n  isLink?: boolean;\n  activeIndicator?: boolean;\n  verticalActiveIndicator?: boolean;\n  stacked?: boolean;\n  reversed?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tab(options: TabClassNameOptions = {}): string {\n  const {\n    className,\n    active,\n    isLink,\n    stacked,\n    reversed,\n    disabled,\n    activeIndicator,\n    verticalActiveIndicator,\n  } = options;\n\n  return cnb(\n    styles({\n      active,\n      reversed: reversed && !stacked,\n      stacked,\n      \"stacked-reversed\": stacked && reversed,\n      disabled,\n    }),\n    active &&\n      activeIndicator &&\n      tabIndicator({ vertical: verticalActiveIndicator }),\n    cssUtils({ surface: true, textDecoration: isLink ? \"none\" : undefined }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","tabIndicator","styles","tab","options","className","active","isLink","stacked","reversed","disabled","activeIndicator","verticalActiveIndicator","vertical","surface","textDecoration","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;AAWvD,MAAMC,SAASF,IAAI;AAgBnB;;CAEC,GACD,OAAO,SAASG,IAAIC,UAA+B,CAAC,CAAC;IACnD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACxB,GAAGR;IAEJ,OAAON,IACLI,OAAO;QACLI;QACAG,UAAUA,YAAY,CAACD;QACvBA;QACA,oBAAoBA,WAAWC;QAC/BC;IACF,IACAJ,UACEK,mBACAV,aAAa;QAAEY,UAAUD;IAAwB,IACnDb,SAAS;QAAEe,SAAS;QAAMC,gBAAgBR,SAAS,SAASS;IAAU,IACtEX;AAEJ"}

package/dist/tabs/useTabList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/useTabList.ts"],"sourcesContent":["\"use client\";\nimport type {\n  CSSProperties,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  KeyboardMovementContext,\n  KeyboardMovementProps,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport { getTabRoleOnly, scrollTabIntoView } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tab-size\"?: string;\n    \"--rmd-tab-offset\"?: string | number;\n    \"--rmd-tab-indicator-background\"?: string;\n  }\n}\n\nconst TAB_SIZE_VAR = \"--rmd-tab-size\";\nconst TAB_OFFSET_VAR = \"--rmd-tab-offset\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport type TabWidthVar = typeof TAB_SIZE_VAR;\nexport type TabOffsetVar = typeof TAB_OFFSET_VAR;\n\nexport type IndicatorCSSProperties = CSSProperties &\n  Record<TabWidthVar | TabOffsetVar, string>;\n\nexport interface TabListHookOptions {\n  ref: Ref<HTMLDivElement> | undefined;\n  style: CSSProperties | undefined;\n  activeIndex: number;\n  setActiveIndex(nextActiveIndex: number): void;\n  scrollButtons: boolean;\n  activationMode: \"manual\" | \"automatic\";\n  vertical: boolean;\n  onClick: MouseEventHandler<HTMLDivElement> | undefined;\n  onFocus: FocusEventHandler<HTMLDivElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined;\n  disableTransition: boolean;\n}\n\nexport interface TabListHookReturnValue {\n  elementProps: KeyboardMovementProps<HTMLDivElement> & {\n    \"aria-orientation\": \"horizontal\" | \"vertical\";\n    style: CSSProperties;\n    ref: Ref<HTMLDivElement>;\n    onClick: MouseEventHandler<HTMLDivElement>;\n  };\n  movementContext: KeyboardMovementContext;\n  backwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"back\";\n    vertical: boolean;\n  };\n  forwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"forward\";\n    vertical: boolean;\n  };\n}\n\n/**\n * @internal\n */\nexport function useTabList(\n  options: TabListHookOptions\n): TabListHookReturnValue {\n  const {\n    ref: propRef,\n    style,\n    activeIndex,\n    scrollButtons,\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    activationMode,\n    vertical,\n    setActiveIndex,\n    disableTransition,\n  } = options;\n\n  const isRTL = useDir().dir === \"rtl\";\n\n  const [indicatorStyles, setIndicatorStyles] =\n    useState<IndicatorCSSProperties>(() => {\n      const tabWidth = `${100 / 3}%`;\n      return {\n        [TAB_SIZE_VAR]: tabWidth,\n        [TAB_OFFSET_VAR]: \"0px\",\n      };\n    });\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const tabListRef = useResizeObserver({\n    ref,\n    disabled: disableTransition,\n    onUpdate: useCallback(\n      (entry) => {\n        // this is kind of hacky -- the styles should update when switching between\n        // RTL, but the RTL state isn't required for any styles. Just reference it\n        // so that the hooks eslint rule doesn't show a warning...\n        isRTL;\n\n        const activeTab = getTabRoleOnly(entry.target)[activeIndex];\n        if (!activeTab) {\n          return;\n        }\n\n        const size = vertical ? activeTab.offsetHeight : activeTab.offsetWidth;\n        const offset = vertical ? activeTab.offsetTop : activeTab.offsetLeft;\n        const cssVars: IndicatorCSSProperties = {\n          [TAB_SIZE_VAR]: `${size}px`,\n          [TAB_OFFSET_VAR]: `${offset}px`,\n        };\n\n        setIndicatorStyles((prevStyles) => {\n          if (\n            prevStyles &&\n            prevStyles[TAB_SIZE_VAR] === cssVars[TAB_SIZE_VAR] &&\n            prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]\n          ) {\n            return prevStyles;\n          }\n\n          return cssVars;\n        });\n      },\n      [activeIndex, isRTL, vertical]\n    ),\n  });\n  const forwardRef = useRef<HTMLDivElement>(null);\n  const backwardRef = useRef<HTMLDivElement>(null);\n  const { movementProps, movementContext } = useKeyboardMovementProvider({\n    onClick(event) {\n      onClick(event);\n      if (event.isPropagationStopped() || !(event.target instanceof Element)) {\n        return;\n      }\n\n      const clickedTab = event.target.closest(\"[role='tab']\");\n      const tabs = getTabRoleOnly(event.currentTarget);\n      const i = tabs.findIndex((tab) => tab === clickedTab);\n      if (i !== -1) {\n        setActiveIndex(i);\n      }\n    },\n    onFocus,\n    onKeyDown,\n    onFocusChange(event) {\n      const { index } = event;\n      if (activationMode === \"automatic\") {\n        setActiveIndex(index);\n      } else if (scrollButtons) {\n        scrollTabIntoView({\n          activeIndex: index,\n          backward: backwardRef.current,\n          container: nodeRef.current,\n          forward: forwardRef.current,\n          vertical,\n        });\n      }\n    },\n    loopable: true,\n    searchable: true,\n    horizontal: !vertical,\n    includeDisabled: true,\n    tabIndexBehavior: \"roving\",\n    getFocusableElements: getTabRoleOnly,\n  });\n\n  useEffect(() => {\n    scrollTabIntoView({\n      activeIndex,\n      backward: backwardRef.current,\n      container: nodeRef.current,\n      forward: forwardRef.current,\n      vertical,\n    });\n  }, [activeIndex, nodeRef, vertical]);\n\n  return {\n    elementProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : \"horizontal\",\n      ref: tabListRef,\n      style: {\n        ...style,\n        ...(disableTransition ? undefined : indicatorStyles),\n      },\n      ...movementProps,\n    },\n    backwardProps: {\n      ref: backwardRef,\n      type: \"back\",\n      vertical,\n    },\n    forwardProps: {\n      ref: forwardRef,\n      type: \"forward\",\n      vertical,\n    },\n    movementContext,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useKeyboardMovementProvider","useDir","useEnsuredRef","useResizeObserver","getTabRoleOnly","scrollTabIntoView","TAB_SIZE_VAR","TAB_OFFSET_VAR","noop","useTabList","options","ref","propRef","style","activeIndex","scrollButtons","onClick","onFocus","onKeyDown","activationMode","vertical","setActiveIndex","disableTransition","isRTL","dir","indicatorStyles","setIndicatorStyles","tabWidth","nodeRef","tabListRef","disabled","onUpdate","entry","activeTab","target","size","offsetHeight","offsetWidth","offset","offsetTop","offsetLeft","cssVars","prevStyles","forwardRef","backwardRef","movementProps","movementContext","event","isPropagationStopped","Element","clickedTab","closest","tabs","currentTarget","i","findIndex","tab","onFocusChange","index","backward","current","container","forward","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","getFocusableElements","elementProps","undefined","backwardProps","type","forwardProps"],"mappings":"AAAA;AASA,SAASA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAKjE,SAASC,2BAA2B,QAAQ,6CAA6C;AACzF,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,aAAa,QAAQ,sBAAsB;AACpD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,cAAc,EAAEC,iBAAiB,QAAQ,aAAa;AAU/D,MAAMC,eAAe;AACrB,MAAMC,iBAAiB;AAEvB,MAAMC,OAAO;AACX,aAAa;AACf;AA0CA;;CAEC,GACD,OAAO,SAASC,WACdC,OAA2B;IAE3B,MAAM,EACJC,KAAKC,OAAO,EACZC,KAAK,EACLC,WAAW,EACXC,aAAa,EACbC,UAAUR,IAAI,EACdS,OAAO,EACPC,SAAS,EACTC,cAAc,EACdC,QAAQ,EACRC,cAAc,EACdC,iBAAiB,EAClB,GAAGZ;IAEJ,MAAMa,QAAQtB,SAASuB,GAAG,KAAK;IAE/B,MAAM,CAACC,iBAAiBC,mBAAmB,GACzC3B,SAAiC;QAC/B,MAAM4B,WAAW,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;QAC9B,OAAO;YACL,CAACrB,aAAa,EAAEqB;YAChB,CAACpB,eAAe,EAAE;QACpB;IACF;IAEF,MAAM,CAACqB,SAASjB,IAAI,GAAGT,cAAcU;IACrC,MAAMiB,aAAa1B,kBAAkB;QACnCQ;QACAmB,UAAUR;QACVS,UAAUnC,YACR,CAACoC;YACC,2EAA2E;YAC3E,0EAA0E;YAC1E,0DAA0D;YAC1DT;YAEA,MAAMU,YAAY7B,eAAe4B,MAAME,MAAM,CAAC,CAACpB,YAAY;YAC3D,IAAI,CAACmB,WAAW;gBACd;YACF;YAEA,MAAME,OAAOf,WAAWa,UAAUG,YAAY,GAAGH,UAAUI,WAAW;YACtE,MAAMC,SAASlB,WAAWa,UAAUM,SAAS,GAAGN,UAAUO,UAAU;YACpE,MAAMC,UAAkC;gBACtC,CAACnC,aAAa,EAAE,CAAC,EAAE6B,KAAK,EAAE,CAAC;gBAC3B,CAAC5B,eAAe,EAAE,CAAC,EAAE+B,OAAO,EAAE,CAAC;YACjC;YAEAZ,mBAAmB,CAACgB;gBAClB,IACEA,cACAA,UAAU,CAACpC,aAAa,KAAKmC,OAAO,CAACnC,aAAa,IAClDoC,UAAU,CAACnC,eAAe,KAAKkC,OAAO,CAAClC,eAAe,EACtD;oBACA,OAAOmC;gBACT;gBAEA,OAAOD;YACT;QACF,GACA;YAAC3B;YAAaS;YAAOH;SAAS;IAElC;IACA,MAAMuB,aAAa7C,OAAuB;IAC1C,MAAM8C,cAAc9C,OAAuB;IAC3C,MAAM,EAAE+C,aAAa,EAAEC,eAAe,EAAE,GAAG9C,4BAA4B;QACrEgB,SAAQ+B,KAAK;YACX/B,QAAQ+B;YACR,IAAIA,MAAMC,oBAAoB,MAAM,CAAED,CAAAA,MAAMb,MAAM,YAAYe,OAAM,GAAI;gBACtE;YACF;YAEA,MAAMC,aAAaH,MAAMb,MAAM,CAACiB,OAAO,CAAC;YACxC,MAAMC,OAAOhD,eAAe2C,MAAMM,aAAa;YAC/C,MAAMC,IAAIF,KAAKG,SAAS,CAAC,CAACC,MAAQA,QAAQN;YAC1C,IAAII,MAAM,CAAC,GAAG;gBACZjC,eAAeiC;YACjB;QACF;QACArC;QACAC;QACAuC,eAAcV,KAAK;YACjB,MAAM,EAAEW,KAAK,EAAE,GAAGX;YAClB,IAAI5B,mBAAmB,aAAa;gBAClCE,eAAeqC;YACjB,OAAO,IAAI3C,eAAe;gBACxBV,kBAAkB;oBAChBS,aAAa4C;oBACbC,UAAUf,YAAYgB,OAAO;oBAC7BC,WAAWjC,QAAQgC,OAAO;oBAC1BE,SAASnB,WAAWiB,OAAO;oBAC3BxC;gBACF;YACF;QACF;QACA2C,UAAU;QACVC,YAAY;QACZC,YAAY,CAAC7C;QACb8C,iBAAiB;QACjBC,kBAAkB;QAClBC,sBAAsBhE;IACxB;IAEAP,UAAU;QACRQ,kBAAkB;YAChBS;YACA6C,UAAUf,YAAYgB,OAAO;YAC7BC,WAAWjC,QAAQgC,OAAO;YAC1BE,SAASnB,WAAWiB,OAAO;YAC3BxC;QACF;IACF,GAAG;QAACN;QAAac;QAASR;KAAS;IAEnC,OAAO;QACLiD,cAAc;YACZ,oBAAoBjD,WAAW,aAAa;YAC5CT,KAAKkB;YACLhB,OAAO;gBACL,GAAGA,KAAK;gBACR,GAAIS,oBAAoBgD,YAAY7C,eAAe;YACrD;YACA,GAAGoB,aAAa;QAClB;QACA0B,eAAe;YACb5D,KAAKiC;YACL4B,MAAM;YACNpD;QACF;QACAqD,cAAc;YACZ9D,KAAKgC;YACL6B,MAAM;YACNpD;QACF;QACA0B;IACF;AACF"}

package/dist/tabs/useTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/tabs/useTabs.ts"],"sourcesContent":["\"use client\";\nimport type { Dispatch, Ref, RefObject } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { SlideDirection } from \"../transition/SlideContainer.js\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\n\nconst EMPTY_LIST = [] as const;\nconst PANEL_PREFIX = \"panel-\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabsHookOptions<TabValue extends string | number = number> {\n  /**\n   * This can be used to generate the ids for the different components within\n   * the tab widget.\n   *\n   * @defaultValue `\"tab-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to `true` if changing active tabs should no longer attempt to\n   * scroll to the top of the tab panels container when using the\n   * {@link TabsImplementation.getTabPanelsProps}.\n   *\n   * @defaultValue `false`\n   */\n  disableScrollFix?: boolean;\n\n  /**\n   * Set this to an **ordered** list of tab values when:\n   * - using a `string` tab value\n   * - using a `number` tab value does not represent a tab index\n   *\n   * See the examples on the {@link useTabs} for usage.\n   */\n  tabs?: readonly TabValue[];\n\n  /**\n   * Provide this value and {@link setActiveTab} to control the active tab\n   * behavior.\n   */\n  activeTab?: TabValue;\n\n  /** @see {@link activeTab} */\n  setActiveTab?: Dispatch<TabValue>;\n\n  /**\n   * Set this to the default tab index when not controlling the active tab value\n   * through {@link activeTab} and {@link setActiveTab}.\n   *\n   * @defaultValue `0`\n   */\n  defaultActiveTab?: UseStateInitializer<TabValue>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedTabProps {\n  \"aria-controls\": string;\n  id: string;\n  active: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedTabListProps {\n  activeIndex: number;\n  setActiveIndex: Dispatch<number>;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedTabPanelProps {\n  \"aria-labelledby\": string;\n  id: string;\n  role: \"tabpanel\";\n  active: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface ProvidedTabPanelsProps<E extends HTMLElement> {\n  ref: Ref<E>;\n  direction: SlideDirection;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TabsImplementation<TabValue extends string | number = number> {\n  direction: SlideDirection;\n  setDirection: UseStateSetter<SlideDirection>;\n  activeTab?: TabValue;\n  setActiveTab?(nextActiveTab: TabValue): void;\n  getTabProps(tabValue: TabValue): ProvidedTabProps;\n  getTabListProps(): ProvidedTabListProps;\n  getTabPanelProps(tabValue: TabValue): ProvidedTabPanelProps;\n  getTabPanelsProps<E extends HTMLElement>(): ProvidedTabPanelsProps<E>;\n}\n\n/**\n * @example\n * Super Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs();\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(0)}>Tab 1</Tab>\n *         <Tab {...getTabProps(1)}>Tab 2</Tab>\n *         <Tab {...getTabProps(2)}>Tab 3</Tab>\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useTabs(): TabsImplementation<number> & {\n  activeTab: number;\n  setActiveTab: number;\n};\n/**\n * The tab behavior can be controlled by providing the `activeTab` and\n * `setActiveTab` options.\n *\n * @example\n * Controlled\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(1);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     activeTab,\n *     setActiveTab,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(0)}>Tab 1</Tab>\n *         <Tab {...getTabProps(1)}>Tab 2</Tab>\n *         <Tab {...getTabProps(2)}>Tab 3</Tab>\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example\n * String Value Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"];\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({ tabs });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example\n * String Controlled Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"] as const;\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(tabs[0]);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     tabs,\n *     activeTab,\n *     setActiveTab,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @example\n * Navigation Tabs\n * ```tsx\n * \"use client\";\n * import {\n *   RippleContainer,\n *   Tab,\n *   TabList,\n *   useElementInteraction,\n *   useEnsuredId,\n *   useHigherContrastChildren,\n *   useKeyboardMovementContext,\n *   useTabs,\n * } from \"@react-md/core\";\n * import type { LinkProps } from \"next/link\";\n * import Link from \"next/link\";\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import { usePathname } from \"next/navigation\";\n *\n * interface TabLinkProps extends LinkProps {\n *   active: boolean;\n * }\n *\n * function TabLink(props: LinkProps): ReactElement {\n *   const {\n *     id: propId,\n *     children: propChildren,\n *     active,\n *     className,\n *     ...remaining,\n *   } = props;\n *\n *   const id = useEnsuredId(propId, \"tab\");\n *   const { activeDescendantId } = useKeyboardMovementContext();\n *   const { handlers, ripples } = useElementInteraction(props);\n *   const children = useHigherContrastChildren(propChildren);\n *\n *   return (\n *     <Link\n *       {...props}\n *       {...handlers}\n *       id={id}\n *       aria-selected={active}\n *       role=\"tab\"\n *       tabIndex={id === activeDescendantId ? 0 : -1}\n *       className={tab({\n *         className,\n *         active,\n *         // stacked,\n *         // reversed,\n *       })}\n *     >\n *       {children}\n *       {ripples}\n *     </Link>\n *   );\n * }\n *\n * const noop = (): void => {\n *  // do nothing\n * };\n *\n * const PATHNAME_TABS = [\"/\", \"/page-1\", \"/page-2\"];\n *\n * function Layout({ children }: PropsWithChildren) {\n *   const pathname = usePathname();\n *   const { getTabListProps, getTabProps } = useTabs({\n *     tabs: PATHNAME_TABS,\n *     activeTab: pathname,\n *     setActiveTab: noop,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <TabLink {...getTabProps(\"/\")} href=\"/\">Home</TabLink>\n *         <TabLink {...getTabProps(\"/page-1\")} href=\"/page-1\">Page 1</TabLink>\n *         <TabLink {...getTabProps(\"/page-2\")} href=\"/page-2\">Page 2</TabLink>\n *       </TabList>\n *       <main>{children}</main>\n *     </>\n *   );\n * }\n * ```\n *\n * @remarks \\@since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\n/**\n * This hook can be uncontrolled/controlled and supports strongly typing the tab\n * values if needed. Check out the overloads for examples.\n *\n * @remarks \\@since 6.0.0\n */\nexport function useTabs<TabValue extends string | number>(\n  options: TabsHookOptions<TabValue> = {}\n): TabsImplementation<TabValue> {\n  const {\n    baseId: propBaseId,\n    disableScrollFix,\n    tabs = EMPTY_LIST,\n    activeTab: propActiveTab,\n    setActiveTab: propSetActiveTab,\n    defaultActiveTab,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"tab\");\n  const [direction, setDirection] = useState<SlideDirection>(\"left\");\n\n  const [activeTab, setActiveTab] = useEnsuredState({\n    value: propActiveTab,\n    setValue: propSetActiveTab,\n    defaultValue: defaultActiveTab ?? (0 as TabValue),\n  });\n\n  const getTabIndex = (tabValue: TabValue): number =>\n    typeof tabValue === \"string\" || tabs.length > 0\n      ? tabs.indexOf(tabValue)\n      : tabValue;\n  const getTabId = (tabValue: TabValue, prefix = \"\"): string =>\n    `${baseId}-${prefix}${getTabIndex(tabValue) + 1}`;\n\n  const activeIndex = getTabIndex(activeTab);\n  const tabPanelsRef = useRef<HTMLElement>(null);\n  useEffect(() => {\n    const container = tabPanelsRef.current;\n    if (!container || disableScrollFix) {\n      return;\n    }\n\n    container.scrollTop = 0;\n  }, [disableScrollFix, activeTab]);\n\n  return {\n    activeTab,\n    setActiveTab,\n    direction,\n    setDirection,\n    getTabProps(tabValue) {\n      return {\n        \"aria-controls\": getTabId(tabValue, PANEL_PREFIX),\n        id: getTabId(tabValue),\n        active: tabValue === activeTab,\n      };\n    },\n    getTabListProps() {\n      return {\n        activeIndex,\n        setActiveIndex: (nextActiveIndex) => {\n          setDirection(activeIndex < nextActiveIndex ? \"left\" : \"right\");\n          if (typeof activeTab === \"string\" || tabs.length > 0) {\n            setActiveTab(tabs[nextActiveIndex]);\n          } else {\n            setActiveTab(nextActiveIndex as TabValue);\n          }\n        },\n      };\n    },\n    getTabPanelProps(tabValue) {\n      return {\n        \"aria-labelledby\": getTabId(tabValue),\n        id: getTabId(tabValue, PANEL_PREFIX),\n        role: \"tabpanel\",\n        active: tabValue === activeTab,\n      };\n    },\n    getTabPanelsProps<E>() {\n      return {\n        ref: tabPanelsRef as RefObject<E>,\n        direction,\n      };\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","useEnsuredId","useEnsuredState","EMPTY_LIST","PANEL_PREFIX","useTabs","options","baseId","propBaseId","disableScrollFix","tabs","activeTab","propActiveTab","setActiveTab","propSetActiveTab","defaultActiveTab","direction","setDirection","value","setValue","defaultValue","getTabIndex","tabValue","length","indexOf","getTabId","prefix","activeIndex","tabPanelsRef","container","current","scrollTop","getTabProps","id","active","getTabListProps","setActiveIndex","nextActiveIndex","getTabPanelProps","role","getTabPanelsProps","ref"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGpD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,eAAe,QAAQ,wBAAwB;AAExD,MAAMC,aAAa,EAAE;AACrB,MAAMC,eAAe;AA+YrB;;;;;CAKC,GACD,OAAO,SAASC,QACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,gBAAgB,EAChBC,OAAOP,UAAU,EACjBQ,WAAWC,aAAa,EACxBC,cAAcC,gBAAgB,EAC9BC,gBAAgB,EACjB,GAAGT;IAEJ,MAAMC,SAASN,aAAaO,YAAY;IACxC,MAAM,CAACQ,WAAWC,aAAa,GAAGjB,SAAyB;IAE3D,MAAM,CAACW,WAAWE,aAAa,GAAGX,gBAAgB;QAChDgB,OAAON;QACPO,UAAUL;QACVM,cAAcL,oBAAqB;IACrC;IAEA,MAAMM,cAAc,CAACC,WACnB,OAAOA,aAAa,YAAYZ,KAAKa,MAAM,GAAG,IAC1Cb,KAAKc,OAAO,CAACF,YACbA;IACN,MAAMG,WAAW,CAACH,UAAoBI,SAAS,EAAE,GAC/C,CAAC,EAAEnB,OAAO,CAAC,EAAEmB,OAAO,EAAEL,YAAYC,YAAY,EAAE,CAAC;IAEnD,MAAMK,cAAcN,YAAYV;IAChC,MAAMiB,eAAe7B,OAAoB;IACzCD,UAAU;QACR,MAAM+B,YAAYD,aAAaE,OAAO;QACtC,IAAI,CAACD,aAAapB,kBAAkB;YAClC;QACF;QAEAoB,UAAUE,SAAS,GAAG;IACxB,GAAG;QAACtB;QAAkBE;KAAU;IAEhC,OAAO;QACLA;QACAE;QACAG;QACAC;QACAe,aAAYV,QAAQ;YAClB,OAAO;gBACL,iBAAiBG,SAASH,UAAUlB;gBACpC6B,IAAIR,SAASH;gBACbY,QAAQZ,aAAaX;YACvB;QACF;QACAwB;YACE,OAAO;gBACLR;gBACAS,gBAAgB,CAACC;oBACfpB,aAAaU,cAAcU,kBAAkB,SAAS;oBACtD,IAAI,OAAO1B,cAAc,YAAYD,KAAKa,MAAM,GAAG,GAAG;wBACpDV,aAAaH,IAAI,CAAC2B,gBAAgB;oBACpC,OAAO;wBACLxB,aAAawB;oBACf;gBACF;YACF;QACF;QACAC,kBAAiBhB,QAAQ;YACvB,OAAO;gBACL,mBAAmBG,SAASH;gBAC5BW,IAAIR,SAASH,UAAUlB;gBACvBmC,MAAM;gBACNL,QAAQZ,aAAaX;YACvB;QACF;QACA6B;YACE,OAAO;gBACLC,KAAKb;gBACLZ;YACF;QACF;IACF;AACF"}