@basic-ui/material 1.0.0-alpha.4 → 1.0.0-alpha.41

package/build/esm/Tab/context.js

@@ -2,7 +2,8 @@ import { createContext, useContext } from 'react'; // TabList Component
 
 var TabListContext = /*#__PURE__*/createContext({
   indicatorColor: 'primary',
-  textColor: 'on.surface'
+  textColor: 'on.surface',
+  variant: 'secondary'
 });
 var TabListProvider = TabListContext.Provider;
 export { TabListProvider };

package/build/esm/Tab/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tab/context.ts"],"names":["createContext","useContext","TabListContext","indicatorColor","textColor","TabListProvider","Provider","useTabListContext"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C,C,CAEA;;AAOA,IAAMC,cAAc,gBAAGF,aAAa,CAAsB;AACxDG,EAAAA,cAAc,EAAE,SADwC;AAExDC,EAAAA,SAAS,EAAE;AAF6C,CAAtB,CAApC;IAIyBC,e,GAAoBH,c,CAA9BI,Q;;AACf,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB;AAAA,SAAMN,UAAU,CAACC,cAAD,CAAhB;AAAA,CAA1B","sourcesContent":["import { createContext, useContext } from 'react';\n\n// TabList Component\nexport interface TabListContextProps {\n  indicatorColor: string;\n  textColor: string;\n  selectedTextColor?: string;\n}\n\nconst TabListContext = createContext<TabListContextProps>({\n  indicatorColor: 'primary',\n  textColor: 'on.surface',\n});\nexport const { Provider: TabListProvider } = TabListContext;\nexport const useTabListContext = () => useContext(TabListContext);\n"],"file":"context.js"}
+{"version":3,"file":"context.js","names":["createContext","useContext","TabListContext","indicatorColor","textColor","variant","TabListProvider","Provider","useTabListContext"],"sources":["../../../src/Tab/context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n// TabList Component\nexport interface TabListContextProps {\n  indicatorColor: string;\n  textColor: string;\n  selectedTextColor?: string;\n  variant: 'primary' | 'secondary';\n}\n\nconst TabListContext = createContext<TabListContextProps>({\n  indicatorColor: 'primary',\n  textColor: 'on.surface',\n  variant: 'secondary',\n});\nexport const { Provider: TabListProvider } = TabListContext;\nexport const useTabListContext = () => useContext(TabListContext);\n"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C,C,CAEA;;AAQA,IAAMC,cAAc,gBAAGF,aAAa,CAAsB;EACxDG,cAAc,EAAE,SADwC;EAExDC,SAAS,EAAE,YAF6C;EAGxDC,OAAO,EAAE;AAH+C,CAAtB,CAApC;AAKO,IAAkBC,eAAlB,GAAsCJ,cAAtC,CAAQK,QAAR;;AACP,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB;EAAA,OAAMP,UAAU,CAACC,cAAD,CAAhB;AAAA,CAA1B"}

package/build/esm/Tab/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Tab/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,OAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd","sourcesContent":["export * from './Tabs';\nexport * from './TabList';\nexport * from './Tab';\nexport * from './TabPanels';\nexport * from './TabPanel';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/Tab/index.ts"],"sourcesContent":["export * from './Tabs';\nexport * from './TabList';\nexport * from './Tab';\nexport * from './TabPanels';\nexport * from './TabPanel';\n"],"mappings":"AAAA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,OAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd"}

package/build/esm/TabIndicator/TabIndicator.d.ts

@@ -1,7 +1,9 @@
-/// <reference types="react" />
+import type { RefObject } from 'react';
 import type { BoxProps } from '../Box';
 export interface TabIndicatorProps extends BoxProps {
     selected?: boolean;
     color?: string;
+    variant: 'primary' | 'secondary';
+    labelRef: RefObject<HTMLParagraphElement | null>;
 }
-export declare const TabIndicator: import("react").ForwardRefExoticComponent<Pick<TabIndicatorProps, "children" | "p" | "slot" | "style" | "title" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "bg" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "selected"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabIndicator: import("react").ForwardRefExoticComponent<Pick<TabIndicatorProps, "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "variant" | "size" | "hidden" | "as" | "sx" | "__css" | "tx" | "theme" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "selected" | "labelRef"> & import("react").RefAttributes<HTMLDivElement>>;

package/build/esm/TabIndicator/TabIndicator.js

@@ -1,10 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "selected", "color", "variant", "labelRef"];
 import { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';
 import { assignMultipleRefs } from '@basic-ui/core';
 import { Box } from '../Box';
 import { useTabIndicatorContext } from './context';
+import { EASING_STANDARD } from '../motion';
 import { jsx as _jsx } from "react/jsx-runtime";
+var WIDTH_PROPERTY_NAME = '--indicator-width';
+var SCALE_PROPERTY_NAME = '--indicator-scale';
 var useEnhancedEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 export var TabIndicator = /*#__PURE__*/forwardRef(function TabIndicator(props, forwardedRef) {
   var _props$as = props.as,
@@ -12,50 +17,113 @@ export var TabIndicator = /*#__PURE__*/forwardRef(function TabIndicator(props, f
       selected = props.selected,
       _props$color = props.color,
       color = _props$color === void 0 ? 'primary' : _props$color,
-      otherProps = _objectWithoutProperties(props, ["as", "selected", "color"]);
+      variant = props.variant,
+      labelRef = props.labelRef,
+      otherProps = _objectWithoutProperties(props, _excluded);
 
   var ref = useRef(null);
 
   var _useTabIndicatorConte = useTabIndicatorContext(),
       currentIndicator = _useTabIndicatorConte.currentIndicator;
 
+  var resizeObserverRef = useRef();
   useEnhancedEffect(function () {
     if (selected && ref.current) {
       if (currentIndicator.current !== null) {
         // We are switching indicator, let's slide!
         var previousClientRect = currentIndicator.current.getBoundingClientRect();
         var currentClientRect = ref.current.getBoundingClientRect();
-        var widthDelta = previousClientRect.width / currentClientRect.width;
         var xPosition = previousClientRect.left - currentClientRect.left;
         var prevTransition = ref.current.style.transition;
         var prevTransform = ref.current.style.transform;
         ref.current.style.transition = 'none';
-        ref.current.style.transform = "translateX(".concat(xPosition, "px) scaleX(").concat(widthDelta, ")"); // Force repaint before updating classes and transform to ensure the transform properly takes effect
+
+        if (variant === 'primary') {
+          var prevWidth = currentIndicator.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
+          var currentWidth = ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);
+          var widthDelta = String(parseFloat(prevWidth) / parseFloat(currentWidth));
+          ref.current.style.setProperty(SCALE_PROPERTY_NAME, widthDelta);
+          ref.current.style.transform = "translateX(".concat(xPosition, "px)");
+        } else {
+          var _widthDelta = previousClientRect.width / currentClientRect.width;
+
+          ref.current.style.transform = "translateX(".concat(xPosition, "px) scaleX(").concat(_widthDelta, ")");
+        } // Force repaint before updating classes and transform to ensure the transform properly takes effect
+
 
         ref.current.getBoundingClientRect(); // Restore and let transition do it's magic
 
         ref.current.style.transition = prevTransition;
         ref.current.style.transform = prevTransform;
+
+        if (variant === 'primary') {
+          ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');
+        }
       }
 
       currentIndicator.current = ref.current;
     }
-  }, [selected]);
+  }, [selected, variant]);
+  useEnhancedEffect(function () {
+    if (variant === 'secondary') {
+      return;
+    }
+
+    if (labelRef.current && ref.current) {
+      var width = labelRef.current.getBoundingClientRect().width;
+      ref.current.style.setProperty(WIDTH_PROPERTY_NAME, "".concat(width, "px"));
+
+      if (typeof ResizeObserver === 'function') {
+        var _resizeObserverRef$cu, _resizeObserverRef$cu2;
+
+        (_resizeObserverRef$cu = resizeObserverRef.current) !== null && _resizeObserverRef$cu !== void 0 ? _resizeObserverRef$cu : resizeObserverRef.current = new ResizeObserver(function (_ref) {
+          var _ref2 = _slicedToArray(_ref, 1),
+              entry = _ref2[0];
+
+          if (ref.current) {
+            ref.current.style.setProperty(WIDTH_PROPERTY_NAME, "".concat(entry.contentRect.width, "px"));
+          }
+        });
+        (_resizeObserverRef$cu2 = resizeObserverRef.current) === null || _resizeObserverRef$cu2 === void 0 ? void 0 : _resizeObserverRef$cu2.observe(labelRef.current);
+        return function () {
+          var _resizeObserverRef$cu3;
+
+          return (_resizeObserverRef$cu3 = resizeObserverRef.current) === null || _resizeObserverRef$cu3 === void 0 ? void 0 : _resizeObserverRef$cu3.disconnect();
+        };
+      }
+    }
+  }, [labelRef, variant]);
   return /*#__PURE__*/_jsx(Box, _extends({
     as: as,
     ref: assignMultipleRefs(ref, forwardedRef),
-    width: "100%",
-    height: "0.125rem",
-    __css: {
+    __css: _extends({
       bg: color,
       position: 'absolute',
       bottom: 0,
       transform: "scale(1)",
       opacity: selected ? 1 : 0,
-      transformOrigin: 'left',
-      transition: 'transform .25s cubic-bezier(.4,0,.2,1)',
+      transition: "transform .25s ".concat(EASING_STANDARD),
       zIndex: 1
-    }
+    }, variant === 'secondary' ? {
+      width: '100%',
+      height: "0.125rem"
+    } : {
+      width: '100%',
+      '&::before': {
+        content: '""',
+        width: "var(".concat(WIDTH_PROPERTY_NAME, ", 0px)"),
+        height: "0.1875rem",
+        borderTopLeftRadius: "0.1875rem",
+        borderTopRightRadius: "0.1875rem",
+        bg: color,
+        position: 'absolute',
+        transformOrigin: 'center',
+        bottom: 0,
+        left: '50%',
+        transition: "inherit",
+        transform: "translateX(-50%) scaleX(var(".concat(SCALE_PROPERTY_NAME, ", 1))}")
+      }
+    })
   }, otherProps));
 });
 //# sourceMappingURL=TabIndicator.js.map

package/build/esm/TabIndicator/TabIndicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TabIndicator/TabIndicator.tsx"],"names":["forwardRef","useEffect","useRef","useLayoutEffect","assignMultipleRefs","Box","useTabIndicatorContext","useEnhancedEffect","window","TabIndicator","props","forwardedRef","as","selected","color","otherProps","ref","currentIndicator","current","previousClientRect","getBoundingClientRect","currentClientRect","widthDelta","width","xPosition","left","prevTransition","style","transition","prevTransform","transform","bg","position","bottom","opacity","transformOrigin","zIndex"],"mappings":";;AAAA,SAASA,UAAT,EAAqBC,SAArB,EAAgCC,MAAhC,EAAwCC,eAAxC,QAA+D,OAA/D;AAEA,SAASC,kBAAT,QAAmC,gBAAnC;AAGA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,sBAAT,QAAuC,WAAvC;;AAOA,IAAMC,iBAAiB,GACrB,OAAOC,MAAP,KAAkB,WAAlB,GAAgCL,eAAhC,GAAkDF,SADpD;AAGA,OAAO,IAAMQ,YAAY,gBAAGT,UAAU,CACpC,SAASS,YAAT,CAAsBC,KAAtB,EAA6BC,YAA7B,EAA2C;AAAA,kBAC2BD,KAD3B,CACjCE,EADiC;AAAA,MACjCA,EADiC,0BAC5B,MAD4B;AAAA,MACpBC,QADoB,GAC2BH,KAD3B,CACpBG,QADoB;AAAA,qBAC2BH,KAD3B,CACVI,KADU;AAAA,MACVA,KADU,6BACF,SADE;AAAA,MACYC,UADZ,4BAC2BL,KAD3B;;AAEzC,MAAMM,GAAG,GAAGd,MAAM,CAAkB,IAAlB,CAAlB;;AAFyC,8BAGZI,sBAAsB,EAHV;AAAA,MAGjCW,gBAHiC,yBAGjCA,gBAHiC;;AAKzCV,EAAAA,iBAAiB,CAAC,YAAM;AACtB,QAAIM,QAAQ,IAAIG,GAAG,CAACE,OAApB,EAA6B;AAC3B,UAAID,gBAAgB,CAACC,OAAjB,KAA6B,IAAjC,EAAuC;AACrC;AACA,YAAMC,kBAAkB,GACtBF,gBAAgB,CAACC,OAAjB,CAAyBE,qBAAzB,EADF;AAEA,YAAMC,iBAAiB,GAAGL,GAAG,CAACE,OAAJ,CAAYE,qBAAZ,EAA1B;AACA,YAAME,UAAU,GAAGH,kBAAkB,CAACI,KAAnB,GAA2BF,iBAAiB,CAACE,KAAhE;AACA,YAAMC,SAAS,GAAGL,kBAAkB,CAACM,IAAnB,GAA0BJ,iBAAiB,CAACI,IAA9D;AAEA,YAAMC,cAAc,GAAGV,GAAG,CAACE,OAAJ,CAAYS,KAAZ,CAAkBC,UAAzC;AACA,YAAMC,aAAa,GAAGb,GAAG,CAACE,OAAJ,CAAYS,KAAZ,CAAkBG,SAAxC;AACAd,QAAAA,GAAG,CAACE,OAAJ,CAAYS,KAAZ,CAAkBC,UAAlB,GAA+B,MAA/B;AACAZ,QAAAA,GAAG,CAACE,OAAJ,CAAYS,KAAZ,CAAkBG,SAAlB,wBAA4CN,SAA5C,wBAAmEF,UAAnE,OAXqC,CAarC;;AACAN,QAAAA,GAAG,CAACE,OAAJ,CAAYE,qBAAZ,GAdqC,CAgBrC;;AACAJ,QAAAA,GAAG,CAACE,OAAJ,CAAYS,KAAZ,CAAkBC,UAAlB,GAA+BF,cAA/B;AACAV,QAAAA,GAAG,CAACE,OAAJ,CAAYS,KAAZ,CAAkBG,SAAlB,GAA8BD,aAA9B;AACD;;AACDZ,MAAAA,gBAAgB,CAACC,OAAjB,GAA2BF,GAAG,CAACE,OAA/B;AACD;AACF,GAxBgB,EAwBd,CAACL,QAAD,CAxBc,CAAjB;AA0BA,sBACE,KAAC,GAAD;AACE,IAAA,EAAE,EAAED,EADN;AAEE,IAAA,GAAG,EAAER,kBAAkB,CAACY,GAAD,EAAML,YAAN,CAFzB;AAGE,IAAA,KAAK,EAAC,MAHR;AAIE,IAAA,MAAM,YAJR;AAKE,IAAA,KAAK,EAAE;AACLoB,MAAAA,EAAE,EAAEjB,KADC;AAELkB,MAAAA,QAAQ,EAAE,UAFL;AAGLC,MAAAA,MAAM,EAAE,CAHH;AAILH,MAAAA,SAAS,YAJJ;AAKLI,MAAAA,OAAO,EAAErB,QAAQ,GAAG,CAAH,GAAO,CALnB;AAMLsB,MAAAA,eAAe,EAAE,MANZ;AAOLP,MAAAA,UAAU,EAAE,wCAPP;AAQLQ,MAAAA,MAAM,EAAE;AARH;AALT,KAeMrB,UAfN,EADF;AAmBD,CAnDmC,CAA/B","sourcesContent":["import { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';\nimport { rem } from 'polished';\nimport { assignMultipleRefs } from '@basic-ui/core';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTabIndicatorContext } from './context';\n\nexport interface TabIndicatorProps extends BoxProps {\n  selected?: boolean;\n  color?: string;\n}\n\nconst useEnhancedEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(\n  function TabIndicator(props, forwardedRef) {\n    const { as = 'span', selected, color = 'primary', ...otherProps } = props;\n    const ref = useRef<HTMLSpanElement>(null);\n    const { currentIndicator } = useTabIndicatorContext();\n\n    useEnhancedEffect(() => {\n      if (selected && ref.current) {\n        if (currentIndicator.current !== null) {\n          // We are switching indicator, let's slide!\n          const previousClientRect =\n            currentIndicator.current.getBoundingClientRect();\n          const currentClientRect = ref.current.getBoundingClientRect();\n          const widthDelta = previousClientRect.width / currentClientRect.width;\n          const xPosition = previousClientRect.left - currentClientRect.left;\n\n          const prevTransition = ref.current.style.transition;\n          const prevTransform = ref.current.style.transform;\n          ref.current.style.transition = 'none';\n          ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;\n\n          // Force repaint before updating classes and transform to ensure the transform properly takes effect\n          ref.current.getBoundingClientRect();\n\n          // Restore and let transition do it's magic\n          ref.current.style.transition = prevTransition;\n          ref.current.style.transform = prevTransform;\n        }\n        currentIndicator.current = ref.current;\n      }\n    }, [selected]);\n\n    return (\n      <Box\n        as={as}\n        ref={assignMultipleRefs(ref, forwardedRef)}\n        width=\"100%\"\n        height={rem(2)}\n        __css={{\n          bg: color,\n          position: 'absolute',\n          bottom: 0,\n          transform: `scale(1)`,\n          opacity: selected ? 1 : 0,\n          transformOrigin: 'left',\n          transition: 'transform .25s cubic-bezier(.4,0,.2,1)',\n          zIndex: 1,\n        }}\n        {...otherProps}\n      />\n    );\n  }\n);\n"],"file":"TabIndicator.js"}
+{"version":3,"file":"TabIndicator.js","names":["forwardRef","useEffect","useRef","useLayoutEffect","assignMultipleRefs","Box","useTabIndicatorContext","EASING_STANDARD","WIDTH_PROPERTY_NAME","SCALE_PROPERTY_NAME","useEnhancedEffect","window","TabIndicator","props","forwardedRef","as","selected","color","variant","labelRef","otherProps","ref","currentIndicator","resizeObserverRef","current","previousClientRect","getBoundingClientRect","currentClientRect","xPosition","left","prevTransition","style","transition","prevTransform","transform","prevWidth","getPropertyValue","currentWidth","widthDelta","String","parseFloat","setProperty","width","ResizeObserver","entry","contentRect","observe","disconnect","bg","position","bottom","opacity","zIndex","height","content","borderTopLeftRadius","borderTopRightRadius","transformOrigin"],"sources":["../../../src/TabIndicator/TabIndicator.tsx"],"sourcesContent":["import type { RefObject } from 'react';\nimport { forwardRef, useEffect, useRef, useLayoutEffect } from 'react';\nimport { rem } from 'polished';\nimport { assignMultipleRefs } from '@basic-ui/core';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTabIndicatorContext } from './context';\nimport { EASING_STANDARD } from '../motion';\n\nexport interface TabIndicatorProps extends BoxProps {\n  selected?: boolean;\n  color?: string;\n  variant: 'primary' | 'secondary';\n  labelRef: RefObject<HTMLParagraphElement | null>;\n}\n\nconst WIDTH_PROPERTY_NAME = '--indicator-width';\nconst SCALE_PROPERTY_NAME = '--indicator-scale';\n\nconst useEnhancedEffect =\n  typeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport const TabIndicator = forwardRef<HTMLDivElement, TabIndicatorProps>(\n  function TabIndicator(props, forwardedRef) {\n    const {\n      as = 'span',\n      selected,\n      color = 'primary',\n      variant,\n      labelRef,\n      ...otherProps\n    } = props;\n    const ref = useRef<HTMLSpanElement>(null);\n    const { currentIndicator } = useTabIndicatorContext();\n    const resizeObserverRef = useRef<ResizeObserver>();\n\n    useEnhancedEffect(() => {\n      if (selected && ref.current) {\n        if (currentIndicator.current !== null) {\n          // We are switching indicator, let's slide!\n          const previousClientRect =\n            currentIndicator.current.getBoundingClientRect();\n          const currentClientRect = ref.current.getBoundingClientRect();\n          const xPosition = previousClientRect.left - currentClientRect.left;\n\n          const prevTransition = ref.current.style.transition;\n          const prevTransform = ref.current.style.transform;\n          ref.current.style.transition = 'none';\n          if (variant === 'primary') {\n            const prevWidth =\n              currentIndicator.current.style.getPropertyValue(\n                WIDTH_PROPERTY_NAME\n              );\n            const currentWidth =\n              ref.current.style.getPropertyValue(WIDTH_PROPERTY_NAME);\n            const widthDelta = String(\n              parseFloat(prevWidth) / parseFloat(currentWidth)\n            );\n            ref.current.style.setProperty(SCALE_PROPERTY_NAME, widthDelta);\n            ref.current.style.transform = `translateX(${xPosition}px)`;\n          } else {\n            const widthDelta =\n              previousClientRect.width / currentClientRect.width;\n            ref.current.style.transform = `translateX(${xPosition}px) scaleX(${widthDelta})`;\n          }\n\n          // Force repaint before updating classes and transform to ensure the transform properly takes effect\n          ref.current.getBoundingClientRect();\n\n          // Restore and let transition do it's magic\n          ref.current.style.transition = prevTransition;\n          ref.current.style.transform = prevTransform;\n          if (variant === 'primary') {\n            ref.current.style.setProperty(SCALE_PROPERTY_NAME, '1');\n          }\n        }\n        currentIndicator.current = ref.current;\n      }\n    }, [selected, variant]);\n\n    useEnhancedEffect(() => {\n      if (variant === 'secondary') {\n        return;\n      }\n\n      if (labelRef.current && ref.current) {\n        const width = labelRef.current.getBoundingClientRect().width;\n        ref.current.style.setProperty(WIDTH_PROPERTY_NAME, `${width}px`);\n\n        if (typeof ResizeObserver === 'function') {\n          resizeObserverRef.current ??= new ResizeObserver(([entry]) => {\n            if (ref.current) {\n              ref.current.style.setProperty(\n                WIDTH_PROPERTY_NAME,\n                `${entry.contentRect.width}px`\n              );\n            }\n          });\n\n          resizeObserverRef.current?.observe(labelRef.current);\n          return () => resizeObserverRef.current?.disconnect();\n        }\n      }\n    }, [labelRef, variant]);\n\n    return (\n      <Box\n        as={as}\n        ref={assignMultipleRefs(ref, forwardedRef)}\n        __css={{\n          bg: color,\n          position: 'absolute',\n          bottom: 0,\n          transform: `scale(1)`,\n          opacity: selected ? 1 : 0,\n          transition: `transform .25s ${EASING_STANDARD}`,\n          zIndex: 1,\n          ...(variant === 'secondary'\n            ? {\n                width: '100%',\n                height: rem(2),\n              }\n            : {\n                width: '100%',\n                '&::before': {\n                  content: '\"\"',\n                  width: `var(${WIDTH_PROPERTY_NAME}, 0px)`,\n                  height: rem(3),\n                  borderTopLeftRadius: rem(3),\n                  borderTopRightRadius: rem(3),\n                  bg: color,\n                  position: 'absolute',\n                  transformOrigin: 'center',\n                  bottom: 0,\n                  left: '50%',\n                  transition: `inherit`,\n                  transform: `translateX(-50%) scaleX(var(${SCALE_PROPERTY_NAME}, 1))}`,\n                },\n              }),\n        }}\n        {...otherProps}\n      />\n    );\n  }\n);\n"],"mappings":"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"}

package/build/esm/TabIndicator/context.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import type { MutableRefObject } from 'react';
 export interface TabIndicatorContextProps {
-    currentIndicator: React.MutableRefObject<HTMLSpanElement | null>;
+    currentIndicator: MutableRefObject<HTMLSpanElement | null>;
 }
 export declare const TabIndicatorProvider: import("react").Provider<TabIndicatorContextProps>;
 export declare const useTabIndicatorContext: () => TabIndicatorContextProps;

package/build/esm/TabIndicator/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TabIndicator/context.ts"],"names":["createContext","useContext","TabIndicatorContext","currentIndicator","current","TabIndicatorProvider","Provider","useTabIndicatorContext"],"mappings":"AAAA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C,C,CAEA;;AAKA,IAAMC,mBAAmB,gBAAGF,aAAa,CAA2B;AAClEG,EAAAA,gBAAgB,EAAE;AAAEC,IAAAA,OAAO,EAAE;AAAX;AADgD,CAA3B,CAAzC;IAGyBC,oB,GAAyBH,mB,CAAnCI,Q;;AACf,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB;AAAA,SAAMN,UAAU,CAACC,mBAAD,CAAhB;AAAA,CAA/B","sourcesContent":["import { createContext, useContext } from 'react';\n\n// TabIndicator Component\nexport interface TabIndicatorContextProps {\n  currentIndicator: React.MutableRefObject<HTMLSpanElement | null>;\n}\n\nconst TabIndicatorContext = createContext<TabIndicatorContextProps>({\n  currentIndicator: { current: null },\n});\nexport const { Provider: TabIndicatorProvider } = TabIndicatorContext;\nexport const useTabIndicatorContext = () => useContext(TabIndicatorContext);\n"],"file":"context.js"}
+{"version":3,"file":"context.js","names":["createContext","useContext","TabIndicatorContext","currentIndicator","current","TabIndicatorProvider","Provider","useTabIndicatorContext"],"sources":["../../../src/TabIndicator/context.ts"],"sourcesContent":["import type { MutableRefObject } from 'react';\nimport { createContext, useContext } from 'react';\n\n// TabIndicator Component\nexport interface TabIndicatorContextProps {\n  currentIndicator: MutableRefObject<HTMLSpanElement | null>;\n}\n\nconst TabIndicatorContext = createContext<TabIndicatorContextProps>({\n  currentIndicator: { current: null },\n});\nexport const { Provider: TabIndicatorProvider } = TabIndicatorContext;\nexport const useTabIndicatorContext = () => useContext(TabIndicatorContext);\n"],"mappings":"AACA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C,C,CAEA;;AAKA,IAAMC,mBAAmB,gBAAGF,aAAa,CAA2B;EAClEG,gBAAgB,EAAE;IAAEC,OAAO,EAAE;EAAX;AADgD,CAA3B,CAAzC;AAGO,IAAkBC,oBAAlB,GAA2CH,mBAA3C,CAAQI,QAAR;;AACP,OAAO,IAAMC,sBAAsB,GAAG,SAAzBA,sBAAyB;EAAA,OAAMN,UAAU,CAACC,mBAAD,CAAhB;AAAA,CAA/B"}

package/build/esm/TabIndicator/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/TabIndicator/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAd;AACA,cAAc,WAAd","sourcesContent":["export * from './TabIndicator';\nexport * from './context';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/TabIndicator/index.ts"],"sourcesContent":["export * from './TabIndicator';\nexport * from './context';\n"],"mappings":"AAAA,cAAc,gBAAd;AACA,cAAc,WAAd"}

package/build/esm/Table/Table.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { PaperProps } from '../Paper';
 export declare type TableProps = PaperProps;
-export declare const Table: import("react").ForwardRefExoticComponent<Pick<PaperProps, "children" | "p" | "slot" | "style" | "title" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "boxShadow" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "zIndex" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "gridColumnGap" | "gridGap" | "gridRowGap" | "hidden" | "as" | "sx" | "__css" | "variant" | "tx" | "theme" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "size" | "bg" | "borderX" | "borderY" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "elevation" | "outlined" | "backgroundOverlay" | "darkThemeBackgroundOverlay"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const Table: import("react").ForwardRefExoticComponent<Pick<PaperProps, "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundSize" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "bottom" | "color" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflowX" | "overflowY" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "textAlign" | "textShadow" | "top" | "translate" | "verticalAlign" | "width" | "background" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderStyle" | "borderTop" | "borderWidth" | "flex" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bg" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "variant" | "size" | "elevation" | "hidden" | "as" | "sx" | "__css" | "tx" | "theme" | "borderX" | "borderY" | "gridGap" | "gridColumnGap" | "gridRowGap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "outlined" | "backgroundOverlay" | "darkThemeBackgroundOverlay" | "key"> & import("react").RefAttributes<HTMLDivElement>>;

package/build/esm/Table/Table.js

@@ -1,23 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "elevation", "__css"];
 import { forwardRef } from 'react';
 import { Paper } from '../Paper';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Table = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       _props$elevation = props.elevation,
-      elevation = _props$elevation === void 0 ? 1 : _props$elevation,
-      rest = _objectWithoutProperties(props, ["children", "elevation"]);
+      elevation = _props$elevation === void 0 ? 0 : _props$elevation,
+      __css = props.__css,
+      rest = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/_jsx(Paper, _extends({
+  return /*#__PURE__*/_jsx(Paper, _extends(_extends({
     ref: ref,
     role: "table",
     display: "flex",
     width: "100%",
     flexDirection: "column",
     elevation: elevation,
-    darkThemeBackgroundOverlay: elevation
-  }, rest, {
+    darkThemeBackgroundOverlay: elevation,
+    borderRadius: "extra-large",
+    __css: _extends({
+      borderColor: 'surface-variant',
+      borderWidth: "0.125rem",
+      borderStyle: 'solid',
+      overflowX: 'auto'
+    }, __css)
+  }, rest), {}, {
     children: children
   }));
 });

package/build/esm/Table/Table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/Table.tsx"],"names":["forwardRef","Paper","Table","props","ref","children","elevation","rest"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,KAAT,QAAsB,UAAtB;;AAIA,OAAO,IAAMC,KAAK,gBAAGF,UAAU,CAA6B,UAACG,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAClEC,QADkE,GAC7BF,KAD6B,CAClEE,QADkE;AAAA,yBAC7BF,KAD6B,CACxDG,SADwD;AAAA,MACxDA,SADwD,iCAC5C,CAD4C;AAAA,MACtCC,IADsC,4BAC7BJ,KAD6B;;AAG1E,sBACE,KAAC,KAAD;AACE,IAAA,GAAG,EAAEC,GADP;AAEE,IAAA,IAAI,EAAC,OAFP;AAGE,IAAA,OAAO,EAAC,MAHV;AAIE,IAAA,KAAK,EAAC,MAJR;AAKE,IAAA,aAAa,EAAC,QALhB;AAME,IAAA,SAAS,EAAEE,SANb;AAOE,IAAA,0BAA0B,EAAEA;AAP9B,KAQMC,IARN;AAAA,cAUGF;AAVH,KADF;AAcD,CAjB8B,CAAxB","sourcesContent":["import { forwardRef } from 'react';\n\nimport type { PaperProps } from '../Paper';\nimport { Paper } from '../Paper';\n\nexport type TableProps = PaperProps;\n\nexport const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {\n  const { children, elevation = 1, ...rest } = props;\n\n  return (\n    <Paper\n      ref={ref}\n      role=\"table\"\n      display=\"flex\"\n      width=\"100%\"\n      flexDirection=\"column\"\n      elevation={elevation}\n      darkThemeBackgroundOverlay={elevation}\n      {...rest}\n    >\n      {children}\n    </Paper>\n  );\n});\n"],"file":"Table.js"}
+{"version":3,"file":"Table.js","names":["forwardRef","Paper","Table","props","ref","children","elevation","__css","rest","borderColor","borderWidth","borderStyle","overflowX"],"sources":["../../../src/Table/Table.tsx"],"sourcesContent":["import { rem } from 'polished';\nimport { forwardRef } from 'react';\n\nimport type { PaperProps } from '../Paper';\nimport { Paper } from '../Paper';\n\nexport type TableProps = PaperProps;\n\nexport const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {\n  const { children, elevation = 0, __css, ...rest } = props;\n\n  return (\n    <Paper\n      ref={ref}\n      role=\"table\"\n      display=\"flex\"\n      width=\"100%\"\n      flexDirection=\"column\"\n      elevation={elevation}\n      darkThemeBackgroundOverlay={elevation}\n      borderRadius=\"extra-large\"\n      __css={{\n        borderColor: 'surface-variant',\n        borderWidth: rem(2),\n        borderStyle: 'solid',\n        overflowX: 'auto',\n        ...__css,\n      }}\n      {...rest}\n    >\n      {children}\n    </Paper>\n  );\n});\n"],"mappings":";;;AACA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,KAAT,QAAsB,UAAtB;;AAIA,OAAO,IAAMC,KAAK,gBAAGF,UAAU,CAA6B,UAACG,KAAD,EAAQC,GAAR,EAAgB;EAC1E,IAAQC,QAAR,GAAoDF,KAApD,CAAQE,QAAR;EAAA,uBAAoDF,KAApD,CAAkBG,SAAlB;EAAA,IAAkBA,SAAlB,iCAA8B,CAA9B;EAAA,IAAiCC,KAAjC,GAAoDJ,KAApD,CAAiCI,KAAjC;EAAA,IAA2CC,IAA3C,4BAAoDL,KAApD;;EAEA,oBACE,KAAC,KAAD;IACE,GAAG,EAAEC,GADP;IAEE,IAAI,EAAC,OAFP;IAGE,OAAO,EAAC,MAHV;IAIE,KAAK,EAAC,MAJR;IAKE,aAAa,EAAC,QALhB;IAME,SAAS,EAAEE,SANb;IAOE,0BAA0B,EAAEA,SAP9B;IAQE,YAAY,EAAC,aARf;IASE,KAAK;MACHG,WAAW,EAAE,iBADV;MAEHC,WAAW,YAFR;MAGHC,WAAW,EAAE,OAHV;MAIHC,SAAS,EAAE;IAJR,GAKAL,KALA;EATP,GAgBMC,IAhBN;IAAA,UAkBGH;EAlBH,GADF;AAsBD,CAzB8B,CAAxB"}

package/build/esm/Table/TableBody.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { BoxProps } from '../Box';
 export declare type TableBodyProps = BoxProps;
-export declare const TableBody: import("react").ForwardRefExoticComponent<Pick<TableBodyProps, "children" | "slot" | "style" | "title" | "translate" | "hidden" | keyof import("../Box").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TableBody: import("react").ForwardRefExoticComponent<Pick<TableBodyProps, "translate" | "hidden" | keyof import("../Box").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import("react").RefAttributes<HTMLDivElement>>;

package/build/esm/Table/TableBody.js

@@ -1,16 +1,17 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
 import { forwardRef } from 'react';
 import { Box } from '../Box';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var TableBody = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
-      rest = _objectWithoutProperties(props, ["children"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/_jsx(Box, _extends({
+  return /*#__PURE__*/_jsx(Box, _extends(_extends({
     ref: ref,
     role: "rowgroup"
-  }, rest, {
+  }, rest), {}, {
     children: children
   }));
 });

package/build/esm/Table/TableBody.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/TableBody.tsx"],"names":["forwardRef","Box","TableBody","props","ref","children","rest"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,GAAT,QAAoB,QAApB;;AAIA,OAAO,IAAMC,SAAS,gBAAGF,UAAU,CACjC,UAACG,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACNC,QADM,GACgBF,KADhB,CACNE,QADM;AAAA,MACOC,IADP,4BACgBH,KADhB;;AAEd,sBACE,KAAC,GAAD;AAAK,IAAA,GAAG,EAAEC,GAAV;AAAe,IAAA,IAAI,EAAC;AAApB,KAAmCE,IAAnC;AAAA,cACGD;AADH,KADF;AAKD,CARgC,CAA5B","sourcesContent":["import { forwardRef } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport type TableBodyProps = BoxProps;\n\nexport const TableBody = forwardRef<HTMLDivElement, TableBodyProps>(\n  (props, ref) => {\n    const { children, ...rest } = props;\n    return (\n      <Box ref={ref} role=\"rowgroup\" {...rest}>\n        {children}\n      </Box>\n    );\n  }\n);\n"],"file":"TableBody.js"}
+{"version":3,"file":"TableBody.js","names":["forwardRef","Box","TableBody","props","ref","children","rest"],"sources":["../../../src/Table/TableBody.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\n\nexport type TableBodyProps = BoxProps;\n\nexport const TableBody = forwardRef<HTMLDivElement, TableBodyProps>(\n  (props, ref) => {\n    const { children, ...rest } = props;\n    return (\n      <Box ref={ref} role=\"rowgroup\" {...rest}>\n        {children}\n      </Box>\n    );\n  }\n);\n"],"mappings":";;;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,GAAT,QAAoB,QAApB;;AAIA,OAAO,IAAMC,SAAS,gBAAGF,UAAU,CACjC,UAACG,KAAD,EAAQC,GAAR,EAAgB;EACd,IAAQC,QAAR,GAA8BF,KAA9B,CAAQE,QAAR;EAAA,IAAqBC,IAArB,4BAA8BH,KAA9B;;EACA,oBACE,KAAC,GAAD;IAAK,GAAG,EAAEC,GAAV;IAAe,IAAI,EAAC;EAApB,GAAmCE,IAAnC;IAAA,UACGD;EADH,GADF;AAKD,CARgC,CAA5B"}

package/build/esm/Table/TableCell.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { BoxProps } from '../Box';
 export declare type TableCellProps = BoxProps;
-export declare const TableCell: import("react").ForwardRefExoticComponent<Pick<TableCellProps, "children" | "slot" | "style" | "title" | "translate" | "hidden" | keyof import("../Box").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TableCell: import("react").ForwardRefExoticComponent<Pick<TableCellProps, "translate" | "hidden" | keyof import("../Box").BaseProps | keyof import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> | keyof import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").GridProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").BackgroundProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Background<import("styled-system").TLengthStyledSystem>> | keyof import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | keyof import("styled-system").ShadowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & import("react").RefAttributes<HTMLDivElement>>;

package/build/esm/Table/TableCell.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "__css"];
 import { forwardRef } from 'react';
 import { Box } from '../Box';
 import { useTableHeadContext } from './context';
@@ -7,10 +8,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 export var TableCell = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       __css = props.__css,
-      rest = _objectWithoutProperties(props, ["children", "__css"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
   var isHeadCell = useTableHeadContext();
-  return /*#__PURE__*/_jsx(Box, _extends({
+  return /*#__PURE__*/_jsx(Box, _extends(_extends({
     ref: ref,
     px: 1,
     py: 3,
@@ -22,7 +23,7 @@ export var TableCell = /*#__PURE__*/forwardRef(function (props, ref) {
       fontWeight: isHeadCell ? 'medium' : undefined,
       color: 'on.surface'
     }, __css)
-  }, rest, {
+  }, rest), {}, {
     children: children
   }));
 });

package/build/esm/Table/TableCell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Table/TableCell.tsx"],"names":["forwardRef","Box","useTableHeadContext","TableCell","props","ref","children","__css","rest","isHeadCell","whiteSpace","overflow","textOverflow","fontWeight","undefined","color"],"mappings":";;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,mBAAT,QAAoC,WAApC;;AAIA,OAAO,IAAMC,SAAS,gBAAGH,UAAU,CACjC,UAACI,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACNC,QADM,GACuBF,KADvB,CACNE,QADM;AAAA,MACIC,KADJ,GACuBH,KADvB,CACIG,KADJ;AAAA,MACcC,IADd,4BACuBJ,KADvB;;AAEd,MAAMK,UAAU,GAAGP,mBAAmB,EAAtC;AAEA,sBACE,KAAC,GAAD;AACE,IAAA,GAAG,EAAEG,GADP;AAEE,IAAA,EAAE,EAAE,CAFN;AAGE,IAAA,EAAE,EAAE,CAHN;AAIE,IAAA,IAAI,EAAEI,UAAU,GAAG,cAAH,GAAoB,MAJtC;AAKE,IAAA,KAAK;AACHC,MAAAA,UAAU,EAAE,QADT;AAEHC,MAAAA,QAAQ,EAAE,QAFP;AAGHC,MAAAA,YAAY,EAAE,UAHX;AAIHC,MAAAA,UAAU,EAAEJ,UAAU,GAAG,QAAH,GAAcK,SAJjC;AAKHC,MAAAA,KAAK,EAAE;AALJ,OAMAR,KANA;AALP,KAaMC,IAbN;AAAA,cAeGF;AAfH,KADF;AAmBD,CAxBgC,CAA5B","sourcesContent":["import { forwardRef } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTableHeadContext } from './context';\n\nexport type TableCellProps = BoxProps;\n\nexport const TableCell = forwardRef<HTMLDivElement, TableCellProps>(\n  (props, ref) => {\n    const { children, __css, ...rest } = props;\n    const isHeadCell = useTableHeadContext();\n\n    return (\n      <Box\n        ref={ref}\n        px={1}\n        py={3}\n        role={isHeadCell ? 'columnheader' : 'cell'}\n        __css={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          fontWeight: isHeadCell ? 'medium' : undefined,\n          color: 'on.surface',\n          ...__css,\n        }}\n        {...rest}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"file":"TableCell.js"}
+{"version":3,"file":"TableCell.js","names":["forwardRef","Box","useTableHeadContext","TableCell","props","ref","children","__css","rest","isHeadCell","whiteSpace","overflow","textOverflow","fontWeight","undefined","color"],"sources":["../../../src/Table/TableCell.tsx"],"sourcesContent":["import { forwardRef } from 'react';\n\nimport type { BoxProps } from '../Box';\nimport { Box } from '../Box';\nimport { useTableHeadContext } from './context';\n\nexport type TableCellProps = BoxProps;\n\nexport const TableCell = forwardRef<HTMLDivElement, TableCellProps>(\n  (props, ref) => {\n    const { children, __css, ...rest } = props;\n    const isHeadCell = useTableHeadContext();\n\n    return (\n      <Box\n        ref={ref}\n        px={1}\n        py={3}\n        role={isHeadCell ? 'columnheader' : 'cell'}\n        __css={{\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          fontWeight: isHeadCell ? 'medium' : undefined,\n          color: 'on.surface',\n          ...__css,\n        }}\n        {...rest}\n      >\n        {children}\n      </Box>\n    );\n  }\n);\n"],"mappings":";;;AAAA,SAASA,UAAT,QAA2B,OAA3B;AAGA,SAASC,GAAT,QAAoB,QAApB;AACA,SAASC,mBAAT,QAAoC,WAApC;;AAIA,OAAO,IAAMC,SAAS,gBAAGH,UAAU,CACjC,UAACI,KAAD,EAAQC,GAAR,EAAgB;EACd,IAAQC,QAAR,GAAqCF,KAArC,CAAQE,QAAR;EAAA,IAAkBC,KAAlB,GAAqCH,KAArC,CAAkBG,KAAlB;EAAA,IAA4BC,IAA5B,4BAAqCJ,KAArC;;EACA,IAAMK,UAAU,GAAGP,mBAAmB,EAAtC;EAEA,oBACE,KAAC,GAAD;IACE,GAAG,EAAEG,GADP;IAEE,EAAE,EAAE,CAFN;IAGE,EAAE,EAAE,CAHN;IAIE,IAAI,EAAEI,UAAU,GAAG,cAAH,GAAoB,MAJtC;IAKE,KAAK;MACHC,UAAU,EAAE,QADT;MAEHC,QAAQ,EAAE,QAFP;MAGHC,YAAY,EAAE,UAHX;MAIHC,UAAU,EAAEJ,UAAU,GAAG,QAAH,GAAcK,SAJjC;MAKHC,KAAK,EAAE;IALJ,GAMAR,KANA;EALP,GAaMC,IAbN;IAAA,UAeGF;EAfH,GADF;AAmBD,CAxBgC,CAA5B"}

package/build/esm/Table/TableHead.js

@@ -1,23 +1,25 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "__css"];
 import { forwardRef } from 'react';
 import { TableHeadProvider } from './context';
 import { TableBody } from './TableBody';
-import { alpha } from '../color';
+import { mixColor } from '../color';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var TableHead = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
       __css = props.__css,
-      rest = _objectWithoutProperties(props, ["children", "__css"]);
+      rest = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/_jsx(TableBody, _extends({
+  return /*#__PURE__*/_jsx(TableBody, _extends(_extends({
     ref: ref,
     __css: _extends({
       borderBottomStyle: 'solid',
       borderBottomWidth: "0.0625rem",
-      borderBottomColor: alpha('on.surface', 0.12)
+      borderBottomColor: 'surface-variant',
+      background: mixColor('surface', 'primary', 0.05)
     }, __css)
-  }, rest, {
+  }, rest), {}, {
     children: /*#__PURE__*/_jsx(TableHeadProvider, {
       value: true,
       children: children