@bolio-ui/core 1.1.7 → 2.0.0-alpha.0

package/esm/Spacer/Spacer.js

@@ -1,28 +1,26 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["inline", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useScale, { withScale } from '../use-scale';
-
-var SpacerComponent = function SpacerComponent(_ref) {
+var SpacerComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$inline = _ref.inline,
-      inline = _ref$inline === void 0 ? false : _ref$inline,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: _JSXStyle.dynamic([["4257820108", [inline ? 'inline-block' : 'block', SCALES.width(1), SCALES.height(1), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/React.createElement("span", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["677603432", [inline ? 'inline-block' : 'block', SCALES.width(1), SCALES.height(1), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "4257820108",
+    id: "677603432",
     dynamic: [inline ? 'inline-block' : 'block', SCALES.width(1), SCALES.height(1), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
   }, "span.__jsx-style-dynamic-selector{display:".concat(inline ? 'inline-block' : 'block', ";width:").concat(SCALES.width(1), ";height:").concat(SCALES.height(1), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
-};
-
+});
 SpacerComponent.displayName = 'BolioUISpacer';
 var Spacer = withScale(SpacerComponent);
 export default Spacer;

package/esm/Spacer/index.d.ts

@@ -1,3 +1,3 @@
-import Spacer from "./Spacer";
-export type { SpacerProps } from "./Spacer";
+import Spacer from './Spacer';
+export type { SpacerProps } from './Spacer';
 export default Spacer;

package/esm/Spacer/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Spacer from './Spacer';
 export default Spacer;

package/esm/Spinner/Spinner.d.ts

@@ -2,7 +2,9 @@ import React from 'react';
 interface Props {
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export declare type SpinnerProps = Props & NativeAttrs;
-declare const Spinner: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type SpinnerProps = Props & NativeAttrs;
+declare const Spinner: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Spinner;

package/esm/Spinner/Spinner.js

@@ -2,12 +2,11 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 var _excluded = ["className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 var getSpans = function getSpans(theme) {
   return _toConsumableArray(new Array(12)).map(function (_, index) {
     return /*#__PURE__*/React.createElement("span", {
@@ -19,19 +18,18 @@ var getSpans = function getSpans(theme) {
     }, "span.__jsx-style-dynamic-selector{background-color:".concat(theme.palette.foreground, ";position:absolute;top:-3.9%;width:24%;height:8%;left:-10%;border-radius:").concat(theme.layout.radius, ";-webkit-animation:spinner-__jsx-style-dynamic-selector 1.2s linear 0s infinite normal none running;animation:spinner-__jsx-style-dynamic-selector 1.2s linear 0s infinite normal none running;}span.__jsx-style-dynamic-selector:nth-child(1){-webkit-animation-delay:-1.2s;animation-delay:-1.2s;-webkit-transform:rotate(0deg) translate(146%);-ms-transform:rotate(0deg) translate(146%);transform:rotate(0deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(2){-webkit-animation-delay:-1.1s;animation-delay:-1.1s;-webkit-transform:rotate(30deg) translate(146%);-ms-transform:rotate(30deg) translate(146%);transform:rotate(30deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(3){-webkit-animation-delay:-1s;animation-delay:-1s;-webkit-transform:rotate(60deg) translate(146%);-ms-transform:rotate(60deg) translate(146%);transform:rotate(60deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(4){-webkit-animation-delay:-0.9s;animation-delay:-0.9s;-webkit-transform:rotate(90deg) translate(146%);-ms-transform:rotate(90deg) translate(146%);transform:rotate(90deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(5){-webkit-animation-delay:-0.8s;animation-delay:-0.8s;-webkit-transform:rotate(120deg) translate(146%);-ms-transform:rotate(120deg) translate(146%);transform:rotate(120deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(6){-webkit-animation-delay:-0.7s;animation-delay:-0.7s;-webkit-transform:rotate(150deg) translate(146%);-ms-transform:rotate(150deg) translate(146%);transform:rotate(150deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(7){-webkit-animation-delay:-0.6s;animation-delay:-0.6s;-webkit-transform:rotate(180deg) translate(146%);-ms-transform:rotate(180deg) translate(146%);transform:rotate(180deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(8){-webkit-animation-delay:-0.5s;animation-delay:-0.5s;-webkit-transform:rotate(210deg) translate(146%);-ms-transform:rotate(210deg) translate(146%);transform:rotate(210deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(9){-webkit-animation-delay:-0.4s;animation-delay:-0.4s;-webkit-transform:rotate(240deg) translate(146%);-ms-transform:rotate(240deg) translate(146%);transform:rotate(240deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(10){-webkit-animation-delay:-0.3s;animation-delay:-0.3s;-webkit-transform:rotate(270deg) translate(146%);-ms-transform:rotate(270deg) translate(146%);transform:rotate(270deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(11){-webkit-animation-delay:-0.2s;animation-delay:-0.2s;-webkit-transform:rotate(300deg) translate(146%);-ms-transform:rotate(300deg) translate(146%);transform:rotate(300deg) translate(146%);}span.__jsx-style-dynamic-selector:nth-child(12){-webkit-animation-delay:-0.1s;animation-delay:-0.1s;-webkit-transform:rotate(330deg) translate(146%);-ms-transform:rotate(330deg) translate(146%);transform:rotate(330deg) translate(146%);}@-webkit-keyframes spinner-__jsx-style-dynamic-selector{0%{opacity:1;}100%{opacity:0.15;}}@keyframes spinner-__jsx-style-dynamic-selector{0%{opacity:1;}100%{opacity:0.15;}}")));
   });
 };
-
-function SpinnerComponent(_ref) {
+var SpinnerComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var classes = useClasses('spinner', className);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref,
+    role: "status"
+  }, props, {
     className: _JSXStyle.dynamic([["104472362", [SCALES.width(1.25), SCALES.height(1.25), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
   }), /*#__PURE__*/React.createElement("div", {
     className: _JSXStyle.dynamic([["104472362", [SCALES.width(1.25), SCALES.height(1.25), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + "container"
@@ -39,8 +37,7 @@ function SpinnerComponent(_ref) {
     id: "104472362",
     dynamic: [SCALES.width(1.25), SCALES.height(1.25), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
   }, ".spinner.__jsx-style-dynamic-selector{display:block;box-sizing:border-box;width:".concat(SCALES.width(1.25), ";height:").concat(SCALES.height(1.25), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.container.__jsx-style-dynamic-selector{width:100%;height:100%;position:relative;left:50%;top:50%;}")));
-}
-
+});
 SpinnerComponent.displayName = 'BolioUISpinner';
 var Spinner = withScale(SpinnerComponent);
 export default Spinner;

package/esm/Spinner/index.d.ts

@@ -1,3 +1,3 @@
-import Spinner from "./Spinner";
-export type { SpinnerProps } from "./Spinner";
+import Spinner from './Spinner';
+export type { SpinnerProps } from './Spinner';
 export default Spinner;

package/esm/Spinner/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Spinner from './Spinner';
 export default Spinner;

package/esm/Table/Table.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { TableDataItemBase, TableOnCellClick, TableOnChange, TableOnRowClick, TableRowClassNameHandler } from "./TableTypes";
-import { ScaleProps } from "../use-scale";
+import { TableDataItemBase, TableOnCellClick, TableOnChange, TableOnRowClick, TableRowClassNameHandler } from './TableTypes';
+import { ScaleProps } from '../use-scale';
+import TableColumn from './TableColumn';
 interface Props<TableDataItem extends TableDataItemBase> {
     data?: Array<TableDataItem>;
     initialData?: Array<TableDataItem>;
@@ -12,26 +13,14 @@ interface Props<TableDataItem extends TableDataItemBase> {
     className?: string;
     rowClassName?: TableRowClassNameHandler<TableDataItem>;
 }
-declare type NativeAttrs = Omit<React.TableHTMLAttributes<any>, keyof Props<any>>;
-export declare type TableProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
-declare function TableComponent<TableDataItem extends TableDataItemBase>(tableProps: React.PropsWithChildren<TableProps<TableDataItem>>): JSX.Element;
-declare namespace TableComponent {
-    var defaultProps: {
-        hover: boolean;
-        initialData: never[];
-        emptyText: string;
-        className: string;
-        rowClassName: () => string;
-    };
-    var displayName: string;
-    var Column: {
-        <TableDataItem extends TableDataItemBase>(columnProps: React.PropsWithChildren<import("./TableColumn").TableColumnProps<TableDataItem>>): null;
-        defaultProps: {
-            className: string;
-            render: () => void;
-        };
-        displayName: string;
-    };
-}
-declare const _default: typeof TableComponent & ScaleProps;
+type NativeAttrs = Omit<React.TableHTMLAttributes<any>, keyof Props<any>>;
+export type TableProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
+type TableType = {
+    <TableDataItem extends TableDataItemBase>(props: React.PropsWithChildren<TableProps<TableDataItem>> & ScaleProps & {
+        ref?: React.Ref<HTMLTableElement>;
+    }): React.JSX.Element;
+    Column: typeof TableColumn;
+    displayName?: string;
+};
+declare const _default: TableType;
 export default _default;

package/esm/Table/Table.js

@@ -3,8 +3,8 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "data", "initialData", "hover", "emptyText", "onRow", "onCell", "onChange", "className", "rowClassName"];
-import _JSXStyle from "../styled-jsx.es.js";
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import _JSXStyle from "styled-jsx/style";
+import React, { useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import TableHead from './TableHead';
 import TableBody from './TableBody';
 import useRealShape from '../utils/use-real-shape';
@@ -21,44 +21,44 @@ var defaultProps = {
     return '';
   }
 };
-
-function TableComponent(tableProps) {
+function TableComponent(tableProps, forwardedRef) {
   /* eslint-disable  @typescript-eslint/no-unused-vars */
-  var _ref = tableProps,
-      children = _ref.children,
-      customData = _ref.data,
-      initialData = _ref.initialData,
-      hover = _ref.hover,
-      emptyText = _ref.emptyText,
-      onRow = _ref.onRow,
-      onCell = _ref.onCell,
-      onChange = _ref.onChange,
-      className = _ref.className,
-      rowClassName = _ref.rowClassName,
-      props = _objectWithoutProperties(_ref, _excluded);
+  var children = tableProps.children,
+    customData = tableProps.data,
+    _tableProps$initialDa = tableProps.initialData,
+    initialData = _tableProps$initialDa === void 0 ? defaultProps.initialData : _tableProps$initialDa,
+    _tableProps$hover = tableProps.hover,
+    hover = _tableProps$hover === void 0 ? defaultProps.hover : _tableProps$hover,
+    _tableProps$emptyText = tableProps.emptyText,
+    emptyText = _tableProps$emptyText === void 0 ? defaultProps.emptyText : _tableProps$emptyText,
+    onRow = tableProps.onRow,
+    onCell = tableProps.onCell,
+    onChange = tableProps.onChange,
+    _tableProps$className = tableProps.className,
+    className = _tableProps$className === void 0 ? defaultProps.className : _tableProps$className,
+    _tableProps$rowClassN = tableProps.rowClassName,
+    rowClassName = _tableProps$rowClassN === void 0 ? defaultProps.rowClassName : _tableProps$rowClassN,
+    props = _objectWithoutProperties(tableProps, _excluded);
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
-  var ref = useRef(null);
-
-  var _useRealShape = useRealShape(ref),
-      _useRealShape2 = _slicedToArray(_useRealShape, 2),
-      width = _useRealShape2[0].width,
-      updateShape = _useRealShape2[1];
-
+    SCALES = _useScale.SCALES;
+  var tableRef = useRef(null);
+  useImperativeHandle(forwardedRef, function () {
+    return tableRef.current;
+  });
+  var _useRealShape = useRealShape(tableRef),
+    _useRealShape2 = _slicedToArray(_useRealShape, 2),
+    width = _useRealShape2[0].width,
+    updateShape = _useRealShape2[1];
   var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      columns = _useState2[0],
-      setColumns = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    columns = _useState2[0],
+    setColumns = _useState2[1];
   var _useState3 = useState(initialData),
-      _useState4 = _slicedToArray(_useState3, 2),
-      data = _useState4[0],
-      setData = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    data = _useState4[0],
+    setData = _useState4[1];
   var updateColumn = function updateColumn(column) {
     setColumns(function (last) {
       var hasColumn = last.find(function (item) {
@@ -71,7 +71,6 @@ function TableComponent(tableProps) {
       });
     });
   };
-
   var contextValue = useMemo(function () {
     return {
       columns: columns,
@@ -88,7 +87,7 @@ function TableComponent(tableProps) {
   return /*#__PURE__*/React.createElement(TableContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("table", _extends({
-    ref: ref
+    ref: tableRef
   }, props, {
     className: _JSXStyle.dynamic([["2991182230", [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
   }), /*#__PURE__*/React.createElement(TableHead, {
@@ -106,10 +105,8 @@ function TableComponent(tableProps) {
     dynamic: [SCALES.font(1), SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
   }, "table.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;--table-font-size:".concat(SCALES.font(1), ";font-size:var(--table-font-size);width:").concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}"))));
 }
-
-TableComponent.defaultProps = defaultProps;
 TableComponent.displayName = 'BolioUITable';
 TableComponent.Column = TableColumn;
-var Table = withScale(TableComponent);
+var Table = withScale(/*#__PURE__*/React.forwardRef(TableComponent));
 Table.Column = TableColumn;
 export default Table;

package/esm/Table/TableBody.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableDataItemBase, TableOnCellClick, TableOnRowClick, TableRowClassNameHandler } from "./TableTypes";
+import { TableDataItemBase, TableOnCellClick, TableOnRowClick, TableRowClassNameHandler } from './TableTypes';
 interface Props<TableDataItem extends TableDataItemBase> {
     hover: boolean;
     emptyText: string;
@@ -12,12 +12,12 @@ interface Props<TableDataItem extends TableDataItemBase> {
 declare const defaultProps: {
     className: string;
 };
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
-export declare type TableBodyProps<TableDataItem> = Props<TableDataItem> & NativeAttrs;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
+export type TableBodyProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
 declare const TableBody: {
     <TableDataItem extends TableDataItemBase>({ data, hover, emptyText, onRow, onCell, rowClassName }: Props<TableDataItem> & NativeAttrs & {
         className: string;
-    }): JSX.Element;
+    }): React.JSX.Element;
     defaultProps: {
         className: string;
     };

package/esm/Table/TableBody.js

@@ -1,4 +1,4 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useTheme from '../use-theme';
 import TableCell from './TableCell';
@@ -7,23 +7,19 @@ import useClasses from '../use-classes';
 var defaultProps = {
   className: ''
 };
-
 var TableBody = function TableBody(_ref) {
   var data = _ref.data,
-      hover = _ref.hover,
-      emptyText = _ref.emptyText,
-      onRow = _ref.onRow,
-      onCell = _ref.onCell,
-      rowClassName = _ref.rowClassName;
+    hover = _ref.hover,
+    emptyText = _ref.emptyText,
+    onRow = _ref.onRow,
+    onCell = _ref.onCell,
+    rowClassName = _ref.rowClassName;
   var theme = useTheme();
-
   var _useTableContext = useTableContext(),
-      columns = _useTableContext.columns;
-
+    columns = _useTableContext.columns;
   var rowClickHandler = function rowClickHandler(row, index) {
     onRow && onRow(row, index);
   };
-
   return /*#__PURE__*/React.createElement("tbody", {
     className: _JSXStyle.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]])
   }, data.map(function (row, index) {
@@ -48,7 +44,6 @@ var TableBody = function TableBody(_ref) {
     dynamic: [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]
   }, "tr.__jsx-style-dynamic-selector{-webkit-transition:background-color 0.25s ease;transition:background-color 0.25s ease;font-size:inherit;}tr.hover.__jsx-style-dynamic-selector:hover{background-color:".concat(theme.palette.accents_1, ";}tr.__jsx-style-dynamic-selector td{padding:0 0.5em;border-bottom:1px solid ").concat(theme.palette.border, ";color:").concat(theme.palette.accents_6, ";font-size:calc(0.875 * var(--table-font-size));text-align:left;}tr.__jsx-style-dynamic-selector .cell{min-height:calc(3.125 * var(--table-font-size));display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-flex-flow:row wrap;-ms-flex-flow:row wrap;flex-flow:row wrap;}")));
 };
-
 TableBody.defaultProps = defaultProps;
 TableBody.displayName = 'BolioUITableBody';
 export default TableBody;

package/esm/Table/TableCell.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableDataItemBase, TableAbstractColumn, TableOnCellClick } from "./TableTypes";
+import { TableDataItemBase, TableAbstractColumn, TableOnCellClick } from './TableTypes';
 interface Props<TableDataItem extends TableDataItemBase> {
     columns: Array<TableAbstractColumn<TableDataItem>>;
     row: TableDataItem;
@@ -7,12 +7,12 @@ interface Props<TableDataItem extends TableDataItemBase> {
     emptyText: string;
     onCellClick?: TableOnCellClick<TableDataItem>;
 }
-export declare type TableCellData<TableDataItem> = {
+export type TableCellData<TableDataItem> = {
     row: number;
     column: number;
     rowValue: TableDataItem;
 };
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
-export declare type TableCellProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
-declare const TableCell: <TableDataItem extends TableDataItemBase>({ columns, row, rowIndex, emptyText, onCellClick }: TableCellProps<TableDataItem>) => JSX.Element;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
+export type TableCellProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
+declare const TableCell: <TableDataItem extends TableDataItemBase>({ columns, row, rowIndex, emptyText, onCellClick }: TableCellProps<TableDataItem>) => React.JSX.Element;
 export default TableCell;

package/esm/Table/TableCell.js

@@ -1,19 +1,17 @@
 import React from 'react';
-
 var TableCell = function TableCell(_ref) {
   var columns = _ref.columns,
-      row = _ref.row,
-      rowIndex = _ref.rowIndex,
-      emptyText = _ref.emptyText,
-      onCellClick = _ref.onCellClick;
-
+    row = _ref.row,
+    rowIndex = _ref.rowIndex,
+    emptyText = _ref.emptyText,
+    onCellClick = _ref.onCellClick;
   /* eslint-disable react/jsx-no-useless-fragment */
   return /*#__PURE__*/React.createElement(React.Fragment, null, columns.map(function (column, index) {
     var currentRowValue = row[column.prop];
     var cellValue = currentRowValue || emptyText;
     var shouldBeRenderElement = column.renderHandler(currentRowValue, row, rowIndex);
     return /*#__PURE__*/React.createElement("td", {
-      key: "row-td-".concat(index, "-").concat(column.prop),
+      key: "row-td-".concat(index, "-").concat(String(column.prop)),
       onClick: function onClick() {
         return onCellClick && onCellClick(currentRowValue, rowIndex, index);
       },
@@ -24,5 +22,4 @@ var TableCell = function TableCell(_ref) {
   }));
   /* eslint-enable */
 };
-
 export default TableCell;

package/esm/Table/TableColumn.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TableColumnRender, TableDataItemBase } from "./TableTypes";
-export declare type TableColumnProps<TableDataItem> = {
+import { TableColumnRender, TableDataItemBase } from './TableTypes';
+export type TableColumnProps<TableDataItem extends TableDataItemBase> = {
     prop: keyof TableDataItem;
     label?: string;
     width?: number;

package/esm/Table/TableColumn.js

@@ -5,25 +5,20 @@ var defaultProps = {
   className: '',
   render: function render() {}
 };
-
 var TableColumn = function TableColumn(columnProps) {
   var _ref = columnProps,
-      children = _ref.children,
-      prop = _ref.prop,
-      label = _ref.label,
-      width = _ref.width,
-      className = _ref.className,
-      renderHandler = _ref.render;
-
+    children = _ref.children,
+    prop = _ref.prop,
+    label = _ref.label,
+    width = _ref.width,
+    className = _ref.className,
+    renderHandler = _ref.render;
   var _useTableContext = useTableContext(),
-      updateColumn = _useTableContext.updateColumn;
-
-  var safeProp = "".concat(prop).trim();
-
+    updateColumn = _useTableContext.updateColumn;
+  var safeProp = String(prop).trim();
   if (!safeProp) {
     useWarning('The props "prop" is required.', 'Table.Column');
   }
-
   useEffect(function () {
     updateColumn({
       label: children || label,
@@ -35,7 +30,6 @@ var TableColumn = function TableColumn(columnProps) {
   }, [children, label, prop, width, className, renderHandler]);
   return null;
 };
-
 TableColumn.defaultProps = defaultProps;
 TableColumn.displayName = 'BolioUITableColumn';
 export default TableColumn;

package/esm/Table/TableContext.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TableAbstractColumn } from "./TableTypes";
-export interface TableConfig<T> {
+import { TableAbstractColumn, TableDataItemBase } from './TableTypes';
+export interface TableConfig<T extends TableDataItemBase> {
     columns: Array<TableAbstractColumn<T>>;
     updateColumn: (column: TableAbstractColumn<T>) => void;
 }
 export declare const TableContext: React.Context<TableConfig<any>>;
-export declare const useTableContext: <T>() => TableConfig<T>;
+export declare const useTableContext: <T extends TableDataItemBase>() => TableConfig<T>;

package/esm/Table/TableHead.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-import { TableAbstractColumn, TableDataItemBase } from "./TableTypes";
+import { TableAbstractColumn, TableDataItemBase } from './TableTypes';
 interface Props<TableDataItem extends TableDataItemBase> {
     width: number;
     columns: Array<TableAbstractColumn<TableDataItem>>;
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
-export declare type TableHeadProps<TableDataItem> = Props<TableDataItem> & NativeAttrs;
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props<any>>;
+export type TableHeadProps<TableDataItem extends TableDataItemBase> = Props<TableDataItem> & NativeAttrs;
 declare const TableHead: {
-    <TableDataItem extends TableDataItemBase>(props: TableHeadProps<TableDataItem>): JSX.Element;
+    <TableDataItem extends TableDataItemBase>(props: TableHeadProps<TableDataItem>): React.JSX.Element;
     defaultProps: {
         className: string;
     };

package/esm/Table/TableHead.js

@@ -1,10 +1,9 @@
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 var defaultProps = {
   className: ''
 };
-
 var makeColgroup = function makeColgroup(width, columns) {
   var unsetWidthCount = columns.filter(function (c) {
     return !c.width;
@@ -21,12 +20,11 @@ var makeColgroup = function makeColgroup(width, columns) {
     });
   }));
 };
-
 var TableHead = function TableHead(props) {
   var theme = useTheme();
   var _ref = props,
-      columns = _ref.columns,
-      width = _ref.width;
+    columns = _ref.columns,
+    width = _ref.width;
   var isScalableWidth = useMemo(function () {
     return columns.find(function (item) {
       return !!item.width;
@@ -42,7 +40,7 @@ var TableHead = function TableHead(props) {
     className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]])
   }, columns.map(function (column, index) {
     return /*#__PURE__*/React.createElement("th", {
-      key: "table-th-".concat(column.prop, "-").concat(index),
+      key: "table-th-".concat(String(column.prop), "-").concat(index),
       className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + (column.className || "")
     }, /*#__PURE__*/React.createElement("div", {
       className: _JSXStyle.dynamic([["134865897", [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]]]) + " " + "thead-box"
@@ -52,7 +50,6 @@ var TableHead = function TableHead(props) {
     dynamic: [theme.palette.accents_5, theme.palette.accents_1, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.border, theme.palette.border, theme.palette.border, theme.layout.radius, theme.layout.radius]
   }, "thead.__jsx-style-dynamic-selector{border-collapse:separate;border-spacing:0;font-size:inherit;}th.__jsx-style-dynamic-selector{padding:0 0.5em;font-size:calc(0.75 * var(--table-font-size));font-weight:normal;text-align:left;-webkit-letter-spacing:0;-moz-letter-spacing:0;-ms-letter-spacing:0;letter-spacing:0;vertical-align:middle;min-height:calc(2.5 * var(--table-font-size));color:".concat(theme.palette.accents_5, ";background:").concat(theme.palette.accents_1, ";border-bottom:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-radius:0;}th.__jsx-style-dynamic-selector:nth-child(1){border-bottom:1px solid ").concat(theme.palette.border, ";border-left:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-left-radius:").concat(theme.layout.radius, ";border-bottom-left-radius:").concat(theme.layout.radius, ";}th.__jsx-style-dynamic-selector:last-child{border-bottom:1px solid ").concat(theme.palette.border, ";border-right:1px solid ").concat(theme.palette.border, ";border-top:1px solid ").concat(theme.palette.border, ";border-top-right-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";}.thead-box.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-align:center;min-height:calc(2.5 * var(--table-font-size));text-transform:uppercase;}")));
 };
-
 TableHead.defaultProps = defaultProps;
 TableHead.displayName = 'BolioUITableHead';
 export default TableHead;

package/esm/Table/TableTypes.d.ts

@@ -1,14 +1,14 @@
 import React from 'react';
-export declare type TableDataItemBase = Record<string, any>;
-export declare type TableColumnRender<Item extends TableDataItemBase> = (value: Item[keyof Item], rowData: Item, rowIndex: number) => JSX.Element | void;
-export declare type TableAbstractColumn<TableDataItem> = {
+export type TableDataItemBase = Record<string, any>;
+export type TableColumnRender<Item extends TableDataItemBase> = (value: Item[keyof Item], rowData: Item, rowIndex: number) => React.JSX.Element | void;
+export type TableAbstractColumn<TableDataItem extends TableDataItemBase> = {
     prop: keyof TableDataItem;
     label: React.ReactNode | string;
     className: string;
     width?: number;
     renderHandler: TableColumnRender<TableDataItem>;
 };
-export declare type TableOnRowClick<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => void;
-export declare type TableOnCellClick<TableDataItem> = (cellValue: TableDataItem[keyof TableDataItem], rowIndex: number, colunmIndex: number) => void;
-export declare type TableOnChange<TableDataItem> = (data: Array<TableDataItem>) => void;
-export declare type TableRowClassNameHandler<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => string;
+export type TableOnRowClick<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => void;
+export type TableOnCellClick<TableDataItem> = (cellValue: TableDataItem[keyof TableDataItem], rowIndex: number, colunmIndex: number) => void;
+export type TableOnChange<TableDataItem> = (data: Array<TableDataItem>) => void;
+export type TableRowClassNameHandler<TableDataItem> = (rowData: TableDataItem, rowIndex: number) => string;

package/esm/Table/index.d.ts

@@ -1,5 +1,5 @@
-import Table from "./Table";
-export type { TableProps } from "./Table";
-export type { TableColumnProps } from "./TableColumn";
-export type { TableOnCellClick, TableAbstractColumn, TableOnChange, TableOnRowClick, TableRowClassNameHandler, TableDataItemBase, TableColumnRender } from "./TableTypes";
+import Table from './Table';
+export type { TableProps } from './Table';
+export type { TableColumnProps } from './TableColumn';
+export type { TableOnCellClick, TableAbstractColumn, TableOnChange, TableOnRowClick, TableRowClassNameHandler, TableDataItemBase, TableColumnRender } from './TableTypes';
 export default Table;

package/esm/Table/index.js

@@ -1,2 +1,3 @@
+'use client';
 import Table from './Table';
 export default Table;

package/esm/Tabs/Tabs.d.ts

@@ -14,7 +14,9 @@ interface Props {
     activeClassName?: string;
     activeStyles?: CSSProperties;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
-export declare type TabsProps = Props & NativeAttrs;
-declare const Tabs: React.ForwardRefExoticComponent<Props & NativeAttrs & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export type TabsProps = Props & NativeAttrs;
+declare const Tabs: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Tabs;