@activecollab/components 1.0.16 → 1.0.17

package/dist/cjs/components/Transitions/SlideLeftRightTransition/SlideLeftRightTransition.js

@@ -7,11 +7,11 @@ exports.SlideLeftRightTransition = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _Styles = require("./Styles");
+var _reactTransitionGroup = require("react-transition-group");
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _Styles = require("./Styles");
 
-var _excluded = ["children", "direction", "className"];
+var _excluded = ["children", "direction"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -25,15 +25,15 @@ var SlideLeftRightTransition = function SlideLeftRightTransition(_ref) {
   var children = _ref.children,
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? "left" : _ref$direction,
-      className = _ref.className,
       props = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/_react.default.createElement(_Styles.StyledSlideLeftRightTransition, _extends({
+  return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, _extends({
     timeout: 200,
-    classNames: (0, _classnames.default)(className, "c-slide"),
-    unmountOnExit: true,
+    classNames: "c-slide",
+    unmountOnExit: true
+  }, props), /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, /*#__PURE__*/_react.default.createElement(_Styles.StyledSlideLeftRight, {
     $direction: direction
-  }, props), children);
+  })));
 };
 
 exports.SlideLeftRightTransition = SlideLeftRightTransition;

package/dist/cjs/components/Transitions/SlideLeftRightTransition/SlideLeftRightTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Transitions/SlideLeftRightTransition/SlideLeftRightTransition.tsx"],"names":["SlideLeftRightTransition","children","direction","className","props","displayName"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;;;;;;;AAQO,IAAMA,wBAAuD,GAAG,SAA1DA,wBAA0D,OAKjE;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,4BAHJC,SAGI;AAAA,MAHJA,SAGI,+BAHQ,MAGR;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,KACC;;AACJ,sBACE,6BAAC,sCAAD;AACE,IAAA,OAAO,EAAE,GADX;AAEE,IAAA,UAAU,EAAE,yBAAWD,SAAX,EAAsB,SAAtB,CAFd;AAGE,IAAA,aAAa,MAHf;AAIE,IAAA,UAAU,EAAED;AAJd,KAKME,KALN,GAOGH,QAPH,CADF;AAWD,CAjBM;;;AAmBPD,wBAAwB,CAACK,WAAzB,GAAuC,0BAAvC","sourcesContent":["import React, { FC, ReactElement } from \"react\";\nimport { TransitionProps } from \"../types\";\nimport { StyledSlideLeftRightTransition } from \"./Styles\";\nimport classnames from \"classnames\";\n\ninterface ISlideLeftRightTransition extends TransitionProps {\n  children: ReactElement;\n  direction?: \"left\" | \"right\";\n  className?: string;\n}\n\nexport const SlideLeftRightTransition: FC<ISlideLeftRightTransition> = ({\n  children,\n  direction = \"left\",\n  className,\n  ...props\n}) => {\n  return (\n    <StyledSlideLeftRightTransition\n      timeout={200}\n      classNames={classnames(className, \"c-slide\")}\n      unmountOnExit\n      $direction={direction}\n      {...props}\n    >\n      {children}\n    </StyledSlideLeftRightTransition>\n  );\n};\n\nSlideLeftRightTransition.displayName = \"SlideLeftRightTransition\";\n"],"file":"SlideLeftRightTransition.js"}
+{"version":3,"sources":["../../../../../src/components/Transitions/SlideLeftRightTransition/SlideLeftRightTransition.tsx"],"names":["SlideLeftRightTransition","children","direction","props","displayName"],"mappings":";;;;;;;AAAA;;AAEA;;AACA;;;;;;;;;;;;AAOO,IAAMA,wBAAuD,GAAG,SAA1DA,wBAA0D,OAIjE;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,4BAFJC,SAEI;AAAA,MAFJA,SAEI,+BAFQ,MAER;AAAA,MADDC,KACC;;AACJ,sBACE,6BAAC,mCAAD;AAAe,IAAA,OAAO,EAAE,GAAxB;AAA6B,IAAA,UAAU,EAAC,SAAxC;AAAkD,IAAA,aAAa;AAA/D,KAAoEA,KAApE,gBACE,4DACGF,QADH,eAEE,6BAAC,4BAAD;AAAsB,IAAA,UAAU,EAAEC;AAAlC,IAFF,CADF,CADF;AAQD,CAbM;;;AAePF,wBAAwB,CAACI,WAAzB,GAAuC,0BAAvC","sourcesContent":["import React, { FC, ReactElement } from \"react\";\nimport { TransitionProps } from \"../types\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { StyledSlideLeftRight } from \"./Styles\";\n\ninterface ISlideLeftRightTransition extends TransitionProps {\n  children: ReactElement;\n  direction?: \"left\" | \"right\";\n}\n\nexport const SlideLeftRightTransition: FC<ISlideLeftRightTransition> = ({\n  children,\n  direction = \"left\",\n  ...props\n}) => {\n  return (\n    <CSSTransition timeout={200} classNames=\"c-slide\" unmountOnExit {...props}>\n      <>\n        {children}\n        <StyledSlideLeftRight $direction={direction} />\n      </>\n    </CSSTransition>\n  );\n};\n\nSlideLeftRightTransition.displayName = \"SlideLeftRightTransition\";\n"],"file":"SlideLeftRightTransition.js"}

package/dist/cjs/components/Transitions/SlideLeftRightTransition/Styles.js

@@ -1,28 +1,16 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledSlideLeftRightTransition = void 0;
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _reactTransitionGroup = require("react-transition-group");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+exports.StyledSlideLeftRight = void 0;
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+var _styledComponents = require("styled-components");
 
-var StyledSlideLeftRightTransition = (0, _styledComponents.default)(_reactTransitionGroup.CSSTransition).withConfig({
-  displayName: "Styles__StyledSlideLeftRightTransition",
-  componentId: "sc-ewkpq8-0"
-})(["", " ", ""], function (props) {
+var StyledSlideLeftRight = (0, _styledComponents.createGlobalStyle)(["", " ", ""], function (props) {
   return props.$direction === "left" && (0, _styledComponents.css)(["&.c-slide-enter{position:absolute;transform:translateX(100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(-100%);transition:all 200ms ease;}"]);
 }, function (props) {
   return props.$direction === "right" && (0, _styledComponents.css)(["&.c-slide-enter{position:absolute;transform:translateX(-100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(100%);transition:all 200ms ease;}"]);
 });
-exports.StyledSlideLeftRightTransition = StyledSlideLeftRightTransition;
-StyledSlideLeftRightTransition.displayName = "StyledSlideLeftRightTransition";
+exports.StyledSlideLeftRight = StyledSlideLeftRight;
 //# sourceMappingURL=Styles.js.map

package/dist/cjs/components/Transitions/SlideLeftRightTransition/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Transitions/SlideLeftRightTransition/Styles.ts"],"names":["StyledSlideLeftRightTransition","CSSTransition","props","$direction","css","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;AAEO,IAAMA,8BAA8B,GAAG,+BAAOC,mCAAP,CAAH;AAAA;AAAA;AAAA,kBAGvC,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,MAArB,QACAC,qBADA,+PADA;AAAA,CAHuC,EAuBvC,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,OAArB,QACAC,qBADA,+PADA;AAAA,CAvBuC,CAApC;;AA8CPJ,8BAA8B,CAACK,WAA/B,GAA6C,gCAA7C","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport const StyledSlideLeftRightTransition = styled(CSSTransition)<{\n  $direction: \"left\" | \"right\";\n}>`\n  ${(props) =>\n    props.$direction === \"left\" &&\n    css`\n      &.c-slide-enter {\n        position: absolute;\n        transform: translateX(100%);\n      }\n      &.c-slide-enter-active {\n        transform: translateX(0%);\n        transition: all 200ms ease;\n      }\n      &.c-slide-exit {\n        position: absolute;\n      }\n      &.c-slide-exit-active {\n        transform: translateX(-100%);\n        transition: all 200ms ease;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-slide-enter {\n        position: absolute;\n        transform: translateX(-100%);\n      }\n      &.c-slide-enter-active {\n        transform: translateX(0%);\n        transition: all 200ms ease;\n      }\n\n      &.c-slide-exit {\n        position: absolute;\n      }\n\n      &.c-slide-exit-active {\n        transform: translateX(100%);\n        transition: all 200ms ease;\n      }\n    `}\n`;\n\nStyledSlideLeftRightTransition.displayName = \"StyledSlideLeftRightTransition\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../../src/components/Transitions/SlideLeftRightTransition/Styles.ts"],"names":["StyledSlideLeftRight","createGlobalStyle","props","$direction","css"],"mappings":";;;;;;;AAAA;;AAEO,IAAMA,oBAAoB,OAAGC,mCAAH,iBAI/B,UAACC,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,MAArB,QACAC,qBADA,+PADA;AAAA,CAJ+B,EAwB7B,UAACF,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,OAArB,QACAC,qBADA,+PADA;AAAA,CAxB6B,CAA1B","sourcesContent":["import { createGlobalStyle, css } from \"styled-components\";\n\nexport const StyledSlideLeftRight = createGlobalStyle<{\n  $direction: \"left\" | \"right\";\n}>`\n\n${(props) =>\n  props.$direction === \"left\" &&\n  css`\n    &.c-slide-enter {\n      position: absolute;\n      transform: translateX(100%);\n    }\n    &.c-slide-enter-active {\n      transform: translateX(0%);\n      transition: all 200ms ease;\n    }\n    &.c-slide-exit {\n      position: absolute;\n    }\n    &.c-slide-exit-active {\n      transform: translateX(-100%);\n      transition: all 200ms ease;\n    }\n  `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-slide-enter {\n        position: absolute;\n        transform: translateX(-100%);\n      }\n      &.c-slide-enter-active {\n        transform: translateX(0%);\n        transition: all 200ms ease;\n      }\n\n      &.c-slide-exit {\n        position: absolute;\n      }\n\n      &.c-slide-exit-active {\n        transform: translateX(100%);\n        transition: all 200ms ease;\n      }\n    `}\n\n`;\n"],"file":"Styles.js"}

package/dist/esm/components/Transitions/SlideLeftRightTransition/SlideLeftRightTransition.d.ts

@@ -3,7 +3,6 @@ import { TransitionProps } from "../types";
 interface ISlideLeftRightTransition extends TransitionProps {
     children: ReactElement;
     direction?: "left" | "right";
-    className?: string;
 }
 export declare const SlideLeftRightTransition: FC<ISlideLeftRightTransition>;
 export {};

package/dist/esm/components/Transitions/SlideLeftRightTransition/SlideLeftRightTransition.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SlideLeftRightTransition.d.ts","sourceRoot":"","sources":["../../../../../src/components/Transitions/SlideLeftRightTransition/SlideLeftRightTransition.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI3C,UAAU,yBAA0B,SAAQ,eAAe;IACzD,QAAQ,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,yBAAyB,CAiBlE,CAAC"}
+{"version":3,"file":"SlideLeftRightTransition.d.ts","sourceRoot":"","sources":["../../../../../src/components/Transitions/SlideLeftRightTransition/SlideLeftRightTransition.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,EAAE,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAI3C,UAAU,yBAA0B,SAAQ,eAAe;IACzD,QAAQ,EAAE,YAAY,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;AAED,eAAO,MAAM,wBAAwB,EAAE,EAAE,CAAC,yBAAyB,CAalE,CAAC"}

package/dist/esm/components/Transitions/SlideLeftRightTransition/SlideLeftRightTransition.js

@@ -1,22 +1,22 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-var _excluded = ["children", "direction", "className"];
+var _excluded = ["children", "direction"];
 import React from "react";
-import { StyledSlideLeftRightTransition } from "./Styles";
-import classnames from "classnames";
+import { CSSTransition } from "react-transition-group";
+import { StyledSlideLeftRight } from "./Styles";
 export var SlideLeftRightTransition = function SlideLeftRightTransition(_ref) {
   var children = _ref.children,
       _ref$direction = _ref.direction,
       direction = _ref$direction === void 0 ? "left" : _ref$direction,
-      className = _ref.className,
       props = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(StyledSlideLeftRightTransition, _extends({
+  return /*#__PURE__*/React.createElement(CSSTransition, _extends({
     timeout: 200,
-    classNames: classnames(className, "c-slide"),
-    unmountOnExit: true,
+    classNames: "c-slide",
+    unmountOnExit: true
+  }, props), /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(StyledSlideLeftRight, {
     $direction: direction
-  }, props), children);
+  })));
 };
 SlideLeftRightTransition.displayName = "SlideLeftRightTransition";
 //# sourceMappingURL=SlideLeftRightTransition.js.map

package/dist/esm/components/Transitions/SlideLeftRightTransition/SlideLeftRightTransition.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Transitions/SlideLeftRightTransition/SlideLeftRightTransition.tsx"],"names":["React","StyledSlideLeftRightTransition","classnames","SlideLeftRightTransition","children","direction","className","props","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,MAAwC,OAAxC;AAEA,SAASC,8BAAT,QAA+C,UAA/C;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAQA,OAAO,IAAMC,wBAAuD,GAAG,SAA1DA,wBAA0D,OAKjE;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,4BAHJC,SAGI;AAAA,MAHJA,SAGI,+BAHQ,MAGR;AAAA,MAFJC,SAEI,QAFJA,SAEI;AAAA,MADDC,KACC;;AACJ,sBACE,oBAAC,8BAAD;AACE,IAAA,OAAO,EAAE,GADX;AAEE,IAAA,UAAU,EAAEL,UAAU,CAACI,SAAD,EAAY,SAAZ,CAFxB;AAGE,IAAA,aAAa,MAHf;AAIE,IAAA,UAAU,EAAED;AAJd,KAKME,KALN,GAOGH,QAPH,CADF;AAWD,CAjBM;AAmBPD,wBAAwB,CAACK,WAAzB,GAAuC,0BAAvC","sourcesContent":["import React, { FC, ReactElement } from \"react\";\nimport { TransitionProps } from \"../types\";\nimport { StyledSlideLeftRightTransition } from \"./Styles\";\nimport classnames from \"classnames\";\n\ninterface ISlideLeftRightTransition extends TransitionProps {\n  children: ReactElement;\n  direction?: \"left\" | \"right\";\n  className?: string;\n}\n\nexport const SlideLeftRightTransition: FC<ISlideLeftRightTransition> = ({\n  children,\n  direction = \"left\",\n  className,\n  ...props\n}) => {\n  return (\n    <StyledSlideLeftRightTransition\n      timeout={200}\n      classNames={classnames(className, \"c-slide\")}\n      unmountOnExit\n      $direction={direction}\n      {...props}\n    >\n      {children}\n    </StyledSlideLeftRightTransition>\n  );\n};\n\nSlideLeftRightTransition.displayName = \"SlideLeftRightTransition\";\n"],"file":"SlideLeftRightTransition.js"}
+{"version":3,"sources":["../../../../../src/components/Transitions/SlideLeftRightTransition/SlideLeftRightTransition.tsx"],"names":["React","CSSTransition","StyledSlideLeftRight","SlideLeftRightTransition","children","direction","props","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,MAAwC,OAAxC;AAEA,SAASC,aAAT,QAA8B,wBAA9B;AACA,SAASC,oBAAT,QAAqC,UAArC;AAOA,OAAO,IAAMC,wBAAuD,GAAG,SAA1DA,wBAA0D,OAIjE;AAAA,MAHJC,QAGI,QAHJA,QAGI;AAAA,4BAFJC,SAEI;AAAA,MAFJA,SAEI,+BAFQ,MAER;AAAA,MADDC,KACC;;AACJ,sBACE,oBAAC,aAAD;AAAe,IAAA,OAAO,EAAE,GAAxB;AAA6B,IAAA,UAAU,EAAC,SAAxC;AAAkD,IAAA,aAAa;AAA/D,KAAoEA,KAApE,gBACE,0CACGF,QADH,eAEE,oBAAC,oBAAD;AAAsB,IAAA,UAAU,EAAEC;AAAlC,IAFF,CADF,CADF;AAQD,CAbM;AAePF,wBAAwB,CAACI,WAAzB,GAAuC,0BAAvC","sourcesContent":["import React, { FC, ReactElement } from \"react\";\nimport { TransitionProps } from \"../types\";\nimport { CSSTransition } from \"react-transition-group\";\nimport { StyledSlideLeftRight } from \"./Styles\";\n\ninterface ISlideLeftRightTransition extends TransitionProps {\n  children: ReactElement;\n  direction?: \"left\" | \"right\";\n}\n\nexport const SlideLeftRightTransition: FC<ISlideLeftRightTransition> = ({\n  children,\n  direction = \"left\",\n  ...props\n}) => {\n  return (\n    <CSSTransition timeout={200} classNames=\"c-slide\" unmountOnExit {...props}>\n      <>\n        {children}\n        <StyledSlideLeftRight $direction={direction} />\n      </>\n    </CSSTransition>\n  );\n};\n\nSlideLeftRightTransition.displayName = \"SlideLeftRightTransition\";\n"],"file":"SlideLeftRightTransition.js"}

package/dist/esm/components/Transitions/SlideLeftRightTransition/Styles.d.ts

@@ -1,5 +1,4 @@
-import { CSSTransition } from "react-transition-group";
-export declare const StyledSlideLeftRightTransition: import("styled-components").StyledComponent<typeof CSSTransition, any, {
+export declare const StyledSlideLeftRight: import("styled-components").GlobalStyleComponent<{
     $direction: "left" | "right";
-}, never>;
+}, import("styled-components").DefaultTheme>;
 //# sourceMappingURL=Styles.d.ts.map

package/dist/esm/components/Transitions/SlideLeftRightTransition/Styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Transitions/SlideLeftRightTransition/Styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAEvD,eAAO,MAAM,8BAA8B;gBAC7B,MAAM,GAAG,OAAO;SA2C7B,CAAC"}
+{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Transitions/SlideLeftRightTransition/Styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB;gBACnB,MAAM,GAAG,OAAO;4CA6C7B,CAAC"}

package/dist/esm/components/Transitions/SlideLeftRightTransition/Styles.js

@@ -1,12 +1,7 @@
-import styled, { css } from "styled-components";
-import { CSSTransition } from "react-transition-group";
-export var StyledSlideLeftRightTransition = styled(CSSTransition).withConfig({
-  displayName: "Styles__StyledSlideLeftRightTransition",
-  componentId: "sc-ewkpq8-0"
-})(["", " ", ""], function (props) {
+import { createGlobalStyle, css } from "styled-components";
+export var StyledSlideLeftRight = createGlobalStyle(["", " ", ""], function (props) {
   return props.$direction === "left" && css(["&.c-slide-enter{position:absolute;transform:translateX(100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(-100%);transition:all 200ms ease;}"]);
 }, function (props) {
   return props.$direction === "right" && css(["&.c-slide-enter{position:absolute;transform:translateX(-100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(100%);transition:all 200ms ease;}"]);
 });
-StyledSlideLeftRightTransition.displayName = "StyledSlideLeftRightTransition";
 //# sourceMappingURL=Styles.js.map

package/dist/esm/components/Transitions/SlideLeftRightTransition/Styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/Transitions/SlideLeftRightTransition/Styles.ts"],"names":["styled","css","CSSTransition","StyledSlideLeftRightTransition","props","$direction","displayName"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,SAASC,aAAT,QAA8B,wBAA9B;AAEA,OAAO,IAAMC,8BAA8B,GAAGH,MAAM,CAACE,aAAD,CAAT;AAAA;AAAA;AAAA,kBAGvC,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,MAArB,IACAJ,GADA,8PADA;AAAA,CAHuC,EAuBvC,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,OAArB,IACAJ,GADA,8PADA;AAAA,CAvBuC,CAApC;AA8CPE,8BAA8B,CAACG,WAA/B,GAA6C,gCAA7C","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { CSSTransition } from \"react-transition-group\";\n\nexport const StyledSlideLeftRightTransition = styled(CSSTransition)<{\n  $direction: \"left\" | \"right\";\n}>`\n  ${(props) =>\n    props.$direction === \"left\" &&\n    css`\n      &.c-slide-enter {\n        position: absolute;\n        transform: translateX(100%);\n      }\n      &.c-slide-enter-active {\n        transform: translateX(0%);\n        transition: all 200ms ease;\n      }\n      &.c-slide-exit {\n        position: absolute;\n      }\n      &.c-slide-exit-active {\n        transform: translateX(-100%);\n        transition: all 200ms ease;\n      }\n    `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-slide-enter {\n        position: absolute;\n        transform: translateX(-100%);\n      }\n      &.c-slide-enter-active {\n        transform: translateX(0%);\n        transition: all 200ms ease;\n      }\n\n      &.c-slide-exit {\n        position: absolute;\n      }\n\n      &.c-slide-exit-active {\n        transform: translateX(100%);\n        transition: all 200ms ease;\n      }\n    `}\n`;\n\nStyledSlideLeftRightTransition.displayName = \"StyledSlideLeftRightTransition\";\n"],"file":"Styles.js"}
+{"version":3,"sources":["../../../../../src/components/Transitions/SlideLeftRightTransition/Styles.ts"],"names":["createGlobalStyle","css","StyledSlideLeftRight","props","$direction"],"mappings":"AAAA,SAASA,iBAAT,EAA4BC,GAA5B,QAAuC,mBAAvC;AAEA,OAAO,IAAMC,oBAAoB,GAAGF,iBAAH,gBAI/B,UAACG,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,MAArB,IACAH,GADA,8PADA;AAAA,CAJ+B,EAwB7B,UAACE,KAAD;AAAA,SACAA,KAAK,CAACC,UAAN,KAAqB,OAArB,IACAH,GADA,8PADA;AAAA,CAxB6B,CAA1B","sourcesContent":["import { createGlobalStyle, css } from \"styled-components\";\n\nexport const StyledSlideLeftRight = createGlobalStyle<{\n  $direction: \"left\" | \"right\";\n}>`\n\n${(props) =>\n  props.$direction === \"left\" &&\n  css`\n    &.c-slide-enter {\n      position: absolute;\n      transform: translateX(100%);\n    }\n    &.c-slide-enter-active {\n      transform: translateX(0%);\n      transition: all 200ms ease;\n    }\n    &.c-slide-exit {\n      position: absolute;\n    }\n    &.c-slide-exit-active {\n      transform: translateX(-100%);\n      transition: all 200ms ease;\n    }\n  `}\n\n  ${(props) =>\n    props.$direction === \"right\" &&\n    css`\n      &.c-slide-enter {\n        position: absolute;\n        transform: translateX(-100%);\n      }\n      &.c-slide-enter-active {\n        transform: translateX(0%);\n        transition: all 200ms ease;\n      }\n\n      &.c-slide-exit {\n        position: absolute;\n      }\n\n      &.c-slide-exit-active {\n        transform: translateX(100%);\n        transition: all 200ms ease;\n      }\n    `}\n\n`;\n"],"file":"Styles.js"}

package/dist/index.js

@@ -9075,30 +9075,26 @@
   };
   Slide.displayName = "Slide";
 
-  var StyledSlideLeftRightTransition = styled__default["default"](reactTransitionGroup.CSSTransition).withConfig({
-    displayName: "Styles__StyledSlideLeftRightTransition",
-    componentId: "sc-ewkpq8-0"
-  })(["", " ", ""], function (props) {
+  var StyledSlideLeftRight = styled.createGlobalStyle(["", " ", ""], function (props) {
     return props.$direction === "left" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(-100%);transition:all 200ms ease;}"]);
   }, function (props) {
     return props.$direction === "right" && styled.css(["&.c-slide-enter{position:absolute;transform:translateX(-100%);}&.c-slide-enter-active{transform:translateX(0%);transition:all 200ms ease;}&.c-slide-exit{position:absolute;}&.c-slide-exit-active{transform:translateX(100%);transition:all 200ms ease;}"]);
   });
-  StyledSlideLeftRightTransition.displayName = "StyledSlideLeftRightTransition";
 
-  var _excluded$3 = ["children", "direction", "className"];
+  var _excluded$3 = ["children", "direction"];
   var SlideLeftRightTransition = function SlideLeftRightTransition(_ref) {
     var children = _ref.children,
         _ref$direction = _ref.direction,
         direction = _ref$direction === void 0 ? "left" : _ref$direction,
-        className = _ref.className,
         props = _objectWithoutProperties(_ref, _excluded$3);
 
-    return /*#__PURE__*/React__default["default"].createElement(StyledSlideLeftRightTransition, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, _extends({
       timeout: 200,
-      classNames: classnames__default["default"](className, "c-slide"),
-      unmountOnExit: true,
+      classNames: "c-slide",
+      unmountOnExit: true
+    }, props), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, children, /*#__PURE__*/React__default["default"].createElement(StyledSlideLeftRight, {
       $direction: direction
-    }, props), children);
+    })));
   };
   SlideLeftRightTransition.displayName = "SlideLeftRightTransition";