@pingux/astro 1.17.0-alpha.3 → 1.17.0

package/lib/styles/Typography.stories.js

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

@@ -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,12 @@
+// 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

@@ -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); 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

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

@@ -0,0 +1,191 @@
+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'
+  }
+}); // 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: 3,
+  p: 10,
+  pl: 12,
+  '&.has-no-status-indicator': {
+    left: 0
+  },
+  '&:after': {
+    borderRadius: 5,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+    content: '""',
+    position: 'absolute',
+    bg: 'active',
+    width: 3,
+    top: 0,
+    left: -3,
+    bottom: 0
+  },
+  '> input': {
+    border: 'none',
+    flex: 1,
+    height: 30,
+    lineHeight: '100%',
+    p: 5,
+    '&.is-focused': {
+      boxShadow: 'none'
+    }
+  }
+});
+input.numberField = _objectSpread(_objectSpread({}, input), {}, {
+  pr: '28px'
+});

package/lib/styles/forms/label.js

@@ -0,0 +1,75 @@
+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; }
+
+// Styles for default label and variants go here.
+import { text } from '../variants/text';
+var activeFloatLabel = {
+  fontWeight: 0,
+  transform: 'translate(0, -8px) scale(0.75)'
+}; // Default label
+
+export var label = _objectSpread(_objectSpread({}, text.label), {}, {
+  display: 'block',
+  mb: 'xs',
+  alignItems: 'center',
+  '&.is-float-label': {
+    textOverflow: 'ellipsis',
+    display: 'flex',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+    fontSize: 'md',
+    fontWeight: -1,
+    position: 'absolute',
+    zIndex: 1,
+    top: '13px',
+    left: 'md',
+    mb: 0,
+    transformOrigin: 'top left',
+    transition: 'all 0.1s ease-out',
+    pointerEvents: 'none',
+    paddingRight: '25px',
+    paddingLeft: '1px' // Otherwise, certain characters get cut off on the left from the overflow
+
+  },
+  '.is-float-label-active &.is-float-label': _objectSpread({}, activeFloatLabel),
+  '&.is-left-label': {
+    width: 'auto',
+    pr: 'sm',
+    mb: 0,
+    alignSelf: 'center'
+  }
+}); // Variants below
+
+label.indicator = {
+  color: 'critical.bright',
+  ml: 5
+};
+label.radio = _objectSpread(_objectSpread({}, text.base), {}, {
+  cursor: 'pointer',
+  alignItems: 'center',
+  mb: 'xs'
+}); // NOTE: Rebass label adds 'flex' after other styles, so we have to use !important to override it
+
+label.checkbox = _objectSpread(_objectSpread({}, text.base), {}, {
+  display: 'inline-flex !important',
+  div: {
+    flexShrink: 0
+  },
+  width: 'auto',
+  alignItems: 'center',
+  cursor: 'pointer'
+});
+label.radioGroup = _objectSpread(_objectSpread({}, label), {}, {
+  fontWeight: 1
+});

package/lib/styles/forms/radio.js

@@ -0,0 +1,21 @@
+// Styles for default radio and variants go here.
+// Default radio
+export var radio = {
+  width: 20,
+  height: 20,
+  color: 'active',
+  mr: 'xs',
+  // override the default focus styling
+  'input:focus ~ &': {
+    bg: 'transparent'
+  },
+  'input ~ &.is-focused': {
+    outline: 'none',
+    boxShadow: 'focus'
+  }
+};
+export var radioField = {
+  '.is-horizontal &': {
+    mr: '15px'
+  }
+};

package/lib/styles/forms/search.js

@@ -0,0 +1,20 @@
+export var clearButtonIcon = {
+  color: 'neutral.40'
+};
+export var container = {
+  position: 'relative',
+  justifyContent: 'center',
+  '> input::-webkit-search-cancel-button, > input::-webkit-search-decoration': {
+    WebkitAppearance: 'none'
+  }
+};
+export var icon = {
+  position: 'absolute',
+  color: 'neutral.40',
+  ml: 'sm'
+};
+export default {
+  clearButtonIcon: clearButtonIcon,
+  container: container,
+  icon: icon
+};