@bitrix24/b24ui-nuxt 0.2.7 → 0.2.9

package/dist/module.cjs

@@ -2,7 +2,7 @@
 
 const defu = require('defu');
 const kit = require('@nuxt/kit');
-const templates = require('./shared/b24ui-nuxt.DWZW38ni.cjs');
+const templates = require('./shared/b24ui-nuxt.DcPkWX-m.cjs');
 require('node:url');
 require('scule');
 
@@ -30,15 +30,15 @@ const module$1 = kit.defineNuxtModule({
     } else {
       nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
-    async function registerModule(name, options2) {
+    async function registerModule(name, key, options2) {
       if (!kit.hasNuxtModule(name)) {
         await kit.installModule(name, options2);
       } else {
-        nuxt.options[name] = defu.defu(nuxt.options[name], options2);
+        nuxt.options[key] = defu.defu(nuxt.options[key], options2);
       }
     }
     if (options.colorMode) {
-      await registerModule("@nuxtjs/color-mode", { classSuffix: "", disableTransition: true });
+      await registerModule("@nuxtjs/color-mode", "colorMode", { classSuffix: "", disableTransition: true });
     }
     kit.addPlugin({ src: resolve("./runtime/plugins/colors") });
     kit.addPlugin({ src: resolve("./runtime/plugins/modal") });

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.13.1"
   },
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.BhidWnCI.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.0h2uYsyZ.mjs';
 import 'node:url';
 import 'scule';
 
@@ -27,15 +27,15 @@ const module = defineNuxtModule({
     } else {
       nuxt.options.postcss.plugins["@tailwindcss/postcss"] = {};
     }
-    async function registerModule(name, options2) {
+    async function registerModule(name, key, options2) {
       if (!hasNuxtModule(name)) {
         await installModule(name, options2);
       } else {
-        nuxt.options[name] = defu(nuxt.options[name], options2);
+        nuxt.options[key] = defu(nuxt.options[key], options2);
       }
     }
     if (options.colorMode) {
-      await registerModule("@nuxtjs/color-mode", { classSuffix: "", disableTransition: true });
+      await registerModule("@nuxtjs/color-mode", "colorMode", { classSuffix: "", disableTransition: true });
     }
     addPlugin({ src: resolve("./runtime/plugins/colors") });
     addPlugin({ src: resolve("./runtime/plugins/modal") });

package/dist/runtime/components/Alert.vue

@@ -38,7 +38,7 @@ export interface AlertProps {
    * @emits 'update:open'
    * @defaultValue false
    */
-  close?: ButtonProps | boolean
+  close?: boolean | Partial<ButtonProps>
   /**
    * The icon displayed in the close button.
    * @defaultValue icons.close
@@ -129,7 +129,7 @@ const b24ui = computed(() => alert({
           size="xs"
           color="link"
           :aria-label="t('alert.close')"
-          v-bind="typeof close === 'object' ? close : undefined"
+          v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
           :class="b24ui.close({ class: props.b24ui?.close })"
           @click="emits('update:open', false)"
         />

package/dist/runtime/components/Avatar.vue

@@ -1,6 +1,5 @@
 <script lang="ts">
 import type { VariantProps } from 'tailwind-variants'
-import type { AvatarFallbackProps } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import _appConfig from '#build/app.config'
 import theme from '#build/b24ui/avatar'
@@ -13,7 +12,7 @@ const avatar = tv({ extend: tv(theme), ...(appConfigAvatar.b24ui?.avatar || {})
 
 type AvatarVariants = VariantProps<typeof avatar>
 
-export interface AvatarProps extends Pick<AvatarFallbackProps, 'delayMs'> {
+export interface AvatarProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'span'
@@ -34,18 +33,14 @@ export interface AvatarSlots {
 </script>
 
 <script setup lang="ts">
-import { ref, computed, useAttrs, onMounted } from 'vue'
-import { AvatarRoot, AvatarFallback, useForwardProps } from 'reka-ui'
-import { reactivePick, useImage } from '@vueuse/core'
+import { ref, computed, watch } from 'vue'
+import { Primitive } from 'reka-ui'
 import ImageComponent from '#build/b24ui-image-component'
 import { useAvatarGroup } from '../composables/useAvatarGroup'
 
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<AvatarProps>(), { as: 'span' })
-const attrs = useAttrs()
-
-const fallbackProps = useForwardProps(reactivePick(props, 'delayMs'))
 
 const fallback = computed(() => props.text || (props.alt || '')
   .replace(/[+\-*)(}\][{]/g, '')
@@ -55,8 +50,6 @@ const fallback = computed(() => props.text || (props.alt || '')
   .substring(0, 2)
 )
 
-const imageLoaded = ref(false)
-
 const { size } = useAvatarGroup(props)
 
 // eslint-disable-next-line vue/no-dupe-keys
@@ -76,43 +69,37 @@ const sizePx = computed(() => ({
   '3xl': 94
 })[props.size || 'md'])
 
-// Reproduces Reka UI's [AvatarImage](https://reka-ui.com/docs/components/avatar#image) component behavior which cannot be used with NuxtImg component
-onMounted(() => {
-  if (!props.src || (ImageComponent as unknown as string) !== 'img') {
-    return
-  }
-
-  const { then } = useImage({ ...props, ...attrs, src: props.src! })
+const error = ref(false)
 
-  then((img) => {
-    if (img.isReady.value) {
-      imageLoaded.value = true
-    }
-  })
+watch(() => props.src, () => {
+  if (error.value) {
+    error.value = false
+  }
 })
+
+function onError() {
+  error.value = true
+}
 </script>
 
 <template>
-  <AvatarRoot :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
     <component
       :is="ImageComponent"
-      v-if="src"
-      v-show="imageLoaded"
+      v-if="src && !error"
       role="img"
       :src="src"
       :alt="alt"
       :width="sizePx"
       :height="sizePx"
-      v-bind="attrs"
+      v-bind="$attrs"
       :class="b24ui.image({ class: props.b24ui?.image })"
-      @load="imageLoaded = true"
+      @error="onError"
     />
 
-    <AvatarFallback v-if="!imageLoaded" as-child v-bind="{ ...fallbackProps, ...$attrs }">
-      <slot>
-        <Component :is="icon" v-if="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
-        <span v-else :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
-      </slot>
-    </AvatarFallback>
-  </AvatarRoot>
+    <slot v-else>
+      <Component :is="icon" v-if="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
+      <span v-else :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || '&nbsp;' }}</span>
+    </slot>
+  </Primitive>
 </template>

package/dist/runtime/components/Badge.vue

@@ -100,11 +100,13 @@ const b24ui = computed(() => badge({
         />
       </slot>
 
-      <slot>
-        <span v-if="label" :class="b24ui.label({ class: props.b24ui?.label })">
-          {{ label }}
-        </span>
-      </slot>
+      <span :class="b24ui.label({ class: props.b24ui?.label })">
+        <slot>
+          <span v-if="label">
+            {{ label }}
+          </span>
+        </slot>
+      </span>
     </Primitive>
     <slot name="trailing">
       <Cross20Icon

package/dist/runtime/components/Form.vue

@@ -19,6 +19,7 @@ export interface FormProps<T extends object> {
   disabled?: boolean
   validateOnInputDelay?: number
   class?: any
+  transform?: boolean
   onSubmit?: ((event: FormSubmitEvent<T>) => void | Promise<void>) | (() => void | Promise<void>)
 }
 
@@ -43,7 +44,8 @@ const props = withDefaults(defineProps<FormProps<T>>(), {
   validateOn() {
     return ['input', 'blur', 'change'] as FormInputEvents[]
   },
-  validateOnInputDelay: 300
+  validateOnInputDelay: 300,
+  transform: true
 })
 const emits = defineEmits<FormEmits<T>>()
 defineSlots<FormSlots>()
@@ -192,7 +194,7 @@ async function onSubmitWrapper(payload: Event) {
   const event = payload as FormSubmitEvent<any>
 
   try {
-    event.data = await _validate({ nested: true, transform: true })
+    event.data = await _validate({ nested: true, transform: props.transform })
     await props.onSubmit?.(event)
   } catch (error) {
     if (!(error instanceof FormValidationException)) {
@@ -205,9 +207,9 @@ async function onSubmitWrapper(payload: Event) {
       children: error.children
     }
     emits('error', errorEvent)
+  } finally {
+    loading.value = false
   }
-
-  loading.value = false
 }
 
 const disabled = computed(() => props.disabled || loading.value)

package/dist/runtime/components/Modal.vue

@@ -40,7 +40,7 @@ export interface ModalProps extends DialogRootProps {
    * `{ size: 'xs', color: 'link' }`{lang="ts-type"}
    * @defaultValue true
    */
-  close?: ButtonProps | boolean
+  close?: boolean | Partial<ButtonProps>
   /**
    * The icon displayed in the close button.
    * @defaultValue icons.close
@@ -97,11 +97,14 @@ const contentEvents = computed(() => {
     return {
       pointerDownOutside: (e: Event) => e.preventDefault(),
       interactOutside: (e: Event) => e.preventDefault(),
-      escapeKeyDown: (e: Event) => e.preventDefault()
+      escapeKeyDown: (e: Event) => e.preventDefault(),
+      closeAutoFocus: (e: Event) => e.preventDefault()
     }
   }
 
-  return {}
+  return {
+    closeAutoFocus: (e: Event) => e.preventDefault()
+  }
 })
 
 const b24ui = computed(() => modal({
@@ -137,17 +140,19 @@ const b24ui = computed(() => modal({
         <slot name="content">
           <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (close || !!slots.close)" :class="b24ui.header({ class: props.b24ui?.header })">
             <slot name="header">
-              <DialogTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
-                <slot name="title">
-                  {{ title }}
-                </slot>
-              </DialogTitle>
-
-              <DialogDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
-                <slot name="description">
-                  {{ description }}
-                </slot>
-              </DialogDescription>
+              <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+                <DialogTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+                  <slot name="title">
+                    {{ title }}
+                  </slot>
+                </DialogTitle>
+
+                <DialogDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+                  <slot name="description">
+                    {{ description }}
+                  </slot>
+                </DialogDescription>
+              </div>
 
               <DialogClose as-child>
                 <slot name="close" :b24ui="b24ui">
@@ -157,7 +162,7 @@ const b24ui = computed(() => modal({
                     size="xs"
                     color="link"
                     :aria-label="t('modal.close')"
-                    v-bind="typeof close === 'object' ? close : undefined"
+                    v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
                     :class="b24ui.close({ class: props.b24ui?.close })"
                   />
                 </slot>

package/dist/runtime/components/Toast.vue

@@ -38,7 +38,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
    * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts-type"}
    * @defaultValue true
    */
-  close?: ButtonProps | boolean
+  close?: boolean | Partial<ButtonProps>
   /**
    * The icon displayed in the close button.
    * @defaultValue icons.close
@@ -167,7 +167,7 @@ defineExpose({
             size="xs"
             color="link"
             :aria-label="t('toast.close')"
-            v-bind="typeof close === 'object' ? close : undefined"
+            v-bind="(typeof close === 'object' ? close as Partial<ButtonProps> : {})"
             :class="b24ui.close({ class: props.b24ui?.close })"
             @click.stop
           />

package/dist/runtime/components/Toaster.vue

@@ -106,7 +106,8 @@ function getOffset(index: number) {
       v-for="(toast, index) of toasts"
       :key="toast.id"
       ref="refs"
-      v-bind="omit(toast, ['id'])"
+      v-bind="omit(toast, ['id', 'close'])"
+      :close="(toast.close as boolean)"
       :data-expanded="expanded"
       :data-front="!expanded && index === toasts.length - 1"
       :style="{

package/dist/runtime/components/Tooltip.vue

@@ -67,7 +67,7 @@ const b24ui = computed(() => tooltip({
 
 <template>
   <TooltipRoot v-slot="{ open }" v-bind="rootProps">
-    <TooltipTrigger v-if="!!slots.default" as-child :class="props.class">
+    <TooltipTrigger v-if="!!slots.default" v-bind="$attrs" as-child :class="props.class">
       <slot :open="open" />
     </TooltipTrigger>
 

package/dist/runtime/components/prose/TableWrapper.vue

@@ -0,0 +1,67 @@
+<script lang="ts">
+import type { VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/b24ui/prose/table-wrapper'
+import { tv } from '../../utils/tv'
+
+const appConfigTableWrapper = _appConfig as AppConfig & { b24ui: { prose: { tableWrapper: Partial<typeof theme> } } }
+
+const tableWrapper = tv({ extend: tv(theme), ...(appConfigTableWrapper.b24ui?.prose?.tableWrapper || {}) })
+
+type TableWrapperVariants = VariantProps<typeof tableWrapper>
+
+export interface TableWrapperProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  size?: TableWrapperVariants['size']
+  rounded?: boolean
+  zebra?: boolean
+  pinRows?: boolean
+  pinCols?: boolean
+  rowHover?: boolean
+  bordered?: boolean
+  scrollbarThin?: boolean
+  class?: any
+  b24ui?: Partial<typeof tableWrapper.slots>
+}
+
+export interface TableWrapperSlots {
+  default(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { Primitive } from 'reka-ui'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<TableWrapperProps>(), {
+  as: 'div',
+  scrollbarThin: true
+})
+
+const b24ui = computed(() => tableWrapper({
+  size: props.size,
+  rounded: Boolean(props.rounded),
+  zebra: Boolean(props.zebra),
+  pinRows: Boolean(props.pinRows),
+  pinCols: Boolean(props.pinCols),
+  rowHover: Boolean(props.rowHover),
+  bordered: Boolean(props.bordered),
+  scrollbarThin: Boolean(props.scrollbarThin)
+}))
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+  >
+    <slot />
+  </Primitive>
+</template>

package/dist/runtime/index.css

@@ -1 +1 @@
-@plugin "@bitrix24/b24style";@import "#build/b24ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased scheme-light dark:scheme-dark}}
+@plugin "@bitrix24/b24style";@import "#build/b24ui.css";@import "./keyframes.css";@variant light (&:where(.light, .light *));@variant dark (&:where(.dark, .dark *));@layer base{body{@apply antialiased scheme-light dark:scheme-dark}.scrollbar-thin{scrollbar-width:thin}}

package/dist/runtime/types/index.d.ts

@@ -34,6 +34,7 @@ export * from '../components/Toast.vue';
 export * from '../components/Toaster.vue';
 export * from '../components/Tooltip.vue';
 export * from '../components/content/DescriptionList.vue';
+export * from '../components/prose/TableWrapper.vue';
 export * from './form';
 export * from './locale';
 export * from './icons';

package/dist/runtime/types/index.js

@@ -34,6 +34,7 @@ export * from "../components/Toast.vue";
 export * from "../components/Toaster.vue";
 export * from "../components/Tooltip.vue";
 export * from "../components/content/DescriptionList.vue";
+export * from "../components/prose/TableWrapper.vue";
 export * from "./form.js";
 export * from "./locale.js";
 export * from "./icons.js";

package/dist/shared/{b24ui-nuxt.BhidWnCI.mjs → b24ui-nuxt.0h2uYsyZ.mjs}

@@ -175,7 +175,7 @@ const alert = {
 const avatar = {
   slots: {
     root: "inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-base-100 dark:bg-base-900",
-    image: "h-full w-full rounded-[inherit] object-cover data-[error]:hidden",
+    image: "h-full w-full rounded-[inherit] object-cover",
     fallback: "font-medium text-base-500 dark:text-base-600 truncate",
     icon: "text-base-500 shrink-0 dark:text-base-600"
   },
@@ -341,8 +341,7 @@ const badge = {
       "px-2 leading-normal rounded-md"
     ].join(" "),
     wrapper: "inline-flex items-center",
-    label: "max-w-full whitespace-nowrap text-ellipsis",
-    // truncate ////
+    label: "max-w-full whitespace-nowrap text-ellipsis decoration-from-font",
     leadingIcon: "shrink-0",
     leadingAvatar: "shrink-0",
     leadingAvatarSize: "",
@@ -3157,10 +3156,10 @@ const modal = {
     content: [
       "py-md2 px-5",
       "fixed bg-white dark:bg-base-950",
-      // 'divide-y divide-base-900/10 dark:divide-white/20',
       "flex flex-col focus:outline-none"
     ].join(" "),
-    header: "pe-5 pt-0",
+    header: "flex items-center gap-1.5 pe-5 pt-0 min-h-lg2",
+    wrapper: "",
     body: "flex-1 overflow-y-auto my-2.5 text-md leading-normal",
     footer: "flex items-center justify-center gap-3 mt-2.5 pt-4 border-t border-t-1 border-t-base-900/10 dark:border-t-white/20",
     title: "font-bold text-md leading-normal text-base-900 dark:text-base-150",
@@ -3181,7 +3180,7 @@ const modal = {
       false: {
         content: [
           "top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-          "w-[calc(100vw-2rem)] max-w-[32rem] max-h-[calc(100vh-2rem)] sm:max-h-[calc(100vh-4rem)]",
+          "w-[calc(100vw-2rem)] max-w-[32rem] max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)]",
           "rounded-md shadow-lg",
           "ring ring-base-300 dark:ring-base-800"
         ].join(" ")
@@ -4972,8 +4971,94 @@ const theme = {
   tooltip: tooltip
 };
 
+const variantTable = "[&>table]";
+const variantHeadTr = "[&>table>thead>tr]";
+const variantBodyTr = "[&>table>tbody>tr]";
+const variantFoot = "[&>table>tfoot]";
+const variantFootTr = "[&>table>tfoot>tr]";
+const variantsTr = [
+  variantHeadTr,
+  variantBodyTr,
+  variantFootTr
+];
+const variantsTdTh = [
+  "[&>table>thead>tr>td]",
+  "[&>table>thead>tr>th]",
+  "[&>table>tbody>tr>td]",
+  "[&>table>tbody>tr>th]",
+  "[&>table>tfoot>tr>td]",
+  "[&>table>tfoot>tr>th]"
+];
+const tableWrapper = {
+  slots: {
+    base: [
+      `font-b24-primary ${variantTable}:text-md ${variantTable}:relative ${variantTable}:w-full ${variantTable}:text-left ${variantTable}:rtl:text-right`,
+      `${variantTable}:text-base-900 dark:${variantTable}:text-base-200`,
+      ...variantsTdTh.map((variant) => `${variant}:align-middle`),
+      ...variantsTdTh.filter((variant) => !variant.includes("tbody>tr>td")).map((variant) => `${variant}:whitespace-nowrap  ${variant}:text-md ${variant}:font-normal`),
+      `${variantHeadTr}:border-base-300 dark:${variantHeadTr}:border-base-800`,
+      `${variantBodyTr}:border-base-master/10 dark:${variantBodyTr}:border-base-100/20`,
+      `${variantFoot}:border-base-300 dark:${variantFoot}:border-base-800`,
+      `${variantHeadTr}:border-b ${variantBodyTr.replace(">tr]", ">tr:not(:last-child)]")}:border-b`,
+      `${variantFoot}:border-t`
+    ].join(" ")
+  },
+  variants: {
+    size: {
+      xs: [
+        ...variantsTdTh.map((variant) => `${variant}:text-xs ${variant}:px-2 ${variant}:py-1`)
+      ].join(" "),
+      sm: [
+        ...variantsTdTh.map((variant) => `${variant}:text-sm ${variant}:px-3 ${variant}:py-2`)
+      ].join(" "),
+      md: [
+        ...variantsTdTh.map((variant) => `${variant}:text-md ${variant}:px-4 ${variant}:py-3.5`)
+      ].join(" "),
+      lg: [
+        ...variantsTdTh.map((variant) => `${variant}:text-lg ${variant}:px-5 ${variant}:py-4`)
+      ].join(" ")
+    },
+    rounded: {
+      true: "rounded-md",
+      false: "rounded"
+    },
+    zebra: {
+      true: [
+        ...variantsTr.filter((variant) => variant === variantBodyTr).map((variant) => `${variant}:even:bg-base-30 ${variant}:even:[&>td]:bg-base-30 ${variant}:even:[&>th]:bg-base-30 dark:${variant}:even:bg-base-dark dark:${variant}:even:[&>td]:bg-base-dark dark:${variant}:even:[&>th]:bg-base-dark`)
+      ].join(" ")
+    },
+    pinRows: {
+      true: [
+        ...variantsTr.filter((variant) => variant !== variantBodyTr).map((variant) => `${variant}:sticky ${variant}:${variant === variantHeadTr ? "top-0" : "bottom-0"} ${variant}:z-1 ${variant}:bg-white dark:${variant}:bg-base-dark ${variant}:${variant === variantHeadTr ? "shadow-bottom-sm" : "shadow-top-sm"}`)
+      ].join(" ")
+    },
+    pinCols: {
+      true: [
+        ...variantsTr.map((row) => {
+          const variant = row.replace(">tr]", ">tr>th]");
+          return `${variant}:sticky ${variant}:right-0 ${variant}:left-0 ${variant}:bg-base-20 dark:${variant}:bg-base-dark`;
+        })
+      ].join(" ")
+    },
+    rowHover: {
+      true: `${variantBodyTr}:hover:bg-base-40 ${variantBodyTr}:hover:[&>td]:bg-base-40 ${variantBodyTr}:hover:[&>th]:bg-base-40 dark:${variantBodyTr}:hover:bg-base-900 dark:${variantBodyTr}:hover:[&>td]:bg-base-900 dark:${variantBodyTr}:hover:[&>th]:bg-base-900`
+    },
+    bordered: {
+      true: "border border-base-master/10 dark:border-base-800"
+    },
+    scrollbarThin: {
+      true: "scrollbar-thin"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    scrollbarThin: true
+  }
+};
+
 const themeProse = {
-  __proto__: null
+  __proto__: null,
+  tableWrapper: tableWrapper
 };
 
 const descriptionList = {