@bolio-ui/core 1.0.0

package/esm/themes/themes.js

@@ -0,0 +1,89 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import lightTheme from './presets/default';
+import darkTheme from './presets/dark';
+export var isObject = function isObject(target) {
+  return target && _typeof(target) === 'object';
+};
+export var deepDuplicable = function deepDuplicable(source, target) {
+  if (!isObject(target) || !isObject(source)) return source;
+  var sourceKeys = Object.keys(source);
+  var result = {};
+
+  for (var _i = 0, _sourceKeys = sourceKeys; _i < _sourceKeys.length; _i++) {
+    var key = _sourceKeys[_i];
+    var sourceValue = source[key];
+    var targetValue = target[key];
+
+    if (Array.isArray(sourceValue) && Array.isArray(targetValue)) {
+      result[key] = targetValue.concat(sourceValue);
+    } else if (isObject(sourceValue) && isObject(targetValue)) {
+      result[key] = deepDuplicable(sourceValue, _extends({}, targetValue));
+    } else if (targetValue) {
+      result[key] = targetValue;
+    } else {
+      result[key] = sourceValue;
+    }
+  }
+
+  return result;
+};
+
+var getPresets = function getPresets() {
+  return [lightTheme, darkTheme];
+};
+
+var getPresetStaticTheme = function getPresetStaticTheme() {
+  return lightTheme;
+};
+
+var isAvailableThemeType = function isAvailableThemeType(type) {
+  if (!type) return false;
+  var presetThemes = getPresets();
+  var hasType = presetThemes.find(function (theme) {
+    return theme.type === type;
+  });
+  return !hasType;
+};
+
+var isPresetTheme = function isPresetTheme(themeOrType) {
+  if (!themeOrType) return false;
+  var isType = typeof themeOrType === 'string';
+  var type = isType ? themeOrType : themeOrType.type;
+  return !isAvailableThemeType(type);
+};
+
+var hasUserCustomTheme = function hasUserCustomTheme() {
+  var themes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return !!themes.find(function (item) {
+    return isAvailableThemeType(item.type);
+  });
+};
+
+var create = function create(base, custom) {
+  if (!isAvailableThemeType(custom.type)) {
+    throw new Error('Duplicate or unavailable theme type');
+  }
+
+  return deepDuplicable(base, custom);
+};
+
+var createFromDark = function createFromDark(custom) {
+  return create(darkTheme, custom);
+};
+
+var createFromLight = function createFromLight(custom) {
+  return create(lightTheme, custom);
+};
+
+var Themes = {
+  isPresetTheme: isPresetTheme,
+  isAvailableThemeType: isAvailableThemeType,
+  hasUserCustomTheme: hasUserCustomTheme,
+  getPresets: getPresets,
+  getPresetStaticTheme: getPresetStaticTheme,
+  create: create,
+  createFromDark: createFromDark,
+  createFromLight: createFromLight
+};
+export default Themes;

package/esm/toggle/index.js

@@ -0,0 +1,2 @@
+import Toggle from './toggle';
+export default Toggle;

package/esm/toggle/stories.js

@@ -0,0 +1,55 @@
+import Toggle from '.';
+import Grid from '../grid';
+export default {
+  title: 'Data Entry/Toggle',
+  component: Toggle
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, null)), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    initialChecked: true
+  })));
+};
+export var Type = function Type() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    scale: 2,
+    initialChecked: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    type: "primary",
+    scale: 2,
+    initialChecked: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    type: "secondary",
+    scale: 2,
+    initialChecked: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    type: "success",
+    scale: 2,
+    initialChecked: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    type: "warning",
+    scale: 2,
+    initialChecked: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    type: "error",
+    scale: 2,
+    initialChecked: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    type: "info",
+    scale: 2,
+    initialChecked: true
+  })));
+};
+export var Disabled = function Disabled() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    disabled: true
+  })), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Toggle, {
+    initialChecked: true,
+    disabled: true
+  })));
+};

package/esm/toggle/styles.js

@@ -0,0 +1,27 @@
+export var getColors = function getColors(palette, status) {
+  var colors = {
+    "default": {
+      bg: palette.success
+    },
+    primary: {
+      bg: palette.primary
+    },
+    secondary: {
+      bg: palette.secondary
+    },
+    success: {
+      bg: palette.success
+    },
+    warning: {
+      bg: palette.warning
+    },
+    error: {
+      bg: palette.error
+    },
+    info: {
+      bg: palette.info
+    }
+  };
+  if (!status) return colors["default"];
+  return colors[status];
+};

package/esm/toggle/toggle.js

@@ -0,0 +1,82 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["initialChecked", "checked", "disabled", "onChange", "type", "className"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import { getColors } from './styles';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+
+function ToggleComponent(_ref) {
+  var _ref$initialChecked = _ref.initialChecked,
+      initialChecked = _ref$initialChecked === void 0 ? false : _ref$initialChecked,
+      checked = _ref.checked,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      onChange = _ref.onChange,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'default' : _ref$type,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var theme = useTheme();
+
+  var _useScale = useScale(),
+      SCALES = _useScale.SCALES;
+
+  var _useState = useState(initialChecked),
+      _useState2 = _slicedToArray(_useState, 2),
+      selfChecked = _useState2[0],
+      setSelfChecked = _useState2[1];
+
+  var classes = useClasses('toggle', {
+    checked: selfChecked,
+    disabled: disabled
+  });
+  var changeHandle = useCallback(function (ev) {
+    if (disabled) return;
+    var selfEvent = {
+      target: {
+        checked: !selfChecked
+      },
+      stopPropagation: ev.stopPropagation,
+      preventDefault: ev.preventDefault,
+      nativeEvent: ev
+    };
+    setSelfChecked(!selfChecked);
+    onChange && onChange(selfEvent);
+  }, [disabled, selfChecked, onChange]);
+
+  var _useMemo = useMemo(function () {
+    return getColors(theme.palette, type);
+  }, [theme.palette, type]),
+      bg = _useMemo.bg;
+
+  useEffect(function () {
+    if (checked === undefined) return;
+    setSelfChecked(checked);
+  }, [checked]);
+  return /*#__PURE__*/React.createElement("label", _extends({}, props, {
+    className: _JSXStyle.dynamic([["3938822023", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    disabled: disabled,
+    checked: selfChecked,
+    onChange: changeHandle,
+    className: _JSXStyle.dynamic([["3938822023", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3938822023", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + (classes || "")
+  }, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["3938822023", [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]]]) + " " + "inner"
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3938822023",
+    dynamic: [disabled ? 'not-allowed' : 'pointer', SCALES.font(1), SCALES.height(0.875), SCALES.width(1.75), SCALES.pt(0.1875), SCALES.pr(0), SCALES.pb(0.1875), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), theme.palette.accents_2, theme.palette.background, theme.palette.accents_2, theme.palette.accents_1, theme.palette.accents_2, theme.palette.accents_4, theme.palette.accents_4, bg]
+  }, "label.__jsx-style-dynamic-selector{-webkit-tap-highlight-color:transparent;display:inline-block;vertical-align:middle;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;cursor:".concat(disabled ? 'not-allowed' : 'pointer', ";--toggle-font-size:").concat(SCALES.font(1), ";--toggle-height:").concat(SCALES.height(0.875), ";width:").concat(SCALES.width(1.75), ";height:var(--toggle-height);padding:").concat(SCALES.pt(0.1875), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0.1875), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}input.__jsx-style-dynamic-selector{overflow:hidden;visibility:hidden;height:0;opacity:0;width:0;position:absolute;background-color:transparent;z-index:-1;}.toggle.__jsx-style-dynamic-selector{height:var(--toggle-height);width:100%;border-radius:var(--toggle-height);-webkit-transition-delay:0.12s;transition-delay:0.12s;-webkit-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-property:background,border;transition-property:background,border;-webkit-transition-timing-function:cubic-bezier(0,0,0.2,1);transition-timing-function:cubic-bezier(0,0,0.2,1);position:relative;border:1px solid transparent;background-color:").concat(theme.palette.accents_2, ";padding:0;}.inner.__jsx-style-dynamic-selector{width:calc(var(--toggle-height) - 2px);height:calc(var(--toggle-height) - 2px);position:absolute;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);left:1px;box-shadow:rgba(0,0,0,0.2) 0 1px 2px 0, rgba(0,0,0,0.1) 0 1px 3px 0;-webkit-transition:left 280ms cubic-bezier(0,0,0.2,1);transition:left 280ms cubic-bezier(0,0,0.2,1);border-radius:50%;background-color:").concat(theme.palette.background, ";}.disabled.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_2, ";background-color:").concat(theme.palette.accents_1, ";}.disabled.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{background-color:").concat(theme.palette.accents_2, ";}.disabled.checked.__jsx-style-dynamic-selector{border-color:").concat(theme.palette.accents_4, ";background-color:").concat(theme.palette.accents_4, ";}.checked.__jsx-style-dynamic-selector{background-color:").concat(bg, ";}.checked.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{left:calc(100% - (var(--toggle-height) - 2px));box-shadow:none;}")));
+}
+
+ToggleComponent.displayName = 'BolioUIToggle';
+var Toggle = withScale(ToggleComponent);
+export default Toggle;

package/esm/tooltip/helper.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+var defaultRect = {
+  top: -1000,
+  left: -1000,
+  right: -1000,
+  bottom: -1000,
+  width: 0,
+  height: 0
+};
+export var getRect = function getRect(ref) {
+  if (!ref || !ref.current) return defaultRect;
+  var rect = ref.current.getBoundingClientRect();
+  return _extends({}, rect, {
+    width: rect.width || rect.right - rect.left,
+    height: rect.height || rect.bottom - rect.top,
+    top: rect.top + document.documentElement.scrollTop,
+    bottom: rect.bottom + document.documentElement.scrollTop,
+    left: rect.left + document.documentElement.scrollLeft,
+    right: rect.right + document.documentElement.scrollLeft
+  });
+};

package/esm/tooltip/index.js

@@ -0,0 +1,2 @@
+import Tooltip from './tooltip';
+export default Tooltip;

package/esm/tooltip/placement.js

@@ -0,0 +1,160 @@
+export var defaultTooltipPosition = {
+  top: '-1000px',
+  left: '-1000px',
+  transform: 'none'
+};
+export var getPosition = function getPosition(placement, rect, offset) {
+  var positions = {
+    top: {
+      top: "".concat(rect.top - offset, "px"),
+      left: "".concat(rect.left + rect.width / 2, "px"),
+      transform: 'translate(-50%, -100%)'
+    },
+    topStart: {
+      top: "".concat(rect.top - offset, "px"),
+      left: "".concat(rect.left, "px"),
+      transform: 'translate(0, -100%)'
+    },
+    topEnd: {
+      top: "".concat(rect.top - offset, "px"),
+      left: "".concat(rect.left + rect.width, "px"),
+      transform: 'translate(-100%, -100%)'
+    },
+    bottom: {
+      top: "".concat(rect.bottom + offset, "px"),
+      left: "".concat(rect.left + rect.width / 2, "px"),
+      transform: 'translate(-50%, 0)'
+    },
+    bottomStart: {
+      top: "".concat(rect.bottom + offset, "px"),
+      left: "".concat(rect.left, "px"),
+      transform: 'translate(0, 0)'
+    },
+    bottomEnd: {
+      top: "".concat(rect.bottom + offset, "px"),
+      left: "".concat(rect.left + rect.width, "px"),
+      transform: 'translate(-100%, 0)'
+    },
+    left: {
+      top: "".concat(rect.top + rect.height / 2, "px"),
+      left: "".concat(rect.left - offset, "px"),
+      transform: 'translate(-100%, -50%)'
+    },
+    leftStart: {
+      top: "".concat(rect.top, "px"),
+      left: "".concat(rect.left - offset, "px"),
+      transform: 'translate(-100%, 0)'
+    },
+    leftEnd: {
+      top: "".concat(rect.top + rect.height, "px"),
+      left: "".concat(rect.left - offset, "px"),
+      transform: 'translate(-100%, -100%)'
+    },
+    right: {
+      top: "".concat(rect.top + rect.height / 2, "px"),
+      left: "".concat(rect.right + offset, "px"),
+      transform: 'translate(0, -50%)'
+    },
+    rightStart: {
+      top: "".concat(rect.top, "px"),
+      left: "".concat(rect.right + offset, "px"),
+      transform: 'translate(0, 0)'
+    },
+    rightEnd: {
+      top: "".concat(rect.top + rect.height, "px"),
+      left: "".concat(rect.right + offset, "px"),
+      transform: 'translate(0, -100%)'
+    }
+  };
+  return positions[placement] || positions.top;
+};
+export var getIconPosition = function getIconPosition(placement, offsetX, offsetY) {
+  var offsetAbsolute = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '3px';
+  var positions = {
+    top: {
+      top: 'auto',
+      right: 'auto',
+      left: '50%',
+      bottom: "".concat(offsetAbsolute),
+      transform: 'translate(-50%, 100%) rotate(-90deg)'
+    },
+    topStart: {
+      top: 'auto',
+      right: 'auto',
+      left: "".concat(offsetX),
+      bottom: "".concat(offsetAbsolute),
+      transform: 'translate(0, 100%) rotate(-90deg)'
+    },
+    topEnd: {
+      top: 'auto',
+      right: "".concat(offsetX),
+      left: 'auto',
+      bottom: "".concat(offsetAbsolute),
+      transform: 'translate(0, 100%) rotate(-90deg)'
+    },
+    bottom: {
+      top: "".concat(offsetAbsolute),
+      right: 'auto',
+      left: '50%',
+      bottom: 'auto',
+      transform: 'translate(-50%, -100%) rotate(90deg)'
+    },
+    bottomStart: {
+      top: "".concat(offsetAbsolute),
+      right: 'auto',
+      left: "".concat(offsetX),
+      bottom: 'auto',
+      transform: 'translate(0, -100%) rotate(90deg)'
+    },
+    bottomEnd: {
+      top: "".concat(offsetAbsolute),
+      right: "".concat(offsetX),
+      left: 'auto',
+      bottom: 'auto',
+      transform: 'translate(0, -100%) rotate(90deg)'
+    },
+    left: {
+      top: '50%',
+      right: '0',
+      left: 'auto',
+      bottom: 'auto',
+      transform: 'translate(100%, -50%) rotate(180deg)'
+    },
+    leftStart: {
+      top: "".concat(offsetY),
+      right: '0',
+      left: 'auto',
+      bottom: 'auto',
+      transform: 'translate(100%, -50%) rotate(180deg)'
+    },
+    leftEnd: {
+      top: 'auto',
+      right: '0',
+      left: 'auto',
+      bottom: "".concat(offsetY),
+      transform: 'translate(100%, 50%) rotate(180deg)'
+    },
+    right: {
+      top: '50%',
+      right: 'auto',
+      left: '0',
+      bottom: 'auto',
+      transform: 'translate(-100%, -50%) rotate(0deg)'
+    },
+    rightStart: {
+      top: "".concat(offsetY),
+      right: 'auto',
+      left: '0',
+      bottom: 'auto',
+      transform: 'translate(-100%, -50%) rotate(0deg)'
+    },
+    rightEnd: {
+      top: 'auto',
+      right: 'auto',
+      left: '0',
+      bottom: "".concat(offsetY),
+      transform: 'translate(-100%, 50%) rotate(0deg)'
+    }
+  };
+  return positions[placement] || positions.top;
+};

package/esm/tooltip/stories.js

@@ -0,0 +1,183 @@
+import Tooltip from '.';
+import Grid from '../grid';
+import Button from '../button';
+import Link from '../link';
+import Code from '../code';
+import Text from '../text';
+import Badge from '../badge';
+export default {
+  title: 'Data Display/Tooltip',
+  component: Tooltip
+};
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: 'Push to Git and your website is live.'
+  }, "Tooltip")));
+};
+export var Trigger = function Trigger() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: 'Push to Git and your website is live.',
+    trigger: "click",
+    type: "dark"
+  }, "Click me")));
+};
+export var WithComponents = function WithComponents() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: 'Push to Git and your website is live.',
+    type: "dark"
+  }, /*#__PURE__*/React.createElement(Button, {
+    auto: true,
+    scale: 1 / 2
+  }, "Button"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: 'Push to Git and your website is live.',
+    type: "dark"
+  }, /*#__PURE__*/React.createElement(Badge, null, "1000+"))), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: 'Push to Git and your website is live.',
+    type: "dark"
+  }, /*#__PURE__*/React.createElement(Link, {
+    href: "#",
+    color: true
+  }, "Hyperlink"))));
+};
+export var CustomContent = function CustomContent() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: /*#__PURE__*/React.createElement(React.Fragment, null, "Perfect for working with a ", /*#__PURE__*/React.createElement(Code, null, "CMS"), ".")
+  }, "Top")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Text, {
+      b: true
+    }, "Perfect"), " for working with a CMS."),
+    placement: "bottom"
+  }, "Bottom")));
+};
+export var Types = function Types() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Perfect for working with a CMS.",
+    type: "dark"
+  }, "Dark")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Perfect for working with a CMS.",
+    type: "success"
+  }, "Success")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Perfect for working with a CMS.",
+    type: "warning"
+  }, "Warning")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Perfect for working with a CMS.",
+    type: "error"
+  }, "Error")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Perfect for working with a CMS.",
+    type: "secondary"
+  }, "Secondary")));
+};
+export var Variants = function Variants() {
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2
+  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Push to Git and your website is live.",
+    type: "lite"
+  }, "Lite")), /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement(Tooltip, {
+    text: "Push to Git and your website is live.",
+    hideArrow: true
+  }, "No Arrow")));
+};
+export var Placements = function Placements() {
+  var text = 'HTTP is stateless, but not sessionless';
+  return /*#__PURE__*/React.createElement(Grid.Container, {
+    gap: 2,
+    justify: "center",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Grid, {
+    xs: 4,
+    justify: "flex-end"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: text,
+    placement: "topStart",
+    type: "dark"
+  }, "topStart")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 4,
+    justify: "center"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: text,
+    placement: "top",
+    type: "dark"
+  }, "top")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 4
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: text,
+    placement: "topEnd",
+    type: "dark"
+  }, "topEnd")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3,
+    justify: "flex-end"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: text,
+    placement: "leftStart",
+    type: "dark"
+  }, "leftStart")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6
+  }), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: text,
+    placement: "rightStart",
+    type: "dark"
+  }, "rightStart")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3,
+    justify: "flex-end"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: text,
+    placement: "left",
+    type: "dark"
+  }, "left")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6
+  }), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: text,
+    placement: "right",
+    type: "dark"
+  }, "right")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3,
+    justify: "flex-end"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: text,
+    placement: "leftEnd",
+    type: "dark"
+  }, "leftEnd")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 6
+  }), /*#__PURE__*/React.createElement(Grid, {
+    xs: 3
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: text,
+    placement: "rightEnd",
+    type: "dark"
+  }, "rightEnd")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 4,
+    justify: "flex-end"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: text,
+    placement: "bottomStart",
+    type: "dark"
+  }, "bottomStart")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 4,
+    justify: "center"
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: text,
+    placement: "bottom",
+    type: "dark"
+  }, "bottom")), /*#__PURE__*/React.createElement(Grid, {
+    xs: 4
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    text: text,
+    placement: "bottomEnd",
+    type: "dark"
+  }, "bottomEnd")));
+};

package/esm/tooltip/styles.js

@@ -0,0 +1,18 @@
+export var getColors = function getColors(type, palette) {
+  var colors = {
+    "default": palette.background,
+    primary: palette.primary,
+    secondary: palette.secondary,
+    success: palette.success,
+    warning: palette.warning,
+    error: palette.error,
+    info: palette.info,
+    dark: palette.foreground,
+    lite: palette.background
+  };
+  var color = type === 'lite' || type === 'default' ? palette.foreground : palette.background;
+  return {
+    color: color,
+    bgColor: colors[type]
+  };
+};