carbon-react 104.12.2 → 104.16.0

package/lib/__internal__/popover/index.d.ts

@@ -1 +1 @@
-export { default } from "./popover.component";
+export { default } from "./popover";

package/lib/__internal__/popover/popover.component.d.ts

@@ -1,16 +1,18 @@
 export default Popover;
-declare function Popover({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, }: {
+declare function Popover({ children, placement, disablePortal, reference, onFirstUpdate, modifiers, disableBackgroundUI, }: {
     children: any;
     placement: any;
     disablePortal: any;
     reference: any;
     onFirstUpdate: any;
     modifiers: any;
+    disableBackgroundUI: any;
 }): any;
 declare namespace Popover {
     namespace propTypes {
         const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         const placement: PropTypes.Requireable<string>;
+        const disableBackgroundUI: PropTypes.Requireable<boolean>;
         const modifiers: PropTypes.Requireable<any[]>;
         const onFirstUpdate: PropTypes.Requireable<(...args: any[]) => any>;
         const disablePortal: PropTypes.Requireable<boolean>;

package/lib/__internal__/popover/popover.component.js

@@ -15,6 +15,8 @@ var _core = require("@popperjs/core");
 
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
 
+var _popover = _interopRequireDefault(require("./popover.style"));
+
 var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/design-tokens/carbon-scoped-tokens-provider/carbon-scoped-tokens-provider.component"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,7 +31,8 @@ const Popover = ({
   disablePortal,
   reference,
   onFirstUpdate,
-  modifiers
+  modifiers,
+  disableBackgroundUI
 }) => {
   const elementDOM = (0, _react.useRef)();
 
@@ -90,6 +93,10 @@ const Popover = ({
     };
   }, [disablePortal]);
 
+  if (disableBackgroundUI) {
+    content = /*#__PURE__*/_react.default.createElement(_popover.default, null, content);
+  }
+
   if (disablePortal) {
     return content;
   }
@@ -102,11 +109,13 @@ Popover.propTypes = {
   children: _propTypes.default.node.isRequired,
   // Placement of children in relation to the reference element
   placement: _propTypes.default.oneOf(["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"]),
+  // Disables interaction with background UI
+  disableBackgroundUI: _propTypes.default.bool,
   // Optional modifiers array, for more information and object structure go to:
   // https://popper.js.org/docs/v2/constructors/#modifiers
   modifiers: _propTypes.default.array,
-  // Optional onFirstUpdate funcition, for more information go to:
-  // https://popper.js.org/docs/v2/constructors/#modifiers
+  // Optional onFirstUpdate function, for more information go to:
+  // https://popper.js.org/docs/v2/lifecycle/#hook-into-the-lifecycle
   onFirstUpdate: _propTypes.default.func,
   // When true, children are not rendered in portal
   disablePortal: _propTypes.default.bool,

package/lib/__internal__/popover/popover.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { State } from "@popperjs/core";
+
+type PopoverModifier = {
+  name: string;
+  options?: Record<string, unknown>;
+  enabled?: boolean;
+};
+
+export interface PopoverPropTypes {
+  // Element to be positioned, has to be a single node and has to accept `ref` and `style` props
+  children: React.ReactNode;
+  // Placement of children in relation to the reference element
+  placement?:
+    | "auto"
+    | "auto-start"
+    | "auto-end"
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "right"
+    | "right-start"
+    | "right-end"
+    | "left"
+    | "left-start"
+    | "left-end";
+  // Disables interaction with background UI
+  disableBackgroundUI?: boolean;
+  // Optional modifiers array, for more information and object structure go to:
+  // https://popper.js.org/docs/v2/constructors/#modifiers
+  modifiers?: PopoverModifier[];
+  // Optional onFirstUpdate function, for more information go to:
+  // hhttps://popper.js.org/docs/v2/lifecycle/#hook-into-the-lifecycle
+  onFirstUpdate?: (state: State) => void;
+  // When true, children are not rendered in portal
+  disablePortal?: boolean;
+  // Reference element, children will be positioned in relation to this element - should be a ref
+  reference?: React.RefObject<HTMLElement>;
+}
+
+declare function Popover(props: PopoverPropTypes): JSX.Element;
+
+export default Popover;

package/lib/__internal__/popover/popover.style.d.ts

@@ -0,0 +1,2 @@
+export default StyledBackdrop;
+declare const StyledBackdrop: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/__internal__/popover/popover.style.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const StyledBackdrop = _styledComponents.default.div`
+  bottom: 0;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: ${({
+  theme
+}) => theme.zIndex.popover};
+  background: transparent;
+`;
+StyledBackdrop.defaultProps = {
+  theme: _base.default
+};
+var _default = StyledBackdrop;
+exports.default = _default;

package/lib/components/button-bar/button-bar.style.d.ts

@@ -1,5 +1,4 @@
 export default ButtonBar;
 declare const ButtonBar: import("styled-components").StyledComponent<"div", any, {
-    theme: any;
     size: any;
 }, never>;

package/lib/components/button-bar/button-bar.style.js

@@ -29,7 +29,6 @@ const ButtonBar = _styledComponents.default.div`
 `;
 
 function stylingForType({
-  theme,
   size
 }) {
   return (0, _styledComponents.css)`
@@ -50,7 +49,7 @@ function stylingForType({
 
     button {
       margin: 0;
-      border: 2px solid ${theme.colors.primary};
+      border: 2px solid var(--colorsActionMajor500);
 
       &:not(:last-of-type) {
         border-right-color: transparent;
@@ -61,20 +60,20 @@ function stylingForType({
       &:focus {
         position: relative;
         z-index: 2;
-        border-right-color: ${theme.colors.primary};
+        border-right-color: var(--colorsActionMajor500);
       }
       &:hover {
-        background-color: ${theme.colors.secondary};
-        border-color: ${theme.colors.secondary};
+        background-color: var(--colorsActionMajor600);
+        border-color: var(--colorsActionMajor600);
         & + button {
-          border-left-color: ${theme.colors.secondary};
+          border-left-color: var(--colorsActionMajor600);
         }
         & ${_icon.default} {
           color: white;
         }
       }
       & ${_icon.default} {
-        color: ${theme.colors.primary};
+        color: var(--colorsActionMajor500);
       }
     }
   `;

package/lib/components/button-toggle/button-toggle.style.js

@@ -9,8 +9,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 var _icon = _interopRequireDefault(require("../icon/icon.style"));
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -63,41 +61,35 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
     padding: 0 ${paddingConfig[size]}px;
     font-size: ${fontSizeConfig[size]}px;
   `}
-  font-weight: 600;
+  font-weight: 700;
   cursor: pointer;
 
-  ${({
-  theme
-}) => (0, _styledComponents.css)`
-    border: 1px solid ${theme.colors.border};
-    background-color: ${theme.colors.white};
+  border: 1px solid var(--colorsActionMinor500);
 
-    ${_icon.default} {
-      color: ${theme.colors.black};
-    }
+  ${_icon.default} {
+    color: var(--colorsActionMinor500);
+  }
 
-    input:checked ~ && {
-      background-color: ${theme.colors.whiteMix};
-      border-color: ${theme.colors.secondary};
-      color: ${theme.colors.text};
-      cursor: auto;
-    }
+  input:checked ~ && {
+    background-color: var(--colorsActionMinor300);
+    color: var(--colorsActionMinor600);
+    cursor: auto;
+  }
 
-    input:focus ~ & {
-      outline: 3px solid ${theme.colors.focus};
-      z-index: 100;
-    }
+  input:focus ~ & {
+    outline: 3px solid var(--colorsSemanticFocus500);
+    z-index: 100;
+  }
 
-    input:not(:checked):not(:disabled) ~ &:hover {
-      background-color: ${theme.colors.secondary};
-      border-color: ${theme.colors.secondary};
-      color: ${theme.colors.white};
+  input:not(:checked):not(:disabled) ~ &:hover {
+    background-color: var(--colorsActionMinor200);
+    border-color: var(--colorsActionMinor500);
+    color: var(--colorsActionMinor500);
 
-      ${_icon.default} {
-        color: ${theme.colors.white};
-      }
+    ${_icon.default} {
+      color: var(--colorsActionMinor500);
     }
-  `};
+  }
 
   ${({
   buttonIcon,
@@ -113,16 +105,14 @@ const StyledButtonToggleLabel = _styledComponents.default.label`
     `}
 
   ${({
-  disabled,
-  theme
+  disabled
 }) => disabled && (0, _styledComponents.css)`
       & {
-        background-color: ${theme.disabled.button};
-        border-color: ${theme.disabled.button};
-        color: ${theme.disabled.buttonText};
+        border-color: var(--colorsActionDisabled500);
+        color: var(--colorsActionMinorYin030);
 
         ${_icon.default} {
-          color: ${theme.disabled.buttonText};
+          color: var(--colorsActionMinorYin030);
         }
       }
       cursor: not-allowed;
@@ -188,10 +178,4 @@ const StyledButtonToggleInput = _styledComponents.default.input`
 exports.StyledButtonToggleInput = StyledButtonToggleInput;
 StyledButtonToggleIcon.propTypes = {
   buttonIconSize: _propTypes.default.string
-};
-StyledButtonToggleLabel.defaultProps = {
-  theme: _base.default
-};
-StyledButtonToggleLabel.defaultProps = {
-  theme: _base.default
 };

package/lib/components/button-toggle-group/button-toggle-group.style.js

@@ -11,8 +11,6 @@ var _buttonToggle = require("../button-toggle/button-toggle.style");
 
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
 
-var _base = _interopRequireDefault(require("../../style/themes/base"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -30,24 +28,21 @@ const ButtonToggleGroupStyle = _styledComponents.default.div`
 
   ${_buttonToggle.StyledButtonToggleLabel} {
     ${({
-  theme,
   info
 }) => info && (0, _styledComponents.css)`
-        border-color: ${theme.colors.info};
+        border-color: var(--colorsActionMinor500);
       `};
     ${({
-  theme,
   warning
 }) => warning && (0, _styledComponents.css)`
-        border-color: ${theme.colors.warning};
+        border-color: var(--colorsSemanticCaution500);
       `}
     ${({
-  theme,
   error
 }) => error && (0, _styledComponents.css)`
-        box-shadow: inset 1px 1px 0 ${theme.colors.error},
-          inset -1px -1px 0 ${theme.colors.error};
-        border-color: ${theme.colors.error};
+        box-shadow: inset 1px 1px 0 var(--colorsSemanticNegative500),
+          inset -1px -1px 0 var(--colorsSemanticNegative500);
+        border-color: var(--colorsSemanticNegative500);
       `}
   }
 
@@ -55,8 +50,5 @@ const ButtonToggleGroupStyle = _styledComponents.default.div`
     margin-left: 4px;
   }
 `;
-ButtonToggleGroupStyle.defaultProps = {
-  theme: _base.default
-};
 var _default = ButtonToggleGroupStyle;
 exports.default = _default;

package/lib/components/dialog/dialog.style.js

@@ -87,6 +87,9 @@ const DialogStyle = _styledComponents.default.div`
   flex-direction: column;
   position: fixed;
   top: 50%;
+  z-index: ${({
+  theme
+}) => theme.zIndex.modal};
   max-height: ${({
   topMargin
 }) => `calc(100vh - ${topMargin}px)`};

package/lib/components/modal/modal.component.js

@@ -11,9 +11,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _reactTransitionGroup = require("react-transition-group");
 
-var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
+var _useScrollBlock = _interopRequireDefault(require("../../hooks/__internal__/useScrollBlock"));
+
+var _portal = _interopRequireDefault(require("../portal"));
 
-var _portal = _interopRequireDefault(require("../portal/portal.style"));
+var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 
 var _modalManager = _interopRequireDefault(require("./__internal__/modal-manager"));
 
@@ -44,35 +46,30 @@ const Modal = ({
   const ref = (0, _react.useRef)();
   const listenerAdded = (0, _react.useRef)(false);
   const modalRegistered = (0, _react.useRef)(false);
-  const originalOverflow = (0, _react.useRef)(undefined);
   const [isAnimationComplete, setAnimationComplete] = (0, _react.useState)(false);
   const [triggerRefocusFlag, setTriggerRefocusFlag] = (0, _react.useState)(false);
-  const setOverflow = (0, _react.useCallback)(() => {
-    if (typeof originalOverflow.current === "undefined" && !enableBackgroundUI) {
-      originalOverflow.current = document.documentElement.style.overflow;
-      document.documentElement.style.overflow = "hidden";
-    }
-  }, [enableBackgroundUI]);
-  const unsetOverflow = (0, _react.useCallback)(() => {
-    if (typeof originalOverflow.current !== "undefined" && !enableBackgroundUI) {
-      document.documentElement.style.overflow = originalOverflow.current;
-      originalOverflow.current = undefined;
-    }
-  }, [enableBackgroundUI]);
+  const {
+    blockScroll,
+    allowScroll
+  } = (0, _useScrollBlock.default)();
   (0, _react.useEffect)(() => {
-    if (open) {
-      setOverflow();
+    if (enableBackgroundUI) {
+      return;
     }
 
-    if (!open) {
-      unsetOverflow();
+    if (open) {
+      blockScroll();
+    } else {
+      allowScroll();
     }
-  }, [open, setOverflow, unsetOverflow]);
+  }, [allowScroll, blockScroll, enableBackgroundUI, open]);
   (0, _react.useEffect)(() => {
     return () => {
-      unsetOverflow();
+      if (!enableBackgroundUI) {
+        allowScroll();
+      }
     };
-  }, [unsetOverflow]);
+  }, [allowScroll, enableBackgroundUI]);
   const closeModal = (0, _react.useCallback)(ev => {
     const isTopmost = _modalManager.default.isTopmost(ref.current);
 
@@ -143,7 +140,8 @@ const Modal = ({
   if (open) {
     background = !enableBackgroundUI ? /*#__PURE__*/_react.default.createElement(_modal.StyledModalBackground, {
       "data-element": "modal-background",
-      transitionName: "modal-background"
+      transitionName: "modal-background",
+      transitionTime: timeout
     }) : null;
     content = children;
   }
@@ -151,6 +149,7 @@ const Modal = ({
   return /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_modal.StyledModal, _extends({
     "data-state": open ? "open" : "closed",
     transitionName: "modal",
+    transitionTime: timeout,
     ref: ref
   }, rest), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, background && /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, {
     key: "modal",
@@ -197,7 +196,7 @@ Modal.defaultProps = {
   onCancel: null,
   enableBackgroundUI: false,
   disableEscKey: false,
-  timeout: 500
+  timeout: 300
 };
 var _default = Modal;
 exports.default = _default;

package/lib/components/modal/modal.style.js

@@ -7,14 +7,15 @@ exports.StyledModalBackground = exports.StyledModal = void 0;
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
+var _base = _interopRequireDefault(require("../../style/themes/base"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const backgroundOpacity = "0.6";
-const backgroundAnimationLength = "300ms";
-const initialPosition = "50px";
-const animationLength = "300ms";
 const StyledModalBackground = _styledComponents.default.div`
   background-color: rgba(0, 20, 29, 0.6);
   bottom: 0;
@@ -25,7 +26,8 @@ const StyledModalBackground = _styledComponents.default.div`
   top: 0;
 
   ${({
-  transitionName
+  transitionName,
+  transitionTime
 }) => (0, _styledComponents.css)`
     &.${transitionName}-enter, .${transitionName}-appear {
       opacity: 0;
@@ -34,7 +36,7 @@ const StyledModalBackground = _styledComponents.default.div`
     &.${transitionName}-enter.${transitionName}-enter-active,
       &.${transitionName}-appear.${transitionName}-appear-active {
       opacity: ${backgroundOpacity};
-      transition: opacity ${backgroundAnimationLength} ease-out;
+      transition: opacity ${transitionTime}ms ease-out;
     }
 
     &.${transitionName}-exit {
@@ -43,37 +45,42 @@ const StyledModalBackground = _styledComponents.default.div`
 
     &.${transitionName}-exit.${transitionName}-exit-active {
       opacity: 0;
-      transition: opacity ${backgroundAnimationLength} 100ms ease-out;
+      transition: opacity ${transitionTime}ms 100ms ease-out;
     }
-  `}
+  `};
 `;
 exports.StyledModalBackground = StyledModalBackground;
 const StyledModal = _styledComponents.default.div`
+  position: absolute;
+  z-index: ${({
+  theme
+}) => theme.zIndex.modal};
+
   ${({
-  transitionName
+  transitionName,
+  transitionTime
 }) => (0, _styledComponents.css)`
     .${transitionName}-enter, .${transitionName}-appear {
       opacity: 0;
-      margin-top: ${initialPosition};
     }
 
     .${transitionName}-enter.${transitionName}-enter-active,
       .${transitionName}-appear.${transitionName}-appear-active {
       opacity: 1;
-      margin-top: 0;
-      transition: all ${animationLength} 100ms ease-out;
+      transition: all ${transitionTime}ms 100ms ease-out;
     }
 
     .${transitionName}-exit {
       opacity: 1;
-      margin-top: 0;
     }
 
     .${transitionName}-exit.${transitionName}-exit-active {
       opacity: 0;
-      margin-top: ${initialPosition};
-      transition: all ${animationLength} ease-out;
+      transition: all ${transitionTime}ms ease-out;
     }
   `}
 `;
-exports.StyledModal = StyledModal;
+exports.StyledModal = StyledModal;
+StyledModal.defaultProps = {
+  theme: _base.default
+};

package/lib/components/note/note.style.js

@@ -26,7 +26,6 @@ const StyledNoteContent = _styledComponents.default.div`
   width: 100%;
 
   ${({
-  theme,
   hasPreview
 }) => (0, _styledComponents.css)`
     &:not(:last-of-type) {
@@ -42,16 +41,16 @@ const StyledNoteContent = _styledComponents.default.div`
     div.public-DraftEditor-content {
       min-height: inherit;
       height: 100%;
-      background-color: ${theme.colors.white};
+      background-color: var(--colorsUtilityYang100);
       line-height: 21px;
     }
 
     &:last-of-type:not(:first-of-type) {
-      border-top: solid 1px ${theme.tile.separator};
+      border-top: solid 1px var(--colorsUtilityMajor050);
     }
 
     ${hasPreview && `
-      margin-top: ${2 * theme.spacing}px;
+      margin-top: var(--spacing200);
     `}
   `}
 `;
@@ -76,10 +75,9 @@ const StyledFooterContent = _styledComponents.default.div`
   font-weight: bold;
 
   ${({
-  theme,
   hasName
 }) => (0, _styledComponents.css)`
-    margin-top: ${2 * theme.spacing}px;
+    margin-top: var(--spacing200);
 
     ${hasName && (0, _styledComponents.css)`
       &:first-of-type {
@@ -88,29 +86,29 @@ const StyledFooterContent = _styledComponents.default.div`
 
       &:nth-of-type(2) {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
-        margin-left: ${2 * theme.spacing}px;
+        color: var(--colorsUtilityYin065);
+        margin-left: var(--spacing200);
       }
 
       &:last-of-type:not(:nth-of-type(2)) {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
+        color: var(--colorsUtilityYin065);
         cursor: pointer;
-        margin-left: ${3 * theme.spacing}px;
+        margin-left: var(--spacing300);
       }
     `}
 
     ${!hasName && (0, _styledComponents.css)`
       &:first-of-type {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
+        color: var(--colorsUtilityYin065);
       }
 
       &:last-of-type:not(:first-of-type) {
         font-size: 12px;
-        color: ${theme.note.timeStamp};
+        color: var(--colorsUtilityYin065);
         cursor: pointer;
-        margin-left: ${3 * theme.spacing}px;
+        margin-left: var(--spacing300);
       }
     `}
   `}
@@ -118,19 +116,16 @@ const StyledFooterContent = _styledComponents.default.div`
 exports.StyledFooterContent = StyledFooterContent;
 const StyledFooter = _styledComponents.default.div`
   display: flex;
-  margin-bottom: ${({
-  theme
-}) => `${-theme.spacing}px;`}
+  margin-bottom: calc(-1 * var(--spacing100));
   flex-wrap: wrap;
 `;
 exports.StyledFooter = StyledFooter;
 const StyledNote = _styledComponents.default.div`
   ${({
-  theme,
   width
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.colors.white};
-    border: 1px solid ${theme.tile.border};
+    background-color: var(--colorsUtilityYang100);
+    border: 1px solid var(--colorsUtilityMajor100);
     display: flex;
     flex-direction: column;
     padding: 24px;
@@ -155,19 +150,10 @@ const StyledNote = _styledComponents.default.div`
   ${_styledSystem.margin}
 `;
 exports.StyledNote = StyledNote;
-StyledNoteContent.defaultProps = {
-  theme: _base.default
-};
 StyledNote.propTypes = {
   padding: _propTypes.default.string,
   width: _propTypes.default.number
 };
 StyledNote.defaultProps = {
   theme: _base.default
-};
-StyledFooter.defaultProps = {
-  theme: _base.default
-};
-StyledFooterContent.defaultProps = {
-  theme: _base.default
 };