@bolio-ui/core 1.0.1 → 1.0.3

package/esm/avatar/avatar.js

@@ -83,7 +83,7 @@ function AvatarComponent(_ref) {
     };
   }, [loading, showAnimation]);
   return /*#__PURE__*/React.createElement("span", {
-    className: _JSXStyle.dynamic([["1130296330", [radius, theme.palette.accents_1, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
+    className: _JSXStyle.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (classes || "")
   }, !showText && /*#__PURE__*/React.createElement(React.Fragment, null, showSkeleton && showAnimation && /*#__PURE__*/React.createElement(AvatarSkeleton, {
     opacity: loading ? 1 : 0
   }), /*#__PURE__*/React.createElement("img", _extends({
@@ -93,13 +93,13 @@ function AvatarComponent(_ref) {
     onLoad: imageLoaded,
     draggable: false
   }, props, {
-    className: _JSXStyle.dynamic([["1130296330", [radius, theme.palette.accents_1, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
+    className: _JSXStyle.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-img")
   }))), showText && /*#__PURE__*/React.createElement("span", _extends({}, props, {
-    className: _JSXStyle.dynamic([["1130296330", [radius, theme.palette.accents_1, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
+    className: _JSXStyle.dynamic([["2739790524", [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]]]) + " " + (props && props.className != null && props.className || "avatar-text")
   }), safeText(text)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "1130296330",
-    dynamic: [radius, theme.palette.accents_1, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]
-  }, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:".concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.accents_1, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";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(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
+    id: "2739790524",
+    dynamic: [radius, theme.palette.accents_2, SCALES.width(1.75) || SCALES.height(1.75), SCALES.height(1.75) || SCALES.width(1.75), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), marginLeft, radius, SCALES.font(1)]
+  }, ".avatar.__jsx-style-dynamic-selector{display:inline-block;position:relative;overflow:hidden;border-radius:".concat(radius, ";vertical-align:top;background-color:").concat(theme.palette.accents_2, ";box-sizing:border-box;width:").concat(SCALES.width(1.75) || SCALES.height(1.75), ";height:").concat(SCALES.height(1.75) || SCALES.width(1.75), ";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(marginLeft, ";}.avatar-img.__jsx-style-dynamic-selector{display:inline-block;object-fit:cover;width:100%;height:100%;border-radius:").concat(radius, ";-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-align:center;}.avatar-text.__jsx-style-dynamic-selector{position:absolute;left:50%;top:50%;font-size:").concat(SCALES.font(1), ";text-align:center;-webkit-transform:translate(-50%,-50%) scale(0.65);-ms-transform:translate(-50%,-50%) scale(0.65);transform:translate(-50%,-50%) scale(0.65);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}")));
 }
 
 AvatarComponent.displayName = 'BolioUIAvatar';

package/esm/button/stories.js

@@ -61,7 +61,7 @@ export var TypeColors = function TypeColors() {
   }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
     auto: true,
     type: "info"
-  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
+  }, "Info")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Button, {
     auto: true,
     type: "abort"
   }, "Abort")));

package/esm/card/styles.js

@@ -3,7 +3,7 @@ export var getStyles = function getStyles(type, palette, isShadow) {
   var colors = {
     "default": {
       color: palette.foreground,
-      bgColor: palette.accents_1
+      bgColor: palette.accents_2
     },
     dark: {
       color: palette.background,

package/esm/index.js

@@ -42,6 +42,7 @@ export { default as Slider } from './slider';
 export { default as Snippet } from './snippet';
 export { default as Spacer } from './spacer';
 export { default as Spinner } from './spinner';
+export { default as Table } from './table';
 export { default as Tabs } from './tabs';
 export { default as Tag } from './tag';
 export { default as Text } from './text';

package/esm/input/input.js

@@ -137,11 +137,11 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var inputProps = _extends({}, props, controlledValue);
 
   return /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
+    className: _JSXStyle.dynamic([["363116299", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + "with-label"
   }, children && /*#__PURE__*/React.createElement(InputBlockLabel, null, children), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
+    className: _JSXStyle.dynamic([["363116299", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-container', className) || "")
   }, label && /*#__PURE__*/React.createElement(InputLabel, null, label), /*#__PURE__*/React.createElement("div", {
-    className: _JSXStyle.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
+    className: _JSXStyle.dynamic([["363116299", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (useClasses('input-wrapper', {
       hover: hover,
       disabled: disabled
     }, labelClasses) || "")
@@ -158,7 +158,7 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChange: changeHandler,
     autoComplete: autoComplete
   }, inputProps, {
-    className: _JSXStyle.dynamic([["68057575", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
+    className: _JSXStyle.dynamic([["363116299", [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]]]) + " " + (inputProps && inputProps.className != null && inputProps.className || useClasses({
       disabled: disabled
     }, iconClasses) || "")
   })), clearable && /*#__PURE__*/React.createElement(InputClearIcon, {
@@ -170,9 +170,9 @@ var InputComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, iconProps))), labelRight && /*#__PURE__*/React.createElement(InputLabel, {
     isRight: true
   }, labelRight)), /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "68057575",
-    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_3, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
-  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";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), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.accents_2, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_3, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
+    id: "363116299",
+    dynamic: [SCALES.height(2.25), SCALES.font(0.875), SCALES.width(1, 'initial'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.width(1, 'initial'), rounded ? '25px' : theme.layout.radius, backgroundColor ? backgroundColor : theme.palette.accents_2, theme.palette.accents_4, hoverBorder, SCALES.font(0.875), color, theme.palette.accents_3, theme.palette.background, color]
+  }, ".with-label.__jsx-style-dynamic-selector{display:inline-block;box-sizing:border-box;-webkit-box-align:center;--input-height:".concat(SCALES.height(2.25), ";font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'initial'), ";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), ";}.input-container.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:").concat(SCALES.width(1, 'initial'), ";height:var(--input-height);}.input-wrapper.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;-webkit-flex:1;-ms-flex:1;flex:1;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-radius:").concat(rounded ? '25px' : theme.layout.radius, ";-webkit-transition:border 0.2s ease 0s,color 0.2s ease 0s;transition:border 0.2s ease 0s,color 0.2s ease 0s;background:").concat(backgroundColor ? backgroundColor : theme.palette.accents_2, ";}.input-wrapper.left-label.__jsx-style-dynamic-selector{border-top-left-radius:0;border-bottom-left-radius:0;}.input-wrapper.right-label.__jsx-style-dynamic-selector{border-top-right-radius:0;border-bottom-right-radius:0;}.input-wrapper.disabled.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_4, ";cursor:not-allowed;}input.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}.input-wrapper.hover.__jsx-style-dynamic-selector{border-color:").concat(hoverBorder, ";}input.__jsx-style-dynamic-selector{margin:0.25em 0.625em;padding:0 4px;box-shadow:none;font-size:").concat(SCALES.font(0.875), ";background-color:transparent;border:none;color:").concat(color, ";outline:none;border-radius:0;width:100%;min-width:0;-webkit-appearance:none;}input.left-icon.__jsx-style-dynamic-selector{margin-left:0;}input.right-icon.__jsx-style-dynamic-selector{margin-right:0;}.__jsx-style-dynamic-selector::-webkit-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::placeholder,.__jsx-style-dynamic-selector::-moz-placeholder,.__jsx-style-dynamic-selector:-ms-input-placeholder,.__jsx-style-dynamic-selector::-webkit-input-placeholder{color:").concat(theme.palette.accents_3, ";}.__jsx-style-dynamic-selector::-ms-reveal{display:none !important;}input.__jsx-style-dynamic-selector:-webkit-autofill,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:hover,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:active,input.__jsx-style-dynamic-selector:-webkit-autofill.__jsx-style-dynamic-selector:focus{-webkit-box-shadow:0 0 0 30px ").concat(theme.palette.background, " inset !important;-webkit-text-fill-color:").concat(color, " !important;}")));
 });
 InputComponent.defaultProps = defaultProps;
 InputComponent.displayName = 'BolioUIInput';

package/esm/table/index.js

@@ -0,0 +1,2 @@
+import Table from './table';
+export default Table;

package/esm/table/stories.js

@@ -0,0 +1,269 @@
+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

@@ -0,0 +1,54 @@
+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-cell.js

@@ -0,0 +1,28 @@
+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;
+
+  /* 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),
+      onClick: function onClick() {
+        return onCellClick && onCellClick(currentRowValue, rowIndex, index);
+      },
+      className: column.className
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "cell"
+    }, shouldBeRenderElement ? shouldBeRenderElement : cellValue));
+  }));
+  /* eslint-enable */
+};
+
+export default TableCell;

package/esm/table/table-column.js

@@ -0,0 +1,41 @@
+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-context.js

@@ -0,0 +1,9 @@
+import React from 'react';
+var defaultContext = {
+  columns: [],
+  updateColumn: function updateColumn() {}
+};
+export var TableContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useTableContext = function useTableContext() {
+  return React.useContext(TableContext);
+};

package/esm/table/table-head.js

@@ -0,0 +1,58 @@
+import _JSXStyle from "../styled-jsx.es.js";
+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;
+  }).length;
+  var customWidthTotal = columns.reduce(function (pre, current) {
+    return current.width ? pre + current.width : pre;
+  }, 0);
+  var averageWidth = (width - customWidthTotal) / unsetWidthCount;
+  if (averageWidth <= 0) return /*#__PURE__*/React.createElement("colgroup", null);
+  return /*#__PURE__*/React.createElement("colgroup", null, columns.map(function (column, index) {
+    return /*#__PURE__*/React.createElement("col", {
+      key: "colgroup-".concat(index),
+      width: column.width || averageWidth
+    });
+  }));
+};
+
+var TableHead = function TableHead(props) {
+  var theme = useTheme();
+  var _ref = props,
+      columns = _ref.columns,
+      width = _ref.width;
+  var isScalableWidth = useMemo(function () {
+    return columns.find(function (item) {
+      return !!item.width;
+    });
+  }, [columns]);
+  var colgroup = useMemo(function () {
+    if (!isScalableWidth) return /*#__PURE__*/React.createElement("colgroup", null);
+    return makeColgroup(width, columns);
+  }, [isScalableWidth, width]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, colgroup, /*#__PURE__*/React.createElement("thead", {
+    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]]])
+  }, /*#__PURE__*/React.createElement("tr", {
+    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),
+      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"
+    }, column.label));
+  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "134865897",
+    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/table-types.js

@@ -0,0 +1 @@
+export {};