@flodesk/grain 2.18.0 → 2.18.1

package/es/components/icon-button.js

@@ -15,26 +15,22 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _utilities = require("../utilities");
-
 var _components = require("../components");
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _react2 = require("@emotion/react");
-
 var _types = require("../types");
 
+var _foundational = require("../foundational");
+
 var _excluded = ["children", "isDisabled", "icon", "color"];
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 var __jsx = _react.default.createElement;
-var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-borderColor-hover: var(--grn-color-fade4);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
-
-var Wrapper = _styled.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-radius: ", ";\n  transition: ", ";\n  width: var(--grn-clearButtonHeight-m);\n  height: var(--grn-clearButtonHeight-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  \n  &:hover {\n    transition: ", ";\n    border-color: var(--grn-borderColor-hover);\n  }\n  \n  &:active {\n    transition: 0s;\n    border-color: var(--grn-borderColor-active);\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: default;\n    border-color: transparent;\n  }\n"])), variables, (0, _utilities.getRadius)('s'), (0, _utilities.getTransition)('slow'), (0, _utilities.getTransition)('fast'), (0, _utilities.getColor)('disabledContent'));
+var Wrapper = (0, _styled.default)(_foundational.ClearButtonBox)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: var(--grn-clearButtonHeight-m);\n"])));
 
 var IconButton = function IconButton(_ref) {
   var children = _ref.children,

package/es/components/text-button.js

@@ -15,24 +15,20 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 
-var _utilities = require("../utilities");
-
 var _components = require("../components");
 
 var _react = _interopRequireDefault(require("react"));
 
 var _styled = _interopRequireDefault(require("@emotion/styled"));
 
-var _react2 = require("@emotion/react");
+var _foundational = require("../foundational");
 
 var _excluded = ["children", "isDisabled", "icon"];
 
-var _templateObject, _templateObject2;
+var _templateObject;
 
 var __jsx = _react.default.createElement;
-var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-paddingX-m: 8px;\n  --grn-borderColor-hover: var(--grn-color-fade4);\n  --grn-borderColor-active: var(--grn-color-grey8);\n"])));
-
-var Wrapper = _styled.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: 1px solid transparent;\n  padding: 0 var(--grn-paddingX-m);\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  border-radius: ", ";\n  font-weight: ", ";\n  transition: ", ";\n  height: var(--grn-clearButtonHeight-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  \n  &:hover {\n    transition: ", ";\n    border-color: var(--grn-borderColor-hover);\n  }\n  \n  &:active {\n    transition: 0s;\n    border-color: var(--grn-borderColor-active);\n  }\n  \n  &:disabled {\n    color: ", ";\n    cursor: default;\n    border-color: transparent;\n  }\n"])), variables, (0, _utilities.getRadius)('s'), (0, _utilities.getWeight)('medium'), (0, _utilities.getTransition)('slow'), (0, _utilities.getTransition)('fast'), (0, _utilities.getColor)('disabledContent'));
+var Wrapper = (0, _styled.default)(_foundational.ClearButtonBox)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0 8px;\n  gap: 8px;\n"])));
 
 var TextButton = function TextButton(_ref) {
   var children = _ref.children,

package/es/components/text-input.js

@@ -70,7 +70,7 @@ var Label = _styled.default.label(_templateObject3 || (_templateObject3 = (0, _t
   return sizesStyles[p.size].labelGap;
 });
 
-var InputField = _styled.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition: border-color ", ";\n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    transition: ", ";\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n  \n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-selection);\n  }\n"])), (0, _utilities.getTransition)('slow'), function (p) {
+var InputField = _styled.default.input(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  appearance: none;\n  border: none;\n  font-family: inherit;\n  background-color: transparent;\n  color: inherit;\n  font-size: inherit;\n  transition: border-color ", ";\n  border: 1px solid var(--grn-color-fieldBorder);\n  width: 100%;\n  ", ";\n  ", ";\n  outline: none;\n\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:hover {\n    transition: ", ";\n    border-color: var(--grn-color-fieldBorder-hover);\n  }\n  \n  &:focus {\n    transition: 0s;\n    border-color: var(--grn-color-grey6);\n  }\n"])), (0, _utilities.getTransition)('slow'), function (p) {
   return inputSizesStyles[p.size];
 }, function (p) {
   return p.paddingLeft && "padding-left: ".concat(p.paddingLeft, "px");

package/es/components/toggle-group.js

@@ -37,7 +37,7 @@ var variables = (0, _react2.css)(_templateObject || (_templateObject = (0, _tagg
 
 var Wrapper = _styled.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  border: 1px solid var(--grn-color-border);\n  border-radius: var(--grn-radius-s);\n  width: fit-content;\n"])));
 
-var ItemWrapper = _styled.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  border-left: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  transition: ", ";\n  min-width: var(--grn-width);\n  height: var(--grn-textBoxHeight-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  color: var(--grn-color-bodyDimmed);\n\n  ", ";\n  \n  & + .ToggleOption {\n    border-color: var(--grn-color-border);\n  }\n  \n  &:after {\n    content: \"\";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    ", ";\n  }\n\n  &:first-child {\n    min-width: calc(var(--grn-width) - 1px);\n  }\n  \n  &:first-child:after {\n    width: calc(100% + 1px);\n    left: -1px;\n    border-radius: var(--grn-radius-s) 0 0 var(--grn-radius-s);\n  }\n  \n  &:last-child:after {\n    border-radius: 0 var(--grn-radius-s) var(--grn-radius-s) 0;\n  }\n\n  &:hover {\n    color: var(--grn-color-body);\n    transition: ", ";\n  }\n"])), variables, (0, _utilities.getWeight)("medium"), (0, _utilities.getTransition)('slow'), function (p) {
+var ItemWrapper = _styled.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: none;\n  border-left: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  font-weight: ", ";\n  cursor: pointer;\n  transition: ", ";\n  min-width: var(--grn-width);\n  height: calc(var(--grn-textBoxHeight-m) - 2px);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  color: var(--grn-color-bodyDimmed);\n\n  ", ";\n  \n  & + .ToggleOption {\n    border-color: var(--grn-color-border);\n  }\n  \n  &:after {\n    content: \"\";\n    pointer-events: none;\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    ", ";\n  }\n\n  &:first-child {\n    min-width: calc(var(--grn-width) - 1px);\n  }\n  \n  &:first-child:after {\n    width: calc(100% + 1px);\n    left: -1px;\n    border-radius: var(--grn-radius-s) 0 0 var(--grn-radius-s);\n  }\n  \n  &:last-child:after {\n    border-radius: 0 var(--grn-radius-s) var(--grn-radius-s) 0;\n  }\n\n  &:hover {\n    color: var(--grn-color-body);\n    transition: ", ";\n  }\n"])), variables, (0, _utilities.getWeight)("medium"), (0, _utilities.getTransition)('slow'), function (p) {
   return p.isActive && "\n    color: var(--grn-color-body);\n  ";
 }, function (p) {
   return p.isActive && "box-shadow: 0 0 0 1px var(--grn-color-grey6)";

package/es/foundational/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClearButtonBox = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _react = require("@emotion/react");
+
+var _utilities = require("../utilities");
+
+var _templateObject, _templateObject2;
+
+var variables = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  --grn-borderColor-active: var(--grn-color-fade5);\n"])));
+
+var ClearButtonBox = _styled.default.button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  appearance: none;\n  border: 1px solid transparent;\n  padding: 0;\n  font-family: inherit;\n  font-size: inherit;\n  cursor: pointer;\n  font-weight: ", ";\n  border-radius: ", ";\n  transition: ", ";\n  height: var(--grn-clearButtonHeight-m);\n  background-color: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  &:hover {\n    transition: ", ";\n    background-color: var(--grn-color-overlay);\n  }\n\n  &:active {\n    transition: 0s;\n    border-color: var(--grn-borderColor-active);\n    background-color: transparent;\n  }\n\n  &:disabled {\n    color: ", ";\n    cursor: default;\n    border-color: transparent;\n\n    &:hover {\n      background-color: transparent;\n    }\n  }\n"])), variables, (0, _utilities.getWeight)("medium"), (0, _utilities.getRadius)('s'), (0, _utilities.getTransition)('slow'), (0, _utilities.getTransition)('fast'), (0, _utilities.getColor)('disabledContent'));
+
+exports.ClearButtonBox = ClearButtonBox;

package/es/icons/icon-download.js

@@ -35,15 +35,22 @@ var __jsx = React.createElement;
 
 var IconDownload = function IconDownload(props) {
   return __jsx("svg", (0, _extends2.default)({
-    viewBox: "0 0 18 24",
+    viewBox: "0 0 24 32",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), __jsx("path", {
+  }, props), __jsx("g", {
+    clipPath: "url(#prefix__clip0_262_764)"
+  }, __jsx("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M9.75 3v12.129l5.69-5.69L16.5 10.5l-6.44 6.44L9 18l-1.06-1.06L1.5 10.5l1.06-1.06 5.69 5.689V3h1.5zM0 15v4.5A1.5 1.5 0 001.5 21h15a1.5 1.5 0 001.5-1.5V15h-1.5v4.5h-15V15H0z",
+    d: "M13 4v16.172l7.586-7.586L22 14l-8.586 8.586L12 24l-1.414-1.414L2 14l1.414-1.414L11 20.172V4h2zM0 20v6a2 2 0 002 2h20a2 2 0 002-2v-6h-2v6H2v-6H0z",
     fill: "currentColor"
-  }));
+  })), __jsx("defs", null, __jsx("clipPath", {
+    id: "prefix__clip0_262_764"
+  }, __jsx("path", {
+    fill: "#fff",
+    d: "M0 0h24v32H0z"
+  }))));
 };
 
 IconDownload.__docgenInfo = {

package/es/icons/icon-folder-add.js

@@ -39,12 +39,9 @@ var IconFolderAdd = function IconFolderAdd(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
-    d: "M1 3V2H0v1h1Zm7 0 .894-.447L8.618 2H8v1Zm2 4-.894.447.276.553H10V7ZM1 4h7V2H1v2Zm6.106-.553 2 4 1.788-.894-2-4-1.788.894ZM2 11V3H0v8h2Zm8-3h16V6H10v2Zm16 0v3h2V8h-2ZM0 11v13h2V11H0Zm2 15h24v-2H2v2Zm26-2V11h-2v13h2Zm-2 2a2 2 0 0 0 2-2h-2v2ZM0 24a2 2 0 0 0 2 2v-2H0ZM26 8h2a2 2 0 0 0-2-2v2Z",
-    fill: "currentColor"
-  }), __jsx("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M15 10h-2v5H8v2h5v5h2v-5h5v-2h-5v-5Z",
+    d: "M1 4H0v22a2 2 0 002 2h24a2 2 0 002-2V10a2 2 0 00-2-2H10.618L8.894 4.553 8.618 4H1zm1 9V6h5.382l1.724 3.447.276.553H26v16H2V13zm11-1h2v5h5v2h-5v5h-2v-5H8v-2h5v-5z",
     fill: "currentColor"
   }));
 };

package/es/icons/icon-folder.js

@@ -39,7 +39,9 @@ var IconFolder = function IconFolder(props) {
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
-    d: "M1 3V2H0v1h1Zm7 0 .894-.447L8.618 2H8v1Zm2 4-.894.447.276.553H10V7ZM1 4h7V2H1v2Zm6.106-.553 2 4 1.788-.894-2-4-1.788.894ZM2 11V3H0v8h2Zm8-3h16V6H10v2Zm16 0v3h2V8h-2ZM0 11v13h2V11H0Zm2 15h24v-2H2v2Zm26-2V11h-2v13h2Zm-2 2a2 2 0 0 0 2-2h-2v2ZM0 24a2 2 0 0 0 2 2v-2H0ZM26 8h2a2 2 0 0 0-2-2v2Z",
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 4h8.618l2 4H26a2 2 0 012 2v16a2 2 0 01-2 2H2a2 2 0 01-2-2V4zm2 2v20h24V10H9.382l-2-4H2z",
     fill: "currentColor"
   }));
 };

package/es/icons/icon-monitor.js

@@ -35,13 +35,13 @@ var __jsx = React.createElement;
 
 var IconMonitor = function IconMonitor(props) {
   return __jsx("svg", (0, _extends2.default)({
-    viewBox: "0 0 21 24",
+    viewBox: "0 0 28 32",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M1.5 3A1.5 1.5 0 000 4.5v12A1.5 1.5 0 001.5 18h18a1.5 1.5 0 001.5-1.5v-12A1.5 1.5 0 0019.5 3h-18zm0 1.5h18v12h-18v-12zm13.5 15H6V21h9v-1.5z",
+    d: "M2 4a2 2 0 00-2 2v16a2 2 0 002 2h24a2 2 0 002-2V6a2 2 0 00-2-2H2zm0 2h24v16H2V6zm18 20H8v2h12v-2z",
     fill: "currentColor"
   }));
 };

package/es/icons/icon-phone.js

@@ -35,18 +35,13 @@ var __jsx = React.createElement;
 
 var IconPhone = function IconPhone(props) {
   return __jsx("svg", (0, _extends2.default)({
-    viewBox: "0 0 12 24",
+    viewBox: "0 0 16 32",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M0 4.5A1.5 1.5 0 011.5 3h9A1.5 1.5 0 0112 4.5v15a1.5 1.5 0 01-1.5 1.5h-9A1.5 1.5 0 010 19.5v-15zm10.5 0h-9v15h9v-15z",
-    fill: "currentColor"
-  }), __jsx("circle", {
-    cx: 6,
-    cy: 17.25,
-    r: 0.75,
+    d: "M2 4a2 2 0 00-2 2v20a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2H2zm0 2h12v20H2V6zm6 18a1 1 0 100-2 1 1 0 000 2z",
     fill: "currentColor"
   }));
 };

package/es/icons/icon-tablet.js

@@ -35,13 +35,13 @@ var __jsx = React.createElement;
 
 var IconTablet = function IconTablet(props) {
   return __jsx("svg", (0, _extends2.default)({
-    viewBox: "0 0 15 24",
+    viewBox: "0 0 20 32",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
   }, props), __jsx("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M1.5 3A1.5 1.5 0 000 4.5v15A1.5 1.5 0 001.5 21h12a1.5 1.5 0 001.5-1.5v-15A1.5 1.5 0 0013.5 3h-12zm0 1.5h12v15h-12v-15zm9 12h-6V18h6v-1.5z",
+    d: "M2 4a2 2 0 00-2 2v20a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2H2zm0 2h16v20H2V6zm12 16H6v2h8v-2z",
     fill: "currentColor"
   }));
 };

package/es/icons/icon-upload.js

@@ -35,15 +35,22 @@ var __jsx = React.createElement;
 
 var IconUpload = function IconUpload(props) {
   return __jsx("svg", (0, _extends2.default)({
-    viewBox: "0 0 18 24",
+    viewBox: "0 0 24 32",
     fill: "none",
     xmlns: "http://www.w3.org/2000/svg"
-  }, props), __jsx("path", {
+  }, props), __jsx("g", {
+    clipPath: "url(#prefix__clip0_262_741)"
+  }, __jsx("path", {
     fillRule: "evenodd",
     clipRule: "evenodd",
-    d: "M16.5 10.5l-6.44-6.44L9 3 7.94 4.06 1.5 10.5l1.06 1.06 5.69-5.689V18h1.5V5.871l5.69 5.69L16.5 10.5zM0 15v4.5A1.5 1.5 0 001.5 21h15a1.5 1.5 0 001.5-1.5V15h-1.5v4.5h-15V15H0z",
+    d: "M22 14l-8.586-8.586L12 4l-1.414 1.414L2 14l1.414 1.414L11 7.828V24h2V7.828l7.586 7.586L22 14zM0 20v6a2 2 0 002 2h20a2 2 0 002-2v-6h-2v6H2v-6H0z",
     fill: "currentColor"
-  }));
+  })), __jsx("defs", null, __jsx("clipPath", {
+    id: "prefix__clip0_262_741"
+  }, __jsx("path", {
+    fill: "#fff",
+    d: "M0 0h24v32H0z"
+  }))));
 };
 
 IconUpload.__docgenInfo = {

package/package.json

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