@micromag/core 0.3.359 → 0.3.362

package/assets/css/styles.css

@@ -2,6 +2,7 @@
 
 .micromag-core-forms-form-actions{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;margin-top:2rem}.micromag-core-forms-form-actions.micromag-core-forms-form-left{-ms-flex-pack:start;justify-content:flex-start}.micromag-core-forms-form-actions.micromag-core-forms-form-right{-ms-flex-pack:end;justify-content:flex-end}
 .micromag-core-partials-link-withoutStyle{color:inherit;text-decoration:none}.micromag-core-partials-link-withoutStyle:hover{color:inherit;text-decoration:none}
+@-webkit-keyframes micromag-core-partials-spinner-rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes micromag-core-partials-spinner-rotate{to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@-webkit-keyframes micromag-core-partials-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}@keyframes micromag-core-partials-spinner-dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.micromag-core-partials-spinner-container{display:block;height:40px;width:40px}.micromag-core-partials-spinner-container .micromag-core-partials-spinner-path{stroke-linecap:round;color:currentColor}.micromag-core-partials-spinner-container.micromag-core-partials-spinner-animated{-webkit-animation:micromag-core-partials-spinner-rotate 2s linear infinite;animation:micromag-core-partials-spinner-rotate 2s linear infinite}.micromag-core-partials-spinner-container.micromag-core-partials-spinner-animated .micromag-core-partials-spinner-path{-webkit-animation:micromag-core-partials-spinner-dash 1.5s ease-in-out infinite;animation:micromag-core-partials-spinner-dash 1.5s ease-in-out infinite}
 
 .micromag-core-menus-breadcrumb-container .micromag-core-menus-breadcrumb-arrow+.micromag-core-menus-breadcrumb-arrow:before{content:">"}
 .micromag-core-menus-navbar-collapse{-ms-flex-preferred-size:initial;-ms-flex-positive:initial;flex-basis:auto;flex-grow:0}@media screen and (min-width:768px){.micromag-core-menus-navbar-collapse{-ms-flex-preferred-size:100%;-ms-flex-positive:1;flex-basis:100%;flex-grow:1}}

package/es/components.js

@@ -66,7 +66,7 @@ var Label = function Label(_ref) {
 Label.propTypes = propTypes$S;
 Label.defaultProps = defaultProps$S;
 
-var styles$w = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withIcon":"micromag-core-buttons-button-withIcon","right":"micromag-core-buttons-button-right","withAnimations":"micromag-core-buttons-button-withAnimations","icon-right":"micromag-core-buttons-button-icon-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
+var styles$x = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withIcon":"micromag-core-buttons-button-withIcon","right":"micromag-core-buttons-button-right","withAnimations":"micromag-core-buttons-button-withAnimations","icon-right":"micromag-core-buttons-button-icon-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
 
 var _excluded$b = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
 var propTypes$R = {
@@ -173,24 +173,24 @@ var Button$1 = function Button(_ref) {
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, hasInlineIcon ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$w.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
+    className: classNames([styles$x.icon, _defineProperty({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$w.label, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$x.label, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$w.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+    className: classNames([styles$x.left, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
   }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$w.center, _defineProperty({}, labelClassName, labelClassName !== null)])
+    className: classNames([styles$x.center, _defineProperty({}, labelClassName, labelClassName !== null)])
   }, text), /*#__PURE__*/React.createElement("span", {
-    className: classNames([styles$w.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+    className: classNames([styles$x.right, _defineProperty({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
   }, iconPosition === 'right' ? icon : null), hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
   var withStyle = !withoutTheme && !withoutStyle && !asLink;
   var buttonClassNames = classNames([!withoutBootstrapStyles ? (_ref7 = {
     btn: withStyle
-  }, _defineProperty(_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty(_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty(_ref7, "active", !withoutStyle && active), _ref7) : null, styles$w.container, (_ref8 = {}, _defineProperty(_ref8, styles$w.withoutStyle, withoutStyle), _defineProperty(_ref8, styles$w.withIcon, hasIcon), _defineProperty(_ref8, styles$w.withIconColumns, hasIconColumns), _defineProperty(_ref8, styles$w.withText, text !== null), _defineProperty(_ref8, styles$w.withShadow, withShadow), _defineProperty(_ref8, styles$w.isSmall, small), _defineProperty(_ref8, styles$w.isBig, big), _defineProperty(_ref8, styles$w.isLink, href !== null), _defineProperty(_ref8, styles$w.asLink, asLink), _defineProperty(_ref8, styles$w.isDisabled, disabled), _defineProperty(_ref8, styles$w.isLoading, loading), _defineProperty(_ref8, className, className !== null), _ref8)]);
+  }, _defineProperty(_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty(_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty(_ref7, "active", !withoutStyle && active), _ref7) : null, styles$x.container, (_ref8 = {}, _defineProperty(_ref8, styles$x.withoutStyle, withoutStyle), _defineProperty(_ref8, styles$x.withIcon, hasIcon), _defineProperty(_ref8, styles$x.withIconColumns, hasIconColumns), _defineProperty(_ref8, styles$x.withText, text !== null), _defineProperty(_ref8, styles$x.withShadow, withShadow), _defineProperty(_ref8, styles$x.isSmall, small), _defineProperty(_ref8, styles$x.isBig, big), _defineProperty(_ref8, styles$x.isLink, href !== null), _defineProperty(_ref8, styles$x.asLink, asLink), _defineProperty(_ref8, styles$x.isDisabled, disabled), _defineProperty(_ref8, styles$x.isLoading, loading), _defineProperty(_ref8, className, className !== null), _ref8)]);
   if (href !== null) {
     var linkClassNames = classNames([buttonClassNames, _defineProperty({
       disabled: disabled
-    }, styles$w.linkDisabled, disabled)]);
+    }, styles$x.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/React.createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
@@ -218,7 +218,7 @@ var Button$1 = function Button(_ref) {
 Button$1.propTypes = propTypes$R;
 Button$1.defaultProps = defaultProps$R;
 
-var styles$v = {};
+var styles$w = {};
 
 var _excluded$a = ["className", "onClick", "theme"];
 var propTypes$Q = {
@@ -248,7 +248,7 @@ var Buttons = function Buttons(_ref) {
     buttonClassName = _ref.buttonClassName,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("div", {
-    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$v.container, _defineProperty({}, className, className !== null)]),
+    className: classNames(['btn-group', _defineProperty({}, "btn-group-".concat(size), size !== null), styles$w.container, _defineProperty({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
     var _ref4;
@@ -261,7 +261,7 @@ var Buttons = function Buttons(_ref) {
       buttonProps = _objectWithoutProperties(button, _excluded$a);
     var fixedProps = {
       key: "button-".concat(index),
-      className: classNames([styles$v.button, (_ref4 = {}, _defineProperty(_ref4, buttonClassName, buttonClassName !== null), _defineProperty(_ref4, customClassName, customClassName !== null), _ref4)]),
+      className: classNames([styles$w.button, (_ref4 = {}, _defineProperty(_ref4, buttonClassName, buttonClassName !== null), _defineProperty(_ref4, customClassName, customClassName !== null), _ref4)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
           _onClick(e, button, index);
@@ -397,7 +397,7 @@ var FieldForm = function FieldForm(_ref) {
 FieldForm.propTypes = propTypes$O;
 FieldForm.defaultProps = defaultProps$O;
 
-var styles$u = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
+var styles$v = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
 var propTypes$N = {
   action: PropTypes$1.string.isRequired,
@@ -570,7 +570,7 @@ var Form = function Form(_ref) {
 
   return /*#__PURE__*/React.createElement("form", {
     action: action,
-    className: classNames([styles$u.container, _defineProperty({}, className, className !== null)]),
+    className: classNames([styles$v.container, _defineProperty({}, className, className !== null)]),
     method: method,
     onSubmit: onSubmit
   }, !withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
@@ -580,7 +580,7 @@ var Form = function Form(_ref) {
     outline: true,
     onClick: closeFieldForm
   })) : null, fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames(['w-100', styles$u.panel]),
+    className: classNames(['w-100', styles$v.panel]),
     key: "field"
   }, /*#__PURE__*/React.createElement(FieldForm, {
     name: fieldName,
@@ -596,11 +596,11 @@ var Form = function Form(_ref) {
     onChange: setValue,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm,
-    className: classNames([styles$u.fields, _defineProperty({}, fieldsClassName, fieldsClassName !== null)])
+    className: classNames([styles$v.fields, _defineProperty({}, fieldsClassName, fieldsClassName !== null)])
   }) : null, generalError ? /*#__PURE__*/React.createElement("p", {
     className: "text-danger my-1"
   }, generalError) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/React.createElement("div", {
-    className: classNames([styles$u.actions, (_ref4 = {}, _defineProperty(_ref4, styles$u[actionsAlign], actionsAlign), _defineProperty(_ref4, actionsClassName, actionsClassName !== null), _ref4)])
+    className: classNames([styles$v.actions, (_ref4 = {}, _defineProperty(_ref4, styles$v[actionsAlign], actionsAlign), _defineProperty(_ref4, actionsClassName, actionsClassName !== null), _ref4)])
   }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React.createElement(Button$1, {
     type: "button",
     onClick: onCancel,
@@ -617,7 +617,7 @@ var Form = function Form(_ref) {
     }]
   })) : null, buttons !== null ? /*#__PURE__*/React.createElement(Buttons, {
     buttons: buttons,
-    className: styles$u.buttons
+    className: styles$v.buttons
   }) : /*#__PURE__*/React.createElement(Button$1, {
     type: "submit",
     theme: submitButtonTheme || 'primary',
@@ -635,7 +635,7 @@ var Form = function Form(_ref) {
 Form.propTypes = propTypes$N;
 Form.defaultProps = defaultProps$N;
 
-var styles$t = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
+var styles$u = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
 var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
 var propTypes$M = {
@@ -666,12 +666,12 @@ var Link = function Link(_ref) {
     withoutStyle = _ref.withoutStyle,
     props = _objectWithoutProperties(_ref, _excluded$7);
   return external ? /*#__PURE__*/React.createElement("a", Object.assign({
-    className: classNames([className, _defineProperty({}, styles$t.withoutStyle, withoutStyle)]),
+    className: classNames([className, _defineProperty({}, styles$u.withoutStyle, withoutStyle)]),
     href: href,
     target: target,
     rel: rel
   }, props), /*#__PURE__*/React.createElement(Label, null, children)) : /*#__PURE__*/React.createElement(Link$1, Object.assign({
-    className: classNames([className, _defineProperty({}, styles$t.withoutStyle, withoutStyle)]),
+    className: classNames([className, _defineProperty({}, styles$u.withoutStyle, withoutStyle)]),
     to: href
   }, props), /*#__PURE__*/React.createElement(Label, null, children));
 };
@@ -825,73 +825,41 @@ var Card = function Card(_ref) {
 Card.propTypes = propTypes$L;
 Card.defaultProps = defaultProps$L;
 
+var styles$t = {"container":"micromag-core-partials-spinner-container","path":"micromag-core-partials-spinner-path","animated":"micromag-core-partials-spinner-animated","rotate":"micromag-core-partials-spinner-rotate","dash":"micromag-core-partials-spinner-dash"};
+
 var propTypes$K = {
   animated: PropTypes$1.bool,
   color: PropTypes$1.string,
+  strokeWidth: PropTypes$1.number,
   className: PropTypes$1.string
 };
 var defaultProps$K = {
   animated: true,
   color: 'currentColor',
+  strokeWidth: 3,
   className: null
 };
 var Spinner = function Spinner(_ref) {
+  var _ref2;
   var animated = _ref.animated,
     color = _ref.color,
+    strokeWidth = _ref.strokeWidth,
     className = _ref.className;
   return /*#__PURE__*/React.createElement("svg", {
-    className: classNames([_defineProperty({}, className, className !== null)]),
-    width: "38",
-    height: "38",
-    viewBox: "0 0 38 38",
+    className: classNames([styles$t.container, (_ref2 = {}, _defineProperty(_ref2, styles$t.animated, animated), _defineProperty(_ref2, className, className !== null), _ref2)]),
+    width: "40",
+    height: "40",
+    viewBox: "0 0 40 40",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    x1: "8.042%",
-    y1: "0%",
-    x2: "65.682%",
-    y2: "23.865%",
-    id: "a"
-  }, /*#__PURE__*/React.createElement("stop", {
-    stopColor: color,
-    stopOpacity: "0",
-    offset: "0%"
-  }), /*#__PURE__*/React.createElement("stop", {
-    stopColor: color,
-    stopOpacity: ".631",
-    offset: "63.146%"
-  }), /*#__PURE__*/React.createElement("stop", {
-    stopColor: color,
-    offset: "100%"
-  }))), /*#__PURE__*/React.createElement("g", {
+  }, /*#__PURE__*/React.createElement("circle", {
+    className: styles$t.path,
+    cx: "20",
+    cy: "20",
+    r: "12",
     fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("g", {
-    transform: "translate(1 1)"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M36 18c0-9.94-8.06-18-18-18",
-    id: "Oval-2",
-    stroke: "url(#a)",
-    strokeWidth: "2"
-  }, animated ? /*#__PURE__*/React.createElement("animateTransform", {
-    attributeName: "transform",
-    type: "rotate",
-    from: "0 18 18",
-    to: "360 18 18",
-    dur: "0.9s",
-    repeatCount: "indefinite"
-  }) : null), /*#__PURE__*/React.createElement("circle", {
-    fill: color,
-    cx: "36",
-    cy: "18",
-    r: "1"
-  }, animated ? /*#__PURE__*/React.createElement("animateTransform", {
-    attributeName: "transform",
-    type: "rotate",
-    from: "0 18 18",
-    to: "360 18 18",
-    dur: "0.9s",
-    repeatCount: "indefinite"
-  }) : null))));
+    stroke: color,
+    strokeWidth: strokeWidth
+  }));
 };
 Spinner.propTypes = propTypes$K;
 Spinner.defaultProps = defaultProps$K;
@@ -1293,7 +1261,7 @@ var Dropdown = function Dropdown(_ref) {
       }
     } : null;
     return ItemComponent !== null ? /*#__PURE__*/React.createElement("div", {
-      key: "item-".concat(index, "-").concat(label, "-").concat(type)
+      key: "item-".concat(index + 1, "-").concat(label, "-").concat(type)
     }, /*#__PURE__*/React.createElement(ItemComponent, Object.assign({
       className: classNames([(_ref3 = {
         'dropdown-item': type === 'link' || type === 'button',
@@ -2857,7 +2825,7 @@ var quizAnswer = PropTypes$1.shape(_objectSpread(_objectSpread({}, answerShape),
 PropTypes$1.arrayOf(answer);
 PropTypes$1.arrayOf(quizAnswer);
 var callToActionTypes = PropTypes$1.oneOf(['swipe-up', 'button']);
-PropTypes$1.shape({
+var callToAction = PropTypes$1.shape({
   active: PropTypes$1.bool,
   type: callToActionTypes,
   url: PropTypes$1.string,
@@ -3102,10 +3070,16 @@ PropTypes$1.shape({
   id: PropTypes$1.oneOfType([PropTypes$1.string, PropTypes$1.number]),
   name: PropTypes$1.string
 });
-PropTypes$1.shape({
+var badge = PropTypes$1.shape({
   label: textElement,
   buttonStyle: boxStyle
 });
+PropTypes$1.shape({
+  badge: badge
+});
+PropTypes$1.shape({
+  callToAction: callToAction
+});
 
 /* eslint-disable react/no-array-index-key */
 var propTypes$d = {

package/es/index.js

@@ -609,6 +609,12 @@ var badge = PropTypes$1.shape({
   label: textElement,
   buttonStyle: boxStyle
 });
+var header = PropTypes$1.shape({
+  badge: badge
+});
+var footer = PropTypes$1.shape({
+  callToAction: callToAction
+});
 
 var PropTypes = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -754,7 +760,9 @@ var PropTypes = /*#__PURE__*/Object.freeze({
     pageMetadata: pageMetadata,
     authorElement: authorElement,
     visitor: visitor,
-    badge: badge
+    badge: badge,
+    header: header,
+    footer: footer
 });
 
 var sortedColors = function sortedColors(colors) {

package/lib/components.js

@@ -107,7 +107,7 @@ var Label = function Label(_ref) {
 Label.propTypes = propTypes$S;
 Label.defaultProps = defaultProps$S;
 
-var styles$w = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withIcon":"micromag-core-buttons-button-withIcon","right":"micromag-core-buttons-button-right","withAnimations":"micromag-core-buttons-button-withAnimations","icon-right":"micromag-core-buttons-button-icon-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
+var styles$x = {"container":"micromag-core-buttons-button-container","asLink":"micromag-core-buttons-button-asLink","withoutStyle":"micromag-core-buttons-button-withoutStyle","icon":"micromag-core-buttons-button-icon","label":"micromag-core-buttons-button-label","withIcon":"micromag-core-buttons-button-withIcon","right":"micromag-core-buttons-button-right","withAnimations":"micromag-core-buttons-button-withAnimations","icon-right":"micromag-core-buttons-button-icon-right","withIconColumns":"micromag-core-buttons-button-withIconColumns","linkDisabled":"micromag-core-buttons-button-linkDisabled"};
 
 var _excluded$b = ["type", "theme", "size", "href", "external", "direct", "target", "label", "children", "focusable", "active", "icon", "iconPosition", "disabled", "loading", "disableOnLoading", "small", "big", "withShadow", "withoutStyle", "withoutBootstrapStyles", "withoutTheme", "asLink", "outline", "onClick", "className", "iconClassName", "labelClassName", "refButton"];
 var propTypes$R = {
@@ -214,24 +214,24 @@ var Button$1 = function Button(_ref) {
   var hasInlineIcon = hasIcon && (iconPosition === 'inline' || text === null);
   var hasIconColumns = hasIcon && !hasInlineIcon;
   var content = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, hasInlineIcon ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$w.icon, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null)])
+    className: classNames__default["default"]([styles$x.icon, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null)])
   }, icon), text !== null ? /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$w.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
+    className: classNames__default["default"]([styles$x.label, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
   }, text) : null) : null, hasIconColumns ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$w.left, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
+    className: classNames__default["default"]([styles$x.left, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'left')])
   }, iconPosition === 'left' ? icon : null), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$w.center, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
+    className: classNames__default["default"]([styles$x.center, _defineProperty__default["default"]({}, labelClassName, labelClassName !== null)])
   }, text), /*#__PURE__*/React__default["default"].createElement("span", {
-    className: classNames__default["default"]([styles$w.right, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
+    className: classNames__default["default"]([styles$x.right, _defineProperty__default["default"]({}, iconClassName, iconClassName !== null && iconPosition === 'right')])
   }, iconPosition === 'right' ? icon : null), hasChildren ? children : null) : null, !hasIcon ? text : null, hasChildren ? children : null);
   var withStyle = !withoutTheme && !withoutStyle && !asLink;
   var buttonClassNames = classNames__default["default"]([!withoutBootstrapStyles ? (_ref7 = {
     btn: withStyle
-  }, _defineProperty__default["default"](_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty__default["default"](_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty__default["default"](_ref7, "active", !withoutStyle && active), _ref7) : null, styles$w.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$w.withoutStyle, withoutStyle), _defineProperty__default["default"](_ref8, styles$w.withIcon, hasIcon), _defineProperty__default["default"](_ref8, styles$w.withIconColumns, hasIconColumns), _defineProperty__default["default"](_ref8, styles$w.withText, text !== null), _defineProperty__default["default"](_ref8, styles$w.withShadow, withShadow), _defineProperty__default["default"](_ref8, styles$w.isSmall, small), _defineProperty__default["default"](_ref8, styles$w.isBig, big), _defineProperty__default["default"](_ref8, styles$w.isLink, href !== null), _defineProperty__default["default"](_ref8, styles$w.asLink, asLink), _defineProperty__default["default"](_ref8, styles$w.isDisabled, disabled), _defineProperty__default["default"](_ref8, styles$w.isLoading, loading), _defineProperty__default["default"](_ref8, className, className !== null), _ref8)]);
+  }, _defineProperty__default["default"](_ref7, "btn-".concat(outline ? 'outline-' : '').concat(theme), withStyle && theme !== null), _defineProperty__default["default"](_ref7, "btn-".concat(size), withStyle && size !== null), _defineProperty__default["default"](_ref7, "active", !withoutStyle && active), _ref7) : null, styles$x.container, (_ref8 = {}, _defineProperty__default["default"](_ref8, styles$x.withoutStyle, withoutStyle), _defineProperty__default["default"](_ref8, styles$x.withIcon, hasIcon), _defineProperty__default["default"](_ref8, styles$x.withIconColumns, hasIconColumns), _defineProperty__default["default"](_ref8, styles$x.withText, text !== null), _defineProperty__default["default"](_ref8, styles$x.withShadow, withShadow), _defineProperty__default["default"](_ref8, styles$x.isSmall, small), _defineProperty__default["default"](_ref8, styles$x.isBig, big), _defineProperty__default["default"](_ref8, styles$x.isLink, href !== null), _defineProperty__default["default"](_ref8, styles$x.asLink, asLink), _defineProperty__default["default"](_ref8, styles$x.isDisabled, disabled), _defineProperty__default["default"](_ref8, styles$x.isLoading, loading), _defineProperty__default["default"](_ref8, className, className !== null), _ref8)]);
   if (href !== null) {
     var linkClassNames = classNames__default["default"]([buttonClassNames, _defineProperty__default["default"]({
       disabled: disabled
-    }, styles$w.linkDisabled, disabled)]);
+    }, styles$x.linkDisabled, disabled)]);
     return external || direct ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({}, props, {
       href: disabled ? null : href,
       className: linkClassNames,
@@ -259,7 +259,7 @@ var Button$1 = function Button(_ref) {
 Button$1.propTypes = propTypes$R;
 Button$1.defaultProps = defaultProps$R;
 
-var styles$v = {};
+var styles$w = {};
 
 var _excluded$a = ["className", "onClick", "theme"];
 var propTypes$Q = {
@@ -289,7 +289,7 @@ var Buttons = function Buttons(_ref) {
     buttonClassName = _ref.buttonClassName,
     className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['btn-group', _defineProperty__default["default"]({}, "btn-group-".concat(size), size !== null), styles$v.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"](['btn-group', _defineProperty__default["default"]({}, "btn-group-".concat(size), size !== null), styles$w.container, _defineProperty__default["default"]({}, className, className !== null)]),
     role: "group"
   }, buttons.map(function (button, index) {
     var _ref4;
@@ -302,7 +302,7 @@ var Buttons = function Buttons(_ref) {
       buttonProps = _objectWithoutProperties__default["default"](button, _excluded$a);
     var fixedProps = {
       key: "button-".concat(index),
-      className: classNames__default["default"]([styles$v.button, (_ref4 = {}, _defineProperty__default["default"](_ref4, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref4, customClassName, customClassName !== null), _ref4)]),
+      className: classNames__default["default"]([styles$w.button, (_ref4 = {}, _defineProperty__default["default"](_ref4, buttonClassName, buttonClassName !== null), _defineProperty__default["default"](_ref4, customClassName, customClassName !== null), _ref4)]),
       onClick: function onClick(e) {
         if (_onClick !== null) {
           _onClick(e, button, index);
@@ -438,7 +438,7 @@ var FieldForm = function FieldForm(_ref) {
 FieldForm.propTypes = propTypes$O;
 FieldForm.defaultProps = defaultProps$O;
 
-var styles$u = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
+var styles$v = {"actions":"micromag-core-forms-form-actions","left":"micromag-core-forms-form-left","right":"micromag-core-forms-form-right"};
 
 var propTypes$N = {
   action: PropTypes__default["default"].string.isRequired,
@@ -611,7 +611,7 @@ var Form = function Form(_ref) {
 
   return /*#__PURE__*/React__default["default"].createElement("form", {
     action: action,
-    className: classNames__default["default"]([styles$u.container, _defineProperty__default["default"]({}, className, className !== null)]),
+    className: classNames__default["default"]([styles$v.container, _defineProperty__default["default"]({}, className, className !== null)]),
     method: method,
     onSubmit: onSubmit
   }, !withoutBackButton && fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -621,7 +621,7 @@ var Form = function Form(_ref) {
     outline: true,
     onClick: closeFieldForm
   })) : null, fields !== null && fields.length > 0 && fieldParams !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"](['w-100', styles$u.panel]),
+    className: classNames__default["default"](['w-100', styles$v.panel]),
     key: "field"
   }, /*#__PURE__*/React__default["default"].createElement(FieldForm, {
     name: fieldName,
@@ -637,11 +637,11 @@ var Form = function Form(_ref) {
     onChange: setValue,
     gotoFieldForm: gotoFieldForm,
     closeFieldForm: closeFieldForm,
-    className: classNames__default["default"]([styles$u.fields, _defineProperty__default["default"]({}, fieldsClassName, fieldsClassName !== null)])
+    className: classNames__default["default"]([styles$v.fields, _defineProperty__default["default"]({}, fieldsClassName, fieldsClassName !== null)])
   }) : null, generalError ? /*#__PURE__*/React__default["default"].createElement("p", {
     className: "text-danger my-1"
   }, generalError) : null, children, !withoutActions && fieldParams === null ? /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames__default["default"]([styles$u.actions, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$u[actionsAlign], actionsAlign), _defineProperty__default["default"](_ref4, actionsClassName, actionsClassName !== null), _ref4)])
+    className: classNames__default["default"]([styles$v.actions, (_ref4 = {}, _defineProperty__default["default"](_ref4, styles$v[actionsAlign], actionsAlign), _defineProperty__default["default"](_ref4, actionsClassName, actionsClassName !== null), _ref4)])
   }, onCancel !== null || onCancelHref !== null ? /*#__PURE__*/React__default["default"].createElement(Button$1, {
     type: "button",
     onClick: onCancel,
@@ -658,7 +658,7 @@ var Form = function Form(_ref) {
     }]
   })) : null, buttons !== null ? /*#__PURE__*/React__default["default"].createElement(Buttons, {
     buttons: buttons,
-    className: styles$u.buttons
+    className: styles$v.buttons
   }) : /*#__PURE__*/React__default["default"].createElement(Button$1, {
     type: "submit",
     theme: submitButtonTheme || 'primary',
@@ -676,7 +676,7 @@ var Form = function Form(_ref) {
 Form.propTypes = propTypes$N;
 Form.defaultProps = defaultProps$N;
 
-var styles$t = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
+var styles$u = {"withoutStyle":"micromag-core-partials-link-withoutStyle"};
 
 var _excluded$7 = ["href", "external", "children", "target", "rel", "className", "withoutStyle"];
 var propTypes$M = {
@@ -707,12 +707,12 @@ var Link = function Link(_ref) {
     withoutStyle = _ref.withoutStyle,
     props = _objectWithoutProperties__default["default"](_ref, _excluded$7);
   return external ? /*#__PURE__*/React__default["default"].createElement("a", Object.assign({
-    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$t.withoutStyle, withoutStyle)]),
+    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$u.withoutStyle, withoutStyle)]),
     href: href,
     target: target,
     rel: rel
   }, props), /*#__PURE__*/React__default["default"].createElement(Label, null, children)) : /*#__PURE__*/React__default["default"].createElement(reactRouterDom.Link, Object.assign({
-    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$t.withoutStyle, withoutStyle)]),
+    className: classNames__default["default"]([className, _defineProperty__default["default"]({}, styles$u.withoutStyle, withoutStyle)]),
     to: href
   }, props), /*#__PURE__*/React__default["default"].createElement(Label, null, children));
 };
@@ -866,73 +866,41 @@ var Card = function Card(_ref) {
 Card.propTypes = propTypes$L;
 Card.defaultProps = defaultProps$L;
 
+var styles$t = {"container":"micromag-core-partials-spinner-container","path":"micromag-core-partials-spinner-path","animated":"micromag-core-partials-spinner-animated","rotate":"micromag-core-partials-spinner-rotate","dash":"micromag-core-partials-spinner-dash"};
+
 var propTypes$K = {
   animated: PropTypes__default["default"].bool,
   color: PropTypes__default["default"].string,
+  strokeWidth: PropTypes__default["default"].number,
   className: PropTypes__default["default"].string
 };
 var defaultProps$K = {
   animated: true,
   color: 'currentColor',
+  strokeWidth: 3,
   className: null
 };
 var Spinner = function Spinner(_ref) {
+  var _ref2;
   var animated = _ref.animated,
     color = _ref.color,
+    strokeWidth = _ref.strokeWidth,
     className = _ref.className;
   return /*#__PURE__*/React__default["default"].createElement("svg", {
-    className: classNames__default["default"]([_defineProperty__default["default"]({}, className, className !== null)]),
-    width: "38",
-    height: "38",
-    viewBox: "0 0 38 38",
+    className: classNames__default["default"]([styles$t.container, (_ref2 = {}, _defineProperty__default["default"](_ref2, styles$t.animated, animated), _defineProperty__default["default"](_ref2, className, className !== null), _ref2)]),
+    width: "40",
+    height: "40",
+    viewBox: "0 0 40 40",
     xmlns: "http://www.w3.org/2000/svg"
-  }, /*#__PURE__*/React__default["default"].createElement("defs", null, /*#__PURE__*/React__default["default"].createElement("linearGradient", {
-    x1: "8.042%",
-    y1: "0%",
-    x2: "65.682%",
-    y2: "23.865%",
-    id: "a"
-  }, /*#__PURE__*/React__default["default"].createElement("stop", {
-    stopColor: color,
-    stopOpacity: "0",
-    offset: "0%"
-  }), /*#__PURE__*/React__default["default"].createElement("stop", {
-    stopColor: color,
-    stopOpacity: ".631",
-    offset: "63.146%"
-  }), /*#__PURE__*/React__default["default"].createElement("stop", {
-    stopColor: color,
-    offset: "100%"
-  }))), /*#__PURE__*/React__default["default"].createElement("g", {
+  }, /*#__PURE__*/React__default["default"].createElement("circle", {
+    className: styles$t.path,
+    cx: "20",
+    cy: "20",
+    r: "12",
     fill: "none",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React__default["default"].createElement("g", {
-    transform: "translate(1 1)"
-  }, /*#__PURE__*/React__default["default"].createElement("path", {
-    d: "M36 18c0-9.94-8.06-18-18-18",
-    id: "Oval-2",
-    stroke: "url(#a)",
-    strokeWidth: "2"
-  }, animated ? /*#__PURE__*/React__default["default"].createElement("animateTransform", {
-    attributeName: "transform",
-    type: "rotate",
-    from: "0 18 18",
-    to: "360 18 18",
-    dur: "0.9s",
-    repeatCount: "indefinite"
-  }) : null), /*#__PURE__*/React__default["default"].createElement("circle", {
-    fill: color,
-    cx: "36",
-    cy: "18",
-    r: "1"
-  }, animated ? /*#__PURE__*/React__default["default"].createElement("animateTransform", {
-    attributeName: "transform",
-    type: "rotate",
-    from: "0 18 18",
-    to: "360 18 18",
-    dur: "0.9s",
-    repeatCount: "indefinite"
-  }) : null))));
+    stroke: color,
+    strokeWidth: strokeWidth
+  }));
 };
 Spinner.propTypes = propTypes$K;
 Spinner.defaultProps = defaultProps$K;
@@ -1334,7 +1302,7 @@ var Dropdown = function Dropdown(_ref) {
       }
     } : null;
     return ItemComponent !== null ? /*#__PURE__*/React__default["default"].createElement("div", {
-      key: "item-".concat(index, "-").concat(label, "-").concat(type)
+      key: "item-".concat(index + 1, "-").concat(label, "-").concat(type)
     }, /*#__PURE__*/React__default["default"].createElement(ItemComponent, Object.assign({
       className: classNames__default["default"]([(_ref3 = {
         'dropdown-item': type === 'link' || type === 'button',
@@ -2898,7 +2866,7 @@ var quizAnswer = PropTypes__default["default"].shape(_objectSpread__default["def
 PropTypes__default["default"].arrayOf(answer);
 PropTypes__default["default"].arrayOf(quizAnswer);
 var callToActionTypes = PropTypes__default["default"].oneOf(['swipe-up', 'button']);
-PropTypes__default["default"].shape({
+var callToAction = PropTypes__default["default"].shape({
   active: PropTypes__default["default"].bool,
   type: callToActionTypes,
   url: PropTypes__default["default"].string,
@@ -3143,10 +3111,16 @@ PropTypes__default["default"].shape({
   id: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
   name: PropTypes__default["default"].string
 });
-PropTypes__default["default"].shape({
+var badge = PropTypes__default["default"].shape({
   label: textElement,
   buttonStyle: boxStyle
 });
+PropTypes__default["default"].shape({
+  badge: badge
+});
+PropTypes__default["default"].shape({
+  callToAction: callToAction
+});
 
 /* eslint-disable react/no-array-index-key */
 var propTypes$d = {

package/lib/index.js

@@ -636,6 +636,12 @@ var badge = PropTypes__default["default"].shape({
   label: textElement,
   buttonStyle: boxStyle
 });
+var header = PropTypes__default["default"].shape({
+  badge: badge
+});
+var footer = PropTypes__default["default"].shape({
+  callToAction: callToAction
+});
 
 var PropTypes = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -781,7 +787,9 @@ var PropTypes = /*#__PURE__*/Object.freeze({
     pageMetadata: pageMetadata,
     authorElement: authorElement,
     visitor: visitor,
-    badge: badge
+    badge: badge,
+    header: header,
+    footer: footer
 });
 
 var sortedColors = function sortedColors(colors) {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/core",
-    "version": "0.3.359",
+    "version": "0.3.362",
     "description": "",
     "keywords": [
         "javascript"
@@ -133,5 +133,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "22eba0d01f18f8971e0405bbb41081b5e2ae80ee"
+    "gitHead": "21619f51536d95517afabfdf316ef8fc345f6562"
 }