@bolio-ui/core 1.0.4 → 1.0.6

package/esm/table/stories.js

@@ -1,269 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import React, { useState } from 'react';
-import Table from '.';
-import Code from '../code';
-import Text from '../text';
-import Button from '../button';
-export default {
-  title: 'Data Display/Table',
-  component: Table
-};
-export var Default = function Default() {
-  var data = [{
-    property: 'type',
-    description: 'Content type',
-    type: 'secondary | warning',
-    "default": '-'
-  }, {
-    property: 'Component',
-    description: 'DOM element to use',
-    type: 'string',
-    "default": '-'
-  }, {
-    property: 'bold',
-    description: 'Bold style',
-    type: 'boolean',
-    "default": 'true'
-  }];
-  return /*#__PURE__*/React.createElement(Table, {
-    data: data
-  }, /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "property",
-    label: "property"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "description",
-    label: "description"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "type",
-    label: "type"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "default",
-    label: "default"
-  }));
-};
-export var Compose = function Compose() {
-  var data = [{
-    property: 'type',
-    description: 'Content type',
-    type: 'secondary | warning',
-    "default": '-'
-  }, {
-    property: 'Component',
-    description: 'DOM element to use',
-    type: /*#__PURE__*/React.createElement(Code, null, "string"),
-    "default": '-'
-  }, {
-    property: /*#__PURE__*/React.createElement(Text, {
-      b: true
-    }, "bold"),
-    description: 'Bold style',
-    type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
-    "default": /*#__PURE__*/React.createElement(Code, null, "true")
-  }];
-  return /*#__PURE__*/React.createElement(Table, {
-    data: data
-  }, /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "property",
-    label: "property"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "description",
-    label: "description"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "type",
-    label: "type"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "default",
-    label: "default"
-  }));
-};
-export var Width = function Width() {
-  var data = [{
-    property: 'type',
-    description: 'Content type',
-    type: 'secondary | warning',
-    "default": '-'
-  }, {
-    property: 'Component',
-    description: 'DOM element to use',
-    type: /*#__PURE__*/React.createElement(Code, null, "string"),
-    "default": '-'
-  }, {
-    property: /*#__PURE__*/React.createElement(Text, {
-      b: true
-    }, "bold"),
-    description: 'Bold style',
-    type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
-    "default": /*#__PURE__*/React.createElement(Code, null, "true")
-  }];
-  return /*#__PURE__*/React.createElement(Table, {
-    data: data
-  }, /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "property",
-    label: "property",
-    width: 50
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "description",
-    label: "description"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "type",
-    label: "type"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "default",
-    label: "default"
-  }));
-};
-export var Actions = function Actions() {
-  var dataSource = [{
-    property: 'type',
-    description: 'Content type',
-    operation: ''
-  }, {
-    property: 'Component',
-    description: 'DOM element to use',
-    operation: ''
-  }, {
-    property: /*#__PURE__*/React.createElement(Text, {
-      b: true
-    }, "bold"),
-    description: 'Bold style',
-    operation: ''
-  }];
-
-  var _useState = useState(dataSource),
-      _useState2 = _slicedToArray(_useState, 2),
-      data = _useState2[0],
-      setData = _useState2[1];
-
-  var renderAction = function renderAction(value, rowData, index) {
-    var removeHandler = function removeHandler() {
-      setData(function (last) {
-        return last.filter(function (_, dataIndex) {
-          return dataIndex !== index;
-        });
-      });
-    };
-
-    return /*#__PURE__*/React.createElement(Button, {
-      type: "error",
-      auto: true,
-      scale: 1 / 3,
-      font: "12px",
-      onClick: removeHandler
-    }, "Remove");
-  };
-
-  return /*#__PURE__*/React.createElement(Table, {
-    data: data,
-    onChange: function onChange(value) {
-      return setData(value);
-    }
-  }, /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "property",
-    label: "property"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "description",
-    label: "description"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "operation",
-    label: "operation",
-    width: 150,
-    render: renderAction
-  }));
-};
-export var UpdateRow = function UpdateRow() {
-  var dataSource = [{
-    property: 'type',
-    description: 'Content type',
-    operation: ''
-  }, {
-    property: 'Component',
-    description: 'DOM element to use',
-    operation: ''
-  }, {
-    property: /*#__PURE__*/React.createElement(Text, {
-      b: true
-    }, "bold"),
-    description: 'Bold style',
-    operation: ''
-  }];
-
-  var _React$useState = React.useState(dataSource),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      data = _React$useState2[0],
-      setData = _React$useState2[1];
-
-  var renderAction = function renderAction(value, rowData, rowIndex) {
-    var updateHandler = function updateHandler() {
-      setData(function (last) {
-        return last.map(function (item, dataIndex) {
-          if (dataIndex !== rowIndex) return item;
-          return _extends({}, item, {
-            property: Math.random().toString(16).slice(-5)
-          });
-        });
-      });
-    };
-
-    return /*#__PURE__*/React.createElement(Button, {
-      type: "secondary",
-      auto: true,
-      scale: 1 / 3,
-      font: "12px",
-      onClick: updateHandler
-    }, "Update");
-  };
-
-  return /*#__PURE__*/React.createElement(Table, {
-    data: data,
-    onChange: function onChange(value) {
-      return setData(value);
-    }
-  }, /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "property",
-    label: "property"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "description",
-    label: "description"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "operation",
-    label: "operation",
-    width: 150,
-    render: renderAction
-  }));
-};
-export var CustomHead = function CustomHead() {
-  var data = [{
-    property: 'type',
-    description: 'Content type',
-    type: 'secondary | warning',
-    "default": '-'
-  }, {
-    property: 'Component',
-    description: 'DOM element to use',
-    type: /*#__PURE__*/React.createElement(Code, null, "string"),
-    "default": '-'
-  }, {
-    property: /*#__PURE__*/React.createElement(Text, {
-      b: true
-    }, "bold"),
-    description: 'Bold style',
-    type: /*#__PURE__*/React.createElement(Code, null, "boolean"),
-    "default": /*#__PURE__*/React.createElement(Code, null, "true")
-  }];
-  return /*#__PURE__*/React.createElement(Table, {
-    data: data
-  }, /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "property",
-    label: "property"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "description",
-    label: "description"
-  }), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "type"
-  }, /*#__PURE__*/React.createElement(Code, null, "type")), /*#__PURE__*/React.createElement(Table.Column, {
-    prop: "default"
-  }, /*#__PURE__*/React.createElement(Text, {
-    b: true
-  }, "default")));
-};

package/esm/table/table-body.js

@@ -1,54 +0,0 @@
-import _JSXStyle from "../styled-jsx.es.js";
-import React from 'react';
-import useTheme from '../use-theme';
-import TableCell from './table-cell';
-import { useTableContext } from './table-context';
-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;
-  var theme = useTheme();
-
-  var _useTableContext = useTableContext(),
-      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) {
-    var className = rowClassName(row, index);
-    return /*#__PURE__*/React.createElement("tr", {
-      key: "tbody-row-".concat(index),
-      onClick: function onClick() {
-        return rowClickHandler(row, index);
-      },
-      className: _JSXStyle.dynamic([["3433300570", [theme.palette.accents_1, theme.palette.border, theme.palette.accents_6]]]) + " " + (useClasses({
-        hover: hover
-      }, className) || "")
-    }, /*#__PURE__*/React.createElement(TableCell, {
-      columns: columns,
-      row: row,
-      rowIndex: index,
-      emptyText: emptyText,
-      onCellClick: onCell
-    }));
-  }), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "3433300570",
-    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/table-column.js

@@ -1,41 +0,0 @@
-import { useEffect } from 'react';
-import { useTableContext } from './table-context';
-import useWarning from '../utils/use-warning';
-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;
-
-  var _useTableContext = useTableContext(),
-      updateColumn = _useTableContext.updateColumn;
-
-  var safeProp = "".concat(prop).trim();
-
-  if (!safeProp) {
-    useWarning('The props "prop" is required.', 'Table.Column');
-  }
-
-  useEffect(function () {
-    updateColumn({
-      label: children || label,
-      prop: safeProp,
-      width: width,
-      className: className,
-      renderHandler: renderHandler
-    });
-  }, [children, label, prop, width, className, renderHandler]);
-  return null;
-};
-
-TableColumn.defaultProps = defaultProps;
-TableColumn.displayName = 'BolioUITableColumn';
-export default TableColumn;

package/esm/table/table.js

@@ -1,115 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-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 TableHead from './table-head';
-import TableBody from './table-body';
-import useRealShape from '../utils/use-real-shape';
-import useResize from '../utils/use-resize';
-import { TableContext } from './table-context';
-import useScale, { withScale } from '../use-scale';
-import TableColumn from './table-column';
-var defaultProps = {
-  hover: true,
-  initialData: [],
-  emptyText: '',
-  className: '',
-  rowClassName: function rowClassName() {
-    return '';
-  }
-};
-
-function TableComponent(tableProps) {
-  /* 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);
-  /* 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];
-
-  var _useState = useState([]),
-      _useState2 = _slicedToArray(_useState, 2),
-      columns = _useState2[0],
-      setColumns = _useState2[1];
-
-  var _useState3 = useState(initialData),
-      _useState4 = _slicedToArray(_useState3, 2),
-      data = _useState4[0],
-      setData = _useState4[1];
-
-  var updateColumn = function updateColumn(column) {
-    setColumns(function (last) {
-      var hasColumn = last.find(function (item) {
-        return item.prop === column.prop;
-      });
-      if (!hasColumn) return [].concat(_toConsumableArray(last), [column]);
-      return last.map(function (item) {
-        if (item.prop !== column.prop) return item;
-        return column;
-      });
-    });
-  };
-
-  var contextValue = useMemo(function () {
-    return {
-      columns: columns,
-      updateColumn: updateColumn
-    };
-  }, [columns]);
-  useEffect(function () {
-    if (typeof customData === 'undefined') return;
-    setData(customData);
-  }, [customData]);
-  useResize(function () {
-    return updateShape();
-  });
-  return /*#__PURE__*/React.createElement(TableContext.Provider, {
-    value: contextValue
-  }, /*#__PURE__*/React.createElement("table", _extends({
-    ref: ref
-  }, 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, {
-    columns: columns,
-    width: width
-  }), /*#__PURE__*/React.createElement(TableBody, {
-    data: data,
-    hover: hover,
-    emptyText: emptyText,
-    onRow: onRow,
-    onCell: onCell,
-    rowClassName: rowClassName
-  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "2991182230",
-    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);
-Table.Column = TableColumn;
-export default Table;

package/esm/tabs/index.js

@@ -1,5 +0,0 @@
-import Tabs from './tabs';
-import TabsItem from './tabs-item';
-Tabs.Item = TabsItem;
-Tabs.Tab = TabsItem;
-export default Tabs;

package/esm/tabs/stories.js

@@ -1,92 +0,0 @@
-import Tabs from '.';
-import Text from '../text';
-import Grid from '../grid';
-import { Instagram, Facebook } from '@bolio-ui/icons';
-export default {
-  title: 'Navigation/Tabs',
-  component: Tabs
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
-    initialValue: "1"
-  }, /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Declarative",
-    value: "1"
-  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Component-Based",
-    value: "2"
-  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs."))));
-};
-export var Disabled = function Disabled() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
-    initialValue: "1"
-  }, /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Declarative",
-    value: "1"
-  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes."), /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Component-Based",
-    value: "2",
-    disabled: true
-  }))));
-};
-export var HideDivider = function HideDivider() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
-    initialValue: "react",
-    hideDivider: true
-  }, /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Declarative",
-    value: "react"
-  }, /*#__PURE__*/React.createElement(Text, {
-    mt: 0
-  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.")), /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Component-Based",
-    value: "component-based"
-  }, /*#__PURE__*/React.createElement(Text, {
-    mt: 0
-  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs.")))));
-};
-export var HideBorder = function HideBorder() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
-    initialValue: "react",
-    hideDivider: true,
-    hideBorder: true,
-    leftSpace: 0
-  }, /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Declarative",
-    value: "react"
-  }, /*#__PURE__*/React.createElement(Text, {
-    mt: 0
-  }, "React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.")), /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: "Component-Based",
-    value: "component-based"
-  }, /*#__PURE__*/React.createElement(Text, {
-    mt: 0
-  }, "Build encapsulated components that manage their own state, then compose them to make complex UIs.")))));
-};
-export var WithIcon = function WithIcon() {
-  return /*#__PURE__*/React.createElement(Grid.Container, {
-    gap: 2
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tabs, {
-    initialValue: "1",
-    align: "center",
-    leftSpace: 0
-  }, /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Instagram, null), " Instagram"),
-    value: "1"
-  }, /*#__PURE__*/React.createElement(Text, {
-    mt: 0
-  }, "Hello, this is my profile.")), /*#__PURE__*/React.createElement(Tabs.Item, {
-    label: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Facebook, null), " Facebook"),
-    value: "2"
-  }, /*#__PURE__*/React.createElement(Text, {
-    mt: 0
-  }, "Hi, this is my page.")))));
-};

package/esm/tabs/tabs-item.js

@@ -1,80 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _JSXStyle from "../styled-jsx.es.js";
-import React, { useEffect, useMemo, useRef } from 'react';
-import { useTabsContext } from './tabs-context';
-import useTheme from '../use-theme';
-import useScale, { withScale } from '../use-scale';
-import useClasses from '../use-classes';
-
-function TabsItemComponent(_ref) {
-  var children = _ref.children,
-      value = _ref.value,
-      label = _ref.label,
-      _ref$disabled = _ref.disabled,
-      disabled = _ref$disabled === void 0 ? false : _ref$disabled;
-
-  var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
-  var _useTabsContext = useTabsContext(),
-      register = _useTabsContext.register,
-      currentValue = _useTabsContext.currentValue;
-
-  var isActive = useMemo(function () {
-    return currentValue === value;
-  }, [currentValue, value]);
-
-  var TabsInternalCell = function TabsInternalCell(_ref2) {
-    var _useClasses;
-
-    var onClick = _ref2.onClick,
-        onMouseOver = _ref2.onMouseOver,
-        activeClassName = _ref2.activeClassName,
-        activeStyle = _ref2.activeStyle,
-        hideBorder = _ref2.hideBorder;
-    var theme = useTheme();
-    var ref = useRef(null);
-
-    var _useTabsContext2 = useTabsContext(),
-        currentValue = _useTabsContext2.currentValue;
-
-    var active = currentValue === value;
-    var classes = useClasses('tab', (_useClasses = {
-      active: active,
-      disabled: disabled
-    }, _defineProperty(_useClasses, activeClassName, active), _defineProperty(_useClasses, 'hide-border', hideBorder), _useClasses));
-
-    var clickHandler = function clickHandler() {
-      if (disabled) return;
-      onClick && onClick(value);
-    };
-
-    return /*#__PURE__*/React.createElement("div", {
-      ref: ref,
-      role: "button",
-      key: value,
-      onMouseOver: onMouseOver,
-      onClick: clickHandler,
-      style: active ? activeStyle : {},
-      "data-bolioui": "tab-item",
-      className: _JSXStyle.dynamic([["605786882", [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]]]) + " " + (classes || "")
-    }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "605786882",
-      dynamic: [theme.palette.accents_5, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0.875), SCALES.pr(0.55), SCALES.pb(0.875), SCALES.pl(0.55), SCALES.mt(0), SCALES.mr(0.2), SCALES.mb(0), SCALES.ml(0.2), SCALES.pl(0.28), SCALES.pr(0.28), theme.palette.foreground, theme.palette.foreground, theme.palette.foreground, theme.palette.accents_3, label]
-    }, ".tab.__jsx-style-dynamic-selector{position:relative;box-sizing:border-box;cursor:pointer;outline:0;text-transform:capitalize;white-space:nowrap;background-color:transparent;color:".concat(theme.palette.accents_5, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;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;font-size:").concat(SCALES.font(0.875), ";line-height:normal;width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0.875), " ").concat(SCALES.pr(0.55), " ").concat(SCALES.pb(0.875), " ").concat(SCALES.pl(0.55), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0.2), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0.2), ";z-index:1;--tabs-item-hover-left:calc(-1 * ").concat(SCALES.pl(0.28), ");--tabs-item-hover-right:calc(-1 * ").concat(SCALES.pr(0.28), ");}.tab.__jsx-style-dynamic-selector:hover{color:").concat(theme.palette.foreground, ";}.tab.__jsx-style-dynamic-selector:after{position:absolute;content:'';bottom:-1px;left:0;right:0;width:100%;height:2px;border-radius:4px;-webkit-transform:scaleX(0.75);-ms-transform:scaleX(0.75);transform:scaleX(0.75);background-color:").concat(theme.palette.foreground, ";-webkit-transition:opacity,-webkit-transform 200ms ease-in;-webkit-transition:opacity,transform 200ms ease-in;transition:opacity,transform 200ms ease-in;opacity:0;}.active.__jsx-style-dynamic-selector:after{opacity:1;-webkit-transform:scaleX(1);-ms-transform:scaleX(1);transform:scaleX(1);}.tab.__jsx-style-dynamic-selector svg{max-height:1em;margin-right:5px;}.tab.__jsx-style-dynamic-selector:first-of-type{margin-left:0;}.active.__jsx-style-dynamic-selector{color:").concat(theme.palette.foreground, ";}.disabled.__jsx-style-dynamic-selector{color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}.hide-border.__jsx-style-dynamic-selector:before{display:block;content:").concat(label, ";font-weight:500;height:0;overflow:hidden;visibility:hidden;}.hide-border.__jsx-style-dynamic-selector:after{display:none;}.hide-border.active.__jsx-style-dynamic-selector{font-weight:500;}")));
-  };
-
-  TabsInternalCell.displayName = 'BolioUITabsInternalCell';
-  useEffect(function () {
-    register && register({
-      value: value,
-      cell: TabsInternalCell
-    });
-  }, [value, label, disabled]);
-  return isActive ? /*#__PURE__*/React.createElement(React.Fragment, null, children) : null;
-}
-
-TabsItemComponent.displayName = 'BolioUITabsItem';
-var TabsItem = withScale(TabsItemComponent);
-export default TabsItem;
-/* eslint-enable */