@flodesk/grain 11.42.0 → 11.42.1

package/es/components/icon-button.js

@@ -1,5 +1,5 @@
 import _styled from "@emotion/styled/base";
-const _excluded = ["children", "isDisabled", "icon", "color", "variant", "type", "isActive", "tag", "trimSide"];
+const _excluded = ["children", "isDisabled", "icon", "color", "variant", "type", "isActive", "tag", "trimSides"];
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -14,43 +14,20 @@ import { types } from '../types';
 import { getClearButtonStyles } from '../foundational';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-const getTrimSideStyles = _ref => {
-  let {
-    trimSide,
-    iconWidth,
-    iconHeight
-  } = _ref;
-  const xOffset = "calc((var(--grn-clearbutton-height) - ".concat(iconWidth, "px) / -2)");
-  const yOffset = "calc((var(--grn-clearbutton-height) - ".concat(iconHeight, "px) / -2)");
-  const trimSidesCss = [];
-  if (trimSide.includes('left')) trimSidesCss.push("margin-left: ".concat(xOffset, ";"));
-  if (trimSide.includes('right')) trimSidesCss.push("margin-right: ".concat(xOffset, ";"));
-  if (trimSide.includes('x')) trimSidesCss.push("margin-inline: ".concat(xOffset, ";"));
-  if (trimSide.includes('y')) trimSidesCss.push("margin-block: ".concat(yOffset, ";"));
-  if (trimSide.includes('top')) trimSidesCss.push("margin-top: ".concat(yOffset, ";"));
-  if (trimSide.includes('bottom')) trimSidesCss.push("margin-bottom: ".concat(yOffset, ";"));
-  return trimSidesCss.join(' ');
-};
-
 const Wrapper = /*#__PURE__*/_styled("button", process.env.NODE_ENV === "production" ? {
   target: "evb8g3z0"
 } : {
   target: "evb8g3z0",
   label: "Wrapper"
-})(p => p.clearButtonStyles.box, ";min-width:var(--grn-clearbutton-height);padding-left:8px;padding-right:8px;", _ref2 => {
+})(p => p.clearButtonStyles.box, ";min-width:var(--grn-clearbutton-height);padding-left:8px;padding-right:8px;", _ref => {
   let {
-    trimSide,
-    iconWidth,
-    iconHeight
-  } = _ref2;
-  return trimSide && getTrimSideStyles({
-    trimSide,
-    iconWidth,
-    iconHeight
-  });
-}, ";.Icon{", p => p.clearButtonStyles.icon, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tYnV0dG9uLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF1QjZCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tYnV0dG9uLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEljb24gfSBmcm9tICcuL2ljb24nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRDbGVhckJ1dHRvblN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IGdldFRyaW1TaWRlU3R5bGVzID0gKHsgdHJpbVNpZGUsIGljb25XaWR0aCwgaWNvbkhlaWdodCB9KSA9PiB7XG4gIGNvbnN0IHhPZmZzZXQgPSBgY2FsYygodmFyKC0tZ3JuLWNsZWFyYnV0dG9uLWhlaWdodCkgLSAke2ljb25XaWR0aH1weCkgLyAtMilgO1xuICBjb25zdCB5T2Zmc2V0ID0gYGNhbGMoKHZhcigtLWdybi1jbGVhcmJ1dHRvbi1oZWlnaHQpIC0gJHtpY29uSGVpZ2h0fXB4KSAvIC0yKWA7XG5cbiAgY29uc3QgdHJpbVNpZGVzQ3NzID0gW107XG5cbiAgaWYgKHRyaW1TaWRlLmluY2x1ZGVzKCdsZWZ0JykpIHRyaW1TaWRlc0Nzcy5wdXNoKGBtYXJnaW4tbGVmdDogJHt4T2Zmc2V0fTtgKTtcbiAgaWYgKHRyaW1TaWRlLmluY2x1ZGVzKCdyaWdodCcpKSB0cmltU2lkZXNDc3MucHVzaChgbWFyZ2luLXJpZ2h0OiAke3hPZmZzZXR9O2ApO1xuICBpZiAodHJpbVNpZGUuaW5jbHVkZXMoJ3gnKSkgdHJpbVNpZGVzQ3NzLnB1c2goYG1hcmdpbi1pbmxpbmU6ICR7eE9mZnNldH07YCk7XG4gIGlmICh0cmltU2lkZS5pbmNsdWRlcygneScpKSB0cmltU2lkZXNDc3MucHVzaChgbWFyZ2luLWJsb2NrOiAke3lPZmZzZXR9O2ApO1xuICBpZiAodHJpbVNpZGUuaW5jbHVkZXMoJ3RvcCcpKSB0cmltU2lkZXNDc3MucHVzaChgbWFyZ2luLXRvcDogJHt5T2Zmc2V0fTtgKTtcbiAgaWYgKHRyaW1TaWRlLmluY2x1ZGVzKCdib3R0b20nKSkgdHJpbVNpZGVzQ3NzLnB1c2goYG1hcmdpbi1ib3R0b206ICR7eU9mZnNldH07YCk7XG5cbiAgcmV0dXJuIHRyaW1TaWRlc0Nzcy5qb2luKCcgJyk7XG59O1xuXG5jb25zdCBXcmFwcGVyID0gc3R5bGVkLmJ1dHRvbmBcbiAgJHtwID0+IHAuY2xlYXJCdXR0b25TdHlsZXMuYm94fTtcbiAgbWluLXdpZHRoOiB2YXIoLS1ncm4tY2xlYXJidXR0b24taGVpZ2h0KTtcbiAgcGFkZGluZy1sZWZ0OiA4cHg7XG4gIHBhZGRpbmctcmlnaHQ6IDhweDtcbiAgJHsoeyB0cmltU2lkZSwgaWNvbldpZHRoLCBpY29uSGVpZ2h0IH0pID0+XG4gICAgdHJpbVNpZGUgJiYgZ2V0VHJpbVNpZGVTdHlsZXMoeyB0cmltU2lkZSwgaWNvbldpZHRoLCBpY29uSGVpZ2h0IH0pfTtcblxuICAuSWNvbiB7XG4gICAgJHtwID0+IHAuY2xlYXJCdXR0b25TdHlsZXMuaWNvbn07XG4gIH1cbmA7XG5cbmV4cG9ydCBjb25zdCBJY29uQnV0dG9uID0gZm9yd2FyZFJlZihcbiAgKFxuICAgIHtcbiAgICAgIGNoaWxkcmVuLFxuICAgICAgaXNEaXNhYmxlZCxcbiAgICAgIGljb24sXG4gICAgICBjb2xvcixcbiAgICAgIHZhcmlhbnQgPSAnbmV1dHJhbCcsXG4gICAgICB0eXBlID0gJ2J1dHRvbicsXG4gICAgICBpc0FjdGl2ZSxcbiAgICAgIHRhZyA9ICdidXR0b24nLFxuICAgICAgdHJpbVNpZGUsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBjbGVhckJ1dHRvblN0eWxlcyA9IGdldENsZWFyQnV0dG9uU3R5bGVzKHsgdmFyaWFudCwgaXNEaXNhYmxlZCwgaXNBY3RpdmUgfSk7XG4gICAgY29uc3QgaWNvbldpZHRoID0gaWNvbj8udHlwZT8udmlld0JveFdpZHRoIC8gMiB8fCAxNjtcbiAgICBjb25zdCBpY29uSGVpZ2h0ID0gMTY7XG5cbiAgICBjb25zdCB0cmltU2lkZUFycmF5ID0gQXJyYXkuaXNBcnJheSh0cmltU2lkZSkgPyB0cmltU2lkZSA6IFt0cmltU2lkZV07XG5cbiAgICByZXR1cm4gKFxuICAgICAgPFdyYXBwZXJcbiAgICAgICAgdHlwZT17dHlwZX1cbiAgICAgICAgZGlzYWJsZWQ9e2lzRGlzYWJsZWR9XG4gICAgICAgIGljb249e2ljb259XG4gICAgICAgIHJlZj17cmVmfVxuICAgICAgICB2YXJpYW50PXt2YXJpYW50fVxuICAgICAgICBjbGVhckJ1dHRvblN0eWxlcz17Y2xlYXJCdXR0b25TdHlsZXN9XG4gICAgICAgIGFzPXt0YWd9XG4gICAgICAgIGljb25XaWR0aD17aWNvbldpZHRofVxuICAgICAgICBpY29uSGVpZ2h0PXtpY29uSGVpZ2h0fVxuICAgICAgICB0cmltU2lkZT17dHJpbVNpZGVBcnJheX1cbiAgICAgICAgey4uLnByb3BzfVxuICAgICAgPlxuICAgICAgICB7aWNvbiAmJiA8SWNvbiBpY29uPXtpY29ufSAvPn1cbiAgICAgICAge2NoaWxkcmVuICYmIGNoaWxkcmVufVxuICAgICAgPC9XcmFwcGVyPlxuICAgICk7XG4gIH0sXG4pO1xuXG5JY29uQnV0dG9uLnByb3BUeXBlcyA9IHtcbiAgY2hpbGRyZW46IFByb3BUeXBlcy5ub2RlLFxuICBpY29uOiBQcm9wVHlwZXMubm9kZSxcbiAgb25DbGljazogUHJvcFR5cGVzLmZ1bmMsXG4gIGlzRGlzYWJsZWQ6IFByb3BUeXBlcy5ib29sLFxuICBpc0FjdGl2ZTogUHJvcFR5cGVzLmJvb2wsXG4gIHZhcmlhbnQ6IHR5cGVzLmNsZWFyQnV0dG9uVmFyaWFudCxcbiAgdHlwZTogdHlwZXMuYnV0dG9uVHlwZSxcbiAgdGFnOiB0eXBlcy5idXR0b25UYWcsXG4gIHRyaW1TaWRlOiBQcm9wVHlwZXMub25lT2ZUeXBlKFtcbiAgICBQcm9wVHlwZXMub25lT2YoWydsZWZ0JywgJ3JpZ2h0JywgJ3gnLCAneScsICd0b3AnLCAnYm90dG9tJ10pLFxuICAgIFByb3BUeXBlcy5hcnJheSxcbiAgXSksXG59O1xuIl19 */"));
+    trimSides,
+    iconWidth
+  } = _ref;
+  return trimSides && "\n      margin-inline: calc((var(--grn-clearbutton-height) - ".concat(iconWidth, "px) / -2);\n      margin-block: calc((var(--grn-clearbutton-height) - ", 16, "px) / -2);\n    ");
+}, " .Icon{", p => p.clearButtonStyles.icon, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tYnV0dG9uLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFPNkIiLCJmaWxlIjoiLi4vLi4vc3JjL2NvbXBvbmVudHMvaWNvbi1idXR0b24uanN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgSWNvbiB9IGZyb20gJy4vaWNvbic7XG5pbXBvcnQgUmVhY3QsIHsgZm9yd2FyZFJlZiB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCBQcm9wVHlwZXMgZnJvbSAncHJvcC10eXBlcyc7XG5pbXBvcnQgeyB0eXBlcyB9IGZyb20gJy4uL3R5cGVzJztcbmltcG9ydCB7IGdldENsZWFyQnV0dG9uU3R5bGVzIH0gZnJvbSAnLi4vZm91bmRhdGlvbmFsJztcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5idXR0b25gXG4gICR7cCA9PiBwLmNsZWFyQnV0dG9uU3R5bGVzLmJveH07XG4gIG1pbi13aWR0aDogdmFyKC0tZ3JuLWNsZWFyYnV0dG9uLWhlaWdodCk7XG4gIHBhZGRpbmctbGVmdDogOHB4O1xuICBwYWRkaW5nLXJpZ2h0OiA4cHg7XG4gICR7KHsgdHJpbVNpZGVzLCBpY29uV2lkdGggfSkgPT5cbiAgICB0cmltU2lkZXMgJiZcbiAgICBgXG4gICAgICBtYXJnaW4taW5saW5lOiBjYWxjKCh2YXIoLS1ncm4tY2xlYXJidXR0b24taGVpZ2h0KSAtICR7aWNvbldpZHRofXB4KSAvIC0yKTtcbiAgICAgIG1hcmdpbi1ibG9jazogY2FsYygodmFyKC0tZ3JuLWNsZWFyYnV0dG9uLWhlaWdodCkgLSAkezE2fXB4KSAvIC0yKTtcbiAgICBgfVxuXG4gIC5JY29uIHtcbiAgICAke3AgPT4gcC5jbGVhckJ1dHRvblN0eWxlcy5pY29ufTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEljb25CdXR0b24gPSBmb3J3YXJkUmVmKFxuICAoXG4gICAge1xuICAgICAgY2hpbGRyZW4sXG4gICAgICBpc0Rpc2FibGVkLFxuICAgICAgaWNvbixcbiAgICAgIGNvbG9yLFxuICAgICAgdmFyaWFudCA9ICduZXV0cmFsJyxcbiAgICAgIHR5cGUgPSAnYnV0dG9uJyxcbiAgICAgIGlzQWN0aXZlLFxuICAgICAgdGFnID0gJ2J1dHRvbicsXG4gICAgICB0cmltU2lkZXMsXG4gICAgICAuLi5wcm9wc1xuICAgIH0sXG4gICAgcmVmLFxuICApID0+IHtcbiAgICBjb25zdCBjbGVhckJ1dHRvblN0eWxlcyA9IGdldENsZWFyQnV0dG9uU3R5bGVzKHsgdmFyaWFudCwgaXNEaXNhYmxlZCwgaXNBY3RpdmUgfSk7XG4gICAgY29uc3QgaWNvbldpZHRoID0gaWNvbj8udHlwZT8udmlld0JveFdpZHRoIC8gMiB8fCAxNjtcblxuICAgIHJldHVybiAoXG4gICAgICA8V3JhcHBlclxuICAgICAgICB0eXBlPXt0eXBlfVxuICAgICAgICBkaXNhYmxlZD17aXNEaXNhYmxlZH1cbiAgICAgICAgaWNvbj17aWNvbn1cbiAgICAgICAgcmVmPXtyZWZ9XG4gICAgICAgIHZhcmlhbnQ9e3ZhcmlhbnR9XG4gICAgICAgIGNsZWFyQnV0dG9uU3R5bGVzPXtjbGVhckJ1dHRvblN0eWxlc31cbiAgICAgICAgYXM9e3RhZ31cbiAgICAgICAgaWNvbldpZHRoPXtpY29uV2lkdGh9XG4gICAgICAgIHRyaW1TaWRlcz17dHJpbVNpZGVzfVxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICA+XG4gICAgICAgIHtpY29uICYmIDxJY29uIGljb249e2ljb259IC8+fVxuICAgICAgICB7Y2hpbGRyZW4gJiYgY2hpbGRyZW59XG4gICAgICA8L1dyYXBwZXI+XG4gICAgKTtcbiAgfSxcbik7XG5cbkljb25CdXR0b24ucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGljb246IFByb3BUeXBlcy5ub2RlLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGlzQWN0aXZlOiBQcm9wVHlwZXMuYm9vbCxcbiAgdmFyaWFudDogdHlwZXMuY2xlYXJCdXR0b25WYXJpYW50LFxuICB0eXBlOiB0eXBlcy5idXR0b25UeXBlLFxuICB0YWc6IHR5cGVzLmJ1dHRvblRhZyxcbiAgdHJpbVNpZGVzOiBQcm9wVHlwZXMuYm9vbCxcbn07XG4iXX0= */"));
 
-export const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
+export const IconButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var _icon$type;
 
   let {
@@ -62,9 +39,9 @@ export const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     type = 'button',
     isActive,
     tag = 'button',
-    trimSide
-  } = _ref3,
-      props = _objectWithoutProperties(_ref3, _excluded);
+    trimSides
+  } = _ref2,
+      props = _objectWithoutProperties(_ref2, _excluded);
 
   const clearButtonStyles = getClearButtonStyles({
     variant,
@@ -72,8 +49,6 @@ export const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     isActive
   });
   const iconWidth = (icon === null || icon === void 0 ? void 0 : (_icon$type = icon.type) === null || _icon$type === void 0 ? void 0 : _icon$type.viewBoxWidth) / 2 || 16;
-  const iconHeight = 16;
-  const trimSideArray = Array.isArray(trimSide) ? trimSide : [trimSide];
   return ___EmotionJSX(Wrapper, _extends({
     type: type,
     disabled: isDisabled,
@@ -83,8 +58,7 @@ export const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     clearButtonStyles: clearButtonStyles,
     as: tag,
     iconWidth: iconWidth,
-    iconHeight: iconHeight,
-    trimSide: trimSideArray
+    trimSides: trimSides
   }, props), icon && ___EmotionJSX(Icon, {
     icon: icon
   }), children && children);
@@ -98,5 +72,5 @@ IconButton.propTypes = {
   variant: types.clearButtonVariant,
   type: types.buttonType,
   tag: types.buttonTag,
-  trimSide: PropTypes.oneOfType([PropTypes.oneOf(['left', 'right', 'x', 'y', 'top', 'bottom']), PropTypes.array])
+  trimSides: PropTypes.bool
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flodesk/grain",
-  "version": "11.42.0",
+  "version": "11.42.1",
   "description": "Flodesk design system",
   "module": "es/index.js",
   "types": "es/types/index.d.ts",