@festo-ui/react 7.2.0-dev.423 → 7.2.0-dev.427

package/node/lib/components/buttons/button/Button.stories.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.Sizes = exports.Secondary = exports.Primary = exports.Overview = exports.IconOnly = exports.Icon = void 0;
+var _reactIcons = require("@festo-ui/react-icons");
 var _Button = _interopRequireDefault(require("./Button"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -14,25 +15,32 @@ const meta = {
 var _default = exports.default = meta;
 const Overview = exports.Overview = {
   render: () => /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-    className: "fwe-d-flex fwe-justify-content-space-between fwe-align-items-end",
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      children: "Secondary"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      disabled: true,
-      children: "Disabled"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      primary: true,
-      children: "Hero"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      large: true,
-      children: "Large"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      icon: "ecommerce-core-range-product",
-      children: "Icon"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
-      icon: "ecommerce-core-range-product",
-      iconOnly: true,
-      children: "Icon"
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-d-flex fwe-justify-content-space-between fwe-align-items-end",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        children: "Secondary"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        disabled: true,
+        children: "Disabled"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        primary: true,
+        children: "Hero"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        large: true,
+        children: "Large"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fwe-mt-m fwe-d-flex fwe-justify-content-space-between fwe-align-items-end",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        icon: "ecommerce-core-range-product",
+        children: "Icon from iconfont"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCoreRangeProduct, {}),
+        children: "Icon from react icons"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactIcons.IconCoreRangeProduct, {}),
+        iconOnly: true
+      })]
     })]
   })
 };

package/node/lib/components/card/CardNotification.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
+var _warning = _interopRequireDefault(require("../icons/warning"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function CardNotification(_ref) {
   let {
-    iconName,
     className,
     title,
     message
@@ -17,8 +17,8 @@ function CardNotification(_ref) {
   const classes = (0, _classnames.default)('fwe-card-notification', className);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: classes,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-      className: `fwe-icon fwe-icon-${iconName} fwe-icon-lg`
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_warning.default, {
+      size: 24
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
       className: "fwe-card-title",
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h6", {

package/node/lib/components/chips/chip/Chip.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.ChipType = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
+var _IconWrapper = _interopRequireDefault(require("../../icon-wrapper/IconWrapper"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 let ChipType = exports.ChipType = void 0;
@@ -12,8 +13,7 @@ let ChipType = exports.ChipType = void 0;
   ChipType[ChipType["Choice"] = 0] = "Choice";
   ChipType[ChipType["Category"] = 1] = "Category";
   ChipType[ChipType["Filter"] = 2] = "Filter";
-  ChipType[ChipType["Action"] = 3] = "Action";
-  ChipType[ChipType["Readonly"] = 4] = "Readonly";
+  ChipType[ChipType["Readonly"] = 3] = "Readonly";
 })(ChipType || (exports.ChipType = ChipType = {}));
 function Chip(_ref) {
   let {
@@ -45,8 +45,8 @@ function Chip(_ref) {
     (0, _jsxRuntime.jsxs)("div", {
       className: classes,
       onClick: onClick,
-      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: `fwe-icon fwe-icon-${icon}`
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+        icon: icon
       }), children]
     })
   );

package/node/lib/components/icon-wrapper/IconWrapper.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconWrapper;
+var _jsxRuntime = require("react/jsx-runtime");
+function IconWrapper(_ref) {
+  let {
+    icon
+  } = _ref;
+  if (!icon) return null;
+  if (typeof icon === 'string') {
+    let iconName = icon;
+    if (!icon.startsWith('fwe-icon-')) {
+      iconName = `fwe-icon-${icon}`;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+      className: `fwe-icon ${iconName}`
+    });
+  }
+  return icon;
+}

package/node/lib/components/icons/check-small.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconCheckSmall;
+var _jsxRuntime = require("react/jsx-runtime");
+function IconCheckSmall(_ref) {
+  let {
+    className,
+    svgProps,
+    festoColor,
+    size = 16
+  } = _ref;
+  if (size < 24) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "check-small",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h16v16H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "M6.141 12.814 1.934 8.607l1.414-1.414 2.793 2.793 6.793-6.793 1.414 1.414z",
+        "data-name": "content"
+      })]
+    });
+  }
+  if (size < 32 || size === 48) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "check-small",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h24v24H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "m10.141 16.814-4.207-4.207 1.414-1.414 2.793 2.793 6.793-6.793 1.414 1.414z",
+        "data-name": "content"
+      })]
+    });
+  }
+  if (size >= 32) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 32 32",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "check-small",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        "data-name": "content",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          fill: "none",
+          d: "M0 0h32v32H0z"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+          fill: festoColor ? '#0091dc' : 'currentColor',
+          d: "m13.172 22.485-5.657-5.657 1.414-1.414 4.243 4.243 9.899-9.9 1.414 1.415z"
+        })]
+      })
+    });
+  }
+  return null;
+}

package/node/lib/components/icons/collapse.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconCollapse;
+var _jsxRuntime = require("react/jsx-runtime");
+function IconCollapse(_ref) {
+  let {
+    className,
+    svgProps,
+    festoColor,
+    size = 16
+  } = _ref;
+  if (size < 24) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "collapse",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h16v16H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "M8 10.707 3.646 6.354l.708-.708L8 9.293l3.646-3.647.708.708z",
+        "data-name": "content"
+      })]
+    });
+  }
+  if (size < 32 || size === 48) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "collapse",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h24v24H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "M5.636 9.172 12 15.536l6.364-6.364-.707-.708L12 14.121 6.343 8.464z",
+        "data-name": "content"
+      })]
+    });
+  }
+  if (size >= 32) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 32 32",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "collapse",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h32v32H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "m16 22-8.707-8.707 1.414-1.414L16 19.172l7.293-7.293 1.414 1.414z",
+        "data-name": "content"
+      })]
+    });
+  }
+  return null;
+}

package/node/lib/components/icons/expand.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconExpand;
+var _jsxRuntime = require("react/jsx-runtime");
+function IconExpand(_ref) {
+  let {
+    className,
+    svgProps,
+    festoColor,
+    size = 16
+  } = _ref;
+  if (size < 24) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "expand",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h16v16H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "M11.646 10.354 8 6.707l-3.646 3.647-.708-.708L8 5.293l4.354 4.353z",
+        "data-name": "content"
+      })]
+    });
+  }
+  if (size < 32 || size === 48) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "expand",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h24v24H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "M18.364 14.828 12 8.464l-6.364 6.364.707.708L12 9.879l5.657 5.657z",
+        "data-name": "content"
+      })]
+    });
+  }
+  if (size >= 32) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 32 32",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "expand",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h32v32H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "M23.293 21.354 16 14.061l-7.293 7.293-1.414-1.415L16 11.232l8.707 8.707z",
+        "data-name": "content"
+      })]
+    });
+  }
+  return null;
+}

package/node/lib/components/icons/right-2.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconRight2;
+var _jsxRuntime = require("react/jsx-runtime");
+function IconRight2(_ref) {
+  let {
+    className,
+    svgProps,
+    festoColor,
+    size = 16
+  } = _ref;
+  if (size < 24) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-name": "white background",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "right-2",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 16V0h16v16z"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "m10.707 8-4.353 4.354-.708-.708L9.293 8 5.646 4.354l.708-.708z"
+      })]
+    });
+  }
+  if (size < 32 || size === 48) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-name": "white background",
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "right-2",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 24V0h24v24z"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "M9.172 18.364 15.536 12 9.172 5.636l-.708.707L14.121 12l-5.657 5.657z"
+      })]
+    });
+  }
+  if (size >= 32) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      "data-name": "white background",
+      viewBox: "0 0 32 32",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "right-2",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 32V0h32v32z"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#0091dc' : 'currentColor',
+        d: "m22 16-8.707 8.707-1.414-1.414L19.172 16l-7.293-7.293 1.414-1.414z"
+      })]
+    });
+  }
+  return null;
+}

package/node/lib/components/icons/warning.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = IconWarning;
+var _jsxRuntime = require("react/jsx-runtime");
+function IconWarning(_ref) {
+  let {
+    className,
+    svgProps,
+    festoColor,
+    size = 16
+  } = _ref;
+  if (size < 24) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 16 16",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "warning",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h16v16H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#ff9600' : 'currentColor',
+        d: "M15.216 13.53 8.882 1.653a1 1 0 0 0-1.764 0L.784 13.53A1 1 0 0 0 1.667 15h12.666a1 1 0 0 0 .883-1.47M9 13H7v-2h2Zm0-3H7V5h2Z",
+        "data-name": "content"
+      })]
+    });
+  }
+  if (size < 32 || size === 48) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "warning",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h24v24H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#ff9600' : 'currentColor',
+        d: "M22.4 19.86 13.273 2.743a1.441 1.441 0 0 0-2.544 0L1.6 19.86a1.44 1.44 0 0 0 1.272 2.12H21.13a1.44 1.44 0 0 0 1.272-2.12M11 7h2v8h-2Zm2.005 11.965h-2.01v-2.01h2.01Z",
+        "data-name": "content"
+      })]
+    });
+  }
+  if (size >= 32) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 32 32",
+      width: size,
+      height: size,
+      ...svgProps,
+      className: `fwe-svg-icon${className ? ` ${className}` : ''}`,
+      "aria-label": "warning",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: "none",
+        d: "M0 0h32v32H0z",
+        "data-name": "white background"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        fill: festoColor ? '#ff9600' : 'currentColor',
+        d: "M30.431 26.059 17.765 2.309a2 2 0 0 0-3.53 0L1.57 26.059A2 2 0 0 0 3.333 29h25.334a2 2 0 0 0 1.764-2.941M17 25h-2v-2h2Zm0-5h-2V10h2Z",
+        "data-name": "content"
+      })]
+    });
+  }
+  return null;
+}

package/node/lib/components/link-button/LinkButton.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
+var _IconWrapper = _interopRequireDefault(require("../icon-wrapper/IconWrapper"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const LinkButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
@@ -20,17 +21,9 @@ const LinkButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = _ref;
   const classes = (0, _classnames.default)('fwe-btn', 'fwe-btn-link', {
     'fwe-disabled': disabled
+  }, {
+    'fwe-btn-icon': iconOnly
   }, className);
-  let innerIcon;
-  if (icon) {
-    if (typeof icon === 'string') {
-      innerIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-        className: `fwe-icon fwe-icon-${icon}`
-      });
-    } else {
-      innerIcon = icon;
-    }
-  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("button", {
     onClick: onClick,
     type: "button",
@@ -38,7 +31,9 @@ const LinkButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     disabled: disabled,
     ref: ref,
     ...props,
-    children: [innerIcon, !iconOnly && children]
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+      icon: icon
+    }), !iconOnly && children]
   });
 });
 var _default = exports.default = LinkButton;

package/node/lib/components/mobile-flyout/mobile-flyout-item/MobileFlyoutItem.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = require("react");
 var _MobileFlyoutContext = _interopRequireDefault(require("../MobileFlyoutContext"));
+var _right = _interopRequireDefault(require("../../icons/right-2"));
+var _IconWrapper = _interopRequireDefault(require("../../icon-wrapper/IconWrapper"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
@@ -44,16 +46,16 @@ const MobileFlyoutItem = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     ...props,
     ref: ref,
     onClick: handleClick,
-    children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-      className: `fwe-mr-xs fwe-icon fwe-icon-${icon}`
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_IconWrapper.default, {
+      icon: icon
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames.default)('fwe-flex-grow-1', {
         'fwe-color-hero': active
+      }, {
+        'fwe-ml-xxs': !!icon
       }),
       children: children
-    }), pageLink && /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-      className: "fwe-icon fwe-icon-arrows-right-2"
-    })]
+    }), pageLink && /*#__PURE__*/(0, _jsxRuntime.jsx)(_right.default, {})]
   });
 });
 var _default = exports.default = MobileFlyoutItem;

package/node/lib/components/mobile-flyout/mobile-flyout-page/MobileFlyoutPage.js

@@ -35,15 +35,15 @@ const MobileFlyoutPage = exports.MobileFlyoutPage = /*#__PURE__*/(0, _react.forw
     }),
     ref: ref,
     ...props,
-    children: [!root && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [!root && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       tabIndex: 0,
       role: "button",
       className: "fwe-page-back",
       onClick: handleChange,
       onKeyUp: handleChange,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         children: innerBack
-      })]
+      })
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: "fwe-mobile-flyout-item-container",
       children: children

package/node/lib/components/modals/imageGallery/ImageGallery.js

@@ -59,27 +59,18 @@ const ImageGallery = exports.ImageGallery = /*#__PURE__*/(0, _react.forwardRef)(
           length: images.length,
           pagination: pagination
         }), showScaleButton ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          "aria-label": "scale up",
           type: "button",
-          className: "fwe-btn fwe-btn-link fwe-ml-auto",
-          onClick: handleScale,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: (0, _classnames.default)('fwe-icon fwe-icon-lg fwe-color-white fwe-modal-image-gallery-scale', {
-              'fwe-icon-arrows-scale-down': isScaled,
-              'fwe-icon-arrows-scale-up': !isScaled
-            })
-          })
+          "aria-label": "scale up",
+          className: "fwe-image-gallery-scale-btn fwe-ml-auto",
+          onClick: handleScale
         }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
-          "aria-label": "close",
           type: "button",
-          className: (0, _classnames.default)('fwe-btn fwe-btn-link', {
+          "aria-label": "close",
+          className: (0, _classnames.default)('fwe-image-gallery-close-btn', {
             'fwe-ml-auto': !showScaleButton,
             'fwe-ml-3': showScaleButton
           }),
-          onClick: onClose,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "fwe-icon fwe-icon-2x fwe-color-white fwe-icon-menu-close fwe-modal-image-gallery-close"
-          })
+          onClick: onClose
         })]
       }), descriptiveContent ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
         className: "fwe-image-gallery-container",