@flodesk/grain 5.7.0 → 5.7.1

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, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 
 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; }
 
@@ -24,16 +24,15 @@ var trackWidth = 40;
 var trackHeight = knobSizePx + trackOffset * 2;
 var trackInactiveColor = getColor('grey3');
 var trackActiveColor = getColor('content');
-var Input = styled.input(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  opacity: 0;\n\n  &:checked ~ .Track {\n    background-color: ", ";\n\n    .Knob {\n      transform: translateX(", "px);\n    }\n  }\n"])), function (p) {
+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 Track = styled.label(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  height: ", "px;\n  width: ", "px;\n  display: block;\n  position: relative;\n  border-radius: 1000px;\n  transition: ", ";\n  cursor: pointer;\n  background-color: ", ";\n"])), trackHeight, trackWidth, getTransition('xFast'), function (p) {
-  return p.isDisabled ? getColor('backgroundDisabled') : trackInactiveColor;
-});
-var Knob = styled.span(_templateObject3 || (_templateObject3 = _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"])), trackOffset, trackOffset, knobSizePx, knobSizePx, function (p) {
+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(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: grid;\n  grid-auto-flow: column;\n  align-items: center;\n  width: fit-content;\n  gap: 8px;\n"])));
+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"])));
 export var Switch = function Switch(_ref) {
   var isDisabled = _ref.isDisabled,
       isActive = _ref.isActive,
@@ -48,14 +47,10 @@ export var Switch = function Switch(_ref) {
     id: id,
     checked: isActive,
     onChange: onChange
-  }), /*#__PURE__*/React.createElement(Track, {
-    htmlFor: id,
-    className: "Track",
-    isDisabled: isDisabled
-  }, /*#__PURE__*/React.createElement(Knob, {
+  }), /*#__PURE__*/React.createElement(Knob, {
     className: "Knob",
     isDisabled: isDisabled
-  })), label && /*#__PURE__*/React.createElement("label", {
+  }), label && /*#__PURE__*/React.createElement("label", {
     htmlFor: id
   }, label));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "5.7.0",
+  "version": "5.7.1",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "author": "Flodesk",