@pingux/astro 1.1.1-alpha.1 → 1.1.1-alpha.2

package/lib/recipes/ScrollableListView.stories.js

@@ -0,0 +1,113 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
+import React, { useState } from 'react';
+import { Item } from '@react-stately/collections';
+import CreateIcon from 'mdi-react/CreateIcon';
+import MoreVertIcon from 'mdi-react/MoreVertIcon';
+import FormSelectIcon from 'mdi-react/FormSelectIcon';
+import { SearchField, ListView, Box, IconButton, ScrollBox, Text, Icon } from '../index';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/ScrollableListView'
+};
+var unfilteredItems = [{
+  key: 'Aardvark',
+  name: 'Aardvark',
+  id: '1'
+}, {
+  key: 'Kangaroo',
+  name: 'Kangaroo',
+  id: '2'
+}, {
+  key: 'Snake',
+  name: 'Snake',
+  id: '3'
+}, {
+  key: 'Dog',
+  name: 'Dog',
+  id: '4'
+}, {
+  key: 'Cat',
+  name: 'Cat',
+  id: '5'
+}, {
+  key: 'Mouse',
+  name: 'Mouse',
+  id: '6'
+}, {
+  key: 'Jaguar',
+  name: 'Jaguar',
+  id: '7'
+}, {
+  key: 'Elephant',
+  name: 'Elephant',
+  id: '7'
+}];
+export var Default = function Default(_ref) {
+  var args = _extends({}, _ref);
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(unfilteredItems),
+      _useState4 = _slicedToArray(_useState3, 2),
+      items = _useState4[0],
+      setItems = _useState4[1];
+
+  var filterItems = function filterItems(input) {
+    var filtered = _filterInstanceProperty(unfilteredItems).call(unfilteredItems, function (obj) {
+      var _context;
+
+      return _includesInstanceProperty(_context = obj.name.toLowerCase()).call(_context, input.toLowerCase());
+    });
+
+    setItems(filtered);
+  };
+
+  var onChangeInput = function onChangeInput(input) {
+    setValue(input);
+    filterItems(input);
+  };
+
+  return ___EmotionJSX(Box, null, ___EmotionJSX(SearchField, {
+    value: value,
+    onChange: onChangeInput
+  }), ___EmotionJSX(ScrollBox, {
+    maxHeight: 450,
+    hasShadows: true
+  }, ___EmotionJSX(ListView, _extends({}, args, {
+    items: items
+  }), function (item) {
+    return ___EmotionJSX(Item, {
+      key: item.name,
+      textValue: item.name
+    }, ___EmotionJSX(Box, {
+      isRow: true
+    }, ___EmotionJSX(Box, {
+      isRow: true,
+      mr: "auto",
+      alignSelf: "center"
+    }, ___EmotionJSX(Icon, {
+      icon: FormSelectIcon,
+      mr: "sm",
+      color: "text.primary",
+      size: 25
+    }), ___EmotionJSX(Text, {
+      variant: "itemTitle",
+      alignSelf: "center"
+    }, item.name)), ___EmotionJSX(Box, {
+      isRow: true,
+      alignSelf: "center"
+    }, ___EmotionJSX(IconButton, {
+      "aria-label": "create-icon",
+      size: 20
+    }, ___EmotionJSX(CreateIcon, null)), ___EmotionJSX(IconButton, {
+      "aria-label": "create-icon",
+      size: 20
+    }, ___EmotionJSX(MoreVertIcon, null)))));
+  })));
+};

package/lib/recipes/SelectedFieldOverlay.story.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import VisibilityOffOutlineIcon from 'mdi-react/VisibilityOffOutlineIcon';
+import Box from '../components/Box';
+import Icon from '../components/Icon';
+import TextField from '../components/TextField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/Selected Field Overlay'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(Box, {
+    p: 15,
+    sx: {
+      position: 'relative',
+      borderWidth: 2,
+      borderStyle: 'solid',
+      borderColor: 'active',
+      borderRadius: 4,
+      cursor: 'pointer'
+    }
+  }, ___EmotionJSX(TextField, {
+    label: "Name",
+    controlProps: {
+      tabIndex: '-1'
+    }
+  }), ___EmotionJSX(Box, {
+    sx: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      top: 0,
+      left: 0,
+      alignItems: 'center',
+      justifyContent: 'center',
+      '&:focus': {
+        outline: 'none'
+      }
+    },
+    tabIndex: "0"
+  }, ___EmotionJSX(Icon, {
+    icon: VisibilityOffOutlineIcon,
+    size: 22
+  })));
+};

package/lib/recipes/StatsCircle.stories.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import Box from '../components/Box';
+import Text from '../components/Text';
+import { active } from '../styles/colors';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Recipes/StatsCircle'
+};
+export var Default = function Default() {
+  return ___EmotionJSX(Box, {
+    width: "110px",
+    height: "110px",
+    sx: {
+      'border': '3px solid',
+      'borderColor': active,
+      'borderRadius': '100%',
+      'alignItems': 'center',
+      'justifyContent': 'center'
+    }
+  }, ___EmotionJSX(Text, {
+    fontSize: 30
+  }, "63"), ___EmotionJSX(Text, {
+    color: "text.secondary"
+  }, "Members"));
+};

package/lib/styles/ColorDocumentation.js

@@ -0,0 +1,276 @@
+import _setTimeout from "@babel/runtime-corejs3/core-js-stable/set-timeout";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _parseInt from "@babel/runtime-corejs3/core-js-stable/parse-int";
+import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+import _sortInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/sort";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _Math$trunc from "@babel/runtime-corejs3/core-js-stable/math/trunc";
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { Item } from '@react-stately/collections';
+import Box from '../components/Box';
+import Text from '../components/Text';
+import TextField from '../components/TextField';
+import { flatColorList } from './colors.js';
+import SelectField from '../components/SelectField';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var exactMatchThreshold = 0.02;
+
+function Color(_ref) {
+  var name = _ref.name,
+      hex = _ref.hex,
+      distanceFromReference = _ref.distanceFromReference,
+      referenceColor = _ref.referenceColor;
+
+  if (distanceFromReference < 0 || distanceFromReference > 1) {
+    // eslint-disable-next-line no-console
+    console.log("Please check color distance logic. Value ".concat(distanceFromReference, " is outside range [0, 1]"));
+  }
+
+  return ___EmotionJSX(Box, {
+    key: name,
+    isRow: true,
+    gap: 20,
+    p: "sm",
+    sx: {
+      alignItems: 'center',
+      opacity: 1 - distanceFromReference,
+      ':hover': {
+        opacity: 1
+      }
+    }
+  }, ___EmotionJSX(Box, {
+    sx: {
+      width: 100,
+      height: 100,
+      backgroundColor: name,
+      justifyContent: 'center',
+      alignItems: 'center'
+    }
+  }, ___EmotionJSX(Box, {
+    sx: {
+      width: 50,
+      height: 50,
+      backgroundColor: name,
+      ':hover': {
+        backgroundColor: referenceColor
+      }
+    }
+  })), ___EmotionJSX(Box, null, ___EmotionJSX(Text, {
+    variant: "title"
+  }, name), distanceFromReference <= exactMatchThreshold && ___EmotionJSX(Text, {
+    variant: "title",
+    color: "active"
+  }, "Exact match(>", 100 - _Math$trunc(exactMatchThreshold * 100), "%)!"), distanceFromReference > exactMatchThreshold && ___EmotionJSX(Text, {
+    variant: "subtitle"
+  }, "matchLevel: ", 100 - _Math$trunc(distanceFromReference * 100), "%"), ___EmotionJSX(Text, {
+    variant: "bodyWeak"
+  }, hex)));
+}
+
+Color.propTypes = {
+  name: PropTypes.string.isRequired,
+  hex: PropTypes.string.isRequired,
+  distanceFromReference: PropTypes.number,
+  referenceColor: PropTypes.string.isRequired
+};
+var Colors = /*#__PURE__*/React.memo(function (_ref2) {
+  var _context, _context2;
+
+  var distanceFromReferenceCb = _ref2.distanceFromReferenceCb,
+      referenceColor = _ref2.referenceColor;
+  return ___EmotionJSX(Box, {
+    gap: 20
+  }, _mapInstanceProperty(_context = _sortInstanceProperty(_context2 = _mapInstanceProperty(flatColorList).call(flatColorList, function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+        name = _ref4[0],
+        hex = _ref4[1];
+
+    return {
+      name: name,
+      hex: hex,
+      distance: distanceFromReferenceCb(hex)
+    };
+  })).call(_context2, function (_ref5, _ref6) {
+    var distance1 = _ref5.distance;
+    var distance2 = _ref6.distance;
+    return distance1 - distance2;
+  })).call(_context, function (_ref7) {
+    var name = _ref7.name,
+        hex = _ref7.hex,
+        distance = _ref7.distance;
+    return ___EmotionJSX(Color, {
+      hex: hex,
+      name: name,
+      key: name,
+      distanceFromReference: distance,
+      referenceColor: referenceColor
+    });
+  }));
+});
+Colors.propTypes = {
+  distanceFromReferenceCb: PropTypes.func.isRequired,
+  referenceColor: PropTypes.string.isRequired
+};
+
+function hexToRgb(input) {
+  var _context8;
+
+  var hex = input;
+
+  if (!hex.match(/^#/)) {
+    hex = "#".concat(hex);
+  }
+
+  if (hex.length === 4) {
+    var _context3, _context4, _context5, _context6, _context7;
+
+    hex = _concatInstanceProperty(_context3 = _concatInstanceProperty(_context4 = _concatInstanceProperty(_context5 = _concatInstanceProperty(_context6 = _concatInstanceProperty(_context7 = "#".concat(hex[1])).call(_context7, hex[1])).call(_context6, hex[2])).call(_context5, hex[2])).call(_context4, hex[3])).call(_context3, hex[3]);
+  }
+
+  return _mapInstanceProperty(_context8 = [_sliceInstanceProperty(hex).call(hex, 1, 3), _sliceInstanceProperty(hex).call(hex, 3, 5), _sliceInstanceProperty(hex).call(hex, 5, 7)]).call(_context8, function (x) {
+    return _parseInt(x, 16);
+  });
+}
+
+function rgbToHsl(rgb) {
+  var _rgb = _slicedToArray(rgb, 3),
+      r = _rgb[0],
+      g = _rgb[1],
+      b = _rgb[2];
+
+  r /= 255;
+  g /= 255;
+  b /= 255; // Find greatest and smallest channel values
+
+  var cmin = Math.min(r, g, b);
+  var cmax = Math.max(r, g, b);
+  var delta = cmax - cmin;
+  var h;
+  var s;
+  var l; // Calculate hue
+
+  if (delta === 0) {
+    // No difference
+    h = 0;
+  } else if (cmax === r) {
+    // Red is max
+    h = (g - b) / delta % 6;
+  } else if (cmax === g) {
+    // Green is max
+    // eslint-disable-next-line no-mixed-operators
+    h = (b - r) / delta + 2;
+  } else {
+    // Blue is max
+    // eslint-disable-next-line no-mixed-operators
+    h = (r - g) / delta + 4;
+  }
+
+  h = Math.round(h * 60); // Make negative hues positive behind 360°
+
+  if (h < 0) {
+    h += 360;
+  } // Calculate lightness
+
+
+  l = (cmax + cmin) / 2; // Calculate saturation
+  // eslint-disable-next-line no-mixed-operators
+
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1)); // Multiply l and s by 100
+
+  s = +(s * 100).toFixed(1);
+  l = +(l * 100).toFixed(1);
+  return [h, s, l];
+}
+
+var matchers = {
+  'RGB Average Diff': function RGBAverageDiff(referenceValue) {
+    return function (entry) {
+      var rgb1 = hexToRgb(entry);
+      var rgb2 = hexToRgb(referenceValue); // eslint-disable-next-line no-mixed-operators
+
+      return (Math.abs(rgb1[0] - rgb2[0]) + // eslint-disable-next-line no-mixed-operators
+      Math.abs(rgb1[1] - rgb2[1]) + // eslint-disable-next-line no-mixed-operators
+      Math.abs(rgb1[2] - rgb2[2])) / (3 * 256);
+    };
+  },
+  'RGB distance': function RGBDistance(referenceValue) {
+    return function (entry) {
+      var rgb1 = hexToRgb(entry);
+      var rgb2 = hexToRgb(referenceValue); // eslint-disable-next-line no-mixed-operators
+
+      return Math.sqrt(Math.pow(rgb1[0] - rgb2[0], 2) + // eslint-disable-next-line no-mixed-operators
+      Math.pow(rgb1[1] - rgb2[1], 2) + // eslint-disable-next-line no-mixed-operators
+      Math.pow(rgb1[2] - rgb2[2], 2)) / (3 * 256);
+    };
+  },
+  'By Hue Difference': function ByHueDifference(referenceValue) {
+    return function (entry) {
+      var h1 = rgbToHsl(hexToRgb(entry))[0];
+      var h2 = rgbToHsl(hexToRgb(referenceValue))[0];
+      var distance = Math.abs(h1 - h2);
+      /*
+      since hue is circle-like value from 0 to 359 degree
+      we want to ensure 2 values of 1 and 359 would be treated as close
+      */
+
+      return Math.min(distance, 360 - distance) / 180;
+    };
+  }
+};
+export function ColorSchema() {
+  var _context9;
+
+  var _useState = useState('#FFFFFF'),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1];
+
+  var _useState3 = useState(_Object$keys(matchers)[0]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      matcher = _useState4[0],
+      setMatcher = _useState4[1];
+
+  var _useState5 = useState('#FFFFFF'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      referenceColor = _useState6[0],
+      setReferenceColor = _useState6[1];
+
+  var filterCallback = React.useCallback(matchers[matcher](referenceColor), [referenceColor, matcher]);
+  useEffect(function () {
+    var timerId = _setTimeout(function () {
+      // let's debounce, re-rendering color list is heavy due to sorting
+      setReferenceColor(inputValue);
+    }, 300);
+
+    return function () {
+      clearTimeout(timerId);
+    };
+  }, [inputValue]);
+  return ___EmotionJSX(Box, {
+    p: "md"
+  }, ___EmotionJSX(TextField, {
+    label: "Color to find",
+    mb: "lg",
+    controlProps: {
+      value: inputValue,
+      onChange: function onChange(_ref8) {
+        var value = _ref8.target.value;
+        return setInputValue(value);
+      }
+    }
+  }), ___EmotionJSX(SelectField, {
+    selectedKey: matcher,
+    onSelectionChange: setMatcher,
+    label: "Desired method"
+  }, _mapInstanceProperty(_context9 = _Object$keys(matchers)).call(_context9, function (key) {
+    return ___EmotionJSX(Item, {
+      key: key
+    }, key);
+  })), ___EmotionJSX(Colors, {
+    distanceFromReferenceCb: filterCallback,
+    referenceColor: referenceColor
+  }));
+}

package/lib/styles/ColorDocumentation.stories.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ColorSchema } from './ColorDocumentation';
+import Box from '../components/Box';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default {
+  title: 'Color Schema',
+  component: ColorSchema
+};
+export var Colors = function Colors() {
+  return ___EmotionJSX(Box, {
+    bg: "neutral.95"
+  }, ___EmotionJSX(ColorSchema, null));
+};

package/lib/styles/ThemeDocumentation.js

@@ -0,0 +1,7 @@
+import _JSON$stringify from "@babel/runtime-corejs3/core-js-stable/json/stringify";
+import React from 'react';
+import theme from './theme';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export default (function () {
+  return ___EmotionJSX("pre", null, _JSON$stringify(theme, null, '    '));
+});

package/lib/styles/breakpoints.js

@@ -0,0 +1 @@
+export default ['480px', '768px', '960px', '1280px', '1920px'];

package/lib/styles/colors.js

@@ -0,0 +1,159 @@
+import _typeof from "@babel/runtime-corejs3/helpers/esm/typeof";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
+import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
+import _reduceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/reduce";
+import _fillInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/fill";
+import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
+
+var _context, _context2;
+
+import chroma from 'chroma-js'; // SEMANTIC COLORS
+
+export var active = '#4462ED';
+export var critical = {
+  bright: '#a31300',
+  dark: '#a31300',
+  light: '#ffebe7'
+};
+export var success = {
+  bright: '#00af18',
+  dark: '#008512',
+  light: '#e6ffe9'
+};
+export var warning = {
+  bright: '#ffb91c',
+  dark: '#b05b00',
+  light: '#fff6e6'
+}; // NEUTRAL COLORS
+
+export var black = '#000';
+export var white = '#fff';
+var steps = 9;
+var neutralScale = chroma.scale(['#253746', 'white']).mode('lab');
+export var neutral = {
+  10: neutralScale(0).hex(),
+  20: neutralScale(1 / steps).hex(),
+  30: neutralScale(2 / steps).hex(),
+  40: neutralScale(3 / steps).hex(),
+  50: neutralScale(4 / steps).hex(),
+  60: neutralScale(5 / steps).hex(),
+  70: neutralScale(6 / steps).hex(),
+  80: neutralScale(7 / steps).hex(),
+  90: neutralScale(8 / steps).hex(),
+  95: neutralScale(8.5 / steps).hex()
+};
+var accentBase = '303F5F';
+var accentLight = 'F7F8FD';
+var accentSteps = 8;
+var accentScale = chroma.scale([accentBase, accentLight]).mode('hsl');
+export var accent = {
+  5: chroma(accentBase).darken(1).hex(),
+  10: chroma(accentBase).darken(0.5).hex(),
+  20: accentScale(0).hex(),
+  30: accentScale(1 / accentSteps).hex(),
+  40: accentScale(2 / accentSteps).hex(),
+  50: accentScale(3 / accentSteps).hex(),
+  60: accentScale(4 / accentSteps).hex(),
+  70: accentScale(5 / accentSteps).hex(),
+  80: accentScale(6 / accentSteps).hex(),
+  90: accentScale(7 / accentSteps).hex(),
+  95: accentScale(7.5 / accentSteps).hex(),
+  99: accentScale(8 / accentSteps).hex()
+};
+
+var _chroma$hsl = chroma('#D033FF').hsl(),
+    _chroma$hsl2 = _slicedToArray(_chroma$hsl, 3),
+    cHue = _chroma$hsl2[0],
+    cSaturation = _chroma$hsl2[1],
+    cLightness = _chroma$hsl2[2];
+
+var getDecorativeColor = function getDecorativeColor(index) {
+  var h = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : cHue;
+  var s = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : cSaturation;
+  var l = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : cLightness;
+  return index > 0 ? getDecorativeColor(index - 1, (h + 100) % 360, s, l * 0.95) : chroma(h, s, l, 'hsl').hex();
+};
+
+export var decorative = _mapInstanceProperty(_context = _fillInstanceProperty(_context2 = Array(11)).call(_context2, 0)).call(_context, function (_v, index) {
+  return getDecorativeColor(index);
+});
+export var decorativeDark = _mapInstanceProperty(decorative).call(decorative, function (color) {
+  return chroma(color).darken(2).hex();
+});
+export var decorativeLight = _mapInstanceProperty(decorative).call(decorative, function (color) {
+  return chroma(color).brighten(2).hex();
+});
+export var focus = chroma(accent[50]).alpha(0.75).hex(); // COMPONENT COLORS
+
+export var button = {
+  primary: active,
+  border: active,
+  label: active,
+  hoverBorder: accent,
+  hoverLabel: accent,
+  hoverBackground: accent[95]
+};
+export var line = {
+  regular: neutral[50],
+  light: neutral[80],
+  hairline: neutral[90]
+};
+export var text = {
+  primary: neutral[10],
+  secondary: neutral[40],
+  primaryLight: white,
+  secondaryLight: neutral[95],
+  button: button.label,
+  active: active
+};
+export var shadow = chroma(neutral[10]).alpha(0.25).hex();
+var allColors = {
+  black: black,
+  white: white,
+  neutral: neutral,
+  accent: accent,
+  decorative: decorative,
+  decorativeDark: decorativeDark,
+  decorativeLight: decorativeLight,
+  focus: focus,
+  active: active,
+  critical: critical,
+  success: success,
+  text: text,
+  line: line,
+  button: button,
+  warning: warning
+};
+export default allColors;
+
+function flattenColors(obj) {
+  var _context3, _context4;
+
+  var prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+  return _reduceInstanceProperty(_context3 = _mapInstanceProperty(_context4 = _Object$entries(obj)).call(_context4, function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+        key = _ref2[0],
+        value = _ref2[1];
+
+    if (typeof value === 'string') {
+      var _context5;
+
+      return [_concatInstanceProperty(_context5 = "".concat(prefix)).call(_context5, key), value];
+    } else if (_typeof(value) === 'object') {
+      var _context6;
+
+      return flattenColors(value, _concatInstanceProperty(_context6 = "".concat(prefix)).call(_context6, key, "."));
+    }
+
+    return [];
+  })).call(_context3, function (result, current) {
+    var _context7, _context8;
+
+    return typeof current[0] === 'string' ? _concatInstanceProperty(_context7 = []).call(_context7, result, [current]) : _concatInstanceProperty(_context8 = []).call(_context8, result, current);
+  }, []);
+}
+/* used by Storybook's stories */
+
+
+export var flatColorList = flattenColors(allColors);

package/lib/styles/forms/checkbox.js

@@ -0,0 +1,13 @@
+// Styles for default checkbox and variants go here.
+// Default checkbox
+export var checkbox = {
+  color: 'active',
+  mr: 'sm',
+  'input:focus ~ &': {
+    bg: 'transparent'
+  },
+  'input ~ &.is-focused': {
+    outline: 'none',
+    boxShadow: 'focus'
+  }
+};

package/lib/styles/forms/comboBox.js

@@ -0,0 +1,27 @@
+import _Object$defineProperty from "@babel/runtime-corejs3/core-js-stable/object/define-property";
+import _Object$defineProperties from "@babel/runtime-corejs3/core-js-stable/object/define-properties";
+import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
+import _forEachInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/for-each";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
+import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
+import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
+import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
+import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { var _context; _forEachInstanceProperty(_context = ownKeys(Object(source), true)).call(_context, function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { var _context2; _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+import { input as inputBase } from './input';
+var container = {
+  position: 'relative'
+};
+
+var input = _objectSpread(_objectSpread({}, inputBase), {}, {
+  pr: 'xl'
+});
+
+export default {
+  container: container,
+  input: input
+};