@flodesk/grain 11.41.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,35 +14,20 @@ import { types } from '../types';
 import { getClearButtonStyles } from '../foundational';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
-const getTrimSideStyles = _ref => {
-  let {
-    iconWidth,
-    trimSide
-  } = _ref;
-  const offset = "calc((var(--grn-clearbutton-height) - ".concat(iconWidth, "px) / -2)");
-  if (!trimSide) return '';
-  if (trimSide === 'left') return "margin-left: ".concat(offset, ";");
-  if (trimSide === 'right') return "margin-right: ".concat(offset, ";");
-  if (trimSide === 'x') return "margin-inline: ".concat(offset, ";");
-};
-
 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,
+    trimSides,
     iconWidth
-  } = _ref2;
-  return trimSide && getTrimSideStyles({
-    iconWidth,
-    trimSide
-  });
-}, ";.Icon{", p => p.clearButtonStyles.icon, ";}" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tYnV0dG9uLmpzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFpQjZCIiwiZmlsZSI6Ii4uLy4uL3NyYy9jb21wb25lbnRzL2ljb24tYnV0dG9uLmpzeCIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEljb24gfSBmcm9tICcuL2ljb24nO1xuaW1wb3J0IFJlYWN0LCB7IGZvcndhcmRSZWYgfSBmcm9tICdyZWFjdCc7XG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgUHJvcFR5cGVzIGZyb20gJ3Byb3AtdHlwZXMnO1xuaW1wb3J0IHsgdHlwZXMgfSBmcm9tICcuLi90eXBlcyc7XG5pbXBvcnQgeyBnZXRDbGVhckJ1dHRvblN0eWxlcyB9IGZyb20gJy4uL2ZvdW5kYXRpb25hbCc7XG5cbmNvbnN0IGdldFRyaW1TaWRlU3R5bGVzID0gKHsgaWNvbldpZHRoLCB0cmltU2lkZSB9KSA9PiB7XG4gIGNvbnN0IG9mZnNldCA9IGBjYWxjKCh2YXIoLS1ncm4tY2xlYXJidXR0b24taGVpZ2h0KSAtICR7aWNvbldpZHRofXB4KSAvIC0yKWA7XG5cbiAgaWYgKCF0cmltU2lkZSkgcmV0dXJuICcnO1xuXG4gIGlmICh0cmltU2lkZSA9PT0gJ2xlZnQnKSByZXR1cm4gYG1hcmdpbi1sZWZ0OiAke29mZnNldH07YDtcbiAgaWYgKHRyaW1TaWRlID09PSAncmlnaHQnKSByZXR1cm4gYG1hcmdpbi1yaWdodDogJHtvZmZzZXR9O2A7XG4gIGlmICh0cmltU2lkZSA9PT0gJ3gnKSByZXR1cm4gYG1hcmdpbi1pbmxpbmU6ICR7b2Zmc2V0fTtgO1xufTtcblxuY29uc3QgV3JhcHBlciA9IHN0eWxlZC5idXR0b25gXG4gICR7cCA9PiBwLmNsZWFyQnV0dG9uU3R5bGVzLmJveH07XG4gIG1pbi13aWR0aDogdmFyKC0tZ3JuLWNsZWFyYnV0dG9uLWhlaWdodCk7XG4gIHBhZGRpbmctbGVmdDogOHB4O1xuICBwYWRkaW5nLXJpZ2h0OiA4cHg7XG4gICR7KHsgdHJpbVNpZGUsIGljb25XaWR0aCB9KSA9PiB0cmltU2lkZSAmJiBnZXRUcmltU2lkZVN0eWxlcyh7IGljb25XaWR0aCwgdHJpbVNpZGUgfSl9O1xuXG4gIC5JY29uIHtcbiAgICAke3AgPT4gcC5jbGVhckJ1dHRvblN0eWxlcy5pY29ufTtcbiAgfVxuYDtcblxuZXhwb3J0IGNvbnN0IEljb25CdXR0b24gPSBmb3J3YXJkUmVmKFxuICAoXG4gICAge1xuICAgICAgY2hpbGRyZW4sXG4gICAgICBpc0Rpc2FibGVkLFxuICAgICAgaWNvbixcbiAgICAgIGNvbG9yLFxuICAgICAgdmFyaWFudCA9ICduZXV0cmFsJyxcbiAgICAgIHR5cGUgPSAnYnV0dG9uJyxcbiAgICAgIGlzQWN0aXZlLFxuICAgICAgdGFnID0gJ2J1dHRvbicsXG4gICAgICB0cmltU2lkZSxcbiAgICAgIC4uLnByb3BzXG4gICAgfSxcbiAgICByZWYsXG4gICkgPT4ge1xuICAgIGNvbnN0IGNsZWFyQnV0dG9uU3R5bGVzID0gZ2V0Q2xlYXJCdXR0b25TdHlsZXMoeyB2YXJpYW50LCBpc0Rpc2FibGVkLCBpc0FjdGl2ZSB9KTtcbiAgICBjb25zdCBpY29uV2lkdGggPSBpY29uPy50eXBlPy52aWV3Qm94V2lkdGggLyAyIHx8IDE2O1xuXG4gICAgcmV0dXJuIChcbiAgICAgIDxXcmFwcGVyXG4gICAgICAgIHR5cGU9e3R5cGV9XG4gICAgICAgIGRpc2FibGVkPXtpc0Rpc2FibGVkfVxuICAgICAgICBpY29uPXtpY29ufVxuICAgICAgICByZWY9e3JlZn1cbiAgICAgICAgdmFyaWFudD17dmFyaWFudH1cbiAgICAgICAgY2xlYXJCdXR0b25TdHlsZXM9e2NsZWFyQnV0dG9uU3R5bGVzfVxuICAgICAgICBhcz17dGFnfVxuICAgICAgICBpY29uV2lkdGg9e2ljb25XaWR0aH1cbiAgICAgICAgdHJpbVNpZGU9e3RyaW1TaWRlfVxuICAgICAgICB7Li4ucHJvcHN9XG4gICAgICA+XG4gICAgICAgIHtpY29uICYmIDxJY29uIGljb249e2ljb259IC8+fVxuICAgICAgICB7Y2hpbGRyZW4gJiYgY2hpbGRyZW59XG4gICAgICA8L1dyYXBwZXI+XG4gICAgKTtcbiAgfSxcbik7XG5cbkljb25CdXR0b24ucHJvcFR5cGVzID0ge1xuICBjaGlsZHJlbjogUHJvcFR5cGVzLm5vZGUsXG4gIGljb246IFByb3BUeXBlcy5ub2RlLFxuICBvbkNsaWNrOiBQcm9wVHlwZXMuZnVuYyxcbiAgaXNEaXNhYmxlZDogUHJvcFR5cGVzLmJvb2wsXG4gIGlzQWN0aXZlOiBQcm9wVHlwZXMuYm9vbCxcbiAgdmFyaWFudDogdHlwZXMuY2xlYXJCdXR0b25WYXJpYW50LFxuICB0eXBlOiB0eXBlcy5idXR0b25UeXBlLFxuICB0YWc6IHR5cGVzLmJ1dHRvblRhZyxcbiAgdHJpbVNpZGU6IFByb3BUeXBlcy5vbmVPZihbJ2xlZnQnLCAncmlnaHQnLCAneCddKSxcbn07XG4iXX0= */"));
+  } = _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 {
@@ -54,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,
@@ -73,7 +58,7 @@ export const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     clearButtonStyles: clearButtonStyles,
     as: tag,
     iconWidth: iconWidth,
-    trimSide: trimSide
+    trimSides: trimSides
   }, props), icon && ___EmotionJSX(Icon, {
     icon: icon
   }), children && children);
@@ -87,5 +72,5 @@ IconButton.propTypes = {
   variant: types.clearButtonVariant,
   type: types.buttonType,
   tag: types.buttonTag,
-  trimSide: PropTypes.oneOf(['left', 'right', 'x'])
+  trimSides: PropTypes.bool
 };

package/es/types/components/icon-button.d.ts

@@ -11,6 +11,7 @@ export interface IconButtonProps
   type?: 'button' | 'submit' | 'reset';
   isActive?: boolean;
   tag?: 'button' | 'a' | 'span';
+  trimSide?: 'left' | 'right' | 'x';
 }
 
 export const IconButton: FC<IconButtonProps>;

package/package.json

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