@automattic/vip-design-system 0.10.3 → 0.12.0

package/build/system/Form/MultiSelect.js

@@ -1,38 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.MultiSelect = void 0;
-
-var _reactSelect = _interopRequireDefault(require("react-select"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-var vipGold = '#c29c69'; // hardcoding for now
-
-var vipGrey2 = '#d7dee2';
-var customStyles = {
-  control: function control(styles) {
-    return _extends({}, styles, {
-      border: "1px solid " + vipGrey2,
-      boxShadow: 'none',
-      '&:hover': {
-        border: "1px solid " + vipGold
-      },
-      '&:focus': {
-        border: "1px solid " + vipGold
-      }
-    });
-  }
-};
-
-var MultiSelect = function MultiSelect(props) {
-  return (0, _jsxRuntime.jsx)(_reactSelect["default"], _extends({}, props, {
-    styles: customStyles
-  }));
-};
-
-exports.MultiSelect = MultiSelect;

package/build/system/UsageChart/UsageChart.js

@@ -1,60 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.UsageChart = void 0;
-
-var _framerMotion = require("framer-motion");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _jsxRuntime = require("theme-ui/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-/**
- * External dependencies
- */
-var UsageChart = function UsageChart(_ref) {
-  var total = _ref.total,
-      max = _ref.max,
-      _ref$variant = _ref.variant,
-      variant = _ref$variant === void 0 ? 'primary' : _ref$variant;
-  var width = total / max * 100 + '%';
-  var formattedTotal = total;
-
-  if (total > 1000000) {
-    formattedTotal = (total / 1000000).toFixed(2) + "M";
-  } else if (total > 1000) {
-    formattedTotal = (total / 1000).toFixed(2) + "K";
-  }
-
-  return (0, _jsxRuntime.jsx)("div", {
-    sx: {
-      height: variant === 'primary' ? 32 : 8,
-      overflow: 'hidden',
-      backgroundColor: variant === 'primary' ? 'border' : 'transparent'
-    },
-    children: (0, _jsxRuntime.jsx)(_framerMotion.motion.div, {
-      initial: {
-        width: 0
-      },
-      animate: {
-        width: width
-      },
-      transition: {
-        duration: 0.7
-      },
-      sx: {
-        height: '100%',
-        backgroundColor: variant === 'primary' ? 'primary' : 'grey.40'
-      }
-    })
-  });
-};
-
-exports.UsageChart = UsageChart;
-UsageChart.propTypes = {
-  total: _propTypes["default"].number,
-  max: _propTypes["default"].number,
-  variant: _propTypes["default"].string
-};

package/build/system/UsageChart/UsageChart.stories.js

@@ -1,20 +0,0 @@
-/**
- * External dependencies
- */
-import React from 'react';
-/**
- * Internal dependencies
- */
-
-import { UsageChart } from '..';
-export default {
-  title: 'UsageChart',
-  component: UsageChart
-};
-export var Default = function Default() {
-  return /*#__PURE__*/React.createElement(UsageChart, {
-    total: 50,
-    max: 75,
-    variant: "primary"
-  });
-};

package/build/system/UsageChart/index.js

@@ -1,7 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-
-var _UsageChart = require("./UsageChart");
-
-exports.UsageChart = _UsageChart.UsageChart;