@pingux/astro 1.27.0-alpha.20 → 1.27.0-alpha.22

package/lib/styles/Spacing.stories.js

@@ -1,52 +0,0 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React from 'react';
-import Text from '../components/Text';
-import scale from './spacing';
-import { Table, TableHead, TableRow, TableBody, TableCell, Separator } from '..';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Design/Spacing'
-};
-var tableBodyStyles = {
-  border: 'unset'
-};
-var tableRowStyles = {
-  backgroundColor: 'transparent !important'
-};
-export var Spacing = function Spacing() {
-  var _context;
-
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
-    variant: "sectionTitle"
-  }, "Spacing"), ___EmotionJSX(Separator, {
-    mb: "sm"
-  }), ___EmotionJSX(Table, {
-    width: "75%"
-  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
-    sx: tableRowStyles,
-    key: "head"
-  }, ___EmotionJSX(TableCell, {
-    isHeading: true,
-    key: "name"
-  }, "Token"), ___EmotionJSX(TableCell, {
-    isHeading: true,
-    key: "value"
-  }, "Size"))), _mapInstanceProperty(_context = _Object$entries(scale)).call(_context, function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
-
-    return ___EmotionJSX(TableBody, {
-      sx: tableBodyStyles,
-      key: key
-    }, ___EmotionJSX(TableRow, {
-      sx: tableRowStyles
-    }, ___EmotionJSX(TableCell, {
-      bg: "white"
-    }, key), ___EmotionJSX(TableCell, {
-      bg: "white"
-    }, value, "px")));
-  })));
-};

package/lib/styles/ThemeDocumentation.js

@@ -1,7 +0,0 @@
-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/Typography.stories.js

@@ -1,136 +0,0 @@
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _Object$entries from "@babel/runtime-corejs3/core-js-stable/object/entries";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React from 'react';
-import Text from '../components/Text';
-import { Table, TableRow, TableBody, TableHead, TableCell, Box, Separator } from '..';
-import { fontWeights, fontSizes } from './text';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export default {
-  title: 'Design/Typography'
-};
-var tableBodyStyles = {
-  border: 'unset'
-};
-var tableRowStyles = {
-  backgroundColor: 'transparent !important'
-};
-export var TypographyTokens = function TypographyTokens() {
-  var _context, _context2;
-
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
-    variant: "sectionTitle"
-  }, "Font Sizes"), ___EmotionJSX(Separator, {
-    mb: "sm"
-  }), ___EmotionJSX(Table, {
-    width: "75%"
-  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
-    key: "head"
-  }, ___EmotionJSX(TableCell, {
-    isHeading: true
-  }, "Token"), ___EmotionJSX(TableCell, {
-    isHeading: true
-  }, "Size"), ___EmotionJSX(TableCell, {
-    isHeading: true
-  }, "Example"))), _mapInstanceProperty(_context = _Object$entries(fontSizes)).call(_context, function (_ref) {
-    var _ref2 = _slicedToArray(_ref, 2),
-        key = _ref2[0],
-        value = _ref2[1];
-
-    return ___EmotionJSX(TableBody, {
-      sx: tableBodyStyles,
-      key: key
-    }, ___EmotionJSX(TableRow, {
-      sx: tableRowStyles
-    }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
-      fontSize: value
-    }, key)), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
-      fontSize: value
-    }, value)), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
-      fontSize: value
-    }, "<Text fontSize={", key, "} />"))));
-  }))), ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
-    variant: "sectionTitle",
-    mt: "xx"
-  }, "Font Weights"), ___EmotionJSX(Separator, {
-    mb: "sm"
-  }), ___EmotionJSX(Table, {
-    width: "75%"
-  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
-    key: "head"
-  }, ___EmotionJSX(TableCell, {
-    isHeading: true
-  }, "Token"), ___EmotionJSX(TableCell, {
-    isHeading: true
-  }, "Size"), ___EmotionJSX(TableCell, {
-    isHeading: true
-  }, "Example"))), _mapInstanceProperty(_context2 = _Object$entries(fontWeights)).call(_context2, function (_ref3) {
-    var _ref4 = _slicedToArray(_ref3, 2),
-        key = _ref4[0],
-        value = _ref4[1];
-
-    return ___EmotionJSX(TableBody, {
-      sx: tableBodyStyles,
-      key: key
-    }, ___EmotionJSX(TableRow, {
-      sx: tableRowStyles
-    }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
-      fontWeight: value
-    }, key)), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
-      fontWeight: value
-    }, value)), ___EmotionJSX(TableCell, null, ___EmotionJSX(Text, {
-      fontWeight: value
-    }, "<Text fontWeight={", key, "} />"))));
-  }))), ___EmotionJSX(React.Fragment, null, ___EmotionJSX(Text, {
-    variant: "sectionTitle",
-    mt: "xx"
-  }, "Text Colors"), ___EmotionJSX(Separator, {
-    mb: "sm"
-  }), ___EmotionJSX(Table, {
-    width: "75%"
-  }, ___EmotionJSX(TableHead, null, ___EmotionJSX(TableRow, {
-    key: "head"
-  }, ___EmotionJSX(TableCell, {
-    isHeading: true
-  }, "Token"), ___EmotionJSX(TableCell, {
-    isHeading: true
-  }, "Color"), ___EmotionJSX(TableCell, {
-    isHeading: true
-  }, "Example"))), ___EmotionJSX(TableBody, {
-    sx: tableBodyStyles
-  }, ___EmotionJSX(TableRow, {
-    sx: tableRowStyles
-  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(Box, {
-    width: "30px",
-    height: "30px",
-    bg: "text.primary",
-    mr: "xs"
-  }), ___EmotionJSX(Text, {
-    alignSelf: "center"
-  }, "text.primary"))), ___EmotionJSX(TableCell, {
-    alignSelf: "center"
-  }, ___EmotionJSX(Text, null, "neutral.10")), ___EmotionJSX(TableCell, {
-    alignSelf: "center"
-  }, ___EmotionJSX(Text, {
-    color: "text.primary"
-  }, "<Text textColor={text.primary} />"))), ___EmotionJSX(TableRow, {
-    sx: tableRowStyles
-  }, ___EmotionJSX(TableCell, null, ___EmotionJSX(Box, {
-    isRow: true
-  }, ___EmotionJSX(Box, {
-    width: "30px",
-    height: "30px",
-    bg: "text.secondary",
-    mr: "xs"
-  }), ___EmotionJSX(Text, {
-    alignSelf: "center"
-  }, "text.secondary"))), ___EmotionJSX(TableCell, {
-    alignSelf: "center"
-  }, ___EmotionJSX(Text, null, "neutral.40")), ___EmotionJSX(TableCell, {
-    alignSelf: "center"
-  }, ___EmotionJSX(Text, {
-    color: "text.secondary"
-  }, "<Text color={text.secondary} />")))))));
-};

package/lib/styles/breakpoints.js

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

package/lib/styles/colors.js

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

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

package/lib/styles/forms/comboBox.js

@@ -1,27 +0,0 @@
-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); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _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
-};

package/lib/styles/forms/index.js

@@ -1,32 +0,0 @@
-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); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import * as checkbox from './checkbox';
-import comboBox from './comboBox';
-import * as input from './input';
-import * as label from './label';
-import * as radio from './radio';
-import search from './search';
-import * as select from './select';
-import * as switchable from './switch'; // 'switch' is a reserved keyword
-
-import * as textarea from './textarea'; // See https://rebassjs.org/forms/ for the intended structure.
-// Variants should be defined in the approprate file.
-
-export default _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, checkbox), {}, {
-  comboBox: comboBox
-}, input), label), radio), select), textarea), {}, {
-  "switch": _objectSpread({}, switchable),
-  search: search
-});

package/lib/styles/forms/input.js

@@ -1,198 +0,0 @@
-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";
-
-var _input$container;
-
-function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); 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 _context, _context2; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(source), !0)).call(_context, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context2 = ownKeys(Object(source))).call(_context2, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-import { text } from '../variants/text';
-import statuses from '../../utils/devUtils/constants/statuses'; // Styles for default input and variants go here.
-
-var activeFloatLabel = {
-  pt: 'md',
-  pb: 'xs'
-}; // Default input styling
-
-export var input = _objectSpread(_objectSpread({}, text.inputValue), {}, {
-  appearance: 'none',
-  boxSizing: 'border-box',
-  lineHeight: '1.25em',
-  height: '40px',
-  textOverflow: 'ellipsis',
-  paddingRight: '100px',
-  bg: 'white',
-  borderWidth: 1,
-  borderStyle: 'solid',
-  borderColor: 'neutral.80',
-  borderRadius: 2,
-  fontSize: 'md',
-  px: 'md',
-  py: 'sm',
-  width: '100%',
-  outline: 'none',
-  '&.is-focused': {
-    borderColor: 'accent.80',
-    boxShadow: 'focus'
-  },
-  '.is-float-label &': {
-    height: '45px'
-  },
-  '.is-float-label-active &': _objectSpread({}, activeFloatLabel),
-  '&::placeholder': text.placeholder,
-  '&::-ms-expand': {
-    display: 'none'
-  },
-  '&::-webkit-contacts-auto-fill-button, &::-webkit-credentials-auto-fill-button': {
-    visibility: 'hidden',
-    display: 'none !important',
-    pointerEvents: 'none',
-    height: 0,
-    width: 0,
-    margin: 0
-  },
-  '&::-ms-reveal, &::-ms-clear': {
-    display: 'none'
-  },
-  '&.is-error': {
-    borderColor: 'critical.bright'
-  }
-}); // Example variant input
-
-input.large = _objectSpread(_objectSpread({}, input), {}, {
-  lineHeight: '2em',
-  height: '4em'
-});
-input.small = _objectSpread(_objectSpread({}, input), {}, {
-  height: '28px',
-  pb: '2px',
-  pt: '2px',
-  pl: 'sm',
-  pr: 'sm'
-});
-input.wrapper = {
-  position: 'relative',
-  '&.is-left-label': {
-    display: 'inline-grid',
-    gridTemplateRows: 'auto auto'
-  },
-  '> .is-default': {
-    width: '100%'
-  }
-}; // Used to give a blue left border to inputs
-
-input.container = (_input$container = {
-  position: 'relative',
-  height: 'max-content',
-  '> input': {
-    borderLeftWidth: 0
-  },
-  '> button': {
-    borderLeftWidth: 0
-  },
-  '&:after': {
-    borderRadius: 5,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-    content: '""',
-    position: 'absolute',
-    bg: 'active',
-    width: 3,
-    top: 0,
-    left: 0,
-    bottom: 0
-  },
-  '&.has-no-status-indicator > input': {
-    borderLeftWidth: 1
-  },
-  '&.has-no-status-indicator > button': {
-    borderLeftWidth: 1
-  },
-  '&.has-no-status-indicator:after': {
-    width: 0
-  },
-  '&.is-disabled': {
-    // Override global opacity for disabled items because the children will handle their own opacity
-    // and it will otherwise stack the opacity effect.
-    opacity: 1,
-    '&:after': {
-      opacity: 0.5
-    }
-  },
-  '&.is-read-only': {
-    '> input': {
-      backgroundColor: 'accent.95',
-      border: 'none'
-    },
-    '> textarea': {
-      backgroundColor: 'accent.95',
-      border: 'none'
-    },
-    '&:after': {
-      display: 'none'
-    }
-  }
-}, _defineProperty(_input$container, "&.is-".concat(statuses.ERROR, "::after"), {
-  bg: 'critical.bright'
-}), _defineProperty(_input$container, "&.is-".concat(statuses.SUCCESS, "::after"), {
-  bg: 'success.bright'
-}), _defineProperty(_input$container, "&.is-".concat(statuses.WARNING, "::after"), {
-  bg: 'warning.bright'
-}), _input$container);
-input.containedIcon = {
-  position: 'absolute',
-  right: 0,
-  top: '50%',
-  transform: 'translate(-50%, -50%)'
-};
-input.multivaluesWrapper = _objectSpread(_objectSpread({}, input.container), {}, {
-  bg: 'white',
-  borderColor: 'neutral.80',
-  borderStyle: 'solid',
-  borderWidth: 1,
-  flexDirection: 'row!important',
-  flexWrap: 'wrap',
-  left: 2,
-  pt: 6,
-  pr: 10,
-  pb: 5,
-  pl: 12,
-  borderRadius: '2px',
-  alignItems: 'center',
-  '&.has-no-status-indicator': {
-    left: 0
-  },
-  '&:after': {
-    borderRadius: 5,
-    borderTopRightRadius: 0,
-    borderBottomRightRadius: 0,
-    content: '""',
-    position: 'absolute',
-    bg: 'active',
-    width: 3,
-    top: -1,
-    left: -3,
-    bottom: -1
-  },
-  '> input': {
-    border: 'none',
-    flex: 1,
-    height: 27,
-    lineHeight: '100%',
-    p: 5,
-    '&.is-focused': {
-      boxShadow: 'none'
-    }
-  }
-});
-input.numberField = _objectSpread(_objectSpread({}, input), {}, {
-  pr: '28px'
-});