@flodesk/grain 5.7.2 → 5.8.2

package/es/components/box.js

@@ -4,7 +4,8 @@ import "core-js/modules/es.object.define-properties.js";
 import "core-js/modules/es.object.keys.js";
 import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
-var _excluded = ["children", "color", "backgroundColor", "borderColor", "borderWidth", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio", "zIndex"];
+var _excluded = ["borderSide", "borderWidth", "borderColor", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "top", "bottom", "left", "right", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "color", "backgroundColor", "position", "radius", "shadow", "overflow", "aspectRatio", "zIndex"],
+    _excluded2 = ["children", "color", "backgroundColor", "borderColor", "borderWidth", "borderSide", "width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "radius", "padding", "paddingTop", "paddingBottom", "paddingLeft", "paddingRight", "paddingX", "paddingY", "margin", "marginTop", "marginBottom", "marginLeft", "marginRight", "marginX", "marginY", "position", "top", "bottom", "left", "right", "shadow", "overflow", "aspectRatio", "zIndex"];
 
 var _templateObject;
 
@@ -21,105 +22,171 @@ import React from 'react';
 import styled from '@emotion/styled';
 import { types } from '../types';
 import PropTypes from 'prop-types';
-var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  color: ", ";\n  background-color: ", ";\n\n  position: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n  ", ";\n"])), function (p) {
-  return getBorder(p.borderSide, p.borderWidth, p.borderColor);
-}, function (p) {
-  return getResponsiveSpace('padding', p.padding);
-}, function (p) {
-  return getResponsiveSpace('padding-top', p.paddingTop);
-}, function (p) {
-  return getResponsiveSpace('padding-bottom', p.paddingBottom);
-}, function (p) {
-  return getResponsiveSpace('padding-left', p.paddingLeft);
-}, function (p) {
-  return getResponsiveSpace('padding-right', p.paddingRight);
-}, function (p) {
-  return getResponsiveSpace('margin', p.margin);
-}, function (p) {
-  return getResponsiveSpace('margin-top', p.marginTop);
-}, function (p) {
-  return getResponsiveSpace('margin-bottom', p.marginBottom);
-}, function (p) {
-  return getResponsiveSpace('margin-left', p.marginLeft);
-}, function (p) {
-  return getResponsiveSpace('margin-right', p.marginRight);
-}, function (p) {
-  return getResponsiveSpace('top', p.top);
-}, function (p) {
-  return getResponsiveSpace('bottom', p.bottom);
-}, function (p) {
-  return getResponsiveSpace('left', p.left);
-}, function (p) {
-  return getResponsiveSpace('right', p.right);
-}, function (p) {
-  return getResponsiveDimension('width', p.width);
-}, function (p) {
-  return getResponsiveDimension('min-width', p.minWidth);
-}, function (p) {
-  return getResponsiveDimension('max-width', p.maxWidth);
-}, function (p) {
-  return getResponsiveDimension('height', p.height);
-}, function (p) {
-  return getResponsiveDimension('min-height', p.minHeight);
-}, function (p) {
-  return getResponsiveDimension('max-height', p.maxHeight);
-}, function (p) {
-  return getColor(p.color);
-}, function (p) {
-  return getColor(p.backgroundColor);
-}, function (p) {
-  return p.position;
-}, function (p) {
-  return getRadius(p.radius);
-}, function (p) {
-  return getShadow(p.shadow);
-}, function (p) {
-  return p.overflow;
-}, function (p) {
-  return p.aspectRatio;
-}, function (p) {
-  return p.zIndex && "z-index: ".concat(p.zIndex);
-});
-export var Box = function Box(_ref) {
-  var children = _ref.children,
-      color = _ref.color,
-      backgroundColor = _ref.backgroundColor,
-      _ref$borderColor = _ref.borderColor,
-      borderColor = _ref$borderColor === void 0 ? 'border' : _ref$borderColor,
-      _ref$borderWidth = _ref.borderWidth,
-      borderWidth = _ref$borderWidth === void 0 ? '1px' : _ref$borderWidth,
-      borderSide = _ref.borderSide,
-      width = _ref.width,
-      minWidth = _ref.minWidth,
-      maxWidth = _ref.maxWidth,
-      height = _ref.height,
-      minHeight = _ref.minHeight,
-      maxHeight = _ref.maxHeight,
-      radius = _ref.radius,
+var Wrapper = styled(function (_ref) {
+  var borderSide = _ref.borderSide,
+      borderWidth = _ref.borderWidth,
+      borderColor = _ref.borderColor,
       padding = _ref.padding,
       paddingTop = _ref.paddingTop,
       paddingBottom = _ref.paddingBottom,
       paddingLeft = _ref.paddingLeft,
       paddingRight = _ref.paddingRight,
-      paddingX = _ref.paddingX,
-      paddingY = _ref.paddingY,
       margin = _ref.margin,
       marginTop = _ref.marginTop,
       marginBottom = _ref.marginBottom,
       marginLeft = _ref.marginLeft,
       marginRight = _ref.marginRight,
-      marginX = _ref.marginX,
-      marginY = _ref.marginY,
-      position = _ref.position,
       top = _ref.top,
       bottom = _ref.bottom,
       left = _ref.left,
       right = _ref.right,
+      width = _ref.width,
+      minWidth = _ref.minWidth,
+      maxWidth = _ref.maxWidth,
+      height = _ref.height,
+      minHeight = _ref.minHeight,
+      maxHeight = _ref.maxHeight,
+      color = _ref.color,
+      backgroundColor = _ref.backgroundColor,
+      position = _ref.position,
+      radius = _ref.radius,
       shadow = _ref.shadow,
       overflow = _ref.overflow,
       aspectRatio = _ref.aspectRatio,
       zIndex = _ref.zIndex,
-      props = _objectWithoutProperties(_ref, _excluded);
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", rest);
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  color: ", ";\n  background-color: ", ";\n\n  position: ", ";\n  border-radius: ", ";\n  box-shadow: ", ";\n  overflow: ", ";\n  aspect-ratio: ", ";\n  ", ";\n"])), function (_ref2) {
+  var borderSide = _ref2.borderSide,
+      borderWidth = _ref2.borderWidth,
+      borderColor = _ref2.borderColor;
+  return getBorder(borderSide, borderWidth, borderColor);
+}, function (_ref3) {
+  var padding = _ref3.padding;
+  return getResponsiveSpace('padding', padding);
+}, function (_ref4) {
+  var paddingTop = _ref4.paddingTop;
+  return getResponsiveSpace('padding-top', paddingTop);
+}, function (_ref5) {
+  var paddingBottom = _ref5.paddingBottom;
+  return getResponsiveSpace('padding-bottom', paddingBottom);
+}, function (_ref6) {
+  var paddingLeft = _ref6.paddingLeft;
+  return getResponsiveSpace('padding-left', paddingLeft);
+}, function (_ref7) {
+  var paddingRight = _ref7.paddingRight;
+  return getResponsiveSpace('padding-right', paddingRight);
+}, function (_ref8) {
+  var margin = _ref8.margin;
+  return getResponsiveSpace('margin', margin);
+}, function (_ref9) {
+  var marginTop = _ref9.marginTop;
+  return getResponsiveSpace('margin-top', marginTop);
+}, function (_ref10) {
+  var marginBottom = _ref10.marginBottom;
+  return getResponsiveSpace('margin-bottom', marginBottom);
+}, function (_ref11) {
+  var marginLeft = _ref11.marginLeft;
+  return getResponsiveSpace('margin-left', marginLeft);
+}, function (_ref12) {
+  var marginRight = _ref12.marginRight;
+  return getResponsiveSpace('margin-right', marginRight);
+}, function (_ref13) {
+  var top = _ref13.top;
+  return getResponsiveSpace('top', top);
+}, function (_ref14) {
+  var bottom = _ref14.bottom;
+  return getResponsiveSpace('bottom', bottom);
+}, function (_ref15) {
+  var left = _ref15.left;
+  return getResponsiveSpace('left', left);
+}, function (_ref16) {
+  var right = _ref16.right;
+  return getResponsiveSpace('right', right);
+}, function (_ref17) {
+  var width = _ref17.width;
+  return getResponsiveDimension('width', width);
+}, function (_ref18) {
+  var minWidth = _ref18.minWidth;
+  return getResponsiveDimension('min-width', minWidth);
+}, function (_ref19) {
+  var maxWidth = _ref19.maxWidth;
+  return getResponsiveDimension('max-width', maxWidth);
+}, function (_ref20) {
+  var height = _ref20.height;
+  return getResponsiveDimension('height', height);
+}, function (_ref21) {
+  var minHeight = _ref21.minHeight;
+  return getResponsiveDimension('min-height', minHeight);
+}, function (_ref22) {
+  var maxHeight = _ref22.maxHeight;
+  return getResponsiveDimension('max-height', maxHeight);
+}, function (_ref23) {
+  var color = _ref23.color;
+  return getColor(color);
+}, function (_ref24) {
+  var backgroundColor = _ref24.backgroundColor;
+  return getColor(backgroundColor);
+}, function (_ref25) {
+  var position = _ref25.position;
+  return position;
+}, function (_ref26) {
+  var radius = _ref26.radius;
+  return getRadius(radius);
+}, function (_ref27) {
+  var shadow = _ref27.shadow;
+  return getShadow(shadow);
+}, function (_ref28) {
+  var overflow = _ref28.overflow;
+  return overflow;
+}, function (_ref29) {
+  var aspectRatio = _ref29.aspectRatio;
+  return aspectRatio;
+}, function (_ref30) {
+  var zIndex = _ref30.zIndex;
+  return zIndex && "z-index: ".concat(zIndex);
+});
+export var Box = function Box(_ref31) {
+  var children = _ref31.children,
+      color = _ref31.color,
+      backgroundColor = _ref31.backgroundColor,
+      _ref31$borderColor = _ref31.borderColor,
+      borderColor = _ref31$borderColor === void 0 ? 'border' : _ref31$borderColor,
+      _ref31$borderWidth = _ref31.borderWidth,
+      borderWidth = _ref31$borderWidth === void 0 ? '1px' : _ref31$borderWidth,
+      borderSide = _ref31.borderSide,
+      width = _ref31.width,
+      minWidth = _ref31.minWidth,
+      maxWidth = _ref31.maxWidth,
+      height = _ref31.height,
+      minHeight = _ref31.minHeight,
+      maxHeight = _ref31.maxHeight,
+      radius = _ref31.radius,
+      padding = _ref31.padding,
+      paddingTop = _ref31.paddingTop,
+      paddingBottom = _ref31.paddingBottom,
+      paddingLeft = _ref31.paddingLeft,
+      paddingRight = _ref31.paddingRight,
+      paddingX = _ref31.paddingX,
+      paddingY = _ref31.paddingY,
+      margin = _ref31.margin,
+      marginTop = _ref31.marginTop,
+      marginBottom = _ref31.marginBottom,
+      marginLeft = _ref31.marginLeft,
+      marginRight = _ref31.marginRight,
+      marginX = _ref31.marginX,
+      marginY = _ref31.marginY,
+      position = _ref31.position,
+      top = _ref31.top,
+      bottom = _ref31.bottom,
+      left = _ref31.left,
+      right = _ref31.right,
+      shadow = _ref31.shadow,
+      overflow = _ref31.overflow,
+      aspectRatio = _ref31.aspectRatio,
+      zIndex = _ref31.zIndex,
+      props = _objectWithoutProperties(_ref31, _excluded2);
 
   return /*#__PURE__*/React.createElement(Wrapper, Object.assign({
     backgroundColor: backgroundColor,

package/es/components/index.js

@@ -9,6 +9,7 @@ export { Tab, TabGroup } from './tab';
 export { TextButton } from './text-button';
 export { IconToggleGroup, IconToggle } from './icon-toggle';
 export { TextToggleGroup, TextToggle } from './text-toggle';
+export { Select } from './select';
 export { Stack } from './stack';
 export { Slider } from './slider';
 export { Spinner } from './spinner';

package/es/components/select.js

@@ -0,0 +1,155 @@
+import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.object.freeze.js";
+import "core-js/modules/es.object.define-properties.js";
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.array.index-of.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.symbol.description.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.symbol.iterator.js";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.string.iterator.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import "core-js/modules/es.array.from.js";
+import "core-js/modules/es.regexp.exec.js";
+var _excluded = ["menuWidth", "menuAlign"],
+    _excluded2 = ["children"],
+    _excluded3 = ["children", "isSelected", "isActive"];
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import "core-js/modules/es.object.assign.js";
+import "core-js/modules/es.array.map.js";
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import { Icon, Box, Text } from '.';
+import { IconCheck, IconChevronDown } from '../icons';
+import { Listbox } from '@headlessui/react';
+import { getColor, getDimension, getRadius, getShadow } from '../utilities';
+import { types } from '../types';
+var Options = styled(function (_ref) {
+  var menuWidth = _ref.menuWidth,
+      menuAlign = _ref.menuAlign,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Listbox.Options, rest);
+})(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 8px;\n  margin: 0;\n  position: absolute;\n  background: white;\n  box-shadow: ", ";\n  border-radius: ", ";\n  max-height: 468px;\n  overflow: auto;\n  width: ", ";\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n"])), getShadow('m'), getRadius('s'), function (_ref2) {
+  var menuWidth = _ref2.menuWidth;
+  return getDimension(menuWidth);
+}, function (_ref3) {
+  var menuAlign = _ref3.menuAlign;
+  return "".concat(menuAlign, ": 0;");
+});
+var SelectButtonWrapper = styled(Listbox.Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  appearance: none;\n  border: none;\n  background: ", ";\n  padding: 0 var(--grn-fieldXPadding);\n  min-height: var(--grn-textBoxHeight-m);\n  border-radius: ", ";\n  font: inherit;\n  color: inherit;\n  cursor: pointer;\n  width: 100%;\n  text-align: left;\n"])), getColor('fade1'), getRadius('s'));
+
+var SelectButton = function SelectButton(_ref4) {
+  var children = _ref4.children,
+      props = _objectWithoutProperties(_ref4, _excluded2);
+
+  return /*#__PURE__*/React.createElement(SelectButtonWrapper, props, /*#__PURE__*/React.createElement(Text, {
+    hasEllipsis: true,
+    weight: "medium"
+  }, children), /*#__PURE__*/React.createElement(Box, {
+    marginLeft: "auto"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(IconChevronDown, null)
+  })));
+};
+
+var MenuItemWrapper = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  gap: 8px;\n  align-items: center;\n  list-style: none;\n  padding: 0 1rem;\n  min-height: var(--grn-textBoxHeight-m);\n  cursor: pointer;\n  border-radius: ", ";\n"])), getRadius('s'));
+var MenuItem = /*#__PURE__*/React.forwardRef(function (_ref5, ref) {
+  var children = _ref5.children,
+      isSelected = _ref5.isSelected,
+      isActive = _ref5.isActive,
+      props = _objectWithoutProperties(_ref5, _excluded3);
+
+  return /*#__PURE__*/React.createElement(MenuItemWrapper, Object.assign({
+    ref: ref,
+    isActive: isActive,
+    style: {
+      background: isActive ? getColor('overlay') : undefined
+    }
+  }, props), /*#__PURE__*/React.createElement(Text, {
+    hasEllipsis: true
+  }, children), isSelected && /*#__PURE__*/React.createElement(Box, {
+    marginLeft: "auto"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: /*#__PURE__*/React.createElement(IconCheck, null)
+  })));
+});
+
+var SelectRoot = function SelectRoot(_ref6) {
+  var props = Object.assign({}, _ref6);
+  return /*#__PURE__*/React.createElement(Box, Object.assign({}, props, {
+    position: "relative"
+  }));
+};
+
+export var Select = function Select(_ref7) {
+  var options = _ref7.options,
+      defaultOption = _ref7.defaultOption,
+      onChange = _ref7.onChange,
+      _ref7$menuAlign = _ref7.menuAlign,
+      menuAlign = _ref7$menuAlign === void 0 ? 'left' : _ref7$menuAlign,
+      _ref7$menuWidth = _ref7.menuWidth,
+      menuWidth = _ref7$menuWidth === void 0 ? '240px' : _ref7$menuWidth;
+
+  var _useState = useState(defaultOption || {}),
+      _useState2 = _slicedToArray(_useState, 2),
+      selectedOption = _useState2[0],
+      setSelectedOption = _useState2[1];
+
+  var handleChange = function handleChange(option) {
+    setSelectedOption(option);
+    onChange && onChange(option);
+  };
+
+  return /*#__PURE__*/React.createElement(Listbox, {
+    as: SelectRoot,
+    value: selectedOption,
+    onChange: handleChange
+  }, /*#__PURE__*/React.createElement(SelectButton, null, selectedOption.content), /*#__PURE__*/React.createElement(Options, {
+    menuAlign: menuAlign,
+    menuWidth: menuWidth
+  }, options.map(function (option) {
+    return /*#__PURE__*/React.createElement(Listbox.Option, {
+      key: option.id,
+      value: option,
+      as: React.Fragment
+    }, function (_ref8) {
+      var active = _ref8.active,
+          selected = _ref8.selected;
+      return /*#__PURE__*/React.createElement(MenuItem, {
+        isSelected: selected,
+        isActive: active
+      }, option.content);
+    });
+  })));
+};
+Select.propTypes = {
+  options: PropTypes.array,
+  defaultOption: PropTypes.object,
+  onChange: PropTypes.func,
+  menuAlign: PropTypes.oneOf(['left', 'right']),
+  menuWidth: types.dimension
+};

package/es/components/switch.js

@@ -6,7 +6,7 @@ import "core-js/modules/es.array.index-of.js";
 import "core-js/modules/es.symbol.js";
 var _excluded = ["isDisabled", "isActive", "label", "id", "onChange"];
 
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
@@ -22,17 +22,14 @@ var knobSizePx = 16;
 var trackOffset = 2;
 var trackWidth = 40;
 var trackHeight = knobSizePx + trackOffset * 2;
-var trackInactiveColor = getColor('grey3');
-var trackActiveColor = getColor('content');
-var Input = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  appearance: none;\n  height: ", "px;\n  width: ", "px;\n  background-color: ", ";\n  display: block;\n  border-radius: 1000px;\n  transition: ", ";\n  cursor: pointer;\n  margin: 0;\n\n  &:checked {\n    background-color: ", ";\n\n    & ~ .Knob {\n      transform: translateX(", "px);\n    }\n  }\n"])), trackHeight, trackWidth, function (p) {
-  return p.isDisabled ? getColor('backgroundDisabled') : trackInactiveColor;
-}, getTransition('xFast'), function (p) {
-  return p.disabled ? getColor('backgroundDisabled') : trackActiveColor;
-}, trackWidth - knobSizePx - trackOffset * 2);
-var Knob = styled.span(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: absolute;\n  left: ", "px;\n  top: ", "px;\n  height: ", "px;\n  width: ", "px;\n  border-radius: 100%;\n  background-color: ", ";\n  display: block;\n  transition: ", ";\n  pointer-events: none;\n"])), trackOffset, trackOffset, knobSizePx, knobSizePx, function (p) {
-  return p.isDisabled ? getColor('contentDisabled') : 'white';
-}, getTransition('xFast'));
-var Wrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  width: fit-content;\n  gap: 8px;\n  position: relative;\n"])));
+var Input = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --trackInactiveColor: ", ";\n  --trackActiveColor: ", ";\n  --knobColor: ", ";\n\n  appearance: none;\n  height: ", "px;\n  width: ", "px;\n  display: block;\n  border-radius: 1000px;\n  transition: background-color ", ";\n  cursor: pointer;\n  margin: 0;\n  position: relative;\n  background-color: var(--trackInactiveColor);\n\n  &:checked {\n    background-color: var(--trackActiveColor);\n  }\n\n  &:after {\n    content: '';\n    position: absolute;\n    left: ", "px;\n    top: ", "px;\n    height: ", "px;\n    width: ", "px;\n    border-radius: 100%;\n    background-color: var(--knobColor);\n    display: block;\n    transition: transform ", ";\n    pointer-events: none;\n  }\n\n  &:checked:after {\n    transform: translateX(", "px);\n  }\n"])), function (p) {
+  return getColor(p.disabled ? 'backgroundDisabled' : 'grey3');
+}, function (p) {
+  return getColor(p.disabled ? 'backgroundDisabled' : 'content');
+}, function (p) {
+  return p.disabled ? getColor('contentDisabled') : 'white';
+}, trackHeight, trackWidth, getTransition('xFast'), trackOffset, trackOffset, knobSizePx, knobSizePx, getTransition('xFast'), trackWidth - knobSizePx - trackOffset * 2);
+var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  width: fit-content;\n  gap: 8px;\n"])));
 export var Switch = function Switch(_ref) {
   var isDisabled = _ref.isDisabled,
       isActive = _ref.isActive,
@@ -47,9 +44,6 @@ export var Switch = function Switch(_ref) {
     id: id,
     checked: isActive,
     onChange: onChange
-  }), /*#__PURE__*/React.createElement(Knob, {
-    className: "Knob",
-    isDisabled: isDisabled
   }), label && /*#__PURE__*/React.createElement("label", {
     htmlFor: id
   }, label));

package/es/components/text-input.js

@@ -44,7 +44,7 @@ import { css } from '@emotion/react';
 import { Box, Text } from '.';
 import { Icon } from './icon';
 import { transitions } from '../foundational';
-var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-fieldBorderColor: var(--grn-color-fade3);\n  --grn-fieldBorderColor-hover: var(--grn-color-fade6);\n  --grn-fieldBorderColor-focus: var(--grn-color-grey6);\n  --grn-fieldXPadding: 12px;\n"])));
+var variables = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  --grn-fieldBorderColor: var(--grn-color-fade3);\n  --grn-fieldBorderColor-hover: var(--grn-color-fade6);\n  --grn-fieldBorderColor-focus: var(--grn-color-grey6);\n"])));
 var iconOffsetPx = 12;
 var iconTextGapPx = 8;
 var Wrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", ";\n"])), variables);

package/es/styles/base.css

@@ -2,8 +2,8 @@
 @import './components-variables.css';
 
 :root {
-  --grn-letterSpacing-fixed: 1.3px;
-  --grn-letterSpacing-relative: 0.07em;
+  --grn-letterSpacing-fixed: 1px;
+  --grn-letterSpacing-relative: 0.06em;
   --grn-letterSpacing-global: calc(var(--grn-letterSpacing-fixed) - var(--grn-letterSpacing-relative));
 
   --grn-lineHeight-fixed: 7px;

package/es/styles/components-variables.css

@@ -2,4 +2,5 @@
   --grn-textBoxHeight-s: 28px;
   --grn-textBoxHeight-m: 40px;
   --grn-clearButtonHeight-m: 36px;
+  --grn-fieldXPadding: 12px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "5.7.2",
+  "version": "5.8.2",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",
@@ -23,6 +23,7 @@
   "dependencies": {
     "@emotion/react": "^11.9.0",
     "@emotion/styled": "^11.8.1",
+    "@headlessui/react": "^1.6.6",
     "core-js": "^3.22.8",
     "prop-types": "^15.8.1"
   },